mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Youssef
b41a3e60e2
Two sticky-at-top:0 elements in the same stacking context (.banner and Almanac's .section__head) overlapped during scroll because they shared --z-sticky (200) and the section head paints last in DOM order. Visible on the marketing site as the section header drawing on top of the nav as you scroll. site/ — actual fix for the live page: - tokens.css: split --z-sticky into --z-sticky (200, in-page) + --z-sticky-nav (300, top nav); add --banner-height: 44px so secondary stickies can offset by a single token - components.css: .banner now uses --z-sticky-nav and reads --banner-height for its height (kept at 44 px) - sections.css: Almanac .section__head docks at top: var(--banner-height) instead of top: 0; z-index stays at --z-sticky so the banner always out-paints when their boxes momentarily overlap skill/ — prevent the pattern in future generated pages (without forcing sticky on every output): - slop-test.md: new gate 68 auto-fails any second sticky-at-top:0 element when a sticky page-level nav exists; fires only when the page actually has sticky elements (S3, F2, sticky TOCs), trivial pass otherwise - components/s3-sticky-pinned.md: recipe rewritten to use top: var(--banner-height) + --z-sticky; pairing rule explained - components/f2-sticky-scroll-stack.md: top now calc(var(--banner-height) + var(--space-xl)) so the sticky pane docks below the nav with breathing room - SKILL.md + preview-examples.md: gate count bumped 67 → 68 Only Almanac uses sticky section heads in the live site — no other themes affected.
1130 lines
48 KiB
CSS
1130 lines
48 KiB
CSS
/*
|
|
Hallmark — tokens
|
|
Twelve themes. Each occupies a distinct point in OKLCH space.
|
|
Paper colours span dark / cream / saturated / cool / warm; never adjacent.
|
|
Display fonts span category-level differences (serif / mono / condensed sans / italic);
|
|
no theme is a minor variation of another.
|
|
Switched via [data-theme="..."] on <html>.
|
|
*/
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
SPECIMEN — warm oat editorial workshop · serif default
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
:root,
|
|
[data-theme="specimen"] {
|
|
--color-paper: oklch(96% 0.018 80);
|
|
--color-paper-2: oklch(93% 0.020 80);
|
|
--color-paper-3: oklch(89% 0.022 75);
|
|
--color-rule: oklch(82% 0.014 75);
|
|
--color-rule-2: oklch(70% 0.012 70);
|
|
--color-muted: oklch(52% 0.012 65);
|
|
--color-neutral: oklch(38% 0.014 60);
|
|
--color-ink-2: oklch(26% 0.014 60);
|
|
--color-ink: oklch(18% 0.014 60);
|
|
--color-accent: #FC4C02;
|
|
--color-accent-ink: oklch(55% 0.21 32);
|
|
--color-focus: #FC4C02;
|
|
|
|
--font-display: "Fraunces", "Tiempos", ui-serif, Georgia, serif;
|
|
--font-body: "Geist", "Söhne", ui-sans-serif, sans-serif;
|
|
--font-serif: "Fraunces", ui-serif, Georgia, serif;
|
|
--font-label: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 340;
|
|
--display-optical: 144;
|
|
--display-style: normal;
|
|
--display-soft: 20;
|
|
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.875rem;
|
|
--text-base: 1rem;
|
|
--text-md: 1.125rem;
|
|
--text-lg: 1.375rem;
|
|
--text-xl: 1.75rem;
|
|
--text-2xl: 2.25rem;
|
|
--text-3xl: 2.75rem;
|
|
--text-display: clamp(3.0rem, 5.5vw + 1.0rem, 5.75rem);
|
|
--text-display-s: clamp(2rem, 3vw + 1rem, 3rem);
|
|
|
|
--lh-tight: 1.02;
|
|
--lh-snug: 1.18;
|
|
--lh-normal: 1.45;
|
|
--lh-relaxed: 1.6;
|
|
|
|
--tracking-display: -0.025em;
|
|
--tracking-tight: -0.01em;
|
|
--tracking-normal: 0;
|
|
--tracking-label: 0.12em;
|
|
|
|
--space-3xs: 0.125rem;
|
|
--space-2xs: 0.25rem;
|
|
--space-xs: 0.5rem;
|
|
--space-sm: 0.75rem;
|
|
--space-md: 1rem;
|
|
--space-lg: 1.5rem;
|
|
--space-xl: 2.5rem;
|
|
--space-2xl: 4rem;
|
|
--space-3xl: 6.5rem;
|
|
--space-4xl: 10rem;
|
|
--space-5xl: 13rem;
|
|
|
|
--section-gap: 6.5rem;
|
|
--section-head-gap: 1.5rem;
|
|
|
|
--page-max: 76rem;
|
|
--page-gutter: clamp(1.25rem, 4vw, 3rem);
|
|
--measure: 62ch;
|
|
--rule-hair: 0.5px;
|
|
--rule-fine: 1px;
|
|
|
|
/* Component shape — square by default; per-theme overrides below.
|
|
The radius / border-weight choice is part of each theme's voice:
|
|
editorial themes stay square (Specimen, Newsprint, Salon, Linen),
|
|
technical themes stay square (Almanac, Midnight, Terminal),
|
|
brutalist themes get heavier borders (Brutal, Manifesto),
|
|
soft themes get rounded corners (Garden, Studio, Quiet, Plume). */
|
|
--radius-card: 0; /* .code, .tell cards, .install__body */
|
|
--radius-pill: 0; /* CTAs, dot indicators, badges */
|
|
--radius-input: 0; /* form fields, single-line code blocks */
|
|
--rule-card: 1px; /* card border thickness */
|
|
--shadow-card: none; /* card depth — most themes have no shadow */
|
|
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
|
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
--dur-micro: 120ms;
|
|
--dur-short: 220ms;
|
|
--dur-long: 420ms;
|
|
|
|
--z-base: 1;
|
|
--z-raised: 10;
|
|
--z-dropdown: 100;
|
|
--z-sticky: 200; /* in-page sticky elements (section heads, sidebars) */
|
|
--z-sticky-nav: 300; /* top nav / banner — must out-paint in-page sticky so docked section heads slide UNDER it */
|
|
--z-modal: 400;
|
|
--z-toast: 500;
|
|
--z-tooltip: 600;
|
|
|
|
/* Banner height — every in-page sticky element must offset by this so it docks BELOW the nav, never overlaps. */
|
|
--banner-height: 44px;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
MIDNIGHT — deep cool charcoal · technical
|
|
Paper: cool dark blue-tinted (was warm; now cool for stronger
|
|
differentiation from the warm-paper themes)
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="midnight"] {
|
|
--color-paper: oklch(15% 0.022 250);
|
|
--color-paper-2: oklch(20% 0.024 250);
|
|
--color-paper-3: oklch(25% 0.026 250);
|
|
--color-rule: oklch(33% 0.024 245);
|
|
--color-rule-2: oklch(48% 0.020 240);
|
|
--color-muted: oklch(60% 0.018 240);
|
|
--color-neutral: oklch(72% 0.014 235);
|
|
--color-ink-2: oklch(86% 0.010 230);
|
|
--color-ink: oklch(95% 0.008 230);
|
|
--color-accent: oklch(72% 0.16 220);
|
|
--color-accent-ink: oklch(72% 0.16 220);
|
|
--color-focus: oklch(72% 0.16 220);
|
|
|
|
--font-display: "Geist", "Futura", "Avenir Next", ui-sans-serif, sans-serif;
|
|
--font-body: "Geist", "Söhne", ui-sans-serif, sans-serif;
|
|
--font-serif: "Instrument Serif", ui-serif, Georgia, serif;
|
|
--font-label: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 300;
|
|
--display-optical: 144;
|
|
--display-soft: 0;
|
|
|
|
--text-display: clamp(2.75rem, 5.0vw + 1.0rem, 5.25rem);
|
|
--text-display-s: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
|
|
|
|
--tracking-display: -0.03em;
|
|
--tracking-label: 0.16em;
|
|
|
|
--section-gap: 6rem;
|
|
--section-head-gap: 1.5rem;
|
|
--measure: 60ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
BRUTAL — stark white · heavy condensed · bright red
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="brutal"] {
|
|
--color-paper: oklch(98% 0.001 0);
|
|
--color-paper-2: oklch(95% 0.002 0);
|
|
--color-paper-3: oklch(91% 0.003 0);
|
|
--color-rule: oklch(12% 0.005 0);
|
|
--color-rule-2: oklch(8% 0.005 0);
|
|
--color-muted: oklch(38% 0.005 0);
|
|
--color-neutral: oklch(22% 0.005 0);
|
|
--color-ink-2: oklch(12% 0.005 0);
|
|
--color-ink: oklch(8% 0.005 0);
|
|
--color-accent: #E63946;
|
|
--color-accent-ink: oklch(58% 0.24 25);
|
|
--color-focus: #E63946;
|
|
|
|
--font-display: "Albert Sans", "GT America", ui-sans-serif, sans-serif;
|
|
--font-body: "Albert Sans", "Hanken Grotesk", ui-sans-serif, sans-serif;
|
|
--font-serif: "Albert Sans", ui-sans-serif, sans-serif;
|
|
--font-label: "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 700;
|
|
--display-soft: 0;
|
|
|
|
--text-display: clamp(3.5rem, 6vw + 1.0rem, 6.5rem);
|
|
--text-display-s: clamp(2.25rem, 4vw + 1rem, 3.75rem);
|
|
--text-2xl: 2.75rem;
|
|
--text-xl: 2rem;
|
|
--text-lg: 1.5rem;
|
|
|
|
--tracking-display: -0.045em;
|
|
--tracking-tight: -0.02em;
|
|
--tracking-label: 0.04em;
|
|
|
|
/* Manifesto runs uppercase Anton on display heads — line-height < 1.0 makes
|
|
cap-tops of line N+1 collide with the comma / baseline of line N (visible
|
|
on multi-line section titles like "SAME PROMPT, TWO / DIFFERENT OUTPUTS").
|
|
1.02 is the safe floor for all-caps condensed display. */
|
|
--lh-tight: 1.02;
|
|
--lh-snug: 1.08;
|
|
|
|
--section-gap: 5.5rem;
|
|
--section-head-gap: 1.25rem;
|
|
|
|
--rule-hair: 1px;
|
|
--rule-fine: 3px;
|
|
--measure: 58ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
GARDEN — pale sage · italic serif · rose accent
|
|
Pushed greener and slightly cooler from previous version
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="garden"] {
|
|
--color-paper: oklch(95% 0.030 130);
|
|
--color-paper-2: oklch(92% 0.034 130);
|
|
--color-paper-3: oklch(87% 0.038 130);
|
|
--color-rule: oklch(72% 0.034 130);
|
|
--color-rule-2: oklch(56% 0.040 135);
|
|
--color-muted: oklch(38% 0.055 152);
|
|
--color-neutral: oklch(28% 0.060 158);
|
|
--color-ink-2: oklch(20% 0.062 160);
|
|
--color-ink: oklch(14% 0.065 160);
|
|
--color-accent: #B6485E;
|
|
--color-accent-ink: oklch(55% 0.14 18);
|
|
--color-focus: #B6485E;
|
|
|
|
--font-display: "Cormorant Garamond", "Instrument Serif", "Fraunces", ui-serif, Georgia, serif;
|
|
--font-body: "Geist", "Söhne", ui-sans-serif, sans-serif;
|
|
--font-serif: "Cormorant Garamond", "Instrument Serif", ui-serif, Georgia, serif;
|
|
--font-label: "Geist Mono", ui-monospace, monospace;
|
|
--font-mono: "Geist Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 400;
|
|
--display-style: italic;
|
|
--display-optical: 96;
|
|
--display-soft: 0;
|
|
|
|
--text-display: clamp(3.25rem, 6.0vw + 1.0rem, 5.75rem);
|
|
--text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
|
|
|
|
--tracking-display: -0.012em;
|
|
--tracking-tight: -0.005em;
|
|
--tracking-label: 0.10em;
|
|
|
|
--lh-tight: 1.05;
|
|
--lh-snug: 1.22;
|
|
|
|
--section-gap: 6.5rem;
|
|
--section-head-gap: 1.5rem;
|
|
--measure: 58ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
ATELIER — luxury fashion-house
|
|
Cool cream paper (low chroma so it reads "considered" not "warm")
|
|
+ dark warm-brown ink + Playfair Display 900 (Didone-feel)
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="atelier"] {
|
|
--color-paper: oklch(94% 0.005 60);
|
|
--color-paper-2: oklch(91% 0.006 60);
|
|
--color-paper-3: oklch(87% 0.008 55);
|
|
--color-rule: oklch(78% 0.006 55);
|
|
--color-rule-2: oklch(56% 0.008 50);
|
|
--color-muted: oklch(46% 0.010 50);
|
|
--color-neutral: oklch(28% 0.014 45);
|
|
--color-ink-2: oklch(18% 0.020 40);
|
|
--color-ink: oklch(12% 0.024 40);
|
|
--color-accent: oklch(22% 0.060 40);
|
|
--color-accent-ink: oklch(45% 0.13 60);
|
|
--color-focus: oklch(45% 0.13 60);
|
|
|
|
--font-display: "Playfair Display", "Cormorant Garamond", "Tiempos Headline", ui-serif, Georgia, serif;
|
|
--font-body: "Hanken Grotesk", "Geist", ui-sans-serif, sans-serif;
|
|
--font-serif: "Playfair Display", "Cormorant Garamond", ui-serif, Georgia, serif;
|
|
--font-label: "IBM Plex Mono", ui-monospace, monospace;
|
|
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 900;
|
|
--display-optical: 144;
|
|
--display-style: normal;
|
|
--display-soft: 0;
|
|
|
|
--text-display: clamp(3.75rem, 5.5vw + 1.0rem, 6.25rem);
|
|
--text-display-s: clamp(2.5rem, 4vw + 1rem, 4rem);
|
|
|
|
--tracking-display: -0.018em;
|
|
--tracking-tight: -0.008em;
|
|
--tracking-label: 0.24em;
|
|
|
|
--lh-tight: 1.0;
|
|
--lh-snug: 1.16;
|
|
--lh-normal: 1.55;
|
|
--lh-relaxed: 1.7;
|
|
|
|
--section-gap: 6.5rem;
|
|
--section-head-gap: 1.75rem;
|
|
--measure: 56ch;
|
|
--page-max: 64rem;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
NEWSPRINT — broadsheet · salmon-pink paper · burgundy accent
|
|
FT-inspired pink (real)
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="newsprint"] {
|
|
--color-paper: oklch(92% 0.045 50);
|
|
--color-paper-2: oklch(89% 0.050 50);
|
|
--color-paper-3: oklch(84% 0.054 45);
|
|
--color-rule: oklch(68% 0.030 40);
|
|
--color-rule-2: oklch(35% 0.020 35);
|
|
--color-muted: oklch(46% 0.022 35);
|
|
--color-neutral: oklch(30% 0.025 30);
|
|
--color-ink-2: oklch(20% 0.030 28);
|
|
--color-ink: oklch(15% 0.030 25);
|
|
--color-accent: oklch(32% 0.10 28);
|
|
--color-accent-ink: oklch(45% 0.13 30);
|
|
--color-focus: oklch(48% 0.18 30);
|
|
|
|
--font-display: "Playfair Display", "Crimson Pro", "Newsreader", ui-serif, Georgia, serif;
|
|
--font-body: "Crimson Pro", "Newsreader", ui-serif, Georgia, serif;
|
|
--font-serif: "Playfair Display", "Crimson Pro", ui-serif, Georgia, serif;
|
|
--font-label: "Inter", "Geist", ui-sans-serif, sans-serif;
|
|
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 700;
|
|
--display-optical: 48;
|
|
--display-style: normal;
|
|
--display-soft: 0;
|
|
|
|
--text-base: 1.0625rem;
|
|
--text-md: 1.1875rem;
|
|
--text-lg: 1.375rem;
|
|
--text-xl: 1.625rem;
|
|
--text-2xl: 2rem;
|
|
--text-display: clamp(2.75rem, 5.0vw + 1.0rem, 5.0rem);
|
|
--text-display-s: clamp(2rem, 3vw + 1rem, 2.875rem);
|
|
|
|
--tracking-display: -0.022em;
|
|
--tracking-tight: -0.008em;
|
|
--tracking-label: 0.06em;
|
|
|
|
--lh-normal: 1.55;
|
|
--lh-relaxed: 1.65;
|
|
|
|
--section-gap: 6rem;
|
|
--section-head-gap: 1.5rem;
|
|
--measure: 58ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
TERMINAL — phosphor CRT · monospace everywhere
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="terminal"] {
|
|
--color-paper: oklch(11% 0.018 145);
|
|
--color-paper-2: oklch(15% 0.022 145);
|
|
--color-paper-3: oklch(19% 0.024 145);
|
|
--color-rule: oklch(28% 0.030 140);
|
|
--color-rule-2: oklch(40% 0.050 140);
|
|
--color-muted: oklch(58% 0.090 140);
|
|
--color-neutral: oklch(68% 0.120 140);
|
|
--color-ink-2: oklch(78% 0.140 138);
|
|
--color-ink: oklch(86% 0.160 138);
|
|
--color-accent: oklch(78% 0.190 138);
|
|
--color-accent-ink: oklch(78% 0.190 138);
|
|
--color-focus: oklch(86% 0.190 138);
|
|
|
|
--font-display: "JetBrains Mono", "IBM Plex Mono", "Geist Mono", ui-monospace, monospace;
|
|
--font-body: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
|
|
--font-serif: "JetBrains Mono", ui-monospace, monospace;
|
|
--font-label: "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 500;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(2.25rem, 4.0vw + 1.0rem, 4.0rem);
|
|
--text-display-s: clamp(1.625rem, 2.25vw + 1rem, 2.5rem);
|
|
--text-xl: 1.5rem;
|
|
--text-2xl: 1.875rem;
|
|
|
|
--tracking-display: 0.01em;
|
|
--tracking-tight: 0;
|
|
--tracking-label: 0.18em;
|
|
|
|
--lh-tight: 1.2;
|
|
--lh-snug: 1.35;
|
|
--lh-normal: 1.55;
|
|
|
|
--section-gap: 5.5rem;
|
|
--section-head-gap: 1.25rem;
|
|
--measure: 70ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
MANIFESTO — BLACK paper · ALL CAPS condensed · red colour-blocks
|
|
The opposite pole from Brutal: same red accent, inverted background.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="manifesto"] {
|
|
--color-paper: oklch(10% 0.005 60);
|
|
--color-paper-2: oklch(15% 0.006 60);
|
|
--color-paper-3: oklch(20% 0.008 60);
|
|
--color-rule: oklch(28% 0.010 60);
|
|
--color-rule-2: oklch(40% 0.012 60);
|
|
--color-muted: oklch(60% 0.012 65);
|
|
--color-neutral: oklch(72% 0.010 70);
|
|
--color-ink-2: oklch(88% 0.006 80);
|
|
--color-ink: oklch(98% 0.003 90);
|
|
--color-accent: #E51A1A;
|
|
--color-accent-ink: oklch(58% 0.24 28);
|
|
--color-focus: #E51A1A;
|
|
|
|
--font-display: "Anton", "Bebas Neue", "Albert Sans", sans-serif;
|
|
--font-body: "Public Sans", "Albert Sans", "Hanken Grotesk", ui-sans-serif, sans-serif;
|
|
--font-serif: "Anton", "Albert Sans", sans-serif;
|
|
--font-label: "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 400;
|
|
--display-optical: 96;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(4.0rem, 8vw + 1.0rem, 9rem);
|
|
--text-display-s: clamp(2.75rem, 6vw + 1rem, 5.5rem);
|
|
--text-2xl: 3rem;
|
|
--text-xl: 2rem;
|
|
|
|
--tracking-display: 0.005em;
|
|
--tracking-tight: 0;
|
|
--tracking-label: 0.10em;
|
|
|
|
--lh-tight: 0.86;
|
|
--lh-snug: 1.0;
|
|
|
|
--section-gap: 5.5rem;
|
|
--section-head-gap: 1.25rem;
|
|
|
|
--rule-hair: 1px;
|
|
--rule-fine: 3px;
|
|
--measure: 56ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
SALON — boutique apothecary · warm ivory · TYPEWRITER display
|
|
Display in mono is the key differentiator from the cream-serif themes
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="salon"] {
|
|
--color-paper: oklch(94% 0.030 65);
|
|
--color-paper-2: oklch(91% 0.034 65);
|
|
--color-paper-3: oklch(87% 0.038 60);
|
|
--color-rule: oklch(76% 0.028 60);
|
|
--color-rule-2: oklch(56% 0.030 55);
|
|
--color-muted: oklch(48% 0.030 50);
|
|
--color-neutral: oklch(34% 0.030 45);
|
|
--color-ink-2: oklch(28% 0.030 40);
|
|
--color-ink: oklch(22% 0.030 38);
|
|
--color-accent: oklch(40% 0.085 50);
|
|
--color-accent-ink: oklch(45% 0.10 50);
|
|
--color-focus: oklch(50% 0.12 50);
|
|
|
|
--font-display: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
--font-body: "Plus Jakarta Sans", "Hanken Grotesk", "Geist", ui-sans-serif, sans-serif;
|
|
--font-serif: "Cormorant Garamond", ui-serif, Georgia, serif;
|
|
--font-label: "IBM Plex Mono", ui-monospace, monospace;
|
|
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 500;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(2.25rem, 4.0vw + 1.0rem, 4.0rem);
|
|
--text-display-s: clamp(1.625rem, 2.5vw + 1rem, 2.5rem);
|
|
--text-xl: 1.5rem;
|
|
--text-2xl: 1.875rem;
|
|
|
|
--tracking-display: 0.005em;
|
|
--tracking-tight: 0;
|
|
--tracking-label: 0.18em;
|
|
|
|
--lh-tight: 1.18;
|
|
--lh-snug: 1.32;
|
|
--lh-normal: 1.55;
|
|
|
|
--section-gap: 6.5rem;
|
|
--section-head-gap: 1.75rem;
|
|
--measure: 52ch;
|
|
--page-max: 60rem;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
LINEN — cool slate-grey paper · LIGHT GEOMETRIC SANS display
|
|
Repalleted from warm linen-yellow to cool slate-grey for theme variety —
|
|
the gallery had too many cream-paper themes (Specimen, Atelier, Newsprint,
|
|
Salon, Studio, Riso). Linen now sits on the cool side: low-chroma paper
|
|
at hue 220, steel-blue accent. Same fabric voice, different dye.
|
|
Sans-serif display is the key differentiator from Specimen / Atelier / Salon.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="linen"] {
|
|
--color-paper: oklch(91% 0.012 220);
|
|
--color-paper-2: oklch(88% 0.014 220);
|
|
--color-paper-3: oklch(83% 0.016 215);
|
|
--color-rule: oklch(74% 0.014 215);
|
|
--color-rule-2: oklch(56% 0.020 215);
|
|
--color-muted: oklch(46% 0.020 215);
|
|
--color-neutral: oklch(34% 0.024 215);
|
|
--color-ink-2: oklch(26% 0.026 215);
|
|
--color-ink: oklch(18% 0.028 220);
|
|
--color-accent: oklch(40% 0.12 232);
|
|
--color-accent-ink: oklch(46% 0.14 232);
|
|
--color-focus: oklch(50% 0.16 232);
|
|
|
|
--font-display: "Hanken Grotesk", "Inter", ui-sans-serif, sans-serif;
|
|
--font-body: "Hanken Grotesk", "Inter", ui-sans-serif, sans-serif;
|
|
--font-serif: "Cormorant Garamond", ui-serif, Georgia, serif;
|
|
--font-label: "IBM Plex Mono", ui-monospace, monospace;
|
|
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 300;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(3.0rem, 5.5vw + 1.0rem, 5.75rem);
|
|
--text-display-s: clamp(2rem, 3vw + 1rem, 3rem);
|
|
|
|
--tracking-display: -0.018em;
|
|
--tracking-tight: -0.008em;
|
|
--tracking-label: 0.16em;
|
|
|
|
--lh-tight: 1.06;
|
|
--lh-snug: 1.20;
|
|
--lh-normal: 1.55;
|
|
--lh-relaxed: 1.7;
|
|
|
|
--section-gap: 6.5rem;
|
|
--section-head-gap: 1.5rem;
|
|
--measure: 56ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
ALMANAC — encyclopaedic · COOL pale paper (not warm) · slate accent
|
|
Cool hue 245 is the key differentiator from the warm-cream cluster
|
|
+ dense type · sticky labels · grid lines
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="almanac"] {
|
|
--color-paper: oklch(94% 0.008 245);
|
|
--color-paper-2: oklch(91% 0.010 245);
|
|
--color-paper-3: oklch(86% 0.012 240);
|
|
--color-rule: oklch(74% 0.012 240);
|
|
--color-rule-2: oklch(38% 0.018 240);
|
|
--color-muted: oklch(46% 0.014 245);
|
|
--color-neutral: oklch(28% 0.016 245);
|
|
--color-ink-2: oklch(20% 0.018 245);
|
|
--color-ink: oklch(16% 0.020 245);
|
|
--color-accent: oklch(38% 0.135 250);
|
|
--color-accent-ink: oklch(40% 0.13 250);
|
|
--color-focus: oklch(38% 0.135 250);
|
|
|
|
--font-display: "Hanken Grotesk", "Inter", ui-sans-serif, sans-serif;
|
|
--font-body: "Hanken Grotesk", "Inter", "Geist", ui-sans-serif, sans-serif;
|
|
--font-serif: "Newsreader", ui-serif, Georgia, serif;
|
|
--font-label: "IBM Plex Mono", ui-monospace, monospace;
|
|
--font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 600;
|
|
--display-optical: 48;
|
|
--display-style: normal;
|
|
|
|
--text-xs: 0.6875rem;
|
|
--text-sm: 0.8125rem;
|
|
--text-base: 0.9375rem;
|
|
--text-md: 1.0625rem;
|
|
--text-lg: 1.25rem;
|
|
--text-xl: 1.5rem;
|
|
--text-2xl: 1.875rem;
|
|
--text-display: clamp(2.25rem, 3.5vw + 1.0rem, 3.75rem);
|
|
--text-display-s: clamp(1.5rem, 2vw + 1rem, 2.25rem);
|
|
|
|
--tracking-display: -0.014em;
|
|
--tracking-tight: -0.005em;
|
|
--tracking-label: 0.06em;
|
|
|
|
--lh-tight: 1.1;
|
|
--lh-snug: 1.22;
|
|
--lh-normal: 1.5;
|
|
|
|
--space-xl: 2rem;
|
|
--space-2xl: 3rem;
|
|
--space-3xl: 4.5rem;
|
|
|
|
--section-gap: 5.5rem;
|
|
--section-head-gap: 1.25rem;
|
|
--measure: 64ch;
|
|
--page-max: 84rem;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
SPORT — crisp white · italic display · burnt orange accent
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="sport"] {
|
|
--color-paper: oklch(98% 0.003 250);
|
|
--color-paper-2: oklch(95% 0.005 250);
|
|
--color-paper-3: oklch(91% 0.007 250);
|
|
--color-rule: oklch(78% 0.008 250);
|
|
--color-rule-2: oklch(36% 0.060 255);
|
|
--color-muted: oklch(50% 0.020 250);
|
|
--color-neutral: oklch(30% 0.040 255);
|
|
--color-ink-2: oklch(22% 0.060 258);
|
|
--color-ink: oklch(16% 0.080 260);
|
|
--color-accent: oklch(58% 0.190 35);
|
|
--color-accent-ink: oklch(54% 0.20 35);
|
|
--color-focus: oklch(58% 0.190 35);
|
|
|
|
--font-display: "Inter Tight", "Albert Sans", ui-sans-serif, sans-serif;
|
|
--font-body: "Albert Sans", "Hanken Grotesk", ui-sans-serif, sans-serif;
|
|
--font-serif: "Inter Tight", ui-sans-serif, sans-serif;
|
|
--font-label: "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 700;
|
|
--display-style: italic;
|
|
--display-optical: 96;
|
|
|
|
--text-display: clamp(3.5rem, 6vw + 1.0rem, 6.5rem);
|
|
--text-display-s: clamp(2.25rem, 4vw + 1rem, 4rem);
|
|
--text-2xl: 2.5rem;
|
|
--text-xl: 1.875rem;
|
|
|
|
--tracking-display: -0.04em;
|
|
--tracking-tight: -0.018em;
|
|
--tracking-label: 0.10em;
|
|
|
|
/* Sport runs uppercase Inter Tight on display heads — same collision risk
|
|
as Manifesto when titles wrap to two lines. 1.02 floor for all-caps. */
|
|
--lh-tight: 1.02;
|
|
--lh-snug: 1.06;
|
|
|
|
--section-gap: 5.5rem;
|
|
--section-head-gap: 1.25rem;
|
|
|
|
--rule-hair: 1px;
|
|
--rule-fine: 2px;
|
|
--measure: 58ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
STUDIO — modern editorial agency · Fraunces italic display
|
|
Inspiration: 14islands, Mathieu Triay, Frame, Gretel, contemporary
|
|
studio portfolios in 2026. Forest-green accent — uncommon, distinctive.
|
|
Fraunces is a variable serif with conventional italic letterforms;
|
|
used here at high optical size + soft axis for the editorial agency feel.
|
|
Repalleted: paper shifts from warm-cream to cool-grey (hue 200, very low
|
|
chroma) so Studio's italic-Fraunces + forest-green accent reads against
|
|
a calm, scientific surface — like a research-studio rather than a
|
|
warm-bohemian-studio. The green accent is the identity, not the paper.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="studio"] {
|
|
--color-paper: oklch(96.5% 0.005 200);
|
|
--color-paper-2: oklch(93.5% 0.007 200);
|
|
--color-paper-3: oklch(89% 0.010 200);
|
|
--color-rule: oklch(82% 0.008 200);
|
|
--color-rule-2: oklch(68% 0.010 200);
|
|
--color-muted: oklch(48% 0.012 205);
|
|
--color-neutral: oklch(34% 0.016 205);
|
|
--color-ink-2: oklch(22% 0.020 205);
|
|
--color-ink: oklch(13% 0.024 205);
|
|
--color-accent: oklch(46% 0.140 145);
|
|
--color-accent-ink: oklch(46% 0.140 145);
|
|
--color-focus: oklch(46% 0.140 145);
|
|
|
|
--font-display: "Fraunces", "Tiempos", ui-serif, Georgia, serif;
|
|
--font-body: "Geist", "Söhne", ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: "Fraunces", ui-serif, Georgia, serif;
|
|
--font-label: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 400;
|
|
--display-optical: 144;
|
|
--display-style: italic;
|
|
--display-soft: 30;
|
|
|
|
--text-display: clamp(3.5rem, 5.5vw + 1.0rem, 6.25rem);
|
|
--text-display-s: clamp(2.25rem, 4vw + 1rem, 4.25rem);
|
|
|
|
--tracking-display: -0.022em;
|
|
--tracking-label: 0.08em;
|
|
--section-gap: 6.5rem;
|
|
--section-head-gap: 1.5rem;
|
|
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
RISO — risograph print · Public Sans display, off-register
|
|
Inspiration: Are.na, e-flux, Frieze, indie magazine sites.
|
|
Warm peach paper, riso cyan + yellow as accents, slight CMYK
|
|
misregistration on display via text-shadow.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="riso"] {
|
|
--color-paper: oklch(91% 0.034 30);
|
|
--color-paper-2: oklch(87% 0.040 30);
|
|
--color-paper-3: oklch(82% 0.046 30);
|
|
--color-rule: oklch(70% 0.040 30);
|
|
--color-rule-2: oklch(56% 0.060 30);
|
|
--color-muted: oklch(46% 0.060 30);
|
|
--color-neutral: oklch(34% 0.060 30);
|
|
--color-ink-2: oklch(22% 0.060 30);
|
|
--color-ink: oklch(18% 0.060 30);
|
|
--color-accent: oklch(58% 0.170 220); /* riso cyan/teal */
|
|
--color-accent-2: oklch(78% 0.180 95); /* riso yellow */
|
|
--color-accent-ink: oklch(58% 0.170 220);
|
|
--color-focus: oklch(58% 0.170 220);
|
|
|
|
--font-display: "Public Sans", "Albert Sans", ui-sans-serif, system-ui, sans-serif;
|
|
--font-body: "Newsreader", "Tiempos", ui-serif, Georgia, serif;
|
|
--font-serif: "Newsreader", ui-serif, Georgia, serif;
|
|
--font-label: "Public Sans", "Albert Sans", ui-sans-serif, sans-serif;
|
|
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 800;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(3.25rem, 5.5vw + 1.0rem, 6.25rem);
|
|
--text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.75rem);
|
|
|
|
--tracking-display: -0.04em;
|
|
--tracking-tight: -0.014em;
|
|
--tracking-label: 0.06em;
|
|
|
|
--lh-tight: 0.92;
|
|
--lh-snug: 1.10;
|
|
--section-gap: 6rem;
|
|
--section-head-gap: 1.5rem;
|
|
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
QUIET — restraint as the design · system fonts, near-white paper
|
|
The opposite of every other theme. Average-sized headers (smaller
|
|
than the others), generous whitespace, no chromatic accent, no
|
|
ornament, no reveal. System-native typography is the design — a
|
|
deliberate exception to Hallmark's "pair distinctive display + body"
|
|
rule. The brief is restraint; the design honours it.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="quiet"] {
|
|
--color-paper: oklch(100% 0 0); /* pure white */
|
|
--color-paper-2: oklch(98.5% 0 0); /* card surface */
|
|
--color-paper-3: oklch(96% 0 0); /* hover surface */
|
|
--color-rule: oklch(91% 0 0); /* hairline */
|
|
--color-rule-2: oklch(82% 0 0); /* prominent border */
|
|
--color-muted: oklch(55% 0 0);
|
|
--color-neutral: oklch(40% 0 0);
|
|
--color-ink-2: oklch(28% 0 0);
|
|
--color-ink: oklch(15% 0 0); /* near-black */
|
|
--color-accent: oklch(15% 0 0); /* mono — accent IS ink */
|
|
--color-accent-ink: oklch(15% 0 0);
|
|
--color-focus: oklch(60% 0.10 240); /* a single tiny blue for keyboard focus only */
|
|
|
|
--font-display: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
--font-body: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
--font-serif: ui-serif, Georgia, "Times New Roman", serif;
|
|
--font-label: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
|
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
|
|
|
--display-weight: 500;
|
|
--display-style: normal;
|
|
|
|
/* A confident, large display — minimalism with conviction, not timidity. */
|
|
--text-display: clamp(2.5rem, 5.0vw + 0.5rem, 4.75rem);
|
|
--text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem);
|
|
--text-2xl: clamp(1.75rem, 2vw + 0.5rem, 2.5rem);
|
|
--text-xl: 1.5rem;
|
|
--text-lg: 1.25rem;
|
|
|
|
--tracking-display: -0.025em;
|
|
--tracking-tight: -0.015em;
|
|
--tracking-label: 0.04em;
|
|
|
|
--lh-tight: 1.08;
|
|
--lh-snug: 1.25;
|
|
--lh-normal: 1.55;
|
|
--lh-relaxed: 1.7;
|
|
|
|
/* Generous whitespace — the page breathes */
|
|
--section-gap: 6.5rem;
|
|
--section-head-gap: 1.5rem;
|
|
--space-2xl: 4.5rem;
|
|
--space-3xl: 7rem;
|
|
--space-4xl: 11rem;
|
|
|
|
--measure: 64ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
BLOOM — atmospheric dark · warm radial bloom · expressive
|
|
For the "AI-creative product" page (think Suno, Runway, music
|
|
tools). Dark canvas, two soft colour blooms behind the content,
|
|
confident sans display, single warm accent. The first non-print
|
|
theme in the catalog.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="bloom"] {
|
|
--color-paper: oklch(96% 0.018 35); /* warm cream — wash reads bright */
|
|
--color-paper-2: oklch(93% 0.022 35);
|
|
--color-paper-3: oklch(89% 0.026 38);
|
|
--color-rule: oklch(80% 0.020 40);
|
|
--color-rule-2: oklch(64% 0.020 40);
|
|
--color-muted: oklch(48% 0.020 40);
|
|
--color-neutral: oklch(34% 0.018 40);
|
|
--color-ink-2: oklch(22% 0.014 38);
|
|
--color-ink: oklch(14% 0.012 35);
|
|
--color-accent: oklch(64% 0.180 18); /* warm pink/coral wash */
|
|
--color-accent-ink: oklch(54% 0.190 18);
|
|
--color-accent-2: oklch(72% 0.190 45); /* secondary warm orange */
|
|
--color-focus: oklch(64% 0.180 18);
|
|
|
|
--font-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-body: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: "Instrument Serif", ui-serif, Georgia, serif;
|
|
--font-label: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
|
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
|
|
|
--display-weight: 600;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(3.0rem, 6.0vw + 1.0rem, 5.75rem);
|
|
--text-display-s: clamp(2rem, 3vw + 1rem, 3.5rem);
|
|
|
|
--tracking-display: -0.035em;
|
|
--tracking-tight: -0.02em;
|
|
--tracking-label: 0.10em;
|
|
|
|
--lh-tight: 1.04;
|
|
--lh-snug: 1.18;
|
|
|
|
--section-gap: 6.5rem;
|
|
--section-head-gap: 1.5rem;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
CORAL — modern-minimal · warm-grey paper · single coral accent
|
|
The "Stripe-not-Linear" register. Geist + General Sans. Pill CTAs,
|
|
warm greys instead of pure neutral. The accent is restrained — a
|
|
coral mark, not a flood.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="coral"] {
|
|
--color-paper: oklch(96.5% 0.005 50);
|
|
--color-paper-2: oklch(94% 0.006 50);
|
|
--color-paper-3: oklch(91% 0.008 50);
|
|
--color-rule: oklch(86% 0.008 50);
|
|
--color-rule-2: oklch(72% 0.010 50);
|
|
--color-muted: oklch(52% 0.012 50);
|
|
--color-neutral: oklch(38% 0.012 45);
|
|
--color-ink-2: oklch(26% 0.012 40);
|
|
--color-ink: oklch(20% 0.010 35);
|
|
--color-accent: oklch(64% 0.165 28); /* warm coral */
|
|
--color-accent-ink: oklch(98% 0.005 50);
|
|
--color-focus: oklch(64% 0.165 28);
|
|
|
|
--font-display: "Geist", "General Sans", ui-sans-serif, system-ui, sans-serif;
|
|
--font-body: "Geist", "General Sans", ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: ui-serif, Georgia, serif;
|
|
--font-label: "Geist Mono", ui-monospace, monospace;
|
|
--font-mono: "Geist Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 600;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(2.5rem, 5.0vw + 0.5rem, 4.5rem);
|
|
--text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem);
|
|
|
|
--tracking-display: -0.025em;
|
|
--tracking-tight: -0.015em;
|
|
--tracking-label: 0.05em;
|
|
--section-gap: 6rem;
|
|
--section-head-gap: 1.5rem;
|
|
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
VIOLET — modern-minimal · near-white + near-black · quiet violet
|
|
The Linear voice without copying it. Tight Geist, restrained ink,
|
|
one quiet violet accent on focus + small marks.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="violet"] {
|
|
--color-paper: oklch(99% 0.003 280);
|
|
--color-paper-2: oklch(97% 0.004 280);
|
|
--color-paper-3: oklch(94% 0.005 280);
|
|
--color-rule: oklch(90% 0.006 280);
|
|
--color-rule-2: oklch(78% 0.008 280);
|
|
--color-muted: oklch(50% 0.012 280);
|
|
--color-neutral: oklch(36% 0.014 280);
|
|
--color-ink-2: oklch(28% 0.018 280);
|
|
--color-ink: oklch(14% 0.015 280);
|
|
--color-accent: oklch(58% 0.16 285); /* quiet violet */
|
|
--color-accent-ink: oklch(99% 0.003 280);
|
|
--color-focus: oklch(58% 0.16 285);
|
|
|
|
--font-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-body: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: ui-serif, Georgia, serif;
|
|
--font-label: "Geist Mono", ui-monospace, monospace;
|
|
--font-mono: "Geist Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 600;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(2.5rem, 5.5vw + 0.5rem, 5.0rem);
|
|
--text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem);
|
|
|
|
--tracking-display: -0.035em;
|
|
--tracking-tight: -0.02em;
|
|
--tracking-label: 0.04em;
|
|
--section-gap: 6rem;
|
|
--section-head-gap: 1.5rem;
|
|
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
AURORA — atmospheric · cool blue-green gradient on near-black
|
|
The Linear/Vercel-after-dark register. Sentient body, single cyan
|
|
accent, two cool blooms behind the content (cyan + teal-green).
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="aurora"] {
|
|
--color-paper: oklch(11% 0.025 200); /* dark cool, cyan tilt */
|
|
--color-paper-2: oklch(15% 0.028 200);
|
|
--color-paper-3: oklch(18% 0.030 200);
|
|
--color-rule: oklch(28% 0.022 200);
|
|
--color-rule-2: oklch(38% 0.024 200);
|
|
--color-muted: oklch(60% 0.018 200);
|
|
--color-neutral: oklch(74% 0.014 200);
|
|
--color-ink-2: oklch(82% 0.012 200);
|
|
--color-ink: oklch(96% 0.010 200);
|
|
--color-accent: oklch(72% 0.170 200); /* cyan */
|
|
--color-accent-ink: oklch(11% 0.025 200);
|
|
--color-accent-2: oklch(64% 0.150 175); /* secondary teal-green */
|
|
--color-focus: oklch(72% 0.170 200);
|
|
|
|
--font-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-body: "Sentient", "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: "Sentient", ui-serif, Georgia, serif;
|
|
--font-label: "Geist Mono", ui-monospace, monospace;
|
|
--font-mono: "Geist Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 600;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(3.0rem, 6.0vw + 1.0rem, 5.75rem);
|
|
--text-display-s: clamp(2rem, 3vw + 1rem, 3.5rem);
|
|
|
|
--tracking-display: -0.035em;
|
|
--tracking-tight: -0.02em;
|
|
--tracking-label: 0.10em;
|
|
|
|
--lh-tight: 1.05;
|
|
--lh-snug: 1.18;
|
|
--section-gap: 6.5rem;
|
|
--section-head-gap: 1.5rem;
|
|
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
HALO — atmospheric · neutral charcoal canvas · warm-amber bloom
|
|
only around the hero. Less Suno, more "tool you actually work in."
|
|
The bloom is a single moment near the top; the rest of the page
|
|
is content-led on charcoal.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="halo"] {
|
|
--color-paper: oklch(13% 0.005 60); /* neutral charcoal, hint warm */
|
|
--color-paper-2: oklch(17% 0.006 60);
|
|
--color-paper-3: oklch(22% 0.008 60);
|
|
--color-rule: oklch(28% 0.008 60);
|
|
--color-rule-2: oklch(38% 0.010 60);
|
|
--color-muted: oklch(58% 0.010 60);
|
|
--color-neutral: oklch(72% 0.010 60);
|
|
--color-ink-2: oklch(80% 0.008 60);
|
|
--color-ink: oklch(94% 0.005 60);
|
|
--color-accent: oklch(74% 0.16 70); /* warm amber */
|
|
--color-accent-ink: oklch(13% 0.005 60);
|
|
--color-focus: oklch(74% 0.16 70);
|
|
|
|
--font-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-body: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: "Instrument Serif", ui-serif, Georgia, serif;
|
|
--font-label: "Geist Mono", ui-monospace, monospace;
|
|
--font-mono: "Geist Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 600;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(2.75rem, 5.0vw + 1.0rem, 5.0rem);
|
|
--text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem);
|
|
|
|
--tracking-display: -0.03em;
|
|
--tracking-tight: -0.018em;
|
|
--tracking-label: 0.08em;
|
|
--section-gap: 6rem;
|
|
--section-head-gap: 1.5rem;
|
|
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
PLUME — playful · warm cream paper · tinted bands
|
|
Warm cream throughout, alternating paper-2 bands on sections,
|
|
hover-lift on cards, soft rose accent. The page wants to feel
|
|
friendly without being twee.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="plume"] {
|
|
--color-paper: oklch(96% 0.020 70); /* warm cream */
|
|
--color-paper-2: oklch(94% 0.026 70); /* tinted band */
|
|
--color-paper-3: oklch(91% 0.030 70);
|
|
--color-rule: oklch(82% 0.022 70);
|
|
--color-rule-2: oklch(70% 0.024 70);
|
|
--color-muted: oklch(50% 0.022 60);
|
|
--color-neutral: oklch(36% 0.020 55);
|
|
--color-ink-2: oklch(30% 0.018 55);
|
|
--color-ink: oklch(22% 0.015 50);
|
|
--color-accent: oklch(68% 0.130 18); /* soft rose-pink */
|
|
--color-accent-ink: oklch(96% 0.020 70);
|
|
--color-focus: oklch(68% 0.130 18);
|
|
|
|
--font-display: "Geist", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
|
|
--font-body: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: "Newsreader", ui-serif, Georgia, serif;
|
|
--font-label: "Geist Mono", ui-monospace, monospace;
|
|
--font-mono: "Geist Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 700;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(2.75rem, 5.0vw + 0.75rem, 5.0rem);
|
|
--text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem);
|
|
|
|
--tracking-display: -0.025em;
|
|
--tracking-tight: -0.012em;
|
|
--tracking-label: 0.06em;
|
|
--section-gap: 6rem;
|
|
--section-head-gap: 1.5rem;
|
|
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
PER-THEME COMPONENT SHAPE — radius, border weight, shadow.
|
|
Defaults (in :root above): square edges, 1 px border, no shadow.
|
|
These overrides give each theme its own component voice without
|
|
touching colour or typography.
|
|
|
|
The discipline: editorial / brutalist / technical themes stay
|
|
square (the rule is the design); soft / modern themes get
|
|
measured radius (Plume 14 px is the most rounded — it's the
|
|
playful theme); brutalist / declarative themes get heavier
|
|
borders. Nothing is rounded "for fun".
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="brutal"] { --rule-card: 2px; }
|
|
[data-theme="manifesto"] { --rule-card: 2px; }
|
|
[data-theme="sport"] { --rule-card: 1.5px; }
|
|
[data-theme="garden"] { --radius-card: 6px; --radius-pill: 4px; }
|
|
[data-theme="studio"] { --radius-card: 6px; --radius-pill: 4px; --shadow-card: 0 1px 2px oklch(20% 0.014 205 / 0.05); }
|
|
[data-theme="riso"] { --radius-card: 2px; --radius-pill: 2px; }
|
|
[data-theme="quiet"] { --radius-card: 8px; --radius-pill: 999px; --radius-input: 8px; }
|
|
[data-theme="bloom"] { --radius-card: 16px; --radius-pill: 999px; --radius-input: 12px;
|
|
--shadow-card: 0 24px 48px -16px oklch(8% 0.04 35 / 0.6),
|
|
0 1px 2px oklch(8% 0.04 35 / 0.4); }
|
|
[data-theme="coral"] { --radius-card: 8px; --radius-pill: 999px; --radius-input: 6px;
|
|
--shadow-card: 0 1px 2px oklch(20% 0.01 50 / 0.06); }
|
|
[data-theme="violet"] { --radius-card: 6px; --radius-pill: 999px; --radius-input: 6px; }
|
|
[data-theme="aurora"] { --radius-card: 12px; --radius-pill: 999px; --radius-input: 10px;
|
|
--shadow-card: 0 16px 40px -16px oklch(11% 0.04 200 / 0.65),
|
|
0 1px 2px oklch(11% 0.04 200 / 0.4); }
|
|
[data-theme="halo"] { --radius-card: 8px; --radius-pill: 6px; --radius-input: 6px;
|
|
--shadow-card: 0 8px 22px -12px oklch(13% 0.02 60 / 0.5); }
|
|
[data-theme="plume"] { --radius-card: 14px; --radius-pill: 999px; --radius-input: 10px;
|
|
--shadow-card: 0 10px 28px -12px oklch(45% 0.10 18 / 0.16); }
|
|
[data-theme="editorial"] { --radius-card: 0; --radius-pill: 0; --radius-input: 0; --rule-card: 0.5px; }
|
|
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
EDITORIAL — open-design-inspired editorial premium · the 23rd theme
|
|
Warm cream paper + coral accent + Inter Tight display with
|
|
Playfair Display italic emphasis inside. Magazine-shaped: hairline
|
|
rules, asymmetric grids, Roman-numeral marginalia, 2-axis serif/sans
|
|
pairing. Inspired by github.com/nexu-io/open-design.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="editorial"] {
|
|
--color-paper: oklch(94% 0.020 75); /* warm cream, slightly cooler than Specimen */
|
|
--color-paper-2: oklch(91% 0.022 72); /* card backs */
|
|
--color-paper-3: oklch(87% 0.024 70); /* dark-slab fallback */
|
|
--color-rule: oklch(80% 0.018 70); /* hairlines */
|
|
--color-rule-2: oklch(64% 0.014 68);
|
|
--color-muted: oklch(48% 0.014 60);
|
|
--color-neutral: oklch(34% 0.012 55);
|
|
--color-ink-2: oklch(28% 0.014 55);
|
|
--color-ink: oklch(15% 0.014 280); /* near-black with cool tilt */
|
|
--color-accent: oklch(60% 0.160 35); /* coral */
|
|
--color-accent-ink: oklch(98% 0.005 70);
|
|
--color-focus: oklch(62% 0.160 35);
|
|
|
|
--font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: "Playfair Display", "Fraunces", ui-serif, Georgia, serif;
|
|
--font-label: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 800;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(2.5rem, 5.0vw + 0.75rem, 4.75rem);
|
|
--text-display-s: clamp(1.875rem, 3vw + 0.5rem, 2.875rem);
|
|
|
|
--tracking-display: -0.04em; /* tight, magazine-shaped */
|
|
--tracking-tight: -0.018em;
|
|
--tracking-label: 0.10em;
|
|
--section-gap: 6rem;
|
|
--section-head-gap: 1.5rem;
|
|
|
|
}
|
|
|