/* ========================================================================== Mobilni standard — Modifiche_01 (Pragma, 30. 9. 2026), grupa F. Učitava se POSLJEDNJI (functions.php, smile_assets(): 'mobilno' iza 'clanak'), pa kod jednake specifičnosti pobjeđuje pravila rasporeda iz sections / layout-a / layout-b / kolone. SVE je pod @media (max-width: 1023px) (i jedan uži blok ≤767 unutar toga; M31 ima još blokove 360–1023, ≤359,98 i 768–1023, svi unutar ≤1023). Od 1024 px naviše, pa i na 1512 (PDF 1:1), ovaj fajl ne mijenja ni piksel. Nadjačana pravila (na ≤1023 više ne odlučuju; ostaju za desktop i istoriju): M08 layout-a.css .scards__text 16/20, uvod usluga 16/22, Prima visita 16/22 i 16/20, mobilna kartica tima 16/20; sections.css .sec__lead (20/25 Medium), .reviews__text (16/20), .fs-16.fs-16 / .fs-20.fs-20 (klase uređivača u odlomcima) M09 layout-a.css natpisi traka usluga 10 px M07 sections.css Numeri: ≤1023 ikona iznad, 601–1023 tri stupca, ≤600 dva stupca M15 sections.css .scards margin-top (polje „cards_gap" nema mobilnu mjeru) M22 sections.css .smile-urednik .media-text__media (min-height okvira), držači za urednika (313 / 423 / 464), razmak mreže 1.5rem (media_text, video_text, prima_visita), uvlaka ploče u columns (s fotografijom) i u hub_rows (redovi bez naslova, /clinica/) M26 sections.css .hub-row__img visina 313 kad red ima mobilnu sliku M31 blog (`blog_grid`): sections.css `.blog--with-side .blog__side` (order 2 = kategorije ispod članaka), `.blog__cats`, `.blog__title` (12 / 10); layout-a.css `.blog__img` (visina 19.5rem = 312); na ≤1023 je umjesto bočne liste harmonika `details.blog__m-kat` (izvor.pdf, oko/rad/blog-mobile/PLAN.md) Podnožje (14/22 na telefonu) NIJE ovdje: radi ga grupa B u footer.css. ========================================================================== */ @media (max-width: 1023px) { /* ---------- M08: tekući tekst svuda 14 / 22 ---------- Odlomci, uvodi i tekst kartica (Pragma, slike 09, 16–19: „all paragraph text on mobile is the same size"). Ne diraju se: naslovi, podnaslovi (.media-text__sub), dugmad, natpisi traka, brojke, cijene, citat i cijena u heroju. Prored je bez jedinice (1,5714 = 22 na 14), da naslov unutar kontejnera (h4 u „two_col_text") zadrži svoj korak. Uvod s mobilnom mjerom iz polja („Dimensione dell'introduzione su mobile", klasa .media-text--m-uvod) i dalje slijedi polje. Uvod kartice bloga (.blog__excerpt) je IZUZET (M31, O6): mobilni PDF bloga ga ima 16 / 22 Light, a to je bazno pravilo iz sections.css. Specifičnost 0-4-0 do 0-5-1 tuče .fs-16.fs-16 (0-2-0) i pravila rasporeda (do 0-3-0, raniji fajl). */ .sec.sec :is(.sec__lead:not(.media-text--m-uvod *), .sec__text, .sec__head-intro, .scards__text, .trust__card-lead, .trust__card-text, .reviews__text, .prima__card-text, .prima__aside, .team__m-lead, .team__m-text, .cols__text, .two-col__text, .steps__text, .info-cards__text, .dist__intro, .dist__list, .pay__text, .media-text__acc-text, .cta-banner__opis, .compare__table), .sec.sec :is(.sec__lead:not(.media-text--m-uvod *), .sec__text, .sec__head-intro, .scards__text, .trust__card-lead, .trust__card-text, .reviews__text, .prima__card-text, .prima__aside, .team__m-lead, .team__m-text, .cols__text, .two-col__text, .steps__text, .info-cards__text, .dist__intro, .dist__list, .pay__text, .media-text__acc-text, .cta-banner__opis, .compare__table) :is(p, li, dd, dt, td, th, blockquote):not(.media-text__sub), .sec.sec :is(.sec__lead:not(.media-text--m-uvod *), .sec__text, .sec__head-intro, .scards__text, .trust__card-lead, .trust__card-text, .reviews__text, .prima__card-text, .prima__aside, .team__m-lead, .team__m-text, .cols__text, .two-col__text, .steps__text, .info-cards__text, .dist__intro, .dist__list, .pay__text, .media-text__acc-text, .cta-banner__opis, .compare__table) :is(.fs-15, .fs-16, .fs-18, .fs-20) { font-size: .875rem; /* 14 */ line-height: 1.5714; /* 22 */ } /* Podebljani uvod: SemiBold 600 (bio Bold 700). Iste je veličine kao tekst ispod, ali Bold je širi i taman, pa „izgleda veći" (slike 11, 17). */ .sec.sec :is(.sec__lead, .sec__text, .sec__head-intro, .scards__text, .trust__card-text, .prima__card-text, .prima__aside, .cols__text, .two-col__text, .steps__text, .info-cards__text, .pay__text) :is(strong, b, [class*="fw-7"], [class*="fw-8"], [class*="fw-9"]), .sec.sec :is(p.sec__lead, .sec__text p, .scards__text p, .cols__text p)[class*="fw-7"] { font-weight: 600; } /* ---------- M22: fotografija -> tekst ---------- 1) Greška samo za urednika: `.smile-urednik .media-text__media` (sections.css, 0-2-0) je jače od mobilnog reseta okvira (najviše 0-1-1), pa je prijavljenom ostajala desktop visina okvira: medijan 150 px, do 316 px ispod fotografije (Pragma gleda prijavljena). 2) Prazni držači za urednika: desktop visina (313 / 423 / 464) -> 12rem. 3) Razmak foto -> tekst za sve 24 -> 16 px (Mobile HP ima 9–17). Sekcije s izmjerenim mobilnim razmakom (polje m_gap, naslovna) ga zadržavaju. Prva posjeta: 24 (tamna) i 33,85 (svijetla, Mobile HP) -> 16 (PLAN_ISPRAVKE, M22). */ .smile-urednik .media-text__media { width: 100%; min-height: 0; } .smile-urednik .image-band__item:not(:has(img))::before, .smile-urednik .hub-row:not(:has(.hub-row__img)) .hub-row__media::before { height: 12rem; } .sec .media-text:not(.media-text--m-gap), .sec .video-text { row-gap: 1rem; } .sec .prima__card, .sec.sec--v-light .prima__card { row-gap: 1rem; } /* 4) Tekst u zasebnoj ploči ispod fotografije (PLAN_ISPRAVKE, M22): fotografija -> prvi red teksta najviše 24 px. columns s fotografijom (Conservativa #6, Gengivectomia #5): bilo 16 razmaka + 24 uvlake = 40 -> 8 + 16 = 24. Uvlaka 16 važi za sve ploče te liste, da ploče ostanu iste; bočna i donja ostaju 24. hub_rows bez naslova reda (/clinica/): bilo 24 + 24 + 4,5 = 52,5 -> 8 + 11 + 4,5 = 23,5; ploča ostaje simetrična (krug strelice u sredini), a fotografija i njen link se čitaju kao jedan red (razmak do sljedećeg reda je 20). Redovi s naslovom (/soluzioni/) imaju naslov 12 px ispod fotografije i ostaju; redovi BEZ fotografije (stranice zahvale, 404: ploča s četiri linka) ostaju kakvi jesu. */ .cols--cards > .cols__item--photo + .cols__item { margin-top: -.5rem; } .cols--cards:has(> .cols__item--photo) > .cols__item:not(.cols__item--photo) { padding-top: 1rem; } .hub-row:has(.hub-row__img):not(:has(.hub-row__title)) { row-gap: .5rem; } .hub-row:has(.hub-row__img):not(:has(.hub-row__title)) .hub-row__body { padding-block: .6875rem; } /* ---------- M15: naslov -> kartice rješenja najviše 32 px ---------- Polje „Distanza titolo → schede" (cards_gap) nema mobilnu varijantu, pa desktop mjera (Clinica 68,2, Pazienti 74,3) pada i na telefon. Specifičnost 0-2-0 tuče .scards (0-1-0). */ .sec--solution-cards .scards { margin-top: min(var(--scards-mt, 2rem), 2rem); } /* ---------- M09: natpisi u trakama kartica usluga 12 px ---------- Trake s 4 natpisa (Chirurgia orale, Odontoiatria generale) u 2 × 2: s 12 px u jednom redu „Apicectomia" izlazi iz svog stupca na 360–430. */ .services__links .chip { font-size: .75rem; line-height: 1.2; } .services__links:has(> li:nth-child(4)) { flex-wrap: wrap; padding: .25rem; } .services__links:has(> li:nth-child(4)) > li { flex: 1 1 50%; min-width: 0; } .services__links:has(> li:nth-child(4)) .chip { padding: .4rem .25rem; } /* ---------- M07: Numeri — sve tri stavke u JEDNOM redu, ikona lijevo ---------- Kao desktop (slika 08: „all on one line"). Veličine prate širinu liste: opis = (širina − 16) / 27, broj 1,5 ×, ikona 2,2 × opisa; gornje granice su desktop mjere (16 / 35 / 71). Rezerva ispod je za preglednike bez `cqi` (Safari < 16): računski staje od 360 px. */ .numbers--2, .numbers--3, .numbers--4 { grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: .5rem; row-gap: 1.5rem; margin-left: 0; } .numbers--2 { grid-template-columns: repeat(2, auto); } .numbers--4 { grid-template-columns: repeat(4, auto); } .numbers__item { grid-template-columns: 1.625rem auto; grid-template-rows: auto auto 1fr; column-gap: .375rem; } .numbers__icon { grid-row: 1 / span 3; } .numbers__icon img { width: 1.625rem; height: 1.625rem; } .numbers__num { padding-top: 0; font-size: 1.0625rem; line-height: 1.1; } .numbers__label { font-size: .6875rem; line-height: 1.3; } /* Rezerva ispod 360 px (iPhone SE 1. gen. ostaje na iOS 15, bez `cqi`): s mjerama iznad red je na 320 px izlazio 17 px. */ @media (max-width: 359px) { .numbers__item { grid-template-columns: 1.375rem auto; column-gap: .25rem; } .numbers__icon img { width: 1.375rem; height: 1.375rem; } .numbers__num { font-size: .9375rem; } .numbers__label { font-size: .625rem; } } @supports (width: 1cqi) { .numbers--2, .numbers--3, .numbers--4 { container-type: inline-size; } .numbers__item { --nx: calc((100cqi - 1rem) / 27); grid-template-columns: min(calc(var(--nx) * 2.2), 4.4375rem) auto; column-gap: min(calc(var(--nx) * .55), 1.5625rem); } .numbers__icon img { width: min(calc(var(--nx) * 2.2), 4.4375rem); height: min(calc(var(--nx) * 2.2), 4.4375rem); } .numbers__num { font-size: min(calc(var(--nx) * 1.5), 2.1875rem); } .numbers__label { font-size: min(var(--nx), 1rem); } } } @media (max-width: 767px) { /* ---------- M26: posebna fotografija reda huba za telefon ---------- hub_rows.php daje `hub-row__media--m` samo kad red ima i mobilnu fotografiju („Immagine su mobile"). Ona vrijedi na TELEFONU (≤767, isti prag kao u hub_rows.php) i prikazuje se cijela, u svojim proporcijama: urednik vidi tačno ono što je postavio. Tablet 768–1023 zadržava desktop fotografiju u okviru 313 — uspravna mobilna bi tamo bila široka ~950 px. Bez mobilne fotografije okvir ostaje 313. */ .hub-row__media--m .hub-row__img { height: auto; } /* M07: traka brojki koristi širinu ekrana do 20 px od ruba (umjesto 36): tek tako opis na 390 px ostaje 12,4 px, a ne 11. */ .sec--numbers > .sec__inner { padding-inline: 1.25rem; } } /* ---------- M31: mobilni blog (izvor.pdf 430) ---------- Harmonika „Categorie" iznad članaka, ploča s gradijentom i kategorije u dvije kolone. Položaj slova je kompenzovan za Blink (baseline = vrh + floor(pola proreda) + round(1,05 f), crta se na cijelom px): PLAN.md § 2. */ @media (max-width: 1023px) { /* O2: asimetrična kolona 19,5 / 29,5 samo za blog; naslov sekcije i prazna poruka ostaju na --m-side */ .sec--blog-grid .blog { margin-left: calc(19.5px - var(--m-side)); margin-right: calc(29.5px - var(--m-side)); } .sec--blog-grid .blog__main > .sec__empty { margin-left: calc(var(--m-side) - 19.5px); } .blog--with-side { row-gap: 0; } .blog--with-side .blog__side { order: 0; } /* O15: desktop h2 vizuelno sakriven (čitač ga zadržava) */ .blog__side-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .blog__cats { display: none; } /* Bez harmonike (predložak je ne ispiše kad nema nijedne kategorije) nestaje cijeli bočni stupac, da čitač ne najavi vizuelno sakriven naslov iza kojeg nema ničega */ .blog__side:not(:has(.blog__m-kat)) { display: none; } .blog__m-kat { display: block; margin: 0 -18.5px 0 -7.5px; padding: 0 18.5px; border-radius: 10px; } .blog__m-kat[open] { padding-bottom: 33px; margin-bottom: 24.736px; background: linear-gradient(90deg, #0d0d0d 0%, #093645 100%); } .blog__m-kat-naslov { display: block; list-style: none; cursor: pointer; margin: 0 -18.5px; padding: 8.75px 18.5px 10.586px 22px; font-weight: 400; font-size: 16px; line-height: 22.4px; color: var(--c-accent); border-radius: 10px; } .blog__m-kat-naslov::-webkit-details-marker { display: none; } .blog__m-kat-naslov::marker { content: ""; } .blog__m-kat-naslov:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; } .blog__m-kat-ikona { display: inline-block; margin-left: 5.208px; transform: translate(.99px, -.37px) rotate(90deg); } .blog__m-kat[open] .blog__m-kat-ikona { transform: translateY(2px); } .blog__m-kat-lista { display: grid; grid-template-columns: minmax(0, 136fr) minmax(168px, 177.5fr); column-gap: clamp(8px, calc(100% - 313.5px), 56.5px); margin: 7.264px 0 0; padding: 0; list-style: none; font-weight: 300; font-size: 14px; line-height: 15px; color: var(--c-white); } .blog__m-kat-lista a { display: block; color: inherit; text-decoration: none; } .blog__m-kat-kraj { display: block; } /* Boja iz polja „Colore dell'elenco delle categorie" bira se za pozadinu sekcije; ploča je uvijek tamna, pa boja prelazi na nju samo uz tamnu temu (uz svijetlu bi tamna boja bila nevidljiva) */ .sec--dark .bl-kat-c .blog__m-kat-lista { color: var(--bl-kat-c); } .sec .bl-kat-fw .blog__m-kat-lista { font-weight: var(--bl-kat-fw); } .blog__m-kat-lista .is-active > a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 1px; } .sec--blog-grid .blog__grid { row-gap: 29.936px; } .sec--blog-grid .blog__title { margin: 15.164px 0 10.9px; padding-left: .5px; } .sec--blog-grid .blog__excerpt { padding-left: 2.5px; } /* O11: isječak fotografije na cijelom ≤1023 (i tablet), bez rupe na razlomljenim širinama. Dva pravila, ne jedna lista: preglednik bez :has() odbaci cijelu listu, pa bi i fotografija ostala bez omjera */ .sec--blog-grid .blog__img { height: auto; aspect-ratio: 381 / 312; object-position: 50% 0; } .sec--blog-grid .blog__item:not(:has(img)) .blog__media::before { height: auto; aspect-ratio: 381 / 312; } } @media (hover: hover) and (max-width: 1023px) { .blog__m-kat-lista a:hover { color: var(--c-accent); } } /* Dvije kolone kategorija: ujednačeni model za bilo koji broj stavki, doslovni PDF (O7) kad ih je tačno 6 */ @media (min-width: 360px) and (max-width: 1023px) { .blog__m-kat-stavka { padding: 14.5px 0; border-bottom: 1px solid var(--c-white); } .blog__m-kat-stavka:nth-child(-n+2) { padding-top: 0; } .blog__m-kat-stavka:nth-child(odd):nth-last-child(-n+2), .blog__m-kat-stavka:last-child { border-bottom: 0; padding-bottom: 0; } .blog__m-kat-stavka:nth-child(odd) a { padding-left: 3.5px; } .blog__m-kat-stavka:first-child a { padding-left: 2.5px; } /* nowrap samo desno: tamo je 360 tijesno („Odontoiatria generale e" 166,2 u 168); lijevo ima rezerve, a preimenovan duži naziv tamo se prelomi umjesto da pređe preko razmaka u desnu kolonu */ .blog__m-kat-lista:has(> li:nth-child(6):last-child) > .blog__m-kat-stavka:nth-child(even) a { white-space: nowrap; } .blog__m-kat-lista:has(> li:nth-child(6):last-child) > .blog__m-kat-stavka:nth-child(-n+2) { padding-bottom: 14px; } .blog__m-kat-lista:has(> li:nth-child(6):last-child) > .blog__m-kat-stavka:nth-child(3), .blog__m-kat-lista:has(> li:nth-child(6):last-child) > .blog__m-kat-stavka:nth-child(4) { padding: 15px 0 21px; } .blog__m-kat-lista:has(> li:nth-child(6):last-child) > .blog__m-kat-stavka:nth-child(5) { padding-top: 7.1px; line-height: 16px; } .blog__m-kat-lista:has(> li:nth-child(6):last-child) > .blog__m-kat-stavka:nth-child(6) { padding-top: 12px; } } /* O16: ispod 360 jedna kolona (nema dizajna). 359.98, ne 359: razlomljena širina (zum) ne smije pasti između blokova */ @media (max-width: 359.98px) { .blog__m-kat-lista { grid-template-columns: minmax(0, 1fr); } .blog__m-kat-stavka { padding: 12px 0; border-bottom: 1px solid var(--c-white); } .blog__m-kat-stavka:first-child { padding-top: 0; } .blog__m-kat-stavka:last-child { padding-bottom: 0; border-bottom: 0; } .blog__m-kat-lista a { padding-left: 3.5px; } } /* O10: tablet, članci u dvije kolone */ @media (min-width: 768px) and (max-width: 1023px) { .sec--blog-grid .blog__grid--2, .sec--blog-grid .blog__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; } } /* ---------- Cjenovnik: cijena ne smije izaći preko ekrana ---------- Završna provjera Modifiche02 (30. 9. 2026): na 360 px „A partire da € 260 / arcata" (25 px, nowrap) bio je širi od stupca i gurao red 8 px preko ekrana. Uvod cijene se sada smije prelomiti, iznos ostaje u komadu. Gdje red staje (≥ 390 px), izgled je isti. */ @media (max-width: 1023px) { .pricing__price { white-space: normal; } .pricing__amount { white-space: nowrap; } } /* ========================================================================== M3: heroj s fotografijom NA TELEFONU, raspored iz `NOB_Sito web_DEF.pdf` (Pragma, 8 stranica 430 × 645). Plan: oko/rad/hero-mobile/PLAN.md, S01–S12. Ovo je ZADANI raspored svakog `hero_foto` na ≤ 1023 px (bez upisa u bazu): gornja grupa znak proizvoda, natpis, naslov: centrirano, pri vrhu, odmah ispod menija (ili na `m_text_top`); donja grupa tekst, dugme, ponuda, potpis: lijevo (x 36), `m_bottom` iznad dna heroja. Klase (hero_foto.php): .hero--m-centrirano `m_layout` = centro (str. 7, 8): tekst ide gore, sve je centrirano, dugme je centrirano pri dnu .hero--m-blok `m_layout` = blocco: kao do sada (jedan blok, polja U2 „… (telefono)"); ovaj blok ga ne dira .hero--m-bez-natpisa `m_hide_eyebrow` .hero--m-bez-potpisa `m_hide_quote` Varijable (px, iz polja m_*; prazno = zadano u pravilu): --hero-m-top --hero-m-bottom --hero-m-eyebrow-gap --hero-m-title-gap --hero-m-sub-w --hero-m-sub-fs --hero-m-sub-lh --hero-m-cta-gap --hero-m-offer-x --hero-m-offer-cta-x --hero-m-offer-new-gap --hero-m-offer-cta-gap Mjere su iz PDF-a (Poppins: uspon 1,05, pad 0,35; okvir reda = prored, vrh okvira = osnovna linija − (prored / 2 + 0,35 × veličina)). Cijeli prored u jednorednim redovima (natpis, stara i nova cijena, natpis dugmeta): preglednik zaokružuje uspon i pad fonta na cijeli px, a pola ostatka proreda (prored − uspon − pad) Chromium zaokružuje naniže; kod neparnog ostatka osnovna linija tako ispada 0,5–0,9 px iznad PDF-a (§ 10 A). Ovi redovi zato imaju najbliži veći prored s PARNIM ostatkom (pola ostatka je cijeli broj i ništa se ne zaokružuje, u bilo kojem pregledniku), a razlika do proreda iz PDF-a se oduzme od margine s obje strane: središte i susjedi ostaju gdje su bili, osnovna linija je ≤ 0,2 px od PDF-a. Desktop ≥ 1024 se ne mijenja: sve je pod media upitom ispod. Jedino pravilo ≥ 1024 (`br.br-m` u naslovu) je u sections.css. ========================================================================== */ @media (max-width: 1023px) { /* ---------- S01: visina ---------- PDF: 645 na 430 = 150vw (2 : 3, kao i sve fotografije). Na tabletu bi 150vw bilo 1152–1534 px, pa je granica visina ekrana, ali ne ispod 640 (telefon položeno). `min-height`: sadržaj uvijek može produžiti heroj, pa se grupe ne mogu preklopiti. Red s `vh` je rezerva za Safari < 15.4. Nadjačava `.hero--h-801` itd. (0-1-0, bez media upita). */ .hero.hero--foto:not(.hero--m-blok) { min-height: min(150vw, max(100vh, 40rem)); min-height: min(150vw, max(100svh, 40rem)); } /* ---------- S02: mreža i dvije grupe ---------- `.hero__text` nestaje kao kutija (`display: contents`; običan div bez uloge, pa ga ne pogađa stara greška pristupačnosti), a njegova djeca te `.hero__offer` i `.hero__quote` postaju redovi jedne mreže: 1 znak 2 natpis 3 naslov 4 tekst (samo „centro") 5 RAZMAK (1fr) 6 tekst 7 dugme ili poruka uredniku 8 ponuda 9 potpis Prazan red je visok 0. Razmak među grupama je najmanje 24 px; heroj raste ako sadržaj ne stane. Gore: upisana mjera `m_text_top` važi doslovno; prazno = odmah ispod menija (`--m-zaglavlje`, 75,92). */ .hero--foto:not(.hero--m-blok) > .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(1.5rem, 1fr) auto auto auto auto; row-gap: 0; min-height: inherit; padding-top: var(--hero-m-top, var(--m-zaglavlje, 4.745rem)); padding-bottom: var(--hero-m-bottom, 3.75rem); /* 60 (str. 5, 6) */ } .hero--foto:not(.hero--m-blok) .hero__text { display: contents; } .hero--foto:not(.hero--m-blok) :is(.hero__logo, .hero__eyebrow, .hero__title, .hero__subtitle, .hero__cta, .hero__offer, .hero__quote, .sec__empty) { grid-column: 1; } .hero--foto:not(.hero--m-blok) .hero__logo { grid-row: 1; } .hero--foto:not(.hero--m-blok) .hero__eyebrow { grid-row: 2; } .hero--foto:not(.hero--m-blok) .hero__title { grid-row: 3; } .hero--foto:not(.hero--m-blok) .hero__subtitle { grid-row: 6; } /* Poruka uredniku „Pulsante senza destinazione" stoji umjesto dugmeta. */ .hero--foto:not(.hero--m-blok) :is(.hero__cta, .hero__text > .sec__empty) { grid-row: 7; } .hero--foto:not(.hero--m-blok) .hero__offer { grid-row: 8; } .hero--foto:not(.hero--m-blok) .hero__quote { grid-row: 9; } /* ---------- S03: gornja grupa, centrirano ---------- `text-align` ide na SVAKI element, ne na `.hero__text`: `align`/`ta` desktopa (`.hero--center .hero__text`…) nemaju media upit i nasljeđuju se i kroz `display: contents`. */ .hero--foto:not(.hero--m-blok) :is(.hero__logo, .hero__eyebrow, .hero__title) { text-align: center; } /* Znak proizvoda (No Bone, str. 2): 120,2 × 28,5 (PDF 28,45), sredina 215; do okvira prvog reda naslova 22,6. Izvor slike se ne mijenja. */ .hero--foto:not(.hero--m-blok) .hero__logo { margin: 0 0 1.4125rem; } .hero--foto:not(.hero--m-blok) .hero__logo img { height: 1.78125rem; margin-inline: auto; } /* Natpis: 13 Bold verzal, prored 16; do okvira naslova 17,55 (str. 4–6), str. 3 8,55 (polje). Prored 17 s marginama −0,5 = okvir od 16 (uspon 14 + pad 5, ostatak −2; vidi zaglavlje bloka). */ .hero--foto:not(.hero--m-blok) .hero__eyebrow { left: 0; margin: -.03125rem 0 calc(var(--hero-m-eyebrow-gap, 1.096875rem) - .03125rem); /* 17,55 */ font-size: .8125rem; /* 13 */ line-height: 1.0625rem; /* 17 (PDF 16) */ } /* Naslov: 30 Bold, korak 29 na svih 8 stranica. Okvir je min(358, širina − 32), centriran: na 430 358 od x 36, na 360 328, na 768 358 u sredini. JEDNO pravilo s `h1`: zasebno `.hero__title { margin-inline }` gubi od `h1.hero__title { margin }` (0-3-0 prema 0-3-1) i ne djeluje nikad. Polja desktopa (`title_lh`, `title_gap`) se ovdje ne čitaju; razmak do donje grupe je red 5. */ .hero--foto:not(.hero--m-blok) h1.hero__title { margin-block: 0; margin-inline: max(-1.25rem, calc((100% - 22.375rem) / 2)); /* okvir min(358, širina − 32), centriran */ font-size: 1.875rem; /* 30 */ line-height: 1.8125rem; /* 29 */ } .hero--foto:not(.hero--m-blok) .hero__title [class*="fs-"] { line-height: inherit; } /* ---------- S04: prelomi naslova ---------- Na str. 2–7 PDF lomi naslov tačno gdje i desktop (`
` iz polja), pa se na telefonu više ne gase (H-N3 je vrijedio za jedan blok preko cijele širine). `br.br-d` = samo desktop, `br.br-m` = samo telefon (str. 1 i 8; `.br-m` na ≥ 1024 gasi sections.css). */ .hero--foto:not(.hero--m-blok) .hero__title br { display: revert; } .hero--foto:not(.hero--m-blok) .hero__title br.br-d { display: none; } /* ---------- S05: donja grupa, tekst ---------- 15 Regular, korak 16 (str. 3–8); str. 1 12 / 14 (polja). Prelomi teksta = širina okvira (SPEC § 5; u Chromiumu su širine redova iste kao u PDF-u): str. 1, 3, 4, 6 zajedno 172,25–179,64 → zadano 176; str. 5 181,46–191,86 → polje 186; centrirano (str. 7, 8) 261,81–289,24 → 275. `
` u tekstu ostaju skriveni (sections.css). `.sec` + udvojena klasa (0-5-1): jače od `.hero--foto.hero--sub-lh p.hero__subtitle.hero__subtitle` (0-4-1, bez media upita) i od `.fs-22.fs-22`. */ .sec .hero--foto:not(.hero--m-blok) p.hero__subtitle.hero__subtitle { justify-self: start; max-width: var(--hero-m-sub-w, 11rem); /* 176 */ margin: 0; font-size: var(--hero-m-sub-fs, .9375rem); /* 15 */ line-height: var(--hero-m-sub-lh, 1rem); /* 16 */ font-weight: 400; text-align: left; } .sec .hero--foto:not(.hero--m-blok) .hero__subtitle [class*="fs-"] { font-size: inherit; line-height: inherit; } /* ---------- S06: dugme ---------- Ista pilula 275,45 × 36,92 (components.css). U mreži bi se raširila, zato `justify-self`. Tekst → pilula 23,25 (str. 5, 6); str. 3 16,25, str. 4 21,25 (polje). */ .hero--foto:not(.hero--m-blok) .hero__cta { justify-self: start; margin-top: var(--hero-m-cta-gap, 1.453125rem); /* 23,25 */ } /* Natpis dugmeta 16 / 22,4 (components.css): uspon 17 + pad 6, ostatak −0,6, pa je osnovna linija bila 0,7 px iznad PDF-a na svih 6 stranica s dugmetom. Prored 23 (ostatak 0); natpis je centriran u piluli, pa središte ostaje isto, a pilula 36,92 se ne mijenja. */ .hero--foto:not(.hero--m-blok) .hero__cta .btn__label { line-height: 1.4375rem; } /* 23 */ /* ---------- S07: ponuda (str. 1, 2) ---------- 22 Light / 14 Bold / 42 Black / 14 Bold, x 36 (str. 2: blok +5, poziv −3, polja). `margin` poništava `.hero--center .hero__offer` (auto), koji nema media upit. Desktop `offer_cta_x` / `offer_cta_gap` se ovdje ne čitaju. */ .hero--foto:not(.hero--m-blok) .hero__offer { justify-self: start; align-items: flex-start; max-width: none; margin: .64375rem 0 0; /* tekst → stara cijena 10,3 */ position: relative; left: var(--hero-m-offer-x, 0px); } /* Stara i nova cijena: cijeli prored s parnim ostatkom (zaglavlje bloka): stara 27 (uspon 23 + pad 8, ostatak −4) umjesto 26,4, margine −0,3; nova 43 (44 + 15, ostatak −16) umjesto 42, margine −0,5. */ .hero--foto:not(.hero--m-blok) .hero__offer-old { margin-block: -.01875rem; font-size: 1.375rem; line-height: 1.6875rem; } /* 22 / 27 (PDF 26,4) */ .hero--foto:not(.hero--m-blok) .hero__offer-name { margin-top: .2625rem; font-size: .875rem; line-height: 1.05rem; } /* 4,2 · 14 / 16,8 */ /* Natpis cijene (HR v05 „Promotivna cijena:", polje `offer_price_label`): veličina i prored naziva (14 / 16,8), rez stare cijene (Light). Razmak naziv → cijena (9,8, polje `m_offer_new_gap`) ostaje iznad natpisa, a natpis i cijena idu zajedno (natpis → okvir cijene 4). */ .hero--foto:not(.hero--m-blok) .hero__offer-label { margin: var(--hero-m-offer-new-gap, .6125rem) 0 0; font-size: .875rem; line-height: 1.05rem; } .hero--foto:not(.hero--m-blok) .hero__offer-label + .hero__offer-new { margin-top: .25rem; } .hero--foto:not(.hero--m-blok) .hero__offer-new { margin-top: calc(var(--hero-m-offer-new-gap, .6125rem) - .03125rem); /* 9,8 */ margin-bottom: -.03125rem; font-size: 2.625rem; /* 42 */ line-height: 2.6875rem; /* 43 (PDF 42) */ } .hero--foto:not(.hero--m-blok) .hero__offer-cta.btn { margin-top: var(--hero-m-offer-cta-gap, 1.0875rem); /* 17,4 */ left: var(--hero-m-offer-cta-x, 0px); font-size: .875rem; /* 14 */ line-height: 1.2; } /* Natpis poziva ima svoj prored (okvir 19,6 umjesto 16,8): bez ovoga je cijela ponuda stajala 2,8 px previsoko. */ .hero--foto:not(.hero--m-blok) .hero__offer-cta.btn .btn__label { line-height: inherit; } /* S07b: crta stare cijene je u PDF-u 1 px. Okvir `` (područje sadržaja, osnovna linija − uspon 23) počinje na 409,83 (str. 1), pa je crta na 0,735 em = 16,17: 426,0–426,5 (str. 1) i 431,0–431,5 (str. 2), isto kao PDF (O18; prije ispravke proreda je okvir bio na 409,13, a crta na 0,767 em). */ .hero--foto:not(.hero--m-blok) .hero__offer-old s { background-position: 0 .735em; background-size: 100% 1px; } .hero--foto:not(.hero--m-blok) .hero__quote { margin-top: 1rem; text-align: left; } /* ---------- S08: varijanta „centro" (str. 7, 8) ---------- */ .hero--foto.hero--m-centrirano .hero__subtitle { grid-row: 4; } .sec .hero--foto.hero--m-centrirano p.hero__subtitle.hero__subtitle { justify-self: center; max-width: var(--hero-m-sub-w, 17.1875rem); /* 275 */ margin-top: var(--hero-m-title-gap, 1rem); /* 16 (str. 7 15,75; str. 8 20,75) */ text-align: center; } .hero--foto.hero--m-centrirano .hero__cta { justify-self: center; margin-top: 0; } .hero--foto.hero--m-centrirano .hero__offer { justify-self: center; align-items: center; } .hero--foto.hero--m-centrirano .hero__quote { text-align: center; } /* ---------- S09: sakrivanje na telefonu (svi rasporedi) ---------- */ .hero--foto.hero--m-bez-natpisa .hero__eyebrow { display: none; } /* str. 8: PDF bez natpisa */ .hero--foto.hero--m-bez-potpisa .hero__quote { display: none; } /* str. 2: PDF bez potpisa */ /* ---------- S10: trobojka (str. 7), PDF-ov oblik ---------- `zastavica_it_str7.svg` iz PDF-a (viewBox 147,307 × 147,844, tri putanje odrezane na stranicu), desno 0 / dolje 0 (`.hero__ugao`), skalirana s min(1, širina / 430): na 430 x 282,69–430, y 497,16–645. Desktop crtež (211 × 221) u mjerilu nije PDF (crvena i zelena površina −8 %). Desktop pravilo u sections.css ostaje. */ .hero--foto:not(.hero--m-blok) .hero__ugao--flag-it { width: min(9.2067rem, 34.2574vw); /* 147,31 na 430 */ height: min(9.24025rem, 34.3824vw); /* 147,84 na 430 */ background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22147.307%22 height=%22147.844%22 viewBox=%220 0 147.307 147.844%22 overflow=%22hidden%22%3E%3Cpath d=%22M0.000 151.325 C9.752 151.427 143.480 154.569 147.458 151.510 C151.431 148.451 147.849 6.548 147.277 0.000 C137.892 20.572 20.598 143.291 0.000 151.325%22 fill=%22%23ffffff%22/%3E%3Cpath d=%22M147.277 0.000 C143.787 7.651 125.371 29.431 102.554 54.185 L149.286 100.916 C149.096 58.418 147.626 3.997 147.277 0.000%22 fill=%22%23c13844%22/%3E%3Cpath d=%22M51.069 107.416 C27.812 130.277 7.499 148.401 0.000 151.325 C5.842 151.387 56.172 152.539 96.449 152.795 L51.069 107.416%22 fill=%22%23169952%22/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; } /* ---------- S11: preljev ---------- Tekst je i gore i dolje: tamno uz oba ruba, sredina čista. Jačina je iz `m_shade` (iste varijable kao do sada; prazno = 60, kao prije). PDF nema sloj preko fotografije: stranica s fotografijom iz dizajna ima upisano `m_shade` 0, pa su sve tačke prozirne. */ .hero--foto:not(.hero--m-blok) .hero__media::after { background: linear-gradient(to bottom, rgba(0, 0, 0, var(--hero-m-shade-1, .6)) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, var(--hero-m-shade-2, .5)) 100%); } /* ---------- S12: uglovi i kadar slike / videa za telefon ---------- PDF: donji uglovi su oštri, a fotografija je sidrena gore. Na telefonu je slika 2 : 3 u okviru 2 : 3 (bez reza); na tabletu ostaje gornji dio. Video dobija isti rez, da kadar ne skoči kad krene (O25). */ .hero--foto:not(.hero--m-blok) .hero__media { border-radius: 0; } .hero--foto:not(.hero--m-blok) :is(.hero__m-img, .hero__m-video) { object-position: 50% 0; } }