/* ═══════════════════════════════════════════════════════════════════════════
THE DESIGN. Ported verbatim from the LIVE Claude Design project.
org 6d6e5d45-0fa2-47db-bac0-a210a7cbe80c (ramon@cognoodle.ai)
project d636ca59-451f-4032-94de-0d1872a036c2
file Ta-ala Home.dc.html
read 14 Jul 2026, live from the canvas
THE ONLY DEVIATIONS FROM THE CANVAS SOURCE, and why:
1. The canvas s Lora + Work Sans from Google's font CDN. We
self-host both (SIL OFL). Same families, same weights, zero Google.
(The CDN hostname is deliberately not written here: guard.sh §1 is a
LITERAL content scan of everything that ships, and this header ships
inside public/design.css, which must stay byte-identical to this file.)
See fonts.css. www/scripts/guard.sh fails the build on any font CDN.
2. The canvas binds template holes ({{ }}, , ). Those are
resolved to real markup in index.html. No visual property changes.
THIS SUPERSEDES v2.css. v2.css was an export of a branch Ramon REVERTED in
Claude Design — Gloock, Space Grotesk, Geist Mono, a Didone wordmark. It is
not the design and never was. Do not import it. Do not consult it.
═══════════════════════════════════════════════════════════════════════════ */
html,body{margin:0}
body{background:#faf8f3;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
@property --bg{syntax:'';inherits:true;initial-value:#faf8f3}
@property --ink{syntax:'';inherits:true;initial-value:#1c1a15}
/* ─── TOKENS. Theme-scoped, not :root — exactly as the canvas has them. ───── */
.stage{position:relative;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;background-color:var(--bg);color:var(--ink);--bg:#faf8f3;--ink:#1c1a15;--muted:#6f6b60;--accent:#63604a;--line:rgba(28,26,21,.13)}
.th-light{--bg:#faf8f3;--ink:#1c1a15;--muted:#6f6b60;--accent:#63604a;--line:rgba(28,26,21,.13)}
.th-dark{--bg:#17150f;--ink:#ece5d8;--muted:#938c7c;--accent:#c2a878;--line:rgba(236,229,216,.15)}
/* ─── THE FIELD. Two radial drifts on different clocks. No photograph. ────── */
.field{position:absolute;inset:0;z-index:0;pointer-events:none}
.field-a,.field-b{position:absolute;inset:-25%;will-change:transform}
.th-light .field-a{background:radial-gradient(58% 54% at 32% 30%,#f4eddd 0%,rgba(244,237,221,0) 68%)}
.th-light .field-b{background:radial-gradient(52% 50% at 72% 76%,#efe8da 0%,rgba(239,232,218,0) 66%)}
.th-dark .field-a{background:radial-gradient(58% 54% at 32% 30%,#231f14 0%,rgba(35,31,20,0) 68%)}
.th-dark .field-b{background:radial-gradient(52% 50% at 72% 76%,#1e1a11 0%,rgba(30,26,17,0) 66%)}
.field-a{animation:driftA 46s ease-in-out infinite alternate}
.field-b{animation:driftB 58s ease-in-out infinite alternate}
.still .field-a,.still .field-b{animation:none}
@keyframes driftA{from{transform:translate3d(-2%,-1%,0) scale(1.02)}to{transform:translate3d(3%,2%,0) scale(1.16)}}
@keyframes driftB{from{transform:translate3d(2%,1%,0) scale(1.1)}to{transform:translate3d(-3%,-2%,0) scale(1)}}
@media (prefers-reduced-motion:reduce){.field-a,.field-b{animation:none}}
/* ─── THE BAR ────────────────────────────────────────────────────────────── */
.bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(22px,3vw,40px) clamp(24px,4vw,54px)}
.wm{background:none;border:0;padding:6px 0;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center}
.wm svg{height:22px;width:auto;display:block}
.rightnav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px)}
.navlink{font-family:'Work Sans',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:11px;line-height:1;color:var(--muted);background:none;border:0;border-bottom:1px solid transparent;padding:0 0 5px;cursor:pointer}
.navlink:hover{color:var(--ink)}
.navlink.active{color:var(--ink);border-bottom-color:var(--accent)}
.sep{width:1px;height:13px;background:var(--line)}
/* ─── THE THEME SWITCH. Three icons: sun, moon, auto. ─────────────────────── */
.themesw{display:flex;align-items:center;gap:clamp(2px,.6vw,6px)}
.thopt{color:var(--muted);background:none;border:0;padding:0;cursor:pointer;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}
.thopt svg{width:16px;height:16px;display:block}
.thopt:hover{color:var(--ink)}
.thopt.active{color:var(--ink)}
/* ─── THE CENTRE ─────────────────────────────────────────────────────────── */
.center{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6vh 24px 12vh}
.fadein{animation:fadeup .95s cubic-bezier(.2,.6,.2,1) both}
@keyframes fadeup{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.eyebrow{font-family:'Work Sans',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.34em;font-size:11px;color:var(--accent);margin:0 0 clamp(22px,3vw,34px)}
.line{font-family:'Lora',Georgia,serif;font-weight:400;font-size:clamp(26px,4.2vw,52px);line-height:1.16;letter-spacing:-.005em;color:var(--ink);max-width:15ch;margin:0;text-wrap:balance}
.whisper{font-family:'Work Sans',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.28em;font-size:10px;color:var(--muted);margin:clamp(46px,7vh,88px) 0 0}
/* ─── THE COMPOSER. + attach · the ask on a hairline · mic · send. ────────── */
.composer{width:min(540px,90vw);margin:clamp(40px,5.5vw,64px) 0 0;display:flex;align-items:center;gap:clamp(6px,1.4vw,16px)}
.ctool{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--muted);cursor:pointer;padding:0}
.ctool:hover{color:var(--ink)}
.ctool svg{width:18px;height:18px;display:block}
.cwrap{flex:1 1 auto;display:flex;border-bottom:1px solid var(--line)}
.cwrap:focus-within{border-bottom-color:var(--accent)}
.cinput{width:100%;text-align:center;background:none;border:0;color:var(--ink);font-family:'Work Sans',sans-serif;font-weight:400;font-size:15px;letter-spacing:.01em;padding:11px 8px;outline:none}