/* ═══════════════════════════════════════════════════════════════
Biroplast Solutions — V2 domača stran, postavitve po sekcijah
═══════════════════════════════════════════════════════════════ */
/* ── HERO V3 — GreenTill flagship (dvajseti krog, avgust 2026) ───────────
Hero je zdaj skoraj polnozaslonski: `min-height` sega do dna glave
(izmerjena dejanska višina `.glava`: 114px pri ≥768px, 109px pri ≤760px
— Playwright meritev). `100dvh` je prednosten (upošteva mobilne UI-baze
naslovne/orodne vrstice), `100vh` je deklariran PRED njim kot varnostna
mreža za brskalnike brez podpore za dvh. ─────────────────────────────── */
.hero{
position:relative; overflow:hidden; display:flex; align-items:center;
min-height:calc(100vh - 114px);
min-height:calc(100dvh - 114px);
background:linear-gradient(175deg, var(--navy) 0%, var(--navy-deep) 78%);
color:#fff; padding:var(--sp-6) 0 var(--sp-5);
}
.hero > .wrap{ position:relative; z-index:2; width:100%; }
@media (max-width:760px){
.hero{
min-height:calc(100vh - 109px);
min-height:calc(100dvh - 109px);
}
}
/* ── globinski sistem: 7 neodvisnih plasti, glej index.html za razporeditev.
Vsaka plast se giblje po drugem vektorju in z drugo hitrostjo (data-depth-*),
kar upravlja js/motion.js. Kompozicija je namenoma "plastena" že v mirovanju
(prekrivanje, obrez, prosojnost) — scroll gibanje jo samo še poglobi. ──── */
.hero-depth{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.hero-layer{ position:absolute; }
/* plast 2 — circuit, najgloblja, tonalna, pokriva velik del heroja.
Dvajseti krog: opacity znižana .09→.05, nato v refinement prehodu →.04 —
CGP ozadje naj bo v novi kompoziciji skoraj podzavestno prisotno, ne
opazna "vezje" ilustracija. */
.hero-layer--circuit{
inset:-12% -20% -30% -15%;
color:var(--lime); opacity:.04;
-webkit-mask-position:22% 35%; mask-position:22% 35%;
}
/* plast 5 — sekundarna tehnična podrobnost: drug izrez istega vzorca, cian,
manjša, drugačna pozicija — da se plasti ne zdijo enake. Dvajseti krog:
opacity znižana .07→.04, nato v refinement prehodu →.032. */
.hero-layer--tehnika{
top:-6%; right:-18%; width:62%; height:75%;
color:var(--cyan); opacity:.032;
-webkit-mask-position:68% 60%; mask-position:68% 60%;
-webkit-mask-size:180%; mask-size:180%;
}
/* plast 4 — CGP gradientni sij (že definiran v components.css: .glow) */
.hero .glow-green{ width:640px; height:640px; left:-220px; bottom:-260px; }
.hero .glow-blue{ width:560px; height:560px; right:-180px; top:-220px; }
/* plast 3 — velik obrezan uradni BP znak, delno zunaj desnega/spodnjega roba
— glavni znamčni element ozadja. Dvajseti krog: opacity znižana .19→.12,
nato v refinement prehodu →.09, da ostane komaj zaznaven "environmental"
naglas in ne tekmuje z GreenTill videom, ki je dominanten vizualni
element heroja. Prejšnji `destination-out` popravek za BIG SEE zaščiten
prostor je bil vezan na STARO pozicijo bloka (desno ob videu) — v
asimetrični postavitvi je BIG SEE blok v LEVEM stolpcu, ta znak pa
ostaja desno ob/pod videom, zato se območji ne prekrivata in popravek
ni potreben (preverjeno tudi po premiku BIG SEE bloka navzgor v
refinement prehodu, glej dnevnik). */
.hero-layer--bp{
right:-11%; bottom:-15%; width:64%; max-width:720px; aspect-ratio:1494/902;
opacity:.09;
}
/* ── oživljen circuit naglas: nekaj vozlišč diha, dve pičici počasi potujeta
po poti od besedila proti GreenTillu. Namenoma zadržano — 80–90% mreže
(glavna gfx-circuit plast) ostaja povsem mirna, samo ta majhen naglas
"diha". Nikoli ne izgleda kot gaming/RGB — počasni cikli, nizka prosojnost,
samo cian/limeta iz CGP palete. ──────────────────────────────────────── */
.hero-circuit-svg-vez{ position:absolute; inset:0; pointer-events:none; }
.hero-circuit-svg{
top:6%; left:34%; width:64%; height:82%;
overflow:visible; opacity:.6;
}
/* Dvajseti krog: prejšnji mask-popravek za to SVG plast (izrezana luknja
nad BIG SEE blokom) je bil pozicioniran za STARO postavitev bloka. V novi
asimetrični kompoziciji je BIG SEE blok v levem besedilnem stolpcu, ta
SVG pot pa teče po ozadju desno/pod videom — območji se ne prekrivata
več (preverjeno pri vseh 5 zahtevanih širinah, glej dnevnik). Če bi se v
prihodnji postavitvi znova prekrila, uporabi enako `mask-image` tehniko
(NE `mix-blend-mode:destination-out` — na tej redki/tanki SVG vsebini je
v enem od brskalnikov nepredvidljivo izrisal poln črn oval namesto luknje,
glej opombo pri poprejšnjem popravku v dnevniku). */
.cvez-pot{ stroke:var(--cyan); opacity:.32; }
.cvez-vozlisce circle{ fill:var(--cyan); opacity:.22; animation:cvez-dihanje 3.8s ease-in-out infinite; }
.cvez-vozlisce circle:nth-child(2){ animation-delay:.5s; animation-duration:4.4s; }
.cvez-vozlisce circle:nth-child(3){ animation-delay:1.1s; animation-duration:3.4s; }
.cvez-vozlisce circle:nth-child(4){ animation-delay:.2s; animation-duration:4.8s; }
.cvez-vozlisce circle:nth-child(5){ animation-delay:1.6s; animation-duration:3.9s; }
.cvez-vozlisce circle:nth-child(6){ animation-delay:.9s; animation-duration:4.1s; }
@keyframes cvez-dihanje{ 0%,100%{ opacity:.18; } 50%{ opacity:.7; } }
.cvez-utrip{
fill:var(--lime); opacity:0; offset-rotate:0deg;
animation:cvez-potovanje 6.5s linear infinite;
}
.cvez-utrip--b{ fill:var(--cyan); animation-duration:7.4s; animation-delay:1.8s; }
@keyframes cvez-potovanje{
0%{ offset-distance:0%; opacity:0; }
8%{ opacity:.75; }
90%{ opacity:.75; }
100%{ offset-distance:100%; opacity:0; }
}
@media (max-width:760px){ .hero-circuit-svg{ display:none; } }
/* Namizni prelom naslova v heroju (glej opombo ob ".hero-v3-naslov h1" v
namizni media poizvedbi spodaj) na ožjih zaslonih ne velja — tam se
naslov prelamlja naravno glede na razpoložljivo širino. */
@media (max-width:960px){ .hero-v3-naslov h1 br.hero-h1-prelom{ display:none; } }
@media (prefers-reduced-motion:reduce){
.cvez-vozlisce circle{ animation:none; opacity:.4; }
.cvez-utrip{ animation:none; opacity:0; }
}
/* ── HERO V3 postavitev — dvajseti krog, TRETJA prilagoditev ("preserve
native 16:9, full-screen cinematic presentation"). Aleš je opozoril, da
izvorni GreenTill video je nativno 16:9 in da ga NIKOLI ne smemo obrezati/
raztegniti — namesto prejšnjega "besedilo | video" stolpičnega para
(kjer je bil video prisiljen v ~4:3.4 okvir, kar je pri `object-fit:cover`
neizogibno obrezovalo levi/desni rob 16:9 posnetka, PLUS omejen na ozek
desni stolpec) je video zdaj TEMELJ CELOTNE Hero sekcije na namizju: poln,
nespremenjen 16:9 kader, čez CEL zaslon (ne le znotraj `.wrap`-ove 1280px
omejitve — glej index.html za DOM razlago, zakaj je `.hero-video-stage`
neposreden otrok `.hero`, med dvema `.wrap` elementoma), z besedilom
NALOŽENIM čez njegov levi del. Na mobilnem/tabličnem (kjer navodilo
izrecno ne velja — brief govori o "DESKTOP HERO") ostane preprosta, varna,
navpično zložena postavitev: naslov → video (poln 16:9, brez obreza) →
opis → CTA → BIG SEE, natanko v tem vrstnem redu — isti DOM, ista logika
kot pri `.hero-scroll-cue` (glej opombo tam): `.hero` je `flex-direction:
column` s `justify-content:center`, zato njegovi trije neposredni tok-otroci
(`.wrap` #1, `.hero-video-stage`, `.wrap` #2) preprosto naravno padejo
drug pod drugega, navpično centrirano kot skupina — na namizju
`.hero-video-stage` postane `position:absolute` (izvzet iz toka, zato
oba `.wrap`-a "zlezeta skupaj" tik enega pod drugim, video pa leži ČEZ
CEL hero za njima/pod njima prek `z-index`). ─────────────────────────── */
.hero{ flex-direction:column; justify-content:center; align-items:stretch; row-gap:var(--sp-2); }
.hero-v3-opis .lead{ color:var(--muted-on-navy); max-width:480px; margin:0; font-size:19px; }
.hero-eyebrow{ color:var(--lime); }
.hero h1{ margin:var(--sp-2) 0 0; }
.hero-v3-cta-vez{ margin:var(--sp-2) 0; }
.hero-v3-cta-vez .btn{ display:inline-flex; align-items:center; gap:8px; }
.hero-v3-cta-vez .btn svg{ transition:transform var(--dur-fast) var(--ease-premium); }
.hero-v3-cta-vez .btn:hover svg, .hero-v3-cta-vez .btn:focus-visible svg{ transform:translateX(3px); }
/* video kot navaden tok-blok — mobilno/tablično (≤960px), glej opombo zgoraj.
Širina/margin ročno posnema `.wrap`-ov lasten gutter (`calc(100% - gutter*2)`
+ `margin:0 gutter`), ker `.hero-video-stage` tu ni znotraj `.wrap`, ampak
njegov neposreden sosed — brez tega bi na mobilnem segal do golega roba
zaslona, medtem ko besedilo nad/pod njim ostaja znotraj gutter-ja.
`overflow:hidden` je neškodljiva varnostna mreža (video sam nikoli ne
preseže svojega točno-16:9 okvirja). Barva ozadja elementa je nastavljena
na navy (namesto privzeto prosojne/črne), da morebitna zaokrožitev robov
širine/višine zaradi zaokroževanja px vrednosti ne pusti vidnega roba. */
/* nadaljevanje 34 — brif "Replace ONLY the GreenTill HERO video": nov
posnetek je nativno 2560×1080 (širši od prejšnjega 16:9), zahtevan
`object-fit:cover` (namesto prejšnjega `contain`) na VSEH širinah, da
video vedno zapolni svojo škatlo brez praznih robov/črnih pasov.
`aspect-ratio` škatle je zato usklajen z NATIVNIM razmerjem novega
videa (namesto prejšnjega trdo kodiranega 16/9) — na mobilnem/tabličnem
to pomeni `cover` brez odvečnega obreza (škatla ima isto razmerje kot
video), na namizju (glej media query spodaj) `cover` izkoristi širok
zaslon in po potrebi obreže samo zgoraj/spodaj (video je širši od
skoraj vsakega zaslona), nikoli levo/desno. */
.hero-video-stage{
position:relative;
width:calc(100% - var(--gutter) * 2); margin:0 var(--gutter);
aspect-ratio:2560/1080; overflow:hidden;
background:var(--navy-deep);
}
.hero-video{
display:block; width:100%; height:100%; object-fit:cover; object-position:center center;
background:transparent;
}
/* ── namizna postavitev (≥961px): `.hero-video-stage` postane polnozaslonska
prekrivka glede na `.hero` (edini pozicioniran prednik brez ožje omejitve
— obe `.wrap` besedilni skupini ostaneta znotraj svoje običajne 1280px
omejitve in ostaneta levo poravnani, video pa sega čez CEL hero). ────── */
@media (min-width:961px){
.hero-v3-naslov, .hero-v3-opis, .hero-v3-cta-vez, .hero-nagrada-blok{
position:relative; z-index:2; max-width:480px;
}
/* 22. 9. 2026 — Alešev brief "CHANGE ONLY THE GREENTILL HERO HEADLINE".
Nov naslov ("Blagajna, ustvarjena iz našega znanja in izkušenj.") je
precej daljši od prejšnjega in se v 480 px stolpcu razlomi na pet
drobnih vrstic. Brief izrecno dovoljuje prilagoditev SAMO prelamljanja
oziroma širine besedilnega stolpca in izrecno prepoveduje zmanjšanje
pisave — zato je tu razširjen IZKLJUČNO stolpec naslova. Podnaslov,
gumb in blok z nagrado ostajajo pri 480 px (pravilo zgoraj), zato se
njihova postavitev ni spremenila.
Zakaj je prelom v index.html zapisan z
, ne samo s širino: želeni
namizni prelom je "Blagajna, ustvarjena / iz našega znanja / in
izkušenj.", prva vrstica pa je pri tej pisavi ŠIRŠA (~664 px pri 72 px)
od druge skupaj z besedico "in" (~618 px). Vsaka širina, pri kateri
prva vrstica ostane cela, torej samodejno potegne "in" v drugo vrstico.
Želenega preloma s samo širino ni mogoče doseči — mogoč je le
eksplicitno. Na ≤960 px se ta prelom izklopi (pravilo pod to
poizvedbo) in naslov se prelamlja povsem naravno, kot zahteva brief.
Omejitev širine je zapisana na samem