/* ═══════════════════════════════════════════════════════════════ Biroplast Solutions — GLOBINSKO OZADJE (poskus, 24. 9. 2026) ─────────────────────────────────────────────────────────────── Alešev brif: "kako bi v ozadje spletne strani umestila neko ozadje, da bi zgledalo bolj v več layerjih — a je to ok, al ne bo tako moderno?" IZHODIŠČE. Stran plasti ŽE ima (depth-system.css: svetlobna polja, delne mreže, tehnične linije). Težava ni v tem, da bi plasti manjkale — na domači strani jih je čez 70 — ampak v tem, da se VSAKA PLAST USTAVI NA ROBU SEKCIJE. Vsaka sekcija ima svoj overflow:hidden in svoj nabor okraskov, zato oko bere zaporedje zaprtih škatel, ne enega prostora z globino. ODLOČITEV. Ozadja NE delamo kot tapeto (vzorec ali tekstura čez celo stran) — to je videz izpred desetih let in bi se tepel z upodobitvami GreenTilla, ki so najmočnejše, kar stran ima. Delamo ga kot ENO NEPREMIČNO GLOBINO, v katero so temne sekcije OKNA. KAKO DELUJE — trije mehanizmi, vsi v tej datoteki: 1. `.bp-globina` je en sam element s `position:fixed`, ki leži ZA celotno stranjo (z-index:-1). Ker je pritrjen na okno in ne na dokument, ostane pri miru, medtem ko se sekcije premikajo čezenj. 2. Temne (steel) sekcije dobijo NALAHNO PROSOJNO podlago. Ker so razporejene po strani (3., 4. in 6. sekcija), se skoznje vidi ista, neprekinjena globina — in ker ta globina miruje, se odsvit ob drsenju premika čez sekcijo. To je tisto, kar oko prebere kot "več plasti", ne dodatni okraski. Svetle sekcije so neprosojne, zato ostanejo nedotaknjene. 3. Meje med sekcijami dobijo USKLAJENE PARE (glej razdelek 3 spodaj) — po tehniki, ki jo depth-system.css, razdelek 5, že priporoča, a na domači strani ni bila uporabljena nikjer. VARNOST. Nič ne prečka DOM-meje med sekcijama, ker je prav to 8. 9. 2026 povzročilo ~180 px vodoravnega prelivanja (opozorilo je zapisano v depth-system.css). Vsi elementi ostanejo znotraj lastne sekcije. OBSEG. Datoteka je vklopljena SAMO tam, kjer je na razred `bp-ozadje` — trenutno samo index.html. Nobena druga stran in /tv se ne spremenita. Če ti bo všeč, gre na ostale strani z eno vrstico in enim razredom na . ═══════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────── 1. GLOBINSKI SLOJ Barve so izključno iz obstoječe CGP palete (tokens.css) — nobenega novega odtenka. Polja so radialni gradienti, ne slike in ne filtri: brskalnik jih izriše enkrat in jih ob drsenju samo prestavi, zato je strošek zanemarljiv (nobenega blur(), nobene tekstur ali PNG-ja). ─────────────────────────────────────────────────────────────── */ .bp-globina{ position:fixed; inset:0; z-index:-1; pointer-events:none; background-color:#16243a; background-image: /* hladen odsvit zgoraj levo */ radial-gradient(ellipse 62% 56% at 14% 6%, rgba(23,185,236,.62), transparent 64%), /* globlji moder odsvit desno na sredini */ radial-gradient(ellipse 58% 52% at 94% 42%, rgba(4,123,193,.58), transparent 62%), /* zelen odsvit spodaj levo — edini topel trenutek */ radial-gradient(ellipse 64% 58% at 18% 94%, rgba(24,165,75,.42), transparent 64%), /* osnovna globina — namenoma širok razpon od svetlejšega vogala do skoraj črne modre, da se VRH in DNO iste sekcije vidno razlikujeta */ linear-gradient(162deg, #3f5c7e 0%, var(--navy) 34%, var(--navy-deep) 66%, #101c29 100%); /* enkratna promocija v svojo plast, da drsenje ne sproža ponovnega izrisa; namenoma BREZ will-change, ker je element trajen */ transform:translateZ(0); backface-visibility:hidden; } /* Tanka tehnična mreža — isti recept kot `.dpt-grid`, le da tu miruje in je zabrisana proti robovom, da nikjer ne konča z vidno črto. Drži se ravni ~3 %, torej je bolj slutena kot vidna; njena naloga je samo, da globina ni gol gradient. */ .bp-globina::before{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 96px), repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 96px); -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 44%, #000 0%, transparent 78%); mask-image:radial-gradient(ellipse 70% 62% at 50% 44%, #000 0%, transparent 78%); } /* ─────────────────────────────────────────────────────────────── 2. OKNA — temne sekcije postanejo nalahno prosojne Gradienti so ISTI kot v pages.css (isti koti, isti ustavljalci, iste barve) — dodana je samo prosojnost. Ker je globina za njimi temnejša od `--steel`, se kontrast z belim besedilom ne poslabša, ampak rahlo IZBOLJŠA. `background-image` namerno prepiše samo sliko; morebitna `background-color` sekcije ostane, zato je spodaj pri vsaki izrecno postavljena na transparent. ─────────────────────────────────────────────────────────────── */ .bp-ozadje .bp-okno{ background-color:transparent; } /* 3. sekcija — "Lastna strojna oprema" */ .bp-ozadje .hardware.bp-okno{ background-image:linear-gradient(165deg, color-mix(in srgb, var(--steel) 78%, transparent) 0%, color-mix(in srgb, var(--navy-mid) 78%, transparent) 42%, color-mix(in srgb, var(--navy) 78%, transparent) 72%, color-mix(in srgb, var(--navy-deep) 80%, transparent) 100%); } /* 4. sekcija — programska oprema */ .bp-ozadje .sw-sekcija.bp-okno{ background-image:linear-gradient(165deg, color-mix(in srgb, var(--steel) 78%, transparent), color-mix(in srgb, var(--steel-deep) 78%, transparent) 65%, color-mix(in srgb, var(--navy-deep) 80%, transparent)); } /* 6. sekcija — servis */ .bp-ozadje .servis-temna.bp-okno{ background-image:linear-gradient(160deg, color-mix(in srgb, var(--navy-mid) 78%, transparent) 0%, color-mix(in srgb, var(--navy) 78%, transparent) 55%, color-mix(in srgb, var(--navy-deep) 80%, transparent) 100%); } /* Brskalniki brez `color-mix()` (zelo stari) dobijo neprosojno različico iz pages.css in stran je videti kot prej — degradacija je tiha, nič se ne razlomi. */ /* VAROVALO: 10. sekcija (zaključni CTA) je edina na strani BREZ lastne podlage — brez tega bi se skoznjo videla temna globina in bel CTA bi se znašel na temnem. Razred je na njej izrecno, da ne posegam v splošno pravilo `.section`. */ .bp-ozadje .bp-trdno{ background:var(--surface); } /* ─────────────────────────────────────────────────────────────── 3. USKLAJENI PARI NA MEJAH SEKCIJ Po depth-system.css, razdelek 5: en element tik ob SPODNJEM robu sekcije N in barvno ter pozicijsko usklajen element tik ob VRHU sekcije N+1, vsak znotraj SVOJE sekcije. Nič ne prečka meje, zato se stari problem z vodoravnim prelivanjem ne more ponoviti. Vodoravno so namenoma potisnjeni STRAN od roba zaslona (left/right v odstotkih, nikoli negativne vrednosti v px), ker je bilo prav seganje čez levi/desni rob vzrok tiste napake. ─────────────────────────────────────────────────────────────── */ .bp-sij{ position:absolute; z-index:0; pointer-events:none; border-radius:50%; filter:none; opacity:var(--bp-sij-op, .5); background:radial-gradient(ellipse at center, var(--bp-sij-c, rgba(23,185,236,.42)), transparent 70%); } /* spodnji rob sekcije N */ .bp-sij--dno{ bottom:calc(var(--bp-sij-h, 420px) / -2); } /* zgornji rob sekcije N+1 — isti odmik navzgor, zato se polovici ujameta v eno samo, neprekinjeno svetlobo čez mejo */ .bp-sij--vrh{ top:calc(var(--bp-sij-h, 420px) / -2); } .bp-sij{ width:var(--bp-sij-w, 620px); height:var(--bp-sij-h, 420px); } /* ─────────────────────────────────────────────────────────────── 4. ELEVACIJA — vsebina se dvigne od podlage tokens.css ima `--sh-sm/md/lg`, a te so računane za TEMNO senco na SVETLI podlagi. Na temnih sekcijah so neuporabne (rjava megla), zato so tu tri ustreznice za temno podlago. Lestvica je ista (majhna/srednja/velika), da ostane sistem en sam. ─────────────────────────────────────────────────────────────── */ :root{ --sh-dark-sm: 0 2px 10px rgba(6,14,24,.28); --sh-dark-md: 0 14px 34px rgba(6,14,24,.36); --sh-dark-lg: 0 28px 64px rgba(6,14,24,.46); } /* medijski okvirji v programski sekciji in poti v servisni sekciji so edini "kartični" elementi na temnih podlagah domače strani */ .bp-ozadje .sw-sekcija .sw-media-okvir{ box-shadow:var(--sh-dark-lg); } .bp-ozadje .servis-temna .pot{ box-shadow:var(--sh-dark-md); transition:box-shadow var(--dur-med) var(--ease-premium), transform var(--dur-med) var(--ease-premium); } .bp-ozadje .servis-temna .pot:hover{ box-shadow:var(--sh-dark-lg); transform:translateY(-3px); } /* ─────────────────────────────────────────────────────────────── 5. MOBILNO IN DOSTOPNOST Na telefonu je fiksni sloj poceni (ena plast, brez filtrov), a mreža in tretje polje sta tam nevidna in samo obremenjujeta izris, zato ju umaknemo. Pari ob mejah so na ozkih zaslonih preveliki glede na višino sekcije, zato jih tudi skrijemo. ─────────────────────────────────────────────────────────────── */ @media (max-width:760px){ .bp-globina::before{ display:none; } .bp-sij{ display:none; } } /* Uporabnikom, ki so izklopili gibanje, nič ne utripa — globina ostane, ker sama po sebi miruje, umaknemo pa vse, kar se na strani premika nad njo. */ @media (prefers-reduced-motion: reduce){ .bp-globina{ transform:none; } } /* Pri tisku ozadja ni. */ @media print{ .bp-globina, .bp-sij{ display:none !important; } }