/* ===== base.css — sdílený základ pro index + kalkulačky ===== Tokeny, reset, primitivy (.wrap/.eyebrow/.btn) a skelet .nav pillu. Načítej PŘED home.css / calc.css. Stránkově odlišné věci (pozadí html/body, --maxw, velikost loga, obsah navu, footer) zůstávají v home.css / calc.css. */ :root{ --serious:#002d3d; --serious-2:#063d4e; --hero:#00abbd; --hero-deep:#008c9c; /* tmavší tyrkysová pro DROBNÝ text na bílé (≈4,7:1) */ --hero-text:#007483; --calm:#aae3d4; --calm-soft:#e7f7f1; --energy:#fc7c71; --energy-deep:#f25b4e; /* CTA tlačítka = Honzova brandová korálová (jemná, jako v logu). Text na ní je TMAVĚ MODRÝ (--serious, 5,7:1). Bílý text měl jen 2,5:1 a neprošel WCAG AA; Honza 9.10.2026 rozhodl: barva tlačítka zůstává, text tmavě modrý. Nevracet na bílou. Hover = míchání obou brandových korálů (≈#f86c60, s tmavým textem 5,0:1). Čistý --energy-deep (#f25b4e) by s tmavým textem dal jen 4,4:1. */ --coral-btn:var(--energy); --coral-btn-deep:color-mix(in srgb,var(--energy) 60%,var(--energy-deep)); --coral-btn-fg:var(--serious); /* tmavší koralová pro BĚŽNÝ text na bílé (4,9:1) — plochy/tlačítka zůstávají brandové */ --energy-text:#c9402f; --support:#5d6b6f; --ink:#0b272f; --paper:#ffffff; --paper-2:#f3f8f6; --line:rgba(0,45,61,.09); --maxw:1200px; --gut:clamp(1.15rem,4vw,2.5rem); /* ===== TYPE SCALE — jednotná typografická škála (žádné ad-hoc velikosti nadpisů) ===== h1 = hero/page hero · h2 = nadpis sekce · h2-panel = nadpis uvnitř barevného panelu h3-panel = nadpis rozbaleného panelu (služby/tým) · h3 = nadpis karty lede = sekční perex · label = uppercase mikro-popisek (eyebrow, patička, kategorie) */ --fs-h1:clamp(2.5rem,5.6vw,4.7rem); --fs-h2:clamp(2.1rem,4vw,3.3rem); --fs-h2-panel:clamp(1.9rem,3.4vw,2.8rem); --fs-h3-panel:clamp(1.5rem,3vw,2.4rem); --fs-h3:1.3rem; --fs-lede:clamp(1.05rem,1.2vw,1.2rem); --fs-label:.76rem; --ls-label:.14em; --r:22px; --rl:34px; --rxl:44px; --ease:cubic-bezier(.22,.61,.36,1); --eo:cubic-bezier(.16,1,.3,1); --sh:0 24px 60px -28px rgba(0,45,61,.30); --sh-sm:0 14px 34px -18px rgba(0,45,61,.28); /* fokusový kruh: --hero (#00abbd) měl na bílé 2,78:1 (WCAG 1.4.11 chce 3:1); --hero-deep má 4,0:1 */ --focus:var(--hero-deep); } *{box-sizing:border-box;margin:0;padding:0} img{max-width:100%;display:block} a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent} input,button,textarea,select,[role="button"]{-webkit-tap-highlight-color:transparent} ::selection{background:var(--energy);color:#fff} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .eyebrow{display:inline-flex;align-items:center;gap:.55em;font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--hero-text)} .eyebrow::before{content:"";width:26px;height:2px;background:var(--energy)} /* buttons */ .btn{--bg:var(--serious);--fg:#fff;position:relative;display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:1rem;padding:.95em 1.7em;border-radius:999px;border:1.6px solid var(--bg);background:var(--bg);color:var(--fg);cursor:pointer;-webkit-appearance:none;appearance:none;transition:transform .4s var(--eo),background .3s,color .3s,border-color .3s,box-shadow .4s} .btn svg{width:1.05em;height:1.05em;transition:transform .4s var(--eo)} .btn:hover{transform:translateY(-3px);box-shadow:0 18px 30px -16px rgba(0,45,61,.5)} .btn:hover svg{transform:translateX(4px)} .btn--coral{--bg:var(--coral-btn);--fg:var(--coral-btn-fg);border-color:var(--coral-btn)} .btn--coral:hover{--bg:var(--coral-btn-deep);border-color:var(--coral-btn-deep)} .btn--ghost{--bg:transparent;--fg:var(--serious);border-color:var(--line)} .btn--ghost:hover{border-color:var(--serious);background:var(--serious);color:#fff;box-shadow:none} .btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px} /* skip-link: skrytý, dokud na něj klávesnice nedoběhne (a11y – přeskočí nav; sdílené pro všechny stránky) */ .skip-link{position:fixed;top:1rem;transform:translateY(calc(-100% - 2rem));left:1rem;z-index:100;background:var(--serious);color:#fff;font-weight:600;font-size:.95rem;padding:.7em 1.2em;border-radius:12px;box-shadow:var(--sh-sm);transition:transform .25s var(--eo)} .skip-link:focus{transform:none;outline:3px solid var(--focus);outline-offset:3px} /* ── DARK MODE — sdílené tokeny a prvky (platí pro všechny stránky) ── Stránkové dark úpravy žijí v home.css / calc.css; tady jen to společné. */ [data-theme="dark"]{ --ink:#e6f0f0; --support:#9fb2b5; --energy-text:#ff9f95; --paper:#0f1e25; --paper-2:#17292f; /* vyvýšené tmavé plochy (karty/panely) — jeden token místo hexů rozsetých po home.css a calc.css */ --paper-3:#132630; --line:rgba(255,255,255,.13); --hero-text:#54cfe0; --focus:var(--hero); /* Mátová plocha měla dřív jen světlou hodnotu, takže každé použití tokenu se v tmavém režimu muselo přebít ručně. Kde se to zapomnělo (.qf-ok), svítil #e7f7f1 na tmavém. */ --calm-soft:#1a3733; /* Stíny stavěné na rgba(0,45,61,…) jsou na tmavém pozadí neviditelné. */ --sh:0 24px 60px -28px rgba(0,0,0,.62); --sh-sm:0 14px 34px -18px rgba(0,0,0,.55); } /* Ghost tlačítko bere --fg z --serious, které v dark módu zůstává tmavé (je to i barva ploch, takže se přebít nedá). Pravidlo dřív žilo jen v home.css, takže na stránkách bez home.css (faktura, kurzy, qr-platba) svítilo #002d3d na #0f1e25 = 1,17:1. Patří sem, na všechny stránky. */ [data-theme="dark"] .btn--ghost{--fg:var(--ink);border-color:var(--line)} [data-theme="dark"] .btn--ghost:hover{background:rgba(255,255,255,.08);border-color:var(--ink);color:var(--ink)} /* jedno logo (logo.svg) pro celý web — v dark módu bílá silueta přes filter */ [data-theme="dark"] .brand-logo{filter:brightness(0) invert(1)} [data-theme="dark"] .nav.scrolled{background:rgba(15,30,37,.92);border-color:var(--line)} /* přepínač tmavého režimu (tlačítko v navu — index i kalkulačky) */ .theme-toggle{display:grid;place-items:center;width:44px;height:44px;margin-left:.65rem;border:0;border-radius:50%;background:rgba(0,45,61,.06);color:var(--serious);cursor:pointer;flex:0 0 auto;transition:background .3s var(--eo),color .3s var(--eo),transform .3s var(--eo)} .theme-toggle:hover{background:rgba(0,45,61,.12);transform:translateY(-1px)} .theme-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:3px} .theme-toggle svg{width:20px;height:20px} .theme-toggle .ic-moon{display:none} [data-theme="dark"] .theme-toggle .ic-sun{display:none} [data-theme="dark"] .theme-toggle .ic-moon{display:block} [data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.10);color:#e7f0f1} /* nav — skelet plovoucího pillu (obsah navu je stránkově specifický) */ .nav{position:fixed;inset:.8rem var(--gut) auto;z-index:50;max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:.6rem .7rem .6rem 1.2rem;border-radius:999px;transition:background .4s,box-shadow .4s,border-color .4s;border:1px solid transparent} /* pevné (neprůhledné) pozadí místo backdrop-filter blur: blur na fixní nav nad animovaným canvas hero Safari přepočítává každý snímek scrollu → header se sekal. Solid = plynulé. */ .nav.scrolled{background:rgba(255,255,255,.95);box-shadow:var(--sh-sm);border-color:var(--line)} .nav .btn{padding:.7em 1.4em;font-size:.95rem} header.nav a.btn,header.nav a.btn:hover{color:var(--fg)} /* ===== Co vidí přihlášený a co nepřihlášený (Honza 2026-08-01) ===== Řídí to auth.js: na dá `jl-auth-known`, jakmile stav zná, a `jl-in`, když je uživatel přihlášený. Pravidlo napříč články, kalkulačkami i nástroji: NEPŘIHLÁŠENÝ kontaktní CTA + mailová brána. Tisk ani stažení nevidí, výstup dostane mailem. PŘIHLÁŠENÝ tiskne a stahuje bez omezení. CTA ani mailovou bránu nevidí, nepotřebuje je. Schválně se skrývá až na `jl-in`, ne naopak. Kdyby API neodpovědělo, nepřihlášený pořád vidí kontakt a mailovou bránu, tedy to podstatné. Přihlášenému místo toho na okamžik probliknou, což je menší zlo než ztráta kontaktu u návštěvníka. VÝJIMKA: ČLÁNKY (Honza 2026-08-02). Na /clanky/ zůstává CTA i mailová brána vidět i přihlášenému: *„to jsou články na SEO, tam nebudu chodit nijak často a chci vidět hned, jak to vypadá pro příchozího návštěvníka."* Skrývání proto platí jen tam, kde stránka nese třídu `jl-nastroj`, tedy na rozcestníku a na sedmi nástrojích. Značka je na , aby fungovala i před doběhnutím JS. */ html.jl-nastroj.jl-in .contact-panel, html.jl-nastroj.jl-in .tools-cta, html.jl-nastroj.jl-in .fn-ctas, html.jl-nastroj.jl-in .fn-report{display:none!important} /* Nedopsané zadání [DOPLNIT …] se návštěvníkům neukazuje (Honza 8.10.2026: „zatím skryj, doplníme postupně"). Blok „Z praxe", ve kterém je jen zadání, zmizí celý. Po dopsání stačí smazat .todo. */ .todo{display:none!important} .fn-praxe:has(.todo){display:none} /* ===== Kontrast a tmavý režim (audit 9.10.2026) ===== */ /* Korálová tlačítka mimo .btn (vstřikují je report.js, nastroj-gate.js, cta.js a nástroje): tmavě modrý text jako u .btn--coral. „body" zvyšuje specifitu nad jejich vlastní styly. */ body .fnr-btn,body .mt-label{color:var(--coral-btn-fg)} body .fnr-btn svg,body .mt-label svg{stroke:currentColor} /* Nadpisy boxů v článcích mají color:var(--serious), které v tmavém režimu zůstává tmavé (je to i barva ploch). Na mátovém a papírovém boxu vycházelo 1,07:1. */ [data-theme="dark"] .fn-box h3,[data-theme="dark"] .fn-box h4{color:var(--ink)} /* Odkazy v drobném textu u formulářů (souhlas, zásady): --hero-deep #008c9c dával na bílé jen 4,0:1. --hero-text je tmavší tyrkys z palety (5,5:1), v tmavém režimu světlý (8,4:1). */ body .fnr-gdpr a,body .pd-gdpr a{color:var(--hero-text)} /* Placeholdery v tmavém režimu: prohlížečová šedá #757575 dávala 3,4:1. */ [data-theme="dark"] ::placeholder{color:var(--support);opacity:1} /* Řádek „Aktualizováno D.M.RRRR" na stránkách bez šablony článku (o nás, rozcestníky, nástroje) */ .upd{max-width:var(--maxw);margin:2.2rem auto 0;padding:0 var(--gut);font-size:.85rem;color:var(--support)} /* Nadpisy bez vlastního řádkování dědily 1,6 z textu → víceřádkové H2 v článcích působily řídce (Honza 9.10.2026). :where = nulová specificita, nadpisy s vlastním line-height zůstávají. */ :where(h1,h2){line-height:1.15} :where(h3){line-height:1.3} /* ===== Závěrečný audit 9.10.2026 ===== */ /* Korálové tlačítko má vždy tmavý text (Honza 9.10.). Lokální