/* ============================================================ APEX — design system Structure after thekeenfolks.com: hairline grid frame, square- bullet eyebrow labels, huge regular-weight statement type, square-corner block CTAs, crop marks. Motion after their stack: Lenis inertial scroll + GSAP reveals on expo.out. ============================================================ */ @font-face{font-family:'Inter Tight';src:url('assets/fonts/InterTight-var.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Conthrax';src:url('assets/fonts/Conthrax-SemiBold.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap} :root{ /* palette */ --ink:#161616; --paper:#FFFFFF; --paper-2:#EFF1F0; --tint:#F7F8F8; --night:#0B0B0C; --night-2:#131416; --accent:#008080; /* brand teal — one-line reskin */ --accent-hi:#006A6A; --accent-lt:#14B8B8; /* teal that survives a black background */ --accent-wash:#E6F2F2; --muted:#75767A; --line:rgba(22,22,22,.13); --line-strong:rgba(22,22,22,.24); /* type */ --font:'Inter Tight',-apple-system,'Helvetica Neue',Arial,sans-serif; --font-mark:'Conthrax','Inter Tight',sans-serif; /* Headings carry the story, so they are large, uppercase and tightly led. Conthrax is a wide face — sizes sit a notch under a condensed grotesque. */ --t-hero:clamp(1.9rem,5.4vw,5rem); /* Spodnje meje so dvignjene (10. 8. 2026). Vsaka clamp() je prej na telefonu padla na svoj minimum — vse hkrati — zato je razmerje med naslovom in besedilom z 2,42 na namizju padlo na 1,31 na telefonu in je stran zgledala stisnjena. Dvignjen je SAMO prvi člen; vw in zgornja meja sta nedotaknjena, zato se namizje nad ~1100 px ne premakne niti za piksel, krivulja pa je zvezna in na prelomu ni skoka. */ --t-stmt:clamp(1.6rem,2.35vw,2.15rem); --t-mid:clamp(1.25rem,1.6vw,1.45rem); --t-huge:clamp(2.75rem,7vw,7.4rem); --t-body:0.875rem; --t-label:0.75rem; /* rhythm */ --gap:18px; --pad:clamp(20px,2.2vw,32px); /* Ena sama celica za ozadje. Vedno 100vw deljeno s celim številom stolpcev, zato se mreža VEDNO izteče natanko na robu strani, celica pa ostane kvadratna. Število stolpcev raste z zaslonom (spodaj), tako da je celica povsod okoli 60 px — na 24 fiksnih stolpcih je na 2600 px monitorju zrasla na 108 px in je bila videti groteskno velika. Mreža riše vsako celico, pike sedijo na vsako tretjo. */ --sbw:0px; /* širino drsnika izmeri site.js */ /* Heroj: višina zgornje letve in spodnjega pasu. Na tidve črti se pripne polje pik, zato morata biti znani, ne prepuščeni vsebini. */ --hero-rail-h:18px; --hero-bar:46px; --cell:calc((100vw - var(--sbw))/8); --ease:cubic-bezier(.16,1,.3,1); /* ≈ gsap expo.out */ --nav:52px; /* ------------------------------------------------------------ VIŠINA ZASLONA — ena sama veriga za vso stran (14. 8. 2026) ------------------------------------------------------------ `svh`, `lvh` in `dvh` razume Chrome 108+, Safari 15.4+, Firefox 101+ in Samsung Internet 21+ — torej okoli 94 % obiskovalcev. Preostalih 6 % ne dobi krajše različice, ampak NOBENE: pravilo z neznano enoto ni napačno, ampak neveljavno, in brskalnik ga vrže stran skupaj z vso deklaracijo. `min-height:100svh` tam ni 100 vh, je nič. Prav to je do zdaj razsulo stran v starejšem Samsung Internetu: odpadlo je devet pravil, med njimi tudi tisto, ki je držalo besedilo Reborna pod predvajalnikom — zato se je zapeljalo čezenj. Zato nobena mera na tej strani ne uporablja teh enot neposredno. Vse gredo skozi ti dve spremenljivki, ki imata vedno veljavno vrednost: `--vph` (izmerjen `innerHeight`, postavi ga site.js že v glavi dokumenta) ali `100vh` v skrajnem primeru. --svh najmanjši zaslon (vse letve brskalnika vidne) — za VSEBINO in za heroja, da ni nikoli odrezana --lvh največji zaslon (letve umaknjene). 14. 8. 2026 zvečer je ostal BREZ UPORABE: heroj ga je uporabljal za škatlo, film pa je zato tekel še pod besedilom, ko si zdrsnil mimo. Ostaja definiran, ker je par s `--svh` in ker ga bo morda kdaj rabilo ozadje, ki se sme raztezati pod pregib. Za heroja ga ne vračaj — glej razlago nad `.hero`. */ --svh:var(--vph,100vh); --lvh:100vh; } @supports (height:1svh){ :root{ --svh:100svh; --lvh:100lvh } } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font); font-size:var(--t-body);line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg,video,iframe{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,h4,p,ul,figure{margin:0} ul{list-style:none;padding:0} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--accent);color:#fff} /* ---------- FRAME + THEMES --------------------------------- */ .frame{margin:0 var(--gap);border:1px solid var(--line);border-top:0;scroll-margin-top:calc(var(--nav) + 8px)} .bleed{margin:0;border-left:0;border-right:0} /* Prehodni pas pred temno sekcijo. Brez njega se bela stran konča iz nič v črnino in je videti, kot bi jo temni pas požrl. Mere so iste kot pri drobtinah na vrhu strani — isti --pad, ista velikost črk, ista lasna črta — zato se zgornji in spodnji rob strani berePta enako. */ .most{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px; padding:var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line); font-family:var(--font-mark); font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} /* Sekcija nad pasom svojo spodnjo črto umakne: ta je zamaknjena za --gap od robov, pas pa hoče črto, ki teče čez CELO širino strani — tako kot tista pod drobtinami na vrhu. Dve črti druga ob drugi bi se brali kot podvojena. */ .frame:has(+ .most){border-bottom:0} .most a{color:var(--muted);transition:color .3s var(--ease)} .most a:hover{color:var(--accent)} .most nav{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center} .most i{font-style:normal;opacity:.45} /* alternate sections on a barely-there tint so each one reads as its own block */ .tint{background:var(--tint)} .dark{background:var(--night);color:#fff; --line:rgba(255,255,255,.15); --line-strong:rgba(255,255,255,.3); --muted:rgba(255,255,255,.58); --accent:var(--accent-lt); --paper-2:var(--night-2)} .teal{background:var(--accent);color:#fff; --line:rgba(255,255,255,.28); --line-strong:rgba(255,255,255,.5); --muted:rgba(255,255,255,.75); --accent:#fff} /* ---------- EYEBROW + RAIL --------------------------------- */ .eyebrow{display:flex;align-items:center;gap:10px;font-size:var(--t-label);letter-spacing:.06em; font-family:var(--font-mark);text-transform:uppercase;color:var(--muted)} .eyebrow::before{content:'';width:7px;height:7px;background:var(--accent);flex:none} .eyebrow.plain::before{background:currentColor} .rail{display:flex;justify-content:space-between;align-items:center;gap:16px; padding:var(--pad);border-bottom:1px solid var(--line)} .rail .n{font-family:var(--font-mark);font-size:var(--t-label);letter-spacing:.1em;color:var(--accent)} /* ---------- TYPE ------------------------------------------- */ /* every heading is Conthrax, uppercase, tightly led — the Apex signature */ h1,h2,h3,.hero-h1,.stmt,.mid,.huge{font-family:var(--font-mark);font-weight:600; text-transform:uppercase;text-wrap:balance} .hero-h1{font-size:var(--t-hero);line-height:.98;letter-spacing:-.022em} .stmt{font-size:var(--t-stmt);line-height:1.14;letter-spacing:-.012em} .stmt .ac{color:var(--accent)} .mid{font-size:var(--t-mid);line-height:1.12;letter-spacing:-.008em} /* section header: big heading left, supporting copy right */ /* Naslovni pas. Velja za VSE sekcije — od 1. 8. 2026 ni več različice `.center`, ker je ta postavitev postala privzeta. · celici sta navpično centrirani · pod pasom je polna vodoravna črta, ki naslov loči od telesa sekcije · navpična črta med naslovom in ledejem je od roba odmaknjena natanko za --pad zgoraj in spodaj — enako, kolikor je odmaknjeno besedilo v obeh celicah. Zato ima nad sabo in pod sabo enak zrak in se ne dotika ne letve nad sabo ne črte pod sabo. Polna višina je bila poskušana in zavrnjena: črta je bila previsoka in pas je deloval stisnjen. */ .shead{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;position:relative; border-bottom:1px solid var(--line)} .shead > *{padding:var(--pad)} .shead > * + *{border-left:0} .shead .lede{margin-top:0;max-width:min(100%,420px)} .shead::after{content:'';position:absolute;left:62.5%;top:var(--pad);bottom:var(--pad); width:1px;background:var(--line);pointer-events:none} .lede{color:var(--muted);max-width:54ch} .mark{font-family:var(--font-mark);letter-spacing:.08em;text-transform:uppercase;font-size:var(--t-label)} /* outline type — used on the big display words */ /* text-fill-color (not color:transparent) — otherwise currentColor makes the stroke transparent too and the word disappears entirely */ .stroke{-webkit-text-stroke:1.4px currentColor;-webkit-text-fill-color:transparent} @supports not (-webkit-text-stroke:1px red){.stroke{-webkit-text-fill-color:currentColor}} .huge{font-size:var(--t-huge);line-height:1;letter-spacing:-.01em;text-transform:uppercase} /* ---------- BLOCK CTA -------------------------------------- */ .btn{position:relative;display:block;width:100%;max-width:290px;min-height:80px; background:var(--accent);color:#fff;overflow:hidden;transition:color .4s var(--ease)} .btn span{position:absolute;left:18px;bottom:16px;font-size:var(--t-body);z-index:2} .btn::before{content:'';position:absolute;inset:0;background:var(--accent-hi); transform:translateY(101%);transition:transform .55s var(--ease);z-index:1} .btn:hover::before{transform:translateY(0)} .btn::after{content:'';position:absolute;right:18px;bottom:18px;width:15px;height:15px;z-index:2; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M0 0h15v15H0zM5 3.5l6 4-6 4z' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M0 0h15v15H0zM5 3.5l6 4-6 4z' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .5s var(--ease)} .btn:hover::after{transform:translateX(5px)} .btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--accent)} .btn.ghost::before{background:var(--accent)} .btn.ghost:hover{color:#fff} .dark .btn.ghost:hover,.teal .btn.ghost:hover{color:var(--night)} .btn.ink{background:var(--ink);color:#fff} .btn.ink::before{background:var(--accent)} .btn.wht{background:#fff;color:var(--accent-hi)} .btn.wht::before{background:var(--night)} .btn.wht:hover{color:#fff} /* underline link */ .ul{position:relative;display:inline-block} .ul::after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor; transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)} .ul:hover::after{transform:scaleX(1);transform-origin:left} /* ---------- CROP MARKS ------------------------------------- */ /* The marks and gridlines are a backdrop, not an overlay. They used to sit at z-index 3–4, which painted the registration squares straight over the headline on delo.html. They now live behind the content; every direct child is lifted above them. */ .marks{position:relative;isolation:isolate} .marks > *,.gridlines > *{position:relative;z-index:1} /* Oba sloja stojita na istem rastru --cell (9. 8. 2026). Prej je mreža tekla po 57,6 × 57,3 px, pike pa po 173 × 172 px z zamikom 20/24 px — dva nepovezana rastra, zato so pike padale kamorkoli med črte. Zdaj: mreža riše vsako celico, ploščica pik meri točno tri celice, zamik −2,5 px pa kvadratek postavi na sredino presečišča. Platno SVG-ja je kvadratno, da se pika ob raztegu ploščice ne sploščti. POZOR: platna SVG-ja ne krči na 5 × 5 — kvadratek se razlije čez celo celico in sekcijo prebarva v sivo. */ .marks::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='173' height='173'%3E%3Crect width='5' height='5' fill='%23fff'/%3E%3C/svg%3E"); background-size:calc(var(--cell)*3) calc(var(--cell)*3); background-position:calc(var(--cell) - 2.5px) calc(var(--cell) - 2.5px);opacity:.55} /* Število stolpcev po širini zaslona. Dovoljena so samo števila oblike 6k+2 — 8, 14, 20, 26, 32, 38, 44, 50, 56 — in to iz dveh razlogov hkrati: · SODO število pomeni, da razpolovnica sekcije (slika | naslov) pade natanko na črto mreže; · ostanek 2 pri deljenju s 3 pomeni, da se pike, ki tečejo na vsake tri celice in se začnejo eno celico od levega roba, iztečejo natanko eno celico od desnega. Pri drugih številih zadnji stolpec pik ni simetričen s prvim in se zdi, da se mreža odreže. Pasovi so nastavljeni tako, da celica ostaja med ~45 in ~70 px. */ @media (min-width: 560px){:root{--cell:calc((100vw - var(--sbw))/14)}} @media (min-width: 980px){:root{--cell:calc((100vw - var(--sbw))/20)}} @media (min-width:1400px){:root{--cell:calc((100vw - var(--sbw))/26)}} @media (min-width:1820px){:root{--cell:calc((100vw - var(--sbw))/32)}} @media (min-width:2240px){:root{--cell:calc((100vw - var(--sbw))/38)}} @media (min-width:2660px){:root{--cell:calc((100vw - var(--sbw))/44)}} @media (min-width:3080px){:root{--cell:calc((100vw - var(--sbw))/50)}} @media (min-width:3500px){:root{--cell:calc((100vw - var(--sbw))/56)}} .gridlines{position:relative;isolation:isolate} .gridlines::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px); background-size:var(--cell) var(--cell);background-position:0 0} /* ---------- NAV + SCROLL PROGRESS -------------------------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--night);color:#fff; display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);height:var(--nav); border-bottom:1px solid rgba(255,255,255,.13)} .nav .logo{width:74px;color:#fff;display:block} .nav .logo svg{width:100%;height:auto} .nav ul{display:flex;gap:24px;font-size:var(--t-body)} .nav ul a{opacity:.6;transition:opacity .35s var(--ease)} .nav ul a:hover{opacity:1;color:var(--accent-lt)} .nav .cta{display:flex;align-items:center;gap:12px;font-size:var(--t-body)} .nav .cta .dot{width:16px;height:16px;background:var(--accent);flex:none;transition:transform .5s var(--ease)} .nav .cta:hover .dot{transform:rotate(45deg)} .prog{position:fixed;top:var(--nav);left:0;height:2px;background:var(--accent);z-index:71;width:0} /* Touch targets. The nav marks stay exactly the size they were drawn — the burger is still 24×12, the CTA still a 16px square — but each one carries an invisible 44×44 hit area, which is the iOS minimum and what the three of them were missing. An ::after does it without touching the layout. */ .nav .logo,.nav .cta,.burger{position:relative} .nav .logo::after,.nav .cta::after,.burger::after{content:'';position:absolute; left:50%;top:50%;translate:-50% -50%;width:max(100%,44px);height:44px} .burger{display:none;width:24px;height:12px;position:relative} .burger i{position:absolute;left:0;right:0;height:1.5px;background:#fff;transition:.4s var(--ease)} .burger i:first-child{top:0} .burger i:last-child{bottom:0} .burger.on i:first-child{top:5px;transform:rotate(45deg)} .burger.on i:last-child{bottom:5px;transform:rotate(-45deg)} /* ---------- HERO — film čez cel zaslon ----------------------- Ena višina, ne dve (14. 8. 2026, zvečer). ŠKATLA in ODER sta oba `--svh`, torej najmanjši zaslon: tolikšno višino brskalnik res pokaže, ko so vse letve zunaj. Heroj je s tem natanko prva stran — film je obrezan nanjo (`object-fit:cover`) in se konča na isti črti kot spodnji pas z besedilom. Naslov, gumbi in pas so vedno v celoti vidni, brez izjeme in brez merjenja. Na namizju je to enako `100vh`, zato je heroj tam natanko en zaslon. Isti dan popoldne je bila ŠKATLA `--lvh` (največji zaslon, letve umaknjene), da pod herojem ne bi pokukala naslednja sekcija, ko se letve umaknejo. Cena je bila napačna: film je bil za višino letev DALJŠI od besedila, zato je med drsenjem pod spodnjim pasom še naprej tekel viden pas filma. Žiga, isti večer: "ko zdrsnem mimo, pod besedilom še vedno teče video." Zdaj se film konča z besedilom, pod njim pa se stran preprosto nadaljuje: kar med drsenjem pokuka, je naslednja sekcija (logotipi), in to je navadno drsenje, ne napaka. **Ne vračaj `--lvh` na heroja.** Prej je tu pisalo `min-height:100svh`, ki ga je pravilo `round()` spodaj skrajšalo na najbližji večkratnik treh celic, da so pike padle natanko 1,5 celice od roba. Na 1512 × 916 je to pomenilo heroj visok 814 px in 102 px belega pasu "ZAUPAJO NAM" pod njim, na 1440 × 900 pa 125 px. Raster je bil lep, cena zanj pa napačna: heroj je bil za en pas prekratek. Pike zdaj razporedi `background-repeat:space`, ki presledek razdeli med ploščice sam, zato so še vedno enakomerne — samo ne več točno 1,5 celice od roba. Ne vračaj `round()`. */ .hero{position:relative;min-height:100vh;min-height:var(--svh); overflow:hidden;background:#000;color:#fff; --line:rgba(255,255,255,.16);--muted:rgba(255,255,255,.62);--accent:var(--accent-lt)} /* Oder: pas od vrha do `--svh`, v katerem živi vse, kar se bere. Letev in spodnji pas sta absolutna GLEDE NANJ, ne glede na herojevo škatlo, zato spodnji pas sedi na dnu VIDNEGA zaslona in ne 60 px pod njim. Od 14. 8. 2026 (zvečer) sta oder in škatla enako visoka; oder vseeno ostane svoj element, ker sta na namizju letev in spodnji pas absolutna glede nanj, in ker site.js prek njegove `min-height` meri, ali vsebina prerašča zaslon. */ .hero-stage{position:relative;z-index:3;min-height:100vh;min-height:var(--svh); display:flex;flex-direction:column;justify-content:flex-end;padding-top:var(--nav)} .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000} /* Prvi kader filma kot slika. Je LCP element strani in se naloži v nekaj deset kilobajtih, zato heroj nariše pravo sliko takoj — in ker je to natanko sličica, na kateri film začne, se prehod nanj ne vidi. Šele s tem je smiselno besedilo zadržati do filma: LCP je slika, ne naslov, in čakanje ne stane ničesar. */ .hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center} .hero-bg picture{display:contents} /* Prehod s slike na film je 14. 8. 2026 zvečer skrajšan s 1,6 s na 0,25 s. Dolg prelaz je bil smiseln, dokler je film prišel čez sliko kadarkoli — takrat je bilo treba razliko zabrisati. Zdaj ga site.js prižge šele ob kadru, ki se RES premika, torej natanko tam, kjer se konča kader s slike: zabrisati ni česa, zgladiti je treba samo razliko med AVIF in H.264. Ne daljšaj nazaj — dolg prelaz čez negiben kader je videti kot da se stran začne s fotografijo in ne s filmom. */ .hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center; pointer-events:none;opacity:0;transition:opacity .25s linear} .hero-bg video.on{opacity:1} /* Scrim: namesto polnega spodnjega pasu — tanka letev zgoraj (za nav), tanka spodaj (za letev) in elipsa, zasidrana spodaj levo točno pod besedilnim stolpcem. Desna polovica kadra ostane nedotaknjena. */ /* Senca je visoka `--svh`, ne cel heroj: zasidrana je na dno VIDNEGA zaslona, tam, kjer stoji spodnji pas, in ne na dno škatle, ki je na telefonu za višino letve nižje. */ .hero::before{content:'';position:absolute;top:0;left:0;right:0; height:100vh;height:var(--svh);z-index:1;pointer-events:none; background: linear-gradient(180deg,rgba(11,11,12,.58) 0,rgba(11,11,12,0) 19%), linear-gradient(0deg,rgba(11,11,12,.58) 0,rgba(11,11,12,0) 12%), radial-gradient(124% 92% at 1% 103%,rgba(11,11,12,.94) 0,rgba(11,11,12,.72) 34%, rgba(11,11,12,.40) 54%,rgba(11,11,12,.12) 70%,rgba(11,11,12,0) 82%)} /* Berljivost čez svetel kader NE reši `text-shadow`. Dva razloga: · senca se riše po obliki znaka, zato je vedno vidna kot obroba okoli črk; · obrisana beseda nima polnila, zato se senca pokaže SKOZI njeno notranjost in beseda potemni namesto da bi se odlepila od kadra. Namesto tega pod besedilni stolpec postavimo mehko liso. Ker je to gradient, ki se izteče v prosojno, roba nima — potemni kader, ne črk. */ .hero-inner::before{content:'';position:absolute;z-index:-1;pointer-events:none; inset:-28% -46% -22% -34%; background:radial-gradient(58% 62% at 26% 58%, rgba(11,11,12,.42) 0,rgba(11,11,12,.34) 26%,rgba(11,11,12,.22) 45%, rgba(11,11,12,.12) 62%,rgba(11,11,12,.04) 79%,rgba(11,11,12,0) 100%)} .hero-rail{position:absolute;top:calc(var(--nav) + var(--pad));left:var(--pad);right:var(--pad); z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px} .hero-inner{position:relative;z-index:3;padding:var(--pad); padding-bottom:calc(var(--pad) + 58px)} .hero-h1{font-size:clamp(1.9rem,4vw,3.6rem)} /* manjši od --t-hero: manj zakriva kader */ .hero-mid{max-width:min(100%,620px)} /* px — em/ch resolve against the 14px parent */ .hero-lede{color:rgba(255,255,255,.9);max-width:min(100%,430px);margin-top:18px; font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.55} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,2vw,24px)} /* spodnja letev — vse drobno besedilo v enem 1px pasu, ne kot blok čez kader */ /* Višina spodnjega pasu je pribita, ker se nanjo veže polje pik nad njim. Če je ne bi bila, bi jo določala vsebina in pike bi ob vsaki spremembi besedila zdrsnile z linije. */ .hero-base{position:absolute;left:0;right:0;bottom:0;z-index:3; display:flex;justify-content:space-between;align-items:center;gap:20px; min-height:var(--hero-bar);box-sizing:border-box; padding:13px var(--pad);border-top:1px solid rgba(255,255,255,.16)} .hero-foot{display:flex;flex-wrap:wrap;gap:26px;align-items:center; color:rgba(255,255,255,.72);font-size:var(--t-label);margin:0} .hero-foot b{color:var(--accent-lt);font-weight:600;font-family:var(--font-mark);letter-spacing:.04em} .hero-tag{display:flex;align-items:center;gap:10px;white-space:nowrap; font-size:var(--t-label);color:rgba(255,255,255,.7)} .hero-tag::before{content:'';width:7px;height:7px;background:var(--accent-lt);flex:none} /* ---------- UVOD: najprej film, potem vse ostalo ------------- Razred `cin` postavi drobna skripta v glavi index.html — samo tam in samo, če obiskovalec ni izklopil animacij. Zato ostale strani in brskalniki brez JS navigacije nikoli ne skrijejo: kar ni skrito, ni odvisno od tega, ali se site.js sploh naloži. Ista skripta razred po šestih sekundah odstrani, če se izbor ni zgodil. Navigacija se spusti od zgoraj, ker je pribita na vrh — vsako drugo gibanje bi jo odlepilo od roba zaslona. */ html.cin .nav{transform:translateY(-101%);transition:transform 1.05s var(--ease)} html.cin .nav.in{transform:none} html.cin .prog{opacity:0;transition:opacity .6s var(--ease)} html.cin .prog.in{opacity:1} /* Lasna črta nad spodnjim pasom je edino, kar je ostalo na zaslonu, medtem ko je film tekel sam: pas ima svoje besedilo skrito, njegova obroba pa ni bila. Ena črta čez prazen kader je videti kot napaka v filmu, ne kot del postavitve, zato pride skupaj z besedilom, ki stoji pod njo. */ html.cin .hero-base{border-top-color:transparent; transition:border-color 1.1s var(--ease)} html.cin .hero-base.in{border-top-color:rgba(255,255,255,.16)} @media (prefers-reduced-motion:reduce){ html.cin .nav{transform:none!important} html.cin .prog{opacity:1!important} } /* intro choreography — nothing in the hero appears until the film is running */ .hero .io{opacity:0;transform:translateY(20px); transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)} .hero .io.in{opacity:1;transform:none} .hero .iom{display:block;overflow:hidden} .hero .iom > *{display:block;transform:translateY(106%);transition:transform 1.15s var(--ease)} .hero .iom.in > *{transform:none} /* Polje pik v heroju ni cel hero, ampak pas med črto pod zgornjo letvijo (AI VIDEO PRODUKCIJA · SLOVENIJA) in črto nad spodnjim pasom. Razporeditev dela `background-repeat:space`: brskalnik vstavi toliko celih ploščic, kolikor jih gre noter, in preostanek razdeli MED njih, zato nobena ni nikoli odrezana. Ker je kvadratek narisan na sredini ploščice, je odmik od roba povsod enak polovici ploščice — torej 1,5 celice. Pas se začne točno na zgornji črti in konča točno na spodnji, zato je prva vrsta pik od zgornje črte enako oddaljena kot zadnja od spodnje in kot stranski stolpci od levega in desnega roba: povsod 1,5 celice. */ .hero-marks{position:absolute;z-index:2;pointer-events:none;opacity:0; top:calc(var(--nav) + var(--pad) + var(--hero-rail-h)); bottom:var(--hero-bar);left:0;right:0; transition:opacity 1.6s var(--ease); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='173' height='173'%3E%3Crect x='84' y='84' width='5' height='5' fill='%23fff'/%3E%3C/svg%3E"); background-size:calc(var(--cell)*3) calc(var(--cell)*3); background-repeat:space;background-position:0 0} .hero-marks.in{opacity:.42} /* čez film so pike samo tekstura, ne grafika */ html.no-motion .hero .io,html.no-motion .hero .iom > *{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .hero .io,.hero .iom > *{opacity:1!important;transform:none!important;transition:none!important} .hero-marks{opacity:.8} } /* ---------- LOGO MARQUEE ----------------------------------- */ .marquee{overflow:hidden;padding:clamp(20px,2.6vw,34px) 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .marquee ul{display:flex;gap:clamp(38px,5.5vw,88px);width:max-content;animation:slide 44s linear infinite} .marquee:hover ul{animation-play-state:paused} .marquee img{height:clamp(19px,2.2vw,30px);width:auto;opacity:.38;filter:grayscale(1); transition:opacity .45s var(--ease),filter .45s var(--ease)} .marquee li:hover img{opacity:1;filter:none} @keyframes slide{to{transform:translateX(-50%)}} /* ---------- VIDEO TILE (shared) ---------------------------- */ .tile{position:relative;cursor:pointer;display:block} .tile .shot{position:relative;overflow:hidden;background:var(--paper-2)} .tile.v .shot{aspect-ratio:9/16} .tile.h .shot{aspect-ratio:16/9} .tile .shot img,.tile .shot video{width:100%;height:100%;object-fit:cover;display:block; background:#0B0B0C;transition:transform 1.1s var(--ease),filter .6s var(--ease)} /* the hover reaction lives here, in the tile — restrained on purpose */ .tile:hover .shot img,.tile:hover .shot video{transform:scale(1.028)} .tile{transition:transform .5s var(--ease)} .tile:hover{transform:translateY(-3px)} .tile:active{transform:translateY(-1px) scale(.996)} /* while the silent preview runs the furniture gets out of the way */ .tile.playing .shot video{transform:scale(1.012)} .tile.playing .play{opacity:0;scale:.7} .tile.playing .shot::after{opacity:.5} .tile .shot::after{content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(11,11,12,0) 50%,rgba(11,11,12,.6)); opacity:0;transition:opacity .5s var(--ease)} .tile:hover .shot::after{opacity:1} .tile .play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3; width:58px;height:58px;background:var(--accent);opacity:0;scale:.8;transition:.5s var(--ease)} .tile .play::before{content:'';position:absolute;left:50%;top:50%;translate:-40% -50%; border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent} /* Ob prehodu z miško ostane le kader. Gumb za predvajanje in vogalne pike se ne prikažejo več — predogled se itak zažene sam, zato sta bila oba samo napoved nečesa, kar se že dogaja. Na dotik (spodaj v @media) gumb ostane, ker tam prehoda z miško ni in mora biti vidno, da je ploščica klikljiva. */ .tile .dur{position:absolute;right:8px;bottom:8px;z-index:3;font-family:var(--font-mark);font-size:10px; letter-spacing:.05em;color:#fff;background:rgba(11,11,12,.72);padding:3px 7px} .tile .shot i{position:absolute;width:6px;height:6px;background:#fff;opacity:0;z-index:3; transition:opacity .5s var(--ease),transform .5s var(--ease)} .tile.v .shot i:nth-of-type(1){left:14%;top:16%;transform:translate(7px,7px)} .tile.v .shot i:nth-of-type(2){right:14%;top:16%;transform:translate(-7px,7px)} .tile.v .shot i:nth-of-type(3){left:14%;bottom:16%;transform:translate(7px,-7px)} .tile.v .shot i:nth-of-type(4){right:14%;bottom:16%;transform:translate(-7px,-7px)} .tile.h .shot i:nth-of-type(1){left:9%;top:15%;transform:translate(7px,7px)} .tile.h .shot i:nth-of-type(2){right:9%;top:15%;transform:translate(-7px,7px)} .tile.h .shot i:nth-of-type(3){left:9%;bottom:15%;transform:translate(7px,-7px)} .tile.h .shot i:nth-of-type(4){right:9%;bottom:15%;transform:translate(-7px,-7px)} .tile .cap{display:flex;align-items:flex-start;gap:9px;padding-top:13px;line-height:1.35} .tile .cap::before{content:'';width:7px;height:7px;background:var(--accent);flex:none;margin-top:5px} .tile .cap em{font-style:normal;color:var(--muted);display:block} /* ---------- FEATURED (4) — dve vrstici, vsaka sama zase poravnana ---------- Vodilna vrstica združi 16:9 in 9:16. Razmerje stolpcev 3.16 : 1 je izpeljano iz 16/9 : 9/16 (= 1.7778 : 0.5625), zato sta oba kadra NATANKO enako visoka — poravnava ni odvisna od višine napisa pod videom in se ne podre, če se ta prelomi. */ .feat{padding:var(--pad);display:flex;flex-direction:column;gap:clamp(16px,2vw,30px)} .feat-row{display:grid;gap:clamp(16px,2vw,30px);align-items:start} .feat-row.lead{grid-template-columns:3.16fr 1fr} .feat-row.pair{grid-template-columns:1fr 1fr} .feat .badge{position:absolute;left:0;top:0;z-index:4;background:var(--accent);color:#fff; font-family:var(--font-mark);font-size:10px;letter-spacing:.1em;padding:6px 10px} /* ---------- SPOTLIGHT (sticky, near full screen) ----------- */ .spot{position:relative;background:var(--night);color:#fff;min-height:calc(var(--svh) * 1.75); --line:rgba(255,255,255,.15);--muted:rgba(255,255,255,.58);--accent:var(--accent-lt)} /* Prej: stolpca 1fr / .8fr, predvajalnik omejen na 400px in potisnjen z `margin-left:auto` ob desni rob — desni stolpec je bil ~600px širok za 400px predvajalnik, zato je sredina zijala prazna, besedilo in video pa sta se stiskala ob robova. Zdaj: par ima skupno največjo širino in je centriran, desni stolpec je natanko tako širok kot predvajalnik, zato praznine v sredini ni. */ .spot-sticky{position:sticky;top:var(--nav);min-height:calc(var(--svh) - var(--nav)); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:center; gap:clamp(36px,7vw,130px);padding:var(--pad); width:min(100%,1240px);margin-inline:auto} .spot-copy{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,28px)} .spot-player{position:relative;margin:0;background:#000;overflow:hidden;aspect-ratio:16/9} /* širina, ne max-height — `aspect-ratio` + `max-height` skupaj skrčita širino (past §6.3) */ .spot-player.v{aspect-ratio:9/16;width:min(100%,calc(var(--svh) * .74 * 9 / 16));margin-inline:auto} .spot-player img,.spot-player video{width:100%;height:100%;object-fit:cover;display:block; background:#000;transition:transform 1.4s var(--ease)} .spot-player:hover img,.spot-player:hover video{transform:scale(1.03)} .spot-player.playing .play{opacity:0;scale:.75} .spot-player .play{opacity:1;transition:.5s var(--ease)} .spot-player .play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3; width:clamp(64px,7vw,92px);aspect-ratio:1;background:var(--accent);transition:.5s var(--ease)} .spot-player .play::before{content:'';position:absolute;left:50%;top:50%;translate:-38% -50%; border-left:clamp(18px,2vw,26px) solid #fff;border-top:clamp(12px,1.3vw,17px) solid transparent; border-bottom:clamp(12px,1.3vw,17px) solid transparent} .spot-player:hover .play{scale:1.08} /* 2×2, oba stolpca enako široka in raztegnjena čez ves besedilni stolpec — z `auto` sta se stiskala ob levi rob in puščala prazno desno polovico */ .spot-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px) clamp(24px,3vw,48px);color:var(--muted);font-size:var(--t-label); border-top:1px solid var(--line);padding-top:clamp(16px,2vw,24px)} .spot-meta b{display:block;color:#fff;font-family:var(--font-mark);letter-spacing:.04em;margin-top:5px;font-size:.95rem} /* ---------- WORK GRID (the rest) --------------------------- */ .more{display:flex;justify-content:center;padding:0 var(--pad) var(--pad)} /* ---------- ARTWORK PANELS --------------------------------- */ /* ---------- SPEC TABLE ------------------------------------- */ .spec{width:100%;border-collapse:collapse;font-size:var(--t-body)} .spec th,.spec td{padding:clamp(13px,1.4vw,19px) var(--pad);text-align:left; border-bottom:1px solid var(--line);vertical-align:top} .spec thead th{font-weight:400;color:var(--muted);font-size:var(--t-label); font-family:var(--font-mark);text-transform:uppercase;letter-spacing:.06em} .spec thead th:last-child{color:var(--accent)} .spec tbody td:first-child{width:38%;color:var(--muted)} .spec tbody td:nth-child(2){color:var(--muted)} .spec tbody td:last-child{font-weight:600;width:26%;color:var(--accent)} .spec tr:last-child td{border-bottom:0} .note{padding:var(--pad);border-top:1px solid var(--line)} /* ---------- STEPS ------------------------------------------ */ .steps li{display:grid;grid-template-columns:92px 1fr 1.35fr;gap:var(--pad); padding:clamp(19px,2.3vw,30px) var(--pad);border-bottom:1px solid var(--line);align-items:start; transition:background .5s var(--ease)} .steps li:last-child{border-bottom:0} .steps li:hover{background:var(--paper-2)} .steps .num{font-family:var(--font-mark);font-size:clamp(1.375rem,1.7vw,1.5rem);color:var(--accent); line-height:1;letter-spacing:-.01em} /* ---------- PLANS ------------------------------------------ */ /* Pod paketi in pod lestvico dolžin mora črta teči čez CELO širino sekcije. Prej jo je risala šele opomba pod njima (`.note` ima border-top), zato je tam, kjer opombe ni, vrstica ostala odprta. Zdaj črto nosi mreža sama, opomba pa svojo v tem primeru umakne, da ne nastane dvojna. */ .plans,.ladder{border-bottom:1px solid var(--line)} .plans + .note,.ladder + .note{border-top:0} .plans{display:grid;grid-template-columns:repeat(3,1fr)} .plan{padding:var(--pad);display:flex;flex-direction:column;gap:16px;border-left:1px solid var(--line); transition:background .5s var(--ease)} .plan:first-child{border-left:0} .plan.hot{background:var(--paper-2);outline:1px solid var(--accent);outline-offset:-1px} .plan .tag{font-family:var(--font-mark);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);min-height:14px;display:block} .plan .tag:empty::before{content:'\00a0'} .plan h3{font-family:var(--font-mark);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:600} .plan .price{font-family:var(--font-mark);font-size:clamp(1.5rem,1.9vw,1.6rem);letter-spacing:-.01em;line-height:1.1} .plan .price small{font-size:var(--t-label);color:var(--muted);letter-spacing:0} .plan ul{display:flex;flex-direction:column;gap:9px;margin-top:auto;color:var(--muted)} .plan ul li{display:flex;gap:10px} .plan ul li::before{content:'';width:5px;height:5px;background:var(--accent);flex:none;margin-top:8px} .plan .btn{margin-top:8px} /* ---------- LENGTH LADDER + ADDONS ------------------------- Four equal cells in one row, same column rhythm and hairline dividers as .plans. Dolžina above, cena below. */ .ladder{display:grid;grid-template-columns:repeat(4,1fr)} .ladder div{padding:var(--pad);display:flex;flex-direction:column;gap:8px; border-left:1px solid var(--line);transition:background .5s var(--ease)} .ladder div:first-child{border-left:0} .ladder div:hover{background:var(--paper-2)} .ladder .len{font-family:var(--font-mark);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} .ladder .amt{font-family:var(--font-mark);font-size:clamp(1.5rem,1.9vw,1.6rem); letter-spacing:-.01em;line-height:1.1} @media(max-width:860px){ .ladder{grid-template-columns:repeat(2,1fr)} .ladder div:nth-child(odd){border-left:0} .ladder div:nth-child(n+3){border-top:1px solid var(--line)} } /* `.bio` in `.podpis` sta bila odstranjena 10. 8. 2026, ko je o-nas.html nehal biti predstavitev osebe in postal predstavitev studia. Portret, podpis in njuna pravila so bili edini uporabnik teh razredov. Če bo kdaj spet potrebna stran z osebo, je vse v gitu in v `_archive/foto/`. */ /* ---------- ZAKLJUČNI KLIC V SEKCIJI ----------------------- Vsaka sekcija se konča z eno vrstico: levo stavek, ki izhaja iz tega, kar je bralec pravkar prebral, desno povezava na rezervacijo. Namenoma je to vrstica in ne gumb — gumb petkrat na strani je oglasni pas, vrstica pa je videti kot del sekcije. Ista višina in ista lasna črta kot pri `.rail`. */ .klic{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:12px 32px;padding:var(--pad);border-top:1px solid var(--line)} /* Hierarhija je obrnjena: stavek je pripis, poziv je glavna stvar v vrstici. Prej je bil stavek v Conthraxu in večji od povezave, zato je povezava izginila pod njim — bralec je videl trditev, ne pa česa naj klikne. */ .klic > span{font-size:clamp(.9375rem,1.05vw,1rem);color:var(--ink);max-width:52ch;line-height:1.45} .dark .klic > span,.spot .klic > span{color:#fff} /* povezava, ne tipka — pet tipk na eni strani je oglasni pas */ .klic a.ul{font-family:var(--font-mark);text-transform:uppercase; font-size:clamp(1.0625rem,1.35vw,1.2rem);letter-spacing:-.006em; color:var(--accent);white-space:nowrap} /* ena sama izjema: pri Rebornu, kjer je bralec videl cel primer, prava tipka */ .klic.gumb{background:var(--paper-2);gap:16px 32px} /* V Rebornu klic stoji ZNOTRAJ lepljivega bloka, skupaj z besedilom. Prej je bil za njim v toku: lepljivi blok je ostal pribit, klic pa je drsel mimo njega in gumb je izgledal, kot da lebdi. Tu ne rabi ne ozadja ne črte — je zadnja vrstica istega stolpca. */ .spot .klic.gumb{background:transparent;border-top:0;padding:0; flex-direction:column;align-items:flex-start;gap:14px} .spot .klic.gumb > span{max-width:26ch} .klic .btn{max-width:270px;min-height:70px;flex:none} @media(max-width:860px){.klic .btn{max-width:none;width:100%}} /* drobna povezava namesto bloka gumba */ .vec{padding:var(--pad);border-top:1px solid var(--line)} .vec a{font-family:var(--font-mark);font-size:var(--t-label);letter-spacing:.06em; text-transform:uppercase;color:var(--muted)} .vec a:hover{color:var(--accent)} /* ---------- FAQ -------------------------------------------- */ .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:clamp(17px,2vw,25px) var(--pad); display:flex;justify-content:space-between;gap:20px;align-items:center; font-size:clamp(1.0625rem,1.35vw,1.2rem);letter-spacing:-.01em;transition:color .4s var(--ease)} /* the

inside is for machines (question-shaped headings); it must inherit the summary's look exactly — including text-transform, which the `font` shorthand does not reset */ .faq summary h3{font:inherit;letter-spacing:inherit;font-weight:inherit;margin:0; color:inherit;text-transform:none;text-wrap:inherit} .faq summary:hover{color:var(--accent)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'';width:12px;height:12px;flex:none; background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat, linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat; transition:transform .45s var(--ease)} .faq details[open] summary{color:var(--accent)} .faq details[open] summary::after{transform:rotate(135deg)} .faq .a{padding:0 var(--pad) clamp(19px,2vw,27px);color:var(--muted);max-width:66ch} /* ---------- CLOSING CTA + FOOTER --------------------------- */ /* Višina po istem pravilu kot širina: pike so eno celico od zgornjega in eno od spodnjega roba, vmes pa tečejo na vsake tri. Torej 2 + 3m celic — tu 8, kar je pri celici ~65 px enako ~520 px, natanko toliko, kot je držal prejšnji min(62svh,520px). Če vsebina zraste čez to, se blok podaljša in spodnja vrsta pik ni več na robu; zato notranji odmik ostaja zmeren. */ .close{display:grid;grid-template-columns:1fr 1fr;align-items:center; min-height:calc(var(--cell)*11)} .close > *{padding:clamp(26px,3.6vw,60px) var(--pad)} /* Pike ostanejo take, kot so — premakne se BESEDILO, in to natanko toliko, da vrsta pik pade v režo med vrstici odstavka. Zamika ne ugibamo v CSS (poskus s fiksnimi 0,6 celice je zgrešil, ker je odvisen od tega, kje se besedilo prelomi); izmeri ga `alignCloseCopy()` v site.js in ga zapiše sem. */ /* Zamakne se SAMO odstavek, ne cel stolpec — vrh naslova in dno gumba morata ostati poravnana s sliko, odstavek pa lahko zdrsne v režo med vrstama pik. */ .close .lede{position:relative;top:var(--copy-shift,0px)} .close-art{position:relative;height:100%;display:flex;align-items:center;justify-content:center} .close-art img{width:min(80%,430px);aspect-ratio:16/9;object-fit:cover} /* ---------- ZAKLJUČNI BLOK, PRISLONJEN NA RASTER ------------ Od ~2240 px naprej je pol bloka široka vsaj 19 celic, zato gre vanjo slika 16 : 9, ki meri natanko 16 × 9 celic — oboje celo število, zato vsi štirje robovi slike ležijo na črtah mreže in slika je videti kot polje rastra. Blok je visok 11 celic (2 + 3·3, torej po pravilu za pike): slika se začne eno celico pod vrhom in konča eno nad dnom. BESEDILO SE NE RAZTEGUJE (15. 8. 2026). Prej je bil stolpec visok 11 celic in razporejen s `space-between`, da bi bil vrh naslova poravnan z vrhom slike in dno gumba z dnom slike. Na 2600 × 1200 je to pomenilo 227 px med naslovom in odstavkom ter 228 px med odstavkom in gumbom — trije kosi besedila, ki so na zaslonu lebdeli vsak zase. Žiga: "na monitorju je grozno." Poravnava z rastrom je bila pravilna ideja z napačno mero: raster naj drži ŠIRINE, ne razmikov med vrsticami besedila. Razmiki so zdaj isti kot na prenosniku (22 in 30 px), stolpec pa je navpično sredinjen ob sliki — `align-items:center` iz osnovnega pravila. **Ne vračaj `space-between`.** Kar raster še vedno drži, so štiri širine, vse cela števila celic: slika 2 celici od levega roba, široka 16; besedilo 2 celici desno od slike, prav tako široko 16, in 2 celici od desnega roba. Naslov se zato prelomi v dve vrstici namesto ene 1268 px dolge. */ @media (min-width:2240px){ /* `align-items` je pri vrstičnem flexu NAVPIČNA os, `justify-content` vodoravna. Slika je torej navpično SREDINJENA (kot besedilo desno od nje) in vodoravno prislonjena na levo, dve celici od roba strani. Do 15. 8. 2026 je tu pisalo `align-items:flex-start`, kar je sliko obesilo na vrh bloka. Dokler je bila visoka 9 od 11 celic, se to skoraj ni videlo; ko se je zmanjšala na 14 celic širine (7,875 visoko), je nad njo ostala celica praznine, pod njo pa dve — slika na vrhu, besedilo na sredini. Žiga: "slika naj bo sredinsko poravnana enako kot besedilo, ne na vrhu." Odmika zgoraj in spodaj sta enaka, zato je sredinjenje simetrično. */ .close-art{align-items:center;justify-content:flex-start; padding:var(--cell) 0 var(--cell) calc(var(--cell)*2)} /* Slika je bila do 15. 8. 2026 široka 16 celic in visoka 9 — cela števila, zato so vsi štirje robovi ležali na črtah mreže. Lepo v teoriji, na 2600 px pa je bilo na zaslonu 1193 px in Žiga: "slika levo je malo prevelika." Zdaj 14 celic: 958 px po CSS, 1044 px na zaslonu. POZOR pri merjenju: `.close-art img` ima razred `px` in site.js mu ob vsakem drsenju postavi `transform: translate3d(0,±26px,0) scale(1.09)`. Izmerjena širina je zato vedno 1,09-kratnik tega, kar piše tu, in slika ob drsenju niha 26 px gor in dol okoli svoje lege. V trenutku, ko je blok na sredini zaslona, je zamik 0 — takrat je sredinjenje točno, in takrat bralec vanj tudi gleda. Višina (7,875 celice) s tem ni več celo število in slika ne stoji več natanko celico pod vrhom bloka — je pa navpično sredinjena, kar na oko ni razločljivo. Vodoravno raster ostane: slika 2 celici od levega roba in široka 14, besedilo od 20. do 36. celice, torej na obeh straneh strani enak dvocelični rob. Če jo še kdaj manjšaš, ostani pri sodem številu celic. */ .close-art img{width:calc(var(--cell)*14);max-width:none;aspect-ratio:16/9} .close > div:last-child{padding:var(--cell) calc(var(--cell)*2) var(--cell) var(--cell)} /* Tipografija raste s celico, ker vse drugo v tem bloku raste z njo. `--t-stmt` se ustavi pri 2,15 rem, `--t-body` pa je 14 px pribitih — na 2600 px je torej slika široka 1095 px, naslov pa še vedno 34 px. Razmerje slika : črka je na prenosniku 14 : 1, tu pa je bilo 32 : 1, in prav to je dalo vtis prazne desne polovice, tudi ko so bili razmiki že popravljeni. Zvišano je SAMO tu in SAMO nad 2240 px — prenosnik in telefon se ne premakneta niti za piksel. */ .close .stmt{font-size:clamp(2.15rem,1.9vw,3.4rem)} .close .lede{font-size:clamp(.95rem,.72vw,1.25rem);max-width:calc(var(--cell)*9)} .close .btn{min-width:calc(var(--cell)*5)} } .foot-mail{font-family:var(--font-mark);font-size:clamp(1.5rem,2.3vw,1.9rem);letter-spacing:-.01em;padding:var(--pad);display:inline-block} .foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad); padding:clamp(36px,4.6vw,72px) var(--pad);border-top:1px solid var(--line)} .foot-cols h4{margin-bottom:20px} .foot-cols li{margin-bottom:8px;color:var(--muted)} .foot-cols a:hover{color:var(--accent)} .wordmark{padding:0 var(--pad);overflow:hidden} .wordmark svg{width:100%;height:auto;color:#fff} .foot-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; padding:var(--pad);font-size:var(--t-label);color:var(--muted);border-top:1px solid var(--line)} /* ---------- MOTION ----------------------------------------- */ /* Four reveals, not one. Eight sections all arriving with the same 1.2s fade-and-rise reads as a template; the same eight arriving four different ways reads as a designed page. Same easing throughout, so it is variety within one grammar rather than four unrelated effects. */ /* 1 · fade + rise — the workhorse, for copy blocks */ .rv{opacity:0;transform:translateY(26px); transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);transition-delay:var(--d,0ms)} .rv.in{opacity:1;transform:none} /* 2 · masked line — the Keenfolks signature, for headings */ .rvm{display:block;overflow:hidden} .rvm > *{display:block;transform:translateY(105%);transition:transform 1.15s var(--ease); transition-delay:var(--d,0ms)} .rvm.in > *{transform:none} /* 3 · clip wipe — for tables and rule-heavy blocks, where a rise looks like the layout is settling rather than arriving */ .rvw{clip-path:inset(0 0 100% 0);opacity:.001; transition:clip-path 1.1s var(--ease),opacity .5s var(--ease);transition-delay:var(--d,0ms)} .rvw.in{clip-path:inset(0 0 0 0);opacity:1} /* 4 · settle — a near-imperceptible scale, for price cards and tiles. 2.4% is deliberately under the threshold where it reads as a "zoom". */ .rvz{opacity:0;transform:scale(.976); transition:opacity .95s var(--ease),transform 1.05s var(--ease);transition-delay:var(--d,0ms)} .rvz.in{opacity:1;transform:none} /* Once a tile has arrived it hands the transform back to the hover reaction, which is tuned at .5s. Without this the reveal's 1.05s would leak into the 3px lift and the hover would feel slack. */ .tile.rvz.in,.spot-player.rvz.in{transition:transform .5s var(--ease);transition-delay:0ms} .px{will-change:transform} /* Cross-document view transitions. One declaration, no library: browsers that support it cross-fade between the eight pages, browsers that do not ignore it and hard-navigate exactly as before. */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.34s; animation-timing-function:var(--ease)} html.no-motion .rv,html.no-motion .rvm > *,html.no-motion .rvz{opacity:1;transform:none;transition:none} html.no-motion .rvw{clip-path:none;opacity:1;transition:none} @media (prefers-reduced-motion:reduce){ .rv,.rvm > *,.rvz{opacity:1!important;transform:none!important;transition:none!important} .rvw{clip-path:none!important;opacity:1!important;transition:none!important} .marquee ul{animation:none} @view-transition{navigation:none} } /* ---------- MODAL ------------------------------------------ */ .modal{position:fixed;inset:0;z-index:90;background:rgba(8,8,9,.97);display:none; align-items:center;justify-content:center;padding:60px var(--gap) var(--gap);opacity:0; transition:opacity .45s var(--ease)} .modal.on{display:flex} .modal.vis{opacity:1} .modal .stage{position:relative;background:#000;width:min(100%,1240px)} .modal .stage.v{aspect-ratio:9/16;width:min(100%,calc(var(--svh) * .8 * 9 / 16),480px)} .modal .stage.h{aspect-ratio:16/9} /* Več videov hkrati (primeri na strani Storitve). Mere posameznega okvirja postavi site.js, ker so odvisne od razmerij v naboru; CSS jih samo poravna. Na ozkem zaslonu se vrsta prelomi v stolpec. */ .modal .stage.set{width:auto;max-width:min(100%,1240px);aspect-ratio:auto;background:transparent; display:flex;gap:14px;align-items:center;justify-content:center} .modal .stage.set.col{flex-direction:column;max-height:calc(var(--svh) * .86);overflow-y:auto;width:100%} .modal .stage.set figure{position:relative;margin:0;background:#000;flex:none} .modal iframe,.modal video{position:absolute;inset:0;width:100%;height:100%;border:0; background:#000;object-fit:contain} .modal .stage{transform:scale(.965);opacity:0; transition:transform .55s var(--ease),opacity .45s var(--ease)} .modal.vis .stage{transform:scale(1);opacity:1} .modal .x{position:absolute;top:14px;right:18px;color:#fff;font-size:26px;line-height:1; width:46px;height:46px;z-index:2;transition:transform .4s var(--ease)} .modal .x:hover{transform:rotate(90deg)} /* ---------- MOBILE MENU ------------------------------------ */ .menu{position:fixed;inset:0;z-index:65;background:var(--night);color:#fff; padding:calc(var(--nav) + 28px) var(--pad) var(--pad);display:flex;flex-direction:column; transform:translateY(-101%);transition:transform .65s var(--ease);visibility:hidden} .menu.on{transform:none;visibility:visible} .menu a{font-size:clamp(1.7rem,8.5vw,2.8rem);text-transform:uppercase;letter-spacing:-.03em; padding:12px 0;border-bottom:1px solid rgba(255,255,255,.13);font-family:var(--font-mark);font-weight:600} .menu .soc{display:flex;gap:20px;margin-top:auto;padding-top:24px;font-size:var(--t-label)} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1180px){ .grid3{grid-template-columns:repeat(2,1fr)} } @media (max-width:960px){ .feat-row.lead,.feat-row.pair{grid-template-columns:1fr} .plans{grid-template-columns:1fr} .plan{border-left:0;border-top:1px solid var(--line)} .plan:first-child{border-top:0} } @media (max-width:860px){ :root{--gap:10px} .nav ul,.nav .cta span{display:none} .burger{display:block} /* Heroj je na telefonu POLN zaslon, ne 92 %. Prej je bil namenoma krajši, da je spodaj pokukala naslednja sekcija in bralec je videl, da se stran nadaljuje. Zdaj to pove film, ki teče: škatla in vsebina sta obe `--svh` (iz osnovnega pravila), in belega pasu ni več. */ .hero-mid{max-width:none} .hero-h1{font-size:clamp(1.7rem,8.4vw,2.6rem)} .hero-inner{padding-bottom:calc(var(--pad) + 78px)} .hero-base{padding:11px var(--pad)} .hero-foot{gap:4px 18px} .hero-tag{display:none} .shead{grid-template-columns:1fr} /* en stolpec — navpična črta odpade, nadomesti jo vodoravna */ .shead::after{display:none} .shead > * + *{border-left:0;border-top:1px solid var(--line)} .hero-actions{flex-direction:column} .grid3.h{grid-template-columns:1fr} .grid3.v{grid-template-columns:1fr 1fr} .tile .play{opacity:1;scale:1;width:48px;height:48px} .tile .play::before{border-left-width:12px;border-top-width:8px;border-bottom-width:8px} .tile .shot i,.tile .shot::after{opacity:1;transform:none} /* On touch the tile in view plays itself (see site.js). While it does, the play button and corner marks step aside, same as the desktop hover. */ .tile.playing .shot i{opacity:0} .tile.playing{transform:translateY(-2px)} .steps li{grid-template-columns:1fr;gap:8px} .close{grid-template-columns:1fr} .close-art{order:-1;padding-bottom:0} .close-art img{width:100%} /* Polje pik odpade, tako kot v heroju (15. 8. 2026). Pri celici 100vw/8 gredo čez telefon samo TRI vrste pik, besedilo pa je pod 560 px sredinsko — pike zato padejo natanko ob besede in med vrstice naslova. Žiga, 15. 8.: "pike gredo pod besedilo, kar je točno to, kar smo rekli, da ne sme." Na namizju se pikam umakne odstavek (`--copy-shift`, glej site.js), tu pa se ni kam umakniti: stolpec je en sam in čez zaslon gredo tri pike. Mreža `.gridlines` OSTANE — črte tečejo za besedilom in se z njim ne tepejo, tekstura sekcije se torej ne izgubi. */ .close.marks::before{display:none} /* Zrak. Blok je bil stisnjen med sliko in nogo: 26 px nad naslovom in 26 px pod gumbom, torej manj, kot je razmik med odstavkom in gumbom (30 px). Zato je bil videti utesnjen, čeprav razmiki znotraj stolpca so bili pravi. Zdaj sta rob nad naslovom in rob pod gumbom večja od notranjih razmikov. */ .close > div:last-child{padding:clamp(34px,9vw,46px) var(--pad) clamp(42px,11vw,60px)} .foot-cols{grid-template-columns:1fr 1fr} .btn{max-width:none} /* The Reborn VSL is the strongest single piece of work on the site and on a phone it used to collapse into an ordinary stacked block. The scene is rebuilt for one column: the player pins under the nav and the copy travels past it, which is the same idea as the desktop sticky scene at a size that fits in a hand. */ .spot{min-height:0} .spot-sticky{position:static;min-height:0;display:flex;flex-direction:column; gap:clamp(18px,5vw,30px); padding-top:clamp(30px,8vw,60px);padding-bottom:clamp(30px,8vw,60px)} .spot-player{order:-1;position:sticky;top:calc(var(--nav) + 12px);z-index:1} .spot-player.v{margin:0 auto;width:min(80%,320px)} .spot-copy{position:relative;z-index:2;background:var(--night); padding-top:clamp(14px,4vw,22px)} .spec thead{display:none} .spec,.spec tbody,.spec tr,.spec td{display:block;width:auto} .spec tr{border-bottom:1px solid var(--line);padding:6px 0 14px} .spec td{border:0;padding:4px var(--pad)} .spec tbody td:first-child{width:auto;font-size:var(--t-label);text-transform:uppercase; font-family:var(--font-mark);letter-spacing:.06em;padding-top:14px;color:var(--ink)} .dark .spec tbody td:first-child{color:#fff} .spec tbody td:nth-child(2)::before{content:'Klasična — ';color:var(--muted)} .spec tbody td:last-child{width:auto} .spec tbody td:last-child::before{content:'Apex — ';font-weight:400;color:var(--muted)} } /* ---------- delo.html — PORTFELJ --------------------------- Prej: dva vodoravna drsnika, ločena po razmerju stranic. Delitev je bila tehnična in ne pomenska, večina dela pa je čakala izven zaslona, kjer je nihče ni videl. Zdaj je vse na enem zidu, urejeno po istih šestih vrstah videa kot stran Storitve, s filtrom nad njim. Vsak posnetek obdrži SVOJE razmerje — obrezovanje v kvadrat je bilo narobe, ker prilagodi delo postavitvi namesto obratno. Namesto tega ležeči zasede dva stolpca, pokončni enega: 16 : 9 je približno dvakrat širši od 9 : 16, zato sta na koncu enako pomembna in nobeden ni videti drobcen. Ker so v zidu najprej vsi ležeči in šele nato vsi pokončni, je vsaka vrsta sestavljena iz enakih oblik in se poravna sama od sebe. NA TELEFONU en stolpec: pokončni skoraj čez cel zaslon, ležeči nizek — točno tako, kot se ta dva formata gledata na telefonu. */ .pgrid{display:grid;gap:clamp(14px,1.5vw,22px);padding:var(--pad); grid-template-columns:repeat(4,minmax(0,1fr));align-items:start} .pgrid .tile{margin:0} .pgrid .tile.h{grid-column:span 2} /* Pokončni se ne prilepijo v prazen prostor za zadnjim ležečim, ampak začnejo novo vrsto — prehod med oblikama mora biti viden kot rez. */ .pgrid .tile.h + .tile.v{grid-column-start:1} .pgrid .tile[hidden]{display:none} @media(max-width:1400px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:980px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){ .pgrid{grid-template-columns:1fr;gap:clamp(22px,6vw,34px)} .pgrid .tile.h{grid-column:auto} } /* Filtri — ista tipografija kot oznake drugod, obnašanje kot pri navigaciji. */ .filtri{display:flex;flex-wrap:wrap;gap:8px;padding:var(--pad); border-bottom:1px solid var(--line)} .filtri button{display:inline-flex;align-items:center;gap:8px; padding:9px 14px;border:1px solid var(--line);color:var(--muted); font-family:var(--font-mark);font-size:var(--t-label);letter-spacing:.05em; text-transform:uppercase;transition:.35s var(--ease);white-space:nowrap} .filtri button i{font-style:normal;font-size:9px;opacity:.6} .filtri button:hover{border-color:var(--line-strong);color:var(--ink)} .filtri button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff} .filtri button[aria-pressed="true"] i{opacity:.75} /* ---------- DROBTINE --------------------------------------- */ .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:var(--pad); border-bottom:1px solid var(--line);font-family:var(--font-mark); font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .crumbs a{color:var(--muted);transition:color .3s var(--ease)} .crumbs a:hover{color:var(--accent)} .crumbs span[aria-current]{color:var(--accent)} .crumbs i{font-style:normal;opacity:.45} /* ---------- TELO BESEDILA ---------------------------------- */ /* Merilo je berljivost: 68 znakov na vrstico, naslovi z lasno črto nad sabo, da se odsek bere kot lasten blok tudi brez okvirja sekcije. */ .prose{padding:var(--pad);max-width:74ch} .prose.wide{max-width:none} .prose > * + *{margin-top:1.05em} .prose p,.prose li{font-size:var(--t-body);line-height:1.62;color:var(--ink)} .dark .prose p,.dark .prose li{color:rgba(255,255,255,.82)} .prose h2{font-size:var(--t-mid);line-height:1.14;letter-spacing:-.008em; margin-top:clamp(34px,4.4vw,58px);padding-top:18px;border-top:1px solid var(--line)} .prose h2:first-child{margin-top:0;padding-top:0;border-top:0} .prose h3{font-size:calc(var(--t-body) * 1.08);letter-spacing:.01em;margin-top:26px;color:var(--accent)} .prose ul,.prose ol{padding-left:0;list-style:none} .prose ul li{position:relative;padding-left:20px;margin-top:.5em} .prose ul li::before{content:'';position:absolute;left:0;top:.62em; width:6px;height:6px;background:var(--accent)} .prose ol{counter-reset:pr} .prose ol li{position:relative;padding-left:30px;margin-top:.5em;counter-increment:pr} .prose ol li::before{content:counter(pr,decimal-leading-zero);position:absolute;left:0;top:.05em; font-family:var(--font-mark);font-size:11px;letter-spacing:.06em;color:var(--accent)} .prose strong{font-weight:600} .prose a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:var(--line-strong); transition:text-decoration-color .3s var(--ease)} .prose a:not(.btn):hover{text-decoration-color:var(--accent)} /* ---------- ODGOVOR V PRVIH 40 BESEDAH ---------------------- */ /* Prvi odstavek strani nosi celoten odgovor in številko. Modeli citirajo to; obiskovalec ga prebere v petih sekundah. */ .answer{padding:clamp(19px,2.4vw,30px) var(--pad);border-bottom:1px solid var(--line); background:var(--paper-2);border-left:3px solid var(--accent)} .answer p{font-size:clamp(1.0625rem,1.35vw,1.15rem);line-height:1.45;max-width:60ch;color:var(--ink)} .answer p b{color:var(--accent);font-weight:600} .answer p + p{margin-top:.7em;font-size:var(--t-body);color:var(--muted)} /* ---------- POVEZAVE NA DNU STRANI ------------------------- */ /* F13: vsaka stran je dosegljiva v dveh klikih od doma. */ .plinks{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)} .plinks a{padding:clamp(19px,2.3vw,30px) var(--pad);border-left:1px solid var(--line); display:flex;flex-direction:column;gap:8px;transition:background .5s var(--ease)} .plinks a:first-child{border-left:0} .plinks a:hover{background:var(--paper-2)} .plinks a:hover .pl-t{color:var(--accent)} .plinks .pl-t{font-family:var(--font-mark);font-size:var(--t-body);text-transform:uppercase; letter-spacing:.01em;transition:color .3s var(--ease)} .plinks .pl-d{font-size:12px;line-height:1.5;color:var(--muted)} .plinks .pl-t::after{content:' →';color:var(--accent)} /* ---------- 404 -------------------------------------------- */ .err{min-height:calc(var(--svh) - var(--nav));display:flex;flex-direction:column; align-items:flex-start;justify-content:center;gap:22px;padding:clamp(40px,8vw,90px) var(--pad)} .err .code{font-family:var(--font-mark);font-size:clamp(3.4rem,14vw,9rem);line-height:.9; letter-spacing:-.03em;color:var(--accent)} @media(max-width:860px){ .plinks{grid-template-columns:1fr} .plinks a{border-left:0;border-top:1px solid var(--line)} .plinks a:first-child{border-top:0} .prose{max-width:none} } /* ============================================================ TELEFON — lasten oblikovni sloj (10. 8. 2026) Do zdaj je bil telefon tisto, kar ostane, ko se namizje skrči. Vsaka mera na strani je bila clamp(), vezan na širino zaslona; na 1440 px so vse sedele na svojem VRHU, na 390 px pa vse hkrati na svojem DNU. Stran je zato ohranila razmerja in izgubila hierarhijo: razmerje med naslovom sekcije in besedilom je z 2,42 padlo na 1,31. Ta blok je namenoma ZADNJI v datoteki. Vsa pravila spodaj imajo enako specifičnost kot tista, ki jih prepisujejo, zato odloča vrstni red — če ga kdo premakne više, polovica tega neha delovati. Velikosti pisav niso tu. Te so bile popravljene na izvoru, z dvigom spodnjih mej v clamp() (glej :root na vrhu), da je krivulja zvezna in na 860 px ni skoka. Tu je samo tisto, kar je res odvisno od tega, da je naprava v eni roki. ============================================================ */ /* Letev za rezervacijo je na namizju ni. Deklarirana je zunaj @media, da je na širokem zaslonu odsotna tudi za bralnike zaslona. */ .callbar{display:none} @media (max-width:860px){ /* ---- 1 · ritem ------------------------------------------- */ /* Besedilo z 14 na 16 px. Pod 16 px iOS ob dotiku polja povečuje stran, 16 px pa je tudi spodnja meja berljivosti na telefonu. */ :root{--t-body:1rem; --t-label:.8125rem; --gap:0px} body{line-height:1.6} /* Brez roba. Lasna črta 10 px od roba zaslona se na telefonu ne bere kot okvir, ampak kot margina — vzela je 20 px širine in ni dala nič. Vodoravne črte, ki sekcije res ločujejo, ostanejo. */ .frame{border-left:0;border-right:0} /* Prostor za letev na dnu, da ne pokrije zadnje vrstice noge. */ body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))} /* Varna območja. Doslej jih datoteka ni poznala nikjer: spodnji pas heroja in dno menija sta lahko sedela pod domačo črtico iPhona. */ .hero-base{padding-bottom:calc(11px + env(safe-area-inset-bottom,0px))} .menu{padding-bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px))} .modal{padding:56px 16px calc(16px + env(safe-area-inset-bottom,0px))} /* ---- 2 · tipografija, ki je clamp ne zajame ---------------- */ .hero-h1{font-size:clamp(1.9rem,9vw,2.6rem)} .hero-lede{font-size:1rem} .spot-meta b{font-size:1rem} .plinks .pl-d{font-size:.875rem} /* Drobni napisi z 10 na 11 px. Pod 11 px na telefonu ni več besedilo, ampak vzorec. */ .most,.plan .tag,.tile .dur,.ladder .len,.feat .badge{font-size:11px} /* Drobtine so kratke ("DOMOV / PROJEKTI") in gredo v 12 px brez preloma. Vrstica "Naprej" ostane pri 11 px: pri 12 px se tri povezave ne izidejo več v eno vrsto in se vrne prav tisti prelom, ki smo ga odpravili. */ .crumbs{font-size:12px} .filtri button i{font-size:10px} /* Leda ob naslovu je na namizju pripis OB njem; zložen POD njega se bere kot druga trditev, ki tekmuje s prvo. Na telefonu naj bo razločno pripis — manjši od besedila, ne večji. */ .shead .lede{font-size:.875rem;line-height:1.5} /* Premik ob prihodu: 26 px je na 700 px visokem zaslonu bistveno večji delež višine kot na monitorju in se bere kot poskakovanje. */ .rv{transform:translateY(14px)} /* ---- 3 · dotik: 44 px povsod ------------------------------ */ /* Merjeno: 21–25 tarč na stran je bilo nižjih od 44 px, večinoma besedilne povezave, visoke 18–23 px. Notranji odmik jih dvigne na 43–44 px, ne da bi se karkoli premaknilo — podčrtaj se premakne z njim. Presledek med sosednjima povezavama je natanko višina tarče, zato se območji nikjer ne prekrivata. */ .ul{display:inline-block;padding:13px 0} .ul::after{bottom:11px} /* Vrstice v nogi so bile med sabo enako daleč kot naslov od svojega seznama (26 proti 25 px), zato se stolpec ni bral kot naslov s seznamom. Popravek je v VRSTICAH, ne v naslovu: razmik med njimi je prepolovljen, razmik od naslova in med skupinama pa ostane, kot je bil. naslov → prva vrstica 25 px (nespremenjeno) vrstica → vrstica 14 px (bilo 26) skupina → skupina 29 px (nespremenjeno) CENA: povezava v nogi je zdaj visoka 34 px namesto 46. To je pod 44 px iz Applovih smernic, a krepko nad 24 px, ki jih zahteva WCAG 2.2 AA, in tarče se med sabo ne prekrivajo. Gostejši seznam in 44 px hkrati nista mogoča: razmik med vrsticama JE spodnji odmik povezave. */ .foot-cols li{margin-bottom:0} .foot-cols h4{margin-bottom:15px} .foot-cols .ul{padding:4px 0} .foot-cols .ul::after{bottom:2px} .crumbs,.most{padding-top:4px;padding-bottom:4px} .crumbs a,.crumbs span,.most a,.most nav{padding:14px 0} .foot-legal{padding-top:6px;padding-bottom:6px} .filtri button{min-height:44px;padding:0 14px} /* ---- 4 · pot do rezervacije ------------------------------- */ /* Gumb v navigaciji je na telefonu ostal kot 16 × 16 px turkizni kvadratek brez napisa — nihče ga ne prebere kot poziv. Ker klic zdaj nosita spodnja letev in meni, tu odpade. */ .nav .cta{display:none} /* Meni je bil slepa ulica: šest povezav, tri omrežja in nobene možnosti za rezervacijo. */ /* Meni je z dvema novima vrsticama zrasel čez zaslon: 781 px vsebine v 700 px oknu, socialne povezave odrezane. Vrstice so bile visoke, ker je nanje padla nova telesna vodilnica 1,6 — naslovi je ne rabijo. */ .menu{overflow-y:auto;overscroll-behavior:contain} .menu a{font-size:clamp(1.45rem,7.4vw,2.4rem);line-height:1.06;padding:11px 0} .menu .btn{margin-top:20px;min-height:68px;border-bottom:0;padding:0; font-family:var(--font);font-weight:400;font-size:var(--t-body); line-height:1.6;text-transform:none;letter-spacing:0} /* Star hrošč, ne nov: `.menu a` postavi velikost naravnost na povezavo, zato je `.soc` s svojim --t-label ni nikoli dobil. Tri omrežja so se risala v 33 px z lastnimi črtami in ušla 685 px na širino v 350 px stolpcu. */ .menu .soc a{font-size:var(--t-label);font-family:var(--font-mark); letter-spacing:.08em;line-height:1.4;border-bottom:0;padding:13px 0} .menu .menu-tel{border-bottom:0;padding:22px 0 10px;font-size:var(--t-label); font-family:var(--font-mark);letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,.7)} /* Spodnja letev. Ena sama, tiha, pride šele za herojem in se umakne, kadar je odprt meni ali predvajalnik. Ni to isto kot pet gumbov na strani — je edino dejanje, ki je vedno na dosegu palca. */ .callbar{position:fixed;left:0;right:0;bottom:0;z-index:60; display:flex;align-items:center;justify-content:space-between;gap:16px; min-height:58px;padding:0 var(--pad); padding-bottom:env(safe-area-inset-bottom,0px); background:var(--night);color:#fff; border-top:1px solid rgba(255,255,255,.16); font-family:var(--font-mark);font-size:12px;letter-spacing:.08em; text-transform:uppercase; transform:translateY(102%);transition:transform .55s var(--ease)} .callbar.on{transform:none} .callbar i{width:9px;height:9px;background:var(--accent-lt);flex:none} /* Ponovljeni poziv. Petkrat ista vrstica je bila največji vir občutka, da je besedila preveč — 728 besed na strani, od tega devet povezav z isto vsebino. Dve se na telefonu umakneta; letev spodaj ju nadomesti. */ .klic-opt{display:none} /* ---- 5 · portfelj ----------------------------------------- */ /* Sedem filtrov se je prelomilo v pet razmajanih vrst, visokih 255 px, prvi posnetek pa je čakal 572 px nizko. Ena vrsta, ki se vleče vstran. */ .filtri{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding-top:8px;padding-bottom:8px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)} .filtri::-webkit-scrollbar{display:none} .filtri button{flex:none;scroll-snap-align:start} /* Izbrani projekti ostanejo eden pod drugim, tudi ležeči par. Poskus z dvema v vrsto je 10. 8. 2026 zavrnjen: ploščici sta bili široki 172 px in visoki 97 px — prekratki, da bi se v njiju sploh kaj videlo. Zid dela je krajši, ampak delo je premajhno, in delo je poanta. (Ta zapis obstaja, da poskusa ne ponovi naslednji pogovor.) */ /* ---- 4a · heroj se prilega zaslonu ------------------------- */ /* Izmerjeno na 360 × 660 (Android, DPR 3, z brskalnikovima letvama): letev "AI VIDEO PRODUKCIJA · SLOVENIJA" se je prelomila v dve vrsti, naslov je zrasel na pet vrstic, vsebina pa je pribita na dno — zato se je letev prekrivala z naslovom za 30 px, drugi gumb pa s spodnjim pasom za 19 px. Vzrok ni velikost črke, ampak zgradba: letev je absolutno postavljena na vrh, vsebina pa poravnana na dno, in na nizkem zaslonu se srečata na sredini. Zato vsebina ni več pribita na dno, ampak SREDINSKA v pasu med letvijo in spodnjim pasom, oba pa sta zdaj pravi odmik in ne domneva. Prekrivanje s tem ni več mogoče, ne glede na to, koliko vrstic zraste naslov. Če je vsebina vseeno višja od pasu, jo pomanjša `--fit` iz site.js — glej tam. */ /* Letev NI več absolutna. Dokler je bila, je bilo treba prostor zanjo uganiti vnaprej (`--hero-rail-h:18px`) — in ko se je zaradi sredinjenja prelomila v dve vrsti, je ugib zgrešil za 25 px in nastalo je prekrivanje. Zdaj je navaden element v toku: heroj je stolpec, letev je prva vrstica, `.hero-inner` pa vzame ves preostanek in svojo vsebino centrira v njem. Prekrivanje s tem ni več stvar pravilne številke, ampak je nemogoče. */ /* Višina heroja se od 14. 8. 2026 ne določa več tukaj. Prej je pisalo `min-height:min(92svh, var(--vph,92svh))`, kar je imelo dve napaki: bilo je 92 % zaslona namesto celega, in v Samsung Internetu pred različico 21 je celotno pravilo odpadlo, ker tam `svh` ne obstaja — heroj je ostal brez sleherne najmanjše višine in se je sesedel na višino vsebine. Zdaj vse pelje skozi `--svh` iz `:root`, ki je veljaven v vsakem brskalniku, in je za škatlo in oder ista mera — zato se film konča natanko tam, kjer se konča besedilo. */ .hero-stage{justify-content:flex-start; padding-top:calc(var(--nav) + var(--pad));padding-bottom:0} .hero-rail{position:static;flex:none;padding:0 var(--pad); flex-direction:column;gap:2px;line-height:1.25} /* Besedilo sedi na DNU pasu, ne na njegovi sredini (14. 8. 2026). Sredinjenje je bilo smiselno, dokler je bil heroj visok 92 % zaslona in prostora ni bilo veliko. Zdaj, ko je heroj cel zaslon, je na visokem oknu nad naslovom in pod gumbom ostajal enak prazen pas — kader je bil razpolovljen in prekrit točno na sredini, kjer je motiv. `flex-end` besedilo potisne k spodnjemu pasu: film ostane cel nad njim, senca od spodaj pa je natanko tam, kjer je besedilo. Na nizkem zaslonu se ne zgodi nič — vsebina takrat zapolni ves pas in dna se drži sama od sebe. Prekrivanje ni mogoče, ker so letev, vsebina in pas trije členi istega stolpca in ne trije absolutno postavljeni sloji. */ .hero-inner{flex:1 1 auto;display:flex;flex-direction:column; justify-content:flex-end;padding-bottom:var(--pad)} /* Spodnji pas je bil ista past kot letev: `--hero-bar:46px` je bila domneva, v resnici pa se trije podatki na 360 px zložijo v tri vrstice in pas je visok 148 px. Tudi ta gre v tok — heroj je zdaj stolpec treh delov (letev · vsebina · pas), vsebina vzame preostanek. Nobene številke ni več treba uganiti. */ .hero-base{position:static;flex:none} /* Polje pik je bilo pripeto na `--hero-bar`, ki zdaj ne obstaja več kot mera. Na telefonu odpade: pri celici 45 px so to manj kot tri pike čez zaslon, čez film pa jih tako ali tako nihče ne bere kot raster. */ .hero-marks{display:none} /* Naslov in gumbi se skrčita samo, če je zaslon res nizek. `--fit` je privzeto 1 in ga postavi site.js. */ .hero-h1{font-size:calc(clamp(1.9rem,9vw,2.6rem) * var(--fit,1))} .hero-lede{font-size:calc(1rem * var(--fit,1));margin-top:calc(18px * var(--fit,1))} .hero .btn{min-height:calc(62px * var(--fit,1))} .hero-actions{gap:calc(12px * var(--fit,1))} /* ---- 4b · heroj: pokončen film, poln zaslon ---------------- */ /* Na telefonu teče Nord Party (9 : 16) namesto Nord Lemon (16 : 9) — izbiro naredi site.js, ker mora biti sprejeta preden brskalnik začne prenašati. Tu se popravi samo senčenje. Prejšnja senca je bila elipsa, zasidrana spodaj levo, da je desna polovica ležečega kadra ostala nedotaknjena. Na 390 px širine ni nobene "desne polovice", ki bi jo bilo treba varovati — je le en ozek kader, ki ga elipsa potemni po diagonali in pusti napis brez podlage na desni. Namesto nje pas od spodaj navzgor: besedilo, gumba in spodnja letev dobijo enakomerno podlago, zgornjih 60 % filma pa ostane čistih. */ /* Stopnje so 14. 8. 2026 malce potemnjene. Ko je heroj zrasel z 92 % na cel zaslon, se je besedilo pomaknilo više — v pas, kjer je bila senca že na 0,3 — in čez svetel kader (hladilnik s pločevinkami) je obrisana "PRODUKCIJA" izgubila rob. Zgornja tretjina filma ostane nedotaknjena. */ .hero::before{ background: linear-gradient(180deg,rgba(11,11,12,.62) 0,rgba(11,11,12,.3) 11%,rgba(11,11,12,0) 24%), linear-gradient(0deg,rgba(11,11,12,.93) 0,rgba(11,11,12,.84) 20%, rgba(11,11,12,.66) 38%,rgba(11,11,12,.44) 54%, rgba(11,11,12,.2) 68%,rgba(11,11,12,0) 84%)} /* Mehka lisa pod besedilnim stolpcem odpade — pas zgoraj jo nadomesti, dve senci ena čez drugo pa kader samo zablatita. */ .hero-inner::before{display:none} /* ---- 5a · Reborn: film čez cel zaslon ---------------------- */ /* Zaporedje: film pride čez celo širino, se prilepi pod navigacijo in ostane tam, dokler bralec prevozi ~500 px — dovolj, da ga vidi teči — in šele nato se besedilo počasi zapelje čezenj. Predvajalnik gre od roba do roba, zato `.spot-sticky` izgubi stranski odmik, `.spot-copy` pa ga dobi nazaj zase. Razmerje ostane 9 : 16: na 390 px je film visok 693 px, torej 87 % osemsto pikslov visokega zaslona. Raztegniti ga na polnih 100 svh bi pomenilo obrezati kader, in delo se postavitvi ne prilagaja (hišno pravilo 8). */ .spot-sticky{padding-left:0;padding-right:0;padding-top:0;gap:0} .spot-player{top:var(--nav)} .spot-player.v{width:100%;max-width:none;margin:0} /* Besedilo mora film POKRITI, ne pa ga potisniti navzgor. Da ga v celoti prekrije, preden se lepljenje sprosti, mora biti vsaj tako visoko, kot je film. Ta pa je natanko `100vw × 16/9`, ker teče čez celo širino v razmerju 9 : 16. Prej je tu pisalo `100svh`, kar je bilo VEČ od filma in je pod gumbom pustilo 159 px prazne črnine. Vsebine je manj od te višine, zato se razporedi po njej s `space-between`: presledki med naslovom, ledejem, podatki in gumbom se enakomerno razširijo. Prazen prostor tako postane ritem in ne luknja. */ .spot-copy{margin-top:min(calc(var(--svh) * .64),520px); min-height:calc((100vw - var(--sbw)) * 16 / 9); justify-content:space-between; padding:clamp(22px,6vw,34px) var(--pad)} /* ---- 5b · ploščice se obnašajo kot na namizju --------------- */ /* Gumb za predvajanje in vogalne pike so na dotik ostali vidni, ker naj bi povedali, da je ploščica klikljiva. Ne držijo obljube: ploščica se ob drsenju sama zažene, zato je gumb napoved nečesa, kar se že dogaja — natanko iz tega razloga sta bila na namizju odstranjena. Zdaj je enako povsod: ostane kader, spodaj čas trajanja, in ta pove, da je to video. Prepiše `.tile .play{opacity:1}` iz bloka pri 860 px — enaka specifičnost, odloča vrstni red, zato mora ta blok ostati zadnji. */ .tile .play{display:none} .tile .shot i{display:none} /* ---- 5c · vrstica "Naprej" --------------------------------- */ /* Bila je visoka 165 px: "Naprej" v svoji vrsti, pod njo dve povezavi in visreča poševnica, v tretji vrsti osamljena tretja povezava. Videti je bilo kot pokvarjena postavitev, ker je to tudi bila. Dve stvari sta jo popravili: napis "Pogosta vprašanja" je skrajšan na "Vprašanja" (tako se stran imenuje povsod drugod, torej je tudi bolj dosledno), s čimer gredo vse tri povezave v eno vrsto; in oznaka gre nad njih namesto ob njih. Zdaj ~88 px, sredinsko, brez štrlečih ločil. */ .most{flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:4px; /* Ne 12/12. Povezave nosijo 13 px lastnega odmika zaradi 44 px tarče, zato ga blok spodaj dobi dvakrat, zgoraj pa nič — od tod več zraka pod besedilom kot nad njim. Zgornji odmik zato nosi razliko: 25 zgoraj, 12 + 13 spodaj. Optično je zdaj oboje 25 px. */ padding-top:25px;padding-bottom:12px} .most nav{justify-content:center;gap:4px 14px;padding:0} .most a{padding:13px 0} /* Ista napaka, ista rešitev, še na treh mestih: kjer je zadnji otrok povezava `.ul`, njen spodnji odmik pade na odmik posode. */ .klic{padding-bottom:calc(var(--pad) - 13px)} .foot-cols{padding-bottom:calc(clamp(36px,4.6vw,72px) - 4px)} /* V nogi sta dva stolpca povezav in dva navadnega besedila. Povezave nosijo 13 px odmika, navadne vrstice pa nič — zato so se stolpci končali na različnih višinah in spodnji rob je bil enkrat tesen, enkrat prostoren. Navadne vrstice dobijo isti odmik: vsi štirje stolpci imajo zdaj enak korak in se iztečejo na isti črti. Brskalnik brez `:has()` pravilo spregleda in dobi današnje vedenje. */ .foot-cols li:not(:has(a)){padding:4px 0} .foot-legal{align-items:center;padding-top:19px;padding-bottom:6px} /* ---- 5d · sredinska postavitev ----------------------------- */ /* Na telefonu je vse na sredini, ne ob levem robu. En stolpec brez nasprotne uteži naredi iz levo poravnanega stolpca prazno desno polovico; sredina drži stran skupaj. Ena izjema, namenoma: daljše bralno besedilo — `.prose` in odgovori v FAQ — ostane levo poravnano. Sredinsko poravnan štirivrstični odstavek nima ravnega levega roba, oko pa mora vsako vrstico iskati na novo. Naslovi, oznake, kartice in kratki pripisi so drugo — ti so sredinsko boljši. Če jih Žiga hoče vse na sredino, se odstrani ta blok. */ .rail,.hero-rail{justify-content:center;gap:14px} .crumbs,.filtri button{justify-content:center} .crumbs{justify-content:center} .eyebrow{justify-content:center} .shead > *,.shead .lede{text-align:center} .lede,.shead .lede{margin-inline:auto} .stmt,.mid,.huge,.hero-h1{text-align:center} .answer{border-left:0;border-top:3px solid var(--accent);text-align:center} .answer p{margin-inline:auto} .hero-inner{text-align:center} .hero-lede,.hero-mid{margin-inline:auto} .hero-actions{align-items:center} .hero-foot{justify-content:center;text-align:center} .hero-base{justify-content:center} .tile .cap{justify-content:center;text-align:center} .plan,.ladder div{text-align:center;align-items:center} .plan ul li,.ladder div{justify-content:center} .plan ul li{text-align:left} .steps li{justify-items:center;text-align:center} .steps li > *{margin-inline:auto} .spec td{text-align:center} .faq summary{justify-content:center;gap:14px;text-align:center} .klic{justify-content:center;text-align:center;flex-direction:column;gap:14px} .klic > span{margin-inline:auto} .vec,.note{text-align:center} .close > *{text-align:center} .close .btn,.close .lede{margin-inline:auto} .spot-copy,.spot-meta{text-align:center} .plinks a{text-align:center;align-items:center} .foot-mail{display:block;text-align:center} .foot-cols{text-align:center} .foot-cols .eyebrow{justify-content:center} .foot-legal{justify-content:center;text-align:center} .menu,.menu a{text-align:center} .menu .soc{justify-content:center} .callbar{justify-content:center;gap:12px} /* Blokovni gumb: napis je bil pribit spodaj levo, puščica spodaj desno — v sredinski postavitvi je to edini element, ki še vleče na levo. Zdaj sta napis in puščica skupaj na sredini. */ .btn{display:flex;align-items:center;justify-content:center;gap:12px; min-height:66px;text-align:center} .btn span{position:static;left:auto;bottom:auto} .btn::after{position:static;right:auto;bottom:auto;flex:none} .btn:hover::after{transform:translateX(3px)} /* Izjema iz zgornjega pravila: bralno besedilo ostane levo. */ .prose,.prose p,.prose li,.prose h2,.prose h3,.faq .a{text-align:left} .prose{margin-inline:auto} /* ---- 6 · pike --------------------------------------------- */ /* Celica je na 390 px 48,75 px, ploščica pik torej 146 px — manj kot tri pike čez zaslon. Kot sistem se ne berejo več, kot tekstura pa. */ .marks::before{opacity:.32} } /* Zid dela: dve pokončni ploščici v vrsto namesto ene čez cel zaslon. Ena ploščica 9 : 16 je na telefonu visoka 633 px, zato je bilo štirinajst posnetkov 9 348 px dolga kolona — ne portfelj, ampak neskončen vir. Dve v vrsto ostaneta berljivi in nič ni obrezano: to je merilo, ne rez. */ @media (max-width:560px){ .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .pgrid .tile.h{grid-column:span 2} .pgrid .tile .cap{font-size:.875rem;padding-top:9px;gap:7px} .pgrid .tile .cap::before{width:6px;height:6px;margin-top:4px} } /* Najožji telefoni. Ena stopnja manj zraka, da naslovi ne izgubijo vrstic. */ @media (max-width:400px){ :root{--pad:18px} } /* NIZKI ZASLONI. Android z obema letvama brskalnika pusti okoli 660 px višine. Tam heroj ne spravi naslova, ledeja, DVEH blokovnih gumbov in spodnjega pasu naenkrat — `--fit` bi moral naslov stisniti na 24 px, kar je manj od besedila v sekciji pod njim. Namesto tega odpade drugi gumb. "Poglejte naše delo" je poziv, naj bralec podrsa navzdol; na telefonu to naredi s prstom, tudi če gumba ni, in prav pod herojem se delo že začne. Prvi gumb — edini, ki pelje na rezervacijo — ostane, prav tako ledeje. S tem naslov na Žigovem telefonu ostane pri 31 px namesto 24 px. */ @media (max-width:860px) and (max-height:700px){ .hero .btn.ghost{display:none} } /* TELEFON NA BOKU. iPhone 14 Pro Max ima ležeče 390 px višine, Samsung 360 — od tega 52 px navigacije in 46 px spodnjega pasu. V preostalih 260 px se naslov, lede in gumb ne izidejo niti pri najmanjšem `--fit`: izmerjeno 14. 8. 2026, gumb je padel 71 px pod rob zaslona in bil nedosegljiv. Odpade lede. Naslov pove, kaj je, gumb pelje na klic, in to je v ležečem položaju vse, kar telefon zmore pokazati naenkrat. Letev se iz stolpca vrne v vrstico, ker je širine tam na pretek, višine pa nič. Meja je 520 px in ne 700: med 520 in 700 se lede še izide in je koristen. */ @media (max-width:860px) and (max-height:520px){ .hero-lede{display:none} .hero-rail{flex-direction:row;gap:16px;justify-content:space-between} } /* ============================================================ BREZ PREHODA Z MIŠKO 31 pravil :hover in nobene poizvedbe (hover) v datoteki. Na dotik se :hover ob dotiku zaskoči in ploščica ostane dvignjena ali vrstica obarvana do naslednjega dotika drugam. Barvni prehodi so neškodljivi; spodaj so razveljavljeni samo tisti, ki premikajo ali barvajo ozadje. ============================================================ */ @media (hover:none){ .tile:hover{transform:none} .tile:hover .shot img,.tile:hover .shot video{transform:none} .spot-player:hover img,.spot-player:hover video{transform:none} .spot-player:hover .play{scale:1} .steps li:hover,.ladder div:hover,.plinks a:hover,.plan:hover{background:transparent} .marquee li:hover img{opacity:.38;filter:grayscale(1)} .marquee:hover ul{animation-play-state:running} .bio-foto:hover img{filter:grayscale(1) contrast(1.04)} .ul:hover::after{transform:scaleX(0)} .btn:hover::before{transform:translateY(101%)} .btn:hover::after{transform:none} .modal .x:hover{transform:none} /* Odziv na dotik prevzame :active — kratek, brez zaskoka. */ .tile:active{transform:translateY(-1px) scale(.996)} .btn:active::before{transform:translateY(0)} .filtri button:active{border-color:var(--line-strong)} }