/* ============================================================ KRASIVO AI — Design System Dark is primary; light via [data-theme="light"] on . ============================================================ */ :root { /* dark (default) */ --bg: #0B0B0D; --surface: #141417; --raised: #1C1C21; --border: #2A2A30; --border-soft: rgba(255,255,255,0.06); --text: #EDEDF0; --muted: #9A9AA5; --faint: #6A6A74; --gold: #E0A526; --gold-hover: #F0B83A; --gold-soft: rgba(224,165,38,0.14); --gold-line: rgba(224,165,38,0.32); --teal: #2DD4BF; --teal-soft: rgba(45,212,191,0.14); --success: #34D399; --error: #F87171; --queue: #FBBF24; --glass: rgba(20,20,23,0.72); --glass-brd: rgba(255,255,255,0.08); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); --shadow-lg: 0 30px 80px -24px rgba(0,0,0,.7), 0 8px 24px rgba(0,0,0,.45); --shadow-gold: 0 0 0 1px var(--gold-line), 0 12px 40px -12px rgba(224,165,38,.45); --r-card: 16px; --r-btn: 11px; --r-node: 12px; --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; --maxw: 1200px; --ease: cubic-bezier(.22,.61,.36,1); } [data-theme="light"] { --bg: #FAFAF7; --surface: #FFFFFF; --raised: #FFFFFF; --border: #E7E5DF; --border-soft: rgba(20,20,30,0.06); --text: #1A1A1E; --muted: #6B6B72; --faint: #9A9AA2; --gold: #B8851A; --gold-hover: #E0A526; --gold-soft: rgba(184,133,26,0.10); --gold-line: rgba(184,133,26,0.30); --teal: #0EA5A0; --teal-soft: rgba(14,165,160,0.12); --glass: rgba(255,255,255,0.78); --glass-brd: rgba(20,20,30,0.08); --shadow-sm: 0 1px 2px rgba(20,20,30,.06); --shadow-md: 0 10px 28px -12px rgba(20,20,30,.18), 0 2px 6px rgba(20,20,30,.06); --shadow-lg: 0 36px 90px -28px rgba(20,20,30,.28), 0 10px 28px rgba(20,20,30,.12); --shadow-gold: 0 0 0 1px var(--gold-line), 0 14px 44px -14px rgba(184,133,26,.4); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: var(--gold-soft); color: var(--text); } /* freeze all transitions during a theme switch to avoid stale var-derived values */ html.theme-switching * { transition: none !important; } h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } img { display: block; max-width: 100%; } input, textarea, select { font-family: inherit; } .app-root { min-height: 100vh; position: relative; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .mono { font-family: var(--font-mono); } /* view transitions */ .view-fade { animation: viewFade .5s var(--ease) both; } @keyframes viewFade { from { transform: translateY(10px);} to { transform: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 20px; border-radius: var(--r-btn); font-weight: 600; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; transition: all .2s var(--ease); border: 1px solid transparent; } .btn svg { flex: none; } .btn-gold { background: linear-gradient(180deg, var(--gold-hover), var(--gold)); color: #1A1206; box-shadow: var(--shadow-gold); } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--gold-line), 0 18px 50px -12px rgba(224,165,38,.6); filter: saturate(1.08); } .btn-outline { border-color: var(--border); color: var(--text); background: color-mix(in oklab, var(--surface) 50%, transparent); } .btn-outline:hover { border-color: var(--gold-line); background: var(--gold-soft); transform: translateY(-2px); } .btn-ghost { color: var(--muted); padding: 10px 14px; } .btn-ghost:hover { color: var(--text); background: var(--raised); } .btn-sm { padding: 8px 14px; font-size: 13.5px; border-radius: 9px; } .btn-lg { padding: 15px 26px; font-size: 16.5px; } /* ---------- Pills / badges ---------- */ .pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid var(--border); background: var(--surface); color: var(--muted); } .pill-gold { border-color: var(--gold-line); color: var(--gold); background: var(--gold-soft); } .pill-dot::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); } .tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 500; font-family: var(--font-mono); letter-spacing: -.01em; background: var(--raised); border: 1px solid var(--border-soft); color: var(--muted); } .tag-teal { color: var(--teal); border-color: var(--teal-soft); background: var(--teal-soft); } .tag-gold { color: var(--gold); border-color: var(--gold-line); background: var(--gold-soft); } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .card-hover:hover { transform: translateY(-4px); border-color: var(--gold-line); box-shadow: var(--shadow-md); } /* section scaffolding */ .section { padding: 100px 0; position: relative; } .section-tight { padding: 72px 0; } .eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: inline-flex; align-items:center; gap:8px; } .section-title { font-size: clamp(30px, 4vw, 46px); margin-bottom: 18px; } .section-sub { color: var(--muted); font-size: 18px; max-width: 560px; line-height: 1.55; } .section-head { margin-bottom: 56px; } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } @keyframes spin { to { transform: rotate(360deg); } } /* divider line of light */ .hr-glow { height:1px; background: linear-gradient(90deg, transparent, var(--border), transparent); border:0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } .reveal { opacity:1 !important; transform:none !important; } }