/* ============================================================ ČLENSKÁ SEKCE průkopníci.ai Sdílený styl. Vychází 1:1 z designu webu (paia/index.html). ============================================================ */ :root{ --grad1:#FFFBCC; --grad2:#FFE5F2; --yellow:#FFFBCC; --pink-l:#FFE5F2; --coral-l:#FFE0D6; --neon:#FF3DB4; --charcoal:#2A2A2A; --grey:#666666; --white:#fff; /* MALINOVÁ ✦ ztmavená růžová na text, který NENÍ odkaz. Neonová #FF3DB4 v komunitě i na webu znamená „dá se na to kliknout", takže když ji dostane i označení @jménem, ženy ho zkoušejí mačkat. Malinová se od ní na pohled liší a v běhu textu se čte líp. Není vymyšlená: tuhle barvu už web používá pro odkazy v adminu (.dk-odk) a v transakčním e-mailu, jen dosud nikde nestála pojmenovaná. POZOR nezaměnit s #B0004E, ta je vyhrazená pro chybové stavy v adminu. */ --malinova:#E5007D; --neon-y:#F0FF00; /* brandová neonová žlutá, ne ta bledá z pozadí */ --shadow:0 2px 8px rgba(0,0,0,0.08); --shadow-lg:0 12px 40px rgba(0,0,0,0.16); --line:rgba(42,42,42,0.10); } *{box-sizing:border-box;margin:0;padding:0} /* Typografie: na posledním řádku nesmí viset osamělé slovo („vdova"). Prohlížeč si přerovná předchozí řádky sám. Nadpisy se vyrovnají na podobně dlouhé řádky. */ /* Tělo je vysoké aspoň přes celou obrazovku kvůli pozadí. Odsazení patičky dolů na krátké stránce řeší patickuDolu() v clen.js, a to měřením, ne přestavbou rozvržení. NEDĚLAT z těla sloupcový flex. Rozbije to šířku centrovaných bloků, horní lišta se scvrkne na malou pilulku, a záplata `body>*{width:100%}` zase roztáhne plovoucí bublinu „Napiš nám" přes celou spodní hranu obrazovky. */ body{min-height:100vh} p,li,figcaption,blockquote{text-wrap:pretty} /* ============================================================ VYROVNÁVÁNÍ ŘÁDKŮ ✦ OPRAVENO 16. 8. 2026 DENISO, tohle byla ta věc, cos viděla na mobilu: text se lámal brzo a vpravo zůstávalo prázdné místo, i když se tam další slovo vešlo. Můžou za to dvě různá pravidla, která se snadno pletou: balance ✦ vyrovná všechny řádky na PODOBNOU délku. Krásné u nadpisu o dvou třech řádcích. U delšího odstavce ale zkrátí úplně každý řádek, takže vpravo zbývá klidně 60 bodů. pretty ✦ nechá řádky plné a hlídá jenom to, aby na posledním nezůstalo jedno slovo samotné. Tohle chce běžný text. `.lead`, `.pod` a odstavce v hlavičce stránky jsou normální text, ne nadpisy, tak dostávají `pretty`. Nadpisy si `balance` nechávají. ============================================================ */ h1,h2,h3,h4,.sub,.hint{text-wrap:balance} .lead,.pod,.pagehead p{text-wrap:pretty} /* KRÁTKÉ NÁROKY A HESLA ✦ na konci nesmí viset ohryzek („za web", „měsíčně"). `pretty` výš umí ubránit jenom JEDNO osamocené slovo. Dvě slova mu projdou, a přesně tak vznikl řádek, kde nahoře byla celá věta a pod ní viselo „za web". Krátké věty o dvou třech řádcích proto dostávají `balance`, který jim řádky vyrovná na podobnou délku. DENISO, až někde vyrobíš další krátký text (nárok, štítek, popisek karty), přidej si sem jeho třídu a nebudeš to řešit ručně po každé kontrole. */ .prepnuti p,.ochutnavka,.pstitek,.certcard-lbl{text-wrap:balance} /* Jednotné řádkování nadpisů, ať na mobilu nevznikají mezi řádky velké díry. */ h1,h2,h3,h4{line-height:1.18} /* Úsek textu mezi ručními zlomy. Chová se jako vlastní řádek a vyrovná si svoje řádky sám, ať nezůstane jeden dlouhý a pod ním dvě slova. Vyrábí to vyrovnejRadky() v clen.js. */ .rdk{display:block;text-wrap:balance} /* overscroll-behavior:none VYPÍNÁ PRUŽENÍ NA KONCI STRÁNKY. Bez toho se na Macu dá stránka na konci "přetáhnout" dál, obsah i horní lišta nadskočí a nahoře nebo dole probleskne prázdný pruh. Vypadá to, jako by stránka nedržela na místě. Stejné pravidlo mají admin stránky, blog i právní stránky, tohle ho dorovnává pro členskou sekci a prodejní stránky produktů. overflow-y:auto + scrollbar-gutter:stable pak drží místo pro posuvník, ať obsah neposkakuje do stran mezi krátkou a dlouhou stránkou. */ html{background:linear-gradient(to right,#FFFBCC,#FFE5F2);overflow-y:auto;overflow-x:clip;scrollbar-gutter:stable;overscroll-behavior:none} /* Pojistka proti přetékání do stran (bílý prostor, posun doprava na mobilu). clip nerozbije sticky. */ body{max-width:100%;overflow-x:clip} /* ---------- POZADÍ ČLENSKÉ SEKCE: GRADIENT ZAMČENÝ NAHOŘE ---------- Stejně jako blogposty a prodejní stránka. Žlutorůžový gradient prosvítá jen nahoře pod menu a po 470 pixelech se stránka rozplyne do čisté bílé, která už zůstane. Gradient NEJEDE se scrollem, je zamrzlý u vršku stránky. Rozhodnutí Denisy 20. 7. 2026: texty se čtou líp na bílé. */ body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--charcoal); background-color:transparent; background-image:linear-gradient(to bottom, rgba(253,253,251,0) 170px, rgba(253,253,251,0.2) 280px, rgba(253,253,251,0.6) 370px, #FDFDFB 470px); background-repeat:no-repeat;background-size:100% 100%; min-height:100vh; line-height:1.6;font-weight:500;-webkit-font-smoothing:antialiased} .wrap{max-width:1100px;margin:0 auto;padding:0 22px} /* ---------- tlačítka ---------- */ .btn{display:inline-block;background:var(--neon);color:var(--white);text-decoration:none; font-family:inherit;font-weight:700;font-size:16px;border:none;cursor:pointer;border-radius:10px;padding:10px 24px; transition:transform .12s,box-shadow .12s} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none} .btn-sm{padding:9px 20px;font-size:14px} .btn-dark{background:var(--charcoal)} .btn-dark:hover{box-shadow:0 8px 20px rgba(42,42,42,0.28)} .btn-ghost{background:#fff;color:var(--charcoal);border:1.5px solid var(--line)} .btn-ghost:hover{border-color:var(--neon);color:var(--neon);box-shadow:none} .btn-danger{background:#fff;color:#C0392B;border:1.5px solid rgba(192,57,43,0.35)} .btn-danger:hover{background:#C0392B;color:#fff;box-shadow:none} .link{color:var(--neon);font-weight:700;text-decoration:none} .link:hover{text-decoration:underline} /* ---------- hlavička členské sekce ---------- */ .siteheader{display:flex;justify-content:center;padding:20px 0 6px} .headbar{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px; background:rgba(255,255,255,0.20);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px); border:1px solid rgba(255,255,255,0.6);border-radius:999px;padding:9px 12px 9px 30px; box-shadow:0 7px 16px rgba(176,72,136,0.13),inset 0 1px 0 rgba(255,255,255,0.75)} .headbar .logo{font-weight:900;font-size:20px;line-height:1;color:#666;letter-spacing:-0.03em; flex:0 0 auto;text-decoration:none;margin-right:auto} .headbar .logo .u{position:relative;display:inline-block} .headbar .logo .u .star{position:absolute;top:0.05em;left:50%;transform:translateX(-50%);width:0.31em;height:0.31em;line-height:0;color:#666} /* bublinové menu, jedna k jedné s webem */ .headbar nav{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:6px; flex:0 0 auto} .headbar nav .bubble{position:absolute;left:0;bottom:3px;height:3px;width:0;border-radius:2px;background:var(--neon); z-index:0;transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1)} .headbar nav a.bnav-item{position:relative;z-index:1;padding:9px 14px;font-weight:700;font-size:15px; color:var(--charcoal);text-decoration:none;white-space:nowrap;transition:color .2s;cursor:pointer} .headbar nav a.bnav-item:hover{color:var(--neon)} .headbar nav a.bnav-item.lit,.headbar nav a.bnav-item.lit:hover{color:var(--neon)} .menu-backdrop{position:fixed;inset:0;background:rgba(42,42,42,0.38);-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .22s ease;z-index:50} .menu-backdrop.show{opacity:1;visibility:visible} .headbar .me{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex:0 0 auto;position:relative} .avatar{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center; background:var(--charcoal);color:#fff;font-weight:900;font-size:14px;letter-spacing:0.02em;overflow:hidden; box-shadow:0 4px 12px rgba(42,42,42,0.28);cursor:pointer;border:none;font-family:inherit;padding:0} .avatar img{width:100%;height:100%;object-fit:cover;display:block} .me-menu{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid var(--line);border-radius:14px; padding:8px;box-shadow:0 16px 40px rgba(0,0,0,0.16);min-width:220px;display:none;z-index:70} .me-menu.open{display:block} .me-menu .who{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px} .me-menu .who b{display:block;font-size:14px;font-weight:800} .me-menu .who span{font-size:12px;color:var(--grey)} .me-menu a{display:block;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:700;color:var(--charcoal);text-decoration:none} .me-menu a:hover{background:var(--pink-l);color:var(--neon)} .me-cara{height:1px;background:var(--line);margin:6px 8px} .me-menu a.me-ven{color:var(--grey);font-weight:700} .me-menu a.me-ven:hover{background:#F7F5F3;color:var(--charcoal)} .headbar .burger{display:none;font-size:22px;font-weight:700;cursor:pointer;padding:0 8px;user-select:none} /* Účet a objednávky pod burgerem jsou jen mobilní, na desktopu žijí pod avatarem. */ .headbar nav .mnav{display:none} @media(max-width:860px){ .headbar{padding:8px 10px 8px 18px;gap:8px;position:relative} .headbar .logo{font-size:17px} .headbar nav{display:none} .headbar.open nav{display:flex;flex-direction:column;gap:4px;position:absolute;top:calc(100% + 10px);left:0;right:0; background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 16px 40px rgba(0,0,0,0.18);z-index:60} .headbar.open nav .bubble{display:none} .headbar.open nav a.bnav-item{padding:12px 14px;text-align:center;border-radius:10px;font-size:16px} /* Účet, objednávky a odhlášení v burgeru, oddělené čárou. */ .headbar.open nav .mnav{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);margin-top:6px;padding-top:8px} /* Kdo je přihlášená. Na mobilu je fotka schovaná, tak to musí být vidět tady. */ .headbar.open nav .mnav-who{padding:0 14px 10px;text-align:center;line-height:1.35} .headbar.open nav .mnav-who b{display:block;font-size:14px;font-weight:800;color:var(--charcoal)} .headbar.open nav .mnav-who span{font-size:12px;color:var(--grey)} .headbar.open nav .mnav-item{padding:12px 14px;text-align:center;border-radius:10px;font-size:16px;font-weight:700;color:var(--charcoal);text-decoration:none} .headbar.open nav .mnav-item:hover{background:var(--pink-l);color:var(--neon)} .headbar.open nav .mnav-ven{color:var(--grey)} .headbar.open{position:relative;z-index:60} .headbar .burger{display:block;padding:0 4px} /* Když se menu schová do burgeru, space-between vystřelí zvoneček doprostřed. Tohle ho přilepí zpátky doprava k burgeru. Avatar je pryč, účet je v burgeru. */ .headbar .me{gap:4px;margin-left:auto} .avatar{display:none} .zvontl{width:32px;height:32px;font-size:17px} } @media(max-width:420px){ .headbar{padding:8px 8px 8px 14px} .headbar .logo{font-size:16px} /* IKONKY SE ZMENŠUJÍ SPOLU S MENU. Zvoneček a bublina měly pevnou velikost, takže na úzkém telefonu vedle zdrobnělého loga trčely jako dva balony. Emoji navíc kreslí sklo větší, než je čtvereček tlačítka, proto se krotí i font-size. */ .headbar .me{gap:2px} .zvontl{width:28px;height:28px;font-size:15px} .zvontl .zbadge{top:0;right:0;min-width:10px;height:10px;font-size:6.5px;line-height:10px} .headbar .burger{font-size:19px;padding:0 2px} } @media(max-width:360px){ .headbar{padding:7px 6px 7px 11px;gap:4px} .headbar .logo{font-size:15px} .zvontl{width:25px;height:25px;font-size:13.5px} .headbar .burger{font-size:18px} } /* ---------- NOVINKA ---------- Stejný kabát jako newsletter box na blogu: žluté pozadí, růžový uppercase štítek, plnohodnotné růžové tlačítko přes celou šířku. */ .novinka{max-width:640px;margin:0 auto;background:var(--yellow);border-radius:16px; padding:26px 28px 24px;text-align:left} .novinka .nstitek{text-transform:uppercase;letter-spacing:0.08em;font-weight:800;font-size:11px; color:var(--neon);margin-bottom:12px} .novinka .ntit{font-weight:800;font-size:17px;line-height:1.5;margin-bottom:6px;color:var(--charcoal)} .novinka .nsub{font-size:15px;line-height:1.6;color:var(--charcoal);margin-bottom:18px} .novinka .btn{display:block;width:100%;text-align:center;padding:15px;font-size:15px;border-radius:10px} @media(max-width:640px){.novinka{padding:22px 20px}} /* ---------- VELKÉ KARTY PRODUKTŮ NA DEŠTNÍKU ---------- */ .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media(max-width:820px){.pgrid{grid-template-columns:1fr}} .pcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column; text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .14s,box-shadow .14s,border-color .14s} .pcard.mam{border:1.5px solid var(--neon)} .pcard.nemam{background:#FBFAF9} .pcard.navrat{cursor:pointer} /* OBRÁZEK PRODUKTU JE VIDĚT CELÝ. Dřív tu byla pevná výška 190 px a obrázek se do ní ořízl, takže z banneru zbyl jen výřez a Denise chyběl kus hlavy. Teď má rámeček stejný poměr stran jako samotné bannery, tedy 16 ku 9, a nic se nemusí ořezávat. Když někdy přijde obrázek s jiným poměrem, `contain` ho zmenší tak, aby byl celý vidět, a okolo zůstane značkový gradient. Nikdy se nic neuřízne. */ .pcard .pviz{aspect-ratio:16/9;position:relative;overflow:hidden; background:linear-gradient(135deg,#FFFBCC,#FFD6F0);display:flex;align-items:center;justify-content:center} .pcard .pviz img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block} /* Starší prohlížeče, které neumí aspect-ratio, ať nemají rámeček nulový. */ @supports not (aspect-ratio: 16/9){.pcard .pviz{height:190px}} .pcard .pviz .hvezda{font-size:64px;color:var(--neon);opacity:.85;line-height:1} /* Hvězda je JEN zástupka do prázdného rámečku, dokud produkt nemá banner. Jakmile banner je, hvězda se schová, ať se ženě nekreslí přes obrázek. */ .pcard .pviz:has(img) .hvezda{display:none} .pcard.nemam .pviz{background:linear-gradient(135deg,#F2F0EC,#E9E6E1)} .pcard.nemam .pviz img{filter:grayscale(1);opacity:.55} .pcard.nemam .pviz .hvezda{color:#B9B5AF;opacity:1} .pcard .znacka{position:absolute;top:12px;right:12px;font-size:10px;font-weight:800;letter-spacing:0.04em; text-transform:uppercase;padding:5px 11px;border-radius:7px;z-index:2} .pcard .znacka.on{background:var(--neon);color:#fff;box-shadow:0 3px 10px rgba(255,61,180,0.4)} .pcard .znacka.off{background:rgba(255,255,255,0.9);color:var(--grey);box-shadow:0 2px 8px rgba(0,0,0,0.1)} .pcard .zamek{position:absolute;top:12px;left:12px;z-index:2;width:30px;height:30px;border-radius:50%; background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;font-size:14px; box-shadow:0 2px 8px rgba(0,0,0,0.1)} .pcard .pbd{padding:24px 26px 26px;flex:1;display:flex;flex-direction:column} .pcard .pstitek{text-transform:uppercase;letter-spacing:0.08em;font-weight:700;font-size:10.5px;color:var(--neon);margin-bottom:7px} .pcard.nemam .pstitek{color:var(--grey)} .pcard .pbd h3{font-weight:900;font-size:24px;letter-spacing:-0.5px;margin-bottom:9px;line-height:1.2} .pcard .pbd p{font-size:14px;color:var(--grey);line-height:1.65;margin-bottom:18px} /* Spodní akční prvek (tlačítko/Vstoupit) přišpendlíme ke dnu, ať se karty s různě dlouhým obsahem hezky zarovnají a nevzniká uprostřed prázdná díra. */ /* Na spodní hranu karty se přišpendlí JEN odkaz s akcí (Vstoupit, Chci více info). Dřív se přišpendlilo cokoliv, co bylo v kartě poslední, takže na kartě bez akce odletěl žlutý rámeček dolů a mezi ním a textem zůstala velká díra. Teď žluté rámečky navazují rovnou na text a karty vedle sebe si sedí. */ .pcard .pbd > .pakce, .pcard .pbd > a.pakce, .pcard .pbd > span.pakce, /* Spodní blok karty: cena a akce pohromadě. Přišpendlí se na dno, takže ceny na sousedních kartách sedí na stejné lince, i když je nad nimi různě dlouhý žlutý rámeček. */ .pcard .pbd > .pdol{margin-top:auto} /* Vstoupit na kartě, která se teprve otevře. Je vidět, ale neklikací, aby karta vedle sousedky nevypadala nedodělaně. */ .pcard .pakce.pakce-ceka{color:#B9B5AF;cursor:default} .pcard .pakce.pakce-ceka .sip{transform:none} .pcard .pcena{font-size:12.5px;font-weight:700;color:var(--charcoal);margin-bottom:14px} /* Cena je vždycky černá. Růžovou si šetříme jen na tlačítka, ať táhnou. */ .pcard .pcena b{color:var(--charcoal)} /* běžná cena, přeškrtnutá kotva. Stojí ZA aktivní cenou, ne před ní. */ .pcard .pcena .skrt{text-decoration:line-through;color:var(--grey);font-weight:700;margin-left:4px;font-size:11.5px} .pcard .pakce{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:800;color:var(--neon)} .pcard.nemam .pakce{color:var(--neon)} /* Zaplacená PAIA, co čeká na 14denní lhůtu. Karta je barevná (má koupeno), jen místo Vstoupit má žlutý odpočet a možnost čekání přeskočit. */ .pcard.ceka{border:1.5px solid var(--neon-y)} /* Pozastavené členství. Klidná karta, barevná, ale ztišená. */ .pcard.pauza{border:1.5px solid var(--line)} /* Neúspěšná platba. Žlutý rámeček a v LEVÉM HORNÍM rohu žlutý kroužek s výstražným trojúhelníkem, který přesahuje přes roh ven z bubliny a svítí pořád. */ .pcard-wrap{position:relative;display:flex;transition:transform .16s} .pcard-wrap > .pcard{flex:1;min-width:0} /* Na najetí povyskočí celý obal i s trojúhelníkem, ne jen karta pod ním. */ .pcard.platba{border:2px solid var(--neon-y)} .pcard-wrap .platbabadge{position:absolute;top:-14px;left:-14px;z-index:10;width:42px;height:42px;border-radius:50%; background:var(--neon-y);display:flex;align-items:center;justify-content:center;font-size:20px; box-shadow:0 5px 16px rgba(0,0,0,0.3);border:3px solid #fff} .pcard .pakce.pakce-platba{color:#C0392B} .pcard .odpocet{background:#FFFDEB;border:1px solid #F4EDBE;border-radius:11px; padding:11px 13px;font-size:12.5px;line-height:1.55;color:var(--charcoal);margin-bottom:14px} .pcard .odpocet b{color:var(--charcoal)} .pcard .pakce .sip{transition:transform .16s} .pcard .pcekej{font-size:13px;font-weight:700;color:var(--grey)} /* ---------- horní pás (stav členství) ---------- */ .statusbar{background:var(--charcoal);color:#fff;text-align:center;padding:11px 16px;font-size:14px;font-weight:700;line-height:1.5} .statusbar .y{color:#FFE873} .statusbar .s{margin:0 8px} .statusbar a{color:#fff;text-decoration:underline;font-weight:800} /* ---------- stránka ---------- */ .pagehead{padding:38px 0 6px} /* Horní štítek nad nadpisem (Nastavení, Papíry...) se neukazuje. Hlavička je čistá: jen černorůžový nadpis a text pod ním, na všech stránkách stejně. */ .pagehead .label{display:none} .pagehead h1{font-weight:900;font-size:36px;letter-spacing:-1px;margin:12px 0 10px;line-height:1.15} .pagehead h1 .hl{color:var(--neon)} .pagehead p{max-width:640px;font-size:15px;color:var(--charcoal)} @media(max-width:640px){.pagehead h1{font-size:28px}} /* Drobečková navigace se neukazuje, návrat je přes horní menu. */ .crumbs{display:none} .crumbs-old{padding:16px 0 0;font-size:13px;font-weight:700;color:var(--grey)} .crumbs a{color:var(--grey);text-decoration:none} .crumbs a:hover{color:var(--neon)} .crumbs span{margin:0 7px;color:var(--neon)} section.block{background:var(--white);border-radius:16px;margin:22px auto;max-width:1100px; padding:34px 30px;box-shadow:var(--shadow);border:1px solid #F1ECE7} /* Miništítek nad sekcí (Kdo jsi...) se neukazuje, ať je podnadpis celý černý a sám. */ section.block > .sec-lbl{display:none} section.block > h2{font-weight:900;font-size:24px;letter-spacing:-0.5px;margin-bottom:8px;line-height:1.25} /* Podnadpisy sekcí jsou celé černé (růžový je jen hlavní nadpis stránky h1). */ section.block > h2 .hl{color:inherit} section.block > p.lead{font-size:14.5px;color:var(--grey);max-width:680px;margin-bottom:22px} /* GLOBÁLNÍ MOBILNÍ PRAVIDLO: bílé bubliny (section.block) NIKDY nelepí do krajů displeje. Po stranách drží mezeru (jako .wrap 22px), ať prosvítá pozadí stejně jako u karet na deštníku. */ @media(max-width:640px){section.block{margin-left:22px;margin-right:22px}} /* ---------- upozornění / bannery ---------- */ .note{border-radius:14px;padding:18px 22px;font-size:14px;line-height:1.65;margin:0 auto 4px;max-width:1100px} .note b{font-weight:800} .note-yellow{background:var(--yellow);border:1px solid rgba(255,61,180,0.16)} .note-pink{background:var(--pink-l);border:1px solid rgba(255,61,180,0.28)} .note-grey{background:#F7F5F3;border:1px solid var(--line);color:var(--grey)} .note-red{background:#FDF1EF;border:1px solid rgba(192,57,43,0.28)} .note .note-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between} .note .note-tx{flex:1;min-width:260px} /* Na mobilu řádek stackujeme pod sebe (text nahoře, tlačítko dole). Samotné min-width:0 nestačí, protože .note-tx má flex:1 (basis 0) a nikdy se nezalomí, jen se smrskne skoro na nulu a na úzké kartě se nadpis láme po písmenkách. Proto přepínáme na sloupec. */ @media(max-width:640px){ .note .note-row{flex-direction:column;align-items:flex-start;gap:12px} .note .note-tx{min-width:0;width:100%} } .note h4{font-weight:900;font-size:16px;margin-bottom:4px} /* Výrazné řádky v Dalším nastavení: větší nadpis, růžová hvězda, tmavý text. */ .setrow{background:#F7F5F3} .setrow .note-tx h4{color:var(--charcoal);font-size:18.5px;letter-spacing:-.015em;margin-bottom:5px} .setrow .note-tx h4 .hv{color:var(--neon);margin-right:3px} .setrow .note-tx p{font-size:14px;line-height:1.55;color:var(--grey);margin:0} /* ---------- karty produktů ---------- */ /* OPRAVA 19. 8. 2026 (noční audit): .prodgrid smazán, nepoužíval ho nikdo. */ .prod{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column; transition:transform .12s,box-shadow .12s;text-decoration:none;color:inherit} .prod.open{border:1.5px solid var(--neon)} .prod .ptop{height:110px;display:flex;align-items:center;justify-content:center;position:relative; background:linear-gradient(135deg,#FFFBCC,#FFD6F0);font-size:40px} .prod .ptop .state{position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;letter-spacing:0.03em; text-transform:uppercase;padding:4px 9px;border-radius:6px} .prod .state.on{background:var(--neon);color:#fff} .prod .state.off{background:rgba(255,255,255,0.85);color:var(--grey)} .prod .pbody{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column} .prod .pbody h3{font-size:18px;font-weight:900;margin-bottom:6px} .prod .pbody p{font-size:13.5px;color:var(--grey);flex:1;margin-bottom:14px} .prod .pmeta{font-size:12.5px;color:var(--grey);margin-bottom:12px} .prod .pcta{font-size:14px;font-weight:800;color:var(--neon)} .prod.locked{opacity:.9} .prod.locked .ptop{background:linear-gradient(135deg,#F5F3F0,#EDEAE6);filter:grayscale(0.2)} .prod.locked .pcta{color:var(--charcoal)} /* ---------- kroky systému ---------- */ .steps{display:flex;flex-direction:column;gap:10px} .step{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px; padding:14px 18px;cursor:pointer;font-family:inherit;text-align:left;width:100%; transition:border-color .15s,transform .12s,box-shadow .15s} .step .n{width:36px;height:36px;flex:0 0 auto;border-radius:50%;color:#fff;font-weight:900;font-size:15px; display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at 30% 30%,#FF7CCB,#FF3DB4);box-shadow:0 3px 8px rgba(255,61,180,0.4)} .step.done .n{background:radial-gradient(circle at 30% 30%,#9BE7A8,#3FBF62);box-shadow:0 3px 8px rgba(63,191,98,0.35)} .step .tx{display:flex;flex-direction:column;flex:1;min-width:0} .step .tx b{font-weight:800;font-size:16px} .step .tx span{color:var(--grey);font-weight:500;font-size:13px} .step .go{color:var(--neon);font-weight:800;font-size:20px;flex:0 0 auto} /* ---------- mřížka vychytávek ---------- */ .toolbar-f{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px} .searchbox{position:relative;flex:1;min-width:220px} .searchbox input{width:100%;border:1px solid rgba(42,42,42,0.15);border-radius:9px;padding:11px 14px 11px 38px; font-family:inherit;font-size:14px;font-weight:500;background:#fff;color:var(--charcoal)} .searchbox input:focus{outline:none;border-color:var(--neon)} .searchbox svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:var(--grey)} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{border:1.5px solid rgba(255,61,180,0.4);background:#fff;border-radius:999px;padding:8px 14px; font-family:inherit;font-weight:700;font-size:13px;color:var(--charcoal);cursor:pointer;transition:all .12s} .chip:hover{border-color:var(--neon)} .chip.active{background:var(--pink-l);border-color:var(--neon);color:var(--charcoal)} .tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px} .tcard{background:#fff;border:1px solid rgba(42,42,42,0.08);border-radius:12px;overflow:hidden;cursor:pointer; display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s} .tcard .thumb{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,#FFFBCC,#FFD6F0)} .tcard .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .tcard .thumb .tag{position:absolute;top:9px;left:9px;background:rgba(255,255,255,0.6);color:var(--charcoal); font-size:9px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;padding:3px 8px;border-radius:5px; backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 1px 5px rgba(0,0,0,0.14)} .tcard .tb{padding:14px 16px 18px;flex:1;display:flex;flex-direction:column} .tcard .tb h3{font-size:15px;font-weight:800;margin-bottom:5px;line-height:1.3} .tcard .tb p{font-size:12.5px;color:var(--grey);flex:1} .tcard .tb .cta{margin-top:12px;font-size:12.5px;font-weight:800;color:var(--neon)} .noresult{grid-column:1/-1;text-align:center;color:var(--grey);padding:30px;font-weight:500} /* ---------- tabulka objednávek ---------- */ .tbl{width:100%;border-collapse:collapse;font-size:14px} .tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--grey); font-weight:800;padding:0 14px 10px;border-bottom:1px solid var(--line)} .tbl td{padding:16px 14px;border-bottom:1px solid var(--line);vertical-align:top} .tbl tr:last-child td{border-bottom:none} .tbl td b{font-weight:800} .tbl .files{display:flex;flex-direction:column;gap:5px} .tbl .files a{font-size:13px;font-weight:700;color:var(--neon);text-decoration:none;overflow-wrap:break-word} .tbl .files a:hover{text-decoration:underline} /* white-space:nowrap, ať se stav nikdy nezlomí na dva řádky („ODSTOUPE / NO"). */ .pill{display:inline-block;white-space:nowrap;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.03em; padding:4px 9px;border-radius:6px} .pill.on{background:#E7F7EC;color:#2C8C4C} .pill.off{background:#F1EFEC;color:var(--grey)} @media(max-width:760px){ .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%} .tbl thead{display:none} .tbl tr{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:6px 4px} .tbl td{border:none;padding:8px 14px} .tbl td::before{content:attr(data-l);display:block;font-size:10px;text-transform:uppercase; letter-spacing:0.06em;color:var(--grey);font-weight:800;margin-bottom:3px} } /* Doklady ke stažení: rozklikávátko „Doklady" už netřeba. Na desktopu je na ně vlastní sloupec a na mobilu se celá objednávka rozroluje z lišty (viz níž), takže by to bylo rozklikávátko v rozklikávátku. Detail proto zůstává vždycky otevřený. */ .doklady summary{display:none} .doklady .files{margin-top:0} /* ---------- OBJEDNÁVKA JAKO ROZROLOVACÍ LIŠTA (jen telefon a menší tablet) ---------- Na desktopu je objednávka jeden řádek tabulky a všechno je vidět naráz, to funguje. Na telefonu se ale z každého řádku stal vysoký blok, a když jich žena bude mít třicet, je stránka nekonečná. Proto se na mobilu z každé objednávky stane jedna lištička: název produktu, částka, datum a stav. Klepnutím se rozroluje číslo faktury a doklady ke stažení. Zavřená lišta má 56 px, takže se do ní pohodlně trefí i palec. Částka, produkt a stav se dole už neopakují, jsou přímo v liště. */ .obj-lista{display:none} @media(max-width:760px){ /* Bublina objednávky má velmi světlý žlutý podklad, ať se v bílé sekci neztratí. Ještě ji nadzvedne jemný stín, výraznější rámeček a tenký růžový proužek vlevo. Žlutá je stejná zavřená i rozrolovaná, že je otevřená, poznáš podle otočené šipky a podle obsahu, co se pod lištou vysune. */ .tbl tr{padding:0;overflow:hidden;background:#FFFEF6; border:1px solid rgba(42,42,42,0.14);border-left:3px solid rgba(255,61,180,0.55); box-shadow:0 2px 10px rgba(42,42,42,0.07)} .tbl td.obj-lista{display:block;padding:0} .tbl td.obj-lista::before{display:none} .obj-tlac{display:flex;align-items:center;gap:10px;width:100%;min-height:56px; background:none;border:0;padding:13px 14px;font-family:inherit;text-align:left; color:var(--charcoal);cursor:pointer;-webkit-tap-highlight-color:transparent} /* Pilulka v liště je o chlup útlejší, ať se na úzkém telefonu vejde na řádek s částkou a datem. Písmo zůstává 11px, mění se jen odsazení. */ .obj-tlac .pill{padding:4px 8px;letter-spacing:0.02em} .obj-tlac .ol-text{flex:1;min-width:0} .obj-tlac .ol-nazev{display:block;font-size:15px;font-weight:800;line-height:1.3} /* Název dostane celou šířku, pilulka se stavem jde pod něj k částce a datu. Na úzkém displeji se jinak dlouhý název mačká do třech řádků vedle pilulky. */ .obj-tlac .ol-info{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px; font-size:13px;color:var(--grey);line-height:1.35;margin-top:5px} .obj-tlac .ol-sipka{font-size:13px;line-height:1;color:var(--neon);flex:0 0 auto;transition:transform .2s} .obj-tlac:active{background:rgba(42,42,42,0.04)} /* Zavřená objednávka: vidět je jenom lišta. */ .tbl tr.sbaleno td:not(.obj-lista){display:none} /* Otevřená objednávka: šipka se otočí, pod lištou se udělá linka a obsah se měkce vysune. */ .tbl tr:not(.sbaleno) .ol-sipka{transform:rotate(180deg)} .tbl tr:not(.sbaleno) td.obj-lista{border-bottom:1px solid var(--line);margin-bottom:8px} .tbl tr:not(.sbaleno) td:not(.obj-lista){animation:objRozbal .18s ease-out} .tbl tr:not(.sbaleno) td:last-child{padding-bottom:14px} /* Co je v liště, to se dole neopakuje (produkt, částka, stav). */ .tbl td.obj-skryt-mobil{display:none} } @keyframes objRozbal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} /* Schované objednávky a schované starší faktury. Odkrývají se po deseti. */ .tbl tr.skryto,.tbl .files a.skryto{display:none} .obj-vic,.vic-faktur{background:#2A2A2A;border:1.5px solid #2A2A2A;border-radius:999px; font-family:inherit;font-weight:800;color:#fff;cursor:pointer} .obj-vic{display:block;margin:0 auto;padding:12px 26px;font-size:14px} .vic-faktur{align-self:flex-start;margin-top:4px;padding:10px 20px;font-size:13px} .tbl tr.obj-vic-radek,.tbl tr.obj-vic-radek:not(.sbaleno){border:0;background:none;box-shadow:none;padding:0} .tbl tr.obj-vic-radek td,.tbl tr.obj-vic-radek td:last-child{border:0;background:none;padding:16px 0 0;text-align:center;animation:none} @media(hover:hover){.obj-vic:hover,.vic-faktur:hover{background:#000}} @media(prefers-reduced-motion:reduce){ .tbl tr:not(.sbaleno) td:not(.obj-lista){animation:none} .obj-tlac .ol-sipka{transition:none} } /* ---------- formulářová pole ---------- */ .field{margin-bottom:16px} .field label{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em; color:var(--grey);margin-bottom:6px} .field input,.field select,.field textarea{width:100%;border:1px solid rgba(42,42,42,0.16);border-radius:9px; padding:12px 14px;font-family:inherit;font-size:15px;color:var(--charcoal);background:#FDFCFB} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--neon);background:#fff} .field input:disabled,.field select:disabled{background:#F7F5F1;color:var(--grey)} /* ---------- VYPLNĚNÉ POLE JE ŽLUTÉ ---------- Jedno jediné pravidlo pro celý web, ať to nikde nevypadá roztřískaně: pole, které UŽ MÁ hodnotu, je světle žluté. Prázdné pole je bílé. Je jedno, kdo tu hodnotu dal. Prohlížeč, my z účtu, nebo si ji žena napsala sama. Rozbalovací menu mají hodnotu vždycky, takže jsou žlutá od začátku, a je jedno, jestli na ně žena sáhla. Bílé pole tím pádem znamená jedinou věc: tady ještě něco chybí. Třídu .mavalue rozdává obarviVsechnaPole() dole v tomhle souboru. */ .field input.mavalue,.field select.mavalue,.field textarea.mavalue{background:#FFFDEE} /* Zrovna psané pole je bílé, ať je vidět, kde stojí kurzor. Po odkliknutí zežloutne. */ /* Bílá při psaní platí jen tam, kde se OPRAVDU píše. V rozbalovacím menu se nepíše, a to zůstává vybrané i po výběru, takže by bílé viselo dál. */ .field input.mavalue:focus,.field textarea.mavalue:focus{background:#fff} /* Příkladový (placeholder) text výrazně světlejší než vyplněná hodnota, ať se nepletou. */ .field input::placeholder,.field textarea::placeholder{color:#C2BCB2;opacity:1} /* ---------- PŘEDVYPLNĚNÍ PROHLÍŽEČEM (autofill) ---------- Chrome si sám obarví předvyplněná pole svojí modrou a obyčejným background:... se to přebít NEDÁ. Jediná cesta je vnitřní stín přes celé pole. Dáváme tam náš světle žlutý podklad, ať to sedí do značky a ženě je zároveň vidět, co za ni vyplnil prohlížeč. */ .field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus, .field input:-webkit-autofill:active, .field select:-webkit-autofill, .field textarea:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px #FFFDEE inset !important; box-shadow:0 0 0 1000px #FFFDEE inset !important; -webkit-text-fill-color:var(--charcoal) !important; caret-color:var(--charcoal); transition:background-color 9999s ease-in-out 0s} /* Firefox si to řeší po svém, tam stačí zrušit jeho vlastní podbarvení. */ .field input:autofill{background:#FFFDEE} .field .hint{font-size:12.5px;color:var(--grey);margin-top:6px} .fields2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} @media(max-width:640px){.fields2{grid-template-columns:1fr}} /* ---------- volby (radio karty) ---------- */ .choices{display:flex;flex-direction:column;gap:12px;margin:6px 0 4px} .choice{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:12px; padding:16px 18px;cursor:pointer;transition:border-color .15s,background .15s} .choice:hover{border-color:rgba(255,61,180,0.5)} .choice.sel{border-color:var(--neon);background:#FFF8FC} .choice.sel.danger{border-color:#C0392B;background:#FDF1EF} .choice input{margin-top:3px;width:18px;height:18px;accent-color:var(--neon);flex:0 0 auto;cursor:pointer} .choice .ctx b{display:block;font-weight:800;font-size:15px;margin-bottom:3px} .choice .ctx span{font-size:13.5px;color:var(--grey);line-height:1.55} .warnline{display:none;margin-top:10px;background:#FDF1EF;border:1px solid rgba(192,57,43,0.28);border-radius:10px; padding:12px 14px;font-size:13px;font-weight:700;color:#C0392B;line-height:1.5} .warnline.show{display:block} /* ---------- wizard (ukončení) ---------- */ .wizsteps{display:flex;gap:8px;margin-bottom:26px} .wizstep{flex:1;height:5px;border-radius:3px;background:var(--line)} .wizstep.on{background:var(--neon)} .wizpane{display:none} .wizpane.on{display:block} .wiznav{display:flex;gap:12px;justify-content:space-between;margin-top:24px;flex-wrap:wrap} /* ---------- modal ---------- */ /* z-index 1000, ať je popup nade VŠÍM. Hlavička má 200, zvoneček 300. Dřív jsem to měla na 80 a menu lezlo přes popup. */ /* UVÍTACÍ POPUP PO ÚSPĚŠNÉ PLATBĚ (na Moje produkty, po dojetí upsell funnelu). Vizuálně jako popup po odhlášení: gradient a rozmazané pozadí, ne bílé modální okno. */ .zpop-overlay{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center; padding:22px;background:rgba(42,42,42,0.42);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)} .zpop-overlay.show{display:flex} .zpop-pop{position:relative;text-align:center;border-radius:26px;padding:44px 40px 34px;max-width:470px;width:100%; background:linear-gradient(135deg,#FFC24A 0%,#FF5BA6 48%,#E5259B 100%); box-shadow:0 0 90px 6px rgba(255,61,180,0.55),0 26px 60px rgba(229,37,155,0.42); animation:zpopIn .4s cubic-bezier(.2,.9,.3,1.35)} @keyframes zpopIn{from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}} .zpop-pop::before{content:"";position:absolute;inset:-46px;z-index:-1;border-radius:44px; background:radial-gradient(circle at 50% 42%,rgba(255,61,180,0.6),rgba(255,180,60,0.25) 45%,rgba(255,61,180,0) 72%); filter:blur(26px)} .zpop-label{font-weight:900;font-size:13px;letter-spacing:2.5px;text-transform:uppercase; color:rgba(255,255,255,0.92);margin-bottom:10px;text-shadow:0 1px 8px rgba(150,15,95,0.35)} .zpop-nadpis{font-weight:900;font-size:28px;line-height:1.15;letter-spacing:-0.5px;color:#fff; text-shadow:0 2px 16px rgba(150,15,95,0.4);margin-bottom:14px;text-wrap:balance} .zpop-text{color:#fff;font-size:15px;line-height:1.55;margin:0 0 24px;opacity:0.96;text-wrap:pretty} .zpop-produkt{text-transform:uppercase;font-weight:800;letter-spacing:0.3px} .zpop-btn{background:#fff;color:#E5259B;border:none;border-radius:999px;padding:14px 30px; font-family:inherit;font-weight:900;font-size:15px;cursor:pointer; box-shadow:0 8px 22px rgba(150,15,95,0.3);transition:transform .12s} @media(max-width:520px){.zpop-pop{padding:38px 24px 30px}.zpop-nadpis{font-size:24px}} .overlay{position:fixed;inset:0;background:rgba(42,42,42,0.62);-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);z-index:1000;display:none; align-items:center;justify-content:center;padding:40px 16px;overflow-y:auto} .overlay.open{display:flex;animation:ovfade .3s ease} .modal{background:#fff;border-radius:16px;max-width:620px;width:100%;box-shadow:var(--shadow-lg);position:relative; z-index:1001;margin:auto;animation:pop .4s cubic-bezier(.16,.84,.32,1)} @keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}} @keyframes ovfade{from{opacity:0}to{opacity:1}} .modal .close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:8px;border:none;z-index:3; background:rgba(255,255,255,0.85);color:var(--charcoal);font-size:18px;cursor:pointer;font-weight:700;line-height:1} .modal .close:hover{background:var(--pink-l);color:var(--neon)} .modal .m-hero{height:170px;border-radius:16px 16px 0 0;overflow:hidden;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#FFFBCC,#FFD6F0)} .modal .m-hero img{width:100%;height:100%;object-fit:cover;display:block} .modal .m-body{padding:26px 30px 30px} .modal .m-label{text-transform:uppercase;letter-spacing:0.08em;font-weight:700;font-size:11px;color:var(--neon)} .modal .m-body h3{font-weight:900;font-size:23px;letter-spacing:-0.4px;margin:8px 0 12px} .modal .m-body p{font-size:15px;margin-bottom:14px} .modal .sysbadge{display:inline-block;background:var(--pink-l);color:var(--neon);font-weight:700;font-size:12px; padding:6px 12px;border-radius:8px;margin-bottom:14px} .modal .m-quote{background:var(--pink-l);border-radius:10px;padding:14px 18px;font-weight:500;font-size:15px;margin:16px 0} .modal ul.pts{list-style:none;margin:6px 0 18px} .modal ul.pts li{padding-left:22px;position:relative;font-size:14px;margin-bottom:7px} .modal ul.pts li::before{content:"\2726";position:absolute;left:0;color:var(--neon)} /* ---------- patička ---------- */ /* Zvýraznění růžovým podtrhem místo růžového textu (jako aktivní položka v menu). Text zůstane charcoal, jen pod ním svítí růžová linka. */ .hlu{color:var(--charcoal);text-decoration:underline;text-decoration-color:var(--neon); text-decoration-thickness:3px;text-underline-offset:4px} /* Jen růžová část věty, bez podtržení a bez tučného, souběžný text. */ .hlp{color:var(--neon)} footer.sitefooter{text-align:center;padding:30px 0 44px;margin-top:18px} footer.sitefooter .div{display:flex;align-items:center;gap:14px;margin:0 auto 30px} footer.sitefooter .div span{flex:1;height:1px;background:rgba(42,42,42,0.12)} footer.sitefooter .div b{color:var(--neon);font-size:14px} footer.sitefooter .logo-footer{font-weight:900;font-size:16px;line-height:1;color:#999;letter-spacing:-0.03em} footer.sitefooter .logo-footer .u{position:relative;display:inline-block} footer.sitefooter .logo-footer .u .star{position:absolute;top:0.05em;left:50%;transform:translateX(-50%);width:0.31em;height:0.31em;line-height:0;color:#999} footer.sitefooter .foot-links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:18px 0 16px} footer.sitefooter .foot-links a{font-size:13px;font-weight:500;color:#666;text-decoration:none} footer.sitefooter .foot-links a:hover{color:var(--neon)} footer.sitefooter .foot-id{font-size:12px;font-weight:500;color:#666;line-height:1.7;margin-bottom:10px} /* Právní řádek. Drobný schválně, není to prodejní text, ale povinné sdělení. */ footer.sitefooter .foot-pravni{font-size:11px;font-weight:500;color:#8A8A8A;line-height:1.65; max-width:900px;margin:0 auto 10px} footer.sitefooter .foot-pravni a{color:#8A8A8A;text-decoration:underline;text-underline-offset:2px} footer.sitefooter .foot-copy{font-size:12px;font-weight:500;color:#999} /* Na mobilu se odkazy v patičce skládají pod sebe, ne vedle sebe. */ @media(max-width:640px){ footer.sitefooter .foot-links{flex-direction:column;gap:13px;align-items:center;margin:16px 0} } /* OPRAVA 19. 8. 2026 (noční audit): styly DEMO PANELU smazány. Panel sám byl odstraněný už dřív (viz clen.js), zůstaly tu po něm jen pravidla, která nic nebarvila. */ /* ============================================================ ZVONEČEK ✦ NOTIFIKACE ============================================================ */ .siteheader{position:relative;z-index:200} .zvon{position:relative;flex:0 0 auto} .zvontl{position:relative;width:36px;height:36px;border:none;background:transparent;cursor:pointer; font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center; color:var(--charcoal);border-radius:50%;transition:transform .15s ease} .zvontl .zbadge{position:absolute;top:2px;right:2px;min-width:11px;height:11px;padding:0 3px; border-radius:999px;background:var(--neon);color:#fff;font-size:7px;font-weight:900;line-height:11px; text-align:center;box-shadow:0 1px 4px rgba(229,30,158,0.4)} .zvonmenu{position:absolute;top:calc(100% + 12px);right:-8px;width:360px;max-width:calc(100vw - 32px); background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px; box-shadow:0 18px 46px rgba(0,0,0,0.18);display:none;z-index:300} .zvonmenu.open{display:block} /* Křížek v pravém horním rohu panelu. Bez něj se panel na telefonu nedal zavřít. */ .zhlav .zzavri{border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:20px; line-height:1;color:#8A8A8A;padding:0;margin:-4px -4px -4px 0;min-width:34px;min-height:34px; display:flex;align-items:center;justify-content:center;border-radius:50%;flex:0 0 auto} @media(hover:hover){.zhlav .zzavri:hover{color:#2A2A2A;background:rgba(42,42,42,0.06)}} .zhlav .zzavri:focus-visible{outline:2px solid #FF3DB4;outline-offset:1px} .zhlav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px; font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:0.06em;color:var(--charcoal)} .zvse{border:none;background:transparent;color:var(--charcoal);font-family:inherit;font-weight:800; font-size:11px;cursor:pointer;text-transform:none;letter-spacing:0;padding:0} .zvse:hover{text-decoration:underline} .zseznam{max-height:420px;overflow-y:auto} /* Každá notifikace je samostatná bublinka, oddělená bílou mezerou. Nepřečtená má jemňoučké světle žluté pozadí, přečtená je bílá. Žádná růžová. */ .zpol{display:flex;gap:10px;padding:11px 12px;border-radius:11px;color:var(--charcoal);align-items:flex-start;position:relative; margin-bottom:9px;border:1px solid #DDD8D1;box-shadow:0 1px 3px rgba(42,42,42,0.05);background:#fff} .zpol:last-child{margin-bottom:0} .zpol:hover{background:#FFFEF3} .zpol.nove{background:#FFFEF6;border-color:#E8DCA9} .zpol.nove:hover{background:#FFFCE9} /* nepřečteno: malá zlatá hvězdička v pravém horním rohu (jako FB modrá tečka, jen v brandu) */ .znove-hv{position:absolute;top:9px;right:11px;color:#F2B600;font-size:12px;line-height:1;pointer-events:none} .zpol.nove .ztx b{padding-right:16px} .zik{flex:0 0 auto;font-size:16px;line-height:1.35;width:20px;text-align:center} /* avatar ženy v komunitní notifikaci (místo ikonky), fallback iniciály; časem fotka */ .zava{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--charcoal);color:#fff; display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;overflow:hidden} .zava img{width:100%;height:100%;object-fit:cover} .ztx{display:block;min-width:0;flex:1;text-decoration:none;color:inherit} .ztx b{display:block;font-size:13.5px;font-weight:800;margin-bottom:2px;line-height:1.35} .ztx span{display:block;font-size:12.5px;color:var(--grey);line-height:1.55} /* Výzva k akci uvnitř těla notifikace. Není to tlačítko ani nový řádek. Je to jen růžové pokračování věty, stejná velikost i tloušťka jako tělo, se šipkou. Selektor .ztx .zcta musí být silnější než .ztx span, jinak by ho přebila šedá. */ .ztx .zcta{color:var(--neon);font-weight:inherit;font-size:inherit;font-style:normal;white-space:nowrap} .zakce{display:flex;gap:2px;flex:0 0 auto;opacity:0;transition:opacity .15s ease} .zpol:hover .zakce{opacity:1} .zbtn{width:26px;height:26px;border:none;background:transparent;border-radius:7px;cursor:pointer; color:var(--grey);font-size:14px;font-weight:800;font-family:inherit;line-height:1; display:flex;align-items:center;justify-content:center} .zbtn:hover{background:var(--neon-y);color:var(--charcoal);box-shadow:0 2px 6px rgba(0,0,0,.1)} .zakce-h{display:flex;gap:10px} @media(hover:none){.zakce{opacity:1}} .ztx .zdatum{display:block;font-size:11px;color:#A8A4A0;font-weight:600;margin-top:5px} .zprazdno{padding:26px 14px;text-align:center;font-size:13px;color:var(--grey)} @media(max-width:860px){ .zvonmenu{position:fixed;top:auto;left:12px;right:12px;width:auto;max-width:none; margin-top:10px;max-height:70vh} .zseznam{max-height:calc(70vh - 60px)} } /* poznámka pod popupem, když čeká další ve frontě */ .modal .m-fronta{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line); font-size:12.5px;color:var(--grey);line-height:1.6} /* ============================================================ ŽLUTÝ PÁS S NOVINKOU (na deštníku) Vykřížkovat se nedá. Zmizí sám, až si produkt koupí. ============================================================ */ .novlista{display:flex;align-items:center;justify-content:center;gap:8px; background:var(--neon-y);color:var(--charcoal);text-decoration:none; padding:11px 16px;font-size:14px;font-weight:800;line-height:1.5;text-align:center; border-bottom:1px solid rgba(42,42,42,0.08)} .novlista .stitek{text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:900;white-space:nowrap} @media(max-width:520px){ .novlista{padding:10px 14px;font-size:13px;gap:6px} .novlista .stitek{font-size:10px} } .novlista .nazev{font-weight:900} .novlista .sip{transition:transform .16s ease;display:inline-block;font-weight:900} .novlista:hover{background:#E4F200} /* POZDRAV V ČLENSKÉ SEKCI 17. 8. 2026: tužka u oslovení (.tuzka), její vyvažovací mezera (.tuz-vyv) i celé přepisovací políčko (.osl) jsou pryč. Oslovení se mění na jednom místě, v Mém účtu. Pozdrav je teď obyčejný nadpis „Ahoj Markéto", takže se na mobilu láme přirozeně a nic ho neodsouvá doprava. */ /* ============================================================ MOJE ÚSPĚCHY ✦ ODZNAKY ============================================================ */ .ogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:980px){.ogrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.ogrid{grid-template-columns:1fr}} .ocard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 20px;text-align:center; position:relative;overflow:hidden} .ocard .oik{font-size:34px;line-height:1;margin-bottom:14px;color:var(--neon)} .ocard h3{font-weight:900;font-size:17px;letter-spacing:-0.3px;margin-bottom:6px} .ocard p{font-size:13px;color:var(--grey);line-height:1.6;margin-bottom:16px;min-height:42px} .ocard.zamcena{background:#F7F5F3;border-style:dashed} .ocard.zamcena .oik,.ocard.zamcena h3{color:#B9B4B0} .ocard.zamcena p{color:#B9B4B0} .opruh{position:absolute;top:14px;right:-32px;transform:rotate(38deg);background:var(--neon);color:#fff; font-size:10px;font-weight:900;letter-spacing:0.06em;text-transform:uppercase;padding:4px 36px} .oprogres{height:6px;border-radius:999px;background:rgba(42,42,42,0.08);overflow:hidden;margin-bottom:8px} .oprogres i{display:block;height:100%;background:var(--neon);border-radius:999px} .ozbyva{font-size:11.5px;color:var(--grey);font-weight:700} /* ---------- CERTIFIKÁT ---------- Ležatá A5 (210:148), náš žlutorůžový gradient, vsazený neonově růžový rámeček. */ .cert-body{padding:14px 14px 18px} /* Certifikát dostane víc místa, ať do A5 sednou i velká písmena. */ .overlay .modal:has(.cert-a5){max-width:780px} /* Velké ocenění v okně má stejnou šířku jako zdroj náhledu (700px), ať jsou velké ocenění, náhled v mřížce i stažený soubor proporčně úplně identické. */ .cert-body .cert-a5{width:700px;max-width:100%;margin:0 auto} /* Vnějšek jako papír A5, ostré rohy (papír je nemá). Uvnitř růžový rámeček zaoblený. text-size-adjust je tu nutnost, ne kosmetika: Safari na iPhonu si sám zvětšuje písmo v úzkých blocích, text uvnitř certifikátu se tím roztáhl, přerostl poměr A5 a spodek certifikátu se v okně uřízl. Tohle mu to zvětšování zakáže, takže certifikát vypadá na telefonu úplně stejně jako na počítači. */ .cert-a5{aspect-ratio:210 / 148;background:linear-gradient(125deg,#FFF8CB 0%,#FFE1F0 100%); border-radius:0;padding:24px;box-shadow:0 10px 34px rgba(255,61,180,0.16); -webkit-text-size-adjust:100%;text-size-adjust:100%} /* Hranatý neonový rámeček. Logo sedí na horní čáře, hvězda na spodní, čára je za nimi přerušená. */ .cert-frame{position:relative;height:100%;border:2px solid var(--neon);border-top:none;border-radius:0;display:flex;flex-direction:column; padding:30px 34px 30px;text-align:center} /* Horní linka je rozdělená na dva úseky (.cara) s mezerou, do které padne logo BEZ pozadí. Růžová linka se tak u loga skutečně utne, žádný žlutý blok. */ .cert-topline{position:absolute;top:0;left:-2px;right:-2px;transform:translateY(-50%);z-index:2;display:flex;align-items:center;gap:10px} .cert-topline .cara{flex:1;height:2px;background:var(--neon)} .cert-logo{background:transparent;padding:0 3px;white-space:nowrap; font-weight:900;font-size:16px;line-height:1;color:var(--charcoal);letter-spacing:-0.03em} .cert-logo .u{position:relative;display:inline-block} .cert-logo .u .star{position:absolute;top:0.16em;left:50%;transform:translateX(-50%);width:0.31em;height:0.31em;line-height:0;color:var(--neon)} .cert-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0} .cert-title{font-weight:900;font-size:42px;text-transform:uppercase;letter-spacing:0.02em;color:var(--charcoal);margin:0 0 34px;line-height:1.06} .cert-line{font-size:14px;color:#7A756E;margin:6px 0} .cert-name{font-weight:700;font-size:28px;color:var(--charcoal);letter-spacing:-0.4px;margin:9px 0;line-height:1.1} .cert-achiev{font-weight:900;font-size:31px;text-transform:uppercase;letter-spacing:0.02em;color:var(--neon);margin:8px 0 2px;line-height:1.12;text-wrap:balance;max-width:88%;margin-left:auto;margin-right:auto} /* Dlouhý název se sám zmenší, ať není obří a zůstane hezky zarovnaný. */ .cert-achiev.a-s{font-size:25px} .cert-achiev.a-xs{font-size:21px} /* Podpis a datum sedí každý na středu své poloviny, mezi rámečkem a hvězdou. */ .cert-foot{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:12px;width:100%;padding-top:6px} .cert-col{min-width:0;text-align:center} .cert-sigline{width:150px;max-width:70%;height:1px;background:rgba(42,42,42,0.22);margin:5px auto} .cert-val{font-weight:800;font-size:12.5px;color:var(--charcoal);line-height:1.2} .cert-podpis{font-size:13.5px;letter-spacing:-0.2px} .cert-cap{font-size:9.5px;text-transform:uppercase;letter-spacing:0.05em;color:#6E6A63;margin-top:2px} /* Hvězda sedí přímo na spodní čáře, bez kolečka. Je růžová jako rámeček, takže se s ním její levý a pravý cíp slijí a čára jakoby prochází skrz. */ .cert-seal{position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);z-index:2;width:32px;height:32px;color:var(--neon)} .cert-akce{display:flex;gap:10px;justify-content:center;margin:18px 0 0} .cert-pozn{font-size:12px;color:var(--grey);line-height:1.55;margin:14px 0 0;text-align:center} /* MOBIL: certifikát se NEPŘEKRESLUJE menšími písmy, protože pak vypadal zcvrkle a jinak než na počítači. Místo toho se celý poměrně zmenší, přesně jako zmenšenina v kartě. Vnitřek tedy zůstává vždycky stejný, 700 px široký, a mění se jen měřítko. Měřítko dopočítá certSkaluj() v oceneni/index.html podle toho, kolik je zrovna místa. */ .cert-obal{width:100%;overflow:hidden;margin:0 auto} .cert-obal .cert-a5{width:700px;max-width:none;transform-origin:top left;margin:0} @media(max-width:640px){ /* Okno s certifikátem ať na mobilu využije celou šířku, ať je certifikát co největší. Čím víc místa mu dáme, tím míň se musí zmenšit, aby se vešel celý. Musí to být .modal .m-body.cert-body, protože o kus níž je obecné .modal .m-body{padding:24px 18px}, které je silnější než samotné .cert-body. Přesně o tenhle souboj certifikát dřív přicházel o 24 px šířky. Nahoře necháváme místo na křížek, ať neleží na certifikátu. */ .modal .m-body.cert-body{padding:44px 6px 14px} .overlay:has(.cert-a5){padding:16px 6px} .overlay .modal:has(.cert-a5){max-width:100%} } /* ---------- SBÍRKA CERTIFIKÁTŮ (náhledy) ---------- */ /* minmax(0,300px) místo pevných 300px, aby na úzkém telefonu karta nepřetekla přes okraj bílé bubliny. Na 300 px a víc se nic nemění, pod tím se karta zúží. */ .certgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(0,300px));gap:26px;justify-content:center} @media(max-width:400px){ .certgrid{grid-template-columns:1fr;gap:18px} } /* Karta jako produktová karta na deštníku: vizuál nahoře od kraje ke kraji, tělo s textem pod ním. overflow:hidden zaoblí horní rohy vizuálu podle rámečku karty. */ /* Odemčený certifikát už má svůj růžový okraj, tak kartě žádný obrys nedáváme, ať se rámečky nebijí. Kartu drží jen jemný stín, najetí ji nadzvedne s růžovým stínem. Co žena má = barevný certifikát, zamčené = šedivé v šedém rámečku jako nekoupené produkty. */ .certcard{background:#F1EDE6;border:none;border-radius:16px;overflow:hidden;cursor:pointer; text-decoration:none;color:var(--charcoal);display:block; box-shadow:0 4px 18px rgba(42,42,42,0.07);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease} .certcard.locked{border:1px solid var(--line);background:#FBFAF9;box-shadow:none;cursor:default} /* Zamčený produkt je odkaz na prodejku (klikací celý), zamčený PAIA certifikát je jen div s poznámkou. */ a.certcard.locked{cursor:pointer} /* Náhled = KOMPLETNÍ certifikát v plné velikosti (700px), stažený jako celek transformem, vyplní horní část karty. Hodnoty níž jsou výchozí pro kartu širokou 300 px. Když je karta na úzkém telefonu užší, certSkaluj() měřítko i výšku dopočítá znovu. */ .cmini{width:100%;height:211px;overflow:hidden} .cmini .cert-a5{width:700px;max-width:none;transform:scale(0.42857);transform-origin:top left;box-shadow:none} /* Zamčený vizuál = reálný certifikát v šedivém provedení, s visačkou zámku v rohu. */ .cmini.cmini-zamek{position:relative} .cmini.cmini-zamek .cert-a5{filter:grayscale(1) opacity(0.55)} .cert-lockbadge{position:absolute;top:14px;left:14px;width:34px;height:34px;border-radius:50%;z-index:2; background:rgba(255,255,255,0.94);display:flex;align-items:center;justify-content:center; font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,0.12)} /* Sdílecí okno certifikátu, stejné jako na blogu */ .sharepop{position:fixed;inset:0;background:rgba(42,42,42,0.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:1200;padding:20px} .sharepop.open{display:flex} .sharecard{background:#fff;border-radius:16px;padding:22px 24px 24px;width:100%;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,0.25)} .sharehead{display:flex;align-items:center;justify-content:space-between;font-weight:900;font-size:18px;margin-bottom:16px;color:var(--charcoal)} .sharex{background:none;border:none;font-size:26px;line-height:1;color:#999;cursor:pointer;font-family:inherit} .shareopts{display:flex;flex-direction:column;gap:10px} .shareopt{display:flex;align-items:center;gap:12px;padding:11px 15px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;border:1.5px solid rgba(42,42,42,0.12);color:var(--charcoal);background:#fff;cursor:pointer;font-family:inherit;transition:background .15s;text-align:left;width:100%} .shareopt:hover{background:#FFF7D6} .shareopt .ic{width:26px;height:26px;flex:0 0 auto;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:13px} /* Tělo karty s textem a tlačítkem. */ .certcard-body{padding:16px 18px 18px;text-align:center} .certcard-lbl{font-weight:800;font-size:15px;color:var(--charcoal);margin:0 0 12px;line-height:1.3;text-wrap:balance} .certcard-body .btn{width:100%} /* Text tlačítka Chci více info je růžový, ať nesplývá s pozadím (jako na Moje produkty). */ .certcard-body .btn-ghost{color:var(--neon);border-color:rgba(255,61,180,0.35)} .certcard-body .btn-ghost:hover{color:var(--neon);border-color:var(--neon)} /* Mini checkout v návratovém popupu (předvyplněné údaje + povinné právní kroky). */ .co-udaje{background:var(--pink-l);border-radius:10px;padding:10px 14px;margin:2px 0 14px} .co-udaje b{display:block;font-weight:800;font-size:15px} .co-udaje span{font-size:13px;color:var(--grey)} .co-cena{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px} .co-radek{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;gap:12px} .co-radek b{font-weight:800;white-space:nowrap} .co-pozn{font-size:12px;color:var(--grey);margin-top:6px;line-height:1.5} .co-volba{display:flex;flex-direction:column;gap:8px;margin-bottom:12px} .co-opt{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;cursor:pointer} .co-opt:hover{border-color:rgba(255,61,180,0.4)} .co-opt input{margin-top:3px;flex:0 0 auto} .co-souhlas{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;margin-bottom:16px;cursor:pointer} .co-souhlas input{margin-top:2px;flex:0 0 auto} .co-souhlas a{color:var(--neon);text-decoration:underline} .co-body .btn{width:100%} .co-body .btn[disabled]{opacity:0.45;cursor:not-allowed} /* Nadpis sbírky s počítadlem ocenění vedle sebe. */ .cert-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px} .cert-head h2{margin:0} .cert-pocet{background:var(--pink-l);color:var(--neon);font-weight:800;font-size:13px; padding:6px 14px;border-radius:999px;white-space:nowrap} /* Filtr jako rozbalovací seznam, oddělovací čára a poznámka u zamčených */ /* Volby ve filtru jsou dlouhé („Ocenění, která nemám"), takže na úzkém telefonu rozbalovátko sjede pod popisek, místo aby vylezlo z bubliny ven. */ .cert-filtr{display:flex;align-items:center;gap:10px;margin:0 0 24px;flex-wrap:wrap} .cert-filtr select{max-width:100%} .cert-filtr label{font-size:13px;font-weight:800;color:var(--charcoal)} .cert-filtr select{font-family:inherit;font-weight:700;font-size:13.5px;color:var(--charcoal); border:1.5px solid var(--line);border-radius:10px;padding:9px 36px 9px 14px;background-color:#fff;cursor:pointer;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232A2A2A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center} .cert-filtr select:focus{outline:none;border-color:var(--neon)} .cert-demarcace{display:flex;align-items:center;gap:14px;margin:36px 0 24px;font-size:12px;font-weight:800; text-transform:uppercase;letter-spacing:0.06em;color:var(--grey)} .cert-demarcace::before,.cert-demarcace::after{content:'';flex:1;height:1px;background:var(--line)} .certcard-note{font-size:12.5px;color:var(--grey);font-weight:700} /* nečlenka bez PAIA, výzva místo osy */ .nopaia{background:var(--neon-y);border-radius:16px;padding:22px 24px;font-size:15px;line-height:1.6;font-weight:700} .nopaia a{color:var(--charcoal);text-decoration:underline;text-underline-offset:3px;font-weight:900} /* Tlačítko, co vypadá jako odkaz (spouští popup, ne navigaci). */ .nopaia .lnk{background:none;border:none;padding:0;font:inherit;color:var(--charcoal);text-decoration:underline;text-underline-offset:3px;font-weight:900;cursor:pointer} /* ---------- ČASOVÁ OSA ODZNAKŮ ---------- Na desktopu vodorovná, na mobilu svislá. Pozici kolečka drží proměnná --p, naplnění čáry proměnná --f, takže stejný kód umí obě orientace. */ .timeline{margin:34px 0 6px;padding:6px 0 44px} .tl-track{position:relative;height:6px;background:rgba(42,42,42,0.10);border-radius:999px;margin:0 34px} .tl-fill{position:absolute;left:0;top:0;height:100%;width:var(--f);border-radius:999px;transition:width .5s ease,height .5s ease; background:linear-gradient(90deg,var(--neon-y) 0%,#FF7AB8 62%,var(--neon) 100%)} .tl-dot{position:absolute;left:var(--p);top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%; border:3px solid #fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px; transition:transform .14s ease;box-shadow:0 3px 12px rgba(0,0,0,0.16);padding:0} /* Všechna odemčená kolečka jsou svítivě žlutá s rostoucím emoji. Charcoal prstenec je UVNITŘ, hned kolem žluté, a bílý prstenec je až zvenku. */ .tl-dot.on{background:var(--neon-y);color:var(--charcoal); box-shadow:inset 0 0 0 1px var(--charcoal),0 3px 12px rgba(0,0,0,0.16)} .tl-dot.off{background:#E4E1DB;color:#9A968F} .tl-dot .tl-lbl{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);white-space:nowrap; font-size:11.5px;font-weight:800;color:var(--grey)} .tl-dot.on .tl-lbl{color:var(--charcoal)} @media(max-width:640px){ .timeline{padding:6px 0 6px} /* Osa nestojí úplně vlevo ani na středu, ale ve druhé pětině obrazovky, ať mají popisky vpravo dost místa. */ .tl-track{height:360px;width:6px;margin:14px auto 14px 30%} .tl-fill{width:100%;height:var(--f);top:0;left:0;background:linear-gradient(180deg,var(--neon-y) 0%,#FF7AB8 62%,var(--neon) 100%)} .tl-dot{left:50%;top:var(--p)} .tl-dot .tl-lbl{top:50%;left:calc(100% + 16px);transform:translateY(-50%);font-size:12px} } /* ============================================================ ÚPLNĚ MALÉ TELEFONY (do 360 px) iPhone SE, staré Androidy, ženy s malým displejem. Tady se láme všechno, co je jinde v pohodě. ============================================================ */ @media(max-width:360px){ .wrap{padding:0 14px} section.block{padding:24px 18px;margin:16px 14px;border-radius:14px} .note{padding:16px 16px} .uvitani h1{font-size:26px} .uvitani p.lead{font-size:15px} .headbar{padding:7px 7px 7px 12px} .headbar .logo{font-size:15px} .novlista{padding:9px 10px;font-size:12px} .novlista .stitek{font-size:9.5px} .modal{border-radius:14px} .modal .m-body{padding:24px 18px} .btn{padding:13px 22px;font-size:15px;width:100%;text-align:center} .btn-sm{width:auto} .conn-key{flex-direction:column;align-items:stretch;gap:8px} } /* Pojistka proti vodorovnému scrollování na jakémkoliv displeji. Když něco přeteče, radši se to schová, než aby se rozjel celý web do strany. */ body{max-width:100%;overflow-x:clip} /* OPRAVA 19. 8. 2026 (noční audit): overflow-x:clip neumí starší Safari, tohle je druhá pojistka. Hodnota z kořene se propíše na okno, takže lepivé menu (position:sticky) funguje dál. */ html{overflow-x:hidden} img,table,pre{max-width:100%} /* Nic v bublinách nikdy nepřeteče do stran: dlouhá slova, odkazy, emaily nebo IČO se zalomí, ať je telefon jakkoliv úzký. Platí globálně pro všechny bubliny a jejich obsah. OPRAVA 19. 8. 2026 (noční audit): přidáno .mnav-who, dlouhý email v burger menu na 320px přetékal. */ section.block,.note,.zaznam,.field,.kdo,.modal .m-body,.co-body,.doklady,.mnav-who{overflow-wrap:break-word} .tbl td{overflow-wrap:break-word;word-break:break-word} /* ============================================================ ZÁMEK POZADÍ PŘI OTEVŘENÉM POPUPU Scrolluje , ne . Proto se musí zamknout obojí, jinak se stránka pod popupem pořád posouvá. ============================================================ */ html.zamceno{overflow:hidden !important} body.zamceno{position:fixed;left:0;right:0;width:100%;overflow:hidden !important} /* ============================================================ HLAVA POPUPU S NOVINKOU Vizuál produktu nahoře, žlutá bublinka "✦ Novinka" v levém horním rohu. Křížek modalu je vpravo nahoře, proto je bublinka vlevo. ============================================================ */ .m-hero.produkt{position:relative;height:220px;overflow:hidden;border-radius:16px 16px 0 0; background:linear-gradient(135deg,#FFFBCC,#FFD6F0);display:flex;align-items:center;justify-content:center;padding:0} .m-hero.produkt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .m-hero.produkt .hvezda{font-size:64px;color:var(--neon);opacity:.85;line-height:1} .m-hero.produkt .novy{position:absolute;top:16px;left:16px;z-index:2; background:var(--neon-y);color:var(--charcoal);border-radius:999px;padding:7px 14px; font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:0.06em; box-shadow:0 4px 14px rgba(42,42,42,0.18)} @media(max-width:640px){.m-hero.produkt{height:170px}} /* POVINNÁ POLE ✦ jednotné pravidlo pro celý web. Povinné pole má u popisku růžovou hvězdičku. Nepovinné nemá NIC, žádné „nepovinné" nálepky. Míň textu, jasnější formulář. */ .field label .hv{color:var(--neon);font-weight:900;margin-left:1px} .field label .pozn{font-weight:600;text-transform:none;letter-spacing:0; color:var(--grey);margin-left:6px;font-size:10px} /* ---------- KOTVA Z ODKAZU ---------- Jemné růžové orámování prvku, na který doscrolluje odkaz z notifikace nebo emailu. Přesně jako zvýraznění příspěvku v komunitě: tenký 1px neon + měkký stín, žádný tučný rám. Rámeček je box-shadow, respektuje zaoblení prvku a nic neposouvá. Měkce najede přes transition. */ .zvyraznit-kotva{box-shadow:0 0 0 1px var(--neon), 0 6px 16px rgba(255,61,180,0.12) !important; transition:box-shadow .25s ease} /* ============================================================ MOBILNÍ AUDIT ✦ SDÍLENÁ PRAVIDLA PRO TELEFONY Měřeno skutečným prohlížečem na 360, 390, 414 a 768 px. Blok stojí schválně ÚPLNĚ DOLE, aby přebil pravidla nad sebou. Nic z toho nemění vzhled na počítači. ============================================================ */ /* ---------- PÍSMO V POLÍCH MÁ NA TELEFONU 16 PX ---------- Safari na iPhonu si při kliknutí do pole s písmem menším než 16 px přiblíží CELOU stránku a zpátky ji už nikdy nezmenší. Žena pak dopisuje fakturační adresu na rozjeté stránce, kterou musí posouvat do stran, a netuší proč. Proto mají na telefonu všechna pole 16 px. !important tu MUSÍ být: produkt.css i stránky s vlastním