/* ========================================================================== WASTED AGENCY — dizajnový systém POZÍCIA, KTORÚ MÁ VIZUÁL NIESŤ Editorial precision. Prémiový magazínový povrch: teplý papier, výrazná typografická hierarchia, presná mriežka s viditeľným číslovaním sekcií, veľa kontrolovaného prázdna a kontrolovaná asymetria. Namiesto dekorácií PRACOVNÉ ARTEFAKTY — prišlý dopyt, dohľadaný cenník, prepočet, rozhodnutie, hotový výstup. Karta sa používa iba tam, kde zastupuje skutočný objekt alebo stav; inde oddeľuje obsah vlasová linka. FARBY papier #F3F2ED · atrament #10110E · signál #FF462D Signálová farba NEOVLÁDA stránku. Má presne štyri úlohy: 1. linka pri kickeri a číslo sekcie, 2. jedno zvýraznené slovo v hlavnom nadpise, 3. procesný kód „preberie umelá inteligencia" v ukážkach, 4. dve tlačidlá v momente záväzku (prepočet a odoslanie formulára). Všetky ostatné tlačidlá sú atramentové. Keby bola signálová farba všade, prestane niesť význam a stránka sa rozpadne na farebné škvrny. Procesný kód je konštantný na celom webe: oranžová = preberie umelá inteligencia · modrá = rozhodne človek · zelená = hotové TYPOGRAFIA Displejový rez je Bricolage Grotesque (SIL OFL), HOSTENÝ Z TEJTO DOMÉNY. Web tak stále neposiela žiadny request tretej strane a tvrdenie „bez cookies a bez analytiky" platí ďalej. Rez je orezaný na znaky, ktoré slovenčina naozaj potrebuje, a inštancovaný na jednu optickú veľkosť — 38 kB pre celú váhovú os 400–800 (viď assets/licenses/NOTES.txt). Text beží v systémovom grotesku, štruktúrne popisky v monospace. ZAOBLENIA 0–10 px podľa funkcie. Pill iba pre tlačidlo a stav. Veľké rádiusy čítame ako softvérový produkt; tento web má pôsobiť ako pracovný dokument. INTERAKTÍVNE PRVKY (sú tri) 1. .ops — AI V POZADÍ: jedna široká tmavá obrazovka v hero, na ktorej beží modelový pracovný deň. Štyri scény (tržby · náklady · prevádzka · riadenie), v každej celý tok od vstupu cez programy firmy po obchodný výsledok a jedno rozhodnutie pre človeka. Nie je to plocha pre ľudí — je to obraz toho, čo sa deje medzi programami, ktoré firma už používa. Spúšťa sa sama, po prvom dotyku sa automatika vypne. Bez JavaScriptu je prvá scéna celá a ostatné tri sa zmrštia na výsledky. 2. .areas — prepínač piatich oblastí firmy. V každej JEDEN konkrétny príklad a tri vety: čo prevezme systém → čo zostane človeku → aký výsledok vznikne. Pod 720 px je z neho akordeón s jednou otvorenou oblasťou; rozšírený zoznam je na stránke Ďalšie oblasti. Bez JavaScriptu sa zobrazia všetky. 3. .meter — prepočet nákladu jednej rutiny. Tri vstupy, päť výstupov, všetky o DNEŠKU. Žiadna návratnosť, žiadny podiel automatizácie. .hline — HANDOFF LINE. Zapamätateľný prvok webu: tenká pracovná stopa, ktorá vedie položku cez tri skutočné stavy. Nie je to dekorácia. ========================================================================== */ /* Bricolage Grotesque — premenlivá váha 400–800, orezaná na slovenčinu. Licencia: assets/licenses/OFL-BricolageGrotesque.txt `swap` je zámerný: text musí byť čitateľný aj v tej desatine sekundy, kým rez dorazí. Preload v to skracuje na minimum. */ @font-face { font-family: "Bricolage Display"; src: url("../fonts/bricolage-display.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } :root { --paper: #F3F2ED; --paper-2: #EBE9E2; --paper-3: #DCDACF; --surface: #FCFCF9; --ink: #10110E; --ink-2: #4B4F48; /* ink-3 nesie drobný mono text. Overené: 5,31:1 na papieri, 4,85:1 na paper-2 — všade AA. Svetlejšie hodnoty na paper-2 padajú. */ --ink-3: #62655A; --line: rgba(16,17,14,.16); --line-2: rgba(16,17,14,.09); /* Vlasová linka je oddeľovač, nie ovládací prvok — má 1,41:1 a to stačí. Hranica, ktorá NESIE význam (okraj poľa, prepínača, ghost tlačidla), musí mať podľa WCAG 1.4.11 aspoň 3:1. Merané: 3,35:1 na papieri. */ --line-strong:#82857B; --accent: #FF462D; /* Plocha tlačidla je hlbšia než značková oranžová. Dôvod je meraný: biely text na #FF462D má 3,41:1, čo je pod AA. #D6331A dáva 4,83:1 a na papieri je od značkovej oranžovej prakticky nerozoznateľné. */ --accent-btn:#D6331A; /* Drobný akcentový text (kickery, rozhodnutia pri bránach) sedí aj na tmavšom papieri sekcií --paper-2. Merané: 5,23:1 na --paper a 4,77:1 na --paper-2. Svetlejší #C92F18 mal na --paper-2 len 4,38:1 a padal. */ --accent-ink:#C02A14; --accent-2: #FBE4DF; --human: #344FC7; --human-ink: #2A3F9E; --human-2: #E6E9FA; --done: #187052; --done-2: #E0EFE8; --dark: #10110E; --dark-surface:#191B17; --dark-text: #F2F1EA; --d-line: rgba(242,241,234,.16); --d-line-2: rgba(242,241,234,.08); --d-text-2: #A6AA9B; --d-accent: #FF6244; --d-done: #5CCEA1; --d-human: #93A5F7; --maxw: 1280px; --gutter: clamp(20px, 5vw, 60px); /* Zaoblenia sú zámerne malé — 2 až 10 px podľa funkcie. */ --r-lg: 10px; --r-md: 6px; --r-sm: 3px; --r-pill: 999px; --sh-sm: 0 1px 2px rgba(16,17,14,.05); --sh-md: 0 2px 4px rgba(16,17,14,.04), 0 20px 44px -30px rgba(16,17,14,.4); --sh-lg: 0 4px 8px rgba(16,17,14,.04), 0 48px 90px -46px rgba(16,17,14,.48); --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Displejový rez. Systémový grotesk zostáva ako záloha na tú chvíľu, kým dorazí woff2 — a ako poistka, keby sa súbor nenačítal vôbec. */ --display: "Bricolage Display", var(--sans); --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; --ease: cubic-bezier(.2,.7,.2,1); } *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.menu-open{ overflow:hidden; } img,svg{ max-width:100%; display:block; } h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset{ margin:0; } ul,ol{ padding:0; list-style:none; } fieldset{ border:0; padding:0; min-width:0; } a{ color:inherit; } button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; } :target{ scroll-margin-top:96px; } /* ---------- Typografia ---------- Displejové veľkosti idú vyššie než v bežnej šablóne a tracking je výrazne záporný. Bricolage Grotesque to unesie: má vysokú strednú výšku a úzke medzery, takže veľký nadpis zostáva kompaktný aj v slovenčine. */ h1,h2,.h-lg{ font-family:var(--display); font-weight:800; letter-spacing:-.038em; line-height:1.02; text-wrap:balance; } /* Strop h1 je 3,6 rem zámerne. Väčší rez vyzeral na 1440 pôsobivo, ale nadpis sa lámal na šesť riadkov a hlavnú CTA vytlačil pod okraj prvej obrazovky — na platenú návštevnosť je to horšie než menší nadpis. Hierarchia proti h2 (2,85 rem) zostáva zreteľná. */ h1{ font-size:clamp(2.35rem,4.7vw,3.6rem); letter-spacing:-.042em; } h2{ font-size:clamp(1.9rem,3.6vw,2.85rem); letter-spacing:-.036em; line-height:1.04; } h3{ font-family:var(--display); font-size:clamp(1.1rem,1.7vw,1.35rem); font-weight:720; letter-spacing:-.02em; line-height:1.25; } h3,.qual__h,.rule__h,.sec__h{ text-wrap:balance; } p,li,dd,figcaption,summary{ text-wrap:pretty; } /* Kicker — mono štítok s krátkou linkou. Nesie orientáciu, nie obsah. */ .kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; display:inline-flex; align-items:center; gap:.9em; } .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); display:inline-block; flex:none; } .lead{ font-size:clamp(16.5px,1.9vw,20px); line-height:1.55; color:var(--ink-2); max-width:56ch; } strong,b{ font-weight:700; } .accent{ color:var(--accent-ink); } em{ font-style:italic; } /* ---------- Layout ---------- */ .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .container--narrow{ max-width:880px; } .section{ padding-block:clamp(68px,9vw,148px); position:relative; } .section--tight{ padding-block:clamp(56px,7vw,104px); } .section--alt{ background:var(--paper-2); } /* ---------- Hlavička sekcie: dva varianty ---------- .shead je editoriálna signatúra HLAVNEJ stránky: v úzkej ľavej koľajnici stojí číslo sekcie a kicker, vpravo nadpis a sprievodný text v dvoch stĺpcoch. Vďaka tomu má každá sekcia rovnaké ukotvenie a stránka sa číta ako publikácia, nie ako zoznam blokov. .section__head je jednoduchšia hlavička PODSTRÁNOK. Tie nie sú číslovanou publikáciou, ale dokumentmi — číslo v koľajnici by tam nemalo čo číslovať. */ .section__head{ max-width:64ch; margin-bottom:clamp(30px,4.4vw,58px); } .section__head--wide{ max-width:76ch; } .section__head h2{ margin-top:18px; } .section__head .lead{ margin-top:20px; } /* Hlavička podstránky v dvoch stĺpcoch: nadpis vľavo, sprievodný text vpravo. Drží veľký nadpis krátky a text čitateľný. */ .section__head--split{ max-width:none; display:grid; gap:clamp(16px,3vw,48px); grid-template-columns:1fr; align-items:end; } @media (min-width:900px){ .section__head--split{ grid-template-columns:1.15fr .85fr; } } .section__head--split .lead{ margin-top:0; } .section__head--split h2{ margin-top:0; } .shead{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:clamp(34px,5vw,68px); } /* V koľajnici je LEN číslo sekcie. Kicker tu pôvodne bol tiež a lámal sa na tri riadky („KEDY TO / MÁ / ZMYSEL"); patrí nad nadpis, kde má šírku. */ .shead__rail{ display:flex; align-items:baseline; } .shead__n{ font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--accent-ink); padding-bottom:4px; border-bottom:2px solid var(--accent); } .shead__main{ display:grid; gap:20px; min-width:0; } .shead__title{ display:grid; gap:16px; min-width:0; } @media (min-width:900px){ .shead{ grid-template-columns:60px minmax(0,1fr); column-gap:clamp(20px,2.6vw,40px); gap:20px; } .shead__rail{ padding-top:11px; } } @media (min-width:1120px){ .shead__main{ grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr); column-gap:clamp(28px,4vw,64px); align-items:end; } .shead--stack .shead__main{ grid-template-columns:minmax(0,1fr); } } /* ---------- Reveal ---------- */ .js [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease); } .js [data-reveal].is-in{ opacity:1; transform:none; } /* Núdzové odkrytie sa NESPOLIEHA na dobehnutie prechodu — inak stačí, aby ho prehliadač nespustil, a stránka zostane priehľadná. Trieda ho vypne úplne. */ .js.reveal-off [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; } [data-reveal][data-delay="1"]{ transition-delay:.06s; } [data-reveal][data-delay="2"]{ transition-delay:.12s; } [data-reveal][data-delay="3"]{ transition-delay:.18s; } [data-reveal][data-delay="4"]{ transition-delay:.24s; } @media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ---------- Tlačidlá ---------- Hlavné tlačidlo je ATRAMENTOVÉ. Signálová červená je vyhradená pre dva momenty záväzku: výsledok prepočtu a odoslanie formulára. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:54px; padding:15px 28px; border-radius:var(--r-pill); font-weight:650; font-size:16px; letter-spacing:-.014em; text-decoration:none; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s, border-color .18s; border:1px solid transparent; cursor:pointer; text-align:center; } .btn--primary{ background:var(--ink); color:#F8F7F2; box-shadow:var(--sh-sm); } .btn--primary:hover{ background:#25281F; transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(16,17,14,.6); } .btn--accent{ background:var(--accent-btn); color:#fff; } .btn--accent:hover{ background:#BE2C13; transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(214,51,26,.5); } .btn--outline{ background:transparent; border-color:var(--line-strong); color:var(--ink); } .btn--outline:hover{ border-color:var(--ink); background:rgba(16,17,14,.04); transform:translateY(-2px); } .btn--ghost{ background:transparent; border-color:var(--d-line); color:var(--dark-text); } .btn--ghost:hover{ border-color:var(--dark-text); transform:translateY(-2px); } .btn--sm{ min-height:44px; padding:10px 18px; font-size:15px; } .btn--xs{ min-height:44px; padding:9px 16px; font-size:13.5px; font-weight:640; } .btn--lg{ min-height:60px; padding:17px 32px; font-size:17px; } .btn--full{ width:100%; } .btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; } .btn__arrow{ transition:transform .18s var(--ease); flex:none; } .btn:hover .btn__arrow{ transform:translateX(3px); } @media (prefers-reduced-motion:reduce){ .btn,.btn__arrow{ transition:none; } .btn:hover{ transform:none; } } .textlink{ font-weight:640; text-decoration:none; border-bottom:2px solid var(--line); padding-bottom:1px; transition:border-color .15s; } .textlink:hover{ border-color:var(--accent); } :focus-visible{ outline:3px solid var(--human); outline-offset:3px; border-radius:4px; } .section--ink :focus-visible,.site-footer :focus-visible,.meter :focus-visible{ outline-color:var(--d-accent); } /* ---------- Pomocné ---------- */ .visually-hidden{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .is-hidden{ display:none!important; } [hidden]{ display:none!important; } /* Sprite ikon. Atribút `hidden` na inline hlási W3C validátor ako chybu (nie je to SVG atribút), takže skrytie musí urobiť CSS. `display:none` sa tu zámerne NEPOUŽÍVA — niektoré prehliadače potom neprekreslia . */ .sprite{ position:absolute; width:0; height:0; overflow:hidden; } .hp{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden; } .skip-link{ position:absolute; left:16px; top:-64px; z-index:300; background:var(--ink); color:#fff; padding:12px 18px; border-radius:var(--r-sm); font-weight:700; transition:top .15s; } .skip-link:focus{ top:12px; } /* Drobný text pod hlavnou CTA. Vždy hovorí, čo sa po kliknutí naozaj stane — to je pri nezáväznom kroku jediná vec, ktorá znižuje trenie. */ .cta-note{ margin-top:16px; font-size:13px; line-height:1.6; color:var(--ink-3); max-width:52ch; } .mt-1{ margin-top:18px; } .mt-2{ margin-top:22px; } .mt-3{ margin-top:28px; } .note-sm{ font-size:15px; color:var(--ink-2); } /* ========================================================================== ZNAČKA — jeden komponent, jedna geometria, všade rovnako ========================================================================== */ .wmark{ display:inline-flex; align-items:baseline; gap:0; font-size:1.34rem; line-height:1; color:var(--ink); } /* Znak má v poli 100 jednotiek, ale jeho KRÍDLA končia na y = 82,25 — zvyšok je hviezdny hrot. Na účtiaru preto sadá spodok krídel, nie spodok tvaru. výška = (cap 0,714em × 1,02) ÷ 0,8225 = 0,886em Kerning W|A musí byť ZÁPORNÝ, inak sa značka číta ako „W ASTED". Odvodenie je v assets/licenses/NOTES.txt. Meniť obe hodnoty spolu. */ .wmark__glyph{ height:.886em; width:auto; flex:none; align-self:baseline; position:relative; top:.175em; margin-right:-.134em; } .wmark__text{ font-family:var(--display); font-weight:800; letter-spacing:-.03em; font-size:1em; } .wmark--lg{ font-size:1.8rem; } /* ---------- Hlavička ---------- */ /* Pozadie sa deklaruje DVAKRÁT zámerne. `color-mix()` vie až Safari 16.2+, ale `backdrop-filter` vie Safari 9 — na iOS 15 by teda @supports nezabralo, color-mix by sa zahodilo a lepkavá hlavička by ostala PRIEHĽADNÁ. */ .site-header{ position:sticky; top:0; z-index:100; background:#F3F2EDDB; background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line-2); } @supports not (backdrop-filter: blur(1px)){ .site-header{ background:var(--paper); } } .site-header__in{ display:flex; align-items:center; gap:18px; min-height:72px; } .brand{ margin-right:auto; text-decoration:none; display:inline-flex; align-items:center; min-height:44px; padding-block:6px; } .nav{ display:flex; align-items:center; gap:2px; } /* Terč má 44 px aj v hlavičke. Bez min-height mala položka 38 px — hlavička je vysoká 72 px, takže to nič neposúva. */ .nav a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-weight:560; font-size:14.5px; color:var(--ink-2); padding:8px 12px; border-radius:var(--r-pill); transition:color .15s, background .15s; white-space:nowrap; } .nav a:hover{ color:var(--ink); background:var(--paper-2); } .nav-toggle{ display:none; } .mobile-menu{ display:none; } @media (max-width:1220px){ .nav a{ font-size:14px; padding:8px 9px; } .header-cta{ font-size:14px; padding:10px 15px; } } @media (max-width:1060px){ .nav,.header-cta{ display:none; } /* Podstránky mobilné menu nemajú — ich hlavička by po skrytí .header-cta zostala iba s logom a návštevník by nemal ako pokračovať. */ .header-cta--sub{ display:inline-flex; } .nav-toggle{ display:inline-flex; align-items:center; gap:.6em; margin-left:auto; min-height:44px; padding:10px 16px; font-weight:670; border:1px solid var(--line-strong); border-radius:var(--r-pill); } .nav-toggle__bars{ display:inline-flex; flex-direction:column; gap:4px; width:16px; } .nav-toggle__bars i{ display:block; height:2px; background:currentColor; border-radius:2px; } .mobile-menu{ position:fixed; inset:0; z-index:200; background:var(--paper); display:flex; flex-direction:column; padding-block:var(--gutter); transform:translateY(-100%); transition:transform .3s var(--ease); overflow-y:auto; } .mobile-menu.is-open{ transform:translateY(0); } .mobile-menu__top{ display:flex; align-items:center; min-height:60px; } .mobile-menu__close{ margin-left:auto; min-height:44px; padding:10px 16px; border:1px solid var(--line-strong); border-radius:var(--r-pill); font-weight:670; } .mobile-menu__links{ display:flex; flex-direction:column; margin-top:16px; } .mobile-menu__links a{ text-decoration:none; font-family:var(--display); font-size:1.22rem; font-weight:740; letter-spacing:-.03em; padding:12px 0; border-bottom:1px solid var(--line-2); } .mobile-menu__cta{ margin-top:26px; } } @media (max-width:430px){ .header-cta--sub{ font-size:13.5px; padding:9px 13px; } } @media (prefers-reduced-motion:reduce){ .mobile-menu,.skip-link{ transition:none; } } /* ========================================================================== HERO Nadpis a výzva hore v dvoch stĺpcoch, pod nimi OBRAZOVKA .ops cez celú šírku. Ukážka musí mať šírku: tok medzi programami firmy sa v úzkom stĺpci nedá ukázať a bez neho vyzerá umelá inteligencia ako ďalší program, do ktorého treba chodiť. ========================================================================== */ /* Odsadenie hore je na mobile zámerne malé: hlavná CTA musí byť viditeľná bez scrollovania a každý pixel nad nadpisom ju tlačí pod okraj. */ .hero{ padding-top:clamp(24px,3.4vw,48px); padding-bottom:clamp(54px,7vw,96px); } /* Nadpis ide cez CELÚ šírku, nie do stĺpca vedľa výzvy. V úzkom stĺpci sa lámal na štyri riadky a spolu s výzvou vytlačil pracovnú plochu úplne pod okraj prvej obrazovky; cez celú šírku má tri riadky a plocha stúpne o zhruba 80 px vyššie. Strop rezu je 3,35 rem, nie 3,6 — nadpis je o vetu dlhší než predošlý. Hierarchia proti h2 (2,85 rem) drží ďalej. */ .hero h1{ margin-top:20px; font-size:clamp(2.2rem,4.4vw,3.35rem); } @media (min-width:1120px){ .hero h1{ max-width:27ch; } } /* Výzva pod nadpisom: vľavo čoho sa to týka, vpravo čo má návštevník spraviť. Obe polovice začínajú na tej istej účtiare. */ .hero__act{ display:grid; grid-template-columns:1fr; gap:clamp(20px,2.6vw,44px); align-items:start; margin-top:clamp(22px,2.6vw,34px); } .hero__act > *{ min-width:0; } @media (min-width:900px){ .hero__act{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } /* Pravá polovica dostane viac miesta až od 1120 px — pod tou šírkou sa obe tlačidlá aj tak nezmestia vedľa seba a zalomia sa pod seba. Nad ňou už musia byť v jednom riadku: zalomená dvojica CTA vyzerá ako chyba. */ @media (min-width:1120px){ .hero__act{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); } } .hero__sub{ max-width:46ch; } .hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .hero__actions .btn{ flex:1 1 100%; } @media (min-width:560px){ .hero__actions .btn{ flex:0 1 auto; } } .hero__go .cta-note{ max-width:56ch; } .hero__stage{ margin-top:clamp(28px,3.4vw,46px); } /* MOBIL JE INÁ KOMPOZÍCIA, NIE ZMENŠENÝ DESKTOP. Odmerané v staršej verzii na 375 × 812: ukážka začínala na 783 px, teda 29 px POD okrajom prvej obrazovky. Návštevník z reklamy videl nadpis, dva odseky, dve tlačidlá a štvorriadkovú poznámku — a ani kúsok toho, čo celý web vysvetľuje. Poradie sa preto na mobile mení: sľub → DÔKAZ → výzva. Obrazovka ide hneď za podnadpis, výzva a jej poznámka až za ňu. Poznámku pod CTA netreba čítať skôr než ukážku — potrebná je až pri rozhodovaní. Prerovnanie robí `display:contents` na obaľovacích divoch: sú to čisté layoutové kontajnery bez vlastnej sémantiky, takže sa z prístupnostného stromu nestráca nič. Desktop zostáva nedotknutý. */ @media (max-width:719px){ .hero{ padding-top:16px; } .hero .container{ display:flex; flex-direction:column; } .hero__top,.hero__act,.hero__say,.hero__go{ display:contents; } .hero .kicker{ order:1; } .hero h1{ order:2; margin-top:12px; } .hero__sub{ order:3; margin-top:16px; } .hero__stage{ order:4; margin-top:22px; } .hero__actions{ order:5; margin-top:26px; } .hero__go .cta-note{ order:6; } .trustline{ order:7; } } /* Pás istôt pod celou mriežkou hero. Predtým to boli tri vety oddelené červenými bodkami — natesno vedľa seba pôsobili ako omylom označený text, nie ako zámer. Teraz je to tabuľkový pás: tri rovnaké stĺpce oddelené vlasovou linkou a očíslované mono číslom, rovnako ako sekcie stránky. Červená sa v ňom nepoužíva vôbec: nesie ju číslo sekcie a CTA. */ .trustline{ margin-top:clamp(30px,3.6vw,54px); display:grid; grid-template-columns:1fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } @media (min-width:760px){ .trustline{ grid-template-columns:repeat(3,1fr); } } .trustline li{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:12px; padding:14px 0; font-size:14.5px; font-weight:600; color:var(--ink-2); line-height:1.4; border-top:1px solid var(--line-2); } .trustline li:first-child{ border-top:0; } @media (min-width:760px){ .trustline li{ border-top:0; border-left:1px solid var(--line-2); padding:16px clamp(14px,2vw,28px); } .trustline li:first-child{ border-left:0; padding-left:0; } } .trustline__n{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--ink-3); } /* ========================================================================== .ops — AI V POZADÍ (hero) NIE je to pracovná plocha pre ľudí, nie dashboard, nie okno programu. Je to jedna široká tmavá obrazovka — firemná telka, na ktorej návštevník sleduje modelový pracovný deň. Tmavý atrament proti svetlému papieru webu hovorí bez slov: toto beží v pozadí, toto nie je ďalší program, ktorý musí niekto otvárať. Skladba: .ops__bar horný broadcast pás — AI V POZADÍ · MODELOVÁ UKÁŽKA · stav · štyri scény modelového dňa · play/pause .scene jedna scéna = jeden obchodný výsledok, tri zóny vedľa seba: .zone--in konkrétny vstup (čo prišlo) .zone--run tok medzi programami (.chain) a vykonané kroky (.acts) — jediné technické miesto .zone--out výsledok (.ores), výnimka pre človeka (.hand) a obchodná pointa (.point) .ops__foot priebežný súhrn modelového dňa + deľba práce HIERARCHIA JE ZÁMERNÁ: názov scény a pointa sú v displejovom reze, výsledky nesú veľké číslo, technické kroky sú najmenšie. Návštevník má pochopiť rozsah aj bez toho, aby prečítal jediný krok. Animuje sa TOK, nikdy nie vypisovanie textu po písmenách: rozsvieti sa zdroj, medzi zdrojmi prejde signál, kroky prechádzajú stavmi, výsledky pribúdajú, pri výnimke sa tok zastaví a odovzdá človeku jedno rozhodnutie. Geometria je zamknutá — rovnaký počet zdrojov (6), krokov (7) aj výsledkov (4) v každej scéne a slot s pevnou minimálnou výškou. Farebný kód zostáva rovnaký ako na celom webe: červená = práve pracuje · modrá = zásah človeka · zelená = hotové. MOBIL JE SAMOSTATNÁ KOMPOZÍCIA, nie zmenšený desktop: tri vrstvy pod sebou (čo prišlo → čo systém vykonal → čo vzniklo) a zo zoznamu krokov zostane iba ten, na ktorom sa práve pracuje. Bez JavaScriptu: prvá scéna je celá a statická, ostatné tri sa zmrštia na názov, výsledky a pointu. Prepínač scén ani play/pause sa nezobrazia — nikde nevisí prvok, ktorý po kliknutí nič neurobí. ========================================================================== */ /* Uvedenie nad obrazovkou. Musí povedať dve veci skôr, než sa návštevník pozrie na prvý riadok: že to beží bez otázky a že to nie je ďalší program pre ľudí. */ .ops__say{ display:grid; gap:9px; margin-bottom:clamp(15px,1.9vw,22px); } .ops__say-h{ font-family:var(--display); font-weight:780; letter-spacing:-.03em; font-size:clamp(1.24rem,2.5vw,1.78rem); line-height:1.16; max-width:36ch; text-wrap:balance; } .ops__say-p{ font-size:clamp(14px,1.5vw,15.5px); line-height:1.6; color:var(--ink-2); max-width:62ch; } /* Samotná obrazovka. Veľmi jemný raster drží dojem živého obrazu; pri .028 alfy je na papieri neviditeľný a na tmavom podklade len tuší. */ .ops{ position:relative; color:var(--dark-text); background-color:var(--dark); background-image:repeating-linear-gradient(to bottom, rgba(242,241,234,.028) 0 1px, rgba(242,241,234,0) 1px 4px); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); } /* ---------- Horný broadcast pás ---------- */ .ops__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:7px clamp(10px,1.6vw,18px); padding:9px clamp(11px,1.6vw,18px); background:var(--dark-surface); border-bottom:1px solid var(--d-line); } .ops__brand{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--dark-text); white-space:nowrap; } /* Štítok modelovosti stojí v pásme, nie v poznámke pod obrazovkou. Kým je obrazovka na obrazovke, musí byť vidieť, že čísla sú ilustračné. */ .ops__tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--d-text-2); white-space:nowrap; border:1px solid var(--d-line); border-radius:var(--r-pill); padding:4px 9px; } /* Štyri scény modelového dňa. Bez skriptu nemajú čo prepínať — vtedy sú scény aj tak pod sebou. */ .ops__scenes{ display:none; } .js .ops__scenes{ display:block; min-width:0; } .segs{ display:flex; flex-wrap:wrap; gap:2px; } .seg{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:6px 12px; border-radius:var(--r-pill); border:1px solid transparent; color:var(--d-text-2); transition:background .16s, border-color .16s, color .16s; } .seg:hover{ background:rgba(242,241,234,.07); color:var(--dark-text); } .seg__n{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.1em; flex:none; } .seg__t{ font-size:13px; font-weight:620; line-height:1.2; white-space:nowrap; } /* Stav scény je bodka; slovom ho hlási aria-label, ktorý dopĺňa flow.js — farba nesmie byť jediným nosičom informácie. */ .seg__s{ width:6px; height:6px; border-radius:50%; flex:none; background:rgba(242,241,234,.22); transition:background .2s; } .seg[aria-pressed="true"]{ background:rgba(242,241,234,.1); border-color:var(--d-line); color:var(--dark-text); } .seg[aria-pressed="true"] .seg__n{ color:var(--d-accent); } .seg[aria-pressed="true"] .seg__s{ background:var(--d-accent); } .seg[data-done="1"] .seg__s{ background:var(--d-done); } .seg:focus-visible{ outline-offset:-2px; } @media (prefers-reduced-motion:reduce){ .seg,.seg__s{ transition:none; } } /* Stav prevádzky. Bodka pulzuje iba vtedy, keď sa naozaj pracuje — pri čakaní na človeka zmodrie a zastaví sa, po dokončení zozelenie. */ .ops__state{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--d-accent); white-space:nowrap; } .ops__dot{ width:7px; height:7px; border-radius:50%; background:var(--d-accent); flex:none; } .js .ops[data-state="run"] .ops__dot{ animation:opspulse 1.6s var(--ease) infinite; } @keyframes opspulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.45; transform:scale(.72) } } .ops[data-state="gate"] .ops__dot{ background:var(--d-human); } .ops[data-state="gate"] .ops__state{ color:var(--d-human); } .ops[data-state="done"] .ops__dot{ background:var(--d-done); } .ops[data-state="done"] .ops__state{ color:var(--d-done); } @media (prefers-reduced-motion:reduce){ .js .ops[data-state="run"] .ops__dot{ animation:none; } } /* Play/pause. Je viditeľné stále, nie až po zastavení: návštevník musí vopred vedieť, že si ukážku môže zastaviť. */ .ops__play{ display:none; min-height:44px; padding:8px 14px; border-radius:var(--r-pill); border:1px solid var(--d-line); font-size:12.5px; font-weight:640; color:var(--dark-text); align-items:center; gap:8px; white-space:nowrap; transition:border-color .16s, background .16s; } .js .ops__play{ display:inline-flex; } .ops__play:hover{ border-color:var(--dark-text); background:rgba(242,241,234,.07); } .ops__play::before{ content:""; flex:none; width:9px; height:9px; background:var(--d-accent); border-radius:1px; } .ops[data-auto="off"] .ops__play::before{ width:0; height:0; background:none; border-radius:0; border-left:8px solid var(--d-accent); border-block:5px solid transparent; } /* ---------- Telo: jedna scéna, tri zóny ---------- */ .ops__body{ padding:clamp(15px,2vw,24px) clamp(13px,1.8vw,22px); } .js .scene{ animation:opsin .32s var(--ease) both; } @media (prefers-reduced-motion:reduce){ .js .scene{ animation:none; } } @keyframes opsin{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } } .scene{ display:grid; gap:clamp(14px,1.8vw,20px); } .scene > *{ min-width:0; } .scene__h{ display:grid; gap:7px; } .scene__k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--d-text-2); } .scene__n{ color:var(--d-accent); } /* Názov je najväčšia vec na obrazovke a hovorí o OBCHODNOM výsledku, nie o technike. Pevná minimálna výška drží geometriu pri striedaní scén. */ .scene__t{ font-family:var(--display); font-weight:800; letter-spacing:-.035em; font-size:clamp(1.34rem,2.9vw,2.1rem); line-height:1.06; color:var(--dark-text); text-wrap:balance; } .scene__ar{ color:var(--d-accent); } .scene__g{ display:grid; grid-template-columns:1fr; gap:16px; } .scene__g > *{ min-width:0; } @media (min-width:1040px){ .scene__g{ --ogap:clamp(24px,3vw,44px); grid-template-columns:minmax(0,.88fr) minmax(0,1.16fr) minmax(0,1.06fr); column-gap:var(--ogap); align-items:stretch; } } .zone{ display:grid; align-content:start; gap:11px; } /* Zóny oddeľuje vlasová linka, nie karta v karte. Na širokej obrazovke stojí linka v POLOVICI medzery — na hrane stĺpca by sa jej mono výstupy krokov dotýkali a vyzerali by odseknuté. */ .zone + .zone{ border-top:1px solid var(--d-line-2); padding-top:15px; } @media (min-width:1040px){ .zone + .zone{ border-top:0; border-left:1px solid var(--d-line-2); padding-top:0; padding-left:calc(var(--ogap) / 2); margin-left:calc(var(--ogap) / -2); } } .zone__k{ display:flex; align-items:baseline; gap:9px; padding-bottom:9px; border-bottom:1px solid var(--d-line-2); font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--d-text-2); } .zone--run .zone__k{ color:var(--d-accent); } .zone--out .zone__k{ color:var(--d-done); } .zone__p{ font-size:12.5px; line-height:1.55; color:var(--d-text-2); } @media (min-width:1040px){ .zone--in{ grid-template-rows:auto auto 1fr; } .zone--in .zone__p{ align-self:end; padding-top:12px; border-top:1px solid var(--d-line-2); } } /* ---------- (1) Čo prišlo ---------- */ .inp{ display:grid; gap:7px; align-content:start; min-height:84px; background:rgba(242,241,234,.05); border:1px solid var(--d-line-2); border-left:3px solid var(--d-accent); border-radius:0 var(--r-md) var(--r-md) 0; padding:11px 13px; } .inp__k{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--d-accent); font-weight:700; } .inp__t{ font-size:13.5px; line-height:1.45; color:var(--dark-text); } .inp__m{ font-family:var(--mono); font-size:11.5px; letter-spacing:-.01em; color:var(--d-text-2); } /* ---------- (2) Medzi ktorými programami to beží ---------- Reťaz zdrojov je jediné miesto, kde obrazovka hovorí technicky — a aj to iba názvami programov, ktoré firma pozná. Signál medzi uzlami je vlasová linka, ktorá sa pri aktívnom uzle rozsvieti. */ .chain{ display:flex; flex-wrap:wrap; gap:6px 0; align-items:center; } .chain__i{ position:relative; margin-left:15px; font-family:var(--mono); font-size:10.5px; letter-spacing:-.01em; line-height:1.2; padding:5px 9px; border:1px solid var(--d-line-2); border-radius:var(--r-pill); color:var(--d-text-2); background:rgba(242,241,234,.03); transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .chain__i:first-child{ margin-left:0; } .chain__i:not(:first-child)::before{ content:""; position:absolute; left:-14px; top:50%; width:12px; height:1px; background:var(--d-line); transform-origin:left; } .chain__i.is-on{ color:var(--dark-text); border-color:rgba(255,98,68,.55); background:rgba(255,98,68,.14); } .chain__i.is-on:not(:first-child)::before{ background:var(--d-accent); animation:opssig .45s var(--ease) both; } @keyframes opssig{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } } .chain__i.is-done{ color:var(--d-text-2); border-color:var(--d-line); background:rgba(242,241,234,.06); } .chain__i.is-done:not(:first-child)::before{ background:rgba(242,241,234,.34); } html:not(.js) .chain__i{ color:var(--d-text-2); border-color:var(--d-line); background:rgba(242,241,234,.06); } @media (prefers-reduced-motion:reduce){ .chain__i{ transition:none; } .chain__i.is-on:not(:first-child)::before{ animation:none; } } /* ---------- (2) Čo systém vykonal ---------- */ .acts{ display:grid; } .act{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:3px 12px; padding:6.5px 0 6.5px 26px; border-top:1px solid var(--d-line-2); } .acts > .act:first-child{ border-top:0; } .act:last-child{ border-bottom:1px solid var(--d-line-2); } /* Uzol kroku. Prázdny krúžok → červený, keď beží → svetlý, keď je hotový. */ .act::before{ content:""; position:absolute; left:4px; top:11px; width:9px; height:9px; border-radius:50%; border:1.5px solid rgba(242,241,234,.26); background:transparent; transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .act__t{ font-size:13px; line-height:1.4; color:var(--d-text-2); min-width:0; transition:color .2s; } /* Výstup kroku je výsledok práce, nie popisok — do dokončenia je neviditeľný, ale miesto si drží od začiatku, takže nič neposkočí. */ .act__o{ font-family:var(--mono); font-size:10.5px; letter-spacing:-.01em; color:var(--d-text-2); white-space:nowrap; opacity:0; transform:translateX(5px); transition:opacity .28s var(--ease), transform .28s var(--ease), color .2s; } .act.is-run::before{ background:var(--d-accent); border-color:var(--d-accent); transform:scale(1.22); } .act.is-run .act__t{ color:var(--dark-text); font-weight:640; } .act.is-run .act__o{ color:var(--d-accent); } .act.is-done::before{ background:rgba(242,241,234,.5); border-color:rgba(242,241,234,.5); } .act.is-done .act__o,.act.is-run .act__o{ opacity:1; transform:none; } /* Tenká stopa pod aktívnym krokom — jediná „bežiaca" vec v celom rozhraní. */ .act.is-run::after{ content:""; position:absolute; left:26px; right:0; bottom:0; height:1.5px; background:var(--d-accent); transform-origin:left; animation:opsrun .6s linear forwards; } @keyframes opsrun{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } } html:not(.js) .act::before{ background:rgba(242,241,234,.5); border-color:rgba(242,241,234,.5); } html:not(.js) .act__o{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .act::before,.act__t,.act__o{ transition:none; } .act.is-run::after{ animation:none; } } /* Postup krokov. Šírku pruhu riadi data-step na .ops — inline style by na produkcii padol na CSP (style-src 'self' bez 'unsafe-inline'). */ .prog{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; padding-top:12px; } .prog__b{ width:56px; height:3px; border-radius:2px; background:rgba(242,241,234,.18); overflow:hidden; flex:none; } .prog__b i{ display:block; height:100%; width:0; background:var(--d-accent); border-radius:2px; transition:width .5s var(--ease); } .prog__t{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--d-text-2); } .ops[data-step="1"] .prog__b i{ width:14%; } .ops[data-step="2"] .prog__b i{ width:29%; } .ops[data-step="3"] .prog__b i{ width:43%; } .ops[data-step="4"] .prog__b i{ width:57%; } .ops[data-step="5"] .prog__b i{ width:71%; } .ops[data-step="6"] .prog__b i{ width:86%; } .ops[data-step="7"] .prog__b i{ width:100%; } .ops[data-state="gate"] .prog__b i,.ops[data-state="done"] .prog__b i{ width:100%; background:var(--d-done); } html:not(.js) .prog__b i{ width:100%; background:rgba(242,241,234,.5); } @media (prefers-reduced-motion:reduce){ .prog__b i{ transition:none; } } @media (min-width:1040px){ .zone--run{ grid-template-rows:auto auto auto 1fr; } .zone--run .prog{ align-self:end; } } /* ---------- (3) Čo z toho vzniklo ---------- Výsledok je väčší než ktorýkoľvek technický krok. Veľké číslo nesie rozsah, text hovorí, čoho sa týka. */ .ores{ display:grid; gap:9px; } .ores__i{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:baseline; font-size:13px; line-height:1.35; color:var(--d-text-2); opacity:0; transform:translateY(3px); transition:opacity .4s var(--ease), transform .4s var(--ease); } .ores__i.is-in{ opacity:1; transform:none; } .ores__n{ font-family:var(--display); font-weight:800; letter-spacing:-.035em; font-size:clamp(1.05rem,1.9vw,1.4rem); line-height:1; color:var(--d-done); font-variant-numeric:tabular-nums; } /* Riadok, ktorý ide človeku, je modrý a začína slovom „Človek" — farba nie je jediný nosič. */ .ores__i--hum .ores__n{ color:var(--d-human); } .ores__i--hum{ color:var(--d-human); } html:not(.js) .ores__i{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .ores__i{ transition:none; } } /* Jeden slot, tri obsahy: čo príde po krokoch · rozhodnutie pre človeka · dokončený prípad. Pevná minimálna výška drží geometriu pokojnú. */ .slot{ display:grid; min-height:146px; align-content:start; } .slot > *{ grid-area:1/1; } .js .ops[data-state="run"] .hand, .js .ops[data-state="run"] .fin, .js .ops[data-state="gate"] .fin, .js .ops[data-state="done"] .hand{ visibility:hidden; opacity:0; } .hand,.fin,.hold{ transition:opacity .3s var(--ease); } @media (prefers-reduced-motion:reduce){ .hand,.fin,.hold{ transition:none; } } /* Kým kroky bežia, slot nie je prázdny — dopredu hovorí, čo príde po nich. */ .hold{ display:none; align-items:center; justify-content:center; gap:10px; align-self:stretch; padding:13px 14px; border:1px dashed var(--d-line); border-radius:var(--r-md); font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--d-text-2); text-align:center; } .js .ops[data-state="run"] .hold{ display:flex; } .hold__d{ width:7px; height:7px; border-radius:50%; background:var(--d-human); flex:none; opacity:.6; } .hand{ background:rgba(147,165,247,.11); border:1px solid rgba(147,165,247,.32); border-radius:var(--r-md); padding:12px 14px; align-self:start; } .hand__k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--d-human); } .hand__q{ margin-top:6px; font-size:14px; font-weight:700; line-height:1.4; color:var(--dark-text); } .hand__n{ margin-top:10px; padding-top:9px; border-top:1px solid rgba(147,165,247,.24); font-size:12px; line-height:1.5; color:var(--d-human); } /* Kým sa čaká na rozhodnutie, karta jemne pulzuje — je to jediné miesto, kde sa práca zastavila, a musí ho byť vidieť. */ .js .ops[data-state="gate"] .hand{ animation:opscall 2.6s var(--ease) infinite; } @keyframes opscall{ 0%,100%{ box-shadow:0 0 0 0 rgba(147,165,247,0) } 45%{ box-shadow:0 0 0 4px rgba(147,165,247,.14) } } @media (prefers-reduced-motion:reduce){ .js .ops[data-state="gate"] .hand{ animation:none; box-shadow:0 0 0 3px rgba(147,165,247,.16); } } .fin{ background:rgba(92,206,161,.1); border:1px solid rgba(92,206,161,.3); border-radius:var(--r-md); padding:12px 14px; align-self:start; } .fin__k{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--d-done); } .fin__k svg{ flex:none; } .fin__t{ margin-top:8px; font-size:13.5px; line-height:1.45; color:var(--dark-text); } html:not(.js) .fin,html:not(.js) .hold{ display:none; } /* Obchodná pointa. Posledná veta scény a druhá najväčšia vec na obrazovke — kvôli nej sa celá scéna prehráva. Pevná minimálna výška dvoch riadkov drží geometriu: jedna scéna má pointu kratšiu a obrazovka by pri prepnutí poskočila. */ .point{ font-family:var(--display); font-weight:720; letter-spacing:-.022em; font-size:clamp(15px,1.7vw,17.5px); line-height:1.32; color:var(--dark-text); border-top:1px solid var(--d-line-2); padding-top:12px; min-height:calc(2.64em + 13px); } /* ---------- Spodný pás: súhrn modelového dňa ---------- Nie tokeny, nie technické metriky. Počet prípadov, rutinných krokov a rozhodnutí, ktoré ostali človeku. */ .ops__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px clamp(14px,2vw,26px); padding:11px clamp(13px,1.8vw,20px); background:var(--dark-surface); border-top:1px solid var(--d-line); } .ops__day{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 13px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--d-text-2); } .ops__day span:not(:first-child){ border-left:1px solid var(--d-line); padding-left:13px; } .ops__day b{ color:var(--dark-text); font-weight:700; } .ops__dayk{ color:var(--d-accent); } .ops__law{ font-size:13px; font-weight:660; line-height:1.4; color:var(--dark-text); } /* Poznámka pod obrazovkou. Priznanie modelovosti a rovno most k prepočtu: silu ukazuje veľký modelový deň, peniaze si návštevník spočíta z vlastných čísel vo Wasted Metri. */ .ops__note{ margin-top:12px; display:grid; gap:8px; font-size:12.5px; line-height:1.65; color:var(--ink-3); } @media (min-width:760px){ .ops__note{ grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:8px 24px; } } .ops__go{ justify-self:start; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:660; color:var(--ink); text-decoration:none; padding-block:11px; border-bottom:2px solid var(--line); transition:border-color .15s; } .ops__go:hover{ border-color:var(--accent); } .ops__go svg{ flex:none; transition:transform .18s var(--ease); } .ops__go:hover svg{ transform:translateX(3px); } @media (prefers-reduced-motion:reduce){ .ops__go,.ops__go svg{ transition:none; } .ops__go:hover svg{ transform:none; } } /* ---------- TABLET (720–1039 px) ---------- Tri zóny vedľa seba sa sem nezmestia, ale jeden dlhý stĺpec je zbytočne vysoký. Vľavo teda ide vstup a nad ním vykonaná práca, vpravo cez obe poschodia výsledok — to je aj tak tá časť, kvôli ktorej sa scéna pozerá. V páse sa poradie prerovná, aby nezostal na samostatnom riadku gombík. */ @media (min-width:720px) and (max-width:1039px){ .ops__state{ order:3; } .ops__scenes{ order:4; } .ops__play{ order:5; margin-left:auto; } .scene__g{ --ogap:clamp(22px,3vw,38px); grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--ogap); } .zone--in{ grid-column:1; grid-row:1; } .zone--run{ grid-column:1; grid-row:2; } .zone--out{ grid-column:2; grid-row:1 / span 2; border-top:0; padding-top:0; border-left:1px solid var(--d-line-2); padding-left:calc(var(--ogap) / 2); margin-left:calc(var(--ogap) / -2); grid-template-rows:auto auto auto 1fr; } /* Pointa sadá na spodnú hranu, aby pod ňou nezívalo prázdno. */ .zone--out .point{ align-self:end; } } /* ---------- Bez JavaScriptu ---------- Prvá scéna zostane celá; ostatné tri sa zmrštia na názov, výsledky a pointu — teda presne na to, čo má návštevník odniesť. */ html:not(.js) .scene + .scene{ margin-top:22px; padding-top:22px; border-top:1px solid var(--d-line); } html:not(.js) .scene + .scene .zone--in, html:not(.js) .scene + .scene .zone--run, html:not(.js) .scene + .scene .slot{ display:none; } html:not(.js) .scene + .scene .scene__g{ display:block; } html:not(.js) .scene + .scene .zone--out{ border:0; padding:0; margin:0; } /* ---------- MOBIL — samostatná kompozícia, nie zmenšený desktop ---------- Tri vrstvy pod sebou: čo prišlo → čo systém vykonal → čo vzniklo a čo potrebuje človeka. Zo zoznamu krokov zostane iba bežiaci (a po dokončení posledný), takže výsledok aj pointa sú vidieť naraz. */ @media (max-width:719px){ /* Na úzkom displeji sa pás skladá na tri zámerné riadky: kto to je → čo sa dá vybrať a ovládať → v akom je to stave. Pri pôvodnom poradí zostal na poslednom riadku samotný gombík a vyzeralo to ako chyba sadzby. Výška je rovnaká, poradie čitateľné. */ .ops__bar{ padding:8px 10px; gap:6px 9px; } .ops__brand{ font-size:9px; letter-spacing:.16em; } .ops__tag{ font-size:9px; padding:3px 8px; letter-spacing:.1em; } .ops__scenes{ order:3; } .ops__play{ order:4; margin-left:auto; font-size:11.5px; padding:7px 10px; gap:6px; } .ops__state{ order:5; margin-left:0; font-size:9px; letter-spacing:.06em; gap:6px; } .seg{ padding:6px 10px; gap:0; } .seg__t{ display:none; } .ops__body{ padding:12px 11px; } .scene{ gap:12px; } .scene__g{ gap:12px; } /* Dva riadky názvu drží geometriu: jedna scéna má názov na jeden riadok. */ .scene__t{ font-size:1.32rem; min-height:2.12em; } .zone{ gap:9px; } .zone + .zone{ padding-top:12px; } .zone__p{ display:none; } .inp{ padding:9px 11px; gap:5px; min-height:0; } .js .acts .act{ display:none; } .js .acts .act.is-run, .js .acts .act.is-done:last-child{ display:grid; border-top:0; border-bottom:0; } .js .acts{ min-height:50px; align-content:center; } .chain__i{ font-size:10px; padding:4px 8px; margin-left:13px; } .chain__i:not(:first-child)::before{ left:-12px; width:10px; } .prog{ padding-top:10px; } .ores__n{ font-size:1.16rem; } .ores{ gap:8px; } /* Najvyššia rozhodovacia karta zo štyroch scén. Nižšia hodnota by znamenala, že sa obrazovka pri prepnutí scény natiahne. */ .slot{ min-height:148px; } .act__o{ font-size:10px; } .ops__foot{ padding:9px 11px; gap:6px 12px; } .ops__day{ font-size:9px; letter-spacing:.09em; gap:3px 10px; } .ops__day span:not(:first-child){ padding-left:10px; } .ops__law{ font-size:12.5px; } .ops__note{ margin-top:11px; } } /* ========================================================================== .hline — HANDOFF LINE Tenká pracovná stopa cez tri skutočné stavy. Zvislá stopa s koľajnicou a tromi uzlami; farba uzla nesie význam (AI / človek / hotovo). Pri prvom vstupe do viewportu prejde stopa raz, za ~780 ms. ========================================================================== */ .hline{ position:relative; padding-left:28px; margin-top:16px; } .hline::before{ content:""; position:absolute; left:6px; top:14px; bottom:14px; width:2px; background:var(--line); border-radius:2px; } /* Prejazd stopy. Beží raz, iba keď je k dispozícii JavaScript (trieda .is-run sa pridá pri prvom vstupe do viewportu) — bez neho je stopa jednoducho nakreslená a nič sa nehýbe. Koľajnica je farebná v poradí stavov (AI → človek → hotovo), takže farebný kód drží aj po dobehnutí. Odkrýva ju `clip-path`, nie výška ani `scaleY`: tie by gradient počas prejazdu stláčali. */ .js .hline::after{ content:""; position:absolute; left:6px; top:14px; bottom:14px; width:2px; border-radius:2px; background:linear-gradient(180deg, var(--accent) 0 34%, var(--human) 34% 67%, var(--done) 67% 100%); clip-path:inset(0 0 100% 0); } .js .hline.is-run::after{ animation:trace .78s var(--ease) forwards; } @keyframes trace{ to{ clip-path:inset(0 0 0 0) } } .hstep{ position:relative; padding:11px 0; } .hstep::before{ content:""; position:absolute; left:-28px; top:15px; width:14px; height:14px; border-radius:50%; background:var(--paper-3); box-shadow:0 0 0 3px var(--surface); } .hstep--sys::before{ background:var(--accent); } .hstep--hum::before{ background:var(--human); } .hstep--done::before{ background:var(--done); } .js .hline.is-run .hstep::before{ animation:node .28s var(--ease) both; } .js .hline.is-run .hstep:nth-child(2)::before{ animation-delay:.26s; } .js .hline.is-run .hstep:nth-child(3)::before{ animation-delay:.52s; } @keyframes node{ from{ transform:scale(.2); opacity:0 } } @media (prefers-reduced-motion:reduce){ .js .hline.is-run::after{ animation:none; } .js .hline::after{ clip-path:none; } .js .hline.is-run .hstep::before{ animation:none; } } .hstep__k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-3); } .hstep--sys .hstep__k{ color:var(--accent-ink); } .hstep--hum .hstep__k{ color:var(--human-ink); } .hstep--done .hstep__k{ color:var(--done); } .hstep__t{ margin-top:5px; font-size:14px; line-height:1.5; color:var(--ink-2); } .hstep--done .hstep__t{ color:var(--ink); font-weight:600; } /* ========================================================================== .diag — KDE MIZNE ČAS Šesť otázok ako jeden typografický zoznam, nie mriežka kariet. Otázka je displejová a veľká, vysvetlenie beží vedľa nej v druhom stĺpci. Poradie je číslované, ale nejde o postup — ide o rozpoznanie. ========================================================================== */ .diag{ border-top:1px solid var(--line); counter-reset:d; } .diag__i{ counter-increment:d; border-bottom:1px solid var(--line); position:relative; } /* Celý riadok je VCHOD do diagnostiky, nie iba text. Toto je moment najväčšieho sebarozpoznania na stránke a do 9. 8. 2026 z neho neviedla žiadna akcia — iba textový odkaz pod zoznamom. Klik je zároveň prvá odpoveď diagnostiky, takže návštevník nikdy nezačína prázdnym poľom. Bez JavaScriptu zostáva obyčajný odkaz na formulár. */ .diag__go{ display:grid; grid-template-columns:1fr; gap:6px; text-decoration:none; padding:clamp(18px,2.4vw,26px) 34px clamp(18px,2.4vw,26px) 44px; position:relative; transition:background .2s var(--ease); } .diag__go::before{ content:counter(d,decimal-leading-zero); position:absolute; left:0; top:calc(clamp(18px,2.4vw,26px) + .35em); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--ink-3); } @media (min-width:820px){ .diag__go{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(20px,3.4vw,56px); align-items:baseline; padding-left:60px; } } .diag__go:hover{ background:rgba(16,17,14,.022); } .diag__go:focus-visible{ outline-offset:-3px; } @media (prefers-reduced-motion:reduce){ .diag__go{ transition:none; } } .diag__q{ display:block; font-family:var(--display); font-size:clamp(1.6rem,3.4vw,2.5rem); font-weight:800; letter-spacing:-.04em; line-height:1; text-wrap:balance; } .diag__d{ display:block; font-size:15.5px; line-height:1.55; color:var(--ink-2); max-width:52ch; } /* Šípka pri pravom okraji, zvisle na stred. Je vidieť VŽDY — bez nej sa šesť otázok na dotykovom displeji nedá odlíšiť od obyčajného zoznamu a vchod do diagnostiky nikto nenájde. (Podmienka `hover:none` by to riešila len na skutočnom telefóne a overiť sa nedá.) Zámerne je to iba šípka, nie textová výzva: šesť červených popiskov pod sebou spraví zo sekcie mriežku tlačidiel a rozbije typografický pokoj, na ktorom celá stojí. Farbu a posun dostane až pri zámere. */ .diag__cue{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:inline-flex; color:var(--ink-3); transition:color .18s var(--ease), right .18s var(--ease); } .diag__go:hover .diag__cue,.diag__go:focus-visible .diag__cue{ color:var(--accent-ink); right:-4px; } @media (prefers-reduced-motion:reduce){ .diag__cue{ transition:none; } } .diag__after{ margin-top:clamp(30px,4vw,52px); display:grid; gap:16px; } @media (min-width:900px){ .diag__after{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(24px,4vw,64px); align-items:start; } } .diag__sum{ font-family:var(--display); font-size:clamp(1.3rem,2.6vw,1.85rem); font-weight:770; letter-spacing:-.032em; line-height:1.15; text-wrap:balance; max-width:24ch; } .diag__note{ font-size:15px; line-height:1.65; color:var(--ink-2); max-width:50ch; } /* ========================================================================== .areas — PÄŤ OBLASTÍ FIRMY Vľavo zoznam oblastí, vpravo JEDEN konkrétny príklad z nej (.apanel__in) a jeden z nich rozpísaný celý: čo dnes robí človek → čo prevezme systém → kedy sa zapojí človek → aký výsledok vznikne. Bez JS sa zobrazia všetky panely pod sebou (progresívne vylepšenie). ========================================================================== */ /* Uvedenie piatich oblastí. Sekcia má odteraz dva kroky (šesť otázok → päť oblastí), takže druhý krok potrebuje vlastnú vetu — ale nie ďalšiu hlavičku sekcie s číslom. */ .areas__lead{ margin-top:clamp(34px,4.4vw,58px); margin-bottom:clamp(16px,2vw,24px); } .areas{ display:grid; gap:clamp(18px,2.6vw,34px); grid-template-columns:1fr; align-items:start; } .areas > *{ min-width:0; } @media (min-width:980px){ .areas{ grid-template-columns:262px 1fr; } } .areas__nav{ display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } @media (min-width:980px){ .areas__nav{ flex-direction:column; flex-wrap:nowrap; position:sticky; top:92px; } } /* Bez JavaScriptu prepínač nemá čo prepínať — panely sú vtedy všetky otvorené pod sebou. Koľajnica sa preto nezobrazí vôbec: záložka, ktorá po kliknutí neurobí nič, je horšia než žiadna. Mriežka sa musí zúžiť spolu s ňou, inak by panely zostali v 262 px stĺpci. */ html:not(.js) .areas__nav{ display:none; } @media (min-width:980px){ html:not(.js) .areas{ grid-template-columns:1fr; } } .areas__btn{ flex:1 1 auto; min-width:150px; min-height:50px; padding:13px 16px; display:inline-flex; align-items:center; gap:11px; text-align:left; background:var(--surface); color:var(--ink-2); font-size:14.5px; font-weight:620; letter-spacing:-.012em; line-height:1.3; transition:background .16s, color .16s; } .areas__btn svg{ color:var(--ink-3); flex:none; transition:color .16s; } .areas__btn:hover{ background:var(--paper); color:var(--ink); } .areas__btn[aria-selected="true"]{ background:var(--ink); color:var(--paper); font-weight:700; } .areas__btn[aria-selected="true"] svg{ color:var(--accent); } .areas__btn:focus-visible{ outline-offset:-3px; } @media (prefers-reduced-motion:reduce){ .areas__btn,.areas__btn svg{ transition:none; } } .areas__stage{ display:grid; gap:26px; } .apanel{ min-width:0; } .apanel:focus-visible{ outline-offset:6px; } .js .apanel{ animation:panelin .3s var(--ease) both; } @keyframes panelin{ from{ opacity:0; transform:translateY(8px) } } @media (prefers-reduced-motion:reduce){ .js .apanel{ animation:none; } } .apanel__g{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-3); margin-bottom:9px; } .apanel__h{ font-family:var(--display); font-size:clamp(1.25rem,2.3vw,1.7rem); font-weight:780; letter-spacing:-.032em; line-height:1.13; text-wrap:balance; } /* Konkrétny príklad, na ktorom je oblasť rozpísaná. Bez tejto vety by čitateľ nevedel, na čo sa vlastne pozerá. */ .apanel__in{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; margin:14px 0 22px; padding:10px 13px; background:var(--paper-2); border-left:3px solid var(--ink); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:13.5px; line-height:1.5; color:var(--ink-2); } .section--alt .apanel__in{ background:var(--paper); } .apanel__in svg{ color:var(--ink); flex:none; margin-top:3px; } .apanel__in b{ color:var(--ink); } .areas__src{ margin-top:clamp(24px,3vw,34px); padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; line-height:1.7; color:var(--ink-3); max-width:88ch; } /* Šípka patrí k textu odkazu. Globálne `svg{display:block}` ju inak odsadí na vlastný riadok a odkaz vyzerá zalomený. */ .areas__src a svg{ display:inline-block; vertical-align:-2px; margin-left:5px; } /* MOBIL: AKORDEÓN, nie päť kariet pod sebou. Do 9. 8. 2026 sa prepínač pod 720 px vypínal úplne a všetkých päť oblastí sa vysypalo pod seba. Odmerané na 375 × 812: 7 060 px, teda 8,7 obrazovky — tretina celej mobilnej stránky a päť kompletných prípadových štúdií za sebou. Akordeón drží pôvodný zámer (žiadne vodorovné posúvanie, terč cez celú šírku) a sekciu skráti na necelé tri obrazovky. Záložky sem presúva areas.js tesne pred ich panel; koľajnica zostane prázdna, preto je skrytá. BEZ JAVASCRIPTU sa nič neskrýva: panely sú otvorené pod sebou a koľajnica sa nezobrazí, takže nikde nevisí hlavička, ktorá po ťuknutí nič neurobí. */ @media (max-width:719px){ .areas__nav[data-tabs-min]{ display:none; } .areas__stage{ gap:0; } .areas .apanel{ background:var(--surface); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-md) var(--r-md); padding:16px 16px 20px; margin-bottom:10px; } .section--alt .areas .apanel{ background:var(--paper); } .areas .apanel__in{ margin-bottom:18px; } /* Hlavička akordeónu. Terč cez celú šírku a 56 px vysoký. */ .areas__btn--acc{ width:100%; min-height:56px; margin:0; padding:14px 46px 14px 16px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); font-size:15px; font-weight:700; color:var(--ink); position:relative; } .section--alt .areas__btn--acc{ background:var(--paper-3); } .areas__btn--acc svg{ color:var(--ink-3); } /* Znamienko namiesto šípky: pri zatvorenej sekcii sľubuje „pribudne obsah", nie „preskočíš inam". */ .areas__btn--acc::after,.areas__btn--acc::before{ content:""; position:absolute; right:18px; top:50%; width:13px; height:2px; background:var(--ink); transition:transform .18s var(--ease); } .areas__btn--acc::before{ transform:translateY(-50%) rotate(90deg); } .areas__btn--acc::after{ transform:translateY(-50%); } .areas__btn--acc[aria-expanded="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); } .areas__btn--acc[aria-expanded="true"] svg{ color:var(--accent); } .areas__btn--acc[aria-expanded="true"]::before{ transform:translateY(-50%) rotate(180deg); background:var(--paper); } .areas__btn--acc[aria-expanded="true"]::after{ background:var(--paper); } .areas__btn--acc[aria-expanded="true"] + .apanel{ border-color:var(--ink); } } @media (prefers-reduced-motion:reduce){ .areas__btn--acc::after,.areas__btn--acc::before{ transition:none; } } /* --- Zhrnutie schopností. Krátky pás, nie ďalšia mriežka kariet. --- */ .caps{ margin-top:clamp(32px,4vw,54px); padding-top:clamp(24px,3vw,34px); border-top:1px solid var(--line); } .caps__h{ font-family:var(--display); font-size:clamp(1.1rem,2vw,1.4rem); font-weight:760; letter-spacing:-.028em; line-height:1.2; } .caps__list{ margin-top:18px; display:grid; gap:9px 28px; grid-template-columns:1fr; } @media (min-width:620px){ .caps__list{ grid-template-columns:1fr 1fr; } } @media (min-width:1000px){ .caps__list{ grid-template-columns:repeat(4,1fr); } } .caps__list li{ position:relative; padding-left:17px; font-size:14.5px; line-height:1.45; color:var(--ink); } .caps__list li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:2px; background:var(--accent); } /* Uistenie pre toho, kto sa v zozname nenašiel — bez neho sekcia funguje ako katalóg a kto v ňom nie je, odchádza. */ .areas__cta{ margin-top:clamp(26px,3.4vw,40px); display:grid; gap:20px; align-items:center; } @media (min-width:900px){ .areas__cta{ grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,56px); } } .areas__ctah{ font-family:var(--display); font-size:clamp(1.15rem,2.1vw,1.5rem); font-weight:760; letter-spacing:-.028em; line-height:1.22; text-wrap:balance; max-width:44ch; } /* ========================================================================== .meter — WASTED METER (tmavá plocha, celá sekcia je prístroj) Tri vstupy, ktoré majiteľ firmy naozaj vie odhadnúť, a výsledky o DNEŠKU. Podiel automatizácie, čistý prínos ani doba návratnosti sa tu NEPOČÍTAJÚ — pred overením ich nemá čím podložiť nikto. ========================================================================== */ .meter{ background:var(--dark); color:var(--dark-text); } .meter h2,.meter h3{ color:var(--dark-text); } .meter .kicker{ color:var(--d-accent); } .meter .kicker::before{ background:var(--d-accent); } .meter .shead__n{ color:var(--d-accent); border-bottom-color:var(--d-accent); } .meter .lead{ color:var(--d-text-2); } .meter .lead strong{ color:var(--dark-text); } .meter__grid{ display:grid; gap:clamp(28px,4vw,44px); grid-template-columns:1fr; align-items:start; } .meter__grid > *{ min-width:0; } @media (min-width:980px){ .meter__grid{ grid-template-columns:minmax(0,.8fr) 1px minmax(0,1.2fr); gap:clamp(28px,4.5vw,64px); } } .meter__in{ display:grid; gap:clamp(20px,2.8vw,30px); } /* Meracia stupnica medzi ovládačmi a výsledkom. Čisto vizuálna: drží dojem prístroja a spája vstup s číslom. Na úzkom displeji sa nezobrazuje. */ .mscale{ display:none; } @media (min-width:980px){ .mscale{ display:flex; flex-direction:column; justify-content:space-between; align-self:stretch; width:1px; background:var(--d-line); min-height:220px; } .mscale span{ display:block; width:11px; height:1px; margin-left:-5px; background:var(--d-line); } } /* Otázka je nad poľom, nie vedľa neho. V úzkom stĺpci sa pri rozložení „label | pole" lámala otázka na štyri riadky. */ .mctl{ display:grid; grid-template-columns:1fr; gap:10px; align-items:start; min-width:0; } .mctl label{ font-size:14.5px; font-weight:660; color:var(--dark-text); line-height:1.4; } .mctl__box{ justify-self:start; } .mctl__box{ display:inline-flex; align-items:stretch; gap:3px; padding:0 10px; border:1.5px solid rgba(242,241,234,.42); border-radius:var(--r-sm); background:rgba(242,241,234,.05); transition:border-color .15s, box-shadow .15s; } .mctl__box:focus-within{ border-color:var(--d-accent); box-shadow:0 0 0 3px rgba(255,98,68,.2); } /* font-size musí byť aspoň 16px — iOS Safari inak pri zaostrení poľa automaticky priblíži stránku a už ju neoddiali. */ .mctl__num{ width:3.4em; min-width:0; min-height:44px; border:0; background:none; padding:0; text-align:right; font-family:var(--mono); font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--d-accent); font-variant-numeric:tabular-nums; } .mctl__num:focus{ outline:none; } .mctl__unit{ display:inline-flex; align-items:center; font-family:var(--mono); font-size:14px; font-weight:700; color:var(--d-accent); } /* 44 px vysoký zásah aj keď je dráha tenká — posuvník je sekundárny ovládač, ale musí sa dať trafiť prstom. */ .mctl input[type="range"]{ grid-column:1/-1; width:100%; margin:0; height:44px; background:transparent; appearance:none; -webkit-appearance:none; cursor:pointer; } .mctl input[type="range"]::-webkit-slider-runnable-track{ height:4px; border-radius:var(--r-pill); background:rgba(242,241,234,.3); } .mctl input[type="range"]::-moz-range-track{ height:4px; border-radius:var(--r-pill); background:rgba(242,241,234,.3); } .mctl input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; margin-top:-8px; border-radius:50%; background:var(--d-accent); border:3px solid var(--dark-surface); box-shadow:0 1px 4px rgba(0,0,0,.5); } .mctl input[type="range"]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--d-accent); border:3px solid var(--dark-surface); box-shadow:0 1px 4px rgba(0,0,0,.5); } .mctl input[type="range"]:focus-visible{ outline:3px solid var(--d-accent); outline-offset:4px; } .mctl__range{ grid-column:1/-1; margin-top:-6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--d-text-2); } /* Výsledok nie je v zaoblenom dashboarde — je priamo na tmavej ploche. `tabular-nums` drží šírku číslic, takže sa veta pri ťahaní nehýbe. */ .meter__out{ display:grid; align-content:start; } .mres__k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--d-text-2); font-weight:600; } .mres__big{ margin-top:12px; font-family:var(--display); font-weight:800; letter-spacing:-.045em; /* Strop je 3,1 rem zámerne: pri väčšom reze sa „60 pracovných dní" zalomí uprostred farebnej frázy a číslo prestane byť jedným gestom. */ font-size:clamp(1.8rem,4.6vw,3.1rem); line-height:1.04; color:var(--dark-text); text-wrap:balance; } .mres__big b{ color:var(--d-accent); font-variant-numeric:tabular-nums; font-weight:800; } /* Peniaze sú druhé poschodie, nie prvé. Čas je nespochybniteľný; suma závisí od nákladu hodiny, ktorý zadáva návštevník, a preto je pri nej výslovne napísané slovo „odhadovaný". */ .mres__cost{ margin-top:14px; padding-top:14px; border-top:1px solid var(--d-line); font-family:var(--display); font-weight:740; letter-spacing:-.028em; font-size:clamp(1.15rem,2.3vw,1.55rem); line-height:1.3; color:var(--dark-text); } .mres__cost b{ color:var(--d-accent); font-variant-numeric:tabular-nums; white-space:nowrap; } .mres__sec{ margin-top:14px; font-size:15px; line-height:1.6; color:var(--d-text-2); } .mres__sec b{ color:var(--dark-text); font-weight:700; white-space:nowrap; } .mres__min{ margin-top:8px; font-size:14.5px; line-height:1.6; color:var(--d-text-2); } .mres__min b{ color:var(--dark-text); font-weight:700; white-space:nowrap; } /* Most k ďalšiemu kroku. Bez neho výsledok visí vo vzduchu: návštevník vie, koľko ho to stojí, ale nie, čo s tým. */ .mres__next{ margin-top:18px; font-size:14.5px; line-height:1.6; color:var(--dark-text); max-width:52ch; } .mres__cta{ margin-top:clamp(20px,2.6vw,26px); padding-top:clamp(18px,2.4vw,24px); border-top:1px solid var(--d-line); display:grid; gap:13px; justify-items:start; } .mres__note{ font-size:12.5px; line-height:1.65; color:var(--d-text-2); max-width:58ch; } /* „Ako sme to vypočítali". Bez rozpísaného vzorca vyzerá výsledok ako marketingové číslo vytiahnuté zo vzduchu. */ .mhow{ margin-top:clamp(26px,3.4vw,38px); border-top:1px solid var(--d-line); border-bottom:1px solid var(--d-line); } .mhow summary{ list-style:none; cursor:pointer; position:relative; padding:16px 40px 16px 0; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--d-accent); min-height:44px; display:flex; align-items:center; } .mhow summary::-webkit-details-marker{ display:none; } .mhow summary::after{ content:"+"; position:absolute; right:4px; font-size:1.2rem; } .mhow[open] summary::after{ content:"\2212"; } .mhow summary:focus-visible{ outline:3px solid var(--d-accent); outline-offset:-3px; } .mhow__a{ padding-bottom:20px; max-width:76ch; } .mhow__a ul{ display:grid; gap:9px; } .mhow__a li{ position:relative; padding-left:18px; font-size:14px; line-height:1.55; color:var(--d-text-2); } .mhow__a li::before{ content:""; position:absolute; left:0; top:.66em; width:9px; height:2px; background:var(--d-accent); } .mhow__a li b{ color:var(--dark-text); font-weight:700; } .mhow__a p{ margin-top:14px; font-size:13.5px; line-height:1.65; color:var(--d-text-2); } .meter__note{ margin-top:clamp(22px,3vw,32px); font-size:12.5px; line-height:1.7; color:var(--d-text-2); max-width:88ch; } .meter__note strong{ color:var(--dark-text); } /* ========================================================================== .gates — AKO POSTUPUJEME Štyri fázy, nie osem rovnocenných krokov. Vodorovne je to tá istá pracovná stopa ako .hline: pás nad každou fázou postupne tmavne z pochopenia cez overenie k hotovému riešeniu a pod každou fázou stojí rozhodnutie. ========================================================================== */ .gates{ display:grid; gap:1px; grid-template-columns:1fr; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; counter-reset:g; } @media (min-width:700px){ .gates{ grid-template-columns:1fr 1fr; } } @media (min-width:1060px){ .gates{ grid-template-columns:repeat(4,1fr); } } .gate{ counter-increment:g; background:var(--surface); padding:clamp(22px,2.6vw,28px); display:flex; flex-direction:column; gap:9px; position:relative; min-width:0; } .section--alt .gate{ background:var(--paper); } .gate::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent); opacity:.45; } .gate:nth-child(2)::before{ opacity:1; } .gate:nth-child(3)::before{ background:var(--human); opacity:1; } .gate:nth-child(4)::before{ background:var(--done); opacity:1; } .gate__n{ font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); } .gate__n::before{ content:"Fáza " counter(g,decimal-leading-zero); } .gate h3{ font-size:clamp(1.18rem,2vw,1.4rem); } .gate__d{ font-size:14.5px; line-height:1.55; color:var(--ink-2); } .gate__out{ margin-top:4px; display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; font-size:14px; line-height:1.5; color:var(--ink); } .gate__out svg{ color:var(--done); flex:none; margin-top:3px; } .gate__dec{ margin-top:auto; padding-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--accent-ink); line-height:1.5; } .gates__note{ margin-top:clamp(20px,2.6vw,28px); font-size:14.5px; line-height:1.65; color:var(--ink-2); max-width:74ch; } /* ========================================================================== .fit — KEDY TO MÁ A KEDY NEMÁ ZMYSEL Pravý stĺpec je napísaný rovnako vážne ako ľavý. Sekcia zvyšuje dôveru práve tým, že službu nepredáva každému. ========================================================================== */ .fit{ display:grid; gap:16px; grid-template-columns:1fr; align-items:start; } .fit > *{ min-width:0; } @media (min-width:880px){ .fit{ grid-template-columns:1.05fr .95fr; gap:clamp(18px,2.4vw,28px); } } .fit__col{ border-radius:var(--r-lg); padding:clamp(22px,2.8vw,32px); border:1px solid var(--line); background:var(--surface); } .fit__col--yes{ border:1.5px solid var(--done); background:var(--done-2); } .fit__h{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-size:clamp(1.08rem,2vw,1.3rem); font-weight:770; letter-spacing:-.026em; } .fit__col--yes .fit__h{ color:var(--done); } .fit__col--yes .fit__h svg{ color:var(--done); flex:none; } .fit__col--no .fit__h svg{ color:var(--ink-3); flex:none; } .fit__col ul{ margin-top:17px; display:grid; gap:11px; } .fit__col li{ position:relative; padding-left:18px; font-size:15px; line-height:1.5; color:var(--ink); } .fit__col li::before{ content:""; position:absolute; left:0; top:.66em; width:9px; height:2px; background:var(--done); } .fit__col--no li{ color:var(--ink-2); } .fit__col--no li::before{ background:var(--ink-3); } .fit__n{ margin-top:18px; padding-top:15px; border-top:1px solid var(--line); font-size:14px; line-height:1.6; color:var(--ink-2); } /* ========================================================================== FAQ ========================================================================== */ .faq{ border-top:1px solid var(--line); } .faq details{ border-bottom:1px solid var(--line); } .faq summary{ list-style:none; cursor:pointer; padding:21px 44px 21px 0; font-family:var(--display); font-weight:700; font-size:clamp(1.05rem,1.8vw,1.24rem); letter-spacing:-.022em; display:flex; align-items:center; gap:16px; position:relative; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; position:absolute; right:4px; font-family:var(--mono); color:var(--accent-ink); font-size:1.3rem; flex:none; } .faq details[open] summary::after{ content:"\2212"; } .faq details[open] summary{ color:var(--accent-ink); } .faq summary:focus-visible{ outline:3px solid var(--human); outline-offset:-3px; } .faq__a{ padding:0 0 22px; color:var(--ink-2); max-width:76ch; } .faq__a p{ font-size:15.5px; line-height:1.65; } .faq__a p + p{ margin-top:12px; } .faq__more{ margin-top:24px; font-size:14px; line-height:1.6; color:var(--ink-3); } /* ========================================================================== DIAGNOSTIKA Má ZAČAŤ ROZHOVOR, nie vyzbierať podklady. Prvé tri kroky sú VÝBER, nie písanie — tri ťuknutia po kontakt. Otvorená veta zostala, ale je nepovinná a stojí až za zhrnutím. Do 9. 8. 2026 tu stál jednokrokový formulár, ktorého PRVÉ pole bola povinná otvorená veta. Pre studeného návštevníka z reklamy je napísať tri vety o vlastnej firme vyššia bariéra než telefónne číslo aj než nahranie súboru. (Povinný výber druhu práce, ktorý tu bol do 6. 8. 2026, sa vracia — ale ako PRVÝ a najľahší krok, nie ako blok pred esejou. To je celý rozdiel.) Bez JavaScriptu sú všetky kroky pod sebou: `.dstep` sa neskrýva ničím v CSS, robí to až diag.js. ========================================================================== */ .dstep{ display:grid; gap:16px; } .js .dstep{ animation:dstepin .22s var(--ease) both; } @keyframes dstepin{ from{ opacity:0; transform:translateY(6px) } } @media (prefers-reduced-motion:reduce){ .js .dstep{ animation:none; } } /* `legend` sa v mriežke správa nepredvídateľne — preto z toku vystupuje a nadpis kroku je bežný blok cez celú šírku. */ .dstep__l{ display:block; float:left; width:100%; padding:0; font-family:var(--display); font-size:clamp(1.25rem,2.6vw,1.72rem); font-weight:780; letter-spacing:-.032em; line-height:1.14; text-wrap:balance; color:var(--ink); } .dstep__l:focus-visible{ outline-offset:4px; } .dstep__t{ clear:both; font-size:15px; line-height:1.6; color:var(--ink-2); max-width:56ch; } .dstep__t b{ color:var(--ink); } .dstep__opt{ font-size:13px; color:var(--ink-3); } /* --- Voľby --- Skutočné radio a checkbox prvky: klávesnica, čítačka obrazovky aj automatické vypĺňanie tak fungujú bez nášho pričinenia. Vstup je odsunutý z obrazu, ale ZOSTÁVA v prístupnostnom strome a nesie zaostrenie — `display:none` by ho z neho odstránil. */ .dopts{ display:grid; gap:8px; } .dopt__r{ position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none; } .dopt{ display:flex; align-items:center; gap:13px; min-height:56px; padding:12px 16px 12px 14px; background:var(--paper); border:1.5px solid var(--line-strong); border-radius:var(--r-md); font-size:15.5px; line-height:1.4; font-weight:600; color:var(--ink); cursor:pointer; transition:border-color .14s, background .14s; } .dopt::before{ content:""; flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong); background:var(--surface); transition:border-color .14s, box-shadow .14s; } input[type="checkbox"].dopt__r + .dopt::before{ border-radius:var(--r-sm); } .dopt:hover{ border-color:var(--ink-3); background:var(--surface); } .dopt__r:checked + .dopt{ border-color:var(--ink); background:var(--surface); } .dopt__r:checked + .dopt::before{ border-color:var(--ink); box-shadow:inset 0 0 0 4px var(--accent-btn); } .dopt__r:focus-visible + .dopt{ outline:3px solid var(--human); outline-offset:3px; } @media (prefers-reduced-motion:reduce){ .dopt,.dopt::before{ transition:none; } } /* --- Postup --- Počíta ZOSTÁVAJÚCE kroky, nie celkové: cesta sa vetví a „5 z 5“ by klamalo. */ .dprog{ display:flex; align-items:center; gap:14px; } .dprog__b{ flex:1 1 auto; height:3px; background:var(--line); border-radius:2px; overflow:hidden; } .dprog__b i{ display:block; height:100%; width:0; background:var(--accent-btn); transition:width .3s var(--ease); } .dprog__t{ flex:none; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-3); } @media (prefers-reduced-motion:reduce){ .dprog__b i{ transition:none; } } /* --- Krokové ovládanie --- Na mobile je „Pokračovať“ cez celú šírku a „Späť“ je textové: dve rovnako silné tlačidlá vedľa seba nútia rozhodovať sa medzi nimi. */ .dnav{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } .dnav__go{ display:flex; align-items:center; gap:16px; margin-left:auto; } .dnav__back,.dnav__skip{ min-height:44px; padding:8px 2px; font-size:14.5px; font-weight:640; color:var(--ink-2); border-bottom:2px solid var(--line); } .dnav__back:hover,.dnav__skip:hover{ color:var(--ink); border-color:var(--accent); } /* --- Zhrnutie --- Prehratie odpovedí, NIE analýza. Žiadne skóre a žiadne percento. */ .dsum{ background:var(--paper-2); border-left:3px solid var(--ink); border-radius:0 var(--r-md) var(--r-md) 0; padding:16px 18px; } .dsum__l{ display:grid; gap:11px; } .dsum__r{ display:grid; grid-template-columns:1fr; gap:2px; } @media (min-width:560px){ .dsum__r{ grid-template-columns:minmax(0,140px) minmax(0,1fr); gap:16px; align-items:baseline; } } .dsum__r dt{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-3); } .dsum__r dd{ margin:0; font-size:15px; line-height:1.45; font-weight:640; color:var(--ink); } /* --- Čestné nie --- Web na troch miestach tvrdí „povieme vám nie“. Toto je jediné miesto, kde to naozaj urobí. Nesmie preto vyzerať ako chyba ani ako trest: rovnaký papier ako zvyšok, žiadna červená, a obe cesty von sú viditeľné. */ .dno{ gap:14px; } .dno__h{ color:var(--ink); } .dno__act{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px; } .dno__alt{ min-height:44px; font-size:14.5px; font-weight:640; color:var(--ink-2); border-bottom:2px solid var(--line); } .dno__alt:hover{ color:var(--ink); border-color:var(--accent); } .leadwrap{ display:grid; gap:22px; grid-template-columns:1fr; align-items:start; } .leadwrap > *{ min-width:0; } @media (min-width:1000px){ .leadwrap{ grid-template-columns:1.35fr .65fr; gap:32px; } } .lf{ background:var(--surface); border:1.5px solid var(--ink); border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:clamp(22px,3.2vw,38px); min-width:0; } .lf form{ display:grid; gap:24px; } .lf__pair{ display:grid; gap:16px; grid-template-columns:1fr; } @media (min-width:560px){ .lf__pair{ grid-template-columns:1fr 1fr; } } .lf__foot{ display:grid; gap:14px; } .lf__micro{ font-size:13px; line-height:1.6; color:var(--ink-2); } .lf__privacy{ font-size:12.5px; color:var(--ink-2); display:flex; align-items:flex-start; gap:9px; line-height:1.55; } .lf__privacy svg{ flex:none; margin-top:3px; color:var(--done); } .lf__ns{ margin-top:16px; font-size:14px; color:var(--ink-2); } .field{ display:grid; gap:7px; min-width:0; } .field > label{ font-weight:660; font-size:15.5px; } .field__hint{ font-weight:450; font-size:13.5px; color:var(--ink-3); display:block; margin-top:2px; } .req{ color:var(--accent-ink); } .field__opt{ font-weight:500; font-size:13px; color:var(--ink-3); } .field input[type="text"],.field input[type="email"],.field input[type="tel"],.field textarea{ width:100%; min-height:54px; padding:14px 16px; font-size:16px; font-family:var(--sans); color:var(--ink); border:1.5px solid var(--line-strong); border-radius:var(--r-md); background:var(--paper); transition:border-color .15s, box-shadow .15s; } .field textarea{ line-height:1.55; resize:vertical; } .field input:focus-visible,.field textarea:focus-visible{ outline:none; border-color:var(--human); box-shadow:0 0 0 3px var(--human-2); } .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:var(--accent); background:var(--accent-2); } .field input.is-filled,.field textarea.is-filled{ border-color:var(--ink-3); background:var(--surface); } .errors{ border:1.5px solid var(--accent); background:var(--accent-2); border-radius:var(--r-md); padding:14px 17px; color:var(--accent-ink); font-weight:640; font-size:14.5px; } .errors ul{ display:grid; gap:5px; } .errors:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; } /* Sľub „čo bude nasledovať" je kratší než formulár a pri prechode krokmi sa výška formulára navyše mení. Bez prilepenia zostane vpravo od poslednej otázky prázdna diera — a to je presne to miesto, kde sa človek rozhoduje, či kontakt naozaj nechá. */ @media (min-width:1000px){ .lfnext{ position:sticky; top:92px; } } .lfnext{ background:var(--ink); color:var(--dark-text); border-radius:var(--r-lg); padding:clamp(22px,3vw,30px); min-width:0; } .lfnext__h{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--d-accent); margin-bottom:16px; font-weight:600; } .lfnext__list{ display:grid; counter-reset:n; } .lfnext__list li{ padding:13px 0; border-bottom:1px solid var(--d-line-2); counter-increment:n; } .lfnext__list li:last-child{ border-bottom:0; } .lfnext__list b{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline; font-size:14.5px; font-weight:600; line-height:1.45; } .lfnext__list b::before{ content:counter(n,decimal-leading-zero); font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--d-accent); letter-spacing:.08em; } .lfnext__note{ margin-top:18px; padding-top:16px; border-top:1px solid var(--d-line-2); font-size:13px; line-height:1.6; color:var(--d-text-2); } /* ========================================================================== PÄTIČKA + LEPKAVÉ CTA + TOAST ========================================================================== */ .site-footer{ padding-block:clamp(48px,6vw,76px); background:var(--paper); border-top:1px solid var(--line); } .footer__grid{ display:grid; gap:28px; grid-template-columns:1fr; } @media (min-width:820px){ .footer__grid{ grid-template-columns:1.6fr 1fr 1fr; align-items:start; } } .footer__tag{ color:var(--ink-2); max-width:46ch; margin-top:16px; font-size:14.5px; line-height:1.65; } .footer__links{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; } .footer__links a{ text-decoration:none; font-weight:550; font-size:15px; color:var(--ink-2); display:inline-flex; align-items:center; min-height:44px; } .footer__links a:hover{ color:var(--ink); } /* Kontakt a právne údaje. Sem sa presunul obsah zrušenej sekcie #istoty — je to jediné miesto na stránke, kde sa dopĺňa identita. Blok drží aj vtedy, keď je v ňom zatiaľ iba e-mail. */ .footer__ck{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:6px; } .footer__name{ font-family:var(--display); font-weight:760; font-size:1.06rem; letter-spacing:-.022em; } .footer__role{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; } .footer__meta a{ color:var(--ink-3); border-bottom-color:var(--line-2); } .footer__meta a:hover{ color:var(--ink); border-bottom-color:var(--accent); } .footer__meta{ margin-top:36px; padding-top:22px; border-top:1px solid var(--line-2); display:flex; flex-wrap:wrap; gap:8px 22px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); } .stickycta{ position:fixed; left:0; right:0; bottom:0; z-index:90; padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); /* Rovnaký dôvod ako pri hlavičke — bez plnej hodnoty vpredu by lepkavá CTA bola na starších iOS priehľadná a text pod ňou nečitateľný. */ background:#F3F2EDEB; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .3s var(--ease); } .stickycta.is-in{ transform:none; } body.has-sticky{ padding-bottom:82px; } @media (min-width:1061px){ .stickycta{ display:none!important; } body.has-sticky{ padding-bottom:0; } } @media (prefers-reduced-motion:reduce){ .stickycta{ transition:none; } } .toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(24px); opacity:0; visibility:hidden; pointer-events:none; background:var(--ink); color:#F8F7F2; padding:13px 22px; border-radius:var(--r-pill); font-weight:630; z-index:300; box-shadow:var(--sh-lg); max-width:90vw; text-align:center; transition:transform .3s var(--ease), opacity .3s var(--ease), visibility .3s; } .toast.is-visible{ transform:translateX(-50%) translateY(0); opacity:1; visibility:visible; } body.has-sticky .toast{ bottom:88px; } @media (prefers-reduced-motion:reduce){ .toast{ transition:none; } } /* ========================================================================== PODSTRÁNKY — prehľadové komponenty ========================================================================== */ .pagenav{ margin-top:28px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px 26px; } .pagenav a{ font-size:14.5px; display:inline-flex; align-items:center; min-height:44px; } /* Mriežka oblastí naprieč firmou (stránka Ďalšie oblasti). */ .fields{ display:grid; gap:1px; grid-template-columns:repeat(2,1fr); background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } @media (min-width:700px){ .fields{ grid-template-columns:repeat(3,1fr); } } @media (min-width:1040px){ .fields{ grid-template-columns:repeat(4,1fr); } } .fields li{ background:var(--paper); padding:16px 18px; display:grid; gap:5px; align-content:start; min-width:0; } .fields b{ font-size:15px; letter-spacing:-.018em; font-weight:700; } .fields span{ font-size:13px; line-height:1.45; color:var(--ink-2); } .fields__note{ margin-top:24px; font-size:14.5px; line-height:1.65; color:var(--ink-2); max-width:76ch; } /* Rozbor oblastí na stránke Ďalšie oblasti */ .art{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-sm); padding:15px 17px 7px; min-width:0; } .art__k{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:8px; } .art__k svg{ color:var(--accent); flex:none; } .art__t{ font-weight:700; font-size:14.5px; letter-spacing:-.016em; line-height:1.35; margin-top:8px; } .art__rows{ margin-top:11px; } .art__rows > div{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 14px; padding:8px 0; border-top:1px dashed var(--line); } .art__rows dt{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); } .art__rows dd{ font-family:var(--mono); font-size:12px; color:var(--ink-2); text-align:right; } .jflow{ min-width:0; display:grid; align-content:start; } .jflow__now{ font-size:14.5px; line-height:1.5; color:var(--ink-2); background:var(--paper-2); border-radius:var(--r-md); padding:13px 16px; } .jflow__now span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ink-3); margin-right:9px; white-space:nowrap; } .jrows{ margin-top:4px; } .jr{ display:grid; grid-template-columns:auto 1fr; gap:4px 13px; align-items:baseline; padding:12px 0 12px 14px; border-bottom:1px solid var(--line-2); position:relative; min-width:0; } .jr:last-child{ border-bottom:0; } .jr::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:2px; } .jr--ai::before{ background:var(--accent); } .jr--hu::before{ background:var(--human); } .jr--done::before{ background:var(--done); } .jr b{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; white-space:nowrap; } .jr--ai b{ color:var(--accent-ink); } .jr--hu b{ color:var(--human-ink); } .jr--done b{ color:var(--done); } .jr span{ font-size:14px; line-height:1.5; color:var(--ink-2); min-width:0; } .jr--done span{ color:var(--ink); font-weight:600; } @media (max-width:519px){ .jr{ grid-template-columns:1fr; } } .jflow__gain{ margin-top:12px; display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; background:var(--done-2); border:1px solid rgba(24,112,82,.28); border-radius:var(--r-md); padding:13px 15px; font-size:14px; line-height:1.5; color:var(--ink); } .jflow__gain svg{ color:var(--done); flex:none; margin-top:3px; } .jflow__gain b{ color:var(--done); } @media (min-width:620px){ .apanel--split{ display:grid; gap:16px; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:start; } } .qual{ display:grid; gap:16px; grid-template-columns:1fr; align-items:start; } .qual > *{ min-width:0; } @media (min-width:820px){ .qual{ grid-template-columns:1.1fr .9fr; } } .qual__col{ border-radius:var(--r-lg); padding:clamp(20px,2.8vw,28px); border:1px solid var(--line); background:var(--surface); } .qual__col--yes{ border:1.5px solid var(--done); background:var(--done-2); } .qual__h{ font-family:var(--display); font-size:clamp(1.05rem,2vw,1.24rem); font-weight:760; letter-spacing:-.024em; } .qual__col--yes .qual__h{ color:var(--done); } .qual__col ul{ margin-top:15px; display:grid; gap:11px; } .qual__col li{ display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; font-size:14.5px; line-height:1.5; color:var(--ink); } .qual__col--yes svg{ color:var(--done); flex:none; margin-top:3px; } .qual__col--no li{ color:var(--ink-2); } .qual__col--no svg{ color:var(--ink-3); flex:none; margin-top:3px; } .qual__note{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:13.5px; line-height:1.55; color:var(--ink-2); } /* Výsledková tabuľka — na úzkom displeji sa posúva vo vlastnom rámci, stránka sa nikdy nerozšíri do strany. */ .dtab{ margin-top:clamp(18px,2.4vw,24px); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); overflow:hidden; } .dtab__h{ padding:14px 18px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); font-weight:700; } .dtab__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .dtab__scroll:focus-visible{ outline:3px solid var(--human); outline-offset:-3px; } .dtab table{ width:100%; border-collapse:collapse; min-width:560px; } .dtab thead th{ text-align:left; padding:11px 18px; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:700; border-bottom:1px solid var(--line); background:var(--paper); } .dtab tbody th{ text-align:left; padding:12px 18px; font-size:14px; font-weight:700; letter-spacing:-.014em; vertical-align:top; } .dtab tbody td{ padding:12px 18px; font-size:13.5px; line-height:1.5; color:var(--ink-2); vertical-align:top; } .dtab tbody tr + tr th,.dtab tbody tr + tr td{ border-top:1px solid var(--line-2); } .dtab__v{ font-family:var(--mono); font-size:11.5px!important; letter-spacing:.04em; color:var(--ink-3)!important; white-space:nowrap; } .dtab__note{ padding:13px 18px; border-top:1px solid var(--line); background:var(--paper); font-size:13px; line-height:1.55; color:var(--ink-2); } .sec{ display:grid; gap:16px; grid-template-columns:1fr; align-items:start; } .sec > *{ min-width:0; } @media (min-width:880px){ .sec{ grid-template-columns:1fr 1fr; } } .sec__col{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,2.6vw,28px); } .sec__h{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:clamp(1.02rem,1.8vw,1.18rem); font-weight:760; letter-spacing:-.024em; } .sec__h svg{ color:var(--done); flex:none; } .sec__rows{ margin-top:16px; } .sec__rows > div{ padding:12px 0; border-top:1px solid var(--line-2); } .sec__rows > div:first-child{ border-top:0; padding-top:0; } .sec__rows dt{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink-3); } .sec__rows dd{ margin:0; margin-top:5px; font-size:14px; line-height:1.5; color:var(--ink-2); } .rule{ margin-top:clamp(18px,2.4vw,24px); background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:0 var(--r-md) var(--r-md) 0; padding:clamp(16px,2.2vw,24px); } .rule__h{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:clamp(1.02rem,1.8vw,1.18rem); font-weight:760; letter-spacing:-.024em; } .rule__h svg{ color:var(--accent-ink); flex:none; } .rule__p{ margin-top:11px; font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:82ch; } .after{ margin-top:clamp(20px,2.8vw,28px); background:var(--ink); color:var(--dark-text); border-radius:var(--r-lg); padding:clamp(22px,3vw,32px); } .after__h{ font-family:var(--display); font-size:clamp(1.15rem,2.2vw,1.5rem); font-weight:780; letter-spacing:-.03em; color:var(--dark-text); } .after__list{ margin-top:18px; display:grid; gap:1px; grid-template-columns:1fr; background:var(--d-line-2); border:1px solid var(--d-line); border-radius:var(--r-md); overflow:hidden; } @media (min-width:700px){ .after__list{ grid-template-columns:1fr 1fr; } } @media (min-width:1100px){ .after__list{ grid-template-columns:repeat(3,1fr); } } .after__list li{ background:var(--dark-surface); padding:16px 18px; display:grid; gap:5px; min-width:0; } .after__list b{ font-size:14.5px; letter-spacing:-.014em; } .after__list span{ font-size:13.5px; line-height:1.5; color:var(--d-text-2); } .section--ink{ background:var(--dark); color:var(--dark-text); } .section--ink h2,.section--ink h3{ color:var(--dark-text); } .section--ink .kicker{ color:var(--d-accent); } .section--ink .kicker::before{ background:var(--d-accent); } .section--ink .shead__n{ color:var(--d-accent); border-bottom-color:var(--d-accent); } .section--ink .lead{ color:var(--d-text-2); } .section--ink .lead strong{ color:var(--dark-text); } .proc{ display:grid; gap:1px; background:var(--d-line-2); border:1px solid var(--d-line); border-radius:var(--r-lg); overflow:hidden; grid-template-columns:1fr; } @media (min-width:700px){ .proc{ grid-template-columns:1fr 1fr; } } @media (min-width:1060px){ .proc{ grid-template-columns:repeat(5,1fr); } } .proc__s{ background:var(--dark-surface); padding:24px 20px 26px; display:grid; align-content:start; gap:8px; position:relative; min-width:0; } .proc__s::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--d-accent); } .proc__s:nth-child(1)::before{ opacity:.3 } .proc__s:nth-child(2)::before{ opacity:.48 } .proc__s:nth-child(3)::before{ opacity:.66 } .proc__s:nth-child(4)::before{ opacity:.84 } .proc__s--human::before{ background:var(--d-human); opacity:1; } .proc__n{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--d-accent); } .proc__s--human .proc__n{ color:var(--d-human); } .proc__s--human{ background:#171B26; } .proc__s h3{ font-size:1.02rem; letter-spacing:-.02em; } .proc__s p{ font-size:13.5px; color:var(--d-text-2); line-height:1.5; } .proc__ex{ margin-top:auto; padding-top:11px; border-top:1px dashed var(--d-line); font-family:var(--mono); font-size:11.5px!important; line-height:1.6!important; color:var(--d-accent)!important; } .proc__s--human .proc__ex{ color:var(--d-human)!important; } .procout{ margin-top:clamp(20px,2.6vw,28px); background:#12211B; border:1px solid rgba(92,206,161,.35); border-radius:var(--r-lg); padding:clamp(18px,2.4vw,26px); } .procout__k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--d-done); font-weight:700; } .procout__list{ display:grid; gap:9px; margin-top:14px; } @media (min-width:760px){ .procout__list{ grid-template-columns:repeat(3,1fr); gap:9px 24px; } } .procout__list li{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; font-size:14px; line-height:1.45; color:var(--dark-text); min-width:0; } .procout__list svg{ color:var(--d-done); flex:none; margin-top:3px; } .proc__foot{ margin-top:clamp(22px,3vw,30px); font-size:clamp(15px,1.8vw,16.5px); line-height:1.65; color:var(--d-text-2); max-width:72ch; } .proc__foot strong{ color:var(--dark-text); } .scale{ margin-top:clamp(26px,3.4vw,38px); padding-top:clamp(22px,3vw,30px); border-top:1px solid var(--line); } .scale__h{ font-family:var(--display); font-size:clamp(1.1rem,2.2vw,1.42rem); font-weight:780; letter-spacing:-.028em; text-wrap:balance; } .scale__list{ margin-top:18px; display:grid; gap:1px; grid-template-columns:1fr; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } @media (min-width:760px){ .scale__list{ grid-template-columns:repeat(3,1fr); } } .scale__list li{ background:var(--surface); padding:16px 18px; display:grid; gap:4px; min-width:0; position:relative; } .scale__list li::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent); } .scale__list li:nth-child(1)::before{ opacity:.35 } .scale__list li:nth-child(2)::before{ opacity:.68 } .scale__list li:nth-child(3)::before{ opacity:1 } .scale__list b{ font-size:15px; letter-spacing:-.016em; } .scale__list span{ font-size:13.5px; line-height:1.45; color:var(--ink-2); } .scale__note{ margin-top:14px; font-family:var(--mono); font-size:11px; line-height:1.75; color:var(--ink-3); max-width:76ch; } /* ---------- Textové stránky ---------- */ .prose{ display:grid; gap:18px; font-size:16.5px; line-height:1.7; color:var(--ink-2); margin-top:32px; max-width:70ch; } .prose h2{ font-size:clamp(1.28rem,2.2vw,1.65rem); margin-top:16px; color:var(--ink); } .prose ul{ display:grid; gap:9px; } .prose li{ padding-left:18px; position:relative; } .prose li::before{ content:""; position:absolute; left:0; top:.68em; width:8px; height:2px; background:var(--accent); } .prose a{ font-weight:640; } /* ---------- Stránka po odoslaní ---------- */ .thanks{ min-height:60vh; display:grid; align-content:center; } .thanks__ico{ width:56px; height:56px; border-radius:50%; background:var(--done-2); color:var(--done); display:grid; place-items:center; margin-bottom:26px; } .thanks__ico svg{ width:28px; height:28px; } .thanks__next{ margin-top:32px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:24px 26px; max-width:62ch; } .thanks__next p{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; font-weight:600; } .thanks__next li{ padding-left:20px; position:relative; font-size:15px; line-height:1.6; color:var(--ink-2); } .thanks__next li + li{ margin-top:10px; } .thanks__next li::before{ content:""; position:absolute; left:0; top:.68em; width:8px; height:2px; background:var(--accent); } /* Prehratie odpovedí. Dôkaz, že správa naozaj dorazila a že ju niekto číta — samotné „ďakujeme" to nedokáže. */ .thanks__recap{ margin-top:28px; background:var(--paper-2); border-left:3px solid var(--ink); border-radius:0 var(--r-md) var(--r-md) 0; padding:16px 18px; max-width:62ch; } .thanks__recapk{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:12px; } /* Ďalší krok po odoslaní. Ohraničený blok, nie ďalší odsek: musí byť vidieť, že sa niečo NOVÉ ponúka, nie že text pokračuje. */ .thanks__ask{ margin-top:32px; padding-top:26px; border-top:2px solid var(--ink); max-width:66ch; } .thanks__askh{ font-size:clamp(1.3rem,2.4vw,1.75rem); } .thanks__ask p{ font-size:15.5px; line-height:1.65; color:var(--ink-2); } .thanks__ask strong{ color:var(--ink); } /* ========================================================================== MOBILNÁ HUSTOTA Mobil nie je zmenšený desktop: menšie vnútorné odsadenia, väčšie terče, kratšie riadky. Terč má na dotyk vždy aspoň 44 px. ========================================================================== */ @media (max-width:719px){ body{ font-size:16.5px; } /* PREPOČET NA MOBILE. Číselné pole dostane celú šírku stĺpca a jednotka odpláva k pravému okraju — v úzkom boxe sa dalo trafiť len ťažko. Posuvník má vyšší zásah aj väčší jazdec: prstom sa ťahá horšie než myšou. */ .mctl__box{ justify-self:stretch; justify-content:space-between; padding:0 14px; } .mctl__num{ width:auto; flex:1 1 auto; text-align:left; font-size:20px; } .mctl input[type="range"]{ height:48px; } .mctl input[type="range"]::-webkit-slider-thumb{ width:26px; height:26px; margin-top:-11px; } .mctl input[type="range"]::-moz-range-thumb{ width:26px; height:26px; } .areas__btn{ min-width:100%; font-size:14px; padding:12px 14px; } .art{ padding:13px 15px 6px; } /* Číslo otázky zostáva v ľavej koľajnici aj na mobile: odsadenie 44 px text nikde netlačí a zoznam si drží editoriálny rytmus zvyšku stránky. */ .gate{ padding:20px 18px; } .fit__col{ padding:20px 18px; } .fields li{ padding:14px 15px; } .proc__s{ padding:20px 18px; } .scale__list li{ padding:14px 16px; } .lf{ padding:20px; } .lfnext{ padding:20px; } .faq summary{ padding:18px 40px 18px 0; } .faq__a{ padding:0 0 18px; } .jflow__now,.jflow__gain{ padding:12px 14px; } .rule{ padding:17px 16px; } .dtab__h,.dtab thead th,.dtab tbody th,.dtab tbody td,.dtab__note{ padding-inline:16px; } .qual__col{ padding:20px 18px; } .sec__col{ padding:20px 18px; } .after{ padding:20px 18px; } .after__list li{ padding:14px 16px; } }