/* ============================================================ NOBL — DESIGN TOKENS Transcribed from the brand manifest (css/brand-manifest.css, rendered at /brand). That file is the source of truth: if a value changes there, change it here. If a value isn't in either, it doesn't exist yet — decide it, then add it. Two inputs govern this system, and they govern different things: · the brand kit — radius, colour, type, borders, elevation, motion timing. All explicit, all NOBL's. · stripe.com — whitespace, rhythm, restraint. The kit documents no spacing scale at all, so the air is measured off Stripe instead. ============================================================ */ /* The display face. Uppercase by construction — a-z map to the same glyphs as A-Z, verified pixel-identical — so it can never be set in sentence case. Page H1s use the body face for that reason; everything else display is uppercase SA Triumph. */ @font-face { font-family: "SA Triumph"; src: url("../fonts/satriumph.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ---------- CANVAS & SURFACES ---------- Depth comes from stacked off-whites, never drop shadows. */ --bg: #FFFFFF; /* base */ --s2: #FAFBFC; /* raised */ --bg-deep: #F7F8F9; /* surface */ --s3: #F0F2F4; /* sunken */ --smoke: #141414; /* dark SURFACE — distinct from ink-as-text */ --panel: rgba(11,13,15,0.022); --panel-2: rgba(11,13,15,0.045); /* ---------- TEXT (contrast on #FFF noted) ---------- */ --text: #0B0D0F; /* headings 19.5:1 */ --body: #5F676C; /* paragraphs 5.8:1 */ --muted: #767C81; /* mono captions, meta 4.2:1 */ --faint: #9EA4A9; /* decorative telemetry only 2.5:1 */ --rule: #C9CED2; /* decorative hairlines */ /* ---------- SIGNAL ---------- Two blues with different jobs. Fiber Blue is 5.7:1, so it carries text and edges. NOBL Blue is 3.0:1 — it fills only. One signal per screen. */ --accent: #3E6B87; --accent-fill: #5B9DB5; --accent-soft: rgba(62,107,135,0.08); --accent-line: rgba(62,107,135,0.30); --accent-ink: #FFFFFF; /* ---------- EXTENDED ---------- Gold and NOBL Blue are FILLS. As text on light they fail — use --gold-ink and --accent instead. */ --gold: #D4A85A; --gold-soft: rgba(212,168,90,0.18); --gold-line: rgba(212,168,90,0.55); --gold-ink: #825E21; /* gold as text on light 5.9:1 */ --wolf: #CACACA; --red: #C86050; /* error/don't — fills, borders */ --red-ink: #B85440; /* error as text on white 4.8:1 */ /* Fiber Fade — the one gradient in the system. Hero frames. */ --fiber-fade-a: #5B9DB5; --fiber-fade-b: #3A6F95; --fiber-fade: linear-gradient(135deg, var(--fiber-fade-a) 0%, var(--fiber-fade-b) 100%); /* ---------- BORDERS — hairline only, two steps ---------- */ --stroke: rgba(11,13,15,0.08); --stroke-strong: rgba(11,13,15,0.14); /* On dark. The kit is light-first and has no dark ramp; this one survives because the product widgets — the OS mock, the territory map, the statement, the stub — stay dark on a light page, the way Stripe keeps its code blocks dark. */ --bw-08: rgba(255,255,255,0.08); --bw-10: rgba(255,255,255,0.10); --bw-14: rgba(255,255,255,0.14); --bw-18: rgba(255,255,255,0.18); --bw-25: rgba(255,255,255,0.25); --on-dark-heading: #FFFFFF; --on-dark-body: #B9BFC3; --on-dark-meta: #9AA1A6; --on-dark-mono: #7A8288; --on-dark-list: #E6E8EA; /* ---------- RADIUS ---------- Stripe's scale, measured off stripe.com: one button radius at every size. Never round past 8px, never scale the radius with the element. */ --r-icon: 2px; /* icon squares, list bullets */ --r-button: 4px; /* every button, chip, badge, input */ --r-card: 6px; /* cards, panels, frames, widgets */ --r-tile: 8px; /* tiles nested inside a card */ --r-full: 999px; /* dots, rings, avatars — circles only */ /* ---------- TYPEFACES — three, never a fourth ---------- */ --font-display: "SA Triumph", "Arial Narrow", Arial, sans-serif; --font-body: "Noto Sans", system-ui, -apple-system, sans-serif; --font-mono: "Space Mono", ui-monospace, "SF Mono", monospace; /* ---------- TYPE SCALE: display ---------- */ /* SA Triumph is a WIDE face — it sets appreciably larger than Archivo did at the same px, and uppercase adds to that. The display steps come down accordingly; the H1 is Noto Sans and doesn't need the same correction. */ --t-h1-hero: clamp(42px, 5.2vw, 74px); --t-h1-sub: clamp(36px, 4vw, 56px); --t-h2-major: clamp(27px, 2.9vw, 41px); --t-h2-minor: clamp(23px, 2.3vw, 32px); --t-h2-cta: clamp(29px, 3.5vw, 48px); --t-stat-big: clamp(36px, 4vw, 54px); --t-stat-med: 32px; --t-card-number: 46px; --t-quote: clamp(22px, 2.5vw, 32px); /* ---------- TYPE SCALE: body ---------- */ --t-hero-sub: clamp(16px, 1.4vw, 19px); --t-intro: 17px; --t-body: 15px; --t-card: 14.5px; --t-card-title: 19px; --t-step-title: 20px; --t-nav: 13px; --t-btn: 15px; --t-btn-sm: 13.5px; --t-footer-link: 13.5px; /* ---------- TYPE SCALE: mono ---------- Space Mono runs narrower with a larger x-height than Martian did, so these sit a touch above the old values to keep the same optical size. */ --t-eyebrow: 10.5px; --t-label: 10.5px; --t-chip: 10px; --t-meta: 9.5px; /* ---------- TRACKING ---------- SA Triumph is ALWAYS positive. The old negative tracking belonged to Archivo and is gone. */ --tr-display: 0.02em; /* every SA Triumph heading */ --tr-h1: -0.02em; /* Noto Sans page H1 only */ --tr-eyebrow: 0.26em; --tr-label: 0.14em; --tr-chip: 0.08em; --tr-meta: 0.16em; /* ---------- LINE HEIGHT ---------- */ --lh-display: 1; --lh-h1: 1.04; /* the Noto Sans H1 needs more than 1 */ --lh-quote: 1.3; --lh-intro: 1.6; --lh-body: 1.55; /* ---------- LAYOUT ---------- */ --page-max: 1180px; --page-pad: 32px; --header-pad: 24px; --header-h: 64px; /* ---------- SECTION RHYTHM ---------- The kit's flat 90px is for a dense reference sheet. A marketing page breathes more than a spec sheet, so the three-step rhythm stays and the air is Stripe's, not the manifest's. */ --sec-lg: 128px; --sec-md: 104px; --sec-sm: 80px; --sec-strip: 26px; /* ---------- SPACING ---------- */ --gap-card: 24px; --gap-col: 64px; --gap-col-lg: 72px; --gap-chip: 12px; --pad-card-sm: 26px; --pad-card: 30px 28px 28px; --pad-card-lg: 36px; /* ---------- ELEVATION ---------- Depth from tint. The only shadows left are for a dark product widget genuinely floating above a light page, and the hero mark, which is artwork rather than an interface surface. */ --sh-mock: 0 40px 80px -44px rgba(11,13,15,0.45); --sh-on-dark: 0 30px 70px -40px rgba(0,0,0,0.7); --sh-mark: drop-shadow(0 40px 50px rgba(11,13,15,0.28)) drop-shadow(0 6px 10px rgba(11,13,15,0.18)); /* ---------- MOTION — fast, not cute ---------- No bounces, springs or parallax. */ --ease-out: ease; --ease-build: ease; --d-fast: .2s; /* hover */ --d-btn: .2s; --d-card: .2s; --d-state: .25s; --d-reveal: .35s; /* was .9s */ --d-grow: .5s; } /* Desktop-first rhythm compresses on small screens */ @media (max-width: 900px) { :root { --sec-lg: 80px; --sec-md: 68px; --sec-sm: 56px; --gap-col: 40px; --gap-col-lg: 44px; --gap-card: 18px; --page-pad: 20px; --header-pad: 18px; } }