/* ═══════════════════════════════════════════════════════════════════════════ §BANDS — homepage parity for the three listing bands (2026-08-18) assets/css/ext/public-dir-bands.css ═══════════════════════════════════════════════════════════════════════════ Loaded on every page that renders `.dir-hh` — the listing, category hub, category and tag pages of all twenty verticals. ── The defect ──────────────────────────────────────────────────────────── The three bands below the results — Browse categories, "What is an … ?" and Latest Posts & AI News — were supposed to match the homepage. Measured side by side on 2026-08-18 they did not: homepage .hpx-igcard listing .dir-why-card card title tone ink (#1B5BB5 …) #111 on every card card background tone corner wash flat #fff card border tone @ 20% alpha flat grey #E7ECF3 The same three-way gap applied to `.dir-cat-card` against `.hpx-cat`. The result: six cards that read as one flat row instead of the tone-coded set the homepage shows. ⚠️ THE BASE SHEET ALREADY DECLARES THE TONE COLOUR AND LOSES. `v2-public-directory-listing.css` carries `.v2x .dir-why-title-c { color: var(--dwc-ink) }` at TOP LEVEL, in no media query, twice. It still computes to `rgb(17,17,17)` in the browser. The override was not findable: no rule in any loaded sheet matches the element with `color`, none carries `!important`, and nothing loaded after that sheet mentions `dir-why`. Whatever is winning, it is not visible from the CSSOM. So this sheet does not try to out-argue it on equal terms. Every rule below is written ONE class more specific than the base rule it is fixing AND ships in a file that loads later, so it wins on both axes at once. That is deliberate belt-and-braces: fixing a cascade you cannot fully see means removing the ambiguity rather than betting on source order. ── Tokens ──────────────────────────────────────────────────────────────── Nothing new is invented. The per-tone values already exist on the cards — `--dwc-ink|-bg|-line` on `.dir-why-card[data-tone]` and `--dtc-*` on `.dir-cat-card[data-tone]`, eight tones each. This sheet only spends them on the three properties the homepage spends them on. Add a tone to the base sheet and it flows here for free. ═══════════════════════════════════════════════════════════════════════════ */ /* ── §BANDS-WHY) The "What is an … ?" cards ─────────────────────────────── `:not(.is-lead)` because the lead card is a solid brand fill with white text — giving it a tint wash would muddy the gradient, and giving it a tone title would make it unreadable. It is already correct; leave it alone. */ /* ⚠️ THE SURFACE MOVED, exactly as §BANDS-CAT's did. The wash declared here was a corner radial in `--dwc-bg` — an OPAQUE pale hex faded to the `transparent` KEYWORD — plus a `--dwc-line` edge. Both are superseded by §WHYPRM at the foot of this file, which paints the homepage's two-layer `rgba(hue, …)` recipe instead and fades to `rgba(same-hue, 0)` so the gradient stops interpolating through transparent black. Nothing is declared here; this note is so the next reader does not go looking for a wash that used to be at this line. What stays below is the title colour, which is about TYPE, not surface. */ /* The title carries the tone AT REST. These cards are not links, so there is no hover state left to put the hue in — which is exactly the reasoning the homepage's own §WHY note records. */ .v2x .dir-why-card:not(.is-lead) .dir-why-title-c { color: var(--dwc-ink, #1B5BB5); /* The base sheet paints an underline-grow via a currentColor gradient on this element. With the title already tone-coloured that is two signals for one event, and the homepage drops it — so do we. */ background-image: none; } /* Dark: the `-ink` tokens are tuned as INK FOR A LIGHT SURFACE. On #0E0E11 the darker ones (emerald #08795A, rose #B31D3C) fall under 4.5:1 as body-sized text. The base sheet already ships a dark twin for the title, so nothing is needed here for it — and the card's own dark surface is §WHYPRM's, which is four alpha numbers rather than a `color-mix()` of a light-mode hex. */ /* ── §BANDS-CAT) The "Browse … Categories" rail cards ───────────────────── ⚠️ THE SURFACE MOVED. This block used to paint the rail card's wash here, as a corner radial in `--dtc-bg` — a PALE COMPOSITED HEX at full opacity, which is not what the homepage paints and is why it had to be turned off again eight hours later (§CATBAND-CARD's `background-image: none`, now also gone). The homepage's is a SATURATED HUE AT LOW ALPHA in two layers, and it needs an RGB triplet no `--dtc-*` token carried. Both of those rules are superseded by §CATPRM at the foot of this file, which ports the homepage's §HPXP recipe whole. Nothing is declared here — one home for the value, and this note so the next reader does not go looking for a wash that used to be at this line. What stays below is the ink correction, which is about TYPE, not surface. */ /* The category name is INK AT REST and takes the tone ON HOVER — measured off `.hpx-cat-title`, which computes to rgb(11,18,32) on a resting homepage tile and only picks up `--tone-ink` under `:hover`. ⚠️ The 2026-08-18 pass read the hover rule as the resting one and coloured all ten names. Side by side against `/` that is the single loudest difference left in the band: ten tone-coloured headings read as a colour chart, and hover has nothing left to say. Corrected here rather than overridden later, so there is one home for the value. Scoped to the card so it cannot reach the SECTION heading, which is the gradient-accent treatment and must stay as it is. */ .v2x .dir-cat-card .dir-cat-card-nm { color: var(--v2-ink); /* The homepage's weight. `v2-public-directory-listing.css` asks for 800 in the base rule and 740 in §CAT; the element renders at 700 either way, so whatever is winning is not in that sheet. Declaring it here — later, and one class more specific than §CAT's `.dir-cat-card-nm` — settles it. */ font-weight: 740; } /* The hover half. It has to ship in THIS file: the base sheet's own `.dir-cat-card:hover .dir-cat-card-nm` is (0,3,0), exactly the weight of the resting rule above, and this file loads later — so without a copy here the rest state would out-rank the hover state and the tone would never appear. */ @media (hover: hover) { .v2x .dir-cat-card:hover .dir-cat-card-nm { color: var(--dtc-ink, #1B5BB5); } } /* ⚠ `color-mix()` is Chrome 111+ / Safari 16.2+. Older browsers drop the whole declaration and keep the light-mode wash, which is a wrong-but-legible result rather than a broken one — the alternative, hand-writing eight dark rgba pairs per token set, is sixteen more values to keep in sync with a base sheet that already owns them. */ /* ── §BANDS-A11Y) Forced colours ────────────────────────────────────────── The washes are decoration; in a forced-colour mode they become opaque system fills that swallow the card. Drop them and let the border carry the edge. */ @media (forced-colors: active) { .v2x .dir-why-card:not(.is-lead), .v2x .dir-cat-card { background-image: none; } } /* ── §BANDS-GDX) The guides category hub, /guides/categories ────────────── The one page of the fifty-one audited on 2026-08-18 that the rules above could not reach. Every other vertical's hub builds its grid out of `.dir-cat-card`, so §BANDS-CAT already covers it. Guides is the exception: its hub cards are `.gdx-catcard`, a bespoke class carrying a richer body (a nested list of guides, a level pip row, an "All N in …" link) that the shared card has no slot for. The markup is worth keeping — the SKIN is what drifted, so only the skin is corrected here. Measured before this block, /guides/categories showed exactly the flat three-way gap this file was opened to close: other hubs /guides/categories card title tone ink #0F0F12 on all 16 card background tone corner wash flat #FFF, no image card border tone @ 20% alpha flat #E7EAF0 icon plate tone tint + tone glyph blue on all 16 That last row is the tell. `.gdx-catcard` ALREADY ships `data-tone`, cycled through all eight of `GuideVocab::CARD_TONES` — the attribute was on the element and nothing read it, so sixteen deliberately-toned cards rendered as one blue row. No new vocabulary is introduced below; the `--dtc-*` trio is now declared for these cards beside `.dir-cat-card`'s own, in `v2-public-directory-listing.css`, and this block only spends it. ⚠ SPECIFICITY: the base rules in `public-guides.css` are `.v2x.gdx .gdx-…` — two classes on one element plus a third — and that sheet loads AFTER the token sheet. Qualifying with `[data-tone]` puts every rule below one step above its base rule, and this file loads after `public-guides.css`, so the cascade is settled on both axes rather than on source order alone. Same belt-and-braces reasoning as the header of this file. */ /* ⚠️ The wash and the edge that used to be declared at this line are gone the same way §BANDS-CAT's are, and for the same reason — see §CATPRM at the foot of this file, which paints both hosts from one rule. Everything below is `.gdx-catcard`'s own vocabulary and has no homepage twin. */ /* The card name stays INK at rest and takes the tone on hover, the same correction the shared rail card gets above — `public-guides.css` already declares `color: var(--v2-ink)` on `.gdx-catcard-nm`, so the rest state needs no rule here at all, only the hover half. ⚠️ These cards previously carried the tone at rest, added by the same 2026-08-18 pass and on the same misreading of the homepage tile. On a card whose body is a nested LIST OF GUIDE LINKS a coloured heading competes with the links under it, which is why the original design had it ink. */ @media (hover: hover) { .v2x.gdx .gdx-catcard[data-tone]:hover .gdx-catcard-nm { color: var(--dtc-ink, #1B5BB5); } } /* The plate reads its own card's tone instead of the hard-coded blue. Kept as a flat tint rather than the rail card's gradient chip: these cards are a READING surface with a body of links under the head, and the heavier chip pulls the eye off that body. */ .v2x.gdx .gdx-catcard[data-tone] .gdx-catcard-ico { background: var(--dtc-bg, #EAF2FD); color: var(--dtc-ink, #1B5BB5); } /* Hover took `--brand-blue` on every card, which re-flattened the row at the moment the tone matters most. */ .v2x.gdx .gdx-catcard[data-tone]:hover { border-color: var(--dtc-ink, #1B5BB5); } .v2x.gdx .gdx-catcard[data-tone]:hover .gdx-catcard-arr { color: var(--dtc-ink, #1B5BB5); } /* Dark: `--dtc-*` already resolves to the night twin for the ink (declared beside the light set), so the plate needs no `color-mix()` here — unlike §BANDS-WHY, whose tokens only have a light-surface value. The card's own dark surface is §CATPRM's, and is four alpha numbers rather than a second background rule. */ body.theme-dark .v2x.gdx .gdx-catcard[data-tone] .gdx-catcard-ico { background: var(--dtc-bg); color: var(--dtc-ink); } @media (forced-colors: active) { .v2x.gdx .gdx-catcard[data-tone] { background-image: none; } } /* ═══════════════════════════════════════════════════════════════════════════ §CATBAND — the Browse-categories BAND, at homepage parity (2026-08-18) ═══════════════════════════════════════════════════════════════════════════ §BANDS-CAT above and §CAT in the three base sheets already brought the CARD to the homepage's `.hpx-cat` recipe — halo, solid plate, count pill, ringed action. The BAND AROUND IT was never converted, so on all fifty-one listing / hub / category / tag URLs the same tiles sat under different chrome: homepage `.hpx-*` listing `.dir-cat-*` head left-aligned, CTA at the centred column with right of the heading sparkle flanks, no CTA rail track whole tiles, count per minmax(220px, 1fr), breakpoint (7/6/5/4/3) partial tile at the edge nudge buttons 38px, outside the rail, 44px, inset 8px OVER fade out at either end the cards, dimmed to .3 progress bar yes — reports and scrubs none card foot bar 52% wide, 4px, tone-to-tone full width, 3px, fading to transparent Everything below is CSS-only and rides the sheet every `.dir-hh` page already loads, so one edit reaches all twenty verticals. The one thing CSS cannot invent is the progress bar's ELEMENT — that is injected by assets/js/ext/public-dir-catband.js, linked from the same partial. ── Which heads become railheads ────────────────────────────────────────── `.dir-cat-head` is NOT the categories head. It is the shared showcase head for every band in the `.dir-cat-*` namespace — "Featured GPTs", "Popular right now", "Acronyms & Aliases", the FAQ. Those must stay centred, exactly as the homepage keeps `is-showcase` centred everywhere except this one band. So the switch is keyed on WHAT FOLLOWS THE HEAD: a next sibling that contains a `.dir-cat-card`. That is true of the rail (`.dir-cat-railwrap`) and of every hub grid — `.dir-cat-grid`, `.dlx-catgrid`, `.apx-catgrid`, `.acx-…` — without this file having to list them, and false for a head followed by `.dir-cards` (tool cards) or an FAQ list. ⚠ `:has()` is Chrome 105+ / Safari 15.4+ / Firefox 121+. Where it is missing the head keeps the centred layout it has today and the CTA renders under the sub-heading — the previous design, not a broken one. Nothing else in this block depends on it. ═══════════════════════════════════════════════════════════════════════════ */ /* ── §CATBAND-HEAD) The Categories head, centred showcase ───────────────── ⚠️ THIS BLOCK USED TO BUILD A LEFT-ALIGNED RAILHEAD, and the reversal is deliberate — asked and answered twice on 2026-08-18. The first answer kept it left because that is what the homepage's own Browse-categories band does (`is-railhead is-noflank`); the second asked for it to match the OTHER heads on its own page instead. That is the better call and it is worth recording why: the homepage's railhead sits in a band with ONE head, so there is nothing beside it to disagree with. These pages carry three heads in a column — Categories, Why, FAQ — and on a hub like /gpts/categories the PRIMARY head ("Every GPT Category") was the left-aligned one while the secondary band under it ("Popular right now") was centred. A page reads its own internal consistency long before it reads consistency with `/`. So the head is now the same centred showcase as its neighbours: eyebrow pill, sparkle flanks, gradient accent, centred sub, CTA below. ⚠️ The `:has(+ * .dir-cat-card)` gate STAYS, for two reasons that have nothing to do with alignment. It is what keeps this off the `.dir-cat-*` heads that are NOT category grids, and — see §HEAD-TYPE — `:has()` carries its argument's specificity, making this selector (0,4,0), which is what clears `custom.ltr.css`'s (0,2,2) `h2` rule. Drop the `:has()` and the heading silently loses its tracking and line-height. */ .v2x .dir-cat-head:has(+ * .dir-cat-card) { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; margin-bottom: 30px; padding: 0; } /* Spacing comes from the children's own margins, not from a flex `gap` — the homepage's showcase head is `gap: 0` with `margin-bottom: 14px` on the eyebrow and `margin-top: 12px` on the sub, and a gap on top of those would double-count both. */ .v2x .dir-cat-head:has(+ * .dir-cat-card) > .dir-cat-eyebrow { margin-bottom: 14px; } /* ⚠️ THE SUB IS DELIBERATELY NOT DECLARED HERE ANY MORE. This selector is (0,4,0) — `:has()` carries its argument's specificity — and it used to set `margin-top`, `max-width` and `font-size: 16px` on the sub. §HEAD-SUB later sets the same three values at (0,2,0) for BOTH band subs, so the pair was redundant everywhere except one place it mattered: §HEAD-RESP's ≤820px step to 15px is also (0,2,0), and this rule out-ranked it. The result was a phone screen showing the Categories sub at 16px and the Why sub directly under it at 15px. Measured at 376px on 2026-08-18; the specificity that makes the HEADING survive `custom.ltr.css` is the same specificity that made the sub ignore its own breakpoint. One home for the value, and it is §HEAD-SUB. */ /* The CTA drops below the sub. On the two-column railhead it sat in column 2 beside the heading; centred, there is no column 2 to sit in, and stacking it is what the homepage does with the same button whenever its own head stacks. 18px is `.hpx-band-foot`'s. */ .v2x .dir-cat-head:has(+ * .dir-cat-card) > .dir-cat-cta { margin-top: 18px; align-self: center; } /* 30px * 1.42 = 42.6px, the homepage's showcase heading, expressed as a clamp so it still steps down on a narrow column. Kept at the RAILHEAD's size rather than the base sheet's `clamp(30px, 3.6vw, 48px)`: 48px would put this heading five points above the Why heading below it, which is the inconsistency §HEAD was opened to remove. */ .v2x .dir-cat-head:has(+ * .dir-cat-card) > .dir-cat-title { justify-content: center; font-size: clamp(26px, 2.4vw + 6px, 43px); line-height: 1.12; letter-spacing: -.03em; } /* §STAR's flanks are BACK. They were suppressed here for the whole life of the railhead because they hang 74px either side of the words and the leading cluster lands outside the container on a left-aligned head. On a centred head that constraint disappears — which is the same reason the homepage gates its own flanks on `.hpx-al-center`. §STAR already drops them below 1024px, so no rule is needed for the narrow case. */ /* ── §CATBAND-CTA) The head's "View all categories" pill ────────────────── The homepage's `.hpx-btn-brand`: a TINTED pill with a solid brand disc for the arrow, not a solid fill. Solid would put a second saturated blue pill on a page whose search button is already one, and blur which is the action. Styled unconditionally (no `:has()`) so that where `:has()` is missing the link is still a button rather than a bare line of blue text. */ .v2x .dir-cat-cta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 10px 10px 10px 19px; border-radius: 999px; background-color: #EAF2FD; color: var(--brand-blue-dark); font-size: 14px; font-weight: 650; letter-spacing: -.004em; text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px #CFE0FA; transition: transform .18s ease, box-shadow .22s ease, background-color .18s ease, color .18s ease; } body.theme-dark .v2x .dir-cat-cta { background-color: rgba(54, 128, 237, .16); color: var(--brand-blue-light); box-shadow: inset 0 0 0 1px rgba(96, 164, 245, .28); } .v2x .dir-cat-cta-arr { display: grid; place-items: center; width: 24px; height: 24px; margin-inline-start: 2px; border-radius: 50%; background: var(--brand-blue); color: #fff; transition: background-color .2s ease, transform .22s var(--ease-spring); } .v2x .dir-cat-cta-arr svg { width: 13px; height: 13px; } [dir="rtl"] .v2x .dir-cat-cta-arr svg { transform: scaleX(-1); } @media (hover: hover) { .v2x .dir-cat-cta:hover { background-color: transparent; background-image: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(54, 128, 237, .55); } .v2x .dir-cat-cta:hover .dir-cat-cta-arr { background: rgba(255, 255, 255, .22); transform: translateX(2px); } [dir="rtl"] .v2x .dir-cat-cta:hover .dir-cat-cta-arr { transform: translateX(-2px); } } .v2x .dir-cat-cta:focus-visible { outline: none; background-color: transparent; background-image: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%); color: #fff; box-shadow: 0 0 0 3px #CFE0FA; } .v2x .dir-cat-cta:active { transform: scale(.97); } /* ── §CATBAND-RAIL) The track ───────────────────────────────────────────── WHOLE TILES, not `minmax(220px, 1fr)`. With a floor of 220px in a 1872px shell the last visible track was always a sliver — a card cut down the middle at the fade, which reads as a rendering fault rather than as "there is more this way". The homepage computes the track from a COLUMN COUNT so the row always ends on a whole tile, and the ladder at the foot of this block steps that count down with the viewport. Eight at the top, not the homepage's seven: this shell is 1920px against the homepage's 1600, so seven tiles here would be 255px against the homepage's 210. Eight lands at 221px — the same tile, not the same number. The bottom padding is load-bearing. A hovered card lifts 6px and drops a 46px shadow; the rail is an `overflow-x: auto` box, which clips on BOTH axes, so with the 6px of padding it carried that shadow was sliced off flat along the bottom of every card in the row. The progress bar pulls itself back up into this space with a negative margin, so the band does not grow by the difference. */ .v2x .dir-cat-rail { --dir-cat-cols: 8; --dir-cat-gap: 14px; grid-auto-columns: calc( (100% - (var(--dir-cat-cols) - 1) * var(--dir-cat-gap)) / var(--dir-cat-cols) ); gap: var(--dir-cat-gap); padding: 10px 6px 30px; scroll-padding-inline: 6px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } /* 52px, matching the homepage. The 56px the base sheet uses was tuned against the old 220px track and now eats a visible slice of a 221px tile. */ .v2x .dir-cat-railwrap[data-scrollable="1"]:not([data-at-start="1"]) { --dir-cat-fade-l: 52px; } .v2x .dir-cat-railwrap[data-scrollable="1"]:not([data-at-end="1"]) { --dir-cat-fade-r: 52px; } /* ── §CATBAND-NUDGE) The arrows ─────────────────────────────────────────── 38px and OUTSIDE the track, where the homepage puts them. At 44px inset -8px they overlapped the first and last card — on a rail whose cards are links, an arrow parked on top of one is a mis-click waiting to happen. Hidden by `opacity` + `visibility`, not by the base sheet's `.3` dim: a greyed arrow at the end of the rail still looks pressable and still takes the click. `display` is left to the base rule so the button keeps its box and can fade rather than pop. */ .v2x .dir-cat-nav { width: 38px; height: 38px; background: #fff; border: 1px solid var(--v2-line); color: var(--brand-blue-dark); box-shadow: 0 6px 16px -8px rgba(16, 24, 40, .28); opacity: 0; visibility: hidden; transform: translateY(-50%) scale(.9); transition: opacity .2s ease, transform .24s var(--ease-spring), background-color .18s ease, color .18s ease, border-color .18s ease; } body.theme-dark .v2x .dir-cat-nav { background: rgba(44,44,49,.95); border-color: var(--dk-line,rgba(255,255,255,.10)); color: var(--brand-blue-light); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); } .v2x .dir-cat-nav svg { width: 15px; height: 15px; } .v2x .dir-cat-nav-prev { left: -17px; right: auto; } .v2x .dir-cat-nav-next { right: -17px; left: auto; } .v2x .dir-cat-railwrap[data-scrollable="1"] .dir-cat-nav { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); } /* Overrides the base sheet's `opacity:.3` at the ends — later in the cascade and one class more specific, so it settles on both axes. */ .v2x .dir-cat-railwrap[data-at-start="1"] .dir-cat-nav-prev, .v2x .dir-cat-railwrap[data-at-end="1"] .dir-cat-nav-next { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%) scale(.9); } @media (hover: hover) { .v2x .dir-cat-nav:hover { background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%); border-color: transparent; color: #fff; transform: translateY(-50%) scale(1.06); box-shadow: 0 10px 22px -10px rgba(54, 128, 237, .55); } } .v2x .dir-cat-nav:focus-visible { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px #CFE0FA; } .v2x .dir-cat-nav:active { transform: translateY(-50%) scale(.94); } /* A touch device scrolls the rail with a finger; the arrows would only cover the first and last tile. `display:none` rather than opacity — on touch they are not an affordance at all, so they must not be tabbable either. */ @media (hover: none) { .v2x .dir-cat-nav { display: none; } } /* ── §CATBAND-BAR) The progress bar ─────────────────────────────────────── A real control, not a readout: it reports where the rail is AND takes a click or a drag to move it. The element is injected by public-dir-catband.js, which also writes the two fractions below. It stays `aria-hidden`. This is a REDUNDANT pointer affordance — the arrows either side and the rail's own native scrolling already cover keyboard and assistive use — so exposing it would mean either building a full ARIA slider with its own key handling or shipping a focusable control that does nothing on Enter. Redundant and hidden is the honest one. The negative margin spends the 30px of glow room the track reserves above; without it the bar would sit that far adrift of the cards it belongs to. */ .v2x .dir-cat-railbar { position: relative; height: 8px; width: min(260px, 55%); margin: -10px auto 0; border-radius: 999px; background: var(--v2-line); box-shadow: inset 0 1px 2px rgba(16, 24, 40, .08); opacity: 0; /* scaleY, not height: a transform never reflows, and growing the box would nudge the whole band down every time a pointer crossed the bar. */ transition: opacity .22s ease, transform .18s var(--ease-out), background-color .18s ease; /* pan-y, NOT none. `none` claims both axes, so a finger landing on a 260px bar in the middle of the page could not scroll the page at all. */ touch-action: pan-y; cursor: pointer; } body.theme-dark .v2x .dir-cat-railbar { background: rgba(255, 255, 255, .10); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); } /* A hit area taller than the 8px the bar paints — an 8px pointer target is a miss waiting to happen, and the extra height costs nothing visually. */ .v2x .dir-cat-railbar::before { content: ''; position: absolute; inset: -10px 0; } .v2x .dir-cat-railwrap[data-scrollable="1"] .dir-cat-railbar { opacity: 1; } /* Nothing to travel means nothing to grab — a bar that answers the pointer while the rail cannot move is a dead control. */ .v2x .dir-cat-railwrap:not([data-scrollable="1"]) .dir-cat-railbar { pointer-events: none; } /* Width and offset are the two fractions the script writes onto the wrapper. A percentage inside calc resolves against the containing block's width and may be multiplied by a unitless number, so the thumb travels exactly the track's leftover space. NO transition on either: the script rewrites both on every scroll frame, so an eased thumb would permanently chase the rail instead of reporting it. */ .v2x .dir-cat-railbar-in { display: block; height: 100%; width: calc(var(--dir-cat-rail-v, 1) * 100%); margin-inline-start: calc(var(--dir-cat-rail-p, 0) * (100% - var(--dir-cat-rail-v, 1) * 100%)); border-radius: inherit; background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 8px -3px rgba(54, 128, 237, .5); transition: box-shadow .18s ease; } .v2x .dir-cat-railbar.is-dragging { cursor: grabbing; } @media (hover: hover) { .v2x .dir-cat-railbar:hover, .v2x .dir-cat-railbar.is-dragging { transform: scaleY(1.3); background: #CFE0FA; } .v2x .dir-cat-railbar:hover .dir-cat-railbar-in, .v2x .dir-cat-railbar.is-dragging .dir-cat-railbar-in { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 14px -3px rgba(54, 128, 237, .5); } } /* ── §CATBAND-CARD) The card details the §CAT pass left behind ──────────── ⚠️ BOTH RULES THAT USED TO BE HERE ARE SUPERSEDED BY §CATPRM. 1 · THE FOOT BAR was declared on `::after` at this line — 52% of the card, 4px, tone-bg → tone-ink → tone-bg. The geometry is right and is kept; what changed is WHERE IT IS PAINTED. §CATPRM needs a pseudo-element for the orbit ring and this card has only two, `::before` already holding §CAT's halo, so the bar moves into the background stack where its width and height animate as `background-size`. See §CATPRM-BAR. 2 · "ONE WASH, NOT TWO" was wrong, and it is the reason this band still read flat next to `/` after the parity pass. The homepage tile carries the halo AND a corner bloom AND a diagonal wash — three layers, measured on a resting tile at 1600px. What made the version this rule switched off look heavy was not that there were two washes; it was that §BANDS-CAT painted its corner in `--dtc-bg`, an OPAQUE pale hex, where the homepage paints `rgba(hue, .20)`. Turning the layer off fixed the heaviness by removing the colour system with it. §CATPRM restores all three at the homepage's own alphas. */ /* ── §CATBAND-RESP) The column ladder ───────────────────────────────────── Ported from the homepage's, shifted one step because this shell is 1920px wide against its 1600. The tile lands between 217px and 235px at every step, which is the homepage's 210px band. */ @media (max-width: 1700px) { .v2x .dir-cat-rail { --dir-cat-cols: 7; } } @media (max-width: 1500px) { .v2x .dir-cat-rail { --dir-cat-cols: 6; } } @media (max-width: 1180px) { .v2x .dir-cat-rail { --dir-cat-cols: 5; } } @media (max-width: 1024px) { .v2x .dir-cat-rail { --dir-cat-cols: 4; } } @media (max-width: 860px) { .v2x .dir-cat-rail { --dir-cat-cols: 3; } } @media (max-width: 1024px) { .v2x .dir-cat-head:has(+ * .dir-cat-card) { margin-bottom: 24px; } } /* ⚠️ The 860px stacking rule that used to live here is GONE, and its absence is correct rather than an omission. It existed because the head was a two-column grid that could not fit a 43px heading and a pill on one row on a tablet; it dropped the CTA to row 4 and left-aligned it. The head is a centred single column at every width now (§CATBAND-HEAD), so the CTA is already stacked and already centred — re-stating `grid-area` on a flex child would do nothing, and `justify-self: start` would knock the button out of the centre it now belongs in. */ /* The ladder STOPS at 641px. Below that the rail goes back to a PEEK — one whole card and a clear slice of the next — because three 12.5px description lines in a third of a 390px viewport is not a card, it is a column of hyphens. Same call, and the same 76%, the homepage makes at this width. Declared after the ladder so any column count above is dead here. */ @media (max-width: 640px) { .v2x .dir-cat-rail { grid-auto-columns: minmax(220px, 76%); --dir-cat-gap: 12px; scroll-snap-type: x proximity; padding-bottom: 24px; } /* +2px, not the desktop -10px. The rail only pads 24px below the cards here, so the desktop pull-up would put this control's 20px-tall TOUCH TARGET inside them — a tap on the bottom edge of a card would grab the pager instead of opening the card. */ .v2x .dir-cat-railbar { height: 6px; width: min(180px, 62%); margin-top: 2px; } .v2x .dir-cat-railbar::before { inset: -12px 0; } } @media (prefers-reduced-motion: reduce) { .v2x .dir-cat-railbar { transition: opacity .22s ease; } .v2x .dir-cat-railbar:hover, .v2x .dir-cat-railbar.is-dragging { transform: none; } } /* The progress bar carries no information a forced-colour user can act on; in that mode it becomes an opaque system fill across the band. The card's own decoration is handled in §CATPRM-A11Y, which owns every layer it paints. */ @media (forced-colors: active) { .v2x .dir-cat-railbar { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ §CATPRM — the homepage's PREMIUM card language on the listing bands (2026-08-18) ═══════════════════════════════════════════════════════════════════════════ §CAT (2026-08-13) matched the tile's ANATOMY — halo, solid plate, count pill, ringed action, foot bar. §CATBAND (2026-08-18) matched the CHROME around it — railhead, whole-tile track, outside arrows, progress bar. Measured side by side at 2560px after both, the rows still did not read alike, and the whole of the remaining gap was SURFACE: homepage `.hpx-cat` listing `.dir-cat-card` diagonal wash rgba(hue, .075 → .055) none corner bloom rgba(hue, .20), 220x200 none card edge rgba(hue, .20) `--dtc-line`, a pale composited hex resting shadow 4 layers, tone-tinted 2 layers, neutral grey hover ring masked conic, 3.4s sweep none That is the homepage's §HPXP block — "the detail page's card language, homepage-wide" — and none of it had reached these fifty-one URLs. The listing tiles were white boxes with a coloured icon on them; the homepage's are lit surfaces. Everything below is §HPXP ported host-for-host, at its own measured alphas, so the two rows are the same card and not two designs that happen to share a layout. ── The pseudo-element problem, and what it cost ────────────────────────── §HPXP needs one pseudo for the orbit ring. `.hpx-cat` has `::before` on the halo and pays for the ring with `::after`, because ITS foot bar is a real `` in the blade. `.dir-cat-card` has no such span — its foot bar IS `::after` — so on this card both slots were already spent. Adding a span means editing twenty-six blades, which is the exact failure mode this file exists to avoid. So the BAR moves and the RING takes the slot. A bar is a rectangle of gradient at a fixed spot on the box, which is precisely what a background layer is; a masked conic ring cannot be anything but a pseudo. Both of the bar's hover changes — 52% → 100% wide, 4px → 5px tall — are one animatable `background-size`, so nothing is lost in the move. See §CATPRM-BAR. ── Why the tokens could not carry this ─────────────────────────────────── `--dtc-bg|ink|line` are FLAT colours — pale composited hexes tuned to sit under a count pill. A wash, a bloom and a conic tail have to vary ALPHA along a gradient, and no `--dtc-*` token carries an RGB triplet to vary. §CATPRM-RGB is that missing primitive, and its values are §HPXP-RGB's verbatim so a violet tile here and a violet tile on `/` are one violet. ═══════════════════════════════════════════════════════════════════════════ */ /* ── §CATPRM-RGB) The hue as a triplet ──────────────────────────────────── ⚠️ THE FALLBACK ON THE BASE SELECTOR IS LOAD-BEARING. An undefined triplet makes every `rgba(var(--dtc-rgb), …)` below an INVALID declaration, and an invalid declaration is dropped SILENTLY — the wash, the bloom, the edge and the ring would simply not exist, with nothing in the output to say why. The rail cycles eight tones but the taxonomies feed `data-tone` from five different vocabularies, so an unlisted value reaching this attribute is a when, not an if. Same trap §HPXP-RGB records. */ .v2x .dir-cat-card, .v2x.gdx .gdx-catcard { --dtc-rgb: 54, 128, 237; } .v2x .dir-cat-card[data-tone="blue"], .v2x.gdx .gdx-catcard[data-tone="blue"] { --dtc-rgb: 54, 128, 237; } .v2x .dir-cat-card[data-tone="violet"], .v2x.gdx .gdx-catcard[data-tone="violet"] { --dtc-rgb: 139, 92, 246; } .v2x .dir-cat-card[data-tone="indigo"], .v2x.gdx .gdx-catcard[data-tone="indigo"] { --dtc-rgb: 99, 102, 241; } .v2x .dir-cat-card[data-tone="rose"], .v2x.gdx .gdx-catcard[data-tone="rose"] { --dtc-rgb: 244, 63, 94; } .v2x .dir-cat-card[data-tone="amber"], .v2x.gdx .gdx-catcard[data-tone="amber"] { --dtc-rgb: 245, 158, 11; } .v2x .dir-cat-card[data-tone="emerald"], .v2x.gdx .gdx-catcard[data-tone="emerald"] { --dtc-rgb: 16, 185, 129; } .v2x .dir-cat-card[data-tone="cyan"], .v2x.gdx .gdx-catcard[data-tone="cyan"] { --dtc-rgb: 34, 184, 217; } .v2x .dir-cat-card[data-tone="orange"], .v2x.gdx .gdx-catcard[data-tone="orange"] { --dtc-rgb: 249, 115, 22; } .v2x .dir-cat-card[data-tone="teal"], .v2x.gdx .gdx-catcard[data-tone="teal"] { --dtc-rgb: 20, 184, 166; } .v2x .dir-cat-card[data-tone="pink"], .v2x.gdx .gdx-catcard[data-tone="pink"] { --dtc-rgb: 236, 72, 153; } .v2x .dir-cat-card[data-tone="slate"], .v2x.gdx .gdx-catcard[data-tone="slate"] { --dtc-rgb: 100, 116, 139; } /* The ramp every layer below reads. Four numbers in light, four in dark — which is the difference between a system and a second half of this file that drifts out of step with the first. */ .v2x .dir-cat-card, .v2x.gdx .gdx-catcard { --dcp-a1: .075; /* wash, the lit corner */ --dcp-a2: .055; /* wash, the far corner */ --dcp-edge: .20; /* the tinted hairline */ --dcp-bloom: .20; /* the corner bloom's hot end */ } /* Dark: the card sits at rgba(28,31,42,.9) over a near-black page, so it is LIGHTER than the ground and separates on its own. The wash is free to carry hue rather than separation — and every alpha rises anyway, because a 5% tint that reads over white is invisible over near-black. */ body.theme-dark .v2x .dir-cat-card, body.theme-dark .v2x.gdx .gdx-catcard { --dcp-a1: .13; --dcp-a2: .09; --dcp-edge: .30; --dcp-bloom: .17; } /* ── §CATPRM-WASH) The surface ──────────────────────────────────────────── THREE LAYERS IN ONE STACK, topmost first: the foot bar, the corner bloom, the diagonal wash. The halo stays where §CAT put it, on `::before`, and paints above all three. ⚠️ `background-image` ONLY — never the `background` shorthand. The base sheet sets the card's colour with a shorthand (`background:#fff`, and `rgba(28,31,42,.9)` under `body.theme-dark`); writing a shorthand here would reset that to transparent and let the page ground show through every card on all fifty-one URLs. Setting the IMAGE alone also means ONE rule serves both themes — dark is the four alphas above and nothing else. The 152deg angle, the 48% dead stop and the fade to `rgba(same-hue, 0)` rather than the `transparent` KEYWORD are §HPXP-WASH's, and that last one matters more than it looks: a gradient fading to `transparent` interpolates through transparent BLACK in sRGB and leaves a grey, dirty fringe down the middle of the card. The bloom's CENTRE sits OUTSIDE the box on purpose — `calc(100% + 30px)` across and a negative offset up — so what lands on the card is the falloff rather than a circle drawn on it. That is the reference card's single most recognisable cue, and drawing the whole circle inside the box is how it reads as a sticker instead of as light. */ /* The tinted hairline, on both hosts. Split from the wash below because the two cards carry a DIFFERENT NUMBER OF LAYERS and a shared `background-size` would have to be wrong for one of them. */ .v2x .dir-cat-card, .v2x.gdx .gdx-catcard[data-tone] { border-color: rgba(var(--dtc-rgb), var(--dcp-edge-now, var(--dcp-edge))); } .v2x .dir-cat-card { background-image: /* 1 · the foot bar — see §CATPRM-BAR for why it is a layer */ linear-gradient(90deg, var(--dtc-bg) 0%, var(--dtc-ink) 50%, var(--dtc-bg) 100%), /* 2 · the corner bloom */ radial-gradient(220px 200px at calc(100% + 30px) -54px, rgba(var(--dtc-rgb), var(--dcp-bloom)) 0%, rgba(var(--dtc-rgb), 0) 72%), /* 3 · the diagonal wash */ linear-gradient(152deg, rgba(var(--dtc-rgb), var(--dcp-a1)) 0%, rgba(var(--dtc-rgb), 0) 48%, rgba(var(--dtc-rgb), var(--dcp-a2)) 100%); background-repeat: no-repeat; background-position: 50% 100%, 0 0, 0 0; background-size: var(--dcp-bar-w, 52%) var(--dcp-bar-h, 4px), 100% 100%, 100% 100%; } /* The hub card is a READING surface — a nested list of guide links under the head — and it is 380px tall against the rail tile's 325. It takes the wash and the edge, and it does NOT take the bar or the ring: a coloured tab and a sweeping light under a column of links compete with the links, which is the same call §BANDS-GDX already records for the icon plate. Two layers, and the bloom is scaled to the taller box the way §HPXP scales `.hpx-libcol` to its column. */ .v2x.gdx .gdx-catcard[data-tone] { background-image: radial-gradient(300px 250px at calc(100% + 34px) -62px, rgba(var(--dtc-rgb), var(--dcp-bloom)) 0%, rgba(var(--dtc-rgb), 0) 72%), linear-gradient(152deg, rgba(var(--dtc-rgb), var(--dcp-a1)) 0%, rgba(var(--dtc-rgb), 0) 48%, rgba(var(--dtc-rgb), var(--dcp-a2)) 100%); background-repeat: no-repeat; background-position: 0 0, 0 0; background-size: 100% 100%, 100% 100%; } /* ⚠️ THE DARK TWINS ARE NOT AN OPTIMISATION, THEY ARE THE RULE. Every other property in this block themes itself for free, because dark is the four alphas in §CATPRM-RGB and the wash rule never changes. The SURFACE is the exception, and it is the exception on both hosts: body.theme-dark .v2x .dir-cat-card { background: rgba(28,31,42,.9) } body.theme-dark .v2x.gdx .gdx-catcard { background: … } Those are the base sheets', they are (0,3,1) against the (0,2,0) above, and they use the `background` SHORTHAND — so they out-rank the wash AND reset `background-image` to none in one move. Without the four rules below the whole colour system silently disappears after dark, and only after dark, which is the kind of bug that ships. Measured on 2026-08-18: the light row was correct and the dark row was flat, from exactly this. `background-color` is deliberately NOT restated — the base's shorthand is still the one setting it, and duplicating the surface colour here is how a card ends up a different grey from the band it sits in. */ body.theme-dark .v2x .dir-cat-card { background-image: linear-gradient(90deg, var(--dtc-bg) 0%, var(--dtc-ink) 50%, var(--dtc-bg) 100%), radial-gradient(220px 200px at calc(100% + 30px) -54px, rgba(var(--dtc-rgb), var(--dcp-bloom)) 0%, rgba(var(--dtc-rgb), 0) 72%), linear-gradient(152deg, rgba(var(--dtc-rgb), var(--dcp-a1)) 0%, rgba(var(--dtc-rgb), 0) 48%, rgba(var(--dtc-rgb), var(--dcp-a2)) 100%); background-repeat: no-repeat; background-position: 50% 100%, 0 0, 0 0; background-size: var(--dcp-bar-w, 52%) var(--dcp-bar-h, 4px), 100% 100%, 100% 100%; } body.theme-dark .v2x.gdx .gdx-catcard[data-tone] { background-image: radial-gradient(300px 250px at calc(100% + 34px) -62px, rgba(var(--dtc-rgb), var(--dcp-bloom)) 0%, rgba(var(--dtc-rgb), 0) 72%), linear-gradient(152deg, rgba(var(--dtc-rgb), var(--dcp-a1)) 0%, rgba(var(--dtc-rgb), 0) 48%, rgba(var(--dtc-rgb), var(--dcp-a2)) 100%); background-repeat: no-repeat; background-position: 0 0, 0 0; background-size: 100% 100%, 100% 100%; } /* The edge has the same problem for the same reason — the base dark rules set `border-color: rgba(255,255,255,.08)` alongside that shorthand. */ body.theme-dark .v2x .dir-cat-card, body.theme-dark .v2x.gdx .gdx-catcard[data-tone] { border-color: rgba(var(--dtc-rgb), var(--dcp-edge-now, var(--dcp-edge))); } /* ── §CATPRM-BAR) The foot bar, as a background layer ───────────────────── Geometry unchanged from §CATBAND-CARD: 52% of the card, 4px, running tone-bg → tone-ink → tone-bg so it reads as a coloured tab under the tile, and growing to the full width at 5px on hover. `background-size` is animatable and this is the whole reason the move costs nothing. All three layers are sized explicitly — `100% 100%` on the two gradients rather than `auto`, which computes identically and gives the interpolation an unambiguous pair to run between. The 20px corner radius clips the bar's ends once it reaches full width. That is the homepage's behaviour too: `.hpx-cat-bar` goes to `inset-inline: 0` inside the same `overflow: hidden`. ⚠️ HOVER SETS TWO CUSTOM PROPERTIES, NOT `background-size`, AND THAT IS NOT A STYLE PREFERENCE. `background-size` has to be declared inside the surface rules, and those exist twice — once at (0,2,0) for light and once at (0,3,1) for dark, because only (0,3,1) can out-rank the base sheet's dark `background` shorthand. A hover rule written on the PROPERTY would be (0,2,1): enough to beat the light surface and NOT enough to beat the dark one, so the bar would grow by day and sit still by night. A custom property has no such fight. `--dcp-bar-w` is set nowhere in the surface rules, so `:hover` at (0,2,1) is simply the most specific rule that sets it, in both themes, and the `var()` inside `background-size` picks the new value up wherever that declaration happens to have come from. One state rule instead of four. ⚠️ The base sheet's `transition` on this card lists transform, border-color and box-shadow only, so without the line below the bar would SNAP between its two widths. */ .v2x .dir-cat-card { --dcp-bar-w: 52%; --dcp-bar-h: 4px; transition: transform .28s var(--ease-out), border-color .22s ease, box-shadow .28s ease, background-size .34s var(--ease-out); } @media (hover: hover) { .v2x .dir-cat-card:hover { --dcp-bar-w: 100%; --dcp-bar-h: 5px; } } .v2x .dir-cat-card:focus-visible { --dcp-bar-w: 100%; --dcp-bar-h: 5px; } /* ── §CATPRM-ORBIT) The rotating light ──────────────────────────────────── §HPXP-ORBIT at the category tile's own speed — 3.4s, the number that block assigns this exact host. Speed there is a statement about size: a big ambient panel sweeps slowly because slow reads as large, and a small target sweeps fast because it has less border to cross. THE HUE IS NOT FIXED: it reads `--dtc-rgb`, so a violet card orbits violet and an amber one amber. That is the difference between an effect pasted onto a band and a system — the light belongs to the card it is lighting. A NEW registered property and a NEW keyframe rather than reusing the homepage's `--hpx-pspin`: homepage.css is not loaded on any of these URLs, so borrowing the name would be borrowing a definition that is not there. */ @property --dcp-spin { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes dir-cat-orbit { to { --dcp-spin: 360deg; } } .v2x .dir-cat-card { --dcp-hot: 255, 255, 255; /* the specular core of the comet */ --dcp-o1: .5; /* leading tail */ --dcp-o2: .88; /* trailing tail */ --dcp-o3: 1; /* core */ } body.theme-dark .v2x .dir-cat-card { --dcp-o1: .66; --dcp-o2: 1; } /* THE SLOT IS EMPTY UNTIL @supports SAYS OTHERWISE, and this line is the correctness of the block, not a tidy-up. `::after` still carries the base sheet's foot-bar declarations — a 3px `linear-gradient` at the bottom edge. The ring rule below re-boxes the pseudo to `inset: 0`, so where the ring itself is unsupported that stale gradient would paint FULL-CARD over every word on the tile. `display: none` is what makes the fallback "no ring" and not "a blue sheet across the card"; the bar it used to draw is a background layer now and does not need it. */ .v2x .dir-cat-card::after { display: none; } @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) { /* Two full-box mask layers — one clipped to the content box, one to the border box — composited with xor, leaving exactly the padding band. `mask-clip` follows `border-radius`, so the inner cut is a rounded rect on a rounded rect and the corners stay true. ⚠️ THE @supports GATE IS LOAD-BEARING, NOT DEFENSIVE. Without mask-composite the two layers UNION and the conic paints as a SOLID BLOCK over the card, covering every word on it. ⚠️ inset: 0, not the reference's inset: -1px. This card carries `overflow: hidden` so it can clip its own wash, and a ring hung 1px outside gets sliced off on all four sides — which reads as a rendering fault, not as a highlight. The three geometry resets are not decoration. This slot spent the day as a 3px strip pinned to the bottom edge with `left/right/height` and an `opacity` of .65, and every one of those has to be unwound here or the ring inherits a sliver of its predecessor's box. */ .v2x .dir-cat-card::after, .v2x .dir-cat-card:hover::after, .v2x .dir-cat-card:focus-visible::after { display: block; content: ''; position: absolute; inset: 0; width: auto; height: auto; transform: none; z-index: 2; pointer-events: none; border-radius: inherit; padding: var(--dcp-t, 1.5px); --dcp-spin: 0deg; background: conic-gradient(from var(--dcp-spin), rgba(var(--dtc-rgb), 0) 0deg, rgba(var(--dtc-rgb), var(--dcp-o1)) 30deg, rgba(var(--dcp-hot), var(--dcp-o3)) 52deg, rgba(var(--dtc-rgb), var(--dcp-o2)) 74deg, rgba(var(--dtc-rgb), 0) 118deg, rgba(var(--dtc-rgb), 0) 180deg, rgba(var(--dtc-rgb), var(--dcp-o1)) 210deg, rgba(var(--dcp-hot), var(--dcp-o3)) 232deg, rgba(var(--dtc-rgb), var(--dcp-o2)) 254deg, rgba(var(--dtc-rgb), 0) 298deg, rgba(var(--dtc-rgb), 0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .32s ease; animation: dir-cat-orbit 3.4s linear infinite; /* A paused animation does not tick, so a rail of ten idle cards costs nothing — and re-entering RESUMES the sweep rather than snapping the comet back to 0deg under the pointer. */ animation-play-state: paused; } /* Split from the block above so the two STATE rules can set it to 1 without restating the ring. */ .v2x .dir-cat-card::after { opacity: 0; } /* Keyboard is deliberately OUTSIDE the hover query. A keyboard on a touch screen is a real combination, and focus deserves the same answer as the pointer — the same call §HPXP-ORBIT makes. */ .v2x .dir-cat-card:focus-visible::after { opacity: 1; animation-play-state: running; } @media (hover: hover) { /* (0,3,1), which it has to be: the base sheet's own `.dir-cat-card:hover::after { opacity: 1; height: 5px }` is exactly that weight, and the `height` half would put the comet in a 5px letterbox along the bottom edge. Out-ranked, not merely followed. */ .v2x .dir-cat-card:hover::after { opacity: 1; height: auto; animation-play-state: running; } } } /* ── §CATPRM-LIFT) Depth, tone-tinted ───────────────────────────────────── §HPXP-LIFT's recipe: a glass hairline along the top inner edge, a 1px contact shadow to seat the card against the page, a tone-tinted lift and a neutral one under it. The tone in the lift shadow is what makes a violet card cast a violet-tinged shadow rather than the same grey as its blue neighbour — at .40 alpha and a -22px spread it is not a colour anyone names, it is why the row looks lit. This REPLACES §CAT's three-layer shadow rather than adding to it: §CAT's was the homepage's pre-§HPXP shadow, ported faithfully from a recipe the homepage has since moved off. */ .v2x .dir-cat-card, .v2x.gdx .gdx-catcard[data-tone] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -22px rgba(var(--dtc-rgb), .40), 0 10px 24px -20px rgba(16, 24, 40, .26); } body.theme-dark .v2x .dir-cat-card, body.theme-dark .v2x.gdx .gdx-catcard[data-tone] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .42), 0 14px 30px -22px rgba(var(--dtc-rgb), .34), 0 10px 24px -20px rgba(0, 0, 0, .78); } /* The edge steps up on both states, and like the foot bar above it does so through a CUSTOM PROPERTY rather than by redeclaring `border-color`. Same reason: `border-color` lives in the two surface rules, one of which is (0,3,1) so it can beat the base sheet's dark shorthand, and a state rule on the property itself would be (0,2,1) — enough by day, not enough by night. `--dcp-edge-now` is set nowhere else, so the state rule simply wins. */ @media (hover: hover) { .v2x .dir-cat-card:hover, .v2x.gdx .gdx-catcard[data-tone]:hover { --dcp-edge-now: calc(var(--dcp-edge) + .22); } } .v2x .dir-cat-card:focus-visible { --dcp-edge-now: calc(var(--dcp-edge) + .42); } @media (hover: hover) { /* The lift roughly doubles. The card's own `translateY(-6px)` is untouched — this pass is about surface, and the band's rhythm is the base sheet's to own. */ .v2x .dir-cat-card:hover, .v2x.gdx .gdx-catcard[data-tone]:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(16, 24, 40, .05), 0 22px 44px -26px rgba(var(--dtc-rgb), .52), 0 14px 30px -22px rgba(16, 24, 40, .28); } /* (0,3,2), because the RESTING dark shadow above is (0,3,1) and would otherwise out-rank the (0,2,1) hover rule it is meant to follow. */ body.theme-dark .v2x .dir-cat-card:hover, body.theme-dark .v2x.gdx .gdx-catcard[data-tone]:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 2px rgba(0, 0, 0, .45), 0 22px 44px -26px rgba(var(--dtc-rgb), .46), 0 14px 30px -22px rgba(0, 0, 0, .82); } } /* Focus gets the tone ring the base sheet already gives it, re-stated on top of the new lift so a keyboard visitor is not handed the two-layer shadow this block just replaced. The dark twin is here for the same specificity reason the hover one is. */ .v2x .dir-cat-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--dtc-rgb), .22), 0 22px 44px -26px rgba(var(--dtc-rgb), .52), 0 14px 30px -22px rgba(16, 24, 40, .28); } body.theme-dark .v2x .dir-cat-card:focus-visible { box-shadow: 0 0 0 3px rgba(var(--dtc-rgb), .34), 0 22px 44px -26px rgba(var(--dtc-rgb), .46), 0 14px 30px -22px rgba(0, 0, 0, .82); } /* ── §CATPRM-RESP) Phone ────────────────────────────────────────────────── The bloom is sized in PIXELS, so it does not shrink with the card the way the wash does. Below 641px the rail stops stepping its column count down and goes to a 76% peek — a card near 280px wide — and a 220px bloom on that is a flood across the whole surface rather than light falling on a corner. Both the bloom and the ring step down once, exactly as §HPXP-RESP does at its own breakpoint. The wash and the edge are untouched: they are proportional already, and the colour system has to survive the breakpoint or the phone gets back the flat white row this block exists to remove. */ @media (max-width: 767.98px) { /* One step thinner. A 1.5px ring on a 280px card is proportionally twice what it is on a 560px one, and at that width it stops reading as a lit edge and starts reading as a second border. */ .v2x .dir-cat-card::after, .v2x .dir-cat-card:hover::after, .v2x .dir-cat-card:focus-visible::after { --dcp-t: 1.2px; } /* Both themes, because a `background-image` written at (0,2,0) inside a media query still loses to the base sheet's (0,3,1) dark shorthand — the media query changes nothing about specificity. Same pairing as §CATPRM-WASH, and the reason the bloom is the only value that differs between the four rules. */ .v2x .dir-cat-card, body.theme-dark .v2x .dir-cat-card { background-image: linear-gradient(90deg, var(--dtc-bg) 0%, var(--dtc-ink) 50%, var(--dtc-bg) 100%), radial-gradient(150px 140px at calc(100% + 20px) -38px, rgba(var(--dtc-rgb), var(--dcp-bloom)) 0%, rgba(var(--dtc-rgb), 0) 72%), linear-gradient(152deg, rgba(var(--dtc-rgb), var(--dcp-a1)) 0%, rgba(var(--dtc-rgb), 0) 48%, rgba(var(--dtc-rgb), var(--dcp-a2)) 100%); } .v2x.gdx .gdx-catcard[data-tone], body.theme-dark .v2x.gdx .gdx-catcard[data-tone] { background-image: radial-gradient(190px 170px at calc(100% + 22px) -42px, rgba(var(--dtc-rgb), var(--dcp-bloom)) 0%, rgba(var(--dtc-rgb), 0) 72%), linear-gradient(152deg, rgba(var(--dtc-rgb), var(--dcp-a1)) 0%, rgba(var(--dtc-rgb), 0) 48%, rgba(var(--dtc-rgb), var(--dcp-a2)) 100%); } } /* ── §CATPRM-A11Y) Touch, reduced motion, forced colours ────────────────── On a touch screen the ring can never be triggered, and an animation that can never run is still a compositor layer per card — ten of them per rail, on every one of these fifty-one URLs. Suppressing it there is a battery decision, not a design one: the wash, the bloom, the tinted edge and the foot bar are what those visitors were getting nothing of before, and all four remain. */ @media (hover: none) { .v2x .dir-cat-card::after, .v2x .dir-cat-card:focus-visible::after { animation: none; } } @media (prefers-reduced-motion: reduce) { /* The ring still APPEARS on hover and focus — it is state, and removing state is not what reduced motion asks for. What stops is the sweep, and the bar's grow. */ .v2x .dir-cat-card::after, .v2x .dir-cat-card:hover::after, .v2x .dir-cat-card:focus-visible::after { animation: none !important; } .v2x .dir-cat-card { transition: transform .28s var(--ease-out), border-color .22s ease, box-shadow .28s ease; } } @media (forced-colors: active) { /* Every layer this block adds is decorative and none of it survives a forced palette intact — a conic in system colours is a grey smear across the border, and a tone wash is an opaque fill that swallows the card. The hairline is restored as a real border so the cards stay separable, which is all forced colours needs from them. */ .v2x .dir-cat-card::after { display: none; } /* The dark selectors are listed for the same reason they are everywhere else in this block: a forced palette and a dark site preference are an ordinary combination, and at (0,2,0) this rule would leave the wash painted under it. */ .v2x .dir-cat-card, .v2x.gdx .gdx-catcard[data-tone], body.theme-dark .v2x .dir-cat-card, body.theme-dark .v2x.gdx .gdx-catcard[data-tone] { background-image: none; border: 1px solid CanvasText; box-shadow: none; } } /* ═══════════════════════════════════════════════════════════════════════════ §HEAD — the homepage's showcase head, on every listing band (2026-08-18) ═══════════════════════════════════════════════════════════════════════════ The cards were brought to homepage parity by §CATPRM. The HEADS above them never were. Measured against `.hpx-head.is-showcase` on `/` — the "Why choose AIToolsay?" band, which is the reference — the three band heads on these fifty-one URLs were three different designs: homepage .dir-cat-head .dir-why-head FAQ aside eyebrow size 12.5px 13px 13px 11.5px eyebrow case sentence sentence sentence UPPERCASE eyebrow tracking -.005em -.004em -.004em +.1em eyebrow ink #1B5BB5 #2060C0 #2060C0 #2060C0 eyebrow gap 8px 6px 6px 7px eyebrow pad-left 13px 12px 12px 12px title size 42.6px 43px ✓ 48px 33.6px title weight 700 800 800 800 title tracking -.03em -.03em ✓ -.024em -.028em title line-height 1.12 1.12 ✓ 1.1 1.14 accent gradient 120deg, 2 stop 100deg, 3 stop 100deg, 3 stop none sub size 16px 16px ✓ 15px 15px sub ink #6B7686 #4A4A5A #4A4A5A --aits-mut The Categories head is already close because §CATBAND-HEAD rebuilt it; the ticks above are its. This block finishes the job and applies the SAME values to the other two, so the three heads on a page are one design. ── Layout, band by band ────────────────────────────────────────────────── · Categories — CENTRED showcase with §STAR's sparkle flanks and the CTA stacked below the sub. It spent one revision as a left-aligned railhead copied from the homepage's version of this band; §CATBAND-HEAD records why that was reverted, and it comes down to a page reading its own internal consistency before it reads consistency with `/`. · Why — centred, with the same flanks. Already correct. · FAQ — a 350px aside rail beside the accordion, and the ONE head whose layout is genuinely left alone. See §HEAD-FAQ for why centring it would cost the band its contact card. §STAR already ports the flanks exactly — 74x44 masked clusters, .32 → .62 over 4.5s, mirrored leading cluster, `calc(100% + 10px)` offset. Measured against the homepage's `hpx-twinkle` and identical. Nothing to do. ── Dark mode ───────────────────────────────────────────────────────────── Every rule below declares GEOMETRY AND TYPE ONLY, plus light-mode colour. The base sheets ship a dark twin for each eyebrow at (0,3,1) — bg `rgba(54,128,237,.16)`, `--brand-blue-light` ink, a `rgba(96,164,245,.28)` ring — which keeps winning for colour in both directions and is left alone. ⚠️ THE PILL'S HAIRLINE IS AN INSET SHADOW, NOT A `border`. The homepage uses a real border; here that would be a bug. The base dark rule overrides `box-shadow` but says nothing about `border`, so a `border: 1px solid #CFE0FA` written here would survive into dark mode and paint a pale blue ring on a night pill. Carrying the hairline in the shadow slot the dark rule already replaces is what makes one declaration serve both themes. Same class of trap as [dark-background-shorthand-trap] in §CATPRM-WASH. ═══════════════════════════════════════════════════════════════════════════ */ /* ── §HEAD-PILL) The eyebrow ────────────────────────────────────────────── One recipe for both `.dir-*` bands. The 12.5px/-.005em/8px/13px numbers are `.hpx-head.is-showcase .hpx-eyebrow`'s, and `#1B5BB5` is `--hpx-brand-ink` — a full step darker than the `--brand-blue-dark` (#2060C0) these pills use today, which is the difference between a pill that reads as a label and one that reads as a link. */ /* ⚠️ `line-height` and the REAL BORDER are both here because the pill's HEIGHT is the thing a visitor actually compares, and neither is optional to reach it. The homepage's box is 20px of line + 14px of padding + 2px of border = 36px. Written with the inherited 1.5 line-height and the hairline in an inset shadow, the same declarations render 33px — three points short, which on a pill sitting directly above a heading reads as a smaller badge rather than as a rounding difference. Measured, not assumed. A real `border` rather than `box-shadow: inset`, despite the dark-leak trap this file records elsewhere: the base dark rule replaces `box-shadow` but says nothing about `border`, so the light `#CFE0FA` would survive into dark. The dark twin below closes that explicitly, which is the honest fix — the alternative, faking the 2px with extra padding, gets the height right and leaves the two sheets describing different boxes. */ .v2x .dir-cat-eyebrow, .v2x .dir-why-eyebrow { gap: 8px; margin-bottom: 14px; padding: 7px 16px 7px 13px; border: 1px solid #CFE0FA; color: #1B5BB5; font-size: 12.5px; font-weight: 700; line-height: 20px; letter-spacing: -.005em; text-transform: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } /* The base dark rule carries the hairline as `box-shadow: inset 0 0 0 1px`. With a real border above that would be TWO hairlines at night, so this moves the ring back into the border and leaves the shadow as depth only. */ body.theme-dark .v2x .dir-cat-eyebrow, body.theme-dark .v2x .dir-why-eyebrow { border-color: rgba(96, 164, 245, .28); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); } /* The mark is the BRAND blue, one step lighter than the words beside it — `.hpx-eyebrow-spark` sets its own `color` rather than inheriting the pill's ink, and that contrast is what stops the pill reading as a solid block. */ .v2x .dir-cat-eyebrow svg, .v2x .dir-why-eyebrow svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--brand-blue); } body.theme-dark .v2x .dir-cat-eyebrow svg, body.theme-dark .v2x .dir-why-eyebrow svg { color: var(--brand-blue-light); } /* ── §HEAD-TYPE) The heading ────────────────────────────────────────────── The homepage sizes this as `calc(var(--hpx-fs-h2) * 1.42)` — 42.6px at the default h2 token — and lets the Typography screen carry the responsive steps. There is no `--hpx-fs-h2` on these pages, so the size is expressed as the clamp §CATBAND-HEAD already tuned for the Categories head, which lands on 43px at desktop and steps down on a narrow column. Using the SAME clamp on both bands is the point: the two headings on a page have to be one size, and `clamp(30px, 3.6vw, 48px)` put the Why heading five points above its neighbour. Weight 700, not 800. The base sheets ask for 800 in four places and the element renders at 700 anyway — whatever wins is not in those sheets, the same unfindable override §BANDS-CAT records for `.dir-why-title-c`. It is declared here so the value is stated where it is true rather than left as a number nobody can trace. ⚠️ THE HEAD CLASS IN THE SELECTOR IS LOAD-BEARING, AND IT IS THE ANSWER TO A NOTE THIS FILE HAS BEEN CARRYING SINCE THIS MORNING. §BANDS-CAT records an override that "was not findable … whatever is winning, it is not visible from the CSSOM". It is `custom.ltr.css`: body:not(.admin-shell):not(.theme-dark) h2 { color: var(--ez-ink); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } `:not()` takes the specificity of its argument, so that is TWO classes and TWO elements — (0,2,2) — and it beats any `.v2x .dir-x-title` at (0,2,0) on every property it names. It never showed up because it does not mention the class, and it is why these headings render at 700 no matter what weight the base sheets ask for, and why the first version of this rule set the size and silently lost the line-height and the tracking. Qualifying with the HEAD gives (0,3,0), which clears it. §CATBAND-HEAD's railhead rule already cleared it by accident — `:has()` carries its argument's specificity, so that selector is (0,4,0), which is the only reason the Categories heading was correct and the Why heading was not. Written on `.dir-cat-head` rather than only on the railhead variant so that the OTHER heads in the `.dir-cat-*` namespace — Featured GPTs, Popular right now, Acronyms & Aliases — come to the same size. Two headings on one page at 43px and 48px is the inconsistency this block exists to remove. */ .v2x .dir-why-head .dir-why-title, .v2x .dir-cat-head .dir-cat-title { font-size: clamp(26px, 2.4vw + 6px, 43px); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; } /* ── §HEAD-ACCENT) The gradient word ────────────────────────────────────── `linear-gradient(120deg, brand 0%, brand-600 100%)` — TWO stops on a 120° axis. The listing sheets run a three-stop 100° gradient that returns to the starting hue at 100%, so the word brightens in the middle and lands back where it started; on a two-word accent like "AI Categories" that reads as a highlight sweep rather than as a single coloured phrase. The homepage's travels once, which is why its accent looks like ink and this one looked like an effect. `color: transparent` as well as `-webkit-text-fill-color`: the fill-color property is the one that works today, the standard `color` is what keeps working when it is retired. */ .v2x .dir-cat-title-accent, .v2x .dir-why-title-accent { background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } body.theme-dark .v2x .dir-cat-title-accent, body.theme-dark .v2x .dir-why-title-accent { background: linear-gradient(120deg, var(--brand-blue-light) 0%, var(--brand-blue) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ── §HEAD-SUB) The line under the heading ──────────────────────────────── 16px on 1.66 in `--hpx-ink-3` (#6B7686), capped at 56ch. The listing sub is 15px in `--v2-muted` (#4A4A5A) at 60ch — darker, tighter and wider, so it competes with the heading instead of sitting under it. ⚠️ #6B7686 measures 4.60:1 on white — 0.10 above the AA floor. That is fine HERE and is not fine on a tinted card, which is the whole subject of the homepage's §HPXP-INK note. These subs sit on the page ground, not on a washed surface, so the token is used as-is; do not copy this colour onto anything inside a `.dir-cat-card`. */ .v2x .dir-cat-sub, .v2x .dir-why-sub { margin-top: 12px; max-width: 56ch; font-size: 16px; line-height: 1.66; color: #6B7686; } body.theme-dark .v2x .dir-cat-sub, body.theme-dark .v2x .dir-why-sub { color: var(--v2-muted); } /* Both heads are flex columns with `align-items: center`, so a `max-width` child centres itself and the `auto` margins below are belt-and-braces for the case where a vertical's own sheet re-declares `align-items`. */ .v2x .dir-why-head > .dir-why-sub, .v2x .dir-cat-head > .dir-cat-sub { margin-inline: auto; } /* The head's own spacing. `.hpx-head.is-showcase` is 30px clear of the band below it; `.dir-why-head` was 36px with a 14px internal gap on top of the eyebrow's own margin, which double-counted the space under the pill. */ .v2x .dir-why-head { gap: 0; margin-bottom: 30px; } /* ── §HEAD-FAQ) The FAQ aside ───────────────────────────────────────────── ⚠️ SCOPED TO `.dir-faq-sect`, AND THE SCOPE IS THE POINT. `.aitsq` is the site's ONE FAQ component — `components/public/faq.blade.php`, rendered from 47 blades: tool detail pages, GPT and extension show pages, the legal hub, the blog category page, the business sections. Restyling `.aitsq-eyebrow` at its own (0,1,0) would redesign all of them. `.v2x .dir-faq-sect .aitsq-…` is (0,3,0), reaches only the listing bands this task covers, and loads after `faq.css` — settled on both axes. LAYOUT IS UNTOUCHED. This head is a 350px sticky aside beside the accordion, with a contact card under it. It is not a showcase head and must not become one: centring a heading in a 350px column, or stepping it to 42.6px, gives four wrapped lines and pushes the contact card off the fold. What is corrected is the LANGUAGE — the pill, which at 11.5px UPPERCASE tracked +.1em is the one element on these pages still speaking the old design. The size stays at its own clamp for the same reason: 42.6px belongs to a full-width heading, not to a third of a column. */ /* `line-height` for the same reason the other two carry it — see §HEAD-PILL. No `border` needed: `faq.css` already gives this pill a real 1px one, so it reaches 36px on the line-height alone. */ .v2x .dir-faq-sect .aitsq-eyebrow { gap: 8px; padding: 7px 16px 7px 13px; border-color: #CFE0FA; color: #1B5BB5; font-size: 12.5px; font-weight: 700; line-height: 20px; letter-spacing: -.005em; text-transform: none; } .v2x .dir-faq-sect .aitsq-eyebrow svg { width: 14px; height: 14px; color: var(--brand-blue); } body.theme-dark .v2x .dir-faq-sect .aitsq-eyebrow svg { color: var(--brand-blue-light); } /* The eyebrow TEXT needs the same twin, and at the same weight: the light rule above is (0,3,0) and outranks faq.css's `body.theme-dark .aitsq-eyebrow` (0,2,1), so that twin never reached this band. #1B5BB5 measured 2.49:1 here. */ body.theme-dark .v2x .dir-faq-sect .aitsq-eyebrow { color: var(--dk-accent-ink, #8CBEFA); border-color: var(--dk-accent-line, rgba(96,164,245,.28)); } /* Weight and tracking join the other two heads; the SIZE does not, per above. */ .v2x .dir-faq-sect .aitsq-title { font-weight: 700; letter-spacing: -.03em; line-height: 1.12; } /* ── §HEAD-RESP) Narrow columns ─────────────────────────────────────────── The base sheets step the sub down to 14px below 820px, at (0,2,0) inside a media query — which out-ranks nothing here, but lands LATER in the cascade than this file only if this file is not loaded, and it always is. Restated at the same breakpoint so the two bands stay level: 15px, the homepage's own phone step, rather than back to 14px. */ @media (max-width: 820px) { .v2x .dir-cat-sub, .v2x .dir-why-sub { font-size: 15px; } .v2x .dir-why-head { margin-bottom: 24px; } } /* ═══════════════════════════════════════════════════════════════════════════ §WHYPRM — the premium card language on the "What is … ?" band (2026-08-18) ═══════════════════════════════════════════════════════════════════════════ §CATPRM did this for `.dir-cat-card`. This is the same port for the OTHER card on these pages — the six-up promise row under the Why heading, whose homepage twin is `.hpx-ig-feature .hpx-igcard`. Measured side by side, the gap was the same gap, one row down: homepage `.hpx-igcard` listing `.dir-why-card` diagonal wash rgba(hue, .075 → .055) none corner bloom rgba(hue, .20), 220x200 an OPAQUE pale hex card edge rgba(hue, .20) `--dwc-line`, a pale hex resting shadow 4 layers, tone-tinted 3 layers, neutral grey hover ring masked CONIC, 3.6s sweep a static linear gradient title weight 740 700 ── The resting state was the whole problem ─────────────────────────────── BOTH pseudo-elements on this card sit at `opacity: 0` until `:hover`: `::before` is a top radial wash in `--dwc-bg` that fades in at .9, and `::after` is a masked gradient ring that fades in at 1. That is precisely the pattern §HPXP was written to retire, and its note says why better than this one can: · at REST the band is white cards on a white ground, separated by a grey hairline and nothing else — the colour system exists but is invisible until a pointer moves through it; · on TOUCH, where hover never arrives, the resting state is the ONLY state those visitors ever see, so the entire tone palette is desktop-only by accident. So the wash moves to rest and hover gets somewhere better to go. ── Slot map ────────────────────────────────────────────────────────────── Easier than `.dir-cat-card`'s, and worth recording because it is the reason this block is shorter than §CATPRM: ::before was the hover-only wash → RETIRED, superseded by the resting background layers ::after was a static gradient ring → becomes the ANIMATED CONIC orbit `::after` is already a masked ring with `padding: 1.5px` and the same `mask-composite` pair the orbit needs, so it is upgraded in place rather than rebuilt — no geometry to unwind, unlike §CATPRM-ORBIT's slot. ── The lead card is excluded from the surface, not from the ring ───────── `.is-lead` is a solid brand gradient with white text. A tone wash on top of it would muddy the gradient and a tone edge would be invisible, so every surface rule below carries `:not(.is-lead)` — the same exclusion §BANDS-WHY already documents. The RING is not excluded: its specular core is white, which is exactly what reads on a saturated card, and the homepage's own lead card orbits too. ═══════════════════════════════════════════════════════════════════════════ */ /* ── §WHYPRM-RGB) The hue as a triplet ──────────────────────────────────── `--dwc-*` are flat composited hexes for the same reason `--dtc-*` are, so this card needs the same missing primitive. Values are §HPXP-RGB's verbatim, which is also what §CATPRM-RGB uses — a violet promise card and a violet category tile are one violet by construction. The base sheet declares six tones for this card; the eleven below cost nothing and mean a seventh added upstream does not arrive unpainted. ⚠️ The fallback on the base selector is load-bearing — an undefined triplet makes every `rgba(var(--dwc-rgb), …)` INVALID, and an invalid declaration is dropped silently. Same trap §CATPRM-RGB records. */ .v2x .dir-why-card { --dwc-rgb: 54, 128, 237; } .v2x .dir-why-card[data-tone="blue"] { --dwc-rgb: 54, 128, 237; } .v2x .dir-why-card[data-tone="violet"] { --dwc-rgb: 139, 92, 246; } .v2x .dir-why-card[data-tone="emerald"] { --dwc-rgb: 16, 185, 129; } .v2x .dir-why-card[data-tone="amber"] { --dwc-rgb: 245, 158, 11; } .v2x .dir-why-card[data-tone="rose"] { --dwc-rgb: 244, 63, 94; } .v2x .dir-why-card[data-tone="cyan"] { --dwc-rgb: 34, 184, 217; } .v2x .dir-why-card[data-tone="indigo"] { --dwc-rgb: 99, 102, 241; } .v2x .dir-why-card[data-tone="orange"] { --dwc-rgb: 249, 115, 22; } .v2x .dir-why-card[data-tone="teal"] { --dwc-rgb: 20, 184, 166; } .v2x .dir-why-card[data-tone="pink"] { --dwc-rgb: 236, 72, 153; } .v2x .dir-why-card[data-tone="slate"] { --dwc-rgb: 100, 116, 139; } /* The ramp is §CATPRM's, REUSED rather than re-declared under a second name. `--dcp-*` is not a `.dir-cat-card` token — it is this file's one alpha ramp, and two cards on the same page tinted from two ramps is how a dark-mode retune ends up half-applied. */ .v2x .dir-why-card { --dcp-a1: .075; --dcp-a2: .055; --dcp-edge: .20; --dcp-bloom: .20; } body.theme-dark .v2x .dir-why-card { --dcp-a1: .13; --dcp-a2: .09; --dcp-edge: .30; --dcp-bloom: .17; } /* ── §WHYPRM-WASH) The surface ──────────────────────────────────────────── Two layers, bloom over wash, exactly as §HPXP-WASH stacks them for this host. `background-image` only, never the `background` shorthand — the base rule sets the card's colour with one, and a shorthand here would drop it. The bloom's centre sits OUTSIDE the box (`calc(100% + 30px)`, negative top) so what lands on the card is the falloff rather than a circle drawn on it. ⚠️ Both gradients fade to `rgba(same-hue, 0)`, NOT to `transparent`. The rule this replaces faded `--dwc-bg` to the `transparent` KEYWORD, which in sRGB interpolates through transparent BLACK and leaves a grey fringe across the card — visible on the pale tones, and one of the two reasons this row read heavier than the homepage's. The other was that its bloom was an OPAQUE hex where the homepage's is `rgba(hue, .20)`. */ .v2x .dir-why-card:not(.is-lead) { background-image: radial-gradient(220px 200px at calc(100% + 30px) -54px, rgba(var(--dwc-rgb), var(--dcp-bloom)) 0%, rgba(var(--dwc-rgb), 0) 72%), linear-gradient(152deg, rgba(var(--dwc-rgb), var(--dcp-a1)) 0%, rgba(var(--dwc-rgb), 0) 48%, rgba(var(--dwc-rgb), var(--dcp-a2)) 100%); background-repeat: no-repeat; background-position: 0 0, 0 0; background-size: 100% 100%, 100% 100%; border-color: rgba(var(--dwc-rgb), var(--dcp-edge-now, var(--dcp-edge))); } /* ⚠️ THE DARK TWIN IS THE RULE, NOT AN OPTIMISATION — see the same note in §CATPRM-WASH. `body.theme-dark .v2x .dir-why-card` in the base sheet is (0,3,1) and sets the surface with the `background` SHORTHAND, so it both out-ranks the (0,3,0) above AND resets `background-image` to none. Without this the whole band loses its colour after dark, and only after dark. */ body.theme-dark .v2x .dir-why-card:not(.is-lead) { background-image: radial-gradient(220px 200px at calc(100% + 30px) -54px, rgba(var(--dwc-rgb), var(--dcp-bloom)) 0%, rgba(var(--dwc-rgb), 0) 72%), linear-gradient(152deg, rgba(var(--dwc-rgb), var(--dcp-a1)) 0%, rgba(var(--dwc-rgb), 0) 48%, rgba(var(--dwc-rgb), var(--dcp-a2)) 100%); background-repeat: no-repeat; background-position: 0 0, 0 0; background-size: 100% 100%, 100% 100%; border-color: rgba(var(--dwc-rgb), var(--dcp-edge-now, var(--dcp-edge))); } /* The hover-only wash is retired. It is superseded by the resting layers above, and leaving it live would fade a SECOND tint in on top of them — which is the muddiness this block exists to remove, arriving on hover instead of at rest. `display: none` rather than deleting the base rule: that rule lives in three 206KB sheets and this file cannot edit them. */ .v2x .dir-why-card::before, .v2x .dir-why-card:hover::before { display: none; } /* ── §WHYPRM-ORBIT) The static ring becomes a sweep ─────────────────────── The slot already holds a masked ring with the right mask pair and the right padding; only the PAINT and the animation change. 3.6s is the speed §HPXP assigns this exact host — slower than the category tile's 3.4s because the card is bigger and has more border to cross. `--dcp-spin` and `dir-cat-orbit` are §CATPRM-ORBIT's, reused deliberately: one registered property and one keyframe for both cards on the page. */ .v2x .dir-why-card { --dcp-hot: 255, 255, 255; --dcp-o1: .5; --dcp-o2: .88; --dcp-o3: 1; } body.theme-dark .v2x .dir-why-card { --dcp-o1: .66; --dcp-o2: 1; } @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) { .v2x .dir-why-card::after { padding: var(--dcp-t, 1.4px); background: conic-gradient(from var(--dcp-spin), rgba(var(--dwc-rgb), 0) 0deg, rgba(var(--dwc-rgb), var(--dcp-o1)) 30deg, rgba(var(--dcp-hot), var(--dcp-o3)) 52deg, rgba(var(--dwc-rgb), var(--dcp-o2)) 74deg, rgba(var(--dwc-rgb), 0) 118deg, rgba(var(--dwc-rgb), 0) 180deg, rgba(var(--dwc-rgb), var(--dcp-o1)) 210deg, rgba(var(--dcp-hot), var(--dcp-o3)) 232deg, rgba(var(--dwc-rgb), var(--dcp-o2)) 254deg, rgba(var(--dwc-rgb), 0) 298deg, rgba(var(--dwc-rgb), 0) 360deg); --dcp-spin: 0deg; animation: dir-cat-orbit 3.6s linear infinite; /* A paused animation does not tick, so six idle cards cost nothing — and re-entering RESUMES the sweep rather than snapping the comet back to 0deg under the pointer. */ animation-play-state: paused; } /* Keyboard parity, deliberately outside the hover query — these cards are not links, so this only fires where a vertical makes one focusable. */ .v2x .dir-why-card:focus-within::after { opacity: 1; animation-play-state: running; } @media (hover: hover) { .v2x .dir-why-card:hover::after { animation-play-state: running; } } } /* ── §WHYPRM-LIFT) Depth, tone-tinted ───────────────────────────────────── §HPXP-LIFT's four layers. The tone in the lift shadow is what makes a violet card cast a violet-tinged shadow rather than the same grey as its emerald neighbour; the base sheet's third layer is neutral `rgba(16,24,40,.22)` on all six. */ .v2x .dir-why-card:not(.is-lead) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -22px rgba(var(--dwc-rgb), .40), 0 10px 24px -20px rgba(16, 24, 40, .26); } body.theme-dark .v2x .dir-why-card:not(.is-lead) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .42), 0 14px 30px -22px rgba(var(--dwc-rgb), .34), 0 10px 24px -20px rgba(0, 0, 0, .78); } /* ⚠️ THE EDGE STEPS UP THROUGH A CUSTOM PROPERTY, and it has to. The base hover rule sets `border-color: transparent` — it was written for a card whose hover state was a full gradient ring, where an edge underneath would double it. With a tone edge at rest that declaration erases the border at the moment the card is being pointed at. `--dcp-edge-now` is read inside the surface rules above, which are (0,3,0) and (0,4,1); a hover rule on `border-color` itself would be (0,3,1) — enough to beat the light surface, not the dark one. Same reasoning as §CATPRM-BAR, same fix. */ @media (hover: hover) { .v2x .dir-why-card:not(.is-lead):hover { --dcp-edge-now: calc(var(--dcp-edge) + .22); } .v2x .dir-why-card:not(.is-lead):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(16, 24, 40, .05), 0 22px 44px -26px rgba(var(--dwc-rgb), .52), 0 14px 30px -22px rgba(16, 24, 40, .28); } /* (0,4,2), because the RESTING dark shadow above is (0,4,1). */ body.theme-dark .v2x .dir-why-card:not(.is-lead):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 2px rgba(0, 0, 0, .45), 0 22px 44px -26px rgba(var(--dwc-rgb), .46), 0 14px 30px -22px rgba(0, 0, 0, .82); } } /* ── §WHYPRM-TYPE) The card title ───────────────────────────────────────── 740, the homepage's. `.hpx-igcard-title` and this element are the same 16px tone-coloured line and were two weights apart. §BANDS-WHY already owns this element's COLOUR; only the weight is added here, beside it in spirit but in this block because it is a homepage-parity number, not a fix. */ .v2x .dir-why-card .dir-why-title-c { font-weight: 740; } /* ── §WHYPRM-RESP) Phone ────────────────────────────────────────────────── The bloom is sized in PIXELS so it does not shrink with the card. At this width the six-up row is one or two columns and a 220px bloom floods the whole surface instead of lighting a corner. Both themes, because a `background-image` at (0,3,0) inside a media query still loses to the base sheet's (0,3,1) dark shorthand — a media query changes no specificity. */ @media (max-width: 767.98px) { .v2x .dir-why-card::after { --dcp-t: 1.2px; } .v2x .dir-why-card:not(.is-lead), body.theme-dark .v2x .dir-why-card:not(.is-lead) { background-image: radial-gradient(150px 140px at calc(100% + 20px) -38px, rgba(var(--dwc-rgb), var(--dcp-bloom)) 0%, rgba(var(--dwc-rgb), 0) 72%), linear-gradient(152deg, rgba(var(--dwc-rgb), var(--dcp-a1)) 0%, rgba(var(--dwc-rgb), 0) 48%, rgba(var(--dwc-rgb), var(--dcp-a2)) 100%); } } /* ── §WHYPRM-A11Y) Touch, reduced motion, forced colours ────────────────── On a touch screen the ring can never be triggered and an animation that can never run is still a compositor layer per card. The wash, the bloom and the tinted edge are what those visitors were getting nothing of before, and all three remain. */ @media (hover: none) { .v2x .dir-why-card::after { animation: none; } } @media (prefers-reduced-motion: reduce) { .v2x .dir-why-card::after, .v2x .dir-why-card:hover::after { animation: none !important; } } @media (forced-colors: active) { .v2x .dir-why-card::after { display: none; } .v2x .dir-why-card:not(.is-lead), body.theme-dark .v2x .dir-why-card:not(.is-lead) { background-image: none; border: 1px solid CanvasText; box-shadow: none; } } /* ═══════════════════════════════════════════════════════════════════════════ §PILL — the eyebrow's MARK, and the hero badge (2026-08-18) ═══════════════════════════════════════════════════════════════════════════ §HEAD-PILL already brought the eyebrow's box to the homepage's showcase recipe — 12.5px on `#1B5BB5`, `7px 16px 7px 13px`, 8px gap, a `#CFE0FA` hairline. Measured against `.hpx-eyebrow` on `/`, every one of those numbers now matches on all fifty-one URLs. What did NOT match is what is drawn inside it. The homepage pill carries a FILLED FOUR-POINT SPARKLE (`.hpx-eyebrow-spark`, `fill="currentColor"`). Every listing pill carries a STROKED PLUS SIGN — `M12 5v14M5 12h14` — and it is the same path in all forty-two of them, across all twenty verticals. Two pills built to identical measurements still read as two designs when one says "✦" and the other says "+". ── Why this is CSS and not a blade edit ────────────────────────────────── The plus is inline markup in ~30 blades. Swapping it there is thirty edits for one glyph, and thirty chances for the next redesign to leave one behind — which is exactly the failure this file exists to prevent, and exactly what `hh-orbit.blade.php`'s own header records happening to the hero arcs. A MASK is one rule, reaches every pill, and follows the brand token in both themes the way a baked-in fill never could. §STAR uses the same technique for the heading flanks, with the same encoding. The mark is decoration on an `aria-hidden` glyph, so moving it out of the DOM costs nothing an assistive reader was using. ⚠️ THE FAQ PILL KEEPS ITS OWN ICON. `.aitsq-eyebrow` draws a question mark in a circle, which is not decoration — it says what the section is, and the homepage has no FAQ band to match it against. Only its BOX was brought into the language (§HEAD-FAQ); the glyph is left alone. ═══════════════════════════════════════════════════════════════════════════ */ /* ── §PILL-SPARK) The plus becomes a sparkle ────────────────────────────── `> svg` and not `svg`, so a glyph nested deeper in a future pill variant is not caught by accident. Hidden rather than removed: the markup still ships it, and a `display: none` flex item leaves the pill with exactly two children — the mask below and the label — which is the homepage's own count, so the 8px gap lands in the same place. */ .v2x .dir-cat-eyebrow > svg, .v2x .dir-why-eyebrow > svg { display: none; } .v2x .dir-cat-eyebrow::before, .v2x .dir-why-eyebrow::before { content: ''; width: 14px; height: 14px; flex: 0 0 auto; /* The BRAND blue, one step lighter than the words beside it — the same split §HEAD-PILL gives the glyph it is replacing, and what stops the pill reading as a solid block. */ background-color: var(--brand-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l1.55 5.34a3.4 3.4 0 0 0 2.31 2.31L21.4 12l-5.34 1.55a3.4 3.4 0 0 0-2.31 2.31L12 21.4l-1.55-5.34a3.4 3.4 0 0 0-2.31-2.31L2.6 12l5.34-1.55a3.4 3.4 0 0 0 2.31-2.31L12 2.6z'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l1.55 5.34a3.4 3.4 0 0 0 2.31 2.31L21.4 12l-5.34 1.55a3.4 3.4 0 0 0-2.31 2.31L12 21.4l-1.55-5.34a3.4 3.4 0 0 0-2.31-2.31L2.6 12l5.34-1.55a3.4 3.4 0 0 0 2.31-2.31L12 2.6z'/%3E%3C/svg%3E") no-repeat center; -webkit-mask-size: contain; mask-size: contain; } body.theme-dark .v2x .dir-cat-eyebrow::before, body.theme-dark .v2x .dir-why-eyebrow::before { background-color: var(--brand-blue-light); } /* ⚠️ Where `mask` is unsupported the pseudo would paint a 14px SOLID BLUE SQUARE where the mark belongs — worse than the plus it replaced. The @supports gate restores the inline glyph instead, so those browsers keep exactly what they have today rather than gaining a bug. */ @supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) { .v2x .dir-cat-eyebrow > svg, .v2x .dir-why-eyebrow > svg { display: block; } .v2x .dir-cat-eyebrow::before, .v2x .dir-why-eyebrow::before { display: none; } } @media (forced-colors: active) { /* A mask in a forced palette is a system-coloured block. The inline glyph is a real vector and survives, so hand the slot back to it. */ .v2x .dir-cat-eyebrow > svg, .v2x .dir-why-eyebrow > svg { display: block; } .v2x .dir-cat-eyebrow::before, .v2x .dir-why-eyebrow::before { display: none; } } /* ── §PILL-HERO) The hero badge ─────────────────────────────────────────── `.dir-hh-badge` against `.hpx-hero-badge`, measured at 2560px. Same idea, seven numbers apart — enough that the two sit at different heights (40px against 42px) when a visitor moves between the homepage and a listing: weight 600 → 640 padding 8px 18px 8px 10px → 9px 19px 9px 12px surface #fff @ .90 → #fff @ .86 ink #0F0F12 → #0B1220 chip fill #EAF1FE → #EAF2FD chip ring #D6E4FC → #CFE0FA glyph 14px, #3680ED → 15px, #1B5BB5 The ink and the two chip values are the interesting ones: `#0F0F12` is a NEUTRAL near-black and `#0B1220` is the blue-black this design uses everywhere else, and the chip was mixing a second pale blue into a palette that already has one. None of it is visible on its own; together it is why the badge looked borrowed rather than shared. ⚠️ EVERY COLOUR BELOW IS SCOPED TO LIGHT, and the first version of this block was not — which broke dark mode in the way this codebase keeps warning itself about. The base rules do NOT hard-code these values; they read `--v2-ink`, `--v2-accent-soft` and `--brand-blue`, tokens that already flip at night, and the dark twins only restate what the tokens cannot carry. Replacing a token with a hex therefore does not "override the light value" — it overrides BOTH, and `#0B1220` ink on the `rgba(28,31,42,.78)` surface the dark twin paints is near-black on near-black. Measured on a real dark load before this guard was added. GEOMETRY and WEIGHT stay unscoped: padding and font-weight mean the same thing in both themes, and they are what the 40px-against-42px difference was actually made of. */ .v2x .dir-hh-badge { padding: 9px 19px 9px 12px; font-weight: 640; } .v2x .dir-hh-badge-chip svg { width: 15px; height: 15px; } body:not(.theme-dark) .v2x .dir-hh-badge { background-color: rgba(255, 255, 255, .86); color: #0B1220; } body:not(.theme-dark) .v2x .dir-hh-badge-chip { background-color: #EAF2FD; box-shadow: inset 0 0 0 1px #CFE0FA; } body:not(.theme-dark) .v2x .dir-hh-badge-chip svg { color: #1B5BB5; } /* ═══════════════════════════════════════════════════════════════════════════ §GCOL — the results grid stacks on the `no-l` / `no-r` pages too (2026-08-18) ═══════════════════════════════════════════════════════════════════════════ The three base sheets set the listing grid and its two modifiers like this: .v2x .dir-g { grid-template-columns: 236px minmax(0,1fr) 268px } (0,2,0) .v2x .dir-g.no-l { grid-template-columns: minmax(0,1fr) 268px } (0,3,0) .v2x .dir-g.no-r { grid-template-columns: 236px minmax(0,1fr) } (0,3,0) .v2x .dir-g.no-l.no-r { grid-template-columns: 1fr } (0,4,0) and then collapse it in a media query written against the BASE selector only: @media (max-width:1500px){ .v2x .dir-g{ grid-template-columns:1fr } } (0,2,0) (0,2,0) loses to (0,3,0), so **a page carrying a modifier never stacks at any width.** The 236px filter rail keeps its fixed track and every pixel the viewport loses comes out of the results column. Measured at a 376px viewport on /best: `grid-template-columns` resolves to `236px 86px` and `.dir-main` — the entire results area — is 86px wide. The count label inside it renders "best-of lists found" at 39px across three lines. /ai-directory, which has no modifier, correctly reports a single 340px column at the same width. Five verticals ship `.no-r` — /alternatives, /best, /collections, /compare, /use-cases — the same five whose source tables are empty and which therefore render no trending rail. Their category and tag pages inherit it. ── Why 1024px and not the base's 1500px ────────────────────────────────── The base stacks at 1500 because the FULL layout spends 504px on two rails (236 + 268) and the middle column is what is left. A `no-r` page spends 236px on one rail, so at 1400px it still has ~1140px of results and the two-column layout is the better one — stacking it there would throw away width on exactly the pages that have the least content to show. 1024px is where a 236px rail stops being affordable: below it the results column drops under ~750px and the filters are better above the grid than beside it. Both the base sheets and §CATBAND-RESP already treat 1024 as the tablet boundary, so this introduces no new number. `.no-l.no-r` is listed for completeness — it is already `1fr`, and naming it here means a future edit to the base cannot quietly reintroduce the bug for that combination. */ @media (max-width: 1024px) { .v2x .dir-g, .v2x .dir-g.no-l, .v2x .dir-g.no-r, .v2x .dir-g.no-l.no-r { grid-template-columns: 1fr; gap: 18px; } } /* ═══════════════════════════════════════════════════════════════════════════ §SHELL — the listing shell is capped on the `fullWidth` pages too (2026-08-18) ═══════════════════════════════════════════════════════════════════════════ `partials/shell-cap.blade.php` is the site's ONE width dial. It pins every public surface to `--seo-shell-max` (1920px) with a `--seo-shell-pad` gutter (24px, stepping to 20/14/11) — but it does that by listing the BOOTSTRAP CONTAINER CLASSES: body.public-page .container, .container-sm, … , .container-xxl { max-width: var(--seo-shell-max); padding-inline: …; margin-inline: auto } `.container-fluid` is deliberately absent — a full-bleed page wants its own bands to reach the edge. And `layouts/public.blade.php:334` picks between the two, on a `$fullWidth` flag the page's Renders… concern sets. So a vertical that opts into `fullWidth` renders the ENTIRE `.v2x` listing shell with no cap at all. Measured at a 2546px viewport: /ai-directory /events .v2x 1872px @ l=337 2546px @ l=0 .dir-g 1864px 2538px results column 1320px 1994px .dir-cat-rail 1872px 2546px .dir-why-grid 1872px 2546px Every band this file has spent the day redesigning renders 674px wider on those pages, with the filter rail against the left window edge and the cards stretched to ~2000px — while the hero's own stat deck stays capped at 1120px, which is what makes it read as broken rather than as wide. THREE of the twenty verticals are affected: /events, /guides and /cheat-sheet. (/deals sets `fullWidth` in `RendersDealPage` too but renders through a path that still lands in a `.container`, so it measures 1858px like the rest — do not "fix" it.) Their category and tag pages inherit the shell. ── Reading the tokens, not repeating the numbers ───────────────────────── shell-cap's own note asks for exactly this: "Module page-shells that sit in a `fullWidth` layout … read these two tokens instead of hardcoding their own numbers. Keep it that way: one dial, every surface." So this rule reads `--seo-shell-max` and `--seo-shell-pad` rather than restating 1920/24 — raise the dial in that partial and these three pages follow. The fallbacks matter: the tokens are declared on `body.public-page`, and a listing rendered under any other body class would otherwise lose its cap entirely rather than fall back to the shipped width. ⚠️ Scoped to `.container-fluid`, which is the ONLY thing that distinguishes these pages — the `.v2x` shell, its modifiers and its markup are identical on all twenty. The seventeen capped verticals never match this selector, so their gutter is untouched; verified at 1858px before and after at a 1906px viewport. */ .container-fluid .v2x { max-width: var(--seo-shell-max, 1920px); margin-inline: auto; padding-inline: max(var(--seo-shell-pad, 24px), env(safe-area-inset-left)); } /* ═══════════════════════════════════════════════════════════════════════════ §FX — the filter rail: no inner scrollbar, and a head that fits (2026-08-18) ═══════════════════════════════════════════════════════════════════════════ Two separate faults in `.dir-fx`, both only above 1500px — the media block at that breakpoint already unsets the first one, which is why neither shows on a laptop. ── 1 · THE PANEL SCROLLED INSIDE ITSELF ────────────────────────────────── The base sheet pins the rail and caps the box to the viewport: .v2x .dir-fx, .v2x .dir-tr { position: sticky; top: 130px; align-self: start } .v2x .dir-fx-box { max-height: calc(100vh - 130px); overflow: hidden } .v2x .dir-fx-box { overflow-y: auto } Measured on /ai-directory at 2546px: the box is 1141px tall around 1397px of content, so the last two groups sit behind a 6px scrollbar. A filter list is a scan-and-tick surface — putting it in a second scroller means a reader has to find the inner scrollport before they can reach "Categories", and on a trackpad the page and the panel fight for the same gesture. So the cap comes off and the panel renders at its full height. ⚠️ STICKY HAS TO GO WITH IT, and this is the part that is easy to get wrong. A `position: sticky` element TALLER than the viewport pins its TOP at `top: 130px` and never scrolls its own bottom into view — the groups below the fold become permanently unreachable, which is strictly worse than the scrollbar this block is removing. Full height and sticky are mutually exclusive; the panel scrolls with the page now. `.dir-tr` KEEPS its sticky — the trending rail is a fixed six rows and always fits, which is why the base rule pairs them and why this one does not. Do not merge the two selectors back together. The head's own `position: sticky; top: 0` goes too. With no scrolling ancestor left, its nearest scrollport is the PAGE, so it would detach and float over the results as the reader scrolls. The 1500px block already sets it static for the same reason. */ .v2x .dir-fx { position: static; } .v2x .dir-fx-box { max-height: none; overflow: visible; } .v2x .dir-fx-head { position: static; border-bottom-color: var(--v2-line); } body.theme-dark .v2x .dir-fx-head { border-bottom-color: var(--dk-line,rgba(255,255,255,.10)); } /* ── §FX-HEAD) "Filter Tools" against "Clear all" ───────────────────────── The head is a 196px flex row holding, in order: a 24px icon chip, the label, a count badge, and the Clear button. With a filter active that is 24 + 8 + 78 + 8 + 20 = 138 (title) + 8 + 76 = 84 (clear) = 222 against 196 available 26px short. `.dir-fx-title` carries `min-width: 0`, so it absorbs the deficit — and the badge inside it, despite `flex: 0 0 auto` and a 20px `min-width`, renders **8x8** with its digit clipped. Measured, not inferred: `getBoundingClientRect()` returns 8x8 while `getComputedStyle` still reports 20px. The head wraps instead. When the row does not fit, "Clear all" drops to a second line and everything keeps its full size; when no filter is active the button is already icon-only (`.is-dim` zeroes its font-size) and the row fits on one line as before. Nothing truncates and no affordance is lost — the alternative, ellipsising "Filter Tools" to protect the badge, trades a clipped number for a clipped word. `min-width: max-content` on the title is what FORCES the wrap: without it the title keeps shrinking and the row never reaches its wrap point. */ .v2x .dir-fx-head { flex-wrap: wrap; row-gap: 8px; } .v2x .dir-fx-title { min-width: max-content; } /* ── §FX-BADGE) The count badge was stuck at 40% ────────────────────────── ⚠️ THE SQUEEZED BADGE WAS NEVER A FLEX PROBLEM, and the first version of this block treated it as one. `min-width: 20px` and `flex: 0 0 auto` were already set, already correct, and made no difference — because the badge was not being SHRUNK, it was being SCALED: getComputedStyle → width 20px, transform matrix(0.4, 0, 0, 0.4, 0, 0) offsetWidth → 20 (the layout box is right) getBoundingClientRect → 8 (the PAINTED box is 40% of it) The base rule runs `animation: dir-fx-badge-in .35s` and the keyframes are `0% { transform: scale(.4); opacity: 0 } → 100% { scale(1); opacity: 1 }`. Read back live, that animation reports `playState: "running"` with `currentTime: 0` — permanently pinned on its first frame, so the badge paints at 40% and its digit is clipped. It stays there through reloads and across seconds of sampling; no `content-visibility` or `contain` on any ancestor explains it, and the most likely cause is Livewire re-creating the node on each patch and restarting the animation from zero every time. ⚠️ `transform: none` ALONE DOES NOT FIX THIS. An active animation's transform sits above normal declarations in the cascade, so the base value loses no matter how specific it is. The animation itself has to go — which is also the honest call: an entry animation that has never once been seen to play is not an animation, it is a rendering fault with a name. The sizing floors stay as documentation of the box the badge is supposed to occupy; they cost nothing and they are what a reader will check first. */ .v2x .dir-fx-title-badge { animation: none; transform: none; flex: 0 0 auto; min-width: 20px; min-height: 20px; } /* ═══════════════════════════════════════════════════════════════════════════ §HHGAP — breathing room between the hero and the marquee (2026-08-18) ═══════════════════════════════════════════════════════════════════════════ The listing hero ends flush against the marquee. Measured from the hero's border box to the top of `.aitsmq` at 1906px: / (.hpx-hero) 56px /ai-directory (.dir-hh) 0px Zero. `.dir-hh` carries `padding-bottom: 8px` and nothing else, so the stat deck sits eight pixels above a saturated blue band running the full width of the window — the two read as one stuck-together block rather than as a hero followed by a ticker. The homepage's 56px does not come from the marquee: every margin between `.hpx-hero` and `.aitsmq` computes to 0, and the space is the hero band's own bottom padding. So the fix belongs on the listing hero too, not on the shared marquee component — `x-public.marquee` renders on `/` as well, and a `margin-top` there would push the homepage to 112px. ── The phone step is the homepage's, measured not guessed ──────────────── Sampled across widths, `/` holds 56px down to 660px and drops to 40px by 640 — a step at the 640px breakpoint these sheets already use (§CATBAND-RESP and shell-cap both key on it). Mirrored here rather than rounded to one number, so the two pages stay level at every width. ⚠️ Scoped to `.v2x .dir-hh`, which is the LISTING hero only. The homepage's hero is `.hpx-hero` and is not touched. The hero and the marquee are siblings inside `.v2x` on all twenty verticals — with only the `` tags hh-orbit injects between them — so a margin on the hero lands exactly where the gap is missing. On a page that renders no marquee the same margin simply separates the hero from whatever follows, which is the right result either way. */ .v2x .dir-hh { margin-bottom: 56px; } @media (max-width: 640px) { .v2x .dir-hh { margin-bottom: 40px; } } /* ═══════════════════════════════════════════════════════════════════════════ §NOTR — the right-hand trending rail comes off (2026-08-18) ═══════════════════════════════════════════════════════════════════════════ `.dir-tr` is the sticky right rail — "Trending Tools" / "Top Companies" / "Trending now", one per vertical — and it is removed from the listing, category and tag pages on request. ── Why CSS and not the blades ──────────────────────────────────────────── TWENTY-THREE blades render `