/* ============================================================ DRAMPEK NEKRETNINE — KLJUČANICA (uvodni prelaz) Ide odmah iza preloadera s logotipom i trakom učitavanja: kroz ključanicu se vidi zgrada, ključanica se raširi i posjetilac "uđe" u stranicu. Podlogu NIKAD ne pomjeramo ni skaliramo — u referentnom primjeru fotografija stoji mirno, a osjećaj ulaska pravi isključivo otvor koji raste. Provjereno kadar po kadar. Traži keyhole-gate.js (gradi markup i vodi animaciju). ============================================================ */ /* Brava skrola dok ključanica stoji. Preko klase i s !important namjerno: nav.js piše po inline `overflow` na kad zatvara mobilni meni, pa bi inline brava bila obrisana. Pravilo s !important to nadjačava. */ html.dpk-gate-lock{overflow:hidden!important} html.dpk-gate-lock body{overflow:hidden!important;overscroll-behavior:none} .dpk-gate{ position:fixed;inset:0;z-index:8900; overflow:hidden; /* Preloader (z-index 9000) stoji iznad i sklanja se prvi; ključanica ga dočeka ispod, pa nema treperenja između to dvoje. */ opacity:1; } .dpk-gate[hidden]{display:none} /* ---------- fotografija iza ključanice ---------- */ .dpk-gate-bg{ position:absolute;inset:0; background-position:center 42%; background-size:cover; background-repeat:no-repeat; background-color:#0B1F33; } /* ---------- tamni sloj s otvorom ---------- */ /* SVG nosi i prekrivač i masku: viewBox se u JS-u drži na stvarnoj veličini prozora, pa je 1 SVG jedinica = 1 piksel i ključanica nikad nije razvučena. */ .dpk-gate-veil{position:absolute;inset:0;width:100%;height:100%;display:block} /* ---------- natpis ispod ključanice ---------- */ .dpk-gate-copy{ position:absolute;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.6vh,30px); text-align:center;pointer-events:none; transition:opacity .42s ease,transform .42s cubic-bezier(.4,0,.2,1); } .dpk-gate-copy p{ margin:0;max-width:34ch; font-family:Barlow,Helvetica,Arial,sans-serif; font-size:clamp(9.5px,1.02vw,12px);font-weight:500; letter-spacing:.30em;text-transform:uppercase;line-height:2.1; color:rgba(250,251,252,.62); } .dpk-gate-key{display:block;color:rgba(201,162,39,.85)} /* Ključ se jedva njiše — dovoljno da se vidi da stranica nije zamrznuta. */ @keyframes dpkGateKey{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-2.5deg)}} .dpk-gate-key{animation:dpkGateKey 3.4s ease-in-out infinite} /* ---------- poziv na skrol ---------- */ /* Ključanica stoji na prvom kadru dok posjetilac ne skrola nadolje, pa mu to treba i reći — inače stoji pred zaključanim ekranom i ne zna šta se traži. Isti jezik kao „Skrolaj" u heroju kontakt stranice. */ .dpk-gate-cue{ position:absolute;left:50%;bottom:clamp(26px,4.4vh,44px);transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:9px; font-family:Barlow,Helvetica,Arial,sans-serif; font-size:9.5px;letter-spacing:.28em;text-transform:uppercase; color:rgba(250,251,252,.42);pointer-events:none; opacity:0;transition:opacity .8s ease .25s; } .dpk-gate-cue.is-on{opacity:1} .dpk-gate-cue i{ display:block;width:1px;height:42px; background:linear-gradient(rgba(250,251,252,.5),rgba(250,251,252,0)); animation:dpkGateFall 2.1s ease-in-out infinite; } @keyframes dpkGateFall{ 0%{transform:scaleY(0);transform-origin:0 0} 45%{transform:scaleY(1);transform-origin:0 0} 55%{transform:scaleY(1);transform-origin:0 100%} 100%{transform:scaleY(0);transform-origin:0 100%} } /* Kad otvor krene, natpis i poziv odlaze prvi da ne smetaju pogledu. */ .dpk-gate.is-opening .dpk-gate-copy{opacity:0;transform:translateX(-50%) translateY(14px)} .dpk-gate.is-opening .dpk-gate-cue{opacity:0;transition:opacity .3s ease} /* ---------- izlaz ---------- */ /* Otvor na kraju prekrije cijeli prozor, pa je ovo samo osiguranje protiv jednog svijetlog frejma na sporim uređajima. */ .dpk-gate.is-done{opacity:0;transition:opacity .32s ease;pointer-events:none} @media (prefers-reduced-motion:reduce){ .dpk-gate-key{animation:none} .dpk-gate-copy{transition:none} .dpk-gate-cue i{animation:none} }