/* ========================================================================== Vertikalni razmaci i skala, mjereni iz PDF-a. Zaseban fajl s razlogom: na njemu radi jedan tok paralelno s radom na rasporedu u `sections.css`. Dva toka u istom fajlu znace sudar pri svakom spajanju. Ucitava se POSLIJE `sections.css`, pa ono sto je ovdje nadjacava. Ovdje ide samo ono sto mijenja RAZMAK i VISINU: `--sec-pt`, `--sec-pb`, margine izmedu naslova i sadrzaja, prored, padding kartica. Boje, tipografija i raspored ne pripadaju ovdje. --------------------------------------------------------------------- Kako su brojke dobijene Svaka mjera ispod je izvucena iz `deploy/qa/pdf-json/.json`, iz PRAVOUGAONIKA kartice (`rects`) i okvira teksta i slika u njoj, a ne iz opsega sekcije u `/sections.json`. Razlog: opseg sekcije u manifestu pocinje na prvom uparenom TEKSTU, pa kartica koja pocinje slikom ili ima unutrasnji razmak ispadne kraca nego sto jest. Na trust sekciji je ta razlika 80 px, na heroju 200. Alati: `deploy/qa/razmaci_pdf.py` (dizajn), `razmaci_mjera.js` (sajt), `razmaci_ab.js` (isti DOM prije i poslije ovog fajla), `razmaci_sazmi.py` (gdje stranica raste). --------------------------------------------------------------------- BRANA: geometrija iz PDF-a ide pod `@media (min-width: 1024px)` Svaka brojka ispod izmjerena je na okviru od 1512 px. Na telefonu ne vrijedi nijedna. Ovaj fajl se ucitava POSLIJE `sections.css`, pa pravilo odavde iste specificnosti pobjeduje — ukljucujuci i mobilni blok `@media (max-width: 1023px)` u `sections.css`, koji karticama daje `padding: 1.5rem` i `min-height: 0`. Bez brane bi `padding: 3.75rem` (60 px sa svake strane) iz dizajna pao i na 390 px sirok ekran: 120 px od 350 raspolozivih ode na uvlake. To je isti kvar zbog kojeg je pao `healthall` na stupcu bloga. Vidi `deploy/MOBILE_RULES.md`. Izvan brane smije ostati samo ono BEZ piksela iz dizajna — pravilo koje ispravlja dvostruko racunanje razmaka, a ne postavlja mjeru. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Brana za razmak sekcije NA TELEFONU `--sec-pt` i `--sec-pb` su inline stilovi po sekciji (`inc/sections.php` ih ispisuje iz polja `spacing_top` / `spacing_bottom`). Inline stil ne zna za media query, pa vrijednost izmjerena na okviru od 1512 px pada i na 390 px ekran — ista brojka piksela na ekranu cetiri puta uzem. Dok su te vrijednosti bile sitne to se nije vidjelo. Otkad ih `deploy/seed/razmaci_sekcija.php` postavlja iz dizajna, najveca je 219 px: na `prima-visita` je gornji razmak druge sekcije 186 px, sto je na telefonu pola sirine ekrana praznine iznad naslova. Snimak na 390 px to je i pokazao. Granica je 96 px, i ona je mjera, ne okrugao broj: izvucena je iz mobilnog dizajna (`deploy/qa/pdf-json/mobile-hp.json`, okvir 430 px). Razmaci izmedu susjednih grupa sadrzaja ondje imaju medijan 46 px i p90 tacno 96; iznad toga u cijelom mobilnom PDF-u postoje jos samo dvije praznine (269 i 489 px), a obje su prijelaz na fotografiju preko cijele sirine, ne razmak izmedu sekcija. Pogada malo: od 678 vrijednosti na 339 sekcija, granicu prelazi 29 (23 gornja, 6 donja). Ostale prolaze nedirnute. Jedinica mora biti eksplicitna i u zamjenskoj vrijednosti: `min()` ne prima golu nulu uz duzinu, pa je `var(--sec-pt, 0px)`, ne `0`. -------------------------------------------------------------------------- */ @media (max-width: 1023px) { /* Sekcija s IZMJERENIM mobilnim razmakom (polja `m_spacing_top` / `m_spacing_bottom`, iz Mobile HP.pdf) nosi njega, bez granice — to je mjera, a ne desktop brojka koju treba ograničiti. Bez mjere vrijedi desktop vrijednost s granicom, kao i do sada. */ .sec { padding-top: var(--m-sec-pt, min(var(--sec-pt, 0px), 96px)); padding-bottom: var(--m-sec-pb, min(var(--sec-pb, 0px), 96px)); } } /* -------------------------------------------------------------------------- 1. `.sec__inner > *:first-child { margin-top: 0 }` — POVUCENO Stajalo je ovdje i obaralo visinu, pa je ipak izbaceno. Dva razloga, oba izmjerena, i oba se vide tek kad se pored visine gleda i SAV. Obrazlozenje je bilo: modul vuce `margin-top: 2rem`, sekcija vec ima `--sec-pt` iz dizajna, dakle isti razmak dva puta. Mjera to ne potvrduje. `razmaci_spoj.py` na 286 savova daje medijan -34 px: razmak izmedu sekcija na sajtu je vec UZI nego u dizajnu, ne siri. Nema dvostrukog racunanja — ima manjka. Skidanje jos 32 px tjera sav na -35 i udaljava od dizajna, a broj visine pritom pada. Tacno ona zamka zbog koje se visina ne smije gledati sama. Drugo, vlastita brojka nije se odrzala. Komentar je tvrdio 1760 px na 55 sekcija. A/B nad istim DOM-om (`razmaci_ab.js`) daje oko 480 px: na vecini sekcija modul NIJE prvo dijete jer iznad njega stoji naslov, pa pravilo uopste ne opali. Razlika je 3,6 puta. Ostaje zapisano da se isti put ne prolazi dva puta: pravilo obara visinu, ali kvari razmak koji je bio blizi tacnom. Manjak u savovima se popravlja na `spacing_top` / `spacing_bottom` u sijacu, ne ovdje. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 2. Kartice povjerenja (trust) Najskuplja sekcija na sajtu: stoji na svih 32 stranice i svaka je bila oko 230 px visa nego u dizajnu. Dizajn, mjereno iz pravougaonika kartice u sva 32 PDF-a (64 kartice, bez ijednog odstupanja): v1 (dvije kartice 631 px): kartica visoka 191, tekst pocinje 39 px ispod vrha, zadnji red 22-30 px iznad dna v2 (kartice 631 + 523): kartica visoka 278; u desnoj tekst pocinje 31 px ispod vrha a zadnji red 27 px iznad dna Tema je imala `padding: 3.375rem` (54) odnosno `3.75rem` (60) sa svih strana. Vodoravno je tacno; uspravno je dvostruko previse. Mijenja se SAMO uspravni padding. Vodoravni ostaje kakav jeste — on je pitanje rasporeda, ne razmaka, i nije moj. v1 OVDJE VISE NE DIRAM. Dok je ovaj fajl nastajao, `sections.css` je u meduvremenu dobio `padding: 2.125rem 3.375rem 1.375rem` (34/54/22), izmjereno presjekom rendera iz `Footer.pdf`. Moja mjera iz pravougaonika daje 39 gore. Razlika je 5 px, a dva fajla koja se otimaju oko istog selektora su gora od 5 px. Njihova mjera ostaje. Ostaje v2, gdje `sections.css` jos uvijek ima 60 px sa svih strana (`padding: 3.75rem`) odnosno 33 px na tijelu lijeve kartice. -------------------------------------------------------------------------- */ @media (min-width: 1024px) { /* v2, desna kartica sa znackama: 31 gore / 27 dolje, 60 sa strana. */ .trust--v2 .trust__card:last-child { padding: 1.95625rem 3.5rem 1.6875rem 2.6875rem; } /* v2, desna kartica, VODORAVNO (`Moduli/Footer.pdf`, kartica 862..1385): traka medalja je slika 905..1321 — 43 od lijevog ruba kartice — a prvi naslov i prvi logotip certifikata su na 922 (60), drugi naslov na 917 (55). Rub sadržaja je zato rub trake (43), a naslovi su uvučeni za razliku (17 i 12). Desno: par „Safe" završava na 1329, dakle 56 od ruba — sa 60 bi izlazio iz okvira sadržaja. Drugi naslov je ranije imao `text-indent: -5px` u `components.css` jer je rub sadržaja bio na 60; sad je rub na 43 i naslov nosi svoju pozitivnu uvlaku, pa taj izuzetak više ne treba. */ .trust--v2 .trust__card:last-child .trust__group:first-child .trust__group-title { padding-left: 1.0625rem; } /* 17 → x 922 */ .trust--v2 .trust__card:last-child .trust__group:not(:first-child) .trust__group-title { padding-left: .75rem; } /* 12 → x 917 */ /* v2, lijeva kartica: sama nema padding (fotografija ide do ruba), razmak nosi `.trust__body`. Mjereno iz `Moduli/Footer.pdf`: kartica je pravougaonik x 113..852 na y 650..928 (739x278), fotografija u njoj je x 528..852, pa je tijelo teksta siroko 415 px (113..528). VODORAVNO. Tekst pocinje na x 146, dakle lijeva uvlaka 33. Desna NIJE 33 nego 11: najduzi redak ide do x 513, a fotografija pocinje na 528, pa je stupac teksta izmedu 367 i 382 px sirok; 415 - 33 - 11 = 371 pada u taj raspon. Dok je desna bila 33, stupac je bio 349 — preuzak i za uvod (357 px, u dizajnu jedan redak) i za glavni tekst, pa se uvod lomio u dva retka a tekst u sest umjesto cetiri. Kartica je zbog toga bila 334 px umjesto 278, i to na svih 32 stranice. USPRAVNO. Dugme je pravougaonik y 873..916, dno kartice je 928, dakle 12 px dolje (bilo 22). Gore 29, ne 30 i ne 26. Vrh font-okvira naslova je na y 680,2, dakle 30,2 od vrha kartice, a CSS `padding-top` ide do vrha OKVIRA RETKA, koji stoji pola viska proreda iznad font-okvira. Naslov je 16 px s proredom 1,571 (`--lh-body`), dakle okvir retka 25,1; font-okvir je 22,4. Visak je 2,7, polovina 1,35, pa je padding 30,2 - 1,35 = 28,9. Ta korekcija je 1,35 px, a ne 4,6: `y` bloka u ovom izvozu NIJE vrh slova nego vrh font-okvira. Provjereno brojem — svaki blok je tacno 1,4em visok (naslov 16 px: 22,4; uvod 14 px: 19,6; tekst 14 px: isto), a 1,4em je ascender+descender Poppinsa, ne visina slova. Kad bi `y` bio vrh slova, blok od 16 px ne bi bio visok 22,4 nego oko 11. Visinu kartice ionako drzi `min-height: 17.375rem` (278) iz `sections.css`, pa je ovdje mjerodavan raspored unutar nje. */ /* Desna uvlaka je 22, ne 11 — stupac teksta je time 360 px (415 - 33 - 22). Izvedeno iz PRIJELOMA REDAKA u `04_Prima visita.pdf`, ne iz modul-tabaka: dizajn 311,7 359,8 343,0 326,6 222,3 sajt s 371 307,3 367,1 326,9 322,2 222,3 Zadnji redak se poklapa u decimalu, dakle pismo i metrika su isti; razlika je samo u tome gdje se lomi. Sa 371 px na sajtu stane „Il" na kraj drugog retka (367,1 <= 371), a u dizajnu ne stane (359,8 + razmak + „Il" = 375,8). Stupac mora biti manji od 367,1 da „Il" ispadne, a najmanje 359,8 da drugi redak stane — 360 pada u taj raspon i jedini je broj koji reproducira sva cetiri prijeloma. Uvod („Esperienza specialistica…", 311,3) ostaje u dva retka, kako ga dizajn i ima. Vrijedilo je za 44 bloka na 25 stranica: `w +12` je bila najcesca ponovljena vrijednost u cijeloj mjeri sirine. */ /* Gornja uvlaka 31, ne 29 (TRU-N03): vrh slova naslova je u dizajnu 34 px ispod vrha kartice (04_Prima visita 7604 -> 7638, Laboratorio 5508 -> 5542, Clinica 7332 -> 7366), na sajtu je bio 32. */ .trust--v2 .trust__card:first-child .trust__body { padding: 1.9375rem 1.375rem .75rem 2.0625rem; } /* Uspravni raspored unutar lijeve kartice, izveden iz PDF-a STRANICE, a ne iz modul-tabaka. Razlika je bitna i zapisana je kao greska 28 u `GRESKE_U_PDF.md`: `Moduli/Footer.pdf` opisuje tekst od 14 px u cetiri retka, a svih 25 stranica koje nose modul imaju 16 px u pet redaka. Izmjereno u `04_Prima visita.pdf`, vrhovi redaka: naslov 7634,20 16 px Poppins-Bold (jedan redak, okvir 22,4) uvod 7673,20 16 px Poppins-Medium 7693,20 korak 20 tijelo 7713,20 16 px Poppins-Light 7733,20 … 7793,20 korak 20 dugme 7837,36 16 px Poppins-Light Iz toga ispadaju tri razlicita razmaka, pa jedan `gap` ne moze biti tacan: naslov -> uvod 16,6; uvod -> tijelo 0 (korak je isti kao unutar odlomka); tijelo -> ploha dugmeta 13,76 (tekst dugmeta stoji 10,4 px ispod vrha plohe, `Moduli/Footer.pdf` daje plohu 873..916 uz tekst na 883,4). Zato `gap: 0` i tri izricite margine. Tijelo je uz to imalo korak retka 25,6 umjesto 20: `

` nosi 14 px s proredom 1,25, a raspon u njemu 16 px, pa je omjer 1,571 s tijela davao 16 x 1,571. S 16 px i 1,25 korak je 20, tacno kao u dizajnu. Dugme je bilo 14 px, a dizajn ga ima 16. */ .trust--v2 .trust__card:first-child .trust__body { gap: 0; } /* Naslov -> uvod po vrhovima slova: dizajn 40 (7638 -> 7678), sajt je sa 16,6 imao 39 — Bold i Medium iste velicine nemaju isti vrh slova u pregledniku i u PDF-u, pa se razmak uzima s tinte, 17,6. */ .trust--v2 .trust__card:first-child .trust__card-lead { margin-top: 1.1rem; } /* 17,6 */ .trust--v2 .trust__card:first-child .trust__card-text { margin-top: 0; } .trust--v2 .trust__card:first-child .trust__card-cta { margin-top: .7975rem; } /* 12,76: uz uvlaku 31 ploha ostaje na 223 od vrha kartice */ .trust--v2 .trust__card:first-child .trust__card-text, .trust--v2 .trust__card:first-child .trust__card-text p { font-size: 1rem; line-height: 1.25; } /* Pasus u tijelu nosi vlastitu marginu od 1em. U okomitom `flex` se margine NE sazimaju, pa je tih 16 px gore i 16 dolje ulazilo u racun: okvir tijela je bio 132 px umjesto 100 (pet redaka po 20), tekst je pocinjao 16 px nize nego u dizajnu, a dugme ispod 32 px prenisko. */ .trust--v2 .trust__card:first-child .trust__card-text p { margin: 0; } .trust--v2 .trust__card:first-child .trust__card-cta { font-size: 1rem; } /* Veličina teksta po stranici (`o_text_size` / `o_text_lh`, predložak daje `--trust-ts` / `--trust-tlh`). `01_Clinica - Clinica.pdf` crta lijevu karticu drukčije od ostalih 24 stranica (CL-K01, FT-R02), kartica 113..744 × 7331,5..7609,5: uvod 14 px Medium, JEDAN red, font-okvir +69,3 (7400,8) tijelo 14 px Light, četiri reda korakom 22, od +91,3 (7422,8) pilula +223..+266, kao na svim stranicama Raspon unutar `

` nosi svoju `fs-16`, pa se veličina spušta i na njega. Uvod: vrh font-okvira (1,4 em) u redu stoji (prored − 1,4 × veličina) / 2 niže; 16 px u redu od 20 to je −1,2 i razmak 17,6, pa je razmak općenito 16,4 − taj pomak (14 px u redu od 22: +1,2, razmak 15,2). Stupac: najduži red tijela „implantologia e chirurgia orale. Il team Smile riunisce" je širok ~367, a „…tecnici che collaborano" ~391, pa prelom iz dizajna daje samo stupac između ta dva broja — 370 (desna uvlaka 12 umjesto 22). Pilula je uz dno kartice (`margin-top: auto`), jer tijelo od četiri reda završava ranije od pet redova po 20. */ .trust--v2.trust--ts .trust__card:first-child .trust__body { padding-right: .75rem; } .trust--v2.trust--ts .trust__card:first-child .trust__card-lead, .trust--v2.trust--ts .trust__card:first-child .trust__card-lead [class*="fs-"], .trust--v2.trust--ts .trust__card:first-child .trust__card-text, .trust--v2.trust--ts .trust__card:first-child .trust__card-text p, .trust--v2.trust--ts .trust__card:first-child .trust__card-text [class*="fs-"] { font-size: var(--trust-ts); line-height: var(--trust-tlh, 1.25); } .trust--v2.trust--ts .trust__card:first-child .trust__card-lead { margin-top: calc(1.025rem - (var(--trust-tlh, 1.25rem) - 1.4 * var(--trust-ts)) / 2); } .trust--v2.trust--ts .trust__card:first-child .trust__card-cta { margin-top: auto; } /* Desna kartica: razmak izmedu dvije skupine je 12,3 px, ne 32. Iz `04_Prima visita.pdf`: kartica x 862..1385, y 7604..7882 (523 x 278). skupina 1 naslov 7635,3 (okvir do 7654,9), traka znakova 7671..7741 skupina 2 naslov 7753,3 (okvir do 7772,9), znakovi 7776..7855 Skupina 1 je dakle visoka 105,7 (sajt ima 103,9, razlika 1,8), a od njenog dna do naslova druge skupine ima 7753,3 - 7741 = 12,3. Tema je davala 32 (12 iz `gap` plus 20 iz `margin-top`), pa je drugi naslov stajao 19,8 px prenisko na svih 25 stranica s ovim modulom. */ .trust--v2 .trust__card:last-child .trust__body { gap: 0; } .trust--v2 .trust__card:last-child .trust__group + .trust__group { margin-top: .76875rem; } /* 12,3 */ /* Unutrasnjost dvije skupine znakova NIJE ista, i to je jedini razlog zbog kojeg je kartica bila 285 px umjesto nacrtanih 278. Mjereno u `04_Prima visita.pdf` (kartica x 862..1385, y 7604..7882): skupina 1 naslov 7635,3..7654,9 (19,6) traka znakova 7671..7741 (70) skupina 2 naslov 7753,3..7772,9 (19,6) znakovi 7776..7855 (79) Razmak naslov -> znakovi je dakle 16,1 u prvoj i 3,1 u drugoj, a trake su 70 i 79 px visoke. Tema je davala 12 px razmaka u obje i puštala da visinu odredi sam znak (76,5), pa je druga skupina ispadala 8,8 px previsoka. Prored naslova je 1,4 — visina font-okvira u PDF-u — umjesto naslijedjenih 1,571; time je naslov 19,6 px kao u dizajnu, a ne 22. Zbir: 31 + 105,7 + 12,3 + 101,7 + 27 = 277,7, dakle `min-height: 278` kartici vise nista ne dodaje. */ .trust--v2 .trust__card:last-child .trust__group-title { line-height: 1.4; } .trust--v2 .trust__card:last-child .trust__group:first-child .trust__group-title { margin-bottom: 1.00625rem; } /* 16,1 */ .trust--v2 .trust__card:last-child .trust__group:last-child .trust__group-title { margin-bottom: .19375rem; } /* 3,1 */ /* Visine traka (70 i 79) više ne drži `min-height`: logotipi sad nose visinu i razmak gore iz dizajna (polja uz logotip), pa je red visok tačno koliko dizajn — traka 1 + 69,3, certifikati 5 + 73,9 = 78,9. Uz `min-height: 79` je prije red bio viši od sadržaja, a logotipi su rasli do 77 px da ga popune (TRU-04). */ } /* -------------------------------------------------------------------------- 3. Podijeljeni heroj (hero-split) `.hero-split` je nosio `padding-block: 7.5rem 3rem` — 120 px gore i 48 dolje, ugradeno u modul. Sekcija uz to ima svoj `--sec-pt` / `--sec-pb`, izmjeren iz dizajna i upisan po sekciji. Oba se zbrajaju. Provjera na 04-clinica-straumann: u dizajnu naslov stoji 71 px ispod kraja prethodne sekcije, a sekciji je upisano `spacing_top: 70`. Padding modula je tih 70 px pretvorio u 190. Isto na svih 8 sekcija ovog tipa: 168 px viska svaka, 1344 px ukupno. Razmak nosi sekcija, ne modul. Isto vrijedi i na telefonu (H-N2): tamo se 120 px modula zbrajalo s razmakom sekcije (55-93 px na telefonu), pa je naslov stajao 177-205 px ispod vrha sekcije i ispod zaglavlja je ostajala crna praznina od oko 190 px. Zato je padding modula skinut u samom pravilu (`sections.css`), za sve sirine, a ne samo ovdje za desktop. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 4. Visina medija u `media-text` OVDJE SE NE MOZE POPRAVITI Ostaje kao biljeska da se isti put ne prolazi dva puta. Druga po velicini stavka na sajtu je ovaj modul: 70 sekcija, oko 3000 px viska. Na 27 od njih fotografija je visoka tacno 418 px, a u dizajnu je od 255 do 481 (medijan 305) — samo tri sekcije od 68 stvarno imaju sliku oko 418. Probano i NIJE upalilo, dva puta: 1. `min-height` na `.media-text__media` — mjera se nije pomakla ni za piksel. Visinu ne drzi figura nego slika u njoj: `.media-text__img { height: var(--mt-h, 26.125rem) }`. 2. Oba pravila zajedno — opet nista. Razlog je da `--mt-h` uopste ne pada na zadanu vrijednost: izbrojano na sve 32 stranice, svih 70 elemenata `media-text__media` dobije `--mt-h` kao INLINE stil. Inline stil se iz CSS-a ne da nadjacati bez `!important`, a `!important` bi pogodio i onih 43 sekcije kojima je vrijednost tacna. Onih 418 px dolazi iz zadane vrijednosti u PHP-u: `template-parts/sections/media_text.php`, red 12 — `: 418`. To je mjera sa naslovnice, koja je medu svim sekcijama ovog tipa iznimka. Sekcija kojoj u bazi nema `img_height` dobije nju. Popravak je izvan mog popisa (sablon i sijac). Sta tacno treba i s kojim brojevima: zadana vrijednost u `media_text.php` treba biti medijan iz dizajna (305), a ne mjera s naslovnice (418); sekcijama kojima u bazi fali `img_height` treba zasijati stvarnu visinu iz `pdf-json`. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 5. VRPCA VIDEO SVJEDOCANSTAVA (`.vstrip` / `.vcard`) Sekcija `testimonials` s varijantom `video` je do sada posudivala mrezu tekstualnih recenzija (`.reviews--video`, tri stupca). Zato je: - na `dentista-in-croazia-turismo-dentale` sest kartica padalo u 3+3, svaka 343 x 247, u kontejneru od 1070 (dizajn: sest u JEDNOM redu, 201 x 357, u 1286); - na `impianti-sottoperiostei` cetiri kartice padale u 3+1, svaka 491 x 247 preko cijele sirine od 0 do 1512; - na `esperienze-e-testimonianze-dei-pazienti` kartica bila 314 x 559 umjesto 303 x 488 — sirina jer je razmak u mrezi bio 10 umjesto 21, a visina jer je ime stajalo ISPOD fotografije, a ne preko nje. Zato vrpca ima vlastitu klasu. `.reviews--video` ostaje na popisu klasa samo zbog slaganja u jedan stupac na telefonu (`sections.css`) i boje teksta (`.sec .reviews__item`); sva geometrija ide preko `.vstrip`. SPECIFICNOST. `layout-a.css` se ucitava POSLIJE ovog fajla i ima pravilo `.sec__inner--1286 > .reviews--video { … repeat(4, 1fr); gap: .625rem }` (0,2,0). Selektori ispod zato nose `.sec__inner > .reviews--video.vstrip` (0,3,0), inace bi pravilo iz `layout-a.css` pobijedilo. Ono je ovim nadjacano i moze se obrisati kad Tok 3 bude u tom fajlu. MJERE IZ DIZAJNA (okvir 1512, vodoravni presjek kroz red kartica): `05_Testimonianze.pdf`, y 681-1169 cetiri kartice 303 x 488 na x 113 / 437 / 761 / 1085, razmak 21. Zadnja zavrsava na 1388, kontejner na 1399 — 11 px viska DESNO, pa trake nisu jednake: 303/21/303/21/303/21/303/11 = 1286. `Landing_Pazienti italiani.pdf`, y 6551-6907,5 sest kartica na x 114 / 332,5 / 546 / 764,5 / 981,5 / 1200,5, sirine 200,5 / 200 / 206 / 204,5 / 202,5 / 200,5. Razmaci su rucno postavljeni (18 / 13,5 / 12,5 / 12,5 / 16,5) i ne daju se svesti na jedan broj; ravnomjerna mreza 6 x 201 + 5 x 16 = 1286 pogada svaku karticu unutar 2,5 px, sto je manje od nejednakosti u samom dizajnu. `01_Landing_No Bone Implant.pdf`, y 5551-5907: ista vrpca od sest, x 103-1390 (cijeli blok pomaknut 10 px ulijevo u odnosu na 113). `00_Homepage.pdf`, y 4561-4993: jedna kartica 314 x 432 u stupcu „VIDEO TESTIMONIANZE" (stupac je tacno 314 px sirok). OPREMA KARTICE JE U `cqw`, NE U PIKSELIMA. Natpis „Prica pacijenta" je 84,2 px sirok na kartici od 200,5 i 133 px na kartici od 303 — omjer 1,579 prema omjeru kartica 1,511. Oprema dakle raste zajedno s karticom, pa je izrazena u postotku sirine kartice (`container-type: inline-size` na kartici, `cqw` na djeci). `clamp()` je samo brana za telefon, gdje kartica ide preko cijele sirine ekrana. Izmjereno na kartici od 200,5 x 356,5 (`Landing_Pazienti italiani.pdf`, prva kartica, zumirani raster 6x): bedz krug 34,3 (17,1 %), gore 13,2 (6,6 %), lijevo 13,5 (6,7 %) dugme play krug 56,4 (28,1 %), po sredini kartice ime visina slova 11 -> 15,7 px (7,5 %), lijevo 16,5 (8,2 %) natpis visina slova 10,7 -> 11,8 px (5,9 %), 17,2 px ispod imena zelena #5aa86c (i bedz i natpis; uzorak iz sredine kruga) Na kartici od 303 x 488 (`05_Testimonianze.pdf`): ime 22,9 px (7,6 %), natpis 18,5 px (6,1 %) — isti postotak. -------------------------------------------------------------------------- */ .vcard { position: relative; padding: 0; background: none; border-radius: 0; container-type: inline-size; /* Kartica nema sadrzaja koji joj daje visinu: poster je `absolute`, a sve ostalo je oprema preko njega. Bez omjera se na telefonu slagala u red visine 0 i vrpca je nestajala — nadeno snimkom na 390 px. Omjer 9:16 je udio, ne mjera iz dizajna, pa smije stajati izvan brane; tacni omjeri po vrpci su nize, pod `@media (min-width: 1024px)`. */ aspect-ratio: 9 / 16; } .vcard__link { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 6cqw; background: var(--c-tile); color: inherit; text-decoration: none; } .vcard__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* Tamni pojas ispod fotografije. Mjeren je na kartici 4 iste vrpce, jer je jedina na kojoj se preklop da izracunati: pacijent nosi crven dzemper (#781e30), pa se iz crvenog kanala cita koliko ga je preklop povukao prema svojoj boji (#132735). Racunato odozdo prema gore: 1,00 na dnu, 0,88 na 11 %, 0,68 na 28 %, 0,28 na 39 %, 0,10 na 46 %, gasi se na 51 %. `z-index` na opremi nije ukras. `::after` je u stablu POSLIJE djece, pa se preljev iscrtavao PREKO imena i natpisa: ime je bilo isprano, a natpis „Prica pacijenta" jedva citljiv. Nasao se na prvom snimku vrpce. */ .vcard__link::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to top, rgba(19, 39, 53, 1) 0%, rgba(19, 39, 53, .88) 11%, rgba(19, 39, 53, .68) 28%, rgba(19, 39, 53, .28) 39%, rgba(19, 39, 53, .10) 46%, rgba(19, 39, 53, 0) 51% ); } .vcard__no, .vcard__play, .vcard__foot { z-index: 1; } .vcard__no { position: absolute; top: 6.6cqw; left: 6.7cqw; display: grid; place-items: center; width: 17.1cqw; height: 17.1cqw; border-radius: 50%; background: #5aa86c; color: var(--c-white); font-size: clamp(.75rem, 8.5cqw, 1.625rem); font-weight: 600; line-height: 1; } .vcard__play { position: absolute; top: 50%; left: 50%; width: 28.6cqw; height: 28.6cqw; transform: translate(-50%, -50%); } .vcard__play svg { display: block; width: 100%; height: 100%; } .vcard__play circle { fill: rgba(255, 255, 255, .22); stroke: var(--c-white); stroke-width: 2; } .vcard__play path { fill: var(--c-white); } /* M04 (Pragma, 30. 9. 2026): video kartica s linkom na hover vidljivo reaguje — fotografija posvijetli, krug dugmeta play postane puniji (V1 dicono_di_noi.css:124). Kartica bez linka (`div.vcard__link`) ostaje mirna. Fokus tipkovnicom isto. */ .vcard__poster { transition: filter .2s ease; } .vcard__play circle { transition: fill .2s ease; } @media (hover: hover) { a.vcard__link:hover .vcard__poster { filter: brightness(1.12); } a.vcard__link:hover .vcard__play circle { fill: rgba(255, 255, 255, .4); } } a.vcard__link:focus-visible .vcard__poster { filter: brightness(1.12); } a.vcard__link:focus-visible .vcard__play circle { fill: rgba(255, 255, 255, .4); } .vcard__foot { position: absolute; right: 7.6cqw; bottom: 11.4cqw; left: 7.6cqw; } .vcard__name { display: block; color: var(--c-white); font-size: clamp(.875rem, 7cqw, 1.5rem); font-weight: 700; line-height: 1.25; } .vcard__caption { display: block; margin-top: 4.7cqw; color: #5aa86c; font-size: clamp(.75rem, 5.6cqw, 1.1875rem); font-weight: 500; line-height: 1.25; } /* Vlastita boja preljeva (polje recenzije „Colore della sfumatura in basso"). Klasa i varijabla postoje samo kad je polje popunjeno; stupnjevi prozirnosti su isti kao u izmjerenom preljevu iznad, samo na drugoj boji. */ .vcard--sjena-c .vcard__link::after { background: linear-gradient( to top, var(--vc-sjena) 0%, color-mix(in srgb, var(--vc-sjena) 88%, transparent) 11%, color-mix(in srgb, var(--vc-sjena) 68%, transparent) 28%, color-mix(in srgb, var(--vc-sjena) 28%, transparent) 39%, color-mix(in srgb, var(--vc-sjena) 10%, transparent) 46%, transparent 51% ); } @media (min-width: 1024px) { /* Omjer kartice je izmjeren po vrpci, jer u dizajnu nije isti: sest u redu je 201 x 357 (9:16), cetiri u redu 303 x 488, a sama u stupcu 314 x 432. Kartice su isjecci istih snimaka u tri razlicita kadra. */ .vstrip .vcard { aspect-ratio: 9 / 16; } .vstrip--1 .vcard { aspect-ratio: 314 / 432; } .vstrip--4 .vcard { aspect-ratio: 303 / 488; } .vstrip--6 .vcard { aspect-ratio: 201 / 357; } .sec__inner > .reviews--video.vstrip { gap: 0; } /* Cetiri u redu: nejednake trake, jer je razmak 21 a viska desno 11. */ .sec__inner > .reviews--video.vstrip--4 { grid-template-columns: minmax(0, 303fr) minmax(0, 21fr) minmax(0, 303fr) minmax(0, 21fr) minmax(0, 303fr) minmax(0, 21fr) minmax(0, 303fr) minmax(0, 11fr); } .sec__inner > .reviews--video.vstrip--4 > .vcard:nth-child(1) { grid-column: 1; } .sec__inner > .reviews--video.vstrip--4 > .vcard:nth-child(2) { grid-column: 3; } .sec__inner > .reviews--video.vstrip--4 > .vcard:nth-child(3) { grid-column: 5; } .sec__inner > .reviews--video.vstrip--4 > .vcard:nth-child(4) { grid-column: 7; } /* Sest u redu: 6 x 201 + 5 x 16 = 1286, razmak je ovdje jednak. */ .sec__inner > .reviews--video.vstrip--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 1rem; } /* Dvije, tri i pet — dizajn ih nema, ali ih urednik moze napraviti brisanjem recenzije; neka red ostane red. */ .sec__inner > .reviews--video.vstrip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.3125rem; } .sec__inner > .reviews--video.vstrip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.3125rem; } .sec__inner > .reviews--video.vstrip--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 1rem; } /* Glava je UZA od vrpce, ne vrpca sira od glave. Na `dentista-in-croazia-turismo-dentale` naslov stoji od 221 do 1291 (1070), a vrpca od 113 do 1399 (1286). Prva verzija je sekciju drzala u kontejneru od 1070 i vrpcu vadila van negativnom marginom. Racunski je ispadalo tacno, ali je brana `zdravlje` to s pravom prijavila kao prelijevanje: element je stajao 108 px izvan roditelja na 1512 i na 1900 px. Sekcija je zato u kontejneru od 1286, a suzava se GLAVA — 1070 centrirano u 1286 pocinje tacno na 221. Nista ne izlazi iz roditelja i mjera je ista. */ .sec__inner--1286:has(> .vstrip--6) > .sec__title { max-width: 66.875rem; /* 1070 */ margin-inline: auto; } /* Glava s uvodom (naslov lijevo, uvod desno) NE centrira se na 1070. `Landing_Pazienti italiani.pdf`: naslov na x 221, uvod u stupcu od x 756 do 1298,5 — desni stupac prelazi 1291, gdje bi završila glava od 1070. Glava zato ide do ruba kontejnera (1399) i samo počinje 108 px uvučena (221 − 113); širinu uvoda nose polja sekcije (`head_w`, `head_lead_w`). */ .sec__inner--1286:has(> .vstrip--6) > .sec__head { padding-inline-start: 6.75rem; /* 108 */ } /* Kartice-slike (`vcard--slika`, vidi `testimonials.php`): cijela kartica je raster iz dizajna, pa visinu daje sama slika. Vrpca od šest ima stupce TAČNO kako ih dizajn crta (`Landing_Pazienti italiani.pdf`, y 6539,5–6906,5): kartice 200,5 / 200 / 206 / 204,5 / 202,5 / 200,5, razmaci 18 / 13,5 / 12,5 / 12,5 / 16,5. Istaknute kartice 03 i 05 su šire i podignute; svaka slika je izrezana iz istog pojasa visine 367, pa svaka kartica zadrži svoj vertikalni položaj iz dizajna. VRPCA JE ŠIRA OD KONTEJNERA. Zbir kartica i razmaka je 1287,5, a kontejner 1286 — i to je dizajn, ne zaokruživanje: izmjereno ivicom obruba kartica, Pazienti 114–1401,5, No Bone 103–1390,5 (REC-K4-01). Do krug 4 vrpca je bila `fr`-mreža od 1 + 1287,5 = 1288,5 udjela stisnuta u 1286, pa je svaka kartica bila ~0,4 px uža i zadnja je završavala 2,5 px lijevo od dizajna (Pazienti 1399, No Bone 1388). Zato je širina vrpce omjer 1287,5 / 1286 širine kontejnera (na 1512 tačno 1287,5, na užem ekranu srazmjerno), a mjesto vrpce — koje na dvije stranice NIJE isto (114 i 103) — nosi polje sekcije `cards_shift` (+1 odnosno −10), a ne prazan prvi stupac u CSS-u. */ .sec__inner > .reviews--video.vstrip--6.vstrip--slike { width: calc(100% * 1287.5 / 1286); grid-template-columns: minmax(0, 200.5fr) minmax(0, 18fr) minmax(0, 200fr) minmax(0, 13.5fr) minmax(0, 206fr) minmax(0, 12.5fr) minmax(0, 204.5fr) minmax(0, 12.5fr) minmax(0, 202.5fr) minmax(0, 16.5fr) minmax(0, 200.5fr); column-gap: 0; align-items: start; } .sec__inner > .reviews--video.vstrip--6.vstrip--slike > .vcard:nth-child(1) { grid-column: 1; } .sec__inner > .reviews--video.vstrip--6.vstrip--slike > .vcard:nth-child(2) { grid-column: 3; } .sec__inner > .reviews--video.vstrip--6.vstrip--slike > .vcard:nth-child(3) { grid-column: 5; } .sec__inner > .reviews--video.vstrip--6.vstrip--slike > .vcard:nth-child(4) { grid-column: 7; } .sec__inner > .reviews--video.vstrip--6.vstrip--slike > .vcard:nth-child(5) { grid-column: 9; } .sec__inner > .reviews--video.vstrip--6.vstrip--slike > .vcard:nth-child(6) { grid-column: 11; } /* Četiri kartice-slike (`05_Testimonianze.pdf`): 304 široke na x 113 / 437 / 761 / 1085, razmak 20 — 4 × 304 + 3 × 20 + 10 = 1286. */ .sec__inner > .reviews--video.vstrip--4.vstrip--slike { grid-template-columns: minmax(0, 304fr) minmax(0, 20fr) minmax(0, 304fr) minmax(0, 20fr) minmax(0, 304fr) minmax(0, 20fr) minmax(0, 304fr) minmax(0, 10fr); } } /* Tablet (768–1023): dizajna nema. Opće pravilo za uske ekrane (`sections.css`, `.reviews--video { 1fr }`) je vrpcu slagalo u jedan stupac sve do 1023 px, pa je na 768 svaka kartica bila široka 696 px, a poster od 401 px uvećan 1,7× — mutan, i šest kartica visokih ~7700 px (NB-K01). Na tabletu vrpca ostaje mreža: šest (i tri, pet) po tri u red, četiri (i dvije) po dvije. Kartica je tada 216 odnosno 337 px, dakle ispod prirodne širine postera (401 kod vrpce od šest, 608 kod vrpce od četiri), pa se slika ne uvećava. Omjer kartice je isti kao na desktopu. Od 600 do 767 px (veliki telefon položen, mali tablet) je jedna kartica u redu i dalje bila 528–695 px široka, poster od 401 px uvećan do 1,7× i vrpca od šest visoka 7665 px (PR6-N04). Tu je vrpca u dva reda po dvije kartice (256–337 px, ispod prirodne širine svakog postera). Ispod 600 px i Mobile HP (430) ostaje jedna kartica u redu. */ @media (min-width: 600px) and (max-width: 1023px) { .vstrip--4 .vcard { aspect-ratio: 303 / 488; } .vstrip--6 .vcard { aspect-ratio: 201 / 357; } .sec__inner > .reviews--video.vstrip { align-items: start; } .sec__inner > .reviews--video.vstrip--2, .sec__inner > .reviews--video.vstrip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.3125rem; } } @media (min-width: 600px) and (max-width: 767px) { .sec__inner > .reviews--video.vstrip--3, .sec__inner > .reviews--video.vstrip--5, .sec__inner > .reviews--video.vstrip--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; } } @media (min-width: 768px) and (max-width: 1023px) { .sec__inner > .reviews--video.vstrip--3, .sec__inner > .reviews--video.vstrip--5, .sec__inner > .reviews--video.vstrip--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1rem; } /* Jedna video kartica u stupcu recenzija naslovne (`reviews--stack vstrip--1`, „VIDEO TESTIMONIANZE"). Stupci recenzija se ispod 1024 px slažu jedan ispod drugog, pa je kartica bila široka koliko cijeli sadržaj: 951 × 1311 na 1023 px, poster od 628 px uvećan 1,51× i mutan (PR6-N01). Kartica je sada široka kao kartica vrpce od četiri na tabletu (pola sadržaja bez razmaka 21: 337 px na 768, 465 na 1023), dakle ispod prirodne širine postera. Stoji lijevo, ispod natpisa stupca, kao i na desktopu. Mobile HP (≤ 767) i desktop se ne diraju. */ .reviews--stack.vstrip--1 { max-width: calc((100% - 1.3125rem) / 2); } } /* Kartica-slika: tema preko nje ne crta ništa (bez preljeva, uglova i podloge) — sve to je već u slici iz dizajna. */ .vstrip .vcard.vcard--slika { aspect-ratio: auto; container-type: normal; } .vcard--slika .vcard__link { height: auto; overflow: visible; border-radius: 0; background: none; } .vcard--slika .vcard__link::after { content: none; } .vcard--slika .vcard__poster { position: static; width: 100%; height: auto; object-fit: fill; } /* Neobavezan sloj preko kartice-slike (broj, ime, natpis, dugme — polja reda „Schede video"): oprema je u `cqw`, pa kartica sa slojem opet postaje kontejner. Preljev odozdo samo uz „Sfumatura scura in basso". */ .vstrip .vcard.vcard--slika.vcard--sloj { container-type: inline-size; } .vcard--slika.vcard--sjena .vcard__link::after { content: ""; } /* -------------------------------------------------------------------------- 6. Sta je jos izmjereno, pa ODBACENO — i zasto Sve ispod je probano brojkama i nije uslo u fajl. Stoji da se isti put ne prolazi dva puta, jer svaka od ovih stavki obara broj visine a udaljava od dizajna. a) Razmak naslov -> sadrzaj po tipu sekcije. Tema ga ima ravnih 32 px svuda (`margin-top: 2rem` na modulu), a dizajn ga ima od 5 do 101 px. Izgleda kao gotovo pravilo: faq ima u dizajnu 7 px na 20 od 22 sekcije, dakle 25 px viska puta 22 = 550 px. Ne valja. Same faq sekcije su na sajtu vec 388 px KRACE nego u dizajnu (n=22). Skidanje jos 25 px po sekciji odnijelo bi ih na -43 px svaka. Isto i `text-band`: -1107 px, dakle prekratke. Razlog zasto mjera vara: `glava_do_tijela` na sajtu mjeri od dna OKVIRA naslova, a u PDF-u se mjeri od dna BLOKA. Blok od 40 px fonta u PDF-u je visok oko 56 px, a isti naslov s `line-height: 1.1` je 44 px. Tih 12 px razlike sjedi u svakoj usporedbi. Kod brojke koraka (80 px font) razlika je preko 30 px. Prije nego se ijedan razmak ovog oblika popravi, treba mjeriti od PISMOVNE LINIJE, ne od okvira. DOKLE OVO UPOZORENJE SEZE, a dokle ne. Vrijedi samo za alate koji na strani sajta uzimaju KUTIJU ELEMENTA (`getBoundingClientRect()`): `glava_do_tijela`, i `pdf_h` naspram kutije sekcije u `razmaci_mjera.js`. NE vrijedi za alate koji mjere `Range`: `compare.js`, `razmaci_spoj.py` i `razmaci_podnozje.js` su cisti. Izmjereno, kontrolnim uzorkom na zivoj stranici — isti tekst, ista velicina, tri razlicita `line-height`: font-size line-height Range h kutija asc+desc PDF 1,4em 16px 16px 23 16 23 22,4 16px 24px 23 24 23 22,4 16px 40px 23 40 23 22,4 35px 42px 49 42 49 49,0 8px 14px 11 14 11 11,2 Visina iz `Range` se NE mijenja s `line-height` — uvijek je `ascent+descent`, dakle isti okvir koji PDF zove blokom. Razlika 23 naspram 22,4 je samo Chromeovo zaokruzivanje ascenta na cijeli piksel. Zasto ovo stoji zapisano: nezavisna kontrola je po ovom upozorenju proglasila artefaktom 198 od 224 uzroka na `media-text`, 116 od 136 na `columns` i 60 od 94 na `faq` — i zamalo ih odbacila. Provjera je pokazala da mehanizma nema: prored na sajtu je 21,98 naspram 22,00 iz dizajna, visina bloka od pet redaka 107,94 naspram 107,5, a sav `text-band -> faq` nula na osam od devet stranica. Kontrola je to potvrdila i sa svoje strane, testom monotonije nad 2401 parom blokova: da mehanizam postoji, skok bi pratio razliku velicine pisma pravom linijom — pri -16 px je nula a pri -12 px je -6,1, dakle ne prati. Pouka nije „upozorenje ne vrijedi" nego da tacna cinjenica primijenjena na pogresan alat kosta jednako kao netacna. Uz svaki nalaz ovog oblika mora stajati CIME je mjeren. b) Razmak izmedu redova teksta u trust kartici. Dizajn ima 17 px (n=72, iz blokova unutar pravougaonika kartice), tema ima 12 px (`.trust__body { gap: .75rem }`). Sajt je UZI, ne siri — popravak bi dodao visinu. c) Uspravni razmak `.steps__item` (`padding-top: 6.25rem`, 100 px). Dizajn daje 175 px od vrha bloka brojke do vrha bloka naslova, ali je brojka Poppins Thin 80 px kojoj je blok u PDF-u visok 112 px, a na sajtu 80 (`line-height: 1`). Razlika okvira je veca od razmaka koji se mjeri, pa broj ne znaci nista dok se ne mjeri od linije. d) Razmak red -> red u mreznim sekcijama. Trazen kroz pravougaonike u sva 32 PDF-a: nadjen na tacno JEDNOJ sekciji (`question-cards`, 13 px). Mreze u ovom dizajnu su gotovo sve jednoredne, pa tu nema sta da se popravlja. Sta OSTAJE, s brojkama (mjereno `razmaci_mjera.js`, poslije grupe 1): media-text 3030 px / 70 sekcija — visina slike, vidi tacku 4 trust 2891 px / 32 — tekst se prelama u vise redaka nego u dizajnu; kartica je 334 px umjesto 191 (v1) / 278 (v2), a uvlake i razmaci u njoj su sada tacni. Tipografija. solution-cards 1858 px / 10 — kartica 504 px, sadrzaj columns 1462 px / 34 steps 1370 px / 17 — vidi (c) hero-card 1278 px / 14 Nijedna od njih nije razmak. Sve su visina sadrzaja, a ta se ne popravlja u ovom fajlu. Manjak u SAVOVIMA izmedu sekcija (medijan -34 px na 286 savova, zbir -10464 px) popravlja se na `spacing_top` / `spacing_bottom` u sijacu: `--sec-pt` je inline stil po sekciji, pa ga CSS bez `!important` ne moze ni dohvatiti. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 7. UVLAKE U KARTICI FORME — obrub polja nije bio odbijen Sve mjere kartice forme (1286x348 na x 113, pet okvira polja, pilula dugmeta) poklapaju se s dizajnom u piksel. Natpisi UNUTAR polja nisu: svaki je bio 1 px predaleko udesno. Uzrok je jedan i isti na svih pet polja. `form.css` postavlja uvlaku na razliku iz PDF-a izmedu okvira polja i pocetka natpisa (npr. Nome: 256,0 - 230,5 = 25,5), a polje uz to ima `border: 1px`. Tekst u polju pocinje na `x + obrub + uvlaka`, dakle 1 px desnije nego u dizajnu. Uvlaka mora biti razlika MINUS obrub. Zasto se to nije vidjelo do sada: natpisi polja su `placeholder`, a `Range.getClientRects()` — na kojem stoje i `compare.js` i `tekst.js` — ne vidi tekst unutar ``. Ni jedan ni drugi alat nikad nije izmjerio nijedan od ovih pet natpisa. Brojke su izmjerene pikselima (`deploy/qa/tools/testform.js`, snimak na 3x, razlika triju snimaka: sajt, sajt bez natpisa, referenca iz PDF-a iscrtana istim fontom u istom pregledniku). Prije popravka: natpis dizajn sajt razlika Nome 143,0 144,0 +1,00 Cognome 469,0 470,0 +1,00 Messaggio 792,6 793,6 +1,00 E-mail 146,0 147,0 +1,00 Telefono 474,0 474,7 +0,67 Messaggio y 146,6 147,6 +1,00 (uvlaka odozgo, isti obrub) Invia y 277,6 276,6 -1,00 (natpis u dugmetu previsoko) privola y 287,2 288,2 +1,00 Telefono ima u dizajnu vecu uvlaku od ostalih (30,5 umjesto 25,5); tema je imala 30,1, dakle i 0,4 px vlastite greske povrh obruba. Mjere su s okvira od 1512 px, pa idu pod branu iz zaglavlja ovog fajla. Na telefonu `form.css` slaze polja jedno ispod drugog i nijedna od ovih brojki ne vrijedi. -------------------------------------------------------------------------- */ @media (min-width: 1024px) { /* 25,5 iz dizajna - 1 px obruba */ .smile-form input[type="text"], .smile-form input[type="email"], .smile-form input[type="tel"] { padding-left: 1.53125rem; } /* 24,5 */ /* 30,5 iz dizajna - 1 px obruba */ .smile-form .smile-form__field--telefono input[type="tel"] { padding-left: 1.84375rem; } /* 29,5 */ /* Pragma, 30. 9. 2026 (M13): „Messaggio" od 14 px stoji na uvlaci ostalih polja — 24,5 lijevo (25,5 - 1 px obruba, kao Nome i E-mail) i 14 odozgo. Bilo je 17 / 17,1 (18,1 / 18,0 iz dizajna, za natpis od 9 px). */ .smile-form textarea { padding-top: .875rem; padding-left: 1.53125rem; } /* 14 / 24,5 */ /* Natpis u dugmetu (GG-06, krug 5): BEZ uspravne uvlake, centriran u pilulu, kako ga crta PDF. Na tri PDF-a (00_Homepage, Chirurgia gengivale, 01_Clinica) je osnovna linija „Invia" tačno 23,96 px ispod vrha pilule (6837,45 -> 6861,41; 3391,14 -> 3415,10; 7221,95 -> 7245,91), a centriran natpis u pilulu od 36,9 daje 24,0. Ovdje je bila uvlaka odozgo od 2 px (natpis 1 px niže), po mjeri okvira teksta („Invia y 277,6 / 276,6" gore) — ali okvir teksta iz PDF-a i okvir retka u pregledniku nisu ista mjera. Po osnovnoj liniji je natpis s njom bio 25 ispod vrha pilule, 1 px prenizak; ostatak od „2 px" iz nalaza je sama pilula, koja na Chirurgia gengivale stoji 0,9 px niže nego u PDF-u (raspored forme, ne natpis). */ /* Prva privola: natpis je bio 1 px nizi od dizajna (5,1 -> 4,1). */ .smile-form__consent:nth-of-type(1) .wpcf7-list-item-label { margin-top: 0.25625rem; } } /* Drugi red privole. U dizajnu su kucice 18 px razmaknute (282,1 i 300,1), a natpisi 14 (287,2 i 301,2), pa svaki natpis ima svoju uvlaku odozgo. Obje su bile 1 px prevelike; ovo je druga (1,1 -> 0,1). */ @media (min-width: 1024px) { .smile-form__consent:nth-of-type(2) .wpcf7-list-item-label { margin-top: 0.00625rem; } } /* -------------------------------------------------------------------------- 8. STANJE GRESKE U FORMI — poruke su padale preko drugog sadrzaja Dizajn nema nacrtano stanje greske; kartica je u PDF-u uvijek prazna i uredna. Zato se ono sto CF7 dopise poslije neuspjelog slanja nikad nije ni pogledalo. Kad se forma stvarno posalje s praznim obaveznim poljima, izlaze dvije stvari (snimak `deploy/qa/tools/testform.js`, korak „tok"): a) „Campo obbligatorio." ispod polja Nome i Cognome pada na y 181,6 i visok je 20,4 px, a drugi red polja pocinje na 193,6. Razmak izmedu redova je 14 px, pa je donja trecina poruke zavrsavala ISPOD polja E-mail i Telefono — poruka se citala do pola. b) Traka s opcom porukom („Uno o piu campi contengono un errore") stajala je na y 293,4 do 323, a privole su na 287,2 do 315,2. Traka je imala neprozirnu podlogu i prekrivala je obje privole. Popravak drzi poruku u praznini koja vec postoji, umjesto da pomjera ijedno polje: poruka polja se smanjuje na 10/12 px i stane u 14 px razmaka izmedu redova, a traka silazi pod privole, u pojas 324-346 koji je u dizajnu prazan. Nijedna mjera iz PDF-a se ne mijenja — kartica u mirnom stanju ostaje ista do piksela. Preklapanje sada cuva brana: `testform.js` poslije neuspjelog slanja mjeri okvire poruka i pada ako ijedna presijece polje ili privolu. -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .smile-form .wpcf7-not-valid-tip { margin-top: 1px; font-size: 0.625rem; /* 10 */ line-height: 0.625rem; /* 10; poruka zavrsava 2 px iznad drugog reda */ } /* `form` u biracu NIJE ukras. Vlastiti stil dodatka (`.wpcf7 form .wpcf7-response-output`, tri klase i oznaka) jaci je od `.smile-form .wpcf7-response-output` iz `form.css` (dvije klase), pa su `margin: 0`, `padding` i `border: 0` iz teme sve vrijeme gubili. Zato traka ima i tudu marginu od 1em odozdo i obrub od 2 px, a `bottom` iz teme joj mjeri pogresan rub. S `form` u biracu specificnost je izjednacena, a tema se ucitava POSLIJE dodatka, pa prolazi. */ .smile-form form .wpcf7-response-output { margin: 0; padding: 0.125rem 0.75rem; /* 2 / 12 */ border-width: 0; bottom: 0.125rem; /* 2; traka staje u pojas ispod privola */ } } /* -------------------------------------------------------------------------- 9. OMOTAC PRIVOLE — 44rem je bio broj bez pokrica `form.css` daje `.smile-form__consent` sirinu `44rem` (704 px). Taj broj nije iz dizajna: natpis prve privole je 317,3 px, drugi 423,7. Kutija je nevidljiva, pa se visak nije vidio okom — ali se vidio u mjerenju. Nezavisna kontrola (K4) je na 27 stranica nasla dvije konstante u sekciji forme: `dx` −23 px na 33 od 39 pojava i `dw` +280 px na 35 od 36. Oba broja izlaze odavde, i oba su izracunljiva: `compare.js` uparuje blokove po TEKSTU, a PDF obje privole spaja u jedan blok od dva retka (x 254, desni rub 678,1, sirina 424,1). Jedini element na sajtu koji nosi oba teksta je `.smile-form__consents`, pa se mjeri njegov raspon: od LIJEVOG RUBA KUCICE (231) do desnog ruba kutije od 704 px (935). 231 − 254 = −23 kucica i razmak do natpisa 704 − 424,1 = +279,9 visak sirine kutije Sam tekst je na svom mjestu do piksela — izmjereno tintom, oba retka na nuli (`testform.js`, korak „mjere"). Popravlja se dakle kutija, ne raspored. `max-content` je stegne na sadrzaj, pa desni rub pada tacno na 678,1 kao u dizajnu; `max-width: 44rem` cuva staro ponasanje za slucaj da prijevod bude duzi od talijanskog izvornika — tada se, kao i do sada, prelomi. Vidljivo se ne mijenja nista: kucica i natpis su na istim koordinatama, a `

`, ne `

` je vec `position: absolute` i stoji tacno na visini kucice iz dizajna (282,1 i 300,1), pa je `top: 0` dovoljno i za prvi i za drugi red. Da je sidro `