/* Osnovni popravci koji vrijede na cijeloj stranici. Ucitava se globalno, kao i fontovi. */ /* Elementor na mobitelu (do 767 px) svakom kontejneru postavlja `--flex-wrap: var(--flex-wrap-mobile)`, a zadana vrijednost te varijable je `wrap`. Kod kontejnera koji su u STUPCU to je opasno: cim kontejner dobije odredjenu visinu, sadrzaj se prelomi u NOVE STUPCE desno umjesto da tece prema dolje. WebKit na iPhoneu to radi na nasim podstranicama, pa je stranica bila siroka preko 2500 px i sadrzaj poredan vodoravno. Chrome na racunalu isti dokument slaze ispravno, pa se kvar ne vidi ondje. Klasu `cerna-stupac` nosi svaki kontejner pune sirine koji nije u redu; postavlja je skripta koja gradi stranice. Kontejneri u redu (zaglavlje, podnozje, naslovnica) namjerno zadrzavaju `wrap`. */ @media (max-width: 767px) { .cerna-stupac.cerna-stupac { --flex-wrap-mobile: nowrap; } } /* Samostalna ikona iz dizajn paketa (widget „Ikona iz dizajna"). Boja ide kroz `currentColor`, pa je postavlja widget. */ .ci { display: flex; align-items: center; color: #0f6c99; } .ci svg { width: 28px; height: 28px; display: block; } /* Ikone iz dizajna u Elementorovim vlastitim widgetima. Elementor boju ikone postavlja na `fill`. Nase ikone su linijske i crtaju se `stroke`-om, pa im ta postavka ne pomaze — ostale bi u boji naslijedjenoj od teksta. Boja se zato widgetu zadaje varijablom `--cerna-ikona` (kroz Custom CSS: `selector { --cerna-ikona: #80D8FF; }`), a ova je pravila prenose na `stroke`, odnosno na `fill` kod punih ikona poput Facebooka. `!important` je nuzan da nadjaca atribut `style` u samoj datoteci. Zato `stroke` u ikonama NEMA `!important` — inline `!important` pobijedio bi i ovo pravilo, pa se boja ne bi dala postaviti. `fill:none` ga zadrzava jer njega Elementor nametne CSS-om. Gdje varijabla nije postavljena, sve ostaje na `currentColor`, pa nasi widgeti nisu dirnuti. */ .elementor-widget svg [style*="stroke:currentColor"] { stroke: var(--cerna-ikona, currentColor) !important; } .elementor-widget svg [style*="fill:currentColor"] { fill: var(--cerna-ikona, currentColor) !important; } /* ---------- dodirne mete u Elementorovim dijelovima ---------- Zakonski prag je 24×24 CSS px (NN 17/19 → EN 301 549 → WCAG 2.2 AA, kriterij 2.5.8); 44 px je AAA razina i podiže se samo ondje gdje raspored ostaje netaknut (izbornik i pretraga u zaglavlju — vidi `cerna-megamenu.css`). Ovdje su dijelovi koje crta Elementor, a ne naši widgeti: gornja traka zaglavlja, kontakti u podnožju i mali gumb u karticama. Pravila stoje u dodatku, ne u predlošcima, da prežive svaku buduću izmjenu predloška. Dva postupka, oba izmjerena na naslovnici 07.09.2026.: 1. `min-height` + `inline-flex` ondje gdje element ima mjesta u svom redu (gornja traka 23 → 24, podnožje 19 → 24). Zaglavlje je ostalo 128 px, podnožje 419 px — dakle bez pomaka. 2. Nevidljivi `::after` sloj ondje gdje bi `min-height` pomaknuo raspored: gumb „Opširnije →" u kartici je 20 px, a podizanje na 24 podiglo bi karticu za 4 px. Sloj prima klik — dokazano `elementFromPoint`om: točka 3 px iznad poveznice prije je pogađala kontejner, poslije samu poveznicu, dok visina kartice ostaje 243 px. */ header .elementor-icon-list-item > a, footer .elementor-heading-title > a, footer p > a { min-height: 24px; display: inline-flex; align-items: center; } .elementor-button.elementor-size-sm { position: relative; } .elementor-button.elementor-size-sm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); /* Tocno 24 px kod niskih gumba, a `min-height` drzi sloj preko cijelog gumba ondje gdje je gumb visi (npr. „Kontaktirajte nas", 59 px). Prva izvedba je bila `top/bottom: -2px`, ali je kod gumba od 19 px dala 23 — jedan piksel ispod praga. */ height: 24px; min-height: 100%; } /* Preskocnica mora biti vidljiva kad dobije fokus. Tema je nosi kao `screen-reader-text` isjeceno na 1x1 px i **takva ostaje i na fokusu** — izmjereno 07.09.2026. Time je nevidljiva i tipkovnici i misu (WCAG 2.4.7 Focus Visible). `!important` je nuzan jer teme svoj `screen-reader-text` pisu s njim. */ .skip-link.screen-reader-text:focus { position: fixed !important; top: 8px !important; left: 8px !important; width: auto !important; height: auto !important; min-height: 44px !important; clip: auto !important; clip-path: none !important; display: inline-flex !important; align-items: center; padding: 0 18px !important; background: #1f2c33 !important; color: #fff !important; text-decoration: none !important; font-family: "Montserrat", system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; z-index: 100000 !important; } /* Mrvice (SEOPress `.breadcrumb`) stoje na svakoj podstranici i poveznice su im 18 px. `min-height` bi traku podigao 22 → 24 i pomaknuo sekciju za 2 px (izmjereno), pa i ovdje ide nevidljivi sloj. */ .breadcrumb a { position: relative; } .breadcrumb a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 24px; min-height: 100%; } /* ---------- responzivnost (12.10.2026.) ---------- Widget s ručno zadanom širinom (Elementor „Širina: prilagođeno", npr. uvodni tekst stranice 760 px) ne smije biti širi od svog spremnika. Na tabletu od 768 px spremnik ima 728 px, pa je uvod stršao i bio odrezan s lijeve strane na svim podstranicama. */ .elementor-widget.elementor-widget__width-initial { max-width: 100%; } /* Gumb „Izjava o pristupačnosti" u podnožju: kad se u užem stupcu prelomi, Elementor ga centrira i tekst odskače od ostatka stupca. */ footer .elementor-button .elementor-button-content-wrapper { justify-content: flex-start; text-align: left; } /* ---------- pristupačnost (22.10.2026., audit WCAG 2.2 AA) ---------- 1.4.1: poveznica unutar teksta razlikovala se od teksta samo bojom (#0f6c99 prema tekstu, kontrast 1,66:1) — podcrtana je. Gumbi i poveznice koje su same u retku (izbornici, kartice) ovo ne pogađa. */ .elementor-widget-text-editor :is(p, li, td) a:not(.elementor-button), .elementor-widget-theme-post-content :is(p, li, td) a:not(.elementor-button) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } /* 1.4.3: dva Elementor naslova na tamnoj podlozi s kontrastom ispod 4,5:1 (/projekti/ #9fb1ba na #37474f; predložak projekta #5c7481 na #1f2c33). */ body .elementor .elementor-element.elementor-element-e21642a .elementor-heading-title.elementor-heading-title { color: #a5b6be; } body .elementor-element.elementor-element-68d9c25.elementor-element-68d9c25, body .elementor .elementor-element.elementor-element-68d9c25 .elementor-heading-title.elementor-heading-title { color: #83959f; }