*/
@media (max-width: 640px) {
#seznam-naprav.mreza-naprav { grid-template-columns: repeat(2, 1fr); gap: var(--o4); }
#seznam-naprav.mreza-naprav .card__media { height: 150px; padding: var(--o3) var(--o3) 0; }
#seznam-naprav.mreza-naprav .card__media img { height: 100%; }
#seznam-naprav.mreza-naprav .card__body { padding: var(--o3); }
#seznam-naprav.mreza-naprav .card__title { font-size: 1rem; }
#seznam-naprav.mreza-naprav .card__model { font-size: .8rem; }
#seznam-naprav.mreza-naprav .price__main { font-size: .92rem; }
#seznam-naprav.mreza-naprav .price__sub { font-size: .8rem; }
#seznam-naprav.mreza-naprav .card .btn { margin-top: 0; padding: 11px 14px; font-size: .88rem; }
#seznam-naprav.mreza-naprav .card__vec { font-size: .82rem; margin-top: var(--o1); }
}
@media (max-width: 599px) {
/* Naročnik 12. 8. 2026: naprave naj bodo zložene kot na računalniku. Dve v
vrsti, kartica strnjena — z opisom bi bila ob 142 px sama besedilo. */
#seznam-naprav.mreza-naprav { grid-template-columns: repeat(2, 1fr); gap: 12px; }
#seznam-naprav.mreza-naprav .card__desc { display: none; }
#seznam-naprav.mreza-naprav .card--vodilna .card__desc { display: block; }
.mreza--2, .mreza--3, .mreza--4 { grid-template-columns: 1fr; }
.mreza-naprav, .mreza-naprav--4, .mreza-naprav--vodilna { grid-template-columns: 1fr; }
.koraki, .koraki--4, .koraki--3 { grid-template-columns: 1fr; }
.stevilke, .stevilke--3 { grid-template-columns: 1fr; }
.popust { grid-template-columns: 1fr; justify-items: start; }
.noga-mreza { grid-template-columns: 1fr; }
.kartica { padding: var(--o4); }
.vprasanje { padding: var(--o4); }
.foto--list, .foto--list-obrni { border-radius: 90px 22px 90px 22px; }
}
/* --------------------------------------------------------------------------
22. DODANO OB PRENOSU STRANI (avgust 2026)
Sedem razredov, ki jih sistem ob prvem zapisu ni imel, brez njih pa strani
ne bi bilo mogoče sestaviti brez ročnih px in praznih stolpcev. Vsak je
opisan tudi v predlogi/VOKABULAR.md, razdelek 21.
-------------------------------------------------------------------------- */
/* Telefon v zaglavju — tabletka levo od zelenega gumba Rezervacija */
.zaglavje__tel {
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
padding: 9px 16px; border-radius: 999px; text-decoration: none;
font-weight: 600; font-size: .95rem; color: var(--navy);
background: var(--nadih-moder);
}
.zaglavje__tel:hover { background: var(--nadih-zelen); color: var(--navy); }
.zaglavje__tel svg { width: 17px; height: 17px; flex: none; }
/* Šest povezav na sredini, telefon in gumb Rezervacija desno */
.zaglavje .meni { margin-inline: auto; }
.zaglavje__desno { display: flex; align-items: center; gap: var(--o2); flex: none; }
/* Temna noga — po naročnikovi oblikovni sliki je noga mornarsko modra.
Postavitev (.noga-mreza, .noga-dno, .noga-podpis) ostane ista, zamenja se
samo podlaga in barve besedila. */
.noga--temna { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-t) 100%); color: rgba(255, 255, 255, .74); }
.noga--temna h4 { color: #fff; }
.noga--temna li { color: rgba(255, 255, 255, .74); }
.noga--temna a { color: rgba(255, 255, 255, .78); }
.noga--temna a:hover { color: #fff; }
.noga--temna p { color: rgba(255, 255, 255, .66); }
.noga--temna strong { color: #fff; }
.noga--temna .noga-dno { border-top-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .62); }
.noga--temna .noga-podpis { color: rgba(255, 255, 255, .78); }
.noga--temna .noga-podpis:hover { color: #fff; }
/* En ali dva stolpca številk — kadar ključna podatka nista trije ali štirje.
Brez tega bi v .stevilke ostal prazen stolpec. */
.stevilke--2 { grid-template-columns: repeat(2, 1fr); }
.stevilke--1 { grid-template-columns: 1fr; }
/* Kazalo ob besedilu: oba stolpca polna — kazalo levo, besedilo desno.
Pod 1024 px se zloži v en stolpec (kazalo nad besedilom). */
.z-kazalom {
display: grid; grid-template-columns: 260px minmax(0, 1fr);
gap: clamp(var(--o5), 4vw, var(--o7)); align-items: start;
}
/* Naslov razdelka z zeleno ikono v krogcu (Navodila) */
.z-ikono { display: flex; align-items: center; gap: var(--o3); }
.z-ikono__ico {
width: 46px; height: 46px; padding: 11px; flex: none;
border-radius: 50%; background: var(--nadih-zelen); stroke: var(--zelena); fill: none;
}
/* Kartica, v kateri je obrazec — polja se raztegnejo čez celo širino kartice */
.kartica--obrazec { justify-items: stretch; }
/* Nobena fotografija ne sme biti višja od 60 % zaslona — pokončna slika v
ozkem stolpcu bi sicer na prenosniku sama zavzela cel pogled. Razmerje
stranic ostane zapisano (nič ne poskoči), višino le porežemo. */
.foto, .junak-slika > img, .kartica__slika { max-height: 60vh; }
/* Dvojka, poravnana na vrh — kadar sta stolpca različno visoka */
.dvojka--vrh { align-items: start; }
.dvojka--vrh .dvojka__telo { align-content: start; }
@media (max-width: 1023px) {
.z-kazalom { grid-template-columns: 1fr; }
}
@media (max-width: 939px) {
/* Meni je zunaj toka (spustni panel), zato desni del sam potisnemo desno,
ključka za meni pa ne sme več grabiti prostora. */
.zaglavje .ovoj { gap: var(--o2); }
.zaglavje__desno { margin-left: auto; }
.zaglavje .meni-gumb { margin-left: 0; }
.zaglavje__tel { padding: 9px 12px; }
.zaglavje__tel span { display: none; }
}
@media (max-width: 599px) {
.stevilke--2 { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
23. MANJ GIBANJA IN TISK
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gumb, .kartica--klik, .mreza-naprav .card, .povezava::after, .vprasanje > summary::after {
transition: none;
}
.gumb:hover, .kartica--klik:hover, .mreza-naprav .card:hover { transform: none; }
}
@media print {
.zaglavje, .meni, .meni-gumb, .poziv, .gumb, .zemljevid { display: none !important; }
.odsek { padding-block: var(--o4); background: none; }
.kartica, .mreza-naprav .card, .razpredelnica-ovoj { box-shadow: none; border: 1px solid var(--crta); }
}
/* --------------------------------------------------------------------------
23. DODATKI ZA ROČNI STRANI (najemi.php, naprava.php)
Priklopi iz stare oznake ostanejo, ker jih bere JavaScript: .hitri (izbirnik
termina), .gallery__thumb (app.js zamenja veliko sliko) in razred .is-added,
ki ga kosarica.js doda gumbu, ko je naprava že v rezervaciji. Tu jih samo
oblečemo v ta sistem — razredov iz style.css ne spreminjamo, dotaknemo se
jih le znotraj svojih sekcij.
-------------------------------------------------------------------------- */
/* Odmik pod izbirnikom termina nosi sekcija, ne pas — sicer se 28 px margina
iz style.css sešteje z odmikom sekcije in nastane 148 px luknja. */
.odsek .hitri { margin-bottom: 0; }
/* Izrezek naprave v galeriji: splošno pravilo .foto dovoli 60 vh, kar je za
izrezek na beli kartici preveč — tu ga vrnemo na mero .foto--izdelek in
hkrati nikoli ne presežemo 60 % zaslona. */
#galerija .foto--izdelek { max-height: min(340px, 60vh); }
/* Vrsta sličic pod veliko fotografijo naprave. Okvir ima znano velikost, zato
se pokončna in ležeča slika ujameta v isto ploskev in nič ne štrli ven. */
.slicice { display: flex; flex-wrap: wrap; gap: var(--o2); margin-top: var(--o3); }
.slicice .gallery__thumb {
display: block; width: 84px; height: 72px; padding: var(--o1);
background: var(--bela); border: 1.5px solid var(--crta-m); border-radius: 14px;
cursor: pointer; transition: border-color .18s ease;
}
.slicice .gallery__thumb:hover,
.slicice .gallery__thumb.is-active { border-color: var(--zelena-s); }
.slicice img { width: 100%; height: 100%; object-fit: contain; }
/* Gumb »Dodaj v rezervacijo«, ko je naprava že v rezervaciji */
.gumb.is-added { background: var(--navy); color: #fff; box-shadow: none; }
.gumb.is-added:hover { background: var(--navy-t); color: #fff; transform: none; }
/* --- 23. JUNAK-PAS (klasični hero) --------------------------------------
Ena fotografija čez celo širino, besedilo čez njo na temnem prelivu.
Naročnik je 4. 8. 2026 izbral to različico (predlogi/hero.php, A).
Preliv je močnejši na levi, ker tam stoji besedilo; fotografija ostane
vidna na desni. Višina je omejena z odmikom, nikoli z vh — fotografija
ne sme požreti zaslona. */
.junak-pas .gumb-vrsta { margin-bottom: var(--o5); }
@media (max-width: 900px) {
}
/* --- 24. KONTRAST -------------------------------------------------------
Rez avgusta 2026: za herojem je bilo pet zaporednih sekcij na skoraj isti
svetlosti (3-odstotni radialni nadihi), zato je stran delovala bleda in
enolična. Barvo sta imela samo hero in zaključni poziv.
Sistem dobi TRI prave ploskve namesto zgolj nadihov. Pravilo ritma:
dve zaporedni sekciji ne smeta imeti iste ploskve, temna pa pride
največ vsaka tretja — sicer se učinek izgubi. */
/* Polna mornarska ploskev — za najmočnejši argument na strani (popusti,
ključne številke). Besedilo se samo prebarva. */
.odsek--navy {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-t) 100%);
color: rgba(255, 255, 255, .88);
}
.odsek--navy h2, .odsek--navy h3, .odsek--navy strong, .odsek--navy b { color: #fff; }
/* Samo besedilni gradniki. NE "span" na splošno — nekateri gradniki
(.popust__st, gumbi) imajo svoje SVETLO ozadje in bi na njem bela
pisava izginila. */
.odsek--navy p, .odsek--navy li { color: rgba(255, 255, 255, .84); }
.odsek--navy .kicker { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
.odsek--navy .kicker::before { background: var(--zelena-s); }
.odsek--navy .kartica {
background: rgba(255, 255, 255, .07); box-shadow: none;
border: 1px solid rgba(255, 255, 255, .16);
}
.odsek--navy .kartica p { color: rgba(255, 255, 255, .78); }
.odsek--navy .gumb-obris {
background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45);
}
.odsek--navy .gumb-obris:hover { background: rgba(255, 255, 255, .12); }
/* SVETLI OTOKI znotraj modre ploskve obdržijo temno pisavo. Vsak gradnik s
svetlim ozadjem mora biti tu naštet — sicer bela pisava iz .odsek--navy
pobeli besedilo na beli kartici in to izgine. Past, ki se je zgodila
dvakrat: najprej pri .popust__st, nato pri naslovu in opisu v .popust. */
.odsek--navy .popust,
.odsek--navy .notice,
.odsek--navy .razpredelnica,
.odsek--navy .stevilke li,
.odsek--navy .kartica--obrazec { color: var(--crnilo); }
.odsek--navy .popust h3,
.odsek--navy .popust__st,
.odsek--navy .notice strong,
.odsek--navy .razpredelnica th,
.odsek--navy .stevilke b,
.odsek--navy .kartica--obrazec h3 { color: var(--navy); }
.odsek--navy .popust p,
.odsek--navy .notice span,
.odsek--navy .razpredelnica td,
.odsek--navy .stevilke span { color: var(--sivilo); }
.odsek--navy .razpredelnica { color: rgba(255, 255, 255, .88); }
/* Polna kamnita ploskev — vidna nevtralna stopnja med belo in modro. */
.odsek--kamen { background: var(--kamen); }
/* Vidnejša nadiha: prej sta bila 3-odstotna in se na zaslonu nista poznala. */
.odsek--zelen {
background: linear-gradient(180deg, rgba(238, 248, 228, 0) 0%, var(--nadih-zelen) 14%, var(--nadih-zelen) 86%, rgba(238, 248, 228, 0) 100%);
}
.odsek--moder {
background: linear-gradient(180deg, rgba(232, 238, 250, 0) 0%, var(--nadih-moder) 14%, var(--nadih-moder) 86%, rgba(232, 238, 250, 0) 100%);
}
/* Kartice dobijo obris in barvni poudarek — prej so bile bele na skoraj
beli podlagi in so izginile. */
.kartica { border: 1px solid var(--crta); }
.kartica--tesna { position: relative; overflow: hidden; padding-left: calc(var(--o4) + 4px); }
.kartica--tesna::before {
content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--zelena-s);
}
.kartica--moder::before { background: var(--navy); }
.odsek--navy .kartica--tesna::before { background: var(--zelena-s); }
/* Naslovi sekcij dobijo večji tipografski skok. */
.glava h2 { letter-spacing: -.02em; }
.glava .kicker { position: relative; padding-left: 26px; }
.glava .kicker::before {
content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
width: 7px; height: 7px; border-radius: 50%; background: var(--zelena);
}
/* --- 25. PROTI ŠABLONI ---------------------------------------------------
Izmerjeno 4. 8. 2026 čez šest strani: 32 enakih tabletk „kicker", 33 enakih
glav sekcij, 82 kartic. Vsaka sekcija se je začela enako — tabletka, naslov,
odstavek, mreža kartic z ikono v zaobljenem kvadratu. To je tisto, kar
izda šablonski videz, ne barve.
Popravki:
1) kicker ni več tabletka s senco, ampak tiha velika črka z zeleno črtico
2) ikone v zaobljenih kvadratih odpadejo — nosi jih tipografija
3) naslovi dobijo večji skok, odstavek pod njimi je ožji in tišji
4) kartice imajo tanek rob namesto sence, poudarek nosi vsebina */
.kicker {
background: none; box-shadow: none; border-radius: 0; padding: 0 0 0 26px;
font-size: .74rem; letter-spacing: .14em; color: var(--sivilo);
}
.kicker::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 18px; height: 2px; border-radius: 0; background: var(--zelena-s);
}
.odsek--navy .kicker { background: none; color: rgba(255,255,255,.62); }
.odsek--navy .kicker::before { background: var(--nebo); }
.glava h2 {
font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.6rem);
line-height: 1.1; letter-spacing: -.022em; max-width: 20ch;
}
.glava > p { max-width: 56ch; color: var(--sivilo); }
/* Ikona v zaobljenem kvadratu je najbolj šablonski gradnik — odpade.
Ostane le tam, kjer nosi pomen (koraki, zaglavje strani). */
.kartica .kartica__ikona { display: none; }
.kartica--tesna::before { background: var(--zelena-s); width: 3px; }
.kartica--tesna h3 { display: block; }
/* Pika iz razdelka 24 mora odstopiti črtici — sicer imata sekciji dva
različna začetka, ker je .glava .kicker::before bolj določen. */
.glava .kicker { padding-left: 26px; }
.glava .kicker::before {
left: 0; width: 18px; height: 2px; border-radius: 0;
background: var(--zelena-s);
}
.odsek--navy .glava .kicker::before { background: var(--nebo); }
.kartica { box-shadow: none; border: 1px solid var(--crta); }
.kartica--poudarjena { box-shadow: var(--senca-mala); }
/* Povezave dobijo modro iz logotipa namesto mornarske — stran zadiha. */
.besedilo a, .vprasanje p a { color: var(--modra); }
/* --- 26. FOTOGRAFSKI PAS ------------------------------------------------
Agencijski gradnik, ki ga šablone nimajo: fotografija čez celo širino, brez
kartice in brez okvirja, z eno samo mislijo čez njo. Uporablja se redko —
največ enkrat na stran — kot vizualni premor med gostimi sekcijami.
Višina je omejena, da fotografija ne požre zaslona (past iz prejšnjih krogov). */
/* Širino omeji BESEDILO, ne ovoj — sicer .ovoj s svojim margin:auto blok
sredinsko poravna in besedilo pristane sredi fotografije, preliv pa je
najmočnejši levo. */
@media (max-width: 700px) {
}
/* --- 27. DOSTOPNOST BESEDILA --------------------------------------------
Izmerjeno po prehodu na novo paleto: dve barvi sta padli pod 4,5:1.
Rdeča v obrazcih (4,38) in zelena v izidu termina na Najemi (3,26).
Obe sta v style.css, ki ga deduje admin — zato ju popravimo tu. */
/* .error je v style.css zapisan kot ".field .error" — enak razred tu ne
zadostuje, ker je oni selektor bolj določen. */
.field .error { color: #c53434; } /* 5,36:1 na belem */
/* Izid termina NI na belem, ampak na modrem pasu izbirnika — zato ga rešuje
SVETLEJŠA zelena, ne temnejša. Prva domneva je bila napačna in je kontrast
poslabšala z 4,16 na 1,85. */
.hitri__p--izid strong { color: #8fce48; } /* 6,98:1 na modrem */
/* --- 28. LESTVICA SVETLOSTI IN KONEC KARTIC ZA VSE ----------------------
Izmerjeno: bela kartica proti kamnitemu pasu je dala kontrast 1,11:1 —
kartica je bila praktično nevidna, pas pa ni bral kot pas. „Nadih zelen"
je imel svetlost 88,6, „kamen" 88,1 — na oko ista ploskev.
Lestvica je zdaj: papir 98 → kamen 77 → navy 3. Trije razločni koraki.
Štiri kratke prednosti („Osebni prevzem", „Enostaven najem" …) NE
potrebujejo kartice. Škatla okoli treh besed je najbolj šablonski gradnik
na strani. Namesto nje: tanka črta zgoraj, krepek naslov, besedilo.
Nič okvirjev, nič sence, nič zaobljenih vogalov. */
.mreza--4 > .kartica--tesna,
.mreza--2 > .kartica--tesna,
.mreza--3 > .kartica--tesna {
background: none; border: 0; border-radius: 0; box-shadow: none;
padding: var(--o4) 0 0; overflow: visible;
}
.mreza--4 > .kartica--tesna::before,
.mreza--2 > .kartica--tesna::before,
.mreza--3 > .kartica--tesna::before {
inset: 0 0 auto 0; width: auto; height: 2px; background: var(--navy);
}
.mreza--4 > .kartica--tesna.kartica--moder::before,
.mreza--2 > .kartica--tesna.kartica--moder::before,
.mreza--3 > .kartica--tesna.kartica--moder::before { background: var(--zelena); }
.mreza--4 > .kartica--tesna h3,
.mreza--2 > .kartica--tesna h3,
.mreza--3 > .kartica--tesna h3 { font-size: 1.02rem; letter-spacing: -.01em; }
/* Kartice, ki OSTANEJO (naprave, popusti, obrazci), morajo na globljem pasu
brati — zato čista bela in vidnejši rob. */
.kartica { background: #ffffff; border-color: #ddd5c6; }
.odsek--navy .kartica { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
/* --- 29. KORAKI, PREDELANI --------------------------------------------
Kaj je bilo narobe: zelena pika na krogcu je izgledala kot napaka, ne kot
okras; naslovi so se lomili različno dolgo, zato besedila niso imela skupne
črte in je vrsta razpadla; črtkana črta je tekla čez rob zadnjega koraka.
Zdaj: števila so velika in tipografska (brez belega krogca in sence),
vsak korak ima svojo črto na vrhu, naslovi imajo enotno višino, povezovalne
črte med zadnjim korakom ni. */
.koraki { gap: var(--o5); align-items: start; }
.koraki::before { display: none; }
.korak {
gap: var(--o2); padding-top: var(--o4);
border-top: 2px solid var(--crta-m);
}
.korak:first-child { border-top-color: var(--navy); }
.korak h3 { font-size: 1rem; min-height: 2.6em; letter-spacing: -.01em; }
.korak p { font-size: .9rem; line-height: 1.55; }
.krog {
width: auto; height: auto; border-radius: 0; background: none; box-shadow: none;
display: block; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem);
line-height: 1; color: var(--zelena); letter-spacing: -.03em;
}
.krog::after { content: none; }
.odsek--navy .korak { border-top-color: rgba(255,255,255,.22); }
.odsek--navy .korak:first-child { border-top-color: var(--nebo); }
.odsek--navy .krog { color: var(--nebo); }
.odsek--navy .korak h3 { color: #fff; }
@media (max-width: 900px) {
.koraki { grid-template-columns: repeat(2, 1fr); gap: var(--o4); }
.korak h3 { min-height: 0; }
}
@media (max-width: 560px) {
.koraki { grid-template-columns: 1fr; }
}
/* Pregledna mreža na domači strani: sedem enakih ploščic, brez vodilne.
Ploščica je v celoti klikljiva prek .card__title a::after (past 15). */
.mreza-naprav--pregled { grid-template-columns: repeat(4, 1fr); }
.mreza-naprav--pregled .card { position: relative; }
.mreza-naprav--pregled .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mreza-naprav--pregled .card__body { padding-bottom: var(--o4); }
.mreza-naprav--pregled .price { margin-top: auto; }
@media (max-width: 1000px) { .mreza-naprav--pregled { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .mreza-naprav--pregled { grid-template-columns: repeat(2, 1fr); } }
/* --- 30. USMERJANJE PO OPRAVILU (domača stran) --------------------------
Nadomestilo za mrežo sedmih naprav, ki je bila podvojena z Najemi in
Cenikom. Vrstica, ne kartica: opravilo levo, priporočena naprava na sredi,
cena desno. Cela vrstica je klikljiva. */
.opravilo { border-bottom: 1px solid var(--crta); }
.opravilo > a {
display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
gap: var(--o4); align-items: baseline;
padding: var(--o4) var(--o2); text-decoration: none;
transition: background .15s ease, padding-left .15s ease;
}
.opravilo > a:hover { background: var(--bela); padding-left: var(--o4); }
.opravilo__kaj {
font-family: var(--pis-naslov); font-weight: 700; font-size: 1.06rem;
color: var(--navy); letter-spacing: -.01em;
}
.opravilo__kdo { color: var(--sivilo); font-size: .92rem; }
.opravilo__cena {
font-family: var(--pis-naslov); font-weight: 700; color: var(--zelena-t);
white-space: nowrap; font-size: .96rem;
}
@media (max-width: 760px) {
.opravilo > a { grid-template-columns: 1fr auto; gap: var(--o1) var(--o3); padding-inline: 0; }
.opravilo__kdo { grid-column: 1 / -1; }
.opravilo > a:hover { padding-left: 0; }
}
/* Tabela izbire na Najemi — stoji pred katalogom, zato mora biti vizualno
podrejena mreži naprav: brez lastne ploskve, samo naslov in razpredelnica. */
.izbira-ovoj { margin-bottom: var(--o6); }
.izbira-n {
font-size: 1.05rem; margin: 0 0 var(--o3); color: var(--navy);
padding-left: 26px; position: relative;
}
.izbira-n::before {
content: ""; position: absolute; left: 0; top: .62em;
width: 18px; height: 2px; background: var(--zelena-s);
}
/* =========================================================================
31. POENOSTAVITEV (4. 8. 2026)
Stanje pred tem: 18 barvnih žetonov, 12 različic ozadij sekcij, 5 vrst
kartic. Zaradi tega je bila stran pisana in nemirna, čeprav je bil vsak
posamezen gradnik v redu.
Zdaj: PET barv, TRI ozadja, ENA kartica.
besedilo #17191c skoraj črna — ne mornarska; ta je stran delala težko
drugotno #5f636a
podlaga #ffffff
pas #f3f2ef ena sama tiha siva
temno #16202b ena sama temna ploskev, brez preliva
poudarek #48841f zelena, samo za dejanja
Vse ostale barve se zlijejo v teh pet. Tega bloka ne dopolnjuj z novimi
barvami — če je potrebna nova, je verjetno napaka v hierarhiji, ne v paleti.
========================================================================= */
:root {
--crnilo: #17191c;
--sivilo: #5f636a;
--bela: #ffffff;
--papir: #ffffff;
--kamen: #f3f2ef;
--navy: #16202b;
--navy-t: #16202b;
--zelena: #48841f;
--zelena-s: #48841f;
--zelena-t: #35610f;
--modra: #16202b;
--nebo: #ffffff;
--crta: #e4e2dd;
--crta-m: #e4e2dd;
--nadih-zelen: #f3f2ef;
--nadih-moder: #f3f2ef;
--pran-zelen: #ffffff;
--pran-moder: #ffffff;
}
/* Tri ozadja, nič več. Vsi nekdanji odtenki in kotni nadihi so bela. */
.odsek--sij, .odsek--zelen, .odsek--moder,
.odsek--zelen-desno, .odsek--moder-levo { background: none; }
.odsek--kamen { background: var(--kamen); }
.odsek--navy { background: var(--navy); }
/* Ena kartica: bela, tanka črta, majhen radij, brez sence in brez barvne črte. */
.kartica, .card {
background: var(--bela); border: 1px solid var(--crta);
border-radius: 6px; box-shadow: none;
}
.kartica--poudarjena { box-shadow: none; border-color: var(--crnilo); }
.kartica--tesna::before, .mreza--4 > .kartica--tesna::before,
.mreza--3 > .kartica--tesna::before, .mreza--2 > .kartica--tesna::before {
background: var(--crnilo); height: 1px;
}
.card__media { border-radius: 6px 6px 0 0; }
/* Naslovi so črni, ne modri — modra na vsakem naslovu je stran delala korporativno. */
h1, h2, h3, .glava h2, .kartica h3, .card__title a,
.opravilo__kaj, .izbira-n, .razpredelnica th { color: var(--crnilo); }
.opravilo__cena { color: var(--crnilo); }
/* Poudarek nosi izključno dejanje. */
.kicker { color: var(--sivilo); }
.kicker::before, .glava .kicker::before, .izbira-n::before { background: var(--zelena); }
.krog { color: var(--zelena); }
/* Manj zaobljenosti povsod — mehki vogali so bili del „AI" občutka. */
.gumb, .btn { border-radius: 6px; }
.foto, .foto--list, .junak-pas__foto, .dvojka__slika img,
.kartica__slika, .card__media img { border-radius: 6px; }
/* Popravek k razdelku 31: pravilo za črne naslove je povozilo belo besedilo
na temni ploskvi. Temna ploskev mora vedno priti ZA splošnim pravilom. */
.odsek--navy h1, .odsek--navy h2, .odsek--navy h3,
.odsek--navy .glava h2, .odsek--navy strong, .odsek--navy b { color: #fff; }
.odsek--navy p, .odsek--navy li { color: rgba(255,255,255,.82); }
.odsek--navy .kicker { color: rgba(255,255,255,.6); }
.odsek--navy .kicker::before, .odsek--navy .glava .kicker::before { background: var(--zelena-s); }
.odsek--navy .krog { color: #fff; }
.odsek--navy .kartica { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
/* Svetli otoki na temni ploskvi ostanejo temni. */
.odsek--navy .popust h3, .odsek--navy .popust__st,
.odsek--navy .stevilke b { color: var(--crnilo); }
.odsek--navy .popust p, .odsek--navy .stevilke span { color: var(--sivilo); }
/* Junak-pas in foto-pas sta fotografiji s temno zaveso — enako pravilo. */
/* ==========================================================================
31. LOXAM — SKUPNI TRAK IN DOMAČA STRAN
Vgrajeno 6. 8. 2026 po potrjenem predlogu predlogi/dom-7-loxam-domov.php.
NAROČNIKOVE ODLOČITVE, KI VELJAJO ZA CELO STRAN
· Domača stran je PREDSTAVITEV. Izbirnika termina in rezervacije na njej
NI — kartica naprave vodi na stran naprave, kjer se izbere termin.
(Zahteva iz BRIEF-NOV-FRONTEND.md, razdelek 3, je s tem preglašena.)
· Brez vprašanj obiskovalcu v naslovih.
· Pravilo »največ šest podstrani« ne velja več.
Vsi razredi tu so novi in se ne prekrivajo z ničimer v style.css ali v
razdelkih 1–30 te datoteke (preverjeno z iskanjem po obeh listih in po
vseh treh datotekah JavaScripta).
========================================================================== */
/* --- 31.1 Trak in servisna vrstica (nad lepljivim zaglavjem) ------------- */
.trak {
background: var(--zelena); color: #fff;
font-size: .92rem; font-weight: 600; text-align: center;
}
.trak .ovoj { padding-block: 9px; }
.trak a { color: #fff; font-weight: 800; }
.servisna { background: var(--bela); border-bottom: 1px solid var(--crta-t); font-size: .9rem; }
.servisna .ovoj {
display: flex; justify-content: space-between; align-items: center;
gap: var(--o3); padding-block: 8px; flex-wrap: wrap;
}
.servisna a { color: var(--crnilo); font-weight: 700; text-decoration: none; }
.servisna a:hover { text-decoration: underline; }
.servisna__desno { color: var(--sivilo); }
@media (max-width: 760px) {
.servisna .ovoj { justify-content: center; }
.servisna__desno { display: none; }
}
/* --- 31.2 Junak: Loxamova zaobljena plošča ------------------------------ */
.hero-lx { padding-block: clamp(20px, 3vw, 36px) clamp(30px, 4vw, 48px); }
.hero-lx__plosca {
background: var(--siva); border-radius: 24px; overflow: hidden;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
align-items: stretch; /* fotografija sega od roba do roba plošče */
}
.hero-lx__telo {
padding: clamp(26px, 4vw, 56px);
display: grid; gap: var(--o3); justify-items: start; align-content: center;
}
.hero-lx__telo > * { margin: 0; }
.hero-lx__telo h1 { max-width: 17ch; }
.hero-lx__telo p { max-width: 44ch; font-size: 1.1rem; color: var(--sivilo); }
.hero-lx__foto { height: 100%; min-height: 300px; max-height: 56vh; }
.hero-lx__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) {
.hero-lx__plosca { grid-template-columns: 1fr; }
.hero-lx__foto { min-height: 210px; order: -1; }
}
/* Zelena tabletka nad naslovom */
.znak {
display: inline-block; background: var(--zelena); color: #fff;
font-family: var(--pis-telo); font-weight: 800; font-size: .8rem;
letter-spacing: .06em; text-transform: uppercase;
padding: 6px 14px; border-radius: 999px;
}
/* --- 31.3 Pas dejstev (tam, kjer ima Loxam iskalnik) -------------------- */
.dejstva {
background: var(--zelena); border-radius: 999px;
padding: 18px clamp(20px, 3vw, 40px);
display: flex; justify-content: space-between; align-items: center;
gap: clamp(14px, 2vw, 28px); flex-wrap: wrap;
box-shadow: 0 22px 44px -30px rgba(79, 128, 22, .7);
}
.dejstvo { color: #fff; font-size: .98rem; }
.dejstvo b { display: block; font-family: var(--pis-naslov); font-size: 1.25rem; font-weight: 800; }
.dejstva .gumb { flex: none; }
@media (max-width: 900px) {
.dejstva { border-radius: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dejstva .gumb { grid-column: span 2; justify-self: center; }
}
/* --- 31.4 Glava sekcije: naslov levo, povezava desno -------------------- */
.vrsta-glava {
display: flex; align-items: end; justify-content: space-between;
gap: var(--o4); flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px);
}
.vrsta-glava > div > * { margin: 0; }
.vrsta-glava p { margin-top: var(--o1); max-width: 60ch; color: var(--sivilo); }
.vrsta-glava__vec {
font-weight: 700; color: var(--zelena-t); white-space: nowrap;
text-decoration: underline; text-underline-offset: 5px;
}
.nadnaslov {
display: block; font-family: var(--pis-telo);
font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: var(--zelena-t); margin-bottom: var(--o2);
}
.odsek--kamen .nadnaslov, .odsek--siva .nadnaslov { color: var(--navy); }
.odsek--siva { background: var(--siva); }
/* --- 31.5 Ploščice opravil (Loxam: parlons de votre projet) ------------- */
.plosce { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 26px); }
.plosca {
position: relative; display: grid; grid-template-rows: auto 1fr;
border: 1.5px solid var(--crta-t); border-radius: 14px; overflow: hidden;
background: var(--bela); transition: border-color .15s ease, box-shadow .15s ease;
}
.plosca:hover { border-color: var(--zelena); box-shadow: 0 16px 32px -24px rgba(79, 128, 22, .5); }
.plosca img { width: 100%; height: clamp(170px, 20vw, 230px); object-fit: cover; }
.plosca__telo { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: var(--o2); }
.plosca h3 { font-size: 1.02rem; margin: 0; }
.plosca h3 a { text-decoration: none; }
.plosca h3 a::after { content: ""; position: absolute; inset: 0; }
.plosca__pusc { font-family: var(--pis-naslov); font-weight: 800; color: var(--zelena-t); font-size: 1.25rem; }
@media (max-width: 820px) { .plosce { grid-template-columns: 1fr; } }
/* --- 31.6 Karte naprav (predstavitev; rezervacija je na strani naprave) -
Namenoma NE uporabljajo nc_kartica(): tam živi gumb data-dodaj, ki na
domačo stran po naročnikovi odločitvi ne sodi. Tu je karta samo povezava
na stran naprave. Past 18: povezava NIMA position:relative, sicer bi se
njen ::after skrčil na besedilo naslova. */
.naprave-mreza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--o3); }
.karta {
position: relative; display: flex; flex-direction: column;
background: var(--bela); border: 1.5px solid var(--crta-t); border-radius: 12px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.karta:hover { border-color: var(--zelena); box-shadow: 0 16px 32px -24px rgba(79, 128, 22, .5); }
.karta__slika {
height: 186px; padding: 16px; border-radius: 12px 12px 0 0;
background: var(--bela); /* izrezki naprav so RGB z belim ozadjem (past 20) */
display: flex; align-items: center; justify-content: center;
}
.karta__slika img { max-height: 100%; width: auto; max-width: 100%; }
.karta__telo {
padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1;
border-top: 1px solid var(--crta-t);
}
.karta__telo > * { margin: 0; }
.karta h3 { font-size: 1rem; }
.karta h3 a { text-decoration: none; }
.karta h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.karta__model { font-size: .85rem; color: var(--sivilo); margin-top: 2px; }
.karta__cena { margin-top: auto; padding-top: 12px; font-size: .86rem; color: var(--sivilo); }
.karta__cena b { display: block; font-family: var(--pis-naslov); font-size: 1.3rem; color: var(--zelena-t); }
.karta__vec {
display: flex; align-items: center; justify-content: space-between; gap: var(--o1);
margin-top: var(--o2); padding-top: var(--o2); border-top: 1px solid var(--crta-t);
font-weight: 800; font-size: .95rem; color: var(--navy);
}
.karta__vec::after {
content: "→"; font-family: var(--pis-naslov); font-weight: 800;
color: var(--zelena-t); font-size: 1.15rem; transition: transform .15s ease;
}
.karta:hover .karta__vec { text-decoration: underline; text-underline-offset: 4px; }
.karta:hover .karta__vec::after { transform: translateX(4px); }
.karta__znak {
position: absolute; top: 12px; left: 12px; z-index: 1;
background: var(--zelena); color: #fff;
font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
padding: 4px 10px; border-radius: 6px;
}
.karta--vse {
background: var(--navy); border-color: var(--navy);
align-items: center; justify-content: center; text-align: center; padding: var(--o4);
}
.karta--vse h3, .karta--vse h3 a { color: #fff; font-size: 1.12rem; }
.karta--vse p { color: rgba(255, 255, 255, .85); font-size: .92rem; margin-top: var(--o1); }
.karta--vse .karta__pusc { font-family: var(--pis-naslov); font-weight: 800; font-size: 1.6rem; color: #fff; margin-top: var(--o2); }
@media (max-width: 900px) { .naprave-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .karta__slika { height: 128px; padding: 12px; } }
/* --- 31.7 Promo plošča (paket) ------------------------------------------ */
.promo {
background: var(--navy); border-radius: 16px; overflow: hidden;
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center;
}
.promo__telo { padding: clamp(26px, 4vw, 52px); color: #fff; display: grid; gap: var(--o2); justify-items: start; }
.promo__telo > * { margin: 0; }
.promo__telo h2 { color: #fff; }
.promo__telo .nadnaslov { color: #fff; opacity: .78; }
.promo__telo p { color: rgba(255, 255, 255, .88); max-width: 46ch; }
.promo__cena { font-family: var(--pis-naslov); font-weight: 800; font-size: 2rem; }
.promo__cena small { font-size: .95rem; font-weight: 600; opacity: .82; }
.promo__foto { height: 100%; min-height: 260px; }
.promo__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
.promo { grid-template-columns: 1fr; }
.promo__foto { min-height: 210px; order: -1; }
}
/* --- 31.8 Prednosti (Loxam: exigez plus) -------------------------------- */
.prednosti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 32px); }
.prednost { border-left: 3px solid var(--zelena); padding-left: var(--o3); }
.prednost > * { margin: 0; }
.prednost b { display: block; font-family: var(--pis-naslov); font-size: 1.5rem; font-weight: 800; color: var(--zelena-t); margin-bottom: 6px; }
.prednost h3 { font-size: 1.02rem; }
.prednost p { font-size: .93rem; color: var(--sivilo); margin-top: 6px; max-width: 28ch; }
@media (max-width: 860px) { .prednosti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .prednosti { grid-template-columns: 1fr; } }
/* --- 31.9 Servisne ploščice (Loxam: nos équipes) ------------------------ */
.servis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--o3); }
.servis__p {
position: relative; background: var(--bela);
border: 1.5px solid var(--crta-t); border-radius: 12px; padding: var(--o4);
transition: border-color .15s ease;
}
.servis__p:hover { border-color: var(--zelena); }
.servis__p > * { margin: 0; }
.servis__p h3 { font-size: .98rem; }
.servis__p h3 a { text-decoration: none; }
.servis__p h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.servis__p p { font-size: .9rem; color: var(--sivilo); margin-top: 5px; }
.servis__p strong { display: block; font-family: var(--pis-naslov); color: var(--zelena-t); font-size: 1.06rem; margin-top: var(--o2); }
@media (max-width: 860px) { .servis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .servis { grid-template-columns: 1fr; } }
/* --- 31.10 Vodniki (nasveti in navodila) -------------------------------- */
.vodniki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 26px); }
.vodnik {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
border: 1.5px solid var(--crta-t); border-radius: 12px; overflow: hidden;
background: var(--bela); transition: border-color .15s ease;
}
.vodnik:hover { border-color: var(--zelena); }
.vodnik img { width: 100%; height: 100%; min-height: 160px; max-height: 40vh; object-fit: cover; }
.vodnik__telo { padding: 18px 20px; align-self: center; }
.vodnik__telo > * { margin: 0; }
.vodnik h3 { font-size: 1.04rem; }
.vodnik h3 a { text-decoration: none; }
.vodnik h3 a::after { content: ""; position: absolute; inset: 0; }
.vodnik p { font-size: .9rem; color: var(--sivilo); margin-top: 5px; }
.vodnik span { display: inline-block; margin-top: var(--o2); font-weight: 800; color: var(--zelena-t); }
@media (max-width: 820px) { .vodniki { grid-template-columns: 1fr; } }
/* --- 31.11 Pas poslovalnice (Loxam: vous cherchez une agence) ----------- */
.poslovalnica { background: var(--zelena); color: #fff; }
.poslovalnica .ovoj {
display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(24px, 4vw, 56px); align-items: center;
}
.poslovalnica h2 { color: #fff; margin: 0; }
.poslovalnica p { color: #fff; margin-top: var(--o2); max-width: 50ch; }
.poslovalnica__podatki { display: grid; gap: var(--o1); font-size: 1rem; }
.poslovalnica__podatki a { color: #fff; font-weight: 800; text-decoration: none; }
.poslovalnica__podatki a:hover { text-decoration: underline; }
.poslovalnica .gumb { margin-top: var(--o3); }
@media (max-width: 760px) { .poslovalnica .ovoj { grid-template-columns: 1fr; } }
/* --- 31.12 GLAVA PODSTRANI — ista plošča kot junak, le nižja --------------
Vse podstrani se začnejo z isto zaobljeno sivo ploščo kot domača stran:
nadnaslov, naslov, uvod in fotografija desno. Tako se Loxamov jezik
nadaljuje čez celo stran, ne le na Domov. Brez fotografije se plošča
samodejno zloži v en stolpec (.glava-lx--brez-slike). */
.glava-lx {
background: var(--siva); border-radius: 20px; overflow: hidden;
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
align-items: stretch;
}
.glava-lx__telo {
padding: clamp(24px, 3.5vw, 48px);
display: grid; gap: var(--o3); justify-items: start; align-content: center;
}
.glava-lx__telo > * { margin: 0; }
.glava-lx__telo h1 { max-width: 20ch; }
.glava-lx__telo p { max-width: 52ch; color: var(--sivilo); font-size: 1.08rem; }
.glava-lx__foto { height: 100%; min-height: 240px; max-height: 46vh; }
.glava-lx__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.glava-lx--brez-slike { grid-template-columns: 1fr; }
.glava-lx--brez-slike .glava-lx__telo h1 { max-width: 26ch; }
@media (max-width: 880px) {
.glava-lx { grid-template-columns: 1fr; }
.glava-lx__foto { min-height: 190px; order: -1; }
}
/* --- 31.13 PRETVORBA OBSTOJEČIH GLAV PODSTRANI ---------------------------
Podstrani se začne z istim vzorcem: .odsek--prvi > .ovoj.dvojka--vrh
(besedilo levo, fotografija desno). Namesto da bi prepisovali osem markupov —
in ob tem tvegali, kar je v tem projektu doslej vsakič zaškripalo — vzorec
prevedemo s slogom. Rezultat je ista plošča kot na domači strani.
Širina plošče je namenoma izračunana tako, da se ujema s širino vsebine
spodaj (ovoj 1160 px minus njegov stranski odmik), sicer bi bila glava širša
od vsega pod njo. */
.odsek--prvi { padding-inline: clamp(20px, 4vw, 40px); }
.odsek--prvi.odsek--sij { background: none; } /* Loxam je ploskoven, brez nadihov */
.odsek--prvi > .dvojka--vrh {
max-width: calc(1160px - 2 * clamp(20px, 4vw, 40px));
margin-inline: auto; padding-inline: 0;
background: var(--siva); border-radius: 20px; overflow: hidden;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 0; align-items: stretch;
}
.odsek--prvi > .dvojka--vrh > .dvojka__telo { padding: clamp(24px, 3.5vw, 48px); }
.odsek--prvi > .dvojka--vrh > .dvojka__slika { order: 0; height: 100%; min-height: 240px; }
.odsek--prvi > .dvojka--vrh > .dvojka__slika .foto {
height: 100%; width: 100%; min-height: 240px; max-height: 46vh;
object-fit: cover; border-radius: 0;
}
@media (max-width: 880px) {
.odsek--prvi > .dvojka--vrh { grid-template-columns: 1fr; }
.odsek--prvi > .dvojka--vrh > .dvojka__slika { order: -1; min-height: 190px; }
.odsek--prvi > .dvojka--vrh > .dvojka__slika .foto { min-height: 190px; }
}
/* Glave brez fotografije (Rezervacija, pravne strani) dobijo isto ploščo v
enem stolpcu. Selektor zahteva, da je .glava-strani NEPOSREDNI otrok ovoja,
zato se ne prime glav znotraj .dvojka__telo. */
.odsek--prvi > .ovoj:has(> .glava-strani) {
padding-inline: 0;
max-width: calc(1600px - 2 * clamp(20px, 4vw, 40px)); /* enako široko kot vsebina spodaj */
}
.odsek--prvi > .ovoj > .glava-strani {
background: var(--siva); border-radius: 20px;
padding: clamp(24px, 3.5vw, 44px);
}
/* --- 31.14 POGOJI NAJEMA (Najemi; prej samostojna stran Cenik) -----------
Naročnik je 6. 8. 2026 ukinil stran Cenik: cene so pri vsaki napravi,
pogoji, ki veljajo za vse, pa so tu, pod katalogom. */
.pogoji-mreza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--o3); }
.pogoj {
background: var(--bela); border: 1.5px solid rgba(0, 43, 95, .5); border-radius: 12px;
padding: var(--o4); display: grid; gap: 4px; align-content: start;
}
.pogoj > * { margin: 0; }
.pogoj b {
font-family: var(--pis-naslov); font-size: 1.8rem; font-weight: 800;
color: var(--zelena-t); line-height: 1.05;
}
.pogoj h3 { font-size: 1rem; margin-top: 6px; }
.pogoj p { font-size: .92rem; color: var(--sivilo); }
@media (max-width: 860px) { .pogoji-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pogoji-mreza { grid-template-columns: 1fr; } }
.paket-pas {
margin-top: var(--o5); background: var(--navy); border-radius: 16px; overflow: hidden;
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center;
}
.paket-pas__telo { padding: clamp(24px, 3.5vw, 44px); color: #fff; display: grid; gap: var(--o2); justify-items: start; }
.paket-pas__telo > * { margin: 0; }
.paket-pas__telo h3 { color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
.paket-pas__telo .nadnaslov { color: #fff; opacity: .78; }
.paket-pas__telo p { color: rgba(255, 255, 255, .88); max-width: 46ch; }
.paket-pas__cena { font-family: var(--pis-naslov); font-weight: 800; font-size: 1.7rem; color: #fff; }
.paket-pas__cena small { font-size: .92rem; font-weight: 600; opacity: .82; }
.paket-pas__foto { height: 100%; min-height: 220px; max-height: 46vh; }
.paket-pas__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
.paket-pas { grid-template-columns: 1fr; }
.paket-pas__foto { min-height: 180px; order: -1; }
}
/* --- 31.15 KARTICE NAPRAV: več kontrasta, nič črnine ---------------------
Naročnik: „daj tam kjer so naprave malo več kontrasta da se okenčka lepo
vidijo in pa barve naj ne bodo črne."
· okvir je viden že v mirovanju (mornarski, ne siv)
· pod fotografijo je mehka podlaga, da se bela naprava loči od bele kartice
· naslovi in cene so mornarski oziroma zeleni, nikjer črni */
.karta, .mreza-naprav .card {
border: 1.5px solid rgba(0, 43, 95, .5); /* .card iz style.css nima roba; .5 = ~3,2:1 proti beli */
border-radius: 12px;
background: var(--bela);
box-shadow: 0 1px 0 rgba(0, 43, 95, .06);
overflow: hidden;
}
.karta:hover, .mreza-naprav .card:hover {
border-color: var(--navy);
box-shadow: 0 18px 34px -22px rgba(0, 43, 95, .45);
}
.karta__slika, .mreza-naprav .card__media {
background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
border-bottom: 1px solid rgba(0, 43, 95, .12);
}
.karta h3, .karta h3 a,
.mreza-naprav .card__title, .mreza-naprav .card__title a { color: var(--navy); }
.karta__model, .mreza-naprav .card__model { color: var(--sivilo); }
.karta__cena b, .mreza-naprav .price__main { color: var(--zelena-t); }
/* Mornarska ploščica „Vse naprave" mora ostati temna — pravilo za bele
kartice zgoraj je zaradi vrstnega reda povozilo njeno ozadje. */
.karta.karta--vse { background: var(--navy); border-color: var(--navy); }
.karta.karta--vse:hover { background: var(--navy-t); border-color: var(--navy-t); }
.karta--vse h3, .karta--vse h3 a { color: #fff; }
/* Telesno besedilo ni črno, ampak mornarsko zamolklo. */
:root { --crnilo: #1b2733; }
/* --- 31.16 PLOŠČICE PO OPRAVILIH (Nasveti) -------------------------------
Namesto petih gostih besedilnih kartic („teksti kr nametani", naročnik
6. 8. 2026): fotografija čiste površine, kratek povzetek in naprava s ceno.
Fotografije so namenoma brez naprav — kažejo rezultat, ne stroja. */
.opravila-mreza { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 26px); }
.opravilo-p {
position: relative; display: grid; grid-template-rows: auto 1fr;
background: var(--bela); border: 1.5px solid rgba(0, 43, 95, .5); border-radius: 14px;
overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease;
}
.opravilo-p:hover { border-color: var(--navy); box-shadow: 0 18px 34px -22px rgba(0, 43, 95, .45); }
.opravilo-p img { width: 100%; height: clamp(170px, 20vw, 220px); object-fit: cover; }
.opravilo-p__telo { padding: var(--o4); display: grid; gap: 6px; align-content: start; }
.opravilo-p__telo > * { margin: 0; }
.opravilo-p h3 { font-size: 1.1rem; }
.opravilo-p h3 a { text-decoration: none; color: var(--navy); }
.opravilo-p h3 a::after { content: ""; position: absolute; inset: 0; }
.opravilo-p p { color: var(--sivilo); font-size: .95rem; }
.opravilo-p__vec {
margin-top: var(--o1); padding-top: var(--o2); border-top: 1px solid var(--crta-t);
font-weight: 700; font-size: .93rem; color: var(--zelena-t);
}
@media (max-width: 820px) { .opravila-mreza { grid-template-columns: 1fr; } }
/* ==========================================================================
32. ZRAK MED PLOŠČAMI IN VPELJANE FOTOGRAFIJE
Naročnik, 6. 8. 2026: „te sekcije popravi, ker se ne smejo prilimati ena na
drugo — to velja za vse. In slike na hero sekciji in drugod naj bodo lepo
upeljane na sekcije."
Dvoje:
1. Plošče (junak, pas dejstev, promo, paket, glava podstrani) dobijo med
seboj pravi odmik, ne le nekaj pikslov.
2. Fotografija ne sega več do roba plošče: znotraj nje leži z odmikom in s
svojim zaobljenim robom, tako da je del plošče, ne zaplata čeznjo.
========================================================================== */
/* --- 32.1 Odmik med ploščami --------------------------------------------- */
.hero-lx { padding-block: clamp(20px, 3vw, 36px) clamp(36px, 5vw, 60px); }
.dejstva { margin-top: clamp(28px, 4vw, 44px); }
/* Dve zaporedni plošči znotraj istega odseka (npr. dva promo pasova) */
.promo + .promo, .paket-pas + .paket-pas { margin-top: clamp(20px, 3vw, 32px); }
/* --- 32.2 Fotografija, vpeljana v ploščo --------------------------------- */
.hero-lx__plosca { padding: clamp(14px, 1.6vw, 20px); }
.hero-lx__telo { padding: clamp(14px, 2.4vw, 40px); }
.hero-lx__foto { border-radius: 16px; overflow: hidden; }
.hero-lx__foto img { border-radius: 16px; }
.glava-lx { padding: clamp(12px, 1.4vw, 16px); }
.glava-lx__telo { padding: clamp(14px, 2.4vw, 34px); }
.glava-lx__foto { border-radius: 14px; overflow: hidden; }
.glava-lx__foto img { border-radius: 14px; }
.promo { padding: clamp(12px, 1.4vw, 16px); }
.promo__telo { padding: clamp(16px, 2.6vw, 38px); }
.promo__foto { border-radius: 14px; overflow: hidden; }
.promo__foto img { border-radius: 14px; }
.paket-pas { padding: clamp(12px, 1.4vw, 16px); }
.paket-pas__telo { padding: clamp(14px, 2.4vw, 32px); }
.paket-pas__foto { border-radius: 14px; overflow: hidden; }
.paket-pas__foto img { border-radius: 14px; }
/* Isto pri glavah podstrani, ki jih prevzame stara oznaka .dvojka--vrh */
.odsek--prvi > .dvojka--vrh { padding: clamp(12px, 1.4vw, 16px); }
.odsek--prvi > .dvojka--vrh > .dvojka__telo { padding: clamp(14px, 2.4vw, 34px); }
.odsek--prvi > .dvojka--vrh > .dvojka__slika { border-radius: 14px; overflow: hidden; }
.odsek--prvi > .dvojka--vrh > .dvojka__slika .foto { border-radius: 14px; }
/* --- 32.3 Vidna meja med sosednjima sekcijama iste barve -----------------
Dve beli sekciji zapored sta se brali kot ena dolga ploskev. Tanka črta
pove, kje se ena konča in druga začne, ne da bi dodajala barvo. */
.odsek + .odsek:not(.odsek--siva):not(.odsek--kamen):not(.odsek--navy):not(.poslovalnica):not(.pas--sky) {
border-top: 1px solid var(--crta-t);
}
.odsek--siva + .odsek--siva { border-top: 1px solid rgba(0, 43, 95, .12); }
.odsek--brez-dna + .odsek, .odsek + .odsek--brez-vrha { border-top: 0; }
/* ==========================================================================
33. BREZ TEMNIH PLOSKEV, KONTRAST Z BARVO NAMESTO Z OKVIRJEM
Naročnik, 6. 8. 2026: „ni ok, da je črna sekcija — to velja za vse";
„dal si črn okvir, naredi kontrast z barvami, ne z okvirjem";
„zeleni pas naredi lepšo sekcijo".
Nova lestvica ploskev — nobena ni temna:
bela -> --siva (#f5f5f5) -> --nadih-z (svetlo zelena) -> --nadih-m (svetlo modra)
Barva nosi ločevanje, okvir je le tanka pomožna črta.
========================================================================== */
:root {
--nadih-z: #eef5e4; /* svetlo zelena ploskev */
--nadih-m: #e9f0f7; /* svetlo modra ploskev */
--crta-l: rgba(0, 43, 95, .14); /* komaj vidna pomožna črta */
}
/* --- 33.1 Kartice: ločuje jih PODLAGA, ne okvir ------------------------- */
.karta, .mreza-naprav .card, .opravilo-p, .pogoj {
border: 1px solid var(--crta-l);
box-shadow: 0 1px 2px rgba(0, 43, 95, .05);
}
.karta:hover, .mreza-naprav .card:hover, .opravilo-p:hover {
border-color: rgba(0, 43, 95, .2);
box-shadow: 0 14px 28px -20px rgba(0, 43, 95, .3);
}
/* Fotografija naprave dobi svetlo modro podlago — bela naprava se od bele
kartice loči po barvi, ne po črti. */
.karta__slika, .mreza-naprav .card__media {
background: var(--nadih-m);
border-bottom: 1px solid var(--crta-l);
}
/* Sekcija z napravami je svetlo siva, kartice bele — kontrast nosi ploskev. */
.odsek--siva .karta, .odsek--siva .mreza-naprav .card,
.odsek--zelen .mreza-naprav .card { background: var(--bela); }
/* --- 33.2 Ploščica „Vse naprave": zelena namesto mornarske -------------- */
.karta.karta--vse {
background: var(--nadih-z); border-color: rgba(79, 128, 22, .35);
box-shadow: none;
}
.karta.karta--vse:hover { background: #e6f0d8; border-color: var(--zelena); }
.karta--vse h3, .karta--vse h3 a { color: var(--navy); }
.karta--vse p { color: var(--sivilo); }
.karta--vse .karta__pusc { color: var(--zelena-t); }
/* --- 33.3 Promo in paket: svetlo zelena ploskev, temno besedilo --------- */
.promo, .paket-pas { background: var(--nadih-z); }
.promo__telo, .paket-pas__telo { color: var(--crnilo); }
.promo__telo h2, .paket-pas__telo h3 { color: var(--navy); }
.promo__telo .nadnaslov, .paket-pas__telo .nadnaslov { color: var(--zelena-t); opacity: 1; }
.promo__telo p, .paket-pas__telo p { color: var(--sivilo); }
.promo__cena, .paket-pas__cena { color: var(--navy); }
.promo__cena small, .paket-pas__cena small { color: var(--sivilo); opacity: 1; }
/* --- 33.4 Poziv na podstraneh: svetlo modra namesto mornarske ----------- */
.poziv { background: var(--nadih-m); }
.poziv h2 { color: var(--navy); }
.poziv p { color: var(--sivilo); }
.poziv .gumb-prozoren {
background: var(--bela); color: var(--navy);
box-shadow: inset 0 0 0 1.5px rgba(0, 43, 95, .35);
}
.poziv .gumb-prozoren:hover { color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.poziv .kicker { color: var(--zelena-t); opacity: 1; }
/* --- 33.5 Pas poslovalnice: iz ploskega zelenega bloka v pravo sekcijo ---
Prej cela ploskev v močni zeleni. Zdaj svetlo zelena podlaga, podatki v
beli kartici in fotografija ob njej — enak jezik kot druge plošče. */
.poslovalnica { background: var(--nadih-z); }
.poslovalnica .ovoj { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.poslovalnica h2 { color: var(--navy); }
.poslovalnica p { color: var(--sivilo); }
.poslovalnica .gumb { background: var(--zelena); color: #fff; }
.poslovalnica .gumb:hover { background: var(--zelena-t); color: #fff; }
.poslovalnica__podatki {
background: var(--bela); border: 1px solid var(--crta-l); border-radius: 14px;
padding: clamp(20px, 2.6vw, 28px); gap: var(--o2);
box-shadow: 0 1px 2px rgba(0, 43, 95, .05);
}
.poslovalnica__podatki span { color: var(--sivilo); }
.poslovalnica__podatki a { color: var(--navy); }
/* --- 33.6 Odseki, ki so bili mornarski, postanejo svetlo modri ---------- */
.odsek--navy { background: var(--nadih-m); }
.odsek--navy h2, .odsek--navy h3 { color: var(--navy); }
.odsek--navy p, .odsek--navy li, .odsek--navy span { color: var(--sivilo); }
.odsek--navy .kicker { color: var(--zelena-t); opacity: 1; }
.odsek--navy .kartica { background: var(--bela); }
/* --- 33.7 Noga: iz temnega preliva v mirno svetlo ploskev --------------- */
.noga--temna { background: var(--siva); color: var(--sivilo); border-top: 1px solid var(--crta-l); }
.noga--temna h4 { color: var(--navy); }
.noga--temna li, .noga--temna p { color: var(--sivilo); }
.noga--temna a { color: var(--navy); }
.noga--temna a:hover { color: var(--zelena-t); }
.noga--temna strong { color: var(--navy); }
.noga--temna .noga-dno { border-top-color: var(--crta-l); color: var(--sivilo); }
.noga--temna .noga-podpis { color: var(--navy); }
.noga--temna .logo__slika { filter: none; }
/* --- 33.8 Popravek: bela pisava iz nekdanjih temnih sekcij ---------------
Odseki .odsek--navy so bili mornarski z belim besedilom. Ker so zdaj
svetlo modri, mora belo besedilo iz vseh starejših pravil (razdelki 20,
26, 29, 30) postati temno. Pravilo stoji na koncu datoteke, da povozi
vse prejšnje, in je namenoma široko. */
.odsek--navy h1, .odsek--navy h2, .odsek--navy h3, .odsek--navy h4,
.odsek--navy strong, .odsek--navy b { color: var(--navy); }
.odsek--navy p, .odsek--navy li, .odsek--navy span, .odsek--navy small,
.odsek--navy dd, .odsek--navy dt { color: var(--sivilo); }
.odsek--navy .kicker, .poziv .kicker, .poslovalnica .kicker {
background: none; color: var(--zelena-t); opacity: 1; box-shadow: none;
}
.odsek--navy .korak h3, .odsek--navy .glava h2 { color: var(--navy); }
.odsek--navy .krog, .odsek--navy .stevilka {
background: var(--zelena); color: #fff; /* številka koraka ostane bela na zeleni */
}
.odsek--navy .kartica { background: var(--bela); border: 1px solid var(--crta-l); }
.odsek--navy .kartica p { color: var(--sivilo); }
.odsek--navy .gumb-obris {
background: var(--bela); color: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(0, 43, 95, .35);
}
.odsek--navy .gumb-obris:hover { background: var(--bela); box-shadow: inset 0 0 0 1.5px var(--navy); }
.odsek--navy .gumb-prozoren {
background: var(--bela); color: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(0, 43, 95, .35);
}
/* --- 33.9 Pas poslovalnice na telefonu ----------------------------------
Nova dvostolpčna postavitev je pod 760 px silila stran v vodoravno drsenje,
ker je povozila prvotni prelom. */
@media (max-width: 760px) {
.poslovalnica .ovoj { grid-template-columns: 1fr; }
}
.poslovalnica__podatki { min-width: 0; overflow-wrap: anywhere; }
/* --- 33.10 PAS DEJSTEV, PREUREJEN --------------------------------------
Naročnik, 6. 8. 2026: „pas mi je ok, vsebina in postavitev pa ne."
Prej: štiri neenako široke postavke in gumb, stisnjen ob desni rob —
štiri številke druga ob drugi so se brale kot cenik, gumb pa je ponavljal
„V katalog naprav" iz ploščice tik nad njim.
Zdaj: štirje enako široki stolpci z ločnicami, vsak z oznako (kaj je),
vrednostjo in kratko opombo. Brez gumba. */
.dejstva {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0; list-style: none; padding: clamp(20px, 2.6vw, 30px) clamp(16px, 2.4vw, 34px);
margin: clamp(28px, 4vw, 44px) 0 0; border-radius: 20px;
justify-content: initial; align-items: stretch;
}
.dejstvo {
display: grid; gap: 2px; align-content: start; margin: 0;
padding-inline: clamp(12px, 1.8vw, 26px); text-align: left;
border-left: 1px solid rgba(255, 255, 255, .35);
}
.dejstvo:first-child { border-left: 0; padding-left: 0; }
.dejstvo:last-child { padding-right: 0; }
.dejstvo__oznaka {
font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: #fff;
}
.dejstvo b {
font-family: var(--pis-naslov); font-size: clamp(1.25rem, 1.9vw, 1.55rem);
font-weight: 800; color: #fff; line-height: 1.15;
}
.dejstvo__opomba { font-size: .88rem; color: #fff; line-height: 1.35; }
@media (max-width: 900px) {
.dejstva { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 26px) 0; }
.dejstvo:nth-child(odd) { border-left: 0; padding-left: 0; }
.dejstvo:nth-child(even) { padding-right: 0; }
}
@media (max-width: 460px) {
.dejstva { grid-template-columns: 1fr; gap: var(--o4); }
.dejstvo { border-left: 0; padding-inline: 0; }
}
/* ==========================================================================
34. DVANAJST NAROČNIKOVIH POPRAVKOV (6. 8. 2026, popoldne)
Stoji na koncu datoteke, da povozi vse prejšnje razdelke. Vsak pododdelek
nosi naročnikov stavek, ker je ta odločitev, ne domneva.
Pravila, ki NE smejo pasti: nobene temne ploskve, kontrast delajo barve in
ne okvirji, sekcije se ne dotikajo, fotografije so vpeljane v plošče.
========================================================================== */
/* --- 34.1 Kartice naprav: izrezek stoji čisto v beli kartici -------------
Naročnik: „a lahko tukaj narediš da bodo izdelki v teh okvirjih brez tega
ozadja lepo v teh karticah?"
Svetlo modra podlaga za izrezkom (razdelek 33.1) odpade. Past 20:
fotografije naprav so RGB z BELIM ozadjem brez prosojnosti — na beli
kartici se zato zlijejo in izrezek res „stoji" v kartici.
Kontrast s tem nima več kaj nositi fotografija, zato ga nosi KARTICA:
bela kartica na sivi sekciji in mehka senca, ki jo dvigne s ploskve.
Močnega okvirja NE vračamo — naročnik ga je izrecno zavrnil
(„kontrast z barvami, ne z okvirjem"). */
.karta__slika, .mreza-naprav .card__media {
background: var(--bela);
border-bottom: 1px solid var(--crta-l); /* notranja ločnica slike in besedila, ne okvir */
}
.karta, .mreza-naprav .card {
box-shadow: 0 2px 3px rgba(0, 43, 95, .07), 0 14px 26px -18px rgba(0, 43, 95, .3);
}
.karta:hover, .mreza-naprav .card:hover {
box-shadow: 0 4px 7px rgba(0, 43, 95, .1), 0 24px 42px -22px rgba(0, 43, 95, .45);
}
/* Ploščica „Vse naprave" ni fotografska kartica — ostaja plosko zelena. */
.karta.karta--vse, .karta.karta--vse:hover { box-shadow: none; }
/* --- 34.2 Servisne ploščice: naslov, opis in vrednost na isti višini -----
Naročnik: „tukaj bi samo želel da so teksti malo lepše postavljeni in bolj
simetrični."
Prej je vsaka ploščica lomila opis različno dolgo, zato je poudarjena
vrednost na dnu plavala. Zdaj vse štiri delijo iste tri vrstice mreže
(subgrid); kjer subgrid ni na voljo, vrednost potisne na dno margin-top. */
.servis__p {
display: flex; flex-direction: column; height: 100%;
}
.servis__p p { margin-top: 6px; }
.servis__p strong { margin-top: auto; padding-top: var(--o3); }
@supports (grid-template-rows: subgrid) {
/* Tri VRSTICE morajo biti izrecne, sicer subgrid pade na implicitne vrstice,
ki se merijo po vsaki ploščici posebej – in poravnave spet ni. Razmik med
vrsticami je 0, ker ga znotraj ploščice nosita margin in padding. */
.servis { grid-template-rows: repeat(3, auto); column-gap: var(--o3); row-gap: 0; }
.servis__p {
display: grid; grid-template-rows: subgrid; grid-row: span 3;
row-gap: 0; align-content: start;
}
.servis__p h3 { align-self: start; }
.servis__p p { align-self: start; margin-top: 6px; }
/* start, ne end: pri „end" bi se poravnal SPODNJI rob vrednosti, in ploščica
z dvovrstično vrednostjo bi jo začela 28 px višje od sosed. Naročnik je
prosil za poravnane začetke, ne konce. */
.servis__p strong { align-self: start; margin-top: 0; padding-top: var(--o3); }
}
/* Pod 480 px je ploščica sama v vrstici in poravnave ni treba vsiljevati. */
@media (max-width: 480px) {
.servis__p { display: flex; }
.servis__p strong { margin-top: var(--o2); padding-top: 0; }
}
/* --- 34.4 Zadnja sekcija se ne dotika noge -------------------------------
Naročnik: „želim da se sekcija svetovanje ne dotika spodnjega dela noge,
to je na vseh straneh mislim da enako."
Vzrok: zaključni poziv stoji v sekciji .odsek--brez-dna (padding-bottom:0),
ker je bil nekoč mornarski in se je namenoma zlival z nogo. Odkar je
svetlo moder, se dve svetli ploskvi stakneta brez zraka.
Odmik NE dodajamo z marginom na sekciji (sistemsko pravilo: sekcije imajo
samo padding-block), ampak s padding-bottom na tisti sekciji in z več
zraka nad nogo. */
.odsek--brez-dna:has(> .ovoj > .poziv) { padding-bottom: var(--odsek); }
.noga { padding-top: var(--o7); }
/* --- 34.6 Zloženka vprašanj: postavke niso več bele na beli --------------
Naročnik: „vprašanja so belo na belem in kot da jih je malo preveč".
Vsaka postavka dobi svojo tiho ploskev in vidno ločnico; odprta postavka
se obarva svetlo zeleno, da je jasno, katera je odprta. */
.vprasanja {
display: grid; gap: 0;
border: 1px solid var(--crta-l); border-radius: 14px; overflow: hidden;
background: var(--bela);
}
.vprasanje {
background: var(--bela); border: 0; border-radius: 0;
border-bottom: 1px solid var(--crta-l);
padding: 0;
}
.vprasanje:last-child { border-bottom: 0; }
.vprasanje > summary {
padding: var(--o3) var(--o4); background: var(--siva);
border-bottom: 1px solid transparent;
}
.vprasanje:hover > summary { background: var(--nadih-m); }
.vprasanje[open] > summary {
background: var(--nadih-z); color: var(--navy);
border-bottom-color: var(--crta-l);
}
.vprasanje > *:not(summary) {
margin: 0; padding: var(--o3) var(--o4) var(--o4);
background: var(--bela); max-width: none;
}
.vprasanje > *:not(summary) + *:not(summary) { padding-top: 0; }
/* Znak + / × mora biti viden tudi na sivi in svetlo zeleni glavi postavke. */
.vprasanje > summary::after { background: var(--bela); color: var(--zelena-t); }
.vprasanje[open] > summary::after { background: var(--bela); color: var(--zelena-t); }
/* --- 34.10 Pet korakov: pot namesto petih razsutih stolpcev --------------
Naročnik: „tukaj je čudna sekcija, naredi boljšo."
Prej: pet stolpcev s tanko črto na vrhu in številko v prazno. Zdaj je
vsak korak plošča z veliko številko, ki jih poveže v zaporedje, in med
njimi na širokem zaslonu teče ena sama tanka vodilna črta. */
.koraki {
position: relative;
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--o3); align-items: stretch;
}
.korak {
position: relative; display: flex; flex-direction: column; gap: 6px;
background: var(--bela); border: 1px solid var(--crta-l); border-radius: 14px;
padding: var(--o4); border-top: 1px solid var(--crta-l);
box-shadow: 0 1px 2px rgba(0, 43, 95, .05);
}
.korak:first-child { border-top-color: var(--crta-l); }
.korak > .krog {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 12px;
background: var(--nadih-z); color: var(--zelena-t);
font-family: var(--pis-naslov); font-size: 1.15rem; font-weight: 800;
letter-spacing: 0; margin-bottom: var(--o1);
}
.korak h3 { font-size: .99rem; min-height: 0; color: var(--navy); }
.korak p { font-size: .9rem; line-height: 1.55; color: var(--sivilo); margin: 0; }
/* Vodilna črtica med ploščami — pokaže, da gre za zaporedje, ne za mrežo. */
.korak:not(:last-child)::after {
content: ""; position: absolute; top: calc(var(--o4) + 20px); right: calc(var(--o3) * -1);
width: var(--o3); height: 1px; background: var(--crta-l);
}
@media (max-width: 1000px) {
.koraki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.korak:not(:last-child)::after { display: none; }
}
@media (max-width: 700px) { .koraki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .koraki { grid-template-columns: 1fr; } }
/* --- 34.11 Zemljevid in kontaktni pas ------------------------------------
Naročnik: „cela stran kontakt ima čudne postavitve in čuden zemljevid".
Zemljevid je zdaj plošča z istim jezikom kot fotografije (vpeljan z
odmikom in svojim robom), ob njem pa stoji stolpec z naslovom, urnikom in
gumboma — namesto dveh gumbov, sredinsko postavljenih pod sivim okvirjem. */
.zemljevid-pas {
display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 0; background: var(--siva); border-radius: 20px;
padding: clamp(12px, 1.4vw, 16px); align-items: stretch;
}
.zemljevid-pas .zemljevid {
aspect-ratio: 4/3; border-radius: 14px; box-shadow: none;
height: 100%; min-height: 260px; background: var(--bela);
}
.zemljevid-pas__telo {
padding: clamp(18px, 2.4vw, 30px);
display: grid; gap: var(--o3); align-content: center; justify-items: start;
}
.zemljevid-pas__telo > * { margin: 0; }
.zemljevid-pas__vrstica { display: grid; gap: 2px; }
.zemljevid-pas__vrstica b {
font-family: var(--pis-naslov); font-size: .78rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--zelena-t);
}
.zemljevid-pas__vrstica span, .zemljevid-pas__vrstica a { color: var(--crnilo); font-size: 1.02rem; }
.zemljevid-pas__telo .gumb-vrsta { margin-top: var(--o1); }
@media (max-width: 880px) {
.zemljevid-pas { grid-template-columns: 1fr; }
.zemljevid-pas .zemljevid { min-height: 220px; aspect-ratio: 16/10; }
}
/* --- 34.12 Kazalo v članku: ni več bela škatla na beli strani ------------
Naročnik: „tukaj je to kazalo na levi strani preveč belo, to popravi."
Podlaga --siva in tiha črta namesto bele ploskve s senco; dejavna
povezava se obarva svetlo zeleno. Brez močnega okvirja. */
.kazalo-strani {
background: var(--siva); border: 1px solid var(--crta-l);
box-shadow: none; border-radius: 14px;
}
.kazalo-strani strong { color: var(--navy); }
.kazalo-strani ul { gap: 1px; }
.kazalo-strani a { background: var(--bela); border-radius: 8px; }
.kazalo-strani a:hover { background: var(--nadih-z); color: var(--zelena-t); }
/* --- 34.13 Ploščice v besedilu (Navodila, Nasveti) -----------------------
Naročnik (dvakrat): „tukaj so teksti dokaj neurejeni […] jih bolje postavi
na stran da te ne mine ko vidiš tak tekst."
Gradniki, s katerimi dolgi odstavki dobijo ritem: dvojna mreža podatkov,
poudarjena vrstica in podnaslovljen seznam. Ničesar ne dodajamo v
style.css (past 28). */
.pod-mreza {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--o3); margin: var(--o3) 0 0;
}
.pod-mreza--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pod-p {
background: var(--siva); border: 1px solid var(--crta-l); border-radius: 12px;
padding: var(--o4); display: grid; gap: 6px; align-content: start;
}
.pod-p > * { margin: 0; }
.pod-p b, .pod-p strong:first-child {
font-family: var(--pis-naslov); color: var(--navy); font-size: 1.02rem; font-weight: 700;
}
.pod-p span, .pod-p p { color: var(--sivilo); font-size: .93rem; line-height: 1.55; }
.pod-p em {
font-style: normal; font-weight: 800; color: var(--zelena-t); font-size: .93rem;
}
@media (max-width: 760px) {
.pod-mreza, .pod-mreza--3 { grid-template-columns: 1fr; }
}
/* Poudarjena vrstica sredi besedila — eno dejstvo, ki se ne sme spregledati. */
.dejstvo-vrstica {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--o1) var(--o3);
background: var(--nadih-z); border-radius: 12px;
padding: var(--o3) var(--o4); margin: var(--o3) 0 0;
}
.dejstvo-vrstica b {
font-family: var(--pis-naslov); font-size: 1.35rem; font-weight: 800; color: var(--zelena-t);
}
.dejstvo-vrstica span { color: var(--crnilo); font-size: .97rem; }
/* Plošča z vsebino brez fotografije (plosca_vsebine z manjkajočo sliko). */
.promo--brez-slike { grid-template-columns: 1fr; }
.promo--brez-slike .promo__telo p { max-width: 70ch; }
/* Seznam v svetlo zeleni plošči: kljukica mora ostati vidna na --nadih-z. */
.promo .kljukice { margin-top: var(--o1); }
.promo .kljukice li { color: var(--crnilo); }
.promo .kljukice li::before { border-color: var(--zelena-t); }
/* --- 34.14 Sklopi vprašanj na strani Vprašanja --------------------------- */
.sklop-vprasanj + .sklop-vprasanj { margin-top: var(--o6); }
.sklop-vprasanj > h2 { margin: 0 0 var(--o2); }
.sklop-vprasanj > p { margin: 0 0 var(--o4); color: var(--sivilo); max-width: 68ch; }
/* ==========================================================================
35. STRAN NAPRAVE: KONTRAST PLOŠČIC IN NASLOVNA SLIČICA POSNETKA
Naročnik, 6. 8. 2026 (po dvanajstih popravkih): „tukaj bi tudi želel malo
več kontrasta in še nekaj a se lahko kako teli videi iz YT naštimajo, da so
na začetku lepe in izostrene slike."
Velja isto pravilo kot povsod: kontrast delajo BARVE, ne okvirji.
========================================================================== */
/* --- 35.1 Tri tehnične ploščice (.stevilke) -----------------------------
Bile so bele kartice z mehko senco na beli sekciji – v praksi trije komaj
vidni pravokotniki. Zdaj stojijo na tihi sivi ploskvi, številka je zelena
(isti poudarek kot cena na kartici naprave), oznaka pa mornarska.
Razred `.stevilke` je samo na strani naprave, zato to nikjer drugje ne
spremeni videza — preverjeno na vseh izrisanih straneh.
Podlaga je svetlo modra (--nadih-m), ne siva: proti beli sekciji je razlika
v BARVI, ne le v svetlosti, in se zato vidi. Siva #f5f5f5 se od bele loči
samo za 4 % svetlosti — številčno 1,09 : 1 in na zaslonu skoraj nič.
(To ni v nasprotju s popravkom 1: tam je svetlo modra odpadla izpod
FOTOGRAFIJE naprave, kjer je delala barvni pridih na izrezku. Tu je
podlaga podatkovne ploščice, kar je druga vloga.) */
.stevilke li {
background: var(--nadih-m);
border: 1px solid rgba(0, 43, 95, .12);
box-shadow: none;
border-radius: 14px;
padding: var(--o4) var(--o4) calc(var(--o4) - 2px);
}
.stevilke b { color: var(--zelena-t); }
.stevilke span { color: var(--navy); font-weight: 600; }
/* --- 35.2 Naslovna sličica posnetka -------------------------------------
Prej: `opacity: .82` na sličici (torej namerno zbledela) čez mornarsko
podlago, in YouTubova sličica 480 × 360, ki je bila raztegnjena na širino
plošče. Zdaj je sličica 1280 × 720 (glej build/posnetki.py in komentar v
naprava.php) in se izriše v polni barvi; potemni le toliko, kolikor je
treba, da je gumb za predvajanje berljiv — in samo pod gumbom, ne čez
celo sliko. */
.video__play {
border: 1px solid var(--crta-l);
background: var(--siva);
border-radius: 16px;
}
.video__play img { opacity: 1; }
.video__play:hover img { opacity: 1; transform: scale(1.015); }
/* Mehka senca samo v sredini, da bel ali svetel kader ne požre gumba. */
.video__play::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(circle at 50% 50%,
rgba(0, 43, 95, .34) 0, rgba(0, 43, 95, .16) 22%, rgba(0, 43, 95, 0) 46%);
transition: opacity .2s ease;
}
.video__play:hover::after { opacity: .7; }
.video__btn {
width: 76px; height: 76px; z-index: 1;
background: var(--zelena);
box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .5), 0 0 0 6px rgba(255, 255, 255, .28);
font-size: 1.5rem; line-height: 1;
transition: background .15s ease, transform .15s ease;
}
.video__play:hover .video__btn { background: var(--zelena-t); transform: translate(-50%, -50%) scale(1.06); }
/* ==========================================================================
36. REZERVACIJA: KAJ MANJKA ZA ODDAJO
Naročnik, 6. 8. 2026: „ko izpolnjuješ podatke želim, da v kolikor kakšni
podatki manjkajo ti označi kaj manjka."
Gumb „Pošlji rezervacijo" je bil prej onemogočen, dokler nista bili izbrani
naprava in termin – klik ni naredil nič in ni ničesar povedal. Zdaj je gumb
vedno klikljiv, nad njim pa se izpiše seznam vsega, kar manjka.
Markup izriše rezervacija.js; tu je samo videz.
========================================================================== */
.rez-manjka {
margin: 0 0 var(--o3);
padding: var(--o3) var(--o4);
background: #fdf3f3;
border: 1px solid rgba(197, 52, 52, .3);
border-radius: 12px;
color: #8f2727; /* 7,4 : 1 na #fdf3f3 */
font-size: .93rem; line-height: 1.5;
}
.rez-manjka[hidden] { display: none; }
.rez-manjka strong {
display: block; font-family: var(--pis-naslov); font-weight: 700;
color: #8f2727; margin-bottom: 6px;
}
.rez-manjka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.rez-manjka li { margin: 0; padding-left: 18px; position: relative; }
.rez-manjka li::before {
content: "•"; position: absolute; left: 4px; top: -1px; font-weight: 700;
}
/* Polje z napako naj se vidi tudi po barvi ozadja, ne le po robu –
„kontrast z barvami, ne z okvirjem" velja tudi tu. */
.field.has-error input, .field.has-error textarea, .field.has-error select {
background: #fdf3f3;
}
.field.has-error label { color: #8f2727; }
/* ==========================================================================
37. GLAVE PODSTRANI IN ZAKLJUČNI POZIV, PREDELANA
Naročnik, 6. 8. 2026:
„v razmislek ali so take hero sekcije smiselne, a bi lahko to naredili
kako boljše da se ne ponavlja na podstraneh taka oblika kot je na domov
strani"
„tele sekcije nujno bolj bogate zanimive in mamljive"
in ob potrditvi: „ampak nočem da je dolgočasno".
Zato NI šlo za golo odstranitev. Podstrani so dobile SVOJ silhueto, ne
osiromašene domače.
========================================================================== */
/* --- 37.1 Glava podstrani: brez sive plošče, z desnim stolpcem dejstev ----
Prej: enajst podstrani je imelo isto sivo zaobljeno ploščo s fotografijo
kot domača stran. Zdaj plošča odpade, naslov zadiha čez celo širino, ob
njem pa stoji stolpec resničnih številk te strani. Domača stran ostane
edina s fotografsko ploščo — po tem se prepozna, da si doma.
Fotografije iz glav so odpadle. Bile so okras (na štirih straneh ista
`prizor-izbira-naprave.webp`), zdaj je na njihovem mestu vsebina.
Članki fotografijo OBDRŽIJO: vsak ima svojo, vezano na temo. */
.odsek--prvi > .dvojka--vrh {
background: none;
border-radius: 0;
padding: 0;
gap: clamp(28px, 5vw, 64px);
align-items: center;
border-bottom: 1px solid var(--crta-l);
padding-bottom: clamp(28px, 4vw, 48px);
}
.odsek--prvi > .dvojka--vrh > .dvojka__telo { padding: 0; }
.odsek--prvi > .dvojka--vrh .glava-strani h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); max-width: 15ch; }
.odsek--prvi > .dvojka--vrh .glava-strani p { font-size: 1.12rem; max-width: 48ch; }
/* Članek ohrani fotografijo, a brez sive plošče — zaobljena je in nižja. */
.odsek--prvi > .dvojka--vrh > .dvojka__slika { border-radius: 16px; overflow: hidden; }
.odsek--prvi > .dvojka--vrh > .dvojka__slika .foto {
border-radius: 16px; min-height: 0; max-height: 38vh; aspect-ratio: 4/3;
}
/* Stolpec dejstev. Zelena črtica levo je isti gradnik kot .prednost na
domači strani, a v pokončni razporeditvi — sorodno, ne enako. */
.glava-dejstva {
list-style: none; margin: 0; padding: 0;
display: grid; gap: clamp(16px, 2.2vw, 26px);
}
.glava-dejstva li {
margin: 0; padding-left: var(--o3);
border-left: 3px solid var(--zelena);
display: grid; gap: 2px;
}
.glava-dejstva b {
font-family: var(--pis-naslov); font-weight: 800;
font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05;
color: var(--navy); letter-spacing: -.02em;
}
.glava-dejstva span { color: var(--sivilo); font-size: .95rem; line-height: 1.4; }
@media (max-width: 880px) {
.odsek--prvi > .dvojka--vrh { grid-template-columns: 1fr; }
.odsek--prvi > .dvojka--vrh > .dvojka__slika { order: 0; } /* dejstva POD naslov, ne nad njim */
.glava-dejstva { grid-template-columns: 1fr; }
.odsek--prvi > .dvojka--vrh .glava-strani h1 { max-width: none; }
}
/* Na telefonu ostane fotografija članka nad besedilom, dejstva pa pod njim. */
@media (max-width: 880px) {
.odsek--prvi > .dvojka--vrh > .dvojka__slika:has(.foto) { order: -1; }
}
/* --- 37.2 Zaključni poziv: dva polna stolpca namesto slike ---------------
Prej: naslov, en stavek, dva gumba in fotografija — na desetih straneh, in
ista fotografija desetkrat. Zdaj levo tri konkretne točke, desno bela
kartica s telefonom, e-pošto, urnikom in naslovom. Nič ni okras. */
.poziv--bogat {
display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: clamp(24px, 3.5vw, 48px); align-items: center;
padding: clamp(26px, 4vw, 52px);
}
.poziv--bogat .poziv__telo { display: grid; gap: var(--o3); justify-items: start; padding: 0; }
.poziv--bogat .poziv__telo > * { margin: 0; }
.poziv--bogat .poziv__telo p { max-width: 52ch; }
.poziv--bogat .kljukice { margin-top: var(--o1); }
.poziv--bogat .kljukice li { color: var(--crnilo); }
.poziv--bogat .kljukice li::before { border-color: var(--zelena-t); }
.poziv__stik {
background: var(--bela); border-radius: 16px;
padding: clamp(22px, 2.8vw, 32px);
display: grid; gap: var(--o2); align-content: start;
box-shadow: 0 2px 4px rgba(0, 43, 95, .07), 0 18px 34px -24px rgba(0, 43, 95, .35);
}
.poziv__poudarek {
margin: 0; color: var(--sivilo); font-size: .95rem; line-height: 1.5;
padding-bottom: var(--o2); border-bottom: 1px solid var(--crta-l);
}
.poziv__tel {
font-family: var(--pis-naslov); font-weight: 800;
font-size: clamp(1.65rem, 2.6vw, 2.1rem); line-height: 1.05;
color: var(--navy); text-decoration: none; letter-spacing: -.02em;
}
.poziv__tel:hover { color: var(--zelena-t); }
.poziv__mail { color: var(--zelena-t); font-weight: 700; text-decoration: none; font-size: 1rem; }
.poziv__mail:hover { text-decoration: underline; }
.poziv__podatki {
margin: var(--o2) 0 0; display: grid; gap: 2px;
padding-top: var(--o3); border-top: 1px solid var(--crta-l);
}
.poziv__podatki dt {
font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--zelena-t);
}
.poziv__podatki dd { margin: 0 0 var(--o2); color: var(--crnilo); font-size: .97rem; }
.poziv__podatki dd:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .poziv--bogat { grid-template-columns: 1fr; } }
/* ==========================================================================
38. GLAVA PODSTRANI PO NAROČNIKOVEM VZORCU + VEČ BARVE V TELESU
Naročnik, 6. 8. 2026, o prejšnjem predlogu z golimi dejstvi:
„take stvari mi zdej niso všeč, naredi drugače te hero sekcije, poglej
kakšne ima ta stran ki mi je všeč"
in ob tem posnetek Loxamove kategorijske glave: fotografija čez celo
zaobljeno ploščo, čez njo barvni preliv znamke, na njem velik bel naslov.
„barve in kontrasti so problem na celotni strani"
Prevzet je VZOREC, ne barva: pri Loxamu je preliv rdeč, tu je mornarski z
zelenim robom, ker sta to barvi te znamke.
POZOR: glava podstrani je zdaj EDINA temna ploskev na strani. Pravilo
„nobene temne ploskve" (razdelek 33) je naročnik s to zahtevo za GLAVE
preglasil; za sekcije v telesu strani še naprej velja.
Razdelek 37.1 (ravna glava z dejstvi) je s tem preglašen.
========================================================================== */
/* --- 38.1 Glava podstrani ------------------------------------------------ */
.glava-foto {
position: relative; overflow: hidden;
border-radius: 20px;
min-height: clamp(300px, 27vw, 400px);
display: grid; align-items: center;
isolation: isolate;
}
.glava-foto__slika {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover;
border-radius: 0; max-height: none; box-shadow: none;
}
/* Preliv je na levi skoraj neprosojen, zato je belo besedilo berljivo ne
glede na to, kaj je na fotografiji. Desni rob ostane odprt, da se slika
vidi. Zelena črta na dnu poveže glavo z znamko. */
.glava-foto::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(96deg,
rgba(22, 32, 43, .93) 0%, rgba(22, 32, 43, .88) 30%,
rgba(22, 32, 43, .55) 48%, rgba(22, 32, 43, .12) 66%, rgba(22, 32, 43, 0) 78%);
}
.glava-foto::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 1;
background: linear-gradient(90deg, var(--zelena) 0%, var(--zelena) 42%, rgba(72, 132, 31, 0) 100%);
}
.glava-foto__telo {
position: relative; z-index: 1;
padding: clamp(28px, 4vw, 56px);
max-width: min(54ch, 52%);
display: grid; gap: var(--o3); justify-items: start;
}
.glava-foto__telo > * { margin: 0; }
.glava-foto__telo h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.3rem); max-width: 18ch; }
.glava-foto__telo p { color: rgba(255, 255, 255, .92); font-size: 1.08rem; max-width: 52ch; }
.glava-foto__telo .kicker,
.glava-foto__telo .kicker--svetel { color: #fff; background: none; box-shadow: none; opacity: 1; }
.glava-foto__telo .kicker::before { background: var(--zelena-s, #7ec242); }
.glava-foto__datum { color: rgba(255, 255, 255, .72); font-size: .9rem; }
/* Gumb „bel" na temni ploskvi. */
.glava-foto .gumb-bel, .poziv .gumb-bel {
background: #fff; color: var(--navy);
}
.glava-foto .gumb-bel:hover, .poziv .gumb-bel:hover { background: #eef2f6; color: var(--navy); }
/* Dejstva na dnu glave: ločena s tanko belo črto, kot pri vzorcu. */
.glava-foto__dejstva {
list-style: none; margin: var(--o2) 0 0; padding: var(--o3) 0 0;
border-top: 1px solid rgba(255, 255, 255, .28);
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0; width: 100%;
}
.glava-foto__dejstva li {
margin: 0; padding-inline: clamp(12px, 1.6vw, 22px);
border-left: 1px solid rgba(255, 255, 255, .28);
display: grid; gap: 2px;
}
.glava-foto__dejstva li:first-child { border-left: 0; padding-left: 0; }
.glava-foto__dejstva b {
font-family: var(--pis-naslov); font-weight: 800;
font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: #fff; line-height: 1.1;
}
.glava-foto__dejstva span { color: rgba(255, 255, 255, .82); font-size: .86rem; line-height: 1.35; }
@media (max-width: 900px) {
.glava-foto { min-height: 0; }
.glava-foto__telo { max-width: none; }
.glava-foto::after {
background: linear-gradient(180deg, rgba(22, 32, 43, .90) 0%, rgba(22, 32, 43, .95) 100%);
}
}
@media (max-width: 560px) {
.glava-foto__dejstva { grid-template-columns: 1fr; gap: var(--o3); }
.glava-foto__dejstva li { border-left: 0; padding-left: 0; padding-top: var(--o2);
border-top: 1px solid rgba(255, 255, 255, .2); }
.glava-foto__dejstva li:first-child { border-top: 0; padding-top: 0; }
}
/* Odmik pod glavo. Prvi zapis je bil `padding-bottom: 0` z domnevo, da bo
zadostoval padding naslednje sekcije. Izmerjeno je bilo drugače: zrak pod
hero je bil 60–84 px, drugod po strani pa 144–156 px, in prva sekcija se je
vidno lepila na ploščo. Zdaj dobi glava cel odmik sekcije, kar skupaj
z naslednjo sekcijo da 144 px, torej enako kot povsod drugod. */
.odsek--prvi.odsek--brez-dna { padding-bottom: var(--odsek); }
/* --- 38.2 Več barve v ploščicah ------------------------------------------
Naročnik: „tukaj je spet premalo barv in kontrasta." Ploščice `.pod-p` so
bile vse enako sive. Zdaj nosijo pomen: zelena je vključeno, modra je
doplačilo, siva je pojasnilo. */
.pod-p--zelena { background: var(--nadih-z); border-color: rgba(72, 132, 31, .28); }
.pod-p--zelena em { color: var(--zelena-t); }
.pod-p--modra { background: var(--nadih-m); border-color: rgba(0, 43, 95, .2); }
.pod-p--modra em { color: var(--navy); }
.pod-p em {
margin-top: var(--o2); padding-top: var(--o2);
border-top: 1px solid rgba(0, 43, 95, .12);
font-size: 1.05rem; font-weight: 800;
}
/* --- 38.3 Sekcija se ne sme prilepiti na prejšnjo ------------------------
Naročnik: „sekcija se je prilimala na zgornji." Kadar si dve beli sekciji
sledita, ju je doslej ločila samo lasasta črta; pri gosti vsebini se je
izgubila. Zdaj dobita še pravi odmik. */
.odsek + .odsek:not(.odsek--siva):not(.odsek--kamen):not(.odsek--navy):not(.poslovalnica):not(.odsek--brez-vrha) {
padding-top: calc(var(--odsek) + 12px);
}
.odsek--brez-dna + .odsek { border-top: 0; padding-top: var(--odsek); }
/* --- 38.4 RITEM PLOSKEV: konec dolgih belih pasov -----------------------
Naročnik: „barve in kontrasti so problem na celotni strani."
Izmerjeno pred tem: Navodila 7 belih sekcij od 9, Nasveti 4 zapored, na
vseh straneh je bilo belo prevladujoče. Stran je bila zato ploska, čeprav
je bila vsaka sekcija zase v redu.
Rešitev je RITEM, ne barvanje posameznih sekcij na roko: vsaka soda sekcija
dobi tiho sivo ploskev. Sekcije, ki že nosijo svojo barvo (svetlo modra,
zeleni pas poslovalnice, temna glava), so izvzete — te ritem tvorijo same.
Prednost pred ročnim barvanjem: ko se doda ali odstrani sekcija, se ritem
popravi sam in ni treba loviti razredov po straneh.
Ritem velja povsod razen na domači strani.
Domača stran ima svoje zaporedje, ki ga je naročnik potrdil, in se ga ne
dotikamo. Prvi poskus je bil brez te omejitve in je Domov spremenil v pet
sivih sekcij zapored — ritem mora biti strogo pozicijski, sicer se sekcije
z lastnim razredom `--siva` seštejejo s tistimi, ki ga dobijo tu.
Popravljeno 6. 8. 2026 po pregledu: ritem je bil vezan na `.glava-foto` in
se zato NI sprožil na strani naprave, ki te glave nima. Izmerjeno: vseh
sedem sekcij tam belih, in to na strani, kjer se stranka odloči za najem.
Zdaj je pogoj obrnjen — ritem velja povsod RAZEN na domači strani, ki jo
prepoznamo po `.hero-lx` in ima svoje potrjeno zaporedje.
Razred `--kamen` je bil prej izvzet in je na dnu članka stal med dvema
sivima sekcijama: 245,245,245 → 243,242,239 → 245,245,245, torej razlika
pod 1 % svetlosti in nobene vidne meje. Zdaj sodeluje v ritmu. */
/* --- 39.9 KONEC BELINE: ritem v barvah, ne v odtenkih sive --------------
Naročnik: „na straneh je kar veliko beline in pa barve katere imamo niso
tako močne, kako bi se rešili te beline in bledosti."
Prej je ritem menjal belo in sivo #f5f5f5 — to je razlika 4 % svetlosti in
se na zaslonu skoraj ne pozna, zato je stran še naprej delovala bela.
Zdaj se menjavata BARVI znamke: svetlo zelena in svetlo modra. Razlika ni
večja po svetlosti, je pa po odtenku, in prav to se vidi.
Vrstni red je bela → zelena → bela → modra, da se ista barva ne ponovi. */
body:not(:has(.hero-lx)) main > section.odsek:nth-of-type(4n+2):not(.odsek--navy):not(.poslovalnica):not(.odsek--prvi) {
background: var(--nadih-z);
}
body:not(:has(.hero-lx)) main > section.odsek:nth-of-type(4n+4):not(.odsek--navy):not(.poslovalnica):not(.odsek--prvi) {
background: var(--nadih-m);
}
body:not(:has(.hero-lx)) main > section.odsek:nth-of-type(odd):not(.odsek--navy):not(.poslovalnica):not(.odsek--prvi) {
background: var(--papir);
}
/* Kartice na sivi ploskvi morajo ostati bele, sicer se zlijejo. */
body:not(:has(.hero-lx)) main > section.odsek:nth-of-type(even) .kartica,
body:not(:has(.hero-lx)) main > section.odsek:nth-of-type(even) .card { background: var(--bela); }
/* Tiha črta med dvema belima sekcijama ni več potrebna povsod – ritem
ločuje bolje kot lasasta črta. Ostane samo tam, kjer sta res dve beli. */
.odsek--siva + .odsek--siva { border-top: 0; }
/* --- 38.5 Pas dejstev: vrstice poravnane, ne glede na dolžino besedila ---
Naročnik je pas 6. 8. 2026 predelal v oglaševanje možnosti brez cen
(„naj se oglašuje da je možen osebni prevzem […] vikend paketi, popusti na
več naprav in možnost dostave – ne omenjaj cene"). Vrednosti so s tem
postale besedne zveze in ne več kratke številke, zato se ena lomi v dve
vrstici in potisne svojo opombo 28 px niže od sosed.
Enaka rešitev kot pri servisnih ploščicah (razdelek 34.2): vse štiri
postavke delijo iste tri vrstice mreže. Lovljenje dolžine besedila ne
deluje – prva daljša beseda ga spet podre. */
@supports (grid-template-rows: subgrid) {
.dejstva { grid-template-rows: repeat(3, auto); row-gap: 0; }
.dejstvo {
grid-template-rows: subgrid; grid-row: span 3;
row-gap: 0; align-content: start;
}
.dejstvo__oznaka, .dejstvo b, .dejstvo__opomba { align-self: start; }
.dejstvo b { margin-block: 2px; }
}
@media (max-width: 900px) {
@supports (grid-template-rows: subgrid) {
.dejstva { grid-template-rows: auto; }
.dejstvo { grid-template-rows: none; grid-row: auto; }
}
}
/* --- 38.6 Uvodni odstavek v zavihku Opis --------------------------------
Opis naprave je bil štirikrat po ~475 znakov, torej štirje enaki bloki brez
vodila. Odstavki so zdaj razrezani po povedih (glej naprava.php), prvi pa
dobi večjo pisavo, da zavihek nekje začne. Besedilo je nespremenjeno. */
.besedilo .besedilo__uvod {
font-size: 1.12rem; line-height: 1.6; color: var(--crnilo);
padding-bottom: var(--o3);
border-bottom: 1px solid var(--crta-l);
margin-bottom: var(--o3);
}
/* --- 38.7 Trije popravki iz pregleda 6. 8. 2026 -------------------------- */
/* Tehnične ploščice na strani naprave niso zapolnile stolpca: izmerjeno
212 px v 310-pikselskem stolpcu, torej 98 px prazno na desni pri vsaki.
Vzrok je `justify-items: start` na starševskem .dvojka__telo. */
.dvojka__telo > .stevilke { width: 100%; justify-self: stretch; }
/* Glava podstrani na telefonu je požrla skoraj cel zaslon: izmerjeno
614–707 px pri oknu 844 px, torej 73–84 %, in pod pregibom skoraj nič
vsebine. Naslov, odmiki in vrstica dejstev se zato na telefonu skrčijo. */
@media (max-width: 620px) {
.glava-foto { min-height: 0; }
.glava-foto__telo { padding: clamp(20px, 5vw, 28px); gap: var(--o2); }
.glava-foto__telo h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); max-width: none; }
.glava-foto__telo p { font-size: .99rem; }
/* Dejstva na telefonu odpadejo – iste številke so nižje na strani in tu so
samo jemala prostor vsebini. */
.glava-foto__dejstva { display: none; }
.glava-foto__telo .gumb-vrsta { margin-top: var(--o1); }
}
/* --- 38.8 Nežno pojavljanje sekcij --------------------------------------
Naročnik: „da se vse skupaj dvigne na next level stran."
Razred `.pojav-caka` doda assets/js/pojav.js in SAMO sekcijam, ki so ob
zagonu že pod pregibom. Brez tega skripta ta pravila nimajo na kaj prijeti,
zato stran brez JavaScripta ni prizadeta — nič ni skrito.
Pravilo za prefers-reduced-motion je tu še enkrat, kot varovalka, če bi
razred kdaj prišel na stran po drugi poti. */
.pojav-caka { opacity: 0; transform: translateY(12px); }
.pojav-caka.pojav-vidno {
opacity: 1; transform: none;
transition: opacity .32s ease-out, transform .32s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
.pojav-caka, .pojav-caka.pojav-vidno { opacity: 1; transform: none; transition: none; }
}
/* --- 38.9 Lepljiva vrstica s ceno (stran naprave) -----------------------
Prikaže jo skript v naprava.php, ko rezervacijski pas zdrsne iz vidnega
polja. Brez JavaScripta vrstice ni (atribut hidden), zato ne more nič
zakriti. */
.cena-pas {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
background: var(--bela);
border-top: 1px solid var(--crta-l);
box-shadow: 0 -8px 28px -18px rgba(0, 43, 95, .45);
padding-block: 10px;
animation: cena-pas-gor .22s ease-out;
}
.cena-pas[hidden] { display: none; }
@keyframes cena-pas-gor { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cena-pas { animation: none; } }
.cena-pas__c {
display: flex; align-items: center; gap: var(--o3);
padding-block: 0;
}
.cena-pas__ime { display: grid; gap: 0; min-width: 0; flex: 1 1 auto; }
.cena-pas__ime strong {
font-family: var(--pis-naslov); font-size: 1rem; color: var(--navy);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cena-pas__ime span { font-size: .84rem; color: var(--sivilo); }
.cena-pas__cena { display: flex; align-items: baseline; gap: 4px; flex: none; }
.cena-pas__cena b {
font-family: var(--pis-naslov); font-size: 1.35rem; font-weight: 800; color: var(--zelena-t);
}
.cena-pas__cena span { font-size: .86rem; color: var(--sivilo); }
.cena-pas .gumb { flex: none; }
@media (max-width: 560px) {
.cena-pas__ime span, .cena-pas__cena span { display: none; }
.cena-pas__c { gap: var(--o2); }
.cena-pas .gumb { padding-inline: var(--o3); }
}
/* --- 38.10 GLAVA PODSTRANI KOT TRAK -------------------------------------
Naročnik, 6. 8. 2026: „tele hero sekcije naj bodo malo manjše oz ožje kot
nek trak da je lepo vidna takoj ko prideš na stran."
Izmerjeno pred tem: glava je bila na namizju 398–528 px visoka, ker je
nosila velik naslov, tri vrstice odstavka, gumba IN vrstico dejstev. Prvi
zaslon je bila samo ona.
Zdaj je trak: nadnaslov, naslov, ena poved, gumba. Vrstica dejstev je iz
glav odstranjena — iste informacije so nižje na strani, tam pa so glavo
samo višale. Fotografija ostane in je zdaj bolje vidna, ker je plošča
nižja in zavesa ožja. */
.glava-foto {
min-height: clamp(190px, 17vw, 260px);
border-radius: 16px;
}
.glava-foto__telo {
padding: clamp(22px, 2.8vw, 38px) clamp(22px, 3vw, 44px);
gap: var(--o2);
/* Sirsi ovoj besedila, da gredo kratki naslovi glav v ENO vrstico (prej
min(48ch,56%) ~408px, kar je naslov lomilo). Na ozkih zaslonih to preglasi
.glava-foto__telo { max-width: none } v @media (max-width: 900px) spodaj. */
max-width: min(62%, 720px);
}
.glava-foto__telo h1 {
font-size: clamp(1.75rem, 3.1vw, 2.5rem);
max-width: 28ch; line-height: 1.1;
}
.glava-foto__telo p {
font-size: 1.02rem; line-height: 1.5; max-width: 46ch;
}
.glava-foto__telo .gumb-vrsta { margin-top: var(--o1); }
.glava-foto::before { height: 4px; }
@media (max-width: 620px) {
.glava-foto__telo { padding: clamp(18px, 4.5vw, 24px); }
.glava-foto__telo h1 { font-size: clamp(1.6rem, 6.4vw, 2rem); }
.glava-foto__telo p { font-size: .96rem; }
}
/* ==========================================================================
39. DESET POPRAVKOV IZ NAROČNIKOVEGA PREGLEDA (6. 8. 2026, pozno)
========================================================================== */
/* --- 39.6 Tehnične ploščice: vrednosti v isti liniji ---------------------
Naročnik: „teli podatki morajo biti lepo enako poravnani ali v isti liniji."
Izmerjeno: „1250 W" in „254 mbar" sta se lomila v dve vrstici, „10 / 9 L" v
eno, zato so oznake pod njimi stale na 90, 75 in 101 px — vsaka drugje.
Vrednost se zdaj ne lomi, ploščice pa delijo iste vrstice mreže. */
.stevilke b { white-space: nowrap; font-size: clamp(1.35rem, 2vw, 1.75rem); }
@supports (grid-template-rows: subgrid) {
.stevilke { grid-template-rows: repeat(2, auto); row-gap: 0; }
.stevilke li { grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; align-content: start; }
.stevilke b { align-self: start; }
.stevilke span { align-self: start; margin-top: 6px; }
}
/* --- 39.5 Pas poslovalnice kot vizitka -----------------------------------
Naročnik: „tukaj naredi malo boljšo kot neko vizitko sekcije."
Podatki so zdaj postavljeni kot na vizitki: ime podjetja, pod njim naslov,
urnik in stik, vsak s svojo tiho oznako, vse poravnano na eno navpičnico. */
.poslovalnica__podatki {
padding: clamp(24px, 3vw, 34px);
border-radius: 16px;
gap: 0;
box-shadow: 0 2px 4px rgba(0, 43, 95, .07), 0 20px 38px -26px rgba(0, 43, 95, .4);
}
.poslovalnica__podatki > * { padding-block: var(--o2); }
.poslovalnica__podatki > * + * { border-top: 1px solid var(--crta-l); }
.poslovalnica__podatki > *:first-child { padding-top: 0; }
.poslovalnica__podatki > *:last-child { padding-bottom: 0; }
.vizitka__ime {
font-family: var(--pis-naslov); font-weight: 800; font-size: 1.15rem;
color: var(--navy); letter-spacing: -.01em;
}
.vizitka__o {
display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--zelena-t); margin-bottom: 2px;
}
.poslovalnica__podatki a { font-weight: 700; }
/* --- 39.4 Fotografija v plošči ni več osamljena --------------------------
Naročnik: „tukaj more bit slika lepo umeščena v sekcijo ne da je tko kot
zdaj da je nad in pod njo veliko praznega."
Vzrok ni bila slika, ampak besedilo: plošča je bila zaradi dolgega seznama
734 px visoka in fotografija ob njej je izgledala izgubljena. Besedilo je
skrajšano (glej build.py), tu pa fotografija dobi svoje razmerje, da je
višina plošče odvisna od nje in ne obratno. */
/* Popravek popravka: `aspect-ratio: 4/3` je fotografijo naredil NIŽJO od
besedila ob njej in pod njo je ostala praznina. Fotografija se mora
raztegniti čez celotno višino plošče, plošča pa se ravna po daljšem od
obeh stolpcev. */
.promo { align-items: stretch; }
.promo__foto { min-height: 0; height: auto; max-height: none; align-self: stretch; }
.promo__foto img { aspect-ratio: auto; width: 100%; height: 100%; object-fit: cover; }
.promo__telo { align-content: center; }
/* --- 39.8 Zemljevid, ki se naloži ob kliku ------------------------------
Google Maps namesto OpenStreetMapa (naročnikova zahteva), a vgrajen šele ob
kliku: vgrajeni zemljevid sicer ob vsakem obisku pošlje obiskovalčev IP
Googlu, še preden ta karkoli klikne, naša politika piškotkov pa trdi
nasprotno. Do klika je tu statična plošča z gumbom. */
.zemljevid { position: relative; }
.zemljevid__klik {
position: absolute; inset: 0; width: 100%; height: 100%;
display: grid; place-content: center; justify-items: center; gap: var(--o2);
padding: var(--o4); text-align: center; cursor: pointer;
background:
radial-gradient(circle at 50% 42%, rgba(72, 132, 31, .10) 0, rgba(72, 132, 31, 0) 60%),
var(--siva);
border: 1px dashed rgba(0, 43, 95, .28); border-radius: 14px;
}
.zemljevid__klik:hover { border-color: var(--zelena); background-color: var(--nadih-z); }
.zemljevid__ikona {
display: grid; place-content: center;
width: 52px; height: 52px; border-radius: 14px;
background: var(--zelena); color: #fff;
}
.zemljevid__ikona svg { width: 26px; height: 26px; }
.zemljevid__klik strong {
font-family: var(--pis-naslov); font-size: 1.08rem; color: var(--navy);
}
.zemljevid__opomba { font-size: .85rem; color: var(--sivilo); max-width: 34ch; line-height: 1.45; }
/* ==========================================================================
40. SEDEM POPRAVKOV IZ DRUGEGA PREGLEDA (6. 8. 2026)
========================================================================== */
/* --- 40.3 Vizitka: vrednosti so bile bele na beli kartici ---------------
Napaka, ne oblikovanje: kartica stoji v zelenem pasu, ki ima `color: #fff`,
vrednosti pa so gola besedila znotraj
in so to belo barvo podedovale.
Oznake so bile vidne (imajo svojo barvo), vrednosti ne. */
.poslovalnica__podatki > div { color: var(--crnilo); font-size: 1rem; line-height: 1.45; }
.poslovalnica__podatki > div a { color: var(--navy); }
.poslovalnica__podatki > div a:hover { color: var(--zelena-t); }
/* --- 40.1 Območje dostave: ožja sekcija --------------------------------- */
.pod-mreza--ozka { max-width: 860px; }
.odsek:has(> .ovoj > .pod-mreza--ozka) .glava { max-width: 860px; }
/* --- 40.5 Ploščice v isti liniji ---------------------------------------
Naročnik: „tej kvadratki, naredi lepše in pa da bodo lepo v istih linijah."
Naslov in besedilo sta se prej začenjala vsak na svoji višini, ker je bil
naslov enkrat v eni, drugič v dveh vrsticah. */
@supports (grid-template-rows: subgrid) {
.pod-mreza { grid-template-rows: repeat(2, auto); row-gap: 0; }
.pod-mreza--3 { grid-template-rows: repeat(2, auto); }
.pod-p { grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; align-content: start; }
.pod-p > b, .pod-p > strong:first-child { align-self: start; }
.pod-p > span, .pod-p > p { align-self: start; margin-top: 6px; }
/* Ploščice s ceno imajo tri vrstice. */
.pod-mreza:has(.pod-p em) { grid-template-rows: repeat(3, auto); }
.pod-mreza:has(.pod-p em) .pod-p { grid-row: span 3; }
.pod-p em { align-self: end; }
}
.pod-p {
border-radius: 14px;
box-shadow: 0 1px 2px rgba(0, 43, 95, .05);
}
.pod-p b, .pod-p strong:first-child { font-size: 1.06rem; line-height: 1.3; }
/* --- 40.6 Tehnične ploščice: večja, mirnejša pisava --------------------- */
.stevilke b { font-size: clamp(1.55rem, 2.3vw, 2rem); letter-spacing: -.02em; }
.stevilke span { font-size: .95rem; line-height: 1.4; color: var(--navy); font-weight: 600; }
.stevilke li { padding: var(--o4) var(--o3); }
/* --- 40.7 Načini plačila z ikonami --------------------------------------
Naročnik: „naj bodo vidne ikone plačilnih sredstev."
Namenoma NI logotipov Visa in Mastercard: kartično plačilo še ni vklopljeno
(ključev Stripe ni), logotipi znamk pa bi obljubljali nekaj, česar stran še
ne zna. Ko Stripe zaživi, jih dodamo. */
.placilo__i {
display: grid; place-content: center;
width: 44px; height: 44px; border-radius: 12px;
background: var(--bela); color: var(--zelena-t);
box-shadow: 0 1px 2px rgba(0, 43, 95, .08);
margin-bottom: var(--o1);
}
.placilo__i svg { width: 22px; height: 22px; }
.placila .pod-p--modra .placilo__i { color: var(--navy); }
/* --- 40.1b Zemljevid: OSM viden takoj, gumb za preklop na Google -------- */
.zemljevid__preklop {
position: absolute; right: 12px; bottom: 12px; z-index: 2;
background: var(--bela); color: var(--navy);
border: 1px solid var(--crta-l); border-radius: 999px;
padding: 8px 16px; font-size: .86rem; font-weight: 700; cursor: pointer;
box-shadow: 0 4px 14px -6px rgba(0, 43, 95, .4);
}
.zemljevid__preklop:hover { background: var(--nadih-z); border-color: var(--zelena); }
.zemljevid iframe { width: 100%; height: 100%; border: 0; display: block; }
/* --- 40.2 Junak: fotografija in besedilo enako visoka ---------------------
Naročnik: „nisi prilagodil slike ali pa sekcije eno drugi in je pod sliko
preveč praznine."
Vzrok je bil `max-height: 56vh` na fotografiji. Ta se v merilnem okvirju,
visokem 3000 px, sploh ni sprožil, zato ga prvo merjenje ni videlo — ISTA
past kot 43. Pri pravih višinah okna je bilo tako:
1280 × 700 besedilo 484, slika 392 -> 112 px praznine
1440 × 820 besedilo 521, slika 459 -> 82 px
1280 × 800 besedilo 484, slika 448 -> 56 px
Omejitev je obstajala zato, da nobena fotografija ni višja od 60 % zaslona.
Namesto da bi krčili SLIKO in puščali luknjo, krčimo pri nizkem oknu
BESEDILO – s tem se zniža cela plošča in pravilo drži samo od sebe. */
.hero-lx__foto { max-height: none; }
.hero-lx__foto img { height: 100%; object-fit: cover; }
@media (min-width: 900px) and (max-height: 860px) {
.hero-lx__telo { gap: var(--o2); padding-block: clamp(14px, 2vw, 26px); }
.hero-lx__telo h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.hero-lx__telo p { font-size: 1rem; line-height: 1.5; }
}
@media (min-width: 900px) and (max-height: 740px) {
.hero-lx__telo h1 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
.hero-lx__telo p { font-size: .95rem; }
}
/* Ista omejitev kot pri junaku (40.2) tudi za ploščo z vsebino: pri nizkem
oknu se skrči BESEDILO, da fotografija ostane pod 60 % zaslona in pod njo
ne nastane luknja. Merjeno prej: slika 702 px pri oknu 800 px, torej 88 %. */
@media (min-width: 900px) and (max-height: 900px) {
.promo__telo { padding-block: clamp(16px, 2.2vw, 30px); gap: var(--o2); }
.promo__telo h2 { font-size: clamp(1.5rem, 2.2vw, 1.95rem); }
.promo__telo p { font-size: 1rem; }
.promo .kljukice { gap: var(--o1); }
.promo .kljukice li { font-size: .95rem; line-height: 1.45; }
}
/* Zemljevid pri nizkem oknu ne sme čez 60 % zaslona (merjeno 478 px pri
oknu 700 px, torej 68 %). Plošča se ravna po besedilnem stolpcu, zato
omejitev ne pusti luknje. */
.zemljevid-pas .zemljevid { max-height: 55vh; }
/* --- 40.7b Popravek: ploščice plačil imajo TRI vrstice ------------------
Pravilo 40.5 je vsem `.pod-p` predpisalo subgrid čez DVE vrstici (naslov in
besedilo). Ploščice načinov plačila imajo tri otroke — ikono, naslov in
besedilo — zato je tretji pristal v isti vrstici kot drugi in naslov se je
prekril z besedilom.
Nauk: kadar se ploščici doda otrok, je treba popraviti tudi število vrstic
mreže, sicer subgrid tiho zloži dva otroka v isto vrstico. */
.placila { grid-template-rows: repeat(3, auto); }
.placila .pod-p { grid-row: span 3; }
.placila .placilo__i { align-self: start; }
.placila .pod-p > b { align-self: start; }
.placila .pod-p > span:not(.placilo__i) { align-self: start; margin-top: 6px; }
/* --- 40.8 NAVPIČNI RITEM ZNOTRAJ SEKCIJE --------------------------------
Naročnik: „tukaj morejo biti lepo postavljene vse sekcije, lepi presledki."
Sistem je doslej urejal odmike MED sekcijami (padding-block), ne pa med
bloki ZNOTRAJ ene sekcije. Dokler je imela sekcija glavo in eno vsebino, se
to ni poznalo, ker ima `.glava` svoj spodnji odmik. Ko je Kontakt dobil tri
bloke v eni sekciji (naslov, ploščice, obrazec), so se stakniti — izmerjeno
0 px med njimi. Enako pod ploščicami območja dostave.
Pravilo velja za neposredne otroke ovoja v sekciji. Odmik je enak kot ga je
doslej nosila `.glava` (48 px), zato se nikjer drugje nič ne premakne:
sosednja margina se zlijeta v eno.
Ovoji, ki so mreža (pas poslovalnice), so izvzeti — tam razmik ureja `gap`,
margine pa se v mreži ne zlivajo in bi se sešteli. */
.odsek > .ovoj:not(.dvojka) > * + *:not(script):not(style) { margin-top: var(--o6); }
.poslovalnica > .ovoj > * + * { margin-top: 0; }
/* Opomba pod vsebino je pripis, ne nov blok – zadostuje manjši odmik. */
.odsek > .ovoj:not(.dvojka) > * + .opomba { margin-top: var(--o3); }
/* =============================================================================
41. HERO SEKCIJE CEZ CELO SIRINO (narocnik 6. 8. 2026)
-----------------------------------------------------------------------------
Domaci hero (siva plosca + zeleni pas dejstev) in glava podstrani se
raztegnejo od roba do roba zaslona (full-bleed), vsebina znotraj pa ostane
poravnana na isti 1160 px stolpec kot ostale sekcije. html ima
overflow-x: clip, zato 100vw ne povzroci vodoravnega drsenja.
Spremeni SAMO te hero sekcije; drugih sekcij se ne dotika.
============================================================================= */
/* 100vw vkljucuje navpicni drsnik, zato full-bleed sicer doda nekaj px
vodoravnega drsenja. body ima overflow-x: clip, html pa ne -- dodamo ga tudi
sem (clip je varen za lepljivo glavo, za razliko od hidden). */
html { overflow-x: clip; }
.hero-lx__plosca,
.hero-lx .dejstva,
.glava-foto {
width: 100vw;
margin-inline: calc(50% - 50vw);
max-width: none;
border-radius: 0;
}
/* Poravnava vsebine na 1160 px stolpec velja SAMO na sirokih zaslonih (>900px).
Na ozkih naj besedilo uporabi CELO sirino (in gumba stojita en ob drugem) --
za to ze skrbijo obstojeca mobilna pravila glave (max-width: none in temen
navpicni preliv pri <=900px). Rob = razdalja od roba zaslona do stolpca. */
@media (min-width: 901px) {
/* Domaci hero: naslov malenkost bolj levo (naravnan blize levemu robu kot
1160 stolpec) -- 620 namesto 580 premakne vsebino ~40px v levo. */
.hero-lx__telo {
padding-inline-start: max(clamp(20px, 4vw, 40px), calc(50vw - 800px + clamp(20px, 4vw, 40px)));
}
/* glava-foto__telo je max-width omejen (720px, za sirino naslova). Zato ga
na 1160 stolpec poravnamo z MARGINO, ne s paddingom: padding bi jedel
sirino VSEBINE znotraj 720px in pri sirokih zaslonih lomil naslov v vec
vrstic (pri 1900px je padding zrasel na 410px in pustil vsebini le ~266px). */
.glava-foto__telo {
margin-inline-start: max(0px, calc(50vw - 800px));
}
.hero-lx .dejstva,
.odsek--prvi > .ovoj:has(> .servis) > .glava-strani {
padding-inline: max(clamp(20px, 4vw, 40px), calc(50vw - 800px + clamp(20px, 4vw, 40px)));
}
}
/* Na ozkih zaslonih naj besedilo glave uporabi CELO sirino. Starejsi razdelek
je pustil `.glava-foto__telo { max-width: min(48ch, 56%) }`, ki je besedilo
krcil tudi na mobilnem in silil gumba en pod drugega -- tu ga preglasimo. */
@media (max-width: 900px) {
.glava-foto__telo { max-width: none; }
}
/* Na ozkih zaslonih naj gumba v heroju delita vrstico (en ob drugem), ne
en pod drugim, in naj bosta lepo raztegnjena. */
@media (max-width: 560px) {
.glava-foto__telo > .gumb-vrsta,
.hero-lx__telo > .gumb-vrsta { flex-wrap: nowrap; }
.glava-foto__telo > .gumb-vrsta > .gumb,
.hero-lx__telo > .gumb-vrsta > .gumb {
flex: 1 1 0; min-width: 0; justify-content: center;
padding-inline: clamp(10px, 3vw, 18px);
}
}
/* Kontakt: siva naslovna plosca (.glava-strani) cez celo sirino. Isti gradnik
uporabljajo tudi pravne strani in Rezervacija, zato ciljamo SAMO Kontakt --
njegov prvi ovoj edini vsebuje kontaktne ploscice .servis. */
.odsek--prvi > .ovoj:has(> .servis) > .glava-strani {
width: 100vw;
margin-inline: calc(50% - 50vw);
max-width: none;
border-radius: 0;
}
/* Usklajena sirina glave in noge: trak, servisna vrstica, navigacija IN noga
se raztegnejo na isto sirino (1600px) namesto stisnjenih 1160px na sredini.
Ucinek: logo gre bolj levo, telefon in Rezervacija bolj desno, glava pa se
po robovih poravna z nogo. Postavitev znotraj (flex, stolpci) ostane enaka. */
.trak > .ovoj,
.servisna > .ovoj,
.zaglavje > .ovoj,
.noga > .ovoj {
max-width: 1600px;
padding-inline: clamp(20px, 4vw, 40px);
}
/* =============================================================================
42. JUNAK V DJM SLOGU (narocnik 6. 8. 2026)
-----------------------------------------------------------------------------
Prej: svetla siva plosca, besedilo levo + fotografija desno (dve polji).
Zdaj po vzoru djm.si: fotografija tece cez CELO sirino, cez njo temen preliv
z leve, besedilo pa lezi na njej. Junak je nizji, zelen pas dejstev pod njim
pa manjsi.
Razred `.hero-lx` na sekciji OSTANE (nanj je vezan ritem sekcij v razdelku
38.7: `body:not(:has(.hero-lx))`), spremeni se le videz.
============================================================================= */
.hero-djm { padding-block: 0; }
/* POZOR: sloji so zlozeni s POZITIVNIMI z-indeksi (foto 0, preliv 1, besedilo 2).
Prvi poskus je uporabil negativne (-2/-1) kot pri .glava-foto, a je bila
fotografija tedaj skrita ZA ozadjem plosce -- izmerjeno: desni rob je vrnil
natanko barvo ozadja. Zato plosca nima svojega `background`. */
.hero-djm .hero-lx__plosca {
position: relative; display: block;
/* Star zapis je plosci dal 20 px notranjega odmika; ker je fotografija zdaj
ozadje, besedilo pa ima svojo margino, se je ta odmik le pristel in naslov
je stal 20 px desno od vsebine pod herojem. */
padding: 0;
border-radius: 0;
min-height: clamp(300px, 30vw, 420px); /* tanjse od prejsnjih ~500px */
overflow: hidden;
}
/* Fotografija postane ozadje cez celo sirino. */
.hero-djm .hero-lx__foto {
position: absolute; inset: 0; z-index: 0;
height: 100%; min-height: 0; max-height: none;
}
.hero-djm .hero-lx__foto img {
width: 100%; height: 100%; object-fit: cover;
/* Izvirnik je pokoncna soba 3216x2160; v nizkem, sirokem izrezu bi sredina
pokazala le svetlo steno. Zamaknemo desno navzdol, da ostane naprava v
kadru (isto vlogo ima v predlogu djm.si stroj na desni). */
object-position: 50% 52%;
}
/* Temen preliv z leve, da je belo besedilo berljivo, desni rob ostane odprt. */
.hero-djm .hero-lx__plosca::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
/* Preliv mora biti OZEK: prvi poskus je temnil do 84 % sirine in prekril
stroje na fotografiji, tako da je desno ostala samo svetla stena. */
background: linear-gradient(96deg,
rgba(11, 26, 18, .93) 0%, rgba(11, 26, 18, .86) 22%,
rgba(11, 26, 18, .55) 38%, rgba(11, 26, 18, .18) 52%, rgba(11, 26, 18, 0) 64%);
}
/* Zelena crta na dnu poveze junaka z znamko (isto kot glave podstrani). */
.hero-djm .hero-lx__plosca::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 3;
background: linear-gradient(90deg, var(--zelena) 0%, var(--zelena) 42%, rgba(72, 132, 31, 0) 100%);
}
.hero-djm .hero-lx__telo {
position: relative; z-index: 2;
padding-inline: 0; padding-block: clamp(30px, 4vw, 54px);
gap: var(--o2);
}
.hero-djm .hero-lx__telo h1 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.9rem); max-width: 20ch; }
.hero-djm .hero-lx__telo p { color: rgba(255, 255, 255, .90); max-width: 52ch; font-size: 1.04rem; }
.hero-djm .hero-lx__telo .znak { background: var(--zelena); color: #fff; box-shadow: none; }
/* Manjsi zelen pas dejstev pod junakom. */
.hero-djm .dejstva {
margin-top: 0;
padding-block: clamp(14px, 1.7vw, 20px);
}
.hero-djm .dejstvo b { font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.hero-djm .dejstvo__opomba { font-size: .84rem; }
@media (min-width: 901px) {
/* Besedilo poravnamo na stolpec z MARGINO (padding bi jedel sirino vsebine
in lomil naslov -- past iz razdelka 41). */
.hero-djm .hero-lx__telo {
max-width: min(58%, 660px);
margin-inline-start: max(clamp(20px, 4vw, 40px), calc(50vw - 800px + clamp(20px, 4vw, 40px)));
}
}
@media (max-width: 900px) {
.hero-djm .hero-lx__plosca { min-height: 0; }
.hero-djm .hero-lx__telo {
max-width: none;
padding-inline: clamp(20px, 5vw, 32px);
}
/* Preliv na ozkem zaslonu potegnemo cez celo ploskev (kot pri .glava-foto). */
.hero-djm .hero-lx__plosca::after {
background: linear-gradient(180deg, rgba(11, 26, 18, .90) 0%, rgba(11, 26, 18, .95) 100%);
}
}
/* =============================================================================
43. GLAVE PODSTRANI: BREZ BELEGA PASU POD HEROJEM (narocnik 7. 8. 2026)
-----------------------------------------------------------------------------
Prva sekcija je imela 72 px spodnjega odmika, zato je med hero fotografijo in
naslednjo sekcijo zijal bel pas. Hero se zdaj dotakne naslednje sekcije,
ploskev pa je nekoliko visja, da ni videti stisnjena.
Velja za Najemi, Nasveti, Navodila, Vprasanja in clanke -- povsod, kjer je
.glava-foto v prvi sekciji.
============================================================================= */
.odsek--prvi:has(.glava-foto) { padding-bottom: 0; }
.glava-foto { min-height: clamp(240px, 21vw, 330px); }
/* =============================================================================
44. PONUDBA NA DOMOV: FIKSEN PAKET + DRSNIK NAPRAV (narocnik 7. 8. 2026)
-----------------------------------------------------------------------------
Prej sta bili dve sekciji ena pod drugo: vseh sedem naprav v mrezi (dve
vrsti) in pod njo se pas s paketom. Skupaj je to bilo pribl. 1500 px visine.
Zdaj je vse v ENI vrsti: levo paket, ki miruje, desno tri naprave naenkrat,
ostale se pridrsajo. Sekcija je s tem bistveno nizja.
============================================================================= */
.ponudba {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
gap: var(--o3);
align-items: stretch;
}
/* --- paket (fiksen, se ne premika) --- */
.paket-karta {
position: relative; display: flex; flex-direction: column;
background: var(--bela); border: 1.5px solid var(--zelena);
border-radius: 12px; overflow: hidden;
}
.paket-karta__slika {
height: 150px; background: #fff; display: flex; align-items: center; justify-content: center;
border-bottom: 1px solid var(--crta-t); overflow: hidden;
}
.paket-karta__slika img { width: 100%; height: 100%; object-fit: cover; }
.paket-karta__telo { padding: var(--o3); display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.paket-karta__telo > * { margin: 0; }
.paket-karta h3 { font-size: 1.05rem; }
.paket-karta p { font-size: .9rem; color: var(--sivilo); }
.paket-karta .karta__cena { margin-top: auto; }
.paket-karta .gumb { margin-top: var(--o2); align-self: start; }
/* --- drsnik s karticami naprav --- */
.drsnik { position: relative; min-width: 0; }
.drsnik__sled {
display: grid; grid-auto-flow: column;
grid-auto-columns: calc((100% - 2 * var(--o3)) / 3); /* tri naprave naenkrat */
gap: var(--o3);
overflow-x: auto; scroll-snap-type: x mandatory;
scroll-behavior: smooth; scrollbar-width: none;
padding-bottom: 2px; /* da senca kartice ni odrezana */
}
.drsnik__sled::-webkit-scrollbar { display: none; }
.drsnik__sled > .karta { scroll-snap-align: start; }
/* Puscici sta v GLAVI sekcije, ne cez kartice: prvi zapis ju je polozil na
levi in desni rob sledi, kjer sta prekrivali naslov oziroma rob kartice. */
.vrsta-glava__desno { display: flex; align-items: center; gap: var(--o3); flex-wrap: wrap; }
.drsnik-krmilje { display: flex; gap: 8px; }
.drsnik__gumb {
width: 40px; height: 40px; border-radius: 999px; cursor: pointer; flex: none;
border: 1.5px solid var(--crta-t); background: #fff; color: var(--navy);
font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.drsnik__gumb:hover:not(:disabled) { border-color: var(--zelena); color: var(--zelena-t); }
.drsnik__gumb:disabled { opacity: .3; cursor: default; }
@media (max-width: 900px) {
.ponudba { grid-template-columns: 1fr; }
.drsnik__sled { grid-auto-columns: calc((100% - var(--o3)) / 2); }
.drsnik-krmilje { display: none; } /* na dotik se drsa s prstom */
}
@media (max-width: 560px) {
.drsnik__sled { grid-auto-columns: 78%; }
}
/* =============================================================================
45. POPRAVKI PO PREGLEDU (narocnik 7. 8. 2026)
-----------------------------------------------------------------------------
a) Trak nad zaglavjem: besedilo je bilo centrirano in je zato izgledalo
zamaknjeno v desno glede na navigacijo. Zdaj se zacne na istem levem robu
kot vsa ostala vsebina strani.
b) Ponudba (paket + drsnik) je raztegnjena cez celo sirino (kot zaglavje in
noga, do 1600 px) in ima vecje kartice.
============================================================================= */
/* Meni v zaglavju ni na sredini strani: levo od njega je logotip (137 px),
desno pa telefon in gumb (287 px), zato je njegovo sredisce zamaknjeno za
(287 - 137) / 2 = 75 px v levo. Besedilo v traku zamaknemo za enako, da
stoji natanko nad menijem (Domov, Najemi, Nasveti ...). Razlika obeh strani
je stalna, zato poravnava drzi pri vseh sirinah zaslona. */
.trak > .ovoj { text-align: center; padding-right: calc(clamp(20px, 4vw, 40px) + 150px); }
.trak__besedilo { display: inline-block; }
@media (max-width: 1080px) { /* pod to sirino se meni zloži, zamik odpade */
.trak > .ovoj { padding-right: clamp(20px, 4vw, 40px); }
}
/* --- b) sirsa ponudba z vecjimi karticami --- */
/* Celotna sekcija (naslov, kartice, gumb) je siroka 1600 px kot zaglavje in
noga, da se naslov poravna s karticami. */
#naprave > .ovoj { max-width: 1600px; }
.ponudba { gap: var(--o4); }
/* Vecje slike in besedilo v karticah te sekcije. */
.ponudba .karta__slika,
.ponudba .paket-karta__slika { height: 230px; }
.ponudba .karta__telo,
.ponudba .paket-karta__telo { padding: var(--o4); }
.ponudba .karta h3,
.ponudba .paket-karta h3 { font-size: 1.18rem; }
.ponudba .karta__cena b { font-size: 1.35rem; }
.ponudba .karta__model { font-size: .95rem; }
.ponudba .drsnik__sled { gap: var(--o4); }
.ponudba .drsnik__sled { grid-auto-columns: calc((100% - 2 * var(--o4)) / 3); }
@media (max-width: 900px) {
.ponudba { padding-inline: clamp(20px, 4vw, 40px); }
.ponudba .drsnik__sled { grid-auto-columns: calc((100% - var(--o4)) / 2); }
.ponudba .karta__slika, .ponudba .paket-karta__slika { height: 190px; }
}
@media (max-width: 560px) {
.ponudba .drsnik__sled { grid-auto-columns: 82%; }
}
/* =============================================================================
46. DOMACA STRAN: ENOTNA SIRINA VSEH SEKCIJ (narocnik 7. 8. 2026)
-----------------------------------------------------------------------------
„Prilagodi vse kartice na prvi strani glede na velikost kartic v sekciji
cenik na dan in vikend." Tam je ovoj sirok 1600 px (kot zaglavje in noga),
drugod pa 1160 px -- zato so bile tamkajsnje kartice vidno manjse in
zamaknjene. Zdaj imajo VSE sekcije domace strani isto sirino, kartice pa se
samodejno raztegnejo.
Domaco stran prepoznamo po `.hero-lx` (isti nacin kot ritem sekcij v 38.7).
============================================================================= */
/* NAROCNIK 7. 8. 2026: „vse kartice naj bodo velike kot na Domov, po celotni
strani". Zato enotna sirina za VSE strani, ne le za domaco. Besedilni bloki
(.besedilo, clanki, pravne strani) imajo svoj ozji max-width, zato vrstice
ostanejo berljive. */
main > section > .ovoj { max-width: 1600px; }
/* Vecje slike v ploscicah opravil, da se ujemajo s karticami naprav. */
body:has(.hero-lx) .plosca__slika,
body:has(.hero-lx) .plosca img { height: 230px; object-fit: cover; width: 100%; }
/* =============================================================================
47. PAKET OB VODILNI NAPRAVI (Najemi) — narocnik 7. 8. 2026
-----------------------------------------------------------------------------
Paket je bil najprej na dnu strani, nato pod katalogom; oboje je bilo
premalo vidno. Zdaj stoji V MREZI, takoj ob najbolj priljubljeni napravi:
vodilna naprava zasede dva stolpca, paket tretjega.
Kartica ni `.card`, zato je filtri ne stejejo med naprave.
============================================================================= */
.mreza-naprav--s-paketom .card--vodilna { grid-column: span 2; }
/* Kartica je BELA kot vse druge (narocnik 7. 8. 2026: „naj ne bo crna"),
izstopa pa z zelenim okvirjem in zeleno znacko. */
.paket-karta--poudarjena {
position: relative; display: flex; flex-direction: column;
background: var(--bela); border: 1.5px solid var(--zelena); border-radius: 16px;
overflow: hidden; box-shadow: var(--senca);
color: var(--crnilo);
}
.paket-karta--poudarjena .paket-znak { position: absolute; top: 14px; left: 14px; z-index: 2; }
.paket-karta--poudarjena .paket-karta__slika {
height: 190px; background: #fff; border-bottom: 1px solid var(--crta-t);
}
.paket-karta--poudarjena .paket-karta__slika img { width: 100%; height: 100%; object-fit: cover; }
.paket-karta--poudarjena .paket-karta__telo {
padding: var(--o4); display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto;
}
.paket-karta--poudarjena h3 { color: var(--navy); font-size: 1.2rem; margin: 0; }
.paket-karta--poudarjena p { color: var(--sivilo); font-size: .93rem; margin: 0; }
.paket-karta--poudarjena .paket-pas__cena { color: var(--navy); font-size: 1.8rem; margin-top: auto; }
.paket-karta--poudarjena .paket-pas__cena small { color: var(--sivilo); }
.paket-karta--poudarjena .gumb { align-self: stretch; justify-content: center; }
/* Kljukice na BELI podlagi morajo biti temne (privzeto so bele za temni pas). */
.paket-karta--poudarjena .paket-kljukice li { color: var(--crnilo); }
/* Zelena znacka in kljukice (uporablja ju tudi kartica v mrezi). */
.paket-znak {
display: inline-block; background: var(--zelena); color: #fff;
font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
padding: 5px 12px; border-radius: 999px;
}
.paket-kljukice { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.paket-kljukice li {
position: relative; padding-left: 24px; margin: 0;
color: rgba(255, 255, 255, .9); font-size: .92rem; line-height: 1.4;
}
.paket-kljukice li::before {
content: ""; position: absolute; left: 0; top: .35em;
width: 14px; height: 7px; border-left: 2.5px solid var(--zelena-s, #7ec242);
border-bottom: 2.5px solid var(--zelena-s, #7ec242); transform: rotate(-45deg);
}
@media (max-width: 1000px) {
.mreza-naprav--s-paketom .card--vodilna { grid-column: 1 / -1; }
}
/* =============================================================================
48. POGOJI NAJEMA: „Kdaj je cena nizja" (narocnik 7. 8. 2026)
-----------------------------------------------------------------------------
Prej: stiri enake ploscice, v katerih sta se mesala POPUSTA in LOGISTIKA
(prevzem, dostava) -- pod naslovom „Kdaj je cena nizja" prevzem in dostava
nista popusta. Zdaj sta popusta poudarjena zgoraj (velik odstotek v zelenem
krogu), pod njima primer izracuna iz pravih cen, prevzem in dostava pa sta
locena in mirnejsa.
============================================================================= */
/* Sekcija je enako siroka kot katalog nad njo (#naprave), sicer se kartice
ne poravnajo z napravami. */
#pogoji > .ovoj { max-width: 1600px; }
.popusti-dvojka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o4); }
.popust-karta {
display: flex; gap: var(--o3); align-items: center;
background: var(--bela); border: 1.5px solid var(--zelena);
border-radius: 14px; padding: var(--o4);
}
.popust-karta > div > * { margin: 0; }
.popust-karta__st {
flex: none; width: 92px; height: 92px; border-radius: 999px;
background: var(--zelena); color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--pis-naslov); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em;
}
.popust-karta h3 { font-size: 1.12rem; color: var(--navy); }
.popust-karta p { font-size: .95rem; color: var(--sivilo); margin-top: 4px; }
.popust-primer {
margin: var(--o4) 0 0; padding: var(--o3) var(--o4);
background: var(--nadih-z, #eef5e4); border-left: 4px solid var(--zelena);
border-radius: 10px; color: var(--crnilo); font-size: .97rem; line-height: 1.6;
}
.popust-primer strong { color: var(--navy); }
.prevzem-dvojka {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--o4); margin-top: var(--o4);
}
.prevzem-karta {
background: var(--bela); border: 1.5px solid var(--crta-t); border-radius: 14px;
padding: var(--o4); display: grid; gap: 6px; align-content: start;
}
.prevzem-karta > * { margin: 0; }
.prevzem-karta h3 { font-size: 1.05rem; color: var(--navy); }
.prevzem-karta p { font-size: .93rem; color: var(--sivilo); }
.prevzem-karta__znesek {
font-family: var(--pis-naslov); font-weight: 800; font-size: 1.3rem;
color: var(--zelena-t); margin-top: 4px;
}
@media (max-width: 760px) {
.popusti-dvojka, .prevzem-dvojka { grid-template-columns: 1fr; }
.popust-karta__st { width: 74px; height: 74px; font-size: 1.25rem; }
}
/* =============================================================================
49. NAVODILA ZA NAJEM — nova postavitev (narocnik 7. 8. 2026)
-----------------------------------------------------------------------------
Stran je bila prenatrpana in se je ponavljala. Zdaj so stirje gradniki:
koraki (ozka vrsta), stiri kljucna dejstva, obracun in dvojica
„vkljuceno / dobro je vedeti". Vsak podatek stoji na ENEM mestu.
============================================================================= */
/* --- koraki: ena vrsta, brez velikih plosc --- */
.nav-koraki {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--o4);
}
.nav-korak {
margin: 0; display: flex; gap: var(--o3); align-items: flex-start;
padding-top: var(--o3); border-top: 3px solid var(--zelena);
}
.nav-korak__st {
flex: none; width: 34px; height: 34px; border-radius: 999px;
background: var(--navy); color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--pis-naslov); font-weight: 800; font-size: .95rem;
}
.nav-korak b { display: block; color: var(--navy); font-size: 1.02rem; }
/* POZOR: pravilo mora ciljati SAMO opis, ne tudi stevilke. Prvi zapis je bil
`.nav-korak span` in je stevilko pobarval sivo na mornarskem krogu, tako da
je izginila. */
.nav-korak > div > span { display: block; color: var(--sivilo); font-size: .93rem; line-height: 1.5; margin-top: 3px; }
/* --- stiri kljucna dejstva --- */
.nav-dejstva { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--o4); }
.nav-dejstvo {
background: var(--bela); border: 1.5px solid var(--crta-t); border-radius: 14px;
padding: var(--o4); display: flex; flex-direction: column; gap: 8px;
}
.nav-dejstvo > * { margin: 0; }
.nav-dejstvo .kartica__ikona {
width: 34px; height: 34px; color: var(--zelena-t);
flex: none; opacity: 1;
}
.nav-dejstvo h3 { font-size: 1.05rem; color: var(--navy); }
.nav-dejstvo p { font-size: .93rem; color: var(--sivilo); line-height: 1.55; }
.nav-dejstvo b {
margin-top: auto; padding-top: var(--o2);
font-family: var(--pis-naslov); font-size: 1.05rem; color: var(--zelena-t);
}
/* --- vkljuceno / dobro je vedeti --- */
.nav-dvojka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o5); }
.nav-blok { background: var(--bela); border: 1.5px solid var(--crta-t); border-radius: 14px; padding: var(--o5); }
.nav-blok > :first-child { margin-top: 0; }
.nav-opozorila { list-style: none; margin: var(--o3) 0 0; padding: 0; display: grid; gap: 12px; }
.nav-opozorila li {
margin: 0; padding-left: 18px; position: relative;
color: var(--sivilo); font-size: .95rem; line-height: 1.55;
}
.nav-opozorila li::before {
content: ""; position: absolute; left: 0; top: .55em;
width: 7px; height: 7px; border-radius: 999px; background: var(--zelena);
}
.nav-opozorila b { color: var(--navy); }
.nav-blok .opomba { margin-top: var(--o3); font-size: .9rem; color: var(--sivilo); }
@media (max-width: 1000px) {
.nav-koraki, .nav-dejstva { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.nav-dvojka { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.nav-koraki, .nav-dejstva { grid-template-columns: 1fr; }
}
/* --- 33. Popravki po naročnikovem pregledu (11. 8. 2026) -------------------
1) Naslovnice strani so brez zelene črtice pred oznako; črtica ostane samo
v glavah sekcij, kjer loči začetke.
2) Koledar pri rezervaciji je bil širok čez cel stolpec in zato previsok.
Omejimo ga na 560 px in dneve rahlo sploščimo. */
.glava-strani .kicker::before,
.glava-foto__telo .kicker::before,
.hero .kicker::before,
.hero__telo .kicker::before { content: none; }
.glava-strani .kicker,
.glava-foto__telo .kicker,
.hero .kicker,
.hero__telo .kicker { padding-left: 0; }
.cal__head, .cal__grid, .cal__legend { max-width: 560px; }
.cal__day { aspect-ratio: 1 / .8; font-size: .86rem; }
.cal__dow { font-size: .68rem; }
/* Zemljevid je na telefonu segal 9 px čez rob, ker vgrajeni okvir ne upošteva
širine starša. Meritev 11. 8. 2026 pri 375 px. */
.zemljevid, .zemljevid-pas .zemljevid { max-width: 100%; }
.zemljevid iframe { max-width: 100%; }
/* --- 35. Telefon (meritve 11. 8. 2026 pri 375 px) --------------------------
1) Pas nad glavo se je na telefonu prelomil v dve vrstici in vzel 67 px
zaslona; tam pokažemo kratko različico urnika.
2) Polja obrazcev so imela 15,2 px; iPhone ob dotiku v polje, manjše od
16 px, sam poveča stran in je nato ne pomanjša nazaj. */
.trak__kratki { display: none; }
@media (max-width: 620px) {
.trak__dolgi { display: none; }
.trak__kratki { display: inline; }
}
@media (max-width: 620px) {
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="date"], select, textarea { font-size: 16px; }
}
/* --- 36. Glava na telefonu (11. 8. 2026) -----------------------------------
Izmerjeno pri 375 px: logotip 137 px, telefon 41 px in gumb Rezervacija
130 px so pojedli vso vrstico, zato se je gumb za meni stisnil na 0 px in
NAVIGACIJE NA TELEFONU SPLOH NI BILO. Gumb zato dobi fiksno mesto, logotip
pa se pomanjša. */
@media (max-width: 939px) {
.zaglavje .ovoj { gap: 10px; }
.zaglavje .meni-gumb { flex: 0 0 46px; }
.zaglavje .logotip { flex: 0 1 auto; }
/* Logotip ima višino zapisano v samem elementu (build.py: logo(visina=74)),
zato je tu potreben !important – drugače pravilo ne pride do izraza. */
.zaglavje .logo__slika, .zaglavje .logotip svg { height: 54px !important; width: auto; }
.zaglavje__desno { gap: 8px; }
}
@media (max-width: 420px) {
.zaglavje .ovoj { gap: 8px; padding-inline: 14px; }
.zaglavje .logo__slika, .zaglavje .logotip svg { height: 44px !important; }
.zaglavje .meni-gumb { flex: 0 0 44px; width: 44px; height: 44px; }
.zaglavje .gumb--majhen { padding: 10px 12px; font-size: .84rem; }
.zaglavje__tel { padding: 9px 10px; }
}
/* --- 37. Telefon: gumbi in pas s piškotki (11. 8. 2026) --------------------
Na 375 px sta gumba v paru široka po 151 px in besedilo se prelomi v dve
vrstici; s prstom je lažje zadeti en gumb čez vso širino. Pas s piškotki je
bil visok 294 px in je prekril polovico prvega pogleda. */
@media (max-width: 520px) {
.gumb-vrsta { flex-direction: column; align-items: stretch; gap: 10px; }
.gumb-vrsta .gumb { width: 100%; justify-content: center; text-align: center; }
.cookie { padding: 16px 16px 14px; }
.cookie h3 { font-size: 1rem; margin-bottom: 6px; }
.cookie p { font-size: .88rem; line-height: 1.45; }
.cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookie__actions .btn { width: 100%; }
.cookie__actions .btn:last-child { grid-column: 1 / -1; }
}
/* Gumb Rezervacija v glavi je bil visok 36 px; za prst je meja 40. */
@media (max-width: 939px) {
.zaglavje .gumb--majhen { min-height: 40px; align-items: center; }
}
/* Na strani Najemi je naslovnica narejena kot glava sekcije (.glava--tesna v
prvem odseku), zato tam črtice ni odstranilo pravilo iz razdelka 33. */
.odsek--prvi .glava .kicker::before { content: none; }
.odsek--prvi .glava .kicker { padding-left: 0; }
/* --- 38. Telefon: junak, pas dejstev in gumbi v glavi (11. 8. 2026) --------
Naročnik: „slike za hero sekcijo se sploh ne vidi", „pas dejstev naj bo
manjši ali naj se vrti od leve proti desni", „gumbi v glavi niso jasni".
1) JUNAK. Na namizju je fotografija ozadje, čez njo pa preliv z leve. Na
telefonu je besedilo široko čez vso ploščo, zato je preliv prekril tudi
fotografijo in ostala je skoraj črna ploskev. Na telefonu zato
fotografija stoji kot slika NAD besedilom, preliva pa ni.
2) PAS DEJSTEV. Štiri postavke v dveh stolpcih so bile visok blok besedila.
Na telefonu se odslej vrtijo vodoravno, ena postavka na pogled, s
pripenjanjem (scroll-snap).
3) GUMBA V GLAVI. Meni in telefon sta bila dva enaka siva kroga. Meni ima
zdaj bel gumb z robom in temnimi črtami, telefon pa poln mornarski krog
z belo ikono, da se na prvi pogled ločita. */
@media (max-width: 700px) {
.hero-djm .hero-lx__plosca {
display: grid; min-height: 0; background: #0b1a12; border-radius: 0;
}
.hero-djm .hero-lx__foto {
position: relative; inset: auto; z-index: 0;
height: 200px; min-height: 0; max-height: none;
border-radius: 0;
}
.hero-djm .hero-lx__foto img { object-position: 50% 55%; }
.hero-djm .hero-lx__plosca::after { display: none; }
.hero-djm .hero-lx__telo { padding-block: 24px 30px; }
.hero-djm .hero-lx__telo h1 { font-size: 1.72rem; line-height: 1.12; }
.hero-djm .hero-lx__telo p { font-size: .98rem; }
}
@media (max-width: 700px) {
.dejstva {
display: flex; flex-wrap: nowrap; border-radius: 18px;
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
gap: 0; padding: 14px 4px; scrollbar-width: none;
}
.dejstva::-webkit-scrollbar { display: none; }
.dejstvo {
flex: 0 0 78%; scroll-snap-align: center;
padding: 2px 16px; border-right: 1px solid rgba(255, 255, 255, .22);
}
.dejstvo:last-child { border-right: 0; }
.dejstvo b { font-size: 1.12rem; }
.dejstvo__opomba { display: block; font-size: .84rem; opacity: .92; }
.dejstva .gumb { flex: 0 0 auto; align-self: center; margin-inline: 12px; }
}
@media (max-width: 939px) {
.zaglavje .meni-gumb {
background: #fff; border: 1.5px solid var(--crta-t, rgba(0,43,95,.22));
box-shadow: 0 2px 6px rgba(0, 43, 95, .10);
}
.zaglavje .meni-gumb::before, .zaglavje .meni-gumb::after {
background: var(--navy, #002b5f); height: 2.5px;
}
.zaglavje__tel {
background: var(--navy, #002b5f); border-radius: 999px;
display: grid; place-content: center; min-width: 42px; min-height: 42px;
}
.zaglavje__tel svg, .zaglavje__tel path { color: #fff; stroke: #fff; fill: none; }
}
/* Filtri na strani Najemi so se na telefonu prelomili v štiri vrstice in
potisnili naprave pod pregib; odslej se vrtijo vodoravno kot pas dejstev. */
@media (max-width: 700px) {
.chips {
display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
padding-bottom: 4px; scrollbar-width: none;
margin-inline: calc(-1 * var(--rob, 20px)); padding-inline: var(--rob, 20px);
}
.chips::-webkit-scrollbar { display: none; }
.chips .chip { flex: 0 0 auto; scroll-snap-align: start; min-height: 40px; }
}
/* Tri številke naprave (moč, posoda, vakuum) so na telefonu stale ena pod
drugo in vzele pol zaslona; dve v vrsti povesta isto na tretjini prostora. */
@media (max-width: 700px) {
.stevilke, .stevilke--3, .stevilke--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stevilke li { padding: 12px 14px; }
.stevilke li b { font-size: 1.25rem; }
.stevilke li span { font-size: .82rem; }
}
/* --- 39. „Preberi več" pri opisu naprave in polna slika v junaku ---------- */
.besedilo.je-zvito { max-height: 260px; overflow: hidden; position: relative;
-webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.15) 92%, transparent);
mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.15) 92%, transparent); }
.gumb.beri-vec { margin-top: var(--o2, 14px); }
@media (max-width: 700px) {
.besedilo.je-zvito { max-height: 220px; }
.gumb.beri-vec { width: 100%; justify-content: center; }
.hero-djm .hero-lx__foto { width: 100vw; margin-inline: calc(50% - 50vw); height: 230px; border-radius: 0; overflow: hidden; }
.hero-djm .hero-lx__foto img { border-radius: 0; }
.hero-djm .hero-lx__plosca { padding-bottom: 0; }
}
/* --- 40. Junak na telefonu: slika, naslov in besedilo kot ena celota ------
Naročnik 12. 8. 2026: fotografija se na dnu zlije v temno ploskev, oznaka in
naslov stojita na prehodu — brez vidnega šiva med sliko in besedilom. */
@media (max-width: 700px) {
.hero-djm .hero-lx__foto { height: 300px; position: relative; }
.hero-djm .hero-lx__foto::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 62%;
background: linear-gradient(to bottom, rgba(11,26,18,0) 0%, rgba(11,26,18,.55) 45%, #0b1a12 100%);
pointer-events: none;
}
.hero-djm .hero-lx__telo { margin-top: -96px; position: relative; z-index: 2; padding-block: 0 30px; }
.hero-djm .hero-lx__telo .znak { margin-bottom: 2px; }
}
/* --- 41. Telefon: glava in mreža naprav (naročnik 12. 8. 2026) ------------ */
@media (max-width: 939px) {
.zaglavje .ovoj { align-items: center; }
.zaglavje__desno { order: 8; margin-left: auto; }
.zaglavje .meni-gumb { order: 9; margin-left: 8px; }
.zaglavje .meni { order: 10; }
}
@media (max-width: 599px) {
#seznam-naprav .card__media { min-height: 0; aspect-ratio: 4 / 3; }
#seznam-naprav .card__body { padding: 12px; gap: 4px; }
#seznam-naprav .card__title { font-size: .98rem; line-height: 1.25; min-height: 2.5em; }
#seznam-naprav .card__model { font-size: .72rem; }
#seznam-naprav .price__main { font-size: 1.05rem; }
#seznam-naprav .price__sub { font-size: .74rem; }
#seznam-naprav .card__gumbi { margin-top: 10px; }
#seznam-naprav .card__vec { font-size: .8rem; }
#seznam-naprav .card--vodilna { grid-column: 1 / -1; }
#seznam-naprav .card--vodilna .card__media { aspect-ratio: 16 / 10; }
#seznam-naprav .paket-karta { grid-column: 1 / -1; }
#seznam-naprav .card .btn {
white-space: normal; line-height: 1.2; padding: 10px 10px; font-size: .82rem;
min-height: 44px; border-radius: 14px;
}
}
/* --- 42. Telefon: drobne oznake malce večje ------------------------------ */
@media (max-width: 700px) {
.kicker { font-size: .8rem; }
.card__znak, .karta__znak, .paket-znak,
.mreza-naprav .card__znak, #seznam-naprav .card__znak { font-size: .78rem; }
.vizitka__o, .dejstvo__oznaka { font-size: .8rem; letter-spacing: .06em; }
.cal__legend { font-size: .82rem; }
}
/* --- 43. Telefon: glava po naročnikovem vzoru in junak z besedilom nad
fotografijo (12. 8. 2026). Gumb Rezervacija je na telefonu samo ikona
košarice s številom naprav; telefonska številka je spet vidna. */
.zaglavje__kosarica .ikona-kosarica { display: none; }
@media (max-width: 939px) {
.zaglavje__kosarica .zaglavje__beseda { display: none; }
.zaglavje__kosarica .ikona-kosarica { display: block; }
.zaglavje__kosarica { width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 999px; position: relative; justify-content: center; }
.zaglavje__kosarica .zaglavje__st { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 999px; background: #002b5f; color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-content: center; border: 2px solid #fff; }
.zaglavje__kosarica .zaglavje__st[hidden] { display: none; }
.zaglavje__tel { background: #fff; border: 1.5px solid rgba(0,43,95,.16); border-radius: 999px; padding: 9px 14px; gap: 8px; display: inline-flex; align-items: center; min-height: 44px; color: #002b5f; font-weight: 800; font-size: .92rem; }
.zaglavje__tel span { display: inline; }
.zaglavje__tel svg, .zaglavje__tel path { color: #002b5f; stroke: currentColor; }
}
@media (max-width: 420px) {
.zaglavje__tel { padding: 8px 10px; font-size: .84rem; gap: 6px; }
.zaglavje__kosarica { width: 44px; height: 44px; min-height: 44px; }
}
@media (max-width: 700px) {
.hero-djm .hero-lx__plosca { display: flex; flex-direction: column; }
.hero-djm .hero-lx__telo { order: 1; margin-top: 0; padding-block: 26px 24px; }
.hero-djm .hero-lx__foto { order: 2; height: 240px; }
.hero-djm .hero-lx__foto::after { display: none; }
.hero-djm .hero-lx__telo .gumb-vrsta { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.hero-djm .hero-lx__telo .gumb-vrsta .gumb { width: auto; flex: 1 1 46%; }
}
/* --- 44. Pas dejstev: gibanje z animacijo (12. 8. 2026) ------------------- */
.dejstva.se-premika { overflow: hidden; display: block; padding-inline: 0; }
.dejstva__trak { display: flex; flex-wrap: nowrap; width: max-content; animation: nc-pas-dejstev 30s linear infinite; }
.dejstva.se-premika .dejstvo { flex: 0 0 auto; width: 78vw; max-width: 320px; }
.dejstva.se-premika:hover .dejstva__trak, .dejstva.se-premika:active .dejstva__trak { animation-play-state: paused; }
@keyframes nc-pas-dejstev { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) {
.dejstva.se-premika { overflow-x: auto; }
.dejstva__trak { animation: none; }
}
/* --- 45. Junak: fotografija v ozadju besedila (12. 8. 2026) --------------- */
@media (max-width: 700px) {
.hero-djm .hero-lx__plosca { display: block; position: relative; min-height: 560px; }
.hero-djm .hero-lx__foto { position: absolute; inset: 0; z-index: 0; height: 100%; width: 100vw; margin-inline: calc(50% - 50vw); }
.hero-djm .hero-lx__foto img { height: 100%; object-position: 60% 60%; }
.hero-djm .hero-lx__plosca::after {
content: ""; display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to bottom, rgba(11,26,18,.94) 0%, rgba(11,26,18,.90) 42%, rgba(11,26,18,.62) 66%, rgba(11,26,18,.28) 100%);
}
.hero-djm .hero-lx__telo { position: relative; z-index: 2; padding-block: 26px 200px; margin-top: 0; }
}
/* --- 46. Junak: besedilo k dnu, naprave vidne zgoraj (12. 8. 2026) --------
Naročnik: „tekst premakni bolj na dno, zgoraj naj se bolj vidijo naprave".
Preliv je obrnjen (zgoraj skoraj prozoren, spodaj temen). Okvir je pokončen
375 × 560, fotografija pa ležeča 3840 × 2143, zato jo cover reže po ŠIRINI —
navpični odmik ne stori nič, izrez zato pomaknemo desno in približamo. */
@media (max-width: 700px) {
.hero-djm .hero-lx__plosca { min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-djm .hero-lx__foto img {
object-position: 76% 50%;
transform: scale(1.28); transform-origin: 74% 82%;
}
.hero-djm .hero-lx__plosca::after {
background: linear-gradient(to bottom,
rgba(11,26,18,.18) 0%, rgba(11,26,18,.30) 26%,
rgba(11,26,18,.72) 48%, rgba(11,26,18,.93) 68%, rgba(11,26,18,.97) 100%);
}
.hero-djm .hero-lx__telo { padding-block: 0 30px; }
}
/* --- 47. Pas dejstev kot vrtiljak in ubrana tipografija na telefonu ------- */
.dejstva.se-premika { display: block; overflow: hidden; padding: 16px 0 12px; border-radius: 18px; }
.dejstva.se-premika .dejstva__trak {
display: flex; flex-wrap: nowrap; width: 100%;
animation: none; transform: translate3d(0,0,0);
transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.dejstva.se-premika .dejstvo { flex: 0 0 100%; width: 100%; max-width: none; padding: 0 22px; border-right: 0; text-align: left; }
.dejstva.se-premika .dejstvo b { font-size: 1.2rem; line-height: 1.2; display: block; margin-top: 2px; }
.dejstva.se-premika .dejstvo__opomba { display: block; margin-top: 4px; opacity: .92; }
.dejstva__pike { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.dejstva__pika { width: 7px; height: 7px; border-radius: 999px; padding: 0; border: 0; background: rgba(255,255,255,.42); cursor: pointer; transition: width .25s ease, background .25s ease; }
.dejstva__pika.je-na { width: 22px; background: #fff; }
@media (max-width: 700px) {
.odsek { padding-block: 40px; }
.odsek--tesen { padding-block: 28px; }
.glava, .glava-strani { gap: 10px; }
.glava h2, .glava-strani h1 { line-height: 1.14; letter-spacing: -.02em; }
.glava h2 { font-size: clamp(1.5rem, 6.2vw, 1.9rem); }
.glava p, .glava-strani p, .besedilo p { font-size: 1rem; line-height: 1.62; }
.besedilo p + p { margin-top: 14px; }
.kartica { padding: 18px; }
.mreza { gap: 14px; }
.hero-djm .hero-lx__telo h1 { font-size: clamp(1.75rem, 7.4vw, 2.15rem); line-height: 1.1; letter-spacing: -.025em; }
.hero-djm .hero-lx__telo p { font-size: .99rem; line-height: 1.6; max-width: 40ch; color: rgba(255,255,255,.93); }
.hero-djm .hero-lx__telo .znak { font-size: .76rem; padding: 7px 14px; }
.hero-djm .hero-lx__telo .gumb-vrsta { gap: 10px; margin-top: 4px; }
.hero-djm .hero-lx__telo .gumb-vrsta .gumb { flex: 1 1 0; min-height: 50px; padding-inline: 10px; }
.hero-djm .hero-lx__plosca, .hero-djm .hero-lx__foto { overflow: hidden; }
}
/* --- 48. Pas dejstev: drsnik namesto vrtiljaka; naprave spet ena na vrstico
(naročnik 12. 8. 2026). Nič se ne premika samo; postavka je široka 86 %, da
se naslednja vidi z robom. Kartica naprave je nizka: slika levo, podatki
desno — dve v vrsti sta bili pretesni. */
.dejstva.je-drsnik {
display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
scrollbar-width: none; padding: 16px 0; border-radius: 18px;
}
.dejstva.je-drsnik::-webkit-scrollbar { display: none; }
.dejstva.je-drsnik .dejstvo { flex: 0 0 86%; scroll-snap-align: center; padding: 0 20px; border-right: 1px solid rgba(255,255,255,.22); }
.dejstva.je-drsnik .dejstvo:last-child { border-right: 0; }
.dejstva.je-drsnik .dejstvo b { display: block; font-size: 1.18rem; line-height: 1.2; margin-top: 2px; }
.dejstva.je-drsnik .dejstvo__opomba { display: block; margin-top: 4px; }
.dejstva__pike { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.dejstva__pika { width: 7px; height: 7px; border-radius: 999px; padding: 0; border: 0; background: rgba(255,255,255,.45); cursor: pointer; transition: width .25s ease, background .25s ease; }
.dejstva__pika.je-na { width: 22px; background: #fff; }
@media (max-width: 599px) {
#seznam-naprav.mreza-naprav { grid-template-columns: 1fr; gap: 12px; }
#seznam-naprav .card:not(.card--vodilna) { display: grid; grid-template-columns: 132px 1fr; align-items: stretch; }
#seznam-naprav .card:not(.card--vodilna) .card__media { aspect-ratio: auto; height: 100%; min-height: 150px; border-radius: 12px 0 0 12px; background: #fff; padding: 8px; }
#seznam-naprav .card:not(.card--vodilna) .card__media img { object-fit: contain; width: 100%; height: 100%; }
#seznam-naprav .card:not(.card--vodilna) .card__body { padding: 14px 16px; }
#seznam-naprav .card__title { font-size: 1.06rem; line-height: 1.25; min-height: 0; }
#seznam-naprav .card__model { font-size: .8rem; }
#seznam-naprav .price__main { font-size: 1.1rem; }
#seznam-naprav .card:not(.card--vodilna) .price__sub { font-size: .78rem; line-height: 1.35; }
#seznam-naprav .card:not(.card--vodilna) .card__gumbi { margin-top: 10px; }
#seznam-naprav .card:not(.card--vodilna) .btn { width: 100%; white-space: normal; line-height: 1.2; font-size: .85rem; padding: 11px 8px; min-height: 44px; }
#seznam-naprav .card__vec { font-size: .84rem; }
}
/* --- 49. Trije popravki po naročnikovem pregledu (12. 8. 2026) ------------
Okvir primera izračuna je prava kartica; pas dejstev je mirna razpredelnica,
kjer se vse štiri postavke vidijo hkrati, ločene s črto. */
.popust-primer {
position: relative;
margin: var(--o4) 0 0; padding: 16px 18px 16px 20px;
background: #fff; border: 1px solid var(--crta-t, rgba(0,43,95,.14));
border-left: 4px solid var(--zelena, #629e26);
border-radius: 14px; box-shadow: 0 10px 24px -20px rgba(0,43,95,.5);
color: var(--crnilo); font-size: .97rem; line-height: 1.62;
}
.popust-primer strong:first-child { color: var(--zelena-t, #4c7a1e); }
@media (max-width: 700px) {
.dejstva, .dejstva.je-drsnik, .dejstva.se-premika {
display: grid; grid-template-columns: 1fr; gap: 0;
overflow: visible; padding: 6px 20px; border-radius: 18px;
}
.dejstva .dejstvo, .dejstva.je-drsnik .dejstvo {
flex: none; width: auto; max-width: none; padding: 14px 0;
border-right: 0; border-bottom: 1px solid rgba(255,255,255,.26);
}
.dejstva .dejstvo:last-child, .dejstva.je-drsnik .dejstvo:last-child { border-bottom: 0; }
.dejstva .dejstvo b { display: block; font-size: 1.12rem; line-height: 1.25; margin-top: 2px; }
.dejstva .dejstvo__opomba { display: block; margin-top: 3px; }
.dejstva__pike { display: none; }
}