/* themes.css — Hatchery Systems theme palettes + live switcher control. SELF-HOSTED, same-origin only. No remote/CDN. Loaded by index.html + store/index.html. Mechanism: each theme is a `body[data-theme="…"]` block that overrides a shared set of CSS custom properties. Both pages reference those properties, so one file themes both. Default (no data-theme, or themes.css absent) = each page's inline :root = "Midnight". HARD REQS honored: • WCAG AA — body text ≥ 4.5:1, buttons checked (ratios noted per theme). • NO white-on-blue. Filled buttons everywhere (no flat/borderless). • One theme = vintage textured wallpaper (self-hosted SVG tile), warm/aged, not paisley. Shared token vocabulary (set by every theme block): --bg --bg-image --fg --muted --muted-2 --accent --accent-glow --surface --surface-2 --surface-border --nav-bg --nav-border --gold --btn-bg --btn-fg --btn-border --btn-bg-2 --btn-fg-2 --radius --radius-lg --font-head --font-body */ /* ── Self-hosted display fonts (SIL OFL 1.1 — free to self-host; downloaded at BUILD time, no runtime remote/CDN call). Files live under /themes/fonts/, same-origin. • Orbitron — geometric retro-futuristic; ARCADE headings (the bold synthwave font). • Audiowide — chunky neon-arcade display; ARCADE body + numeric/label accents. ── */ @font-face{ font-family:"Orbitron"; font-style:normal; font-weight:700 900; font-display:swap; src:url("/themes/fonts/orbitron-latin.woff2") format("woff2"); } @font-face{ font-family:"Audiowide"; font-style:normal; font-weight:400; font-display:swap; src:url("/themes/fonts/audiowide-latin.woff2") format("woff2"); } /* Smooth, non-jarring swap when the switcher flips themes. */ body{ transition:background-color .28s ease, color .28s ease; background-image:var(--bg-image, none); background-attachment:fixed; } @media (prefers-reduced-motion: reduce){ body{ transition:none; } } /* ───────────────────────── 1) MIDNIGHT — dark, modern, high-contrast. fg #e9eef6 on bg #0e1014 ≈ 15:1. Buttons: bright sky #7cc4ff w/ near-black #07121e text ≈ 11:1 (NOT white-on-blue). Links #6cb7ff on #0e1014 ≈ 7:1. */ body[data-theme="midnight"]{ --bg:#0e1014; --bg-image:none; --fg:#e9eef6; --muted:#9aa6b6; --muted-2:#7e8da0; --accent:#6cb7ff; --accent-glow:rgba(108,183,255,.22); --surface:#141821; --surface-2:#0f1722; --surface-border:#2a3240; --nav-bg:rgba(14,16,20,.85); --nav-border:#272d38; --gold:#f5c542; --btn-bg:#7cc4ff; --btn-fg:#07121e; --btn-border:#7cc4ff; --btn-bg-2:#1d2a3b; --btn-fg-2:#dbe7f5; --radius:12px; --radius-lg:16px; --font-head:"Inter","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } /* ───────────────────────── 2) VINTAGE WALLPAPER — warm parchment + repeating SVG tile. fg #34271a on #efe4cf ≈ 9.6:1. Buttons: oxblood #6e3b2c w/ cream #f7efdd ≈ 7.1:1. Links/accent aged-bronze #7a4a1f on parchment ≈ 5.6:1. Serif type, small radius. */ body[data-theme="vintage"]{ --bg:#efe4cf; --bg-image:url("/themes/wallpaper-vintage.svg"); --fg:#34271a; --muted:#6b5a44; --muted-2:#887256; --accent:#7a4a1f; --accent-glow:rgba(122,74,31,.20); --surface:#f6eeda; --surface-2:#ece0c6; --surface-border:#cdb892; --nav-bg:rgba(239,228,207,.88); --nav-border:#d8c6a3; --gold:#a9781b; --btn-bg:#6e3b2c; --btn-fg:#f7efdd; --btn-border:#5a2f22; --btn-bg-2:#dcc79c; --btn-fg-2:#3a2c1d; --radius:5px; --radius-lg:7px; /* font swapped to Nest's stack (2026-06-24) — brown look (bg/wallpaper/accent) UNCHANGED. */ --font-head:"Trebuchet MS",Verdana,"Segoe UI",system-ui,sans-serif; --font-body:"Trebuchet MS",Verdana,"Segoe UI",system-ui,sans-serif; } /* ───────────────────────── 3) ARCADE — FULL synthwave, dark + LOUD (2026-06-24 bold pass). The FUN one, pushed hard. fg #f4eeff on #120e29 ≈ 15:1. Buttons: hot magenta #f25fff w/ near-black #18001a ≈ 7.2:1 (NOT white-on-blue). Accent neon cyan #2ee9ff on #120e29 ≈ 12:1. Self-hosted Orbitron headings (geometric retro-future) + Audiowide body display. Magenta+cyan double-glow, neon grid texture. Heading neon styling scoped below. */ body[data-theme="arcade"]{ --bg:#120e29; --bg-image:url("/themes/arcade-grid.svg"); --fg:#f4eeff; --muted:#b3a8e0; --muted-2:#8478bd; --accent:#2ee9ff; --accent-glow:rgba(242,95,255,.55); --surface:#1d1740; --surface-2:#171134; --surface-border:#3d2e76; --nav-bg:rgba(18,14,41,.86); --nav-border:#352a66; --gold:#fde047; --btn-bg:#f25fff; --btn-fg:#18001a; --btn-border:#ff7dff; --btn-bg-2:#241b4f; --btn-fg-2:#f0e6ff; --radius:14px; --radius-lg:18px; --font-head:"Orbitron","Audiowide","Bahnschrift","DIN Alternate","Segoe UI",system-ui,sans-serif; --font-body:"Audiowide","Bahnschrift","DIN Alternate","Segoe UI",system-ui,sans-serif; } /* Arcade neon heading treatment — scoped so it ONLY fires on the arcade theme. Uppercase + wide tracking + cyan/magenta double text-shadow = unmistakable synthwave. Higher specificity than the page's inline .title rule, and loaded after it, so it wins. */ body[data-theme="arcade"] .title, body[data-theme="arcade"] h1, body[data-theme="arcade"] h2, body[data-theme="arcade"] .pm-head h2, body[data-theme="arcade"] .modal h2{ font-family:var(--font-head); font-weight:900; letter-spacing:.06em; text-transform:uppercase; text-shadow: 0 0 4px rgba(46,233,255,.65), 0 0 12px rgba(46,233,255,.45), 0 0 22px rgba(242,95,255,.55), 0 0 40px rgba(242,95,255,.35); } /* The accent word in the wordmark glows magenta to contrast the cyan-glow base. */ body[data-theme="arcade"] .title .mk-accent{ color:var(--accent); text-shadow: 0 0 5px rgba(242,95,255,.85), 0 0 16px rgba(242,95,255,.6), 0 0 30px rgba(242,95,255,.4); } /* Body display font is chunky — ease tracking a hair so it stays legible at small sizes. */ body[data-theme="arcade"]{ letter-spacing:.005em; } @media (prefers-reduced-motion: reduce){ body[data-theme="arcade"] .title, body[data-theme="arcade"] h1, body[data-theme="arcade"] h2{ text-shadow:0 0 6px rgba(46,233,255,.5); } } /* ───────────────────────── 4) NEST & GOLD — sunny, playful, chunky rounded gold buttons. fg #2a2114 on #fff6e3 ≈ 13:1. Buttons: gold #efa61c w/ dark-brown #2a1a05 ≈ 8.2:1. Accent coral #c2410c on #fff6e3 ≈ 4.9:1. Friendly rounded type, big radius, faint dots. */ body[data-theme="nest"]{ --bg:#fff6e3; --bg-image:url("/themes/nest-dots.svg"); --fg:#2a2114; --muted:#6e5a3a; --muted-2:#8a7350; --accent:#c2410c; --accent-glow:rgba(194,65,12,.18); --surface:#fffaf0; --surface-2:#fff1d6; --surface-border:#f0d9a8; --nav-bg:rgba(255,246,227,.9); --nav-border:#f1ddae; --gold:#d98a0c; --btn-bg:#efa61c; --btn-fg:#2a1a05; --btn-border:#d98a0c; --btn-bg-2:#ffe6b0; --btn-fg-2:#5a3a12; --radius:16px; --radius-lg:22px; --font-head:"Trebuchet MS",Verdana,"Segoe UI",system-ui,sans-serif; --font-body:"Trebuchet MS",Verdana,"Segoe UI",system-ui,sans-serif; } /* ───────────────────────── 5) VERDANT — deep forest/emerald, calm + elegant (new 4th, 2026-06-24). Distinct from midnight (blue), vintage (brown), arcade (neon-purple), nest (cream-gold): this is a DARK FOREST GREEN theme with warm amber-gold accents. fg #eaf3ec on bg #0d1f17 ≈ 14:1. Buttons: amber-gold #e0a73a w/ deep-pine #0c1c14 ≈ 9.4:1 (NOT white-on-blue). Accent warm gold #f0b84a on #0d1f17 ≈ 9:1. Soft emerald glow, refined humanist type. */ body[data-theme="verdant"]{ --bg:#0d1f17; --bg-image:none; --fg:#eaf3ec; --muted:#9fc2ac; --muted-2:#79a085; --accent:#f0b84a; --accent-glow:rgba(82,191,127,.28); --surface:#13291e; --surface-2:#0f2218; --surface-border:#26442f; --nav-bg:rgba(13,31,23,.86); --nav-border:#234029; --gold:#f0b84a; --btn-bg:#e0a73a; --btn-fg:#0c1c14; --btn-border:#c98f24; --btn-bg-2:#1c3a28; --btn-fg-2:#e7f4ea; --radius:11px; --radius-lg:15px; --font-head:"Georgia","Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif; --font-body:"Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif; } /* ───────────────────────── Live theme-switcher control (TEMPORARY review tool). Rendered by /themes.js. Fixed bottom-center pill, self-contained, above content but below modals (modals are z-index 120). Remove the tool later by deleting the two /themes.js + /themes.css includes — nothing else references it. */ .theme-switcher{ position:fixed; right:16px; bottom:16px; /* bottom-RIGHT so it never collides with the centered Share button */ z-index:110; display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:999px; background:var(--surface,#141821); border:1px solid var(--surface-border,#2a3240); box-shadow:0 8px 30px rgba(0,0,0,.28); font:600 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; max-width:calc(100vw - 24px); } .theme-switcher .ts-label{ color:var(--muted,#9aa6b6); letter-spacing:.04em; text-transform:uppercase; font-size:10.5px; padding-right:2px; } .theme-switcher .ts-swatch{ appearance:none; cursor:pointer; width:30px; height:30px; border-radius:50%; border:2px solid transparent; padding:0; position:relative; transition:transform .12s ease, border-color .15s ease; } .theme-switcher .ts-swatch:hover{ transform:translateY(-2px); } .theme-switcher .ts-swatch[aria-pressed="true"]{ border-color:var(--accent,#6cb7ff); } .theme-switcher .ts-swatch[aria-pressed="true"]::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--accent,#6cb7ff); opacity:.5; } /* each swatch shows its theme's two key colors split diagonally — a real preview */ .ts-sw-midnight{ background:linear-gradient(135deg,#0e1014 50%,#7cc4ff 50%); } .ts-sw-vintage{ background:linear-gradient(135deg,#efe4cf 50%,#6e3b2c 50%); } .ts-sw-arcade{ background:linear-gradient(135deg,#120e29 50%,#f25fff 50%); } .ts-sw-verdant{ background:linear-gradient(135deg,#0d1f17 50%,#f0b84a 50%); } /* nest swatch kept in code (hidden from switcher 2026-06-24) — still styled if re-added. */ .ts-sw-nest{ background:linear-gradient(135deg,#fff6e3 50%,#efa61c 50%); } .theme-switcher .ts-name{ font-size:11.5px; color:var(--fg,#e9eef6); min-width:62px; text-align:left; letter-spacing:.01em; } @media (max-width:480px){ .theme-switcher{ gap:7px; padding:7px 10px; bottom:10px; } .theme-switcher .ts-swatch{ width:26px; height:26px; } .theme-switcher .ts-name{ display:none; } /* swatches + aria-labels remain on small screens */ } /* ═══════════════════════════ Part 8 (Sam, 2026-06-24) ═══════════════════════════ COLLAPSED (NON-HOME) switcher — a single "Templates" button seated in the page-top nav that expands to the four swatches. The HOME page keeps the inline 4-swatch row above; EVERY rule here is SCOPED to .ts-collapsed, so the homepage switcher is never touched. themes.js adds .ts-collapsed + seats the bar in .site-nav on non-home pages. ──────────────────────────────────────────────────────────────────────────────── */ .theme-switcher.ts-collapsed{ /* shed the pill chrome — it moves onto .ts-trigger. Base .theme-switcher still supplies the fixed bottom-right FALLBACK when there is no nav to seat into (none of our pages hit that). */ gap:0; padding:0; background:none; border:0; box-shadow:none; } /* When seated inside a page-top nav: static flow, pushed RIGHT, and NEUTRALISE any page-local fixed-pin override (e.g. the funnel's `.theme-switcher{top:62px!important}`) at higher specificity so every non-home page lands on the SAME single-button-in-the-page-top pattern. */ .site-nav .theme-switcher.ts-collapsed{ position:relative !important; inset:auto !important; margin-left:auto !important; z-index:auto; max-width:none; } /* the collapsed trigger — echoes the swatch pill look (current-theme swatch + label + caret) */ .theme-switcher.ts-collapsed .ts-trigger{ appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:6px 11px; border-radius:999px; background:var(--surface,#141821); border:1px solid var(--surface-border,#2a3240); box-shadow:0 8px 30px rgba(0,0,0,.28); font:600 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--fg,#e9eef6); transition:border-color .15s ease; } .theme-switcher.ts-collapsed .ts-trigger:hover{ border-color:var(--accent,#6cb7ff); } .theme-switcher.ts-collapsed .ts-current{ width:18px; height:18px; border-radius:50%; flex:0 0 auto; border:1px solid var(--surface-border,#2a3240); } .theme-switcher.ts-collapsed .ts-trigger-label{ letter-spacing:.02em; } .theme-switcher.ts-collapsed .ts-trigger .ts-name-cur{ color:var(--muted,#9aa6b6); min-width:0; font-size:11px; } .theme-switcher.ts-collapsed .ts-caret{ color:var(--muted,#9aa6b6); font-size:10px; transition:transform .15s ease; } .theme-switcher.ts-collapsed.ts-open .ts-caret{ transform:rotate(180deg); } /* the expanding popover with the four REAL swatches (kept below modals, which are z-index 120) */ .theme-switcher.ts-collapsed .ts-pop{ display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:119; flex-direction:column; gap:8px; padding:10px; border-radius:14px; background:var(--surface,#141821); border:1px solid var(--surface-border,#2a3240); box-shadow:0 14px 40px rgba(0,0,0,.36); } .theme-switcher.ts-collapsed.ts-open .ts-pop{ display:flex; } .theme-switcher.ts-collapsed .ts-pop-item{ display:flex; align-items:center; gap:9px; } .theme-switcher.ts-collapsed .ts-pop-name{ font-size:12px; color:var(--fg,#e9eef6); white-space:nowrap; } @media (max-width:480px){ .theme-switcher.ts-collapsed .ts-trigger-label{ display:none; } /* tight nav: swatch + name + caret */ .theme-switcher.ts-collapsed .ts-trigger .ts-name-cur{ display:none; } }