/* ================================================================ Onit — Brand System v1 Shared styles for all pages. Mobile-first (95% mobile traffic). Fonts: Unbounded 800 (headlines), Epilogue (body), Syne Mono (labels) ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@800&family=Epilogue:wght@400;500;700&family=Syne+Mono&display=swap'); /* ---- RESET ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---- COLORWAYS (default: Void) ---- */ :root { --bg: #0a0a0a; --surface: #141414; --border: #2a2a2a; --text: #e8e8e8; --text-dim: #777; --accent: #f59e0b; --accent-hover: #fbbf24; --accent-dim: #78350f; --accent-on: #0a0a0a; --error: #ef4444; --radius: 10px; } /* Named colorways — apply via class on or */ .theme-void { --accent: #F5F5F5; --accent-hover: #fff; --accent-dim: #333; --accent-on: #0a0a0a; } .theme-linear { --bg: #0F1117; --accent: #3B82F6; --accent-hover: #60A5FA; --accent-dim: #1e3a5f; --accent-on: #fff; } .theme-organic { --bg: #F5F0E8; --surface: #ebe5d9; --border: #d5cfc3; --text: #1A2E1A; --text-dim: #4a5e4a; --accent: #1A2E1A; --accent-hover: #2D5016; --accent-dim: #c5d5b5; --accent-on: #F5F0E8; } .theme-ember { --bg: #18181B; --accent: #F97316; --accent-hover: #FB923C; --accent-dim: #7c2d12; --accent-on: #fff; } .theme-terminal { --bg: #0D0D0D; --accent: #A3E635; --accent-hover: #BEF264; --accent-dim: #365314; --accent-on: #0a0a0a; } .theme-ultra { --bg: #1C0A3A; --surface: #261050; --border: #3a1a6a; --accent: #E879F9; --accent-hover: #F0ABFC; --accent-dim: #6b21a8; --accent-on: #1C0A3A; } /* ---- BASE ---- */ body { font-family: 'Epilogue', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.6; } /* ---- FLICKER ANIMATIONS (brand icon exhaust + period dot) ---- */ @keyframes f1a{0%,100%{opacity:1}15%{opacity:.5}40%{opacity:.9}60%{opacity:.6}80%{opacity:1}} @keyframes f1b{0%,100%{opacity:.8}20%{opacity:1}50%{opacity:.4}75%{opacity:.9}} @keyframes f1c{0%,100%{opacity:.6}25%{opacity:1}55%{opacity:.7}80%{opacity:.3}} /* ---- HEADER ---- */ .site-header { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color 0.2s; } .site-header.scrolled { border-bottom-color: var(--border); } .brand-lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .brand-lockup:visited { color: var(--text); } .brand-icon { flex-shrink: 0; } .brand-wordmark { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1; color: var(--text); } .brand-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-left: 2px; flex-shrink: 0; animation: f1a 1.8s ease-in-out infinite; animation-delay: .15s; } .header-label { font-family: 'Syne Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .header-back { font-family: 'Epilogue', sans-serif; font-size: 14px; color: var(--accent); text-decoration: none; font-weight: 500; transition: color 0.2s; } .header-back:hover { color: var(--accent-hover); } /* ---- FOOTER ---- */ .site-footer { padding: 32px 20px; text-align: center; font-size: 12px; color: var(--text-dim); border-top: 1px solid var(--border); margin-top: 48px; } .site-footer a { color: var(--text-dim); text-decoration: underline; transition: color 0.2s; } .site-footer a:hover { color: var(--text); } /* ---- TYPOGRAPHY ---- */ .h1, h1 { font-family: 'Unbounded', sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .h2, h2 { font-family: 'Unbounded', sans-serif; font-weight: 800; letter-spacing: -0.02em; } .mono { font-family: 'Syne Mono', monospace; } .label { font-family: 'Syne Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .var { font-family: 'Syne Mono', monospace; color: var(--accent); background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 4px; padding: 1px 6px; font-size: 0.85em; } /* ---- LAYOUT ---- */ .page-wrap { max-width: 600px; margin: 0 auto; padding: 0 20px; } .page-wrap--wide { max-width: 720px; } .page-wrap--narrow { max-width: 520px; }