/* Evnted site — shared styles. Loaded by every page. */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Fraunces:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'); /* Theme tokens — dark is default; .theme-light on flips them. */ :root { --bg: #0A0A0B; --bg-elev: #141416; --bg-soft: rgba(255,255,255,0.05); --fg: #ffffff; --fg-soft: rgba(255,255,255,0.68); --fg-mute: rgba(255,255,255,0.50); --hairline: rgba(255,255,255,0.10); --hairline-strong: rgba(255,255,255,0.18); --orange: #E8633A; --green: #1FB875; --yellow: #E5B100; } html.theme-light { --bg: #FBFAF7; --bg-elev: #ffffff; --bg-soft: rgba(10,10,11,0.04); --fg: #0A0A0B; --fg-soft: rgba(10,10,11,0.68); --fg-mute: rgba(10,10,11,0.50); --hairline: rgba(10,10,11,0.12); --hairline-strong: rgba(10,10,11,0.20); } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; transition: background 0.25s ease, color 0.25s ease; } * { box-sizing: border-box; } a { color: inherit; } /* ── password gate ───────────────────────────────── */ .gate { position: fixed; inset: 0; z-index: 1000; background: #0A0A0B; color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 24px; } .gate-card { width: 100%; max-width: 420px; text-align: center; } .gate-tag { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 32px; } .gate h1 { font-size: 22px; font-weight: 600; margin: 12px 0 8px; letter-spacing: -0.01em; } .gate p { font-size: 14px; color: rgba(255,255,255,0.55); margin: 0 0 24px; line-height: 1.5; } .gate input { width: 100%; height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: #fff; font-family: inherit; font-size: 15px; outline: none; transition: border-color .15s; } .gate input:focus { border-color: #E8633A; } .gate button { width: 100%; height: 52px; margin-top: 10px; border: none; border-radius: 14px; background: #E8633A; color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity .15s; } .gate button:hover { opacity: .92; } .gate-err { margin-top: 14px; font-size: 13px; color: #ff8a6b; min-height: 18px; } /* ── intro animation ─────────────────────────────── */ .intro { position: fixed; inset: 0; z-index: 1500; background: #0A0A0B; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 28px; overflow: hidden; } .intro-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 44px; letter-spacing: -0.04em; line-height: 1; color: #fff; opacity: 0; animation: introLogoIn 0.5s ease-out 0.1s both; } .intro-logo .dot-orange { width: 10px; height: 10px; border-radius: 50%; background: #E8633A; display: inline-block; margin-bottom: 4px; } .intro-dots { display: flex; gap: 22px; align-items: center; margin-top: 6px; } .intro-dot { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid currentColor; background: transparent; transition: background 0.18s ease-out, transform 0.18s ease-out; } .intro-dot.green { color: #1FB875; } .intro-dot.yellow { color: #E5B100; } .intro-dot.orange { color: #E8633A; } .intro-dot.fill { background: currentColor; transform: scale(1.08); } .intro-wipe { position: fixed; left: 50%; top: 50%; width: 28px; height: 28px; border-radius: 50%; background: #E8633A; transform: translate(-50%, -50%) scale(1); pointer-events: none; } .intro-wipe.go { animation: wipeOut 0.85s cubic-bezier(0.7, 0, 0.3, 1) forwards; } @keyframes introLogoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes wipeOut { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(120); } }