/* ===================================================================== ANTAS LINE — design system (Mondo-inspirisan, brand book identitet) Tokeni i utility klase za WoodMart + WPBakery rebuild. Izvor istine za boje: vault reference/brend-knjiga.md ===================================================================== */ /* ---------- Fontovi (self-hosted, latin + latin-ext) ---------- */ /* latin-ext fajlovi (2026-07-21) sadrže SAMO srpske latinične dijakritike (ćčđšž) — potvrđeno skenom celog published sadržaja (0 pogodaka van njih u U+0100-02FF), ne pun Google Fonts latin-ext raspon. Originali u antasline-backups/fonts-original-2026-07-21/ ako zatreba širi jezik. */ /* latin-ext */ @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/bebasneue-400-latin-ext.woff2') format('woff2'); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; } /* latin */ @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/bebasneue-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400-latin-ext.woff2') format('woff2'); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600-latin-ext.woff2') format('woff2'); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700-latin-ext.woff2') format('woff2'); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Tokeni ---------- */ :root { /* brand (pipeta iz logoa) */ --al-navy: #0E2950; --al-blue: #0B3E75; --al-sky: #5287B7; --al-red: #F04D22; --al-red-dark: #D43C14; --al-orange: #F89C1C; /* neutrali — hladni, bez krem tonova */ --al-paper: #FFFFFF; --al-mist: #EEF3F8; --al-ink: #16283C; --al-muted: #5B6B7E; /* tipografija */ --al-display: 'Bebas Neue', 'Arial Narrow', sans-serif; --al-text: 'Inter', -apple-system, 'Segoe UI', sans-serif; /* geometrija — ugao "listajućih ploča" iz logoa */ --al-cut: clamp(42px, 6vw, 96px); /* visina dijagonalnog reza */ --al-skew: -7deg; /* nagib ploča (eho logoa) */ --al-gap: clamp(56px, 5vw, 72px); /* vertikalni ritam sekcija */ } /* WoodMart preklapanje — :root:root nadjačava temine varijable koje se štampaju posle ovog fajla (specifičnost, ne redosled) */ :root:root { --wd-primary-color: var(--al-navy); --wd-alternative-color: var(--al-red); --wd-link-color: var(--al-blue); --wd-link-color-hover: var(--al-red); --wd-title-color: var(--al-navy); --wd-text-color: var(--al-ink); --wd-title-font: var(--al-display); --wd-text-font: var(--al-text); --wd-entities-title-font: var(--al-text); --wd-title-transform: uppercase; --wd-text-font-size: 15px; } body { font-family: var(--al-text); color: var(--al-ink); } /* Displej naslovi: samo h1/h2 nose Bebas — h3 i niže ostaju Inter (Woo naslovi proizvoda, widgeti itd. čitljiviji u Interu) */ body h1, body h2, .al-display { font-family: var(--al-display); font-weight: 400; /* Bebas ima samo 400 — bold bi bio faux */ text-transform: uppercase; letter-spacing: 0.015em; line-height: 0.98; } body h3, body h4, body h5, body h6 { font-family: var(--al-text); font-weight: 700; text-transform: none; } .al-display--xl { font-size: clamp(44px, 6.4vw, 88px); } /* desktop -15% (bio 104px max), mobile min nepromenjen */ .al-display--lg { font-size: clamp(34px, 5vw, 68px); } /* ---------- Sekcije i dijagonalni prelazi ---------- */ .al-section { position: relative; padding: var(--al-gap) 0; } .al-section--navy { background: var(--al-navy); color: #fff; } .al-section--blue { background: var(--al-blue); color: #fff; } .al-section--mist { background: var(--al-mist); } .al-section--paper { background: var(--al-paper); } .al-section--navy h1, .al-section--navy h2, .al-section--navy h3, .al-section--blue h1, .al-section--blue h2, .al-section--blue h3 { color: #fff; } .al-section--navy p, .al-section--blue p { color: rgba(255, 255, 255, 0.82); } /* rez na vrhu: plitki (Mondo ritam) i strmi (hero/CTA momenti) */ .al-diag-top { /* position:relative + top (ne margin-top!) — na ovom sajtu WPBakery ubacuje prazan float:left marker div (.vc_row-full-width.vc_clearfix) između svaka dva reda, što nekim (nejasnim) mehanizmom poništava negativni margin-top na sledećem redu (margin se računa, ali se ne primenjuje na render poziciju — potvrđeno testom). position:relative+top radi ispravno i stvarno preklapa prethodnu sekciju, tako da njena boja ispuni rez. */ position: relative; top: calc(-1 * var(--al-cut)); clip-path: polygon(0 var(--al-cut), 100% 0, 100% 100%, 0 100%); /* fiksni razmak (ne var(--al-gap)) — prethodna sekcija već doprinosi svojim padding-bottom-om, pun --al-gap ovde bi duplirao razmak na spoju */ padding-top: calc(var(--al-cut) + 28px); margin-bottom: calc(-1 * var(--al-cut)); } .al-diag-top--rev { position: relative; /* Kontakt CTA 23.08 — v2 (M nalaz #2, skrinšot): v1 je pomerila CEO boks za 28px (top/margin-bottom), što je desnu ivicu (gde je rez uvek "0" — pun preklop, dodiruje prethodni blok bez razmaka) odvojilo od prethodnog bloka i otkrilo goli beli page-background kao "trougao". Vraćeno na pun preklop (top/margin-bottom = -1*cut) — desna ivica opet direktno dodiruje prethodni blok, pa "pozadina" tog razmaka UVEK automatski = stvarna boja prethodnog bloka (ne pogađamo koju boju upisati, jer je to doslovno taj blok iza reza). */ top: calc(-1 * var(--al-cut)); /* Manje preklapanje SAMO na levoj ivici (gde tekst sedi) — rez kreće sa 28px umesto 0px, ne diramo desnu (100%, cut) tačku koja mora ostati flush. */ clip-path: polygon(0 28px, 100% var(--al-cut), 100% 100%, 0 100%); /* razmak label↔vrh navy boje smanjen dalje (M: "još više") */ padding-top: var(--al-cut); margin-bottom: calc(-1 * var(--al-cut)); } /* 🔴 2026-07-28 — kompenzacioni margin MORA da pobedi temu. `base.css` ima `:is(.wd-entry-content,.entry-content,…)>* { margin-block: 0 var(--wd-block-spacing) }` = specificnost (0,2,0) (`:is()` uzima najspecifičniji argument), sto gazi nasih (0,1,0) iznad. Posledica: `top:-cut` pomak ostaje, kompenzacija nestane i umesto nje dodje +20px → praznina visine cut+20px izmedju sekcije i onoga sto sledi (najvidljivije pred „Brzi upit" formom). Tri klase (0,3,0) vracaju kontrolu. Isti obrazac kao F7.19 — NE snizavati specificnost ovih selektora. */ .entry-content .al-section.al-diag-top, .entry-content .al-section.al-diag-top--rev, .wd-entry-content .al-section.al-diag-top, .wd-entry-content .al-section.al-diag-top--rev { margin-bottom: calc(-1 * var(--al-cut)); } .al-diag-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--al-cut)), 0 100%); padding-bottom: calc(var(--al-gap) + var(--al-cut)); } .al-diag-bottom--rev { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--al-cut))); padding-bottom: calc(var(--al-gap) + var(--al-cut)); } /* Kompaktna varijanta — kratak uvodni red (kicker) ispred CTA, ne treba pun --al-gap ritam pune sekcije (izgleda kao prazna kutija sa 1-2 reda teksta). */ .al-section--compact { padding-top: calc(24px + var(--al-cut)); } /* ---------- Potpis: listajuće ploče (motiv logoa) ---------- Dekorativni slojevi za hero/CTA — tri nagnute ploče u brand redosledu. Nanosi se na .al-section--navy; sekcija mora imati overflow:hidden. */ .al-plates { overflow: hidden; } .al-plates::before, .al-plates::after { content: ''; position: absolute; top: -12%; height: 130%; width: 42%; transform: skewX(var(--al-skew)); pointer-events: none; } .al-plates::before { right: -16%; background: linear-gradient(var(--al-blue), var(--al-blue)); opacity: 0.55; } .al-plates::after { right: -26%; width: 34%; background: linear-gradient(160deg, var(--al-sky) 0 38%, var(--al-red) 38% 72%, var(--al-orange) 72% 100%); opacity: 0.9; } .al-plates > * { position: relative; z-index: 1; } /* ---------- CTA dugmad ---------- */ .al-btn, a.al-btn { display: inline-block; font-family: var(--al-display); font-size: clamp(24px, 1.6vw, 26px); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--al-red); padding: 14px 38px 12px 38px; /* simetrični paralelogram (obe kose ivice) — padding 38px > rez 12px, tekst nikad ne deluje isečeno */ clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: background 0.18s ease, transform 0.18s ease; } .al-btn:hover, a.al-btn:hover { background: var(--al-red-dark); color: #fff; transform: translateX(2px); } .al-btn--ghost, a.al-btn--ghost { background: transparent; box-shadow: inset 0 0 0 2px currentColor; color: #fff; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } .al-btn--ghost:hover, a.al-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(2px); } .al-section--paper .al-btn--ghost, .al-section--mist .al-btn--ghost, .al-product-quote .al-btn--ghost { color: var(--al-navy); } /* W1 Polish Faza 3 (2026-07-30): post/članak sadržaj (.entry-content) nije .al-section, pa je ghost dugme bez ovoga belo-na-belom (nevidljivo). */ .entry-content .al-btn--ghost, .wd-entry-content .al-btn--ghost { color: var(--al-navy); } /* ---------- Micro-label ---------- */ .al-label { display: inline-block; font-family: var(--al-text); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--al-red-dark); margin-bottom: 14px; } .al-label::before { content: '/ '; } .al-label::after { content: ' /'; } .al-section--navy .al-label, .al-section--blue .al-label { color: var(--al-orange); } /* --al-red-dark (4.71:1 na belom) pada na 4.22:1 na --al-mist (#EEF3F8) pozadini — Lighthouse color-contrast nalaz 2026-08-04, dodatno zatamnjeno samo za taj slučaj */ .al-section--mist .al-label { color: #C73813; } /* Lighthouse color-contrast fix (2026-08-05): WooCommerce "sa PDV" cena-sufiks nasleđuje generičku sivu (#767676, 4.06:1) koja prolazi na belom, ali ne na mist pozadini (#EEF3F8) koju product grid koristi na kategorija stranicama — isti obrazac kao .al-label mist-fix iznad. #555 (--color-gray-700, već postojeći theme token) daje 6.67:1, sitewide gde god se mist sekcija koristi. */ .al-section--mist .woocommerce-price-suffix { color: #555; } /* ---------- Kartice ---------- */ .al-card { position: relative; background: var(--al-paper); box-shadow: 0 6px 24px rgba(14, 41, 80, 0.10); transition: transform 0.22s ease, box-shadow 0.22s ease; overflow: hidden; } .al-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(14, 41, 80, 0.16); } .al-card__media { position: relative; display: block; aspect-ratio: 4 / 3; } .al-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .al-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 41, 80, 0) 40%, rgba(14, 41, 80, 0.72) 100%); } .al-card__title { position: absolute; left: 22px; right: 22px; bottom: 16px; z-index: 1; font-family: var(--al-display); font-size: clamp(22px, 2vw, 30px); text-transform: uppercase; color: #fff; line-height: 1; } .al-card__body { padding: 22px; } /* W7 F1.1 — kartica koja ima I naslov I telo (2026-07-28). .al-card__title je absolute u odnosu na .al-card (ne na .al-card__media), pa kad kartica ima i __body, bela verzala legne preko sivog teksta na beloj podlozi. Rešenje: u toj kombinaciji naslov ide u normalan tok tamnom bojom, a tamni gradijent preko slike se gasi (na ravnim teksturama izgleda kao kvar). Specifičnost (0,3,0) — mora da nadjača i WoodMart :is(...) pravila (0,2,0), F7.20. Pogođeno pri uvođenju: 28 kartica / 3 stranice (16684, 16685, 16686). */ .al-card:has(.al-card__body) .al-card__title { position: static; display: block; padding: 18px 22px 0; font-size: clamp(18px, 1.4vw, 22px); color: var(--al-navy); line-height: 1.15; } .al-card:has(.al-card__body) .al-card__media::after { display: none; } .al-card:has(.al-card__body) .al-card__body { padding-top: 8px; } /* dijamant strelica (rotirani kvadrat, Mondo eho) */ .al-diamond { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--al-red); transform: rotate(45deg); transition: background 0.18s ease; } .al-diamond > span { transform: rotate(-45deg); color: #fff; font-weight: 700; } a:hover .al-diamond, .al-diamond:hover { background: var(--al-orange); } /* ---------- USP / statistika ---------- */ .al-stat { text-align: center; } .al-stat__num { font-family: var(--al-display); font-size: clamp(40px, 5vw, 72px); line-height: 1; color: var(--al-red); display: block; } .al-section--navy .al-stat__num { color: var(--al-orange); } .al-stat__cap { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--al-muted); } .al-section--navy .al-stat__cap { color: rgba(255, 255, 255, 0.75); } /* ---------- Foto hero (Figma obrazac: fotografija + navy overlay) ---------- */ .al-hero-photo { background-size: cover; background-position: center; } .al-hero-photo::before { content: ''; position: absolute; inset: 0; /* display/width/height eksplicitno — WPBakery .vc_row:before clearfix nameće display:table koji skuplja box na 0×0 */ display: block; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(14, 41, 80, 0.94) 0%, rgba(14, 41, 80, 0.6) 55%, rgba(14, 41, 80, 0.28) 100%); pointer-events: none; /* 2026-08-21: 53/54 hero stranica nosi i .al-plates na istom elementu — oba pravila ciljaju isti ::before, pa svojstva koja ovde nisu eksplicitno navedena "procure" iz .al-plates::before (linija ~210: skewX + opacity:.55). Bez ove dve linije zatamnjenje je na tim stranicama upola bleđe i koso (šuplji trouglovi u uglovima) — radilo je ispravno samo na početnoj, koja nema .al-plates. Eksplicitno resetovano da pobedi bez obzira na dodatne dekorativne klase na istom vc_row-u. */ opacity: 1; transform: none; } .al-hero-photo > * { position: relative; z-index: 1; } .al-hero-photo--home { background-image: url('../../../uploads/2026/07/spanoulis-court-beograd-suton.webp'); } /* W7 F4.2 (2026-07-29): 800x533 zamenjen sa 960x641, prazan teren umesto gužve — v. DNEVNIK */ /* W8 polish (2026-07-29): overlay gradijent je horizontalan (jak levo, slab desno 0.28) — smišljen za desktop raspored gde tekst sedi u levih ~40%, a fotografija "diše" desno. Na mobilnom tekst zauzima PUNU širinu, pa deo rečenice upadne tačno u taj slabi 0.28 pojas i postane teško čitljiv preko "bučne" fotografije. Ispod 767px overlay postaje ujednačen i tamniji. */ @media (max-width: 767px) { .al-hero-photo::before { background: linear-gradient(180deg, rgba(14, 41, 80, 0.88) 0%, rgba(14, 41, 80, 0.82) 60%, rgba(14, 41, 80, 0.8) 100%); } } /* Dodatna sigurnosna mera nezavisna od svetline konkretne fotografije — neke fotke imaju svetle/bele delove (npr. garažna vrata) tačno tamo gde sedi naslov, gde ni tamniji overlay nije uvek dovoljan. Text-shadow radi kao "halo" nezavisno od pozadine, ne menja izgled na navy (bez fotke) sekcijama jer je suptilan (nizak alpha, mali radius). */ .al-hero-photo .al-hero__sub, .al-hero-photo h1.al-display--xl, .al-hero-photo .al-display--xl, .al-hero-photo .al-label { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); } /* Ghost dugme (npr. "069 234 00 72" pored CTA-a) je nevidljivo na foto-heroju: .entry-content .al-btn--ghost (linija ~259) prisilno vraća navy tekst za sadržaj stranica, ali homepage hero je I SAM unutar .entry-content, pa taj override gazi belu boju koju .al-btn--ghost inače nosi za tamne/foto sekcije. Ista specifičnost (0,2,0) kao entry-content pravilo — pobeđuje jer je niže u fajlu. Nalaz 2026-08-05: dugme sa telefonom se nije videlo na hero slici. */ .al-hero-photo .al-btn--ghost, .al-section--navy .al-btn--ghost { color: #fff; } /* Obični tekstualni linkovi u hero opisu (npr. "FIBA" u .al-hero__sub) nasleđuju --wd-link-color (--al-blue #0B3E75, linija ~114) — na navy foto-heroju je to skoro ista tamna nijansa kao pozadina, link se gubi uprkos podvlačenju iz .entry-content pravila (linija ~1446). Isti "vidljivost na foto-heroju" obrazac kao ghost dugme/label iznad. Nalaz 2026-08-05: link "FIBA" nevidljiv. */ .al-hero-photo a:not(.al-btn):not(.al-card), .al-section--navy a:not(.al-btn):not(.al-card) { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.6); } .al-hero-photo a:not(.al-btn):not(.al-card):hover, .al-section--navy a:not(.al-btn):not(.al-card):hover { color: var(--al-orange); } /* ---------- Layout pomoćnici ---------- */ .al-grid { display: grid; gap: 24px; } .al-grid--5 { grid-template-columns: repeat(5, 1fr); } /* W7 F1.5 — palete boja (5 uzoraka u jednom redu) */ .al-grid--4 { grid-template-columns: repeat(4, 1fr); } .al-grid--3 { grid-template-columns: repeat(3, 1fr); } .al-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1100px) { .al-grid--5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 992px) { .al-grid--4, .al-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .al-grid--5, .al-grid--4, .al-grid--3, .al-grid--2 { grid-template-columns: 1fr; } } /* W1 Polish Faza 3 (2026-07-30): margin ide ovde umesto kao per-post inline `style="margin:24px 0"` (nekonzistentno primenjeno na deo postova) — isti gotcha kao F7.19/F7.20, `:is(.entry-content,…)>*{margin-block:0 20px}` iz base.css (0,2,0) gazi jednu klasu (0,1,0), zato dupli selektor. */ .entry-content .al-grid, .wd-entry-content .al-grid { margin: 24px 0; } .al-hero { max-width: 720px; padding-top: clamp(8px, 1.5vw, 18px); padding-bottom: clamp(24px, 4vw, 56px); } /* gornji pading dalje smanjen 23.08 (v3, "još više") — v. .al-diag-top--rev za rez/preklop */ .al-hero .al-display--xl { margin: 8px 0 18px; } .al-hero__sub { font-size: clamp(16px, 1.5vw, 19px); max-width: 560px; } .al-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; } .al-ref-row { display: flex; flex-wrap: wrap; gap: 18px 48px; align-items: center; font-family: var(--al-text); font-weight: 700; font-size: clamp(15px, 1.6vw, 20px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--al-muted); } a.al-card, a.al-card:hover { color: inherit; } /* ---------- Header ---------- */ .whb-top-bar .al-topbar-txt { font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.85); } .whb-top-bar .al-topbar-txt a { color: #fff; } .whb-top-bar .al-topbar-txt a:hover { color: var(--al-orange); } .whb-general-header .wd-nav > li > a { font-family: var(--al-text); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--al-navy); } .whb-general-header .wd-nav > li > a:hover { color: var(--al-red); } .al-header-cta { display: flex; align-items: center; } /* Header CTA (2026-08-06): "Zatraži ponudu" dugme zamenilo telefon-CTA (na desktopu telefon slabije konvertuje od forme, v. CLAUDE.md §4 — prava konverzija je /hvala-za-poruku/, telefon ostaje u topbar+mobile). .al-btn je hero-veličine (24-26px/38px padding) — ovde skalirano dole da stane u 88px/68px sticky red bez guranja menija u drugi red. */ .al-header-cta__btn { font-size: 15px; padding: 10px 22px 9px 22px; } .al-mobile-tel { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 42px; background: var(--al-red); color: #fff; font-size: 20px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); } .al-mobile-tel:hover { background: var(--al-red-dark); color: #fff; } /* WoodMart vendor tema koristi --color-gray-400 (#a5a5a5, 2.46:1 na belom) za .wd-product-cats kategorija-link ispod naziva proizvoda u listi — Lighthouse color-contrast nalaz 2026-08-04. Override u child temi (vendor fajl bi ga izgubio na sledećem theme update-u — isti gotcha kao breadcrumb schema). */ .wd-product-cats a { color: var(--al-muted); } /* ---------- Ikonice (sistem — koristi se kroz ceo sajt) ---------- */ .al-icon { display: block; width: 46px; height: 46px; margin-bottom: 14px; } .al-card__body .al-icon { margin-top: 4px; } /* ---------- Samostalne foto u sadržaju — ista širina kolone ---------- WP core `.alignnone` nema display:block ni forsiranu širinu, pa slika ostaje na prirodnoj širini fajla (bilo šta od 300 do 1200px+) i vizuelno "pliva" nejednako kroz članak — svaka fotka drugačije uska/široka, neke uz levu ivicu (alignnone je inline/inline-block), neke centrirane ali uže od kolone (aligncenter). Isti mehanizam kao ranija izmena za featured sliku (§ranije, `.wd-post-image`) — razvlačimo na 100% kolone. Ne dira `.alignleft`/ `.alignright` (namerno uže, plivaju pored teksta) ni slike u `.al-grid`/ `.wd-blog-holder` (već imaju sopstvena pravila). */ .wd-entry-content img.alignnone, .wd-entry-content img.aligncenter { display: block; width: 100%; height: auto; margin: 0 auto; } /* ---------- Foto pored teksta (alignleft/alignright) — vrati na malu, plivajuću širinu ---------- `al_enhance_content_images()` (functions.php ~887) uvek servira barem `al-lg` fallback za slike koje NISU u `.al-grid`/kartici — ne zna za WP-ov nativni alignleft/alignright, pa piše i PRAVI `width`/`height` atribut sa dimenzijama te krupne verzije. Rezultat: stara "size-medium" (300px) autorska slika iz 2020-21 sadržaja se servira/meri kao ~600-900px, `float:left` je i dalje aktivan (WP core), pa ceo pasus teksta ostaje stisnut u usku traku desno od ogromne slike (izmereno na /podloga-za-odbojkaske-terene/: 629px i 800px umesto autorskih 300px). Fix ide u CSS (ne u deljenu PHP funkciju, koja radi isto na svakoj stranici sajta) — width:300px gazi i servirani atribut i servirani fajl je ionako preskaliran preko max-width, samo se vizuelno umanjuje bez dodatnog zahteva. */ .wd-entry-content img.alignleft, .wd-entry-content img.alignright { width: 300px; max-width: 45%; height: auto; } @media (max-width: 480px) { .wd-entry-content img.alignleft, .wd-entry-content img.alignright { float: none; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } } /* ---------- Red sertifikata/pečata u sadržaju (npr. Bergo EN14877, ITF, garancija) ---------- `.al-lb` (F7.21, red 813) je `display:block` — bez flex kontejnera svaka lightbox-slika u paragrafu pravi sopstveni red, pa se logotipi ređaju jedan ispod drugog umesto u liniji. Flex kontejner gazi display dece (block ili inline, svejedno) i tretira ih kao flex stavke, bez diranja same .al-lb klase. */ .al-cert-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 32px; margin: 24px 0; } @media (max-width: 576px) { .al-cert-row { flex-direction: column; } } /* ---------- Logo traka proizvođača / klijenata ---------- */ /* Margina je dodata W7 F2.9 (2026-07-29): na „O nama" traka stoji USRED teksta, pa se bez nje lepila tačno uz sledeći naslov (izmereno u DOM-u: razmak 0px). Na početnoj je traka poslednja u sekciji, gde donja margina nestaje u padding-u. */ .al-logo-row { display: flex; flex-wrap: wrap; gap: 20px 56px; align-items: center; margin: 24px 0 36px; } /* Logotipi klijenata su gušći skup (5+), pa im treba manji horizontalni razmak nego trojci proizvođača — inače na 1500px prave prazan hodnik. */ .al-logo-row--klijenti { gap: 20px 40px; } /* Na 390px je široki logotip ~153px: sa 40px razmaka staje samo JEDAN po redu (153+40+153 = 346 > 341 raspoloživih), pa se traka razvuče u stubac. Sa 24px staju dva. Izmereno u iframe harness-u na 390px. */ @media (max-width: 576px) { .al-logo-row { gap: 16px 24px; margin: 20px 0 28px; } .al-logo-row img { height: 38px; } } .al-logo-row img { height: 46px; width: auto; filter: grayscale(1) opacity(0.65); transition: filter 0.2s ease; } .al-logo-row img:hover { filter: none; } /* ---------- Blog loop slike — uniformne proporcije ---------- */ .wd-blog-holder .wd-post-image img, .wd-blog-holder .post-img-wrapp img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; } /* ---------- Single post featured slika — puna širina kolone ---------- WoodMart base.css ima `.wd-post-image { display: inline-block; }` (style.css ~7406) — bez eksplicitne širine se div skuplja na prirodnu širinu slike, pa svaka featured slika uža od kolone (npr. stari 773px collage upload) ostaje uvučena sa prazninom sa strane umesto da ispuni ceo red. Ne diramo generičku `.wd-post-image` (istu klasu koristi i blog loop iznad, već pokrivenu `.wd-blog-holder` pravilom) — skop samo na single post header. */ .wd-single-post-header .wd-post-image { display: block; width: 100%; } .wd-single-post-header .wd-post-image img { width: 100%; height: auto; } /* ---------- Pristupačnost i higijena ---------- */ :where(a, button, .al-btn):focus-visible { outline: 3px solid var(--al-orange); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .al-card, .al-btn, .al-diamond { transition: none; } .al-card:hover { transform: none; } } @media (max-width: 768px) { :root { --al-cut: 28px; } .al-plates::before, .al-plates::after { display: none; } /* ploče ne guše mali ekran */ } /* ---------- Uporedna tabela (namenska landing, F6) ---------- */ /* W7 F1.2 (2026-07-28): `min-width: 640px` je uklonjen. Nijedna od 42 `.al-table` na sajtu nije bila u omotaču sa skrolom, pa je na 390px min-width terao BOČNI SKROL CELE STRANICE, ne tabele. Izuzetak `.single-product .al-table {min-width:0}` (dodat na M zamerku 2026-07-09) je isti problem već rešio samo na proizvodima — sada pravilo važi svuda, a izuzetak više nije potreban. */ .al-table { width: 100%; border-collapse: collapse; font-family: var(--al-text); font-size: 15px; margin-bottom: 24px; /* W8 polish: nema default donju marginu kao

/

, pa je sadržaj odmah posle tabele (npr. sledeći

) sedeo nalepljen na nju */ } .al-table th, .al-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid rgba(22, 40, 60, 0.12); } .al-table thead th { background: var(--al-navy); color: #fff; font-weight: 500; /* W7 F1.3: 600 -> 500 */ } .al-table tbody tr:nth-child(even) { background: rgba(238, 243, 248, 0.6); } /* Spec tabela na proizvodu (2 kolone): tekst se prelama u više redova. `min-width: 0` je od F1.2 podrazumevano za sve tabele, pa je ovde izostavljeno. */ .single-product .al-table th { width: 38%; word-break: break-word; } .single-product .al-table td { word-break: break-word; overflow-wrap: anywhere; } @media (max-width: 576px) { .single-product .al-table { font-size: 13px; } .single-product .al-table th, .single-product .al-table td { padding: 9px 10px; } } /* W7 F1.2 — „stacked" prikaz na telefonu za tabele sa VIŠE OD 3 kolone (13 od 42). Do 3 kolone prelamanje teksta je dovoljno; od 4 naviše kolone postanu preuske pa se red pretvara u karticu „naziv kolone : vrednost". Broj kolona se čita iz same tabele (`:has(th:nth-child(4))`) — bez dodatne klase u sadržaju. Natpis nosi `data-label`, koji dodaje `al_table_data_labels()` (functions.php) na istom `the_content` filteru kao i slike. */ @media (max-width: 576px) { .al-table:has(thead th:nth-child(4)) { font-size: 14px; } .al-table:has(thead th:nth-child(4)) thead { display: none; } .al-table:has(thead th:nth-child(4)) tr { display: block; margin-bottom: 14px; border: 1px solid rgba(22, 40, 60, 0.14); background: var(--al-paper); } .al-table:has(thead th:nth-child(4)) tbody tr:nth-child(even) { background: rgba(238, 243, 248, 0.6); } .al-table:has(thead th:nth-child(4)) td { display: flex; gap: 12px; align-items: baseline; padding: 9px 12px; border-bottom: 1px solid rgba(22, 40, 60, 0.08); } .al-table:has(thead th:nth-child(4)) tr td:last-child { border-bottom: 0; } .al-table:has(thead th:nth-child(4)) td[data-label]::before { content: attr(data-label); flex: 0 0 40%; font-weight: 600; color: var(--al-navy); } /* ćelija koja se proteže kroz ceo red (colspan) ostaje puna širina, bez natpisa */ .al-table:has(thead th:nth-child(4)) td[colspan] { display: block; font-weight: 600; } } /* ---------- Post/članak (aktuelnosti) — GEO odgovor + zatvarajući CTA ---------- */ /* W1 Polish Faza 3 (2026-07-30): `.al-geo-intro`/`.al-cta-box` su se već pojavljivale u post_content-u (6588, 5170) i u planu (CLAUDE §GEO pravilo "prvi pasus = direktan odgovor") ali NIKAD nisu imale CSS — renderovale se kao goli tekst. Ostali postovi su isti vizuelni efekat postizali ad-hoc inline stilom (`style="background:#EEF3F8;border-left:4px solid #F04D22…"`, 2298/2542) umesto klase. Ovo su sad prave definicije, retrofit na postojeće pojave prati [[migracija/w1-polish-red-cekanja]] Faza 3. */ .entry-content .al-geo-intro, .wd-entry-content .al-geo-intro { background: var(--al-mist); border-left: 4px solid var(--al-red); padding: 16px 20px; margin: 24px 0; border-radius: 2px; font-family: var(--al-text); } .al-geo-intro strong:first-child { color: var(--al-navy); } .entry-content .al-cta-box, .wd-entry-content .al-cta-box { background: var(--al-mist); border: 1px solid rgba(14, 41, 80, 0.14); border-radius: 4px; padding: 24px 28px; margin: 32px 0; text-align: center; } .al-cta-box p { margin-bottom: 12px; } .al-cta-box p:last-child:not(:only-child) { margin-bottom: 0; } .al-cta-box .al-btn { margin: 6px 8px 0; } /* ---------- Dve opcije realizacije (DIY vs "ključ u ruke") — 2298 live parity 2026-08-24 ---------- */ .al-option-box { margin: 28px 0; } .al-option { background: var(--al-mist); border: 1px solid rgba(14, 41, 80, 0.14); border-top: 4px solid var(--al-blue); border-radius: 4px; padding: 22px 24px; } .al-option--recommended { border-top-color: var(--al-red); } .al-option h4 { margin-top: 0; color: var(--al-navy); font-family: var(--al-display); letter-spacing: 0.5px; text-transform: uppercase; } .al-option p:last-child { margin-bottom: 0; } /* ---------- Video lite-embed fasada (F7.3) ---------- */ .al-video-facade { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--al-ink); } .al-video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Play dugme — YouTube obrazac (zaobljeni pravougaonik + trougao), AntasLine crvena. Trougao je CSS border-om, ne tekstualnim ► glifom: stari ► se renderovao različito po platformama (na Windows-u optički pomeren ulevo i previše tanak) i zavisio je od font fallback-a. Dugme je čisto dekorativno — ceo .al-video-facade je klikabilan (role="button"), zato aria-hidden i pointer-events:none. */ /* Specifičnost (0,2,0), ne (0,1,0) — vidi objašnjenje kod .al-lb-close: WoodMart base.css `:is(.btn,.button,button,…)` je (0,1,0) i učitava se posle nas, pa je dugmetu gazio background/border-radius/font-size. Zatečeno stanje pre ove izmene: play dugme je bilo SIVO (#F3F3F3) umesto brend-crvenog — bag je postojao i ranije, samo se nije primećivao jer je sivi krug sa ► i dalje ličio na play dugme. */ .al-video-facade .al-video-facade__play { position: absolute; inset: 0; margin: auto; width: 72px; height: 50px; padding: 0; border: none; border-radius: 14px; /* W7 F1.8 (2026-07-28, odluka M): narandžasto umesto brend-crvenog. */ background: var(--al-orange); /* gasi stari tekstualni ► glif iz post_content markupa — bez ovoga bljesne pre nego što JS stigne; trougao crta ::before ispod */ font-size: 0; color: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: none; opacity: 0.92; transition: transform 0.18s ease, opacity 0.18s ease; box-shadow: 0 2px 10px rgba(22, 40, 60, 0.35); } /* beli trougao */ .al-video-facade .al-video-facade__play::before { content: ""; display: block; width: 0; height: 0; margin-left: 4px; /* optičko centriranje trougla u pravougaoniku */ border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; } .al-video-facade:hover .al-video-facade__play, .al-video-facade:focus-visible .al-video-facade__play { transform: scale(1.08); opacity: 1; } .al-video-facade:focus-visible { outline: 3px solid var(--al-red); outline-offset: 3px; } /* blagi kontrast ispod dugmeta da se vidi i na svetlom kadru */ .al-video-facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(14, 41, 80, 0) 40%, rgba(14, 41, 80, 0.28)); pointer-events: none; transition: opacity 0.18s ease; } .al-video-facade:hover::after { opacity: 0.6; } .al-video-facade.is-playing::after { display: none; } @media (prefers-reduced-motion: reduce) { .al-video-facade__play, .al-video-facade::after { transition: none; } .al-video-facade:hover .al-video-facade__play { transform: none; } } .al-video-facade iframe { width: 100%; height: 100%; border: 0; display: block; } /* ---------- Lightbox za slike u sadržaju (F7.21) ---------- */ /* Markup pravi al_enhance_content_images() u functions.php, ponašanje js/al-lightbox.js. Na stranici stoji smanjena verzija (al-lg 1200px max, srcset 600/900/1200), lightbox otvara najveću dostupnu (al-lb 1600px, ili original ako je manji od toga). */ .al-lb { display: block; position: relative; cursor: zoom-in; line-height: 0; } .al-lb img { transition: opacity 0.15s ease; } .al-lb:hover img { opacity: 0.93; } /* lupa u uglu — signal da se slika otvara veća */ .al-lb::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 6px; background: rgba(14, 41, 80, 0.72) center / 15px 15px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E"); opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } .al-lb:hover::after, .al-lb:focus-visible::after { opacity: 1; } .al-lb:focus-visible { outline: 3px solid var(--al-red); outline-offset: 2px; } /* ---------- Ujednačene proporcije sličica u galerijama ---------- Fotografije iz arhive su izmešanih odnosa (4:3, 3:2, pa i 20:9 panorame), pa je red u gridu izgledao razbijeno — različite visine, neporavnati donji rubovi. Kadriranje je čisto vizuelno (`object-fit: cover`): fajl se ne seče, `srcset` ostaje isti, a lightbox i dalje otvara CELU, neisečenu sliku. 4:3 je izabran jer je najčešći odnos u arhivi — panorame time gube levu i desnu ivicu, što je kod terena bezbedno (motiv je po pravilu u sredini). Ako se negde pokaže da je kadar bitan, rešenje je `object-position` na toj slici, ne menjanje odnosa za sve. Specifičnost (0,2,1) namerno: WoodMart `base.css` se učitava POSLE nas i nosi `:is()` pravila specifičnosti (0,1,0) — ista zamka kao kod .al-lb-close (F7.21). */ .al-grid .al-lb img, .gallery-item .al-lb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; } .al-grid .al-lb, .gallery-item .al-lb { display: block; width: 100%; } html.al-lb-open { overflow: hidden; } .al-lb-overlay { position: fixed; inset: 0; z-index: 100000; /* iznad WoodMart sticky header-a (999) i mobilnog menija */ background: rgba(11, 20, 32, 0.94); display: none; align-items: center; justify-content: center; padding: 56px 20px; font-family: var(--al-text); } .al-lb-overlay.is-open { display: flex; } .al-lb-stage { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } .al-lb-img { display: block; max-width: min(1600px, 92vw); max-height: 82vh; width: auto; height: auto; border-radius: 6px; background: rgba(255, 255, 255, 0.04); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); } .al-lb-caption { color: #E6EDF5; font-size: 14px; line-height: 1.45; text-align: center; max-width: 760px; } .al-lb-caption[hidden] { display: none; } /* Specifičnost namerno (0,2,0), ne (0,1,0): WoodMart base.css ima `:is(.btn,.button,button,[type="submit"],[type="button"]) { position: relative }` — `:is()` uzima specifičnost najjačeg argumenta, dakle (0,1,0), izjednačeno sa `.al-lb-close`, a base.css se učitava POSLE naše datoteke pa je pobeđivao i dugmad su ispadala u normalan tok. Isti obrazac kao F7.20. */ .al-lb-overlay .al-lb-close, .al-lb-overlay .al-lb-nav { position: absolute; border: none; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; line-height: 1; } .al-lb-overlay .al-lb-close:hover, .al-lb-overlay .al-lb-nav:hover { background: var(--al-red); } .al-lb-overlay .al-lb-close:focus-visible, .al-lb-overlay .al-lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .al-lb-overlay .al-lb-close { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 19px; } .al-lb-overlay .al-lb-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 62px; font-size: 22px; } .al-lb-overlay .al-lb-nav[hidden] { display: none; } .al-lb-overlay .al-lb-nav--prev { left: 14px; } .al-lb-overlay .al-lb-nav--next { right: 14px; } .al-lb-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #9FB2C6; font-size: 13px; letter-spacing: 0.04em; } .al-lb-counter[hidden] { display: none; } .al-lb-overlay.is-loading .al-lb-img { opacity: 0.35; } @media (max-width: 768px) { .al-lb-overlay { padding: 52px 8px; } .al-lb-img { max-width: 96vw; max-height: 76vh; } .al-lb-nav { width: 38px; height: 52px; font-size: 18px; } .al-lb-nav--prev { left: 4px; } .al-lb-nav--next { right: 4px; } /* na dodir nema hovera — lupa bi stajala trajno upaljena */ .al-lb::after { display: none; } } @media (prefers-reduced-motion: reduce) { .al-lb img, .al-lb::after, .al-lb-close, .al-lb-nav { transition: none; } } /* ---------- antas-skica (F7.4) ---------- */ /* Skice se od 2026-07-28 ubacuju preko [al_skica] (inc/skice.php) — SVG živi u images/skice/, ne u post_content, jer je KSES brisao //dasharray pri snimanju stranice iz editora. Wrapper nosi razmak i max-width. */ .al-skica-wrap { max-width: 100%; } .al-skica { max-width: 100%; height: auto; font-family: var(--al-text); } /* ---------- Header meni (W1 1.4/1.5 polish) ---------- */ /* 5 kategorija ("Poslovni prostori"/"Specijalni podovi" su dugi) su ponekad prelazile u 2 reda na standardnom kontejneru (671px dostupno vs 694px potrebno sa default 20px gap-om) — sužen gap da stane u 1 red, sprečava kompresiju kad se sticky header suzi na sticky_height. */ .whb-al-mainmenu .wd-nav { --nav-gap: 8px; } /* Mega meni linkovi nasleđuju podvlačenje od .entry-content/.wd-entry-content pravila (v. dole, "Linkovi u sadržaju") — WoodMart mega-dropdown panel nosi generičku klasu .wd-entry-content (isti wrapper koriste i stranice), pa se fix za čitljivost linkova u tekstu sadržaja neželjeno preliva u header meni. Nalaz 2026-08-05: linkovi u mega meniju su bili podvučeni, ružno na desktopu. Dopuna 2026-08-06: fix nikad nije stvarno radio — identična specifičnost (3 klase) kao ".wd-entry-content a:not(.al-btn):not(.al-card)" pravilo dole ("Linkovi u sadržaju"), a ono je KASNIJE u fajlu → uvek pobeđivalo po cascade redosledu, podvlačenje nikad nije stvarno nestalo. !important razrešava tu vezu bez diranja namernog podvlačenja u pravom sadržaju. */ .wd-header-nav .wd-entry-content a:not(.al-card) { text-decoration: none !important; } /* Mega meni panel je bio skučen (padding-bottom: 0, uske ivice) — malo više vazduha oko sadržaja na desktopu (2026-08-05). 2026-08-27 (M): ovaj top-padding se slaže SA `.wd-entry-content` top-paddingom ispod (36+32=68px + 8px iz same kolone-naslova = ~76px praznine iznad linkova) — previše belog. Top smanjen na 16px, levo/desno i dole ostaje. */ .menu-mega-dropdown .wd-dropdown-menu.wd-design-sized { padding: 16px 44px 32px !important; } /* ---------- Sadržaj/footer razmak fix ---------- */ /* WoodMart
nosi fiksnih 40px padding-bottom sitewide — na stranicama koje se završavaju našom al-section (npr. navy CTA sa diag-top--rev preklopom) taj prostor ostaje bele/prazne boje ispod poslednje sekcije, pravi vidljivu belu liniju iznad footera kad je poslednja sekcija tamna. Naše al-section blokovi već nose sopstveni vertikalni ritam (--al-gap), pa je theme-ov dodatni razmak ovde suvišan. */ main.wd-content-layout:has(.al-section) { padding-bottom: 0; } /* ---------- Footer (W1 1.4) ---------- */ /* Futer je namerno TAMNIJI od --al-navy sekcija (+ gradient akcent traka na vrhu) da navy CTA sekcije ne bi vizuelno "utapale" u futer — prelaz mora biti vidljiv i kad se poslednja sekcija i futer inače poklapaju po boji (polish krug 2026-07-08). */ .wd-footer { position: relative; background: #0A1F3D; color: rgba(255, 255, 255, 0.75); } .wd-footer::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(100deg, var(--al-sky) 0%, var(--al-blue) 30%, var(--al-red) 68%, var(--al-orange) 100%); } .wd-footer .footer-sidebar { padding-block: 56px 40px; } .wd-footer .widget-title { font-family: var(--al-text); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin-bottom: 18px; } .wd-footer .al-footer-address { margin-top: 14px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); } .al-footer-nav { list-style: none; margin: 0; padding: 0; } .al-footer-nav li { margin-bottom: 10px; } .al-footer-nav a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 14px; transition: color 0.15s ease; } .al-footer-nav a:hover { color: var(--al-red); } .al-footer-contact { display: flex; flex-direction: column; gap: 10px; } .al-footer-contact a { color: rgba(255, 255, 255, 0.85); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; transition: color 0.15s ease; } .al-footer-contact a:hover { color: var(--al-red); } .al-icon--sm { display: inline-block; width: 20px; height: 20px; margin-bottom: 0; flex: none; } /* W7 F1.9 (2026-07-28, odluka M) — ikonice telefona i mejla u futeru su SVG fajlovi sa ukucanim `stroke="#F04D22"`, pa su bile narandžaste dok su i tekst i social dugmad beli. `filter` umesto izmene fajlova: iste ikonice se koriste i drugde na svetloj podlozi. */ .wd-footer .al-footer-contact .al-icon--sm { filter: brightness(0) invert(1); opacity: 0.85; } .wd-footer .al-footer-contact a:hover .al-icon--sm { opacity: 1; } /* Woodmart [social_buttons] shortcode — brand override preko istih CSS custom properties koje koristi tema (--wd-social-*), umesto pill-dugmadi sa golim tekstom. */ .wd-footer .wd-social-icons { --wd-social-size: 38px; --wd-social-color: #fff; --wd-social-bg: rgba(255, 255, 255, 0.08); --wd-social-brd: 1px solid; --wd-social-brd-color: rgba(255, 255, 255, 0.25); --wd-social-color-hover: #fff; --wd-social-bg-hover: var(--al-red); --wd-social-brd-color-hover: var(--al-red); justify-content: flex-start; } .wd-footer .wd-social-icons .wd-icon:before { font-family: "woodmart-font" !important; } /* Razmak između social ikonica + levo poravnanje ispod "Kontaktirajte nas" (M zamerka 2026-07-09). gap mora !important — widget nosi svoj el-social-icons.css u futeru (posle child CSS-a) */ .wd-footer .wd-social-icons { display: flex; flex-wrap: wrap; gap: 12px !important; justify-content: flex-start; margin-top: 4px; } .wd-footer .wd-social-icons .wd-social-icon { margin: 0 !important; } .wd-copyrights { background: #0A1F3D; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; color: rgba(255, 255, 255, 0.55); font-size: 13px; } .wd-copyrights a { color: rgba(255, 255, 255, 0.75); text-decoration: none; } .wd-copyrights a:hover { color: var(--al-red); } .al-skica text { font-family: var(--al-text); fill: var(--al-ink); } /* ---------- Page title traka (polish 2026-07-08) ---------- */ /* WoodMart page title bar (postovi, arhive, Woo stranice bez _woodmart_title_off) — pozadina dolazi iz theme option-a title-background (#0E2950, ne više #0a0a0a), ovde brend polish: niža traka, Bebas veličina usklađena sa al-display--lg, gradient akcent na dnu (isti motiv kao futer traka), breadcrumbs prigušeni. Dvoklasni selektor namerno — nadjačava .title-size-default desktop media query iz teme (ista kaskada, veća specifičnost). */ .wd-page-title.title-size-default { --wd-title-sp: 34px; --wd-title-font-s: clamp(30px, 4vw, 52px); position: relative; } .wd-page-title::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(100deg, var(--al-sky) 0%, var(--al-blue) 30%, var(--al-red) 68%, var(--al-orange) 100%); } .wd-page-title .title { letter-spacing: 0.02em; } .wd-page-title .wd-breadcrumbs, .wd-page-title .wd-breadcrumbs a, .wd-page-title .yoast-breadcrumb, .wd-page-title .yoast-breadcrumb a { color: rgba(255, 255, 255, 0.6); font-size: 13px; } .wd-page-title .wd-breadcrumbs a:hover, .wd-page-title .yoast-breadcrumb a:hover { color: var(--al-orange); } /* ---------- Mobilni sticky toolbar — B2B varijanta (polish 2026-07-08) ---------- */ /* Custom linkovi (Katalog / Pozovite / Ponuda) nemaju attachment ikonicu — SVG iz child icons/ seta ide kao CSS background na prazan .wd-tools-icon span. */ .wd-toolbar .wd-toolbar-link .wd-tools-icon { background-repeat: no-repeat; background-position: center; background-size: 24px 24px; width: 26px; height: 26px; } /* Redosled 1|2|3 = Katalog|Email|Poziv (M zahtev 2026-08-20, v. link_N_url ispod) */ .wd-toolbar .wd-toolbar-link-1 .wd-tools-icon { background-image: url(../images/icons/katalog.svg); } .wd-toolbar .wd-toolbar-link-2 .wd-tools-icon { background-image: url(../images/icons/email.svg); } .wd-toolbar .wd-toolbar-link-3 .wd-tools-icon { background-image: url(../images/icons/mobilni-telefon.svg); } /* W7 F1.7 (2026-07-28) — duplirana ikonica. Tema na `.wd-toolbar-link` postavlja `--wd-tools-icon:"\f140"`, a `.wd-tools-icon:before` ga crta kao woodmart-font glif U ISTOM span-u u kom mi crtamo brend SVG kao background — pa je tamni glif stajao preko narandžastog SVG-a. Gasi se samo na naša tri custom linka. */ .wd-toolbar .wd-toolbar-link .wd-tools-icon::before { content: none; } /* ---------- Katalog režim — "Zatraži ponudu" na proizvodu (W1 1.8) ---------- */ .al-product-quote { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 6px; } .al-product-quote .al-btn { margin: 0; } /* ---------- CF7 grid (form-row/form-col-6 iz form markupa 16593 + 16737) ---------- */ .wpcf7 .form-row { display: flex; flex-wrap: wrap; gap: 0 16px; } .wpcf7 .form-col-6 { flex: 1 1 240px; min-width: 0; } /* ---------- Brzi upit — dinamička forma na dnu usluga/postova ---------- */ /* Renderuje se the_content prio 12 hookom (functions.php), tj. UNUTAR content kontejnera stranice — full-bleed preko viewport breakout-a (width:100vw + margin-left calc(50% - 50vw)); unutrašnji sadržaj vraćen na širinu kontejnera. SVETLA (mist) sekcija sa al-diag-top rezom = kontra boja između navy CTA sekcija iznad i tamnog futera ispod (M zamerka: "sve plavo na dnu"). */ /* 🔴 2026-07-28 — sekcija je RAVNA odozgo, nema `al-diag-top` (v. functions.php). Prethodna sekcija je na svih 55 stranica navy CTA sa `al-diag-top--rev` (rez ↘ na njenom vrhu); druga dijagonala ↗ odmah ispod pretvarala je navy blok u iskošen klin. Poenta ove sekcije je KONTRA-BOJA (svetla traka između navy CTA i tamnog futera), a nju nosi `--al-mist` pozadina — rez nije bio potreban. Time otpada i ceo raniji mehanizam `top:-cut` + `margin-bottom:-cut`: nema pomaka, pa nema ni kompenzacije, pa ni sudara specifičnosti sa `body:has(.sidebar-container)` koji je futer terao preko dugmeta forme (v. [[migracija/woodmart-sabloni]] F7.19). NE vraćati `al-diag-top` na ovu sekciju bez ponovnog skena svih stranica. */ .al-quick-quote { background: var(--al-mist); width: 100vw; margin-left: calc(50% - 50vw); padding-top: clamp(16px, 1.95vw, 25px); /* -35% vs prethodnih clamp(24px,3vw,38px), M zahtev 2026-08-23 */ padding-right: 15px; padding-bottom: clamp(36px, 4vw, 56px); padding-left: 15px; overflow: hidden; } /* WPBakery daje SVAKOM `.wpb_content_element` margin-bottom:35px — pa i nevidljivim `vc_raw_html` blokovima u kojima živi JSON-LD (gotcha #8/#9). Kad je takav blok poslednji u sadržaju (a jeste, schema se dodaje na kraj), tih 35px se vidi kao bela traka između poslednje sekcije i „Brzi upit" forme. Ranije ga je maskirao pomak forme (`top:-cut`); čim je rez uklonjen, traka je isplivala. Selektor hvata ISKLJUČIVO blokove koji sadrže samo