/** * ============================================================ * MaskeZaMob.rs — Header Styling * ============================================================ * * Fajl: css/_header.css * Putanja: wp-content/themes/flatsome-child/css/_header.css * * Verzija: 1.1 — Ispravljeni selektori na osnovu stvarnog HTML-a * * Zavisi od: _design-tokens.css * ============================================================ */ /* ========================================================== * 1. TOP BAR — #top-bar.header-top * ========================================================== * Flatsome dodaje .nav-dark klasu koja već daje tamni stil, * ali mi override-ujemo sa tačnim navy bojama iz design sistema. * ========================================================== */ #top-bar.header-top { background-color: var(--mzm-navy); /* rezerva ako gradijent ne prođe */ /* 21.10.2026. (Vera): isti gradijent kao dugme „Print maskice" u meniju (odeljak 8, `li.mzm-nav-featured`). Menja se na OBA mesta zajedno. */ background-image: linear-gradient(135deg, #3c83f5 0%, #0e1e4a 100%); border-bottom: none; } /* Tekst u top baru — beli, manji font */ #top-bar .flex-col { color: var(--mzm-text-on-dark); } /* Svi nav linkovi i custom HTML u top baru */ #top-bar .nav-small li, #top-bar .nav-small li a, #top-bar .html.custom, #top-bar .header-social-icons { color: var(--mzm-text-on-dark); font-size: var(--mzm-text-xs); font-family: var(--mzm-font-family); } /* Social ikonice */ #top-bar .social-icons a.icon { color: var(--mzm-text-on-dark) !important; opacity: 0.85; transition: opacity var(--mzm-transition-fast); } #top-bar .social-icons a.icon:hover { color: var(--mzm-text-on-dark) !important; opacity: 1; } /* Razdvajači (nav-divided) — suptilniji */ #top-bar .nav-divided > li { border-color: rgba(255, 255, 255, 0.15); } /* Centriran tekst o dostavi */ #top-bar .flex-center .html.custom { font-weight: var(--mzm-font-medium); letter-spacing: 0.01em; } /* ---------------------------------------------------------- * 1a. KONTAKT U TRACI — telefon · Viber · WhatsApp * ---------------------------------------------------------- * Sadržaj bloka `HTML 1`: theme/blokovi/top-bar-kontakt.html * * ⚠️ Razdvajač je `border-left` na SLEDEĆEM linku, ne `::after` na * prethodnom — tako poslednji element nema višak linije bez * dodatnog pravila, i linija ne može da ostane kad se jedan * kanal ukloni iz bloka. * ⚠️ `inline-flex` na omotaču je namerno: razmaci između `` u * izvoru postaju tekstualni čvorovi, a flex kontejner ih ignoriše. * Bez toga se belina sabira sa paddingom i razmaci ispadnu neravni. * ---------------------------------------------------------- */ #top-bar .mzm-topbar-kontakt { display: inline-flex; align-items: center; } #top-bar .mzm-topbar-link { display: inline-flex; align-items: center; gap: 6px; padding: 2px 14px; line-height: 1; white-space: nowrap; opacity: 0.9; transition: opacity var(--mzm-transition-fast); } #top-bar .mzm-topbar-link:hover { opacity: 1; } /* Razdvajač — samo između stavki, nikad pre prve ni posle poslednje. */ #top-bar .mzm-topbar-link + .mzm-topbar-link { border-left: 1px solid rgba(255, 255, 255, 0.25); } #top-bar .mzm-topbar-link:last-child { padding-right: 0; } #top-bar .mzm-topbar-link svg { flex: 0 0 auto; } /* ---------------------------------------------------------- * 1b. TRAKA OSTAJE PRI SKROLU — SAMO MOBILNI * ---------------------------------------------------------- * Izmereno 04.09.2026. (`tools/mzm-mera-topbar-sticky.js`, vw=390): * pre skrola → .header-wrapper · #top-bar display: flex, 30px * posle skrola→ .header-wrapper.stuck · #top-bar display: none, 0px * krivac → flatsome.css 3.20.5: * `.header.show-on-scroll .hide-for-sticky, .stuck .hide-for-sticky` * * ⚠️ Header je VEĆ sticky (`has-sticky sticky-jump`) — ne pravi se nov * sticky mehanizam, nego se poništava jedno Flatsome pravilo. Svaki * pokušaj `position: fixed` na #top-bar bi pao, jer sticky header * koristi transform, a transform na ancestor-u lomi fixed. * * ⚠️ `display: flex`, NE `block` — izvorna vrednost je flex * (`.header-bottom, .header-top { display: flex }`). Sa `block` bi se * poravnanje sadržaja u traci raspalo. * * ⚠️ `!important` je namerno: Flatsome pravilo je merenjem viđeno samo * skraćeno (160 znakova), pa se ne zna nosi li i samo `!important`. * Specifičnost ovde (1,3,0) ionako tuče njegovu (0,2,0). * * ⚠️ NEIZMERENO: `--flatsome--header--sticky-height` postavlja Flatsome JS * i ta brojka NE uključuje traku (jer je pri računanju skrivena). * Sticky header postaje ~30px viši nego što Flatsome misli. Proveriti * da li sadržaj ulazi pod traku i da li anchor linkovi promašuju. * ---------------------------------------------------------- */ @media (max-width: 849px) { .header-wrapper.stuck #top-bar.hide-for-sticky { display: flex !important; } } /* ========================================================== * 2. HEADER MAIN — .header-main * ========================================================== * Logo levo | Search centar | Korpa desno * ========================================================== */ .header-main { background-color: var(--mzm-bg); border-bottom: var(--mzm-border-width) solid var(--mzm-border); } .header-main .header-inner { padding-top: var(--mzm-space-3); padding-bottom: var(--mzm-space-3); } /* --- Search Bar --- */ .header-main .searchform-wrapper { max-width: 520px; width: 100%; } .header-main .search-form-css { background-color: var(--mzm-surface); border: var(--mzm-border-width) solid var(--mzm-border); border-radius: var(--mzm-radius-lg); transition: border-color var(--mzm-transition-base), box-shadow var(--mzm-transition-base); overflow: hidden; } .header-main .search-form-css:focus-within { border-color: var(--mzm-accent); box-shadow: 0 0 0 3px var(--mzm-accent-light); background-color: var(--mzm-bg); } .header-main .search-form-css input[type="search"], .header-main .search-form-css input[type="text"] { font-family: var(--mzm-font-family); font-size: var(--mzm-text-base); color: var(--mzm-text-primary); background: transparent; border: none; } .header-main .search-form-css input[type="search"]::placeholder, .header-main .search-form-css input[type="text"]::placeholder { color: var(--mzm-text-secondary); opacity: 0.7; } .header-main .search-form-css button, .header-main .search-form-css .ux-search-submit { background-color: transparent; color: var(--mzm-text-secondary); transition: color var(--mzm-transition-fast); } .header-main .search-form-css button:hover, .header-main .search-form-css .ux-search-submit:hover { color: var(--mzm-accent); } /* --- Header ikonice (korpa, wishlist) --- */ .header-main .header-button .icon-element { color: var(--mzm-text-primary); transition: color var(--mzm-transition-fast); } .header-main .header-button:hover .icon-element { color: var(--mzm-accent); } /* --- KORPA U HEADERU --------------------------------------- * * ⚠️ Do 04.09.2026. su ovde stajala tri pravila vezana za `.cart-icon` i * `.cart-icon-total`. **NIJEDNA TAKVA KLASA NE POSTOJI U MARKUPU** — * bila su mrtva od početka. Nije se primetilo jer mrtvo pravilo ne * prijavljuje grešku; badge je sve vreme bio Flatsome crven umesto * plav, a to je izgledalo kao odluka. * * Izmereni markup (04.09.2026., vw=1440): * *
  • * * * …… * * * * ⚠️ Broj u korpi NIJE element. Flatsome ga crta kao `::after` na ``, * iz atributa `data-icon-label`. Zato se ne može obojiti selektorom * koji traži čvor — mora se ciljati pseudo-element. * ------------------------------------------------------------ */ /* ⚠️ Ikona u headeru se NE dira — ostaje na izmerenih 20px. Zahtev klijenta * „uvećati ikonu korpe" odnosi se na dugme „dodaj u korpu" NA KARTICI * PROIZVODA, ne na ovu ikonu (razjašnjeno sa Verom 04.09.2026.). * Vidi `_product-card.css` → `.mzm-pkart__cart`. */ /* Badge sa brojem stavki — plav, kako `--mzm-cart-count` i piše od početka. */ .header-main .cart-item .icon-shopping-cart[data-icon-label]::after { background-color: var(--mzm-cart-count); color: var(--mzm-text-on-accent); font-family: var(--mzm-font-family); font-weight: var(--mzm-font-bold); } /* Iznos pored korpe */ .header-main .cart-item .header-cart-title, .header-main .cart-item .cart-price { font-family: var(--mzm-font-family); font-size: var(--mzm-text-sm); color: var(--mzm-text-primary); } /* ⚠️ Isti bag kao na kartici proizvoda: `flatsome-shop.css` boji * `span.amount { color: #111 }`, pa boja sa roditelja ne stiže do iznosa. * `inherit` je namerno — vidi `_product-card.css`. */ .header-main .cart-item .cart-price .woocommerce-Price-amount, .header-main .cart-item .cart-price span.amount { color: inherit; } /* ========================================================== * 3. HEADER BOTTOM / NAV — #wide-nav.header-bottom * ========================================================== * Klase: .header-bottom-nav > li > a.nav-top-link * Flatsome dodaje .nav-uppercase — mi override-ujemo na normal * ========================================================== */ #wide-nav.header-bottom { background-color: var(--mzm-bg); border-bottom: var(--mzm-border-width) solid var(--mzm-border); } /* Izgled stavki glavnog menija — `F-081`, 07.09.2026. * * ⚠️ Do 07.09. je selektor glasio `.header-bottom-nav.nav-uppercase > li > a` * i NIJE POGAĐAO NIŠTA — klasa `.nav-uppercase` na sajtu ne postoji * (`ul` nosi `nav header-nav header-bottom-nav nav-center`). Meni je * izgledao ispravno preko Flatsome-ovog defaulta, slučajno. * Puna priča i merenje — u bloku „F-077 / F-081" niže. * * ⛔ OVDE SE NE PIŠE `font-size` NI HORIZONTALNI `padding`. * Oboje ima svog vlasnika u sekciji 9 (`!important`, dno fajla). * Dva izvora za istu vrednost su greška koja je 06.09. napravljena * dvaput u jednom satu. `--mzm-text-sm` je uz to `clamp` koji na * ~1867px+ stiže do 14px — a 14px lomi meni u dva reda. * * ⚠️ `text-transform: none` ostaje iako Flatsome trenutno i ne uppercase-uje: * to je Customizer prekidač koji neko može da uključi. */ #wide-nav .header-bottom-nav > li > a.nav-top-link { text-transform: none; font-family: var(--mzm-font-family); font-weight: var(--mzm-font-medium); color: var(--mzm-text-primary); padding-top: var(--mzm-space-3); padding-bottom: var(--mzm-space-3); transition: color var(--mzm-transition-fast); position: relative; } /* Hover */ #wide-nav .header-bottom-nav > li > a.nav-top-link:hover { color: var(--mzm-accent); } /* Aktivan/trenutna stranica */ #wide-nav .header-bottom-nav > li.active > a, #wide-nav .header-bottom-nav > li.current-menu-item > a, #wide-nav .header-bottom-nav > li.current-menu-parent > a, #wide-nav .header-bottom-nav > li.current-menu-ancestor > a { color: var(--mzm-accent); } /* Underline efekat na hover — linija ispod linka */ #wide-nav .header-bottom-nav > li > a.nav-top-link::after { content: ''; position: absolute; bottom: 0; left: var(--mzm-space-3); right: var(--mzm-space-3); height: 2px; background-color: var(--mzm-accent); transform: scaleX(0); transform-origin: center; transition: transform var(--mzm-transition-base); } #wide-nav .header-bottom-nav > li > a.nav-top-link:hover::after, #wide-nav .header-bottom-nav > li.active > a.nav-top-link::after, #wide-nav .header-bottom-nav > li.current-menu-item > a.nav-top-link::after, #wide-nav .header-bottom-nav > li.current-menu-ancestor > a.nav-top-link::after { transform: scaleX(1); } /* ========================================================== * F-077 / F-081 — font i izgled stavki glavnog menija * ========================================================== * * ✅ 07.09.2026. (`F-081`) — PRAVILO IZNAD JE OŽIVLJENO. * * Do tada je ciljalo `.header-bottom-nav.nav-uppercase`, a ta klasa na * sajtu NE POSTOJI. Izmereno 06.09.2026. iz konzole: * * cls: "nav header-nav header-bottom-nav nav-center" * * Sa selektorom su bili mrtvi `font-family`, `font-size`, `font-weight`, * `color`, `padding`, `text-transform` i `position`. Meni je izgledao * ispravno zato što su se Flatsome-ovi podrazumevani stilovi slučajno * poklopili sa onim što smo hteli, ne zato što smo ga mi stilizovali. * * ⚠️ ZAŠTO JE POPRAVKA ISPALA BEZOPASNA — I ZAŠTO SE TO PRVO MERILO * * Strah je bio da oživljavanje upali CELO pravilo odjednom, uključujući * `padding`, koji menja širinu stavki — a meni je na ivici prelamanja. * Zato je 07.09. prvo izmereno šta je stvarno na snazi, pre izmene * (`w850`, prva ne-featured stavka): * * font-family Plus Jakarta Sans = ono što pravilo traži * font-weight 500 = --mzm-font-medium * color rgb(14, 22, 41) = --mzm-text-primary * text-transform none = ono što pravilo traži * padding 12px 8px vert. = --mzm-space-3 * position relative = ono što pravilo traži * * Svih šest se poklopilo, pa je oživljavanje **izmena bez ijednog * promenjenog piksela**. Dobitak nije izgled nego vlasništvo: izgled * menija više ne visi o Flatsome-ovom defaultu, koji se menja sa * ažuriranjem teme. * * ⛔ IZ OŽIVLJENOG PRAVILA SU IZBAČENA DVA SVOJSTVA, NAMERNO: * · `font-size` — vlasnik je sekcija 9 (13px `!important`). Uz to je * `--mzm-text-sm` `clamp` koji na ~1867px+ stiže do 14px, a 14px * lomi meni (tabela niže). * · `padding-left/right` — vlasnik je sekcija 9 (0.5rem `!important`). * Ostavljeni bi napravili dva izvora za istu vrednost — greška koja je * 06.09. napravljena dvaput u jednom satu. * * ⚠️ Jedina osobina koja NIJE bila izmerena pre izmene je `transition`. * Ona ne pomera ništa u prostoru — najgori ishod je da prelaz boje na * hover postane 150ms mek umesto trenutnog. * * MERENJE — 06.09.2026., zbir širina svih 10 stavki prema kutiji 1152px * (identično na 1240px i 1440px, jer je kutija zaključana): * * 12px → 1026 zraka 126 * 13px → 1088 zraka 64 ← ovde smo * 14px → 1151 zraka 1 ⛔ * 15px → 1213 PRELAMA SE * * ⛔ 14px NIJE OPCIJA. Jedan piksel nije rezerva nego slučajnost — prva * nova stavka u meniju lomi red. Dogovoreno sa Verom: +1px, ne +2px. * * ⚠️ FIKSNIH 13px, NAMERNO NE `--mzm-text-sm`. Taj token je `clamp` koji * na širokim ekranima (~1867px+) stiže do 14px — dakle do granice * prelamanja. Token se koristi i drugde, pa se ne sme podešavati zbog * menija. Meni dobija svoj broj. * * ⚠️ AKO SE MENIJU DODA STAVKA, OVA TABELA SE MERI PONOVO. Linija za * merenje je u WORKLOG-u pod 06.09.2026. * * ⛔ VELIČINA SE MENJA U SEKCIJI 9, NE OVDE. * * Stvarna vrednost živi u `@media (min-width: 850px)` na dnu fajla, * sa `!important`. Ovaj blok je samo objašnjenje i merenje. * * ⚠️ 06.09. je ovde prvo bilo dodato zasebno pravilo * `#wide-nav .header-bottom-nav > li > a.nav-top-link { font-size: 13px }`. * Nije radilo, i to je bilo predvidivo: **isti selektor već postoji * niže, sa `!important`**, pa novo pravilo gubi bez obzira na redosled. * Napravljena su dva izvora za istu vrednost — ista greška koja je * istog dana ispravljana u `page-print-designer.php`. * **Pre pisanja novog pravila — `grep` po selektoru.** * * ⚠️ Time je razjašnjeno i zašto običan inline `font-size` iz konzole * nije prolazio, a isti sa `!important` jeste: gazilo ga je to * postojeće `!important` pravilo. Obilazak stilova iz konzole ga * nije prijavio, pa je nakratko delovalo kao da pravila nema — * ⚠️ odsustvo u ispisu alata nije dokaz o odsustvu u kodu. * ========================================================== */ /* Dropdown strelica */ #wide-nav .header-bottom-nav > li.has-dropdown > a .icon-angle-down { font-size: 0.65rem; margin-left: var(--mzm-space-1); opacity: 0.5; transition: opacity var(--mzm-transition-fast); } #wide-nav .header-bottom-nav > li.has-dropdown > a:hover .icon-angle-down { opacity: 1; } /* ========================================================== * 4. DROPDOWN MENI — .sub-menu.nav-dropdown * ========================================================== */ #wide-nav .nav-dropdown { background-color: var(--mzm-bg); border: var(--mzm-border-width) solid var(--mzm-border); border-radius: var(--mzm-radius-md); box-shadow: var(--mzm-shadow-lg); padding: var(--mzm-space-2) 0; min-width: 200px; } #wide-nav .nav-dropdown li a { font-family: var(--mzm-font-family); font-size: 0.75rem; color: var(--mzm-text-primary); padding: var(--mzm-space-2) var(--mzm-space-4); transition: background-color var(--mzm-transition-fast), color var(--mzm-transition-fast); text-transform: none; } #wide-nav .nav-dropdown li a:hover { background-color: var(--mzm-surface); color: var(--mzm-accent); } /* Aktivan link u dropdown-u */ #wide-nav .nav-dropdown li.current-menu-item > a { color: var(--mzm-accent); background-color: var(--mzm-accent-light); } /* ── Naslov kolone u megameniju je BOLD i kad nema podstavke (05.09.2026.) ── * * ⚠️ IZMERENO u konzoli, pre pisanja pravila, u dropdown-u „Punjači i baterije": * * Punjači fw:700 DECA * Baterije fw:700 DECA * Kablići fw:400 bez-dece * * **Uzrok:** Flatsome podebljava naslov kolone preko `menu-item-has-children`. * „Kablići" nemaju nijednu podstavku, pa ispadaju iz tog pravila i izgledaju * kao obična stavka — iako u meniju stoje kao ravnopravna kolona. * * ⚠️ **Pravilo NE sme da podeblja sve u svakom padajućem meniju.** U običnom, * jednostubačnom dropdown-u sve stavke su ravnopravni linkovi i bold bi * značio da je sve naslov, dakle ništa. * * Zato je uslov `:has(> li > ul)`: podebljaj prvi nivo **samo u dropdown-u koji * je stubačan** — dakle koji bar jednu stavku ima sa svojom listom. To je * upravo definicija megamenija, izvedena iz strukture a ne iz imena klase koju * bi Flatsome mogao da promeni. * * ⚠️ `:has()` ovde NE pravi problem iz `D-056` (pogađa svakog pretka): subjekat * je sam dropdown, a oba koraka su direktni potomci (`>`), pa ne može da * „iscuri" naviše. * * ⚠️ PROMAŠUJE BEZBEDNO: u pregledaču bez `:has()` ostaje današnje stanje — * Kablići tanji od ostalih. Nezgodno, ništa slomljeno. * * ⚠️ 700 nije izabrano nego PREPISANO sa izmerene vrednosti susednih naslova. */ #wide-nav .nav-dropdown:has(> li > ul) > li > a { font-weight: 700; } /* ── Sličice u Flatsome pretrazi su KVADRAT, ne krug (05.09.2026.) ────────── * * ⚠️ Ovo NIJE naša pretraga — to je Flatsome-ov `autocomplete` u zaglavlju. * Zato se ne dira ni jedan naš selektor; samo se nadjačava tema. * * Izmereno u konzoli pre pisanja pravila: * * klasa `search-image` * roditelj `autocomplete-suggestion` * radius **99px** (krug) * dim **40×40** * * Krug seče uglove maskice, a maskica JESTE pravougaonik — kupac na 40px vidi * zamućen krug umesto oblika proizvoda. * * ⚠️ Specifičnost `0,2,0` je dovoljna da nadjača Flatsome — **bez * `!important`**. Na ovom projektu je već izmereno da se tema nadjačava * specifičnošću *(kod `input` polja je `0,2,1` bilo dovoljno)*. * * ⚠️ `object-fit: cover` NIJE ukras. Slika je nasilno kvadratna (40×40); ako * original nije kvadrat, bez ovoga se **razvuče**. Dok je bila krug to se * slabije videlo, jer je krug isekao uglove — čim postane kvadrat, * izobličenje postaje vidljivo. Ista zamka kao sa `thumbnail`-om na * karticama šablona. */ .autocomplete-suggestion .search-image { border-radius: var(--mzm-radius-sm, 6px); object-fit: cover; } /* ========================================================== * 5. MOBILE HEADER * ========================================================== */ @media screen and (max-width: 849px) { /* Top bar — prikaži samo telefon na mobilnom */ #top-bar .hide-for-medium { display: none; } #top-bar .show-for-medium { display: flex; } /* Main header kompaktniji */ .header-main .header-inner { padding-top: var(--mzm-space-2); padding-bottom: var(--mzm-space-2); } /* Sticky header senka */ .header-wrapper.is-sticky .header-main { box-shadow: var(--mzm-shadow-md); } /* Mobile meni panel */ .mfp-content .nav-sidebar { background-color: var(--mzm-bg); } .mfp-content .nav-sidebar li a { font-family: var(--mzm-font-family); font-size: var(--mzm-text-base); color: var(--mzm-text-primary); padding: var(--mzm-space-3) var(--mzm-space-4); border-bottom: var(--mzm-border-width) solid var(--mzm-border); text-transform: none; } .mfp-content .nav-sidebar li a:hover, .mfp-content .nav-sidebar li.active > a { color: var(--mzm-accent); background-color: var(--mzm-surface); } .mfp-content .sidebar-menu-header { background-color: var(--mzm-surface); font-family: var(--mzm-font-family); font-weight: var(--mzm-font-semibold); } /* * LUPA JE UPADALA U PROSTOR ZA TEKST (10.09.2026., F-090) * * Izmereno na iw=390, sa otvorenim mobilnim menijem: * polje `.search-field` 259px, 20..279, `padding-right: 12px` * dugme `.ux-search-submit` 40px, 236..276 * Tekst je dakle smeo do 267, a dugme počinje na 236 — **31px preklopa**, * pa je natpis bio odsečen ispod ikonice („…dodatna opre"). * * ⚠️ Nije problem u veličini ikonice nego u tome što joj polje nije * ostavilo mesto. Vrednost je IZRAČUNATA iz merenja, ne pogođena: * 279 − 236 = 43px koje dugme zauzima, + 6px razmaka = 49 → 50px. * * ⚠️ Vezano za `.mfp-content`, dakle SAMO za panel mobilnog menija. * Pretraga u header-u na širokom ekranu ima dovoljno mesta i tamo se * problem nije video — `F-079`: „popravi na jednom mestu" ne znači * „primeni svuda". */ .mfp-content form.searchform .search-field { padding-right: 50px; } } /* ========================================================== * 6. TABLET * ========================================================== */ @media screen and (min-width: 550px) and (max-width: 849px) { .header-main .searchform-wrapper { max-width: 320px; } } /* ========================================================== * 7. DESKTOP LARGE (1400px+) * ========================================================== * * ⚠️ Ovde je NEKAD stajalo `#wide-nav .container { max-width: 1400px }`. * Obrisano 07.08.2026. — vidi F-035. * * Razlog: ostatak strane drži kontejner od 1290px (sadržaj počinje na 90px * od ivice). Meni je sa 1400px počinjao na 20px i vidno štrčao van te linije. * Na 13" MacBook-u (1440px) razlika je 70px sa svake strane i to je prvo što * se primeti — strana deluje „preširoko" iako je preširok samo jedan red. * * Izmereno: meni staje u JEDAN RED na 1290px sa `font-size: 0.8rem` ispod. * Širi kontejner mu, dakle, nije ni trebao. * ========================================================== */ @media screen and (min-width: 1400px) { .header-main .searchform-wrapper { max-width: 600px; } } /* ⚠️ Ovde je do 09.08.2026. stajalo i `font-size: 0.8rem` za nav stavke. * Obrisano — vidi F-037. * * Meni je time na 1400px+ postajao KRUPNIJI, a kontejner je zaključan na * 1290px i ne raste. Rezultat: na 1440px je meniju ostajalo 20px bočnog * prostora, a na 1366px čak 50px — dakle širi ekran je imao manje vazduha. * * Izmereno: meni traži 1190px na `0.75rem`, ~1250px na `0.8rem`. * Ujednačavanjem na 0.75rem dobija se 30px na svim širinama preko 1320px. */ /* ========================================================== * 8. FEATURED NAV ITEM — Print maskice * ========================================================== */ #wide-nav .header-bottom-nav > li.mzm-nav-featured { display: flex; align-items: center; padding: 0.35rem 0; } #wide-nav .header-bottom-nav > li.mzm-nav-featured > a.nav-top-link { /* Isti gradijent nosi i gornja traka (#top-bar, odeljak 1) — menjati zajedno. */ background: linear-gradient(135deg, #3c83f5 0%, #0e1e4a 100%); color: #ffffff; border-radius: 20px; padding: 0.35rem 0.9rem; margin-right: 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem; line-height: 1.4; transition: filter 0.25s ease, box-shadow 0.25s ease; } #wide-nav .header-bottom-nav > li.mzm-nav-featured > a.nav-top-link:hover { color: #ffffff; filter: brightness(1.12); box-shadow: 0 4px 16px rgba(14, 30, 74, 0.4); } /* Sparkle ikonica — desno od teksta */ #wide-nav .header-bottom-nav > li.mzm-nav-featured > a.nav-top-link::after { content: '✦'; position: static; height: auto; width: auto; background: none; background-color: transparent; transform: none; transition: none; font-size: 0.7rem; opacity: 0.9; flex-shrink: 0; } /* Ukloni hover transform na sparkle (override opšteg ::after pravila) */ #wide-nav .header-bottom-nav > li.mzm-nav-featured > a.nav-top-link:hover::after { transform: none; } /* Ukloni sparkle levo */ #wide-nav .header-bottom-nav > li.mzm-nav-featured > a.nav-top-link::before { content: none; } /* Ukloni NOVO badge — čišći izgled */ #wide-nav .header-bottom-nav > li.mzm-nav-featured > a.nav-top-link span:not(.icon-angle-down)::after { content: none; } /* Mobile nav — featured item */ .nav-sidebar li.mzm-nav-featured > a, .mobile-sidebar li.mzm-nav-featured > a { color: var(--projekat-accent, #3c83f5) !important; font-weight: 700; } .nav-sidebar li.mzm-nav-featured > a::before, .mobile-sidebar li.mzm-nav-featured > a::before { content: '✦ '; font-size: 0.7rem; } .nav-sidebar li.mzm-nav-featured > a::after, .mobile-sidebar li.mzm-nav-featured > a::after { content: none; } /* ========================================================== * 9. NAV — kompaktne stavke na SVIM desktop širinama * ========================================================== * * Gornja granica `max-width: 1400px` uklonjena 09.08.2026. (`F-037`). * Ranije je iznad 1400 važilo `0.8rem` iz sekcije 7, pa je meni na 1440px * imao MANJE bočnog prostora (20px) nego na 1366px (50px). Sada je 0.75rem * na svim desktop širinama. * * `!important` je opravdan — Flatsome piše `font-size` selektorom veće * specifičnosti. * ========================================================== */ /* ⚠️ 06.09.2026. — `0.75rem` (12px) → `13px`, na oba pravila. * * Zahtev klijenta preko Vere: „+1 ili +2px". Odlučeno +1: 12px → 13px. * * ⛔ DVA MERENJA SU BILA POGREŠNA PRE NEGO ŠTO JE OVO SELO. Oba su davala * brojke koje su tvrdile da meni staje, dok se na ekranu lomio: * * 1. Prvo merenje uopšte nije menjalo font — inline `font-size` bez * `!important` je gazilo pravilo niže u ovom fajlu, pa je za 12, 13 * i 14px vraćalo isti zbir (1026). Tri identična broja su bila znak, * a ne podatak. * * 2. Drugo je merilo `getBoundingClientRect().width` po stavci — * ⛔ **to NE uključuje margine.** Deset stavki × 14px margine = 140px * koje niko nije brojao. Otud „zbir 1088 < kutija 1190" uz prelomljen * meni na ekranu. * * ⚠️ Kad brojka kaže da staje a oko vidi da ne staje — greši brojka. * * MERENJE KOJE VAŽI (06.09.2026., font 13px, sa marginama): * * tekst stavki ~914px * margine
  • 7+7 × 10 140px * padding linka 8+8 × 10 160px * ──────────────────────────────────────── * UKUPNO TRAŽI 1214px * * ⛔ NAJTEŠNJE JE NA ŠIROKOM EKRANU, NE NA USKOM. Ovde je 06.09. prvo * pisalo obrnuto. Izmereno: * * 1240px ekran → kutija 1210 manjak 4px * 1440px ekran → kutija 1190 manjak 24px ← MERODAVNO * * Uzrok je `_layout.css`: bočni padding raste sa širinom do svojih 25px, * a kontejner je zaključan na 1290px — pa širi ekran daje UŽU kutiju. * Preko ~1400px kutija se više ne menja, tako da je 1190px najgori slučaj. * * ⚠️ PIKSELI, NE `rem`, i NE `--mzm-text-sm`. Token je `clamp` koji na * ekranima ~1867px+ stiže do 14px — dakle tačno do granice prelamanja — * a koristi se i drugde, pa se ne sme podešavati zbog menija. * * ⚠️ FEATURED („Print Maskice") IDE ZAJEDNO SA OSTALIMA. Merenje je font * menjalo na svim stavkama, uključujući njega; da ostane na 12px, zbir * više ne bi odgovarao tabeli, a i vidno bi odskakao. * * ⚠️ AKO SE MENIJU DODA STAVKA, TABELA SE MERI PONOVO — sa 64px zrake * staje otprilike još jedna kratka stavka, i to je sve. * Linija za merenje je u WORKLOG-u pod 06.09.2026. */ @media (min-width: 850px) { /* ⚠️ RAZMAK IZMEĐU STAVKI — 7px → 4px, 06.09.2026. * * Bez ovoga font od 13px NE STAJE: traži 1214px, a najuža kutija je * 1190px (vidi računicu u sekciji 7). Ovo je jedina izmena koja je * odlučila da li +1px uopšte može. * * ušteda: 3px × 2 strane × 10 stavki = 60px * predviđen zbir: 1214 − 60 = 1154px * IZMEREN zbir posle uploada = 1168px * * ⚠️ Predviđanje je promašilo za 14px, i to naniže — treći put te večeri * da je moja računica ispala optimističnija od stvarnosti. Ne oslanjaj * se na izračunatu uštedu; izmeri posle izmene. * * ⛔ KOLIKO JE OSTALO ZRAKE — NIJE IZMERENO, I NE PIŠE SE NAPAMET. * Merna linija je poredila zbir sa `ul.parentElement`, a taj roditelj * se skuplja oko sadržaja — posle izmene je vraćao `zbir == kutija` * (1168 = 1168) na svakoj širini, što nije podatak nego tautologija. * * Pouzdano je izmereno SAMO ovo, i to je dovoljno: * · na 1240px i na 1440px meni stoji u JEDNOM redu * · provereno preko `top` svih 10 stavki: 152px, osim pilule 153px * * ⚠️ ZA SLEDEĆU IZMENU MENIJA: ne traži „koliko ima mesta" od roditelja * koji se skuplja. Meri `top` svake stavke — prelom je kad se pojavi * druga vrednost, i to za desetine piksela, ne za jedan. * Sledeći potez kad zatreba prostora: padding linka (8px), pa * premeštanje stavki pod „Više". * * ⚠️ Vrednost 7px je bila Flatsome-ova, ne naša — do 06.09. nije bila * nadjačana nigde u ovom fajlu. `!important` ide zato što i susedna * pravila u ovom bloku moraju da tuku Flatsome. * * ⚠️ NE SMANJIVATI DALJE OD 4px bez merenja na dodir — razmak između * dve susedne mete pada na 4+8+8+4 = 24px, što je već blizu donje * granice za pouzdano ciljanje mišem, a meni je i tačka dodira. */ #wide-nav .header-bottom-nav > li { margin-left: 4px !important; margin-right: 4px !important; } #wide-nav .header-bottom-nav > li > a.nav-top-link { padding-left: 0.5rem !important; padding-right: 0.5rem !important; font-size: 13px !important; } #wide-nav .header-bottom-nav > li.mzm-nav-featured > a.nav-top-link { padding-left: 0.75rem !important; padding-right: 0.75rem !important; font-size: 13px !important; } }