DELIBERATELY. The header and footer are shared site chrome; they must look identical on every page, not shift colour per division. This is also a contrast fix: home.css pins `.nav-cta{color:#04141c !important}`, so theming the header CTA repainted its FILL to the division accent while the !important held the label dark — 2.12:1 on Jan/San, 2.60 on Industrial, 3.58 on Design, 4.11 on Packaging. Leaving site chrome alone fixes all four and is the correct design besides. */ .div main .btn-primary{background:var(--accent);color:var(--accent-label); border-color:transparent;background-image:none} .div main .btn-primary:hover{filter:brightness(1.08)} .div main .btn:focus-visible{outline:3px solid var(--accent-line);outline-offset:3px} /* ========================================================================== 2. SECTION RHYTHM navy-900 vs navy-800 differ by ~1.5% luminance — invisible while scrolling. Three stepped tones plus an accent hairline give the page a readable pulse. ========================================================================== */ .div .band{position:relative} .div .band--alt{background:var(--navy-alt); border-top:1px solid rgba(var(--accent-line-rgb),.20); border-bottom:1px solid rgba(var(--accent-line-rgb),.20)} /* accent glow riding the top edge of each alternate band */ .div .band--alt::before{content:"";position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg,transparent,rgba(var(--accent-line-rgb),.85),transparent)} .center{text-align:center} .muted-note{color:var(--muted-2);font-size:14.5px;margin:var(--sp-4) 0 0} /* Measure. A centered paragraph running the full 1400px wrap is unreadable. */ .div .sec-head p,.div .stub-note p{max-width:65ch;margin-inline:auto} /* Left-aligned section head — the rhythm break from six centered stacks. */ .div .sec-head--left{text-align:left;max-width:none;margin-bottom:var(--sp-8); display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6);align-items:end} .div .sec-head--left p{margin-inline:0;max-width:60ch} .div .sec-head--left .h2{margin-bottom:var(--sp-3)} .div .sec-head--left .sh-copy{min-width:0} @media(max-width:860px){ .div .sec-head--left{grid-template-columns:1fr;align-items:start} } /* Asymmetric two-column. Used by territory coverage. align-items:start (not center) so the columns share a top edge; `center` left the shorter column floating with dead space above AND below it. */ .div .split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--sp-10);align-items:start} @media(max-width:960px){.div .split{grid-template-columns:1fr;gap:var(--sp-8)}} .div .split .h2{margin-top:0} .div .split p{max-width:56ch} .coverage-count{margin:var(--sp-7) 0 0;color:var(--muted-2);font-size:15px} .coverage-count strong{color:var(--accent-text);font-family:var(--font-head); font-size:22px;font-weight:800;margin-right:var(--sp-2)} /* Single measured column — heading, copy and action as ONE unit. */ .div .stack{max-width:62ch} .div .stack .h2{margin:0 0 var(--sp-4)} .div .stack p{margin:0 0 var(--sp-5)} .div .stack .stack-cta{margin:var(--sp-6) 0 0} /* ========================================================================== 3. THE EXCLUSIVE — leads every recruiting-state page. ========================================================================== */ .band--exclusive{background: radial-gradient(900px 340px at 50% 0%,rgba(var(--accent-rgb),.16),transparent 70%), var(--navy-800); border-top:1px solid rgba(var(--accent-line-rgb),.28); border-bottom:1px solid rgba(var(--accent-line-rgb),.28)} .excl{max-width:860px;margin:0 auto;text-align:center} .excl .h2{margin:0 0 var(--sp-5)} .excl p{color:var(--ink);font-size:17.5px;margin:0 auto var(--sp-4);max-width:65ch} .excl .excl-note{color:var(--muted);font-size:15px;margin-bottom:0} /* ========================================================================== 4. HOTSPOT GRID — the substance of the page, weighted accordingly. Two columns of tall cards, generous band padding, title at display size. ========================================================================== */ .div .band--problems{padding-block:var(--sp-12)} .hs-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-6); grid-template-columns:repeat(2,1fr)} @media(max-width:860px){.hs-list{grid-template-columns:1fr;gap:var(--sp-5)}} .hs{border:1px solid var(--line);border-radius:var(--radius); background:var(--navy-800);display:flex;overflow:hidden} .hs-title{font-family:var(--font-head);font-weight:700; font-size:clamp(20px,2.1vw,25px);line-height:1.25;letter-spacing:-.015em; color:var(--ink);display:block} /* --- published --- */ .hs--live{padding:0; transition:transform .18s ease,border-color .18s ease,box-shadow .25s ease} .hs--live a{display:flex;flex-direction:column;gap:var(--sp-4); padding:var(--sp-8) var(--sp-8) var(--sp-7);width:100%;text-decoration:none} .hs--live .hs-body{display:flex;flex-direction:column;gap:var(--sp-3); flex:1 1 auto;min-height:0} .hs--live:hover{transform:translateY(-3px); border-color:rgba(var(--accent-line-rgb),.65); box-shadow:0 26px 60px -30px rgba(0,0,0,.9)} .hs--live a:focus-visible{outline:3px solid var(--accent-line);outline-offset:-3px; border-radius:var(--radius)} .hs-go{margin-top:auto;font-size:13px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--accent-text); display:inline-flex;align-items:center;gap:var(--sp-2)} .hs-go::after{content:"→";font-size:15px;transition:transform .18s ease} .hs--live:hover .hs-go::after{transform:translateX(3px)} /* accent spine marking the live card as the live one */ .hs--live{border-left:3px solid var(--accent-line)} /* --- not yet published --- Visibly pending, not broken: no hover, no pointer, no affordance at all. The label states the status rather than leaving the reader to infer it. */ .hs--stub{padding:var(--sp-8);align-items:flex-start;flex-direction:column; gap:var(--sp-4);background:transparent;border-style:dashed; border-color:var(--line);cursor:default} .hs--stub .hs-title{color:var(--muted-2);font-weight:600} .hs--stub:hover{transform:none;border-color:var(--line);box-shadow:none} .hs-pending{margin-top:auto;display:inline-flex;align-items:center;gap:var(--sp-2); font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--muted-2);border:1px solid var(--line-2);border-radius:999px; padding:5px var(--sp-3);background:rgba(255,255,255,.02)} .hs-pending::before{content:"";width:6px;height:6px;border-radius:50%; background:var(--muted-2)} /* ========================================================================== 5. IMAGE SLOTS — unpopulated today; art is produced separately. Both reserve their aspect ratio whether or not a file exists, so dropping art in causes NO layout shift and its absence causes no broken icon: the generator emits only when the file is on disk, and this styled panel otherwise. Never an with a missing src. ========================================================================== */ .slot{position:relative;display:block;width:100%;overflow:hidden; border-radius:var(--radius);background: linear-gradient(135deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.04) 60%,transparent), var(--navy-700); border:1px solid var(--line)} .slot img{display:block;width:100%;height:100%;object-fit:cover} .slot--zone{aspect-ratio:16/9;margin:0 0 var(--sp-9)} .slot--thumb{aspect-ratio:1/1;width:88px;flex:0 0 88px;border-radius:var(--radius-chip)} @media(max-width:520px){.slot--thumb{width:64px;flex-basis:64px}} .slot picture{display:contents} /* Empty state: a quiet accent-tinted panel with a hairline grid, never a gap. On ::before so ::after stays free for the zone scrim below — an empty zone slot needs both. */ .slot--empty::before{content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:22px 22px;opacity:.5} /* ZONE SCRIM. The zone art is daylit and the page is navy, so a hard bottom edge reads as a pasted-in rectangle. This fades the lower edge into whatever band the slot sits in. It is driven by --band-bg, set on the band, so the SAME rule works for all six zones and in both band tones — nothing per division, nothing per image. */ .div .band{--band-bg:var(--navy-900);--band-bg-rgb:4,17,29} .div .band--alt{--band-bg:var(--navy-alt);--band-bg-rgb:11,33,53} .slot--zone::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom, transparent 50%, rgba(var(--band-bg-rgb),.55) 82%, var(--band-bg) 100%)} /* A populated zone drops its frame so the scrim can dissolve the bottom edge. An EMPTY one keeps the frame — otherwise the placeholder panel has no boundary and reads as a rendering fault rather than a reserved space. */ .slot--zone:not(.slot--empty){border:0} .hs--live a .hs-head,.hs--stub .hs-head{display:flex;gap:var(--sp-5);align-items:flex-start} .hs--live a .hs-head .hs-title,.hs--stub .hs-head .hs-title{flex:1 1 auto;min-width:0} /* ========================================================================== 6. CHIP ROW — territory regions and solution categories ========================================================================== */ .chip-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap; gap:var(--sp-3)} .chip-row li a,.chip-row--static li{display:inline-block; padding:var(--sp-3) var(--sp-5);border-radius:999px; border:1px solid var(--line-2);background:var(--navy-700); font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none} .chip-row li a:hover{border-color:var(--accent-line);color:#fff; background:rgba(var(--accent-rgb),.14)} .chip-row li a:focus-visible{outline:3px solid var(--accent-line);outline-offset:2px} .chip-row--static li{color:var(--muted);font-weight:500} /* Coverage: the pills were a ragged wrap that ended well above the copy, leaving a void in the lower-right. A fixed 3-up grid makes the block rectangular so both columns terminate together, and the count line gives the left column a matching final beat. */ .chip-row--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)} .chip-row--grid li a{display:flex;align-items:center;justify-content:center; text-align:center;height:100%;padding:var(--sp-4) var(--sp-3)} @media(max-width:1100px){.chip-row--grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.chip-row--grid{grid-template-columns:1fr}} /* NOTE: this MUST stay after .chip-row. Both are single-class selectors, so source order decides, and .chip-row{display:flex} silently beat the grid when this block sat earlier in the file. */ /* ========================================================================== 7. HOTSPOT PAGE — long-form prose ========================================================================== */ /* ========================================================================== HERO ART — optional per division, currently Packaging only. MEASURED PER DIVISION, NOT EYEBALLED, AND NOT SHARED. Each hero needs its OWN alpha — the value does not transfer. The Packaging film abstract peaks at luminance 0.075 and clears AA at .59; the Jan/San wet-floor shot has a specular streak peaking at 0.225 (3x brighter) and still FAILS at .66. These are measured on the RENDERED PAGE, sampling the background only inside the actual bounding box of each text element, with the text hidden. packaging --hero-scrim:.66 -> h1 7.90:1 · .lead 4.89:1 safety --hero-scrim:.70 -> h1 9.11:1 · .lead 4.94:1 jansan --hero-scrim:.78 -> h1 9.44:1 · .lead 4.81:1 Three heroes, three different values, no two alike — which is the point of solving each one rather than reusing a number. An earlier pass modelled this from the source file with a Gaussian blur standing in for "the area under a glyph". That model UNDER-REPORTED: it cleared Packaging at .59, but the rendered page put .lead at 4.43:1 — a fail. The render differs from the source in ways the model missed — object-fit:cover re-crops to the hero's aspect, the bitmap is not blurred, and the accent radial lands unevenly. Model to get close; measure to decide. The .80 fallback is deliberately conservative: a hero added without running the solver goes too DARK rather than shipping unreadable text. Run the solver and set the real value. Layer order is load-bearing: image -> flat scrim -> accent radial + bottom fade -> content. ========================================================================== */ .page-hero--art{position:relative;isolation:isolate;background:var(--navy-900); overflow:hidden} .page-hero--art .hero-art{position:absolute;inset:0;z-index:0;display:block} .page-hero--art .hero-art img{width:100%;height:100%;object-fit:cover;display:block} .page-hero--art::before{content:"";position:absolute;inset:0;z-index:1; background:rgba(4,17,29,var(--hero-scrim,.80))} .page-hero--art::after{content:"";position:absolute;inset:0;z-index:2; background: radial-gradient(1200px 460px at 50% -10%,rgba(var(--accent-rgb),.16),transparent 70%), linear-gradient(to bottom,transparent 55%,var(--navy-900) 99%)} .page-hero--art > .wrap{position:relative;z-index:3} .page-hero--sub{padding-top:var(--sp-10);padding-bottom:var(--sp-9)} .page-hero--sub h1{font-size:clamp(28px,4vw,44px);max-width:20ch;margin-inline:auto} .crumbs{display:flex;gap:var(--sp-3);justify-content:center;align-items:center; margin:0 0 var(--sp-5);font-size:13.5px;color:var(--muted)} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--accent-text)} .prose{max-width:72ch;margin:0 auto} .prose .h2{font-size:clamp(22px,2.6vw,28px);margin:var(--sp-9) 0 var(--sp-5)} .prose .h2:first-child{margin-top:0} .prose p{color:var(--ink);font-size:17px;line-height:1.7;margin:0 0 var(--sp-5)} .cues,.prose-list{margin:0 0 var(--sp-5);padding:0 0 0 var(--sp-6);color:var(--ink)} .cues li,.prose-list li{margin:0 0 var(--sp-3);line-height:1.6;font-size:16.5px} /* Directional-figures and cue-qualification notes. Amber is kept deliberately OFF the division accent: it is a caution, and it must not read as decoration that happens to match the page. */ .qualifier{border-left:3px solid var(--amber);padding:var(--sp-4) var(--sp-5); background:rgba(247,162,59,.07);border-radius:0 var(--radius-chip) var(--radius-chip) 0; color:var(--muted) !important;font-size:15.5px !important;line-height:1.65} .qualifier strong{color:var(--ink)} .resolved{margin:0;padding:var(--sp-6) var(--sp-7);border:1px solid var(--line); border-radius:var(--radius);background:var(--navy-800); border-left:3px solid rgba(var(--accent-line-rgb),.55)} .resolved dt{font-family:var(--font-head);font-weight:700;font-size:14px; letter-spacing:.04em;text-transform:uppercase;margin:var(--sp-5) 0 var(--sp-2)} .resolved dt:first-child{margin-top:0} .resolved dd{margin:0;color:var(--muted);font-size:16px;line-height:1.6} .resolved dd.dd-sub{margin-top:var(--sp-2);font-size:15px;color:var(--muted-2)} /* ========================================================================== 8. LIGHT SECTION (.ctaband, background --paper). DEFECT FIX: home.css .btn-ghost is `color:var(--ink)` (#e7eef6) with a translucent-white border. On --paper (#f5f8fb) that is 1.10:1 — the label was effectively invisible. Scoped under .div so the homepage's own ctaband is untouched. ========================================================================== */ .div .ctaband{background:var(--paper);color:#0b2236; border-top:3px solid var(--accent)} .div .ctaband .h2{color:#0b2236} .div .ctaband p{color:#3d5568;max-width:65ch;margin-inline:auto} /* Border at .30 alpha blends to #a8b4bf on --paper = 1.98:1, which fails the AA non-text 3:1 for a UI-component boundary. .55 clears it. */ .div .ctaband .btn-ghost{color:#0b2236;border-color:rgba(11,34,54,.55); background:transparent} .div .ctaband .btn-ghost:hover{background:rgba(11,34,54,.06); border-color:rgba(11,34,54,.55);color:#0b2236} .div .ctaband .btn-ghost:focus-visible{outline:3px solid var(--accent-onlight); outline-offset:3px} /* Primary on light keeps the brand fill + its safe label. */ .div .ctaband .btn-primary{background:var(--accent);color:var(--accent-label)} @media(max-width:680px){ .resolved{padding:var(--sp-5)} .hs--live a,.hs--stub{padding:var(--sp-6)} }