/* ===================================================================== VERZIJA 6 (OSNUTEK 2 – Celotna stran): dodatni slogi 1) Cenik – Verzija 10 (OxySphere Klub), naloži se za sekcije.css in nadomesti Končno verzijo cenika 2) Sekcija Prostor (#prostor-sec) – podvojena pravila #komora 3) Lastni slogi Verzije 6 ===================================================================== */ /* ===== 1) 5. Cenik (Verzija 10) ===== */ /* 8. Cenik – dodatni slogi samo za to sekcijo. Verzija 5 (21. 10. 2026): področja na paketih z malo začetnico in v vrsticah (več oznak v vrsti), nova naslova polj. Verzija 4 (21. 10. 2026): nove animirane ikone (koledar, merilnik, srce z utripom, košarica, kartica z obroki, dokument), poudarjen prihranek Paketa 30, področja na paketih kot oznake, gumb »Pišite za ponudbo« (glej konec datoteke). Verzija 3 (21. 10. 2026): oznaki paketov višje in bolj vidni (nad robom kartice, z ikono), nov uvod, poudarek frekvence s ponazoritvijo seštevanja učinka, »Tipično za« na vsakem paketu (glej konec datoteke). Verzija 2 (21. 10. 2026): temno nadaljevanje sekcij 1–6 (sij, pikčasta mreža, mehurčki, polmesec iz znaka), stekleni paketi z obarvano obrobo, ikone s sijem in obročem, temen graf, storitve in Leanpay. Vsebina nespremenjena. Slogi so omejeni na #cenik.c8 (namizje, od 1024 px). */ #cenik .c8-icw{position:relative;display:inline-flex;flex:none} #cenik .ppc-sum > .c8-icw{grid-row:1 / 3} #cenik .c8-ring{display:none} @media (min-width:1024px){ #cenik.c8{color:var(--x-on); background:radial-gradient(40% 26% at 4% 10%,rgba(30,111,217,.14) 0%,rgba(30,111,217,0) 70%), radial-gradient(44% 30% at 98% 46%,rgba(56,182,255,.11) 0%,rgba(56,182,255,0) 70%), linear-gradient(180deg,#050F1F 0%,#071A30 30%,#06162B 70%,#050F1F 100%)} #cenik.c8 .price-glow{display:none} #cenik.c8 > .wrap{position:relative;z-index:1} #cenik.c8::before{content:"";position:absolute;z-index:1;top:0;left:50%;width:min(1100px,80%);height:1px;transform:translateX(-50%); background:linear-gradient(90deg,rgba(127,219,255,0),rgba(127,219,255,.22) 50%,rgba(127,219,255,0))} /* ---------- ozadje ---------- */ #cenik.c8 .c8-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} #cenik.c8 .c8-glow{position:absolute;border-radius:50%;filter:blur(10px)} #cenik.c8 .c8-g1{width:820px;height:820px;left:-260px;top:-240px;background:radial-gradient(closest-side,rgba(56,182,255,.12),rgba(56,182,255,0))} #cenik.c8 .c8-g2{width:900px;height:900px;right:-260px;top:30%;background:radial-gradient(closest-side,rgba(30,111,217,.14),rgba(30,111,217,0))} #cenik.c8 .c8-g3{width:760px;height:760px;left:10%;bottom:-320px;background:radial-gradient(closest-side,rgba(127,219,255,.08),rgba(127,219,255,0))} #cenik.c8 .c8-grid{position:absolute;inset:0;opacity:.45; background-image:radial-gradient(rgba(127,219,255,.15) 1px,rgba(127,219,255,0) 1.6px);background-size:28px 28px; -webkit-mask-image:radial-gradient(42% 16% at 20% 8%,#000 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 82%);mask-image:radial-gradient(42% 16% at 20% 8%,#000 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 82%)} #cenik.c8 .c8-wm{position:absolute;right:-260px;top:30%;height:min(980px,46%);width:auto;opacity:.13; -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 45%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(270deg,#000 0%,#000 45%,rgba(0,0,0,0) 100%)} #cenik.c8 .c8-bub{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to top,#000 0%,#000 65%,rgba(0,0,0,0) 97%);mask-image:linear-gradient(to top,#000 0%,#000 65%,rgba(0,0,0,0) 97%)} #cenik.c8 .c8-bub i{position:absolute;bottom:-30px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;opacity:0;will-change:transform,opacity; border:1px solid rgba(169,233,255,.5);background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.6) 0%,rgba(169,233,255,.1) 55%,rgba(169,233,255,0) 70%); animation:c8Rise var(--t) linear var(--dl) infinite,c8Sway calc(var(--t) / 6) ease-in-out var(--dl) infinite alternate} #cenik.c8 .c8-bub i:nth-child(1){--x:3%;--s:9px;--t:40s;--dl:-8s} #cenik.c8 .c8-bub i:nth-child(2){--x:11%;--s:5px;--t:33s;--dl:-21s} #cenik.c8 .c8-bub i:nth-child(3){--x:20%;--s:12px;--t:46s;--dl:-14s} #cenik.c8 .c8-bub i:nth-child(4){--x:31%;--s:6px;--t:36s;--dl:-29s} #cenik.c8 .c8-bub i:nth-child(5){--x:41%;--s:4px;--t:30s;--dl:-10s} #cenik.c8 .c8-bub i:nth-child(6){--x:50%;--s:10px;--t:43s;--dl:-34s} #cenik.c8 .c8-bub i:nth-child(7){--x:59%;--s:6px;--t:35s;--dl:-3s} #cenik.c8 .c8-bub i:nth-child(8){--x:67%;--s:14px;--t:49s;--dl:-25s} #cenik.c8 .c8-bub i:nth-child(9){--x:76%;--s:7px;--t:38s;--dl:-13s} #cenik.c8 .c8-bub i:nth-child(10){--x:84%;--s:5px;--t:32s;--dl:-18s} #cenik.c8 .c8-bub i:nth-child(11){--x:91%;--s:11px;--t:45s;--dl:-37s} #cenik.c8 .c8-bub i:nth-child(12){--x:97%;--s:6px;--t:35s;--dl:-5s} @keyframes c8Rise{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}5%{opacity:.7}100%{transform:translate3d(0,-2600px,0) scale(1.1);opacity:.5}} @keyframes c8Sway{from{translate:-8px 0}to{translate:8px 0}} /* ---------- ikone s sijem in obročem ---------- */ #cenik.c8 .c8-icw{--rc:127,219,255} #cenik.c8 .price-perk .c8-icw,#cenik.c8 .lp-ico.i3d-teal{--rc:63,201,183} #cenik.c8 .price-perk .c8-icw,#cenik.c8 .price-extra .leanpay:first-child .c8-icw{--rc:63,201,183} #cenik.c8 .c8-icw::before{content:"";position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--rc),.26),rgba(var(--rc),0));pointer-events:none} #cenik.c8 .c8-ring{display:block;position:absolute;inset:-6px;border-radius:36%;border:1px dashed rgba(var(--rc),.5);pointer-events:none;animation:c8Spin 14s linear infinite} @keyframes c8Spin{to{transform:rotate(360deg)}} /* ---------- glava ---------- */ #cenik.c8 .eyebrow{color:var(--x-cyan)} #cenik.c8 .h2{color:#fff} #cenik.c8 .h2-em{color:var(--x-aqua)} #cenik.c8 .price-lead{color:var(--x-on-2)} #cenik.c8 .price-perk{background:linear-gradient(120deg,rgba(28,174,143,.18) 0%,rgba(28,174,143,.05) 100%);border:1px solid rgba(63,201,183,.34); box-shadow:0 30px 60px -40px rgba(28,174,143,.5),inset 0 1px 0 rgba(255,255,255,.08)} #cenik.c8 .price-perk b{color:#7FF0D6} #cenik.c8 .price-perk p{color:var(--x-on-2)} /* ---------- graf cene ene terapije ---------- */ #cenik.c8 .ppc{background:linear-gradient(150deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 100%);border:1px solid rgba(127,219,255,.16); box-shadow:0 40px 80px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} #cenik.c8 .ppc-k{color:var(--x-cyan)} #cenik.c8 .ppc-big{color:var(--x-on-3)} #cenik.c8 .ppc-big b{color:#fff} #cenik.c8 .ppc-t{color:var(--x-on-2)} #cenik.c8 .c8-chart .ppc-cols{position:relative;padding-bottom:0; background:repeating-linear-gradient(to top,rgba(127,219,255,.08) 0 1px,rgba(127,219,255,0) 1px 42px);background-position:0 calc(100% - 30px);background-repeat:no-repeat;background-size:100% calc(100% - 46px)} #cenik.c8 .ppc-v{color:#fff} #cenik.c8 .ppc-c:first-child .ppc-v{color:var(--x-on-3)} #cenik.c8 .ppc-n{color:var(--x-on-3)} #cenik.c8 .ppc-c.is-best .ppc-n{color:#fff} #cenik.c8 .ppc-c:first-child .ppc-b{background:linear-gradient(180deg,rgba(232,240,248,.32) 0%,rgba(232,240,248,.12) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.12)} #cenik.c8 .ppc-b{position:relative;overflow:hidden;box-shadow:0 18px 30px -14px rgba(56,182,255,.6),inset 0 1px 0 rgba(255,255,255,.5)} #cenik.c8 .ppc-c.is-best .ppc-b{background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.85) 0 3px,transparent 4px),radial-gradient(circle at 70% 48%,rgba(255,255,255,.6) 0 2px,transparent 3px),radial-gradient(circle at 38% 74%,rgba(255,255,255,.5) 0 2.5px,transparent 3.5px),linear-gradient(180deg,#A9E9FF 0%,#38B6FF 55%,#1E6FD9 100%); box-shadow:0 0 0 2px rgba(169,233,255,.7),0 0 34px rgba(127,219,255,.55)} /* svetel odsev, ki potuje po stolpcih */ #cenik.c8 .ppc-c:not(:first-child) .ppc-b::after{content:"";position:absolute;left:-20%;right:-20%;top:100%;height:40%; background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));animation:c8Bar 5s ease-in-out calc(1.5s + var(--j) * .35s) infinite} @keyframes c8Bar{0%{top:100%}35%,100%{top:-40%}} /* ---------- paketi ---------- */ #cenik.c8 .pkg{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.065) 0%,rgba(255,255,255,.02) 100%);border:1px solid rgba(127,219,255,.14); box-shadow:0 30px 60px -44px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)} #cenik.c8 .pkg::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(56,182,255,.16),transparent 60%)} #cenik.c8 .pkg:hover{border-color:rgba(127,219,255,.4);box-shadow:0 44px 80px -42px rgba(56,182,255,.45),inset 0 1px 0 rgba(255,255,255,.1)} #cenik.c8 .pkg-name{color:var(--x-cyan)} #cenik.c8 .pkg-price{color:#fff} #cenik.c8 .pkg-desc{color:var(--x-on-3)} #cenik.c8 .pkg-bar,#cenik.c8 .pkg-list{border-top-color:rgba(127,219,255,.14)!important} #cenik.c8 .pkg-bar-top{color:var(--x-on-3)} #cenik.c8 .pkg-bar-top b{color:#fff} #cenik.c8 .pkg-off{background:conic-gradient(from -90deg,var(--x-sky) 0 calc(var(--p) * 1%),rgba(255,255,255,.12) 0);box-shadow:0 0 18px -6px rgba(56,182,255,.6)} #cenik.c8 .pkg-off::before{background:#0B2038} #cenik.c8 .pkg-off b{color:#fff} #cenik.c8 .pkg-dots i{background:radial-gradient(circle at 34% 30%,#FFFFFF 0 14%,#A9E9FF 46%,#38B6FF 100%);box-shadow:0 0 7px rgba(127,219,255,.45);transition:transform .35s var(--x-ease)} #cenik.c8 .pkg:hover .pkg-dots i{animation:c8Dot 1.2s ease-in-out calc(var(--i) * 30ms) 1} @keyframes c8Dot{0%,100%{transform:none}40%{transform:translateY(-3px) scale(1.12)}} #cenik.c8 .pkg-save{color:var(--x-on-3)} #cenik.c8 .pkg-save-pill{color:#7FF0D6;background:rgba(28,174,143,.18);box-shadow:inset 0 0 0 1px rgba(63,201,183,.35)} #cenik.c8 .pkg-list li{color:var(--x-on-2)} #cenik.c8 .pkg-list b{color:#fff} #cenik.c8 .pkg-list .ico{color:#3FE0C2;background:rgba(28,174,143,.2);box-shadow:0 0 10px -2px rgba(63,201,183,.6)} #cenik.c8 .btn-outline.pkg-cta{color:#fff;border-color:rgba(232,240,248,.55)} #cenik.c8 .btn-outline.pkg-cta:hover{background:#fff;color:var(--x-ink);border-color:#fff} #cenik.c8 .pkg-alt{color:var(--x-aqua);text-decoration-color:rgba(169,233,255,.45)} #cenik.c8 .pkg-alt:hover{text-decoration-color:currentColor} /* najpogosteje izbran: modra steklena kartica s krožečo svetlo obrobo */ @property --c8a{syntax:'';inherits:false;initial-value:0deg} #cenik.c8 .pkg-pop{background:linear-gradient(180deg,rgba(56,182,255,.2) 0%,rgba(30,111,217,.08) 55%,rgba(255,255,255,.02) 100%)!important; border:1px solid rgba(127,219,255,.5)!important;box-shadow:0 0 0 1px rgba(127,219,255,.15),0 50px 90px -40px rgba(56,182,255,.6)!important} #cenik.c8 .pkg-pop::after,#cenik.c8 .pkg-best::after{content:"";position:absolute;inset:-1px;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none; background:conic-gradient(from var(--c8a),rgba(127,219,255,0) 0deg,rgba(169,233,255,.95) 45deg,rgba(56,182,255,.3) 95deg,rgba(127,219,255,0) 150deg,rgba(127,219,255,0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); animation:c8Border 7s linear infinite} @keyframes c8Border{to{--c8a:360deg}} #cenik.c8 .pkg-pop .pkg-off::before{background:#0E2D52} #cenik.c8 .pkg-pop .pkg-tag{background:linear-gradient(135deg,var(--x-sky),var(--x-oxy));color:#fff;box-shadow:0 10px 24px -8px rgba(56,182,255,.85)} /* najnižja cena: temnejša kartica s turkizno-modro obrobo */ #cenik.c8 .pkg-best{background:radial-gradient(120% 60% at 50% 0%,rgba(127,219,255,.26),rgba(127,219,255,0) 62%),linear-gradient(170deg,#1A4F82 0%,#0F3560 50%,#0A2442 100%)!important; border-color:rgba(169,233,255,.55)!important;box-shadow:0 0 0 1px rgba(169,233,255,.18),0 50px 90px -40px rgba(127,219,255,.5)} #cenik.c8 .pkg-best::after{animation-duration:9s;animation-direction:reverse} #cenik.c8 .pkg-best .pkg-off::before{background:#0C2848} /* ---------- legenda, spletni nakup ---------- */ #cenik.c8 .bar-legend{color:var(--x-on-3)} #cenik.c8 .buy-strip{background:radial-gradient(60% 120% at 100% 0%,rgba(56,182,255,.28),rgba(56,182,255,0) 60%),linear-gradient(120deg,#0B2747 0%,#0E3058 50%,#123C66 100%); border:1px solid rgba(127,219,255,.28);box-shadow:0 50px 90px -50px rgba(56,182,255,.5),inset 0 1px 0 rgba(255,255,255,.1)} /* ---------- posamezne storitve, Leanpay, cenik ---------- */ #cenik.c8 .sub-label{color:var(--x-cyan)} #cenik.c8 .svc{background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 100%);border:1px solid rgba(127,219,255,.14);box-shadow:0 30px 60px -44px rgba(0,0,0,.9)} #cenik.c8 .svc li + li{border-top-color:rgba(127,219,255,.12)} #cenik.c8 .svc li{transition:background .3s} #cenik.c8 .svc li:hover{background:rgba(127,219,255,.05)} #cenik.c8 .svc span{color:#fff} #cenik.c8 .svc b{color:#fff} #cenik.c8 .svc-note{color:#5FE3C9} #cenik.c8 .svc-buy{background:rgba(255,255,255,.05);border-color:rgba(127,219,255,.35);color:var(--x-aqua)} #cenik.c8 .svc-buy:hover{background:linear-gradient(135deg,var(--x-sky),var(--x-oxy));border-color:transparent;color:#fff} #cenik.c8 .leanpay{background:linear-gradient(180deg,rgba(255,255,255,.065) 0%,rgba(255,255,255,.02) 100%);border:1px solid rgba(127,219,255,.14);box-shadow:0 30px 60px -44px rgba(0,0,0,.9)} #cenik.c8 .leanpay:hover{border-color:rgba(127,219,255,.4);box-shadow:0 40px 70px -40px rgba(56,182,255,.45)} #cenik.c8 .leanpay span.lp-txt{color:#fff} #cenik.c8 .lp-txt b{color:#fff} #cenik.c8 .lp-txt small{color:var(--x-on-3)} #cenik.c8 .leanpay .lp-chev{color:var(--x-aqua);transition:transform .3s var(--x-ease)} #cenik.c8 .leanpay:hover .lp-chev{transform:translateX(3px)} #cenik.c8 .leanpay .c8-icw{display:inline-flex} #cenik.c8 .fine{color:var(--x-on-3)} #cenik.c8 .btn:focus-visible,#cenik.c8 .pkg-alt:focus-visible,#cenik.c8 .leanpay:focus-visible,#cenik.c8 .svc-buy:focus-visible{outline:2px solid var(--x-cyan);outline-offset:3px} #cenik.c8.c8-off .c8-bub i,#cenik.c8.c8-off .c8-ring,#cenik.c8.c8-off .ppc-b::after,#cenik.c8.c8-off .pkg-pop::after,#cenik.c8.c8-off .pkg-best::after{animation-play-state:paused} @media (prefers-reduced-motion:reduce){ #cenik.c8 .c8-bub{display:none} #cenik.c8 .c8-ring,#cenik.c8 .ppc-b::after,#cenik.c8 .pkg-pop::after,#cenik.c8 .pkg-best::after,#cenik.c8 .pkg-dots i{animation:none!important} } } /* ===================================================================== V3 (21. 10. 2026) – popravki naročnika ===================================================================== */ #cenik .pkg-use-i .ico,#cenik .c8-fq-viz svg{max-width:100%} @media (min-width:1024px){ /* oznaki paketov: nad robom kartice, nad svetlo obrobo, z ikono */ #cenik.c8 .pkgs{padding-top:46px} #cenik.c8 .pkg-tag{z-index:6;top:0;display:inline-flex;align-items:center;gap:8px;transform:translate(-50%,calc(-100% - 8px));padding:9px 18px 9px 14px; font:700 13.5px/1.2 var(--x-sans);letter-spacing:.02em;white-space:nowrap;animation:c8Tag 2.8s ease-in-out infinite} #cenik.c8 .pkg-tag .ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #cenik.c8 .pkg-tag::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;border-radius:3px;transform:rotate(45deg);background:inherit;z-index:-1} #cenik.c8 .pkg-pop .pkg-tag{background:linear-gradient(135deg,#4FB4FF,#1E6FD9);color:#fff;--tg:56,182,255} #cenik.c8 .pkg-best .pkg-tag{background:linear-gradient(135deg,#C9F1FF,#7FDBFF);color:#062033;--tg:127,219,255} @keyframes c8Tag{0%,100%{box-shadow:0 10px 24px -10px rgba(var(--tg),.75),inset 0 1px 0 rgba(255,255,255,.35)}50%{box-shadow:0 12px 36px -6px rgba(var(--tg),1),inset 0 1px 0 rgba(255,255,255,.35)}} /* »Tipično za« na paketih */ #cenik.c8 .pkg-use{display:flex;align-items:center;gap:12px;margin-top:6px;padding:10px 12px;border-radius:16px;background:rgba(127,219,255,.06);border:1px solid rgba(127,219,255,.14)} #cenik.c8 .pkg-use-i{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#fff; background:linear-gradient(135deg,rgba(56,182,255,.6),rgba(30,111,217,.6));box-shadow:0 8px 18px -8px rgba(56,182,255,.8),inset 0 1px 0 rgba(255,255,255,.3)} #cenik.c8 .pkg-use-i .ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} #cenik.c8 .pkg-use > span:last-child{display:flex;flex-direction:column;gap:2px;font:600 14px/1.3 var(--x-sans);color:#fff} #cenik.c8 .pkg-use small{font:700 10.5px/1.2 var(--x-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--x-cyan)} #cenik.c8 .pkg-best .pkg-use{background:rgba(169,233,255,.1);border-color:rgba(169,233,255,.26)} #cenik.c8 .pkg-pop .pkg-use{background:rgba(56,182,255,.12);border-color:rgba(127,219,255,.28)} @media (max-width:1279.98px){ #cenik.c8 .pkg-use{gap:10px;padding:9px 10px} #cenik.c8 .pkg-use-i{flex-basis:30px;width:30px;height:30px} #cenik.c8 .pkg-use > span:last-child{font-size:13px;hyphens:manual} } /* poudarek frekvence */ #cenik.c8 .c8-freq{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(32px,4vw,64px);margin-top:clamp(36px,3vw,52px); padding:clamp(28px,2.4vw,40px) clamp(30px,3vw,48px);border-radius:28px;position:relative;overflow:hidden;isolation:isolate; background:radial-gradient(60% 120% at 100% 50%,rgba(56,182,255,.18),rgba(56,182,255,0) 65%),linear-gradient(150deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 100%); border:1px solid rgba(127,219,255,.2);box-shadow:0 40px 80px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07)} #cenik.c8 .c8-freq::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--x-aqua),var(--x-sky))} #cenik.c8 .c8-fq-t{display:flex;flex-direction:column;gap:14px} #cenik.c8 .c8-fq-k{display:flex;align-items:center;gap:14px;margin:0;font:600 12.5px/1.3 var(--x-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--x-cyan)} #cenik.c8 .c8-fq-ico.i3d{width:42px;height:42px} #cenik.c8 .c8-fq-ico .ico{width:20px;height:20px} #cenik.c8 .c8-fq-h{margin:0;font:400 calc(clamp(28px, 1vw + 16px, 36px) * var(--x-k))/1.12 var(--x-serif);letter-spacing:-.02em;color:#fff} :root[data-font="d"] #cenik.c8 .c8-fq-h{font-weight:300} #cenik.c8 .c8-fq-p{margin:0;font:400 16.5px/1.65 var(--x-sans);color:var(--x-on-2);max-width:40em} #cenik.c8 .c8-fq-viz{margin:0;display:flex;flex-direction:column;gap:12px} #cenik.c8 .c8-fq-viz svg{display:block;width:100%;height:auto;overflow:visible} #cenik.c8 .c8-ax path{stroke:rgba(127,219,255,.14);stroke-width:1;fill:none} #cenik.c8 .c8-ld{fill:none;stroke:url(#c8Dense);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(56,182,255,.6))} #cenik.c8 .c8-ls{fill:none;stroke:rgba(232,240,248,.42);stroke-width:2;stroke-dasharray:4 4;stroke-linejoin:round} #cenik.c8 .c8-dd circle{fill:#A9E9FF} #cenik.c8 .c8-ds circle{fill:rgba(232,240,248,.6)} #cenik.c8 .c8-end{fill:#fff;filter:drop-shadow(0 0 8px rgba(127,219,255,.9));transform-box:fill-box;transform-origin:50% 50%} #cenik.c8 .c8-fq-viz figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font:500 13px/1.3 var(--x-sans);color:var(--x-on-2)} #cenik.c8 .c8-lg{display:inline-flex;align-items:center;gap:8px} #cenik.c8 .c8-lg i{width:18px;height:3px;border-radius:2px} #cenik.c8 .c8-lg-d i{background:linear-gradient(90deg,#38B6FF,#A9E9FF);box-shadow:0 0 8px rgba(56,182,255,.7)} #cenik.c8 .c8-lg-s i{background:repeating-linear-gradient(90deg,rgba(232,240,248,.5) 0 4px,transparent 4px 7px)} #cenik.c8 .c8-fq-viz small{margin-left:auto;font:500 11.5px/1.3 var(--x-sans);color:var(--x-on-3)} /* risanje ob prikazu */ #cenik.c8 .c8-freq .c8-ld{stroke-dasharray:100;stroke-dashoffset:100} #cenik.c8 .c8-freq .c8-area,#cenik.c8 .c8-freq .c8-dd,#cenik.c8 .c8-freq .c8-ds,#cenik.c8 .c8-freq .c8-end{opacity:0} #cenik.c8 .c8-freq.c8-go .c8-ld{animation:c8Draw 2.4s var(--x-ease) .3s forwards} #cenik.c8 .c8-freq.c8-go .c8-area{animation:c8Fade 1s ease 1.6s forwards} #cenik.c8 .c8-freq.c8-go .c8-ds{animation:c8Fade .8s ease .6s forwards} #cenik.c8 .c8-freq.c8-go .c8-dd{animation:c8Fade .8s ease 1.2s forwards} #cenik.c8 .c8-freq.c8-go .c8-end{animation:c8Fade .5s ease 2.5s forwards,c8EndP 2.2s ease-in-out 3s infinite} @keyframes c8Draw{to{stroke-dashoffset:0}} @keyframes c8Fade{to{opacity:1}} @keyframes c8EndP{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}} #cenik.c8.c8-off .pkg-tag,#cenik.c8.c8-off .c8-end{animation-play-state:paused} } @media (min-width:1024px) and (prefers-reduced-motion:reduce){ #cenik.c8 .pkg-tag{animation:none} #cenik.c8 .c8-freq .c8-ld{stroke-dashoffset:0} #cenik.c8 .c8-freq .c8-area,#cenik.c8 .c8-freq .c8-dd,#cenik.c8 .c8-freq .c8-ds,#cenik.c8 .c8-freq .c8-end{opacity:1} } /* ===================================================================== V4 (21. 10. 2026) – popravki naročnika ===================================================================== */ /* ikone: steklena ploščica z animirano risbo (osnova velja tudi za telefon) */ #cenik .c8-tile{position:relative;flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:17px;overflow:hidden;isolation:isolate; background:linear-gradient(150deg,#4FB4FF 0%,#1E6FD9 55%,#0F3E86 100%);box-shadow:0 12px 26px -12px rgba(30,111,217,.9),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -10px 18px -10px rgba(4,11,22,.55)} #cenik .c8-tile-teal{background:linear-gradient(150deg,#5EF2C9 0%,#1CAE8F 55%,#0A6B5E 100%);box-shadow:0 12px 26px -12px rgba(28,174,143,.9),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -10px 18px -10px rgba(4,30,26,.55)} #cenik .c8-tile::before{content:"";position:absolute;left:12%;right:12%;top:5%;height:42%;border-radius:50% 50% 45% 45%/70% 70% 30% 30%;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));z-index:-1} #cenik .c8-tile svg{width:30px;height:30px;overflow:visible} #cenik .c8-tile .tl,#cenik .c8-tile .tl *{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} #cenik .ppc-sum > .c8-tile{grid-row:1 / 3} @media (min-width:1024px){ #cenik.c8 .c8-tile{width:58px;height:58px;border-radius:19px} #cenik.c8 .c8-tile svg{width:32px;height:32px} #cenik.c8 .c8-fq-k .c8-tile{width:46px;height:46px;border-radius:15px} #cenik.c8 .c8-fq-k .c8-tile svg{width:26px;height:26px} #cenik.c8 .leanpay .c8-tile{display:grid} /* koledar: trije obiski v tednu se zapovrstjo prižgejo */ #cenik.c8 .cal-d circle{fill:rgba(255,255,255,.28)} #cenik.c8 .cal-on circle{fill:#D9F6FF;opacity:0;transform-box:fill-box;transform-origin:50% 50%;filter:drop-shadow(0 0 3px #A9E9FF)} #cenik.c8 .c8-t-cal.c8-go .cal-on circle{animation:c8On 4.2s ease-in-out infinite} #cenik.c8 .c8-t-cal.c8-go .o2{animation-delay:.45s!important} #cenik.c8 .c8-t-cal.c8-go .o3{animation-delay:.9s!important} @keyframes c8On{0%,6%{opacity:0;transform:scale(.3)}14%,74%{opacity:1;transform:scale(1)}86%,100%{opacity:0;transform:scale(.6)}} /* merilnik: kazalec se premakne na nižjo ceno, lok se napolni */ #cenik.c8 .g-tr{fill:none;stroke:rgba(255,255,255,.28);stroke-width:4;stroke-linecap:round} #cenik.c8 .g-ar{fill:none;stroke:url(#c8Gg);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100} #cenik.c8 .g-nd path{stroke:#fff;stroke-width:2.6;stroke-linecap:round} #cenik.c8 .g-nd{transform-box:view-box;transform-origin:24px 32px;rotate:-72deg} #cenik.c8 .g-c{fill:#fff} #cenik.c8 .c8-t-gauge.c8-go .g-ar{animation:c8Arc 1.8s var(--x-ease) .2s forwards} #cenik.c8 .c8-t-gauge.c8-go .g-nd{animation:c8Needle 1.8s var(--x-ease) .2s forwards,c8Wob 2.6s ease-in-out 2s infinite alternate} @keyframes c8Arc{to{stroke-dashoffset:0}} @keyframes c8Needle{0%{rotate:-72deg}70%{rotate:62deg}100%{rotate:54deg}} @keyframes c8Wob{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}} /* srce: utrip in krivulja EKG */ #cenik.c8 .h-h{fill:rgba(255,255,255,.14);stroke:#fff;stroke-width:2.2;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 55%} #cenik.c8 .h-p{fill:none;stroke:#E9FFF8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34 66;stroke-dashoffset:100;filter:drop-shadow(0 0 2px #7FF0D6)} #cenik.c8 .c8-t-heart.c8-go .h-h{animation:c8Beat 1.6s ease-in-out infinite} #cenik.c8 .c8-t-heart.c8-go .h-p{animation:c8Ecg 1.6s linear infinite} @keyframes c8Beat{0%,100%{transform:scale(1)}12%{transform:scale(1.1)}24%{transform:scale(.98)}36%{transform:scale(1.06)}50%{transform:scale(1)}} @keyframes c8Ecg{to{stroke-dashoffset:0}} /* košarica: paket pade v košarico */ #cenik.c8 .c-b{fill:#D9F6FF;opacity:0;transform-box:view-box} #cenik.c8 .c-w{fill:#fff} #cenik.c8 .c-cart{transform-box:view-box} #cenik.c8 .c8-t-cart.c8-go .c-b{animation:c8Drop 3s cubic-bezier(.5,0,.6,1) infinite} #cenik.c8 .c8-t-cart.c8-go .c-cart{animation:c8Bump 3s ease-out infinite} @keyframes c8Drop{0%{opacity:0;transform:translateY(-14px)}12%{opacity:1}38%{opacity:1;transform:translateY(8px)}55%,100%{opacity:0;transform:translateY(8px)}} @keyframes c8Bump{0%,36%,60%,100%{transform:none}44%{transform:translateY(1.6px)}} /* kartica: obroki se zapovrstjo poravnajo */ #cenik.c8 .k-chip{fill:#E9FFF8} #cenik.c8 .k-i rect{fill:rgba(255,255,255,.3)} #cenik.c8 .c8-t-card.c8-go .k-i rect{animation:c8Pay 3.6s ease-in-out infinite} #cenik.c8 .c8-t-card.c8-go .k-i rect:nth-child(2){animation-delay:.5s} #cenik.c8 .c8-t-card.c8-go .k-i rect:nth-child(3){animation-delay:1s} @keyframes c8Pay{0%,8%{fill:rgba(255,255,255,.3)}18%,78%{fill:#FFFFFF}90%,100%{fill:rgba(255,255,255,.3)}} /* dokument: vrstice se izpišejo */ #cenik.c8 .d-l path{fill:none;stroke:#E6F6FF;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:10;stroke-dashoffset:10} #cenik.c8 .c8-t-doc.c8-go .d-l path{animation:c8Write 4s ease-in-out infinite} #cenik.c8 .c8-t-doc.c8-go .d-l path:nth-child(2){animation-delay:.4s} #cenik.c8 .c8-t-doc.c8-go .d-l path:nth-child(3){animation-delay:.8s} @keyframes c8Write{0%{stroke-dashoffset:10}20%,75%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:-10}} #cenik.c8 .leanpay:hover .c8-tile,#cenik.c8 .price-perk:hover .c8-tile{transform:translateY(-2px)} #cenik.c8 .c8-tile{transition:transform .4s var(--x-ease)} /* prihranek Paketa 30: meta barva, večji krog, ki se napolni */ @property --c8p{syntax:'';inherits:false;initial-value:40} #cenik.c8 .pkg-best .pkg-off{width:88px;height:88px;background:conic-gradient(from -90deg,#5EF2C9 0,#2FD3B0 calc(var(--c8p) * 1%),rgba(255,255,255,.12) 0); box-shadow:0 0 0 1px rgba(94,242,201,.3),0 0 34px -2px rgba(94,242,201,.55)} #cenik.c8 .pkg-best .pkg-off::before{inset:7px;background:radial-gradient(circle at 50% 30%,#123F53 0%,#0B2747 75%)} #cenik.c8 .pkg-best .pkg-off b{font:800 22px/1 var(--x-sans);color:#7FFFE0;text-shadow:0 0 14px rgba(94,242,201,.6)} #cenik.c8 .pkg-best.c8-go .pkg-off{animation:c8Fill 1.6s var(--x-ease) .3s both} @keyframes c8Fill{from{--c8p:0}to{--c8p:40}} #cenik.c8 .pkg-best .pkg-save-pill{padding:6px 13px;font:800 15px/1.3 var(--x-sans);color:#03261F;background:linear-gradient(135deg,#9BFFE6,#2FD3B0);box-shadow:0 10px 26px -10px rgba(47,211,176,.95),inset 0 1px 0 rgba(255,255,255,.6)} #cenik.c8 .pkg-best .pkg-bar-top b{color:#7FFFE0} /* graf: oznaka »−40 %« nad stolpcem Paketa 30 in meta poudarek v povzetku */ #cenik.c8 .c8-save{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font:800 13px/1.2 var(--x-sans);color:#03261F; background:linear-gradient(135deg,#9BFFE6,#2FD3B0);box-shadow:0 8px 20px -8px rgba(47,211,176,.95);white-space:nowrap} #cenik.c8 .ppc-big b{background:linear-gradient(90deg,#A9E9FF 0%,#5EF2C9 100%);-webkit-background-clip:text;background-clip:text;color:transparent} /* področja na paketih kot oznake */ #cenik.c8 .pkg-use{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 12px 13px} #cenik.c8 .pkg-use-h{display:flex;align-items:center;gap:10px;margin:0;font:700 10.5px/1.2 var(--x-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--x-cyan)} #cenik.c8 .pkg-use-i{flex-basis:30px;width:30px;height:30px;border-radius:10px} #cenik.c8 .pkg-use-i .ico{width:16px;height:16px} #cenik.c8 .pkg-use-l{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none} #cenik.c8 .pkg-use-l li{padding:5px 10px;border-radius:999px;font:600 12.5px/1.25 var(--x-sans);color:#fff;background:rgba(127,219,255,.1);border:1px solid rgba(127,219,255,.22)} #cenik.c8 .pkg-use-l li:first-child{background:rgba(56,182,255,.22);border-color:rgba(127,219,255,.4)} #cenik.c8 .pkg-best .pkg-use-l li:first-child{background:rgba(94,242,201,.16);border-color:rgba(94,242,201,.4);color:#E9FFF8} @media (max-width:1279.98px){ #cenik.c8 .pkg-use-l li{padding:4px 8px;font-size:11.5px} #cenik.c8 .pkg-best .pkg-off{width:76px;height:76px} #cenik.c8 .pkg-best .pkg-off b{font-size:19px} } /* nakup po e-pošti */ #cenik.c8 .bs-act{display:flex;flex-direction:column;align-items:stretch;gap:10px} #cenik.c8 .c8-mail{gap:9px;min-height:48px;padding:0 22px;border-radius:999px;color:#fff;background:rgba(255,255,255,.06);border:1.5px solid rgba(232,240,248,.5);white-space:nowrap;text-decoration:none} #cenik.c8 .c8-mail .ico{width:18px;height:18px} #cenik.c8 .c8-mail:hover{background:#fff;color:var(--x-ink);border-color:#fff} #cenik.c8 .c8-mail:focus-visible{outline:2px solid var(--x-cyan);outline-offset:3px} #cenik.c8.c8-off .c8-tile *{animation-play-state:paused!important} } @media (min-width:1024px) and (prefers-reduced-motion:reduce){ #cenik.c8 .c8-tile *{animation:none!important} #cenik.c8 .cal-on circle{opacity:1} #cenik.c8 .g-ar{stroke-dashoffset:0} #cenik.c8 .g-nd{rotate:54deg} #cenik.c8 .d-l path{stroke-dashoffset:0} } /* V5: oznake področij v dveh stolpcih (ne ena pod drugo); daljše oznake se prelomijo znotraj oznake */ @media (min-width:1024px){ #cenik.c8 .pkg-use{padding:12px 11px 12px} #cenik.c8 .pkg-use-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} #cenik.c8 .pkg-use-l li{display:flex;align-items:center;min-height:38px;padding:6px 9px;border-radius:11px;font-size:12.5px;line-height:1.22;letter-spacing:-.005em;text-wrap:balance} } @media (min-width:1024px) and (max-width:1279.98px){ #cenik.c8 .pkg-use-l{grid-template-columns:1fr} #cenik.c8 .pkg-use-l li{min-height:0;padding:5px 8px;font-size:11.5px} } /* ===================================================================== V6 (28. 10. 2026) – ČLANSTVO OxySphere (Mini / Max) v ceniku Oznaki »01 Intenzivni protokol · paketi« in »02 Vzdrževalni in regeneracijski protokol · članstvo«, temna steklena plošča članstva (velja pri vseh širinah – tudi na svetlem mobilnem ceniku), mesečni krog terapij (kazalec obkroži mesec, terapije zasvetijo), ritem paket → članstvo. Opozorilo: pravila zunaj @media veljajo v predogledu in v »Celotni strani – za testiranje« (sekcije.css); sestavi.py jih na telefonu ne naloži (glej odprto točko o sekcije.css). ===================================================================== */ #cenik .c8-lead-a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:600} /* oznaki skupin */ #cenik .c8-kick{display:flex;align-items:center;gap:12px;margin:34px 0 14px;font:600 12px/1.3 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--navy-900,#0A1A2E)} #cenik .c8-kick > i{flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(30,111,217,.35),rgba(30,111,217,0))} #cenik .c8-kick-n{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;font:700 13px/1 var(--f-display);letter-spacing:0;color:#fff;background:linear-gradient(150deg,#4FB4FF,#1E6FD9);box-shadow:0 8px 18px -8px rgba(30,111,217,.8),inset 0 1px 0 rgba(255,255,255,.4)} #cenik .c8-kick-m .c8-kick-n{background:linear-gradient(150deg,#5EF2C9,#1CAE8F 60%,#0A6B5E);box-shadow:0 8px 18px -8px rgba(28,174,143,.85),inset 0 1px 0 rgba(255,255,255,.4)} #cenik .c8-kick-t b{font-weight:600;opacity:.6} #cenik .c8-kick-s{display:none} #cenik .c8m-new{flex:none;padding:5px 11px;border-radius:999px;font:800 11px/1.2 var(--f-display);letter-spacing:.12em;color:#03261F;background:linear-gradient(135deg,#9BFFE6,#2FD3B0);box-shadow:0 8px 20px -8px rgba(47,211,176,.95)} /* plošča */ #cenik .c8m{margin-top:8px;scroll-margin-top:var(--hh,90px)} #cenik .c8m-shell{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:22px;padding:22px 18px;border-radius:24px;color:#E8F0F8; background:radial-gradient(70% 50% at 100% 0%,rgba(94,242,201,.2),rgba(94,242,201,0) 62%),radial-gradient(60% 40% at 0% 100%,rgba(56,182,255,.2),rgba(56,182,255,0) 65%),linear-gradient(160deg,#0A2A3E 0%,#0A2240 45%,#071A33 100%); border:1px solid rgba(94,242,201,.3);box-shadow:0 40px 80px -46px rgba(28,174,143,.55),inset 0 1px 0 rgba(255,255,255,.1)} #cenik .c8m-shell::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image:radial-gradient(rgba(127,255,224,.16) 1px,rgba(127,255,224,0) 1.6px);background-size:26px 26px; -webkit-mask-image:radial-gradient(50% 40% at 80% 6%,#000,rgba(0,0,0,0) 80%);mask-image:radial-gradient(50% 40% at 80% 6%,#000,rgba(0,0,0,0) 80%)} #cenik .c8m-deco{position:absolute;inset:0;z-index:-1;pointer-events:none} #cenik .c8m-orb{position:absolute;border-radius:50%;border:1px solid rgba(94,242,201,.14)} #cenik .c8m-o1{width:520px;height:520px;right:-180px;top:-260px} #cenik .c8m-o2{width:760px;height:760px;right:-300px;top:-380px;border-style:dashed;border-color:rgba(127,219,255,.1)} #cenik .c8m-o3{width:12px;height:12px;right:74px;top:254px;border:0;background:#7FFFE0;box-shadow:0 0 14px #5EF2C9;transform-origin:6px -254px} #cenik .c8m-top{display:flex;flex-direction:column;gap:22px} #cenik .c8m-intro{display:flex;flex-direction:column;gap:14px} #cenik .c8m-k{display:flex;align-items:center;gap:14px;margin:0;font:600 12px/1.3 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#7FF0D6} #cenik .c8m-k .c8-tile{width:46px;height:46px;border-radius:15px} #cenik .c8m-k .c8-tile svg{width:26px;height:26px} #cenik .c8m-h{margin:0;font:600 30px/1.08 var(--f-display);letter-spacing:-.02em;color:#fff} #cenik .c8m-h em{font-style:normal;background:linear-gradient(90deg,#A9E9FF,#5EF2C9);-webkit-background-clip:text;background-clip:text;color:transparent} #cenik .c8m-p{margin:0;font:400 15.5px/1.62 var(--f-body);color:rgba(232,240,248,.82)} #cenik .c8m-who{display:grid;gap:8px;margin:2px 0 0;padding:0;list-style:none} #cenik .c8m-who li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(127,219,255,.14)} #cenik .c8m-who li > span:last-child{display:flex;flex-direction:column;gap:2px;font:600 14.5px/1.3 var(--f-display);color:#fff} #cenik .c8m-who small{font:400 13px/1.35 var(--f-body);color:rgba(232,240,248,.68)} #cenik .c8m-wi,#cenik .c8m-ii{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#E9FFF8;background:linear-gradient(140deg,rgba(94,242,201,.42),rgba(28,174,143,.22));box-shadow:inset 0 0 0 1px rgba(94,242,201,.35),0 8px 16px -10px rgba(47,211,176,.9)} #cenik .c8m-wi .ico,#cenik .c8m-ii .ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* kartici Mini / Max */ #cenik .c8m-plans{display:grid;gap:16px} #cenik .c8m-plan{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ph ph" "dial price" "facts facts" "min min";align-items:center;gap:12px 16px;padding:20px 18px 18px;border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.025) 100%);border:1px solid rgba(127,219,255,.2);box-shadow:0 30px 60px -44px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)} #cenik .c8m-max{background:radial-gradient(120% 60% at 50% 0%,rgba(94,242,201,.2),rgba(94,242,201,0) 62%),linear-gradient(170deg,#11466A 0%,#0D3456 55%,#0A2442 100%);border-color:rgba(94,242,201,.5);box-shadow:0 0 0 1px rgba(94,242,201,.14),0 40px 80px -40px rgba(47,211,176,.5)} #cenik .c8m-pill{position:absolute;top:0;right:18px;transform:translateY(-50%);display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border-radius:999px;font:700 12px/1.2 var(--f-display);color:#03261F;background:linear-gradient(135deg,#C9FFF0,#5EF2C9);box-shadow:0 10px 22px -8px rgba(47,211,176,.9)} #cenik .c8m-pill .ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} #cenik .c8m-ph{grid-area:ph} #cenik .c8m-name{margin:0;font:600 13px/1.3 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#7FDBFF} #cenik .c8m-name b{font-weight:800;color:#fff} #cenik .c8m-max .c8m-name{color:#7FF0D6} #cenik .c8m-tag{margin:4px 0 0;font:400 14px/1.4 var(--f-body);color:rgba(232,240,248,.7)} #cenik .c8m-dial{grid-area:dial;position:relative;width:104px;height:104px} #cenik .c8m-dial .md{display:block;width:100%;height:100%;overflow:visible} #cenik .md-tr{fill:none;stroke:rgba(255,255,255,.14);stroke-width:7;stroke-dasharray:22.6 2.4} #cenik .md-sw{transform-box:view-box;transform-origin:60px 60px} #cenik .md-h{stroke:#7FFFE0;stroke-width:1.6;stroke-linecap:round;opacity:.8} #cenik .md-d{fill:#7FFFE0;filter:drop-shadow(0 0 5px rgba(94,242,201,.95));transform-box:fill-box;transform-origin:50% 50%} #cenik .c8m-plan:not(.c8m-max) .md-d{fill:#A9E9FF;filter:drop-shadow(0 0 5px rgba(127,219,255,.95))} #cenik .c8m-plan:not(.c8m-max) .md-h{stroke:#A9E9FF} #cenik .md-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;pointer-events:none} #cenik .md-c b{font:800 24px/1 var(--f-display);color:#fff;letter-spacing:-.02em} #cenik .md-c small{font:600 9.5px/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:rgba(232,240,248,.62)} #cenik .c8m-price{grid-area:price;margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px} #cenik .c8m-price b{font:600 40px/1 var(--f-display);letter-spacing:-.03em;color:#fff} #cenik .c8m-price span{font:500 15px/1 var(--f-body);color:rgba(232,240,248,.7)} #cenik .c8m-facts{grid-area:facts;display:grid;gap:0;margin:2px 0 0;padding:0;list-style:none;border-top:1px solid rgba(127,219,255,.16)} #cenik .c8m-facts li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed rgba(127,219,255,.14);font:400 13.5px/1.3 var(--f-body);color:rgba(232,240,248,.7)} #cenik .c8m-facts b{font:600 14px/1.3 var(--f-display);color:#fff;text-align:right;white-space:nowrap} #cenik .c8m-facts em{margin-left:4px;padding:2px 7px;border-radius:999px;font:800 11.5px/1.2 var(--f-display);font-style:normal;color:#7FF0D6;background:rgba(28,174,143,.2);box-shadow:inset 0 0 0 1px rgba(63,201,183,.4)} #cenik .c8m-max .c8m-facts em{color:#03261F;background:linear-gradient(135deg,#9BFFE6,#2FD3B0);box-shadow:0 6px 16px -6px rgba(47,211,176,.9)} #cenik .c8m-min{grid-area:min;margin:0;font:400 12px/1.45 var(--f-body);color:rgba(232,240,248,.58)} /* ritem + vključeno */ #cenik .c8m-mid{display:flex;flex-direction:column;gap:20px} #cenik .c8m-rhythm{margin:0;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:18px;background:rgba(4,14,28,.42);border:1px solid rgba(127,219,255,.14)} #cenik .c8m-rh{display:flex;flex-direction:column;gap:8px} #cenik .c8m-rk{font:600 12px/1.3 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#7FDBFF} #cenik .c8m-lg{display:flex;flex-direction:column;gap:6px;font:400 13px/1.4 var(--f-body);color:rgba(232,240,248,.72)} #cenik .c8m-lg b{color:#fff;font-weight:600} #cenik .c8m-lg > span{display:flex;gap:9px;align-items:baseline} #cenik .c8m-lg i{flex:none;width:9px;height:9px;border-radius:50%;transform:translateY(1px)} #cenik .c8m-lg-p i{background:#38B6FF;box-shadow:0 0 8px rgba(56,182,255,.8)} #cenik .c8m-lg-m i{background:#5EF2C9;box-shadow:0 0 8px rgba(94,242,201,.8)} #cenik .c8m-rsvg{display:block;width:100%;height:auto;overflow:visible} #cenik .rl{fill:none;stroke-width:2.4;stroke-linecap:round} #cenik .rl-p{stroke:#38B6FF;opacity:.55} #cenik .rl-x{stroke:#5EF2C9;opacity:.55} #cenik .rl-n{stroke:#A9E9FF;opacity:.45;stroke-dasharray:3 5} #cenik .rd-p{fill:#38B6FF;filter:drop-shadow(0 0 4px rgba(56,182,255,.9))} #cenik .rd-x{fill:#5EF2C9;filter:drop-shadow(0 0 5px rgba(94,242,201,.9))} #cenik .rd-n{fill:#0A2240;stroke:#A9E9FF;stroke-width:2.2;filter:drop-shadow(0 0 4px rgba(127,219,255,.8))} #cenik .rd{transform-box:fill-box;transform-origin:50% 50%} #cenik .ra{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} #cenik .ra-x{stroke:#5EF2C9}#cenik .ra-n{stroke:#A9E9FF} #cenik .rlab{font:600 13px var(--f-display);letter-spacing:.01em} #cenik .rlab-p{fill:#7FC8FF}#cenik .rlab-x{fill:#7FF0D6}#cenik .rlab-n{fill:#C9F1FF} #cenik .rt text,#cenik .rt-l{font:500 10.5px var(--f-body);fill:rgba(232,240,248,.42);text-anchor:middle} #cenik .rt-l{text-anchor:start;fill:rgba(232,240,248,.32)} #cenik .c8m-note{font:400 12px/1.45 var(--f-body);color:rgba(232,240,248,.55)} #cenik .c8m-inc{display:flex;flex-direction:column;gap:12px} #cenik .c8m-ik{margin:0;font:600 12px/1.3 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#7FF0D6} #cenik .c8m-il{display:grid;gap:8px;margin:0;padding:0;list-style:none} #cenik .c8m-il li{display:flex;align-items:center;gap:12px;font:400 14px/1.4 var(--f-body);color:rgba(232,240,248,.78)} #cenik .c8m-il b{color:#fff;font-weight:600} /* pristop */ #cenik .c8m-join{display:flex;flex-direction:column;gap:16px;padding-top:18px;border-top:1px solid rgba(127,219,255,.16)} #cenik .c8m-jt{margin:0 0 10px;font:600 18px/1.2 var(--f-display);color:#fff} #cenik .c8m-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none} #cenik .c8m-steps li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center} #cenik .c8m-steps .bs-n{grid-row:1 / 3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:700 13px/1 var(--f-display);color:#03261F;background:linear-gradient(135deg,#C9FFF0,#5EF2C9);box-shadow:0 0 0 4px rgba(94,242,201,.12)} #cenik .c8m-steps b{font:600 14.5px/1.3 var(--f-display);color:#fff} #cenik .c8m-steps small{font:400 12.5px/1.35 var(--f-body);color:rgba(232,240,248,.62)} #cenik .c8m-act{display:flex;flex-direction:column;gap:10px} #cenik .c8m-act .btn{min-height:52px;border-radius:999px} #cenik .c8m-tel{background:linear-gradient(135deg,#2FD3B0,#1CAE8F 55%,#13907A);color:#fff;box-shadow:0 14px 30px -12px rgba(28,174,143,.9),inset 0 1px 0 rgba(255,255,255,.35)} #cenik .c8m-tel:hover{filter:brightness(1.08)} #cenik .c8m-mail{display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#fff;background:rgba(255,255,255,.06);border:1.5px solid rgba(232,240,248,.5);text-decoration:none;font-weight:600} #cenik .c8m-mail:hover{background:#fff;color:#0A1A2E;border-color:#fff} #cenik .c8m-act .ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #cenik .c8m-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:2px} #cenik .c8m-links a{display:inline-flex;align-items:center;gap:4px;font:600 13.5px/1.3 var(--f-display);color:#A9E9FF;text-decoration:underline;text-decoration-color:rgba(169,233,255,.4);text-underline-offset:3px} #cenik .c8m-links a:hover{text-decoration-color:currentColor} #cenik .c8m-links .ico{width:14px;height:14px} #cenik .c8m-shell a:focus-visible,#cenik .c8-lead-a:focus-visible{outline:2px solid #7FDBFF;outline-offset:3px} #cenik .c8m-fine{margin:12px 0 0} /* animacije (vse širine) */ #cenik .c8m-plan.c8-go .md-sw{animation:c8mSweep 8s linear infinite} #cenik .c8m-plan.c8-go .md-d{animation:c8mPing 8s ease-out var(--dl) infinite} @keyframes c8mSweep{to{transform:rotate(360deg)}} @keyframes c8mPing{0%{transform:scale(1.75);opacity:1}14%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:.85}} #cenik .c8m-rhythm .rd{opacity:0;transform:scale(.3)} #cenik .c8m-rhythm .rl{stroke-dasharray:100;stroke-dashoffset:100} #cenik .c8m-rhythm .rl-n{stroke-dasharray:none} #cenik .c8m-rhythm.c8-go .rl{animation:c8Draw 1.6s var(--x-ease) forwards} #cenik .c8m-rhythm.c8-go .rl-x,#cenik .c8m-rhythm.c8-go .rl-n{animation-delay:.7s} #cenik .c8m-rhythm.c8-go .rd{animation:c8mIn .5s var(--x-ease) calc(var(--i) * 70ms) forwards} #cenik .c8m-rhythm.c8-go .rd-x{animation:c8mIn .5s var(--x-ease) calc(var(--i) * 70ms) forwards,c8mBeat 4s ease-in-out calc(2.4s + (var(--i) - 10) * .5s) infinite} #cenik .c8m-rhythm .ra{opacity:0} #cenik .c8m-rhythm.c8-go .ra{animation:c8mFade .6s ease 2.2s forwards} @keyframes c8mIn{to{opacity:1;transform:scale(1)}} @keyframes c8mFade{to{opacity:1}} @keyframes c8mBeat{0%,18%,100%{transform:scale(1)}8%{transform:scale(1.6)}} @keyframes c8Draw{to{stroke-dashoffset:0}} #cenik .c8-t-loop .lp-a{transform-box:view-box;transform-origin:24px 24px} #cenik .c8-t-loop .lp-dot{fill:#fff;transform-box:fill-box;transform-origin:50% 50%} #cenik .c8-t-loop.c8-go .lp-a{animation:c8mLoop 6s cubic-bezier(.6,0,.3,1) infinite} #cenik .c8-t-loop.c8-go .lp-dot{animation:c8mDot 6s ease-in-out infinite} @keyframes c8mLoop{0%,30%{transform:rotate(0)}50%,80%{transform:rotate(180deg)}100%{transform:rotate(360deg)}} @keyframes c8mDot{0%,30%,50%,80%,100%{transform:scale(1)}40%,90%{transform:scale(1.45)}} #cenik .c8m-o3{animation:c8mOrbit 22s linear infinite} @keyframes c8mOrbit{to{transform:rotate(360deg)}} #cenik.c8-off .c8m *,#cenik.c8-off .c8m-o3{animation-play-state:paused!important} @media (prefers-reduced-motion:reduce){ #cenik .c8m *,#cenik .c8m-o3{animation:none!important} #cenik .c8m-rhythm .rd,#cenik .c8m-rhythm .ra{opacity:1;transform:none} #cenik .c8m-rhythm .rl{stroke-dashoffset:0} } /* tablica */ @media (min-width:640px){ #cenik .c8m-plans{grid-template-columns:repeat(2,minmax(0,1fr))} #cenik .c8m-plan{grid-template-columns:1fr;grid-template-areas:"ph" "dial" "price" "facts" "min";justify-items:start} #cenik .c8m-who{grid-template-columns:repeat(3,minmax(0,1fr))} #cenik .c8m-who li{flex-direction:column;align-items:flex-start} } @media (min-width:768px){ #cenik .c8m-shell{padding:30px 28px;gap:26px;border-radius:28px} #cenik .c8m-act{flex-direction:row;flex-wrap:wrap;align-items:center} #cenik .c8m-links{justify-content:flex-start} #cenik .c8m-il{grid-template-columns:repeat(2,minmax(0,1fr))} #cenik .c8m-steps{grid-template-columns:repeat(3,minmax(0,1fr))} } /* namizje */ @media (min-width:1024px){ #cenik.c8 .c8-kick{margin:clamp(40px,3.4vw,58px) 0 18px;font-family:var(--x-sans);color:var(--x-on)} #cenik.c8 .c8-kick > i{background:linear-gradient(90deg,rgba(127,219,255,.35),rgba(127,219,255,0))} #cenik.c8 .c8-kick-m > i{background:linear-gradient(90deg,rgba(94,242,201,.45),rgba(94,242,201,0))} #cenik.c8 .c8-kick-t b{opacity:.55} #cenik.c8 .c8-kick-s{display:inline;font:500 12px/1.3 var(--x-sans);letter-spacing:.06em;text-transform:none;color:var(--x-on-3)} #cenik.c8 .c8-kick + .ppc{margin-top:0} #cenik.c8 .c8-lead-a{color:#7FF0D6;text-decoration-color:rgba(127,240,214,.5)} #cenik.c8 .c8m{margin-top:clamp(20px,2vw,30px)} #cenik.c8 .c8m-shell{gap:30px;padding:clamp(34px,3vw,48px) clamp(32px,3.2vw,52px) clamp(30px,2.6vw,40px);border-radius:32px} #cenik.c8 .c8m-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(30px,3.4vw,56px);align-items:start} #cenik.c8 .c8m-k,#cenik.c8 .c8m-name,#cenik.c8 .c8m-rk,#cenik.c8 .c8m-ik,#cenik.c8 .c8-kick-n,#cenik.c8 .c8m-new,#cenik.c8 .c8m-pill{font-family:var(--x-sans)} #cenik.c8 .c8m-h{font:400 calc(clamp(40px, 1.6vw + 18px, 56px) * var(--x-k))/1.04 var(--x-serif);letter-spacing:-.02em} :root[data-font="d"] #cenik.c8 .c8m-h{font-weight:300} #cenik.c8 .c8m-p{font:400 16.5px/1.65 var(--x-sans);max-width:36em} #cenik.c8 .c8m-who{grid-template-columns:1fr;gap:8px} #cenik.c8 .c8m-who li{flex-direction:row;align-items:center;transition:transform .35s var(--x-ease),border-color .3s,background .3s} #cenik.c8 .c8m-who li:hover{transform:translateX(4px);border-color:rgba(94,242,201,.4);background:rgba(94,242,201,.06)} #cenik.c8 .c8m-who li > span:last-child{font-family:var(--x-sans);font-size:15px} #cenik.c8 .c8m-who small,#cenik.c8 .c8m-tag,#cenik.c8 .c8m-facts li,#cenik.c8 .c8m-min,#cenik.c8 .c8m-lg,#cenik.c8 .c8m-note,#cenik.c8 .c8m-il li,#cenik.c8 .c8m-steps small{font-family:var(--x-sans)} #cenik.c8 .c8m-plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-top:14px} #cenik.c8 .c8m-plan{grid-template-columns:auto 1fr;grid-template-areas:"ph ph" "dial price" "facts facts" "min min";justify-items:stretch;gap:16px 18px;padding:26px 24px 22px;border-radius:24px;transition:transform .45s var(--x-ease),box-shadow .45s,border-color .3s} #cenik.c8 .c8m-plan:hover{transform:translateY(-4px);border-color:rgba(127,219,255,.45)} #cenik.c8 .c8m-max:hover{border-color:rgba(94,242,201,.75)} #cenik.c8 .c8m-dial{width:118px;height:118px} #cenik.c8 .md-c b{font-family:var(--x-sans);font-size:27px} #cenik.c8 .c8m-price{flex-direction:column;align-items:flex-start;gap:6px} #cenik.c8 .c8m-price b{font:400 calc(clamp(44px, 1.4vw + 26px, 58px) * var(--x-k))/1 var(--x-serif);letter-spacing:-.02em} :root[data-font="d"] #cenik.c8 .c8m-price b{font-weight:300} #cenik.c8 .c8m-price span{font-family:var(--x-sans)} #cenik.c8 .c8m-facts b{font-family:var(--x-sans)} #cenik.c8 .c8m-mid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:stretch} #cenik.c8 .c8m-rhythm{padding:20px 22px 16px} #cenik.c8 .c8m-lg{flex-direction:row;gap:18px} #cenik.c8 .c8m-lg > span{flex:1 1 0} #cenik.c8 .c8m-inc{padding:20px 22px;border-radius:18px;background:rgba(94,242,201,.05);border:1px solid rgba(94,242,201,.18)} #cenik.c8 .c8m-il{grid-template-columns:1fr;gap:12px} #cenik.c8 .c8m-il li{font-size:14.5px} #cenik.c8 .c8m-join{display:grid;grid-template-columns:minmax(0,1.35fr) auto;gap:clamp(24px,3vw,44px);align-items:center;padding-top:24px} #cenik.c8 .c8m-jt{font:400 calc(26px * var(--x-k))/1.1 var(--x-serif);margin-bottom:14px} #cenik.c8 .c8m-steps b{font-family:var(--x-sans)} #cenik.c8 .c8m-act{display:grid;grid-template-columns:auto auto;gap:10px 12px;justify-content:end} #cenik.c8 .c8m-act .btn{padding:0 24px;white-space:nowrap} #cenik.c8 .c8m-links{grid-column:1 / -1;justify-content:flex-end} #cenik.c8 .c8m-links a{font-family:var(--x-sans)} #cenik.c8 .c8m-fine{max-width:none} } @media (min-width:1024px) and (max-width:1279.98px){ #cenik.c8 .c8m-top{grid-template-columns:1fr} #cenik.c8 .c8m-who{grid-template-columns:repeat(3,minmax(0,1fr))} #cenik.c8 .c8m-who li{flex-direction:column;align-items:flex-start} #cenik.c8 .c8m-mid{grid-template-columns:1fr} #cenik.c8 .c8m-join{grid-template-columns:1fr} #cenik.c8 .c8m-act{justify-content:start} #cenik.c8 .c8m-links{justify-content:flex-start} } /* telefon: ritem je preozek za branje – ostane le legenda »Paket ali članstvo?« */ @media (max-width:639.98px){ #cenik .c8m-rsvg{display:none} } /* ===================================================================== V7 (28. 10. 2026) – popravki naročnika frekvenca na dnu sekcije; članstvo: naslov »Omejeno število članov«, kartica člana (holografski lesk, 11 sedežev, nagib ob miški), plavajoči oznaki; Mini, Max in »Vključeno« v eni vrsti; ritem čez celo širino. ===================================================================== */ #cenik .c8m-sub{display:flex;align-items:center;gap:10px;margin:-2px 0 2px;font:600 14.5px/1.4 var(--f-display);color:#7FF0D6} #cenik .c8m-sub .ico{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #cenik .c8m-h{font-size:34px} #cenik .c8m-h em{font-style:italic} /* oder s kartico */ #cenik .c8m-stage{position:relative;display:grid;place-items:center;padding:34px 6px 46px;perspective:1100px} #cenik .c8m-halo{position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(94,242,201,.32),rgba(56,182,255,.12) 45%,rgba(56,182,255,0) 70%)} #cenik .c8m-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none} #cenik .c8m-r1{width:96%;aspect-ratio:1;border:1px solid rgba(127,255,224,.16)} #cenik .c8m-r2{width:118%;aspect-ratio:1;border:1px dashed rgba(127,219,255,.14);animation:c8mOrbit 40s linear infinite} #cenik .c8m-r2 i{position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#C9FFF0;box-shadow:0 0 14px #5EF2C9,0 0 30px rgba(94,242,201,.6)} #cenik .c8m-card{--rx:0deg;--ry:0deg;--gx:50%;position:relative;z-index:2;width:min(100%,440px);aspect-ratio:1.586;border-radius:22px;padding:20px 22px;overflow:hidden;isolation:isolate;color:#fff; display:grid;grid-template-rows:auto 1fr auto; background:radial-gradient(90% 80% at var(--gx) 0%,rgba(201,255,240,.32),rgba(201,255,240,0) 55%),radial-gradient(80% 90% at 100% 100%,rgba(94,242,201,.42),rgba(94,242,201,0) 60%), linear-gradient(135deg,#0D3A5E 0%,#0C5E6E 42%,#0E7A78 58%,#0B3557 100%); border:1px solid rgba(201,255,240,.5); box-shadow:0 60px 90px -44px rgba(47,211,176,.75),0 30px 50px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.25); transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .5s var(--x-ease)} /* guilloše vzorec */ #cenik .c8m-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.22; background:repeating-radial-gradient(circle at 92% 110%,rgba(255,255,255,.5) 0 1px,rgba(255,255,255,0) 1px 9px)} #cenik .mc-wm{position:absolute;z-index:-1;right:-14%;top:-22%;height:150%;width:auto;fill:rgba(201,255,240,.16)} #cenik .mc-holo{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen; background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(169,233,255,.28) 42%,rgba(255,255,255,.55) 48%,rgba(201,255,240,.3) 54%,rgba(255,255,255,0) 66%); background-size:260% 100%;background-position:120% 0} #cenik .c8m-stage.c8-go .mc-holo{animation:c8mHolo 6s cubic-bezier(.45,0,.25,1) .4s infinite} @keyframes c8mHolo{0%{background-position:120% 0}45%,100%{background-position:-60% 0}} #cenik .mc-top{display:flex;align-items:center;justify-content:space-between;gap:10px} #cenik .mc-logo{display:inline-flex;align-items:center;gap:7px;font:700 17px/1 var(--f-display);letter-spacing:-.01em} #cenik .mc-logo svg{width:20px;height:22px;fill:#fff} #cenik .mc-lbl{padding:5px 10px;border-radius:999px;font:700 10.5px/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:#03261F;background:linear-gradient(135deg,#E6FFF8,#7FFFE0)} #cenik .mc-chip{position:absolute;left:22px;top:38%;width:40px;height:30px;fill:url(#c8mChipG);fill:#C9F5E6;stroke:rgba(10,60,60,.45);stroke-width:1.2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))} #cenik .mc-chip{fill:#BFEFE0} #cenik .mc-mid{align-self:end;margin:0 0 10px;display:flex;flex-direction:column;gap:3px;padding-left:0} #cenik .mc-mid b{font:600 24px/1.05 var(--f-display);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.25)} #cenik .mc-mid span{font:500 12px/1.3 var(--f-body);color:rgba(232,255,250,.8)} #cenik .mc-bot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid rgba(201,255,240,.25)} #cenik .mc-seats{display:flex;gap:4px} #cenik .mc-seats i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} #cenik .c8m-stage.c8-go .mc-seats i{animation:c8mSeat 5.5s ease-in-out calc(var(--s) * .12s) infinite} @keyframes c8mSeat{0%,8%{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}18%,72%{background:#C9FFF0;box-shadow:0 0 8px #5EF2C9}86%,100%{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}} #cenik .mc-sl{font:600 10.5px/1.2 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:rgba(232,255,250,.85);text-align:right} /* plavajoči oznaki */ #cenik .c8m-float{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:14px;font:500 13px/1.25 var(--f-body);color:#E8F0F8; background:rgba(6,22,40,.72);border:1px solid rgba(127,255,224,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 40px -20px rgba(0,0,0,.9)} #cenik .c8m-float b{color:#fff;font-weight:700} #cenik .c8m-float .ico{flex:none;width:18px;height:18px;fill:none;stroke:#7FF0D6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #cenik .c8m-f1{left:0;bottom:12px} #cenik .c8m-f2{right:0;top:8px;padding:8px 14px} #cenik .c8m-f2 > span{display:flex;align-items:baseline;gap:5px} #cenik .c8m-f2 small{font-size:11.5px;color:rgba(232,240,248,.7)} #cenik .c8m-f2 b{font:800 20px/1 var(--f-display);background:linear-gradient(90deg,#C9FFF0,#5EF2C9);-webkit-background-clip:text;background-clip:text;color:transparent} #cenik .c8m-stage.c8-go .c8m-card{animation:c8mFloat 7s ease-in-out infinite} #cenik .c8m-stage.c8-go .c8m-f1{animation:c8mFloat2 6s ease-in-out .8s infinite} #cenik .c8m-stage.c8-go .c8m-f2{animation:c8mFloat2 6.5s ease-in-out infinite reverse} @keyframes c8mFloat{0%,100%{translate:0 0}50%{translate:0 -8px}} @keyframes c8mFloat2{0%,100%{translate:0 0}50%{translate:0 -6px}} /* vrsta: Mini, Max, Vključeno */ #cenik .c8m-row{display:flex;flex-direction:column;gap:20px} #cenik .c8m-inc{padding:18px;border-radius:18px;background:rgba(94,242,201,.05);border:1px solid rgba(94,242,201,.18)} #cenik .c8m-plans{padding-top:12px} @media (min-width:640px){ #cenik .c8m-f1{left:4%} #cenik .c8m-f2{right:4%} } @media (min-width:1024px){ #cenik.c8 .c8m-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(30px,3.6vw,64px)} #cenik.c8 .c8m-h{font:400 calc(clamp(46px, 2vw + 20px, 66px) * var(--x-k))/1.02 var(--x-serif);letter-spacing:-.025em} #cenik.c8 .c8m-h em{font-style:italic} #cenik.c8 .c8m-sub{font-family:var(--x-sans);font-size:15.5px} #cenik.c8 .c8m-who{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px} #cenik.c8 .c8m-who li{flex-direction:column;align-items:flex-start;gap:10px;padding:14px} #cenik.c8 .c8m-who li:hover{transform:translateY(-3px)} #cenik.c8 .c8m-who li > span:last-child{font-size:14.5px} #cenik.c8 .c8m-stage{padding:56px 10px 64px} #cenik.c8 .c8m-card{width:min(100%,470px);padding:24px 26px;border-radius:24px} #cenik.c8 .mc-logo,#cenik.c8 .mc-lbl,#cenik.c8 .mc-mid b,#cenik.c8 .mc-sl,#cenik.c8 .c8m-f2 b{font-family:var(--x-sans)} #cenik.c8 .mc-mid b{font-size:28px} #cenik.c8 .mc-mid span,#cenik.c8 .c8m-float{font-family:var(--x-sans)} #cenik.c8 .c8m-f1{left:-2%;bottom:30px} #cenik.c8 .c8m-f2{right:-2%;top:30px} #cenik.c8 .c8m-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;align-items:stretch} #cenik.c8 .c8m-inc{padding:22px} #cenik.c8 .c8m-il{gap:14px} #cenik.c8 .c8m-mid{display:block} #cenik.c8 .c8m-rhythm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-rows:1fr auto;gap:8px 32px;align-items:center;padding:22px 26px 18px} #cenik.c8 .c8m-rh{grid-row:1 / 3;align-self:center;gap:14px} #cenik.c8 .c8m-lg{flex-direction:column;gap:12px} #cenik.c8 .c8m-note{grid-column:2} /* frekvenca na dnu sekcije */ #cenik.c8 .price-bottom + .c8-freq{margin-top:clamp(40px,3.4vw,58px)} } @media (min-width:1024px) and (max-width:1279.98px){ #cenik.c8 .c8m-top{grid-template-columns:1fr} #cenik.c8 .c8m-row{grid-template-columns:1fr} #cenik.c8 .c8m-rhythm{grid-template-columns:1fr} #cenik.c8 .c8m-rh{grid-row:auto} #cenik.c8 .c8m-note{grid-column:auto} #cenik.c8 .c8m-lg{flex-direction:row} } /* frekvenca na telefonu in tablici: odmik od storitev */ #cenik .price-bottom + .c8-freq{margin-top:32px} #cenik.c8-off .c8m-stage *{animation-play-state:paused!important} @media (prefers-reduced-motion:reduce){ #cenik .c8m-stage *{animation:none!important} #cenik .c8m-card{transform:none} } /* telefon: kartica člana bolj zračna */ @media (max-width:519.98px){ #cenik .c8m-stage{padding:52px 0 58px} #cenik .c8m-card{padding:16px 16px 14px;border-radius:18px} #cenik .mc-chip{display:none} #cenik .mc-logo{font-size:15px} #cenik .mc-mid{margin-bottom:8px} #cenik .mc-mid b{font-size:20px} #cenik .mc-mid span{font-size:11px} #cenik .mc-seats i{width:7px;height:7px} #cenik .mc-sl{font-size:9.5px;letter-spacing:.06em;max-width:9em} #cenik .c8m-f1{left:0;bottom:6px} #cenik .c8m-f2{right:0;top:4px} } /* ===================================================================== V8 (28. 10. 2026) – kartica člana: premium, več modre (safir → kraljevsko modra, kovinski rob, platinast čip, srebrn napis, moder holografski lesk); oznaka »Omejeno število članov« kot pulzirajoča značka. ===================================================================== */ #cenik .c8m-sub{display:inline-flex;align-self:flex-start;gap:10px;margin:2px 0 4px;padding:8px 16px 8px 13px;border-radius:999px;font:700 12px/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#E6F6FF; background:linear-gradient(135deg,rgba(56,182,255,.24),rgba(30,111,217,.16));border:1px solid rgba(127,219,255,.45);box-shadow:0 12px 26px -14px rgba(56,182,255,.9),inset 0 1px 0 rgba(255,255,255,.18)} #cenik .c8m-live{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#7FDBFF;box-shadow:0 0 10px #38B6FF} #cenik .c8m-live::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(127,219,255,.7);animation:c8mLive 2.2s ease-out infinite} @keyframes c8mLive{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.6);opacity:0}} /* oder: modri sij */ #cenik .c8m-halo{background:radial-gradient(closest-side,rgba(56,182,255,.36),rgba(30,111,217,.16) 45%,rgba(30,111,217,0) 70%)} #cenik .c8m-r1{border-color:rgba(127,219,255,.18)} #cenik .c8m-r2 i{background:#D9F6FF;box-shadow:0 0 14px #38B6FF,0 0 30px rgba(56,182,255,.7)} /* kartica */ #cenik .c8m-card{border:0; background: radial-gradient(70% 90% at var(--gx) -10%,rgba(169,233,255,.38),rgba(169,233,255,0) 55%), radial-gradient(60% 80% at 100% 110%,rgba(56,182,255,.45),rgba(56,182,255,0) 60%), repeating-linear-gradient(100deg,rgba(255,255,255,.025) 0 1px,rgba(255,255,255,0) 1px 3px), linear-gradient(135deg,#071A44 0%,#0E2F75 30%,#1A56C2 52%,#0F3684 72%,#06173D 100%); box-shadow:0 60px 100px -44px rgba(30,111,217,.85),0 34px 60px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.35)} /* kovinski rob, ki počasi kroži */ #cenik .c8m-card::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1.5px;pointer-events:none; background:conic-gradient(from var(--c8a),#9FB4CC 0deg,#FFFFFF 40deg,#7FDBFF 80deg,#3D5A80 140deg,#C7D6E8 200deg,#FFFFFF 250deg,#5F7FA6 310deg,#9FB4CC 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); animation:c8Border 12s linear infinite} #cenik .c8m-card::before{opacity:.16;background:repeating-radial-gradient(circle at 92% 112%,rgba(169,233,255,.7) 0 1px,rgba(169,233,255,0) 1px 8px)} #cenik .mc-wm{fill:rgba(169,233,255,.13);filter:drop-shadow(0 1px 0 rgba(255,255,255,.12))} #cenik .mc-holo{background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(56,182,255,.3) 41%,rgba(255,255,255,.6) 48%,rgba(169,233,255,.35) 54%,rgba(255,255,255,0) 66%);background-size:260% 100%} #cenik .mc-logo{text-shadow:0 1px 0 rgba(0,0,0,.25)} #cenik .mc-lbl{color:#0A1F4D;background:linear-gradient(135deg,#FFFFFF 0%,#D7E4F2 45%,#A9BCD3 100%);box-shadow:inset 0 1px 0 #fff,0 4px 12px -4px rgba(0,0,0,.5)} #cenik .mc-chip{fill:#C9D6E6;stroke:rgba(20,40,80,.55)} #cenik .mc-chip rect{fill:url(#c8mPlat)} #cenik .mc-mid b{background:linear-gradient(180deg,#FFFFFF 0%,#E3ECF7 45%,#9DB2CC 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))} #cenik .mc-mid span{color:rgba(217,236,255,.82)} #cenik .mc-bot{border-top-color:rgba(169,233,255,.25)} @keyframes c8mSeat{0%,8%{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}18%,72%{background:#D9F6FF;box-shadow:0 0 8px #38B6FF}86%,100%{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}} #cenik .mc-sl{color:rgba(217,236,255,.88)} /* plavajoči oznaki v modrem */ #cenik .c8m-float{border-color:rgba(127,219,255,.4)} #cenik .c8m-float .ico{stroke:#7FDBFF} #cenik .c8m-f2 b{background:linear-gradient(90deg,#D9F6FF,#7FDBFF);-webkit-background-clip:text;background-clip:text;color:transparent} #cenik.c8-off .c8m-card::after,#cenik.c8-off .c8m-live::after{animation-play-state:paused} @media (min-width:1024px){ #cenik.c8 .c8m-sub{font-family:var(--x-sans);font-size:12.5px} } @media (prefers-reduced-motion:reduce){ #cenik .c8m-card::after,#cenik .c8m-live::after{animation:none} } /* V8: globlja modra in stekleni odsev čez kartico */ #cenik .c8m-card{background: linear-gradient(118deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,.09) 38.2%,rgba(255,255,255,.03) 58%,rgba(255,255,255,0) 58.2%), radial-gradient(70% 90% at var(--gx) -10%,rgba(169,233,255,.22),rgba(169,233,255,0) 55%), radial-gradient(60% 80% at 100% 110%,rgba(56,182,255,.5),rgba(56,182,255,0) 60%), repeating-linear-gradient(100deg,rgba(255,255,255,.025) 0 1px,rgba(255,255,255,0) 1px 3px), linear-gradient(135deg,#050F2E 0%,#0B2763 32%,#1650B8 54%,#0C2C6E 74%,#040C26 100%)} /* ===================================================================== V9 (30. 10. 2026) – OxySphere Klub kartica s pravim belim logotipom (inline SVG), »OxySphere Klub«, imetnik »Član kluba OxySphere«; naslov »Redni vzdrževalni protokol«; plavajoča oznaka »Kontrolni zdravniški pregled vsakih 6 mesecev« desno spodaj; Članstvo Max kot VIP (polnočno modra, platinast rob, ki kroži, lesk, iskrice, platinasta cena). ===================================================================== */ /* kartica */ #cenik .mc-top{align-items:flex-start} #cenik .mc-top .mc-logo{display:block;width:auto;height:46px;fill:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))} #cenik .mc-lbl{letter-spacing:.24em} #cenik .mc-mid b{font-size:26px;letter-spacing:.08em} #cenik .mc-sl{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:11.5px;letter-spacing:.12em} #cenik .mc-sl small{font:600 8.5px/1 var(--f-display);letter-spacing:.22em;color:rgba(217,236,255,.55)} #cenik .mc-chip{top:41%} /* oznaka kontrolnega pregleda: desno spodaj */ #cenik .c8m-f1{left:auto;right:0;bottom:6px;padding:9px 16px 9px 9px;gap:11px} #cenik .c8m-fi{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(150deg,#4FB4FF,#1E6FD9);box-shadow:0 8px 16px -8px rgba(30,111,217,.9),inset 0 1px 0 rgba(255,255,255,.4)} #cenik .c8m-fi .ico{stroke:#fff} #cenik .c8m-f1 > span:last-child{display:flex;flex-direction:column;gap:1px} #cenik .c8m-f1 small{font-size:12px;color:rgba(232,240,248,.72)} /* VIP Max */ #cenik .c8m-max{overflow:hidden;isolation:isolate;border:0; background:radial-gradient(90% 55% at 50% -8%,rgba(127,219,255,.32),rgba(127,219,255,0) 62%),radial-gradient(70% 60% at 110% 110%,rgba(30,111,217,.45),rgba(30,111,217,0) 60%), linear-gradient(165deg,#0C2A66 0%,#0A1D4A 48%,#050F2B 100%); box-shadow:0 0 0 1px rgba(199,214,232,.18),0 50px 90px -40px rgba(56,182,255,.65),0 0 60px -20px rgba(127,219,255,.35)} #cenik .c8m-max::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;pointer-events:none; background:conic-gradient(from var(--c8a),#8FA3BD 0deg,#FFFFFF 50deg,#A9E9FF 90deg,#3D5A80 150deg,#D7E4F2 210deg,#FFFFFF 260deg,#5F7FA6 320deg,#8FA3BD 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); animation:c8Border 10s linear infinite} #cenik .c8m-max::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.12;pointer-events:none;background:repeating-radial-gradient(circle at 100% 0%,rgba(169,233,255,.8) 0 1px,rgba(169,233,255,0) 1px 9px)} #cenik .c8m-shine{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen; background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(169,233,255,.16) 45%,rgba(255,255,255,.3) 50%,rgba(169,233,255,.14) 55%,rgba(255,255,255,0) 65%);background-size:280% 100%;background-position:130% 0} #cenik .c8m-max.c8-go .c8m-shine{animation:c8mHolo 7s cubic-bezier(.45,0,.25,1) 1s infinite} #cenik .c8m-spark{position:absolute;z-index:2;width:10px;height:10px;pointer-events:none;opacity:0; background:radial-gradient(closest-side,#fff,rgba(255,255,255,0)),linear-gradient(#fff,#fff) center/1.5px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 1.5px no-repeat;filter:drop-shadow(0 0 4px #A9E9FF)} #cenik .c8m-s1{right:16%;top:22%}#cenik .c8m-s2{left:58%;top:38%;width:7px;height:7px}#cenik .c8m-s3{right:9%;bottom:30%;width:8px;height:8px} #cenik .c8m-max.c8-go .c8m-spark{animation:c8mSpark 4.5s ease-in-out infinite} #cenik .c8m-max.c8-go .c8m-s2{animation-delay:1.5s}#cenik .c8m-max.c8-go .c8m-s3{animation-delay:3s} @keyframes c8mSpark{0%,100%{opacity:0;transform:scale(.3) rotate(0)}12%{opacity:1;transform:scale(1) rotate(45deg)}26%{opacity:0;transform:scale(.4) rotate(90deg)}} #cenik .c8m-max > *:not(.c8m-shine):not(.c8m-spark):not(.c8m-pill){position:relative;z-index:1} #cenik .c8m-vip{z-index:5;gap:8px;padding:7px 14px 7px 11px;font-weight:800;letter-spacing:.06em;color:#0A1F4D; background:linear-gradient(135deg,#FFFFFF 0%,#DCE7F4 40%,#A9BCD3 70%,#EEF4FA 100%);box-shadow:0 12px 26px -10px rgba(127,219,255,.85),inset 0 1px 0 #fff} #cenik .c8m-vip .ico{width:15px;height:15px;fill:rgba(10,31,77,.12);stroke:#0A1F4D;stroke-width:1.8} #cenik .c8m-max .c8m-name{color:#A9E9FF} #cenik .c8m-max .c8m-name b{background:linear-gradient(180deg,#FFFFFF,#C7D6E8 60%,#8FA3BD);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.2em} #cenik .c8m-max .c8m-tag{color:rgba(217,236,255,.78)} #cenik .c8m-max .c8m-price b{background:linear-gradient(180deg,#FFFFFF 0%,#E3ECF7 50%,#A9BCD3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 10px rgba(127,219,255,.35))} #cenik .c8m-max .md-d{fill:#E6F6FF;filter:drop-shadow(0 0 6px rgba(127,219,255,1))} #cenik .c8m-max .md-h{stroke:#E6F6FF} #cenik .c8m-max .md-tr{stroke:rgba(169,233,255,.2)} #cenik .c8m-max .md-sw path:first-child{fill:url(#cmG2)} #cenik #cmG2 stop{stop-color:#7FDBFF} #cenik .c8m-max .c8m-facts{border-top-color:rgba(169,233,255,.22)} #cenik .c8m-max .c8m-facts li{border-bottom-color:rgba(169,233,255,.16)} #cenik .c8m-max .c8m-facts em{color:#0A1F4D;background:linear-gradient(135deg,#FFFFFF,#C7D6E8);box-shadow:0 6px 16px -6px rgba(127,219,255,.9)} #cenik.c8-off .c8m-max::after,#cenik.c8-off .c8m-max *{animation-play-state:paused!important} @media (min-width:1024px){ #cenik.c8 .c8m-max{transform:translateY(-6px)} #cenik.c8 .c8m-max:hover{transform:translateY(-10px)} #cenik.c8 .mc-mid b{font-size:30px} #cenik.c8 .mc-top .mc-logo{height:52px} #cenik.c8 .c8m-f1{right:-3%;bottom:22px} #cenik.c8 .c8m-f1,#cenik.c8 .c8m-vip{font-family:var(--x-sans)} } @media (max-width:519.98px){ #cenik .mc-top .mc-logo{height:36px} #cenik .mc-mid b{font-size:19px} #cenik .mc-sl{font-size:9.5px} #cenik .c8m-f1{right:0;bottom:4px} } @media (prefers-reduced-motion:reduce){ #cenik .c8m-max::after,#cenik .c8m-max *{animation:none!important} } /* V9: oznaka VIP ne sme biti odrezana; svetlejši napis MAX; večji logotip */ #cenik .c8m-max{overflow:visible} #cenik .c8m-shine,#cenik .c8m-max::before{border-radius:inherit} #cenik .c8m-max .c8m-name b{background:linear-gradient(180deg,#FFFFFF 0%,#F1F6FC 55%,#B9CADD 100%);-webkit-background-clip:text;background-clip:text} @media (min-width:1024px){ #cenik.c8 .mc-top .mc-logo{height:60px} #cenik.c8 .c8m-plans{padding-top:22px} } #cenik .c8m-max .c8m-price b{background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 45%,#D6E6F7 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 14px rgba(127,219,255,.45))} @media (max-width:519.98px){ #cenik .c8m-stage{padding-bottom:74px} #cenik .c8m-f1{bottom:0} } @media (min-width:1024px){ #cenik.c8 .c8m-f1{left:auto} } @media (min-width:640px) and (max-width:1023.98px){ #cenik .c8m-f1{left:auto;right:4%} } /* V10 (30. 10. 2026): »vzdrževalni« v naslovu – pokončno, polnejše, brez odrezanega zadnjega znaka */ #cenik .c8m-h em{display:inline-block;padding:0 .06em .04em 0;font-style:normal;font-weight:600; background:linear-gradient(90deg,#BDEBFF 0%,#7FDBFF 45%,#5EF2C9 100%);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 18px rgba(94,242,201,.28))} @media (min-width:1024px){ #cenik.c8 .c8m-h em{font-style:normal;font-weight:500} :root[data-font="d"] #cenik.c8 .c8m-h em{font-weight:500} } /* ===== 2) Prostor ===== */ /* --- podvojena pravila #komora -> #prostor-sec (samodejno) --- */ @media (max-width:1023.98px){ #prostor-sec{padding-block:56px} @media (min-width:768px) and (max-width:1023.98px){ #prostor-sec{padding-block:88px} } } #prostor-sec.k2{ --k2-abyss:#040B16;--k2-on2:rgba(232,240,248,.8);--k2-on3:rgba(232,240,248,.62);--k2-cyan:#7FDBFF;--k2-sky:#38B6FF; --k2-rule:rgba(169,233,255,.14);--k2-ease:cubic-bezier(.16,1,.3,1); --k2-sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --k2-disp:'Manrope',ui-sans-serif,system-ui,sans-serif; background:radial-gradient(900px 520px at 18% 8%,rgba(56,182,255,.30),transparent 65%),radial-gradient(800px 560px at 92% 30%,rgba(127,219,255,.18),transparent 65%),linear-gradient(180deg,#0C2747 0%,#123C66 40%,#1A4F82 100%); color:#E8F0F8;overflow:hidden} #prostor-sec.k2::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(169,233,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(169,233,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 40% at 50% 22%,#000,transparent);mask-image:radial-gradient(70% 40% at 50% 22%,#000,transparent)} #prostor-sec.k2 > *{position:relative} #prostor-sec.k2 .k2-grid .ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none} #prostor-sec.k2 .k2-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,88px);align-items:end;margin-bottom:clamp(44px,4vw,64px)} #prostor-sec.k2 .k2-eyebrow{margin:0 0 18px;font:600 12.5px/1.3 var(--k2-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--k2-cyan)} #prostor-sec.k2 .k2-h2{margin:0;font-family:var(--k2-disp);font-weight:300;letter-spacing:-.025em;font-size:clamp(34px,1.85vw + 13px,58px);line-height:1.04;color:#fff;text-wrap:balance} #prostor-sec.k2 .k2-lead{margin:0;font:400 clamp(17px,.3vw + 14px,19px)/1.62 var(--k2-sans);color:var(--k2-on2);max-width:34em} #prostor-sec.k2 .k2-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,64px);align-items:center;margin-bottom:clamp(56px,5vw,88px)} #prostor-sec.k2 .k2-fig{position:relative;margin:0;border-radius:28px;overflow:hidden;background:#0B2038;box-shadow:0 50px 100px -50px rgba(0,0,0,.9);isolation:isolate;aspect-ratio:4/3;--fx:50%;--fy:50%} #prostor-sec.k2 .k2-fimg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover} #prostor-sec.k2 .k2-fig::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--fx) var(--fy),rgba(4,11,22,0) 0,rgba(4,11,22,0) 11%,rgba(4,11,22,.2) 32%,rgba(4,11,22,.34) 100%);box-shadow:inset 0 0 0 1px rgba(127,219,255,.16);transition:background .6s} #prostor-sec.k2 .k2-cap{position:absolute;z-index:3;left:18px;bottom:18px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 36px);padding:8px 18px 8px 8px;border-radius:999px;background:rgba(4,11,22,.74);border:1px solid var(--k2-rule);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} #prostor-sec.k2 .k2-cap-n{flex:0 0 32px;height:32px;border-radius:50%;background:var(--k2-sky);color:var(--k2-abyss);font:700 14px/1 var(--k2-sans);display:flex;align-items:center;justify-content:center} #prostor-sec.k2 .k2-cap-t{font:600 15px/1.3 var(--k2-sans);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #prostor-sec.k2 .k2-cap-of{font:400 13px var(--k2-sans);color:var(--k2-on3)} #prostor-sec.k2 .k2-dimg{opacity:0;transform:scale(1.04);transition:opacity .8s var(--k2-ease),transform 1.4s var(--k2-ease)} #prostor-sec.k2 .k2-dimg.is-on{opacity:1;transform:none} #prostor-sec.k2 .k2-pin{position:absolute;z-index:2;width:46px;height:46px;margin:-23px 0 0 -23px;transition:left .8s var(--k2-ease),top .8s var(--k2-ease)} #prostor-sec.k2 .k2-pin::before,#prostor-sec.k2 .k2-pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(127,219,255,.75);animation:k2Ping 2.4s var(--k2-ease) infinite} #prostor-sec.k2 .k2-pin::after{animation-delay:1.2s} #prostor-sec.k2 .k2-pin-n{position:absolute;inset:0;border-radius:50%;background:var(--k2-sky);border:1.5px solid #fff;color:var(--k2-abyss);font:700 15px/1 var(--k2-sans);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(56,182,255,.22),0 0 34px rgba(56,182,255,.7)} #prostor-sec.k2 .k2-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px} #prostor-sec.k2 .k2-thumb{position:relative;padding:0;border:1px solid var(--k2-rule);border-radius:14px;overflow:hidden;background:#0B2038;cursor:pointer;aspect-ratio:4/3;opacity:.62;transition:opacity .35s,border-color .35s} #prostor-sec.k2 .k2-thumb img{width:100%;height:100%;object-fit:cover;display:block} #prostor-sec.k2 .k2-thumb span{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font:400 12px/1.2 var(--k2-sans);color:#fff;background:linear-gradient(transparent,rgba(4,11,22,.85));text-align:left} #prostor-sec.k2 .k2-thumb:hover{opacity:.9} #prostor-sec.k2 .k2-thumb.is-on{opacity:1;border-color:var(--k2-sky);box-shadow:0 0 0 1px var(--k2-sky)} #prostor-sec.k2 .k2-hint{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0 4px;font:400 13.5px/1.45 var(--k2-sans);color:var(--k2-on3)} #prostor-sec.k2 .k2-hint .ico{width:17px;height:17px;color:var(--k2-cyan)} #prostor-sec.k2 .k2-accs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} #prostor-sec.k2 .k2-acc{border-radius:18px;border:1px solid transparent;transition:background .45s,border-color .45s} #prostor-sec.k2 .k2-acc:not(.is-active){border-bottom-color:var(--k2-rule);border-radius:0} #prostor-sec.k2 .k2-acc.is-active{background:rgba(255,255,255,.1);border-color:rgba(169,233,255,.4);box-shadow:0 30px 60px -40px rgba(0,0,0,.6)} #prostor-sec.k2 .k2-acc-b{width:100%;display:flex;align-items:center;gap:16px;padding:15px 20px;background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit} #prostor-sec.k2 .k2-acc-n{font:600 12.5px var(--k2-sans);letter-spacing:.18em;color:var(--k2-on3);min-width:24px;transition:color .4s} #prostor-sec.k2 .k2-acc-t{flex:1;font:400 clamp(19px,.5vw + 13px,23px)/1.25 var(--k2-disp);letter-spacing:-.01em;color:var(--k2-on2);transition:color .4s} #prostor-sec.k2 .k2-acc-c{width:18px;height:18px;color:var(--k2-on3);transition:transform .45s var(--k2-ease)} #prostor-sec.k2 .k2-acc:hover .k2-acc-t{color:#fff} #prostor-sec.k2 .k2-acc.is-active .k2-acc-n{color:var(--k2-cyan)} #prostor-sec.k2 .k2-acc.is-active .k2-acc-t{color:#fff} #prostor-sec.k2 .k2-acc.is-active .k2-acc-c{transform:rotate(180deg);color:var(--k2-cyan)} #prostor-sec.k2 .k2-acc-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--k2-ease)} #prostor-sec.k2 .k2-acc-d > div{overflow:hidden} #prostor-sec.k2 .k2-acc-d p{margin:0;padding:0 22px 18px 60px;font:400 15.5px/1.62 var(--k2-sans);color:var(--k2-on2)} #prostor-sec.k2 .k2-acc.is-active .k2-acc-d{grid-template-rows:1fr} #prostor-sec.k2 .k2-acc-b:focus-visible,#prostor-sec.k2 .k2-thumb:focus-visible{outline:2px solid var(--k2-cyan);outline-offset:3px} @media (max-width:900px){ #prostor-sec.k2 .k2-head,#prostor-sec.k2 .k2-grid{grid-template-columns:1fr} } @media (max-width:560px){ #prostor-sec.k2 .k2-thumbs{grid-template-columns:repeat(2,1fr)} #prostor-sec.k2 .k2-cap-of{display:none} } @media (prefers-reduced-motion:reduce){ #prostor-sec.k2 *{transition:none!important;animation:none!important} } #prostor-sec.k2 .pr{position:relative;margin-top:clamp(64px,6vw,104px);padding:clamp(36px,4vw,64px);border-radius:36px;isolation:isolate;overflow:hidden; background:radial-gradient(640px 400px at 88% -6%,rgba(56,182,255,.2),transparent 70%),radial-gradient(560px 380px at -4% 104%,rgba(28,174,143,.14),transparent 70%),linear-gradient(180deg,rgba(4,11,22,.66),rgba(4,11,22,.44)); border:1px solid rgba(169,233,255,.16);box-shadow:0 60px 120px -60px rgba(0,0,0,.85)} #prostor-sec.k2 .pr::before{content:"";position:absolute;z-index:-1;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(127,219,255,.07) 0 1px,transparent 1.5px 34px);-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent);pointer-events:none} #prostor-sec.k2 .pr .ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} #prostor-sec.k2 .pr .i3d .ico{stroke:url(#g3d);stroke-width:2.35} #prostor-sec.k2 .pr-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,72px);align-items:center} #prostor-sec.k2 .pr-head{display:flex;flex-direction:column;gap:18px} #prostor-sec.k2 .pr-head .k2-eyebrow{margin:0} #prostor-sec.k2 .pr-h{margin:0;font:300 clamp(36px,1.6vw + 16px,54px)/1.05 var(--k2-disp);letter-spacing:-.025em;color:#fff;text-wrap:balance} #prostor-sec.k2 .pr-lead{margin:0;font:400 17.5px/1.65 var(--k2-sans);color:var(--k2-on2);max-width:32em} #prostor-sec.k2 .pr-quote{position:relative;margin:8px 0 0;padding:18px 22px 16px 60px;border-radius:20px;background:linear-gradient(135deg,rgba(127,219,255,.12),rgba(255,255,255,.04));border:1px solid rgba(169,233,255,.22)} #prostor-sec.k2 .pr-quote .ico{position:absolute;left:20px;top:19px;width:26px;height:26px;fill:var(--k2-cyan);stroke:none} #prostor-sec.k2 .pr-quote blockquote{margin:0;font:400 21px/1.35 var(--k2-disp);letter-spacing:-.01em;color:#fff} #prostor-sec.k2 .pr-quote figcaption{margin-top:6px;font:500 13px/1.4 var(--k2-sans);color:var(--k2-on3)} #prostor-sec.k2 .pr-cmp{display:grid;grid-template-columns:minmax(0,.8fr) auto minmax(0,1.2fr);align-items:center;gap:14px} #prostor-sec.k2 .pr-card{margin:0;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;border:1px solid var(--k2-rule);background:rgba(255,255,255,.05)} #prostor-sec.k2 .pr-viz{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden} #prostor-sec.k2 .pr-mono{opacity:.8} #prostor-sec.k2 .pr-mono .pr-viz{background:radial-gradient(120% 120% at 50% 0%,rgba(127,219,255,.1),rgba(255,255,255,0))} #prostor-sec.k2 .pr-caps{width:80%;height:auto;margin-top:-14px;filter:saturate(.6)} #prostor-sec.k2 .pr-ours{background:rgba(18,60,102,.6);border-color:rgba(127,219,255,.5);box-shadow:0 0 0 1px rgba(127,219,255,.2),0 40px 80px -36px rgba(56,182,255,.55)} #prostor-sec.k2 .pr-ours img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 60%;transition:transform 1.4s var(--k2-ease)} #prostor-sec.k2 .pr-ours:hover img{transform:scale(1.04)} #prostor-sec.k2 .pr-card figcaption{display:flex;flex-direction:column;gap:4px;padding:14px 20px 20px} #prostor-sec.k2 .pr-card b{font:600 18px/1.3 var(--k2-sans);color:#fff} #prostor-sec.k2 .pr-card small{font:400 14px/1.45 var(--k2-sans);color:var(--k2-on3)} #prostor-sec.k2 .pr-tag{align-self:flex-start;margin-bottom:6px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.1);font:700 11px/1.2 var(--k2-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--k2-on2)} #prostor-sec.k2 .pr-tag-on{background:var(--k2-sky);color:var(--k2-abyss)} #prostor-sec.k2 .pr-chip{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(4,11,22,.62);border:1px solid var(--k2-rule);font:600 12px/1.2 var(--k2-sans);color:var(--k2-on2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} #prostor-sec.k2 .pr-chip-on{left:auto;right:12px;color:#fff} #prostor-sec.k2 .pr-chip-on b{margin-right:3px;font-size:16px;color:var(--k2-cyan)} #prostor-sec.k2 .pr-vs{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--k2-rule);font:700 11px var(--k2-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--k2-on2)} #prostor-sec.k2 .pr-life{margin-top:clamp(52px,5vw,84px)} #prostor-sec.k2 .pr-life-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:28px} #prostor-sec.k2 .pr-kicker{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 12px/1.3 var(--k2-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--k2-cyan)} #prostor-sec.k2 .pr-dot{width:8px;height:8px;border-radius:50%;background:var(--k2-cyan);animation:prPulse 2.6s ease-out infinite} #prostor-sec.k2 .pr-life-h{margin:0;font:300 clamp(28px,1vw + 18px,40px)/1.1 var(--k2-disp);letter-spacing:-.02em;color:#fff} #prostor-sec.k2 .pr-life-p{margin:0;font:400 17px/1.6 var(--k2-sans);color:var(--k2-on2);max-width:34em} #prostor-sec.k2 .pr-photos{list-style:none;margin:0;padding:0 0 32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,24px)} #prostor-sec.k2 .pr-ph figure{position:relative;margin:0;aspect-ratio:3/4;border-radius:26px;overflow:hidden;background:#0B2038;isolation:isolate;box-shadow:0 44px 80px -40px rgba(0,0,0,.9)} #prostor-sec.k2 .pr-ph:nth-child(2) figure{transform:translateY(32px)} #prostor-sec.k2 .pr-ph img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 1.6s var(--k2-ease)} #prostor-sec.k2 .pr-ph figure::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(4,11,22,0) 55%,rgba(4,11,22,.7) 100%);box-shadow:inset 0 0 0 1px rgba(127,219,255,.16)} #prostor-sec.k2 .pr-ph:hover img{transform:scale(1.05)} #prostor-sec.k2 .pr-ph figcaption{position:absolute;z-index:2;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:rgba(4,11,22,.55);border:1px solid rgba(169,233,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} #prostor-sec.k2 .pr-ph-ico.i3d{flex:0 0 42px;width:42px;height:42px} #prostor-sec.k2 .pr-ph-ico .ico{width:19px;height:19px} #prostor-sec.k2 .pr-ph figcaption b{display:block;font:600 16px/1.25 var(--k2-sans);color:#fff} #prostor-sec.k2 .pr-ph figcaption small{display:block;margin-top:2px;font:400 13px/1.4 var(--k2-sans);color:var(--k2-on2)} #prostor-sec.k2 .pr-points{list-style:none;margin:clamp(40px,4vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} #prostor-sec.k2 .pr-points li{display:flex;align-items:flex-start;gap:14px;padding:18px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--k2-rule)} #prostor-sec.k2 .pr-ico.i3d{flex:0 0 44px;width:44px;height:44px} #prostor-sec.k2 .pr-ico .ico{width:19px;height:19px} #prostor-sec.k2 .pr-points p{margin:0;display:flex;flex-direction:column;gap:4px} #prostor-sec.k2 .pr-points b{font:600 16px/1.3 var(--k2-sans);color:#fff} #prostor-sec.k2 .pr-points span{font:400 14px/1.5 var(--k2-sans);color:var(--k2-on3)} #prostor-sec.k2 .pr-note{display:flex;align-items:center;gap:10px;margin:22px 0 0;font:400 14px/1.5 var(--k2-sans);color:var(--k2-on3)} #prostor-sec.k2 .pr-note .ico{width:18px;height:18px;color:var(--k2-cyan)} @media (max-width:1100px){ #prostor-sec.k2 .pr-top,#prostor-sec.k2 .pr-life-head{grid-template-columns:1fr} #prostor-sec.k2 .pr-points{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:700px){ #prostor-sec.k2 .pr-photos{grid-template-columns:1fr;padding-bottom:0} #prostor-sec.k2 .pr-ph:nth-child(2) figure{transform:none} #prostor-sec.k2 .pr-cmp{grid-template-columns:1fr} #prostor-sec.k2 .pr-vs{justify-self:center} #prostor-sec.k2 .pr-points{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ #prostor-sec.k2 .pr-dot{animation:none} } #prostor-sec.k2.k4{isolation:isolate; background:radial-gradient(44% 30% at 6% 4%,rgba(30,111,217,.15) 0%,rgba(30,111,217,0) 70%), radial-gradient(40% 26% at 98% 24%,rgba(56,182,255,.1) 0%,rgba(56,182,255,0) 70%), radial-gradient(50% 30% at 50% 78%,rgba(30,111,217,.1) 0%,rgba(30,111,217,0) 70%), linear-gradient(180deg,#050F1F 0%,#071A30 30%,#06162B 65%,#050F1F 100%)} #prostor-sec.k2.k4::before{display:none} #prostor-sec.k2.k4::after{content:"";position:absolute;z-index:1;top:0;left:50%;width:min(1100px,80%);height:1px;transform:translateX(-50%); background:linear-gradient(90deg,rgba(127,219,255,0),rgba(127,219,255,.22) 50%,rgba(127,219,255,0))} #prostor-sec.k2.k4 > *{z-index:1} #prostor-sec.k2.k4 > .k4-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} #prostor-sec.k4 .k4-glow{position:absolute;border-radius:50%;filter:blur(10px)} #prostor-sec.k4 .k4-g1{width:820px;height:820px;left:-260px;top:-200px;background:radial-gradient(closest-side,rgba(56,182,255,.12),rgba(56,182,255,0))} #prostor-sec.k4 .k4-g2{width:760px;height:760px;right:-220px;top:22%;background:radial-gradient(closest-side,rgba(127,219,255,.09),rgba(127,219,255,0))} #prostor-sec.k4 .k4-g3{width:900px;height:900px;left:20%;bottom:-260px;background:radial-gradient(closest-side,rgba(30,111,217,.12),rgba(30,111,217,0))} #prostor-sec.k4 .k4-grid{position:absolute;inset:0;opacity:.45; background-image:radial-gradient(rgba(127,219,255,.15) 1px,rgba(127,219,255,0) 1.6px);background-size:28px 28px; -webkit-mask-image:radial-gradient(46% 18% at 24% 9%,#000 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 82%);mask-image:radial-gradient(46% 18% at 24% 9%,#000 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 82%)} #prostor-sec.k4 .k4-wm{position:absolute;right:-230px;top:40px;height:min(1000px,34%);width:auto;opacity:.16; -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 45%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(270deg,#000 0%,#000 45%,rgba(0,0,0,0) 100%)} #prostor-sec.k4 .k4-bub{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to top,#000 0%,#000 70%,rgba(0,0,0,0) 98%);mask-image:linear-gradient(to top,#000 0%,#000 70%,rgba(0,0,0,0) 98%)} #prostor-sec.k4 .k4-bub i{position:absolute;bottom:-30px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;opacity:0;will-change:transform,opacity; border:1px solid rgba(169,233,255,.5);background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.6) 0%,rgba(169,233,255,.1) 55%,rgba(169,233,255,0) 70%); animation:k4Rise var(--t) linear var(--dl) infinite,k4Sway calc(var(--t) / 8) ease-in-out var(--dl) infinite alternate} #prostor-sec.k4 .k4-bub i:nth-child(1){--x:3%;--s:9px;--t:52s;--dl:-8s} #prostor-sec.k4 .k4-bub i:nth-child(2){--x:11%;--s:5px;--t:44s;--dl:-30s} #prostor-sec.k4 .k4-bub i:nth-child(3){--x:20%;--s:12px;--t:60s;--dl:-21s} #prostor-sec.k4 .k4-bub i:nth-child(4){--x:31%;--s:6px;--t:47s;--dl:-40s} #prostor-sec.k4 .k4-bub i:nth-child(5){--x:42%;--s:4px;--t:40s;--dl:-12s} #prostor-sec.k4 .k4-bub i:nth-child(6){--x:50%;--s:10px;--t:56s;--dl:-46s} #prostor-sec.k4 .k4-bub i:nth-child(7){--x:59%;--s:6px;--t:45s;--dl:-3s} #prostor-sec.k4 .k4-bub i:nth-child(8){--x:67%;--s:14px;--t:64s;--dl:-34s} #prostor-sec.k4 .k4-bub i:nth-child(9){--x:76%;--s:7px;--t:49s;--dl:-17s} #prostor-sec.k4 .k4-bub i:nth-child(10){--x:84%;--s:5px;--t:42s;--dl:-26s} #prostor-sec.k4 .k4-bub i:nth-child(11){--x:91%;--s:11px;--t:58s;--dl:-50s} #prostor-sec.k4 .k4-bub i:nth-child(12){--x:97%;--s:6px;--t:46s;--dl:-6s} #prostor-sec.k4 .k4-em{display:block;color:#A9E9FF} #prostor-sec.k4 .k4-show{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px;align-items:stretch;margin-top:clamp(8px,1vw,16px)} #prostor-sec.k4 .k4-photo,#prostor-sec.k4 .k4-vid{position:relative;margin:0;min-width:0} #prostor-sec.k4 .k4-ph,#prostor-sec.k4 .k4-frame{position:relative;border-radius:28px;overflow:hidden;background:#0B2038;isolation:isolate; box-shadow:0 50px 100px -50px rgba(0,0,0,.9);outline:1px solid rgba(127,219,255,.16);outline-offset:-1px} #prostor-sec.k4 .k4-ph{aspect-ratio:16 / 10} #prostor-sec.k4 .k4-vid .k4-frame{position:absolute;inset:0} #prostor-sec.k4 .k4-ph img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform-origin:60% 55%;animation:k4Kb 26s ease-in-out infinite alternate} #prostor-sec.k4 .k4-ph::after,#prostor-sec.k4 .k4-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(4,11,22,.25) 0%,rgba(4,11,22,0) 22%,rgba(4,11,22,0) 58%,rgba(4,11,22,.72) 100%)} #prostor-sec.k4 .k4-sweep{position:absolute;z-index:1;top:-20%;bottom:-20%;left:0;width:28%;pointer-events:none; background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 100%);transform:translateX(-140%) skewX(-14deg);animation:k4Sweep 11s var(--k2-ease) 2s infinite} #prostor-sec.k4 .k4-tag,#prostor-sec.k4 .k4-live{position:absolute;z-index:3;top:16px;left:16px;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px; background:rgba(4,11,22,.66);border:1px solid rgba(169,233,255,.2);color:#fff;font:600 13px/1.2 var(--k2-sans);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} #prostor-sec.k4 .k4-tag .ico{width:16px;height:16px;fill:none;stroke:var(--k2-cyan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #prostor-sec.k4 .k4-live i{width:8px;height:8px;border-radius:50%;background:#3EE6A8;box-shadow:0 0 0 0 rgba(62,230,168,.6);animation:k4Live 2s ease-out infinite} #prostor-sec.k4 .k4-cap{position:absolute;z-index:3;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:3px;margin:0;padding:14px 18px;border-radius:18px; background:rgba(4,11,22,.6);border:1px solid rgba(169,233,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} #prostor-sec.k4 .k4-photo .k4-cap{right:auto;max-width:min(460px,calc(100% - 32px))} #prostor-sec.k4 .k4-cap b{font:600 17px/1.25 var(--k2-sans);color:#fff} #prostor-sec.k4 .k4-cap span{font:400 14px/1.45 var(--k2-sans);color:var(--k2-on2)} #prostor-sec.k4 .k4-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #prostor-sec.k4 .k4-vbtn{position:absolute;z-index:3;top:14px;right:14px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer; background:rgba(4,11,22,.66);border:1px solid rgba(169,233,255,.22);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .3s} #prostor-sec.k4 .k4-vbtn:hover{background:rgba(30,111,217,.7)} #prostor-sec.k4 .k4-vbtn:focus-visible{outline:2px solid var(--k2-cyan);outline-offset:3px} #prostor-sec.k4 .k4-vbtn .ico{width:16px;height:16px;fill:currentColor;stroke:none} #prostor-sec.k4 .k4-vbtn .k4-i-play{display:none} #prostor-sec.k4 .k4-vbtn.is-paused .k4-i-pause{display:none} #prostor-sec.k4 .k4-vbtn.is-paused .k4-i-play{display:block;margin-left:2px} #prostor-sec.k4 .k4-vbtn[hidden]{display:none} #prostor-sec.k4 .pr{background:radial-gradient(640px 400px at 88% -6%,rgba(56,182,255,.16),transparent 70%),radial-gradient(560px 380px at -4% 104%,rgba(28,174,143,.1),transparent 70%),linear-gradient(180deg,rgba(127,219,255,.06),rgba(127,219,255,.02)); border-color:rgba(169,233,255,.14)} #prostor-sec.k4 .k4-cmp{grid-template-columns:minmax(0,.86fr) auto minmax(0,1.14fr);gap:16px} #prostor-sec.k4 .k4-mono{opacity:.9;background:rgba(255,255,255,.035);filter:saturate(.75)} #prostor-sec.k4 .k4-mono .pr-viz{background:radial-gradient(120% 110% at 50% 0%,rgba(127,219,255,.08),rgba(255,255,255,0)),radial-gradient(80% 60% at 50% 60%,rgba(4,11,22,0),rgba(4,11,22,.35))} #prostor-sec.k4 .k4-caps{width:84%;margin-top:-12px;filter:saturate(.7)} #prostor-sec.k4 .k4-glass{animation:k4Glass 6.5s ease-in-out 1s infinite} #prostor-sec.k4 .k4-chest{transform-box:fill-box;transform-origin:50% 100%;animation:k4Breathe 4.6s ease-in-out infinite} #prostor-sec.k4 .k4-rows{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px} #prostor-sec.k4 .k4-rows li{display:flex;align-items:center;gap:10px;font:500 14px/1.35 var(--k2-sans);color:var(--k2-on3)} #prostor-sec.k4 .k4-rows li::before{content:"";flex:0 0 20px;height:20px;border-radius:50%;background:rgba(255,255,255,.06) center/12px no-repeat;border:1px solid rgba(255,255,255,.14)} #prostor-sec.k4 .k4-no li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.5 3.5 5 5m0-5-5 5' stroke='%2394A8BF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")} #prostor-sec.k4 .k4-yes li{color:#fff} #prostor-sec.k4 .k4-yes li::before{border-color:transparent;background:var(--k2-sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 6.2 2 2 4-4.4' fill='none' stroke='%23040B16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; box-shadow:0 0 12px rgba(56,182,255,.6)} #prostor-sec.k4 .k4-cmp.k4-in .k4-yes li{animation:k4Row .6s var(--k2-ease) calc(.7s + var(--i) * .22s) both} #prostor-sec.k4 .k4-cmp.k4-in .k4-yes li::before{animation:k4Tick .5s var(--k2-ease) calc(.8s + var(--i) * .22s) both} #prostor-sec.k4 .k4-ours{position:relative;overflow:hidden;isolation:isolate} #prostor-sec.k4 .k4-ours::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1.5px;pointer-events:none; background:conic-gradient(from var(--k4a),rgba(127,219,255,0) 0deg,rgba(169,233,255,.95) 50deg,rgba(56,182,255,.35) 100deg,rgba(127,219,255,0) 160deg,rgba(127,219,255,0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); animation:k4Spin 7s linear infinite} #prostor-sec.k4 .k4-ours img{animation:k4Kb 22s ease-in-out infinite alternate} #prostor-sec.k4 .k4-ours .pr-chip-on b{display:inline-block;min-width:1.2em;text-align:right;font-variant-numeric:tabular-nums} #prostor-sec.k4 .k4-vs{position:relative;background:rgba(127,219,255,.08);border-color:rgba(169,233,255,.28);color:#fff} #prostor-sec.k4 .k4-vs::before,#prostor-sec.k4 .k4-vs::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(127,219,255,.5);animation:k4Ring 2.8s ease-out infinite} #prostor-sec.k4 .k4-vs::after{animation-delay:1.4s} #prostor-sec.k4 .k4-pts{gap:18px;align-items:stretch} #prostor-sec.k4 .k4-pts li.k4-pt{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:14px 14px 18px;border-radius:24px;overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(169,233,255,.14); box-shadow:0 30px 60px -44px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05); transition:transform .6s var(--k2-ease),border-color .6s,background .6s,box-shadow .6s} #prostor-sec.k4 .k4-pt::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;pointer-events:none;opacity:0; background:linear-gradient(100deg,rgba(169,233,255,0) 0%,rgba(169,233,255,.12) 50%,rgba(169,233,255,0) 100%);transform:translateX(-120%) skewX(-12deg)} #prostor-sec.k4 .k4-pt.is-on{transform:translateY(-6px);border-color:rgba(127,219,255,.38);background:linear-gradient(180deg,rgba(56,182,255,.14),rgba(56,182,255,.03)); box-shadow:0 44px 80px -42px rgba(56,182,255,.45),inset 0 1px 0 rgba(255,255,255,.1)} #prostor-sec.k4 .k4-pt.is-on::after{animation:k4Shine 1.5s var(--k2-ease) .1s 1 both} #prostor-sec.k4 .k4-ptx{display:flex;align-items:flex-start;gap:14px;padding:0 4px} #prostor-sec.k4 .k4-pt .pr-ico{transition:transform .5s var(--k2-ease)} #prostor-sec.k4 .k4-pt.is-on .pr-ico{transform:translateY(-2px) scale(1.06)} #prostor-sec.k4 .k4-pviz{position:relative;height:100px;border-radius:16px;overflow:hidden; background:radial-gradient(120% 100% at 50% 0%,rgba(56,182,255,.12),rgba(4,11,22,0)),rgba(4,11,22,.45);border:1px solid rgba(169,233,255,.1); opacity:.72;transition:opacity .6s,border-color .6s} #prostor-sec.k4 .k4-pt.is-on .k4-pviz{opacity:1;border-color:rgba(169,233,255,.22)} #prostor-sec.k4 .k4-svg{position:absolute;inset:8px 10px;width:calc(100% - 20px);height:calc(100% - 16px);overflow:visible} #prostor-sec.k4 .k4-pp circle,#prostor-sec.k4 .k4-pp path{fill:rgba(169,233,255,.16);stroke:rgba(169,233,255,.45);stroke-width:1.2} #prostor-sec.k4 .k4-staff circle,#prostor-sec.k4 .k4-staff path{fill:#38B6FF;stroke:#A9E9FF;stroke-width:1.2} #prostor-sec.k4 .k4-staff path{fill:rgba(56,182,255,.55)} #prostor-sec.k4 .k4-plus circle{fill:#3EE6A8;stroke:#071A30;stroke-width:1.5} #prostor-sec.k4 .k4-plus path{stroke:#071A30;stroke-width:1.6;stroke-linecap:round} #prostor-sec.k4 .k4-ring{fill:none;stroke:rgba(127,219,255,.7);stroke-width:1.2;transform-box:fill-box;transform-origin:50% 50%;animation:k4Ripple 2.4s ease-out infinite} #prostor-sec.k4 .k4-links path{stroke:rgba(127,219,255,.55);stroke-dasharray:3 5;animation:k4Flow 1.6s linear infinite} #prostor-sec.k4 .k4-cam{position:absolute;inset:8px} #prostor-sec.k4 .k4-cam::before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(#7FDBFF,#7FDBFF) 0 0/14px 1.5px,linear-gradient(#7FDBFF,#7FDBFF) 0 0/1.5px 14px, linear-gradient(#7FDBFF,#7FDBFF) 100% 0/14px 1.5px,linear-gradient(#7FDBFF,#7FDBFF) 100% 0/1.5px 14px, linear-gradient(#7FDBFF,#7FDBFF) 0 100%/14px 1.5px,linear-gradient(#7FDBFF,#7FDBFF) 0 100%/1.5px 14px, linear-gradient(#7FDBFF,#7FDBFF) 100% 100%/14px 1.5px,linear-gradient(#7FDBFF,#7FDBFF) 100% 100%/1.5px 14px;background-repeat:no-repeat;opacity:.8} #prostor-sec.k4 .k4-cam .k4-svg{inset:10px 14px 6px;width:calc(100% - 28px);height:calc(100% - 16px)} #prostor-sec.k4 .k4-rec{position:absolute;z-index:2;left:10px;top:7px;display:flex;align-items:center;gap:5px;font:700 9.5px/1 var(--k2-sans);letter-spacing:.12em;color:#fff} #prostor-sec.k4 .k4-rec i{width:7px;height:7px;border-radius:50%;background:#FF4D5E;box-shadow:0 0 8px #FF4D5E;animation:k4Blink 1.2s steps(2,start) infinite} #prostor-sec.k4 .k4-camn{position:absolute;z-index:2;right:10px;top:7px;font:600 9px/1 var(--k2-sans);letter-spacing:.14em;color:var(--k2-on3)} #prostor-sec.k4 .k4-floor{stroke:rgba(169,233,255,.25);stroke-width:1.2} #prostor-sec.k4 .k4-seats rect{fill:rgba(56,182,255,.18);stroke:rgba(169,233,255,.35);stroke-width:1.1} #prostor-sec.k4 .k4-heads circle{fill:rgba(169,233,255,.3);stroke:rgba(169,233,255,.55);stroke-width:1.1} #prostor-sec.k4 .k4-scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,rgba(127,219,255,0),rgba(127,219,255,.8),rgba(127,219,255,0)); box-shadow:0 0 10px rgba(127,219,255,.6);animation:k4Scan 3.2s ease-in-out infinite alternate} #prostor-sec.k4 .k4-focus{position:absolute;top:30%;left:12%;width:20%;height:52%;border:1.5px solid rgba(62,230,168,.85);border-radius:6px;box-shadow:0 0 10px rgba(62,230,168,.35); animation:k4Focus 8s var(--k2-ease) infinite} #prostor-sec.k4 .k4-round circle:first-child{fill:rgba(255,255,255,.03);stroke:rgba(169,233,255,.32);stroke-width:1.3;stroke-dasharray:4 4} #prostor-sec.k4 .k4-round .k4-fig{fill:rgba(169,233,255,.22);stroke:rgba(169,233,255,.4);stroke-width:1.1} #prostor-sec.k4 .k4-rect rect{fill:rgba(56,182,255,.12);stroke:#7FDBFF;stroke-width:1.6;transform-box:fill-box;transform-origin:50% 50%;animation:k4Grow 3.4s ease-in-out infinite} #prostor-sec.k4 .k4-rect .k4-fig{fill:rgba(169,233,255,.5);stroke:#A9E9FF;stroke-width:1.1} #prostor-sec.k4 .k4-room path{fill:none;stroke:#3EE6A8;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:k4Room 3.4s ease-in-out infinite} #prostor-sec.k4 .k4-arrow-r{fill:none;stroke:rgba(169,233,255,.55);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:k4Nudge 1.7s ease-in-out infinite} #prostor-sec.k4 .k4-pviz text{font:600 8.5px var(--k2-sans);letter-spacing:.06em;fill:rgba(232,240,248,.55)} #prostor-sec.k4 .k4-pviz text.k4-on{fill:#A9E9FF} #prostor-sec.k4 .k4-tvw{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:22px} #prostor-sec.k4 .k4-port{position:relative;width:62px;height:62px;border-radius:50%;overflow:hidden; background:radial-gradient(circle at 35% 30%,#CFEFFF 0%,#7FC3EE 38%,#2C6FB3 100%);box-shadow:0 0 0 5px #C9D6E3,0 0 0 7px #8193A8,0 8px 18px -6px rgba(0,0,0,.8)} #prostor-sec.k4 .k4-port i{position:absolute;top:-30%;bottom:-30%;left:0;width:34%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0)); transform:translateX(-150%) skewX(-16deg);animation:k4Glint 4.5s ease-in-out infinite} #prostor-sec.k4 .k4-scr{display:grid;grid-template-columns:repeat(2,44px);gap:6px} #prostor-sec.k4 .k4-scr i{height:28px;border-radius:5px;border:2px solid #1B2433;box-shadow:0 0 0 1px rgba(169,233,255,.25),0 6px 14px -6px rgba(0,0,0,.8); background:linear-gradient(120deg,#0E5FA8,#38B6FF,#3EE6A8,#1E6FD9,#7FDBFF);background-size:400% 400%;animation:k4Screen 7s ease-in-out infinite} #prostor-sec.k4 .k4-scr i:nth-child(2){animation-delay:-1.8s;animation-duration:8s} #prostor-sec.k4 .k4-scr i:nth-child(3){animation-delay:-3.4s;animation-duration:6.5s} #prostor-sec.k4 .k4-scr i:nth-child(4){animation-delay:-5s;animation-duration:9s} #prostor-sec.k4.k4-off .k4-bub i,#prostor-sec.k4.k4-off .k4-ph img,#prostor-sec.k4.k4-off .k4-sweep,#prostor-sec.k4.k4-off .k4-live i,#prostor-sec.k4.k4-off .k4-glass,#prostor-sec.k4.k4-off .k4-chest,#prostor-sec.k4.k4-off .k4-ours::before,#prostor-sec.k4.k4-off .k4-ours img,#prostor-sec.k4.k4-off .k4-vs::before,#prostor-sec.k4.k4-off .k4-vs::after,#prostor-sec.k4.k4-off .k4-pviz *,#prostor-sec.k4.k4-off .k4-pviz *::before{animation-play-state:paused} @media (max-width:1279.98px){ #prostor-sec.k4 .k4-tvw{gap:14px} #prostor-sec.k4 .k4-port{width:52px;height:52px} #prostor-sec.k4 .k4-scr{grid-template-columns:repeat(2,38px)} } @media (max-width:1023.98px){ #prostor-sec.k4 .k4-show{grid-template-columns:1fr} #prostor-sec.k4 .k4-vid{aspect-ratio:3 / 4;width:100%;max-width:520px;justify-self:center} } @media (max-width:700px){ #prostor-sec.k4 .k4-cmp{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ #prostor-sec.k4 .k4-bub{display:none} } #prostor-sec.k4 .k4-show{--vh:clamp(470px,44vw,660px);display:flex;justify-content:center;align-items:flex-end;gap:28px} #prostor-sec.k4 .k4-photo{flex:0 0 auto;width:calc(var(--vh) * 1.15);display:flex;flex-direction:column;gap:14px} #prostor-sec.k4 .k4-ph{aspect-ratio:4 / 3} #prostor-sec.k4 .k4-vid{flex:0 0 auto;width:calc(var(--vh) * 9 / 16);display:flex;flex-direction:column;gap:14px} #prostor-sec.k4 .k4-vid .k4-frame{position:relative;inset:auto;aspect-ratio:9 / 16} #prostor-sec.k4 .k4-ph::after,#prostor-sec.k4 .k4-frame::after{background:linear-gradient(180deg,rgba(4,11,22,.28) 0%,rgba(4,11,22,0) 18%,rgba(4,11,22,0) 82%,rgba(4,11,22,.22) 100%)} #prostor-sec.k4 .k4-ph img{transform-origin:55% 50%} #prostor-sec.k4 .k4-cap,#prostor-sec.k4 .k4-photo .k4-cap{position:static;max-width:none;padding:0 6px;background:none;border:0;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none} #prostor-sec.k4 .pr-photos{padding-bottom:0;gap:clamp(16px,1.8vw,28px)} #prostor-sec.k4 .pr-ph:nth-child(2) figure{transform:none} #prostor-sec.k4 .pr-ph figure{aspect-ratio:5 / 6} #prostor-sec.k4 .pr-ph img{object-position:50% 42%} #prostor-sec.k4 .pr-ph:nth-child(2) img{object-position:50% 30%} #prostor-sec.k4 .pr-ph figure{transition:transform .6s var(--k2-ease),box-shadow .6s} @media (hover:hover){ #prostor-sec.k4 .pr-ph:hover figure{transform:translateY(-6px);box-shadow:0 54px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(127,219,255,.3)} } @media (max-width:1023.98px){ #prostor-sec.k4 .k4-show{flex-direction:column;align-items:center} #prostor-sec.k4 .k4-photo{width:100%} #prostor-sec.k4 .k4-vid{width:min(100%,400px)} } #prostor-sec.k4 .pr-ph figcaption{min-height:76px} #prostor-sec.k4 .k4-show .k4-cap{min-height:66px} @media (min-width:1024px){ @media (min-width:1024px){ #prostor-sec{background:radial-gradient(50% 40% at 20% 0%,rgba(30,111,217,.16) 0%,rgba(30,111,217,0) 70%),var(--x-abyss);color:var(--x-on);--focus:var(--x-cyan)} #prostor-sec .eyebrow{color:var(--x-cyan)} #prostor-sec .h2{color:#fff} } @media (min-width:1024px){ #prostor-sec{background:radial-gradient(900px 520px at 18% 18%,rgba(56,182,255,.30),transparent 65%),radial-gradient(800px 560px at 92% 70%,rgba(127,219,255,.18),transparent 65%),linear-gradient(180deg,#0C2747 0%,#123C66 55%,#1A4F82 100%)} #prostor-sec::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(169,233,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(169,233,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)} #prostor-sec > *{position:relative} } } /* ===================================================================== VERZIJA 6 – lastni slogi ===================================================================== */ /* ---------- 2. Komora: »kamera« se približa točki, fokus, samodejni ogled ---------- */ #komora.k2 .k2-fig.pt-cam .k2-dimg{transform-origin:var(--fx) var(--fy);transition:opacity .9s var(--k2-ease,cubic-bezier(.16,1,.3,1)),transform 7s cubic-bezier(.22,.61,.36,1),transform-origin 1.2s var(--k2-ease,cubic-bezier(.16,1,.3,1))} #komora.k2 .k2-fig.pt-cam .k2-dimg:not(.is-on){transform:scale(1.03)} #komora.k2 .k2-fig.pt-cam .k2-dimg.is-on{transform:scale(1.16)} #komora.k2 .k2-fig.pt-cam::after{background:radial-gradient(circle at var(--fx) var(--fy),rgba(4,11,22,0) 0,rgba(4,11,22,0) 13%,rgba(4,11,22,.28) 36%,rgba(4,11,22,.5) 100%)} .pt-focus{position:absolute;z-index:2;left:50%;top:40%;width:150px;height:150px;margin:-75px 0 0 -75px;pointer-events:none;transition:left .8s cubic-bezier(.16,1,.3,1),top .8s cubic-bezier(.16,1,.3,1)} .pt-focus i{position:absolute;width:26px;height:26px;border:2px solid rgba(169,233,255,.9);filter:drop-shadow(0 0 6px rgba(56,182,255,.7))} .pt-focus i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:10px} .pt-focus i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:10px} .pt-focus i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:10px} .pt-focus i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:10px} .pt-focus{opacity:.55} .pt-focus.go{animation:ptFocus 1.1s cubic-bezier(.16,1,.3,1)} @keyframes ptFocus{0%{transform:scale(1.7);opacity:0}45%{opacity:1}100%{transform:scale(1);opacity:.55}} #komora.k2 .k2-acc{position:relative} .pt-k2-bar{position:absolute;left:20px;right:20px;bottom:7px;height:2px;border-radius:2px;background:rgba(127,219,255,.14);overflow:hidden;opacity:0;transition:opacity .3s} .pt-k2-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#38B6FF,#A9E9FF);transform-origin:0 50%;transform:scaleX(0)} [data-k2].pt-auto .k2-acc.is-active .pt-k2-bar{opacity:1} [data-k2].pt-auto .k2-acc.pt-run .pt-k2-bar::after{animation:ptK2 var(--pt-k2-dur,5.2s) linear forwards} @keyframes ptK2{to{transform:scaleX(1)}} .pt-k2-hint{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font:600 12px/1.3 var(--x-sans);letter-spacing:.06em;color:rgba(169,233,255,.8)} .pt-k2-hint i{width:7px;height:7px;border-radius:50%;background:#3BE38C;box-shadow:0 0 8px #3BE38C;animation:ptDot 1.6s ease-in-out infinite} @keyframes ptDot{50%{opacity:.35}} [data-k2]:not(.pt-auto) .pt-k2-hint{display:none} /* ---------- 4. Prostor: ločena sekcija, štiri ploščice (+ video Utrip ambulante) ---------- */ #prostor-sec .pr{margin-top:0} @media (min-width:1024px){ #prostor-sec.k2.k4 .pr-photos{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (min-width:640px) and (max-width:1023.98px){ #prostor-sec.k2.k4 .pr-photos{grid-template-columns:repeat(2,minmax(0,1fr))} } #prostor-sec .pr-ph-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #prostor-sec .pr-live{position:absolute;z-index:2;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:rgba(4,11,22,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(169,233,255,.22);color:#fff;font:600 12px/1.2 var(--x-sans)} #prostor-sec .pr-live i{width:8px;height:8px;border-radius:50%;background:#3BE38C;box-shadow:0 0 8px #3BE38C} #prostor-sec .pr-vbtn{position:absolute;z-index:2;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:rgba(4,11,22,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer} #prostor-sec .pr-vbtn:focus-visible{outline:3px solid #7FDBFF;outline-offset:2px} #prostor-sec .pr-vbtn svg{width:15px;height:15px;fill:currentColor} #prostor-sec .pr-vbtn .pv-play{display:none} #prostor-sec .pr-vbtn[aria-pressed="true"] .pv-play{display:block} #prostor-sec .pr-vbtn[aria-pressed="true"] .pv-pause{display:none}