/* ============================================================ base.css — design tokens, reset, and shared primitives Tokens mirror the CachePL app (src/App.css) so the landing page and the product feel like one continuous surface. ============================================================ */ :root { /* Brand palette — dark is the default theme */ --bg: #0c0f12; --bg-elev: #14181d; --bg-card: #161b21; --border: #232a32; --text: #e6edf3; --text-dim: #8b98a5; --accent: #00e08a; --accent-dim: #00b873; --danger: #ff6b6b; --star: #ffd34d; --radius: 12px; --radius-lg: 18px; --maxw: 1140px; /* Accent ink — text/icon color that sits on a solid accent fill */ --on-accent: #03110b; --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.25); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5); --glow: 0 0 0 1px rgba(0, 224, 138, 0.18), 0 18px 50px rgba(0, 224, 138, 0.12); font-family: "Inter", system-ui, -apple-system, sans-serif; color-scheme: dark; } /* Light theme — applied when */ [data-theme="light"] { --bg: #f6f7f9; --bg-elev: #ffffff; --bg-card: #ffffff; --border: #e3e7ec; --text: #1a1f24; --text-dim: #5c6670; --accent: #00a866; --accent-dim: #00935a; --danger: #e23b3b; --star: #e0a500; --on-accent: #ffffff; --shadow-sm: 0 4px 16px rgba(20, 30, 40, 0.08); --shadow-lg: 0 24px 60px rgba(20, 30, 40, 0.14); --glow: 0 0 0 1px rgba(0, 168, 102, 0.2), 0 18px 50px rgba(0, 168, 102, 0.12); color-scheme: light; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 0.25s ease, color 0.25s ease; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.12; margin: 0; } /* ---------- Layout primitive ---------- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; } /* ---------- Shared bits ---------- */ .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; } .grad { background: linear-gradient(120deg, var(--accent), #4df0ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .tick { color: var(--accent); font-weight: 700; margin-right: 0.4rem; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid transparent; border-radius: var(--radius); padding: 0.6rem 1.1rem; font-weight: 600; font-size: 0.95rem; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } .btn:active { transform: translateY(1px); } .btn-lg { padding: 0.8rem 1.5rem; font-size: 1.02rem; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-dim); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { border-color: var(--accent-dim); color: var(--accent); } /* ---------- Scroll-reveal (driven by reveal.js) ---------- IMPORTANT: content is fully visible by default. The hidden start-state is gated behind `.reveal-ready`, which reveal.js only adds once it has confirmed it can actually animate (JS running, IntersectionObserver present, motion allowed). If the module never runs — opened as a file://, blocked in a preview, JS disabled — nothing is hidden and the page reads normally. */ .reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; } .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }