/* ============================================================ Audiopro Design Tokens ============================================================ */ *, *::before, *::after { box-sizing: border-box; } :root { /* Surface colours */ --s950: #0A1224; --s900: #0E1828; --s800: #14213A; --s700: #1F2D4A; --s600: #2A3A58; --s500: #3B4D72; /* Accent colours */ --a600: #3B5DE0; --a500: #4A6FF0; --a400: #6286FF; --a300: #8AA3FF; /* Brand — ONLY in logo, never in UI */ --brand-original: #1C3B98; /* Text colours */ --t50: #F5F8FF; --t100: #E3EAF7; --t300: #B6C3D9; --t400: #92A2BD; --t600: #5E6E8C; /* Status colours */ --success: #4FD1A3; --warning: #F4B860; --danger: #FF6B6B; /* Typography */ --font-display: "Inter Display", "Inter Tight", "Inter", system-ui, sans-serif; --font-sans: "Inter", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; /* Layout */ --maxw: 1320px; --pad: 96px; /* Výška celé sticky hlavičky (main nav 64 + kategoriová nav 48) */ --ap-header-h: 112px; /* Výška zaseknuté lišty značky (= slot v offsetu brand nav i posun pruhu) */ --ap-brand-bar-h: 64px; /* Border radius */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; /* Lines / dividers */ --line: rgba(255, 255, 255, 0.07); --line-soft: rgba(255, 255, 255, 0.04); --line-strong: rgba(255, 255, 255, 0.11); /* Motion */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --d-fast: 200ms; --d-med: 320ms; --d-slow: 480ms; } @media (max-width: 1280px) { :root { --pad: 64px; } } @media (max-width: 960px) { :root { --pad: 32px; } } @media (max-width: 640px) { /* Mobilní hlavička: main nav 56 + kategoriová nav 48 */ :root { --ap-header-h: 104px; } } /* ============================================================ Light theme — data-theme="light" on ============================================================ */ [data-theme="light"] { /* Surfaces — světlé, s modrým nádechem (Vercel/Stripe styl) */ --s950: #FFFFFF; --s900: #F8FAFF; --s800: #EEF3FC; --s700: #E4ECF8; --s600: #C8D8EE; --s500: #A8BEDD; /* Text — tmavá modrá paleta (inverzní k dark) */ --t50: #0A1526; --t100: #1C2E4A; --t300: #3A5070; --t400: #5E7898; --t600: #8EA8C4; /* Lines / dividers */ --line: rgba(0, 0, 0, 0.06); --line-soft: rgba(0, 0, 0, 0.03); --line-strong: rgba(0, 0, 0, 0.10); } /* ============================================================ Base reset & document ============================================================ */ html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--t100); background: var(--s950); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--t50); } p { margin: 0; } ul, ol { margin: 0; padding: 0; } button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; } /* ============================================================ Layout helpers ============================================================ */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } /* ============================================================ Typography scale ============================================================ */ .h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 5vw, 72px); line-height: 1.04; letter-spacing: -0.025em; color: var(--t50); } .h2 { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1.08; letter-spacing: -0.022em; color: var(--t50); } .h3 { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; color: var(--t50); } .h4 { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; color: var(--t50); } .lead { font-size: 19px; line-height: 1.55; color: var(--t300); } .tabnum { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); } /* ============================================================ Overline ============================================================ */ .overline { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t600); display: inline-flex; align-items: center; gap: 10px; } .overline::before { display: none; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--a600); color: #fff; border: 1px solid transparent; border-radius: var(--r-md); font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: background var(--d-fast) var(--ease); line-height: 1; } .btn:hover { background: var(--a500); color: #fff; } .btn.ghost { background: transparent; color: var(--t100); border-color: var(--s600); } .btn.ghost:hover { border-color: var(--s500); background: rgba(255, 255, 255, 0.02); color: var(--t50); } /* ============================================================ Chip ============================================================ */ .chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(10, 18, 36, 0.7); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--t100); } /* ============================================================ Link arrow ============================================================ */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--a400); text-decoration: none; transition: gap var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } .link-arrow:hover { gap: 12px; color: var(--a300); }