/* ANDD — shared design system across all three directions */ :root { --bg: #060912; --bg-1: #0a0f1c; --bg-2: #0f1628; --surface: #111a2e; --surface-hi: #17233d; --line: rgba(120, 170, 255, 0.08); --line-hi: rgba(120, 170, 255, 0.22); --line-hot: rgba(120, 220, 255, 0.5); --ink-0: #f4f7ff; --ink-1: #c8d4ed; --ink-2: #8696b8; --ink-3: #536285; /* Accents */ --cyan: #5ee3ff; --cyan-dim: #2b9fc4; --amber: #ffb454; --amber-dim: #b87326; --violet: #a388ff; --lime: #9fe870; --rose: #ff7a8a; --glow-cyan: rgba(94, 227, 255, 0.4); /* Industry accents (for lens filter) */ --ind-mobility: #5ee3ff; --ind-public-safety: #ff7a8a; --ind-power: #ffb454; --ind-health: #9fe870; --ind-ai: #a388ff; --ind-depin: #5eb8ff; --ind-civic: #c8d4ed; --font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --pad-section: clamp(4rem, 6vw, 7rem); } /* Light theme — paper/cartographic. Applied via [data-theme="light"] on . */ [data-theme="light"] { --bg: #f5f2ea; /* warm paper */ --bg-1: #eae6db; /* slightly darker paper */ --bg-2: #ddd6c4; --surface: #ffffff; --surface-hi: #f0ece1; --line: rgba(20, 40, 80, 0.10); --line-hi: rgba(20, 40, 80, 0.22); --line-hot: rgba(10, 100, 160, 0.45); --ink-0: #0a1224; /* near-black ink */ --ink-1: #22304a; --ink-2: #55637d; --ink-3: #8691a8; --cyan: #0f7a9a; /* printed teal */ --cyan-dim: #0a5570; --amber: #c27020; --amber-dim: #8d4a0f; --violet: #6041c7; --lime: #3d7a2c; --rose: #c43a55; --glow-cyan: rgba(15, 122, 154, 0.18); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink-1); } body { font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01','cv11'; } a { color: inherit; text-decoration: none; } /* WORDMARK */ .wm { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; font-size: 20px; color: var(--ink-0); display: inline-flex; align-items: center; gap: 10px; } .wm-mark { width: 22px; height: 22px; position: relative; flex-shrink: 0; } .wm-mark svg { width: 100%; height: 100%; display: block; } .wm-kern { letter-spacing: 0.02em; font-weight: 400; color: var(--ink-2); } /* MONO bits */ .mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2); text-transform: uppercase; } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; border-radius: 999px; border: 1px solid var(--line-hi); color: var(--ink-0); background: transparent; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .btn:hover { background: rgba(120, 170, 255, 0.06); border-color: var(--line-hot); } .btn-primary { background: var(--cyan); color: #051016; border-color: var(--cyan); } .btn-primary:hover { background: #8aeeff; border-color: #8aeeff; transform: translateY(-1px); } [data-theme="light"] .btn:hover { background: rgba(15, 122, 154, 0.06); } [data-theme="light"] .btn-primary { color: #f8f5ec; } [data-theme="light"] .btn-primary:hover { background: #0a5570; border-color: #0a5570; } /* Common layout helpers */ .container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem); } .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); } h1, h2, h3 { font-family: var(--font-display); color: var(--ink-0); letter-spacing: -0.02em; font-weight: 500; } h1 { font-size: clamp(2.5rem, 5.2vw, 4.6rem); line-height: 1.02; } h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.05; } h3 { font-size: 1.25rem; font-weight: 500; } hr.rule { border: 0; border-top: 1px solid var(--line); } /* Grid bg — subtle */ .gridbg { background-image: linear-gradient(rgba(120,170,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120,170,255,0.05) 1px, transparent 1px); background-size: 80px 80px; } [data-theme="light"] .gridbg { background-image: linear-gradient(rgba(20,40,80,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(20,40,80,0.06) 1px, transparent 1px); } /* Placeholder image treatment */ .placeholder { background: repeating-linear-gradient(45deg, rgba(120,170,255,0.04) 0 10px, transparent 10px 20px), var(--surface); border: 1px solid var(--line); color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--surface-hi); border-radius: 999px; } ::-webkit-scrollbar-track { background: transparent; }