/* ============================================================ ScaleOps — design tokens + global styles ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap'); :root { /* Surfaces — cool near-black, layered */ --bg: #08080a; --bg-1: #0d0d10; --bg-2: #131317; --bg-3: #1a1a20; --line: rgba(255,255,255,0.08); --line-2: rgba(255,255,255,0.14); /* Ink */ --text: #f5f5f6; --text-dim: #b2b2ba; --text-faint:#8a8a94; /* Accent — overridden by Tweaks. Default: electric blue */ --accent: oklch(0.80 0.13 232); --accent-soft: oklch(0.80 0.13 232 / 0.14); --accent-line: oklch(0.80 0.13 232 / 0.35); --accent-ink: #04121c; /* text that sits on the accent fill */ --accent-glow: oklch(0.80 0.13 232 / 0.35); --radius: 14px; --radius-lg:22px; --maxw: 1200px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Accent themes (driven by data-accent on ) */ html[data-accent="lime"] { --accent: oklch(0.86 0.17 128); --accent-soft: oklch(0.86 0.17 128 / 0.14); --accent-line: oklch(0.86 0.17 128 / 0.35); --accent-ink:#0c1604; --accent-glow: oklch(0.86 0.17 128 / 0.35); } html[data-accent="violet"] { --accent: oklch(0.78 0.11 292); --accent-soft: oklch(0.78 0.11 292 / 0.16); --accent-line: oklch(0.78 0.11 292 / 0.38); --accent-ink:#0f0a1c; --accent-glow: oklch(0.78 0.11 292 / 0.38); } html[data-accent="mono"] { --accent: #f1f1f3; --accent-soft: rgba(255,255,255,0.10); --accent-line: rgba(255,255,255,0.30); --accent-ink:#0a0a0c; --accent-glow: rgba(255,255,255,0.22); } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; letter-spacing: -0.011em; } /* subtle page-top glow */ body::before { content: ""; position: fixed; inset: -20% 0 auto 0; height: 70vh; background: radial-gradient(60% 60% at 50% 0%, var(--accent-soft), transparent 70%); opacity: 0.6; pointer-events: none; z-index: 0; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; } p { margin: 0; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; color: inherit; } .mono { font-family: 'Geist Mono', ui-monospace, monospace; } /* Layout helpers */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; } .section { padding: 96px 0; position: relative; } @media (max-width: 720px){ .section { padding: 64px 0; } } /* Eyebrow / kicker */ .kicker { display: inline-flex; align-items: center; gap: 8px; font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); padding: 6px 12px; border: 1px solid var(--line); border-radius: 100px; background: var(--bg-1); white-space: nowrap; } .kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .section-head { max-width: 720px; } .section-head h2 { font-size: clamp(30px, 4.4vw, 52px); margin-top: 22px; letter-spacing: -0.03em; } .section-head p { margin-top: 18px; color: var(--text-dim); font-size: clamp(16px,1.6vw,19px); max-width: 600px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 11px; font-size: 15px; font-weight: 500; border: 1px solid transparent; transition: transform .18s var(--ease), background .2s, border-color .2s, box-shadow .25s; white-space: nowrap; } .btn:active { transform: translateY(1px) scale(0.99); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 30px -8px var(--accent-glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 14px 40px -10px var(--accent-glow); } .btn-ghost { background: var(--bg-1); color: var(--text); border-color: var(--line-2); } .btn-ghost:hover { background: var(--bg-2); border-color: rgba(255,255,255,0.24); transform: translateY(-2px); } .btn-lg { height: 54px; padding: 0 28px; font-size: 16px; } .btn .arrow { transition: transform .2s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } /* Cards */ .card { background: linear-gradient(180deg, var(--bg-1), var(--bg)); border: 1px solid var(--line); border-radius: var(--radius-lg); } /* Reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"]{ transition-delay: .07s; } .reveal[data-d="2"]{ transition-delay: .14s; } .reveal[data-d="3"]{ transition-delay: .21s; } .reveal[data-d="4"]{ transition-delay: .28s; } @media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } } /* image-slot theming */ image-slot { --is-bg: var(--bg-2); --is-border: var(--line); --is-fg: var(--text-faint); } /* selection */ ::selection { background: var(--accent); color: var(--accent-ink); } /* thin scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #222229; border-radius: 10px; border: 2px solid var(--bg); } ::-webkit-scrollbar-track { background: var(--bg); } /* divider line that fades at the ends */ .hr { height:1px; border:0; background: linear-gradient(90deg, transparent, var(--line-2), transparent); margin: 0; } /* small label */ .tag { font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: var(--text-faint); }