/* ============================================================================ ELTINE — sistem gibanja (v2) Lastna izvedba gramatike gibanja, povzete po referenci (sstr.tech): mrežni preloader, zastor med stranmi, razkrivanje naslovov s ploščicami, nav pomet s podvojenim besedilom, progresivni blur, števci, text-fill. Stanja na , nastavljena v vrstičnem skriptu PRED izrisom: .m JavaScript teče (brez njega je vse vidno — brez FOUC past) .first prvi obisk v seji → polni preloader .ret povratni obisk → samo zastor, ki se umakne .rm prefers-reduced-motion → nič od tega .hold vsebina zadržana, dokler preloader ne odide ============================================================================ */ :root { --mo-ease: cubic-bezier(0.675, 0.15, 0.1, 1); /* podpis reference */ --mo-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --mo-sweep-in: 0.425s; --mo-sweep-out: 0.375s; } /* --------------------------------------------------------------------------- 1 · PRELOADER — mreža 2×2, ena celica v barvi poudarka --------------------------------------------------------------------------- */ .ldr { position: fixed; inset: 0; z-index: 400; display: none; background-color: var(--brand-grey-900); color: var(--brand-grey-100); } html.first:not(.rm) .ldr { display: block; } .ldr_grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background-color: var(--brand-grey-700); } .ldr_cell { position: relative; overflow: hidden; background-color: var(--brand-grey-850); padding: var(--mapped-padding-sm); display: flex; flex-direction: column; justify-content: space-between; /* izstop: vsaka celica odpelje navzgor s svojim zamikom */ transition: transform 0.7s var(--mo-ease); } .ldr.is-out .ldr_cell { transform: translateY(-102%); } .ldr.is-out .ldr_cell:nth-child(2) { transition-delay: 0.06s; } .ldr.is-out .ldr_cell:nth-child(3) { transition-delay: 0.12s; } .ldr.is-out .ldr_cell:nth-child(4) { transition-delay: 0.18s; } .ldr_cell.is-accent { background-color: var(--brand-signal-500); color: var(--mapped-text-on-action); } .ldr_logo svg { height: 2.6em; width: auto; display: block; } .ldr_status { font-family: var(--brand-font-mono); font-size: 0.6875em; letter-spacing: 0.1em; text-transform: uppercase; line-height: 2; color: var(--brand-grey-400); } .ldr_cell.is-accent .ldr_status { color: var(--mapped-text-on-action); opacity: 0.7; } /* utripajoče pike »nalagam …« */ .ldr_dots::after { content: ""; animation: ldrDots 1.1s steps(4) infinite; } @keyframes ldrDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } } .ldr_pct { font-size: clamp(4rem, 11vw, 9rem); font-weight: var(--brand-weight-medium); letter-spacing: -0.04em; line-height: 0.9; font-variant-numeric: tabular-nums; } .ldr_track { height: 2px; background-color: color-mix(in srgb, currentColor 25%, transparent); margin-top: var(--brand-scale-500); overflow: hidden; } .ldr_fill { display: block; height: 100%; background-color: currentColor; transform: scaleX(var(--p, 0)); transform-origin: left; } .ldr_list { display: flex; flex-direction: column; gap: 0.55em; } /* Znak kot vodni žig: hrbtenica utopljena v ozadje, srednji krak v barvi poudarka — reža ostane vidna tudi tu. */ .ldr_ghost { position: absolute; right: -4%; bottom: -10%; width: clamp(13rem, 26vw, 24rem); color: var(--brand-grey-800); user-select: none; } .ldr_ghost svg { width: 100%; height: auto; display: block; } @media (max-width: 767px) { .ldr_grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .ldr_cell.is-c, .ldr_cell.is-d { display: none; } } /* --------------------------------------------------------------------------- 2 · ZASTOR — prehod med stranmi (tri navpične plošče) --------------------------------------------------------------------------- */ .veil { position: fixed; inset: 0; z-index: 380; display: flex; pointer-events: none; } .veil i { flex: 1; background-color: var(--brand-grey-900); transform: translateY(102%); border-right: 1px solid var(--brand-grey-800); } .veil i:last-child { border-right: 0; } /* vodilni rob plošče — tanka črta v barvi poudarka na zgornjem robu, vidna, ko plošče vstopajo od spodaj */ .veil i { position: relative; } .veil i::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background-color: var(--brand-signal-500); } /* ---- ime ciljne strani med prehodom ---- */ .veil_tag { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9em; opacity: 0; transform: translateY(0.5em); } .veil_eyebrow { font-family: var(--brand-font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-grey-500); } .veil_name { position: relative; display: block; overflow: hidden; color: var(--brand-grey-100); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: var(--brand-weight-medium); letter-spacing: -0.03em; line-height: 1.06; } .veil_name-in { opacity: 0; display: inline-block; } .veil_bar { position: absolute; inset: 0.04em 0; background-color: var(--brand-signal-500); transform: scaleX(0); transform-origin: left; } /* stanje z imenom: značka vidna, ploščica pomete čez ime */ .veil.is-label .veil_tag { opacity: 1; transform: none; transition: opacity 0.25s ease, transform 0.4s var(--mo-ease); } .veil.is-label .veil_name-in { animation: rvIn 0s 0.38s forwards; } .veil.is-label .veil_bar { animation: rvBar 0.72s 0.05s var(--mo-ease) forwards; } /* izstop: značka odide navzgor s ploščami */ .veil.is-away .veil_tag { opacity: 0; transform: translateY(-1.2em); transition: opacity 0.3s ease, transform 0.45s var(--mo-ease); } /* povratni obisk: plošče že prekrivajo, motion.js jih odpelje gor */ html.ret:not(.rm) .veil i { transform: translateY(0); } .veil.is-anim i { transition: transform 0.55s var(--mo-ease); } .veil.is-anim i:nth-child(2) { transition-delay: 0.055s; } .veil.is-anim i:nth-child(3) { transition-delay: 0.11s; } .veil.is-cover i { transform: translateY(0); } .veil.is-away i { transform: translateY(-102%); } html.rm .veil, html.rm .ldr { display: none !important; } /* --------------------------------------------------------------------------- 3 · ZADRŽANJE VSEBINE pod preloaderjem [data-anim].is-in dobi svoje prehode šele, ko .hold odide. --------------------------------------------------------------------------- */ html.hold [data-anim] { opacity: 0 !important; transform: translateY(1.25em) !important; } html.hold [data-anim="line"] { transform: none !important; clip-path: inset(0 100% 0 0) !important; opacity: 1 !important; } /* --------------------------------------------------------------------------- 4 · RAZKRIVANJE NASLOVOV — ploščica v barvi poudarka prebarva vrstico, nato se umakne in pusti besedilo --------------------------------------------------------------------------- */ html.m .rv:not(.is-split) { visibility: hidden; } /* varovalka: če se JS ustavi, se besedilo po 2,4 s pokaže samo */ html.m .rv { animation: rvSafe 0s 2.4s forwards; } @keyframes rvSafe { to { visibility: visible; } } .rv.is-split { visibility: visible; animation: none; } .rv-ln { display: block; position: relative; } .rv-in { opacity: 0; } .rv-bar { position: absolute; inset: 0.06em 0; background-color: var(--brand-signal-500); transform: scaleX(0); transform-origin: left; pointer-events: none; } /* na polni barvni ploskvi mora biti ploščica v »on« barvi */ [data-theme-section="signal"] .rv-bar { background-color: var(--mapped-text-headings); } .rv.is-on .rv-in { animation: rvIn 0s calc(var(--d, 0s) + 0.42s) forwards; } .rv.is-on .rv-bar { animation: rvBar 0.86s var(--d, 0s) var(--mo-ease) forwards; } @keyframes rvIn { to { opacity: 1; } } @keyframes rvBar { 0% { transform: scaleX(0); transform-origin: left; } 48% { transform: scaleX(1); transform-origin: left; } 52% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } } html.rm .rv { visibility: visible !important; animation: none; } html.rm .rv .rv-in { opacity: 1; } html.rm .rv .rv-bar { display: none; } /* --------------------------------------------------------------------------- 5 · TEXT-FILL — odstavek, ki se obarva z drsenjem (manifest) --------------------------------------------------------------------------- */ .tf .tf-w { color: var(--mapped-text-headings); opacity: 0.22; transition: opacity 0.25s linear; } .tf .tf-w.is-lit { opacity: 1; } html.rm .tf .tf-w { opacity: 1; } /* --------------------------------------------------------------------------- 6 · NAV — pomet s podvojenim besedilom (referenčna gramatika, naši žetoni) --------------------------------------------------------------------------- */ .nav[data-theme-nav="hero"] { --sweep-fill: rgba(242, 242, 241, 0.1); } .nav[data-theme-nav="light"] { --sweep-fill: var(--brand-grey-150); } .nav[data-theme-nav="dark"] { --sweep-fill: var(--brand-grey-750); } .nav_item { position: relative; isolation: isolate; overflow: hidden; padding: 0.75em 0.9em; } /* stari podčrtaj ostane samo kot oznaka aktivne strani */ .nav_item::after { content: ""; position: absolute; left: 0.9em; right: 0.9em; bottom: 0.45em; height: 1px; background-color: var(--brand-signal-500); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--mo-ease); width: auto; } .nav_item.is-active::after { transform: scaleX(1); } /* pometna ploskev — clip-path se odpre iz sredinske črte */ .nav_item .nav_swp { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-color: var(--sweep-fill); clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%); transition: clip-path var(--mo-sweep-out) var(--mo-ease); } /* podvojeno besedilo, ki prispe s ploskvijo */ .nav_item .nav_dup { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; color: var(--nav-fg); clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%); scale: 0.85; transition: clip-path var(--mo-sweep-out) var(--mo-ease), scale 0.35s var(--mo-ease); } .nav_item .nav_item-text { display: inline-block; transition: scale 0.35s var(--mo-ease), opacity 0.15s ease-out; } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .nav_item:hover:not(.is-active) .nav_swp, .nav_item:hover:not(.is-active) .nav_dup { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition: clip-path var(--mo-sweep-in) 0.05s var(--mo-ease); } .nav_item:hover:not(.is-active) .nav_dup { scale: 1; transition: clip-path var(--mo-sweep-in) 0.05s var(--mo-ease), scale 0.35s 0.1s var(--mo-ease); } .nav_item:hover:not(.is-active) .nav_item-text { scale: 1.2; opacity: 0; } } /* --------------------------------------------------------------------------- 7 · PROGRESIVNI BLUR pod prozorno navigacijo (samo hero stanje) --------------------------------------------------------------------------- */ .nav_pblur { position: absolute; top: 0; left: 0; width: 100%; height: 9em; pointer-events: none; z-index: -1; contain: paint; } .nav_pblur i { position: absolute; inset: 0; } .nav_pblur i:nth-child(1) { backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); mask: linear-gradient(#000 40%, #0000 65%); -webkit-mask: linear-gradient(#000 40%, #0000 65%); } .nav_pblur i:nth-child(2) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); mask: linear-gradient(#000 25%, #0000 50%); -webkit-mask: linear-gradient(#000 25%, #0000 50%); } .nav_pblur i:nth-child(3) { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); mask: linear-gradient(#000 12%, #0000 34%); -webkit-mask: linear-gradient(#000 12%, #0000 34%); } .nav_pblur i:nth-child(4) { backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); mask: linear-gradient(#000 4%, #0000 20%); -webkit-mask: linear-gradient(#000 4%, #0000 20%); } .nav:not([data-theme-nav="hero"]) .nav_pblur { display: none; } /* --------------------------------------------------------------------------- 8 · MOBILNI MENI — postopno prispetje postavk s številkami --------------------------------------------------------------------------- */ .nav_menu { counter-reset: mn; } .nav_menu-item { counter-increment: mn; display: flex; align-items: baseline; gap: 0.7em; transform: translateY(1.3em); opacity: 0; transition: transform 0.55s var(--mo-ease), opacity 0.4s ease, color 0.2s ease, padding-left 0.3s ease; } .nav_menu-item::before { content: counter(mn, decimal-leading-zero); font-family: var(--brand-font-mono); font-size: 0.42em; letter-spacing: 0.1em; color: var(--brand-grey-500); } .nav_menu.is-open .nav_menu-item { transform: none; opacity: 1; } .nav_menu.is-open .nav_menu-item:nth-child(1) { transition-delay: 0.16s; } .nav_menu.is-open .nav_menu-item:nth-child(2) { transition-delay: 0.22s; } .nav_menu.is-open .nav_menu-item:nth-child(3) { transition-delay: 0.28s; } .nav_menu.is-open .nav_menu-item:nth-child(4) { transition-delay: 0.34s; } .nav_menu.is-open .nav_menu-item:nth-child(5) { transition-delay: 0.4s; } .nav_menu.is-open .nav_menu-item:nth-child(6) { transition-delay: 0.46s; } /* --------------------------------------------------------------------------- 9 · ŠTEVCI — tabelarične številke, da širina med štetjem ne pleše --------------------------------------------------------------------------- */ [data-counted] { font-variant-numeric: tabular-nums; }