/* ========================================================================== zd-keramika.css — Keramika sekcija (landing + stranice kolekcija) -------------------------------------------------------------------------- Učitava se POSLE zd-foundation.css i zd-home.css. Bez !important. Sve je scope-ovano na .zd-v2 .zd-k*, pa ostatak sajta ostaje netaknut. Koristi isključivo tokene iz zd-foundation.css — nema novih boja ni fontova. Prefiks komponenti: .zd-k ========================================================================== */ /* -------------------------------------------------------------------------- 0. Lokalni tokeni sekcije (izvedeni iz globalnih, bez novih vrednosti) -------------------------------------------------------------------------- */ /* BUG FIX: klase `zd-v2` i `zd-keramika` stoje na ISTOM elementu (), pa descendant selektor `.zd-v2 .zd-keramika` nikada nije pogađao ništa — ceo blok tokena bio je mrtav. Posledice na živoj stranici: `gap: var(--zk-card-gap)` je bio nevažeći (mreže bez razmaka), `background: var(--zk-panel)` providan, a `--zk-tint` bez efekta. Compound selektor to ispravlja; druga varijanta ostaje za slučaj da neka stranica kolekcija stavi klasu na unutrašnji element. */ .zd-v2.zd-keramika, .zd-v2 .zd-keramika{ --zk-card-gap: clamp(.75rem, 1.4vw, 1.25rem); --zk-panel: #FFFFFF; --zk-tint: #F6F2EA; /* između --zd-bg i --zd-surface */ /* Kartica proizvoda — „elevated”, ali bez glassmorphism-a. Senka je dvoslojna: kratki, tesni sloj ocrtava ivicu, dugi meki sloj daje dubinu. Topli ton (24,20,14) umesto crnog sprečava sivi „halo” na beloj pozadini. Okvir je iste porodice kao filter panel (--zk-f-line), pa se dve površine čitaju kao jedan sistem. */ --zk-card-radius: 14px; --zk-card-line: #E7E0D2; --zk-card-line-hover: #D9D0BE; --zk-card-shadow: 0 1px 2px rgba(24,20,14,.04), 0 10px 30px rgba(24,20,14,.07); --zk-card-shadow-hover: 0 2px 4px rgba(24,20,14,.05), 0 16px 38px rgba(24,20,14,.12); --zk-card-lift: -2px; /* Filter panel (drawer + bočna kolona) — po referenci „referentna slika filteri”. Radijus je namerno veći od globalnog --zd-radius: kartica sekcije mora da se čita kao zaseban blok, a ne kao linija u listi. */ --zk-f-card: #FCFAF6; --zk-f-line: #E7E0D2; --zk-f-radius: 10px; --zk-f-shadow: 0 1px 2px rgba(28,26,23,.035), 0 6px 18px rgba(28,26,23,.045); --zk-f-hist: #E6DFD2; --zk-f-hist-on:#E0CBA0; /* Centralni shell stranice. 1240px je gornja granica iz brief-a (1180–1240); isti je za hero, kategorije, katalog i sve odobrene sekcije ispod, pa se leva i desna ivica poklapaju niz celu stranicu. */ --zd-max-content: 1240px; /* Ritam sekcija — namerno uži od podrazumevanog (referenca: „premium nije ogromna praznina”). Hero → Trust → Kategorije → Katalog. */ --zk-gap-sm: clamp(1.25rem, 2.2vw, 2rem); --zk-gap-md: clamp(1.75rem, 3.2vw, 2.75rem); --zk-side-w: 280px; /* levi filter stub na desktopu */ /* Široki shell listinga (katalog + zaglavlje kategorije), samo ≥1200 px. Sadržaj stoji --zk-wide-edge od ivice viewporta (24 px margina + 24 px unutrašnji padding) i nikad nije širi od --zk-wide-max. Na 1200 px ovo daje istu širinu kao stari shell (4vw = 48 px), pa prelaz nema skok. */ --zk-wide-max: 1680px; --zk-wide-edge: 24px; /* Horizontalna osa stranice: rastojanje vidljivog sadržaja od ivice viewporta. Koriste je elementi koji NISU u .zd-k-shell (hero tekst, breadcrumb u hero-u, trust traka), da bi stajali u istoj vertikali kao shell. Ispod 1200 px to je --zd-gutter (isto kao shell); od 1200 px je ista formula kao široki shell niže — vidi @media (min-width: 1200px). */ --zk-edge: var(--zd-gutter); /* Hero na ovoj stranici ide IZA navigacije, pa staklo nav kartice sada stoji nad fotografijom umesto nad svetlom pozadinom. Podrazumevanih .44 / .74 bi nad tamnim kadrom oborilo čitljivost linkova, zato su vrednosti page-scoped podignute. Globalni nav CSS nije diran — samo se prepisuju njegovi tokeni, pa ostale stranice ostaju nepromenjene. */ --zd-glass-top: rgba(250,247,242,.80); --zd-glass-scrolled: rgba(250,247,242,.88); /* Sigurnosna zona: donja ivica nav kartice mereno od vrha hero-a. */ --zk-nav-safe: calc(var(--zd-nav-inset, 12px) + var(--zd-nav-h, 76px)); } /* Sigurnosna mreža: Mobirise theme skripta ume da doda .hidden (visibility:hidden) i fade-in sa kašnjenjem svakom

,

  • , , … Sadržaj kataloga mora biti odmah vidljiv, pa unutar glavnog sadržaja ovih stranica to poništavamo. Specifičnost (0,2,1) je viša od Mobirise `.hidden` (0,1,0) — bez !important. */ .zd-v2 #zd-k-main .hidden{ visibility: visible; } .zd-v2 #zd-k-main .animate__animated{ animation: none; opacity: 1; } .zd-v2 .zd-k-shell{ max-width: calc(var(--zd-max-content) + 2 * var(--zd-gutter)); margin-inline: auto; padding-inline: var(--zd-gutter); width: 100%; } /* Od 1200 px SVE sekcije /keramika/ i stranica kategorija dele širinu kataloga: skoro puna širina, najviše --zk-wide-max. Katalog je referenca; „Istražite kategorije”, Inspiracija, tekst, FAQ i „Sve kolekcije” ga prate. (.zd-k-shell se koristi samo na listing stranicama — product-detail ima sopstveni layout i ovo ga ne dotiče.) Ispod 1200 px ništa se ne menja. */ @media (min-width: 1200px){ .zd-v2 .zd-k-shell{ width: calc(100% - 2 * var(--zk-wide-edge)); max-width: var(--zk-wide-max); padding-inline: var(--zk-wide-edge); } /* Ista ivica, izražena kao odstojanje od ivice full-bleed sekcije: (širina − 1680) / 2 + 24, ali nikad manje od 48 px. `100%` se razrešava tamo gde se token koristi (padding / left), tj. prema širini sekcije. */ .zd-v2.zd-keramika, .zd-v2 .zd-keramika{ --zk-edge: max(calc(2 * var(--zk-wide-edge)), calc((100% - var(--zk-wide-max)) / 2 + var(--zk-wide-edge))); } } /* Zaglavlje sekcije: naslov + podnaslov levo, akcija desno */ .zd-v2 .zd-k-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: var(--zd-5); flex-wrap: wrap; margin-bottom: var(--zd-6); } .zd-v2 .zd-k-head__title{ font-family: var(--zd-font-display); letter-spacing: -.015em; font-size: var(--zd-fs-h2); line-height: 1.15; color: var(--zd-ink); margin: 0 0 .35rem; font-weight: var(--zd-fw-display); } .zd-v2 .zd-k-head__sub{ font-size: var(--zd-fs-small); color: var(--zd-ink-soft); margin: 0; max-width: 52ch; } .zd-v2 .zd-k-head__link{ font-size: var(--zd-fs-small); color: var(--zd-ink); text-decoration: none; border-bottom: 1px solid var(--zd-line-strong); padding-bottom: 2px; white-space: nowrap; transition: color var(--zd-t-fast), border-color var(--zd-t-fast); } .zd-v2 .zd-k-head__link:hover{ color: var(--zd-accent-dark); border-color: var(--zd-accent); } .zd-v2 .zd-k-eyebrow{ font-size: var(--zd-fs-micro); letter-spacing: var(--zd-ls-eyebrow); text-transform: uppercase; color: var(--zd-ink-soft); margin: 0 0 var(--zd-3); } /* -------------------------------------------------------------------------- 1. Breadcrumb -------------------------------------------------------------------------- */ .zd-v2 .zd-k-crumbs{ font-size: var(--zd-fs-micro); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 var(--zd-5); color: rgba(241,236,227,.7); } .zd-v2 .zd-k-crumbs ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .zd-v2 .zd-k-crumbs li{ display: flex; align-items: center; gap: .5rem; } .zd-v2 .zd-k-crumbs li + li::before{ content: "›"; color: rgba(241,236,227,.45); } .zd-v2 .zd-k-crumbs a{ color: inherit; text-decoration: none; } .zd-v2 .zd-k-crumbs a:hover{ color: var(--zd-gold-on-dark); } .zd-v2 .zd-k-crumbs [aria-current]{ color: var(--zd-gold-on-dark); } /* Varijanta na svetloj podlozi (stranice kolekcija) */ .zd-v2 .zd-k-crumbs--light{ color: var(--zd-ink-soft); } .zd-v2 .zd-k-crumbs--light li + li::before{ color: var(--zd-line-strong); } .zd-v2 .zd-k-crumbs--light a:hover{ color: var(--zd-accent-dark); } .zd-v2 .zd-k-crumbs--light [aria-current]{ color: var(--zd-ink); } /* -------------------------------------------------------------------------- 2. Hero — FULL-BLEED traka ispod navigacije -------------------------------------------------------------------------- Napisano iznova prema `referentne slike/Keramika-landing.png`. Nema shell wrappera, margine, radius-a ni card efekta: traka ide od ivice do ivice prozora. Tri zone su izmerene na referenci (desktop panel 927 px): tekst 41.7% | čist kadar 22.5% | mermer 35.8% Leve dve zone su JEDNA fotografija; tamni panel je scrim preko nje, a ne zaseban pravougaonik — zato je prelaz iz tamnog u čist kadar prirodan. -------------------------------------------------------------------------- */ .zd-v2 .zd-k-hero{ position: relative; /* Globalni header je `position: fixed`. Hero počinje TAČNO ispod njega — bez dodatnog razmaka: nav → hero → trust je jedna kompaktna celina. */ margin-top: var(--zd-header-h, 124px); height: clamp(320px, 27.1vw, 400px); /* 1440 → 390 px */ background: var(--zd-surface-deep); color: var(--zd-ink-invert); overflow: hidden; isolation: isolate; } /* --- zona 1+2: ambijentalna fotografija ---------------------------------- */ .zd-v2 .zd-k-hero__photo{ position: absolute; inset: 0 35.5% 0 0; overflow: hidden; z-index: 0; } /* Kadar je ogledalski obrnut: u originalu su kada i prozor levo, a kameni stub, lavabo i ogledalo desno. Obrtanjem kada + prozor + zelenilo padaju u ČIST centralni pojas (kao na referenci), a stub i lavabo pod tamni scrim. Širina 128.6% je izračunata, ne pogođena: slika je 1536 px, kada je na x≈550, pa posle obrtanja pada na 1536−550 = 986. Da bi se našla na sredini čistog pojasa (767 px od 929 px široke zone), skala mora biti 767/986 = 0.778 → renderovana širina 1536 × 0.778 = 1195 px = 128.6% zone. */ .zd-v2 .zd-k-hero__photo img{ position: absolute; top: 0; left: 0; width: 128.6%; height: 100%; max-width: none; object-fit: cover; object-position: center 72%; transform: scaleX(-1); transform-origin: center; } /* --- scrim: tamni sloj preko levih ~42%, sa mekim prelazom --------------- */ .zd-v2 .zd-k-hero__scrim{ position: absolute; inset: 0 35.5% 0 0; z-index: 1; pointer-events: none; /* Procenti su lokalni za scrim (64.5% širine prozora); granica tekstualne zone je na 42/64.5 = 65% ovog gradijenta. */ background: linear-gradient(90deg, rgba(22,19,14,.95) 0%, rgba(22,19,14,.94) 35%, rgba(22,19,14,.91) 52%, rgba(22,19,14,.82) 60%, rgba(22,19,14,.55) 65%, /* 65% scrima = 42% prozora: granica zona */ rgba(22,19,14,.22) 70%, rgba(22,19,14,.05) 74%, rgba(22,19,14,0) 78%); } /* --- zona 3: mermerni panel --------------------------------------------- */ .zd-v2 .zd-k-hero__marble{ position: absolute; inset: 0 0 0 64.5%; overflow: hidden; z-index: 2; } .zd-v2 .zd-k-hero__marble img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; } /* Citat: centralno-desno na ploči, dovoljno odmaknut od leve ivice mermera. Sajt nema script/handwriting font (isporučuju se samo ikon-fontovi), a novi webfont bi bio nova zavisnost — zato najbliža elegantna opcija: display serif u kurzivu, lakši, sa širim proredom i blagim razmakom slova. */ .zd-v2 .zd-k-hero__quote{ position: absolute; z-index: 1; left: 50%; right: 15%; top: 63%; transform: translateY(-50%); margin: 0; font-family: var(--zd-font-display); font-style: italic; font-weight: var(--zd-fw-display-light); font-size: clamp(1rem, 1.8vw, 1.65rem); line-height: 1.36; letter-spacing: .015em; color: #2A2620; text-shadow: 0 1px 18px rgba(255,255,255,.6); pointer-events: none; } /* --- tekstualna kolona --------------------------------------------------- */ /* Levi inset prati levu ivicu `.zd-k-shell`, pa se hero, trust traka i naslov „Istražite kategorije” poklapaju u istoj vertikali niz celu stranicu. */ .zd-v2 .zd-k-hero__copy{ position: absolute; inset: 0 auto 0 0; width: 42%; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding-left: var(--zk-edge); padding-right: clamp(1rem, 2vw, 2.25rem); /* Procenat bi se ovde računao prema ŠIRINI hero-a (1440), ne prema visini — zato fiksna vrednost: referenca ima 32 px od dna CTA do dna trake. */ padding-bottom: clamp(.9rem, 1.6vw, 1.5rem); } .zd-v2 .zd-k-hero .zd-k-crumbs{ position: absolute; top: clamp(1.25rem, 2.3vw, 2.1rem); left: var(--zd-gutter); margin: 0; } /* Od 1200 px hero tekst stoji na osi kataloga (padding-left: --zk-edge na .zd-k-hero__copy). Breadcrumb je apsolutno pozicioniran UNUTAR tog bloka, pa bi `left` u procentima računao prema širini bloka (42 %), a ne stranice. `left: auto` ga ostavlja na statičkoj poziciji = unutrašnja ivica bloka, tj. tačno na istoj osi, bez duplog računa. */ @media (min-width: 1200px){ .zd-v2 .zd-k-hero .zd-k-crumbs{ left: auto; } } .zd-v2 .zd-k-hero__block{ min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .zd-v2 .zd-k-hero__eyebrow{ font-size: var(--zd-fs-micro); letter-spacing: var(--zd-ls-eyebrow); text-transform: uppercase; color: rgba(241,236,227,.78); margin: 0 0 .7rem; } .zd-v2 .zd-k-hero__title{ font-family: var(--zd-font-display); font-weight: var(--zd-fw-display-light); font-size: clamp(2.25rem, 4.6vw, 4.125rem); /* 1440 → 66 px */ line-height: 1.0; letter-spacing: -.02em; margin: 0 0 .55rem; } .zd-v2 .zd-k-hero__lead{ font-size: clamp(.9375rem, 1.2vw, 1.1875rem); line-height: 1.35; color: var(--zd-ink-invert); margin: 0 0 .75rem; max-width: none; } .zd-v2 .zd-k-hero__text{ font-size: var(--zd-fs-small); line-height: 1.5; color: rgba(241,236,227,.86); margin: 0 0 1.05rem; max-width: none; } /* CTA prati referencu: puna krem pozadina, tamni tekst, sitna strelica, vrlo mali radius, bez outline izgleda. */ .zd-v2 .zd-k-hero__cta{ display: inline-flex; align-items: center; justify-content: center; gap: .75rem; align-self: flex-start; min-width: 214px; min-height: 52px; padding: .8rem 1.5rem; background: var(--zd-ink-invert); border: 1px solid var(--zd-ink-invert); border-radius: var(--zd-radius-sm); color: var(--zd-ink); font-family: var(--zd-font-text); font-size: .9375rem; letter-spacing: .01em; text-transform: none; text-decoration: none; transition: background-color var(--zd-t-fast), border-color var(--zd-t-fast), color var(--zd-t-fast); } .zd-v2 .zd-k-hero__cta svg{ width: 17px; height: 17px; flex: none; } .zd-v2 .zd-k-hero__cta:hover{ background: var(--zd-gold-on-dark); border-color: var(--zd-gold-on-dark); color: #1C1A17; } /* --- hero IZA navigacije (desktop/tablet ≥992px) ------------------------- Info traka ostaje na svetloj pozadini; hero počinje odmah ispod nje, pa nav kartica lebdi NAD fotografijom i njeno staklo konačno ima šta da propusti. Nav ostaje iznad hero-a: `.zd-site-header` je fixed sa z-index 60, a hero ima `isolation: isolate` pa njegovi unutrašnji slojevi ne mogu da ga probiju. Sadržaj hero-a se NE pomera slepo naviše — dobija sigurnosnu zonu tako da breadcrumb i naslov počinju ispod nav kartice. */ @media (min-width: 992px){ .zd-v2 .zd-k-hero{ margin-top: var(--zd-topbar-h, 36px); /* 28.13vw → 405 px na 1440. Visina je podignuta sa 390 isključivo da bi tekstualni blok dobio vazduha: nav overlay pojede 88 px hero-a, pa je na 390 ritam bio stegnut. Važi samo tamo gde overlay postoji. */ height: clamp(360px, 28.13vw, 420px); } .zd-v2 .zd-k-hero__copy{ padding-top: calc(var(--zk-nav-safe) + 1.9rem); padding-bottom: .875rem; } /* Breadcrumb je bio 2 px ispod nav kartice — prelepljen uz nju. Spušten je za 10 px, pa raspoloživih ~25 px sada deli ravnomerno: ~12 px do nav-a i ~13 px do „VIŠE OD POVRŠINE". Ništa drugo se ne pomera — blok ispod je usidren za dno hero-a. */ .zd-v2 .zd-k-hero .zd-k-crumbs{ top: calc(var(--zk-nav-safe) + .75rem); } /* Prirodniji vertikalni ritam — sve dodatnih 15 px ide u razmake, nijedan u tipografiju (H1 ostaje 66 px, body 14 px, CTA 214 × 52). */ .zd-v2 .zd-k-hero__eyebrow{ margin-bottom: 1.125rem; } .zd-v2 .zd-k-hero__title{ margin-bottom: .875rem; } .zd-v2 .zd-k-hero__lead{ margin-bottom: .875rem; } .zd-v2 .zd-k-hero__text{ margin-bottom: 1.2rem; } } /* --- tablet: mermer otpada, ostaju tekst + kadar ------------------------- */ @media (max-width: 1099.98px){ .zd-v2 .zd-k-hero{ height: clamp(340px, 38vw, 420px); } .zd-v2 .zd-k-hero__photo, .zd-v2 .zd-k-hero__scrim{ inset: 0; } .zd-v2 .zd-k-hero__marble{ display: none; } .zd-v2 .zd-k-hero__copy{ width: 56%; } .zd-v2 .zd-k-hero__scrim{ background: linear-gradient(90deg, rgba(24,20,15,.93) 0%, rgba(24,20,15,.88) 30%, rgba(24,20,15,.78) 52%, rgba(24,20,15,.45) 68%, rgba(24,20,15,.18) 84%, rgba(24,20,15,.05) 100%); } } /* --- mobilni: jedna fotografija sa vertikalnim scrimom ------------------- */ @media (max-width: 767.98px){ /* Hero je flex kontejner da bi tekstualna kolona popunila celu visinu — inače blok ostane prilepljen uz vrh, a ispod CTA-a zjapi prazan prostor. */ .zd-v2 .zd-k-hero{ display: flex; height: auto; min-height: min(60vh, 450px); margin-top: var(--zd-header-h, 112px); } .zd-v2 .zd-k-hero__copy{ position: relative; inset: auto; width: 100%; flex: 1; padding: clamp(3.75rem, 16vw, 5rem) var(--zd-gutter) clamp(1.5rem, 6vw, 2.25rem); } .zd-v2 .zd-k-hero .zd-k-crumbs{ left: var(--zd-gutter); } .zd-v2 .zd-k-hero__scrim{ background: linear-gradient(180deg, rgba(20,18,15,.74) 0%, rgba(20,18,15,.52) 38%, rgba(20,18,15,.88) 100%); } /* Svetao prozor gore, tamniji pod dole — tamo gde stoji tekst. */ .zd-v2 .zd-k-hero__photo img{ width: 100%; object-position: center 38%; } .zd-v2 .zd-k-hero__text{ display: none; } .zd-v2 .zd-k-hero__cta{ align-self: stretch; width: 100%; } } /* -------------------------------------------------------------------------- 3. Trust traka — full-bleed, direktno ispod hero-a -------------------------------------------------------------------------- */ .zd-v2 .zd-k-trust{ background: var(--zd-bg); border-bottom: 1px solid var(--zd-line); } .zd-v2 .zd-k-trust__list{ list-style: none; margin: 0; padding-block: 1.05rem; padding-inline: var(--zk-edge); min-height: 88px; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.75rem, 1.7vw, 1.75rem); align-items: center; } .zd-v2 .zd-k-trust__item{ display: flex; align-items: center; gap: .85rem; min-width: 0; } .zd-v2 .zd-k-trust__icon{ flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--zd-accent-dark); } .zd-v2 .zd-k-trust__icon svg{ width: 24px; height: 24px; } .zd-v2 .zd-k-trust__copy{ min-width: 0; } .zd-v2 .zd-k-trust__t{ display: block; font-size: var(--zd-fs-small); font-weight: 600; color: var(--zd-ink); line-height: 1.25; } .zd-v2 .zd-k-trust__d{ display: block; font-size: var(--zd-fs-micro); color: var(--zd-ink-soft); line-height: 1.35; margin-top: 1px; } @media (max-width: 991.98px){ .zd-v2 .zd-k-trust__list{ display: flex; gap: var(--zd-5); min-height: 0; padding-block: 1.15rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .zd-v2 .zd-k-trust__list::-webkit-scrollbar{ display: none; } .zd-v2 .zd-k-trust__item{ flex: 0 0 auto; scroll-snap-align: start; flex-direction: column; align-items: center; text-align: center; gap: .4rem; width: 88px; } .zd-v2 .zd-k-trust__icon{ width: 28px; height: 28px; } .zd-v2 .zd-k-trust__icon svg{ width: 22px; height: 22px; } .zd-v2 .zd-k-trust__t{ font-size: var(--zd-fs-micro); font-weight: 600; } .zd-v2 .zd-k-trust__d{ display: none; } } /* --- mobilni: 3 + 2, drugi red matematički centriran ----------------------- Vodoravni skroler iznad je na telefonu sekao poslednje stavke van viewporta. Umesto flex trake, mreža od ŠEST kolona: svaka stavka zauzima po dve. Prvi red pokriva kolone 1-2 / 3-4 / 5-6, drugi 2-3 / 4-5 — pa su obe stavke drugog reda iste širine kao gornje i uvučene za tačno (kolona + gap) sa obe strane. Centriranje je time geometrijsko, ne „poravnanje na oko”. Ne dodaje se šesta prazna stavka i markup ostaje netaknut. -------------------------------------------------------------------------- */ @media (max-width: 767.98px){ .zd-v2 .zd-k-trust__list{ display: grid; grid-template-columns: repeat(6, 1fr); column-gap: clamp(.5rem, 2.4vw, .875rem); row-gap: clamp(.85rem, 3vw, 1.15rem); align-items: start; padding-block: .95rem; /* gasi traku iz bloka iznad: bez skrol konteksta i bez odsecanja */ overflow: visible; scroll-snap-type: none; } .zd-v2 .zd-k-trust__item{ grid-column: span 2; width: auto; /* poništava fiksnih 88px iz ≤991 bloka */ flex: initial; gap: .45rem; } .zd-v2 .zd-k-trust__item:nth-child(4){ grid-column: 2 / span 2; } .zd-v2 .zd-k-trust__item:nth-child(5){ grid-column: 4 / span 2; } .zd-v2 .zd-k-trust__icon{ width: 26px; height: 26px; } .zd-v2 .zd-k-trust__icon svg{ width: 21px; height: 21px; } .zd-v2 .zd-k-trust__t{ font-size: .75rem; line-height: 1.3; /* Prelom u dva reda je prihvatljiv — bolje nego stiskanje fonta. */ hyphens: auto; } } /* Veći telefoni i „phablet” zona (480–767): isti 3 + 2, ali sa širim ćelijama ikonica i tekst od 12 px izgledaju izgubljeno — jedan korak krupnije da blok ostane namerno dizajniran, a ne razvučen. Ispod 480 px ništa se ne menja. */ @media (min-width: 480px) and (max-width: 767.98px){ .zd-v2 .zd-k-trust__list{ row-gap: 1.25rem; padding-block: 1.1rem; } .zd-v2 .zd-k-trust__icon{ width: 30px; height: 30px; } .zd-v2 .zd-k-trust__icon svg{ width: 24px; height: 24px; } .zd-v2 .zd-k-trust__t{ font-size: .8125rem; } } /* Najuži telefoni (320–360): isti 3 + 2 raspored, samo jedan korak sitnije. */ @media (max-width: 374.98px){ .zd-v2 .zd-k-trust__list{ column-gap: .45rem; row-gap: .8rem; padding-block: .85rem; } .zd-v2 .zd-k-trust__icon{ width: 24px; height: 24px; } .zd-v2 .zd-k-trust__icon svg{ width: 19px; height: 19px; } .zd-v2 .zd-k-trust__t{ font-size: .6875rem; } } /* -------------------------------------------------------------------------- 4. Sekcije — ritam -------------------------------------------------------------------------- */ .zd-v2 .zd-k-section{ padding-block: clamp(2.5rem, 5vw, var(--zd-9)); } .zd-v2 .zd-k-section--tight{ padding-block: clamp(2rem, 3.6vw, var(--zd-8)); } .zd-v2 .zd-k-section--tint{ background: var(--zk-tint); } /* Gornji deo stranice (hero → trust → kategorije → katalog) ima namerno uži ritam od odobrenih sekcija ispod: referenca traži gust, pregledan uvod. */ .zd-v2 .zd-k-section--top{ padding-block: var(--zk-gap-md); } .zd-v2 .zd-k-trust + .zd-k-section--top{ padding-top: var(--zk-gap-sm); } .zd-v2 .zd-k-section--top .zd-k-head{ margin-bottom: var(--zk-gap-sm); } /* -------------------------------------------------------------------------- 5. Kategorije — „Istražite kategorije” (blok .zd-kc) -------------------------------------------------------------------------- Referenca: referentne slike/istrazite-kategorije.png (1942 px širine, sadržaj od x=81 do x=1863 → 1782 px). Naš shell je 1240 px, pa je skala reference ×0.696; sve mere ispod su izvedene iz tog odnosa, a ne pogođene. referenca → naš shell referenca → naš shell kartica 280.5 → 195 slika (1:1) 282 → 195 razmak 21 → 15 telo kartice 96 → 67 radijus 20 → 14 disk strelice 48 → 33 H1 62 → 43 pill CTA visina 58 → 40 (min 44 zbog dodira) Blok je namerno odvojen od starog `.zd-k-cat` imenovanja: kategorije su jedina sekcija sa ovim izgledom, pa `.zd-k-head` / `.zd-k-section` ostaju netaknuti za „Kompletnu ponudu” i sekcije ispod. -------------------------------------------------------------------------- */ .zd-v2 .zd-kc{ --zkc-radius: 14px; --zkc-gap: clamp(.7rem, 1.15vw, .95rem); --zkc-champagne: #EFDFC7; /* disk strelice — izmereno sa reference */ --zkc-champagne-hi: #E7D0A8; /* isti ton, dublji: hover */ /* Zlatna za tekst u OVOJ sekciji. Fotografska ploča je toplija i za nijansu tamnija od ravne pozadine (izmereno 238,229,218 naspram 250,247,242), pa je globalna --zd-accent-dark (#8A6A22) na njoj pala na 4.03–4.27:1 — ispod AA praga od 4.5:1 za tekst od 13 px. Ista nijansa, spuštena svetlina: 4.8:1. Popravljena je boja, a ne pozadina, da ploča ostane verna referenci. */ --zkc-gold: #7D5F1E; --zkc-panel: #FCFAF7; /* off-white, toplije od čisto belog */ --zkc-hairline: rgba(201,192,172,.55); position: relative; isolation: isolate; /* Osnovni sloj: topla „stone / ivory” podloga u gradijentima. Ostaje ispod fotografije — vidi se dok se WebP učitava (nema belog bleska) i jedini je sloj ako slika ne stigne. Zato mora sam po sebi da izgleda završeno. */ background-color: #FBF8F3; background-image: radial-gradient(120% 85% at 16% -10%, rgba(255,253,248,.95), rgba(255,253,248,0) 55%), radial-gradient(70% 65% at 82% 12%, rgba(228,206,170,.26), rgba(228,206,170,0) 62%), radial-gradient(95% 70% at 50% 108%, rgba(206,190,164,.20), rgba(206,190,164,0) 64%), linear-gradient(180deg, #FAF7F2 0%, #F8F4EC 48%, #F6F1E8 100%); } /* Dekorativna ploča: referentne slike/pozadina-kartice.png, prevedena u WebP skriptom `python scripts/build-section-bg.py` (1.6 MB PNG → 19 kB WebP). Zašto na ::before a ne na samoj sekciji: `z-index:-1` uz `isolation:isolate` na sekciji je stavlja iza sadržaja ali ISPRED osnovnog gradijenta, a veličina se po breakpointu menja jednom deklaracijom umesto prepisivanjem cele liste slojeva. Zašto jedna datoteka za sve širine: probani su i derivati po breakpointu, ali kad je slika deklarisana u dva media bloka Chrome povuče obe (mereno na ≥1200 px: 1774 + 1152). Jedan fajl od 19 kB je jeftiniji od dvostrukog preuzimanja, a na telefonu se ploča ionako uvećava preko svoje prirodne širine, pa joj puna rezolucija koristi. `image-set()` bira WebP; browseri bez njega ostaju na JPEG deklaraciji iznad, a oni sa `image-set()` ali bez WebP-a padaju na isti JPEG preko `type()`. */ .zd-v2 .zd-kc::before{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("../images/zd-kc-bg.jpg"); background-image: image-set( url("../images/zd-kc-bg.webp") type("image/webp"), url("../images/zd-kc-bg.jpg") type("image/jpeg")); background-repeat: no-repeat; /* Ispod 1200 px sekcija je visoka koliko i široka (na telefonu i znatno viša), pa bi razvlačenje na 100% 100% izobličilo maslinu i kameni ugao. `cover` zato pokazuje čist, osvetljen centar ploče: ton, tekstura i svetlo ostaju, a dekoracija se povlači umesto da pravi haos oko sadržaja. */ background-position: center; background-size: cover; } /* Široki ekrani: sekcija je 2.2–3.4 : 1, ploča je 2 : 1. `cover` bi ovde odsekao gornji i donji pojas i pojeo dva od četiri dekorativna elementa (kameni ugao gore-desno i platformu dole-desno). `100% 100%` ih zadržava sve u ćoškovima, tačno kao na referenci; vertikalno sabijanje se na ovako mekoj, rasfokusiranoj ploči ne primećuje — jedini prepoznatljiv oblik su maslinovi listići dole levo. Svesna zamena: vernost kompoziciji umesto matematički tačnog odnosa stranica. */ @media (min-width: 1200px){ .zd-v2 .zd-kc::before{ background-size: 100% 100%; } } /* --- zaglavlje: kicker + naslov + podnaslov levo, pill CTA desno ----------- */ /* CTA je na referenci vertikalno centriran na H1 (centar pilule y=139, H1 traje 106–166), a ne poravnat sa dnom podnaslova — otud `center`, ne `flex-end`. */ .zd-v2 .zd-kc__head{ display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap; margin-bottom: clamp(1.15rem, 1.9vw, 1.5rem); } .zd-v2 .zd-kc__intro{ min-width: min(100%, 22rem); } .zd-v2 .zd-kc__kicker{ display: flex; align-items: center; gap: .7rem; font-family: var(--zd-font-text); font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; color: var(--zkc-gold); margin: 0 0 clamp(.55rem, .9vw, .8rem); } .zd-v2 .zd-kc__kicker::after{ content: ""; flex: none; width: clamp(24px, 2.4vw, 32px); height: 1px; background: linear-gradient(90deg, rgba(169,131,46,.6), rgba(169,131,46,0)); } .zd-v2 .zd-kc__title{ font-family: var(--zd-font-display); font-weight: var(--zd-fw-display-light); font-size: clamp(2rem, 3.05vw, 2.75rem); line-height: 1.06; letter-spacing: -.02em; color: var(--zd-ink); margin: 0; } .zd-v2 .zd-kc__sub{ font-family: var(--zd-font-body); font-weight: var(--zd-fw-body); font-size: clamp(1rem, 1.15vw, 1.0625rem); line-height: 1.45; color: var(--zd-ink-soft); margin: .5rem 0 0; max-width: 44ch; } .zd-v2 .zd-kc__cta{ flex: none; display: inline-flex; align-items: center; gap: clamp(1rem, 1.9vw, 1.75rem); min-height: 44px; padding: .6rem clamp(1.15rem, 1.7vw, 1.5rem); border: 1px solid rgba(169,131,46,.42); border-radius: 999px; background: rgba(255,255,255,.5); font-family: var(--zd-font-body); font-weight: var(--zd-fw-cta); font-size: 1rem; color: var(--zd-ink); text-decoration: none; white-space: nowrap; transition: background-color var(--zd-t) var(--zd-ease), border-color var(--zd-t) var(--zd-ease), box-shadow var(--zd-t) var(--zd-ease); } .zd-v2 .zd-kc__cta svg{ width: 18px; height: 18px; flex: none; color: var(--zkc-gold); transition: transform var(--zd-t) var(--zd-ease); } .zd-v2 .zd-kc__cta:hover{ background: rgba(255,255,255,.85); border-color: rgba(169,131,46,.7); box-shadow: 0 8px 22px -12px rgba(138,106,34,.5); } .zd-v2 .zd-kc__cta:hover svg{ transform: translateX(4px); } /* --- mreža kartica -------------------------------------------------------- */ .zd-v2 .zd-kc__grid{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--zkc-gap); } .zd-v2 .zd-kc__item{ display: flex; } .zd-v2 .zd-kc-card{ position: relative; display: flex; flex-direction: column; width: 100%; border: 1px solid rgba(221,214,199,.7); border-radius: var(--zkc-radius); background: var(--zkc-panel); overflow: hidden; /* slika prati radijus kartice */ text-decoration: none; color: inherit; /* Mekana, široka senka — kartica „lebdi” nad podlogom bez tvrdog obruba. Tri sloja: hairline kontakt, bliska senka za obrub, daleka za dubinu. */ box-shadow: 0 1px 1px rgba(28,26,23,.04), 0 4px 10px -4px rgba(28,26,23,.10), 0 18px 34px -18px rgba(28,26,23,.26); transition: transform .45s var(--zd-ease), box-shadow .45s var(--zd-ease), border-color .45s var(--zd-ease); } .zd-v2 .zd-kc-card__media{ position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--zd-surface); } .zd-v2 .zd-kc-card__media img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--zd-ease); } /* Hover nagoveštaj preko fotografije. `pointer-events:none` da ne otima klik sa , i `aria-hidden` u markupu jer je čisto dekorativan. */ .zd-v2 .zd-kc-card__hint{ position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: .6rem; padding: 2.25rem clamp(.75rem, 1.05vw, 1rem) .8rem; font-family: var(--zd-font-body); font-weight: var(--zd-fw-ui); font-size: .8125rem; line-height: 1.2; color: #FFF; /* Scrim mora da nosi beli tekst i preko svetlih fotografija (npr. kupatilo), zato je donji stop na .82 — na 0.7 kontrast pada ispod 4.5:1. */ background: linear-gradient(180deg, rgba(22,20,17,0) 0%, rgba(22,20,17,.6) 58%, rgba(22,20,17,.82) 100%); opacity: 0; transform: translateY(10px); transition: opacity .4s var(--zd-ease), transform .4s var(--zd-ease); pointer-events: none; } .zd-v2 .zd-kc-card__hint i{ flex: none; width: 20px; height: 1px; background: rgba(255,255,255,.55); } .zd-v2 .zd-kc-card__hint svg{ flex: none; width: 16px; height: 16px; } /* Telo kartice — mreža: naziv gore, broj modela ispod, disk strelice desno preko oba reda i vertikalno centriran. */ .zd-v2 .zd-kc-card__body{ flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name go" "count go"; align-content: center; column-gap: .6rem; row-gap: .25rem; padding: clamp(.7rem, .95vw, .9rem) clamp(.75rem, 1.05vw, 1rem); } .zd-v2 .zd-kc-card__name{ grid-area: name; align-self: end; font-family: var(--zd-font-display); font-weight: var(--zd-fw-display); font-size: clamp(.875rem, 1.02vw, .9375rem); line-height: 1.2; color: var(--zd-ink); margin: 0; } .zd-v2 .zd-kc-card__count{ grid-area: count; align-self: start; font-size: clamp(.72rem, .87vw, .78125rem); line-height: 1.3; color: var(--zd-ink-soft); margin: 0; font-variant-numeric: tabular-nums; } .zd-v2 .zd-kc-card__go{ grid-area: go; align-self: center; justify-self: end; flex: none; display: grid; place-items: center; width: clamp(30px, 2.3vw, 33px); aspect-ratio: 1; border-radius: 50%; background: var(--zkc-champagne); color: #352E25; transition: background-color .35s var(--zd-ease), box-shadow .35s var(--zd-ease); } .zd-v2 .zd-kc-card__go svg{ width: 15px; height: 15px; transition: transform .35s var(--zd-ease); } /* Hover / fokus — isti vizuelni jezik, da tastatura ne bude druga klasa. */ .zd-v2 .zd-kc-card:focus-visible .zd-kc-card__hint{ opacity: 1; transform: none; } .zd-v2 .zd-kc-card:focus-visible .zd-kc-card__go{ background: var(--zkc-champagne-hi); box-shadow: 0 0 0 4px rgba(169,131,46,.12); } @media (hover: hover) and (pointer: fine){ .zd-v2 .zd-kc-card:hover{ transform: translateY(-6px); border-color: rgba(201,192,172,.9); box-shadow: 0 1px 1px rgba(28,26,23,.04), 0 8px 16px -6px rgba(28,26,23,.12), 0 34px 52px -24px rgba(28,26,23,.34); } .zd-v2 .zd-kc-card:hover .zd-kc-card__media img{ transform: scale(1.06); } .zd-v2 .zd-kc-card:hover .zd-kc-card__hint{ opacity: 1; transform: none; } .zd-v2 .zd-kc-card:hover .zd-kc-card__go{ background: var(--zkc-champagne-hi); box-shadow: 0 0 0 4px rgba(169,131,46,.12); } .zd-v2 .zd-kc-card:hover .zd-kc-card__go svg{ transform: translateX(2px); } } /* --- donji vrednosni pojas ------------------------------------------------ */ .zd-v2 .zd-kc__values{ margin-top: clamp(1.4rem, 2.4vw, 2.25rem); padding-top: clamp(1rem, 1.8vw, 1.5rem); border-top: 1px solid var(--zkc-hairline); display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 2.6vw, 2.25rem); flex-wrap: wrap; } .zd-v2 .zd-kc__vlist{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; flex: 1 1 auto; } .zd-v2 .zd-kc__value{ display: flex; align-items: center; gap: .8rem; padding-inline: clamp(1rem, 2.6vw, 2.5rem); padding-block: .1rem; } .zd-v2 .zd-kc__value:first-child{ padding-left: 0; } .zd-v2 .zd-kc__value + .zd-kc__value{ border-left: 1px solid var(--zkc-hairline); } .zd-v2 .zd-kc__vicon{ flex: none; width: 26px; height: 26px; color: var(--zkc-gold); } .zd-v2 .zd-kc__vicon svg{ width: 100%; height: 100%; display: block; } .zd-v2 .zd-kc__vt{ display: block; font-size: var(--zd-fs-small); line-height: 1.3; color: var(--zd-ink); } .zd-v2 .zd-kc__vd{ display: block; font-size: .8125rem; line-height: 1.35; color: var(--zd-ink-soft); margin-top: .15rem; } /* Dekorativni potpis. Sajt nema rukopisni webfont (isporučuju se samo ikonski), pa je najbliži ton kurzivni Georgia u zlatnoj — bez novog mrežnog troška. */ .zd-v2 .zd-kc__sign{ flex: none; margin: 0; font-family: var(--zd-font-script); font-style: italic; font-size: clamp(1rem, 1.45vw, 1.3125rem); line-height: 1.2; letter-spacing: .01em; /* Bez `opacity` — mešanje sa ivory podlogom obara kontrast ispod 4.5:1. */ color: var(--zkc-gold); white-space: nowrap; } /* --- laptop / tablet: 3 × 2 ----------------------------------------------- */ @media (max-width: 1199.98px){ .zd-v2 .zd-kc__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Na 3 kolone kvadrat bi razvukao sliku na ~230–300 px i kartica bi postala baner; niži odnos je drži u istoj proporciji kao 6-up raspored. */ .zd-v2 .zd-kc-card__media{ aspect-ratio: 16 / 11; } } /* Kad potpis prelomi u svoj red, mora da ostane desno — inače „pobegne” levo ispod prve vrednosne stavke i pojas izgleda kao greška. */ @media (max-width: 991.98px){ .zd-v2 .zd-kc__sign{ white-space: normal; margin-left: auto; } } /* --- mobilni: 2 kartice u redu -------------------------------------------- */ @media (max-width: 767.98px){ .zd-v2 .zd-kc{ --zkc-radius: 12px; } .zd-v2 .zd-kc__head{ gap: 1.15rem; } .zd-v2 .zd-kc__cta{ width: 100%; justify-content: space-between; } .zd-v2 .zd-kc__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } .zd-v2 .zd-kc-card__media{ aspect-ratio: 1 / 1; } /* Na ~160 px širine naziv i disk ne stanu u isti red, pa telo prelazi u dva reda: naziv preko pune širine, ispod broj modela + disk. */ .zd-v2 .zd-kc-card__body{ grid-template-areas: "name name" "count go"; row-gap: .45rem; padding: .7rem .75rem .75rem; } .zd-v2 .zd-kc-card__name{ align-self: start; font-size: .875rem; } .zd-v2 .zd-kc-card__count{ align-self: center; } .zd-v2 .zd-kc-card__go{ width: 30px; } .zd-v2 .zd-kc__values{ flex-direction: column; align-items: flex-start; gap: 1.1rem; margin-top: 1.5rem; } .zd-v2 .zd-kc__vlist{ flex-direction: column; align-items: flex-start; gap: .9rem; width: 100%; } .zd-v2 .zd-kc__value{ padding-inline: 0; } .zd-v2 .zd-kc__value + .zd-kc__value{ border-left: 0; } .zd-v2 .zd-kc__sign{ align-self: flex-end; } } /* Ispod 360 px zadržavamo dve kartice u redu (izričit zahtev — bez carousel-a i bez jednokolonskog pada); samo se razmaci i tipografija stežu za jedan korak. */ @media (max-width: 359.98px){ .zd-v2 .zd-kc__grid{ gap: .6rem; } .zd-v2 .zd-kc-card__body{ padding: .6rem .6rem .65rem; row-gap: .35rem; } .zd-v2 .zd-kc-card__name{ font-size: .8125rem; } .zd-v2 .zd-kc-card__go{ width: 28px; } .zd-v2 .zd-kc-card__go svg{ width: 14px; height: 14px; } } /* -------------------------------------------------------------------------- 6. Katalog — layout: levi sticky filter stub + mreža proizvoda desno -------------------------------------------------------------------------- */ .zd-v2 .zd-k-catalog{ scroll-margin-top: calc(var(--zd-nav-h) + 12px); } .zd-v2 .zd-k-layout{ display: grid; grid-template-columns: var(--zk-side-w) minmax(0, 1fr); gap: clamp(1.25rem, 2.4vw, 2.25rem); align-items: start; } .zd-v2 .zd-k-results{ min-width: 0; } /* --- levi stub ---------------------------------------------------------- */ .zd-v2 .zd-k-side{ position: sticky; top: calc(var(--zd-nav-h) + 16px); max-height: calc(100vh - var(--zd-nav-h) - 32px); overflow-y: auto; overscroll-behavior: contain; /* Kartice sekcija nose podlogu i bordure — stub je samo nosač, bez okvira, sa par piksela vazduha da mu skrol ne odseče senke kartica. */ background: none; border: 0; padding: 2px 3px var(--zd-2); scrollbar-width: thin; } .zd-v2 .zd-k-side__head{ display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: 0 .3rem .7rem; } .zd-v2 .zd-k-side .zd-k-acc__btn{ min-height: 50px; padding: .7rem .85rem; font-size: 1rem; } .zd-v2 .zd-k-side .zd-k-acc__panel{ padding: .1rem .85rem .85rem; } .zd-v2 .zd-k-side .zd-k-opts{ grid-template-columns: 1fr; } .zd-v2 .zd-k-side .zd-k-opts--sw{ grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: .5rem .4rem; } .zd-v2 .zd-k-side .zd-k-sw{ max-width: 46px; } .zd-v2 .zd-k-side .zd-k-price__row{ grid-template-columns: 1fr; } .zd-v2 .zd-k-side__title{ font-size: var(--zd-fs-micro); letter-spacing: var(--zd-ls-eyebrow); text-transform: uppercase; color: var(--zd-ink-soft); margin: 0; } .zd-v2 .zd-k-side__reset{ background: none; border: 0; padding: .2rem 0; cursor: pointer; font-family: var(--zd-font-text); font-size: var(--zd-fs-micro); color: var(--zd-accent-dark); text-decoration: underline; text-underline-offset: 3px; } .zd-v2 .zd-k-side__reset[hidden]{ display: none; } .zd-v2 .zd-k-side__reset:hover{ color: var(--zd-ink); } /* .zd-k-facet__tally ostaje — nosi ga dugme „Filteri” u mobilnoj traci. */ .zd-v2 .zd-k-facet__tally{ display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: 9px; background: var(--zd-accent-dark); color: #fff; font-size: .6875rem; font-weight: 600; } /* -------------------------------------------------------------------------- 6b. Filter panel — zajednički sistem za bočnu kolonu i mobilni drawer -------------------------------------------------------------------------- */ /* Svaka grupa filtera je zasebna kartica: krem podloga, vrlo suptilna bordura, nežna senka. Ista komponenta se koristi na oba mesta — jedan izvor istine. */ .zd-v2 .zd-k-acc{ background: var(--zk-f-card); border: 1px solid var(--zk-f-line); border-radius: var(--zk-f-radius); box-shadow: var(--zk-f-shadow); } .zd-v2 .zd-k-acc + .zd-k-acc{ margin-top: .625rem; } .zd-v2 .zd-k-acc__h{ margin: 0; font: inherit; } .zd-v2 .zd-k-acc__btn{ width: 100%; display: flex; align-items: center; gap: .7rem; min-height: 56px; padding: .85rem 1rem; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--zd-font-display); font-weight: var(--zd-fw-display); font-size: 1.0625rem; letter-spacing: -.005em; line-height: 1.25; color: var(--zd-ink); border-radius: var(--zk-f-radius); } .zd-v2 .zd-k-acc__icon{ flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--zd-accent-dark); } .zd-v2 .zd-k-acc__icon svg{ width: 21px; height: 21px; } .zd-v2 .zd-k-acc__label{ flex: 1; min-width: 0; } .zd-v2 .zd-k-acc__tally{ flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 10px; background: var(--zd-accent-dark); color: #fff; font-family: var(--zd-font-text); font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; } .zd-v2 .zd-k-acc__caret{ flex: none; width: 17px; height: 17px; color: var(--zd-ink-soft); transition: transform var(--zd-t-fast) var(--zd-ease); } .zd-v2 .zd-k-acc__btn[aria-expanded="true"] .zd-k-acc__caret{ transform: rotate(180deg); } .zd-v2 .zd-k-acc__btn:hover .zd-k-acc__label{ color: var(--zd-accent-dark); } .zd-v2 .zd-k-acc__panel{ padding: .1rem 1rem 1rem; } .zd-v2 .zd-k-acc__panel[hidden]{ display: none; } /* „Prikaži još (6)” / „Prikaži sve (72)” */ .zd-v2 .zd-k-acc__more{ width: 100%; display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 42px; margin-top: .45rem; padding: .5rem; background: none; border: 0; cursor: pointer; font-family: var(--zd-font-text); font-size: .8125rem; font-weight: 500; color: var(--zd-accent-dark); border-top: 1px solid var(--zk-f-line); } .zd-v2 .zd-k-acc__more svg{ width: 14px; height: 14px; } .zd-v2 .zd-k-acc__more:hover{ color: var(--zd-ink); } /* --- lista opcija ------------------------------------------------------- */ .zd-v2 .zd-k-opts{ display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: .1rem .75rem; align-items: start; } .zd-v2 .zd-k-opt{ position: relative; display: flex; align-items: center; gap: .6rem; min-height: 42px; padding: .4rem .2rem; font-family: var(--zd-font-text); font-size: .8125rem; line-height: 1.3; color: var(--zd-ink); cursor: pointer; border-radius: 6px; } /* Native input ostaje u DOM-u i fokusabilan je — samo je providan preko reda. */ .zd-v2 .zd-k-opt input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .zd-v2 .zd-k-opt__box{ flex: none; display: grid; place-items: center; width: 20px; height: 20px; background: #fff; border: 1px solid var(--zd-line-strong); border-radius: 5px; color: #fff; transition: background-color var(--zd-t-fast), border-color var(--zd-t-fast); } .zd-v2 .zd-k-opt__box svg{ width: 13px; height: 13px; opacity: 0; transition: opacity var(--zd-t-fast); } .zd-v2 .zd-k-opt:hover .zd-k-opt__box{ border-color: var(--zd-accent); } .zd-v2 .zd-k-opt input:checked + .zd-k-opt__box{ background: var(--zd-accent-dark); border-color: var(--zd-accent-dark); } .zd-v2 .zd-k-opt input:checked + .zd-k-opt__box svg{ opacity: 1; } .zd-v2 .zd-k-opt input:focus-visible{ outline: none; } .zd-v2 .zd-k-opt input:focus-visible + .zd-k-opt__box{ outline: 2px solid var(--zd-accent); outline-offset: 2px; } .zd-v2 .zd-k-opt:has(input:focus-visible){ background: var(--zd-accent-soft); } .zd-v2 .zd-k-opt__label{ flex: 1; min-width: 0; } .zd-v2 .zd-k-opt__n{ flex: none; color: var(--zd-ink-soft); font-size: .8125rem; font-variant-numeric: tabular-nums; } .zd-v2 .zd-k-opt--disabled{ opacity: .34; cursor: not-allowed; } .zd-v2 .zd-k-opt--disabled:hover .zd-k-opt__box{ border-color: var(--zd-line-strong); } /* --- Boja: mreža kružnih uzoraka (bez teksta, po referenci) -------------- */ .zd-v2 .zd-k-opts--sw{ grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .6rem .5rem; justify-items: center; } .zd-v2 .zd-k-sw{ position: relative; display: grid; place-items: center; width: 100%; max-width: 54px; aspect-ratio: 1; min-height: 44px; border-radius: 50%; cursor: pointer; } .zd-v2 .zd-k-sw input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; border-radius: 50%; } .zd-v2 .zd-k-sw__dot{ display: grid; place-items: center; width: 80%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(28,26,23,.14); box-shadow: inset 0 1px 2px rgba(255,255,255,.4), 0 1px 3px rgba(28,26,23,.12); color: var(--zd-ink); transition: transform var(--zd-t-fast) var(--zd-ease), box-shadow var(--zd-t-fast); } /* Kvačica mora da se vidi i na beloj i na crnoj pločici. */ .zd-v2 .zd-k-sw__dot svg{ width: 17px; height: 17px; opacity: 0; filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 4px rgba(255,255,255,.7)); transition: opacity var(--zd-t-fast); } .zd-v2 .zd-k-sw:hover .zd-k-sw__dot{ transform: scale(1.07); } .zd-v2 .zd-k-sw input:checked + .zd-k-sw__dot{ box-shadow: 0 0 0 2px var(--zk-f-card), 0 0 0 4px var(--zd-accent); } .zd-v2 .zd-k-sw input:checked + .zd-k-sw__dot svg{ opacity: 1; } .zd-v2 .zd-k-sw input:focus-visible{ outline: none; } .zd-v2 .zd-k-sw input:focus-visible + .zd-k-sw__dot{ box-shadow: 0 0 0 2px var(--zk-f-card), 0 0 0 4px var(--zd-accent-dark); } .zd-v2 .zd-k-sw--disabled{ opacity: .3; cursor: not-allowed; } .zd-v2 .zd-k-sw--disabled:hover .zd-k-sw__dot{ transform: none; } /* --- Cena: polja + histogram + dual range ------------------------------- */ .zd-v2 .zd-k-price{ display: grid; gap: .55rem; } .zd-v2 .zd-k-price__row{ display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; } .zd-v2 .zd-k-price__field{ position: relative; display: block; } .zd-v2 .zd-k-price__field input{ width: 100%; min-height: 48px; padding: .7rem 3.05rem .7rem .85rem; font-family: var(--zd-font-text); font-size: .9375rem; color: var(--zd-ink); background: #fff; border: 1px solid var(--zd-line-strong); border-radius: 8px; appearance: textfield; -moz-appearance: textfield; transition: border-color var(--zd-t-fast), box-shadow var(--zd-t-fast); } .zd-v2 .zd-k-price__field input::-webkit-outer-spin-button, .zd-v2 .zd-k-price__field input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } .zd-v2 .zd-k-price__field input:focus{ border-color: var(--zd-accent); box-shadow: 0 0 0 3px var(--zd-accent-soft); } .zd-v2 .zd-k-price__cur{ position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); font-family: var(--zd-font-text); font-size: .8125rem; letter-spacing: .03em; color: var(--zd-ink-soft); pointer-events: none; } .zd-v2 .zd-k-range{ position: relative; height: 76px; padding: 0 11px; } .zd-v2 .zd-k-hist{ position: absolute; left: 11px; right: 11px; top: 4px; bottom: 30px; display: flex; align-items: flex-end; gap: 2px; } .zd-v2 .zd-k-hist__b{ flex: 1 1 0; min-width: 0; background: var(--zk-f-hist); border-radius: 2px 2px 0 0; transition: background-color var(--zd-t-fast); } .zd-v2 .zd-k-hist__b.is-on{ background: var(--zk-f-hist-on); } .zd-v2 .zd-k-range__rail{ position: absolute; left: 11px; right: 11px; bottom: 26px; height: 3px; border-radius: 2px; background: var(--zd-line-strong); } .zd-v2 .zd-k-range__fill{ position: absolute; top: 0; bottom: 0; background: var(--zd-accent); border-radius: 2px; } /* Dva native range inputa preko iste šine: tastatura radi, a klik prolazi kroz traku do onog inputa čija je ručica ispod prsta. */ .zd-v2 .zd-k-range__in{ position: absolute; left: 0; right: 0; bottom: 12px; width: 100%; height: 32px; margin: 0; -webkit-appearance: none; appearance: none; background: none; pointer-events: none; } .zd-v2 .zd-k-range__in::-webkit-slider-runnable-track{ height: 32px; background: none; border: 0; } .zd-v2 .zd-k-range__in::-moz-range-track{ height: 32px; background: none; border: 0; } .zd-v2 .zd-k-range__in::-webkit-slider-thumb{ -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 5px; border-radius: 50%; background: #fff; border: 2.5px solid var(--zd-accent); box-shadow: 0 2px 6px rgba(28,26,23,.22); cursor: grab; } .zd-v2 .zd-k-range__in::-moz-range-thumb{ pointer-events: auto; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 2.5px solid var(--zd-accent); box-shadow: 0 2px 6px rgba(28,26,23,.22); cursor: grab; } .zd-v2 .zd-k-range__in:focus-visible{ outline: none; } .zd-v2 .zd-k-range__in:focus-visible::-webkit-slider-thumb{ outline: 2px solid var(--zd-accent-dark); outline-offset: 2px; } .zd-v2 .zd-k-range__in:focus-visible::-moz-range-thumb{ outline: 2px solid var(--zd-accent-dark); outline-offset: 2px; } .zd-v2 .zd-k-price__ends{ display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: -.55rem 0 0; font-family: var(--zd-font-text); font-size: .8125rem; font-weight: 500; color: var(--zd-ink); font-variant-numeric: tabular-nums; } .zd-v2 .zd-k-price__note{ margin: 0; font-size: var(--zd-fs-micro); line-height: 1.45; color: var(--zd-ink-soft); } /* Pretraga unutar kataloga */ .zd-v2 .zd-k-find{ position: relative; display: flex; align-items: center; min-width: 180px; flex: 0 1 264px; } .zd-v2 .zd-k-find svg{ position: absolute; left: .7rem; width: 17px; height: 17px; color: var(--zd-ink-soft); pointer-events: none; } .zd-v2 .zd-k-find input{ width: 100%; min-height: 44px; padding: .55rem .75rem .55rem 2.3rem; font-family: var(--zd-font-text); font-size: var(--zd-fs-small); color: var(--zd-ink); background: var(--zk-panel); border: 1px solid var(--zd-line); border-radius: var(--zd-radius-sm); } .zd-v2 .zd-k-find input::placeholder{ color: var(--zd-ink-soft); } .zd-v2 .zd-k-find input:focus{ border-color: var(--zd-line-strong); } /* Sortiranje */ .zd-v2 .zd-k-sort{ display: flex; align-items: center; gap: .5rem; } .zd-v2 .zd-k-sort label{ font-size: var(--zd-fs-micro); color: var(--zd-ink-soft); letter-spacing: .06em; text-transform: uppercase; } .zd-v2 .zd-k-sort select{ min-height: 44px; padding: .5rem 2rem .5rem .8rem; font-family: var(--zd-font-text); font-size: var(--zd-fs-small); color: var(--zd-ink); background: var(--zk-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B564C' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .55rem center / 14px; border: 1px solid var(--zd-line); border-radius: var(--zd-radius-sm); -webkit-appearance: none; appearance: none; cursor: pointer; } /* Aktivni filteri */ .zd-v2 .zd-k-active{ display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; padding-bottom: var(--zd-4); } .zd-v2 .zd-k-active[hidden]{ display: none; } .zd-v2 .zd-k-chip{ display: inline-flex; align-items: center; gap: .45rem; min-height: 34px; padding: .3rem .35rem .3rem .7rem; background: var(--zd-accent-soft); border: 1px solid rgba(169,131,46,.32); border-radius: 999px; font-family: var(--zd-font-text); font-size: var(--zd-fs-micro); color: var(--zd-accent-dark); cursor: pointer; transition: background-color var(--zd-t-fast); } .zd-v2 .zd-k-chip:hover{ background: rgba(169,131,46,.2); } .zd-v2 .zd-k-chip svg{ width: 13px; height: 13px; flex: none; } .zd-v2 .zd-k-chip__x{ display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(169,131,46,.18); } .zd-v2 .zd-k-clear{ background: none; border: 0; cursor: pointer; font-family: var(--zd-font-text); font-size: var(--zd-fs-micro); color: var(--zd-ink-soft); text-decoration: underline; text-underline-offset: 3px; padding: .4rem .2rem; min-height: 34px; } .zd-v2 .zd-k-clear:hover{ color: var(--zd-ink); } /* Zaglavlje rezultata: broj levo, pretraga + sortiranje desno */ .zd-v2 .zd-k-rhead{ display: flex; align-items: center; justify-content: space-between; gap: var(--zd-4); flex-wrap: wrap; padding-bottom: var(--zd-4); } /* Pretraga i sortiranje moraju ostati u JEDNOM redu desno; `wrap` ih je lomio u dva reda i razbijao liniju sa brojem rezultata. */ .zd-v2 .zd-k-rhead__tools{ display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; flex: 0 1 auto; min-width: 0; margin-left: auto; } /* Broj rezultata */ .zd-v2 .zd-k-count{ font-size: var(--zd-fs-small); color: var(--zd-ink-soft); margin: 0; font-variant-numeric: tabular-nums; } .zd-v2 .zd-k-count b{ color: var(--zd-ink); font-weight: 600; } /* Poruka o grešci pri učitavanju kataloga — vidljiva samo kad fetch stvarno padne (vidi ensureData() u zd-keramika.js). Nikada u normalnom stanju. */ .zd-v2 .zd-k-note{ font-size: var(--zd-fs-small); line-height: 1.5; margin: 0 0 var(--zd-4); } .zd-v2 .zd-k-note[hidden]{ display: none; } .zd-v2 .zd-k-note--error{ padding: .7rem .9rem; background: var(--zd-accent-soft); border-left: 3px solid var(--zd-accent); color: var(--zd-ink); } /* -------------------------------------------------------------------------- 7. Mreža proizvoda -------------------------------------------------------------------------- */ /* Tri proizvoda u redu desno od filter stuba (ranije pet preko cele širine). */ .zd-v2 .zd-k-grid{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zk-card-gap); } /* Četiri kolone tek kad široki shell to može da nosi. Podnožje kartice u punoj skali (cena + „Detaljnije”) mora da primi i najdužu cenu u katalogu („34.000 RSD/kom”) — izmereno, to traži kartica ≥ ~270 px. Sa filterom od 280 px prag je viewport 1600 px. Merenja sa Windows scrollbarom (17 px): 1600 → 278 px, 1920 → 314 px. Na 1536 px (262 px) najduža cena već izlazi iz podnožja, a na 1440 px bi kartica imala ~238 px — zato tu ostaju tri kolone (1440 → 325 px). Ispod 1200 px važi postojeća lestvica (drawer). */ @media (min-width: 1600px){ .zd-v2 .zd-k-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } .zd-v2 .zd-k-card{ position: relative; display: flex; flex-direction: column; background: var(--zk-panel); border: 1px solid var(--zk-card-line); border-radius: var(--zk-card-radius); box-shadow: var(--zk-card-shadow); /* Seče sliku, bedževe i rastegnuti link tačno po radijusu — ništa ne viri van ugla, a ni klik u „odsečenom” uglu ne pada na karticu. Fokus prsten (outline) nije pogođen: outline se ne seče sopstvenim overflow-om. */ overflow: hidden; transition: border-color var(--zd-t-fast) var(--zd-ease), box-shadow var(--zd-t) var(--zd-ease), transform var(--zd-t) var(--zd-ease); } /* Pejzažni kadar (3:2, kao na referenci) drži karticu nisko i elegantno — kvadratni format je pravio previsoke kartice u tro-kolonskoj mreži. */ .zd-v2 .zd-k-card__media{ position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--zd-surface); /* Gornji uglovi prate karticu (radijus minus okvir od 1px). `isolation` drži zumiranu sliku u sopstvenom sloju — bez njega Safari tokom tranzicije kratko iscrta oštre uglove. */ border-radius: calc(var(--zk-card-radius) - 1px) calc(var(--zk-card-radius) - 1px) 0 0; isolation: isolate; } /* Kadar kartice nosi ISKLJUČIVO fotografiju tog SKU (`p.img`) — jedinstvenu za svih 672 modela. Ambijent kolekcije je namerno UKLONJEN iz mreže (20.09.2026): jedna kolekcija ima u proseku 6,5 SKU-ova, pa se ista fotografija prostora ponavljala na svakoj kartici te kolekcije i obarala premium utisak. Verifikovani ambijenti su sačuvani u assets/custom/zd-keramika-ambients.json za product-detail, zaglavlja kategorija i Inspiration sekcije. */ .zd-v2 .zd-k-card__img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--zd-ease); } .zd-v2 .zd-k-card__badges{ position: absolute; top: .55rem; left: .55rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; max-width: calc(100% - 1.1rem); } .zd-v2 .zd-k-badge{ display: inline-block; padding: .22rem .5rem; background: rgba(28,26,23,.86); color: var(--zd-ink-invert); font-size: .6875rem; letter-spacing: .04em; border-radius: var(--zd-radius-sm); backdrop-filter: saturate(120%); } .zd-v2 .zd-k-badge--gold{ background: var(--zd-accent-dark); } .zd-v2 .zd-k-badge--quiet{ background: rgba(255,255,255,.92); color: var(--zd-ink); border: 1px solid var(--zd-line); } .zd-v2 .zd-k-card__body{ display: flex; flex-direction: column; gap: .2rem; padding: .75rem .85rem .85rem; flex: 1; } .zd-v2 .zd-k-card__brand{ font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zd-ink-soft); margin: 0; } .zd-v2 .zd-k-card__name{ font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--zd-ink); margin: 0; } .zd-v2 .zd-k-card__name a{ color: inherit; text-decoration: none; } .zd-v2 .zd-k-card__name a::after{ content: ""; position: absolute; inset: 0; z-index: 1; } /* Dva reda, sa rezervisanom visinom: 3 od 672 modela nemaju nijedan atribut za drugi red, a kartice u istom redu moraju ostati jednake. */ .zd-v2 .zd-k-card__meta{ font-size: var(--zd-fs-micro); color: var(--zd-ink-soft); margin: .1rem 0 0; line-height: 1.4; min-height: 1.4em; } /* Podnožje kartice: cena levo (podatak), CTA desno (radnja). `margin-top: auto` gura red na dno, pa su podnožja svih kartica u redu poravnata bez obzira na to koliko redova zauzme naziv. */ .zd-v2 .zd-k-card__foot{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .7rem; } /* Cena je PODATAK, ne radnja: meka pločica bez hover stanja, bez pokazivača i bez senke, da se ni na trenutak ne pročita kao dugme. Radnja je isključivo „Detaljnije". Upit je namerno uklonjen sa kartice — živi na product-detail stranici, gde nosi pun kontekst modela. */ .zd-v2 .zd-k-card__price{ display: inline-flex; align-items: baseline; gap: .3em; margin: 0; padding: .3rem .6rem; background: var(--zk-tint); border: 1px solid var(--zd-line); border-radius: 6px; font-size: 1.0625rem; font-weight: 700; line-height: 1.2; color: var(--zd-ink); font-variant-numeric: tabular-nums; } /* `RSD/m²` ima prelomnu tačku posle kose crte: u užoj kartici se lomilo u dva reda i diglo pločicu sa 32px na 52px. Cena je jedan podatak i ne prelama se. */ .zd-v2 .zd-k-card__price{ white-space: nowrap; } /* Uska kartica (od 1200 px naviše, kartica ~249–264 px): najduže cene („34.000 RSD/kom", „12.990 RSD/kom", „4.890 RSD/kom") + „Detaljnije" traže do 234 px, a podnožje ima 220–234 px. Pločica cene je bila flex stavka sa `min-width: auto` + `nowrap`, a CTA `flex: none` — nijedna nije mogla da se skupi, pa je CTA izlazio iz podnožja i kartica (overflow: hidden) ga je sekla. `min-width: 0` pušta pločicu da se skupi, a `flex-wrap` tada spušta jedinicu ispod broja (broj i jedinica ostaju celi — `nowrap` važi unutar svakog dela). Dešava se samo kad mesta zaista nema; sve ostale kartice su nepromenjene. Ispod 1200 px podnožje već ima `flex-wrap: wrap`, pa tamo CTA prelazi u novi red pre nego što bi se cena skupila — to ponašanje ostaje isto. */ .zd-v2 .zd-k-card__price{ flex-wrap: wrap; row-gap: 0; min-width: 0; } .zd-v2 .zd-k-card__price span{ font-size: .6875rem; font-weight: 500; color: var(--zd-ink-soft); letter-spacing: .02em; } .zd-v2 .zd-k-card__price--request{ font-size: .9375rem; font-weight: 600; color: var(--zd-accent-dark); } /* CTA „Detaljnije" — pravi na isti URL kao i kartica. `z-index: 2` ga diže iznad rastegnutog `::after` naziva (z-index 1), pa klik pogađa dugme, a klik bilo gde drugde i dalje pogađa karticu — bez JS-a i bez ugnežđenih linkova (oba su siblings u istoj kartici). Grafitni outline koji se na hover popunjava: isti jezik kao „Prikaži još" dugme sekcije, samo manji. Radijus 6px = radijus cene, pa podnožje ima jednu geometriju. */ .zd-v2 .zd-k-card__cta{ position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: .45rem .85rem; border: 1px solid var(--zd-ink); border-radius: 6px; background: transparent; color: var(--zd-ink); font-family: var(--zd-font-text); font-size: .8125rem; font-weight: 600; line-height: 1; letter-spacing: .01em; text-decoration: none; white-space: nowrap; transition: background-color var(--zd-t-fast), color var(--zd-t-fast); } .zd-v2 .zd-k-card__cta:hover{ background: var(--zd-ink); color: var(--zd-ink-invert); } .zd-v2 .zd-k-card__cta:focus-visible{ outline: 2px solid var(--zd-accent); outline-offset: 2px; } /* Jedini hover efekat na kartici: vrlo blag zum fotografije pločice. Bez zamene kadra, bez kontrola u slici. 1.04 na .55s sa `--zd-ease` — pomeraj se jedva registruje, ali kartica prestaje da deluje statično. */ @media (hover: hover) and (pointer: fine){ .zd-v2 .zd-k-card:hover{ border-color: var(--zk-card-line-hover); box-shadow: var(--zk-card-shadow-hover); transform: translateY(var(--zk-card-lift)); } .zd-v2 .zd-k-card:hover .zd-k-card__img{ transform: scale(1.04); } } .zd-v2 .zd-k-card:focus-within{ border-color: var(--zd-accent); } /* Lestvica kolona je izmerena prema rezoluciji fotografija pločica (medijana 487 px posle isečka 3:2). Ranije je 992–1199 nosio tri kolone (kartica 356 px), a 768–991 dve (kartica čak 449 px) — slike su tu bile rastegnute preko svoje stvarne veličine. Sada nijedan breakpoint ne traži više od ~300 px po kartici. */ @media (max-width: 1199.98px){ .zd-v2 .zd-k-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } /* Ispod 1200px kartica pada na ~218–263px, a podnožje na ~189–234px. Par cena + CTA u punoj skali traži 217px, pa oboje gube po stepen i ostaju u jednom redu. `flex-wrap: wrap` je sigurnosni ventil za retke najšire nizove („Cena na upit", petocifrene cene) na najužim karticama u ovom opsegu: ta jedna kartica prelomi CTA u svoj red umesto da se prelije izvan okvira. Tipična kartica ostaje u jednom redu. */ .zd-v2 .zd-k-card__foot{ gap: .3rem; flex-wrap: wrap; } .zd-v2 .zd-k-card__price{ font-size: .875rem; padding: .24rem .42rem; } .zd-v2 .zd-k-card__cta{ padding: .45rem .55rem; font-size: .75rem; } } @media (max-width: 991.98px){ .zd-v2 .zd-k-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 767.98px){ .zd-v2 .zd-k-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; } .zd-v2 .zd-k-card__body{ padding: .6rem .65rem .7rem; } .zd-v2 .zd-k-card__name{ font-size: .875rem; } .zd-v2 .zd-k-card__foot{ gap: .35rem; padding-top: .55rem; } .zd-v2 .zd-k-card__price{ font-size: .875rem; padding: .24rem .4rem; } .zd-v2 .zd-k-card__price span{ font-size: .625rem; } .zd-v2 .zd-k-card__cta{ min-height: 44px; padding: .4rem .55rem; font-size: .75rem; } } /* 360–479 px: kartica je ~154–190px, a podnožje ~131–165px. Izmereno, najuži čitljiv par je cena ~95px + CTA ~62px + razmak = ~161px — ne staje ni uz najagresivnije skupljanje. Umesto da se cena skuplja do neupotrebljivog ili da stranica dobije horizontalni skrol, CTA ide u svoj red preko pune širine. To je jedini breakpoint gde se par razdvaja. */ @media (max-width: 479.98px){ .zd-v2 .zd-k-card__foot{ flex-direction: column; align-items: stretch; gap: .4rem; } .zd-v2 .zd-k-card__price{ align-self: flex-start; } .zd-v2 .zd-k-card__cta{ width: 100%; } } /* Ispod 480 px kartica je ~214 px — četiri reda teksta guše cenu, pa drugi meta red (dimenzija · obrada) izlazi. Podatak ostaje na product stranici. */ @media (max-width: 479.98px){ .zd-v2 .zd-k-card__meta--2{ display: none; } } @media (max-width: 359.98px){ .zd-v2 .zd-k-grid{ grid-template-columns: 1fr; } } /* Prazno stanje */ .zd-v2 .zd-k-empty{ border: 1px dashed var(--zd-line-strong); background: var(--zk-panel); padding: clamp(2rem, 6vw, 3.5rem) var(--zd-5); text-align: center; } .zd-v2 .zd-k-empty[hidden]{ display: none; } .zd-v2 .zd-k-empty__t{ font-family: var(--zd-font-display); font-weight: var(--zd-fw-display-light); font-size: 1.25rem; color: var(--zd-ink); margin: 0 0 .5rem; } .zd-v2 .zd-k-empty__d{ font-size: var(--zd-fs-small); color: var(--zd-ink-soft); margin: 0 auto var(--zd-5); max-width: 46ch; } /* Load more */ .zd-v2 .zd-k-more{ display: flex; flex-direction: column; align-items: center; gap: .75rem; padding-top: var(--zd-6); } .zd-v2 .zd-k-more[hidden]{ display: none; } .zd-v2 .zd-k-more__btn{ min-height: 48px; padding: .8rem 2rem; font-family: var(--zd-font-text); font-size: var(--zd-fs-small); letter-spacing: .045em; text-transform: uppercase; color: var(--zd-ink); background: var(--zk-panel); border: 1px solid var(--zd-ink); border-radius: var(--zd-radius-sm); cursor: pointer; transition: background-color var(--zd-t-fast), color var(--zd-t-fast); } .zd-v2 .zd-k-more__btn:hover{ background: var(--zd-ink); color: var(--zd-ink-invert); } .zd-v2 .zd-k-more__n{ font-size: var(--zd-fs-micro); color: var(--zd-ink-soft); margin: 0; } /* -------------------------------------------------------------------------- 8. Mobilni filter — sticky traka + bottom sheet -------------------------------------------------------------------------- */ .zd-v2 .zd-k-mfilter{ display: none; } @media (max-width: 1199.98px){ /* Ispod 1200px nema levog stuba — na 1024 bi stub od 280px ostavio samo ~200px po kartici. Tu filtriranje ide kroz bottom sheet, a broj rezultata i sortiranje ostaju vidljivi iznad mreže. */ .zd-v2 .zd-k-side{ display: none; } .zd-v2 .zd-k-layout{ display: block; } .zd-v2 .zd-k-find{ display: none; } .zd-v2 .zd-k-rhead{ gap: .75rem; } /* Zalepljena traka mora da stane ISPOD plutajuće nav kartice. Ranije je stajalo `top: var(--zd-nav-h-mobile)` — konstanta od 64px iz foundation sloja, zaostala iz vremena pre ovog headera i nigde drugde korišćena. Stvarna visina headera nije 64px ni na jednom breakpointu: ≤767.98 --zd-topbar-h je 0 i traka je display:none → 8 + 68 = 76px 768–991 info traka je vidljiva, a .is-scrolled kolaps važi tek od 992px (zd-home.css:44) → 36 + 8 + 68 = 112px 992–1199 header se pri skrolu skuplja za info traku → 12 + 76 = 88px `--zd-header-h` (topbar + inset + nav) daje tačno prva dva reda, jer je `--zd-topbar-h` ispod 768px već 0. Za 992–1199 važi `--zk-nav-safe`, isti token kojim se računa hero (linije 316 i 323), pa je to zaseban blok niže. Razlika je bila 12px na telefonu i 48px na tabletu — toliko je crno „Filteri“ dugme ulazilo pod zaobljeni donji rub kartice. −1px umesto 0: traka tako ulazi tačno 1px pod karticu (kartica je z-index 60, traka 30, pa je kartica prekriva) i nijedan red teksta ne može da „procuri“ kroz polupiksel između kartice i trake. Pozadina je `--zk-tint`, a ne `--zd-bg`: traka uvek lebdi nad sekcijom `.zd-k-section--tint`, pa je sa `--zd-bg` bila svetlija traka od podloge. `margin-bottom` daje vertikalni ritam — bez njega broj rezultata i mreža počinju tačno na 0px od donje ivice trake. */ .zd-v2 .zd-k-mfilter{ display: block; position: sticky; top: calc(var(--zd-header-h) - 1px); z-index: 30; background: var(--zk-tint); border-bottom: 1px solid var(--zd-line); margin-inline: calc(-1 * var(--zd-gutter)); margin-bottom: var(--zd-3); padding: .6rem var(--zd-gutter); } /* Traka nosi jedan jedini CTA. Brzi chipovi su uklonjeni (vidi komentar u zd-keramika.js), pa red više ne mora da bude horizontalni skroler: nema `overflow-x`, `scroll-snap` ni `position:sticky` na dugmetu — to je sve postojalo samo da dugme ostane na mestu dok chipovi klize pored njega. */ .zd-v2 .zd-k-mfilter__row{ display: flex; align-items: center; gap: .45rem; } .zd-v2 .zd-k-mfilter__open{ display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .45rem .85rem; background: var(--zd-ink); color: var(--zd-ink-invert); border: 1px solid var(--zd-ink); border-radius: 999px; font-family: var(--zd-font-text); font-size: var(--zd-fs-micro); letter-spacing: .04em; cursor: pointer; white-space: nowrap; } .zd-v2 .zd-k-mfilter__open svg{ width: 15px; height: 15px; } .zd-v2 .zd-k-mfilter__open .zd-k-facet__tally{ background: var(--zd-gold-on-dark); color: #1C1A17; } } /* Od 992px naviše header pri skrolu uvlači info traku (.is-scrolled), pa je njegova donja ivica tada `--zk-nav-safe`, a ne pun `--zd-header-h`. */ @media (min-width: 992px) and (max-width: 1199.98px){ .zd-v2 .zd-k-mfilter{ top: calc(var(--zk-nav-safe) - 1px); } } /* -------------------------------------------------------------------------- 8a. Uvod kataloga + traka iznad mreže („Kompletna ponuda” / „Izaberite model”) -------------------------------------------------------------------------- Sve je vezano za #zd-k-catalog, pa .zd-k-head u FAQ, Inspiraciji i ostalim sekcijama ostaje kakav je bio. Nema novog hero-a: blok zadržava visinu, a strukturu mu daju eyebrow, jedna linija opisa i razdelnik sa kratkim zlatnim segmentom. Traka iznad mreže i zaglavlje filtera dele istu visinu (--zk-bar-h) i isti donji razmak (--zk-bar-gap) — zato vrh prve kartice filtera i vrh prve kartice proizvoda stoje u istoj ravni. -------------------------------------------------------------------------- */ .zd-v2 #zd-k-catalog{ --zk-bar-h: 44px; --zk-bar-gap: 1rem; --zk-ctl-radius: 8px; --zk-ctl-line: var(--zk-f-line); --zk-ctl-line-hover: #D9D0BE; --zk-ctl-shadow: 0 1px 2px rgba(24,20,14,.04); --zk-ctl-ring: 0 0 0 3px rgba(169,131,46,.20); } /* --- ambijent: pozadina listinga --------------------------------------- */ /* Svetla, topla bela baza umesto ravnog krem tona (--zk-tint), sa tri vrlo tiha radijalna sjaja. Sve je u background slojevima same sekcije — bez pseudo-elemenata, bez markupa, bez blur filtera (nula GPU troška). 1. champagne sjaj iza uvoda (gore levo) 2. zlatkast sjaj oko trake pretrage/sortiranja (gore desno) 3. tihi ivory sjaj niže u mreži, da razbije monotoniju Položaji su u px od vrha, ne u %: sekcija menja visinu sa filtriranjem i „Prikaži još”, a sjaji ne smeju da putuju zajedno s njom. Prvih ~260 px baza kreće od tona dna sekcije iznad (#F2ECE2), pa na spoju nema tvrde ivice. --zk-tint se NE menja — nosi ga i bedž cene na kartici. */ .zd-v2 #zd-k-catalog{ --zk-amb-base: #F9F7F2; --zk-amb-top: #F2ECE2; --zk-amb-light: #FBFAF7; background-color: var(--zk-amb-base); background-image: radial-gradient(760px 340px at 14% 40px, rgba(239,226,198,.42), rgba(239,226,198,0) 70%), radial-gradient(640px 300px at 88% 200px, rgba(230,208,160,.20), rgba(230,208,160,0) 70%), radial-gradient(900px 620px at 72% 1250px, rgba(241,231,210,.34), rgba(241,231,210,0) 72%), linear-gradient(180deg, var(--zk-amb-top) 0, var(--zk-amb-light) 260px, var(--zk-amb-base) 1600px); background-repeat: no-repeat; } /* Telefon i manji tablet: samo jedan sjaj gore, uži i tiši. Tri preklopljena radijalna sloja na uskom ekranu daju fleke umesto ambijenta. Prelaz sa tona sekcije iznad je kraći (110 px), da svetla zalepljena traka „Filteri” ispod uvoda već stoji na istoj bazi i ne čita se kao bela pruga. */ @media (max-width: 767.98px){ .zd-v2 #zd-k-catalog{ background-image: radial-gradient(520px 260px at 20% 30px, rgba(239,226,198,.34), rgba(239,226,198,0) 70%), linear-gradient(180deg, var(--zk-amb-top) 0, var(--zk-amb-light) 110px, var(--zk-amb-base) 1200px); } } /* Zalepljena mobilna traka „Filteri” je ranije nosila --zk-tint da se stopi sa sekcijom. Sada prati novu, svetliju bazu. */ @media (max-width: 1199.98px){ .zd-v2 #zd-k-catalog .zd-k-mfilter{ background: var(--zk-amb-light); } } /* --- uvodni blok -------------------------------------------------------- */ .zd-v2 #zd-k-catalog .zd-k-head{ position: relative; align-items: flex-end; margin-bottom: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--zk-f-line); } /* Kratak zlatni segment na početku razdelnika — isti potez kao crtica uz broj modela u zaglavlju kategorije (.zd-kcat__count::before). */ .zd-v2 #zd-k-catalog .zd-k-head::after{ content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; background: var(--zd-accent); } .zd-v2 #zd-k-catalog .zd-k-head__eyebrow{ color: var(--zd-accent-dark); margin: 0 0 .5rem; } .zd-v2 #zd-k-catalog .zd-k-head__title{ margin: 0 0 .4rem; } /* Opis u jednoj liniji na desktopu (ranije ga je 52ch lomio u dva reda). */ .zd-v2 #zd-k-catalog .zd-k-head__sub{ max-width: 72ch; line-height: 1.55; } /* Diskretan desni akcenat: mreža fuga (kao položene pločice) koja se gubi ulevo. Čist CSS, bez slike i bez uticaja na visinu bloka. */ .zd-v2 #zd-k-catalog .zd-k-head::before{ content: ""; position: absolute; right: 0; bottom: 0; top: 0; width: min(34%, 320px); pointer-events: none; background-image: linear-gradient(to right, rgba(169,131,46,.16) 1px, transparent 1px), linear-gradient(to bottom, rgba(169,131,46,.16) 1px, transparent 1px); background-size: 28px 28px; background-position: right bottom; /* Maska iz donjeg desnog ugla: mreža se gubi i ulevo i nagore, bez tvrde ivice na vrhu bloka. */ -webkit-mask-image: radial-gradient(120% 140% at 100% 100%, #000 0%, rgba(0,0,0,.5) 40%, transparent 72%); mask-image: radial-gradient(120% 140% at 100% 100%, #000 0%, rgba(0,0,0,.5) 40%, transparent 72%); } /* --- traka iznad mreže -------------------------------------------------- */ .zd-v2 #zd-k-catalog .zd-k-rhead{ min-height: var(--zk-bar-h); padding-bottom: var(--zk-bar-gap); gap: .75rem 1rem; flex-wrap: nowrap; } .zd-v2 #zd-k-catalog .zd-k-count{ display: inline-flex; align-items: baseline; gap: .3em; white-space: nowrap; } .zd-v2 #zd-k-catalog .zd-k-count b{ font-size: var(--zd-fs-body); } .zd-v2 #zd-k-catalog .zd-k-rhead__tools{ gap: .625rem; } /* Pretraga */ .zd-v2 #zd-k-catalog .zd-k-find{ flex: 0 1 300px; min-width: 200px; } .zd-v2 #zd-k-catalog .zd-k-find svg{ left: .9rem; width: 16px; height: 16px; } .zd-v2 #zd-k-catalog .zd-k-find input{ height: var(--zk-bar-h); min-height: 0; padding: 0 .9rem 0 2.55rem; background: var(--zk-panel); border: 1px solid var(--zk-ctl-line); border-radius: var(--zk-ctl-radius); box-shadow: var(--zk-ctl-shadow); transition: border-color var(--zd-t-fast), box-shadow var(--zd-t-fast); } .zd-v2 #zd-k-catalog .zd-k-find input::placeholder{ color: var(--zd-ink-soft); opacity: .85; } .zd-v2 #zd-k-catalog .zd-k-find input:hover{ border-color: var(--zk-ctl-line-hover); } .zd-v2 #zd-k-catalog .zd-k-find input:focus{ border-color: var(--zd-accent); box-shadow: var(--zk-ctl-shadow), var(--zk-ctl-ring); } /* Prsten gore JE fokus indikator (zlatni okvir + halo) — globalni outline bi ga dupliral 3 px dalje. */ .zd-v2 #zd-k-catalog .zd-k-find input:focus-visible{ outline: none; } /* Sortiranje: labela i select su jedna kontrola — „SORTIRAJ | Preporučeno ▾”. Label je i dalje