. Díky tomu se dá blok vložit do existující stránky, aniž by přebil její typografii. Nepřidávej sem pravidla na holé `body`, `html` nebo `*` bez `.kc-blok` — v IPO by přetekla do celého webu. Výjimka: `:root` (jen tokeny --kc-*) a `.cookie-bar` (lištu vykresluje consent.js přímo do , mimo blok). --------------------------------------------------------------------- */ .kc-blok, .kc-blok *, .kc-blok *::before, .kc-blok *::after { box-sizing: border-box; } .kc-blok { margin: 0; font-family: var(--kc-font); font-size: 1rem; line-height: 1.65; color: var(--kc-text); background: var(--kc-bg); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } /* Základní typografie jde přes :where(), takže má nulovou specifičnost a KAŽDÁ komponenta níž ji přebije. Bez toho by `.kc-blok a` přebarvilo text tlačítek na bordó a na bordó tlačítku by popisek zmizel. */ :where(.kc-blok) h1, :where(.kc-blok) h2, :where(.kc-blok) h3 { font-family: var(--kc-font-head); line-height: 1.15; margin: 0 0 var(--kc-s3); font-weight: 800; letter-spacing: -.01em; } :where(.kc-blok) h1 { font-size: clamp(1.9rem, 5vw, 3rem); } :where(.kc-blok) h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); } :where(.kc-blok) h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; } :where(.kc-blok) p { margin: 0 0 var(--kc-s3); } :where(.kc-blok) p:last-child { margin-bottom: 0; } :where(.kc-blok) img { max-width: 100%; height: auto; display: block; } :where(.kc-blok) a { color: var(--kc-bordo); text-underline-offset: .2em; } :where(.kc-blok) a:hover { color: var(--kc-bordo-dark); } .kc-blok :focus-visible, .cookie-bar :focus-visible { outline: 3px solid var(--kc-bordo); outline-offset: 2px; border-radius: 3px; } .kc-container { width: min(100% - 2.5rem, var(--kc-container)); margin-inline: auto; } /* kotvy nesmí skončit pod lepivou hlavičkou */ :where(.kc-blok) [id] { scroll-margin-top: 5rem; } .kc-uzky { width: min(100%, 68ch); } .kc-sekce { padding-block: var(--kc-sekce); } .kc-sekce--alt { background: var(--kc-bg-alt); } .kc-sekce--tmava { background: var(--kc-bg-tmava); color: #fff; } .kc-sekce--tmava h2, .kc-sekce--tmava h3 { color: #fff; } .kc-sekce__uvod { max-width: 62ch; color: var(--kc-text-muted); font-size: 1.1rem; margin-bottom: var(--kc-s5); } .kc-sekce--tmava .kc-sekce__uvod { color: rgba(255,255,255,.78); } /* Na tmavě šedé a na bordó ploše musí být odkaz bílý. Bordó na šedé má kontrast 1,24 : 1 — text by prakticky zmizel. Platí i pro budoucí odkazy, které tam dneska ještě nejsou. Tlačítka jsou z toho vyjmutá — `.kc-btn--svetle` je bílá plocha s bordó textem, bílý popisek by na ní zmizel. */ .kc-sekce--tmava a:not(.kc-btn), .kc-cta-zaver a:not(.kc-btn) { color: #fff; } .kc-sekce--tmava a:not(.kc-btn):hover, .kc-cta-zaver a:not(.kc-btn):hover { color: rgba(255,255,255,.8); } .kc-vizualne-skryto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------- 3. TLAČÍTKA --------------------------------------------------------------------- */ .kc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--kc-s2); min-height: 48px; padding: .75rem 1.75rem; font: inherit; font-weight: 700; font-family: var(--kc-font-head); border: 2px solid transparent; border-radius: var(--kc-radius-sm); cursor: pointer; text-decoration: none; transition: background var(--kc-dur) var(--kc-ease), transform var(--kc-dur) var(--kc-ease), border-color var(--kc-dur) var(--kc-ease); } .kc-btn--hlavni { background: var(--kc-bordo); color: #fff; } .kc-btn--hlavni:hover { background: var(--kc-bordo-dark); color: #fff; transform: translateY(-1px); } .kc-btn--vedlejsi { background: transparent; color: var(--kc-bordo); border-color: var(--kc-border); } .kc-btn--vedlejsi:hover { border-color: var(--kc-bordo); color: var(--kc-bordo-dark); } .kc-btn--svetle { background: #fff; color: var(--kc-bordo); } .kc-btn--svetle:hover { background: var(--kc-bg-alt); color: var(--kc-bordo-dark); transform: translateY(-1px); } .kc-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; } /* --------------------------------------------------------------------- 4. HLAVIČKA A HERO --------------------------------------------------------------------- */ .kc-hlavicka { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--kc-border); } .kc-hlavicka__vnitrek { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-s3); min-height: 68px; } .kc-logo { font-family: var(--kc-font-head); font-weight: 800; font-size: 1.35rem; letter-spacing: .02em; color: var(--kc-seda); text-decoration: none; } .kc-logo span { color: var(--kc-bordo); } .kc-hlavicka__tel { font-weight: 600; text-decoration: none; color: var(--kc-text); white-space: nowrap; } .kc-hlavicka__akce { display: flex; align-items: center; gap: var(--kc-s4); } @media (max-width: 560px) { .kc-hlavicka__tel { display: none; } } .kc-hero { background: linear-gradient(180deg, #FBF9F8 0%, #fff 100%); padding-block: clamp(2.5rem, 7vw, 4.5rem) var(--kc-s6); } .kc-hero__mrizka { display: grid; gap: var(--kc-s5); align-items: center; } @media (min-width: 900px) { .kc-hero__mrizka { grid-template-columns: 1.1fr .9fr; gap: var(--kc-s7); } } .kc-hero__stitek { display: inline-block; margin-bottom: var(--kc-s3); padding: .3rem .8rem; border-radius: 999px; background: var(--kc-bordo-jemna); color: var(--kc-bordo); font-size: .85rem; font-weight: 700; letter-spacing: .02em; } .kc-hero__perex { font-size: 1.15rem; color: var(--kc-text-muted); max-width: 52ch; } .kc-hero__body { list-style: none; margin: var(--kc-s4) 0 var(--kc-s5); padding: 0; display: grid; gap: var(--kc-s2); } .kc-hero__body li { padding-left: 1.9rem; position: relative; } .kc-hero__body li::before { content: ""; position: absolute; left: 0; top: .5em; width: 1.1rem; height: .55rem; border-left: 3px solid var(--kc-bordo); border-bottom: 3px solid var(--kc-bordo); transform: rotate(-45deg); } .kc-hero__karta { background: #fff; border: 1px solid var(--kc-border); border-radius: var(--kc-radius); box-shadow: var(--kc-stin-2); padding: var(--kc-s5); } .kc-hero__karta dl { margin: 0; display: grid; gap: var(--kc-s3); } .kc-hero__karta dt { font-size: .85rem; color: var(--kc-text-muted); text-transform: uppercase; letter-spacing: .06em; } .kc-hero__karta dd { margin: 0; font-family: var(--kc-font-head); font-weight: 800; font-size: 1.6rem; color: var(--kc-bordo); } /* --------------------------------------------------------------------- 5. PRŮVODCE --------------------------------------------------------------------- */ .kc-app { background: #fff; border: 1px solid var(--kc-border); border-radius: var(--kc-radius); box-shadow: var(--kc-stin-2); overflow: hidden; } .kc-app__hlava { padding: var(--kc-s4) var(--kc-s5); border-bottom: 1px solid var(--kc-border); background: var(--kc-bg-alt); } .kc-app__telo { padding: clamp(1.25rem, 4vw, 2.5rem); } .kc-progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kc-s2); counter-reset: kc-krok; } .kc-progress li { counter-increment: kc-krok; font-size: .82rem; color: var(--kc-text-muted); line-height: 1.3; padding-top: var(--kc-s2); border-top: 3px solid var(--kc-border); transition: border-color var(--kc-dur) var(--kc-ease), color var(--kc-dur) var(--kc-ease); } .kc-progress li::before { content: counter(kc-krok) ". "; font-weight: 700; } .kc-progress li.is-hotovo { border-top-color: var(--kc-seda); color: var(--kc-text); } .kc-progress li.is-aktivni { border-top-color: var(--kc-bordo); color: var(--kc-bordo); font-weight: 700; } @media (max-width: 600px) { .kc-progress li { font-size: 0; padding-top: var(--kc-s1); } .kc-progress li::before { font-size: .8rem; } .kc-progress li.is-aktivni { font-size: .8rem; } } .kc-krok__cislo { font-size: .85rem; font-weight: 700; color: var(--kc-bordo); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--kc-s2); display: block; } .kc-krok__popis { color: var(--kc-text-muted); max-width: 56ch; } .kc-krok__navigace { display: flex; flex-wrap: wrap; gap: var(--kc-s3); margin-top: var(--kc-s5); } .kc-pole { display: grid; gap: var(--kc-s2); margin-bottom: var(--kc-s4); } .kc-pole label { font-weight: 600; } .kc-pole input[type="url"], .kc-pole input[type="text"], .kc-pole input[type="email"], .kc-pole input[type="tel"] { font: inherit; padding: .7rem .9rem; min-height: 48px; border: 1px solid var(--kc-border); border-radius: var(--kc-radius-sm); background: #fff; color: inherit; } .kc-pole input:focus { border-color: var(--kc-bordo); } .kc-pole__napoveda { font-size: .88rem; color: var(--kc-text-muted); } /* Popisek musí být JEDEN , ne volný text. Kdyby v něm byl odkaz, stal by se z něj samostatná položka flexu a věta by se rozpadla do sloupců. */ .kc-zaskrt { display: flex; gap: var(--kc-s2); align-items: flex-start; font-size: .95rem; } .kc-zaskrt input { margin-top: .35rem; width: 20px; height: 20px; accent-color: var(--kc-bordo); flex: none; } .kc-zaskrt > span { flex: 1; } /* dlaždice oborů */ .kc-dlazdice-mrizka { display: grid; gap: var(--kc-s3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .kc-dlazdice { display: grid; gap: var(--kc-s1); text-align: left; padding: var(--kc-s4); font: inherit; cursor: pointer; background: #fff; border: 2px solid var(--kc-border); border-radius: var(--kc-radius); transition: border-color var(--kc-dur) var(--kc-ease), transform var(--kc-dur) var(--kc-ease), box-shadow var(--kc-dur) var(--kc-ease); } .kc-dlazdice:hover { border-color: var(--kc-bordo); transform: translateY(-2px); box-shadow: var(--kc-stin); } .kc-dlazdice.is-vybrano { border-color: var(--kc-bordo); background: var(--kc-bordo-jemna); } .kc-dlazdice__ikona { font-size: 1.6rem; line-height: 1; } .kc-dlazdice__nazev { font-family: var(--kc-font-head); font-weight: 700; } .kc-dlazdice__cpc { font-size: .85rem; color: var(--kc-text-muted); } /* posuvníky */ .kc-posuvnik { margin-bottom: var(--kc-s4); } .kc-posuvnik__hlava { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kc-s3); margin-bottom: var(--kc-s2); } .kc-posuvnik__hodnota { font-family: var(--kc-font-head); font-weight: 800; font-size: 1.75rem; color: var(--kc-bordo); } .kc-posuvnik input[type="range"] { width: 100%; accent-color: var(--kc-bordo); height: 2.5rem; } .kc-posuvnik__meze { display: flex; justify-content: space-between; font-size: .82rem; color: var(--kc-text-muted); } /* --------------------------------------------------------------------- 6. VÝSLEDEK --------------------------------------------------------------------- */ .kc-vysledek { padding: clamp(1.25rem, 4vw, 2.5rem); } .kc-vysledek__hlavni { padding: var(--kc-s5); border-radius: var(--kc-radius); margin-bottom: var(--kc-s5); background: var(--kc-bg-alt); border: 1px solid var(--kc-border); } .kc-vysledek.je-zisk .kc-vysledek__hlavni { background: rgba(27,127,59,.06); border-color: rgba(27,127,59,.25); } .kc-vysledek.je-ztrata .kc-vysledek__hlavni { background: rgba(179,38,30,.05); border-color: rgba(179,38,30,.25); } .kc-vysledek__stitek { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--kc-text-muted); } .kc-vysledek__cislo { font-family: var(--kc-font-head); font-weight: 800; font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1.05; margin: var(--kc-s2) 0; } .kc-vysledek.je-zisk .kc-vysledek__cislo { color: var(--kc-zisk); } .kc-vysledek.je-ztrata .kc-vysledek__cislo { color: var(--kc-ztrata); } .kc-metriky { list-style: none; margin: 0 0 var(--kc-s5); padding: 0; display: grid; gap: var(--kc-s3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .kc-metriky li { border: 1px solid var(--kc-border); border-radius: var(--kc-radius-sm); padding: var(--kc-s3); } .kc-metriky dt { font-size: .85rem; color: var(--kc-text-muted); } .kc-metriky dd { margin: var(--kc-s1) 0 0; font-family: var(--kc-font-head); font-weight: 800; font-size: 1.5rem; } .kc-metriky__pozn { font-size: .8rem; color: var(--kc-text-muted); font-weight: 400; font-family: var(--kc-font); display: block; } .kc-skore { display: grid; gap: var(--kc-s2); margin-bottom: var(--kc-s5); } .kc-skore__hlava { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kc-s3); } .kc-skore__cislo { font-family: var(--kc-font-head); font-weight: 800; font-size: 1.75rem; color: var(--kc-bordo); } .kc-skore__pruh { height: 12px; background: var(--kc-border); border-radius: 999px; overflow: hidden; } .kc-skore__pruh span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--kc-bordo), var(--kc-bordo-svetla)); border-radius: 999px; transition: width 600ms var(--kc-ease); } .kc-zlom { padding: var(--kc-s3) var(--kc-s4); border-left: 4px solid var(--kc-bordo); background: var(--kc-bg-alt); border-radius: 0 var(--kc-radius-sm) var(--kc-radius-sm) 0; margin-bottom: var(--kc-s5); } .kc-disclaimer { font-size: .88rem; color: var(--kc-text-muted); border-top: 1px solid var(--kc-border); padding-top: var(--kc-s3); margin-top: var(--kc-s4); } /* --------------------------------------------------------------------- 7. BRÁNA A REPORT --------------------------------------------------------------------- */ /* Brána je užší než kontejner — formulář na 1120 px by měl třetinu plochy prázdnou. */ .kc-brana { background: var(--kc-bg-alt); border: 1px solid var(--kc-border); border-radius: var(--kc-radius); padding: clamp(1.25rem, 4vw, 2.5rem); max-width: 52rem; margin-inline: auto; } .kc-form { display: grid; gap: var(--kc-s4); } @media (min-width: 700px) { .kc-form { grid-template-columns: 1fr 1fr; } .kc-form .kc-pole--plna, .kc-form .kc-zaskrt, .kc-form .kc-btn, .kc-form .kc-form__pozn, .kc-form .kc-form__stav { grid-column: 1 / -1; } } .kc-form .kc-pole { margin-bottom: 0; } .kc-form__pozn { font-size: .88rem; color: var(--kc-text-muted); } .kc-form__stav { min-height: 1.5em; font-weight: 600; color: var(--kc-zisk); } .kc-medovnik { position: absolute; left: -9999px; } .kc-report { margin-top: var(--kc-s5); } .kc-kroky { display: grid; gap: var(--kc-s3); padding-left: 1.4rem; } .kc-kroky li { padding-left: .3rem; } /* --------------------------------------------------------------------- 8. OBSAHOVÉ SEKCE --------------------------------------------------------------------- */ .kc-karty { display: grid; gap: var(--kc-s4); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); list-style: none; margin: 0; padding: 0; } .kc-karta { background: #fff; border: 1px solid var(--kc-border); border-radius: var(--kc-radius); padding: var(--kc-s5); } .kc-sekce--tmava .kc-karta { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); } .kc-karta h3 { margin-bottom: var(--kc-s2); } .kc-karta p { color: var(--kc-text-muted); margin: 0; } .kc-sekce--tmava .kc-karta p { color: rgba(255,255,255,.78); } .kc-cisla { display: grid; gap: var(--kc-s4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); list-style: none; margin: 0; padding: 0; text-align: center; } .kc-cisla dl { display: flex; flex-direction: column; margin: 0; } .kc-cisla dt { order: 2; font-size: .9rem; color: rgba(255,255,255,.72); } .kc-cisla dd { order: 1; margin: 0; font-family: var(--kc-font-head); font-weight: 800; font-size: clamp(2rem, 5vw, 2.75rem); color: #fff; } .kc-postup { list-style: none; counter-reset: kc-fa; margin: 0; padding: 0; display: grid; gap: var(--kc-s4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .kc-postup li { counter-increment: kc-fa; position: relative; padding-top: 3.25rem; } .kc-postup li::before { content: counter(kc-fa); position: absolute; top: 0; left: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--kc-bordo); color: #fff; font-family: var(--kc-font-head); font-weight: 800; } .kc-faq { display: grid; gap: var(--kc-s2); max-width: 70ch; } .kc-faq details { border: 1px solid var(--kc-border); border-radius: var(--kc-radius-sm); background: #fff; } .kc-faq summary { cursor: pointer; padding: var(--kc-s3) var(--kc-s4); font-weight: 600; font-family: var(--kc-font-head); list-style: none; display: flex; justify-content: space-between; gap: var(--kc-s3); } .kc-faq summary::-webkit-details-marker { display: none; } .kc-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--kc-bordo); flex: none; } .kc-faq details[open] summary::after { content: "–"; } .kc-faq details > div { padding: 0 var(--kc-s4) var(--kc-s4); color: var(--kc-text-muted); } /* tabulky na textových stránkách (cookies) — na mobilu se dají posunout do strany */ :where(.kc-blok) table { width: 100%; border-collapse: collapse; margin: 0 0 var(--kc-s4); font-size: .95rem; display: block; overflow-x: auto; } :where(.kc-blok) th, :where(.kc-blok) td { text-align: left; vertical-align: top; padding: var(--kc-s2) var(--kc-s3); border-bottom: 1px solid var(--kc-border); } :where(.kc-blok) th { font-family: var(--kc-font-head); font-weight: 700; background: var(--kc-bg-alt); } :where(.kc-blok) code { background: var(--kc-bg-alt); padding: .1em .4em; border-radius: 4px; font-size: .9em; } :where(.kc-blok) h2 { margin-top: var(--kc-s6); } :where(.kc-blok) h3 { margin-top: var(--kc-s5); } /* v komponentách (karty, kroky, výsledek) tenhle rytmus nechceme */ .kc-karta h2, .kc-karta h3, .kc-app h3, .kc-vysledek h3, .kc-hero__karta h2, .kc-hero__karta h3 { margin-top: 0; } .kc-citace { border-left: 4px solid var(--kc-bordo); padding-left: var(--kc-s4); margin: 0; } .kc-citace footer { font-size: .9rem; color: var(--kc-text-muted); margin-top: var(--kc-s2); } .kc-cta-zaver { background: var(--kc-bordo); color: #fff; text-align: center; } .kc-cta-zaver h2 { color: #fff; } .kc-cta-zaver p { color: rgba(255,255,255,.85); max-width: 55ch; margin-inline: auto; } .kc-cta-zaver .kc-btn { margin-top: var(--kc-s4); } .kc-patka { background: var(--kc-seda); color: rgba(255,255,255,.72); padding-block: var(--kc-s6) var(--kc-s5); font-size: .92rem; } .kc-patka a { color: #fff; } .kc-patka__mrizka { display: grid; gap: var(--kc-s5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--kc-s5); } .kc-patka__mrizka strong { color: #fff; display: block; margin-bottom: var(--kc-s2); font-family: var(--kc-font-head); } .kc-patka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kc-s1); } .kc-patka__spodek { border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--kc-s4); display: flex; flex-wrap: wrap; gap: var(--kc-s3) var(--kc-s5); justify-content: space-between; } /* varování o zástupných číslech — na náhledu viditelné, po doplnění se smaže */ .kc-varovani { background: #FFF4E5; border: 1px solid #F0C27B; color: #6B4A10; padding: var(--kc-s3) var(--kc-s4); border-radius: var(--kc-radius-sm); font-size: .92rem; margin-bottom: var(--kc-s4); } .kc-varovani strong { color: #6B4A10; } /* --------------------------------------------------------------------- 9. COOKIE LIŠTA Lištu vykresluje sdílený `js/consent.js` a očekává třídy `.cookie-bar*` a `.btn`. Stránka nenačítá `css/style.css` (hlavní web se ještě nekóduje), takže si ty styly nese sama. Třídy se NEPŘEJMENOVÁVAJÍ — consent.js je hledá podle názvu. --------------------------------------------------------------------- */ .cookie-bar { position: fixed; left: var(--kc-s3); right: var(--kc-s3); bottom: var(--kc-s3); z-index: 900; max-width: 560px; margin-inline: auto; background: #fff; color: var(--kc-text); border: 1px solid var(--kc-border); border-radius: var(--kc-radius); box-shadow: var(--kc-stin-2); padding: var(--kc-s4); transform: translateY(calc(100% + var(--kc-s4))); opacity: 0; transition: transform 500ms var(--kc-ease), opacity 500ms; } .cookie-bar.is-visible { transform: none; opacity: 1; } .cookie-bar h2 { font-size: 1.15rem; margin-bottom: var(--kc-s2); } .cookie-bar p { font-size: .9rem; color: var(--kc-text-muted); } .cookie-bar__actions { display: grid; gap: var(--kc-s2); grid-template-columns: 1fr 1fr; margin-top: var(--kc-s3); } /* Přijmout a Odmítnout musí být stejně nápadné (legislativa-cz) */ .cookie-bar__actions .btn { min-height: 44px; padding: .5rem var(--kc-s3); font: inherit; font-weight: 700; font-family: var(--kc-font-head); border: 2px solid var(--kc-bordo); border-radius: var(--kc-radius-sm); background: var(--kc-bordo); color: #fff; cursor: pointer; text-align: center; } .cookie-bar__actions .btn:hover { background: var(--kc-bordo-dark); border-color: var(--kc-bordo-dark); } .cookie-bar__actions .btn--settings { grid-column: 1 / -1; min-height: 34px; background: none; border: 0; color: var(--kc-text-muted); font-weight: 400; text-decoration: underline; font-size: .88rem; } .cookie-bar__actions .btn--settings:hover { background: none; color: var(--kc-text); } .cookie-bar__options { display: none; margin-top: var(--kc-s3); border-top: 1px solid var(--kc-border); padding-top: var(--kc-s3); } .cookie-bar.is-expanded .cookie-bar__options { display: grid; gap: var(--kc-s2); } .cookie-bar__option { display: flex; gap: var(--kc-s3); align-items: flex-start; font-size: .9rem; } .cookie-bar__option input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--kc-bordo); } .cookie-bar__option strong { display: block; } .cookie-bar__option span { color: var(--kc-text-muted); } @media (max-width: 600px) { .cookie-bar { padding: var(--kc-s3); left: var(--kc-s2); right: var(--kc-s2); bottom: var(--kc-s2); } .cookie-bar h2 { font-size: 1rem; margin-bottom: 2px; } .cookie-bar p { font-size: .8rem; line-height: 1.35; } .cookie-bar__actions { margin-top: var(--kc-s2); gap: 6px; } .cookie-bar__actions .btn { min-height: 42px; padding-inline: var(--kc-s2); font-size: .82rem; white-space: nowrap; } } /* --------------------------------------------------------------------- 10. POHYB — odhalení sekcí, jen transform a opacity --------------------------------------------------------------------- */ /* Bez JS (chybí .kc-js) je všechno viditelné — obsah nesmí zůstat schovaný. */ .kc-blok.kc-js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--kc-dur) var(--kc-ease), transform 400ms var(--kc-ease); } .kc-blok.kc-js [data-reveal].je-videt { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .kc-blok *, .kc-blok *::before, .kc-blok *::after, .cookie-bar { animation-duration: .01ms !important; transition-duration: .01ms !important; } .kc-blok.kc-js [data-reveal] { opacity: 1; transform: none; } } /* --------------------------------------------------------------------- 11. TISK — „uložit jako PDF" je window.print() --------------------------------------------------------------------- */ @media print { .kc-hlavicka, .kc-hero, .kc-cta-zaver, .kc-patka, .kc-brana, .kc-btn, .kc-progress, .cookie-bar { display: none !important; } .kc-app, .kc-vysledek__hlavni, .kc-karta { box-shadow: none; border-color: #999; } body { font-size: 11pt; } }