/* ══════════════════════════════════════════════════════════════════════════ final/css/hero.css — LANE A. THE HOME HERO: flat navy, the enlarged brand mark behind the copy, and four vials that are actually solid and actually sharp. OWNER, 2026-08-22: "the hero on the home page — I want the entire animation gone and just the navy background. On top of that navy background, I want the Core Chain Labs logo … to be on the navy background enlarged. Then let's make those peptides in the hero not opaque, not blurry. They need to be good quality and a hundred percent solid." WHY THE OVERRIDES LIVE HERE AND NOT IN sf-refresh.css. Everything below defeats a rule in sf-refresh.css, which apply-refresh.mjs owns; a lane may not edit another owner's file outside its own region (final/lib.mjs). This sheet is copied to the built site as sf-final-hero.css and linked LAST in — after theme.css, sf-base.css, sf-refresh.css AND tailwind — so it wins on equal specificity. The one edit this lane DID make to sf-refresh.css is a deletion of dead paint (five keyframe families for a figure that has been display:none since 2026-08-19); nothing there was overridden in place. SPECIFICITY IS DELIBERATE, NOT DEFENSIVE. sf-refresh.css owns the hero ground at `body.opt-hero-bg-gradient .sf-hero, body .sf-hero` — 0,2,1, and its own comment warns that a plain `body .sf-hero` further down the cascade paints nothing at all. Every ground rule here is written on `body #hero.sf-hero` (1,2,1) so it cannot lose that fight by accident, and the far-pair vial rule is repeated at the same 0,2,1 selector sf-refresh uses, because the generic `body .cc-hero-vials img` is 0,1,2 and would still lose to it. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. THE GROUND: FLAT, AND FLAT MEANS NO GRADIENT ────────────────────── sf-refresh.css stacked three radial washes over a three-stop linear ramp. "Just the navy background" is one colour. #030A18 is the cc-net--navy ground-3 literal — i.e. the deepest of the three navies the owner has been looking at all week, so nothing about the band's temperature changes, only its evenness. MEASURED on this ground: headline --sf-text #F0F6FA = 18.17:1, subline --cc-metal-300 #A6BACB = 9.91:1, .sf-hero-stats b #57D6E4 = 11.45:1. Removing the mesh only ever moved these UP: the twinkling nodes were the brightest thing composited under the copy. THE SCRIM GOES TO ZERO IN THE SAME RULE. body .sf-hero::before is a radial + linear black wash driven entirely by --cc-hero-scrim; at 0 every stop is rgb(4 10 20 / 0), so the pseudo-element still generates and paints nothing. It existed to settle the copy over a moving mesh. There is no mesh, and a centred dark wash over a flat ground is a gradient by another name — exactly what the owner asked to be rid of. It is also the ONLY thing that was muting the mark and the vials, and it can only ever darken, so zeroing it is the worst case for contrast and every number quoted here is measured at zero. */ /* ── 1b. THE GROUND IS A GRADIENT AGAIN — OWNER, 2026-08-22 ─────────────── "add a subtle glow to it and then a gradient to the blue background for the section." This deliberately reverses the flat ground above, which was the right reading of "just the navy background" at the time and is now superseded. The comment above is kept rather than rewritten because the SCRIM reasoning still holds and is still why this rule can be solved at all. WHAT THE GRADIENT IS. An ellipse centred slightly above the middle, behind the mark: a blue lift at the core falling to the near-black the flat ground used. So the brightest ground pixel is the one directly under the headline and the mark — which is the worst case, and therefore the one every number below is solved against. A gradient whose bright end sat under nothing would look like more and measure like less. WHY THESE STOPS. #0A1B31 is the peak. It is not picked — it was SOLVED DOWN: #0E2440 was tried first and measured, and the sub-headline fell to 3.51:1 and the USA badge to 3.77:1, because the gradient peak and the mark spend the SAME budget and both had just been raised. #0A1B31 is the largest blue lift that leaves the mark at 0.28 AND its glow underneath the copy (see the budget at rule 2). Chroma is held as lightness rises — the same move the 08-19 and 08-20 darkenings made in reverse — so it reads as deeper navy, not as grey. */ body #hero.sf-hero, body.opt-hero-bg-gradient #hero.sf-hero { --cc-hero-peak: #0A1B31; --cc-hero-mid: #06111F; --cc-hero-edge: #030A18; background: radial-gradient(ellipse 92% 78% at 50% 40%, var(--cc-hero-peak) 0%, var(--cc-hero-mid) 52%, var(--cc-hero-edge) 100%), var(--cc-hero-edge); --cc-hero-scrim: 0; } /* THE COPY IS LIFTED TO PAY FOR THE FIGURE, AND THAT IS THE WHOLE TRADE. The sub-headline shipped --cc-metal-300 #A6BACB. Measured against the flat ground plus the old mark it cleared 4.83:1 — nine hundredths of headroom. A brighter ground, a bigger mark and a glow all spend from that same budget, and there was not 3x of it there. So the ink moves up rather than the figure being kept small. #CBD8E2 raises the sub's own luminance 0.47535 -> 0.67309, which lifts the ceiling on what may sit BEHIND it from L 0.0667 to L 0.1107 — 66% more room, bought without touching the headline (already #F0F6FA) and without dimming the mark the owner asked to be bigger and brighter. Scoped to #hero: this is a decision about copy over a figure, not a palette change, and --cc-metal-300 keeps its meaning everywhere else on the site. */ body #hero .sf-hero-sub, body #hero .sf-hero-stats span, body #hero .cc-usa-badge span { color: #CBD8E2; } /* ── 2. THE ENLARGED MARK — REMOVED, OWNER 2026-08-23 ───────────────────── "i want the big core chains lab logo removed. only the image, peptides at bottom, and text over the image." final/12-hero.mjs now ships the CC:HERO_MARK region EMPTY, so every rule that was here matched nothing. Dead paint in a stylesheet is worse than no rule at all: it reads as a live decision and it is the thing a later session "fixes" by putting the element back. What is deliberately NOT lost: assets/logo-mark.svg still exists and is still vector (lane 12's note 3 says why), and the derivation of the solved opacity ceiling — the four measured hero pairs, the binding ink --sf-muted #A6BACB, the alpha 0.2537 rounded to 0.25 — is in this file's git history at 2026-08-22. The METHOD outlives the element: any decorative layer that goes back under this copy is solved against the DIMMEST ink on the hero, never against the headline. final/16-hero-background.mjs already does exactly that for the picture that replaced this figure. */ /* ── 3. THE VIALS — REMOVED FROM THE HERO, OWNER 2026-08-23 ─────────────── "remove the peptides at bottom of screen on hero." Same treatment, and the same reason, as the mark in section 2 above: final/12-hero.mjs now ships the CC:HERO_PLATES region EMPTY and excises apply-refresh.mjs step 22's own layer on every pass, so every rule that stood here — the solid/sharp filter chain, the far-pair override, the prefers-contrast arm, and section 3c's edge-feather masks — matched nothing. Dead paint reads as a live decision. What the plates are is not lost: assets/hero-vials/*.webp stay in the client tree, and the derivations (halo BEFORE seat-shadow because drop-shadow works off the alpha channel; no blur on the pixels; the 64rem measurement showing the plate boxes and the h1 box are disjoint) are in this file's git history at 2026-08-22. The rule that outlives the element is section 2's: a decorative layer under this copy is solved against the DIMMEST ink on the hero, never against the headline. */ /* ── 4. THE QUIET CTA STOPS COMPOSITING WHATEVER IS BEHIND IT ───────────── THIS IS A CONTRAST FIX, NOT A RESTYLE, AND sf-refresh.css ALREADY SAYS SO. The secondary hero button ships `background: rgb(63 182 201 / 0.10)` with a `backdrop-filter: saturate(1.4)` over it, and the comment above that rule (sf-refresh.css:246-248) states the intent outright: *"The 10% cyan wash composites over --sf-bg to rgb(9,33,45); #C9F0F6 on that measures 13.64:1."* That number is only true over a bare ground. Measured here at 1280: over the flat navy, nothing behind 5.15 : 1 with the hero mark behind it 3.72 : 1 <- introduced by §2 A 10% wash under a 1.4x saturating backdrop-filter amplifies anything decorative underneath, so the control's legibility was a property of the decoration rather than of the control. That is precisely the failure CLAUDE.md's chrome doctrine names — "de-emphasis is a SOLVED second colour, never an alpha fade; an ink faded toward transparent walks back toward its own ground and composites what scrolls under it, so no gate can measure it." So the wash is SOLVED instead of removed. #091B2A is exactly 0.10 x rgb(63,182,201) + 0.90 x #030A18, and #0E2938 is the same arithmetic on the hover rule's 0.18 — i.e. the identical colour the transparent version already produced on this ground, now opaque. Nothing about the button looks different on the page; it simply cannot pick up the figure any more. MEASURED after: base #C9F0F6 on #091B2A = 14.38:1, hover #F0FCFF on #0E2938 = 14.41:1. Both classes are named because sf-refresh styles them as a pair; only .btn-ghost-white is actually present in this hero. ONLY INSIDE #hero. The same button on the CTA banner and in the footer sits on grounds this lane does not own and has not measured. */ body #hero .btn-ghost-white, body #hero .sf-btn-secondary { background: var(--cc-hero-cta-quiet, #091B2A); } body #hero .btn-ghost-white:hover, body #hero .btn-ghost-white:focus-visible, body #hero .sf-btn-secondary:hover, body #hero .sf-btn-secondary:focus-visible { background: var(--cc-hero-cta-quiet-hover, #0E2938); }