/* =========================================================================== vlasimo-parts.css — GENEROVANÝ SOUBOR, needitovat. Vzniká z assets/css/parts/*.css přes tools/build-parts-css.py, které pouští deploy.sh. Uprav zdrojovou komponentu a nasaď; ruční změna tady se při dalším nasazení ztratí. Komponent: 27 =========================================================================== */ /* ==== account.css ======================================================= */ /* =========================================================================== Karty účtu — parts/account-*.php (osm partů, jedna komponenta). Kreslí je `woocommerce/myaccount/my-account.php` na dvou místech: nástěnka /muj-ucet/ a stránka Extra body /muj-ucet/vernostni-body/. Proto sdílený soubor v `assets/css/parts/`, ne `pages/ucet.css` — a proto se musí zapnout výčtem v `inc/assets.php` (VLASIMO_PART_CSS = 'account'). Načítá se za vlasimo-base.css i vlasimo-ui.css, takže tabletová (769–1024) a mobilní (≤768) pravidla těchhle karet, přesunutá sem z vlasimo-base.css, nepotřebují `!important` — vyhrávají pořadím. POZOR na ověřování: sedm z osmi partů má nahoře `return` na podmínku, kterou dev instalace nesplňuje (0 bodů, zásoba nedochází, výzva k recenzi je pro jinou skupinu). Ve snímcích `tools/css-snap/base/ucet@*.json` proto vůbec nejsou a `css-diff.js` je neuhlídá — hodnoty tady nejsou opsané z kaskády, ale změřené na lokální replice (party vykreslené mimo WP a vložené do živé /muj-ucet/ v Chromiu, computed styly před/po ve třech šířkách). Migrace: tools/migrate/24-account-parts.py =========================================================================== */ /* --- Sdílené atomy --------------------------------------------------------- Stejná deklarace ve dvou a víc partech = jedna třída. Modifikátor jen tam, kde se liší pouze barva nebo podklad. */ /* Textový sloupec mezi ikonou a tlačítkem (zásoba, obě výzvy, zpětná vazba). */ .vl-acct-body { flex: 1; min-width: 0; } /* Řádek „proč jste nespokojeni" má vedle sebe ještě chipy, takže potřebuje větší minimum, aby se text nezalomil po dvou znacích. */ .vl-acct-body--wide { min-width: 220px; } /* Řádek karty zpětné vazby (ikona | text | tlačítka). */ .vl-acct-row { display: flex; align-items: center; gap: 18px; } .vl-acct-row--wrap { flex-wrap: wrap; } /* Kolečko ikony 46 px. Varianta `--solid` schválně NEMÁ rámeček. */ .vl-acct-ico { width: 46px; height: 46px; min-width: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .vl-acct-ico--green { background: #e4eee6; border: 1px solid #c6dbcb; } .vl-acct-ico--amber { background: #fdf3c8; border: 1px solid #eddfa0; } .vl-acct-ico--solid { background: #0d8f46; } /* Verzálkový nadtitulek karty. */ .vl-acct-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #0b7c3d; } .vl-acct-kicker--amber { color: #8a6a00; } /* Nadpis a popisek uvnitř karty. `--mt` je odsazení pod nadtitulkem, `--lh` prokládání delšího odstavce (obě výzvy). */ .vl-acct-h { font-size: 16px; font-weight: 600; color: #16211c; } .vl-acct-h--mt { margin-top: 3px; } .vl-acct-p { font-size: 13.5px; color: #5d6b62; margin-top: 3px; } .vl-acct-p--lh { line-height: 1.55; } /* Nadpis celé karty (Jak získat body, Historie bodů). */ .vl-acct-ctitle { font-size: 17px; font-weight: 600; color: #16211c; } /* Ikona uvnitř tlačítka — bez `display:block` sedí na účaří a knoflík roste. */ .vl-acct-blk { display: block; } /* Sloupec tlačítko + „Skrýt" vpravo v obou výzvách. */ .vl-acct-acts { display: flex; flex-direction: column; align-items: stretch; gap: 7px; flex: none; } .vl-acct-hide { height: 28px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 500; color: #8a887f; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* Obrysové zelené tlačítko (Poslat fotku, Napsat recenzi v poděkování). `.vl a { color:#16211c }` (0,1,1) je specifičtější než holá třída a `.vl a:hover { color:#0b7c3d }` dřív prohrával s inline stylem — proto obojí explicitně. `--center` je varianta se `justify-content`. */ .vl-acct-obtn { height: 46px; padding: 0 22px; border: 1.5px solid #0d8f46; color: #0b7c3d; display: flex; align-items: center; font-size: 14px; font-weight: 600; border-radius: 11px; white-space: nowrap; } .vl a.vl-acct-obtn, .vl a.vl-acct-obtn:hover { color: #0b7c3d; } .vl-acct-obtn--center { justify-content: center; } /* Karta výzvy (recenze / fotka před). Liší se jen rám a podklad. */ .vl-acct-cta { border: 1px solid #e3e0d4; background: #ffffff; border-radius: 18px; padding: 20px 26px; display: flex; align-items: center; gap: 18px; } .vl-acct-cta--warn { border-color: #eddfa0; background: #fffdf2; } /* --- Hero Extra bodů (parts/account-points-hero.php) ----------------------- */ .vl-acct-phero { background: #1f4d3a; border-radius: 20px; padding: 26px 30px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .vl-acct-phero__label { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #a9bdb0; } .vl-acct-phero__row { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; flex-wrap: wrap; } .vl-acct-phero__num { font-size: 38px; font-weight: 600; color: #ffffff; line-height: 1; } .vl-acct-phero__eq { font-size: 17px; font-weight: 600; color: #ffd21f; } /* Bez bodů je místo čísla motivační titulek (menší) a žlutý přepočet bodu. */ .vl-acct-phero__title { font-size: 26px; font-weight: 600; color: #ffffff; line-height: 1.15; } .vl-acct-phero__sub { font-size: 15px; font-weight: 600; color: #ffd21f; } .vl-acct-phero__note { font-size: 13px; color: #a9bdb0; margin-top: 10px; line-height: 1.55; } .vl-acct-phero__acts { display: flex; flex-direction: column; gap: 9px; flex: none; } .vl-acct-phero__btn { height: 48px; padding: 0 26px; background: #0d8f46; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 600; border-radius: 11px; box-shadow: 0 3px 0 #075c2e; cursor: pointer; text-decoration: none; white-space: nowrap; } .vl a.vl-acct-phero__btn, .vl a.vl-acct-phero__btn:hover { color: #ffffff; } .vl-acct-phero__ghost { height: 44px; padding: 0 26px; border: 1.5px solid #3f6b55; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 500; border-radius: 11px; cursor: pointer; text-decoration: none; white-space: nowrap; } .vl a.vl-acct-phero__ghost, .vl a.vl-acct-phero__ghost:hover { color: #ffffff; } /* --- Karta „Dochází vám zásoba" (parts/account-restock.php) ---------------- Vlastní markup, ne herbasí `.h-acct-restock` — ten má v vlasimo.css svoje třídy a tenhle part je nepoužívá. */ .vl-acct-restock { border: 1px solid #e3e0d4; background: #ffffff; border-radius: 18px; padding: 20px 24px; display: flex; align-items: center; gap: 18px; } .vl-acct-restock__img { width: 64px; height: 64px; min-width: 64px; border-radius: 12px; border: 1px solid #e3e0d4; background: #f2f1e9; display: flex; align-items: center; justify-content: center; } /* `img { max-width:100% }` z vlasimo.css je jen (0,0,0,1), třída ho přebije. */ .vl-acct-restock__pic { max-width: 88%; max-height: 88%; object-fit: contain; } .vl-acct-restock__label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8a6a00; } .vl-acct-restock__title { font-size: 15.5px; font-weight: 600; color: #16211c; margin-top: 3px; } .vl-acct-restock__note { font-size: 13px; color: #5d6b62; margin-top: 3px; } .vl-acct-restock__btn { height: 48px; padding: 0 22px; background: #0d8f46; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; border-radius: 11px; box-shadow: 0 3px 0 #075c2e; cursor: pointer; white-space: nowrap; text-decoration: none; } .vl a.vl-acct-restock__btn, .vl a.vl-acct-restock__btn:hover { color: #ffffff; } /* --- Karta „Jak získat body" (parts/account-earn.php) ---------------------- */ .vl-acct-earn { border: 1px solid #e3e0d4; background: #ffffff; border-radius: 18px; padding: 22px 26px; scroll-margin-top: 20px; } .vl-acct-earn__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .vl-acct-earn__sub { font-size: 12.5px; color: #8a887f; } .vl-acct-earn__list { display: flex; flex-direction: column; margin-top: 6px; } .vl-acct-earn__row { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-top: 1px solid #f0ede1; } .vl-acct-earn__pts { background: #fdf3c8; border: 1px solid #eddfa0; color: #8a6a00; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap; flex: none; } .vl-acct-earn__body { min-width: 0; } .vl-acct-earn__name { font-size: 14.5px; font-weight: 600; color: #16211c; } .vl-acct-earn__desc { font-size: 13px; color: #5d6b62; margin-top: 2px; line-height: 1.55; } /* Úkol Google — zmenšený `.vl-cta`. Barvu drží `.vl-cta` s !important, takže tady jde jen o rozměry; musí ale stát AŽ ZA base.css (stejná specificita, rozhoduje pořadí souborů). */ .vl-acct-earn__btn { margin-left: auto; align-self: center; height: 40px; padding: 0 16px; font-size: 13.5px; } .vl-acct-earn__note { font-size: 12.5px; color: #8a887f; margin-top: 10px; padding-top: 12px; border-top: 1px solid #f0ede1; } /* --- Karta „Doporučte nás" (parts/account-referral.php) -------------------- */ .vl-acct-ref { border: 1.5px dashed #8fbf9d; background: #f4faf6; border-radius: 18px; padding: 22px 26px; } .vl-acct-ref__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .vl-acct-ref__badge { background: #0d8f46; color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: .08em; border-radius: 6px; padding: 4px 10px; } .vl-acct-ref__title { font-size: 16.5px; font-weight: 600; color: #16211c; } .vl-acct-ref__text { font-size: 14px; color: #3d443e; margin-top: 8px; line-height: 1.6; } /* Zvýrazněný počet bodů uvnitř přeložené věty — třída je součástí msgid (viz tools/i18n/sk.py), po změně jména se musí přegenerovat katalog. */ .vl-acct-ref__hl { font-weight: 600; color: #0b7c3d; } .vl-acct-ref__row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; } .vl-acct-ref__link { background: #ffffff; border: 1.5px dashed #8fbf9d; border-radius: 10px; padding: 11px 18px; font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; font-weight: 700; color: #0b7c3d; } .vl-acct-ref__copy { height: 44px; padding: 0 20px; background: #16211c; color: #ffd21f; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; border-radius: 10px; cursor: pointer; } /* --- Historie bodů (parts/account-points-log.php) -------------------------- */ .vl-acct-log { border: 1px solid #e3e0d4; background: #ffffff; border-radius: 18px; padding: 22px 26px; } .vl-acct-log__empty { font-size: 14px; color: #5d6b62; margin-top: 10px; } .vl-acct-log__list { margin-top: 12px; border-top: 1px solid #f0ede1; } .vl-acct-log__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid #f0ede1; font-size: 14px; } .vl-acct-log__date { font-size: 13px; color: #8a887f; white-space: nowrap; } .vl-acct-log__note { color: #16211c; min-width: 0; } /* Barva podle znaménka — dřív se skládala inline v PHP. */ .vl-acct-log__amt { font-weight: 600; white-space: nowrap; color: #0b7c3d; } .vl-acct-log__amt--minus { color: #b42318; } /* --- Výzva k recenzi (parts/account-review-cta.php) ------------------------ */ .vl-acct-rcta__btn { height: 46px; padding: 0 22px; background: #0d8f46; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; border-radius: 11px; box-shadow: 0 3px 0 #075c2e; white-space: nowrap; } .vl a.vl-acct-rcta__btn, .vl a.vl-acct-rcta__btn:hover { color: #ffffff; } /* --- Rychlá zpětná vazba (parts/account-feedback.php) ---------------------- Čtyři stavy jedné karty; neaktivní mají `hidden`, které vyhrává přes `[hidden]{display:none!important}` ve vlasimo.css. */ .vl-acct-fb { border: 1px solid #e3e0d4; background: #ffffff; border-radius: 18px; padding: 20px 26px; } .vl-acct-fb__hl { font-weight: 600; color: #16211c; } .vl-acct-fb__ans { display: flex; gap: 10px; flex-wrap: nowrap; } .vl-acct-fb__yes { height: 46px; padding: 0 26px; background: #0d8f46; color: #ffffff; display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; border-radius: 11px; box-shadow: 0 3px 0 #075c2e; cursor: pointer; white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease; } .vl-acct-fb__no { height: 46px; padding: 0 26px; border: 1.5px solid #d5d2c6; color: #3d443e; display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; border-radius: 11px; cursor: pointer; white-space: nowrap; } /* Palec dolů = tentýž glyf otočený. */ .vl-acct-fb__flip { transform: rotate(180deg); } .vl-acct-fb__reasons { display: flex; gap: 8px; flex-wrap: wrap; } .vl-acct-fb__chip { height: 40px; padding: 0 16px; border: 1.5px solid #d5d2c6; background: #fdfcf8; color: #3d443e; display: flex; align-items: center; font-size: 13.5px; font-weight: 500; border-radius: 999px; cursor: pointer; white-space: nowrap; } .vl-acct-fb__ask { height: 46px; padding: 0 22px; background: #16211c; color: #ffd21f; display: flex; align-items: center; font-size: 14px; font-weight: 600; border-radius: 11px; cursor: pointer; white-space: nowrap; } /* ===== Tablet 769–1024 ===================================================== Přesun z vlasimo-base.css: číslo bodů drželi dva `[style*=]` selektory (`font-size:38px; font-weight:600` a jeho delší varianta), oba na 30 px. */ @media (min-width: 769px) and (max-width: 1024px) { .vl-acct-phero__num { font-size: 30px; } } /* ===== Mobil ≤768 ========================================================== Přesun z vlasimo-base.css. Hero bodů se rozpadá pod sebe (text vedle tlačítka se na 390 px mačkal do dvou znaků na řádek) a karta zásoby se zalamuje: text si drží základ 180 px, tlačítko jde přes celou šířku. Typografickou škálu `.vl-dcontent [style*="font-size:38px|26px"]` nese teď třída. */ @media (max-width: 768px) { .vl-acct-phero { display: block; padding: 20px; } .vl-acct-phero > * + * { margin-top: 16px; } .vl-acct-phero__num { font-size: 27px; } .vl-acct-phero__title { font-size: 20px; } .vl-acct-restock { flex-wrap: wrap; } .vl-acct-restock__btn { flex: 1 1 100%; } /* Text karty zásoby tu ZÁMĚRNĚ nedostává `flex: 1 1 180px`, i když to `.woocommerce-account .vl-dcontent [style*="padding:20px 24px; display:flex"] > [style*="flex:1; min-width:0"]` v base.css předepisuje: pravidlo nemá `!important`, takže s inline `flex:1` (= basis 0 %) vždycky prohrálo a nikdy nic nedělalo. Doplnit ho teď by kartu na 390 px přerovnalo — a to je změna vzhledu, ne migrace. Kdyby ho David chtěl, je to samostatné rozhodnutí. */ } /* ==== balicky.css ======================================================= */ /* =========================================================================== balicky.css — sekce „Balíčky" na výpisu produktů (parts/balicky.php). Kreslí se JEN při běžící kampani typu `balicky` (HM_Balicky::data()), a to uvnitř `.vl-desktop` v woocommerce/archive-product.php. Mobilní vrstva má vlastní markup (`#m-balicky` v parts/shop-mobile.php) a s tímhle souborem nemá nic společného. Načítání: `inc/assets.php` → konstanta `VLASIMO_PART_CSS`. Seznam je výslovný, ne glob — dokud v něm `balicky` není, soubor se nenačítá. Pořadí: vlasimo.css → vlasimo-legacy.css → vlasimo-base.css → vlasimo-ui.css → parts/*.css → pages/.css. Proto tady `!important` není nikde potřeba: pravidla, která hodnoty držela dřív, mířila na `[style*=…]` a po migraci nemají na čem viset. Vznik: tools/migrate/23-balicky-promo.py (28 inline stylů → třídy `.vl-bal*`). POZOR — sekce se objeví jen s kampaní, takže ji `tools/css-snap/base` nezachytil a `css-diff.js` na ni nedosáhne. Hodnoty jsou proto ověřené lokální replikou (viz hlavička migračního skriptu): stránka /objednavka/ stažená z devu, do které se vloží vyrenderovaný part před a po migraci, a porovnají se computed styly ve 1440 / 900 / 390 px. Responzivní vrstvy přepsané z vlasimo-base.css (pravidla, která tím osiří): ~1122 [style*="max-width:1440px; margin:0 auto; padding:52px 48px 56px"] ~1123 [style*="margin:0; font-size:30px; …; color:#ffffff"] a sdílená pravidla, která na sekci přestanou mířit (ta v base.css ZŮSTÁVAJÍ, používají je jiné šablony): ~996 .vl-desktop [style*="font-size:30px"] → nadpis 24 px ≤1024 ~1113 [style*="max-width:1440px; margin:0 auto"] → 1024 px na tabletu ~1120 [style*="font-size:24px; …; line-height:1"] → cena 22 px na tabletu ~1142 [style*="font-size:24px; font-weight:600; letter-spacing:-.02em"] =========================================================================== */ /* --- Rám sekce ------------------------------------------------------------- */ .vl-bal { scroll-margin-top: 64px; background: #1f4d3a; border-top: 1px solid #16382b; } .vl-bal__in { max-width: 1440px; margin: 0 auto; padding: 52px 48px 56px; } /* --- Hlavička sekce (kicker · nadpis · „platí do") ------------------------- */ .vl-bal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .vl-bal__headcol { display: flex; flex-direction: column; gap: 10px; } .vl-bal__kicker { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #ffd21f; } .vl-bal__kicker-ico { display: block; } .vl-bal__dot { width: 4px; height: 4px; border-radius: 50%; background: #c99a12; } .vl-bal__titlerow { display: flex; align-items: center; gap: 18px; } .vl-bal__title { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: #ffffff; } .vl-bal__sub { font-size: 14px; color: #a9bdb0; } /* Zvýrazněná část podtitulku („ušetříte až …"). Vzniká `strtr()` v PHP, do `wp_kses_post()` projde jako , ne jako . */ .vl-bal__sub-b { font-weight: 600; color: #ffffff; } .vl-bal__until { font-size: 13px; color: #a9bdb0; white-space: nowrap; } /* --- Mřížka karet ---------------------------------------------------------- Počet sloupců = počet karet kampaně (`_hm_bal_products`), tedy hodnota z PHP. Množina je v praxi konečná (návrh počítá se třemi, admin vypisuje ID ručně), proto modifikátor `--N` jako u `.vl-certs--N`, ne inline styl. Základ = 3 sloupce podle návrhu; drží i případný počet mimo rozsah. */ .vl-bal__grid { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .vl-bal__grid--1 { grid-template-columns: repeat(1, 1fr); } .vl-bal__grid--2 { grid-template-columns: repeat(2, 1fr); } .vl-bal__grid--3 { grid-template-columns: repeat(3, 1fr); } .vl-bal__grid--4 { grid-template-columns: repeat(4, 1fr); } .vl-bal__grid--5 { grid-template-columns: repeat(5, 1fr); } .vl-bal__grid--6 { grid-template-columns: repeat(6, 1fr); } /* --- Karta balíčku --------------------------------------------------------- */ .vl-bal-card { position: relative; background: #fdfcf8; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; } /* Zvýrazněná karta (`_hm_bal_highlight`) — žlutý obrys a stín. */ .vl-bal-card--hl { outline: 2.5px solid #ffd21f; box-shadow: 0 18px 44px rgba(0, 0, 0, .28); } .vl-bal-card__flag { background: #ffd21f; color: #16211c; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-align: center; padding: 8px 12px; } .vl-bal-card__media { position: relative; aspect-ratio: 16/10; background: #f4f2ea; display: flex; align-items: center; justify-content: center; } /* `img { max-width:100% }` z vlasimo.css je (0,0,1), třída (0,1,0) — vyhrává. */ .vl-bal-card__img { max-height: 88%; max-width: 60%; object-fit: contain; display: block; } /* Štítek úspory: na zvýrazněné kartě inverzní (žlutý obrys by se s ním pral). */ .vl-bal-card__save { position: absolute; top: 12px; right: 12px; background: #ffd21f; color: #16211c; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 11px; } .vl-bal-card--hl .vl-bal-card__save { background: #16211c; color: #ffffff; } .vl-bal-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .vl-bal-card__title { margin: 0; font-size: 17px; font-weight: 600; color: #16211c; letter-spacing: -.01em; } .vl-bal-card__desc { font-size: 13.5px; color: #5d6b62; line-height: 1.5; } .vl-bal-card__prices { display: flex; align-items: flex-end; gap: 9px; margin-top: auto; } .vl-bal-card__price { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: #16211c; line-height: 1; } .vl-bal-card__old { font-size: 13px; color: #8a887f; text-decoration: line-through; padding-bottom: 2px; } /* CTA je
, ne — `.vl a { color:#16211c }` na něj nemíří a barva se nemusí psát přes `.vl a.trida`. */ .vl-bal-card__cta { height: 48px; background: #0d8f46; color: #ffffff; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 15px; font-weight: 600; box-shadow: 0 3px 0 #075c2e; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .vl-bal-card__arrow { font-size: 15px; line-height: 1; } /* --- Poznámka pod kartami -------------------------------------------------- */ .vl-bal__note { margin-top: 18px; display: flex; align-items: center; gap: 9px; font-size: 13px; color: #a9bdb0; } .vl-bal__note-ico { color: #4ade80; flex: none; margin-top: 3px; } /* --- Tablet 769–1024 ------------------------------------------------------- Přesně to, co dřív dělala trojice `[style*=…]` pravidel z base.css: obal na 1024 px s užším odsazením, nadpis 24 px, cena 22 px. */ @media (min-width: 769px) and (max-width: 1024px) { .vl-bal__in { max-width: 1024px; padding: 52px 32px 36px; } .vl-bal-card__price { font-size: 22px; } } /* Nadpis se zmenšoval už pravidlem `.vl-desktop [style*="font-size:30px"]`, které platí do 1024 px včetně — tedy i pod 768, kde je `.vl-desktop` schované (vizuálně se to neprojeví, ale computed styl to drží). Zachováno 1:1, aby se snímek nerozešel. */ @media (max-width: 1024px) { .vl-bal__title { font-size: 24px; } } /* ==== cart-bar.css ====================================================== */ /* =========================================================================== Pevná spodní lišta košíku na mobilu (inc/cart-bar.php) — varianta A z plátna „Sticky lišta košíku na mobilu“ (David 12. 9. 2026). Jen ≤ 768 px, jen s položkou v košíku (server dává `hidden`), schovaná při otevřeném panelu (`body.vl-cart-open`) — na desktopu se nekreslí vůbec. =========================================================================== */ .vl-cartbar { display: none; } @media (max-width: 768px) { .vl-cartbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: #fdfcf8; box-shadow: 0 -6px 20px rgba(22, 33, 28, .08); padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px)); } .vl-cartbar[hidden], body.vl-cart-open .vl-cartbar { display: none; } .vl-cartbar__line { height: 3px; margin: 0 -16px; background: #dbe7de; } .vl-cartbar__fill { height: 3px; background: #0d8f46; max-width: 100%; } .vl-cartbar__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0 8px; font-size: 13px; } .vl-cartbar__cart { display: flex; align-items: center; gap: 9px; font-weight: 600; white-space: nowrap; } .vl .vl-cartbar__cart, .vl .vl-cartbar__cart:hover { color: #16211c; } /* Koš je v ikoně kreslený v dolních 2/3 rámečku (rukojeť od y 6,4/24); -1 px = tělo koše opticky na středu ceny, kolečko nad ní nepřečnívá zbytečně. */ .vl-cartbar__icon { position: relative; top: -1px; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; } .vl-cartbar__icon svg { display: block; } /* Kolečko těsně na pravém horním rohu rukojeti koše (David 12. 9.: blíž ikoně, svisle zarovnané; vybráno ze 4 posunů na snímku) — lem v barvě lišty odřízne tahy ikony. */ .vl-cartbar__badge { position: absolute; top: -2px; right: -5px; min-width: 17px; height: 17px; box-sizing: border-box; border-radius: 999px; background: #0d8f46; color: #ffffff; font-size: 10.5px; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fdfcf8; } .vl-cartbar__badge[hidden] { display: none; } .vl-cartbar__push { display: flex; align-items: center; gap: 6px; color: #0b7c3d; font-weight: 500; font-size: 12.5px; white-space: nowrap; min-width: 0; overflow: hidden; } .vl-cartbar__ico { display: flex; flex: none; } .vl-cartbar__sep { color: #8a887f; } .vl-cartbar__cta { height: 48px; box-sizing: border-box; background: #0d8f46; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; box-shadow: 0 4px 0 #075c2e; } .vl a.vl-cartbar__cta, .vl a.vl-cartbar__cta:hover { color: #ffffff; } /* Obsah stránky nesmí zůstat pod lištou — třídu přepíná JS podle viditelnosti. */ html.vl-cartbar-on body { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); } } /* ==== cart-panel.css ==================================================== */ /* =========================================================================== Postranní panel košíku (parts/cart-panel.php) — styly vytažené z markupu. Načítá se za vlasimo.css → vlasimo-base.css → vlasimo-ui.css (inc/assets.php, seznam `VLASIMO_PART_CSS`), takže se nic nepřebíjí `!important`. ZAPNUTÍ: doplnit `'cart-panel'` do VLASIMO_PART_CSS — samotný soubor v adresáři se nenačítá. Panel je v DOM na KAŽDÉ stránce (footer.php + WC fragment ve functions.php), proto komponentní soubor, ne page soubor. Na pokladně se nekreslí (vlastní patička). Existující `.vl-cpanel__items` / `.vl-cpanel__more` zůstávají ve vlasimo-base.css (sbalení seznamu + zobáček, obsluha ve vlasimo.js). Tady se k `.vl-cpanel__items` jen dolepí layout, který měl v markupu inline. Kdyby se ten blok někdy stěhoval, patří sem. Zdroj hodnot: computed styly živého panelu ve třech šířkách (tools/css-snap/base/{kosik,hp}@{1440,900,390}.json) plus výpis navázaných pravidel přes CDP. Na panel míří z responzivních vrstev jediné pravidlo — tabletové zmenšení součtu — a to je dole. Migrace: tools/migrate/21-cart-panel.py =========================================================================== */ /* --- Hlavička panelu ------------------------------------------------------- */ .vl-cpanel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; border-bottom: 1px solid #e3e0d4; } .vl-cpanel-head__title { font-size: 18px; font-weight: 600; color: #16211c; } .vl-cpanel-head__count { color: #8a887f; font-weight: 500; } .vl-cpanel-head__close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #8a887f; font-size: 17px; } /* --- Seznam položek -------------------------------------------------------- Doplněk k `.vl-cpanel__items { max-height: 272px }` ve vlasimo-base.css; `max-height` sem schválně nepatří, aby `.vl-cpanel__items.is-open` (taky base) dál vyhrávalo. */ .vl-cpanel__items { padding: 0 28px; display: flex; flex-direction: column; flex: none; overflow: hidden; } /* --- Prázdný košík --------------------------------------------------------- `.vl a { color:#16211c }` (0,0,1,1) i `.vl a:hover { color:#0b7c3d }` (0,0,2,1) jsou specifičtější než holá třída, a inline styl je dřív přebíjel v obou stavech — proto `.vl a.` včetně `:hover`. */ .vl-cpanel-empty { padding: 36px 0 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .vl-cpanel-empty__text { text-align: center; color: #8a887f; font-size: 14.5px; } .vl a.vl-cpanel-empty__cta, .vl a.vl-cpanel-empty__cta:hover { height: 52px; padding: 0 26px; background: #0d8f46; color: #ffffff; border-radius: 12px; display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; box-shadow: 0 3px 0 #075c2e; } .vl-cpanel-empty__arrow { line-height: 1; transform: translateY(-1.5px); } /* --- Řádek položky --------------------------------------------------------- `img { max-width:100%; height:auto }` z vlasimo.css je jen (0,0,0,1), takže rozměry na třídě vyhrají; `height:auto` z něj platí dál — stejně jako dřív, inline ho taky nepřebíjel. */ .vl-cpanel-item { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid #f0ede1; } .vl-cpanel-item__thumb { width: 64px; height: 64px; min-width: 64px; border-radius: 12px; border: 1px solid #e3e0d4; background: #ffffff; display: flex; align-items: center; justify-content: center; } .vl-cpanel-item__img { max-width: 88%; max-height: 88%; object-fit: contain; display: block; } .vl-cpanel-item__name { font-size: 15px; font-weight: 600; color: #16211c; } .vl-cpanel-item__kura { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: #0b7c3d; } /* Množství: řádek dárku barvu nedědí od `--muted`, ale ze svého ``. */ .vl-cpanel-qty { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 13.5px; } .vl-cpanel-qty--muted { color: #8a887f; } .vl-cpanel-qty__gift { font-weight: 600; color: #8a887f; } .vl-cpanel-qty__btn { font-size: 15px; color: #8a887f; cursor: pointer; padding: 0 2px; } /* Cena řádku: `--sale` = zlevněno (a „Zdarma"), jinak tmavá. Modifikátor musí stát ZA základní třídou — obě mají (0,0,1,0). */ .vl-cpanel-item__price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .vl-cpanel-item__sum { font-size: 15px; font-weight: 600; color: #16211c; } .vl-cpanel-item__sum--sale { color: #0b7c3d; } .vl-cpanel-item__old { font-size: 12.5px; color: #8a887f; text-decoration: line-through; } /* --- Progress doprava / dárek ---------------------------------------------- `inset: 0 auto 0 0` je opsané doslova z markupu, ne rozepsané do longhandů: v prohlížeči bez podpory `inset` (Chrome < 87) se má chovat přesně jako dosud. Šířku výplně dál nese inline styl — procenta jsou spojitá množina. */ .vl-cpanel-prog { background: #f4faf6; border-top: 1px solid #e3e0d4; border-bottom: 1px solid #e3e0d4; padding: 14px 28px 16px; } .vl-cpanel-prog__head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #0b7c3d; } .vl-cpanel-prog__ico { flex: 0 0 auto; } /* Dráha musí být o 6 px vyšší než pás, aby se do ní vešlo kolečko cíle — proto obal `__bar` a v něm rail, výplň i kolečko absolutně. Bez obalu by `overflow: hidden` na dráze kolečko uřízlo. */ .vl-cpanel-prog__bar { position: relative; height: 14px; margin-top: 10px; } .vl-cpanel-prog__track { position: absolute; left: 0; right: 0; top: 3px; height: 8px; border-radius: 99px; background: #dbe7de; } .vl-cpanel-prog__fill { position: absolute; left: 0; top: 3px; height: 8px; max-width: 100%; background: #0d8f46; border-radius: 99px; } .vl-cpanel-prog__dot { position: absolute; right: 0; top: 0; box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2.5px solid #bcc9bf; display: flex; align-items: center; justify-content: center; color: #fff; } .vl-cpanel-prog__dot.is-on { background: #0d8f46; border-color: #0d8f46; } .vl-cpanel-prog__legend { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: 12px; font-weight: 600; } .vl-cpanel-prog__legend--end { justify-content: flex-end; } .vl-cpanel-prog__goal { display: inline-flex; align-items: center; gap: 5px; color: #8a887f; } .vl-cpanel-prog__goal--done { color: #0b7c3d; } /* --- Karty TIP a „Kupují společně" ----------------------------------------- Obě karty mají stejný rám (`.vl-cpanel-card`) a stejné kulaté „+" (`.vl-cpanel-add`, třikrát v markupu). */ .vl-cpanel-cards { padding: 14px 28px 14px; display: flex; flex-direction: column; gap: 10px; } .vl-cpanel-card { border: 1px solid #e3e0d4; background: #ffffff; border-radius: 14px; padding: 12px 18px; display: flex; align-items: center; gap: 14px; } .vl-cpanel-add { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; border: 1.5px solid #0d8f46; color: #0b7c3d; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; } /* Karta upgradu (David 11. 9., varianta B z plátna): stejná stavba jako nabídky, jen v zeleném tónu a s plným „+" místo obrysového — má být vidět, že je to výhodnější varianta toho, co v košíku už leží, ne zboží navíc. */ .vl-cpanel-card--tip { background: #f4faf6; border-color: #b9d6c4; } .vl-cpanel-card--tip .vl-cpanel-up__thumb { background: #ffffff; } .vl-cpanel-tip__row { display: flex; align-items: baseline; gap: 9px; } /* Doplatek na konci řádku s odznakem: `margin-left:auto` ho odtlačí doprava a přitom nechá odznak s nadpisem u sebe (na `space-between` by se rozlezly). */ .vl-cpanel-tip__row .vl-cpanel-up__price { margin-left: auto; } .vl-cpanel-card--tip .vl-cpanel-up__line { margin-top: 5px; } .vl-cpanel-add--solid { background: #0d8f46; border-color: #0d8f46; color: #ffffff; } /* Odznak sedí v řádku s nadpiskem, který je vysoký 14 px. S výchozím prokládáním 1,6 a 5px odsazením měl 28 px a proti textu vedle sebe přečníval — proto vlastní prokládání a nižší odsazení (David 11. 9.). */ .vl-cpanel-tip__badge { background: #ffd21f; color: #16211c; font-size: 11px; line-height: 1.25; font-weight: 700; letter-spacing: .06em; border-radius: 7px; padding: 3px 9px; } .vl-cpanel-tip__text { flex: 1; font-size: 13.5px; line-height: 1.55; color: #3d443e; } /* Zelená částka úspory uvnitř textu TIPu — obal skládá $vl_tip_text v šabloně. */ .vl-cpanel-tip__save { font-weight: 600; color: #0b7c3d; } .vl-cpanel-up__thumb { width: 52px; height: 52px; min-width: 52px; border-radius: 10px; border: 1px solid #e3e0d4; background: #fdfcf8; display: flex; align-items: center; justify-content: center; } .vl-cpanel-up__img { max-width: 86%; max-height: 86%; object-fit: contain; display: block; } .vl-cpanel-up__kicker { font-size: 10.5px; line-height: 1.3; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #0b7c3d; } /* Název a cena na jednom řádku (David 11. 9.): cena vpravo, ať se karty pod sebou čtou jako ceník. `min-width: 0` na názvu je nutné — bez něj flex položka nesmí zúžit pod obsah a dlouhý název by cenu vytlačil z karty. */ .vl-cpanel-up__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 3px; line-height: 1.3; } .vl-cpanel-up__name { font-size: 14px; font-weight: 600; color: #16211c; min-width: 0; } .vl-cpanel-up__price { font-size: 13.5px; font-weight: 700; color: #0b7c3d; white-space: nowrap; } .vl-cpanel-up__line { font-size: 12.5px; line-height: 1.45; color: #5d6b62; margin-top: 2px; } /* --- Souhrn, CTA a loga plateb --------------------------------------------- */ /* Souhrn s CTA musí být vidět VŽDYCKY (David 11. 9.) — je to jediná cesta dál. `margin-top:auto` ho u krátkého košíku drží dole, `position:sticky` ho u dlouhého nechá na místě a scrolluje obsah nad ním. Obal `.vl-ftr__cart-body` je scrollovací kontejner (footer.css), takže se lepí k němu. Pozadí musí být neprůhledné, jinak pod ním prosvítají karty; `bottom:-1px` schová vlastní rámeček pod hranu při dojetí na konec. */ .vl-cpanel-sum { margin-top: auto; position: sticky; bottom: -1px; z-index: 3; background: #fdfcf8; padding: 16px 28px 20px; border-top: 1px solid #e3e0d4; display: flex; flex-direction: column; gap: 12px; } .vl-cpanel-coupon { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; } .vl-cpanel-coupon__val { color: #0b7c3d; font-weight: 600; } .vl-cpanel-sum__row { display: flex; justify-content: space-between; align-items: baseline; } .vl-cpanel-sum__label { font-size: 17px; font-weight: 600; color: #16211c; } .vl-cpanel-sum__vat { font-size: 12px; font-weight: 400; color: #8a887f; } .vl-cpanel-sum__total { font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: #16211c; line-height: 1; } .vl-cpanel-points { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; background: #e4eee6; border: 1px solid #c6dbcb; color: #0b7c3d; border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 600; } .vl a.vl-cpanel-cta, .vl a.vl-cpanel-cta:hover { height: 58px; background: #0d8f46; color: #ffffff; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: 600; border-radius: 14px; box-shadow: 0 4px 0 #075c2e; } .vl-cpanel-cta__arrow { font-weight: 400; transform: translateY(-1px); display: inline-block; } .vl-cpanel-pay { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; align-items: center; } .vl-cpanel-pay__badge { border: 1px solid #e3e0d4; background: #ffffff; border-radius: 6px; padding: 4px 7px; display: inline-flex; align-items: center; } .vl-cpanel-pay__img { height: 10px; width: auto; display: block; } /* --- Sdílené drobnosti ----------------------------------------------------- Stejná hodnota na víc místech = jedna třída, ne kopie: `.vl-cpanel-grow` je tělo položky i tělo upsellu, `.vl-cpanel-ico` fajfka v progressu i u bodů, `.vl-cpanel-b` počet kusů i zvýraznění `*takto*` v textu TIPu. */ .vl-cpanel-grow { flex: 1; min-width: 0; } .vl-cpanel-ico { display: block; } .vl-cpanel-b { font-weight: 600; color: #16211c; } /* ==== TABLET 769–1024 ====================================================== Jediné pravidlo responzivní vrstvy, které na panel doopravdy mířilo: `[style*="font-size:28px; font-weight:600; letter-spacing:-.02em; color:#16211c; line-height:1"] { font-size: 25px !important }` (vlasimo-base.css). Ta jehla byla v celé šabloně jen tady, takže pravidlo v base.css po migraci osiří. `!important` netřeba — nic jiného na `.vl-cpanel-sum__total` nesahá. ≤768 px pro panel žádné pravidlo neexistuje (ověřeno CDP na 390 px), proto tu mobilní blok chybí. */ @media (min-width: 769px) and (max-width: 1024px) { .vl-cpanel-sum__total { font-size: 25px; } } /* ==== MOBIL ≤768 =========================================================== Na telefonu je panel celá obrazovka a co se nevejde nad ohyb, to `fitCpanelItems()` (vlasimo.js) ubere ze SEZNAMU POLOŽEK — až na jeho minimum 88 px. Do 9. 9. tak z košíku byla vidět jedna a půl položky: progress (141 px), karty TIP + prodloužení (273 px) a souhrn (180 px) spolykaly z 844 px displeje 594. Hodnoty jsou vzaté z panelu Herbasu, který tímhle kolem prošel (Davidovo zadání 9. 9.): okraje 28 → 18, písmo o stupeň dolů, kulaté „+" 40 → 34. Ušetřeno 157 px = dvě položky. Seznam položek má na mobilu strop ve `vh`, ne 272 px z vlasimo-base.css: ta hodnota je počítaná pro desktopový panel a na výšku telefonu je moc nízká — místo, které se pod ní uvolní, zůstávalo prázdné, protože `fitCpanelItems()` umí jen zmenšovat, ne zvětšovat. Strop 46 vh se veze s displejem a JS ho pořád podřízne, když se souhrn nevejde (ověřeno na 375×667: dvě položky a zobáček, CTA nad ohybem). Legenda prahů: `nowrap` na položce + `wrap` na kontejneru, hranici si najde prohlížeč sám. Breakpoint podle šířky textu tu nemá smysl zkoušet — headless Chromium sází písmo úžeji než telefon (viz CLAUDE.md). Hlavička progressu je 11,5 px, aby se hláška vešla na jeden řádek: na 390 px má text 313 px místa a nejdelší běžné znění („Dopravu máte zdarma — do dárku zbývá 1 233 Kč") měří v headless 286 px, tedy 91 % — ta desetina je rezerva právě na to, že telefon sází šířeji. Ve 12,5 px vycházelo 311 px z 313 a stačila jedna číslice navíc (a před 9. 9. haléře) k zalomení. Křížek si nechává 30×30 px i při menším odsazení hlavičky: Herbas ho na mobilu naopak zvětšoval, aby bylo do čeho trefit palcem. =========================================================================== */ @media (max-width: 768px) { .vl-cpanel-head { padding: 10px 18px; } .vl-cpanel-head__title { font-size: 16.5px; } .vl-cpanel__items { padding: 0 18px; max-height: 46vh; } .vl-cpanel-item { gap: 12px; padding: 11px 0; } .vl-cpanel-item__thumb { width: 52px; height: 52px; min-width: 52px; border-radius: 10px; } .vl-cpanel-item__name { font-size: 14px; } .vl-cpanel-item__kura { font-size: 12px; margin-top: 2px; } .vl-cpanel-qty { gap: 10px; margin-top: 4px; font-size: 13px; } .vl-cpanel-item__sum { font-size: 14.5px; } .vl-cpanel-item__old { font-size: 12px; } .vl-cpanel-prog { padding: 10px 18px 12px; } .vl-cpanel-prog__head { gap: 6px; font-size: 11.5px; } .vl-cpanel-prog__bar { margin-top: 8px; height: 13px; } .vl-cpanel-prog__track, .vl-cpanel-prog__fill { height: 7px; } .vl-cpanel-prog__dot { width: 13px; height: 13px; } .vl-cpanel-prog__legend { margin-top: 7px; gap: 4px 8px; flex-wrap: wrap; font-size: 10.5px; } .vl-cpanel-prog__goal { gap: 4px; white-space: nowrap; } .vl-cpanel-cards { padding: 10px 18px; gap: 8px; } .vl-cpanel-card { padding: 9px 12px; gap: 10px; border-radius: 12px; } .vl-cpanel-add { width: 34px; height: 34px; min-width: 34px; font-size: 17px; } .vl-cpanel-tip__badge { padding: 3px 8px; font-size: 10px; } .vl-cpanel-tip__row { gap: 7px; } .vl-cpanel-tip__text { font-size: 12.5px; line-height: 1.45; } .vl-cpanel-up__thumb { width: 44px; height: 44px; min-width: 44px; } .vl-cpanel-up__kicker { font-size: 10px; } .vl-cpanel-up__row { gap: 8px; } .vl-cpanel-up__name { font-size: 13px; } .vl-cpanel-up__price { font-size: 12.5px; } .vl-cpanel-up__line { font-size: 12px; line-height: 1.4; } .vl-cpanel-sum { padding: 11px 18px 14px; gap: 8px; } .vl-cpanel-coupon { font-size: 12.5px; } .vl-cpanel-sum__label { font-size: 15px; } .vl-cpanel-sum__total { font-size: 22px; } .vl-cpanel-points { padding: 4px 11px; font-size: 11.5px; } /* CTA zůstává v původní velikosti (58 px / 17 px) — David 9. 9.: hlavní tlačítko se nezmenšuje, ušetřené místo má jít z okolí, ne z něj. */ } /* Toast pro hlášky mimo košík a pokladnu (chyba při přidání do košíku, hláška ze session) — vlNotify() ve vlasimo-cart.js, inc/notices.php. */ .vl-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 100010; width: max-content; max-width: min(520px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .vl-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; } .vl-toast__item { background: #16211c; color: #fff; font-size: 14px; line-height: 1.45; padding: 12px 18px 12px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(22, 33, 28, .28); border-left: 4px solid #e0a72a; text-align: left; } .vl-toast__item.is-error { border-left-color: #d64545; } @media (max-width: 768px) { .vl-toast { bottom: 16px; } .vl-toast__item { font-size: 13.5px; padding: 11px 14px; } } /* ==== certs.css ========================================================= */ /* =========================================================================== certs.css — sdílená sekce „Certifikace a původ" (parts/certs.php). Kreslí ji HP, výpis /objednavka/, PDP kúry i kosmetiky (obě vrstvy), Složení a Zkušenosti — soubor je proto v assets/css/parts/ a načítá se na KAŽDÉ stránce (inc/assets.php, závislost `vlasimo-ui`), tedy za vlasimo.css → vlasimo-base.css → vlasimo-ui.css a před pages/.css. Vznik: tools/migrate/14-certs.py vytáhl 14 inline stylů z dc renderu do tříd `.vl-certs-*`. Hodnoty jsou ověřené proti computed stylům na /obchod/, /, /slozeni/, /zkusenosti-ostatnich/ a obou PDP ve 1440 / 1024 / 900 / 768 / 390 px (CDP CSS.getMatchedStylesForNode). Dvě varianty obalu podle $args['band']: .vl-certs-band > .vl-certs-band__inner pruh s podkladem (dnes všechna volání) .vl-certs-sec sekce v proudu stránky (větev dnes nikdo nevolá) Konkurence, se kterou třídy počítají: - `h1, h2, h3 { margin:0; color:#16211c; letter-spacing:-.01em }` (0,0,1) — `.vl-certs-head__title` ji přebije (letter-spacing musí být -.02em). - `img { max-width:100%; height:auto }` (0,0,1) — `.vl-certs__logo` přebíjí `height` na 72px. - `.vl-wrap` ve vlasimo-base.css nese pod 1024 px `max-width` a boční odsazení s `!important` (a pod 900 px 20px). Obal pruhu tuhle třídu dál má (kvůli zbytku webu), takže tabletové a mobilní odsazení komponenty musí být taky `!important` — jinak by se od 769 do 900 px boky srazily z 32 na 20 px. Jinde v souboru `!important` není. OSIŘELÁ pravidla ve vlasimo-base.css (jehla `.vl-certs…[style*=…]` už v markupu není, jejich obsah je níž v tomhle souboru): ~1765 .vl-certs.vl-certs--3[style*="grid-template-columns:repeat(4, 1fr)"] ~1773 totéž v @media (max-width: 768px) Automat 00-mrtva-pravidla.py je nesmaže — jehla `grid-template-columns: repeat(4, 1fr)` v jiných šablonách zůstala; smazat je ručně. Sousední `.vl-certs.vl-certs--3 > :last-child { grid-column: 1 / -1 }` (base.css ~1775) žádnou jehlu nemá, žije dál a je níž zopakované — po smazání dvojice výš odstranit i jeho kopii v base.css. =========================================================================== */ /* --- Obal ------------------------------------------------------------------ */ .vl-certs-band { background: #f6f5ef; border-top: 1px solid #e3e0d4; border-bottom: 1px solid #e3e0d4; } .vl-certs-band__inner { max-width: 1440px; margin: 0 auto; padding: 48px; display: flex; flex-direction: column; gap: 24px; } /* Varianta bez pruhu — sekce jde rovnou do proudu stránky. Dnes ji nikdo nevolá (všechna volání partu posílají band => true), pravidla jsou tu, aby se dala zapnout beze změny vzhledu proti stavu před migrací. */ .vl-certs-sec { max-width: 1440px; margin: 0 auto; padding: 0 48px 56px; display: flex; flex-direction: column; gap: 20px; } /* --- Hlavička sekce -------------------------------------------------------- */ .vl-certs-head { display: flex; flex-direction: column; gap: 8px; } .vl-certs-head__kicker { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #0b7c3d; } .vl-certs-head__title { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: #16211c; } /* Perex se vykreslí jen když je `cert_lead` vyplněný. `max-width` schválně nemá: pravidlo `.vl-sechead > span[style*="color:#5d6b62"] { max-width:46ch }` z base.css na něj nikdy nesedělo (hlavička certifikací není .vl-sechead). */ .vl-certs-head__lead { font-size: 14px; color: #5d6b62; } /* --- Mřížka dlaždic -------------------------------------------------------- Třídu `.vl-certs` a modifikátor `.vl-certs--N` (N = počet certifikací) nese markup dál. CS má 4 dlaždice, SK 3 (bez MZe — David 6. 9.), a se třemi se mřížka roztáhne na celou šířku. Modifikátor je psaný jako `.vl-certs.vl-certs--3` (0,2,0) schválně: přebíjí i tabletové zúžení na dva sloupce níž, které je jen (0,1,0). */ .vl-certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .vl-certs.vl-certs--3 { grid-template-columns: repeat(3, 1fr); } .vl-certs__card { background: #fdfcf8; border: 1px solid #e3e0d4; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; } /* Loga: pevných 72 px na výšku na všech třech vrstvách (Davidovo pravidlo 3. 9.) — ani tablet, ani mobil je nezmenšují. */ .vl-certs__logo { height: 72px; width: auto; max-width: 100%; object-fit: contain; object-position: center; display: block; } /* Kolečko se zkratkou = fallback pro certifikaci bez loga (dnes ho má všechny CS i SK, takže se nikde nekreslí). Velikost písma je konečná trojice podle délky zkratky, proto modifikátory, ne inline styl: > 4 znaky → 10, > 3 → 11, jinak 12. */ .vl-certs__abbr { width: 46px; height: 46px; border-radius: 50%; background: #e4eee6; border: 1px solid #c6dbcb; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #0b7c3d; } .vl-certs__abbr--10 { font-size: 10px; } .vl-certs__abbr--11 { font-size: 11px; } .vl-certs__abbr--12 { font-size: 12px; } .vl-certs__body { display: flex; flex-direction: column; gap: 4px; } /* `` má v UA font-weight bolder — třída ho vrací na 600. */ .vl-certs__name { font-size: 14.5px; font-weight: 600; color: #16211c; } .vl-certs__desc { font-size: 13px; line-height: 1.55; color: #5d6b62; } /* --- Šířka pruhu pod 1024 px ---------------------------------------------- Platí i pro mobil: `.vl-wrap { max-width:1024px !important }` v base.css drží pruh na 1024 px až do 390 px a po migraci by tichý rozdíl mezi „třída říká 1440" a „skutečnost je 1024" mátl. `!important` je nutný — přebíjí se pravidlo, které ho má taky. */ @media (max-width: 1024px) { .vl-certs-band__inner { max-width: 1024px !important; } } /* --- Tablet 769–1024 ------------------------------------------------------- Přeneseno z bloku tabletu ve vlasimo-base.css (pravidla [style*="…"]). Mřížka jde na dva sloupce; SK trojice zůstává na třech (viz výš). Odsazení pruhu potřebuje `!important` kvůli `.vl-wrap`. */ @media (min-width: 769px) and (max-width: 1024px) { .vl-certs-band__inner { padding: 32px !important; } .vl-certs-sec { max-width: 1024px; padding: 0 32px 36px; } .vl-certs-head__title { font-size: 25px; } .vl-certs { grid-template-columns: repeat(2, 1fr); } } /* --- Mobil ≤768 ------------------------------------------------------------ Sekce nemá vlastní markupovou vrstvu — `parts/cert-tiles-mobile.php` je samostatný part s vlastními třídami `.vl-certs-m*`. Desktopový markup je na mobilu vidět jen tam, kde ho vykresluje mobilní vrstva PDP (parts/pdp-mobile.php, parts/pdp-cosmetic-mobile.php) nebo stránka bez vrstev (Zkušenosti) — a ta místa mají obal `.vl-dcontent`. Proto je scope `.vl-dcontent` zachovaný přesně jako v base.css: na HP, výpisu a Složení je pás v `.vl-desktop` (display:none), ale computed hodnoty se snímkují i tam, takže neomezené pravidlo by se v diffu projevilo jako změna. Výjimka je SK trojice — tu base.css nescopuje. */ @media (max-width: 768px) { .vl-dcontent .vl-certs-band__inner { padding: 28px 20px !important; } .vl-dcontent .vl-certs-sec { padding: 0 20px 36px; } .vl-dcontent .vl-certs-head__title { font-size: 22px; } .vl-dcontent .vl-certs { grid-template-columns: repeat(2, 1fr); } .vl-certs.vl-certs--3 { grid-template-columns: repeat(2, 1fr); } .vl-certs.vl-certs--3 > :last-child { grid-column: 1 / -1; } } /* ==== contact-help.css ================================================== */ /* =========================================================================== contact-help.css — sdílený kontaktní pruh `parts/contact-help.php` („Zavolejte / napište" + karta s jednou akcí). Kreslí ho tři stránky: Vše o nákupu (`parts/contact-help` bez argumentů), Vrácení a reklamace (odkaz na formulář odstoupení) a Časté dotazy (odkaz na kontaktní formulář). Part je SDÍLENÝ, takže styly patří do assets/css/parts/, ne do žádného pages/.css — jinak by se pruh na dvou ze tří stránek rozpadl. Načítání: `inc/assets.php` → konstanta `VLASIMO_PART_CSS`. Seznam je výslovný, ne glob — dokud v něm `contact-help` není, soubor se nenačítá. Pořadí je vlasimo.css → vlasimo-base.css → vlasimo-ui.css → parts/*.css → pages/.css, tedy AŽ ZA základem: `!important` tu proto není potřeba nikde (po migraci na tyhle prvky žádné `!important` pravidlo nemíří — všechna visela na `[style*=…]`, a ty atributy jsou pryč). Vznik: tools/migrate/15-contact-help.py vytáhl 25 inline stylů z dc renderu do tříd `.vl-chelp*`. Hodnoty jsou ze snímku computed stylů (tools/css-snap/base/{vse-o-nakupu,vraceni,caste-dotazy}@{1440,900,390}) a ověřené `tools/css-probe.js`; tabletová a mobilní vrstva je přepsaná z pravidel `[style*="…"]` ve vlasimo-base.css (řádky 1086, 1099, 1117, 1171, 1173, 1257, 1285). Konkurence, se kterou třídy počítají (CSS.getMatchedStylesForNode): - `.vl a { color:#16211c }` (0,1,1) a `.vl a:hover { color:#0b7c3d }` (0,1,1) přebíjejí prostou třídu (0,1,0). Telefon, e-mail i tlačítko jsou `` a inline styl jim barvu držel i na hover — proto je barva psaná `.vl a.` VČETNĚ `:hover`. Bez toho by číslo i tlačítko na hover zezelenaly. - `h1,h2,h3 { margin:0; … }` se netýká — nadpisy jsou ``/`
`. - `.vl p { text-align: justify }` se netýká — v partu není `

`. Mobilní vrstva ZÁMĚRNĚ není scopovaná do `.vl-dcontent`, i když v základu scopovaná byla: dnes všechny tři stránky part vkládají dovnitř `.vl-dcontent` (ověřeno snímkem), takže je výsledek shodný, a část určená sdílené komponentě nemá viset na obalu cizí šablony. =========================================================================== */ /* --- Pás a mřížka --------------------------------------------------------- Poměr 1.15fr / 1fr: tmavý panel s kontakty je širší než karta s akcí. `align-items:stretch` (výchozí) drží obě karty stejně vysoké. */ .vl-chelp { background: #fdfcf8; border-top: 1px solid #e3e0d4; } .vl-chelp__in { max-width: 1440px; margin: 0 auto; padding: 44px 48px 56px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: stretch; } /* --- Tmavý panel s telefonem a e-mailem ----------------------------------- Blok „ikona + popisek + hodnota" se opakuje 2× (telefon, e-mail), proto jedna sada tříd a jen modifikátor na barvu kolečka. Telefonní blok se nekreslí v mutacích bez čísla — dělicí linka `__sep` je jeho součástí. */ .vl-chelp__panel { background: #1f4d3a; border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 18px; } .vl-chelp__block { display: flex; flex-direction: column; gap: 10px; } .vl-chelp__head { display: flex; align-items: center; gap: 12px; } .vl-chelp__ico { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .vl-chelp__ico--phone { background: #ffd21f; } .vl-chelp__ico--mail { background: rgba(255, 255, 255, .12); } .vl-chelp__ico--card { background: #eaf5ee; } .vl-chelp__hlabel { font-size: 15.5px; font-weight: 600; color: #ffffff; } .vl-chelp__lines { display: flex; flex-direction: column; gap: 4px; } .vl-chelp__sep { height: 1px; background: rgba(255, 255, 255, .14); } /* Telefon a e-mail jsou odkazy — barva musí být na `.vl a.` a hover se musí zopakovat, jinak vyhraje `.vl a:hover { color:#0b7c3d }`. Ostatní vlastnosti třídě stačí, s `.vl a` o ně nikdo nesoupeří. */ .vl-chelp__tel { font-size: 26px; font-weight: 600; letter-spacing: -.01em; } .vl a.vl-chelp__tel, .vl a.vl-chelp__tel:hover { color: #ffd21f; } .vl-chelp__mail { font-size: 19px; font-weight: 600; } .vl a.vl-chelp__mail, .vl a.vl-chelp__mail:hover { color: #ffffff; } /* Řádek otevírací doby: `display:flex` kvůli tečce stavu z `vlasimo_oh_dot()` (obě varianty se vykreslí a správnou ukáže skript CPP). */ .vl-chelp__hours { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c8d4cb; } .vl-chelp__mnote { font-size: 13px; color: #c8d4cb; } /* --- Světlá karta s jedinou akcí ------------------------------------------ Popisek, nadpis, nepovinná poznámka a zelené tlačítko. `justify-content: center` sráží obsah na střed karty, která je vysoká jako panel vedle. */ .vl-chelp__card { background: #ffffff; border: 1px solid #e3e0d4; border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; justify-content: center; } .vl-chelp__kicker { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #0b7c3d; } .vl-chelp__title { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; color: #16211c; text-wrap: pretty; } .vl-chelp__note { font-size: 14px; line-height: 1.6; color: #5d6b62; } .vl-chelp__btn { margin-top: 4px; align-self: flex-start; height: 52px; padding: 0 24px; background: #0d8f46; border-radius: 12px; display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; box-shadow: 0 3px 0 #075c2e; } .vl a.vl-chelp__btn, .vl a.vl-chelp__btn:hover { color: #ffffff; } /* Šipka je flex položka tlačítka (blokuje se), `translateY` ji srovnává s účařím textu. */ .vl-chelp__arrow { line-height: 1; transform: translateY(-1.5px); } /* --- Tablet 769–1024 ------------------------------------------------------ Přeneseno z vlasimo-base.css: [style*="max-width:1440px; margin:0 auto; padding:44px 48px 56px"] → max-width 1024px, padding 44px 32px 36px [style*="max-width:1440px; margin:0 auto"] → max-width 1024px (táž hodnota) [style*="font-size:26px; …; color:#ffd21f"] → font-size 23px Mřížka 1.15fr/1fr na tabletu zůstává dvousloupcová (žádné pravidlo ji nesráželo; `.vl-zk-story [style*="1.15fr 1fr"]` míří na jinou sekci). */ @media (min-width: 769px) and (max-width: 1024px) { .vl-chelp__in { max-width: 1024px; padding: 44px 32px 36px; } .vl-chelp__tel { font-size: 23px; } } /* --- Mobil ≤768 ----------------------------------------------------------- Přeneseno z vlasimo-base.css (blok `.vl-dcontent [style*=…]`): padding:44px 48px 56px → 28px 20px 36px grid-template-columns:1.15fr 1fr → 1fr font-size:26px → 20px `max-width` tu ZŮSTÁVÁ 1440px — tabletové zúžení na 1024 platí až od 769 px a na 390px snímku se stejně neprojeví. Karty jdou pod sebe, vnitřní odsazení panelu i karty (28 px) se nemění, tak to bylo i dřív. */ @media (max-width: 768px) { .vl-chelp__in { padding: 28px 20px 36px; grid-template-columns: 1fr; } .vl-chelp__tel { font-size: 20px; } } /* ==== cta-order.css ===================================================== */ /* =========================================================================== cta-order.css — sdílený závěrečný pruh `parts/cta-order.php` („Vyberte si kúru a nastartujte růst" + žluté tlačítko na výpis produktů). Kreslí se na 15 šablonách (page.php, single.php, archive.php a dvanáct typových stránek), NEkreslí se na výpisu produktů, v pokladně, v košíku a v účtu (part si to hlídá sám v PHP). Chyba v tomhle souboru je proto vidět skoro všude — po změně kontrolovat víc než jednu stránku. Načítání: `inc/assets.php` → konstanta `VLASIMO_PART_CSS`. Seznam je výslovný, ne glob — dokud v něm `cta-order` není, soubor se nenačítá. Pořadí je vlasimo.css → vlasimo-base.css → vlasimo-ui.css → parts/*.css → pages/.css. Vznik: tools/migrate/15-contact-help.py vytáhl 6 inline stylů do tříd `.vl-ctao*`. Hodnoty jsou ověřené `tools/css-probe.js` na doprava, sk-doprava, vse-o-nakupu, clanek a clanek2 ve třech šířkách (všude shodné); responzivní vrstvy jsou přepsané z vlasimo-base.css (řádky 1072–1073, 1117, 1150 a blok 1478–1494). POZOR — `!important` v media queries není ozdoba: Vnitřní obal nese vedle třídy i `vl-wrap` a základ na něj míří `!important` pravidly, která migrace nemaže (používá je hlavička a další pásy): @media (max-width:1024px) .vl-wrap { max-width:1024px !important; padding-left/right:32px !important } @media (max-width:900px) .vl-wrap { padding-left/right:20px !important } Nedůležitá deklarace `!important` nikdy nepřebije, ať má specificitu jakoukoli. Proto se odsazení píše `!important` a navíc přes `.vl-ctao > .vl-ctao__in` (0,2,0) — se stejnou specificitou (0,1,0) by o výsledku rozhodovalo jen pořadí souborů, což je zbytečně křehké. Na desktopu (>1024) žádné `.vl-wrap` pravidlo neplatí, tam `!important` není a být nemá. Konkurence, se kterou třídy počítají: - `.vl a { color:#16211c }` / `.vl a:hover { color:#0b7c3d }` (0,1,1) — tlačítko je `` a inline styl mu barvu držel i na hover; proto je `color` psaná `.vl a.vl-ctao__btn` a zopakovaná pro `:hover`. Barva je shodou okolností stejná jako `.vl a`, ale hover by ji bez toho změnil na zelenou. - obecná mobilní/tabletová pravidla `[style*="font-size:24px"]` (19 px / 22 px) na nadpis po migraci nemíří — hodnoty níž jsou z konkrétního bloku pro tenhle pruh, který je dřív přebíjel vyšší specificitou. =========================================================================== */ /* --- Desktop -------------------------------------------------------------- Text vlevo, tlačítko vpravo; `flex-wrap:wrap` je z návrhu a nad 768 px se uplatní jen u extrémně dlouhých textů. */ .vl-ctao { background: #1f4d3a; } .vl-ctao__in { max-width: 1440px; margin: 0 auto; padding: 44px 48px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .vl-ctao__col { display: flex; flex-direction: column; gap: 6px; } .vl-ctao__title { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: #fdfcf8; } .vl-ctao__note { font-size: 14.5px; color: #c8d4cb; } .vl-ctao__btn { height: 56px; padding: 0 28px; background: #ffd21f; border-radius: 14px; display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; box-shadow: 0 4px 0 #d9a800; white-space: nowrap; } .vl a.vl-ctao__btn, .vl a.vl-ctao__btn:hover { color: #16211c; } /* --- Tablet a užší desktop ≤1024 ------------------------------------------ Hranice je 1024, ne 769–1024: pruh se na mobilu neskládá pod sebe, jen se dál zmenšuje, takže se nižší vrstvy postupně přebíjejí (tak to bylo i v základu — `@media (max-width:1024px)`, pak 768, pak 400). `max-width` je tu explicitně, i když stejnou hodnotu vynucuje `.vl-wrap`: ať pruh nezávisí na tom, že mu tuhle třídu někdo v markupu nechá. */ @media (max-width: 1024px) { .vl-ctao > .vl-ctao__in { max-width: 1024px !important; padding: 36px 32px !important; gap: 24px; } .vl-ctao__title { font-size: 22px; } .vl-ctao__btn { height: 52px; padding: 0 24px; font-size: 15px; } } /* --- Mobil ≤768 ----------------------------------------------------------- David chce text i tlačítko vedle sebe jako na desktopu, ne pod sebou — proto `flex-wrap:nowrap`, text `flex:1 1 auto; min-width:0` (aby se směl zmenšit) a tlačítko `flex:none` (aby se nesmrsklo). */ @media (max-width: 768px) { .vl-ctao > .vl-ctao__in { padding: 24px 20px !important; gap: 14px; flex-wrap: nowrap; } .vl-ctao__col { min-width: 0; flex: 1 1 auto; gap: 4px; } .vl-ctao__title { font-size: 17px; line-height: 1.25; } .vl-ctao__note { font-size: 12.5px; line-height: 1.45; } .vl-ctao__btn { height: 42px; padding: 0 16px; font-size: 13.5px; gap: 8px; border-radius: 10px; box-shadow: 0 3px 0 #d9a800; flex: none; } } /* --- Úzký telefon ≤400 ---------------------------------------------------- Na 390px snímku (iPhone) se nadpis vedle tlačítka jinak lámal do dvou znaků na řádek. Jen typografie a odsazení tlačítka, layout zůstává. */ @media (max-width: 400px) { .vl-ctao__title { font-size: 16px; } .vl-ctao__note { font-size: 12px; } .vl-ctao__btn { padding: 0 14px; font-size: 13px; } } /* ==== drobne.css ======================================================== */ /* =========================================================================== drobne.css — drobné sdílené party, jeden soubor, každý part vlastní blok a vlastní prefix. parts/voucher-card.php .vl-vch-* žlutá kartička dárkového poukazu parts/lang-topbar.php .vl-lang-* jazykový přepínač v topbaru parts/photo-modal.php .vl-pmodal-* lightbox fotky u recenze parts/ask-modal.php .vl-ask-* dva zbylé inline styly modalu „Napsat dotaz" parts/info-tip.php .vl-tip__ico ikona „i" v bublině u karet výpisu Party bez vlastního bloku (nemají co migrovat, viz komentář na konci): parts/progress-bar.php, parts/tile-campaign.php, parts/cta-campaign.php Načítá se z inc/assets.php (VLASIMO_PART_CSS) na KAŽDÉ stránce, se závislostí `vlasimo-ui` — tedy za vlasimo.css → vlasimo-base.css → vlasimo-ui.css a PŘED pages/.css. Vznik: tools/migrate/34-drobne-party.py — 26 inline stylů z pěti partů. Hodnoty nejsou opsané z návrhu, ale ověřené proti computed stylům na /darkove-poukazy/, /obchod/, /, /zkusenosti-ostatnich/?vl_embed=1 a /produkt/sampon-na-podporu-rustu-vlasu/ ve 1440 / 900 / 390 px. Konkurence, se kterou třídy počítají: - `img { max-width:100%; height:auto }` (0,0,1) ve vlasimo.css — `.vl-vch__logo` i `.vl-pmodal__img` ji musí přebít na výšce/šířce. - `.vl a { color:#16211c }` (0,1,1) a `.vl a:hover { color:#0b7c3d }` (0,2,1) ve vlasimo-base.css. Položka jazykového menu je `` a inline styl jí barvu držel i na hover — proto `.vl a.vl-lang__item` A `.vl a.vl-lang__item:hover`. Bez druhého selektoru by menu na najetí zezelenalo (dřív to inline styl nedovolil). - `.vl-cform__cb:checked + .vl-cform__box { background:#0d8f46 !important }` ve vlasimo-base.css — `!important` tam byl kvůli inline stylu; po migraci ho `.vl-ask__gdprbox` (0,1,0) neohrožuje, pravidlo zůstává beze změny a zaškrtnutý čtvereček dál zezelená. OSIŘELÉ pravidlo ve vlasimo-base.css (maže hlavní session — jehla už v markupu není a nikde jinde se nevyskytuje): ř. 1100, @media (min-width:769px) and (max-width:1024px) [style*="font-size:46px; font-weight:600; letter-spacing:-.02em"] { font-size: 37px !important; } → nahrazuje ho `.vl-vch__amount` v tabletovém bloku níž. NEOSIŘELÉ, ale komponenty se týká: ř. 1226, @media (max-width:768px) .vl-dcontent [style*="font-size:46px"] { font-size: 32px !important; } Jehlu `font-size:46px` má dál parts/rating-summary.php (letter-spacing -.03em), takže pravidlo ZŮSTÁVÁ. Pro poukaz ho níž nahrazuje `.vl-dcontent .vl-vch__amount` — a schválně jen uvnitř `.vl-dcontent`: na výpisu /obchod/ (obě vrstvy) je částka i na 390 px 46px, protože tam žádné `.vl-dcontent` není a mobilní kopii zmenšuje `.vl-vch-scale { zoom:.58 }`. =========================================================================== */ /* ===== parts/voucher-card.php — dárkový poukaz ============================ Kreslí ji stránka /darkove-poukazy/, desktopový výpis produktů (woocommerce/archive-product.php) a mobilní vrstva výpisu (parts/shop-mobile.php uvnitř `.vl-vch-scale`). Vnější obal je pozicovaný jen kvůli bílému štítku, který kartě přesahuje pod spodní hranu (`bottom:-14px`). */ .vl-vch { position: relative; } .vl-vch__card { background: #ffd21f; border-radius: 20px; aspect-ratio: 16/10; position: relative; overflow: hidden; box-shadow: 0 24px 60px rgba(22, 33, 28, .30); } /* Dvě kruhové skvrny pod obsahem — liší se rohem, velikostí i barvou, společné mají jen tvar a vyvázání z toku. */ .vl-vch__blob { position: absolute; border-radius: 50%; } .vl-vch__blob--tr { top: -70px; right: -70px; width: 280px; height: 280px; background: rgba(201, 154, 18, .30); } .vl-vch__blob--bl { bottom: -90px; left: -60px; width: 300px; height: 300px; background: rgba(255, 255, 255, .34); } /* `img { max-width:100%; height:auto }` je (0,0,1) — výška musí být na třídě. */ .vl-vch__logo { position: absolute; top: 26px; left: 26px; height: 28px; width: auto; display: block; } .vl-vch__label { position: absolute; top: 30px; right: 26px; font-size: 11px; font-weight: 600; letter-spacing: .16em; color: #73681a; } .vl-vch__val { position: absolute; left: 26px; bottom: 86px; } /* Částku plní JS z vybrané dlaždice (data-vl-vch-amount, vlasimo-cart.js) — atribut zůstává, třída nese jen vzhled. */ .vl-vch__amount { font-size: 46px; font-weight: 600; letter-spacing: -.02em; color: #16211c; line-height: 1; } .vl-vch__sub { font-size: 13px; color: #4a4520; margin-top: 8px; } .vl-vch__foot { position: absolute; left: 26px; right: 26px; bottom: 22px; display: flex; justify-content: space-between; align-items: center; gap: 14px; } .vl-vch__code { border: 1.5px dashed #73681a; background: rgba(255, 255, 255, .28); color: #16211c; border-radius: 9px; padding: 8px 16px; font-family: ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 700; letter-spacing: .1em; } .vl-vch__valid { font-size: 11.5px; color: #73681a; } .vl-vch__badge { position: absolute; bottom: -14px; left: 26px; background: #ffffff; border: 1px solid #e3e0d4; border-radius: 12px; padding: 10px 16px; font-size: 13px; font-weight: 600; color: #16211c; box-shadow: 0 8px 20px rgba(22, 33, 28, .10); } /* ===== parts/lang-topbar.php — jazykový přepínač ========================== Vždy v topbaru hlavičky (header.php), rozbalovací menu jen když má WPML víc než jeden aktivní jazyk (dnes cs+sk). Obal si drží atribut `data-vl-lang` — visí na něm JS i pravidlo `[data-vl-lang] + .vl-topbar__sep { margin-left:-6px }` ve vlasimo-base.css. */ .vl-lang { position: relative; } .vl-lang__btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid #3a5a4a; border-radius: 999px; padding: 4px 8px; } /* Vlaječka: `line-height:0` sráží řádkový box na výšku SVG, jinak by pilulka povyrostla. Menu má o půl pixelu menší zaoblení než tlačítko. */ .vl-lang__flag { display: inline-flex; border-radius: 2.5px; overflow: hidden; line-height: 0; } .vl-lang__flag--sm { border-radius: 2px; } .vl-lang__arrow { display: block; } .vl-lang__menu { position: absolute; top: 32px; left: 0; z-index: 90; background: #ffffff; border: 1px solid #e3e0d4; border-radius: 12px; box-shadow: 0 14px 36px rgba(22, 33, 28, .22); padding: 8px; display: flex; flex-direction: column; gap: 2px; min-width: 200px; } /* Položka je ``: `.vl a` (0,1,1) přebíjí holou třídu a `.vl a:hover` (0,2,1) by ji na najetí obarvilo zeleně — inline styl to dřív nedovolil, takže se hover pinuje na tutéž barvu. */ .vl a.vl-lang__item, .vl a.vl-lang__item:hover { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 9px 12px; font-size: 13.5px; font-weight: 600; color: #16211c; } /* Podklad aktivního jazyka — v markupu to byla podmíněná půlka inline stylu (`$vl_l['active'] ? 'background:#e4eee6;' : ''`). */ .vl-lang__item.is-active { background: #e4eee6; } /* ===== parts/photo-modal.php — lightbox fotky od zákazníka ================ Jeden na stránku, mimo vrstvy `.vl-desktop`/`.vl-mobile` (fixed prvek v `display:none` rodiči nefunguje): patička všech stránek a navíc holý embed režim stránky zkušeností (?vl_embed=1), který patičku nemá. Atribut je schválně `data-vl-pmodal`, ne `data-vl-modal` — obecná mobilní pravidla modalů by fotku roztáhla na celou výšku. */ .vl-pmodal__veil { position: fixed; inset: 0; z-index: 240; background: rgba(22, 33, 28, .72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; } /* `img { max-width:100%; height:auto }` (0,0,1) by fotku zastropovalo šířkou závoje — proto max-width i height na třídě. */ .vl-pmodal__img { width: auto; height: auto; max-width: min(100%, 900px); max-height: calc(100dvh - 48px); border-radius: 14px; box-shadow: 0 30px 80px rgba(22, 33, 28, .45); display: block; } /* Křížek je `position:fixed`, ne absolute: kotví se k oknu, ne k fotce, aby u vysokého snímku neutekl mimo obrazovku. */ .vl-pmodal__x { position: fixed; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #16211c; color: #ffffff; font-size: 17px; line-height: 1; cursor: pointer; } /* ===== parts/ask-modal.php — souhlas se zpracováním ======================= Zbytek modalu je `.h-ask*` z vlasimo.css + vlasimo-base.css a inline styly neměl. Migrují se jen dva: obal checkboxu a čtvereček. Třídy `.vl-cform__cb` / `.vl-cform__box` na prvcích ZŮSTÁVAJÍ, nesou chování (:checked, :focus-visible, průhlednost SVG). */ .vl-ask__gdpr { position: relative; cursor: pointer; } .vl-ask__gdprbox { width: 18px; height: 18px; min-width: 18px; margin-top: 1px; border-radius: 5px; border: 1px solid #d5d2c6; background: #fdfcf8; display: flex; align-items: center; justify-content: center; color: #ffffff; } /* ===== parts/info-tip.php — ikona bubliny ================================= Ostatní `.vl-tip*` pravidla zůstávají ve vlasimo-base.css: nevznikla z inline stylů a stěhovat je sem by byl jen pohyb bez užitku. */ .vl-tip__ico { display: block; } /* ===== Tablet 769–1024 ===================================================== Náhrada osiřelého pravidla z vlasimo-base.css ř. 1100. Platí na VŠECH místech, kde se kartička kreslí (poukazy i výpis) — původní selektor `[style*=…]` taky nebyl ničím zaobalený. */ @media (min-width: 769px) and (max-width: 1024px) { .vl-vch__amount { font-size: 37px; } } /* ===== Mobil ≤768 ========================================================== Jen uvnitř `.vl-dcontent` (stránka /darkove-poukazy/) — přesně tak, jak to dělalo `.vl-dcontent [style*="font-size:46px"]` ve vlasimo-base.css. Na výpisu produktů kartička v `.vl-dcontent` není a částka tam zůstává 46px (ověřeno probem: obchod@390 i sk-obchod@390 = 46px). */ @media (max-width: 768px) { .vl-dcontent .vl-vch__amount { font-size: 32px; } } /* ==== footer-mobile.css ================================================= */ /* =========================================================================== parts/footer-mobile.php — mobilní patička (návrh „Vlasimo homepage – mobil", blok 12). Styly vytažené z markupu do tříd `.vl-ftrm-*`. Part je GENEROVANÝ (tools/build-mobile.py) — mapa „inline styl → třída" je v generátoru v bloku mezi značkami BEGIN/END, vložila ji migrace tools/migrate/29-home-mobile.py. Part se needituje. Kreslí se jen do 768 px (`.vl-mobile` v base.css), vlastní media query proto nemá. Řádek s doménami mutací nekreslí tenhle part, ale sdílený helper `vlasimo_footer_domain()` z functions.php (společný s desktopovou patičkou) — jeho inline styly patří k vlně 17, ne sem. =========================================================================== */ /* --- Tmavý blok patičky ---------------------------------------------------- POZOR na specificitu: base.css má `body.single-product .vl-footdark { padding-bottom: 84px }` (a 92px pod 768 px) kvůli lepivé liště na PDP. Inline styl to tady dřív přebíjel, takže mobilní patička na PDP měla a má 26 px. Aby to platilo dál, musí být selektor specifičtější než (0,2,1) — `.vl .vl-footdark.vl-ftrm` je (0,3,0) a vyhrává bez ohledu na pořadí souborů. (Jestli má mobilní patička na PDP místo pro lištu dostat, je samostatné rozhodnutí — migrace vzhled nemění.) */ .vl .vl-footdark.vl-ftrm { background: #16211c; padding: 30px 20px 26px; } .vl-ftrm__logo { height: 26px; width: auto; display: block; } /* `.vl p { text-align: justify }` platí dál — v inline stylu to nebylo a nepřidává se to ani sem. */ .vl-ftrm__about { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: #9fb0a4; } /* --- Kontakt: telefon a e-mail vedle sebe ---------------------------------- O zalomení pod sebe rozhoduje `auto-fit`, ne breakpoint — šířka závisí na délce e-mailu a čísla, která se liší per mutace. */ .vl-ftrm-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px 18px; margin-top: 14px; } .vl-ftrm-contact__col { display: flex; flex-direction: column; gap: 2px; } .vl-ftrm-contact__val { font-size: 15px; font-weight: 600; color: #ffffff; } /* Telefon je ``; bílá musí přebít `.vl a` i `.vl a:hover` (inline styl to dřív dělal sám). `a[href^="tel:"]:not([class])` z vlasimo.css na prvek s třídou už nemíří. */ .vl a.vl-ftrm-contact__val, .vl a.vl-ftrm-contact__val:hover { color: #ffffff; text-decoration: none; } .vl-ftrm-contact__note { font-size: 12px; color: #9fb0a4; } /* Řádek s tečkou stavu (vlasimo_oh_dot) — tečka musí sedět na účaří textu. */ .vl-ftrm-contact__note--dot { display: inline-flex; align-items: center; gap: 6px; } /* --- Dva sloupce odkazů ---------------------------------------------------- */ .vl-ftrm-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #26332b; } .vl-ftrm-nav__col { display: flex; flex-direction: column; gap: 9px; } .vl-ftrm-nav__title { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6f8377; } .vl-ftrm-nav__item { font-size: 13px; color: #d5dfd8; } /* Odkazy nesou i `.vl-flink`, na který parts/footer.css cílí `.vl a.vl-flink { color: inherit }` a `:hover { color:#ffd21f }` (0,2,1). Inline styl obojí dřív přebíjel — mobilní patička hover nikdy neměla a světle zelené odkazy by po migraci na tmavém podkladu ztmavly na `inherit`. Dvojitá třída (0,3,1) / (0,4,1) to drží nezávisle na pořadí souborů. */ .vl a.vl-flink.vl-ftrm-nav__item, .vl a.vl-flink.vl-ftrm-nav__item:hover { color: #d5dfd8; } /* --- Loga dopravců a plateb (parts/footer-coop.php) ------------------------ */ .vl-ftrm-coop { margin-top: 18px; } /* --- Domény mutací + tiráž ------------------------------------------------- */ .vl-ftrm-dom { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #26332b; font-size: 12.5px; flex-wrap: wrap; } .vl-ftrm-dom__sep { color: #3a4a3f; } .vl-ftrm-copy { margin-top: 14px; font-size: 11.5px; color: #6f8377; } /* ==== footer.css ======================================================== */ /* =========================================================================== Patička (footer.php) — styly vytažené z markupu. Načítá se za vlasimo-base.css / vlasimo-ui.css (inc/assets.php, seznam VLASIMO_PART_CSS), takže responzivní vrstvy základu jdou přebít bez `!important`; `!important` je tu jen tam, kde se přebíjí něco, co ho má. Patičky jsou dvě: .vl-ftr-chk__* trust pás na pokladně a děkovačce (mimo vrstvy .vl-desktop/.vl-mobile, kreslí se ve všech šířkách) .vl-ftr__* plná patička uvnitř .vl-desktop (pod 768 px ji střídá parts/footer-mobile.php) a panel košíku (`.vl-ftr__cart-*`), který je fixed a musí zůstat mimo obě vrstvy — proto sedí v footer.php, i když s patičkou nesouvisí. Hodnoty jsou změřené computed styly (1440 / 1024 / 900 / 769 / 768 / 390 px), ne čísla z návrhu. Jeden rozdíl proti zápisu v base.css je záměrný: `justify-content: center` z mobilního pravidla trust pásu se sem NEPŘENESLO — deklarace neměla `!important` a inline `justify-content:space-between` ji přebíjelo, takže se nikdy neuplatnila. Po migraci by vyhrála a loga plateb by se na telefonu přesunula doprostřed. Migrace: tools/migrate/17-header-footer.py =========================================================================== */ /* =========================================================================== POKLADNÍ PATIČKA (trust pás) =========================================================================== */ .vl-ftr-chk { background: #f6f5ef; border-top: 1px solid #e3e0d4; } .vl-ftr-chk__wrap { max-width: 1440px; margin: 0 auto; padding: 18px 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12.5px; color: #8a887f; } .vl-ftr-chk__pays { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .vl-ftr-chk__pay { border: 1px solid #e3e0d4; background: #ffffff; border-radius: 7px; padding: 5px 9px; display: inline-flex; align-items: center; } .vl-ftr-chk__pay-img { height: 13px; width: auto; display: block; } /* Přesun z vlasimo-base.css. Boční 32 px pod 900 px drží `!important` — obecné `.vl-wrap` tam jinak stahuje na 20 px. */ @media (min-width: 769px) and (max-width: 1024px) { .vl-ftr-chk__wrap { max-width: 1024px !important; padding: 16px 32px !important; } } @media (max-width: 768px) { .vl-ftr-chk__wrap { padding: 12px 16px !important; flex-wrap: wrap; gap: 8px 14px; } } /* =========================================================================== PLNÁ PATIČKA =========================================================================== */ .vl-ftr { background: #16211c; } .vl-ftr__grid { max-width: 1440px; margin: 0 auto; padding: 56px 48px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; align-items: start; } /* Sloupec značky */ .vl-ftr__brand { display: flex; flex-direction: column; gap: 16px; } .vl-ftr__logo { height: 30px; width: auto; display: block; align-self: flex-start; } /* `.vl p { text-align: justify }` platí dál — do třídy se text-align schválně nepíše, jinak by se odstavec přerovnal. */ .vl-ftr__about { margin: 0; font-size: 14px; line-height: 1.65; color: #9fb0a4; max-width: 34ch; text-wrap: pretty; } .vl-ftr__domains { display: flex; align-items: center; gap: 14px; font-size: 13.5px; flex-wrap: wrap; } .vl-ftr__dot { color: #3a4a3f; } /* Odkazové sloupce */ .vl-ftr__col { display: flex; flex-direction: column; gap: 14px; } .vl-ftr__coltitle { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8fa396; } .vl-ftr__links { display: flex; flex-direction: column; gap: 11px; font-size: 14px; color: #c8d4cb; } /* Odkazy patičky (i mobilní vrstvy) — dřív