/* ============================================================ Zendux — shared landing-page theme Reusable design tokens, base resets, and animations. Use on any landing page with TWO tags in / : Then reference tokens from inline styles via var(--zx-…), or use the .zx-* utility classes at the bottom. (Fonts are also @imported below so this file works standalone.) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap'); :root{ /* ---- color ---- */ --zx-paper:#F4F3EF; /* page background */ --zx-ink:#0A0A0A; /* primary / headings */ --zx-lime:#C7F94B; /* accent */ --zx-lime-bright:#d6ff66; /* accent hover */ --zx-ink-80:#1c1c1a; --zx-ink-70:#46463F; /* body text */ --zx-ink-55:#6B6B66; /* muted / mono labels */ --zx-ink-40:#9A9A93; /* faint */ --zx-line:rgba(10,10,10,0.1); /* hairline borders */ --zx-card:#ffffff; /* card surface */ /* ---- type ---- */ --zx-font-display:'Space Grotesk',sans-serif; --zx-font-body:'Hanken Grotesk',sans-serif; --zx-font-mono:'Space Mono',monospace; /* ---- shape ---- */ --zx-radius:18px; --zx-radius-sm:11px; --zx-shadow:0 30px 60px -28px rgba(10,10,10,0.4); } /* ===== base resets ===== */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--zx-paper);font-family:var(--zx-font-body);-webkit-font-smoothing:antialiased;color:var(--zx-ink)} ::selection{background:var(--zx-lime);color:var(--zx-ink)} /* ===== animations ===== */ @keyframes zx-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} @keyframes zx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes zx-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes zx-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}} @keyframes zx-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}} @keyframes zx-flowline{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}} @keyframes zx-adglow{0%,80%{opacity:0}90%{opacity:.95}100%{opacity:0}} /* ===== optional utilities (for new pages; this page uses inline styles) ===== */ .zx-eyebrow{font-family:var(--zx-font-mono);font-size:12px;letter-spacing:.12em;color:var(--zx-ink-55)} .zx-display{font-family:var(--zx-font-display);font-weight:700;letter-spacing:-.03em;line-height:1.02;color:var(--zx-ink)} .zx-card{background:var(--zx-card);border:1px solid var(--zx-line);border-radius:var(--zx-radius);padding:30px} .zx-btn{display:inline-block;text-align:center;font-family:var(--zx-font-display);font-weight:600;font-size:15px;text-decoration:none;border-radius:var(--zx-radius-sm);padding:13px 18px;transition:background .15s,color .15s} .zx-btn--primary{background:var(--zx-ink);color:#fff;border:1.5px solid var(--zx-ink)} .zx-btn--primary:hover{background:#fff;color:var(--zx-ink)} .zx-btn--accent{background:var(--zx-lime);color:var(--zx-ink)} .zx-btn--accent:hover{background:var(--zx-lime-bright)} .zx-btn--ghost{background:#fff;color:var(--zx-ink);border:1.5px solid var(--zx-ink)} .zx-btn--ghost:hover{background:var(--zx-ink);color:#fff}