/* ========================================================================== GOODBRAND GROUP — Foundations Quiet luxury, institutional B2B. Monochrome. No gradients, no retail color. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* -------------------------------------------------------------------------- Webfonts -------------------------------------------------------------------------- Display + Text: Söhne-style modern grotesque. We use "Inter Tight" as a close substitute (free, near-identical proportions, tight default tracking). Editorial accent: a transitional serif for pull-quotes / numerals — "Newsreader". Mono: "JetBrains Mono" for entity codes / ABN / coordinates. -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300;1,6..72,400&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ----- Color: Light (default / "Alabaster") ------------------------------ */ --gb-alabaster: #F5F3EE; /* page bg, warm off-white */ --gb-paper: #FAF8F4; /* card / elevated surface */ --gb-bone: #EDEAE2; /* subtle divider / hairline fill */ --gb-stone: #C9C5BC; /* muted rules, disabled */ --gb-graphite: #6E6A62; /* secondary text */ --gb-ink: #1A1A1A; /* primary text — near-black, never pure */ --gb-obsidian: #0B0B0B; /* deepest fg, dark-mode bg */ /* Accent — kept extremely restrained. A single warm neutral for hover/active. */ --gb-accent-clay: #8C6F4D; /* heritage clay / leather — used sparingly */ --gb-accent-clay-soft: #B69A78; /* Functional (institutional, desaturated) */ --gb-signal-positive: #4A6B4F; /* deep moss — confirmations only */ --gb-signal-warning: #8A6A2C; /* aged brass */ --gb-signal-negative: #7A3A35; /* oxblood — errors, never bright red */ /* Semantic foreground / background tokens (LIGHT) */ --fg-1: var(--gb-ink); /* primary text */ --fg-2: var(--gb-graphite); /* secondary text */ --fg-3: var(--gb-stone); /* tertiary / placeholders */ --fg-inverse: var(--gb-alabaster); --bg-1: var(--gb-alabaster); /* page */ --bg-2: var(--gb-paper); /* surface */ --bg-3: var(--gb-bone); /* recessed */ --bg-inverse: var(--gb-obsidian); --rule-1: var(--gb-ink); /* hairline emphasis */ --rule-2: var(--gb-stone); /* default rule */ --rule-3: var(--gb-bone); /* faintest rule */ /* ----- Type ----------------------------------------------------------- */ --font-display: "Inter", "Söhne", "Helvetica Neue", Arial, sans-serif; --font-text: "Inter", "Söhne", "Helvetica Neue", Arial, sans-serif; --font-serif: "Playfair Display", "Newsreader", "Tiempos", "Times New Roman", serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* Modular scale — restrained, tier-1 corporate feel. Display is large but tracked tight; body is generous, line-height airy. */ --fs-display-xl: clamp(64px, 7.5vw, 128px); --fs-display-l: clamp(48px, 5vw, 88px); --fs-display-m: clamp(36px, 3.6vw, 56px); --fs-h1: 40px; --fs-h2: 28px; --fs-h3: 20px; --fs-h4: 16px; --fs-body-l: 19px; --fs-body: 16px; --fs-body-s: 14px; --fs-caption: 12px; --fs-overline: 11px; --lh-display: 1.02; --lh-heading: 1.15; --lh-body: 1.55; --lh-tight: 1.25; /* Tracking. Tight on display, open on overlines / labels. */ --tr-display: -0.02em; --tr-heading: -0.01em; --tr-body: 0; --tr-overline: 0.18em; --tr-label: 0.06em; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ----- Spacing (4px grid, but with corporate generosity) ------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 192px; /* Page gutters */ --gutter-mobile: 20px; --gutter-tablet: 40px; --gutter-desktop: 64px; --content-max: 1440px; --content-narrow: 880px; /* ----- Radii — almost none. Quiet luxury = sharp edges. ---------------- */ --radius-0: 0px; /* default — sharp */ --radius-1: 1px; /* hairline soften (inputs) */ --radius-2: 2px; /* the absolute max */ --radius-pill: 999px; /* tags only */ /* ----- Borders / Hairlines -------------------------------------------- */ --hairline: 1px solid var(--rule-2); --hairline-strong: 1px solid var(--rule-1); --hairline-faint: 1px solid var(--rule-3); /* ----- Shadow — institutional. Almost flat. --------------------------- */ --shadow-0: none; --shadow-1: 0 1px 0 0 rgba(26,26,26,0.04); /* card resting */ --shadow-2: 0 1px 2px 0 rgba(26,26,26,0.06), 0 8px 24px -12px rgba(26,26,26,0.10); /* hover lift */ --shadow-inset-rule: inset 0 -1px 0 0 var(--rule-3); /* ----- Motion — slow, confident, no bounce. --------------------------- */ --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); --ease-emphasis: cubic-bezier(0.32, 0.72, 0.0, 1.0); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 480ms; /* ----- Z layers ------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-overlay: 800; --z-modal: 900; --z-toast: 1000; } /* ========================================================================== Dark mode — "Obsidian" ========================================================================== */ [data-theme="dark"] { --fg-1: var(--gb-alabaster); --fg-2: #B6B2A8; --fg-3: #6E6A62; --fg-inverse: var(--gb-ink); --bg-1: var(--gb-obsidian); --bg-2: #161616; --bg-3: #1F1F1E; --bg-inverse: var(--gb-alabaster); --rule-1: var(--gb-alabaster); --rule-2: #2C2C2B; --rule-3: #1F1F1E; --shadow-1: 0 1px 0 0 rgba(0,0,0,0.4); --shadow-2: 0 1px 2px 0 rgba(0,0,0,0.5), 0 8px 24px -12px rgba(0,0,0,0.7); } /* ========================================================================== Semantic typographic classes — use these in components. ========================================================================== */ .t-overline { font-family: var(--font-text); font-size: var(--fs-overline); font-weight: var(--fw-medium); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--fg-2); } .t-display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: var(--fw-light); line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--fg-1); } .t-display-l { font-family: var(--font-display); font-size: var(--fs-display-l); font-weight: var(--fw-light); line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--fg-1); } .t-display-m { font-family: var(--font-display); font-size: var(--fs-display-m); font-weight: var(--fw-regular); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); color: var(--fg-1); } .t-h1 { font: var(--fw-medium) var(--fs-h1)/var(--lh-heading) var(--font-display); letter-spacing: var(--tr-heading); color: var(--fg-1); } .t-h2 { font: var(--fw-medium) var(--fs-h2)/var(--lh-heading) var(--font-display); letter-spacing: var(--tr-heading); color: var(--fg-1); } .t-h3 { font: var(--fw-medium) var(--fs-h3)/var(--lh-heading) var(--font-display); letter-spacing: var(--tr-body); color: var(--fg-1); } .t-h4 { font: var(--fw-semibold) var(--fs-h4)/var(--lh-tight) var(--font-display); letter-spacing: var(--tr-body); color: var(--fg-1); } .t-body-l { font: var(--fw-regular) var(--fs-body-l)/var(--lh-body) var(--font-text); color: var(--fg-1); } .t-body { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-text); color: var(--fg-1); } .t-body-s { font: var(--fw-regular) var(--fs-body-s)/var(--lh-body) var(--font-text); color: var(--fg-2); } .t-caption { font: var(--fw-regular) var(--fs-caption)/1.45 var(--font-text); color: var(--fg-2); letter-spacing: var(--tr-label); } .t-mono { font: var(--fw-regular) var(--fs-body-s)/1.5 var(--font-mono); color: var(--fg-1); } .t-serif { font: var(--fw-regular) var(--fs-body-l)/var(--lh-body) var(--font-serif); font-style: italic; color: var(--fg-1); } /* Drop-cap-style numeric for stats — tabular figures */ .t-numeric { font-family: var(--font-display); font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em; } /* ========================================================================== Base reset / page chrome ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg-1); color: var(--fg-1); font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--gb-ink); color: var(--gb-alabaster); } a { color: inherit; text-decoration: none; } hr { border: 0; border-top: var(--hairline); margin: var(--sp-7) 0; }