/* ============================================================ DRAMPEK NEKRETNINE — ZAJEDNIČKA NAVIGACIJA Vanilla port dvije React komponente (bez React-a, bez Tailwinda, bez motion biblioteke): 1) "AnimatedNavFramer" — traka se pri skrolu skuplja u krug (samo unutar hero sekcije naslovne) 2) "DropdownNavigation" — hover otvara panel sa podstranicama, svaka sa ikonom, nazivom i opisom Markup gradi nav.js — vidi _nav-snippet.html za mount tačku. ============================================================ */ /* ---------- traka ---------- */ .dpk-hd{ position:fixed;top:0;left:0;right:0;z-index:800; background:rgba(11,31,51,.42); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid rgba(250,251,252,.09); transition:background .5s cubic-bezier(.4,0,.2,1),border-color .5s ease,box-shadow .5s ease; } .dpk-hd.is-solid{background:rgba(11,31,51,.86)} /* Stranice koje počinju SVIJETLOM sekcijom (ponuda stanova: bijeli „browse" ide odmah ispod trake). Providna traka nad bijelim pokupi bjelinu kroz blur, pa bijeli logo i bijeli natpisi problijede i traka izgleda drukčije nego na ostalim stranicama, gdje ispod nje stoji tamni hero. Puna podloga vraća isti izgled. Uključuje se s data-dpk-hd="solid" na . */ body[data-dpk-hd="solid"] .dpk-hd{background:#0B1F33} .dpk-hd-in{ max-width:1560px;margin:0 auto; padding:clamp(13px,2vh,22px) clamp(20px,4vw,56px); display:flex;align-items:center;justify-content:space-between;gap:24px; transition:opacity .34s ease,transform .42s cubic-bezier(.23,1,.32,1); } .dpk-hd-logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none} .dpk-hd-logo img{width:clamp(104px,10vw,140px);height:auto;display:block;transition:filter .5s ease} /* protuteža logotipu da navigacija ostane optički centrirana */ .dpk-hd-spacer{flex:0 0 auto;width:clamp(104px,10vw,140px)} /* ---------- lista ---------- */ .dpk-nav{flex:1 1 auto;display:flex;align-items:center;justify-content:center} .dpk-nav-list{ position:relative;display:flex;align-items:center;list-style:none; margin:0;padding:6px 8px; border:1px solid rgba(250,251,252,.20);border-radius:999px; background:rgba(250,251,252,.04); } .dpk-nav-li{position:relative} /* klizna pozadina ispod stavke nad kojom je miš (zamjena za layoutId) */ .dpk-nav-hl{ position:absolute;top:6px;left:0;height:calc(100% - 12px); border-radius:999px;background:rgba(201,162,39,.16); opacity:0;pointer-events:none; transition:transform .32s cubic-bezier(.23,1,.32,1), width .32s cubic-bezier(.23,1,.32,1), opacity .22s ease; } .dpk-nav-top{ position:relative;z-index:1; display:flex;align-items:center;gap:7px; margin:0;padding:8px clamp(12px,1.3vw,18px); border:0;background:none;cursor:pointer; font-family:Barlow,sans-serif;font-size:12px;font-weight:500; letter-spacing:.17em;text-transform:uppercase; color:rgba(250,251,252,.78);text-decoration:none;white-space:nowrap; transition:color .22s ease; } .dpk-nav-top:hover,.dpk-nav-top:focus-visible, .dpk-nav-li.is-open>.dpk-nav-top{color:#FAFBFC} .dpk-nav-top.is-current{color:#C9A227} /* poništava stari globalni hover-lift iz naslovne — pilula se sada kreće umjesto teksta */ .dpk-nav .dpk-nav-top[data-navtext]:hover, .dpk-nav .dpk-nav-top[data-navtext]:focus-visible, .dpk-nav .dpk-nav-top[data-navtext]:active{transform:none} .dpk-nav-dot{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .dpk-nav-caret{ display:block;flex:0 0 auto;width:0;height:0; border-left:3.5px solid transparent;border-right:3.5px solid transparent; border-top:4px solid rgba(250,251,252,.55); transition:transform .3s ease,border-top-color .22s ease; } .dpk-nav-li.is-open .dpk-nav-caret{transform:rotate(180deg);border-top-color:#C9A227} /* ---------- padajući panel ---------- */ .dpk-nav-panel{ position:absolute;top:100%;left:50%; padding-top:14px; opacity:0;visibility:hidden;pointer-events:none; transform:translate(-50%,-8px); transition:opacity .26s ease,transform .3s cubic-bezier(.23,1,.32,1),visibility .26s; } .dpk-nav-li.is-open>.dpk-nav-panel{ opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0); } .dpk-nav-card{ display:flex;gap:clamp(22px,2.6vw,40px); padding:22px 24px; background:rgba(11,31,51,.97); border:1px solid rgba(250,251,252,.11);border-radius:16px; box-shadow:0 34px 66px -30px rgba(0,0,0,.78); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); } .dpk-nav-col{min-width:0} .dpk-nav-col h3{ margin:0 0 14px; font-family:Barlow,sans-serif;font-size:10px;font-weight:600; letter-spacing:.26em;text-transform:uppercase;color:rgba(250,251,252,.42); } .dpk-nav-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} /* ---------- stavka u panelu ---------- */ .dpk-nav-mi{ display:flex;align-items:flex-start;gap:13px; padding:9px 10px;margin:0 -10px;border-radius:11px; text-decoration:none; transition:background .24s ease; } a.dpk-nav-mi:hover,a.dpk-nav-mi:focus-visible{background:rgba(79,109,138,.20)} .dpk-nav-ic{ flex:0 0 auto;display:flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:9px; border:1px solid rgba(250,251,252,.16); color:rgba(250,251,252,.86);overflow:hidden; transition:background .26s ease,border-color .26s ease,color .26s ease; } .dpk-nav-ic img{width:100%;height:100%;object-fit:cover;display:block} .dpk-nav-ic svg{width:19px;height:19px;flex:none} a.dpk-nav-mi:hover .dpk-nav-ic,a.dpk-nav-mi:focus-visible .dpk-nav-ic{ background:#C9A227;border-color:#C9A227;color:#0B1F33; } .dpk-nav-tx{min-width:0;line-height:1.35} .dpk-nav-tx b{ display:block; font-family:Barlow,sans-serif;font-size:13.5px;font-weight:500; letter-spacing:.01em;color:#FAFBFC;white-space:nowrap; } /* Opis stavke je DIREKTNO dijete .dpk-nav-tx; pilula „U izradi" sjedi unutar iznad njega. Bez `>` ovo pravilo je hvatalo i pilulu i pretvaralo je u `display:block` na 11.5px — pa se razvlačila preko cijele širine stavke umjesto da bude uska oznaka uz naslov. */ .dpk-nav-tx>span{ display:block;margin-top:2px; font-family:Barlow,sans-serif;font-size:11.5px;font-weight:300; color:rgba(250,251,252,.50);white-space:nowrap; transition:color .26s ease; } a.dpk-nav-mi:hover .dpk-nav-tx>span{color:rgba(250,251,252,.78)} /* stavke koje još nemaju stranicu */ .dpk-nav-mi.is-wip{cursor:default} .dpk-nav-mi.is-wip .dpk-nav-ic{opacity:.42} .dpk-nav-mi.is-wip .dpk-nav-tx b{color:rgba(250,251,252,.52);font-weight:400} .dpk-nav-tag{ display:inline-block;margin-left:8px;vertical-align:1px; /* Desni padding je manji od lijevog namjerno: `letter-spacing` dodaje razmak i IZA zadnjeg slova, pa bi sa simetričnim paddingom natpis izgledao gurnut ulijevo unutar pilule. 7px - .16em ≈ 5.6px. */ padding:2px 5.5px 2px 7px;border-radius:999px; border:1px solid rgba(201,162,39,.36); font-family:Barlow,sans-serif;font-size:8.5px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:rgba(201,162,39,.86); /* U ladici pilula stoji u flex redu — bez ovoga je flex stisne ili prelomi natpis na dva reda. */ flex:0 0 auto;white-space:nowrap;line-height:1.45; } /* ============================================================ SKUPLJENO STANJE — traka nestaje, ostaje samo krug (aktivno isključivo unutar hero sekcije naslovne) ============================================================ */ .dpk-hd-orb{ position:absolute;top:14px;left:50%; display:flex;align-items:center;justify-content:center; width:48px;height:48px;margin-left:-24px;padding:0; border:1px solid rgba(250,251,252,.24);border-radius:999px; background:rgba(11,31,51,.58); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); box-shadow:0 14px 34px -16px rgba(0,0,0,.7); color:#FAFBFC;cursor:pointer; opacity:0;visibility:hidden;pointer-events:none; transform:scale(.72); transition:opacity .24s ease,transform .42s cubic-bezier(.23,1,.32,1), visibility .24s,border-color .24s ease,background .24s ease; } .dpk-hd-orb svg{width:20px;height:20px;display:block} .dpk-hd[data-collapsed="1"]{ background:transparent!important;border-bottom-color:transparent!important; backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none!important; } .dpk-hd[data-collapsed="1"] .dpk-hd-in{ opacity:0;transform:translateY(-14px);pointer-events:none; } .dpk-hd[data-collapsed="1"] .dpk-hd-orb{ opacity:1;visibility:visible;pointer-events:auto; transform:scale(1);transition-delay:.06s; } @media(hover:hover) and (pointer:fine){ .dpk-hd-orb:hover{transform:scale(1.1);border-color:rgba(201,162,39,.6);background:rgba(11,31,51,.78)} } .dpk-hd-orb:active{transform:scale(.94)} .dpk-hd-orb:focus-visible{outline:2px solid #C9A227;outline-offset:3px} /* ---------- burger (mobitel) ---------- */ .dpk-hd-burger{ display:none;align-items:center;justify-content:center; width:44px;height:44px;flex:0 0 auto;padding:0; border:1px solid rgba(250,251,252,.22);border-radius:10px; background:none;cursor:pointer; } .dpk-hd-burger>span{display:block} .dpk-hd-burger i{ display:block;width:19px;height:1px;background:#FAFBFC; transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .2s ease,background .4s ease; } .dpk-hd-burger i+i{margin-top:5px} /* ---------- mobilni panel ---------- */ .dpk-mob{ position:fixed;inset:0;z-index:900;background:#0B1F33; display:flex;flex-direction:column; padding:22px clamp(20px,7vw,56px) 40px; opacity:0;visibility:hidden;pointer-events:none; clip-path:inset(0 0 100% 0); transition:opacity .42s ease,clip-path .58s cubic-bezier(.76,0,.24,1),visibility .42s; overflow-y:auto;overscroll-behavior:contain; } .dpk-mob[data-open="1"]{opacity:1;visibility:visible;pointer-events:auto;clip-path:inset(0 0 0 0)} .dpk-mob-top{display:flex;align-items:center;justify-content:space-between;gap:20px} .dpk-mob-top img{width:118px;height:auto;display:block} .dpk-mob-x{ width:44px;height:44px;flex:0 0 auto; border:1px solid rgba(250,251,252,.22);border-radius:10px;background:none; color:#FAFBFC;font-family:Jost,sans-serif;font-weight:300;font-size:22px;line-height:1;cursor:pointer; } .dpk-mob-nav{margin:auto 0;display:flex;flex-direction:column;gap:2px;padding:32px 0} .dpk-mob-h{ display:flex;align-items:center;gap:13px;padding:9px 0; font-family:Jost,sans-serif;font-weight:300;font-size:clamp(27px,7.6vw,40px); color:#FAFBFC;text-decoration:none; } .dpk-mob-h i{width:6px;height:6px;border-radius:50%;background:#C9A227;flex:0 0 auto} .dpk-mob-sub{list-style:none;margin:0 0 14px;padding:0 0 0 2px;display:flex;flex-direction:column;gap:2px} /* Red u ladici je ILI (klikabilno) ILI (u izradi) — ali oba iznutra sadrže još -ova (ikona + natpis + pilula „U izradi"). Zato selektori MORAJU gađati samo direktnu djecu
. Ranije je stajalo `.dpk-mob-sub span`, što je hvatalo i natpis unutar (pa su i klikabilne stavke bile prigušene na 34%) i samu pilulu (pa je dobila 14px i padding 8px 0 umjesto 8.5px i 2px 7px — tekst je zato izlazio izvan zlatnog okvira). */ .dpk-mob-sub>li>a, .dpk-mob-sub>li>span{ display:flex;align-items:center;gap:10px;padding:8px 0; font-family:Barlow,sans-serif;font-size:14px;letter-spacing:.02em; text-decoration:none; } /* Klikabilno je bijelo i time jasno odvojeno od onoga što još ne radi. */ .dpk-mob-sub>li>a{color:#FAFBFC} /* „U izradi" ostaje prigušeno — i sam red i natpis u njemu. */ .dpk-mob-sub>li>span, .dpk-mob-sub>li>span span:not(.dpk-nav-tag){color:rgba(250,251,252,.34)} .dpk-mob-sub .dpk-nav-ic{width:30px;height:30px;border-radius:8px} .dpk-mob-sub .dpk-nav-ic svg{width:15px;height:15px} /* ---------- responzivno ---------- */ @media(max-width:980px){ .dpk-nav{display:none} .dpk-hd-spacer{display:none} .dpk-hd-burger{display:flex} /* Orb je zamjena za traku na desktopu; na telefonu bi bio još jedan element preko kadra, pa traka jednostavno ode s ekrana. */ .dpk-hd-orb{display:none} /* Ponašanje je isto kao na desktopu — `data-collapsed` postavlja nav.js: unutar heroja skrol prema dolje sklanja traku, skrol prema gore je vraća, a od Sekcije 02 nadalje je trajno otključana. Razlikuje se samo prikaz: desktop skuplja traku u orb, telefon je izmakne izvan ekrana da kadar ostane čist. Prijelaz mora ići i po `transform`/`opacity` — osnovno pravilo animira samo boje. */ .dpk-hd{ transition:background .5s cubic-bezier(.4,0,.2,1),border-color .5s ease, box-shadow .5s ease, transform .42s cubic-bezier(.4,0,.2,1),opacity .32s ease; } .dpk-hd[data-collapsed="1"]{ transform:translateY(-100%); opacity:0; pointer-events:none; background:transparent!important; border-bottom-color:transparent!important; } /* Sadržaj trake ostaje na mjestu — miče se cijela traka, ne njeni dijelovi. */ .dpk-hd[data-collapsed="1"] .dpk-hd-in{opacity:1;transform:none} } @media(max-width:980px) and (prefers-reduced-motion:reduce){ .dpk-hd{transition:none} } /* ---------- smanjeno kretanje ---------- */ @media(prefers-reduced-motion:reduce){ .dpk-hd,.dpk-hd-in,.dpk-hd-orb,.dpk-nav-panel,.dpk-nav-hl, .dpk-nav-mi,.dpk-nav-ic,.dpk-mob,.dpk-hd-burger i{ transition-duration:.01ms!important; } .dpk-hd-orb:hover{transform:scale(1)} }