/* ========================================================================= SCROLLEDGE — Core Visual Tokens Colors, typography, spacing, radius, shadow, motion. Source of truth: assets/brand-sheet.png (VERSION 1.0, MAY 2024). ========================================================================= */ /* Source Serif 4 — local brand files. Default family uses non-optical cut (for UI/body sizes); 'Source Serif 4 36pt' and '48pt' families available for larger display settings. */ @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Serif 4 36pt'; src: url('fonts/SourceSerif4_36pt-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4 36pt'; src: url('fonts/SourceSerif4_36pt-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Serif 4 36pt'; src: url('fonts/SourceSerif4_36pt-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4 36pt'; src: url('fonts/SourceSerif4_36pt-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4 48pt'; src: url('fonts/SourceSerif4_48pt-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4 48pt'; src: url('fonts/SourceSerif4_48pt-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4 48pt'; src: url('fonts/SourceSerif4_48pt-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* Playfair Display — local brand files */ @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; } /* Inter — local brand files (uploaded). Default family = 18pt optical size (UI sizes 14-24px). Use 'Inter 24pt' or 'Inter 28pt' families for larger display sizes. */ @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; } /* 'Inter 24pt' optical — use for 24-32px text */ @font-face { font-family: 'Inter 24pt'; src: url('fonts/Inter_24pt-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter 24pt'; src: url('fonts/Inter_24pt-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter 24pt'; src: url('fonts/Inter_24pt-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter 24pt'; src: url('fonts/Inter_24pt-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter 24pt'; src: url('fonts/Inter_24pt-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter 24pt'; src: url('fonts/Inter_24pt-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter 24pt'; src: url('fonts/Inter_24pt-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } /* 'Inter 28pt' optical — use for 32px+ display sizes */ @font-face { font-family: 'Inter 28pt'; src: url('fonts/Inter_28pt-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter 28pt'; src: url('fonts/Inter_28pt-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter 28pt'; src: url('fonts/Inter_28pt-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter 28pt'; src: url('fonts/Inter_28pt-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter 28pt'; src: url('fonts/Inter_28pt-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter 28pt'; src: url('fonts/Inter_28pt-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } /* JetBrains Mono — local brand files (uploaded) */ @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; } :root { /* ---------- CORE PALETTE ---------- */ --primary: #8B5E34; /* warm earthy brown — buttons, links */ --primary-hover: #6F4828; /* darker on hover */ --accent: #D4AF37; /* gold — highlights, accents, active chips */ --success: #16A34A; --warning: #CA8A04; --danger: #B91C1C; --info: #2563EB; --ink: #0F1114; /* near-black — primary text */ --paper: #FAF8F4; /* warm cream — app background */ /* ---------- NEUTRAL SCALE (warm-leaning) ---------- */ --neutral-900: #1C1F23; --neutral-700: #525252; --neutral-500: #888888; --neutral-300: #D4D4D4; --neutral-100: #F5F5F4; /* ---------- SURFACES ---------- */ --surface-bg: #FAF8F4; /* page background */ --surface: #FFFFFF; /* default card surface */ --surface-elevated: #FFFFFF; /* modals, popovers */ --surface-subtle: #F3F0EA; /* secondary fills, hovers */ --surface-sunken: #EFEBE3; /* inputs, wells */ --border: #E5E1DA; /* hairlines */ --border-strong: #D8D2C6; --divider: #ECE8E1; /* ---------- SEMANTIC FG ---------- */ --fg-1: #0F1114; /* primary text */ --fg-2: #3F3A33; /* secondary text */ --fg-3: #7A6F60; /* tertiary text / metadata */ --fg-4: #A89D8C; /* disabled / placeholder */ --fg-on-primary: #FAF8F4; --fg-on-accent: #0F1114; --fg-link: #8B5E34; /* ---------- GRADIENTS (from brand sheet) ---------- */ --gradient-primary: linear-gradient(90deg, #8B5E34 0%, #D4AF37 100%); --gradient-sunset: linear-gradient(90deg, #D47A44 0%, #BED2A7 100%); --gradient-ink: linear-gradient(180deg, #1C1F23 0%, #0F1114 100%); --gradient-sage: linear-gradient(90deg, #7FA07A 0%, #C4D6AF 100%); --highlight-wash: #F1E9CB; /* soft gold wash for highlighted text */ /* ---------- TYPEFACES ---------- */ --font-display: 'Playfair Display', 'Times New Roman', Georgia, serif; --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ---------- TYPE SCALE (px → rem) ---------- */ --fs-display: 4.5rem; /* 72 */ --fs-h1: 2.5rem; /* 40 — Source Serif Semibold */ --fs-h2: 1.5rem; /* 24 */ --fs-h3: 1.25rem; /* 20 */ --fs-body: 1rem; /* 16 — Inter Regular */ --fs-body-sm: 0.875rem; /* 14 */ --fs-caption: 0.75rem; /* 12 */ --fs-overline: 0.6875rem;/* 11 — uppercase labels */ /* line-heights from brand sheet */ --lh-display: 1.1; --lh-heading: 1.3; --lh-body: 1.5; --lh-tight: 1.2; /* tracking */ --tracking-display: -0.01em; --tracking-h1: -0.005em; --tracking-body: 0; --tracking-overline: 0.08em; /* ---------- SPACING (4px base) ---------- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ---------- RADIUS (brand uses gentle 2–8px corners) ---------- */ --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 8px; --r-5: 12px; --r-pill: 999px; /* ---------- SHADOW SYSTEM ---------- */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(15, 17, 20, 0.04); --shadow-sm: 0 2px 6px rgba(15, 17, 20, 0.05); --shadow-md: 0 8px 24px rgba(15, 17, 20, 0.06); /* matches brand card shadow */ --shadow-lg: 0 16px 40px rgba(15, 17, 20, 0.08); --shadow-xl: 0 24px 60px rgba(15, 17, 20, 0.10); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* ---------- MOTION ---------- */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-entrance: cubic-bezier(0, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms; --dur-4: 360ms; /* ---------- Z-INDEX ---------- */ --z-nav: 100; --z-sticky: 200; --z-popover: 400; --z-modal: 600; --z-toast: 800; } /* ========================================================================= SEMANTIC TYPE CLASSES ========================================================================= */ .display, h1.display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--fg-1); } h1, .h1 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-h1); color: var(--fg-1); margin: 0 0 var(--sp-4); } h2, .h2 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: -0.003em; color: var(--fg-1); margin: 0 0 var(--sp-3); } h3, .h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--fg-1); margin: 0 0 var(--sp-2); } p, .body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0 0 var(--sp-4); text-wrap: pretty; } .body-sm, small { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--fg-2); } .caption { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-caption); font-style: italic; line-height: 1.4; color: var(--fg-3); } .overline, .eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--primary); } code, .code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-sunken); padding: 0.1em 0.35em; border-radius: var(--r-2); color: var(--fg-1); } a { color: var(--fg-link); text-decoration-color: rgba(139, 94, 52, 0.3); text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color var(--dur-2) var(--ease-standard); } a:hover { color: var(--primary-hover); text-decoration-color: currentColor; } /* ========================================================================= BASE RESET ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--surface-bg); color: var(--fg-1); font-family: var(--font-sans); 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(--highlight-wash); color: var(--fg-1); }