/* ══════════════════════════════════════════════════════════════════════════ §FQP-HERO) Hero adjustments — the help mark and the pitch measure. The left column has no logo to load: the "brand" of a help centre is the question mark itself. `.atd-logo-plate` is reused verbatim (halo, radius, ramp, mobile step all come free) with a glyph inside it instead of an , so the hero's first 84px is identical geometry to every detail page. ══════════════════════════════════════════════════════════════════════════ */ /* `.atd-logo-letter` is reused rather than re-declared: it already owns the `--atd-logo` size ramp, the 24px radius, the blue gradient, the inset highlight, the drop shadow and the hover lift, and [[atd-hero-logo-ramp]] re-measured all of that for phones on 2026-08-13. Restating any of it here would fork that ramp. The class expects a LETTER; this plate holds a glyph, so the only overrides are killing the type slot and sizing the svg. No dark twin: the plate is an opaque gradient in both themes, which is exactly why `.atd-logo-tile` (the white one) has a twin and this does not. */ .v2x.atd.fqp .atd-logo-letter.fqp-logo-ic{ font-size:0; } .v2x.atd.fqp .fqp-logo-ic svg{ width:52%; height:52%; } /* The lede is the one long line in the hero and it sits above the search field, so it gets a reading measure rather than running the full column. */ .v2x.atd.fqp .atd-hero-body > .atd-desc{ max-width:64ch; } /* ══════════════════════════════════════════════════════════════════════════ §FQP-SEARCH) The search field — the hero's instrument. This is the one control the page exists for, so it is built at the same scale as the detail pages' primary CTA rather than as a form input: 58px tall, a 16px radius matching `.atd-statrail`, an inset top highlight, and a focus state that lights a blue ring the same width the accordion's `:focus-visible` uses (3px / .34 alpha) so the two agree. THE GLOW IS A SEPARATE ELEMENT, not a box-shadow transition. A shadow can only fade, and what reads as premium here is the ring ARRIVING — scale plus opacity — which needs its own painted box behind the field. ══════════════════════════════════════════════════════════════════════════ */ .v2x.atd.fqp .fqp-search{ position:relative; isolation:isolate; display:block; margin:0 0 10px; max-width:640px; } .v2x.atd.fqp .fqp-search-glow{ content:""; position:absolute; z-index:-1; inset:-3px; pointer-events:none; border-radius:19px; background:linear-gradient(135deg,#2060C0 0%,#3680ED 50%,#60A4F5 100%); opacity:0; transform:scale(.985); transition:opacity .3s ease, transform .42s cubic-bezier(.16,1,.3,1); } .v2x.atd.fqp .fqp-search:focus-within .fqp-search-glow{ opacity:.5; transform:scale(1); } .v2x.atd.fqp .fqp-search-in{ display:block; width:100%; /* Logical, not `padding:0 108px 0 52px`. The glyph is placed with `inset-inline-start` and the clear/kbd pair with `inset-inline-end`, so a PHYSICAL padding stays left-52/right-108 in RTL — the text then runs under the search icon on the right and leaves a 52px hole on the left. This is the one shorthand in the file that can be asymmetric across the inline axis; the two phone steps below were already logical. */ height:58px; padding-block:0; padding-inline:52px 108px; font-family:var(--font); font-size:1.02rem; font-weight:500; letter-spacing:-.011em; color:var(--ink); background:#fff; border:1px solid var(--line-strong); border-radius:16px; box-shadow:0 1px 2px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.9); transition:border-color .22s ease, box-shadow .24s ease, background-color .22s ease; -webkit-appearance:none; appearance:none; } /* The UA's own clear button would sit beside ours. */ .v2x.atd.fqp .fqp-search-in::-webkit-search-cancel-button, .v2x.atd.fqp .fqp-search-in::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; } .v2x.atd.fqp .fqp-search-in::placeholder{ color:var(--muted2); font-weight:400; opacity:1; } .v2x.atd.fqp .fqp-search-in:focus{ outline:none; border-color:rgba(54,128,237,.55); box-shadow:0 1px 2px rgba(15,23,42,.05), 0 10px 26px -14px rgba(32,96,192,.55); } body.theme-dark .v2x.atd.fqp .fqp-search-in{ background:#171922; color:var(--ink); border-color:#39415A; box-shadow:0 1px 2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); } body.theme-dark .v2x.atd.fqp .fqp-search-in:focus{ border-color:rgba(96,164,245,.62); box-shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -14px rgba(0,0,0,.9); } /* Leading glyph. Inline-start, not left — this kit is direction-agnostic and the page ships in an RTL locale too. */ .v2x.atd.fqp .fqp-search-ic{ position:absolute; inset-inline-start:18px; top:50%; translate:0 -50%; width:20px; height:20px; color:var(--muted2); pointer-events:none; transition:color .22s ease, transform .32s cubic-bezier(.16,1,.3,1); } .v2x.atd.fqp .fqp-search-ic svg{ width:100%; height:100%; display:block; } .v2x.atd.fqp .fqp-search:focus-within .fqp-search-ic{ color:var(--accent); transform:scale(1.06); } /* Trailing controls sit in one flex row so the clear button and the hint cannot overlap when both are visible. */ .v2x.atd.fqp .fqp-search-end{ position:absolute; inset-inline-end:12px; top:50%; translate:0 -50%; display:flex; align-items:center; gap:8px; } .v2x.atd.fqp .fqp-search-x{ flex:none; width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--accent-soft2); color:var(--muted); cursor:pointer; padding:0; transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .24s ease; } .v2x.atd.fqp .fqp-search-x svg{ width:15px; height:15px; } /* ⚠️ REQUIRED, not defensive. The UA stylesheet hides `[hidden]` with `display:none` at specificity 0, so the `display:inline-flex` above — at (0,4,0) — WINS, and the clear button the JS toggles with `.hidden` would never disappear. Any component in this kit that sets `display` and is also toggled with the attribute needs the same companion; `.fqp-toast` has one for exactly this reason, and `.fqp-none` deliberately sets no display at all. */ .v2x.atd.fqp .fqp-search-x[hidden]{ display:none; } body.theme-dark .v2x.atd.fqp .fqp-search-x{ background:rgba(54,128,237,.14); border-color:#39415A; color:#9CA2B3; } /* The `/` hint. Purely decorative — it is removed for touch, where there is no keyboard to press it on and it would just be a mystery glyph. */ .v2x.atd.fqp .fqp-kbd{ flex:none; min-width:26px; height:26px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.76rem; font-weight:600; line-height:1; color:var(--muted2); background:var(--accent-soft2); border:1px solid var(--line); border-radius:8px; box-shadow:0 1px 0 var(--line-strong); transition:opacity .2s ease; } body.theme-dark .v2x.atd.fqp .fqp-kbd{ background:rgba(255,255,255,.05); border-color:#39415A; box-shadow:none; color:#9CA2B3; } @media (hover:none), (pointer:coarse){ .v2x.atd.fqp .fqp-kbd{ display:none; } } .v2x.atd.fqp .fqp-search:focus-within .fqp-kbd{ opacity:0; } /* Live result line. It reserves its own height so the chips and the hero below do not jump by 20px on the first keystroke. */ .v2x.atd.fqp .fqp-count{ margin:0 0 14px; min-height:20px; font-size:.86rem; font-weight:600; color:var(--muted); } .v2x.atd.fqp .fqp-count b{ color:var(--accent-dark); font-weight:700; } body.theme-dark .v2x.atd.fqp .fqp-count b{ color:#9DC8FF; } /* ══════════════════════════════════════════════════════════════════════════ §FQP-SUGG) Search shortcuts. These are NOT topic navigation — the rail and the hero panel already do that job twice over. Each chip runs a real query, and the component only emits a term that matches at least two published answers, so a chip can never land on the empty state. ══════════════════════════════════════════════════════════════════════════ */ .v2x.atd.fqp .fqp-sugg{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 22px; } .v2x.atd.fqp .fqp-sugg-k{ font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted2); margin-inline-end:2px; } .v2x.atd.fqp .fqp-sug{ display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; font-family:var(--font); font-size:.83rem; font-weight:600; line-height:1.35; color:var(--muted); background:#fff; border:1px solid var(--line); cursor:pointer; transition:color .2s ease, background-color .2s ease, border-color .2s ease, transform .26s cubic-bezier(.16,1,.3,1), box-shadow .24s ease; } .v2x.atd.fqp .fqp-sug svg{ width:13px; height:13px; opacity:.75; } /* ⚠️ THE RAMP IS CAPPED AT #2B70D7, AND THAT IS A CONTRAST DECISION — the same one §CTAX records for the closing band. `--accent` (#3680ED) is an INK token and white on it measures 3.84:1, under the 4.5 bar for label text; #2B70D7 is the lightest blue that still clears it (4.77). The stops below are §CTAX's own (#2464C4 · #1E56AD · #17458F), so the active chip and the band read as one system rather than as two blues that happen to be near each other. */ .v2x.atd.fqp .fqp-sug.is-on{ color:#fff; background:linear-gradient(135deg,#2B70D7,#1E56AD); border-color:transparent; box-shadow:0 6px 16px -8px rgba(32,96,192,.8); } .v2x.atd.fqp .fqp-sug.is-on svg{ opacity:1; } body.theme-dark .v2x.atd.fqp .fqp-sug{ background:#1C1F2A; border-color:#39415A; color:#B9BFCE; } body.theme-dark .v2x.atd.fqp .fqp-sug.is-on{ color:#fff; border-color:transparent; box-shadow:none; } @media (hover:hover) and (pointer:fine){ .v2x.atd.fqp .fqp-sug:hover{ color:var(--accent-dark); border-color:rgba(54,128,237,.42); background:var(--accent-soft); transform:translateY(-1px); box-shadow:0 8px 18px -12px rgba(32,96,192,.7); } /* One step DOWN the same §CTAX ramp, not up: #2F76E4 was the obvious "brighter on hover" pick and it measures 4.35:1 for white — a hover state that fails the bar the resting state passes. */ .v2x.atd.fqp .fqp-sug.is-on:hover{ color:#fff; background:linear-gradient(135deg,#2464C4,#17458F); } body.theme-dark .v2x.atd.fqp .fqp-sug:hover{ color:#9DC8FF; background:rgba(54,128,237,.18); border-color:rgba(96,164,245,.4); box-shadow:none; } body.theme-dark .v2x.atd.fqp .fqp-sug.is-on:hover{ color:#fff; } } /* ══════════════════════════════════════════════════════════════════════════ §FQP-PANEL) Hero right column — the topic panel. THE MODEL PAGE'S SPEC PANEL, WITH TOPICS IN THE TILES. `/ai-models/{slug}` puts a fact panel where the tool page puts its gallery; a help centre has neither media nor specs, and the one thing a reader arriving here needs is "which of these piles is my question in". Same panel recipe (§SPINE-BLUE surface, `.atd-side-ic` header chip), same tone-cycled tiles, same two-up grid collapsing to one when the column narrows. The tiles ARE links — unlike the model page's read-only facts — so they take a real lift and the tone's own ink on hover. ══════════════════════════════════════════════════════════════════════════ */ .v2x.atd.fqp .fqp-aside{ display:flex; flex-direction:column; gap:16px; height:100%; } .v2x.atd.fqp .fqp-panel{ flex:1 1 auto; padding:20px; border-radius:16px; border:1px solid rgba(54,128,237,.22); background-image:linear-gradient(150deg, rgba(54,128,237,.075) 0%, rgba(54,128,237,0) 46%, rgba(54,128,237,.05) 100%); background-color:#fff; box-shadow:0 1px 2px rgba(15,23,42,.05), 0 14px 30px -18px rgba(15,23,42,.28); } body.theme-dark .v2x.atd.fqp .fqp-panel{ border-color:rgba(54,128,237,.30); background-image:linear-gradient(150deg, rgba(54,128,237,.13) 0%, rgba(54,128,237,0) 46%, rgba(54,128,237,.08) 100%); background-color:#171922; box-shadow:0 1px 2px rgba(0,0,0,.45), 0 18px 36px -20px rgba(0,0,0,.80); } .v2x.atd.fqp .fqp-panel-head{ display:flex; align-items:center; gap:11px; margin-bottom:15px; } .v2x.atd.fqp .fqp-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .v2x.atd.fqp .fqp-tile{ position:relative; isolation:isolate; display:flex; align-items:flex-start; gap:10px; padding:12px; border-radius:12px; background:var(--t-bg); border:1px solid var(--t-line); color:inherit; text-decoration:none; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .22s ease; } /* Stated with the :hover selector it has to survive — Tabler's base sheet underlines every hovered at (0,1,1). */ .v2x.atd.fqp .fqp-tile:hover, .v2x.atd.fqp .fqp-tile:focus{ text-decoration:none; color:inherit; } .v2x.atd.fqp .fqp-tile:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(54,128,237,.34); } .v2x.atd.fqp .fqp-tile-ic{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; /* --t-1p is the ramp measured for a white GLYPH (3:1). A white LABEL on the same fill would need 4.5 and fail; nothing here puts text on this plate. */ background:var(--t-1p); color:#fff; box-shadow:0 2px 6px rgba(var(--t-rgb),.35); transition:transform .38s cubic-bezier(.16,1,.3,1); } .v2x.atd.fqp .fqp-tile-ic svg{ width:17px; height:17px; } .v2x.atd.fqp .fqp-tile-tx{ min-width:0; display:flex; flex-direction:column; gap:3px; } .v2x.atd.fqp .fqp-tile-k{ font-size:.9rem; font-weight:700; line-height:1.35; letter-spacing:-.012em; color:var(--ink); overflow-wrap:anywhere; transition:color .2s ease; } .v2x.atd.fqp .fqp-tile-n{ font-size:.75rem; font-weight:600; line-height:1.3; color:var(--t-ink); } @media (hover:hover) and (pointer:fine){ .v2x.atd.fqp .fqp-tile:hover{ transform:translateY(-2px); border-color:rgba(var(--t-rgb),.55); box-shadow:0 10px 22px -14px rgba(var(--t-rgb),.85); } .v2x.atd.fqp .fqp-tile:hover .fqp-tile-ic{ transform:scale(1.08) rotate(-4deg); } .v2x.atd.fqp .fqp-tile:hover .fqp-tile-k{ color:var(--t-ink); } body.theme-dark .v2x.atd.fqp .fqp-tile:hover{ box-shadow:0 10px 22px -14px rgba(0,0,0,.9); } } /* ══════════════════════════════════════════════════════════════════════════ §FQP-SEC) Topic sections. The CARD is untouched: `.col-lg-8 > .v2-card` already gets §SPINE-BLUE's blue wash, tinted edge, corner bloom, gradient heading tile and orbit-ring hover. That is deliberate and matches the model page, where every main-column section is blue and hue lives in the TILES, not the card. What is added is the sub-line under the heading and the tone count pill beside it. ══════════════════════════════════════════════════════════════════════════ */ .v2x.atd.fqp .fqp-sec-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; } .v2x.atd.fqp .fqp-sec-tx{ min-width:0; flex:1 1 auto; } /* §SPINE-BLUE gives `.v2-section-title` its 11px gap and gradient tile; the title itself only needs its bottom margin dropped so the sub-line can own the spacing. */ .v2x.atd.fqp .fqp-sec-head .v2-section-title{ margin-bottom:6px; } .v2x.atd.fqp .fqp-sec-sub{ margin:0; font-size:.92rem; line-height:1.6; color:var(--muted); overflow-wrap:anywhere; } /* The count. A tone pill rather than a grey number: it is the one place each section states its own colour, which is what ties a card to its tile in the hero panel and its tab in the rail. */ .v2x.atd.fqp .fqp-sec-n{ flex:0 0 auto; margin-top:3px; display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:.78rem; font-weight:700; line-height:1.3; white-space:nowrap; color:var(--t-ink); background:var(--t-bg); border:1px solid var(--t-line); } .v2x.atd.fqp .fqp-sec-n svg{ width:13px; height:13px; } /* ══════════════════════════════════════════════════════════════════════════ §FQP-ITEM) Per-answer extras on top of §FAQX. ⚠️ THE `name` ATTRIBUTE IS DELIBERATELY ABSENT from these
. `v2.public.partials.faq-accordion` sets one, which makes the group EXCLUSIVE — correct for a twelve-row section on a product page, wrong here: it fights "expand all" and it closes every search hit but the last. This page therefore emits its own markup on the shared §FAQX classes rather than including that partial, and loads the partial's stylesheet directly. ══════════════════════════════════════════════════════════════════════════ */ /* The question row is `display:flex; align-items:center` in §FAQX. A tag under a long wrapped question needs a column, so the text side becomes its own stack and the mark stays vertically centred against it. */ .v2x.atd.fqp .fqp-q-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:7px; } .v2x.atd.fqp .fqp-tag{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--t-ink); background:var(--t-bg); border:1px solid var(--t-line); /* Admin-entered text. It wraps rather than being clipped — see the house rule at the top of this file. */ white-space:normal; overflow-wrap:anywhere; text-align:start; } /* Answer foot — copy link + the topic's source page. Separated from the copy by a hairline so it never reads as part of the answer. */ .v2x.atd.fqp .fqp-a-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); } body.theme-dark .v2x.atd.fqp .fqp-a-foot{ border-top-color:#39415A; } .v2x.atd.fqp .fqp-act{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:9px; font-family:var(--font); font-size:.8rem; font-weight:600; line-height:1.35; color:var(--muted); background:transparent; border:1px solid var(--line); cursor:pointer; text-decoration:none; transition:color .2s ease, background-color .2s ease, border-color .2s ease, transform .24s ease; } .v2x.atd.fqp .fqp-act:hover, .v2x.atd.fqp .fqp-act:focus{ text-decoration:none; } .v2x.atd.fqp .fqp-act svg{ width:14px; height:14px; } .v2x.atd.fqp .fqp-act:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(54,128,237,.34); } .v2x.atd.fqp .fqp-act.is-done{ color:#08795A; background:#E6F8F1; border-color:#C6EEDF; } body.theme-dark .v2x.atd.fqp .fqp-act{ border-color:#39415A; color:#9CA2B3; } body.theme-dark .v2x.atd.fqp .fqp-act.is-done{ color:#6EE7BE; background:rgba(16,185,129,.18); border-color:rgba(52,211,153,.30); } @media (hover:hover) and (pointer:fine){ .v2x.atd.fqp .fqp-act:hover{ color:var(--accent-dark); background:var(--accent-soft); border-color:rgba(54,128,237,.42); transform:translateY(-1px); } .v2x.atd.fqp .fqp-act.is-done:hover{ color:#08795A; background:#E6F8F1; border-color:#C6EEDF; } body.theme-dark .v2x.atd.fqp .fqp-act:hover{ color:#9DC8FF; background:rgba(54,128,237,.16); border-color:rgba(96,164,245,.4); } body.theme-dark .v2x.atd.fqp .fqp-act.is-done:hover{ color:#6EE7BE; background:rgba(16,185,129,.18); border-color:rgba(52,211,153,.30); } } /* Prose inside an answer. `.faqx-a` sets the type; these give the tags the editor is actually allowed to use somewhere to land, because `strip_tags` keeps