/* ============================================================ SKAY CRAFTS — DESIGN TOKENS ------------------------------------------------------------ Palette: near-black ground, near-white type, Amethyst accent. Obsidian #08080B near-black — the page ground Linen #FDF1E2 warm cream — the brand's own white Amethyst #AB92BF soft violet — the accent The site used to run cream-on-Linen with a black hero and footer. That split is gone: the black field the lockup always needed now runs the whole page, and the cream is what sits on it. Same three hues, inverted relationship. Near-black rather than #000. Pure black flattens every rule and shadow to nothing and makes white type vibrate on OLED; #08080B leaves room to build a surface above the ground and one below it, which is what makes panels read as panels. CONTRAST, measured on the ground: · --ink 18.2:1 headings and body · --ink-2 11.4:1 secondary copy · --ink-3 7.6:1 muted labels · Amethyst 7.2:1 passes as text here, unlike on cream A dark ground is forgiving where the cream one was not: there is contrast headroom at every tier. The constraint moves from legibility to restraint — the accent CAN carry words now, so the discipline is choosing not to let it carry many. ============================================================ */ :root { /* ── The brand colours ───────────────────────────────────── */ --obsidian: #08080B; --linen: #FDF1E2; --dolphin: #655A7C; --amethyst: #AB92BF; /* ── Ground — near-black, with a surface either side ─────── */ --ground: var(--obsidian); --ground-2: #101017; /* raised surface */ --ground-3: #050507; /* sunken / inset */ --surface: #0D0D13; /* A single, very slow radial sitting under the whole page. Not decoration — it stops a flat #08080B reading as a dead void on large displays. Keep it below 5% or it becomes a gradient someone will notice, which is the failure mode. */ --ground-wash: radial-gradient(1200px 800px at 72% -10%, rgba(171, 146, 191, .045), transparent 62%); /* ── Ink — the cream, and two steps down ─────────────────── */ --ink: #F6F3EE; /* headings + body, 18.2:1 */ --ink-2: #C4BECC; /* secondary copy, 11.4:1 */ --ink-3: #9E98AB; /* muted labels, 7.6:1 — the floor */ --ink-dim: #6E687C; /* de-emphasised display lines only */ /* The high-contrast fill — solid buttons, filled hovers — and the colour that sits on it. Inverted from the cream era. */ --fill-strong: var(--linen); --on-fill-strong: var(--obsidian); /* ── Accent — Amethyst ───────────────────────────────────── */ --accent: var(--amethyst); --accent-deep: #C3A8DA; /* the accent turned up, for display type */ --accent-soft: #4A3F5C; /* accent as a fill, not as a voice */ /* ── Field — kept as tokens so the nav, menu and footer can still sit a step darker than the page they float over ──── */ --field: #050507; --field-2: #0B0B11; --on-field: var(--ink); --on-field-2: var(--ink-3); /* ── Rules & fills — cream at low alpha, never grey ───────── */ --rule: rgba(246, 243, 238, .12); --rule-soft: rgba(246, 243, 238, .07); --rule-strong: rgba(246, 243, 238, .24); --rule-accent: rgba(171, 146, 191, .42); --fill-soft: rgba(246, 243, 238, .035); --fill-accent: rgba(171, 146, 191, .12); /* Rules on the darker field */ --rule-dark: rgba(246, 243, 238, .12); --rule-dark-soft: rgba(246, 243, 238, .06); --rule-dark-strong: rgba(246, 243, 238, .24); /* ── Shadow ─────────────────────────────────────────────── A drop shadow is invisible on near-black. Depth here comes from the surface being lighter than the ground and from a hairline, not from a shadow — these stay only so the two tokens resolve, and they stay almost nothing. */ --shadow-card: 0 24px 60px -30px rgba(0, 0, 0, .8); --shadow-lift: 0 36px 90px -36px rgba(0, 0, 0, .9); /* ── Type ────────────────────────────────────────────────── Vonca carries everything. Bangeline is the script accent, used sparingly. Both are commercial and load from assets/fonts/ via css/fonts.css; the Google faces after them are stand-ins that render until those files are added. Jost — geometric workhorse, closest usable match Pinyon Script — formal high-contrast script */ --font-display: 'Vonca', 'Jost', 'Josefin Sans', system-ui, sans-serif; --font-sans: 'Vonca', 'Jost', -apple-system, 'Segoe UI', Roboto, sans-serif; --font-script: 'Bangeline', 'Pinyon Script', cursive; --font-edit: var(--font-script); /* The wordmark only. Matches the serif in assets/logo-full.png so the typeset name and the logo image read as the same brand. */ --font-brand: 'Playfair Display', 'Vonca', Georgia, serif; --font-mono: var(--font-sans); /* Fluid scale */ --fs-hero: clamp(3.2rem, 12vw, 11.5rem); --fs-state: clamp(2.1rem, 5.6vw, 5.2rem); --fs-sm: clamp(1.7rem, 3.6vw, 2.9rem); --fs-lead: clamp(1rem, 1.35vw, 1.22rem); --fs-body: 1rem; --fs-micro: .68rem; --track-tight: -.03em; --track-wide: .13em; /* ── Paper ───────────────────────────────────────────────── The embossed stone tile was what gave the cream its tooth. Multiplied over near-black it does nothing but muddy the few pixels it can still reach, so it is off. The film grain in layout.css is what carries the texture now. Set this above 0 only if the ground ever goes light again; base.css still draws the tile, it just draws it at zero. */ --paper-strength: 0; --paper-tile: 760px; /* ── Space & rhythm ──────────────────────────────────────── */ --pad-x: clamp(1.25rem, 5vw, 5.5rem); --maxw: 1400px; --sec-y: clamp(6rem, 14vh, 12rem); --gap: clamp(1rem, 2vw, 1.75rem); --margin-col: clamp(0px, 7vw, 96px); /* Radii: near-square. Rounded pills read as template. */ --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; --r-pill: 999px; /* ── Motion ──────────────────────────────────────────────── */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-inout: cubic-bezier(.65, 0, .35, 1); --ease-soft: cubic-bezier(.25, .46, .45, .94); --dur-fast: .26s; --dur: .5s; --dur-slow: .9s; /* ── Portal ──────────────────────────────────────────────── */ --portal-h: 260svh; --panel-w: 51%; /* ── Layering ────────────────────────────────────────────── */ --z-grain: 60; --z-nav: 80; --z-menu: 90; --z-cursor: 100; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: .01ms; --dur: .01ms; --dur-slow: .01ms; } }