/* ========================================================================== ULTRA PEPTIDY — child téma Storefrontu -------------------------------------------------------------------------- Tokeny a holografické primitívy sú prevzaté 1:1 zo statického webu (site/assets/css/ultrapeptidy.css). Za nimi nasledujú prepisy Storefrontu. POZNÁMKA K SELEKTOROM: Storefront má vlastnú tmavú/svetlú paletu z Customizeru a časť farieb sadzuje inline do . Preto tu miestami používam !important — nie z lenivosti, ale preto, že inline štýl rodiča inak vyhrá. Po nasadení na živý web to treba prejsť v inšpektore a nadbytočné !important odstrániť. ========================================================================== */ @property --holo-angle { syntax: ''; initial-value: 0deg; inherits: false; } :root { color-scheme: dark; --up-black: #000; --up-ink: #0A0A0A; --up-ink-2: #101014; --up-ink-3: #16161C; --up-hairline: #24242E; --up-purple-deep: #6B2D9B; --up-purple: #8B5CF6; --up-purple-lt: #A855F7; --up-purple-glow: #C084FC; --up-cyan: #22D3EE; --up-sky: #38BDF8; --up-magenta: #E879F9; --up-silver: #E2E8F0; --up-pink: #F472B6; --up-chrome: linear-gradient(180deg, #F8FAFC, #94A3B8 48%, #E2E8F0); --up-text: #F1F3F9; --up-text-dim: #A9AFC0; --up-text-mute: #6E7488; --up-ok: #34D399; --up-warn: #FBBF24; --up-err: #FB7185; --up-price: #FFF; --up-price-tier: #22D3EE; --up-holo: linear-gradient(100deg, #E2E8F0 0%, #A855F7 18%, #22D3EE 36%, #E879F9 54%, #8B5CF6 72%, #38BDF8 86%, #E2E8F0 100%); --up-purple-fade: radial-gradient(120% 80% at 50% 0%, rgba(139,92,246,.22) 0%, rgba(107,45,155,.08) 45%, transparent 72%); --up-brush: linear-gradient(96deg, #E2E8F0, #A855F7 38%, #22D3EE 70%, #E2E8F0); --up-shadow-card: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -18px rgba(0,0,0,.9); --up-glow-purple: 0 0 0 1px rgba(139,92,246,.35), 0 8px 32px -8px rgba(139,92,246,.45); --up-glow-cyan: 0 0 24px -6px rgba(34,211,238,.5); --up-r-sm: 8px; --up-r-md: 14px; --up-r-lg: 22px; --up-r-pill: 999px; --up-ease: cubic-bezier(.2,.7,.2,1); /* Rytmus a typografia sú prevzaté 1:1 zo statického webu. Keď sa rozídu, prenesené komponenty dostanú iné medzery aj stupne písma. */ --up-sp-1: 4px; --up-sp-2: 8px; --up-sp-3: 12px; --up-sp-4: 16px; --up-sp-5: 24px; --up-sp-6: 32px; --up-sp-7: 48px; --up-sp-8: 72px; --up-maxw: 1240px; --up-fs-hero: clamp(2.6rem, 7vw, 5.75rem); --up-fs-h1: clamp(1.9rem, 4.5vw, 3.25rem); --up-fs-h2: clamp(1.45rem, 3vw, 2.2rem); --up-fs-h3: clamp(1.1rem, 2vw, 1.45rem); --up-fs-body: clamp(.95rem, 1.1vw, 1.0625rem); --up-fs-sm: .875rem; --up-fs-xs: .75rem; --up-font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --up-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --up-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace; --up-font-label: 'Arial Black', 'Segoe UI Black', 'Impact', 'Anton', 'Oswald', sans-serif; } /* ── Základ ─────────────────────────────────────────────────────────────── */ body, body.woocommerce, body.woocommerce-page { background: var(--up-black) !important; color: var(--up-text) !important; font-family: var(--up-font-body); overflow-x: hidden; } /* Molekulárne pozadie je skutočný prvok (SVG sieť z functions.php), nie iba gradient v ::before — inak by uzly nemali čo pulzovať. Sekcia „Molekulárne pozadie“ nižšie je prevzatá zo statického webu 1:1. */ #page, .site { position: relative; z-index: 1; } /* Filmové zrno cez celú stránku. Na statickom webe je to body::after. */ body::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Prehliadač skrýva `[hidden]` pravidlom zo svojho vlastného štýlu a čokoľvek odtiaľto ho prehrá. `.up-meta li` má `display: inline-flex`, takže sa čip skryť odmietol: pri gramáži bez čistoty ostalo v riadku visieť samotné slovo „Čistota“ bez hodnoty. Jedno pravidlo pre všetkých je spoľahlivejšie než záplaty na jednotlivé triedy — rovnako to rieši statický web. */ [hidden] { display: none !important; } a { color: var(--up-purple-lt); } a:hover { color: var(--up-purple-glow); } h1, h2, h3, h4, .site-title, .woocommerce-loop-product__title, .product_title { font-family: var(--up-font-display) !important; color: var(--up-text) !important; } :focus-visible { outline: 2px solid var(--up-cyan); outline-offset: 3px; } /* ── Hlavička a pätička ─────────────────────────────────────────────────── */ .site-header, .storefront-primary-navigation, .main-navigation ul.menu ul.sub-menu { background: rgba(8,8,10,.86) !important; border-bottom: 1px solid var(--up-hairline); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); } .site-header { position: sticky; top: 0; z-index: 60; } /* 1px spektrálna linka pod hlavičkou — jeden z troch výskytov spektra */ .site-header::after { content: ''; display: block; height: 1px; background: var(--up-holo); opacity: .5; } .main-navigation ul.menu > li > a, .site-header a { color: var(--up-text-dim) !important; } .main-navigation ul.menu > li > a:hover { color: var(--up-text) !important; } .site-footer { background: linear-gradient(180deg, rgba(10,10,12,.6), #000) !important; border-top: 1px solid var(--up-hairline); color: var(--up-text-mute) !important; } .site-footer a { color: var(--up-text-dim) !important; } .site-footer a:hover { color: var(--up-cyan) !important; } /* povinný RUO pás z functions.php */ .up-ruo { border-top: 1px solid var(--up-hairline); background: rgba(16,16,20,.6); padding: 20px 0; } .up-ruo p { margin: 0; font-size: .75rem; line-height: 1.75; color: var(--up-text-mute); max-width: 92ch; } .up-ruo strong { color: var(--up-text-dim); } /* ── Tlačidlá ───────────────────────────────────────────────────────────── */ .button, button.button, input.button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--up-holo) !important; background-size: 220% 100% !important; color: #08060D !important; border: 0 !important; border-radius: var(--up-r-pill) !important; font: 700 .9375rem/1 var(--up-font-display) !important; letter-spacing: .06em; text-transform: uppercase; padding: 14px 28px !important; box-shadow: 0 6px 24px -8px rgba(139,92,246,.7); transition: background-position .6s var(--up-ease), transform .18s var(--up-ease); } .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover { background-position: 100% 0 !important; transform: translateY(-2px); color: #08060D !important; } /* ── Produktová mriežka ─────────────────────────────────────────────────── */ .woocommerce ul.products { display: grid !important; gap: var(--up-sp-3); /* Prevzaté zo statického webu (.prod-grid) — musí to byť to isté. `auto-fill`, nie `auto-fit`: auto-fit zlúči prázdne stĺpce a kategóriu s dvoma produktmi roztiahne cez celú šírku, takže karty majú v každej sekcii inú veľkosť. Minimum 210 px, nie 150 — pri 150 sa do riadku zmestí šesť kariet namiesto piatich. */ grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); margin: 0 0 32px; } .woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; } .woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; padding: 0; overflow: hidden; position: relative; border: 1px solid transparent; border-radius: var(--up-r-lg); background: linear-gradient(var(--up-ink-2), var(--up-ink-2)) padding-box, conic-gradient(from var(--holo-angle), #22D3EE, #8B5CF6, #E879F9, #E2E8F0, #38BDF8, #22D3EE) border-box; transition: box-shadow .35s var(--up-ease), transform .35s var(--up-ease); } .woocommerce ul.products li.product:hover { animation: up-holo-rotate 4s linear infinite; box-shadow: 0 0 0 1px rgba(139,92,246,.35), 0 8px 32px -8px rgba(139,92,246,.45); transform: translateY(-3px); } @keyframes up-holo-rotate { to { --holo-angle: 360deg; } } .woocommerce ul.products li.product a img { margin: 0 !important; aspect-ratio: 4 / 5; object-fit: contain; padding: 14px; background: radial-gradient(64% 52% at 50% 44%, rgba(56,189,248,.18), transparent 70%), linear-gradient(180deg, #0E0E14, #060608); border-bottom: 1px solid var(--up-hairline); box-shadow: none !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 10px 10px 0 !important; font-size: .9375rem !important; font-weight: 700; letter-spacing: -.01em; } .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .up-tiers__loop { padding-inline: 10px; } .woocommerce ul.products li.product .price { color: var(--up-price) !important; font: 500 1.0625rem/1.3 var(--up-font-mono) !important; font-variant-numeric: tabular-nums; } .woocommerce ul.products li.product .price del { color: var(--up-text-mute) !important; } .woocommerce ul.products li.product .button { display: block; margin: 10px !important; padding: 9px 14px !important; font-size: .75rem !important; text-align: center; } .woocommerce ul.products li.product .onsale { background: var(--up-purple) !important; color: #fff !important; border-radius: var(--up-r-pill); min-height: 0; line-height: 1; padding: 6px 12px; font: 700 .6875rem/1 var(--up-font-mono); } /* ── Detail produktu ────────────────────────────────────────────────────── */ .woocommerce div.product .product_title { letter-spacing: -.02em; } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--up-price) !important; font: 500 1.75rem/1.2 var(--up-font-mono) !important; font-variant-numeric: tabular-nums; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--up-text-dim); max-width: 46ch; } .woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--up-hairline); padding: 0; margin: 0 0 24px; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0; margin: 0 4px -1px 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--up-purple) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--up-text-mute) !important; font: 600 .875rem/1 var(--up-font-body); padding: 11px 14px; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--up-text) !important; } .woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.25rem; } .woocommerce div.product .woocommerce-tabs .panel h3 { margin: 24px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--up-hairline); font: 500 .6875rem/1.4 var(--up-font-mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--up-text-mute) !important; } .woocommerce div.product .woocommerce-tabs .panel ul { color: var(--up-text-dim); } .woocommerce div.product .woocommerce-tabs .panel li::marker { color: var(--up-purple-lt); } /* šarža a čistota z functions.php */ .up-meta { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .up-meta li { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px; border: 1px solid var(--up-hairline); border-radius: var(--up-r-pill); background: var(--up-ink-3); font: 400 .75rem/1.5 var(--up-font-mono); } .up-meta span { color: var(--up-text-mute); } .up-meta strong { color: var(--up-text-dim); font-weight: 500; } /* ── Výber gramáže (varianty) ───────────────────────────────────────────── */ .woocommerce div.product form.cart .variations { margin-bottom: 16px; border: 0; } .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { border: 0; padding: 0 0 8px; } .woocommerce div.product form.cart .variations label { font: 500 .75rem/1 var(--up-font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--up-text-mute) !important; } .woocommerce div.product form.cart .variations select { width: 100%; padding: 12px 40px 12px 14px; border: 1px solid var(--up-hairline); border-radius: var(--up-r-pill); color: var(--up-text); font: 500 .9375rem/1 var(--up-font-mono); font-variant-numeric: tabular-nums; /* Bez `appearance: none` si šípku aj jej podklad kreslí systém — na tmavom poli tak ostal svetlý štvorec vpravo. Šípka je vložená ako data URI, nie ako ``: pravidlo musí fungovať aj tam, kde ikonový sprite témy na stránke nie je. */ appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B93A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px, var(--up-ink-2); /* Rozbalený zoznam kreslí prehliadač — bez toho je biely. */ color-scheme: dark; } .woocommerce div.product form.cart .variations select:focus-visible { border-color: var(--up-purple); } .woocommerce div.product .woocommerce-variation-price span.price { font-size: 1.75rem !important; } /* ── Množstvo ───────────────────────────────────────────────────────────── */ .woocommerce .quantity .qty { height: 48px; width: 66px; border: 1px solid var(--up-hairline); border-radius: var(--up-r-pill); background: var(--up-ink-2); color: var(--up-text); font: 500 1rem/1 var(--up-font-mono); text-align: center; } /* ── Formuláre, košík, checkout ─────────────────────────────────────────── */ input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=search], textarea, select { background: var(--up-ink-2) !important; border: 1px solid var(--up-hairline) !important; border-radius: var(--up-r-sm) !important; color: var(--up-text) !important; box-shadow: none !important; } input::placeholder, textarea::placeholder { color: var(--up-text-mute); } .woocommerce table.shop_table, .woocommerce table.shop_table td, .woocommerce table.shop_table th, .woocommerce-cart .cart-collaterals .cart_totals table { background: var(--up-ink-2) !important; border-color: var(--up-hairline) !important; color: var(--up-text) !important; } .woocommerce table.shop_table th { color: var(--up-text-mute) !important; } .woocommerce-checkout #payment, .woocommerce-checkout #payment ul.payment_methods, .woocommerce-checkout #payment div.form-row { background: var(--up-ink-2) !important; border-color: var(--up-hairline) !important; } .woocommerce-info, .woocommerce-message, .woocommerce-error { background: var(--up-ink-2) !important; border-top-color: var(--up-purple) !important; color: var(--up-text) !important; } .woocommerce-info::before, .woocommerce-message::before { color: var(--up-purple-lt) !important; } /* V checkoute nikdy nič holografické na text — musí byť maximálne čitateľné. */ .woocommerce-checkout h1, .woocommerce-checkout h2, .woocommerce-checkout h3, .woocommerce-cart h1, .woocommerce-cart h2 { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--up-text) !important; } /* ── Bez bočného panela ─────────────────────────────────────────────────── */ .up-no-sidebar #primary { width: 100% !important; float: none !important; } .up-no-sidebar #secondary { display: none !important; } /* ── Redukcia pohybu ────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================================== PRENOS ZO STATICKÉHO WEBU -------------------------------------------------------------------------- Všetko nižšie je prevzaté zo site/assets/css/ultrapeptidy.css. Kde to bolo možné, je to skopírované 1:1 aj s triedami — vďaka tomu sa dá oprava spraviť na jednom mieste a preniesť na druhé bez prekladu selektorov. Prepísané sú len miesta, kde markup diktuje WooCommerce. ========================================================================== */ /* ── Molekulárne pozadie ───────────────────────────────────────────────── */ .molecular-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--up-purple-fade), radial-gradient(60% 45% at 88% 12%, rgba(56,189,248,.14), transparent 70%), radial-gradient(50% 40% at 8% 78%, rgba(168,85,247,.12), transparent 70%), var(--up-black); } .molecular-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; transform-origin: 50% 40%; will-change: transform; animation: mb-drift 26s ease-in-out infinite alternate; } @keyframes mb-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-46px, 30px, 0) scale(1.07); } } .mb-net { fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: .38; } .mb-nodes { stroke: none; fill: currentColor; fill-opacity: .62; } /* Zhluk zhasne, v tme prehodí farbu a vráti sa inak sfarbený. Celý farebný prechod leží v okne s opacity 0, takže preblikávanie nie je nikdy vidieť. */ .mb-cluster { color: var(--mb-c1); animation: mb-cycle var(--mb-dur) ease-in-out var(--mb-delay) infinite; } @keyframes mb-cycle { 0%, 100% { opacity: 0; color: var(--mb-c1); } 6%, 19% { opacity: 1; color: var(--mb-c1); } 24% { opacity: 0; color: var(--mb-c1); } 26% { opacity: 0; color: var(--mb-c2); } 31%, 44% { opacity: 1; color: var(--mb-c2); } 49% { opacity: 0; color: var(--mb-c2); } 51% { opacity: 0; color: var(--mb-c3); } 56%, 69% { opacity: 1; color: var(--mb-c3); } 74% { opacity: 0; color: var(--mb-c3); } 76% { opacity: 0; color: var(--mb-c4); } 81%, 94% { opacity: 1; color: var(--mb-c4); } 99% { opacity: 0; color: var(--mb-c4); } } .mb-1 { --mb-dur: 38s; --mb-delay: 0s; --mb-c1: var(--up-sky); --mb-c2: var(--up-purple-lt); --mb-c3: var(--up-cyan); --mb-c4: var(--up-magenta); } .mb-2 { --mb-dur: 46s; --mb-delay: -13s; --mb-c1: var(--up-purple-lt); --mb-c2: var(--up-magenta); --mb-c3: var(--up-sky); --mb-c4: var(--up-cyan); } .mb-3 { --mb-dur: 52s; --mb-delay: -27s; --mb-c1: var(--up-cyan); --mb-c2: var(--up-sky); --mb-c3: var(--up-purple-glow);--mb-c4: var(--up-purple-lt); } .mb-4 { --mb-dur: 43s; --mb-delay: -7s; --mb-c1: var(--up-magenta); --mb-c2: var(--up-cyan); --mb-c3: var(--up-purple-lt); --mb-c4: var(--up-sky); } .mb-5 { --mb-dur: 57s; --mb-delay: -34s; --mb-c1: var(--up-purple-glow);--mb-c2: var(--up-cyan); --mb-c3: var(--up-pink); --mb-c4: var(--up-sky); } .mb-6 { --mb-dur: 49s; --mb-delay: -19s; --mb-c1: var(--up-pink); --mb-c2: var(--up-purple-lt); --mb-c3: var(--up-sky); --mb-c4: var(--up-cyan); } /* ── Holografické primitívy ────────────────────────────────────────────── */ /* Holo text — LEN pre ≥32 px a ≥700 weight (WCAG large text 3:1). Nikdy na cene, popise ani čomkoľvek v pokladni. */ .holo-text { background: var(--up-holo); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: holo-shift 9s linear infinite; } @keyframes holo-shift { to { background-position: 260% 0; } } @supports not ((background-clip: text) or (-webkit-background-clip: text)) { .holo-text { color: var(--up-purple-lt); -webkit-text-fill-color: currentColor; } } .holo-border { position: relative; border: 1px solid transparent; border-radius: var(--up-r-lg); background: linear-gradient(var(--up-ink-2), var(--up-ink-2)) padding-box, conic-gradient(from var(--holo-angle), #22D3EE, #8B5CF6, #E879F9, #E2E8F0, #38BDF8, #22D3EE) border-box; transition: box-shadow .35s var(--up-ease), transform .35s var(--up-ease); } .holo-border:hover, .holo-border:focus-within { animation: holo-rotate 4s linear infinite; box-shadow: var(--up-glow-purple); } @keyframes holo-rotate { to { --holo-angle: 360deg; } } @supports not (background: conic-gradient(from 0deg, red, blue)) { .holo-border { border-color: var(--up-purple-deep); background: var(--up-ink-2); } } /* Foil sweep — jediné, čo prechádza cez kartu pri hoveri. */ .foil { position: relative; overflow: hidden; isolation: isolate; } .foil::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 38%, rgba(226,232,240,.10) 45%, rgba(226,232,240,.55) 50%, rgba(34,211,238,.35) 54%, transparent 62%); mix-blend-mode: color-dodge; transform: translateX(-120%); transition: transform .85s var(--up-ease); pointer-events: none; z-index: 2; } .foil:hover::after, .foil:focus-within::after { transform: translateX(120%); } /* Sheen za kurzorom — premenné --mx/--my nastavuje theme.js. Jediné miesto, kde JavaScript ovplyvňuje vzhľad. */ .sheen { --mx: 50%; --my: 0%; position: relative; } .sheen::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(220px circle at var(--mx) var(--my), rgba(168,85,247,.20), rgba(34,211,238,.10) 40%, transparent 68%); opacity: 0; transition: opacity .3s var(--up-ease); pointer-events: none; z-index: 1; } .sheen:hover::before { opacity: 1; } .glass { position: relative; background: linear-gradient(160deg, rgba(22,22,28,.72), rgba(10,10,10,.86)); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(226,232,240,.08); border-radius: var(--up-r-lg); box-shadow: var(--up-shadow-card); } .brush-label { display: inline-block; padding: 7px 22px 9px; font: italic 700 clamp(.9rem, 1.4vw, 1.0625rem)/1 var(--up-font-display); text-transform: uppercase; letter-spacing: .07em; color: #0B0714; background: var(--up-brush); clip-path: polygon(1.5% 12%, 6% 4%, 22% 9%, 44% 2%, 68% 8%, 86% 3%, 98% 14%, 99% 60%, 96% 92%, 74% 97%, 52% 91%, 28% 98%, 8% 93%, 2% 74%); } /* ── Fľaštička ───────────────────────────────────────────────────────────── vial.jpg je fotka s vyprázdneným čiernym pásom, vial-mask.png z nej vyrezáva siluetu. Percentá pásu sú odmerané priamo z fotky — ak sa fotka prekreslí, treba ich prepočítať, inak text ujde mimo etiketu. Markup skladá up_vial_markup() vo functions.php. */ .vial { --vial-w: 78px; position: relative; display: block; width: var(--vial-w); margin-inline: auto; filter: drop-shadow(0 20px 28px rgba(0,0,0,.8)); } .vial__photo { display: block; width: 100%; height: auto; -webkit-mask-image: var(--up-vial-mask); mask-image: var(--up-vial-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; box-shadow: none !important; border-radius: 0 !important; } .vial__name { position: absolute; left: 0; top: 51.83%; width: 90.85%; height: 12.99%; display: flex; align-items: center; justify-content: center; padding-inline: 4%; text-align: center; font: 900 max(9px, calc(var(--vial-w) * .155))/1.02 var(--up-font-label); letter-spacing: .005em; text-transform: uppercase; color: #F2F5FD; text-shadow: 0 1px 3px rgba(0,0,0,.85); transform: skewX(-6deg); overflow: hidden; pointer-events: none; } /* Dlhé názvy dostanú menší stupeň, inak by ich na úzkej etikete orezalo. Triedu priraďuje up_vial_markup() podľa počtu znakov. */ .vial__name--sm { font-size: max(9px, calc(var(--vial-w) * .105)); } .vial__name--xs { font-size: max(8px, calc(var(--vial-w) * .085)); letter-spacing: 0; } .vial--lg { --vial-w: clamp(110px, 18vw, 170px); } /* Bac Water nie je peptid a nemá vyzerať ako peptid — tá istá fotka posunutá do oceľovo-tyrkysovej. Priraďuje ju meta pole _up_vial, ktoré plní stĺpec `vial` v data/produkty.csv. */ .vial--voda .vial__photo { filter: saturate(.32) hue-rotate(-28deg) brightness(1.1); } .up-vial-wrap { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; background: radial-gradient(64% 52% at 50% 44%, rgba(56,189,248,.18), transparent 70%), linear-gradient(180deg, #0E0E14, #060608); overflow: hidden; } @supports (container-type: inline-size) { .up-vial-wrap { container-type: inline-size; } .woocommerce ul.products li.product .up-vial-wrap .vial { --vial-w: 44cqi; } } /* ── Karta v katalógu: dotiahnutie na statický web ─────────────────────── */ .woocommerce ul.products li.product { background: var(--up-ink-2); } .woocommerce ul.products li.product .up-vial-wrap { border-bottom: 1px solid var(--up-hairline); } /* ── Jednotná karta ──────────────────────────────────────────────────────── Karta bola obyčajný blok, takže sa jej obsah skladal zhora nadol a spodok „plával“. V jednom riadku tak tlačidlo KPV (bez množstevnej ceny) sedelo o 52 px vyššie než tlačidlá susedov a katalóg pôsobil rozsypane. Karta je preto zvislý flex a cenník má `margin-top: auto` — cenník aj tlačidlo sú prilepené k spodnej hrane a v riadku sedia na jednej linke bez ohľadu na to, koľko má produkt cenových úrovní. `min-height` cenníka drží miesto pre dve úrovne aj tam, kde je len jedna. Bez toho by karta bez množstevnej ceny bola o riadok nižšia než ostatné — a keďže každá kategória je vlastná mriežka, líšili sa aj celé sekcie (463 / 515 / 538 px). Hodnota je výška dvoch riadkov `.price-row`. */ .woocommerce ul.products li.product { display: flex; flex-direction: column; } .woocommerce ul.products li.product .price-tiers { margin-top: auto; min-height: 5.25rem; } /* Čip a stav skladu držia jeden riadok. Dlhá gramáž („10 · 30 · 40 mg“) sa vedľa „Na sklade“ zalomila a tie karty boli o 23 px vyššie než zvyšok; pri nedostatku miesta sa radšej skráti čip, než by narástla karta. */ .woocommerce ul.products li.product .up-card__meta { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 8px 10px 0; /* Výška riadka čipu aj tam, kde produkt gramáž nemá (5-Amino-1MQ) — inak je práve tá jedna karta o 2 px nižšia než zvyšok katalógu. */ min-height: 26px; } .woocommerce ul.products li.product .up-card__meta .chip { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .woocommerce ul.products li.product .up-card__meta .stock-pill { margin: 0; flex: none; white-space: nowrap; } .chip { /* gap, nie medzera v markupe: flex kontajner zahodí textové uzly, ktoré sú len biele znaky, a zo „Šarža BW-2408“ by bolo „ŠaržaBW-2408“. */ display: inline-flex; align-items: center; gap: .35em; padding: 3px 9px; border-radius: var(--up-r-pill); border: 1px solid var(--up-hairline); background: var(--up-ink-3); font: 500 var(--up-fs-xs)/1.5 var(--up-font-mono); letter-spacing: .06em; color: var(--up-text-dim); } .woocommerce ul.products li.product .chip { margin: 8px 10px 0; } /* Stav skladu — bodka plus slovo vedľa nej, nie iba farba: čitateľné aj pri poruche farbocitu. */ .stock-pill { display: inline-flex; align-items: center; gap: 7px; font: 500 var(--up-fs-xs)/1 var(--up-font-body); letter-spacing: .06em; color: var(--up-text-dim); } .stock-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--up-ok); box-shadow: 0 0 8px var(--up-ok); } .stock-pill--low::before { background: var(--up-warn); box-shadow: 0 0 8px var(--up-warn); } .stock-pill--out::before { background: var(--up-err); box-shadow: none; } .woocommerce ul.products li.product .stock-pill { margin: 6px 10px 0; } /* ── Cenová tabuľka 1 KS / 3+ KS — presne ako v cenníku ────────────────── */ .price-tiers { display: grid; gap: 2px; font-family: var(--up-font-mono); font-variant-numeric: tabular-nums; } .woocommerce ul.products li.product .price-tiers { margin: 10px 10px 0; } .price-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--up-sp-3); padding-block: 5px; } .price-row + .price-row { border-top: 1px dashed var(--up-hairline); } .price-row__label { font-size: var(--up-fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--up-text-mute); } .price-row__label small { display: block; font-size: .625rem; letter-spacing: .12em; color: #565B6D; } .price-row__value { font: 500 1.1875rem/1 var(--up-font-mono); color: var(--up-price); } .price-row--tier .price-row__value { color: var(--up-price-tier); } .price-row__from { font-size: var(--up-fs-xs); color: var(--up-text-mute); } /* ── Látka bez overenej schémy (IGF-1 LR3) ───────────────────────────────── Abstraktný znak v tom istom ťahu a prechode ako schémy — v mriežke tak nevytŕča. Predtým tu bola fotka fľaštičky: jediná fotografia medzi dvadsiatimi dvoma čiarovými kresbami. */ /* Dvojtriedny selektor zámerne: `.mol` nižšie v súbore nastavuje `display: block` a pri rovnakej špecifickosti by vyhralo ono — znak a názov by sa potom neskladali pod seba, ale plávali každý inde. */ .mol.nostruct { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; text-align: center; } .nostruct__mark { width: 42%; max-width: 120px; aspect-ratio: 1; } .nostruct__name { font: 600 .9375rem/1.2 var(--up-font-mono); color: var(--up-text-dim); letter-spacing: .02em; } .nostruct__note { font: 500 .625rem/1.3 var(--up-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--up-text-mute); max-width: 22ch; } /* Na karte je poznámka šum — tam stačí znak a názov. */ .woocommerce ul.products li.product .nostruct__note { display: none; } .woocommerce div.product .nostruct__mark { width: 34%; } /* ── Produktová stránka: fľaštička namiesto galérie ────────────────────── */ .woocommerce div.product .up-vial-single { border: 1px solid var(--up-hairline); border-radius: var(--up-r-lg); aspect-ratio: 1 / 1; } .woocommerce div.product .up-vial-single .vial { --vial-w: clamp(110px, 18vw, 170px); } /* ── Produktová stránka: dva stĺpce ──────────────────────────────────────── Storefront skladá stránku produktu plávajúcimi blokmi a šírku 48 % dáva selektoru `.images`. Téma však galériu nahrádza vlastnou `.up-vial-single`, na ktorú to pravidlo nesadne — schéma sa preto roztiahla na celú šírku (1064 px) a zhrnutie s cenou a košíkom spadlo pod ňu. Zákazník musel k tlačidlu odrolovať cez celú obrazovku. Namiesto doplnenia ďalšieho plávania je celá stránka mriežka: predvidene idú všetky bloky cez celú šírku a do dvoch stĺpcov sa vyberú len schéma a zhrnutie. Čokoľvek, čo do stránky pribudne (upozornenie, odznak zľavy), tak ostane celou šírkou a nerozhodí rozloženie. */ @media (min-width: 768px) { .woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--up-sp-6); row-gap: var(--up-sp-5); align-items: start; } .woocommerce div.product > * { grid-column: 1 / -1; min-width: 0; } /* Riadok sa nefixuje číslom — schéma a zhrnutie sú v HTML hneď za sebou, takže ich automatické ukladanie dá do jedného riadka samo. Napevno zapísaný `grid-row` by sa rozpadol, len čo by pred ne niečo pribudlo. */ .woocommerce div.product > .up-vial-single { grid-column: 1; } .woocommerce div.product > .summary { grid-column: 2; width: auto !important; float: none !important; margin: 0 !important; } /* Plávanie zo Storefrontu by v mriežke ostalo a posunulo by obsah. */ .woocommerce div.product::before, .woocommerce div.product::after { content: none !important; } } /* Cenník na stránke produktu. Storefront farbí bunky tabuliek natvrdo (`#f8f8f8` na `th`, `#fdfdfd` na `td`), takže z cenovej tabuľky boli biele pásy — jediné svetlé miesto na čiernej stránke. Rieši sa vyšším selektorom, nie `!important`. */ .woocommerce div.product .up-tiers, .woocommerce div.product table.up-tiers { width: 100%; border-collapse: collapse; background: transparent; font-family: var(--up-font-mono); font-variant-numeric: tabular-nums; } .woocommerce div.product table.up-tiers th, .woocommerce div.product table.up-tiers td { background: transparent; border: 0; border-top: 1px dashed var(--up-hairline); padding: 7px 0; color: var(--up-text-dim); } .woocommerce div.product table.up-tiers tr:first-child th, .woocommerce div.product table.up-tiers tr:first-child td { border-top: 0; } .woocommerce div.product table.up-tiers th { text-align: left; font: 500 var(--up-fs-xs)/1.4 var(--up-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--up-text-mute); } .woocommerce div.product table.up-tiers td { text-align: right; font: 500 1.0625rem/1.3 var(--up-font-mono); color: var(--up-price-tier); } /* ── Sticky CTA na mobile — najväčšia conversion výhra na malom displeji ── */ .up-sticky-cta { display: none; } @media (max-width: 640px) { .up-sticky-cta { position: fixed; inset: auto 0 0 0; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(8,8,10,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--up-hairline); } .up-sticky-cta__price { font: 500 1.0625rem/1 var(--up-font-mono); font-variant-numeric: tabular-nums; color: var(--up-price); white-space: nowrap; } .up-sticky-cta .button { flex: 1; margin: 0 !important; padding: 12px 18px !important; } .single-product .site-footer { padding-bottom: 84px; } } /* ── Tlač: cenník aj objednávka musia byť vytlačiteľné ────────────────── */ @media print { .molecular-bg, body::after, .up-sticky-cta, .site-header, .site-footer, .storefront-breadcrumb { display: none !important; } body { background: #fff !important; color: #000 !important; } .holo-text { -webkit-text-fill-color: #000 !important; color: #000 !important; background: none !important; } .woocommerce table.shop_table, .woocommerce table.shop_table td, .woocommerce table.shop_table th { background: #fff !important; color: #000 !important; border-color: #999 !important; } } /* Vizuálne skryté, ale čítateľné odčítavačom — kotva sticky lišty. */ .up-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ========================================================================== Hlavička — prenesená zo statického webu -------------------------------------------------------------------------- Storefront vypisuje obsah hlavičky do
, takže sticky pás a rozmazané pozadie sú na ňom (vyššie v tomto súbore) a tu je len vnútro. Triedy sú tie isté ako na statickom webe. ========================================================================== */ .site-header { padding: 0 !important; margin: 0 !important; border-bottom: 1px solid var(--up-hairline); } .site-header .col-full { max-width: none; padding: 0; margin: 0; } .up-header__inner { display: flex; align-items: center; gap: var(--up-sp-5); height: 64px; } .up-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .up-logo__text { font: 700 .95rem/1 var(--up-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--up-text) !important; } .up-logo__text small { display: block; font: 500 .5rem/1.4 var(--up-font-mono); letter-spacing: .38em; color: var(--up-text-mute); } /* Cez značku prechádza ten istý holografický gradient a rovnakým tempom ako sa hýbe sieť na pozadí (26 s). mix-blend-mode:hue prenesie na logo iba odtieň — jas a brushová textúra fotky zostanú nedotknuté. isolation:isolate drží miešanie vnútri loga, nech nefarbí stránku. */ .holo-logo { position: relative; display: block; isolation: isolate; flex-shrink: 0; line-height: 0; } .holo-logo > img { display: block; width: 100%; height: auto; } .holo-logo--mark { width: 34px; } @supports ((-webkit-mask-image: url("i.png")) or (mask-image: url("i.png"))) { .holo-logo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--up-holo); background-size: 300% 100%; mix-blend-mode: hue; animation: holo-logo-shift 26s linear infinite; } .holo-logo--mark::after { -webkit-mask: url('../img/logo-mark.png') center / 100% 100% no-repeat; mask: url('../img/logo-mark.png') center / 100% 100% no-repeat; } } @keyframes holo-logo-shift { to { background-position: 300% 0; } } .up-nav { display: flex; gap: var(--up-sp-5); margin-left: auto; } .up-nav a { font: 500 var(--up-fs-sm)/1 var(--up-font-body); color: var(--up-text-dim) !important; position: relative; padding-block: 6px; transition: color .22s var(--up-ease); } .up-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--up-holo); background-size: 300% 100%; transition: right .3s var(--up-ease); } .up-nav a:hover { color: var(--up-text) !important; } .up-nav a:hover::after { right: 0; } .up-actions { display: flex; align-items: center; gap: var(--up-sp-3); } .icon-btn { /* position + padding:0 sú tu nutné: bez position:relative sa odznak počíta voči hlavičke a odletí preč; bez padding:0 tlačidlo dedí predvolený padding prehliadača a ikona sa posunie mimo optického stredu. */ position: relative; width: 38px; height: 38px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; line-height: 0; border: 1px solid var(--up-hairline); border-radius: var(--up-r-pill); background: var(--up-ink-2); color: var(--up-text-dim) !important; cursor: pointer; flex-shrink: 0; transition: border-color .25s var(--up-ease), color .25s var(--up-ease); } .icon-btn > svg { display: block; } .icon-btn:hover { border-color: var(--up-purple); color: var(--up-text) !important; } .icon-btn__badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: var(--up-r-pill); background: var(--up-purple); color: #fff; font: 700 .625rem/1 var(--up-font-mono); } /* Prepínač jazyka — aktívny jazyk zámerne nie je odkaz. */ .lang-switch { display: flex; align-items: center; border: 1px solid var(--up-hairline); border-radius: var(--up-r-pill); background: var(--up-ink-2); overflow: hidden; flex-shrink: 0; } .lang-switch__cur, .lang-switch__opt { padding: 0 9px; height: 36px; display: flex; align-items: center; font: 600 .6875rem/1 var(--up-font-mono); letter-spacing: .04em; text-decoration: none; } .lang-switch__cur { color: var(--up-text) !important; background: rgba(255,255,255,.05); } .lang-switch__opt { color: var(--up-text-mute) !important; transition: color .25s var(--up-ease); } .lang-switch__opt:hover { color: var(--up-text) !important; } /* Na úzkych displejoch sa logo, navigácia a akcie do jedného riadku nezmestia a hlavička preteká. Keďže body má overflow-x:hidden, orezalo by to polovicu navigácie aj košík — bez posuvníka, ktorý by to prezradil. Preto zalomenie na dva riadky: logo a akcie hore, navigácia pod nimi. */ @media (max-width: 699px) { .up-header__inner { flex-wrap: wrap; height: auto; gap: var(--up-sp-3); padding-block: 10px; } .up-actions { margin-left: auto; } .up-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; } .up-nav::-webkit-scrollbar { display: none; } .up-nav a { white-space: nowrap; } } /* Kontajner šírky obsahu — statický web ho volá .up-container. */ .up-container { width: 100%; max-width: var(--up-maxw); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); } /* ========================================================================== Domovská stránka — prenesená zo statického webu ========================================================================== */ /* ── Sekcie a ich hlavičky ─────────────────────────────────────────────── */ .up-section { padding-block: clamp(48px, 8vw, 104px); position: relative; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--up-sp-4); flex-wrap: wrap; margin-bottom: var(--up-sp-6); } .section-title { margin: 0; font: 700 var(--up-fs-h2)/1.1 var(--up-font-display) !important; font-style: italic; text-transform: uppercase; letter-spacing: .04em; color: var(--up-text) !important; } .section-link { font: 500 var(--up-fs-sm)/1 var(--up-font-body); color: var(--up-cyan) !important; border-bottom: 1px solid rgba(34,211,238,.3); padding-bottom: 3px; transition: border-color .25s var(--up-ease); } .section-link:hover { border-color: var(--up-cyan); } .eyebrow { margin: 0 0 var(--up-sp-2); font: 500 var(--up-fs-xs)/1 var(--up-font-mono); text-transform: uppercase; letter-spacing: .22em; color: var(--up-text-mute); } /* ── Tlačidlá ──────────────────────────────────────────────────────────── */ .btn-holo { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border: 0; cursor: pointer; border-radius: var(--up-r-pill); font: 700 .9375rem/1 var(--up-font-display); letter-spacing: .06em; text-transform: uppercase; color: #08060D !important; background: var(--up-holo); background-size: 220% 100%; box-shadow: 0 6px 24px -8px rgba(139,92,246,.7); transition: background-position .6s var(--up-ease), transform .18s var(--up-ease), box-shadow .3s var(--up-ease); } .btn-holo:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 10px 32px -8px rgba(34,211,238,.65); color: #08060D !important; } .btn-holo:active { transform: translateY(0) scale(.985); } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; cursor: pointer; border: 1px solid var(--up-hairline); border-radius: var(--up-r-pill); background: transparent; color: var(--up-text) !important; font: 600 .9375rem/1 var(--up-font-body); transition: border-color .25s var(--up-ease), background .25s var(--up-ease); } .btn-ghost:hover { border-color: var(--up-purple); background: rgba(139,92,246,.08); } .btn-block { width: 100%; justify-content: center; } /* ── Hero ──────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: clamp(560px, 88vh, 900px); display: grid; place-items: center; text-align: center; padding-block: var(--up-sp-8); overflow: hidden; } .holo-logo--lockup { width: clamp(150px, 22vw, 230px); margin: 0 auto var(--up-sp-5); } .holo-logo--lockup::after { -webkit-mask: url('../img/logo.png') center / 100% 100% no-repeat; mask: url('../img/logo.png') center / 100% 100% no-repeat; } .hero__title { margin: 0 0 var(--up-sp-5); font: 700 var(--up-fs-hero)/.95 var(--up-font-display) !important; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; } .hero__cta { display: flex; gap: var(--up-sp-4); justify-content: center; flex-wrap: wrap; } .hero__facts { display: flex; gap: var(--up-sp-5); justify-content: center; flex-wrap: wrap; margin-top: var(--up-sp-7); font: 500 var(--up-fs-xs)/1 var(--up-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--up-text-mute); } .hero__facts span { display: flex; align-items: center; gap: var(--up-sp-5); } .hero__facts span:not(:last-child)::after { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, var(--up-purple), transparent); } /* ── Trust bar ─────────────────────────────────────────────────────────── */ .trust-bar { border-block: 1px solid var(--up-hairline); background: linear-gradient(180deg, rgba(16,16,20,.6), rgba(0,0,0,.4)); } .trust-bar__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .trust-item { display: flex; flex-direction: column; align-items: center; gap: var(--up-sp-2); text-align: center; padding: var(--up-sp-5) var(--up-sp-3); } .trust-item + .trust-item { border-left: 1px solid var(--up-hairline); } .trust-item svg { width: 26px; height: 26px; stroke: var(--up-purple-lt); } .trust-item span { font: 600 var(--up-fs-xs)/1.4 var(--up-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--up-text-dim); } /* ── Kategórie ───────────────────────────────────────────────────────────── Kompaktné čipy, nie veľké dlaždice. Šesť blokov s veľkou prázdnou plochou robilo zo sekcie zbytočne ťažkú vec; toto sa správa skôr ako filtračná lišta a nechá vyniknúť produkty pod ňou. */ .cat-nav { display: flex; flex-wrap: wrap; gap: var(--up-sp-2); } .cat-chip { display: inline-flex; align-items: center; gap: var(--up-sp-3); padding: 9px 8px 9px 12px; border: 1px solid var(--up-hairline); border-radius: var(--up-r-pill); background: var(--up-ink-2); color: var(--up-text) !important; transition: border-color .22s var(--up-ease), background .22s var(--up-ease), transform .22s var(--up-ease); } .cat-chip:hover, .cat-chip:focus-visible { border-color: var(--up-purple); background: var(--up-ink-3); transform: translateY(-2px); } .cat-chip svg { width: 17px; height: 17px; flex-shrink: 0; stroke: var(--up-purple-lt); } .cat-chip__name { font: 600 var(--up-fs-sm)/1 var(--up-font-body); white-space: nowrap; } .cat-chip__n { padding: 0 8px 0 10px; border-left: 1px solid var(--up-hairline); font: 500 var(--up-fs-xs)/1 var(--up-font-mono); font-variant-numeric: tabular-nums; color: var(--up-text-mute); } .cat-chip:hover .cat-chip__n { color: var(--up-text-dim); } /* ── Proces (ako zaručujeme čistotu) ──────────────────────────────────── */ .steps { display: grid; gap: var(--up-sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } .step { padding: var(--up-sp-5); position: relative; } .step__num { font: 700 .8125rem/1 var(--up-font-mono); color: #08060D; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--up-holo); background-size: 200% 100%; margin-bottom: var(--up-sp-4); } .step h3 { margin: 0 0 var(--up-sp-2); font: 700 1.0625rem/1.25 var(--up-font-display) !important; color: var(--up-text) !important; } .step p { margin: 0; font-size: var(--up-fs-sm); color: var(--up-text-dim); line-height: 1.6; } /* Storefront dáva obsahu stránky vlastný wrapper s bielym pozadím a úzkou šírkou. Na domovskej stránke skladáme sekcie cez celú šírku sami. */ .home .site-content, .home #primary, .home .content-area, .home .col-full { max-width: none !important; padding: 0 !important; margin: 0 !important; } .home .entry-header { display: none; } /* ── Pätička ───────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--up-hairline); background: linear-gradient(180deg, rgba(10,10,12,.6), #000) !important; padding: var(--up-sp-7) 0 var(--up-sp-5) !important; margin-top: var(--up-sp-7); color: var(--up-text-mute) !important; } .site-footer .col-full { max-width: none; padding: 0; margin: 0; } .up-footer__grid { display: grid; gap: var(--up-sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); padding-bottom: var(--up-sp-6); border-bottom: 1px solid var(--up-hairline); } .up-footer__tagline { margin: 0; font-size: var(--up-fs-sm); color: var(--up-text-mute); max-width: 32ch; line-height: 1.7; } .site-footer h4 { margin: 0 0 var(--up-sp-4); font: 600 var(--up-fs-xs)/1 var(--up-font-mono) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--up-text-mute) !important; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--up-sp-3); } .site-footer a { font-size: var(--up-fs-sm); color: var(--up-text-dim) !important; transition: color .2s var(--up-ease); } .site-footer a:hover { color: var(--up-cyan) !important; } .up-footer__legal { padding-top: var(--up-sp-5); display: flex; gap: var(--up-sp-4); flex-wrap: wrap; justify-content: space-between; align-items: center; font-size: var(--up-fs-xs); color: var(--up-text-mute); } /* Povinný RUO odstavec. Nesmie byť drobným písmom v pätičke stratený — preto rámček a vlastné pozadie, ktoré ho oddelia od odkazov nad ním. */ .ruo-strip { margin-top: var(--up-sp-4); padding: var(--up-sp-4); border-radius: var(--up-r-sm); border: 1px solid var(--up-hairline); background: rgba(16,16,20,.6); font-size: var(--up-fs-xs); line-height: 1.7; color: var(--up-text-mute); max-width: 90ch; } .ruo-strip strong { color: var(--up-text-dim); } /* ── Hlavička stránky kategórie ────────────────────────────────────────── */ .up-cat-head .section-title { display: flex; align-items: center; gap: var(--up-sp-3); } .up-cat-head__icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--up-r-md); background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25); } .up-cat-head__icon svg { width: 21px; height: 21px; stroke: var(--up-purple-glow); } /* ── Bariéra 18+ ───────────────────────────────────────────────────────── */ .agegate { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: var(--up-sp-5); background: rgba(0,0,0,.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .agegate__card { max-width: 480px; width: 100%; padding: clamp(24px, 5vw, 40px); text-align: center; } .agegate__card h2 { margin: 0 0 var(--up-sp-3); font: 700 var(--up-fs-h2)/1.15 var(--up-font-display) !important; text-transform: uppercase; letter-spacing: -.01em; color: var(--up-text) !important; } .agegate__card p { color: var(--up-text-dim); font-size: var(--up-fs-sm); line-height: 1.65; } .agegate__actions { display: flex; gap: var(--up-sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--up-sp-5); } /* ── Upozornenie RUO nad košíkom a pokladňou ───────────────────────────── Vkladá ho up-checkout.php. Zámerne nie je drobným písmom: v košíku a pokladni je to posledné miesto, kde zákazník uvidí, čo kupuje. */ .up-ruo-box { margin: 0 0 var(--up-sp-5); padding: var(--up-sp-4) var(--up-sp-5); border: 1px solid transparent; border-radius: var(--up-r-md); background: linear-gradient(var(--up-ink-2), var(--up-ink-2)) padding-box, var(--up-holo) border-box; box-shadow: var(--up-shadow-card); } .up-ruo-box p { margin: 0; font-size: var(--up-fs-sm); line-height: 1.7; color: var(--up-text-dim); } /* ── Blokový košík a pokladňa ──────────────────────────────────────────── Košík aj pokladňa sú blokové, takže neberú štýly `.woocommerce .button` z Storefrontu — majú vlastné triedy `wc-block-*`. Bez tohto bloku ostane hlavné tlačidlo objednávky sivé uprostred holografického webu. */ .wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { background: var(--up-holo) !important; background-size: 220% 100% !important; color: #08060D !important; border: 0 !important; border-radius: var(--up-r-pill) !important; font: 700 .9375rem/1 var(--up-font-display) !important; letter-spacing: .06em; text-transform: uppercase; padding: 16px 28px !important; box-shadow: 0 6px 24px -8px rgba(139, 92, 246, .7); transition: background-position .6s var(--up-ease), transform .18s var(--up-ease); } .wc-block-components-button:not(.is-link):hover, .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover { background-position: 100% 0 !important; transform: translateY(-2px); } .wc-block-components-button__text { color: #08060D !important; } /* Odkazové tlačidlá (napr. „Vrátiť sa do obchodu") ostávajú odkazmi. */ .wc-block-components-button.is-link { color: var(--up-purple-glow) !important; background: none !important; box-shadow: none !important; } /* Povinné potvrdenie účelu nákupu. Zaškrtávacie pole je v pokladni to najdôležitejšie políčko — nesmie splynúť s poznámkou k objednávke. */ .wc-block-components-address-form__ultrapeptidy-ruo-suhlas { padding: var(--up-sp-4); border: 1px solid var(--up-purple-deep); border-radius: var(--up-r-md); background: rgba(139, 92, 246, .07); } .wc-block-components-checkbox__label { color: var(--up-text-dim); } /* Samotné zaškrtávacie pole bolo na čiernej pokladni biely štvorec — potvrdenie účelu nákupu, poznámka k objednávke aj spoločná fakturačná adresa. `accent-color` ani `color-scheme` naň neplatia: WooCommerce mu dáva `appearance: none` a `background: #fff`, takže sa musí prefarbiť pozadie aj rámček. Rozmery nechávame na blokoch — tie si políčko umiestňujú na pixel presne. */ .wc-block-components-checkbox__input[type="checkbox"], .wc-block-checkout input[type="checkbox"], .wc-block-cart input[type="checkbox"] { background: rgba(139, 92, 246, .10) !important; border: 1px solid var(--up-purple-deep) !important; color-scheme: dark; } .wc-block-components-checkbox__input[type="checkbox"]:checked, .wc-block-checkout input[type="checkbox"]:checked, .wc-block-cart input[type="checkbox"]:checked { background: var(--up-purple-glow) !important; border-color: var(--up-purple-glow) !important; } /* Fajka sa kreslí samostatným SVG nad políčkom; na fialovej musí byť tmavá. */ .wc-block-components-checkbox__mark { fill: #08060D; } /* Prázdny košík má nad nadpisom veľkú ikonu smutnej tváre — biely kruh, ktorý na čiernej stránke svieti ako baterka. Je to obrázok na pozadí, farbu mu priamo nastaviť nevieme, preto prevrátenie: z bieleho kruhu sa stane tmavý a tvár ostane svetlá. */ .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { filter: invert(1); opacity: .45; } /* Chyby overenia. Vo východiskových štýloch sú tmavočervené a na čiernom pozadí sa nedajú prečítať. */ .wc-block-components-validation-error, .wc-block-components-validation-error p { color: var(--up-err) !important; } /* Tlačidlá z blokov WordPressu (`wp-block-button`). Prázdny košík aj pokladňa vypisujú blok s ponukou produktov a jeho tlačidlá „Pridať do košíka“ mali predvolené blokové štýly — svetlosivé #eee s tmavým textom. Na čiernej stránke to boli štyri svetlé obdĺžniky. Nejde o triedu `wc-block-*` vyššie, preto samostatné pravidlo. */ .wp-block-button__link { background: var(--up-holo) !important; background-size: 220% 100% !important; color: #08060D !important; border: 0 !important; border-radius: var(--up-r-pill) !important; font: 700 .75rem/1 var(--up-font-display) !important; letter-spacing: .06em; text-transform: uppercase; padding: 11px 18px !important; box-shadow: 0 6px 24px -10px rgba(139, 92, 246, .7); transition: background-position .6s var(--up-ease), transform .18s var(--up-ease); } .wp-block-button__link:hover { background-position: 100% 0 !important; transform: translateY(-2px); } /* Biele podklady pod blokovými komponentmi. Tlačidlo aj samotné pole sú oštýlované, ale ich obal si drží biele pozadie z východiskových štýlov WooCommerce — okolo holografického tlačidla v košíku tak svietil biely okraj a výber krajiny v pokladni mal bielu plochu 643×50. Na čiernej stránke to boli jediné svetlé miesta. */ .wc-block-cart__submit-container, .wc-block-cart__submit, .wc-blocks-components-select__container, .wc-blocks-components-select { background: transparent !important; border-color: var(--up-hairline) !important; } .wc-blocks-components-select__container { border-radius: var(--up-r-md); background: var(--up-ink-2) !important; } .wc-blocks-components-select__select { background: transparent !important; color: var(--up-text) !important; /* Rozbalený zoznam kreslí prehliadač — bez toho je biely. */ color-scheme: dark; } .wc-blocks-components-select__label { color: var(--up-text-mute) !important; } /* ── Molekula namiesto fľaštičky ────────────────────────────────────────── Schéma je hotové SVG zo scripts/molekuly.mjs a nesie si vlastnú paletu aj tmavý režim, takže sa odtiaľto nefarbí — nastavuje sa len jej miesto. `contain` a nie `cover`: molekulu nemožno orezať. Chýbajúci koniec reťazca je iná látka, nie iný výrez. Rozostup má SVG zabudovaný (5 % rámu), preto tu nie je žiadny padding. */ .mol { display: block; width: 100%; height: 100%; } .mol__img { display: block; width: 100%; height: 100%; object-fit: contain; } /* ══════════════════════════════════════════════════════════════════════════ KATALÓG, CENNÍK V POP-UPE A DROBNOSTI ZO STATICKÉHO WEBU Prevzaté 1:1 zo site/assets/css/ultrapeptidy.css. Zámerne skopírované, nie prepísané: obe verzie majú vyzerať rovnako a pri porovnávaní má byť vidieť, že je to ten istý kód. ══════════════════════════════════════════════════════════════════════════ */ /* ── Drobček (breadcrumb) ─────────────────────────────────────────────── */ .breadcrumb { display: flex; gap: var(--up-sp-2); flex-wrap: wrap; padding-block: var(--up-sp-5); font: 500 var(--up-fs-xs)/1 var(--up-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--up-text-mute); } .breadcrumb a:hover { color: var(--up-cyan); } .breadcrumb span[aria-current] { color: var(--up-text-dim); } /* ── Ikona kategórie v hlavičke sekcie ────────────────────────────────── */ .cat-tile__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--up-r-md); background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25); } .cat-tile__icon svg { width: 21px; height: 21px; stroke: var(--up-purple-glow); } /* ── Upozornenie ──────────────────────────────────────────────────────── */ .notice { display: flex; gap: var(--up-sp-3); padding: var(--up-sp-4); border-radius: var(--up-r-md); border: 1px solid var(--up-hairline); background: var(--up-ink-2); font-size: var(--up-fs-sm); color: var(--up-text-dim); margin-bottom: var(--up-sp-3); } .notice svg { width: 19px; height: 19px; flex-shrink: 0; stroke: var(--up-cyan); margin-top: 2px; } .notice strong { color: var(--up-text); font-weight: 600; } .notice--cold svg { stroke: var(--up-sky); } /* ========================================================================== Prepínač zobrazenia + cenník v pop-upe ========================================================================== */ .viewswitch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--up-hairline); border-radius: var(--up-r-pill); background: var(--up-ink-2); } .viewswitch button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 0; cursor: pointer; border-radius: var(--up-r-pill); background: transparent; color: var(--up-text-mute); font: 600 var(--up-fs-xs)/1 var(--up-font-body); letter-spacing: .04em; transition: color .2s var(--up-ease), background .2s var(--up-ease); } .viewswitch button svg { width: 14px; height: 14px; stroke: currentColor; } .viewswitch button:hover { color: var(--up-text-dim); } .viewswitch button[aria-pressed='true'] { background: var(--up-ink-3); color: var(--up-text); } /* ── Modal ────────────────────────────────────────────────────────────── kvôli natívnemu focus trapu a zatváraniu Escapom. Hrana je ten istý iridescentný conic gradient ako na kartách, len sa otáča stále a pomaly — je to jediná ozdoba, ktorú si tu modal berie. */ .modal { width: min(1100px, 94vw); max-height: 88vh; padding: 0; border: 1px solid transparent; border-radius: var(--up-r-lg); background: linear-gradient(var(--up-ink), var(--up-ink)) padding-box, conic-gradient(from var(--holo-angle), #22D3EE, #8B5CF6, #E879F9, #E2E8F0, #38BDF8, #22D3EE) border-box; color: var(--up-text); overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.95), var(--up-glow-purple); animation: modal-in .26s var(--up-ease); } .modal[open] { animation: modal-in .26s var(--up-ease), holo-rotate 12s linear infinite; } @keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } .modal::backdrop { background: rgba(4,4,6,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: modal-backdrop-in .26s var(--up-ease); } @keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } } .modal.is-closing { animation: modal-out .18s var(--up-ease) forwards; } @keyframes modal-out { to { opacity: 0; transform: translateY(8px) scale(.985); } } .modal__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--up-sp-4); padding: var(--up-sp-5) var(--up-sp-5) var(--up-sp-4); border-bottom: 1px solid var(--up-hairline); background: linear-gradient(180deg, var(--up-ink) 72%, rgba(10,10,10,.9)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .modal__head h2 { margin: var(--up-sp-2) 0 0; font: 700 var(--up-fs-h2)/1.1 var(--up-font-display); font-style: italic; text-transform: uppercase; letter-spacing: .04em; } .modal__close { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; border: 1px solid var(--up-hairline); border-radius: var(--up-r-pill); background: var(--up-ink-2); color: var(--up-text-dim); transition: border-color .2s var(--up-ease), color .2s var(--up-ease); } .modal__close:hover { border-color: var(--up-purple); color: var(--up-text); } .modal__body { padding: var(--up-sp-5); overflow-y: auto; max-height: calc(88vh - 96px); overscroll-behavior: contain; } .modal__foot { padding: 0 var(--up-sp-5) var(--up-sp-5); font-size: var(--up-fs-xs); color: var(--up-text-mute); line-height: 1.7; } /* Bez JS sa dialóg neotvorí, tak ho ukáž ako bežnú sekciu. */ @media (scripting: none) { .modal { display: block; position: static; width: 100%; max-height: none; animation: none; margin-block: var(--up-sp-6); } .modal__body { max-height: none; } .viewswitch { display: none; } } /* ── Cenníková tabuľka v pop-upe ──────────────────────────────────────── */ /* ========================================================================== Cenník — kompletná tabuľka ========================================================================== */ .pricelist { display: grid; gap: var(--up-sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); } .pl-group { padding: var(--up-sp-5); background: var(--up-ink-2); } .pl-group__head { display: flex; align-items: center; gap: var(--up-sp-3); margin-bottom: var(--up-sp-4); padding-bottom: var(--up-sp-3); border-bottom: 1px solid var(--up-hairline); } .pl-group__head svg { width: 20px; height: 20px; stroke: var(--up-purple-glow); flex-shrink: 0; } .pl-group__title { margin: 0; font: 700 1rem/1.2 var(--up-font-display); font-style: italic; text-transform: uppercase; letter-spacing: .05em; color: var(--up-purple-glow); } .pl-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .pl-table thead th { padding: 0 0 var(--up-sp-2); font: 500 var(--up-fs-xs)/1.3 var(--up-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--up-text-mute); text-align: right; font-weight: 500; } .pl-table thead th:first-child { text-align: left; } .pl-table thead th small { display: block; font-size: .5625rem; color: #565B6D; } .pl-table td { padding: 7px 0; border-top: 1px solid rgba(36,36,46,.6); font-family: var(--up-font-mono); font-size: var(--up-fs-sm); text-align: right; } .pl-table td:first-child { text-align: left; font-family: var(--up-font-body); color: var(--up-text); } .pl-table td.pl-1ks { color: var(--up-price); } .pl-table td.pl-3ks { color: var(--up-price-tier); } .pl-table td.pl-none { color: #4A4E5E; } .pl-table tbody tr:hover td { background: rgba(139,92,246,.06); } /* ── Prepínač zobrazenia: prebitie Storefrontu ──────────────────────────── Na statickom webe stačí `.viewswitch button`, tu nie. Storefront štýluje tlačidlá vlastným pravidlom, ktoré vyhralo — bolo to vidieť na vypočítanom `padding: 9.888px 22.652px`, teda jeho `.6180469716em 1.41575em`. Následok nebol len iná farba: nešt‌ýlované inline SVG má prednastavených 300×150 px, takže z prepínača boli dve biele plochy cez pol obrazovky. Preto sa selektor zvyšuje o `.up-container`, nie pridáva !important. */ .up-container .viewswitch button { padding: 8px 16px; border: 0; background: transparent; color: var(--up-text-mute); font: 600 var(--up-fs-xs)/1 var(--up-font-body); letter-spacing: .04em; text-transform: none; min-height: 0; width: auto; } .up-container .viewswitch button:hover { background: transparent; color: var(--up-text-dim); } .up-container .viewswitch button[aria-pressed='true'] { background: var(--up-ink-3); color: var(--up-text); } .up-container .viewswitch button svg { width: 14px; height: 14px; flex: none; stroke: currentColor; } /* To isté platí pre zatváracie tlačidlo cenníka — je to tiež