/* Theme Name: Avrora Theme URI: https://agencijakoncerti.si Author: Anze Petric Description: Tema za Agencijo Koncerti - predlog 6 "Avrora", paleta "Avrora Bela" (izbral Ziga 17. 8. 2026). Temna podlaga, beli/svetli poudarki; modra, vijolicna in roza samo kot dodatek. Klasicna tema: CPT-je (team, portfolio, services) registrira vticnik alamak_plugin, zato jih menjava teme ne skrije. Version: 1.0.0 Requires at least: 5.3 Requires PHP: 7.2 Text Domain: avrora */ /* ------------------------------------------------------------------ Paleta in slog sta 1:1 prenesena iz potrjenega predloga (dark-5.css). Postavitve NE spreminjaj tukaj - variante so bile zgrajene tako, da je telo CSS pri vseh bajtno enako, spremeni se samo :root. ------------------------------------------------------------------ */ :root{--bg:#070B14;--bg2:#0C1222;--ink:#F3F6FF;--ink2:#CFD7EA;--mut:#8F98B2;--mut2:#5F677E;--cy:#79C2E8;--mg:#D46FB2;--bl:#8098E8;--cy-rgb:198,226,255;--mg-rgb:255,222,242;--bl-rgb:208,219,255;--bg-rgb:7,11,20;--bg2-rgb:12,18,34;--hi-rgb:255,255,255;--glass:rgba(255,255,255,.055);--gbord:rgba(255,255,255,.13);--ongrad:#0A1020;--r:18px;--disp:'Sora',sans-serif;--body:'Albert Sans',sans-serif;--grad:linear-gradient(100deg,#FFFFFF,#EAF2FF 46%,#F3DDEF)} *{margin:0;padding:0;box-sizing:border-box} /* `overflow-x:clip` in NE `hidden`: hidden na `html` ubije `position:sticky` in lahko zlomi `scroll-behavior`. Clip samo odreze, kar sega cez, brez teh posledic. Krivec je okrasni `.hvis .glow` z `inset:-8%`, ki je stran raztegnil za 3 px na mobilnem in 34 px na tablici — dovolj, da se je dalo vleci vstran. */ html{scroll-behavior:smooth;overflow-x:clip} ::selection{background:var(--mg);color:#fff} body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} /* height:auto je OBVEZEN: WordPress slikam doda atributa width/height, in ce visina ni auto, jo brskalnik vzame iz atributa — takrat se `aspect-ratio` tiho ignorira. Brez tega so bile ploscice v galeriji visoke 600 px namesto 182 px. */ img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:1200px;margin:0 auto;padding:0 24px} /* aurora background */ .aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;background: radial-gradient(900px 480px at 12% -6%,rgba(var(--cy-rgb),.13),transparent 65%), radial-gradient(820px 500px at 92% 8%,rgba(var(--mg-rgb),.11),transparent 65%), radial-gradient(1000px 700px at 50% 115%,rgba(var(--bl-rgb),.10),transparent 60%)} .gtxt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .klbl{font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--cy)} /* ---------- header ---------- */ /* BREZ `backdrop-filter` — in to ni malenkost. Dodan je bil 31. 8., da vsebina ne preseva skozi glavo; a `backdrop-filter` naredi glavo za "containing block" vsem `position:fixed` potomcem. Mobilni meni (`.nav-links{position:fixed;inset:0}`) se je zato stisnil v 74 px visoko glavo, prve tri postavke so padle NAD zaslon in bile neklikljive — na vseh straneh (izmerjeno 1. 9. 2026, potrjeno z A/B). Presevanje resi vecja neprosojnost. */ header.site{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(var(--bg-rgb),.96);border-bottom:1px solid var(--gbord)} .hbar{display:flex;align-items:center;justify-content:space-between;height:74px;max-width:1320px;margin:0 auto;padding:0 24px} .brand{display:flex;align-items:center;gap:12px} .brand .mark{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:15px;color:var(--ongrad);box-shadow:0 0 22px rgba(var(--cy-rgb),.35)} .brand .bname{font-family:var(--disp);font-weight:700;font-size:16.5px;letter-spacing:.01em} /* POZOR: razred .nav-links izpise tudi jedro WordPressa v the_posts_pagination(). Brez predpone .hbar bi spodnje pravilo position:fixed;inset:0 (pod 1080px) paginacijo spremenilo v celozaslonsko prevleko izven vidnega polja. Zato so pravila glave omejena na .hbar, paginacija pa ima svoja pri "strani (paginacija)". */ .hbar .nav-links{display:flex;gap:6px;list-style:none;align-items:center} .hbar .nav-links a{font-size:13.5px;font-weight:500;color:var(--mut);padding:9px 13px;border-radius:10px;transition:.2s} .hbar .nav-links a:hover{color:var(--ink);background:var(--glass)} .hbar .nav-links a.on{color:var(--ongrad);background:var(--grad);font-weight:700} /* Logotip agencije. Vsebuje tudi napis, zato je visji od nekdanje kvadratne znacke. */ .brand.zlogotipom{gap:0} /* !important namenoma: WordPress sliki doda atributa width/height iz izvirnika (648x520), ta pa v nekaterih brskalnikih premagata visino iz CSS. */ img.custom-logo{height:54px!important;width:auto!important;max-width:200px; object-fit:contain;transition:opacity .2s} .brand:hover img.custom-logo{opacity:.82} @media(max-width:560px){img.custom-logo{height:42px!important}} /* v nogi vecji, ker je tam prostora dovolj */ .flogo{margin-bottom:14px} img.flogo-img{height:80px!important;width:auto!important;max-width:240px;object-fit:contain} .nav-toggle{display:none;background:none;border:0;cursor:pointer;z-index:70;width:42px;height:42px} .nav-toggle span{display:block;width:24px;height:2px;border-radius:2px;background:var(--ink);margin:5.5px auto;transition:.3s} @media(max-width:1080px){ .nav-toggle{display:block} /* visibility:hidden je nujen — sam transform elementa NE odstrani iz vrstnega reda tabulatorja, zato bi uporabnik tipkovnice tabuliral skozi 6 nevidnih postavk. */ .hbar .nav-links{position:fixed;inset:0;background:rgba(var(--bg-rgb),.97);flex-direction:column;justify-content:center;gap:10px;transform:translateY(-102%);visibility:hidden;transition:transform .4s cubic-bezier(.65,0,.35,1),visibility .4s;z-index:65} body.menu-open .hbar .nav-links{transform:none;visibility:visible} .hbar .nav-links a{font-family:var(--disp);font-weight:700;font-size:clamp(24px,5.6vw,36px);color:var(--ink);padding:10px 28px;border-radius:14px} .hbar .nav-links a.on{color:var(--ongrad)} body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} body.menu-open .nav-toggle span:nth-child(2){opacity:0} body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} } /* ---------- hero ---------- */ .hero{position:relative;padding:170px 0 90px;isolation:isolate} .hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} @media(max-width:980px){.hgrid{grid-template-columns:1fr;gap:44px}} .hero .klbl{display:inline-block;border:1px solid var(--gbord);background:var(--glass);padding:9px 18px;border-radius:999px;margin-bottom:26px} .hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,6.6vw,5.2rem);line-height:1.04;letter-spacing:-.025em;overflow-wrap:anywhere} .hero .sub{margin-top:22px;font-size:clamp(16px,1.9vw,19.5px);color:var(--mut);max-width:50ch;font-weight:300} .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} .btn{display:inline-flex;align-items:center;gap:9px;border-radius:14px;padding:15px 30px;font-weight:700;font-size:14.5px;transition:.25s;font-family:var(--disp)} .btn.grad{background:var(--grad);color:var(--ongrad);box-shadow:0 0 28px rgba(var(--cy-rgb),.3)} .btn.grad:hover{transform:translateY(-3px);box-shadow:0 6px 36px rgba(var(--mg-rgb),.4)} .btn.glass{border:1px solid var(--gbord);background:var(--glass);color:var(--ink)} .btn.glass:hover{border-color:var(--cy);color:var(--cy)} .hvis{position:relative} .hvis .ph{border-radius:26px;overflow:hidden;border:1px solid var(--gbord);position:relative} .hvis .ph img{width:100%;aspect-ratio:4/4.6;object-fit:cover;filter:saturate(1.05) contrast(1.03)} .hvis .ph:after{content:'';position:absolute;inset:0;background:linear-gradient(200deg,rgba(var(--cy-rgb),.16),transparent 45%,rgba(var(--mg-rgb),.18));mix-blend-mode:screen} .hvis .glow{position:absolute;inset:-8%;z-index:-1;background:radial-gradient(60% 60% at 50% 50%,rgba(var(--cy-rgb),.16),transparent 70%)} .hvis .chipf{position:absolute;left:-14px;bottom:26px;background:rgba(var(--bg2-rgb),.92);border:1px solid var(--gbord);border-radius:14px;padding:13px 20px;font-family:var(--disp);font-weight:700;font-size:14px;box-shadow:0 8px 30px rgba(0,0,0,.5)} .hvis .chipf b{color:var(--cy)} @media(max-width:560px){.hvis .chipf{left:8px}} /* ---------- ticker ---------- */ .marq{overflow:hidden;border-block:1px solid var(--gbord);padding:20px 0;background:rgba(var(--hi-rgb),.02)} .marq .inner{display:flex;gap:40px;width:max-content;animation:roll 48s linear infinite} .marq span{font-family:var(--disp);font-weight:700;font-size:17px;white-space:nowrap;color:var(--mut)} .marq span:nth-child(4n+1){color:var(--ink)} .marq b{color:var(--mg);align-self:center;font-size:9px} @keyframes roll{to{transform:translateX(-50%)}} /* ---------- sections ---------- */ section{padding:96px 0} .shead{margin-bottom:48px;display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap} .shead h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4.4vw,3.1rem);letter-spacing:-.02em;line-height:1.08} .shead .klbl{display:block;margin-bottom:12px} .shead .lead{color:var(--mut);max-width:50ch;font-weight:300} /* glass card base */ .gcard{background:var(--glass);border:1px solid var(--gbord);border-radius:var(--r);backdrop-filter:blur(8px)} /* services */ .svcs{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:860px){.svcs{grid-template-columns:1fr}} .svc{padding:36px 32px;position:relative;overflow:hidden;transition:.3s;display:flex;flex-direction:column;gap:13px} .svc:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:.55;transition:.3s} .svc:hover{transform:translateY(-5px);border-color:rgba(var(--cy-rgb),.4);box-shadow:0 14px 44px rgba(0,0,0,.45)} .svc:hover:before{opacity:1} .svc .sn{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--mg)} .svc h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.25rem,2.3vw,1.65rem);letter-spacing:-.01em} .svc p{color:var(--mut);font-size:15.5px;font-weight:300;flex:1} .svc .go{font-weight:700;font-size:13.5px;color:var(--cy);font-family:var(--disp)} .svc .go:after{content:' →';transition:.2s} .svc:hover .go:after{padding-left:5px} /* stats */ .stats{border-block:1px solid var(--gbord);background:rgba(var(--hi-rgb),.02)} .stats .row{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center;padding:64px 0} @media(max-width:860px){.stats .row{grid-template-columns:1fr 1fr;gap:40px 16px}} .stat b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(2.3rem,4.8vw,3.9rem);letter-spacing:-.02em;line-height:1.05;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .stat span{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)} /* logos */ .logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px} /* * ENAKE PLOSCICE (narocnikov mail 28. 8. 2026: »povsod lepo s napisi obcin enake * ploscice«). Vse ploscice so enako velike; razlicna je samo velikost slike ZNOTRAJ * njih. Drugace ne gre: pri isti velikosti slike je pokoncen grb videti dvakrat vecji * od tankega napisa, zato ostaja opticna izenacitev po obliki — a okvir je enoten. * * Prej sta bili dve odstopanji, ki ju zdaj ni vec: * - `o-zelosirok` je zasedel DVE mesti v mrezi, * - `o-navpicen` je imel visjo ploscico (136 px proti 96 px). * Visina 124 px je izbrana tako, da navpicni logotip (grb zgoraj, ime spodaj) se vedno * dobi ~96 px slike — pri manj je ime neberljivo. */ .logos .lg{background:#fff;border-radius:14px;padding:14px 16px;display:grid;place-items:center;min-height:124px;opacity:.9;transition:.25s} .logos .lg:hover{opacity:1;transform:translateY(-3px);box-shadow:0 0 26px rgba(var(--cy-rgb),.25)} /* Optična izenačitev: pri isti višini je pokončen grb videti veliko večji od širokega napisa, zato ima vsaka oblika svojo mejo. Razred doda PHP iz razmerja slike. */ .logos .lg img{width:auto;max-width:100%;object-fit:contain} /* Navpicni logotip (grb zgoraj, ime spodaj): dobi najvec visine od vseh, ker mora biti ime pod grbom berljivo. Ploscica pa je enaka kot pri vseh ostalih. */ .logos .lg.o-navpicen img{max-height:96px} /* Grb + ime v besedilu (obcine brez uradnega logotipa z imenom). Vodoravna postavitev, da se ujema z Medvodami, ki imajo ime ob grbu tudi v sami datoteki. */ .logos .lg.o-zimenom{flex-direction:row;display:flex;align-items:center;justify-content:center;gap:11px} .logos .lg.o-zimenom img{max-height:52px;flex:0 0 auto} .logos .lg .lg-ime{font-family:var(--disp);font-weight:700;font-size:12.5px;line-height:1.25; color:#1b2540;text-align:left;letter-spacing:.01em;max-width:96px} .logos .lg.o-pokoncen img{max-height:72px} .logos .lg.o-obicajen img{max-height:62px} .logos .lg.o-sirok img{max-height:48px;max-width:94%} /* Zelo dolgi napisi (TIC Kranjska Gora 8,3:1, Koper 4,9:1, Enjoy Škofja Loka 4,7:1) ne dobijo vec dveh mest v mrezi — ploscice so enake. Namesto tega jim damo skoraj vso sirino ploscice, da so kljub temu cim vecji. */ .logos .lg.o-zelosirok img{max-height:38px;max-width:100%} .logos .lg.o-zelosirok{padding-left:8px;padding-right:8px} /* Negativ (bel/svetel logotip) bi bil na beli kartici neviden — dobi temno kartico. Prozvok in Koda Events objavljata samo negativ. */ .logos .lg.neg{background:#141B2E} /* Partner brez datoteke logotipa: imenska kartica, da mreza ni luknjasta. Kartica je BELA kot vse ostale — temna ploscica je pridrzana za negative (bele logotipe), sicer bi bila videti kot napaka in ne kot enotna mreza. */ .logos .lg.brez{background:#fff} .logos .lg.brez span{font-family:var(--disp);font-weight:700;font-size:14px;color:#1b2540;text-align:center;line-height:1.3;padding:0 6px} @media(max-width:560px){.logos{grid-template-columns:repeat(2,1fr)}} /* page hero */ .phero{position:relative;padding:150px 0 60px;isolation:isolate;overflow:hidden} .phero .bgimg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;filter:saturate(1.02)} .phero .bgimg:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--bg-rgb),.82),rgba(var(--bg-rgb),.55) 50%,var(--bg) 99%)} .phero .klbl{display:inline-block;border:1px solid var(--gbord);background:rgba(var(--bg-rgb),.55);padding:8px 16px;border-radius:999px;margin-bottom:18px} .phero h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:-.02em;line-height:1.04} .phero .psub{color:var(--mut);margin-top:12px;font-weight:300;font-size:17px} .phero.noimg{padding:150px 0 30px} /* prose */ .prose{max-width:780px} .prose p{margin-bottom:22px;color:var(--ink2);font-size:17.5px;font-weight:300} .prose strong{font-weight:700;color:var(--ink);text-shadow:0 0 18px rgba(var(--cy-rgb),.5)} /* cols/panel */ .cols{display:grid;grid-template-columns:1fr 330px;gap:56px;align-items:start} @media(max-width:920px){.cols{grid-template-columns:1fr}} .panel{padding:30px} .panel h3{font-family:var(--disp);font-weight:700;font-size:19px;margin-bottom:4px} .panel .tag{color:var(--mut);font-size:13px;margin-bottom:20px;font-weight:300} .panel ul{list-style:none;display:grid;gap:10px;margin-bottom:24px} .panel li a{display:block;background:rgba(var(--hi-rgb),.035);border:1px solid transparent;border-radius:12px;padding:11px 15px;font-size:14.5px;font-weight:500;transition:.2s} .panel li a:hover{border-color:var(--cy);color:var(--cy)} .panel li .lb{display:block;font-size:10.5px;letter-spacing:.2em;color:var(--mut);text-transform:uppercase;font-weight:600} /* bands */ /* .catnav (navigacija po zvrsteh) od 1. 9. 2026 nima klicatelja — /izvajalci/ zvrsti nima vec (narocnikovo navodilo). Pravila ostajajo, ce si premisli; enako kot avrora_logo_pas(). */ .catnav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:52px} .catnav a{border:1px solid var(--gbord);background:var(--glass);border-radius:999px;padding:9px 18px;font-size:13px;font-weight:600;transition:.2s} .catnav a:hover{border-color:var(--mg);color:var(--mg)} .cat{margin-bottom:64px} .cat .chead{display:flex;align-items:center;gap:14px;margin-bottom:26px} .cat .chead .idx{font-family:var(--disp);font-weight:800;font-size:13px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .cat .chead h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,2.7vw,1.85rem);letter-spacing:-.01em} .cat .chead .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--gbord),transparent)} .bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:1020px){.bgrid{grid-template-columns:repeat(3,1fr)}} @media(max-width:680px){.bgrid{grid-template-columns:repeat(2,1fr)}} .band{border-radius:var(--r);overflow:hidden;background:var(--glass);border:1px solid var(--gbord);transition:.25s} .band:hover{transform:translateY(-5px);border-color:rgba(var(--cy-rgb),.45);box-shadow:0 0 30px rgba(var(--cy-rgb),.18)} /* 3 : 2 — isto razmerje kot galerija in pretekli dogodki (mail 28. 8. 2026: »enako velike slike kot pretekli dogotki ali kot galerija«). Prej 4 : 3. Velikost `avrora-band` je zato 600x400; slicice je treba na strezniku regenerirati, sicer CSS samo obreze star 4 : 3 izrez. */ .band .ph{aspect-ratio:3/2;overflow:hidden;position:relative} .band .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:.35s} /* POPRAVEK 9.9.2026: narocnik "glej da se na slikah vidi vse v obraz" -- obreza je ZAPECENA V DATOTEKO (glej add_image_size('avrora-band',...) v functions.php, komentar tam), zato tu CSS object-position NE more pomagati (slika, ki jo brskalnik dobi, je ze samo 600x400 izrez -- ni vec kaj premikati). Pravi popravek je spremenjena gravitacija obreza pri registraciji velikosti (center->top) + polna regeneracija na strezniku. Dokaz napake pred popravkom: scripts/crop-preveri/jan-plestenjak-crop.jpg (661x900 pokoncen izvirnik je izgubil CEL obraz, obreza je pokazala samo brado/mikrofon/torzo). */ .band:hover .ph img{filter:saturate(1.1);transform:scale(1.04)} .band .nm{padding:12px 15px;font-family:var(--disp);font-weight:700;font-size:13.5px} /* events */ /* Ploscice v isti vrstici so ENAKO VISOKE (privzeti `stretch`) — tako je narocnik zelel, ker se drugace vrsta lomi po dolzini besedila. Praznina, ki pri tem nastane pod krajsim naslovom, ni pustena spodaj: `.ev` je navpicni flex, napis raste, gumb z albumom pa se prilepi na dno (`margin-top:auto` nize). Kartica je zato videti namerna, ne nedokoncana. */ .egrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:1020px){.egrid{grid-template-columns:repeat(3,1fr)}} @media(max-width:680px){.egrid{grid-template-columns:repeat(2,1fr)}} /* Flex mora tec skozi VSE tri nivoje (figure -> figcaption -> gumb), sicer se `margin-top:auto` na gumbu nima ob kaj opreti in ostane pri besedilu. */ .ev{border-radius:var(--r);overflow:hidden;background:var(--glass);border:1px solid var(--gbord);transition:.25s;display:flex;flex-direction:column} .ev:hover{transform:translateY(-4px);border-color:rgba(var(--mg-rgb),.45);box-shadow:0 0 26px rgba(var(--mg-rgb),.16)} .ev img{aspect-ratio:1;width:100%;object-fit:cover;filter:saturate(.88);transition:.3s} /* Galerija ima siroke koncertne fotografije, zato 3:2; pretekli dogodki imajo izvirnike 500x500 in ostanejo kvadratni, sicer bi jim izgubili tretjino visine. */ #fotografije .ev img,#facebook .ev img{aspect-ratio:3/2} /* Facebookovi plakati preteklih dogodkov: isto razmerje kot pri prihajajocih (16:9), sicer jim kvadrat odreze tretjino. Lokalnih 66 ostane kvadratnih — njihovi izvirniki SO kvadratni (500x500) in bi jih 16:9 razpolovil. */ #pretekli .ev-fb img{aspect-ratio:16/9} .ev:hover img{filter:saturate(1.08)} .ev figcaption{padding:11px 14px;font-size:12.8px;font-weight:500;line-height:1.4;color:var(--ink2);flex:1 1 auto;display:flex;flex-direction:column} /* Datum se izpise SAMO pri dogodkih iz Facebooka — pri arhivu s stare strani datum v bazi ni datum dogodka, ampak datum nalaganja, zato ga tam namenoma ni. */ .ev figcaption .evdt{display:block;margin-top:3px;font-size:11.5px;font-weight:600;color:var(--cy);letter-spacing:.02em;flex:0 0 auto} /* Povezava na album fotografij, ki ga agencija objavi po dogodku. Prikaze se samo tam, kjer album res obstaja — ujemanje je sklepano, ne zajamceno. */ /* Na ozkih zaslonih je ploscica siroka kaksnih 160 px in napis se prelomi v tri vrstice. Levo poravnan je bil videti raztrgan; sredinsko poravnan in z rahlo tesnejso vrstico se prelomi cisto. */ .ev figcaption .evfoto{display:block;margin-top:auto;padding-top:9px;font-size:11.5px;font-weight:700; color:var(--ink);transition:.2s;text-align:center;line-height:1.35} .ev figcaption .evfoto span{display:inline-block;background:var(--glass);border:1px solid var(--gbord); border-radius:999px;padding:5px 12px} .ev figcaption .evfoto:hover{border-color:var(--cy);color:var(--cy)} .ev a:hover img{filter:saturate(1) brightness(1.06)} /* usp */ .usp{display:grid;grid-template-columns:1fr 1fr;gap:14px;list-style:none} @media(max-width:760px){.usp{grid-template-columns:1fr}} .usp li{background:var(--glass);border:1px solid var(--gbord);border-radius:14px;padding:17px 22px;font-weight:600;font-size:14.5px;display:flex;gap:14px;align-items:center} .usp li:before{content:'◆';background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:11px} /* team */ .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media(max-width:860px){.tgrid{grid-template-columns:1fr}} .member{padding:38px} .member .mono{width:68px;height:68px;border-radius:20px;background:var(--grad);color:var(--ongrad);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:23px;margin-bottom:22px;box-shadow:0 0 26px rgba(var(--cy-rgb),.3)} .member h3{font-family:var(--disp);font-weight:700;font-size:23px} .member .rl{color:var(--mg);font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin:6px 0 16px} .member p{color:var(--mut);font-size:15.5px;font-weight:300} /* form */ .fwrap{display:grid;grid-template-columns:330px 1fr;gap:56px} @media(max-width:920px){.fwrap{grid-template-columns:1fr}} .cform{display:grid;gap:18px} .cform label span{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:8px} .cform input,.cform textarea{width:100%;background:var(--glass);border:1px solid var(--gbord);border-radius:12px;color:var(--ink);padding:14px 16px;font-family:var(--body);font-size:16px;transition:.25s} .cform input:focus,.cform textarea:focus{outline:0;border-color:var(--cy);box-shadow:0 0 18px rgba(var(--cy-rgb),.22)} /* empty */ .empty{padding:74px 40px;text-align:center;position:relative;overflow:hidden} .empty:before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(var(--mg-rgb),.14),transparent 70%);top:-200px;right:-120px} .empty h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,4.4vw,2.8rem);letter-spacing:-.01em;margin:18px 0 10px} .empty p{color:var(--mut);margin-bottom:28px;font-weight:300} /* benefits */ .bens{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:860px){.bens{grid-template-columns:1fr}} .ben{padding:34px 30px;transition:.25s;position:relative;overflow:hidden} .ben:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:.5} .ben:hover{transform:translateY(-4px);border-color:rgba(var(--cy-rgb),.4)} .ben .bn{font-family:var(--disp);font-weight:800;font-size:13px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px} .ben h3{font-family:var(--disp);font-weight:700;font-size:19px;margin-bottom:10px} .ben p{color:var(--mut);font-size:15px;font-weight:300} /* cta */ .ctaband .cwrap{position:relative;overflow:hidden;border-radius:28px;border:1px solid var(--gbord);background:var(--bg2);padding:clamp(44px,6vw,84px);text-align:center} .ctaband .cwrap:before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(var(--cy-rgb),.16),transparent 70%);top:-240px;left:-160px} .ctaband .cwrap:after{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(var(--mg-rgb),.14),transparent 70%);bottom:-240px;right:-160px} .ctaband h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4.8vw,3.4rem);letter-spacing:-.02em;position:relative;z-index:1} .ctaband p{color:var(--mut);margin:14px 0 32px;position:relative;z-index:1;font-weight:300} .ctaband .cta-row{justify-content:center;position:relative;z-index:1} /* footer */ footer.site{border-top:1px solid var(--gbord);background:rgba(var(--hi-rgb),.02);margin-top:60px} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding:60px 0 44px} @media(max-width:860px){.fgrid{grid-template-columns:1fr}} .fgrid h4{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:16px} .fgrid p,.fgrid a{color:var(--mut);font-size:15px;font-weight:300} .fgrid ul{list-style:none;display:grid;gap:9px} .fgrid a:hover{color:var(--cy)} /* Pasica bonitetne odlicnosti v nogi. Svetla podlaga, ker je pasica narejena za bele strani in bi na temni izginila. POPRAVEK 10.9.2026 (drugi): narocnik "daj na sredino... spodaj na sredini cez vse 3 polja" -- .fbonitet-vrsta je zdaj svoja vrstica POD .fgrid (ne vec znotraj prvega stolpca), na sredino cele noge; slika zamenjana z vecjo "Si Horizontal" (600x100, prej "Si Horizontal 2" 400x100 -- narocnik "zamenjaj s prvo, saj je vecja"). */ .fbonitet-vrsta{display:flex;justify-content:center;padding:8px 0 32px} .fbonitet{display:inline-block;background:#fff;border-radius:10px; padding:10px 14px;line-height:0} .fbonitet img{width:100%;max-width:440px;height:auto} /* Logotip Adria Tribute stoji na mestu naslova razdelka, zato prevzame njegov ritem. */ .atlogo{margin:0 0 6px} .atlogo img{width:auto;max-width:min(320px,72vw);height:auto} .fbrand{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.01em;margin-bottom:10px;color:var(--ink)} /* --mut2 (#5F677E) da na tem ozadju razmerje 3,38:1 — pod pragom WCAG AA (4,5:1). --mut (#8F98B2) da 6,8:1. */ .fbot{border-top:1px solid var(--gbord);padding:20px 0;font-size:12.5px;color:var(--mut);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap} /* reveal — skrivanje velja SAMO, ce je JS zagnan (html.js doda header.php). Brez tega bi bila ob izklopljenem JS vsa vsebina strani nevidna. */ .js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease} .js .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} .marq .inner{animation:none} html{scroll-behavior:auto} *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* V nacinu visokega kontrasta brskalnik odstrani ozadja — prelivno besedilo s color:transparent bi postalo nevidno. */ @media(forced-colors:active){ .gtxt,.stat b,.usp li:before,.fgrid h4,.ph-empty span{color:CanvasText;-webkit-text-fill-color:CanvasText;background:none} } /* ------------------------------------------------------------------ Dodatki teme (niso bili v staticnem predlogu, a jih WordPress rabi) ------------------------------------------------------------------ */ /* dostopnost: preskok na vsebino */ .preskoci{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--grad);color:var(--ongrad);font-family:var(--disp);font-weight:700;border-radius:0 0 12px 0} .preskoci:focus{left:0} :focus-visible{outline:2px solid var(--cy);outline-offset:3px} /* nadomestek, kadar objava nima slike — mreza ne sme razpasti */ .ph-empty{aspect-ratio:3/2;display:grid;place-items:center;background:var(--glass);border-bottom:1px solid var(--gbord)} .ph-empty span{font-family:var(--disp);font-weight:800;font-size:28px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hvis .ph-empty{aspect-ratio:4/4.6} .ev .ph-empty{aspect-ratio:1} #fotografije .ev .ph-empty,#facebook .ev .ph-empty{aspect-ratio:3/2} /* meni iz WordPressa: aktivna postavka (WP doda svoje razrede) */ .hbar .nav-links .current-menu-item > a, .hbar .nav-links .current_page_item > a{color:var(--ongrad);background:var(--grad);font-weight:700} .hbar .nav-links li{list-style:none} /* meni v nogi */ .fmeni{list-style:none;display:grid;gap:9px;margin:0;padding:0} .fmeni a{color:var(--mut);font-size:15px;font-weight:300} .fmeni a:hover{color:var(--cy)} /* poziv na druzbena omrezja (Word: prihajajoci dogodki -> FB/IG) */ .soc-poziv{color:var(--mut);font-weight:300;margin:10px 0 22px;position:relative;z-index:1} .soc-poziv a{color:var(--cy);text-decoration:underline;text-underline-offset:3px} /* WordPress obvezni razredi za vsebino iz urejevalnika */ .prose img,.prose iframe{max-width:100%;height:auto;border-radius:14px} .prose h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);margin:34px 0 14px;letter-spacing:-.02em} .prose h3{font-family:var(--disp);font-weight:700;font-size:1.3rem;margin:26px 0 10px} .prose ul,.prose ol{margin:0 0 22px 22px;color:var(--ink2);font-weight:300} .prose li{margin-bottom:8px} .prose a{color:var(--cy);text-decoration:underline;text-underline-offset:3px} .prose blockquote{border-left:2px solid var(--cy);padding-left:20px;margin:24px 0;color:var(--ink2)} .prose table{width:100%;border-collapse:collapse;margin-bottom:22px} .prose th,.prose td{padding:10px 12px;border-bottom:1px solid var(--gbord);text-align:left} .alignleft{float:left;margin:0 22px 16px 0} .alignright{float:right;margin:0 0 16px 22px} .aligncenter{display:block;margin:0 auto 20px} .wp-caption{max-width:100%} .wp-caption-text,.wp-element-caption{color:var(--mut);font-size:13px;margin-top:6px} .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Kontakt: v maketi ima panel h3; tu je naslov agencije h2 (raven pod h1). */ .panel h2{font-family:var(--disp);font-weight:700;font-size:21px;margin-bottom:4px} @media(max-width:920px){.fwrap{grid-template-columns:1fr;gap:30px}} /* Privolitev za piškotke — v slogu teme, ne privzeti videz vtičnika */ .ck{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:18px; transform:translateY(120%);transition:transform .35s cubic-bezier(.65,0,.35,1)} .ck.vidna{transform:none} .ck-box{max-width:1100px;margin:0 auto;padding:22px 26px;display:grid; grid-template-columns:1fr auto;gap:22px;align-items:center; background:rgba(var(--bg2-rgb),.97);box-shadow:0 -8px 40px rgba(0,0,0,.45)} .ck-txt h2{font-family:var(--disp);font-weight:700;font-size:17px;margin-bottom:6px} .ck-txt p{color:var(--mut);font-size:14.5px;font-weight:300;line-height:1.55;max-width:74ch} .ck-txt a{color:var(--cy);text-decoration:underline} .ck-btn{display:flex;gap:10px;flex-wrap:wrap} .ck-btn .btn{padding:12px 22px;font-size:13.5px;cursor:pointer} @media(max-width:820px){ .ck-box{grid-template-columns:1fr;gap:16px;padding:20px} .ck-btn .btn{flex:1;justify-content:center} } @media(prefers-reduced-motion:reduce){.ck{transition:none}} .ck-h{font-family:var(--disp);font-weight:700;font-size:17px;margin-bottom:6px;color:var(--ink)} .fgrid .fh{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:16px} /* Vgrajen video se nalozi sele po privolitvi — nadomestek ima enako razmerje. */ .vid-cakalnica{padding:26px;text-align:center} .vid-cakalnica p{color:var(--mut);font-size:14.5px;font-weight:300;margin-bottom:14px} .prose iframe[data-src]{display:none} /* Podatki o podjetju (noga in kontakt) — zakonska zahteva ZEPT */ .fpod,.kpod{font-style:normal;display:grid;gap:3px;margin-top:12px; font-size:14px;color:var(--mut);font-weight:300;line-height:1.55} .fpod .fp-firma,.kpod .fp-firma{color:var(--ink2);font-weight:500} .fpod .fp-st{margin-top:7px;font-size:12.5px;color:var(--mut2)} .kpod{margin-bottom:18px} /* Povečava fotografij v galeriji */ .egrid a.ak-vecja{display:block;cursor:zoom-in} .ak-lb{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center; background:rgba(var(--bg-rgb),.96);padding:32px 64px} .ak-lb.viden{display:flex} .ak-lb-f{max-width:min(1400px,92vw);max-height:88vh;margin:0;display:flex;flex-direction:column;gap:12px} .ak-lb-f img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain; border-radius:var(--r);box-shadow:0 20px 70px rgba(0,0,0,.6)} .ak-lb-n{text-align:center;font-size:13px;color:var(--mut);font-family:var(--disp);font-weight:600;letter-spacing:.1em} .ak-lb button{position:absolute;background:var(--glass);border:1px solid var(--gbord);color:var(--ink); border-radius:999px;cursor:pointer;display:grid;place-items:center;transition:.2s;font-family:var(--disp)} .ak-lb button:hover{border-color:var(--cy);color:var(--cy)} .ak-lb-x{top:22px;right:22px;width:46px;height:46px;font-size:26px;line-height:1} .ak-lb-p,.ak-lb-n2{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:30px;line-height:1} .ak-lb-p{left:14px} .ak-lb-n2{right:14px} body.ak-lb-odprt{overflow:hidden} @media(max-width:700px){ .ak-lb{padding:16px} .ak-lb-p,.ak-lb-n2{width:44px;height:44px;font-size:24px} .ak-lb-p{left:6px} .ak-lb-n2{right:6px} } @media(prefers-reduced-motion:reduce){.ak-lb button{transition:none}} /* Nadomestek, dokler vgrajeni Facebook ni odobren */ .fb-cakalnica{padding:26px;max-width:500px} .fb-cakalnica p{color:var(--mut);font-size:14.5px;font-weight:300;margin-bottom:16px} .fb-cakalnica button{cursor:pointer} iframe[data-src]{display:none} /* Dogodki s Facebooka, izrisani v slogu strani (ko je vpisan žeton) */ .fbev{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px} .fbe{display:block;overflow:hidden;transition:.25s} .fbe:hover{transform:translateY(-4px);box-shadow:0 0 30px rgba(var(--cy-rgb),.2)} .fbe-ph{aspect-ratio:16/9;overflow:hidden;background:var(--glass)} .fbe-ph img{width:100%;height:100%;object-fit:cover} .fbe-tx{padding:20px 22px 24px} .fbe-dt{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cy);margin-bottom:8px} .fbe-tx h3{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.25;margin-bottom:6px} .fbe-tx .tag{color:var(--mut);font-size:14px;font-weight:300} @supports not (aspect-ratio: 1){.fbe-ph{position:relative;padding-top:56.25%}.fbe-ph img{position:absolute;inset:0}} /* Dogodki: vgrajena Facebook stran + pojasnilo ob strani */ .fbwrap{display:grid;grid-template-columns:500px 1fr;gap:34px;align-items:start} .fbplug{width:100%;max-width:500px;border-radius:var(--r);overflow:hidden;background:var(--glass)} .fbnote{padding:30px} .fbnote h3{font-family:var(--disp);font-weight:700;font-size:20px;margin-bottom:12px} .fbnote p{color:var(--mut);font-weight:300} .fbnote .tag{font-size:14.5px} .fbnote .tag a{color:var(--cy);text-decoration:underline} @media(max-width:900px){.fbwrap{grid-template-columns:1fr}.fbplug{max-width:100%}} /* Sidra ne smejo pristati pod pritrjeno glavo. */ .cat,.ev,#vsebina,:target{scroll-margin-top:96px} /* kontaktni obrazec — polja so bila privzeta CF7, brez sloga */ .ak-polja{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} .wpcf7 p{margin:0 0 16px} .wpcf7 label{display:block;font-size:13.5px;font-weight:600;color:var(--ink2);margin-bottom:7px;font-family:var(--disp)} .wpcf7 label .ob{color:var(--mg)} .wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel], .wpcf7 input[type=number],.wpcf7 input[type=date],.wpcf7 select,.wpcf7 textarea{ width:100%;background:var(--glass);border:1px solid var(--gbord);border-radius:12px; padding:13px 15px;color:var(--ink);font-family:var(--body);font-size:15.5px;transition:.2s} .wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{ outline:none;border-color:var(--cy);box-shadow:0 0 0 3px rgba(var(--cy-rgb),.16)} .wpcf7 input::placeholder,.wpcf7 textarea::placeholder{color:var(--mut2)} .wpcf7 select option{background:var(--bg2);color:var(--ink)} .wpcf7 textarea{resize:vertical;min-height:130px} .ak-privol{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--mut);line-height:1.5} .ak-privol input[type=checkbox]{margin-top:4px;width:17px;height:17px;accent-color:var(--cy);flex:0 0 auto} .ak-privol .wpcf7-list-item{margin:0} .ak-privol a{color:var(--cy);text-decoration:underline} .wpcf7 input[type=submit]{background:var(--grad);color:var(--ongrad);border:0;border-radius:14px; padding:15px 30px;font-family:var(--disp);font-weight:700;font-size:14.5px;cursor:pointer;transition:.25s; box-shadow:0 0 28px rgba(var(--cy-rgb),.3)} .wpcf7 input[type=submit]:hover{transform:translateY(-3px)} .wpcf7-not-valid-tip{color:var(--mg);font-size:13px;margin-top:5px;display:block} .wpcf7-response-output{border:1px solid var(--gbord)!important;border-radius:12px;padding:14px 16px!important; margin:18px 0 0!important;background:var(--glass);color:var(--ink2);font-size:14.5px} @media(max-width:640px){.ak-polja{grid-template-columns:1fr}} /* Adria Tribute (naslovnica) */ .tribute .trib{display:grid;grid-template-columns:1.35fr .65fr;gap:38px;align-items:center} .tribute h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4.4vw,3.1rem);letter-spacing:-.02em;margin:10px 0 16px} .tribute p{color:var(--mut);max-width:62ch;font-weight:300} .tribute .tsub{margin-top:12px;color:var(--ink2);font-weight:500} .tribute .cta-row{margin-top:26px} .tribute .tnote{padding:22px;border-radius:var(--r)} .tribute .tnote p{font-size:14.5px;color:var(--ink2);max-width:none} .tribute .tnote strong{color:var(--cy)} @media(max-width:920px){.tribute .trib{grid-template-columns:1fr;gap:26px}} /* strani (paginacija) — jedro WP izpise .navigation.pagination > .nav-links */ .navigation.pagination{margin-top:40px;display:flex;justify-content:center} .navigation.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0;list-style:none;position:static;transform:none;visibility:visible;background:none;inset:auto;z-index:auto} .navigation.pagination .page-numbers{padding:10px 15px;border-radius:10px;border:1px solid var(--gbord);margin:0 4px;font-weight:600;font-size:14px;color:var(--ink)} .navigation.pagination .page-numbers.current{background:var(--grad);color:var(--ongrad)} /* 404 */ .err404 .empty{text-align:center} /* sidro iz 301 preusmeritve (/team// -> /dogodki/#) — kratka osvetlitev. Pravilo je zivo in ga uporablja stran Dogodki, ne Galerija — ne brisi ga z njo. */ .ev.poudarjen{outline:2px solid var(--cy);outline-offset:4px;animation:poud 2.4s ease-out 1} @keyframes poud{0%{box-shadow:0 0 0 0 rgba(var(--cy-rgb),.55)}100%{box-shadow:0 0 0 26px rgba(var(--cy-rgb),0)}} @media(prefers-reduced-motion:reduce){.ev.poudarjen{animation:none}} /* glava ob drsenju */ header.site.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.45)} /* ---------- mobilne izjeme (najdene ob pregledu 20. 8. 2026) ---------- */ @media(max-width:480px){ /* .bgrid je ostal pri 2 stolpcih tudi na 375 px: kartica ~154 px, dolga imena ("TOMISLAV BRALIC IN KLAPA INTRADE") so se lomila v 3-4 vrstice in mreza je skakala. */ .bgrid{grid-template-columns:1fr} .egrid{grid-template-columns:repeat(2,1fr)} .band .nm{font-size:13px;overflow-wrap:anywhere;hyphens:auto} } @media(max-width:768px){ /* .hero in .phero sta imela 170/150 px odmika tudi na telefonu — cetrtina zaslona prazna. */ .hero{padding:112px 0 56px} /* * `.phero.noimg` je NUJEN poleg `.phero`. * Ima visjo specificnost (0,2,0 proti 0,1,0), zato je pravilo spodaj brez njega * preskocil in so strani brez naslovne slike — Dogodki, Galerija, Izvajalci — * na telefonu obdrzale 150 px odmika, medtem ko sta se Kontakt in Zaupajo nam * pomanjsala. Izmerjeno, ne ugibano: razlika je bila vidna samo pri delu strani. */ .phero,.phero.noimg{padding:104px 0 40px} .phero h1,.prose h1{overflow-wrap:anywhere} section{padding:60px 0} .cat{margin-bottom:42px} } /* * Vmesna stopnja za tablice. Pod 768 px je ritem ze zbit, nad 1020 px velja namizni * (96 px); vmes je bil do zdaj tudi namizni, kar je na 800-1000 px zaslonu prevec. * Namizje ostane NEDOTAKNJENO. */ @media(min-width:769px) and (max-width:1020px){ section{padding:74px 0} .phero,.phero.noimg{padding:128px 0 48px} .cat{margin-bottom:50px} } /* Dolga imena skupin in naslovi ne smejo siliti vodoravnega drsenja. */ h1,h2,h3,.band .nm,.prose{overflow-wrap:anywhere} /* ================================================================== LOGOTIPI NA TELEFONU TRETJIC ista past v tej datoteki: blok je bil najprej zapisan takoj za `.logos{...}` in ni imel ucinka, ker so `.o-zelosirok`, `.o-navpicen` in `.o-zimenom` zapisani nize in pri enaki specificnosti zmagajo po vrstnem redu. Odzivna pravila zato sodijo NA KONEC datoteke, ne k svojemu izhodiscnemu. ENAKE PLOSCICE TUDI TUKAJ (mail 28. 8. 2026). Prej so tri ploscice odstopale: Domzale in oba zelo siroka napisa so imeli celo vrsto, Gorenja vas pa svojo visino. Zdaj so vse enake; razlicna je samo velikost slike v njih. ================================================================== */ /* * Dva stolpca predpisemo izrecno. Racun: 390 px zaslona - 48 px odmika ovoja = 342 px. * Dva stolpca po `minmax(168px)` z razmikom 14 px potrebujeta 350 px — zmanjka 8 px in * `auto-fill` pade na en stolpec. * * Visina 120 px: ploscica je siroka 159 px, znotraj 12 px odmika ostane 135 px sirine. * Najzahtevnejsi je Domzale (1,46 : 1) — pri tej sirini je visok 92 px, zato mora * ploscica ponuditi vsaj toliko. */ @media(max-width:680px){ .logos{grid-template-columns:repeat(2,1fr);gap:10px} .logos .lg{padding:12px;min-height:120px} /* Navpicni (grb zgoraj, ime spodaj): dobi vso razpolozljivo visino, ker je od tega odvisno, ali je ime pod grbom sploh berljivo. */ .logos .lg.o-navpicen img{max-height:92px} .logos .lg.o-navpicen-ozek img{max-height:92px;max-width:100%} /* Grb + ime v besedilu: pri ozji ploscici gre ime POD grb, ne ob njega. */ .logos .lg.o-zimenom{flex-direction:column;gap:6px} .logos .lg.o-zimenom img{max-height:42px} .logos .lg .lg-ime{font-size:11.5px;text-align:center;max-width:none} .logos .lg.o-pokoncen img{max-height:60px} .logos .lg.o-obicajen img{max-height:54px} .logos .lg.o-sirok img{max-height:42px;max-width:96%} /* Zelo siroka napisa (TIC Kranjska Gora 232x28, Koper 381x78) sta tu najbolj na tesnem — dobita vso sirino ploscice, odmik ob strani se zato zmanjsa na 6 px. */ .logos .lg.o-zelosirok{padding-left:6px;padding-right:6px} .logos .lg.o-zelosirok img{max-height:34px;max-width:100%} } /* ================================================================== LOGOTIP ADRIA TRIBUTE V GLAVI + IKONE OB STEVILKAH (narocnik 1. 9., belo 2. 9. 2026) Oboje je zapisano NA KONCU datoteke namenoma (ista past kot pri logotipih zgoraj): odzivni blok za meni (max-width:1080px) je zapisan zgodaj in bi ga povozil. ================================================================== */ /* .hbar je space-between z dvema vidnima otrokoma; tretji otrok bi meni potisnil na sredino. margin-left:auto na nav-u ohrani meni desno, logotip pa stoji za njim. */ .hbar nav{margin-left:auto} /* Visina 22px = visina vrstice besedila v .nav-links (font-size 13.5px * line-height 1.65 podedovan iz body), zato je logotip vizualno enako velik kot sosednji napisi menija, ne vecji. Ob lebdenju opacity .82 — logotip je ze bel (glej opombo v header.php), zato zbledi v sivo tocno tako kot logotip agencije. */ .at-mark{margin-left:14px;flex-shrink:0;display:flex;align-items:center;transition:.2s} .at-mark img{height:22px!important;width:auto!important;max-width:200px;display:block} .at-mark:hover img{opacity:.82} @media(max-width:560px){.at-mark img{height:20px!important}} /* Ikona nad stevilko. .stat span (font-size 12px, barva --mut) zadene tudi span.ic, zato tu izrecno prepisemo velikost in barvo. */ .stat .ic{display:block;width:28px;height:28px;margin:0 auto 10px;color:var(--cy);font-size:0;letter-spacing:0} .stat .ic svg{width:100%;height:100%;display:block} /* Med 1081 in 1200 px je za sedem postavk menija in logotip tesno — malce ga stisnemo. */ @media(max-width:1200px){ .at-mark{margin-left:8px} .at-mark img{height:20px!important} } /* Telefon: prekrivalo odprtega menija je sam ul.nav-links (z-index 65). Logotip je zunaj ul-a, zato bi bil pod njim; s position:fixed in z-index 66 ga postavimo v odprt meni, pod postavke. visibility:hidden iz istega razloga kot pri postavkah. */ @media(max-width:1080px){ .at-mark{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);margin:0;z-index:66;visibility:hidden} .at-mark img{height:40px!important} body.menu-open .at-mark{visibility:visible} } /* Tri storitve (Svetovanje je z naslovnice umaknjeno, mail 1. 9. 2026) v dvostolpcni mrezi pustijo tretjo kartico samo v vrsti. Tri stolpce zapisemo TUKAJ, odzivno pravilo za 860 px pa ponovimo, ker bi ga sicer to pravilo povozilo (ista past kot zgoraj). */ .svcs{grid-template-columns:repeat(3,1fr)} @media(max-width:860px){.svcs{grid-template-columns:1fr}} /* ================================================================== IZVAJALCI (1. 9. 2026) — na koncu datoteke, ker odzivna in poznejsa pravila zmagajo po vrstnem redu (glej "TRETJIC ista past" zgoraj). ================================================================== */ /* Uvod: izmerjeno 96 px nad in 96 px pod besedilom + 96 px nad mrezo = 288 px praznine. Naslov je ze v junaku, zato uvod sedi tik pod njim, mreza tik pod uvodom. */ .uvod{padding:28px 0 8px} .uvod + .cat{padding-top:40px} /* Imenska kartica izvajalca brez zapisa: iste mere kot ostale, zacetnice namesto fotografije. */ .band.brez{cursor:default} .band.brez:hover{transform:none;box-shadow:none;border-color:var(--gbord)} .band .ph-empty{aspect-ratio:3/2;display:grid;place-items:center;background:var(--glass);border-bottom:1px solid var(--gbord)} .band .ph-empty span{font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:.04em;color:var(--mut)} /* Bendi Adria Tribute: mreza pod uvodom razdelka. */ .tribute .at-bandi{margin-top:38px} @media(max-width:680px){ .uvod{padding:18px 0 4px} .uvod + .cat{padding-top:24px} .tribute .at-bandi{margin-top:26px} } /* Adria Tribute kartice (.at-bandi): izvorne slike imajo zelo različna razmerja (0.8-2.4) * -- cover bi obrezal pomembno besedilo na promocijskih grafikah (poper 4. 9. 2026: "se ne vidi * celotnih napisov"). contain namesto cover: cela slika vedno vidna, brez obreza. */ .at-bandi .ph img{object-fit:contain;background:rgba(6,10,20,.35)} /* Galerija lightbox: img element se med odpiranji ponovno uporabi (glej assets/galerija.js) -- * brez tega je bila stara fotografija za trenutek vidna, dokler se nova ni nalozila (naročnik * 8.9.2026: "drugo je najprej povečalo prvo, nato se je spremenila v pravo"). Slika je nevidna * dokler se onload ne sprozi (nalozena razred), nato prehod. */ .ak-lb-f img{opacity:0;transition:opacity .15s ease} .ak-lb-f img.nalozena{opacity:1} /* ================================================================== KARUSEL IZVAJALCEV (8.–9. 9. 2026) — cilja ".bcarousel .bc-track", NE golo .bgrid, zato so vsi ostali .bgrid (Adria Tribute bendi na /izvajalci/ in drugod) nedotaknjena staticna mreza. Od 9. 9. 2026 uporabljeno na naslovnici (razdelek "Izbor", front-page.php) — glej avrora_assets v functions.php za pogoj vklopa JS-ja (is_front_page). Na /izvajalci/ je karusel istega dne razveljavljen (glej page-izvajalci.php), a ta CSS ostaja, ker ga uporablja naslovnica. Na koncu datoteke, ker poznejsa pravila zmagajo po vrstnem redu (glej opombo zgoraj "TRETJIC ista past"). ================================================================== */ /* * POPRAVEK 16.9.2026 (osmi krog -- PRAVI korenski vzrok vseh "karusel je prazen/rezina/pol * strani pokvarjene" prijav od 11.9. dalje): `.bc-track` je bil HKRATI element, ki reze * (`overflow-x:hidden`) IN element, ki ga JS premika (`transform`). Ce isti element reze * SVOJE prekoracujoce otroke, reze jih glede na SVOJ LASTEN, NEPREMAKNJEN polozaj (scrollLeft * ostane 0 za vedno, saj tega nikoli ne nastavljamo) -- torej je bila VIDNA VEDNO IZKLJUCNO * prva `.bc-page` (lokalni obseg [0, clientWidth]), noben drug. `transform` na TEM ISTEM * elementu je zato lahko samo PREMIKAL TO ISTO (edino vidno) vsebino po zaslonu -- na razlicne * zaslonske polozaje, NIKOLI pa ni razkril druge strani. Vsak "je slucajno pravilno" posnetek * je bil trenutek, ko je transform to isto vsebino pripeljal nazaj na naraven polozaj; vsak * "rezina"/"crno" posnetek je bil isti edini vidni delec, premaknjen deloma ali popolnoma izven * zaslona. Dokazano v živo (desktop, Chromium): `elementFromPoint()` znotraj vidnega obmocja * karusela je pri vsakem indeksu <> 0 vracal SAMO ozadje `.bcarousel`, nikoli kartico. * * PRAVI popravek: rezanje (`overflow:hidden`) mora biti na STABILNEM, NEPREMAKNJENEM predniku, * `transform` pa na LOCENEM, PREMAKLJIVEM potomcu (`.bc-track`), ki sam NE reze svoje vsebine * (`overflow:visible`, privzeto) -- takrat brskalnik pravilno izracuna koncni (po-transformaciji) * polozaj vsake kartice in jo poreze SELE glede na stabilen okvir, kar je edini nacin, da * razlicne strani dejansko pridejo v ospredje. Rezanje NAMENOMA NI kar na `.bcarousel` samem -- * puscici (`.bc-arrow`) sta njegova neposredna otroka in namenoma segata ZUNAJ njegovih robov * (`left:-30px`/`right:-58px`, glej spodaj -- uporabnikova izrecna zahteva "naj ne prekrivajo * slike"), zato reze SAMO nov, locen notranji ovoj `.bc-viewport` (front-page.php), ki objema * IZKLJUCNO `.bc-track`, puscici pa ostajata zunaj njega, nedotaknjeni. */ .bcarousel{position:relative} .bcarousel .bc-viewport{overflow:hidden} .bcarousel .bc-track{ display:flex;gap:18px; transition:transform .5s ease; /* * POPRAVEK 14.9.2026: narocnik "na iPhone ga sploh ne vidim, samo puscice" -- v tej seji * ni mogoce testirati na pravem Safariju/iOS (samo Chromium orodja na voljo), a to je * ZNANA, pogosto poročana iOS Safari hiba: element s `transform` znotraj prednika z * `overflow:hidden` se obcasno ne PREBARVA pravilno ob spremembi transforma (obtici na * stari, prazni sličici), ce brskalnik zanj ne ustvari lastne GPU-pospesene plasti. * Standarden popravek (uporabljajo ga skoraj vse karusel knjiznice prav zaradi Safarija): * prisilno ustvari lastno plast za `.bc-track`. POZOR: NAMENOMA brez `transform:translateZ(0)` * tu v CSS -- JS (karusel.js) sam vsak `translateX(...)` postavi kot INLINE slog, ki bi * katerokoli TU zapisano `transform` vrednost takoj povozil (inline vedno zmaga), zato bi * bila mrtva koda; `will-change` in `backface-visibility` pa NISTA `transform` vrednosti in * zato ostaneta v veljavi ne glede na to, kar JS pozneje nastavi. */ -webkit-backface-visibility:hidden;backface-visibility:hidden; will-change:transform; } @media(prefers-reduced-motion:reduce){.bcarousel .bc-track{transition:none}} .bcarousel .bc-track::-webkit-scrollbar{display:none} /* PAGINIRAN karusel (9.9.2026, tretji popravek): narocnik je natancno pojasnil "8 pa po 8 se jih mora na enkrat med vsemi ki jih imamo, sepravi po dve vrstici hkrati po 4" -- torej NE enovrsticno drsenje kartico-za-kartico, ampak prava STRAN (2x4=8) naenkrat. Vsak ".bc-page" je ena taka stran, sirok natanko kot .bc-track (flex:0 0 100%), strani si sledijo vodoravno in se "prilepijo" celе (scroll-snap-align na strani, ne na kartici). Znotraj strani je navadna 4-stolpicna mreza (ista kot prejsnja staticna .bgrid). */ .bcarousel .bc-track .bc-page{ flex:0 0 100%;scroll-snap-align:start; display:grid;grid-template-columns:repeat(4,1fr);gap:18px; } @media(max-width:1020px){.bcarousel .bc-track .bc-page{grid-template-columns:repeat(3,1fr)}} @media(max-width:680px){.bcarousel .bc-track .bc-page{grid-template-columns:repeat(2,1fr)}} /* Puscici privzeto SKRITI (display:none) — pokaze jih sele .js iz header.php (razred se doda samo, ce se assets/app.js dejansko izvede). Brez JS ni mrtvega/nedelujocega gumba na strani; nativno drsenje s prstom/sledilno ploscico deluje ze prek scroll-snap. */ .bc-arrow{ display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:52px;height:52px;border-radius:50%;border:1px solid var(--gbord); background:var(--glass);backdrop-filter:blur(6px);color:var(--ink); font-size:26px;line-height:1;cursor:pointer;align-items:center;justify-content:center; transition:.2s;padding:0;box-shadow:0 4px 18px rgba(0,0,0,.35); } .js .bc-arrow{display:flex} .bc-arrow:hover{border-color:rgba(var(--cy-rgb),.45);box-shadow:0 0 20px rgba(var(--cy-rgb),.18)} .bc-arrow:disabled{opacity:.35;cursor:default;box-shadow:none;border-color:var(--gbord)} /* "puscice naj bodo večje bolj levo in bolj desno" (narocnik, veckrat ponovljeno, nazadnje 9.9.2026: "naj ne prikrivajo slike in naj bodo rahlo bolj levo/desno") -- odmik zdaj presega sirino gumba (56px gumb, -58px odmik na namizju), zato gumb v celoti sedi ZUNAJ kartice, brez prekrivanja fotografije, znotraj ze obstojecega notranjega roba ".wrap" (padding:0 24px) v ambientni rob strani; na ozkih zaslonih manj (da ne pade cez rob viewporta, kjer je varen prostor manjsi). */ .bc-prev{left:-30px} .bc-next{right:-30px} @media(min-width:1021px){.bc-arrow{width:56px;height:56px;font-size:28px}.bc-prev{left:-58px}.bc-next{right:-58px}} @media(max-width:680px){.bc-arrow{width:44px;height:44px;font-size:22px}.bc-prev{left:-16px}.bc-next{right:-16px}} /* Rocno vlecenje z misko (assets/karusel.js) -- kazalec pove, da je vrstica prijemljiva. POPRAVEK 10.9.2026: poleg preventDefault() v JS (glavni popravek za "se vedno ga nemorem prijeti") tudi tu izklopimo brskalnikovo lastno "povleci sliko" gesto na vseh slikah znotraj karusela -- brez tega bi na brskalnikih, kjer preventDefault v JS ne zadostuje, klik na fotografijo se vedno sprozil native ghost-image drag namesto nasega. */ .bcarousel .bc-track{cursor:grab} .bcarousel .bc-track.vlecenje{cursor:grabbing;user-select:none} /* POPRAVEK 13.9.2026: `touch-action:pan-y` pove brskalniku, naj navpicno drsenje STRANI pusti nativno (uporabnik lahko se vedno drsa navzdol skozi stran, tudi ce zacne s prstom nad karuselom), vodoravno gesto pa PREPUSTI JS-u (assets/karusel.js zdaj obravnava tudi dotik, ne le misko -- glej tam za polno obrazlozitev). Brez tega bi brskalnik lahko sam zacel nativno vodoravno drseti/PANirati, se preden JS dobi priloznost preventDefault(). */ .bcarousel .bc-track{touch-action:pan-y} .bcarousel .bc-track img{-webkit-user-drag:none;user-select:none} /* ================================================================== NASLOVNICA — rotacija fotografij (8. 9. 2026, BONUS poleg zamenjave naslovke) .hero-rot je sklad vec nad isto ".ph" ovojnico. Prva ("hr-img:first-child") ostane v obicajnem toku in ji velikost doloca ze obstojece pravilo ".hvis .ph img" (aspect-ratio 4/4.6) zgoraj v datoteki -- s tem ovojnica NIKOLI ne kolabira, ne glede na to, katera slika je trenutno ".active". Ostale so absolutno prekrite prek celotne ovojnice in prehajajo z opacity. Ce JS ne tece (prefers-reduced-motion ali izklopljen JS), ostane vidna samo prva -- vizualno enako kot ena sama staticna fotografija (staro obnasanje). ================================================================== */ .hero-rot{position:relative} .hero-rot .hr-img{opacity:0;transition:opacity 1.4s ease} .hero-rot .hr-img.active{opacity:1;z-index:1} .hero-rot .hr-img:first-child{position:relative;z-index:0} .hero-rot .hr-img:not(:first-child){position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* POPRAVEK 9.9.2026: narocnik je izrecno zelel animiran prehod tudi pri "reduce motion" nastavitvi (prejsnja vrstica "transition:none" pod to nastavitvijo je odstranjena) -- krozenje je blaga zatemnitev/pojav (brez premika/parallakse), zato je to sprejemljivo. */ /* ".chipf" (znacka "X+ prireditev") je SOSED od .ph, ne njegov otrok -- brez lastnega z-index bi jo aktivna rotirajoca fotografija (z-index:1 zgoraj) na nekaterih slikah prekrila (narocnik: "tisti napis... vidi na vseh"). Vedno nad rotacijo. */ .hvis .chipf{z-index:2} /* ENOTNA MREZA 4/2 -- "zaupajo nam", "izvajalci", "galerija" (narocnikova zahteva 8.9.2026) */ .logos,.bgrid,.egrid{grid-template-columns:repeat(4,1fr)} @media(max-width:1020px){ .logos,.bgrid,.egrid{grid-template-columns:repeat(3,1fr)} } @media(max-width:680px){ .logos,.bgrid,.egrid{grid-template-columns:repeat(2,1fr)} } /* ---------- /izvajalci/ popravek 9.9.2026: Adria Tribute nazaj POD Izvajalci, karusel odstranjen. Desna kartica ".tnote" je izginila (besedilo premaknjeno pod naslov), zato ".trib" ima zdaj samo en otrok -- brez tega bi ostal prazen desni stolpec iz osnovnega 1.35fr/.65fr pravila zgoraj. #izvajalci{margin-bottom:0} cilja SAMO to instanco (ne .cat na splosno -- ta razred se uporablja tudi na page-dogodki.php in page-galerija.php), da .cat{margin-bottom:64px} + section{padding:96px 0} ne ustvarita ~256px praznine do Adria Tribute pod njo. ---------- */ .tribute .trib{grid-template-columns:1fr} #izvajalci{margin-bottom:0} /* POPRAVEK 9.9.2026: narocnik "zmanjsaj se malo prazen prostor pred adriatribute" -- #izvajalci{margin-bottom:0} (zgoraj) je odstranil samo .cat-jev dodatni razmik, ostala sta pa se splosna section{padding:96px 0} spodaj od #izvajalci IN section{padding:96px 0} zgoraj od #adria-tribute (skupaj 192px). Oba zmanjsana na 32px vsak (skupaj 64px). */ #izvajalci{padding-bottom:32px} #adria-tribute{padding-top:32px} /* Isto na /dogodki/ -- narocnik: "prav tako pri dogodkih pred preteklimi dogodki". Section pred #pretekli je #prihajajoci (prihajajoci dogodki). */ #prihajajoci{padding-bottom:32px} #pretekli{padding-top:32px} /* kontaktni OBRAZEC (CF7 post 377, /kontakt/) -- oznaka+polje imela ~48px vrzel namesto ~8px. Vzrok: CF7 avtogenerira
... -- label je ze display:block (lasten prelom vrstice),
za njim doda SE en prelom v vrstico visine telesnega pisave (ne oznake), zato dvojna vrzel. Odpravimo ta odvecni
. */ .wpcf7 p br{display:none} /* 17.9.2026: Adria Tribute na /izvajalci/ ima 17 kartic (HELP! vrnjen + Aerosmith) -- nepopolna zadnja vrstica gre na sredino, sirina kartic ostane enaka. Premik z "left" (position:relative), NE s transform: .band:hover ze uporablja transform:translateY. Razmik mreze je 18 px: 4 stolpci, 1 kartica -> 1,5 celice + 1,5 razmika; 3 stolpci, 2 kartici in 2 stolpca, 1 kartica -> pol celice + pol razmika (2 stolpca veljata tudi na telefonu: ENOTNA MREZA 4/2 zgoraj povozi 1fr).*/ @media(min-width:1021px){ .bgrid.at-bandi>.band:last-child:nth-child(4n+1){position:relative;left:calc(150% + 27px)} } @media(min-width:681px) and (max-width:1020px){ .bgrid.at-bandi>.band:nth-child(3n+1):nth-last-child(2), .bgrid.at-bandi>.band:nth-child(3n+2):last-child{position:relative;left:calc(50% + 9px)} } @media(max-width:680px){ .bgrid.at-bandi>.band:last-child:nth-child(2n+1){position:relative;left:calc(50% + 9px)} }