/* ============================================================================ EV-ON — Design Tokens (colors, type, spacing, radius, shadow, motion) ---------------------------------------------------------------------------- Brand: EV-ON (ev-on.pl) — energy transition integrator (PV, storage, EV chargers, heat pumps) for Kraków & Małopolska. Aesthetic: light-first + lots of air (Apple Store), deep anthracite for drama (Tesla Energy), one electric-green accent, premium grotesque type. FONTS: substituted from Google Fonts (Sora / Manrope / JetBrains Mono). See README "Type" — swap in licensed brand fonts when available. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ----- Font families ----- */ --font-display: 'Sora', system-ui, -apple-system, sans-serif; --font-text: 'Manrope', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* ============================ COLOR — PALETTE ============================ */ /* Neutrals — warm-cool anthracite ramp */ --white: #FFFFFF; --paper: #F6F7F8; /* subtle section background */ --paper-2: #EEF0F2; /* deeper light fill, inset wells */ --line: #E3E6E9; /* hairline borders on light */ --line-strong: #D2D7DC; --anthracite: #14171A; /* deepest dark surface */ --graphite: #1E2226; /* raised dark surface */ --graphite-2: #2A2F35; /* dark card / inset */ --slate: #565D66; /* secondary text on light */ --slate-2: #8A929B; /* tertiary / muted */ /* Accent — electric green (use sparingly, high intent) */ --volt: #00E07A; /* oklch(.81 .19 158) — primary accent */ --volt-press: #00B866; /* pressed / hover-darken */ --volt-soft: #E2FBEE; /* tint fill on light */ --volt-glow: rgba(0, 224, 122, .45); /* Support / semantic */ --info: #2E7DF6; --warn: #F5A623; --danger: #E5484D; --success: var(--volt); /* ============================ COLOR — SEMANTIC ============================ */ /* Light theme (default) */ --bg: var(--white); --bg-sub: var(--paper); --bg-inset: var(--paper-2); --surface: var(--white); --surface-raised: var(--white); --fg: var(--anthracite); /* primary text */ --fg-2: var(--slate); /* secondary text */ --fg-3: var(--slate-2); /* muted / captions */ --border: var(--line); --border-2: var(--line-strong); --accent: var(--volt); --accent-ink: #04130B; /* text on top of accent fills */ --accent-press: var(--volt-press); /* On-dark tokens (use inside .on-dark / dark sections) */ --d-bg: var(--anthracite); --d-surface: var(--graphite); --d-surface-2: var(--graphite-2); --d-fg: var(--white); --d-fg-2: #AEB4BB; --d-fg-3: #777E86; --d-border: rgba(255, 255, 255, .10); --d-border-2: rgba(255, 255, 255, .18); /* ============================ SPACING (4pt) ============================ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* section rhythm */ --section-y: clamp(64px, 9vw, 128px); --gutter: clamp(20px, 5vw, 64px); --maxw: 1200px; /* ============================ RADIUS ============================ */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px; --r-pill: 999px; /* ============================ SHADOW / ELEVATION ============================ */ /* soft, diffused, low-contrast — premium */ --sh-xs: 0 1px 2px rgba(20,23,26,.05), 0 1px 1px rgba(20,23,26,.04); --sh-sm: 0 2px 6px rgba(20,23,26,.06), 0 1px 2px rgba(20,23,26,.05); --sh-md: 0 10px 28px -8px rgba(20,23,26,.12), 0 2px 6px rgba(20,23,26,.05); --sh-lg: 0 24px 64px -16px rgba(20,23,26,.20), 0 4px 12px rgba(20,23,26,.06); --sh-volt: 0 12px 34px -10px var(--volt-glow); --ring-volt: 0 0 0 4px rgba(0,224,122,.20); /* ============================ MOTION ============================ */ --ease-out: cubic-bezier(.22, 1, .36, 1); /* primary — confident settle */ --ease-in-out: cubic-bezier(.65, 0, .35, 1); --t-fast: 120ms; --t-base: 220ms; --t-slow: 420ms; } /* ============================ DARK THEME ============================ Flip the semantic tokens. Components using --bg/--surface/--fg/--border re-theme automatically; intentionally-dark sections (hero, process, footer) keep their anthracite literals and read as subtly-raised panels. */ :root[data-theme="dark"] { --bg: #090B0C; --bg-sub: #121517; --bg-inset: #1F2327; --surface: #15191C; --surface-raised: #1C2125; --fg: #F4F5F6; --fg-2: #AEB4BB; --fg-3: #79808A; --border: rgba(255, 255, 255, .10); --border-2: rgba(255, 255, 255, .17); --volt-soft: rgba(0, 224, 122, .14); --sh-xs: 0 1px 2px rgba(0,0,0,.40); --sh-sm: 0 2px 8px rgba(0,0,0,.42); --sh-md: 0 12px 30px -10px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40); --sh-lg: 0 28px 64px -18px rgba(0,0,0,.70), 0 4px 12px rgba(0,0,0,.40); } /* ============================ TYPE — SEMANTIC ROLES ============================ Apply these classes (or copy the declarations) for consistent type. Scale is intentionally large & airy. */ .display { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 6.5vw, 84px); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; } .h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; } .h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; } .h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(21px, 1.6vw, 26px); line-height: 1.15; letter-spacing: -0.015em; } .eyebrow { font-family: var(--font-text); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-3); } .lead { font-family: var(--font-text); font-weight: 500; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; letter-spacing: -0.01em; color: var(--fg-2); } .body { font-family: var(--font-text); font-weight: 450; font-size: 16px; line-height: 1.6; letter-spacing: 0; color: var(--fg); } .small { font-family: var(--font-text); font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--fg-2); } .caption { font-family: var(--font-text); font-weight: 500; font-size: 12.5px; line-height: 1.4; letter-spacing: 0.01em; color: var(--fg-3); } .data { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* ============================ BASE RESETS (optional) ============================ */ .evon-base { font-family: var(--font-text); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }