/* ------------------------------------------------------------------------
PISAVE — gostujejo pri nas, ne pri Googlu
⚠⚠ Do 16. 9. 2026 se je nalagal slog s fonts.googleapis.com. Ta BLOKIRA
izris in stane iskanje DNS ter rokovanje TLS z drugim gostiteljem, preden
se premakne prvi bajt pisave — datoteke pa pridejo šele s tretjega
(fonts.gstatic.com). Zdaj so pravila tu, v slogu, ki ga brskalnik že ima,
in datoteke pridejo po povezavi, ki je že odprta.
Hkrati je bil to EDINI tuj klic portala. Brez njega stran ne pošlje
Googlu naslova IP nobenega obiskovalca in pasica o piškotkih ni potrebna.
⚠ Obe družini sta SPREMENLJIVI pisavi: ena datoteka pokrije vse reze,
zato je datotek štiri in ne enajst. Imena namenoma ne nosijo teže.
⚠ Datoteke so OBREZANE na znake, ki jih evropsko besedilo res rabi
(`~/skripte/zi-pisave-obrezi.sh`): osnovna latinica, latin-1 in latin
extended-A, ločila, evro, puščice. Ven so šle cirilica, grščina,
vietnamščina, fonetični znaki in latinica z dodatnimi diakritiki —
126 kB je tako padlo na 68 kB. Obrez je namenoma ŠIRŠI od slovenščine:
stran ima 3.856 člankov s tujimi imeni, narekovaji in stopinjami, in
manjkajoč znak sredi besede pade na sistemsko pisavo, kar je videti kot
napaka in se pri preizkušanju ne opazi.
⚠⚠ Če kdaj zamenjaš datoteke, MORA `unicode-range` spodaj ustrezati temu,
kar je v njih. Če obljubi znake, ki jih ni, brskalnik ne poišče drugam —
izriše prazno.
⚠ Nabora sta samo latin in latin-ext — slovenščina rabi latin-ext za
č, š in ž; cirilica, grščina in vietnamščina so mrtva teža.
Obe sta pod licenco SIL OFL, ki gostovanje pri nas izrecno dovoljuje.
Osvežitev: ~/skripte/zi-pisave-domov.php
------------------------------------------------------------------------ */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('pisave/manrope-latin.woff2') format('woff2');
unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2010-2027, U+2030-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('pisave/manrope-latin-ext.woff2') format('woff2');
unicode-range: U+0100-017F, U+0192, U+01FA-01FF, U+0218-021B, U+2116;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('pisave/manrope-latin.woff2') format('woff2');
unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2010-2027, U+2030-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('pisave/manrope-latin-ext.woff2') format('woff2');
unicode-range: U+0100-017F, U+0192, U+01FA-01FF, U+0218-021B, U+2116;
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('pisave/source-sans-3-latin.woff2') format('woff2');
unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2010-2027, U+2030-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('pisave/source-sans-3-latin-ext.woff2') format('woff2');
unicode-range: U+0100-017F, U+0192, U+01FA-01FF, U+0218-021B, U+2116;
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('pisave/source-sans-3-latin.woff2') format('woff2');
unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2010-2027, U+2030-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('pisave/source-sans-3-latin-ext.woff2') format('woff2');
unicode-range: U+0100-017F, U+0192, U+01FA-01FF, U+0218-021B, U+2116;
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('pisave/source-sans-3-latin.woff2') format('woff2');
unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2010-2027, U+2030-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('pisave/source-sans-3-latin-ext.woff2') format('woff2');
unicode-range: U+0100-017F, U+0192, U+01FA-01FF, U+0218-021B, U+2116;
}
/* ==========================================================================
Zdravstvena.info — design layer ("zi" = zdravstvena.info)
Built from the handoff: Domov v2 + Članek v2, 13. 9. 2026.
Everything the new front end draws lives here. Class names are all
prefixed `zi-` so nothing collides with Avada or a plugin.
Desktop first. Breakpoints: 1200 (tablet), 900 (mobile) — same as handoff.
========================================================================== */
/* --- Tokens -------------------------------------------------------------- */
:root {
--zi-navy: #0B2340;
--zi-tile-deep: #10305A;
--zi-primary: #1160B4;
--zi-primary-hover: #0E4F94;
--zi-grad: linear-gradient(135deg, #1D6FE8 0%, #1FBFB0 100%);
--zi-blue: #1D6FE8;
--zi-teal: #1FBFB0;
--zi-green: #1B9E5A;
--zi-ink: #152238;
--zi-ink-2: #3D4B60;
--zi-muted: #5B6879;
--zi-border: #E3E8EF;
--zi-border-strong: #CBD3DE;
--zi-surface: #F6F8FB;
--zi-tint: #EAF2FB;
--zi-ghost: #F1F4F8;
--zi-warm: #FBF8F3;
--zi-on-navy: rgba(255, 255, 255, .78);
--zi-line-navy: rgba(255, 255, 255, .12);
--zi-outline-navy: rgba(255, 255, 255, .3);
--zi-shadow-card: 0 1px 2px rgba(11, 35, 64, .06), 0 1px 3px rgba(11, 35, 64, .08);
--zi-shadow-card-hover: 0 12px 32px rgba(11, 35, 64, .14);
--zi-shadow-header: 0 4px 12px rgba(11, 35, 64, .08), 0 2px 4px rgba(11, 35, 64, .06);
/* Vsebina je bila 1240 px (vrednost iz predaje dizajna). Miha je 13. 9.
zvečer prosil za širše — ena vrednost, ki jo je kadar koli mogoče
vrniti nazaj. Hero konstelacija se ji prilagodi sama. */
--zi-max: 1560px;
--zi-pad: 40px;
--zi-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
--zi-display: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* --- Reset --------------------------------------------------------------- */
.zi *,
.zi *::before,
.zi *::after { box-sizing: border-box; }
body.zi-body {
margin: 0;
background: var(--zi-surface);
font-family: var(--zi-sans);
font-size: 16px;
color: var(--zi-ink);
-webkit-font-smoothing: antialiased;
}
/* :where() keeps this at zero weight, so every component below can set
its own colour without an !important arms race. */
.zi :where(a) { color: var(--zi-primary); text-decoration: none; }
.zi :where(a):hover { color: var(--zi-primary-hover); }
.zi h1, .zi h2, .zi h3, .zi h4 { margin: 0; font-family: var(--zi-display); font-weight: 800; }
.zi p { margin: 0; }
.zi img { max-width: 100%; }
.zi svg { flex: none; }
/* Keyboard focus must be as visible as hover — the handoff asks for it. */
.zi a:focus-visible,
.zi button:focus-visible {
outline: 3px solid var(--zi-teal);
outline-offset: 2px;
}
.zi-skip {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: #fff; color: var(--zi-ink); padding: 12px 18px; border-radius: 0 0 8px 0;
font: 700 15px/1 var(--zi-display);
}
.zi-skip:focus { left: 0; }
.zi-wrap { max-width: var(--zi-max); margin: 0 auto; padding-left: var(--zi-pad); padding-right: var(--zi-pad); }
.zi-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* --- Motion -------------------------------------------------------------- */
@keyframes zi-drift-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, -30px); } }
@keyframes zi-drift-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-36px, 28px); } }
@keyframes zi-ecg-draw { to { stroke-dashoffset: 0; } }
/* ⚠ Številke so IZMERJENA dolžina poti EKG (`path.getTotalLength()` = 4025
enot, zi-deli.php). Utrip se začne tik pred začetkom črte (odmik 90 = dolžina
črtice) in konča za njenim koncem. Če se pot spremeni, je treba izmeriti
znova — sicer utrip obstane sredi črte ali se prikaže dvakrat. */
@keyframes zi-ecg-beat { 0% { stroke-dashoffset: 90; } 100% { stroke-dashoffset: -4030; } }
@keyframes zi-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes zi-ring { 0% { transform: scale(.92); opacity: .5; } 100% { transform: scale(1.25); opacity: 0; } }
[data-reveal].zi-pending { opacity: 0; transform: translateY(16px); transition: opacity .6s ease-out, transform .6s ease-out; }
[data-reveal].zi-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.zi *, .zi *::before, .zi *::after { animation: none !important; transition: none !important; }
[data-reveal] { opacity: 1 !important; transform: none !important; }
}
/* --- Shared bits --------------------------------------------------------- */
.zi-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font: 700 .75rem/1 var(--zi-sans);
letter-spacing: .14em; text-transform: uppercase; color: var(--zi-teal);
}
.zi-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 1px; flex: none; }
.zi-eyebrow--icon::before { display: none; }
.zi-eyebrow--green { color: var(--zi-green); }
.zi-h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); letter-spacing: -.02em; line-height: 1.12; text-wrap: pretty; }
.zi-h2 em { font-style: normal; color: var(--zi-primary); }
.zi-h2--navy { color: #fff; }
.zi-h2--navy em { background: var(--zi-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zi-btn {
position: relative; overflow: hidden;
min-height: 44px; padding: 0 20px; border-radius: 6px;
background: var(--zi-primary); color: #fff;
font: 700 15px/1 var(--zi-display);
display: inline-flex; align-items: center; gap: 8px;
transition: background .2s ease-out;
}
.zi-btn:hover { background: var(--zi-primary-hover); color: #fff; }
.zi-btn::after {
content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
transform: skewX(-20deg); transition: left .5s ease-out; pointer-events: none;
}
.zi-btn:hover::after, .zi-btn:focus-visible::after { left: 120%; }
.zi-btn--grad {
background: var(--zi-grad); border-radius: 8px;
min-height: 52px; padding: 0 26px; font-size: 1.0625rem; gap: 10px;
box-shadow: 0 8px 24px rgba(29, 111, 232, .35);
}
.zi-btn--grad:hover { background: var(--zi-grad); filter: brightness(1.05); }
.zi-btn--outline {
min-height: 52px; padding: 0 20px; border-radius: 8px;
border: 1.5px solid var(--zi-outline-navy); background: transparent; color: #fff;
font: 700 1.0625rem/1 var(--zi-display); display: inline-flex; align-items: center;
transition: background .2s ease-out;
}
.zi-btn--outline:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.zi-btn--ghost {
min-height: 44px; padding: 0 18px; border-radius: 8px;
border: 1.5px solid var(--zi-border-strong); background: transparent; color: var(--zi-ink);
font: 700 .9375rem/1 var(--zi-display); display: inline-flex; align-items: center; gap: 8px;
transition: border-color .2s ease-out, color .2s ease-out;
}
.zi-btn--ghost:hover { border-color: var(--zi-primary); color: var(--zi-primary); }
.zi-iconbtn {
width: 44px; height: 44px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
color: var(--zi-ink-2); border: 0; background: transparent; cursor: pointer; padding: 0;
transition: background .2s ease-out, color .2s ease-out;
}
.zi-iconbtn:hover { background: var(--zi-ghost); color: var(--zi-primary); }
/* Arrow nudge — used by every card and button that carries one. */
[data-arrow] { transition: transform .2s ease-out; }
.zi-hub:hover [data-arrow],
.zi-card:hover [data-arrow],
a:hover > [data-arrow],
a:hover [data-arrow] { transform: translateX(4px); }
/* Duotone image treatment; cleared on card hover. */
/* isolation: isolate gives the multiply blend its own stacking context.
Without it Chromium composites it as solid colour in a full-page capture
(and on some GPUs), so every photo turned into a blue rectangle. */
/* Podlaga je svetla, ne modra: med slikami je nekaj prosojnih PNG-jev
(infografike), pri katerih bi se modra podlaga videla skozi in kartica bi
bila videti kot prazna modra ploščica. */
.zi-duo { position: relative; background: var(--zi-ghost); overflow: hidden; isolation: isolate; }
.zi-duo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.8); transition: filter .3s; }
.zi-duo::after {
content: ""; position: absolute; inset: 0; background: var(--zi-primary);
opacity: .14; mix-blend-mode: multiply; pointer-events: none; transition: opacity .3s;
}
.zi-card:hover .zi-duo img { filter: none; }
.zi-card:hover .zi-duo::after { opacity: 0; }
/* What stands in when a post has no image: a navy tile with the section icon.
Deliberate-looking, unlike a grey stripe. */
.zi-ph {
position: relative; display: flex; width: 100%; height: 100%;
align-items: center; justify-content: center;
background: linear-gradient(135deg, #14386A 0%, var(--zi-navy) 100%);
color: rgba(255, 255, 255, .3);
}
.zi-ph::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.5px);
background-size: 20px 20px;
}
.zi-ph svg { position: relative; width: 34%; max-width: 88px; height: auto; }
.zi-compact .zi-ph svg, .zi-recipe .zi-ph svg { width: 40%; }
.zi-pill {
min-height: 30px; padding: 0 12px; border-radius: 999px;
font: 700 .6875rem/1 var(--zi-sans); letter-spacing: .12em; text-transform: uppercase;
display: inline-flex; align-items: center;
}
.zi-pill--teal { background: var(--zi-teal); color: var(--zi-navy); }
.zi-pill--white { background: rgba(255, 255, 255, .92); color: var(--zi-primary); min-height: 28px; padding: 0 10px; }
.zi-pill--grad { background: var(--zi-grad); color: #fff; min-height: 28px; }
.zi-chip {
min-height: 30px; padding: 0 10px; border-radius: 999px;
background: var(--zi-tint); color: var(--zi-primary);
font: 600 .8125rem/1 var(--zi-sans); display: inline-flex; align-items: center;
}
.zi-chip--navy { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.zi-meta { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--zi-muted); }
/* Decorative navy atmosphere: dot grid and drifting glows.
Križci (plusi) so bili 15. 9. 2026 odstranjeni na Mihovo zahtevo. */
.zi-atmos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.zi-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.5px); background-size: 24px 24px; }
.zi-dots--soft { background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.5px); }
.zi-glow { position: absolute; border-radius: 50%; }
.zi-glow--a { animation: zi-drift-a 26s ease-in-out infinite; }
.zi-glow--b { animation: zi-drift-b 30s ease-in-out infinite; }
/* --- Pagination ---------------------------------------------------------- */
.zi-pager { display: flex; gap: 8px; flex-wrap: wrap; }
.zi-pager a, .zi-pager span {
min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px;
font: 600 .9375rem/1 var(--zi-sans);
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border: 1px solid var(--zi-border-strong); background: #fff; color: var(--zi-ink);
transition: border-color .2s ease-out, color .2s ease-out;
}
.zi-pager a:hover { border-color: var(--zi-primary); color: var(--zi-primary); }
.zi-pager .current { background: var(--zi-primary); border-color: var(--zi-primary); color: #fff; }
.zi-pager--navy a, .zi-pager--navy span { background: transparent; border-color: var(--zi-outline-navy); color: #fff; }
.zi-pager--navy a:hover { background: rgba(255, 255, 255, .1); border-color: var(--zi-outline-navy); color: #fff; }
.zi-pager--navy .current { background: #fff; border-color: #fff; color: var(--zi-navy); }
/* ==========================================================================
HEADER
========================================================================== */
.zi-header {
position: sticky; top: 0; z-index: 20;
background: rgba(255, 255, 255, .96);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--zi-border);
box-shadow: none; transition: box-shadow .25s ease-out;
}
.zi-header.zi-scrolled { box-shadow: var(--zi-shadow-header); }
.zi-header__in {
max-width: var(--zi-max); margin: 0 auto; padding: 0 var(--zi-pad);
height: 88px; display: flex; align-items: center; gap: 32px;
transition: height .25s ease-out;
}
.zi-header.zi-scrolled .zi-header__in { height: 64px; }
.zi-logo { display: flex; align-items: center; flex: none; }
/* ⚠⚠ Nad 64 px višine izvorna datoteka NIMA dovolj pik. Zdravstvena-logo.jpg
je 250×128; pri dvojni gostoti zaslona zadošča do širine 125 px, torej do
64 px višine. Miha je 16. 9. 2026 dvakrat zahteval večjega, zato je zdaj
76 px v glavi in 72 px v nogi — na zaslonu z dvojno gostoto je to mehko,
na navadnem monitorju ne. To je zavestna izbira, ne spregled: ostro bo
šele s prozorno datoteko v večji ločljivosti.
⚠ Datoteka `Zdravstvena-logo1-removebg-preview-1.png` na živi strani NI
prozorna, čeprav ime tako pravi — izmerjeno 0 % prozornih pik.
(staro: meja je 64 px; izvorna datoteka je 250×128, zato pri
dvojni gostoti zaslona zadošča do širine 125 px — nad tem se logotip
začne mehčati. Povečan 16. 9. 2026 na Mihovo zahtevo, a NAMENOMA ostaja
pod to mejo; večji bo šele s prozorno datoteko v večji ločljivosti. */
.zi-logo img { height: 76px; width: auto; display: block; transition: height .25s ease-out; }
.zi-header.zi-scrolled .zi-logo img { height: 58px; }
.zi-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.zi-nav a {
white-space: nowrap;
padding: 10px 12px; border-radius: 6px;
font: 700 15px/1 var(--zi-display); color: var(--zi-ink-2);
display: flex; align-items: center; gap: 4px;
transition: background .2s ease-out, color .2s ease-out;
}
.zi-nav a:hover { color: var(--zi-primary); background: var(--zi-ghost); }
.zi-nav .zi-current > a { color: var(--zi-primary); background: var(--zi-tint); }
.zi-nav__has > a::after {
content: ""; width: 16px; height: 16px; flex: none;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.zi-nav li { position: relative; list-style: none; }
.zi-nav ul { margin: 0; padding: 0; }
.zi-nav .sub-menu {
position: absolute; top: 100%; left: 0; min-width: 260px;
background: #fff; border: 1px solid var(--zi-border); border-radius: 12px;
box-shadow: 0 12px 32px rgba(11, 35, 64, .14);
padding: 8px; display: none; z-index: 30;
}
.zi-nav li:hover > .sub-menu, .zi-nav li:focus-within > .sub-menu { display: block; }
.zi-nav .sub-menu a { font: 400 15px/1.3 var(--zi-sans); color: var(--zi-ink-2); min-height: 44px; }
.zi-header__side { display: flex; align-items: center; gap: 8px; flex: none; }
.zi-burger { display: none; }
/* Search drawer — the magnifier in the design needs somewhere to go. */
.zi-search { display: none; border-top: 1px solid var(--zi-border); background: #fff; }
.zi-search.is-open { display: block; }
.zi-search form { max-width: var(--zi-max); margin: 0 auto; padding: 14px var(--zi-pad); display: flex; gap: 8px; }
.zi-search input[type="search"] {
flex: 1; min-height: 48px; padding: 0 16px; border-radius: 8px;
border: 1px solid var(--zi-border-strong); font: 400 1rem/1 var(--zi-sans); color: var(--zi-ink);
}
.zi-search input[type="search"]:focus { outline: 3px solid var(--zi-teal); outline-offset: 1px; }
/* Reading progress (article) */
.zi-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--zi-border); z-index: 40; }
.zi-progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, #1D6FE8 0%, #1FBFB0 100%); }
/* ==========================================================================
HERO + PORTAL CONSTELLATION (homepage)
========================================================================== */
/* ⚠ Višina heroja, odmik kartice 01 in odmik vrstice kartic so TRIJE deli
ene same slike in se premikajo skupaj. Kartica 01 stoji na `-višina + odmik
mreže`, torej se ob spremembi odmika mreže popravi TUDI njen `top`.
vrstica kartic pa toliko nad dnom, kolikor naj sega čeznj.
15. 9. 2026: heroj je 810 → 900 px, ker je EKG s pravo konico segal v
kartice (Miha: »EKG zdaj na hero prekriva boxe … razširi še malo sliko na
dol in boxe pomakni malo bolj dol«).
16. 9. 2026: odmik mreže 96 → 56 px — vsa vsebina heroja (besedilo IN
kartica 01) gre za 40 px gor. Miha: »premakni vse skupaj pikico bolj gor«.
Višina heroja, EKG in vrstica kartic ostanejo, zato se razmik do EKG samo
poveča. */
.zi-hero { position: relative; height: 900px; background: var(--zi-navy); z-index: 1; }
.zi-hero .zi-glow--a { top: -240px; left: -120px; width: 720px; height: 720px; background: radial-gradient(closest-side, rgba(29, 111, 232, .42), transparent); }
.zi-hero .zi-glow--b { bottom: -320px; right: -80px; width: 760px; height: 760px; background: radial-gradient(closest-side, rgba(31, 191, 176, .28), transparent); }
.zi-ring { position: absolute; right: 300px; top: 290px; border-radius: 50%; }
.zi-ring--1 { width: 560px; height: 560px; margin: -280px 0 0 -280px; border: 1px solid rgba(255, 255, 255, .10); }
.zi-ring--2 { width: 820px; height: 820px; margin: -410px 0 0 -410px; border: 1px solid rgba(255, 255, 255, .07); }
.zi-ring--3 { width: 1080px; height: 1080px; margin: -540px 0 0 -540px; border: 1px solid rgba(255, 255, 255, .045); }
.zi-ring--pulse { width: 560px; height: 560px; margin: -280px 0 0 -280px; border: 1px solid rgba(31, 191, 176, .35); animation: zi-ring 6s ease-out infinite; }
.zi-ecg { position: absolute; left: 0; bottom: 170px; width: 100%; height: 92px; overflow: visible; }
.zi-ecg__base { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 4100; stroke-dashoffset: 4100; animation: zi-ecg-draw 2.4s ease-out .3s forwards; }
.zi-ecg__beat { fill: none; stroke: var(--zi-teal); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 90 4200; stroke-dashoffset: 90; filter: drop-shadow(0 0 6px #1FBFB0); animation: zi-ecg-beat 7s linear 2.7s infinite; }
.zi-hero__grid {
position: relative; max-width: var(--zi-max); margin: 0 auto; padding: 56px var(--zi-pad) 0;
display: grid; grid-template-columns: minmax(0, 1fr) 640px; gap: 48px; align-items: start;
}
.zi-hero__copy { display: flex; flex-direction: column; gap: 24px; padding-top: 56px; max-width: 600px; }
.zi-hero h1 {
font-size: clamp(2.5rem, 1.8rem + 2.8vw, 3.75rem);
letter-spacing: -.025em; line-height: 1.06; color: #fff; text-wrap: pretty;
}
.zi-hero h1 span { background: var(--zi-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zi-hero__lead { font-size: 1.25rem; line-height: 1.5; color: var(--zi-on-navy); max-width: 520px; text-wrap: pretty; }
.zi-hero__cta { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.zi-hero__stage { position: relative; height: 540px; }
/* The constellation lives in its own zero-height box right after the hero,
so its cards can hang over the hero edge without the navy growing. */
.zi-stack { position: relative; height: 0; max-width: var(--zi-max); margin: 0 auto; z-index: 5; }
/* Featured card 01. Vodoravno: desni stolpec se konča ob desnem robu
vsebine, torej se začne pri (širina − 40 robu − 640), kartica pa je 140 px
znotraj njega — skupaj `100% − 540px`. Zapisano relativno, da drži pri
vsaki širini vsebine, ne le pri 1240 px.
Navpično: −900 višine heroja + 56 px odmika mreže. */
.zi-featured {
position: absolute; left: calc(100% - 540px); top: -844px; width: 360px; z-index: 6;
border-radius: 20px; padding: 28px 28px 26px;
display: flex; flex-direction: column; gap: 14px; color: var(--zi-ink);
border: 2px solid transparent;
background: linear-gradient(#fff, #fff) padding-box, var(--zi-grad) border-box;
box-shadow: 0 24px 60px rgba(4, 17, 36, .45);
overflow: hidden;
transition: transform .2s ease-out, box-shadow .2s ease-out;
animation: zi-fade-up .7s ease-out .2s both;
}
.zi-featured:hover { transform: translateY(-4px); box-shadow: 0 32px 70px rgba(4, 17, 36, .5); color: var(--zi-ink); }
.zi-featured > * { position: relative; }
.zi-featured__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.zi-featured__media { height: 120px; border-radius: 12px; overflow: hidden; background: var(--zi-navy); }
.zi-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.zi-featured__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 35, 64, .1), rgba(11, 35, 64, .7)); }
.zi-featured__cap { position: absolute; left: 14px; bottom: 12px; z-index: 2; font: 700 .75rem/1 var(--zi-sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.zi-featured h2 { font-size: 1.75rem; letter-spacing: -.02em; line-height: 1.1; }
.zi-featured__sub { font-size: 1.0625rem; line-height: 1.5; color: var(--zi-muted); }
.zi-featured__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zi-arrowbtn {
min-height: 46px; padding: 0 18px; border-radius: 8px;
background: var(--zi-primary); color: #fff; font: 700 .9375rem/1.25 var(--zi-display);
display: flex; align-items: center; justify-content: space-between; gap: 10px;
transition: background .2s ease-out;
}
.zi-featured:hover .zi-arrowbtn, .zi-hub:hover .zi-arrowbtn { background: var(--zi-primary-hover); }
.zi-tile {
flex: none;
position: relative; width: 64px; height: 64px; border-radius: 18px;
display: flex; align-items: center; justify-content: center; color: #fff;
transition: transform .2s ease-out;
}
.zi-tile--grad { background: var(--zi-grad); box-shadow: 0 8px 20px rgba(29, 111, 232, .35); }
.zi-featured:hover .zi-tile, .zi-hub:hover .zi-tile { transform: rotate(6deg) scale(1.06); }
/* Higher weight than `.zi-hub > *` and `.zi-featured > *` below, which put
everything else back into flow. */
.zi-hub .zi-ghostnum,
.zi-featured .zi-ghostnum,
.zi-ghostnum {
position: absolute; top: -18px; right: -14px;
font: 800 160px/1 var(--zi-display); color: var(--zi-ghost);
letter-spacing: -.05em; user-select: none; pointer-events: none;
}
.zi-hub .zi-ghostnum--sm,
.zi-ghostnum--sm { top: -14px; right: -10px; font-size: 120px; }
.zi-hub .zi-glowover,
.zi-featured .zi-glowover,
.zi-glowover { position: absolute; inset: -40px; opacity: 0; transition: opacity .2s ease-out; pointer-events: none; }
.zi-featured:hover .zi-glowover, .zi-hub:hover .zi-glowover { opacity: 1; }
/* Portal row 02–05, straddling the hero edge */
.zi-hubs {
position: absolute; left: var(--zi-pad); right: var(--zi-pad); top: -96px; z-index: 5;
/* Število stolpcev pride iz `zi_portals()` prek --zi-hubs, ki ga vpiše
front-page.php. Trdno vpisana štirica je 15. 9. 2026 ob združitvi dveh
kartic v eno pustila prazen stolpec — tako se to ne more ponoviti. */
display: grid; grid-template-columns: repeat(var(--zi-hubs, 4), minmax(0, 1fr)); gap: 20px; align-items: stretch;
}
.zi-hub {
position: relative; height: 260px; background: #fff;
border: 2px solid var(--zi-border); border-radius: 20px; padding: 22px 22px 18px;
display: flex; flex-direction: column; gap: 10px; color: var(--zi-ink);
box-shadow: 0 20px 50px rgba(4, 17, 36, .28); overflow: hidden;
transition: transform .2s ease-out, box-shadow .2s ease-out;
animation: zi-fade-up .7s ease-out both;
}
.zi-hub:hover {
transform: translateY(-4px); color: var(--zi-ink);
box-shadow: 0 28px 60px rgba(4, 17, 36, .35);
background: linear-gradient(#fff, #fff) padding-box, var(--zi-grad) border-box;
border-color: transparent;
}
.zi-hub > * { position: relative; }
.zi-hub .zi-tile { width: 56px; height: 56px; border-radius: 16px; }
.zi-hub h3 { font-size: 1.25rem; letter-spacing: -.015em; line-height: 1.15; margin-top: 6px; text-wrap: pretty; }
.zi-hub__sub { font-size: .9375rem; line-height: 1.45; color: var(--zi-muted); }
.zi-hub__cta {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
min-height: 40px; font: 700 .875rem/1.3 var(--zi-display); color: var(--zi-primary);
margin-top: auto; text-wrap: pretty;
}
/* ==========================================================================
NEWS SECTION
========================================================================== */
.zi-news { max-width: var(--zi-max); margin: 0 auto; padding: 226px var(--zi-pad) 0; display: flex; flex-direction: column; gap: 40px; }
.zi-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.zi-sechead__text { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.zi-news__top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
.zi-lead {
position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16/9;
display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: var(--zi-navy);
box-shadow: var(--zi-shadow-card); transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.zi-lead:hover { box-shadow: 0 16px 40px rgba(11, 35, 64, .18); color: #fff; }
.zi-lead .zi-duo { position: absolute; inset: 0; }
.zi-lead__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 35, 64, 0) 30%, rgba(11, 35, 64, .85) 100%); }
.zi-lead .zi-pill { position: absolute; top: 20px; left: 20px; z-index: 2; }
.zi-lead__body { position: relative; padding: 28px 32px 30px; display: flex; flex-direction: column; gap: 12px; max-width: 780px; }
.zi-lead h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.02em; line-height: 1.15; color: #fff; text-wrap: pretty; }
.zi-lead__excerpt { font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, .82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zi-lead__meta { display: flex; align-items: center; gap: 14px; font-size: .875rem; color: rgba(255, 255, 255, .78); flex-wrap: wrap; }
.zi-lead__meta .zi-meta { color: inherit; }
.zi-lead__more { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 .9375rem/1 var(--zi-display); color: #fff; }
.zi-side { display: flex; flex-direction: column; gap: 16px; }
.zi-compact {
flex: 1; background: #fff; border: 1px solid var(--zi-border); border-radius: 20px; padding: 16px;
display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px;
align-items: center; color: var(--zi-ink);
box-shadow: var(--zi-shadow-card); transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.zi-compact:hover { box-shadow: var(--zi-shadow-card-hover); color: var(--zi-ink); }
.zi-compact .zi-duo { border-radius: 12px; aspect-ratio: 1; }
.zi-compact__body { display: flex; flex-direction: column; gap: 8px; justify-content: center; min-width: 0; }
.zi-compact__cat { font: 700 .6875rem/1 var(--zi-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--zi-teal); }
.zi-compact h3 { font-size: 1.1875rem; letter-spacing: -.015em; line-height: 1.25; text-wrap: pretty; }
.zi-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* `.zi-card` carries only behaviour — the lift on hover, the arrow nudge and
the duotone clearing. Every kind of card (lead, compact, recipe, post)
brings its own look, so the two never fight over specificity. */
.zi-card {
position: relative; color: var(--zi-ink);
transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.zi-card:hover { transform: translateY(-4px); color: var(--zi-ink); }
/* The plain white card in a grid. */
.zi-card--post {
background: #fff; border: 1px solid var(--zi-border); border-radius: 20px;
overflow: hidden; display: flex; flex-direction: column;
box-shadow: var(--zi-shadow-card);
}
.zi-card--post:hover { box-shadow: var(--zi-shadow-card-hover); }
.zi-card__media { aspect-ratio: 16/10; position: relative; }
.zi-card__media .zi-pill { position: absolute; top: 14px; left: 14px; z-index: 2; }
.zi-card__body { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* ⚠⚠ `overflow-wrap` je tu nujen, ne kozmetika. Naslov objave »NOVO:
prenovljeni zaposlitveni portal … Zdravstvena.info/zaposlitev« vsebuje
nedeljivo besedo, dolgo 26 znakov — brez tega je štrlela iz kartice in
na telefonu podrla celo stran v vodoravno drsenje (390 → 444 px).
Najdeno 17. 9. 2026 z `node qa/pregled-vseh.mjs`. Naslovov ne piševa midva,
zato mora postavitev zdržati vsako besedo, ki jo kdo vpiše. */
.zi-card h3 { font-size: 1.375rem; letter-spacing: -.015em; line-height: 1.22; text-wrap: pretty; overflow-wrap: anywhere; }
.zi-card__excerpt, .zi-hub h3, .zi-featured h2, .zi-promo h3 { overflow-wrap: anywhere; }
/* ⚠⚠ Tu NE sme biti `flex: 1`. Do 16. 9. 2026 ga je imel, da je potisnil
nogo kartice navzdol — a s tem se je izvleček RAZTEGNIL čez svoji dve
vrstici. `-webkit-line-clamp` takrat ne velja več: škatla je višja, kot
dovoljujeta dve vrstici, zato se pokaže tretja in jo `overflow: hidden`
odreže **na pol**, brez tropičja. Videti je kot pokvarjeno besedilo.
⚠ Opazi se samo na karticah s KRATKIM naslovom: kartice v vrsti so enako
visoke, zato ima kartica z enovrstičnim naslovom več prostora za raztezanje
kot sosednja s trivrstičnim. V vrsti treh je bila napačna ena sama.
Prostor zdaj pobere noga (`margin-top: auto`), izvleček pa ostane pri
svoji naravni višini in se konča s tropičjem. */
.zi-card__excerpt { font-size: 1rem; line-height: 1.55; color: var(--zi-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zi-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; margin-top: auto; }
.zi-card__more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 700 .9375rem/1 var(--zi-display); color: var(--zi-primary); }
/* ECG divider */
.zi-divider { max-width: var(--zi-max); margin: 72px auto 0; padding: 0 var(--zi-pad); }
.zi-divider svg { width: 100%; height: 40px; display: block; }
/* ==========================================================================
STROKOVNI PRISPEVKI — navy band with timeline
========================================================================== */
.zi-band { position: relative; background: var(--zi-navy); overflow: hidden; }
.zi-band--top { margin-top: 72px; }
.zi-band .zi-glow--b { top: -300px; right: -200px; width: 700px; height: 700px; background: radial-gradient(closest-side, rgba(29, 111, 232, .35), transparent); animation-duration: 28s; }
.zi-band .zi-glow--a { bottom: -340px; left: -200px; width: 700px; height: 700px; background: radial-gradient(closest-side, rgba(31, 191, 176, .2), transparent); animation-duration: 24s; }
.zi-band__in {
position: relative; max-width: var(--zi-max); margin: 0 auto; padding: 96px var(--zi-pad);
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start;
}
.zi-band__aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 96px; }
.zi-band__lead { font-size: 1.125rem; line-height: 1.55; color: var(--zi-on-navy); max-width: 480px; text-wrap: pretty; }
.zi-timeline { position: relative; padding-left: 40px; }
.zi-timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #1D6FE8 0%, #1FBFB0 100%); border-radius: 1px; }
.zi-timeline__groups { display: flex; flex-direction: column; gap: 40px; }
.zi-tlgroup { position: relative; display: flex; flex-direction: column; gap: 6px; }
.zi-tlgroup::before {
content: ""; position: absolute; left: -40px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
background: var(--zi-teal); box-shadow: 0 0 0 4px rgba(31, 191, 176, .25), 0 0 18px rgba(31, 191, 176, .8);
}
.zi-tlgroup__label { font: 700 .75rem/1.4 var(--zi-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--zi-teal); margin-bottom: 6px; }
.zi-tlitem {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
min-height: 52px; padding: 8px 14px; margin-left: -14px; border-radius: 10px;
color: #fff; font: 800 clamp(1.125rem, 1rem + .4vw, 1.375rem)/1.3 var(--zi-display);
letter-spacing: -.01em; text-wrap: pretty; transition: background .2s ease-out;
}
.zi-tlitem:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.zi-tlitem svg { opacity: 0; transform: translateX(-6px); transition: opacity .2s ease-out, transform .2s ease-out; }
.zi-tlitem:hover svg { opacity: 1; transform: translateX(0); }
/* ==========================================================================
RECEPTI — warm band, organic blobs
========================================================================== */
.zi-recipes { background: var(--zi-warm); }
.zi-recipes__in { max-width: var(--zi-max); margin: 0 auto; padding: 96px var(--zi-pad) 104px; display: flex; flex-direction: column; gap: 48px; }
.zi-recipes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.zi-recipe { display: flex; flex-direction: column; gap: 18px; color: var(--zi-ink); transition: transform .2s ease-out; }
.zi-recipe:hover { color: var(--zi-ink); }
.zi-recipe__media { position: relative; }
.zi-recipe__blob {
aspect-ratio: 1; overflow: hidden; background: #EAE4D8;
box-shadow: 0 16px 40px rgba(11, 35, 64, .12); transition: border-radius .4s ease-out;
}
.zi-recipe__blob img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zi-recipe:nth-child(3n+1) .zi-recipe__blob { border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; }
.zi-recipe:nth-child(3n+2) .zi-recipe__blob { border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%; }
.zi-recipe:nth-child(3n+3) .zi-recipe__blob { border-radius: 55% 45% 60% 40% / 40% 60% 40% 60%; }
.zi-recipe__badge {
position: absolute; left: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 14px;
background: #fff; color: var(--zi-green); display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(11, 35, 64, .12);
}
.zi-recipe__body { display: flex; flex-direction: column; gap: 8px; padding: 0 6px; }
.zi-recipe h3 { font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.15; }
.zi-recipe__excerpt { font-size: 1rem; line-height: 1.55; color: var(--zi-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ==========================================================================
FOOTER
========================================================================== */
.zi-footer { background: var(--zi-navy); color: #fff; position: relative; overflow: hidden; }
.zi-footer__in {
position: relative; max-width: var(--zi-max); margin: 0 auto; padding: 72px var(--zi-pad) 32px;
display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2.5fr) minmax(0, 3fr) minmax(0, 3fr); gap: 48px;
}
.zi-footer__brand { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
/* ⚠ Bele ploščice ni več. Bila je tu zato, ker je bil logotip JPEG na belem
in bi bil na temnem pasu bel kvadrat. Od 16. 9. 2026 je prozoren PNG in
znak stoji naravnost na temnem. Če bi kdaj spet prišla nepozorna datoteka
z belim ozadjem, se to pozna prav tu. */
.zi-footer__logo { display: block; }
.zi-footer__logo img { height: 72px; width: auto; display: block; }
.zi-footer__tag { font-size: 1rem; line-height: 1.55; color: var(--zi-on-navy); max-width: 320px; }
.zi-social { display: flex; gap: 8px; }
.zi-social a {
width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18);
display: flex; align-items: center; justify-content: center; color: #fff;
transition: background .2s ease-out, border-color .2s ease-out;
}
.zi-social a:hover { background: rgba(255, 255, 255, .1); border-color: var(--zi-teal); color: #fff; }
.zi-fcol { display: flex; flex-direction: column; gap: 14px; }
.zi-fcol__head { font: 700 .75rem/1 var(--zi-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--zi-teal); margin-bottom: 6px; }
.zi-fcol a { color: #fff; font-size: 1rem; line-height: 1.5; transition: color .2s ease-out; }
.zi-fcol a:hover { color: var(--zi-teal); }
.zi-fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.zi-footer__bar { position: relative; border-top: 1px solid var(--zi-line-navy); }
.zi-footer__bar > div {
max-width: var(--zi-max); margin: 0 auto; padding: 20px var(--zi-pad);
display: flex; align-items: center; justify-content: space-between; gap: 24px;
font-size: .875rem; color: var(--zi-on-navy);
}
/* ⚠ Vrstica ima zdaj tri dele (letnica · podpis · gumb na vrh) in ne več
dveh. Podpis se zato postavi na sredino in se na ozkem zaslonu prelomi v
svojo vrsto — brez tega bi na telefonu stisnil letnico v dve vrstici. */
.zi-podpis { color: var(--zi-on-navy); opacity: .85; }
.zi-podpis a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.zi-podpis a:hover { color: var(--zi-teal); }
.zi-top {
width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, .35);
color: #fff; display: inline-flex; align-items: center; justify-content: center;
transition: background .2s ease-out;
}
.zi-top:hover { background: rgba(255, 255, 255, .1); color: #fff; }
/* ==========================================================================
ARTICLE
========================================================================== */
.zi-ahero { position: relative; min-height: 560px; background: var(--zi-navy); display: flex; align-items: flex-end; overflow: hidden; }
.zi-ahero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: .7; }
.zi-ahero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 35, 64, .25) 0%, rgba(11, 35, 64, .55) 45%, rgba(11, 35, 64, .96) 100%); }
.zi-ahero__in {
position: relative; max-width: var(--zi-max); margin: 0 auto; padding: 120px var(--zi-pad) 56px;
width: 100%; display: flex; flex-direction: column; gap: 20px;
}
.zi-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .875rem; color: rgba(255, 255, 255, .72); }
.zi-crumbs a { color: rgba(255, 255, 255, .72); }
.zi-crumbs a:hover { color: #fff; }
.zi-crumbs svg { opacity: .5; }
.zi-ahero__head { display: flex; flex-direction: column; gap: 18px; max-width: 1040px; align-items: flex-start; }
.zi-ahero h1 { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); letter-spacing: -.025em; line-height: 1.06; color: #fff; text-wrap: pretty; }
.zi-ahero__meta { display: flex; align-items: center; gap: 16px; font-size: .9375rem; color: rgba(255, 255, 255, .82); flex-wrap: wrap; }
.zi-ahero__meta a { color: #fff; font-weight: 700; }
.zi-avatar {
width: 36px; height: 36px; border-radius: 50%; background: var(--zi-grad); color: #fff;
display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.zi-abody {
max-width: var(--zi-max); margin: 0 auto; padding: 56px var(--zi-pad) 96px;
/* Srednji stolpec je omejen na udobno dolžino vrstice; prosti prostor
razdeli `space-between` v enaka preslednika, da med besedilom in
stranskim stolpcem ni ene same velike luknje. */
display: grid; grid-template-columns: 56px minmax(0, 740px) 400px;
justify-content: space-between; gap: 48px; align-items: start;
}
.zi-rail {
position: sticky; top: 96px; display: flex; flex-direction: column; gap: 6px;
background: #fff; border: 1px solid var(--zi-border); border-radius: 999px; padding: 8px 6px;
box-shadow: var(--zi-shadow-card);
}
.zi-rail a, .zi-rail span {
width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
color: var(--zi-ink-2); transition: background .2s ease-out, color .2s ease-out;
}
.zi-rail a:hover { background: var(--zi-ghost); color: var(--zi-primary); }
.zi-rail__label { color: var(--zi-primary); background: var(--zi-tint); }
.zi-article { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.zi-prose {
max-width: 100%; display: flex; flex-direction: column; gap: 20px;
font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.7; color: var(--zi-ink);
}
.zi-prose > p:first-of-type { font-size: 1.375rem; line-height: 1.5; color: var(--zi-ink-2); font-weight: 600; letter-spacing: -.005em; }
.zi-prose h2 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); letter-spacing: -.015em; line-height: 1.25; margin-top: 16px; }
.zi-prose h3 { font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem); letter-spacing: -.015em; line-height: 1.3; margin-top: 8px; }
.zi-prose img { height: auto; border-radius: 16px; display: block; }
/* ⚠ Razmik med slikami, ki stojijo v ISTEM odstavku. .zi-prose je flex s
16-letnimi objavami notri: kjer je vsaka slika v svojem , jih loči gap,
kjer pa jih je več v enem
(pogosto pri starih objavah, ločene le z
), se dotikajo z robovi. Splošni sosedski izbirnik ~ prime ne glede
na to, kaj je vmes — sosedski + bi ob
odpovedal. */
.zi-prose img ~ img,
.zi-prose a ~ a img,
.zi-prose img ~ a img { margin-top: 20px; }
/* Slika v povezavi je ravno tako blok — sicer jo obda z osnovno vrstico. */
.zi-prose a:has(> img) { display: block; line-height: 0; }
.zi-prose figure { margin: 8px 0; }
.zi-prose figcaption { font-size: .875rem; color: var(--zi-muted); padding-top: 8px; }
.zi-prose a { color: var(--zi-primary); text-decoration: underline; text-underline-offset: 2px; }
.zi-prose blockquote {
margin: 8px 0; position: relative; padding: 24px 28px 24px 36px;
background: var(--zi-tint); border-radius: 0 16px 16px 0;
font: 800 clamp(1.375rem, 1.2rem + .6vw, 1.75rem)/1.3 var(--zi-display);
letter-spacing: -.015em; color: var(--zi-navy);
}
.zi-prose blockquote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: linear-gradient(180deg, #1D6FE8 0%, #1FBFB0 100%); }
.zi-prose blockquote p { margin: 0; }
.zi-prose ul, .zi-prose ol { margin: 0; padding: 0 0 0 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.zi-prose ul > li { position: relative; padding-left: 34px; }
.zi-prose ul > li::before {
content: ""; position: absolute; left: 0; top: .35em; width: 20px; height: 20px; border-radius: 50%;
background: var(--zi-teal);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.zi-prose ol { counter-reset: zi-ol; }
.zi-prose ol > li { position: relative; padding-left: 34px; counter-increment: zi-ol; }
.zi-prose ol > li::before {
content: counter(zi-ol); position: absolute; left: 0; top: .1em;
width: 24px; height: 24px; border-radius: 50%; background: var(--zi-tint); color: var(--zi-primary);
font: 700 .8125rem/24px var(--zi-display); text-align: center;
}
.zi-prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.zi-prose table td, .zi-prose table th { border: 1px solid var(--zi-border); padding: 10px 12px; text-align: left; }
.zi-prose iframe, .zi-prose video { max-width: 100%; border-radius: 16px; }
.zi-prose__source { font-size: .875rem; color: var(--zi-muted); padding-top: 16px; border-top: 1px solid var(--zi-border); }
/* ⚠⚠ STARO BESEDILO NE SME POTISNITI STRANI VSTRAN
Izmerjeno 15. 9. 2026 na telefonu (390 px): 17 od 40 preseljenih člankov je
drselo vstran, eden za 502 px. Dvoje je krivo, oboje je v vsebini, pisani
pred petnajstimi leti:
1. Viri so prilepljeni kot gol naslov — do 143 znakov brez presledka. Brez
`overflow-wrap` besedila ni kje prelomiti in en sam tak naslov razširi
cel članek.
2. Stare tabele imajo po osem stolpcev. `width: 100%` jih ne stisne pod
najmanjšo vsoto stolpcev, zato tabela štrli čez zaslon.
⚠ Kar se na telefonu vidi kot krivec, to ni: `.zi-progress` je `fixed` in
se razpotegne na širino postavitvenega okna, ki se v mobilnem načinu razširi
po najširši vsebini. Popravljati ga je zato brez pomena — ko vsebina ne
štrli več, se sam vrne na širino zaslona. */
.zi-prose { overflow-wrap: break-word; }
/* Tabela dobi svoje drsenje, stran pa ostane pri miru. `display: block` je
potreben, da `overflow-x` sploh prime — pri `display: table` ga brskalnik
ne upošteva. `width: max-content` ohrani naravno širino stolpcev znotraj. */
.zi-prose table {
display: block; width: max-content; max-width: 100%;
overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.zi-prose img { max-width: 100%; }
/* ⚠ WordPressova kartica za vdelano lastno objavo (`wp-embedded-content`)
dobi širino iz svoje skripte kot slog v elementu, zato navadni
`max-width: 100%` nanjo ne prime — na telefonu je štrlela 20 px čez rob.
`!important` je tu edina pot, ker gre za slog v elementu. */
.zi-prose iframe.wp-embedded-content { width: 100% !important; max-width: 100% !important; }
.zi-authorbar {
max-width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 20px 24px; background: #fff; border: 1px solid var(--zi-border); border-radius: 16px;
box-shadow: var(--zi-shadow-card); flex-wrap: wrap;
}
.zi-authorbar__who { display: flex; align-items: center; gap: 12px; font-size: .9375rem; color: var(--zi-muted); }
.zi-authorbar__who .zi-avatar { width: 40px; height: 40px; }
.zi-authorbar__name { display: flex; flex-direction: column; gap: 2px; }
.zi-authorbar__name a { font: 700 1rem/1.2 var(--zi-display); color: var(--zi-ink); }
.zi-share { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zi-share__label { font: 700 .875rem/1 var(--zi-display); color: var(--zi-ink); margin-right: 6px; }
.zi-share a {
width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--zi-border-strong);
display: flex; align-items: center; justify-content: center; color: var(--zi-ink-2);
transition: border-color .2s ease-out, color .2s ease-out;
}
.zi-share a:hover { border-color: var(--zi-primary); color: var(--zi-primary); }
.zi-aside { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 96px; }
.zi-promo {
position: relative; overflow: hidden; background: var(--zi-navy); border-radius: 20px;
padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; color: #fff;
box-shadow: 0 16px 40px rgba(11, 35, 64, .25);
}
.zi-promo:hover { color: #fff; }
.zi-promo > * { position: relative; }
.zi-promo .zi-glow--a { top: -120px; right: -100px; width: 320px; height: 320px; background: radial-gradient(closest-side, rgba(29, 111, 232, .45), transparent); animation-duration: 24s; }
.zi-promo .zi-glow--b { bottom: -140px; left: -100px; width: 300px; height: 300px; background: radial-gradient(closest-side, rgba(31, 191, 176, .3), transparent); animation-duration: 28s; }
.zi-promo__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zi-promo .zi-tile { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 8px 20px rgba(29, 111, 232, .4); }
.zi-promo h3 { font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.15; }
.zi-promo__sub { font-size: 1rem; line-height: 1.5; color: var(--zi-on-navy); }
.zi-promo__btn {
min-height: 46px; padding: 0 18px; border-radius: 8px; background: #fff; color: var(--zi-navy);
font: 700 .9375rem/1 var(--zi-display); display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-top: 4px;
}
.zi-promo__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zi-linkcard {
background: #fff; border: 1px solid var(--zi-border); border-radius: 20px;
box-shadow: var(--zi-shadow-card); padding: 20px 24px; display: flex; flex-direction: column; gap: 2px;
}
.zi-linkcard .zi-eyebrow { margin-bottom: 10px; }
.zi-linkcard a {
min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
color: var(--zi-ink); font: 700 1rem/1.3 var(--zi-display); border-bottom: 1px solid var(--zi-border);
transition: color .2s ease-out;
}
.zi-linkcard a:last-child { border-bottom: 0; }
.zi-linkcard a:hover { color: var(--zi-primary); }
.zi-related { background: var(--zi-tint); }
.zi-related__in { max-width: var(--zi-max); margin: 0 auto; padding: 72px var(--zi-pad) 88px; display: flex; flex-direction: column; gap: 32px; }
.zi-related .zi-card--post h3 { font-size: 1.25rem; line-height: 1.25; flex: 1; }
.zi-related .zi-card__body { padding: 20px 24px 22px; }
.zi-footer--compact .zi-footer__in {
grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 40px var(--zi-pad) 32px;
}
/* ==========================================================================
ARCHIVE / LISTING PAGES
========================================================================== */
.zi-phero { position: relative; background: var(--zi-navy); overflow: hidden; }
.zi-phero .zi-glow--a { top: -260px; left: -140px; width: 620px; height: 620px; background: radial-gradient(closest-side, rgba(29, 111, 232, .4), transparent); }
.zi-phero .zi-glow--b { bottom: -300px; right: -120px; width: 620px; height: 620px; background: radial-gradient(closest-side, rgba(31, 191, 176, .26), transparent); }
.zi-phero__in {
position: relative; max-width: var(--zi-max); margin: 0 auto; padding: 72px var(--zi-pad) 166px;
display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
}
.zi-phero h1 { font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem); letter-spacing: -.025em; line-height: 1.08; color: #fff; text-wrap: pretty; }
.zi-phero h1 em {
font-style: normal;
background: var(--zi-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zi-phero__lead { font-size: 1.125rem; line-height: 1.55; color: var(--zi-on-navy); max-width: 620px; text-wrap: pretty; }
/* ⚠ Signal NE sme stati na robu. Do 15. 9. 2026 je bil `bottom: 0` in se je
dotikal bele vsebine pod pasom — Miha: »da ne bo tik nad belo barvo ampak da
bo še malo mesa«. Zdaj je dvignjen, spodnje polnilo pasu pa je za toliko
večje, da naslov ne pride bliže črti kot prej. */
.zi-phero__ecg { position: absolute; left: 0; bottom: 34px; width: 100%; height: 66px; overflow: visible; }
.zi-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.zi-subnav a {
min-height: 40px; padding: 0 14px; border-radius: 999px;
border: 1px solid var(--zi-outline-navy); color: #fff;
font: 600 .9375rem/1 var(--zi-sans); display: inline-flex; align-items: center;
transition: background .2s ease-out;
}
.zi-subnav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.zi-subnav a.is-current { background: #fff; border-color: #fff; color: var(--zi-navy); }
.zi-list { max-width: var(--zi-max); margin: 0 auto; padding: 72px var(--zi-pad) 96px; display: flex; flex-direction: column; gap: 40px; }
.zi-empty { padding: 48px 0; font-size: 1.125rem; color: var(--zi-muted); }
/* Page with plain WordPress content (e.g. Oglaševanje). */
.zi-page { max-width: 1080px; margin: 0 auto; padding: 64px var(--zi-pad) 96px; }
.zi-page .zi-prose { max-width: none; }
.zi-page .zi-prose > p:first-of-type { font-size: inherit; font-weight: inherit; color: inherit; }
/* Legacy content may still carry Avada shortcodes and floated images. */
.zi-page .zi-prose img.aligncenter { margin: 0 auto; }
.zi-page .zi-prose img.alignleft { float: left; margin: 0 24px 16px 0; }
.zi-page .zi-prose img.alignright { float: right; margin: 0 0 16px 24px; }
.zi-404 { max-width: 760px; margin: 0 auto; padding: 96px var(--zi-pad); text-align: center; display: flex; flex-direction: column; gap: 20px; align-items: center; }
/* ==========================================================================
RESPONSIVE — 900–1200
========================================================================== */
@media (max-width: 1240px) {
:root { --zi-pad: 28px; }
/* Below the design width the constellation cannot keep its exact
coordinates, so it becomes one honest stack: the featured card full
width, the four portals as a 2×2 grid under it. */
.zi-hero { height: auto; padding: 0 0 290px; }
.zi-hero__grid { grid-template-columns: minmax(0, 1fr); padding-top: 72px; }
.zi-hero__copy { max-width: 620px; padding-top: 0; }
.zi-hero__stage { display: none; }
.zi-hero .zi-ring { display: none; }
.zi-ecg { bottom: 150px; height: 72px; }
.zi-stack {
height: auto; margin-top: -120px; padding: 0 var(--zi-pad);
display: flex; flex-direction: column; gap: 20px;
}
/* Must stay positioned: the glow overlay and the ghost numeral are
absolute inside it, and would otherwise escape to .zi-stack and push
the page 40px wider than the phone. */
.zi-featured { position: relative; left: auto; top: auto; width: auto; max-width: 520px; }
.zi-hubs { position: relative; left: auto; right: auto; top: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zi-news { padding-top: 80px; }
.zi-band__in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.zi-band__aside { position: static; }
.zi-abody { grid-template-columns: 56px minmax(0, 1fr); justify-content: normal; }
.zi-aside { grid-column: 1 / -1; position: static; }
.zi-nav a { padding: 10px 8px; font-size: 14px; }
}
/* ==========================================================================
RESPONSIVE — below 900 (mobile spec)
========================================================================== */
/* ==========================================================================
GLAVA: kdaj se meni umakne v gumb (popravljeno 15. 9. 2026)
⚠⚠ Do 15. 9. se je meni umaknil v gumb šele pri 900 px, glava pa je v eni
vrstici potrebovala 1150 px — zato je stran med 901 in 1149 px drsela
vodoravno do 249 px, in to na VSEH straneh. Prej tega nihče ni opazil, ker
QA meri samo 1440 in 390 px.
Izmerjeno (qa/zi-glava-mere.mjs): logotip 86 px, desni del (iskalnik +
gumb Zaposlitev) 195 px, razmika 2 × 32 px, odmika 2 × 28/40 px. Za meni
torej ostane ~780 px pri 1100 px okna. Devet postavk zasede 778 px — komaj
gre; vsaka nova postavka pa doda ~140 px.
Zato zdaj dvoje:
1. med 1101 in 1440 px se meni **stisne** (manjši razmiki in odmiki),
2. pri 1100 px in manj gre meni v **gumb**, ne šele pri 900.
Videz nad 1440 px se ne spremeni — potrjeni dizajn ostane nedotaknjen.
========================================================================== */
/* ⚠ 1439, ne 1440: pri točno 1440 px mora glava ostati taka, kot je bila v
predaji dizajna — tam je rezerve 128 px in krčiti ni česa. */
@media (max-width: 1439px) {
.zi-header__in { gap: 20px; }
.zi-nav a { padding: 10px 9px; }
.zi-header__side { gap: 6px; }
}
@media (max-width: 1100px) {
.zi-nav {
display: none; position: absolute; left: 0; right: 0; top: 100%;
flex-direction: column; align-items: stretch; gap: 0; margin: 0;
background: #fff; border-top: 1px solid var(--zi-border); padding: 8px 8px 16px;
max-height: calc(100vh - 88px); overflow-y: auto;
box-shadow: 0 12px 32px rgba(11, 35, 64, .14);
}
.zi-nav.is-open { display: flex; }
.zi-nav > li > a { min-height: 48px; padding: 0 12px; border-radius: 6px; font: 700 17px/1.2 var(--zi-display); color: var(--zi-ink); justify-content: space-between; }
.zi-nav .zi-current > a { color: var(--zi-primary); background: var(--zi-tint); }
.zi-nav .sub-menu {
position: static; display: none; border: 0; box-shadow: none; padding: 0; min-width: 0;
}
.zi-nav li.is-expanded > .sub-menu { display: block; }
.zi-nav li:hover > .sub-menu { display: none; }
.zi-nav li.is-expanded:hover > .sub-menu { display: block; }
.zi-nav .sub-menu a { min-height: 44px; padding: 0 12px 0 28px; font: 400 16px/1.3 var(--zi-sans); color: var(--zi-ink-2); }
.zi-nav__has > a::after { transition: transform .2s ease-out; }
.zi-nav li.is-expanded > a::after { transform: rotate(180deg); }
.zi-burger { display: flex; }
.zi-burger.is-open { background: var(--zi-tint); }
}
@media (max-width: 900px) {
:root { --zi-pad: 20px; }
/* Header */
.zi-header__in { height: 64px; padding: 0 8px 0 16px; gap: 6px; }
.zi-header.zi-scrolled .zi-header__in { height: 64px; }
.zi-logo img, .zi-header.zi-scrolled .zi-logo img { height: 58px; }
/* Below 900 the header itself is 64px tall, so the open menu may be taller. */
.zi-nav { max-height: calc(100vh - 64px); }
.zi-header__side .zi-btn { padding: 0 14px; font-size: 14px; }
.zi-header__side .zi-btn svg { display: none; }
.zi-search form { padding: 12px 16px; }
/* Hero */
.zi-hero { height: auto; padding: 48px 0 270px; }
.zi-hero .zi-ring { display: none; }
.zi-hero .zi-glow--a { top: -160px; left: -140px; width: 460px; height: 460px; }
.zi-hero .zi-glow--b { bottom: -200px; right: -160px; width: 460px; height: 460px; }
.zi-ecg { bottom: 150px; height: 56px; }
.zi-hero__grid { display: flex; flex-direction: column; padding: 0 var(--zi-pad); gap: 16px; }
.zi-hero__copy { padding-top: 0; max-width: none; gap: 16px; }
.zi-hero h1 { font-size: 2.375rem; }
.zi-hero__lead { font-size: 1.125rem; max-width: none; }
/* ⚠ Od 17. 9. 2026 je v heroju šest povezav, ne dve. Naložene ena pod
drugo bi zasedle pol telefonskega zaslona — glavna ostane čez celo
širino, ostale se preložijo po dve v vrsto. */
.zi-hero__cta { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.zi-hero__cta .zi-btn--grad { flex: 1 1 100%; justify-content: center; }
.zi-hero__cta .zi-btn--outline {
flex: 1 1 calc(50% - 5px); justify-content: center;
padding: 0 12px; font-size: .9375rem;
}
.zi-hero__stage { display: none; }
/* Portal stack */
.zi-stack { margin-top: -100px; padding: 0 16px; gap: 14px; }
.zi-hubs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.zi-featured {
max-width: none; padding: 24px 20px 22px;
box-shadow: 0 24px 60px rgba(4, 17, 36, .35); animation: none;
}
.zi-featured .zi-ghostnum { font-size: 120px; top: -14px; right: -10px; }
.zi-featured .zi-tile { width: 56px; height: 56px; border-radius: 16px; }
.zi-featured .zi-featured__media { height: 100px; }
.zi-featured h2 { font-size: 1.5rem; }
.zi-hub {
height: auto; border-width: 1px; box-shadow: 0 4px 12px rgba(11, 35, 64, .08);
display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start;
padding: 20px; animation: none;
}
.zi-hub .zi-ghostnum { display: none; }
.zi-hub h3 { margin-top: 0; grid-column: 2; }
.zi-hub__sub, .zi-hub__cta { grid-column: 2; }
.zi-hub .zi-tile { grid-row: 1 / span 3; }
.zi-hub__cta { min-height: 32px; margin-top: 4px; }
/* News */
.zi-news { padding: 56px var(--zi-pad) 0; gap: 28px; }
.zi-news__top { grid-template-columns: minmax(0, 1fr); }
.zi-lead { aspect-ratio: 4/5; }
.zi-lead__body { padding: 22px 20px 24px; }
.zi-lead__meta { gap: 10px; }
.zi-lead__more { margin-left: 0; width: 100%; }
.zi-compact { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
.zi-grid3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.zi-sechead { align-items: flex-start; flex-direction: column; gap: 16px; }
/* Bands */
.zi-divider { margin-top: 48px; }
.zi-band--top { margin-top: 48px; }
.zi-band__in { padding: 64px var(--zi-pad); gap: 32px; }
.zi-timeline { padding-left: 28px; }
.zi-timeline::before { left: 3px; }
.zi-tlgroup::before { left: -28px; width: 12px; height: 12px; }
.zi-recipes__in { padding: 64px var(--zi-pad) 72px; gap: 32px; }
.zi-recipes__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.zi-recipe { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; }
.zi-recipe__blob { width: 120px; }
.zi-recipe h3 { font-size: 1.25rem; }
.zi-recipe__body { padding: 0; }
/* Footer */
.zi-footer__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 48px var(--zi-pad) 24px; }
.zi-footer__brand { grid-column: 1 / -1; }
.zi-footer--compact .zi-footer__in { grid-template-columns: minmax(0, 1fr); }
/* ⚠ Trije deli v eni vrstici se pod 1024 px ne izidejo — podpis stisne
letnico v dve vrstici. Zato se vrstica tu ovije in podpis pade v svojo. */
.zi-footer__bar > div { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
.zi-podpis { order: 3; width: 100%; }
/* ⚠ »ToTheMoon« je bil 68×20 px — premajhen za prst. Povezava dobi svoj
prostor, vrstica pa ostane ena, ker se odmik navzgor in navzdol izniči
z negativnim robom. */
.zi-podpis a { display: inline-block; padding: 10px 4px; margin: -10px 0; }
/* Article */
.zi-ahero { min-height: 440px; }
.zi-ahero__in { padding: 80px var(--zi-pad) 28px; }
.zi-crumbs { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.zi-ahero h1 { font-size: 2rem; }
.zi-abody { grid-template-columns: minmax(0, 1fr); padding: 28px var(--zi-pad) 48px; gap: 28px; }
.zi-rail { display: none; }
.zi-prose { font-size: 1.0625rem; line-height: 1.65; max-width: none; }
.zi-prose > p:first-of-type { font-size: 1.25rem; }
.zi-prose blockquote { font-size: 1.25rem; padding: 20px 20px 20px 28px; }
.zi-authorbar { max-width: none; flex-direction: column; align-items: flex-start; }
.zi-aside { position: static; }
.zi-related__in { padding: 48px var(--zi-pad) 64px; }
.zi-related .zi-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; }
.zi-related .zi-card__media { aspect-ratio: 1; }
.zi-related .zi-card__body { padding: 14px 16px; }
/* Listing pages */
.zi-phero__in { padding: 48px var(--zi-pad) 140px; }
.zi-phero__ecg { bottom: 26px; height: 56px; }
.zi-list { padding: 48px var(--zi-pad) 64px; gap: 28px; }
.zi-page { padding: 40px var(--zi-pad) 64px; }
}
@media (max-width: 420px) {
.zi-header__side .zi-btn { display: none; }
}
/* ==========================================================================
OGLASNA MESTA (od 14. 9. 2026)
Samo naši banerji v treh velikostih. Vrtijo se v brskalniku, ne v PHP —
stran se streže iz predpomnilnika in bi bil v PHP izbran baner zamrznjen
v predpomnjeni strani.
========================================================================== */
.zi-oglas {
display: block; margin: 48px auto; text-align: center;
/* ⚠⚠ `width` mora biti tu, ne samo `max-width`. Odkar se baneri prelivajo,
v oknu ni več nobenega kosa v toku in mesto nima svoje naravne širine.
Kjer je mesto otrok postavitve flex in ima `margin: 0 auto` (hero na
telefonu), se je zaradi tega sesedlo na 37 px. */
width: 100%;
max-width: var(--zi-oglas-w, 970px);
}
.zi-oglas__oznaka {
display: block; font: 700 .625rem/1 var(--zi-sans);
letter-spacing: .14em; text-transform: uppercase; color: var(--zi-muted);
margin-bottom: 8px;
}
.zi-oglas__okno { position: relative; }
.zi-oglas__kos { display: block; border-radius: 12px; overflow: hidden; }
.zi-oglas__kos[hidden] { display: none; }
.zi-oglas__kos img { width: 100%; height: auto; display: block; }
/* V članku stoji sredinsko med odstavki, z zrakom nad in pod. */
.zi-oglas--vmes { margin: 36px auto; }
/* V stranskem stolpcu se prilepi, da je viden dlje. */
.zi-aside .zi-oglas { margin: 0 auto; }
.zi-oglas--stolp { max-width: 300px; }
/* Nad nogo: na svetli podlagi, čez celo širino vsebine. */
.zi-oglas--noga { margin: 0 auto 56px; }
@media (max-width: 900px) {
/* ⚠ Povezava z imenom avtorja je visoka 19–21 px — za prst premalo.
Tarčo povečamo z navidezno ploskvijo, ne z odmikom: odmik bi premaknil
vrstico s podatki, ploskev pa ne spremeni videza niti za piko.
Sega samo čez širino same povezave, zato sosedom ne krade klikov. */
.zi-ahero__meta a,
.zi-authorbar__name a { position: relative; }
.zi-ahero__meta a::after,
.zi-authorbar__name a::after {
content: ""; position: absolute; left: 0; right: 0; top: 50%;
height: 44px; transform: translateY(-50%);
}
.zi-oglas { margin: 32px auto; }
.zi-oglas--noga { margin: 0 auto 32px; }
}
/* --- Gradivo: iskalnik, predmeti, kartice --------------------------------
Zapiskov je po združitvi poddomen skoraj 1.700. Nihče jih ne bo prelistal —
pride po svoj predmet in gre. Zato sta iskalnik in seznam predmetov nad
vsebino, kartica pa pove, kaj je v zapisu, ne samo kako mu je ime.
------------------------------------------------------------------------ */
.zi-gradivo { background: var(--zi-surface); }
.zi-gradivo__in {
max-width: var(--zi-max); margin: 0 auto; padding: 56px var(--zi-pad) 96px;
display: flex; flex-direction: column; gap: 40px;
}
.zi-orodja { display: flex; flex-direction: column; gap: 20px; }
.zi-orodja__isci { display: flex; gap: 10px; max-width: 720px; }
.zi-orodja__isci input[type="search"] {
flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 18px;
border: 1.5px solid var(--zi-border-strong); border-radius: 10px;
background: #fff; color: var(--zi-ink); font: 400 1rem/1 var(--zi-sans);
transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.zi-orodja__isci input[type="search"]:focus {
outline: none; border-color: var(--zi-primary);
box-shadow: 0 0 0 3px rgba(17, 96, 180, .14);
}
.zi-orodja__isci .zi-btn { min-height: 52px; border: 0; cursor: pointer; font-family: var(--zi-display); flex: none; }
.zi-orodja__predmeti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zi-orodja__naziv {
font: 700 .8125rem/1 var(--zi-sans); letter-spacing: .06em;
text-transform: uppercase; color: var(--zi-muted); margin-right: 4px;
}
.zi-orodja__predmeti a {
display: inline-flex; align-items: center; gap: 7px;
min-height: 38px; padding: 0 14px; border-radius: 999px;
border: 1px solid var(--zi-border); background: #fff;
font: 600 .875rem/1 var(--zi-sans); color: var(--zi-ink-2);
transition: border-color .15s ease-out, color .15s ease-out, background .15s ease-out;
}
.zi-orodja__predmeti a:hover { border-color: var(--zi-primary); color: var(--zi-primary); background: var(--zi-tint); }
.zi-orodja__predmeti a em {
font-style: normal; font-size: .75rem; font-weight: 700;
color: var(--zi-muted); padding-left: 2px;
}
/* Štiri v vrsto: pri 1560 px vsebine je kartica ~366 px, kar je za naslov in
nekaj vrstic besedila dovolj, hkrati pa se na en zaslon vidi dvakrat več
gradiva kot pri treh. */
.zi-gmreza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
/* Ista kartica kot v arhivih, le slikovno polje je nižje (140 namesto 210 px):
pri zapiskih pove naslov več kot slika, in večina jih naslovne slike nima —
dobijo temno ploščico z ikono rubrike. */
.zi-gkart .zi-gkart__media { height: 140px; }
.zi-gkart .zi-card__body { padding: 18px 18px 16px; gap: 9px; }
.zi-gkart .zi-card__body h3 { font-size: 1rem; line-height: 1.32; }
.zi-gkart .zi-card__excerpt {
font-size: .875rem; line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.zi-gkart__oznake { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 2px; }
.zi-gkart__oznake span {
font: 600 .6875rem/1 var(--zi-sans); color: var(--zi-muted);
padding: 5px 8px; border-radius: 5px; background: var(--zi-ghost);
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ⚠ Noga se poravna na dno kartice, ne oznake. Ker so kartice v mreži enako
visoke, naslov pa ima eno do tri vrstice in oznak je od nič do štiri, bi
se sicer datum in »Preberi več« lovili na različnih višinah — v vrsti štirih
kartic se to takoj vidi. */
.zi-gkart .zi-card__foot { margin-top: auto; padding-top: 10px; }
/* Kjer besedila ni, ampak je vdelan dokument (Strokovno gradivo). */
.zi-gkart__dokument {
display: inline-flex; align-items: center; gap: 7px;
font: 600 .8125rem/1.3 var(--zi-sans); color: var(--zi-primary);
padding: 7px 10px; border-radius: 7px; background: var(--zi-tint);
align-self: flex-start;
}
.zi-gkart__dokument svg { flex: none; }
.zi-prazna {
display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
max-width: 620px; padding: 40px 0 20px;
}
.zi-prazna h2 { font-size: 1.5rem; color: var(--zi-ink); }
.zi-prazna p { font-size: 1.0625rem; line-height: 1.6; color: var(--zi-ink-2); }
/* The timeline sections get the same tools above them. */
.zi-band__in .zi-orodja { margin-bottom: 8px; }
.zi-band__in .zi-orodja__naziv { color: var(--zi-on-navy); }
.zi-band__in .zi-orodja__predmeti a {
background: rgba(255, 255, 255, .06); border-color: var(--zi-line-navy); color: #fff;
}
.zi-band__in .zi-orodja__predmeti a:hover { background: rgba(255, 255, 255, .12); border-color: var(--zi-outline-navy); color: #fff; }
.zi-band__in .zi-orodja__predmeti a em { color: var(--zi-on-navy); }
@media (max-width: 1400px) {
.zi-gmreza { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
.zi-gmreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.zi-gradivo__in { padding: 32px var(--zi-pad) 64px; gap: 28px; }
.zi-gmreza { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.zi-gkart { padding: 20px; }
.zi-orodja__isci { flex-direction: column; }
.zi-orodja__isci .zi-btn { justify-content: center; }
}
/* --- Oddaja gradiva ------------------------------------------------------
The form students and staff send material with. It sits inside .zi-page,
so it inherits the reading width; everything here is the same ink, the same
border and the same blue as the rest of the site — a form is not the place
for a second visual language.
The three steps are numbered because the list of fields is long and almost
all of it is optional: the numbers say "this is short, keep going".
------------------------------------------------------------------------ */
.zi-oddaja { max-width: 780px; }
.zi-oddaja__uspeh,
.zi-oddaja__napaka {
border-radius: 12px; padding: 20px 24px; margin-bottom: 28px;
display: flex; flex-direction: column; gap: 6px;
}
.zi-oddaja__uspeh {
background: #EAF7F0; border: 1px solid #BFE5D0;
}
.zi-oddaja__uspeh h2 { font-size: 1.25rem; color: #14663C; }
.zi-oddaja__uspeh p { color: var(--zi-ink-2); line-height: 1.6; }
.zi-oddaja__napaka {
background: #FDF1EC; border: 1px solid #F3C9B8; color: #8A3418;
line-height: 1.55;
}
.zi-oddaja__form {
display: flex; flex-direction: column; gap: 28px;
background: #fff; border: 1px solid var(--zi-border);
border-radius: 16px; padding: 36px 40px 40px;
box-shadow: var(--zi-shadow-card);
}
.zi-oddaja__set { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.zi-oddaja__set + .zi-oddaja__set { border-top: 1px solid var(--zi-border); padding-top: 28px; }
/* ⚠ A