/* ============================================================ WHYSWING — themed design system (dark default + light) Switch theme via [data-theme="light"] on . ============================================================ */ :root{ --lime:#C6F500; --lime-dark:#A8D400; --black:#0A0A0A; --bg:#0A0A0A; --surface:#141414; --line:#1E1E1E; --grey:#8C8C8C; --ink:#F5F5F2; --accent:#C6F500; /* readable lime-toned accent text */ --input-border:#2A2A2A; --nav-bg:rgba(10,10,10,.72); --glow:rgba(198,245,0,.10); --cause-border:rgba(198,245,0,.4); --cause-glow:transparent; --font:"Inter",-apple-system,Helvetica,Arial,sans-serif; --maxw:1080px; --pad:28px; } :root[data-theme="light"]{ --bg:#F4F4EF; --surface:#FFFFFF; --line:#E2E2DA; --grey:#6B6B63; --ink:#0A0A0A; --accent:#7E9C00; /* darkened lime so accents stay readable on cream */ --input-border:#D2D2C8; --nav-bg:rgba(244,244,239,.78); --glow:rgba(198,245,0,.20); --cause-border:#C9E000; --cause-glow:rgba(198,245,0,.12); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--font); background:var(--bg);color:var(--ink); line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background .3s ease,color .3s ease; } a{color:inherit;text-decoration:none} h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1.05;color:var(--ink)} .lime{color:var(--accent)} .wrap{max-width:var(--maxw);width:100%;margin:0 auto;padding:0 var(--pad)} /* Brand mark */ .logo{font-size:1.2rem;font-weight:900;letter-spacing:-.04em;color:var(--ink)} .logo span{color:var(--accent)} /* Badge / pulse dot */ .badge{ font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--grey);display:inline-flex;align-items:center;gap:8px; } .badge::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--lime); box-shadow:0 0 0 0 rgba(198,245,0,.6);animation:pulse 2.2s infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(198,245,0,.5)} 70%{box-shadow:0 0 0 9px rgba(198,245,0,0)} 100%{box-shadow:0 0 0 0 rgba(198,245,0,0)} } /* Waitlist form */ .signup{display:flex;gap:10px;flex-wrap:wrap;max-width:500px} .signup input{ flex:1;min-width:220px;padding:18px 20px;font-size:1rem;border-radius:12px; border:1px solid var(--input-border);background:var(--surface);color:var(--ink);outline:none; transition:border-color .2s;font-family:inherit; } .signup input:focus{border-color:var(--accent)} .signup button{ padding:18px 32px;font-size:1rem;font-weight:800;border:none;border-radius:12px; background:var(--lime);color:var(--black);cursor:pointer;font-family:inherit; transition:transform .15s,background .15s; } .signup button:hover{transform:translateY(-2px);background:var(--lime-dark)} .note{margin-top:16px;font-size:.82rem;color:var(--grey)} .success{display:none;margin-top:18px;color:var(--accent);font-weight:700;font-size:1.05rem} /* Shared navigation */ .site-nav{ position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center; padding:18px 0;background:transparent; border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s; } .site-nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav-links{display:flex;align-items:center;gap:22px} .nav-links a{font-size:.9rem;color:var(--grey);transition:color .15s} .nav-links a:hover{color:var(--ink)} .nav-links a.current{color:var(--ink)} .nav-cta{ color:var(--black);background:var(--lime);font-weight:700; padding:10px 20px;border-radius:8px;font-size:.88rem;transition:transform .15s,background .15s; } .nav-cta:hover{transform:translateY(-1px);background:var(--lime-dark);color:var(--black)} /* Theme toggle */ .theme-toggle{ width:36px;height:36px;border-radius:9px;border:1px solid var(--line); background:transparent;color:var(--ink);cursor:pointer;display:inline-flex; align-items:center;justify-content:center;transition:border-color .15s,background .15s; flex:0 0 auto; } .theme-toggle:hover{border-color:var(--accent)} .theme-toggle svg{width:18px;height:18px;display:block} .theme-toggle .icon-sun{display:none} :root[data-theme="light"] .theme-toggle .icon-sun{display:block} :root[data-theme="light"] .theme-toggle .icon-moon{display:none} /* Theme-aware hero visual (roots) — high specificity so it beats `.hero-visual img` */ .hero-visual img.roots-light{display:none} :root[data-theme="light"] .hero-visual img.roots-dark{display:none} :root[data-theme="light"] .hero-visual img.roots-light{display:block} @media(max-width:520px){.nav-links{gap:14px}.nav-links .text-link{display:none}} /* Footer */ .site-footer{ position:relative;z-index:1;max-width:var(--maxw);width:100%;margin:0 auto; padding:24px var(--pad) 32px;color:var(--grey);font-size:.78rem; display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; border-top:1px solid var(--line); }