/* Width is set by the container, never by the element inside it. Client's rule, 11. 9. 2026: if .wrap already limits the line, a second cap on the paragraph is one more place to change and one more thing to disagree with itself. Sections that want a narrower measure use .wrap--text. */ /* SBT Portal — components. * * Reproduces the client-approved vzorec C composition. The markup contract * lives in sbt-portal-strani/includes/lib.php; if you rename a class here, * rename it there too. * * Nothing hard-codes a colour — tokens.css is the only source. Where the * sample used a literal hex it was measured first: all passed except * #8b9793 for photo captions on white (3.02), which uses --muted instead. */ /* ---------------------------------------------------------------- header */ .site-head{background:var(--band-deep);color:var(--band-ink);box-shadow:0 1px 0 var(--band-edge);position:sticky;top:0;z-index:50} .topbar{border-bottom:1px solid rgb(var(--band-veil) / .15);font-size:var(--step--1)} .topbar-in{display:flex;gap:var(--s-2) var(--s-5);justify-content:flex-end;align-items:center; padding-block:var(--s-2);flex-wrap:wrap} .topbar a,.topbar>span,.topbar-item{color:var(--band-ink);text-decoration:none; display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:1px 4px} .topbar .sbt-icon{width:15px;height:15px;opacity:.75;flex:none} .topbar a:hover{text-decoration:underline} @media (max-width:640px){.topbar .topbar-mail{display:none}} .num{font-variant-numeric:tabular-nums} /* ------------------------------------------------- a unit's telephone lines * * A unit is rarely one number. The Ginekološko porodni oddelek has three — * porodnišnica, ginekologija, samoplačniške storitve — and the Urgentni * center has one for illness and one for injury. Until 19 September 2026 the * portal printed whichever the database returned first, which on the maternity * page was the self-pay desk. * * So the label is not decoration here: it is the difference between the * delivery room and the cashier, and a reader must meet it BEFORE the digits * rather than look back up afterwards. It sits on its own line above its * number and stays at --step--1, never smaller. * * Used inside a
on unit pages and inside a table cell on /kontakti/, so * it sets no width and no alignment of its own. Still no tel: — 112 is the * only call link on this portal. */ .tel-lines{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)} .tel-lines>li{margin:0} .tel-lines .tel-what{display:block;font-size:var(--step--1);line-height:1.3; color:var(--muted)} .tel-lines .num{font-weight:600} /* Emergency reachable at every width — vzorec C has nothing in the chrome, which on a hospital site is a regression. See docs/OPEN-QUESTIONS.md #2. The colour is NOT inherited from .topbar a, and that is the whole point of writing it here. This pill is a FILL standing on the band, so what belongs on it is the token that names what is printed on that fill; what .topbar a carries is --band-ink. Those two are the same white on every dark-band palette and opposites on a light one, where inheritance put dark type on the pill at 3.26:1. 19. 9. 2026 - THE PILL NO LONGER WEARS THE PALETTE'S ACCENT. It used to be `background:var(--coral)`. Under `jezero`, which the client activated on 19. 9. 2026, that token holds GREEN - and green on this portal is what the state chip beside every clinic's opening hours means by *odprto*. The route to emergency care was therefore painted in the one colour that says "everything is fine". Measured on the live page, it was also 1.53:1 against the band behind it, so it had no shape either: 1.4.11 asks 3.0. --danger is its own token for the same reason --band-ink-accent is: the emergency route does not follow a colour scheme. It is WARM on every palette, light on a dark band and dark on a light one, and tools/kontrast.php measures it against the band and against its own type. Under `jezero` it now measures 4.85 against the band and 6.72 for the type on it. Found by tools/kontrast-zivi.mjs — axe-core over the rendered page under the Nebo palette — and not by the pair table, which had the pair right all along (on-brand on accent, and it names this very selector) while the CSS handed it the wrong token. That is the second defect that tool has caught which a list written by reading the CSS could not, and it is the argument for keeping both. The selector is .topbar .topbar-urgent and not .topbar-urgent, which is the second half of the same defect: .topbar a is (0,1,1) and beats a bare class, so the first fix set the right token on a rule that lost the cascade and axe reported the identical 3.26:1 a second time. Measured again, not assumed. 1. 10. 2026: the same red as the 112 tile (--sos) with white type, at the hospital's request, and deliberately WITHOUT the white ring the 112 tile wears. Against a dark band the red measures only 1.24-1.26, so the pill's outline does not reach 3:1 — but 1.4.11 asks a boundary only of what is needed to identify a control, and this link is identified by its words, white on the red at 6.04. The pairs are in kontrast-lib.php, and the unmeasured outline is in its list of things not checked on purpose. */ .topbar .topbar-urgent{background:var(--sos);color:var(--sos-ink);border-radius:999px;padding:2px var(--s-3) !important; font-weight:700} .topbar .topbar-urgent:hover{background:var(--sos-hover);color:var(--sos-ink);text-decoration:none !important} .head-row{display:flex;align-items:center;gap:var(--s-5);padding-block:var(--s-4);flex-wrap:wrap} .brand{display:inline-flex;align-items:center;min-height:44px} .brand img{height:42px;width:auto;filter:var(--logo-filter)} /* ------------------------------------------------------------ navigation MUST work with JavaScript disabled. The old theme hid .mega with display:none and revealed it only through a JS class, leaving a phone with JS off no navigation at all. :hover and :focus-within carry it. */ .main-nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap} .main-nav>a,.nav-branch>a{color:var(--band-ink);text-decoration:none;padding:var(--s-3); border-radius:8px;font-weight:600;display:inline-flex;align-items:center;min-height:44px} .main-nav>a:hover,.nav-branch>a:hover{background:rgb(var(--band-veil) / .12)} .main-nav [aria-current="page"]{box-shadow:inset 0 -3px 0 var(--nav-current)} /* YOU ARE HERE, one level up: /novice/ marks Obveščanje. The branch link is not the page the reader is on, so it must not claim aria-current — it gets the same bar through a class instead. Same token, same meaning, no lie. */ .nav-branch.is-here>a{box-shadow:inset 0 -3px 0 var(--nav-current)} /* Containing block for the mobile overlay nav below. */ .head-row{position:relative} .nav-branch{position:relative;display:flex;align-items:center} /* The disclosure control. One job: open and close the panel. It is a sibling of the branch link rather than the link itself, because a link that is also a toggle cannot honestly be either — see the note in header.php. --band-ink-soft measures 8.03 on --band-deep, well past the 3:1 that 1.4.11 asks of the caret, which is the only thing making this a control: it carries no fill and no visible label. 32x44 clears 2.5.8. */ .nav-toggle{background:none;border:0;padding:0 var(--s-2);min-width:32px;min-height:44px; display:inline-flex;align-items:center;justify-content:center;cursor:pointer; color:var(--band-ink-soft);border-radius:8px} .nav-toggle:hover{color:var(--band-ink);background:rgb(var(--band-veil) / .12)} .nav-chev{width:8px;height:8px;border-right:2px solid;border-bottom:2px solid; transform:translateY(-2px) rotate(45deg);transition:transform .18s} .nav-toggle[aria-expanded="true"] .nav-chev{transform:translateY(2px) rotate(-135deg)} .mega{position:absolute;left:0;top:100%;min-width:16rem;background:var(--card);color:var(--ink); border-radius:var(--r);box-shadow:0 18px 40px rgb(var(--shade-rgb) / .22);padding:var(--s-3); opacity:0;visibility:hidden;transition:opacity .12s} /* WITHOUT JavaScript these two rules are the whole mechanism, exactly as before: hover opens the panel, and :focus-within opens it for the keyboard. WITH JavaScript the panel's state is the `hidden` attribute instead — which site.css already enforces with display:none !important — and the rule below keeps a panel the script has opened visible. The two cannot fight: a hidden element has no opacity to argue about. */ .nav-branch:hover>.mega,.nav-branch:focus-within>.mega{opacity:1;visibility:visible} .js .nav-branch>.mega:not([hidden]){opacity:1;visibility:visible} .mega ul{list-style:none;margin:0;padding:0} .mega a{display:flex;align-items:center;min-height:44px;padding:var(--s-3);border-radius:8px; color:var(--ink);text-decoration:none} .mega a:hover{background:var(--tint)} .mega a[aria-current="page"]{background:var(--tint2);font-weight:700} /* THE FOCUS RING INSIDE THE PANEL HAS TO BE THE PANEL'S RING, NOT THE BAND'S. assets/site.css gives .site-head :focus-visible a WHITE outline, because the masthead is a dark band. The panel that drops out of it is a white card, so a keyboard landing on "Novice" got a white ring on white — a focus indicator that is only there in the computed styles. Nothing automated catches that: axe does not measure focus contrast and tools/a11y-keyboard.mjs asks whether an outline EXISTS. It was found by opening the menu with the keyboard and looking at it. Only above the mobile breakpoint: below it the panel sits on the band and the band's white ring is the correct one. The box-shadow is restated because the aria-current rule above sets an inset shadow of its own and would otherwise swallow the ring's halo on the current item — which is exactly the item the keyboard lands on first. */ /* Prenatrpan meni med 1024 in 1149 px — 22. 9. 2026. * * Vsebnik glave je omejen na --wrap. Ko je »Za napotne zdravnike« odšel pod * »O bolnišnico«, se meni od 1150 px navzgor ne prelamlja več (glava 201 -> 133 px), * pod tem pa še vedno: pri 1100 px potrebuje 1074 px od 1060 razpoložljivih, * pri 1024 px 1068 od 984. Manjka torej od 14 do 85 px. * * Med 921 in 1023 px stiskanje ni zadostovalo — tam meni prevzame gumb; prag * je bil zato prestavljen z 920 na 1023 px. Od 1024 navzgor je meni v eni * vrstici in glava visoka 129-133 px namesto 201. * * Meni se v tem pasu stisne in ne skrije pod gumb. Prag za gumb je 1023 px: * na prenosniku je vidnih pet vej boljših od skritih — to je bolnišnica in * obiskovalec pogosto ne ve, katero besedo naj išče. Stisne se samo * VODORAVNI odmik; višina postavke in tarča ostaneta (min-height 44 px na * gumbu, vrstična višina na povezavi), zato ostane izpolnjeno tudi * WCAG 2.5.8. */ @media (min-width:1024px) and (max-width:1149px){ .main-nav>a,.nav-branch>a{padding-inline:calc(var(--s-3) - 5px)} .nav-toggle{min-width:24px;padding-inline:2px} .main-nav{gap:0} } @media (min-width:1024px){ .site-head .mega a:focus-visible{outline:2px solid var(--teal);outline-offset:2px; box-shadow:0 0 0 4px var(--card)} .site-head .mega a[aria-current="page"]:focus-visible{ box-shadow:0 0 0 4px var(--card),inset 0 -3px 0 var(--teal)} } /* The booking CTA, and the ring that gives it a shape. White text on it measures 4.90 under `jezero` and passes 1.4.3. The BUTTON measured 1.53 against the band and failed 1.4.11, which asks 3.0 for the visual boundary of a control - so the most important control on a hospital site was readable and invisible at the same time. Measured on the live page on 19. 9. 2026, not reasoned about. The ring rather than a lighter accent, because there is no lighter accent to have: white type on the fill caps its luminance and 3:1 against the band floors it, and the two do not overlap on any of the four dark-band palettes. `box-shadow: inset` rather than `border`, because a border would move the text 2px and the client asked that nothing but colour change. */ .nav-cta{background:var(--accent);color:var(--on-brand) !important;font-weight:700; padding:var(--s-3) var(--s-5) !important;border-radius:999px; box-shadow:inset 0 0 0 2px var(--control-edge)} .nav-cta:hover{background:var(--accent-hover)} /* The phone menu button. Its border is the ONLY thing that makes it a button — there is no fill and no label, only a glyph — and at .35 of the veil it measured 2.09-2.30 against the band. Found at 400px by the browser check in tools/kontrast-zivi.mjs, which is the only width it is visible at. */ .burger{display:none;background:none;border:1px solid rgb(var(--band-veil) / .65);color:var(--band-ink); border-radius:10px;min-width:44px;min-height:44px;align-items:center;justify-content:center} .burger .ico-close,.burger[aria-expanded="true"] .ico-open{display:none} .burger[aria-expanded="true"] .ico-close{display:block} @media (max-width:1023px){ .burger{display:inline-flex} /* Overlay, as in the sample: the open menu covers the page instead of pushing the hero down, so opening it does not move what is underneath. .site-head is already position:sticky, which is a containing block. flex-wrap MUST be nowrap here. .main-nav wraps by design on the desktop bar, and a column flex container with a capped height (.is-open caps it at 70vh) wraps into extra COLUMNS — which is exactly what happened: three 256px columns marching off the right edge of a 390px phone. */ .main-nav{position:absolute;top:100%;left:0;right:0;margin:0; background:var(--band-deep);flex-direction:column;flex-wrap:nowrap; align-items:stretch;gap:2px;padding:8px 16px 18px} /* Stacked, so the branch link and its toggle share a row and the panel drops to a full-width line underneath. */ .nav-branch{flex-wrap:wrap;justify-content:space-between} .nav-branch>a{flex:1 1 auto} .nav-toggle{min-width:44px} .mega{position:static;opacity:1;visibility:visible;box-shadow:none;background:transparent; color:inherit;padding-left:var(--s-5);min-width:0;flex:0 0 100%} .mega a{color:var(--band-ink)} .mega a[aria-current="page"]{background:rgb(var(--band-veil) / .16)} .mega a:hover{background:rgb(var(--band-veil) / .12)} .nav-cta{margin-top:var(--s-3);justify-content:center} /* The nav was stacked but never hidden, so all five branches and every submenu rendered expanded: the header measured 1157px tall on a 390px screen against the sample's 157, pushing every bit of content off screen. It is hidden only under `.js`. Without JavaScript the burger cannot toggle anything, so the nav stays visible — long, but present. Hiding it unconditionally would leave a phone with JS off no navigation at all, which is the exact defect we removed from the old theme. */ .js .main-nav{display:none} .js .main-nav.is-open{display:flex} .js .main-nav.is-open{max-height:min(70vh,32rem);overflow-y:auto; padding-bottom:var(--s-4)} } /* ------------------------------------------------------------------ hero */ /* Interior pages are NOT dark in vzorec C. All three sample sub-pages (narocanje, cakalne-dobe, dostopne-storitve) open with a light .page-head on paper: small muted breadcrumb, teal-deep h1, muted lede. Only the homepage carries the photographic band. Painting every page with the dark band was the single largest departure from the approved design. Scoped with :not(.hero) rather than by source order, so the homepage cannot be reached by these rules whatever order the file ends up in. */ .page-hero:not(.hero){padding-block:48px 8px} .page-hero:not(.hero) h1{font-size:clamp(30px,4.6vw,44px);color:var(--teal-deep);margin:10px 0 12px} .page-hero:not(.hero) .hero-lede{font-size:18.5px;color:var(--muted);opacity:1} .page-hero:not(.hero) .hero-kicker{color:var(--teal);margin:0} .page-hero:not(.hero) .breadcrumbs{font-size:14.5px;color:var(--muted)} .page-hero:not(.hero) .breadcrumbs a{color:var(--teal);text-decoration:none} .page-hero:not(.hero) .breadcrumbs a:hover{text-decoration:underline} /* The homepage keeps white type over the photograph. */ .hero h1,.hero .hero-lede{color:var(--on-brand)} /* Homepage hero: photograph behind text. * * CONTRAST IS LOAD-BEARING. The scrim is what makes white text legible over * the photographs, and since 1. 10. 2026 it is two layers: * * a light wash over the whole hero (.37 → .50 → .70), so the building shows — * the hospital found the old even .72-.88 too dark; * a shade behind the headline only (.82 at its core), so the text keeps its * contrast where the wash alone would not. * * Measured per pixel, not assumed: tools/hero-kontrast.mjs photographs the * three slides without the scrim at 1440 and 390, composites this scrim over * every pixel behind every line of text, and reports the 0.5th percentile. * Under jezero: kicker 4.67, h1 5.62, lede 5.70 (need 4.5 / 3.0 / 4.5). The * old even scrim measured 3.27 / 3.93 / 3.88 the same way — the second slide * (b3_urgent) is near white behind the text, and the old note's "5.74 against * a white area" was true only of the darker base scrim. * Re-run the tool after changing either layer or any slide. */ /* No min-height: in the approved sample the hero's height is set entirely by its content, and its content includes the four task cards (.hero contains .qa-grid there). That is why the sample is 639px tall at 1440 and 1477 at 390 — on a phone the cards stack into one column and the photograph grows with them. A fixed min-height reproduced the desktop number and missed the mobile one by 900px, because it was guessing at a height the content owns. Padding is the sample's own 60/44. */ .hero{position:relative;overflow:hidden;isolation:isolate; padding-block:3.75rem 2.75rem} .hero>.wrap{position:relative;z-index:2} .hero-bg{position:absolute;inset:0;z-index:0;background:var(--band-deep)} .slide{position:absolute;inset:0;background-size:cover;background-position:center; filter:blur(3px) saturate(1.06) brightness(1.6);transform:scale(1.06);opacity:0; animation:heroSlides 27s infinite;will-change:opacity} /* WebP with a JPEG fallback. The url() declaration comes first so a browser that does not understand image-set() simply keeps it; one that does takes the second declaration and picks the WebP. Only the FIRST slide loads with the page. Slides two and three do not appear until 9 and 18 seconds in, and the browser was fetching all three during the initial render — 243 KB of images for a hero nobody had looked at yet. They are attached once .hero-bg gets .ready, which site.js sets on window load. With JavaScript off the hero is a single still image, which is exactly what prefers-reduced-motion already gets. */ .slide:nth-child(1){animation-delay:0s;opacity:1; background-image:url(img/b1_front.jpg); background-image:image-set(url(img/b1_front.webp) type("image/webp"), url(img/b1_front.jpg) type("image/jpeg"))} .slide:nth-child(2){animation-delay:9s} .slide:nth-child(3){animation-delay:18s} .hero-bg.ready .slide:nth-child(2){ background-image:url(img/b3_urgent.jpg); background-image:image-set(url(img/b3_urgent.webp) type("image/webp"), url(img/b3_urgent.jpg) type("image/jpeg"))} .hero-bg.ready .slide:nth-child(3){ background-image:url(img/b2_historic.jpg); background-image:image-set(url(img/b2_historic.webp) type("image/webp"), url(img/b2_historic.jpg) type("image/jpeg"))} .hero-scrim{position:absolute;inset:0;z-index:1; background: radial-gradient(ellipse 55% 45% at 40% 20%,rgb(var(--scrim-a) / .82) 0%,rgb(var(--scrim-a) / .80) 55%,rgb(var(--scrim-a) / 0) 100%), linear-gradient(180deg,rgb(var(--scrim-a) / .37),rgb(var(--scrim-b) / .50) 45%,rgb(var(--scrim-a) / .70))} /* On a phone the text spans the width, so the shade is a band over the top. */ @media (max-width:760px){ .hero-scrim{background: linear-gradient(180deg,rgb(var(--scrim-a) / .82) 0%,rgb(var(--scrim-a) / .80) 22%,rgb(var(--scrim-a) / 0) 30%), linear-gradient(180deg,rgb(var(--scrim-a) / .37),rgb(var(--scrim-b) / .50) 45%,rgb(var(--scrim-a) / .70))} } /* Narrow viewports take the 900px copy of the backdrop. The slide is blurred by 3px and scaled 1.06, so detail below about six device pixels is destroyed before it is ever seen — a 1800px source on a 390px phone was 132 KB spent on pixels the blur removes. 46 KB instead. */ @media (max-width:760px){ .slide:nth-child(1){ background-image:url(img/b1_front-900.jpg); background-image:image-set(url(img/b1_front-900.webp) type("image/webp"), url(img/b1_front-900.jpg) type("image/jpeg"))} .hero-bg.ready .slide:nth-child(2){ background-image:url(img/b3_urgent-900.jpg); background-image:image-set(url(img/b3_urgent-900.webp) type("image/webp"), url(img/b3_urgent-900.jpg) type("image/jpeg"))} .hero-bg.ready .slide:nth-child(3){ background-image:url(img/b2_historic-900.jpg); background-image:image-set(url(img/b2_historic-900.webp) type("image/webp"), url(img/b2_historic-900.jpg) type("image/jpeg"))} } @keyframes heroSlides{0%{opacity:0}3%{opacity:1}30%{opacity:1}36%{opacity:0}100%{opacity:0}} /* A blurred image cross-fading behind text is what reduced-motion is for. */ @media (prefers-reduced-motion:reduce){ .slide{animation:none} .slide:nth-child(1){opacity:1} .slide:nth-child(2),.slide:nth-child(3){opacity:0} } .hero-search{margin-top:var(--s-6);display:flex;gap:var(--s-3);flex-wrap:wrap} /* The placeholder repeats the label; showing both printed it as loose text. */ .hero-search label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .hero-search input[type="search"]{flex:1 1 18rem;min-height:54px} /* --teal-deep IS --scrim-a on three of the six palettes, so over a dark part of the hero photograph this button was a rectangle of exactly the colour behind it: 1.26-1.86 measured against the scrim at its lightest. The same ring as the booking CTA, for the same criterion. */ .hero-search button{display:inline-flex;align-items:center;gap:var(--s-2);min-height:54px; padding-inline:var(--s-5);border:0;border-radius:var(--r);background:var(--teal-deep); color:var(--on-brand);font:inherit;font-weight:700;cursor:pointer; box-shadow:inset 0 0 0 2px var(--control-edge)} .hero-search button:hover{background:var(--teal)} /* Since the lighter scrim (1. 10. 2026) these two stand on light photograph as well as dark: the white ring was 2.75 / 2.23 against the brightest of it. A dark ring outside the white one keeps an edge on both — dark against light, white against dark. tools/hero-kontrast.mjs measures it. */ .hero-search button,.hero .qa-primary{ box-shadow:inset 0 0 0 2px var(--control-edge),0 0 0 2px var(--ink)} .hero-kicker{text-transform:uppercase;letter-spacing:.14em;font-size:15px; font-weight:700;color:var(--tint);margin:0} /* The sample's own metrics. The fluid steps are right for body copy but drift above the comp in the hero, where every value is deliberate. */ .hero h1{font-size:clamp(34px,5.4vw,52px);margin:10px 0 12px} .hero-lede{font-size:19px;line-height:1.6;margin:0} .breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-4); padding:0;font-size:var(--step--1)} .breadcrumbs li+li::before{content:"\203A";margin-right:var(--s-2);opacity:.6} .breadcrumbs a{color:var(--on-brand)} /* The cards sit inside the hero, on the photograph — they no longer overlap its lower edge from outside, so there is no negative margin to pull. */ .qa-lift{position:relative;z-index:3;padding:1.875rem 0 .5rem} /* The sample's callout under a page head. Metrics are its own. */ .notice-box{display:flex;gap:var(--s-3);align-items:flex-start;margin-top:var(--s-5); background:var(--tint);border:1px solid var(--tint2);border-radius:var(--r);padding:16px 20px} .notice-box p{margin:0} .notice-box .sbt-icon{width:20px;height:20px;flex:none;color:var(--teal);margin-top:.2em} /* A notice box written INTO page content (a block group from the old portal: paragraphs, a list, a closing line) is not the portal's icon-and-sentence row. As a flex row it laid its paragraphs side by side and pushed the page sideways (Anesteziološka ambulanta, 29. 9. 2026). */ .wp-block-group.notice-box{display:block} .wp-block-group.notice-box > * + *{margin-top:var(--s-2)} /* Promoted from migrated content: the old site set these paragraphs in red to mean "urgent". The colour is stripped with every other inline style; the meaning survives as a component. Amber rather than red — red on a hospital page is the emergency route, and a mask notice is not that. */ .notice-warn{background:var(--warn-bg);border-color:var(--warn-line)} /* Disclosure promoted from the old theme's collapse widget. */ /* Plain list of links with a value beside each, used where a table would be three columns of which two are empty. */ /* While a live region is fetching. Deliberately faint and slow to appear: the swap is usually done in under 200ms and a flashing table is worse than a still one. */ [data-sbt-live].is-loading [data-sbt-live-region]{opacity:.55;transition:opacity .12s .15s} [data-sbt-live-region]{transition:opacity .12s} @media (prefers-reduced-motion:reduce){ [data-sbt-live].is-loading [data-sbt-live-region], [data-sbt-live-region]{transition:none} } /* ------------------------------------------------- pointer target size * * WCAG 2.2 AA, 2.5.8: a pointer target is at least 24x24 CSS px, unless it is * inline within a block of text. Measured before this rule: 192 sitemap links, * every breadcrumb link and several standalone calls to action were 17-23px * tall — they are lists of navigation targets, not prose, so the inline * exception does not cover them. * * inline-flex rather than padding so the box grows around the text without * shifting the baseline of the line it sits on. */ .map-list a, .breadcrumbs a, .fast-cta a, .fast-src a, .filters-clear, .plain-list a, .pager a, .site-foot a, .side-navigation a, .kv dd > a:only-child, :is(h1,h2,h3,h4,h5,h6) > a:only-child, /* A link that is the entire content of a block is a standalone target however it got there — including inside migrated Bootstrap markup we did not write. The inline-in-prose exception does not apply when there is no prose. */ :is(p,div,li,dd,details,td,th) > a:only-child{min-height:24px;display:inline-flex;align-items:center} /* Links inside migrated content sit in markup we did not write — Bootstrap card bodies, disclosure panels — where they are neither a lone child nor inline in prose, and they measure 19-21px. Vertical padding is the right tool for an inline element: it grows the hit area without moving the line box, so the text does not shift. */ .dept-list a, .disclosure a{padding-block:3px} /* ------------------------------------------------------------- news list */ /* The page this replaces ran every headline and date together into one paragraph. Each item is its own block with the date above the headline, because a date read after a headline is noise and read before it is context. */ .news-list{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:var(--s-4)} .news-item{background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:var(--s-5)} .news-item .news-date{margin:0 0 var(--s-2);font-size:14.5px;color:var(--muted); text-transform:uppercase;letter-spacing:.05em;font-weight:700} .news-item .news-title{margin:0;font-size:var(--step-1);text-wrap:pretty} .news-item .news-title a{color:var(--teal-deep);text-decoration:none} .news-item .news-title a:hover{text-decoration:underline} .news-item p{margin:var(--s-2) 0 0;color:var(--muted)} /* An obvestilo is an operational change, and --notice is the token that says so. It wore --accent until 19. 9. 2026: the colour that means "act on this" was being used to say what a card IS, and under `jezero` the accent is green — so a notice that a clinic is SHUT was drawn in the colour that clinic's own page uses for "odprto". See tokens.css, WHAT A COLOUR MEANS. */ .news-item.is-notice{border-left:4px solid var(--notice)} .news-item.is-notice .news-date{color:var(--notice-ink)} /* Visually hidden, but read: the pager's numbers mean nothing spoken alone. */ .lbl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* A plain inventory of role names — many items, no action on each, so a multi-column list rather than a card per row. */ .role-list{list-style:none;margin:var(--s-4) 0 0;padding:0; columns:2;column-gap:var(--s-6)} .role-list li{break-inside:avoid;padding:var(--s-2) 0;border-bottom:1px solid var(--line); font-size:15.5px} @media (max-width:760px){.role-list{columns:1}} .plain-list{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(min(19rem, 100%), 1fr))} .plain-list li{background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:var(--s-4) var(--s-5)} .muted{color:var(--muted)} .disclosure{border:1px solid var(--line);border-radius:var(--r);background:var(--card); padding:var(--s-4) var(--s-5);margin-block:var(--s-5)} .disclosure>summary{cursor:pointer;font-family:var(--font-display);font-weight:700; font-size:var(--step-1);color:var(--teal-deep);list-style:none; display:flex;align-items:center;gap:var(--s-3);min-height:44px} .disclosure>summary::-webkit-details-marker{display:none} .disclosure>summary::before{content:"";width:.55em;height:.55em;flex:none; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);transition:transform .15s} .disclosure[open]>summary::before{transform:rotate(-135deg)} @media (prefers-reduced-motion:reduce){.disclosure>summary::before{transition:none}} .notice-warn>p:first-child{margin-top:0} .notice-warn>*:last-child{margin-bottom:0} /* Migrated body copy. Headings promoted from

LABEL: land here, as do the paragraphs that used to be centred or justified by hand. No max-width: the card is already the measure, and a second cap inside it just stops the text short of its own container. */ .dept-list :is(h3,h4)+p{margin-top:var(--s-2)} /* -------------------------------------------------------------- sections */ .band{padding-block:var(--s-7)} .band-lede{color:var(--muted);margin-top:calc(var(--s-4) * -1)} /* ----------------------------------------------------------------- cards */ /* Explicit column counts rather than auto-fit: auto-fit reflows at whatever width 15rem happens to fall at, which put three cards on one row and one orphan on the next at tablet widths. The sample breaks 4 -> 2 -> 1. */ .qa-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4); grid-template-columns:repeat(4,1fr)} @media (max-width:920px){.qa-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.qa-grid{grid-template-columns:1fr}} .qa-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:22px 20px 18px;position:relative;display:flex;flex-direction:column;gap:10px} .qa-card .qa-title{margin:0;font-size:21px;color:var(--teal-deep);text-wrap:pretty} .qa-card a{color:var(--teal);text-decoration:none} /* One link per card, stretched — wrapping the whole block in an anchor makes screen-reader link text unusable. */ .qa-card a::after{content:"";position:absolute;inset:0} .qa-card:hover{border-color:var(--line-strong)} /* Selector weight matters here: `.band p{color:var(--muted)}` further down ties with a bare `.qa-card p` and wins on order, which put muted grey on the accent card — about 2:1 — on every interior page. It never showed on the homepage, where the cards sit in the hero rather than inside a band. */ .qa-grid .qa-card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.45} .qa-ico{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center; border-radius:14px;background:var(--tint);color:var(--teal)} /* The foreground belongs on the card, not only on each child. Without it the card inherited --ink on the accent (3.4:1) and every legible line worked only because something overrode it individually — so the next element added to this card would have been unreadable. The approved sample sets it here too. */ /* The same 1.4.11 defect as .nav-cta, in the place it is worst: this card stands on the hero PHOTOGRAPH, and against the scrim over a white area of that photograph the accent measures 1.11-1.44 on every palette the theme ships - including the two whose accent clears 3:1 against the band. The border was the accent on the accent, which is a border drawn in the colour of the thing it bounds. It is --control-edge now, with a 2px inset ring behind it so the shape survives at a glance. */ .qa-primary{background:var(--accent);border-color:var(--control-edge);color:var(--on-brand); box-shadow:inset 0 0 0 2px var(--control-edge)} .qa-card.qa-primary .qa-title a,.qa-grid .qa-card.qa-primary p{color:var(--on-brand)} .qa-primary .qa-ico{background:rgb(255 255 255 / .2);color:var(--on-brand)} /* The arrow is appended in PHP (outside the translated string, inside the aria-hidden span). Adding one here too produced "Naročite se → →". */ /* Metrics are the sample's. The COLOUR is not: the sample uses --teal-bright (#1a8091), which is 4.3:1 on white — and 15.5px bold is not large text, so 4.5:1 applies and the comp fails it. --teal is the same hue at 7:1. See docs/DESIGN-CONTRACT.md. */ .qa-go{color:var(--teal);font-weight:700;font-size:15.5px;margin-top:auto; padding-top:8px;display:inline-flex;align-items:center;gap:7px} .qa-go .sbt-icon{width:1.1em;height:1.1em;transition:transform .18s} .qa-card:hover .qa-go .sbt-icon{transform:translateX(4px)} @media (prefers-reduced-motion:reduce){.qa-go .sbt-icon{transition:none}} .qa-primary .qa-go{color:var(--on-brand)} .qa-meta{font-size:var(--step--1);color:var(--muted)} /* Full white, no opacity. White on this accent is 4.86:1; at opacity .9 it composites to 4.26 and fails AA — the same way the footer's pending links did. Opacity is how a contrast value that was checked stops being true. */ .qa-primary .qa-meta{color:var(--on-brand)} /* ------------------------------------------------------- tables to cards ONE markup shape: a real table with , scope and above 48rem, a stack of labelled cards below. The client's own written requirement. */ .table-wrap{overflow-x:auto} /* The sample frames every table in a white rounded card and shows no caption. The caption is kept in the markup and hidden visually rather than dropped: it is the only thing that tells a screen-reader user what the table is before they enter it (WCAG 1.3.1), and the sample simply has no equivalent. */ .tbl-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r); overflow:hidden} .data-table{width:100%;border-collapse:collapse;background:var(--card)} .data-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .data-table th,.data-table td{padding:14px 16px;text-align:left;font-size:15.5px; border-bottom:1px solid var(--line);vertical-align:top} .data-table thead th{background:var(--tint);font-size:13.5px;text-transform:uppercase; letter-spacing:.06em;color:var(--teal-deep);font-weight:700} .data-table tbody th{font-weight:700} .data-table tbody tr:last-child :is(th,td){border-bottom:0} .data-table tbody tr:hover{background:var(--row-hover)} @media (max-width:48rem){ .data-table,.data-table tbody,.data-table tr,.data-table th,.data-table td{display:block} .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* Each row becomes its own card, so the outer frame has to step aside. */ .tbl-card{background:none;border:0;border-radius:0;overflow:visible} .data-table tbody tr:hover{background:var(--card)} .data-table tr{border:1px solid var(--line);border-radius:var(--r);margin-bottom:var(--s-4); padding:var(--s-3);background:var(--card)} /* Label ABOVE the value, not beside it. A two-column grid on the cell made every child of that cell its own grid item, so a cell holding more than one thing broke apart: the unit's parent name and the telephone after a
each started a new row in the LABEL column, unlabelled and misaligned. Stacking is also what the approved sample does on a phone. */ .data-table th,.data-table td{border:0;padding:var(--s-3) 0;display:block} .data-table th[data-label]::before,.data-table td[data-label]::before{ content:attr(data-label);display:block;margin-bottom:2px; font-size:var(--step--1);color:var(--muted);font-weight:700; text-transform:uppercase;letter-spacing:.04em} .data-table tr :is(th,td)+:is(th,td){border-top:1px dashed var(--line)} } /* --------------------------------------------------- emergency strip Compact and dark, NOT a full accent band. An earlier version of this was a tall accent block that shouted far louder than the approved design and pushed everything below it off the first screen. */ .urgent{background:var(--band-deep);color:var(--band-ink);box-shadow:0 1px 0 var(--band-edge),0 -1px 0 var(--band-edge)} .urgent-in{display:flex;align-items:center;gap:var(--s-5);padding-block:var(--s-5);flex-wrap:wrap} .urgent-ico{width:54px;height:54px;border-radius:50%;background:rgb(var(--band-veil) / .14); display:flex;align-items:center;justify-content:center;flex:0 0 auto} .urgent-txt{flex:1 1 320px} .urgent-txt :is(h2,h3){font-size:var(--step-1);margin:0 0 var(--s-1);color:var(--band-ink)} .urgent-txt p{color:var(--band-ink-soft);margin:0} .urgent-txt a{color:var(--band-ink);text-decoration:underline;text-underline-offset:3px} .urgent-nums{display:flex;gap:var(--s-3);flex-wrap:wrap;margin:0} /* The border was .22 of the veil, which composites to 1.55-1.88 against the band - the box around the 112 link had no boundary a reader could see. .65, not .55. The first attempt used .55 and reached 3.46 against the band, which looked finished; the browser check then reported 2.70, because a boundary is adjacent to TWO colours and the box has a veil of its own at .10 inside it. .65 clears 3.0 on both sides on all six palettes (3.26 at the tightest). Both pairs are in the table. */ .urgent-num{display:flex;flex-direction:column;gap:2px;background:rgb(var(--band-veil) / .10); border:1px solid rgb(var(--band-veil) / .65);border-radius:12px;padding:var(--s-3) var(--s-4); margin:0;text-decoration:none;color:var(--band-ink);min-width:9rem} .urgent-num:hover{background:rgb(var(--band-veil) / .18)} .urgent-num .num,.urgent-num b{font-family:var(--font-display);font-size:var(--step-2); font-weight:800;line-height:1.1} .urgent-num span{font-size:var(--step--1);color:var(--band-ink-soft)} /* 112 is the only tel: link on the portal, and since 1. 10. 2026 the only box on the strip — beside an identical box for the switchboard, with only a pale number between them, it read as one of two equal choices. The hospital asked for it red with white type and for the switchboard to move away from it; the switchboard is a line of text now (.urgent-centrala). --sos is fixed on every palette (tokens.css). No red stands off a dark band at 3:1, so the tile wears the booking CTA's 2px --control-edge ring for 1.4.11; the red only has to carry white type (6.04, hover 8.03). */ .urgent-num.is-112{background:var(--sos);border-color:var(--control-edge);color:var(--sos-ink); box-shadow:inset 0 0 0 1px var(--control-edge)} .urgent-num.is-112:hover{background:var(--sos-hover)} .urgent-num.is-112 .num,.urgent-num.is-112 b,.urgent-num.is-112 span{color:var(--sos-ink)} .urgent-txt p+p.urgent-centrala{margin-top:var(--s-2)} /* ------------------------------------------------------- editorial band */ .band-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--s-7);align-items:center} .band-photo{border-radius:18px;overflow:hidden;border:1px solid var(--line); background:var(--card);margin:0} .band-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;display:block} .band-photo figcaption{font-size:var(--step--1);color:var(--muted); padding:var(--s-3) var(--s-4);background:var(--card)} .band :is(h2,h3){color:var(--teal-deep)} .band p{color:var(--muted)} .trust-chips{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-4); padding:0;list-style:none} /* --------------------------------------------------- highlighted services */ /* Tinted on the homepage, where vzorec C alternates bands to separate six sections. Its interior pages do not alternate at all — cakalne-dobe, narocanje and dostopne-storitve are flat paper from head to footer, and the white table card is what does the separating. */ .fast{background:var(--tint)} body:not(.home) .fast{background:none} .fast :is(h2,h3){color:var(--teal-deep)} .fast-lede{color:var(--muted);margin-top:var(--s-3)} .fast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4); margin-top:var(--s-6);list-style:none;padding:0} .fast-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:var(--s-5)} .fast-card :is(h3,h4),.fast-name{font-size:var(--step-1);color:var(--teal-deep); margin:0 0 var(--s-3)} .fast-name a{color:inherit;text-decoration:none} .fast-name a:hover{text-decoration:underline} /* The figures read as ONE sentence: "13 dni · slovensko povprečje 320 dni". display:contents lets the

/
pairs flow as direct flex children, so the visually-hidden label collapses and the rest sits on one baseline. Our own number is the headline; the national average must NOT compete with it — an earlier rule made both step-3 because `.fast-nums .num` (0,2,0) outranked `.fast-slo` (0,1,0). */ .fast-nums{display:flex;align-items:baseline;gap:var(--s-2) var(--s-3);flex-wrap:wrap;margin:0} .fast-stat{display:contents} .fast-nums dd{margin:0} .fast-sbt{font-family:var(--font-display);font-size:var(--step-3);font-weight:800; color:var(--teal);line-height:1.1} .fast-nums dt.lbl{display:inline;font-size:var(--step--1);color:var(--muted); text-transform:none;letter-spacing:0;font-weight:400} .fast-nums .fast-slo{font-family:var(--font-body);font-size:var(--step-0); font-weight:600;color:var(--muted)} /* Provenance sits once at the foot of a section, never under each number. */ .fast-src,.fast-note{font-size:var(--step--1);color:var(--muted);margin-top:var(--s-2)} .fast-cta{margin-top:var(--s-6)} .lbl{display:block;font-size:var(--step--1);color:var(--muted);text-transform:uppercase; letter-spacing:.06em} /* ------------------------------------------------- departments & clinics */ .depts :is(h2,h3){color:var(--teal-deep)} .depts-lede{color:var(--muted);margin-top:var(--s-3)} .dept-feature{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4); margin-top:var(--s-6);list-style:none;padding:0} .dept-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;display:flex;flex-direction:column} .dept-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block} .dept-card-body{padding:var(--s-4) var(--s-5) var(--s-5)} .dept-card :is(h3,h4){font-size:var(--step-1);color:var(--teal-deep);margin:0 0 var(--s-2)} /* The heading is a link here (the sample's is inert). It must not inherit the browser's blue underline. */ .dept-card :is(h3,h4) a{color:inherit;text-decoration:none} .dept-card :is(h3,h4) a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px} .dept-card p{font-size:var(--step-0);color:var(--muted);line-height:1.5;margin:0} /* The sample used #8b9793 here — 3.02 on white, fails. --muted is 5.59. */ .dept-card .photonote,.photonote{font-size:var(--step--1);color:var(--muted); margin-top:var(--s-3)} .dept-list{margin-top:var(--s-6);background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:var(--s-6)} .dept-list :is(h3,h4){font-size:var(--step-0);color:var(--teal-deep);margin:0 0 var(--s-4)} .dept-cols{columns:3;column-gap:34px;list-style:none;margin:0;padding:0} .dept-cols li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--line); display:flex;gap:9px;align-items:baseline} .dept-cols li::before{content:"";width:7px;height:7px;border-radius:50%; background:var(--teal-bright);flex:0 0 auto;position:relative;top:-1px} .dept-cols a{color:var(--ink);text-decoration:none} .dept-cols a:hover{color:var(--teal);text-decoration:underline} .amb-row>*{min-width:0} .amb-row{margin-top:var(--s-5);display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center; list-style:none;padding:0} .amb-row .lbl{display:inline;font-size:var(--step--1);font-weight:700;color:var(--muted); text-transform:none;letter-spacing:0} /* --------------------------------------------------------------- heritage */ /* The history band closed the page in exactly the footer's colour, with no padding of its own — so the photograph touched the section above it and the band and the footer read as one undivided slab of teal. It now sits a shade lighter than the footer (--teal against --teal-deep), which separates the two without a rule drawn across dark on dark, and it has room to breathe. */ /* --band-ink-muted was measured against --teal-deep, where it reaches 5.81. This band is the lighter --teal, where the same value is 4.18 — below AA — on the photo caption and the quotation attribution. A token is only accessible against the surface it was checked on, so the band uses --band-ink-lift. It used to be a hex written inline on this rule. That hid a second cost: the accessibility panel's contrast mode redefines --band-ink-muted at the root, and a value written on .herit outranks it, so the reader who asked for MORE contrast got none in this band. Naming it makes that visible and fixable in one line. That line was written on 19. 9. 2026: dostopnost.css now lifts --band-ink-lift with the rest, so the reader who asks for more contrast gets it in this band too (5.12 → 6.88 on the base palette, 4.71 → 5.96 under `jezero`). It was deferred until then because the palette mechanism had to ship as a provable no-op — a reason that expired the day it shipped, and the note is kept so the next deferral is read with that in mind. 5.12 cleared AA either way; "clears AA" was never the point. See CHANGELOG.md. */ .herit{background:var(--band);color:var(--band-ink);padding-block:var(--s-8); --band-ink-muted:var(--band-ink-lift)} .herit + .site-foot{box-shadow:inset 0 1px 0 rgb(var(--band-veil) / .10)} .herit-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s-7);align-items:center} .herit-photo{border-radius:18px;overflow:hidden;margin:0} .herit-photo img{width:100%;object-fit:cover;aspect-ratio:4/3;display:block} .herit-photo figcaption{font-size:var(--step--1);color:var(--band-ink-muted);padding-top:var(--s-3)} .herit-kicker{font-size:var(--step--1);font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--band-ink-muted);margin:0} .herit :is(h2,h3){margin:var(--s-3) 0 var(--s-4);color:var(--band-ink)} .herit p{color:var(--band-ink-soft);margin-bottom:var(--s-3)} .herit blockquote{margin:var(--s-5) 0 0;position:relative;padding-left:34px; font-family:var(--font-display);font-size:var(--step-1);line-height:1.45;color:var(--band-ink)} .herit blockquote::before{content:"\201E";position:absolute;left:0;top:-6px;font-size:44px; color:var(--band-ink-muted);font-family:var(--font-display)} .herit blockquote footer{font-family:var(--font-body);font-size:var(--step--1); color:var(--band-ink-muted);margin-top:var(--s-2)} /* ---------------------------------------------------------------- buttons */ .btn{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px; padding:var(--s-3) var(--s-5);border-radius:999px;border:1px solid var(--line-strong); background:var(--card);color:var(--teal);font-weight:700;text-decoration:none;cursor:pointer} .btn:hover{background:var(--tint)} /* .btn-coral was an alias of this rule while sbt-portal-strani still printed class="btn btn-coral" in two templates and two tools in tools/ probed that selector by name. All four were migrated on 19. 9. 2026 and the alias came out the same day: a second name for one thing is how the colour layer got into trouble in the first place. */ .btn-accent{background:var(--accent);border-color:var(--accent);color:var(--on-brand)} .btn-accent:hover{background:var(--accent-hover)} .chip{display:inline-flex;align-items:center;gap:var(--s-2);padding:9px 16px; border-radius:999px;background:var(--tint);color:var(--teal-deep); font-size:var(--step--1);font-weight:600;text-decoration:none} a.chip:hover{background:var(--tint2)} .chip svg{color:var(--teal)} .sbt-icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* ------------------------------------------------------- filter controls */ /* vzorec C's .ctrl: label above the field, 50px fields, 12px radius. Before this the form emitted bare divs and rendered as the browser's raw defaults — label jammed against the input, a grey system button. */ .filters{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:flex-end;margin-bottom:var(--s-4)} .ctrl{display:flex;flex-direction:column;gap:6px} .ctrl label{font-size:14px;font-weight:700;color:var(--muted)} /* --line-strong, NOT --line. tokens.css says in as many words that --line-strong is MANDATORY on input, select, textarea and secondary buttons, because --line is 1.25-1.30 against the surfaces it sits on and 1.4.11 asks 3.0 for the boundary of a control that has no other visible one. This rule, .btn-quiet and .pager were still on --line, and the pair table could not see it: it measured --line-strong, which passes, against a surface nothing was painting with it. Found on /cakalne-dobe/ in a browser on 19. 9. 2026. */ .ctrl :is(input,select){min-height:50px;border:1.5px solid var(--line-strong);border-radius:12px; background:var(--card);padding:0 14px;font:inherit;color:var(--ink)} .ctrl :is(input,select):focus-visible{outline-offset:0;border-color:var(--teal)} .ctrl-search{flex:1 1 260px} .ctrl-search input{width:100%} /* A