/* ============================================================================= PAGONI — TOKENS Two layers, on purpose. --raw-* names a VALUE. Change one here and it changes everywhere. semantic names a JOB. Rules only ever reference these. Re-theming the whole site should be an edit to this file and nowhere else. ============================================================================= */ :root { /* --------------------------------------------------------------------------- 1. THE THREAD CHART Read straight off a DMC embroidery chart of a peacock. These six are the brand. Nothing else is. --------------------------------------------------------------------------- */ --raw-teal-900: #0c5d54; /* DMC 3847 · dark teal green */ --raw-jade-700: #0e8a62; /* DMC 3850 · dark bright green */ --raw-mint-500: #45b394; /* DMC 3851 · light bright green */ --raw-chart-400: #bfcb45; /* DMC 16 · light chartreuse */ --raw-olive-600: #7ea83c; /* DMC 703 · chartreuse */ --raw-royal-800: #1d3e8f; /* DMC 797 · royal blue */ /* Thread charts give saturated colour and nothing else, so ground and ink are DERIVED. Every one of these is green-cast — never a neutral grey, never #000 — so that lit surfaces read as lit rather than as holes cut in paper. */ --raw-abyss-980: #030c0b; /* deepest ground, top of the paint swatch */ --raw-void-950: #04100d; /* page ground */ --raw-void-900: #071a16; /* gallery ground */ --raw-void-850: #0a2620; /* raised surfaces */ --raw-void-800: #0e332b; /* raised, one step further up */ --raw-jade-650: #0d7558; /* crayon marker wax */ /* Pagoni Nocturne, the product's signature dark theme (Pagoni-SaaS studio/assets/signature-themes.json); the overlay slides wear it. */ --raw-nocturne-ground: #0A2820; --raw-nocturne-ivory: #EEF3E8; --raw-nocturne-gold: #D5B77A; --raw-nocturne-sage: #9DC9AD; --raw-nocturne-muted: #B1C5B8; --raw-emerald-600: #00a97b; /* the swatch's brightest emerald */ --raw-phthalo-900: #051b17; /* footer ground — phthalo green run deep. Still a colour rather than an absence, but dark enough that the page closes rather than brightening at the very bottom. */ --raw-ink-050: #eaf4f0; /* type on dark */ --raw-white: #ffffff; --raw-deepink-900: #06231d; /* type on the one bright block */ /* Emissive variants for the footer's peacock light, centralised for re-theme. */ --raw-neon-mint: #7af3c0; --raw-neon-core: #edfff5; --raw-neon-chart: #c5ed7e; --raw-neon-jade: #66efc5; --raw-neon-blue: #69bdff; --raw-neon-pupil: #072d70; /* Alphas. Written out rather than computed so they can be eyeballed. */ --raw-ink-050-a70: rgb(234 244 240 / 0.70); --raw-ink-050-a50: rgb(234 244 240 / 0.50); --raw-ink-050-a38: rgb(234 244 240 / 0.38); --raw-ink-050-a16: rgb(234 244 240 / 0.16); --raw-ink-050-a08: rgb(234 244 240 / 0.08); --raw-deepink-a60: rgb(6 35 29 / 0.60); --raw-deepink-a38: rgb(6 35 29 / 0.38); --raw-void-a62: rgb(4 16 13 / 0.62); --raw-void-a38: rgb(4 16 13 / 0.38); --raw-void-a12: rgb(4 16 13 / 0.12); --raw-void-a00: rgb(4 16 13 / 0); --raw-mint-a24: rgb(69 179 148 / 0.24); --raw-mint-a12: rgb(69 179 148 / 0.12); --raw-chart-a20: rgb(191 203 69 / 0.20); --raw-tape-a50: rgb(214 222 215 / 0.50); /* crayon poster tape */ --raw-royal-a30: rgb(29 62 143 / 0.30); /* --------------------------------------------------------------------------- 2. TYPE SCALE Every number is a pixel measured on a 1440-wide frame, divided by 16. See base.css for why that makes 1rem === 1 frame-pixel at every width. --------------------------------------------------------------------------- */ --raw-text-hero: 5.625rem; /* 90px */ --raw-text-display: 4.5rem; /* 72px */ --raw-text-title: 3rem; /* 48px */ --raw-text-lead: 1.375rem; /* 22px */ --raw-text-wordmark: 1.5rem; /* 24px */ --raw-text-body: 0.875rem; /* 14px */ --raw-text-caption: 0.75rem; /* 12px */ --raw-text-micro: 0.625rem; /* 10px */ /* Line-heights are ABSOLUTE (multiplier x size), never ratios. A ratio drifts the moment a size changes; an absolute keeps the grid. */ --raw-leading-hero: 4.5rem; /* 72px = 90 x 0.8 */ --raw-leading-display: 3.6rem; /* 57.6px = 72 x 0.8 */ --raw-leading-title: 2.55rem; /* 40.8px = 48 x 0.85 */ --raw-leading-lead: 1.925rem; /* 30.8px = 22 x 1.4 */ --raw-leading-wordmark: 1.35rem; /* 21.6px = 24 x 0.9 */ --raw-leading-body: 1.4rem; /* 22.4px = 14 x 1.6 */ --raw-leading-caption: 0.6rem; /* 9.6px = 12 x 0.8 */ --raw-tracking-caption: 0.08em; --raw-tracking-micro: 0.22em; /* --------------------------------------------------------------------------- 3. SPACE, SHAPE, TIME --------------------------------------------------------------------------- */ --raw-spacing-page: 1.5rem; /* 24px — the uniform page inset */ --raw-spacing-xl: 5rem; --raw-spacing-lg: 2.5rem; --raw-spacing-md: 1.5rem; --raw-spacing-sm: 0.75rem; --raw-spacing-xs: 0.375rem; --raw-radius-xs: 0.25rem; --raw-radius-sm: 0.5rem; --raw-radius-md: 0.75rem; --raw-radius-lg: 1.25rem; --raw-radius-pill: 100rem; --raw-duration-fast: 150ms; --raw-duration-normal: 250ms; --raw-duration-slow: 600ms; --raw-ease-entrance: cubic-bezier(0.2, 0, 0, 1); --raw-ease-exit: cubic-bezier(0.4, 0, 1, 1); --raw-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* --------------------------------------------------------------------------- 4. SEMANTIC LAYER — what each value is FOR --------------------------------------------------------------------------- */ --background: var(--raw-void-800); --surface-gallery: var(--raw-void-900); --surface-raised: var(--raw-void-850); --surface-raised-high: var(--raw-void-800); --surface-glass: rgb(10 38 32 / 0.44); --surface-bright: var(--raw-ink-050); /* Magpie's static frosted grain, kept at its original CSS-pixel density. */ --texture-glass: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E"); --texture-glass-size: 140px 140px; --foreground: var(--raw-ink-050); --crayon-ink: var(--illustration-outline); --crayon-peacock-1: var(--raw-mint-500); --crayon-peacock-2: var(--raw-chart-400); --crayon-peacock-3: var(--raw-emerald-600); --crayon-peacock-4: var(--raw-neon-blue); --crayon-highlight: var(--raw-jade-650); --crayon-accent: var(--raw-chart-400); --crayon-accent-2: var(--raw-neon-blue); --crayon-tape: var(--raw-tape-a50); --illustration-outline: var(--raw-white); --brand-wordmark: var(--raw-white); --slide-ground: var(--raw-nocturne-ground); --slide-ink: var(--raw-nocturne-ivory); --slide-gold: var(--raw-nocturne-gold); --slide-sage: var(--raw-nocturne-sage); --slide-muted: var(--raw-nocturne-muted); --slide-line: rgb(238 243 232 / 0.14); --foreground-strong: var(--raw-ink-050-a70); --foreground-muted: var(--raw-ink-050-a50); --foreground-faint: var(--raw-ink-050-a38); --foreground-ink: var(--raw-deepink-900); --foreground-ink-muted: var(--raw-deepink-a60); /* Chartreuse is the signal colour. It marks STATUS — the recording lamp, the live cursor, the primary action — and is spent nowhere else at full strength. Break this rule and the page stops having a focal point. */ --foreground-signal: var(--raw-chart-400); --foreground-accent: var(--raw-mint-500); --border-hairline: var(--raw-ink-050-a16); --border-soft: var(--raw-ink-050-a08); --border-signal: var(--raw-chart-a20); --scrim-page: var(--raw-void-a38); --scrim-media: var(--raw-void-a62); --scrim-bright: rgb(6 35 29 / 0.12); --rounding-media: var(--raw-radius-xs); --rounding-card: var(--raw-radius-md); --rounding-panel: var(--raw-radius-lg); /* --------------------------------------------------------------------------- ONE TYPEFACE. The whole site is set in Inter Tight — the face the navigation already used — and the variety comes from WEIGHT and ITALIC rather than from swapping families. An earlier version ran four families (a display serif, a mono, a script and this); they fought each other and none of them won. All four aliases below now resolve to the same stack, on purpose. They are kept as separate names so a rule can still say WHAT it is setting — display type, technical chrome — and so reintroducing a second family later is one edit here rather than a hunt through every section. --------------------------------------------------------------------------- */ --typeface-ui: "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --typeface-display: var(--typeface-ui); --typeface-mono: var(--typeface-ui); --typeface-hand: var(--typeface-ui); /* Weights, named by job. */ --weight-display: 600; --weight-strong: 600; --weight-medium: 500; --weight-body: 400; /* --------------------------------------------------------------------------- 5. FLOW VARIABLES Written every frame by js/sections/flow.js. Declared here with resting values so the page is correct before a single frame has run — and so it stays correct under prefers-reduced-motion, where nothing writes them. --------------------------------------------------------------------------- */ --flow-p: 0; /* 0 at the top of the document, 1 at the bottom */ --flow-depth: 1; /* Full-depth lighter ground, fixed throughout the page. */ } /* The one place a token is redefined: inside the bright block, where the ground inverts. Everything downstream reads the same semantic names and just works. */ .is-bright { --foreground: var(--raw-deepink-900); --foreground-strong: var(--raw-deepink-a60); --foreground-muted: var(--raw-deepink-a60); --foreground-faint: var(--raw-deepink-a38); --border-hairline: rgb(6 35 29 / 0.16); --border-soft: rgb(6 35 29 / 0.08); }