/* ========================================================================== Raspored — tok layout-b. Zaseban fajl da paralelni tokovi ne gaze jedan drugog u `sections.css`. Ucitava se POSLIJE `sections.css`, `razmaci.css` i `tipografija.css`, pa ono sto je ovdje nadjacava. Ovdje ide samo RASPORED sekcija koje ovaj tok drzi: broj kolona, strana na kojoj je slika, poravnanje, redoslijed elemenata, sirina bloka. Razmaci idu u `razmaci.css`, pismo i boje u `tipografija.css`. Svaka mjera ispod ima uz sebe blok iz `deploy/qa/pdf-json/.json` na kojem je izmjerena. `x` i `right` su ink-okviri teksta u okviru 1512 px; `width` bloka je NAJSIRI redak u njemu, pa blok od vise redaka kaze koliko je stupac sirok s tacnoscu od par piksela. ZASTO JE SVE POD `@media (min-width: 1024px)` Geometrija je izvucena iz PDF-a na okviru 1512: fiksne sirine stupaca, fiksne bocne uvlake, fiksni razmaci. Ta pravila se ucitavaju kao i svako drugo, pa bi bez brane gazila mobilni blok iz `sections.css` (koji je `max-width: 1023px`) i vracala npr. stupac od 622 px u okvir od 390 — vodoravni skrol na telefonu. `deploy/MOBILE_RULES.md`: fiksne sirine iz dizajna se ispod 1024 puste, sve ide na 100 %. Izvan brane stoji samo ono sto nema sirinu u pikselima i vrijedi na svim ekranima: znak `+`/`-` u FAQ-u i puna sirina odgovora. ========================================================================== */ /* ---------- pitanja i odgovori (vrijedi na svim sirinama) ---------- 1. Kopca je u dizajnu ZNAK, ne strelica. U PDF-u stoji kao tekst Poppins-Regular 24 px: `+` (ink 16,4 px) na sklopljenoj stavci i `-` (ink 13,2) na otvorenoj. Svih 22 pojava, na x 1274, desni rub ink-a 1290,4 — a kontejner FAQ-a zavrsava na 1291. Dakle kopca je pribijena uz desni rub, bez uvlake. Tema je crtala kvadratic s dva poteza zarotiran za 45 stupnjeva, uvucen 8 px. Okomito se poklapa s prvim retkom pitanja: u PDF-u je y kopce jednak y pitanja (npr. 4261,8 = 4261,8), pa `top` mora biti jednak gornjoj uvlaci samog pitanja (1,25rem). 2. Odgovor ide punom sirinom kontejnera. U PDF-u pocinje na x 221 i ide do 1290,9 (Estrazione sek#7) — to je punih 1070. Tema mu je davala 3rem desne uvlake, pa je bio 1022 i lomio se 48 px ranije. Ni jedno ni drugo nema sirinu u pikselima, pa vrijedi i na telefonu — `MOBILE_RULES.md` za `faq` trazi punu sirinu i `
` kakav jest. */ /* Znak prati gornji razmak pitanja (--faq-pt). Okomiti pomak (--faq-znak) je nekad dolazio iz polja `znak` stavke (PDF: Straumann 14,2 px niže, Odontoiatria digitale 15,2 …); od M12 (Pragma, 30. 9. 2026) je 0 svuda, znak je u ravni pitanja (odjeljak „jednak razmak" niže). */ .faq__q::after { content: "+"; right: 0; top: calc(var(--faq-pt, 1.25rem) + var(--faq-znak, 0rem)); height: auto; margin-top: 0; border: 0; transform: none; font-size: 1.5rem; /* 24 */ /* Polja „Colore/Peso del segno + / −" (faq.php). Prazno: boja pitanja (currentColor = naslijeđena boja) i 400, kao u dizajnu. */ font-weight: var(--faq-segno-fw, 400); color: var(--faq-segno-c, currentColor); line-height: 1.25; /* Znak je u PDF-u TEKST s početkom na x 1274 — i „+" i „-" počinju na istom mjestu. Dok je okvir znaka bio širok koliko sam znak i pribijen desno, „-" (širina 13,2 px) je stajao 3,2 px desnije od „+" (16,4 px): sajt 1279–1288, dizajn 1275–1284 (FT-N5). Okvir je zato uvijek širok kao „+" (16,39 / 24 = 0,683 em), a znak u njemu poravnat lijevo. */ width: .683em; text-align: left; } .faq__item[open] .faq__q::after { content: "-"; margin-top: 0; transform: none; } .faq__a { padding-right: 0; } /* ---------- razmak od naslova sekcije do prvog pitanja: 62,8 px, ne 101 Jedina vrijednost u cijeloj mjeri koja se ponavlja bez ijednog izuzetka: korak od vrha teksta naslova do vrha teksta prvog pitanja je u dizajnu 62,8 px na 21 od 22 FAQ sekcije, a na sajtu 101 — tacno +38,2 svuda. Dvadeset druga (`02-clinica-odontoiatria-digitale`) ima u dizajnu 107,8, dakle svoj razmak, i ostaje kakva jest. PROVJERENO DA NIJE ARTEFAKT MJERENJA. `razmaci.css` (odjeljak 6a) upozorava da se razmak naslova ne smije popravljati dok se mjeri od OKVIRA, jer je blok naslova od 40 px u PDF-u visok oko 56 a na sajtu 44. Ovdje se mjeri od vrha TEKSTA na obje strane, i naslov je provjeren odvojeno: njegov pomak u odnosu na blok IZNAD njega ima medijan -3,5 px kroz 22 stranice, dakle naslov stoji gdje treba. Visak je iskljucivo u razmaku ISPOD njega. Racun (mjereno na zivoj stranici, /riabilitazione-dentale/): od vrha teksta naslova do dna njegovog okvira 51,0 spojena margina naslov -> .faq 32,0 gornja uvlaka pitanja 20,0 vrh teksta pitanja iznad vrha njegovog okvira -2,0 ------ 101,0 dizajn 62,8 Margine susjeda se SPAJAJU, pa se ne moze samo skinuti 38,2 s jedne: dok naslov nosi 20 px dolje, spojena margina je max(20, x). Zato se naslovu u FAQ sekciji margina gasi, a razmak se cijeli iskazuje na `.faq`: 0 + (-6,2) = -6,2, pa korak izlazi 69 - 6,2 = 62,8. Negativna margina ovdje nije trik nego posljedica toga sto je okvir naslova na sajtu visi nego blok u dizajnu. Kad se jednom ujednaci visina retka naslova (tipografija, tudji fajl), ovaj broj treba ponovo izmjeriti — tada vise nece trebati biti negativan. */ .sec--faq .sec__inner > .sec__title { margin-bottom: 0; } .sec--faq .sec__title + .faq { margin-top: -0.3875rem; } /* -6,2 */ /* Skriveni naslov (polje `title_sr`, OD-01) nije u toku stranice, pa lista nema čiji okvir da poravnava: bez negativne margine. Razmak koji je naslov zauzimao (45 - 6,2 = 38,8) nosi `spacing_top` sekcije. */ .sec--faq .sec__title.screen-reader-text + .faq { margin-top: 0; } /* ---------- otvorena stavka: odgovor pocinje 45 px ispod pitanja, ne 52 Druga polovina istog nalaza. Korak od vrha teksta pitanja do vrha teksta njegovog odgovora je u dizajnu 45 px, a na sajtu 52 — tacno +7,0 px, na SVIH 22 stranice s FAQ-om, bez ijednog izuzetka. Isti broj koji se u zbirnoj mjeri vidi kao razred „dy +7". Korak medu SKLOPLJENIM stavkama je tacan (dizajn 71,5, sajt 71,0), i on dolazi iz simetricne uvlake pitanja 20 + 20. Zato se ne dira sama `.faq__q` nego samo ona u OTVORENOJ stavci: 20 - 7 = 13 px odozdo. Sklopljene stavke tako zadrzavaju svoj korak od 71, a otvorena dobija razmak iz dizajna. Mjeri se od vrha TEKSTA na obje strane, kao i razmak iznad; okvir bi ovdje lagao jer pitanje ima 24 px pisma a odgovor 14. */ .faq__item[open] .faq__q { padding-bottom: 0.8125rem; } /* 13 = 20 - 7 */ /* ---------- Pragma, 30. 9. 2026 (M12): jednak razmak iznad i ispod linije „ALL FAQs — Please add more space between the text and the divider line. Keep the spacing consistent, with the same distance above and below." Do sada je svaka stavka nosila razmake prepisane iz svog PDF-a (polja `pt` / `pb` / `znak`, 13–26 px; sada uklonjena), a odgovor je imao donju uvlaku 0,5 px uz najmanju visinu 56,5 (telefon 10,5): linija je stajala 3–6 px ispod zadnjeg reda odgovora, a sljedeće pitanje 19–22 px ispod linije. (Ranija izvođenja tih brojeva — 11,5 / 0,5 / 56,5 iz „treće polovine nalaza" i „okvira stalne visine" — su u git historiji ovog fajla.) Sada jedna mjera za sve FAQ-ove, desktop i telefon, otvorene i zatvorene stavke: pitanje 17 odozgo, 15 odozdo (otvoreno pitanje 13 odozdo, odjeljak iznad) odgovor 15 odozdo, bez najmanje visine Od osnovne linije zadnjeg reda (odgovora ili sklopljenog pitanja) do linije je tako ~21 px, od linije do vrha slova sljedećeg pitanja ~21 px — omjer iz PDF-a No Bone (21 / 22). Slova sa silaznim potezom (p, g, q) su prirodno 3–6 px bliža liniji. Prvo pitanje zadržava 20 odozgo, da mu razmak od naslova sekcije (62,8, odjeljak iznad) ostane isti. Znak + / − je u ravni pitanja, bez pomaka. */ .faq { --faq-pt: 1.0625rem; --faq-pb: .9375rem; --faq-znak: 0rem; } /* 17 / 15 / 0 */ .faq > .faq__item:first-child { --faq-pt: 1.25rem; } /* 20 */ .faq__a { padding-bottom: .9375rem; min-height: 0; } /* 15 */ /* ---------- tekst na tamnoj kartici „preko medija" je bijel (sve sirine) `sections.css` to pravilo ima (red 487), ali je mrtvo: napisano je kao `.sec--light :where(.media-text__body--over) .sec__text`, dakle 0-2-0, a `tipografija.css` red 86 je poslije njega dobio `.sec--light .sec__text { color: #000 }`, iste tezine i NIZE u redoslijedu ucitavanja (sections -> razmaci -> tipografija -> layout-a -> layout-b). Od tada kartica nosi crn tekst. Dok je kartica bila prekratka pa je tekst ispadao na bijelu podlogu, to se nije vidjelo — bilo je crno na bijelom, dakle citljivo, samo na krivom mjestu. Cim je ploha dobila svoju visinu, ispalo je crno na crnom. Ista tezina, ali iz fajla koji se ucitava POSLIJE tipografije, pa pobjedi po redoslijedu. Oznaka boje iz sadrzaja (`c-accent.c-accent`, 0-4-0) ostaje jaca — naslov kartice je u dizajnu plav i takav i ostaje. Nije pod brankom sirine jer boja ne ovisi o sirini ekrana: ploha je tamna i na telefonu. */ .sec--light :where(.media-text__body--over) .sec__text, .sec--light :where(.media-text__body--over) .sec__lead { color: var(--c-white); } /* ========================================================================== Geometrija iz PDF-a. Vrijedi samo od 1024 px navise, gdje tokeni i skaliraju rem s `calc(100vw / 1512 * 16)`. ========================================================================== */ @media (min-width: 1024px) { /* ---------- dvokolonski tekst: razmak izmedu stupaca je 10 px, ne 60 ---------- Mjereno na 9 pojava u 8 PDF-ova. Kontejner je 1286 i pocinje na x 113: lijevi stupac ima najduzi redak koji zavrsava na 750,8 (Apicektomija sek#2), a desni stupac svuda pocinje na x 761. Dakle 113 + 638 + 10 = 761 — stupac je 638, razmak 10. Tema je imala razmak 60, pa su stupci bili 613 (25 px preuski svaki) i desni je pocinjao na 786 umjesto na 761. Isto vrijedi i za kontejner 1070 (x 221): desni stupac je na 756..761, sto je 221 + 530 + 10. Zato se pise samo razmak, a stupci ostaju 1fr. Okomiti razmak ostaje kakav je bio — on nije moj. */ .two-col { column-gap: 0.625rem; } /* 10 */ /* Stupci nisu uvijek jednaki. Mjereno po x-u na kojem pocinje DESNI stupac, unutar kontejnera 1070 koji pocinje na 221 i uz razmak od 10: Ponti dentali sek#3 desni stupac na 653,5 -> lijevi 422 Laboratorio sek#5 desni stupac na 761 -> lijevi 530 Tema je dijelila na pola, pa je na Ponti dentali desni stupac pocinjao 108 px predaleko desno — deset blokova teksta. Mjera dolazi iz polja po sekciji; bez nje ostaje podjela na pola. */ .two-col--mjera { grid-template-columns: var(--tc-c1) 1fr; } /* Razmak i širine stupaca po sekciji (polja `cols_gap`, `col2_width`, `cols_w`). Desni stupac je na 756 na Digital Smile Design i Straumannu (razmak 0), a na Innestu i Clinici tekst desnog stupca ide do x 1405, preko ruba kontejnera — sa 638 px se redak lomio ranije. Laboratorio sek#6 ima stupce 108..756..1404, dakle 1296 px centrirano, šire od kontejnera 1286. */ .two-col--gap { column-gap: var(--tc-gap); } .two-col--c2 { grid-template-columns: minmax(0, 1fr) var(--tc-c2); } .two-col--mjera.two-col--c2 { grid-template-columns: var(--tc-c1) var(--tc-c2); } .two-col--w { width: var(--tc-w); margin-inline: calc((100% - var(--tc-w)) / 2); } .two-col--c2-top > .two-col__item:nth-child(2) { padding-top: var(--tc-c2-top); } /* Razmak iznad podnaslova po bloku (polje `blocks_gaps`): Ponti sek#3 druga linija 11 px ispod teksta, a prva 24; Laboratorio sek#5 32 / 29 / 28 px od osnovne linije do podnaslova. Mjere su s desktop PDF-a. */ .two-col.two-col--h2 .two-col__text h4:nth-of-type(2) { margin-top: var(--tc-h2-mt); } .two-col.two-col--h2p .two-col__text h4:nth-of-type(2) { padding-top: var(--tc-h2-pt); } .two-col.two-col--h3 .two-col__text h4:nth-of-type(3) { margin-top: var(--tc-h3-mt); } .two-col.two-col--h3p .two-col__text h4:nth-of-type(3) { padding-top: var(--tc-h3-pt); } .two-col.two-col--h4 .two-col__text h4:nth-of-type(4) { margin-top: var(--tc-h4-mt); } .two-col.two-col--h4p .two-col__text h4:nth-of-type(4) { padding-top: var(--tc-h4-pt); } .two-col.two-col--h5 .two-col__text h4:nth-of-type(5) { margin-top: var(--tc-h5-mt); } .two-col.two-col--h5p .two-col__text h4:nth-of-type(5) { padding-top: var(--tc-h5-pt); } .two-col.two-col--h6 .two-col__text h4:nth-of-type(6) { margin-top: var(--tc-h6-mt); } .two-col.two-col--h6p .two-col__text h4:nth-of-type(6) { padding-top: var(--tc-h6-pt); } /* Razmak naslov sekcije -> stupci (polje `title_gap`): Ponti 46, Laboratorio sek#6 84 px od slova do slova. Fotografija ispod stupaca (Laboratorio sek#6): 1281 px uz desni rub, 94 px ispod teksta. Na telefonu ostaju zadane mjere. */ .two-col-wrap--tg > .sec__title { margin-bottom: var(--tc-title-gap); } .two-col-wrap--tg > .two-col { margin-top: 0; } .sec--two-col-text .sec__band { width: var(--tc-band-w, auto); margin-top: var(--tc-band-gap, 2.5rem); } /* Traka s naslovom lijevo i tekstom desno (polje `col1_width`). Clinica sek#5: naslov x 221..727 u dva retka, tekst od x 751, lijevo poravnat. Prvi redak teksta je u dizajnu CENTRIRAN prema prvom retku naslova: slova teksta su 7 px ispod slova naslova. Poravnanje vrhova daje 4 px, osnovna linija 12 px; sredina retka (30 naspram 22 px prored) daje 8. Zato je pomak pola razlike proreda, a ne izmišljen broj. */ .text-band--side { display: grid; grid-template-columns: var(--tb-c1) minmax(0, 1fr); align-items: start; text-align: left; } .text-band--side > .sec__title { grid-column: 1; grid-row: 1 / span 3; margin: 0; } .text-band--side > :not(.sec__title) { grid-column: 2; } .text-band--side > .sec__title + * { margin-top: 0.25rem; } /* (30 - 22) / 2 */ /* Pilula fiksne širine (polje `cta_w`): natpis ostaje na uvlaci obitelji ili na izmjerenoj (`cta_pad`), a krug uz desni rub — razmak natpis -> krug je ono što preostane, kao u dizajnu (DSD sek#6 269 px, natpis 74,5 od ruba; Odontoiatria digitale sek#3 275,4 umjesto 300). Mjere su s desktop PDF-a; na telefonu je natpis veći, pa pilula ostaje po natpisu. */ .text-band--cw > .btn.btn { width: var(--tb-cta-w); --btn-gap: 0px; } .text-band--cp > .btn.btn { padding-left: var(--tb-cta-pad); } /* Prored naslova po sekciji (polje `title_lh`). Smile team sek#5 „Una competenza che diventa / standard condiviso": 40 px ExtraLight s korakom 38 (1651,2 -> 1689,2), a klasa `.fs-40` daje 45 — tinta naslova 76 px umjesto 68 i tekst 7 px niže. Mjera je s desktop PDF-a. Dvije klase, da nadjača `.sec__title:has(> span.fs-40)` iz `tipografija.css`. */ .text-band.text-band--tlh > .sec__title { line-height: var(--tb-title-lh); } /* ---------- tekstualna traka: sirina bloka je 854, ne 880 ---------- Traka je centrirana: svi blokovi u njoj imaju sredinu na 756 (= 1512/2). Najsiri izmjereni redak tijela je 849,8 px, x 331,6 do 1181,4 (Invisalign sek#6, 5 redaka). Kontejner 854 centriran u 1512 daje tacno 329..1183 — redak od 849,8 ga ispuni do 1,6 px. Tema je imala 880 (316..1196), pa se svaki pasus lomio 26 px kasnije nego u dizajnu. 854 je vec u tokenima kao `--w-center`. Napomena za nalaz: dizajn ima i uzu varijantu trake, oko 638 px (npr. Prezzi sek#5, Prima visita sek#9, Testimonianze sek#6 — najsiri redak 612..634 na 14 px). Ta se sirina ne moze pogoditi iz CSS-a jer se ne razlikuje ni po jednoj klasi; trazi polje `container` po sekciji. */ .sec--text-band .sec__inner--880 { max-width: 53.375rem; } /* 854 */ /* Uza varijanta trake. Izmjereno na svih 22 trake s tijelom od 14 px: ink najduzeg retka je ili 808-850 (10 traka) ili 612-634 (11 traka) — dvije jasno odvojene skupine, bez ijedne vrijednosti izmedu. Kontejner od 638 centriran u 1512 daje 437..1075, a najsiri redak uze skupine ide 439,7..1073,3 (Digital Smile Design sek#6) — staje s 2,3 px. Dok su sve trake bile na 854, jedanaest ih je bilo 216 px preširoko i svaka se lomila za jedan do dva retka kasnije nego u dizajnu. Klasu bira polje `container` po sekciji (`smile_container_class()` od vrijednosti pravi naziv klase), a vrijednost upisuje `deploy/seed/traka_sirina.php` iz izmjerenog PDF-a. */ .sec--text-band .sec__inner--638 { max-width: 39.875rem; } /* 638 */ /* ---------- tabela usporedbe: takoder 854 ---------- Laboratorio sek#8: prvi stupac pocinje na 328/329, treci zavrsava na 1180,6. Straumann sek#3: isto 328 i 1180,6. Kontejner 854 centriran je 329..1183. Tema je imala 880. */ .sec--compare .sec__inner--880 { max-width: 53.375rem; } /* 854 */ /* ---------- traka s pozivom na akciju ---------- Sadrzaj trake NIJE od ruba do ruba. Mjereno na renderu PDF-a na 1512: a) varijanta s ikonom (No Bone sek#11, All on 4/6 sek#11, Prima visita sek#15 — sve tri iste): traka 113..1398, ikona (omotnica) 325..404 dakle 80x57, natpis pocinje na x 437, dugme 990..1169 (180x36). Odatle: lijeva uvlaka 212, ikona 80, razmak do natpisa 32, desna uvlaka 1399-1170 = 229 (zadnji piksel dugmeta je 1169). b) varijanta bez ikone (Testimonianze sek#3): traka 114..1397, plavi naslov 223..462, natpis 535..950, dugme 983..1271. Odatle: lijeva uvlaka 110, desna 128. Tema je imala 36 px sa obje strane i ikonu od 48 px, pa je u varijanti a) ikona stajala na 149 umjesto na 325, a dugme zavrsavalo na 1363 umjesto na 1169 — 194 px promasaja na dugmetu. */ .cta-banner { padding-inline: 6.875rem 8rem; } /* 110 / 128 */ .cta-banner:has(.cta-banner__icon) { padding-inline: 13.25rem 14.3125rem; /* 212 / 229 */ gap: 2rem; /* 32 */ } .cta-banner__icon img { width: 5rem; height: auto; } /* 80 */ /* a) USPRAVNO. Traka je visoka 159 (All on 4/6: 158 — polje `height`), a sadržaj NIJE centriran: na sve tri stranice je vrh tinte prvog reda 46 px ispod vrha trake, vrh koverte isto 46, a dugme 58 — i kod tri i kod četiri reda teksta. Centriranje je četveroredni tekst dizalo 14 px, a kovertu i dugme spuštalo. Prvi red od 23 px s proredom 27 počinje 42 px od vrha (PDF okvir 1,4em na 38,9; sa 41,5 je tinta padala na 45 zbog zaokruživanja). */ .cta-banner:has(.cta-banner__icon) { align-items: flex-start; padding-block: 2.625rem 0; /* 42 */ } .cta-banner:has(.cta-banner__icon) .cta-banner__icon { margin-top: .25rem; } /* 46 */ /* Korak redova 27 (tinta 46 / 73 / 100 / 127); tema je davala 26,5. */ .cta-banner:has(.cta-banner__icon) .cta-banner__text, .cta-banner:has(.cta-banner__icon) .cta-banner__text span { line-height: 1.6875rem; } .cta-banner:has(.cta-banner__icon) .cta-banner__btn { margin-top: 1rem; } /* 58 */ /* Dugme 990..1169 x 36,9 — mala obitelj, natpis 16 px na x 1015,7, krug 23 x 25 na 1141..1164: uvlaka 25,7, razmak natpis-krug 32,9. */ .cta-banner:has(.cta-banner__icon) .cta-banner__btn.btn--sm { padding-left: 1.60625rem; /* 25,7 */ gap: 2.05625rem; /* 32,9 */ } /* b) TRI STUPCA (05_Testimonianze): okvir 113..1398 x 1306..1496 s rubom 1 px, naslov 24 px od x 221 (stupac 314), tekst 16 px od x 535 (najduži red 419 px), dugme 983..1271 x 47. Sve troje počinje pri vrhu: tinta naslova i teksta na 67, dugme na 68 px ispod vrha okvira. */ .cta-banner--tri { align-items: flex-start; gap: 0; padding: 3.8125rem 7.875rem 0 6.6875rem; /* 61 / 126 / 107 + rub 1 */ } .cta-banner--tri .cta-banner__text { flex: 0 0 19.625rem; } /* 314 */ .cta-banner--tri .cta-banner__opis { flex: 0 0 28rem; /* 448: 535 -> 983 */ margin-top: .0875rem; } .cta-banner--tri .cta-banner__opis p { max-width: 26.5rem; } /* Dugme 289 x 47: natpis na x 1004 (uvlaka 21), krug 23 x 25 na 1231..1253 (razmak 22,3), 18 px do desnog ruba. */ .cta-banner--tri .cta-banner__btn { margin-top: .375rem; /* 68 */ height: 2.9375rem; /* 47 */ padding-left: 1.3125rem; /* 21 */ padding-right: 1.125rem; /* 18 */ gap: 1.39375rem; /* 22,3 */ /* TE-05: natpis i krug u dizajnu NISU na istoj sredini dugmeta: tinta natpisa 18 px ispod vrha pilule (okvir reda 14,3), bijeli krug 12 px. Centrirano ih je stavljalo na 12,3 i 11 — natpis 2 px, krug 1 px previsoko. */ align-items: flex-start; } .cta-banner--tri .cta-banner__btn .btn__label { margin-top: .89375rem; } /* 14,3 */ .cta-banner--tri .cta-banner__btn .btn__arrow { margin-top: .75rem; } /* 12 */ /* c) VELIKI ZNAK (polje `variant` = `segno`; `Servizi (2).pdf`, baner „Scopri le soluzioni", 10. 10. 2026). Traka je ista kao a): 113..1399 x 159, preljev (12,13,13) -> (8,53,68). Mjereno na renderu PDF-a 4x, od lijevog ruba trake: znak 76,13..305,94 (229,81 x 118,5; vektor iz PDF-a na 16x), vrh 17,75; slika je 691 x 357 (3x, okvir zaokružen na piksel slike), dakle 230,33 px širine na 1512 tekst 20 px Light, korak 27, od x 355 dugme 899..1107 (208 x 37), vrh 58,5; natpis 16 px od 21,7, krug 23 x 25 na 5,5 od desnog ruba Tekst NIJE na stalnom vrhu kao u a): IT u PDF-u ima tri reda (vrh 39), HR četiri (vrh 27) — oba bloka su na sredini trake, a znak i dugme stoje isto. Zato je tekst okomito centriran, a znak i dugme imaju izmjereni vrh. Stupac teksta ide do 883 (16 px do dugmeta): najduži red u PDF-u (HR) završava tintom na 871. */ .cta-banner.cta-banner--segno { align-items: flex-start; gap: 0; padding: 0 0 0 4.7578125rem; /* 76,13 */ } .cta-banner.cta-banner--segno .cta-banner__icon { flex: 0 0 auto; margin-top: 1.109375rem; /* 17,75 */ line-height: 0; } .cta-banner--segno .cta-banner__icon img { width: 14.395833rem; height: auto; } /* 230,33 */ .cta-banner.cta-banner--segno .cta-banner__text { flex: 0 0 33rem; /* 528: 355 -> 883 */ align-self: center; margin-left: 3.033854rem; /* 48,54: 306,46 -> 355 */ font-size: 1.25rem; /* 20 */ line-height: 1.6875rem; /* 27 */ } .cta-banner.cta-banner--segno .cta-banner__btn.btn--sm { flex: 0 0 auto; width: 13rem; /* 208 */ margin: 3.65625rem 0 0 1rem; /* vrh 58,5; 883 -> 899 */ padding-left: 1.35625rem; /* 21,7 */ gap: 0; } /* ---------- kartica prve posjete ---------- Kartica je siroka 1286 (113..1398, mjereno na pikselima rendera Clinica sek#15), ali joj sadrzaj stoji u 1070: fotografija zavrsava na 1291, a stupac teksta pocinje na 221 (homepage sek#7: naslov i tekst kartice oba na x 869; 869 = 221 + 422 + 26). Dakle: bocna uvlaka 108, fotografija 622, razmak 26, tekst 422. Zbroj 108 + 422 + 26 + 622 + 108 = 1286. Tema je imala uvlaku 20, fotografiju 623 i razmak 113, pa je fotografija u tamnoj varijanti stajala na 756..1379 umjesto na 669..1291. Okomita uvlaka ostaje 20 px — nije moja. */ /* ISPRAVAK: uvlaka 108 vrijedi SAMO za tamnu varijantu (fotografija desno). Mjereno u svih sedam PDF-ova koji nose ovu karticu, uvijek 1286 x 299: svijetla, foto lijevo lijevo 20 foto 623 desno 643 gore 20 dolje 26 (00-homepage, 03-clinica-laboratorio, 03-landing-impianti, 03-prezzi-1, prima-visita) tamna, foto desno lijevo 555 foto 623 desno 108 gore 28 dolje 18 (01-clinica-clinica, soluzioni-odontoiatria-generale) Dok je `padding-inline: 108` stajao na obje, fotografija svijetle varijante je bila na 221..843 umjesto na 133..756 — 88 px predaleko, na PET stranica. Popravak tamne je pokvario svijetlu; sada svaka ima svoje. Okomite uvlake su takoder razlicite, i zbog njih je kartica bila 293 px umjesto 299. */ /* Okomite uvlake NISU uvlake kartice nego polozaj FOTOGRAFIJE u njoj, pa ih nosi omot fotografije, a ne kartica. Razlika se vidi na tekstu: tijelo kartice je u dizajnu centrirano na CIJELU karticu (299), a ne na prostor izmedu uvlaka. Mjereno od vrha okvira prvog retka do dna pilule: Clinica sek#15 49,1 .. 249,4 sredina 149,25 Odontoiatria sek#12 40,8 .. 257,6 sredina 149,2 04_Prima visita sek#8 (371 visoka) sredina 186,5 na 185,5 dakle sredina kartice (149,5), na dva teksta razlicite duzine. Dok je uvlaka stajala na kartici, tijelo tamne se centriralo na 28..281, pa je sjedalo 5 px nize. */ .sec--v-light .prima__card { grid-template-columns: 38.9375rem 1fr; /* 623 | 422 */ column-gap: 7.0625rem; /* 113 */ padding: 0 6.75rem 0 1.25rem; /* - 108 - 20 */ } .sec--v-light .prima__media { padding-block: 1.25rem 1.625rem; } /* 20 / 26 */ .sec--v-dark .prima__card { grid-template-columns: 1fr 38.875rem; /* 422 | 622 */ column-gap: 1.625rem; /* 26 */ padding: 0 6.75rem; /* - 108 */ } .sec--v-dark .prima__media { padding-block: 1.75rem 1.125rem; } /* 28 / 18 */ /* Kartica s glavom je u svih sedam PDF-ova visoka 299 — i onda kad joj visinu ne nosi fotografija (kartica bez privitka u uredniku). Bez ovoga bi se prazna kartica skupila na visinu teksta i pilula bi legla na donji rub. Kartica bez glave je drugi crtez (371 u 04_Prima visita). */ .prima:not(.prima--bez-glave) .prima__card { min-height: 18.6875rem; } /* 299 */ /* Svijetla kartica ima tijelo 6,4 px ISPOD sredine kartice, na sve cetiri stranice koje je nose (naslovnica, laboratorio, impianti, prezzi — isti tekst, iste mjere do desetinke): okvir naslova kartice 69,85, dno pilule 241,9, sredina 155,9 naspram 149,5. Tabak modula ima 152,9 uz drukcije unutrasnje razmake. Ovo je polozaj iz dizajna, ne ispravka tude greske: tamna varijanta ga nema (sredina 149,2 / 149,25), pa vrijedi samo za svijetlu. Gornja margina centriranog elementa pomjera mu sredinu za pola svoje vrijednosti. */ .sec--v-light .prima__body { margin-top: .796875rem; } /* 12,75 -> +6,375 */ /* Uvod i naslov glave. Svijetla varijanta u dizajnu ima vrh okvira prvog retka uvoda u istoj visini kao vrh okvira naslova (tabak 181,3 / 181,0, naslovnica 3942,3 / 3942,0, laboratorio, impianti i prezzi isto +0,3). Naslov je 40 px s proredom 46, pa mu okvir slova viri 5 px iznad retka, a uvod (14/22) pocinje 1,2 px ispod svog retka — uvod je stajao 6,2 px nize od naslova. 5 px zazora iznad glave zato u svijetloj varijanti ne nosi glava nego sam naslov: visina glave i polozaj kartice ostaju isti, a uvod se podigne na +1,2. Tamna varijanta u dizajnu ima uvod NIZE od naslova (Clinica 6497,3 / 6490,0, Odontoiatria 5408,0 / 5400,7 — +7,3), sto postojeci raspored daje s +6,2, pa se ne dira. */ .sec--v-light .prima__head { margin-top: 0; } .sec--v-light .prima__title { padding-top: .3125rem; } /* 5 */ /* Kad je fotografija desno, tekst kartice je u dizajnu DESNO poravnat. Clinica sek#15: tri bloka teksta pocinju na 294,9 / 339,0 a svi zavrsavaju na 643,0; Odontoiatria conservativa sek#12: 305,0 i 339,0, opet 643,0. Blokovi koji dijele desni rub a ne lijevi mogu biti samo desno poravnati. U svijetloj varijanti (fotografija lijevo) tekst pocinje na 869 i lijevo je poravnat, pa se ovo vezuje samo za tamnu. Ispod 1024 fotografija ide IZNAD teksta u jedan stupac, pa desno poravnanje nema uporiste — zato je i ono unutar brane. */ .sec--v-dark .prima__body { text-align: right; } /* Tekst kartice prve posjete je u dizajnu UZI od stupca u kojem stoji. Desni rub se poklapa — i dizajn i sajt završavaju na 643 — a lijevi se razilazi za 74 px, jer tekst zauzme cijeli stupac od 422 px umjesto da stane u svojih ~348: odontoiatria-conservativa sek12 dizajn 7 redaka, ink 338,0 sajt 6 redaka, ink 411,8 clinica-smile sek15 dizajn 6 redaka, ink 348,1 sajt 5 redaka, ink 420,5 Sonda daje raspone 339..362 i 349..366; presjek je 349..362, sredina 355. Blok je desno poravnat, pa se sužava on, a ne stupac mreže — stupac mora zadržati desni rub na 643, koji je tačan. Vezano je za karticu koja IMA glavu, jer `--bez-glave` ima drugu mrežu (524 | 520) i njena dva tijela su široka 520 px; izmjereno je da su na sajtu četiri takva bloka, dva po 422 i dva po 520, pa bi pravilo bez ovog izuzetka sužavalo i ona dva koja nisu mjerena. */ .sec--v-dark .prima:not(.prima--bez-glave) .prima__body { max-width: 22.1875rem; /* 355 */ margin-left: auto; } /* Kartica bez zaglavlja je drugi crtez: tekst joj ide do 741, a ne do 643 (Prima visita sek#8 i Turismo dentale sek#7 — tri bloka, svi zavrsavaju na 741,0). To je podjela 520 | 26 | 524 unutar istih 1070. */ .prima--bez-glave .prima__card { grid-template-columns: 32.75rem 1fr; } /* 524 | 520 */ .sec--v-dark .prima--bez-glave .prima__card { grid-template-columns: 1fr 32.75rem; } /* Tamna kartica bez glave, izmjereno na obje stranice koje je nose (04_Prima visita y 3180..3551, Landing pazienti italiani y 2827..3198 — iste mjere): kartica 1286 x 371 (ne 299) fotografija 530 x 307 na x 762, 33 od vrha, 31 do dna, OSTRIH uglova tekst desno poravnat, desni rub 741 -> razmak do fotografije 21, desna uvlaka kartice 1399 - 1292 = 107 stupac teksta 526: na Italiani najduzi red („…Saprai sempre a chi rivolgerti in caso di") ima ink 524,5, a na Prima visita „…un programma" + „ di" bi trebalo 527,5 — oba preloma iz PDF-a stanu samo u 524,5..527. Sa 520 je Italiani lomio „in caso / di dubbi", a sa sirim stupcem bi Prima visita povukla „di" u prvi red. naslov -> prvi red teksta 10,35 (okvir retka 27,5 do okvira 22) Tijelo ostaje centrirano na karticu (sredina 3366,5 na 3365,5). */ .sec--v-dark .prima--bez-glave .prima__card { grid-template-columns: 1fr 33.125rem; /* 526 | 530 */ column-gap: 1.3125rem; /* 21 */ padding: 0 6.6875rem 0 6.375rem; /* - 107 - 102 */ } .sec--v-dark .prima--bez-glave .prima__media { padding-block: 2.0625rem 1.9375rem; } /* 33 / 31 */ .sec--v-dark .prima--bez-glave .prima__img { height: 19.1875rem; border-radius: 0; } /* 307 */ .sec--v-dark .prima--bez-glave .prima__card-title { margin-bottom: .646875rem; } /* 10,35 */ /* Tamna kartica S glavom: od dna retka naslova do kartice je 25 px, a ne 38 kao u svijetloj. Odontoiatria conservativa sek#12: redak naslova (prored 45) 5406,2..5451,2, kartica 5476 -> 24,8; Clinica sek#15: zadnji redak 6540,5..6585,5, kartica 6611 -> 25,5. Sajt je imao 38 (+14 / +12). */ .sec--v-dark .prima:not(.prima--bez-glave) .prima__head { margin-bottom: 1.5625rem; } /* 25 */ /* ---------- nacini placanja: dva stupca, ne cetiri ---------- Prezzi sek#4: stavke stoje na x 221 i x 761 unutar kontejnera 1070 — dakle dva stupca od 530 s razmakom 10 (221 + 530 + 10 = 761, a desni stupac ima najduzi redak do 1286,9 uz desni rub 1291). Lijevi stupac nosi tri stavke jednu ispod druge (CARTE y 2097, CONTANTI y 2267, PAGAMENTO RATEALE y 2370), desni jednu visoku (BONIFICO y 2097 s cijelim blokom IBAN-a ispod). Tema je od cetiri stavke pravila cetiri stupca po 250 px. Raspored je prvo bio jedna mreza: prve tri stavke u prvi stupac, cetvrta u drugi preko sva tri reda (`grid-auto-flow: column` uz `grid-row: 1 / -1`). TO JE BILO TACNO SAMO DOK JE DESNA STAVKA NIZA OD LIJEVOG STUPCA. Cim su bankovni podaci usli unutar nje — a dizajn ih ima tacno tamo, x 761, y 2209,3 — desni blok naraste na 430 px, a visina stavke koja premoscuje redove se u mrezi raspodijeli PO TIM REDOVIMA, pa se tri lijeve stavke razmaknu. Dva stupca koja teku svaka za sebe to ne mogu imati, pa raspored od commita 1214d4c nosi `payments.php`: `
` s dva `
    `, kad je polje `split_after` popunjeno. Pravila su u `layout-a.css`. Nasao Tok 3; mreza je ovdje obrisana jer bi inace ostala kao mrtvo pravilo s ugradjenim kvarom. Provjereno da uklanjanje nista ne mijenja: stupci na `listino-prezzi` sek#4 mjere x 221 / 761, sirina 530 — dx 0,0 i dw 0,0 prema dizajnu, i prije i poslije (`deploy/qa/tools/k4_geom.js`, kod 7c60df7 i 9d4e93b). */ /* Dva i tri stupca dijele isti razmak iz dizajna. Ova dva ostaju: vrijede za sekciju placanja koja NIJE podijeljena u stupce, a razmak od 10 px je i dalje tacan. */ .pay--2, .pay--3 { column-gap: 0.625rem; } /* 10 */ /* ---------- udaljenosti: razmak stupaca 10, ne 60 ---------- Contatti sek#2: stupci pocinju na x 221 i x 761 u kontejneru 1070 — 530 + 10. Tema je imala 60, pa su stupci bili 505 a desni je pocinjao na 786. */ .dist { column-gap: 0.625rem; } /* 10 */ /* ---------- mapa: cetiri stupca s razmakom 10, ne 32 ---------- Contatti sek#1: zaglavlja i tijela stupaca stoje na x 113, 437, 761 i 1085 u kontejneru 1286. Korak 324 = stupac 314 + razmak 10. S razmakom 32 koji je tema imala stupci ispadaju 297,5 a cetvrti pocinje na 1101,5 umjesto na 1085. Isti razmak koristi i modul koraka, koji se s PDF-om poklapa u pikselu. */ .map__cols { column-gap: 0.625rem; } /* 10 */ /* ========================================================================== VELICINA PISMA PO NIVOU Mjereno tako da se svaki blok iz PDF-a upari sa svojim elementom na sajtu po TEKSTU, pa se usporede `size` iz PDF-a i `font-size` s rendera (alat `compare.js`, izlaz sazet po tipu sekcije). Niz `dizajn -> sajt` ispod svakog pravila je broj blokova koji su se razlikovali i na koliko stranica. Stoji pod istom branom kao i geometrija: to su mjere s okvira 1512, gdje rem skalira s `calc(100vw / 1512 * 16)`. Ispod 1024 vrijede vec odobrena mobilna pravila iz `sections.css` i `MOBILE_RULES.md`. ========================================================================== */ /* ---------- tabela usporedbe: 16 u zaglavlju, 14 u tijelu ---------- Tema je imala jednu velicinu za sve celije (15 px), pa je zaglavlje bilo 1 px premalo a tijelo 1 px preveliko. U PDF-u su to dvije razlicite velicine: zaglavlje 16 Bold, tijelo 14. Laboratorio sek#8 i Straumann sek#3: 16 -> 15 na 6 blokova, 14 -> 15 na 12 blokova. */ .compare__table thead th { font-size: 1rem; } /* 16 */ .compare__table tbody th, .compare__table td { font-size: 0.875rem; } /* 14 */ /* ---------- tabela usporedbe: sirine stupaca ---------- Tablica je `table-layout: auto`, pa stupce dijeli po sadrzaju i na svakoj stranici ispadnu drugaciji. Izmjereno na renderu 1512: Laboratorio sajt 154 / 353 / 347 dizajn 137 / 403 / 314 Straumann sajt 165 / 314 / 374 dizajn 140 / 427 / 287 Dizajn je mjeren iz x-a teksta: Lab 329 / 466 / 869, Straumann 328 / 477 / 895, uz desni rub tijela 1180,6 i tablicu na 329..1183. Dvije pojave nemaju istu podjelu ni u dizajnu, a razlikovati ih CSS ne moze (nijedna klasa ih ne razdvaja), pa se uzima sredina: rub drugog stupca na 451,5 i treceg na 862, sto uz uvlaku celije od 20 px daje tekst na 471,5 i 882. Promasaj je time 5,5 px na drugom i 13 na trecem stupcu, umjesto dosadasnjih 37 i 66. Prva celija gubi lijevu uvlaku a zadnja desnu: u dizajnu tekst prvog stupca pocinje na samom rubu tablice (328-331 prema rubu 329), a tekst treceg zavrsava 2,4 px prije desnog ruba — ne 20. */ .compare__table--3 { table-layout: fixed; } .compare__table--3 th:first-child, .compare__table--3 td:first-child { padding-left: 0; width: 14.35%; } /* 122,5 */ /* Drugi stupac je bio 48,07 % (410,5 px) kao sredina izmedju dvije pojave, ali je pri toj sirini jedna celija na Straumannu isla u TRI retka umjesto dva: dizajn ima ink 378,6 u dva retka, a 410,5 px daje 321,2 u tri. Sonda daje raspon 419..439 px. Prije upisa je izmjereno sta sira vrijednost radi OBJEMA tablicama i TRECEM stupcu, na zivim stranicama, na pet sirina: 410,5 Straumann celija 2: 3 retka, ink 321,2 (dizajn 2 / 378,6) 419 Straumann sve tri: 2 retka, ink tacan Laboratorio bez promjene 423 isto isto 427 isto isto 431 Laboratorio celija 3 pada na 2 retka, Straumann inkovi skacu Prozor je dakle 419..427 i uzima se sredina, 51 % = 423,1 px. Redovi se ne mijenjaju nigdje: treci stupac na obje stranice zadrzava svoj broj redaka, samo mu jedna celija na Laboratoriju suzi ink s 295,2 na 282,7 (dizajn ima 297,2). Straumann time dobija dvije mjere, prijelom i ink. */ .compare__table--3 th:nth-child(2), .compare__table--3 td:nth-child(2) { width: 51%; } /* 423,1 */ .compare__table--3 th:last-child, .compare__table--3 td:last-child { padding-right: 0; width: 37.58%; } /* 321 */ /* ---------- tabela usporedbe: stupci PO SEKCIJI (nadjacava gornje) ---- Gornja sredina je bila kompromis jer „CSS ne moze razlikovati dvije pojave". Sada ih razlikuje sekcija: polja x2h/x2b/x3h/x3b (x zaglavlja i x teksta 2. i 3. stupca od lijevog ruba tablice) i w2 (sirina teksta 2. stupca, odredjuje prijelom). `compare.php` iz njih racuna sirine stupaca i uvlake. Dizajn: Laboratorio zaglavlja 329 / 464,9 / 873,8, tekst 466 / 869; Straumann zaglavlja 328 / 468,2 / 911,2, tekst 477 / 895 — zaglavlje i tekst istog stupca nisu na istom x. Bez polja vrijede postoci iznad. */ .compare__table--3 th:first-child, .compare__table--3 td:first-child { width: var(--cmp-w1, 14.35%); } .compare__table--3 th:nth-child(2), .compare__table--3 td:nth-child(2) { width: var(--cmp-w2, 51%); padding-left: var(--cmp-b2, 1.25rem); padding-right: var(--cmp-r2, 1.25rem); } .compare__table--3 thead th:nth-child(2) { padding-left: var(--cmp-h2, 1.25rem); } /* S poljima sekcije `compare.php` daje --cmp-w3: auto, pa treci stupac uzima ostatak do desnog ruba tablice. */ .compare__table--3 th:last-child, .compare__table--3 td:last-child { width: var(--cmp-w3, 37.58%); padding-left: var(--cmp-b3, 1.25rem); } .compare__table--3 thead th:last-child { padding-left: var(--cmp-h3, 1.25rem); } /* Ukrasni broj: Laboratorio „3", Poppins ExtraLight 460 px, #e9e9e9, okvir spana u PDF-u x 143,1 (186 px lijevo od tablice na 329) i y 2860,6 (176 px iznad vrha zaglavlja 3036,8). Broj stoji IZA tablice. */ .compare__mark--tekst { display: block; left: -11.61875rem; /* −185,9 */ right: auto; top: var(--cmp-mark-y, -10.9375rem); bottom: auto; z-index: 0; opacity: 1; font-size: 28.75rem; /* 460 */ font-weight: var(--cmp-mark-fw, 200); /* polje `mark_fw` */ line-height: 1.4; color: var(--cmp-mark, #e9e9e9); } /* ---------- udaljenosti: naziv 16, opis 14 ---------- Contatti sek#2: naziv odredista ("Trieste", "Aeroporto di Rijeka") je u PDF-u 16 px, a opis ("Circa 70 km — ...") 14. Tema je oboje crtala na 15 px, pa je naziv bio 1 px premali a opis 1 px prevelik — 10 + 10 blokova. */ .dist__list dt { font-size: 1rem; } /* 16 */ .dist__list dd { font-size: 0.875rem; } /* 14 */ /* ---------- nacini placanja: naslov stavke 16, ne 18 ---------- Prezzi sek#4: "CARTE DI DEBITO E CREDITO", "BONIFICO BANCARIO", "CONTANTI", "PAGAMENTO RATEALE" su u PDF-u 16 px; tema ih je crtala na 18, pa je svaki od cetiri natpisa bio 14-34 px preširok. */ .pay__title { font-size: 1rem; } /* 16 */ /* ---------- kartica prve posjete: naslov 22, ne 24 ---------- "Prima visita gratuita" je u PDF-u 22 px Regular (homepage sek#7 na x 869..1090,5). Tema je imala 24, pa je natpis isao do 1115 — 25 px predaleko. Isto na Laboratoriju sek#10, Impianti sek#12 i Prezzi sek#6. */ .prima__card-title { font-size: 1.375rem; } /* 22 */ /* ---------- recenzije: potpis ovisi o izvoru ---------- Homepage sek#8: u Google stupcu potpis stoji ISPOD teksta i mali je — "Kristina Stojanovic" je 13 px Regular na x 466,5. U Facebook stupcu potpis stoji IZNAD teksta i jaci je — "Patricija Peternelj" 16 px Bold na x 1006. Tema je oba crtala kao 16 px / 600, pa je Google potpis bio 3 px prevelik (10 blokova na 5 stranica), a Facebook preslab. */ .reviews__item--google .reviews__author { font-size: 0.8125rem; font-weight: 400; } /* 13 */ .reviews__item--facebook .reviews__author { font-weight: 700; } /* 16 Bold */ /* ---------- dvokolonski tekst: podnaslov u tijelu je 16 ---------- Ponti dentali sek#3 i Laboratorio sek#5: podnaslov verzalom („PONTE SU DENTI NATURALI") je u PDF-u 16 px Light, #009dc9. Pravilo je premješteno u `sections.css` (uz ostala pravila `.two-col__text h4`), jer vrijedi na svim širinama — ovdje je važilo samo od 1024 px. */ /* ---------- dvokolonski tekst: prva kolona je TAMNA KARTICA ---------- Nasla je nezavisna kontrola, a piksel rendera to potvrduje. Presjek rendera PDF-a na 1512: Ponti dentali sek#3 ploha x 221..642, y 950..1279 (421 x 329) Laboratorio sek#5 ploha x 220..749, y 1499..1939 (529 x 440) Na obje stranice ta ploha tacno pokriva PRVI stupac (`.sec__inner--1070` daje stupce 221..751 i 761..1291), a tekst u njoj je BIJEL: Laboratorio sek#5 ima tijelo #ffffff na traci koja je #ffffff. Bez plohe je to bijelo na bijelom — kontrola ga je i nasla kao necitljiv tekst, ne kao pomak. Ploha nije jednobojna: uzorak uglova daje gore (30,28,27) a dolje (13,13,13) na obje stranice, dakle okomit prelaz. Gornja vrijednost je token `--c-tile` (#1f1c1b) u pikselu. Zaobljenje: na gornjem rubu tamno pocinje 8-9 px od ugla, na 5 px nize 2 px, na 8 px nize 1 px — to je polumjer oko 10, ne 20. Uvlaka: tekst je od ruba plohe udaljen 27 px (Ponti) i 44 (Laboratorio), po okomici 53 odnosno 38. Uzima se sredina, pa je promasaj +-9 px umjesto dosadasnjih 27 i 44 (koliko iznosi kad plohe nema). KOJE SEKCIJE JE IMAJU nije stvar pravila nego podatka. Pravilo je ranije bilo vezano za `.sec--light` — obje mjerene sekcije jesu svijetle — ali svijetlih sekcija ovog layouta ima tri, i trecoj („Benvenuti in Smile" na 01-clinica-clinica sek#3) dizajn plohu NE daje: oba stupca su obican tamni tekst na bijelom. Sajt je lijevi zatvarao u crnu plocu s bijelim tekstom, pa su dva jednaka stupca izgledala kao dvije razlicite stvari. Nasao koordinator pregledom po oku. Zato plohu sada nosi polje `col1_card` po sekciji, kao i `col1_width`. Sije je `deploy/seed/dvokolona_sirina.php`. */ /* Boja, oblik i visina su sada u `sections.css`, na svim širinama. Uvlaka nije ista na dvije sekcije (Ponti 27 / 57 / 52, Laboratorio 45 / 43 / 34 — bočno / gore / dolje, do ruba retka), pa dolazi iz polja `card_pad_*`; bez polja ostaje dosadašnjih 44 / 36. */ .two-col--kartica .two-col__item:first-child { padding: var(--tc-card-pt, 2.75rem) var(--tc-card-px, 2.25rem) var(--tc-card-pb, 2.75rem); } /* ---------- redovi huba: natpis od 26 px kad je link sam u redu ---------- Modul ima dvije uloge. Na `/soluzioni/` kartica nosi popis od dva do pet linkova, svaki 16 px (x 977) — to tema crta tacno. Na `/clinica/` je u kartici JEDAN link i on je u PDF-u 26 px Light (x 976, pet redova), a tema ga je crtala na 16 — 10 px premalo na svih pet. Razlikuje se brojem stavki, jedinim sto CSS o tome zna. */ .hub-row__links:has(li:only-child) a { font-size: 1.625rem; line-height: 1.1538; } /* 26 / 30 */ /* Podvlaka natpisa od 26 px: u dizajnu tanka (1 px) i 2 px ispod osnovne linije; tema ju je crtala 2 px debelu i 4 px niže. Boja (sivo-bijela 190) je zajednička svim natpisima — v. `.hub-row__label` u sections.css. */ .hub-row__links:has(li:only-child) .hub-row__label { text-underline-offset: 2px; } /* ---------- video + tekst: stupci nisu pola-pola ---------- Obje pojave ovog layouta u dizajnu imaju svoj omjer, i nijedna nije polovina: No Bone sek#6 tekst 219..505 (286), video 543..1397 (854), razmak 38 Odontoiatria dig. sek#6 tekst 113..859 (746), video 869..1399 (530), razmak 10 Tema je crtala `1fr 1fr` s razmakom 60, dakle 613 + 613: video je na prvoj stranici bio 241 px preuzak i pocinjao 243 px predaleko desno, a na drugoj 83 px presirok. Zbir stupaca s razmakom nije uvijek jednak kontejneru (No Bone: 286 + 38 + 854 = 1178 u kontejneru 1286), pa se red poravnava uz rub na kojem je video — `justify-content`. Tako se na obje stranice poklopi i lijevi rub teksta i desni rub videa. Sirine dolaze iz polja po sekciji; bez njih ostaje podjela na pola. */ .video-text--mjere { grid-template-columns: var(--vt-tw) var(--vt-w); column-gap: var(--vt-gap, 3.75rem); justify-content: end; } .video-text--mjere.video-text--left { grid-template-columns: var(--vt-w) var(--vt-tw); justify-content: start; } /* Red ne mora završiti na rubu kontejnera: No Bone ga završava na x 1397, 2 px prije ruba (tekst 219, video 543–1397). Polje `row_inset`, sa strane na kojoj je video. */ .video-text--mjere.video-text--right { padding-right: var(--vt-uvlaka, 0); } .video-text--mjere.video-text--left { padding-left: var(--vt-uvlaka, 0); } /* Tekst uz video nije uvijek u sredini: No Bone ima naslov 145,8 px ispod vrha videa (blok je 18,6 px iznad sredine), Odontoiatria digitale 6,8 px. Polje `text_top` je razmak od vrha videa do vrha OKVIRA naslova; okvir slova od 24 px (33,6) viri iz retka od 30 1,8 px, pa je vrh slova 1,8–2 px iznad upisanog broja. */ .video-text--vrh { align-items: start; } .video-text--vrh > .video-text__body { margin-top: var(--vt-vrh, 0); } /* Razmak naslov → tekst: No Bone 12,5, Odontoiatria digitale 29,1 (od dna retka naslova do vrha retka teksta); prazno = 20. */ .sec--video-text .video-text__body > .sec__title { margin-bottom: var(--vt-naslov, 1.25rem); } /* Odontoiatria digitale: naslov i tekst poravnati desno, na x 859. */ .video-text--desno > .video-text__body, .video-text--desno > .video-text__body > .sec__title { text-align: right; } /* ---------- koraci: mreza koja je u dizajnu uvucena ---------- All on 4/6 sek#5 je jedina sekcija koraka koju dizajn ne lijepi uz rub kontejnera. Stupci pocinju na x 171 / 596 / 1028, a tema ih je crtala na 113 / 545 / 977 — dakle cijela mreza 51-58 px prelijevo. Sirinu stupca ne daje PDF nego mjerenje: naslovi koraka nose tvrdi prijelom iz seeda, pa se lome isto u stupcu od 312 i od 422 px i ne govore nista. Tijelo govori. Prolaskom kroz raspon sirina na zivom fontu (`deploy/qa/tools/k4_sonda.js`): korak 1 „Durante la prima visita…" 5 redaka, ink 297,2 -> 298..325 px korak 3 „La TAC 3D e la scansione…" 7 redaka, ink 305,7 -> 306..329 px Presjek je 306..325. Uz kontejner od 1170 (113 + 58 = 171, sto je tacno lijevi rub iz dizajna) i tri stupca, razmak od 115,5 px daje stupac od 313 px — unutar presjeka — i rubove na 171 / 599,5 / 1028. Zasto ne 425 px koraka, koliko je od prvog do drugog stupca: dizajn nije ujednacena mreza. Od prvog do drugog stupca je 425 px, od drugog do treceg 432. Jedan razmak ne moze biti oba, pa je uzet onaj koji poklopi PRVI i TRECI rub tacno (0 px) i drugi promasi za 3,5 — umjesto obrnuto, gdje bi treci promasio 7. Mjeru bira polje `container` po sekciji, kao i kod trake teksta: jedina sekcija s tim rasporedom ne trazi ni novo polje ni izmjenu predloska. */ .sec__inner--1170 { max-width: 73.125rem; } /* 1170 */ .sec--steps .sec__inner--1170 .steps { column-gap: 7.21875rem; } /* 115,5 */ /* ---------- foto + tekst, varijanta „tekst preko medija": kartica ide UZ VRH `.media-text` je poravnat po sredini (`align-items: center`), sto je tacno dok su s jedne strane fotografija a s druge tekst. Kod varijante `--over` s jedne strane stoji KARTICA, a s druge stupac s cetiri para naslov+tekst koji je bitno visi — pa sredina karticu odgurne nadolje. Mjereno na jedinoj pojavi ove varijante na sajtu (`odontoiatria-conservativa`, sekcija 3, „Quattro aree per la salute della bocca"): dizajn kartica pocinje 46,7 px ispod prvog retka stupca sajt kartica pocinje 226,4 px ispod njega uz vrh kartica pocinje 48 px ispod njega Razlika prema dizajnu pada sa 180 px na 1,3. Uz vrh je, dakle, mjera a ne ukus. Nasao koordinator pregledom po oku: u dizajnu kartica i desni stupac krecu u istom redu, a na sajtu je kartica bila cijelu glavu nize. Vezano je za `--over` jer je to jedina varijanta u kojoj su OBJE strane tekst; obicne foto+tekst sekcije ostaju po sredini, kako i jesu mjerene. Trenutno je na sajtu tacno jedna takva sekcija, pa pravilo nema gdje da promasi. */ .media-text--over { align-items: start; } /* ---------- foto + tekst: stupac uvučen od ruba, ne prilijepljen `--mt-tw` daje stupcu ŠIRINU, ali ga ostavlja uz rub kontejnera: kod `--right` (tekst lijevo) počinje na 113, a sav višak prostora završi u ćeliji medija. Dizajn ga zna držati uvučenog. Modul Olistico, tri stranice: sajt iscrtava tekst od x 118,5, dizajn od 229,5 / 219,5 / 224,5 — dakle SAM DIZAJN se razilazi 10 px, jer je isti modul crtan tri puta. Sajt mora imati jedan x (isti modul), pa se uzima sredina: 224,5. Tekst je desno poravnat, pa se računa po desnom rubu okvira: 224,5 + ink 521,5 = 746, a 746 - 113 - 527 = 106. Ćelija se zato širi za odmak, a sam blok zadržava svoju širinu i lijepi se uz unutrašnji rub — tako odmak pomjera tekst, a ne rasteze ga. */ /* Uz omjerni raspored (`media-text--prop`, vidi `media_text.php`) celije i sirina stupca dolaze kao dijelovi cijelog i postotak; zamjenske vrijednosti su stari, apsolutni raspored za sekcije bez njega. */ .media-text--tw.media-text--toff.media-text--right { grid-template-columns: minmax(0, var(--mt-c-txt, calc(var(--mt-tw) + var(--mt-toff, 0px)))) minmax(0, var(--mt-c-img, 1fr)); } .media-text--tw.media-text--toff.media-text--right .media-text__body { width: var(--mt-tw-pct, var(--mt-tw)); margin-left: auto; } .media-text--tw.media-text--toff:not(.media-text--right) { grid-template-columns: minmax(0, var(--mt-c-img, 1fr)) minmax(0, var(--mt-c-txt, calc(var(--mt-tw) + var(--mt-toff, 0px)))); } .media-text--tw.media-text--toff:not(.media-text--right) .media-text__body { width: var(--mt-tw-pct, var(--mt-tw)); margin-right: auto; } /* ---------- ista varijanta: okvir je KARTICA, ne mjesto za fotografiju `.media-text__media` dobiva svoju izmjerenu visinu samo kad u njemu stvarno ima `` — i to je tacno, jer bi inace prazan okvir svuda ostavljao rupu od 418 px tamo gdje dizajn fotografiju nema. Kod `--over` je obrnuto: tamo okvir NIJE rezervisano mjesto za sliku nego sama tamna kartica. Tok 5 je to izmjerio na jedinoj takvoj sekciji (`odontoiatria-conservativa` sek#3): PNG 530x350 na x 220,9 / y 886,9 ima 1654 bajta, dakle 0,0089 bajta po pikselu uz prag 0,1 — ploha, ne fotografija. Iza kartice u dizajnu nema niceg. Posljedica je bila vidljiva bez mjerenja: kartica je visoka 96 px (same uvlake), naslov joj je presjecen po pola, a oba odlomka ispadaju ispod plohe na bijelu podlogu. Mjera vjernosti to nije mogla javiti — blokovi teksta su na svojim x i y, samo im je ploha ispod prekratka. Dvije polovine popravke: - okvir zadrzi `--mt-h` i kad je prazan (ovdje 350 px, dizajn 349); - natpis bez fotografije tece u okviru umjesto da lezi preko njega, pa kartica moze narasti ako je teksta vise. Mobilni blok u `sections.css` istu stvar vec radi ispod 1024 px; ovo mu je parnjak za desktop. */ .media-text--over .media-text__media { min-height: var(--mt-h, 26.125rem); } .media-text--over .media-text__media:not(:has(img)):not(:has(video)) .media-text__body--over { position: static; inset: auto; } }