/* Bergamot Design System v3.5.0 — generated by bin/build.mjs. DO NOT EDIT. */ /* ===== tokens/fonts.css ===== */ /* ════════════════════════════════════════════════════════════ Bergamot — Webfonts (self-hosted) The brand's faces ship from our own assets/fonts/ — no third-party font host, so visitors are never announced to Google and first paint never waits on a foreign origin. Latin subsets; variable files where the family ships one. Two pairings: · Schibsted Grotesk (upright + italic) — the canonical voice, and the only text face · Bodoni Moda (display) + Archivo (text) — an alternate register The logotype is set separately in Idiqlat (an open-source SIL face, used here for its Latin glyphs; ExtraLight/Light/Regular are static files); see --font-logotype in typography.css. Paths are written relative to tokens/ for the repo's own preview; bin/build.mjs rewrites them to sit beside the vendored bundle. ════════════════════════════════════════════════════════════ */ @font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url("assets/fonts/schibsted-grotesk-latin.woff2") format("woff2")} @font-face{font-family:"Schibsted Grotesk";font-style:italic;font-weight:400 900;font-display:swap;src:url("assets/fonts/schibsted-grotesk-italic-latin.woff2") format("woff2")} @font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url("assets/fonts/bodoni-moda-latin.woff2") format("woff2")} @font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url("assets/fonts/bodoni-moda-italic-latin.woff2") format("woff2")} @font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("assets/fonts/archivo-latin.woff2") format("woff2")} @font-face{font-family:"Idiqlat";font-style:normal;font-weight:200;font-display:swap;src:url("assets/fonts/idiqlat-extralight-latin.woff2") format("woff2")} @font-face{font-family:"Idiqlat";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/idiqlat-light-latin.woff2") format("woff2")} @font-face{font-family:"Idiqlat";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/idiqlat-latin.woff2") format("woff2")} /* ===== tokens/colors.css ===== */ /* ════════════════════════════════════════════════════════════ Bergamot — Color A warm, near-black world. Bone-white type on charcoal, hairline rules at low opacity, and a single living accent used sparingly — now seconded by a quieter companion hue that lives only in glows and washes, never in text or controls. Two independent axes. `data-theme` (dark · light) chooses the ground — dark is the default, light is the paper theme at the foot of this file. `data-mood` skins the dark world: (DEFAULT — the chosen theme: aubergine darks, warm-orange accent, a breath of mauve) (the original citrus gold-green) (cool, mineral silver) ════════════════════════════════════════════════════════════ */ /* Oxblood — the chosen theme. Aubergine darks, warm-orange accent, a breath of purple in the glows, and a deeper red reserved for the single largest italic word on a page. */ :root, :root[data-mood="oxblood"] { /* surfaces — deep aubergine, climbing toward the viewer */ --bg: #120910; /* page floor */ --bg-2: #1B0E15; /* alternate band / inset section */ --raise: #22141C; /* raised card / panel */ /* ink — warm bone white stepping down to dim */ --fg: #EFE6E2; /* primary text, wordmark */ --muted: #B0908C; /* secondary text, body copy */ --dim: #79585F; /* tertiary — indices, captions */ /* hairlines — never solid; always borrowed from the ink */ --line: rgba(239,230,226,.115); /* structural rules */ --line-2:rgba(239,230,226,.06); /* faint inner rules */ /* accent — the one living color. Warm orange. */ --accent: #DB9466; --accent-dim: rgba(219,148,102,.18); /* glows, washes, hover fields */ /* second accent — mauve. Atmosphere ONLY: the purple note in dual glows and the wash behind portraits. Never text. */ --accent-2: #9E78A6; --accent-2-dim: rgba(158,120,166,.17); /* deep accent — a redder oxblood for the page's single largest italic display word (e.g. the hero's "organisms"). */ --accent-deep: #C25A4B; /* domain accent — green. A third, TEXT-SAFE voice reserved for domain/category labels (_INNOVATION · _OPERATIONS · _COMMERCIAL), so the domains read as a family distinct from the traits, which keep the living accent. Kin to the canopy's foliage. Labels only — never a control colour, never body text. */ --green: #8FA867; --selection-bg: var(--accent); --selection-fg: var(--bg); } /* Nocturne — the original mood. Warm near-black, citrus gold-green. */ :root[data-mood="nocturne"] { --bg: #0A0E0C; --bg-2: #0F1411; --raise: #141A16; --fg: #E8E9E1; --muted: #8E968C; --dim: #5C645B; --line: rgba(232,233,225,.11); --line-2:rgba(232,233,225,.06); --accent: #C7D46A; --accent-dim: rgba(199,212,106,.16); --accent-2: #79B0A0; /* sea-green secondary glow */ --accent-2-dim: rgba(121,176,160,.14); --accent-deep: #C7D46A; /* no deep variant — falls to accent */ --green: #8FB489; /* domain labels — leans toward the mood's sea-green */ --selection-bg: var(--accent); --selection-fg: var(--bg); } /* Obsidian — cool & mineral. For restraint, technical contexts. */ :root[data-mood="obsidian"] { --bg: #0B0B0D; --bg-2: #121215; --raise: #17171B; --fg: #ECECEF; --muted: #9395A0; --dim: #5E606B; --line: rgba(236,236,239,.11); --line-2:rgba(236,236,239,.06); --accent: #AEBCC2; --accent-dim: rgba(174,188,194,.16); --accent-2: #9E96B4; /* slate-violet secondary glow */ --accent-2-dim: rgba(158,150,180,.14); --accent-deep: #AEBCC2; /* no deep variant — falls to accent */ --green: #93A48D; /* domain labels — desaturated sage, in the mineral family */ --selection-bg: var(--accent); --selection-fg: var(--bg); } /* ── Brand-mark gold ───────────────────────────────────────── A separate, fixed color reserved for the leaf mark and wordmark on light/paper grounds and app icons. NOT a UI accent — do not tint text or controls with it. Pairs with paper + warm-black. */ :root { --gold: #B0853F; /* the bergamot leaf, foil/bronze */ --paper: #F4F1EA; /* warm light ground for marks */ --paper-2: #ECE7DC; /* stationery / table surface */ --mark-black: #1A1A17; /* the leaf on light grounds */ } /* ── Mobile daylight lift ──────────────────────────────────── Phones are read in bright sun, where the quiet muted/dim ink and the faint hairlines wash out. On small screens we lift the secondary inks and rules a step so body copy, labels and footers stay legible outdoors — desktop keeps the quieter hierarchy. Lifted PER MOOD so each palette stays in its own family. (Promoted from the live site's daylight fix so it ships once.) */ @media (max-width: 760px) { :root, :root[data-mood="oxblood"] { --muted: #DAC7C2; /* body copy — was #B0908C */ --dim: #B59B96; /* eyebrows, captions — was #79585F */ --line: rgba(239,230,226,.17); --line-2:rgba(239,230,226,.10); --green: #A3BC7C; /* domain labels — was #8FA867 */ } :root[data-mood="nocturne"] { --muted: #C8CCC2; /* was #8E968C */ --dim: #9AA096; /* was #5C645B */ --line: rgba(232,233,225,.17); --line-2:rgba(232,233,225,.10); --green: #A5C79F; /* was #8FB489 */ } :root[data-mood="obsidian"] { --muted: #CBCDD4; /* was #9395A0 */ --dim: #9698A2; /* was #5E606B */ --line: rgba(236,236,239,.17); --line-2:rgba(236,236,239,.10); --green: #A9BAA2; /* was #93A48D */ } } /* ── Light — paper ─────────────────────────────────────────── The daylight ground, derived from the brand's stationery (--paper) and aubergine ink. Dark is still the default; this applies only when a document opts in: It lives in the BRAND layer so the marketing site and the hub can read it, not just apps — before v2 it shipped in tokens/app.css and was compiled into the app bundle alone, which is why the website, hub and portal each grew their own. Every ink here is measured against --bg at ≥4.5:1. --dim and --green carry the values the portal and the hub arrived at independently; both were fixing a real failure upstream of them. MUST stay after the mobile daylight lift above: that block matches :root[data-mood="oxblood"] at equal specificity, so on phones it would otherwise re-lighten --muted/--dim here — a correction for dark ink that inverts into a defect on paper. */ :root[data-theme="light"] { color-scheme: light; /* v3.4: paper is white. The warm cream ground, aubergine-tinted greys and burnt-orange accent read as mud in dense working tools; the light theme now takes the brand's own oxblood as its one accent and neutral hairlines. Dark is untouched. */ --bg: #FFFFFF; --bg-2: #FAF9F7; --raise: #FFFFFF; --fg: #141210; --muted: #6F6A64; --dim: #7A7570; --line: #E4E0DA; --line-2:#EFECE7; --accent: #8C2F39; /* oxblood — the mark's own colour, at ink depth */ --accent-dim: rgba(140,47,57,.08); --accent-2: #9E78A6; /* unchanged — atmosphere only, never text */ --accent-2-dim: rgba(158,120,166,.12); --accent-deep: #6E1F28; --green: #4F6B47; --selection-bg: var(--accent); --selection-fg: var(--paper); } /* ── Paper: the warm light ground ───────────────────────────────────── v3.4 made light white, which is right for dense working tools and wrong for the marketing site, where the warm paper *is* the brand. This restores it as a named ground rather than as an old version a consumer is stranded on: Every value below is the pre-3.4 light theme unchanged. It was already graded and it already passes, so this reinstates a choice rather than reviving a defect. Must stay after the plain light block: same specificity family, later wins. ──────────────────────────────────────────────────────────────────── */ :root[data-theme="light"][data-ground="paper"] { --bg: #F4F1EA; --bg-2: #ECE7DC; --raise: #FBF9F4; --fg: #2B1A23; --muted: #6E5560; --dim: #79626C; --line: rgba(43,26,35,.15); --line-2:rgba(43,26,35,.07); --accent: #A65A2C; /* the orange, carried to ink depth */ --accent-dim: rgba(166,90,44,.10); --accent-2: #9E78A6; /* unchanged — atmosphere only, never text */ --accent-2-dim: rgba(158,120,166,.12); --accent-deep: #A6473B; --green: #587536; --selection-bg: var(--accent); --selection-fg: var(--paper); } /* ===== tokens/typography.css ===== */ /* ════════════════════════════════════════════════════════════ Bergamot — Typography One family. Schibsted Grotesk sets the manifesto at display size, the eyebrows in caps, and the running body. The serif is gone: what its contrast used to carry is now carried by size, weight and the grid — flush left, few sizes, rules to divide. Three family slots, by SIZE not by importance: --font-display the brand voice, large and airy — mastheads, hero lines, page titles. Free to be a face that only works big. --font-title headings at UI scale — card names, section heads, table captions, anything 16–24px that still wants the display voice but must stay legible small. --font-sans body, controls, captions. All three are Schibsted Grotesk today; the slots stay so the alternate register can swap a display face that cannot survive 19px without dragging every card title down with it. ════════════════════════════════════════════════════════════ */ :root, :root[data-type="schibsted"] { --font-display: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; --font-title: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; --font-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; --display-weight: 400; /* the grotesk holds at Regular */ /* set large, a grotesk needs its counters pulled in; a serif did not */ --display-tracking: -0.02em; } /* Alternate register — sharper, more fashion-forward. */ :root[data-type="bodoni"] { --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif; --font-title: "Bodoni Moda", Georgia, "Times New Roman", serif; --font-sans: "Archivo", system-ui, -apple-system, sans-serif; --display-weight: 500; /* Bodoni needs more body */ --display-tracking: -0.005em; } :root { /* ── Logotype ────────────────────────────────────────────── The wordmark is set in Idiqlat (open-source SIL face, Latin glyphs) — fixed regardless of data-type, so it lives here in the shared block rather than in a register above. Reserved for the wordmark only; not a general display face. */ --font-logotype: "Idiqlat", Georgia, serif; /* ── Display scale — fluid, set on clamp() ───────────────── Used large and airy: line-height near 1, balanced wrapping. */ --display-hero: clamp(46px, 8.4vw, 116px); /* the one H1 */ --display-1: clamp(34px, 5.2vw, 74px); /* invitation / CTA */ --display-2: clamp(30px, 4.6vw, 62px); /* section leads */ --display-3: clamp(26px, 3.4vw, 44px); /* stacked lines */ --display-4: clamp(22px, 2.6vw, 34px); /* service names */ --leading-display: 1.0; /* tight — display sits close */ --leading-snug: 1.16; /* ── Text scale ───────────────────────────────────────────── */ --text-lead: clamp(16px, 1.5vw, 20px); /* hero sub, intros */ --text-body: 18px; /* paragraph copy */ --text-sm: 14px; /* captions, footer links */ --text-xs: 13px; /* fine print */ --leading-body: 1.62; /* generous, readable */ --leading-tight: 1.5; /* ── Heading & prose rhythm (one ladder, used everywhere) ─── Display headings sit tight; large display prose breathes a little more; running body breathes most. Component spacing keys off these so vertical rhythm stays consistent across the site and apps. (Distilled from the live site's rhythm.) */ --leading-headline: 1.14; /* multi-line display headings */ --leading-prose: 1.34; /* large display body / pull lines */ /* ── Eyebrow / label — the brand's signature voice ───────── Weight 500, very wide tracking, uppercase, muted. */ --eyebrow-size: 11px; --eyebrow-tracking: 0.34em; --eyebrow-weight: 500; /* the ticked eyebrow (_FORESIGHT, _INNOVATION) sits heavier and tracks tighter — the underscore already does the pointing */ --eyebrow-tick-weight: 600; --eyebrow-tick-tracking: 0.2em; /* the widest tracking — used on the smallest "Private Advisory" tags beneath the wordmark */ --tag-size: 9.5px; --tag-tracking: 0.46em; /* navigation tracking sits between eyebrow and tag */ --nav-tracking: 0.12em; } /* ===== tokens/spacing.css ===== */ /* ════════════════════════════════════════════════════════════ Bergamot — Space, Measure & Radius The layout is built on a wide centered column, tall sections, and a lot of air. Negative space is a feature, not an absence. ════════════════════════════════════════════════════════════ */ :root { /* ── The shell — one centered measure for everything ──────── */ --shell-max: 1280px; --shell-pad: 56px; /* desktop gutter */ --shell-pad-sm: 28px; /* ≤920px gutter */ /* ── The grid — twelve columns, one seam ─────────────────── Every element on a surface hangs from the same columns, so a page has a few strong vertical seams instead of a bespoke split per band. Twelve is the choice because it divides into halves, thirds and quarters: a 4/8 board and a 6/6 pair of lists then share their edges rather than each inventing one. Tokens, not classes — the system ships no class vocabulary, so a consumer writes the three lines itself: .board { display: grid; grid-template-columns: var(--grid-track); gap: var(--grid-gutter); } .rail { grid-column: span 4; } .desk { grid-column: span 8; } The track list ships whole rather than as a column count, because repeat() wants a literal integer. minmax(0, 1fr), not 1fr, so one long unbroken string cannot push a seam sideways. A nested band that must keep the page's columns spans them and re-declares grid-template-columns: subgrid. Deliberately no max-width: the grid is independent of the measure. An editorial page hangs it inside .shell; a tool runs it full-bleed on its own gutter. */ --grid-track: repeat(12, minmax(0, 1fr)); --grid-gutter: 20px; /* between columns, and between bands */ --grid-gutter-sm: 14px; /* ≤860px */ /* ── Vertical rhythm ──────────────────────────────────────── */ --section-y: 140px; /* standard section top/bottom */ --section-y-sm: 96px; /* mobile */ --bar-height: 86px; /* fixed top bar */ /* ── Spacing scale (eyeballed from the site, not a rigid 8pt) */ --space-1: 6px; --space-2: 11px; --space-3: 18px; --space-4: 26px; --space-5: 38px; --space-6: 54px; --space-7: 80px; --space-8: 140px; /* generous column gaps used between editorial pairs */ --gap-col: 80px; /* the small gap from a heading down to its own body copy */ --gap-heading: 10px; /* ── Radii — essentially two: the pill, and the soft app square */ --radius-pill: 100px; /* buttons, nav CTA, chips */ --radius-card: 2px; /* the rare rectangular panel — barely round */ --radius-app: 22%; /* app-icon superellipse-ish corner */ --radius-round: 50%; /* circular portraits, dots, avatars */ } /* ===== tokens/effects.css ===== */ /* ════════════════════════════════════════════════════════════ Bergamot — Atmosphere, Motion & Hairlines The surface treatment is what makes Bergamot feel expensive: a whisper of film grain, a vignette pulling the corners down, a single slow-breathing accent glow, and reveals that drift up. Effects are restrained — never bouncy, never fast. ════════════════════════════════════════════════════════════ */ :root { /* ── Motion ──────────────────────────────────────────────── */ --ease-out: cubic-bezier(.2,.7,.2,1); /* the house easing */ --dur-fast: .25s; /* hover / link underlines */ --dur-mid: .4s; /* bar solidify, color shifts */ --dur-reveal: 1s; /* scroll-reveal drift */ --reveal-rise: 26px; /* how far elements travel up on reveal*/ --reveal-stagger: 70ms; /* delay between siblings */ /* ── Atmosphere ──────────────────────────────────────────── */ --grain-opacity: .04; --vignette: radial-gradient(120% 80% at 50% -10%, transparent 40%, rgba(0,0,0,.45) 100%); /* the raw corner color, for pages that compose their own vignette gradient inline instead of using the .bergamot-vignette helper */ --vignette-edge: rgba(0,0,0,.45); /* the breathing hero glow — DUAL radial: the living accent with the mauve second accent breathing just off-center behind it */ --glow: radial-gradient(circle at 41% 44%, var(--accent-dim) 0%, transparent 56%), radial-gradient(circle at 63% 60%, var(--accent-2-dim) 0%, transparent 52%); /* the wash that rises behind reversed-out portraits */ --wash-portrait: radial-gradient(120% 90% at 50% 108%, var(--accent-2-dim) 0%, transparent 62%); } /* ── Film grain — fixed full-bleed, overlay-blended ────────── Drop this on a fixed ::before of for the signature tactile surface. Tiny opacity; it should be felt, not seen. */ .bergamot-grain::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: var(--grain-opacity); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── Vignette — corners eased into black ─────────────────────── */ .bergamot-vignette::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 55; background: var(--vignette); } /* ── Selection ───────────────────────────────────────────────── */ ::selection { background: var(--selection-bg); color: var(--selection-fg); } /* ===== tokens/base.css ===== */ /* ════════════════════════════════════════════════════════════ Bergamot — Base The minimum reset + element defaults that make any page feel like Bergamot the moment styles.css is linked. ════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-weight: 400; line-height: var(--leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } /* ── Helper primitives reused across the system ──────────────── */ /* the centered measure */ .shell { max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--shell-pad); } @media (max-width: 920px) { .shell { padding: 0 var(--shell-pad-sm); } } /* eyebrow — the brand's signature small voice */ .eyebrow { font-family: var(--font-sans); font-weight: var(--eyebrow-weight); font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--muted); } /* ticked eyebrow — the underscore-prefixed variant that opens a column or category heading (_FORESIGHT, _INNOVATION). The tick is generated, so markup stays clean; heavier and tighter than the classic eyebrow because the underscore already does the pointing. Ink by role: trait/section headings take --fg, domain headings take --green. */ .eyebrow-tick { font-family: var(--font-sans); font-weight: var(--eyebrow-tick-weight); font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-tick-tracking); text-transform: uppercase; color: var(--fg); } .eyebrow-tick::before { content: "_"; } .eyebrow-tick.green { color: var(--green); } /* display helper */ .display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: var(--leading-snug); } .display em, .ital { font-style: italic; color: var(--accent); } /* accent text */ .accent { color: var(--accent); }