/* ============================================================================
GLEE — VISUAL STYLE SYSTEM · token + art layer · v2 (2026-08-06)
----------------------------------------------------------------------------
GENERATED FILE — do not hand-edit. Source of truth:
brand/geometric_patina/palettes.json (rebuild: tools/build_patina_css.py)
NINE STYLES, ONE SYSTEM. Captain, 2026-08-06: "can we not turn the current
site look into one style and add geometric patina?" So `bios` — the flat
pastel-on-pure-black canon the site runs today — is a style in here like any
other, carrying glee-tokens.css v1's exact hexes. It is not patina's rival;
it is the flat end of the same dial.
bios flat BIOS canon · the current site look (art off)
amber UI dark · hero · patina default
cobalt website · media & insights
ember apparel · forge
verdigris products · objects
ultraviolet video games · worlds
sepia video · motion
glacial UI light · workbench
paper images & presentations
THE TREATMENT DIAL. --art-opacity decides how much of the art layer shows:
0 under `bios`, 1 under the patina styles. Every art layer multiplies through
it, so the SAME markup renders flat or full. No conditional markup, no second
template, no fork.
ADDITIVE over glee-tokens.css: reuses its variable names AND its legacy
aliases (--glee-*, --vs-*, --accent…), so existing components re-skin with no
component edits. Remove the stylesheet link and everything reverts.
Every text token in every style clears WCAG AA (4.5:1) against its own
ground — checked at build time, ratios recorded in palettes.json.
--patina-hot is the art-derived signature colour and is DECORATIVE by
contract (glows, strokes, marks). For text use --patina-hot-text.
Usage: ... or any element scope
Alias: data-patina="cobalt" still selects the same style
Default: amber (no attribute needed)
============================================================================ */
/* ---- DEFAULT STYLE: bios ----
A page that does not ask for a style gets the CURRENT SITE LOOK. Defaulting
to `amber` meant that merely linking this stylesheet re-skinned the whole
public site to patina — a visible change nobody requested, arriving as a side
effect of mounting a layer. Opting in is a decision; it should look like one.
Set data-style="amber" (or any other) to opt a page in. */
:root {
color-scheme: dark;
--art-opacity: 0;
--bg: #000000;
--panel: #100f0c;
--panel2: #17150f;
--surf: #100f0c;
--line: #2a2925;
--edge: #2a2925;
--ink: #dcd8cf;
--mist: #9aa7b0;
--muted: #9aa7b0;
--faint: #6a7882;
--sand: #d8c08a;
--act: #93d9ab;
--move: #8fd2d6;
--tab: #b3a5e6;
--util: #e8a3ab;
--rose: #dd6d84;
--num: #d8c08a;
--patina-hot: #d8c08a;
--patina-hot-text: #d8c08a;
--patina-cool: #8fd2d6;
--patina-glow: #e6d3a2;
--text: #dcd8cf;
--text-soft: #dcd8cf;
--void: #000000;
--graphite: #100f0c;
--surface: #100f0c;
--accent: #d8c08a;
--accent2: #8fd2d6;
--page-accent: #d8c08a;
--page-accent-2: #8fd2d6;
--gold: #d8c08a;
--amber: #d8c08a;
--amber-hot: #e6d3a2;
--green: #93d9ab;
--blue: #8fd2d6;
--violet: #b3a5e6;
--red: #dd6d84;
--glee-bg: #000000;
--glee-canvas-bg: #000000;
--glee-void-black: #000000;
--glee-bg-paper: #100f0c;
--glee-graphite-steel: #100f0c;
--glee-line: #2a2925;
--glee-forged-gray: #2a2925;
--glee-bone: #dcd8cf;
--glee-bone-white: #dcd8cf;
--glee-gold: #d8c08a;
--glee-gold-sem: #d8c08a;
--glee-amber: #d8c08a;
--glee-gold-dim: #9aa7b0;
--glee-receipt-amber: #d8c08a;
--glee-green: #93d9ab;
--glee-verified-green: #93d9ab;
--glee-blue: #8fd2d6;
--glee-intelligence-blue: #8fd2d6;
--glee-purple: #b3a5e6;
--glee-speculative-violet: #b3a5e6;
--glee-red: #dd6d84;
--glee-hard-stop-red: #dd6d84;
}
/* ---- the eight palettes ---- */
/* bios — flat BIOS canon · the current site look · derived from (none — flat by design) */
[data-style="bios"], [data-patina="bios"] {
color-scheme: dark;
--art-opacity: 0;
--bg: #000000;
--panel: #100f0c;
--panel2: #17150f;
--surf: #100f0c;
--line: #2a2925;
--edge: #2a2925;
--ink: #dcd8cf;
--mist: #9aa7b0;
--muted: #9aa7b0;
--faint: #6a7882;
--sand: #d8c08a;
--act: #93d9ab;
--move: #8fd2d6;
--tab: #b3a5e6;
--util: #e8a3ab;
--rose: #dd6d84;
--num: #d8c08a;
--patina-hot: #d8c08a;
--patina-hot-text: #d8c08a;
--patina-cool: #8fd2d6;
--patina-glow: #e6d3a2;
--text: #dcd8cf;
--text-soft: #dcd8cf;
--void: #000000;
--graphite: #100f0c;
--surface: #100f0c;
--accent: #d8c08a;
--accent2: #8fd2d6;
--page-accent: #d8c08a;
--page-accent-2: #8fd2d6;
--gold: #d8c08a;
--amber: #d8c08a;
--amber-hot: #e6d3a2;
--green: #93d9ab;
--blue: #8fd2d6;
--violet: #b3a5e6;
--red: #dd6d84;
--glee-bg: #000000;
--glee-canvas-bg: #000000;
--glee-void-black: #000000;
--glee-bg-paper: #100f0c;
--glee-graphite-steel: #100f0c;
--glee-line: #2a2925;
--glee-forged-gray: #2a2925;
--glee-bone: #dcd8cf;
--glee-bone-white: #dcd8cf;
--glee-gold: #d8c08a;
--glee-gold-sem: #d8c08a;
--glee-amber: #d8c08a;
--glee-gold-dim: #9aa7b0;
--glee-receipt-amber: #d8c08a;
--glee-green: #93d9ab;
--glee-verified-green: #93d9ab;
--glee-blue: #8fd2d6;
--glee-intelligence-blue: #8fd2d6;
--glee-purple: #b3a5e6;
--glee-speculative-violet: #b3a5e6;
--glee-red: #dd6d84;
--glee-hard-stop-red: #dd6d84;
}
/* amber — UI · dark default · hero · derived from plate_12_amber-teal-square.png */
[data-style="amber"], [data-patina="amber"] {
color-scheme: dark;
--art-opacity: 1;
--bg: #0e0c09;
--panel: #161410;
--panel2: #1f1c17;
--surf: #161410;
--line: #322e27;
--edge: #322e27;
--ink: #e1ddd6;
--mist: #a0abb1;
--muted: #7a8890;
--faint: #5e696e;
--sand: #ddc692;
--act: #92ddab;
--move: #92d9dd;
--tab: #a192dd;
--util: #dd929b;
--rose: #dd6e7d;
--num: #ddc692;
--patina-hot: #dcbf85;
--patina-hot-text: #dcbf85;
--patina-cool: #32696a;
--patina-glow: #e3d4b5;
--text: #e1ddd6;
--text-soft: #e1ddd6;
--void: #0e0c09;
--graphite: #161410;
--surface: #161410;
--accent: #ddc692;
--accent2: #92d9dd;
--page-accent: #ddc692;
--page-accent-2: #92d9dd;
--gold: #ddc692;
--amber: #ddc692;
--amber-hot: #e3d4b5;
--green: #92ddab;
--blue: #92d9dd;
--violet: #a192dd;
--red: #dd6e7d;
--glee-bg: #0e0c09;
--glee-canvas-bg: #0e0c09;
--glee-void-black: #0e0c09;
--glee-bg-paper: #161410;
--glee-graphite-steel: #161410;
--glee-line: #322e27;
--glee-forged-gray: #322e27;
--glee-bone: #e1ddd6;
--glee-bone-white: #e1ddd6;
--glee-gold: #ddc692;
--glee-gold-sem: #ddc692;
--glee-amber: #ddc692;
--glee-gold-dim: #7a8890;
--glee-receipt-amber: #dcbf85;
--glee-green: #92ddab;
--glee-verified-green: #92ddab;
--glee-blue: #92d9dd;
--glee-intelligence-blue: #92d9dd;
--glee-purple: #a192dd;
--glee-speculative-violet: #a192dd;
--glee-red: #dd6e7d;
--glee-hard-stop-red: #dd6e7d;
}
/* coral — website · media & insights · derived from board_v2_website_cobalt.png */
[data-style="coral"], [data-patina="coral"] {
color-scheme: dark;
--art-opacity: 1;
--bg: #0e0a09;
--panel: #161110;
--panel2: #1f1817;
--surf: #161110;
--line: #322827;
--edge: #322827;
--ink: #e1ddd6;
--mist: #a0abb1;
--muted: #7a8890;
--faint: #5e696e;
--sand: #ddc692;
--act: #92ddab;
--move: #92d9dd;
--tab: #a192dd;
--util: #dd929b;
--rose: #dd6e7d;
--num: #ddc692;
--patina-hot: #ee6453;
--patina-hot-text: #ee6453;
--patina-cool: #59a2b0;
--patina-glow: #e3bab5;
--text: #e1ddd6;
--text-soft: #e1ddd6;
--void: #0e0a09;
--graphite: #161110;
--surface: #161110;
--accent: #ddc692;
--accent2: #92d9dd;
--page-accent: #ddc692;
--page-accent-2: #92d9dd;
--gold: #ddc692;
--amber: #ddc692;
--amber-hot: #e3bab5;
--green: #92ddab;
--blue: #92d9dd;
--violet: #a192dd;
--red: #dd6e7d;
--glee-bg: #0e0a09;
--glee-canvas-bg: #0e0a09;
--glee-void-black: #0e0a09;
--glee-bg-paper: #161110;
--glee-graphite-steel: #161110;
--glee-line: #322827;
--glee-forged-gray: #322827;
--glee-bone: #e1ddd6;
--glee-bone-white: #e1ddd6;
--glee-gold: #ddc692;
--glee-gold-sem: #ddc692;
--glee-amber: #ddc692;
--glee-gold-dim: #7a8890;
--glee-receipt-amber: #ee6453;
--glee-green: #92ddab;
--glee-verified-green: #92ddab;
--glee-blue: #92d9dd;
--glee-intelligence-blue: #92d9dd;
--glee-purple: #a192dd;
--glee-speculative-violet: #a192dd;
--glee-red: #dd6e7d;
--glee-hard-stop-red: #dd6e7d;
}
/* ember — apparel · forge · derived from board_v2_apparel_ember.png */
[data-style="ember"], [data-patina="ember"] {
color-scheme: dark;
--art-opacity: 1;
--bg: #0e0a09;
--panel: #161210;
--panel2: #1f1917;
--surf: #161210;
--line: #322a27;
--edge: #322a27;
--ink: #e1ddd6;
--mist: #a0abb1;
--muted: #7a8890;
--faint: #5e696e;
--sand: #ddc692;
--act: #92ddab;
--move: #92d9dd;
--tab: #a192dd;
--util: #dd929b;
--rose: #dd6e7d;
--num: #ddc692;
--patina-hot: #c4532f;
--patina-hot-text: #cc5631;
--patina-cool: #cab396;
--patina-glow: #e3c0b5;
--text: #e1ddd6;
--text-soft: #e1ddd6;
--void: #0e0a09;
--graphite: #161210;
--surface: #161210;
--accent: #ddc692;
--accent2: #92d9dd;
--page-accent: #ddc692;
--page-accent-2: #92d9dd;
--gold: #ddc692;
--amber: #ddc692;
--amber-hot: #e3c0b5;
--green: #92ddab;
--blue: #92d9dd;
--violet: #a192dd;
--red: #dd6e7d;
--glee-bg: #0e0a09;
--glee-canvas-bg: #0e0a09;
--glee-void-black: #0e0a09;
--glee-bg-paper: #161210;
--glee-graphite-steel: #161210;
--glee-line: #322a27;
--glee-forged-gray: #322a27;
--glee-bone: #e1ddd6;
--glee-bone-white: #e1ddd6;
--glee-gold: #ddc692;
--glee-gold-sem: #ddc692;
--glee-amber: #ddc692;
--glee-gold-dim: #7a8890;
--glee-receipt-amber: #cc5631;
--glee-green: #92ddab;
--glee-verified-green: #92ddab;
--glee-blue: #92d9dd;
--glee-intelligence-blue: #92d9dd;
--glee-purple: #a192dd;
--glee-speculative-violet: #a192dd;
--glee-red: #dd6e7d;
--glee-hard-stop-red: #dd6e7d;
}
/* verdigris — products · objects · derived from board_v2_products_verdigris.png */
[data-style="verdigris"], [data-patina="verdigris"] {
color-scheme: dark;
--art-opacity: 1;
--bg: #0e0c09;
--panel: #161410;
--panel2: #1f1b17;
--surf: #161410;
--line: #322d27;
--edge: #322d27;
--ink: #e1ddd6;
--mist: #a0abb1;
--muted: #7a8890;
--faint: #5e696e;
--sand: #ddc692;
--act: #92ddab;
--move: #92d9dd;
--tab: #a192dd;
--util: #dd929b;
--rose: #dd6e7d;
--num: #ddc692;
--patina-hot: #ceb594;
--patina-hot-text: #ceb594;
--patina-cool: #7d8a6a;
--patina-glow: #e3cfb5;
--text: #e1ddd6;
--text-soft: #e1ddd6;
--void: #0e0c09;
--graphite: #161410;
--surface: #161410;
--accent: #ddc692;
--accent2: #92d9dd;
--page-accent: #ddc692;
--page-accent-2: #92d9dd;
--gold: #ddc692;
--amber: #ddc692;
--amber-hot: #e3cfb5;
--green: #92ddab;
--blue: #92d9dd;
--violet: #a192dd;
--red: #dd6e7d;
--glee-bg: #0e0c09;
--glee-canvas-bg: #0e0c09;
--glee-void-black: #0e0c09;
--glee-bg-paper: #161410;
--glee-graphite-steel: #161410;
--glee-line: #322d27;
--glee-forged-gray: #322d27;
--glee-bone: #e1ddd6;
--glee-bone-white: #e1ddd6;
--glee-gold: #ddc692;
--glee-gold-sem: #ddc692;
--glee-amber: #ddc692;
--glee-gold-dim: #7a8890;
--glee-receipt-amber: #ceb594;
--glee-green: #92ddab;
--glee-verified-green: #92ddab;
--glee-blue: #92d9dd;
--glee-intelligence-blue: #92d9dd;
--glee-purple: #a192dd;
--glee-speculative-violet: #a192dd;
--glee-red: #dd6e7d;
--glee-hard-stop-red: #dd6e7d;
}
/* ultraviolet — video games · worlds · derived from board_v2_games_ultraviolet.png */
[data-style="ultraviolet"], [data-patina="ultraviolet"] {
color-scheme: dark;
--art-opacity: 1;
--bg: #0e090b;
--panel: #161013;
--panel2: #1f171b;
--surf: #161013;
--line: #32272c;
--edge: #32272c;
--ink: #e1ddd6;
--mist: #a0abb1;
--muted: #7a8890;
--faint: #5e696e;
--sand: #ddc692;
--act: #92ddab;
--move: #92d9dd;
--tab: #a192dd;
--util: #dd929b;
--rose: #dd6e7d;
--num: #ddc692;
--patina-hot: #d67ea7;
--patina-hot-text: #d67ea7;
--patina-cool: #7991c5;
--patina-glow: #e3b5ca;
--text: #e1ddd6;
--text-soft: #e1ddd6;
--void: #0e090b;
--graphite: #161013;
--surface: #161013;
--accent: #ddc692;
--accent2: #92d9dd;
--page-accent: #ddc692;
--page-accent-2: #92d9dd;
--gold: #ddc692;
--amber: #ddc692;
--amber-hot: #e3b5ca;
--green: #92ddab;
--blue: #92d9dd;
--violet: #a192dd;
--red: #dd6e7d;
--glee-bg: #0e090b;
--glee-canvas-bg: #0e090b;
--glee-void-black: #0e090b;
--glee-bg-paper: #161013;
--glee-graphite-steel: #161013;
--glee-line: #32272c;
--glee-forged-gray: #32272c;
--glee-bone: #e1ddd6;
--glee-bone-white: #e1ddd6;
--glee-gold: #ddc692;
--glee-gold-sem: #ddc692;
--glee-amber: #ddc692;
--glee-gold-dim: #7a8890;
--glee-receipt-amber: #d67ea7;
--glee-green: #92ddab;
--glee-verified-green: #92ddab;
--glee-blue: #92d9dd;
--glee-intelligence-blue: #92d9dd;
--glee-purple: #a192dd;
--glee-speculative-violet: #a192dd;
--glee-red: #dd6e7d;
--glee-hard-stop-red: #dd6e7d;
}
/* sepia — video · motion · derived from board_v2_video_sepia.png */
[data-style="sepia"], [data-patina="sepia"] {
color-scheme: dark;
--art-opacity: 1;
--bg: #0e0a09;
--panel: #161210;
--panel2: #1f1917;
--surf: #161210;
--line: #322a27;
--edge: #322a27;
--ink: #e1ddd6;
--mist: #a0abb1;
--muted: #7a8890;
--faint: #5e696e;
--sand: #ddc692;
--act: #92ddab;
--move: #92d9dd;
--tab: #a192dd;
--util: #dd929b;
--rose: #dd6e7d;
--num: #ddc692;
--patina-hot: #c4552e;
--patina-hot-text: #cc5930;
--patina-cool: #ba996a;
--patina-glow: #e3c1b5;
--text: #e1ddd6;
--text-soft: #e1ddd6;
--void: #0e0a09;
--graphite: #161210;
--surface: #161210;
--accent: #ddc692;
--accent2: #92d9dd;
--page-accent: #ddc692;
--page-accent-2: #92d9dd;
--gold: #ddc692;
--amber: #ddc692;
--amber-hot: #e3c1b5;
--green: #92ddab;
--blue: #92d9dd;
--violet: #a192dd;
--red: #dd6e7d;
--glee-bg: #0e0a09;
--glee-canvas-bg: #0e0a09;
--glee-void-black: #0e0a09;
--glee-bg-paper: #161210;
--glee-graphite-steel: #161210;
--glee-line: #322a27;
--glee-forged-gray: #322a27;
--glee-bone: #e1ddd6;
--glee-bone-white: #e1ddd6;
--glee-gold: #ddc692;
--glee-gold-sem: #ddc692;
--glee-amber: #ddc692;
--glee-gold-dim: #7a8890;
--glee-receipt-amber: #cc5930;
--glee-green: #92ddab;
--glee-verified-green: #92ddab;
--glee-blue: #92d9dd;
--glee-intelligence-blue: #92d9dd;
--glee-purple: #a192dd;
--glee-speculative-violet: #a192dd;
--glee-red: #dd6e7d;
--glee-hard-stop-red: #dd6e7d;
}
/* bone — UI · light workbench · derived from board_v2_ui_glacial.png */
[data-style="bone"], [data-patina="bone"] {
color-scheme: light;
--art-opacity: 1;
--bg: #eeecea;
--panel: #f7f6f5;
--panel2: #e4e2df;
--surf: #f7f6f5;
--line: #cfcac4;
--edge: #cfcac4;
--ink: #1e2429;
--mist: #535c65;
--muted: #6c757f;
--faint: #8c949b;
--sand: #7c5f1d;
--act: #1a7037;
--move: #1a6b70;
--tab: #3a2395;
--util: #952330;
--rose: #b42236;
--num: #7c5f1d;
--patina-hot: #c9821f;
--patina-hot-text: #946017;
--patina-cool: #3b6a71;
--patina-glow: #d8bd97;
--text: #1e2429;
--text-soft: #1e2429;
--void: #eeecea;
--graphite: #f7f6f5;
--surface: #f7f6f5;
--accent: #7c5f1d;
--accent2: #1a6b70;
--page-accent: #7c5f1d;
--page-accent-2: #1a6b70;
--gold: #7c5f1d;
--amber: #7c5f1d;
--amber-hot: #d8bd97;
--green: #1a7037;
--blue: #1a6b70;
--violet: #3a2395;
--red: #b42236;
--glee-bg: #eeecea;
--glee-canvas-bg: #eeecea;
--glee-void-black: #eeecea;
--glee-bg-paper: #f7f6f5;
--glee-graphite-steel: #f7f6f5;
--glee-line: #cfcac4;
--glee-forged-gray: #cfcac4;
--glee-bone: #1e2429;
--glee-bone-white: #1e2429;
--glee-gold: #7c5f1d;
--glee-gold-sem: #7c5f1d;
--glee-amber: #7c5f1d;
--glee-gold-dim: #6c757f;
--glee-receipt-amber: #946017;
--glee-green: #1a7037;
--glee-verified-green: #1a7037;
--glee-blue: #1a6b70;
--glee-intelligence-blue: #1a6b70;
--glee-purple: #3a2395;
--glee-speculative-violet: #3a2395;
--glee-red: #b42236;
--glee-hard-stop-red: #b42236;
}
/* paper — images & presentations · derived from board_v2_presentations_paper.png */
[data-style="paper"], [data-patina="paper"] {
color-scheme: light;
--art-opacity: 1;
--bg: #eeebea;
--panel: #f7f6f5;
--panel2: #e4e1df;
--surf: #f7f6f5;
--line: #cfc8c4;
--edge: #cfc8c4;
--ink: #1e2429;
--mist: #535c65;
--muted: #6c757f;
--faint: #8c949b;
--sand: #7c5f1d;
--act: #1a7037;
--move: #1a6b70;
--tab: #3a2395;
--util: #952330;
--rose: #b42236;
--num: #7c5f1d;
--patina-hot: #9d603f;
--patina-hot-text: #965c3c;
--patina-cool: #29619e;
--patina-glow: #d8ae97;
--text: #1e2429;
--text-soft: #1e2429;
--void: #eeebea;
--graphite: #f7f6f5;
--surface: #f7f6f5;
--accent: #7c5f1d;
--accent2: #1a6b70;
--page-accent: #7c5f1d;
--page-accent-2: #1a6b70;
--gold: #7c5f1d;
--amber: #7c5f1d;
--amber-hot: #d8ae97;
--green: #1a7037;
--blue: #1a6b70;
--violet: #3a2395;
--red: #b42236;
--glee-bg: #eeebea;
--glee-canvas-bg: #eeebea;
--glee-void-black: #eeebea;
--glee-bg-paper: #f7f6f5;
--glee-graphite-steel: #f7f6f5;
--glee-line: #cfc8c4;
--glee-forged-gray: #cfc8c4;
--glee-bone: #1e2429;
--glee-bone-white: #1e2429;
--glee-gold: #7c5f1d;
--glee-gold-sem: #7c5f1d;
--glee-amber: #7c5f1d;
--glee-gold-dim: #6c757f;
--glee-receipt-amber: #965c3c;
--glee-green: #1a7037;
--glee-verified-green: #1a7037;
--glee-blue: #1a6b70;
--glee-intelligence-blue: #1a6b70;
--glee-purple: #3a2395;
--glee-speculative-violet: #3a2395;
--glee-red: #b42236;
--glee-hard-stop-red: #b42236;
}
/* ---- body-scoped keep-list pages (glee-visual-site.css declares its tokens
on the body element, so they must be re-declared at that specificity) ---- */
body.glee-visual-site[data-style="bios"],
body.glee-visual-site[data-patina="bios"] {
--vs-bg: #000000;
--vs-panel: #100f0c;
--vs-panel-strong: #17150f;
--vs-text: #dcd8cf;
--vs-dim: #9aa7b0;
--vs-muted: #9aa7b0;
--vs-accent: #d8c08a;
--vs-accent-2: #8fd2d6;
--vs-safe: #93d9ab;
--vs-grid: color-mix(in srgb, var(--patina-hot) 4%, transparent);
--vs-line: color-mix(in srgb, var(--patina-hot) 22%, transparent);
--vs-line-soft: color-mix(in srgb, var(--ink) 12%, transparent);
}
body.glee-visual-site[data-style="amber"],
body.glee-visual-site[data-patina="amber"] {
--vs-bg: #0e0c09;
--vs-panel: #161410;
--vs-panel-strong: #1f1c17;
--vs-text: #e1ddd6;
--vs-dim: #a0abb1;
--vs-muted: #7a8890;
--vs-accent: #ddc692;
--vs-accent-2: #92d9dd;
--vs-safe: #92ddab;
--vs-grid: color-mix(in srgb, var(--patina-hot) 4%, transparent);
--vs-line: color-mix(in srgb, var(--patina-hot) 22%, transparent);
--vs-line-soft: color-mix(in srgb, var(--ink) 12%, transparent);
}
body.glee-visual-site[data-style="coral"],
body.glee-visual-site[data-patina="coral"] {
--vs-bg: #0e0a09;
--vs-panel: #161110;
--vs-panel-strong: #1f1817;
--vs-text: #e1ddd6;
--vs-dim: #a0abb1;
--vs-muted: #7a8890;
--vs-accent: #ddc692;
--vs-accent-2: #92d9dd;
--vs-safe: #92ddab;
--vs-grid: color-mix(in srgb, var(--patina-hot) 4%, transparent);
--vs-line: color-mix(in srgb, var(--patina-hot) 22%, transparent);
--vs-line-soft: color-mix(in srgb, var(--ink) 12%, transparent);
}
body.glee-visual-site[data-style="ember"],
body.glee-visual-site[data-patina="ember"] {
--vs-bg: #0e0a09;
--vs-panel: #161210;
--vs-panel-strong: #1f1917;
--vs-text: #e1ddd6;
--vs-dim: #a0abb1;
--vs-muted: #7a8890;
--vs-accent: #ddc692;
--vs-accent-2: #92d9dd;
--vs-safe: #92ddab;
--vs-grid: color-mix(in srgb, var(--patina-hot) 4%, transparent);
--vs-line: color-mix(in srgb, var(--patina-hot) 22%, transparent);
--vs-line-soft: color-mix(in srgb, var(--ink) 12%, transparent);
}
body.glee-visual-site[data-style="verdigris"],
body.glee-visual-site[data-patina="verdigris"] {
--vs-bg: #0e0c09;
--vs-panel: #161410;
--vs-panel-strong: #1f1b17;
--vs-text: #e1ddd6;
--vs-dim: #a0abb1;
--vs-muted: #7a8890;
--vs-accent: #ddc692;
--vs-accent-2: #92d9dd;
--vs-safe: #92ddab;
--vs-grid: color-mix(in srgb, var(--patina-hot) 4%, transparent);
--vs-line: color-mix(in srgb, var(--patina-hot) 22%, transparent);
--vs-line-soft: color-mix(in srgb, var(--ink) 12%, transparent);
}
body.glee-visual-site[data-style="ultraviolet"],
body.glee-visual-site[data-patina="ultraviolet"] {
--vs-bg: #0e090b;
--vs-panel: #161013;
--vs-panel-strong: #1f171b;
--vs-text: #e1ddd6;
--vs-dim: #a0abb1;
--vs-muted: #7a8890;
--vs-accent: #ddc692;
--vs-accent-2: #92d9dd;
--vs-safe: #92ddab;
--vs-grid: color-mix(in srgb, var(--patina-hot) 4%, transparent);
--vs-line: color-mix(in srgb, var(--patina-hot) 22%, transparent);
--vs-line-soft: color-mix(in srgb, var(--ink) 12%, transparent);
}
body.glee-visual-site[data-style="sepia"],
body.glee-visual-site[data-patina="sepia"] {
--vs-bg: #0e0a09;
--vs-panel: #161210;
--vs-panel-strong: #1f1917;
--vs-text: #e1ddd6;
--vs-dim: #a0abb1;
--vs-muted: #7a8890;
--vs-accent: #ddc692;
--vs-accent-2: #92d9dd;
--vs-safe: #92ddab;
--vs-grid: color-mix(in srgb, var(--patina-hot) 4%, transparent);
--vs-line: color-mix(in srgb, var(--patina-hot) 22%, transparent);
--vs-line-soft: color-mix(in srgb, var(--ink) 12%, transparent);
}
body.glee-visual-site[data-style="bone"],
body.glee-visual-site[data-patina="bone"] {
--vs-bg: #eeecea;
--vs-panel: #f7f6f5;
--vs-panel-strong: #e4e2df;
--vs-text: #1e2429;
--vs-dim: #535c65;
--vs-muted: #6c757f;
--vs-accent: #7c5f1d;
--vs-accent-2: #1a6b70;
--vs-safe: #1a7037;
--vs-grid: color-mix(in srgb, var(--patina-hot) 4%, transparent);
--vs-line: color-mix(in srgb, var(--patina-hot) 22%, transparent);
--vs-line-soft: color-mix(in srgb, var(--ink) 12%, transparent);
}
body.glee-visual-site[data-style="paper"],
body.glee-visual-site[data-patina="paper"] {
--vs-bg: #eeebea;
--vs-panel: #f7f6f5;
--vs-panel-strong: #e4e1df;
--vs-text: #1e2429;
--vs-dim: #535c65;
--vs-muted: #6c757f;
--vs-accent: #7c5f1d;
--vs-accent-2: #1a6b70;
--vs-safe: #1a7037;
--vs-grid: color-mix(in srgb, var(--patina-hot) 4%, transparent);
--vs-line: color-mix(in srgb, var(--patina-hot) 22%, transparent);
--vs-line-soft: color-mix(in srgb, var(--ink) 12%, transparent);
}
/* ---- Phoenix Forge family, light mode only ----
round-zero-style.css declares --forge-* at :root with dark-only values
and reads them 246 times. Emitted for the light palettes only: the dark
styles already carry these hexes and do not need re-deriving. ---- */
[data-style="bone"], [data-patina="bone"] {
--forge-ink: #eeecea;
--forge-panel: #f7f6f5;
--forge-panel-2: #e4e2df;
--forge-text: #1e2429;
--forge-soft: #535c65;
--forge-muted: #6c757f;
--forge-amber: #7c5f1d;
--forge-gold: #7c5f1d;
--forge-blue: #1a6b70;
--forge-cyan: #1a6b70;
--forge-violet: #3a2395;
--forge-green: #1a7037;
--forge-line: color-mix(in srgb, var(--ink) 18%, transparent);
--forge-hot-line: color-mix(in srgb, var(--patina-hot) 48%, transparent);
--forge-shadow: 0 30px 100px color-mix(in srgb, var(--ink) 16%, transparent);
}
[data-style="paper"], [data-patina="paper"] {
--forge-ink: #eeebea;
--forge-panel: #f7f6f5;
--forge-panel-2: #e4e1df;
--forge-text: #1e2429;
--forge-soft: #535c65;
--forge-muted: #6c757f;
--forge-amber: #7c5f1d;
--forge-gold: #7c5f1d;
--forge-blue: #1a6b70;
--forge-cyan: #1a6b70;
--forge-violet: #3a2395;
--forge-green: #1a7037;
--forge-line: color-mix(in srgb, var(--ink) 18%, transparent);
--forge-hot-line: color-mix(in srgb, var(--patina-hot) 48%, transparent);
--forge-shadow: 0 30px 100px color-mix(in srgb, var(--ink) 16%, transparent);
}
/* ============================================================================
THE FIVE VISUAL-DNA PILLARS, as CSS you can actually mount
Layered geometry · technical marks · patina texture · controlled light ·
asymmetric balance. All self-contained: no external assets, no network.
============================================================================ */
.patina {
position: relative;
background: var(--bg);
color: var(--ink);
isolation: isolate;
}
/* --- 1. LAYERED GEOMETRY --- the load-bearing pillar.
Gradients cannot do this. The style depends on HARD-EDGED translucent shapes
whose boundaries you can see crossing each other; soft gradients read as fog.
So the field is real SVG geometry, mounted as a child element:
...svg...
Centres sit outside the frame — no composition ever resolves to a glowing
circle in the middle, which is the failure mode of the first source
generation. See styleguide.html for the canonical markup. --- */
.patina-geo {
position: fixed; /* ambient field: the page is a window onto it */
inset: 0;
z-index: -2;
overflow: hidden;
pointer-events: none;
/* TREATMENT DIAL. Every art layer multiplies through --art-opacity, so the
SAME markup renders flat under `bios` and full under a patina style. This
is what lets the current site look be a style in this system rather than
its opposite — no conditional markup, no second template. */
opacity: var(--art-opacity, 1);
}
.patina-geo > svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* on dark grounds light accumulates; on light grounds it subtracts */
.patina-geo { mix-blend-mode: screen; }
[data-patina="glacial"] .patina-geo,
[data-patina="paper"] .patina-geo { mix-blend-mode: multiply; }
.patina-geo .g-fill-cool { fill: var(--patina-cool); }
.patina-geo .g-fill-hot { fill: var(--patina-hot); }
.patina-geo .g-fill-glow { fill: var(--patina-glow); }
.patina-geo .g-line {
fill: none;
stroke: var(--patina-glow);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.patina-geo .g-line-hot {
fill: none;
stroke: var(--patina-hot);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.patina-geo .g-tick { stroke: var(--patina-hot); stroke-width: 1; }
.patina-geo .g-spark { fill: var(--util); }
/* Ambient wash sits UNDER the geometry — depth, not the shapes themselves. */
.patina-field::before {
content: "";
position: fixed;
inset: 0;
z-index: -3;
pointer-events: none;
opacity: var(--art-opacity, 1);
background:
radial-gradient(120% 90% at 78% 14%,
color-mix(in srgb, var(--patina-glow) 13%, transparent) 0%, transparent 60%),
radial-gradient(90% 70% at 8% 88%,
color-mix(in srgb, var(--patina-hot) 10%, transparent) 0%, transparent 64%);
}
/* --- 2. TECHNICAL MARKS: drafting grid, thin and quiet. Never the subject,
but it must be VISIBLE — an invisible mark communicates nothing. --- */
.patina-draft::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: calc(.9 * var(--art-opacity, 1));
background-image:
linear-gradient(to right,
color-mix(in srgb, var(--patina-hot) 16%, transparent) 1px, transparent 1px),
linear-gradient(to bottom,
color-mix(in srgb, var(--patina-hot) 16%, transparent) 1px, transparent 1px),
linear-gradient(to right,
color-mix(in srgb, var(--patina-hot) 7%, transparent) 1px, transparent 1px),
linear-gradient(to bottom,
color-mix(in srgb, var(--patina-hot) 7%, transparent) 1px, transparent 1px);
background-size: 320px 320px, 320px 320px, 64px 64px, 64px 64px;
mask-image: linear-gradient(160deg, #000 0%, rgba(0,0,0,.35) 46%, transparent 78%);
}
/* --- 3. PATINA TEXTURE: worn surface. Inline SVG turbulence — no asset fetch.
Carried on a dedicated child so it can coexist with .patina-draft
(both wanted ::after on the same box). --- */
.patina-grain::after,
.patina-tex {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: calc(.5 * var(--art-opacity, 1));
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,\
");
}
/* --- 4. CONTROLLED LIGHT: one warm source, everything else falls away. --- */
.patina-light {
opacity: var(--art-opacity, 1);
background-image: radial-gradient(58% 44% at 66% 30%,
color-mix(in srgb, var(--patina-glow) 22%, transparent) 0%,
transparent 70%);
}
/* --- 5. ASYMMETRIC BALANCE: weight to one side, never mirrored. --- */
.patina-asym { --patina-bias: 62%; }
.patina-asym > * { max-width: var(--patina-bias); }
.patina-asym > .patina-wide { max-width: 100%; }
/* ============================================================================
COMPONENTS — the shapes the source boards actually show
============================================================================ */
.patina-panel {
position: relative;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--panel) 92%, transparent),
color-mix(in srgb, var(--panel2) 96%, transparent));
border: 1px solid color-mix(in srgb, var(--patina-hot) 22%, var(--line));
border-radius: 2px;
padding: 1.15rem 1.25rem;
overflow: hidden;
}
/* corner tick — the "technical mark" that says crafted, not generated */
.patina-panel::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 14px; height: 14px;
border-top: 1px solid var(--patina-hot);
border-left: 1px solid var(--patina-hot);
opacity: .8;
}
.patina-label {
font: 500 .68rem/1.2 var(--mono, ui-monospace, monospace);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--muted);
}
.patina-stat {
font: 600 2rem/1 var(--mono, ui-monospace, monospace);
color: var(--sand);
font-variant-numeric: tabular-nums;
}
.patina-btn {
font: 500 .78rem/1 var(--mono, ui-monospace, monospace);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink);
background: color-mix(in srgb, var(--panel2) 80%, transparent);
border: 1px solid color-mix(in srgb, var(--patina-hot) 34%, var(--line));
border-radius: 2px;
padding: .6rem 1.1rem;
cursor: pointer;
transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.patina-btn:hover {
background: color-mix(in srgb, var(--patina-hot) 18%, var(--panel2));
border-color: var(--patina-hot);
}
.patina-btn:focus-visible {
outline: 2px solid var(--sand);
outline-offset: 2px;
}
.patina-btn[aria-pressed="true"],
.patina-btn.is-active {
background: color-mix(in srgb, var(--patina-hot) 26%, var(--panel2));
border-color: var(--patina-hot);
color: var(--ink);
}
.patina-btn:disabled { opacity: .4; cursor: not-allowed; }
.patina-meter {
height: 3px;
background: color-mix(in srgb, var(--line) 80%, transparent);
border-radius: 2px;
overflow: hidden;
}
.patina-meter > i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--patina-cool), var(--patina-hot));
}
.patina-rule {
border: 0;
height: 1px;
background: linear-gradient(90deg,
var(--patina-hot), color-mix(in srgb, var(--line) 90%, transparent) 60%, transparent);
opacity: .5;
}
/* Motion is intentional and measured — and always opt-out-able. */
@media (prefers-reduced-motion: reduce) {
.patina-btn { transition: none; }
}