/* ============================================================================ CGP — CELOSTNA GRAFIČNA PODOBA multimedija.net ============================================================================ Edino mesto, kjer se nastavljajo barve, pisave, velikosti, razmiki, zaobljenost, sence in ritem pasov. Vse ostale datoteke (sistem.css, glava-noga.css) samo berejo te vrednosti prek var(--ime). Spremeni vrednost tukaj in se spremeni povsod na strani. KAKO JE DATOTEKA SESTAVLJENA ---------------------------- A · SISTEM — temelj prenove; samo te vrednosti se uporabljajo pri novih straneh (storitve, rešitve). A1 paleta sedem barv znamke A2 vloge barv kaj je naslov, kaj besedilo, kaj ozadje pasu A3 pisave A4 lestvica velikosti besedila A5 lestvica razmikov in ritem pasov A6 zaobljenost, sence, obrobe A7 gibanje (trajanja in krivulje) A8 širine vsebine A9 gradniki (gumbi, značke, ikone, kartice, seznami) B · DEDIŠČINA — tokeni domače strani in prvih pasov, ki so nastali pred sistemom. Ostajajo, ker jih obstoječe strani še berejo; novih pravil nanje ne pišemo. PRAVILO ------- Nova pravila v sistem.css nikoli ne vsebujejo literalne barve, velikosti ali razmika — vedno var(--ime) iz dela A. Če token še ne obstaja, ga najprej dodaj sem z razlago, šele nato uporabi. Milan lahko vsako vrednost povozi brez dotikanja datotek: Avada → Theme Options → Custom CSS naloži se za tem, npr. :root { --f-h1: 80px; --barva-znamka: #0090C8; } IZPELJANI TOKENI ---------------- --a: calc(var(--b) * .8) se izračuna tam, kjer je zapisan — v :root. Če --b pozneje povoziš globlje v drevesu, se --a ne preračuna. Osnovne tokene zato vedno povozi v :root znotraj @media, tudi v tej datoteki. Datum: 22. 9. 2026 (prej 21. 9. 2026) Kaj je prišlo 22. 9. 2026 zvečer — oblikovni sloj REŠITVE --------------------------------------------------------- Strani rešitev so doslej izgledale enako kot storitvene. Ker odgovarjajo na drugo vprašanje (kateri poslovni problem izgine, ne kaj delamo), so dobile svoj razdelek tokenov A10 (--res-…) in svoj razdelek pravil 21 v sistem.css. Nobena vrednost iz dela A ali B ni bila spremenjena, zato obstoječe strani ostajajo nedotaknjene. Kaj rešitve loči od storitev: - nadnaslov v naslovnem pasu je rumen (--res-nad-barva), ne cian; - naslovni pas nima fotografije in ne kartice z dejstvi, ampak preliv (--res-hero-ozadje) in primerjavo »danes : z rešitvijo«; - pas z izidi na modrem prelivu (--res-izid-…), ki ga storitve nikjer ne uporabljajo; - koraki so oštevilčeni kvadrati na vodoravni črti (--res-tok-…), ne krogi z ikonami; - zmožnosti so dvostolpčni seznam (--res-lastnost-…), ne mreža kartic; - na telefonu ima naslovni pas manj zraka nad naslovom (--res-hero-vrh-telefon), ker 176 px pusti skoraj prazen zaslon. Kaj je prišlo 22. 9. 2026 ------------------------- - Nov pas »Naš proces« (--proc-…): fotografija od roba zaslona, svetla plošča #F5FAFE desno, štirje koraki na črti. - Pas SEO in GEO: rokopis je absolutno postavljen (--geo-pripis-…), seznam se umakne levo (--geo-seznam-umik), blok podnaslova je ožji (--geo-opis-sirina). - »Kaj vse dobite« v postavitvi 2 × 3 (--dob-stolpci) z večjimi, bolj zračnimi karticami. - Pogosta vprašanja v dveh stolpcih (--faqk-stolpci). - Reference (»Naše delo«): glava z naslovom levo in uvodom desno, pod njo vrsta kartic čez vso širino, ista kot »Sveži projekti« na domači strani (--sv-tek-kartic, --sv-zastor). ============================================================================ */ :root { /* ═══════════════════════════════════════════════════════════════════ A1 · PALETA — sedem barv, iz katerih izhaja vse ostalo. ═══════════════════════════════════════════════════════════════════ */ --paleta-modra: #00A2DD; /* glavna modra: povezave, ikone, poudarki */ --paleta-cyan: #00D1F7; /* svetel poudarek na temnem (H1) */ --paleta-rumena: #FBC040; /* gumbi in znak v logotipu */ --paleta-navy: #0D395C; /* naslovi in besedilo na svetlem */ --paleta-temna: #04304A; /* temni pasovi */ --paleta-mehka: #F3F8FC; /* mehko ozadje pasov */ --paleta-bela: #FFFFFF; --paleta-tezava: #E5384F; /* znak težave: križec, obroba, seštevek */ --paleta-zelena: #1FA971; /* značke modulov (samo za barvne oznake) */ --paleta-vijola: #6B5BD2; /* značke modulov (samo za barvne oznake) */ /* Lestvica nevtralnih odtenkov — izpeljana iz navyja, da sivine niso mrtve, ampak imajo isti hladni podton kot znamka. */ --nev-100: #F7FAFD; --nev-200: #EDF3F9; --nev-300: #DCE7EF; --nev-400: #C2D5E3; --nev-500: #93B0C4; --nev-600: #5F7F97; --nev-700: #3A5F7E; --nev-800: #1B4368; --nev-900: #0B2B45; /* ═══════════════════════════════════════════════════════════════════ A2 · VLOGE BARV — v pravilih uporabljaj te, ne palete. ═══════════════════════════════════════════════════════════════════ */ --barva-znamka: var(--paleta-modra); --barva-znamka-temna: #1478B0; /* nadnaslovi, povezave na svetlem */ --barva-znamka-svetla: var(--paleta-cyan); --barva-poudarek: var(--paleta-rumena); /* gumb, poziv k dejanju */ --barva-poudarek-tanka: rgba(251, 192, 64, .22); /* rumena podlaga za žetone */ --barva-poudarek-hover:#EDAF2C; /* Besedilo */ --barva-naslov: var(--paleta-navy); --barva-telo: var(--nev-700); --barva-tiho: var(--nev-600); /* drobne oznake, datumi */ --barva-na-temnem: var(--paleta-bela); --barva-na-temnem-telo: #AFC9DC; --barva-na-temnem-tiho: #7FC4EC; /* Dve svetlejši stopnji besedila na temnih pasovih: postavke seznamov in uvodni odstavki. Prej sta bili zapisani kot literala v glava-noga.css (#DCEAF4 in #BDD3E2). */ --barva-na-temnem-postavka: #DCEAF4; --barva-na-temnem-uvod: #BDD3E2; /* Ozadja pasov — štiri stopnje, od najsvetlejše do temne. */ --pas-bela: var(--paleta-bela); --pas-mehka: var(--paleta-mehka); --pas-mehka-2: linear-gradient(180deg, var(--nev-100) 0%, var(--nev-200) 100%); --pas-temna: radial-gradient(120% 140% at 6% 0%, #0B4F74 0%, #04304A 58%, #022234 100%); --pas-znamka: linear-gradient(135deg, #0B5F8B 0%, #0A7FB4 55%, #00A2DD 100%); /* Ozadje strani z obrazcem: mehak sij znamke v temnem pasu. */ --pas-projekt: radial-gradient(70% 55% at 88% 2%, rgba(0, 162, 221, .38) 0%, rgba(0, 162, 221, 0) 62%), radial-gradient(60% 50% at 6% 100%, rgba(11, 95, 139, .45) 0%, rgba(11, 95, 139, 0) 60%), linear-gradient(158deg, #0B4F74 0%, #07314C 46%, #04202F 100%); /* Črte in obrobe */ --barva-crta: var(--nev-300); --barva-crta-mehka: #E4EDF4; --barva-crta-temna: rgba(255, 255, 255, .14); /* ═══════════════════════════════════════════════════════════════════ A3 · PISAVE — tri, nobene več. ═══════════════════════════════════════════════════════════════════ */ --pisava: "Inter", "Segoe UI", Roboto, -apple-system, Arial, sans-serif; /* Naslovi so v isti pisavi kot besedilo (Milan, 25. 9. 2026). */ --pisava-naslov: var(--pisava); --pisava-koda: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* imena piškotkov, koda */ --pisava-rokopis: "Caveat", "Segoe Script", "Bradley Hand", cursive; /* ═══════════════════════════════════════════════════════════════════ A4 · VELIKOSTI BESEDILA Izhodišče je H1 = 90 px pri oknu 1500 px; vse ostalo je iz njega izpeljano z razmerjem, ki smo ga uporabljali doslej. ═══════════════════════════════════════════════════════════════════ */ --f-h1: min(90px, calc(6.912vw - 13.72px)); /* naslov heroja */ --f-h1-s: clamp(34px, 3.87vw, 56px); /* naslov heroja na podstraneh */ --f-h2: clamp(36px, 3.55vw, 55px); /* naslov pasu (−10 %, 25. 9. 2026) */ --f-h3: 22px; /* naslov kartice (Milan, 25. 9. 2026) */ --f-h4: 20px; /* naslov v kartici, vprašanje */ --f-h5: 17px; /* drobni naslov, korak */ --f-uvod: 19px; /* uvodni odstavek pod naslovom */ --f-telo: 16.5px; --f-mala: 14.5px; /* opisi v karticah */ --f-drobna: 13px; /* značke, oznake, drobni tisk */ --f-nad: 13px; /* nadnaslov nad H2 */ --teza-naslov: 800; --teza-h1: 700; --teza-telo: 500; --teza-krepko: 700; --razmik-h1: -.015em; --razmik-h2: -.03em; --razmik-h3: -.01em; --razmik-nad: .18em; --vrstica-h1: 1; --vrstica-h2: 1.08; --vrstica-h3: 1.18; --vrstica-telo: 1.62; --vrstica-mala: 1.55; /* ═══════════════════════════════════════════════════════════════════ A5 · RAZMIKI IN RITEM PASOV Ena lestvica za vse: razmik med gradniki je vedno ena od teh vrednosti, nikoli poljubna številka. Tako strani dihajo enako. ═══════════════════════════════════════════════════════════════════ */ --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 20px; --r-6: 24px; --r-7: 32px; --r-8: 40px; --r-9: 56px; --r-10: 72px; --r-11: 96px; --r-12: 128px; /* Zrak nad in pod pasom — tri stopnje. Privzeta je srednja; ozko se uporabi, kadar dva pasova vsebinsko spadata skupaj, široko pa pri samostojnih poglavjih strani. */ --pas-ozko: clamp(48px, 4.6vw, 64px); --pas-zrak: clamp(72px, 6.6vw, 96px); --pas-siroko: clamp(96px, 8.6vw, 124px); /* Domača stran: zrak med sklopi aplikacije → »Kako delamo« → spletne strani in trgovine (Milan, 29. 9. 2026: jasen prehod in bel prostor). */ --domov-prehod: var(--pas-siroko); /* Znotraj pasu */ --do-naslova: var(--r-4); /* nadnaslov → H2 */ --do-uvoda: var(--r-5); /* H2 → uvodni odstavek */ --do-vsebine: clamp(40px, 3.4vw, 56px); /* glava pasu → vsebina */ --do-noge: clamp(32px, 2.8vw, 44px); /* vsebina → gumb pod njo */ /* ═══════════════════════════════════════════════════════════════════ A6 · ZAOBLJENOST, SENCE, OBROBE ═══════════════════════════════════════════════════════════════════ */ --rad-s: 10px; --rad-m: 14px; --rad-l: 18px; --rad-xl: 24px; --rad-krog: 999px; /* Sence so ozke in enakomerne po obodu — tako je bilo dogovorjeno pri vrtiljaku in velja za vse kartice. */ --senca-1: inset 0 0 0 1px rgba(16, 38, 58, .10), 0 0 8px rgba(13, 57, 92, .24); --senca-2: inset 0 0 0 1px rgba(16, 38, 58, .16), 0 0 13px rgba(13, 57, 92, .45); --senca-mehka: 0 18px 44px rgba(13, 57, 92, .12); --senca-prostor: 18px; /* koliko prostora potrebuje senca v drsniku */ --obroba: 1px solid var(--barva-crta); --obroba-mehka: 1px solid var(--barva-crta-mehka); --obroba-temna: 1px solid var(--barva-crta-temna); /* ═══════════════════════════════════════════════════════════════════ A7 · GIBANJE ═══════════════════════════════════════════════════════════════════ */ --cas: .3s; --cas-dolg: .5s; --krivulja: cubic-bezier(.22, .61, .24, 1); /* ═══════════════════════════════════════════════════════════════════ A8 · ŠIRINE VSEBINE ═══════════════════════════════════════════════════════════════════ */ --vsebina-ozka: 1180px; /* pasovi z eno kolono vsebine */ --vsebina-besedilo: 68ch; /* največja širina tekočega besedila */ --vsebina-rob: 24px; /* zrak do roba zaslona na telefonu in tablici — isti za glavo, vsebino in nogo */ --dotik: 44px; /* najmanjši cilj za prst (Apple HIG; WCAG 2.5.5) */ --dotik-razsiritev: 12px; /* nevidna razširitev majhnih povezav navzgor in navzdol */ --oznaka-min: 12px; /* najmanjša drobna oznaka (velike črke) na telefonu */ --tabela-senca: rgba(13, 57, 92, .16); /* senca ob robu tabele, ki se pomika vodoravno */ /* Naslovni pas sega pod glavo, ki leži čezenj; toliko zraka potrebuje vsebina, da ne pride pod logotip in meni. */ --hero-vrh: 176px; --hero-dno: clamp(64px, 5.6vw, 88px); --hero-zastor: linear-gradient(90deg, rgba(5,32,52,.95) 0%, rgba(5,32,52,.86) 42%, rgba(5,32,52,.64) 100%); /* Zastor čez fotografijo v naslovnem pasu domače strani. Desni rob je skoraj prosojen, da se naprave in listje vidijo. Isti zastor ima od 24. 9. 2026 tudi naslovni pas storitev (--hs-zastor). */ --hero-foto-zastor: linear-gradient(100deg, rgba(0, 41, 64, .92) 0%, rgba(0, 44, 68, .84) 30%, rgba(2, 64, 95, .48) 58%, rgba(8, 88, 122, .18) 100%); --hero-foto-zastor-mob: rgba(0, 41, 64, .88); /* ═══════════════════════════════════════════════════════════════════ A9 · GRADNIKI ═══════════════════════════════════════════════════════════════════ */ /* --- Gumbi --------------------------------------------------------- */ --gumb-velikost: 14px; --gumb-odmik: 15px 28px; --gumb-teza: 700; --gumb-radij: var(--rad-krog); /* Nadnaslov (--nad-*): žetoni so spodaj v razdelku NADNASLOV (27. 9. 2026 odstranjen podvojeni, neveljavni zapis). */ /* --- Kartica ------------------------------------------------------- */ --kartica-ozadje: var(--paleta-bela); --kartica-radij: var(--rad-m); --kartica-odmik: clamp(22px, 2vw, 30px); --kartica-razmik: var(--r-6); /* razmik v mreži kartic */ /* --- Ikone --------------------------------------------------------- */ --ikona-s: 22px; --ikona-m: 30px; --ikona-l: 44px; --ikona-krog: 62px; /* krog pod ikono */ --ikona-krog-karta: 76px; /* večji krog in ikona v karticah pasov (Milan, 27. 9. 2026) */ --ikona-krog-ozadje: #E9F3FB; --ikona-barva: var(--barva-znamka); /* --- Značka (drobna oznaka) ---------------------------------------- */ --znacka-velikost: var(--f-drobna); --znacka-odmik: 6px 12px; --znacka-ozadje: var(--nev-200); --znacka-barva: var(--barva-znamka-temna); --znacka-radij: var(--rad-krog); /* --- Seznam s kljukicami ------------------------------------------- */ --kljuk-velikost: 20px; --kljuk-barva: var(--barva-znamka); --kljuk-razmik: var(--r-3); /* Pike drsnika (--pika-*): žetoni so spodaj pri »Strani vrtiljaka« (podvojeni zapis odstranjen 27. 9. 2026). */ /* ═══════════════════════════════════════════════════════════════════ A10 · REŠITVE — lasten oblikovni sloj znotraj iste CGP Storitve povedo, kaj delamo; rešitve povedo, kateri poslovni problem rešimo. Zato imajo strani rešitev drugačen ritem, čeprav uporabljajo isto paleto, iste pisave in isto lestvico razmikov. Štiri stvari jih ločijo od storitvenih strani: 1. nadnaslov je rumen, ne cian — vidno že v prvi vrstici; 2. naslovni pas nima fotografije in nima kartice z dejstvi, ampak primerjavo »danes : z rešitvijo«; 3. pas z izidi na modrem prelivu (--pas-znamka), ki ga storitve nikjer ne uporabljajo; 4. koraki so oštevilčeni kvadrati na vodoravnem toku, ne krogi. ═══════════════════════════════════════════════════════════════════ */ /* Nadnaslov rešitve — rumen, ker je to barva, ki je storitvene strani v nadnaslovih ne uporabljajo. */ --res-nad-barva: var(--paleta-rumena); /* Naslovni pas rešitve */ --res-hero-ozadje: radial-gradient(90% 120% at 82% 8%, #0B5F8B 0%, #06395A 46%, #04273D 100%); --res-hero-h1: clamp(36px, 4.25vw, 62px); --res-hero-stolpca: minmax(0, 1.15fr) minmax(0, .85fr); --res-hero-vrzel: var(--r-10); /* Na telefonu glava na straneh rešitev ne leži čez pas, ampak nad njim; zrak nad drobtinicami je zato samo ta odmik (prej 112 px praznine, Milan 29. 9. 2026). */ --res-hero-vrh-telefon: var(--r-6); /* Primerjava »danes : z rešitvijo« v naslovnem pasu */ --res-prehod-odmik: var(--r-6) var(--r-7); --res-prehod-radij: var(--rad-l); --res-prehod-slabo: rgba(255, 255, 255, .05); --res-prehod-dobro: rgba(0, 162, 221, .16); --res-prehod-znak: 22px; --res-prehod-slabo-barva: #93B0C4; --res-prehod-dobro-barva: var(--paleta-bela); /* Pas z izidi — velike številke na modrem prelivu */ --res-izid-stevilka: clamp(40px, 3.8vw, 58px); --res-izid-teza: var(--teza-naslov); --res-izid-opis: var(--f-telo); --res-izid-vrzel: var(--r-9); --res-izid-crta: rgba(255, 255, 255, .22); /* Kartice poslovnega učinka na modrem pasu */ --izk-vrzel: clamp(14px, 1.3vw, 22px); --izk-odmik: clamp(22px, 2vw, 30px); --izk-radij: var(--r-5); --izk-obroba: rgba(255, 255, 255, .22); --izk-ozadje: rgba(255, 255, 255, .08); /* Vodoravni tok »kako deluje« — oštevilčeni kvadrati */ --res-tok-kvadrat: 46px; --res-tok-kvadrat-radij: var(--rad-s); --res-tok-stevilka: 17px; --res-tok-crta: var(--barva-crta); --res-tok-vrzel: var(--r-8); /* Seznam zmožnosti — dva stolpca, drobne ikone, brez kartic */ --res-lastnost-ikona: 26px; --res-lastnost-vrzel: var(--r-6) var(--r-10); --res-lastnost-crta: var(--obroba-mehka); /* Primer uporabe — en velik blok namesto mreže kartic */ --res-primer-odmik: clamp(32px, 3.4vw, 52px); --res-primer-radij: var(--rad-xl); /* Glava strani rešitve — namesto naslovnega pasu. Rešitev je program, ne storitev, zato se stran ne začne s fotografijo, ampak s tem, kar je v aplikaciji nad vsebino: pot, oznaka, naslov in zagon. Pikčasta mreža in sij zgoraj desno sta edini okras (Milan, 24. 9. 2026). */ --resg-ozadje: radial-gradient(74% 130% at 88% -10%, #0C6B9C 0%, #06395A 44%, #041E30 100%); --resg-mreza: rgba(255, 255, 255, .08); --resg-mreza-korak: 34px; --resg-mreza-pika: 1.5px; --resg-vrh: clamp(118px, 10.5vw, 172px); --resg-dno: clamp(60px, 5.6vw, 92px); --resg-h1: clamp(32px, 3.35vw, 52px); --resg-sirina: min(100%, 64ch); --resg-uvod-sirina: min(100%, 52ch); --resg-znacka-ozadje: rgba(255, 255, 255, .07); --resg-znacka-obroba: rgba(255, 255, 255, .17); --resg-pika: 7px; --resg-zeton-ozadje: rgba(255, 255, 255, .05); --resg-zeton-obroba: rgba(255, 255, 255, .14); --resg-zeton-barva: var(--barva-na-temnem-telo); /* Kadar je v glavi še del nadzorne plošče programa, je besedilo v levem stolpcu in slika v desnem; brez slike ostane besedilo samo. */ --resg-stolpca: minmax(0, 1fr) minmax(0, 1.05fr); --resg-vrzel: clamp(40px, 4.2vw, 72px); --resg-slika-radij: var(--rad-l); --resg-crta: linear-gradient(90deg, rgba(0, 162, 221, 0) 0%, rgba(0, 162, 221, .55) 28%, rgba(240, 185, 61, .5) 62%, rgba(240, 185, 61, 0) 100%); /* Navadna glava strani kot na blogu (.mms-glavastr, O nas): pot, H1 in uvod z merami glave bloga, pod njimi gumba in značke dosežkov. Fotografija v ozadju je visoka 571 px; glava naj ostane nižja, sicer jo brskalnik poveča in zamegli (Milan, 29. 9. 2026). */ --gstr-vrh: clamp(40px, 5vw, 76px); --gstr-dno: clamp(36px, 3.6vw, 56px); --gstr-do-naslova: clamp(16px, 2vw, 26px); --gstr-do-uvoda: clamp(14px, 1.5vw, 20px); --gstr-uvod-sirina: 62ch; --gstr-do-gumbov: clamp(24px, 2.4vw, 34px); --gstr-rokopis: 43.2px; /* 36 px + 20 % (Milan, 29. 9. 2026) */ --gstr-rokopis-vrh: calc(clamp(20px, 3vw, 48px) + 20px); /* od vrha besedila glave; +20 px (Milan) */ /* Značke dosežkov: oblika vrstice dokazov (--hs-dokaz, --hs-dokaz-ikona) v majhnem okvirju. */ --gstr-do-znack: var(--hs-dokaz-vrh); --gstr-znacke-vrzel: 10px; --gstr-znacka-odmik: 9px 16px; --gstr-znacka-ozadje: rgba(255, 255, 255, .06); --gstr-znacka-obroba: rgba(255, 255, 255, .16); --gstr-znacka-radij: var(--rad-krog); /* Posnetki zaslonov aplikacije — slika na eni strani, opis na drugi. Slike so manjše od makete čez celo širino: dovolj velike, da se vidi, kaj program zna, dovolj majhne, da ob njih stoji razlaga. */ --prikaz-vrzel: clamp(40px, 4.4vw, 72px); --prikaz-vrzel-vrst: clamp(56px, 6vw, 104px); --prikaz-stolpca: minmax(0, 1.5fr) minmax(0, 1fr); /* slika 60 %, besedilo 40 % */ --prikaz-stolpca-o: minmax(0, 1fr) minmax(0, 1.5fr); /* obrnjeno: slika desno */ --prikaz-radij: var(--rad-l); --prikaz-obroba: rgba(16, 38, 58, .12); --prikaz-senca: 0 26px 60px rgba(9, 39, 64, .18); --prikaz-telefon: min(100%, 300px); --prikaz-pika: 22px; /* znak pred postavko */ --prikaz-pika-barva: var(--barva-znamka-svetla); /* #00D1F7 */ --prikaz-st-barva: var(--barva-znamka-temna); --prikaz-st-ozadje: rgba(0, 162, 221, .12); --prikaz-h3: clamp(21px, 1.55vw, 27px); --prikaz-pas-zrak: clamp(44px, 4.6vw, 82px); /* zrak v izmenjujočih vrsticah */ --razlog-vrzel: clamp(24px, 2.6vw, 46px); --razlog-ikona: 46px; --razlog-naslov: clamp(19px, 1.35vw, 22px); /* Mreža težav (»Kje se izgublja čas«) */ --tez-vrzel: clamp(14px, 1.3vw, 20px); --tez-radij: var(--r-4); --tez-odmik: clamp(20px, 1.8vw, 26px); --tez-obroba: #F7D7DC; --tez-ikona: 54px; --tez-ikona-ozadje: #FDEDEF; --tez-znak: 20px; --tez-znak-barva: var(--paleta-tezava); --tez-naslov: clamp(16px, 1.15vw, 18px); --tez-vsota-ozadje: #FDEDEF; /* Prej / zdaj (domača stran: tri rešitve s posnetkom in trak obljub) */ --pz-vrzel: var(--r-6); --pz-radij: var(--rad-m); --pz-odmik: clamp(22px, 2vw, 30px); --pz-prej-barva: var(--paleta-tezava); --pz-zdaj-barva: var(--barva-znamka); --pz-obljuba-crta: 3px solid var(--barva-znamka); /* Značke modulov pod »Na kratko« (strani aplikacij, 26. 9. 2026) */ --modul-odmik: 8px 16px; --modul-pisava: 15px; --modul-1: var(--paleta-modra); --modul-1-b: #fff; --modul-2: var(--paleta-zelena); --modul-2-b: #fff; --modul-3: var(--paleta-rumena); --modul-3-b: var(--nev-900); --modul-4: var(--paleta-navy); --modul-4-b: #fff; --modul-5: var(--paleta-vijola); --modul-5-b: #fff; --modul-6: var(--paleta-cyan); --modul-6-b: var(--nev-900); /* Prej (preglednica) / potem (program) — stran aplikacij, 26. 9. 2026 */ --pp-radij: var(--rad-m); --pp-xl-glava: #217346; /* zelena vrstica preglednice, kot v Excelu */ --pp-xl-napaka: #FDE9E7; --pp-xl-opozorilo: #FFF8D6; /* Primeri iz prakse — kartice (predlog apl-4, 26. 9. 2026) */ --pripk-vrzel: var(--r-6); /* med karticami */ --pripk-odmik: clamp(28px, 2.8vw, 40px); /* rob kartice */ --pripk-stolpca: minmax(0, 1.05fr) minmax(0, .95fr); --pripk-med: clamp(28px, 3vw, 48px); /* med odrom in besedilom */ --pripk-radij: 22px; --pripk-lap-radij: 14px; --pripk-lap-senca: 0 30px 70px rgba(3, 15, 26, .30); --pripk-tel: 26%; /* telefon: delež širine odra */ --pripk-tel-radij: 22px; --pripk-zn-ozadje: #EEF2F6; /* nevtralna značka */ --pripk-zn-pisava: 12.5px; --pripk-st-velikost: 28px; /* številka podatka */ /* Posnetki zaslonov (zaslon-*.webp) imajo vdelan prozoren rob s senco: zgoraj 44, spodaj 76, levo in desno 60 px. Da posnetek sega do roba okvirja, ga okvir odreže — mere so v odstotkih širine vidnega dela. */ --zaslon-lap-sirina: 105.66%; /* 2240 / 2120 */ --zaslon-lap-levo: -2.83%; /* 60 / 2120 */ --zaslon-lap-vrh: -2.08%; /* 44 / 2120 */ --zaslon-lap-dno: -3.58%; /* 76 / 2120 */ --zaslon-tel-sirina: 114.29%; /* 960 / 840 */ --zaslon-tel-levo: -7.14%; /* 60 / 840 */ --zaslon-tel-vrh: -5.24%; /* 44 / 840 */ --zaslon-tel-dno: -9.05%; /* 76 / 840 */ /* Prikaz funkcij v treh stolpcih z ločnicami (slog »crte«) */ --funk-odmik: clamp(28px, 2.6vw, 44px); --funk-crta: 1px solid var(--barva-crta-mehka); /* Primeri iz prakse (stran aplikacij): izmenične vrstice posnetek + zgodba */ --prip-vrzel: clamp(36px, 4vw, 64px); /* med posnetkom in besedilom */ --prip-odmik: var(--r-6); /* med vrsticami (posnetek ima svoj zrak v sliki) */ --prip-st-barva: var(--barva-znamka); /* Uvod v zaslone: slika levo, moduli desno */ --mod-vrzel: clamp(12px, 1.1vw, 18px); --mod-ikona: 34px; /* Trije slogi prikaza zaslonov: velik, par, kompakt */ --pv-glava: 62ch; /* širina besedila nad velikim posnetkom */ --pv-do-slike: var(--r-8); --pp-vrzel: clamp(16px, 1.6vw, 26px); --pk-vrzel: clamp(16px, 1.6vw, 24px); --pk-slika: 172px; /* širina malega posnetka */ --prikaz-napis: var(--f-drobna); /* Naprave v naslovnem pasu rešitve in odsev pod njima */ --resg-telefon: 168px; /* širina telefona ob nadzorni plošči */ --resg-naprave-prek: -54px; /* koliko telefon sega prek plošče */ --odsev-vis: 78px; --odsev-moc: .32; /* Posnetki imajo pod seboj vrisano senco; brez tega odmika bi se odsev začel s to prazno sapo in bi bil videti prenizko. */ --odsev-odmik: 34px; /* Poziv k dejanju ob fotografiji */ --ctas-sirina: clamp(420px, 52%, 700px); /* stolpec z besedilom */ --ctas-zeton: var(--f-drobna); /* Zavihki nad prikazi zaslonov */ --zav-vrzel: 10px; --zav-odmik: 15px 22px; --zav-napis: 17px; --zav-radij: var(--r-3); --zav-ikona: 19px; --zav-cip: 33px; /* svetel kvadrat pod ikono */ --zav-do-plosce: clamp(28px, 3vw, 48px); /* Navpični zavihki (Milan, 26. 9. 2026): kartice levo, opis in zaslon desno */ --zavn-stolpec: minmax(220px, 270px); /* levi stolpec z značkami */ --zavn-vrzel: clamp(28px, 3.2vw, 56px); --zavn-med: 10px; /* med karticami */ --zavn-min-tel: 140px; /* do 900 px: najožji stolpec mreže značk */ --zavn-odmik: 16px 20px; --zavn-radij: var(--r-3); --zavn-preko: 20px; /* koliko sme vsebina desno segati pod dno kartic */ --zavk-gumbi: minmax(140px, 180px); /* Kako izgleda: kratki gumbi (28. 9. 2026) */ --zavk-vrzel: clamp(40px, 3.6vw, 64px); /* zrak med gumbi, besedilom in zaslonom */ --mreza-odmik: clamp(18px, 1.7vw, 26px); /* celica v mreži zmožnosti */ --pregled-vodilna: clamp(19px, 1.5vw, 26px); /* uvodni odstavek pregleda */ --pregled-vrzel: clamp(26px, 2.6vw, 44px); --pregled-glava: minmax(260px, 1.2fr); /* stolpec z naslovom */ --pregled-stolpci: 4; /* koliko postavk je v vrsti */ /* --- ISKANJE (seznam zadetkov kot pri Googlu, 27. 9. 2026) ------------ */ --isk-sirina: 720px; /* stolpec zadetkov */ --isk-razmik: 30px; /* med zadetki */ --isk-ikona: 30px; /* krog z ikono vrste */ --isk-ikona-znak: 16px; --isk-naslov: 21px; /* naslov zadetka */ --isk-naslov-barva: var(--barva-znamka-temna); --isk-listanje: 40px; /* gumb številke strani */ /* --- ZLOŽENKA PRIMEROV (domača stran, po vzoru spletnik.si, 27. 9. 2026) -- */ --zs-razmik: clamp(32px, 4vw, 64px); /* posnetek ↔ seznam */ --zs-razmerje: 16 / 10; /* okvir posnetka; posnetek je poravnan na vrh */ --zs-radij: var(--rad-xl); --zs-okvir: 10px; /* bel rob okoli posnetka */ --zs-senca: 0 30px 60px rgba(13, 57, 92, .14); --zs-crta: var(--barva-crta-mehka); --zs-st: var(--f-mala); /* številka točke 01–06 */ --zs-st-sirina: 34px; --zs-naslov: var(--f-h4); --zs-odmik: 20px; /* nad in pod naslovom točke */ --zs-znak: 36px; /* krog s puščico */ --zs-cas: .45s; /* --- SVEŽI PROJEKTI V TEKU (domača stran, 27. 9. 2026) ------------------ */ --sv-tek-kartic: 3.5; /* toliko kartic je vidnih čez vso širino */ --sv-tek-na-kartico:7; /* sekund za pot ene kartice (hitrost teka) */ --vrt-pusc: 48px; /* puščici pod vrtiljaki referenc */ --vrt-pusc-znak: 16px; --kratko-st: clamp(44px, 4vw, 62px); /* številka nad postavko */ --kratko-st-barva: #CBE6F5; --kratko-naslov: clamp(16px, 1.2vw, 19px); --kaz-ikona: 30px; /* ═══════════════════════════════════════════════════════════════════ A11 · PREDSTAVITEV REFERENCE En projekt na enem pasu: dva posnetka strani eden ob drugem, telefon desno, pod njimi opis projekta, tehnologije in povezava. Uporablja se na podstraneh referenc. ═══════════════════════════════════════════════════════════════════ */ --refk-ime: clamp(38px, 4.2vw, 62px); --refk-kaj: 19px; --refk-oznaka-crta: 56px; /* črtica za nadnaslovom razdelka */ --refk-vrzel: var(--r-6); --refk-pod-vrzel: clamp(32px, 3.4vw, 56px); --refk-slika-radij: var(--rad-m); --refk-slika-senca: 0 10px 30px rgba(13, 57, 92, .09); /* Telefon: rob je ohišje, zato je temnejši od vseh drugih črt. */ --refk-telefon: 238px; --refk-telefon-rob: 10px; --refk-telefon-radij: 40px; --refk-telefon-barva: var(--nev-900); --refk-teh-znacka: 44px; /* ikona tehnologije nad imenom */ --refk-gumb-ozadje: var(--paleta-navy); /* Lupa, ki se prikaže nad sliko ob prehodu miške. */ --refk-lupa: 56px; --refk-lupa-ozadje: rgba(4, 48, 74, .82); --refk-zastor: rgba(4, 48, 74, .18); /* Listanje med referencami na dnu strani. */ --refnav-slika: 120px; --refnav-visina: 94px; --refnav-odmik: var(--r-6); --refnav-radij: var(--rad-m); --refnav-vrzel: var(--r-6); /* Lightbox: isti odseki kot na strani, samo večji, na temnem zastoru. Slika se v celoti prilagodi oknu; --lb-visina pusti prostor napisu pod njo. */ --lb-zastor: rgba(3, 30, 47, .95); --lb-sirina: min(1440px, 92vw); --lb-visina: calc(100vh - 2 * var(--lb-zrak) - 48px); --lb-zrak: clamp(16px, 3vw, 40px); --lb-gumb: 48px; --lb-gumb-ozadje: rgba(255, 255, 255, .12); --lb-radij: var(--rad-m); /* Povečan posnetek s telefona obdrži okvir telefona. Okvir je svetlejši od tistega na strani: na temnem zastoru bi se navy zlil z ozadjem. */ --lbtel-rob: 14px; --lbtel-radij: 46px; --lbtel-barva: var(--nev-700); --lbtel-obroba: rgba(255, 255, 255, .24); /* Mreža kartic referenc na strani referenc. Kartica je ista kot na domači strani; tu se spremeni samo razporeditev iz traku v mrežo. */ --refmreza-stolpci: 3; --refmreza-razmik: var(--r-6); /* Gumb pod mrežo, ki pokaže naslednjih štiriindvajset referenc. */ --refvec-odmik: 40px; --refvec-znacka: 24px; /* Prikaz zaslonske slike v okvirju prenosnika in telefona (A12). Okvirja sta risana s CSS: ohišje je preliv, zaslon ima rahel odsev, pod napravo pa stoji mehka senca. */ --lap-najvec: 980px; --lap-rob: 13px; --lap-radij: 18px; --lap-zaslon-radij: 6px; --lap-ohisje-vrh: #33465A; --lap-ohisje-dno: #18242F; --lap-noga-vrh: #2B3C4E; --lap-noga-dno: #131C26; --lap-zaslon: var(--nev-800); --lap-noga: 16px; --lap-podstavek: 10px; --lap-zareza: 96px; --lap-kamera: 5px; --lap-svetloba: rgba(255, 255, 255, .09); --lap-senca: 0 26px 60px rgba(9, 30, 47, .28); --napr-telefon: 208px; --napr-tel-rob: 9px; --napr-tel-radij: 34px; --napr-razmik: var(--r-6); /* Zavihki za izbor referenc po vrsti projekta. */ --zavref-odmik: 12px 22px; --zavref-radij: var(--rad-krog); --zavref-ozadje: var(--paleta-bela); --zavref-obroba: var(--barva-crta); --zavref-aktiven: var(--barva-naslov); /* Logotipi strank: bele ploščice z obrobo, logotip v sredini. */ --logo-visina: 106px; --logo-odmik: 18px 22px; --logo-radij: var(--rad-m); --logo-stolpci: 6; --logo-razmik: var(--r-4); /* Izpostavljeni projekti v vodoravnem traku: en projekt na zaslon, drsenje z vlečenjem in s pikami. */ /* Razmik med diapozitivi je 0: vsak zapolni celo širino traku. Vsaka vrzel bi se štela v širino vsebine, zato bi pik bilo za eno preveč, ob zaskoku pa bi se na robu videl trak naslednjega projekta. */ --projh-razmik: 0px; --projh-zrak: var(--r-8); /* prostor za pike pod trakom */ } /* ═══════════════════════════════════════════════════════════════════════════ B · DEDIŠČINA — tokeni domače strani in prvih pasov prenove. Nastali so pred sistemom (del A) in ostajajo, ker jih obstoječe strani berejo. Vrednosti, ki imajo v sistemu ustreznico, so nanjo preusmerjene. Novih pravil na te tokene ne pišemo. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Paleta in pisave so v delu A; tu ostaneta samo imeni, ki ju berejo stara pravila. */ --pisava-exo: var(--pisava-naslov); /* Osnovne velikosti so zdaj lestvica iz A4. H1 doseže 90 px pri oknu 1500 px, H2 in H3 sta z njim v istem razmerju kot doslej. */ --velikost-h1: var(--f-h1); --velikost-h2: var(--f-h2); --velikost-h3: var(--f-h3); --velikost-telo: var(--f-telo); /* Širina vsebine: vsi pasovi, ki niso čez celo širino, imajo vsebino široko natanko toliko. Avadin stolpec doda 29 px odmika na vsako stran, zato je vrstica širša za 58 px. */ --vsebina: 1500px; --vsebina-odmik: 30px; /* izmerjen odmik Avadinega stolpca */ /* ═══════════════════════════════════════════════════════════════════ 3. ENOTA --u ═══════════════════════════════════════════════════════════════════ */ --u: min(1vw, 16.5px); /* Skupni dvig desne strani heroja (prenosnik, telefon, sence in oba rokopisna napisa s puščicama). 3,33 u = 50 px pri oknu 1500 px. Ena številka premakne celo skupino. */ --oder-dvig: calc(1.33 * var(--u)); /* Širina besedilnega stolpca v heroju. Pri 100 px naslov potrebuje več prostora kot prej (37,5 %), skupina naprav pa se umakne desno. */ --hero-tekst: 46%; --oder-desno: 50px; /* ═══════════════════════════════════════════════════════════════════ 4. IZPELJANE BARVE — vse sledijo paleti iz 1. točke. Tu popravljaj samo, če rabiš odtenek, ki ga paleta ne pokrije. ═══════════════════════════════════════════════════════════════════ */ /* Stara imena kažejo na vloge iz A2 — ena vrednost, dve imeni. */ --barva-povezava: var(--barva-znamka); /* povezave in ikone v storitvah */ --barva-cyan: var(--barva-znamka-svetla); /* poudarek v H1 */ --barva-rumena: var(--barva-poudarek); /* gumbi */ --barva-bela: var(--paleta-bela); --barva-ozadje-mehko:var(--paleta-mehka); --barva-ozadje-temno:var(--paleta-temna); /* temni pasovi */ --barva-rumena-hover:var(--barva-poudarek-hover); --barva-navy: var(--nev-900); /* napisi na rumenih gumbih */ --barva-povezava-2: var(--barva-znamka-temna); /* nadnaslovi na svetlem */ --barva-modra-svetla:#12A8DE; /* ikone in drobni poudarki */ --barva-cyan-2: #2BCAED; /* nadnaslov v heroju */ --barva-svetla: var(--barva-na-temnem-tiho); /* besedilo na temnem */ /* Odtenki, ki se ponovijo na več mestih — noga, temni pasovi, drobni UI. */ --barva-noga-besedilo: #8FADC1; /* besedilo v nogi */ --barva-navy-2: #0F3A5A; /* temnejši pas, podmeni */ --barva-navy-3: #16324B; --barva-svetla-2: var(--barva-na-temnem-telo); --barva-svetla-3: #CBDDEA; --barva-svetla-4: #B7CEDD; --barva-svetla-5: var(--nev-500); --barva-svetla-6: #DDEFF8; --barva-svetla-7: #9ED8F0; --barva-crta-2: var(--barva-crta-mehka); --barva-modra-globoka: #015477; --barva-glava: #083852; /* pas glave, ko je pritrjen ob vrhu */ /* Glava strani: ena mera za vse strani (Milan, 26. 9. 2026). Vrednosti so iz domače strani; nad naslovnim pasom je glava višja, vsebina v njej pa sedi 10 px višje kot prej. */ --glava-visina: calc(5.4 * var(--u)); /* pas glave, pritrjen ali navaden */ --glava-visina-hero: calc(11.7 * var(--u)); /* neodrsana glava nad naslovnim pasom */ --glava-odmik-vrh: 30px; /* logotip, meni in gumbi od zgornjega roba, dokler stran ni odrsana */ --glava-vrsta: 57px; /* višina vrste z menijem (najvišji element) */ --glava-visina-tel: 77px; /* vrsta glave do 900 px */ --glava-zacetna: calc(2 * var(--glava-odmik-vrh) + var(--glava-vrsta) + 1px); /* neodrsana glava z obrobo; prostor pod pritrjeno glavo */ --hero-vrh-tel: calc(var(--glava-visina-tel) + var(--r-4)); /* nadnaslov heroja 16 px pod glavo (do 640 px) */ --glava-logo: 34px; /* logotip v glavi: nazaj na 34 px kot pred 26. 9. 2026 (Milan, 27. 9.); prej calc(2.88 * var(--u)) */ --glava-vrzel: calc(1.9 * var(--u)); /* med logotipom, menijem in orodji */ --glava-meni-vrzel: calc(2.5 * var(--u)); /* med postavkami menija */ --glava-iskanje: calc(3.5 * var(--u)); /* gumb iskanja */ --glava-meni-pisava: 16px; /* Mikro animacije (animacije.css / animacije.js) */ --anim-cas: .55s; --anim-cas-kratek: .2s; --anim-zamik: .07s; /* med sosedi v mreži */ --anim-krivulja: cubic-bezier(.22, .61, .36, 1); --barva-social: #1E88CF; --barva-social-hover: #3AA0E0; /* V nogi so ikone diskretne – prosojen krog, ne polna modra. */ --social-ozadje: rgba(255, 255, 255, .08); --social-ozadje-hover: rgba(255, 255, 255, .17); --social-ikona: rgba(255, 255, 255, .70); --social-ikona-hover: var(--barva-bela); /* --- H1 (naslov heroja) -------------------------------------------- */ /* Velikost raste z oknom do 100 px; formula drži naslov v eni vrsti, zato se pri ožjem oknu sorazmerno manjša. */ --h1-pisava: var(--pisava-exo); --h1-velikost: var(--velikost-h1); --h1-teza: 700; --h1-razmik: -.04em; --h1-vrstica: 1; /* Največja širina naslova; v em, da ob rasti pisave ostane enako širok kot prej (9 em pri 82 px = 7,4 em pri 100 px). */ --h1-sirina: 7.6em; /* dve vrstici pri 100 px */ --h1-barva: var(--barva-bela); --h1-poudarek: var(--barva-cyan); /* --- H2 (naslovi odsekov) ------------------------------------------ */ --h2-pisava: var(--pisava-exo); --h2-velikost: var(--velikost-h2); --h2-teza: 800; --h2-razmik: -.037em; --h2-vrstica: 1.08; /* Bela pisava na temnem se optično zdi debelejša in bolj zbita, zato ima naslov na temnem pasu manjšo težo in več razmika. */ --h2-teza-temno: 700; --h2-razmik-temno: -.027em; --h2-barva: var(--barva-naslov); --h2-barva-temno: var(--barva-bela); /* na temnih pasovih */ /* --- H3 (naslovi kartic in korakov) -------------------------------- */ /* Tri velikosti: kartice storitev, koraki procesa, naslovi objav. Manjši dve sta izpeljani iz glavne, zato ena sprememba premakne vse. */ --h3-pisava: var(--pisava-exo); --h3-velikost: var(--velikost-h3); --h3-velikost-2: calc(var(--h3-velikost) * 21 / 24); /* koraki, 21 px */ --h3-teza: 800; --h3-razmik: -.01em; --h3-vrstica: 1.14; --h3-barva: var(--barva-naslov); /* --- OSNOVNO BESEDILO ---------------------------------------------- */ --telo-velikost: var(--velikost-telo); --telo-velikost-s: var(--velikost-telo); /* opisi v karticah — trenutno enako kot osnovno */ --mnenje-velikost: 15.5px; /* citati mnenj so za spoznanje manjši */ --telo-teza: 500; --telo-vrstica: 1.55; --telo-vrstica-s: 1.4; --telo-barva: var(--barva-telo); /* --- VELIKI GUMB (hero) -------------------------------------------- */ --gumb-l-velikost: 14.5px; --gumb-l-teza: 700; --gumb-l-odmik: 19px 32px; --gumb-l-radij: 999px; /* --- MALI GUMB (glava) --------------------------------------------- */ --gumb-s-velikost: 13px; --gumb-s-teza: 700; --gumb-s-razmik: .06em; --gumb-s-odmik: 15px 26px; --gumb-s-radij: 999px; /* Gumb v kartici je najmanjši — izpeljan iz malega, da ostaneta v paru. */ --gumb-xs-velikost: calc(var(--gumb-s-velikost) - 1px); --gumb-xs-odmik: 10px 21px; /* --- MENI ----------------------------------------------------------- */ --meni-velikost: 16px; --meni-teza: 600; --meni-razmik: normal; --meni-barva: #E8F1F8; /* --- DOKAZI V HEROJU (20+ let izkušenj …) --------------------------- */ /* V enoti u, ker vrstica leži na dnu pasu in se mora manjšati z njim. */ --dokazi-velikost: calc(.8 * var(--u)); --dokazi-teza: 600; --dokazi-teza-krepko: 800; --dokazi-razmik-med: calc(1.3 * var(--u)); --dokazi-barva: #D6E6F2; --dokazi-barva-krepko: var(--barva-bela); /* --- TEME V HEROJU DOMAČE STRANI ------------------------------------ Namesto dokazov (28 let, 230 projektov, 150+ strank) tri teme po Milanovem vzoru (docs/Design/Domov/hero-teme-vzor-20260927.png): bel krog s sijem in modro ikono, pod njim naslov in opis, med temami navpična črta. Mere v enoti u, ker vrstica leži v pasu, ki se manjša s širino; krog je pri 1440 px 65 px. */ --teme-krog: calc(4.5 * var(--u)); --teme-krog-ozadje: var(--barva-bela); --teme-krog-sij: 0 0 calc(1.8 * var(--u)) rgba(0, 162, 221, .55); --teme-ikona: 62%; /* ikona v krogu */ --teme-ikona-barva: var(--barva-povezava); --teme-pisava: var(--pisava-naslov); --teme-naslov: max(15px, calc(1.15 * var(--u))); --teme-naslov-teza: 700; --teme-opis: max(14px, calc(1 * var(--u))); --teme-opis-barva: rgba(255, 255, 255, .72); --teme-vrstica: 1.4; --teme-barva: var(--barva-bela); --teme-crta: rgba(255, 255, 255, .22); /* navpična črta med temami */ --teme-razmik: calc(1.3 * var(--u)); /* od črte do teme */ --teme-do-napisa: calc(1 * var(--u)); /* krog → naslov */ --teme-do-opisa: calc(.3 * var(--u)); /* naslov → opis */ /* Naslov → krogi: 55 px robov Avadinih stolpcev + ta odmik = 72 px pri 1440 px (Milan: »da diha«, pas brez opisa in gumbov). */ --teme-od-gumbov: calc(1.2 * var(--u)); /* Pod temami toliko zraka kot nad nadnaslovom (84 px pri 1440 px): 20 px roba stolpca + spodnji odmik pasu. */ --hero-spodaj: calc(4.45 * var(--u)); /* --- IKONE KORAKOV (blok Kako do uspeha) -------------------------- */ /* Risane ikone, vstavljene kot maska, zato prevzamejo to barvo. */ /* Koraki so poravnani na sredino: krog z ikono, pod njim številka, naslov in opis. Kroge povezuje pikčasta črta z obročkom na sredini. */ --korak-krog: 88px; /* premer kroga z ikono */ --korak-krog-ozadje: #E9F3FB; --korak-ikona-velikost: 66px; /* ikona sega skoraj do roba kroga */ --korak-ikona-barva: var(--barva-povezava); --korak-st-velikost: 34px; /* številke 01–04 */ --korak-st-barva: var(--korak-ikona-barva); /* ista kot ikone */ --korak-crta: #BBD9EE; /* pikčasta povezava */ --korak-crta-razmik: 18px; /* zrak med krogom in črto */ --korak-vozlisce: 11px; /* obroček na sredini povezave */ --korak-do-st: 18px; /* krog → številka */ --korak-do-naslova: 8px; /* številka → naslov */ --korak-do-opisa: 10px; /* naslov → opis */ --korak-opis-sirina: 21em; /* največja širina opisa */ --korak-vrh: 60px; /* zrak med naslovom pasu in koraki */ /* Preliv pasov z belim ozadjem: bela levo → svetlo modra desno. Uporabljata ga razdelka »Celovite digitalne rešitve« in »Kako do uspeha«. */ --ozadje-pas: linear-gradient(90deg, var(--barva-bela) 0%, #F7FBFE 45%, #EAF3FA 100%); /* --- NADNASLOV (Naše storitve, Kako do uspeha …) -------------------- */ --nad-velikost: 14px; --nad-teza: 700; --nad-razmik: .18em; --nad-razmik-tel: .08em; /* značka nad naslovom rešitve na telefonu: v eni vrsti */ --nad-vrstica: 1.5; --nad-do-naslova: 18px; --nad-barva: var(--barva-povezava-2); /* svetli pasovi */ --nad-barva-temno: var(--barva-svetla); /* temni pasovi */ /* --- ŠTUDIJE PRIMEROV --------------------------------------------- */ --stud-radij: 0; /* kartice so oglate in se stikajo */ --stud-razmik: 0px; /* brez razmika med karticami */ --stud-rob: 0px; /* mreža sega od roba do roba zaslona */ --stud-glava-rob: 28px; /* odmik naslova in noge od roba */ /* Postavitev: šest enakih kartic, tri v vrsti. */ --stud-stolpcev: 3; --stud-razmerje-kartica: 5/3; --stud-do-noge: 26px; /* mreža → »Vse študije primerov« */ --stud-ozadje: linear-gradient(165deg, #E3EEF9 0%, #D6E6F4 55%, #C9DDF0 100%); --stud-pike: #B4CFE6; /* pikčast vzorec v vogalih pasu */ --stud-razmerje: 76/51; /* razmerje manjše kartice, kjer je potrebno */ /* Mirno stanje kartice: sam posnetek, na sredini logotip in pod njim napis, kaj smo naredili. Zastora ni — barva pride šele ob prehodu miške. Napis in logotip držita senco, da sta berljiva tudi na svetlem posnetku. */ --stud-senca-napisa: 0 2px 10px rgba(2, 20, 34, .55); --stud-logo: 104px; /* največja višina logotipa (velika kartica) */ --stud-logo-sirina: 62%; /* največja širina logotipa */ --stud-logo-rm9: .65; /* RM9 je širši od ostalih, zato pomanjšan */ --stud-mir-razmik: 20px; /* logotip → ime storitve pod njim */ /* Ime storitve pod logotipom je ploščica, da je berljivo na vsakem posnetku in da se vidi, da gre za oznako storitve. */ --stud-oznaka: 12.5px; --stud-oznaka-ozadje: rgba(4, 26, 44, .62); --stud-oznaka-rob: rgba(255, 255, 255, .34); --stud-oznaka-odmik: 8px 16px 8px 14px; /* Prehod miške: pas v barvi znamke, naslov prileti od zgoraj, opis se pretopi, značke pridejo od spodaj — enako kot na multimedija.net. */ --stud-cas: .6s; --stud-krivulja: cubic-bezier(.68, -.55, .265, 1.55); /* Pas ob prehodu miške je neprosojen — posnetek je čisto zakrit. Diagonalo ohrani samo senčenje ene polovice. */ --stud-hover-senca: rgba(0, 0, 0, .14); --stud-hover-odmik: 46px 34px 84px; --stud-hover-razmik: 20px; --stud-naslov-nad: 25px; /* prva vrstica naslova */ --stud-naslov: 35px; /* druga vrstica, poudarjena */ --stud-opis: 15.5px; --stud-gumb: 15px; /* napis na gumbu »Študija primera« */ --stud-gumb-odmik: 10px 26px; --stud-znacka: 13px; --stud-znacke-dno: 28px; /* Barve znamk so iste kot na obstoječi strani; zapisane so v trojčkih RGB, ker se uporabljajo v prelivu z dvema prosojnostma. */ --stud-barva-energija: 215, 25, 32; --stud-barva-pozejdon: 214, 166, 8; --stud-barva-sar: 98, 144, 0; --stud-barva-rm9: 0, 72, 240; --stud-barva-bodifit: 4, 42, 67; --stud-barva-simarine: 10, 109, 147; /* --- IZBRANI PROJEKTI -------------------------------------------- Izmenične vrstice: na eni strani posnetek projekta, na drugi številka, leto, panoga, ime, poved, opis, značke in povezava. Pisavi sta samo dve: naslovi in besedila v Interju. */ --proj-sirina: var(--vsebina); /* enako kot pri drugih pasovih */ /* Naslov je postavljen kot pri mnenjih strank: dve vrstici iste teže, velikost pa je navadna velikost H2. Stolpec glave je zato širši, da druga vrstica ostane v eni vrstici. */ --proj-h2-velikost: var(--velikost-h2); --proj-rob: 28px; /* odmik od roba zaslona */ --proj-pas: var(--pas-zrak); /* zrak nad in pod pasom */ --proj-ozadje: linear-gradient(180deg, #FBFDFF 0%, #F2F7FB 100%); --proj-glava-razmik: 64px; /* glava → prva vrstica */ --proj-vrstica-razmik: 72px; /* med vrsticami */ --proj-znak: 96px; /* najmanjša širina ploščice z logotipom */ --proj-znak-visina: 26px; /* višina logotipa v ploščici */ --proj-stolpca: 1.04fr 1fr; /* posnetek : besedilo */ --proj-razmik: 64px; /* med stolpcema */ --proj-slika-radij: 16px; --proj-slika-razmerje: 4/3; --proj-slika-senca: 0 24px 60px rgba(13, 57, 92, .16); /* Oder: posnetek strani v okvirju prenosnika, ob njem telefon, v ozadju barva podjetja. Barve so iste kot pri študijah. */ --proj-oder-odmik: 9% 10% 11%; --proj-laptop-okvir: #16222E; /* rob zaslona prenosnika */ --proj-laptop-radij: 12px; --proj-laptop-rob: 10px; /* debelina roba zaslona */ --proj-laptop-noga: #C7D2DC; /* podstavek prenosnika */ --proj-laptop-senca: 0 26px 54px rgba(2, 18, 32, .34); --proj-telefon-sirina: 25%; /* širina telefona glede na oder */ --proj-telefon-rob: 6px; --proj-telefon-radij:22px; --proj-barva-bodifit: var(--stud-barva-bodifit); --proj-barva-simarine: var(--stud-barva-simarine); --proj-barva-sar: var(--stud-barva-sar); --proj-barva-energija: var(--stud-barva-energija); --proj-barva-rm9: var(--stud-barva-rm9); --proj-barva-pozejdon: var(--stud-barva-pozejdon); --proj-st: 58px; /* zaporedna številka */ --proj-st-barva: rgba(13, 57, 92, .22); --proj-meta: 12.5px; /* leto in panoga */ --proj-meta-barva: var(--barva-svetla-5); --proj-ime: 38px; --proj-poved: 21px; /* ležeča poved pod imenom */ --proj-opis: 16px; --proj-znacka: 13px; --proj-znacka-ozadje:#EDF4F9; --proj-vec: 15px; /* »Ogled projekta« */ /* --- OKNO Z REFERENCAMI ------------------------------------------- Levo posnetek izbranega projekta na ozadju v barvi znamke, desno seznam projektov. Pas je vedno enako visok, ne glede na to, koliko referenc je v seznamu. */ --okno-visina: 600px; --okno-stolpca: 1.25fr .75fr; --okno-radij: 18px; --okno-odmik: 8% 8% 15%; /* zrak okoli naprav */ --okno-podpis: 22px 26px; --okno-ime: 20px; --okno-panoga: 12px; --okno-gumb: 14px 14px; /* vrstica v seznamu */ --okno-znak: 72px; /* ploščica z logotipom stranke */ --okno-znak-visina: 42px; --okno-gumb-ime: 17px; --okno-telefon: 19%; /* širina telefona ob prenosniku */ --okno-laptop: 74%; /* --- NASLOVNI PAS STORITVENE STRANI (nov) -------------------------- Levo besedilo, desno steklena kartica z dejstvi in pod njo vrstica drobnih oznak. Barve so iz palete, mere tukaj. */ --hsn-karta-ozadje: rgba(255, 255, 255, .07); --hsn-karta-rob: rgba(255, 255, 255, .16); --hsn-karta-radij: 18px; --hsn-vrsta-odmik: 16px 14px; --hsn-krog: 44px; /* ploščica z ikono */ --hsn-ime: 15px; --hsn-vrednost: 18px; --hsn-drobna: 14px; /* --- TRIJE KORAKI POD HEROJEM (Pritegniti, Prepričati, Pretvoriti) - Ikona in velika številka, pod njima naslov in dve vrstici. Stolpce loči navpična črta. */ --tri-razmik: 46px; /* med tremi sklopi */ --tri-krog: 78px; /* svetlo moder krog z ikono */ --tri-krog-ozadje:#E9F3FB; --tri-ikona: 46px; --tri-naslov: var(--f-h3); --tri-opis: 14.5px; --tri-pas: var(--pas-ozko); /* Različica s štirimi poudarki: ozek pas pod herojem, ikona brez kroga levo od dveh vrstic besedila. */ --tri4-ikona: 54px; --tri4-razmik: 16px; /* ikona → besedilo */ --tri4-stolpci: 30px; /* med poudarki */ --tri4-crta: var(--barva-crta); /* nežna navpična ločnica */ /* Trak pod herojem je tanek in ima štiri stolpce; pri velikosti H3 se naslovi lomijo v dve vrstici in opis se poreže, zato H4. */ --tri4-naslov: var(--f-h4); /* enako kot postavke v pasu SEO */ --tri4-opis: var(--geo-postavka); --tri4-pas: var(--pas-ozko); /* --- NAŠE DELO (blok 2) ------------------------------------------- Glava: levo nadnaslov in naslov, desno uvod (poravnan desno). Pod njo vrsta kartic čez vso širino zaslona — mere kartic in teka so pod »SVEŽE IZDELANE STRANI« (--sv-…), ker je vrsta ista kot na domači strani (Milan, 27. 9. 2026). Ozadje pasu je svetlo modro. */ --delo-ozadje: linear-gradient(180deg, #F4F9FD 0%, #EAF3FA 100%); --delo-uvod-velikost: 15.5px; --delo-uvod-sirina: 30em; /* uvod desno od naslova */ --delo-glava-razmik: var(--r-11); /* naslov ↔ uvod */ --delo-do-kartic: var(--r-7); /* glava → vrsta kartic (+ prostor za senco) */ /* Strani vrtiljaka: pike pod tirom namesto puščic. */ --pika: 9px; --pika-razmik: 9px; --pika-barva: #C2D5E3; --pika-aktivna: var(--barva-povezava); --pika-sirina-a: 26px; /* aktivna pika je podolgovata */ /* --- IZKUŠNJE (veliko leto in trije poudarki) ---------------------- */ --izk-leto: clamp(64px, 7vw, 108px); --izk-leto-barva: #C9D8E4; --izk-pripis: 22px; /* rokopisni pripis ob letnici */ --izk-pripis-nagib: -9deg; --izk-opis-sirina: 68ch; /* da opis pade v tri vrstice */ --izk-naslov: 26px; --izk-opis: 15.5px; --izk-ikona: 44px; /* ikona ob poudarku, levo od besedila */ --izk-pas: var(--pas-ozko); /* --- POVEDALI SO (mnenje s puščicama) ------------------------------ */ --mnj-karta-radij: 16px; --mnj-besedilo: 16.5px; --mnj-foto: 44px; --mnj-krog: 44px; --mnj-pas: var(--pas-zrak); /* --- NAŠ PRISTOP (pas s fotografijo) ------------------------------- */ --pri-pas: var(--pas-zrak); --pri-naslov: 30px; --pri-opis: 15.5px; --pri-pripis: 20px; /* rokopisni navedek čez fotografijo */ --pri-zastor: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,.96) 34%, rgba(255,255,255,.55) 52%, rgba(255,255,255,0) 72%); /* --- SEO IN GEO (temni pas z Vennovim diagramom) ------------------- */ --geo-pas: var(--pas-zrak); --geo-ozadje: radial-gradient(120% 140% at 8% 0%, #0B4F74 0%, #04304A 55%, #022130 100%); /* Za pasom je ista gorska fotografija kot pri pozivu k dejanju; zastor čeznjo je močan levo, kjer je besedilo, in nekoliko lažji desno, kjer stojita seznam in rokopisni pripis. */ /* Fotografija je Milanova predloga (2000 × 273): temno nebo z grebenom, ki se dvigne proti desni. Zastor čeznjo drži besedilo berljivo. */ --geo-foto: url(../../../uploads/2026/09/ozadje-seo-geo.webp); /* Fotografija pokriva cel pas; greben je na desni, kjer stojita seznam in rokopisni pripis, zato je zastor tam najlažji. */ --geo-foto-lega: center center; --geo-foto-velikost: cover; /* Zastor je dvojen: navpični skrije zgornji rob fotografije, ki je nižja od pasu, vodoravni pa drži besedilo na levi berljivo. */ --geo-foto-zastor:linear-gradient(90deg, rgba(3,26,44,.93) 0%, rgba(3,28,47,.82) 42%, rgba(3,30,50,.64) 100%); --geo-naslov: 30px; --geo-opis: 15px; --geo-opis-sirina: 27.2em; /* blok podnaslova; za petino ožji od prejšnjih 34 em */ --geo-krog: 150px; /* premer kroga v diagramu */ --geo-krog-rob: rgba(255, 255, 255, .30); --geo-krog-ozadje:rgba(0, 162, 221, .20); --geo-krog-presek: 48px; /* koliko se kroga prekrivata */ --geo-krog-zamik: 40px; /* napis se umakne iz preseka */ --geo-krog-napis: 21px; --geo-obroc: 268px; /* mehak obroč za diagramom */ --geo-obroc-ozadje: radial-gradient(circle, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 62%, rgba(255,255,255,0) 70%); --geo-postavka: 15px; --geo-pripis: 21px; /* Venn s tremi krogi je Milanova risba s prosojnim ozadjem (362 × 340). Svetlejša neonska različica je odložena v docs/Design/Storitve/venn-neon-google-chatgpt-gemini.webp — Milan je 22. 9. 2026 ostal pri mehkejši. */ --geo-venn: 360px; /* Rokopis stoji vzporedno s seznamom, skrajno desno; sme pogledati čez rob vsebine (1500 px), seznam pa se zato umakne toliko levo. */ --geo-pripis-nagib: -10deg; /* nagib rokopisa */ --geo-pripis-rob: 35px; /* odmik rokopisa od desnega roba zaslona; zaradi zasuka je vidni rob 5 px bližje */ --geo-pripis-vrh: 106px; /* rokopis stoji 100 px pod vrhom pasu */ --geo-seznam-umik: 120px; /* za toliko se seznam umakne levo */ --geo-pripis-senca: 0 1px 12px rgba(2,20,34,.8); /* da ostane berljiv čez zasneženi greben */ /* Pikčasta mreža ob levem robu pasu. */ --geo-pike: #2E8FD6; --geo-pike-korak: 22px; /* vodoravni korak */ --geo-pike-korak-y: calc(var(--geo-pike-korak) * 1.15); /* navpični je za 15 % večji */ --geo-pike-stolpcev: 6; --geo-pike-vrstic: 9; --geo-pike-rob: 10px; /* odmik mreže od levega roba zaslona */ /* --- NAŠ PROCES (fotografija levo, štirje koraki desno) ------------- */ --proc-pas: var(--pas-ozko); /* fotografija in plošča gresta čezenj */ --proc-foto: 650px; /* koliko fotografije je znotraj vsebine; čez levi zrak zaslona sega sama. Pri 1600 px je fotografija široka 700 px (Milan, 24. 9. 2026) */ --proc-vis: 320px; /* najmanjša višina fotografije */ /* »Glavne funkcionalnosti« (Milan, 26. 9. 2026): fotografija desno do roba zaslona, levo tri kolone funkcij z ikono v krogu */ --funk-foto: 440px; /* del fotografije znotraj vsebine; do roba sega sama */ --funk-krog: 72px; --funk-krog-ozadje: rgba(0, 162, 221, .10); --funk-ikona: 30px; --funk-vrzel-x: var(--r-6); --funk-vrzel-y: var(--r-7); --funk-naslov: 17px; --funk-opis: 15px; --proc-foto-cez: var(--proc-pas); /* fotografija sega od roba do roba pasu */ --proc-foto-lega: center bottom; /* kateri del fotografije ostane v izrezu */ --proc-razmik: var(--r-10); /* Desni blok je svetla plošča: sega od konca fotografije do desnega roba zaslona in je visok natanko toliko kot fotografija. */ --proc-plosca: #F5FAFE; --proc-plosca-zrak: var(--r-9); /* zrak nad in pod besedilom */ --proc-krog: 50px; /* krogec s številko koraka (za 30 % večji) */ --proc-st: 18px; --proc-naslov: var(--f-h5); --proc-opis: var(--f-mala); --proc-vis-mobi: 260px; /* višina fotografije, ko je pas v enem stolpcu */ /* --- MNENJA V TREH KARTICAH ---------------------------------------- */ --mn3-razmik: 22px; --mn3-radij: 14px; --mn3-zvezda: #F5B301; --mn3-besedilo: 14.5px; --mn3-foto: 46px; /* za 15 % večje fotografije oseb */ --mn3-pas: var(--pas-zrak); /* --- VPRAŠANJA IN OBRAZEC ------------------------------------------ */ --vpr-pas: var(--pas-zrak); --vpr-razmik: 40px; --vpr-radij: 12px; --vpr-vprasanje: 15.5px; --vpr-karta: #EAF3FA; /* ozadje kartice s stikom */ --vpr-pripis: 18px; /* --- RAZUMEMO VAŠ POSEL (temni pas s tremi karticami) -------------- */ --raz-pas: var(--pas-zrak); --raz-ozadje: radial-gradient(120% 140% at 6% 0%, #0B4F74 0%, #04304A 58%, #022234 100%); --raz-naslov: 30px; --raz-opis: 15px; --raz-karta-radij:14px; /* Kartice so ozke (štiri v vrsti), zato manj odmika in manjši naslov. */ --raz-karta-odmik:20px 18px 22px; --raz-karta-ozadje:var(--barva-bela); /* Risbe so obrezane (scripts/orodja/obrezi.py), zato okvir ustreza velikosti motiva. Ikona stoji v svetlem krogu, kot pri drugih pasovih. */ /* Krog je samo tanek obroč brez polnila in se skoraj dotika risbe. */ --raz-krog: 54px; --raz-krog-rob: #BCE0F2; --raz-ikona: 38px; --raz-do-naslova: 12px; /* krog → naslov */ --raz-naslov-do-opisa: 2px; --raz-karta-naslov:var(--f-h4); --raz-karta-opis: 14px; --raz-razmik: 16px; /* --- UNIKATEN SPLETNI DIZAJN -------------------------------------- Levo besedilo, desno oder s tremi posnetki strani in tremi plavajočimi ploščicami. */ --uni-pas: var(--pas-zrak); --uni-stolpca: minmax(0, .92fr) minmax(0, 1.08fr); --uni-razmik: var(--r-10); --uni-h2: clamp(34px, 3.1vw, 46px); --uni-opis: 17px; --uni-poudarek: 17px; --uni-karta-radij:14px; --uni-karta-senca:0 22px 48px rgba(13, 57, 92, .16); /* Primerjalna preglednica na desni: levi stolpec bel, desni rahlo moder, vrstice ločene s tanko črto. */ --uni-prim-radij: 20px; --uni-prim-senca: 0 24px 54px rgba(13, 57, 92, .10); --uni-prim-ozadje: var(--barva-bela); --uni-prim-ok: #F4FAFE; /* poudarjeni desni stolpec */ --uni-prim-crta: var(--barva-crta-2); --uni-prim-odmik: 18px 24px; --uni-prim-glava: var(--f-drobna); --uni-prim-vrstica:var(--f-mala); --uni-prim-znak: 30px; /* krogec s križcem ali kljukico */ --uni-prim-znak-x: #EEF2F6; --uni-prim-znak-k: #DCEEFA; /* --- KAJ DOBITE (šest ploščic) ------------------------------------- */ --dob-pas: var(--pas-zrak); --dob-razmik: 16px; --dob-radij: 16px; /* večje, bolj zračne kartice (bilo 12) */ --dob-ozadje: #F4F9FD; --dob-stolpci: 2; /* postavke so v dveh stolpcih (2 × 3) */ --dob-ikona: 34px; --dob-do-vsebine: 16px; /* ikona → naslov */ --dob-do-opisa: 10px; /* naslov → opis */ /* Naslovni stolpec je tako širok, kolikor ostane, ko kartice dobijo ravno toliko prostora, da najdaljši naslov (»Mobilna prilagoditev«) ostane v eni vrstici. */ --dob-glava: 466px; --dob-do-mreze-x: 48px; /* glava → mreža postavk */ --dob-vrzel-x: 18px; --dob-vrzel-y: 18px; --dob-do-uvoda: 18px; --dob-do-povezav: 16px; --dob-povezava: var(--f-mala); --dob-naslov: var(--f-h3); --dob-opis: 15px; --dob-odmik: 26px 28px 28px; --dob-do-mreze: var(--do-vsebine); --dob-do-naslova: 18px; /* --- KAKO POTEKA (vodoravna časovnica s štirimi koraki) ------------ */ --pot-pas: var(--pas-ozko); --pot-crta: #BFD9EC; --pot-krog: 54px; /* krog z ikono na črti */ --pot-krog-ozadje:var(--barva-bela); --pot-ikona: 26px; --pot-stevilka: 13px; --pot-naslov: 16.5px; --pot-opis: 14px; --pot-razmik: 22px; --pot-uvod: var(--f-mala); --pot-do-korakov: 44px; /* glava → koraki */ --pot-do-stevilke:14px; /* krog → številka */ /* --- CENIK V PAKETIH ---------------------------------------------- Tri kartice; srednja je temna in poudarjena. */ --pak-radij: 22px; --pak-odmik: 38px 36px 40px; --pak-razmik: 26px; --pak-ime: var(--f-h3); --pak-cena: 52px; --pak-postavka: 15.5px; --pak-kljukica: 22px; --pak-znacka-ozadje: var(--paleta-rumena); --pak-temna: #0B2740; /* poudarjena kartica */ /* --- NOVICE (Iz našega bloga) -------------------------------------- */ /* Tri enake, ozke vrstice: kvadratna sličica levo, vsebina desno. Blog je podpora, zato naj zasede čim manj prostora. */ --nov-ozadje: var(--barva-ozadje-mehko); /* pas za novicami */ --nov-pas-odmik: 62px; /* zrak nad in pod pasom */ --nov-do-mreze: 26px; /* naslov pasu → novice */ --nov-razmik: 34px; /* med stolpci */ --nov-crta: var(--barva-crta-2); /* navpična ločnica med stolpci */ --nov-slika: 161px; /* stranica kvadratne sličice */ --nov-slika-razmerje:16 / 9; /* na telefonu je sličica nad besedilom, čez vso širino */ --nov-slika-radij: 10px; --nov-slika-razmik: 18px; /* sličica → besedilo */ --nov-naslov: var(--f-h3); --nov-naslov-vrstica:1.3; --nov-opis: 14.5px; --nov-opis-vrstica: 1.55; --nov-datum: 12.5px; --nov-datum-barva: #6E8BA3; --nov-znacka: 10.5px; /* napis v modri znački */ --nov-znacka-teza: 700; --nov-znacka-razmik: .07em; --nov-znacka-odmik: 5px 11px; --nov-znacka-ozadje: var(--barva-povezava-2); --nov-znacka-barva: var(--barva-bela); --nov-vec: 13.5px; /* --- LOGOTIPI REFERENC -------------------------------------------- */ --ref-stolpcev: 6; --ref-razmik: 20px; --ref-visina: 76px; /* višina ploščice z logotipom */ /* Pas »Zaupajo nam« na domači strani: logotipi so dokaz, ne glavna vsebina, zato je nižji od ostalih pasov. Na strani Reference, kjer so logotipi vsebina, ostane večji. */ --zaup-pas: var(--pas-zrak); /* zrak nad in pod pasom */ --zaup-stolpcev: 6; /* 12 logotipov v dveh polnih vrstah */ --zaup-razmik: 16px; /* razmik med ploščicami */ --zaup-visina: 104px; /* višina ploščice z logotipom */ --zaup-odmik: 10px 12px; /* zrak v ploščici okoli logotipa */ --zaup-logo: 80%; /* koliko ploščice zasede logotip */ --zaup-naslov: 24ch; /* širina naslova — da pade v dve vrstici */ --zaup-do-mreze: 26px; /* uvod → mreža logotipov */ --ref-radij: 10px; --ref-rob: #E7EEF4; /* Trak logotipov (domača stran, Reference, O nas): dve vrstici, ki tečeta v nasprotnih smereh; logotipi brez ploščic. Logotipi so 27. 9. 2026 za 20 % manjši (Milan): 56 → 45 px, 220 → 176 px. */ --trak-visina: 45px; /* višina logotipa */ --trak-sirina: 176px; /* največja širina logotipa (Minimax je zelo širok) */ --trak-razmik: 72px; /* razmik med logotipi v vrstici */ --trak-med: 56px; /* razmik med vrsticama: blok je visok 258 px (56 + 45 + 56 + 45 + 56) */ --trak-zrak: 56px; /* zrak nad in pod trakom (enak razmiku med vrsticama) */ --trak-hitrost: 48s; /* en obhod vrstice */ /* --- MNENJA STRANK ------------------------------------------------- */ --mnenje-narekovaj: 52px; /* velikost narekovaja */ --mnenje-narekovaj-barva:#BFD9EC; --mnenje-zamik: 54px; /* zamik besedila od roba kartice */ --mnenje-foto: 68px; /* fotografija osebe (prej 52) */ /* --- VRSTICA PARTNERJEV V NOGI ------------------------------------- */ --partner-visina: 40px; /* višina najvišjega (SPS) */ /* Logotipi so različno visoki; faktorji izenačijo optično velikost napisov – razmerja so izmerjena na predlogi noge. */ --partner-visina-sps: var(--partner-visina); --partner-visina-digitalna: calc(var(--partner-visina) * .78); --partner-visina-eu: calc(var(--partner-visina) * .95); --partner-visina-mgrt: calc(var(--partner-visina) * 1); --partner-visina-mobi: 34px; /* do 900 px, da se vsi zožijo enako */ --partner-razmik: 20px; /* prazen prostor levo in desno od logotipa */ --partner-razmik-mobi: 14px; --partner-motnost: .45; /* logotipi so diskretni, ne kričeči */ --partner-motnost-hover: .8; --partner-crta: rgba(255, 255, 255, .12); /* ločnice in robova */ --partner-napis: var(--barva-noga-besedilo); /* Slika naprav v heroju sme čez desni rob stolpca, da so naprave dovolj velike. Poskus, 23. 9. 2026. */ --heros-napr-cez: clamp(16px, 2vw, 34px); /* Slika prej/potem je kvadratna in stoji sredi desnega stolpca. Višino omeji, sicer bi pas zrasel čez levi stolpec (ta meri 451 px). */ --heros-napr-viso: clamp(280px, 30vw, 470px); /* Slika v heroju se ob prihodu zapelje z desne proti levi. */ --heros-napr-cas: 1.5s; --heros-napr-zacetek: .15s; --heros-napr-pot: 140px; /* od kod se zapelje */ --heros-napr-mera: .7; /* kako majhna je na začetku — kot iz globine */ /* Najhitreje na začetku, nato se počasi zaustavi (Milan, 23. 9. 2026). Prvo tretjino poti opravi v prvih 200 ms, zadnjih nekaj pikslov pa lovi do konca — zato je videti kot ustavljanje, ne kot drsenje. */ --heros-napr-krivulja: cubic-bezier(.16, 1, .3, 1); /* Scena v heroju: prenosnik, telefon in kartice so ločene plasti. Najprej prileti prenosnik, za njim telefon, nato po vrsti kartice; potem vse skupaj počasi lebdi in se odziva na premik miške. */ --scena-razmerje: 1.766; /* kot Milanova predloga 1658 x 939 */ --scena-cez: clamp(0px, 1.4vw, 24px); /* koliko sme čez desni rob */ /* širina proti višini scene */ --scena-cas: 2.8s; /* prihod ene plasti — še enkrat daljši */ --scena-zamik: .4s; /* razmik med zaporednimi plastmi */ --scena-zacetek: .15s; --scena-pot: 46px; /* od kod prileti kartica */ --scena-dvig: 26px; --scena-zasuk: 4deg; /* kartica prileti rahlo zasukana */ --scena-krivulja: cubic-bezier(.2, .85, .28, 1); --scena-lebd-pot: 7px; /* počasno lebdenje */ --scena-lebd-zasuk: .5deg; /* --- BESEDILO V NOGI ----------------------------------------------- */ /* Vse v nogi razen naslovov stolpcev je ene same, manjše mere (Milan, 23. 9. 2026). Naslovi stolpcev ostanejo --noga-naslov. */ --noga-besedilo: 15px; --noga-naslov: 17.5px; /* --- SPODNJA VRSTICA NOGE ------------------------------------------ */ --noga-bar-velikost: var(--noga-besedilo); /* zapis o pravicah in povezave */ /* Novice v desnem stolpcu noge imajo isti ritem kot povezave levo: besedilo se začne na vrhu postavke, ne na sredini. */ --noga-novica-naslov: var(--noga-besedilo); --noga-novica-vrstica: 1.35; --noga-novica-odmik: 13px; /* nad in pod ločnico */ --noga-novica-crta: rgba(255, 255, 255, .12); /* --- OCENA STRANI (zvezdice v nogi) -------------------------------- */ --ocena-zvezda: 13px; /* velikost ene zvezdice */ --ocena-motnost: .45; /* zvezdice so komaj opazne */ --ocena-napis: 13px; --ocena-barva: var(--barva-noga-besedilo); /* --- POVEZAVA »VEČ O …« -------------------------------------------- */ --povezava-velikost: 13px; --povezava-teza: 700; --povezava-razmik: .06em; /* ═══════════════════════════════════════════════════════════════════ 5. STORITVENE STRANI — bloki, ki jih domača stran nima. Prvič uporabljeni na /izdelava-spletnih-strani-nova/. ═══════════════════════════════════════════════════════════════════ */ /* --- GLAVA BLOKA (nadnaslov, naslov, uvod) ------------------------- */ --glava-do-vsebine: 42px; /* zrak med uvodom in vsebino bloka */ /* --- HERO STORITVENE STRANI --------------------------------------- Naslov je daljši kot na domači strani in stoji ob kartici z dejstvi, zato ima svojo, manjšo velikost. */ --hs-levo: 1.3fr; /* razmerje levi : desni stolpec */ --hs-razmik: 64px; /* Naslov je enak kot v heroju domače strani: Inter, do 90 px, vrstica 1. */ --hs-h1: var(--f-h1); --hs-h1-sr: clamp(40px, 6vw, 62px); /* do 1100 px */ --hs-h1-mob: 40px; /* do 900 px */ --hs-h1-vrstica: 1; --hs-lead: 19px; --hs-vrh: 132px; /* zrak nad vsebino; glava leži čez pas */ --hs-dno: 64px; /* Vrstica dokazov pod gumbi v heroju storitvene strani. */ --hs-dokaz: var(--f-mala); --hs-dokaz-ikona: 18px; --hs-dokaz-razmik:28px; --hs-dokaz-vrh: 26px; /* Fotografija v ozadju je ista kot na domači strani in od 24. 9. 2026 je isti tudi zastor čeznjo (Milan: naj bo svetlejši). Prej je bil tu svoj, temnejši zastor, ker je desno stala ploščica z dejstvi; zdaj je tam slika, ki temnega ozadja ne potrebuje. */ --hs-zastor: var(--hero-foto-zastor); /* --- BLOK »PO MERI POMENI PO MERI« -------------------------------- */ --pomeri-razmik: 60px; /* --- DEJSTVA V HEROJU (cena, rok, sistem, vključeno) --------------- Kartica desno ob naslovu. Odgovori na štiri vprašanja, ki jih obiskovalec postavi prva; iskalniki in AI orodja jih poberejo od tu. */ --dej-ozadje: rgba(255, 255, 255, .07); --dej-rob: rgba(255, 255, 255, .16); --dej-radij: 18px; --dej-odmik: 30px 32px; --dej-crta: rgba(255, 255, 255, .11); --dej-vrstica: 17px; /* zrak nad in pod ločnico */ --dej-kljuc: 13px; /* »Cena«, »Rok« … */ --dej-kljuc-barva:var(--barva-svetla); --dej-vrednost: 19px; --dej-vrednost-barva: var(--barva-bela); --dej-pod: 13.5px; /* drobna vrstica pod kartico */ --dej-pod-barva: var(--barva-svetla-2); /* --- PRIMERJAVA (kupljena predloga : stran po meri) ---------------- */ --prim-radij: 16px; --prim-rob: var(--barva-crta); --prim-glava: 13px; --prim-besedilo: 15.5px; --prim-odmik: 16px 20px; --prim-slabo: #C2CFD9; /* znak ✕ v levem stolpcu */ --prim-dobro: var(--barva-povezava); --prim-ozadje-2: var(--barva-ozadje-mehko); /* poudarjeni desni stolpec */ /* --- VKLJUČENO OD PRVEGA DNE (tri kartice) ------------------------- */ --vkl-radij: 14px; --vkl-odmik: 28px 26px; --vkl-ozadje: var(--barva-bela); --vkl-rob: var(--barva-crta); --vkl-krog: 62px; /* premer kroga */ --vkl-ikona: 44px; /* risba sega skoraj do roba kroga */ --vkl-ikona-barva: var(--barva-povezava); --vkl-ikona-ozadje: var(--korak-krog-ozadje); /* --- CENIK --------------------------------------------------------- */ --cen-radij: 18px; --cen-odmik: 32px 30px 30px; --cen-rob: var(--barva-crta); --cen-ozadje: var(--barva-bela); --cen-naslov: 19px; /* ime paketa */ --cen-cena: 40px; /* številka */ --cen-cena-pred:15px; /* »od« */ --cen-pod: 13px; /* »brez DDV« */ --cen-postavka: 15px; /* vrstice v seznamu */ --cen-kljukica: var(--barva-povezava); --cen-poudarek-rob: var(--barva-rumena); --cen-razmik: 24px; /* Drobni stroški pod ceniki — gostovanje, domena, vzdrževanje. */ --cen-drobno-ozadje: var(--barva-ozadje-mehko); --cen-drobno-radij: 14px; /* --- SVEŽE IZDELANE STRANI (vrtiljak) ------------------------------- Navpične kartice s pravim posnetkom vrha strani, ki smo jo naredili. Posnetki so zajeti pri 1280 × 1810 in pomanjšani na 660 px širine. */ --sv-kartic: 4; /* koliko kartic je hkrati v vidnem polju */ --sv-razmik: 24px; --sv-pas: var(--pas-zrak); /* zrak nad in pod pasom */ --sv-radij: 16px; --sv-ozadje: linear-gradient(180deg, var(--barva-bela) 0%, #F4F9FD 55%, #EAF3FA 100%); --sv-pike: var(--stud-pike); /* Senca je sestavljena iz treh plasti: lasast rob, kratka senca tik ob kartici in dolga mehka senca. Tako je globina videti naravna in ne kot en sam siv pas. */ /* Senca je enakomerna po vsem obodu kartice — brez zamika navzdol. */ --sv-senca: inset 0 0 0 1px rgba(16, 38, 58, .10), 0 0 8px rgba(13, 57, 92, .24); /* Ob prehodu miške ista, le močnejša — še vedno enakomerna in ozka. */ --sv-senca-hover:inset 0 0 0 1px rgba(16, 38, 58, .16), 0 0 13px rgba(13, 57, 92, .45); /* Ob prehodu miške se kartica ne premakne in posnetek se ne približa; spremeni se samo globina sence. */ --sv-cas: .5s; /* Koliko prostora potrebuje senca, da je drsnik ne odreže. */ --sv-senca-prostor: 18px; /* prostor za senco: enak na vseh straneh */ --sv-senca-prostor-vrh: 18px; --sv-senca-prostor-bok: 18px; --sv-krivulja: cubic-bezier(.22, .61, .24, 1); /* Posnetek zapolni celo kartico; podpis leži čezenj, na modrem zastoru, ki se z dna navzgor razblini v nič. */ /* PRAVILO: kartica reference ima povsod razmerje 0,716 — na domači strani, na strani referenc, v vrtiljakih na storitvenih straneh, skratka povsod, kjer stoji .mm-sveze__karta. Kartica je višja kot široka; posnetek je zajet v istem razmerju (660 x 922), da se ne obreže. Milan, 23. 9. 2026. Prej je bilo 660 x 820 = 0,805. Kdor spremeni to številko, mora znova zajeti posnetke kartic — scripts/orodja/reference-paket.py --samo=kartica. */ --sv-razmerje: 465/822; /* kartica referenc: 465 × 822 (Milan, 27. 9. 2026); prej 660/922 */ --sv-zastor: linear-gradient(180deg, rgba(7,38,62,0) 0%, rgba(7,38,62,.45) 32%, rgba(7,38,62,.88) 72%, rgba(7,38,62,.96) 100%); --sv-zastor-visina: 86px; /* koliko zastora je nad besedilom */ --sv-podpis: 18px 20px; --sv-naslov: 18px; --sv-oznaka: 11px; --sv-oznaka-barva: rgba(255, 255, 255, .72); --sv-krog: 44px; /* puščici ob robu tira */ --sv-pusc-odmik: -22px; /* koliko puščica sega čez rob tira */ --sv-pusc-senca: 0 10px 24px rgba(16, 38, 58, .18); --sv-do-noge: 26px; /* tir → povezava »Vse reference« */ --sv-krog-mala: 36px; /* puščica v kotu kartice */ --sv-krog-ozadje:var(--barva-bela); /* puščica leži čez posnetek, zato bela */ --sv-pusc-tiho: #93A8BA; /* znak puščice, ki ne more naprej */ --sv-crta: var(--barva-crta); /* --- POGOSTA VPRAŠANJA --------------------------------------------- */ --faq-crta: var(--barva-crta); --faq-vprasanje: 18px; --faq-odgovor: var(--velikost-telo); --faq-odmik: 20px; /* zrak nad in pod vprašanjem */ --faq-znak: 22px; /* plus/minus na desni */ --faq-znak-barva:var(--barva-povezava); --faq-stolpci: 2; /* vprašanja v dveh stolpcih */ --faq-razmik: 0 54px; } /* ═══════════════════════════════════════════════════════════════════════════ ODZIVNOST — osnovne vrednosti se povozijo v :root, ne globlje v drevesu, sicer se izpeljanke (calc iz njih) ne preračunajo. ═══════════════════════════════════════════════════════════════════════════ */ /* Tablica: pasovi se stisnejo, naslovi kartic se zmanjšajo. */ @media (max-width: 1100px) { :root { --f-h3: 23px; --f-h4: 18.5px; --f-uvod: 17.5px; --pas-ozko: 44px; --pas-zrak: 64px; --pas-siroko: 76px; --do-vsebine: 36px; --kartica-razmik: var(--r-5); } } /* Telefon: naslovi so manjši, sicer prelomijo postavitev. */ @media (max-width: 900px) { :root { --glava-zacetna: calc(var(--glava-visina-tel) + 1px); --f-h2: 29px; --f-h3: 21px; --f-telo: 16px; --vrstica-h2: 1.14; --pas-ozko: 36px; --pas-zrak: 52px; --pas-siroko: 60px; --do-vsebine: 30px; --do-noge: 26px; --kartica-odmik: 20px; --h2-velikost: var(--f-h2); --h2-vrstica: 1.14; --pregled-stolpci: 2; /* »Na kratko« na straneh rešitev: dve postavki v vrsti */ --isk-naslov: 19px; --isk-razmik: 26px; --pika-razmik: 16px; /* pike vrtiljaka dovolj narazen za prst */ --sv-tek-kartic: 2.5; --teme-krog: 60px; --teme-naslov: 16px; --teme-opis: 14.5px; --teme-razmik: 18px; --teme-do-napisa: 12px; --teme-do-opisa: 4px; --teme-od-gumbov: 28px; --teme-krog-sij: 0 0 20px rgba(0, 162, 221, .5); --cl-f-h2: 25px; /* naslovi v članku (Avada sicer vsili 32 px) */ /* Osnovna višina mora biti povožena tu, v :root – izpeljanke --partner-visina-* se izračunajo pri :root in jih spodaj v drevesu ni več mogoče spremeniti. */ --partner-visina: var(--partner-visina-mobi); } } /* Trak logotipov na telefonu (prej v glava-noga.css); logotipi 20 % manjši kot pred 27. 9. 2026: 40 → 32 px, 150 → 120 px. */ @media (max-width: 760px) { :root { --trak-visina: 32px; --trak-sirina: 120px; --trak-razmik: 44px; --trak-med: 44px; --trak-zrak: 44px; --trak-hitrost: 32s; } } /* Ozek telefon: postavke »Na kratko« ena pod drugo. */ @media (max-width: 600px) { :root { --pregled-stolpci: 1; /* Drobne oznake na karticah: najmanj 12 px (prej 10,5–11,5 px). */ --sv-oznaka: 12px; --nov-znacka: 12px; --tri4-ikona: 40px; /* štirje poudarki v enem stolpcu */ --uni-prim-odmik: 14px; /* primerjava predloga / unikatna stran */ --pak-odmik: 30px 24px 32px; /* cenovna kartica: manj praznega roba */ --sv-tek-kartic: 1.4; /* Teme v heroju ena pod drugo: krog levo, naslov in opis desno. */ --teme-krog: 52px; --teme-naslov: 16px; --teme-opis: 15px; --teme-razmik: 14px; --teme-do-napisa: 16px; /* Pregled na telefonu (Milan, 29. 9. 2026). */ --gumb-l-velikost: 13.5px; /* napisi gumbov v eni vrstici */ --gumb-l-odmik: 19px var(--r-5); --funk-krog: 56px; /* krogi funkcij na straneh rešitev (72 px) */ --funk-ikona: 24px; --korak-vrh: 40px; /* Kako delamo: zrak nad koraki (60 px) */ } } /* ============================================================ POSKUSNI PASOVI — Milanovi predlogi za primerjavo (t1, t2, t3). Ko se odloči, kateri ostanejo, se tokeni preselijo med redne in ta razdelek izgine. Zato so vsa imena s predpono --t. ============================================================ */ .mmnk{ --t-nad: var(--f-nad); --t-rokopis: 21px; --t1-rokopis: 30px; /* rokopis v traku z dosežki */ --t-rokopis-mala: 24px; --t-h2: var(--f-h2); --t-opis: 17px; /* t1 — dosežki na fotografiji */ --t1-pas: var(--pas-ozko); --t1-leto: clamp(52px, 5vw, 76px); --t1-stevilka: clamp(30px, 2.6vw, 40px); --t1-ikona: 28px; --t1-crta: rgba(255,255,255,.16); --t1-svetla: #9EC4E2; --t1-ikona-barva: #00A2DD; --t1-rokopis-senca: 0 2px 14px rgba(3,20,34,.95); /* Temna plast čez fotografijo: gore ostanejo vidne, napisi berljivi. */ --t1-zastor: linear-gradient(90deg, rgba(4,24,40,.80) 0%, rgba(4,24,40,.46) 50%, rgba(4,24,40,.62) 100%); /* t2 — SEO in GEO s prikazom iskalnika */ --t2-karta-rad: 14px; --t2-graf: clamp(26px, 2.2vw, 34px); --t2-stolpec: 92px; /* t3 — rešitve po meri z napravama */ --t3-okvir: #0D2B44; --t3-radij: 12px; --t3-senca: 0 34px 54px -20px rgba(8,32,52,.55); --t3-pusc-s: 108px; /* širina rokopisne puščice */ --t3-pusc-v: 58px; } /* ============================================================ POSKUS »KAKO DELAMO« — tri različice združitve vsebine korakov z obliko pasu »Naš pristop«. Predogled: /poskus-kako-delamo/. ============================================================ */ .mmnk{ --kd-ozadje: linear-gradient(135deg, #10405F 0%, #082A43 48%, #051A2B 100%); --kd-karta-rad: 16px; --kd-karta-odmik: 26px 22px 26px; --kd-razmik: 18px; --kd-krog: 58px; --kd-krog-rob: #BCE0F2; --kd-ikona: 28px; --kd-do-stevilke: 18px; --kd-do-naslova: 6px; --kd-do-opisa: 6px; --kd-stevilka: 12px; --kd-naslov: var(--f-h3); --kd-opis: 14.5px; --kd-crta: rgba(255,255,255,.28); --kd-uvod: #BFD5E6; } /* ============================================================ POSKUS »KAKO DELAMO« — časovni trak na modri podlagi (d, e, f). Brez belih kartic: krogci in črta ležijo neposredno na modrem. ============================================================ */ .mmnk{ --kt-krog: 62px; --kt-ikona: 28px; --kt-krog-rob: rgba(255,255,255,.30); --kt-krog-polnilo: rgba(255,255,255,.06); --kt-crta: rgba(255,255,255,.26); --kt-do-stevilke: 20px; --kt-stevilka: 12px; --kt-naslov: var(--f-h3); --kt-opis: 14.5px; --kt-do-naslova: 6px; --kt-do-opisa: 6px; --kt-razmik: 22px; /* med koraki v vrsti */ --kt-razmik-nav: 30px; /* med koraki v navpičnem traku */ --kt-blok: 118px; /* višina napisa pri izmenični postavitvi */ --kt-do-traku: var(--r-8); } /* Pogosta vprašanja v obliki kartic (.mm-faq-kartice). */ .mmnk{ --faqk-stolpci: 2; /* vprašanja v dveh stolpcih */ --faqk-razmik: 10px; --faqk-razmik-x: var(--r-5); /* vrzel med stolpcema */ --faqk-radij: 10px; --faqk-odmik: 16px 20px; --faqk-vprasanje: var(--f-h5); --faqk-ikona: 18px; --faqk-do-teksta: 14px; --faqk-do-mreze: 26px; --faqk-vse: var(--f-drobna); } /* Članek v blogu (.mmnk-clanek). Besedilo je večje in bolj zračno kot na storitvenih straneh, ker se bere od začetka do konca in ne preleti. Naslovi so manjši od tistih v pasovih — tam nosijo pas, tu delijo tekst. */ .mmnk{ --cl-sirina: 1500px; /* oder članka: naslovni pas, slika, telo */ --cl-stolpec: 1000px; /* širina besedilnega stolpca */ --cl-stolpec-tab: 1280px; /* članek s preglednicami: brez kazala, širše */ --cl-kazalo: 270px; /* stranski stolpec s kazalom */ --cl-razmik: clamp(36px, 4vw, 76px); /* med kazalom in besedilom */ --cl-f-h1: clamp(32px, 3.3vw, 50px); --cl-f-h2: clamp(22.5px, 1.85vw, 28px); --cl-f-h3: 22px; /* enako kot na straneh */ --cl-f-uvod: clamp(19px, 1.45vw, 22px); --cl-f-telo: 18px; --cl-f-drobno: 14px; --cl-vrstica: 1.72; /* višina vrstice v besedilu */ --cl-vrstica-h: 1.2; /* v naslovih */ --cl-razmik-h1: -.028em; --cl-razmik-h2: -.022em; --cl-nad-h2: clamp(38px, 3.4vw, 58px); /* zrak nad naslovom 2 */ --cl-nad-h3: clamp(26px, 2.2vw, 36px); --cl-do-odstavka: 16px; /* pod naslovom */ --cl-med-odstavki: 20px; --cl-med-seznam: 10px; --cl-vrstica-seznam: 1.5; /* vrstica v naštevanju je tesnejša kot v odstavku */ /* med postavkami naštevanja v članku */ --cl-slika-radij: var(--rad-l); --cl-slika-senca: var(--senca-mehka); --cl-slika-sirina: 820px; /* slike v besedilu niso širše od tega */ --cl-slika-zrak: clamp(30px, 3vw, 48px); --cl-podpis: var(--cl-f-drobno); --cl-okvir-radij: var(--rad-m); --cl-okvir-odmik: clamp(20px, 2vw, 28px); --cl-okvir-crta: 3px; /* debelina barvne črte ob poudarku */ --cl-znacka-radij: 999px; --cl-znacka-odmik: 7px 14px; } /* ── obrazci (Gravity Forms) ───────────────────────────────────────── Ena velikost za vsa polja, da je namig v besedilnem polju enak namigu v vnosni vrstici. 16 px tudi prepreči povečavo na iPhonu. */ :root { --ob-f-oznaka: 15px; /* napis nad poljem */ --ob-f-polje: 16px; /* vneseno besedilo in namig v vseh poljih */ --ob-f-pomoc: var(--f-drobna); /* pojasnilo pod poljem */ --ob-odmik: 13px 16px; } /* ── glave blokov, povezave blokov, napisi pod slikami (Milan, 28. 9. 2026) ── Podnaslov desno od naslova je povsod enak: 16,5 px, desno poravnan, zadnja vrstica na črti zadnje vrstice naslova. Povezava bloka (»Vse reference«, »Vprašajte nas«) ni več v slogu nadnaslova. */ :root { --glava-desno-f: var(--f-telo); --glava-desno-vrstica: 1.6; --glava-desno-sirina: 46ch; --glava-desno-barva: var(--barva-telo); --glava-desno-barva-temno: var(--barva-na-temnem); /* na modrem pasu skoraj bela */ --povezava-bloka-f: var(--f-telo); --povezava-bloka-barva: var(--barva-naslov); --povezava-bloka-krog: 36px; --povezava-bloka-krog-ozadje: var(--barva-znamka); --napis-f: var(--f-mala); --napis-sirina: 52ch; --napis-barva: var(--barva-telo); --napis-crta: var(--barva-znamka); --napis-odmik: var(--r-4); --slika-rob-senca: 0 1px 2px rgba(16, 38, 58, .06), 0 10px 30px rgba(16, 38, 58, .12); --slika-rob-obroba: 0 0 0 1px rgba(16, 38, 58, .08); } /* ── obrazci, videz (Milan, 28. 9. 2026: »stil form bolj atraktiven«) ── */ :root { --ob-kartica-ozadje: var(--pas-bela); --ob-kartica-senca: 0 1px 2px rgba(16, 38, 58, .05), 0 24px 60px rgba(13, 57, 92, .12); --ob-kartica-radij: var(--rad-l); --ob-trak: linear-gradient(90deg, var(--barva-znamka), var(--barva-znamka-svetla)); --ob-polje-ozadje: var(--nev-100); --ob-polje-rob: var(--nev-400); --ob-polje-radij: 12px; --ob-polje-visina: 54px; --ob-fokus-obroc: 0 0 0 4px color-mix(in srgb, var(--barva-znamka-svetla) 22%, transparent); /* Senca gumba »Pošlji« manjša in bledejša (Milan, 29. 9. 2026: »preveč se blešči«; prej 0 12px 26px, 45 %). */ --ob-gumb-senca: 0 6px 14px color-mix(in srgb, var(--barva-poudarek) 20%, transparent); } :root { /* Kontakt, »Kako do nas«: telefon in e-pošta poudarjena, naslov drugoten (Milan, 29. 9. 2026). Prej so bile vse štiri povezave 19 px. */ --kon-glavno-velikost: clamp(21px, 1.8vw, 25px); --kon-glavno-barva: var(--barva-znamka); --kon-stransko-velikost: 16px; --kon-stransko-teza: 600; } :root { /* Rokopis v pasu »Začnimo«: senca, da se bere tudi čez svetel del slike (monitor na prevajalcih, Milan, 29. 9. 2026). Prej 0 2px 12px, 50 %. */ --cta-rokopis-senca: 0 1px 3px rgba(4, 18, 32, .75), 0 2px 16px rgba(4, 18, 32, .8); --cta-med-odstavki: 12px; /* med odstavki opisa v pasu »Začnimo« */ /* Kartice sodelavcev na O nas (mms_ekipa, predlog 1, 29. 9. 2026). */ --clan-razmerje: 4 / 5; /* pokončen portret */ --clan-radij: 22px; --clan-senca: 0 22px 50px rgba(13, 57, 92, .16); --clan-preliv: linear-gradient(to top, rgba(6, 30, 48, .92) 0%, rgba(6, 30, 48, .6) 55%, transparent 100%); --clan-vrzel: var(--r-6); /* med karticami */ --clan-ime: 24px; /* ime sodelavca */ --clan-vloga: var(--paleta-cyan); /* vloga na temnem prelivu */ --zac-logo: 294px; /* logotip na strani Začnimo projekt (+40 %, prej 210 px) */ --zac-logo-tel: 238px; /* isto na telefonu (prej 170 px) */ --oder-pripis-tel-vrh: -32px; /* domača, telefon: rokopis nad vrhom prenosnika */ --oder-pripis-tel: 21px; --oder-dno-tel: var(--r-5); /* pod napravami, odkar rokopis stoji zgoraj */ /* Pasica za piškotke (Complianz, 29. 9. 2026). */ --pisk-sirina: 420px; --pisk-rob: 20px; /* od roba zaslona na namizju */ --pisk-odmik: 22px; /* notranji odmik */ --pisk-radij: 18px; --pisk-senca: 0 24px 60px rgba(8, 30, 52, .28), 0 4px 12px rgba(8, 30, 52, .12); --pisk-naslov: 18px; --pisk-besedilo: 14.5px; /* Plavajoč poziv na telefonu (dela/noga.php, 29. 9. 2026). */ --plav-rob: var(--r-4); /* od roba zaslona */ --plav-sirina: 480px; /* na tablici ne čez vso širino */ --plav-odmik: 6px; /* belo ohišje okoli gumbov */ --plav-tel: 48px; /* krog s slušalko */ --plav-napis: 15.5px; --plav-pod: 12.5px; --plav-senca: 0 10px 30px rgba(3, 20, 34, .22), 0 2px 6px rgba(3, 20, 34, .12); --plav-cas: .25s; --cta-rokopis-tel-odmik: var(--r-6); /* rokopis pod gumbom do 900 px */ --cta-rokopis-tel-nagib: -3deg; /* ena vrsta: manjši nagib kot na namizju (-8°) */ } :root { --heros-napr-viso-vecja: clamp(320px, 36vw, 560px); } /* večja slika v heroju (optimizacija, Milan 28. 9. 2026) */ /* Prihod naslovnega pasu domače strani (Milan, 28. 9. 2026: »hitra pro animacija«). */ :root { --hero-anim-cas: .75s; --hero-anim-korak: .08s; --hero-anim-krivulja: cubic-bezier(.16, 1, .3, 1); } /* ── blok »Zakaj aplikacija po meri« (28. 9. 2026) ─────────────────── */ :root { --pomeri-stolpca: minmax(0, .82fr) minmax(0, 1.18fr); --pomeri-razmik: clamp(16px, 2vw, 28px); --pomeri-odmik: 18px clamp(18px, 2vw, 28px); --pomeri-radij: var(--rad-l); --pomeri-l-ozadje: rgba(255, 255, 255, .05); --pomeri-l-crta: rgba(255, 255, 255, .10); --pomeri-l-besedilo: var(--barva-na-temnem-telo); --pomeri-d-ozadje: var(--pas-bela); --pomeri-d-crta: var(--nev-300); --pomeri-d-glava: linear-gradient(135deg, var(--barva-znamka), #0a6fb0); --pomeri-d-senca: 0 30px 70px rgba(0, 10, 25, .45); --pomeri-znak: 20px; } /* Večje besedilo v tablah »Standardna rešitev ali po meri« (Milan, 28. 9. 2026). */ :root { --pomeri-f: var(--f-telo); --pomeri-f-naslov: 18px; --pomeri-l-besedilo: rgba(255, 255, 255, .86) } /* ── stran »Začnimo projekt« (prenova 28. 9. 2026) ─────────────────── */ :root { --mmz-levo: clamp(380px, 38vw, 600px); /* širina temnega stolpca */ --mmz-temno: linear-gradient(160deg, #0b3a5c 0%, #07233a 55%, #051a2c 100%); --mmz-sij: radial-gradient(60% 45% at 20% 0%, rgba(0, 162, 221, .35), transparent 70%); --mmz-svetlo: var(--pas-mehka); --mmz-karta-senca: 0 1px 2px rgba(16, 38, 58, .05), 0 30px 80px rgba(13, 57, 92, .14); --mmz-karta-radij: 24px; --mmz-crta: var(--nev-300); --mmz-polje: var(--nev-100); --mmz-polje-rob: var(--nev-400); --mmz-poudarek: var(--barva-znamka); --mmz-izbrano: #e8f6fc; }