Jonathan Hvid
ca3686de29
- Width: --content-max 72rem → 83rem (15% wider, per the v3 follow-up spec). Every page that uses var(--content-max) gets the new bound. - Wordmark in the top-left nav: Fenja logo · "Project Bifrost". 'Bifrost' is serif italic with a horizontal pigment-rainbow gradient (terracotta → ochre → copper → indigo → heather), background-clip:text. The bullet separator uses --on-surface-muted at 1rem. - Global .section-link utility class: serif italic, terracotta, no underline, no all-caps. Modifier --ink for use on the dark events card. This becomes the only italic body text on the site (along with the Bifrost wordmark); everywhere else loses italics in the next commit. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
134 lines
5 KiB
CSS
134 lines
5 KiB
CSS
/* =============================================================
|
|
Fenja AI — Design tokens
|
|
Derived from design/colors_and_type.css
|
|
============================================================= */
|
|
|
|
:root {
|
|
/* --- Surface tiers (unbleached paper → clay) --- */
|
|
--background: #faf6ee;
|
|
--surface: #faf6ee;
|
|
--surface-container-lowest: #fffcf7;
|
|
--surface-container-low: #f6f2e8;
|
|
--surface-container: #efeadc;
|
|
--surface-container-high: #e7e1d0;
|
|
--surface-container-highest: #ddd6c3;
|
|
--surface-variant: #ddd6c3;
|
|
|
|
/* --- Text --- */
|
|
--on-surface: #383831;
|
|
--on-surface-variant: #5f5e5e;
|
|
--on-surface-muted: #8a887f;
|
|
|
|
/* --- Brand --- */
|
|
--primary: #5f5e5e;
|
|
--on-primary: #fffcf7;
|
|
|
|
--secondary: #785f53;
|
|
--secondary-dim: #6b5348;
|
|
--on-secondary: #ffffff;
|
|
--secondary-fixed-dim: #9a8679;
|
|
|
|
/* --- Ghost border --- */
|
|
--outline: #babab0;
|
|
--outline-variant: #babab0;
|
|
--ghost-border-color: rgba(186, 186, 176, 0.15);
|
|
--ghost-border: 1px solid var(--ghost-border-color);
|
|
|
|
/* --- Archival Pigments (flat, matte inks) --- */
|
|
--pigment-terracotta: #b96b58;
|
|
--pigment-copper: #6d8c7c;
|
|
--pigment-ochre: #c29d59;
|
|
--pigment-indigo: #5a6d83;
|
|
--pigment-heather: #8d7a85;
|
|
|
|
/* --- Phase 2: white card surfaces + deep ink accent --- */
|
|
--surface-card: #ffffff;
|
|
--surface-card-border: rgba(0, 0, 0, 0.08);
|
|
--ink: #2c3a52; /* deep indigo — membership card + event hero */
|
|
--ink-text: #e8e0d0; /* readable cream on --ink */
|
|
--ink-muted: #b8a989; /* muted label tone on --ink */
|
|
|
|
/* --- Semantic state mappings --- */
|
|
--color-success: var(--pigment-copper);
|
|
--color-warning: var(--pigment-ochre);
|
|
--color-danger: var(--pigment-terracotta);
|
|
--color-info: var(--pigment-indigo);
|
|
|
|
/* --- Type families --- */
|
|
--font-serif: "Newsreader", "Source Serif Pro", Georgia, "Times New Roman", serif;
|
|
--font-sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
|
|
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
|
|
/* --- Type scale (responsive, clamped) --- */
|
|
--text-display-xl: clamp(3.5rem, 6vw, 5.5rem);
|
|
--text-display-lg: clamp(3rem, 5vw, 4.5rem);
|
|
--text-display-md: clamp(2.5rem, 4vw, 3.5rem);
|
|
--text-headline-lg: 2.25rem;
|
|
--text-headline-md: 1.75rem;
|
|
--text-headline-sm: 1.375rem;
|
|
--text-title-lg: 1.125rem;
|
|
--text-title-md: 1rem;
|
|
--text-body-lg: 1.0625rem;
|
|
--text-body-md: 1rem;
|
|
--text-body-sm: 0.875rem;
|
|
--text-label-md: 0.8125rem;
|
|
--text-label-sm: 0.75rem;
|
|
|
|
/* --- Tracking --- */
|
|
--tracking-tight: -0.02em;
|
|
--tracking-snug: -0.01em;
|
|
--tracking-normal: 0;
|
|
--tracking-wide: 0.04em;
|
|
--tracking-wider: 0.08em;
|
|
|
|
/* --- Leading --- */
|
|
--leading-tight: 1.1;
|
|
--leading-snug: 1.25;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.6;
|
|
--leading-loose: 1.75;
|
|
|
|
/* --- Spacing scale (editorial, generous) --- */
|
|
--space-1: 0.25rem; /* 4px */
|
|
--space-2: 0.5rem; /* 8px */
|
|
--space-3: 0.75rem; /* 12px */
|
|
--space-4: 1rem; /* 16px */
|
|
--space-5: 1.5rem; /* 24px */
|
|
--space-6: 2rem; /* 32px — list separator default */
|
|
--space-7: 2.5rem; /* 40px */
|
|
--space-8: 2.75rem; /* 44px — hero-card padding */
|
|
--space-10: 4rem; /* 64px */
|
|
--space-12: 5rem; /* 80px */
|
|
--space-16: 6rem; /* 96px */
|
|
--space-20: 7rem; /* 112px — desktop lateral margin */
|
|
--space-24: 8rem; /* 128px */
|
|
|
|
/* --- Radii --- */
|
|
--radius-none: 0;
|
|
--radius-sm: 0.375rem; /* 6px */
|
|
--radius-md: 0.75rem; /* 12px — primary */
|
|
--radius-lg: 1.25rem; /* 20px */
|
|
--radius-full: 9999px;
|
|
|
|
/* --- Elevation (atmospheric, warm) --- */
|
|
--shadow-none: none;
|
|
--shadow-ambient: 0 12px 32px -12px rgba(56, 56, 49, 0.06);
|
|
--shadow-float: 0 24px 48px -16px rgba(56, 56, 49, 0.05), 0 4px 12px -4px rgba(56, 56, 49, 0.04);
|
|
--shadow-modal: 0 40px 64px -24px rgba(56, 56, 49, 0.08), 0 8px 16px -6px rgba(56, 56, 49, 0.04);
|
|
|
|
/* --- Glass --- */
|
|
--glass-blur: blur(16px);
|
|
--glass-surface: rgba(255, 252, 247, 0.8);
|
|
|
|
/* --- Motion --- */
|
|
--ease-standard: cubic-bezier(0.2, 0.0, 0, 1);
|
|
--ease-entrance: cubic-bezier(0, 0, 0, 1);
|
|
--ease-exit: cubic-bezier(0.3, 0, 1, 1);
|
|
--duration-fast: 140ms;
|
|
--duration-med: 240ms;
|
|
--duration-slow: 420ms;
|
|
|
|
/* --- Layout --- */
|
|
--content-max: 83rem; /* 1328px — 15% wider than the original 72rem */
|
|
--reading-max: 42rem; /* 672px */
|
|
}
|