/* ========================================================================== VIRS – poenotena tipografija -------------------------------------------------------------------------- Kako uporabiti: 1. Datoteko vključi KOT ZADNJO v (za vsemi obstoječimi CSS-ji), da prepiše trenutne vrednosti. 2. V bloku "DESKTOP" prepiši vrednosti, ki jih imaš zdaj na velikih zaslonih (dobiš jih z virs-font-audit.js) – tam naj ostane, kot je. 3. V bloku "MOBILE" so poenotene vrednosti – to je tisto, kar popravljaš. 4. V razdelku "MAPIRANJE" prilagodi selektorje razredom, ki jih imaš v predlogah (mainNav, kartice novic, gumbi ...). Vse velikosti so v rem (16px = 1rem). Če želiš, spodaj prepiši v px – deluje enako, rem le spoštuje uporabnikovo nastavitev velikosti pisave. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DRUŽINE, DEBELINE, VIŠINE VRSTIC – enake na vseh zaslonih -------------------------------------------------------------------------- */ :root { /* TODO: prepiši iz audita (body → font-family) */ --ff-base: "TODO-trenutna-pisava", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --ff-heading: var(--ff-base); /* če imajo naslovi drugo pisavo, jo vpiši tukaj */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-heading: var(--fw-bold); --lh-tight: 1.1; /* velik naslov (h1, display) */ --lh-heading: 1.25; /* h2–h4 */ --lh-base: 1.5; /* odstavki */ --lh-small: 1.4; /* drobni tisk, meta podatki */ --ls-heading: -0.01em; --ls-caps: 0.04em; /* če imaš kje velike tiskane črke (gumbi, oznake) */ } /* -------------------------------------------------------------------------- 2. VELIKOSTI PO VLOGAH Privzeto = MOBILE (< 768px). Tablet in desktop prepišeta spodaj. Lestvica na mobilcu: 12 / 14 / 16 / 18 / 20 / 22 / 26 / 30 px -------------------------------------------------------------------------- */ :root { --fs-display: 1.875rem; /* 30px – hero naslov na domači strani */ --fs-h1: 1.625rem; /* 26px */ --fs-h2: 1.375rem; /* 22px */ --fs-h3: 1.25rem; /* 20px */ --fs-h4: 1.125rem; /* 18px */ --fs-h5: 1rem; /* 16px */ --fs-h6: 0.875rem; /* 14px */ --fs-lead: 1.125rem; /* 18px – uvodni odstavek / podnaslov v heroju */ --fs-body: 1rem; /* 16px – NIKOLI manj na mobilcu (iOS zoom pri inputih < 16px) */ --fs-small: 0.875rem; /* 14px – meta, datumi, opombe */ --fs-xs: 0.75rem; /* 12px – noga, pravno, oznake */ --fs-nav: 1rem; /* 16px – glavni meni (mobilni panel) */ --fs-nav-sub: 0.9375rem; /* 15px – podmeniji 2.–4. nivo */ --fs-btn: 1rem; /* 16px – gumbi */ --fs-card: 1.0625rem; /* 17px – naslov kartice (novice, storitve) */ --fs-quote: 1.0625rem; /* 17px – mnenja strank */ } /* TABLET ≥ 768px – vmesni korak, da skok na desktop ni prevelik */ @media (min-width: 768px) { :root { --fs-display: 2.5rem; /* 40px */ --fs-h1: 2.125rem; /* 34px */ --fs-h2: 1.75rem; /* 28px */ --fs-h3: 1.375rem; /* 22px */ --fs-h4: 1.1875rem; /* 19px */ --fs-lead: 1.1875rem; /* 19px */ --fs-card: 1.125rem; /* 18px */ --fs-quote: 1.125rem; /* 18px */ } } /* DESKTOP ≥ 1200px – TODO: prepiši s TRENUTNIMI vrednostmi iz audita, da na velikih zaslonih ostane kot je. Spodnje so samo izhodišče. */ @media (min-width: 1200px) { :root { --fs-display: 3.25rem; /* 52px ← TODO */ --fs-h1: 2.75rem; /* 44px ← TODO */ --fs-h2: 2.125rem; /* 34px ← TODO */ --fs-h3: 1.5rem; /* 24px ← TODO */ --fs-h4: 1.25rem; /* 20px ← TODO */ --fs-h5: 1.0625rem; /* 17px ← TODO */ --fs-h6: 0.9375rem; /* 15px ← TODO */ --fs-lead: 1.25rem; /* 20px ← TODO */ --fs-body: 1.0625rem; /* 17px ← TODO (če je zdaj 16, pusti 1rem) */ --fs-small: 0.875rem; /* 14px ← TODO */ --fs-xs: 0.8125rem; /* 13px ← TODO */ --fs-nav: 1rem; /* 16px ← TODO */ --fs-nav-sub: 0.9375rem; /* 15px ← TODO */ --fs-btn: 1rem; /* 16px ← TODO */ --fs-card: 1.25rem; /* 20px ← TODO */ --fs-quote: 1.25rem; /* 20px ← TODO */ } } /* -------------------------------------------------------------------------- ALTERNATIVA (če hočeš brez breakpointov): tekoče velikosti s clamp(). Odkomentiraj in izbriši zgornja dva @media bloka. clamp(MIN-mobile, tekoča vrednost, MAX-desktop) – desktop MAX ostane tak, kot ga imaš zdaj, vmes se zvezno prilagaja. -------------------------------------------------------------------------- :root { --fs-display: clamp(1.875rem, 1.2rem + 3vw, 3.25rem); --fs-h1: clamp(1.625rem, 1.1rem + 2.4vw, 2.75rem); --fs-h2: clamp(1.375rem, 1rem + 1.7vw, 2.125rem); --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw,1.25rem); --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw,1.25rem); --fs-body: clamp(1rem, 0.97rem + 0.15vw,1.0625rem); --fs-card: clamp(1.0625rem,0.95rem + 0.5vw, 1.25rem); --fs-quote: clamp(1.0625rem,0.95rem + 0.5vw, 1.25rem); } */ /* -------------------------------------------------------------------------- 3. OSNOVA -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; /* iOS naj ne povečuje besedila sam po sebi */ text-size-adjust: 100%; } body { font-family: var(--ff-base); font-size: var(--fs-body); line-height: var(--lh-base); font-weight: var(--fw-regular); } /* -------------------------------------------------------------------------- 4. MAPIRANJE – elementi in komponente → vloge Selektorje prilagodi svojim razredom. Kjer ne veš, kaj se uporablja, ti audit pokaže tag + class. -------------------------------------------------------------------------- */ /* Naslovi (tudi razredi .h1–.h6, če jih uporabljaš na drugih elementih) */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--ff-heading); font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); } h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } h2, .h2 { font-size: var(--fs-h2); } h3, .h3 { font-size: var(--fs-h3); } h4, .h4 { font-size: var(--fs-h4); } h5, .h5 { font-size: var(--fs-h5); } h6, .h6 { font-size: var(--fs-h6); } /* Hero na domači strani (Robotics / Trade) ← TODO: pravi selektor */ .hero h1, .hero h2, .hero__title { font-size: var(--fs-display); line-height: var(--lh-tight); } .hero p, .hero__text, .lead, .intro { font-size: var(--fs-lead); line-height: var(--lh-base); } /* Odstavki, seznami, tabele – vse na eni velikosti */ p, li, td, th, dd, dt, address, blockquote, label, input, select, textarea { font-size: var(--fs-body); line-height: var(--lh-base); } small, .small, .meta, .date, time, figcaption, .caption { font-size: var(--fs-small); line-height: var(--lh-small); } /* Gumbi in polja – na mobilcu min. 16px, sicer iOS zooma */ .btn, button, .button, input[type="submit"], a.more { font-size: var(--fs-btn); font-family: var(--ff-base); } input, select, textarea { font-family: var(--ff-base); } /* Glavna navigacija (mainNav iz header.php) */ .mainNav__item > a, .mainNav__link { font-size: var(--fs-nav); } .mainNav__level2Item a, .mainNav__item--submenu ul a, .mainNav ul ul a { font-size: var(--fs-nav-sub); } /* Sekundarni meni (O nas, Aktualno, Kontakt ...) ← TODO: selektor */ .secNav a { font-size: var(--fs-small); } /* Kartice: novice, storitve, blagovne znamke ← TODO: selektorji */ .newsList h3, .newsCard__title, .services h3, .serviceCard__title { font-size: var(--fs-card); line-height: var(--lh-heading); } .newsCard__date { font-size: var(--fs-small); } .serviceCard p { font-size: var(--fs-small); } /* Mnenja strank */ .testimonials blockquote, .testimonial__text { font-size: var(--fs-quote); line-height: var(--lh-base); } .testimonial__author { font-size: var(--fs-small); } /* Noga */ footer, .footer { font-size: var(--fs-small); } footer a, .footer a { font-size: inherit; } .footer__legal, .copyright { font-size: var(--fs-xs); } /* Piškotki */ .cookieBar, .cookies { font-size: var(--fs-small); } .cookieBar strong { font-size: inherit; } /* Pop-up (akcija) */ .popup h2, .modal h2 { font-size: var(--fs-h3); } .popup p, .modal p { font-size: var(--fs-body); } /* -------------------------------------------------------------------------- 5. VSEBINA IZ CMS-ja (uredniško besedilo) Tu uredniki radi vstavijo inline font-size ali . Najbolj zanesljivo: vse, kar je v vsebinskem bloku, prisilno na sistem. ← TODO: nastavi razred vsebinskega ovoja (.content, .text, .cms, .article) -------------------------------------------------------------------------- */ .content p, .content li, .content td, .content span[style], .content font { font-size: var(--fs-body) !important; font-family: var(--ff-base) !important; line-height: var(--lh-base) !important; } .content h2 { font-size: var(--fs-h2) !important; } .content h3 { font-size: var(--fs-h3) !important; } .content h4 { font-size: var(--fs-h4) !important; } /* -------------------------------------------------------------------------- 6. Preverjanje: začasno odkomentiraj – vse, kar NI na sistemu, se obarva -------------------------------------------------------------------------- */ /* [style*="font-size"], [style*="font-family"], font { outline: 2px dashed red; } */