/* ========================================================================== OpenClicks Design System — tokens Source of truth for the marketing site and the product UI. Full Frame Marketing Inc., operating as OpenClicks. ========================================================================== PALETTE ROTATION The marketing site ships four complete palettes and picks one per visit (held in sessionStorage, never the same one twice in a row). Every colour below that varies by palette is exposed as a CSS custom property set on at runtime — see palette-rotation.js. For the PRODUCT UI, pick ONE palette and set it statically. "lime" is the default. Do not hardcode the hex values; always read the variables, so a later brand change is a one-line edit. ========================================================================== */ :root { /* ---- Palette-dependent (set at runtime by palette-rotation.js) ------- */ --acc: #C9F24D; /* primary accent — buttons, highlights, active */ --acc-rgb: 201,242,77; /* same accent as raw channels, for rgba() */ --acc-hover: #D8F97A; /* accent hover */ --chart: #8FBF2A; /* data-viz line on light surfaces */ --tint-a: #F4F7EE; /* primary tinted section band */ --tint-b: #FFF8EC; /* secondary (warm) tinted section band */ --hero: #F7FAF3; /* top of the hero gradient */ --base: #FFFFFF; /* page background */ --ink: #12181A; /* primary text + dark surfaces */ --ink2: #2A3330; /* dark surface hover / hairline on dark */ --ink3: #333B37; /* body text on light, slightly softened */ --soft: #EAF7D2; /* accent-tinted chip background */ --deep: #4F7A15; /* accessible accent for text/icons on light */ /* ---- Fixed neutrals (identical across all four palettes) ------------- */ --text-body: #4C5652; /* default paragraph on light */ --text-muted: #5B645E; /* secondary paragraph, card body */ --text-subtle: #6E7872; /* eyebrow labels, meta */ --text-faint: #8B948C; /* timestamps, mono meta */ --text-on-dark: #A9B3AA; /* paragraph on --ink surfaces */ --text-on-dark-2: #8E998F; /* muted meta on --ink surfaces */ --surface-card: #FFFFFF; --surface-inset: #FBFCF9; /* inset panels inside white cards */ --border: #EAEBE4; /* default card border on white */ --border-2: #E4E7DC; /* card border on tinted bands */ --border-3: #E2E6DA; /* pill / chip border */ --border-header: #EDEEE9; /* header + subnav hairline */ --border-dark: #232B27; /* hairline on --ink surfaces */ /* ---- Semantic accents (fixed; used for icon chips + data states) ----- */ --chip-green-bg: #E0F4EC; --chip-green-fg: #1F6B52; --chip-amber-bg: #FDF0D8; --chip-amber-fg: #A9711B; --chip-blue-bg: #E7EEF9; --chip-blue-fg: #2B5288; --chip-coral-bg: #FFE4D6; --chip-coral-fg: #A9491F; --chip-violet-bg: #F1EEF9; --chip-violet-fg: #574388; --pos: #3F6A0F; /* good / increase */ --neg: #A9491F; /* bad / decrease */ /* ---- Type ------------------------------------------------------------ */ --font-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, monospace; /* Display / headline scale — always paired with tight tracking. Marketing headings are fluid; product headings use the static value. */ --fs-h1: clamp(38px, 5vw, 78px); --lh-h1: .99; --ls-h1: -.042em; --fs-h2: clamp(34px, 4vw, 56px); --lh-h2: 1; --ls-h2: -.042em; --fs-h3: clamp(26px, 2.8vw, 36px); --lh-h3: 1.06; --ls-h3: -.04em; --fs-card-title: 20px; --lh-card-title: 1.2; --ls-card-title: -.03em; --fs-lead: 18.5px; --lh-lead: 1.6; --fs-body: 16px; --lh-body: 1.6; --fs-body-sm: 15px; --lh-body-sm: 1.6; --fs-meta: 13.5px; --lh-meta: 1.5; --fs-mono: 11.5px; --ls-mono: .06em; /* uppercase mono labels */ --fs-eyebrow: 12px; --ls-eyebrow: .16em; /* uppercase section labels */ --fw-body: 400; --fw-medium: 500; --fw-semi: 600; --fw-strong: 650; /* buttons, nav active */ --fw-heavy: 750; /* card titles */ --fw-display: 800; /* h1 / h2 */ /* ---- Spacing (4px base; these are the values actually in use) -------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-28: 112px; --section-y: 96px; /* standard vertical section rhythm */ --section-y-lg: 110px; /* marketing sections with a lot of content */ --gutter: 32px; /* page horizontal padding */ --maxw: 1240px; /* standard content max-width */ --maxw-narrow: 860px; /* long-form / legal max-width */ /* ---- Radii ----------------------------------------------------------- */ --r-sm: 9px; /* small icon tiles, inline buttons */ --r-md: 14px; /* list rows, inset panels */ --r-lg: 18px; /* inner panels, alert strips */ --r-xl: 22px; /* standard card */ --r-2xl: 26px; /* feature panel, modal */ --r-pill: 999px; /* every button, chip and badge */ /* ---- Elevation ------------------------------------------------------- */ --sh-chip: 0 4px 14px -8px rgba(18,24,26,.2); --sh-card: 0 24px 44px -28px rgba(18,24,26,.3); /* card hover only */ --sh-panel: 0 34px 66px -40px rgba(18,24,26,.3); /* product mock panels */ --sh-modal: 0 60px 120px -50px rgba(0,0,0,.6); /* ---- Motion ---------------------------------------------------------- */ --ease-out: cubic-bezier(.22,1,.36,1); /* reveals, page-level motion */ --ease-pop: cubic-bezier(.34,1.56,.64,1); /* icon tilt, success pop */ --dur-fast: .2s; /* colour + border transitions */ --dur-mid: .3s; /* card lift, arrow nudge */ --dur-slow: .7s; /* scroll reveal */ /* ---- Layout constants ------------------------------------------------ */ --header-h: 74px; --subnav-top: 74px; /* sticky sub-nav sits directly under header */ --anchor-offset: 132px; /* scroll-margin-top when both bars are present */ --z-header: 60; --z-subnav: 50; --z-modal: 200; } /* ========================================================================== The other three palettes, for reference. palette-rotation.js writes these same properties onto at runtime. To pin the product to one palette, copy one block into :root above and delete the script. ========================================================================== */ /* butter */ [data-palette="butter"] { --acc: #FFD84D; --acc-rgb: 255,216,77; --acc-hover: #FFE47A; --chart: #D8A800; --tint-a: #FAF7EC; --tint-b: #F2F6EE; --hero: #FDFAF0; --base: #FFFDF8; --ink: #14120C; --ink2: #2E2A1E; --ink3: #332F22; --soft: #FBF0CE; --deep: #8A6A0B; } /* aqua */ [data-palette="aqua"] { --acc: #6FE3CB; --acc-rgb: 111,227,203; --acc-hover: #93EDDA; --chart: #17A98C; --tint-a: #EEF7F5; --tint-b: #FFF6EC; --hero: #F2FAF8; --base: #FBFDFC; --ink: #0C1614; --ink2: #22322E; --ink3: #28352F; --soft: #D8F3EC; --deep: #12735E; } /* coral */ [data-palette="coral"] { --acc: #FF9A6B; --acc-rgb: 255,154,107; --acc-hover: #FFB08A; --chart: #E2673A; --tint-a: #FFF4EF; --tint-b: #F3F6EE; --hero: #FFF7F3; --base: #FFFDFB; --ink: #1A1310; --ink2: #332721; --ink3: #38291F; --soft: #FFE4D6; --deep: #A9491F; } /* ========================================================================== Base ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* `clip` rather than `hidden`: hidden makes these a scroll container, and position: sticky does not work inside one — it silently broke both the header and the Features sub-nav. clip does the same clipping without the scrollport. The elements that actually overflow (.oc-marquee, .oc-cta-dark) contain themselves anyway, so this is only a backstop. */ html, body { overflow-x: clip; max-width: 100%; } body { margin: 0; background: var(--base); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } a { color: var(--ink); text-decoration: none; } /* :where() keeps the pseudo-class out of the specificity sum, so this stays a default for prose links only. Written as `a:hover` it outranked every component class and repainted button and chip labels in --deep on hover — a dark accent on a dark pill, which made the primary CTA unreadable. */ a:where(:hover) { color: var(--deep); } ::selection { background: var(--acc); color: var(--ink); } /* ========================================================================== Keyframes used across the system ========================================================================== */ @keyframes ocPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } } @keyframes ocFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes ocMarquee{ from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes ocDash { to { stroke-dashoffset: -18; } } @keyframes ocFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ocPop { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }