/* Sekcije. Ovdje je strukturni raspored zajednicki svim sekcijama. Tacne mjere po stranicama dolaze u fazi 3, kad se svaka stranica poredi sa svojim PDF-om. Sve duzine su u rem, kao i ostatak teme: 1rem = 16px na 1512, a html{font-size:calc(100vw/1512*16)} skalira cijeli raspored izmedu 1024 i 1511 px. */ /* ---------- omotac sekcije ---------- */ .sec { position: relative; padding-top: var(--sec-pt, 0); padding-bottom: var(--sec-pb, 0); } .sec--sep-top::before, .sec--sep-bottom::after { content: ""; position: absolute; left: 50%; /* `--sec-sep-dx` (polje `sep_dx`): vodoravni pomak linije iz PDF-a. */ transform: translateX(calc(-50% + var(--sec-sep-dx, 0px))); width: 80.375rem; /* 1286 */ max-width: calc(100% - 2.5rem); height: 1px; background: var(--sec-sep, #ffffff); } /* `--sec-sep-pomak` (polje `sep_offset`) spušta liniju u unutrašnjost sekcije: DSD na Prima visita ima liniju 20 px ispod ruba tamne trake. Boja: SVIH 56 linija u PDF-ovima su isti potez — bijeli (1,1,1), debljine 1 pt, neprozirnost 1. Sivo na 100 % je samo raster: potez koji stoji na granici piksela (42 linije) pada u dva reda 141/123, a onaj s y ,25 / ,58 / ,75 u jedan red 189-238. Zbir svjetla je u oba slučaja isti kao jedan red 255, a na 2x i 3x (Retina) svaka linija je čista 255 u punoj debljini. Zato je boja #ffffff; #ffffff80 je na Retini bio dvaput tamniji od dizajna, a na 1x upola slabiji. */ .sec--sep-top::before { top: var(--sec-sep-pomak, 0px); } .sec--sep-bottom::after { bottom: var(--sec-sep-pomak, 0px); } /* Na telefonu linija ide u širini SADRŽAJA (x 36–394 na 430), kao fotografije, kartice i linija koraka `.steps__band-rule` — ne 20–410. Na Ponte dentale su dvije linije oko iste fotografije bile nejednake (36–393 i 20–409), KOR-N5. Na desktopu se ništa ne mijenja: tamo je `--m-side` 113 px, a 1286 je ionako uže od 100 % − 2 × 113. */ @media (max-width: 1023px) { .sec--sep-top::before, .sec--sep-bottom::after { max-width: calc(100% - 2 * var(--m-side)); transform: translateX(-50%); } } /* tema Svijetla tema nosi i svijetlu pozadinu. Bez toga bi izbor "tema: chiara" bez izabrane pozadine dao tamni tekst na tamnoj stranici - urednik bi to vidio tek kad objavi. Izabrana pozadina dolazi kao inline stil i ovo nadjacava, pa izbor iz admina i dalje vrijedi. */ .sec--light { color: var(--c-bg); background-color: var(--c-white); } .sec--light .sec__title, .sec--light .sec__lead, .sec--light .sec__text { color: var(--c-bg); } /* Element koji nosi vlastitu tamnu pozadinu nosi i vlastitu boju teksta. Bez ovoga svijetla tema sekcije obori tekst na tamnu boju i kartica ostane tamno na tamnom - tako je kartica "Prima visita" bila necitljiva cim joj je sekcija dobila svijetlu temu. */ .sec .hero-card, .sec .info-cards__item, .sec .prima__card, .sec .reviews__item, .sec .qcards__item, .sec .scards__item, .sec .tiles__item, .sec .pay__iban, .sec .cta-banner { color: var(--c-white); } /* Bankovni podaci: polje `iban_color` (payments.php); prazno = bijelo. */ .sec .pay__iban { color: var(--pay-iban-c, var(--c-white)); } /* Bijela kartica je obrnut slucaj: uvijek tamni tekst. */ .sec .trust__card { color: var(--c-bg); } /* ---------- kontejneri ---------- */ .sec__inner { margin-inline: auto; width: 100%; } .sec__inner--1286 { max-width: 80.375rem; } /* 1286 */ .sec__inner--1070 { max-width: 66.875rem; } /* 1070 */ .sec__inner--880 { max-width: 55rem; } /* 880 */ /* Uza traka teksta. Dizajn ima dvije sirine trake, ne jednu: na 22 trake s tijelom od 14 px najduzi redak ide do 808-850 px na deset njih i do 612-634 px na jedanaest, bez ijedne vrijednosti izmedu. Izmjerio Tok 4. */ .sec__inner--638 { max-width: 39.875rem; } /* 638 */ .sec__inner--full { max-width: none; } /* Bocni razmak ispod sirine dizajna. Na 1512 px kontejner od 1286 sam ostavi 113 px sa svake strane, ali na telefonu bi tekst dodirivao rub ekrana — na 390 px je stajao na x = 0. Granica je 1023, ne 1340 (NK-02, odluka koordinatora u krugu 4): između 1024 i 1511 px je cijeli raspored umanjena kopija dizajna (html font-size u tokens.css), pa kontejner od 80,375rem ionako ostavlja 113/1512 širine sa svake strane (76 px na 1024). Uvlaka od 1,25rem je tamo pomjerala naslove i kartice ~13 px udesno od umanjenog dizajna (HP na 1024: x 90 umjesto 77). Ispod 1024 bočni rub daje layout-a.css (var(--m-side)). */ @media (max-width: 1023px) { .sec__inner { padding-inline: 1.25rem; } } /* ---------- zajednicka tipografija sekcije ---------- */ .sec__eyebrow { margin: 0 0 .75rem; /* Mjereno iz PDF-ova: natpis je 16 px Bold verzalom i BIJEL, ne plav. Gdje dizajn trazi plavu, boja dolazi iz klase. */ font-size: 1rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; color: inherit; } .sec__title { margin: 0 0 1.25rem; font-size: 2.5rem; /* 40 */ font-weight: var(--fw-light); line-height: 1.125; } /* Na ≤1023 uvod je 14/22 kao i ostali odlomci: mobilno.css (M08, Modifiche_01). */ .sec__lead { margin: 0 0 1rem; font-size: 1.25rem; /* 20 */ font-weight: 500; line-height: 1.25; } /* U centriranoj traci lead NIJE zaseban blok nego prvi redak teksta. Mjereno kao KORAK od vrha leada do vrha tijela, a ne kao razmak medju okvirima — okvir u PDF-u ide od gornjeg do donjeg produzetka pisma, a okvir retka u pregledu ima jos pola viska proreda sa svake strane, pa razmak medju njima uporedjuje dvije razlicite stvari. odontoiatria korak 22,0 lead 1 redak sajt 38,0 04-prima-visita korak 22,0 lead 1 redak sajt 38,0 03-prezzi-1 korak 22,0 lead 1 redak sajt 38,0 05-testimonianze korak 44,0 lead 2 retka sajt 60,0 01-clinica-clinica korak 66,0 lead 2 retka sajt 60,0 Na cetiri od pet korak je tacno `broj redaka x 22`, dakle razmaka nema nikakvog. Isto je ranije zakljuceno za `.sec__text` („Dizajn nema dodatni razmak izmedu pasusa"), samo lead tada nije bio popravljen. NUSPOJAVA, da se ne precuti: peta traka, `01-clinica-clinica`, ima u dizajnu korak 66 za lead od dva retka — dakle JEDAN PRAZAN RED. Ovo pravilo je tamo odvodi s -6 na -22 u tom koraku. Prazan red na jednoj stranici je podatak, ne izuzetak: dizajn ga ondje stvarno ima, a tema za tu svrhu ima `sec__text--spaced`, koji se na lead jos ne odnosi. Provjereno da je pravilo zivo, programski a ne okom: donju marginu leada postavlja jedino red 98 iznad; `razmaci.css`, `tipografija.css`, `layout-a.css`, `layout-b.css` i `clanak.css` na `.sec__lead` diraju samo boju i poravnanje. Ovo je 0-2-0 naspram 0-1-0. */ /* Uvod sekcije nije sirok koliko kontejner. Mjereno na DESET sekcija, ink mu je u dizajnu 495 do 841 px, a na sajtu je isao punom sirinom (736 do 1247) ili zamjenskih 856 i zbog toga se lomio u manje redaka nego dizajn — na `landing-pazienti` 1247 naspram 597. Vrijednost je razlicita od sekcije do sekcije, pa dolazi iz polja `lead_width`; bez polja se nista ne mijenja. Sijac je `deploy/seed/lead_sirina.php`; broj deset dolazi odande i tamo su objasnjena tri pravila koja izbacuju ostale (jednoredni blok mjeri duzinu teksta a ne sirinu stupca; puna sirina nije ogranicenje; blok koji dizajn ne drzi centriranim trazi mjeru stupca, ne sirinu uvoda). POTOMAK, NE IZRAVNI POTOMAK. Varijablu `smile_section_settings()` stavlja na SEKCIJU, a lead nije u svakom rasporedu dijete kontejnera: `text_band` ga ispisuje kao `.sec__inner > .sec__lead`, `media_text` unutar stupca `.media-text__body`. Dok je ovdje stajalo `> .sec__inner > .sec__lead`, 7 od 12 posijanih vrijednosti nije radilo NISTA — izmjereno na `/smile-team/`: trazeno 495, izmjereno 643. Drugi selektor koji je tu stajao, `.sec__lead[style*="--sec-lead-w"]`, trazio je varijablu na samom leadu i nije mogao pogoditi nikad; uklonjen je. KLASA JE UDVOJENA (`.sec__lead.sec__lead`), i to je potrebno. Bez toga je pravilo 0-4-0, tacno koliko i `max-width: 856` iz `layout-a.css` za `steps`/`columns` — a taj se fajl ucitava POSLIJE, pa kod izjednacene specificnosti pobjeduje on. Dok su sve sekcije s `lead_width` bile `media_text` i `text_band`, to se nije vidjelo; cim je sijac poceo citati i `intro` (dakle `columns` i `steps`), mjera po sekciji bi pala na 856 i vrijednost bi opet bila mrtva. 856 je zamjenska vrijednost izvedena iz medijana svih uvoda koraka i kolona; mjera izmjerena za TU sekciju je jaca od medijana, pa mora i u CSS-u biti jaca. Tudji lead u ugnijezdenoj sekciji: provjereno na renderiranom HTML-u svih 44 objavljene stranice — nijedna `.sec` ne sadrzi drugu `.sec`, a svaka sekcija s varijablom ima tacno JEDAN `.sec__lead`. Ako se ugnjezdivanje ikad uvede, unutrasnji lead ce naslijediti mjeru vanjske sekcije. `margin-inline: auto` vrijedi pod TRI uvjeta. Prvo, samo kad ogranicenje POSTOJI — inace bi uvod koji je lijevo poravnat bio centriran. Drugo, samo za lead koji je DIJETE kontejnera, dakle za centriranu traku; lead u stupcu (`media_text`) se ne centrira, jer stupac ima svoje poravnanje i centriranje bi ga pomjerilo za pola razlike sirina i pokvarilo x koji je danas tacan. Trece, samo kad sekcija NIJE `sec--ta-left`. Taj treci uvjet je zatvaranje latentnog ruba, ne popravak zatecenog kvara: danas nijedna sekcija nije istovremeno `ta-left` i s `lead_width`, jer sijac takvu kombinaciju ne moze napraviti (necentriran blok preskace). Ali rucni upis bi je napravio, a mjerenje kroz sve PDF-ove kaze da su takve sekcije stvarne: svih PET uvoda koje dizajn drzi uz lijevi rub kontejnera (ink x 112,0 · 108,0 · 113,0 · 112,0 · 112,0 uz rub na 113) nosi bas `title_align = left`. Bez ovog uvjeta bi im `lead_width` pomjerio uvod na sredinu. `layout-a.css` na svojoj strani isti izuzetak vec ima. */ .sec[style*="--sec-lead-w"] .sec__inner .sec__lead.sec__lead { max-width: var(--sec-lead-w, none); } .sec[style*="--sec-lead-w"]:not(.sec--ta-left) > .sec__inner > .sec__lead { margin-inline: auto; } .sec--text-band .sec__lead { margin-bottom: 0; } /* Tijelo teksta je u PDF-ovima 14 px s proredom 22: od svih redaka duzih od 40 znakova, 2078 je na 14 px a samo 251 na 16. Tema je imala 16 px, pa se svaki pasus lomio na drugom mjestu nego u dizajnu. Dizajn nema dodatni razmak izmedu pasusa: prored je svuda jednak, a prelom pasusa se vidi samo po kraju retka. Zato je margina 0, a ne 1em. Gdje PDF stvarno ima prazan red, sekcija dobije klasu sec__text--spaced. */ .sec__text { font-size: .875rem; line-height: 1.5714; } .sec__text p { margin: 0; } /* Prazan red je JEDAN RED, ne jedno slovo: izmjereno kroz svih 46 PDF-ova, razmak izmedu dva pasusa od 14 px je ili 0-2 px (62 para, dakle bez praznog reda) ili 24,4 px (31 par, dakle s praznim redom). Nema nicega izmedu. `1em` je davalo 14 px. */ .sec__text--spaced p { margin: 0 0 1.375rem; } .sec__text--spaced p:last-child { margin-bottom: 0; } .sec__text ul { margin: 0 0 1em 1.25em; list-style: disc; } .sec__text ol { margin: 0 0 1em 1.25em; list-style: decimal; } .sec__text a { color: var(--c-accent); } .sec__text--long h2 { font-size: 1.75rem; margin: 1.5em 0 .5em; } .sec__text--long h3 { font-size: 1.375rem; margin: 1.25em 0 .5em; } /* Pravne stranice (page.php, 28. 10. 2026): podnaslovi ispod h1 stranice (38, light), ne iznad njega — 28/700 je na mobitelu bio veći od naslova. */ .sec__text--pravno h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: 2em 0 .625em; } .sec__text--pravno h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; margin: 1.5em 0 .5em; } .sec__text--pravno li { margin-bottom: .25em; } .sec__empty { opacity: .6; font-style: normal; } /* Zaglavlje sekcije s uvodom desno. Mjereno iz 00_Homepage.pdf: naslov pocinje na x 113, uvod na x 869, kontejner je 1286 - dakle lijevi stupac 643, razmak 113, desni 530. Naslov zadrzava .sec__title, pa sekcije bez uvoda ostaju nepromijenjene. Te mjere su ZADANE, ne jedine. Izmjerene su na sedam traka (`x = 869,0` na sest, `865,0` na jednoj, gdje je razlika ink prvog slova) i za njih su tacne. Ali dizajn ima i drugu traku, uzu: na `03-prezzi-1` sek0 i `05-testimonianze` sek0 naslov pocinje na 221, a uvod na 756. Kako je ta druga nadena, jer je pouka sira od ove dvije sekcije: 221 i 756 ne pristaju ni u jednu varijantu ove mreze dok se mjeri u kontejneru od 1286 — ni lijevo poravnat naslov (dao bi ink 113), ni centriran (434,5), ni desno poravnat (zavrsio bi na 756). Zakljucak je bio da tema taj raspored nema. Pogresan zakljucak: nije falila varijanta nego OKVIR. Traka stoji u 1070, a 1070 centriran u 1512 daje rub na 221 i sredinu na 221 + 535 = 756 — jedan parametar objasnjava oba broja. Kad nijedna varijanta ne pristaje, prvo se provjerava okvir u kojem se mjeri. Provjereno u pregledniku naspram PDF-a, oba ruba i broj redaka: /listino-prezzi/ naslov dizajn 221,0..562,8 3r sajt 221,0..562,8 3r uvod dizajn w 410,3 3r sajt w 410,3 3r /esperienze/ naslov dizajn 221,0..560,7 3r sajt 221,0..560,7 3r uvod dizajn 756,0..1186,2 2r sajt 756,0..1186,2 2r `--sec-head-gap: 0` nije izvedena nego IZMJERENA vrijednost: iz ink-a se moze procitati samo da je lijevi stupac plus razmak = 535, a ne kako se to dijeli. Podjela 535 + 0 je ona koja reprodukuje prelom naslova u tri retka i oba njegova ruba; druga podjela istog zbira lomila bi naslov drugdje i nije mjerena. Zato polje razlikuje PRAZNO (nije mjereno, vrijedi 113) od nule (izmjereno). */ .sec__head { display: grid; grid-template-columns: 1fr var(--sec-head-w, 33.125rem); gap: var(--sec-head-gap, 7.0625rem); max-width: var(--sec-head-max, none); /* Vrijedi tek kad ogranicenje postoji; bez njega je `max-width: none` pa `auto` nema sta centrirati i traka ostaje puna sirina kontejnera. */ margin-inline: auto; align-items: start; } .sec__head .sec__title { margin-bottom: 0; } .sec__head-intro { margin: 0; font-size: .875rem; /* 14 */ line-height: 1.6; /* Uvod ne mora ispuniti svoj stupac. Na uzoj traci je stupac 535 px, a ink uvoda u dizajnu 410,3 odnosno 430,2 — bez ovoga se tekst lomio u manje redaka nego dizajn (2 naspram 3 na `03-prezzi-1`). Isti podatak kao `lead_width`, samo za uvod koji stoji u traci. */ max-width: var(--sec-head-lead-w, none); } .sec__head-intro span[class*="fs-"] { display: inline; } /* Poravnanje naslova sekcije. Bez izbora vrijedi ono sto layout donosi: koraci i kolone su u PDF-ovima centrirani, ostalo je lijevo. */ .sec--ta-left .sec__title, .sec--ta-left .sec__lead { text-align: left; } .sec--ta-center .sec__title, .sec--ta-center .sec__lead { text-align: center; } .sec--steps > .sec__inner > .sec__title, .sec--steps > .sec__inner > .sec__lead, .sec--columns > .sec__inner > .sec__title, .sec--columns > .sec__inner > .sec__lead { text-align: center; } .sec--ta-left.sec--steps > .sec__inner > .sec__title, .sec--ta-left.sec--columns > .sec__inner > .sec__title { text-align: left; } /* Klase iz uredivaca. Stoje unutar elementa koji vec ima svoju velicinu i tezinu, pa moraju biti jace od nje - zato su vezane i za naslove. */ .sec__title span[class*="fs-"], .sec__lead span[class*="fs-"], .cols__title span[class*="fs-"], .steps__title span[class*="fs-"], .hero-card__title span[class*="fs-"], .hero__title span[class*="fs-"], .hero__subtitle span[class*="fs-"], .scards__title span[class*="fs-"], .prima__title span[class*="fs-"], .prima__aside span[class*="fs-"], .cta-banner__text span[class*="fs-"], .faq__q span[class*="fs-"], .sec__text span[class*="fs-"], .info-cards__title span[class*="fs-"], .two-col__title span[class*="fs-"], .trust__card-title span[class*="fs-"] { display: inline; } /* Naslov kolone s vlastitom velicinom nije verzal. Pravilo je nekad bilo :has(.fs-22), ali smile_heading() sada klasu prenosi na sam naslov i span nestane, pa selektor vise nije mogao pogoditi — cetiri naslova kolona su ostajala u verzalu. Pravo pravilo je uz klase uredivaca, na kraju datoteke, da bude jace od layouta. */ /* ---------- medij ---------- */ .smile-media { position: relative; width: 100%; height: 100%; } .smile-media__img, .smile-media__video { display: block; width: 100%; height: 100%; object-fit: cover; } .smile-media__overlay { position: absolute; inset: 0; background: var(--c-black); pointer-events: none; } .smile-carousel { position: relative; width: 100%; height: 100%; } .smile-carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; } .smile-carousel__slide.is-active { opacity: 1; position: relative; } .smile-carousel__dots { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; } .smile-carousel__dot { width: .5rem; height: .5rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .45); cursor: pointer; } .smile-carousel__dot.is-active { background: var(--c-white); } .smile-video { position: relative; width: 100%; height: 100%; } .smile-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 4.5rem; height: 4.5rem; border: 0; border-radius: 50%; background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath fill='%23463f3b' d='M16 9 0 18V0z'/%3E%3C/svg%3E") center / 1rem 1.125rem no-repeat; cursor: pointer; transition: background-color .2s ease, transform .2s ease; } /* M04 (Pragma, 30. 9. 2026): dugme play u „Video + testo" na hover postaje plavo s bijelim trokutom i malo naraste, kao na V1 (video_sezione.css:44, :55). Fokus tipkovnicom isto. */ @media (hover: hover) { .smile-video__play:hover { background-color: var(--c-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath fill='%23ffffff' d='M16 9 0 18V0z'/%3E%3C/svg%3E"); transform: translate(-50%, -50%) scale(1.06); } } .smile-video__play:focus-visible { background-color: var(--c-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath fill='%23ffffff' d='M16 9 0 18V0z'/%3E%3C/svg%3E"); transform: translate(-50%, -50%) scale(1.06); } /* ---------- heroj ---------- */ .hero { position: relative; } .hero__media { position: absolute; inset: 0; overflow: hidden; } .hero__media--split { position: absolute; inset: 0; z-index: 0; } /* Fotografija foto heroja ima u svih osam PDF-ova zaobljene uglove od 10 px (uvlaka 6-7 px u prvom redu piksela, nula u sedmom, na sva cetiri ugla). Tema ju je crtala s pravim uglovima. Vrijednost je polje `radius`. */ .hero--foto .hero__media { border-radius: var(--hero-radius, .625rem); } .hero__inner { position: relative; z-index: 1; height: 100%; } .hero--h-full { min-height: 100vh; } .hero--h-838 { min-height: 52.375rem; } /* mjera iz 00_Homepage.pdf */ .hero--h-820 { min-height: 51.25rem; } .hero--h-700 { min-height: 43.75rem; } .hero--h-560 { min-height: 35rem; } /* Visine koje dizajn stvarno trazi za foto heroje. Sve su bile na 820. */ .hero--h-851 { min-height: 53.1875rem; } /* 01_Landing_No Bone Implant */ .hero--h-801 { min-height: 50.0625rem; } /* cetiri landinga i prva posjeta */ .hero--h-794 { min-height: 49.625rem; } /* 0_Landing_Estetica dentale */ .hero--h-774 { min-height: 48.375rem; } /* 03_Landing_Impianti singoli */ .hero--h-753 { min-height: 47.0625rem; } /* 00_Landining_Riabilitazione */ .hero__ellipse { position: absolute; left: 0; right: 0; top: 0; height: 18.75rem; background: linear-gradient(to bottom, var(--c-ellipse) 0%, transparent 100%); opacity: .85; pointer-events: none; } /* Odmak odozgo je po stranici (`--hero-text-top`, iz dizajna); 9rem ostaje kao rezerva za heroje koji jos nemaju izmjerenu vrijednost. */ .hero__text { max-width: 46rem; padding-block: var(--hero-text-top, 9rem) 4rem; } .hero--center .hero__text { margin-inline: auto; text-align: center; } .hero--right .hero__text { margin-left: auto; text-align: right; } /* U2 (korisnik, 30. 9. 2026) — položaj teksta u foto heroju. Blok ponude i znak proizvoda idu S TEKSTOM: kod `align` center / right su ostajali uz lijevi rub (greška; danas sve stranice imaju `left`, pa ovo ne pogađa nijednu). Ponuda dobija istu kutiju kao tekst (46rem), da im se rubovi poklope i kad su redovi poravnati drugačije od položaja. Kao i `align`, bez media upita: važi i na telefonu dok polje za telefon nije izabrano (tamo ga nadjačavaju `--mx-*` / `--mta-*`). */ .hero--center .hero__offer { max-width: 46rem; margin-inline: auto; align-items: center; } .hero--right .hero__offer { max-width: 46rem; margin-left: auto; align-items: flex-end; } .hero--center .hero__logo img { margin-inline: auto; } .hero--right .hero__logo img { margin-left: auto; } /* Poravnanje redova (polje `ta`), jače od `.hero--center/right` (0-2-0). */ .hero--foto.hero--ta-left .hero__text { text-align: left; } .hero--foto.hero--ta-center .hero__text { text-align: center; } .hero--foto.hero--ta-right .hero__text { text-align: right; } .hero--foto.hero--ta-left .hero__offer { align-items: flex-start; } .hero--foto.hero--ta-center .hero__offer { align-items: center; } .hero--foto.hero--ta-right .hero__offer { align-items: flex-end; } .hero--foto.hero--ta-left .hero__logo img { margin-inline: 0 auto; } .hero--foto.hero--ta-center .hero__logo img { margin-inline: auto; } .hero--foto.hero--ta-right .hero__logo img { margin-inline: auto 0; } /* Okomito (polje `pos_y`, samo desktop): tekst i ponuda zajedno u sredini ili pri dnu heroja. Unutrašnji okvir dobija visinu heroja (`min-height: inherit`, kao kod heroja naslovne), a odmak odozgo iz polja `text_top` se tada ne koristi. Zaštita od 10rem = visina zaglavlja (header.css), da tekst na niskom prozoru ne ode pod meni. */ @media (min-width: 1024px) { .hero--foto:is(.hero--y-middle, .hero--y-bottom) > .hero__inner { display: flex; flex-direction: column; min-height: inherit; padding-block: 10rem 4rem; } .hero--foto.hero--y-middle > .hero__inner { justify-content: center; } .hero--foto.hero--y-bottom > .hero__inner { justify-content: flex-end; } /* Stavka s automatskom maržom (`.hero--center/right`) bi se u stupcu skupila na svoj sadržaj; puna širina (do 46rem) drži iste rubove kao bez okomitog položaja. */ .hero--foto:is(.hero--y-middle, .hero--y-bottom) :is(.hero__text, .hero__offer) { width: 100%; } .hero--foto:is(.hero--y-middle, .hero--y-bottom) .hero__text { padding-block: 0; } .hero--foto:is(.hero--y-middle, .hero--y-bottom) .hero__text + .hero__offer { margin-top: 4rem; } /* Potpis pacijenta stoji desno preko fotografije; kad je tekst desno, prelazi na lijevu stranu, da ne leži preko cijene. */ .hero--right .hero__quote { right: auto; left: 0; text-align: left; } } /* --------------------------------------------------------------------------- RAZMAK MEDJU SLOVIMA KOJI DIZAJN NEMA Cetiri nosioca su verzalnim naslovima davala tracking (`letter-spacing`) kojeg u PDF-ovima nema. Nije procijenjeno nego izvedeno iz mjere: razlika sirine podijeljena brojem razmaka medju slovima je PO NOSIOCU konstantna do druge decimale, dok je sam omjer sirina rasprsen 1,03-1,08 — da je posrijedi vodoravna skala, bilo bi obrnuto. nosilac bilo izvedeno iz dizajna blokova pada .cols__title 16 px .02em 0,021em -> 0 36 36 .hero__eyebrow .04em 0,043em -> 0 5 5 .team__area 22 px .02em 0,021em -> 0 3 3 .dist__title 16 px .02em 0,023em -> 0 2 2 Pravilo dira TACNO tih 46 blokova i svih 46 danas pada po sirini inka — nijedan koji prolazi nije izlozen. Svi su poravnati ulijevo (medijan |dx| 0,0 px), pa se pomjera samo desni rub; 44 od 46 su jednoredni, pa se ni prelom nema gdje pomjeriti. STO SE NE DIRA. `.sec__eyebrow` ima isti `.04em`, ali ga nijedan izmjeren blok ne nosi — bez mjere nema ni izmjene. `.cols__title` u varijantama `--t22`/`--t24` tracking vec ima na nuli, pa ih ovo ne tice. I obrnut rod (`.steps__title`, `.cols__title` 25 px, `.pricing__price`), gdje dizajn ima NEGATIVAN tracking kojeg tema nema, namjerno stoji: ondje bi pravilo diralo 116 blokova da popravi 76, stavilo 40 koji prolaze na kocku i promijenilo prelom na 90 viserednih. Brojke i obrazlozenje su u `deploy/GDJE_STOJI_ODSTUPANJE.md`. --------------------------------------------------------------------------- */ .hero__eyebrow { margin: 0 0 .75rem; /* Mjereno iz PDF-ova: natpis je 16 px Bold verzalom i BIJEL, ne plav. Gdje dizajn trazi plavu, boja dolazi iz klase. */ font-size: 1rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: 0; color: inherit; } .hero__title { margin: 0 0 1rem; font-size: 3.1875rem; font-weight: var(--fw-light); line-height: 1.1; } .hero__subtitle { margin: 0 0 1.5rem; font-size: 1.25rem; font-weight: var(--fw-light); line-height: 1.5; } /* Prored naslova i podnaslova u foto heroju je MANJI nego sto ga daju opce klase velicine. Mjereno u `02_Landing_All on 4_6 Straumann.pdf`: naslov 40 px ima korak 39 (dakle 0,975, a `.fs-40` daje 1,125), podnaslov 22 px ima korak 28 (1,2727). Na tri retka naslova to je 18 px razlike, i sve ispod toga se pomjeri za isto toliko. Selektor NAMJERNO nosi i naziv elementa: klase velicine (`.fs-40.fs-40`) stoje na kraju ove datoteke i imaju istu specificnost kao `.hero--foto .hero__title`, pa bi kao kasnije pravilo pobijedile. Bez `h1` i `p` ispod, prored je ostajao 45 i naslov je i dalje bio 18 px previsok. */ .hero--foto h1.hero__title { line-height: var(--hero-title-lh, .975); margin-bottom: var(--hero-title-gap, 1.5rem); } .hero--foto p.hero__subtitle { line-height: 1.2727; margin-bottom: 0; } /* Razmaci iz polja sekcije (vidi `hero_foto.php`): dizajn ih po stranici ima razlicite — prored naslova 35/36/39/45, razmak natpis -> naslov 17 do 45, dugme 17 do 106 px ispod podnaslova. Bez polja vrijedi zadano: natpis 12, naslov 24, dugme uz podnaslov. Prored podnaslova ide preko klase jer ga `tipografija.css` postavlja udvojenom klasom (`.hero__subtitle.hero__subtitle.fs-22`, 0-3-0): pravilo ispod mora biti jace, a kad polja nema, ne smije ga dirati. */ .hero--foto .hero__eyebrow { margin-bottom: var(--hero-eyebrow-gap, .75rem); } /* Vodoravni polozaj natpisa (polje `eyebrow_x`): u dizajnu natpis stoji 6 px lijevo od naslova na Estetici i Prima visiti, 2 px desno na Denti fissi. Relativni pomak ne mijenja tok — naslov i podnaslov ostaju gdje jesu. */ .hero--foto .hero__eyebrow { position: relative; left: var(--hero-eyebrow-x, 0px); } .hero--foto.hero--sub-lh p.hero__subtitle.hero__subtitle { line-height: var(--hero-sub-lh); } .hero--foto .hero__cta { margin-top: var(--hero-cta-gap, 0px); } /* Ukras u donjem desnom uglu (polje `corner`). Trobojka iz `Landing_Pazienti italiani.pdf`: tri vektorska oblika, prepisana s pocetkom u (1301, 630); okvir 211 x 221 do donjeg desnog ugla heroja (1512, 851). Bijeli klin u dizajnu ide 4,5 px ispod fotografije i 10 px desno od stranice — to odsijeca rub heroja, kao i stranica u PDF-u. */ .hero__ugao { position: absolute; right: 0; bottom: 0; z-index: 1; pointer-events: none; } .hero__ugao--flag-it { width: 13.1875rem; height: 13.8125rem; /* 211 x 221 */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 211 221'%3E%3Cpath fill='%23ffffff' d='M0 220.78C14.23 220.93 209.34 225.52 215.14 221.05C220.94 216.59 215.71 9.55 214.88 0C201.18 30.01 30.05 209.06 0 220.78Z'/%3E%3Cpath fill='%23c13844' d='M214.88 0C209.78 11.16 182.92 42.94 149.63 79.05L217.81 147.24C217.53 85.23 215.39 5.83 214.88 0Z'/%3E%3Cpath fill='%23169952' d='M74.51 156.72C40.58 190.07 10.94 216.52 0 220.78C8.52 220.87 81.95 222.55 140.72 222.93L74.51 156.72Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; } /* Blok ponude NEMA karticu iza sebe. U dizajnu su cetiri reda teksta polozena direktno na hero fotografiju, svi na x 113. Tema je crtala tamnu zamucenu karticu s uvlakom — nje u dizajnu nema nigdje. */ .hero__offer { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } /* Mjere iz `02_Landing_All on 4_6 Straumann.pdf`, vrhovi slova: stara cijena 534,4 | naziv 578,8 | nova cijena 588,4 | poziv 725,9. */ .hero__offer-old { margin: 0; font-size: 2rem; font-weight: var(--fw-light); line-height: 1.2; } .hero__offer-old s { /* Precrtavanje je u dizajnu VEKTORSKI pravougaonik, ne line-through fonta: No Bone Rect(113, 573, 238,4, 575), All on 4 Rect(113, 558, 241,7, 560) — debljina 2 px, 24 px ispod vrha okvira teksta (549 / 534), širina teksta. Chromeov line-through iz metrike fonta crtao je 1 px na 571 / 556, dakle 2 px previsoko i upola tanje. Okvir je područje sadržaja fonta (vrh = vrh okvira iz PDF-a), pa pozadina počinje tačno odatle; u em da prati veličinu cijene. */ text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 .75em / 100% .0625em no-repeat; } .hero__offer-name { margin: .3125rem 0 0; font-size: 1.5rem; font-weight: var(--fw-bold); line-height: 1.2; } /* Natpis cijene (polje `offer_price_label`; HR v05 „Promotivna cijena:"). Mali red tik iznad nove cijene, u rezu stare cijene (Light, bijelo, bez kurziva) i veličini naziva ponude (24). Prazno polje = nema elementa, pa stranice bez natpisa (IT) ostaju iste. Razmak naziv → natpis je 8 px okvira, a natpis → cijena 0: okvir retka nove cijene (112, `line-height: 1`) već ima prazninu iznad brojki, pa je natpis bliži iznosu kojem pripada (slova: naziv → natpis 17,8, natpis → brojke 10,8 na 1512). */ .hero__offer-label { margin: .5rem 0 0; font-size: 1.5rem; font-style: normal; font-weight: var(--fw-light); line-height: 1.2; } /* `line-height: 1` i negativna gornja margina: okvir retka od 112 px je oko 29 px visi od samog slova, pa bi bez toga naziv i cijena bili razmaknuti za tu razliku. */ .hero__offer-new { margin: 0; font-size: 7rem; font-weight: var(--fw-black); line-height: 1; } /* Poziv je u dizajnu OBICAN TEKST, ne pilula: bez podloge, bez uvlake i bez strelice. */ .hero__offer-cta.btn { margin-top: 0; padding: 0; background: none; border: 0; border-radius: 0; /* Boja i debljina natpisa iz polja `offer_cta_color` / `offer_cta_weight` (varijable na dugmetu samo kad su popunjene); rezerva = dizajn. */ color: var(--btn-fg, var(--c-white)); font-size: 1.375rem; font-weight: var(--btn-fw, var(--fw-bold)); line-height: 1.2; } .hero__offer-cta.btn:hover { background: none; color: var(--c-accent); } /* Poziv s VLASTITOM bojom na hover ne skače na plavu: ostaje u svojoj boji i samo malo posvijetli. */ .hero__offer-cta.btn[style*="--btn-fg"]:hover { color: var(--btn-fg); opacity: .75; } /* Vodoravni pomak poziva (polje `offer_cta_x`). Na All on 4 je poziv na x 113 kao i ostatak bloka, a na No Bone na x 108 — 5 px lijevo (H-N5). Relativni pomak ne mijenja tok bloka. */ .hero__offer-cta.btn { position: relative; left: var(--hero-offer-cta-x, 0px); } /* Okomiti položaj poziva (polje `offer_cta_gap`). Poziv je tekst, pa nema visinu pilule od 36,9 u koju bi se natpis centrirao (3 px ispod vrha): okvir je sam natpis (30,8 = okvir slova 22 px Poppinsa), a razmak od nove cijene je gornja margina. Vrhovi slova u PDF-ovima: nova cijena -> poziv 137,5 na All on 4 (588,4 -> 725,9) i 133,5 na No Bone (603,4 -> 736,9), dakle 4 i 0 px ispod okvira retka cijene. Zadano 4 (All on 4). */ .hero__offer-cta.btn { height: auto; min-height: 0; margin-top: var(--hero-offer-cta-gap, .25rem); } .hero__offer-cta.btn .btn__arrow { display: none; } /* Natpis dugmeta ima svoju velicinu i tezinu u components.css, pa bi bez ovoga poziv ostao tanak iako je sam postavljen na 700. */ .hero__offer-cta.btn .btn__label { font-size: inherit; font-weight: inherit; } /* Potpis pacijenta stoji DESNO preko fotografije, ne ispod teksta. Mjereno u `01_Landing_No Bone Implant.pdf`: ime na y 593,2, x 1209,1..1399,0 (16 px SemiBold, #009dc9), uloga na y 618,0, x 1173,9..1399,0 (16 px, bijelo, kurzivom). Oba su poravnata uz DESNI rub kontejnera, koji je na 1399. Tema ih je ispisivala kao obican citat ispod teksta heroja, lijevo poravnato i sivkasto. Kurziv je ovdje iz dizajna, ne izbor. Polozaj je apsolutan i vrijedi za jedinu stranicu koja potpis ima; kad ga dobije jos koja, mjeru treba prenijeti u polje kao kod `text_top`. */ .hero__quote { position: absolute; right: 0; top: 37.125rem; /* 594 */ margin: 0; max-width: 22rem; text-align: right; } .hero__quote blockquote { margin: 0; font-size: 1rem; font-weight: var(--fw-semibold); line-height: 1.375; color: var(--c-accent); } /* H-N4: tinta imena je u dizajnu na y 598-613, a uloge na 618-629 — razmak 5 px. Uz marginu 3 px i prored 22 uloga je bila na 622-633 (razmak 10), a ime na 597. Bez margine i s proredom 18 (okvir retka 2 px manji odozgo) uloga dolazi na 618, a vrh bloka na 594 spusta ime na 598. */ .hero__quote figcaption { margin-top: 0; font-size: 1rem; font-weight: var(--fw-light); line-height: 1.125; font-style: italic; color: var(--c-white); opacity: 1; } /* Znak proizvoda: 177 x 42 na x 113, 49 px iznad naslova. */ /* 9 px do naslova, ne 22. Znak je visok 42, a u dizajnu stoji 51 px iznad naslova — izmjerio Tok 5 na sajtu: stajao je 64 px iznad. */ /* 17,5 px, ne 9. Znak je na y 280-322, a VRH OKVIRA SLOVA naslova na 331; uz prored 39 okvir retka pocinje 8,5 px ispod vrha slova (339,5), dakle razmak znak -> redak je 17,5. Devet je bilo racunato do vrha slova. */ .hero__logo { margin: 0 0 1.09375rem; } .hero__logo img { display: block; width: auto; height: 2.625rem; } /* heroj naslovne: medij uvucen sa svake strane */ .hero--hp .hero__media { /* Uvlaka po stranama iz polja (`inset_top/right/bottom`, prazno = `inset`). `00_Homepage.pdf`: medij 1447 x 770 na x 20, y 67,3 — gore 67, desno 45, dolje 0, uglovi pravi. */ inset: var(--hero-inset-t, var(--hero-inset, 1.25rem)) var(--hero-inset-r, var(--hero-inset, 1.25rem)) var(--hero-inset-b, var(--hero-inset, 1.25rem)) var(--hero-inset, 1.25rem); border-radius: var(--hero-radius, 1.25rem); } /* Preljev pri dnu medija (polja `shade`, `shade_h`). U dizajnu je to pojas od 428 px uz donji rub, bijelo -> siva 0,502 u nacinu Multiply, sto je isto sto i crni sloj od 0 do 49,8 % neprozirnosti. Gornji dio fotografije ostaje netaknut, kao u dizajnu. */ .hero__shade { position: absolute; left: 0; right: 0; bottom: 0; height: var(--hero-shade-h, 26.75rem); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, var(--hero-shade, .5))); pointer-events: none; } /* Mobilni kadar postoji samo za telefon (vidi `layout-a.css`). */ .hero__m-img { display: none; } /* M03: video za telefon isto (polje `m_video`, `smile_hero_m_video()`). Skriven video se ne preuzima: izvor dodaje `sections.js` tek prikazanom. */ .hero__m-video { display: none; } .hero--hp .hero__inner { display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--hero-inset, 1.25rem) + 4rem) calc(var(--hero-inset, 1.25rem) + 2.5rem); min-height: inherit; } /* Mjere iz 00_Homepage.pdf (okvir 1512): medij 0-837,7 uvucen 20 px, naslov 51 px pocinje na x 991 i y 379,4 (prored 54 px), podnaslov 20 px na x 100 i y 742. Lijevi rub teksta je dakle 100, a ne inset + 40. */ /* 388, ne 376: 376 je bio racunat do vrha OKVIRA RETKA, a 379,4 u PDF-u je vrh okvira slova. Uz prored 54 i okvir slova 71,4 okvir slova pocinje 8,7 px iznad okvira retka, pa je naslov stajao 12 px previsoko. */ .hero--hp.hero--h-838 .hero__inner { padding: 24.25rem 6.25rem 4.125rem; } .hero--hp .hero__title { line-height: 1.0588; } .hero--hp .hero__subtitle { margin: 0; } /* Naslov stoji u desnoj polovini, ali je tekst u njemu poravnat ULIJEVO: sva cetiri retka u PDF-u pocinju na istom x (991). */ /* Sirina je FIKSNA, ne `max-width`. Okvir naslova je u stupcu s `margin-left: auto`, pa se skupljao na svoj sadrzaj (374 px) i lijepio uz desni rub — lijevi rub teksta je zbog toga padao na x 1038 umjesto na 991. Unutrasnji okvir ide od 100 do 1412, pa sirina od 421 px daje tacno x 991. Prelom ostaje isti: najduzi red dizajna je 388,8 px, a sljedeca rijec ga prebacuje preko 421. */ .hero--hp .hero__title-box--right { text-align: left; width: 26.3125rem; max-width: 100%; } .hero__title-box--right { margin-left: auto; text-align: right; max-width: 40rem; } .hero__title-box--left { margin-right: auto; max-width: 40rem; } .hero__bottom { max-width: 34rem; } /* U2 (korisnik, 30. 9. 2026) — položaj teksta u heroju naslovne. `title_pos: center` (novo): naslov gore, u sredini, iste širine kao desni (421 px, isti prelom). Dok je okomiti položaj prazan, ostatak je raspored iz dizajna (podnaslov i dugme dolje lijevo). */ .hero--hp .hero__title-box--center { width: 26.3125rem; max-width: 100%; margin-inline: auto; text-align: center; } /* Izabran okomiti položaj (`hero--poz`, polje `pos_y`, samo desktop): naslov, podnaslov i dugme idu ZAJEDNO gore / u sredinu / dolje, a `title_pos` pomjera cijeli blok (`--x-*`). Gore ne ispod 10rem (visina zaglavlja). Težina 0-3-0 i kasnije od `.hero--hp.hero--h-838 .hero__inner`, pa pobjeđuje samo uz klasu. */ @media (min-width: 1024px) { .hero--hp.hero--poz .hero__inner { justify-content: flex-start; padding-top: 10rem; } .hero--hp.hero--y-middle .hero__inner { justify-content: center; } .hero--hp.hero--y-bottom .hero__inner { justify-content: flex-end; } .hero--hp.hero--poz .hero__title-box { margin: 0; } .hero--hp.hero--poz .hero__bottom { margin-top: .5rem; } .hero--hp.hero--poz.hero--x-left .hero__inner { align-items: flex-start; } .hero--hp.hero--poz.hero--x-center .hero__inner { align-items: center; } .hero--hp.hero--poz.hero--x-right .hero__inner { align-items: flex-end; } /* Poravnanje redova (polje `ta`). */ .hero--hp.hero--ta-left :is(.hero__title-box, .hero__bottom) { text-align: left; } .hero--hp.hero--ta-center :is(.hero__title-box, .hero__bottom) { text-align: center; } .hero--hp.hero--ta-right :is(.hero__title-box, .hero__bottom) { text-align: right; } } /* Heroj kartica. Mjere iz PDF-a: kartica 1286x244 na x=113, naslov 38 px centriran na 54 px od vrha, podnaslov 14 px centriran na 152 px, ukras 326x224 uz desni rub. */ .hero-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 2rem 3rem; /* 10 px, ne 20. Na svih 14 PDF-ova s hero karticom uvlaka ugla po redovima piksela je 7,5,4,3,2,1,1,0 — to je luk polumjera 10; 20 px daje 16,13,10,8,7,6,5,4,4,3,2,2,1,1,1,1. */ border-radius: .625rem; /* Gradijent je u dizajnu VODORAVAN, ne dijagonalan: boja se mijenja samo po sirini kartice. Mjereno na renderu 14 PDF-ova, 3 px unutar lijevog i desnog ruba — lijevo je svuda #0d0d0d, desno #037392, #0187ad ili #083544, po stranici. Tema je imala 135deg iz #1f1c1b u #0b0a0a, dakle sivo-smedu u crnu, i te su vrijednosti bile i posijane. Vrijedi samo za hero karticu; info kartice i kartica prve posjete zadrzavaju svoj dijagonalni gradijent dok se i one ne izmjere. */ /* `--sec-card-bg` = polje sekcije „Sfondo delle schede" (samo kad je izabrano); inače preljev iz polja kartice, kao dosad. */ background: var(--sec-card-bg, linear-gradient(90deg, var(--card-from), var(--card-to))); overflow: hidden; text-align: center; } /* Tamni tekst na svijetloj kartici (polje `card_theme`). Jače od `.sec .hero-card { color: white }`. Oznake boje iz „Formati" i dalje tuku. */ .sec .hero-card.hero-card--chiara { color: #000; } /* Okvir kartice u PDF-ovima (`hero_card.json`, izmjeri_hero_card.py) je visok 243,1 odnosno 278,1 px; tema je imala 244 i 277. */ .hero-card--h-243 { height: 15.1875rem; } /* 243 */ .hero-card--h-277 { height: 17.375rem; } /* 278 */ /* Kartica s dugmetom (klasa samo kad se dugme ispisuje, hero_card.php): izabrana visina je najmanja, a kartica raste koliko treba da dugme ne ode ispod ruba i ne odsiječe se. Samo na širokom ekranu; na telefonu je kartica ionako `height: auto; min-height: 0`. */ @media (min-width: 1024px) { .hero-card--s-dugmetom { height: auto; } .hero-card--s-dugmetom.hero-card--h-243 { min-height: 15.1875rem; } .hero-card--s-dugmetom.hero-card--h-277 { min-height: 17.375rem; } } /* Tekstualni okvir heroja je uzi od kartice: u PDF-ovima se naslov lomi na dva ili tri reda, a najsiri izmjereni red je 571 px. Bez ogranicenja naslov bi stao u jedan red i prelom se ne bi poklopio. */ .hero-card__text { position: relative; z-index: 1; max-width: 37.5rem; } /* Tekst uz vrh kartice umjesto centriranog (polje `text_top`). Samo na sirokom ekranu: na telefonu kartica nema fiksnu visinu. */ @media (min-width: 1024px) { .hero-card--vrh { justify-content: flex-start; padding-top: var(--hc-top); } } /* U2 (korisnik, 30. 9. 2026) — položaj teksta u kartici, desktop. Iza `.hero-card--vrh`, iste težine: „Al centro" / „In basso" poništavaju odmak odozgo, „In alto" ga zadržava. Najmanja visina (polje `min_h`, rem) zamjenjuje izabranu visinu kartice; bez nje je kartica 243 / 277 px i okomiti položaj se jedva vidi. `.hero-card--x-center` nema pravilo: to je zadano. */ @media (min-width: 1024px) { .hero-card.hero-card--min-h { height: auto; min-height: var(--hc-min-h); } .hero-card--x-left { align-items: flex-start; } .hero-card--x-right { align-items: flex-end; } .hero-card--y-top { justify-content: flex-start; } .hero-card--y-middle { justify-content: center; padding-top: 2rem; } .hero-card--y-bottom { justify-content: flex-end; padding-top: 2rem; } .hero-card--ta-left .hero-card__text { text-align: left; } .hero-card--ta-center .hero-card__text { text-align: center; } .hero-card--ta-right .hero-card__text { text-align: right; } /* Podnaslov je uži od naslova (26,5rem) i centriran maržama. */ .hero-card--ta-left .hero-card__subtitle { margin-inline: 0 auto; } .hero-card--ta-right .hero-card__subtitle { margin-inline: auto 0; } } .hero-card__title { /* 12 px (polje `title_gap`). Na deset od cetrnaest PDF-ova osnovna linija prvog reda podnaslova je 32,6 px ispod zadnje osnovne linije naslova; uz prored naslova 36 i podnaslova 22 to je razmak od 12 px. Bila su 4 (izmjereno dok je prored naslova bio 43,7), pa je podnaslov lezao na silaznim potezima naslova. */ margin: 0 0 var(--hc-title-gap, .75rem); font-size: 2.375rem; /* 38 */ font-weight: var(--fw-xlight); line-height: 1.15; } .hero-card__subtitle { margin: 0 auto; /* Podnaslov je uzi od naslova: izmjereno 349-423 px kroz 13 PDF-ova. */ max-width: 26.5rem; /* 424 */ font-size: .875rem; /* 14 */ font-weight: var(--fw-light); line-height: 1.5714; /* 22: korak redova u svih 14 PDF-ova */ } .hero-card__cta { margin-top: 1.25rem; } /* Ukras je Smile polumjesec, OSTAR oblik, ne zamucena mrlja. Tema je ovdje crtala `radial-gradient(ellipse ...)` — mrlju koja se prema rubovima gubi. U dizajnu je to jedan vektorski crtez ispune #009dc9 sa cetiri Bezierove krivulje; putanja ispod je prepisana iz njega, s pocetkom pomjerenim u nulu (oduzeto 1075 i 265,56). Mjereno na 14 PDF-ova s hero karticom, na svima isto: okvir 326,12x223,49, 34 px od vrha kartice, desni kraj 2,12 px IZVAN kartice i donji vrh nize od nje — oboje odsijeca `overflow: hidden`. */ .hero-card__swoosh { position: absolute; right: -0.1325rem; top: 2.125rem; /* -2,12 i 34 od vrha kartice */ width: 20.3825rem; height: 13.968125rem; /* 326,12 x 223,49 */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 326.12 223.49'%3E%3Cpath fill='%23009dc9' d='M0 0C0 0 74.19 98.94 154.12 111.49C274.17 130.04 326.12 82.44 326.12 82.44C326.12 82.44 200.74 223.49 75.78 143.72C4.05 98.17 0 0 0 0Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; pointer-events: none; } /* Vlastita boja polumjeseca (polje `swoosh_color`): isti crtež kao MASKA, obojen bojom iz polja. Samo uz klasu, pa kartica bez boje crta tačno dosadašnju sliku iznad. */ .hero-card--swoosh-boja .hero-card__swoosh { background: var(--hc-swoosh); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 326.12 223.49'%3E%3Cpath d='M0 0C0 0 74.19 98.94 154.12 111.49C274.17 130.04 326.12 82.44 326.12 82.44C326.12 82.44 200.74 223.49 75.78 143.72C4.05 98.17 0 0 0 0Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 326.12 223.49'%3E%3Cpath d='M0 0C0 0 74.19 98.94 154.12 111.49C274.17 130.04 326.12 82.44 326.12 82.44C326.12 82.44 200.74 223.49 75.78 143.72C4.05 98.17 0 0 0 0Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } /* heroj podijeljen */ /* RAZMAK STUPCA je 10 px, ne 48. Slijedi iz iste mjere kao i kontejner 1070 (vidi `template-parts/sections/hero_split.php`): desni stupac dizajn crta na 761, dakle stupac + razmak = 761 - 221 = 540, a iz `(1070 - g)/2 + g = 540` izlazi `g = 10` i stupci od 530. Razmak REDA ostaje 3rem i to nije kozmetika: `.hero-split__kpi` je `grid-column: 1 / -1`, pa bi jedan `gap: .625rem` skratio i okomiti razmak do te trake. Danas je `kpi_show` nula na svih 8 sekcija, pa se to ne bi ni vidjelo u mjeri — a upravo zato bi tiho ostalo pogresno do prve sekcije koja KPI ukljuci. */ .hero-split { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 0.625rem; /* red 48 | stupac 10 */ /* Razmak iznad i ispod nosi sekcija (`spacing_top` / `spacing_bottom`), ne modul — vidi `razmaci.css`, odjeljak 3. */ padding-block: 0; } .hero-split__title { margin: 0; font-size: 3.1875rem; font-weight: var(--fw-light); line-height: 1.1; } /* Polja sekcije (vidi `hero_split.php`). Okomito: u dizajnu je vrh okvira retka teksta 1,4 px ispod vrha okvira retka naslova na pet sekcija, a na dvije stoji VISE od naslova (Riabilitazione sek. 3 za 14,6, Team sek. 7 za 11,6) — zato se spusta onaj koji je nize, a ne negativna margina. */ .hero-split__left { padding-left: var(--hs-indent, 0px); padding-top: var(--hs-title-top, 0px); } .hero-split__right { padding-top: var(--hs-text-top, 0px); } @media (min-width: 1024px) { .hero-split--col { grid-template-columns: var(--hs-col) minmax(0, 1fr); } } /* Odlomci bez razmaka: u dizajnu drugi odlomak pocinje u sljedecem redu (korak 22, isto kao unutar odlomka), a prvi red je u visini naslova. Tema je davala zadanu marginu odlomka 14 px gore i dolje. */ .hero-split__text p { margin: 0; } /* Dugme u desnom stupcu. Jedino takvo je „Prenota ora" na Riabilitazione sek. 3: pilula 653-833 x 1139-1176, natpis od 678,7, krug od 804,6 — uvlaka 25,7 i razmak natpis -> krug 33, a ne 35,2 / 43,2 iz obitelji (pilula je bila 200 px umjesto 180). */ .hero-split__right .btn--sm.btn--cta { padding-left: 1.60625rem; /* 25,7 */ /* Varijabla, ne `gap`: na telefonu dugme razmak nosi razmakničar (`components.css`, `gap: 0`), a jači `gap` odavde se tamo dodavao na njega i lomio „Prenota ora" u dva reda. */ --btn-gap: 2.0625rem; /* 33 */ } /* Razmak tekst -> dugme. U dizajnu je od dna okvira retka zadnjeg reda (1124,1) do vrha pilule (1139,9) 15,8 px. Dok su odlomci imali donju marginu 14 px, ona je nosila taj razmak; bez nje je dugme leglo 1 px ispod teksta, a linija ispod sekcije 14 px vise. Zajednicko polje `cta_gap` sekcije ga zamjenjuje. */ .hero-split__right > .btn--cta { margin-top: var(--sec-cta-gap, .9375rem); } /* Tekst desnog stupca nije sirok koliko stupac. Sonda je na svih PET sekcija koje nose ovaj raspored trazila sirinu pri kojoj i broj redaka i ink izlaze kao u dizajnu: 05-clinica-dott-darko-e-team sek 1 412..429 04-clinica-straumann sek 1 388..438 03-clinica-laboratorio sek 1 396..455 04-clinica-straumann sek 7 425..455 01-clinica-clinica sek 1 417..476 Presjek svih pet je 425..429, dakle JEDNA vrijednost zadovoljava sve — zato pravilo, a ne polje po sekciji. Tema je davala 619 px, pa se tekst lomio u dva retka umjesto tri na svih pet. Nasao Tok 4 razvrstavanjem po prijelomu. Ako se ikad pojavi sesta sekcija cija sirina ispadne izvan 425..429, ovo prestaje biti pravilo i postaje polje — isto mjerilo kao svuda danas. */ .hero-split__text { font-size: .875rem; line-height: 1.5714; max-width: var(--hs-text-w, 26.6875rem); } .hero-split__kpi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; } .hero-split__kpi li { flex: 1 1 12rem; padding: 1.25rem; border-radius: 1.25rem; /* „Sfondo delle schede" sekcije kad je izabrano; inače kao dosad. */ background: var(--sec-card-bg, var(--c-tile)); } /* Svijetla tema sekcije (polje `theme` = Chiara): tamni tekst ide na svijetle pločice, ne na tamne. Danas nijedna sekcija nema ni temu ni pločice. */ .sec--light .hero-split__kpi li { background: var(--sec-card-bg, #f9f9f9); } .hero-split__kpi-num { display: block; font-size: 2rem; font-weight: 700; color: var(--c-accent); } .hero-split__kpi-label { display: block; font-size: .9375rem; opacity: .8; } /* U2 (korisnik, 30. 9. 2026) — položaj sadržaja podijeljenog heroja. Stupci su fiksna mreža, pa vodoravni položaj pomjera sadržaj UNUTAR svog stupca: naslov kao stavka mreže (`justify-items`), a desni stupac dobija širinu teksta (427 px ili polje `text_width`), da tekst i dugme dijele isti rub. Okomiti položaj poravnava stupce međusobno i, uz najmanju visinu (polje `min_h`, rem), sadržaj u mreži. Traka s brojevima ostaje punom širinom. */ .hero-split:is(.hero-split--x-center, .hero-split--x-right, .hero-split--mx-center, .hero-split--mx-right) .hero-split__kpi { justify-self: stretch; } @media (min-width: 1024px) { .hero-split.hero-split--min-h { min-height: var(--hs-min-h); } .hero-split--x-center { justify-items: center; } .hero-split--x-right { justify-items: end; } .hero-split:is(.hero-split--x-center, .hero-split--x-right) .hero-split__right { width: min(100%, var(--hs-text-w, 26.6875rem)); } .hero-split--y-middle { align-items: center; align-content: center; } .hero-split--y-bottom { align-items: end; align-content: end; } .hero-split--ta-left :is(.hero-split__left, .hero-split__right) { text-align: left; } .hero-split--ta-center :is(.hero-split__left, .hero-split__right) { text-align: center; } .hero-split--ta-right :is(.hero-split__left, .hero-split__right) { text-align: right; } } /* ---------- foto + tekst ---------- */ /* Razmak izmedu slike i teksta je u PDF-ovima dosljedno 10 px, ne sirok razmak kakav se pretpostavlja prije mjerenja. Provjereno na Sedazione (10), Diagnosi 3D (10) i Estrazione (10). */ .media-text { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem; align-items: center; } .media-text--right { grid-template-columns: 1fr auto; } .media-text--right .media-text__media { order: 2; } /* S mjerenom sirinom teksta stupac slike uzima ostatak, pa razmak izmedu njih ispadne tacno onakav kakav je u PDF-u. Slika u svom stupcu stoji uz vanjski rub kontejnera, kako je i nacrtana. */ /* minmax(0, ...) je brana: ako izmjerena sirina ikad bude veca od kontejnera, stupac se skupi umjesto da stranica dobije skrol. */ .media-text--tw { grid-template-columns: minmax(0, 1fr) minmax(0, var(--mt-tw)); gap: 0; } .media-text--tw.media-text--right { grid-template-columns: minmax(0, var(--mt-tw)) minmax(0, 1fr); } /* Isti raspored u OMJERU (`media_text.php` objasnjava zasto): celije kao dijelovi cijelog, slika kao postotak svoje celije, visina slike iz omjera sirine i visine iz dizajna. Na 1512 px daje iste piksele kao gornja pravila; ispod 1340 px, gdje kontejner dobije bocnu uvlaku, smanjuje se cijeli blok zajedno s razmakom, umjesto da tekst ostane iste sirine i pojede razmak i dio slike. Samo desktop: na telefonu je jedan stupac. */ @media (min-width: 1024px) { .media-text--tw.media-text--prop { grid-template-columns: minmax(0, var(--mt-c-img)) minmax(0, var(--mt-c-txt)); } .media-text--tw.media-text--prop.media-text--right { grid-template-columns: minmax(0, var(--mt-c-txt)) minmax(0, var(--mt-c-img)); } .media-text--prop .media-text__media { width: var(--mt-w-pct); } /* Visinu okvira sada drzi sama slika preko omjera — i prije nego se ucita, jer je sirina poznata. Fiksna `--mt-h` bi na uzem ekranu ostavila traku ispod slike. */ .media-text--prop .media-text__media:has(img) { min-height: 0; } .media-text--prop .media-text__img { width: 100%; height: auto; aspect-ratio: var(--mt-ar); } } /* Bocna uvlaka od 1,25rem koju kontejner dobija ispod 1340 px ovdje ne treba: izmedju 1024 i 1511 px je cijeli raspored umanjena kopija dizajna, pa kontejner ionako ima 113 px ruba u istom omjeru (76 px na 1024). S uvlakom je blok bio 2,5rem uzi od kopije i tekst se lomio drugacije nego u dizajnu — Olistico na 1024 px u tri reda naslova umjesto dva. */ @media (min-width: 1024px) and (max-width: 1340px) { .sec__inner.media-text--prop { padding-inline: 0; } } /* Naslov i tekst preko fotografije. Mjere iz 0_Soluzioni – Odontoiatria generale: fotografija 530 x 350 na x 220, naslov na x 263,9 (dakle 44 od ruba) i y 933,8 (48 od vrha), a kolone u stupcu koji bi inace nosio tekst (x 761, sirina 530, razmak 11). */ /* Dok fotografija ne stigne, ploha ispod teksta mora biti puna tamna, a ne samo poluprozirni gradijent: preko bijele trake bi se osvijetlila i kartica bi izgledala kao siva mrlja umjesto tamne kartice iz PDF-a. Fotografija, kad stigne, lezi preko ove pozadine. */ /* Okvir nosi ISTI uspravni preljev kao natpis preko njega: okvir je visok koliko izmjerena kartica (350), a natpis bez fotografije samo koliko njegov sadržaj (341), pa je donjih 9 px ostajalo u boji stranice (11,10,10) umjesto (13,13,13). */ .media-text--over .media-text__media { position: relative; /* „Sfondo delle schede" sekcije (`--sec-card-bg`, samo kad je izabrano) zamjenjuje preljev i okvira i ploče ispod teksta; prazno = preljev. */ background: var(--sec-card-bg, linear-gradient(180deg, #1e1c1b, #0d0d0d)); border-radius: var(--mt-r, 1.25rem); } .media-text--over .media-text__body--over { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 3rem 2.75rem; border-radius: var(--mt-r, 1.25rem); /* U PDF-u je ispod teksta tamna ploha, a tekst je bijel. Preljev je USPRAVAN i isti po cijeloj širini: vrh (30,28,27), sredina (22,21,20), dno (13,13,13) — Odontoiatria generale sek. 3, uzorci na 2/50/98 % visine i x 235 / 740. Dijagonalni preljev (135deg) je desnu polovinu kartice tamnio, a lijevo dno svjetlio (nalaz OG-20); isti je preljev kartice `.prima`. Vlastita boja: `--sec-card-bg` (polje sekcije). */ background: var(--sec-card-bg, linear-gradient(180deg, #1e1c1b, #0d0d0d)); color: var(--c-white); } /* Bijeli tekst na tamnoj kartici „preko medija" stoji u `layout-b.css`. Ovdje je bio, ali je prestao djelovati: pravilo je 0,2,0, a `tipografija.css` je kasnije dobio `.sec--light .sec__text { color: #000 }` iste tezine i NIZE u redoslijedu ucitavanja (sections -> razmaci -> tipografija -> layout-a -> layout-b), pa je pobjedivalo po redoslijedu. Presla je u layout-b, koji se ucitava posljednji. */ .media-text--over .media-text__cols { grid-column: 2; grid-row: 1; align-self: start; grid-template-columns: 1fr; /* Korak kolona je u PDF-u 93 px (natpisi na +72 / 165 / 258 / 351 od vrha bijele trake). Stavka (natpis + dva retka teksta) je na sajtu visoka 66, pa razmak do sljedeće mora biti 27; s 21 je korak bio 87, a zadnja stavka 18 px previsoko (nalaz OG-09). Pasus mora imati nultu marginu, inace mu zadanih 1em doda dvadeset piksela. Stavka je sada 67 (natpis 22 + 1 + tekst 44), pa je razmak 26 i korak ostaje 93. Vrh liste je u PDF-u 0,3 px ispod vidljivog vrha kartice (klip kartice 886,95, okvir slova prvog natpisa 887,1, dakle red natpisa od 887,3). Bez toga je cijeli desni stupac crtan 1 px iznad dizajna; s 0,3 px svih 12 redova pada tačno na redove PDF-a (simulacija). */ gap: 1.625rem; margin: 0.01875rem 0 0; } .media-text--over .media-text__col p { margin: 0; } /* Natpis -> tekst stavke (krug 4 p4, OG-09). PDF: okvir slova natpisa 887,1-909,5, prvi red teksta od 911,2 (1,7 px razmaka); sajt s redom natpisa 22 i tekstom odmah ispod daje 1,0 — tekst je bio 1 px (tinta 2 px) iznad dizajna, a natpis tačan. */ .media-text--over .media-text__col-title { margin-bottom: 0.0625rem; } .media-text--tw .media-text__media { justify-self: start; } .media-text--tw.media-text--right .media-text__media { justify-self: end; } /* Dok slike nisu dostavljene, okvir zadrzava svoju sirinu iz PDF-a. Bez toga bi se prazna figura skupila na nulu, tekst bi zauzeo cijelu sirinu i raspored se ne bi mogao usporediti s PDF-om prije nego slike stignu. */ .media-text__media { position: relative; margin: 0; width: var(--mt-w, 46.625rem); /* Bez ovoga fotografija zadrzi svoju izmjerenu sirinu i kad joj je stupac uzi, pa PREKRIJE tekst pored sebe. Na naslovnici su tako tri sekcije imale sliku preko teksta — do 355 px — i naslov je bio odsjecen. Mjera vjernosti to nije mogla vidjeti: blokovi teksta su i dalje bili na svojim mjestima, samo ih je slika pokrivala. `minmax(0, ...)` gore skuplja STUPAC; ovo skuplja ono sto u njemu stoji. */ max-width: 100%; } /* Visina se rezervise SAMO kad medija stvarno ima. Dok je `min-height` stajao bezuvjetno, prazan okvir je posjetiocu ostavljao rupu od 418 px — i to najcesce tamo gdje dizajn fotografiju uopce nema. Nezavisna kontrola je isti obrazac nasla i kod sivih okvira u bloku "rezervisan prostor", koji su zbog toga presli pod `.smile-urednik`. Urednik i dalje vidi rezervisanu visinu, da moze usporediti raspored s PDF-om prije nego slika stigne. Vrijednost `--mt-h` je izmjerena po sekciji (Tok 4) i ovdje se ne dira. */ .media-text__media:has(img), .media-text__media:has(video), .smile-urednik .media-text__media { min-height: var(--mt-h, 26.125rem); } .smile-urednik .media-text__media:empty::before { content: ""; display: block; width: 100%; height: var(--mt-h, 26.125rem); border-radius: var(--mt-r, 1.25rem); background: rgba(255, 255, 255, .06); } .media-text__img { display: block; width: var(--mt-w, 46.625rem); height: var(--mt-h, 26.125rem); max-width: 100%; border-radius: var(--mt-r, 1.25rem); object-fit: cover; transform: rotate(var(--mt-rot, 0deg)); } .media-text__logo { position: absolute; left: 1.5rem; bottom: 1.5rem; } /* Znak se crta u svojoj mjeri iz dizajna, ne stisnut na 128 px. Tok 5 je izmjerio da je medalja na Straumannu 155,9x210,5 a crtala se 128x173, i dokumenti na Pazienti 119,4x131,6 a crtali se 128x141. Ogranicenje ostaje samo kao gornja granica prema sirini stupca. */ .media-text__logo img { max-width: 100%; height: auto; } /* Znak GORE DESNO (polje `logo_pos`, Straumann V1 i V2). Dizajn: 10 px od vrha, 21,4 px od desnog ruba i 231,8 px sirine na slici od 746 px — u postotku sirine slike, da se znak smanjuje zajedno s njom (na 1024 px i na telefonu). Odmak od vrha je `padding`, jer se postotak paddinga racuna od SIRINE okvira, kao i sirina znaka; `top` u postotku bi se racunao od visine, a V1 i V2 nemaju istu visinu slike. */ .media-text--znak-gd .media-text__logo { top: 0; right: 0; bottom: auto; left: auto; box-sizing: content-box; width: 31.0724%; /* 231,8 / 746 */ padding: 1.3405% 2.8686% 0 0; /* 10 / 746, 21,4 / 746 */ line-height: 0; } .media-text--znak-gd .media-text__logo img { display: block; width: 100%; } /* Omotac zasebne mobilne fotografije ne smije biti svoj okvir u rasporedu: pravila za `.media-text__img` i visinu okvira vrijede kao i bez njega. */ .media-text__pic { display: contents; } /* Prored tijela teksta po sekciji (polje `text_lh`). */ @media (min-width: 1024px) { .media-text--tlh .media-text__body .sec__text, .media-text--tlh .media-text__body .sec__text :is(p, span) { line-height: var(--mt-text-lh); } } /* Uvlaka uvoda i teksta od ruba stupca, na strani poravnanja (polje `body_inset`); naslov ima svoju (`title_inset`), dugme ostaje uz rub. */ .media-text--bi .media-text__body :is(.sec__lead, .sec__text) { padding-inline-start: var(--mt-body-inset); } .media-text--bi.media-text--t-right .media-text__body :is(.sec__lead, .sec__text) { padding-inline-start: 0; padding-inline-end: var(--mt-body-inset); } /* Polozaj okvira modula na stranici (polje `offset_x`): lijevi rub kontejnera od 1286 px, pomaknut koliko ga PDF te stranice pomice. Na 1512 px je to 113 + pomak; ispod skalira s rem. */ @media (min-width: 1024px) { .sec__inner--1286.media-text--dx { margin-left: calc(50% - 40.1875rem + var(--mt-dx)); margin-right: auto; } } .media-text--t-center .media-text__body { text-align: center; } /* Dizajn na vise mjesta poravnava tekst udesno (Olistico, Laboratorio, DSD i dio landing sekcija), sto se ne da opisati kroz left/center. */ .media-text--t-right .media-text__body { text-align: right; } .media-text--t-right .media-text__cols { text-align: left; } /* Stupac teksta UZ VRH fotografije, s odmakom izmjerenim iz dizajna (polja `text_valign` i `text_top`). Centriranje ostaje zadano za sekcije bez mjere. Margina je na stavci mreze, pa red raste ako je tekst s odmakom visi od slike — isto kao u dizajnu, gdje je tada i sekcija visa. */ .media-text--vtop > .media-text__body { align-self: start; margin-top: var(--mt-top, 0); } /* Razmak ispod naslova i ispod uvoda, izmjeren po sekciji (polja `title_gap` i `lead_gap`). Tri klase: `.sec__title` i `.sec__lead` imaju svoje margine u vise fajlova, pa pravilo mora biti jace od svih. */ .media-text--tg .media-text__body .sec__title { margin-bottom: var(--mt-title-gap); } .media-text--lg .media-text__body .sec__lead { margin-bottom: var(--mt-lead-gap); } .media-text--ti .media-text__body .sec__title { padding-inline-start: var(--mt-title-inset); } .media-text--ti.media-text--t-right .media-text__body .sec__title { padding-inline-start: 0; padding-inline-end: var(--mt-title-inset); } /* Samo donji uglovi zaobljeni (DSD). */ .media-text--r-dno .media-text__img { border-radius: 0 0 var(--mt-r) var(--mt-r); } /* Fotografija stopljena s pozadinom: crna podloga slike nestane u tamnoj pozadini sekcije, vide se samo implantati — kao „Lighten" u PDF-u. */ .media-text--stopi .media-text__img { mix-blend-mode: lighten; } /* Stapanje se ograđuje na SVOJU sekciju (FTR-N4): bez izolacije Chrome ostatak stranice iscrtava u zasebnom kompozitnom sloju, pa je tekst ispod slike znao stajati 0,3–1 px desnije nego u dizajnu. Tamna sekcija nema vlastitu pozadinu — slika se miješala s pozadinom `body` — pa sama izolacija nije dovoljna: slika bi se miješala s prozirnim i crna podloga fotografije bi ostala crna (Impianti singoli, druga sekcija: 40 583 piksela). Zato sekcija dobija istu boju koju je do sada davao `body`; izabrana pozadina iz admina je inline stil i i dalje ima prednost. */ .sec--media-text:not(.sec--light):has(.media-text--stopi) { isolation: isolate; background-color: var(--c-bg); } /* Pomak slike prema tekstu (polje `img_shift`). Slika stoji uz vanjski rub svoje celije; margina na vanjskoj strani je primice tekstu. Stupac teksta ostaje gdje jeste. Slika smije preci rub svoje celije (Impianti, 27 px preko pocetka teksta) — preklop se ne vidi jer je slika stopljena. */ .media-text--pomak.media-text--left .media-text__media { margin-left: var(--mt-x); } .media-text--pomak.media-text--right .media-text__media { margin-right: var(--mt-x); } /* Dugme koje dizajn ima samo na mobilnom. */ .media-text--cta-m .media-text__body .btn--cta { display: none; } /* Podebljano u tekstu je u dizajnu Poppins Bold (700). Preglednik za `` daje „bolder", sto uz roditelja od 300 ispadne 400 — dakle obicno slovo. */ .media-text strong, .media-text b { font-weight: 700; } /* -------------------------------------------------------------------------- RAZMAK IZNAD DUGMETA SEKCIJE Tema ga nije imala UOPSTE — izmjereno u pregledniku, 0,0 px: `.sec__text` nema donju marginu, zadnji `

` nema, `.btn--cta` nema gornju. STA OVA MARGINA ZAPRAVO POMJERA. `.media-text` je `display: grid` s `align-items: center` (pravilo `.media-text` iznad), pa tekstualni stupac stoji okomito centriran prema slici. Margina iznad dugmeta zato raste u ZALIHU — razliku visine slike i visine stupca — i tek kad je potrosi pocinje gurati sve ispod sekcije: zaliha = visina slike - visina stupca d_stupac = -min(G, zaliha) / 2 d_dugme = G + d_stupac d_ispod = max(0, G - zaliha) Izmjereno prelazom 0 -> G na svih 31 zivoj sekciji: 23 sekcije imaju zalihe napretek pa se ponasaju po pravilu G/2 gore / G/2 dolje i ispod njih se NE pomakne nista. Sedam sekcija (sve instance modula 33, G = 28,4) je ZASICENO — zaliha im je 12,14 px, pa se stupac digne 6,06 umjesto 14,20, dugme spusti 22,33, a sve ispod sekcije se pomjeri 16,25 px. RANIJA VERZIJA OVOG KOMENTARA je tvrdila G/2 bez uvjeta i da se ispod sekcije pomjeri sve — potvrdjeno „na 12 od 12 blokova". Uzorak od 12 nije dotakao nijednu zasicenu sekciju, pa je pravilo izvedeno iz polovine pojave. Drugi dio tvrdnje je bio netacan za 24 od 31 sekcije. Nasla nezavisna kontrola, mjerenjem na svim sekcijama. Zasto varijabla a ne broj: sedam od osam modula trazi jednu vrijednost na svim svojim instancama (rasap 0,1 px), ali medju modulima su te vrijednosti 2,1 / 13,0 / 28,4 / 36,0 / 51,8 / -7,9 / -8,0. Negativne znace da tema tu ima VISE zraka nego dizajn. OVO PRAVILO CITA SAMO `.media-text__body .btn--cta`. Sekcije ciji CTA nije u `.media-text__body` (`prima__cta`, `cta-banner__btn`, `hero__cta`) dobiju varijablu koju niko ne cita — vidi `deploy/seed/cta_razmak.json`, gdje su takve sekcije oznacene i ne siju se. Zadana nula je namjerna: dok sekcija nema mjeru, ponasa se kao dosad. -------------------------------------------------------------------------- */ .media-text__body .btn--cta { margin-top: var(--sec-cta-gap, 0); } /* Kolone idu punom sirinom kontejnera, ispod slike i teksta. U PDF-ovima Diagnosi 3D i Straumann V2 pocinju uz lijevi rub kontejnera i teku preko cijele sirine; unutar tekstualne kolone bile bi stisnute na oko 480 px. */ .media-text__cols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* 10 px, mjereno iz PDF-a: kolone na x=113/545/977 znace korak 432 uz sirinu 422. Sa 40 px razmaka kolone bi bile 402 i treca bi pala na 997. */ gap: 0.625rem; margin-top: 2.5rem; } .media-text__cols:has(.media-text__col:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media-text__col { min-width: 0; overflow-wrap: break-word; } /* U PDF-u su naslovi kolona Poppins Light 300, ne Bold. Tekst kolone ide ODMAH ispod naslova, istim korakom od 22 px: vrh okvira naslova -> vrh okvira prvog retka je 24,1 px na Diagnosi 3D (sve stranice), Straumann V2 (sve tri) i Apicectomiji. Tema je izmedju njih imala 14 px (zadana margina `

`, koja je nulirana samo za varijantu „preko slike"), i jos 14 ispod zadnjeg odlomka — sto je sve ispod modula guralo 16 px nize. */ .media-text__col-title { margin: 0; font-size: 1rem; font-weight: var(--fw-light); color: var(--c-accent); } .media-text__col p { margin: 0; } .media-text--cg .media-text__cols { margin-top: var(--mt-cols-gap); } /* ---------- foto + tekst: mjere i varijante iz 4. kruga ---------- Sve mjere dolaze iz polja sekcije (`media_text.php`) kao varijabla uz svoju klasu; sekcija bez mjere nema nijedno od ovih pravila. */ /* Samo gornji uglovi zaobljeni (polje `img_corners` = top): Estetica sek. 3 ima gornje uglove 10 px, a donje oštre (nalaz ED-18). */ .media-text--r-vrh .media-text__img { border-radius: var(--mt-r) var(--mt-r) 0 0; } /* Podnaslov u tekstu (`

`, polja `sub_before` i `sub_after`). Tekst media_text-a nema margine među odlomcima, pa je podnaslov bio zalijepljen za tekst iznad i ispod sebe: Clinica sek. 7 8 / 4 px umjesto 60 / 22, Laboratorio sek. 9 8 / 6 umjesto 54 / 20, Smile team sek. 2 9 / 5 umjesto 38 / 16 (nalazi CL-08, LAB-15, S2-02, S2-08). Vrijedi i na telefonu: podnaslov bez zraka nije mjera desktopa nego kvar. */ .media-text--sub .media-text__body .sec__text > .media-text__sub { margin-top: var(--mt-sub-mt, 0); margin-bottom: var(--mt-sub-mb, 0); } /* Razmak slova u tekstu (polja `text_ls` i `first_ls`). Dizajn neke blokove crta zbijenije od samog fonta: Smile team sek. 2 prvi blok -0,14 px (svaki red je bez toga bio 10-11 px duži, nalaz MD-K4R-02), Clinica sek. 7 drugi blok i Odontoiatria digitale sek. 5 -0,042 px. Naslov i podnaslov ostaju bez zbijanja, kao u PDF-u. Obje grupe imaju istu težinu (0,4,0), pa prvi blok, koji stoji niže, pobjeđuje. To je svojstvo slova, a ne rasporeda, pa vrijedi na svakoj širini. */ .media-text--tls .media-text__body :is(.sec__lead, .sec__text > :not(.media-text__sub)) { letter-spacing: var(--mt-text-ls); } .media-text--fls .media-text__body :is(.sec__lead, .sec__text > :not(.media-text__sub, .media-text__sub ~ *)) { letter-spacing: var(--mt-first-ls); } @media (min-width: 1024px) { /* Naslov širi od stupca (polje `title_width`): Corone sek. 5 ima naslov u JEDNOM redu od 650 px, a tijelo se lomi na 636 (nalaz CD-02). Naslov izlazi iz stupca na strani suprotnoj poravnanju. */ .media-text--nw .media-text__body .sec__title { width: var(--mt-title-w); max-width: none; } /* Prored naslova po sekciji (polje `title_lh`). Clinica sek. 7: 40 px ExtraLight s korakom 38, a `.fs-40` daje 45 (nalaz CL-25). Tri klase, jače od `.sec__title:has(> span.fs-40)` iz `tipografija.css`. */ .media-text--nlh .media-text__body .sec__title, .media-text--nlh .media-text__body .sec__title span { line-height: var(--mt-title-lh); } /* Prvi blok (uvod i odlomci do prvog podnaslova) na svom x i u svojoj širini (polja `first_inset`, `first_width`). Smile team sek. 2: prvi blok od x 763 širok 510 (5 redova), drugi od 757 širok 643; Laboratorio sek. 9: prvi blok 5 px desnije od drugog (nalazi S2-04, LAB-22). Širina je stvarna širina bloka, pa se prelom redova poklapa s PDF-om. */ .media-text--prvi .media-text__body .sec__lead, .media-text--prvi .media-text__body .sec__text > :not(.media-text__sub, .media-text__sub ~ *) { margin-inline-start: var(--mt-first-x); width: var(--mt-first-w); max-width: none; } /* Pomak uvoda, teksta i harmonike BEZ promjene širine (polje `body_shift`). `body_inset` uvlači i time sužava red — kod desno poravnatog teksta Estetica sek. 3 to je mijenjalo prelom (nalaz ED-N2). Relativni pomak ne dira raspored: stupac zadržava svoju širinu i visinu, samo se nacrtani tekst pomakne za izmjerenu mjeru. */ .media-text--bx .media-text__body :is(.sec__lead, .sec__text, .media-text__acc) { position: relative; left: var(--mt-body-x); } /* Pilula dugmeta u izmjerenoj širini i s izmjerenom uvlakom natpisa (polja `cta_w`, `cta_pad`), isto pravilo kao `.text-band--cw`: natpis na uvlaci, krug uz desni rub, razmak natpis -> krug je ostatak. Corone i Ponte 268,9 x 43 s natpisom na 74,4; Odontoiatria digitale 349,8 x 36,9; Clinica sek. 13 399,6 x 36,9 (nalazi CD-04, PD-18, OD-N1, CL-18). Mjera je iz desktop PDF-a; na telefonu pilula ide po natpisu. */ .media-text--cw .media-text__body .btn.btn--cta { width: var(--mt-cta-w); --btn-gap: 0px; } .media-text--cp .media-text__body .btn.btn--cta { padding-left: var(--mt-cta-pad); } } /* HARMONIKA (varijanta `cols_accordion`, Apicectomia sek. 5, nalaz AP-01). Mjere iz PDF-a (x 872-1402, fotografija 113-859 x 1765-2229): naslov stavke 16 px Light #009dc9 verzalom, red 22,4, tekst odmah ispod tekst 14 px Regular bijeli, korak 22 znak 24 px Regular #009dc9 na x 1385 (stupac 17 px uz desni rub); „-" prve stavke je na liniji pisma naslova, „+" druge je 18,5 px iznad nje, u razmaku ispod crte — tako ga PDF crta (ink 1991-2003 prema naslovu 2013-2023) crta potez #169dc9 od 1 px preko cijelog stupca, 36 px ispod zadnjeg reda prve stavke; naslov druge 38,8 ispod crte. Obje stavke su otvorene, kao u dizajnu; posjetilac ih može zatvoriti. */ .media-text__acc-item + .media-text__acc-item { margin-top: 2.25rem; /* 36 */ padding-top: 2.16875rem; /* 34,7: crta -> tinta naslova 44 */ /* `--mt-acc-c`: polje „Colore dei segni e delle linee" (samo kad je popunjeno, media_text.php). */ border-top: 1px solid var(--mt-acc-c, var(--c-btn)); } .media-text__acc-sum { display: grid; grid-template-columns: minmax(0, 1fr) 1.0625rem; /* znak na x 1385 u stupcu do 1402 */ align-items: baseline; list-style: none; cursor: pointer; } .media-text__acc-sum::-webkit-details-marker { display: none; } .media-text__acc .media-text__col-title, .media-text__acc .media-text__col-title span { line-height: 1.4; } /* Prored znaka 1: s proredom 1,4 bi znak od 24 px (ispod linije pisma 8,4 px) produžio red naslova (5,6) i tekst stavke spustio 3 px. */ .media-text__acc-znak { font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--mt-acc-c, var(--c-accent)); } .media-text__acc-znak::before { content: "+"; } .media-text__acc-item:first-child[open] .media-text__acc-znak::before { content: "-"; } /* APIC-K02: poslije prvog klika (klasa iz `sections.js`) znak prati stanje svake stavke. Mjesto znaka ostaje isto, samo se mijenja znak. */ .media-text__acc.is-dirnuta .media-text__acc-item[open] .media-text__acc-znak::before { content: "-"; } .media-text__acc.is-dirnuta .media-text__acc-item:not([open]) .media-text__acc-znak::before { content: "+"; } .media-text__acc-item + .media-text__acc-item .media-text__acc-znak { position: relative; top: -1.15625rem; } /* 18,5 */ .media-text__acc-text { margin: 0; font-size: .875rem; line-height: 1.375rem; } /* Pragma, 30. 9. 2026 (M27): tekst uvijek otvoren, bez + / − (polje „Testo sempre aperto", `media_text.php`). Znak je nevidljiv, ali zadržava stupac od 17 px i visinu reda naslova (26), pa se naslov, tekst i crta ne pomjere; stavka nije

, pa nema ni pokazivača za klik. */ .media-text__acc--otvorena .media-text__acc-znak { visibility: hidden; } .media-text__acc--otvorena .media-text__acc-sum { cursor: auto; } /* KARTICA (varijanta `card`, Clinica sek. 13, nalazi CL-17 i CL-18). PDF: kartica 1286 x 481 na x 113 (raster s uspravnim preljevom (31,29,28) -> (13,13,13), dno doseže oko 97 % visine), zaobljena. Naslov 38 px u JEDNOM redu centriran preko kartice, tinta 40 px ispod vrha kartice. Fotografija 718 x 331 na x 142 (29 od ruba), 112 px ispod vrha kartice; stupac teksta 424 na x 869 (9 od fotografije); 38 redova od dna fotografije do dna kartice. Naslov na sajtu ima prored 36 (PDF 53,2), pa su odmak iznad njega i razmak ispod njega mjereni po TINTI, ne po okviru retka. Treći stupac mreže je ostatak kartice: bez njega bi red naslova bio širok samo slika + tekst (1151) i naslov bi stajao 39 px lijevo od sredine. */ .media-text--kartica > .media-text__head { grid-column: 1 / -1; text-align: center; } .media-text--kartica > .media-text__head .sec__title { margin: 0; } .sec__inner.media-text--kartica { border-radius: .625rem; /* Vlastita boja kartice: „Sfondo delle schede" (`--sec-card-bg`). */ background: var(--sec-card-bg, linear-gradient(180deg, #1f1d1c 0%, #0d0d0d 97%)); } @media (min-width: 1024px) { .sec__inner.media-text--kartica { grid-template-columns: var(--mt-w) minmax(0, var(--mt-tw, 1fr)) minmax(0, 1fr); align-items: start; column-gap: .5625rem; /* 9 */ row-gap: 2.3125rem; /* 37: tinta naslova -> fotografija 33 */ padding: 2.3625rem 1.8125rem 2.375rem; /* 37,8 (tinta 40) | 29 | 38 */ } } /* Na telefonu je kartica u margini stranice (`--m-side`): kontejner je `width: 100%`, pa mu se širina mora oduzeti izričito, inače bi kartica izašla 36 px preko desnog ruba. */ @media (max-width: 1023px) { .sec__inner.media-text--kartica { width: auto; margin-inline: var(--m-side); padding: 1.5rem 1.25rem; } } /* POMAK MODULA PO STRANICI (polje `o_dx` reference na modul, klasa `sec--dx` i varijabla `--sec-dx` iz `smile_section_attrs`). PDF-ovi stranica isti modul crtaju na drugom x — red Numeri na Denti fissi je 3 px lijevo od tabaka. Pomiče se nacrtani sadržaj kontejnera, bez promjene širine i bez utjecaja na susjede; razdjelne linije sekcije (`::before` / `::after` na `.sec`) ostaju gdje jesu. Samo desktop: mjera je iz desktop PDF-a. (Trust V2 ima svoj pomak, `offset_x` u `trust.php`.) */ @media (min-width: 1024px) { .sec--dx > .sec__inner { position: relative; left: var(--sec-dx); } } /* Mobilna fotografija iz dizajna vec nosi znak utisnut u sebe — samo na telefonu, gdje se ona i prikazuje (``). */ @media (max-width: 767px) { .media-text--m-slika .media-text__logo { display: none; } } /* MALA SLIKA na telefonu ostaje u svojoj veličini (ikona snopa dokumenata 119 x 132, medalja 156 x 211), umjesto da naraste na punu širinu stupca (nalazi IT-31, MS-R2-01). Klasu `media-text--mala` dobiju samo slike uže od 300 px. Stoji uz lijevi rub kao tekst ispod nje; `.sec` ispred je jači od desktop pravila `.media-text--tw.media-text--right` (uz desni rub). */ @media (max-width: 1023px) { .sec .media-text--mala .media-text__media, .sec .media-text--mala .media-text__media:has(img) { width: auto; max-width: 100%; justify-self: start; } .media-text--mala .media-text__img { width: var(--mt-w); height: auto; max-width: 100%; } } /* ---------- kolone ---------- */ .cols { display: grid; gap: 2.5rem; margin: 2rem 0 0; padding: 0; list-style: none; } .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cols__icon img { width: 3rem; height: 3rem; object-fit: contain; } .cols__title { margin: .75rem 0 .5rem; font-size: 1rem; font-weight: 700; /* Tracking je nula, iz mjere — vidi `.hero__eyebrow`. Ovdje je najveci dio roda: 36 blokova, svih 36 je padalo po sirini inka. */ text-transform: uppercase; letter-spacing: 0; color: var(--c-accent); } /* Kartica s vlastitom pozadinom nosi svoju boju teksta: na plavoj kartici (#009dc9 iz polja card_from/card_to) je plavi naslov nevidljiv. Zateceno je bilo 36 takvih naslova na deset stranica. */ .cols--cards .cols__title { color: inherit; } /* Dizajn koristi tri velicine naslova kolone: 16 verzalom, 22 i 24. */ .cols--t22 .cols__title, .cols--t24 .cols__title { font-weight: 400; text-transform: none; letter-spacing: 0; } .cols--t22 .cols__title { font-size: 1.375rem; } .cols--t24 .cols__title { font-size: 1.5rem; } /* Kolone kao kartice s vlastitom pozadinom. */ /* Kartice kolona, mjereno iz PDF-a: 635 x 276 na x=113 i x=762, dakle razmak 14 px, a tekst pocinje na 178 pa je uvlaka 65. */ /* Oblik i preljev, iz PDF-ova (render 2x, `ugao.py`): tamna kartica je slika 635 x 276 s uglom od 10 px i USPRAVNIM preljevom (30,28,27) na vrhu, (22,21,20) u sredini, (13,13,13) na dnu — jednako lijevo i desno. Tema je crtala 135deg i 20 px, pa se desni donji ugao stapao s podlogom. Plave kartice imaju prave lijeve uglove (`cols--r-desno`, polje „Angoli"). */ .cols--cards { gap: 0.875rem; } .cols--cards .cols__item { padding: 2.375rem 4.0625rem; min-height: 17.25rem; /* 276 */ border-radius: var(--cols-rad, .625rem); /* `--sec-card-bg` postoji samo kad klijent izabere „Sfondo delle schede"; bez njega ostaje preljev iz dizajna (ili iz polja „Gradiente"). */ background: var(--sec-card-bg, linear-gradient(180deg, var(--card-from, #1e1c1b), var(--card-to, #0d0d0d))); color: var(--c-white); } .cols--cards.cols--r-desno .cols__item { border-radius: 0 var(--cols-rad, .625rem) var(--cols-rad, .625rem) 0; } /* Jedna traka pod svim stupcima (tim, „Responsabilità definite"): preljev je VODORAVAN, #0c0d0d lijevo -> #083544 desno, stupci nemaju svoj okvir. */ .cols--band { gap: 1.5rem; padding: 1.5rem; border-radius: var(--cols-rad, .625rem); background: var(--sec-card-bg, linear-gradient(90deg, var(--card-from, #0c0d0d), var(--card-to, #083544))); color: var(--c-white); } .cols--cards .cols__title { margin-top: 0; } .cols__text { font-size: .875rem; line-height: 1.5714; } .cols__text p, .steps__text p, .info-cards__text p, .tiles__text p, .two-col__text p, .pay__text p, .scards__text p, .hub-row__text p { margin: 0; } /* ---------- plocice ---------- */ .tiles { display: grid; gap: 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; } .tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tiles__item { padding: 1.75rem; color: var(--c-white); } .tiles__title { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 500; } .tiles__text { font-size: .875rem; line-height: 1.5714; } /* ---------- numeri ---------- */ /* Mjereno iz tri PDF-a (modul Numeri, Denti fissi, naslovnica): broj i labela su LIJEVO poravnati na istom x, a tri stavke stoje na odmacima 424,5 i 370 px, s blokom uvucenim 201 px od ruba kontejnera. Razmaci nisu jednaki - to je slobodno pozicioniranje iz dizajna, ne mreza. */ .numbers { display: grid; gap: 2rem; margin: 2rem 0 0; padding: 0; list-style: none; text-align: left; } /* Gornja margina je razmak ISPOD NASLOVA modula. Kad naslova nema, lista je prvo dijete kontejnera i razmak od vrha sekcije je samo `spacing_top` stranice. Prije je margina od 32 px stajala i bez naslova: naslovnica ju je nadoknađivala sa `spacing_top` 4,1, a urednik koji upiše razmak iz PDF-a dobio bi 32 px više. Sada je `spacing_top` tačno razmak vrh sekcije -> vrh kvadratića ikone, izmjeren u PDF-u stranice. */ .numbers:first-child { margin-top: 0; } .numbers--1 { grid-template-columns: 1fr; } .numbers--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .numbers--3 { /* Odmaci vec ukljucuju razmak, pa razmaka mreze ne smije biti. Odmak je mjeren do IKONE (x=221), ne do broja (x=317): ikona stoji lijevo od broja, a ne iznad njega. Dok je bila iznad, odmak je bio 201 i cijeli red je stajao 108 px predesno. */ grid-template-columns: 26.53125rem 23.125rem 1fr; /* 424,5 | 370 | ostatak */ column-gap: 0; margin-left: 6.75rem; /* 108 = 221 - 113 */ } .numbers--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* PDF: ikona 71x71 LIJEVO od broja, razmak 25 px, poravnata s vrhom broja. Prije je stajala iznad broja, pa je red bio visi i pomjeren udesno. */ .numbers__item { display: grid; grid-template-columns: 4.4375rem auto; /* 71 */ /* Ikona (71) zauzima oba reda i viša je od broja i natpisa zajedno. Kad su oba reda `auto`, višak visine ikone mreža dijeli NA OBA reda, pa je natpis bio gurnut ~3,7 px niže od mjesta koje mu daju mjere. Drugi red `1fr` uzima cijeli višak ispod natpisa; natpis stoji odmah ispod broja. */ grid-template-rows: auto 1fr; column-gap: 1.5625rem; /* 25 */ align-items: start; } /* Isto izuzeće koje ima `media_text` (vidi gore): između 1024 i 1340 px je raspored umanjena kopija dizajna, a bočna uvlaka kontejnera od 1,25rem je red brojeva pomjerala 13-14 px udesno od umanjenog dizajna (na 1024 px ikone na x 163 / 451 / 701 umjesto 150 / 437 / 688), pa razmak od ruba fotografije sekcije iznad nije bio 73 nego 86 px. Ispod 1024 uvlaka ostaje, jer red tada prelazi u 3 odnosno 2 stupca. */ @media (min-width: 1024px) and (max-width: 1340px) { .sec--numbers > .sec__inner { padding-inline: 0; } } .numbers__item:not(:has(.numbers__icon)) { grid-template-columns: auto; } /* Dugme koje je stranica dodala modulu Numeri (numbers.php, `numbers__cta`): centrirano ispod brojki, s razmakom od reda i od dna sekcije. „Distanza sopra il pulsante" (`--sec-cta-gap`) ga pomiče dalje. */ .numbers__cta { display: flex; justify-content: center; margin: calc(2.5rem + var(--sec-cta-gap, 0px)) 0 1.5rem; } .numbers__icon { grid-row: 1 / span 2; } .numbers__icon img { width: 4.4375rem; height: 4.4375rem; object-fit: contain; } /* PDF (sve četiri stranice, vrh i dno slova PIL-om): vrh brojke je 8 px ispod vrha kvadratića ikone, vrh natpisa 46 px. Dvije mjere, dvije veličine: red broja visok 37 px i 3 px iznad njega. Natpis zadržava prored teksta (25,1 px) jer se na uskom ekranu lomi u dva reda. Izmjereno na sajtu: brojka +8, natpis +46, kao u PDF-u. Prije: `line-height: 1.1` (38,5) bez razmaka dao je +5 i +48. */ .numbers__num { display: block; padding-top: .1875rem; /* 3 */ font-size: 2.1875rem; /* 35 */ font-weight: var(--num-fw, 700); /* „Peso dei numeri" (`num_fw`) */ line-height: 2.3125rem; /* 37 */ color: var(--num-color, var(--c-accent)); } .numbers__label { display: block; margin-top: 0; font-size: 1rem; font-weight: var(--num-label-fw, var(--fw-light)); /* „Peso delle descrizioni" */ } /* „Colore delle descrizioni" (`label_color`): samo kad je upisana; inače opis nasljeđuje boju teksta sekcije (Tema). */ .numbers[style*="--num-label-color"] .numbers__label { color: var(--num-label-color); } /* Pomak brojke i natpisa jedne stavke (polja `num_dy`, `label_dy`, NKP-01): u svih pet PDF-ova je „20" 4,1 px niže od „35000+", a „7" 1 px više, pa natpisi 0,9 / −1,1. Pomjera se samo taj dio, a red i ikone ostaju gdje jesu — mjera iz PDF-a za tu stavku, ne naknada za tuđi razmak. Samo desktop: na telefonu stavke idu u dva stupca, a mobilnog dizajna nema. */ @media (min-width: 1024px) { .numbers__item[style] > .numbers__num { translate: 0 var(--num-dy, 0rem); } .numbers__item[style] > .numbers__label { translate: 0 var(--num-ldy, 0rem); } } /* ---------- koraci ---------- */ /* USPRAVNI RITAM KORAKA — mjeren po BAZNIM LINIJAMA u PDF-u (fitz `origin`), na svih 17 sekcija `steps`, i na sajtu istim pravilom (vrh okvira reda + 1,05 × veličina pisma; Poppins ima ascent 1050/1000). Šta je u dizajnu STALNO (17 od 17 sekcija, sve varijante): broj → prvi red naslova koraka 44,5 px (sajt je imao 55,0) Šta se mijenja od sekcije do sekcije, pa je polje po sekciji: naslov/uvod sekcije → broj 109 · 111 · 117 · 125 · 130 · 131 · 137 · 156 (sajt: 110 svuda) zadnji red naslova → tekst 27,5 · 28,5 · 29,5 · 31,5 · 35,5 · 41,5 zadnji red teksta → broj ispod 71 · 107 · 112 (sajt: 96) Zato tri varijable s poljima u rasporedu (`gap_top`, `text_gap`, `row_gap`, u px na 1512), a zadane vrijednosti su one najčešće. Broj ima okvir VISOK KOLIKO I NJEGOVO SLOVO (line-height .7 = 56 px, bazna linija na dnu okvira). S `line-height: 1` okvir je bio 80 px, a slovo je stajalo 13,5 px ispod vrha i 12 px iznad dna — pa je razmak između redova koraka morao biti NEGATIVAN da pogodi All on 4/6 (71 px od teksta do broja), a to mreža ne može. Sada su sva tri razmaka stvarni razmaci između slova. */ .steps { counter-reset: step; display: grid; gap: calc(var(--steps-rg, 48.8) * .0625rem) .625rem; margin: calc(var(--steps-mt, 69.9) * .0625rem) 0 0; padding: 0; list-style: none; } .sec--v-light_2 .steps, .sec--v-dark_2 .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sec--v-light_3x2 .steps, .sec--v-dark_3 .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sec--v-light_4 .steps, .sec--v-dark_4 .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Tekst svih koraka u jednom redu počinje na ISTOJ visini i kad je neki naslov u jednom redu a susjedni u dva (Innesto osseo korak 4, Faccette koraci 3 i 4): dizajn ostavlja prazan red ispod kraćeg naslova. Stavka zato dijeli redove mreže sa susjedima (subgrid): prvi red je broj + naslov, drugi tekst, pa najviši naslov u redu određuje gdje počinje tekst u cijelom redu. `row-gap: 0` vrijedi samo UNUTAR stavke — između naslova i teksta je razmak naslova (`text_gap`), a ne razmak između redova. */ .steps__item { counter-increment: step; position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; /* 77,875 (bilo 77,5). GG-04: Chrome crta svaki red na cijelom pikselu, pa razmak broj -> naslov zavisi od RAZLOMKA vrha stavke (razmaci sekcija su razlomljeni). Uz 77,5 je na osam stranica naslov koraka padao 1 px bliže broju nego u dizajnu, a na ostalima tačno. Izmjereno na svih 17 stranica s koracima (vrh tinte broja -> vrh plave tinte naslova, i njihova težišta): 77,875 ispravlja pet (Apicectomia, Gengivectomia, Corone, Ponti, Laboratorio), a nijednu drugu ne mijenja (Estrazione, Innesto i Clinica bi pratile tek s 78, ali tada Odontoiatria conservativa, čiji crtež ima naslov 1 px bliže broju, ode 1 px dalje). Višekratnik 1/8 px: s marginom ispod (vidi `.steps__title`) zbir je tačan, pa tekst i drugi red koraka ostaju na istom pikselu. */ padding-top: 4.8671875rem; min-width: 0; } /* Broj je u PDF-u Poppins Thin 80 px, ne krugic. Ispisuje ga brojac, pa se prerazmjestanjem koraka numeracija sama slozi. */ .steps__item::before { content: counter(step) "."; position: absolute; top: 0; left: 0; font-size: 5rem; /* 80 */ font-weight: 100; line-height: .7; /* 56: okvir = slovo, bazna linija na dnu */ color: inherit; } /* Broj upisan u korak (polje „number") umjesto automatskog. Brojač i dalje teče, pa sljedeći koraci ostaju ispravno numerisani. */ .steps__item[data-broj]::before { content: attr(data-broj); } /* Boja i debljina brojeva iz polja sekcije (`num_color`, `num_weight`). Pravilo postoji samo za listu koja nosi varijablu, pa bez polja broj ostaje u boji teksta varijante i debljini 100. */ .steps[style*="--steps-num-c"] > .steps__item::before { color: var(--steps-num-c); } .steps[style*="--steps-num-w"] > .steps__item::before { font-weight: var(--steps-num-w); } /* RAZMAK MEDJU SLOVIMA KOJI DIZAJN IMA A TEMA NEMA — obrnut rod od onog kod `.hero__eyebrow`. Ovdje dizajn SAZIMA naslov koraka, pa je tema sira. Izvedeno iz mjere, ne procijenjeno: na 14 JEDNOREDNIH naslova (kod `7a90d35`, lijevi rub tacan do 0,1 px) razlika sirine podijeljena brojem razmaka medju slovima daje 0,0200em uz rasap 0,0001em. Model „vodoravna skala" na istom skupu daje 1,0413 uz rasap 0,0042 — dakle cetrdeset puta losije relativno. Tracking, ne skala. ZASTO JE PRETHODNA ODLUKA („namjerno ostavljeno") BILA NA KRIVOJ PREMISI. Odbijeno je bilo zato sto pravilo „dira 71 blok da popravi 62, a 9 koji danas prolaze stavlja na kocku". Brojevi 71/62/9 su tacni, ali onih 9 NIJE rasuto medju onih 62: svih 9 stoji u TACNO DVIJE sekcije, i nijedna sekcija ne mijesa dva roda. Izmjereno nad svih 17 `steps` sekcija (sekcija je uparena s predloskom preko redoslijeda iz `deploy/seed/sezioni/`, ne po tekstu): 15 sekcija, 62 naslova dizajn IMA -0,02em -> svih 62 danas pada 2 sekcije, 9 naslova dizajn NEMA tracking -> svih 9 danas prolazi Te dvije sekcije su jedine dvije `steps` sekcije s varijantom `dark_3` u cijelom dizajnu (`01-landing-no-bone-implant` sek 5, `02-landing-all-on-4-6-straumann` sek 5). Varijanta je dakle DOVOLJNA da ih razdvoji, pa polje po sekciji ovdje ne treba: pravilo dira 62 bloka od kojih danas pada svih 62, a nijedan koji prolazi nije izlozen. VARIJANTA JE ZAMJENA, NE UZROK. `dark_3` ne uzrokuje odsustvo trackinga — ona je jedini podatak o sekciji koji ta dva roda razdvaja, i razdvaja ih 17 od 17. Ako dizajn ikad doda `steps` sekciju s `dark_3` KOJA ima tracking, ovo vise nece vrijediti i vrijednost mora na polje po sekciji. Provjera je jedna: `deploy/qa/vodoravno.py` nad svjezim snimkom. */ .steps__title { /* 9,75 daje 31,5 px od bazne linije zadnjeg reda naslova do bazne linije prvog reda teksta — najčešća mjera u dizajnu; ostale nosi polje. */ margin: 0 0 calc((var(--steps-tg, 9.75) - .375) * .0625rem); /* −0,375: preuzeto u padding-top stavke (77,875) */ font-size: 1.5rem; /* 24 */ font-weight: 400; line-height: 1.25; letter-spacing: -.02em; color: var(--c-accent); } /* Dvije sekcije kojima dizajn tracking NE daje. Dva razreda nadjacaju jedan TEZINOM, ne redoslijedom — pa pravilo vrijedi i ako se datoteka ikad ucita drugdje u kaskadi. */ .sec--v-dark_3 .steps__title { letter-spacing: 0; } .steps__text { font-size: .875rem; line-height: 1.5714; } /* Korak s vlastitom uvlakom i širinom (polja `inset` / `width` koraka). Broj ide s tekstom: u dizajnu No Bone i „1." i tekst stoje na x 123. Širina smije biti i VEĆA od stupca (Corone: 427 u stupcu od 422) — višak pada u razmak do sljedećeg stupca, gdje ionako nema ničega. */ /* Uvlaka je MARGINA stavke, ne padding: cijeli korak (i broj) stoji tamo gdje ga dizajn crta, pa uvlaka smije biti i ulijevo od stupca (Corone: prvi korak na x 110, stupac na 113 — s 427 px od x 113 „aspettative" stane u red koji se u dizajnu lomi). */ .steps__item--mjera { margin-left: calc(var(--k-inset, 0) * .0625rem); } /* Broj pomaknut od teksta svog koraka (polje `number_x`). */ .steps__item--mjera[style*="--k-bx"]::before { left: calc(var(--k-bx) * .0625rem); } .steps__item--mjera[style*="--k-w"] > * { width: calc(var(--k-w) * .0625rem); max-width: none; } /* Uvod ispod naslova sekcije koraka: 47,5 px od bazne linije naslova do bazne linije uvoda (Clinica 48, Laboratorio 47), a opće pravilo naslova daje 40. Margina naslova (20) i uvoda se SLAŽU (collapse), pa uvod mora nositi cijelih 27,5 — samo 7,5 bi progutala veća margina naslova. */ .sec--steps > .sec__inner > .sec__title + .sec__lead { margin-top: 1.71875rem; } /* 27,5 */ /* Naslov i uvod sekcije koraka prate temu kad je boja iz trake ona koja se na toj temi ne bi vidjela (nalaz „koraci", kontrola p2). U bazi svih 17 steps sekcija naslov nosi boju iz trake koja odgovara varijanti: c-white na dark_*, c-dark na light_* (uvod c-white na 89 i 91). Kad urednik promijeni «Tema — colori del testo» ili varijantu, ta klasa je ostajala: bijeli naslov na bijelom (kopija Ponte) ili crni na #1f1c1b (kopija Faccette). Pravilo gađa SAMO bijelo na svijetloj i crno na tamnoj temi, kombinaciju koju nijedna prava sekcija nema, pa je ispis danas piksel-isti; ostale boje iz trake (azurna, vlastita boja iz birača, inline style) ostaju kakve jesu. Klasa je ili na samom h2/p (smile_heading seli klase spana koji obuhvata sve) ili na spanu u njemu. Boja je ista kao da je urednik izabrao suprotnu klasu: `.c-dark` u tipografija.css je #000, `.c-white` je var(--c-white). */ .sec--steps.sec--light > .sec__inner > :is(.sec__title, .sec__lead):is(.c-white), .sec--steps.sec--light > .sec__inner > :is(.sec__title, .sec__lead) .c-white { color: #000; } .sec--steps.sec--dark > .sec__inner > :is(.sec__title, .sec__lead):is(.c-dark), .sec--steps.sec--dark > .sec__inner > :is(.sec__title, .sec__lead) .c-dark { color: var(--c-white); } /* Dugme ispod koraka (Laboratorio: „Approfondisci CAD CAM"). U dizajnu je CENTRIRANO ispod sva četiri koraka (pilula 627,7–884,3, sredina 756), vrh pilule na y 1338,0 — 50 px ispod bazne linije zadnjeg reda teksta (1288), dakle 43,95 ispod dna tog reda (bazna linija + 6,05). Bilo je 44,9, pa je pilula stajala na 1338,95 (krug 4). Pilula je 256,6 px: uvlaka 24,2 + natpis + 15,1 + krug 23 + 5,4 — ne 35,2 | 43,2 kao „Approfondisci" u foto+tekst. Krug 23 x 25 je isti (mjereno u PDF-u). */ /* Vrijedi i na mobilnom (KOR-N4): tamo je dugme bilo 295,6 px sa 40 px praznine između natpisa i kruga i stajalo je bez razmaka na dnu teksta. Razmak natpis → krug ide kroz `--btn-gap`, ne `gap`: na uskom ekranu `gap` pilule je nula, a isti razmak nosi razmakničar (`::after`) iz `components.css`, koji čita baš tu varijablu. Natpis se ne lomi: na 430 px pilula je 257 px u prostoru od 358. */ .sec--steps > .sec__inner > .btn { display: flex; width: fit-content; margin: calc(2.746875rem + var(--sec-cta-gap, 0px)) auto 0; /* 43,95 */ } .sec--steps > .sec__inner > .btn--sm.btn--cta { padding-left: 1.5125rem; /* 24,2 */ --btn-gap: .94375rem; /* 15,1 */ } /* Vodoravni pomak cijelog sadržaja sekcije (polje `shift_x`). Invisalign: PDF crta naslov, brojeve i tekst ove sekcije 3 px lijevo od kontejnera (stupci na 110 / 434 / 759 / 1082, naslov 337–1168 umjesto 340–1171), a sve ostale sekcije iste stranice i ClearCorrect s istim rasporedom stoje na kontejneru. Pomiče se sadržaj, ne pozadina trake. */ @media (min-width: 1024px) { .sec--steps > .sec__inner[style*="--steps-dx"] { translate: calc(var(--steps-dx) * .0625rem) 0; } } /* Fotografija u sekciji koraka (Ponte dentale): uglovi 10 px — polumjer putanje isijecanja u PDF-u (123 − 113) — a ne 20 kao kartice. Iznad nje je bijela linija 1 px; fotografija je 25,5 px ispod linije. PDF (vektor): potez linije 1852,08–1853,08, fotografija 1878,58–2342,66. Dno liste koraka je na 1803,08, pa je linija 49 px ispod nje, ne 50 (s 50 su linija i fotografija stajale 1 px niže, a s njima i linija ispod fotografije — PD-02, krug 4). */ .sec--steps .sec__band { border-radius: .625rem; } /* Boja ista kao linija ispod fotografije (`sep_color` sekcije, bijela po dogovoru grupe „globalno"): obje su u PDF-u bijeli potez 1 pt. */ .steps__band-rule { height: 1px; margin: 3.0625rem 0 0; /* 49 */ border: 0; /* Vlastita boja iz polja `band_rule_color` ima prednost. */ background: var(--steps-rule-c, var(--sec-sep, #fff)); } .steps__band-rule + .sec__band, .steps__band-rule + .sec__bands { margin-top: 1.59375rem; } /* 25,5 */ /* Na uskom ekranu fotografija koraka ne nosi visinu trake s desktopa (`band_h` 464): u stupcu od 358 px to je bio uspravan okvir 358 x 464, koji `cover` puni sredinom panorame uvećane tri puta (Ponte dentale: vidi se samo lice tehničarke, slika mutna — isto kao SB-18 i KOR-N8 na `image_band`). Ispod 1024 slika se crta cijela, u svom omjeru; širina i visina su u , pa nema skoka pri učitavanju. */ @media (max-width: 1023px) { .sec--steps .sec__band-img { height: auto; } } /* All on 4/6 (jedina sekcija koraka u kontejneru 1170): u DRUGOM redu je broj 5 px bliže naslovu nego u prvom (39,5 naspram 44,5 — PDF, bazne linije 2383 → 2422,5 i 2078 → 2122,5). Naslovi i tekst drugog reda stoje tačno 300 px ispod prvog; pomaknut je samo broj. */ .sec--steps .sec__inner--1170 .steps__item:nth-child(n+4)::before { top: .3125rem; } /* 5 */ /* ---------- info kartice ---------- */ .info-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; } .info-cards__item { box-sizing: border-box; padding: 1.75rem; border-radius: var(--ic-r, 1.25rem); /* Preljev je u dizajnu USPRAVAN na svih pet pojava (Apicectomia 3 i 6, Invisalign, Clear Correct, Chirurgia gengivale): po vodoravnoj crti boja je ista, od (30,28,27) na vrhu do (13,13,13) na dnu. Pod 135deg je desna polovina kartice bila vidno tamnija. */ /* „Sfondo delle schede" (postavke sekcije, `--sec-card-bg`) ima prednost pred preljevom; varijabla postoji samo kad je izabrana. */ background: var(--sec-card-bg, linear-gradient(180deg, var(--card-from), var(--card-to))); } /* Boja teksta kartice iz polja `card_fg` (info_cards.php je piše na listu samo kad je popunjena); bez nje bijela, kao `.sec .info-cards__item` gore. */ .sec .info-cards .info-cards__item { color: var(--card-fg, var(--c-white)); } .info-cards__icon img { width: 2.5rem; height: 2.5rem; object-fit: contain; } /* Naslov kartice bez stila izgleda kao u dizajnu (sve pojave: plavo 22/400, prored 28). Do sada je bez stila bio bijel 20/500, pa je „Rimuovi formattazione" u uređivaču davalo drugi izgled. Postojeći naslovi nose klase c-accent fs-22 fw-400 s istim vrijednostima, pa se ne mijenjaju. */ .info-cards__title { margin: .75rem 0 .5rem; font-size: 1.375rem; font-weight: 400; line-height: 1.2727; color: var(--c-accent); } .info-cards__text { font-size: .875rem; line-height: 1.5714; } /* Prazan red između pasusa, kad ga dizajn ima (Apicectomia sek. 3: 22 px). */ .info-cards__text p + p { margin-top: var(--ic-pg, 0px); } /* Ručni prelom iz dizajna (Clear Correct „dal numero / degli", Apicectomia „possibilità / di ritrattamento") vrijedi samo na širini dizajna; na užem ekranu kartica je druge širine. Ispred svakog
u sadržaju stoji razmak, pa se riječi ne spajaju kad se prelom sakrije. */ @media (max-width: 1023px) { .info-cards__text br, .info-cards__title br { display: none; } } /* ---------- tekstualna traka ---------- */ .text-band { text-align: center; } /* Dugme trake. Dugme je stajalo 3-4 px ispod zadnjeg retka teksta, a dizajn ga drži 15 do 34 px niže, različito na svakoj stranici (Prima visita 15, Clinica 20, Digital Smile Design 25, Odontoiatria digitale 27, Testimonianze 34 — od dna retka teksta do vrha pilule). Mjera je zato podatak sekcije: zajedničko polje `cta_gap` („korekcija u odnosu na sadašnji položaj"), isto kao u `media_text`. */ .text-band > .btn { margin-top: var(--sec-cta-gap, 0); } /* Dva dugmeta u redu (polje `cta2_label`, Cijene „Preuzmite PDF / CSV"): centrirana kao jedno dugme, 16 px između; na uskom ekranu idu jedno ispod drugog. */ .text-band__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: var(--sec-cta-gap, 0); } .text-band--side > .text-band__btns { justify-content: flex-start; } /* Mjere trake po sekciji (polja `title_gap`, `lead_gap`, `text_w`). Klasa se dodaje samo uz mjeru, pa sekcija bez mjere ostaje kakva je bila. */ .text-band--tg > .sec__title { margin-bottom: var(--tb-title-gap); } .text-band--lg > .sec__lead { margin-bottom: var(--tb-lead-gap); } .text-band--tw > .sec__text { max-width: var(--tb-text-w); margin-inline: auto; } /* Naslov -> tekst na svijetloj traci. Kutija naslova 24 px i prvog retka teksta su u PDF-u 54,0 px jedna od druge (Estrazione, Invisalign, ...), a slova su 51-52 px; sajt je s 20 px margine davao 50 na svih deset svijetlih traka bez polja `title_gap` (ED, SB, FD, DSD sek#6, OD sek#9, OG sek#11, IN, IO, CC, AP). Tamne trake i trake s uvodom ispod naslova su već tačne, pa se ne diraju. Polje `title_gap` i dalje ima prednost. */ .sec--light .text-band > .sec__title:has(+ .sec__text) { margin-bottom: var(--tb-title-gap, 1.375rem); } /* Traka s naslovom lijevo (polje `col1_width`): i na telefonu, gdje se stupci slože jedan ispod drugog, tekst ostaje lijevo kao naslov. */ .text-band--side { text-align: left; } /* Prelom retka koji dizajn traži usred odlomka (Invisalign sek#6: „Il dentista" počinje treći redak iako bi „Il" stao u drugi) vrijedi za desktop. Na telefonu bi prisilni prelom usred rečenice ostavio kratak redak, pa se tamo ne crta. */ @media (max-width: 1023px) { .text-band .sec__text br { display: none; } /* Naslov trake s naslovom lijevo nosi prelom iz desktop PDF-a („nasce dalla
diagnosi"); na telefonu je naslov pune širine i prelom bi ostavio jednu riječ u retku. */ .text-band--side > .sec__title br { display: none; } /* Prelom naslova samo za desktop (polje `m_title_br`, klasa `text-band--m-bez-br`): Smile team sek#5 „Una competenza che diventa
standard condiviso" na telefonu je ostavljao „diventa" samu u srednjem retku (TR-N9). Klasa na samom `
` ne preživi `smile_heading()` (propušta `br` bez atributa), pa odluku nosi sekcija; predložak umeće razmak ispred preloma. */ .text-band--m-bez-br > .sec__title br { display: none; } } /* ---------- dvokolonski tekst ---------- */ .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.75rem; margin-top: 2rem; } /* Razmak od naslova sekcije do stupaca (32) postoji samo kad naslov postoji. Bez naslova je `.two-col` prvo dijete kontejnera i ta margina je čista praznina iznad stupaca: Innesto sek#2 +25, Gengivale sek#2 +47 px. Na sekcijama gdje se to nije vidjelo, `spacing_top` je bio umanjen da je pokrije (Straumann 2,7, Clinica 13,3) — sad nosi cijeli razmak. */ .sec__inner > .two-col:first-child { margin-top: 0; } /* Naslov stupca -> tekst: na pet od sedam sekcija 1-2 px više nego 12 (Innesto +2, Apicectomia +1, Gengivale +1, Straumann +2, Laboratorio sek#6 +2), pa je zajednička vrijednost 13,5. Digital Smile Design (25) i Clinica (18) nose svoju mjeru u polju `col_title_gap`. */ .two-col__title { margin: 0 0 .84375rem; font-size: 1.375rem; font-weight: 500; color: var(--c-accent); } .two-col--ctg .two-col__title { margin-bottom: var(--tc-ctg); } .two-col__text { font-size: .875rem; line-height: 1.5714; } .two-col__text > :first-child { margin-top: 0; } /* Prazan red između odlomaka (polje `text_spaced`): DSD sek#2 i tamna kartica na Laboratorio sek#5, 22 px. */ .two-col--spaced .two-col__text p + p { margin-top: 1.375rem; } /* Podnaslov u stupcu („PONTE SU DENTI NATURALI", „CORONE IN ZIRCONIO-CERAMICA"). Od slova podnaslova do slova teksta je u dizajnu 11 px na obje stranice (Ponti, Laboratorio), a tema je imala 31 — zadana margina preglednika 1,33em i ispod. Iznad ostaje 1,33em: od teksta do sljedećeg podnaslova je na Laboratoriju 31 px i u dizajnu i na sajtu. */ .two-col__text h4 { margin: 1.33em 0 0.1em; } /* Veličina, težina i boja podnaslova vrijede na SVIM širinama. U PDF-u je podnaslov 16 px Light u boji naglaska (#009dc9); dok je pravilo stajalo samo u desktop bloku (`layout-b.css`), na telefonu je h4 bio crn, 14 px Bold — drugi element, ne umanjen desktop (Ponti sek#3, Laboratorio sek#5, 430 px). */ .two-col__text h4 { font-size: 1rem; font-weight: 300; color: var(--c-accent); } /* Ponti sek#3: između blokova je linija u boji naglaska, širine stupca, 24 px ispod slova teksta i 18 px iznad slova sljedećeg podnaslova (prvi blok). Drugi blok u dizajnu ima 11 / 21 — nacrtan je drukčije od prvog, pa se drži prvi. */ .two-col--linije .two-col__text h4:not(:first-child) { margin-top: 1.3125rem; padding-top: 0.9375rem; /* Boja iz polja `blocks_rule_color` (--tc-rule), prazno = naglasak. */ border-top: 1px solid var(--tc-rule, var(--c-accent)); } /* Tamna kartica ispod prvog stupca (polje `col1_card`). Boja i oblik vrijede na svakoj širini: dok su stajali samo u pravilu za desktop, na telefonu je kartica nestajala i bijeli tekst je bio crn na bijelom (Ponti, 390 px). Kartica je visoka koliko njen sadržaj — mreža ju je rastezala na visinu desnog stupca (Laboratorio: 535 umjesto 440 px, Ponti 363 umjesto 329). */ .two-col--kartica .two-col__item:first-child { align-self: start; padding: 1.75rem 1.25rem; border-radius: 0.625rem; /* 10 */ /* Pozadina iz zajedničkog polja „Sfondo delle schede" (--sec-card-bg na sekciji), boja teksta iz polja `card_color` (--tc-card-fg). Prazno = preljev i bijela iz dizajna. */ background: var(--sec-card-bg, linear-gradient(180deg, var(--c-tile), #0d0d0d)); color: var(--tc-card-fg, var(--c-white)); } /* Naslov u kartici -> tekst: 19 px (Laboratorio sek#5), Ponti sek#3 17 — dolazi iz polja `card_title_gap` (--tc-card-tg). */ .two-col--kartica .two-col__item:first-child .two-col__title { margin-bottom: var(--tc-card-tg, 1.1875rem); } /* Fotografija ispod stupaca. Zaobljenje je u dizajnu oko 10 px, kao tamna kartica istog rasporeda, ne 20. Širina i razmak iznad (polja `band_w`, `band_gap`) su mjere s desktopa, pa su u `layout-b.css`. */ .sec--two-col-text .sec__band { border-radius: 0.625rem; max-width: 100%; margin-left: auto; } /* Visina fotografije (polje `band_h`, 423 na Laboratorio sek#6) je mjera s desktopa, gdje je traka 1281 px široka. Na telefonu je traka 358 px, pa bi ista visina napravila portretni izrez iz vodoravne fotografije (3:1), uvećan tri puta. Ispod 1024 visina ide po fotografiji. */ @media (max-width: 1023px) { .sec--two-col-text .sec__band-img { height: auto; } } /* Par fotografija (polje `band_image_2`): širina (`band_w`) vrijedi za cijeli par i stoji na omotaču; svaka fotografija puni svoj stupac. */ .sec--two-col-text .sec__bands { width: var(--tc-band-w, auto); max-width: 100%; margin-left: auto; } .sec--two-col-text .sec__bands > .sec__band { width: auto; } /* ---------- traka sa slikama ---------- */ .image-band { display: grid; gap: 1.5rem; } .image-band--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .image-band__item { margin: 0; } /* Okvir fotografije: visina trake i zaobljenje. Slika stoji pri vrhu i puni okvir, osim kad joj je zadana niža visina (`--ib-ih`). */ .image-band__okvir { display: block; height: var(--band-h, 25rem); border-radius: var(--band-r, .625rem); overflow: hidden; } .image-band__img { display: block; width: 100%; height: var(--ib-ih, 100%); object-fit: cover; } /* Na širini dizajna fotografije nisu pola-pola: širina po fotografiji (`--ib-w`), razmak (`--ib-gap`) i uvlaka trake (`--ib-pl`) su izmjereni po stranici (Digital Smile Design 633 + 15 + 643, Invisalign 5 + 638 + 5 + 638, Clear Correct 639 + 9 + 638). */ @media (min-width: 1024px) { .image-band { display: flex; gap: var(--ib-gap, 1.5rem); padding-left: var(--ib-pl, 0px); } .image-band__item { flex: 1 1 0; min-width: 0; } .image-band__item--w { flex: 0 0 var(--ib-w); } } /* Ispod 1024 px okvir NE nosi visinu trake iz dizajna (464 px). U stupcu od 358 px je to bio uspravan okvir koji `cover` puni sredinom slike uvećane 3 puta: na Sbiancamento su udlaga i olovke otpale, a slika je bila mutna (IH-N06); na Odontoiatria conservativa je lice djevojčice odsječeno (IH-N07). Slika se ovdje crta cijela, u svom omjeru (širina i visina su u , pa nema skoka pri učitavanju), a srcset uz sizes 100vw bira varijantu od 768 / 1024 px. */ @media (max-width: 1023px) { .image-band__okvir { height: auto; } .image-band__img { height: auto; } } .image-band figcaption { margin-top: .5rem; font-size: .875rem; opacity: .75; } /* ---------- video + tekst ---------- */ .video-text { display: grid; grid-template-columns: 1fr 1fr; gap: 3.75rem; align-items: center; } .video-text--right .video-text__media { order: 2; } .video-text__media { position: relative; /* Omjer i uglovi iz polja sekcije (`media_height`, `media_radius`): No Bone 854 x 445 s oštrim lijevim uglovima, Odontoiatria digitale 530 x 300 bez zaobljenja. Prazno = 16:9 i 20. */ aspect-ratio: var(--vt-omjer, 16 / 9); border-radius: var(--vt-r, 1.25rem); overflow: hidden; container-type: inline-size; } /* Natpis preko videa (polje `overlay_text`; No Bone „PLAY" 40 px Bold). Okvir retka je jednak okviru slova (Poppins 1,4 em), pa je `top` vrh slova kao u PDF-u. */ .video-text__natpis { position: absolute; z-index: 1; font-size: 2.5rem; font-weight: 700; line-height: 1.4; white-space: nowrap; pointer-events: none; } .video-text__natpis--sredina { left: 50%; top: 50%; transform: translate(-50%, -50%); } /* Traka s fotografijom (polja „Fotografia a tutta larghezza" i druga uz nju) je treće dijete iste mreže: bez ovoga je uz „Video a destra" zauzimala mjesto videa, a video je padao u stupac teksta. Sada ide u vlastiti red ispod videa i teksta, preko cijelog reda. */ .video-text > .sec__band, .video-text > .sec__bands { grid-column: 1 / -1; order: 3; } /* Dugme play za YouTube/Vimeo u boji iz polja sekcije. Klasa postoji samo uz popunjeno polje (`video_text.php`); trokut se tada crta maskom u boji polja umjesto ugrađene tamne slike. */ .video-text--play-bg .smile-video__play { background-color: var(--vt-play-bg); } .video-text--play-c .smile-video__play { background-image: none; } .video-text--play-c .smile-video__play::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 1.125rem; transform: translate(-50%, -50%); background: var(--vt-play-c); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M16 9 0 18V0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M16 9 0 18V0z'/%3E%3C/svg%3E") center / contain no-repeat; } /* ---------- tabela usporedbe ---------- */ /* Razmak naslov -> tablica je cijeli na `.compare` (polje `gap` sekcije, --cmp-gap): dizajn ga ima razlicit po stranici (Laboratorio 58 px od dna naslova do vrha zaglavlja, Straumann 48,3). Naslovu se margina gasi, jer bi se inace spajala s ovom i razmak bi bio max(20, gap). Zadano ostaje isto kao prije: max(20, 32) = 32. */ .sec--compare .sec__inner > .sec__title { margin-bottom: 0; } /* Pomak naslova udesno (polje `title_dx`, --cmp-title-dx) je mjera s okvira 1512: na Straumannu je naslov u dizajnu 29 px desno od sredine (x 561–1007). Na telefonu tog pomaka nema — naslov je centriran u kontejneru (FTR-N1: bez brane je h2 na 430 px dobijao 58 px lijeve uvlake, stajao 28,5 px desno od sredine i lomio se u 300 umjesto 358 px). */ @media (min-width: 1024px) { .sec--compare .sec__inner > .sec__title { padding-left: calc(2 * var(--cmp-title-dx, 0rem)); } } .compare { position: relative; margin-top: var(--cmp-gap, 2rem); } .compare__mark { position: absolute; right: 1rem; bottom: 1rem; opacity: .12; pointer-events: none; } .compare__table { position: relative; z-index: 1; width: 100%; border-collapse: collapse; } /* Celije su poravnate uz VRH (dizajn: sva tri stupca reda pocinju na istoj visini — Straumann 947/948/947, Laboratorio 3093,9 u sva tri), ne u sredini. Razmak reda nosi red (--cmp-pt / --cmp-pb, polja `pt`/`pb` reda): u dizajnu su redovi iste sadrzine razlicito visoki. */ .compare__table th, .compare__table td { padding: var(--cmp-pt, 1rem) 1.25rem var(--cmp-pb, 1rem); border-bottom: var(--cmp-sep-w, 1px) solid var(--cmp-sep, rgba(255, 255, 255, .18)); text-align: left; vertical-align: top; font-size: .9375rem; } .compare__table td { line-height: var(--cmp-lh, 1.5714); } /* Boja i debljina zaglavlja: polja `head_color` / `head_fw` (compare.php). */ .compare__table thead th { padding-top: 0; padding-bottom: var(--cmp-hpb, 1rem); font-weight: var(--cmp-head-fw, 700); color: var(--cmp-head-c, var(--c-accent)); } /* Oznaka retka („UNO DEI 12 CENTRI…", „PROVVISORIO…") je u PDF-u Poppins SemiBold 600. To nije mjera s okvira 1512 nego težina slova, pa vrijedi na svim širinama: dok je 600 stajalo samo u `tipografija.css` pod @media (min-width: 1024px), na telefonu je oznaka bila 300 i nije se razlikovala od sadržaja ćelija (FT-N4). */ .compare__table tbody th { font-weight: 600; } /* Ispod zadnjeg reda linije nema (ni Laboratorio ni Straumann). */ .compare__table tbody tr:last-child > * { border-bottom: 0; } /* Podebljan uvod u celiji („Competenza riconosciuta:") je u PDF-u Bold 700; `strong` bi inace bio „bolder" od 300 = 400. Tezina ostatka treceg stupca je po stranici (Laboratorio Regular 400, Straumann Light 300): polje `c3_fw` sekcije. */ .compare__table td strong { font-weight: 700; } .compare__table td:nth-child(3) { font-weight: var(--cmp-c3-fw, inherit); } .sec--light .compare__table th, .sec--light .compare__table td { border-bottom-color: var(--cmp-sep, rgba(11, 10, 10, .14)); } /* Ukrasni broj iza tablice — polje `mark_text` (Laboratorio „3"). Polozaj je u `layout-b.css` (samo iznad 1024 px); ispod se ne crta, jer bi s lijevim odmakom od 186 px izasao iz ekrana. */ .compare__mark--tekst { display: none; } /* Tabela usporedbe na telefonu: SLOŽENE KARTICE (FT-N1). Mobilnog dizajna nema, a desktop pokazuje cijelu tabelu s tri stupca. Na 430 px tri stupca ne stanu (najduža riječ trećeg stupca gura ćelije do x 461–475, okvir završava na 394), pa je tabela sa skrolom rezala treći stupac usred riječi, bez znaka da se može pomjeriti. Ispod 768 px svaki red je zato blok: oznaka retka, pa stupci jedan ispod drugog, svaki sa svojom oznakom iz zaglavlja (`data-label` ćelije, piše ga `compare.php` iz polja `heads`). Zaglavlje ostaje u kodu za čitač ekrana, samo se ne crta. Selektor je `.compare > .compare__table` da nadjača opće mobilno pravilo `display: block; overflow-x: auto` niže u ovom fajlu. */ @media (max-width: 767px) { .compare > .compare__table, .compare > .compare__table tbody, .compare > .compare__table tr, .compare > .compare__table th, .compare > .compare__table td { display: block; width: auto; } .compare > .compare__table { overflow: visible; } .compare > .compare__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .compare > .compare__table tbody tr { padding: 1.25rem 0; border-bottom: var(--cmp-sep-w, 1px) solid var(--cmp-sep, rgba(255, 255, 255, .18)); } .sec--light .compare > .compare__table tbody tr { border-bottom-color: var(--cmp-sep, rgba(11, 10, 10, .14)); } .compare > .compare__table tbody tr:first-child { padding-top: 0; } .compare > .compare__table tbody tr:last-child { padding-bottom: 0; border-bottom: 0; } .compare > .compare__table th, .compare > .compare__table td { padding: 0; border-bottom: 0; } /* Prored ćelije (--cmp-lh, polje `lh`) je mjera desktop tabele (Laboratorio ga ima tijesnog); u kartici na telefonu vrijedi prored tijela teksta. */ .compare > .compare__table td { line-height: 1.5714; } .compare > .compare__table tbody th { margin-bottom: .75rem; } .compare > .compare__table td + td { margin-top: .75rem; } .compare > .compare__table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .25rem; font-size: .8125rem; font-weight: var(--cmp-head-fw, 700); line-height: 1.4; color: var(--cmp-head-c, var(--c-accent)); } } /* ---------- FAQ ---------- */ .faq { margin-top: 2rem; } /* Linija je u svih 22 PDF-a s FAQ-om ista: 1 px #169dc9 (vektor u PDF-u, 0,0863 / 0,6157 / 0,7882). Boja je sadržaj (polje `sep`); ovo je samo zadana vrijednost kad polje ostane prazno. Prije je zadana bila siva rgba(255,255,255,.25) — na sajtu (72,71,71), u dizajnu nigdje. */ .faq__item { border-bottom: 1px solid var(--faq-sep, #169dc9); } /* Mjereno iz PDF-a: pitanje 24 px plavo Regular, kopca (+ i -) na x=1274 dakle uz desni rub kontejnera. Visina retka NIJE ista u svim PDF-ovima ni unutar jednog FAQ-a: koraci linija su 70/71/73/72,5/73 (Soluzioni), 70/67/65 (landing), 60/61/65/62/61 (No Bone) itd., a pitanje ne stoji na sredini retka (npr. 26 px ispod gornje linije i 13 iznad donje). Gornji i donji razmak pitanja su zato varijable --faq-pt / --faq-pb; od M12 (Pragma, 30. 9. 2026: isti razmak svuda) ih postavlja `layout-b.css` za sve stavke, a polja stavke `pt`/`pb` su uklonjena. Rezerva ovdje: 20 + 30 (redak) + 20 + 1 (linija) = 71. */ .faq__q { position: relative; padding: var(--faq-pt, 1.25rem) 3rem var(--faq-pb, 1.25rem) 0; font-size: 1.5rem; /* 24 */ /* Polja „Colore/Peso delle domande" (faq.php); prazno = dizajn. */ font-weight: var(--faq-q-fw, 400); line-height: 1.25; color: var(--faq-q-c, var(--c-accent)); cursor: pointer; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; position: absolute; right: .5rem; top: 50%; width: .75rem; height: .75rem; margin-top: -.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; } .faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-top: -.125rem; } /* Odgovor pocinje 45 px ispod vrha pitanja, mjereno iz PDF-a. */ .faq__a { padding: 0 3rem 1.375rem 0; font-size: .875rem; line-height: 1.5714; } /* Stavka bez odgovora (u PDF-ovima je otvoreno samo prvo pitanje, pa ostali odgovori ne postoje): izgleda isto, sa znakom `+`, ali nije
— klik ne otvara praznu stavku. Vidi `faq.php`. */ .faq__item--bez-odgovora .faq__q { cursor: default; } .faq__a p { margin: 0 0 1em; } /* Prored odgovora je 22 px i kad je odgovor u uređivaču označen kao 16 px (Impianti singoli: Poppins Light 16, redovi 5846,8 / 5868,8). Klasa `.fs-16` i `tipografija.css` (`p:has(> span.fs-16:only-child)`) inače donose prored 1,25 (odlomak 17,5, span 20 px), pa su se redovi odgovora zbijali za 2 px po retku. Selektor je zato jači od (0,2,2). Samo za odlomke sa spanom veličine: običan odgovor od 14 px ostaje na 1,5714 (21,9996) — tačnih 22 px ga na većini stranica spusti za 1 px. */ .sec--faq .faq .faq__a p:has(> span[class*="fs-"]), .sec--faq .faq .faq__a span[class*="fs-"] { line-height: 1.375rem; } .faq__a p:last-child { margin-bottom: 0; } /* Naslov sa strane umjesto iznad kolona. Mjere iz PDF-a: lijevi stupac ide do x 496 od kontejnera koji pocinje na 112, dakle 384 px, a stavke pocinju na 576 — razmak 80 px. Na uzem ekranu se vraca jedno ispod drugog. */ .cols-aside { display: grid; grid-template-columns: minmax(0, var(--cols-aside-w, 24rem)) minmax(0, 1fr); gap: var(--cols-aside-gap, 5rem); align-items: start; } .cols-aside > .cols { margin-top: 0; } .cols-aside__head > .sec__title { margin-bottom: 1.25rem; } /* M07 (Modifiche_01): na ≤1023 Numeri su u jednom redu s ikonom lijevo — pravila ovog bloka za Numeri nadjačana su u mobilno.css; ostaju za istoriju. */ @media (max-width: 1023px) { /* Ispod 1024 px ikona ide IZNAD brojke: red od 71 px + tekst ne stane u uzak ekran, pa je broj izlazio 55 px izvan okvira. Mobilni raspored je faza 5; ovdje se samo cuva ono sto je radilo. */ .numbers__item { grid-template-columns: auto; } .numbers__icon { grid-row: auto; } .numbers__icon img { width: 2.5rem; height: 2.5rem; } .numbers--3 { margin-left: 0; } .cols-aside { grid-template-columns: 1fr; gap: 1.5rem; } } /* ---------- CTA traka ---------- */ .cta-banner { display: flex; align-items: center; gap: 1.5rem; box-sizing: border-box; min-height: var(--cta-h, 0px); /* polje „height", mjera iz PDF-a */ padding: 1.75rem 2.25rem; color: var(--c-white); } .cta-banner__icon img { width: 3rem; height: 3rem; object-fit: contain; } .cta-banner__text { flex: 1; margin: 0; font-size: 1.375rem; font-weight: var(--fw-light); } /* Tekst uz naslov (varijanta u tri stupca, 05_Testimonianze): 16 px Light, prored 22. Boju nosi sadržaj (span iz uređivača). */ .cta-banner__opis { font-size: 1rem; font-weight: var(--fw-light); line-height: 1.375; } .cta-banner__opis p { margin: 0; } /* Boja dugmeta trake iz polja `cta_bg` (TE-02) sada dolazi kao `--btn-bg` na samom dugmetu (smile_cta), kao kod svih dugmadi; zato ovdje više nema pravila, a hover zadržava vlastitu boju (components.css). Osnovna boja teksta trake iz polja `card_fg`; bez njega bijela. */ .sec .cta-banner.cta-banner { color: var(--card-fg, var(--c-white)); } /* ---------- recenzije ---------- */ .reviews { display: grid; gap: 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; } .reviews--cols3, .reviews--google, .reviews--facebook { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reviews--video { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reviews--preview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reviews__item { padding: 1.5rem; border-radius: 1.25rem; background: var(--sec-card-bg, var(--c-tile)); } .reviews__video { margin: -1.5rem -1.5rem 1rem; border-radius: 1.25rem 1.25rem 0 0; overflow: hidden; } .reviews__poster { display: block; width: 100%; height: 11rem; object-fit: cover; } /* Na ≤1023 tekst recenzije je 14/22: mobilno.css (M08). */ .reviews__text { margin: 0 0 .75rem; font-size: 1rem; line-height: 1.25; } .reviews__author { margin: 0; font-size: 1rem; font-weight: 600; } /* Tri stupca po izvoru. Mjere iz 00_Homepage.pdf: video 314, Google 530, Facebook 418 (razmaci 10 i 14), natpis stupca 16 px Regular #009dc9 na 34 px iznad prve kartice. */ .reviews-cols { display: grid; /* Razmaci u dizajnu NISU jednaki: 10 px izmedu prvog i drugog stupca, 14 izmedu drugog i treceg (vidi mjeru iznad). Dok je bio jedan `gap` od 14, zbir je bio 314+530+418+14+14 = 1290 u kontejneru od 1286 — treci stupac je izlazio 4 px izvan okvira. Razmaci su zato vlastite trake, a sve je u udjelima, pa zbir ne moze preteci kontejner. */ grid-template-columns: minmax(0, 314fr) minmax(0, 10fr) minmax(0, 530fr) minmax(0, 14fr) minmax(0, 418fr); gap: 0; margin: 2rem 0 0; align-items: start; } /* Izricito smjestanje vrijedi SAMO dok su tri trake s razmacima, dakle na sirokom ekranu. Ispod 1024 px sekcija se slaze u jedan stupac, a stara pravila su i dalje slala stupce u trake 3 i 5 kojih vise nema — sadrzaj je izlazio 118 px izvan okvira i pravio 98 px vodoravnog skrola. */ @media (min-width: 1024px) { .reviews-cols > .reviews-cols__col:nth-of-type(1) { grid-column: 1; } .reviews-cols > .reviews-cols__col:nth-of-type(2) { grid-column: 3; } .reviews-cols > .reviews-cols__col:nth-of-type(3) { grid-column: 5; } } .reviews-cols__label { margin: 0 0 .8125rem; font-size: 1rem; font-weight: 400; line-height: 1.25; color: var(--c-accent); } .reviews--stack { grid-template-columns: 1fr; gap: .5rem; margin: 0; } .reviews-cols__col--video .reviews__item { padding: 0; overflow: hidden; } .reviews-cols__col--video .reviews__video { margin: 0; border-radius: 1.25rem; } .reviews-cols__col--video .reviews__poster { height: 27.0625rem; } /* 433 */ .reviews-cols__col--video .reviews__foot { padding: .75rem 1rem; } /* Ime i ocjena stoje u istom redu, ocjena desno — ocjena je u PDF-u broj s jednom decimalom (20 px), ne niz zvjezdica. */ .reviews__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } /* Mjere iz `05_Testimonianze.pdf`: zvjezdica 15,67 px, korak 22 (dakle razmak 6,3), broj 10,4 px iza zadnje zvjezdice, sve poravnato po sredini. */ .reviews__rating { display: flex; align-items: center; gap: .65rem; margin: 0; } .reviews__stars { display: inline-flex; align-items: center; gap: .39375rem; } .reviews__star { width: .979375rem; height: .974375rem; fill: currentColor; flex: none; } .reviews__star--prazna { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .55; } .reviews__rating-num { font-size: 1.25rem; font-weight: var(--fw-light); } /* ---------- tim ---------- */ .team { display: grid; gap: 2rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } .team--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .team--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .team__group + .team__group { margin-top: 3rem; } .team__area { margin: 0 0 .5rem; /* Regular na SVIM širinama (FT-K4-N01). Dizajn (05_Clinica Dott Darko e team) ima natpise grupa samo u Regular 400; mobilnog dizajna stranice nema, pa telefon smanjuje samo veličinu (22 -> 16), ne mijenja stil. Bold je ostajao ovdje dok je 400 dolazio samo pod @media ≥1024 u `tipografija.css`, pa je na telefonu natpis izgledao kao drugi stil. */ /* `--team-area-fw` / `--team-area-fg`: polja sekcije „Peso/Colore dei titoli delle aree"; postoje samo kad su popunjena. */ font-size: 1rem; font-weight: var(--team-area-fw, var(--fw-regular)); /* Tracking je nula, iz mjere — vidi `.hero__eyebrow`. Velicinu ovom natpisu daje `tipografija.css` (22 px pod @media), a tracking je ostajao odavde, pa je na 22 px ispadao 0,44 px po slovu. */ text-transform: uppercase; letter-spacing: 0; color: var(--team-area-fg, var(--c-accent)); } /* Radijus 13, ne 20. Profil ugla u oba PDF-a (00_Homepage i 05_Clinica Dott Darko e team, fotografije tima), prvi neprozirni piksel po redovima od vrha: 9 7 5 4 3 2 2 1 1 0 — tacno krug r = 13. Sa 20 px je sajt davao 16 14 11 9 8 7 6 5 …, vidno okruglije uglove. */ .team__img { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: .8125rem; object-fit: cover; } /* Mjere iz 00_Homepage.pdf: natpis 16 px Light na y 5660,5, ime 22 px Regular na y 5685,5 — dakle natpis IZNAD imena, razmak 25 px. */ .team__role { margin: .75rem 0 0; font-size: 1rem; font-weight: var(--fw-light); line-height: 1.25; } .team__name { margin: .3125rem 0 0; font-size: 1.375rem; font-weight: var(--team-name-fw, 400); line-height: 1.2727; } /* polje „Peso del nome" */ /* ---------- usluge ---------- */ /* Mjere iz 00_Homepage.pdf: plocica 626 x 312,7 na x 113 i x 763 (razmak 24), korak reda 425. Naslov je otisnut PREKO fotografije, 240,6 px od vrha plocice i 28 px od lijevog ruba, pa je apsolutno pozicioniran. Red natpisa pocinje 11 px ispod fotografije i visok je 67 px. */ /* Razmak od zaglavlja do plocica: u dizajnu je drugi red uvoda (dno okvira retka y 2553,3) 54,3 px iznad plocica (2607,6). Sa 32 px su plocice bile na mjestu samo zato sto je cijela glava sekcije stajala 30 px nize nego u dizajnu (`spacing_top` 94,1 umjesto 64,7). */ /* ISPRAVKA (NKP-05, krug 4): fotografije su u PDF-u na y 2607,29 (okvir slike iz PDF-a, ne rastera). Glava sekcije je na sajtu tačna (font-okvir naslova 2501,2 / PDF 2501,1, uvoda 2510,2 / 2510,3), a sa 54,3 su sve pločice bile 1,1 px niže od PDF-a. Mjereno od dna okvira uvoda na sajtu (2554,1) do fotografije je 53,2. Razmak redova je 34,8, a ne 34,2: od dna trake do sljedeće fotografije je u PDF-u 34,6 (2998 -> 3032,6) odnosno 35,4 (3422 -> 3457,4); s 34,2 su treći red i dno sekcije bili 1-2 px visoko čim su trake došle na svoje mjesto (`links_gap`). */ .services { display: grid; grid-template-columns: repeat(2, 39.125rem); gap: 2.175rem 1.5rem; margin: 3.325rem 0 0; padding: 0; list-style: none; } /* 53,2 */ .sec--services-grid .sec__head-intro { line-height: 1.5714; } /* 22 na 14 */ .services__item { position: relative; min-width: 0; } .services__img { display: block; width: 100%; height: 19.54375rem; border-radius: 1.25rem; object-fit: cover; } .services__title { position: absolute; left: 1.75rem; top: 15.1625rem; /* 242,6 */ margin: 0; font-size: 1.375rem; font-weight: 400; line-height: 1.27; /* Naslov stoji PREKO FOTOGRAFIJE, pa ne prati temu sekcije: „Tema: Chiara" ga je bojila u crno preko slike. Jedna klasa, pa boja iz uređivača (`.c-accent.c-accent` …) i dalje pobjeđuje. */ color: var(--c-white); } /* M04 (Pragma, 30. 9. 2026, dopuna): fotografija pločice je link (`services_grid.php`, polje „Link della foto", prazno = prvi natpis trake). Link je blok oko fotografije, pa su mjere i položaj slike isti kao prije. Naslov i krug sa strelicom (na telefonu, `.services__media::after`) leže PREKO fotografije; klik na njih prolazi do nje, pa je klikabilna cijela fotografija s krugom. Na hover fotografija blago posvijetli. */ .services__foto-link { display: block; color: inherit; } .services__item--foto-link .services__title, .services__item--foto-link .services__media::after { pointer-events: none; } .services__foto-link .services__img { transition: filter .2s ease; } @media (hover: hover) { .services__foto-link:hover .services__img { filter: brightness(1.08); } } .services__foto-link:focus-visible .services__img { filter: brightness(1.08); } /* Pločica BEZ fotografije nema tamnu podlogu ispod naslova, pa naslov tada prati temu. `:where` drži jednu klasu specifičnosti (boja iz uređivača i dalje pobjeđuje). */ :where(.services__item:not(:has(img))) .services__title { color: inherit; } /* Pločica BEZ fotografije: naslov se vraća u tok, iznad trake. `top` (242,6 / 234,1 / 228,5) je mjeren od vrha fotografije; bez nje `.services__media` nema visinu, pa je naslov visio ispod trake, u prostoru za dugme („Servizio 4" preko „Prenota ora" na `qa-layouts`, PR6-N02). Isto pravilo je na telefonu u `layout-a.css`; ovdje vrijedi na svim širinama. Pločice s fotografijom (sve stranice iz dizajna) se ne mijenjaju. */ .services__item:not(:has(img)) .services__title { position: static; margin: 1rem 0 .75rem; } /* Naslov plocice nije na istoj visini u sva tri reda: od vrha plocice je u dizajnu 240,3 / 232,6 / 226,4 px (y 2847,9 / 3264,6 / 3683,4 na plocicama od 2607,6 / 3032 / 3457). Plocice su iste visine, pa je to polozaj naslova, a ne visina plocice. ISPRAVKA (NKP-05, krug 4): `top` je vrh okvira RETKA (prored 28), a gornje mjere su vrh FONT-okvira iz PDF-a (30,8). Chrome crta font-okvir 2 px iznad vrha retka, pa je tinta naslova bila 1-2 px visoko. Od vrha fotografije (PDF 2607,29 / 3032,5 / 3457,4) do font-okvira je 240,6 / 232,1 / 226,0, pa je vrh retka 242,6 / 234,1 / 228,5 — provjereno tintom, sva tri reda isto kao PDF. */ @media (min-width: 1024px) { .services__item:nth-child(3) .services__title, .services__item:nth-child(4) .services__title { top: 14.63125rem; } /* 234,1 */ .services__item:nth-child(n+5) .services__title { top: 14.28125rem; } /* 228,5 */ /* Fotografija i naslov s mjerom iz PDF-a (polja stavke `img_dx`, `img_w`, `title_x`, HP-34). Dizajn ih ne slaže po mreži: „Riabilitazione dentale" je 640 px široka na x 116 (do 755), pa je od „Estetica dentale" (761) dijeli 5 px, a ne 22; „Ortodonzia invisibile" stoji na 763. Naslovi su od ruba stupca 28,5 / 26,5 / 21,5 / 25 / 25 / 27 px. Vrijednosti su px dizajna, množe se s 1/16 rem, pa prate umanjenje ispod 1512. Šira fotografija izlazi preko svog stupca u razmak mreže — tako je nacrtana; stupci i trake ostaju gdje jesu. */ .services__item[style*="--foto-w"] .services__img { width: calc(var(--foto-w) * .0625rem); max-width: none; } .services__item[style*="--foto-dx"] .services__img { margin-left: calc(var(--foto-dx) * .0625rem); } .services__item[style*="--naslov-x"] .services__title { left: calc(var(--naslov-x) * .0625rem); } /* Razmak fotografija -> traka po stavci (polje `links_gap`, NKP-05): traka je u PDF-u 323,7 px ispod vrha fotografije u prvom redu, a 322,5 i 322,6 u drugom i trećem, pa je razmak ondje 9,8 i 9,9 umjesto 11. */ .services__item[style*="--traka-gap"] .services__links { margin-top: var(--traka-gap); } } /* Red natpisa je u dizajnu JEDNA ZAOBLJENA PLOHA s vodoravnim gradijentom, a ne niz pilula s obrubom. Mjereno po pikselima iz 00_Homepage.pdf, na sve tri trake: y 2931..2997, 3355..3421 i 3780..3846 — visina 67, korak 424. Gradijent ide od #0c0d0e do #093443 i POCINJE IZNOVA u svakom stupcu; iste dvije boje je Tok 3 nezavisno izmjerio iz Mobile HP.pdf, pa je ovo jedan token dizajna, a ne dvije slicne vrijednosti. Polumjer je 10 px: na 2 px od dna se ploha suzi za 4 px sa svake strane, a to daje r = 10. Sirina plohe je sirina kartice. Dizajn je crta 5 px desno od fotografije i same tri trake se medusobno razilaze za 4 px (116..750, 116..750, 120..745), dakle rijec je o rucnom smjestaju unutar tolerancije, ne o mjeri. Natpisi su centrirani. Dizajn ih po x ne slaze ni po jednom pravilu — razmaci su po trakama 66/84, 27/48/48 i 68/69/73. Prijelom retka je u dizajnu RUCNI („Estrazione / dentale", „Igiene / dentale") i sada je u sadrzaju; jednaki stupci ga nisu mogli dati (vidi `li` ispod). `min-width: 0` i `overflow-wrap` nisu ukras: bez njih udio u redu ne moze pasti ispod najduze nelomljive rijeci („Apicectomia"), pa natpis izlazi izvan plohe cim prijevod bude duzi od talijanskog. */ .services__links { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; margin: .6875rem 0 0; min-height: 4.1875rem; padding: 0; list-style: none; border-radius: .625rem; /* „Sfondo delle schede" sekcije (`--sec-card-bg`) ili preljev iz dizajna. */ background: var(--sec-card-bg, linear-gradient(90deg, #0c0d0e, #093443)); /* Traka je tamna u svakoj temi: „Tema: Chiara" je natpise bojila u crno preko tamne trake. Natpisi (`.chip`) boju nasljeđuju odavde. */ color: var(--c-white); } /* Udio u redu raste IZ SIRINE NATPISA, ne iz nule. S jednakim stupcima natpis „Innesto osseo e rialzo / del seno mascellare" (174 px) nije stao u cetvrtinu trake (157) i lomio se u cetiri reda umjesto dva, a traka je rasla i gurala cijeli red plocica. Rucni prelomi natpisa su u sadrzaju. Polozaj natpisa u PDF-u nema pravila (razmaci 27/48/48 u jednoj traci, 132 u drugoj); rast iz sirine natpisa ga pogada bolje od jednakih stupaca na cetiri od sest traka i broj redaka na svih sedamnaest natpisa. */ .services__links > li { display: flex; flex: 1 1 auto; min-width: 0; } /* Traka s POLOŽAJIMA IZ PDF-a (polje `x` svakog natpisa): svi natpisi stoje u istoj ćeliji mreže, a sredina natpisa je na `x` od lijevog ruba trake. Postotak je od širine trake (626 u dizajnu), pa položaj prati traku i između 1024 i 1512 px. Pravilo po širini natpisa je griješilo do 62 px („Ponti dentali" 475 umjesto 413), jednaki stupci do 56. Na telefonu (Mobile HP ima druge natpise i raspored) vrijedi pravilo iznad. */ @media (min-width: 1024px) { .services__links--x { display: grid; grid-template-columns: 100%; } .services__links--x > li { grid-area: 1 / 1; justify-self: start; width: max-content; margin-left: calc(var(--x) / 626 * 100%); /* `--y`: uspravni pomak natpisa od sredine trake (polje `y`, N-08). */ translate: -50% calc(var(--y, 0) * .0625rem); } /* Traka s vlastitim položajem i širinom (polja stavke `links_dx`, `links_w`, N-07). Natpisi su izmjereni od lijevog ruba FOTOGRAFIJE, pa im se pomak trake oduzima — ostaju na istom mjestu i kad se traka pomakne ili raširi. Sve u 1/16 rem, pa prati umanjenje ispod 1512. */ .services__links--mjera { width: calc(var(--traka-w) * .0625rem); margin-left: calc(var(--traka-dx, 0) * .0625rem); } .services__links--mjera.services__links--x > li { margin-left: calc((var(--x) - var(--traka-dx, 0)) * .0625rem); } } .chip { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center; padding: 0 .5rem; border: 0; font-size: 1rem; line-height: 1.25; text-align: center; text-decoration: none; color: inherit; overflow-wrap: anywhere; } .chip:hover { color: var(--c-accent); } /* Omotač natpisa s oznakama iz uređivača (services_grid.php): jedan flex-član, pa razmak između obojenog i običnog dijela ostaje. */ .chip__tekst { min-width: 0; } /* ---------- kartice pitanja ---------- */ /* Mjere iz 00_Homepage.pdf: plocica 314 x 151 puna plava (#009dc8), tri u redu s razmakom 10 px, dva reda s razmakom 13 px. Mreza pocinje na x 437, a naslov sekcije stoji LIJEVO od nje, ne iznad. */ .sec--question-cards > .sec__inner { display: grid; grid-template-columns: 1fr 60.125rem; align-items: start; } /* Naslov „Ogni caso è diverso" stoji na x 108, 5 px LIJEVO od ruba kontejnera (113), a mreza ploha zavrsava na 1399 kao i kontejner. Mreza sekcije zato ide od 108 do 1399: kontejner 1296 (108..1404) s desnim razmakom 5. Ispod 1341 px kontejner ima vlastitu bocnu uvlaku. */ @media (min-width: 1341px) { .sec--question-cards > .sec__inner { max-width: 81rem; padding-right: .3125rem; } /* 1296 | 5 */ } .qcards { display: grid; grid-template-columns: repeat(3, 19.625rem); gap: .8125rem .625rem; margin: 0; padding: 0; list-style: none; } /* Uvlake su izvedene iz PLOHE, a ne iz razmaka izmedu blokova teksta. `00_Homepage.pdf`, kartica x 437..751 y 877..1028 (314 x 151): pitanje 25 px ExtraLight, dva retka, vrhovi font-okvira 909,75 i 935,75 natpis 14 px Light, dva retka, vrhovi 969,80 i 991,30 Korak je 26 odnosno 18, dakle prored 1,04 i 1,2857 — oba tema vec ima. Ali okvir RETKA je uzi od font-okvira, pa se uvlaka racuna od njega: vrh okvira retka je 909,75 + (35 - 26) / 2 = 914,25, a to je 37,25 px od vrha plohe. Dolje isto: zadnji redak zavrsava na 1006,6, ploha na 1028, dakle 21,4. Izmedu pitanja i natpisa ostaje 4,35, ne 8. Sa 32,8 gore i dolje i 8 izmedu, kartica je bila 161 px umjesto 151 — na svim karticama s pitanjem, i to je bio najveci nalaz mjere ploha poslije dugmadi. Zbir novih vrijednosti daje tacno 151: 37,25 + 52 + 4,35 + 36 + 21,4. */ /* Oblik plohe: lijeva dva ugla su u dizajnu OSTRA, desna zaobljena 14 px (zum 8x na 00_Homepage i na Mobile HP, svih sest ploha). Bilo je 10 px na sva cetiri ugla. */ /* Gornja uvlaka 37,75, a ne 37,25 iz računa gore (NKP-06, krug 4): ploha je sada tačno na y 877 (bila je 877,5, a preglednik je plohu crtao od reda 878), a Chrome crta font-okvir pitanja 0,45 px iznad onoga što daje račun s poluprored, pa je pitanje s 37,25 stajalo na 909,3 umjesto 909,75. Donja uvlaka je za isto manja (20,9), pa ploha ostaje 151. */ /* Boja plohe: kartica (`bg` stavke, `--qcard-bg`), pa „Sfondo delle schede" sekcije (`--sec-card-bg`), pa plava iz dizajna. Varijable postoje samo kad je polje popunjeno. */ .qcards__item { padding: 2.359375rem 2.5rem 1.30625rem; min-height: 9.4375rem; border-radius: 0 .875rem .875rem 0; background: var(--qcard-bg, var(--sec-card-bg, var(--c-accent))); color: var(--c-white); } /* Drugi red ploha ima tekst 12 px VISE nego prvi: pitanje je 21 px ispod vrha plohe (y 1061,8 na plohi od 1041), u prvom redu 32,75 (909,75 na 877). Isti tekst, iste plohe — dizajn ga je u donjem redu podigao. */ .qcards__item:nth-child(n+4) { padding-top: 1.609375rem; } /* 37,75 - 12 */ .qcards__q { margin: 0 0 .271875rem; font-size: 1.5625rem; font-weight: 200; line-height: 1.04; } .qcards__label { margin: 0; font-size: .875rem; font-weight: var(--fw-light); line-height: 1.28; } .qcards__q a { color: inherit; text-decoration: none; } /* M04 (Pragma, 30. 9. 2026, slika 02): klikabilna je CIJELA kartica, ne samo tekst pitanja. Link pitanja se razvuče preko cijele plohe (`::after`, `inset: 0`; kartica je `position: relative` na svim širinama, layout-a.css), pa klik na natpis, znak ili prazan dio plohe vodi na isto mjesto. Na hover i pri fokusu tipkovnicom ploha dobija svijetlu boju, tekst i krug plavu, a strelica bijela ide 3 px desno — kao na V1 (pitanja_kartice.css:63–70). Boje su u „Colori del sito" (`--qcard-hover-bg`, `--qcard-hover-fg`). Klasu `qcards__item--link` predložak daje samo kartici s linkom; kartica bez linka ostaje kakva jest. Podvlaka pitanja na hover više ne treba. */ .qcards__item--link { cursor: pointer; transition: background-color .2s ease, color .2s ease; } .qcards__item--link .qcards__q a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .qcards__item--link .qcards__arrow { transition: transform .2s ease, background-color .2s ease; } @media (hover: hover) { .qcards__item--link:hover { background: var(--qcard-hover-bg); color: var(--qcard-hover-fg); } .qcards__item--link:hover .qcards__arrow:not(.qcards__arrow--img) { background-color: var(--qcard-hover-fg); 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='%23ffffff' stroke-width='1'/%3E%3C/svg%3E"); transform: translateX(3px); } } /* Tipkovnica: obrub oko cijele kartice (ne oko teksta pitanja) i isti izgled kao hover. Preglednik bez `:has()` zadržava obrub oko teksta pitanja. */ @supports selector(:has(*)) { .qcards__item--link .qcards__q a:focus-visible { outline: none; } .qcards__item--link:has(a:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; background: var(--qcard-hover-bg); color: var(--qcard-hover-fg); } .qcards__item--link:has(a:focus-visible) .qcards__arrow:not(.qcards__arrow--img) { background-color: var(--qcard-hover-fg); 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='%23ffffff' stroke-width='1'/%3E%3C/svg%3E"); transform: translateX(3px); } } /* Ručni položaj teksta po kartici (NK-06). U 00_Homepage tekst nije na istom mjestu u svih šest ploha: pitanje je od lijevog ruba plohe +42,3 / +36,3 / +42 / +46,5 / +41,3 / +39 (ne 40), natpis još 0-3,7 px desno od pitanja, u kartici „La dentiera" je pitanje 4 px niže, a razmak pitanje -> natpis je 0,2-3,6 px veći nego u prvoj kartici, a znak pete kartice je 4 px desno. Vrijednosti su u stavkama (--q-dx/--q-dy/--q-ldx/--q-ldy/--q-adx, rem). Vodoravno se pomjera cijeli stupac teksta (lijeva i desna uvlaka zajedno, pa širina i prelomi ostaju isti); okomito se dodati razmak oduzima od donje uvlake, pa ploha ostaje 151 px. Samo desktop: na telefonu ploha ima svoje uvlake. */ @media (min-width: 1024px) { .qcards__item[style] { padding-left: calc(2.5rem + var(--q-dx, 0rem)); padding-right: calc(2.5rem - var(--q-dx, 0rem)); padding-bottom: max(0rem, calc(1.30625rem - var(--q-dy, 0rem) - var(--q-ldy, 0rem))); } /* Okomiti pomak natpisa ide u DONJU marginu pitanja: vlastita gornja margina natpisa bi se stopila s njom (4,35) i pomak do 4,35 px ne bi imao nikakav učinak. */ .qcards__item[style] > .qcards__q { margin-top: var(--q-dy, 0rem); margin-bottom: calc(.271875rem + var(--q-ldy, 0rem)); } .qcards__item[style] > .qcards__label { margin-left: var(--q-ldx, 0rem); } /* Znak kartice „Hai vecchi lavori" je u PDF-u 4 px desno od ostalih (x 1033, a ne 17 px od desnog ruba plohe). */ .qcards__item[style] > .qcards__arrow { right: calc(1.0625rem - var(--q-adx, 0rem)); } /* Naslov „Ogni caso è diverso: raccontaci il tuo" ne počinje u visini vrha ploha (NKP-06): font-okvir prvog retka je u 00_Homepage na y 871,1, 5,9 px ispod vrha ploha (877), a bez uvlake je bio na 868 — tinta naslova 881 umjesto 883, a relativno prema plohama 3 px visoko. Samo desktop: na telefonu je naslov iznad ploha, s vlastitim mjerama. */ .sec--question-cards > .sec__inner > .sec__title { padding-top: .1875rem; } /* 3 */ } /* ---------- kartice rjesenja ---------- */ /* Mjere iz 00_Homepage.pdf: kartica 422 x 397 na x 113 / 545 / 977 (razmak 10), unutra fotografija 371 x 275, naslov 19,6 px ispod nje. Traka dugmeta je 422 x 42 i stoji 17 px ISPOD kartice, pune sirine — zato je kartica zaseban element, a traka njen susjed. `--scards-mt` je razmak od naslova (ili uvoda) do kartica; dolazi iz polja `cards_gap` sekcije, jer ga dizajn na svakoj stranici ima drukciji (Riabilitazione 38, Pazienti italiani 74 i 41, Prima visita 33, Denti fissi 41). Kad je upisan, naslov ne nosi jos i svoju marginu od 20 px. */ /* Na ≤1023 razmak naslov -> kartice je najviše 32 px: mobilno.css (M15). */ .scards { display: grid; gap: .625rem; margin: var(--scards-mt, 2rem) 0 0; padding: 0; list-style: none; } .scards-wrap--gap > .sec__title { margin-bottom: 0; } .scards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scards--3 { grid-template-columns: repeat(3, 26.375rem); } /* Dva stupca u UZEM kontejneru nisu dvije polovine s razmakom od 10 px. Izmjereno na cetiri stranice: 1070 Denti fissi, 01_Clinica, Estetica (sek. 6): stupci na x 221 i 756 — 530 + 5 + 530. Na sajtu je drugi stupac stajao na 761. 880 Prima visita x 324 / 766, Pazienti italiani x 329 / 771: korak 442. Tekst prvog stupca je u dizajnu 414 px sirok (Prima visita) odnosno 425 (Pazienti), a drugi se lomi iza „la" u „con le date, la / durata" (387 + „durata" ne stane) — stupac 425 i razmak 17, centrirano, pogada oba preloma i oba x na 1,5 odnosno 6,5 px. Sa 435 + 10 od lijevog ruba kontejnera stupci su bili na 316 i 761, a drugi stupac Prima visita se lomio u dva reda umjesto tri. */ @media (min-width: 1024px) { .sec__inner--1070 > .scards--2 { grid-template-columns: repeat(2, 33.125rem); column-gap: .3125rem; } .sec__inner--880 > .scards--2 { grid-template-columns: repeat(2, 26.5625rem); column-gap: 1.0625rem; justify-content: center; } } /* Dvije kartice S PODLOGOM (Denti fissi i 01_Clinica, ista komponenta u oba PDF-a): prva 530 na x 221, druga 545 na x 756 — do x 1301. Traka dugmeta druge kartice ipak ide samo do x 1290 (535). Tekst prve kartice je uvucen 17 px (x 238), druge 27 px (x 783), i u oba PDF-a isto. */ @media (min-width: 1024px) { .sec__inner--1070 > .scards--2:not(.scards--plain) { grid-template-columns: 33.125rem 34.0625rem; } .sec__inner--1070 > .scards--2:not(.scards--plain) > .scards__item:nth-child(1) { --scards-pl: 1.0625rem; --scards-pr: .625rem; } .sec__inner--1070 > .scards--2:not(.scards--plain) > .scards__item:nth-child(2) { --scards-pl: 1.6875rem; --scards-pr: .625rem; } .sec__inner--1070 > .scards--2:not(.scards--plain) > .scards__item:nth-child(2) > .scards__cta { margin-right: .625rem; } } .scards__item { display: flex; flex-direction: column; } /* Ploha kartice nije jednobojna: u sva tri PDF-a (00_Homepage, Denti fissi, 01_Clinica) ide okomiti preljev od (31,29,28) na vrhu do (13,13,13) pri dnu, pa se dno kartice stapa s podlogom stranice. Izmjereno po pikselima rastera kartice iz PDF-a (slika 422 x 397 i 530 x 397): y 10 (30,28,27), y 200 (22,21,20), y 380 (13,13,13). Zaobljenje je 9 px — prvi puni red plohe je 8-9 px ispod ugla — a ne 20 iz zajednickog tokena. Unutrasnji bocni razmak nosi TIJELO, ne kartica: fotografija je CENTRIRANA u kartici u svojoj prirodnoj sirini (371 na naslovnici, 478 i 494 na Denti fissi i Clinici — uvijek visine 275), pa uvlaka teksta i uvlaka fotografije nisu ista mjera. S istim razmakom za oboje fotografija je bila rastegnuta na sirinu kartice i obrezana. */ .scards__card { display: flex; flex-direction: column; flex: 1; min-height: 24.8125rem; padding: 1.25rem 0; border-radius: .5625rem; /* „Sfondo delle schede" sekcije (`--sec-card-bg`) ili preljev iz dizajna. */ background: var(--sec-card-bg, linear-gradient(180deg, #1f1d1c 0%, #0c0c0c 100%)); overflow: hidden; } /* PLOHA JE VISOKA 397, I KAD JE SADRŽAJ DUŽI (KC-01). U sva tri PDF-a ploha je raster fiksne visine (00_Homepage 422 x 397, Denti fissi i 01_Clinica 530 / 545 x 397). Na 01_Clinica sadržaj kartice ide dalje od nje: ploha pokriva fotografiju, naslov i podebljani uvod i završava zaobljenim uglovima odmah ispod uvoda (y 1031-1425), a obični tekst („Una struttura personalizzata…", „Posizione degli impianti…") stoji ispod nje, na podlozi sekcije. Dok je preljev bio pozadina cijele kartice, ploha se protezala do dugmeta (1030-1506, 81 px više). Zato plohu crta pseudo-element visine 397: gdje sadržaj stane u 397 (naslovnica, Denti fissi), kartica je ionako visoka tačno 397 (`min-height`) i ništa se ne mijenja. Samo desktop — na telefonu ploha raste sa sadržajem (`layout-a.css`, Mobile HP „All on 4" 451). */ @media (min-width: 1024px) { .scards:not(.scards--plain) .scards__card { position: relative; z-index: 0; background: none; } .scards:not(.scards--plain) .scards__card::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 24.8125rem; /* 397 */ border-radius: .5625rem; /* 9 */ background: var(--sec-card-bg, linear-gradient(180deg, #1f1d1c 0%, #0c0c0c 100%)); } } /* Dio stranica ima kartice bez pozadine i bez fotografije, samo ikona, naslov, tekst i dugme. */ .scards--plain .scards__card { background: none; border-radius: 0; padding: 0; } /* Bez plohe nema ni zaobljenja koje treba rezati. `overflow: hidden` kartice s plohom je ovdje odsijecao znak pomaknut lijevo od teksta (`icon_x`): avionu na Pazienti italiani je falio rep, autu na Prima visita 4 px. */ .scards--plain .scards__card { overflow: visible; } /* Bez podloge je natpis stavke odmah iznad teksta, bez razmaka: okviri redaka u dizajnu idu korakom 22-22,7 (Pazienti italiani 1725,4 -> 1747,4, Prima visita 5408,4 -> 5431,1, Estetica 1415,4 -> 1438,1). Razmak od 3 px iz kartice s podlogom je tekst, pilulu i dno sekcije spustao 2-3 px. */ .scards--plain .scards__body { padding: 0; gap: 0; } /* ISPRAVKA (NKP-09, krug 4): korak 22 vrijedi samo između dva retka od 16 px (Pazienti italiani: natpis 1725,2 -> „IMPIANTI NO BONE" 1747,2). Iza retka od 16 px slijedi redak od 14 px uvijek za 24,1 px po font-okviru (Riabilitazione 1430,2 -> 1454,3, Estetica 1415,2 -> 1439,3 i 2123,2 -> 2147,3, Pazienti italiani 1747,2 -> 1771,3 i 5210,2 -> 5234,3, Prima visita 5408,2 -> 5432,3): osnovne linije idu korakom 22,0. S oba proreda od 22 px je korak osnovnih linija u pregledniku 21,3 (16 px: 16,6 od vrha retka, 14 px: 15,9), pa je tinta teksta ispod natpisa na svih šest mjesta stajala tačno 1 px previsoko prema natpisu (xc: natpis 0, tekst −1). Računski fali 0,7 px, ali preglednik crta slova na ZAOKRUŽENOJ osnovnoj liniji: s 0,7 se tinta pomjerila samo gdje razlomak pređe pola (Pazienti italiani, vrh retka 1769,73 -> 1770,42: tinta ostala gdje je bila), a s 1 px se pomjeri na svih šest i poklopi s PDF-om. Samo desktop — mobilnog dizajna ovih kartica nema. */ @media (min-width: 1024px) { .scards--plain .scards__title.fs-16 + .scards__text:not(:has(> p:first-child > .fs-16:only-child)), .scards--plain .scards__text > p:has(> .fs-16:only-child) + p { margin-top: .0625rem; } /* 1 */ } /* Bez podloge, ALI S FOTOGRAFIJOM (Odontoiatria digitale, sek. 8 — jedina takva sekcija). Mjere iz PDF-a: fotografije 633 x 276,3 na x 118 i 638 x 276,5 na x 761, obje DESNIM rubom na rubu stupca (751 i 1399) i bez zaobljenja (uglovi ostri na zumu 8x); fotografija -> okvir naslova 22 px (2572,8 -> 2594,8), naslov -> tekst 19 px (2654,8 -> 2673,8). Sa zajednickim pravilima je fotografija bila centrirana (x 117), 275 px visoka i zaobljena 9 px, a naslov je dodirivao fotografiju. */ .scards--plain .scards__media { margin-inline: auto 0; } .scards--plain .scards__img { height: 17.26875rem; border-radius: 0; } /* 276,3 */ /* `:has(img)`: sekcija s ukljucenim mjestom za fotografiju a bez slike (Riabilitazione dentale) crta prazan `.scards__media` — ondje razmaka nema. */ .scards--plain .scards__media:has(img) + .scards__body { padding-top: 1.375rem; gap: 1.1875rem; } /* 22 | 19 */ .scards__title { color: inherit; } /* Kartice BEZ podloge na svijetloj sekciji („Tema: Chiara"): tekst je bio uvijek bijel (`.sec .scards__item`), pa bijel na bijelom i nevidljiv. Bez podloge tekst prati temu; kartice s podlogom i tamna tema se ne mijenjaju, a klasa boje u tekstu (c-white, c-accent…) i dalje ima prednost. */ .sec--light .scards--plain .scards__item { color: var(--c-bg); } .scards__media { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; } /* Polozaj iz PDF-a (polje `image_x`), samo na sirokom ekranu. */ @media (min-width: 1024px) { .scards__media--x { margin-left: var(--scards-img-x); margin-right: auto; } } .scards__img { display: block; width: auto; max-width: 100%; height: 17.1875rem; /* 275 */ border-radius: .5625rem; /* 9 */ object-fit: cover; } .scards__body { display: flex; flex-direction: column; flex: 1; gap: .5rem; padding: 1.25rem var(--scards-pr, 1.6875rem) 0 var(--scards-pl, 1.6875rem); /* 20 | 27 */ } .scards__title { margin: 0; font-size: 1.375rem; font-weight: 400; line-height: 1.27; } .scards__text { font-size: .875rem; line-height: 1.5714; } /* Prelom samo za telefon (`
`, MHP-22). Na telefonu se gasi desktopski `.br-d` (layout-a.css), ovdje obrnuto. */ @media (min-width: 1024px) { .scards__text .br-m { display: none; } } /* Isto u naslovu foto heroja (M3, `NOB_Sito web_DEF.pdf`, str. 1 i 8): na telefonu `mobilno.css` prikazuje `
` naslova i gasi `.br-d`, a ovdje se na desktopu gasi `.br-m`. Prije M3 takav prelom nema nijedan naslov. */ @media (min-width: 1024px) { .hero--foto .hero__title br.br-m { display: none; } } /* Podebljani uvod kartice je u dizajnu Poppins Bold 700 (Riabilitazione, Estetica, 01_Clinica). Tijelo je Light 300, a `strong` bez ovoga dobija „bolder" od 300, dakle 400 — uvod se nije razlikovao od teksta ispod. */ .scards__text strong, .scards__text b { font-weight: 700; } /* Natpis preko fotografije (00_Homepage, Mobile HP): „All on 4/6" Poppins Black 62 px bijelo, ispod desno „Pro Arch" Black 32 px #0b353c. Okvir slova u PDF-u je 1,4 visine slova, pa je i prored 1,4: tada je vrh okvira retka tacno vrh okvira slova iz PDF-a i polozaj se prepisuje bez preracunavanja. Tekst i boje su polja kartice. */ .scards__natpis { position: absolute; left: var(--scards-natpis-x, 1rem); top: var(--scards-natpis-y, 10.5rem); margin: 0; font-weight: var(--scards-natpis-fw, 900); /* „Peso della scritta sulla foto" */ line-height: 1.4; white-space: nowrap; pointer-events: none; } .scards__natpis-1 { display: block; font-size: 3.875rem; color: var(--scards-natpis-boja-1, #ffffff); } /* 62 */ .scards__natpis-2 { position: absolute; left: var(--scards-natpis-dx, 11.4375rem); top: var(--scards-natpis-dy, 2.84375rem); font-size: 2rem; /* 32 */ color: var(--scards-natpis-boja-2, #0b353c); } /* Znak umjesto fotografije stoji u kutiji visine najviseg znaka u redu, uz njeno dno (vrijednost racuna predlozak iz `icon_h`), a naslov je 23,4 px ispod kutije: Prima visita, znakovi do y 5385, naslov (vrh okvira retka) 5408,4. */ .scards__icon { min-height: var(--scards-ikona-kutija, 0); } .scards--plain .scards__icon + .scards__body { padding-top: var(--scards-icon-gap, 1.4625rem); } /* 23,4 */ /* Znakovi poravnati po SREDINI kutije (polje `icon_align`, Pazienti italiani: auto 33 px i avion 57 px imaju sredine na 5169,5 i 5167,5). */ .scards-wrap--ikona-sredina .scards__icon { align-items: center; } /* `align-self` je tu zato sto je roditelj `li.scards__item` uspravan `flex`, pa se PILULA kao njegova stavka rasteze na cijelu sirinu stupca. Nasao Tok 6 mjerom ploha. Razmak iznad dugmeta je 17 px, a `cta_gap` sekcije ga ispravlja: dizajn ga ima 12 na Riabilitazione, 29 na Estetica i Pazienti italiani. */ .scards__cta { margin-top: calc(1.0625rem + var(--sec-cta-gap, 0rem)); align-self: flex-start; } /* TRAKA je pune sirine kartice: 422 na naslovnici, 530 i 535 na Denti fissi i 01_Clinica. `.btn--bar` nosi `max-width: 422` (mjera naslovnice), pa je traka na uzim stranicama ostajala 422 i nije pratila karticu. */ .scards__cta.btn--bar { align-self: stretch; width: auto; max-width: none; } /* Natpis trake pomaknut od sredine (polje stavke `cta_label_dx`): Denti fissi i 01_Clinica −2,75 / +7,3 px, naslovnica +1,45 px u sve tri trake. Unutrašnji razmak s jedne strane od dvostrukog pomaka pomjera centrirani natpis za tačno pomak. Samo desktop (mobilni dizajn ima svoje trake). */ @media (min-width: 1024px) { .scards__item[style*="--scards-bar-natpis-dx"] > .scards__cta.btn--bar { padding-left: max(1rem, 1rem + 2 * var(--scards-bar-natpis-dx)); padding-right: max(1rem, 1rem - 2 * var(--scards-bar-natpis-dx)); } } /* Pilula bez fiksne sirine (Pazienti italiani i Prima visita, „Apri il parcheggio" / „Apri indicazioni" / „Come raggiungerci"): u dizajnu je natpis 16 px od lijevog ruba, a do kruga je 24 px — pilule 208 / 188 / 208 / 228. Sa zajednickih 22 i 12 bile su 6-7 px uze (202 / 181). */ .scards__cta.btn--sm { padding-left: 1rem; gap: 1.5rem; } /* 16 | 24 */ /* Pilula FIKSNE sirine s centriranim natpisom (polje `cta_w`). Natpis je u dizajnu centriran u prostoru lijevo od kruga: sredina natpisa je 8,5-13 px lijevo od sredine pilule na svih pet mjerenih pilula Estetice, sto daju uvlaka 13 i razmak do kruga 7. */ .scards-wrap--cta-w .scards__cta.btn--sm { min-width: var(--scards-cta-w); padding-left: .8125rem; /* 13 */ gap: .4375rem; /* 7 */ } .scards-wrap--cta-w .scards__cta.btn--sm .btn__label { flex: 1 1 auto; text-align: center; } /* Natpis LIJEVO s uvlakom iz polja `cta_pad` (Riabilitazione dentale): „Scopri le corone" i „Scopri i ponti" na 21,5 px od ruba pilule od 185, „Scopri gli impianti" (141 px) na 9 — dugi natpis se primiče rubu, a pilula ostaje 185. To radi razmakničar ispred natpisa: osnova mu je uvlaka umanjena za najmanjih 9 px, a kad natpis ne stane, skuplja se on, ne pilula. Razmak natpis -> krug je 7 (natpisi završavaju 6,4-7 px ispred kruga), zato margina natpisa, a ne `gap`, koji bi razmakao i razmakničar od natpisa. */ /* Samo na sirokom ekranu: na telefonu pilula ima vlastiti razmakničar (`components.css`) i natpis koji se smije lomiti, pa bi uvlaka od 21,5 „Scopri le corone" prelomila u dva reda. */ @media (min-width: 1024px) { .scards-wrap--cta-pad .scards__cta.btn--sm { padding-left: .5625rem; gap: 0; } /* 9 */ .scards-wrap--cta-pad .scards__cta.btn--sm::before { content: ""; flex: 0 1 calc(var(--scards-cta-pad) - .5625rem); } .scards-wrap--cta-pad .scards__cta.btn--sm .btn__label { flex: 1 1 auto; margin-right: .4375rem; text-align: left; } } /* Dijelovi stupca koji u dizajnu NISU na x teksta (polja stavke `icon_x`, `cta_x`, `cta_w`, `cta_pad`). Pazienti italiani sek. 12, drugi stupac: tekst 772, avion 764-824, pilula 761-949 s natpisom na 781 (20 od ruba). Prima visita sek. 13: parking 328 (tekst 323), auto 761 (tekst 765), pilula 766-993 s natpisom na 792 (26 od ruba). `translate` pomjera samo taj dio, a stupac i tekst ostaju gdje jesu — pomak je mjera iz PDF-a za tu stavku, ne naknada za tuđi razmak. Na telefonu je sve u jednom stupcu i ovi pomaci ne vrijede. */ @media (min-width: 1024px) { /* `icon_y` (NKP-03): uspravni pomak znaka od njegovog mjesta u kutiji. */ .scards__item > .scards__card > .scards__icon { translate: var(--scards-ikona-x, 0) var(--scards-ikona-y, 0); } .scards__item > .scards__cta { translate: var(--scards-cta-x, 0) 0; } .scards__item--cta-w > .scards__cta.btn--sm { width: var(--scards-cta-w-stavke); min-width: 0; padding-left: var(--scards-cta-pad-stavke, 1rem); gap: 0; } .scards__item--cta-w > .scards__cta.btn--sm .btn__label { flex: 0 1 auto; text-align: left; } } /* Mreza kartica pomaknuta od osi (polje `cards_dx`, Pazienti italiani sek. 12: stupci na 329 / 771 umjesto centriranih 323 / 765). Razmak s jedne strane od dvostrukog pomaka pomjera centriranu mrezu za tacno pomak; bez polja varijabla ne postoji i pravilo ne vrijedi nista. */ @media (min-width: 1024px) { .scards { padding-left: max(0px, 2 * var(--scards-dx, 0px)); padding-right: max(0px, -2 * var(--scards-dx, 0px)); } } /* Centrirani naslov pomaknut od osi (polje `title_dx`, Denti fissi +35 px): lijevi razmak od dvostrukog pomaka pomjera sredinu retka za tacno pomak. Samo na sirokom ekranu — na telefonu je naslov na sredini. */ @media (min-width: 1024px) { .scards-wrap--title-dx > .sec__title, .scards-wrap--title-dx > .sec__head > .sec__title { padding-left: max(0px, 2 * var(--scards-title-dx)); padding-right: max(0px, -2 * var(--scards-title-dx)); } } /* Cijela glava (naslov i uvod ispod njega) pomaknuta od osi (polje `head_dx`, NK-07): na Prima visita sek. 13 su sredine naslova i uvoda u PDF-u na x 752, 4 px lijevo od osi stranice, dok su kartice ispod na mreži. Isti postupak kao gore — razmak s jedne strane od dvostrukog pomaka — pa naslov i uvod (sirina `head_lead_w`) ostaju iste širine. */ @media (min-width: 1024px) { .scards-wrap--head-dx > .sec__head, .scards-wrap--head-dx > .sec__title { padding-left: max(0px, 2 * var(--scards-head-dx)); padding-right: max(0px, -2 * var(--scards-head-dx)); } } /* Naslov glave niže od uvoda desno (polje `title_dy`, NKP-08). Naslovnica sek. 5: uvod počinje 3,6 px VIŠE od naslova (font-okvir uvoda 1847,3 uz prored 22 daje vrh retka 1846,1; naslova 1841,1 uz prored 36 daje 1849,7), a glava ih je slagala od istog vrha — tinta uvoda je bila 2 px niže, a naslova 1 px više nego u PDF-u. Vrh glave nosi uvod, a naslov se spušta za izmjereni pomak. Samo desktop: na telefonu je uvod ispod naslova. */ @media (min-width: 1024px) { .sec--solution-cards [style*="--scards-title-dy"] > .sec__head > .sec__title { padding-top: var(--scards-title-dy); } } /* Uvod ISPOD centriranog naslova (Riabilitazione, Pazienti italiani x2, Prima visita). Bio je upisan kao drugi odlomak naslova, pa je `h2` od 38 px s proredom 36 nosio i 14-pikselski redak: uvod je bio sirok kao naslov (864-1247 px umjesto 580-623) i bez razmaka ispod naslova — na dvije stranice su se slova dodirivala. Sada je u polju `intro`, a traka zaglavlja se ovdje slaze uspravno i centrirano. Razmak naslov -> uvod je 16,4 px (okvir retka do okvira retka) na tri od cetiri stranice; sirina je `head_lead_w`. Prored uvoda je 22 px (korak redova u PDF-u), ne 22,4. */ .sec--solution-cards.sec--ta-center .sec__head { display: block; } .sec--solution-cards.sec--ta-center .sec__head-intro { max-width: var(--sec-head-lead-w, none); margin: var(--scards-intro-gap, 1.025rem) auto 0; text-align: center; } .sec--solution-cards .sec__head-intro { line-height: 1.5714; } /* 22 na 14 */ /* ---------- hub redovi ---------- */ /* Mjere iz 0_Soluzioni introduzione.pdf: fotografija 746 x 313 na x 113, kartica 530 x 313 na x 869 (razmak 10), obje zaobljene oko 10 px. Naslov reda je otisnut PREKO fotografije dolje lijevo (x 142, dakle 29 od ruba, 46,5 od dna; po redu se može pomjeriti poljem), a kartica nosi samo linkove: kružić 29 px na x 925 i natpis 16 px na x 977. VISINA REDA je 313 i kod kartice s četiri linka. Kartica je ranije rasla sa sadržajem (76 + 4 x 29 + 3 x 35 + 76 = 373 px), a `align-items: stretch` je za njom rastezao i stupac fotografije — naslov, prikovan za dno stupca, je tada visio 14 px ispod fotografije (nalaz SOL-01). Sada su oba stupca visoka tačno 313, a linkovi su centrirani uspravno. KORAK LINKOVA ovisi o broju stavki, kao u dizajnu: četiri stavke korak 53 (razmak 24), dvije i tri korak 69 (40). Gdje je dizajner blok linkova pomjerio od sredine kartice (Soluzioni, red 2: 6 px više), red to nosi poljem `links_up` — donja uvlaka od 2 x pomak diže centrirani blok, a negativan pomak (red 4: 3 px niže) daje gornju uvlaku od 2 x |pomak|. Gdje je korak drukčiji (red 3: 65, red 6: 71), red nosi `links_gap`, a gdje je kružić pomaknut udesno uz natpis na mjestu (red 5: x 932 umjesto 925), `arrow_dx` — kružić dobije lijevu marginu, a razmak do natpisa se smanji za isto, pa natpis ostaje na x 977. PRELJEV kartice je vodoravan (90deg), isti kao u hero kartici: mjereno na x 885 / 1130 / 1385 boja je ista na vrhu, sredini i dnu kartice. */ /* ŠIRINA FOTOGRAFIJE nije ista u svim redovima: na Soluzioni je u redu 2 („Chirurgia orale") 756 x 314 i dopire do same kartice (x 113-868), a u ostalim redovima 746 (do 858, pa 10 px razmaka). Red je nosi poljem `img_w` (varijabla `--hub-img-w`); kartica ostaje 530 px uz desni rub reda, a razmak je ono što preostane od 1286. */ .hub-row { display: grid; grid-template-columns: var(--hub-img-w, 46.625rem) 33.125rem; column-gap: 0; justify-content: space-between; align-items: start; } .hub-row + .hub-row { margin-top: var(--hub-gap, 2.6875rem); } .hub-row__media { position: relative; } .hub-row__img { display: block; width: 100%; height: 19.5625rem; border-radius: .625rem; object-fit: cover; } /* M26 (Modifiche_01): red s mobilnom fotografijom omata u (hub_rows.php); omotač ne smije biti kutija, da ostane u istom rasporedu kao bez njega (kao `.media-text__pic`). Na ≤1023 visinu takve fotografije pusta mobilno.css. */ .hub-row__pic { display: contents; } .hub-row__title { position: absolute; left: var(--hub-title-l, 1.8125rem); bottom: var(--hub-title-b, 2.90625rem); margin: 0; font-size: 1.375rem; font-weight: 400; line-height: 1.2727; } .hub-row__body { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; height: 19.5625rem; /* 313 */ padding: max(0px, -2 * var(--hub-links-up, 0px)) 2rem max(0px, 2 * var(--hub-links-up, 0px)) 3.5rem; border-radius: .625rem; /* Pozadina kartice: „Sfondo delle schede" (tinta unita) ima prednost, inače preljev iz polja sekcije ili, prazno, iz dizajna. */ background: var(--sec-card-bg, linear-gradient(90deg, var(--hub-card-from, #0c0d0d), var(--hub-card-to, #083544))); /* Kartica je tamna i na svijetloj temi sekcije: tekst reda bez stila ne smije pasti na crno (polje `card_fg` bira drugu boju). */ color: var(--card-fg, var(--c-white)); } .hub-row__text { font-size: .875rem; line-height: 1.5714; } /* Tekst iznad linkova ne lijepi se uz prvi link (danas ga nijedan red nema). */ .hub-row__text + .hub-row__links { margin-top: 1.5rem; } .hub-row__links { display: flex; flex-direction: column; gap: var(--hub-links-gap, 2.5rem); margin: 0; padding: 0; list-style: none; } .hub-row__links:has(> li:nth-child(4)) { gap: var(--hub-links-gap, 1.5rem); } /* 24 */ .hub-row__links a { display: flex; align-items: center; gap: calc(1.4375rem - var(--hub-arrow-dx, 0px)); font-size: 1rem; font-weight: var(--fw-light); line-height: 1.25; color: var(--card-fg, var(--c-white)); text-decoration: none; } /* Podvlaka: u dizajnu 1 px, odmah ispod slova (1 px ispod osnovne linije), a tema ju je crtala 4 px niže. */ /* Boja podvlake je u dizajnu siva (190,193,194), ne bijela — i na Soluzioni (natpis 16 px) i na Clinici (26 px): bijela na 74 %. */ .hub-row__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 1px; text-decoration-color: var(--hub-line, rgba(255, 255, 255, .74)); } .hub-row__arrow { flex: 0 0 auto; margin-left: var(--hub-arrow-dx, 0px); width: 1.8125rem; height: 1.8125rem; /* 29 */ border-radius: 999px; background-color: var(--hub-arrow-bg, 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: 0.8125rem 0.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 */ } .hub-row__links a:hover .hub-row__label { color: var(--hub-hover, var(--c-accent)); } /* M04 (Pragma, 30. 9. 2026): uz natpis na hover se boji i KRUG reda (u boji hovera natpisa), strelica postaje bijela i ide 3 px desno — kao na V1 (soluzioni_aree.css:165–167). Do sada se plavio samo natpis, a krug je ostajao bijel. Fokus tipkovnicom isto. */ .hub-row__arrow { transition: background-color .2s ease, transform .2s ease; } @media (hover: hover) { .hub-row__links a:hover .hub-row__arrow { background-color: var(--hub-hover, var(--c-accent)); 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='%23ffffff' stroke-width='1'/%3E%3C/svg%3E"); transform: translateX(3px); } } .hub-row__links a:focus-visible .hub-row__label { color: var(--hub-hover, var(--c-accent)); } .hub-row__links a:focus-visible .hub-row__arrow { background-color: var(--hub-hover, var(--c-accent)); 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='%23ffffff' stroke-width='1'/%3E%3C/svg%3E"); transform: translateX(3px); } /* Naslov reda leži PREKO fotografije: bijel i na svijetloj temi sekcije. Na telefonu pada ispod fotografije, na pozadinu sekcije, pa tamo prati temu (pravilo je samo za širinu na kojoj stoji na fotografiji). */ @media (min-width: 1024px) { .sec .hub-row__media { color: var(--c-white); } } /* ---------- cjenovnik ---------- */ .pricing { margin-top: 2rem; } .pricing__tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; border: 0; } .pricing__radio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .pricing__tab { display: inline-block; padding: .625rem 1.25rem; /* Boje tabova: polja `tab_border`, `tab_bg`, `tab_color` (pricing.php). */ border: 1px solid var(--pr-tab-bd, rgba(11, 10, 10, .18)); border-radius: 999px; font-size: .9375rem; cursor: pointer; } .pricing__radio:checked + .pricing__tab { background: var(--pr-tab-bg, var(--c-accent)); border-color: var(--pr-tab-bg, var(--c-accent)); color: var(--pr-tab-fg, var(--c-white)); } .pricing__radio:focus-visible + .pricing__tab { outline: 2px solid var(--c-accent); outline-offset: 2px; } .pricing__panel { display: none; } /* Mjere iz 03_Prezzi 1.pdf: naziv grupe 24 px Regular BIJEL, naziv reda 16 px Light PLAV verzalom, cijena 25 px ExtraLight bijela na x 967, crta razdjelnica bijela punom sirinom stupca (1070), korak reda 75 px. Tema je boje imala zamijenjene, bez crte i sa sitnom cijenom. */ .pricing__group + .pricing__group { margin-top: 2.9375rem; } /* Prored naziva grupe je 30 px (1,25) na svim širinama: na telefonu se „CHIRURGIA ORALE E RIGENERAZIONE" lomi u dva reda, a naslijeđeni prored tijela (1,5714 = 37,7 px) je među njima ostavljao rupu od 14 px (FTR-N3). */ .pricing__group-title { margin: 0 0 2.5rem; font-size: 1.5rem; font-weight: 400; line-height: 1.25; color: inherit; } .pricing__rows { margin: 0; padding: 0; list-style: none; } .pricing__row { display: grid; grid-template-columns: 1fr 20.25rem; align-items: baseline; gap: 1.5rem; padding: 0 0 1.75rem; border-bottom: 1px solid var(--pr-sep, currentColor); /* polje `sep` */ } .pricing__row + .pricing__row { padding-top: 1.9375rem; } .pricing__name { font-size: 1rem; font-weight: var(--pr-name-fw, var(--fw-light)); line-height: 1.25; text-transform: var(--pr-name-tt, uppercase); color: var(--pr-name-c, var(--c-accent)); /* polja `name_color` / `name_fw` / `name_case` */ } .pricing__note { display: block; font-size: .8125rem; opacity: .7; text-transform: none; color: inherit; } .pricing__from { font-size: inherit; opacity: 1; } .pricing__price { font-size: 1.5625rem; font-weight: 200; white-space: nowrap; color: var(--pr-price-c, currentColor); } /* polje `price_color` */ /* Iznos je Bold 700 (PDF: „€ 1.210" Poppins-Bold), „A partire da" ostaje 200. */ .pricing__amount { font-weight: var(--pr-price-fw, 700); } /* polje `price_fw` */ /* Crte su samo IZMEDJU redova: ispod zadnjeg reda grupe u dizajnu je nema. */ .pricing__row:last-child { border-bottom: 0; } /* Prvi panel je vidljiv bez JavaScripta; ostale otkriva skripta. */ .pricing__panel:first-of-type { display: block; } .pricing__panel.is-active { display: block; } .pricing:has(.pricing__panel.is-active) .pricing__panel:first-of-type:not(.is-active) { display: none; } /* ---------- placanje ---------- */ .pay { display: grid; gap: 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; } .pay--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pay--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pay--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pay__icon img { width: 2.5rem; height: 2.5rem; object-fit: contain; } .pay__title { margin: .75rem 0 .5rem; font-size: 1.125rem; font-weight: 500; } .pay__text { font-size: .875rem; line-height: 1.5714; } /* Pozadina ploče: polje `iban_bg` (payments.php); bankovni podaci uz način plaćanja (`.pay__iban--uz`) nemaju ploču, layout-a.css. */ .pay__iban { margin-top: 2rem; padding: 1.5rem; border-radius: 1.25rem; background: var(--pay-iban-bg, var(--c-tile)); font-size: .9375rem; } /* ---------- blog ---------- */ /* Mjere iz 06_Blog.pdf: kartice na x 113 / 437 / 761 (korak 324), a stupac kategorija na x 1193 — dakle DESNO, ne lijevo. Naslov "Categorie" je 16 px Regular, stavke 16 px Light s korakom 41 px. */ .blog--with-side { display: grid; grid-template-columns: 1fr 12.875rem; gap: 2.25rem; } .blog--with-side .blog__side { order: 2; } .blog__side-title { margin: 0 0 1.375rem; font-size: 1rem; font-weight: 400; color: var(--c-white); } .blog__cats { margin: 0; padding: 0; list-style: none; font-size: 1rem; font-weight: var(--fw-light); line-height: 1.125; } .blog__cats li { padding: 0 0 1.4375rem; } .blog__cats a { color: inherit; text-decoration: none; } .blog__cats a:hover { color: var(--c-accent); } .blog__grid { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; } .blog__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .blog__link { color: inherit; text-decoration: none; } /* Zaobljenje fotografije u `06_Blog.pdf` je 10 px: profil gornjeg lijevog ugla od vrha je 8,5,4,2,2,1,0 (pun rub u 6. redu), isto u svim uglovima i stupcima. Sa 20 px je ugao bio vidljivo okrugliji (pun rub tek u 14. redu). */ .blog__img { display: block; width: 100%; height: 12.5rem; border-radius: .625rem; object-fit: cover; } /* M04 (Pragma, 30. 9. 2026): kartica članka na hover vidljivo reaguje, kao na V1 (archive.css:58, :76, :93): fotografija se blago uveća, naslov postane plav, a krug strelice na fotografiji (polje „Freccia sulla foto") plav s bijelom strelicom. Isječak fotografije (overflow + radijus) važi SAMO na hover: stalni `overflow: hidden` na `.blog__media` mijenja antialias uglova slike (izmjereno 781 px razlike na /smile-blog/ 1512), a mirovanje mora ostati piksel-isto. Fokus tipkovnicom isto, bez uvećanja. */ .blog__img { transition: transform .5s ease; } .blog__title { transition: color .2s ease; } @media (hover: hover) { .blog__link:hover .blog__media { overflow: hidden; border-radius: .625rem; } .blog__link:hover .blog__img { transform: scale(1.04); } .blog__link:hover .blog__title { color: var(--c-accent); } .blog--freccia .blog__link:hover .blog__media::after { background-color: var(--c-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='%23ffffff' stroke-width='1.3'/%3E%3C/svg%3E"); } } .blog__link:focus-visible .blog__title { color: var(--c-accent); } /* Mjereno iz `06_Blog.pdf`: naslov kartice je 16 px SemiBold VELIKIM SLOVIMA, prored 21 px, 12 px ispod fotografije; uvod je 16 px Light, prored 22 px, 10 px ispod naslova. Prije je naslov bio 18 px Medium malim slovima, a umjesto uvoda je stajao datum, kojeg u dizajnu nema. */ .blog__title { margin: .75rem 0 .625rem; font-size: 1rem; font-weight: 600; line-height: 1.3125; text-transform: uppercase; } .blog__excerpt { margin: 0; font-size: 1rem; font-weight: var(--fw-light); line-height: 1.375; } /* M31: mobilna harmonika kategorija (`blog_grid.php`, `details.blog__m-kat`) postoji samo na ≤1023 (mobilno.css). Na desktopu je nema ni za raspored ni za čitač ekrana, pa desktop ostaje piksel-isti. */ .blog__m-kat { display: none; } .blog__more { margin-top: 2rem; } /* Izgled iz polja sekcije (`blog_grid.php`): svako pravilo pogađa samo `.blog` s klasom koju predložak daje POPUNJENOM polju. Prazno = tema. */ .sec .bl-naslov-c .blog__title { color: var(--bl-naslov-c); } .sec .bl-naslov-fw .blog__title { font-weight: var(--bl-naslov-fw); } .sec .bl-tekst-c .blog__excerpt { color: var(--bl-tekst-c); } .sec .bl-tekst-fw .blog__excerpt { font-weight: var(--bl-tekst-fw); } .sec .bl-kat-c .blog__cats { color: var(--bl-kat-c); } .sec .bl-kat-fw .blog__cats { font-weight: var(--bl-kat-fw); } /* Natpis „Carica altri" nije u `.btn__label`, pa debljinu iz polja `cta_weight` (`--btn-fw`) prima sam, i to samo kad je upisana. */ .blog__more[style*="--btn-fw"] { font-weight: var(--btn-fw); } /* Strelica na fotografiji kartice (polje „Freccia sulla foto"). U `06_Blog.pdf` je utisnuta u fotografiju: bijeli krug 29 px, 21 px od desnog i 14 px od donjeg ruba fotografije 314 x 312, tamna strelica. */ .blog--freccia .blog__media { position: relative; } .blog--freccia .blog__media::after { content: ""; position: absolute; right: 1.3125rem; /* 21 */ bottom: .875rem; /* 14 */ width: 1.8125rem; /* 29 */ height: 1.8125rem; border-radius: 50%; background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='%231e1c1b' stroke-width='1.3'/%3E%3C/svg%3E") center / .875rem auto no-repeat; pointer-events: none; } /* ---------- mapa ---------- */ .map { position: relative; height: var(--map-h, 26.25rem); border-radius: var(--map-r, 1.25rem); overflow: hidden; } .map__placeholder { display: block; width: 100%; height: 100%; object-fit: cover; } /* Pomak karte po sekciji (polje `offset_x`): 07_Contatti.pdf je crta na x 111, 2 px lijevo od stupaca ispod nje (CT-K01). `.map` je vec `position: relative`, pa `left` pomjera samo kartu. Samo na sirokom ekranu; Contatti nema mobilnog dizajna. */ @media (min-width: 1024px) { .map[style*="--map-dx"] { left: var(--map-dx); } } /* Contatti nema mobilnog dizajna. Okvir karte je na telefonu uzak (358), a visok kao na desktopu (489), pa se od karte vidi samo trecina; sa sredinom (50 %) oznaka „POLIKLINIKA SMILE" (na 61..70 % sirine slike) bila je odsjecena na desnom rubu (CT-N01). 66 % stavlja u okvir oznaku klinike i garazu Slatina. Mjera ceka potvrdu Pragme. */ @media (max-width: 1023px) { .map__placeholder { object-position: 66% 50%; } } /* Dok ne stigne ni kod mape ni zamjenska slika, okvir zadrzava svoju visinu iz dizajna. Bez toga se sekcija urusi i stranica ispadne krace nego dizajn — na Contatti za 388 px. */ .map--prazna { background: rgba(255, 255, 255, .06); } .map iframe { display: block; width: 100%; height: 100%; border: 0; } /* Dugme pristanka postoji samo kad je u sekciji ukljuceno „Chiedi il consenso prima di caricare la mappa" (U3, 30. 9. 2026); zadano se mapa (iframe) ispisuje odmah i popunjava okvir (`.map iframe` iznad). Dugme pristanka stoji tamo gdje `07_Contatti.pdf` oznacava kartu — natpis „MAPPA GOOGLE" (x 990,9..1315,1, y 534..590) u praznom moru, dakle sredinom na 81 % sirine i 70,6 % visine okvira (111..1397 x 216,9..706,1). U sredini okvira je prekrivalo natpis „Parking Garage Slatina…" i oznaku P, koji su dio zamjenske slike iz dizajna (FT-R03). Na telefonu je okvir uzak (358 px), pa bi pilula od 177 px na 81 % izasla preko ruba: tamo je uz desni rub, na istoj visini (66 %), izmedju natpisa „Parking Garage Slatina…" i „Colosseum Lounge" — u donjem uglu bi prekrila kucicu i natpis „POLIKLINIKA SMILE". */ .map__consent { position: absolute; left: 81%; top: 70.6%; transform: translate(-50%, -50%); } @media (max-width: 1023px) { .map__consent { left: auto; right: .75rem; top: 66%; transform: translateY(-50%); } } .map__cols { display: grid; gap: 2rem; margin: 2rem 0 0; padding: 0; list-style: none; } .map__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .map__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .map__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Mjereno u `07_Contatti.pdf`, y 762,7 i 772,7: naslovi stupaca su Poppins-Bold 16 px, BIJELI i normalnim slovima — „Poliklinika Smile", „Contatti", „Orari", „Dove parcheggiare?". Tema ih je pisala verzalom i tirkizno. Boju vec nosi klasa `c-white` iz sadrzaja, pa se ovdje ne postavlja. */ .map__col-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; } .map__col-text { font-size: .9375rem; line-height: 1.6; } /* Stupci ispod karte, 07_Contatti.pdf (okviri slova, 16 px = okvir 22,4): naslov stupca 16 Bold, redak 20; vrh retka „Contatti", „Orari", „Dove parcheggiare?" 773,9 = 67,9 ispod dna karte (706) naslov -> tekst 40 od vrha do vrha, dakle 20 razmaka tekst 16 Light, korak 20 (sajt 24: strut odlomka od 15 px s proredom 1,6 je bio visi od retka) biljeska 12 px korak 14 (sajt 24, isti strut), 7,4 ispod adrese dani u „Orari" Bold 700 (sajt 400: `strong` je „bolder" od 300) dugme pilula stupca stoji 115,5 ispod vrha teksta u oba stupca koja je imaju (Poliklinika 803,9 -> 918,5 uz stupac nacrtan 10 px vise; parcheggio 813,9 -> 929,45), bez obzira na to koliko je teksta iznad — dakle u istoj visini, a ne na stalnom razmaku od teksta pilule „Apri indicazioni" 189, „Apri il parcheggio" 209: uvlaka 16, razmak natpis -> krug 25 (sajt 22 / 14) Stupac „Poliklinika Smile" je u PDF-u cijeli 10 px vise od ostala tri (naslov 762,7 naspram 772,7, tekst 802,7 naspram 812,7). Razmak do stupaca je zato onaj najvisljeg (57,9), a ostala tri se spustaju poljem stupca `dy` (10) — `--col-dy` na stupcu. */ .map__cols { margin-top: 3.61875rem; } /* 57,9 */ .map__col-title { line-height: 1.25; margin-bottom: 1.25rem; } /* 20 / 20 */ .map__col-text { font-size: 1rem; line-height: 1.25; } /* strut 16 / 20 */ .map__col-text p { margin: 0; } .map__col-text p + p { margin-top: .4625rem; } /* 7,4 */ .map__col-text p:has(> span.fs-12) { line-height: 0; } .map__col-text strong, .map__col-text b { font-weight: 700; } .map__col-text .btn.btn--sm { justify-content: flex-start; padding-left: 1rem; /* 16 */ gap: 1.5625rem; /* 25 */ } @media (min-width: 1024px) { .map__col { padding-top: var(--col-dy, 0px); } .map__col-text { display: flex; flex-direction: column; min-height: 9.525rem; } /* 115,5 + 36,9 */ .map__col-text p:has(> .btn) { margin-top: auto; line-height: 0; } /* Pilula „Apri indicazioni" je u PDF-u na x 108, 5 px lijevo od svog stupca (FT-R04); pomak je mjera stupca (`cta_dx`), sirina ostaje. */ .map__col[style*="--col-cta-dx"] .map__col-text .btn { position: relative; left: var(--col-cta-dx); } } /* ---------- udaljenosti ---------- */ .dist { display: grid; gap: 3.75rem; margin-top: 2rem; } .dist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Tracking je nula, iz mjere — vidi `.hero__eyebrow`. */ /* Verzal: polje `title_case` (prazno = uppercase, kao u dizajnu). */ .dist__title { margin: 0 0 .75rem; font-size: 1rem; font-weight: 700; text-transform: var(--dist-title-tt, uppercase); letter-spacing: 0; color: var(--c-accent); } .dist__list { margin: 0; } .dist__list dt { font-weight: 700; font-size: .9375rem; } .dist__list dd { margin: 0 0 .75rem; font-size: .9375rem; } /* Mjere iz 07_Contatti sek#2. Uvod: 16 px, prvi stavak Bold, ostalo Regular, prored 22, centriran u stupcu od ~642 px (tri retka; sirina je izmedju najsireg retka 642,1 i prvog retka s iducom rijecju ~652). Od uvoda do „IN AUTO" 73 px okvira. Liste: natpis -> naziv 22, naziv -> vrijednost 24,1, korak stavke 66 (sajt je imao 31 / 22 / 54). Vrijednost je cisto bijela (bila je opacity .85 -> najsvjetliji piksel 218). */ .dist__intro { max-width: 40.375rem; margin: 1.4375rem auto 0; font-size: 1rem; font-weight: 400; line-height: 1.375; } /* 23: od vrha slova naslova do vrha slova uvoda 65 px kao u PDF-u */ .sec--ta-center .dist__intro { text-align: center; } .dist__intro p { margin: 0; } .dist__intro strong { font-weight: 700; } .dist__intro + .dist { margin-top: 4.5625rem; } /* 73 */ .dist__title { line-height: 1.375; margin-bottom: 0; } .dist__list dt { line-height: 1.375; } .dist__list dd { line-height: 1.5714; margin: .0625rem 0 1.3125rem; } /* 1 / 21 */ /* Iza zadnje vrijednosti nema razmaka: sekcija završava na dnu zadnjeg retka, a razmak do forme ispod nosi forma (spacing_top donje sekcije). */ .dist__list dd:last-child { margin-bottom: 0; } /* ---------- nagrade ---------- */ .trust { display: grid; gap: 1.5rem; margin-top: 2rem; } /* Gornja margina je razmak ISPOD NASLOVA sekcije. Modul u dizajnu naslova nema nigdje, pa je kartica prvo dijete kontejnera i margina od 32 px se samo dodavala na `spacing_top` stranice: naslovnica je imala 89 px od forme do kartice umjesto 51 (TRU-03). Isto rješenje kao `.numbers`. */ .trust:first-child { margin-top: 0; } /* Mjereno iz Moduli/Footer.pdf i potvrdeno na stranicama koje ga koriste: V1 su dvije jednake kartice 631 + razmak 24 + 631 = 1286, visine 191. V2 je lijevi blok 739 (tekst 415 + fotografija 324 uz sam rub) + razmak 10 + desna kartica 523 = 1272, visine 278. Razlicite su i sirine i razmak, pa se ne mogu opisati jednim pravilom. */ .trust--v1 { grid-template-columns: repeat(2, 39.4375rem); gap: 1.5rem; } .trust--v1 .trust__card { min-height: 11.9375rem; } .trust--v2 { grid-template-columns: 46.1875rem 32.6875rem; gap: 0.625rem; } /* Polozaj reda kartica na stranici (prepis modula `o_offset_x` -> `offset_x`). Svih 25 PDF-ova s V2 crta red kartica sirok 1272 px, ali ga ne stavljaju na isti x: 17 od njih na 113 (rub kontejnera), sest landinga na 120, Prima visita na 123, Invisalign na 133. Pomak se upisuje na stranici, a ovdje samo pomice lijevi rub reda; sirine ostaju iz modula. Samo na sirokom ekranu — na telefonu je red jedan stupac. */ @media (min-width: 1024px) { .trust.trust--dx { margin-left: var(--trust-dx); } } .trust--v2 .trust__card { min-height: 17.375rem; } /* Kartica nosi sve svoje: fotografiju, naslov, uvod, tekst, grupe logoa i vlastito dugme. U PDF-u varijante V2 pasus o dr. Slovsi i dugme "Conosci il team" stoje UNUTAR kartice, a ne ispod nje. */ .trust__card { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; /* 14 px, ne 20: uvlaka ruba po redovima od vrha je u dizajnu 10,7,6,5,4,3,2,1,1,1 na sve četiri kartice obje varijante (render `Moduli/Footer.pdf` i `00_Homepage.pdf`), što je krug polumjera 14. */ border-radius: .875rem; /* Polje sekcije „Sfondo delle schede" (`--sec-card-bg`, samo kad je popunjeno); prazno = bijela iz dizajna. */ background: var(--sec-card-bg, var(--c-white)); color: var(--c-bg); } /* Desni uglovi lijeve kartice V2 su uglovi FOTOGRAFIJE, a ona je u dizajnu zaobljena manje od kartice: uvlaka 6,4,3,2,1,1 — polumjer 8. Kartica `overflow: hidden` reže fotografiju svojim polumjerom, pa se desni uglovi kartice postavljaju na 8; da je fotografiji dat vlastiti polumjer, kartica bi je i dalje rezala na 14. Samo na desktopu: na mobilnom fotografija ide ispod teksta, pa desni gornji ugao nije njen. */ @media (min-width: 1024px) { .trust--v2 .trust__card:first-child { border-radius: .875rem .5rem .5rem .875rem; } } /* U PDF-u fotografija zauzima desnu polovinu kartice punom visinom (324x278 unutar kartice 631x278), ne traku preko vrha. */ .trust__photo { overflow: hidden; } .trust__photo-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Kartica s fotografijom: tekst 415 + foto 324 = 739. Fotografija ide do samog ruba kartice, bez razmaka i bez vlastitog zaobljenja - zaobljenje nosi kartica preko overflow. */ .trust__card:has(.trust__photo) { display: grid; /* Omjer iz dizajna (415 : 324), ali u udjelima: kad je kartica uza od 739 px — a na hubovima jest — fiksne mjere su gurale fotografiju 162 px izvan kartice. S udjelima se omjer cuva, a prelijevanja nema. */ grid-template-columns: minmax(0, 415fr) minmax(0, 324fr); gap: 0; padding: 0; overflow: hidden; } .trust__card:has(.trust__photo) .trust__photo { grid-column: 2; grid-row: 1; } .trust__card:has(.trust__photo) .trust__body { grid-column: 1; grid-row: 1; } /* Mjereno iz PDF-a: u V2 tekst lijeve kartice pocinje na 33 px od ruba, a desne na 60; u V1 obje na 54. Razlika je u samom dizajnu. USPRAVNI razmak u V1 NIJE isti kao bocni, iako je prva verzija tako pretpostavila. Kartica je u Footer.pdf 631x191 (bijela ploha izmjerena presjekom rendera: x 113..744, y 181..372); naslov pocinje na y 220,2, a traka medalja zavrsava na 349,7. Dakle gore oko 34 px, dolje 22, a sa strana 54. Sa 54 px gore i dolje kartica na sajtu je bila 232 px — 41 px previsoka, i to na svih 32 stranice. */ .trust--v1 .trust__card { padding: 2.125rem 3.375rem 1.375rem; } /* V1 na desktopu, izmjereno iz `Moduli/Footer.pdf` (kartice 113..744 i 768..1399, y 181..372) i potvrđeno na `00_Homepage.pdf`: naslov font-okvir y 220,2..242,6 — 39,2 od vrha kartice, a ne 34. Prored je 1,4, pa je okvir retka isto što i font-okvir i `padding-top` ide ravno do njega. Sa 34 je naslov stajao 6 px previsoko (TRU-07). traka medalja slika 145..697 × 256,7..349,7 (552 × 93), s vlasi u gornja tri reda — 14,1 ispod naslova, i 22 px LIJEVO od naslova (naslov je na 167). certifikati prvi logotip (Straumann) na 815, naslov na 822. Dakle red logotipa i naslov NEMAJU isti lijevi rub, i to u obje kartice: rub sadržaja je rub reda (32 odnosno 47 od ruba kartice), a naslov je uvučen za razliku (22 odnosno 7). Prije je kartica imala 54 sa strane, pa je traka počinjala 22 px desno od dizajna i vlas je bila 30 px kraća. Desno: traka završava na 697, kartica na 744, dakle 47 — sa 54 bi traka izlazila iz okvira sadržaja. Pod `min-width: 1024px`, jer mobilni reset ispod ima manju specifičnost od `:first-child` / `:last-child` i ne bi ga dohvatio. */ @media (min-width: 1024px) { .trust--v1 .trust__card:first-child { padding: 2.45rem 2.9375rem 1.375rem 2rem; } /* 39,2 47 22 32 */ .trust--v1 .trust__card:last-child { padding: 2.45rem 3.375rem 1.375rem 2.9375rem; } /* 39,2 54 22 47 */ .trust--v1 .trust__card:first-child .trust__card-title { padding-left: 1.375rem; } /* 22 → x 167 */ .trust--v1 .trust__card:last-child .trust__card-title { padding-left: .4375rem; } /* 7 → x 822 */ .trust--v1 .trust__body { gap: 0; } .trust--v1 .trust__badges { margin-top: .88125rem; } /* 14,1 */ } .trust--v2 .trust__card:first-child { padding: 0; } /* Uvlaka tijela lijeve kartice V2 se NE postavlja ovdje. Ziva vrijednost je `razmaci.css` red 171 (`1.8125rem .6875rem .75rem 2.0625rem`), koji se ucitava poslije ovog fajla i ima istu specificnost, pa uvijek pobjedi. Dvaput sam ovdje mijenjao broj i dvaput mjerenje nije pomaklo ni piksel; pravilo je bilo mrtvo. Ako treba mijenjati uvlaku, mijenja se tamo. */ .trust--v2 .trust__card:last-child { padding: 3.75rem; } /* Lijeva kartica V2 drzi kolonu za fotografiju i prije nego slika stigne, inace se tekst razlije preko cijele kartice i prelom ne odgovara PDF-u. */ .trust--v2 .trust__card:first-child { display: grid; /* Omjer iz dizajna (415 : 324), ali u udjelima: kad je kartica uza od 739 px — a na hubovima jest — fiksne mjere su gurale fotografiju 162 px izvan kartice. S udjelima se omjer cuva, a prelijevanja nema. */ grid-template-columns: minmax(0, 415fr) minmax(0, 324fr); overflow: hidden; } .trust--v2 .trust__card:first-child:not(:has(.trust__photo))::after { content: ""; grid-column: 2; grid-row: 1; /* Polje „Colore dello spazio per la foto" (`photo_bg`). */ background: var(--trust-ph, rgba(11, 10, 10, .06)); } .trust__body { display: flex; flex-direction: column; gap: .75rem; flex: 1; } /* Dugme SEKCIJE ispod kartica (klon „Pulsante", i prepis „Testo del pulsante" iz reference na modul) stajalo je zalijepljeno uz kartice. Nijedna stranica ga danas ne prikazuje, pa razmak ne pomjera ništa postojeće; `cta_gap` sekcije ga i dalje mijenja. */ .sec--trust > .sec__inner > .btn { margin-top: var(--sec-cta-gap, 2.5rem); } /* PDF: 16 px SemiBold u V1, 16 px Bold u lijevoj kartici V2. */ /* Prored je izricit, jer naslovi dviju kartica ne nose istu OZNAKU: prva dobije `h2`, druga `h3` (globalni brojac nivoa propusti samo prvog od dva brata). `tipografija.css` im zbog toga daje 25,1 odnosno 20 px, pa je naslov desne kartice sjedio 2,9 px nize nego u dizajnu — na svih 25 stranica s ovim modulom. Nasao Tok 5, potvrdjeno mjerenjem: u dizajnu su dva naslova 1,1 px razmaknuta (razlika velicine 16 i 14 px), na sajtu 4,0. Vrijednost 1,4 je visina font-okvira u PDF-u, pa se vrh okvira retka poklopi s vrhom bloka bez obzira na velicinu slova. */ .trust__card-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; } /* `:not([class*="fw-"])`: debljina iz menija „Formati" se, kad obuhvata cijeli naslov, seli na sam `h2` (`smile_hoist_classes()`), a `.fw-200.fw-200` (dva razreda) je gubio od ovog pravila (četiri) — izabrana debljina nije radila samo na ovom naslovu. Naslov bez klase debljine ostaje 700. */ .trust--v2 .trust__card:first-child .trust__card-title:not([class*="fw-"]) { font-weight: 700; } .trust__card-lead { margin: 0; font-size: .875rem; font-weight: 500; } .trust__card-text { font-size: .875rem; line-height: 1.5714; font-weight: 300; } .trust__group + .trust__group { margin-top: 1.25rem; } .trust__group-title { margin: 0 0 .75rem; font-size: .875rem; font-weight: 600; } /* Red znacki se NE lomi. U dizajnu su svih pet medalja u jednom redu (traka 552x93 u `Moduli/Footer.pdf`), a nase izvucene slike imaju drugi omjer stranica, pa bi na fiksnoj visini red pao u dva. Zato se ne prelama, a znacke se skupe koliko treba da stanu. */ .trust__badges { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.75rem; width: fit-content; margin: 0; padding: 0; list-style: none; } /* Svijetlosiva vlas IZNAD reda medalja (u PDF-ovima upečena u gornji red slike trake, na svih 33 pojavljivanja) — Pragma, 30. 9. 2026 (M11, „AWARDS MODULO — Remove this line above the logos"): UKLONJENA, u V1 (prva kartica) i V2 (prva grupa druge kartice), na svim širinama, zajedno s poljem „Colore della linea sopra le medaglie". Na njenom mjestu ostaje 1 px praznog, da medalje i visina kartica ostanu tačno gdje su bile. U px, ne u rem: zamjenjuje liniju od 1px, koja se ni na 1024–1511 nije skalirala. */ .trust--v1 .trust__card:first-child .trust__badges, .trust--v2 .trust__group:first-child .trust__badges { padding-top: 1px; } .trust__badge { min-width: 0; } /* Prijelom reda za mobilni (`wrap_m`); na desktopu ne postoji. */ .trust__prelom { display: none; } /* Naslov kartice s posebnim mobilnim tekstom (`title_m`): predložak ispiše oba, vidi se jedan. */ .trust__naslov-m { display: none; } @media (max-width: 1023px) { .trust__naslov-d { display: none; } .trust__naslov-m { display: inline; } } /* Mjereno iz `Moduli/Footer.pdf`: traka medalja je 552x93, a logotipi certifikata 65x85, 64x62, 63x63 i 144x72. Granica od 48 px ih je smanjivala skoro na pola — nezavisni pregled je „bedzevi su osjetno manji nego u dizajnu" prijavio na 32 stranice. Kartica je 631 px siroka, pa pet znacki od ~110 px stane u jedan red. */ .trust__badge img { max-height: 5.8125rem; max-width: 100%; width: auto; object-fit: contain; } /* do 93 */ /* Red čiji logotipi nose mjeru iz dizajna (polja `height`, `gap_l`, `offset_t` uz svaki logotip; predložak ih predaje kao `--b-h`, `--b-x`, `--b-y`). Tada položaj nosi mjera, a ne `gap` i centriranje: u dizajnu razmaci nisu jednaki (V1: 50 / 45 / 41) a logotipi nisu poravnati ni po sredini ni po vrhu (V2: par „Safe" je 5 px iznad ostalih). Slika je blok, da joj redak teksta ne doda prostor ispod i da je stavka visoka tačno koliko slika. Logotip bez mjere u takvom redu dobije 0 i zadanu visinu. */ @media (min-width: 1024px) { .trust__badges--mjera { gap: 0; align-items: flex-start; } .trust__badges--mjera .trust__badge { margin-left: var(--b-x, 0px); margin-top: var(--b-y, 0px); } .trust__badges--mjera .trust__badge img { display: block; height: var(--b-h, auto); max-height: var(--b-h, 5.8125rem); } } /* Isto za mobilni, s vlastitim mjerama (`--b-hm`, `--b-xm`, `--b-ym`), jer ih `Mobile HP.pdf` slaže drukčije. Red se lomi samo ako ima prijelom (`wrap_m`); traka medalja se ne lomi, nego se na užem ekranu skupi. */ @media (max-width: 1023px) { .trust__badges--mjera-m { gap: 0; align-items: flex-start; } .trust__badges--mjera-m:has(.trust__prelom) { flex-wrap: wrap; } .trust__badges--mjera-m .trust__prelom { display: block; flex-basis: 100%; height: 0; } .trust__badges--mjera-m .trust__badge { margin-left: var(--b-xm, 0px); margin-top: var(--b-ym, 0px); } .trust__badges--mjera-m .trust__badge img { display: block; height: var(--b-hm, auto); max-height: var(--b-hm, 5.8125rem); } /* Red koji se lomi (logotipi certifikata V1) je u `Mobile HP.pdf` složen za sadržaj kartice od 316 px (358 − 2 · 21). Na užem telefonu (390 px: 276, 360 px: 246) drugi red — Garancija 88 + razmak 30 + par Safe 195 = 313 — nije stajao, pa je par Safe padao u vlastiti red, a Garancija ostajala sama uz lijevi rub (SOL-K01, TEAM-K01, BL-02, CT-03, BI-01). Zato se ispod 430 px cijeli red smanjuje PROPORCIONALNO: svaka mjera iz dizajna (visina, razmak lijevo, razmak gore) množi se istim faktorom `širina reda / 316`, najviše 1. Na 430 px i šire faktor je 1 i sve je tačno kao dizajn. Mjere dolaze bez jedinice (`--b-hm-n` …, predložak), jer CSS ne dijeli dužinu dužinom. Red je širok kao sadržaj kartice (a ne `fit-content`), da bi bio kontejner čija se širina mjeri — ali najviše 316 px, koliko ga dizajn slaže. Na tabletu (768: sadržaj kartice 654 px) je red bio širok 654, logotipi složeni za 316 stajali uz lijevi rub, a desna polovina kartice prazna, iako je naslov centriran (TRUST-R6-01). S gornjom granicom i `margin-inline: auto` red stoji na sredini kartice, kao u `Mobile HP.pdf` (naslov i red dijele sredinu 215), a faktor ostaje 1. Na 430 px je sadržaj tačno 316, pa se ništa ne mijenja. */ .trust__badges--mjera-m:has(.trust__prelom) { width: min(100%, 19.75rem); margin-inline: auto; container-type: inline-size; } .trust__badges--mjera-m:has(.trust__prelom) .trust__badge { --trust-s: min(1px, 100cqi / 316); margin-left: calc(var(--b-xm-n, 0) * var(--trust-s)); margin-top: calc(var(--b-ym-n, 0) * var(--trust-s)); } .trust__badges--mjera-m:has(.trust__prelom) .trust__badge img { height: calc(var(--b-hm-n) * var(--trust-s)); max-height: calc(var(--b-hm-n, 93) * var(--trust-s)); } } /* Traka medalja na mobilnom (≤ 1023 px): svih pet medalja ISTE veličine, bez obzira na mjere upisane uz pojedinu medalju. Kolege su 6. 10. 2026 u module „Premi e certificazioni" dodale medalju 2025 bez mobilne mjere (`height_m`), a u HR V1 je mjeru dobila SAMO ona. Red s bar jednom mjerom dobija `--mjera-m`, pa je medalja s mjerom bila visoka 55,29, a ostale `auto` (do 93) i skupljene da red stane — na 390 px: HR 2025 37,8 px naspram 63,5 ostalih, IT 2025 86,4 naspram 51,4. Visina koja zavisi od toga je li neko popunio polje uz JEDNU sliku je krhka, pa traka na mobilnom više ne čita mjere pojedine medalje (visina, razmaci, prelom), nego se sama dijeli na jednake dijelove. V1 (prva kartica): traka je u `Mobile HP.pdf` (430 px) široka 332 i nosi pet medalja u koraku ~66. Red je zato širok kao sadržaj kartice, a najviše 332 (20.75rem), na sredini — kao red certifikata ispod (TRUST-R6-01). Svaka stavka ima isti bočni razmak (1,673 % reda = 5,555 px na 332), a slika se skupi ISTIM faktorom kao ostale (flex-shrink je srazmjeran širini), pa su sve slike jednako visoke i kad su im omjeri različiti. Na 430 px je medalja visoka tačno 55,29 — mjera iz polja `height_m` u sijaču, pa kartica ostaje visoka kao prije — a na užem telefonu se cijeli red smanjuje srazmjerno (390: 48,7; 360: 43,7). `max-height` 93 vrijedi samo ako bi red imao mjesta i za veće medalje (ne dešava se do 332). V2 (prva grupa druge kartice) nikad nije imala mobilnih mjera: medalje su do 93, s razmakom 12 i skupljene da stanu, poravnate lijevo — već su jednake, pa se ne mijenja ništa. Ako neka medalja dobije `height_m`, red dobije `--mjera-m`; tada se vraća zadano ponašanje, da se ne ponovi isto. */ @media (max-width: 1023px) { .trust--v1 .trust__card:first-child .trust__badges { flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0; width: min(100%, 20.75rem); margin-inline: auto; } .trust--v1 .trust__card:first-child .trust__badge { margin: 0; padding-inline: 1.673%; } .trust--v1 .trust__card:first-child .trust__badge img { display: block; width: auto; height: auto; max-width: 100%; max-height: 5.8125rem; } .trust--v2 .trust__group:first-child .trust__badges--mjera-m { flex-wrap: nowrap; align-items: center; gap: .75rem; width: fit-content; margin-inline: 0; container-type: normal; } .trust--v2 .trust__group:first-child .trust__badges--mjera-m .trust__badge { margin: 0; } .trust--v2 .trust__group:first-child .trust__badges--mjera-m .trust__badge img { height: auto; max-height: 5.8125rem; } .trust--v1 .trust__card:first-child .trust__prelom, .trust--v2 .trust__group:first-child .trust__badges--mjera-m .trust__prelom { display: none; } } .trust__card-cta { align-self: flex-start; margin-top: auto; } /* ---------- prima visita ---------- */ /* Razmak stupaca je 82 px, ne 113. Mjereno na naslovnici (y 3942): naslov ide 113..787, dakle 674 px, a desni stupac pocinje na 869 i zavrsava na 1399. 674 + 82 + 530 = 1286. Sa 113 px razmaka naslovu je ostajalo 643 px i „Inizia con una prima visita gratuita" se lomio u DVA retka umjesto jednog — na naslovnici, laboratoriju, prezzima, landingu impianti i prvoj posjeti. */ /* Uspravni raspored sekcije, iz `00_Homepage.pdf` (pojas y 3907..4356 = 449): naslov 40 px, font-okvir 3942..3998; okvir RETKA je 46 (prored 1,15), pa mu je vrh 3947, dakle 40 px od vrha pojasa kartica 4031..4330 (299) dno 4356, dakle 26 ispod kartice Razmak sekcije odozgo je 35 px i dolazi iz `spacing_top`, koji mjeri SAV izmedu sekcija i nije nas da ga mijenjamo. Preostalih 5 px do naslova nosi zato sama glava, a razmak do kartice je 38: 35 + 5 + 46 + 38 + 299 + 26 daje tacno 449. Tema je imala 24 px razmaka do kartice i sekciju od 474. Uvod uz naslov je 14 px s korakom 22 (dva retka, 3942,3 i 3964,3), ne 15 s korakom 24 — s 15 px se lomio u vise redaka i sam dizao glavu. */ /* Razmak je 80, ne 82, i to je jedini razlog zbog kojeg naslov ne ide u dva retka. Dizajn ovdje nema nijedan piksel zazora: naslov „Inizia con una prima visita gratuita" je u svih pet PDF-ova ink SIROK TACNO 674 (x 113 do 787), a stupac je 1286 - 82 - 530 = 674. Preglednik ne moze pouzdano reproducirati poklapanje u decimalu, pa je naslov padao u drugi redak i dizao sekciju za 45 px. Sa 80 stupac je 676, a uvod i dalje pocinje tacno na 869 (113 + 676 + 80), dakle nista se drugo ne pomjera. */ .prima__head { display: grid; grid-template-columns: 1fr 33.125rem; gap: 5rem; align-items: start; margin: .3125rem 0 2.375rem; } .prima__title { margin: 0; font-size: 2.5rem; font-weight: var(--fw-light); line-height: 1.15; } /* Uvod desno od naslova. Boja je PUNA: dizajn uvod crta #000000 na bijeloj traci i #ffffff na tamnoj (najtamniji piksel uvoda u tabaku je 0). `opacity: .85` ga je sivio na (37,37,37) na svakoj stranici s ovim rasporedom. Stupac uvoda NIJE sirok koliko desni stupac glave (530). Uvod u dizajnu stoji u stupcu od 422 px — istom u kojem je tekst kartice ispod njega (869..1291) — i zato se lomi ranije nego sto bi 530 dopustilo: tabak modula „…Portali con te: li valuteremo" | „insieme alla…" ink 408,3 naslovnica, „…ricevi una" | „valutazione chiara…" ink 393,5 laboratorio, impianti, prezzi — isti tekst, isti prelom odontoiatria „…personalizzato," | „costruito sulle…" ink 409,3 U 530 px sva cetiri teksta dobiju jednu rijec vise u prvi redak. Jedina stranica koja uvod siri preko 422 je Clinica (drugi redak 521,9 px); ona svoju sirinu nosi poljem `lead_width` (vlasnistvo stranice). */ .prima__aside { margin: 0; font-size: .875rem; line-height: 1.5714; max-width: var(--sec-lead-w, 26.375rem); } /* Mjere iz PDF-a: kartica 1286 x 299 na x 113, fotografija 623 x 253 na x 133 (dakle uvlaka 20), tekst na x 869 — razmak izmedu njih 113 px. Zaobljenje je 8 px, ne 20: lijevi rub kartice dostize x 113 tek na osmom retku od vrha i dna, u tabaku i na tamnom rasporedu (Clinica, Odontoiatria). Fotografija isto (rub na x 133 na sestom retku). Gradijent je USPRAVAN, jednak po cijeloj sirini: od (30,28,27) na vrhu do (13,13,13) na dnu, na svakom mjerenom x — naslovnica, Clinica, Odontoiatria i tabak. Dijagonala od 135° je donji desni ugao tamne kartice spustala na boju podloge (11,10,10), pa je rub kartice nestajao. */ .prima__card { display: grid; grid-template-columns: 38.9375rem 1fr; gap: 7.0625rem; align-items: center; padding: 1.25rem; border-radius: .5rem; /* „Sfondo delle schede" sekcije (`--sec-card-bg`) ima prednost pred gradijentom kartice samo kad je popunjena. */ background: var(--sec-card-bg, linear-gradient(180deg, var(--card-from), var(--card-to))); } /* Kartica bez glave je drugi crtez i ima drugi gradijent: VODORAVAN, od (8,53,68) uz lijevi rub do (13,13,13) uz desni, isti na svakom y (04_Prima visita y 3180..3551, Landing pazienti italiani y 2827..3198). */ .prima--bez-glave .prima__card { background: var(--sec-card-bg, linear-gradient(90deg, var(--card-from), var(--card-to))); } .sec--v-dark .prima__card { grid-template-columns: 1fr 38.9375rem; } .sec--v-dark .prima__media { order: 2; } .prima__img { display: block; width: 100%; height: 15.8125rem; border-radius: .5rem; object-fit: cover; } /* Mobilna fotografija dolazi kroz ``; omot ne smije biti redak. */ .prima__media picture { display: block; } /* Naslov kartice je 22 px Regular svuda gdje ga dizajn crta — na desktopu (naslovnica, laboratorio, impianti, prezzi, tabak) i na mobilnom (Mobile HP y 7333). Osnovno pravilo je imalo 24 px, a desktop ga je ispravljao u `layout-b.css`, pa je mobilni ostajao na 24. Razmaci unutar tijela kartice su mjere dizajna, a ne margine odlomka: odlomak je nosio 14 px gore i dolje, pa je tekst kartice bez naslova (tamna varijanta) kretao 14 px nize nego u dizajnu, a razmak do dugmeta bio je slucajnih 14. Odlomci unutar teksta kartice nemaju razmak ni u jednom PDF-u (04_Prima visita: 3353,6 -> 3375,6, tacno korak retka). */ .prima__card-title { margin: 0 0 .484375rem; font-size: 1.375rem; font-weight: 500; } /* 7,75 */ .prima__card-text { font-size: .875rem; line-height: 1.5714; } .prima__card-text p { margin: 0; } /* Podebljani prvi odlomak kartice (04_Prima visita i Landing pazienti italiani: „Dopo il trattamento continuerai…") je Poppins Bold 700. Bez ovoga `strong` dobija „bolder" od roditeljskih 300, dakle 400. */ .prima__card-text strong, .prima__card-text b { font-weight: 700; } /* Razmak od zadnjeg retka teksta do dugmeta, od okvira retka (22) do vrha pilule. Mjereno iz okvira teksta i natpisa dugmeta u PDF-u: svijetla naslovnica, laboratorio, impianti, prezzi 27,8 (sve cetiri iste) tabak modula 35,8 tamna Clinica 25,3 Odontoiatria conservativa 19,8 Stranice pobjeduju tabak. Tamne dvije se razlikuju za 5,5 px, a obje su inace tacno centrirane na karticu, pa zadana vrijednost uzima sredinu (22,6 — polje ima korak 0,1) i svaka od dvije stranice svoju razliku nosi poljem `cta_gap` (+2,7 / -2,8) — ono je upravo za to: ispravka u px u odnosu na zadani polozaj dugmeta, po sekciji. */ .prima__cta { margin-top: calc(1.7375rem + var(--sec-cta-gap, 0px)); } /* 27,8 */ .sec--v-dark .prima__cta { margin-top: calc(1.4125rem + var(--sec-cta-gap, 0px)); } /* 22,6 */ /* ---------- rezervisan prostor za slike, SAMO ZA UREDNIKA ---------- Nastalo je dok Pragma slike jos nije poslala: svako mjesto gdje dizajn ima fotografiju drzalo je svoju visinu i pokazivalo blagi sivi okvir, da se raspored moze usporediti s PDF-om i prije nego slike stignu. Ta je pretpostavka danas pogresna u oba smjera. Slike su posijane (196 trazenih, 186 na sajtu), a nezavisna kontrola je izmjerila da je ono sto ostaje uglavnom mjesto gdje dizajn fotografiju UOPCE NEMA: na `odontoiatria-estetica-dentale` i `riabilitazione-dentale` su te tri kolone cist tekst, a posjetilac je dobijao sivu kutiju 370x275 koju dizajn nikad nije imao. Devet takvih kutija na tri stranice u opsegu 17-32, plus pet na `dentista-in-croazia-turismo-dentale`. Zato cijeli blok od sada stoji pod `.smile-urednik`, kao i sve ostale rezerve u temi (`inc/media.php`, `image_band.php`, `map.php`, `team.php`, `testimonials.php`, `.media-text__media:empty`). Urednik i dalje vidi gdje slika fali; posjetilac vidi stranicu. */ .smile-urednik .image-band__item:not(:has(img))::before, .smile-urednik .services__item:not(:has(img)) .services__media::before, .smile-urednik .scards__card:not(:has(img)) .scards__media::before, .smile-urednik .hub-row:not(:has(.hub-row__img)) .hub-row__media::before, .smile-urednik .team__item:not(:has(img)) .team__photo::before, .smile-urednik .prima__card:not(:has(.prima__img)) .prima__media::before, .smile-urednik .reviews__item:not(:has(img)) .reviews__video::before, .smile-urednik .trust__card:not(:has(img)) .trust__photo::before, .smile-urednik .cta-banner:not(:has(img)) .cta-banner__icon::before, .smile-urednik .map:not(:has(img)) .map__placeholder-ph::before { content: ""; display: block; width: 100%; border-radius: 1.25rem; background: rgba(255, 255, 255, .06); } /* Na ≤1023 držači image_band i hub_rows su 12rem: mobilno.css (M22). */ .smile-urednik .image-band__item:not(:has(img))::before { height: var(--band-h, 25rem); } .smile-urednik .services__item:not(:has(img)) .services__media::before { height: 19.54375rem; } .smile-urednik .scards__card:not(:has(img)) .scards__media::before { height: 17.1875rem; border-radius: .75rem; } .smile-urednik .hub-row:not(:has(.hub-row__img)) .hub-row__media::before { height: 19.5625rem; } .smile-urednik .team__item:not(:has(img)) .team__photo::before { aspect-ratio: 4 / 5; } .smile-urednik .prima__card:not(:has(.prima__img)) .prima__media::before { height: 15.8125rem; border-radius: .5rem; } .smile-urednik .reviews__item:not(:has(img)) .reviews__video::before { height: 11rem; border-radius: 1.25rem 1.25rem 0 0; } .smile-urednik .reviews-cols__col--video .reviews__item:not(:has(img)) .reviews__video::before { height: 27.0625rem; border-radius: 1.25rem; } .smile-urednik .trust__card:not(:has(img)) .trust__photo::before { height: 100%; border-radius: 0; } .smile-urednik .cta-banner:not(:has(img)) .cta-banner__icon::before { width: 3rem; height: 3rem; } /* Kartica trust bez fotografije ne smije rezervisati kolonu: varijanta V1 uopce nema fotografiju, pa se prostor cuva samo u V2. */ .smile-urednik .trust--v1 .trust__photo::before { display: none; } /* ---------- sakrivanje po uredaju ---------- */ .sec--hide-desktop { display: none; } @media (max-width: 1023px) { .sec--hide-mobile { display: none; } /* Sekcija s OBJE oznake je skrivena svuda: bez `:not()` je `display: block` ovdje (ista težina, kasnije u izvoru) pobjeđivao `display: none` iznad i sekcija se na telefonu pojavljivala. */ .sec--hide-desktop:not(.sec--hide-mobile) { display: block; } .media-text--tw, .media-text--tw.media-text--right, .media-text, .video-text, .two-col, .hero-split, .hub-row, .sec__head, .prima__head, .prima__card, .sec--v-dark .prima__card, .blog--with-side { grid-template-columns: 1fr; gap: 1.5rem; } /* Razmak fotografija -> tekst (media_text, video_text, prima_visita) i uvlaku ploče ispod fotografije (columns, hub_rows bez naslova) na ≤1023 smanjuje mobilno.css (M22: 24 -> 16). */ /* Mjere iz dizajna su fiksne u pikselima; na uskom ekranu se puste. */ /* Tekst preko fotografije se na telefonu spusta ISPOD nje: apsolutno pozicioniran bi lezao preko kolona i stisnuo se na cetrdeset px. */ .media-text--over .media-text__body--over { position: static; inset: auto; padding: 1.5rem; border-radius: 1.25rem; } .media-text--over .media-text__media { display: flex; flex-direction: column; gap: 1rem; } .media-text--over .media-text__cols { grid-column: 1; grid-row: auto; } .hub-row__body { height: auto; padding: 1.5rem; } /* Korak linkova i pomak strelice po redu (`links_gap`, `arrow_dx`) su neujednačenosti desktop PDF-a, kao i `links_up` (koji ovdje poništava padding iznad). Na telefonu svi redovi imaju zajedničku mjeru, inače bi strelice petog reda stajale 7 px desno od ostalih. */ .hub-row__body { --hub-links-gap: initial; --hub-arrow-dx: initial; } .hub-row__title { position: static; margin-top: .75rem; } /* Crtež proizvoda (Soluzioni, prvi red) se na uskom ekranu ne upisuje u okvir od 313 px: prikazan je u svom omjeru, bez praznih pojaseva iznad i ispod (nalaz KON-02). */ .hub-row__img--uklopi { height: auto; } .pricing__row { grid-template-columns: 1fr; gap: .25rem; } /* Vodeći razmak naslova grupe (PDF ga ima samo na desktopu, x 229 prema 222) na uskom ekranu se ne crta: svi naslovi grupa i stavke u ravni (FTR4-N3). Omotava ga pricing.php. */ .pricing__lead-sp { display: none; } .reviews-cols__col--video .reviews__poster { height: 14rem; } .post__hero-img, .post__hero--prazan::before { height: 14rem; } .media-text--right .media-text__media, .video-text--right .video-text__media, .sec--v-dark .prima__media { order: 0; } .media-text__img { width: 100%; height: auto; transform: none; } /* Mjere iz dizajna su fiksne u pikselima jer se na 1512 moraju poklopiti s PDF-om. Na uskom ekranu se moraju pustiti, inace stranica dobije horizontalni skrol. */ /* `min-height` se mora pustiti i na okviru SA slikom. Pravilo koje ga postavlja na desktopu (`.media-text__media:has(img)`, tezina 0,1,1) je jace od golog `.media-text__media` (0,1,0), pa je na telefonu okvir zadrzavao desktop visinu (278-418 px) dok se slika skupila na 134-347: ispod fotografije je ostajala crna ili bijela rupa od 63 do 190 px, na svakoj media_text sekciji sa slikom. Zato se ovdje nabrajaju sve tri varijante, iste tezine kao i pravila koja gase. */ /* Za prijavljenog urednika (`.smile-urednik .media-text__media`, 0-2-0) ovaj reset nije bio dovoljan: dopunjen je u mobilno.css (M22). */ .media-text__media, .media-text__media:has(img), .media-text__media:has(video) { width: 100%; min-height: 0; } .smile-urednik .media-text__media:empty::before { height: 12rem; } /* Stupac s odmakom od vrha je na telefonu ispod slike: odmak nema na sta da se odnosi. */ .media-text--vtop > .media-text__body { margin-top: 0; } /* Pomak slike je mjera desktop rasporeda. */ .media-text--pomak.media-text--left .media-text__media, .media-text--pomak.media-text--right .media-text__media { margin-inline: 0; } .media-text--cta-m .media-text__body .btn--cta { display: inline-flex; } /* Mobilne mjere po sekciji (Mobile HP.pdf). */ .media-text--m-lijevo .media-text__body { text-align: left; } .media-text--m-uvod .media-text__body .sec__lead, .media-text--m-uvod .media-text__body .sec__lead span[class*="fs-"] { font-size: var(--mt-m-lead); } .media-text--m-uvod-lh .media-text__body .sec__lead, .media-text--m-uvod-lh .media-text__body .sec__lead span[class*="fs-"] { line-height: var(--mt-m-lead-lh); } .media-text--m-bez-br .media-text__body .sec__title br { display: none; } /* Isto kao kod koraka (vidi pravilo ≤ 767 za `.steps__title`): bez preloma zadnji red ne ostaje jedna riječ („eccellenza clinica e / formazione" na Straumann 768 i 390 px). */ .media-text--m-bez-br .media-text__body .sec__title { text-wrap: pretty; } .media-text--m-lg .media-text__body .sec__lead { margin-bottom: var(--mt-m-lead-gap); } .media-text--m-tezina .media-text__body .sec__title, .media-text--m-tezina .media-text__body .sec__title span[class*="fw-"] { font-weight: var(--mt-m-fw); } .media-text--m-tg .media-text__body .sec__title { margin-bottom: var(--mt-m-title-gap); } /* `.sec` ispred: mobilni reset mreze (`.media-text--tw.media-text--right`, 0,2,0) je jaci od jedne klase, pa je razmak ostajao 24 px kod Olistica. */ .sec .media-text.media-text--m-gap { row-gap: var(--mt-m-gap); } .media-text--m-cta .media-text__body .btn--cta { margin-top: var(--mt-m-cta-gap); } /* Slika punom sirinom ekrana (Straumann na naslovnoj: 430 x 417, bez bocne uvlake). Uvlaka kontejnera je `--m-side`. */ .media-text--m-puna .media-text__media { justify-self: stretch; width: auto; max-width: none; margin-inline: calc(-1 * var(--m-side, 2.25rem)); } .media-text--m-puna .media-text__img { width: 100%; border-radius: 0; } .media-text--m-poz .media-text__img { object-position: var(--mt-m-pos) 50%; } /* Stupac teksta lijevo od margine stranice (polje `m_text_x`, samo ulijevo). Mobile HP crta tekst sekcije Straumann od x 33, a dugme od 36, kao sve ostalo na stranici (Olistico: tekst 36-37). Lijeva uvlaka kontejnera je zato manja za pomak, desna ostaje, dugme se vraća na marginu stranice, a slika punom širinom ostaje od ruba do ruba. */ .sec .media-text.media-text--m-tx { padding-inline-start: calc(var(--m-side) + var(--mt-m-tx)); } .media-text--m-tx .media-text__body .btn--cta { margin-inline-start: calc(-1 * var(--mt-m-tx)); } .media-text--m-tx.media-text--m-puna .media-text__media { margin-inline-start: calc(-1 * (var(--m-side) + var(--mt-m-tx))); } /* Kolone ispod teksta (Diagnosi 3D, Straumann V2): na telefonu je izmedju tijela i prve kolone vec razmak mreze (1,5rem, isti kao slika -> tekst); desktop mjera slika -> kolone (42 / 31 px) bi ga utrostrucila. Naslov kolone ide korakom 22 px kao na desktopu i kao tekst ispod njega. */ .media-text__cols, .media-text--cg .media-text__cols { margin-top: 0; } .media-text__col-title { line-height: 1.375; } /* Uvlake tijela i naslova su mjera desktop stupca. */ .media-text--ti .media-text__body .sec__title, .media-text--ti.media-text--t-right .media-text__body .sec__title { padding-inline: 0; } .media-text--bi .media-text__body :is(.sec__lead, .sec__text), .media-text--bi.media-text--t-right .media-text__body :is(.sec__lead, .sec__text) { padding-inline: 0; } .hero-card { height: auto; min-height: 0; padding: 2rem 1.5rem; } .hero-card__swoosh { display: none; } .cols--cards { gap: 1rem; } .cols--cards .cols__item { padding: 1.5rem; min-height: 0; } .trust--v1, .trust--v2 { grid-template-columns: 1fr; } /* `:last-child` u osnovnom pravilu nosi specificnost 0,3,0, a ovaj reset je imao 0,2,0 — pa je desna kartica V2 na telefonu zadrzavala `padding: 3.75rem`, dakle 120 od 350 px sirine. Nasao Tok 1. */ .trust--v1 .trust__card, .trust--v2 .trust__card, .trust--v2 .trust__card:first-child, .trust--v2 .trust__card:last-child { min-height: 0; padding: 1.5rem; } .trust--v2 .trust__card:first-child { grid-template-columns: 1fr; padding: 0; } .trust--v2 .trust__card:first-child .trust__body { padding: 1.5rem; } .trust--v2 .trust__card:first-child:not(:has(.trust__photo))::after { display: none; } .trust__card:has(.trust__photo) { grid-template-columns: 1fr; } /* Fotografija ide ispod teksta punom širinom. Kadar ima omjer koji ima na telefonu od 430 px (358 × 192 — jedina mobilna širina iz dizajna), a ne stalnu visinu: sa 192 px na tabletu (696 × 192 na 768 px) cover je rezao lice kroz oči (NB-K02). S istim omjerom je rez isti na svakoj širini — lice od čela do brade, kao na telefonu. Ispod 430 px ostaje najmanje 192 px, kao i do sada. `width: 100%`: stavka mreže s omjerom se inače ne rasteže, nego širinu računa iz najmanje visine (192 → 358), pa je kadar ispod 430 px izlazio iz kartice. */ .trust__card:has(.trust__photo) .trust__photo { grid-column: 1; grid-row: 2; width: 100%; height: auto; min-height: 12rem; aspect-ratio: 179 / 96; } .trust__card:has(.trust__photo) .trust__body { grid-column: 1; grid-row: 1; padding: 1.5rem; } /* V1 na mobilnom, iz `Mobile HP.pdf` (430 px; kartice 36..394, y 9985..10150 i 10169..10472). Jedini mobilni dizajn ovog modula. naslov 16 px SemiBold, CENTRIRAN, korak retka 21 (10002,3 → 10023,3), u dva retka u obje kartice. Prvi red okvira retka je na 18 od vrha kartice (font-okvir 17,3 minus pola razlike 22,4 − 21). kartica 1 traka medalja 53..385 × 10070,6..10127,6 (332 × 57): 17 od lijevog i 9 od desnog ruba kartice, 25,6 ispod naslova, 23 do dna. Naslov je centriran u TOM okviru (sredina 219), ne u kartici — pa okvir sadržaja nije simetričan. kartica 2 logotipi u dva reda, prvi 8 ispod naslova; najlijeviji (Garancija) na 57, dakle 21 od ruba; 20 do dna. Naslov je centriran na 215 — simetrično. Prijelom naslova je širina tekstnog okvira iz dizajna, ne ručni `
`: „Certificazioni, garanzie e sicurezza" je 280 px, a s „di" 299; „Premi e riconoscimenti professionali" je 296. Okvir od 290 px lomi oba naslova tačno gdje i dizajn, a tekst ostaje isti kao na desktopu. */ .trust--v1 .trust__card:first-child { padding: 1.125rem .5625rem 1.4375rem 1.0625rem; } /* 18 9 23 17 */ .trust--v1 .trust__card:last-child { padding: 1.125rem 1.3125rem 1.25rem; } /* 18 21 20 */ .trust--v1 .trust__body { gap: 0; } .trust--v1 .trust__card-title { max-width: 18.125rem; margin-inline: auto; text-align: center; line-height: 1.3125; } .trust--v1 .trust__card:first-child .trust__badges { margin-top: 1.6rem; } /* 25,6 */ .trust--v1 .trust__card:last-child .trust__badges { margin-top: .5rem; } /* 8 */ /* Traka medalja (332 px) je u dizajnu cijeli okvir sadržaja prve kartice, pa dijeli sredinu s naslovom (219). Kad je kartica šira od 358 (tablet), okvir sadržaja naraste, a traka je ostajala uz lijevi rub: vlas 53..385, medalje 65..383 u kartici 36..732 (TRUST-R6-01). Centrirana u okviru sadržaja ponovo dijeli sredinu s naslovom. Na 430 px okvir je tačno 332, a na užem je traka šira od okvira — tada se automatske margine računaju kao 0 i traka ostaje gdje je i bila. */ .trust--v1 .trust__card:first-child .trust__badges { margin-inline: auto; } /* Mobilni koraci nemaju dizajn; ostaju tačno kakvi su bili prije nego što je desktop dobio mjere po sekciji (broj s okvirom 1, 37 px iznad liste, 21 između koraka, 12 ispod naslova). Polja sekcije vrijede za desktop. */ .steps { row-gap: 1.3125rem; margin-top: 2.3125rem; } .steps__item { padding-top: 4.5rem; } .steps__item::before { font-size: 3.5rem; line-height: 1; } .steps__title { margin-bottom: .75rem; } .sec--steps > .sec__inner > .sec__title + .sec__lead { margin-top: 0; } /* Uvlaka i širina koraka su mjere desktop mreže; u jednom stupcu korak ide punom širinom, a broj drugog reda All on 4/6 nema red s kojim bi se poravnao. */ .steps__item--mjera { margin-left: 0; } .steps__item--mjera[style*="--k-bx"]::before { left: 0; } .steps__item--mjera[style*="--k-w"] > * { width: auto; } .sec--steps .sec__inner--1170 .steps__item:nth-child(n+4)::before { top: 0; } /* Prelom koji PDF ima usred rečenice samo zbog širine desktop stupca (Corone: „…anche le tue / aspettative…"). U jednom stupcu bi ostavio kratak red od tri riječi; razmak ispred `
` drži riječi razdvojene. */ .steps__text .br-d { display: none; } .image-band__item:not(:has(img))::before { height: 12rem; } .prima__card { padding: 1rem; } .compare__table { display: block; overflow-x: auto; } .cols--2, .cols--3, .cols--4, .media-text__cols, .tiles--2, .tiles--3, .tiles--4, .info-cards, .reviews-cols, .reviews--cols3, .reviews--google, .reviews--facebook, .reviews--video, .reviews--preview, .services, .qcards, .scards--2, .scards--3, .pay--2, .pay--3, .pay--4, .blog__grid--2, .blog__grid--3, .map__cols--2, .map__cols--3, .map__cols--4, .dist--2, .trust--v1, .trust--v2, .sec--v-light_2 .steps, .sec--v-light_3x2 .steps, .sec--v-light_4 .steps, .sec--v-dark_2 .steps, .sec--v-dark_3 .steps, .sec--v-dark_4 .steps, .image-band--2 { grid-template-columns: 1fr; } .sec--question-cards > .sec__inner { grid-template-columns: 1fr; } .qcards__item { min-height: 0; padding: 1.25rem 1.5rem; } .scards--3 { grid-template-columns: 1fr; } .scards__card { min-height: 0; } .services { grid-template-columns: 1fr; } /* Ovdje su stajala dva MRTVA pravila: `.services__title { position: static; margin: 1rem 0 .75rem }` i `.services__links { min-height: 0 }`. `layout-a.css` ima isti upit (red 562), istu specificnost i ucitava se poslije (`functions.php:48`), pa u cijelom opsegu pobjeduju njegova pravila — na 390 i na 1023 px izmjereno je `position: absolute`, `margin: 0` i `min-height: 50px`. Komentar u `layout-a.css:664` tu odluku i objasnjava; ovdje su ostale samo deklaracije koje nista ne rade. Nasla sedma smjena nezavisne kontrole. */ /* Numeri: nadjačano u mobilno.css (M07, jedan red). */ .numbers--3, .numbers--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-left: 0; } .team--grid, .team--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero__text { padding-block: 6rem 3rem; } /* Potpis pacijenta je na siroko apsolutno pozicioniran po mjeri iz dizajna; na telefonu se vraca u tok, ispod teksta heroja, jer bi inace lezao preko njega. */ .hero__quote { position: static; right: auto; top: auto; margin-top: 1.5rem; max-width: 100%; text-align: left; } .hero__title { font-size: 2.25rem; } /* Prored i razmak do dugmeta iz polja su mjere desktop dizajna (npr. 45 px na naslovu koji je ovdje 30 px, ili dugme 106 px ispod teksta). Na telefonu vrijedi omjer i stalni razmak od 24 px. */ .hero--foto h1.hero__title { line-height: .975; } .hero--foto .hero__cta { margin-top: 1.5rem; } /* Prijelomi naslova i podnaslova su iz dizajna za 1512 px. Na telefonu tekst tece sam, inace ostaju usamljene rijeci („corona", „ponte", „adatto") — H-N3. Predlosci ispisuju razmak ispred
, pa se rijeci ne spajaju. */ .hero--foto .hero__title br, .hero--foto .hero__subtitle br, .hero-card__title br, .hero-card__subtitle br { display: none; } .hero--foto .hero__eyebrow { left: 0; } /* Mobilni kadar: glavni motiv je na desnoj strani fotografije (lice), a `cover` na uskom ekranu ostavlja samo sredinu. Polje `m_pos`. */ .hero--foto .hero__media .smile-media__img { object-position: var(--hero-m-pos, 50%) 50%; } /* H-N6: na telefonu tekst heroja zauzima cijelu sirinu i lezi preko lica (na desktopu stoji na tamnom lijevom dijelu fotografije, a lice je desno). Mobilnog dizajna za ove stranice nema; kao na mobilnom heroju naslovnice (`Mobile HP.pdf`, tamni preljev pri dnu), fotografija se na telefonu tamni preljevom — ovdje odozgo, iza teksta, i iscezava prema dnu. Desktop se ne mijenja. */ .hero--foto .hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* Jačina iz polja `m_shade` (hero_foto.php): svaka tačka ima svoju varijablu i tačnu dosadašnju rezervu, pa prazno polje daje isti piksel. */ background: linear-gradient(to bottom, rgba(0, 0, 0, var(--hero-m-shade-1, .6)) 0%, rgba(0, 0, 0, var(--hero-m-shade-2, .5)) 55%, rgba(0, 0, 0, var(--hero-m-shade-3, .2)) 85%, rgba(0, 0, 0, 0) 100%); } /* Zaglavlje na telefonu lebdi nad herojem i visoko je `--m-zaglavlje` (76 px, header.css; do 24. 9. 2026 135 px). Tekst je pocinjao na 96 px od vrha heroja, pa je na stranicama gdje heroj pocinje na vrhu (No Bone, Denti fissi) znak No Bone lezao preko znaka klinike. Heroj zato na telefonu pocinje na vrhu stranice (bez gornjeg razmaka sekcije), a tekst 24 px ispod zaglavlja. */ .sec.sec--hero-foto { padding-top: 0; } .hero--foto .hero__text { padding-top: calc(var(--m-zaglavlje, 8.4375rem) + 1.5rem); } /* zaglavlje + 24 */ /* Nova cijena je na desktopu 112 px; na 390 px se „€" lomio u svoj red. */ .hero__offer-new { font-size: 4rem; white-space: nowrap; } .hero-split__title { font-size: 2.25rem; } .hero-split__left { padding-left: 0; padding-top: 0; } .hero-split__right { padding-top: 0; } /* U2 (korisnik, 30. 9. 2026) — položaj teksta heroja NA TELEFONU (polja „… (telefono)"). Pravila vrijede samo uz klasu `--mx-*`, `--my-*`, `--mta-*`, `--m-min-h`; prazno polje = današnji telefon. Heroj naslovne je u `layout-a.css` (njegova mobilna pravila su tamo). Foto heroj, vodoravno: nadjačava `align` (desktop), koji bez media upita važi i ovdje. Tekst je na telefonu gotovo pune širine, pa se položaj vidi najviše kroz poravnanje redova (`--mta-*`, zadano = položaj). */ .hero--foto.hero--mx-left :is(.hero__text, .hero__offer) { margin-inline: 0 auto; } .hero--foto.hero--mx-center :is(.hero__text, .hero__offer) { margin-inline: auto; } .hero--foto.hero--mx-right :is(.hero__text, .hero__offer) { margin-inline: auto 0; } .hero--foto.hero--mta-left :is(.hero__text, .hero__quote) { text-align: left; } .hero--foto.hero--mta-center :is(.hero__text, .hero__quote) { text-align: center; } .hero--foto.hero--mta-right :is(.hero__text, .hero__quote) { text-align: right; } .hero--foto.hero--mta-left .hero__offer { align-items: flex-start; } .hero--foto.hero--mta-center .hero__offer { align-items: center; } .hero--foto.hero--mta-right .hero__offer { align-items: flex-end; } .hero--foto.hero--mta-left .hero__logo img { margin-inline: 0 auto; } .hero--foto.hero--mta-center .hero__logo img { margin-inline: auto; } .hero--foto.hero--mta-right .hero__logo img { margin-inline: auto 0; } /* Foto heroj, okomito: heroj je i na telefonu visok kao na desktopu (npr. 801 px), pa tekst i ponuda idu zajedno u sredinu ili na dno. Gore ostaje zaštita zaglavlje + 24, kao danas. */ .hero--foto:is(.hero--my-middle, .hero--my-bottom) > .hero__inner { display: flex; flex-direction: column; min-height: inherit; padding-block: calc(var(--m-zaglavlje, 8.4375rem) + 1.5rem) 3rem; } .hero--foto.hero--my-middle > .hero__inner { justify-content: center; } .hero--foto.hero--my-bottom > .hero__inner { justify-content: flex-end; } .hero--foto:is(.hero--my-middle, .hero--my-bottom) :is(.hero__text, .hero__offer) { width: 100%; } .hero--foto:is(.hero--my-middle, .hero--my-bottom) .hero__text { padding-block: 0; } .hero--foto:is(.hero--my-middle, .hero--my-bottom) .hero__text + .hero__offer { margin-top: 3rem; } /* Preljev prati tekst (iste tačke i jačina iz polja `m_shade`): dolje — tamno dolje; u sredini — tamno u sredini, blaže gore i dolje. */ .hero--foto.hero--my-bottom .hero__media::after { background: linear-gradient(to top, rgba(0, 0, 0, var(--hero-m-shade-1, .6)) 0%, rgba(0, 0, 0, var(--hero-m-shade-2, .5)) 55%, rgba(0, 0, 0, var(--hero-m-shade-3, .2)) 85%, rgba(0, 0, 0, 0) 100%); } .hero--foto.hero--my-middle .hero__media::after { background: linear-gradient(to bottom, rgba(0, 0, 0, var(--hero-m-shade-3, .2)) 0%, rgba(0, 0, 0, var(--hero-m-shade-1, .6)) 50%, rgba(0, 0, 0, var(--hero-m-shade-3, .2)) 100%); } /* Kartica: na telefonu je visoka koliko tekst; okomiti položaj radi uz najmanju visinu (polje `m_min_h`, rem). */ .hero-card.hero-card--m-min-h { min-height: var(--hc-m-min-h); } .hero-card--mx-left { align-items: flex-start; } .hero-card--mx-center { align-items: center; } .hero-card--mx-right { align-items: flex-end; } .hero-card--my-top { justify-content: flex-start; } .hero-card--my-middle { justify-content: center; } .hero-card--my-bottom { justify-content: flex-end; } .hero-card--mta-left .hero-card__text { text-align: left; } .hero-card--mta-center .hero-card__text { text-align: center; } .hero-card--mta-right .hero-card__text { text-align: right; } .hero-card--mta-left .hero-card__subtitle { margin-inline: 0 auto; } .hero-card--mta-right .hero-card__subtitle { margin-inline: auto 0; } /* Podijeljeni heroj: na telefonu jedan stupac (naslov pa tekst). */ .hero-split.hero-split--m-min-h { min-height: var(--hs-m-min-h); } .hero-split--mx-center { justify-items: center; } .hero-split--mx-right { justify-items: end; } .hero-split:is(.hero-split--mx-center, .hero-split--mx-right) .hero-split__right { width: min(100%, var(--hs-text-w, 26.6875rem)); } .hero-split--my-middle { align-content: center; } .hero-split--my-bottom { align-content: end; } .hero-split--mta-left :is(.hero-split__left, .hero-split__right) { text-align: left; } .hero-split--mta-center :is(.hero-split__left, .hero-split__right) { text-align: center; } .hero-split--mta-right :is(.hero-split__left, .hero-split__right) { text-align: right; } .sec__title, .prima__title { font-size: 1.875rem; } .cta-banner { flex-direction: column; align-items: flex-start; } /* Prelomi u traci su izmjereni za 1512 px; na uskom ekranu tekst teče sam, inače se raspada u redove od jedne riječi („fasi e", „fin") — NB-K07. */ .cta-banner__text br { display: none; } /* Veliki znak (`cta-banner--segno`, baner „Scopri le soluzioni"): mobilnog dizajna nema, pa slaže kao ostale trake — znak, tekst, dugme jedno ispod drugog. Znak 120 px (omjer kao na desktopu), tekst 20 / 27 kao na desktopu, dugme iste širine 208. Na tabletu prelom ostaje: dvije rečenice, svaka u svom redu (obje stanu). Na telefonu vidi ≤767. */ .cta-banner--segno .cta-banner__icon { line-height: 0; } .cta-banner--segno .cta-banner__icon img { width: 7.5rem; height: auto; } /* 120 */ .cta-banner.cta-banner--segno .cta-banner__text { font-size: 1.25rem; line-height: 1.6875rem; } .cta-banner.cta-banner--segno .cta-banner__text br { display: inline; } .cta-banner.cta-banner--segno .cta-banner__btn.btn--sm { width: 13rem; /* 208 */ padding-left: 1.35625rem; /* 21,7 */ gap: 0; } } /* Traka na telefonu: bočna uvlaka 16 px (kao kartica prve posjete), ne 36. Na 390 px je okvir 318 px, pa je s 36 + 36 za sadržaj ostajalo 246 px, a pilula „Registra la tua esperienza" (Testimonianze) u jednom redu treba 267 px — natpis se lomio u dva reda (GL-N02, IH-R4-02). S 16 ostaje 286. */ @media (max-width: 767px) { .cta-banner { padding-inline: 1rem; } /* Veliki znak na telefonu: svaka rečenica u svom redu ostavljala je „pagina." / „mjestu." samu u redu (286 px). Prelom zato teče kao u ostalim trakama, a `pretty` ne ostavlja riječ samu na kraju (radi samo kad je `
` skriven). */ .cta-banner.cta-banner--segno .cta-banner__text { text-wrap: pretty; } .cta-banner.cta-banner--segno .cta-banner__text br { display: none; } } /* Ručni prelomi naslova koraka, naslova dvokolone i naslova kartice prve posjete su mjera desktop stupca (npr. ~415 px kod koraka 3×2). Na telefonu naslov ide preko cijele širine i prelom je ostavljao riječ samu u redu: „Materiali e caratteristiche / del / restauro" (CD-K01), „Un laboratorio attrezzato / per / lavori complessi" (LAB-M01), „Il primo passo è / comprendere / il tuo caso". Te stranice nemaju mobilni dizajn, pa naslov teče sam. Predlošci (`steps.php`, `two_col_text.php`, `prima_visita.php`) ispisuju razmak ispred
, pa se riječi ne spoje. Tablet (768–1023) zadržava prelom: stupac je tamo 696 px i prvi red uvijek stane. */ @media (max-width: 767px) { .steps__title br, .two-col__title br, .prima__title br { display: none; } /* Bez ručnog preloma zadnji red zna ostati jedna riječ („comprendere il tuo / caso" na Clinica 390 px). `pretty` pomjera riječ iz pretposljednjeg reda kad preglednik nađe bolji raspored (ne uvijek: „comfort durante la / procedura" ostaje); naslov bez usamljene riječi u zadnjem redu se ne mijenja. */ .steps__title, .two-col__title, .prima__title { text-wrap: pretty; } /* Naslov media_text bez ručnog preloma (`m_title_br`): `pretty` gleda samo zadnji red, pa je riječ ostajala sama u SREDNJEM redu („Una visione clinica / diventata / organizzazione", „Dalla diagnosi 3D alla / pianificazione / dell’intervento", „Approccio olistico, / integrato e / conservativo" na 360–430 px, PR6-N05). `balance` ujednačava redove: „Una visione / clinica diventata / organizzazione". Broj redova i visina naslova ostaju isti (provjereno na svih 32 stranice, 360/390/430), a na naslovnoj na 430 px (Mobile HP) se ne mijenja nijedan red. */ .media-text--m-bez-br .media-text__body .sec__title { text-wrap: balance; } /* Naslov kartica rješenja s prelomom samo za desktop (`m_title_br`, PR6b-N03). Prelom stoji iza „con" („Nel centro di Opatija, con
parcheggio a un minuto"), pa je na 360 px prvi red pucao prije njega i „con" je ostajala sama u redu. Bez preloma i s `balance`: „Nel centro di Opatija, / con parcheggio / a un minuto"; na 390 i 430 px redovi su isti kao s prelomom. Naslovna (Mobile HP) polje nema i ne mijenja se. */ .scards-wrap--m-bez-br > .sec__title br, .scards-wrap--m-bez-br > .sec__head > .sec__title br { display: none; } .scards-wrap--m-bez-br > .sec__title, .scards-wrap--m-bez-br > .sec__head > .sec__title { text-wrap: balance; } } @media (max-width: 600px) { /* Numeri: nadjačano u mobilno.css (M07, jedan red). */ .numbers--3, .numbers--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team--grid, .team--cards { grid-template-columns: 1fr; } .pricing__row { flex-direction: column; gap: .25rem; } .pricing__price { text-align: left; } } /* ---------- clanak bloga ---------- */ /* Mjere iz 06a_Blog interno.pdf: fotografija puna sirina do y 860, naslov 22 px SemiBold verzalom na x 221 (kontejner 1070), tekst 14 px. */ .post__hero { position: relative; } .post__hero-img { display: block; width: 100%; height: 53.75rem; object-fit: cover; } .post__hero--prazan::before { content: ""; display: block; height: 53.75rem; background: rgba(255, 255, 255, .06); } .post__title { margin: 0 0 1.4375rem; font-size: 1.375rem; font-weight: 600; line-height: 1.2727; text-transform: uppercase; } .post__meta { margin: 0 0 .75rem; font-size: .875rem; opacity: .7; } .post__meta a { color: var(--c-accent); text-decoration: none; } .post__media { margin: 1.5rem auto 2rem; } .post__img { display: block; width: 100%; height: 25rem; border-radius: 1.25rem; object-fit: cover; } .post .sec__text--long h2 { font-size: 1.375rem; margin: 1.5em 0 .5em; font-weight: 600; } .post .sec__text--long blockquote { margin: 1.5em 0; padding-left: 1.25rem; border-left: 3px solid var(--c-accent); font-size: 1.125rem; } @media (max-width: 1023px) { .post__img { height: 14rem; } } /* ---------- klase iz uredivaca ---------- */ /* Klase su UDVOJENE (.fs-38.fs-38) namjerno: tako imaju specificnost dvije klase i tuku pravila layouta oblika `.cols--t22 .cols__title`, koja bi ih inace nadjacala bez obzira na redoslijed. Bez toga je fw-200 na naslovu kolone renderovao 400. */ /* Ove klase stoje NA KRAJU datoteke namjerno. smile_heading() ih prenosi sa spana na sam naslov kad span obuhvata cijeli tekst, pa moraju biti jace od velicine koju naslovu daje njegov layout — a kod jednake specificnosti odlucuje redoslijed u izvoru. Prored je izmjeren iz svih 46 PDF-ova: za svaku velicinu uzet je najcesci razmak izmedu uzastopnih redaka istog bloka. Dizajn ne koristi jedan omjer nego fiksni prored po ulozi teksta. Velicine koje u PDF-ovima nemaju uzorak (32, 35, 45, 62) dobijaju 1,15 i oznacene su. */ .fw-200.fw-200 { font-weight: 200; } .fw-300.fw-300 { font-weight: 300; } .fw-400.fw-400 { font-weight: 400; } .fw-500.fw-500 { font-weight: 500; } .fw-600.fw-600 { font-weight: 600; } .fw-700.fw-700 { font-weight: 700; } .fs-12.fs-12 { font-size: .75rem; line-height: 1.1667; } /* 14 px, 1 uzorak */ .fs-13.fs-13 { font-size: .8125rem; line-height: 1.0000; } .fs-14.fs-14 { font-size: .875rem; line-height: 1.5714; } /* U odlomcima na ≤1023 .fs-15/16/18/20 daju 14/22: mobilno.css (M08). */ .fs-16.fs-16 { font-size: 1rem; line-height: 1.2500; } .fs-20.fs-20 { font-size: 1.25rem; line-height: 1.2500; } .fs-22.fs-22 { font-size: 1.375rem; line-height: 1.2727; } .fs-23.fs-23 { font-size: 1.4375rem; line-height: 1.1739; } .fs-24.fs-24 { font-size: 1.5rem; line-height: 1.2500; } .fs-25.fs-25 { font-size: 1.5625rem; line-height: 1.0400; } .fs-30.fs-30 { font-size: 1.875rem; line-height: 1.1667; } .fs-32.fs-32 { font-size: 2rem; line-height: 1.15; } /* bez uzorka u PDF-ovima */ .fs-35.fs-35 { font-size: 2.1875rem; line-height: 1.15; } /* bez uzorka u PDF-ovima */ .fs-38.fs-38 { font-size: 2.375rem; line-height: 0.9474; } .fs-40.fs-40 { font-size: 2.5rem; line-height: 1.1250; } .fs-45.fs-45 { font-size: 2.8125rem; line-height: 1.15; } /* bez uzorka u PDF-ovima */ .fs-51.fs-51 { font-size: 3.1875rem; line-height: 1.0588; } .fs-62.fs-62 { font-size: 3.875rem; line-height: 1.15; } /* bez uzorka u PDF-ovima */ .c-accent.c-accent { color: var(--c-accent); } .c-green.c-green { color: var(--c-green); } .c-white.c-white { color: var(--c-white); } .c-dark.c-dark { color: var(--c-bg); } /* Naslov kolone s vlastitom velicinom nije verzal. */ .cols__title.fs-22, .cols__title.fs-23, .cols__title.fs-24, .cols__title.fs-25 { text-transform: none; letter-spacing: 0; } /* Mobilna skala za klase uredivaca. Ovaj blok MORA biti posljednji u datoteci. Klase velicine su udvojene (.fs-40.fs-40) da bi tukle pravila layouta, pa su time pobijedile i mobilnu skalu iz ranijeg @media bloka: naslov od 40 px ostajao je 40 px i na 390 px, a duga rijec u njemu gurala stranicu 63 px preko ruba. Manje velicine se ne diraju: 14 do 25 px su citljive i na telefonu. */ @media (max-width: 1023px) { .fs-30.fs-30 { font-size: 1.5rem; } .fs-32.fs-32 { font-size: 1.5rem; } .fs-35.fs-35 { font-size: 1.625rem; } /* Prored 1,25 (35 na 28): desktopov omjer 0,9474 (36 na 38) je na telefonu davao 26,5 px, dakle prored UŽI od samog slova, pa su silazni potezi dvorednih naslova dodirivali akcente sljedećeg reda (MHP-18). Pravilo: prored nikad manji od veličine slova. */ .fs-38.fs-38 { font-size: 1.75rem; line-height: 1.25; } .fs-40.fs-40 { font-size: 1.875rem; } .fs-45.fs-45 { font-size: 2rem; } .fs-51.fs-51 { font-size: 2.25rem; } .fs-62.fs-62 { font-size: 2.5rem; } } /* Telefon (Mobile HP, okvir 430): naslov sekcije od 38 px je u mobilnom dizajnu 25 px ExtraLight s korakom 35 — „Dicono di noi" (y 7581,5), „I nostri servizi" (4308,8), „Da dove vuoi iniziare?" (6863,6); to su SVI naslovi koji na desktopu nose fs-38, a u Mobile HP nemaju vlastitu mjeru. Naslovi koji je imaju (Straumann 30/35, Approccio 35/45, „Ogni caso" 40) nose je u polju sekcije `m_title_size` / `m_title_lh` ili u pravilu svog rasporeda, a ta pravila imaju veću težinu od ovog (MHP-18, R-08). */ @media (max-width: 767px) { .fs-38.fs-38 { font-size: 1.5625rem; line-height: 1.4; } } /* Okvir na mjestu videa koji nije isporucen. Bez njega bi sekcija izgubila visinu i raspored se ne bi mogao usporediti s PDF-om dok video ne stigne; s praznim