/** * Pixeler Shop Theme — základné štýly rámca a fallback obsahových šablón. * * Povrchy (archív, produkt, úvodka, účet, hlavička) majú vlastné CSS * zo site pluginu — tu je len to, čo potrebujú stránky, ktoré * (zatiaľ) nerieši ani Elementor, ani plugin: blog, obsahové stránky, 404. * Všetky tokeny --pc-* sú definované tu, na :root (jediné miesto). */ /* Defaultné tokeny na :root — dedia ich aj plochy, ktoré stoja mimo .pc-scope (filter drawer, sticky lišta; oboje position: fixed). Child téma prepíše tieto premenné a preladí tým celý web. */ :root { --pc-paper: 255 255 255; --pc-card: 255 255 255; --pc-ink: 10 31 51; --pc-accent: 17 104 155; --pc-accent-deep: 13 82 122; --pc-soft: 244 246 247; --pc-line: 224 230 237; --pc-muted: 84 98 115; --pc-secondary: 220 38 38; /* Hlbší stupeň sekundárnej: text na jej vlastnom tónovanom podklade (pás platnosti akcie). Základná má na 9 % tinte len 4,2:1, táto 5,6:1. */ --pc-secondary-deep: 185 28 28; /* Svetlejší stupeň akcentu — na tmavé plochy (topbar, tmavé pásy, odznaky). Parent ho používa len v hlavičke a tam ho aj definoval (`.px-header`), lenže child témy po ňom siahajú aj mimo nej — až doteraz musela každá z nich token na `:root` sama zakladat. Default patrí sem: child prepíše hodnotu, nezakláda premennú. */ --pc-accent-bright: 69 201 245; /* Fokusový prstenec — jedna farba pre celú tému. Kontrast potrebuje voči PODKLADU, na ktorom leží (WCAG 1.4.11), preto najtmavší stupeň palety, nie svetlý akcent: child s jantarovým `--pc-accent-bright` (libike #FFC02E, drogea #FBBC34) má na bielej 1,6:1 a prstenec z neho by nahradil natívny neviditeľným. Na tmavom podklade si povrch token prepíše (`--pc-focus: var(--pc-accent-bright)` a pod.) — mení sa hodnota, nie pravidlá. */ --pc-focus: var(--pc-accent-deep); /* Šírka obsahu — jedna hodnota pre hlavičku, pätičku, archív, detail, účet aj obsahové stránky. Doteraz bola zapísaná v ôsmich súboroch, takže child ju musel prebíjať zoznamom selektorov. */ --pc-container: 90rem; /* Zapustená plocha — na prvky, ktoré majú pôsobiť ako vybraté z podkladu: pás s omrvinkami a okrúhle tlačidlá v hlavičke. Sú to dve rovnaké plochy, tak nech majú jednu hodnotu; dovtedy jedna siahala po --pc-soft a druhá po --pc-line, teda po farbe určenej na linky. Hodnota leží medzi nimi, bližšie k --pc-soft: tmavšia (na úrovni --pc-line) robila z omrviniek ťažký pruh cez celú šírku. Odlíšenie od bielej stačí naznačiť — pri tlačidlách ho drží aj ich tvar. */ --pc-sunk: 238 242 246; /* Polomery — jedna stupnica pre celú tému. Nové pravidlá siahajú po nej, nie po konkrétnych hodnotách; child ju preladí jedným miestom. xs drobnosti (čipy, fokus rámik) sm náhľady, malé karty, vnorené boxy, kompaktné ovládače — karty, panely, polia (predvolený) lg veľké plochy (modálne okná, panely) xl hero a obrazové bloky pill tlačidlá a pilulky */ --pc-radius-xs: 0.35rem; --pc-radius-sm: 0.5rem; --pc-radius: 0.75rem; --pc-radius-lg: 1rem; --pc-radius-xl: 1.5rem; --pc-radius-pill: 9999px; /* Sémantické aliasy — pravidlá témy ich používajú dlhšie než stupnicu. Pole nie je tlačidlo: pilulka sa hodí na `Do košíka`, nie na textarea. */ --pc-radius-control: var(--pc-radius-pill); --pc-radius-field: var(--pc-radius); /* Dostupnosť je sémantika, nie brand — zákazník číta farbu skôr než text, takže ostáva zelená/oranžová/červená bez ohľadu na akcent témy (child s červeným brandom by inak vypísal „Skladom" červeno). Child ladí nanajvýš odtieň, nikdy význam. Každá má s bielou aspoň 4.5:1 (WCAG 1.4.3), takže znesie aj samotný text, nielen bodku. */ --pc-stock-in: 21 128 61; /* #15803D */ --pc-stock-order: 168 76 8; /* #A84C08 — na 8 % tinte 5,1:1; #B45309 dával 4,49 a axe ho zamietal */ --pc-stock-out: 185 28 28; /* #B91C1C */ /* Hlavička — ikony v okrúhlych tlačidlách a text tmavého topbaru. Doteraz ich zakladal `.px-header`; sú tu, aby ich child prepisoval na jednom mieste ako ostatné tokeny. */ --pc-sage: 137 160 184; /* #89A0B8 */ --pc-topbar-text: 135 148 163; /* #8794A3 */ /* Medzera mriežky produktov (archív, slidery); od 640 px 15 px nižšie. */ --pc-grid-gap: 0.75rem; /* Text na farebnom podklade. `--pc-on-accent` stojí na `--pc-accent` a `--pc-accent-deep` (tlačidlá, odznaky počtu, aktívna stránka) — child so svetlým akcentom prepne len túto hodnotu na tmavú namiesto stmavovania brandu. `--pc-on-secondary` to isté pre akciové odznaky. Text na tmavej `--pc-ink` ploche je `--pc-paper` (inverzia). */ --pc-on-accent: 255 255 255; --pc-on-secondary: 255 255 255; /* Stavové farby — hlásenia, chyby polí, stavy reklamácií. Sémantika, nie brand; child ladí nanajvýš odtieň. základná text na bielej (každá ≥ 4.5:1) a výplň ikon -tint svetlé pozadie hlásenia / stavu -line rám hlásenia -ink text na -tint `--pc-danger` má na vlastnej tinte len 4,4:1 — text na tinte je `--pc-danger-ink`. */ --pc-success: 4 120 87; /* #047857 — 5,5:1 */ --pc-success-tint: 236 253 245; /* #ECFDF5 */ --pc-success-line: 167 243 208; /* #A7F3D0 */ --pc-success-ink: 2 44 34; /* #022C22 */ --pc-danger: 220 38 38; /* #DC2626 — 4,8:1 */ --pc-danger-tint: 254 242 242; /* #FEF2F2 */ --pc-danger-line: 254 202 202; /* #FECACA */ --pc-danger-ink: 69 10 10; /* #450A0A */ --pc-warning: 180 83 9; /* #B45309 — 5,0:1, na tinte 4,8:1 */ --pc-warning-tint: 255 251 235; /* #FFFBEB */ --pc-info: 29 78 216; /* #1D4ED8 — 6,7:1 */ --pc-info-tint: 239 246 255; /* #EFF6FF */ /* Rám formulárového poľa — hranica, podľa ktorej človek pole spozná, potrebuje 3:1 voči podkladu (WCAG 1.4.11). `--pc-line` má 1,26:1 a ostáva na deliace čiary. #828E9C dáva 3,3:1 na bielej a 3,1:1 na `--pc-soft`; child s teplou paletou si odtieň doladí (drž 3:1). */ --pc-field-border: 130 142 156; /* Typografia — stupnica z hodnôt, ktoré téma reálne používa (0.875rem 106×, 0.8125rem 59×, 0.75rem 42×, 0.9375rem 40×). Nadpisy s clamp() ostávajú vlastné. */ --pc-fs-3xs: 0.6875rem; /* 11 px */ --pc-fs-2xs: 0.75rem; /* 12 px */ --pc-fs-xs: 0.8125rem; /* 13 px */ --pc-fs-sm: 0.875rem; /* 14 px */ --pc-fs-md: 0.9375rem; /* 15 px */ --pc-fs-base: 1rem; /* 16 px — aj minimum poľa na dotyku */ --pc-fs-lg: 1.125rem; /* 18 px */ --pc-fs-xl: 1.25rem; /* 20 px */ --pc-fs-2xl: 1.375rem; /* 22 px */ --pc-fs-3xl: 1.5rem; /* 24 px */ --pc-fs-4xl: 1.75rem; /* 28 px */ /* Rozostupy — číslo = počet štvrtín rem. Jemné medzikroky (0.375, 0.625, 0.875rem…) ostávajú mimo stupnice. */ --pc-space-1: 0.25rem; --pc-space-2: 0.5rem; --pc-space-3: 0.75rem; --pc-space-4: 1rem; --pc-space-5: 1.25rem; --pc-space-6: 1.5rem; --pc-space-7: 1.75rem; --pc-space-8: 2rem; --pc-space-10: 2.5rem; --pc-space-12: 3rem; --pc-space-16: 4rem; /* Tiene — tónované textovou farbou, nie čiernou. */ --pc-shadow-xs: 0 1px 3px rgb(var(--pc-ink) / 0.2); /* úchop posuvníka */ --pc-shadow-sm: 0 1px 4px rgb(var(--pc-ink) / 0.1); /* plávajúce ikonové tlačidlá */ --pc-shadow-md: 0 6px 16px -8px rgb(var(--pc-ink) / 0.18); /* hover malej karty */ --pc-shadow-lg: 0 10px 24px -14px rgb(var(--pc-ink) / 0.28); /* hover dlaždice a karty */ --pc-shadow-xl: 0 25px 50px -12px rgb(var(--pc-ink) / 0.2); /* vysúvací panel */ --pc-shadow-dropdown: 0 12px 30px -12px rgb(var(--pc-ink) / 0.3); /* rozbaľovací zoznam */ --pc-shadow-popover: 0 0.125rem 0.5rem rgb(var(--pc-ink) / 0.1), 0 1.5rem 2.5rem -0.5rem rgb(var(--pc-ink) / 0.28); /* mega menu */ /* Vrstvy (z-index) — jeden zoznam pre celý web. Lokálne 1–6 (vnútri karty, bannera) sem nepatria. dropdown mega menu (vnútri sticky hlavičky) sticky sticky lišta Do košíka header sticky hlavička (pás obmedzeného režimu ±1) overlay backdrop panelov hlavičky popover panel vyhľadávania a jeho výsledky drawer mobilné menu, mini-košík, filter toast skip link, hlásenia modal blokujúci dialóg */ --pc-z-dropdown: 10; --pc-z-sticky: 90; --pc-z-header: 990; --pc-z-overlay: 1000; --pc-z-popover: 1010; --pc-z-drawer: 1020; --pc-z-toast: 2000; --pc-z-modal: 10000; } @media (min-width: 640px) { :root { --pc-grid-gap: 15px; } } /* Tokeny sú len na :root — `.pc-scope`, `.px-header` ani `.pc-filters` ich neredeklarujú, takže child ich prepíše jedným miestom (`:root`). */ .pc-scope { color: rgb(var(--pc-ink)); } /* Scope rooty: pravidlá `.pc-scope *` (archive.css, header.css, …) pokrývajú len potomkov — samotný kontajner by zostal content-box, padding by ho rozšíril o 2×2rem nad 90rem a obsah by sa nezarovnal s hlavičkou. */ .pc-scope, .pc-container, .px-theme-content, .px-page-header__inner, .px-page-title__inner { box-sizing: border-box; } /* ========================================================================= ZÁKLAD ELEMENTOV — typografia bez tried Rovnaký princíp ako pri poliach nižšie: všetko v `:where()`, čiže so **špecificitou 0**. Ktorékoľvek pravidlo s triedou (`.px-page-title__heading`, `.px-theme-prose :where(h2)`, `.pc-single__title`…) toto prebije, takže sa tým nemení nič, čo je už nastavené — len prestáva byť holý text z pluginu vysádzaný prehliadačom. Veľkosti zodpovedajú tomu, čo téma používa (H1 ako `.px-theme-content h1`, H2/H3 ako prose v page.css), nech je prechod bezo skoku. ========================================================================= */ :where(h1, h2, h3, h4, h5, h6) { margin: 0 0 0.5em; font-weight: 700; line-height: 1.25; color: rgb(var(--pc-ink)); text-wrap: balance; } :where(h1) { font-size: var(--pc-fs-4xl); } :where(h2) { font-size: var(--pc-fs-2xl); } :where(h3) { font-size: var(--pc-fs-lg); } :where(h4) { font-size: var(--pc-fs-base); } :where(h5, h6) { font-size: var(--pc-fs-md); } /* Odstavce stohujeme nadol — horný okraj z UA štýlov sa sčítaval s dolným okrajom predchádzajúceho bloku a rytmus bol zakaždým iný. */ :where(p) { margin: 0 0 var(--pc-space-4); } :where(a) { color: rgb(var(--pc-accent-deep)); text-underline-offset: 0.2em; } :where(img) { max-width: 100%; height: auto; } :where(hr) { margin: var(--pc-space-8) 0; border: 0; border-top: 1px solid rgb(var(--pc-line)); } :where(table) { border-collapse: collapse; } /* Adresa (aj [px_seller] z px-shop-core) bez kurzívy prehliadača. */ :where(address) { font-style: normal; margin: 0 0 var(--pc-space-4); } /* ========================================================================= FORMULÁROVÉ POLIA — spoločný základ Aby sa každý nový formulár (aj ten, čo vykreslí plugin — waitlist, hľadanie, kontakt) nemusel štýlovať odznova. Doteraz mal vlastnú sadu pravidiel každý povrch zvlášť: účet, pokladňa, recenzie, px-wc-requests… Celé je to v `:where()`, čiže so **špecificitou 0**. Ktorékoľvek existujúce pravidlo povrchu (`.px-account form .form-row input`, `#review_form input`…) toto prebije bez `!important`, takže pridanie základu nemení nič, čo je už nastavené — len dopĺňa polia, ktoré doteraz kreslil prehliadač. Zámerne tu nie je `width: 100%` (rozbilo by polia v lištách) ani `appearance: none` na `select` (bez vlastnej šípky by ostal bez šípky). Povrch, ktorý chce jedno či druhé, si to povie sám. ========================================================================= */ :where( input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], select, textarea ) { box-sizing: border-box; max-width: 100%; padding: 0.65rem var(--pc-space-4); border: 1px solid rgb(var(--pc-field-border)); border-radius: var(--pc-radius-field); background: rgb(var(--pc-paper)); font-family: inherit; font-size: var(--pc-fs-md); line-height: 1.4; color: rgb(var(--pc-ink)); transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* Pseudotriedy sú vnútri `:where()` zámerne — mimo neho by rátali do špecificity (0,1,0) a prebili by tým element-level pravidlá pluginov. */ /* Jednotný fokus poľa: rám aj 1px prstenec vo farbe --pc-focus (spolu 2 px s kontrastom tokenu). Priehľadný outline ostáva pre režim vynútených farieb (Windows High Contrast), kde box-shadow zmizne. */ :where(input:focus-visible, select:focus-visible, textarea:focus-visible) { outline: 2px solid transparent; border-color: rgb(var(--pc-focus)); box-shadow: 0 0 0 1px rgb(var(--pc-focus)); } /* iOS Safari pri fokuse poľa s písmom pod 16 px stránku priblíži. Na dotyku a úzkom displeji preto aspoň --pc-fs-base. Špecificita 0 — povrch s vlastným font-size (pokladňa, účet, qty) toto prebije a musí ho zrušiť sám. */ @media (pointer: coarse), (max-width: 767.98px) { :where( input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], select, textarea ) { font-size: max(var(--pc-fs-base), 1em); } } :where(textarea) { min-height: 7rem; resize: vertical; } :where(input, select, textarea)::placeholder { color: rgb(var(--pc-muted)); opacity: 1; } :where(input:disabled, select:disabled, textarea:disabled) { background: rgb(var(--pc-soft)); color: rgb(var(--pc-muted)); cursor: not-allowed; } :where(input[type="checkbox"], input[type="radio"]) { accent-color: rgb(var(--pc-accent)); } /* Odosielacie tlačidlo — pilulka v akcente ako `.pc-btn--primary`. Zámerne len `[type="submit"]`: bežné `