/* ========================================================================== zd-typography.css — globalni tipografski sistem „Modern Clean" Zlatiborski dom Pairing: Montserrat (display / naslovi) + Inter (body / UI) OVAJ FAJL SE UČITAVA NA SVIM STRANICAMA — i na 114 novih (.zd-v2) i na 161 legacy Mobirise stranici. Na legacy stranicama je jedini custom CSS, pa mora biti samodovoljan: sam definiše tokene i sam gasi Mobirise fontove. Mora da stoji POSLE assets/mobirise/css/mbr-additional.css, jer se oslanja na redosled kaskade (ista specifičnost, kasnije pravilo pobeđuje) umesto na !important. ———————————————————————————————————————————————————————————————————————— PRAVILO BR. 1 — NIKAD `* { font-family }`. Sajt isporučuje četiri ikonska fonta koji rade preko font-family: MobiriseIcons assets/web/assets/mobirise-icons/ Moririse2 assets/web/assets/mobirise-icons2/ mobirise-icons-bold assets/web/assets/mobirise-icons-bold/ Socicon assets/socicon/ plus .mbr-arrow-up-icon::before { font-family: serif } u theme/css/style.css, gde je „›" glif a ne tekst. Univerzalni selektor bi sve to pretvorio u prazne kvadrate. Zato se override radi isključivo nabrojanim selektorima. ========================================================================== */ /* ========================================================================== 1. @font-face — self-hosted, varijabilni, subsetovani Generisano sa scripts/build-fonts.py; ne menjati ručno. Osa težine je isečena (Montserrat 400–700, Inter 400–600), a glifovi svedeni na Basic Latin + Latin-1 + Latin Extended-A. unicode-range je izračunat iz stvarnog cmap-a svakog fajla, pa nijedan kodni raspon nije proglašen dvaput — ext fajl se ne povlači zbog običnog ASCII teksta. Ukupno 133 KB u 6 fajlova; tipična srpska stranica povlači 86 KB — uspravni latin + latin-ext obe porodice. Montserrat Italic (46,8 KB) se dohvata samo na stranicama sa editorijalnim citatom. Inter Italic ne postoji: vidi komentar u scripts/build-fonts.py. ========================================================================== */ @font-face{ font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/zd-montserrat-latin.woff2') format('woff2-variations'); unicode-range: U+0020-007E,U+00A0-00AC,U+00AE-00FF,U+0102,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0304,U+0308,U+0329,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; } @font-face{ font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/zd-montserrat-latin-ext.woff2') format('woff2-variations'); unicode-range: U+0100-0101,U+0103-0130,U+0132-0151,U+0154-017F,U+2020; } @font-face{ font-family: 'Montserrat'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('../fonts/zd-montserrat-latin-italic.woff2') format('woff2-variations'); unicode-range: U+0020-007E,U+00A0-00AC,U+00AE-00FF,U+0102,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0304,U+0308,U+0329,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; } @font-face{ font-family: 'Montserrat'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('../fonts/zd-montserrat-latin-ext-italic.woff2') format('woff2-variations'); unicode-range: U+0100-0101,U+0103-0130,U+0132-0151,U+0154-017F,U+2020; } @font-face{ font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/zd-inter-latin.woff2') format('woff2-variations'); unicode-range: U+0020-007E,U+00A0-00AC,U+00AE-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0304,U+0308,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF; } @font-face{ font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/zd-inter-latin-ext.woff2') format('woff2-variations'); unicode-range: U+0100-0130,U+0132-0148,U+014A-0151,U+0154-017F,U+2020; } /* ========================================================================== 2. TOKENI Ovde, a ne u zd-foundation.css, jer legacy stranice ne učitavaju foundation. ========================================================================== */ :root{ /* Fallback nizovi su namerno kratki i sistemski: dok se woff2 ne učita (font-display: swap), tekst se crta lokalnim groteskom, ne serifom — razlika u širini je mala pa je CLS zanemarljiv. */ --zd-font-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --zd-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; /* Dekorativni „potpis" (.zd-kc__sign, .zd-salon__script). Montserrat Italic je koso geometrijsko slovo i ne čita se kao rukopis, pa ta dva mesta zadržavaju kurzivnu Georgiju — sistemski font, bez mrežnog troška. */ --zd-font-script: Georgia, 'Times New Roman', Times, serif; /* Stari naziv; 60 pravila u zd-home/keramika/doors/product ga još koristi. Ostaje kao alias da migracija ne mora da bude „sve odjednom". */ --zd-font-text: var(--zd-font-body); /* --- težine --------------------------------------------------------- Montserrat je geometrijski grotesk: na 400 je na velikim veličinama tanak i „prazan", pa je standardni naslov 600. 800/900 se ne koriste — osa je i isečena na 700. */ --zd-fw-display-light: 500; /* lakši display, veliki hero tekst */ --zd-fw-display: 600; /* standardni premium naslov */ --zd-fw-display-strong: 700; /* samo jak naglasak */ --zd-fw-body: 400; /* tekući tekst */ --zd-fw-ui: 500; /* navigacija, labele, chips */ --zd-fw-cta: 600; /* dugmad, CTA */ /* --- tracking -------------------------------------------------------- Montserrat je širi od Cinzela: na velikim veličinama traži negativan tracking da naslov ne bi „curio", a na sitnim verzalnim labelama pozitivan da se slova ne slepe. */ --zd-ls-display: -.02em; --zd-ls-heading: -.01em; --zd-ls-body: 0; --zd-ls-eyebrow: .14em; } /* ========================================================================== 3. OSNOVA — važi i za legacy i za .zd-v2 ========================================================================== */ body{ font-family: var(--zd-font-body); font-weight: var(--zd-fw-body); letter-spacing: var(--zd-ls-body); /* Inter ima veliki x-height; bez ovoga izgleda krupnije od Cinzela na istoj px vrednosti. `optical sizing` drži sitan tekst čitljivim. */ font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Inter ovde ide do 600, a podrazumevano traži 700. Bez ovoga browser sme da domalja sintetički bold preko najtežeg reza — razmazano slovo na ekranima bez visoke gustine. */ font-synthesis-weight: none; } /* Naslovni elementi bez klase. Specifičnost (0,0,1) — namerno niska, da je svaka komponentna klasa može pregaziti. */ h1, h2, h3, h4, h5, h6{ font-family: var(--zd-font-display); font-weight: var(--zd-fw-display); letter-spacing: var(--zd-ls-heading); } /* Elementi koji nasleđivanje ne pokriva (form kontrole imaju sopstveni podrazumevani font u svakom browseru). */ input, select, textarea, button, optgroup{ font-family: inherit; } /* ========================================================================== 4. LEGACY MOBIRISE OVERRIDE mbr-additional.css postavlja: body -> Gloock (font koji se nigde ne učitava, pa je sav netipizovan tekst padao na podrazumevani serif browsera — to je usput ispravljeno) .display-1/2/4/5/7 -> 'Cinzel', serif .form-control -> 'Cinzel', serif `.display-N` nije semantička klasa: display-4 nosi i

i

i i . Zato se mapiranje NE radi po display-N nego u dva koraka: 4a) sve display-N klase -> body font (Inter), 4b) zatim se naslovnim KLASAMA vrati display font (Montserrat). Oba koraka su specifičnosti (0,1,0), pa odlučuje redosled u ovom fajlu. ========================================================================== */ /* --- 4a. sve što Mobirise tipizuje ide na Inter ------------------------- */ .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .display-7, .form-control, .btn, .nav-link, .dropdown-item, .mbr-text, .mbr-desc, .item-title, .list, .copyright, .mbr-plan-price, .mbr-plan-subtitle, .mbr-plan-price-desc{ font-family: var(--zd-font-body); } /* Mobirise nije postavljao težinu na .display-* — nasleđivala se sa body (400) ili sa h1–h6 (bootstrap-reboot: 500). Inter na 400 je tačan ton za tekući tekst; navigacija i dugmad traže 500/600 (dole). */ .mbr-text, .list, .copyright, .mbr-desc{ font-weight: var(--zd-fw-body); letter-spacing: var(--zd-ls-body); } .nav-link, .dropdown-item{ font-weight: var(--zd-fw-ui); letter-spacing: 0; } .btn{ font-weight: var(--zd-fw-cta); letter-spacing: .01em; } .form-control{ font-weight: var(--zd-fw-body); letter-spacing: 0; } /* Mobirise duplira font na placeholderu preko prefiksiranog selektora; moderni ekvivalent pokriva sve browsere koje sajt cilja. */ .form-control::placeholder{ font-family: var(--zd-font-body); font-weight: var(--zd-fw-body); letter-spacing: 0; } /* --- 4b. naslovne klase se vraćaju na Montserrat ----------------------- */ .mbr-section-title, .mbr-section-subtitle, .card-title, .list-title, .mbr-gallery-title, .mbr-plan-title, .catalog_title{ font-family: var(--zd-font-display); font-weight: var(--zd-fw-display); letter-spacing: var(--zd-ls-heading); } /* --- 4c. tracking po veličini ------------------------------------------ mbr-additional je Cinzelu davao +.02em na display-1 (verzalni serif traži vazduh) i -.01em na sitnim klasama. Montserrat je obrnut slučaj: velike veličine traže zbijanje, sitne neutralan razmak. */ .display-1{ letter-spacing: var(--zd-ls-display); } .display-2{ letter-spacing: var(--zd-ls-heading); } .display-4, .display-5, .display-7{ letter-spacing: 0; } /* Hero naslov na legacy stranicama (h1.mbr-section-title.display-1) je na 3.25rem; Montserrat 600 na toj veličini nosi dovoljno, 700 bi bio vikanje. */ .display-1.mbr-section-title{ font-weight: var(--zd-fw-display); } /* Mobirise „bold" modifikator. */ .mbr-bold{ font-weight: var(--zd-fw-display-strong); } /* --- 4d. .item-title NIJE pouzdano naslov ------------------------------- Revizija svih 161 legacy stranice: od 1392
, 317 (23%) ne sadrži naslov nego CEO blok specifikacije proizvoda — uređivanjem u Mobirise-u je tekst upadao u isti element:
BALI BLUE 100X100
Naziv kolekcije: Bali
Klasa: I klasa
← ovo NIJE naslov … Da je cela klasa otišla na Montserrat 600, te specifikacije bi se renderovale kao podebljani naslovi. Zato .item-title ostaje na body fontu, a display font dobija samo unutar njega — naziv proizvoda je u njemu u 1391 od 1392 slučaja. */ .item-title strong{ font-family: var(--zd-font-display); font-weight: var(--zd-fw-display); letter-spacing: var(--zd-ls-heading); } /* --- 4e. u tekućem tekstu -------------------------------------- Inter je ovde varijabilan sa osom 400–600, pa podrazumevanih 700 za pada van opsega. Eksplicitna vrednost sprečava da browser posegne za sintetičkim boldom (razmazano slovo na 1x ekranu). */ .mbr-text strong, .mbr-text b, .list strong, .list b, .mbr-desc strong{ font-weight: var(--zd-fw-cta); } /* --- 4f. legacy hero naslov -------------------------------------------- Cinzel nema prave male kurente: njegovi minuskulni glifovi su kapitele, pa je

bali

na sajtu izgledalo kao „BALI". Montserrat crta stvarne male kurente, pa bi 121 legacy hero naslov odjednom postao „bali" / „marmi" — a izvor je mešan (116 „Prvo veliko", 5 sve malo). text-transform vraća zatečeni izgled i izjednačava svih 121 stranicu, bez ijedne izmene u tekstu stranice. */ .display-1.mbr-section-title{ text-transform: uppercase; letter-spacing: .005em; } /* ========================================================================== 5. ŠTA SE NAMERNO NE DIRA - ikonski fontovi (vidi zaglavlje) — nijedan selektor ovde ih ne dodiruje; - .mbr-iconfont, .mbr-iconfont-btn — nose MobiriseIcons/Moririse2; - .mbr-arrow-up-icon::before { font-family: serif } — glif „›"; - .form-asterisk { font-family: initial } — glif „*"; - logo i svi / elementi — grafika, ne tekst; - .display-3 i .display-6 nemaju pravilo u mbr-additional, ali su nabrojani gore radi potpunosti ako se ikad pojave u markupu. ========================================================================== */