/* tphDDB × Red Bull MOBILE — tokens Values measured from the Claude Design artboards (artboards/hero-artboards.dc.html). Change values HERE, never inline. */ :root{ /* ---- colour ---- */ --navy: #011235; /* Red Bull MOBILE — hero ground only */ --paper: #FCFBF3; /* page ground */ --ink: #0E0E0E; /* text */ --rule: #D9D5C3; /* hairlines on paper */ --muted: #8A8672; /* meta text on paper */ --signal: #DD003E; /* Red Bull MOBILE red. SAMPLED from the supplied official lockup (RBMOBILE_..._SideBySide_RGBp), 2026-09-01. Was #DB0A40, which was close but not theirs. This is the accent: connection lines, links. */ /* Their other official colours, sampled from the same lockup. Recorded so nobody re-derives them from a screenshot; only --signal is in use. */ --rbm-grey: #626262; /* the MOBILE wordmark */ --rbm-blue: #002D62; /* the wave inside the O */ --rbm-yellow: #FFD500; /* the sun */ --rbm-orange: #F39100; --yellow: #FBD10D; /* DDB — SIM contact pad ONLY, one use per screen. SETTLED: PMS 108 U, "the core of DDB identity". Used by every hand-authored stylesheet across sab-website, tphddb-website-v2 and sirar. The FFC500 inside ddb-logo.svg is a drifted artwork export — the same trap as SAB's FF030E red. Change this and --yellow-rgb together. */ --yellow-rgb: 251,209,13; /* same value, for rgba() fades in the hero sequence */ /* ---- DDB palette (guidelines p.18, verbatim) ---- The agency's own voice. Used at AGENCY MOMENTS ONLY — the dividers, the signature — never in UI chrome, where --signal (Red Bull MOBILE's red) leads. Same rule the SAB site runs. */ --ddb-red: #EE3E40; /* PMS 1788 U */ --ddb-black: #241F21; /* PMS Process Black U */ --ddb-gray: #CCCECE; /* Cool Gray 2 U */ --ddb-green: #BAE0C2; /* PMS 573 U */ --ddb-blue: #99BAC2; /* PMS 551 U */ /* ---- the fan spectrum ---- Sampled straight out of img/ddb-b-fan.png, the supplied fanned lockup — these are the six petal colours, not invented iridescence. Used for the emotion signal in section 03 and nowhere else. */ --fan-1: #FFFD16; --fan-2: #F16500; --fan-3: #FE1D17; --fan-4: #EE84D1; --fan-5: #382799; --fan-6: #168DB8; --on-navy: rgba(252,251,243,1); --on-navy-soft: rgba(252,251,243,.72); --on-navy-faint: rgba(252,251,243,.42); --grid-on-navy: rgba(255,255,255,.09); --grid-on-paper: rgba(14,14,14,.07); --meta-on-paper: rgba(14,14,14,.52); /* ---- type ---- */ --display: Archivo, Helvetica, sans-serif; /* var settings: 'wdth' 78,'wght' 800 */ --body: 'Libre Franklin', Helvetica, Arial, sans-serif; --mono: 'IBM Plex Mono', monospace; /* Fluid display scale. 6.1vw resolves to exactly 88px at 1440 — the value measured from the artboards — and keeps growing past it so wide screens do not leave the headline stranded in negative space. */ /* Sized so the two nowrap lines clear the fanned lockup with a clean gutter. Was 6.1vw (=88px at 1440, the artboard value) when the hero had the full width to itself; the lockup now takes the right column, so the type steps down to keep the gutter rather than crowd the logo. */ --hero-size: clamp(46px, 4.9vw, 106px); --logo-w: clamp(128px, 13vw, 230px); /* vw-based, so the gutter holds at every width */ --logo-gutter: 64px; --hero-leading: .94; --hero-track: -.005em; --meta-size: 11px; --meta-size-m: 9px; --meta-track: .26em; --meta-track-m: .24em; --cue-size: 11px; --cue-size-m: 9px; --cue-track: .30em; --cue-track-m: .28em; /* The opening cluster. Measured at 1440 in the artboards and never scaled, which left it a speck on large screens. Now fluid, and bigger. */ --searching-size: clamp(11px, 1.02vw, 20px); --searching-track: .34em; --hint-size: clamp(9px, .78vw, 15px); --sig-bar-w: clamp(9px, .78vw, 16px); /* navy signal glyph */ --sig-gap: clamp(5px, .42vw, 9px); --sig-h: clamp(34px, 3.4vw, 66px); /* the tallest bar */ --city-size: 12px; --city-track: .22em; /* Kingdom */ --city-size-far: 9.5px; --city-track-far: .18em; /* world */ /* ---- geometry ---- */ --sim-w: 120px; --sim-h: 80px; /* SIM card */ --sim-notch: 22px; /* cut corner; inner fill uses 21px */ /* the same notch expressed proportionally, so any box can take the SIM silhouette at any size: 22/120 across, 22/80 down */ --sim-notch-x: 18.34%; --sim-notch-y: 27.5%; --sim-edge-w: 5px; /* the card edge on a case tile */ --sim-edge: var(--paper); /* solid, not translucent — reads as a SIM */ --pad-w: 76px; --pad-h: 44px; /* contact pad — fills yellow on reveal */ --pad-off-x: 22px; --pad-off-y: 26px; /* pad's offset inside the SIM. Anything that must sit ON the pad uses these — centring on the SIM instead puts it 9px high, which is a real bug fixed. */ --bar-w: 7px; --bar-gap: 5px; /* signal bars, paper: h 8/14/20/26 */ --bar-w-dark: 9px; /* signal bars, navy: h 10/18/26/34 */ /* network rings on artboard 2, measured from SIM centre (720,450) */ --ring-kingdom: 213px 250px; /* six names, hexagonal, mono 12px, full white */ --ring-world: 492px 576px; /* eight names, mono 9.5px, white 72% */ /* the ~242px of nothing between them is load-bearing — do not fill it */ /* ---- the contact-pad grid, which IS the page grid ---- */ --grid-cols: 6; --grid-rows: 4; /* desktop */ --grid-cols-m: 4; --grid-rows-m: 6; /* mobile */ /* ---- motion ---- */ --dur-fast: 180ms; --dur-mid: 320ms; --dur-slow: 620ms; --ease: cubic-bezier(.22,.61,.36,1); /* ease-out */ --seq-scroll: 300vh; /* how much scrolling scrubs the hero sequence (3x) */ --pad-x-m: 24px; --pad-x-d: 100px; /* horizontal padding, exposed so absolutely-placed items (the fanned lockup) align to the type column */ --band-top: clamp(48px,6vh,76px); /* where the first PTM band pins; the rest are offset from it in JS */ --sec-pad-m: 72px 24px 88px; /* section padding */ --sec-pad-d: clamp(88px,9vw,140px) 100px clamp(96px,10vw,160px); --pad-desktop: 84px 100px 64px; --pad-mobile: 56px 24px 32px; } /* The SEARCHING… pulse, straight from the artboards */ @keyframes searchpulse{ 0%,100%{opacity:.34} 50%{opacity:.72} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none!important; transition:none!important } }