/* threndle.ai colour themes: light (the incumbent site), dark, and halloween (dark with a seasonal skin, the default through October). The theme lives on and is set before first paint by the inline boot snippet in each page's ; /theme.js owns the visitor toggle and the Halloween effects layer. This file serves the static pages (city, blog, legal) and the chrome shared with the SPA (toggle, browser surfaces, effects). The SPA's own tokens are themed in src/index.css and src/elevated-home.css. */ /* ---------- 1. Static-page tokens (city pages et al. read these :root vars) ---------- */ :root{ --on-accent:#FFFFFF; --nav-glass:rgba(252,250,244,.72); --hi:rgba(255,255,255,.7); --map-a:#FBF9F3; --map-b:#EEEADF; } :root[data-theme="dark"]{ --cream:#0A0A0A; --card:#161616; --sunk:#050505; --ink:#F4F4F2; --soft:#A9A9A4; --faint:#8E8E89; --line:rgba(244,244,242,.10); --terra:#D9713F; --terra-text:#E8875A; --teal:#5FA79B; --sage:#9DAE8D; --wm:#EDEDEA; --on-accent:#0A0A0A; --nav-glass:rgba(18,18,18,.72); --hi:rgba(255,255,255,.05); --map-a:#1A1A1A; --map-b:#0F0F0F; --soft-sh:0 2px 4px rgba(0,0,0,.28),0 18px 40px -20px rgba(0,0,0,.65); --lift-sh:0 4px 8px rgba(0,0,0,.3),0 30px 60px -24px rgba(0,0,0,.75); } :root[data-theme="halloween"]{ --cream:#120D14; --card:#1D1521; --sunk:#0D090F; --ink:#F4ECDD; --soft:#BDAEC3; --faint:#A596AB; --line:rgba(244,236,221,.10); --terra:#FF7A1F; --terra-text:#FF9A4D; --teal:#9BE564; --sage:#8FA07F; --wm:#F4ECDD; --on-accent:#120D14; --nav-glass:rgba(29,21,33,.72); --hi:rgba(255,255,255,.05); --map-a:#221828; --map-b:#150F18; --soft-sh:0 2px 4px rgba(0,0,0,.32),0 18px 44px -18px rgba(0,0,0,.7); --lift-sh:0 4px 8px rgba(0,0,0,.34),0 30px 60px -22px rgba(255,122,31,.22); } /* ---------- 2. Static-page surfaces that were hard-coded light ---------- */ :root:not([data-theme="light"]) .navpill{background:var(--nav-glass)} :root:not([data-theme="light"]) .map{background:radial-gradient(130% 130% at 70% 10%,var(--map-a),var(--map-b));box-shadow:inset 0 1px 1px var(--hi)} :root:not([data-theme="light"]) .btn.primary, :root:not([data-theme="light"]) .ct.here, :root:not([data-theme="light"]) .sil-cta a{color:var(--on-accent)} :root:not([data-theme="light"]) .sil-cta a{background:var(--terra)} :root:not([data-theme="light"]) .sil-step{background:var(--card);border-color:var(--line)} :root:not([data-theme="light"]) .sil-num{color:var(--terra-text)} :root:not([data-theme="light"]) .sil-word{color:var(--ink)} :root:not([data-theme="light"]) .sil-sub{color:var(--soft)} :root:not([data-theme="light"]) .navpill{border-color:var(--line);box-shadow:0 8px 30px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05)} :root:not([data-theme="light"]) .wm{color:var(--wm)} :root:not([data-theme="light"]) footer a:hover, :root:not([data-theme="light"]) .doc a:hover{color:var(--terra-text)} :root:not([data-theme="light"]) article a.btn, :root:not([data-theme="light"]) a.link.primary, :root:not([data-theme="light"]) a.link.primary .ic{color:var(--on-accent)} :root:not([data-theme="light"]) a.link.primary .url{color:var(--on-accent);opacity:.72} :root:not([data-theme="light"]) .tk{box-shadow:var(--soft-sh),inset 0 1px 1px rgba(255,255,255,.05)} /* Inline SVG (city map, loop dial) carries literal colours as presentation attributes; CSS outranks those, so each literal is re-pointed at a token here instead of editing the art. */ :root:not([data-theme="light"]) svg [fill="#221F19"]{fill:var(--ink)} :root:not([data-theme="light"]) svg [fill="#211D16"]{fill:var(--ink)} :root:not([data-theme="light"]) svg [fill="#57534e"], :root:not([data-theme="light"]) svg [fill="#78716c"]{fill:var(--soft)} :root:not([data-theme="light"]) svg [fill="#a8a29e"]{fill:var(--faint)} :root:not([data-theme="light"]) svg [stroke="#57534e"], :root:not([data-theme="light"]) svg [stroke="#78716c"], :root:not([data-theme="light"]) svg [stroke="#a8a29e"]{stroke:var(--faint)} :root:not([data-theme="light"]) svg [fill="#2F5D56"]{fill:var(--teal)} :root:not([data-theme="light"]) svg [stroke="#2F5D56"]{stroke:var(--teal)} :root:not([data-theme="light"]) svg [fill="#EEE9DE"]{fill:var(--sunk)} :root:not([data-theme="light"]) svg [stroke="#211D16"]{stroke:var(--ink)} :root:not([data-theme="light"]) svg [fill="#5B564A"]{fill:var(--soft)} :root:not([data-theme="light"]) svg [fill="#FCFAF4"]{fill:var(--card)} :root:not([data-theme="light"]) svg [stroke="#FCFAF4"]{stroke:var(--card)} :root:not([data-theme="light"]) svg [fill="#B8562B"]{fill:var(--terra)} :root:not([data-theme="light"]) svg [stroke="#B8562B"]{stroke:var(--terra)} :root:not([data-theme="light"]) svg [stroke="rgba(33,29,22,0.10)"]{stroke:var(--line)} :root:not([data-theme="light"]) svg [stroke="rgba(33,29,22,.10)"]{stroke:var(--line)} :root:not([data-theme="light"]) svg [color="#211D16"]{color:var(--ink)} :root:not([data-theme="light"]) svg [fill="rgba(255,255,255,.5)"]{fill:rgba(255,255,255,.07)} :root:not([data-theme="light"]) svg [fill="#E4E0D5"]{fill:var(--card)} :root:not([data-theme="light"]) svg [fill="#DCD7CB"]{fill:var(--sunk)} :root:not([data-theme="light"]) svg [fill="rgba(38,49,79,.55)"]{fill:rgba(150,175,230,.5)} :root:not([data-theme="light"]) svg [fill="rgba(184,86,43,.10)"]{fill:rgba(255,122,31,.12)} /* map stage: wall, floor and card face go dark; ridges and river lift so they still read */ :root:not([data-theme="light"]) #wall stop[offset="0"]{stop-color:var(--map-a)} :root:not([data-theme="light"]) #wall stop[offset="1"]{stop-color:var(--map-b)} :root:not([data-theme="light"]) #floor stop[offset="0"]{stop-color:var(--map-a)} :root:not([data-theme="light"]) #floor stop[offset="1"]{stop-color:var(--sunk)} :root:not([data-theme="light"]) #face stop[offset="0"]{stop-color:var(--card)} :root:not([data-theme="light"]) #face stop[offset="1"]{stop-color:var(--map-b)} :root:not([data-theme="light"]) #ridgeN stop[offset="0"], :root:not([data-theme="light"]) #ridgeS stop[offset="1"]{stop-color:rgba(157,174,141,.26)} :root:not([data-theme="light"]) #ridgeN stop[offset="1"], :root:not([data-theme="light"]) #ridgeS stop[offset="0"]{stop-color:rgba(157,174,141,.08)} :root:not([data-theme="light"]) #contact stop[offset="0"]{stop-color:rgba(0,0,0,.6)} :root:not([data-theme="light"]) #contact stop[offset=".65"]{stop-color:rgba(0,0,0,.2)} :root:not([data-theme="light"]) #ambient stop[offset="0"]{stop-color:rgba(0,0,0,.35)} :root:not([data-theme="light"]) #riverHalo stop[offset="1"]{stop-color:rgba(150,175,230,.14)} :root:not([data-theme="light"]) #riverInk stop[offset="1"]{stop-color:rgba(150,175,230,.42)} /* ---------- 3. The visitor switch: two segments (light, halloween), a sliding thumb (static pages + SPA nav) ---------- */ .theme-switch{--ts-bg:rgba(33,29,22,.05);--ts-line:rgba(33,29,22,.10);--ts-fg:#6C6456;--ts-on:#211D16;--ts-thumb:#FFFFFF; --ts-thumb-sh:0 1px 2px rgba(33,29,22,.12),0 2px 6px -2px rgba(33,29,22,.18); position:relative;display:inline-grid;grid-template-columns:repeat(2,28px);flex:none;padding:2px;margin:0; border-radius:999px;border:1px solid var(--ts-line);background:var(--ts-bg)} .theme-switch button{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:26px;margin:0;padding:0; border:0;border-radius:999px;background:none;color:var(--ts-fg);cursor:pointer;transition:color .3s} .theme-switch button:hover{color:var(--ts-on)} .theme-switch button:focus-visible{outline:2px solid var(--ts-focus,#B8562B);outline-offset:1px} .theme-switch svg{width:15px;height:15px;transition:transform .45s cubic-bezier(.32,.72,0,1)} .theme-switch button[aria-pressed="true"]{color:var(--ts-on)} .theme-switch button[aria-pressed="true"] svg{transform:rotate(-12deg) scale(1.05)} .ts-thumb{position:absolute;z-index:0;top:2px;left:2px;width:28px;height:26px;border-radius:999px;background:var(--ts-thumb); box-shadow:var(--ts-thumb-sh);transition:transform .45s cubic-bezier(.32,.72,0,1),background-color .3s} [data-theme="halloween"] .ts-thumb{transform:translateX(28px)} /* before the script marks the pressed segment, the thumb position alone shows the state */ [data-theme="light"] .theme-switch [data-theme-set="light"], [data-theme="dark"] .theme-switch [data-theme-set="dark"], [data-theme="halloween"] .theme-switch [data-theme-set="halloween"]{color:var(--ts-on)} [data-theme="dark"] .theme-switch{--ts-bg:rgba(244,244,242,.05);--ts-line:rgba(244,244,242,.12);--ts-fg:#8E8E89;--ts-on:#0A0A0A; --ts-thumb:#F4F4F2;--ts-thumb-sh:0 2px 8px -2px rgba(0,0,0,.6);--ts-focus:#E8875A} [data-theme="halloween"] .theme-switch{--ts-bg:rgba(255,122,31,.08);--ts-line:rgba(255,122,31,.28);--ts-fg:#A596AB;--ts-on:#120D14; --ts-thumb:#FF7A1F;--ts-thumb-sh:0 0 12px rgba(255,122,31,.55);--ts-focus:#FF9A4D} .navpill .theme-switch{margin-left:12px} @media (prefers-reduced-motion:reduce){.ts-thumb,.theme-switch svg{transition:none}} /* Videos (hero gnome loop, launch video) were shot on white; on a dark page they glare like a lit window, so take them down a stop. Posters dim with them. */ video{transition:filter .4s ease} :root:not([data-theme="light"]) video{filter:brightness(.72) contrast(1.06)} /* ---------- 4. Browser surfaces ---------- */ :root[data-theme="dark"]{color-scheme:dark;accent-color:#D9713F;scrollbar-color:#2E2E2E #0A0A0A} :root[data-theme="halloween"]{color-scheme:dark;accent-color:#FF7A1F;scrollbar-color:#4A3552 #120D14} [data-theme="dark"] ::selection{background:rgba(217,113,63,.38);color:#FFFFFF} [data-theme="halloween"] ::selection{background:rgba(255,122,31,.42);color:#FFF6EA} /* ---------- 5. Halloween layer (injected by /theme.js; decorative, never interactive) ---------- */ .hw-fx{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden} /* keep page content above the layer: static pages whose main/footer are not already lifted */ [data-theme="halloween"] body > main,[data-theme="halloween"] body > footer{position:relative;z-index:2} .hw-moon{position:absolute;right:-9vmax;top:-6vmax;width:34vmax;height:34vmax;border-radius:50%; background:radial-gradient(circle at 42% 42%,rgba(246,231,184,.55) 0%,rgba(233,201,138,.22) 30%,rgba(233,201,138,.06) 52%,rgba(233,201,138,0) 70%)} .hw-web{position:absolute;top:0;width:clamp(120px,16vw,210px);height:auto;color:#E6D9C3;opacity:.34} .hw-web.l{left:0}.hw-web.r{right:0;transform:scaleX(-1)} .hw-bat{position:absolute;left:0;top:0;width:var(--s,64px);color:#3A2943;opacity:0; filter:drop-shadow(0 0 1px rgba(255,190,120,.55)) drop-shadow(0 0 10px rgba(255,122,31,.28)); animation:hw-fly var(--d,16s) cubic-bezier(.45,.05,.55,.95) var(--delay,0s) infinite} .hw-bat svg{display:block;width:100%;height:auto;transform-origin:50% 55%;animation:hw-flap .19s ease-in-out infinite alternate} @keyframes hw-flap{from{transform:scaleY(1)}to{transform:scaleY(.38) translateY(6%)}} @keyframes hw-fly{ 0%{opacity:0;transform:translate(-12vw,var(--y0,22vh)) rotate(-4deg)} 6%{opacity:1} 30%{transform:translate(28vw,calc(var(--y0,22vh) - 7vh)) rotate(5deg)} 55%{transform:translate(55vw,calc(var(--y0,22vh) + 4vh)) rotate(-6deg)} 80%{transform:translate(84vw,calc(var(--y0,22vh) - 9vh)) rotate(4deg)} 94%{opacity:1} 100%{opacity:0;transform:translate(112vw,calc(var(--y0,22vh) - 3vh)) rotate(-2deg)}} @media (prefers-reduced-motion:reduce){.hw-bat{animation:none;opacity:.85}.hw-bat svg{animation:none} .hw-bat:nth-of-type(1){transform:translate(70vw,12vh)}.hw-bat:nth-of-type(2){transform:translate(82vw,20vh)}.hw-bat:nth-of-type(3){display:none}} @media (max-width:640px){.hw-web{opacity:.26}.hw-bat:nth-of-type(3){display:none}}