/* ========================================================================= tokens.css — Design system for the Spirit One site All visual constants live here. Re-brand by editing this file only. ========================================================================= */ :root { /* ---- Brand palette (monochrome — black/white, Plasma-style) ---------- NOTE: the variable names keep the "--orange*" names from the original build for minimal churn, but the VALUES are now near-black / grey. This is the single place to re-tint the whole site. */ --orange: #0a0a0a; /* primary ink / accent (buttons, links, text) */ --orange-900: #0a0a0a; /* primary text on light */ --orange-25: #f4f4f5; /* lightest tint — light section backgrounds */ --blue: #4984ef; /* secondary accent (kept for occasional use) */ --white: #ffffff; --black: #000000; /* Dark section surfaces */ --surface-dark: #0b0b0d; /* near-black — hero, media hero */ --surface-dark-soft: #1a1a1a; /* dark grey — walkthrough, testimonials */ /* Deliberate pops of colour the user wants to keep */ --card-accent: #f73b20; /* the payment-card placeholder stays colourful */ /* Add / Send / Exchange tagline icons carry their own inline --color (green/blue/red) in the markup, so they stay colourful automatically. */ /* Snippet/card accent borders used in the hero (kept from source) */ --accent-peru: peru; --accent-royal: #4169e1; --accent-salmon: salmon; --accent-plum: plum; --accent-lime: #32cd32; /* Semantic aliases — sections reference these, not raw hex */ --color-text: var(--orange-900); --color-bg: var(--white); --color-bg-alt: var(--orange-25); --color-bg-invert: var(--surface-dark); --color-accent: var(--orange); /* ---- Typography ------------------------------------------------------- */ /* Sequel Sans is proprietary and not shipped. Schibsted Grotesk is the closest free grotesque. Swap --font-display/-text to re-brand type. */ --font-display: "Schibsted Grotesk", "Sequel Sans", system-ui, sans-serif; --font-text: "Schibsted Grotesk", "Sequel Sans", system-ui, sans-serif; --fw-regular: 400; --fw-book: 450; --fw-medium: 500; --fw-semi: 600; /* Fluid type scale (exact clamp() values from source) */ --title-1: clamp(56px, 19.067px + 100vw * .0947, 180px); /* line-height .9 */ --title-2: clamp(48px, 26.55px + 100vw * .055, 120px); /* line-height 1 */ --title-3: clamp(40px, 28.105px + 100vw * .0305, 80px); --title-4: clamp(32px, 22.484px + 100vw * .0244, 64px); --title-5: clamp(27px, 20.76px + 100vw * .016, 48px); --body: 16px; --body-small: 12px; /* ---- Radii ------------------------------------------------------------ */ --radius: 20px; --radius-sm: 12px; --radius-card: clamp(16px, 11.242px + 100vw * .0122, 24px); /* ---- Grid (16-col fluid, exact from source) --------------------------- */ --100vw: 100vw; --grid-columns: 16; --grid-gap: clamp(4px, -1.967px + 100vw * .0153, 24px); --grid-half-gap: calc(var(--grid-gap) * .5); --grid-margin: clamp(16px, 2.896px + 100vw * .0336, 60px); --grid-padding: calc(var(--grid-margin) - var(--grid-gap) * .5); --grid-width: calc(var(--100vw) - var(--grid-margin) * 2); /* ---- Fixed spacing scale (px) ----------------------------------------- */ --2: 2px; --4: 4px; --6: 6px; --8: 8px; --10: 10px; --12: 12px; --14: 14px; --16: 16px; --20: 20px; --24: 24px; --32: 32px; --40: 40px; --44: 44px; --48: 48px; --60: 60px; --64: 64px; --80: 80px; --96: 96px; --120: 120px; --140: 140px; --280: 280px; /* ---- Responsive spacing pairs --{desktopMax}-{mobileMin} (exact) ------ */ --8-4: clamp(4px, 2.791px + 100vw * .0031, 8px); --12-8: clamp(8px, 6.791px + 100vw * .0031, 12px); --16-8: clamp(8px, 5.621px + 100vw * .0061, 16px); --16-12: clamp(12px, 10.791px + 100vw * .0031, 16px); --20-8: clamp(8px, 4.412px + 100vw * .0092, 20px); --20-16: clamp(16px, 14.791px + 100vw * .0031, 20px); --24-8: clamp(8px, 3.242px + 100vw * .0122, 24px); --24-12: clamp(12px, 8.412px + 100vw * .0092, 24px); --24-16: clamp(16px, 13.621px + 100vw * .0061, 24px); --32-16: clamp(16px, 11.242px + 100vw * .0122, 32px); --32-24: clamp(24px, 21.621px + 100vw * .0061, 32px); --40-20: clamp(20px, 14.033px + 100vw * .0153, 40px); --40-32: clamp(32px, 29.621px + 100vw * .0061, 40px); --48-8: clamp(8px, -3.895px + 100vw * .0305, 48px); --48-24: clamp(24px, 16.863px + 100vw * .0183, 48px); --48-32: clamp(32px, 27.242px + 100vw * .0122, 48px); --60-16: clamp(16px, 2.896px + 100vw * .0336, 60px); --60-24: clamp(24px, 13.275px + 100vw * .0275, 60px); --64-24: clamp(24px, 12.105px + 100vw * .0305, 64px); --64-32: clamp(32px, 22.484px + 100vw * .0244, 64px); --64-40: clamp(40px, 32.863px + 100vw * .0183, 64px); --64-48: clamp(48px, 43.242px + 100vw * .0122, 64px); --80-32: clamp(32px, 17.726px + 100vw * .0366, 80px); --80-40: clamp(40px, 28.105px + 100vw * .0305, 80px); --80-48: clamp(48px, 38.484px + 100vw * .0244, 80px); --80-60: clamp(60px, 54.033px + 100vw * .0153, 80px); --80-64: clamp(64px, 59.242px + 100vw * .0122, 80px); --96-32: clamp(32px, 12.929px + 100vw * .0489, 96px); --96-48: clamp(48px, 33.726px + 100vw * .0366, 96px); --108-64: clamp(64px, 50.896px + 100vw * .0336, 108px); --120-16: clamp(16px, -14.966px + 100vw * .0794, 120px); --120-32: clamp(32px, 5.792px + 100vw * .0672, 120px); --120-48: clamp(48px, 26.55px + 100vw * .055, 120px); --120-64: clamp(64px, 47.347px + 100vw * .0427, 120px); --120-80: clamp(80px, 68.105px + 100vw * .0305, 120px); --120-96: clamp(96px, 88.863px + 100vw * .0183, 120px); --136-64: clamp(64px, 47.347px + 100vw * .0427, 120px); --144-32: clamp(32px, -1.345px + 100vw * .0855, 144px); --144-48: clamp(48px, 19.413px + 100vw * .0733, 144px); --180-48: clamp(40px, -1.691px + 100vw * .1069, 180px); --180-64: clamp(64px, 29.485px + 100vw * .0885, 180px); --180-120: clamp(120px, 100.344px + 100vw * .0504, 186px); --186-64: clamp(64px, 27.691px + 100vw * .0931, 186px); --186-96: clamp(96px, 69.207px + 100vw * .0687, 186px); --216-80: clamp(80px, 39.518px + 100vw * .1038, 216px); --216-140: clamp(140px, 117.38px + 100vw * .058, 216px); --240-96: clamp(96px, 53.139px + 100vw * .1099, 240px); --280-120: clamp(120px, 72.381px + 100vw * .1221, 280px); /* ---- Motion ----------------------------------------------------------- */ --ease-out-quint: cubic-bezier(.215, .61, .355, 1); --ease-out-quart: cubic-bezier(.165, .84, .44, 1); --ease-in-out: cubic-bezier(.2, 0, 0, 1); --dur-fast: .2s; --dur: .3s; --dur-slow: .5s; /* ---- Layout ----------------------------------------------------------- */ --header-height: 80px; --z-header: 100; --z-menu: 200; } /* Breakpoints used throughout (for reference, matching source): --max 743px : phone --max 1023px : tablet --max 1290px : small desktop --min 2000px : large desktop (switches some px scale to vw) */