/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved. */ /* Proprietary and confidential. See LICENSE in the project root. */ /* ========================================================================== * JEDNODUCHÁ („lite") VERZE APLIKACE — celoobrazovkový shell * * Odlehčená první verze podle klientových screenshotů: levý ikonový rail, * topbar s přepínačem Plná/Jednoduchá a jedna obrazovka na střed. Barvy * jdou ze značkových `--kp-*` tokenů (scope `.kpa-app`), takže tmavý režim * vypadá jako předloha a světlý je jeho analogií — a panel Vzhled i noční * režim platí i tady. * ========================================================================== */ /* Forge (`forge-dashboard.css`) píše `body:not(:has(.app)) { overflow-x: hidden; }` — a `/lite` nikdy nenese Forgeovu vlastní třídu `app` (to má jen ForgeShell na `/app`), takže tohle pravidlo appku vždycky zasáhne. Jedna osa `overflow` na cokoli jiného než `visible` tiše donutí i tu druhou dopočítat se na `auto` (CSS specifikace) — `` se tak beze slova stane vlastním scroll kontejnerem, i když se nikdy sám neposouvá. Na desktopu to nevadí (appka roluje uvnitř `.kp-lite__main`), ale na mobilu, kde `.kp-lite__main` naschvál PŘESTÁVÁ mít vlastní scrollport (viz media query níž — kvůli schovatelné liště Safari), to bez tohohle přepisu zlomí `position: sticky` napříč appkou: sticky prvek se váže k NEJBLIŽŠÍMU předku se scrollovacím boxem, a `` s tichým `overflow-y: auto` se stane touhle referencí — i když je to box, který se sám nikdy nehne (posouvá se okno/`documentElement`, ne on). `clip` ořízne úplně stejně jako `hidden`, ale scroll kontejner nevytváří (stejný recept jako `.kp-site` v `kp-site.css`). */ body:has(.kp-lite) { overflow-x: clip; } .kp-lite { position: fixed; inset: 0; display: grid; grid-template-columns: 68px minmax(0, 1fr); /* BEZ tohohle je jediný implicitní řádek `auto` — a `auto` řádek se nesmrskne pod obsah, i když je ten obsah (nastohované ikony railu) vyšší než okno. `.kp-lite__main` má `container-type: size`, takže navíc přestane počítat svou výšku z VLASTNÍHO obsahu (`.kpc`/ `.kp-ag--screen`'s `min-height: 100cqb` by jinak bylo kruhové) — řádek se tak spolehne na výšku RAILU (`nav.kp-lite__rail`), a na nízkém okně/velkém railu (12 položek × 58 px na velkém displeji) to snadno přerostlo přes celý viewport. `.kp-lite__main` pak dostal přes `align-items: stretch` tuhle přerostlou výšku místo skutečné výšky okna — `min-height: 100cqb` uvnitř na to navázalo a `.kpc` vyšlo o desítky px vyšší, než kolik se do okna vejde. Pevný řádek `100%` drží oba sloupce (rail i `.kp-lite__main`) přesně na výšce okna bez ohledu na to, kolik položek rail nese. */ grid-template-rows: 100%; /* Rozbalení/sbalení railu animované stejným receptem jako Forge vlastní sidebar (`.app` v `forge-dashboard.css`: `grid-template-columns` s `--t-collapse`/`--ease-out-expo`) — tytéž tokeny, ne vlastní vymyšlené číslo, ať sazba sedí s Forge komponentami jinde v appce a poslouchá i budoucí ladění v panelu Vzhled. */ transition: grid-template-columns var(--t-collapse, 280ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); /* Dýchací mezera mezi lepivými prvky (horní lišta ↔ Agátina hlavička, dok ↔ skutečná spodní hrana okna) a hranou, na kterou se lepí — ať na sebe nikdy nenalehnou. Na velkých monitorech se zdvojnásobí (viz media query níž), na malých obrazovkách zůstává útlá. */ --kp-lite-edge-gap: 8px; /* Předloha „Moje hejno": STRÁNKA je skoro bílá (teplá bílá) a KARTY jsou jemně béžové — přesně naopak, než bylo dřív. Obojí je odvozené z značkových tokenů (surface = bílá, cream = béžová), takže se to přebarví i tmavým režimem a panelem Vzhled. */ /* Předloha: STRÁNKA je jasně bílá, KARTY jen jemně krémové (o chlup teplejší), bez gradientu. Rozdíl v předloze je nepatrný (~3/kanál), ale vjem „bílá stránka + krémová karta" držíme takto — stránka bělejší, karta o kousek teplejší. */ --lite-page: #FEFDF9; --lite-card: #FCF7EE; /* Sezónní vrstva pozadí: fotka (až bude vygenerovaná) na jemném sezónním nádechu; den = světlý motiv, noc = tmavý. Fallback bez fotky je jen nenápadný nádech, ať drží čitelnost obsahu. Roční období řídí atribut `data-season` na (SeasonMoodState / MoodTweaks) — mění se živě. */ --lite-season-image: none; --lite-season-wash: none; /* Závoj v barvě stránky NAD fotkou: ztlumí ji na atmosféru a udrží čitelnost textu, který leží přímo na pozadí (topbar sedí na fotce, ne na kartě). Odvozený z `--lite-page`, takže se v tmavém režimu ztmaví sám. Silnější nahoře (za topbarem), volnější v gutterech, ať fotka dýchá. Bez fotky je to jen závoj stránky nad stránkou → beze změny. */ --lite-season-veil: linear-gradient(180deg, color-mix(in oklab, var(--lite-page) 40%, transparent), color-mix(in oklab, var(--lite-page) 22%, transparent) 45%, color-mix(in oklab, var(--lite-page) 30%, transparent)); /* Pořadí vrstev = odshora dopředu: sezónní nádech (barevný akcent nahoře), závoj (ztlumí fotku), fotka (cover), barva stránky vespod. Fotka MUSÍ být pod nádechem i závojem — jinak je oba schová (je neprůhledná). */ background: var(--lite-season-wash), var(--lite-season-veil), var(--lite-season-image) center / cover no-repeat, var(--lite-page); color: var(--kp-ink); font-family: var(--kp-font-body); overflow: hidden; /* Nadpisy sekcí jsou teplé jako v předloze, ale ZLATÉ, ne terakotové. Terakota má podle revize A1 (design-bible 02) jediný úkol: kritická upozornění a mazání. Když jí obarvíme každý nadpis, přestane v aplikaci existovat barva, která znamená „tohle si přečti hned". */ --lite-warm: var(--kp-gold); --lite-track: color-mix(in oklab, var(--kp-ink) 10%, transparent); } /* Na velkém monitoru je 8px u lepivého prvku skoro neviditelných — mezera roste s plochou, ne se zůstává pořád stejná. */ @media (min-width: 1440px) { .kp-lite { --kp-lite-edge-gap: 16px; } } /* Tmavý režim „Moje hejno" — noční farma (analogie světlé předlohy): hlubší, skoro černo-zelené POZADÍ a KARTY o stupeň světlejší (jako tmavá deska Přehledu). Vše z tmavých tokenů → přebarví i akcent / roční období. */ /* Noční farma — značkové tokeny, ne studená břidlice z klientova renderu. Ten render byl jen jeden obrázek; aplikace má vlastní popsaný jazyk (docs/design-bible/02_Color_System.md: lesní zeleň, krém, zlatá) a Přehled i Moje hejno jsou jedna obrazovka téže aplikace. Vinětace a nádech zeleně z desky zůstávají — dávají ploše hloubku. */ [data-theme="dark"] .kp-lite { --lite-page: var(--kp-cream-3); --lite-card: var(--kp-surface); /* Stejné pořadí jako ve světle: nádech + závoj NAD fotkou. Vinětace desky a základní gradient zůstávají vespod — nesou hloubku, když žádná sezónní fotka není. `--lite-season-veil` se odvozuje z `--lite-page`, který je tady tmavý, takže závoj ztmavne bez druhé definice. */ background: var(--lite-season-wash), var(--lite-season-veil), var(--lite-season-image) center / cover no-repeat, var(--fov-board-wash), linear-gradient(165deg, var(--kp-cream), var(--kp-cream-3)); --lite-track: rgba(255, 255, 255, 0.09); } /* ================= ROČNÍ OBDOBÍ — sezónní pozadí lite appky ================= * Fotka `img/app/backdrop/{season}-{day|night}.webp` (den = světlý motiv, * noc = tmavý) na jemném sezónním nádechu. Dokud fotky nejsou, nese náladu * jen nádech. Roční období = `data-season` na ; den/noc = motiv * (světlý/tmavý). Nádech mixuje značkový token s transparent v oklab * (bezpečné; s bílou by oklch házel do růžova — proto transparent + oklab). */ /* JARO — svěží zeleň */ [data-season="spring"] .kp-lite { --lite-season-image: url("img/app/backdrop/spring-day.webp"); --lite-season-wash: radial-gradient(130% 85% at 50% -12%, color-mix(in oklab, var(--kp-leaf) 12%, transparent), transparent 56%); } [data-theme="dark"][data-season="spring"] .kp-lite { --lite-season-image: url("img/app/backdrop/spring-night.webp"); --lite-season-wash: radial-gradient(130% 85% at 50% -12%, color-mix(in oklab, var(--kp-leaf) 20%, transparent), transparent 62%); } /* LÉTO — zlaté teplo */ [data-season="summer"] .kp-lite { --lite-season-image: url("img/app/backdrop/summer-day.webp"); --lite-season-wash: radial-gradient(130% 85% at 50% -12%, color-mix(in oklab, var(--kp-gold) 12%, transparent), transparent 56%); } [data-theme="dark"][data-season="summer"] .kp-lite { --lite-season-image: url("img/app/backdrop/summer-night.webp"); --lite-season-wash: radial-gradient(130% 85% at 50% -12%, color-mix(in oklab, var(--kp-gold) 18%, transparent), transparent 62%); } /* PODZIM — jantar a rez */ [data-season="autumn"] .kp-lite { --lite-season-image: url("img/app/backdrop/autumn-day.webp"); --lite-season-wash: radial-gradient(130% 85% at 50% -12%, color-mix(in oklab, var(--kp-terracotta) 12%, transparent), transparent 56%); } [data-theme="dark"][data-season="autumn"] .kp-lite { --lite-season-image: url("img/app/backdrop/autumn-night.webp"); --lite-season-wash: radial-gradient(130% 85% at 50% -12%, color-mix(in oklab, var(--kp-terracotta) 20%, transparent), transparent 62%); } /* ZIMA — chladná modrá */ [data-season="winter"] .kp-lite { --lite-season-image: url("img/app/backdrop/winter-day.webp"); --lite-season-wash: radial-gradient(130% 85% at 50% -12%, color-mix(in oklab, var(--kp-sky) 12%, transparent), transparent 56%); } [data-theme="dark"][data-season="winter"] .kp-lite { --lite-season-image: url("img/app/backdrop/winter-night.webp"); --lite-season-wash: radial-gradient(130% 85% at 50% -12%, color-mix(in oklab, var(--kp-sky) 20%, transparent), transparent 62%); } /* ---- rail --------------------------------------------------------------- */ .kp-lite__rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0; background: var(--lite-page); border-right: 1px solid var(--kp-line); } .kp-lite__railbtn { display: flex; align-items: center; justify-content: center; gap: 0; width: 46px; height: 46px; border: 0; border-radius: 13px; /* Klidová položka má jemné podbarvení — bez něj menu na velké klidové ploše ztrácelo tvar jednotlivých tlačítek, byly to jen plovoucí ikony. `--accent`, ne značkový `--kp-terracotta` — rail je teď osobní barva (viz `is-active`/`:hover` níž a komentář u `--accent-h` v `kp-brand.css`), ne pevná terakota bez ohledu na volbu v panelu Vzhled. */ background: color-mix(in oklab, var(--accent) 5%, transparent); /* Klidová položka je neutrální (tlumený inkoust) — barvu dostane až aktivní stav (`.is-active` níž) nebo najetí myší. Dřív měla terakotu natvrdo i v klidu, takže se ve světlém motivu celé menu tvářilo jako „napůl aktivní" — přesně stejný vzorec (klid = inkoust, aktivní = akcent) už měl tmavý motiv o pár řádků níž. */ color: color-mix(in oklab, var(--kp-ink) 62%, transparent); cursor: pointer; transition: background 0.16s ease, color 0.16s ease; } .kp-lite__railbtn:hover { background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--accent); } /* Ikona se pod kurzorem posune o pixel nahoru — dost na to, aby dlaždice působila jako tlačítko, ne dost na to, aby to bylo vidět jako animace. */ .kp-lite__railico { transition: transform var(--motion-durationFast, 140ms) var(--motion-easing, ease); } .kp-lite__railbtn:hover .kp-lite__railico { transform: translateY(-1px); } :root[data-motion="reduced"] .kp-lite__railico { transition: none; } :root[data-motion="reduced"] .kp-lite__railbtn:hover .kp-lite__railico { transform: none; } .kp-lite__railbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .kp-lite__railbtn.is-active { background: color-mix(in oklab, var(--accent) 10%, var(--kp-surface)); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 16%, transparent); } .kp-lite__railbtn--foot { margin-top: auto; } /* Burger je nad menu jako samostatný ovladač, ne položka navigace — bez klidového podbarvení, na rozdíl od všeho pod ním. Předtím to platilo jen pro tmavý motiv ([data-theme="dark"] override níž), takže ve světlém zůstal viset stejný krémový podklad jako na běžných položkách. */ .kp-lite__burger { color: var(--kp-ink-faint); background: transparent; } .kp-lite__railico { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; } .kp-lite__railico svg, .kp-lite__railbtn > svg { display: block; width: 24px; height: 24px; overflow: visible; } /* Vejce a kapka jsou v předloze 3D rendery, ne tahy — vlastní barvu si nesou samy, takže je `color` railu nesmí přebarvit. */ .kp-lite__railico img { width: 26px; height: 26px; object-fit: contain; } /* Na velkém displeji je dost místa, ať ikony trochu vynikou — tlačítko roste s nimi, aby zůstal stejný odstup od okraje jako na menších šířkách. */ @media (min-width: 1440px) { .kp-lite__railbtn { width: 58px; height: 58px; } .kp-lite__railico, .kp-lite__railico svg, .kp-lite__railbtn > svg { width: 36px; height: 36px; } .kp-lite__railico img { width: 38px; height: 38px; } } /* Tmavý režim: rail ze značkových tokenů, ne z natvrdo opsaných hexů návrhu. Napevno zadané #141717 / #1A1E1E nereagovalo na panel Vzhled, takže po změně akcentu zůstalo menu jediným studeným místem v aplikaci. */ [data-theme="dark"] .kp-lite__rail { background: var(--kp-cream-3); } /* Klidové podbarvení ze značkového tokenu, ne z natvrdo psané rgba(255,255, 255,.04) — ta reagovala jen na tmavý motiv (na bílém pozadí by zmizela do ztracena) a světlý rail tak zůstával jediný bez podbarvení položek. Barva je stejná v obou motivech (viz báze), jen podklad je jinak tónovaný. */ [data-theme="dark"] .kp-lite__railbtn { background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .kp-lite__railbtn:hover { background: rgba(255, 255, 255, 0.08); color: var(--accent); } /* Aktivní položka drží osobní akcent appky (`--accent` — panel Vzhled, posuvník „Odstín akcentu"), ne pevně zadanou zeleň. */ [data-theme="dark"] .kp-lite__railbtn.is-active { background: color-mix(in oklab, var(--accent) 20%, transparent); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 26%, transparent); } /* Popisek se ukáže jen v rozbaleném railu — `max-width`/`opacity` místo `display`, aby se dal animovat stejně jako zbytek přechodu (display nejde přechodem interpolovat, jen skočí). `overflow: hidden` drží neviditelný text ve sbaleném stavu bez šířky. */ .kp-lite__raillabel { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: max-width var(--t-collapse, 280ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), opacity calc(var(--t-collapse, 280ms) * 0.6) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); } /* ---- rozbalený rail (min/max menu) -------------------------------------- */ .kp-lite.is-railopen { grid-template-columns: 210px minmax(0, 1fr); } .kp-lite.is-railopen .kp-lite__rail { align-items: stretch; padding-inline: 12px; } /* Výška se NEPŘEPISUJE — dědí ze základního pravidla (46px, 58px na velkém displeji). Natvrdo psaných 44px dřív dělalo rozbalenou položku o pár px nižší než sbalenou, takže stejně velká ikona uvnitř měla míň dýchacího prostoru a opticky se zdála menší, i když jí ani pixel neubylo. */ .kp-lite.is-railopen .kp-lite__railbtn { width: 100%; justify-content: flex-start; gap: 12px; padding: 0 12px; } .kp-lite.is-railopen .kp-lite__burger { align-self: flex-start; } .kp-lite.is-railopen .kp-lite__raillabel { max-width: 160px; opacity: 1; } /* Redukovaný pohyb: přechod je okamžitý skok, žádná animace. Stejná výjimka jako u zbytku appky (`kp-agata.css`, hover posun ikony railu výš). */ :root[data-motion="reduced"] .kp-lite, :root[data-motion="reduced"] .kp-lite__raillabel { transition: none; } /* ---- main --------------------------------------------------------------- */ .kp-lite__main { min-width: 0; overflow-y: auto; /* Vlastní proměnná, ne jen hodnota v `padding` — lišta (níž) potřebuje přesně tohle číslo, aby se svým pozadím natáhla do stejné hrany, do které sahá `.kp-lite__main`'s vlastní odsazení. Natvrdo `40px` by na užších stolech (kde `3vw` vyjde míň) přestřelilo okraj. */ --kp-lite-main-px: clamp(16px, 3vw, 40px); /* BEZ horního odsazení — sticky prvek se nedokáže přilepit blíž ke skutečné hraně okna, než kam sahá odsazení jeho rolovacího předka (naměřeno: 20 px nahoře nechalo lištu trvale viset 20 px pod viewportem, i po odrolování — zákazník to popsal jako „lišta není úplně na vrchní straně stránky" a skrz tu škvíru prosvítal odrolovaný obsah). Odsazení nad obsahem teď nese `.kp-lite__inner` vlastním `margin-top`, kam sticky nedosahuje a nemá ho tedy čím omezit. */ padding: 0 var(--kp-lite-main-px) 40px; /* Vztažný rozměr pro `cqb` (viz `.kp-ag--screen` / `.kpc`). `min-height: 100%` by na tenhle scrollport neviděl — mezi ním a obrazovkou leží `.kp-lite__inner`, blok bez vlastní výšky, a procenta se přes něj nepřenesou (jeho výška je „auto", tedy z pohledu potomků neurčitá). Kontejnerová jednotka se naopak dívá skrz jakýkoli počet mezičlánků rovnou na nejbližšího předka s `container-type`. */ container-type: size; /* Vypnuté scroll anchoring. Prohlížeč jinak sám poposune `scrollTop`, když se nad viditelnou částí obsahu něco přerozvrhne (typicky obrázek, který dorazí a dosadí si rozměr až po prvním vykreslení) — u Agátina doku by to dokázalo odsunout scroll pár pixelů od skutečné spodní hrany, kterou `kpScrollOwnerToBottom` nastavil, a v té škvíře by se objevil kousek neroztřeného textu pod dokem. Rolování řídí JS explicitně, prohlížeč do toho nemá co opravovat. */ overflow-anchor: none; } /* Zámek scrollu pozadí, dokud je otevřený panel Vzhled/Nálada — jinak dokázal prst na mobilu prokliznout mimo úzkou plovoucí kartu a rozjet stránku POD ní, zatímco karta sama (position: fixed) zůstala vizuálně na místě. Vypadalo to, jako by byl uživatel „zaseknutý" — nic se neposunulo tam, kde to čekal. Panely samy jsou mimo tenhle prvek (sourozenci `.kp-lite`, ne jeho potomci), takže `overflow: hidden` tady jejich vlastní scroll nijak neomezí. */ .kp-lite__main--locked { overflow: hidden; } /* Obrazovky s vlastním ukotveným dokem (Agáta, Komunita) nechtějí tohle odsazení navrch — dok si nese vlastní odsazení od hrany sám (`.kp-ag__dock` / `.kpc__dock`) a `.kp-lite__main`'s odsazení by ho zvedlo o dalších 40 px navíc. `position: sticky; bottom: 0` uvnitř pak zastaví PŘESNĚ na hraně tohohle odsazení — proto tu zůstává `--kp-lite-edge-gap` (dýchací mezera od skutečné hrany okna), ne rovnou `0`: nulová mezera dělala z doku panel nalepený na sklo prohlížeče. Třídu píše `LiteApp.razor` (`IsDockScreen`). */ .kp-lite__main--flush { padding-bottom: var(--kp-lite-edge-gap); } /* Jeden sloupec pro lištu i obsah, ať nadpis sedí přesně nad kartami. Šířka je na jednom místě schválně: lišta je od obsahu oddělená (kvůli sticky), ale musí s ním zůstat zarovnaná. */ .kp-lite__inner, .kp-lite__topbarin { max-width: 1120px; margin: 0 auto; } /* ---- horní lišta -------------------------------------------------------- */ /* Proč má lišta vlastní plochu: Leží na SEZÓNNÍ FOTCE (`--lite-season-image`), ne na kartě, a závoj nad fotkou je slabý (22–40 % barvy stránky). Naměřený rozptyl jasu podkladu pod textem lišty byl 25,8 (světlý) / 26,6 (tmavý) proti 0,6 / 0,4 uvnitř karty — rozsah 143–248, tedy fotka prosvítá skoro v plné síle. Text na tak neklidné ploše čte jako zašedlý, i když má správnou barvu; přesně to zákazník popsal jako „nahoře je to vybledlé". Plocha je SKLENĚNÁ z rodiny `--kp-glass-*` (forge-tokens.css), stejně jako přihlašovací karta: posuvník „Sklo" v panelu Vzhled píše do téhle rodiny, takže vlastní `blur(18px)` by znamenal plochu, na kterou nedosáhne. To je přesně chyba, kvůli které ta rodina vznikla. Rozostření podklad srovná, výplň ho ztlumí — fotka pod ní zůstane vidět jako prostor, ale přestane být rušná. Lišta je zároveň `sticky`. Obrazovky lite verze rolují (hejno, nastavení, objednávka krmiva) a nadpis s drobečky je jediná orientace, kterou tu uživatel má — `_screen` není v URL, takže po odrolování dolů by nezbylo nic, co řekne „kde jsem a kudy zpátky". */ /* Lišta se chová přesně jako přechodová hlavička webu (`.kp-header--overlay` v kp-hero.css): PRŮHLEDNÁ v klidu, sklo se objeví teprve při rolování — stejný mechanismus (třída `is-scrolled`, psaná stejným posluchačem v kp-chat.js, jen na `.kp-lite__main` místo `window.scrollY`), stejný recept skla (`color-mix` + `backdrop-filter` + spodní lem). Předchozí pokus řešil totéž samostatnou maskovanou vrstvou s velkým záporným přesahem — na živé stránce z toho byla rozmazaná šmouha přes půl obrazovky, ne čistá lišta. Přepínaná třída na SKUTEČNÉM pozadí lišty žádnou takovou vrstvu nepotřebuje. Mobile-first: základ (do 640px) je lišta V TOKU, ne lepivá — obrazovka je nízká, lišta je tam zalomená na dva řádky a ukrojit z ní pětinu výšky by bylo dražší než mít nadpis pořád po ruce (kontext tam drží lepivá hlavička Agáty). Sklo a lepivost přibývají až od 641 px. */ .kp-lite__topbar { margin-bottom: 18px; } @media (min-width: 641px) { /* Kde se zastaví lepivá hlavička Agáty — pod lištou (~58 px, naměřeno na živé aplikaci), plus dýchací mezera, ať na sebe nikdy nenalehnou. Kdyby lišta na nějaké obrazovce vyrostla (delší drobečky), nic se nerozbije — lišta má vyšší `z-index` a hlavičku by v krajním případě jen překryla. */ .kp-lite { --kp-lite-topbar-h: calc(58px + var(--kp-lite-edge-gap)); } /* Odsazení, které dřív nesla `.kp-lite__main` (a bránilo liště přilepit se ke skutečné hraně okna), teď nese OBSAH pod lištou — sticky prvek nad ním na tenhle okraj nenarazí. */ .kp-lite__inner { margin-top: 20px; } /* Kolik místa nad `.kp-lite__inner` zabírá lišta i s odsazením — vlastní výška (~58px, TOKEN výš) plus tenhle margin-top (20px). Agátin i komunitní chat na to obojí navazují (`kp-agata.css`/`kp-chat.css`): jejich `min-height: 100cqb` počítá proti celé výšce scrollportu (`.kp-lite__main`), ne proti místu, které jim OPRAVDU zbývá — bez odečtení tohohle čísla byl obsah vždycky o tolikhle vyšší, než kolik se vejde, a stránka měla svislý posuvník, i když se zprávy do viditelné plochy klidně vešly. */ .kp-lite { --kp-lite-content-top: calc(58px + 20px); } /* `kp-lite__topbarwrap` nese JEN sticky a přesah do stran — žádné sklo, žádný `backdrop-filter`. Viz komentář u markupu v `LiteApp.razor`. */ .kp-lite__topbarwrap { position: sticky; top: 0; z-index: 20; margin: 0 calc(-1 * var(--kp-lite-main-px)) 18px; } .kp-lite__topbar { padding: 8px var(--kp-lite-main-px); transition: background-color var(--motion-durationBase, 220ms) var(--motion-easing, ease), border-color var(--motion-durationBase, 220ms) var(--motion-easing, ease); border-bottom: 1px solid transparent; } .kp-lite__main.is-scrolled .kp-lite__topbar { background: color-mix(in oklab, var(--lite-page) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--kp-line-soft, var(--kp-line)); } :root[data-motion="reduced"] .kp-lite__topbar { transition: none; } } .kp-lite__topbarin { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Stín se počítá z inkoustu opačného motivu: ve světle tmavý závoj pod tmavým písmem by špinil, proto se míchá se `--lite-page`. Jedna deklarace, obě strany. */ .kp-lite__topbar .kp-lite__title, .kp-lite__topbar .kp-lite__date { text-shadow: 0 1px 3px color-mix(in oklab, var(--lite-page) 78%, transparent); } /* Datum bylo tlumené — na kartě by to bylo správně, na fotce z něj dělá šeď. Plný inkoust a stín z něj udělají čitelný údaj, ne ozdobu. */ .kp-lite__topbar .kp-lite__date { color: var(--kp-ink); } /* Drobečky nad nadpisem — sloupec, ať nadpis nepřeskakuje, když trasa chybí. */ .kp-lite__heading { display: grid; gap: 3px; min-width: 0; } /* Nadpis je vykreslený DVAKRÁT (LiteApp.razor, `RenderHeading()`) — jednou uvnitř lišty, jednou nad obsahem — a CSS podle šířky rozhodne, která kopie je vidět. Desktop: uvnitř lišty (jak vždycky byl). Mobil (níž): nad obsahem, lišta zůstává jen úzký proužek ikon — viz `@media (max-width: 640px)` u `.kp-lite__topbar`. */ .kp-lite__heading--onpage { display: none; } /* ---- drobečková navigace ------------------------------------------------ */ /* Proč vlastní, a ne `ForgeBreadcrumb`: Navigace v lite verzi je STAV (`_screen`), ne routa. Forge komponenta `Krejci.Forge.UI.Components.Navigation.ForgeBreadcrumb` bere `Items` jako `IReadOnlyList` a `Crumb(string Label, string Href)` umí jen odkaz na URL — rodičovská obrazovka tady žádnou nemá, takže by crumb buď nikam nevedl (prázdný Href = aktuální, neklikací položka), nebo by odnavigoval pryč z aplikace. Kopírujeme proto její značky i aria sémantiku (nav[aria-label] › položky › `aria-current="page"` na poslední › oddělovač `aria-hidden`) a rodiče neseme tlačítkem, které přepne `_screen`. Tlačítko je z principu dosažitelné klávesnicí, `` s onclick ne. */ .kp-lite__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.3; } /* Oddělovač sedí UVNITŘ položky za odkazem, stejně jako ho kreslí `forge-breadcrumb__item` — proto vlastní `gap`, ne jen mezera mřížky. */ .kp-lite__crumb { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .kp-lite__crumblink { padding: 0; border: 0; background: none; font: inherit; color: var(--kp-ink-soft); cursor: pointer; } .kp-lite__crumblink:hover { color: var(--accent); text-decoration: underline; } /* Odsazení 2 px, ne 3: mezera k oddělovači je 6 px, takže při 3 px se fokusový kroužek o lomítko otíral (naměřeno na snímku crumbs-light.png). */ .kp-lite__crumblink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Aktuální položka se od odkazů liší ŘEZEM, ne vybledlou barvou. Nabízel se `--kp-ink-faint` (#8B8173), jenže na ploše lišty (jas 243) má kontrast 3,7 : 1 — pod hranicí WCAG AA 4,5 : 1 pro text téhle velikosti. `--kp-ink-soft` dává 7,5 : 1 ve světle a 6,9 : 1 ve tmě. Vybledlý smí zůstat jen oddělovač: ten je `aria-hidden` a nenese informaci. */ .kp-lite__crumbnow { color: var(--kp-ink-soft); font-weight: 600; } .kp-lite__crumbsep { color: var(--kp-ink-faint); } .kp-lite__title { margin: 0; font-family: var(--kp-font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; color: var(--kp-ink); } /* ---- horní lišta aplikace: jedna řada, jedna velikost ------------------- Do 2026-08-26 měl každý ovládací prvek v liště jinou výšku — naměřeno 34, 40, 38, 38 a 34 px, každý začínal jinde (21 až 29 px od horní hrany). Řada proto nevypadala jako řada. Nejhorší byl výběr jazyka: je to TÁŽ komponenta jako v hlavičce webu a chytal si její mobilní pravidla (opraveno v kp-site.css), ale i tak je jeho tlačítko dělané na 40 px. Místo dohadování s každou komponentou zvlášť určuje velikost LIŠTA: `--kp-lite-tool` je jediné číslo, ze kterého se odvozuje výška prvků i rezervované místo pod lištou. Změní-li se, změní se obojí zároveň — dřív to byly dvě nezávislé hodnoty a rozešly se, takže se nadpis stránky schoval pod lištu. */ .kp-lite__tools { --kp-lite-tool: 38px; display: flex; align-items: center; gap: 8px; } /* Každý prvek v liště na stejnou výšku, ať přijde odkudkoli. */ .kp-lite__tools > * { flex: 0 0 auto; } .kp-lite__tools .kp-lite__iconbtn, .kp-lite__tools .kpa-back, .kp-lite__tools .kp-lang__btn { height: var(--kp-lite-tool); min-height: var(--kp-lite-tool); margin: 0; } .kp-lite__tools .kp-lite__iconbtn { width: var(--kp-lite-tool); } .kp-lite__tools .kp-lang { margin: 0; } /* Pořadí zleva doprava. Účet je ZÁMĚRNĚ poslední: je to nejosobnější prvek lišty a palec pravé ruky na něj dosáhne nejsnáz. Dřív ho výběr jazyka přeskočil na poslední místo cizím `order: 3`. */ .kp-lite__tools .kpa-back { order: 1; } .kp-lite__tools .kp-lite__mode { order: 2; } .kp-lite__tools .kp-lang { order: 3; } .kp-lite__tools .kp-lite__iconbtn { order: 4; } .kp-lite__tools .kp-lite__avabtn { order: 5; } .kp-lite__caret { width: 18px; height: 18px; color: var(--kp-ink-faint); vertical-align: middle; } .kp-lite__date { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--kp-ink-soft); white-space: nowrap; } .kp-lite__date svg { width: 17px; height: 17px; } @media (max-width: 720px) { .kp-lite__date { display: none; } } /* Přepínač Plná / Jednoduchá — dva segmenty v pilulce. */ .kp-lite__mode { display: inline-flex; padding: 3px; border-radius: 999px; background: color-mix(in oklab, var(--kp-ink) 8%, transparent); border: 1px solid var(--kp-line); } .kp-lite__mode a { padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--kp-ink-soft); text-decoration: none; transition: background 0.16s ease, color 0.16s ease; } .kp-lite__mode a:hover { color: var(--kp-ink); } .kp-lite__mode a.is-on { background: var(--kp-green); color: #FFFFFF; } .kp-lite__iconbtn { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--kp-line); border-radius: 12px; background: var(--kp-surface); color: var(--kp-ink-soft); cursor: pointer; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease; } /* Zamčený Vzhled: posuvníky + malý zámeček v rohu. Ikona říká „tohle je Vzhled", odznak říká „zamčeno" — dřív to byl velký zámek bez kontextu. */ .kp-lite__iconbtn--locked { position: relative; } /* Odznak zamčeného tlačítka v horní liště nese `.kp-gate__badge` — tentýž, jaký mají zamčené položky menu. Vlastní `.kp-lite__lockbadge` s visacím zámkem tu byl do 2026-08-28 a byl to jediný zbytek jazyka „sem nesmíš". */ .kp-lite__iconbtn--locked { position: relative; } .kp-lite__iconbtn--locked .kp-gate__badge { right: -5px; top: -5px; width: 15px; } .kp-lite__iconbtn:hover { color: var(--kp-ink); border-color: var(--accent); } .kp-lite__iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .kp-lite__iconbtn svg { width: 17px; height: 17px; } /* Přehled v lite: větší karty + vzdušnější mřížka, ať vyplní plochu jako předloha (v plné appce zůstává panel kompaktní). */ .kp-lite .kp-fov__shell--norail { background: transparent; box-shadow: none; border: 0; } .kp-lite .kp-fov__grid { gap: 14px; } /* Deska Přehledu stojí v předloze samostatně, a tak si nese vlastní vnitřní okraj (`.kp-fov__main`, 18/20 px). V aplikaci je ale vsazená mezi ostatní obsah stránky, kde okraj drží shell — ten vnitřní ji pak odsadí o 20 px dovnitř proti Agátině kartě nad ní. Naměřeno: karta 194–1314, mřížka 214–1294. Odsazení tady patří stránce, ne desce. */ .kp-lite .kp-fov__main { padding: 0; } /* Šest dlaždic Přehledu jsou si v aplikaci rovny. V předloze byl první sloupec o 16 % širší, protože nesl velký koš s vejci přes půlku karty; v aplikaci mají všechny karty stejnou anatomii, takže z toho zbylo jen to, že první sloupec o 53 px vyčnívá. Selektor je schválně přes `__main` — `.kp-lite__pair` a `.kp-lite__eco3` sdílejí třídu `.kp-fov__grid` a mají nižší specificitu, přebít je by je rozbilo. */ .kp-lite .kp-fov__main > .kp-fov__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Karty Přehledu = karty Moje hejno. Je to jedna aplikace, takže obě obrazovky sdílejí povrch, rádius, lem i stín — jinak vypadá přepnutí v menu jako přechod do jiného produktu. */ .kp-lite .kp-fov__card { min-height: 104px; padding: 16px 18px; background: var(--lite-card); border: 1px solid var(--kp-line); /* 22 px jako karta slepičky — o čtyři pixely jinde by nikdo neřekl proč, ale vedle sebe je to vidět. */ border-radius: 22px; box-shadow: var(--kp-shadow-sm); } /* Horní světelný lem: karta má hranu, na kterou dopadá světlo shora. Design-bible 09 ho předepisuje glass panelům; tady je desetkrát slabší, takže jen odsadí kartu od pozadí, aniž by z ní dělal sklo. */ [data-theme="dark"] .kp-lite .kp-fov__card, [data-theme="dark"] .kp-lite .henc, [data-theme="dark"] .kp-lite .kp-eggstat, [data-theme="dark"] .kp-lite .kp-lite__empty { box-shadow: var(--kp-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* Karta vede na svou obrazovku — zvedne se pod kurzorem stejně jako karty slepiček, aby bylo poznat, že je to cesta dál, ne jen údaj. */ .kp-lite .kp-fov__card.is-clickable { cursor: pointer; transition: transform var(--motion-durationFast, 150ms) var(--motion-easing, ease), border-color var(--motion-durationFast, 150ms) var(--motion-easing, ease), box-shadow var(--motion-durationFast, 150ms) var(--motion-easing, ease); } .kp-lite .kp-fov__card.is-clickable:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 34%, var(--kp-line)); box-shadow: var(--kp-shadow-md, 0 10px 26px rgba(10, 20, 14, 0.28)); } .kp-lite .kp-fov__card.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } :root[data-motion="reduced"] .kp-lite .kp-fov__card.is-clickable { transition: none; } :root[data-motion="reduced"] .kp-lite .kp-fov__card.is-clickable:hover { transform: none; } /* Velikost čísla drží panel sám (naměřená z předlohy). Lokální 30 px tu zbylo z doby, kdy byl základ 26 px — teď by číslo naopak zmenšovalo. */ /* ---- Slepičky (karty) — komponenta LiteHenCard -------------------------- */ .kp-hens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .henc { position: relative; display: flex; flex-direction: column; /* Nahoře žádný padding — portrét sedí až k okrajům rámečku a slepička je zdola oříznutá o spodní hranu portrétu. */ padding: 0 18px 18px; border-radius: 22px; background: var(--lite-card); border: 1px solid var(--kp-line); box-shadow: var(--kp-shadow-sm); overflow: hidden; } /* Rožček vpravo nahoře — jemné „zaškrtnuto / v pořádku". */ /* Stav dneška v rohu karty. Do 2026-08-28 tu bylo `.henc__edit` — zlatá fajfka v tlačítku, které nic nedělalo a svítilo u KAŽDÉ slepičky bez ohledu na to, jestli snesla. Karta tím u té, co dnes nesnesla nic, tvrdila „všechno v pořádku"; zpětná vazba zněla „přijde mi to takový nepřehledný" a byla přesná. Kruh s plnou výplní, ne obrys: rozdíl zelená/červená musí být čitelný z odstupu, kdy je karta jednou z patnácti, a tenká linka se v tom měřítku ztratí. */ .henc__today { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; color: #FFFFFF; box-shadow: 0 2px 6px rgba(30, 24, 16, 0.28); } .henc__today svg { width: 15px; height: 15px; } .henc__today--yes { background: var(--kp-leaf, #4F9A3F); } /* Terakota z palety, ne systémová červená: karta má zůstat součástí značky i ve chvíli, kdy něco vytýká. */ .henc__today--no { background: var(--kp-terracotta, #B4553F); } /* Portrét: full-bleed k okrajům rámečku. Obrázek je předem normalizovaný čtverec (hlava nahoře, tělo dole) — kontejner má poměr stran 1 : 0.9, takže zobrazí horních ~90 % čtverce a spodek (nožičky přesahující plátno) se ořízne o spodní hranu (overflow hidden) → u všech karet stejný ořez u břicha jako v předloze. Jemný teplý podklad + záře, ať slepička „sedí". */ .henc__portrait { position: relative; margin: 0 -18px 10px; aspect-ratio: 1 / 0.55; /* nižší portrét → slepice je víc oříznutá zespodu (nohy) */ overflow: hidden; /* Průhledné — karta je pak JEDNOLITÁ (plocha za slepicí = barva karty), přesně jako v předloze. Žádný druhý/třetí tón. */ background: transparent; } .henc__img { position: absolute; top: 0; left: 44%; /* mírně vlevo → mezera vpravo pro oblouk */ transform: translateX(-50%); width: 66%; /* slepice větší; nižší portrét ji ořízne zespodu */ height: auto; filter: drop-shadow(0 6px 10px rgba(40, 30, 20, 0.15)); } /* Zdravotní oblouk — pravá polovina kruhu (otevřená doleva ke slepičce), zaoblené konce, svisle vystředěná na tělo. Poměr stran 1 : 2 odpovídá půlkružnici (šířka = poloměr, výška = průměr). Barvu nese `color` (currentColor) = vypočtená barva zdraví (červená→žlutá→zelená). */ .henc__arc { /* PŘESNĚ NAMĚŘENO z předlohy vůči kartě: vodorovně box 63–85 % (vyboulení k ~81 %), svisle střed ~54 %. */ position: absolute; top: 34%; /* níž — začíná u ořezu slepice, pod křídly */ height: 60%; /* 34–94 %, o kus větší a kulatější */ right: 9%; /* posunuto mírně doprava (pravá hrana boxu v 91 %) */ width: 20%; /* kulatá „)" (viewBox 32×60) mimo roztažená křídla */ overflow: visible; z-index: 1; } .henc__arc path { stroke-linecap: round; } .henc__name { font-family: var(--kp-font-display); font-weight: 600; font-size: 21px; line-height: 1.1; color: var(--kp-ink); margin: 0 0 8px; } .henc__row { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 13px; color: var(--kp-ink-soft); margin-top: 5px; } .henc__row > span:not(.henc__dot) { flex: 1; } .henc__row b { color: var(--kp-ink); font-weight: 600; } .henc__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } /* Řádek „Dnes" nemá tečku — zarovnej text pod „Zdraví". */ .henc__row--nodot { padding-left: 16px; } .henc__actlabel { margin-top: 12px; font-size: 12px; color: var(--kp-ink-soft); } /* aspect-ratio = viewBox 120/28 → jednotné měřítko → KULATÉ tečky (ne oválné); širší (skoro k okrajům) a nižší graf. */ .henc__spark { display: block; width: 100%; aspect-ratio: 120 / 28; height: auto; margin-top: 6px; } /* Proužek zdraví pod řádkem s procenty. Tenčí než měřáky u vody a krmiva — je to doplněk k číslu, ne hlavní údaj karty. */ .henc__health { width: 100%; height: 7px; margin-top: 7px; border-radius: 999px; background: var(--lite-track); overflow: hidden; } .henc__healthfill { display: block; height: 100%; border-radius: 999px; transition: width var(--motion-durationBase, 260ms) var(--motion-easing, ease); } :root[data-motion="reduced"] .henc__healthfill { transition: none; } /* Snáška za týden / měsíc / rok — tři sloupečky pod grafem. */ .henc__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--kp-line); } .henc__stat { text-align: center; } .henc__stat dt { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--kp-ink-soft); } .henc__stat dd { margin: 2px 0 0; font-family: var(--kp-font-display); font-weight: 600; font-size: 17px; line-height: 1.1; color: var(--kp-ink); } /* ---- dvojice karet vedle sebe ------------------------------------------- */ .kp-lite__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Textový sloupec dělené karty musí růst — jinak zůstane proužek stavu široký jako nejdelší slovo nad ním. */ .kp-lite .kp-fov__card--split > div:first-child { flex: 1; min-width: 0; } /* Na široké kartě jde graf přes celou šířku a popisky se vypínají v C# (`labels: false`). Omezovat šířku bylo řešení naruby — graf zůstal krátký a vedle něj lán prázdna. Bez popisků má viewBox 120×20, ne 120×28. */ .kp-lite__pair .kp-lite__bspark { aspect-ratio: 120 / 20; margin-top: 14px; } /* ---- ruční zápis snášky (režim bez čidel) ------------------------------- */ .kp-lite .kp-lite__manual { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding: 18px 20px; } .kp-lite__manualnote { margin: 10px 0 0; max-width: 42ch; font-size: 13px; line-height: 1.5; color: var(--kp-ink-soft); } /* Krokovadlo: dvě velká tlačítka a číslo mezi nimi. Na dotyk se míří prstem, takže 44 px — menší terč se na mobilu netrefí. */ .kp-lite__stepper { display: flex; align-items: center; gap: 14px; margin-top: 10px; } .kp-lite__stepper b { min-width: 2.2ch; text-align: center; font-family: var(--kp-font-display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--kp-ink); } .kp-lite__stepper button { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--kp-line-strong, var(--kp-line)); background: var(--lite-track); color: var(--kp-ink); font-size: 24px; line-height: 1; cursor: pointer; transition: background var(--motion-durationFast, 140ms) var(--motion-easing, ease), border-color var(--motion-durationFast, 140ms) var(--motion-easing, ease); } .kp-lite__stepper button:hover:not(:disabled) { background: color-mix(in oklab, var(--accent) 16%, transparent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); } .kp-lite__stepper button:disabled { opacity: 0.4; cursor: not-allowed; } .kp-lite__stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :root[data-motion="reduced"] .kp-lite__stepper button { transition: none; } /* Karta se zápisem přímo v přehledu — jen krokovadlo, bez ilustrace. */ .kp-lite .kp-lite__entry .kp-lite__stepper { margin-top: 6px; } /* ---- vysvětlující karta ------------------------------------------------- */ .kp-lite__hint { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--kp-ink-soft); } .kp-lite__linkbtn { margin-top: 10px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; } .kp-lite__linkbtn:hover { text-decoration: underline; } .kp-lite__linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---- prázdný stav ------------------------------------------------------- */ .kp-lite__empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 24px; background: var(--lite-card); border: 1px solid var(--kp-line); border-radius: 22px; box-shadow: var(--kp-shadow-sm); } .kp-lite__empty b { font-family: var(--kp-font-display); font-size: 21px; font-weight: 600; color: var(--kp-ink); } .kp-lite__empty p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--kp-ink-soft); } .kp-lite__emptyico { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); } .kp-lite__emptyico svg { width: 30px; height: 30px; } .kp-lite__emptyico img { width: 30px; height: 30px; object-fit: contain; } /* Co čidla přinesou — ikona + věta, ne odrážky. */ .kp-lite__gains { display: grid; gap: 10px; margin: 4px 0 6px; padding: 0; list-style: none; text-align: left; } .kp-lite__gains li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--kp-ink); } .kp-lite__gains span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; background: var(--lite-track); color: var(--kp-ink-soft); } .kp-lite__gains svg { width: 19px; height: 19px; } /* ---- nastavení ---------------------------------------------------------- */ .kp-lite .kp-lite__setcard { padding: 18px 20px 20px; } .kp-lite__setnote { margin: 4px 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--kp-ink-soft); } .kp-lite__modes { display: grid; gap: 10px; } /* Volba režimu je rozhodnutí, ne přepínač v řádku — proto celá karta jako terč a popis pod názvem. */ .kp-lite__mode2 { display: flex; align-items: flex-start; gap: 13px; padding: 14px 15px; border-radius: 16px; border: 1px solid var(--kp-line); background: var(--lite-track); text-align: left; font: inherit; color: var(--kp-ink); cursor: pointer; transition: border-color var(--motion-durationFast, 140ms) var(--motion-easing, ease), background var(--motion-durationFast, 140ms) var(--motion-easing, ease); } .kp-lite__mode2:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--kp-line)); } .kp-lite__mode2:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .kp-lite__mode2.is-on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); } .kp-lite__mode2ico { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 13px; background: var(--kp-surface); color: var(--kp-ink-soft); } .kp-lite__mode2.is-on .kp-lite__mode2ico { color: var(--accent); } .kp-lite__mode2ico svg { width: 21px; height: 21px; } .kp-lite__mode2ico img { width: 21px; height: 21px; object-fit: contain; } .kp-lite__mode2txt { display: grid; gap: 3px; } .kp-lite__mode2txt b { font-size: 15px; font-weight: 600; } .kp-lite__mode2txt small { font-size: 12.5px; line-height: 1.45; color: var(--kp-ink-soft); } .kp-lite__setlist { display: grid; gap: 11px; margin: 6px 0 16px; padding: 0; list-style: none; } .kp-lite__setlist li { display: grid; gap: 2px; font-size: 13.5px; } .kp-lite__setlist b { font-weight: 600; color: var(--kp-ink); } .kp-lite__setlist span { color: var(--kp-ink-soft); } /* ---- výhody členství (VIP / Super VIP) --------------------------------- */ /* Odrážky s fajfkou; hvězdné výhody Super VIP (autopilot + zamčená cena) dostanou zlatý proužek a jemné pozadí — zlatá = barva korunky VIP. Mix v oklab, ne oklch (past z CLAUDE.md); s tokeny se pozadí samo přizpůsobí tmavému motivu. */ .kp-lite__perks { display: grid; gap: 9px; margin: 6px 0 14px; padding: 0; list-style: none; } .kp-lite__perks li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.45; color: var(--kp-ink-soft); } .kp-lite__perks li::before { content: "✓"; position: absolute; left: 2px; top: 0; font-weight: 700; color: var(--kp-green-deep); } .kp-lite__perks b { font-weight: 600; color: var(--kp-ink); } .kp-lite__perks .kp-lite__perkstar { padding: 8px 10px 8px 30px; border-left: 3px solid var(--kp-gold); border-radius: 8px; background: color-mix(in oklab, var(--kp-gold) 11%, transparent); } .kp-lite__perks .kp-lite__perkstar::before { content: "★"; left: 10px; top: 8px; color: var(--kp-gold); } :root[data-motion="reduced"] .kp-lite__mode2 { transition: none; } /* ---- karta účtu: rozvržení a hierarchie akcí ---------------------------- */ /* Karta účtu přes celou šířku mřížky — jinak sedí jen v prvním sloupci (1.16fr) a vpravo zůstane osamělé prázdno. Uvnitř dva sloupce: vlevo údaje, vpravo akce. */ .kp-lite .kp-lite__acct, .kp-lite .kp-lite__wide { grid-column: 1 / -1; } .kp-lite__acctgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 24px; align-items: start; margin-top: 4px; } .kp-lite__acctinfo { min-width: 0; } /* Hlavička karty účtu: avatar + přezdívka/kraj. */ .kp-lite__accthead { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; } .kp-lite__acctwho { display: grid; gap: 1px; min-width: 0; } .kp-lite__acctwho b { font-family: var(--kp-font-display); font-size: 16px; font-weight: 600; color: var(--kp-ink); } .kp-lite__acctwho span { font-size: 13px; color: var(--kp-ink-soft); } /* Avatar v topbaru — pořád na očích; ťuknutí vede do Nastavení. */ .kp-lite__avabtn { display: inline-grid; place-items: center; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex: 0 0 auto; transition: transform var(--motion-durationFast, 140ms) var(--motion-easing, ease); } .kp-lite__avabtn:hover { transform: translateY(-1px); } .kp-lite__avabtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :root[data-motion="reduced"] .kp-lite__avabtn { transition: none; } :root[data-motion="reduced"] .kp-lite__avabtn:hover { transform: none; } /* Sdílecí formulář neroztahovat přes celou širokou kartu — pak i šipka selectu sedí blíž textu, ne osaměle u pravého kraje. */ .kp-lite__setcard .kp-field { max-width: 460px; } /* `.kp-lite__back` tu bylo pro odkaz „← Zpět do nastavení" pod sdílením. Cestu zpátky nese drobečková navigace v liště, ad-hoc odkazy zmizely a pravidlo s nimi — nedržíme mrtvé CSS pro značku, která se nekreslí. */ /* Akce se odlišují ROLÍ, ne jen tím, že jsou všechny zelené: nákup = primár (zelená, plná šířka), správa sdílení = sekundár (ghost), odhlášení = tichý odkaz vespod. Ragged sloupec stejných zelených tlačítek byl vjemově plochý — nešlo poznat, co je hlavní akce a co jen odchod. */ .kp-lite__acctact, .kp-lite__setact { display: grid; gap: 10px; align-content: start; } .kp-lite__setact { margin-top: 12px; } .kp-lite__acctact .kp-fov__cta, .kp-lite__setact .kp-fov__cta { width: 100%; min-width: 0; } .kp-lite__btnghost { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 11px 18px; border-radius: 11px; border: 1px solid var(--kp-line); background: var(--lite-track); color: var(--kp-ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color var(--motion-durationFast, 160ms) var(--motion-easing, ease), background var(--motion-durationFast, 160ms) var(--motion-easing, ease), color var(--motion-durationFast, 160ms) var(--motion-easing, ease); } .kp-lite__btnghost:hover { border-color: color-mix(in oklab, var(--accent) 55%, var(--kp-line)); background: color-mix(in oklab, var(--accent) 8%, var(--lite-track)); color: var(--accent); } .kp-lite__btnghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Plné tlačítko akce. Existovalo dřív jen jako JMÉNO TŘÍDY v markupu — `.kp-lite__btnprimary` se nikde nedefinovalo, takže dvě tlačítka v aplikaci vypadala jako holý systémový obdélník. Tvar i přechody jsou z `--btnghost`, aby ta dvojice vypadala jako jedna sada. */ .kp-lite__btnprimary { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; border-radius: 11px; border: 1px solid transparent; background: var(--accent); color: #FFFFFF; font: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background var(--motion-durationFast, 160ms) var(--motion-easing, ease), transform var(--motion-durationFast, 160ms) var(--motion-easing, ease); } .kp-lite__btnprimary:hover { background: var(--kp-a-deep, var(--accent)); } .kp-lite__btnprimary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } :root[data-motion="reduced"] .kp-lite__btnprimary { transition: none; } .kp-lite__btnquiet { justify-self: center; margin-top: 2px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--kp-ink-soft); text-decoration: none; border-radius: 8px; transition: color var(--motion-durationFast, 160ms) var(--motion-easing, ease); } .kp-lite__btnquiet:hover { color: var(--kp-ink); text-decoration: underline; } .kp-lite__btnquiet:focus-visible { outline: 2px solid var(--kp-ink-faint); outline-offset: 2px; } :root[data-motion="reduced"] .kp-lite__btnghost, :root[data-motion="reduced"] .kp-lite__btnquiet { transition: none; } @media (max-width: 640px) { .kp-lite__acctgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; } } /* ---- „Sdíleno se mnou" → otevření sdíleného hejna ----------------------- */ /* Řádek příchozího sdílení je klikací — otevře read-only pohled na hejno. */ .kp-lite__sharedrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--kp-line); border-radius: 12px; background: var(--lite-track); text-align: left; font: inherit; color: var(--kp-ink); cursor: pointer; transition: border-color var(--motion-durationFast, 150ms) var(--motion-easing, ease), background var(--motion-durationFast, 150ms) var(--motion-easing, ease); } .kp-lite__sharedrow:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--kp-line)); background: color-mix(in oklab, var(--accent) 7%, var(--lite-track)); } .kp-lite__sharedrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :root[data-motion="reduced"] .kp-lite__sharedrow { transition: none; } .kp-lite__sharedrowmain { display: grid; gap: 2px; min-width: 0; } .kp-lite__sharedrowmain b { font-weight: 600; color: var(--kp-ink); } .kp-lite__sharedrowmain span { font-size: 13px; color: var(--kp-ink-soft); } .kp-lite__openhint { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; } /* Hlavička otevřeného sdíleného hejna: avatar majitele + kdo/kraj/role + odznak. */ .kp-lite__sharedhead { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--kp-line); } .kp-lite__sharedwho { flex: 1; min-width: 0; } .kp-lite__sharedname { margin: 0; font-family: var(--kp-font-display); font-size: 19px; font-weight: 600; color: var(--kp-ink); } .kp-lite__sharedmeta { margin: 3px 0 0; font-size: 13px; color: var(--kp-ink-soft); } .kp-lite__sharedro { flex: 0 0 auto; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: color-mix(in oklab, var(--kp-ink) 8%, transparent); font-size: 12px; font-weight: 600; color: var(--kp-ink-soft); white-space: nowrap; } /* Rozpad práv „Co u tohoto hejna smíš". */ .kp-lite__perms { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; } .kp-lite__perms li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--kp-ink); } .kp-lite__perms li.is-off { color: var(--kp-ink-faint); } .kp-lite__perms svg { width: 18px; height: 18px; flex: 0 0 auto; } .kp-lite__perms li.is-on svg { color: var(--accent); } .kp-lite__perms li.is-off svg { color: var(--kp-ink-faint); } /* ---- objednávka krmiva (Krok 4) ----------------------------------------- */ /* CTA karta na obrazovce „Krmivo a voda" — text vlevo, tlačítko vpravo. */ .kp-lite__feedcta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .kp-lite__feedcta .kp-fov__cta { flex: 0 0 auto; min-width: 0; } .kp-lite__feedlist { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; } .kp-lite__feedrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--kp-line); background: var(--lite-track); } .kp-lite__feedinfo { display: grid; gap: 2px; min-width: 0; } .kp-lite__feedinfo b { font-family: var(--kp-font-display); font-size: 17px; color: var(--kp-ink); } .kp-lite__feedinfo span { font-size: 13px; color: var(--kp-ink-soft); } /* Kompaktnější stepper pro řádek balení (základní má 44px terče). */ .kp-lite__feedstep { margin: 0; gap: 10px; } .kp-lite__feedstep button { width: 38px; height: 38px; font-size: 20px; } .kp-lite__feedstep b { font-size: 22px; min-width: 1.6ch; } .kp-lite__feedsum { display: grid; gap: 7px; margin: 16px 0 14px; padding: 14px 0 0; border-top: 1px solid var(--kp-line); } .kp-lite__feedsum > div { display: flex; align-items: baseline; justify-content: space-between; } .kp-lite__feedsum dt { margin: 0; font-size: 13.5px; color: var(--kp-ink-soft); } .kp-lite__feedsum dd { margin: 0; font-size: 14px; color: var(--kp-ink); } .kp-lite__feedtotal dt { font-weight: 600; color: var(--kp-ink); } .kp-lite__feedtotal dd { font-family: var(--kp-font-display); font-weight: 600; font-size: 20px; color: var(--kp-ink); } /* Potvrzení objednávky. */ .kp-lite__feeddone { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 16px 10px; } .kp-lite__feeddone b { font-family: var(--kp-font-display); font-size: 19px; color: var(--kp-ink); } .kp-lite__feeddone p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--kp-ink-soft); } /* Potvrzovací „hotovo" ikona zůstává sémanticky zelená, ne osobní akcent — stejné pravidlo jako u kladného zůstatku a Agátina klidného tónu níž: úspěch/OK má napříč appkou jednu barvu bez ohledu na volbu v panelu Vzhled, jinak by si uživatel s červeným akcentem četl „hotovo" jako varování. */ .kp-lite__feeddone .kp-lite__emptyico { background: color-mix(in oklab, var(--kp-green-2, #54A046) 16%, transparent); color: var(--kp-green-2, #54A046); } .kp-lite__feeddone .kp-lite__btnghost { width: auto; margin-top: 6px; } /* ---- kamery kurníku (náhledy) ------------------------------------------- */ .kp-lite__cams { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .kp-lite__cam { border-radius: 18px; overflow: hidden; border: 1px solid var(--kp-line); background: var(--lite-card); box-shadow: var(--kp-shadow-sm); } /* Placeholder obrazu je ZÁMĚRNĚ tmavý — simuluje video, které je tmavé v obou motivech (živý obraz nesleduje motiv appky). Karta kolem je z tokenů. */ .kp-lite__camfeed { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% -10%, color-mix(in oklab, var(--kp-leaf) 22%, transparent), transparent 60%), linear-gradient(160deg, #1b2a25, #0f1613); color: rgba(255, 255, 255, 0.16); } .kp-lite__camico svg { width: 62px; height: 62px; } .kp-lite__camico img { width: 62px; height: 62px; object-fit: contain; } .kp-lite__camlive { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #FFFFFF; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .kp-lite__camdot { width: 7px; height: 7px; border-radius: 50%; background: #FF4D4D; animation: kp-camdot 1.8s ease-out infinite; } @keyframes kp-camdot { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(255, 77, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); } } :root[data-motion="reduced"] .kp-lite__camdot { animation: none; } .kp-lite__camfoot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 14px; } .kp-lite__camfoot b { font-family: var(--kp-font-display); font-weight: 600; font-size: 14.5px; color: var(--kp-ink); } .kp-lite__camfoot span { font-size: 12.5px; color: var(--kp-ink-soft); } /* ---- ekonomika hejna ---------------------------------------------------- */ .kp-lite__ecohead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .kp-lite__eco3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Kladný/záporný zůstatek zůstává zelená/terakota bez ohledu na osobní akcent — je to finanční SÉMANTIKA (zisk/ztráta), ne značkové tlačítko. */ .kp-lite__ecobal.is-plus { border-color: color-mix(in oklab, var(--kp-green-2, #54A046) 42%, var(--kp-line)); } .kp-lite__ecobal.is-plus .kp-fov__value { color: var(--kp-green-2, #54A046); } .kp-lite__ecobal.is-minus .kp-fov__value { color: var(--kp-terracotta, #C1502E); } .kp-lite__meter--eco { margin-top: 14px; } .kp-lite__meter--eco:first-of-type { margin-top: 0; } .kp-lite__fill--value { background: linear-gradient(90deg, var(--accent), var(--accent-hover)); } /* ---- předpověď snášky --------------------------------------------------- */ /* Minulost = plná zlatá (dědí z .kp-eggstat__col), „teď" = zelený akcent, budoucnost = šrafovaná (naznačuje odhad, ne měření). */ .kp-lite__fccol--now { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 90%, white 10%), var(--accent)) !important; } .kp-lite__fccol--future { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--kp-gold) 42%, transparent) 0 5px, transparent 5px 10px) !important; border: 1px dashed color-mix(in oklab, var(--kp-gold) 60%, var(--kp-line)); } .kp-lite__fclegend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--kp-ink-soft); } .kp-lite__fclegend li { display: inline-flex; align-items: center; gap: 7px; } .kp-lite__fcdot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; } .kp-lite__fcdot--past { background: var(--kp-gold); } .kp-lite__fcdot--now { background: var(--accent); } .kp-lite__fcdot--future { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--kp-gold) 55%, transparent) 0 3px, transparent 3px 6px); border: 1px dashed color-mix(in oklab, var(--kp-gold) 60%, var(--kp-line)); } /* ---- kronika / ročenka -------------------------------------------------- */ .kp-lite__timeline { position: relative; margin: 0; padding: 4px 0 4px 26px; list-style: none; } /* Svislá linka, kterou tečky „propíchnou" (halo v barvě stránky). */ .kp-lite__timeline::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 2px; background: var(--kp-line); } .kp-lite__tlitem { position: relative; padding-bottom: 14px; } .kp-lite__tlitem:last-child { padding-bottom: 0; } .kp-lite__tldot { position: absolute; left: -26px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--kp-gold); box-shadow: 0 0 0 4px var(--lite-page); z-index: 1; } .kp-lite__tlcard { display: flex; align-items: center; gap: 14px; padding: 12px 15px; border-radius: 16px; background: var(--lite-card); border: 1px solid var(--kp-line); box-shadow: var(--kp-shadow-sm); } .kp-lite__tlhen { width: 54px; height: 54px; border-radius: 13px; object-fit: cover; object-position: center top; flex: 0 0 auto; background: color-mix(in oklab, var(--kp-gold) 12%, var(--kp-surface)); } .kp-lite__tltext { min-width: 0; } /* Datum jako drobný „eyebrow" NAD nadpisem — ne osaměle daleko vpravo. */ .kp-lite__tldate { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in oklab, var(--kp-gold) 72%, var(--kp-ink-soft)); margin-bottom: 1px; } .kp-lite__tltitle { display: block; font-family: var(--kp-font-display); font-size: 15.5px; font-weight: 600; color: var(--kp-ink); } .kp-lite__tltext p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--kp-ink-soft); } /* ---- responzivita nových obrazovek (mobil) ------------------------------ */ @media (max-width: 640px) { .kp-lite__eco3 { grid-template-columns: minmax(0, 1fr) !important; } .kp-lite__ecohead { flex-direction: column; align-items: stretch; } .kp-lite__ecohead .kp-eggstat__tabs { width: 100%; } .kp-lite__ecohead .kp-eggstat__tab { flex: 1; text-align: center; } .kp-lite__tlhen { width: 46px; height: 46px; } } /* ---- mobilní spodní navigace + „Menu" sheet ----------------------------- */ /* Spodní lišta — na desktopu skrytá (navigaci nese levý rail); na mobilu ji zapíná @media výš. Pár hlavních cílů + tlačítko Menu. */ .kp-lite__mobnav { display: none; align-items: stretch; justify-content: space-around; gap: 2px; /* `14px`, ne `6px`: teď, co Safari na téhle šířce sama schovává svou adresní/nástrojovou lištu (viz `.kp-lite` výš), sedí lišta appky bez dost velké rezervy přesně v zóně, kde první ťuknutí dolů jen VRÁTÍ schovanou lištu prohlížeče zpátky, místo aby trefilo tlačítko — systémové gesto, které žádný web kód nezruší. Extra rezerva tlačítka posune dost daleko od skutečné hrany, aby první ťuknutí padlo na ně, ne do pásma gesta. */ padding: 6px 6px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--lite-page); border-top: 1px solid var(--kp-line); } [data-theme="dark"] .kp-lite__mobnav { background: var(--kp-cream-3); } .kp-lite__mobbtn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--kp-ink-soft); font: inherit; cursor: pointer; transition: color 0.15s ease; } .kp-lite__mobbtn:hover { color: var(--kp-ink); } .kp-lite__mobbtn.is-active { color: var(--accent); } .kp-lite__mobbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .kp-lite__mobico { display: grid; place-items: center; width: 24px; height: 24px; } .kp-lite__mobico svg { width: 23px; height: 23px; } .kp-lite__moblabel { font-size: 10.5px; font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Scrim za sheetem. */ .kp-lite__sheetscrim { position: fixed; inset: 0; z-index: 200; background: rgba(12, 17, 13, 0.62); animation: kp-sheetfade 0.2s ease; } /* Sheet vyjíždí zdola, zaoblený nahoře. */ .kp-lite__sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 201; max-height: 82vh; overflow-y: auto; padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: var(--lite-card); border-top: 1px solid var(--kp-line); box-shadow: 0 -18px 44px rgba(10, 20, 14, 0.32); animation: kp-sheetup 0.26s cubic-bezier(0.22, 1, 0.36, 1); } .kp-lite__sheethandle { width: 40px; height: 4px; border-radius: 999px; background: var(--kp-line-strong, var(--kp-line)); margin: 6px auto 10px; } .kp-lite__sheethead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .kp-lite__sheettitle { font-family: var(--kp-font-display); font-size: 17px; font-weight: 600; color: var(--kp-ink); } .kp-lite__sheetclose { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--kp-line); border-radius: 11px; background: var(--lite-track); color: var(--kp-ink-soft); cursor: pointer; } .kp-lite__sheetclose:hover { color: var(--kp-ink); } .kp-lite__sheetclose svg { width: 17px; height: 17px; } .kp-lite__sheetgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .kp-lite__sheetitem { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--kp-line); border-radius: 16px; /* Neprůhledné — žádné prosvítání pozadí skrz položky. */ background: color-mix(in oklab, var(--kp-ink) 6%, var(--lite-card)); color: var(--kp-ink); font: inherit; font-size: 12.5px; font-weight: 600; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .kp-lite__sheetitem:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--kp-line)); } .kp-lite__sheetitem.is-active { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, var(--lite-card)); color: var(--accent); } .kp-lite__sheetico { display: grid; place-items: center; width: 28px; height: 28px; color: var(--kp-terracotta); } .kp-lite__sheetitem.is-active .kp-lite__sheetico { color: var(--accent); } .kp-lite__sheetico svg { width: 24px; height: 24px; } @keyframes kp-sheetup { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes kp-sheetfade { from { opacity: 0; } to { opacity: 1; } } :root[data-motion="reduced"] .kp-lite__sheet, :root[data-motion="reduced"] .kp-lite__sheetscrim { animation: none; } /* ---- snáška hejna za období --------------------------------------------- */ .kp-eggstat { margin-top: 22px; padding: 18px 20px 16px; background: var(--lite-card); border: 1px solid var(--kp-line); border-radius: 18px; box-shadow: var(--kp-shadow-sm); } .kp-eggstat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .kp-eggstat__title { margin: 0; font-family: var(--kp-font-display); font-weight: 600; font-size: 15px; color: var(--lite-warm); } /* Přepínač období. Vypadá jako jeden segmentovaný ovladač, ne jako tři samostatná tlačítka — období se vylučují. */ .kp-eggstat__tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--lite-track); } .kp-eggstat__tab { appearance: none; border: 0; border-radius: 9px; padding: 6px 14px; background: transparent; font-family: var(--kp-font-body); font-size: 12.5px; font-weight: 500; color: var(--kp-ink-soft); cursor: pointer; transition: background var(--motion-durationFast, 140ms) var(--motion-easing, ease), color var(--motion-durationFast, 140ms) var(--motion-easing, ease); } .kp-eggstat__tab:hover { color: var(--kp-ink); } .kp-eggstat__tab.is-active { background: var(--kp-surface); color: var(--kp-ink); font-weight: 600; box-shadow: var(--kp-shadow-sm); } :root[data-motion="reduced"] .kp-eggstat__tab { transition: none; } .kp-eggstat__body { display: grid; grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr); gap: 24px; align-items: end; margin-top: 18px; } .kp-eggstat__big { font-family: var(--kp-font-display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--kp-ink); } .kp-eggstat__unit { font-size: 15px; font-weight: 500; color: var(--kp-ink-soft); margin-left: 4px; } .kp-eggstat__note { margin-top: 5px; font-size: 13px; color: var(--kp-ink-soft); } .kp-eggstat__avg { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 8px 12px; border-radius: 11px; background: var(--lite-track); font-size: 12.5px; color: var(--kp-ink-soft); } .kp-eggstat__avg b { font-size: 15px; font-weight: 600; color: var(--kp-ink); } /* Sloupcový graf. Výšky nese inline style (počítá se z dat), tady jen tvar. */ .kp-eggstat__chart { display: flex; align-items: flex-end; gap: clamp(4px, 1.2vw, 12px); height: 132px; } .kp-eggstat__bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; } .kp-eggstat__col { display: block; width: 100%; max-width: 34px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, color-mix(in oklab, var(--kp-gold) 92%, white 8%), var(--kp-gold)); transition: height var(--motion-durationBase, 260ms) var(--motion-easing, ease); } :root[data-motion="reduced"] .kp-eggstat__col { transition: none; } .kp-eggstat__tick { font-size: 11px; color: var(--kp-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Rozpad na slepičky — kdo za období snesl kolik. Každá slepička má vlastní dlaždici: bez ní jméno a číslo splývala se sousedním sloupcem a četlo se to jako „Anežka 10 Pepina" místo „Anežka | 10". */ .kp-eggstat__hens { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 18px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--kp-line); } .kp-eggstat__hen { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 10px; background: var(--lite-track); font-size: 13px; color: var(--kp-ink-soft); } .kp-eggstat__hendot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .kp-eggstat__henname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kp-eggstat__henval { color: var(--kp-ink); font-weight: 600; } /* ---- spodní řada karet pod slepičkami ------------------------------------ */ /* Dlaždice měly vlastní `--b*` třídy s vlastní typografií. Teď berou tytéž třídy jako každá jiná karta v aplikaci (`kp-fov__label / __value / __sub / __delta`) — anatomie karty žije na jednom místě v `kp-flock-overview.css`. */ .kp-lite__botrow { margin-top: 22px; } /* Titulek zarovnaný nahoru; ilustrace zůstává svisle na střed. */ .kp-lite__botrow .kp-fov__card--split { align-items: flex-start; } .kp-lite__botrow .kp-fov__card--split .kp-fov__ill { align-self: center; } /* Aktivita hejna — náš graf (viewBox 120/28) → aspect-ratio pro KULATÉ tečky. */ .kp-lite__bspark { display: block; width: 100%; aspect-ratio: 120 / 28; height: auto; margin-top: 10px; } /* Měřák „Voda a krmivo" — podle předlohy: POPISEK + procento na jednom řádku, POD tím o něco tlustší lišta (Krmivo zlatá/oranžová, Voda modrá). */ .kp-lite__meter { margin-top: 18px; } .kp-lite__meter:first-of-type { margin-top: 6px; } .kp-lite__meterhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; font-size: 14px; } .kp-lite__meterhead span { color: var(--kp-ink); font-weight: 600; } .kp-lite__meterhead b { color: var(--kp-ink); font-weight: 700; } .kp-lite__track { height: 13px; border-radius: 999px; background: var(--lite-track); overflow: hidden; } .kp-lite__fill { display: block; height: 100%; border-radius: 999px; } /* Barvy PŘESNĚ dle návrhu (naměřeno z application_design_light.png): Krmivo = jasná jantarová #FDB20A, Voda = živá modrá #40A0D3. */ .kp-lite__fill--feed { background: linear-gradient(90deg, #FEC324, #F9A70D); } .kp-lite__fill--water { background: linear-gradient(90deg, #57B0DF, #2F97CE); } /* Krmivo a voda: pruh teď jede přes celou šířku dlaždice, ne jen vedle ikony (dřív ležel uvnitř `.kp-fov__card--split`'s levé poloviny, takže byl useknutý na ~60 % šířky karty). Hlavička (popisek/hodnota/poznámka + ikona) je vlastní řádek NAD pruhem — proto `.kp-fov__card--split` tady nese jen hlavička, ne celá karta. */ .kp-lite__feedcard { display: block; } .kp-lite__feedcardhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } /* Malovaná miska/kapka jako kompaktní odznak v hlavičce, ne velká ilustrace přes půl karty jako dřív (`.kp-fov__ill`, clamp 88-124 px). Obě sedí na stejně velkém čtvercovém plátně, ale s jinak rozloženým odstupem od kresby (miska širší, kapka vyšší) — menší společná velikost ten rozdíl neruší úplně, ale zmenší ho natolik, že na první pohled obě vypadají stejně vysoké. */ .kp-lite__feedico { flex: 0 0 auto; align-self: center; height: 52px; width: 52px; object-fit: contain; } /* Obrázkové vajíčko — glossy zlaté s jemnou září, jako v předloze. */ /* Zlaté vajíčko v kartě „Dnešní snáška" — větší a s vlastní září. Render už nese měkký stín, takže tady CSS-stín jen decentní. */ /* Nálada (roční období + den/noc) jako plovoucí panel vlevo, ať nekryje Forge panel Vzhledu vpravo. */ .kp-lite__mood { position: fixed; top: 64px; left: 84px; z-index: 2147483647; width: min(300px, calc(100vw - 104px)); padding: 16px; border-radius: 16px; background: var(--kp-surface); border: 1px solid var(--kp-line); box-shadow: var(--kp-shadow-lg); max-height: calc(100dvh - 96px); overflow-y: auto; } /* `.kp-mood` má vlastní `position: fixed` (`kp-hero.css`, pro samostatné použití na webu vedle Forge panelu) — uvnitř tady se úplně resetuje na obyčejný blok v toku, ať o umístění/rozměrech rozhoduje jen tenhle obal (`.kp-lite__mood`). Bez resetu vyhrávala webová pravidla (`position: fixed; right: calc(360px + 3rem); bottom: 1.25rem`, mnohem nižší `z-index: 1001` než Forge panel) — karta s náladou se tak vykreslovala NAVLASTNÍCH souřadnicích webu, schovaná za Forge panelem, který má z-index prakticky nekonečný. Na mobilu z toho vypadalo, že se nálada „vůbec nenarenderuje". */ .kp-lite__mood .kp-mood { position: static; inset: auto; z-index: auto; width: 100%; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; animation: none; } /* Přepínač „Jednoduchá" v topbaru plné verze — chip s textem, ne jen ikona. */ .kpa-chip--mode { width: auto; gap: 6px; padding: 0 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--kp-green, #3C7A34); } .kpa-chip--mode:hover { color: var(--accent); } @media (max-width: 560px) { /* Na úzkém topbaru jen ikona, ať se vejde. */ .kpa-chip--mode { font-size: 0; padding: 0; width: 38px; gap: 0; } } /* ---- RESPONZIVITA ------------------------------------------------------- */ /* Karty slepiček: 4 → 3 → 2 → 1 sloupec. Bez tohohle byly na mobilu všechny čtyři namačkané vedle sebe (napevno 4 sloupce). */ @media (max-width: 1100px) { .kp-hens { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 820px) { .kp-hens { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Na telefonu DVĚ vedle sebe, ne jedna pod druhou. Karta se sice smrskne na ~172 px, ale všechno v ní zůstane čitelné (viz úpravy níž) — a chovatel s dvaceti slepicemi jinak roluje přes dvacet obrazovek. */ @media (max-width: 440px) { .kp-hens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* Užší karta = sevřenější vnitřek. Čísla zůstávají velká (jsou to údaje), ubírá se z odsazení a z popisků. */ .henc { padding: 0 12px 14px; } .henc__portrait { margin: 0 -12px 8px; } .henc__name { font-size: 17px; } .henc__row { font-size: 12.5px; } .henc__stats { gap: 3px; margin-top: 10px; padding-top: 9px; } .henc__stat dt { font-size: 10px; letter-spacing: 0; } .henc__stat dd { font-size: 15px; } .henc__today { top: 10px; right: 10px; width: 23px; height: 23px; } .henc__today svg { width: 13px; height: 13px; } /* Popisky pod grafem by se na 150 px slily do šedé kaše — graf sám nese tvar týdne, čísla pod ním jsou tu navíc. */ .henc__spark text { display: none; } } /* Snáška hejna: součet nad graf, ať sloupce zůstanou čitelně široké. */ @media (max-width: 760px) { .kp-eggstat__body { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; } .kp-eggstat__chart { height: 108px; } .kp-eggstat__big { font-size: 34px; } } /* Roční graf má dvanáct sloupců — na mobilu se popisky měsíců zkrátí na svislé tiky, aby se text nepřekrýval. */ @media (max-width: 480px) { .kp-eggstat { padding: 16px 14px 14px; } .kp-eggstat__head { align-items: flex-start; } .kp-eggstat__tabs { width: 100%; } .kp-eggstat__tab { flex: 1; text-align: center; padding-inline: 6px; } .kp-eggstat__tick { font-size: 9.5px; } .kp-eggstat__chart { gap: 3px; } } /* Rail dolů jako spodní lišta na mobilu. */ @media (max-width: 640px) { .kp-lite { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; /* Na mobilu SAMO OKNO roluje stránku, ne `.kp-lite__main` uvnitř — `.kp-lite` proto přestává být `position: fixed; inset: 0`, jinak by (correctly) blokovalo body scroll úplně. Viz komentář u `.kp-lite__main` níž pro důvod. */ position: static; min-height: 100dvh; /* Základní pravidlo (viz výš) má `overflow: hidden` kvůli oříznutí sezónní fotky na pevný rám desktopu. `.kp-lite` na mobilu ale NIKDY samo neroluje (posouvá se okno) — `overflow: hidden` na nescrollujícím prvku je přesně ten „tichý scroll kontejner", kvůli kterému `position: sticky` u potomků (`.kp-lite__mobnav`, doky chatu/Agáty) přestává fungovat: sticky se váže k NEJBLIŽŠÍMU předku se scrollovacím boxem, a tenhle box se sám nikdy nehne. Bezpečné zrušit — fotka je VLASTNÍ pozadí `.kp-lite` (ne potomka), a vlastní pozadí prvku se nikdy nevykreslí za hranice jeho vlastního rámečku bez ohledu na `overflow`; ořez tu ve skutečnosti nic nedělal. */ overflow: visible; /* Stejný token jako na desktopu (výš), teď i pro mobil — Agátina vlastní lepivá hlavička (`kp-agata.css`, `top: var(--kp-lite- topbar-h, 0px)`) na něj odkazuje, ať klidně SEDÍ POD naší plovoucí lištou (ne pod ní schovaná na 0px) a teprve při rolování na ni „narazí" a podle zavedeného pravidla ji (vyšší `z-index`) překryje. Lišta nese jen ikony (nadpis je teď nad obsahem, ne uvnitř ní — viz `.kp-lite__heading--onpage`), takže je nízká: 10 px odsazení nahoře/dole + 38 px tlačítko = 58 px, naměřeno na 390 × 844. `env(safe-area-inset-top)` navíc, protože lišta je `fixed` k VIEWPORTU a sama si zářez kompenzuje vlastním `padding-top` (`.kp-lite__topbar` níž) — bez stejného přídavku tady by na zaříznutých telefonech byla o kus vyšší, než kolik jí obsah pod ní nechává místa. */ --kp-lite-topbar-h: calc(58px + env(safe-area-inset-top, 0px)); } /* Levý rail je na mobilu nahrazen spodní navigací + „Menu" sheetem — místo jedenácti ikon vedle sebe jen pár hlavních a zbytek v sheetu. */ .kp-lite__rail { display: none; } /* Lepí se ke spodku ROLOVANÉ STRÁNKY (`position: sticky` v běžném dokumentu), ne k pevnému rámu appky jako dřív — díky tomu se může posunout dolů přesně tak, jak se schovává lišta Safari (viz `.kp-lite__main` níž). `z-index` nad doky chatu/Agáty, které mají svůj vlastní `bottom` odstup právě kvůli místu pro tuhle lištu. */ .kp-lite__mobnav { display: flex; grid-row: 2; position: sticky; bottom: 0; z-index: 30; } /* iOS Safari schová svou adresní/nástrojovou lištu jen když roluje SKUTEČNÁ stránka (`document`/`body`) — ne vnitřní `overflow: auto` div. Zákazník to popsal přesně: na webových stránkách (marketing, normální rolování) se Safari lišta schová a udělá víc místa; uvnitř appky (`.kp-lite__main` mělo vlastní scrollport) ne, protože Safari to gesto vůbec nevidí jako rolování STRÁNKY. Desktop nechává vnitřní scroll beze změny (systémový posuvník u pravého okraje okna, důvod je v historii souboru výš) — tohle chování tam nehraje roli, jen na mobilu, kde prohlížeč MÁ vlastní schovatelnou lištu, se to vyplácí. `container-type: normal` jde ruku v ruce: `size` containment vyžaduje, aby prvek měl v ose scrollu URČENOU velikost (dřív ji dával `overflow: auto` + `position: fixed` rodič) — bez scrollu tu žádná určená výška není a `container-type: size` by prvek zbytečně nutil do 0 výšky. Agáta/chat na mobilu proto ztrácí trik „dok se drží dole i s pár zprávami" (`min-height: 100cqb`) — přijatelná daň, doky mají vlastní `position: sticky` a najedou na spodek i tak, jen ne dřív, než na ně dojde obsahem. */ .kp-lite__main { grid-row: 1; /* `--kp-lite-topbar-h` (na `.kp-lite` výš) rezervuje trvalé místo pro plovoucí lištu (viz `.kp-lite__topbarwrap` níž) — NEanimuje se spolu s ní. Lišta se posouvá pryč/zpátky vlastním `transform`, obsah pod ní zůstává na místě a jen se přes sklo prosvítá, přesně jako pod nativní iOS `UINavigationBar`. */ /* +12 px: `--kp-lite-topbar-h` je čistá výška lišty, takže samo o sobě by nadpis začínal přesně na její spodní lince. Tohle je vzduch mezi lištou a prvním nadpisem, ne oprava špatného výpočtu. */ padding: calc(var(--kp-lite-topbar-h, 112px) + 12px) 14px 28px; overflow-y: visible; container-type: normal; } .kp-lite__main--flush { padding-bottom: var(--kp-lite-edge-gap); } .kp-lite__inner, .kp-lite__topbarin { max-width: none; } /* Lišta na mobilu je PLOVOUCÍ vrstva nad obsahem (`position: fixed`), ne součást toku a ne `sticky` — nativní iOS vzor (`UINavigationBar`/ tab bar): obsah pod ní SKUTEČNĚ roluje, lišta se jen jako celek posouvá pryč a zpátky, nikdy neroste ani nemizí. `sticky` by tu nešlo použít — sticky prvek si i po `transform` drží svou původní výšku rezervovanou v toku (transform geometrii nemění), takže by po schování zůstala prázdná díra tam, kde lišta bývala. `fixed` žádné místo v toku nezabírá vůbec, takže díra vzniknout nemůže; `.kp-lite__main` výš rezervuje odstup NATRVALO (`padding-top`), ne animovaně — to jediné dovoluje, aby jediná animovaná vlastnost zůstala `transform` (viz níž, striktně kompozitor, žádný layout ani překreslení stránky při každém pixelu scrollu). Naměřeno na 390 × 844: zalomená lišta (nadpis + nástroje pod sebou) ~112 px. */ .kp-lite__topbarwrap { position: fixed; top: 0; left: 0; right: 0; z-index: 20; transform: translateY(0); /* `--kp-ease-inout` (Motion Bible „přesuny") — lišta se PŘESOUVÁ, ne poprvé „přichází" jako scroll-reveal obsahu (ten by čekal pomalejší `--kp-ease-out`/600 ms). 240 ms je stejné „UI" trvání jako panely a karty — svižná odezva na gesto, ne pomalá entrance animace. Fyzicky věrohodné zrychlení na začátku i konci, nikdy lineární. */ transition: transform 240ms cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; } .kp-lite__topbarwrap.is-hidden { transform: translateY(-100%); } :root[data-motion="reduced"] .kp-lite__topbarwrap { transition: none; } /* iOS styl: lišta je VŽDYCKY sklo, ne jen při rolování jako na desktopu (tam leží přes fixní fotku v pevném rámu appky; tady je to plovoucí panel nad neomezeně dlouhou stránkou, která pod ní běžně projíždí — bez trvalého skla by čitelnost textu závisela na tom, co je zrovna pod lištou navrch, přesně to zákazník popsal jako „lacině"). `--kp-glass-*` rodina, ne vlastní hodnoty — stejné tokeny jako Agátina hlavička/dok (`kp-agata.css`), takže posuvník „Sklo" v panelu Vzhled sáhne i sem, ne jen tam. */ .kp-lite__topbar { margin-bottom: 0; /* Stejné vodorovné odsazení jako `.kp-lite__main` (14px) — lišta je teď `fixed`, takže ho už nezdědí od rodiče jako dřív, kdy ještě ležela v jeho toku. Bez něj seděly ikony nalepené na skutečný okraj displeje, mimo zarovnání s kartami pod nimi. */ padding-left: 14px; padding-right: 14px; background: var(--kp-glass-light, var(--lite-card)); backdrop-filter: blur(var(--kp-glass-blur, 18px)) saturate(1.3); -webkit-backdrop-filter: blur(var(--kp-glass-blur, 18px)) saturate(1.3); border-bottom: 1px solid var(--kp-glass-edge, var(--kp-line)); box-shadow: 0 1px 0 color-mix(in oklab, var(--kp-ink) 6%, transparent), 0 12px 24px -18px color-mix(in oklab, var(--kp-ink) 40%, transparent); /* Bezpečná zóna zářezu — lišta je teď `fixed` k VIEWPORTU, ne v toku pod systémovou lištou telefonu jako dřív. */ padding-top: env(safe-area-inset-top, 0px); } :root[data-effects="minimal"] .kp-lite__topbar { background: var(--lite-card); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--kp-line); box-shadow: none; } /* Lišta na mobilu nese jen ikony — nadpis se přestěhoval nad obsah (`.kp-lite__heading--onpage` níž), ať zůstane úzký proužek, ne plná hlavička jako dřív. Bez nadpisu, který dřív tlačil ikony doprava svou vlastní šířkou, je `justify-content: flex-end` potřeba explicitně — jinak by `space-between` (základ) natáhl jediné zbylé dítě přes celou šířku doleva. */ .kp-lite__topbarin { justify-content: flex-end; padding: 10px 0; } .kp-lite__heading--intopbar { display: none; } .kp-lite__tools { flex-wrap: nowrap; } /* Nadpis nad obsahem — první věc pod plovoucí lištou, roluje s kartami pod ní, ne s lištou. */ .kp-lite__heading--onpage { display: grid; margin: 0 0 16px; } .kp-lite__title { font-size: 24px; } .kp-hens { gap: 12px; } .henc__name { font-size: 18px; } /* Spodní řada karet (Dnešní snáška / Aktivita / Voda a krmivo) i Přehled na jeden sloupec, ať se nic nemačká. */ .kp-lite .kp-fov__grid, .kp-lite__pair, .kp-lite__botrow { grid-template-columns: minmax(0, 1fr) !important; } /* Ruční zápis: ilustrace zabírá půlku karty, na mobilu se skryje. */ .kp-lite .kp-lite__manual .kp-fov__ill { display: none; } /* Panel Vzhled (Forge) i Nálada teď fungují jako dva plnohodnotné fullscreen bottom sheety nad sebou, ne jako plovoucí kartičky vedle sebe (na 375 px se prostě nevejdou). Obě mají bezpečné okraje (`env(safe-area-inset-*)`, ať je nezakusuje notch/gesta) a ŽÁDNÝ `vh`/`dvh` výpočet výšky navrch — kotví se na VŠECH čtyřech hranách, takže box nikdy nepřesáhne to, co je opravdu vidět, ať už adresní řádek prohlížeče zrovna zabírá cokoli. Forge panel měl dřív jen `max-height: calc(100vh - 48px)` (z balíčku) — na telefonu, kde `100vh` počítá s adresním řádkem SCHOVANÝM, byl panel reálně vyšší než viditelná plocha a zavírací křížek i spodek se dostaly mimo obrazovku. */ .forge-tweaks-panel { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); left: max(12px, env(safe-area-inset-left)); bottom: 45%; max-height: none; width: auto; } .kp-lite__mood { top: auto; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); height: calc(45% - 12px); max-height: none; width: auto; } /* Rozbalený rail na mobilu nemá smysl (rail je dole) — drž ho jako lištu. */ .kp-lite.is-railopen { grid-template-columns: minmax(0, 1fr); } .kp-lite.is-railopen .kp-lite__raillabel { display: none; } .kp-lite.is-railopen .kp-lite__railbtn { width: 44px; justify-content: center; padding: 0; } } @media (max-width: 400px) { .kp-lite__mode a { padding: 6px 10px; } .kp-lite__main { padding-inline: 12px; } } /* ====================================================================== Nastaveni hejna — vstupni lista, seznam slepic, pruvodce, uprava. Vse token-driven (--lite-card / --kp-*), takze drzi svetly i tmavy rezim. ====================================================================== */ /* Vstupni lista na obrazovce Moje hejno — otevre nastaveni hejna. */ .kp-lite__flockbar { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 16px; padding: 13px 16px; text-align: left; cursor: pointer; border-radius: 16px; border: 1.5px solid var(--kp-line); background: var(--lite-card); color: var(--kp-ink); box-shadow: var(--kp-shadow-sm); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; } .kp-lite__flockbar:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--kp-green) 40%, var(--kp-line)); box-shadow: var(--kp-shadow-md); } .kp-lite__flockbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .kp-lite__flockbarico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--kp-green) 14%, var(--lite-card)); color: var(--kp-green-deep); } .kp-lite__flockbarico svg { width: 22px; height: 22px; } .kp-lite__flockbartxt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .kp-lite__flockbartxt b { font-family: var(--kp-font-display); font-size: 1.02rem; } .kp-lite__flockbartxt small { color: var(--kp-ink-soft); font-size: .86rem; } .kp-lite__flockbargo { flex: 0 0 auto; color: var(--kp-ink-faint); } .kp-lite__flockbargo svg { width: 20px; height: 20px; display: block; } /* Seznam slepic v nastaveni. */ .kp-setup { display: grid; gap: 12px; margin-top: 14px; } .kp-setup__hen { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--kp-line); background: var(--lite-card); } .kp-setup__face { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 14px; object-fit: cover; object-position: top center; background: color-mix(in oklab, var(--kp-ink) 5%, var(--lite-card)); } .kp-setup__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; } .kp-setup__name { font-family: var(--kp-font-display); font-size: 1.05rem; color: var(--kp-ink); } .kp-setup__ring { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: .82rem; font-weight: 600; max-width: 100%; white-space: nowrap; } .kp-setup__ring.is-on { color: var(--kp-green-deep); background: color-mix(in oklab, var(--kp-green) 15%, transparent); } .kp-setup__ring.is-off { color: var(--kp-ink-faint); background: color-mix(in oklab, var(--kp-ink) 7%, transparent); } .kp-setup__ringico { flex: 0 0 auto; display: grid; place-items: center; } .kp-setup__ringico svg { width: 14px; height: 14px; display: block; } .kp-setup__nfc { margin-left: 2px; padding: 1px 6px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .02em; color: #6a4a06; background: color-mix(in oklab, var(--kp-gold) 60%, white); } [data-theme="dark"] .kp-setup__nfc { color: #241a04; background: color-mix(in oklab, var(--kp-gold) 78%, transparent); } /* Ghost/quiet tlačítka mají width:100% — v řádcích je zúžíme na obsah (mobil je vrátí). */ .kp-setup__edit { flex: 0 0 auto; width: auto; } .kp-wiz__act .kp-lite__btnghost { width: auto; } .kp-setup__ringact .kp-lite__btnghost, .kp-setup__ringact .kp-lite__btnquiet { width: auto; } /* Karta Pridat slepicku. */ .kp-setup__add { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; padding: 14px; border-radius: 16px; color: var(--kp-ink); border: 1.5px dashed color-mix(in oklab, var(--kp-green) 45%, var(--kp-line)); background: color-mix(in oklab, var(--kp-green) 5%, var(--lite-card)); transition: transform .14s ease, border-color .14s ease, background .14s ease; } .kp-setup__add:hover { transform: translateY(-1px); border-color: var(--kp-green); background: color-mix(in oklab, var(--kp-green) 10%, var(--lite-card)); } .kp-setup__add:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .kp-setup__addico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--kp-green) 18%, var(--lite-card)); color: var(--kp-green-deep); } .kp-setup__addico svg { width: 24px; height: 24px; } .kp-setup__addtxt { display: flex; flex-direction: column; } .kp-setup__addtxt b { font-family: var(--kp-font-display); font-size: 1.02rem; } .kp-setup__addtxt small { color: var(--kp-ink-soft); font-size: .84rem; } .kp-setup__err { margin-top: 12px; color: var(--kp-terracotta-deep); font-size: .88rem; font-weight: 600; } /* ---- Pruvodce pridanim (stepper + kroky) ---- */ .kp-wiz__steps { display: flex; align-items: flex-start; gap: 0; list-style: none; margin: 8px 0 18px; padding: 0; } .kp-wiz__step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--kp-ink-faint); font-size: .8rem; font-weight: 600; text-align: center; } .kp-wiz__step::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--kp-line); z-index: 0; } .kp-wiz__step:first-child::before { display: none; } .kp-wiz__step.is-done::before, .kp-wiz__step.is-now::before { background: color-mix(in oklab, var(--kp-green) 55%, var(--kp-line)); } .kp-wiz__stepdot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--lite-card); border: 2px solid var(--kp-line); color: var(--kp-ink-faint); font-weight: 800; font-size: .9rem; } .kp-wiz__stepdot svg { width: 16px; height: 16px; } .kp-wiz__step.is-now .kp-wiz__stepdot { border-color: var(--kp-green); color: var(--kp-green-deep); background: color-mix(in oklab, var(--kp-green) 12%, var(--lite-card)); } .kp-wiz__step.is-done .kp-wiz__stepdot { border-color: var(--kp-green); background: var(--kp-green); color: #fff; } .kp-wiz__step.is-now .kp-wiz__steplabel, .kp-wiz__step.is-done .kp-wiz__steplabel { color: var(--kp-ink); } .kp-wiz__head { text-align: center; margin-bottom: 4px; } .kp-wiz__title { font-family: var(--kp-font-display); font-size: 1.28rem; color: var(--kp-ink); margin: 0 0 4px; } .kp-wiz__lead { color: var(--kp-ink-soft); font-size: .92rem; line-height: 1.5; margin: 0 auto; max-width: 44ch; } /* Skenovaci zona s pulzem. */ .kp-wiz__scan { position: relative; display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 190px; margin-top: 14px; padding: 24px; border-radius: 18px; border: 1.5px dashed var(--kp-line-strong); background: color-mix(in oklab, var(--kp-ink) 3%, var(--lite-card)); text-align: center; } .kp-wiz__scan.is-done { border-style: solid; border-color: color-mix(in oklab, var(--kp-green) 45%, var(--kp-line)); } .kp-wiz__scancore { position: relative; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: var(--kp-green-deep); background: color-mix(in oklab, var(--kp-green) 14%, var(--lite-card)); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--kp-green) 35%, transparent); } .kp-wiz__scancore svg { width: 32px; height: 32px; } .kp-wiz__scancore::before, .kp-wiz__scancore::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--kp-green) 55%, transparent); opacity: 0; } .kp-wiz__scan.is-scanning .kp-wiz__scancore::before { animation: kp-wiz-pulse 1.6s ease-out infinite; } .kp-wiz__scan.is-scanning .kp-wiz__scancore::after { animation: kp-wiz-pulse 1.6s ease-out infinite .8s; } @keyframes kp-wiz-pulse { 0% { transform: scale(.72); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .kp-wiz__scan.is-scanning .kp-wiz__scancore::before, .kp-wiz__scan.is-scanning .kp-wiz__scancore::after { animation: none; } } .kp-wiz__scanhint { color: var(--kp-ink-soft); font-size: .9rem; font-weight: 600; } .kp-wiz__scanuid { display: grid; justify-items: center; gap: 8px; } .kp-wiz__scanuid b { font-family: var(--kp-font-display); font-size: 1.12rem; letter-spacing: .01em; color: var(--kp-ink); } .kp-wiz__scanok { color: var(--kp-green); } .kp-wiz__scanok svg { width: 26px; height: 26px; } .kp-wiz__chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; } .kp-wiz__chip { padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--kp-green-deep); background: color-mix(in oklab, var(--kp-green) 14%, transparent); border: 1px solid color-mix(in oklab, var(--kp-green) 30%, transparent); } .kp-wiz__chip--sim { color: var(--kp-terracotta-deep); background: color-mix(in oklab, var(--kp-gold) 22%, transparent); border-color: color-mix(in oklab, var(--kp-gold) 45%, transparent); } .kp-wiz__chip--pick { cursor: pointer; background: color-mix(in oklab, var(--kp-ink) 6%, transparent); color: var(--kp-ink-soft); border-color: var(--kp-line); } .kp-wiz__chip--pick:hover { color: var(--kp-green-deep); border-color: color-mix(in oklab, var(--kp-green) 40%, var(--kp-line)); } .kp-wiz__warn { margin: 4px 0 0; color: var(--kp-terracotta-deep); font-size: .84rem; font-weight: 600; } .kp-wiz__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; } .kp-wiz__manual { display: flex; gap: 8px; margin-top: 12px; align-items: center; } .kp-wiz__manual .kp-input { flex: 1 1 auto; } .kp-wiz__skip { display: inline-block; margin-top: 14px; } .kp-wiz__name { max-width: 100%; margin-top: 14px; } .kp-wiz__suggest { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; } .kp-wiz__suggestlbl { color: var(--kp-ink-faint); font-size: .82rem; font-weight: 600; } /* Mrizka tvari. */ .kp-wiz__faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; } .kp-wiz__faces--edit { grid-template-columns: repeat(4, 1fr); } .kp-wiz__face { position: relative; display: grid; justify-items: center; gap: 6px; cursor: pointer; padding: 10px 6px; border-radius: 16px; border: 2px solid var(--kp-line); background: var(--lite-card); color: var(--kp-ink-soft); font-size: .82rem; font-weight: 700; transition: border-color .14s ease, transform .14s ease, background .14s ease; } .kp-wiz__face img { width: 76%; max-width: 96px; aspect-ratio: 1; object-fit: cover; object-position: top center; border-radius: 12px; } .kp-wiz__face:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--kp-green) 40%, var(--kp-line)); } .kp-wiz__face.is-sel { border-color: var(--kp-green); color: var(--kp-ink); background: color-mix(in oklab, var(--kp-green) 8%, var(--lite-card)); } .kp-wiz__face.is-sel::after { content: "\2713"; position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--kp-green); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; box-shadow: var(--kp-shadow-sm); } .kp-wiz__face:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Rekapitulace. */ .kp-wiz__review { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 16px; border-radius: 16px; border: 1.5px solid var(--kp-line); background: var(--lite-card); } .kp-wiz__reviewface { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 16px; object-fit: cover; object-position: top center; } .kp-wiz__reviewbody { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .kp-wiz__reviewname { font-family: var(--kp-font-display); font-size: 1.3rem; color: var(--kp-ink); } /* ---- Uprava slepicky ---- */ .kp-setup__detailhead { display: flex; align-items: flex-start; gap: 16px; margin-top: 6px; } .kp-setup__detailface { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 18px; object-fit: cover; object-position: top center; } .kp-setup__detailname { flex: 1 1 auto; min-width: 0; } .kp-setup__seclbl { margin-top: 16px; } .kp-setup__ringrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; } .kp-setup__ringact { display: flex; flex-wrap: wrap; gap: 8px; } .kp-setup__danger { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--kp-line); } .kp-setup__dangerq { color: var(--kp-ink); font-weight: 600; } .kp-setup__remove { color: var(--kp-terracotta-deep) !important; } .kp-lite__btndanger { padding: 9px 16px; border-radius: 12px; border: none; cursor: pointer; font-weight: 700; font-size: .9rem; color: #fff; background: var(--kp-terracotta); } .kp-lite__btndanger:hover { background: var(--kp-terracotta-deep); } .kp-lite__btndanger:focus-visible { outline: 2px solid var(--kp-terracotta-deep); outline-offset: 2px; } /* ---- Mobil ---- */ @media (max-width: 640px) { .kp-setup__hen { flex-wrap: wrap; } .kp-setup__edit { margin-left: auto; } .kp-wiz__faces, .kp-wiz__faces--edit { grid-template-columns: repeat(2, 1fr); } .kp-wiz__act { flex-direction: column-reverse; align-items: stretch; } .kp-wiz__act .kp-fov__cta, .kp-wiz__act .kp-lite__btnghost { width: 100%; text-align: center; justify-content: center; } .kp-wiz__steplabel { font-size: .72rem; } .kp-wiz__review { flex-direction: column; text-align: center; align-items: center; } .kp-setup__detailhead { flex-direction: column; align-items: center; text-align: center; } .kp-setup__ringrow { flex-direction: column; align-items: stretch; } .kp-setup__ringact { justify-content: stretch; } .kp-setup__ringact .kp-fov__cta, .kp-setup__ringact .kp-lite__btnghost, .kp-setup__ringact .kp-lite__btnquiet { flex: 1 1 auto; text-align: center; justify-content: center; } } /* ---- Adresar (dorucovaci + fakturacni adresa) ---- */ .kp-addr { max-width: 540px; } .kp-addr .kp-field { max-width: none; } .kp-addr__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .kp-addr__opt { color: var(--kp-ink-faint); font-weight: 500; } .kp-addr__billsec { margin-top: 14px; } .kp-lite__switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 6px 0 10px; font-weight: 600; color: var(--kp-ink); } .kp-lite__switch input { width: 18px; height: 18px; accent-color: var(--kp-green); cursor: pointer; } .kp-lite__saved { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--kp-green-deep); font-weight: 600; font-size: .9rem; } .kp-lite__saved svg { width: 18px; height: 18px; } .kp-lite__inlinelink { display: inline; padding: 0; font-size: inherit; vertical-align: baseline; } @media (max-width: 640px) { .kp-addr__row { grid-template-columns: 1fr; gap: 0; } } /* Karta slepicky bez namerenych dat — poctivy stav misto nul (P04). */ .henc__nodata { display: grid; justify-items: center; gap: 6px; text-align: center; margin-top: 10px; padding: 14px 10px 12px; border-radius: 12px; border: 1px dashed color-mix(in oklab, var(--kp-ink) 18%, transparent); background: color-mix(in oklab, var(--kp-ink) 4%, transparent); } .henc__nodataico { color: var(--kp-ink-faint); } .henc__nodataico svg { width: 22px; height: 22px; display: block; } .henc__nodata b { font-family: var(--kp-font-display); font-size: .95rem; color: var(--kp-ink); } .henc__nodata span { font-size: .78rem; line-height: 1.4; color: var(--kp-ink-soft); } /* ── Nabídka nové verze aplikace (ADR 009) ──────────────────────────────── Distribuujeme mimo obchody, takže tenhle pruh je jediná cesta, kterou se k uživateli dostane oprava. Sedí nahoře, přes obsah, a povinná varianta se barevně odliší — ne proto, aby strašila, ale aby bylo na první pohled jasné, že „Později" tam nebude. Vše přes tokeny --kp-*, žádné natvrdo zapsané barvy: pruh musí sedět ve světlém i tmavém motivu (stálé pravidlo v CLAUDE.md). */ .kp-upd { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; background: color-mix(in oklab, var(--kp-green) 12%, var(--kp-surface)); border-bottom: 1px solid var(--kp-line-strong); box-shadow: var(--kp-shadow-sm); font-family: var(--kp-font-body); } .kp-upd--required { background: color-mix(in oklab, var(--kp-terracotta) 14%, var(--kp-surface)); } .kp-upd__body { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; } .kp-upd__title { font-family: var(--kp-font-display); font-size: .95rem; color: var(--kp-ink); } .kp-upd__notes { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--kp-ink-soft); /* Poznámky k vydání můžou být dlouhé; pruh nesmí spolknout půl obrazovky. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .kp-upd__err { margin: 0; font-size: .82rem; color: var(--kp-terracotta); } .kp-upd__actions { display: flex; gap: 8px; align-items: center; } /* Ukazatel průběhu. Stahování APK přes mobilní data trvá desítky sekund — bez zpětné vazby to vypadá zaseknutě a uživatel aplikaci zabije. */ .kp-upd__bar { height: 4px; border-radius: 4px; overflow: hidden; background: color-mix(in oklab, var(--kp-ink) 12%, transparent); } .kp-upd__bar > span { display: block; height: 100%; border-radius: 4px; background: var(--kp-green-deep); transition: width 160ms linear; } @media (max-width: 560px) { .kp-upd { gap: 10px; padding: 10px 12px; } .kp-upd__actions { width: 100%; } .kp-upd__actions .kp-btn { flex: 1 1 auto; } } /* ══════════════════════════════════════════════════════════════════════════ AGÁTA (AgataPanel.razor) — dlaždice na Přehledu i celá obrazovka. Tři pravidla, která tenhle blok drží: 1. TÓN JE ZÁVAŽNOST. Jediná proměnná `--kp-ag-tone` obarví lem karty, rámeček důkazu i odkaz „proč?". Terakota má v aplikaci jediný úkol — kritické upozornění — takže ji dostane jen `action`; `attention` je zlatá, klid zelený. 2. ŽÁDNÁ MODRÁ U DŮKAZU. Prototyp maluje evidenci do `--kp-sky`, jenže v lite ta barva znamená VODU (`.kp-lite__fill--water`) a modrý rámeček kolem důkazu o slepici by se četl jako údaj o napáječce. 3. JEN TOKENY. Žádný natvrdo zapsaný povrch ani text — barvy jdou z `--kp-*` a z lite proměnných (`--lite-card`, `--lite-track`), takže tmavý režim i panel Vzhled platí i tady. Kde by token na text neměl kontrast (zlatá na krému), míchá se s `--kp-ink` v oklab — to ztmaví ve světlém motivu a zesvětlí v tmavém, jedním zápisem. ══════════════════════════════════════════════════════════════════════════ */ /* Značková navigační sada sdílí 24×24 mřížku ve všech třech navigacích. `currentColor` uvnitř SVG přebírá akcent konkrétního motivu; jemná výplň proto nezůstane terakotová po přepnutí do tmavého/zeleného režimu. */ .kp-lite__mobico svg, .kp-lite__sheetico svg, .kp-lite__mobico img, .kp-lite__sheetico img { display: block; width: 24px; height: 24px; overflow: visible; object-fit: contain; } .kp-ag { display: grid; gap: 14px; --kp-ag-tone: var(--kp-green-2, #54A046); } /* Tón podle závažnosti (klid/pozor/akce) je SÉMANTICKÝ semafor, ne osobní akcent — kdyby "klid" jela s uživatelovou volbou, klidná a naléhavá zpráva by v krajním případě (červený akcent) splynuly barvou. */ .kp-ag--calm { --kp-ag-tone: var(--kp-green-2, #54A046); } .kp-ag--attention { --kp-ag-tone: var(--kp-gold); } .kp-ag--action { --kp-ag-tone: var(--kp-terracotta); } /* ---- dlaždice na Přehledu ------------------------------------------------ */ /* Dvě třídy v selektoru schválně: `.kp-lite .kp-fov__card` nastavuje `border` zkratkou, a s jednou třídou by ji tenhle lem nepřebil. */ .kp-lite .kp-ag--card { display: grid; gap: 12px; /* Dlaždice teď sedí POD mřížkou Přehledu, ne nad ní — mezera proto shora, ne zdola (`gap` mřížky před ní o nic nejde, je to samostatný sourozenec). */ margin-top: 16px; border-left: 3px solid var(--kp-ag-tone); } .kp-ag__cardhead { display: flex; align-items: flex-start; gap: 18px; } .kp-ag__cardtext { flex: 1 1 auto; min-width: 0; } .kp-ag__cardtext .kp-fov__label { margin-bottom: 6px; } .kp-ag__face { flex: 0 0 auto; } .kp-ag__open { justify-self: start; } /* ---- hlavička obrazovky -------------------------------------------------- */ .kp-ag__head { display: flex; align-items: center; gap: 14px; } .kp-ag__intro { display: grid; gap: 3px; min-width: 0; } .kp-ag__intro b { font-family: var(--kp-font-display); font-size: 1.15rem; color: var(--kp-ink); } .kp-ag__intro span { font-size: .85rem; line-height: 1.5; color: var(--kp-ink-soft); } .kp-ag__lead, .kp-ag__text { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--kp-ink); } .kp-ag__lead + .kp-ag__text { margin-top: 8px; } .kp-ag__thread { display: grid; gap: 14px; } .kp-ag__turn { display: grid; gap: 7px; min-width: 0; } .kp-ag__turn--me { justify-items: end; } .kp-ag__said { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .kp-ag__bubble { margin: 0; max-width: 62ch; padding: 11px 14px; border: 1px solid var(--kp-line); border-radius: 16px 16px 16px 4px; background: var(--lite-card, var(--kp-surface)); font-size: .92rem; line-height: 1.55; color: var(--kp-ink); } .kp-ag__turn--me .kp-ag__bubble { border-radius: 16px 16px 4px 16px; background: color-mix(in oklab, var(--kp-green) 14%, var(--kp-surface)); border-color: color-mix(in oklab, var(--kp-green) 30%, var(--kp-line)); } .kp-ag__when { font-size: .72rem; color: var(--kp-ink-faint); } .kp-ag__busy { margin: 0; font-size: .85rem; color: var(--kp-ink-soft); } .kp-ag__error { margin: 0; font-size: .85rem; color: var(--kp-terracotta); } /* ---- důkaz: složený stav už nese nejsilnější řádek ----------------------- */ .kp-ag__proofwrap { display: grid; gap: 8px; max-width: 62ch; min-width: 0; } .kp-ag__why { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 1px dashed color-mix(in oklab, var(--kp-ag-tone) 50%, var(--kp-line)); border-radius: 12px; background: color-mix(in oklab, var(--kp-ag-tone) 8%, transparent); font-family: var(--kp-font-body); font-size: .82rem; text-align: left; color: var(--kp-ink); cursor: pointer; transition: background var(--motion-durationFast, 150ms) var(--motion-easing, ease), border-color var(--motion-durationFast, 150ms) var(--motion-easing, ease); } .kp-ag__why:hover { background: color-mix(in oklab, var(--kp-ag-tone) 15%, transparent); } .kp-ag__why:focus-visible { outline: 2px solid var(--kp-ag-tone); outline-offset: 2px; } .kp-ag__proof { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kp-ink-soft); } .kp-ag__whylink { flex: 0 0 auto; font-weight: 600; /* Čistá zlatá na krému nemá kontrast; příměs inkoustu ji ve světlém motivu ztmaví a v tmavém zesvětlí — jedním zápisem pro obojí. */ color: color-mix(in oklab, var(--kp-ag-tone) 72%, var(--kp-ink)); } .kp-ag__evidence { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--lite-track, color-mix(in oklab, var(--kp-ink) 8%, transparent)); } .kp-ag__whytext { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--kp-ink-soft); } .kp-ag__rows { display: grid; gap: 7px; margin: 0; } .kp-ag__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-left: 10px; border-left: 2px solid color-mix(in oklab, var(--kp-ag-tone) 60%, transparent); } .kp-ag__row dt { font-size: .8rem; color: var(--kp-ink-soft); } .kp-ag__row dd { margin: 0; font-size: .84rem; font-weight: 600; color: var(--kp-ink); text-align: right; } .kp-ag__conf { margin: 0; font-size: .78rem; color: var(--kp-ink-faint); } /* ---- návrhy dotazů a pole ------------------------------------------------ */ .kp-ag__chips { display: flex; flex-wrap: wrap; gap: 8px; } .kp-ag__chip { padding: 8px 13px; border: 1px solid var(--kp-line); border-radius: 999px; background: var(--kp-surface); font-family: var(--kp-font-body); font-size: .82rem; font-weight: 600; color: var(--kp-ink-soft); cursor: pointer; transition: color var(--motion-durationFast, 150ms) var(--motion-easing, ease), border-color var(--motion-durationFast, 150ms) var(--motion-easing, ease); } .kp-ag__chip:hover:not(:disabled) { color: var(--kp-ink); border-color: var(--accent); } .kp-ag__chip:disabled { opacity: .5; cursor: not-allowed; } .kp-ag__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .kp-ag__ask { display: flex; align-items: flex-end; gap: 10px; } .kp-ag__field { flex: 1 1 auto; min-width: 0; /* Pole roste s textem: v jednom řádku nebylo vidět víc než pár slov dotazu (poznámka zadavatele k prototypu). */ field-sizing: content; min-height: 46px; max-height: 34vh; padding: 11px 13px; border: 1px solid var(--kp-line); border-radius: 14px; background: var(--kp-surface); font-family: var(--kp-font-body); font-size: .92rem; line-height: 1.5; color: var(--kp-ink); resize: vertical; } .kp-ag__field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* `.kp-fov__cta` má `min-width: 38 %` (drží proporci na desce Přehledu) — vedle pole by z toho bylo tlačítko přes půl řádku. */ .kp-ag__send { flex: 0 0 auto; min-width: 0; } :root[data-motion="reduced"] .kp-ag__why, :root[data-motion="reduced"] .kp-ag__chip { transition: none; } /* Telefon: MAUI je hlavně mobil, takže tohle není doplněk, ale hlavní tvar. */ @media (max-width: 640px) { .kp-ag__bubble, .kp-ag__proofwrap { max-width: 100%; } .kp-ag__cardhead { gap: 14px; } .kp-ag__ask { flex-direction: column; align-items: stretch; } .kp-ag__send { width: 100%; } /* Dlouhý popisek a dlouhá hodnota se vedle sebe nevejdou — pod sebou ano. */ .kp-ag__row { flex-direction: column; align-items: flex-start; gap: 2px; } .kp-ag__row dd { text-align: left; } } /* Zpět na web — v liště jednoduché verze. Tvarem sedí k ostatním ikonovým tlačítkům vedle (`.kp-lite__iconbtn`), jen je širší, protože nese text. */ .kp-lite__back { padding: 0 12px; height: 34px; border-radius: 999px; border: 1px solid var(--kp-line); background: var(--kp-surface); color: var(--kp-ink-soft); font-size: 0.86rem; font-weight: 600; transition: color var(--t-fast, 140ms) var(--ease-out, ease), border-color var(--t-fast, 140ms) var(--ease-out, ease); } .kp-lite__back:hover { color: var(--kp-a-deep, #2F6428); border-color: var(--kp-a-line, #9CC28F); } .kp-lite__back:focus-visible { outline: 2px solid var(--kp-a, #3C7A34); outline-offset: 2px; } @media (max-width: 720px) { .kp-lite__back { padding: 0; width: 34px; justify-content: center; } } :root[data-motion="reduced"] .kp-lite__back { transition: none; } /* ========================================================================== * Zamčené funkce — odznak a vysvětlující obrazovka * --------------------------------------------------------------------- * Do 2026-08-28 se zamčené obrazovky z menu VYHAZOVALY, takže chovatel bez * kroužků neměl jak zjistit, že aplikace umí ekonomiku, předpověď nebo * kamery. Teď jsou vidět všechny; zamčené nesou odznak a po klepnutí ukážou, * co dávají a co k nim je potřeba. * * Odznak je KORUNA, ne visací zámek. Zámek říká „sem nesmíš" a vypadá jako * zabezpečení aplikace — zákazník ten původní popsal jako „jakýsi zámek" a * nepoznal, co je vlastně zamčené. Koruna říká „tohle patří k VIP" a je to * týž znak, jaký nosí členové u avatara. U hardwarové brány je místo koruny * kroužek: kroužky se za členství nekupují a koruna by tam lhala. * ========================================================================== */ .kp-gate__badge { position: absolute; right: 2px; top: 2px; display: grid; place-items: center; width: 17px; height: 17px; pointer-events: none; } /* `height: auto`, ne 100 %. Koruna má viewBox 32×26, kroužek 16×16 — natažení obou na čtverec by korunu o pětinu protáhlo do výšky a vedle kroužku by vypadala jako jiná sada. */ .kp-gate__badge svg { width: 100%; height: auto; display: block; } /* Kroužek je jednobarevná kresba, takže barvu bere odsud; koruny mají vlastní přechody a nechávají se být. */ /* Mezikruží má vlastní barvy (přechod jako koruna), takže se mu barva zvenčí nevnucuje — a smí být stejně velké jako koruna, protože na rozdíl od linkové kresby drží tvar i v 17 px. */ .kp-gate__badge--hw svg { width: 100%; height: 100%; } /* Zamčená položka menu je TIŠŠÍ, ne přeškrtnutá ani nedostupná — klepnout na ni se musí dát, jinak by se člověk nikdy nedozvěděl, co za ní je. */ .kp-lite__railbtn.is-locked, .kp-lite__mobbtn.is-locked, .kp-lite__sheetitem.is-locked { position: relative; } .kp-lite__railbtn.is-locked .kp-lite__railico, .kp-lite__mobbtn.is-locked .kp-lite__mobico, .kp-lite__sheetitem.is-locked .kp-lite__sheetico { opacity: 0.62; } .kp-lite__railbtn.is-locked:hover .kp-lite__railico, .kp-lite__mobbtn.is-locked:hover .kp-lite__mobico, .kp-lite__sheetitem.is-locked:hover .kp-lite__sheetico { opacity: 1; } /* ---- obrazovka s vysvětlením ------------------------------------------- */ .kp-gate { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; max-width: 34rem; margin: clamp(1rem, 5vw, 3rem) auto; padding: clamp(1.3rem, 4vw, 2.2rem); border-radius: var(--kp-radius-lg, 22px); background: var(--lite-card, var(--kp-cream-2)); border: 1px solid var(--kp-line); box-shadow: var(--kp-elev-1, 0 8px 24px rgba(40, 30, 20, 0.1)); text-align: center; } /* Ikona obrazovky ve velkém, s odznakem u ramene — první, co člověk uvidí, je TA FUNKCE, ne to, že je zamčená. */ .kp-gate__art { position: relative; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; margin-bottom: 0.3rem; border-radius: 999px; background: color-mix(in oklab, var(--kp-gold, #D9A441) 12%, transparent); border: 1px solid color-mix(in oklab, var(--kp-gold, #D9A441) 34%, transparent); } .kp-gate__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; } .kp-gate__icon svg, .kp-gate__icon img { width: 100%; height: 100%; } .kp-gate__art .kp-gate__badge { right: -2px; top: -2px; width: 22px; height: 22px; } .kp-gate__art .kp-gate__badge--hw svg { width: 16px; height: 16px; } .kp-gate__title { margin: 0; font-family: var(--kp-font-head); font-weight: 500; font-size: clamp(1.3rem, 4vw, 1.65rem); color: var(--kp-ink); } .kp-gate__pitch { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--kp-ink); max-width: 26rem; } .kp-gate__detail { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--kp-ink-soft); max-width: 26rem; } .kp-gate__need { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 0.9rem; padding: 1rem 1.1rem; width: 100%; border-radius: var(--kp-radius, 16px); background: color-mix(in oklab, var(--kp-ink) 5%, transparent); border: 1px solid var(--kp-line); } .kp-gate__needlabel { margin: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--kp-ink-faint); } .kp-gate__needtext { margin: 0; font-size: 0.94rem; line-height: 1.5; color: var(--kp-ink); } .kp-gate__need .kp-lite__btnprimary { margin-top: 0.35rem; text-decoration: none; } /* ========================================================================== * Denní tabule nad hejnem * --------------------------------------------------------------------- * Zadání: „nahoře aby bylo napsaný 13 splněno, čekáme na 3: Petra, Lucka, * Hanka. Až tyto 3 snesou, tak zmizí a bude tam 15 slepic a u každé zelená * fajka." * * Tabule proto vypisuje JMÉNA, ne jen počet — s počtem musí člověk projít * všechny karty a hledat, se jmény ví hned, na koho čeká. A jakmile snesou * všechny, přepne se do potvrzení; jinak by pořád něco vytýkala. * ========================================================================== */ .kp-today { display: flex; align-items: flex-start; gap: 0.8rem; margin: 0 0 14px; padding: 13px 15px; border-radius: var(--kp-radius, 16px); background: var(--lite-card, var(--kp-cream-2)); border: 1px solid var(--kp-line); box-shadow: var(--kp-elev-1, 0 8px 24px rgba(40, 30, 20, 0.1)); } .kp-today__mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: color-mix(in oklab, var(--kp-gold, #D9A441) 20%, transparent); color: var(--kp-gold, #D9A441); } .kp-today__mark svg { width: 17px; height: 17px; } .kp-today--done .kp-today__mark { background: color-mix(in oklab, var(--kp-leaf, #4F9A3F) 20%, transparent); color: var(--kp-leaf, #4F9A3F); } .kp-today__text { display: grid; gap: 2px; min-width: 0; } .kp-today__text b { font-family: var(--kp-font-body); font-size: 15px; font-weight: 700; color: var(--kp-ink); } /* Jména se ZALAMUJÍ. `nowrap` by u patnáctihlavého hejna udělal řádek přes dvě obrazovky a na telefonu by z tabule byl vodorovný posuvník. */ .kp-today__text > span { font-size: 13.5px; line-height: 1.45; color: var(--kp-ink-soft); overflow-wrap: anywhere; }