/* Shared across the marketing pages. Edited here, not per page. * * The theme IS the web app's: token values lifted from design/dsa-tokens.css * (the app's single source of truth), same fonts, same radii, same topbar * language, same light/dark behaviour (data-theme on , stored under the * app's own localStorage key `dsaTheme`, defaulting to the system scheme). * The old variable NAMES are kept so page-local styles keep working — only * their values changed products. */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700;800&display=swap'); :root, [data-theme="dark"]{ --bg:#050706; --bg2:#0a0e0b; --bg3:#161c17; --line:#1d241f; --line2:#29322b; --t0:#e6ede8; --t1:#a3b0a7; --t2:#6a756d; --acc:#35d67a; --acc-hover:#4ae389; --acc-text:#04140b; --acc-soft:#0d2a1a; --acc2:#2dd4bf; --bad:#f87171; --warn:#facc15; } [data-theme="light"]{ --bg:#f7f6f3; --bg2:#ffffff; --bg3:#e8e5dc; --line:#d8d4c7; --line2:#b8b3a2; --t0:#1c1d1f; --t1:#4f5159; --t2:#82858f; --acc:#0c6e33; --acc-hover:#095a2a; --acc-text:#f2fff7; --acc-soft:#d9f3e3; --acc2:#0f766e; --bad:#b91c1c; --warn:#a16207; } :root{ --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif; --r-sm:2px; --r-md:3px; --r-lg:4px; --max:1180px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--sans); font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} h1,h2,h3{color:var(--t0);line-height:1.12;letter-spacing:-.015em;margin:0;font-weight:700} h1{font-size:clamp(1.9rem,4.4vw,2.9rem)} h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:650;margin-bottom:12px} h3{font-size:1rem;font-weight:600;margin-bottom:6px} p{margin:0 0 14px} .lede{font-size:clamp(1rem,1.7vw,1.12rem);color:var(--t1);max-width:62ch} .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--acc);margin-bottom:12px} /* ---------- nav — the app's topbar, verbatim language ---------- */ nav{position:sticky;top:0;z-index:20;background:var(--bg2); border-bottom:1px solid var(--line)} nav .wrap{display:flex;align-items:center;gap:16px;height:48px} .brand{font-family:var(--mono);font-weight:600;color:var(--acc);letter-spacing:.08em; font-size:13px;text-transform:uppercase;white-space:nowrap; display:inline-flex;align-items:center;gap:8px;text-decoration:none} .brand:hover{text-decoration:none} .brand img{display:block;flex:0 0 auto;width:22px;height:22px} .brand span{color:var(--acc)} /* The mark comes in dark- and light-ground variants; show the right one. */ .brand .logo-dark{display:block} .brand .logo-light{display:none} [data-theme="light"] .brand .logo-dark{display:none} [data-theme="light"] .brand .logo-light{display:block} nav .links{display:flex;gap:16px;margin-left:auto} nav .links a{font-family:var(--mono);font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--t1)} nav .links a:hover{color:var(--t0);text-decoration:none} @media(max-width:720px){nav .links{display:none}} /* The top-right tool cluster: the LOG OUT button's exact recipe — transparent, 1px line-2 border, mono caps, 2px radius. */ nav .btn, .navtool{ display:inline-block;background:transparent;color:var(--t1);font-weight:400; font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; padding:4px 8px;border:1px solid var(--line2);border-radius:var(--r-sm); cursor:pointer;transition:background .08s,color .08s,border-color .08s;transform:none} nav .btn:hover, .navtool:hover{color:var(--acc);border-color:var(--acc); background:transparent;filter:none;transform:none;text-decoration:none} /* The theme switch: the app's ThemeToggle, copied — 28px square, bordered. */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;padding:0;background:transparent; border:1px solid var(--line);border-radius:var(--r-sm);color:var(--t1); cursor:pointer;transition:background .08s,border-color .08s,color .08s} .theme-toggle:hover{color:var(--t0);border-color:var(--line2)} .theme-toggle svg{display:block} [data-theme="dark"] .theme-toggle .ic-moon{display:none} [data-theme="light"] .theme-toggle .ic-sun{display:none} /* ---------- buttons in content ---------- */ .btn{display:inline-block;background:var(--acc);color:var(--acc-text); font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;padding:10px 16px;border-radius:var(--r-md); border:1px solid var(--acc);cursor:pointer; transition:background .08s,border-color .08s} .btn:hover{background:var(--acc-hover);border-color:var(--acc-hover); text-decoration:none;filter:none;transform:none} .btn.ghost{background:transparent;color:var(--t0);border:1px solid var(--line2)} .btn.ghost:hover{background:var(--bg3);border-color:var(--t2)} /* ---------- hero ---------- */ header{padding:0 0 56px;border-bottom:1px solid var(--line);background:var(--bg)} .hero{text-align:center;max-width:780px;margin:0 auto} .hero .lede{margin:16px auto 22px} .cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px} .note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--t2)} .shot{margin:28px 0 42px;border:1px solid var(--line2);border-radius:var(--r-lg); overflow:hidden;background:var(--bg2)} .shot img,.shot video{display:block;width:100%;height:auto;background:var(--bg2)} /* ---------- sections ---------- */ section{padding:64px 0;border-bottom:1px solid var(--line)} .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:32px} .card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px} .card p{margin:0;font-size:13px;color:var(--t1);line-height:1.55} .card .k{font-family:var(--mono);color:var(--acc);font-size:10px;letter-spacing:.12em; text-transform:uppercase;display:block;margin-bottom:9px} .split{display:grid;gap:40px;grid-template-columns:1fr 1.25fr;align-items:center} .split.flip .txt{order:2} @media(max-width:900px){.split{grid-template-columns:1fr}.split.flip .txt{order:0}} .split img{width:100%;height:auto;display:block;border:1px solid var(--line2); border-radius:var(--r-lg)} .split ul{margin:16px 0 0;padding-left:18px} .split li{margin-bottom:8px;font-size:13.5px} /* ---------- audience tabs — segmented, not pills ---------- */ .tabs{display:flex;gap:6px;flex-wrap:wrap;margin:26px 0 22px} .tab{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase; padding:8px 13px;border:1px solid var(--line2);border-radius:var(--r-md); background:var(--bg3);color:var(--t1);cursor:pointer; transition:background .08s,color .08s,border-color .08s} .tab[aria-selected="true"]{background:var(--acc);color:var(--acc-text); border-color:var(--acc);font-weight:600} .tab:hover{color:var(--t0);border-color:var(--t2)} .panel{display:none;animation:fade .18s ease} .panel[data-active="true"]{display:block} @keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}} /* ---------- gallery ---------- */ .gal{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:30px} .gal figure{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; background:var(--bg2);cursor:zoom-in;transition:border-color .08s} .gal figure:hover{border-color:var(--acc);transform:none} .gal img{display:block;width:100%;height:auto} .gal figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.08em; text-transform:uppercase;color:var(--t2);padding:9px 12px; border-top:1px solid var(--line)} /* ---------- lightbox ---------- */ dialog{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh} dialog::backdrop{background:rgba(3,5,3,.9)} [data-theme="light"] dialog::backdrop{background:rgba(255,255,255,.92)} dialog img{max-width:96vw;max-height:90vh;display:block;border-radius:var(--r-lg); border:1px solid var(--line2)} .lb-close{position:fixed;top:18px;right:22px;background:none;border:0;color:var(--t0); font-size:32px;cursor:pointer;line-height:1} /* ---------- honesty ---------- */ .honest{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--acc2); border-radius:0 var(--r-lg) var(--r-lg) 0;padding:20px 22px;margin-top:28px} .honest h3{margin-bottom:10px} .honest ul{margin:0;padding-left:18px;font-size:13px} .honest li{margin-bottom:7px} /* ---------- signup ---------- */ .signup{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;max-width:520px} .signup input{flex:1 1 240px;background:var(--bg3);border:1px solid var(--line2); border-radius:var(--r-md);padding:10px 12px;color:var(--t0); font-family:var(--mono);font-size:12px;letter-spacing:.02em} .signup input:focus{outline:2px solid var(--acc);outline-offset:0;border-color:var(--acc)} .ok{color:var(--acc);font-family:var(--mono);font-size:12px;margin-top:12px} footer{padding:36px 0 52px;color:var(--t2);font-family:var(--mono);font-size:11px; letter-spacing:.04em} footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} /* ---------- sound affordance ---------- */ .vwrap{position:relative} .unmute{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex; align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-md);cursor:pointer; background:var(--bg2);border:1px solid var(--line2);color:var(--t1); font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; transition:color .08s,border-color .08s} .unmute:hover{border-color:var(--acc);color:var(--acc);background:var(--bg2)} .unmute[hidden]{display:none} /* ---------- custom scrollbar, same as the app ---------- */ ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:var(--bg2)} ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:0} ::-webkit-scrollbar-thumb:hover{background:var(--t2)}