/* ═══ DIRECTION B — SITE LAYER ════════════════════════════════════════════ Lifted verbatim from the shipped English homepage so the mirrors match it exactly rather than being re-authored and drifting. The homepage keeps its copy inline (it is live and verified); this file is what fr/ja/zh load. ════════════════════════════════════════════════════════════════════════ */ /* ═══ DIRECTION B - PROJECTION ════════════════════════════════════════════ Design only. No copy, image or clip is touched. Tokens above were remapped in place; this is the treatment layer. HARD-WON RULE: nothing in here may add position/overflow/isolation to a section that did not already have it. Doing so changes the containing block for absolutely-positioned decorations, which either drops them into flow (+3,000px of dead space) or collapses the section. Effects therefore live only in the four sections verified to tolerate them. ════════════════════════════════════════════════════════════════════════ */ :root { --b-ground:#090B0E; --b-lift:#101319; --b-type:#F4F1EA; --b-body:#C8C1B3; --b-meta:#8F887B; --b-acc:#FF8C42; --b-stain:#A33A12; --b-stone:#E8E3D8; --b-ink:#14120E; --b-ink2:#3E3A33; --b-ink3:#605A50; --b-paper-ink:#241C14; --b-box:#DD744B; --b-box-label:#1A0F06; --b-box-edge:#241C14; --b-rule:rgba(244,241,234,0.14); --b-fx:0.62; --b-wrap-l:max(2rem, calc(50% - 32rem)); --b-text-r:calc(var(--b-wrap-l) + 36rem); } html, body { background: var(--b-ground); } body { color: var(--b-body); } .band { background: var(--b-lift); } /* ---- HEADER: glass over the film, not a lid ---- */ nav { background: transparent; border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease; } nav.is-stuck { background: color-mix(in srgb, var(--b-ground) 72%, transparent); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom-color: var(--b-rule); } nav .nav-links a, nav .nav-lang, nav .nav-lang a { color: var(--b-body); } nav .nav-links a:hover, nav .nav-lang a:hover { color: var(--b-acc); } nav .nav-lang .current { color: var(--b-type); } nav .nav-ask { color: var(--b-type); } nav .nav-ask-orb { background: var(--b-acc) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--b-acc) 65%, transparent) !important; } nav .nav-toggle span { background: var(--b-type); } /* ---- FOOTER ---- */ footer { background: var(--b-ground); color: var(--b-meta); border-top: 1px solid var(--b-rule); padding-top: 3.25rem; padding-bottom: 3.25rem; } footer a { color: var(--b-body); text-underline-offset: 3px; } footer a:hover { color: var(--b-acc); } /* ---- SECTION RAIL: its plate was lighter than the ground ---- */ #secnav::before { background: color-mix(in srgb, var(--b-ground) 66%, transparent) !important; -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); border: 1px solid var(--b-rule); border-radius: 2px; } #secnav a { color: var(--b-meta); } #secnav a:hover { color: var(--b-type); } #secnav .active, #secnav a.active { color: var(--b-acc); } /* ---- EVERY eyebrow/label class, and Capabilities ---- */ .eyebrow, .label, .card-cat, .work-card-cat, .hero-b-eyebrow, .hero-b-eyebrow span, .make-label, .why-ai-label, .flow-loop-label, .cred-box-title, .capability-number, .nav-ask-label, #capabilities .label, #analytics .label, #about .label, .band .label, .band .eyebrow { color: var(--b-acc) !important; } #capabilities .capability-name { color: var(--b-acc) !important; } #capabilities .capability-desc { color: var(--b-body) !important; } h1 em, h2 em, h3 em, .statement-headline em, .analytics-headline em, .why-headline em, .band .statement-headline em, .band .analytics-headline em, .plated em, .band .plated em { color: var(--b-acc) !important; } .hero-b-say h1 em, .hero-b h1 em { font-weight: 300 !important; font-synthesis-weight: none; } /* ---- WORK CARDS: image through the card, up on rollover ---- */ #work .work-card-media { opacity: .55; filter: saturate(.8); transition: opacity .45s ease, filter .45s ease; } #work .work-card:hover .work-card-media, #work .work-card:focus-within .work-card-media { opacity: 1; filter: saturate(1); } #work .work-card-media::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(to bottom, rgba(9,11,14,.30) 0%, rgba(9,11,14,.62) 38%, rgba(9,11,14,.88) 72%, rgba(9,11,14,.94) 100%); transition: opacity .45s ease; } #work .work-card:hover .work-card-media::after { opacity: .82; } /* ---- SECTION TITLES LIGHT UP ON ROLLOVER ---- */ .statement-headline, .make-headline, .analytics-headline, .why-headline, .why-heading, .contact-headline, .work-head h2, .work-card-title { transition: color .4s ease, text-shadow .4s ease; } .statement-headline:hover, .make-headline:hover, .analytics-headline:hover, .why-headline:hover, .why-heading:hover, .work-head h2:hover { color: var(--b-acc) !important; text-shadow: 0 0 28px color-mix(in srgb, var(--b-acc) 42%, transparent), 0 0 60px color-mix(in srgb, var(--b-acc) 22%, transparent); } .statement-headline:hover em, .make-headline:hover em, .analytics-headline:hover em, .why-headline:hover em { color: var(--b-type) !important; } .work-card:hover .work-card-title { color: var(--b-acc); text-shadow: 0 0 24px color-mix(in srgb, var(--b-acc) 38%, transparent); } /* ---- EMULSION, in the four sections that tolerate it ---- Measured: a bloom may sit under the faintest text (meta, 5.4:1) up to alpha 0.10 before the floor breaks, and run full strength where there is no type. So the mask drops to a 0.14 plateau across the text rather than cutting to zero: 0.62 layer x 0.14 = 0.087 effective, under the ceiling. The scorch darkens, which only pushes light type further from its ground, so it is unmasked. Nothing animates; the hero carries video. */ .hero-b > *, #work > *, #credentials > *, #contact > * { position: relative; z-index: 3; } .hero-b > .b-fx, #work > .b-fx, #credentials > .b-fx, #contact > .b-fx, .hero-b > .b-scorch, #work > .b-scorch, #credentials > .b-scorch, #contact > .b-scorch, .hero-b > .b-grain, #work > .b-grain, #credentials > .b-grain, #contact > .b-grain { position: absolute !important; inset: 0 !important; pointer-events: none; } .hero-b > .b-fx, #work > .b-fx, #credentials > .b-fx, #contact > .b-fx { z-index: 0 !important; } .hero-b > .b-scorch, #work > .b-scorch, #credentials > .b-scorch, #contact > .b-scorch { z-index: 1 !important; } .hero-b > .b-grain, #work > .b-grain, #credentials > .b-grain, #contact > .b-grain { z-index: 2 !important; } .b-grain { mix-blend-mode: overlay; opacity: calc(var(--b-fx) * .42); background-image: url("data:image/svg+xml;utf8,"); background-size: 160px 160px; } /* Track Record was the one that read correctly, so it is the template: a soft edge glow with a small hot core at the frame edge. Work mirrors it. */ #work > .b-fx, #credentials > .b-fx { mix-blend-mode: screen; opacity: 1; } #work > .b-fx { -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.14) 0, rgba(0,0,0,.14) 46%, #000 86%); mask-image: linear-gradient(to right, rgba(0,0,0,.14) 0, rgba(0,0,0,.14) 46%, #000 86%); background: radial-gradient(44% 74% at 100% 46%, color-mix(in srgb, var(--b-acc) 76%, transparent) 0%, color-mix(in srgb, var(--b-acc) 33%, transparent) 26%, color-mix(in srgb, var(--b-acc) 11%, transparent) 50%, transparent 74%); } #work > .b-scorch { mix-blend-mode: multiply; opacity: 1; background: radial-gradient(52% 84% at 105% 46%, transparent 20%, color-mix(in srgb, var(--b-stain) 52%, transparent) 34%, rgba(0,0,0,.58) 48%, rgba(0,0,0,.26) 66%, transparent 84%); } #credentials > .b-fx { -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.14) 0, rgba(0,0,0,.14) 46%, #000 86%); mask-image: linear-gradient(to left, rgba(0,0,0,.14) 0, rgba(0,0,0,.14) 46%, #000 86%); background: radial-gradient(52% 78% at 0% 54%, color-mix(in srgb, var(--b-acc) 76%, transparent) 0%, color-mix(in srgb, var(--b-acc) 34%, transparent) 26%, color-mix(in srgb, var(--b-acc) 12%, transparent) 50%, transparent 74%); } /* ---- #contact AS THE BRIGHT SHEET ---- NOTE: overrides David's 2026-09-23 instruction ("a little darker/deeper, richer grey"), pinned with !important, plus ~10 declarations from that pass written for a DARK contact section. Delete this block to restore it. */ #contact { background-color: var(--b-stone) !important; background-image: none !important; } #contact .contact-glow, #contact::before { display: none; } #contact > .b-fx { mix-blend-mode: multiply; opacity: var(--b-fx); background: radial-gradient(44% 60% at 99% 112%, color-mix(in srgb, var(--b-stain) 28%, transparent), transparent 64%), radial-gradient(25% 33% at 84% 97%, color-mix(in srgb, var(--b-stain) 20%, transparent), transparent 60%), radial-gradient(14% 21% at 72% 105%, color-mix(in srgb, var(--b-stain) 15%, transparent), transparent 58%); } #contact > .b-grain { mix-blend-mode: multiply; opacity: calc(var(--b-fx) * .26); } #contact .contact-headline, #contact .contact-headline.plated { color: var(--b-ink) !important; background: none !important; -webkit-text-fill-color: currentColor; } #contact .contact-headline em { color: var(--b-paper-ink) !important; font-weight: 400; } #contact p, #contact li, #contact .contact-text { color: var(--b-ink2) !important; } #contact .label, #contact .eyebrow { color: var(--b-paper-ink) !important; } #contact .contact-email { background: var(--b-box) !important; border: 1px solid var(--b-box-edge) !important; border-radius: 1px; } #contact .contact-email, #contact .contact-email * { color: var(--b-box-label) !important; } #contact .contact-email:hover { background: var(--b-ink) !important; border-color: var(--b-ink) !important; } #contact .contact-email:hover, #contact .contact-email:hover * { color: var(--b-stone) !important; } /* the accent is illegal on stone (1.81:1), so the hover lifts to 3.20:1 */ #contact .contact-headline:hover { color: #C86007 !important; text-shadow: 0 0 26px color-mix(in srgb, #C86007 24%, transparent); } #contact .contact-headline:hover em { color: var(--b-paper-ink) !important; } /* ---- DEAD SPACE: two decorative spacers holding no content ---- */ #work .para-orb { display: none !important; } .audience-divider { display: none !important; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ── BURN-IN, EVERY BAND ───────────────────────────────────────────────── Painted as background-image on the section itself: it composites above the background colour and below every child, so it needs no extra element and cannot affect position, flow or stacking. That is deliberate - adding layers and positioning to these sections is what broke the page twice. Profile is built to the measured ceiling. A bloom may sit under the faintest text (meta, 5.4:1 on the lifted ground) up to alpha 0.10 before the floor breaks. The wrap edge is at 9% of the viewport, so: 0% -> 0.30 the outer gutter, where no text ever reaches 9% -> 0.10 the text column begins, exactly at the ceiling 32% -> 0.06 long, low tail 64% -> 0.03 100% -> 0 Broad and soft rather than hot and focused, and it crosses the whole band instead of pooling at one edge. Track Record is left exactly as it was. */ #about, #what-we-make, .why-section { background-image: radial-gradient(118% 150% at 0% 46%, rgba(255,140,66,0.30) 0%, rgba(255,140,66,0.10) 9%, rgba(255,140,66,0.06) 32%, rgba(255,140,66,0.03) 64%, transparent 100%); } #founder, #capabilities, #analytics { background-image: radial-gradient(118% 150% at 100% 54%, rgba(255,140,66,0.30) 0%, rgba(255,140,66,0.10) 9%, rgba(255,140,66,0.06) 32%, rgba(255,140,66,0.03) 64%, transparent 100%); } /* vertical anchor varied so no two bands read as the same event */ #what-we-make { background-position: 0 -8%; } .why-section { background-position: 0 12%; } #capabilities { background-position: 0 -6%; } #analytics { background-position: 0 10%; } /* WORK: the span glow was the hot spot. It goes; the section takes the same broad wash as the rest, and keeps its scorch, which darkens and is free to cross anything. */ #work > .b-fx { background: none !important; } #work { background-image: radial-gradient(118% 150% at 100% 46%, rgba(255,140,66,0.30) 0%, rgba(255,140,66,0.10) 9%, rgba(255,140,66,0.06) 32%, rgba(255,140,66,0.03) 64%, transparent 100%); } /* the hero leak softened to match - it was the other hot one * /* ── BURN-IN v2: CORNER-ANCHORED ───────────────────────────────────────── The subtle version read as a tint. The strong version (Track Record) puts ~0.45 alpha over bare text, which drops body copy to 3.95:1 and small text to 2.01:1 - it looks right because it is illegal. This is the version that gets both: the hot core is anchored in a CORNER, inside the 88px padding band where no text ever sits, with a steep initial falloff and a long low tail. Strong where it is seen, at or under the 0.10 ceiling by the time it reaches any type. */ #about, #what-we-make, .why-section, #work { background-image: radial-gradient(135% 105% at 100% 0%, rgba(255,140,66,0.62) 0%, rgba(255,140,66,0.34) 5%, rgba(255,140,66,0.15) 10%, rgba(255,140,66,0.08) 20%, rgba(255,140,66,0.04) 42%, transparent 82%) !important; } #founder, #capabilities, #analytics { background-image: radial-gradient(135% 105% at 0% 100%, rgba(255,140,66,0.62) 0%, rgba(255,140,66,0.34) 5%, rgba(255,140,66,0.15) 10%, rgba(255,140,66,0.08) 20%, rgba(255,140,66,0.04) 42%, transparent 82%) !important; } /* alternate the corner so the page reads as a sequence of frames */ #what-we-make { background-image: radial-gradient(135% 105% at 0% 0%, rgba(255,140,66,0.62) 0%, rgba(255,140,66,0.34) 5%, rgba(255,140,66,0.15) 10%, rgba(255,140,66,0.08) 20%, rgba(255,140,66,0.04) 42%, transparent 82%) !important; } .why-section { background-image: radial-gradient(135% 105% at 100% 100%, rgba(255,140,66,0.62) 0%, rgba(255,140,66,0.34) 5%, rgba(255,140,66,0.15) 10%, rgba(255,140,66,0.08) 20%, rgba(255,140,66,0.04) 42%, transparent 82%) !important; } #capabilities { background-image: radial-gradient(135% 105% at 100% 0%, rgba(255,140,66,0.62) 0%, rgba(255,140,66,0.34) 5%, rgba(255,140,66,0.15) 10%, rgba(255,140,66,0.08) 20%, rgba(255,140,66,0.04) 42%, transparent 82%) !important; } /* ── ALL TITLES ORANGE AT REST ─────────────────────────────────────────── The accent becomes the resting state for titling rather than a highlight inside it: 8.04:1 on the band, 8.52:1 on the ground. The em inverts to near-white so the two halves of a line stay distinguishable now that the orange is the default rather than the exception. */ .statement-headline, .make-headline, .analytics-headline, .why-headline, .why-heading, .work-head h2, .cred-headline, .credentials-headline, .make-name, .work-card-title { color: var(--b-acc) !important; } .statement-headline em, .make-headline em, .analytics-headline em, .analytics-headline em, .why-headline em { color: var(--b-type) !important; } /* rollover now LIFTS rather than colours - brighter, with the bloom */ .statement-headline:hover, .make-headline:hover, .analytics-headline:hover, .why-headline:hover, .why-heading:hover, .work-head h2:hover, .work-card:hover .work-card-title { color: #FFB07A !important; text-shadow: 0 0 28px color-mix(in srgb, var(--b-acc) 46%, transparent), 0 0 64px color-mix(in srgb, var(--b-acc) 24%, transparent); } .statement-headline:hover em, .make-headline:hover em, .analytics-headline:hover em, .why-headline:hover em { color: var(--b-type) !important; } /* on the stone sheet the accent is illegal (1.81:1), so the paper title takes the deep orange at 3.20:1 - large display type only, which it is. */ #contact .contact-headline { color: #C86007 !important; } #contact .contact-headline em { color: var(--b-paper-ink) !important; } #contact .contact-headline:hover { color: var(--b-paper-ink) !important; text-shadow: 0 0 26px color-mix(in srgb, #C86007 26%, transparent); } /* ── THE PULL QUOTE UNDER WHY IT WORKS ─────────────────────────────────── It is the thesis of the section and was carrying the same warm grey as the body around it. Now the accent, with a rule in the accent beside it: 38px display type at 8.04:1, well clear of either floor. */ .why-pullquote { color: var(--b-acc) !important; border-left: 2px solid var(--b-acc); padding-left: 1.6rem; } .why-pullquote em, .why-pullquote strong { color: var(--b-type) !important; } /* the September pass pinned several of these at (0,2,0) with !important (.band .analytics-headline, .plated, etc), so they are answered at id level */ #what-we-make .make-headline, #what-we-make .make-headline.plated, #analytics .analytics-headline, #analytics .analytics-headline.plated, #about .statement-headline, #about .statement-headline.plated, #what-we-make .make-name, #credentials .cred-headline, .band .make-headline, .band .analytics-headline, .band .statement-headline { color: var(--b-acc) !important; } #what-we-make .make-headline em, #analytics .analytics-headline em, #about .statement-headline em, .band .make-headline em, .band .analytics-headline em, .band .statement-headline em { color: var(--b-type) !important; } #contact .contact-headline, #contact .contact-headline.plated { color: #C86007 !important; } #contact .contact-headline.plated em { color: var(--b-paper-ink) !important; } /* ── BURN ADJACENCY ────────────────────────────────────────────────────── Two burns must never meet across a section boundary. Interactive Engagement was anchored bottom-left, which put it directly against Track Record's left-edge glow at the join - two pools bleeding into one. It moves to the TOP of its own section. Top-LEFT specifically: the section above it (Why It Works) is anchored bottom-right, so the two sit on opposite sides of that join, and the move puts the full 896px of the section between it and Track Record. Running order, each burn on the opposite side to its neighbours' nearest: about top-right founder bottom-left work top-right what we make top-left capabilities top-right why it works bottom-right interactive TOP-LEFT <- moved track record left, middle (unchanged - the one that reads correctly) contact stain, bottom-right */ #analytics { background-position: 0 0 !important; background-image: radial-gradient(135% 105% at 0% 0%, rgba(255,140,66,0.62) 0%, rgba(255,140,66,0.34) 5%, rgba(255,140,66,0.15) 10%, rgba(255,140,66,0.08) 20%, rgba(255,140,66,0.04) 42%, transparent 82%) !important; } /* ── HERO: LEAKS ON THE PANEL, NEVER ON THE FILM ───────────────────────── .hero-b-plate is inset at left:46%, so everything right of that is the film and must stay clean - a leak across the video reads as a defect in the footage rather than in the frame. Both hero layers are therefore masked off before the plate edge, with a soft ramp so the cut is not visible. Within the panel the same ceiling applies: the hot cores sit in the top and bottom corners, clear of the type, which occupies roughly 38-78% of the panel's height. Three events rather than one - a corner bloom, the gate streak across the top, and an ember at the foot. * /* belt and braces: the film itself is never a blend target */ .hero-b-plate, .hero-b-plate .plate-v { isolation: isolate; } /* ── HERO, CORRECTED ───────────────────────────────────────────────────── In hero-full the plate is FULL-BLEED (1285x1571, inset 0) and .hero-b-say is a 463x645 panel sitting over it. So a hero-wide overlay lands on the film by definition - there is no "beside the video" to work in. The hero-level layers are therefore switched off entirely, and the leak is painted on the PANEL, where it belongs. Its core sits off the panel's top-left corner so the hot part never lands on type; on-panel it opens at 0.10, the measured ceiling, and falls away. * .hero-b > .b-grain { opacity: calc(var(--b-fx) * 0.22) !important; } .hero-b-say { background-image: radial-gradient(86% 64% at -12% -14%, rgba(255,140,66,0.52) 0%, rgba(255,140,66,0.20) 7%, rgba(255,140,66,0.10) 14%, rgba(255,140,66,0.05) 28%, rgba(255,140,66,0.02) 48%, transparent 76%), linear-gradient(188deg, rgba(255,140,66,0.10) 0%, rgba(255,140,66,0.03) 12%, transparent 26%); background-repeat: no-repeat; } /* the caption panel takes the tail of the same event */ .hero-b-cap { background-image: radial-gradient(70% 180% at -8% 50%, rgba(255,140,66,0.18) 0%, rgba(255,140,66,0.06) 22%, transparent 62%); background-repeat: no-repeat; } /* ── BURNS ENLARGED TO MATCH TRACK RECORD ──────────────────────────────── One colour was capping every burn on the page: the small warm-grey captions at #8F887B, which start at 5.29:1 and break the floor the moment any bloom touches them. Everything else tolerates far more - body copy holds to alpha 0.26, orange titles to 0.26. So the caption colour lifts to #B3AB9E (8.18:1 clean), which holds 4.5:1 all the way to alpha 0.26 - and the burns can then grow by a factor of roughly two and a half while staying legal. The profile is now large and slow: 0.26 across the near half of the band, falling away over the full width rather than dying at 20%. */ :root { --b-meta: #B3AB9E; } #about, #work, #capabilities { background-image: radial-gradient(185% 150% at 100% 0%, rgba(255,140,66,0.60) 0%, rgba(255,140,66,0.38) 6%, rgba(255,140,66,0.26) 14%, rgba(255,140,66,0.17) 28%, rgba(255,140,66,0.10) 46%, rgba(255,140,66,0.05) 68%, transparent 100%) !important; } #founder { background-image: radial-gradient(185% 150% at 0% 100%, rgba(255,140,66,0.60) 0%, rgba(255,140,66,0.38) 6%, rgba(255,140,66,0.26) 14%, rgba(255,140,66,0.17) 28%, rgba(255,140,66,0.10) 46%, rgba(255,140,66,0.05) 68%, transparent 100%) !important; } #what-we-make, #analytics { background-image: radial-gradient(185% 150% at 0% 0%, rgba(255,140,66,0.60) 0%, rgba(255,140,66,0.38) 6%, rgba(255,140,66,0.26) 14%, rgba(255,140,66,0.17) 28%, rgba(255,140,66,0.10) 46%, rgba(255,140,66,0.05) 68%, transparent 100%) !important; } .why-section { background-image: radial-gradient(185% 150% at 100% 100%, rgba(255,140,66,0.60) 0%, rgba(255,140,66,0.38) 6%, rgba(255,140,66,0.26) 14%, rgba(255,140,66,0.17) 28%, rgba(255,140,66,0.10) 46%, rgba(255,140,66,0.05) 68%, transparent 100%) !important; } /* the hero panel leak had a hard top edge where the linear layer met the panel box - it now fades out before every edge of the panel */ .hero-b-say { background-image: radial-gradient(110% 80% at -14% -16%, rgba(255,140,66,0.52) 0%, rgba(255,140,66,0.26) 8%, rgba(255,140,66,0.16) 18%, rgba(255,140,66,0.08) 34%, rgba(255,140,66,0.03) 56%, transparent 84%) !important; } /* ── HERO LEAK ACROSS THE WHOLE SECTION ────────────────────────────────── Painting it on .hero-b-say made it a hard-edged rectangle sitting on the text box - the panel's own box became the shape of the light, which is exactly backwards. The leak belongs to the FRAME. So it returns to the section layer, running the full height and width of the hero, and is faded out across 44-54% so it stops before the film. The plate is full-bleed in markup but its picture sits to the right, and that ramp is where the dark field ends. Alpha: the hot core is in the top-left, well above the copy, which sits in the lower third; by the time it reaches type it is at 0.20 or below, and the lifted caption colour holds 4.5:1 to 0.26. */ .hero-b-say, .hero-b-cap { background-image: none !important; } /* the ember at the foot of the frame, same mask so it also stops at the film * /* ── HERO BURN: PRESENT IN EVERY CLIP STATE ────────────────────────────── The plate has three geometries and the fixed 44-54% mask only matched one of them, so the burn disappeared on the others: full-bleed left:0 right:0 width:100% - no dark field at all column-in / figures left: gutter+min(34rem,36vw)+4rem - field on the LEFT column-in + editions left:0 right: calc(...) - field on the RIGHT There is no single mask that fits all three, and in full-bleed there is no empty field to work in. So the burn stops avoiding the film and runs across the whole frame, which is what a real burn does - it is on the emulsion, and the image is on the emulsion too. It stays an EDGE event: the cores sit hard in the corners and fall away fast, so the centre of every clip stays clean. Peak 0.52 at the corner, under 0.10 by a third of the way in, nothing in the middle. * /* ── FINAL PANEL: WHITE ON ORANGE ──────────────────────────────────────── Replaces the stone sheet. #B35205 is the brightest orange that still carries white type - pure white 5.09:1, and it is the last step before the floor breaks (#BC5A06 is 4.56, #C86007 drops to 4.09 and is large-only). Going deeper for more margin is available but heads straight back into the brown you rejected, so this sits at the bright end of what is legal. The box inverts: a near-black fill at 3.67:1 against the panel, which clears the 3.0 non-text floor, carrying a warm-white label at 16.57:1. */ #contact { background-color: #B35205 !important; background-image: none !important; } #contact, #contact p, #contact li, #contact span, #contact .contact-text { color: #FFFFFF !important; } #contact .contact-headline, #contact .contact-headline.plated { color: #FFFFFF !important; background: none !important; -webkit-text-fill-color: currentColor; } #contact .contact-headline em, #contact .contact-headline.plated em { color: #FFE6D4 !important; font-weight: 400; } #contact .label, #contact .eyebrow { color: #FFFFFF !important; opacity: 0.9; } #contact a { color: #FFFFFF !important; } #contact .contact-headline:hover { color: #FFE6D4 !important; text-shadow: none; } /* the stain stays, as a darkening pour - it is chemistry, and on an orange ground multiply only deepens, which cannot hurt white type */ #contact > .b-fx { mix-blend-mode: multiply !important; opacity: 0.5 !important; background: radial-gradient(52% 70% at 99% 112%, rgba(120,40,8,0.55), transparent 66%), radial-gradient(26% 34% at 84% 97%, rgba(120,40,8,0.38), transparent 62%) !important; } #contact > .b-grain { mix-blend-mode: multiply !important; opacity: 0.18 !important; } /* the box inverts on the orange field */ #contact .contact-email { background: #141210 !important; border: 1px solid #141210 !important; } #contact .contact-email, #contact .contact-email * { color: #F4F1EA !important; } #contact .contact-email:hover { background: #FFFFFF !important; border-color: #FFFFFF !important; } #contact .contact-email:hover, #contact .contact-email:hover * { color: #B35205 !important; } /* ── SIDE RAIL: ORANGE ON ROLLOVER ─────────────────────────────────────── Each item is an holding a .secnav-tick and a .secnav-label, so both take the accent together - the mark lights with the word rather than the word lighting alone. The current section keeps the accent at rest, and on hover lifts to the brighter orange so rollover still reads as a change even on the item you are already on. */ #secnav a .secnav-label, #secnav a .secnav-tick { transition: color .25s ease, background-color .25s ease, width .25s ease, opacity .25s ease; } #secnav a:hover .secnav-label { color: var(--b-acc) !important; } #secnav a:hover .secnav-tick { background-color: var(--b-acc) !important; opacity: 1; } #secnav a:focus-visible .secnav-label { color: var(--b-acc) !important; } #secnav a:focus-visible .secnav-tick { background-color: var(--b-acc) !important; } #secnav a.active .secnav-label { color: var(--b-acc) !important; } #secnav a.active .secnav-tick { background-color: var(--b-acc) !important; } #secnav a.active:hover .secnav-label { color: #FFB07A !important; } #secnav a.active:hover .secnav-tick { background-color: #FFB07A !important; } /* ── FINAL PANEL, LESS INTENSE ─────────────────────────────────────────── #B35205 was 95% saturation across a full-width field, and a large field of colour reads far hotter than the same value in a small box - which is why it worked as a button and shouted as a panel. The fix is saturation, not lightness: #A3542B is the same family at 58%, a third less saturated, and still clearly burnt orange rather than brown. Both floors improve rather than tighten: white type goes 5.09 -> 5.44:1, and the dark button holds at 3.44:1 against the panel (floor 3.0). One step further is #9A5438 at 47% - terracotta, white 5.68:1, button 3.29:1. Below that the button stops clearing 3.0 and would have to become an outline instead of a fill. */ #contact { background-color: #A3542B !important; } #contact .contact-email:hover, #contact .contact-email:hover * { color: #A3542B !important; } /* the pour follows the ground down so it still reads as chemistry, not grime */ #contact > .b-fx { opacity: 0.42 !important; background: radial-gradient(52% 70% at 99% 112%, rgba(96,38,12,0.55), transparent 66%), radial-gradient(26% 34% at 84% 97%, rgba(96,38,12,0.36), transparent 62%) !important; } /* ── HERO DISPLAY WEIGHT ───────────────────────────────────────────────── "Deeper engagement," was set at 600 while "through interaction." beside it was at 300 - a two-step jump inside one sentence, which is what made the roman read as heavyweight against its own italic. Both now sit at 300, so the line changes voice through STYLE (roman to italic) and colour, not through weight. 300 roman is already in the loaded Cormorant range, so this costs no extra font request and is a real weight, not a synthesised one - font-synthesis is off so a miss would be visible rather than faked. */ .hero-b-say h1, .hero-b h1 { font-weight: 300 !important; font-synthesis-weight: none; } /* ── HERO BURN: ABOVE THE FILM, BELOW THE TYPE ─────────────────────────── .hero-b-plate carries an OPAQUE background (rgb(6,7,8)) at z-index 3, and the burn layers were at 0-2 - so the hero burn was painting behind the film and could only ever show in a strip the plate did not cover, which in the full-bleed state is nowhere. That is why it read as far weaker than the other sections, where the glow is a background-image on the section itself and nothing sits over it. The burn moves above the plate; the copy and caption move above the burn. Order is now: film 3, burn 4, grain 5, type 6. */ .hero-b > .b-fx { z-index: 4 !important; } .hero-b > .b-scorch { z-index: 4 !important; } .hero-b > .b-grain { z-index: 5 !important; } .hero-b > .hero-b-say, .hero-b > .hero-b-cap { z-index: 6 !important; } /* now that it actually lands on the picture, the edge cores can come back down - screen over bright footage carries much further than over a flat dark ground, which is the other half of why this needed re-tuning. * /* ── HERO BURN: SAME COMPOSITING AS EVERY OTHER BAND ───────────────────── Still weaker than the sections because it was on mix-blend-mode: screen. Screen pushes toward white, so against bright footage - the white shoe, the lit gallery - it has almost nothing left to add and effectively vanishes; it only ever registered over the dark parts of a clip. Every other band composites NORMALLY over a flat dark ground, which is why they read so strongly. So the hero drops the blend mode and takes the identical profile to the other bands: 0.60 at the corner, 0.26 across the near third, a long tail. Normal compositing tints the picture rather than trying to lighten it, which is also closer to what a burn does to a frame. The copy sits at z-index 6, above the burn, so the lower-left ember is kept to roughly half strength where it passes behind the text block. */ .hero-b > .b-fx, .hero-b > .b-scorch { mix-blend-mode: normal !important; } /* ── HERO BURN FOLLOWS THE PLATE ───────────────────────────────────────── The clip states put the dark field on different sides: full-bleed no field - the whole frame is picture column-in / figures plate RIGHT, field LEFT column-in + editions plate LEFT, field RIGHT <- was being missed A burn anchored top-left sits on the film in that last state and leaves the field empty, which is the flat dark panel behind the copy. .b-fx is a SIBLING of the plate, so no descendant selector can reach the clip attribute - :has() reads it from the hero instead, and the burn anchors to whichever side the field is actually on. */ /* the burn crossfades with the plate rather than snapping between sides * /* ── THE BLACK BAR ─────────────────────────────────────────────────────── .scene-wrapper carried margin-top: 44px, leaving a 43px strip of bare body background between Capabilities and Why It Works. On the old flat page it was invisible; now that both neighbours carry a warm burn and the strip does not, it reads as a black bar across the page. The margin goes - the two sections meet, and the gap cannot show through. Each section already provides its own 88px of top padding, so nothing loses breathing room. */ .scene-wrapper { margin-top: 0 !important; } /* ── HERO BURN: THE DARK FIELD ONLY, NEVER THE FILM ────────────────────── Reversing the earlier decision to let it cross the picture. The burn is now masked to whatever grey/black field the plate is NOT covering, and because that field moves per clip, the mask is derived from the plate's own geometry rather than a fixed percentage: plate inset = var(--gutter) + min(34rem, 36vw) + 4rem column-in / figures plate RIGHT -> field is the left inset column-in + editions plate LEFT -> field is the right inset full-bleed plate covers everything -> no field, no burn The last line is the honest cost of this rule: on a full-bleed clip there is no background to burn, so the hero carries none until the plate pulls into a column. That is the trade for never touching the footage. */ .hero-b { --plate-edge: calc(var(--gutter) + min(34rem, 36vw) + 4rem); } /* default: full-bleed - nothing to burn * /* plate right, field LEFT */ .hero-b.column-in:not(:has(.hero-b-plate[data-clip="editions"])) > .b-fx, .hero-b.column-in:not(:has(.hero-b-plate[data-clip="editions"])) > .b-scorch, .hero-b:has(.hero-b-plate[data-clip="figures"]) > .b-fx, /* plate left, field RIGHT */ .hero-b.column-in:has(.hero-b-plate[data-clip="editions"]) > .b-fx, /* ── HERO BURN: MASK DRIVEN BY THE PLATE'S MEASURED EDGES ──────────────── A CSS-only mask built from the plate's calc() is not safe: a later rule re-sets left:0 !important at some widths, so the plate can be full-bleed while the mask still carves a field - putting the burn back on the film. The script below measures the plate and writes --field-l / --field-r onto the hero, so the mask always matches what is actually on screen, in every clip state and at every breakpoint. When the plate covers the frame both are 0 and the burn is simply not drawn. * /* ── HERO BURN: FLUSH TO THE FILM, AND QUIETER ─────────────────────────── (1) THE BLACK MARGIN. The mask faded to transparent over 1.5rem BEFORE the plate edge, so the burn died just short of the film and left a dark strip running down beside it. The plate covers that boundary, so the cut can be hard: the mask is now opaque right up to the plate edge and stops dead there. The burn runs flush to the picture with no gap. (2) INTENSITY. Filling the whole field at section strength was too much - a section's glow is spread over a wide band, where the hero's field is a narrow column, so the same alphas concentrate. Peak drops 0.60 -> 0.34 and the body of the wash 0.26 -> 0.13, anchored at the outer edge so it reads as light entering the frame rather than a flat tint over the panel. * .hero-b > .b-fx, /* when the field is on the LEFT the light enters from the left edge instead * /* ── SPACE UNDER CAPABILITIES ──────────────────────────────────────────── The gap itself was not the outlier - section-to-section gaps run 164-217px across the page and this one measured 171. What makes it read as too much is the grid above it: the last row carries only two of three columns, so an empty third sits directly on top of the padding and the two merge into one void. The shared rhythm stays untouched; only this section's own bottom padding comes down, 80px -> 40px, which closes the gap to roughly 130 and puts the ragged row closer to the heading that follows. */ #capabilities { padding-bottom: 40px !important; } /* ── WORDMARK: FURTHER LEFT, LESS BRIGHT ───────────────────────────────── It sat at x=96, flush with the nav's own padding. A negative margin moves it out to 74 without disturbing the nav's space-between, so the links on the right stay exactly where they are. Brightness: the asset is pure white, sitting beside links at #C8C1B3, so it read as the brightest thing in the bar. At 0.82 it lands close to the links in value while staying the lightest mark there - and it returns to full on hover, so it still behaves like the control it is. */ nav .nav-logo { margin-left: -22px; transition: opacity 0.3s ease; } nav .nav-wordmark { opacity: 0.82; transition: opacity 0.3s ease; } nav .nav-logo:hover .nav-wordmark, nav .nav-logo:focus-visible .nav-wordmark { opacity: 1; } /* ── PULL QUOTE: ONE PHRASE LIT ────────────────────────────────────────── The whole quote in the accent made it a block of colour rather than an emphasis - nothing inside it was being pointed at. The sentence turns on its last clause, so that is the only part that carries the accent and the rest returns to the display colour. Markup: a span wraps the existing words. No copy changes - the same sentence, split so the clause can be addressed. */ .why-pullquote { color: var(--b-type) !important; } .why-pullquote .pq-lit { color: var(--b-acc) !important; } /* ── ASK AUTEUR ORB ────────────────────────────────────────────────────── Three glows were stacking on a 20px dot: a box-shadow I added (12px/0.65) on top of the original ::before (11px/0.4) and ::after (15px/0.5). The original already carried its own glow, so mine was pure duplication - and three overlapping halos on a small bright fill is what blew it out. Mine is removed, the two originals come down to roughly half, and the fill drops one step off full accent so the dot reads as lit rather than white- hot. It still brightens on hover, so it keeps its live quality. */ nav .nav-ask-orb { background: #EE7A33 !important; box-shadow: none !important; transition: background 0.3s ease, box-shadow 0.3s ease; } nav .nav-ask-orb::before { box-shadow: 0 0 7px rgba(255,140,66,0.22) !important; } nav .nav-ask-orb::after { box-shadow: 0 0 10px rgba(255,140,66,0.26) !important; } nav .nav-ask:hover .nav-ask-orb { background: var(--b-acc) !important; box-shadow: 0 0 10px rgba(255,140,66,0.45) !important; } /* ── ASK AUTEUR ORB, REDESIGNED ────────────────────────────────────────── A blurred dot said nothing. The agent is a thing you send a question into and get an answer back from, so it is drawn as a signal: a solid core with clean concentric rings, and a pulse travelling outward. The rings are hard-stopped colour stops in a radial-gradient, not shadows - blur is what washed the old one out, and stops give a crisp line at any scale. The box stays 20x20 so nothing in the bar shifts; everything is painted inside it. Two pulse rings run on the same loop offset by half, so a new one leaves as the previous one fades. */ nav .nav-ask-orb { position: relative; width: 20px; height: 20px; border-radius: 50%; background: none !important; box-shadow: none !important; background-image: radial-gradient(circle at 50% 50%, #FF8C42 0 2.6px, transparent 2.6px 4.6px, rgba(255,140,66,0.55) 4.6px 5.5px, transparent 5.5px 7.6px, rgba(255,140,66,0.28) 7.6px 8.4px, transparent 8.4px) !important; transition: background-image 0.3s ease; } nav .nav-ask-orb::before, nav .nav-ask-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,140,66,0.55); box-shadow: none !important; background: none !important; opacity: 0; animation: ask-ping 3s cubic-bezier(0.22,0.72,0.16,1) infinite; } nav .nav-ask-orb::after { animation-delay: 1.5s; } @keyframes ask-ping { 0% { transform: scale(0.42); opacity: 0; } 12% { opacity: 0.75; } 100% { transform: scale(2.1); opacity: 0; } } /* hover: the core brightens and the rings firm up - the signal gets stronger */ nav .nav-ask:hover .nav-ask-orb { background-image: radial-gradient(circle at 50% 50%, #FFB07A 0 2.8px, transparent 2.8px 4.6px, rgba(255,176,122,0.8) 4.6px 5.6px, transparent 5.6px 7.6px, rgba(255,176,122,0.45) 7.6px 8.5px, transparent 8.5px) !important; } nav .nav-ask:hover .nav-ask-orb::before, nav .nav-ask:hover .nav-ask-orb::after { border-color: rgba(255,176,122,0.75); } /* a pulse is decoration, so it stops entirely when motion is not wanted - the rings remain, which is where the meaning is */ @media (prefers-reduced-motion: reduce) { nav .nav-ask-orb::before, nav .nav-ask-orb::after { animation: none; opacity: 0.4; transform: scale(1.5); } } /* the pulse border was resolving to a pale peach - an original rule on this pseudo outranked it, and that colour is one of the washed-out oranges the re-hue produced. Pinned to the accent. */ nav .nav-ask-orb::before, nav .nav-ask-orb::after { border-color: rgba(255,140,66,0.6) !important; border-width: 1px !important; border-style: solid !important; } nav .nav-ask:hover .nav-ask-orb::before, nav .nav-ask:hover .nav-ask-orb::after { border-color: rgba(255,176,122,0.8) !important; } /* ── HEADER HIERARCHY ──────────────────────────────────────────────────── Navigation returns to warm grey at rest and moves to the accent on rollover, which is the same gesture the side rail and the section titles already make - hovering means one thing everywhere on the page. Ask Auteur is the exception because it is not navigation: it is the one item that answers you. It stays at the accent at rest and BRIGHTENS on rollover rather than changing hue. Not reversed - going grey on hover would read as switching off, which is backwards for the only live element in the bar. The rule is that everything moves TOWARDS the accent; Ask Auteur is already there, so it goes further. Its orb already behaves exactly this way, so the label now matches its own icon. To revert: delete this block and the bar returns to all-accent. */ nav .nav-links > li > a, nav .nav-lang, nav .nav-lang a { color: var(--b-body) !important; transition: color 0.25s ease; } nav .nav-links > li > a:hover, nav .nav-links > li > a:focus-visible, nav .nav-lang a:hover { color: var(--b-acc) !important; } nav .nav-lang .current { color: var(--b-type) !important; } nav .nav-lang .sep { color: var(--b-meta) !important; } /* the exception */ nav .nav-ask .nav-ask-label { color: var(--b-acc) !important; } nav .nav-ask:hover .nav-ask-label, nav .nav-ask:focus-visible .nav-ask-label { color: #FFB07A !important; } /* ── HERO FIELD: FOUR CASES, NOT TWO ───────────────────────────────────── The mask only looked for a field to the LEFT or RIGHT of the plate. On mobile the plate stacks full-width and the dark field is BELOW it, so the hero carried no burn at all on a phone. The script now classifies the field and writes data-field on the hero; each case gets its own mask. 'none' means the plate covers the frame and nothing is drawn, which is still the rule: never on the film. * /* stacked: the light enters from the top-left of the text block, where the film ends - so it reads as the same event continuing past the frame edge * /* ── MOBILE MENU: THE OPEN PANEL NEEDS A GROUND ────────────────────────── The glass header is right for a bar sitting over the film, but when the menu expands it becomes a full panel of links - and transparent over bright footage they were unreadable. Keyed off the toggle's own aria-expanded rather than a class name, so it holds whatever the script calls the open state. Nearly opaque rather than glass: a menu is a surface you read, not a bar you look past. */ nav:has(.nav-toggle[aria-expanded="true"]) { background: color-mix(in srgb, var(--b-ground) 97%, transparent) !important; -webkit-backdrop-filter: blur(18px) saturate(130%) !important; backdrop-filter: blur(18px) saturate(130%) !important; border-bottom-color: var(--b-rule) !important; } nav:has(.nav-toggle[aria-expanded="true"]) .nav-links > li > a { color: var(--b-type) !important; } nav:has(.nav-toggle[aria-expanded="true"]) .nav-links > li > a:hover, nav:has(.nav-toggle[aria-expanded="true"]) .nav-ask .nav-ask-label { color: var(--b-acc) !important; } nav:has(.nav-toggle[aria-expanded="true"]) .nav-lang a { color: var(--b-body) !important; } /* The open menu's