/* ELEVATOR STUDIOS — design tokeny v1.0 (2026-10-14). Používaj doslova, nemeň hodnoty. */ :root { color-scheme: dark; /* — Povrchy (tma) — */ --es-shaft: #0B0C0E; /* Šachta: hlavné pozadie */ --es-panel: #1C1E22; /* Panel: karty, plochy, displej-rám */ --es-panel-raised: #2A2D33; /* Vyvýšený panel: hover, vstupy formulára */ --es-line: #3A3E45; /* Linky a rámy 1px na tme (len dekor, nie text) */ /* — Oceľ (zodpovedá sivej akustickej plsti v priestore) — */ --es-steel: #B9BEC4; /* Sekundárny text, prstence tlačidiel */ --es-steel-dark: #8E949B; /* Metadáta, iba na šachte a paneli */ --es-steel-light: #D9DDE1; /* Odlesky, šev dverí */ /* — Text — */ --es-paper: #F3F1EA; /* Hlavný text na tme; pozadie tlačovín */ --es-ink: #0B0C0E; /* Text na papieri a na farebných výplniach */ /* — LED a režimy — */ --es-led: #FF7A1F; /* LED oranžová (oranžový koberec): značka, 7-seg, ceny, hlavné CTA, aktívny stav */ --es-led-off: #3A1C0A; /* Zhasnuté segmenty displeja („duchovia“) */ --es-led-glow: rgba(255, 122, 31, 0.45); --es-loud: #FF4D5E; /* NAHLAS / REC (červené svetlo v priestore): iba 17–22, REC a chyby formulára */ --es-loud-glow: rgba(255, 77, 94, 0.40); --es-quiet: #6FD3FF; /* TICHO: iba tichý režim, slúchadlá, sínus */ --es-quiet-glow: rgba(111, 211, 255, 0.35); /* — Varianty na papier (text na #F3F1EA alebo #FFFFFF) — */ --es-led-ink: #A34400; --es-loud-ink: #B01E35; --es-quiet-ink: #0B6383; --es-steel-ink: #5B6068; /* — Sémantické aliasy — */ --text-1: var(--es-paper); --text-2: var(--es-steel); --text-3: var(--es-steel-dark); --accent: var(--es-led); --focus: var(--es-led); /* — Textúry — */ --es-steel-brushed: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, rgba(0,0,0,.06) 1px 3px), linear-gradient(180deg, #8E949B 0%, #D9DDE1 48%, #8E949B 100%); --es-checker-hi: /* šachovnica akustickej peny, akcentový pás najviac 16 px vysoký */ conic-gradient(var(--es-ink) 0 25%, var(--es-paper) 0 50%, var(--es-ink) 0 75%, var(--es-paper) 0) 0 0 / 16px 16px; --es-checker-lo: /* jemná textúra pozadia, nikdy pod textom */ conic-gradient(var(--es-panel) 0 25%, var(--es-panel-raised) 0 50%, var(--es-panel) 0 75%, var(--es-panel-raised) 0) 0 0 / 48px 48px; --es-hatch-night: /* 22:00–06:00 = ticho + cena dohodou */ repeating-linear-gradient(135deg, var(--es-quiet) 0 6px, rgba(111,211,255,.35) 6px 10px); --es-grain: url("data:image/svg+xml;utf8,"); /* — Typografia — */ --ff-display: "Big Shoulders Display", "Arial Narrow", sans-serif; --ff-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ff-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --fw-display: 900; --fw-display-alt: 700; --fw-body: 400; --fw-body-medium: 500; --fw-body-bold: 700; --fw-mono: 700; --fw-mono-regular: 400; --fs-display: clamp(3.25rem, 1.6rem + 7.2vw, 8rem); /* hero claim, plagátové titulky na webe */ --fs-h1: clamp(2.75rem, 1.7rem + 4.4vw, 5.25rem); --fs-h2: clamp(2rem, 1.35rem + 2.8vw, 3.5rem); --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --fs-body: 1.0625rem; /* 17 px */ --fs-small: 0.875rem; /* 14 px, minimum pre bežný text */ --fs-label: 0.8125rem; /* 13 px, Space Mono 700 VERZÁLKY */ --fs-price: clamp(2rem, 1.5rem + 2vw, 3rem); --fs-price-unit: calc(var(--fs-price) * 0.6); /* „€ s DPH“ = 60 % ceny */ --lh-display: 1.0; --lh-display-multi: 1.05; --lh-heading: 1.1; --lh-body: 1.55; --lh-label: 1.2; --ls-display: 0.01em; --ls-label: 0.12em; --ls-body: 0; /* — Priestor (základ 4 px) — */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --section-pad: clamp(64px, 8vw, 128px); --page-pad: 16px; --grid-max: 1200px; --grid-cols: 12; --gutter: 16px; /* — Tvary — */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --r-round: 50%; --bw: 1px; --bw-frame: 2px; --ring: 3px; /* — Komponenty — */ --btn-min: 44px; /* minimálny dotykový cieľ */ --btn-floor: 56px; /* tlačidlo poschodia (mobil) */ --btn-cta-h: 52px; --seg-h-hero: clamp(64px, 10vw, 112px); --seg-h-mini: 28px; /* — Tiene a žiara — */ --glow-led: 0 0 0 var(--ring) var(--es-led), 0 0 18px 2px var(--es-led-glow); --glow-quiet: 0 0 0 var(--ring) var(--es-quiet), 0 0 18px 2px var(--es-quiet-glow); --glow-loud: 0 0 0 var(--ring) var(--es-loud), 0 0 18px 2px var(--es-loud-glow); --shadow-panel: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45); --seg-glow: drop-shadow(0 0 6px var(--es-led-glow)); /* — Pohyb — */ --ease-door: cubic-bezier(.7, 0, .2, 1); --dur-door: 700ms; --dur-seg-step: 220ms; --dur-ui: 160ms; /* — Vrstvy — */ --z-header: 50; --z-sticky: 60; --z-modal: 100; } @media (min-width: 768px) { :root { --page-pad: 32px; --gutter: 24px; } } @media (min-width: 1024px) { :root { --btn-floor: 72px; } } @media (min-width: 1280px) { :root { --page-pad: 48px; } } @media (prefers-reduced-motion: reduce) { :root { --dur-door: 0ms; --dur-seg-step: 0ms; --dur-ui: 0ms; } } html { background: var(--es-shaft); } body { margin: 0; background: var(--es-shaft); color: var(--text-1); font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--ff-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } /* Svetlá plocha (tlač, svetlé sekcie): prepína akcenty na „ink“ varianty */ .surface-paper { background: var(--es-paper); color: var(--es-ink); --text-1: var(--es-ink); --text-2: var(--es-steel-ink); --text-3: var(--es-steel-ink); --accent: var(--es-led-ink); --focus: var(--es-ink); }