/*! wp-prefixed: v1 */ /* ============================================================================ Tool Directory — shared stylesheet (v1 Clean Directory) Used by: /tool/index.html (list) + /tool/[slug]/index.html (100 detail pages) Scope: .tool-list-page + .tool-detail-page (no global leak) ---------------------------------------------------------------------------- TABLE OF CONTENTS 1. DESIGN TOKENS (search: "-------- Design tokens") 2. RESET (search: "-------- Scoped reset") 3. CONTAINER (search: "tl-container") 4. SHARED COMPONENTS (navbar · card · badge · button · footer) - NAVBAR (search: "============ NAVBAR") - CARD (search: "============ CARD (shared") - BUTTONS (search: "============ BUTTONS") - FOOTER (search: "============ FOOTER") 5. LIST-ONLY (hero · searchbar · sidebar · grid · drawer) - HERO (search: "============ HERO (list page)") - MAIN LAYOUT (search: "============ MAIN LAYOUT") - SIDEBAR / DRAWER (search: "============ SIDEBAR") - CARD GRID (search: "============ CARD GRID") - EMPTY + LOAD MORE (search: "============ EMPTY STATE") 6. DETAIL-ONLY (td-hero · td-section · td-usp · td-info · td-related) - Search for: "============ DETAIL PAGE" 7. A11Y / FOCUS (bottom of file — :focus-visible) CONVENTIONS - .tl-* = shared or list-context component - .td-* = detail-only component - --td-* = design tokens (named after detail legacy; shared by both pages) - Reset uses :where() → zero specificity so class-level rules always win. ============================================================================ */ /* -------- Design tokens (Fintalent Design System V2) -------- Mapped from static/token.ts — 12-step Radix-compatible palettes. PURPLE.700 is the brand anchor. All values pinned to token.ts keys. */ .tool-list-page, .tool-detail-page { /* Force light UA rendering — prevents WP `color-scheme: dark` inherited from or theme from repainting form controls (search input, select) with dark backgrounds and inverting native widget colors. `only light` blocks dark even when the user-agent prefers dark. */ color-scheme: only light; /* Brand */ --td-accent: #3A0CA3; /* PURPLE.700 — brand anchor */ --td-accent-hover: #2F0A85; /* PURPLE.800 */ --td-accent-primary:#4A0FD1; /* PURPLE.600 — BRAND_PRIMARY (CTA alt) */ --td-accent-soft: #EAE0FC; /* PURPLE.100 */ --td-accent-ghost: #F5F0FF; /* PURPLE.50 — subtle bg */ --td-accent-2: #7741F1; /* PURPLE.400 */ /* Pink accent (AI / highlight) */ --td-pink: #FF66F0; /* PINK.400 */ --td-pink-soft: #FFE0FC; /* PINK.100 */ /* Surfaces */ --td-bg: #FFFFFF; --td-bg-alt: #FAFAFB; /* NEUTRAL.25 */ --td-bg-muted: #F0EFF3; /* NEUTRAL.100 */ /* Borders (purple-tinted neutrals) */ --td-border: #E4E2EA; /* NEUTRAL.200 */ --td-border-strong: #CCC8D5; /* NEUTRAL.300 */ --td-border-subtle: #F0EFF3; /* NEUTRAL.100 */ /* Text */ --td-text: #1F1926; /* NEUTRAL.900 */ --td-text-2: #51485B; /* NEUTRAL.600 */ --td-text-3: #756A84; /* NEUTRAL.500 */ --td-text-muted: #9D92AA; /* NEUTRAL.400 */ /* AI badge */ --td-ai-bg: #FFE0FC; /* PINK.100 */ --td-ai-fg: #A00E94; /* PINK.700 */ /* Semantic (for future use — compare modal yes/no chips etc.) */ --td-success-bg: #D4FAE7; /* SUCCESS.100 */ --td-success-fg: #027A48; /* SUCCESS.700 */ --td-error-bg: #FEE4E2; /* ERROR.100 */ --td-error-fg: #B42318; /* ERROR.700 */ --td-container: 1280px; --td-radius-sm: 6px; --td-radius: 12px; --td-radius-lg: 16px; --td-shadow-card: 0 1px 2px rgba(10,10,10,0.04); --td-shadow-card-hover: 0 8px 24px rgba(58,12,163,0.10), 0 2px 6px rgba(10,10,10,0.04); --td-shadow-drawer: 0 -8px 24px rgba(0,0,0,0.12); font-family: 'sofia-pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.55; color: var(--td-text); background: var(--td-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* -------- Scoped reset (zero-specificity via :where) -------- */ /* Using :where() so ANY class-level rule wins over these resets. Prevents accidental overrides of button color etc. — critical when .tl-btn--primary wants white text. */ :where(.tool-list-page, .tool-detail-page) * { box-sizing: border-box; margin: 0; padding: 0; } :where(.tool-list-page, .tool-detail-page) a { color: inherit; text-decoration: none; } :where(.tool-list-page, .tool-detail-page) img, :where(.tool-list-page, .tool-detail-page) svg { display: block; max-width: 100%; } :where(.tool-list-page, .tool-detail-page) button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; } :where(.tool-list-page, .tool-detail-page) h1, :where(.tool-list-page, .tool-detail-page) h2, :where(.tool-list-page, .tool-detail-page) h3, :where(.tool-list-page, .tool-detail-page) h4 { letter-spacing: -0.02em; font-weight: 600; color: var(--td-text); } .tool-list-page .tl-container, .tool-detail-page .tl-container, .tool-list-page .td-container, .tool-detail-page .td-container { max-width: var(--td-container); margin: 0 auto; padding: 0 24px; } @media (max-width: 768px) { .tool-list-page .tl-container, .tool-detail-page .tl-container, .tool-list-page .td-container, .tool-detail-page .td-container { padding: 0 16px; } } /* ============================================================================ NAVBAR (shared list + detail) ============================================================================ */ .tool-list-page .tl-navbar, .tool-detail-page .tl-navbar, .tool-list-page .td-navbar, .tool-detail-page .td-navbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--td-border-subtle); } .tool-list-page .tl-navbar__inner, .tool-detail-page .tl-navbar__inner, .tool-list-page .td-navbar__inner, .tool-detail-page .td-navbar__inner { max-width: var(--td-container); margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .tool-list-page .tl-navbar__brand, .tool-detail-page .tl-navbar__brand, .tool-list-page .td-navbar__brand, .tool-detail-page .td-navbar__brand { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--td-text); } .tool-list-page .tl-navbar__brand-dot, .tool-detail-page .tl-navbar__brand-dot, .tool-list-page .td-navbar__brand-dot, .tool-detail-page .td-navbar__brand-dot { color: var(--td-pink); } .tool-list-page .tl-navbar__nav, .tool-detail-page .tl-navbar__nav, .tool-list-page .td-navbar__nav, .tool-detail-page .td-navbar__nav { display: flex; gap: 32px; align-items: center; } .tool-list-page .tl-navbar__link, .tool-detail-page .tl-navbar__link, .tool-list-page .td-navbar__link, .tool-detail-page .td-navbar__link { font-size: 14px; font-weight: 500; color: var(--td-text-2); padding: 8px 0; transition: color .15s ease; } .tool-list-page .tl-navbar__link:hover, .tool-detail-page .tl-navbar__link:hover, .tool-list-page .td-navbar__link:hover, .tool-detail-page .td-navbar__link:hover { color: var(--td-text); } .tool-list-page .tl-navbar__link.is-active, .tool-detail-page .tl-navbar__link.is-active, .tool-list-page .td-navbar__link.is-active, .tool-detail-page .td-navbar__link.is-active { color: var(--td-accent); font-weight: 600; } .tool-list-page .tl-navbar__link--cta, .tool-detail-page .tl-navbar__link--cta, .tool-list-page .td-navbar__link--cta, .tool-detail-page .td-navbar__link--cta { padding: 8px 18px; border-radius: 999px; background: var(--td-text); color: #fff !important; } .tool-list-page .tl-navbar__link--cta:hover, .tool-detail-page .tl-navbar__link--cta:hover, .tool-list-page .td-navbar__link--cta:hover, .tool-detail-page .td-navbar__link--cta:hover { background: var(--td-accent); } .tool-list-page .tl-navbar__menu-toggle, .tool-detail-page .tl-navbar__menu-toggle, .tool-list-page .td-navbar__menu-toggle, .tool-detail-page .td-navbar__menu-toggle { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 4px; } .tool-list-page .tl-navbar__menu-toggle span, .tool-detail-page .tl-navbar__menu-toggle span, .tool-list-page .td-navbar__menu-toggle span, .tool-detail-page .td-navbar__menu-toggle span { display: block; width: 22px; height: 2px; background: var(--td-text); border-radius: 2px; } @media (max-width: 900px) { .tool-list-page .tl-navbar__nav, .tool-detail-page .tl-navbar__nav, .tool-list-page .td-navbar__nav, .tool-detail-page .td-navbar__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--td-border); flex-direction: column; gap: 0; padding: 8px 16px 16px; align-items: stretch; } .tool-list-page .tl-navbar__nav.is-open, .tool-detail-page .tl-navbar__nav.is-open, .tool-list-page .td-navbar__nav.is-open, .tool-detail-page .td-navbar__nav.is-open { display: flex; } .tool-list-page .tl-navbar__link, .tool-detail-page .tl-navbar__link, .tool-list-page .td-navbar__link, .tool-detail-page .td-navbar__link { padding: 14px 8px; border-bottom: 1px solid var(--td-border-subtle); } .tool-list-page .tl-navbar__link--cta, .tool-detail-page .tl-navbar__link--cta, .tool-list-page .td-navbar__link--cta, .tool-detail-page .td-navbar__link--cta { text-align: center; margin-top: 12px; border: 0; } .tool-list-page .tl-navbar__menu-toggle, .tool-detail-page .tl-navbar__menu-toggle, .tool-list-page .td-navbar__menu-toggle, .tool-detail-page .td-navbar__menu-toggle { display: flex; } } /* ============================================================================ HERO (list page) ============================================================================ */ .tool-list-page .tl-hero, .tool-detail-page .tl-hero { padding: 72px 0 48px; background: var(--td-bg); border-bottom: 1px solid var(--td-border-subtle); } /* Two-column: copy (left, fluid) + stats card (right, fixed) */ .tool-list-page .tl-hero__grid, .tool-detail-page .tl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: end; } @media (max-width: 960px) { .tool-list-page .tl-hero__grid, .tool-detail-page .tl-hero__grid { grid-template-columns: 1fr; gap: 32px; align-items: stretch; } } .tool-list-page .tl-hero__copy, .tool-detail-page .tl-hero__copy { min-width: 0; } /* Empty placeholder for hero right column — user will drop an image/illustration later. Invisible in production; keeps grid 2-col layout ready. */ .tool-list-page .tl-hero__art, .tool-detail-page .tl-hero__art { display: block; min-height: 1px; } .tool-list-page .tl-hero__art:empty, .tool-detail-page .tl-hero__art:empty { background: transparent; } @media (max-width: 960px) { .tool-list-page .tl-hero__art:empty, .tool-detail-page .tl-hero__art:empty { display: none; } } /* ============ EDITORIAL SNAPSHOT CARD (right column) ============ */ /* Hero-metric card inspired by dashboard UI: dominant number + 2 bars (verified vs pending) + trust row. Signals editorial transparency. */ .tool-list-page .tl-hero__snap, .tool-detail-page .tl-hero__snap { position: relative; display: block; padding-top: 14px; /* breathing room for the floating chip */ } /* Floating brand chip that overlaps the card */ .tool-list-page .tl-hero__snap-chip, .tool-detail-page .tl-hero__snap-chip { position: absolute; top: 0; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: #fff; border: 1px solid var(--td-border); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--td-accent); box-shadow: 0 2px 6px rgba(10,10,20,0.04); } .tool-list-page .tl-hero__snap-chip-dot, .tool-detail-page .tl-hero__snap-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--td-accent); } /* Main white card */ .tool-list-page .tl-hero__snap-card, .tool-detail-page .tl-hero__snap-card { background: #fff; border: 1px solid var(--td-border); border-radius: 16px; padding: 36px 24px 22px; box-shadow: 0 4px 16px rgba(10,10,20,0.04); display: flex; flex-direction: column; gap: 18px; } .tool-list-page .tl-hero__snap-title-row, .tool-detail-page .tl-hero__snap-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 20px; } .tool-list-page .tl-hero__snap-title, .tool-detail-page .tl-hero__snap-title { font-size: 15px; font-weight: 700; color: var(--td-text); letter-spacing: -0.01em; margin: 0; flex: 1; min-width: 0; } .tool-list-page .tl-hero__snap-year, .tool-detail-page .tl-hero__snap-year { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--td-bg-muted); color: var(--td-text-2); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .tool-list-page .tl-hero__snap-tag, .tool-detail-page .tl-hero__snap-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #ECFDF5; /* SUCCESS.50 */ color: #027A48; /* SUCCESS.700 */ font-size: 11px; font-weight: 700; letter-spacing: 0.05em; } .tool-list-page .tl-hero__snap-tag::before, .tool-detail-page .tl-hero__snap-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #12B76A; /* SUCCESS.500 */ } /* Dominant hero metric */ .tool-list-page .tl-hero__snap-metric, .tool-detail-page .tl-hero__snap-metric { text-align: center; padding: 4px 0 8px; } .tool-list-page .tl-hero__snap-metric strong, .tool-detail-page .tl-hero__snap-metric strong { display: block; font-size: 72px; line-height: 0.95; font-weight: 800; letter-spacing: -0.05em; color: var(--td-accent); font-variant-numeric: tabular-nums; } .tool-list-page .tl-hero__snap-metric span, .tool-detail-page .tl-hero__snap-metric span { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--td-text-3); letter-spacing: 0.01em; } /* Progress bars */ .tool-list-page .tl-hero__snap-bars, .tool-detail-page .tl-hero__snap-bars { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--td-border-subtle); } .tool-list-page .tl-hero__bar, .tool-detail-page .tl-hero__bar { display: flex; flex-direction: column; gap: 6px; } .tool-list-page .tl-hero__bar-head, .tool-detail-page .tl-hero__bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .tool-list-page .tl-hero__bar-label, .tool-detail-page .tl-hero__bar-label { font-size: 13px; font-weight: 500; color: var(--td-text-2); } .tool-list-page .tl-hero__bar-pct, .tool-detail-page .tl-hero__bar-pct { font-size: 13px; font-weight: 700; color: var(--td-text); font-variant-numeric: tabular-nums; } .tool-list-page .tl-hero__bar-track, .tool-detail-page .tl-hero__bar-track { height: 6px; background: var(--td-bg-muted); border-radius: 999px; overflow: hidden; } .tool-list-page .tl-hero__bar-fill, .tool-detail-page .tl-hero__bar-fill { height: 100%; border-radius: 999px; transition: width .3s ease; } .tool-list-page .tl-hero__bar-fill--verified, .tool-detail-page .tl-hero__bar-fill--verified { background: var(--td-accent); } /* PURPLE.700 */ .tool-list-page .tl-hero__bar-fill--pending, .tool-detail-page .tl-hero__bar-fill--pending { background: #DC6803; } /* WARNING.600 amber */ /* Trust row at bottom */ .tool-list-page .tl-hero__snap-foot, .tool-detail-page .tl-hero__snap-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; padding-top: 14px; border-top: 1px solid var(--td-border-subtle); } .tool-list-page .tl-hero__snap-trust, .tool-detail-page .tl-hero__snap-trust { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--td-text-3); letter-spacing: 0.01em; } .tool-list-page .tl-hero__snap-trust svg, .tool-detail-page .tl-hero__snap-trust svg { flex-shrink: 0; color: var(--td-accent); } /* Responsive — keep prominent on mobile */ @media (max-width: 960px) { .tool-list-page .tl-hero__snap-card, .tool-detail-page .tl-hero__snap-card { padding: 32px 20px 20px; } .tool-list-page .tl-hero__snap-metric strong, .tool-detail-page .tl-hero__snap-metric strong { font-size: 60px; } } .tool-list-page .tl-hero__eyebrow, .tool-detail-page .tl-hero__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--td-accent); margin-bottom: 16px; } .tool-list-page .tl-hero__title, .tool-detail-page .tl-hero__title { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; max-width: 880px; margin-bottom: 16px; } .tool-list-page .tl-hero__lead, .tool-detail-page .tl-hero__lead { font-size: 17px; line-height: 1.6; color: var(--td-text-2); max-width: 680px; margin-bottom: 32px; } .tool-list-page .tl-searchbar, .tool-detail-page .tl-searchbar { position: relative; max-width: 640px; margin-bottom: 20px; } .tool-list-page .tl-searchbar__input, .tool-detail-page .tl-searchbar__input { width: 100%; height: 56px; padding: 0 48px 0 52px; border: 1px solid var(--td-border-strong); border-radius: var(--td-radius); font-size: 16px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; color: var(--td-text); font-family: inherit; } .tool-list-page .tl-searchbar__input:focus, .tool-detail-page .tl-searchbar__input:focus { outline: 0; border-color: var(--td-accent); box-shadow: 0 0 0 4px var(--td-accent-soft); } .tool-list-page .tl-searchbar__icon, .tool-detail-page .tl-searchbar__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--td-text-3); pointer-events: none; } .tool-list-page .tl-searchbar__clear, .tool-detail-page .tl-searchbar__clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--td-bg-muted); color: var(--td-text-2); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; } .tool-list-page .tl-searchbar__clear:hover, .tool-detail-page .tl-searchbar__clear:hover { background: var(--td-border); color: var(--td-text); } .tool-list-page .tl-hero__status, .tool-detail-page .tl-hero__status { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--td-text-2); } .tool-list-page .tl-hero__status strong, .tool-detail-page .tl-hero__status strong { color: var(--td-text); font-weight: 600; } .tool-list-page .tl-filters-toggle, .tool-detail-page .tl-filters-toggle { display: none; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--td-border-strong); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; color: var(--td-text); transition: border-color .15s ease, background .15s ease; } .tool-list-page .tl-filters-toggle:hover, .tool-detail-page .tl-filters-toggle:hover { border-color: var(--td-accent); } @media (max-width: 1024px) { .tool-list-page .tl-filters-toggle, .tool-detail-page .tl-filters-toggle { display: inline-flex; } } /* ============================================================================ MAIN LAYOUT (list — sidebar + grid) ============================================================================ */ .tool-list-page .tl-main, .tool-detail-page .tl-main { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding-top: 40px; padding-bottom: 80px; } @media (max-width: 1024px) { .tool-list-page .tl-main, .tool-detail-page .tl-main { grid-template-columns: 1fr; gap: 0; } } /* ============================================================================ SIDEBAR / DRAWER (filters) ============================================================================ */ .tool-list-page .tl-sidebar__inner, .tool-detail-page .tl-sidebar__inner { padding: 4px; } .tool-list-page .tl-sidebar__head, .tool-detail-page .tl-sidebar__head { display: none; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--td-border-subtle); } .tool-list-page .tl-sidebar__title, .tool-detail-page .tl-sidebar__title { font-size: 16px; font-weight: 600; } .tool-list-page .tl-sidebar__close, .tool-detail-page .tl-sidebar__close { width: 36px; height: 36px; font-size: 24px; line-height: 1; color: var(--td-text-2); border-radius: 50%; } .tool-list-page .tl-sidebar__close:hover, .tool-detail-page .tl-sidebar__close:hover { background: var(--td-bg-muted); } .tool-list-page .tl-facet, .tool-detail-page .tl-facet { margin-bottom: 28px; } .tool-list-page .tl-facet__title, .tool-detail-page .tl-facet__title { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--td-text-3); margin-bottom: 12px; } .tool-list-page .tl-facet__items, .tool-detail-page .tl-facet__items { display: flex; flex-direction: column; gap: 4px; } .tool-list-page .tl-facet__item, .tool-detail-page .tl-facet__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .12s ease; font-size: 14px; color: var(--td-text-2); } .tool-list-page .tl-facet__item:hover, .tool-detail-page .tl-facet__item:hover { background: var(--td-bg-muted); } .tool-list-page .tl-facet__item input[type="checkbox"], .tool-detail-page .tl-facet__item input[type="checkbox"], .tool-list-page .tl-facet__item input[type="radio"], .tool-detail-page .tl-facet__item input[type="radio"] { width: 16px; height: 16px; accent-color: var(--td-accent); cursor: pointer; flex-shrink: 0; } .tool-list-page .tl-facet__label, .tool-detail-page .tl-facet__label { flex: 1; } .tool-list-page .tl-facet__count, .tool-detail-page .tl-facet__count { font-size: 12px; color: var(--td-text-muted); background: var(--td-bg-muted); padding: 2px 8px; border-radius: 999px; } .tool-list-page .tl-facet__item.is-collapsed, .tool-detail-page .tl-facet__item.is-collapsed { display: none; } .tool-list-page .tl-facet.is-expanded .tl-facet__item.is-collapsed, .tool-detail-page .tl-facet.is-expanded .tl-facet__item.is-collapsed { display: flex; } .tool-list-page .tl-facet__show-all, .tool-detail-page .tl-facet__show-all { margin-top: 8px; font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 6px; } .tool-list-page .tl-facet__show-all:hover, .tool-detail-page .tl-facet__show-all:hover { background: var(--td-accent-soft); } .tool-list-page .tl-facet__select, .tool-detail-page .tl-facet__select { width: 100%; padding: 10px 14px; border: 1px solid var(--td-border-strong); border-radius: 8px; background: #fff; font-size: 14px; color: var(--td-text); font-family: inherit; cursor: pointer; } .tool-list-page .tl-facet__select:focus, .tool-detail-page .tl-facet__select:focus { outline: 0; border-color: var(--td-accent); box-shadow: 0 0 0 3px var(--td-accent-soft); } .tool-list-page .tl-sidebar__actions, .tool-detail-page .tl-sidebar__actions { display: flex; gap: 12px; padding-top: 20px; border-top: 1px solid var(--td-border-subtle); margin-top: 8px; } .tool-list-page .tl-sidebar__actions .tl-btn, .tool-detail-page .tl-sidebar__actions .tl-btn { flex: 1; } /* Drawer mode (mobile) */ @media (max-width: 1024px) { .tool-list-page .tl-sidebar, .tool-detail-page .tl-sidebar { position: fixed; left: 0; right: 0; bottom: 0; max-height: 82vh; background: #fff; border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: var(--td-shadow-drawer); z-index: 100; transform: translateY(100%); transition: transform .25s ease; overflow: hidden; display: flex; flex-direction: column; } .tool-list-page .tl-sidebar.is-open, .tool-detail-page .tl-sidebar.is-open { transform: translateY(0); } .tool-list-page .tl-sidebar__head, .tool-detail-page .tl-sidebar__head { display: flex; } .tool-list-page .tl-sidebar__inner, .tool-detail-page .tl-sidebar__inner { padding: 20px; overflow-y: auto; flex: 1; } .tool-list-page .tl-sidebar-backdrop, .tool-detail-page .tl-sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99; } body.tl-drawer-open { overflow: hidden; } } /* ============================================================================ CARD GRID ============================================================================ */ .tool-list-page .tl-grid, .tool-detail-page .tl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 1280px) { .tool-list-page .tl-grid, .tool-detail-page .tl-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .tool-list-page .tl-grid, .tool-detail-page .tl-grid { grid-template-columns: 1fr; gap: 16px; } } /* ============================================================================ CARD (shared — list page + related section on detail pages) ============================================================================ */ .tool-list-page .tl-card, .tool-detail-page .tl-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--td-border); border-radius: var(--td-radius); padding: 20px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; box-shadow: var(--td-shadow-card); } .tool-list-page .tl-card:hover, .tool-detail-page .tl-card:hover { border-color: var(--td-accent-soft); box-shadow: var(--td-shadow-card-hover); transform: translateY(-2px); } .tool-list-page .tl-card.is-hidden, .tool-detail-page .tl-card.is-hidden { display: none !important; } .tool-list-page .tl-card__head, .tool-detail-page .tl-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .tool-list-page .tl-card__logo, .tool-detail-page .tl-card__logo { width: 56px; height: 56px; border-radius: 10px; border: 1px solid var(--td-border-subtle); background: #fff; object-fit: contain; flex-shrink: 0; } .tool-list-page .tl-card__meta, .tool-detail-page .tl-card__meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 60%; } .tool-list-page .tl-badge, .tool-detail-page .tl-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; white-space: nowrap; } .tool-list-page .tl-badge--cat, .tool-detail-page .tl-badge--cat { background: var(--td-accent-soft); color: var(--td-accent); } .tool-list-page .tl-badge--ai, .tool-detail-page .tl-badge--ai { background: var(--td-ai-bg); color: var(--td-ai-fg); } /* Category badge as clickable filter (visual affordance) */ .tool-list-page .tl-badge--clickable, .tool-detail-page .tl-badge--clickable { border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: background-color .12s ease, border-color .12s ease, transform .12s ease; } .tool-list-page .tl-badge--clickable:hover, .tool-detail-page .tl-badge--clickable:hover { background: var(--td-accent); color: #fff; transform: translateY(-1px); } /* ---- Active filter pills bar (above grid) ---- */ .tool-list-page .tl-active-filters, .tool-detail-page .tl-active-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 16px; background: var(--td-bg-alt); border: 1px solid var(--td-border-subtle); border-radius: var(--td-radius); margin-bottom: 20px; } .tool-list-page .tl-active-filters__label, .tool-detail-page .tl-active-filters__label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--td-text-3); } .tool-list-page .tl-active-filters__pills, .tool-detail-page .tl-active-filters__pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } .tool-list-page .tl-active-filters__clear, .tool-detail-page .tl-active-filters__clear { font-size: 13px; font-weight: 600; color: var(--td-accent); padding: 6px 12px; border-radius: 6px; background: transparent; border: 0; cursor: pointer; transition: background-color .12s ease; } .tool-list-page .tl-active-filters__clear:hover, .tool-detail-page .tl-active-filters__clear:hover { background: var(--td-accent-soft); } .tool-list-page .tl-pill, .tool-detail-page .tl-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; background: #fff; border: 1px solid var(--td-border); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--td-text); cursor: pointer; transition: border-color .12s ease, color .12s ease; font-family: inherit; } .tool-list-page .tl-pill:hover, .tool-detail-page .tl-pill:hover { border-color: var(--td-accent); color: var(--td-accent); } .tool-list-page .tl-pill__x, .tool-detail-page .tl-pill__x { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--td-bg-muted); font-size: 14px; line-height: 1; } .tool-list-page .tl-pill:hover .tl-pill__x, .tool-detail-page .tl-pill:hover .tl-pill__x { background: var(--td-accent); color: #fff; } .tool-list-page .sr-only, .tool-detail-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---- Scroll-to-top button ---- */ .tool-list-page .tl-scrolltop, .tool-detail-page .tl-scrolltop { position: fixed; bottom: 24px; right: 24px; z-index: 50; width: 44px; height: 44px; border-radius: 50%; background: var(--td-text); color: #fff; display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.18); transition: background-color .15s, transform .15s, box-shadow .15s; } .tool-list-page .tl-scrolltop:hover, .tool-detail-page .tl-scrolltop:hover { background: var(--td-accent); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(58,12,163,0.3); } .tool-list-page .tl-scrolltop[hidden], .tool-detail-page .tl-scrolltop[hidden] { display: none; } /* ---- Search input: subtle keyboard shortcut hint ---- */ .tool-list-page .tl-searchbar::after, .tool-detail-page .tl-searchbar::after { content: "Press /"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 600; color: var(--td-text-muted); background: var(--td-bg-muted); padding: 3px 8px; border-radius: 5px; pointer-events: none; font-family: inherit; letter-spacing: 0.04em; transition: opacity .15s; } .tool-list-page .tl-searchbar:focus-within::after, .tool-detail-page .tl-searchbar:focus-within::after { opacity: 0; } @media (max-width: 640px) { .tool-list-page .tl-searchbar::after, .tool-detail-page .tl-searchbar::after { display: none; } } .tool-list-page .tl-card__name, .tool-detail-page .tl-card__name { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; color: var(--td-text); } .tool-list-page .tl-card__country, .tool-detail-page .tl-card__country { font-size: 12px; color: var(--td-text-3); margin-bottom: 12px; font-weight: 500; } .tool-list-page .tl-card__desc, .tool-detail-page .tl-card__desc { font-size: 14px; color: var(--td-text-2); line-height: 1.55; margin-bottom: 20px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tool-list-page .tl-card__cta, .tool-detail-page .tl-card__cta { font-size: 13px; font-weight: 700; color: var(--td-accent); display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 8px 14px; border: 1px solid var(--td-border); border-radius: 8px; transition: background-color .15s ease, border-color .15s ease, color .15s ease, gap .15s ease; align-self: flex-start; } .tool-list-page .tl-card__cta:hover, .tool-detail-page .tl-card__cta:hover { gap: 10px; color: var(--td-accent-hover); background: var(--td-accent-soft); border-color: var(--td-accent-soft); } /* ============================================================================ EMPTY STATE + LOAD MORE ============================================================================ */ .tool-list-page .tl-empty, .tool-detail-page .tl-empty { padding: 64px 40px; text-align: center; background: var(--td-bg-alt); border-radius: var(--td-radius); border: 1px dashed var(--td-border); display: flex; flex-direction: column; align-items: center; gap: 16px; } .tool-list-page .tl-empty__icon, .tool-detail-page .tl-empty__icon { color: var(--td-text-3); margin-bottom: 8px; } .tool-list-page .tl-empty__title, .tool-detail-page .tl-empty__title { font-size: 20px; font-weight: 700; color: var(--td-text); margin: 0; } .tool-list-page .tl-empty__lead, .tool-detail-page .tl-empty__lead { font-size: 14px; color: var(--td-text-2); margin: 0; } .tool-list-page .tl-empty p, .tool-detail-page .tl-empty p { font-size: 16px; color: var(--td-text-2); margin: 0; } .tool-list-page .tl-empty__chips, .tool-detail-page .tl-empty__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 16px; } .tool-list-page .tl-empty__chip, .tool-detail-page .tl-empty__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--td-border-strong); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--td-text); cursor: pointer; transition: border-color .12s, background-color .12s, color .12s; font-family: inherit; } .tool-list-page .tl-empty__chip:hover, .tool-detail-page .tl-empty__chip:hover { border-color: var(--td-accent); background: var(--td-accent); color: #fff; } .tool-list-page .tl-empty__chip span, .tool-detail-page .tl-empty__chip span { font-size: 11px; background: var(--td-bg-muted); color: var(--td-text-3); padding: 1px 7px; border-radius: 999px; } .tool-list-page .tl-empty__chip:hover span, .tool-detail-page .tl-empty__chip:hover span { background: rgba(255,255,255,0.22); color: #fff; } .tool-list-page .tl-loadmore, .tool-detail-page .tl-loadmore { text-align: center; margin-top: 40px; } .tool-list-page .tl-loadmore.is-hidden, .tool-detail-page .tl-loadmore.is-hidden { display: none; } /* ============================================================================ BUTTONS (shared) ============================================================================ */ .tool-list-page .tl-btn, .tool-detail-page .tl-btn, .tool-list-page .td-btn, .tool-detail-page .td-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 22px; min-height: 44px; border-radius: 12px; font-size: 14px; font-weight: 600; font-family: inherit; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; cursor: pointer; text-decoration: none; line-height: 1; white-space: nowrap; overflow: visible; box-sizing: border-box; vertical-align: middle; } .tool-list-page .tl-btn > span[aria-hidden], .tool-detail-page .tl-btn > span[aria-hidden], .tool-list-page .td-btn > span[aria-hidden], .tool-detail-page .td-btn > span[aria-hidden] { display: inline-block; font-size: 1em; line-height: 1; font-family: system-ui, -apple-system, 'Segoe UI Symbol', sans-serif; } .tool-list-page .tl-btn--primary, .tool-detail-page .tl-btn--primary, .tool-list-page .td-btn--primary, .tool-detail-page .td-btn--primary { background: var(--td-accent); color: #fff; border: 1px solid var(--td-accent); } .tool-list-page .tl-btn--primary:hover, .tool-detail-page .tl-btn--primary:hover, .tool-list-page .td-btn--primary:hover, .tool-detail-page .td-btn--primary:hover { background: var(--td-accent-hover); border-color: var(--td-accent-hover); } .tool-list-page .tl-btn--secondary, .tool-detail-page .tl-btn--secondary, .tool-list-page .td-btn--secondary, .tool-detail-page .td-btn--secondary { background: #fff; color: var(--td-text); border: 1px solid var(--td-border-strong); } .tool-list-page .tl-btn--secondary:hover, .tool-detail-page .tl-btn--secondary:hover, .tool-list-page .td-btn--secondary:hover, .tool-detail-page .td-btn--secondary:hover { border-color: var(--td-accent); color: var(--td-accent); } .tool-list-page .tl-btn--ghost, .tool-detail-page .tl-btn--ghost, .tool-list-page .td-btn--ghost, .tool-detail-page .td-btn--ghost { background: transparent; color: var(--td-text-2); border: 1px solid transparent; } .tool-list-page .tl-btn--ghost:hover, .tool-detail-page .tl-btn--ghost:hover, .tool-list-page .td-btn--ghost:hover, .tool-detail-page .td-btn--ghost:hover { background: var(--td-bg-muted); color: var(--td-text); } /* ============================================================================ FOOTER (shared) ============================================================================ */ .tool-list-page .tl-footer, .tool-detail-page .tl-footer, .tool-list-page .td-footer, .tool-detail-page .td-footer { border-top: 1px solid var(--td-border-subtle); padding: 32px 0; background: var(--td-bg-alt); } .tool-list-page .tl-footer__inner, .tool-detail-page .tl-footer__inner, .tool-list-page .td-footer__inner, .tool-detail-page .td-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: var(--td-text-3); } .tool-list-page .tl-footer__brand a, .tool-detail-page .tl-footer__brand a, .tool-list-page .td-footer__brand a, .tool-detail-page .td-footer__brand a { color: var(--td-text-2); text-decoration: underline; text-underline-offset: 2px; } .tool-list-page .tl-footer__attribution, .tool-detail-page .tl-footer__attribution, .tool-list-page .td-footer__attribution, .tool-detail-page .td-footer__attribution { color: var(--td-text-muted); } .tool-list-page .tl-footer__attribution a, .tool-detail-page .tl-footer__attribution a, .tool-list-page .td-footer__attribution a, .tool-detail-page .td-footer__attribution a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ============================================================================ DETAIL PAGE (.tool-detail-page) — Phase 03 uses these ============================================================================ */ .tool-list-page .td-breadcrumb, .tool-detail-page .td-breadcrumb { max-width: var(--td-container); margin: 0 auto; padding: 20px 24px 0; font-size: 13px; color: var(--td-text-3); } .tool-list-page .td-breadcrumb ol, .tool-detail-page .td-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .tool-list-page .td-breadcrumb li:not(:last-child)::after, .tool-detail-page .td-breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--td-text-muted); } .tool-list-page .td-breadcrumb a, .tool-detail-page .td-breadcrumb a { color: var(--td-text-2); } .tool-list-page .td-breadcrumb a:hover, .tool-detail-page .td-breadcrumb a:hover { color: var(--td-accent); } .tool-list-page .td-breadcrumb [aria-current="page"], .tool-detail-page .td-breadcrumb [aria-current="page"] { color: var(--td-text); font-weight: 500; } .tool-list-page .td-hero, .tool-detail-page .td-hero { padding: 40px 0 48px; border-bottom: 1px solid var(--td-border-subtle); } .tool-list-page .td-hero__inner, .tool-detail-page .td-hero__inner { max-width: var(--td-container); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 120px 1fr; gap: 32px; align-items: start; } .tool-list-page .td-hero__logo, .tool-detail-page .td-hero__logo { width: 120px; height: 120px; border-radius: 20px; border: 1px solid var(--td-border-subtle); background: #fff; object-fit: contain; } .tool-list-page .td-hero__meta, .tool-detail-page .td-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .tool-list-page .td-hero__title, .tool-detail-page .td-hero__title { font-size: clamp(32px, 5vw, 44px); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 8px; font-weight: 700; } .tool-list-page .td-hero__country, .tool-detail-page .td-hero__country { font-size: 14px; color: var(--td-text-3); margin-bottom: 16px; } .tool-list-page .td-hero__desc, .tool-detail-page .td-hero__desc { font-size: 17px; line-height: 1.55; color: var(--td-text-2); margin-bottom: 24px; max-width: 720px; } .tool-list-page .td-hero__actions, .tool-detail-page .td-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 768px) { .tool-list-page .td-hero__inner, .tool-detail-page .td-hero__inner { grid-template-columns: 1fr; gap: 20px; } .tool-list-page .td-hero__logo, .tool-detail-page .td-hero__logo { width: 88px; height: 88px; border-radius: 16px; } } .tool-list-page .td-section, .tool-detail-page .td-section { max-width: var(--td-container); margin: 0 auto; padding: 56px 24px; border-bottom: 1px solid var(--td-border-subtle); } .tool-list-page .td-section__title, .tool-detail-page .td-section__title { font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.02em; margin-bottom: 16px; font-weight: 700; } .tool-list-page .td-section__lead, .tool-detail-page .td-section__lead { font-size: 16px; color: var(--td-text-2); max-width: 720px; line-height: 1.6; } .tool-list-page .td-usp, .tool-detail-page .td-usp { list-style: none; counter-reset: usp-counter; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } @media (max-width: 900px) { .tool-list-page .td-usp, .tool-detail-page .td-usp { grid-template-columns: 1fr; } } .tool-list-page .td-usp li, .tool-detail-page .td-usp li { counter-increment: usp-counter; display: block; padding: 24px 24px 28px; background: #ffffff; border: 1px solid var(--td-border); border-radius: var(--td-radius); font-size: 15px; color: var(--td-text); line-height: 1.55; position: relative; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .tool-list-page .td-usp li:hover, .tool-detail-page .td-usp li:hover { border-color: var(--td-accent-soft); box-shadow: var(--td-shadow-card); transform: translateY(-2px); } .tool-list-page .td-usp li::before, .tool-detail-page .td-usp li::before { content: "0" counter(usp-counter); display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--td-accent); margin-bottom: 14px; line-height: 1; } /* ============================================================================ AT A GLANCE (detail page) — decision-helper block that replaced the legacy "AI Capabilities" one-sentence card. Layout mirrors .td-facts (dl rows with left key + right value) but with chip-based values. ============================================================================ */ .tool-list-page .td-glance__grid, .tool-detail-page .td-glance__grid { margin: 0; padding: 4px 0; display: flex; flex-direction: column; } .tool-list-page .td-glance__row, .tool-detail-page .td-glance__row { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--td-border); align-items: center; } .tool-list-page .td-glance__row:last-child, .tool-detail-page .td-glance__row:last-child { border-bottom: 0; } .tool-list-page .td-glance__key, .tool-detail-page .td-glance__key { font-size: 13px; font-weight: 600; color: var(--td-text-2); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .tool-list-page .td-glance__value, .tool-detail-page .td-glance__value { font-size: 15px; color: var(--td-text); line-height: 1.5; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tool-list-page .td-glance__chip, .tool-detail-page .td-glance__chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.4; border: 1px solid transparent; } .tool-list-page .td-glance__chip--good, .tool-detail-page .td-glance__chip--good { background: #ECFDF5; /* SUCCESS.50 */ color: #027A48; /* SUCCESS.700 */ border-color: #A3F2C9; /* SUCCESS.200 */ } .tool-list-page .td-glance__chip--warn, .tool-detail-page .td-glance__chip--warn { background: #FFFAEB; /* WARNING.50 */ color: #B54708; /* WARNING.700 */ border-color: #FDDE94; /* WARNING.200 */ } .tool-list-page .td-glance__chip--neutral, .tool-detail-page .td-glance__chip--neutral { background: #EFEBFE; /* PURPLE.100 */ color: var(--td-accent); /* PURPLE.700 */ border-color: #D7CDFD; /* PURPLE.200 */ } .tool-list-page .td-glance__note, .tool-detail-page .td-glance__note { font-size: 14px; color: var(--td-text-2); font-weight: 400; } @media (max-width: 640px) { .tool-list-page .td-glance__row, .tool-detail-page .td-glance__row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; } } /* Legacy AI section — kept during migration but no longer emitted. */ .tool-list-page .td-ai, .tool-detail-page .td-ai { display: flex; gap: 20px; align-items: flex-start; padding: 28px; background: linear-gradient(135deg, var(--td-accent-soft), #fff); border: 1px solid var(--td-accent-soft); /* PURPLE.100 */ border-radius: var(--td-radius-lg); margin-top: 24px; } .tool-list-page .td-ai__icon, .tool-detail-page .td-ai__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--td-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; } .tool-list-page .td-ai__body, .tool-detail-page .td-ai__body { flex: 1; } .tool-list-page .td-ai__body h3, .tool-detail-page .td-ai__body h3 { font-size: 16px; margin-bottom: 8px; color: var(--td-accent); } .tool-list-page .td-ai__body p, .tool-detail-page .td-ai__body p { font-size: 15px; color: var(--td-text); line-height: 1.6; } /* ---- KEY FACTS (was td-info) — icon-led
list replacing the old 2×2 bordered grid. Shows only fields that have data; Country + Category omitted because they already render in the hero badges (avoid duplicate data). */ .tool-list-page .td-facts, .tool-detail-page .td-facts { display: flex; flex-direction: column; margin-top: 16px; max-width: 720px; } .tool-list-page .td-facts__row, .tool-detail-page .td-facts__row { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--td-border-subtle); } .tool-list-page .td-facts__row:last-child, .tool-detail-page .td-facts__row:last-child { border-bottom: 0; } .tool-list-page .td-facts__key, .tool-detail-page .td-facts__key { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--td-text-3); margin: 0; } .tool-list-page .td-facts__icon, .tool-detail-page .td-facts__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--td-text-3); flex-shrink: 0; } .tool-list-page .td-facts__value, .tool-detail-page .td-facts__value { font-size: 15px; color: var(--td-text); font-weight: 500; margin: 0; word-break: break-word; } .tool-list-page .td-facts__value a, .tool-detail-page .td-facts__value a { color: var(--td-accent); font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; } .tool-list-page .td-facts__value a:hover, .tool-detail-page .td-facts__value a:hover { border-bottom-color: var(--td-accent); } .tool-list-page .td-facts__ext, .tool-detail-page .td-facts__ext { display: inline-block; font-size: 0.85em; color: var(--td-text-3); margin-left: 2px; } @media (max-width: 640px) { .tool-list-page .td-facts__row, .tool-detail-page .td-facts__row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; } } .tool-list-page .td-related, .tool-detail-page .td-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; } @media (max-width: 1024px) { .tool-list-page .td-related, .tool-detail-page .td-related { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .tool-list-page .td-related, .tool-detail-page .td-related { grid-template-columns: 1fr; } } .tool-list-page .td-final-cta, .tool-detail-page .td-final-cta { max-width: var(--td-container); margin: 0 auto; padding: 64px 24px 80px; text-align: center; } .tool-list-page .td-final-cta h2, .tool-detail-page .td-final-cta h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 12px; letter-spacing: -0.02em; } .tool-list-page .td-final-cta p, .tool-detail-page .td-final-cta p { color: var(--td-text-2); font-size: 16px; margin-bottom: 24px; } /* ============================================================================ COMPARE FEATURE (list page) ============================================================================ */ /* Compare button on each card (top-right absolute) */ .tool-list-page .tl-card, .tool-detail-page .tl-card { position: relative; } .tool-list-page .tl-card__compare, .tool-detail-page .tl-card__compare { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--td-border); color: var(--td-text-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: all .15s ease; font-family: inherit; box-shadow: var(--td-shadow-card); } .tool-list-page .tl-card__compare:hover, .tool-detail-page .tl-card__compare:hover { border-color: var(--td-accent); color: var(--td-accent); transform: scale(1.08); } .tool-list-page .tl-card__compare.is-active, .tool-detail-page .tl-card__compare.is-active { background: var(--td-accent); color: #fff; border-color: var(--td-accent); } .tool-list-page .tl-card__compare.is-active svg, .tool-detail-page .tl-card__compare.is-active svg { transform: rotate(45deg); } .tool-list-page .tl-card__compare svg, .tool-detail-page .tl-card__compare svg { transition: transform .2s ease; } .tool-list-page .tl-card.is-compared, .tool-detail-page .tl-card.is-compared { border-color: var(--td-accent); box-shadow: 0 0 0 2px var(--td-accent-soft); } /* Sticky compare tray (bottom fixed) */ .tool-list-page .tl-compare-tray, .tool-detail-page .tl-compare-tray { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 70; max-width: 720px; width: calc(100% - 40px); background: var(--td-text); color: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); animation: tl-tray-slide-in .25s ease; } @keyframes tl-tray-slide-in { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } } .tool-list-page .tl-compare-tray.is-limit, .tool-detail-page .tl-compare-tray.is-limit { animation: tl-tray-shake .4s ease; } @keyframes tl-tray-shake { 0%, 100% { transform: translate(-50%, 0); } 25% { transform: translate(calc(-50% - 8px), 0); } 75% { transform: translate(calc(-50% + 8px), 0); } } .tool-list-page .tl-compare-tray[hidden], .tool-detail-page .tl-compare-tray[hidden] { display: none; } .tool-list-page .tl-compare-tray__inner, .tool-detail-page .tl-compare-tray__inner { display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 20px; } .tool-list-page .tl-compare-tray__left, .tool-detail-page .tl-compare-tray__left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } .tool-list-page .tl-compare-tray__count, .tool-detail-page .tl-compare-tray__count { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); white-space: nowrap; } .tool-list-page .tl-compare-tray__count strong, .tool-detail-page .tl-compare-tray__count strong { color: #fff; background: var(--td-accent); padding: 3px 9px; border-radius: 999px; margin-right: 4px; font-size: 12px; } .tool-list-page .tl-compare-tray__items, .tool-detail-page .tl-compare-tray__items { display: flex; gap: 8px; flex-wrap: wrap; } .tool-list-page .tl-compare-thumb, .tool-detail-page .tl-compare-thumb { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; cursor: pointer; transition: all .12s; } .tool-list-page .tl-compare-thumb:hover, .tool-detail-page .tl-compare-thumb:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); } .tool-list-page .tl-compare-thumb img, .tool-detail-page .tl-compare-thumb img { width: 28px; height: 28px; border-radius: 6px; margin: 4px; } .tool-list-page .tl-compare-thumb__x, .tool-detail-page .tl-compare-thumb__x { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; background: var(--td-accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; opacity: 0; transition: opacity .12s; } .tool-list-page .tl-compare-thumb:hover .tl-compare-thumb__x, .tool-detail-page .tl-compare-thumb:hover .tl-compare-thumb__x { opacity: 1; } .tool-list-page .tl-compare-tray__actions, .tool-detail-page .tl-compare-tray__actions { display: flex; gap: 8px; flex-shrink: 0; } .tool-list-page .tl-compare-tray__actions .tl-btn--ghost, .tool-detail-page .tl-compare-tray__actions .tl-btn--ghost { color: rgba(255,255,255,0.7); border: 0; padding: 0 14px; min-height: 36px; } .tool-list-page .tl-compare-tray__actions .tl-btn--ghost:hover, .tool-detail-page .tl-compare-tray__actions .tl-btn--ghost:hover { background: rgba(255,255,255,0.08); color: #fff; } .tool-list-page .tl-compare-tray__actions .tl-btn--primary, .tool-detail-page .tl-compare-tray__actions .tl-btn--primary { padding: 0 18px; min-height: 36px; } .tool-list-page .tl-compare-tray__actions .tl-btn--primary:disabled, .tool-detail-page .tl-compare-tray__actions .tl-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } @media (max-width: 640px) { .tool-list-page .tl-compare-tray, .tool-detail-page .tl-compare-tray { width: calc(100% - 24px); } .tool-list-page .tl-compare-tray__inner, .tool-detail-page .tl-compare-tray__inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; } .tool-list-page .tl-compare-tray__actions .tl-btn--primary, .tool-detail-page .tl-compare-tray__actions .tl-btn--primary { width: 100%; } } /* ---- Compare modal ---- */ .tool-list-page .tl-compare-modal, .tool-detail-page .tl-compare-modal { position: fixed; inset: 0; z-index: 100; } .tool-list-page .tl-compare-modal[hidden], .tool-detail-page .tl-compare-modal[hidden] { display: none; } .tool-list-page .tl-compare-modal__backdrop, .tool-detail-page .tl-compare-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 20, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .tool-list-page .tl-compare-modal__panel, .tool-detail-page .tl-compare-modal__panel { position: absolute; inset: 24px; max-width: 1400px; max-height: calc(100vh - 48px); margin: auto; background: #fff; border-radius: var(--td-radius-lg); box-shadow: 0 40px 80px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; } .tool-list-page .tl-compare-modal__head, .tool-detail-page .tl-compare-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; border-bottom: 1px solid var(--td-border); flex-shrink: 0; } .tool-list-page .tl-compare-modal__head h2, .tool-detail-page .tl-compare-modal__head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .tool-list-page .tl-compare-modal__close, .tool-detail-page .tl-compare-modal__close { width: 40px; height: 40px; border-radius: 50%; font-size: 28px; line-height: 1; color: var(--td-text-2); transition: background-color .12s, color .12s; } .tool-list-page .tl-compare-modal__close:hover, .tool-detail-page .tl-compare-modal__close:hover { background: var(--td-bg-muted); color: var(--td-text); } .tool-list-page .tl-compare-modal__body, .tool-detail-page .tl-compare-modal__body { padding: 24px 28px; overflow: auto; flex: 1; } .tool-list-page .tl-compare-empty, .tool-detail-page .tl-compare-empty { text-align: center; padding: 60px 20px; color: var(--td-text-3); } /* Comparison grid (CSS grid per row) */ .tool-list-page .tl-cmp, .tool-detail-page .tl-cmp { display: grid; gap: 0; } .tool-list-page .tl-cmp__row, .tool-detail-page .tl-cmp__row { display: grid; grid-template-columns: inherit; border-bottom: 1px solid var(--td-border-subtle); } .tool-list-page .tl-cmp__row:last-child, .tool-detail-page .tl-cmp__row:last-child { border-bottom: 0; } .tool-list-page .tl-cmp__row--hero, .tool-detail-page .tl-cmp__row--hero { border-bottom: 2px solid var(--td-border); } .tool-list-page .tl-cmp__label, .tool-detail-page .tl-cmp__label { padding: 20px 20px 20px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--td-text-3); align-self: start; position: sticky; left: 0; background: #fff; z-index: 2; } .tool-list-page .tl-cmp__cell, .tool-detail-page .tl-cmp__cell { padding: 20px 16px; font-size: 14px; color: var(--td-text); line-height: 1.5; border-left: 1px solid var(--td-border-subtle); min-width: 0; } .tool-list-page .tl-cmp__cell:first-child, .tool-detail-page .tl-cmp__cell:first-child { border-left: 0; } .tool-list-page .tl-cmp__cell a, .tool-detail-page .tl-cmp__cell a { color: var(--td-accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } .tool-list-page .tl-cmp__hero, .tool-detail-page .tl-cmp__hero { text-align: center; padding: 20px 16px; } .tool-list-page .tl-cmp__hero img, .tool-detail-page .tl-cmp__hero img { width: 64px; height: 64px; border-radius: 12px; margin: 0 auto 12px; border: 1px solid var(--td-border); } .tool-list-page .tl-cmp__hero h3, .tool-detail-page .tl-cmp__hero h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; } .tool-list-page .tl-cmp__hero p, .tool-detail-page .tl-cmp__hero p { font-size: 12px; color: var(--td-accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; } .tool-list-page .tl-cmp__yes, .tool-detail-page .tl-cmp__yes { display: inline-block; background: var(--td-success-bg); color: var(--td-success-fg); padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } .tool-list-page .tl-cmp__no, .tool-detail-page .tl-cmp__no { display: inline-block; background: var(--td-bg-muted); color: var(--td-text-3); padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } .tool-list-page .tl-cmp__dash, .tool-detail-page .tl-cmp__dash { color: var(--td-text-muted); } .tool-list-page .tl-cmp__usp, .tool-detail-page .tl-cmp__usp { display: flex; flex-direction: column; gap: 8px; counter-reset: cmp-usp; margin: 0; } .tool-list-page .tl-cmp__usp li, .tool-detail-page .tl-cmp__usp li { counter-increment: cmp-usp; padding: 8px 10px 8px 32px; background: var(--td-bg-alt); border-radius: 6px; font-size: 13px; line-height: 1.45; position: relative; list-style: none; } .tool-list-page .tl-cmp__usp li::before, .tool-detail-page .tl-cmp__usp li::before { content: counter(cmp-usp); position: absolute; left: 10px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--td-accent); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* Small button variant for modal */ .tool-list-page .tl-btn--sm, .tool-detail-page .tl-btn--sm { min-height: 34px; font-size: 12px; padding: 0 14px; } /* Body scroll lock when modal open */ body.tl-modal-open { overflow: hidden; } @media (max-width: 900px) { .tool-list-page .tl-compare-modal__panel, .tool-detail-page .tl-compare-modal__panel { inset: 12px; border-radius: 12px; } .tool-list-page .tl-compare-modal__head, .tool-detail-page .tl-compare-modal__head { padding: 16px 20px; } .tool-list-page .tl-compare-modal__body, .tool-detail-page .tl-compare-modal__body { padding: 16px; } .tool-list-page .tl-cmp__label, .tool-detail-page .tl-cmp__label { padding: 14px 12px 14px 0; font-size: 10px; } .tool-list-page .tl-cmp__cell, .tool-detail-page .tl-cmp__cell { padding: 14px 10px; font-size: 13px; } } /* ============================================================================ FOCUS (a11y) ============================================================================ */ .tool-list-page :focus-visible, .tool-detail-page :focus-visible { outline: 2px solid var(--td-accent); outline-offset: 2px; border-radius: 4px; } .tool-list-page input:focus-visible, .tool-detail-page input:focus-visible { outline: 0; } /* ============================================================================ INSIGHTS DASHBOARD — V1 (Kira spike, Phase 02) Gauge + radar + benchmark bars + pros/cons grid + competitor table. Uses existing --td-* tokens. No hardcoded hex unless a new semantic token. ============================================================================ */ /* --- Insights: layout ---------------------------------------------------- */ .tool-list-page .td-insights, .tool-detail-page .td-insights { } .tool-list-page .td-insights__grid, .tool-detail-page .td-insights__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; } .tool-list-page .td-insights__chart, .tool-detail-page .td-insights__chart { border: 1px solid var(--td-border); border-radius: var(--td-radius); background: var(--td-bg); padding: 16px; } .tool-list-page .td-insights__chart-title, .tool-detail-page .td-insights__chart-title { font-size: 14px; font-weight: 600; color: var(--td-text-2); margin: 0 0 8px; } /* Reserve space to prevent CLS while ApexCharts lazily initializes. */ .tool-list-page .td-gauge, .tool-detail-page .td-gauge, .tool-list-page .td-radar, .tool-detail-page .td-radar { min-height: 280px; } @media (max-width: 768px) { .tool-list-page .td-insights__grid, .tool-detail-page .td-insights__grid { grid-template-columns: 1fr; } } /* --- Insights: benchmark bars ------------------------------------------- */ .tool-list-page .td-insights__bars-title, .tool-detail-page .td-insights__bars-title { font-size: 14px; font-weight: 600; color: var(--td-text-2); margin: 24px 0 12px; } .tool-list-page .td-benchmark-bars, .tool-detail-page .td-benchmark-bars { display: flex; flex-direction: column; gap: 10px; } .tool-list-page .td-benchmark-bar, .tool-detail-page .td-benchmark-bar { display: grid; grid-template-columns: 120px 1fr 60px; align-items: center; gap: 12px; } .tool-list-page .td-benchmark-bar__label, .tool-detail-page .td-benchmark-bar__label { font-size: 13px; color: var(--td-text-2); font-weight: 500; } .tool-list-page .td-benchmark-bar__track, .tool-detail-page .td-benchmark-bar__track { position: relative; height: 10px; background: var(--td-border); border-radius: 4px; overflow: visible; } .tool-list-page .td-benchmark-bar__fill, .tool-detail-page .td-benchmark-bar__fill { height: 100%; background: var(--td-accent); border-radius: 4px; transition: width 0.4s ease; max-width: 100%; } .tool-list-page .td-benchmark-bar__avg-tick, .tool-detail-page .td-benchmark-bar__avg-tick { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--td-text); transform: translateX(-1px); border-radius: 1px; } .tool-list-page .td-benchmark-bar__value, .tool-detail-page .td-benchmark-bar__value { font-size: 13px; font-weight: 600; color: var(--td-text); text-align: right; } @media (max-width: 640px) { .tool-list-page .td-benchmark-bar, .tool-detail-page .td-benchmark-bar { grid-template-columns: 96px 1fr 44px; gap: 8px; } } /* --- Insights: badges row ----------------------------------------------- */ .tool-list-page .td-insights__badges, .tool-detail-page .td-insights__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .tool-list-page .td-badge-rank, .tool-detail-page .td-badge-rank, .tool-list-page .td-badge-ai-maturity, .tool-detail-page .td-badge-ai-maturity, .tool-list-page .td-badge-trend, .tool-detail-page .td-badge-trend { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: 999px; line-height: 1.4; } .tool-list-page .td-badge-rank, .tool-detail-page .td-badge-rank { background: var(--td-accent); /* PURPLE.700 #3A0CA3 — V2 brand anchor */ color: #FFFFFF; } .tool-list-page .td-badge-ai-maturity, .tool-detail-page .td-badge-ai-maturity, .tool-list-page .td-badge-trend, .tool-detail-page .td-badge-trend { background: var(--td-accent-soft); color: var(--td-accent-hover); } /* --- Strengths & Considerations (was td-pros-cons) ---------------------- */ /* Two color-tinted cards, icon-prefixed items, italic humanized source line. Columns only render when they have items — avoids empty-column asymmetry. Green for strengths, amber for considerations (not red — softer register). */ .tool-list-page .td-procons__grid, .tool-detail-page .td-procons__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; align-items: start; } /* Option C: columnar editorial layout — no card bg/border. Column identity is carried entirely by the coloured heading + per-item icon. */ .tool-list-page .td-procons__col, .tool-detail-page .td-procons__col { padding: 0; } .tool-list-page .td-procons__heading, .tool-detail-page .td-procons__heading { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 16px; } .tool-list-page .td-procons__col--pros .td-procons__heading, .tool-detail-page .td-procons__col--pros .td-procons__heading { color: #027A48; } /* SUCCESS.700 */ .tool-list-page .td-procons__col--cons .td-procons__heading, .tool-detail-page .td-procons__col--cons .td-procons__heading { color: #B54708; } /* WARNING.700 */ /* Badge rules kept for backwards-compat — the renderer no longer emits them. */ .tool-list-page .td-procons__badge, .tool-detail-page .td-procons__badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; } .tool-list-page .td-procons__badge--pros, .tool-detail-page .td-procons__badge--pros { background: #12B76A; /* SUCCESS.500 */ color: #fff; } .tool-list-page .td-procons__badge--cons, .tool-detail-page .td-procons__badge--cons { background: #F79009; /* WARNING.500 */ color: #fff; } .tool-list-page .td-procons__list, .tool-detail-page .td-procons__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .tool-list-page .td-procons__item, .tool-detail-page .td-procons__item { display: flex; gap: 10px; align-items: flex-start; } .tool-list-page .td-procons__icon, .tool-detail-page .td-procons__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 2px; } .tool-list-page .td-procons__col--pros .td-procons__icon, .tool-detail-page .td-procons__col--pros .td-procons__icon { color: #12B76A; } /* SUCCESS.500 */ .tool-list-page .td-procons__col--cons .td-procons__icon, .tool-detail-page .td-procons__col--cons .td-procons__icon { color: #DC6803; } /* WARNING.600 */ .tool-list-page .td-procons__body, .tool-detail-page .td-procons__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .tool-list-page .td-procons__text, .tool-detail-page .td-procons__text { font-size: 15px; line-height: 1.5; color: var(--td-text); } .tool-list-page .td-procons__source, .tool-detail-page .td-procons__source { font-size: 12px; font-style: italic; color: var(--td-text-3); letter-spacing: 0.01em; } .tool-list-page .td-procons__col--pros .td-procons__source, .tool-detail-page .td-procons__col--pros .td-procons__source { color: #05603A; } /* SUCCESS.800 */ .tool-list-page .td-procons__col--cons .td-procons__source, .tool-detail-page .td-procons__col--cons .td-procons__source { color: #8F3408; } /* WARNING.800 */ @media (max-width: 640px) { .tool-list-page .td-procons__grid, .tool-detail-page .td-procons__grid { grid-template-columns: 1fr; gap: 28px; } } /* --- Competitor comparison table ---------------------------------------- */ .tool-list-page .td-competitor__scroll, .tool-detail-page .td-competitor__scroll { overflow-x: auto; margin-top: 12px; border: 1px solid var(--td-border); border-radius: var(--td-radius); } .tool-list-page .td-competitor-table, .tool-detail-page .td-competitor-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14px; } .tool-list-page .td-competitor-table thead th, .tool-detail-page .td-competitor-table thead th { position: sticky; top: 0; text-align: left; padding: 10px 14px; background: var(--td-bg-alt); color: var(--td-text-2); font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--td-border); } .tool-list-page .td-competitor-table tbody td, .tool-detail-page .td-competitor-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--td-border-subtle); color: var(--td-text); vertical-align: middle; } .tool-list-page .td-competitor-table tbody tr:last-child td, .tool-detail-page .td-competitor-table tbody tr:last-child td { border-bottom: 0; } .tool-list-page .td-competitor-table tbody tr.is-current td, .tool-detail-page .td-competitor-table tbody tr.is-current td { background: var(--td-accent-ghost); } .tool-list-page .td-competitor-table th:first-child, .tool-detail-page .td-competitor-table th:first-child, .tool-list-page .td-competitor-table td:first-child, .tool-detail-page .td-competitor-table td:first-child { position: sticky; left: 0; background: var(--td-bg); z-index: 1; } .tool-list-page .td-competitor-table thead th:first-child, .tool-detail-page .td-competitor-table thead th:first-child { background: var(--td-bg-alt); } .tool-list-page .td-competitor-table tbody tr.is-current td:first-child, .tool-detail-page .td-competitor-table tbody tr.is-current td:first-child { background: var(--td-accent-ghost); } .tool-list-page .td-competitor-table a, .tool-detail-page .td-competitor-table a { color: var(--td-accent); text-decoration: none; font-weight: 500; } .tool-list-page .td-competitor-table a:hover, .tool-detail-page .td-competitor-table a:hover { text-decoration: underline; } /* ============================================================================ INSIGHTS CHIPS (Phase 03) — overall score · benchmark rank · AI maturity Added to tl-card at list-page level. Score chip is absolutely positioned top-right (below the compare button); benchmark badge sits below the name; AI chip replaces the old tl-badge--ai in the meta row. ============================================================================ */ /* Amber tokens for benchmark badges — kept adjacent to usage for easy lookup. */ :root { --td-amber-50: #FEF8E6; /* soft amber bg */ --td-amber-100: #FDE9A8; /* amber pill bg / border */ --td-amber-700: #8A5A00; /* amber badge text */ --td-amber-600: #AD7600; /* amber star / icon */ } .tool-list-page .tl-card__score, .tool-detail-page .tl-card__score { position: absolute; top: 50px; /* sits just below the compare button (12 + 30 + 8) */ right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--td-accent-soft); color: var(--td-accent); font-size: 12px; font-weight: 700; line-height: 1; box-shadow: var(--td-shadow-card); pointer-events: none; /* purely informational */ } .tool-list-page .tl-card__score-icon, .tool-detail-page .tl-card__score-icon { color: var(--td-amber-600); font-size: 13px; line-height: 1; } .tool-list-page .tl-card__score-num, .tool-detail-page .tl-card__score-num { font-variant-numeric: tabular-nums; } .tool-list-page .tl-card__rank-badge, .tool-detail-page .tl-card__rank-badge { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 6px; padding: 3px 8px; border-radius: 999px; background: var(--td-amber-50); border: 1px solid var(--td-amber-100); color: var(--td-amber-700); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; max-width: 100%; } .tool-list-page .tl-card__rank-badge-icon, .tool-detail-page .tl-card__rank-badge-icon { font-size: 12px; line-height: 1; } .tool-list-page .tl-card__rank-badge-text, .tool-detail-page .tl-card__rank-badge-text { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 180px; } .tool-list-page .tl-card__ai-chip, .tool-detail-page .tl-card__ai-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: var(--td-ai-bg); color: var(--td-ai-fg); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } /* ============================================================================ PHASE 05 — CONFIDENCE FALLBACK STATES ============================================================================ */ /* Muted "Awaiting benchmark" badge on list-page cards (low confidence) */ .tool-list-page .tl-card__confidence, .tool-detail-page .tl-card__confidence { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--td-bg-muted); color: var(--td-text-3); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; border: 1px solid var(--td-border-subtle); z-index: 2; } .tool-list-page .tl-card[data-confidence="low"], .tool-detail-page .tl-card[data-confidence="low"] { background: #fcfcfd; } /* Detail page — pending-benchmark block (replaces full dashboard) */ .tool-list-page .td-insights--pending .td-insights__pending, .tool-detail-page .td-insights--pending .td-insights__pending { display: flex; gap: 16px; align-items: flex-start; padding: 24px; background: var(--td-bg-alt); border: 1px dashed var(--td-border-strong); border-radius: var(--td-radius); margin-top: 16px; } .tool-list-page .td-insights__pending-icon, .tool-detail-page .td-insights__pending-icon { font-size: 28px; line-height: 1; color: var(--td-text-3); flex-shrink: 0; } .tool-list-page .td-insights__pending h3, .tool-detail-page .td-insights__pending h3 { font-size: 16px; font-weight: 700; color: var(--td-text); margin: 0 0 6px; } .tool-list-page .td-insights__pending p, .tool-detail-page .td-insights__pending p { font-size: 14px; line-height: 1.55; color: var(--td-text-2); margin: 0; max-width: 640px; } /* ============================================================================ HIDDEN ATTRIBUTE (WP theme defense) Some WP themes add broad rules (e.g. .entry-content > * { display: block }) that override the browser's default [hidden] { display: none }. Restore the expected semantics inside our wrappers. ============================================================================ */ .tool-list-page [hidden], .tool-detail-page [hidden] { display: none !important; }