/* Bergamot Design System v1.4.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: · Cormorant (display) + Schibsted Grotesk (text) — the canonical voice · 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:"Cormorant";font-style:normal;font-weight:300 700;font-display:swap;src:url("assets/fonts/cormorant-latin.woff2") format("woff2")} @font-face{font-family:"Cormorant";font-style:italic;font-weight:300 700;font-display:swap;src:url("assets/fonts/cormorant-italic-latin.woff2") format("woff2")} @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:"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. Three "moods" share one structure. Switch by setting data-mood on a root element: (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 */ } } /* ===== tokens/typography.css ===== */ /* ════════════════════════════════════════════════════════════ Bergamot — Typography A serif/sans duet. Cormorant carries the voice: high-contrast, literary, frequently italic for emphasis. Schibsted Grotesk does the quiet work — eyebrows, navigation, captions, body — almost always in caps with wide tracking, or as plain restrained text. ════════════════════════════════════════════════════════════ */ :root, :root[data-type="cormorant"] { --font-display: "Cormorant", Georgia, "Times New Roman", serif; --font-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; --display-weight: 400; /* Cormorant reads best light */ --display-tracking: -0.015em; } /* Alternate register — sharper, more fashion-forward. */ :root[data-type="bodoni"] { --font-display: "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", "Cormorant", Georgia, serif; /* ── Display scale (Cormorant) — 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 (Schibsted Grotesk) ───────────────────────── */ --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 Cormorant headings */ --leading-prose: 1.34; /* large display body / pull lines */ /* ── Eyebrow / label — the brand's signature voice ───────── Schibsted 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 */ /* ── 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/app.css ===== */ /* ════════════════════════════════════════════════════════════ Bergamot — App Layer The brand, extended for working tools (Signals, future apps). The marketing site is a single dark world skinned by data-mood; an app needs more: interaction surfaces (field/hover/active), a few semantic colors, a daylight "paper" theme, fixed type and a denser space ladder, and density registers. This file ADDS to the foundation — it does not replace it. Load it AFTER colors/typography/spacing/effects (the canonical entry `app.css` at the repo root does this for you). The dark app theme simply inherits the default oxblood mood; only the app-specific additions and the light theme live here. Usage: (default — brand oxblood) (paper — daily working light) (denser working register) (calmer reading register) ════════════════════════════════════════════════════════════ */ /* ── Dark — inherits the oxblood mood; adds app-only surfaces ── */ :root, :root[data-app-theme="dark"] { color-scheme: dark; /* interaction surfaces — borrowed ink, never solid boxes */ --field: rgba(239,230,226,.05); /* input ground */ --hover: rgba(239,230,226,.04); /* row / control hover */ --active: rgba(239,230,226,.08); /* pressed / selected */ --scrim: rgba(18,9,16,.72); /* overlay behind modal */ --accent-ink: #1B0E15; /* text set ON the accent */ --focus: rgba(219,148,102,.5); /* focus ring */ /* semantic — quiet, same family, used only when meaning demands */ --ok: #93AE89; --warn: #D5AF6B; --danger: #D2796B; --ok-dim: rgba(147,174,137,.14); --warn-dim: rgba(213,175,107,.14); --danger-dim: rgba(210,121,107,.14); /* app atmosphere — grain one notch quieter, no vignette */ --grain-opacity: .03; --shadow-menu: 0 14px 44px rgba(0,0,0,.5); --glow-masthead: radial-gradient(90% 130% at 50% -30%, var(--accent-dim) 0%, transparent 60%); --selection-bg: var(--accent); --selection-fg: var(--accent-ink); } /* ── Light — paper. Derived from the brand's stationery ground (--paper #F4F1EA) and aubergine ink. The accent is carried to ink depth so it stays legible on light. Gold stays the mark's. ── */ :root[data-app-theme="light"] { color-scheme: light; --bg: #F4F1EA; --bg-2: #ECE7DC; --raise: #FBF9F4; --field: rgba(43,26,35,.045); --hover: rgba(43,26,35,.04); --active: rgba(43,26,35,.08); --scrim: rgba(43,26,35,.4); --fg: #2B1A23; --muted: #6E5560; --dim: #9D848C; --line: rgba(43,26,35,.15); --line-2: rgba(43,26,35,.07); --accent: #A85B2C; /* the orange, carried to ink depth */ --accent-ink: #F4F1EA; --accent-dim: rgba(168,91,44,.1); --accent-deep: #A6473B; --focus: rgba(168,91,44,.45); --ok: #5E7A55; --warn: #8F6B2D; --danger: #A6473B; --ok-dim: rgba(94,122,85,.1); --warn-dim: rgba(143,107,45,.1); --danger-dim: rgba(166,71,59,.1); --grain-opacity: .025; --shadow-menu: 0 14px 44px rgba(43,26,35,.16); --glow-masthead: radial-gradient(90% 130% at 50% -30%, var(--accent-dim) 0%, transparent 60%); --selection-bg: var(--accent); --selection-fg: var(--accent-ink); } /* ── App type — the brand duet at fixed tool sizes (not fluid) ── Cormorant is rationed: mastheads, page titles, headlines. Schibsted Grotesk does everything else. */ :root { --app-display-1: clamp(34px, 4.4vw, 50px); /* the masthead */ --app-display-2: 28px; /* page / section title */ --app-headline: 22px; /* item headline */ --app-title: 15px; /* row titles, sans 500 */ --app-body: 15px; /* paragraphs */ --app-sm: 13px; /* meta, captions */ --app-xs: 12px; /* fine print, counts */ /* app overrides of two shared leadings: display sits a hair looser than the site's poster-tight 1.0; tight text a hair tighter. */ --leading-display: 1.05; --leading-tight: 1.4; /* ── App space — a denser ladder than the site, still generous ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --bar-h: 64px; /* app top bar */ --app-max: 1160px; /* working shell */ --app-pad: 32px; --measure: 640px; /* the reading column */ /* ── App radius — the pill survives; controls get a soft square ── */ --r-pill: 100px; /* buttons, chips */ --r-ctl: 7px; /* inputs, toggles */ --r-menu: 10px; /* popovers, menus */ --r-panel: 4px; /* the rare panel */ /* ── App motion — the house easing, at tool tempo ── */ --ease: cubic-bezier(.2,.7,.2,1); --dur-1: .15s; /* hover, toggles */ --dur-2: .25s; /* menus, theme cross */ --dur-3: .45s; /* page-level reveals */ } /* ── Registers — one skin, two densities ────────────────────── staff: the working tool. client: the reading room. */ :root { --row-y: 16px; --row-gap: var(--sp-3); } [data-register="staff"] { --row-y: 12px; --row-gap: var(--sp-2); } [data-register="client"] { --row-y: 20px; --row-gap: var(--sp-4); } /* ── App base ───────────────────────────────────────────────── The app entry (app.css) OWNS the page — it is never loaded on the same document as the site entry (styles.css), so it styles bare html/body directly. It paints the canvas explicitly (so short pages don't reveal the browser canvas under a theme switch) and clips wide masthead glows without making a scroll container. */ * { box-sizing: border-box; } html, body { margin: 0; } html { background: var(--bg); overflow-x: clip; } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--app-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); overflow-x: clip; } a { color: inherit; text-decoration: none; } ::selection { background: var(--selection-bg); color: var(--selection-fg); } /* numerals in data positions are always tabular */ .num, .sg-score, .sg-count, time { font-variant-numeric: tabular-nums; } /* ── App grain — the brand surface, one notch quieter; no vignette in working views, clarity is the point. ── */ .app-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"); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }