/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved. */
/* Proprietary and confidential. See LICENSE in the project root. */
/* ==========================================================================
* KURNÍK PROFI — marketing site styles
* Warm farmyard design system. Consumes the --kp-* brand tokens defined in
* forge-tokens.css so everything themes in light/dark automatically.
* ========================================================================== */
.kp-site {
/* Společný boční okraj pro hero i konfigurátor. Dřív měly každý svůj
(`clamp(1.75rem, 3vw, 3rem)` vs `clamp(14px, 2.4vw, 48px)`), takže levá
hrana nadpisu hero a levá hrana panelu konfigurátoru nestály v jedné
svislici. */
--kp-gutter: clamp(16px, 3vw, 72px);
/* Strop šířky obsahu. Pozadí sekcí jde dál od kraje ke kraji, ale text,
panely a fotky se nad tímhle číslem už neroztahují — na širokém monitoru
byl plný rozliv nepohodlný na čtení a rozvržení se rozjelo od návrhu,
který počítá s ~1450 px. */
--kp-page-max: 1560px;
font-family: var(--kp-font-body);
color: var(--kp-ink);
position: relative;
isolation: isolate;
background: var(--kp-cream);
min-height: 100vh;
display: flex;
flex-direction: column;
/* `hidden` na jedné ose udělá z prvku scroll kontejner (druhá osa se
dopočítá na `auto`) — a scroll-driven animace `view()` by pak měřily
polohu vůči kontejneru, který se nikdy neposouvá, takže by odhalovací
animace zůstaly navždy na začátku a obsah neviditelný. `clip` ořízne
stejně, ale scroll kontejner nevytváří. Řádek nad ním je fallback pro
prohlížeče bez podpory `clip`. */
overflow-x: hidden;
overflow-x: clip;
}
.kp-site h1, .kp-site h2, .kp-site h3, .kp-site h4 {
font-family: var(--kp-font-head); font-weight: 500; line-height: 1.12; color: var(--kp-ink); margin: 0;
}
.kp-site a { color: inherit; text-decoration: none; }
.kp-hero__title,
.kp-hero__lead,
.kp-lead,
.kp-card p { overflow-wrap: break-word; }
/* ---- buttons ---- */
.kp-btn {
display: inline-flex; align-items: center; gap: 0.5rem;
/* Ovládací prvky jedou Outfit — Fredoka drží nadpisy a čísla. */
font-family: var(--kp-font-body); font-weight: 600; font-size: 1rem;
padding: 0.8rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
cursor: pointer; white-space: nowrap;
/* Motion Bible: `--kp-ease-out` pro příchody (hover = tlačítko se
„přiblíží"), rychlejší `--kp-ease-inout` pro stisk (přesun dolů a zase
nahoru). Dřív obojí jelo generickým `ease` — funkční, ale ne přesné. */
transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Primární akce je zelená — stejná zelená jako v hero. Web měl dřív dvě
„hlavní" barvy (terakota v sekcích, zelená v hero) a působil slepeně;
terakota zůstává na dřevo, ceny a varovné stavy.
Lesklý povrch, ne plochá barva: dva `inset` stíny navíc dělají z gradientu
HMOTU, ne nálepku — světlý lem nahoře (jako by na tlačítko dopadalo
světlo), tmavší nádech dole (jako by mělo tloušťku). `overflow: hidden`
+ `position: relative` drží níž definovaný pruh světla uvnitř tvaru
tlačítka (pilulka), ne přes jeho hranaté ohraničovací pole. */
.kp-btn--primary {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, var(--kp-a-2), var(--kp-a));
color: #fff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.35),
inset 0 -1px 0 rgba(0, 0, 0, 0.08),
0 6px 18px color-mix(in srgb, var(--kp-a) 32%, transparent);
}
.kp-btn--primary:hover {
background: linear-gradient(180deg, var(--kp-a-2), var(--kp-a-deep));
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
0 12px 28px color-mix(in srgb, var(--kp-a) 40%, transparent);
}
/* Pruh světla, který při hoveru pomalu přeběhne přes tlačítko — decentní,
ne blikající reklama: jede jen JEDNOU za hover (`transform`, ne
`animation: infinite`), 650 ms, `--kp-ease-out`. `pointer-events: none`,
ať pruh nepřebírá kliky tlačítku pod sebou. Skryté za `overflow: hidden`
výš, dokud nejede. */
.kp-btn--primary::before {
content: "";
position: absolute;
inset: -60% -20%;
background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.32) 50%, transparent 58%);
transform: translateX(-120%);
transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.kp-btn--primary:hover::before {
transform: translateX(120%);
}
:root[data-motion="reduced"] .kp-btn--primary::before { transition: none; }
/* Slepičí maskot uvnitř tlačítka — malovaná ikona z appky (`AppNavIcons`),
ne vlastní kresba navíc: appka i web tak nesou stejnou tvář. Vlastní
stín (appka má tenhle recept scopovaný na `.kpa-app`, sem nedosáhne),
a při hoveru se nepatrně natočí — živá reakce, ne strojová. */
.kp-btn__hen {
width: 22px;
height: 22px;
flex: 0 0 auto;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.kp-btn--lg .kp-btn__hen { width: 26px; height: 26px; }
.kp-btn:hover .kp-btn__hen { transform: rotate(-8deg) scale(1.08); }
:root[data-motion="reduced"] .kp-btn__hen { transition: none; }
.kp-btn--ghost { background: transparent; border-color: var(--kp-line); color: var(--kp-ink); }
.kp-btn--ghost:hover { background: var(--kp-cream-2); border-color: var(--kp-a-line); color: var(--kp-a-deep); transform: translateY(-2px); }
.kp-btn--yolk { background: var(--kp-yolk); color: var(--kp-ink); box-shadow: var(--kp-elev-1); }
.kp-btn--yolk:hover { transform: translateY(-2px); box-shadow: var(--kp-elev-2); filter: brightness(1.03); }
.kp-btn--lg { font-size: 1.08rem; padding: 0.95rem 1.8rem; }
/* Stisk musí být OKAMŽITÝ (žádné zpoždění tranzice tam, kde prst/kurzor
opravdu je) — proto vlastní, kratší `transition` jen pro tenhle stav,
ne spoléhání na základní 180ms z `.kp-btn`. Fyzicky věrohodné: tlačítko
se při stisku mírně zmáčkne (scale) a klesne zpátky na místo (žádný
zbytkový `translateY(-2px)` z hoveru). */
.kp-btn:active {
transform: translateY(0) scale(0.965);
transition-duration: 80ms;
}
.kp-btn:focus-visible { outline: 3px solid var(--kp-a-line); outline-offset: 3px; }
/* ---- header ----
Kabát je převzatý z `/reference`: verzálky, prostrkání, tenká linka pod
aktivní položkou. Na referencích to bylo jen tam, klient to chce všude —
zůstává jen jiná barevnost, protože zlatá patří té jedné stránce.
Plocha lišty MIZÍ DOPRAVA. Plný pruh přes celou šířku dělá z hlavičky
krabici nalepenou na stránku; přeliv nechá pravou stranu dýchat a značka
vlevo si přitom podklad drží.
Vpravo ale nekončí na nule, nýbrž na třetině. Na referencích je pod pravou
stranou fotka, tady se pod hlavičkou roluje TEXT — a při nule mu bylo vidět
do řádků mezi kulatými tlačítky. Dojem „do ztracena" nese hlavně rozostření
níž, které se do ztracena opravdu dostane. */
.kp-header {
position: sticky; top: 0; z-index: 50;
background: linear-gradient(90deg,
color-mix(in srgb, var(--kp-cream) 92%, transparent) 0%,
color-mix(in srgb, var(--kp-cream) 86%, transparent) 52%,
color-mix(in srgb, var(--kp-cream) 58%, transparent) 78%,
color-mix(in srgb, var(--kp-cream) 34%, transparent) 100%);
}
/* Rozostření musí mizet spolu s barvou, jinak zůstane vpravo ostrá hrana
rozmazané plochy nad ostrým obsahem. `backdrop-filter` se prolnout nedá,
proto sedí na vlastní vrstvě s maskou.
Síla jde z posuvníku „Sklo“, ne z pevné hodnoty: násobek drží výchozí
vzhled, protože `--kp-glass-blur` je při výchozí síle 0,6 asi 24 px. */
.kp-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
backdrop-filter: blur(calc(var(--kp-glass-blur, 24px) * 0.5));
-webkit-backdrop-filter: blur(calc(var(--kp-glass-blur, 24px) * 0.5));
/* Maska nekončí na nule ani tady: vpravo zůstává třetina síly, takže se
text rolující pod lištou rozmaže natolik, že se nedá číst, a přitom je
vidět, že plocha slábne. Na nule tam byl ostrý výřez do stránky. */
mask-image: linear-gradient(90deg, #000 0%, #000 52%,
rgba(0, 0, 0, 0.62) 82%, rgba(0, 0, 0, 0.34) 100%);
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%,
rgba(0, 0, 0, 0.62) 82%, rgba(0, 0, 0, 0.34) 100%);
}
/* Vlas pod lištou mizí doprava taky — jinak by čára pokračovala tam, kde
plocha už dávno skončila, a byla by z ní ta hrana, které se vyhýbáme. */
.kp-header::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg,
var(--kp-line-soft) 0%, var(--kp-line-soft) 48%, transparent 88%);
}
/* Uklizení hlavičky při rolování dolů — jen telefon. Třídu nasazuje
`kp-site.js` podle směru rolování; nahoru se vrací okamžitě, takže se
k navigaci dá dostat bez cesty na začátek stránky. */
@media (max-width: 900px) {
.kp-header { transition: transform var(--t-med, 0.28s) ease; will-change: transform; }
:root.kp-head-off .kp-header { transform: translateY(-100%); }
:root[data-motion="reduced"] .kp-header { transition: none; }
/* S OTEVŘENOU nabídkou se `will-change` i posun ruší. Není to kosmetika:
`will-change: transform` dělá z hlavičky vztažný rámec pro `position:
fixed`, takže vysouvací panel uvnitř ní zůstal uvězněný v liště —
místo přes celou výšku obrazovky se vykreslil jako krabička v rohu. */
:root.kp-menu-open .kp-header { will-change: auto; transform: none; }
}
/* Šířka lišty se počítá TOUTÉŽ rovnicí jako sekce a patička, ne vlastním
číslem. Na 1600 px stála značka na 234 a obsah stránky na 48 — lišta
plavala o dvě stě pixelů uvnitř. Strop je na OBSAHU (`+ 2 × okraj`),
takže po odečtení okraje vyjde levá hrana loga přesně nad levou hranou
nadpisů. Svislé odsazení zůstává vlastní: lišta je tenká. */
/* Bezpečná zóna zářezu. Od zapnutí `viewport-fit=cover` (App.razor) sahá
obsah až do rohů displeje — a na iPhonu s Dynamic Islandem to v aplikaci
přidané na plochu znamenalo hlavičku POD ostrovem, tedy neviditelný
hamburger. Přidává se jen odsazení, výška hlavičky se nefixuje: na
telefonu bez zářezu jsou všechny tři hodnoty nulové a nic se nemění.
Vodorovné odsazení není zbytečné — na šířku leží ostrov u boční hrany
a bez něj by se pod něj schoval hamburger vpravo (nebo logo vlevo). */
.kp-header__inner {
max-width: calc(var(--kp-page-max, 1560px) + 2 * var(--kp-gutter, 24px));
margin: 0 auto;
padding: calc(0.7rem + env(safe-area-inset-top, 0px))
calc(var(--kp-gutter, 24px) + env(safe-area-inset-right, 0px))
0.7rem
calc(var(--kp-gutter, 24px) + env(safe-area-inset-left, 0px));
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.kp-brand { display: inline-flex; align-items: center; gap: 0.65rem; }
/* Zlatý kohout z loga.
Na světlé liště je světlá zlatá proti krému málo kontrastní, proto jde
o odstín dolů a dostane měkký hnědý stín — ne obrys, ten by z kresby
udělal nálepku. Na fotce v hero se naopak nechává v plné zlaté a stín
je tmavý, aby se oddělil od oblohy. */
.kp-brand__logo {
height: 44px;
width: auto;
flex: none;
object-fit: contain;
filter:
drop-shadow(0 1px 1px rgba(58, 42, 34, 0.55))
drop-shadow(0 2px 5px rgba(58, 42, 34, 0.28))
brightness(0.87) saturate(1.16);
}
[data-theme="dark"] .kp-brand__logo {
filter:
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
/* Oba řádky značky sdílejí JEDEN sloupec mřížky, takže mají společnou šířku
a `kpBrandFit` má proti čemu měřit. Ve flexu by se popisek roztáhl na
šířku obsahu a rozdíl by zmizel. */
.kp-brand__text {
display: grid;
grid-template-columns: max-content;
line-height: 1.05;
row-gap: 0.16rem;
}
/* Značka verzálkami, dva řádky — jak na referencích. Prostrkání dělá tu
práci, kterou jinde dělá tučnost: název je klidný a přesto se čte první. */
/* Rodina, tučnost i prostrkání sedí v `forge-tokens.css` — jedno místo pro
celý web. Tady zůstává jen velikost a barva, tedy to, co se v hlavičce
liší od loga použitého jinde. Naměřeno z referencí: 1,32 rem. */
.kp-brand__name {
font-size: 1.32rem;
color: var(--kp-ink);
}
.kp-brand__tag { color: var(--kp-ink-faint); }
.kp-nav { display: flex; align-items: center; gap: 1.05rem; }
/* Položky verzálkami, bez pilulky. Pilulka pod kurzorem dělala z navigace
řadu tlačítek; tady se hýbe jen barva a pod aktivní položkou leží vlas. */
.kp-nav__link {
position: relative;
font-family: var(--kp-font-body);
font-weight: 600;
font-size: 0.8125rem;
letter-spacing: 0.11em;
text-transform: uppercase;
padding: 0.45rem 0.15rem;
border-radius: 0;
color: var(--kp-ink-soft);
transition: color var(--t-fast, .15s) ease;
}
.kp-nav__link:hover { color: var(--kp-a, #3C7A34); background: none; }
/* Vlas pod položkou přesahuje text o 4 px na každou stranu a na koncích
slábne — plná čára by vypadala jako podtržítko z textového pole.
Nese ho KAŽDÁ položka, ne jen aktivní: pod kurzorem vyjede ze středu ven,
aktivní ho má vytažený natrvalo. Do v94 se pod kurzorem měnila jen barva
(a na jedné položce dokonce naskakovalo pozadí), takže se najetí buď
neprojevilo, nebo vypadalo jako cizí prvek. Roste `transform`, ne šířka —
to prohlížeč skládá na grafické kartě a nepřepočítává rozvržení. */
/* `.kp-site a.kp-nav__link--active`, ne jen `.kp-nav__link--active`:
o kus výš stojí `.kp-site a { color: inherit }` a to je se specifičností
(0,1,1) SILNĚJŠÍ než samotná třída (0,1,0). Aktivní položka proto ve
světlém motivu dědila barvu okolního textu a zelená se neprojevila;
v tmavém motivu ji zachraňovalo `[data-theme="dark"] .kp-nav__link--active`
(0,2,0), takže vada byla vidět jen ve dne. Táž past a totéž řešení jako
u `.kp-site a.kp-nav__cta` níž. */
.kp-site a.kp-nav__link--active,
.kp-site a.kp-nav__link--active:hover { color: var(--kp-a, #3C7A34); }
.kp-nav__link::after {
content: "";
position: absolute;
left: -4px; right: -4px; bottom: 0.05rem;
height: 1px;
background: linear-gradient(90deg,
color-mix(in oklab, var(--kp-a, #3C7A34) 12%, transparent),
var(--kp-a, #3C7A34) 22%,
var(--kp-a, #3C7A34) 78%,
color-mix(in oklab, var(--kp-a, #3C7A34) 12%, transparent));
transform: scaleX(0);
transform-origin: center;
opacity: 0;
transition:
transform var(--kp-dur, 320ms) var(--kp-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
opacity var(--kp-dur, 320ms) ease;
}
.kp-nav__link:hover::after,
.kp-nav__link:focus-visible::after,
.kp-nav__link--active::after {
transform: scaleX(1);
opacity: 1;
}
/* Aktivní vlas se pod kurzorem nepřekresluje — je už vytažený. */
.kp-nav__link--active::after { transition: none; }
:root[data-motion="reduced"] .kp-nav__link::after { transition: none; }
[data-theme="dark"] .kp-nav__link:hover,
[data-theme="dark"] .kp-nav__link--active { color: var(--kp-a-2, #7FBF5F); }
[data-theme="dark"] .kp-nav__link--active::after {
background: linear-gradient(90deg,
color-mix(in oklab, var(--kp-a-2, #7FBF5F) 12%, transparent),
var(--kp-a-2, #7FBF5F) 22%,
var(--kp-a-2, #7FBF5F) 78%,
color-mix(in oklab, var(--kp-a-2, #7FBF5F) 12%, transparent));
}
.kp-nav__link--smart { color: var(--kp-sky); }
/* Vstup do aplikace — odlišený rámečkem, ať je na první pohled vidět, že vede
jinam než ostatní položky (do /app, ne na další stránku webu). */
.kp-nav__link--app {
color: var(--kp-leaf-dark);
border: 1px solid var(--kp-line);
}
/* Pilulka pod kurzorem tu BYLA a je pryč: jediná položka v řadě, která si
pod kurzorem brala pozadí, četla se jako cizí tlačítko. Chová se teď jako
ostatní — barva a vlas. */
.kp-nav__link--app:hover { color: var(--kp-leaf-dark); }
/* Zelené pill CTA v pravém rohu hlavičky („Přihlásit se" pro hosta,
„Aplikace" pro přihlášeného).
Vzhled je tu, ne u překryvného kabátu, a je to podstatné: kabát
(`.kp-header--overlay`) nosí jenom domovská stránka a /reference. Dokud tu
tahle pravidla nebyla, spadlo tlačítko na zbytku webu na základní
`.kp-btn--primary` — hnědý text na zeleném gradientu, průhledný okraj a
místo zeleného záření bílá linka nahoře. Tedy jiné tlačítko na každé druhé
stránce.
Bílý text drží v obou motivech, protože gradient jde z akcentu a ten je
v tmavém motivu světlejší jen o tolik, aby text pořád nesl.
Selektor je schválně `.kp-site a.kp-nav__cta`, ne jen `.kp-nav__cta`:
o kus výš stojí `.kp-site a { color: inherit }` a to je SPECIFIČTĚJŠÍ
než samotná třída (0,1,1 proti 0,1,0), takže by tlačítko podědilo barvu
okolního textu — hnědou. Právě tohle drželo `.kp-btn--primary` s jeho
`color: #fff` mimo hru. Je to zavedený zvyk tohohle souboru, viz
`.kp-site a.kp-cta--primary` v kp-hero.css. */
.kp-site a.kp-nav__cta,
.kp-nav__cta {
margin-left: 0.4rem;
background: linear-gradient(180deg, var(--kp-a-2), var(--kp-a));
border-color: var(--kp-a-deep);
color: #FFFFFF;
box-shadow: 0 6px 18px rgba(30, 70, 26, 0.38);
transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.2s ease;
}
.kp-site a.kp-nav__cta:hover,
.kp-nav__cta:hover {
background: linear-gradient(180deg, var(--kp-a-2), var(--kp-a-deep));
transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(30, 70, 26, 0.5);
}
:root[data-motion="reduced"] .kp-nav__cta:hover { transform: none; }
.kp-themebtn {
position: relative; width: 40px; height: 40px; border-radius: 999px;
border: 1px solid var(--kp-line); background: var(--kp-cream-2); cursor: pointer;
display: grid; place-items: center; font-size: 1rem; color: var(--kp-ink-soft);
transition: background .15s ease, transform .15s ease;
}
.kp-themebtn:hover { background: var(--kp-yolk-soft); transform: rotate(-8deg); }
/* Tlačítko Vzhledu drží stejný tvar jako přepínač motivu, jen se netočí —
posuvníky uvnitř ikony by při rotaci působily jako závada. */
.kp-themebtn--tweaks svg { width: 1.05rem; height: 1.05rem; }
.kp-themebtn--tweaks:hover { transform: none; background: var(--kp-a-soft); color: var(--kp-a-deep); }
.kp-themebtn--tweaks.is-on { background: var(--kp-a-soft); border-color: var(--kp-a-line); color: var(--kp-a-deep); }
[data-theme="dark"] .kp-themebtn--tweaks:hover,
[data-theme="dark"] .kp-themebtn--tweaks.is-on { color: var(--kp-a-2); }
.kp-themebtn__moon { display: none; }
[data-theme="dark"] .kp-themebtn__sun { display: none; }
[data-theme="dark"] .kp-themebtn__moon { display: inline; }
/* ---- volba jazyka ----
Tvarově je to sourozenec přepínače motivu (kruh 40 px, tentýž lem i plocha),
jen širší, protože nese dvě písmena. Kód jazyka je v liště schválně místo
vlajky: vlajka znamená ZEMI, ne jazyk — němčinou mluví i Rakousko a
Švýcarsko a angličtina žádnou vlastní vlajku nemá. */
.kp-lang { position: relative; }
.kp-lang__btn {
display: flex; align-items: center; gap: 6px;
height: 40px; padding: 0 12px; border-radius: 999px;
border: 1px solid var(--kp-line); background: var(--kp-cream-2);
color: var(--kp-ink-soft); cursor: pointer;
font: inherit; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
transition: background var(--t-fast, .15s) ease, color var(--t-fast, .15s) ease,
border-color var(--t-fast, .15s) ease;
}
.kp-lang__btn svg { width: 1.02rem; height: 1.02rem; }
.kp-lang__btn:hover { background: var(--kp-a-soft); border-color: var(--kp-a-line); color: var(--kp-a-deep); }
.kp-lang.is-open .kp-lang__btn { background: var(--kp-a-soft); border-color: var(--kp-a-line); color: var(--kp-a-deep); }
[data-theme="dark"] .kp-lang__btn:hover,
[data-theme="dark"] .kp-lang.is-open .kp-lang__btn { color: var(--kp-a-2); }
/* Nabídka jazyků je DESKA, ne rámeček: plná plocha, světlo na horní hraně
a hluboký měkký stín. V tmavém motivu měla jen lem a stín, takže na noční
fotce splývala s pozadím a vypadala jako díra — proto tu má vlastní,
světlejší povrch než okolní plochy a viditelnou horní hranu. */
.kp-lang__menu {
position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
margin: 0; padding: 7px; list-style: none;
min-width: 178px;
border-radius: 16px;
border: 1px solid var(--kp-line);
background: linear-gradient(180deg in oklab, var(--kp-cream-2) 0%, var(--kp-cream) 100%);
box-shadow: 0 20px 44px rgba(70, 52, 25, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
animation: kp-lang-in var(--t-fast, .16s) var(--ease-out, ease);
transform-origin: top right;
}
@keyframes kp-lang-in {
from { opacity: 0; transform: translateY(-6px) scale(0.98); }
to { opacity: 1; transform: none; }
}
:root[data-motion="reduced"] .kp-lang__menu { animation: none; }
[data-theme="dark"] .kp-lang__menu {
border-color: color-mix(in oklab, var(--kp-ink, #F4E9DC) 16%, transparent);
background: linear-gradient(180deg in oklab,
color-mix(in oklab, var(--kp-cream-3, #33281F) 88%, #FFFFFF) 0%,
var(--kp-cream-2, #2A211A) 100%);
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
/* Šipka k tlačítku. Bez ní deska visí ve vzduchu a není jasné, co ji vyvolalo. */
.kp-lang__menu::before {
content: "";
position: absolute;
top: -6px; right: 18px;
width: 11px; height: 11px;
transform: rotate(45deg);
background: var(--kp-cream-2);
border-left: 1px solid var(--kp-line);
border-top: 1px solid var(--kp-line);
border-radius: 2px 0 0 0;
}
[data-theme="dark"] .kp-lang__menu::before {
background: color-mix(in oklab, var(--kp-cream-3, #33281F) 88%, #FFFFFF);
border-color: color-mix(in oklab, var(--kp-ink, #F4E9DC) 16%, transparent);
}
.kp-lang__item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 10px; border: 0; border-radius: 10px;
background: transparent; color: var(--kp-ink); cursor: pointer;
font: inherit; font-size: 0.94rem; text-align: left;
}
.kp-lang__item:hover { background: var(--kp-a-soft); }
/* Zvolený jazyk má PLOCHU, ne jen jinou barvu písma. V tmavém motivu byl
rozdíl mezi zeleným a krémovým textem na tmavém podkladu tak malý, že se
nedalo poznat, co je zvolené. */
.kp-lang__item.is-on {
color: var(--kp-a-deep);
font-weight: 700;
background: color-mix(in oklab, var(--kp-a, #3C7A34) 12%, transparent);
}
[data-theme="dark"] .kp-lang__item.is-on {
color: var(--kp-a-2);
background: color-mix(in oklab, var(--kp-a-2, #7FBF5F) 16%, transparent);
}
.kp-lang__item:focus-visible {
outline: 2px solid var(--kp-a, #3C7A34);
outline-offset: -2px;
}
.kp-lang__itemcode {
min-width: 26px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em;
color: var(--kp-ink-faint);
}
.kp-lang__item.is-on .kp-lang__itemcode { color: inherit; }
/* Na telefonu je nabídka v rozbaleném menu, kde je místa dost — ať se
neotevírá mimo obrazovku. */
@media (max-width: 900px) {
.kp-lang__menu { right: auto; left: 0; }
}
/* Hamburger se přehne v křížek. Tři pruhy: krajní se sklopí do X, prostřední
zmizí — proto má vlastní krytí, ne `display: none` (to by se nedalo
animovat a přepnutí by bylo cuknutí). */
.kp-burger {
display: none; position: relative; z-index: 2;
flex-direction: column; justify-content: center; gap: 5px;
width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; padding: 10px;
}
.kp-burger span {
height: 2px; border-radius: 2px; background: var(--kp-ink);
transition: transform var(--t-med, .24s) var(--ease-out, ease), opacity var(--t-fast, .15s) ease;
}
.kp-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kp-burger.is-open span:nth-child(2) { opacity: 0; }
.kp-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
:root[data-motion="reduced"] .kp-burger span { transition: none; }
/* Zastínění za vysunutou nabídkou. Není to jen ztmavení — rozostří i obsah
pod sebou, takže se pozornost přesune na panel a stránka pod ním
nekonkuruje. */
.kp-scrim {
position: fixed; inset: 0; z-index: 45;
border: 0; padding: 0; cursor: pointer;
background: color-mix(in oklab, var(--kp-ink, #221D16) 42%, transparent);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
animation: kp-scrim-in var(--t-med, .24s) var(--ease-out, ease);
}
@keyframes kp-scrim-in { from { opacity: 0; } to { opacity: 1; } }
:root[data-motion="reduced"] .kp-scrim { animation: none; }
/* Zamknutí stránky pod otevřenou nabídkou — bez toho se za panelem roluje
obsah a na telefonu z toho je dojem, že se rozbilo rolování. */
:root.kp-menu-open, :root.kp-menu-open body { overflow: hidden; }
/* ---- main / sections ----
Rytmus sekcí: 96 px svisle, 24 px do stran (osmibodová mřížka). Dřív tu
bylo 4.5rem/1.5rem — 72 px není násobek osmi a rozdíl proti sousedním
pásům byl vidět jako „skoro zarovnané". */
.kp-main { flex: 1; }
/* Jedna šířka pro celou stránku. Sekce měly 1180 px, konfigurátor 1560 —
levé hrany nadpisů tak nestály v jedné svislici a při scrollování se obsah
viditelně „nadechoval". Strop i boční okraj teď berou obě z týchž
proměnných na `.kp-site`, takže se mění na jednom místě a na každém
rozlišení vyjdou stejně. */
/* Strop je na OBSAHU, ne na krabici: `+ 2 × gutter` znamená, že po odečtení
bočního okraje zbyde přesně `--kp-page-max`. Bez toho vycházel obsah sekcí
o dvojnásobek okraje užší než konfigurátor (na 1920 px 1445 vs 1560), který
staví obráceně — plná šířka s okrajem a strop až na potomcích. Obojí je
obhajitelné, dohromady to dělalo ten nejednotný rytmus. */
.kp-section {
max-width: calc(var(--kp-page-max, 1560px) + 2 * var(--kp-gutter, 24px));
margin: 0 auto;
padding: var(--kp-sect-pad, 4.6rem) var(--kp-gutter, 24px);
}
/* Hlavička sekce je široká jako všechno ostatní — po zúžení na 62 rem měla
jinou levou i pravou hranu než mřížka pod ní a byl to přesně ten nejednotný
rytmus, na který si klient stěžoval. Čitelnost řeší strop na ODSTAVCI, ne
na celém bloku: text se láme dřív, ale blok drží svislici. */
.kp-section-head > .kp-lead { max-width: 62ch; margin-inline: auto; }
.kp-section--tight { padding-top: var(--kp-sp-4); }
/* Pás jiné barvy: místo tvrdé linky nahoře i dole měkký přechod do krému.
Přechod mezi sekcemi má být plynulý, ne švem. */
.kp-band { position: relative; background: var(--kp-cream-2); }
.kp-band::before,
.kp-band::after {
content: ""; position: absolute; inset-inline: 0; height: var(--kp-sp-5);
pointer-events: none;
}
.kp-band::before { top: 0; background: linear-gradient(180deg, var(--kp-cream), transparent); }
.kp-band::after { bottom: 0; background: linear-gradient(0deg, var(--kp-cream), transparent); }
/* Pozicované pseudoprvky se kreslí nad neposicovaným obsahem — bez tohohle
by přechod ležel přes první a poslední řádek textu v pásu. */
.kp-band > .kp-section { position: relative; z-index: 1; }
.kp-eyebrow {
display: inline-flex; align-items: center; gap: .45rem; font-family: var(--kp-font-display);
font-weight: 600; font-size: 0.8rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--kp-a-deep); background: var(--kp-a-soft); padding: .4rem .9rem; border-radius: 999px;
border: 1px solid var(--kp-a-line);
}
[data-theme="dark"] .kp-eyebrow { color: var(--kp-a-2); }
.kp-h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -0.015em; margin: var(--kp-sp-2) 0 var(--kp-sp-1); }
.kp-lead { font-size: 1.1rem; color: var(--kp-ink-soft); line-height: 1.65; max-width: 60ch; }
.kp-section-head { text-align: center; display: grid; justify-items: center; margin-bottom: var(--kp-sp-6); }
.kp-section-head .kp-lead { margin-inline: auto; }
/* ---- hero ---- */
.kp-hero { position: relative; overflow: hidden; }
.kp-hero__inner {
max-width: 1180px; margin: 0 auto; padding: 4rem 1.5rem 3rem;
display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; align-items: center;
}
.kp-hero__title { font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.04; letter-spacing: -0.01em; }
.kp-hero__lead { margin: 1.3rem 0 1.8rem; font-size: 1.18rem; color: var(--kp-ink-soft); line-height: 1.6; max-width: 46ch; }
.kp-hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
/* ---- hero s fotografií (full-bleed) ------------------------------------
Obraz je vrstva pod textem, ne sousední sloupec. Text drží LEVOU třetinu,
kterou fotka nechává volnou; čitelnost zajišťuje krémový scrim zleva
(17_HTML_Composition_Bible.md §Scrim recept) — ne ztmavení celého snímku,
to by ze zlatého rána udělalo šeď.
`object-position: right center` drží kurník v záběru i při jiném poměru
stran okna; bez toho by se při širokém okně ořízl pravý okraj i se
subjektem. */
.kp-hero--photo { display: grid; align-items: center; min-height: clamp(520px, 68vh, 720px); }
.kp-hero--photo > * { grid-area: 1 / 1; }
/* `align-items: center` platí i na obraz a scrim — a prázdný scrim by se tím
srazil na nulovou výšku, takže by text ležel přímo na fotce. Obě vrstvy
proto explicitně roztáhneme přes celou buňku. */
.kp-hero__media,
.kp-hero__scrim { align-self: stretch; justify-self: stretch; }
.kp-hero__media { display: block; height: 100%; }
.kp-hero__media img {
width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block;
}
.kp-hero__scrim {
pointer-events: none;
background: linear-gradient(90deg,
color-mix(in srgb, var(--kp-cream) 94%, transparent) 0%,
color-mix(in srgb, var(--kp-cream) 72%, transparent) 34%,
color-mix(in srgb, var(--kp-cream) 0%, transparent) 62%);
}
/* Kopie sedí v levé třetině; grid rodiče ji drží přes obraz. */
.kp-hero--photo .kp-hero__inner { grid-template-columns: minmax(0, 46%); width: 100%; }
.kp-hero--photo .kp-hero__title { text-shadow: 0 1px 0 color-mix(in srgb, var(--kp-cream) 60%, transparent); }
/* Tablet — text si vezme víc místa, ale zůstává vlevo; scrim je zleva,
vycentrovaný text by z něj vypadl na osvětlenou louku. */
@media (max-width: 1024px) {
.kp-hero--photo .kp-hero__inner { grid-template-columns: minmax(0, 62%); text-align: start; }
.kp-hero--photo .kp-hero__lead { margin-inline: 0; }
.kp-hero--photo .kp-hero__cta,
.kp-hero--photo .kp-hero__trust { justify-content: flex-start; }
}
/* Mobil — obraz nahoře (4:5 výřez), text POD ním na krému. Text přes fotku
by na telefonu musel přebít oblohu i trávu naráz; takhle je čitelnost
jistá a scrim jen měkce spojí obraz s pozadím stránky. */
@media (max-width: 640px) {
.kp-hero--photo { display: block; min-height: 0; }
.kp-hero--photo > * { grid-area: auto; }
.kp-hero__media img { aspect-ratio: 4 / 5; height: auto; object-position: center; }
.kp-hero__scrim {
position: absolute; inset-inline: 0; top: calc(100vw * 1.25 - 90px); height: 90px;
background: linear-gradient(0deg,
var(--kp-cream) 0%,
color-mix(in srgb, var(--kp-cream) 0%, transparent) 100%);
}
.kp-hero--photo .kp-hero__inner { grid-template-columns: 1fr; padding-top: 1.5rem; }
.kp-hero--photo .kp-hero__title { text-shadow: none; }
}
/* ---- hen mascot animation ---- */
.kp-hen { display: block; will-change: transform; }
.kp-hen--bob { animation: kp-bob 3.2s ease-in-out infinite; }
.kp-hen--bob.kp-hen--d1 { animation-delay: .4s; }
.kp-hen--bob.kp-hen--d2 { animation-delay: .9s; }
@keyframes kp-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }
/* ---- feature / value cards ----
Karta má tři vrstvy, které dělají „drahý" dojem: jemný přechod v ploše,
světlý vlas na horní hraně (jako by na ni dopadalo světlo) a stín, který
při hoveru vystoupá o jeden stupeň žebříku. */
.kp-grid { display: grid; gap: var(--kp-sp-3); }
.kp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.kp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kp-card {
position: relative; overflow: hidden;
/* Karta je „mléčné sklo": krytí bere z globálního tokenu, takže na ni
platí posuvník „Sklo" stejně jako na panely v hero. */
background:
linear-gradient(180deg, var(--kp-glass-light), var(--kp-cream-2)),
radial-gradient(120% 80% at 50% -20%, var(--kp-a-soft), transparent 62%);
border: 1px solid var(--kp-line); border-radius: var(--kp-radius-lg);
padding: var(--kp-sp-4); box-shadow: var(--kp-elev-1);
transition: transform .28s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
box-shadow .28s ease, border-color .28s ease;
}
.kp-card::before {
content: ""; position: absolute; inset: 0 0 auto; height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 70%, transparent), transparent);
opacity: .8;
}
.kp-card:hover { transform: translateY(-6px); box-shadow: var(--kp-elev-2); border-color: var(--kp-a-line); }
.kp-card__icon {
width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
font-size: 1.6rem; margin-bottom: var(--kp-sp-2);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kp-ink) 8%, transparent);
transition: transform .28s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.kp-card:hover .kp-card__icon { transform: translateY(-2px) rotate(-4deg); }
.kp-card__icon svg { width: 1.65rem; height: 1.65rem; }
.kp-card__icon--barn { background: var(--kp-barn-soft); color: var(--kp-barn); }
.kp-card__icon--yolk { background: var(--kp-yolk-soft); color: #B9820F; }
.kp-card__icon--leaf { background: var(--kp-leaf-soft); color: var(--kp-leaf-dark); }
.kp-card__icon--sky { background: var(--kp-sky-soft); color: var(--kp-sky); }
[data-theme="dark"] .kp-card__icon--yolk { color: var(--kp-yolk); }
.kp-card h3 { font-size: 1.15rem; line-height: 1.25; margin-bottom: var(--kp-sp-1); }
.kp-card p { color: var(--kp-ink-soft); line-height: 1.6; font-size: 0.96rem; }
/* ---- steps ----
Čtyři kroky čtou jako cesta, ne jako čtyři nezávislé kartičky: mezi
kolečky vede tenká linka, poslední ji nemá. Na mobilu se linka vypíná
(sloupec pod sebou by ji vedl napříč textem). */
.kp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kp-sp-3); }
.kp-step { position: relative; text-align: center; }
.kp-step:not(:last-child)::before {
content: ""; position: absolute; top: 26px; left: calc(50% + 40px); right: calc(-50% + 40px); height: 2px;
background: linear-gradient(90deg, var(--kp-a-line), color-mix(in srgb, var(--kp-line) 70%, transparent));
border-radius: 999px;
}
.kp-step__num {
position: relative; width: 52px; height: 52px; border-radius: 999px; margin: 0 auto var(--kp-sp-2);
display: grid; place-items: center;
font-family: var(--kp-font-display); font-weight: 700; font-size: 1.3rem; color: #fff;
background: linear-gradient(180deg, var(--kp-a-2), var(--kp-a));
box-shadow: 0 6px 16px color-mix(in srgb, var(--kp-a) 34%, transparent),
inset 0 1px 0 rgba(255, 255, 255, .35);
transition: transform .28s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.kp-step:hover .kp-step__num { transform: translateY(-3px) scale(1.05); }
.kp-step h3, .kp-step h4 { font-size: 1.05rem; margin-bottom: var(--kp-sp-1); }
.kp-step p { font-size: .92rem; color: var(--kp-ink-soft); line-height: 1.55; }
/* Úzký notebook: lišta se ještě vejde, ale jen když se stáhne mezera
a prostrkání. Ubírat položky by znamenalo mít dvě navigace. */
@media (min-width: 1081px) and (max-width: 1240px) {
.kp-nav { gap: 0.7rem; }
.kp-nav__link { font-size: 0.775rem; letter-spacing: 0.08em; }
.kp-brand__name { font-size: 1.1rem; letter-spacing: 0.08em; }
.kp-brand__tag { letter-spacing: 0.24em; }
}
/* ---- responsive ---- */
@media (max-width: 900px) {
.kp-hero__inner { grid-template-columns: 1fr; text-align: center; }
.kp-hero__lead { margin-inline: auto; }
.kp-hero__cta, .kp-hero__trust { justify-content: center; }
.kp-grid--3, .kp-grid--4 { grid-template-columns: repeat(2, 1fr); }
.kp-steps { grid-template-columns: repeat(2, 1fr); gap: var(--kp-sp-4) var(--kp-sp-3); }
/* Spojnice kroků dává smysl jen v jedné řadě; ve dvou sloupcích by
vedla z konce řádku doprava do prázdna. */
.kp-step:not(:last-child)::before { display: none; }
}
/* ---- nabídka na telefonu a tabletu ----
Vysouvá se ZPRAVA přes celou výšku, ne shora jako roleta. Roleta na výšku
obrazovky nedosáhla, takže pod ní zůstal proužek stránky a panel vypadal
jako nedovřená zásuvka.
Zlom je na 1080 px, ne na původních 720. Verzálky s prostrkáním jsou širší
než dřívější text: změřeno na 1000 px vycházela značka 250 px, položky
811 px, ovládání a tlačítko dalších ~310 — lišta přetékala o dvě stě pixelů,
aniž by se nabídka schovala. Mezi 1081 a 1240 px se ještě stahuje mezera
a prostrkání (viz blok níž), aby se to vešlo bez ubírání položek.
Uvnitř je jedna mřížka: každý odkaz na celý řádek, pak tlačítko a nakonec
ovládání v řádku vedle sebe. Pořadí dělá `order`, ne pořadí v HTML — na
desktopu má lišta jiné pořadí než panel a duplikovat kvůli tomu značku by
znamenalo dvě místa, kde se dá zapomenout na položku. */
@media (max-width: 1080px) {
/* Křížek plave NAD panelem (panel má 46). Bez toho ho panel překryl a
zavřít se dalo jen klepnutím vedle nebo Escapem — u nabídky přes celou
obrazovku je to past, ne zkratka. */
.kp-burger { display: flex; z-index: 47; }
.kp-nav {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 46;
width: min(86vw, 372px);
flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: center;
gap: 0;
/* Zářez: panel je `fixed` až do rohů displeje, takže si horní i dolní
bezpečnou zónu musí přičíst sám — jinak první odkaz leží pod
ostrovem a poslední pod indikátorem gesta. */
padding: calc(clamp(4.5rem, 12vh, 6.5rem) + env(safe-area-inset-top, 0px))
calc(clamp(1.4rem, 6vw, 2.2rem) + env(safe-area-inset-right, 0px))
calc(clamp(1.6rem, 5vh, 2.4rem) + env(safe-area-inset-bottom, 0px))
clamp(1.4rem, 6vw, 2.2rem);
background: linear-gradient(180deg in oklab,
var(--kp-cream-2) 0%, var(--kp-cream) 62%, var(--kp-cream-3, var(--kp-cream)) 100%);
border-left: 1px solid var(--kp-line-soft);
box-shadow: -24px 0 60px rgba(58, 42, 34, 0.18);
transform: translateX(104%);
transition: transform var(--t-med, .28s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
overflow-y: auto;
overscroll-behavior: contain;
}
[data-theme="dark"] .kp-nav { box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5); }
.kp-nav.is-open { transform: none; }
:root[data-motion="reduced"] .kp-nav { transition: none; }
/* Každý odkaz na vlastní řádek, oddělený vlasem. Aktivní položka má
svislý pruh vlevo — vodorovná linka pod textem se ve sloupci plete
s oddělovačem řádků. */
.kp-nav__link {
flex: 1 0 100%;
padding: 0.95rem 0 0.95rem 0.9rem;
font-size: 0.92rem;
letter-spacing: 0.13em;
border-bottom: 1px solid var(--kp-line-soft);
}
.kp-nav__link--active::after {
left: 0; right: auto; top: 0.75rem; bottom: 0.75rem;
width: 2px; height: auto;
border-radius: 2px;
background: var(--kp-a, #3C7A34);
}
[data-theme="dark"] .kp-nav__link--active::after { background: var(--kp-a-2, #7FBF5F); }
/* Postupné naskočení položek. Je to jediná animace v panelu a drží se
nízko: 14 px a 0,26 s — má to působit, že panel obsah přinesl, ne že
s ním šermuje. */
.kp-nav.is-open .kp-nav__link {
animation: kp-menu-item var(--t-med, .26s) var(--ease-out, ease) backwards;
}
.kp-nav.is-open .kp-nav__link:nth-of-type(1) { animation-delay: .04s; }
.kp-nav.is-open .kp-nav__link:nth-of-type(2) { animation-delay: .08s; }
.kp-nav.is-open .kp-nav__link:nth-of-type(3) { animation-delay: .12s; }
.kp-nav.is-open .kp-nav__link:nth-of-type(4) { animation-delay: .16s; }
.kp-nav.is-open .kp-nav__link:nth-of-type(5) { animation-delay: .20s; }
@keyframes kp-menu-item {
from { opacity: 0; transform: translateX(14px); }
to { opacity: 1; transform: none; }
}
:root[data-motion="reduced"] .kp-nav.is-open .kp-nav__link { animation: none; }
/* Tlačítko přes celou šířku pod odkazy, ovládání až za ním. */
.kp-nav__cta {
order: 2;
flex: 1 0 100%;
margin: 1.4rem 0 0;
justify-content: center;
height: 46px;
}
/* JEN uvnitř rozbalené navigace webu. Bez toho `.kp-nav` platila tahle
pravidla na KAŽDÝ výběr jazyka na mobilu — a stejná komponenta stojí
i v horní liště aplikace. Napáchalo to tam čtyři vady najednou:
`order: 3` odsunulo jazyk až za avatara, `margin-top: 1.2rem` posunulo
pilulku dolů (naměřeno: začínala na 29 px, ostatní ikony na 21),
tím lišta narostla z rezervovaných 58 px na 80 a nadpis stránky se
schoval přesně o 22 px pod ni — a `bottom: calc(100% + 8px)` otevíralo
nabídku jazyků NAHORU, tedy mimo obrazovku, protože lišta aplikace
sedí u horního okraje. V navigaci webu je nahoru správně: panel se
rozbaluje odspodu. */
.kp-nav .kp-lang, .kp-nav .kp-themebtn {
order: 3;
margin-top: 1.2rem;
margin-right: 0.55rem;
}
.kp-nav .kp-lang__menu { right: auto; left: 0; bottom: calc(100% + 8px); top: auto; }
/* Telefon NA ŠÍŘKU (a jakékoli nízké okno): panel má jen ~375 px výšky
a plné odsazení s 55px řádky do něj vměstnalo pět položek — tlačítko,
jazyk a motiv byly k dosažení jen rolováním, které nikdo nečekal.
Výška, ne šířka: rozhoduje, kolik řádků se vejde pod sebe. */
@media (max-height: 480px) {
.kp-nav {
padding-top: 3.4rem;
padding-bottom: 1rem;
}
.kp-nav__link { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.kp-nav__cta { margin-top: 0.8rem; height: 42px; }
.kp-nav .kp-lang, .kp-nav .kp-themebtn { margin-top: 0.7rem; }
}
/* Nad fotkou má hlavička bílé písmo se stínem — a panel je JEJÍ potomek,
takže si tu bílou bral i on. Na krémové ploše z toho byly sotva viditelné
obrysy písmen; přesně to klient poslal na snímku. Uvnitř panelu se proto
barevnost vrací na stránkovou, včetně zrušení stínu (ten na světlém
podkladu dělá jen špínu). */
.kp-header--overlay .kp-nav .kp-nav__link,
.kp-site--ref .kp-header .kp-nav .kp-nav__link {
color: var(--kp-ink);
text-shadow: none;
}
.kp-header--overlay .kp-nav .kp-nav__link:hover,
.kp-header--overlay .kp-nav .kp-nav__link--active,
.kp-site--ref .kp-header .kp-nav .kp-nav__link--active {
color: var(--kp-a, #3C7A34);
}
[data-theme="dark"] .kp-header--overlay .kp-nav .kp-nav__link--active,
[data-theme="dark"] .kp-site--ref .kp-header .kp-nav .kp-nav__link--active {
color: var(--kp-a-2, #7FBF5F);
}
.kp-header--overlay .kp-nav .kp-nav__link--active::after,
.kp-site--ref .kp-header .kp-nav .kp-nav__link--active::after {
background: var(--kp-a, #3C7A34);
box-shadow: none;
}
[data-theme="dark"] .kp-header--overlay .kp-nav .kp-nav__link--active::after {
background: var(--kp-a-2, #7FBF5F);
}
/* Totéž pro kulatá tlačítka a volbu jazyka: v panelu stojí na krému,
ne na fotce, takže skleněná varianta z fotky by z nich udělala duchy. */
.kp-header--overlay .kp-nav .kp-themebtn,
.kp-header--overlay .kp-nav .kp-lang__btn {
background: var(--kp-cream-2);
border-color: var(--kp-line);
color: var(--kp-ink-soft);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
@media (max-width: 560px) {
.kp-grid--3, .kp-grid--4, .kp-grid--2, .kp-steps { grid-template-columns: 1fr; }
/* Na telefonu se zkracuje jen SVISLÉ odsazení. Boční drží dál `--kp-gutter`,
jinak by sekce (24 px) a konfigurátor (14 px) stály vedle sebe jinak —
přesně ten rozjezd, kvůli kterému se šířky sjednocovaly. */
.kp-section { padding: var(--kp-sp-8) var(--kp-gutter, 16px); }}
@media (prefers-reduced-motion: reduce) {
.kp-hen--bob { animation: none; }
.kp-btn, .kp-card, .kp-themebtn { transition: none; }
}
/* ==========================================================================
* Split sections (media + body side-by-side)
* ========================================================================== */
.kp-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kp-sp-8); align-items: center; }
.kp-split--reverse .kp-split__media { order: 2; }
.kp-split__body .kp-eyebrow { margin-bottom: var(--kp-sp-1); }
.kp-split__body .kp-lead { margin: var(--kp-sp-1) 0 var(--kp-sp-3); }
.kp-split__media { display: grid; place-items: center; }
.kp-ticks { list-style: none; padding: 0; margin: 0 0 var(--kp-sp-3); display: grid; gap: var(--kp-sp-1); }
.kp-ticks li { position: relative; padding-left: 2.1rem; color: var(--kp-ink-soft); line-height: 1.5; }
.kp-ticks li::before {
content: "✓"; position: absolute; left: 0; top: 0; width: 1.4rem; height: 1.4rem;
display: grid; place-items: center; border-radius: 999px; font-size: .74rem; font-weight: 700;
background: var(--kp-a-soft); color: var(--kp-a-deep);
box-shadow: inset 0 0 0 1px var(--kp-a-line);
}
[data-theme="dark"] .kp-ticks li::before { color: var(--kp-a-2); }
/* photo placeholder card (stand-in until real project photos land) */
.kp-photo {
position: relative; width: min(100%, 440px); aspect-ratio: 4 / 3; border-radius: var(--kp-radius-xl);
display: grid; place-items: center; box-shadow: var(--kp-elev-2); border: 1px solid var(--kp-line);
overflow: hidden;
}
/* Jemný rastr teček dá prázdné ploše texturu — bez něj je to jen barevný
obdélník a čtenář ho čte jako chybějící obrázek, ne jako záměr. */
.kp-photo::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(circle, color-mix(in srgb, var(--kp-ink) 8%, transparent) 1px, transparent 1px);
background-size: 18px 18px;
mask-image: radial-gradient(80% 70% at 50% 45%, transparent 35%, #000 100%);
-webkit-mask-image: radial-gradient(80% 70% at 50% 45%, transparent 35%, #000 100%);
opacity: .7;
}
/* Vnitřní světelný lem — placeholder tím přestane vypadat jako prázdná
plocha a začne číst jako fotorámeček, dokud nedorazí skutečné snímky. */
.kp-photo::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -40px 60px rgba(58, 42, 34, .05);
}
.kp-photo--leaf { background: linear-gradient(150deg, var(--kp-leaf-soft), var(--kp-cream-3)); }
.kp-photo--sky { background: linear-gradient(150deg, var(--kp-sky-soft), var(--kp-cream-3)); }
.kp-photo--yolk { background: linear-gradient(150deg, var(--kp-yolk-soft), var(--kp-cream-3)); }
.kp-photo__badge {
position: absolute; top: 1rem; left: 1rem; font-family: var(--kp-font-display); font-weight: 600;
font-size: .8rem; color: var(--kp-ink); background: color-mix(in srgb, var(--kp-cream-2) 88%, transparent);
padding: .35rem .8rem; border-radius: 999px; box-shadow: var(--kp-shadow-sm);
}
@keyframes kp-wobble { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@media (max-width: 900px) {
.kp-split, .kp-split--reverse { grid-template-columns: 1fr; gap: 2rem; }
.kp-split--reverse .kp-split__media { order: 0; }
.kp-split__body { text-align: center; }
.kp-split__body .kp-lead { margin-inline: auto; }
.kp-ticks { display: inline-grid; text-align: left; }
}
/* ==========================================================================
* Chytrý kurník — interactive roster + detail demo
* ========================================================================== */
.kp-demo { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 2.5rem; align-items: start; }
.kp-demo__roster {
background: var(--kp-cream-2); border: 1px solid var(--kp-line); border-radius: var(--kp-radius-lg);
padding: 1.4rem; box-shadow: var(--kp-shadow-sm);
}
.kp-demo__roster-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
/* Nadpis ukázky je nadpis marketingové stránky, ne prvek aplikace —
patří mu tedy patková rodina jako všem ostatním. */
.kp-demo__roster-head h3 { font-family: var(--kp-font-head); font-size: 1.2rem; }
.kp-demo__roster-head span { font-size: .82rem; color: var(--kp-ink-faint); }
.kp-roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.kp-roster__item {
position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem;
padding: .7rem .4rem; border-radius: var(--kp-radius); border: 2px solid transparent;
background: var(--kp-cream); cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.kp-roster__item:hover { transform: translateY(-2px); background: var(--kp-cream-3); }
.kp-roster__item.is-active { border-color: var(--kp-barn); background: var(--kp-barn-soft); }
.kp-roster__item.is-scanning { animation: kp-scan 0.9s ease-in-out; }
.kp-roster__name { font-family: var(--kp-font-display); font-weight: 600; font-size: .84rem; color: var(--kp-ink); }
.kp-roster__dot { position: absolute; top: .55rem; right: .55rem; width: 10px; height: 10px; border-radius: 999px; box-shadow: 0 0 0 3px var(--kp-cream); }
.kp-roster__dot--ok { background: var(--kp-leaf); }
.kp-roster__dot--watch { background: var(--kp-yolk); }
.kp-roster__dot--alert { background: var(--kp-barn); animation: kp-pulse 1.6s ease-in-out infinite; }
@keyframes kp-scan { 0%,100% { box-shadow: 0 0 0 0 transparent; } 40% { box-shadow: 0 0 0 4px var(--kp-sky); } }
@keyframes kp-pulse { 0%,100% { box-shadow: 0 0 0 3px var(--kp-cream), 0 0 0 3px transparent; } 50% { box-shadow: 0 0 0 3px var(--kp-cream), 0 0 0 7px color-mix(in srgb, var(--kp-barn) 40%, transparent); } }
.kp-demo__tap { width: 100%; justify-content: center; margin-top: 1.3rem; }
.kp-demo__tap-scan { display: inline-flex; align-items: center; gap: .4rem; }
.kp-demo__hint { font-size: .82rem; color: var(--kp-ink-faint); line-height: 1.5; margin-top: .8rem; }
.kp-demo__detail { display: grid; place-items: center; }
@keyframes kp-pop { 0% { transform: scale(.94); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
/* mini alert cards */
.kp-mini {
background: var(--kp-cream-2); border: 1px solid var(--kp-line); border-radius: var(--kp-radius);
padding: 1.2rem; text-align: center;
}
.kp-mini__ico { font-size: 1.9rem; display: block; margin-bottom: .5rem; }
.kp-mini b { font-family: var(--kp-font-display); display: block; margin-bottom: .3rem; color: var(--kp-ink); }
.kp-mini p { font-size: .88rem; color: var(--kp-ink-soft); line-height: 1.45; }
@media (max-width: 780px) {
.kp-demo { grid-template-columns: 1fr; }
.kp-demo__detail { order: -1; }
}
/* ==========================================================================
* Kontakt — form + info
* ========================================================================== */
.kp-contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: start; }
.kp-contact__form {
background: var(--kp-cream-2); border: 1px solid var(--kp-line); border-radius: var(--kp-radius-lg);
padding: 2rem; box-shadow: var(--kp-shadow-sm);
}
.kp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kp-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.kp-field label { font-family: var(--kp-font-display); font-weight: 600; font-size: .92rem; color: var(--kp-ink); }
.kp-input {
font-family: var(--kp-font-body); font-size: 1rem; color: var(--kp-ink);
background: var(--kp-cream); border: 1.5px solid var(--kp-line); border-radius: var(--kp-radius);
padding: .7rem .9rem; width: 100%;
/* `--kp-ease-out` (Motion Bible) na obou koncích — hraniční barva
i prstenec „přicházejí", ne skokem. */
transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1),
background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.kp-input::placeholder { color: var(--kp-ink-faint); }
/* Klid → hover: okraj se jen nepatrně probudí, ať pole signalizuje
interaktivitu ještě před focusem, ne skokem rovnou na plný prstenec. */
.kp-input:hover:not(:focus):not(.invalid) {
border-color: color-mix(in oklab, var(--kp-a) 35%, var(--kp-line));
}
/* Focus vede přes ZNAČKOVÝ akcent (`--kp-a`, zelená — stejná barva jako
primární tlačítko a zbytek appky), ne přes `--kp-barn` (terakota patří
výhradně chybám a kritickým stavům — psáno na chybovou barvu tu bylo
nedopatření, prozradilo ho i vlastní fallback u očička hesla o pár
řádků níž: `var(--kp-barn, #54A046)` — ten hex JE zelená). */
.kp-input:focus {
outline: none;
border-color: var(--kp-a);
box-shadow: 0 0 0 3px var(--kp-a-line);
background-color: var(--kp-cream-2);
}
.kp-input--area { resize: vertical; min-height: 96px; line-height: 1.5; }
/* Chybový stav — `.invalid`/`.modified` jsou třídy, které `InputBase`
(EditForm varianta polí) sama zapisuje na `` podle stavu
validace; teď mají konečně vlastní vzhled místo obecného červeného
obrysu z `app.css` (`.invalid { outline: 1px solid #e50000 }`,
pozůstatek výchozího lešení Blazoru). Terakota tady patří — je to
skutečná chyba, ne focus. */
.kp-input.invalid,
.kp-input.modified.invalid {
border-color: var(--kp-barn);
box-shadow: none;
outline: none;
}
.kp-input.invalid:focus,
.kp-input.modified.invalid:focus {
box-shadow: 0 0 0 3px var(--kp-barn-soft);
}
.kp-field__err { color: var(--kp-barn-dark); font-size: .82rem; font-weight: 500; }
.kp-check { display: flex; align-items: flex-start; gap: .6rem; margin: .4rem 0 1.4rem; font-size: .95rem; color: var(--kp-ink-soft); cursor: pointer; }
.kp-check input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--kp-a); }
.kp-contact__submit { width: 100%; justify-content: center; }
.kp-contact__gdpr { font-size: .8rem; color: var(--kp-ink-faint); line-height: 1.5; margin-top: .9rem; text-align: center; }
.kp-thanks { text-align: center; display: grid; justify-items: center; gap: .6rem; padding: 1.5rem 0; }
.kp-thanks h3 { font-size: 1.5rem; margin-top: .5rem; }
.kp-thanks p { color: var(--kp-ink-soft); line-height: 1.6; max-width: 42ch; }
.kp-thanks .kp-btn { margin-top: 1rem; }
.kp-contact__info { display: grid; gap: 1.4rem; }
.kp-info-card {
background: var(--kp-cream-2); border: 1px solid var(--kp-line); border-radius: var(--kp-radius-lg);
padding: 1.6rem; box-shadow: var(--kp-shadow-sm);
}
.kp-info-card--soft { background: var(--kp-yolk-soft); border-color: transparent; }
.kp-info-card__mascot { margin-bottom: .4rem; }
.kp-info-card h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.kp-info-card > p { color: var(--kp-ink-soft); line-height: 1.5; font-size: .95rem; margin-bottom: 1rem; }
.kp-info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.kp-info-list li { display: flex; align-items: center; gap: .7rem; font-size: .95rem; color: var(--kp-ink); }
.kp-info-list li span:first-child { font-size: 1.1rem; }
.kp-info-list a { color: var(--kp-barn); font-weight: 600; }
.kp-info-list a:hover { text-decoration: underline; }
.kp-info-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; color: var(--kp-ink-soft); line-height: 1.5; font-size: .93rem; }
.kp-info-steps li { padding-left: .2rem; }
@media (max-width: 860px) {
.kp-contact { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.kp-field-row { grid-template-columns: 1fr; gap: 0; }
.kp-contact__form { padding: 1.4rem; }
}
/* ==========================================================================
* Odhalování při scrollu + doladění hover stavů
*
* Bez jediného řádku JavaScriptu: `animation-timeline: view()` váže průběh
* animace na to, kde prvek je vůči viewportu. Žádný IntersectionObserver,
* žádné volání z Blazoru, nulová práce na hlavním vlákně.
*
* Prohlížeče bez podpory (dnes Safari a Firefox) celý blok přeskočí přes
* `@supports` — obsah je tam prostě rovnou vidět. To je správné pořadí
* priorit: čitelnost je základ, odhalování je bonus.
* ========================================================================== */
@keyframes kp-reveal {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
/* Stagger se u scroll-driven animací nedělá zpožděním (to je časová
jednotka, tady běží „čas" po ose scrollu), ale posunutým rozsahem —
druhá karta dobíhá o kus později než první. */
:root:not([data-motion="reduced"]) .kp-grid > :nth-child(2),
:root:not([data-motion="reduced"]) .kp-steps > :nth-child(2) { animation-range: entry 12% cover 30%; }
:root:not([data-motion="reduced"]) .kp-grid > :nth-child(3),
:root:not([data-motion="reduced"]) .kp-steps > :nth-child(3) { animation-range: entry 16% cover 34%; }
:root:not([data-motion="reduced"]) .kp-grid > :nth-child(4),
:root:not([data-motion="reduced"]) .kp-steps > :nth-child(4) { animation-range: entry 20% cover 38%; }
/* Systémové omezení pohybu vyhrává nad výchozím stavem; volba „plný
pohyb" v panelu Vzhled ho může vědomě přebít. */
@media (prefers-reduced-motion: reduce) {
:root:not([data-motion="full"]) .kp-section-head,
:root:not([data-motion="full"]) .kp-card,
:root:not([data-motion="full"]) .kp-step,
:root:not([data-motion="full"]) .kp-coop,
:root:not([data-motion="full"]) .kp-split__media,
:root:not([data-motion="full"]) .kp-split__body,
:root:not([data-motion="full"]) .kp-night__card {
animation: none;
opacity: 1;
transform: none;
}
}
}
/* ---- drobnosti, které dělají rozdíl ---- */
/* Pod kurzorem se mění TEXT a vyjede vlas — plocha za odkazem ne.
Podbarvení tu bylo (`--kp-a-soft`) a dělalo z položek řadu tlačítek,
navíc se pralo s vlasem, který od v94 nese každý odkaz. */
.kp-nav__link:hover { color: var(--kp-a-deep); background: none; }
[data-theme="dark"] .kp-nav__link:hover { color: var(--kp-a-2); }
.kp-nav__link--app { border-color: var(--kp-a-line); color: var(--kp-a-deep); }
.kp-nav__link--app:hover { background: none; color: var(--kp-a-deep); }
[data-theme="dark"] .kp-nav__link--app,
[data-theme="dark"] .kp-nav__link--app:hover { color: var(--kp-a-2); }
/* Odznak nad placeholderem je sklo, ne plná placka. */
.kp-photo__badge {
background: var(--kp-glass-light);
backdrop-filter: blur(calc(var(--kp-glass-blur, 24px) * 0.33));
-webkit-backdrop-filter: blur(calc(var(--kp-glass-blur, 24px) * 0.33));
box-shadow: var(--kp-elev-1);
border: 1px solid color-mix(in srgb, var(--kp-line) 70%, transparent);
}
/* Plochý režim efektů z panelu Vzhled — sklo i barevné záře pryč. */
:root[data-effects="minimal"] .kp-photo__badge {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--kp-cream-2);
}
/* --------------------------------------------------------------------------
* Dvojice fotek v teaseru realizací
* ------------------------------------------------------------------------
* Jedna fotka v rámečku se čte jako ilustrační obrázek, dvě přeložené přes
* sebe jako výběr z portfolia. Menší sedí přes spodní roh té velké; obě mají
* vlastní stín, takže hloubka vzniká překryvem, ne kresleným rámem.
*
* Rezerva dole a vpravo je v `padding`, ne v `margin` menší fotky: menší
* fotka je `absolute` a z toku nic neposouvá, takže bez rezervy by přečnívala
* do textu vedle a na úzkém okně do dalšího řádku.
* -------------------------------------------------------------------------- */
.kp-showcase {
position: relative;
width: min(100%, 440px);
padding: 0 clamp(18px, 4vw, 42px) clamp(34px, 7vw, 62px) 0;
}
.kp-showcase .kp-showcase__main { width: 100%; }
/* Zdvojený selektor schválně: `.kp-photo--shot` níž v souboru taky nastavuje
`position` a při stejné specifičnosti by vyhrálo pozdější pravidlo — menší
fotka pak spadla POD tu velkou místo přes její roh. */
.kp-showcase .kp-showcase__side {
position: absolute;
right: 0;
bottom: 0;
width: 44%;
aspect-ratio: 4 / 3;
border: 4px solid var(--kp-cream, #FBF4EB);
box-shadow: var(--kp-elev-3);
}
/* Fotka je obsah, ne plocha na dokreslení — rastr teček z `.kp-photo`
prosvítal skrz a v tmavších místech vypadal jako vada snímku. */
.kp-showcase .kp-photo::before { display: none; }
@media (max-width: 560px) {
/* Na telefonu je hlavní fotka tak úzká, že menší přes roh z ní ukrojí
podstatnou část. Radši jedna pořádná než dvě nečitelné. */
.kp-showcase { padding: 0; }
.kp-showcase .kp-showcase__side { display: none; }
}
/* ==========================================================================
* EKOSYSTÉM + SKUTEČNÉ FOTKY
*
* Karty typů kurníků i roster slepiček dřív nesly kreslené maskoty — zástupce
* z doby, kdy jsme fotky neměli. Teď má web 43 fotek realizací a čtyři
* vyrenderované slepičky, takže kresba zmizela a styly níž řeší, jak fotka
* v kartě sedí.
* ========================================================================== */
.kp-photo--shot {
position: relative;
overflow: hidden;
padding: 0;
background: var(--kp-cream-3, #EBDDC4);
}
.kp-photo--shot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* Fotky jsou z různých staveb a různého světla. Jemné sjednocení je
drží jako jednu sadu, aniž by ubralo na věrnosti. */
filter: saturate(1.04) contrast(1.02);
transition: transform var(--motion-durationBase, 320ms) var(--motion-easing, ease);
}:root[data-motion="reduced"] .kp-photo--shot img { transition: none; }
/* Odznak leží na fotce, takže potřebuje vlastní podklad — na světlé střeše
by bílý text zmizel. */
.kp-photo--shot .kp-photo__badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 1;
background: rgba(20, 24, 20, 0.62);
color: #FFFDF7;
backdrop-filter: blur(calc(var(--kp-glass-blur, 24px) * 0.25));
-webkit-backdrop-filter: blur(calc(var(--kp-glass-blur, 24px) * 0.25));
}
:root[data-effects="minimal"] .kp-photo--shot .kp-photo__badge { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 24, 20, 0.8); }
.kp-photo--tall { aspect-ratio: 4 / 3; }
/* ---- ekosystém ---------------------------------------------------------- */
.kp-eco {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--kp-sp-3, 18px);
}
.kp-eco__card {
position: relative;
padding: 22px 20px 20px;
border-radius: var(--kp-radius-lg, 22px);
background: var(--kp-surface);
border: 1px solid var(--kp-line);
box-shadow: var(--kp-shadow-sm);
transition: transform var(--motion-durationFast, 160ms) var(--motion-easing, ease),
border-color var(--motion-durationFast, 160ms) var(--motion-easing, ease);
}
.kp-eco__card:hover {
transform: translateY(-4px);
border-color: color-mix(in oklab, var(--kp-primary, #3C7A34) 34%, var(--kp-line));
}
:root[data-motion="reduced"] .kp-eco__card { transition: none; }
:root[data-motion="reduced"] .kp-eco__card:hover { transform: none; }
.kp-eco__card h3 {
margin: 14px 0 6px;
/* Patková rodina jako ostatní nadpisy — Fredoka je tu od čísel a štítků. */
font-family: var(--kp-font-head);
font-size: 1.12rem;
color: var(--kp-ink);
}
.kp-eco__card p {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--kp-ink-soft);
}
.kp-eco__ico {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 16px;
}
.kp-eco__ico svg { width: 26px; height: 26px; }
.kp-eco__ico--leaf { background: var(--kp-leaf-soft); color: var(--kp-leaf-dark); }
.kp-eco__ico--sky { background: var(--kp-sky-soft); color: var(--kp-sky); }
.kp-eco__ico--yolk { background: var(--kp-yolk-soft); color: #B9820F; }
.kp-eco__ico--barn { background: var(--kp-barn-soft); color: var(--kp-barn); }
[data-theme="dark"] .kp-eco__ico--yolk { color: var(--kp-yolk); }
/* „Už brzy" je slib, ne funkce — proto tichý štítek, ne zelený odznak. */
.kp-eco__soon {
display: inline-block;
margin-top: 12px;
padding: 3px 10px;
border-radius: 999px;
border: 1px dashed var(--kp-line-strong, var(--kp-line));
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--kp-ink-faint, var(--kp-ink-soft));
}
@media (max-width: 900px) {
.kp-eco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.kp-eco { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
* SEKCE Z `_refs/ref1.png`
* Founder + RFID · náhled aplikace · gamifikace · roadmapa · komunita
* ========================================================================== */
/* ---- founder + RFID ------------------------------------------------------ */
/* `align-items: start` tu bývalo a karty pak měly každá jinou výšku — levá
končila o 90 px dřív a mezi nimi zbyl schod. Roztažení na stejnou výšku je
u dvojice, kterou má čtenář srovnávat, to jediné správné. */
.kp-founder {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: var(--kp-sp-3, 20px);
align-items: stretch;
}
/* Odsazení bylo 26 px a štítek „FOUNDER PROGRAM" seděl skoro na hraně karty.
U karty, která nese nadpis, odstavec i seznam, je to málo — obsah se
z rohu nadechne až po prvním řádku. */
.kp-founder__card {
display: flex;
flex-direction: column;
padding: clamp(26px, 2.4vw, 40px) clamp(26px, 2.4vw, 40px) clamp(28px, 2.6vw, 42px);
border-radius: var(--kp-radius-lg, 22px);
/* `--kp-surface` tu bylo, ale NIKDY se nerozbalilo: ten token je
definovaný jen uvnitř `.kp-lite__mood` (kp-brand.css:92 a 283), tedy
v komponentě aplikace, kam tahle karta nedosáhne. Naměřeno: computed
background byl `rgba(0, 0, 0, 0)` v obou motivech — karta byla celou
dobu průhledná a to, co se za ní zdálo být plochou, byla stránka.
Plocha webu je `--kp-cream-2`. */
background: var(--kp-cream-2);
border: 1px solid var(--kp-line);
box-shadow: var(--kp-shadow-sm);
}
/* Odznak „Již brzy". V tmavém motivu na něm bylo žluté písmo na skoro bílé
pilulce — kontrast 1,33:1, tedy prakticky neviditelné. Pilulka měla
natvrdo `rgba(252, 248, 238, .94)` z `.kp-chip`, které se navíc načítá
POZDĚJI, takže se to musí přebít vyšší specificitou. */
.kp-founder__card--soon > .kp-chip--soon {
background: color-mix(in oklab, var(--kp-yolk) 20%, transparent);
border: 1px solid color-mix(in oklab, var(--kp-yolk) 46%, transparent);
color: color-mix(in oklab, var(--kp-yolk) 26%, var(--kp-ink));
box-shadow: none;
}
[data-theme="dark"] .kp-founder__card--soon > .kp-chip--soon {
background: color-mix(in oklab, var(--kp-yolk) 15%, transparent);
border-color: color-mix(in oklab, var(--kp-yolk) 40%, transparent);
color: var(--kp-yolk);
}
/* Dlaždice funkcí stály na 5 % inkoustu, tedy skoro na ničem. */
.kp-founder__card--soon .kp-rfid__item {
background: color-mix(in oklab, var(--kp-cream) 62%, transparent);
border: 1px solid color-mix(in oklab, var(--kp-yolk) 14%, var(--kp-line));
color: var(--kp-ink);
}
.kp-founder__card--soon .kp-rfid__ico { color: var(--kp-a-deep); }
[data-theme="dark"] .kp-founder__card--soon .kp-rfid__ico { color: var(--kp-a-2); }
/* Pole pro e-mail — zapuštěný povrch, ať je vidět, že se do něj píše. */
.kp-founder__card--soon .kp-signup input {
background: color-mix(in oklab, var(--kp-cream) 55%, var(--kp-cream-2));
border-color: color-mix(in oklab, var(--kp-yolk) 20%, var(--kp-line-soft));
box-shadow: inset 0 1px 2px color-mix(in oklab, var(--kp-ink) 8%, transparent);
}
.kp-founder__card--soon .kp-signup input::placeholder {
color: var(--kp-ink-soft);
opacity: 1;
}
/* Jeden rytmus pro obě karty. Štítek nahoře měl vlastní odsazení jen vpravo
(`.kp-chip--soon` 10 px), vlevo žádné — nadpis se lepil rovnou na něj.
Teď mají obě stejné a nadpis pod nimi taky. */
.kp-founder__card > .kp-eyebrow,
.kp-founder__card > .kp-chip--soon { align-self: start; margin: 0 0 clamp(14px, 1.2vw, 20px); }
.kp-founder__card > .kp-h3 { margin: 0 0 clamp(10px, 0.9vw, 14px); line-height: 1.25; }
.kp-founder__card > .kp-lead { margin: 0; }
.kp-founder__card > p { margin: 0; }
/* Formulář dolů, ať obě karty končí ve stejné svislici i uvnitř. */
.kp-founder__card > .kp-signup { margin-top: auto; padding-top: clamp(14px, 1.2vw, 20px); }
/* Pravá karta je to, co teprve bude — proto tmavší podklad a zlatý lem:
odděluje slib od toho, co si zákazník koupí dnes. */
/* POZOR na to, co se tu stalo — je to poučné. Pravidlo výš mělo
`background: linear-gradient(…, var(--kp-surface))` BEZ náhradní hodnoty.
`--kp-surface` je přitom definovaný jen uvnitř `.kp-lite__mood`
(kp-brand.css:92 a 283), tedy v komponentě aplikace, kam tahle karta
nedosáhne. Nerozbalená proměnná shodí CELOU deklaraci — a protože tohle
pravidlo stálo v souboru POZDĚJI než základní `.kp-founder__card`,
přebilo i jeho pozadí. Karta tedy byla od svého vzniku úplně průhledná
(naměřeno: computed background `rgba(0, 0, 0, 0)` v obou motivech) a to,
co za ní vypadalo jako plocha, byla stránka. Komentář nad původním
pravidlem sliboval „tmavší podklad a zlatý lem"; lem se vykreslil,
protože `--kp-gold` měl náhradu, podklad ne.
Poučení: `var()` bez náhrady je v deklaraci, na které stojí vzhled,
tichá mina. `--kp-forest` ani `--kp-gold` na webu taky nejsou; značkové
tokeny jsou `--kp-a*` (zelená) a `--kp-yolk` (zlatá).
Karta je „to, co teprve bude", takže má zlatý nádech od pravého horního
rohu a zlatý lem — odděluje slib od toho, co si zákazník koupí dnes. */
.kp-founder__card--soon {
background:
radial-gradient(130% 95% at 86% -6%,
color-mix(in oklab, var(--kp-yolk) 16%, transparent), transparent 60%),
linear-gradient(162deg,
color-mix(in oklab, var(--kp-a) 9%, var(--kp-cream-2)),
var(--kp-cream-2) 66%);
border-color: color-mix(in oklab, var(--kp-yolk) 40%, var(--kp-line));
box-shadow:
inset 0 1px 0 color-mix(in oklab, var(--kp-yolk) 30%, transparent),
var(--kp-elev-2);
}
.kp-founder__card > .kp-founder__sub { margin: -6px 0 clamp(10px, 0.9vw, 14px); color: var(--kp-ink-soft); font-weight: 600; }
/* Stejný tvar jako `.kp-eyebrow` (FOUNDER PROGRAM, PROČ ZROVNA MY…), jen ve
zlaté místo zelené — je to jiný stav, ne jiný druh štítku. Předtím to byla
samostatná pilulka bez lemu, s jiným řezem i prostrkáním, a vedle
„FOUNDER PROGRAM" hned naproti to bylo vidět. */
.kp-chip--soon {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.4rem 0.9rem;
border-radius: 999px;
font-family: var(--kp-font-display);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: color-mix(in oklab, var(--kp-gold, #D9A441) 62%, #3B2C10);
background: color-mix(in oklab, var(--kp-gold, #D9A441) 16%, transparent);
border: 1px solid color-mix(in oklab, var(--kp-gold, #D9A441) 38%, transparent);
}
[data-theme="dark"] .kp-chip--soon { color: var(--kp-yolk, #F5B841); }
/* Vlastní název, ne `kp-perks` — ten už patří pásu výhod v konfigurátoru
(kp-config.css) a má čtyři sloupce. Sdílená třída dvou nesouvisejících
komponent rozsypala výhody do sloupečků po jednom slově. */
.kp-founder__perks {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 9px;
margin: clamp(16px, 1.4vw, 22px) 0 0;
padding: 0;
list-style: none;
}
.kp-founder__perks li {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.97rem;
color: var(--kp-ink);
}
/* Ikona v kroužku, ne holý tah: čtyři řádky pod sebou potřebují svislou
osu, na které oko drží stopu. Bez kroužku se tahy různé šířky rozjely a
text vypadal odsazený nahodile. */
.kp-founder__ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 999px;
color: var(--kp-a-deep, #2F6428);
background: color-mix(in oklab, var(--kp-a, #3C7A34) 12%, transparent);
}
.kp-founder__ico svg { width: 16px; height: 16px; }
.kp-rfid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.kp-rfid__item {
display: grid;
justify-items: center;
gap: 6px;
padding: 12px 6px;
border-radius: 14px;
background: color-mix(in oklab, var(--kp-ink) 5%, transparent);
font-size: 0.72rem;
line-height: 1.25;
text-align: center;
color: var(--kp-ink-soft);
}
.kp-rfid__ico { color: var(--kp-primary, #3C7A34); }
.kp-rfid__ico svg { width: 22px; height: 22px; }
.kp-signup { display: grid; gap: 8px; }
.kp-signup__label { font-size: 0.92rem; font-weight: 600; color: var(--kp-ink); }
.kp-signup__row { display: flex; gap: 10px; }
.kp-signup input {
flex: 1;
min-width: 0;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--kp-line-strong, var(--kp-line));
background: var(--kp-surface);
color: var(--kp-ink);
font: inherit;
}
.kp-signup input:focus-visible { outline: 2px solid var(--kp-primary, #3C7A34); outline-offset: 2px; }
.kp-signup__note { margin: 0; font-size: 0.82rem; color: var(--kp-ink-soft); }
/* Nedoručená přihláška do Founder programu. Jantarová jako v dialogu
poptávky — není to chyba zájemce a text hned nabízí, co dělat dál. */
.kp-signup__note--err {
color: var(--kp-ink);
padding: 0.6rem 0.8rem;
border-radius: var(--kp-radius);
border: 1px solid color-mix(in oklab, var(--kp-yolk) 55%, transparent);
background: color-mix(in oklab, var(--kp-yolk) 14%, transparent);
}
/* ---- náhled aplikace ----------------------------------------------------- */
.kp-appshow {
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: var(--kp-sp-4, 28px);
align-items: center;
}
.kp-appshow__note { margin-top: 12px; font-size: 0.85rem; color: var(--kp-ink-soft); }
.kp-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
/* Odznaky obchodů.
`.kp-site a { color: inherit }` má díky prvkovému selektoru vyšší
specifičnost než `.kp-store`, takže si tlačítko bralo barvu textu ze
stránky: v noci to vycházelo krémově a fungovalo, ve dne tmavě na tmavém
a bylo nečitelné. Odtud zdvojený selektor — bez `!important`.
Podklad je pevně tmavý v OBOU režimech, protože tak odznaky obchodů
vypadají všude; není to naše barva, kterou bychom měli tématizovat. */
.kp-site a.kp-store {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 18px 10px 14px;
border-radius: 14px;
background: linear-gradient(160deg, #23201C, #121110);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #F7F2E8;
text-decoration: none;
box-shadow: 0 10px 24px rgba(12, 10, 8, 0.28);
transition: transform var(--motion-durationFast, 150ms) var(--motion-easing, ease),
box-shadow var(--motion-durationFast, 150ms) var(--motion-easing, ease),
border-color var(--motion-durationFast, 150ms) var(--motion-easing, ease);
}
.kp-site a.kp-store:hover {
transform: translateY(-2px);
box-shadow: 0 16px 32px rgba(12, 10, 8, 0.34);
border-color: rgba(255, 255, 255, 0.28);
}
.kp-site a.kp-store:focus-visible { outline: 3px solid var(--kp-a-line); outline-offset: 3px; }
:root[data-motion="reduced"] .kp-site a.kp-store { transition: none; }
:root[data-motion="reduced"] .kp-site a.kp-store:hover { transform: none; }
:root[data-effects="minimal"] .kp-site a.kp-store { box-shadow: none; }
.kp-store__ico { display: grid; place-items: center; color: #F7F2E8; }
.kp-store__ico svg { width: 24px; height: 24px; display: block; }
.kp-store > span:last-child { display: grid; line-height: 1.2; }
/* Popisek nad názvem je jen doprovod, ale musí zůstat čitelný: 0,75 krytí na
téhle ploše vychází kolem 4,6 : 1, tedy nad hranicí pro drobný text. */
.kp-store small { font-size: 0.7rem; color: rgba(247, 242, 232, 0.75); }
.kp-store b { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
/* Deska aplikace leží na světlé stránce — vlastní stín ji odsadí. */
.kp-appshow__media .kp-fov__shell { box-shadow: var(--kp-elev-2, 0 18px 44px rgba(40, 30, 20, 0.18)); }
/* ---- roadmapa ------------------------------------------------------------ */
.kp-road {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
margin: 0;
padding: 0;
list-style: none;
}
.kp-road__step {
position: relative;
display: grid;
gap: 4px;
padding: 34px 12px 0;
text-align: center;
}
/* Spojnice vede za tečkami, takže u krajních bodů musí končit v polovině —
jinak čára visí ven ze sekce. */
.kp-road__step::before {
content: "";
position: absolute;
top: 13px;
left: 0;
right: 0;
height: 2px;
background: var(--kp-line-strong, var(--kp-line));
}
.kp-road__step:first-child::before { left: 50%; }
.kp-road__step:last-child::before { right: 50%; }
.kp-road__dot {
position: absolute;
top: 6px;
left: 50%;
translate: -50% 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--kp-surface);
border: 3px solid var(--kp-line-strong, var(--kp-line));
}
.kp-road__step--done .kp-road__dot { border-color: var(--kp-primary, #3C7A34); background: var(--kp-primary, #3C7A34); }
.kp-road__step--now .kp-road__dot {
border-color: var(--kp-gold, #D9A441);
background: var(--kp-surface);
box-shadow: 0 0 0 5px color-mix(in oklab, var(--kp-gold, #D9A441) 22%, transparent);
}
.kp-road__when { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; color: var(--kp-ink-soft); }
.kp-road__name { font-size: 0.98rem; line-height: 1.3; color: var(--kp-ink); }
.kp-road__state { font-size: 0.8rem; color: var(--kp-ink-soft); }
.kp-road__step--now .kp-road__state { color: #8A6414; font-weight: 600; }
[data-theme="dark"] .kp-road__step--now .kp-road__state { color: var(--kp-yolk, #F5B841); }
/* ---- komunita ------------------------------------------------------------ */
.kp-comm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.kp-comm__item { display: grid; gap: 2px; }
.kp-comm__item b { font-family: var(--kp-font-display); font-size: 1.35rem; color: var(--kp-ink); }
.kp-comm__item span { font-size: 0.86rem; color: var(--kp-ink-soft); }
.kp-feed {
padding: 16px 18px;
border-radius: var(--kp-radius-lg, 22px);
background: var(--kp-surface);
border: 1px solid var(--kp-line);
box-shadow: var(--kp-shadow-sm);
}
.kp-feed__head { font-family: var(--kp-font-display); font-size: 1rem; color: var(--kp-ink); margin-bottom: 10px; }
.kp-feed__row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 8px;
align-items: baseline;
padding: 9px 0;
border-top: 1px solid var(--kp-line);
font-size: 0.9rem;
}
.kp-feed__who { font-weight: 600; color: var(--kp-ink); }
.kp-feed__what { color: var(--kp-ink-soft); }
.kp-feed__when { font-size: 0.78rem; color: var(--kp-ink-faint, var(--kp-ink-soft)); white-space: nowrap; }
/* ---- responzivita -------------------------------------------------------- */
@media (max-width: 1000px) {
.kp-founder, .kp-appshow { grid-template-columns: minmax(0, 1fr); }
.kp-play { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kp-rfid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Roadmapa se na úzku překlopí na svislou osu — pět sloupců by z názvů
udělalo sloupečky po jednom slově. */
.kp-road { grid-template-columns: minmax(0, 1fr); }
.kp-road__step { padding: 10px 0 10px 34px; text-align: left; }
.kp-road__step::before { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
.kp-road__step:first-child::before { top: 50%; left: 7px; }
.kp-road__step:last-child::before { bottom: 50%; top: 0; right: auto; }
.kp-road__dot { top: 50%; left: 0; translate: 0 -50%; }
}
@media (max-width: 620px) {
.kp-comm { grid-template-columns: minmax(0, 1fr); }
.kp-signup__row { flex-direction: column; }
}
/* Deska v náhledu je stejná komponenta jako v aplikaci, ale v užším sloupci —
ilustrace se proto zmenší, aby nepřetekla přes kartu. */
.kp-appshow__media .kp-fov__egg { width: clamp(64px, 7vw, 92px); height: clamp(64px, 7vw, 92px); }
.kp-appshow__media .kp-fov__ill { width: clamp(48px, 5vw, 68px); height: clamp(48px, 5vw, 68px); }
.kp-appshow__media .kp-fov__ill--tall { width: clamp(38px, 4vw, 54px); height: clamp(58px, 6vw, 82px); }
.kp-appshow__media .kp-fov__value { font-size: clamp(24px, 2.4vw, 32px); }
/* ---- pás fotek z dílny --------------------------------------------------- */
/* Slepička v poděkování a v kontaktní kartě — render bez rámečku. */
.kp-thanks__hen,
.kp-info-card__mascot img {
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(40, 30, 20, 0.2));
}
@media (max-width: 900px) {
}
@media (max-width: 560px) {
}
/* ---- často kladené dotazy ------------------------------------------------ */
.kp-faq { display: grid; gap: var(--kp-sp-4, 30px); }
.kp-faq__title {
margin: 0 0 12px;
font-family: var(--kp-font-display);
font-size: 1.15rem;
color: var(--kp-primary, #3C7A34);
}
[data-theme="dark"] .kp-faq__title { color: var(--kp-leaf, #6BA368); }
.kp-faq__group { display: grid; gap: 10px; }
.kp-faq__item {
border-radius: var(--kp-radius-lg, 18px);
background: var(--kp-surface);
border: 1px solid var(--kp-line);
box-shadow: var(--kp-shadow-sm);
overflow: hidden;
}
.kp-faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
cursor: pointer;
font-weight: 600;
font-size: 1rem;
line-height: 1.4;
color: var(--kp-ink);
/* Vlastní šipku kreslíme sami — výchozí trojúhelník prohlížeče vypadá
v každém jinak a nedá se obarvit. */
list-style: none;
}
.kp-faq__item summary::-webkit-details-marker { display: none; }
.kp-faq__item summary:hover { color: var(--kp-primary, #3C7A34); }
[data-theme="dark"] .kp-faq__item summary:hover { color: var(--kp-leaf, #6BA368); }
.kp-faq__item summary:focus-visible { outline: 2px solid var(--kp-primary, #3C7A34); outline-offset: -3px; }
.kp-faq__item summary svg {
width: 20px;
height: 20px;
flex: 0 0 auto;
color: var(--kp-ink-faint, var(--kp-ink-soft));
transition: transform var(--motion-durationFast, 180ms) var(--motion-easing, ease);
}
.kp-faq__item[open] summary svg { transform: rotate(180deg); }
:root[data-motion="reduced"] .kp-faq__item summary svg { transition: none; }
.kp-faq__answer {
padding: 0 20px 18px;
border-top: 1px solid var(--kp-line);
padding-top: 14px;
margin-top: -1px;
}
.kp-faq__answer p {
margin: 0 0 10px;
font-size: 0.97rem;
line-height: 1.65;
color: var(--kp-ink-soft);
}
.kp-faq__answer p:last-child { margin-bottom: 0; }
.kp-faq__answer strong { color: var(--kp-ink); }
.kp-faq__answer em { font-style: normal; font-weight: 600; color: var(--kp-ink); }
@media (max-width: 620px) {
.kp-faq__item summary { padding: 14px 16px; font-size: 0.95rem; }
.kp-faq__answer { padding-inline: 16px; }
}
/* Náhled aplikace SLEDUJE MOTIV STRÁNKY.
Původně tu byl opak: deska držela tmavý vzhled i ve světlém motivu, protože
klientova předloha `_refs/ref1.png` ukazovala tmavý telefon na světlé
stránce. Klient si vyžádal změnu — a dává smysl: samotná aplikace světlý
motiv umí, takže její maketa nemá být jediná plocha na stránce, která na
přepínač nereaguje. Deska žádný vlastní override nepotřebuje: `--fov-*`
v kp-flock-overview.css už čtou `--kp-cream*` a `--kp-ink`, takže se
přebarví samy s motivem i s panelem Vzhled. */
/* Rám kolem desky — ukázka má působit jako zařízení, ne jako výřez.
Ve světlém motivu je rám světle kovový, aby na krému nedělal černý blok. */
.kp-appshow__media {
padding: 14px;
border-radius: 26px;
background: linear-gradient(160deg, rgba(20, 30, 24, 0.9), rgba(12, 18, 15, 0.9));
box-shadow: var(--kp-elev-2, 0 22px 50px rgba(40, 30, 20, 0.22));
}
[data-theme="light"] .kp-appshow__media {
background: linear-gradient(160deg,
color-mix(in oklab, var(--kp-ink) 16%, var(--kp-cream)),
color-mix(in oklab, var(--kp-ink) 26%, var(--kp-cream)));
}
.kp-appshow__media .kp-fov__shell { border-radius: 18px; }
/* Pole na heslo s ocickem (ucty). Vzhled drzi .kp-input, tlacitko sedi uvnitr. */
/* ---- dialogy (jeden vzhled pro web i aplikaci) --------------------------
Třída `kp-dialog` se dává na ``. Sama o sobě
skoro nic nepřebíjí — most v `forge-tokens.css` už dal Forge naši paletu,
takže tady zbývá jen to, co je pro dialog specifické: víc vzduchu, mírně
silnější stín (dialog má nad stránkou opravdu plavat) a ztmavení podkladu
v naší hnědé, ne v neutrální šedi.
PROČ TO NENÍ VLASTNÍ KOMPONENTA: `ForgeDialog` staví na nativním
`