/* ============================================================ cortya theme system v1 12 variants: 6 schemes x 2 modes. fallback = ember dark. attributes are set on by the inline head snippet: data-scheme ember|graphite|obsidian|signal|slate|observatory data-theme dark|light (resolved) data-theme-pref light|dark|system (raw choice, used by theme.js) ============================================================ */ /* ---------- fallback: ember dark (also the no-JS default) ---------- */ :root{ --bg:#141009; --surface:#1F1812; --surface-2:#2A2018; --ink:#F3EADD; --ink-rgb:243,234,221; --ink-2:#B3A593; --accent:#E39A3B; --accent-rgb:227,154,59; --accent-hi:#EFA94B; --on-accent:#141009; --accent-2:#4FA08B; --accent-2-rgb:79,160,139; --hairline:rgba(243,234,221,.08); --baseline:rgba(243,234,221,.16); --wash-1:#9C5B22; --wash-2:#2E6B5C; --wash-3:#6E3B4F; --wash-hero:#C2862E; --field-1:#E39A3B; --field-2:#C2862E; --field-3:#6E3B4F; --field-4:#4FA08B; --grain-o:.10; --vignette:rgba(0,0,0,.45); --bd-blend:screen; --selection:rgba(227,154,59,.32); --sigil-s1:42%; --sigil-l1:40%; --sigil-s2:46%; --sigil-l2:20%; --surface-veil:rgba(31,24,18,.78); /* compatibility aliases — untouched inline CSS keeps resolving */ --amber:var(--accent); --teal:var(--accent-2); } /* ---------- 1.1 ember ---------- */ [data-scheme="ember"][data-theme="dark"]{ --bg:#141009; --surface:#1F1812; --surface-2:#2A2018; --ink:#F3EADD; --ink-rgb:243,234,221; --ink-2:#B3A593; --accent:#E39A3B; --accent-rgb:227,154,59; --accent-hi:#EFA94B; --on-accent:#141009; --accent-2:#4FA08B; --accent-2-rgb:79,160,139; --hairline:rgba(243,234,221,.08); --baseline:rgba(243,234,221,.16); --wash-1:#9C5B22; --wash-2:#2E6B5C; --wash-3:#6E3B4F; --wash-hero:#C2862E; --field-1:#E39A3B; --field-2:#C2862E; --field-3:#6E3B4F; --field-4:#4FA08B; --grain-o:.10; --vignette:rgba(0,0,0,.45); --bd-blend:screen; --selection:rgba(227,154,59,.32); --sigil-s1:42%; --sigil-l1:40%; --sigil-s2:46%; --sigil-l2:20%; --surface-veil:rgba(31,24,18,.78); } [data-scheme="ember"][data-theme="light"]{ --bg:#F2E9D8; --surface:#FAF4E7; --surface-2:#E7DBC4; --ink:#2E2415; --ink-rgb:46,36,21; --ink-2:#6A5A41; --accent:#8F5B14; --accent-rgb:143,91,20; --accent-hi:#7A4C0E; --on-accent:#FAF4E7; --accent-2:#1F6653; --accent-2-rgb:31,102,83; --hairline:rgba(46,36,21,.14); --baseline:rgba(46,36,21,.26); --wash-1:#E3BE8A; --wash-2:#BFD8CB; --wash-3:#DCBAC4; --wash-hero:#ECD3A2; --field-1:#B06F16; --field-2:#9A6420; --field-3:#8A5060; --field-4:#2E7A63; --grain-o:.06; --vignette:rgba(82,62,38,.16); --bd-blend:multiply; --selection:rgba(143,91,20,.22); --sigil-s1:42%; --sigil-l1:46%; --sigil-s2:46%; --sigil-l2:30%; --surface-veil:rgba(250,244,231,.78); } /* ---------- 1.2 graphite ---------- */ [data-scheme="graphite"][data-theme="dark"]{ --bg:#141518; --surface:#1D1F23; --surface-2:#26292E; --ink:#E8EAED; --ink-rgb:232,234,237; --ink-2:#A3A9B1; --accent:#C9A227; --accent-rgb:201,162,39; --accent-hi:#D9B53E; --on-accent:#141518; --accent-2:#7FA3B8; --accent-2-rgb:127,163,184; --hairline:rgba(232,234,237,.08); --baseline:rgba(232,234,237,.16); --wash-1:#4A5058; --wash-2:#3E4A55; --wash-3:#55503F; --wash-hero:#5A6068; --field-1:#C9A227; --field-2:#9C8434; --field-3:#4A5058; --field-4:#7FA3B8; --grain-o:.10; --vignette:rgba(0,0,0,.45); --bd-blend:screen; --selection:rgba(201,162,39,.30); --sigil-s1:14%; --sigil-l1:42%; --sigil-s2:16%; --sigil-l2:22%; --surface-veil:rgba(29,31,35,.78); } [data-scheme="graphite"][data-theme="light"]{ --bg:#E9EAEC; --surface:#F4F5F6; --surface-2:#DDDFE3; --ink:#1E2125; --ink-rgb:30,33,37; --ink-2:#555B63; --accent:#7A6210; --accent-rgb:122,98,16; --accent-hi:#665108; --on-accent:#F4F5F6; --accent-2:#3E6275; --accent-2-rgb:62,98,117; --hairline:rgba(30,33,37,.14); --baseline:rgba(30,33,37,.26); --wash-1:#C9CDD3; --wash-2:#BCC8D1; --wash-3:#D6CFB8; --wash-hero:#D4D7DC; --field-1:#7A6210; --field-2:#5E5A4A; --field-3:#6B7480; --field-4:#3E6275; --grain-o:.06; --vignette:rgba(40,44,50,.14); --bd-blend:multiply; --selection:rgba(122,98,16,.20); --sigil-s1:14%; --sigil-l1:48%; --sigil-s2:16%; --sigil-l2:32%; --surface-veil:rgba(244,245,246,.78); } /* ---------- 1.3 obsidian ---------- */ [data-scheme="obsidian"][data-theme="dark"]{ --bg:#0B0B0C; --surface:#151517; --surface-2:#1E1E21; --ink:#F2F2F2; --ink-rgb:242,242,242; --ink-2:#A8A8AC; --accent:#E2603F; --accent-rgb:226,96,63; --accent-hi:#EB7456; --on-accent:#0B0B0C; --accent-2:#C9C9CE; --accent-2-rgb:201,201,206; --hairline:rgba(242,242,242,.08); --baseline:rgba(242,242,242,.16); --wash-1:#2E2E32; --wash-2:#232327; --wash-3:#3A2A26; --wash-hero:#333338; --field-1:#E2603F; --field-2:#A8482F; --field-3:#3A3A3F; --field-4:#C9C9CE; --grain-o:.12; --vignette:rgba(0,0,0,.50); --bd-blend:screen; --selection:rgba(226,96,63,.30); --sigil-s1:6%; --sigil-l1:40%; --sigil-s2:8%; --sigil-l2:20%; --surface-veil:rgba(21,21,23,.78); } [data-scheme="obsidian"][data-theme="light"]{ --bg:#F5F5F4; --surface:#FFFFFF; --surface-2:#E8E8E6; --ink:#161618; --ink-rgb:22,22,24; --ink-2:#54545A; --accent:#B33A1E; --accent-rgb:179,58,30; --accent-hi:#98301A; --on-accent:#FFFFFF; --accent-2:#6E6E74; --accent-2-rgb:110,110,116; --hairline:rgba(22,22,24,.14); --baseline:rgba(22,22,24,.26); --wash-1:#D8D8D6; --wash-2:#E0DEDC; --wash-3:#E5CFC8; --wash-hero:#DDDDDA; --field-1:#B33A1E; --field-2:#8A2D17; --field-3:#9A9A9E; --field-4:#54545A; --grain-o:.05; --vignette:rgba(20,20,22,.12); --bd-blend:multiply; --selection:rgba(179,58,30,.20); --sigil-s1:6%; --sigil-l1:46%; --sigil-s2:8%; --sigil-l2:30%; --surface-veil:rgba(255,255,255,.78); } /* ---------- 1.4 signal ---------- */ [data-scheme="signal"][data-theme="dark"]{ --bg:#0C1320; --surface:#14202F; --surface-2:#1C2B3E; --ink:#E9EFF7; --ink-rgb:233,239,247; --ink-2:#9FB0C4; --accent:#62A8E8; --accent-rgb:98,168,232; --accent-hi:#7DB9EE; --on-accent:#0C1320; --accent-2:#E3A04B; --accent-2-rgb:227,160,75; --hairline:rgba(233,239,247,.08); --baseline:rgba(233,239,247,.16); --wash-1:#1E4B7A; --wash-2:#173A5C; --wash-3:#5C4326; --wash-hero:#2A5E8E; --field-1:#62A8E8; --field-2:#3D7DBF; --field-3:#2A4A6E; --field-4:#E3A04B; --grain-o:.10; --vignette:rgba(0,0,0,.45); --bd-blend:screen; --selection:rgba(98,168,232,.30); --sigil-s1:30%; --sigil-l1:40%; --sigil-s2:34%; --sigil-l2:20%; --surface-veil:rgba(20,32,47,.78); } [data-scheme="signal"][data-theme="light"]{ --bg:#E8EEF5; --surface:#F5F8FC; --surface-2:#D9E3EE; --ink:#16202E; --ink-rgb:22,32,46; --ink-2:#46586D; --accent:#1F5FA8; --accent-rgb:31,95,168; --accent-hi:#1A5294; --on-accent:#F5F8FC; --accent-2:#8F5B14; --accent-2-rgb:143,91,20; --hairline:rgba(22,32,46,.14); --baseline:rgba(22,32,46,.26); --wash-1:#BFD4EA; --wash-2:#CCDDEF; --wash-3:#E8D7B8; --wash-hero:#B3CDE8; --field-1:#1F5FA8; --field-2:#174A85; --field-3:#5E7693; --field-4:#8F5B14; --grain-o:.06; --vignette:rgba(22,40,62,.14); --bd-blend:multiply; --selection:rgba(31,95,168,.20); --sigil-s1:30%; --sigil-l1:46%; --sigil-s2:34%; --sigil-l2:30%; --surface-veil:rgba(245,248,252,.78); } /* ---------- 1.5 slate ---------- */ [data-scheme="slate"][data-theme="dark"]{ --bg:#151A1E; --surface:#1E252B; --surface-2:#273039; --ink:#E7ECEF; --ink-rgb:231,236,239; --ink-2:#9DAAB4; --accent:#5FB89D; --accent-rgb:95,184,157; --accent-hi:#74C4AB; --on-accent:#151A1E; --accent-2:#C9899B; --accent-2-rgb:201,137,155; --hairline:rgba(231,236,239,.08); --baseline:rgba(231,236,239,.16); --wash-1:#31424E; --wash-2:#2A4A42; --wash-3:#4A3340; --wash-hero:#3A4C58; --field-1:#5FB89D; --field-2:#3E8F78; --field-3:#44525C; --field-4:#C9899B; --grain-o:.10; --vignette:rgba(0,0,0,.45); --bd-blend:screen; --selection:rgba(95,184,157,.28); --sigil-s1:24%; --sigil-l1:40%; --sigil-s2:28%; --sigil-l2:20%; --surface-veil:rgba(30,37,43,.78); } [data-scheme="slate"][data-theme="light"]{ --bg:#E7ECEE; --surface:#F3F6F7; --surface-2:#D8E0E4; --ink:#1B2328; --ink-rgb:27,35,40; --ink-2:#4A5963; --accent:#1F6F58; --accent-rgb:31,111,88; --accent-hi:#1A604C; --on-accent:#F3F6F7; --accent-2:#8A4458; --accent-2-rgb:138,68,88; --hairline:rgba(27,35,40,.14); --baseline:rgba(27,35,40,.26); --wash-1:#C4D2D8; --wash-2:#BFD6CE; --wash-3:#DCC6CE; --wash-hero:#CBD8DE; --field-1:#1F6F58; --field-2:#16553F; --field-3:#5C6E78; --field-4:#8A4458; --grain-o:.06; --vignette:rgba(28,38,44,.14); --bd-blend:multiply; --selection:rgba(31,111,88,.20); --sigil-s1:24%; --sigil-l1:46%; --sigil-s2:28%; --sigil-l2:30%; --surface-veil:rgba(243,246,247,.78); } /* ---------- 1.6 observatory ---------- */ [data-scheme="observatory"][data-theme="dark"]{ --bg:#0A0F0A; --surface:#121A13; --surface-2:#1A241B; --ink:#E6F0E4; --ink-rgb:230,240,228; --ink-2:#9CB39A; --accent:#71D287; --accent-rgb:113,210,135; --accent-hi:#87DC9A; --on-accent:#0A0F0A; --accent-2:#E3B23B; --accent-2-rgb:227,178,59; --hairline:rgba(230,240,228,.08); --baseline:rgba(230,240,228,.16); --wash-1:#1C4A28; --wash-2:#143828; --wash-3:#4A3A16; --wash-hero:#245832; --field-1:#71D287; --field-2:#3F9E58; --field-3:#1E3324; --field-4:#E3B23B; --grain-o:.11; --vignette:rgba(0,0,0,.50); --bd-blend:screen; --selection:rgba(113,210,135,.28); --sigil-s1:26%; --sigil-l1:38%; --sigil-s2:30%; --sigil-l2:19%; --surface-veil:rgba(18,26,19,.78); } [data-scheme="observatory"][data-theme="light"]{ --bg:#ECF2E9; --surface:#F6FAF4; --surface-2:#DCE7D8; --ink:#182218; --ink-rgb:24,34,24; --ink-2:#45563F; --accent:#1E6B33; --accent-rgb:30,107,51; --accent-hi:#195C2B; --on-accent:#F6FAF4; --accent-2:#8A5A12; --accent-2-rgb:138,90,18; --hairline:rgba(24,34,24,.14); --baseline:rgba(24,34,24,.26); --wash-1:#C2DCC6; --wash-2:#CFE5D2; --wash-3:#E6D8B4; --wash-hero:#B8D6BE; --field-1:#1E6B33; --field-2:#145024; --field-3:#5A6E58; --field-4:#8A5A12; --grain-o:.06; --vignette:rgba(20,34,22,.13); --bd-blend:multiply; --selection:rgba(30,107,51,.20); --sigil-s1:26%; --sigil-l1:46%; --sigil-s2:30%; --sigil-l2:30%; --surface-veil:rgba(246,250,244,.78); } /* ---------- no-JS visitors: system-correct ember light ---------- */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ --bg:#F2E9D8; --surface:#FAF4E7; --surface-2:#E7DBC4; --ink:#2E2415; --ink-rgb:46,36,21; --ink-2:#6A5A41; --accent:#8F5B14; --accent-rgb:143,91,20; --accent-hi:#7A4C0E; --on-accent:#FAF4E7; --accent-2:#1F6653; --accent-2-rgb:31,102,83; --hairline:rgba(46,36,21,.14); --baseline:rgba(46,36,21,.26); --wash-1:#E3BE8A; --wash-2:#BFD8CB; --wash-3:#DCBAC4; --wash-hero:#ECD3A2; --field-1:#B06F16; --field-2:#9A6420; --field-3:#8A5060; --field-4:#2E7A63; --grain-o:.06; --vignette:rgba(82,62,38,.16); --bd-blend:multiply; --selection:rgba(143,91,20,.22); --sigil-s1:42%; --sigil-l1:46%; --sigil-s2:46%; --sigil-l2:30%; --surface-veil:rgba(250,244,231,.78); color-scheme:light; } } /* ---------- base paint + native rendering ---------- */ html{background:var(--bg);} /* paints behind everything pre-paint */ html{color-scheme:dark;} [data-theme="light"]{color-scheme:light;} ::selection{background:var(--selection);} /* ---------- blend hooks (pages delete their inline duplicates) ---------- */ .bd, .section::before, .phead::before, .hero__gold, .cta::before{mix-blend-mode:var(--bd-blend);} .bd-grain{opacity:var(--grain-o);} .bd-vignette{background:radial-gradient(ellipse at center, transparent 38%, var(--vignette) 100%);} /* ---------- theme-swap transition guard (theme.js adds .theme-anim for 400ms) ---------- */ html.theme-anim, html.theme-anim *{ transition:background-color .35s var(--ease,ease), color .35s var(--ease,ease), border-color .35s var(--ease,ease) !important; } @media (prefers-reduced-motion: reduce){ html.theme-anim, html.theme-anim *{transition:none !important;} } /* ============================================================ shared controls ============================================================ */ /* --- light / dark / system selector (nav) --- */ .modeset{display:inline-flex;border:1px solid var(--hairline);border-radius:999px;padding:3px;gap:2px;} .modeset__b{width:28px;height:28px;border-radius:50%;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--ink-2);transition:color .3s,background .3s;} .modeset__b svg{width:13px;height:13px;fill:currentColor;stroke:currentColor;} .modeset__b:hover{color:var(--ink);} .modeset__b[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);} .modeset__b:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} @media (max-width:560px){.modeset{order:-1;}} /* keeps it visible even when .btn--nav hides */ /* --- scheme control (footer) — visually a sibling of the page's .field-mode. minimal fallback only; the page's .field-mode rules (loaded after this file) take precedence where both apply. --- */ .scheme-mode{font:inherit;background:none;border:0;padding:0;color:var(--ink-2);cursor:pointer;} .scheme-mode:hover{color:var(--ink);} .scheme-mode:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} /* --- back-to-top --- */ .totop{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:30; width:44px;height:44px;border-radius:50%;border:1px solid var(--hairline);cursor:pointer; background:var(--surface-veil);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); color:var(--ink-2);display:grid;place-items:center; opacity:0;transform:translateY(8px);pointer-events:none; transition:opacity .4s var(--ease,ease),transform .4s var(--ease,ease),color .3s,border-color .3s;} .totop svg{width:15px;height:15px;} .totop.is-on{opacity:1;transform:none;pointer-events:auto;} .totop:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.4);} .totop:focus-visible{outline:2px solid var(--accent);outline-offset:3px;opacity:1;pointer-events:auto;} @media (prefers-reduced-motion: reduce){.totop{transition:none;}} /* ---------- prefers-contrast courtesy (last: order beats the variant blocks) ---------- */ @media (prefers-contrast: more){ :root, :root[data-scheme], [data-scheme][data-theme]{ --hairline:rgba(var(--ink-rgb),.25); --baseline:rgba(var(--ink-rgb),.4); } }