/* ========================================================================== Raspored — tok layout-a. 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`. PAZI NA REDOSLIJED UCITAVANJA. `sections.css` ima blok `@media (max-width: 1023px)` u kojem se sve mreze slazu u jedan ili dva stupca. Kako se ovaj fajl ucitava POSLIJE njega, obicno pravilo odavde nadjacava i to mobilno — media upit ne daje nikakvu prednost. Zato SVE sto postavlja `grid-template-columns` ili apsolutno pozicionira ide u blok `@media (min-width: 1024px)` na dnu; ovdje gore ostaje samo ono sto na uskom ekranu ne moze nista preliti (razmaci stupaca, omjeri slika, redoslijed). Prvi pokusaj bez toga dao je dvije pale provjere: `.blog--with-side` je i na 390 px drzao stupac kategorija od 206 px i razmak od 118, pa je kartica bloga izlazila 94 px izvan okvira. ========================================================================== */ /* ---------- tim ---------- Broj kolona. 05_Clinica_Dott Darko e team.pdf: fotografije 411 x 281 na x 113 / 550 / 977, korak 432 — TRI u redu, razmak 21. Tema je slagala cetiri sirine 298, pa je svaka kartica bila 113 px uza od dizajna. Naslovnica (00_Homepage.pdf) ima isti korak: 411 x 508 na 120 / 551 / 981. Razmak je zato 20 px na obje varijante, ne 32. */ .team--grid, .team--cards { column-gap: 1.25rem; } /* Omjer fotografije nije isti u dvije varijante: mreza na stranici tima ima PEJZAZ 411 x 281, kartice na naslovnici PORTRET 411 x 508. Tema je na oba mjesta crtala 4/5, pa je fotografija na stranici tima bila 91 px previsoka po redu, odnosno 364 px na cetiri reda. */ /* Visina pejzaza je u PDF-u 281,5-281,7 (slike na y 2529,11-2810,64 i 2925,74-3207,41), ne 281: s 281 je svaki red bio pola piksela nizi i mreza je do zadnjeg reda zaostajala 3-4 px (TEAM-K01). */ /* Pragma, 30. 9. 2026 (Modifiche_01, slike 22 i 23): „The photos should be square, not rectangular" — mreza stranice tima je sada KVADRAT 411 x 411 na svim sirinama (bio pejzaz 411 x 281,67 iz PDF-a). Kartice naslovnice (`team--cards`, portret 411 x 508) se ne mijenjaju. */ .team--grid .team__img, .team--grid .team__item:not(:has(img)) .team__photo::before { aspect-ratio: 1 / 1; } .team--cards .team__img, .team--cards .team__item:not(:has(img)) .team__photo::before { aspect-ratio: 411 / 508; } .team__photo { position: relative; } /* ---------- blog ---------- Fotografija je u dizajnu (`06_Blog.pdf`) gotovo kvadratna, 314 x 312 na x 113 / 437 / 761. Tema ju je rezala na 200 px, dakle 112 px prenisko. Razmak stupaca je 10 px (korak 324), ne 24. */ .blog__grid { column-gap: .625rem; } .blog__img, .blog__item:not(:has(img)) .blog__media::before { height: 19.5rem; } /* ---------- recenzije: kartice Google i Facebook ---------- Kartice su u PDF-ovima RASTERSKE podloge (530 x 265, 530 x 159, 418 x 199) s preljevom i utisnutim zvjezdicama; tekst, ime i „5.0" su živi tekst preko njih. Mjereno na `00_Homepage.pdf` (sek 8) i `05_Testimonianze.pdf` (sek 4, 5) — iste mjere na obje, pa i na All on 4/6, Prima visita i Clinica, koje ponavljaju naslovnicu: podloga preljev odozgo (30,28,27) → sredina (22,21,20) → dno (13,13,13), dakle ravan preljev #1e1c1b → #0d0d0d; ugao 9 px zvjezdice pet po 15,5 px, korak 22; središte 3,5 px NIŽE od središta „5.0"; od zadnje zvjezdice do „5.0" 10,8 px Google tekst 29,5 od lijevog ruba, „5.0" završava 21,3 od desnog Facebook tekst i ime 25 od lijevog ruba, ime 38,5 ispod vrha Dvije vrste kartice po izvoru, i dizajn ih crta dosljedno na svakoj stranici (naslovnica i Testimonianze daju iste brojke na desetinku): Google, prva (Kristina, 265 visoka) prvi red teksta 15,7 ispod vrha, ime i „5.0" na istoj sredini 23,3 iznad dna Google, druga (Maria, 159) prvi red 8,1 ispod vrha, ime 18,8 iznad dna, „5.0" 9,5 px VIŠE od imena Facebook, prva (Patricija, 199) tekst 35,2 ispod imena, sredina ocjene 46,5 iznad dna, „5.0" završava 10,8 od desnog ruba Facebook, druga (Nisvet, 199) tekst 12,7 ispod imena, sredina ocjene 22,3 iznad dna, „5.0" završava 18,8 od desnog ruba U tri stupca (naslovnica) prva je `:nth-child(1)`, druga `(2)`; u mreži 3 × 2 (Testimonianze) prvi red je prva recenzija, drugi red druga. Visine su `min-height`, ne `height`: kad klijent upiše duži tekst, kartica raste umjesto da tekst iscuri preko ruba. */ .reviews__item--google, .reviews__item--facebook { /* „Sfondo delle schede" sekcije (`--sec-card-bg`) postoji samo kad je polje popunjeno; bez njega ostaje preljev iz dizajna. */ background: var(--sec-card-bg, linear-gradient(180deg, #1e1c1b 0%, #0d0d0d 100%)); border-radius: .5625rem; /* 9 */ } /* Boja i debljina teksta, imena i ocjene iz polja sekcije (`rv_*`, `testimonials.php`). Pravilo pogađa samo omotač s klasom koju predložak daje POPUNJENOM polju, pa prazno polje ne mijenja ništa — ni debljinu imena, koja je danas različita po izvoru i širini ekrana (13/400 Google, 16/700 Facebook). Specifičnost 0,3,0 tuče ta pravila (0,2,0). */ .sec .rv-tekst-c .reviews__text { color: var(--rv-tekst-c); } .sec .rv-tekst-fw .reviews__text { font-weight: var(--rv-tekst-fw); } .sec .rv-ime-c .reviews__author { color: var(--rv-ime-c); } .sec .rv-ime-fw .reviews__author { font-weight: var(--rv-ime-fw); } .sec .rv-ocjena-c .reviews__rating { color: var(--rv-ocjena-c); } /* Ručni prelomi iz PDF-a („…tima.Nakon dosta / Odgadjanja…") su u tekstu recenzije kao novi red; `pre-line` ih prikazuje, a višestruke razmake i dalje sažima. */ .reviews__text { white-space: pre-line; } /* Ocjena: pet zvjezdica po 15,5 px vidljivog crteža na koraku 22, pa broj. Svg crtež zauzima 14,82 / 16 širine okvira, pa je okvir 16,73 px. */ .reviews__rating { gap: .675rem; } /* 10,8 */ .reviews__stars { gap: .329375rem; transform: translateY(.21875rem); } /* 5,27; 3,5 */ .reviews__star { width: 1.045625rem; height: 1.040625rem; } /* 16,73 x 16,65 */ .reviews__rating-num { line-height: 1.25rem; } /* okvir 20 */ .reviews--google, .reviews--facebook { column-gap: .625rem; } /* Kartica je stupac: Facebook redom ime / tekst / ocjena (predložak ime i ocjenu ispisuje zajedno u `.reviews__foot`, pa se podnožje rastvara), a podnožje Googlea i ocjena Facebooka stoje uz dno kartice. */ .reviews__item--google, .reviews__item--facebook { display: flex; flex-direction: column; } .reviews__item--facebook > .reviews__foot { display: contents; } .reviews__item--facebook .reviews__author { order: 1; } .reviews__item--facebook .reviews__text { order: 2; } .reviews__item--facebook .reviews__rating { order: 3; align-self: flex-end; } /* Telefon (`Mobile HP.pdf`, „Dicono di noi"): dugme stoji ODMAH ispod uvoda (uvod do ~7694, pilula 7710–7752) i lijevo (x 36), a ne centrirano iza svih kartica. Kartice ostaju ispod dugmeta (odluka klijenta). */ @media (max-width: 1023px) { .sec--v-cols3 > .sec__inner { display: flex; flex-direction: column; } /* Uvod -> pilula 25 (Mobile HP.pdf: zadnji red uvoda do 7690, pilula od 7715); 16 je davalo 20. */ .sec--v-cols3 > .sec__inner > .btn { order: 1; margin: 1.3125rem 0 0; } /* 21 */ .sec--v-cols3 > .sec__inner > .reviews-cols { order: 2; } /* Naslov -> uvod: u Mobile HP.pdf 26 od dna slova „Dicono di noi" do vrha prvog reda uvoda (7607 -> 7633). Opći razmak glave na telefonu (24) davao je 33: ispod slova naslova ostaje 5,5 px okvira reda, iznad slova uvoda 3,5. 26 - 5,5 - 3,5 = 17. */ .sec--v-cols3 .sec__head { gap: 1.0625rem; } /* 17 */ /* Na telefonu (≤767) je naslov .fs-38 25 px s korakom 35 (Mobile HP.pdf, „Dicono di noi" y 7581,5–7616,5; naslovnica to nosi i u poljima m_title_size / m_title_lh). Ispod slova je tada 8,75 px okvira reda umjesto 3,5, pa bi uz 17 od dna slova naslova do vrha slova uvoda bilo 30 umjesto 24 (7608 -> 7632). */ @media (max-width: 767px) { .sec--v-cols3 .sec__head { gap: .6875rem; } /* 11 */ } /* Ručni prelomi recenzije (Kristina Stojanovic) mjereni su na stupcu desktopa (364); na uskom stupcu bi ostavili siroče-redove („…tima.Nakon / dosta / Odgadjanja…"), pa se prelom ovdje čita kao razmak. */ .reviews__text { white-space: normal; } /* Ime u Google kartici je 13 px Regular kao na desktopu (layout-b.css); 16 / 600 je „Kristina Stojanovic" lomilo u dva reda uz zvjezdice. */ .reviews__item--google .reviews__author { font-size: .8125rem; font-weight: 400; } /* 13 */ /* Stupci se na uskom ekranu slažu jedan ispod drugog, pa natpis „RECENSIONI GOOGLE / FACEBOOK" pada odmah ispod zadnje kartice prethodnog stupca (0–1 px), a od svoje kartice je 13 — vizuelno je pripadao kartici IZNAD. Mobile HP.pdf ove blokove nema; natpis se odvaja od prethodnog stupca kao blok od bloka (32). */ .reviews-cols__col + .reviews-cols__col > .reviews-cols__label { margin-top: 2rem; } /* Dugme ispod kartica (vrpca, mreže): na širokom ekranu je `cta_gap` (35–55), ovdje je bilo 0 i pilula je ležala na zadnjoj kartici. Mobilnog PDF-a za te stranice nema; 32 kao razmak blokova iznad. */ .sec--testimonials:not(.sec--v-cols3) > .sec__inner > .btn { margin-top: 2rem; } /* Mreža 3 × 2 ponavlja recenzije po redu (`fill_rows`, predložak daje ponovljenim mjestima `reviews__item--kopija`). U jednom stupcu bi ista recenzija stajala tri puta zaredom, pa se kopije ne prikazuju. */ .reviews--ponovljeno > .reviews__item--kopija { display: none; } } /* Sekcija bez kartica na telefonu (polje `m_hide_items`, predložak daje omotaču `rv-m-bez-kartica`). Mobile HP u „Dicono di noi" crta samo naslov, uvod i dugme „Scopri tutte le recensioni"; ispod dugmeta odmah dolazi sljedeća sekcija. Kartice su se na telefonu slagale u jedan stupac (video, dvije Google, dvije Facebook) i sekcija je bila 1803 px visoka umjesto 241. */ @media (max-width: 767px) { .rv-m-bez-kartica > .reviews-cols, .rv-m-bez-kartica > .reviews { display: none; } } @media (min-width: 1024px) { /* Pomak iz polja sekcije (`cards_shift`); predložak stavlja `data-pomak` na ono što se pomiče (u tri stupca cijela sekcija, inače kartice). Pomiče se samo prikaz, pa ništa ispod ne mijenja mjesto. */ .sec--testimonials [data-pomak] { transform: translateX(var(--rv-pomak, 0)); } /* GLAVA I RAZMAK DO KARTICA. Tri stupca (naslovnica, Clinica, All on 4/6, Prima visita — sve četiri daju iste brojke, okviri slova iz pdfstil): uvod 6,2 px NIŽE od naslova (vrh naslova 38 px je 9 px iznad vrha retka, uvoda 0), natpisi stupaca 105,9 ispod uvoda, kartice 23,6 ispod sredine natpisa. Naslov se zato spušta 2,8 px u svom stupcu (glava ne raste, uvod je viši), a stupci kreću 64 ispod glave umjesto 32. Vrpca i mreže: po sekciji iz polja (`title_shift`, `cards_gap`), jer ih dizajn nema iste (Pazienti italiani 13,8 i 71,3; Testimonianze 12,1 / 17,1 / 20,6 od natpisa do kartica). Naslov bez uvoda ovdje nema donju marginu: s njom (20) su se margine spajale i razmak manji od 20 nije bio moguć — natpis „VIDEO TESTIMONIANZE" je stajao 8 px predaleko od kartica. */ .sec--testimonials > .sec__inner > .sec__title { margin-bottom: 0; } .sec--testimonials .sec__head > .sec__title { padding-top: var(--rv-naslov, 0); } .sec--v-cols3 .sec__head > .sec__title { padding-top: var(--rv-naslov, .175rem); } /* 2,8 */ .sec--testimonials > .sec__inner > .reviews-cols { margin-top: var(--rv-razmak, 4rem); } /* 64 */ .sec--testimonials > .sec__inner > .reviews { margin-top: var(--rv-razmak, 2rem); } /* „Non credete a noi, / guardate i loro sorrisi." (No Bone): 40 px s korakom 48 (5471 → 5519), ne 45 kao opća klasa `.fs-40`. Predložak klase velicine prebaci sa spana na sam naslov. */ .sec--testimonials > .sec__inner > h2.sec__title.fs-40 { line-height: 1.2; } /* Google. Lijeva uvlaka 29,5 ostaje iz `razmaci.css` (§ 11); desna je 21,3 do kraja „5.0", a stupac teksta zadržava svoju širinu 468,5 / 360,5 kroz desnu marginu teksta, jer su prelomi mjereni na njoj. */ .reviews__item--google { padding: 1.0125rem 1.33125rem .8rem 1.84375rem; min-height: 16.5625rem; } /* 16,2 21,3 12,8 29,5; 265 */ .reviews__item--google .reviews__text { margin: 0 .66875rem .75rem 0; } /* 10,7 */ .reviews__item--google .reviews__foot { margin-top: auto; align-items: center; } .reviews-cols__col--google .reviews__item:nth-child(n+2), .reviews--google .reviews__item:nth-child(n+4) { min-height: 9.9375rem; /* 159 */ padding-top: .5375rem; /* 8,6 */ padding-bottom: .49375rem; /* 7,9: sredina imena 18,8 iznad dna */ } .reviews-cols__col--google .reviews__item:nth-child(n+2) .reviews__rating, .reviews--google .reviews__item:nth-child(n+4) .reviews__rating { transform: translateY(-.6375rem); } /* 10,2: „5.0" 9,5 iznad imena */ /* Facebook: ime gore, tekst, ocjena sama dolje desno. */ .reviews__item--facebook { padding: 2.40625rem .675rem 2.28125rem 1.5625rem; min-height: 12.4375rem; } /* 38,5 10,8 36,5 25; 199 */ .reviews__item--facebook .reviews__author { line-height: 1.25rem; } .reviews__item--facebook .reviews__text { margin: 2.2rem 0 0; max-width: 22.75rem; } /* 35,2; 364 */ .reviews__item--facebook .reviews__rating { margin-top: auto; } .reviews-cols__col--facebook .reviews__item:nth-child(n+2), .reviews--facebook .reviews__item:nth-child(n+4) { padding-right: 1.175rem; /* 18,8 */ padding-bottom: .76875rem; /* 12,3 */ } .reviews-cols__col--facebook .reviews__item:nth-child(n+2) .reviews__text, .reviews--facebook .reviews__item:nth-child(n+4) .reviews__text { margin-top: .79375rem; } /* 12,7 */ /* Razmaci među karticama: Google 8 (4826 → 4834), Facebook 29 (4760 → 4789); u mreži Testimonianze isto, a stupci Facebooka su 418 široki s razmakom 16 (x 109 / 543 / 977). */ .reviews-cols__col--google .reviews--stack { gap: .5rem; } .reviews-cols__col--facebook .reviews--stack { gap: 1.8125rem; } .sec__inner > .reviews--google { row-gap: .5rem; } /* Mreža Google na Testimonianze (jedina stranica s tom varijantom): kartice 422 na x 113–534 / 545–966 / 967–1388 — razmak 10 pa 0 (treći stupac dodiruje drugi) i mreža završava na 1388, 10 px prije ruba kontejnera (1398). Jednak razmak 10 davao je treći stupac na 977–1398. Tragovi se zato zadaju kako ih dizajn crta (u omjeru, zbir 1286 = širina kontejnera, pa je kartica i dalje 422 i prelomi teksta ostaju), a kartica ide u svoj trag po mjestu u redu. Da li je dodir namjeran ili greška makete, pitanje je za Pragmu (izvještaj). */ .sec__inner > .reviews--google.reviews--ponovljeno { column-gap: 0; grid-template-columns: minmax(0, 422fr) minmax(0, 10fr) minmax(0, 422fr) minmax(0, 422fr) minmax(0, 10fr); } .sec__inner > .reviews--google.reviews--ponovljeno > .reviews__item:nth-child(3n+1) { grid-column: 1; } .sec__inner > .reviews--google.reviews--ponovljeno > .reviews__item:nth-child(3n+2) { grid-column: 3; } .sec__inner > .reviews--google.reviews--ponovljeno > .reviews__item:nth-child(3n) { grid-column: 4; } .sec__inner > .reviews--facebook { row-gap: 1.8125rem; column-gap: 1rem; } /* Dugme ispod kartica. Dizajn ga odmiče od najniže kartice: 40 na naslovnici i Prima visita, 41 na Clinica, 44 na All on 4/6, a na Testimonianze 39 / 35 / 55 (video / Google / Facebook). Bez razmaka se lijepilo za karticu (0–1 px). Mjera po sekciji je polje `cta_gap`. */ .sec--testimonials > .sec__inner > .btn { margin-top: var(--sec-cta-gap, 2.5rem); } /* Pilula stalne širine (polje `cta_w`; Testimonianze 266): natpis 28,9 od lijevog ruba, krug uz desni rub. Pomak od sredine je polje `cta_shift` (Testimonianze -3,5: pilula je na sredini mreže kartica). */ /* Razmak natpis → krug je ovdje ono što preostane (`space-between` iz `.btn`), ne 43,2 male obitelji: uz „Leggi tutte le recensioni" (187,4) bi 28,9 + 187,4 + 43,2 + 23 + 5,4 = 287,9 izgurao krug 16 px van pilule od 266. Krug je tako na 886 − 5,4 − 23 = 857,6 kao u PDF-u. */ .sec--testimonials > .sec__inner[style*="--rv-cta-w"] > .btn { width: var(--rv-cta-w); padding-left: 1.80625rem; /* 28,9 */ --btn-gap: 0px; } .sec--testimonials > .sec__inner[style*="--rv-cta-x"] > .btn { left: var(--rv-cta-x); } /* Natpis „VIDEO TESTIMONIANZE" na Testimonianze (naslov sekcije vrpce, lijevo, bez uvoda) je na x 120 kao i natpis video stupca u tri stupca, a „RECENSIONI GOOGLE / FACEBOOK" na 113. */ .sec--v-video.sec--ta-left > .sec__inner > .sec__title { padding-left: .4375rem; } /* Natpis „VIDEO TESTIMONIANZE" je u dizajnu na x 120, 7 px uvučen prema natpisima Google (437) i Facebook (977), koji stoje na rubu kartice. */ .reviews-cols__col--video .reviews-cols__label { padding-left: .4375rem; } /* Natpis „RECENSIONI FACEBOOK" je na x 977, a kartice ispod njega na 981 (sve četiri stranice s tri stupca). Stupac zato počinje na 977 — razmak od Google stupca je 10 kao i od video stupca — a kartice su u njemu uvučene 4 px. */ .reviews-cols { grid-template-columns: minmax(0, 314fr) minmax(0, 10fr) minmax(0, 530fr) minmax(0, 10fr) minmax(0, 422fr); } .reviews-cols__col--facebook > .reviews--stack { padding-left: .25rem; } } /* ---------- kolone s podlogom ---------- 03_Prezzi.pdf i 05_Clinica_Dott Darko e team.pdf: cetiri plohe sirine 312-316 na x 113 / 435 / 755 / 1083 — korak 323, dakle razmak 10. Sa razmakom od 14 cetvrta kolona je stajala 8 px predaleko. Dvije i tri kolone u dizajnu imaju korak 650 odnosno 432, sto se s razmakom od 14 poklapa na 3 px, pa se ne diraju. */ .cols--4.cols--cards { column-gap: .625rem; } /* ---------- kolona koja je FOTOGRAFIJA ---------- U dizajnu kolona nije uvijek tekst. Stranica Odontoiatria generale, sekcija „Cura canalare ed endodonzia": prva od tri kolone je fotografija 421,9 x 501 na x 113, a druge dvije su kartice 420,7 x 544,1 na x 546,3 i 977. Repeater je imao samo ikonu, naslov i tekst, pa je na tom mjestu stajala PRAZNA kartica, a fotografija nije imala gdje — polje i ispis su dodani uz ovu rundu (`columns.items.image`). Fotografija je niza od kartica pored sebe, pa se veze uz VRH reda; bez `align-self` bi je mreza razvukla na 544 i odrezala 43 px motiva. */ .cols__item--photo { align-self: start; } /* Cetiri klase namjerno: podloga i razmak kartice dolaze iz pravila s TRI (`.cols--3.cols--cards .cols__item`), i to iz dva fajla i dva media upita. S jednakom tezinom odlucivao bi redoslijed, pa je fotografija jednom stajala uvucena 21 px i siroka 380,7 umjesto 422. */ .cols.cols--cards .cols__item.cols__item--photo { min-height: 0; padding: 0; border-radius: 0; background: none; } .cols__img { display: block; width: 100%; height: auto; aspect-ratio: 422 / 501; /* Ugao 10 px: PDF-ovi Gengivectomia i Odontoiatria generale crtaju luk od 10 px (odmak tinte po redovima 6,4,3,2,1,1), tema je crtala 20. */ border-radius: .625rem; object-fit: cover; } /* ---------- traka od DVIJE fotografije ---------- Na tri stranice (Digital Smile Design, Invisalign, Clear Correct) traka sekcije nije jedna fotografija preko cijele sirine nego dvije jedna uz drugu na istom y: 638 + 10 + 638 = 1286, tocno sirina kontejnera. Druga fotografija je od osme runde stajala u bazi (`band_image_2`, privitci 1041 / 1043 / 1045), a nijedan predlozak je nije crtao. Na uskom ekranu se slazu jedna ispod druge, svaka sa svojim razmakom iz `.sec__band`. */ .sec__bands { display: block; } /* ---------- znak na kartici s pitanjem ---------- 00_Homepage: kartica 314 x 151 na x 437 / 761 / 1085 (redovi y 877 i 1041), znak 29 x 29 na x 705 / 1029 / 1353 i y 989 odnosno 1153 — dakle 17 px od desnog ruba kartice i 10 px od njenog dna. Predlozak znak nije imao, pa ga nije bilo ni na jednoj od sest kartica. Krug sa strelicom je isti onaj koji nosi dugme i red na hub stranici (`.hub-row__arrow`), pa se crta istom putanjom iz PDF-a. */ .qcards__arrow { display: block; width: 1.8125rem; height: 1.8125rem; /* 29 */ margin-top: .625rem; border-radius: 999px; background-color: var(--c-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 6'%3E%3Cpath d='M0 3h13M9.75 0 13 3l-3.25 3' fill='none' stroke='%23463f3b' stroke-width='1'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: .8125rem .375rem; /* 13 x 6 */ /* Strelica iz PDF-a (Clinica, Soluzioni, Homepage): drška 13 px na 15,0 px ispod vrha kruga, vrh 3,25 x 6 od 12,0 do 18,0. Slika 13 x 6 zato stoji 12 px od vrha kruga. S `center` je stajala na 11,5 px, a Chrome tu polovinu zaokružuje prema položaju kruga: na Clinici (krug 651,98) na 11, pa je drška bila 1 px previsoko i razmazana (665/666 naspram 667). 11,75 a ne 12: na krugu na cijelom pikselu je isto (Chrome crta na 12), a krug koji tekst reda spusti za pola piksela (Soluzioni 928,5 naspram 928) ne povuče dršku cijeli piksel ispod PDF-a. */ background-position: 50% .734375rem; /* 8 px lijevo, 11,75 od vrha */ } /* Kad je u polje upisana slika, ona zamjenjuje i krug i strelicu. */ .qcards__arrow--img { background-image: none; background-color: transparent; } .qcards__arrow--img img { display: block; width: 100%; height: 100%; object-fit: contain; } /* M04: kartica je okvir razvučenog linka pitanja (sections.css), pa je `relative` na SVIM širinama — ranije samo od 1024 px, za znak. Na telefonu je znak skriven i ništa drugo u kartici nije pozicionirano, pa se izgled ne mijenja. */ .qcards__item { position: relative; } /* ---------- znak umjesto fotografije u kartici rjesenja ---------- Kartica bez fotografije u dizajnu nosi znak: Pazienti italiani 61 x 58, Prima visita 79 x 59, naslovnica 120 x 117. Polje `icon` je postojalo i sijac ga je napunio na tri kartice, ali ga predlozak nije crtao — pa je umjesto znaka stajao prazan okvir slike visine 275 px. */ .scards__icon { display: flex; align-items: flex-end; } /* Mjera znaka dolazi iz sekcije, ne iz CSS-a: jedna vrijednost ne pokriva cetiri razlicite ikone (Pazienti parking 87,2 x 34,6 i avion 61,3 x 57,7, Prima visita 79 x 59, naslovnica 120 x 117). Dok je stajala samo najveca visina, niska i siroka ikona parkinga je ispadala 145 x 58 — 1,68 puta preveliku. Prazno polje znaci „ostaje mjera iz CSS-a". */ .scards__icon img { width: auto; height: auto; max-width: var(--scards-ikona-w, 100%); max-height: var(--scards-ikona-h, 3.625rem); object-fit: contain; } /* ---------- nacini placanja: kartica ispod sekcije ---------- 03_Prezzi, sekcija 4: cijeli blok lezi na ZAOBLJENOJ kartici 1286 x 625 (x 113-1399, y 1930-2555) s vodoravnim gradijentom #0c0d0d -> #083544, a kontejner sekcije je 1070 (x 221-1291). Kartica je dakle 108 px sira sa svake strane od sadrzaja koji nosi; `bg_color` to ne moze, jer oboji traku preko cijele sirine stranice. Sekcija je zbog toga stajala na ravnoj crnoj. Kartica se crta PLOHOM IZA SADRZAJA, ne omotacem s razmacima: cim bi imala vlastite razmake, sav okomiti raspored ispod nje bi se pomjerio za 79 px i svaka vec izmjerena mjera na stranici bi se razisla. Ovako u toku stranice ne mijenja nista — crta se samo boja. `z-index: 0` na kartici je nuzan: bez njega ploha s `z-index: -1` propada iza pozadine sekcije i nestane cim sekcija dobije `bg_color`. */ /* ISPRAVKA (kontrola 23. 9., PR-01 i PR-12): „tok stranice ostaje isti" je bio upravo kvar. Ploha je virila 28 px iznad i 36 px ispod sekcije, a susjedi su razmak racunali od ruba sekcije — pa je naslov „Hai già un preventivo?" stajao 7 px ispod kartice umjesto 52, a kartica 64 px ispod zadnjeg reda cjenovnika umjesto 93. Sada kartica rezervira svoj prostor marginom iste velicine kao sto ploha viri, pa sekcija zavrsava tacno na dnu kartice i pocinje na njenom vrhu. */ .pay-card { position: relative; z-index: 0; margin-top: var(--pay-card-pt, 1.75rem); margin-bottom: var(--pay-card-pb, 2.25rem); } .pay-card::before { content: ""; position: absolute; z-index: -1; /* Razmaci su mjereni od ruba kartice do OKVIRA REDA, ne do slova: dizajn daje 39,3 px do vrha naslova od 24 px i 40,1 px ispod zadnjeg retka od 14 px, a okvir reda je iznad slova visi 11 px odnosno ispod 4 px. */ inset: calc(-1 * var(--pay-card-pt, 1.75rem)) /* 28 */ calc(-1 * var(--pay-bleed, 0px)) calc(-1 * var(--pay-card-pb, 2.25rem)); /* 36 */ border-radius: .6875rem; /* 11 — PDF: rub stize do x 113 12 px ispod vrha */ /* „Sfondo delle schede" sekcije (--sec-card-bg) zamjenjuje preljev. */ background: var(--sec-card-bg, linear-gradient(to right, var(--card-from, #0c0d0d), var(--card-to, #083544))); } /* Bankovni podaci UZ nacin placanja nisu plocica nego obican tekst: u dizajnu stoje odmah ispod odlomka BONIFICO BANCARIO (y 2209,3), 14 px, bez podloge i bez okvira. Tema ih je crtala kao sivu plocicu pune sirine ispod svega. */ .pay__iban--uz { margin-top: 1.375rem; /* 22 (bilo 16; PR-14: od „i tempi di accredito" do „Coordinate bancarie" dizajn 29, sajt 24). Stari racun: u dizajnu je razmak medu slovima 24,4, a okvir reda ga vec nosi 8 (4 ispod odlomka, 4 iznad prvog retka podataka) */ padding: 0; border-radius: 0; background: none; font-size: .875rem; /* 14 */ line-height: 1.5714; } /* Redci bankovnih podataka teku bez praznog reda; jedini prazan red u dizajnu je ISPRED zavrsnog teksta ("Per facilitare l'identificazione..."), koji je treci odlomak polja. Dva zavrsna odlomka su opet bez razmaka — mjereno je svih devet redaka, korak 22 px bez izuzetka. */ .pay__iban--uz p { margin: 0; } .pay__iban--uz p:nth-child(3) { margin-top: 1.375rem; } /* Tezine iz PDF-a: oznake („Coordinate bancarie", „IBAN:") Bold 700, vrijednosti i zavrsni odlomci Regular 400. Bez ovoga je blok nasljedjivao 300, a `strong` kao „bolder" davao 400. */ .pay__iban--uz { font-weight: 400; } .pay__iban--uz strong { font-weight: 700; } /* „info@smile.hr" je u dizajnu podvucen — poveznica, bijela. */ .pay__iban--uz a { color: inherit; text-decoration: underline; text-underline-offset: .15em; } /* Natpis nacina placanja je u PDF-u Poppins Light, ne Medium. Velicinu je (16, ne 18) vec popravio Tok 4 u `layout-b.css`; ostala je tezina. */ .pay__title { font-weight: var(--fw-light, 300); } /* Natpis nacina placanja stoji uz svoj tekst: u PDF-u je od vrha natpisa do vrha teksta 23-24 px (sajt je imao 29-30), a razmak od teksta iznad do sljedeceg natpisa je za toliko veci. Isti natpis se spusta za 6 px (gornja margina 12 -> 18, donja 8 -> 2) — korak stavki ostaje isti. */ .pay-card .pay__title { margin: 1.125rem 0 .125rem; } /* Naslov kartice („Modalità di pagamento" 24 px + uvod 14 px, dva retka jednog h2 od 40 px): u PDF-u je od vrha slova naslova do vrha slova uvoda 59 px (1969,3 -> 2028,3), a redak h2 od 45 px daje 56. Redak 47,5 daje 59; za onoliko koliko se naslov time produži (2 × 2,5), manji je razmak do stupaca (32 -> 27), pa stupci ostaju gdje jesu. */ @media (min-width: 1024px) { .sec--payments .pay-card > .sec__title { line-height: 2.96875rem; } /* 47,5 */ .sec--payments .pay-card > .sec__title + .pay { margin-top: 1.6875rem; } /* 27 */ } /* Stupac nacina placanja je popis, pa mu se na svakoj sirini skida uvlaka i tacka; raspored u dva stupca je nize, iza praga od 1024 px. */ .pay__col { margin: 0; padding: 0; list-style: none; } /* Kartica plaćanja na telefonu i tabletu (FT-N2, FT-N3). Na desktopu kartica izlazi 108 px izvan kontejnera (`--pay-bleed`, ispod pod @media min-width 1024), pa tekst ima unutrašnju uvlaku. Ispod 1024 bleed je 0 i kartica je tačno širina kontejnera — tekst je doticao lijevi i desni rub gradijenta. Ovdje kartica ostaje u kontejneru, a sadržaj dobija uvlaku od 20 px unutar nje. Uvod („Prima dell'inizio delle cure…") je drugi odlomak polja naslova, pa je `span.fs-14` unutar h2 i nasljeđivao je prored h2 od 33,75 px: tri reda s korakom 35 px. Na desktopu stoji u jednom retku i taj prored mu je mjera (odmak od naslova 59 px), pa se dira samo ispod 1024: uvod postaje vlastiti blok s proredom 22 px kao i ostali tekst od 14 px. */ /* FTR3-N1: ispod 1024 se dva stupca slažu jedan ispod drugog, a svaki novi blok već nosi svoj razmak (gornja margina natpisa 18 px). Razmak mreže `.pay` (24 px) se na to dodavao, pa je BONIFICO BANCARIO stajao 42 px ispod teksta iznad umjesto 18 kao svi ostali blokovi. */ @media (max-width: 1023px) { .pay--kolone { row-gap: 0; } .pay-card { padding-inline: 1.25rem; } .sec--payments .pay-card > .sec__title .fs-14 { display: block; margin-top: .75rem; line-height: 1.375rem; /* 22 */ } } /* ---------- red hub stranice: slika koja se NE reze ---------- 0_Soluzioni, prvi red: slika nije fotografija nego crtez proizvoda na crnom, u dizajnu 584,4 x 312 uz DESNI rub reda (x 274,6-859). Lijevih 161 px reda ostaje cista crna i ondje stoji oznaka grupe. Tema je i njega crtala s `cover`, pa se slika uvecala 1,28 puta, presla preko oznake i krom je usao pod slova ("Implantologia avanzata"). */ .hub-row__img--uklopi { object-fit: contain; object-position: 100% 50%; } /* Crtež je PROZIRNI PNG (podloga PDF-a (10,9,9) pretvorena u alfu): JPG s upečenom podlogom (9,9,9) se na telefonu, gdje je podloga #000, vidio kao zaobljen tamnosivi pravougaonik (IH-N09). Slika je sadržaj, u bazi. */ /* ========================================================================== Sirok ekran. Sve odavde nadjacava mobilni blok iz `sections.css`, pa mora stajati iza istog praga od 1024 px kao i on. ========================================================================== */ @media (min-width: 1024px) { /* Tri clana tima u redu, ne cetiri (mjera gore). Na uskom ekranu ostaju dva iz `sections.css`. Stupac je 411 px, koliko i fotografija u dizajnu — ne udio kontejnera. Sa udjelima je stupac ispadao 415,3 px, dakle 4,3 px siri od svake fotografije u oba PDF-a. Mreza tada ne popunjava kontejner (3 x 411 + 2 x 21 = 1275 u 1286) i to je tako i u dizajnu: 05_Clinica team fotografije na x 113 / 545 / 977 — blok uz lijevi rub, razmak 21; 00_Homepage fotografije na x 120 / 551 / 981 — blok SREDINOM kontejnera (uvucen 7 px s obje strane), razmak 20. Zato mreza tima na stranici tima ostaje uz lijevi rub, a kartice na naslovnici se centriraju. */ .team--grid { grid-template-columns: repeat(3, 25.6875rem); column-gap: 1.3125rem; } .team--cards { grid-template-columns: repeat(3, 25.6875rem); justify-content: center; } /* Zvanje i ime PREKO fotografije, dolje lijevo. Mjere su iste u oba PDF-a racunato od donjeg ruba fotografije: zvanje pocinje 85 px iznad njega, ime 60 px, uvlaka 25 px. Ime je 22 px (red 28), zvanje 16 px (red 20), razmak izmedu njih 5 px — blok je dakle visok 53 px i sjedi ~31 px od dna (tintom: 31 na stranici tima, 29 na naslovnici — vidi ispod). Predlozak ih zato ispisuje unutar `.team__photo` (vidi `team.php`). Na telefonu ostaju ispod fotografije, isto kao `.services__title`. */ /* Preko fotografije je natpis samo na karticama naslovnice (`team--cards`). Mreza stranice tima ga od Modifiche_01 (Pragma, 30. 9. 2026, slika 23: „Keep the names and roles below the photos") ima ISPOD fotografije: vrh reda zvanja 20 px ispod nje (vrh verzala ~24,5, kao u primjeru), uvlaka 25 kao i do sada. */ .team--cards .team__over { position: absolute; z-index: 1; left: 1.5625rem; right: 1.5625rem; bottom: 1.9375rem; /* 31 */ } .team--grid .team__over { position: static; padding: 1.25rem 1.5625rem 0; } /* 20 / 25 */ .team__over .team__role { margin: 0; } .team__over .team__name { margin: .3125rem 0 0; } /* Natpis leži PREKO fotografije, pa je bijel bez obzira na temu sekcije: uz „Chiara" je tema obarala zvanje i ime u crno preko fotografije. Tamna tema daje istu bijelu, pa se postojeći izgled ne mijenja. U mrezi je natpis ispod fotografije, na pozadini sekcije, pa prati temu. */ .sec--team.sec--light .team--cards .team__over { color: var(--c-white); } /* Kartice naslovnice (HP-K01): izmjereno tintom uz 00_Homepage.pdf, ime je sa 32 od dna bilo 3 px, a zvanje 2 px previsoko; razmak zvanje -> ime je u tom PDF-u 1 px veci nego na stranici tima. Dva PDF-a se tu razlikuju za ~1 px (stranica tima: okvir imena 60,3 iznad dna fotografije, naslovnica 59,5), pa svaka varijanta ima svoju mjeru. */ .team--cards .team__over { bottom: 1.8125rem; } /* 29 */ .team--cards .team__over .team__name { margin-top: .375rem; } /* 6 */ /* Preljev preko fotografije ima SAMO prva kartica naslovnice (FT-R01). 00_Homepage.pdf nad fotografijom dr. Slovse (119,9..531,2 x 5237,2..5745,4) crta crni sloj 418 x 428 na x 117, y 5322 — i nijedan nad druge dvije. Mjereno omjerom dizajn / fotografija po redovima (x 125..525): 1,00 do 5322, pa linearno 0,96 / 0,86 / 0,78 / 0,67 / 0,58 / 0,54 na 5360 / 5440 / 5520 / 5600 / 5680 / 5720; isti omjer na sva tri kanala, dakle crno s prozirnoscu 0 -> 0,47 preko 428 px. Na dnu fotografije (508 px) to je 0,465; pocetak je 84,8 px ispod vrha (16,7 %). Rialda i Eduardo su u pikselu isti kao fotografija (omjer 1,00-1,01), pa preljev ide po kartici (polje `shade`), ne svima: ranije je bio na sve tri i zatamnjivao ih do (28,37,49) gdje dizajn ima (90,119,157). */ .team__item--sjena .team__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: .8125rem; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 16.7%, rgba(0, 0, 0, .465) 100%); } /* Natpis dr. Slovse na naslovnici je 13 px, prored 13, tri reda (y 5634,6 / 5647,6 / 5660,6). Velicinu nosi `.fs-13` u sadrzaju natpisa; roditeljski `

` bi svojim proredom od 20 px (strut) razvukao svaki red, pa mu se prored gasi. Ime ostaje gdje je (poravnato odozdo), a razmak natpis -> ime je u dizajnu 10,7 umjesto 5: dno zadnjeg reda natpisa 5676,2, vrh reda imena 5686,9. Margina natpisa i imena se sklapaju (veca pobjeduje), pa ovdje stoji cijelih 10,7, ne dodatak na 5. */ .team__over .team__role:has(> span.fs-13) { line-height: 0; margin-bottom: .73125rem; } /* 10,7 + 1 (HP-K01) */ /* Razmak traka glave -> kartice na naslovnici. Dizajn: vrh reda naslova 5135,6, kartice 5237 — 101,4. Glava je visoka koliko uvod u dva reda (2 x 22,4 = 44,8), pa kartice idu 56,6 ispod nje; tema je davala 24. */ .team--cards { margin-top: 3.5375rem; } /* 56,6 */ /* Pilula ispod kartica: 622..889 x 5783..5825 — sirina 268 nacrtana rucno, natpis 16 Light od x 685,4 (uvlaka 63,4), krug uz desni rub. Od dna kartica (5745) do vrha pilule 38 px; tema je imala 0, pa je pilula dodirivala kartice. */ .team__cta.btn--lg { min-width: 16.75rem; /* 268 */ padding-left: 3.9625rem; /* 63,4 */ margin-top: calc(2.375rem + var(--sec-cta-gap, 0px)); /* 38 */ } /* Mreza stranice tima (05_Clinica - Dott Darko e team.pdf): naslov grupe (vrh slova) -> fotografije 41 (sajt 47) dno fotografija -> naslov sljedece grupe 74 (sajt 53) red -> red unutar grupe (ASSISTENZA) 19 (sajt 32) Izmedju PROTESI i ODONTOIATRIA dizajn ima 90 umjesto 74 (TEAM-06). Razmak je zato mjera STRANICE: polje sekcije `group_gaps` („74, 90, 74") ga daje svakoj grupi kao `--team-group-gap`; bez polja 74. Margina je 5 manja, jer se razmak u dizajnu mjeri do vrha slova naslova grupe. */ .team__group + .team__group { margin-top: calc(var(--team-group-gap, 4.625rem) - .375rem); } /* 74 - 6 */ /* Naslov grupe -> fotografije se u PDF-u NE crta isto u svim grupama: od vrha okvira slova naslova (pdfstil) do vrha fotografija je 49,2 / 48,8 / 44,8 / 48,8 (ODONTOIATRIA je 4 px blize). Zato mjera ide po grupi, iz polja sekcije `title_gaps` (`--team-title-gap`); bez polja 49. Od toga se oduzima 29,15 = poluproreda 1,65 + red naslova 27,5, jer margina pocinje ispod reda, a mjera iz PDF-a od vrha okvira slova. Prije je bila jedna margina od 18 za sve (sajt 47,15: kartice 2 px previsoko, TEAM-K01). Korak redova u grupi ASSISTENZA je 19,7 (4013,41 -> 4033,11). Razmak grupa: 74 - 6 daje dno -> vrh okvira slova 66,35 / 82,35 (dizajn 66,26 / 82,49 / 66,49). */ /* Korak redova i visina fotografije (TEAM-07): u PDF-u su fotografije 281,67 visoke (izvor 411 x 281,67 na x 543 / 550,5 / 977), a drugi red ASSISTENZA pocinje na 4032,74, 19,33 ispod dna prvog (4013,41). Mjera 19,7 je bila uzeta s lijevog stupca, jedinog koji je u PDF-u na 4033,11; druga dva (i rub koji se vidi preko cijelog reda) su na 4032,74. Sa 281,6 i 19,7 je red bio 0,4 px visi, pa se na rasteru vidio kao 21 umjesto 20. Omjer fotografije (411 / 281,67) je na vrhu fajla. */ /* Modifiche_01: s natpisom ispod fotografije red je visi, pa je razmak od reda imena do sljedece fotografije 40 px (bio 19,33 izmedju dvije fotografije). */ .team--grid { margin-top: calc(var(--team-title-gap, 3.0625rem) - 1.821875rem); row-gap: 2.5rem; } /* 49 - 29,15 / 40 */ /* Srednji stupac po redu (polje `mid_dx`, predlozak daje `--team-mid-dx` samo srednjoj kartici reda): PDF ga crta na 543 ili 550,5, mreza na 545. Pomjera se samo kartica, sirina i red ostaju (FT-R05). */ .team--grid > .team__item[style*="--team-mid-dx"] { position: relative; left: var(--team-mid-dx); } /* Blog: mreza zavrsava na 1075, stupac kategorija pocinje na x 1193 i sirok je 206 — razmak izmedu njih je 118 px, ne 36. Zbir: 962 + 118 + 206 = 1286. */ .blog--with-side { grid-template-columns: minmax(0, 1fr) 12.875rem; column-gap: 7.375rem; } /* Blog, mjere iz `06_Blog.pdf` (vrhovi slova iz pdfstil): fotografija 222,7; naslov kartice 549,2 — 14,2 ispod fotografije; uvod 32 ispod zadnjeg reda naslova u 1. i 3. stupcu (30 u 2.) „Categorie" 236,2 (13,5 ispod vrha fotografija), „Tutte le categorie" 301,2 (65 niže) stupac kategorija širok 182: „Odontoiatria generale" (180) stane, „Ortodonzia e allineatori" (184) ne — prelomi „Implantologia / avanzata", „Odontoiatria generale / e prevenzione" redovi kartica: vrhovi fotografija 222,7 / 728,7 / 1249,7 / 1770,7, dakle korak 506 pa dvaput 521 — dizajn prvi razmak crta 15 px uži. */ .blog__title { margin: .9375rem 0 .6875rem; } /* 15 / 11 */ .blog__side-title { margin: .9375rem 0 2.875rem; } /* 15 / 46 */ .blog__cats { max-width: 11.375rem; } /* 182 */ .blog__grid { row-gap: 1.125rem; } /* 18 */ .blog__grid--3 > .blog__item:nth-child(n+7) { padding-top: .9375rem; } /* 15 */ /* Aktivna stavka podvučena tankom linijom 1 px ispod osnovne linije. */ .blog__cats .is-active > a, .blog__cats .current-cat > a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 1px; } /* VIDEO VRPCA JE OTISLA ODAVDE — tri pravila su uklonjena, ne prebacena. Do izmjene u `testimonials.php` video kartica se crtala kroz `smile_review_card()` i nosila `.reviews__poster` / `.reviews__video`; sada je crta `smile_video_card()` s klasama `.vcard*`, pa su dva pravila visine postera prestala pogadati ijedan element. Broj stupaca je isto tako presao u `razmaci.css` (`.sec__inner > .reviews--video.vstrip--N`), gdje se vise ne drzi fiksne cetiri nego broja kartica koje dizajn stvarno ima — cetiri na Testimonianze, sest na dvije landing stranice. Ostaviti staro pravilo znacilo bi cuvati zamku koja bi, cim selektor opet prevagne, natjerala sest kartica u cetiri stupca. */ /* ---------- kolone: unutrasnji razmak ovisi o broju stupaca ---------- `sections.css` drzi jedan razmak (38 / 65) i najmanju visinu 276 za SVE kartice kolona. Ta je mjera izvucena iz kartice SA DVA STUPCA (635 x 276), pa na uzim karticama trosi vecinu sirine: na landingu All on 4/6 kartica je 264,7 px siroka, a 130 px odlazi na razmak — tekstu ostaje 134,7. Mjere iz PDF-ova, po broju stupaca: 2 stupca 01_Clinica: kartica 634,5 x 249 na x 113 / 762,6 (razmak 15,1); naslov pocinje na x 177,8 -> bocni razmak 64,8; gornji 32,3, donji 32,5. 3 stupca 02_Landing All on 4-6: kartica 278 x 227 na x 542 / 829 / 1114 (razmak 9); tekst na x 1135 od kartice 1114 -> bocni 21; gornji 19,7. 4 stupca 01_Clinica: kartica 314 x 151 na x 113 / 435 / 755 / 1083 (razmak 10); tekst na x 778 od kartice 755 -> bocni 23; gornji 11,7, donji 11,5. Najmanja visina se gasi: dizajn kartice cetiri stupca visok je 151 px (01_Clinica) odnosno 219 px (03_Prezzi), a tema ih je obje crtala 276. */ /* Broj stupaca ne odreduje razmake sam. Kartica od cetiri stupca je na 01_Clinica visoka 151 px (gornji 11,7, naslov-tekst 7,4, bocni 23), a na 03_Prezzi 219 px (gornji 15,7, naslov-tekst 29,9, bocni 42 — uzi tekst ide u pet redaka umjesto cetiri). Jedna vrijednost ne moze oboje: s mjerom 01_Clinice kartica na Prezzi je bila 171,9 px umjesto 219. Zato mjera dolazi iz sekcije (`card_pad_*`, `card_gap`), a broj iza zareza u `var()` je i dalje ono sto je mjereno za vecinu stranica. */ /* `--ci-*` su razmaci JEDNE kartice (polja stavke), `--cols-*` razmaci sekcije; prazno polje ne ispisuje varijablu, pa vrijedi sljedeca u lancu. Desni razmak (`--cols-pad-r`) je zaseban jer ga dizajn zna imati drukcijeg od lijevog. `--cols-card-h` je visina plohe iz dizajna. */ .cols--cards .cols__item { min-height: var(--ci-h, var(--cols-card-h, 0)); padding-top: var(--ci-pt, var(--cols-pad-t, 2rem)); padding-bottom: var(--cols-pad-b, 2rem); } .cols--2.cols--cards { column-gap: .9375rem; } .cols--2.cols--cards .cols__item { padding-left: var(--ci-pl, var(--cols-pad-x, 4.0625rem)); padding-right: var(--ci-pr, var(--cols-pad-r, var(--cols-pad-x, 4.0625rem))); } .cols--3.cols--cards { column-gap: .5625rem; } .cols--3.cols--cards .cols__item { padding: var(--ci-pt, var(--cols-pad-t, 1.25rem)) var(--ci-pr, var(--cols-pad-r, var(--cols-pad-x, 1.3125rem))) var(--cols-pad-b, 1.25rem) var(--ci-pl, var(--cols-pad-x, 1.3125rem)); } .cols--4.cols--cards .cols__item { padding: var(--ci-pt, var(--cols-pad-t, .75rem)) var(--ci-pr, var(--cols-pad-r, var(--cols-pad-x, 1.4375rem))) var(--cols-pad-b, .75rem) var(--ci-pl, var(--cols-pad-x, 1.4375rem)); } /* Razmak naslov-tekst u kartici. Isto pravilo, isti razlog. */ .cols--cards .cols__title { margin-bottom: var(--ci-gap, var(--cols-gap, .5rem)); } /* Fotografija u koloni je u dizajnu 422 x 501; iznad 1024 px se drzi te visine, ispod ostaje omjer i puna sirina stupca. Kad je fotografija u dizajnu niza (Gengivectomia: 422 x 363, u ravni s karticama), visina dolazi iz polja stavke `h` (--ci-h). */ .cols__img { height: var(--ci-h, 31.3125rem); aspect-ratio: auto; } /* Traka od dvije fotografije: 638 + 10 + 638 = 1286. */ .sec__bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .625rem; } /* Znak kartice s pitanjem: 17 px od desnog ruba, 10 px od dna (mjera gore). Ispod 1024 px ostaje u toku, ispod natpisa. `position: relative` kartice je gore, uz crtež znaka, za sve širine (M04). */ .qcards__arrow { position: absolute; right: 1.0625rem; bottom: .625rem; margin-top: 0; } /* Naslov kartice od 24: u dizajnu je 25 px s proredom 26 (blok od dva retka visok je 61 px = 26 + 1,4 x 25). Tema je imala 24 px s proredom 30, pa je svaki dvoredni naslov bio 8 px previsok. Naslov nosi i klasu uredivaca (`fs-24`), bilo na sebi bilo na spanu — zato su navedena oba mjesta. */ .cols--t24 .cols__title, .cols--t24 .cols__title span[class*="fs-"] { font-size: 1.5625rem; line-height: 1.04; } /* Razmak stupaca kolona BEZ podloge. Dizajn ga ima 10 px, tema 40: 01_Soluzioni Invisalign — dva stupca u kontejneru 1070 na x 221 i 761, sirina 530: 2 x 530 + 10 = 1070. 01_Clinica — cetiri stupca u 1286 na x 113 / 437 / 761 / 1085, korak 323: 4 x 313 + 3 x 11 = 1285. Uspravni razmak (40) ostaje: u dizajnu je red od 41,5 px. */ .cols--2:not(.cols--cards), .cols--3:not(.cols--cards), .cols--4:not(.cols--cards) { column-gap: .625rem; } /* ---------- info kartice ---------- 03_Soluzioni Apicectomia ima obje sirine: kontejner 1070: kartica 528,7 x 359 na x 220,9 / 762,3 — razmak 12,7; naslov na x 263,9 -> bocni 43; gornji 37,2. kontejner 1286: kartica 633,9 x 269 na x 114,3 / 763,2 — razmak 15, red 18; naslov na x 179 -> bocni 64,7; gornji 38,1, donji 23. Tema je na oba mjesta imala razmak 20 i unutrasnji 28. */ .sec__inner--1070 > .info-cards { column-gap: var(--ic-gx, .8125rem); row-gap: var(--ic-gy, 1.125rem); } .sec__inner--1070 > .info-cards .info-cards__item { padding: var(--ic-pt, 2.3125rem) var(--ic-pr, 2.6875rem) var(--ic-pb, 2.3125rem) 2.6875rem; } .sec__inner--1286 > .info-cards { column-gap: var(--ic-gx, .9375rem); row-gap: var(--ic-gy, 1.125rem); } .sec__inner--1286 > .info-cards .info-cards__item { padding: var(--ic-pt, 2.375rem) var(--ic-pr, 4rem) var(--ic-pb, 1.4375rem) 4rem; } /* Razmak naslov sekcije -> kartice i naslov kartice -> tekst se mjere po sekciji (polja `cards_top`, `card_title_gap`, `card_pad_t`). Naslov kartice bez ikone nema gornju marginu: vrh naslova nosi uvlaka kartice, da jedna mjera ne ovisi o dvije. */ .sec__inner > .info-cards { margin-top: var(--ic-top, 2rem); } /* Najmanja visina kartice (`card_min_h`): na Apicectomiji su oba reda visoka 269 iako drugi ima red teksta manje. Samo na širini dizajna. */ .info-cards .info-cards__item { min-height: var(--ic-minh, 0px); } .info-cards .info-cards__title { margin: 0 0 var(--ic-tg, .5rem); } .info-cards .info-cards__icon + .info-cards__title { margin-top: .75rem; } /* ---------- mreza usluga ---------- 00_Homepage: fotografija 626 x 313 u dva stupca na x 113 i 761 — korak 648, dakle razmak 22, ne 24. Red natpisa je visok 67 px i pocinje 11 px ispod fotografije. Ovdje je ranije stajalo i pravilo koje je pilulu tjeralo u 67 px visine: pismo 16 px, prored 1,21875 i uspravni razmak 4 px, „2 x 29,5 + 8 = 67". To je bio racun za dva reda pilula, a dizajn ondje uopste nema pilule nego jednu plohu s gradijentom (mjereno po pikselima, obrazlozenje uz `.services__links` u sections.css). Pravilo je zato uklonjeno, a ne prepravljeno — velicina, prored i uvlaka natpisa sada dolaze iz osnovnog pravila, jer vrijede na svim sirinama. */ .services { column-gap: 1.375rem; } /* ---------- kartice rjesenja ---------- Razmak izmedu naslova i teksta u kartici je u dizajnu 3 px, ne 8: 00_Homepage naslov 22 px na y 2302,6 (okvir 2304-2332), tekst 14 px na y 2334 (okvir od 2335,2). Ista mjera na 01_Clinica (naslov 1346-1374, tekst od 1377,2). Zbog 8 px kartica naslovnice je bila 415 px visoka umjesto 397. ISPRAVKA (NKP-04, krug 4): „okvir od 2335,2" je bio pogrešan smjer. Tekst 14 px ima prored 22, a font-okvir 19,6, pa okvir RETKA počinje 1,2 px IZNAD font-okvira (2332,8), ne ispod njega — između naslova i teksta nema 3 px, nego ~1. A naslov je od fotografije dalje nego što je tijelo davalo: na sve tri stranice je tinta naslova bila 2 px previsoko prema fotografiji (naslovnica 2304 / 2305, Denti fissi 1389 / 1391, 01_Clinica 1344 / 1347), a tekst ispod na mjestu. Zato tijelo počinje 22 px ispod fotografije, a razmak naslov -> tekst je 1 px: naslov ide 2 px niže, tekst ostaje gdje je bio, kartica ostaje 397. */ .scards__body { padding-top: 1.375rem; gap: .0625rem; } /* 22 | 1 */ /* Donji unutrasnji razmak kartice nije svuda isti: u dizajnu je 6,8 px na naslovnici a 20,8 na 01_Clinica. S jednom vrijednoscu (20) kartica naslovnice je izlazila 410 px visoka umjesto 397 koliko dizajn trazi, a spustiti je na 7 znacilo bi pokvariti 01_Clinicu. Zato mjera dolazi iz sekcije (`solution_cards.card_pad_bottom`). */ .scards__card { padding-bottom: var(--scards-pad-b, 1.25rem); } /* Kartica BEZ podloge nema ni dno od 397 px. Ta mjera je visina KARTICE s naslovnice (422 x 397) i tacna je samo ondje gdje kartica postoji. Kod `--plain` nema sta da bude visoko, a `.scards__body { flex: 1 }` pojede svu slobodnu visinu i odgurne pilulu na dno: na Estetica dentale je pilula bila 183 px ispod mjesta iz dizajna u sekciji 4 i 310 px u sekciji 6. Dizajn je drzi odmah ispod teksta — 212 odnosno 44,9 px. `sections.css` gasi `min-height` samo u mobilnom bloku. */ .scards--plain .scards__card { min-height: 0; } /* ---------- cjenovnik ---------- 03_Prezzi: korak reda je 75 px (imena redova na y 1022,2 / 1097,2 / 1172,2). Tema je imala razmak 28 dolje i 31 gore SAMO na redovima iza prvog, pa je prvi korak bio 68,3 a svaki sljedeci 99,3 — nijedan 75. Cijena je 25 px s proredom 35 (1,4), a ne s nasljedenim 1,57. Naslov grupe: u dizajnu 36,9 px iznad prvog reda (okvir naslova zavrsava na 1314,9, cijena pocinje na 1351,8); s razmakom reda od 19 to je 18. */ .pricing__row { padding-top: var(--pr-pt, 1.1875rem); padding-bottom: var(--pr-pb, 1.1875rem); } .pricing__row + .pricing__row { padding-top: var(--pr-pt, 1.1875rem); } .pricing__price { line-height: 1.4; } .pricing__group-title { margin-bottom: var(--pr-tg, 1.125rem); } .pricing__group + .pricing__group { margin-top: var(--pr-mt, 2.9375rem); } /* Naziv i cijena NISU poravnati po osnovnoj liniji: u PDF-u je vrh naziva (16 px) 6,4 px ispod vrha cijene (25 px), a osnovne linije se razlikuju za 3 px. Red se poravnava uz vrh, a naziv spusta za 7,6 px (6,4 + 1,2 koliko okvir sloga od 16 px viri iznad retka od 20). Razmake reda nosi okvir cijene (35 px, najvisi u redu) — polja reda `pt`/`pb`. Crta: 1 px bijela u PDF-u na cijelom pikselu (y 1069,0) na 100 % ispada dva reda (141/123). 2 px pola prozirna bijela daje isto. */ .pricing__row { align-items: start; border-bottom: 2px solid var(--pr-sep, color-mix(in srgb, currentColor 50%, transparent)); } /* polje `sep` */ .pricing__row:last-child { border-bottom: 0; } /* U zadnjoj grupi PDF naziv pomjera (red 2: 3 px, red 3: 18 px iznad uobicajenog) — polje reda `ndy`, samo vizuelni pomak, bez uticaja na visinu reda. */ .pricing__name { margin-top: .475rem; translate: 0 var(--pr-ndy, 0rem); } /* ---------- nacini placanja: koliko kartica izlazi izvan kontejnera ---- Kartica je 1286, kontejner 1070 — 108 px sa svake strane. Vrijednost je ogranicena i odozdo i odozgo: nikad manja od nule, i nikad veca od praznog ruba do ivice ekrana umanjenog za 40 px. Bez te druge brane bi kartica na ekranu od 1100 px izasla 131 px izvan okvira i stranica bi dobila vodoravni skrol — greska koju mjera vjernosti na 1512 px ne bi vidjela. */ .pay-card { --pay-card-w: 80.375rem; /* 1286 */ --pay-bleed: min( max((var(--pay-card-w) - 100%) / 2, 0px), max(50vw - 50% - 2.5rem, 0px) ); } /* ---------- nacini placanja: dva stupca koja teku svaki za sebe ---------- Stavke stoje na x 221 i x 761 u kontejneru 1070 — dva stupca od 530 s razmakom 10. Lijevi nosi tri nacina (y 2097 / 2267 / 2370, korak razmaka 38), desni jedan nacin i odmah ispod njega bankovne podatke (y 2209,3). Stupci NISU redovi jedne mreze: desni blok pocinje 58 px iznad drugog reda lijevog stupca. Dok je to bila jedna mreza s cetvrtom stavkom preko sva tri reda (`layout-b.css`), raspored je bio tacan samo dok je desna stavka bila niza od lijevog stupca; s bankovnim podacima unutra mreza bi razmakla lijeve stavke. Zato `payments.php` ispisuje dva popisa, a ovo ih slaze. */ .pay--kolone { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .625rem; } .pay__col { display: grid; align-content: start; /* 20. U dizajnu je razmak medu slovima 38,3 i 37,3, ali okvir stavke nosi 18 od toga sam (12 gornje margine natpisa, 4 ispod zadnjeg retka, 2 iznad natpisa) — mjereno na sajtu, korak ispada 170 i 104 naspram 170 i 103 iz dizajna. */ gap: 1.25rem; margin: 0; padding: 0; list-style: none; } /* ---------- centriran uvod sekcije stoji u stupcu, ne preko svega ------ `sections.css` uvod koraka i kolona centrira, ali mu ne daje sirinu, pa ide punom sirinom kontejnera — 1286 px. Dizajn ga drzi u uskom stupcu sredinom stranice: kroz svih 46 PDF-ova ima 13 takvih blokova (14 px, dva i vise redaka, sredina na x 756 +/- 18) i svi su izmedu 807,8 i 849,8 px, medijan 832,6. Zbog pune sirine se uvod na dvije sekcije koraka lomio u manje redaka nego u dizajnu, a razlika je bila 410 i 397 px sirine sloga. 856 je izabrano iznad najsireg ink-a (849,8), da nijedan redak koji u dizajnu stane ne ispadne, i ispod gornje granice preloma koju je sonda izmjerila na te dvije mete (876 i 889). Sekcije s naslovom ULIJEVO se ne diraju: ondje uvod nije centriran blok nego stupac uz naslov. */ .sec--steps:not(.sec--ta-left) > .sec__inner > .sec__lead, .sec--columns:not(.sec--ta-left) > .sec__inner > .sec__lead { max-width: var(--sec-lead-w, 53.5rem); /* zadano 856 */ margin-inline: auto; } /* ---------- kolone u JEDNOM stupcu ---------- Pazienti italiani i Prima visita: tri para "natpis + tekst" stoje jedan ispod drugog na x 760, korak 93 px (y 2497 / 2590 / 2683 odnosno 2552 / 2645 / 2738). Nasljedeni razmak reda od 40 px dao bi korak 126. */ .cols--1 { row-gap: .4375rem; } /* ---------- foto + tekst: kolone u kartici DESNO ---------- Pazienti italiani, "Documentazione fiscale" (y 5455): dizajn ima tri stupca — crtana ikona (x 113-437), naslov 22 px i tekst (x 437-962), pa ZAOBLJENA PLOCA 422 x 242 na x 977 s pet natpisa 16 px Light BIJELIH, jedan ispod drugog, korak 33. Tema je kolone crtala punom sirinom ISPOD odlomka, kao mrezu 3+2 golog teksta u boji accenta, a ploce nije bilo. Treci stupac je 437 px, a ploca u njemu 422: 15 px razlike je razmak od teksta do ploce (962 -> 977). Zato razmak stupaca ostaje 0, kako ga `media-text--tw` vec drzi, a razmak nosi lijeva margina ploce. */ .sec--v-cols_card .media-text { grid-template-columns: 20.25rem 32.8125rem minmax(0, 1fr); /* 324 | 525 | 437 */ column-gap: 0; } .sec--v-cols_card .media-text__cols { grid-column: 3; grid-row: 1; align-self: start; margin: 0 0 0 .9375rem; /* 15 do teksta */ padding: 2.8125rem 2.0625rem 2.6875rem; /* 45 | 33 | 43 */ } } /* Sama PLOČA (preljev, zaobljenje, bijeli natpisi jedan ispod drugog) vrijedi na svim širinama. Dok je stajala u desktop bloku, na telefonu ploče nije bilo: pet natpisa je stajalo kao plavi naslovi na tamnoj podlozi (nalaz IT-N1). Na desktopu je raspored stupaca i mjera ploče gore; ovdje su samo njen izgled i korak natpisa. Zaobljenje: profil gornjeg desnog ugla u PDF-u je 6,4,3,2,1,1,0; u Chromeu ga tačno daje polumjer 9 (8 daje 5,3,2,1,1, a 10 6,5,3,2,2,1,1). Tema je imala 20 (nalaz IT-22). */ .sec--v-cols_card .media-text__cols { grid-template-columns: 1fr; gap: .6875rem; /* korak 33 = redak 22 + 11 */ border-radius: .5625rem; /* 9 */ /* Vlastita boja ploče: „Sfondo delle schede" (`--sec-card-bg`). */ background: var(--sec-card-bg, linear-gradient(to right, #0c0d0d, #093543)); } .sec--v-cols_card .media-text__col-title { margin: 0; } /* Bijela boja natpisa u ploči je ZADANA, ne tvrda: `:where()` joj spušta težinu na 0-1-0, pa boja iz „Formati" (klasa koju `smile_heading()` prenese na h3, npr. `.c-accent.c-accent` 0-2-0) pobjeđuje. Bez klase i dalje pobjeđuje ova bijela: `.media-text__col-title` iz sections.css ima istu težinu, a učitava se ranije. */ :where(.sec--v-cols_card) .media-text__col-title { color: var(--c-white); } @media (max-width: 1023px) { .sec--v-cols_card .media-text__cols { padding: 1.5rem 1.25rem; } } /* ========================================================================== MOBILNI RASPORED — mjereno iz `Mobile/Mobile HP.pdf` (okvir 430 x 11074), izvuceno u `deploy/qa/pdf-json/mobile-hp.json`. Jedini mobilni dizajn koji je Pragma isporucila je naslovnica. Mjere ovdje dolaze SAMO iz tog PDF-a — ni jedna iz `00-homepage.json`. Isti sadrzaj u drugom okviru ima druge brojke, pa se dvije reference ne smiju mijesati. TEKST SE NE MIJENJA. `GRESKE_U_PDF.md` 24c: mobilni PDF se razilazi s desktopom u samom tekstu i u redoslijedu kartica. Plan (faza 5) kaze da mobilni koristi DESKTOP tekstove, a iz mobilnog PDF-a uzima samo raspored. Zato ovdje nema ni jedne izmjene sadrzaja — samo geometrija. BOCNI RUB JE 36, NE 20. Mobilni PDF ga na svakoj sekciji ima 36 px: kartice x 36 w 358, fotografije x 36 w 358, forma x 36, ploce povjerenja x 36, podnozje x 36. `sections.css` je do sada davao 20 px (`@media (max-width: 1340px) { .sec__inner { padding-inline: 1.25rem } }`), a i nacrt `MOBILE_RULES.md` je pisao 20. Odluceno: pobjeduje PDF, jer je mjerilo isporuke „1:1 s PDF-ovima", a `MOBILE_RULES.md` je nas nacrt, ne referenca klijenta. `tokens.css` vec drzi `--m-side: 2.25rem` s tom istom biljeskom („Mobile HP: okvir 430, margina 36") — nedostajalo je samo da ga kontejner koristi. Vrijednost se uzima iz tokena, ne prepisuje brojem, da ostane jedno mjesto istine. Rub se postavlja ODAVDE, a ne u `sections.css`, jer taj fajl drzi koordinator i vozi ga pet tokova. Ucinak je isti — ovaj fajl se ucitava poslije — a vraca se jednim potezom. VARIJABLA BEZ VRIJEDNOSTI NE ZNACI „OSTAVI KAKO JEST" NEGO „OBRISI". Ovo je pravilo, ne zapazanje: kostalo nas je tri puta u jednom danu. `var(--nesto)` bez zamjenske vrijednosti ne pada pri citanju pravila nego tek pri racunanju, i tada svojstvo poprimi svoju POCETNU vrijednost — a pocetna vrijednost nije isto sto i „pravila nema". 1. `aspect-ratio: var(--m-img-ar, auto)` — preglednik za `` sam drzi `auto attr(width) / attr(height)`; autorski `auto` taj omjer BRISE. Slika koja jos nije ucitana tada nema nijedan izvor visine. Mjereno: 358 x 1500 umjesto 358 x 217, sekcija 1928 umjesto 678. 2. `line-height: var(--m-title-lh)` bi uz zajednicku klasu s velicinom pao na `normal` cim bi neko upisao samo velicinu. 3. Isti oblik kvara je i `content: " "` na `
`: izgleda kao da dodaje razmak, a ne dodaje nista — rijeci se slijepe. Zato se mjera koja postoji samo za NEKE sekcije nosi KLASOM koju PHP dodaje tek kad mjera postoji (`sec--m-kadar`, `sec--m-naslov`, `sec--m-prored`), a ne zamjenskom vrijednoscu u `var()`. Sekcija bez mjere tada ne dobija nikakvu deklaraciju. PROROD SE NE IZVODI IZ VELICINE, NEGO SE MJERI. Potvrdeno cetiri puta u jednoj smjeni, i svaki put je prored bio UZI OD SAMOG SLOVA: olistico 33,16 na 35 px (dizajn 47) services_grid 26,53 na 28 px (dizajn 35) prima_visita 33,75 na 30 px (dizajn 44) qcards__q 26,00 na 25 px (dizajn 30,5) Omjeri iz dizajna nisu ni priblizno isti: 1,343 / 1,400 / 1,467 / 1,220. Nijedna formula ih ne pogada, pa se prored uzima iz PDF-a kao zasebna mjera — poljem ondje gdje se razlikuje po sekciji, pravilom ondje gdje vrijedi za cijeli raspored. I JOS JEDNO: prije nego napises pravilo za „naslov sekcije", provjeri nosi li ga svaki naslov o kojem govoris. `.prima__title` ne nosi `.sec__title` nego svoju klasu, pa ga pravilo pisano na zajednicku klasu ne doseze — ista zamka kao selektor koji je trazio naslov kao dijete kontejnera. Iz istog korijena je i pravilo za ISKLJUCIVANJE pravila pri ispitivanju: da bi provjerio kvari li neko svojstvo, moras ga UKLONITI, ne prepisati drugom vrijednoscu iste vrste. Test s `aspect-ratio: auto !important` je koristio tacno onu vrijednost koja kvari, pa je kvar potvrdivao umjesto da ga iskljuci — i zbog toga sam tudim proglasio nesto svoje. Blok stoji IZA `@media (min-width: 1024px)` gore; dva upita se ne preklapaju, pa redoslijed medu njima ne odlucuje. Odlucuje to sto se ovaj fajl ucitava poslije `sections.css`, cije mobilne mjere ovdje nadjacavam pri jednakoj tezini selektora. ========================================================================== */ @media (max-width: 1023px) { /* ---------- bocni rub sekcije ---------- Kontejner ispod 1024 px ide na 36 px sa svake strane (obrazlozenje u zaglavlju bloka). Na 430 px to daje sadrzaj od 358 — tacno sirinu na kojoj su nacrtane sve kartice, fotografije i ploce mobilnog PDF-a. Iznad 1023 px ne mijenja nista: ondje `--m-side` vrijedi 113, a `.sec__inner` svoj razmak dobija iz `sections.css`. */ .sec__inner { padding-inline: var(--m-side); } /* ---------- kartice s pitanjem ---------- Mobile HP, y 984-1850: sest ploha 357 x 136, korak 147 (razmak 11), pitanje 25 px na 20,8 px od vrha, natpis 13 px na 96,3 px od vrha, tekst uvucen ~40 px od ruba plohe. ZNAKA NEMA. Na desktopu ga ima — isti izvlacivac nade u `00-homepage` sest bijelih pravougaonika 29 x 29 (y 989 i 1153, x 705 / 1029 / 1353). U mobilnom PDF-u na istom mjestu nema ni pravougaonika ni slike, a render donjeg desnog ugla plohe je prazan. Znak je dakle namjerno izostavljen na uskom ekranu, a ne previd izvlacenja. Sa znakom je kartica na sajtu visoka 156,9 px umjesto 136. */ .qcards__arrow { display: none; } /* Prored pitanja je 26 px (1,04, isto kao desktop): okviri redova su u Mobile HP na y 1302,2 / 1328,2, 1452,2 / 1478,2, 1741,8 / 1767,8 — korak 26 u svih šest kartica. Ranije upisanih 30,5 je bila visina bloka od dva retka (61) podijeljena s dva, a ne korak; s njom je pitanje stajalo 11 px previsoko, a natpis 6 px predaleko od njega (MHP-09). Desktopsko pravilo već drži 1,04, pa ovdje nema prepisa. */ .qcards { row-gap: .6875rem; } /* 11 */ .qcards__item { min-height: 8.5rem; /* 136 — sve sest ploha */ /* Vrh prvog retka pitanja je u PDF-u ručno smješten (vrh slova 28-36 px ispod vrha plohe, prosjek 31,3). Mjera je kartica „La dentiera si muove?" iz nalaza: vrh slova 32, drugi red 59, natpis 94 (render Mobile HP na 430, PIL). */ padding: 1.84375rem 2.5rem 1.5rem; /* 29,5 | 40 | 24 */ display: flex; flex-direction: column; border-radius: 0 .9375rem .9375rem 0; } .qcards__item:nth-child(n+4) { padding-top: 1.84375rem; } .qcards__q { margin-bottom: 0; } /* Natpis je na Mobile HP 13 px ExtraLight (200), ne 14 Light, i uvijek u jednom redu: rucni prelom je desktopski, pa se ovdje gasi. Prelom u sadrzaju zato ima razmak ispred sebe („No Bone
Implant"), inace bi se rijeci slijepile. NATPIS IDE ODMAH ISPOD PITANJA, ne uz dno plohe: od vrha slova drugog retka pitanja do vrha slova natpisa je u PDF-u 34-36 px (kartice 3, 4, 5, 6), a u kartici 3 tačno 35 (59 -> 94). Uz dno (96 px od vrha) je natpis stajao u tri kartice 5-6 px prenisko, a pitanje 11 px previsoko. */ .qcards__label { margin-top: .67375rem; font-size: .8125rem; font-weight: 200; } /* 10,78 | 13 */ .qcards__label br { display: none; } /* Naslov sekcije je u mobilnom dizajnu CENTRIRAN: drugi redak („diverso:") stoji uvucen s obje strane, a ne uz lijevi rub. Na desktopu naslov stoji LIJEVO od mreze, u svom stupcu, pa je ondje poravnanje lijevo i ostaje takvo. */ .sec--question-cards > .sec__inner > .sec__title { text-align: center; /* Mobile HP: naslov je 40 px, sirok 319,4 u okviru od oko 324. Tema je davala 28 px s proredom 1,42 — dvanaest px premalo slovo. PRORED JE 45, NE 48,7. Okviri slova tri retka su na y 789 / 834 / 879 — korak 45 (1,125). Blok 789-935 (146 px) je visina od vrha PRVOG do dna ZADNJEG okvira slova (56 px na 40-pikselskom slovu), a ne tri retka proreda; s 48,7 je naslov bio 11 px visi, a kartice 25 px vise nego u dizajnu. Naslov -> prva kartica: okvir zadnjeg retka zavrsava na 929,5 (879 + (56 - 45) / 2 + 45), ploha pocinje na 984 — 54,5 px, ne 20. PRIJELOM. Dizajn lomi na tri retka („Ogni caso è / diverso: / raccontaci il tuo“), a desktop na cetiri. Desktopski prijelomi se ovdje gase, a tri retka daje sama sirina okvira od 324 px. Gasenje je dugo bilo nemoguce jer u sadrzaju nije bilo razmaka oko prijeloma („Ogni caso
è“ bi dalo „Ogni casoè“); sada sadrzaj ima razmak ispred svakog prijeloma (`popravci/str-kartice-hp-sadrzaj.php`). */ font-size: 2.5rem; /* 40 */ line-height: 1.125; /* 45 */ max-width: 20.25rem; /* 324 */ margin-inline: auto; margin-bottom: 3.40625rem; /* 54,5 */ } .sec--question-cards > .sec__inner > .sec__title br { display: none; } /* ---------- kartice rjesenja ---------- Mobile HP, y 2806-4262: ploha kartice je 394 px siroka na x 18, a sve sto nosi — fotografija, naslov, tekst i traka dugmeta — stoji na x 36 i siroko je 358. Ploha dakle prelazi 18 px preko sadrzaja sa svake strane. PRELAZ SE CRTA PLOHOM, NE NEGATIVNOM MARGINOM. S marginom je sam element bio siri od svog roditelja, pa je kontrola na 390 px prijavila osam prelijevanja po 18 px — na naslovnici i jos sedam stranica. Isti obrazac i isti razlog kao ploha nacina placanja na stranici Prezzi: pseudo-element nosi samo boju, ne ulazi u tok i ne moze se preliti. I ZASTO 18, A NE 358. Mjere mobilnog PDF-a izlaze iz okvira od 430 px: rub 36 daje sadrzaj 358. Na 390 px sadrzaj je 318, pa svaka tvrda sirina prepisana iz dizajna promasi za 40. Zato ovdje nema nijedne sirine u pikselima — fotografija, tekst i traka uzimaju punu sirinu roditelja, a iz dizajna se prepisuje samo PRELAZ plohe, koji je razmak i vrijedi na svakoj sirini. */ .scards__card { position: relative; z-index: 0; margin-inline: 0; padding: 1.25rem 0; /* 20 | 0 */ background: none; border-radius: 0; /* `sections.css` drzi `overflow: hidden` da fotografija ne izade iz zaobljenja kartice; ono bi odrezalo i plohu. Zaobljenje fotografije nosi sam `.scards__img`, pa rezanje ovdje nije potrebno. */ overflow: visible; } /* `z-index: 0` na kartici je nuzan: bez njega ploha s `z-index: -1` propada iza pozadine sekcije i nestane cim sekcija dobije `bg_color`. */ .scards__card::before { content: ""; position: absolute; z-index: -1; inset: 0 -1.125rem; /* prelaz 18 */ /* Ista ploha kao na desktopu: okomiti preljev (29,28,27) -> (15,15,14) na 87 % visine i zaobljenje 9 px (raster plohe iz Mobile HP, slika 394 x 397, prvi puni red 8 px ispod ugla). Bila je jednobojna (31,28,27) sa zaobljenjem 20. */ border-radius: .5625rem; /* 9 */ background: var(--sec-card-bg, linear-gradient(180deg, #1f1d1c 0%, #0c0c0c 100%)); } /* Kartica BEZ podloge je nema ni na mobilnom: `.scards--plain` u `sections.css` gasi pozadinu, zaobljenje i razmak, pa ploha ne smije iskociti ispod golog teksta. Pogada sedam stranica: Estetica, Pazienti italiani, Denti fissi, Prima visita, Riabilitazione, Odontoiatria digitale i Clinica. */ .scards--plain .scards__card::before { content: none; } /* Naslov je 16,6 odnosno 14,6 px ispod fotografije (mjereno na sve tri kartice); okvir retka je iznad slova visi oko 4 px, pa razmak do okvira nosi 12, ne 20. */ /* Tekst na telefonu stoji na x 36, poravnat s fotografijom — bocnu uvlaku tijela (17-27 px na desktopu) mobilni dizajn nema. */ /* ISPRAVKA: 12 je bila mjera do SLOVA umanjena za procijenjeni visak okvira. Po okvirima iz PDF-a (kartica „No Bone", jedina s jednorednim naslovom i bez natpisa preko ruba): fotografija do y 3101, okvir retka naslova (22 px, prored 28) od 3119 — 18 px; naslov do 3147, tekst od 3150,1 — 3 px, kao na desktopu. Sa 12 i 8 je naslov stajao 6 px vise, a tekst 2 px nize. */ .scards__body { padding: 1.125rem 0 0; gap: .1875rem; } /* 18 | 3 */ /* Dno plohe je 13 px ispod zadnjeg retka teksta (tekst do 3190,1, ploha do 3203), traka dugmeta 4 px ispod plohe (3207), a sljedeca ploha 17 px ispod trake (3249 -> 3266). Bilo je 20 / 10 / 10, pa je svaka kartica bila 6 px visa, a traka 6 px dalje od plohe. */ .scards:not(.scards--plain) { row-gap: 1.0625rem; } /* 17 */ .scards:not(.scards--plain) .scards__card { padding-bottom: .8125rem; } /* 13 */ /* Opis kartice je na Mobile HP 16 px Light s korakom redova 20 („Anche senza osso, puoi tornare ad / avere denti fissi." — dva reda), a ne desktopskih 14 / 22. */ .scards:not(.scards--plain) .scards__text { font-size: 1rem; line-height: 1.25; } /* 16 / 20 */ /* Prelom opisa na telefonu nije desktopski (MHP-22): Mobile HP lomi „Anche senza osso, puoi tornare ad / avere denti fissi.", a 00_Homepage „…tornare ad avere / denti fissi.". Okvir opisa je u oba PDF-a širi od tog reda, pa prelom ne izlazi iz širine — ručni je u oba dizajna. Zato sadržaj nosi oba preloma: `
` samo za desktop i `
` samo za telefon (isti dogovor kao `.steps__text .br-d`). Ispred svakog je razmak, pa se riječi ne slijepe. */ .scards__text .br-d { display: none; } /* Traka dugmeta je poravnata s FOTOGRAFIJOM, ne s plohom kartice: u dizajnu oboje stoji na x 36 sirinom 358, a ploha prelazi 18 px preko toga. Kako i traka i fotografija sada uzimaju punu sirinu roditelja, poravnanje vrijedi na svakoj sirini i bez ijedne brojke. Traka stoji 6-14 px ispod plohe. */ /* `width: auto`, ne samo margina: dugme je `.btn--bar`, a ono nosi `width: 100%`. Sirina od 100 % ne racuna marginu, pa je traka ostala 390 px siroka i samo se pomjerila 16 px udesno — izlazila je 16 px izvan kontejnera umjesto da se suzi na 358. */ .scards__cta { margin: .625rem 0 0; width: auto; } /* 10 */ .scards:not(.scards--plain) .scards__cta { margin-top: .25rem; } /* 4 */ /* Traka je na Mobile HP PUNE SIRINE (358 x 42 na x 36), natpis centriran. `width: auto` iznad sam po sebi traku skupi na natpis (154 px), jer je dugme stavka uspravnog `flex`-a s `align-self: flex-start`; rastezanje je ono sto je vraca na sirinu fotografije. */ .scards__cta.btn--bar { align-self: stretch; margin-right: 0; } /* VISINA KARTICE (MHP-Z-02). Mobile HP drži plohu fiksne visine 397 kao desktop: „No Bone" (dva reda opisa) 2806-3203 i „Prima visita" (jedan red) 3817-4214 su obje 397. S `min-height: 0` iz `sections.css` je kartica s jednim redom opisa bila 377 visoka, a traka dugmeta 20 px bliže fotografiji. Kartica s više sadržaja i dalje raste (u PDF-u „All-on-4 All-on-6 / Straumann" s dvorednim naslovom je 451). */ .scards:not(.scards--plain) .scards__card { min-height: 24.8125rem; } /* 397 */ /* ŠIRI MOBILNI KADAR (polje stavke `m_image_w`, MHP-Z-05 i MHP-K-01). Mobile HP crta fotografiju „All on 4/6" 371 x 275 na x 28-399, šire od stupca teksta (358 na x 36), jer je logotip Straumann utisnut do lijevog ruba fotografije. U stupcu od 358 s `object-fit: cover` se s obje strane odsijecalo 6,5 px i ikona logotipa je bila prerezana. Fotografija je zato šira od stupca za omjer iz polja (371 / 358), centrirana u kartici — kao što je na desktopu fotografija centrirana u kartici u svojoj prirodnoj širini. Na 430 je okvir 371 x 275, tačno omjer datoteke (1484 x 1100), pa se prikazuje CIJELA. U uspravnom `flex`-u centriranje (`align-self`) raspoređuje višak širine jednako na obje strane; `margin: auto` bi ga stavio samo desno. Visina ostaje 275 kao na ostalim karticama: natpis preko fotografije je u pikselima od vrha fotografije (y 167,9, slovo 62), pa bi na telefonu od 390 px niža fotografija (244) ostavila „Pro Arch" ispod nje, preko naslova kartice. Na užem ekranu se zato reže, ali samo DESNA strana (`object-position`): dizajn ovaj kadar širi upravo zbog logotipa uz lijevi rub, pa lijevi rub ostaje netaknut. Omjer vrijedi samo do stupca od 358 (širina na kojoj je Mobile HP nacrtan i prema kojoj je omjer izračunat), pa je gornja granica okvira mjera iz polja (371). Bez te granice je na tabletskim širinama (768-1023, MOB-R-01) okvir rastao sa stupcem — na 800 px 754 x 275, 13 px preko plohe s obje strane, a `cover` je od fotografije ostavljao traku bez logotipa. Iznad ~450 px je okvir sada 371 x 275 i centriran kao fotografije ostalih kartica. */ .scards__media--m-w { width: calc(var(--scards-m-img-k) * min(100%, 22.375rem)); /* k x min(stupac, 358) */ max-width: none; margin-inline: 0; align-self: center; } .scards__media--m-w .scards__img { width: 100%; max-width: none; object-position: left center; } /* POLOŽAJ ŠIREG KADRA (polje stavke `m_image_x`, MHP-Z-05, krug 5 p3). Mobile HP kadar ne centrira u stupcu: fotografija je na x 28-399 (8 px lijevo od teksta na x 36, 5 px desno od 394), a ploha kartice je SLIKA 398 široka na x 14-412 — 14 px lijevo od fotografije i 13 desno. Centrirano je fotografija stajala na x 30, ploha na x 18. Mjera je iz polja (px od lijevog ruba teksta na 430), ne iz CSS-a. Kadar je stavka uspravnog `flex`-a, pa se postavlja od lijevog ruba (`flex-start`) za mjeru iz polja. Kad je stupac širi od 358 (tablet), širina kadra je već ograničena na 371, pa se dodaje polovina viška stupca: kadar ostaje na istom mjestu u odnosu na SREDINU stupca kao na 430, tj. praktično centriran kao fotografije ostalih kartica. Ploha prati fotografiju (14 px lijevo od nje), ali nikad nije uža od plohe ostalih kartica (prelaz 18 preko teksta). */ .scards__item--m-x .scards__media--m-w { align-self: flex-start; margin-left: calc(var(--scards-m-img-x) + max(0px, (100% - 22.375rem) / 2)); } .scards__item--m-x .scards__card::before { left: min(-1.125rem, calc(var(--scards-m-img-x) + max(0px, (100% - 22.375rem) / 2) - .875rem)); /* foto - 14 */ } /* Natpis preko fotografije na telefonu (polje stavke `m_badge_x`, MHP-Z-01): Mobile HP ima „No bone" 7 px od lijevog ruba fotografije, desktop 16,5. Bez polja vrijedi desktopski odmak. */ .scards__natpis { left: var(--scards-natpis-x-m, var(--scards-natpis-x, 1rem)); } /* Stavke BEZ podloge (Pazienti italiani sek. 4 i 12, Prima visita sek. 13, Estetica, Riabilitazione) su na telefonu u jednom stupcu, a razmak među njima je ostao razmak mreže od 10 px: pilula -> natpis sljedeće stavke 14 px, pilula -> avion 11 px, pa su se stavke slijevale (N-06). Mobilnog dizajna za te stranice nema; mjera je razmak koji je Prima visita već imala (pilula -> znak 32 px, uz kutiju znaka). Kutija znakova (visina najvišeg znaka u REDU) na telefonu nema smisla — svaka stavka je sama u redu — pa se gasi i razmak je svuda isti. */ .scards--plain { row-gap: 2rem; } /* 32 */ .scards--plain .scards__icon { min-height: 0; } /* ---------- mreza usluga ---------- Mobile HP, y 4308-6783: sest kartica u jednom stupcu, fotografija 358 x 312 na x 36, korak reda 28 px. NASLOV OSTAJE PREKO FOTOGRAFIJE. `sections.css` ga na uskom ekranu spusta ispod nje (`position: static`), ali mobilni PDF ga crta na fotografiji dolje lijevo, isto kao desktop: donji rub okvira retka stoji 33,6 px iznad dna fotografije na svih sest kartica, bez obzira ima li naslov jedan ili dva retka. Zato se veze za DNO fotografije pomakom, a ne za njen vrh fiksnim `top`-om: s `top: 240,6` iz desktopa dvoredni naslov bi izlazio 28 px nize nego u dizajnu. Spustanjem naslova ispod fotografije kartica je na sajtu bila 473,5 px visoka umjesto 364 — sest puta po 106 px. */ /* Uvod -> prva fotografija: Mobile HP uvod do y 4390,4 (okvir retka), fotografija „Implantologia" od 4432 — 41,6 px, ne 32. */ .services { row-gap: 0; margin-top: 2.6rem; } /* 41,6 */ /* Razmak traka -> sljedeća fotografija nije isti ispod svake pločice (Mobile HP: 16,1 / 22,9 / 28,1 / 24,3 / 30,7 — NK-08), pa ga nosi pločica (`m_gap`, --m-razmak), a ne razmak mreže. Zadano 28. */ .services__item { margin-bottom: var(--m-razmak, 1.75rem); } /* 28 */ .services__item:last-child { margin-bottom: 0; } /* Glava sekcije na Mobile HP: od zadnje trake kartica rjesenja (dno y 4262) do naslova „I nostri servizi" je 47 px, a uvod je 16 px Light s korakom 22 („…la funzione / e l'estetica del tuo sorriso."). Desktopski razmak (64,7) i uvod od 14 px su ovdje davali 94 i 59 px. Naslov -> uvod: vrh okvira naslova y 4308,8, vrh uvoda 4346,4, dakle 37,6 px od vrha do vrha — naslov je visok 35, pa izmedu ostaje 2,6. Razmak od 12 je bio 37 procitan kao razmak IZMEDU, pa je uvod stajao 9,4 px nize nego u dizajnu. */ .sec.sec--services-grid { padding-top: 2.9375rem; } /* 47 */ .sec--services-grid .sec__head { gap: .1625rem; } /* 2,6 */ .sec--services-grid .sec__head-intro.fs-14 { font-size: 1rem; line-height: 1.375; } /* 16 / 22 */ /* Zaobljenje fotografije je na telefonu 10 px (zum 5x), ne 20. */ .services__img { border-radius: .625rem; } /* Fotografija u mobilnom PDF-u nije uvijek 358 x 312,7 od ruba do ruba stupca: „Estetica" je 353 široka (desni rub 389), „Odontoiatria" počinje na 39,3, „Protesi" ide do 395,2, a „Chirurgia orale" se vidi samo 305,9 px, jer traka odmah ispod nje počinje prije njenog dna (NK-08). Uvlake i visina su iz polja pločice (`m_img_*`); bez njih vrijedi puni stupac i 312,7. */ .services__img { height: var(--m-foto-h, 19.54375rem); margin-left: var(--m-foto-l, 0rem); width: calc(100% - var(--m-foto-l, 0rem) - var(--m-foto-r, 0rem)); max-width: none; object-position: 50% 0; } /* Naslov plocice: desktopski prijelomi („Chirurgia / orale", „Estetica / dentale") se na telefonu gase — Mobile HP ih crta u jednom redu — a dva reda („Implantologia / avanzata", „Odontoiatria generale / e prevenzione") daje sirina okvira: 258 px lomi upravo te naslove i nijedan drugi (najduzi jednoredni je 249,3 px, najkraci dvoredni 267,8). Sadrzaj ima razmak ispred svakog prijeloma, pa se rijeci ne slijepe. */ .services__title { max-width: 16.125rem; } /* 258 */ .services__title br { display: none; } .services__media { position: relative; } /* Položaj naslova po pločici (`m_title_x`, `m_title_b`): u Mobile HP je od lijevog ruba stupca 10 / 16 / 14 / 14 / 19,9 / 14 px, a donji rub okvira retka 27,7 / 17,9 / 22,6 / 26,4 / 20,7 / 13,5 px iznad dna fotografije (NK-08). Zadano 14 i 34. */ .services__title { position: absolute; left: var(--m-naslov-x, .875rem); /* 14 od ruba stupca */ right: 3.875rem; /* 62 — mjesto za znak */ top: var(--m-foto-h, 19.54375rem); /* dno fotografije */ transform: translateY(calc(-100% - var(--m-naslov-b, 2.125rem))); margin: 0; } /* Znak u donjem desnom uglu fotografije: plavi krug 34 px s bijelim prstenom i bijelom strelicom, 20 px od desnog ruba fotografije i 24 px od njenog dna. Crta se plohom, ne novim elementom u predlosku, da desktop ostane slovo po slovo isti — ondje dizajn ima tanak sevron bez kruga, sto je zaseban nalaz i ne rjesava se ovdje. */ /* Kartica bez fotografije: naslov se vraca u tok i znaka nema. Bez ovoga bi `top` racunat od visine fotografije (312,7) visio nad praznim mjestom, jer `.services__media` tada nema visinu. */ .services__item:not(:has(img)) .services__title { position: static; margin: 1rem 0 .75rem; } .services__item:not(:has(img)) .services__media::after { content: none; } /* Kadar iz dizajna krug sa strelicom vec nosi u sebi (`--krug-u-foto`, services_grid.php), a urednik ga moze i ugasiti (`--bez-kruga`). */ .services__item--krug-u-foto .services__media::after, .services__item--bez-kruga .services__media::after { content: none; } .services__media::after { content: ""; position: absolute; right: 1.25rem; bottom: 1.5rem; /* 20 | 24 */ box-sizing: border-box; width: 2.125rem; height: 2.125rem; /* 34 */ /* Boje iz polja sekcije (`arrow_bg`, `arrow_color`, services_grid.php); bez njih rezerva = dizajn. */ border: 2px solid var(--svc-cerchio-fg, var(--c-white)); border-radius: 999px; background-color: var(--svc-cerchio-bg, var(--c-accent)); background-image: var(--svc-freccia, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1 6.5 6l-5 5' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E")); background-repeat: no-repeat; background-size: .5rem .75rem; /* 8 x 12 */ background-position: center; } /* Krug u bojama sekcije TAČNO preko kruga utisnutog u kadar iz dizajna (`--krug-preko`, samo kad je boja upisana). Kadar se crta s `object-fit: cover` i `object-position: 50% 0`, pa je prikazana širina slike veća od dvije: širina okvira i visina okvira puta omjer slike (`--krug-r`). Iz nje se računaju sredina (`--krug-x`, `--krug-y`: udio širine i visine slike) i promjer (`--krug-d`: udio širine) utisnutog kruga, za svaku širinu telefona. Promjer je 2 px veći da utisnuti rub ne proviri. Na uskom telefonu (375) `cover` odsiječe desni rub kadra zajedno s dijelom utisnutog kruga; novi krug se odsiječe na istom rubu (`clip-path`), pa pokriva tačno ono što se od starog vidi. Širina okvira dolazi iz `cqw`, pa okvir postaje kontejner samo u ovom slučaju. */ .services__item--krug-preko .services__media { container-type: inline-size; } .services__item--krug-preko .services__media::after { --krug-fw: calc(100cqw - var(--m-foto-l, 0rem) - var(--m-foto-r, 0rem)); --krug-iw: max(var(--krug-fw), calc(var(--m-foto-h, 19.54375rem) * var(--krug-r))); --krug-dd: calc(var(--krug-d) * var(--krug-iw) + .125rem); --krug-lx: calc(var(--m-foto-l, 0rem) + (var(--krug-fw) - var(--krug-iw)) / 2 + var(--krug-x) * var(--krug-iw) - var(--krug-dd) / 2); --krug-ty: calc(var(--krug-y) * var(--krug-iw) / var(--krug-r) - var(--krug-dd) / 2); right: auto; bottom: auto; left: var(--krug-lx); top: var(--krug-ty); width: var(--krug-dd); height: var(--krug-dd); /* Dio kruga izvan slike se odsiječe na rubu slike, kao utisnuti. */ clip-path: inset( max(0px, calc(0px - var(--krug-ty))) max(0px, calc(var(--krug-lx) + var(--krug-dd) - var(--m-foto-l, 0rem) - var(--krug-fw))) max(0px, calc(var(--krug-ty) + var(--krug-dd) - var(--m-foto-h, 19.54375rem))) max(0px, calc(var(--m-foto-l, 0rem) - var(--krug-lx))) ); } /* Red natpisa je JEDNA zaobljena traka 358 x 50 odmah ispod fotografije, a ne niz plocica s okvirom: natpisi su centrirani i dijele sirinu na jednake stupce, bez obruba. Gradijent je isti kakav nosi ploha nacina placanja (#0c0d0e -> #093443), mjeren iz rendera trake. Broj natpisa nije uvijek tri (dizajn mobilnog ih ima tri, desktop tekstovi na nekim karticama cetiri, na nekima dva), pa stupci nisu `repeat(3, 1fr)` nego jednaki udjeli koliko ih ima. */ .services__links { display: flex; flex-wrap: nowrap; /* `sections.css` drzi `align-items: flex-start`; bez ovoga stupac ne nasljeduje visinu trake, pa je natpis ostajao 37 px umjesto 50. */ align-items: stretch; gap: 0; /* Odmak od fotografije i uvlake trake po pločici (`m_links_*`): traka „Odontoiatria" je u Mobile HP na 46-394, „Protesi" na 36-396, a od dna fotografije je 0-13,9 px (NK-08). Zadano 0. */ margin-top: var(--m-traka-gap, 0rem); margin-left: var(--m-traka-l, 0rem); width: calc(100% - var(--m-traka-l, 0rem) - var(--m-traka-r, 0rem)); min-height: 3.375rem; /* 54 — raster trake 358 x 54 */ padding: 0 .25rem; border-radius: .75rem; background: var(--sec-card-bg, linear-gradient(to right, #0c0d0e, #093443)); } .services__links > li { display: flex; flex: 1 1 0; min-width: 0; } /* Natpis s RUČNIM prelomom ne pada ispod širine svog najdužeg retka. „Innesto osseo e rialzo / del seno mascellare" (Chirurgia orale, četiri natpisa) je u četvrtini trake (88 px) išao u četiri reda i traka je rasla na 68 px umjesto 54 iz dizajna (MHP-26). Ovako je u dva reda, kako ga je urednik prelomio, a ostala tri stupca dijele ostatak. Natpisi bez prijeloma i kratki natpisi s prijelomom („Estrazione / dentale") ostaju u jednakim stupcima. */ .services__links > li:has(br) { min-width: max-content; } /* Natpis se RASTEZE na cijelu visinu trake, ne stoji centriran kao redak od 17 px. Bez obruba je plocica prestala biti tap cilj: `MOBILE_RULES` trazi najmanje 44 px, a natpis u jednom retku je davao 17. Ovako je dodirna povrsina cijeli stupac trake, dakle 50 px. */ .services__links .chip { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center; padding: .625rem .25rem; border: 0; text-align: center; /* Mobile HP: natpisi 10 px Light (y 4755-6748). Stajalo je 12 „zbog citljivosti" — odstupanje od dizajna koje dizajn ne trazi. Na 12 px se „Apicectomia" na 390 px lomila usred rijeci. */ font-size: .625rem; /* 10 */ line-height: 1.2; /* Riječ se ne lomi usred sebe („Apicectomi / a", „Pedodonzi / a" na 390 px): na 10 px najduža riječ („Apicectomia", 58 px) staje u stupac i na 390 px (četiri stupca po 77). */ overflow-wrap: normal; } /* ---------- heroj naslovnice ---------- Mobile HP, y 0-739: medij je PUNA SIRINA, 430 x 739, bez uvlake i bez zaobljenja, a naslov (37 px, cetiri retka) stoji PRI DNU — njegov donji rub je 4 px iznad dna medija. Sajt je crtao desktop: uvlaku od 20 px iz `--hero-inset`, visinu od 838 px iz `.hero--h-838` i razmak `376 / 100 / 66` iz `00_Homepage.pdf`. Zbog razmaka od 100 px sa strane okvir naslova je na 430 px padao na 230 px sirine, pa se naslov lomio na SEDAM redaka umjesto cetiri. Visina ide kao odnos, ne kao broj: `100vw * 739 / 430` daje 739 na okviru dizajna i skalira se na svaku drugu sirinu. Tvrdih 739 px bi na 390 px bilo 69 px previse. Uvlaka se gasi na `.hero__media`, a ne na `--hero-inset`: varijablu postavlja ACF kao inline stil na samom heroju, pa bi je iz CSS-a mogao nadjacati samo `!important`. Medij je drugi element, tu inline stila nema. */ .hero--hp .hero__media { inset: 0; border-radius: 0; } .hero--hp.hero--h-838 { min-height: calc(100vw * 739 / 430); } .hero--hp.hero--h-838 .hero__inner { /* 54,8 sa strana, ne 36: sva četiri retka naslova u dizajnu počinju na x 54,8 — to je ishodište retka (span iz get_text), ne tinta; tinta slova „V” je na 56 i u PDF-u i na sajtu uz isti razmak od ruba znaka. Ranijih 53 px pretpostavljalo je da je 54,8 tinta, pa je naslov stajao 2 px lijevo. Ostatak mobilnog dizajna stoji na 36, heroj je uvučen više. */ /* Dolje 8, ne 36: zadnji red naslova u dizajnu zavrsava (okvir slova) na 735, a medij na 739; uz prored 44 okvir retka zavrsava na 731. */ padding: 2.25rem 3.425rem 0.5rem; /* 36 | 54,8 | 8 */ justify-content: flex-end; /* naslov pri dnu medija */ } /* Naslov: Mobile HP.pdf ima 37 px ExtraLight s korakom 44 (y 551 / 595 / 639 / 683). Tema je davala mobilnu skalu 36 px uz desktop omjer proreda (38,1 px). */ .hero--hp h1.hero__title { font-size: 2.3125rem; line-height: 2.75rem; } /* Mobilni heroj u dizajnu ima samo naslov; podnaslov se gasi poljem `m_hide_subtitle` (vidi `hero_hp.php`). */ .hero--m-bez-podnaslova .hero__subtitle { display: none; } /* Bez podnaslova naslov je zadnji red heroja: donja margina naslova (1rem iz `.hero__title`, razmak DO podnaslova) ostaje bez svrhe i dizala je naslov 16 px — vrh slova je bio na 535 umjesto 551. */ .hero--m-bez-podnaslova h1.hero__title { margin-bottom: 0; } /* Vlastiti kadar za telefon (polje `m_image`) umjesto videa. */ .hero--m-img .hero__media > .smile-media { display: none; } .hero--m-img .hero__m-img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* M03 (Pragma, 30. 9. 2026) — video za telefon (polje `m_video`, heroj naslovne i foto heroj): umjesto desktop medija, IZNAD slike za telefon, koja ostaje ispod kao plakat dok video ne krene. Skriveni desktop video se tako ne preuzima (izvor dodaje `sections.js` tek prikazanom videu). */ .hero--m-video .hero__media > .smile-media { display: none; } .hero--m-video .hero__m-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Preljev na telefonu je jaci: bijelo -> siva 0,184 (Mobile HP.pdf). */ .hero--hp .hero__shade { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, var(--hero-shade-m, var(--hero-shade, .5)))); } /* Okvir naslova je na desktopu sirok tacno 421 px da bi tekst pao na x 991; na uskom ekranu ta sirina samo steze naslov. */ /* `margin-left: auto` je iz desktopa, gdje naslov stoji u desnoj polovini. Na uskom ekranu je kutiju sa `width: auto` skupljao na njen sadrzaj i lijepio uz desni rub, pa je naslov pocinjao na x 130 umjesto na x 53. U dizajnu su sva cetiri retka poravnata ULIJEVO. */ .hero--hp .hero__title-box--right { width: auto; margin-left: 0; } /* TVRDI PRIJELOM OSTAJE. Prvo je bio ugasen, po pravilu iz `MOBILE_RULES`, i to je odmah pokvarilo naslov: u ispisu stoji "Vediamo una
soluzione", bez razmaka oko prijeloma, pa su se rijeci slijepile u "unasoluzione", "dovealtri", "unlimite". Ispostavilo se i da prijelom nije bio uzrok: naslov se lomio na sedam redaka zato sto je okvir na 430 px padao na 230 px sirine. Cim okvir dobije punu sirinu, ista cetiri prijeloma daju tacno cetiri retka — koliko ih ima i mobilni dizajn. Pravilo je dakle bilo suvisno. */ /* U2 (korisnik, 30. 9. 2026) — položaj teksta heroja naslovne NA TELEFONU (polja „… (telefono)"). Danas: sve dolje lijevo. Pravila su iza `.hero--hp.hero--h-838 .hero__inner` iste težine (0-3-0), pa pobjeđuju samo uz klasu. Gore i u sredini tekst ne ide pod zaglavlje: najmanje `--m-zaglavlje` + 24, kao foto heroj. */ .hero--hp:is(.hero--my-top, .hero--my-middle) .hero__inner { padding-top: calc(var(--m-zaglavlje, 4.745rem) + 1.5rem); } .hero--hp.hero--my-top .hero__inner { justify-content: flex-start; } .hero--hp.hero--my-middle .hero__inner { justify-content: center; } .hero--hp.hero--my-bottom .hero__inner { justify-content: flex-end; } .hero--hp.hero--mx-left .hero__inner { align-items: flex-start; } .hero--hp.hero--mx-center .hero__inner { align-items: center; } .hero--hp.hero--mx-right .hero__inner { align-items: flex-end; } /* Automatska marža okvira naslova (desktop `title_pos`) bi pobijedila `align-items` i vratila ga uz rub. */ .hero--hp:is(.hero--mx-center, .hero--mx-right) .hero__title-box { margin-inline: 0; } /* `title_pos: center` je izbor za desktop: na telefonu naslov ostaje kao danas (lijevo, puna širina) dok se ne izabere polje za telefon. */ .hero--hp .hero__title-box--center { width: auto; margin-inline: 0; text-align: left; } .hero--hp.hero--mta-left :is(.hero__title-box, .hero__bottom) { text-align: left; } .hero--hp.hero--mta-center :is(.hero__title-box, .hero__bottom) { text-align: center; } .hero--hp.hero--mta-right :is(.hero__title-box, .hero__bottom) { text-align: right; } /* Preljev prati tekst: gore — tamno gore; u sredini — tamno u sredini. */ .hero--hp.hero--my-top .hero__shade { top: 0; bottom: auto; background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, var(--hero-shade-m, var(--hero-shade, .5)))); } .hero--hp.hero--my-middle .hero__shade { top: 0; bottom: 0; height: auto; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, var(--hero-shade-m, var(--hero-shade, .5))) 50%, rgba(0, 0, 0, 0)); } /* ---------- prva posjeta ---------- Mobile HP, bijela traka y 6825-7519: kartice NEMA. Naslov, uvod, fotografija 358 x 253 sa zaobljenjem, naslov 22 px, tekst i dugme stoje jedno ispod drugog na bijeloj podlozi, a naslov i tekst su CRNI (izvuceno: oba bloka nose `#000000`). Sajt je crtao desktop: tamnu plohu s gradijentom i razmakom od 16 px, zbog kojeg je fotografija bila 326 px siroka i pocinjala na x 52 umjesto na x 36. Gasi se SAMO svijetla varijanta. Tamna (`.sec--v-dark .prima__card`) ostaje kakva jeste — za nju mobilnog dizajna nema, a pogadanje bi bilo gore od desktop rasporeda. Boja teksta je tipografija, ali je ovdje posljedica rasporeda: bez nje bi bijeli tekst ostao na bijeloj podlozi. Prijavljeno Toku 2. */ .sec--v-light .prima__card { padding: 0; background: none; } /* `--c-dark` NE POSTOJI — tipografija tamnu boju pise kao `#000` u `.c-dark.c-dark`. S nepostojecom varijablom deklaracija je nevazeca, pa je tekst ostao bijel na bijeloj podlozi i kartica je izgledala prazno. Token koji postoji je `--c-black`. */ .sec--v-light .prima__card-title, .sec--v-light .prima__card-text { color: var(--c-black, #000); } /* Uspravni razmaci i slovo mobilne prve posjete, iz Mobile HP (okviri redaka iz PDF-a; naslov 30/45, uvod 16/22, naslov kartice 22/27,5, tekst 16/20, pilula iz natpisa dugmeta): dno naslova 6953,0 -> uvod 6962,4 9,4 dno uvoda 7028,4 -> fotografija 7048,0 19,6 dno fotografije 7301,0 -> naslov kart. 7334,85 33,85 dno naslova kartice 7362,35 -> tekst 7372,4 10,05 dno teksta 7432,4 -> pilula 7452,9 20,5 Sajt je davao 24 / 38 / 24 / 14 / 14 (razmaci mreze i margine odlomka), uvod i tekst kartice na 14 umjesto 16 px, a tekst s korakom 22 umjesto 20. Ispravka `cta_gap` se ovdje NE dodaje: izmjerena je na desktop PDF-ovima. Uvod ima udvojenu klasu jer mu velicinu inace drzi `.fs-14.fs-14`. */ .sec--v-light .prima__head { row-gap: .5875rem; margin-bottom: 1.225rem; } /* 9,4 / 19,6 */ .sec--v-light .prima__aside.prima__aside { font-size: 1rem; line-height: 1.375; } /* 16 / 22 */ /* Okvir uvoda je u Mobile HP siri od stupca od 358: pocinje na x 33, a drugi redak („e ricevi una valutazione chiara, costruita sulla") ide do 397,4. U 358 px „sulla" pada u treci redak. Okvir koji daje prelom iz dizajna je uzak raspon: >= 359 da „sulla" ostane u drugom retku, < 364 da „e" ne prijede u prvi — izmjereno u pregledniku, 361 lomi tacno kao PDF. Preuzima se i polozaj (PRV-N04): okvir 33..394 nije izuzetak nego drugi rub Mobile HP-a — na njemu stoji i fotografija mobilne kartice tima (33..394, `.team__m`; bijeli panel ispod nje je na 34..394). Tinta uvoda je tada na x 34, kao u dizajnu (bila je 37). */ .sec--v-light .prima__aside { position: relative; left: -.1875rem; width: calc(100% + .1875rem); max-width: none; } /* 33, 358 + 3 = 361 */ .sec--v-light .prima__card { row-gap: 2.115625rem; } /* 33,85 */ .sec--v-light .prima__card-title { line-height: 1.25; margin-bottom: .628125rem; } /* 27,5 / 10,05 */ .sec--v-light .prima__card-text { font-size: 1rem; line-height: 1.25; } /* 16 / 20 */ .sec--v-light .prima__cta { margin-top: 1.28125rem; } /* 20,5 */ /* Tamna pilula na telefonu (PRV-N01): natpis „Prenota la prima visita gratuita" je širok 245,3, a stupac kartice 320. Desktop uvlaka 27,2 + razmak 22,8 + krug 29 + desno 7 traži 331: pilula se skuplja, a skupljanje (components.css, razmakničar) uzme i djelić piksela natpisu — dovoljno da se prelomi u dva reda. Mobilna uvlaka ove pilule postoji samo za svijetlu varijantu (24, Mobile HP); tamna uzima istu, a razmak do kruga je odmah najmanji (12): 24 + 245,3 + 12 + 29 + 7 = 317,3 stane bez skupljanja, natpis ostaje u jednom redu. */ .sec--v-dark .prima__cta.btn--lg { padding-left: 1.5rem; --btn-gap: .75rem; } /* 24 / 12 */ /* ---------- kartice povjerenja ---------- Mobile HP, y 9985-10472: dvije bijele ploce 358 siroke, jedna ispod druge, razmak 19 px. Tema je drzala 24. Visine iz dizajna (165 i 303) se NE prepisuju: druga ploca je u dizajnu visoka 303 jer nosi cetiri logotipa certifikata u dva reda, a ti logotipi nisu isporuceni (pitanje 1 u `PITANJA_ZA_PRAGMU.md`). Dok ne stignu, ploca je prazna i svaka nametnuta visina bi bila prazan prostor umjesto sadrzaja. */ .trust--v1, .trust--v2 { gap: 1.1875rem; } /* 19 */ /* Pravna linija podnožja na uskom ekranu je u footer.css (crte se vide, a crta na početku preloma se odsijeca). */ /* ---------- mobilni kadar slike ---------- Mobilni dizajn kadrira slike uze nego desktop, i to razlicito od sekcije do sekcije: „Approccio integrato“ je 358 x 304 (omjer 1,177), a „Straumann Pro Arch“ 430 x 417 (1,031). Obje sekcije na sajtu nose iste klase (`sec sec--media-text sec--dark`), pa se iz CSS-a ne mogu razlikovati — mjera zato dolazi iz polja sekcije (`m_img_width` i `m_img_height`), koje sije `tok3_polja.php` u koraku 5. Kad polja nisu popunjena, obje varijable su prazne i `aspect-ratio` je nevazeca deklaracija koju preglednik preskoci — slika tada zadrzava svoj prirodni omjer, tacno kako se ponasala i prije. Visinu na uskom ekranu vec pusta `sections.css` (`height: auto`). */ /* NIKAKVE ZAMJENSKE VRIJEDNOSTI. Prva verzija je glasila `aspect-ratio: var(--m-img-ar, auto)`, uz biljesku da sekcija bez mjere time „dobija auto i zadrzava svoj prirodni omjer". Ta biljeska je bila NETACNA i pravilo je kvarilo svaku sliku bez mjere: autorski `auto` nije isto sto i odsutno pravilo. Preglednik za `` sam drzi `auto attr(width) / attr(height)`, a autorski `auto` taj omjer brise. Slika koja jos nije ucitana tada nema nijedan izvor visine i rastegne se na visinu susjeda. Mjereno na sekciji „Prezzi chiari": na 1512 px `aspect-ratio` je `auto 844 / 512` i slika 256 px, na 430 px `auto` i slika 1500 px, uz `naturalWidth = 0`. Sekcija je zbog toga bila 1928 px umjesto 678. Zato mjeru sada nosi KLASA koju `sections.php` dodaje samo kad mjera postoji: sekcija bez nje ne dobija nijednu deklaraciju. Nasao koordinator. */ /* Kadar je mjera TELEFONA (okvir 430). Na tabletu (768-1023) dizajna nema, a isti omjer na punoj širini daje fotografiju koja zauzme cijeli ekran: Olistico na 768 px 696 x 591, naslov tek 600 px ispod vrha sekcije (nalaz OLI-N03). Tamo slika zadržava svoj prirodni omjer, kao i svaka media_text sekcija bez mobilne mjere. Sekcija sa ZASEBNOM mobilnom fotografijom (`m-slika`, Straumann) kadar treba uz tu fotografiju — izrezana je u omjeru kadra, a bez njega bi je Chrome sabio u omjer atributa desktop slike (736 x 411). Zasebna mobilna fotografija (Straumann V1) je takodjer mjera TELEFONA: na tabletu (768-1023) stoji desktop fotografija u svom omjeru, sa znakom kao slojem — kao Olistico. Mobilni kadar 717 x 694 je na 768 px zauzimao gotovo cijeli ekran, a naslov je počinjao 760 px ispod vrha sekcije (nalaz MM-K7-02). `` u `media_text.php` ima isti prag. */ @media (max-width: 767px) { .sec--m-kadar .media-text__img { aspect-ratio: var(--m-img-ar); object-fit: cover; } } /* ---------- mobilna velicina naslova sekcije ---------- Isti obrazac kao kadar, i iz istog razloga. Mobilni dizajn naslovu sekcije ne daje jednu skalu: „Approccio integrato" je 35 px, „Straumann Pro Arch Center of Excellence" 30 px, a obje sekcije na desktopu imaju 38 i nose iste klase. Sajt im je davao 28 px, koliko mobilna skala pisma daje za 38. Tezina selektora je namjerno tri klase: velicinu inace postavlja `.fs-38.fs-38` iz `tipografija.css`, koja ima dvije. */ /* Naslov NIJE uvijek dijete kontejnera: u media_text sekciji stoji unutar `.media-text__body`. Prva verzija je pisala `.sec--m-naslov > .sec__inner > .sec__title` i nije hvatala nista — klasa i varijabla su bile na mjestu, a slovo je ostalo 28 px. */ /* `.prima__title` je uz `.sec__title` namjerno: naslov sekcije prve posjete ne nosi zajednicku klasu nego svoju, pa ga pravilo pisano samo na `.sec__title` ne bi doseglo — ista zamka kao selektor koji je trazio naslov kao dijete kontejnera. */ .sec--m-naslov .sec__title, .sec--m-naslov .prima__title { font-size: var(--m-title-size); } /* Prored ima svoju klasu iz istog razloga iz kojeg kadar ima svoju: deklaracija koja se ispise bez mjere nije bezopasna. Dizajn ga i ne izvodi iz veličine — 47 px na 35 i 38,5 na 30 nisu isti omjer. Sajt je na naslovu od 35 px držao prored 33,16, dakle uži od samog slova. */ .sec--m-prored .sec__title, .sec--m-prored .prima__title { line-height: var(--m-title-lh); } /* ---------- forma ---------- Mobile HP, ploca 358 x 693 na x 36 (y 9271,9-9964,9). Polja su visoka 51 px s korakom 69, dakle RAZMAK 18; na sajtu su nalijepljena jedno na drugo (korak 51, razmak 0). Cetiri razmaka nedostaju, 72 px. Redoslijed je drugi: dizajn rada Nome, Cognome, E-mail, Telefono, pa Messaggio NA KRAJU. Sajt poruku stavlja treca, jer na desktopu ona stoji u desnom stupcu preko dva reda, pa se pri slaganju u jedan stupac nade u sredini. Na uskom ekranu se zato vraca na kraj. Mjere polja su vec tacne i ne diraju se: visina 51, poruka 113,4, dugme 125 x 37 na x 245 — sve se poklapa s dizajnom. */ .smile-form__grid { display: flex; flex-direction: column; gap: 1.125rem; /* 18 */ } /* Poruka na kraj. `:has()` je jedini nacin bez diranja predloska, koji drzi drugi tok; ako ga preglednik ne poznaje, polje ostaje gdje je bilo — razmaci i dalje rade. */ .smile-form__grid .smile-form__field:has(textarea) { order: 1; } } /* ---------- tim: mobilna kartica (Mobile HP.pdf, y 7794-8363) ---------- Na telefonu dizajn umjesto naslova „I nostri esperti", mreze strucnjaka i dugmeta ispod nje crta JEDNU karticu pune sirine: fotografija 361 x 278 (7794..8071), bez zaobljenja na vrhu panel bijel, 8072..8363, donji uglovi zaobljeni naslov 16 Bold, vrh reda 8091 -> 19 od vrha panela uvod 16 Medium, prored 20, vrh 8121 -> 10 ispod naslova tekst 16 Light, prored 20, odmah ispod uvoda (bez razmaka) pilula 211 x 43 na 8297..8339, 16 ispod teksta, 24 do dna uvlaka 23 lijevo (panel 34, natpis 57, pilula 57, natpis pilule 79) Sadrzaj dolazi iz polja `m_*` sekcije; bez njih se nista od ovoga ne ispisuje i na telefonu ostaje mreza. Kartica je u dizajnu siroka 361 (x 33..394), tri piksela sira od stupca (36..394) i to ulijevo — fotografija u PDF-u je isto 361 x 278. Sirina ide na 100 % + 3, a `left` (kartica je `position: relative`) vraca je 3 px ulijevo; tok i susjedi se ne pomjeraju (MHP-K01). Bijeli panel NIJE iste sirine kao fotografija (FT-N01): u Mobile HP je fotografija na x 33..394, a panel na 34..394 — lijevi rub panela je piksel desno od fotografije, desni rubovi se poklapaju. Donji uglovi panela su zaobljeni 15 px: profil pokrivenosti ugla po redovima od dna (11,42 / 8,49 / 6,73 / 5,42 …) poklapa se s krugom r 15 na 0,01, a s r 12 (koliko je bilo) tek na 29,6. Zato pozadinu i zaobljenje nosi panel, a ne kartica: panel ima 1 px lijeve margine i 1 px manju lijevu uvlaku, pa tekst i pilula ostaju na x 57, a sirina retka 317. */ .team__m { display: none; } /* Polje „Colore di ruolo e nome sulle foto" (`over_color`): klasa i varijabla postoje samo kad je popunjeno, na svim širinama. */ .team--over-fg .team__over, .team--over-fg .team__over .team__role, .team--over-fg .team__over .team__name { color: var(--team-over-fg); } /* Zvanje u mrezi stranice tima je AZURNO (Modifiche_01, slika 23: uloga #009CC7 ≈ accent, ime bijelo), na svim sirinama. Polje sekcije „Colore del ruolo (griglia)" (`role_color`, team.php daje `--team-role-fg`) ga mijenja. Mora stajati POSLIJE `.team--over-fg` (ista specificnost): u mrezi boju zvanja nosi ovo polje, a „Colore del nome" samo ime. */ .team--grid .team__over .team__role { color: var(--team-role-fg, var(--c-accent)); } @media (max-width: 767px) { /* `.sec--team` ispred: dugme sekcije drzi `display: flex` iz pravila `.sec--team > .sec__inner > .btn` (tri razreda), koje bi inace pobijedilo. */ .sec--team > .team-ima-m > .sec__head, .sec--team > .team-ima-m > .sec__title, .sec--team > .team-ima-m > .team, .sec--team > .team-ima-m > .team__group, .sec--team > .team-ima-m > .team__cta, .sec--team > .team-ima-m > .sec__empty { display: none; } .team__m { display: block; position: relative; left: -.1875rem; /* 33, ne 36 */ width: calc(100% + .1875rem); /* 361 */ } .team__m-img { display: block; width: 100%; height: 17.375rem; object-fit: cover; } /* 278 */ /* Lijevo 24 od ruba kartice (33 -> tekst i pilula na 57; panel sam pocinje na 34, pa mu je uvlaka 23), desno 20: najduzi red uvoda („Esperienza specialistica e competenze") ide do x 372,5, a panel do 394 — sa 24 desno bi se lomio iza „e". */ .team__m-body { margin-left: .0625rem; /* panel 34..394, fotografija 33..394 */ padding: 1.1875rem 1.25rem 1.5rem 1.4375rem; /* 19 20 24 23 -> tekst na 57 */ border-radius: 0 0 .9375rem .9375rem; /* 15 */ /* Polje sekcije „Sfondo delle schede" (`--sec-card-bg`); prazno = bijelo. */ background: var(--sec-card-bg, var(--c-white, #fff)); color: #000; } .team__m-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.25; } /* Velicinu uvoda i teksta (16/20) na ≤1023 nadjacava mobilno.css (M08, 14/22). */ .team__m-lead { margin: .625rem 0 0; font-size: 1rem; font-weight: 500; line-height: 1.25; } /* 10 */ .team__m-text, .team__m-text p { margin: 0; font-size: 1rem; font-weight: 300; line-height: 1.25; } .team__m-cta { margin-top: 1rem; } /* 16 */ /* Ista pilula kao „Conosci il team" u kartici povjerenja: uvlaka 22, razmak natpis -> krug 29,4, ukupno 211 (Mobile HP x 57..267). Razmak ide kroz `--btn-gap`, NE `gap`: na telefonu dugme ima `gap: 0` i razmak nosi skupljivi `::after` (components.css). Uz `gap` je taj `::after` postao treca stavka s jos dva razmaka, pa je pilula bila 252 px s prazninom izmedu natpisa i kruga (MHP-N01). */ .team__m-cta.btn--lg { padding-left: 1.375rem; --btn-gap: 1.8375rem; } }