/* ============================================================================ PAGEBOLT — REVAMP FOUNDATION (austere / monochrome / near-black) Shared base for the 3 marketing-hero directions. Each direction sets data-accent on to pick its signature whisper-accent. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* Near-black canvas — deeper & cooler than the old #0F0F11 */ --bg: #08080A; --bg-1: #0C0C0F; /* raised panels */ --bg-2: #111114; /* cards, frames */ --bg-3: #16161A; /* Ink — high-contrast near-white down to faint */ --ink: #F4F4F6; --ink-2: #9B9BA6; --ink-3: #62626E; --ink-4: #3A3A43; /* Hairlines */ --line: rgba(255,255,255,0.07); --line-2: rgba(255,255,255,0.04); --line-3: rgba(255,255,255,0.12); /* Type */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --ease: cubic-bezier(0.16, 1, 0.3, 1); /* Default accent (overridden per direction) */ --accent: #C4F042; --accent-ink: #0A0A0B; /* text that sits on an accent fill */ --accent-soft: rgba(196,240,66,0.12); --accent-line: rgba(196,240,66,0.30); --accent-glow: rgba(196,240,66,0.16); } /* ── Accent themes ──────────────────────────────────────────────────────── */ [data-accent="lime"] { --accent: #C4F042; /* electric lime — fresh, technical, "bolt" */ --accent-ink: #0A0A0B; --accent-soft: rgba(196,240,66,0.12); --accent-line: rgba(196,240,66,0.32); --accent-glow: rgba(196,240,66,0.18); } [data-accent="amber"] { --accent: #F0A93B; /* warm gold/ember — premium, unexpected */ --accent-ink: #14100A; --accent-soft: rgba(240,169,59,0.12); --accent-line: rgba(240,169,59,0.32); --accent-glow: rgba(240,169,59,0.20); } [data-accent="cyan"] { --accent: #5DE7EA; /* icy cyan — crisp, electric, refined */ --accent-ink: #04181A; --accent-soft: rgba(93,231,234,0.10); --accent-line: rgba(93,231,234,0.30); --accent-glow: rgba(93,231,234,0.16); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } ::selection { background: var(--accent); color: var(--accent-ink); } /* Shared atoms */ .mono { font-family: var(--font-mono); } .disp { font-family: var(--font-display); } .eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-3); } .accent-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } .hairline { height: 1px; background: var(--line); border: 0; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 600; border-radius: 8px; padding: 11px 18px; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: all 0.25s var(--ease); white-space: nowrap; } .btn-accent { background: var(--accent); color: var(--accent-ink); } .btn-accent:hover { transform: translateY(-1px); box-shadow: 0 8px 30px var(--accent-glow); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-3); } .btn-ghost:hover { border-color: var(--ink-2); background: rgba(255,255,255,0.03); } /* reveal-on-load */ @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .rise { opacity: 0; animation: riseIn 0.8s var(--ease) forwards; } @media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; } }