/* ═══════════════════════════════════════════════════════════════════════════ §HH-ORB — the listing hero orbit, rebuilt to the HOMEPAGE geometry assets/css/ext/public-dir-hh-orbit.css (2026-08-17) ═══════════════════════════════════════════════════════════════════════════ Loaded by every page that renders `.dir-hh` — the index, CATEGORY and TAG hubs of all twenty verticals (directory, models, GPTs, extensions, courses, guides, cheat sheets, skills, glossary, prompts, templates, workflows, projects, use cases, collections, compare, alternatives, best-of, deals, events). One file rather than a block appended to each of the three base sheets, so "these heroes look the same" is true by construction instead of by remembering to copy an edit three ways. ── The defect this closes ──────────────────────────────────────────────── `.dir-hh` was built in July to "match the / hero band". It matched the homepage AS IT WAS: two mirrored dashed arcs pinned to the left and right edges at a fixed 260px, with the logo tiles placed by a SEPARATE set of hand-tuned percentages (`.dir-hh-t1{left:6%;top:8%}` and friends). The two systems shared no geometry, so the tiles never sat on the arcs — they floated beside them, and the gap changed with every viewport width. The homepage then moved on (homepage.css §HERO-ORB, 2026-08-13): the arcs became ONE ellipse, the tiles were re-placed by the ring's own equation, and a two-layer starfield plus eighteen glints were added. Twenty verticals were left wearing the superseded look. This sheet ports that pass across. ── The geometry ───────────────────────────────────────────────────────── The ring is a single `` in a `viewBox="0 0 100 100"` with `preserveAspectRatio="none"`, stretched to the orbit box. That makes the SVG's coordinate space and the box's PERCENTAGE space the same space, so a point at angle θ on the ring is exactly: left = 50 + 47·cos θ % top = 50 + 43·sin θ % Every tile and every node below is placed with that formula and nothing else — they are on the ring BY CONSTRUCTION at every width rather than by eye at one width. θ is measured the CSS way: 0° at three o'clock, growing clockwise, because y grows downward. Do not "tidy" these numbers; a rounded-off value is a tile off the path. ── ⚠️ Centring is done with MARGINS, not `transform` ───────────────────── The homepage centres each tile on its point with `transform: translate(-50%, -50%)`, which it can afford because its tile is two elements — an outer that owns position and an inner span that owns motion. `.dir-hh-tile` is ONE element and the base sheet already spends its transform on the hover lift (`.v2x .dir-hh-tile:hover{transform: translateY(-4px) scale(1.05)}`, specificity (0,3,0) — it outranks anything here). Centring with a transform would therefore be DISCARDED on hover and the tile would jump half its own width sideways under the cursor. Negative margins are not a property anything else on this component competes for, so they compose with the lift instead of fighting it. The margins are half the tile box: 78px tiles → -39px, 66px tiles → -33px. ── Load order ─────────────────────────────────────────────────────────── Emitted by `v2/public/partials/hh-orbit.blade.php` at the orbit's own place in the document, which is always AFTER the page's base sheet. Every rule here either matches (0,2,0) or exceeds the specificity of the one it replaces, so source order settles the cascade — the same idiom the directory sheet's own "HOMEPAGE PARITY PASS" block uses. ⚠️ Below 1180px the base sheets set `.dir-hh-orbit,.dir-hh-tiles{display: none}`. Everything here is desktop-only by design and that rule must keep winning, which is why nothing below is written with `!important`. ═══════════════════════════════════════════════════════════════════════════ */ /* ── §HH-ORB-BOX) The box the equation is measured in ────────────────────── The orbit and the tiles MUST share one box or the percentage identity above is false. They already did — but the box was `inset:44px 0 auto;height:520px`, a fixed slab that ended above the counter card, so a ring drawn inside it stopped short of the composition it is supposed to enclose. Top-to-bottom instead, so the ellipse wraps the whole hero (badge through counters) the way the homepage's does, and so a hero WITHOUT a counter deck (the compact guides/cheat-sheet archives) gets a ring that fits what it actually has. ⚠️ Written as four longhands, NOT `inset: 0`. The base rule centres this box with `left:50%;transform:translateX(-50%)`; `inset:0` would also set `left:0` and the surviving transform would then drag the whole layer half a screen to the left. Longhands say exactly what changes and nothing else. 1240px, not the base sheet's 1100px: at 1100px the tiles' 7.76%/92.24% columns land 46-124px and 976-1054px, and `.dir-hh-copy` is 860px centred (120-980px) — a 4px overlap at BOTH edges. 1240px clears it by 55px. */ .v2x .dir-hh-orbit, .v2x .dir-hh-tiles { top: 0; bottom: 0; left: 50%; right: auto; width: 100%; height: auto; max-width: 1240px; transform: translateX(-50%); } /* The starfield is deliberately `inset:-4% -2%` — it bleeds past the orbit box so its edge fades out instead of stopping on a straight line. On a viewport between 1181px (where the orbit switches on) and 1240px the box is the full hero width, so that bleed is ~25px of absolutely-positioned layer sitting outside it. It is decoration and it can never be scrolled to, but a stray 25px is enough to give the DOCUMENT a horizontal scrollbar, and a page that rocks sideways on a laptop is a real bug caused by an invisible one. `clip`, not `hidden`: `overflow:hidden` on one axis forces the other to `auto` and turns the hero into a scroll container, which would break any `position:sticky` descendant and swallow scroll momentum. `clip` cuts the overflow without creating one. Safari below 16 ignores it and simply keeps today's behaviour, so this is a guard that can only help. */ .v2x .dir-hh { overflow-x: clip; } /* The arcs are gone from the markup. Kept as a stop so a cached compiled view or a blade this pass missed degrades to "no decoration" rather than drawing the old arcs ACROSS the new ring. */ .v2x .dir-hh-arc { display: none; } /* ── §HH-ORB-RING) The ellipse ──────────────────────────────────────────── `.dir-hh-orb`, not `.dir-hh-ring` — `dir-hh-ring-flow` / `dir-hh-ring-glint` are already taken by the search field's animated gradient border in the base sheet, and two unrelated "ring"s in one namespace is how the wrong keyframe gets edited. NOT the base sheet's `--v2-line`: that token is a hairline card edge, and at 1.4px, dashed, stretched over 1200px of near-white hero it is invisible — which is what made the old arcs read as absent rather than subtle. Drawn in the brand hue at a measured alpha instead. `vector-effect:non-scaling-stroke` in the markup keeps the hairline at 1.4px while the viewBox is stretched, so the dashes neither fatten on a wide screen nor vanish on a narrow one. */ .v2x .dir-hh-orb { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(54, 128, 237, .55); overflow: visible; pointer-events: none; } /* Two rings, two jobs. The main ring carries the tiles; the outer one is depth only and never has anything placed on it, so it is deliberately fainter and more sparsely dashed. */ .v2x .dir-hh-orb-main { opacity: 1; } .v2x .dir-hh-orb-far { opacity: .5; } /* Dark: the same hue lifted. A 55%-alpha blue that reads clearly over #FFFFFF loses most of its contrast over #0E0E11 — the asymmetry every other token pair in this namespace is tuned for. */ body.theme-dark .v2x .dir-hh-orb { color: rgba(120, 180, 255, .62); } body.theme-dark .v2x .dir-hh-orb-far { opacity: .6; } /* ── §HH-ORB-POS) Everything that sits on the ring ──────────────────────── Each left/top pair is `50 + 47·cos θ` / `50 + 43·sin θ` for that element's θ. Angles are the homepage's, so the two heroes are the same picture: t1 left-upper 206° t2 right-upper 334° t3 left-lower 154° t4 right-lower 26° t5 left-foot 124° t6 right-foot 56° The tile ORDER is the one the blades already emit (odd = left, even = right, filling from the top), so a 4-tile hero uses t1-t4 and lands symmetrically with no per-count special-casing. `right:auto` because the base sheet places the even tiles from the right edge; leaving both set would pin a tile to two edges at once. */ .v2x .dir-hh-t1, .v2x .dir-hh-t2, .v2x .dir-hh-t3, .v2x .dir-hh-t4, .v2x .dir-hh-t5, .v2x .dir-hh-t6 { right: auto; } /* 78px tiles → -39px. See the margins note in the header. */ .v2x .dir-hh-t1 { left: 7.76%; top: 31.15%; margin: -39px 0 0 -39px; } /* θ 206° */ .v2x .dir-hh-t2 { left: 92.24%; top: 31.15%; margin: -39px 0 0 -39px; } /* θ 334° */ /* 66px tiles → -33px. The base sheet already shrinks t3/t4; t5/t6 have no base rule at all, so they carry their own box here — four tiles is what every blade emits today and this is what a fifth and sixth would land on. */ .v2x .dir-hh-t3 { left: 7.76%; top: 68.85%; margin: -33px 0 0 -33px; } /* θ 154° */ .v2x .dir-hh-t4 { left: 92.24%; top: 68.85%; margin: -33px 0 0 -33px; } /* θ 26° */ .v2x .dir-hh-t5 { left: 23.72%; top: 85.65%; margin: -33px 0 0 -33px; width: 66px; height: 66px; border-radius: 16px; padding: 11px; } /* θ 124° */ .v2x .dir-hh-t6 { left: 76.28%; top: 85.65%; margin: -33px 0 0 -33px; width: 66px; height: 66px; border-radius: 16px; padding: 11px; } /* θ 56° */ /* The nodes. Placed BETWEEN the tiles so the ring reads as populated rather than as four objects with empty wire between them. 6px → -3px margins, which also leaves the base sheet's `dir-hh-float` animation (a bare translateY) free to compose instead of clobbering a centring transform. The per-dot `animation-delay` set in the base sheet is untouched and still staggers them. */ .v2x .dir-hh-dot { right: auto; width: 6px; height: 6px; margin: -3px 0 0 -3px; opacity: .55; } .v2x .dir-hh-d1 { left: 17.35%; top: 19.07%; } /* θ 226° */ .v2x .dir-hh-d2 { left: 3.00%; top: 50.00%; } /* θ 180° */ .v2x .dir-hh-d3 { left: 17.35%; top: 80.93%; } /* θ 134° */ .v2x .dir-hh-d4 { left: 82.65%; top: 19.07%; } /* θ 314° */ .v2x .dir-hh-d5 { left: 97.00%; top: 50.00%; } /* θ 0° */ .v2x .dir-hh-d6 { left: 82.65%; top: 80.93%; } /* θ 46° */ body.theme-dark .v2x .dir-hh-dot { opacity: .7; } /* ── §HH-ORB-STARS) The field ───────────────────────────────────────────── Ported verbatim from homepage.css §HERO-ORB-STARS. Two elements, ~140 layered radial-gradients, so the field costs two DOM nodes rather than a hundred and forty. Read that section for the reasoning; the only change here is the namespace. ------------------------------------------------------------------------ */ .dir-hh-stars { position: absolute; inset: -4% -2%; pointer-events: none; color: rgba(54, 128, 237, .62); background-repeat: no-repeat; background-image: radial-gradient(2.1px 2.1px at 5.9% 4.1%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 10.7% 10.9%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 19.7% 3.3%, currentColor, transparent 100%), radial-gradient(6.8px 6.8px at 19.7% 3.3%, currentColor, transparent 70%), radial-gradient(1.8px 1.8px at 27.4% 5.1%, currentColor, transparent 100%), radial-gradient(8.1px 8.1px at 27.4% 5.1%, currentColor, transparent 70%), radial-gradient(1.4px 1.4px at 32.1% 6.6%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 36.5% 9.0%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 46.9% 4.0%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 65.5% 2.6%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 73.6% 9.7%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 9.5% 19.3%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 33.0% 25.0%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 36.7% 23.4%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 54.4% 23.6%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 58.1% 23.3%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 65.1% 16.1%, currentColor, transparent 100%), radial-gradient(2.1px 2.1px at 73.6% 26.6%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 79.2% 21.1%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 89.4% 20.4%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 94.7% 23.9%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 6.3% 30.1%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 11.0% 37.6%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 15.1% 32.9%, currentColor, transparent 100%), radial-gradient(1.9px 1.9px at 38.6% 34.3%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 63.4% 40.0%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 65.9% 35.0%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 77.5% 39.1%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 81.6% 38.0%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 89.4% 35.0%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 98.5% 39.7%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 13.1% 48.4%, currentColor, transparent 100%), radial-gradient(5.4px 5.4px at 13.1% 48.4%, currentColor, transparent 70%), radial-gradient(1.9px 1.9px at 17.7% 54.4%, currentColor, transparent 100%), radial-gradient(8.5px 8.5px at 17.7% 54.4%, currentColor, transparent 70%), radial-gradient(1.9px 1.9px at 33.7% 46.7%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 39.6% 54.9%, currentColor, transparent 100%), radial-gradient(6.8px 6.8px at 39.6% 54.9%, currentColor, transparent 70%), radial-gradient(1.5px 1.5px at 48.2% 48.6%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 55.8% 46.0%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 59.4% 52.7%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 66.9% 47.6%, currentColor, transparent 100%), radial-gradient(2.1px 2.1px at 72.6% 54.0%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 79.3% 55.3%, currentColor, transparent 100%), radial-gradient(2.1px 2.1px at 89.2% 55.0%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 4.3% 68.3%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 11.7% 63.3%, currentColor, transparent 100%), radial-gradient(2.0px 2.0px at 17.1% 61.6%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 34.0% 67.4%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 41.8% 69.7%, currentColor, transparent 100%), radial-gradient(8.1px 8.1px at 41.8% 69.7%, currentColor, transparent 70%), radial-gradient(1.8px 1.8px at 44.8% 63.4%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 52.0% 68.6%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 73.6% 62.9%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 82.4% 69.4%, currentColor, transparent 100%), radial-gradient(8.1px 8.1px at 82.4% 69.4%, currentColor, transparent 70%), radial-gradient(1.2px 1.2px at 89.0% 58.7%, currentColor, transparent 100%), radial-gradient(5.4px 5.4px at 89.0% 58.7%, currentColor, transparent 70%), radial-gradient(1.7px 1.7px at 97.4% 66.9%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 12.4% 75.4%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 19.4% 78.0%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 27.6% 76.0%, currentColor, transparent 100%), radial-gradient(5.0px 5.0px at 27.6% 76.0%, currentColor, transparent 70%), radial-gradient(1.7px 1.7px at 29.3% 75.3%, currentColor, transparent 100%), radial-gradient(2.0px 2.0px at 42.1% 77.0%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 51.8% 76.0%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 59.3% 76.4%, currentColor, transparent 100%), radial-gradient(2.0px 2.0px at 66.6% 82.1%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 77.0% 75.7%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 84.9% 82.1%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 95.6% 78.0%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 11.2% 95.6%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 20.6% 94.7%, currentColor, transparent 100%), radial-gradient(2.1px 2.1px at 27.7% 95.1%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 34.4% 93.1%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 40.4% 91.3%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 44.5% 89.6%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 55.8% 97.0%, currentColor, transparent 100%), radial-gradient(5.4px 5.4px at 55.8% 97.0%, currentColor, transparent 70%), radial-gradient(1.7px 1.7px at 61.1% 87.9%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 66.1% 95.9%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 72.6% 91.7%, currentColor, transparent 100%), radial-gradient(6.8px 6.8px at 72.6% 91.7%, currentColor, transparent 70%), radial-gradient(1.8px 1.8px at 91.4% 91.7%, currentColor, transparent 100%), radial-gradient(1.8px 1.8px at 96.1% 93.1%, currentColor, transparent 100%); opacity: .85; animation: dir-hh-star-twinkle 6.5s ease-in-out infinite; } /* The second field is offset, finer and slower, and twinkles in ANTIPHASE (negative delay of half the period). Two fields drifting against each other is what gives the impression of depth from what is really two flat layers. */ .dir-hh-stars-2 { inset: -6% -3%; color: rgba(1, 150, 253, .5); background-image: radial-gradient(1.7px 1.7px at 6.9% 14.7%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 14.3% 11.5%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 22.2% 12.2%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 27.3% 2.8%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 62.4% 10.7%, currentColor, transparent 100%), radial-gradient(0.9px 0.9px at 87.3% 3.3%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 94.8% 10.5%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 5.4% 29.2%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 12.0% 18.5%, currentColor, transparent 100%), radial-gradient(1.0px 1.0px at 17.3% 18.2%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 32.2% 18.5%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 39.8% 25.8%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 56.0% 31.2%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 64.4% 28.7%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 68.6% 24.8%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 78.2% 19.7%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 84.2% 31.5%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 94.1% 25.3%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 2.2% 37.0%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 15.0% 47.3%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 23.3% 46.0%, currentColor, transparent 100%), radial-gradient(0.9px 0.9px at 25.7% 48.7%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 44.2% 44.5%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 53.8% 48.3%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 62.8% 47.7%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 79.3% 35.5%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 85.4% 38.7%, currentColor, transparent 100%), radial-gradient(1.7px 1.7px at 93.1% 42.3%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 2.9% 58.8%, currentColor, transparent 100%), radial-gradient(1.0px 1.0px at 9.5% 60.8%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 19.5% 52.8%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 28.5% 63.3%, currentColor, transparent 100%), radial-gradient(1.0px 1.0px at 43.2% 57.7%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 78.3% 57.0%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 96.3% 63.5%, currentColor, transparent 100%), radial-gradient(1.0px 1.0px at 13.6% 81.0%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 23.7% 77.7%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 27.0% 71.7%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 46.1% 68.3%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 57.3% 72.5%, currentColor, transparent 100%), radial-gradient(1.0px 1.0px at 69.6% 76.3%, currentColor, transparent 100%), radial-gradient(0.9px 0.9px at 78.0% 78.7%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 87.7% 77.5%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 12.2% 90.5%, currentColor, transparent 100%), radial-gradient(1.0px 1.0px at 23.6% 87.7%, currentColor, transparent 100%), radial-gradient(1.2px 1.2px at 31.4% 91.2%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 38.7% 97.5%, currentColor, transparent 100%), radial-gradient(1.3px 1.3px at 47.2% 87.8%, currentColor, transparent 100%), radial-gradient(1.4px 1.4px at 51.3% 92.0%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 59.8% 91.0%, currentColor, transparent 100%), radial-gradient(1.6px 1.6px at 68.3% 93.7%, currentColor, transparent 100%), radial-gradient(1.5px 1.5px at 80.2% 96.2%, currentColor, transparent 100%), radial-gradient(1.1px 1.1px at 90.3% 87.2%, currentColor, transparent 100%); opacity: .7; animation: dir-hh-star-twinkle 9s ease-in-out infinite -4.5s; } /* Dark is where a starfield belongs, so it gets true white for the near layer and a cool blue for the far one, both a step brighter. */ body.theme-dark .v2x .dir-hh-stars { color: rgba(255, 255, 255, .92); opacity: 1; } body.theme-dark .v2x .dir-hh-stars-2 { color: rgba(160, 200, 255, .8); opacity: .95; } @keyframes dir-hh-star-twinkle { 0%, 100% { opacity: .38; } 50% { opacity: .92; } } /* ── §HH-ORB-SPARK) The eighteen glints ──────────────────────────────────── Ported verbatim from homepage.css §HERO-ORB-SPARK. Each glint is ONE span carrying the house four-point mark as a MASK, so the shape is the same star the band headings flank themselves with — not a second, nearly-identical star invented here. A mask rather than a coloured data-URI because a baked-in fill would stay light-mode blue at night. Positions come from a seeded generator that REJECTS the centred copy column, so no glint can land on the headline, the search field or the counters. ------------------------------------------------------------------------ */ .dir-hh-spark { position: absolute; width: var(--sp, 16px); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); background: currentColor; color: var(--brand-blue, #3680ED); /* ⚠️ A RESTING opacity, not 0. The first version flashed each sparkle from 0 → .95 → 0 on its own long cycle, so at any given moment most of the eighteen were fully invisible — the field read as three or four stars, not seventeen. They are part of the composition, so they are always drawn; the animation only breathes around this value. */ opacity: .55; pointer-events: none; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4c1.6 6.2 3.4 8 9.6 9.6C15.4 13.6 13.6 15.4 12 21.6 10.4 15.4 8.6 13.6 2.4 12 8.6 10.4 10.4 8.6 12 2.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4c1.6 6.2 3.4 8 9.6 9.6C15.4 13.6 13.6 15.4 12 21.6 10.4 15.4 8.6 13.6 2.4 12 8.6 10.4 10.4 8.6 12 2.4z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; animation: dir-hh-spark-flash var(--sp-dur, 7s) ease-in-out infinite var(--sp-delay, 0s); } /* ⚠️ NO ::before / ::after. The first version drew the star as two crossed tapered bars, which is a PLUS, not the house mark — the brand star has concave curves between its points and that is the whole difference between "a sparkle" and "a cross". One mask, one element, the real shape. */ .dir-hh-s1 { left: 92.9%; top: 11.7%; --sp: 17px; --rot: 1deg; --sp-delay: -4.0s; --sp-dur: 9.8s; } .dir-hh-s2 { left: 9.1%; top: 12.7%; --sp: 13px; --rot: 9deg; --sp-delay: -5.4s; --sp-dur: 5.7s; } .dir-hh-s3 { left: 85.8%; top: 20.0%; --sp: 26px; --rot: -14deg; --sp-delay: -2.4s; --sp-dur: 7.4s; } .dir-hh-s4 { left: 77.4%; top: 23.3%; --sp: 13px; --rot: -16deg; --sp-delay: -4.2s; --sp-dur: 8.0s; } .dir-hh-s5 { left: 20.8%; top: 32.8%; --sp: 22px; --rot: -1deg; --sp-delay: -2.2s; --sp-dur: 5.5s; } .dir-hh-s6 { left: 4.8%; top: 33.1%; --sp: 13px; --rot: -11deg; --sp-delay: -5.5s; --sp-dur: 9.7s; } .dir-hh-s7 { left: 3.3%; top: 44.4%; --sp: 22px; --rot: 22deg; --sp-delay: -8.2s; --sp-dur: 9.3s; } .dir-hh-s8 { left: 82.2%; top: 47.8%; --sp: 15px; --rot: 24deg; --sp-delay: -3.1s; --sp-dur: 5.3s; } .dir-hh-s9 { left: 83.8%; top: 61.9%; --sp: 22px; --rot: 16deg; --sp-delay: -6.7s; --sp-dur: 7.7s; } .dir-hh-s10 { left: 11.7%; top: 69.1%; --sp: 19px; --rot: -10deg; --sp-delay: -8.7s; --sp-dur: 5.4s; } .dir-hh-s11 { left: 96.9%; top: 75.3%; --sp: 15px; --rot: 9deg; --sp-delay: -4.7s; --sp-dur: 8.7s; } .dir-hh-s12 { left: 3.3%; top: 77.6%; --sp: 22px; --rot: 5deg; --sp-delay: -1.6s; --sp-dur: 9.8s; } .dir-hh-s13 { left: 20.4%; top: 80.4%; --sp: 22px; --rot: 23deg; --sp-delay: -8.1s; --sp-dur: 8.0s; } .dir-hh-s14 { left: 86.2%; top: 84.4%; --sp: 13px; --rot: -18deg; --sp-delay: -6.6s; --sp-dur: 5.1s; } .dir-hh-s15 { left: 9.5%; top: 89.6%; --sp: 17px; --rot: -12deg; --sp-delay: -7.7s; --sp-dur: 9.8s; } .dir-hh-s16 { left: 35.9%; top: 91.0%; --sp: 19px; --rot: -12deg; --sp-delay: -6.0s; --sp-dur: 8.0s; } .dir-hh-s17 { left: 64.3%; top: 92.0%; --sp: 15px; --rot: 13deg; --sp-delay: -2.7s; --sp-dur: 5.9s; } .dir-hh-s18 { left: 90.9%; top: 95.5%; --sp: 19px; --rot: -2deg; --sp-delay: -3.1s; --sp-dur: 6.4s; } /* Violet on two of them, so the field is not one hue repeated five times. */ .dir-hh-s3, .dir-hh-s7, .dir-hh-s10, .dir-hh-s13, .dir-hh-s16 { color: #0284C7; } body.theme-dark .v2x .dir-hh-spark { color: #DCEAFF; } body.theme-dark .v2x .dir-hh-s3, body.theme-dark .v2x .dir-hh-s7, body.theme-dark .v2x .dir-hh-s10, body.theme-dark .v2x .dir-hh-s13, body.theme-dark .v2x .dir-hh-s16 { color: #C9B6FF; } /* Asymmetric: a fast bloom and a slow fade reads as a glint catching the light. A symmetric ease reads as a pulsing lamp. */ /* A slow breath with one brighter peak per cycle. Because every sparkle has its own duration AND its own negative delay, the eighteen never pulse together — which is the difference between a night sky and a string of fairy lights blinking in unison. */ @keyframes dir-hh-spark-flash { 0%, 100% { opacity: .42; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.9); } 38% { opacity: .72; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.02); } 62% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.12); } 80% { opacity: .66; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); } } /* ── §HH-ORB-A11Y) Reduced motion / forced colours ──────────────────────── The glints stop flashing and settle at a readable resting opacity rather than vanishing — they are part of the composition, not just an animation. The fields stop twinkling and hold their mid value. The base sheets' own reduced-motion block already stills `.dir-hh-dot`; this only has to cover what this sheet added. */ @media (prefers-reduced-motion: reduce) { .dir-hh-stars, .dir-hh-stars-2 { animation: none; opacity: .6; } .dir-hh-spark { animation: none; opacity: .7; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); } } @media (forced-colors: active) { /* Pure decoration, and a starfield in system colours is noise on top of the one thing that matters here — the headline. The ring goes too: a dashed ellipse forced to CanvasText reads as a border round the hero. */ .dir-hh-stars, .dir-hh-stars-2, .dir-hh-spark, .v2x .dir-hh-orb { display: none; } } /* ═══ §HH-ORB-TABLET) The orbit between 701 and 1320 ════════════════════════ Until 2026-08-24 the base sheets hid `.dir-hh-orbit` and `.dir-hh-tiles` outright below 1180, so all twenty verticals dropped their hero decoration and their four brand tiles on any tablet. That cliff is gone; this is what makes the band underneath it work. The ellipse itself needs nothing — it is drawn in a `viewBox="0 0 100 100"` with `preserveAspectRatio="none"`, so it restretches to whatever box it is given, and the tiles ride the same percentage space (§HH-ORB). Only two things do not scale on their own: the tiles are sized in PIXELS, and the copy column is capped in pixels. TWO BANDS, AND THEY ARE THE .hpx LADDER. `/tools` and `/` run the homepage kit and step 66/56 to 54/46 at 900. This sheet first shipped a single 54/46 band across the whole range, which left a directory hero wearing visibly smaller tiles than the tools hero at 1024 and 1180 while its copy ran wider — two designs on one screen. Same sizes, same switch point, so the kits now agree at 1180, 1024 and 768. ⚠ THE TILES STEP AT 1320, NOT 1180 (§HH-BLEED, 2026-09-14): the homepage steps to 66/56 at `max-width:1320px`, so a 1280 laptop used to see 76/62 marks here and 66/56 on `/`. The copy column keeps its own 1180 step — see the note on the block below. ⚠ EVERY SIZE CARRIES ITS OWN MARGIN. `.dir-hh-tile` is centred on its ellipse point by `margin: -half` (§HH-ORB — the hover lift already owns transform, so a centring transform is not available to it). 66 goes with -33, 56 with -28, 54 with -27, 46 with -23. Change a width without its margin and every tile slides half the difference off the ring, which reads as a crooked orbit rather than as a sizing mistake. ⚠ THE left/top PERCENTAGES ARE NOT TOUCHED, AND MUST NOT BE. They are solved from the ellipse (left = 50 + 47·cos θ), which is exactly why the ring passes through the tiles here. The .hpx orbit places its tiles at free coordinates with the ring purely behind them, so at the same width its tiles sit a little further out. Dragging these across to match that x would put every tile off its own ring — the one property this hero is built around. Sizes and the copy column match; the geometry stays true. ══════════════════════════════════════════════════════════════════════════ */ /* The copy column steps at 1180, not 1320: the listing titles run longer than the homepage's ("All AI Tools in One Place" against "All AI in One Place"), and a 620px column at 1181-1320 wrapped them to FOUR 62px lines where the homepage wraps to three. 860 clears a 66px mark by 20px at 1181. */ @media (min-width: 901px) and (max-width: 1180px) { .v2x .dir-hh-copy { max-width: 620px; } } @media (min-width: 901px) and (max-width: 1320px) { .v2x .dir-hh-tile { width: 66px; height: 66px; border-radius: 17px; padding: 11px; } .v2x .dir-hh-t1, .v2x .dir-hh-t2 { margin: -33px 0 0 -33px; } .v2x .dir-hh-t3, .v2x .dir-hh-t4, .v2x .dir-hh-t5, .v2x .dir-hh-t6 { width: 56px; height: 56px; border-radius: 15px; padding: 9px; margin: -28px 0 0 -28px; } } @media (min-width: 701px) and (max-width: 900px) { /* Reserve the margin the tiles live in rather than picking a number: at 768 this resolves to ~496px and at 900 to the full 560px, so the column grows with the room instead of stepping. */ .v2x .dir-hh-copy { max-width: min(560px, calc(100% - 240px)); } .v2x .dir-hh-tile { width: 54px; height: 54px; border-radius: 15px; padding: 9px; } .v2x .dir-hh-t1, .v2x .dir-hh-t2 { margin: -27px 0 0 -27px; } .v2x .dir-hh-t3, .v2x .dir-hh-t4, .v2x .dir-hh-t5, .v2x .dir-hh-t6 { width: 46px; height: 46px; border-radius: 13px; padding: 8px; margin: -23px 0 0 -23px; } } /* ═══════════════════════════════════════════════════════════════════════════ §HH-SPON — the orbit's tiles are the sponsored tools (2026-09-14) wraps every .dir-hh hero's own tiles; when tag.hero.sponsored / category.hero.sponsored has something eligible the hero-sponsor ad unit (mode orbit-hh) emits `a.dir-hh-tile.dir-hh-t{n}.is-sponsored` instead — the same one-element tile, so the ring equation, the negative-margin centring, the hover lift and the tablet steps above all apply untouched. This block adds only the sponsored marks: the gold seal on the tile's corner (a bare mark, drop-shadow only), the "Name / SPONSORED" caption at rest, and the gold "Sponsored by Name" pill it becomes on hover / keyboard focus. Touch devices keep the rest caption; the whole tile is the link. ═══════════════════════════════════════════════════════════════════════ */ /* (0,3,1) beats the base sheet's `.v2x .dir-hh-tile img { width:100%; … }` */ .v2x .dir-hh-tile img.dir-hh-seal { position: absolute; right: -4px; bottom: -4px; z-index: 2; width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28)); transition: filter .25s ease; } .v2x .dir-hh-tile.is-sponsored:hover img.dir-hh-seal { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); } /* a tool with no logo: its monogram fills the tile */ .v2x .dir-hh-tile .dir-hh-mono { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 12px; background: linear-gradient(145deg, #EAF2FD 0%, #F8FAFE 100%); box-shadow: inset 0 0 0 1px rgba(54, 128, 237, .18); font-size: 22px; font-weight: 800; color: #1B5BB5; } /* caption at rest: the name, then SPONSORED in gold */ .v2x .dir-hh-tip .dir-hh-spon-rest { display: flex; flex-direction: column; align-items: center; gap: 2px; } .v2x .dir-hh-tip .dir-hh-spon-rest b { display: block; margin-top: 1px; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #A85B08; } /* the hover pill: the site's gold CTA surface, bronze ink, seal + name + arrow */ .v2x .dir-hh-tip .dir-hh-spon-hov { display: none; align-items: center; gap: 6px; padding: 6px 11px 6px 7px; border-radius: 999px; background: linear-gradient(135deg, #FFE58A 0%, #FFC107 55%, #F59E0B 100%); color: #3D2A00; font-size: 11.5px; font-weight: 800; letter-spacing: .01em; line-height: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, .3); box-shadow: 0 10px 22px -10px rgba(184, 110, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(184, 110, 0, .22); } .v2x .dir-hh-tip .dir-hh-spon-hov img { width: 14px; height: 14px; flex: 0 0 auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); } .v2x .dir-hh-tip .dir-hh-spon-hov svg { width: 12px; height: 12px; flex: 0 0 auto; } @media (hover: hover) { .v2x .dir-hh-tile.is-sponsored:hover .dir-hh-spon-rest { display: none; } .v2x .dir-hh-tile.is-sponsored:hover .dir-hh-spon-hov { display: inline-flex; animation: hh-spon-in .28s cubic-bezier(.2, .8, .2, 1) both; } .v2x .dir-hh-tile.is-sponsored:hover .dir-hh-tip { top: calc(100% + 12px); } } /* keyboard parity */ .v2x .dir-hh-tile.is-sponsored:focus-visible .dir-hh-spon-rest { display: none; } .v2x .dir-hh-tile.is-sponsored:focus-visible .dir-hh-spon-hov { display: inline-flex; } /* the tip itself is centred by its own translateX(-50%); the pill is its child, so it only slides */ @keyframes hh-spon-in { from { opacity: 0; transform: translateY(-4px) scale(.94); } to { opacity: 1; transform: none; } } /* the small marks (t3-t6) carry the homepage's 19px seal; no tablet steps — the homepage keeps 22 / 19 at every width, and so does this (§HH-BLEED) */ .v2x .dir-hh-t3 img.dir-hh-seal, .v2x .dir-hh-t4 img.dir-hh-seal, .v2x .dir-hh-t5 img.dir-hh-seal, .v2x .dir-hh-t6 img.dir-hh-seal { width: 19px; height: 19px; right: -3px; bottom: -3px; } /* dark */ body.theme-dark .v2x .dir-hh-tip .dir-hh-spon-rest b { color: #FFD452; } body.theme-dark .v2x .dir-hh-tile img.dir-hh-seal { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); } body.theme-dark .v2x .dir-hh-tile .dir-hh-mono { background: linear-gradient(145deg, var(--dk-surface-3, #1D1D22) 0%, var(--dk-surface-4, #24242A) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); color: #8CBEFA; } body.theme-dark .v2x .dir-hh-tip .dir-hh-spon-hov { box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(184, 110, 0, .22); } @media (prefers-reduced-motion: reduce) { .v2x .dir-hh-tip .dir-hh-spon-hov { animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ §HH-PARITY — the listing heroes wear the homepage hero's design (2026-09-14) The owner asked for one hero design sitewide. Both heroes already share the container, the copy stack, the search field, the chips and the deck; what differed was the ORBIT: `.dir-hh`'s box was capped at 1240px and ran the full hero height (deck included), its tiles were white cards, and the sizes / caption / chip row were a step off. Everything below restates the homepage's numbers; the ring equation and the negative-margin centring are untouched (see §HH-ORB). Tablet and phone steps keep their own values — every rule that would collide with them is scoped to the desktop band. ═══════════════════════════════════════════════════════════════════════ */ /* 1. the orbit box is the hero's full width, like `.hpx-hero-orbit{inset:0}`, and it stops above the stat deck, which on the homepage sits OUTSIDE the hero. `:has()` keeps a deck-less hero at bottom:0. */ .v2x .dir-hh-orbit, .v2x .dir-hh-tiles { max-width: none; } .v2x .dir-hh:has(.dir-hh-stats) .dir-hh-orbit, .v2x .dir-hh:has(.dir-hh-stats) .dir-hh-tiles { bottom: 150px; } /* 2. bare marks — the logo IS the tile (homepage: "no card, no ring, no plate"). Only a tile that holds an image goes bare; a module's own icon tile (guides, blog, events …) keeps its card, and the sponsored monogram draws its own plate. The hover is the mark's: it lifts and grows, and its shadow is a drop-shadow that follows the logo's alpha. */ .v2x .dir-hh-tile:has(> img), .v2x .dir-hh-tile:has(> .dir-hh-mono) { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; } .v2x .dir-hh-tile:has(> img) img, .v2x .dir-hh-tile:has(> .dir-hh-mono) .dir-hh-mono { transition: transform .28s cubic-bezier(.22, .61, .36, 1), filter .28s ease; } .v2x .dir-hh-tile:has(> img):hover, .v2x .dir-hh-tile:has(> .dir-hh-mono):hover { transform: translateY(-5px) scale(1.13); box-shadow: none; border-color: transparent; } .v2x .dir-hh-tile:has(> img):hover > img { filter: drop-shadow(0 12px 20px rgba(16, 24, 40, .30)); } body.theme-dark .v2x .dir-hh-tile:has(> img), body.theme-dark .v2x .dir-hh-tile:has(> .dir-hh-mono) { background: none; border: 0; box-shadow: none; } body.theme-dark .v2x .dir-hh-tile:has(> img):hover > img { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .62)); } /* the seal is inside the tile and must not take the mark's drop-shadow twice */ .v2x .dir-hh-tile:has(> img):hover > img.dir-hh-seal { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); } /* 3. desktop sizes: the homepage's 76 / 62 (was 78 / 66). Every size carries its own margin — the tile is centred on its ring point by margin:-half. 1321, not 1181: the homepage holds 76/62 only ABOVE 1320 (§HH-ORB-TABLET). */ @media (min-width: 1321px) { .v2x .dir-hh-tile { width: 76px; height: 76px; } .v2x .dir-hh-t1, .v2x .dir-hh-t2 { margin: -38px 0 0 -38px; } .v2x .dir-hh-t3, .v2x .dir-hh-t4, .v2x .dir-hh-t5, .v2x .dir-hh-t6 { width: 62px; height: 62px; margin: -31px 0 0 -31px; } } /* 4. the caption sits where the homepage's does */ .v2x .dir-hh-tip { top: calc(100% + 10px); font-weight: 650; letter-spacing: -.01em; } .v2x .dir-hh-tile.is-sponsored:hover .dir-hh-tip { top: calc(100% + 14px); } /* 5. copy and chips row — the homepage's measures, desktop and tablet only (the ≤700px phone rules in the base sheets stay in charge there) */ @media (min-width: 701px) { .v2x .dir-hh-sub { font-size: 19px; } /* one row where it fits: the pill may run wider than the 860px copy column (the homepage rail does the same), wrapping only when the viewport is short of room */ .v2x .dir-hh-chips { gap: 9px; margin: 26px 0 0; /* no auto margins: an overflowing flex item with them is start-aligned, not centred */ width: max-content; max-width: 100%; padding: 8px 10px; border-radius: 999px; background: #F7F9FC; box-shadow: inset 0 0 0 1px #F0F3F8; } body.theme-dark .v2x .dir-hh-chips { background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } .v2x .dir-hh-chips-lbl { display: inline-flex; align-items: center; gap: 8px; padding-inline-start: 6px; color: #3D4757; font-size: 13px; font-weight: 680; letter-spacing: -.005em; } body.theme-dark .v2x .dir-hh-chips-lbl { color: var(--dk-text-2, #C7CAD1); } /* the trend mark in its tinted chip, as an SVG mask so it takes the ink colour in both themes */ .v2x .dir-hh-chips-lbl::before { content: ""; display: inline-grid; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; background-color: #EAF2FD; box-shadow: inset 0 0 0 1px #CFE0FA; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B5BB5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 7-7'/%3E%3Cpath d='M14 8h6v6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 13px 13px; } body.theme-dark .v2x .dir-hh-chips-lbl::before { background-color: rgba(54, 128, 237, .16); box-shadow: inset 0 0 0 1px rgba(96, 164, 245, .28); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CBEFA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 7-7'/%3E%3Cpath d='M14 8h6v6'/%3E%3C/svg%3E"); } .v2x .dir-hh-chip { padding: 9px 18px; font-size: 13.5px; font-weight: 570; background-color: #fff; background-image: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 62%); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); } body.theme-dark .v2x .dir-hh-chip { background-color: rgba(29, 29, 34, .78); background-image: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 62%); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); } } /* 5b. on the desktop band the pill may run wider than the copy column (the homepage rail does), capped so it never reaches the t3/t4 marks at the narrow end of the band */ @media (min-width: 1181px) { .v2x .dir-hh-chips { max-width: min(1080px, calc(100vw - 340px)); } } /* ═══════════════════════════════════════════════════════════════════════════ §HH-BLEED — the hero has no box edge, like the homepage (2026-09-14) Reported from a wide monitor: every listing hero looked "capped" — a tinted panel that stopped dead ~340px in from each side of the screen while the homepage hero ran clean to the edges. Both heroes are the SAME 1872px box at 2560 (the shell cap); what differed was two things that drew that box: 1. The base sheets' glows are two 260px blurred discs PINNED TO THE HERO'S EDGES (`left:-90px` / `right:-90px`, blur 70px) — a blue wash on the left, a violet one on the right — and §HH-ORB-BOX clips the hero on x, so each disc is cut on a straight vertical line exactly at the box edge. That line IS the "cap". The homepage has no edge glows at all: its pair sits in the CENTRE of the orbit, behind the copy (`.hpx-stack-glow`, 42% wide at 50%/50%, and a violet 26% at 70%/24%), and fades to nothing well inside the box. Restated here, same numbers, same tokens (the dark values are the homepage's compiled `--hpx-brand-soft` / `--hpx-t-violet-bg`). 2. The starfield deliberately bleeds 2-3% past the orbit box "so its edge fades out instead of stopping on a straight line" — and the same clip stopped it on a straight line anyway. The homepage clips at the BAND, which is the full viewport, so its bleed survives. The clip comes off the hero: the document is already guarded by `.page{overflow-x:clip}` (custom.ltr.css — established after §HH-ORB-BOX was written) and `body{overflow-x:hidden}`, so nothing can scroll sideways, and the decoration fades into the gutter the way it was designed to. Every `.dir-hh` page (28 blades, three base sheets carrying identical glow rules) links this sheet after its base sheet, so one block reaches all of them. The glows live in the orbit layer, which is hidden ≤700px with the rest of the decoration, so the phone hero is untouched. ═══════════════════════════════════════════════════════════════════════ */ /* 1. the glows: the homepage's centred pair. `height:auto` frees the base sheet's 260px so `aspect-ratio` can make the disc a square of the orbit's width; `filter:none` because the homepage's glow is a soft radial gradient, not a blurred solid. `right:auto` / `margin:0` undo the edge pinning for BOTH discs (the base sheet pins the second from the right). The drift is the homepage's `hpx-glow-drift`, restated because keyframes do not cross stylesheets. */ .v2x .dir-hh-glow { left: 50%; top: 50%; right: auto; bottom: auto; width: 42%; height: auto; aspect-ratio: 1; margin: 0; transform: translate(-50%, -50%); filter: none; opacity: 1; border-radius: 50%; background: radial-gradient(circle, #EAF2FD 0%, transparent 68%); animation: dir-hh-glow-drift 9s ease-in-out infinite; } .v2x .dir-hh-glow-2 { left: 70%; top: 24%; width: 26%; opacity: .85; background: radial-gradient(circle, #F0EBFE 0%, transparent 70%); animation-duration: 12s; animation-delay: -4s; } body.theme-dark .v2x .dir-hh-glow { opacity: 1; background: radial-gradient(circle, rgba(54, 128, 237, .16) 0%, transparent 68%); } body.theme-dark .v2x .dir-hh-glow-2 { opacity: .85; background: radial-gradient(circle, rgba(124, 77, 240, .20) 0%, transparent 70%); } @keyframes dir-hh-glow-drift { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08); } } /* 2. the clip comes off the hero (see the header — the document is guarded at `.page`). `visible`, not `unset`: the base sheets never set it, but §HH-ORB-BOX above does, and this must be the later, winning value. */ .v2x .dir-hh { overflow-x: visible; } /* 3. motion and forced colours follow the rest of the decoration (§HH-ORB-A11Y) */ @media (prefers-reduced-motion: reduce) { .v2x .dir-hh-glow { animation: none; } } @media (forced-colors: active) { .v2x .dir-hh-glow { display: none; } }