/** Shopify CDN: Minification failed
Line 21:0 Unexpected "0"
Line 21:45 Unterminated string token
**/
/* KLOKI base — tokeny + kl-* komponenty. Zploštěné ze styles.css (Shopify assety jsou plochá složka, @import s cestami tam nefunguje). */
/* ===== tokens/fonts.css ===== */
/* KLOKI — webfonts
Poppins is the ONLY typeface: kloki.cz and the brand book alike, headings and body,
no pairing. The brand book states it outright — "Poppins / Google Typeface" (Brand
page 2.1). Loaded cuts on the live site: 400, 400i, 600, 700, 700i, 800.
Weights 300 / 500 / 900 / 950 appear in the site's CSS but are FICTION — those cuts
are not loaded, so the browser renders the nearest one. 800 is therefore the canonical
heading weight: simultaneously the heaviest available and the truthful one.
Writing a real 900 means also loading poppins_n9 — that is a design change, not a tidy-up.
*/
0,600;0,700;0,800;1,400;1,700&display=swap');
:root {
--font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-family-heading: var(--font-family);
}
/* ===== tokens/web/colors.css ===== */
/* KLOKI web (kloki.cz) — color primitives + semantic roles
Values transcribed verbatim from the attached codebase: css/kloki-tokens.css v1.0 (10. 8. 2026).
Measured on live kloki.cz + theme source. Do not round these to a 4/8px grid. */
:root {
/* ========================================================================
1 · BARVY — PRIMITIVA (paleta značky)
Každá hodnota je doložená renderem na kloki.cz nebo :root v assets/bts.css.
======================================================================== */
/* --- 1.1 Modrá rodina ------------------------------------------------- */
--kloki-blue-900: #062B78; /* navy; bts.css --bts-navy; 58× text na BTS */
--kloki-blue-700: #1A4886; /* brand modrá; bts.css --bts-blue; dominantní */
--kloki-blue-600: #22599F; /* jen střední stop gradientu promo lišty */
--kloki-blue-400: #33A3FF; /* akční/dekorativní; patička, ikony, badge */
/* RGB trojice pro alfa kompozice (rgba(var(--x), .1)) */
--kloki-blue-900-rgb: 6, 43, 120; /* @kind color */
--kloki-blue-700-rgb: 26, 72, 134; /* @kind color */
--kloki-blue-400-rgb: 51, 163, 255; /* @kind color */
/* --- 1.2 Magenta / růžová --------------------------------------------- */
--kloki-magenta-600: #DB077A; /* PLOCHA CTA; --color-button v 19 schématech */
--kloki-magenta-500: #DB047A; /* TEXT a linka; bts.css --bts-pink */
--kloki-magenta-800: #B8036A; /* hover plochy; bts.css --bts-pink-dark */
--kloki-magenta-vivid: #E6007E; /* POUZE stop gradientu (sloupec KLOKI) */
--kloki-pink-300: #FF8AC2; /* POUZE stop gradientu (hlavička sloupce) */
--kloki-purple-700: #5B1480; /* POUZE stop gradientu (95° KLOKI sloupec) */
--kloki-magenta-600-rgb: 219, 7, 122; /* @kind color */
--kloki-magenta-500-rgb: 219, 4, 122; /* @kind color */
--kloki-magenta-vivid-rgb: 230, 0, 126; /* @kind color */
/* --- 1.3 Žlutá / okrová ------------------------------------------------ */
--kloki-yellow-400: #FFD43B; /* kanonická žlutá; bts.css --bts-yellow, 16× */
--kloki-yellow-300: #FFE566; /* světlý stop gradientu promo lišty */
--kloki-yellow-500: #F5C400; /* tmavý stop gradientu promo lišty */
--kloki-yellow-100: #FFF4CC; /* měkký žlutý povrch: benefit pilulka, focus */
--kloki-amber-500: #E8A820; /* sémantická amber „částečně / neutrální" */
--kloki-star-500: #F5B301; /* hvězdičky — JEDNA hodnota; POZOR: pouze
bts.css:818, v renderu nezachyceno (viz
NEOVĚŘENO dole) */
--kloki-yellow-400-rgb: 255, 212, 59; /* @kind color */
/* --- 1.4 Teplé a růžové povrchy ---------------------------------------- */
--kloki-cream-100: #FFF8E8; /* bts.css --bts-cream; sekce, karty, chipy */
--kloki-cream-200: #F4F1EA; /* teplejší beige; chip, plocha za videem */
--kloki-rose-100: #FFE9F3; /* bts.css --bts-rose; karta „Co získá dítě" */
/* --- 1.5 Studené povrchy ----------------------------------------------- */
--kloki-sky-200: #D8F1FF; /* bts.css --bts-sky-strong; horní stop hero */
--kloki-sky-100: #EAF7FF; /* bts.css --bts-sky; plocha sekce Funkce */
--kloki-sky-050: #F7FAFF; /* téměř bílý modrý tint; .bts-plan__price */
/* --- 1.6 Sémantické stavy ---------------------------------------------- */
--kloki-red-500: #DC2A2E; /* riziko / „Ne"; bts.css --bts-red */
--kloki-green-600: #129A5B; /* potvrzení / úspora; bts.css --bts-green */
--kloki-green-checkout: #35B695; /* Shopify pokladna (settings_data.json) */
--kloki-red-500-rgb: 220, 42, 46; /* @kind color */
--kloki-green-checkout-rgb: 53, 182, 149; /* @kind color */
/* --- 1.7 Inkoust a neutrály -------------------------------------------- */
--kloki-white: #FFFFFF;
--kloki-ink-900: #1D1D1D; /* KANONICKÝ inkoust; bts.css --bts-ink */
--kloki-ink-900-rgb: 29, 29, 29; /* @kind color */
--kloki-line-cool: #E4ECF5; /* studená linka; bts.css --bts-line */
--kloki-line-warm: #ECE9E3; /* teplá linka; rámeček karet zdi referencí */
/* Šedá pro drobný verzálkový overline. Jediná ponechaná šedá na webu —
naměřeno 38× ve zdi referencí. Na bílé má 4,23:1, proto SMÍ nést jen
verzálkové popisky ≥11 px/800, nikdy běžný text. */
--kloki-grey-500: #7B7B7B;
/* ========================================================================
2 · BARVY — SÉMANTICKÉ ROLE
Tohle používej v komponentách.
======================================================================== */
/* --- 2.1 Brand --------------------------------------------------------- */
--color-brand: var(--kloki-blue-700);
--color-brand-deep: var(--kloki-blue-900);
--color-brand-accent: var(--kloki-magenta-500);
--color-brand-highlight: var(--kloki-yellow-400);
/* --- 2.2 Akce / CTA ---------------------------------------------------- */
--color-cta: var(--kloki-magenta-600); /* pozadí primárního CTA */
--color-cta-hover: var(--kloki-magenta-800);
--color-cta-text: var(--kloki-white); /* 4,86:1 → AA */
--color-cta-ring: var(--kloki-magenta-500); /* rámeček „featured" */
/* Sekundární CTA = ghost na brand modré (2px rámeček, průsvitná výplň). */
--color-cta-secondary-bg: rgba(255, 255, 255, .7);
--color-cta-secondary-text: var(--kloki-blue-700);
--color-cta-secondary-border: var(--kloki-blue-700);
/* Tmavé CTA — jediná modrá plocha, která unese bílý text (9,07:1). */
--color-cta-dark: var(--kloki-blue-700);
--color-cta-dark-hover: var(--kloki-blue-900);
/* Dekorativní modrá. NEPOUŽÍVAT jako plochu pod bílý text (2,68:1). */
--color-accent-blue: var(--kloki-blue-400);
--color-on-accent-blue: var(--kloki-blue-900); /* povinný tmavý popisek */
/* --- 2.3 Sémantické stavy ---------------------------------------------- */
--color-positive: var(--kloki-green-600); /* „Ano", ušetříte */
--color-positive-strong: var(--kloki-green-600);
--color-negative: var(--kloki-red-500); /* hrozba, „Ne", škrtnutá cena */
--color-warning: var(--kloki-amber-500); /* „částečně" */
--color-rating: var(--kloki-star-500); /* hvězdičky */
--color-checkout: var(--kloki-green-checkout);
/* --- 2.4 Povrchy ------------------------------------------------------- */
--color-surface: var(--kloki-white); /* výchozí plátno */
--color-surface-sky: var(--kloki-sky-100); /* modrá sekce/karta */
--color-surface-sky-strong: var(--kloki-sky-200); /* sytější modrá */
--color-surface-sky-faint: var(--kloki-sky-050); /* téměř bílá modrá */
--color-surface-cream: var(--kloki-cream-100); /* teplá sekce/karta */
--color-surface-cream-warm: var(--kloki-cream-200); /* chip, plocha média */
--color-surface-rose: var(--kloki-rose-100); /* růžová karta */
--color-surface-yellow: var(--kloki-yellow-100); /* benefit pilulka */
--color-surface-dark: var(--kloki-blue-900); /* tmavý předěl */
--color-surface-brand: var(--kloki-blue-700); /* lišta, tmavá sekce */
/* --- 2.5 Text ---------------------------------------------------------- */
--color-heading: var(--kloki-blue-700); /* H1, H2 */
--color-heading-sub: var(--kloki-blue-900); /* H3 a nižší, FAQ, ceny */
--color-text-strong: var(--kloki-ink-900); /* 16,86:1 */
--color-text: rgba(var(--kloki-ink-900-rgb), .8); /* 8,86:1 */
--color-text-muted: rgba(var(--kloki-ink-900-rgb), .75); /* 7,34:1 */
--color-text-soft: rgba(var(--kloki-ink-900-rgb), .65); /* 5,25:1 — DNO škály */
--color-text-faint: rgba(var(--kloki-ink-900-rgb), .45); /* 2,85:1 — jen dekorativní metadata (datum), NIKDY informace */
--color-text-accent: var(--kloki-magenta-500); /* zvýrazněné slovo */
--color-text-overline: var(--kloki-grey-500); /* drobný verzálkový popisek */
/* Text na tmavém. `--color-on-dark-muted` platí JEN na #062B78 / #1A4886
(7,85:1). Na #33A3FF má 2,12:1 a je to nejrozšířenější vada webu
(odkazy v patičce). */
--color-on-dark: var(--kloki-white);
--color-on-dark-muted: rgba(255, 255, 255, .75);
--color-on-yellow: var(--kloki-blue-900); /* 9,07:1; NIKDY bílá (1,4:1) */
/* --- 2.6 Rámečky a linky ----------------------------------------------- */
--color-border: var(--kloki-line-cool);
--color-border-warm: var(--kloki-line-warm);
--color-border-hair: rgba(var(--kloki-blue-900-rgb), .1); /* 1px ring */
--color-border-faint: rgba(var(--kloki-blue-700-rgb), .05); /* sotva vidět */
--color-border-strong: var(--kloki-ink-900); /* 2px „memphis" rámeček */
--color-focus-ring: var(--kloki-blue-700); /* outline 3px, offset 3px */
--color-focus-halo: var(--kloki-yellow-100);/* box-shadow 0 0 0 4px */
/* --- 2.7 Overlaye a průsvitné vrstvy ----------------------------------- */
--overlay-modal: rgba(2, 6, 18, .75); /* bts.css:1783 + blur(5px) */
--overlay-glass: rgba(255, 255, 255, .92); /* sticky hlavička desktop */
--overlay-glass-mobile: rgba(255, 255, 255, .96);
--overlay-media: linear-gradient(to top, rgba(0, 0, 0, .62) 0%,
rgba(0, 0, 0, .28) 35%,
transparent 100%); /* @kind color */ /* text nad videem */
--overlay-control: rgba(17, 17, 17, .6); /* tlačítko zvuku nad videem */
--overlay-play: rgba(255, 255, 255, .94); /* plovoucí play tlačítko */
/* --- 2.8 Kanonické gradienty ------------------------------------------- */
--gradient-hero: linear-gradient(var(--kloki-sky-200), var(--kloki-sky-100) 55%, var(--kloki-white));
--gradient-promo-warm: linear-gradient(90deg, var(--kloki-yellow-400), var(--kloki-yellow-300) 50%, var(--kloki-yellow-500));
/* Poslední stop je ZÁMĚRNĚ magenta-600 (primitivum plochy), ne magenta-500 (text), ačkoli
bts.css:172 má rgba(219,4,122,.8). Stop gradientu je plocha. Viz 03-color.md §451. NEVRACET. */
--gradient-promo-cool: linear-gradient(90deg, var(--kloki-blue-700), var(--kloki-blue-600) 55%, rgba(var(--kloki-magenta-600-rgb), .8));
--gradient-brand: linear-gradient(135deg, var(--kloki-magenta-500), var(--kloki-blue-700));
--gradient-winner: linear-gradient(135deg, var(--kloki-magenta-vivid), var(--kloki-blue-900));
--gradient-winner-head:linear-gradient(135deg, var(--kloki-yellow-400), var(--kloki-pink-300), var(--kloki-magenta-vivid) 80%);
--gradient-badge: linear-gradient(90deg, var(--kloki-magenta-500), var(--kloki-blue-900));
/* Pastelové karty: čtyři rotující dvojice, 160°. „Mint" na webu neexistuje —
dojem levandule vzniká přechodem růžová→modrá, není to samostatná barva. */
--gradient-card-1: linear-gradient(160deg, var(--kloki-sky-100), var(--kloki-cream-100));
--gradient-card-2: linear-gradient(160deg, var(--kloki-cream-100), var(--kloki-rose-100));
--gradient-card-3: linear-gradient(160deg, var(--kloki-rose-100), var(--kloki-sky-100));
--gradient-card-4: linear-gradient(160deg, var(--kloki-sky-200), var(--kloki-cream-100));
}
/* ===== tokens/web/typography.css ===== */
/* KLOKI web (kloki.cz) — typography scale, weights, leading, tracking, measure
Values transcribed verbatim from the attached codebase: css/kloki-tokens.css v1.0 (10. 8. 2026).
Measured on live kloki.cz + theme source. Do not round these to a 4/8px grid. */
:root {
/* ========================================================================
3 · TYPOGRAFIE
Vše v px / em. Vzpomeň si na past A (1 rem = 10 px).
======================================================================== */
/* --- 3.1 Font stack ----------------------------------------------------- */
--font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-family-heading: var(--font-family); /* jediný font na celém webu */
/* --- 3.2 Váhy — POUZE tyto čtyři (viz rozhodnutí R3) -------------------- */
--font-weight-regular: 400; /* @kind other */ /* načteno vždy */
--font-weight-medium: 600; /* @kind other */ /* jen tam, kde je dotažený poppins_n6 */
--font-weight-semibold: 700; /* @kind other */ /* načteno vždy */
--font-weight-bold: 800; /* @kind other */ /* KANONICKÁ váha nadpisů a CTA */
/* --- 3.3 Velikostní škála (clamp, plynule 390 → 1024 px) ---------------- */
--font-size-display: clamp(40px, calc(25.24px + 3.79vw), 64px); /* h1 40→64 */
--font-size-h2: clamp(30px, calc(18.93px + 2.84vw), 48px); /* sekční 30→48 */
--font-size-h3: 24px; /* nadpis karty */
--font-size-h4: clamp(18px, calc(15.94px + 0.53vw), 20px); /* podnadpis */
--font-size-lead: clamp(16px, calc(13.94px + 0.53vw), 18px); /* perex */
--font-size-body: 15px;
--font-size-body-sm: 14px;
--font-size-caption: 13px;
--font-size-micro: 11.5px;
--font-size-eyebrow: 12px;
--font-size-overline: 11px;
--font-size-badge: 11px;
--font-size-chip: 13px;
--font-size-sticker: 12px;
--font-size-quote: 16px;
--font-size-button: 18px;
--font-size-button-sm: 14px;
--font-size-price: clamp(32px, calc(23.75px + 2.12vw), 40px); /* finální cena */
--font-size-price-plan: clamp(30px, calc(23.81px + 1.59vw), 36px); /* cena tarifu */
--font-size-price-strike:17px;
--font-size-price-mid: 15px;
/* Původní SKOKOVÉ hodnoty z bts.css — použij místo clampu, když chceš
1:1 věrnost BTS. Jediný znatelný rozdíl je h2 na tabletu: clamp dá
40,7 px, BTS skok 36 px. Obojí je legitimní, clamp je hladší. */
--font-size-display-sm: 40px; --font-size-display-md: 56px; --font-size-display-lg: 64px;
--font-size-h2-sm: 30px; --font-size-h2-md: 36px; --font-size-h2-lg: 48px;
--font-size-lead-sm: 16px; --font-size-lead-lg: 18px;
--font-size-price-sm: 32px; --font-size-price-lg: 40px;
/* --- 3.4 Line-heighty (bez jednotky) ------------------------------------ */
--leading-display: 1.12; /* @kind other */ /* ≥ 40 px */
--leading-heading: 1.25; /* @kind other */ /* 24–36 px */
--leading-sub: 1.4; /* @kind other */ /* 18–20 px */
--leading-compact: 1.5; /* @kind other */ /* badge, chip, drobný text, výchozí kontejner */
--leading-button: 1.55; /* @kind other */
--leading-body: 1.625; /* @kind other */ /* perex a běžný text — KANONICKÝ */
--leading-price: 1; /* @kind other */ /* velké číslo ceny */
--leading-sticker: 1.34; /* @kind other */
/* DĚDICTVÍ, nepřebírat: theme body 1.8, theme nadpisy 1.2609, LP 0.95–1.10. */
/* --- 3.5 Letter-spacing (viz rozhodnutí R4) ----------------------------- */
--tracking-normal: normal; /* @kind other */ /* h2, h3, body, tlačítka — VÝCHOZÍ */
--tracking-display: -0.025em; /* @kind other */ /* jen h1 ≥ 40 px */
--tracking-eyebrow: 0.06em; /* @kind other */ /* VERZÁLKOVÝ barevný štítek nad nadpisem */
--tracking-overline: 0.14em; /* @kind other */ /* VERZÁLKOVÝ drobný šedý popisek */
--tracking-badge: 0.08em; /* @kind other */ /* pilulka na kartě, kupónový kód */
--tracking-micro: 0.05em; /* @kind other */ /* mikro popisek nad cenou */
/* DĚDICTVÍ, přebít na normal: theme nadpisy +0.69px, theme body +0.6px. */
/* --- 3.6 Měřítko textu (max-width) — patří k typografii, ne k mřížce ---- */
--measure-heading: 1100px; /* @kind other */ /* nadpisový blok, aby h2 48px měl ~45 znaků */
--measure-lead: 720px; /* @kind other */ /* perex pod sekčním nadpisem (18 px, ~70 zn.) */
--measure-hero: 620px; /* @kind other */ /* perex v hero (užší, nekoliduje s vizuálem) */
--measure-faq: 820px; /* @kind other */ /* akordeon; horní hranice čitelnosti ~78 zn. */
--measure-card: 520px; /* @kind other */ /* text vedle obrázku v kartě */
--measure-callout: 900px; /* @kind other */ /* zvýrazněný odstavec */
}
/* ===== tokens/web/spacing.css ===== */
/* KLOKI web (kloki.cz) — spacing scale + vertical rhythm
Values transcribed verbatim from the attached codebase: css/kloki-tokens.css v1.0 (10. 8. 2026).
Measured on live kloki.cz + theme source. Do not round these to a 4/8px grid. */
:root {
/* ========================================================================
4 · SPACING (viz rozhodnutí R5)
Základ 4px mřížka + tři doložené půlkroky (2 / 10 / 56).
Názvy jsou číselné záměrně — theme je celý v px a t-shirt velikosti
by u 15 stupňů vedly k hádání.
======================================================================== */
--space-2: 2px; /* mikro: odsazení hvězdiček, tečka v badge */
--space-4: 4px; /* ikona ↔ štítek, chip vertikálně */
--space-8: 8px; /* položky seznamu, gap chipů, tečky slideru */
--space-10: 10px; /* NEJČASTĚJŠÍ gap webu (550×): checklisty, FAQ, řádky */
--space-12: 12px; /* gap tlačítek, buňky srovnání, sticker padding-X */
--space-16: 16px; /* padding CTA-Y, gap karuselu, gutter mobil */
--space-20: 20px; /* gap tarifních karet */
--space-24: 24px; /* GAP MŘÍŽEK, padding karty (mobil), gutter desktop */
--space-32: 32px; /* padding karty (desktop), padding CTA-X, heading gap */
--space-40: 40px; /* „tight" sekce, gap Dawn mřížky, gap 2 sloupců */
--space-48: 48px; /* gap velkých 2 sloupců */
--space-56: 56px; /* gap hero splitu, margin-top pod nadpisem sekce */
--space-64: 64px; /* SEKČNÍ PADDING mobil, gap perky/tarify */
--space-80: 80px; /* SEKČNÍ PADDING desktop */
--space-96: 96px; /* sekční padding „důležité" sekce (≥1024) */
/* --- 4.1 Sémantický vertikální rytmus ---------------------------------- */
--section-y: var(--space-64); /* < 640 px */
--section-y-lg: var(--space-80); /* ≥ 640 px */
--section-y-hero: var(--space-96); /* ≥ 1024 px, „hero" sekce */
--section-y-tight: var(--space-40); /* navazující sekce bez předělu */
--heading-gap: var(--space-32); /* nadpisový blok → obsah */
--heading-gap-sm: var(--space-24); /* totéž na mobilu */
--grid-gap: var(--space-24); /* mřížky karet */
--carousel-gap: var(--space-16); /* vodorovný scroll na mobilu */
--grid-gap-theme: var(--space-40); /* JEN když sáhneš na Dawn .grid */
}
/* ===== tokens/web/radius.css ===== */
/* KLOKI web (kloki.cz) — radius scale
Values transcribed verbatim from the attached codebase: css/kloki-tokens.css v1.0 (10. 8. 2026).
Measured on live kloki.cz + theme source. Do not round these to a 4/8px grid. */
:root {
/* ========================================================================
5 · RADIUSY (viz rozhodnutí R6)
======================================================================== */
--radius-xs: 6px; /* žlutý marker, mikroštítek */
--radius-sm: 12px; /* pole formuláře, kupónový box, „inherit" štítek */
--radius-md: 16px; /* vnitřní prvky karty, ikonová dlaždice 48×48 */
--radius-lg: 24px; /* média, fotky v kartě, varovná karta */
--radius-xl: 32px; /* KARTA — kanonický radius */
--radius-pill: 999px; /* CTA, chip, sticker, tab, tečka, badge */
--radius-circle: 50%; /* jen skutečné kruhy (avatar, ikona v kroužku) */
/* Sémantické aliasy */
--radius-card: var(--radius-xl);
--radius-media: var(--radius-lg);
--radius-inner: var(--radius-md);
--radius-input: var(--radius-sm);
--radius-button: var(--radius-pill);
/* Skládaná karta (fotka nahoře, barevné tělo dole) — vždy stejné X. */
--radius-card-top: 32px 32px 0 0;
--radius-card-bottom: 0 0 32px 32px;
}
/* ===== tokens/web/shadow.css ===== */
/* KLOKI web (kloki.cz) — elevation, glows, offset shadows, rings
Values transcribed verbatim from the attached codebase: css/kloki-tokens.css v1.0 (10. 8. 2026).
Measured on live kloki.cz + theme source. Do not round these to a 4/8px grid. */
:root {
/* ========================================================================
6 · STÍNY A ELEVACE
Pravidlo: stín nese odstín brandové modré, ne černou. CTA nese vlastní
barevnou záři. Offsetové („papírové") a rozostřené stíny NEMÍCHAT
na jednom prvku.
======================================================================== */
--elevation-0: 0 0 0 1px rgba(var(--kloki-blue-700-rgb), .05);
--elevation-1: 0 0 0 1px rgba(var(--kloki-blue-900-rgb), .1), 0 2px 16px rgba(0, 0, 0, .04);
--elevation-2: 0 12px 32px rgba(var(--kloki-blue-700-rgb), .1); /* výchozí karta */
--elevation-3: 0 22px 60px rgba(var(--kloki-blue-700-rgb), .16); /* „featured" */
--elevation-4: 0 8px 22px rgba(0, 0, 0, .18); /* nad médiem */
--elevation-4-sm: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
--elevation-sticky: 0 -8px 24px rgba(var(--kloki-blue-700-rgb), .12); /* lišta zdola */
/* Barevné záře pod CTA */
--glow-cta: 0 10px 30px -8px rgba(var(--kloki-magenta-600-rgb), .55);
--glow-blue: 0 10px 24px rgba(var(--kloki-blue-700-rgb), .28);
/* Offsetová („nálepka na papíře") rodina — VÝHRADNĚ srovnávací tabulka
a žluté zvýrazňovací pilulky. Neroztahovat plošně. */
--offset-sm: 0 0 0 1px rgba(var(--kloki-blue-900-rgb), .05), 0 2px 0 0 rgba(var(--kloki-blue-900-rgb), .08);
--offset-md: 0 0 0 2px rgba(var(--kloki-blue-900-rgb), .1), 0 4px 0 0 rgba(var(--kloki-blue-900-rgb), .12);
--offset-lg: 0 0 0 2px var(--kloki-yellow-400), 0 8px 0 -2px rgba(var(--kloki-magenta-vivid-rgb), .35);
--offset-verdict: 0 0 0 2px var(--kloki-white), 0 4px 0 0 rgba(var(--kloki-blue-900-rgb), .18);
--offset-ink: 4px 4px 0 var(--kloki-ink-900); /* + border: 2px solid #1D1D1D */
/* Aktivní stav se dělá ringem přes box-shadow, nikdy borderem
(border posouvá layout). */
--ring-active: 0 0 0 2px var(--kloki-magenta-600);
--ring-focus: 0 0 0 4px var(--kloki-yellow-100);
}
/* ===== tokens/web/layout.css ===== */
/* KLOKI web (kloki.cz) — containers + z-index layers
Values transcribed verbatim from the attached codebase: css/kloki-tokens.css v1.0 (10. 8. 2026).
Measured on live kloki.cz + theme source. Do not round these to a 4/8px grid. */
:root {
/* ========================================================================
7 · KONTEJNERY
======================================================================== */
--container: 1200px; /* @kind other */ /* KANONICKÁ šířka; s guttery → obsah 1152 px */
--container-narrow: 1000px; /* @kind other */ /* „úzká" sekce */
--container-theme: 1300px; /* @kind other */ /* DĚDICTVÍ Dawn .page-width — jen pro header,
footer a PDP main-product. Nezavádět nově. */
--gutter: 16px; /* @kind other */ /* < 640 px */
--gutter-lg: 24px; /* @kind other */ /* ≥ 640 px */
/* ========================================================================
8 · Z-INDEX VRSTVY
Škála narovnává dvě věci: kolizi na 50 (sticky ATC vs. mobilní CTA lišta)
a díru mezi theme headerem (3/4) a BTS headerem (40).
======================================================================== */
--z-base: 0; /* @kind other */ /* obsah */
--z-raised: 2; /* @kind other */ /* prvky uvnitř karty: badge, play, šipka */
--z-mask: 4; /* @kind other */ /* maskovací gradienty sloupců zdi referencí */
--z-header: 40; /* @kind other */ /* sticky hlavička stránky */
--z-sticky: 50; /* @kind other */ /* sticky ATC lišta (PDP) */
--z-sticky-cta: 51; /* @kind other */ /* mobilní CTA lišta LP — MUSÍ být nad ATC */
--z-overlay: 100; /* @kind other */ /* dropdown, tooltip */
--z-modal: 900; /* @kind other */ /* spodní sheet, lightbox, dialog */
--z-drawer: 1060; /* @kind other */ /* košík — rezervováno theme, nepřekračovat */
--z-a11y: 9999; /* @kind other */ /* skip-to-content link */
}
/* ===== tokens/web/motion.css ===== */
/* KLOKI web (kloki.cz) — durations, easings, transitions, lift
Values transcribed verbatim from the attached codebase: css/kloki-tokens.css v1.0 (10. 8. 2026).
Measured on live kloki.cz + theme source. Do not round these to a 4/8px grid. */
:root {
/* ========================================================================
9 · POHYB
Výchozí volba je --duration-fast (.15s) + --ease. `.3s` jen pro věci,
které se posouvají přes větší vzdálenost (sticky lišta, hlavička).
Nic nad .45s kromě záměrného „slam" efektu.
======================================================================== */
--duration-instant: .1s; /* @kind other */ /* mikro-feedback, active stav tabu */
--duration-fast: .15s; /* @kind other */ /* KANONICKÁ: hover tlačítek, karet, ringů */
--duration-base: .2s; /* @kind other */ /* tečky slideru, rotace chevronu ve FAQ */
--duration-slow: .28s; /* @kind other */ /* hover karet se zvednutím */
--duration-panel: .3s; /* @kind other */ /* sticky lišty, reveal hlavičky, hover varování*/
--duration-sheet: .45s; /* @kind other */ /* progress bar dopravy, otevírání panelů */
--ease: ease; /* @kind other */ /* 90 % případů */
--ease-soft: cubic-bezier(.22, 1, .36, 1); /* @kind other */ /* doskoky, progress bar */
--ease-slam: cubic-bezier(.16, 1, .3, 1); /* @kind other */ /* jen „slam" reveal */
--ease-out-slow: cubic-bezier(0, 0, .3, 1); /* @kind other */ /* zděděno z base.css */
/* Hotové přechody */
--transition-button: transform var(--duration-fast) var(--ease),
box-shadow var(--duration-fast) var(--ease),
background-color var(--duration-fast) var(--ease); /* @kind other */
--transition-card: transform var(--duration-slow) var(--ease),
box-shadow var(--duration-slow) var(--ease); /* @kind other */
--transition-panel: transform var(--duration-panel) var(--ease),
opacity var(--duration-panel) var(--ease); /* @kind other */
/* Posuny při hoveru (drž je malé — web nikde nepoužívá scale na obsah) */
--lift-button: -1px; /* @kind other */
--lift-card: -2px; /* @kind other */
}
/* ==========================================================================
OMEZENÍ POHYBU
Overridují se POUZE pohybové tokeny. Barvy, spacing a stíny zůstávají —
uživatel s `reduce` má vidět stejnou stránku, jen bez pohybu.
1ms místo 0s záměrně: nulová délka v některých prohlížečích ruší
`transitionend`, na kterém visí JS logika.
Tohle NESTAČÍ. Nekonečné animace (marquee, ticker, pulzující skeletony)
a autoplay videí se musí vypnout v komponentě a v JS:
var REDUCED = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
========================================================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--duration-instant: 1ms; /* @kind other */
--duration-fast: 1ms; /* @kind other */
--duration-base: 1ms; /* @kind other */
--duration-slow: 1ms; /* @kind other */
--duration-panel: 1ms; /* @kind other */
--duration-sheet: 1ms; /* @kind other */
--ease: linear; /* @kind other */
--ease-soft: linear; /* @kind other */
--ease-slam: linear; /* @kind other */
--ease-out-slow: linear; /* @kind other */
--transition-button: none; /* @kind other */
--transition-card: none; /* @kind other */
--transition-panel: none; /* @kind other */
--lift-button: 0px; /* @kind other */
--lift-card: 0px; /* @kind other */
}
}
/* ===== tokens/brand/palette.css ===== */
/* KLOKI — brand palette (illustration & print layer)
Source: "KLOKI Moon - temporary.fig" → page Brand → slides 3.1 / 3.2 / 3.3.
This is the palette the brand book publishes, with CMYK builds for print and the
importance ranking from slide 3.3 ("black and white are our primary colors while
secondary are accent colors used in combination with their tertiary equivalents").
It overlaps the web layer but is NOT the same list — the illustration/mascot colours
(Skin, Cheeks and their dark pairs) only exist here, and Yellow Kloki is #FFD600 here
versus the measured web token --kloki-yellow-400 #FFD43B. Both are real; use
--brand-yellow for illustration, logo and print, --kloki-yellow-400 for the website. */
:root {
/* --- Primary ---------------------------------------------------------- */
--brand-yellow: #FFD600; /* Yellow Kloki · RGB 255,214,0 */
--brand-blue: #1A4886; /* Dark Blue Kloki · RGB 26,72,134 · C97 M74 Y17 K4 */
--brand-black: #1D1D1D; /* Black · RGB 29,29,29 · K100 */
/* --- Secondary (accents) ---------------------------------------------- */
--brand-magenta: #DB077A; /* Magenta · RGB 219,7,122 */
--brand-blue-light: #33A3FF; /* Light Blue · RGB 51,163,255 · C69 M22 Y6 K0 */
--brand-red: #DC2A2E; /* Red · RGB 220,42,46 · C5 M93 Y82 K0 */
--brand-skin: #F3D39D; /* Skin · RGB 243,211,157 · C0 M14 Y62 K2 */
--brand-cheeks: #EAA89B; /* Cheeks · RGB 234,168,155 · C6 M42 Y34 K0 */
/* --- Tertiary (the shadow pair of each accent) ------------------------- */
--brand-magenta-dark: #A50059; /* Dark Magenta · RGB 165,0,89 */
--brand-blue-dark: #0070AD; /* Dark blue · RGB 0,112,173 · C87 M48 Y8 K0 */
--brand-red-dark: #A90004; /* Dark Red · RGB 169,0,4 · C21 M100 Y100 K17 */
--brand-skin-dark: #BAA278; /* Dark Skin · RGB 186,162,120 · C25 M31 Y54 K10 */
--brand-cheeks-dark: #B4847B; /* Dark Cheeks · RGB 180,132,123 · C24 M48 Y42 K14 */
/* Brand-book slide grounds — the three backgrounds the deck alternates between. */
--brand-ground-blue: var(--brand-blue);
--brand-ground-yellow: var(--brand-yellow);
--brand-ground-sky: var(--brand-blue-light);
}
/* ===== components/web/kloki-components.css ===== */
/* ==========================================================================
KLOKI — KNIHOVNA KOMPONENT
Verze 1.0 · 10. 8. 2026
Prefix tříd: .kl-
ZÁVISLOST: tento soubor NEFUNGUJE bez kloki-tokens.css. Načti ho první:
{{ 'kloki-tokens.css' | asset_url | stylesheet_tag }}
{{ 'kloki-components.css' | asset_url | stylesheet_tag }}
ODKUD ČÍSLA POCHÁZEJÍ
Každá hodnota je buď (a) naměřený computed styl z kloki.cz
(home / PDP kloki-star / BTS LP × 390 / 768 / 1440), nebo (b) zdrojový kód
theme (assets/bts.css, kloki-cart-drawer.css, sections/main-product.liquid,
snippets/sticky-add-to-cart.liquid, snippets/cart-drawer.liquid).
Kanonickou vrstvou je BTS — z PDP se nekopíruje nic (36 velikostí písma,
20 letter-spacingů). Kde se knihovna od živého webu ODCHYLUJE, je u pravidla
komentář „ODCHYLKA OD ŽIVÉHO WEBU" a důvod.
ČTYŘI VĚCI, KTERÉ MUSÍŠ VĚDĚT, NEŽ TOHLE POUŽIJEŠ
1) 1 rem = 10 px (theme má font-size: 62.5 %). Proto je celý soubor v px/em.
2) base.css útočí na element selektory (body letter-spacing .6px,
h1–h5 .69px + word-break: break-word). Obal stránky MUSÍ mít .kl-page,
jinak ti theme přepíše tracking a rozláme česká slova.
3) Poppins má načtené 400/700 vždy, 600 a 800 jen když si je šablona
dotáhne (vzor theme.liquid:319–325). Váha 900 NEEXISTUJE — knihovna
proto všude, kde BTS píše 900, používá 800 (rozhodnutí R3 v tokenech).
Vizuálně je to shodné, protože prohlížeč 900 stejně kreslí řezem 800.
4) Shopify GitHub sync tiše zahazuje soubory: {% schema %} name max 25
znaků, richtext settings musí začínat , locale hodnota max 1000 zn.
Před pushem spusť @shopify/theme-check-node.
POŘADÍ SOUBORU
0 Doplňkové RGB trojice 1 Stránka, kontejner, sekce, mřížka
2 Typografie 3 Tlačítka
4 Badge a pilulky 5 Karty (základ)
6 Produktová karta 7 Karta balíčku
8 Cenový blok + rohový pruh 9 Bonusový blok dárků
10 Obsahové karty 11 Callout a razítko
12 Statement sekce 13 Akordeon / FAQ
14 Karusel 15 Video karta
16 Timeline 17 Srovnávací tabulky
18 Tarify a perky 19 Garance
20 Trust prvky 21 Promo lišta
22 Sticky prvky 23 Header
24 Footer 25 Formuláře
26 Cart drawer 27 Utility + omezení pohybu
========================================================================== */
/* ==========================================================================
1 · STRÁNKA, KONTEJNER, SEKCE, MŘÍŽKA
========================================================================== */
/* --- 1.1 Obranný obal proti base.css ------------------------------------
Vzor .bts-page (bts.css:39). Bez něj: theme vnutí letter-spacing .6px
do textu, .69px do nadpisů a word-break: break-word (rozláme „samostatnost"
uprostřed slova). Dej .kl-page na nejvyšší obal sekce nebo šablony. */
.kl-page {
margin: 0; /* ruší výchozích 8px na
, když je .kl-page přímo na něm */
color: var(--color-text);
background: var(--color-surface);
font-family: var(--font-family);
font-size: 16px;
line-height: var(--leading-compact);
letter-spacing: var(--tracking-normal);
}
.kl-page * { box-sizing: border-box; }
.kl-page :is(h1, h2, h3, h4, h5, h6) {
font-family: inherit;
word-break: normal;
letter-spacing: var(--tracking-normal);
}
/* Vyvážené zalamování (převzato z BTS): nadpisy balance, odstavce pretty.
Znatelně ubere osamocených slov na konci řádku v češtině. */
.kl-page :is(h1, h2, h3, h4, .kl-h1, .kl-h2, .kl-h3) { text-wrap: balance; }
.kl-page :is(p, li) { text-wrap: pretty; }
/* POVINNÁ OBRANA proti bleedu karuselu. `.kl-track` má margin-inline −20 px,
ale mobilní gutter je 16 px (--gutter) → track přesahuje o 4 px za okraj
viewportu a stránka na 390 px scrolluje do strany. Živý web to řeší stejně
(bts.css:41–47: `body:has(.bts-hero)`, `#MainContent:has(.bts-page)`).
Bez tohoto bloku je bleed vada, ne efekt. */
@media (max-width: 1023px) {
body.kl-page, /* samostatné šablony v templates/ */
body:has(.kl-page), /* theme: .kl-page je na vnitřním obalu */
#MainContent:has(.kl-page) { overflow-x: clip; }
/* Od 29. 8. 2026 PLOŠNĚ, ne jen na stránkách s .kl-page. Hlavička hp-nav,
modrý proužek i akční lišta jsou nově na celém webu, takže i obrana proti
posuvu do stran musí být všude — jinak stačí jediný přetékající prvek na
produktové stránce a celá stránka „plave".
`clip` a ne `hidden` schválně: nevytváří scroll kontejner, takže se
nerozbije position:sticky (hlavička, jumpnav na Moon PDP). */
body { overflow-x: clip; }
}
/* Pandectes při otevřené liště souhlasu zamkne scroll a kompenzuje šířku
scrollbaru: na nastaví inline `padding-right`. Na telefonu ale
žádný scrollbar není, takže tím jen ukrojí kus obsahu — naměřeno na
preview 62 px, tedy obsah 328 px v okně širokém 390. Web pak vypadá
posunutý doleva a po zavření lišty skočí zpátky.
Na mobilu tu kompenzaci rušíme. `overflow:hidden`, které appka nastavuje
zároveň, NECHÁVÁME — to je legitimní zámek scrollu pod modálem. */
@media (max-width: 1023px) {
body[style*="padding-right"] { padding-right: 0 !important; }
}
/* --- 1.2 Kontejner -------------------------------------------------------
1200 px + gutter 16 → obsah 1152 px (přesně jako .bts-container).
--wide (1300 px) použij JEN když navazuješ na header/footer/PDP theme. */
.kl-container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.kl-container--narrow { max-width: var(--container-narrow); }
.kl-container--wide { max-width: var(--container-theme); }
@media (min-width: 640px) {
.kl-container { padding-left: var(--gutter-lg); padding-right: var(--gutter-lg); }
}
/* --- 1.3 Sekce -----------------------------------------------------------
Rytmus 64 → 80 px (BTS py-16 sm:py-20). --hero 96 px na ≥1024. */
.kl-section { position: relative; padding-top: var(--section-y); padding-bottom: var(--section-y); }
.kl-section--tight { padding-top: var(--section-y-tight); padding-bottom: var(--section-y-tight); }
@media (min-width: 640px) {
.kl-section { padding-top: var(--section-y-lg); padding-bottom: var(--section-y-lg); }
}
@media (min-width: 1024px) {
.kl-section--hero { padding-top: var(--section-y-hero); padding-bottom: var(--section-y-hero); }
}
/* Tónovaná pozadí. PRAVIDLO Z BTS: bílá je výchozí (11 ze 17 sekcí),
tónovaná sekce přichází každou 2.–3. sekci a nikdy nejsou dvě stejně
tónované vedle sebe. Tmavá je na stránce právě JEDNA (viz §12). */
.kl-section--sky { background: var(--color-surface-sky); }
.kl-section--cream { background: var(--color-surface-cream); }
.kl-section--sky-faint { background: var(--color-surface-sky-faint); }
.kl-section--hero-bg { background: var(--gradient-hero); }
/* Gradient pod nabídkou: barevný „nádech" po bílé sekci (bts-bundles). */
.kl-section--offer {
background: linear-gradient(180deg, var(--kloki-sky-100), var(--kloki-cream-100) 55%, rgba(255, 255, 255, 0));
}
/* --- 1.4 Mřížka ----------------------------------------------------------
Vlastní mřížka, NE Dawn .grid (ta má gap 40 px a breakpointy 750/990). */
.kl-grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 768px) {
.kl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.kl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Split hero: text / vizuál. BTS má 1.45fr / 0.55fr, gap 56. */
.kl-split { display: grid; gap: var(--space-32); }
@media (min-width: 1024px) {
.kl-split { grid-template-columns: 1.45fr 0.55fr; gap: var(--space-56); align-items: center; }
.kl-split--even { grid-template-columns: 1fr 1fr; }
}
/* ==========================================================================
2 · TYPOGRAFIE
Nadpisy jsou 800 (ne 900 — řez 900 na webu neexistuje, viz R3).
Letter-spacing: display −0.025em, h2/h3/text normal (R4).
========================================================================== */
.kl-h1 {
margin: 0 0 var(--space-16);
font-size: var(--font-size-display);
line-height: var(--leading-display);
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-display);
color: var(--color-heading);
}
.kl-h2 {
margin: 0 0 var(--space-12);
font-size: var(--font-size-h2);
line-height: var(--leading-heading);
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-normal);
color: var(--color-heading);
}
.kl-h3 {
margin: 0 0 var(--space-8);
font-size: var(--font-size-h3);
line-height: 1.33;
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-normal);
color: var(--color-heading);
}
/* H3 uvnitř karty a v hlubších úrovních jde do navy (pravidlo R2:
H1/H2 = #1A4886 identita, H3+ = #062B78 hloubka). */
.kl-h3--deep { color: var(--color-heading-sub); }
.kl-h4 {
margin: 0 0 var(--space-8);
font-size: var(--font-size-h4);
line-height: var(--leading-sub);
font-weight: var(--font-weight-bold);
color: var(--color-heading-sub);
}
.kl-lead {
margin: 0;
font-size: var(--font-size-lead);
line-height: var(--leading-body);
color: var(--color-text-muted);
}
.kl-text {
margin: 0;
font-size: var(--font-size-body);
line-height: var(--leading-body);
color: var(--color-text);
}
.kl-text--sm { font-size: var(--font-size-body-sm); }
/* Nadpisový blok: nadpis max 1100, perex max 720, zarovnání vlevo.
.kl-heading--center centruje obojí. Vzor .bts-heading. */
.kl-heading { max-width: var(--measure-heading); margin: 0 0 var(--heading-gap-sm); }
.kl-heading__line { display: block; } /* každý řádek nadpisu zvlášť */
.kl-heading__lead { max-width: var(--measure-lead); margin: var(--space-10) 0 0; }
.kl-heading--center { margin-left: auto; margin-right: auto; text-align: center; }
.kl-heading--center .kl-heading__lead { margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .kl-heading { margin-bottom: var(--heading-gap); } }
/* Zvýraznění uvnitř nadpisu. KANONICKÝ VZOR CELÉHO WEBU: dvouřádkový nadpis,
druhý řádek magenta. Na tmavém pozadí magentu nahrazuje žlutá (viz §12). */
.kl-accent { color: var(--color-text-accent); }
.kl-accent-y { color: var(--color-brand-highlight); }
/* Žlutý marker („bez mobilu" v hero). Mírná rotace dělá dojem fixy. */
.kl-hl {
display: inline-block;
padding: 0 .18em;
border-radius: var(--radius-xs);
background: rgba(var(--kloki-yellow-400-rgb), .95);
transform: rotate(-1.5deg) scale(1.02);
}
/* Podtržení klíčové fráze v perexu. Na mobilu modré, od 1024 px žluté. */
.kl-underline {
font-weight: var(--font-weight-semibold);
text-decoration: underline;
text-decoration-color: var(--color-brand);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
@media (min-width: 1024px) { .kl-underline { text-decoration-color: var(--color-brand-highlight); } }
/* Eyebrow = barevný verzálkový štítek NAD nadpisem (bez pozadí).
Overline = drobný šedý popisek (zeď referencí, „JIŽ PŘES 18 000 RODIN"). */
.kl-eyebrow {
display: inline-block;
margin: 0 0 var(--space-10);
font-size: var(--font-size-eyebrow);
font-weight: var(--font-weight-bold);
line-height: var(--leading-compact);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-text-accent);
}
.kl-overline {
display: block;
margin: 0 0 var(--space-10);
font-size: var(--font-size-caption);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-overline);
}
/* Skryto vizuálně, čtečka to přečte („Krok 3" v timeline). */
.kl-sr {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* ==========================================================================
3 · TLAČÍTKA
Tvar je VŽDY pilulka. Theme --buttons-radius: 12px zůstává jen pro pole
formulářů a kupónové boxy (rozhodnutí R6).
Naměřeno: 18px/800, lh 1.55, padding 16/32, gap 10 — na mobilu i desktopu
STEJNĚ (BTS velikost tlačítka nezmenšuje).
========================================================================== */
.kl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-10);
padding: var(--space-16) var(--space-32);
border: 0;
border-radius: var(--radius-button);
font-family: inherit;
font-size: var(--font-size-button);
font-weight: var(--font-weight-bold);
line-height: var(--leading-button);
letter-spacing: var(--tracking-normal);
text-align: center;
text-decoration: none;
cursor: pointer;
transition: var(--transition-button);
}
.kl-btn:focus-visible {
outline: 3px solid var(--color-focus-ring);
outline-offset: 3px;
}
/* ⚠️ PRAVIDLO PRO CELOU KNIHOVNU: inline