znotraj sekcije, ki ima
position:relative in overflow:hidden (razen pri namernem
.dpt-section-bleed prečkanju meje, glej razdelek 5).
Velikost/pozicija/prosojnost se nastavi prek CSS spremenljivk na
elementu samem (inline style ali stran-specifičen razred) — width/
height sta omejena z min(…, 90vw), da polje na ozkih zaslonih ne
povzroči horizontalnega prelivanja, ne glede na nastavljeno --dpt-w.
Primer:
*/
.dpt-field{
position:absolute; border-radius:50%; pointer-events:none; z-index:0;
width:min(var(--dpt-w, 560px), 90vw);
height:min(var(--dpt-h, 560px), 90vw);
filter:blur(var(--dpt-blur, 110px));
opacity:var(--dpt-op, 1);
}
.dpt-field--cyan{ background:radial-gradient(circle, rgba(23,185,236,.5), transparent 72%); }
.dpt-field--blue{ background:radial-gradient(circle, rgba(4,123,193,.45), transparent 72%); }
.dpt-field--green{ background:radial-gradient(circle, rgba(24,165,75,.4), transparent 72%); }
.dpt-field--lime{ background:radial-gradient(circle, rgba(171,208,57,.4), transparent 72%); }
.dpt-field--navy{ background:radial-gradient(circle, rgba(51,72,97,.4), transparent 72%); }
/* ── 2. PARTIAL GRID (izgine v whitespace) ─────────────────────────
Kot obstoječi .circuit-field iz components.css, a NIKOLI čez celo
sekcijo — vedno z mask-image fade proti enemu vogalu/predelu, zelo
nizka prosojnost. Barva prek `color` (currentColor).
*/
.dpt-grid{
position:absolute; inset:0; pointer-events:none; overflow:hidden;
color:var(--navy); z-index:0;
}
.dpt-grid::before{
content:''; position:absolute; inset:-10%;
background-image:
repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 44px),
repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 44px);
/* nadaljevanje 27 — brif "MULTI-LAYER TECH ENVIRONMENT" v2: privzeta
gostota ostaja IDENTIČNA (.05) na vseh dosedanjih mestih — samo
sekcije, ki eksplicitno nastavijo `--dpt-grid-op` na SAMEM elementu
(inline style), dobijo močnejšo/šibkejšo gostoto. Brez sprememb
videza na katerikoli obstoječi strani/sekciji. */
opacity:var(--dpt-grid-op, .05);
}
.dpt-grid--tr::before{ -webkit-mask-image:radial-gradient(ellipse 620px 460px at 100% 0%, #000 0%, transparent 72%); mask-image:radial-gradient(ellipse 620px 460px at 100% 0%, #000 0%, transparent 72%); }
.dpt-grid--tl::before{ -webkit-mask-image:radial-gradient(ellipse 620px 460px at 0% 0%, #000 0%, transparent 72%); mask-image:radial-gradient(ellipse 620px 460px at 0% 0%, #000 0%, transparent 72%); }
.dpt-grid--bl::before{ -webkit-mask-image:radial-gradient(ellipse 620px 460px at 0% 100%, #000 0%, transparent 72%); mask-image:radial-gradient(ellipse 620px 460px at 0% 100%, #000 0%, transparent 72%); }
.dpt-grid--br::before{ -webkit-mask-image:radial-gradient(ellipse 620px 460px at 100% 100%, #000 0%, transparent 72%); mask-image:radial-gradient(ellipse 620px 460px at 100% 100%, #000 0%, transparent 72%); }
.dpt-grid--behind-media::before{ -webkit-mask-image:radial-gradient(ellipse 46% 60% at 72% 45%, #000 0%, transparent 75%); mask-image:radial-gradient(ellipse 46% 60% at 72% 45%, #000 0%, transparent 75%); }
.on-navy .dpt-grid{ color:#bcd3e6; }
/* ── 3. VELIKI ABSTRAKTNI TEHNIČNI ELEMENTI (SVG ovojnica) ─────────
Ultra tanke linije/loki/koordinate, delno izven viewporta, opacity
približno 3–8 %. `width`/`height` (ali samo `width` + `aspect-ratio`
znotraj SVG viewBox) prek inline style. Vsak
ZNOTRAJ mora imeti
fill="none" xmlns="http://www.w3.org/2000/svg" (glej hrošč #2 zgoraj).
…
*/
.dpt-line{ position:absolute; pointer-events:none; z-index:0; opacity:var(--dpt-line-op, .06); }
.dpt-line svg{ width:100%; height:100%; display:block; overflow:visible; }
/* ── 4. OGROMEN BLED OZADJE-NAPIS / ŠTEVILKA ───────────────────────
Zelo velik, zelo bled tehnični identifikator (številka, kratica —
"01", "POS", "MFP" …), pogosto obrezan ob robu sekcije. Uporabi
IZJEMNO redko (največ 1× na stran, ne v vsaki sekciji — brif, t. 11).
font-size je omejen z min(…, 34vw) proti prelivanju na ozkih zaslonih.
01
*/
.dpt-number{
position:absolute; pointer-events:none; z-index:0; user-select:none;
font-family:var(--fh); font-weight:800; line-height:.8;
font-size:min(var(--dpt-number-size, 300px), 34vw);
color:var(--dpt-number-color, var(--navy));
opacity:var(--dpt-number-op, .035);
letter-spacing:-.02em;
}
/* ── 5. ELEMENTI, KI "PREČKAJO" MEJO SEKCIJ ────────────────────────
POZOR — praktična izkušnja (8. 9. 2026, davcne-blagajne.html):
dobesedno overflow:visible na sekciji + element, ki sega čez njen
rob, je na 1440px povzročil ~180px HORIZONTALNEGA prelivanja cele
strani (element, ki sega čez desni/levi rob polnobarvne sekcije,
sega tudi čez rob viewporta, ker sekcija sama sega čez cel zaslon).
Body ima sicer `overflow-x:clip` (base.css, .no-scroll-x), a to NI
zanesljivo zadostovalo, da bi document.documentElement.scrollWidth
ostal pri 0 — v praksi je bilo izmerjeno realno prelivanje.
ZATO: privzeto NE uporabljaj `.dpt-section-bleed` (overflow:visible)
za prečkanje meje med sekcijama. Namesto tega uporabi VARNEJŠO
"usklajen par" tehniko: en `.dpt-field`/`.dpt-line` tik ob SPODNJEM
robu sekcije N (znotraj njenega LASTNEGA overflow:hidden), in drug,
barvno/pozicijsko usklajen element tik ob VRHU sekcije N+1 (znotraj
NJENEGA lastnega overflow:hidden). Oba blizu skupne meje ustvarita
vtis kontinuitete brez dejanskega DOM-prelivanja — to je privzeti,
priporočeni pristop za brief razdelek 6 na VSEH straneh.
`.dpt-section-bleed` ostaja na voljo SAMO za primere, kjer si prepričan,
da prehajajoč element NE sega prek levega/desnega roba (samo top/bottom,
z vodoravno pozicijo trdno znotraj sekcije) — in po vsaki taki uporabi
OBVEZNO preveri document.documentElement.scrollWidth na 1920/1440/1024/
mobilnem, preden dostaviš. */
.dpt-section-bleed{ position:relative; overflow:visible; }
/* ── 6. OSPREDJE — vsebina vedno nad plastmi ───────────────────────
Vsak neposredni "vsebinski" wrap znotraj sekcije s plastmi potrebuje
position:relative + z-index:1, da ostane nad .dpt-* plastmi
(te imajo same z-index:0). Običajno je to kar `.wrap` sekcije. */
.dpt-fg{ position:relative; z-index:1; }
/* ── 7. KARTICE — rahla dodatna globina (brif, t. 9) ───────────────
Za ločitev kartic od podlage BREZ močnih senc: tanka svetla obroba
zgoraj (inset highlight) + rahlo globlja senca na hover. Dodaj ta
razred POLEG obstoječega razreda kartice posamezne strani — ne
nadomešča stran-specifičnih barv/robov, samo doda globino.
…
*/
.dpt-card{
box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--sh-sm);
transition:box-shadow var(--dur-med) var(--ease-premium), transform var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium);
}
/* 9. 9. 2026 — "GLOBALNA ANIMACIJA KARTIC" brif: rahlo (~20-30%) bolj
izrazito kot prej (translateY -2→-3px, dodan rahel border-color
odziv na karticah, ki imajo obrobo) + ikona znotraj SAMODEJNO reagira
(t. 5 brifa) — brez dodatnega HTML razreda, deluje na katerikoli
".icon-box" znotraj ".dpt-card". Kartice s tem razredom so v tem
projektu izključno informativne/neklikljive, zato NAMENOMA ni scale
ali animirane obrobe (t. 11 brifa: subtle za non-clickable). */
.dpt-card:hover{
box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 26px rgba(42,61,80,.09);
transform:translateY(-3px);
border-color:rgba(23,185,236,.3);
}
.dpt-card .icon-box{ transition:transform var(--dur-med) var(--ease-premium), background var(--dur-med) var(--ease-premium), color var(--dur-med) var(--ease-premium); }
.dpt-card:hover .icon-box{ transform:translateY(-2px) scale(1.05); background:rgba(23,185,236,.14); color:var(--blue); }
.dpt-card:hover .icon-box.blue{ background:rgba(24,165,75,.14); color:var(--green); }
@media (prefers-reduced-motion: reduce){
.dpt-card{ transition:none; }
.dpt-card:hover{ transform:none; }
.dpt-card:hover .icon-box{ transform:none; }
}
/* ── 8. PRODUKT/SLIKA GLOBINA (brif, t. 10) ────────────────────────
Ovij produktno sliko v .dpt-media-wrap: doda mehko ambient svetlobo
za sliko + zelo subtilno "stik s podlago" senco pod njo, da slika
ne izgleda kot pravokotnik, položen na ozadje. Uporabi skupaj z enim
.dpt-field v ozadju (position:absolute znotraj istega wrapperja).
*/
.dpt-media-wrap{ position:relative; }
.dpt-media-wrap::after{
content:''; position:absolute; left:8%; right:8%; bottom:-18px; height:36px;
background:radial-gradient(ellipse, rgba(23,34,46,.16), transparent 72%);
filter:blur(14px); z-index:0; pointer-events:none;
}
.dpt-media-wrap > img,
.dpt-media-wrap > picture,
.dpt-media-wrap > video{ position:relative; z-index:1; }
/* ═══════════════════════════════════════════════════════════════
DEL 2 — 8. 9. 2026, "GLOBAL ANIMATED TECHNOLOGY BACKGROUND SYSTEM"
+ "GLOBAL SUBPAGE CORRECTION" (dva zaporedna brifa istega dne).
NAMEN: (a) prejšnja svetla obravnava je bila mestoma PREVEČ FLAT —
LIGHT in MID sekcije so bile vizualno skoraj neločljive; (b) stran
je imela na več mestih ponavljajoč se TEMEN navy hero brez povezave
z novim svetlim tehnološkim jezikom, ki naj ga zdaj nadomesti svetlo,
animirano CGP tehnološko ozadje (referenčna slika: ledeno svetlo
modro ozadje, cyan/blue ambient, subtle green, tanke circuit poti s
coloriranimi nodi, delni grid). Temne sekcije NISO odstranjene v
celoti — vsaka daljša stran obdrži ~1 strateško temno kontrastno
sekcijo (ni nujno hero), preostanek prehaja na nov svetel sistem.
Ta razdelek DOPOLNJUJE zgornje primitive (ne nadomešča jih) z:
9 — jasno ločljiv MID ton (razdelek "3 tonalna nivoja")
10 — "hero-light" recept, ki nadomesti temen navy hero
11 — animacijski modifikatorji (glow/grid drift, signal, pulz)
12 — majhen "node" gradnik za circuit poti
═══════════════════════════════════════════════════════════════ */
/* ── 9. MID TON — jasno ločljiv od --surface-alt ───────────────────
Prejšnji ".on-surface-alt" (--surface-alt:#f5f7f9) je bil PREBLIZU
belini, da bi ustvaril občuten "MID" nivo med LIGHT in DARK. Nov
".on-mid"/".on-mid-deep" je namenoma opazno temnejši (hladen
blue-grey), a ostaja svetel — NI dodatna barva izven CGP palete,
samo bolj nasičena redčitev --navy na svetli podlagi. Uporabi na
sekciji namesto ".on-surface-alt", kadar mora biti tonalni skok od
sosednje LIGHT sekcije jasno viden že v pomanjšanem long-page
posnetku (brif "GLOBAL SUBPAGE CORRECTION", t. 4). */
:root{
--mid: #dbe6ee; /* jasen MID — approx. blend surface-alt + 20% navy */
--mid-deep: #cee0ea; /* močnejša varianta za hero/CTA MID območja */
--ice: #eef4f8; /* zelo svetla "ledeno modra" osnova za svetle heroje (nadomešča dark navy hero gradient) */
--ice-deep: #e2edf3; /* temnejši rob iste ledene osnove, za gradient */
}
.on-mid{ background:var(--mid); }
.on-mid-deep{ background:var(--mid-deep); }
.on-mid h2, .on-mid h3, .on-mid-deep h2, .on-mid-deep h3{ color:var(--ink); }
.on-mid .dpt-grid, .on-mid-deep .dpt-grid{ color:var(--navy); }
/* nadaljevanje 18 — manjkajoči VMESNI koraki med "skoraj bela"
(--surface-alt) in "jasen MID" (--mid) tonoma zgoraj: brief "GLOBAL
DEPTH / BACKGROUND REDESIGN" (t. 2) zahteva 3 jasno ločljive svetle
stopnje (LIGHT/MID LIGHT/TECH MID) namesto samo dveh — obstoječa
--ice/--ice-deep spremenljivki (zgoraj, prvotno definirani samo za
.dpt-hero-light gradient) že ustrezata "MID LIGHT" stopnji, manjkala
je le utility za uporabo kot ravna podlaga sekcije (ne le gradient
postaja). Lestvica: --surface-alt (#f5f7f9, LIGHT) → --ice/--ice-deep
(#eef4f8/#e2edf3, MID LIGHT) → --mid/--mid-deep (#dbe6ee/#cee0ea,
TECH MID) — vse že obstoječi CGP-izpeljani tokeni, brez novih barv. */
.on-ice{ background:var(--ice); }
.on-ice-deep{ background:var(--ice-deep); }
.on-ice h2, .on-ice h3, .on-ice-deep h2, .on-ice-deep h3{ color:var(--ink); }
.on-ice .dpt-grid, .on-ice-deep .dpt-grid{ color:var(--navy); }
/* nadaljevanje 20 — dva nova nivoja NAD (temneje od) ".on-mid": glej
utemeljitev tokenov v tokens.css. ".on-strong" je še vedno SVETLA
podlaga (samo opazno globlja/bolj nasičena od ".on-mid") — h2/h3 zato
ostajata temni (var(--ink)), enako kot pri ostalih svetlih stopnjah.
".on-steel" je PRAVI vmesni temno-svetel ton (glej brif "STRONG
CONTRAST SECTION" — ne flat navy, a jasno temnejši od svetlega dela
strani) — besedilo zato sledi ISTEMU vzorcu kot ".on-navy" (belo
besedilo, obstoječi ".on-navy .lead"/".eyebrow.on-navy" razredi se
torej lahko ponovno uporabijo tudi tukaj, glej primer uporabe spodaj
v razdelku 13). */
.on-strong{ background:var(--strong); }
.on-strong-deep{ background:var(--strong-deep); }
.on-strong h2, .on-strong h3, .on-strong-deep h2, .on-strong-deep h3{ color:var(--ink); }
.on-strong .dpt-grid, .on-strong-deep .dpt-grid{ color:var(--navy); }
.on-steel{ background:var(--steel); color:#fff; }
.on-steel-deep{ background:var(--steel-deep); color:#fff; }
.on-steel h2, .on-steel h3, .on-steel-deep h2, .on-steel-deep h3{ color:#fff; }
.on-steel .dpt-grid, .on-steel-deep .dpt-grid{ color:#bcd3e6; }
/* nadaljevanje 20 — isti "eyebrow/lead na temnem" recept kot ".on-navy"
(glej base.css: ".eyebrow.on-navy"/".on-navy .lead"), tu za novo
".on-steel" STRONG CONTRAST sekcijo. Eyebrow zahteva eksplicitno dodan
razred na SAMEM elementu (enako kot ".on-navy" konvencija), ".lead" pa
deluje tudi kot potomec, ker se lead vedno nahaja znotraj sekcije. */
.eyebrow.on-steel{ color:var(--lime); background:none; }
.on-steel .lead, .lead.on-steel,
.on-steel-deep .lead, .lead.on-steel-deep{ color:var(--muted-on-navy); background:none; }
/* ── 10. "HERO-LIGHT" — nadomesti temen navy hero gradient ─────────
Recept (ne en sam razred, ker ima vsak hero svoje bespoke CSS):
1) background na sami hero sekciji:
background:linear-gradient(165deg, var(--ice), #fff 45%, var(--ice-deep));
+ `.dpt-hero-light` na isti element doda privzeto besedilno barvo
2) besedilo, ki je prej uporabljalo `.on-navy` (belo na temnem),
potrebuje na hero-light svetlo različico: `.eyebrow` ostane
privzeta (že barvna), `.lead` naj izgubi `.on-navy` (ali dobi
`.on-navy` override znotraj `.dpt-hero-light`, glej spodaj), h1
naj bo var(--ink) namesto #fff.
3) plasti: `.dpt-field` (cyan zgoraj desno / green spodaj levo),
`.dpt-grid` (delni, en vogal), `.dpt-line` (circuit s koti in
vsaj enim `.dpt-node`) — enako kot na ostalih sekcijah, le da
je zdaj to PRVA stvar, ki jo obiskovalec vidi, zato je gostota
lahko rahlo višja kot v telesu strani (glej t. 27 brifa:
"80% clean / 20% technology atmosphere" velja za celo stran,
hero sam sme biti bližje 25–30%).
`.dpt-hero-light` sam po sebi NE nastavi ozadja (vsak hero ga ima
drugače sestavljenega — gradient, ne raven barvni blok), nastavi le
privzeto besedilno barvo in override za podedovane .on-navy razrede
znotraj sebe, da ne ostane belo besedilo na svetli podlagi (brif,
t. 19). */
.dpt-hero-light{ color:var(--ink); }
.dpt-hero-light .eyebrow.on-navy{ color:var(--blue); }
.dpt-hero-light .lead.on-navy,
.dpt-hero-light .on-navy .lead,
.dpt-hero-light .lead{ color:var(--muted); }
.dpt-hero-light h1{ color:var(--navy-deep); }
/* ── 11. SUBTILNA ANIMACIJA — glow/grid drift, signal, pulz ────────
NAMENOMA UNIVERZALNI (bare) razredi — brez zahteve po spremljajočem
.dpt-field/.dpt-line/.dpt-node razredu — da jih je mogoče dodati
NEPOSREDNO na katerikoli obstoječi dekorativni element kjerkoli na
strani (tudi na stran-specifične, že obstoječe ambient/circuit
razrede iz zgodnejše faze, npr. ".db-ambient--blue", ".tsk-line",
".apl-node" …) — to je "ponovna uporabnost brez podvajanja CSS/SVG",
ki jo zahteva brif "GLOBAL ANIMATED …" (razdelek 20): NE grajenja
novega vzporednega ambient/circuit sistema tam, kjer stran že ima
svojega (dobrega) — samo DODAJ enega od spodnjih razredov obstoječemu
elementu. Vse spodnje animacije so privzeto izklopljene za
prefers-reduced-motion:reduce (uporabnik dobi natanko static stanje,
ki je bilo že vizualno preverjeno). Različni elementi na isti strani
naj imejo RAZLIČNE variante (-a/-b/-c), da animacije niso
sinhronizirane (brif, t. 10: "Ne sinhroniziraj vseh animacij"). */
@media (prefers-reduced-motion: no-preference){
.dpt-anim-a{ animation:dpt-drift-a 28s ease-in-out infinite alternate; }
.dpt-anim-b{ animation:dpt-drift-b 34s ease-in-out infinite alternate; }
.dpt-anim-c{ animation:dpt-drift-c 24s ease-in-out infinite alternate; }
.dpt-grid-anim{ animation:dpt-grid-drift 48s linear infinite alternate; }
/* na SVG (katerikoli, ne le znotraj .dpt-line) — "potujoč signal" */
path.dpt-signal-path{
stroke-dasharray:6 14;
animation:dpt-signal 14s linear infinite;
}
/* na katerikoli element (SVG ali navaden absolutno pozicioniran
/ node) — nežen pulz opacity+scale */
.dpt-anim-pulse{ animation:dpt-node-pulse 4.5s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.dpt-anim-pulse.dpt-anim-delay{ animation-delay:1.6s; }
.dpt-anim-pulse.dpt-anim-delay2{ animation-delay:3s; }
}
@keyframes dpt-drift-a{ from{ transform:translate(0,0); } to{ transform:translate(28px,-18px); } }
@keyframes dpt-drift-b{ from{ transform:translate(0,0); } to{ transform:translate(-22px,20px); } }
@keyframes dpt-drift-c{ from{ transform:translate(0,0); } to{ transform:translate(16px,24px); } }
@keyframes dpt-grid-drift{ from{ transform:translate(0,0); } to{ transform:translate(14px,10px); } }
@keyframes dpt-signal{ from{ stroke-dashoffset:120; } to{ stroke-dashoffset:0; } }
@keyframes dpt-node-pulse{ 0%,100%{ opacity:.35; transform:scale(1); } 50%{ opacity:.85; transform:scale(1.15); } }
/* ── 12. NODE — majhna pika na circuit poti ────────────────────────
Uporabi ZNOTRAJ .dpt-line SVG (kot
) za statične node, ALI
kot ločen absolutno pozicioniran element, če node ni na SVG poti.
… …
CTA →
Na mobilnem/1-stolpčnem prelomu (kjer kartice niso umetno enako
visoke) ta recept ne škodi — `margin-top:auto` brez presežnega
prostora preprosto nima vidnega učinka, kartica ostane naravno
visoka glede na svojo vsebino (brief razdelek 15). ═══════════════ */
.dpt-card-col{ display:flex; flex-direction:column; height:100%; }
.dpt-cta-bottom{ margin-top:auto; }
/* ═══════════════════════════════════════════════════════════════
13. STRONG/DARK SEKCIJA Z GLOBINO (nadaljevanje 20, "VEČ KONTRASTA,
MANJ MONOTONOSTI"). Alešev popravek po nadaljevanjih 18/19: rezultat
je bil PREVEČ enakomeren — skoraj cela stran v podobnih svetlih
blue-grey tonih, brez jasnega vizualnega vrhunca. Hkrati eksplicitno
NE želi nazaj starih RAVNIH ".on-navy" pravokotnikov. Rešitev ni nov
sam-zase-zadosten razred, temveč REedept (kot ".dpt-hero-light"
zgoraj) za sestavo ene "STRONG CONTRAST"/"DARK PREMIUM" sekcije, ki
ima resnično globino:
1) OSNOVA — izberi TON glede na to, kako močan "moment" sekcija je:
".on-strong"/".on-strong-deep" (svetel, a jasno globlji od
".on-mid" — glej tokens.css) za "STRONG TECH" trenutke, ki naj
ostanejo svetli; ".on-steel"/".on-steel-deep" (pravi vmesni
temno-svetel "steel blue", BELO besedilo) za pravi "STRONG
CONTRAST"/conversion moment; ".on-navy"/".on-navy-deep" ostane
rezerviran za redke "DARK PREMIUM" trenutke (max 1-2 na stran,
glej nadaljevanje 18) — GreenTill/servis smeta po Aleševem lastnem
navodilu (brif t. 14/16) uporabiti VEČ temnega kontrasta kot
ostale strani.
Namesto ravne barve raje uporabi gradient med dvema sosednjima
toni iste "družine" (npr. `background:linear-gradient(165deg,
var(--steel), var(--steel-deep) 70%, var(--navy-deep))` — sekcija
dobi globino BREZ nove barve, samo z lastnim razponom).
2) AMBIENTNE LUČI — vsaj 2 plasti `.dpt-field` v RAZLIČNIH CGP barvah
(npr. `.dpt-field--blue` zgoraj desno + `.dpt-field--cyan` na
sredini + po želji rahel `.dpt-field--green` v kotu) — na temnejši
podlagi je opacity lahko višja kot na svetli (`--dpt-op:.35-.6`
namesto `.15-.3`), glej primere v razdelku 1 zgoraj.
3) DELNI GRID — `.dpt-grid` (na temni/steel podlagi podeduje svetlejšo
`color` prek `.on-navy .dpt-grid`/nov `.on-steel .dpt-grid` pravili
zgoraj), zelo nizka gostota, en vogal.
4) CIRCUIT — `.circuit-field` z NOVO tone-stopnjo glede na moč sekcije
(glej components.css): `.tone-light` (LIGHT sekcije, opacity
.03-.07), `.tone-mid` (MID, .05-.10), `.tone-strong` (STRONG TECH/
steel, .08-.14), `.tone-dark` (DARK PREMIUM navy, .08-.18) — VEDNO
preveri berljivost po dodajanju.
5) VSEBINA OSTAJA SVETLA/JASNA — na STRONG/DARK sekciji naj bodo
kartice/paneli SVETLI (`background:#fff`/`var(--surface)`), ne
poskušaj podlage kartic stemniti skupaj s sekcijo — kontrast med
svetlo kartico in temnejšo podlago JE del učinka (brif t. 3).
"HALF-DARK"/ASIMETRIČNA VARIANTA (brif t. 5, namesto polne širine):
sekcija ostane SVETLA (`.on-mid`/`.on-ice`/navaden `.section`), a
dobi en velik, delno obrezan STEEL/NAVY panel samo na eni strani
(`position:absolute; width:40-55%; height:100%; right:0` + gradient
iz `.on-steel`/`.on-navy` tonov, `border-radius` na notranjem robu za
"rounded panel" različico) — produktna slika/kartica lahko sega čez
mejo obeh površin (`z-index` nad obema plastema). To je POGOSTEJE
primernejše od cele temne sekcije in ga brif izrecno priporoča kot
bolj premium alternativo.
PREHODI MED SEKCIJAMI (brif t. 6): kadar STRONG/DARK sekcija sledi
svetlejši, naj vsaj ENA ambientna plast (glow ali `.dpt-line`) navidez
"nadaljuje" iz zgornje sekcije vanjo — uporabi obstoječo "usklajen
par" tehniko iz razdelka 5 zgoraj (dva ločena, barvno/pozicijsko
usklajena elementa tik ob skupni meji, vsak v svojem overflow:hidden)
namesto enega samega elementa, ki bi prečkal mejo (znan hrošč).
═══════════════════════════════════════════════════════════════ */
/* ── OPOMBA — PAGE-SPECIFIC (brif, t. 14 + "ANIMATED" brif, t. 17 +
nadaljevanje 20 "GLOBALNI POPRAVEK") ──────────────────────────────
Ta datoteka namenoma ne predpisuje NOBENE konkretne kompozicije.
Vsaka stran v svoji .css datoteki izbere svoj podniz barv/gostote IN
(nadaljevanje 20, KLJUČNO) svoj LASTEN ritem LIGHT/MID/STRONG/DARK
stopenj po sekcijah — Aleš je eksplicitno prepovedal isto formulo na
vsaki strani ("section 1 light, section 2 mid, section 3 dark,
section 4 light" povsod). Karakter/ritem po strani (glej dnevnik,
nadaljevanje 20, za polno utemeljitev vsake):
davcne-blagajne → POS/hardver/transakcije: LIGHT→MID→STEEL(globinski,
"Kako do svoje blagajne")→LIGHT→MID/STRONG
tiskalniki → engineering/precision: hladnejši steel-blue/sivi,
manj zelene, ena STEEL/STRONG sekcija
programske-resitve → data/dashboard: cyan/svetlo/srednje modra, navy
samo kot UI-kontrast, kontrast iz UI posnetkov
(manj potrebe po velikih temnih sekcijah)
aplikacije → DeliMe kot en STRONG/half-dark highlight moment,
TAStudio/Booking Studio ostajata lažja
aplikacija-delime → lasten premium karakter (ne "še ena podstran"):
čisti svetli UI + globoki digitalni modri trenutki
spletne-strani → svetlejša/uredniška, kontrast iz brskalniških
maket/velikih posnetkov, ne iz velikih temnih sekcij
dejavnosti → minimalna dekoracija (UX selektor prioriteta),
a z realnim (ne ravnim) prehodom med sekcijami
o-nas → uredniško + velika subtilna geometrija
kontakt → najmirnejše ozadje na strani
servis → tehnično-diagnostičen, ena upravičeno
močnejša STEEL/DARK sekcija (diagnostic/network)
blagajna-greentill → SME imeti VEČ temnega kontrasta kot druge
strani (flagship hardver) — kovinsko/circuit/
product lighting
index (domača stran) → glej razdelek "NADALJEVANJE 18" spodaj — tonalna
lestvica LIGHT/MID LIGHT/TECH MID izmenično po
sekcijah, en sam večji temen moment (CTA+noga)
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
6. STEPPER / TOČKE PROCESA — POVEZANI SEGMENTI, SKUPNA GRID SLED
(september 2026, nadaljevanje 15). Zamenjuje prejšnji vzorec "znaČka
absolutno na vsaki kartici + ena ločena dolga črta čez cel container"
(glej davcne-blagajne.css, stara ".db-nacini-badge"/".db-nacini-
line") — ta je markerje in črto računal v DVEH NEODVISNIH
koordinatnih sistemih (marker relativno na SVOJO kartico — "top:
-16px; right:20px", ne na njeni sredini — črta kot % širine
SKUPNEGA containerja), zato se nista ujemala; uporabnik je hrošč
prijavil s screenshotom ("črta teče mimo oziroma za markerji").
Rešitev: ".dpt-stepper" je SVOJA grid vrstica, ki uporablja ISTO
"grid-template-columns"/"gap" kot dejanska mreža kartic pod njo
(nastavi obe prek --dpt-cols/--dpt-gap na isto vrednost, glej
primer spodaj) — s tem sta stolpca matematično garantirano
poravnana, brez ročno izračunanih % vrednosti na marker. Vsak
".dpt-stepper-item" je ena grid celica (ista širina kot kartica pod
njo); marker je vodoravno centriran ZNOTRAJ celice prek
"justify-content:center" na celici — torej centriran nad svojim
STOLPCEM, ne nad robom/paddingom/naslovom/badge-em kartice pod njim
(brif, t. 5 — marker 02 ostane poravnan z 01/03/04 ne glede na
značko "Najpogosteje").
Povezovalni segment (".dpt-stepper-connector") je namerno DEL
posameznega koraka (brif, t. 7: "STEP 01 → connector do STEP 02",
NE ena dolga čez vse) — sega od ROBA markerja TE celice do ROBA
markerja NASLEDNJE. Ker sta sosednji celici enako široki
(repeat(N,1fr)), je razdalja med sredinama dveh sosednjih celic
VEDNO natanko "100% (širina celice) + gap" — ne glede na dejansko
širino zaslona — zato jo izrazimo s čistim "calc()" namesto ročnih
% vrednosti:
left: calc(50% + polmer markerja) (rob TEGA markerja)
width: calc(100% + gap − premer markerja) (do roba NASLEDNJEGA)
S tem je geometrija pravilna na VSAKI širini avtomatsko (brif, t.
11 — 1920/1600/1440/1366/1280), ni "screenshot-specific" popravka.
Marker ima z-index NAD segmentom (brif, t. 4), da segment nikoli ne
"sveti" skozi njegovo notranjost. Zadnji korak (brez naslednjega)
preprosto nima ".dpt-stepper-connector" otroka. Animacijski trigger
(draw-in segmenta/fade-in markerja) je NAMENOMA prepuščen posamezni
strani (glej "#nacini.db-flow-vidno …" v davcne-blagajne.css) — ta
datoteka nosi samo geometrijo/strukturo, enako kot ".dpt-card"/
".dpt-cta-bottom" zgoraj. Uporaba:
01
… (zadnji korak brez ".dpt-stepper-connector")
═══════════════════════════════════════════════════════════════ */
.dpt-stepper{
display:grid;
grid-template-columns:repeat(var(--dpt-cols, 4), minmax(0, 1fr));
gap:var(--dpt-gap, var(--sp-3));
pointer-events:none;
}
.dpt-stepper-item{
position:relative;
height:var(--dpt-marker-size, 32px);
display:flex; justify-content:center;
}
.dpt-stepper-marker{
position:relative; z-index:2;
width:var(--dpt-marker-size, 32px); height:var(--dpt-marker-size, 32px);
border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
font-family:var(--fh); font-weight:800; font-size:12.5px; color:#fff;
background:var(--c, var(--blue));
box-shadow:var(--dpt-marker-ring, 0 0 0 4px var(--navy)), var(--sh-sm);
}
/* rob-do-roba med sredinama dveh sosednjih celic (glej izpeljavo
zgoraj) — "top:50%" + "margin-top: -(debelina/2)" namesto transform,
NAMENOMA, da "transform:scaleX()" ostane prost za draw-in animacijo
posamezne strani brez konflikta na isti lastnosti. */
.dpt-stepper-connector{
position:absolute; z-index:1; top:50%;
left:calc(50% + (var(--dpt-marker-size, 32px) / 2));
width:calc(100% + var(--dpt-gap, var(--sp-3)) - var(--dpt-marker-size, 32px));
height:var(--dpt-connector-h, 2px); margin-top:calc(var(--dpt-connector-h, 2px) / -2);
border-radius:1px;
background:linear-gradient(90deg, var(--c1, var(--cyan)), var(--c2, var(--blue)));
}
/* ── MOBILNA POENOSTAVITEV — "manj, ne samo manjše" ─────────────
nadaljevanje 26, brif "MULTI-LAYER TECH ENVIRONMENT", razdelek "MOBILE":
"Reduce: number of circuit paths, number of nodes, parallax distance,
large geometry, animated signals. Do not simply scale the desktop
graphics down." Parallax je že sitewide izklopljen pod 760px (glej
"[data-parallax]" v components.css) — ta razred pokrije DRUGI del
zahteve: SEKUNDARNE/dodatne plasti (drugi/tretji krogotok lok, dodaten
grid vogal, posamezni node) se na ozkih zaslonih POPOLNOMA odstranijo
(ne samo pomanjšajo) — vsaka sekcija obdrži samo SVOJ primarni ambient
sloj. Dodaj ta razred POLEG obstoječega (`.dpt-line`/`.dpt-grid`/vozlišče)
na elemente, ki so DRUGI/DODATNI v svoji sekciji, ne edini. Čisto nov,
samostojen razred — ne spreminja nobenega obstoječega pravila/strani. */
@media (max-width:680px){
.dpt-mobile-hide{ display:none !important; }
}
/* ── AMBIENT COLOR GLOW — velike, RAZPRŠENE, neodvisno animirane barvne
plasti ("diffuse atmospheric light", ne "vidni barvni krogi") ────────
nadaljevanje 30, brif "ADD LARGE AMBIENT COLOR GRADIENTS BEHIND THE
GRID" + "ANIMATE THE GRADIENTS" (posamezne hitrosti/amplitude za vsako
plast) + "must NOT look like visible colored circles". NAMENOMA nov,
LOČEN razred od obstoječega `.dpt-field` (ki ostaja bit-za-bit
nespremenjen povsod drugod na strani, kjer je že v uporabi) — tu je
uporabljena TOČNA Biroplast HEX barva iz brifa (#29B7E8/#1478BE cian-
modra, #28A748/#AECC38 zelena) prek inline `--amb-c1`/`--amb-c2`,
namesto spreminjanja skupnih `.dpt-field--cyan/--green` rgba vrednosti
(kar bi vplivalo na VSE druge sekcije, ki jih že uporabljajo). Isti
"velik radij + močan blur + gradient pojema davno pred robom" princip
kot pri `.dpt-field`, da barva ostane razpršena svetloba, ne oblika. */
.dpt-ambient{
position:absolute; border-radius:50%; pointer-events:none;
width:var(--amb-w, 900px); height:var(--amb-w, 900px);
filter:blur(var(--amb-blur, 100px));
opacity:var(--amb-op, .16);
background:radial-gradient(circle, var(--amb-c1, var(--cyan)) 0%, var(--amb-c2, var(--amb-c1, var(--cyan))) 34%, transparent 70%);
will-change:transform;
}
@media (prefers-reduced-motion: no-preference){
/* tri RAZLIČNE hitrosti/amplitude (brif: "gradients must be separate
layers and move independently" + konkretni razponi za vsako) —
počasi, brez odboja/utripanja, komaj zaznavno razen ob daljšem
opazovanju. */
.dpt-ambient--a{ animation:dpt-ambient-a 28s ease-in-out infinite alternate; }
.dpt-ambient--b{ animation:dpt-ambient-b 38s ease-in-out infinite alternate; }
.dpt-ambient--c{ animation:dpt-ambient-c 44s ease-in-out infinite alternate; }
}
@keyframes dpt-ambient-a{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(32px,-22px,0) scale(1.06); } }
@keyframes dpt-ambient-b{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-48px,32px,0) scale(1.08); } }
@keyframes dpt-ambient-c{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(22px,16px,0) scale(1.05); } }
/* ── TABLETNA POENOSTAVITEV — vmesna stopnja med desktop in
`.dpt-mobile-hide` (680px) ───────────────────────────────────────
nadaljevanje 31, brif "GreenTill background": "Tablet: reduce circuit
detail and dot density" (ne popolnoma odstrani, kot na mobilnem, samo
ZMANJŠA gostoto). 960px je uveljavljena "tablet" prelomnica na tej
strani (glej `.hardware-split`/`.motif-veza` v pages.css). Čisto nov,
samostojen razred — ne spreminja nobenega obstoječega pravila/strani. */
@media (max-width:960px){
.dpt-tablet-hide{ display:none !important; }
}