/* ============================================ BADPREP AI — DESIGN SYSTEM Single source of truth for colors, type, components. Linked into all pages. ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Arimo:wght@300;400;500;600;700&display=swap'); :root { /* Color palette */ --bg: #0a0a09; --bg-2: #131310; --bg-3: #1a1a16; --ink: #ede7df; --ink-2: #8a8479; --ink-3: #5a564d; --line: rgba(237,231,223,0.10); --line-2: rgba(237,231,223,0.05); --accent: #c75a1f; --accent-2: #ff6a26; --green: #6b8f4e; --red: #b8442a; --amber: #d4a017; /* Type scale */ --font-sans: 'Arimo', -apple-system, system-ui, sans-serif; /* Spacing rhythm */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 140px; /* Radii — minimal, mostly square */ --r-sm: 0; --r-md: 0; --r-pill: 999px; /* Transition */ --t-base: 0.3s ease; --t-slow: 0.5s ease; } /* ============================================ LIGHT THEME — warm paper / editorial print Toggle via [data-theme="light"] on ============================================ */ [data-theme="light"] { --bg: #f5f1e8; --bg-2: #ece6d8; --bg-3: #e2dbc9; --ink: #1a1814; --ink-2: #5a554a; --ink-3: #8a8479; --line: rgba(26,24,20,0.12); --line-2: rgba(26,24,20,0.06); --accent: #b54a14; --accent-2: #c75a1f; --green: #547038; --red: #9a3520; --amber: #b8861a; } [data-theme="light"] .site-header { background: linear-gradient(180deg, rgba(245,241,232,0.92) 0%, rgba(245,241,232,0) 100%); } [data-theme="light"] .site-header.solid { background: var(--bg); } [data-theme="light"] ::selection { background: var(--accent); color: #fff; } [data-theme="light"] .btn-primary { color: #fff; } [data-theme="light"] .btn:hover { color: var(--bg); } html { transition: background-color var(--t-base); } body { transition: background-color var(--t-base), color var(--t-base); } /* Theme toggle button (injected by theme-toggle.js) */ .theme-toggle { position: fixed; bottom: 24px; right: 24px; z-index: 9998; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all var(--t-base); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } /* ============================================ RESET / BASE ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } ::selection { background: var(--accent); color: var(--ink); } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "tnum"; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; } /* ============================================ TYPE ============================================ */ h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 300; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; } h1 { font-size: clamp(38px, 5.6vw, 88px); } h2 { font-size: clamp(32px, 4.6vw, 68px); } h3 { font-size: clamp(20px, 2vw, 28px); } h4 { font-size: 16px; letter-spacing: 0.18em; } h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); font-weight: 300; } .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.32em; color: var(--accent); font-weight: 500; } .eyebrow::before { content: '— '; } .lede { font-size: 15px; color: var(--ink-2); line-height: 1.7; max-width: 580px; } /* Tabular numbers */ .num, .num-lg { font-weight: 300; letter-spacing: -0.02em; font-feature-settings: "tnum"; } .num-lg { font-size: 44px; line-height: 1; } /* Labels (uppercase wide-tracked) */ .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.26em; color: var(--ink-3); font-weight: 500; } /* ============================================ ANIMATIONS ============================================ */ @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes drift { 0%,100% { transform: scale(1.04) translate(0, 0); } 50% { transform: scale(1.08) translate(-1%, -1%); } } @keyframes pulse-line { 0%,100% { transform: scaleY(0.3); opacity: 0.3; } 50% { transform: scaleY(1); opacity: 1; } } .reveal { opacity: 0; animation: rise 1s cubic-bezier(.2,.8,.2,1) forwards; } .reveal.d1 { animation-delay: 0.1s; } .reveal.d2 { animation-delay: 0.25s; } .reveal.d3 { animation-delay: 0.4s; } .reveal.d4 { animation-delay: 0.55s; } .reveal.d5 { animation-delay: 0.7s; } .live-dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-right: 8px; vertical-align: middle; animation: blink 1.6s ease-in-out infinite; } /* ============================================ PANEL — the signature flat block with hover line Apply to: cards, kpis, action items, menu rows ============================================ */ .panel { position: relative; border: 1px solid var(--line); background: var(--bg); padding: 28px; transition: background var(--t-base), border-color var(--t-base); } .panel:hover { background: var(--bg-2); border-color: var(--ink-3); } .panel::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); transition: width var(--t-slow); z-index: 1; } .panel:hover::after { width: 100%; } .panel.no-hover:hover { background: var(--bg); border-color: var(--line); } .panel.no-hover::after { display: none; } /* Panel grid (no double borders) */ .panel-grid { display: grid; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .panel-grid > .panel { border-top: none; border-left: none; border-radius: 0; } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-sans); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.28em; padding: 18px 38px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: all 0.4s; text-decoration: none; } .btn:hover { background: var(--ink); color: var(--bg); letter-spacing: 0.32em; } .btn .arrow { font-size: 16px; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--ink); } .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--ink); } .btn-sm { padding: 12px 22px; font-size: 10px; letter-spacing: 0.22em; } .btn-text { font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-2); border-bottom: 1px solid var(--ink-2); padding-bottom: 2px; display: inline-block; } .btn-text:hover { color: var(--accent); border-color: var(--accent); } /* ============================================ FORMS ============================================ */ .form-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-2); margin-bottom: 10px; } .form-input, .form-textarea, .form-select { width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); padding: 14px 16px; font-size: 14px; font-family: var(--font-sans); border-radius: 0; transition: border-color var(--t-base); } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--accent); } .form-input::placeholder { color: var(--ink-3); } .form-textarea { resize: vertical; min-height: 100px; } /* ============================================ NAV / HEADER (website) ============================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 28px 60px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, rgba(10,10,9,0.92) 0%, rgba(10,10,9,0) 100%); } .site-header.solid { background: var(--bg); border-bottom: 1px solid var(--line); } .site-logo { font-size: 13px; text-transform: uppercase; letter-spacing: 0.32em; font-weight: 600; color: var(--ink); } .site-logo span { color: var(--accent); } .site-nav { display: flex; gap: 44px; list-style: none; } .site-nav a { font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; font-weight: 500; color: var(--ink); transition: color var(--t-base); } .site-nav a:hover { color: var(--accent); } /* ============================================ FOOTER ============================================ */ .site-footer { padding: 60px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-3); flex-wrap: wrap; gap: 24px; } /* ============================================ SECTION SHELL ============================================ */ .section { padding: 140px 60px; border-top: 1px solid var(--line); position: relative; } .section-head { text-align: center; max-width: 900px; margin: 0 auto 80px; } .section-head .eyebrow { display: block; margin-bottom: 24px; } .section-head h2 { margin-bottom: 24px; } .section-head .lede { margin: 0 auto; text-align: center; } /* ============================================ UTILITIES ============================================ */ .wrap { max-width: 1280px; margin: 0 auto; } .center { text-align: center; } .muted { color: var(--ink-2); } .dim { color: var(--ink-3); } .accent { color: var(--accent); } .row { display: flex; gap: 16px; align-items: center; } .spacer { height: 40px; } /* Toast (used by JS apps) */ .toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: var(--bg-2); border: 1px solid var(--accent); color: var(--ink); padding: 14px 24px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; z-index: 9999; animation: rise 0.4s ease forwards; } .toast.error { border-color: var(--red); } .toast.success { border-color: var(--green); } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 800px) { .site-header { padding: 20px 24px; } .site-nav { display: none; } .section { padding: 80px 24px; } .site-footer { padding: 40px 24px; flex-direction: column; } .btn { padding: 16px 28px; } body { font-size: 13px; } }