/* ========================================================================== v11.css — the brand layer. v11 keeps the v10 layout sheets (/v3/assets/css/aeolus.css + /Assets/home.css) because they are almost entirely token-driven: geometry, grid, and the whole responsive cascade come free and cannot drift. This file then (1) redefines every token those sheets read so no v10 colour or typeface survives, and (2) removes the v10 atmosphere so the new surface stack owns every backdrop. Load order: self-hosted.css → tokens.css → backgrounds.css → glass.css → melt.css → aeolus.css → home.css → THIS FILE (last, always wins). ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKEN OVERRIDE — v10 names, v11 values -------------------------------------------------------------------------- */ :root { /* Type */ --font-display: 'Zodiak', 'Times New Roman', serif; --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBMPlexMono', ui-monospace, Menlo, Consolas, monospace; /* Surfaces */ --bg: var(--aeolus-cream); --bg-atmospheric: var(--aeolus-cream); --surface: #FFFFFF; --s2: #E9E4D9; --bg-dark: var(--aeolus-night-950); --bg-dark-2: var(--aeolus-night-900); --surface-dark: var(--aeolus-glass-dark-bg); --v10-night: var(--aeolus-night-950); /* Borders */ --bd: var(--aeolus-hairline-on-light); --bd2: rgba(26,25,22,0.18); --bd-dark: var(--aeolus-hairline-on-dark); --bd-dark-gold: var(--aeolus-gold-border); --bd-dark-gold-soft: var(--aeolus-gold-ring); /* Text — alpha ladders, never grey hexes */ --tx: var(--aeolus-text-on-light); --tx2: var(--aeolus-text-on-light-body); --tx3: var(--aeolus-text-on-light-label); --v10-muted-light: var(--aeolus-text-on-light-dim); --tx-on-dark: var(--aeolus-text-on-dark); --tx-on-dark-2: var(--aeolus-text-on-dark-lede); --tx-on-dark-3: var(--aeolus-text-on-dark-faint); --tx-on-dark-label: var(--aeolus-text-on-dark-label); --v10-muted-dark: var(--aeolus-text-on-dark-muted); /* Gold */ --gold: var(--aeolus-gold-600); --gold-dk: var(--aeolus-gold-600); --gold-bright: var(--aeolus-gold-400); --gold-bd: var(--aeolus-gold-border); --gold-lt: var(--aeolus-gold-wash); /* Navy — the deck's ink-on-gold, used for button text */ --navy: var(--aeolus-ink-gold); --navy-lt: var(--aeolus-navy-600); /* Status */ --green: var(--aeolus-sage-deep); --red: var(--aeolus-rust); --sage: var(--aeolus-sage); --sev-critical: var(--aeolus-coral); --sev-warning: var(--aeolus-gold-400); --connected-green: var(--aeolus-green); /* Glass — v10 names resolve to deck recipes so any un-reclassed card still reads as brand glass rather than v10 glass. */ --glass-dark-soft: var(--aeolus-glass-subtle-bg); --glass-dark-strong: var(--aeolus-glass-dark-bg); --glass-dark-gold-tint: var(--aeolus-glass-goldtint-bg); --glass-white: var(--aeolus-glass-light-subtle-bg); --glass-white-strong: var(--aeolus-glass-light-bg); --glass-white-border: var(--aeolus-glass-light-border); --glass-white-border-strong: var(--aeolus-glass-light-card-border); /* Blobs — the v10 canvas glows. Zeroed; the aurora layer replaces them. */ --blob-gold: transparent; --blob-navy: transparent; --glow-gold-dark: transparent; --glow-navy-dark: transparent; /* Radii — deck geometry: 10px cards, 14px product panels, 8px tiles */ --radius-sm: var(--aeolus-radius-tile); --radius-md: var(--aeolus-radius-card); --radius-lg: var(--aeolus-radius-panel); --radius-xl: var(--aeolus-radius-panel); --radius-2xl: var(--aeolus-radius-panel); /* Motion */ --transition-base: 200ms cubic-bezier(0.16,1,0.3,1); --transition-glass: 260ms cubic-bezier(0.16,1,0.3,1); } body { background: var(--aeolus-night-950); } /* -------------------------------------------------------------------------- 2. STRIP THE v10 ATMOSPHERE The old sheets paint their own sky: blob glows, a CSS starfield, a hero scrim stack, hard seam gradients and a fixed full-page grain. All of it is replaced by the per-surface layer stack, so all of it comes off. The classes stay on the DOM (zero deletions) and simply stop painting. -------------------------------------------------------------------------- */ .aeolus-canvas::before, .aeolus-canvas::after, .aeolus-canvas-dark::before, .aeolus-canvas-dark::after { content: none; } .aeolus-canvas, .aeolus-canvas-dark { background: transparent; isolation: isolate; } /* Grain is per-surface now (.bg-noise, night only). A fixed page-wide grain would also sit over cream and gold, which the brand forbids. */ body::before { content: none; } /* Hero sky: v10's own SKIN layers stay off, because nightHero replaces them. .sky-base is a hand-rolled blob-glow night and .sky-stars is a 35-stop CSS starfield — both are the old palette painting its own sky, which is exactly what the v11 surface stack exists to supersede. */ .sky-base, .sky-stars { display: none; } /* .hero-scrim stays off, now on evidence rather than pending it. v10 needed a lower-left scrim because its own .sky-base painted a blob glow right where the copy sits. The v11 surface does not: measured under the reverted copy rect at 1440x900 with the star field fully on, the backdrop is luma 0.0080 mean and white-at-0.94 contrast is 16.2 mean, with 0.035% of pixels bright enough to dip it. Those are individual stars, not a wash. Note the element is not in v11's markup at all, so "re-enabling" it would mean adding a div — another reason to settle the question by measurement instead of leaving it half-open. */ .hero-scrim { display: none; } /* .hero::after STAYS OFF, and the reasoning is worth keeping because restoring it is the obvious-looking move. It is v10's 300px bottom fade to flat night, v10's structural answer to the hero/story handoff. It was restored here on exactly that logic and then measured, and it made the join worse in two ways at once. It paints the hero's last 300px to solid --aeolus-night-950, luma 9.94, while #story's surface measures 9.1 — so it manufactured a ~1.0 luma step at the boundary that is not there without it. Worse, it is opaque, so it buried the weave and noise in the hero's last 300px while #story shows them: a texture handoff, which is the very defect the join work below exists to remove. v10 could afford it because v10 had no weave. Nothing replaces it, because nothing needs to. The join system below already resolves every structured layer to flat --bg-base by the hero's bottom edge, and measured at the row level the boundary is continuous without it: the luma delta across the junction is 0.007-0.040 in four column bands, under the ambient row-to-row median of 0.061. The hero's last rows land on 9.11-9.14 and #story opens on 9.09-9.13. v10 needed this fade because v10 had no join system; v11 does. */ .hero::after { content: none; } /* The v10 constellation is restored wholesale: the dormant sails that draw in and light on sky hover. home.css already carries its geometry (.constellation-wrap left 38%, .sky-zone left 40% at z-3 over content at z-2) and its .hero.lit transitions, so un-hiding them is the whole revert on the CSS side; the build/hover/draw-in logic is ported into v11.js because v11 does not load home.js. No bottom mask on the wrap, which is worth stating because it was added and then removed on evidence. The reasoning for adding it was that the wrap spans the hero top to bottom and carries its own background stars, so the field would be cut dead at the join the way .bg-sky's was. Measured at the row level, it is not: with and without the mask the junction delta is identical to three decimals (0.007-0.040 across four column bands, against an ambient row-to-row median of 0.061). 79 background stars spread over 893x900 do not move a row average, and the sail's own ink stops ~50px short of the edge. The mask also cost something real. The sail's lowest ink sits at 0.862 of the wrap height, leaving 13.8% to fade in, and --night-join's 90px floor overruns that on short viewports (900x700 left 7px of margin). Below 820px home.css lifts the wrap to bottom:46%, where it stops ~390px short of the junction and the mask only ate sail: -38px at 390, -42px at 430. An unnecessary fix with a real failure mode is worse than no fix. */ /* Hard seams. The markup no longer emits them, but kill the rules so nothing reintroduces a banded edge. */ .seam, .seam-sunset, .seam-sunrise, #problem .tone-flip { display: none; background: none; } /* home.css re-declares --gold-dk on #problem itself, and an id out-ranks the :root aliases above, so the v10 value survived inside that whole section. #C89A3A is a melt gradient stop, not a UI ink. #problem is cream, and gold on cream is bronze. */ #problem { --gold-dk: var(--aeolus-bronze); } /* Healthy status inside the connect mockup: the v10 mint is not in the palette. This one sits on night, so it takes the bright sage. */ .mock-status { color: var(--aeolus-sage); } /* The v10 card rim: a masked full-opacity white-to-gold hairline. Every element carrying it now also carries a glass recipe, whose border and inset rim are the brand's own edge; two rims on one card read as a double border, and the white stop is off the alpha ladder. */ .crispy-flare::before { content: none; } /* -------------------------------------------------------------------------- 3. SURFACE STACK PLUMBING backgrounds.css makes .bg-* an absolute layer at z-index 0. aeolus.css says `.aeolus-canvas-dark > * { z-index: 1 }`, which would lift the backdrop over itself, so pin it back down and lift the content wrappers above it. -------------------------------------------------------------------------- */ .section, .hero, .aeolus-canvas, .aeolus-canvas-dark { position: relative; overflow: hidden; } .aeolus-canvas > .bg-night, .aeolus-canvas > .bg-nightHero, .aeolus-canvas > .bg-nightCool, .aeolus-canvas > .bg-cream, .aeolus-canvas > .bg-gold, .aeolus-canvas-dark > .bg-night, .aeolus-canvas-dark > .bg-nightHero, .aeolus-canvas-dark > .bg-nightCool, .aeolus-canvas-dark > .bg-cream, .aeolus-canvas-dark > .bg-gold { z-index: 0; } .section-inner, .hero-content, .pr-inner, .faq-inner, .final-cta-inner { position: relative; z-index: 2; } /* Continuous night runs. An earlier pass here claimed two stacked night sections meet cleanly because the vignette is painted in night-950, the same ink as the base. The vignette does — the aurora does not. --aeolus-aurora-dark ends on `radial-gradient(64% 76% at 60% 98%, rgba(178,58,22,0.58) ...)`, a warm red glow pinned to the BOTTOM of whatever box paints it, and opens with a #1B4B6B blue at 12% 24%, pinned to the top. Every .bg-* box re-runs that gradient inside its own bounds, so a night section ends red and the night section under it restarts blue. The vignette only reaches 0.92 alpha at its rim, so ~8% of the red survives to the edge. That colour step is the divider line. No melt belongs at a dark→dark junction, so the fix is to stop each surface's decorative layers before they reach it: fade aurora, weave, vignette and noise out toward the join and both sections meet on the same flat --bg-base. .bg-sky is deliberately excluded — stars are discrete points and cut invisibly, and masking it would eat the hero sail. A section mid-run (#results) needs both edges, so the two joins are carried as separate custom properties and composed into one mask. Zeroed on the base rule so the untouched case degrades to a fully opaque mask. */ /* Length chosen by measurement, not by eye. Median-filtered row sampling across the hero→#story junction gives a step of <=1/255 at 220px, 140px and 90px alike — all three are seamless — but the shorter the fade, the less of the surface's atmosphere it eats: the left-to-right tone spread 62px above the junction reads 14 at 220px, 18 at 140px and 29 at 90px. So the shortest fade that still measures flat is the right one. This matches the melt's own overlap scale, which does a comparable job, so the two seam lengths are bound together rather than tuned apart. */ :root { --night-join: var(--melt-overlap); } /* Cream hosts are in the selector too. The system was written for the dark run, but the defect it exists to prevent is not a property of dark surfaces — it is a property of an aurora that terminates on a section edge. Measured at the #resources→#faq junction before this change, the row-to-row step reached 36.0 luma against an ambient of 0.057, the worst junction on the page, and turning .bg-aurora off alone flattened all four column bands to the noise floor. The layers are only ever masked where a --join-* is non-zero, so extending the selector is a no-op everywhere the adjacency rules below do not fire. */ main > :is(.hero, .aeolus-canvas-dark, .aeolus-canvas) > :is(.bg-night, .bg-nightHero, .bg-nightCool, .bg-cream) > :is(.bg-aurora, .bg-weave, .bg-vignette, .bg-noise) { --join-top: 0px; --join-bottom: 0px; /* .bg-aurora alone is inset -14%, so its box overhangs the surface by 14% of the surface height at each end — 14/128 = 10.9375% of its OWN height, which is what a percentage mask stop resolves against. Without this the fade finishes below the visible edge and ~60% of the red still reaches the join. The other three layers are inset:0 and keep the default of zero. */ --join-inset: 0%; -webkit-mask-image: linear-gradient(to bottom, transparent var(--join-inset), #000 calc(var(--join-inset) + var(--join-top)), #000 calc(100% - var(--join-inset) - var(--join-bottom)), transparent calc(100% - var(--join-inset))); mask-image: linear-gradient(to bottom, transparent var(--join-inset), #000 calc(var(--join-inset) + var(--join-top)), #000 calc(100% - var(--join-inset) - var(--join-bottom)), transparent calc(100% - var(--join-inset))); } main > :is(.hero, .aeolus-canvas-dark, .aeolus-canvas) > :is(.bg-night, .bg-nightHero, .bg-nightCool, .bg-cream) > .bg-aurora { --join-inset: 10.9375%; } main > :is(.hero, .aeolus-canvas-dark):has(+ .aeolus-canvas-dark) > :is(.bg-night, .bg-nightHero, .bg-nightCool) > :is(.bg-aurora, .bg-weave, .bg-vignette, .bg-noise) { --join-bottom: var(--night-join); } main > :is(.hero, .aeolus-canvas-dark) + .aeolus-canvas-dark > :is(.bg-night, .bg-nightHero, .bg-nightCool) > :is(.bg-aurora, .bg-weave, .bg-vignette, .bg-noise) { --join-top: var(--night-join); } /* The cream adjacencies are kept as their own pair rather than folded into the two rules above, because cream is not symmetrical with dark: only .bg-aurora and .bg-weave exist under .bg-cream, and only the aurora carries large-scale structure. The weave is a positionless repeating fill, so it is deliberately left out and runs straight through the join — the same call D1 made for the hero→#story texture, for the same reason. */ main > .aeolus-canvas:has(+ .aeolus-canvas) > .bg-cream > .bg-aurora { --join-bottom: var(--night-join); } main > .aeolus-canvas + .aeolus-canvas > .bg-cream > .bg-aurora { --join-top: var(--night-join); } /* HERO → #story: one continuous surface, not two joined ones. The join fade above already made the EDGE seamless — measured step across the boundary is 0.5 luma out of 255. The owner still saw a background change, because the change is regional, not a line. Profiling 380px either side at 1440 (8 columns, copy hidden): hero, y-38 : 10.5 13.0 15.1 17.5 19.4 19.0 17.0 15.1 bright centre hero, y-0 : 9.9 9.9 10.2 10.3 10.2 10.2 10.2 10.2 flat, = --bg-base story, y+5 : 11.2 10.8 10.7 10.6 10.9 11.1 11.9 12.0 story, y+62 : 23.4 20.5 18.8 13.1 16.7 27.7 28.1 29.6 bright EDGES The luminance distribution inverts: the hero is bright in the middle and dark at the rim, and 60px into #story it is dark in the middle and bright at the rim. That is --aeolus-aurora-dark restarting inside a new box — its blue is pinned to 12% 24% and its red to 60% 98%, so every surface re-runs the same sweep from the top. The fade can only hold the first ~100px; past it the aurora returns at full strength in a new arrangement, and the eye reads "different background" without ever seeing a line. So #story stops competing and simply continues. Its aurora and vignette are the only two layers with large-scale structure, and both are dropped; base, weave and noise carry no position, so what remains is flat --bg-base at luma 10.0 — which is exactly the value the hero's own bottom row already measures (9.9-10.3), because the hero vignette crushes to base there. The two sections meet at the same number and #story never leaves it. There is no transition to perceive because there is no second surface: the night just keeps going. Weave and noise are raised to the hero's own settings for the same reason — soft weave beside strong weave is a texture handoff, which is the same defect one layer down. This is the "same background" reading of the directive rather than the "mirror the edge" fallback; mirroring only fixes the line, and the line was never what was wrong. */ #story > .bg-night { --bg-weave: var(--aeolus-sailcloth-dark-strong); --bg-noise-opacity: 0.15; } #story > .bg-night > .bg-aurora, #story > .bg-night > .bg-vignette { display: none; } /* With the structured layers gone, the weave and the noise should no longer be faded across this particular join — they should run straight through it. The join fade exists to stop two DIFFERENT arrangements meeting. Weave and noise have no arrangement: both are positionless repeating fills, identical on either side now that #story matches the hero's settings. Fading them out and back in gives a ~220px band where the texture thins to nothing and returns, which measured as a 0.83 luma sag through the junction — small, but it is the last thing there that changes. Carrying them across instead makes the texture itself continuous, which is stronger evidence of one surface than a matching luma is. Scoped to this pair on purpose. Aurora and vignette keep their fade on the hero side, and every other dark-to-dark join keeps the generic behaviour until the sections-5+ rhythm pass is agreed. Both halves are addressed by id. The generic join rule above scores (0,4,1) thanks to its `main >` and its four :is() groups, so a plain `.hero > .bg-nightHero > .bg-weave` at (0,3,0) silently loses to it — which is exactly what happened on the first attempt: #story went flat, the hero kept fading, and the junction gained a 1.0 luma step instead of losing one. */ #hero > .bg-nightHero > :is(.bg-weave, .bg-noise), #story > .bg-night > :is(.bg-weave, .bg-noise) { --join-top: 0px; --join-bottom: 0px; } /* The star layer now needs the bottom fade the others already had. The join rule above deliberately excludes .bg-sky, on the grounds that stars are discrete points and cut invisibly. That was true while #story had a star field of its own for them to continue into. It is not true now: measured at 1440, the hero's last 60px still carry 13-20 star points per 10k pixels and #story carries exactly 0, so the field stops dead on the boundary line — a density cliff in the one layer that was left unfaded. The exclusion's second reason — that masking .bg-sky would eat the hero sail — no longer applies at all. It was written when this layer drew the static v11 sail; the v10 hero revert moved the sail into .constellation-wrap and set this host to data-sky="stars", so there is nothing in here but the field. Masking it can only cost stars, which is the point. */ #hero > .bg-nightHero > .bg-sky { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--night-join)), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--night-join)), transparent 100%); } /* FIRST-CARRIER RULE — generalising hero→#story to the page's other two runs. The page is five runs, not nine sections: hero+#story, #problem, then #diagnostic+#results+#how, then #resources+#faq, then #cta. Within a run the OPENER carries the atmosphere and every continuation is flat, so a run reads as one surface that keeps going rather than as N surfaces that were joined well. No DOM is restructured to do this; it is the same drop-and-continue the owner already approved at hero→#story. Worth being precise about what this does and does not fix, because the two runs were in very different states. The dark run's junctions were already edge-clean. Measured row-to-row before this change: #diagnostic→#results 0.000 in all four column bands, #results→#how 0.000-0.213, against an ambient row-to-row median of 0.17-0.40. The generic join fade was doing its job. What it could not fix is the thing D1 diagnosed — both sides fading to flat --bg-base means the aurora dies and then RESTARTS in a new box, and the profile shows exactly that: both sections touch 9.94 at the boundary and climb away from it on either side. So this is not a seam fix. It trades a double ramp for a single one, and buys continuous texture across the whole run. The cream run had a real seam, and it was the worst junction on the page: #resources→#faq stepped 1.4 / 11.8 / 36.0 / 16.7 luma across the four column bands in one row, against an ambient of 0.057. Re-measured row-wise on purpose — the 16.68 figure this was first reported at came from a 60px band average, which is not an edge measurement, and it happened to understate the worst band by more than a factor of two. Isolating layers put all of it on .bg-aurora (with it off, every band sat flat at the 0.057 noise floor), and the cause is the same restart D1 found on the dark side, minus any fade to soften it: cream sections had no join system at all until the selector above was widened. #faq drops its aurora and #resources' aurora now fades out into the join, so the two meet on flat cream and the run never leaves it. */ #results > .bg-night, #how > .bg-night { --bg-weave: var(--aeolus-sailcloth-dark-strong); --bg-noise-opacity: 0.15; } #results > .bg-night > :is(.bg-aurora, .bg-vignette), #how > .bg-night > :is(.bg-aurora, .bg-vignette) { display: none; } #faq > .bg-cream > .bg-aurora { display: none; } /* Texture runs unfaded across the two INTERNAL joins of the dark run, for the reason given at hero→#story: weave and noise are positionless repeating fills, now identical on all three sections, so fading them out and back in is a texture handoff where there is no arrangement to hand off. The run's outer edges are untouched — #diagnostic's top and #how's bottom both meet melts, and the generic rule leaves those at zero already because their siblings are the melt divs, not dark sections. Addressed by id because the generic rule scores (0,4,1); a class-only selector loses to it silently, which is the exact failure D1 hit. */ #diagnostic > .bg-night > :is(.bg-weave, .bg-noise), #results > .bg-night > :is(.bg-weave, .bg-noise), #how > .bg-night > :is(.bg-weave, .bg-noise) { --join-top: 0px; --join-bottom: 0px; } /* -------------------------------------------------------------------------- 4. MELT SEAMS The melt overlaps ~100px into each neighbour, so the sections it joins must not clip it and must keep their content out of the overlap zone. -------------------------------------------------------------------------- */ /* Bound at :root so the clearance below does arithmetic on the same numbers melt.css reads. melt.css declares both as var(--melt-height, ) precisely so authors can bind them. --melt-height is an OWNER-ALIGNED DEVIATION from the DS default of clamp(340px, 44vh, 460px): at the DS height the flat ends read as ~112px of dead colour per end, which reads as empty page and no section padding can recover it. Shortening the component is the only lever that touches it. --melt-overlap is height/2 — an OWNER DEVIATION (2026-09-03) from the DS default of clamp(90px, 12vh, 120px), and it is load-bearing for the veil field below: at half the height, the two neighbouring section boxes meet edge-to-edge exactly at the melt's vertical midline, so there is no orphan strip where only the night body shows behind the melt. The veil dissolve can therefore reveal the REAL section background everywhere below the midline. Do not lower it: the seam the sections form at the midline is hidden by the veil being fully opaque until 49%, and both live only ~1% apart. */ :root { --melt-height: clamp(300px, 34vh, 380px); --melt-overlap: calc(var(--melt-height) / 2); } .melt { position: relative; z-index: 1; } /* Clearance is measurable, so measure it instead of padding by feel. .melt__composite is masked to alpha 0 at both ends and only reaches 1.0 at 22%; it first crosses ~0.12 (the point content stops being legible under it) at 5.87% of the melt's height. The melt's top edge sits one overlap above the junction, so the earliest unusable pixel in the section above is overlap - 0.0587 x height from its bottom. The mask is symmetric, so the section below needs the same. That is the whole requirement — an earlier pass used the full overlap plus another 4.5rem on top, which cleared the melt twice over and produced the empty cream Sam is seeing. Rounded to 0.06 for legibility; the extra ~2px lands in the safety margin. The breathing term is the actual gap between the last legible pixel and the copy, and is all that is left to taste. */ :root { --melt-clear: calc(var(--melt-overlap) - 0.06 * var(--melt-height)); } :root { --melt-breathe: clamp(1rem, 2vw, 2rem); } main > .melt + section, main > .melt + section#problem { padding-top: calc(var(--melt-clear) + var(--melt-breathe)); } main > section:has(+ .melt) { padding-bottom: calc(var(--melt-clear) + var(--melt-breathe)); } /* -------------------------------------------------------------------------- 5. TYPOGRAPHY Zodiak carries every headline; General Sans carries body and ALL numerals with tabular figures; IBMPlexMono is reserved for in-card data labels. -------------------------------------------------------------------------- */ body, input, button, select, textarea { font-family: var(--font-body); font-variant-numeric: tabular-nums; } h1, h2, h3, h4, .t-display-hero, .t-display-xl, .t-display-lg, .t-display-md { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--aeolus-ls-display); } /* Zodiak sits optically larger than Cormorant at the same size and its italic is far more assertive, so the hero ladder is retuned rather than inherited. */ .hero h1 { font-weight: 300; line-height: var(--aeolus-lh-hero); } .hero h1 span { font-weight: 300; line-height: 1.04; } .hero h1 em { font-weight: 500; line-height: 1.0; letter-spacing: -0.018em; text-shadow: none; } /* --- The scale ----------------------------------------------------------- BRAND-SPEC §3 gives a web scale (--aeolus-web-fs-*: hero 56 / xl 44 / lg 38 / h2-sm 28 / lede 20). Those are already the design system's own web translation, not slide px, so they are the desktop target — every step below lands on its token exactly at full width. The one deliberate departure is the hero. 56px is right for a slide, where the headline owns the whole frame; in a 724px glass card on a 1440px page it reads undersized against the 44px H2 one scroll below. The ceiling is 64px, which restores a decisive 1.45 top-of-scale step. Everything else is untouched deck values, so the departure is one number, not a drift. Clamps keep their fluid shape per CLAUDE.md — only ceilings are pinned. Floors are set so the hero still fits its measure at 390px. */ .t-display-hero { font-size: clamp(2.15rem, 5.2vw, 64px); line-height: var(--aeolus-lh-hero); } .t-display-xl { font-size: clamp(1.95rem, 3.9vw, var(--aeolus-web-fs-display-xl)); } .t-display-lg { font-size: clamp(1.65rem, 2.9vw, var(--aeolus-web-fs-display-lg)); } .t-display-md { font-size: clamp(1.3rem, 2.1vw, var(--aeolus-web-fs-h2-sm)); } .t-display-xl, .t-display-lg, .t-display-md { line-height: var(--aeolus-lh-display); } .t-display-hero, .t-display-xl, .t-display-lg, .t-display-md { letter-spacing: var(--aeolus-ls-display); } .t-lede { font-size: clamp(1rem, 1.25vw, var(--aeolus-web-fs-lede)); line-height: var(--aeolus-lh-lede); font-weight: 400; } /* Hero lede. The ceiling was already the deck's 20px lede token, but the 1.15vw middle term meant it only reached 20px past 1740px — at 1440 it rendered 16.6px. 1.45vw lands it on 20px at 1440 and holds the token as the cap. */ .hero-sub { font-size: clamp(1rem, 1.45vw, var(--aeolus-web-fs-lede)); line-height: var(--aeolus-lh-lede); color: rgba(255, 255, 255, 0.72); } /* --- Headline grammar (mandate §0-2) ------------------------------------- "Headlines are exactly two lines, one color. Emphasis is weight only: the second line is slightly bolder. No two-tone headers." BRAND-SPEC §3.1 also notes Zodiak has no italic face, so the browser would be synthesising a slant that the brand never uses. The v10 markup paints its second lines gold and italic through inline style attributes and the .em-gold classes, so these declarations have to out-weigh an inline style. That is what !important is for here — it is beating the old DOM, not another rule of mine. */ /* Stated structurally rather than as a list of ids: ANY emphasis inside ANY heading, plus the two v10 gold-ink classes. An earlier id-by-id version missed `#problem .esc-head em` (home.css:316), which is exactly the failure mode a list invites. */ :is(h1, h2, h3, h4) :is(em, span, i, b, strong), .story-tagline, .em-gold, .em-gold-bright { color: inherit !important; font-style: normal !important; text-shadow: none; } /* The signature two-line headline, named in BRAND-SPEC §3.1 with this page's own hero as the example: same size on both lines, 500 over 700. RESCALED for the v10 hero revert. The 76px ceiling belonged to concept 1a, whose unboxed copy ran across a 1240px grid — there, scale WAS the structure. v10 puts the copy back in a 640px column (home.css .hero-copy), and 76px cannot fit "We rebuild revenue" in 640px, so the old value would wrap the headline to three or four lines and break the two-line mandate outright. The target is v10's own footprint, which the owner called correct, expressed as ONE size because the mandate forbids the two-size treatment v10 used (span clamp(34,4.6vw,60) under em clamp(40,5.9vw,82)). The middle term 4.6vw is v10's own; the ceiling sits between v10's two, nearer the larger line since that is the one that set the hero's presence. Fit is the binding constraint, not taste. Measured for Zodiak 500, "We rebuild revenue" needs 9.474 x font-size px; weight 700 on line two is wider per character but the string is shorter, so line one governs. 640px column / 9.474 = 67.5px, so the ceiling is set below it with slack rather than on the line — 1a was nearly lost to sitting exactly on a budget edge. Verified by measurement at 1920/1440/1280/1024, not by the arithmetic alone. */ .hero h1 span, .hero h1 em { display: block; font-size: clamp(2.15rem, 4.6vw, 64px) !important; line-height: var(--aeolus-lh-hero); letter-spacing: var(--aeolus-ls-display); } .hero h1 span { font-weight: 500 !important; } .hero h1 em { font-weight: 700 !important; } /* Mobile step, at the same 820px breakpoint v10 switches its own hero at. A single clamp cannot cover both ends. Below ~750px the 4.6vw middle term falls under the floor, so the floor alone governs — and a constant floor cannot track a viewport that keeps narrowing. Measured at the 2.15rem floor: 390px left 16.2px of slack, and 360px went to -13.8px, i.e. the headline wrapped to three lines and broke the two-line mandate on a common phone. So the mobile term is derived from the fit rule rather than picked. The column here is the viewport minus var(--pad) twice, and --pad is pinned to its 1.5rem floor at these widths, giving avail = W - 48. With the same 9.474 ratio the ceiling is (W - 48) / 9.474 = 10.56vw - 5.07px, so the value is set just under it at 10vw - 5px, which clears at 320, 360, 390 and 430 rather than at the one width it was checked on. 40px cap keeps it from crossing back over the desktop curve at the breakpoint. */ @media (max-width: 820px) { .hero h1 span, .hero h1 em { font-size: clamp(27px, calc(10vw - 5px), 40px) !important; } } /* Mid-page headings: 400 on night, 300 on cream (light surfaces take the lighter serif), with the emphasis line one step up at 500. */ #story-title, #diagnostic-title, #results-title, #how-title, #cta-title { font-weight: 400 !important; } #problem-title, #resources-title, #faq-title, .esc-head { font-weight: 300 !important; } #story-title em, #problem-title span:last-child, #diagnostic-title em, #results-title em, #how-title em, #cta-title em, #resources-title em, #faq-title em, .esc-head em { font-weight: 500 !important; } /* #problem's heading carries its whole scale inline; bring it onto the deck's H2 step so it stops out-ranking the hero. */ #problem-title { font-size: clamp(1.95rem, 3.9vw, var(--aeolus-web-fs-display-xl)) !important; line-height: var(--aeolus-lh-display) !important; letter-spacing: var(--aeolus-ls-display) !important; } /* Mandate §0-2: headlines are exactly two lines. These two were single-line sentences, so each is split at its phrase boundary into a block span + block em. The em keeps a leading space so the heading's text content stays byte-identical to v10; it collapses at the start of a block line. */ #resources-title span, #resources-title em, #faq-title span, #faq-title em { display: block; } #story-title { font-size: clamp(1.95rem, 3.9vw, var(--aeolus-web-fs-display-xl)) !important; line-height: var(--aeolus-lh-display) !important; letter-spacing: var(--aeolus-ls-display) !important; } /* --- No bold emphasis inside paragraphs (mandate §0-3) ------------------- Again competing with inline font-weight, hence !important. */ p b, p strong, .t-lede b, .t-lede strong, .dtl-lede b, .dtl-lede strong, .faq-a-inner b, .faq-a-inner strong { font-weight: inherit !important; color: inherit !important; } /* Brand copy that carries a pinned size in a style attribute. Matched on the attribute itself rather than by position, so the selector says exactly which pin it replaces and no markup changes. Each keeps its v10 value as the clamp ceiling, so desktop is unchanged and only small screens gain scaling. The ~37 remaining pins are all <=11px product-UI mockup micro-labels; those stay fixed on purpose and are listed as exemptions in V11_NOTES. */ #story p[style*="350 16px"] { font-size: clamp(15px, 1.15vw, var(--aeolus-web-fs-body)) !important; } #story div[style*="600 17px"] { font-size: clamp(15px, 1.3vw, 17px) !important; } #story a[data-booking] span[style*="15px"] { font-size: clamp(13px, 1.1vw, 15px) !important; } #story span[style*="400 13px"] { font-size: clamp(11px, 0.9vw, var(--aeolus-web-fs-label)) !important; } /* The four problem-card headlines: display face at a pinned 1.3rem. */ #problem p[style*="font-size:1.3rem"] { font-size: clamp(1.05rem, 1.7vw, 1.3rem) !important; } /* Fixed 14px narrative type, which the mandate does not exempt. home.css:329 sets this with the `font:` shorthand, so the 14px and the 1.5 line-height arrive together and only font-size needs replacing. It was already clamped below 900px by the block underneath, so the pinned value was only ever rendering on desktop — which is the range where a fixed size is least defensible. The term is fitted to meet that block rather than guessed: 0.28vw + 10px resolves to 12.52px at 900 and 14.03px at 1440, so it hands over to the mobile clamp's 12.5px ceiling at exactly the breakpoint and reaches the deck's 14px at the design width. No step at the boundary in either direction. */ #problem .esc-stat p { font-size: clamp(12.5px, calc(0.28vw + 10px), 14px) !important; } /* owner 2026-08-26 (applied by Argus): the AI-escalation copy was hard to read on the cream + aurora wash — lede and stat captions step up one rung of the on-light ladder (0.66 → 0.78) and the lede sheds its 350 weight; the mono source line rises from label (0.48) to body (0.66) and gains half a point. */ #problem .esc-sub { color: var(--aeolus-text-on-light-body-strong); font-weight: 400; } #problem .esc-stat p { color: var(--aeolus-text-on-light-body-strong); } #problem .esc-src { color: var(--aeolus-text-on-light-body); font-size: 10px; } /* home.css pins these again inside its mobile block, which is the range the clamps exist to serve. It follows this rule in source order, so below 900px it still wins at equal specificity — which is the intended handover. */ @media (max-width: 900px) { #problem .esc-head { font-size: clamp(1.45rem, 5.2vw, 1.72rem) !important; } #problem .esc-sub { font-size: clamp(0.88rem, 3vw, 0.95rem) !important; } #problem .esc-stat p { font-size: clamp(11px, 3.2vw, 12.5px) !important; } .dtl-step { font-size: clamp(0.68rem, 2.4vw, 0.78rem) !important; } .dtl-title { font-size: clamp(1.15rem, 4.4vw, 1.42rem) !important; } .dtl-desc { font-size: clamp(0.85rem, 3vw, 0.92rem) !important; } .dtl-close { font-size: clamp(1.15rem, 4.3vw, 1.4rem) !important; } } /* Data labels: mono, uppercase, letter-spaced. Per mandate §0-1 these survive only as data captions inside cards — every label that sat above a headline has been removed from the markup. */ .label, .footer-col-label, .mock-label, .eng-when, .dtl-step { font-family: var(--font-mono); font-weight: 400; letter-spacing: var(--aeolus-ls-label); text-transform: uppercase; } /* Stage timing, demoted into the card (owner ruling on mandate §0-1). In v10 this span was a sibling of .eng-card, absolutely positioned at `top:0; left:22px` (home.css:487) — sitting ON the timeline rail (.eng-stage::after, same left, top 9px) with a background knockout to break the rail behind its text. By function that is an axis tick label. By position it is four gold mono uppercase labels stacked directly above four headings, which is the exact shape §0-1 removes, and it is not inside a product-UI mockup, so the exemption does not reach it. Demoted rather than deleted: the timing is real data. The span now closes its own .eng-card as a caption row, so no label sits above a headline anywhere on the page, and the copy is untouched. The rail runs unbroken now that nothing is knocked into it, which is what a timeline axis should do — hence no knockout background here. margin-top:auto pins the caption to the card floor so the four rows align regardless of body-copy length. */ .eng-when { position: static; margin-top: auto; padding: 14px 0 0; background: none; } /* The deck's 13px mono, held fluid rather than pinned. Deliberately NOT applied to .mock-label / .eng-when / .dtl-step — those sit inside product-UI mockups where their smaller size is load-bearing. */ .label, .footer-col-label { font-size: clamp(11px, 0.9vw, var(--aeolus-web-fs-label)); } /* Numerals are General Sans everywhere, including inside serif headings. */ .stat-num, .pct, .v, [data-count] { font-family: var(--font-body); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 6. GLASS ON THE REMAINING v10 CARD CLASSES Cards that map 1:1 to a recipe got their class in the markup. These are the ones where the recipe depends on position (the "after" stage) or where the v10 class is already unique enough to bind by selector. -------------------------------------------------------------------------- */ .layer-card, .layer-card-dark, .layer-well, .layer-well-dark, .layer-panel-dark, .glass-card, .ins-card, .eng-card, .faq-list { border-radius: var(--aeolus-radius-card); } /* NESTED SURFACES INSIDE A GLASS PANEL — the story ledger and the logo well. Both carried glass-darkSubtle inside the glass-dark panel and both read as flat grey slabs. The cause is measured, not taste: Chrome applies the parent's backdrop-filter a second time when a backdrop-filtered child sits inside it. Night 6,9,16 -> panel's 10% white -> 31,34,40 -> that wash applied again -> 53,56,62 -> the child's own 8% -> 69,72,79, which is what the screenshot sampled on all three channels. A single correct wash lands at 48,52,60. So the nesting was charging a ~17% neutral white wash for an 8% recipe, and a neutral wash over a near-black field is the definition of grey: the sampled chroma fell from the panel's 13 to 9. The design system already answers this — tokens.css calls the nested tile "no backdrop-filter, hairline inset ring". It suits #story doubly well because this section's aurora is display:none (see the hero handoff block above), so the panel's backdrop is a flat field: blur has nothing to refract and only costs hue. Definition here has to come from edge and tint, which is exactly what the tile recipe is. .glass-tile declares no backdrop-filter, so it cannot override the one .layer-card-dark sets in aeolus.css. Turning it off by name is load-bearing; without it the double wash survives the class swap and nothing changes. */ #story .story-ledger, #story .story-well { backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--aeolus-glass-subtle-border); border-radius: var(--aeolus-radius-tile); } /* Card interiors. Most cards on this page get their padding from an inline style, and the v10 .layer-* primitives carry none of their own. These three were bare layout wrappers in v10 — no visible edge, so no padding — and as glass cards their text would otherwise run flush to the rim. max-width is widened by the same amount so the text measure is unchanged (box-sizing is border-box site-wide). */ /* HERO — concept 1a, unboxed and type-led (owner pick). The glass card is gone, not restyled. glass.css builds every recipe out of four custom properties and nothing else, so resetting those four is a complete un-box: no fill, no rim, no blur, no shadow, and no ::before to chase. The class stays on the element (nothing is deleted from the markup) but it now paints nothing, and the padding that only existed to hold text off a rim goes with it. Readability comes from the nightHero vignette. v10 also had .hero-scrim behind this copy; it is held off above until contrast says it is needed. The card is gone but the COLUMN is v10's. home.css already sets .hero-copy to 640px and .hero-content to v10's off-centre geometry, so the revert is simply to stop overriding them — the only thing left here is the un-box, which v10 agrees with anyway (its .hero-copy never had a card). */ .hero-copy.glass-heroDark { --glass-bg: transparent; --glass-border: 1px solid transparent; --glass-blur: none; --glass-shadow: none; padding: 0; } .final-cta-inner { padding: clamp(30px, 3.6vw, 52px) clamp(26px, 3vw, 44px); max-width: 804px; } .faq-list { padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 28px); } /* Engagement stages: subtle deck cards, with the final "Handoff" stage carrying the gold tint as the after-state. */ .eng-card { background: var(--aeolus-glass-subtle-bg); backdrop-filter: var(--aeolus-glass-subtle-blur); -webkit-backdrop-filter: var(--aeolus-glass-subtle-blur); border: 1px solid var(--aeolus-glass-subtle-border); box-shadow: var(--aeolus-glass-subtle-shadow); } /* The stage body copy, also pinned at 14px by a home.css shorthand (line 491) and with no mobile block behind it at all, so unlike .esc-stat p this one was fixed at every width. Same term, so the two narrative sizes on the page track each other instead of drifting apart. */ .eng-what { font-size: clamp(12.5px, calc(0.28vw + 10px), 14px); } /* The final stage takes the WHOLE goldTint recipe, not just its two colours. This previously swapped only background and border-color and left the subtle blur and shadow underneath, which is the "recipes travel together" rule broken: glass.css:55-60 defines goldTint as goldtint-bg + goldtint-border + dark-blur + dark-shadow, and a card wearing two of the four is not a documented surface. In this pair the blur tokens happen to be identical (blur(18px) saturate(1.25) both), so the only property that actually rendered wrong was the shadow — subtle is 0 26px 58px rgba(0,0,0,.38) + inset .24 against goldTint's 0 36px 70px rgba(0,0,0,.42) + inset .28, so the after-state card sat lower and lit flatter than the deck specifies. All four are restated anyway: the blur being coincidentally equal today is not a reason to leave the recipe half-applied tomorrow. */ .eng-stage:last-child .eng-card { background: var(--aeolus-glass-goldtint-bg); backdrop-filter: var(--aeolus-glass-dark-blur); -webkit-backdrop-filter: var(--aeolus-glass-dark-blur); border: 1px solid var(--aeolus-glass-goldtint-border); box-shadow: var(--aeolus-glass-dark-shadow); } /* Diagnostic timeline: the product-UI preview shell. The glass belongs on .dtl-scaler, not .dtl-card. home.css:390 makes .dtl-card a bare `width: 100%` layout wrapper spanning a whole grid column with `padding-right: var(--conn)` (up to 52px), and home.css:391 makes .dtl-scaler the thing with an actual edge — max-width 540px, aspect-ratio 600/560, overflow hidden, hairline, shadow. An earlier pass here glassed .dtl-card, which painted a ~700px lit slab across the full column behind a 540px mockup and offset from it by the connector padding. That extra rectangle, hanging out past the mockup's rim on the side the row is NOT on, is the card Sam saw floating half outside its frame. So the scaler takes the deck's dark-glass edge in place of v10's ad-hoc gold hairline and triple drop shadow, and .dtl-card goes back to being invisible. No backdrop blur: the iframe covers the box opaquely, so it would cost a compositing layer per card and render nothing. */ .dtl-scaler { border-radius: var(--aeolus-radius-panel); border: 1px solid var(--aeolus-glass-dark-border); box-shadow: var(--aeolus-glass-dark-shadow); } .mobile-preview { border-radius: var(--aeolus-radius-panel); overflow: hidden; } /* Nested tiles: no second blur, just the deck's inset hairline ring. */ .glass-tile-light, .layer-well { border-radius: var(--aeolus-radius-tile); background: var(--aeolus-tile-bg); box-shadow: var(--aeolus-tile-ring); border: none; } /* Problem-section chrome. */ .fd-drop, .esc-row { border-radius: var(--aeolus-radius-tile); background: var(--aeolus-tile-bg); box-shadow: var(--aeolus-tile-ring); } /* -------------------------------------------------------------------------- 7. MICRO-COMPONENTS -------------------------------------------------------------------------- */ /* CTA slab — SOLID gold chip, dark ink, one small radius. OWNER DEVIATION from BRAND-SPEC:337-338, which specifies a translucent slab (fill rgba(243,208,106, 0.12), gold ring, #F3D06A text, radius 10px). That is what this block used to be, and it is exactly what the owner rejected: on cream its gold label measures 1.28:1 against --aeolus-cream, i.e. legally invisible, and even on night the 12%-alpha fill reads as an outline rather than a button. The solid form is ADAPTED from the DS, not invented. glass.css's .glass-ctaGold could not be used as-is — it is rgba(255,255,255,0.12) + blur(30px), a translucent glass CARD recipe, so it delivers less fill than what it replaces. The documented pairing is elsewhere: BRAND-SPEC:112 calls gold-400 a "gold surface", BRAND-SPEC:121 calls ink-gold "ink on gold", and glass.css carries an onGold recipe for "cards on gold surface". ink-gold on gold-400 measures 12.39:1. --v11-cta-radius is declared here rather than in tokens.css because that file is Polaris's. 5px is the midpoint of the owner's 4-6px range and matches --aeolus-radius-rule, so the page gains no new geometry. It is the ONLY radius any CTA takes, primary or secondary, on every surface. */ :root { --v11-cta-radius: 5px; } .btn-gold, .hero-primary, .nav-cta, #story a[data-booking] { border-radius: var(--v11-cta-radius); padding: 12px 26px; background: var(--aeolus-gold-400); border: none; box-shadow: none; color: var(--aeolus-ink-gold); font-family: var(--font-body); font-weight: 600; font-size: clamp(13px, 1vw, 14px); } /* The lift strengthens what the chip IS: a gold surface, so it brightens to the next gold up rather than gaining a ring. --aeolus-gold-hover (#FFE9A8) is documented as a link hover ink; used as a surface here it only widens the ink contrast (12.39:1 -> 14.6:1), so nothing regresses. */ .btn-gold:hover, .hero-primary:hover, .nav-cta:hover, #story a[data-booking]:hover { background: var(--aeolus-gold-hover); color: var(--aeolus-ink-gold); box-shadow: 0 8px 24px var(--aeolus-gold-glow); transform: translateY(-1px); /* aeolus.css:399 adds filter: brightness(1.06) to .btn-gold:hover. It ties this rule on specificity and only loses on source order, so it survives on any property this block does not restate. Left alive it would brighten a surface that is already stepping up its own gold, i.e. two lift mechanisms stacked. Reset so the hover is exactly the one property change described above. */ filter: none; } /* .mobile-menu a (aeolus.css:700) is (0,1,1) and .mobile-menu .nav-cta (:706) is (0,2,0), so both out-rank the .nav-cta in the group above. The menu's chip was coming out with --tx ink at weight 500 and 0.9rem while the desktop chip took ink-gold at 600 — same component, two finishes. Scoped here to match. */ #mobile-menu.mobile-menu .nav-cta { color: var(--aeolus-ink-gold); font-weight: 600; font-size: clamp(13px, 1vw, 14px); } /* A solid gold chip is unmissable on night (13.23:1) and on nightCool (12.90:1), but on cream the chip's own edge is what disappears: gold-400 against --aeolus-cream is 1.28:1, the same 1.28:1 that made the old label unreadable. The label is fine — it is dark ink now — so only the boundary needs help. It gets a gold-600 ring (1.88:1 against the fill, enough to draw the shape without becoming a second colour) and the DS's warm-tinted light shadow. Never a black shadow on cream. */ #resources .btn-gold { box-shadow: inset 0 0 0 1px var(--aeolus-gold-600), var(--aeolus-glass-gold-shadow); } #resources .btn-gold:hover { box-shadow: inset 0 0 0 1px var(--aeolus-gold-600), var(--aeolus-glass-light-shadow); } /* The story section's booking link carries its whole v10 look in a style attribute (solid gold, #241d0c ink, 11px radius), which no stylesheet can reach. Matched by attribute so the markup itself stays untouched. Its v10 fill was already solid gold, so only the radius and the ink token change here. */ #story a[data-booking] { background: var(--aeolus-gold-400) !important; color: var(--aeolus-ink-gold) !important; border-radius: var(--v11-cta-radius) !important; padding: 12px 26px !important; font: 600 clamp(13px, 1vw, 14px) var(--font-body) !important; box-shadow: none !important; } #story a[data-booking]:hover { background: var(--aeolus-gold-hover) !important; color: var(--aeolus-ink-gold) !important; box-shadow: 0 8px 24px var(--aeolus-gold-glow) !important; } /* Pills. */ .chip { border-radius: var(--aeolus-radius-pill); font-family: var(--font-mono); font-weight: 400; letter-spacing: var(--aeolus-ls-micro); } /* "Acquired" chip — OWNER OVERRIDE of the Pill.tsx recipe. Directive: story-section-polish-brief.png, item 5, relayed 2026-08-25. The owner ruled the bronze pill both too quiet and the wrong shape, and asked for the CTAs' hard-edge box language and much more prominence. That reverses my own earlier ruling, which had put spec fidelity first and left on-dark softness to him. This IS that review, so the override stands and the bronze note it replaced is retired rather than argued with. Shape joins --v11-cta-radius, the page's one CTA shape rule, instead of the pill family. Colour goes back to gold and past where v10 had it: the fill and border are the design system's goldTint pair, which is 1.75x v10's border alpha, and the label is gold-bright at 9.1:1 on the tile beneath it. Kept as tinted glass rather than a solid gold fill on purpose - there are four of these in one well, and a solid fill would make them read as four buttons competing with the section's actual CTA. */ .acq-badge { border-radius: var(--v11-cta-radius); background: var(--aeolus-glass-goldtint-bg); border: 1px solid var(--aeolus-glass-goldtint-border); color: var(--gold-bright); height: 24px; padding: 0 10px; font: 600 10px var(--font-mono); letter-spacing: var(--aeolus-ls-micro); } /* home.css:303 hardcodes #B5432F on 28 rendered chips, and the id-scoped selector out-ranks anything unscoped. Same maroon the inline styles took. */ #problem .fd-chips .bad { background: rgba(122, 43, 43, 0.08); border-color: rgba(122, 43, 43, 0.35); color: var(--aeolus-cat-maroon); } /* Secondary CTA — a ghost slab, NOT a pill. Its class name is the only reason it was grouped with .acq-badge/.chip, and that was wrong: it is the hero's secondary button, sitting beside .hero-primary, and BRAND-SPEC:336 gives buttons exactly one geometry ("radius 10px, not a pill", padding 12px 26px). A 999px pill next to a 10px slab is two shape languages in one action row. So it inherits the slab's radius, padding, type and hover lift, and differs only in surface: no gold fill, a plain hairline ring, body ink. The descendant form matches home.css:200's specificity, which would otherwise keep its own padding. It now takes --v11-cta-radius, the same 5px as the primary: the owner's shape rule is one radius for EVERY CTA, and this button sits directly beside the primary in the hero action row, so any difference would read as a mistake. Quieter than the primary, but no longer a pale ghost: the ring starts at hairline-on-dark-STRONG (0.16) rather than 0.12, and the label starts at full --aeolus-text-on-dark instead of the dimmer body ink. That is the rest state the hover used to introduce. */ .glass-pill-dark, .hero-actions .glass-pill-dark { border-radius: var(--v11-cta-radius); padding: 12px 26px; background: var(--aeolus-glass-subtle-bg); border: none; box-shadow: inset 0 0 0 1px var(--aeolus-hairline-on-dark-strong); color: var(--aeolus-text-on-dark); font-family: var(--font-body); font-weight: 500; font-size: clamp(13px, 1vw, 14px); letter-spacing: normal; text-transform: none; } /* aeolus.css:386 tints this gold on hover, which would make the secondary compete with the primary chip. Held to its own surface: since the rest state took the old hover's ring, the lift is now carried by the fill stepping up one rung of its own glass family (subtle -> dark) plus the translate. No gold, no ring colour change. */ .glass-pill-dark:hover { background: var(--aeolus-glass-dark-bg); border: none; box-shadow: inset 0 0 0 1px var(--aeolus-hairline-on-dark-strong); color: var(--aeolus-text-on-dark); transform: translateY(-1px); } /* Glow rule — the brand's divider is a blurred bar, never a 1px line. */ .rule-gold { background: var(--aeolus-glowrule-gold); filter: blur(3px); border: none; height: 7px; border-radius: var(--aeolus-radius-rule); } /* v10 HOVER RESIDUE on the seven light cards. Both card groups wear .glass-lightCard, but neither was getting its own hover state, because two older cascades out-specify the recipe and were still driving the interaction: home.css:285 #problem article.layer-card:hover (1,2,1) aeolus.css:434 .layer-card.interactive:hover (0,3,0) Both paint a v10 gold ring — rgba(197,145,42,.45) border on the four problem cards, a 0 0 0 1px rgba(197,145,42,.18) ring on the three resource cards — plus v10's --elev-3. That is the retired navy/gold system reaching through into v11 surfaces: gold arrives on hover as a RING around a neutral white card, which is not a treatment this brand has, and --elev-3 is not one of the glass shadows. Worth stating plainly for the record: glass.css defines no hover state for any recipe, so there was no canonical hover to copy. This is derived inside the system rather than found in it — the card holds its own recipe and moves one step up its OWN light shadow family (light-card-shadow 0 28px 60px rgba(26,25,22,.12) -> light-shadow 0 34px 70px rgba(26,25,22,.14)), with the same restrained lift the buttons use. Border is restated to the recipe's own value specifically to cancel the gold, not because it changes. That keeps the rule the buttons already follow at line 953: an element lifts by strengthening what it already is, and gold stays an ink, not a ring. If the owner wants an explicit card-hover recipe in the design system, that is a Polaris/glass.css addition and this override should then defer to it. */ #problem article.layer-card.glass-lightCard:hover, #resources a.ins-card.glass-lightCard:hover { transform: translateY(-2px); border-color: var(--aeolus-glass-light-card-border); box-shadow: var(--aeolus-glass-light-shadow); } /* Logos sit muted on dark and lift on hover. */ .client-logo { filter: var(--aeolus-logo-mute-dark); opacity: 0.85; } .client-logo:hover { opacity: 1; } /* -------------------------------------------------------------------------- 8. NAV + FOOTER -------------------------------------------------------------------------- */ .site-nav { background: var(--aeolus-glass-dark-bg); backdrop-filter: var(--aeolus-glass-dark-blur); -webkit-backdrop-filter: var(--aeolus-glass-dark-blur); border: 1px solid var(--aeolus-hairline-on-dark); /* owner 2026-08-25: dock matches the site's sharp-corner language — panel radius (14px), not a pill. */ border-radius: var(--aeolus-radius-panel); } /* The desktop link row's border-inline reads --nav-sep, which aeolus.css:657 sets on .nav-dark (0,0,2,0) — so the retint has to match that specificity or the v10 white stays. Only visible above 920px, where the links render. */ .site-nav.nav-dark { --nav-sep: var(--aeolus-hairline-on-dark); } /* Owner ruling 2026-08-25 (applied by Argus): the nav CTA fills the capsule's right end — flush with the dock, not a floating chip. It stretches to the capsule's inner height and pulls into the dock's own padding (7px block, clamp(8px,1vw,10px) right) leaving a deliberate 2-4px gap; the right corners take the capsule's pill curvature while the left keep the sharp CTA radius. Media-gated to the desktop dock, and it MUST stay gated. aeolus.css hides this chip under 920px (@media max-width:920px { .site-nav .nav-cta { display:none } }) so the burger is the only mobile control — but that rule is (0,2,0), exactly tying the selector below, which loads later and therefore wins on `display`. Ungated, the inline-flex here resurrected the chip at 390px next to the burger (two nav controls, and the flush-right fit breaks because the burger takes the corner). The geometry is only meaningful where the link row renders, so scoping it to min-width:921px restores aeolus.css's hide without touching Polaris's files. */ @media (min-width: 921px) { .site-nav .nav-cta { align-self: stretch; display: inline-flex; align-items: center; margin-block: -2px; margin-right: calc(-1 * clamp(8px, 1vw, 10px) + 5px); /* owner 2026-08-25: chip starts 5px after the separator line — pull across the nav's own flex gap so the left gap matches every other side */ margin-left: calc(-1 * clamp(0.9rem, 1.5vw, 1.4rem) + 5px); /* right corners nest against the 14px dock corner at the 5px gap (14-5=9); left corners keep the site CTA radius */ border-radius: var(--v11-cta-radius) 9px 9px var(--v11-cta-radius); padding: 0 28px 0 24px; font-size: 15px; } /* owner 2026-08-25: larger dock, per the reference mock — taller capsule, bigger link type, bigger logo. Desktop only; mobile keeps its compact size. */ .site-nav { padding-block: 13px; } .site-nav .nav-links { padding-block: 6px; gap: clamp(1.3rem, 2vw, 2rem); } .site-nav .nav-links a { font-size: 0.98rem; } /* logo scales up to fill the taller dock without bleeding: 26px → 40px, margin-block -4px eats its own 4px padding so the dock height is unchanged */ .site-nav .nav-logo { padding: 0; margin-block: -4px; } .site-nav .nav-logo img { height: 40px; } } /* owner 2026-08-25 (applied by Argus): the footer BLEEDS out of #cta — it rides a flat nightCool continuation backdrop (markup: .footer-cont inside