/* ========================================================================== Mibesis — mockup korporativne spletne strani · slog.css Barve IZKLJUČNO prek žetonov var(--mib-*) iz ../../99_izvoz/splet/mibesis.css (prosojnosti prek color-mix). Ne definiraj lastnih hex vrednosti. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; min-height: 100vh; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); line-height: 1.65; letter-spacing: 0.005em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-wrap: break-word; } img, svg { max-width: 100%; } svg { display: block; } a { color: inherit; } h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; font-weight: 700; } /* Nemske zlozenke so daljse od stolpca (Geschaeftsanwendungen meri do 818 px pri 640 px ovoju). overflow-wrap na body prepreci odrez, a lomi sredi zloga; hyphens: auto naj lomi po pravilih jezika in postavi vezaj. Selektor deluje, ker generator nastavi . NEPREVERJENO: hyphens: auto potrebuje slovar za deljenje, ki ga headless Chrome v razvojnem okolju nima — kontrolni test pokaze, da se beseda tam ne prelomi niti z vezajem. V pravih brskalnikih (ki slovarje prinesejo s seboj) naj bi delovalo. Brez podpore se pravilo tiho ne uveljavi in ostane overflow-wrap, torej lom brez vezaja — ni poslabsanja, le brez izboljsave. */ :root:lang(de) h1, :root:lang(de) h2, :root:lang(de) h3 { -webkit-hyphens: auto; hyphens: auto; } /* --- omejevalnik širine ---------------------------------------------------- */ .ovoj { width: min(100% - 2.5rem, 1160px); margin-inline: auto; } .ovoj--ozek { width: min(100% - 2.5rem, 760px); margin-inline: auto; } /* Akcentna PLOSKEV: cist --mib-akcent da na svetli temi le 4,09:1 (prag AA je 4,5:1). Mesanica s crnilom to popravi. Ker se oba zetona razresita na :root, deluje v obeh temah: svetla 4,09 -> 4,69, temna 6,49 -> 7,05 (v temni je crnilo svetlo, zato mesanica akcent posvetli). Zeton je tu in ne v mibesis.css, ker je ta generiran. */ :root { --mib-akcent-ploskev: color-mix(in srgb, var(--mib-akcent) 90%, var(--mib-crnilo)); --mib-akcent-ploskev-hover: color-mix(in srgb, var(--mib-akcent) 78%, var(--mib-crnilo)); /* Akcent kot BESEDILO na obicajni povrsini: cist akcent da 4,09:1 (kartice 4,39), prag AA je 4,5:1. Izmerjeno po popravku: 4,84 svetla / 7,15 temna. */ --mib-akcent-besedilo: color-mix(in srgb, var(--mib-akcent) 88%, var(--mib-crnilo)); /* Akcent kot besedilo na OBRNJENI povrsini (.cta-plosca ima ozadje --mib-crnilo): tam se mesa proti --mib-podlaga, ne proti crnilu. Pri 88 % bi temna tema dala 2,99 in bi se vedno padla; 60 % je najvisji delez, ki prestane v OBEH temah. Izmerjeno: 6,79 svetla / 5,13 temna (bilo 3,89 / 2,43). */ --mib-akcent-obrnjeno: color-mix(in srgb, var(--mib-akcent) 60%, var(--mib-podlaga)); } /* --- gumbi ----------------------------------------------------------------- */ .gumb { --_akc: var(--mib-akcent); display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.5rem; font: inherit; font-weight: 700; line-height: 1; border-radius: 12px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .gumb:active { transform: translateY(1px); } .gumb--polni { background: var(--mib-akcent-ploskev); color: var(--mib-podlaga); border-color: var(--mib-akcent-ploskev); } .gumb--polni:hover { background: var(--mib-akcent-ploskev-hover); border-color: var(--mib-akcent-ploskev-hover); /* rob sledi ozadju; prej je ostal svetlejsi */ } .gumb--obrobni { background: transparent; color: var(--mib-crnilo); border-color: var(--mib-crta); } .gumb--obrobni:hover { border-color: var(--mib-akcent); color: var(--mib-akcent-besedilo); } /* --- fokus stili (dostopnost) ---------------------------------------------- */ a:focus-visible, button:focus-visible, .gumb:focus-visible { outline: 3px solid var(--mib-akcent); outline-offset: 3px; border-radius: 6px; } /* Plosca CTA ima obrnjeno povrsino; akcentni obroc na njej pade na 2,43:1 (prag 1.4.11 je 3:1). */ .cta-plosca :focus-visible { outline-color: var(--mib-podlaga); } .preskoci { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--mib-akcent-ploskev); color: var(--mib-podlaga); padding: 0.7rem 1.1rem; border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none; } .preskoci:focus { left: 0; } /* ========================================================================== Glava / navigacija ========================================================================== */ .glava { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--mib-podlaga) 82%, transparent); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid var(--mib-crta); } .glava__vrsta { display: flex; align-items: center; gap: 1rem; min-height: 68px; } .znamka { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; } .znamka img { height: 30px; width: auto; } /* menjava logotipa glede na temo */ .tema-neg { display: none; } @media (prefers-color-scheme: dark) { .tema-poz { display: none; } .tema-neg { display: block; } } :root[data-theme="light"] .tema-poz { display: block; } :root[data-theme="light"] .tema-neg { display: none; } :root[data-theme="dark"] .tema-poz { display: none; } :root[data-theme="dark"] .tema-neg { display: block; } .nav { display: flex; align-items: center; gap: 0.35rem; } .nav a { text-decoration: none; color: var(--mib-sekundarno); font-weight: 700; padding: 0.5rem 0.85rem; border-radius: 9px; font-size: 0.95rem; transition: color 0.15s ease, background 0.15s ease; } .nav a:hover { color: var(--mib-crnilo); background: color-mix(in srgb, var(--mib-motiv) 60%, transparent); } .nav a[aria-current="page"] { color: var(--mib-crnilo); } .nav a[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 3px; border-radius: 2px; background: var(--mib-akcent); } .glava__orodja { display: flex; align-items: center; gap: 0.4rem; } /* preklop teme */ .tema-preklop { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--mib-crta); border-radius: 11px; background: var(--mib-povrsina); } .tema-preklop button { display: inline-grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--mib-sekundarno); transition: background 0.15s ease, color 0.15s ease; } .tema-preklop button:hover { color: var(--mib-crnilo); } .tema-preklop button[aria-pressed="true"] { background: color-mix(in srgb, var(--mib-akcent) 16%, transparent); color: var(--mib-akcent); } .tema-preklop svg { width: 17px; height: 17px; } /* hamburger */ .hamburger { display: none; width: 42px; height: 40px; padding: 0; border: 1px solid var(--mib-crta); border-radius: 10px; background: var(--mib-povrsina); color: var(--mib-crnilo); cursor: pointer; } .hamburger svg { width: 20px; height: 20px; margin-inline: auto; } /* ========================================================================== Tipografski razredi ========================================================================== */ /* Eyebrow oznaka: besedilo v sekundarnem tonu (AA-varno na svetli podlagi), akcent nosi le kvadratna pika — poudarek brez tveganja kontrasta. */ .oznaka { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mib-sekundarno); } .oznaka::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--mib-akcent); flex: none; } .naslov-sekcije { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.55rem); } .podnaslov-sekcije { color: var(--mib-sekundarno); max-width: 56ch; margin-top: 0.9rem; font-size: 1.075rem; } .velika-akcent { color: var(--mib-akcent); } /* samo velike/krepke napise! */ /* ========================================================================== Sekcije, razmiki ========================================================================== */ section { padding-block: clamp(3.5rem, 2.2rem + 5vw, 6rem); } .glava-sekcije { margin-bottom: 2.75rem; } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; overflow: clip; padding-top: clamp(3rem, 2rem + 4vw, 5rem); } .hero__orbita { position: absolute; z-index: 0; pointer-events: none; inset-block: 0; right: clamp(-260px, -10vw, -80px); width: min(72vw, 720px); aspect-ratio: 16/9; opacity: 0.9; } .hero__orbita svg { width: 100%; height: 100%; } .hero__vsebina { position: relative; z-index: 1; max-width: 40rem; } .hero h1 { font-size: clamp(2.5rem, 1.7rem + 4.2vw, 4.6rem); margin-top: 1.25rem; } .hero__pod { margin-top: 1.5rem; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); color: var(--mib-sekundarno); max-width: 42ch; } .hero__cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.9rem; } .hero__mikro { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.65rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mib-sekundarno); } .hero__mikro .pika { width: 6px; height: 6px; border-radius: 2px; background: var(--mib-akcent); } /* ========================================================================== Trak referenc ========================================================================== */ .trak { border-block: 1px solid var(--mib-crta); background: color-mix(in srgb, var(--mib-motiv) 30%, var(--mib-podlaga)); } .trak__vrsta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2.5rem; padding-block: 1.6rem; } .trak__oznaka { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mib-sekundarno); margin-right: 0.5rem; } .trak__ime { font-weight: 700; color: var(--mib-crnilo); font-size: 1.05rem; letter-spacing: -0.01em; } /* ========================================================================== Kartice (mreža) ========================================================================== */ .mreza { display: grid; gap: 1.25rem; } .mreza > * { min-width: 0; } /* sicer proga zraste na min-content in mreza prelije ovoj */ .mreza--4 { grid-template-columns: repeat(4, 1fr); } .mreza--5 { grid-template-columns: repeat(5, 1fr); } .mreza--2 { grid-template-columns: repeat(2, 1fr); } .mreza--3 { grid-template-columns: repeat(3, 1fr); } .kartica { background: var(--mib-povrsina); border: 1px solid var(--mib-crta); border-radius: 16px; padding: 1.6rem; display: flex; flex-direction: column; gap: 0.85rem; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .kartica--povezava { text-decoration: none; color: inherit; } .kartica--povezava:hover { border-color: color-mix(in srgb, var(--mib-akcent) 45%, var(--mib-crta)); transform: translateY(-3px); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--mib-crnilo) 55%, transparent); } .kartica h3 { font-size: 1.2rem; } .kartica p { margin: 0; color: var(--mib-sekundarno); } /* ikonska ploščica v slogu kvadratne orbite */ .ikona { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--mib-akcent) 12%, var(--mib-povrsina)); border: 1px solid color-mix(in srgb, var(--mib-akcent) 22%, var(--mib-crta)); color: var(--mib-akcent); } .ikona svg { width: 24px; height: 24px; } /* Besedilna povezava: crnilo (AA-varno pri majhni velikosti); akcentni poudarek dobi ob prehodu miške skupaj z dvigom kartice. */ .kartica__vec { margin-top: auto; font-weight: 700; color: var(--mib-crnilo); display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; transition: color 0.15s ease; } .kartica--povezava:hover .kartica__vec { color: var(--mib-akcent-besedilo); } .kartica--povezava:hover .kartica__vec .puscica { transform: translateX(3px); } /* Puscica je SVG, ne znak U+2192: blagovna pisava tega glifa nima (preverjeno — 230 glifov, 124 vnosov v cmap), zato je prej padla na sistemsko pisavo v vseh treh jezikih. Razred ostane, da hover premik spodaj deluje naprej. */ .puscica { transition: transform 0.2s ease; display: inline-flex; } .puscica svg { width: 1em; height: 1em; vertical-align: -0.125em; } /* seznam alinej v slogu modulov */ .alineje { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .alineje li { position: relative; padding-left: 1.5rem; color: var(--mib-sekundarno); } .alineje li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 2.5px; background: var(--mib-akcent); } /* ========================================================================== Zakaj Mibesis ========================================================================== */ .zakaj { position: relative; } .zakaj__mreza { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; } .tocke { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.4rem; } .tocke li { display: flex; gap: 1rem; } .tocke .ikona { border-radius: 12px; } .tocke h3 { font-size: 1.1rem; margin-bottom: 0.2rem; } .tocke p { margin: 0; color: var(--mib-sekundarno); } .plosca-znak { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--mib-crta); background: color-mix(in srgb, var(--mib-motiv) 35%, var(--mib-podlaga)); aspect-ratio: 4/3; display: grid; place-items: center; } .plosca-znak svg { width: 70%; height: 70%; } /* ========================================================================== Tehnologije ========================================================================== */ .znacke { display: flex; flex-wrap: wrap; gap: 0.7rem; } .znacka { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 10px; border: 1px solid var(--mib-crta); background: var(--mib-povrsina); font-weight: 700; font-size: 0.95rem; color: var(--mib-crnilo); } .znacka::before { content: ""; width: 8px; height: 8px; border-radius: 2.5px; background: color-mix(in srgb, var(--mib-akcent) 70%, var(--mib-crnilo)); flex: none; } /* ========================================================================== Kontakt / CTA plošča ========================================================================== */ .cta-plosca { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--mib-crta); background: var(--mib-crnilo); color: var(--mib-podlaga); padding: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); } /* Plošča je obrnjena površina (podlaga = crnilo, besedilo = podlaga); žetona se med temama zamenjata, zato kontrast drži v obeh. */ .cta-plosca .oznaka { color: color-mix(in srgb, var(--mib-podlaga) 72%, var(--mib-akcent)); } .cta-plosca h2 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem); color: var(--mib-podlaga); } .cta-plosca p { color: color-mix(in srgb, var(--mib-podlaga) 75%, var(--mib-crnilo)); max-width: 48ch; } .cta-plosca .gumb--obrobni { color: var(--mib-podlaga); border-color: color-mix(in srgb, var(--mib-podlaga) 40%, transparent); } .cta-plosca .gumb--obrobni:hover { border-color: var(--mib-podlaga); color: var(--mib-podlaga); } .cta-plosca__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; } .cta-plosca__orbita { position: absolute; right: -60px; bottom: -80px; width: 320px; opacity: 0.5; pointer-events: none; } .cta-plosca__podatki { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; font-size: 0.95rem; } .cta-plosca__podatki a { color: var(--mib-podlaga); font-weight: 700; text-decoration: none; } .cta-plosca__podatki a:hover { text-decoration: underline; } .cta-plosca__podatki .oznaka-mini { color: color-mix(in srgb, var(--mib-podlaga) 60%, var(--mib-crnilo)); } .cta-plosca__social { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; } .cta-plosca__social a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; font-size: 0.9rem; font-weight: 700; line-height: 1; color: var(--mib-podlaga); text-decoration: none; border: 1.5px solid color-mix(in srgb, var(--mib-podlaga) 30%, transparent); border-radius: 10px; transition: border-color 0.2s ease, color 0.2s ease; } .cta-plosca__social a:hover { border-color: var(--mib-akcent-obrnjeno); color: var(--mib-akcent-obrnjeno); } /* ========================================================================== Noga ========================================================================== */ .noga { border-top: 1px solid var(--mib-crta); padding-block: 3rem 2.5rem; } .noga__vrsta { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; } /* Bil h4; h3 zaradi zaporedja naslovov (h2 -> h4 je bil preskok). Pravilo h1,h2,h3 zgoraj postavi line-height 1.12, h4 pa ga je podedoval od telesa — zato line-height: inherit, da se noga ne premakne. */ .noga__blok h3 { line-height: inherit; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mib-sekundarno); margin: 0 0 0.9rem; } .noga__blok a { color: var(--mib-crnilo); text-decoration: none; } .noga__blok a:hover { color: var(--mib-akcent-besedilo); } .noga__seznam { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .noga__opis { color: var(--mib-sekundarno); max-width: 34ch; margin: 1rem 0 0; font-size: 0.95rem; } .noga__pravno { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--mib-crta); display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; justify-content: space-between; color: var(--mib-sekundarno); font-size: 0.85rem; } .noga__pravno span { display: inline-flex; gap: 0.5rem; } /* ========================================================================== Podstran — pas naslova ========================================================================== */ .pas { position: relative; overflow: clip; border-bottom: 1px solid var(--mib-crta); padding-block: clamp(3rem, 2rem + 4vw, 5rem); background: color-mix(in srgb, var(--mib-motiv) 22%, var(--mib-podlaga)); } .pas__orbita { position: absolute; right: -120px; top: -40px; width: 460px; opacity: 0.8; pointer-events: none; } .pas h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.5rem); margin-top: 1rem; position: relative; } .pas p { position: relative; color: var(--mib-sekundarno); max-width: 54ch; margin-top: 1rem; font-size: 1.1rem; } /* razširjena storitvena vrstica */ .storitev { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; padding: 1.9rem; border: 1px solid var(--mib-crta); border-radius: 18px; background: var(--mib-povrsina); } .storitev__stevilka { font-family: 'Mibesis Logo', system-ui, sans-serif; font-size: 1.4rem; color: var(--mib-akcent); font-weight: 400; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--mib-akcent) 30%, var(--mib-crta)); border-radius: 13px; } .storitev h2 { font-size: 1.4rem; margin-bottom: 0.6rem; } .storitev p { margin: 0 0 1.1rem; color: var(--mib-sekundarno); } /* referenčna kartica */ .ref { display: flex; flex-direction: column; gap: 1rem; } .ref__glava { display: flex; align-items: center; gap: 1rem; } .ref__logo { width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--mib-motiv) 55%, var(--mib-povrsina)); border: 1px solid var(--mib-crta); font-family: 'Mibesis Logo', system-ui, sans-serif; font-size: 1.35rem; color: var(--mib-crnilo); line-height: 1; } .ref h2 { font-size: 1.25rem; } .ref__panoga { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mib-sekundarno); margin-top: 0.2rem; } .ref__panoga::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--mib-akcent); } .ref p { margin: 0; color: var(--mib-sekundarno); } /* ========================================================================== Kitajscina (zh-Hans) :root:lang(zh) se po razsirjenem filtriranju BCP 47 ujame tudi z lang="zh-Hans" — enako kot :root:lang(de) na vrstici 40. Enakovreden zapis je :root[lang|="zh"] (ista specificnost). Blok pripada TU in ne v mibesis.css, ker je ta generiran (mibesis.css:3). Izmerjeno s fontTools na content/pisave/mibesisbesedilosc-*.woff2: pisavni okvir 1,448 em (hhea 1160/-288) proti 1,200 em pri latinici (999/-201), advance pismenke 1,000 em, x-visina 543 proti 487. ========================================================================== */ /* Razmik med znaki: pismenke nimajo presledkov med besedami, zato ga bralec vidi kot razpad besede (系统集成 -> stirje loceni znaki). Povozi vrstice 16, 28, 188, 231, 248, 401 in 456. .trak__ime (251) in .jezik a (jezik.css:30) sta NAMENOMA izpusceni — njuna vsebina je latinicna tudi na kitajski strani in je bil tracking umerjen zanjo. */ :root:lang(zh) body, :root:lang(zh) h1, :root:lang(zh) h2, :root:lang(zh) h3, :root:lang(zh) .oznaka, :root:lang(zh) .hero__mikro, :root:lang(zh) .trak__oznaka, :root:lang(zh) .noga__blok h3, :root:lang(zh) .ref__panoga { letter-spacing: 0; } /* Vrsticna visina naslovov. Pri 1.12 (vrstica 28) ostane med crnilom dveh vrstic samo 0,168 em ob 0,952 em visokem bloku (17,6 % vodilnine) in dvovrsticni kitajski naslov bere kot en siv blok; pri 1.35 zraste na 0,398 em. Dedovanje 1.7 iz mibesis.css:84 tu NE pomaga, ker je 1.12 neposredna deklaracija. */ :root:lang(zh) h1, :root:lang(zh) h2, :root:lang(zh) h3 { line-height: 1.35; } /* .gumb ima line-height: 1 (vrstica 69); pri pisavnem okvirju 1,448 em pade osnovnica 0,936 em pod vrh vrsticnega polja in blok pismenk sedi ~0,9 px pod opticno sredino gumba. */ :root:lang(zh) .gumb { line-height: 1.2; } /* Drobne oznake: pismenka pri 12,2 px ima notranje poteze pod 1 px in se na zaslonu brez visoke gostote zlije. */ :root:lang(zh) .oznaka { font-size: 0.85rem; } :root:lang(zh) .trak__oznaka { font-size: 0.85rem; } :root:lang(zh) .ref__panoga { font-size: 0.85rem; } :root:lang(zh) .noga__blok h3 { font-size: 0.85rem; } :root:lang(zh) .hero__mikro { font-size: 0.88rem; } /* Noga ima v kitajscini tri stolpce namesto stirih (stolpec Povezave odpade — glej blokiraneVsebine). OBVEZNO znotraj min-width: 941px: ta selektor ima specificnost (0,3,0) in bi sicer povozil .noga__vrsta (0,1,0) iz OBEH spodnjih prelomnih tock (465-471 in 492-498), zato se noga na mobilnem ne bi vec zlozila. */ @media (min-width: 941px) { :root:lang(zh) .noga__vrsta { grid-template-columns: 1.6fr 1fr 1fr; } } /* word-break, line-break in hyphens NAMENOMA niso nastavljeni: kitajscina se lomi med poljubnima pismenkama ze privzeto, break-all pa bi pokvaril kinsoku (dovolil bi 。in ）na zacetku vrstice). */ /* ========================================================================== Odzivnost ========================================================================== */ @media (max-width: 940px) { .mreza--3, .mreza--4, .mreza--5 { grid-template-columns: repeat(2, 1fr); } .noga__vrsta { grid-template-columns: 1fr 1fr; } .noga__blok--o { grid-column: 1 / -1; } .zakaj__mreza { grid-template-columns: 1fr; } .plosca-znak { max-width: 460px; } } @media (max-width: 720px) { /* mobilna navigacija */ .hamburger { display: grid; place-items: center; } .nav { position: fixed; inset: 68px 0 auto 0; z-index: 49; flex-direction: column; align-items: stretch; gap: 0.25rem; padding: 1rem clamp(1.25rem, 5vw, 2rem) 1.5rem; background: var(--mib-podlaga); border-bottom: 1px solid var(--mib-crta); box-shadow: 0 18px 30px -22px color-mix(in srgb, var(--mib-crnilo) 60%, transparent); transform: translateY(-115%); transition: transform 0.28s ease; visibility: hidden; } .nav[data-odprt="true"] { transform: translateY(0); visibility: visible; } .nav a { padding: 0.8rem 0.5rem; font-size: 1.05rem; border-bottom: 1px solid var(--mib-crta); border-radius: 0; } .nav a:last-child { border-bottom: 0; } .nav a[aria-current="page"]::after { display: none; } .nav a[aria-current="page"] { color: var(--mib-akcent-besedilo); } } @media (max-width: 560px) { .mreza--4, .mreza--5, .mreza--2, .mreza--3 { grid-template-columns: 1fr; } .storitev { grid-template-columns: 1fr; gap: 1rem; } .noga__vrsta { grid-template-columns: 1fr; } .trak__vrsta { gap: 0.5rem 1.5rem; } .hero__cta .gumb, .cta-plosca__cta .gumb { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } } /* ========================================================================== Tisk Brskalniki privzeto ne tiskajo ozadij. Brez tega bloka se .cta-plosca (ozadje --mib-crnilo, besedilo --mib-podlaga) natisne skoraj belo na belem — torej ravno kontaktni podatki. V temni temi izgine celotno besedilo strani. ========================================================================== */ @media print { /* Zetoni na svetle vrednosti v VSEH TREH stanjih teme: bralec lahko tiska iz temne teme, sistemske ali izrecno izbrane svetle. */ :root, :root[data-theme="light"], :root[data-theme="dark"] { --mib-akcent: #D8442B; --mib-podlaga: #FFFFFF; --mib-crnilo: #221A17; --mib-sekundarno: #4A423E; /* temnejsi od zaslonskega: tiskarska crnila se razlijejo */ --mib-motiv: #EBDFD8; --mib-crta: #CFC6C0; --mib-povrsina: #FFFFFF; --mib-akcent-besedilo: #B03722; --mib-akcent-obrnjeno: #B03722; --mib-akcent-ploskev: #B03722; --mib-akcent-ploskev-hover: #B03722; } body { background: #FFFFFF; color: #221A17; } /* Krmilni elementi na papirju nimajo pomena. */ .glava, .tema-preklop, .hamburger, .noga__jezik, .preskoci, .hero__orbita, .pas__orbita, .cta-plosca__orbita { display: none !important; } /* Obrnjena povrsina -> normalna, sicer se kontakt ne natisne. POZOR: pobeliti samo plosco NE zadosca. Sest selektorjev znotraj nje uporablja --mib-podlaga (ali mesanico z njo) kot barvo BESEDILA, ker je ozadje --mib-crnilo — ob beli plosci bi vse to postalo belo na belem. Preverjeno z izpisom v PDF: brez spodnjih vrstic manjkajo naslov, e-postni naslov, splet in sedez, torej ravno kontaktni podatki. */ .cta-plosca { background: #FFFFFF !important; color: #221A17 !important; border: 1px solid #CFC6C0; } .cta-plosca h2, .cta-plosca p, .cta-plosca .gumb--obrobni, .cta-plosca__podatki a, .cta-plosca__social a { color: #221A17 !important; } .cta-plosca .oznaka, .cta-plosca__podatki .oznaka-mini { color: #4A423E !important; } .cta-plosca .gumb--obrobni, .cta-plosca__social a { border-color: #CFC6C0 !important; } /* Poln gumb je ploskev z belim besedilom — na papirju obris. */ .gumb--polni { background: transparent !important; color: #221A17 !important; border-color: #221A17 !important; } /* Kartice naj se ne lomijo cez strani. */ .kartica, .storitev, .ref { break-inside: avoid; } /* Naslovov ne pusti samih na dnu strani. */ h1, h2, h3 { break-after: avoid; } /* Namenoma NE izpisujemo naslovov povezav (a::after { content: attr(href) }): natisnilo bi Google Maps shortlink in tri naslove druzbenih omrezij. */ }