/* Kodirani svijet · naslovnica-sekcije.css (naslovnica HR i /en/): #odakle, #usluge, #vidljivost (specifikacija 24); 05 Video je u naslovnica-video.css, a Vidikovac (#radovi) u naslovnica-radovi.css. Pravila nose id sekcije. Osnovno stanje je završno; skriva se samo pod [data-ulaz="ceka"] (postavlja ga ulaz() u naslovnica-sekcije.js); bez JS-a, uz smanjeno gibanje i „Zaustavi animacije” atributa nema pa je sve vidljivo. */ /* 2 · Odakle krećete: smjer A „Tri polazišta u dolini” (Goranov izbor 25. 10. 2026.), #odakle .polazista-a; HTML (crtež, pločice, kviz) slaže tools/staze/odakle.mjs, a ponašanje postaviPolazista u naslovnica-sekcije.js. Boje crteža su varijable; noću ih miješa --noc (0–1, jedan broj na za heroj i ovu sekciju, naslovnica.js). Isticanje: poveznica N pod mišem, u fokusu ili dotaknuta postavlja --on:1 na svoju stazu, cilj i polazište; --netko:1 na korijenu povuče ostale. Sve tranzicije čitaju --on, pa nema JavaScripta za isticanje. Tekst polazišta i kviz stoje na papirnatim pločicama koje su i noću svijetle (osvijetljeni putokaz), pa tekst ne mijenja boju i kontrast je isti pri svakom --noc. */ #odakle .polazista-a{ --on:0; --netko:0; --pa-sv:0; --pa-crta:#4c554d; --pa-crta-tamna:#3e4640; --pa-greben:#87907d; --pa-izo:#d6dbcb; --pa-nebo:#cdd2c3; --pa-baza:#a6ad9b; --pa-brdo-1:#e2e7d8; --pa-brdo-2:#ecede2; --pa-brdo-3:#f4f3ea; --pa-dol-1:#eceee3; --pa-dol-2:#f3f3ea; --pa-dol-3:#faf9f1; --pa-more-1:#d3dfda; --pa-more-2:#e9eee6; --pa-valici:#b8c6bf; --pa-daleko:#c9cfc0; --pa-zid:#f4efe0; --pa-zid-sjena:#e7e0cc; --pa-krov:#d3dac8; --pa-krov-tamno:#b9c3ad; --pa-drvo:#ece5d1; --pa-drvo-tamno:#ddd4bb; --pa-daske:#cfc6ad; --pa-staklo:#dfe7df; --pa-unutra:#e8e7da; --pa-papir:#fbfaf3; --pa-redak:#a6ad9b; --pa-tlo-sjena:#e3e6d8; --pa-sm-sv:#e2e8d8; --pa-sm-sj:#8b9c83; --pa-sm-cr:#4f5d49; --pa-deblo:#8a7f6c; --pa-krosnja:#cdd5c1; --pa-sjena:#b5c0a7; --pa-kr-crta:#66715f; --pa-tenda:#f2a385; --pa-tenda-sv:#fbf6ec; --pa-kutija:#e8d9b8; --pa-traka:#bca77a; --pa-beton:#f2f3ea; --pa-metal:#d7dbd0; --pa-oznaka:#444c45; --pa-biljeska:#665e48; --pa-zarulja:#f7f6ee; --pa-sunce:#f6ecd0; --pa-kamen:#ece9de; --pa-kamen-crta:#9aa091; /* pločice: papir je i noću svijetao (topliji, kao pod lampom); tekst na njima je uvijek taman, a narančasti (--pa-nar, danju #ad310a, noću #a02d07) ima i na noćnom papiru #ebe2cb i ispod sloja zore kontrast iznad 4,5:1 */ --pa-ploca:#fdfcf7; --pa-ploca-rub:#cfd3c4; --pa-nar:#ad310a; margin-top:34px; } /* ---------- raspored: široko (od 1000 px) ---------- */ #odakle .pa-dolina-okvir{position:relative;container-type:inline-size} #odakle .pa-crtez{display:block;width:100%;height:auto;overflow:visible} #odakle .pa-crtez--usko{display:none} /* poveznice prekriju donji pojas crteža (polazišta), pa je cijelo polazište dio poveznice */ #odakle .pa-popis{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:-15cqw 0 0;padding:0;list-style:none} #odakle .pa-veza{position:relative;display:flex;flex-direction:column;align-items:center;height:100%;box-sizing:border-box;padding:calc(15cqw + 10px) clamp(8px,1.3cqw,20px) 4px;color:#272f2c;text-align:center;text-decoration:none;outline-offset:2px} #odakle .pa-veza:focus-visible{outline:3px solid var(--orange);outline-offset:2px} /* pločica polazišta: broj i cilj (kao u crtežu), rečenica, crta, staza sa strelicom */ #odakle .pa-ploca{position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1 0 auto;width:100%;max-width:27rem;box-sizing:border-box;padding:17px clamp(16px,1.9cqw,26px) 14px;background:var(--pa-ploca);border:1px solid var(--pa-ploca-rub);text-align:left;transition:border-color .25s,box-shadow .25s} #odakle .pa-broj{display:flex;align-items:center;gap:9px;margin:0 0 11px;font:600 11.5px/1.2 var(--pismo-mono,'Courier New',monospace);letter-spacing:.17em;color:#4f574f} #odakle .pa-broj::before{content:"";flex:none;width:9px;height:9px;box-sizing:border-box;border:2.5px solid var(--orange);border-radius:50%} #odakle .pa-broj b{font-weight:700;color:var(--pa-nar)} #odakle .pa-problem{display:block;margin:0 0 16px;font:560 clamp(1.45rem,2.2vw,2.1rem)/1.1 Archivo,Arial,sans-serif;letter-spacing:-.03em;color:#272f2c;text-wrap:balance} #odakle .pa-problem em{font:italic 500 1.05em/1 Fraunces,Georgia,serif;letter-spacing:-.012em;color:var(--pa-nar)} #odakle .pa-izlaz{display:flex;align-items:center;gap:10px;align-self:stretch;margin-top:auto;padding-top:12px;border-top:1px dashed #cdd1c2;font:600 16px/1.3 Archivo,Arial,sans-serif;color:#363b35;transition:color .25s} #odakle .pa-naziv{text-decoration:underline;text-decoration-color:#c3c8b8;text-decoration-thickness:1.5px;text-underline-offset:5px;transition:text-decoration-color .25s} #odakle .pa-rub{flex:none;width:13px;height:13px;box-sizing:border-box;border:3px solid var(--orange);border-radius:50%;background:#fffef8;transition:background .25s .4s} #odakle .pa-strelica{margin-left:auto;font-size:18px;color:var(--orange);transition:translate .3s cubic-bezier(.2,.8,.2,1)} /* kviz: putokaz-pločica s kompasom na raskrižju (i ona je noću svijetla) */ #odakle .pa-kviz{display:flex;justify-content:center;margin:30px 0 0;padding-top:22px;border-top:1px dashed #c9cebf} #odakle .pa-kviz a{display:inline-flex;align-items:center;gap:14px;min-height:44px;box-sizing:border-box;padding:7px 20px 7px 12px;background:var(--pa-ploca);border:1px solid var(--pa-ploca-rub);color:#363b35;font:400 16px/1.45 Archivo,Arial,sans-serif;text-decoration:none;transition:border-color .25s} #odakle .pa-kviz a:focus-visible{outline:3px solid var(--orange);outline-offset:2px} #odakle .pa-kviz b{color:var(--pa-nar);font-weight:600;text-decoration:underline;text-decoration-color:#ef542866;text-underline-offset:4px;transition:text-decoration-color .25s} #odakle .pa-kviz__strelica{display:inline-block;margin-left:6px;font-size:18px;line-height:1;color:var(--orange);transition:translate .25s} #odakle .pa-kviz__znak{flex:none;width:40px;height:48px;overflow:visible} #odakle .pa-kviz__put{fill:none;stroke:#a6ad9b;stroke-width:2;stroke-linecap:round;stroke-dasharray:.1 5} #odakle .pa-kviz__stup{fill:#ece5d1;stroke:#4c554d;stroke-width:1.2} #odakle .pa-kviz__ploca{fill:#ece5d1;stroke:#4c554d;stroke-width:1.3} #odakle .pa-kviz__lice{fill:#fff;stroke:#a6ad9b;stroke-width:1} #odakle .pa-kviz__igla{rotate:28deg;transform-box:view-box;transform-origin:22px 16px;transition:rotate .6s cubic-bezier(.3,1.6,.5,1)} #odakle .pa-kviz__igla-s{fill:var(--orange)} #odakle .pa-kviz__igla-j{fill:#272f2c} #odakle .pa-kviz__os{fill:#4c554d} #odakle .pa-kviz a:is(:hover,:focus-visible){border-color:var(--orange)} #odakle .pa-kviz a:is(:hover,:focus-visible) b{text-decoration-color:var(--pa-nar)} #odakle .pa-kviz a:is(:hover,:focus-visible) .pa-kviz__strelica{translate:3px -3px} #odakle .pa-kviz a:is(:hover,:focus-visible) .pa-kviz__igla{rotate:-152deg} /* ---------- isticanje: --on na stazi, cilju i polazištu poveznice pod mišem ili u fokusu ---------- */ #odakle .polazista-a:has([data-t="1"]:is(:hover,:focus-visible,.je-aktivna)) :is(.pa-trag--1,.pa-polaziste--1), #odakle .polazista-a:has([data-t="2"]:is(:hover,:focus-visible,.je-aktivna)) :is(.pa-trag--2,.pa-polaziste--2), #odakle .polazista-a:has([data-t="3"]:is(:hover,:focus-visible,.je-aktivna)) :is(.pa-trag--3,.pa-polaziste--3), #odakle .pa-veza:is(:hover,:focus-visible,.je-aktivna) :is(.pa-trag,.pa-polaziste){--on:1} #odakle .polazista-a:has(.pa-veza:is(:hover,:focus-visible,.je-aktivna)){--netko:1} #odakle .pa-trag{opacity:calc(1 - .6 * var(--netko) * (1 - var(--on)));transition:opacity .4s} #odakle .pa-polaziste{opacity:calc(1 - .35 * var(--netko) * (1 - var(--on)));transition:opacity .4s} /* pločica pod mišem: narančasti rub i traka na vrhu (unutarnja, ne sjena), puni prsten i strelica */ #odakle .pa-veza:is(:hover,:focus-visible,.je-aktivna) .pa-ploca{border-color:var(--orange);box-shadow:inset 0 3px 0 var(--orange)} #odakle .pa-veza:is(:hover,:focus-visible,.je-aktivna) .pa-izlaz{color:var(--pa-nar)} #odakle .pa-veza:is(:hover,:focus-visible,.je-aktivna) .pa-naziv{text-decoration-color:var(--orange)} #odakle .pa-veza:is(:hover,:focus-visible,.je-aktivna) .pa-rub{background:var(--orange)} #odakle .pa-veza:is(:hover,:focus-visible,.je-aktivna) .pa-strelica{translate:3px -3px} /* ---------- crtež: nebo, more, teren ---------- */ #odakle .pa-crtez *{vector-effect:none} #odakle .pa-nebo path{fill:none;stroke:var(--pa-nebo);stroke-width:1.2;stroke-linecap:round} #odakle .pa-nebo .pa-ptica{stroke:#8d947f} #odakle .pa-sunce{fill:var(--pa-sunce);stroke:var(--pa-nebo);stroke-width:1.2} #odakle .pa-zvijezde{fill:#f1ead0;opacity:0} #odakle .pa-mjesec-sjaj,#odakle .pa-krateri{opacity:0} #odakle .pa-krateri{fill:#d9d1b3} #odakle .pa-kompas path{fill:none;stroke:var(--pa-crta);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} #odakle .pa-kompas text{font:600 12px Archivo,Arial,sans-serif;fill:var(--pa-crta)} #odakle .pa-daleko{fill:none;stroke:var(--pa-daleko);stroke-width:1.1} #odakle .pa-horizont{fill:none;stroke:#b9c3b6;stroke-width:1.1} #odakle .pa-valici{fill:none;stroke:var(--pa-valici);stroke-width:1.1;stroke-linecap:round} #odakle .pa-trup{fill:var(--pa-papir);stroke:#5d665d;stroke-width:1.1} #odakle .pa-platno{fill:var(--pa-papir);stroke:#5d665d;stroke-width:1.1;stroke-linejoin:round} #odakle .pa-st-brdo-1{stop-color:var(--pa-brdo-1)} #odakle .pa-st-brdo-2{stop-color:var(--pa-brdo-2)} #odakle .pa-st-brdo-3{stop-color:var(--pa-brdo-3)} #odakle .pa-st-dol-1{stop-color:var(--pa-dol-1)} #odakle .pa-st-dol-2{stop-color:var(--pa-dol-2)} #odakle .pa-st-dol-3{stop-color:var(--pa-dol-3);stop-opacity:0} #odakle .pa-st-more-1{stop-color:var(--pa-more-1)} #odakle .pa-st-more-2{stop-color:var(--pa-more-2);stop-opacity:0} #odakle .pa-izohipse{fill:none;stroke:var(--pa-izo);stroke-width:1} #odakle .pa-greben{fill:none;stroke:var(--pa-greben);stroke-width:1.5;stroke-linejoin:round} #odakle .pa-dolina-crta,#odakle .pa-izo-dolina{fill:none;stroke:var(--pa-izo);stroke-width:1.1} #odakle .pa-dolina-staza{fill:none;stroke:var(--pa-baza);stroke-width:2;stroke-linecap:round;stroke-dasharray:.1 7} /* raslinje */ #odakle .pa-deblo{fill:var(--pa-deblo);stroke:var(--pa-sm-cr);stroke-width:1.1} #odakle .pa-sm-sv{fill:var(--pa-sm-sv)} #odakle .pa-sm-sj{fill:var(--pa-sm-sj)} #odakle .pa-sm-cr{fill:none;stroke:var(--pa-sm-cr);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} #odakle .pa-iglice{fill:none;stroke:var(--pa-sm-cr);stroke-width:.9;stroke-linecap:round;opacity:.55} #odakle .pa-smreka{transform-box:fill-box;transform-origin:50% 100%} #odakle .pa-ljulja-b{--a:-.8} #odakle .pa-ljulja-c{--a:.6} #odakle .pa-krosnja{fill:var(--pa-krosnja);stroke:var(--pa-kr-crta);stroke-width:1.2;stroke-linejoin:round} #odakle .pa-sjena{fill:var(--pa-sjena)} #odakle .pa-crta{fill:none;stroke:var(--pa-crta);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round} #odakle .pa-deblo-bor{stroke:var(--pa-kr-crta);stroke-width:1.6} #odakle .pa-trava{fill:none;stroke:#8d977f;stroke-width:1.1;stroke-linecap:round} #odakle .pa-kamen{fill:var(--pa-kamen);stroke:var(--pa-kamen-crta);stroke-width:1} /* polazišta i ciljevi: crte iste debljine na svakom mjerilu */ #odakle :is(.pa-polaziste,.pa-cilj,.pa-postaja,.pa-svjetiljka) :is(path,circle,ellipse){vector-effect:non-scaling-stroke} /* crte s pathLength (crtanje narančastog puta) moraju se mjeriti u istom mjerilu kao put, inače na 1920 px ostane komadić */ #odakle .pa-cilj path:is(.pa-sajla-put,.pa-paluba-put){vector-effect:none} #odakle .pa-tlo-sjena{fill:var(--pa-tlo-sjena)} #odakle .pa-dim{fill:none;stroke:#bfc5b6;stroke-width:1.4;stroke-linecap:round;opacity:.8} #odakle .pa-zid{fill:var(--pa-zid);stroke:var(--pa-crta);stroke-width:1.3;stroke-linejoin:round} #odakle .pa-zid-sjena{fill:var(--pa-zid-sjena)} #odakle .pa-krov{fill:var(--pa-krov);stroke:var(--pa-crta);stroke-width:1.3;stroke-linejoin:round} #odakle .pa-krov-tamno{fill:var(--pa-krov-tamno);stroke:var(--pa-crta);stroke-width:1.1;stroke-linejoin:round} #odakle .pa-staklo{fill:var(--pa-staklo)} #odakle .pa-unutra{fill:var(--pa-unutra)} #odakle .pa-tanko{stroke-width:.9} #odakle .pa-okvir{fill:var(--pa-drvo-tamno);stroke:var(--pa-crta);stroke-width:1.1} #odakle .pa-okvir-crta{fill:none;stroke:var(--pa-crta);stroke-width:1.4;stroke-linejoin:round} #odakle .pa-ekran{fill:var(--pa-papir);stroke:var(--pa-crta-tamna);stroke-width:1.2} #odakle .pa-ekran-traka{fill:none;stroke:#7b8471;stroke-width:2.2} #odakle .pa-ekran-blok{fill:#d7dfcf} #odakle .pa-redak{fill:none;stroke:var(--pa-redak);stroke-width:1} #odakle :is(.pa-telefon,.pa-telefon-slusalica){fill:var(--pa-crta-tamna)} #odakle .pa-zz path{fill:none;stroke:var(--pa-crta-tamna);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} #odakle .pa-ograda{fill:none;stroke:#8f8a76;stroke-width:1.3;stroke-linecap:round} #odakle .pa-drvo{fill:var(--pa-drvo);stroke:var(--pa-crta);stroke-width:1.3;stroke-linejoin:round} #odakle .pa-drvo-tamno{fill:var(--pa-drvo-tamno);stroke:var(--pa-crta);stroke-width:1.1} #odakle .pa-daske{fill:none;stroke:var(--pa-daske);stroke-width:1} #odakle .pa-kvaka,#odakle .pa-os{fill:var(--pa-crta)} #odakle .pa-reg{stroke:var(--pa-crta);stroke-width:1.1} #odakle .pa-reg--1{fill:#c9d2bd} #odakle .pa-reg--2{fill:#e6cfa3} #odakle .pa-reg--3{fill:#b4c3b7} #odakle .pa-reg--4{fill:#f0b39b} #odakle .pa-papir{fill:var(--pa-papir);stroke:var(--pa-crta);stroke-width:1.1;stroke-linejoin:round} #odakle .pa-sat-lice{fill:#fff;stroke:var(--pa-crta);stroke-width:1.4} #odakle .pa-kazaljka{fill:none;stroke:var(--orange);stroke-width:1.2;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 100%} #odakle .pa-list{fill:var(--pa-papir);stroke:var(--pa-crta);stroke-width:1;stroke-linejoin:round} #odakle .pa-metal{fill:var(--pa-metal);stroke:var(--pa-crta);stroke-width:1.2;stroke-linejoin:round} #odakle .pa-kotac{fill:var(--pa-papir);stroke:var(--pa-crta);stroke-width:1.2} #odakle .pa-uze-crta{fill:none;stroke:#8c8f80;stroke-width:.9} #odakle .pa-tenda{fill:var(--pa-tenda-sv)} #odakle .pa-tenda-traka{fill:var(--pa-tenda)} #odakle .pa-tenda-crta{fill:none;stroke:var(--pa-crta);stroke-width:1.3;stroke-linejoin:round} #odakle .pa-tenda-rub{fill:var(--pa-tenda);stroke:var(--pa-crta);stroke-width:1.2;stroke-linejoin:round} #odakle .pa-kutija{fill:var(--pa-kutija);stroke:var(--pa-crta);stroke-width:1.1;stroke-linejoin:round} #odakle .pa-traka{fill:none;stroke:var(--pa-traka);stroke-width:1.6} #odakle .pa-paket-tijelo{fill:var(--orange);stroke:var(--pa-crta-tamna);stroke-width:1.1} #odakle .pa-paket-traka{fill:none;stroke:#fff1e8;stroke-width:1.3} #odakle .pa-narancasto{fill:var(--orange)} /* svjetla: fenjeri, ulične svjetiljke, lampice, žarulje (danju ugašene, noću tople) i njihov sjaj (samo noću) */ #odakle .pa-fenjer-kapa,#odakle .pa-lampa-glava{fill:var(--pa-crta-tamna)} #odakle .pa-fenjer-staklo{fill:var(--pa-zarulja);stroke:var(--pa-crta);stroke-width:1} #odakle .pa-stup-sv{fill:none;stroke:var(--pa-crta);stroke-width:1.4;stroke-linecap:round} #odakle .pa-zaruljica{fill:var(--pa-zarulja);stroke:var(--pa-crta);stroke-width:.7} #odakle .pa-lampice .pa-zaruljica{stroke-width:.6} #odakle .pa-sjaj{opacity:var(--pa-sv);mix-blend-mode:screen;pointer-events:none} #odakle .pa-noc-kuca{opacity:var(--pa-sv)} #odakle .pa-prozorcic{fill:#ffcf7a} #odakle .pa-kuca-obris{fill:#121915;stroke:#4a584e;stroke-width:.6;stroke-linejoin:round} #odakle .pa-odsjaj{fill:none;stroke:#f0b85a;stroke-width:1.5;stroke-linecap:round;opacity:calc(var(--pa-sv) * .7)} #odakle .pa-jedro-svjetlo{opacity:var(--pa-sv)} /* ciljevi: toranj, žičara, most */ #odakle .pa-toranj :is(path,ellipse){stroke:var(--pa-crta);stroke-width:1} #odakle .pa-to-stopa{fill:#4d5c4318;stroke:none!important} #odakle .pa-to-pristup{fill:#e6e4d7} #odakle .pa-to-trup{fill:var(--pa-beton)} #odakle .pa-to-sav{fill:none;stroke:#adb09f!important} #odakle .pa-to-vrata{fill:#42493d} #odakle .pa-to-zdjela{fill:#d8dace} #odakle .pa-to-paluba{fill:#eaeadd} #odakle .pa-to-prozori{fill:#a8b2a1} #odakle .pa-to-prozori-svjetlo{fill:#f0b85a;stroke:none!important;opacity:max(var(--on), var(--pa-sv));transition:opacity .5s .55s} #odakle .pa-to-pregrade{fill:none;stroke:#f6f3e8!important;stroke-width:1.7!important;vector-effect:none!important} #odakle .pa-to-vrh{fill:#e2e2d5} #odakle .pa-to-gornji{fill:#e9e8dc} #odakle .pa-to-ograda{fill:none} #odakle .pa-to-jarbol{fill:#f4f1e8} #odakle .pa-to-trake{fill:none;stroke:var(--orange)!important;stroke-width:6!important;vector-effect:none!important} #odakle .pa-to-halo{opacity:max(calc(var(--on) * .95), calc(var(--pa-sv) * .7));transition:opacity .6s .5s;stroke:none!important} #odakle .pa-to-crveno,#odakle .pa-crveno-tocka{fill:#c9533c;stroke:none!important} #odakle .pa-to-signal{opacity:var(--on);transition:opacity .4s .7s} #odakle .pa-val{fill:none;stroke:var(--orange)!important;stroke-width:3.4!important;stroke-linecap:round;vector-effect:none!important;transform-box:fill-box;transform-origin:center} #odakle .pa-val--2{opacity:.55} #odakle .pa-stup{fill:none;stroke:var(--pa-crta);stroke-width:1.2;stroke-linejoin:round} #odakle .pa-sajla{fill:none;stroke:#4f584d;stroke-width:1.2} #odakle .pa-sajla--tanka{stroke-width:.9;opacity:.6} #odakle .pa-kab-tijelo{fill:#f6f2e3;stroke:#333e33;stroke-width:1.2} #odakle .pa-kab-okna{fill:#b9c6b8;stroke:#333e33;stroke-width:.9;transition:fill .5s .6s} #odakle .pa-kab-pregrada{fill:none;stroke:#f6f2e3;stroke-width:1.4} #odakle .pa-kabina-hod{transform:translate(calc(var(--dx) * var(--on)),calc(var(--dy) * var(--on)));transition:transform 1.4s cubic-bezier(.45,.05,.3,1) .35s} #odakle .pa-zatege{fill:none;stroke:#59625a;stroke-width:.7} #odakle .pa-beton{fill:var(--pa-beton);stroke:var(--pa-crta);stroke-width:1.2;stroke-linejoin:round} #odakle .pa-paluba{fill:#eceee4;stroke:var(--pa-crta);stroke-width:1.3;stroke-linejoin:round} #odakle .pa-ograda-mosta{fill:none;stroke:#68705f;stroke-width:.8} #odakle .pa-most-paket .pa-paket{scale:var(--on);transform-box:fill-box;transform-origin:50% 100%;transition:scale .4s cubic-bezier(.3,1.7,.5,1) 1.1s} #odakle .pa-most-svjetla .pa-zaruljica{stroke-width:.5} /* postaje žičare: noge, stupovi krova, veliki kotač */ #odakle .pa-noge{fill:none;stroke:var(--pa-crta);stroke-width:1.1;stroke-linecap:round} #odakle .pa-stup-postaje{fill:none;stroke:var(--pa-crta-tamna);stroke-width:1.7;stroke-linecap:square} #odakle .pa-kotac-veliki{fill:var(--pa-metal);stroke:var(--pa-crta-tamna);stroke-width:1.4} #odakle .pa-kotac-obod{fill:none;stroke:var(--pa-crta);stroke-width:.8} #odakle .pa-kotac-zbice{fill:none;stroke:var(--pa-crta);stroke-width:.8} #odakle .pa-atika{fill:var(--pa-zid-sjena)} #odakle .pa-mk-znak{fill:none;stroke:var(--orange);stroke-width:1.6} #odakle .pa-rub-perona{fill:none;stroke:var(--orange);stroke-width:1.3;stroke-dasharray:4 3} /* staze i markacije */ #odakle .pa-put-baza{fill:none;stroke:var(--pa-baza);stroke-width:2.3;stroke-linecap:round;stroke-dasharray:.1 7} #odakle :is(.pa-put,.pa-sajla-put,.pa-paluba-put){fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1} /* u mirovanju se vidi cijeli narančasti put (tanji, blaži); pod mišem, u fokusu ili na dodir preko njega se iscrta puni */ #odakle .pa-put-mir{fill:none;stroke:var(--orange);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0;opacity:.62} #odakle .pa-put{stroke-dashoffset:calc(1 - var(--on));opacity:var(--on);transition:stroke-dashoffset .8s cubic-bezier(.45,.1,.25,1),opacity 0s linear calc((1 - var(--on)) * .8s)} #odakle .pa-sajla-put{stroke-width:2.2;stroke-dashoffset:calc(1 - var(--on));transition:stroke-dashoffset .9s cubic-bezier(.45,.1,.25,1) .45s} #odakle .pa-paluba-put{stroke-width:2.6;stroke-dashoffset:calc(1 - var(--on));transition:stroke-dashoffset .8s cubic-bezier(.45,.1,.25,1) .55s} #odakle .pa-mk-unutra{scale:var(--on);transform-box:fill-box;transform-origin:center;transition:scale .35s cubic-bezier(.3,1.8,.5,1) calc(.2s + var(--i) * .25s)} #odakle .pa-mk-bijelo{fill:#fffef8} #odakle .pa-mk-prsten{fill:none;stroke:var(--orange);stroke-width:2.6} #odakle .pa-start-halo{fill:var(--orange);opacity:calc(var(--on) * .16);transition:opacity .3s} #odakle .pa-start-tocka{fill:var(--orange);scale:var(--on);transform-box:fill-box;transform-origin:center;transition:scale .25s} /* polazište reagira samo unutarnjim slojevima (poveznica se ne miče) */ #odakle .pa-zvoni{opacity:var(--on);transition:opacity .3s .2s} #odakle .pa-zvoni path{fill:none;stroke:var(--orange);stroke-width:1.4;stroke-linecap:round} #odakle .pa-zz{opacity:calc(1 - var(--on));transition:opacity .3s} #odakle .pa-polaziste .pa-paket{translate:0 calc(var(--on) * -3px);transition:translate .3s cubic-bezier(.3,1.8,.5,1)} /* natpisi u crtežu */ #odakle .pa-oznake>path{fill:none;stroke:#7e8773;stroke-width:1;opacity:.75} #odakle .pa-oznaka-tocka{fill:var(--orange)} #odakle .pa-oznaka{font:600 12px var(--pismo-mono,'Courier New',monospace);letter-spacing:2.5px;fill:var(--pa-oznaka)} #odakle .pa-oznaka-br{fill:#a83209} /* bilješka „Vi ste negdje ovdje.” (HTML, ukras): u dolini desno od kućice, cijela u prvom stupcu */ #odakle .pa-biljeska{position:absolute;left:23.6%;top:33.4cqw;width:9.2cqw;font:italic max(13.5px,1.36cqw)/1.12 Georgia,serif;color:var(--pa-biljeska);text-wrap:balance;pointer-events:none} /* ---------- male petlje: samo u kadru, uz dopušten pokret ---------- */ @media (prefers-reduced-motion:no-preference){ /* vjetar: smreke su mirne; svakih 14 pa 20 s nalet (oko 1,9 s) prođe šumom slijeva nadesno (--d iz crteža) */ html:not(.bez-petlji) #odakle .je-u-kadru .pa-smreka{animation:pa-nalet 34s ease-in-out var(--d,0s) infinite} html:not(.bez-petlji) #odakle .je-u-kadru .pa-zz path{animation:pa-zz 3.2s ease-in-out infinite} html:not(.bez-petlji) #odakle .je-u-kadru .pa-zz path+path{animation-delay:.5s} html:not(.bez-petlji) #odakle .je-u-kadru .pa-dim{animation:pa-dim 4s ease-out infinite} html:not(.bez-petlji) #odakle .je-u-kadru .pa-kazaljka{animation:pa-sat 6s linear infinite} html:not(.bez-petlji) #odakle .je-u-kadru .pa-list{animation:pa-list 4.6s ease-in-out infinite alternate} html:not(.bez-petlji) #odakle .je-u-kadru .pa-list+.pa-list{animation-duration:5.4s;animation-delay:-1.4s} html:not(.bez-petlji) #odakle .je-u-kadru .pa-jedro{animation:pa-plovi 8s ease-in-out infinite alternate} html:not(.bez-petlji) #odakle .je-u-kadru .pa-zvoni{animation:pa-zvoni .5s ease-in-out infinite} html:not(.bez-petlji) #odakle .je-u-kadru .pa-val{animation:pa-val 1.8s ease-out infinite} html:not(.bez-petlji) #odakle .je-u-kadru .pa-val--2{animation-delay:.5s} /* noću: zvijezde trepere, crveno svjetlo tornja trepće */ html.sv-noc:not(.bez-petlji) #odakle .je-u-kadru .pa-zvijezde circle{animation:pa-trepni 3.6s ease-in-out infinite} html.sv-noc:not(.bez-petlji) #odakle .je-u-kadru .pa-zvijezde circle:nth-child(3n+1){animation-delay:-1.2s} html.sv-noc:not(.bez-petlji) #odakle .je-u-kadru .pa-zvijezde circle:nth-child(3n+2){animation-delay:-2.4s} html.sv-noc:not(.bez-petlji) #odakle .je-u-kadru .pa-trepce{animation:pa-trepce 2.4s ease-in-out infinite} } @keyframes pa-nalet{0%,17%,22.5%,58%,63.5%,100%{rotate:0deg}18.5%,59.5%{rotate:calc(var(--a,1) * 1.4deg)}20%,61%{rotate:calc(var(--a,1) * -.5deg)}21.3%,62.3%{rotate:calc(var(--a,1) * .2deg)}} @keyframes pa-dim{0%{translate:0 2px;opacity:0}30%{opacity:.8}100%{translate:2px -6px;opacity:0}} @keyframes pa-zz{0%,100%{translate:0 0;opacity:1}50%{translate:1px -3px;opacity:.55}} @keyframes pa-sat{to{rotate:360deg}} @keyframes pa-list{to{translate:-3px -4px;rotate:-6deg}} @keyframes pa-plovi{to{translate:16px 0}} @keyframes pa-zvoni{0%,100%{rotate:-6deg}50%{rotate:6deg}} @keyframes pa-val{from{scale:.8}to{scale:1.15}} @keyframes pa-trepni{0%,100%{opacity:1}50%{opacity:.35}} @keyframes pa-trepce{0%,100%{opacity:var(--pa-sv)}45%{opacity:calc(var(--pa-sv) * .25)}55%{opacity:var(--pa-sv)}} #odakle .pa-zvoni,#odakle .pa-list{transform-box:fill-box;transform-origin:center} /* ---------- ulazak u kadar (ulaz() u naslovnica-sekcije.js postavlja data-ulaz samo uz dopušten pokret) ---------- */ #odakle .polazista-a[data-ulaz="ceka"] :is(.pa-cilj,.pa-oznake){opacity:0} #odakle .polazista-a[data-ulaz="ceka"] .pa-polaziste{opacity:0;translate:0 10px} #odakle .polazista-a[data-ulaz="ceka"] :is(.pa-put-baza,.pa-dolina-staza,.pa-start){opacity:0} #odakle .polazista-a[data-ulaz="ceka"] .pa-put-mir{stroke-dashoffset:1} #odakle .polazista-a[data-ulaz="ceka"] .pa-ploca{opacity:0;translate:0 12px} #odakle .polazista-a[data-ulaz="ceka"] .pa-kviz{opacity:0} #odakle .polazista-a[data-ulaz="ide"] .pa-cilj{transition:opacity .9s .15s} #odakle .polazista-a[data-ulaz="ide"] .pa-oznake{transition:opacity .8s 1.6s} #odakle .polazista-a[data-ulaz="ide"] .pa-polaziste--1{transition:opacity .6s .45s,translate .7s cubic-bezier(.2,.8,.2,1) .45s} #odakle .polazista-a[data-ulaz="ide"] .pa-polaziste--2{transition:opacity .6s .6s,translate .7s cubic-bezier(.2,.8,.2,1) .6s} #odakle .polazista-a[data-ulaz="ide"] .pa-polaziste--3{transition:opacity .6s .75s,translate .7s cubic-bezier(.2,.8,.2,1) .75s} #odakle .polazista-a[data-ulaz="ide"] :is(.pa-put-baza,.pa-dolina-staza){transition:opacity .9s .9s} #odakle .polazista-a[data-ulaz="ide"] .pa-start{transition:opacity .4s 1.1s} #odakle .polazista-a[data-ulaz="ide"] .pa-put-mir{transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.3,1) calc(1.2s + var(--i,0) * .2s)} #odakle .polazista-a[data-ulaz="ide"] .pa-ploca{transition:opacity .5s calc(1.1s + var(--i) * .15s),translate .7s cubic-bezier(.2,.8,.2,1) calc(1.1s + var(--i) * .15s)} #odakle .polazista-a[data-ulaz="ide"] .pa-kviz{transition:opacity .6s 1.9s} #odakle .polazista-a.je-stani,#odakle .polazista-a.je-stani *{transition:none!important} /* ---------- noć: jedan --noc (s ) za heroj i sekciju ---------- Noć traje dok se gleda heroj i cijela sekcija; svane tek kad se sekcija napušta (svjetlo() u naslovnica.js: dno sekcije je na dnu ekrana, a njezin naslov iznad zaglavlja), kroz dvije trećine visine ekrana. Svitanje ide redom: nebo (papir sekcije) svijetli s --noc i dobije topli sjaj zore (--zora), zemlja i predmeti u crtežu kasne (--pa-n), pa se svjetla gase kasnije (--pa-sv); tako sredina svitanja nije siva magla, nego tamna brda pred svijetlim toplim nebom. Naslov i uvod prelaze strmije (--pa-t); svitanje ih nikad ne zatekne na ekranu. Tekst polazišta i kviza je na svijetlim pločicama, pa ga --noc ne dira. */ html.sv-noc #odakle{ --pa-t:clamp(0,(var(--noc,0) - .5) * 5 + .5,1); --ink:color-mix(in oklab,#e9ece3 calc(var(--pa-t) * 100%),#272f2c); --muted:color-mix(in oklab,#a3ae9f calc(var(--pa-t) * 100%),#647067); color:var(--ink); /* gornji rub u tonu dna heroja (prije u naslovnica-sljeme.css), da spoj nema svijetle crte */ border-top-color:color-mix(in oklab,#161e1a calc(var(--noc,0) * 100%),#cbcfc1); /* odozdo prema gore: meki prijelaz prema danjoj #usluge (noć → topli sumrak → svijetla zora; danju ga nema), topli sjaj zore iza brda (najjači na pola svitanja), a vrh u tonu heroja (njegov noćni sloj leži na --paper) */ --pa-papir-s:color-mix(in oklab,#161e1a calc(var(--noc,0) * 100%),#faf9f1); background: linear-gradient(180deg,transparent calc(100% - 112px),color-mix(in srgb,#4a3830 calc(var(--noc,0) * 100%),#faf9f1) calc(100% - 74px),color-mix(in srgb,#d9a074 calc(var(--noc,0) * 100%),#faf9f1) calc(100% - 30px),var(--pa-zora)), radial-gradient(ellipse 70% 26% at 60% 47%,color-mix(in srgb,#f6ad72 calc(var(--zora,0) * 62%),transparent),transparent 74%), /* svod u svitanju: gore hladniji (sivoplav), dolje topliji; --zora je 0 u punoj noći i danju */ linear-gradient(180deg,color-mix(in srgb,#161e1a calc(var(--noc,0) * 100%),#f2f1e7),var(--pa-papir-s) 56px,color-mix(in oklab,var(--pa-papir-s),#8d93b3 calc(var(--zora,0) * 34%)) 24%,color-mix(in oklab,var(--pa-papir-s),#e59a66 calc(var(--zora,0) * 32%)) 62%); } /* #usluge je uvijek danju: zora se u njoj pretopi u papir u prvih 44 px, iznad natpisa „Karta putovanja” */ html.sv-noc #usluge{background-image:linear-gradient(180deg,var(--pa-zora),#faf9f1 44px)} /* sloj zore (.sv-zora, soft-light) preko natpisa „Karta putovanja” spusti sivu #647067 na oko 4,2:1; dok je noć upaljena, natpis je tamniji */ html.sv-noc #usluge .section-kicker{color:#4f5951} /* boja na samom spoju: noću svijetla topla zora, danju papir */ html.sv-noc :is(#odakle,#usluge){--pa-zora:color-mix(in srgb,#f3d9bd calc(var(--noc,0) * 100%),#faf9f1)} /* noć u crtežu: iste varijable, pomiješane s noćnim bojama; zemlja i predmeti prema --pa-n (kasni za nebom), nebo prema --noc; svjetla se pale kad padne mrak, a gase tek kad zemlja posvijetli (--pa-sv); obronci i dolina u svitanju dobiju malo toplog svjetla (--zora) */ html.sv-noc #odakle .polazista-a{ --pa-n:clamp(0,var(--noc,0) * 1.6,1); --pa-sv:clamp(0,(var(--pa-n) - .25) * 2,1); /* natpisi u crtežu (na nebu) i bilješka (u dolini): boja skoči na pola prijelaza svoje podloge (--pa-t prema --noc, --pa-tn prema --pa-n), a oko toga izblijede (natpisi za --noc 0,12–0,88, bilješka za --pa-n 0,1–0,9), pa nikad nisu sivi na sivom ni preko toplog sjaja zore */ --pa-tn:clamp(0,(var(--pa-n) - .5) * 5 + .5,1); --pa-vid:clamp(0,(max(var(--noc,0) - .5,.5 - var(--noc,0)) - .26) * 8.33,1); --pa-vidn:clamp(0,(max(var(--pa-n) - .5,.5 - var(--pa-n)) - .25) * 6.67,1); --pa-crta:color-mix(in oklab,#9aa894 calc(var(--pa-n) * 100%),#4c554d); --pa-crta-tamna:color-mix(in oklab,#c3ccbd calc(var(--pa-n) * 100%),#3e4640); --pa-greben:color-mix(in oklab,#6f7f71 calc(var(--pa-n) * 100%),#87907d); --pa-izo:color-mix(in oklab,#2b3830 calc(var(--pa-n) * 100%),#d6dbcb); --pa-nebo:color-mix(in oklab,#3c4a41 calc(var(--noc,0) * 100%),#cdd2c3); --pa-baza:color-mix(in oklab,#5d6b60 calc(var(--pa-n) * 100%),#a6ad9b); --pa-brdo-1:color-mix(in oklab,color-mix(in oklab,#24322b calc(var(--pa-n) * 100%),#e2e7d8),#d8a47c calc(var(--zora,0) * 26%)); --pa-brdo-2:color-mix(in oklab,color-mix(in oklab,#1d2722 calc(var(--pa-n) * 100%),#ecede2),#d8a47c calc(var(--zora,0) * 18%)); --pa-brdo-3:color-mix(in oklab,#18201c calc(var(--pa-n) * 100%),#f4f3ea); --pa-dol-1:color-mix(in oklab,color-mix(in oklab,#1e2823 calc(var(--pa-n) * 100%),#eceee3),#d8a47c calc(var(--zora,0) * 18%)); --pa-dol-2:color-mix(in oklab,#19221d calc(var(--pa-n) * 100%),#f3f3ea); --pa-dol-3:color-mix(in oklab,#161e1a calc(var(--pa-n) * 100%),#faf9f1); --pa-more-1:color-mix(in oklab,#1f2c2b calc(var(--pa-n) * 100%),#dbe4df); --pa-more-2:color-mix(in oklab,#18211e calc(var(--pa-n) * 100%),#edf0e8); --pa-valici:color-mix(in oklab,#3d4f4a calc(var(--pa-n) * 100%),#c3cec7); --pa-daleko:color-mix(in oklab,#36443b calc(var(--pa-n) * 100%),#c9cfc0); --pa-zid:color-mix(in oklab,#3a453d calc(var(--pa-n) * 100%),#f4efe0); --pa-zid-sjena:color-mix(in oklab,#2f3931 calc(var(--pa-n) * 100%),#e7e0cc); --pa-krov:color-mix(in oklab,#2e3a32 calc(var(--pa-n) * 100%),#d3dac8); --pa-krov-tamno:color-mix(in oklab,#263029 calc(var(--pa-n) * 100%),#b9c3ad); --pa-drvo:color-mix(in oklab,#4a4538 calc(var(--pa-n) * 100%),#ece5d1); --pa-drvo-tamno:color-mix(in oklab,#3c382e calc(var(--pa-n) * 100%),#ddd4bb); --pa-daske:color-mix(in oklab,#5c5545 calc(var(--pa-n) * 100%),#cfc6ad); --pa-staklo:color-mix(in oklab,#f0b85a calc(var(--pa-sv) * 100%),#dfe7df); --pa-unutra:color-mix(in oklab,#d9a24f calc(var(--pa-sv) * 100%),#e8e7da); --pa-papir:color-mix(in oklab,#d9d5c0 calc(var(--pa-n) * 100%),#fbfaf3); --pa-redak:color-mix(in oklab,#8d8a76 calc(var(--pa-n) * 100%),#a6ad9b); --pa-tlo-sjena:color-mix(in oklab,#0e1411 calc(var(--pa-n) * 100%),#e3e6d8); --pa-sm-sv:color-mix(in oklab,#3c4b40 calc(var(--pa-n) * 100%),#e2e8d8); --pa-sm-sj:color-mix(in oklab,#26332b calc(var(--pa-n) * 100%),#8b9c83); --pa-sm-cr:color-mix(in oklab,#93a58c calc(var(--pa-n) * 100%),#4f5d49); --pa-deblo:color-mix(in oklab,#4b4337 calc(var(--pa-n) * 100%),#8a7f6c); --pa-krosnja:color-mix(in oklab,#3c4b40 calc(var(--pa-n) * 100%),#cdd5c1); --pa-sjena:color-mix(in oklab,#26332b calc(var(--pa-n) * 100%),#b5c0a7); --pa-kr-crta:color-mix(in oklab,#93a58c calc(var(--pa-n) * 100%),#66715f); --pa-tenda:color-mix(in oklab,#b4583c calc(var(--pa-n) * 100%),#f2a385); --pa-tenda-sv:color-mix(in oklab,#4a4538 calc(var(--pa-n) * 100%),#fbf6ec); --pa-kutija:color-mix(in oklab,#5a5140 calc(var(--pa-n) * 100%),#e8d9b8); --pa-traka:color-mix(in oklab,#7c6f52 calc(var(--pa-n) * 100%),#bca77a); --pa-beton:color-mix(in oklab,#414d43 calc(var(--pa-n) * 100%),#f2f3ea); --pa-metal:color-mix(in oklab,#4d5850 calc(var(--pa-n) * 100%),#d7dbd0); --pa-oznaka:color-mix(in oklab,#c3ccbd calc(var(--pa-t) * 100%),#444c45); --pa-biljeska:color-mix(in oklab,#d2c8a6 calc(var(--pa-tn) * 100%),#665e48); --pa-zarulja:color-mix(in oklab,#ffd27a calc(var(--pa-sv) * 100%),#f7f6ee); --pa-sunce:color-mix(in oklab,#efe6c8 calc(var(--noc,0) * 100%),#f6ecd0); --pa-kamen:color-mix(in oklab,#36413a calc(var(--pa-n) * 100%),#ece9de); --pa-kamen-crta:color-mix(in oklab,#5f6c62 calc(var(--pa-n) * 100%),#9aa091); /* pločice noću: topliji, malo tamniji papir (ne najsvjetlija stvar na ekranu); tekst ostaje taman */ --pa-ploca:color-mix(in oklab,#ebe2cb calc(var(--noc,0) * 100%),#fdfcf7); --pa-ploca-rub:color-mix(in oklab,#b7a57a calc(var(--noc,0) * 100%),#cfd3c4); --pa-nar:color-mix(in oklab,#a02d07 calc(var(--noc,0) * 100%),#ad310a); } html.sv-noc #odakle .pa-oznake{opacity:var(--pa-vid)} html.sv-noc #odakle .pa-biljeska{opacity:var(--pa-vidn)} html.sv-noc #odakle :is(.pa-zvijezde,.pa-mjesec-sjaj){opacity:var(--noc,0)} html.sv-noc #odakle .pa-krateri{opacity:calc(var(--noc,0) * .55)} html.sv-noc #odakle .pa-sunce{stroke:color-mix(in oklab,#e6dcb8 calc(var(--noc,0) * 100%),var(--pa-nebo))} html.sv-noc #odakle .pa-svjetlo{filter:drop-shadow(0 0 calc(var(--pa-sv) * 5px) #f0b85acc)} html.sv-noc #odakle .pa-kabina{filter:drop-shadow(0 0 calc(var(--pa-sv) * 5px) #f5c26b99)} html.sv-noc #odakle .pa-kab-okna{fill:color-mix(in oklab,#f6cf86 calc(var(--pa-sv) * 100%),#b9c6b8)} html.sv-noc #odakle :is(.pa-to-crveno,.pa-crveno-tocka){fill:color-mix(in oklab,#ff5236 calc(var(--pa-sv) * 100%),#c9533c)} html.sv-noc #odakle :is(.pa-to-pristup,.pa-to-zdjela,.pa-to-paluba,.pa-to-vrh,.pa-to-gornji,.pa-to-jarbol,.pa-kab-tijelo,.pa-paluba,.pa-ekran,.pa-sat-lice,.pa-mk-bijelo){fill:color-mix(in oklab,#3a453d calc(var(--pa-n) * 100%),#ecebdf)} html.sv-noc #odakle :is(.pa-sajla,.pa-zatege,.pa-kab-tijelo,.pa-kab-okna){stroke:color-mix(in oklab,#a7b4a1 calc(var(--pa-n) * 100%),#4f584d)} html.sv-noc #odakle .pa-oznaka-br{fill:color-mix(in oklab,#ff9b70 calc(var(--pa-t) * 100%),#a83209)} html.sv-noc #odakle .pa-kviz{border-top-color:color-mix(in oklab,#3e4b42 calc(var(--noc,0) * 100%),#c9cebf)} /* pločice noću: tanki jantarni sjaj okolo, kao putokaz pod lampom (ne sjena kartice) */ html.sv-noc #odakle :is(.pa-ploca,.pa-kviz a){box-shadow:0 0 14px -4px color-mix(in srgb,#f0b85a calc(var(--pa-sv) * 50%),transparent)} html.sv-noc #odakle .pa-veza:is(:hover,:focus-visible,.je-aktivna) .pa-ploca{box-shadow:inset 0 3px 0 var(--orange),0 0 14px -4px color-mix(in srgb,#f0b85a calc(var(--pa-sv) * 50%),transparent)} /* ---------- tablet (560–999 px): polazišta u redovima, prizor lijevo, pločica desno ---------- */ @media (max-width:999px){ #odakle :is(.pa-crtez--siroko,.pa-biljeska){display:none} #odakle .pa-crtez--usko{display:block;width:100%} #odakle .pa-popis{display:block;margin:0} #odakle .pa-stavka+.pa-stavka{margin-top:18px;padding-top:18px;border-top:1px dashed #d3d7c9} #odakle .pa-veza{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"crtez ploca";align-items:center;column-gap:clamp(18px,4vw,40px);padding:0 0 4px;text-align:left} #odakle .pa-crtez--usko{grid-area:crtez;align-self:end} #odakle .pa-ploca{grid-area:ploca;max-width:none;flex:none} #odakle .pa-problem{font-size:clamp(1.4rem,2.9vw,1.75rem)} #odakle .pa-kviz{margin-top:24px} html.sv-noc #odakle .pa-stavka+.pa-stavka{border-top-color:color-mix(in oklab,#2e3a32 calc(var(--noc,0) * 100%),#d3d7c9)} } /* ---------- mobitel (do 559 px): prizor iznad pločice ---------- */ @media (max-width:559px){ #odakle .polazista-a{margin-top:26px} #odakle .pa-crtez--usko{width:calc(100% + 8px);margin:0 -4px 0} #odakle .pa-stavka+.pa-stavka{margin-top:24px;padding-top:20px} #odakle .pa-veza{display:flex;flex-direction:column;align-items:stretch;padding:0 0 2px} #odakle .pa-ploca{margin-top:-2px;padding:15px 16px 13px} #odakle .pa-problem{font-size:1.5rem;line-height:1.14;margin-bottom:14px} #odakle .pa-kviz{justify-content:flex-start;margin-top:26px} #odakle .pa-kviz a{font-size:15px;gap:12px;padding:6px 14px 6px 10px} } /* natpisi u crtežu malo veći dok je dolina uža od 1300 px, da se čitaju */ @media (min-width:1000px) and (max-width:1300px){ #odakle .pa-oznaka{font-size:14px;letter-spacing:2px} } @media (prefers-reduced-motion:reduce){ #odakle .polazista-a,#odakle .polazista-a *{transition:none!important;animation:none!important} } html.bez-petlji #odakle .polazista-a,html.bez-petlji #odakle .polazista-a *{transition:none!important;animation:none!important} /* ================================================================ Pet staza (#usluge): putokaz i dalekozor */ #usluge{--st-nar:#b54322;--st-sjena:#d4dacb;--st-siva:#59645b;--vid-h:.625;--vis:150px} /* putokaz: stup s markacijom i pet dasaka (ime i vrijeme hoda, kao na pravom putokazu) */ #usluge .staze__putokaz{position:relative;display:block;max-width:580px;padding:46px 0} #usluge .staze__stup{position:absolute;left:24px;top:0;bottom:9px;z-index:0;width:22px;border:1.6px solid var(--ink);border-bottom:0;border-radius:11px 11px 0 0;background:linear-gradient(90deg,#d9d5c3,#f4f1e3 42%,#dfdbca);transform-origin:50% 100%;transition:transform .75s cubic-bezier(.2,.8,.2,1) .05s} #usluge .staze__stup::after{content:"";position:absolute;left:6px;top:40px;bottom:30px;width:1px;background:rgb(39 47 44/.18)} #usluge .staze__stup-mk{position:absolute;left:50%;top:12px;width:18px;height:18px;margin-left:-9px;overflow:visible} #usluge .staze__stup-mk circle{fill:#fff;stroke:var(--orange);stroke-width:3.4;stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset .7s cubic-bezier(.45,0,.2,1) .55s} #usluge .staze__tlo{position:absolute;left:-48px;bottom:0;z-index:0;width:170px;height:34px;max-width:none;overflow:visible;transition:opacity .6s} #usluge .staze__tlo path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} #usluge .staze__tlo .k{fill:var(--sage);stroke-width:1.3} #usluge .staze__tlo .t{stroke:var(--muted);stroke-width:1.2} #usluge .staze__tlo .i{stroke:var(--line);stroke-width:1} #usluge .staze__daske{position:relative;z-index:1;display:grid;gap:18px;margin:0;padding:0 0 0 10px;list-style:none} #usluge .staze__daske>li{position:relative;transform-origin:30px 50%} #usluge .staze__daska{position:relative;isolation:isolate;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;column-gap:14px;min-height:64px;padding:9px 50px 9px 44px;color:var(--ink);rotate:var(--kut);transform-origin:26px 50%;filter:drop-shadow(3px 3px 0 var(--st-sjena));transition:rotate .7s cubic-bezier(.3,1.6,.45,1),translate .45s cubic-bezier(.2,.8,.2,1)} #usluge .staze__daska::before,#usluge .staze__daska::after{content:"";position:absolute;z-index:-1} #usluge .staze__daska::before{inset:0;background:var(--ink);clip-path:polygon(0 0,calc(100% - 30px) 0,100% 50%,calc(100% - 30px) 100%,0 100%);transition:background .3s} #usluge .staze__daska::after{inset:1.6px;background:#f8f7ee;clip-path:polygon(0 0,calc(100% - 29.2px) 0,100% 50%,calc(100% - 29.2px) 100%,0 100%);transition:background .3s} #usluge .staze__vijak{position:absolute;left:21px;top:50%;width:6px;height:6px;margin-top:-3px;border:1.4px solid var(--st-siva);border-radius:50%} #usluge .staze__vijak::before{content:"";position:absolute;left:1px;top:1px;width:1.5px;height:1.5px;border-radius:50%;background:var(--st-siva)} #usluge .staze__mk{width:18px;height:18px;border:4px solid var(--orange);border-radius:50%;background:#fff;transition:background .3s} #usluge .staze__ime{display:flex;align-items:baseline;gap:10px;min-width:0} #usluge .staze__br{font:700 12px/1 var(--pismo-mono);letter-spacing:.06em;color:var(--st-nar)} #usluge .staze__ime strong{font-size:20px;font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--ink);transition:color .25s} #usluge .staze__vrijeme{display:flex;align-items:center;gap:8px;font:500 12px/1.3 var(--pismo-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--st-siva);white-space:nowrap} #usluge .staze__zig{padding:4px 6px 3px;border:1.6px solid var(--orange);border-radius:3px;color:var(--st-nar);font-weight:700;letter-spacing:.12em;rotate:-4deg} #usluge .staze__daska.je-aktivna{rotate:0deg;translate:8px 0} #usluge .staze__daska.je-aktivna::before{background:var(--orange)} #usluge .staze__daska.je-aktivna::after{background:#fffdf6} #usluge .staze__daska.je-aktivna .staze__mk{background:var(--orange)} #usluge .staze__daska.je-aktivna strong{color:var(--st-nar)} #usluge .staze__daska:focus-visible{outline:3px solid var(--orange);outline-offset:6px} /* dalekozor: jedna panorama cijele rute; daska je okrene na svoj cilj */ #usluge .staze__dalekozor{position:relative;display:block;padding:12px 12px 16px;border:1px solid #cdd1c3;background:#f6f5eb;box-shadow:3px 3px 0 var(--st-sjena);color:var(--ink);transition:opacity .6s ease .15s,transform .8s cubic-bezier(.2,.8,.2,1) .15s} #usluge .staze__vidik{position:relative;display:block;overflow:hidden;border:1px solid #dde0d4;background:var(--paper);clip-path:inset(0);transition:clip-path 1.1s cubic-bezier(.65,0,.2,1) .3s} #usluge .staze__klizac{position:relative;display:block;aspect-ratio:16/10;overflow:hidden} #usluge picture{display:contents} #usluge .staze__traka{position:absolute;left:0;top:0;display:block;width:calc(100%*var(--vid-h)*6782/960);height:100%;transform-origin:0 0} #usluge .staze__traka.je-u-pokretu{will-change:transform} #usluge .staze__traka img,#usluge .staze__mini img{display:block;width:100%;height:100%;max-width:none} #usluge .staze__zastavica{display:none} #usluge .staze__nisan{position:absolute;inset:12px;z-index:3;pointer-events:none} #usluge .staze__nisan i{position:absolute;width:18px;height:18px;border:0 solid var(--ink)} #usluge .staze__nisan i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px} #usluge .staze__nisan i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0} #usluge .staze__nisan i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px} #usluge .staze__nisan i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0} #usluge .staze__pecat{position:absolute;right:26px;top:24px;z-index:3;padding:6px 9px 5px;border:2px solid var(--orange);border-radius:4px;background:rgb(250 249 241/.94);color:var(--st-nar);font:700 12px/1 var(--pismo-mono);letter-spacing:.16em;text-transform:uppercase;rotate:8deg;opacity:0;transform:scale(1.6);transition:opacity .2s,transform .4s cubic-bezier(.3,1.5,.5,1)} #usluge.je-novo .staze__pecat{opacity:1;transform:none;transition-delay:.5s} /* ploča ispod: cijela ruta u malom, okvir pokazuje kamo dalekozor gleda */ #usluge .staze__ploca{position:relative;display:block;margin-top:12px;padding-bottom:24px;transition:opacity .6s .9s,transform .8s cubic-bezier(.2,.8,.2,1) .9s} #usluge .staze__mini{position:relative;display:block;aspect-ratio:6782/960;overflow:hidden;border:1px solid #dde0d4;background:var(--paper)} #usluge .staze__mini img{opacity:.85} #usluge .staze__okvir{position:absolute;left:0;top:0;width:20%;height:100%;border:2px solid var(--orange);border-radius:2px;box-shadow:0 0 0 600px rgb(246 245 235/.55);pointer-events:none} #usluge .staze__tik{position:absolute;left:calc(var(--x)*100%);bottom:0;display:flex;flex-direction:column;align-items:center;gap:3px;transform:translateX(-50%);pointer-events:none} #usluge .staze__tik i{width:7px;height:7px;border:2px solid var(--orange);border-radius:50%;background:#fff;transition:background .25s} #usluge .staze__tik b{font:600 12px/1 var(--pismo-mono);letter-spacing:.04em;color:var(--muted);transition:color .25s} #usluge .staze__tik.je-sad i{background:var(--orange)} #usluge .staze__tik.je-sad b{color:var(--st-nar);font-weight:700} #usluge .staze__dno{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin-top:10px;padding:14px 4px 0;border-top:1px solid #dfe1d6;transition:opacity .6s .9s,transform .8s cubic-bezier(.2,.8,.2,1) .9s} #usluge .staze__gdje{display:grid;gap:6px;min-width:0} #usluge .staze__pogled{font:500 12px/1.2 var(--pismo-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--st-siva)} #usluge .staze__pogled b{color:var(--st-nar)} #usluge .staze__mjesta{display:grid} #usluge .staze__mjesto{grid-area:1/1;font-size:24px;font-weight:600;line-height:1.1;letter-spacing:-.03em;color:var(--ink);white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .45s cubic-bezier(.2,.8,.2,1)} #usluge .staze__mjesto.je-sad{opacity:1;transform:none;transition-delay:.08s} #usluge .staze__cta{display:inline-flex;gap:10px;white-space:nowrap;padding-bottom:6px;border-bottom:1px solid #5b675855;font-size:15px;font-weight:600} #usluge .staze__cta i{font-style:normal;color:var(--orange);transition:transform .3s} #usluge .staze__dalekozor:hover .staze__cta i{transform:translate(3px,-3px)} #usluge .staze__povuci{display:none} /* staza od daske do dalekozora */ #usluge .staze__veza{display:none} #usluge .staze__veza-put{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:3 6;opacity:0} #usluge .staze__veza-kraj{fill:#fff;stroke:var(--orange);stroke-width:2.6;opacity:0} #usluge .staze__veza.je-vidljiva :is(.staze__veza-put,.staze__veza-kraj){opacity:1} #usluge .staze__veza.je-nacrtana .staze__veza-put{animation:staze-tece .7s ease-out both} #usluge .staze__veza.je-nacrtana .staze__veza-kraj{animation:staze-pop .45s cubic-bezier(.3,1.4,.5,1) .35s backwards;transform-box:fill-box;transform-origin:center} @keyframes staze-tece{from{stroke-dashoffset:24;opacity:0}to{stroke-dashoffset:0;opacity:1}} @keyframes staze-pop{from{transform:scale(0)}60%{transform:scale(1.25)}to{transform:none}} /* široko: putokaz lijevo ispod naslova, dalekozor desno */ @media (min-width:900px){ #usluge{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto 1fr;column-gap:clamp(64px,7vw,112px);align-items:start} #usluge>.section-kicker{grid-column:1/-1;grid-row:1} #usluge>h2{grid-column:1;grid-row:2} #usluge .staze__putokaz{grid-column:1;grid-row:3;margin-top:40px} #usluge .staze__dalekozor{grid-column:2;grid-row:2/4;align-self:end;margin-bottom:40px} #usluge .staze__veza{display:block;position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none} } /* do 1279 px vrijeme hoda ide ispod naziva (kao na užim ekranima) */ @media (min-width:900px) and (max-width:1279px){ #usluge .staze__daska{grid-template-columns:18px minmax(0,1fr);row-gap:4px;padding-right:44px} #usluge .staze__vrijeme{grid-column:2} } @media (min-width:900px) and (max-width:1150px){ #usluge{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;--vid-h:.75} #usluge .staze__ime strong{font-size:18px} #usluge .staze__klizac{aspect-ratio:4/3} #usluge .staze__mjesto{font-size:20px} } /* usko: najprije putokaz, ispod njega panorama koja se povlači prstom */ @media (max-width:899px){ #usluge{display:flex;flex-direction:column} #usluge .staze__putokaz{order:1;margin-top:26px} #usluge .staze__dalekozor{order:2;margin-top:14px;padding:6px} #usluge .staze__povuci{order:3;display:flex;gap:8px;margin-top:12px;font:500 12px/1.3 var(--pismo-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--st-siva)} #usluge .staze__povuci i{font-style:normal;color:var(--st-nar)} #usluge .staze__klizac{aspect-ratio:auto;height:var(--vis);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch} #usluge .staze__klizac::-webkit-scrollbar{display:none} #usluge .staze__traka{position:relative;width:calc(var(--vis)*6782/960);height:var(--vis);transform:none} #usluge .staze__zastavica{position:absolute;left:calc(var(--x)*100%);bottom:10px;display:inline-flex;align-items:baseline;gap:6px;padding:5px 8px 4px;border:1px solid #dde0d4;background:rgb(250 249 241/.95);font:600 12px/1.2 var(--pismo-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--st-siva);white-space:nowrap;transform:translateX(-50%);scroll-snap-align:center} #usluge .staze__zastavica b{color:var(--st-nar)} #usluge .staze__zastavica em{margin-left:2px;padding:2px 4px 1px;border:1.5px solid var(--orange);border-radius:3px;font-style:normal;font-weight:700;color:var(--st-nar)} #usluge .staze__nisan{inset:8px} #usluge .staze__nisan i{width:13px;height:13px} #usluge :is(.staze__pecat,.staze__ploca,.staze__dno){display:none} #usluge .staze__daska{grid-template-columns:18px minmax(0,1fr);row-gap:5px;padding-right:42px} #usluge .staze__vrijeme{grid-column:2} /* na dodir nema odabira: sve daske su jednake, dodir vodi ravno na stazu */ #usluge .staze__daska.je-aktivna{rotate:var(--kut);translate:none} #usluge .staze__daska.je-aktivna::before{background:var(--ink)} #usluge .staze__daska.je-aktivna::after{background:#f8f7ee} #usluge .staze__daska.je-aktivna .staze__mk{background:#fff} #usluge .staze__daska.je-aktivna strong{color:var(--ink)} } @media (max-width:760px){ #usluge{--vis:140px} #usluge .staze__putokaz{padding:34px 0 40px} #usluge .staze__stup{left:14px;width:20px} #usluge .staze__tlo{left:-6px;width:130px} #usluge .staze__daske{gap:10px;padding-left:2px} #usluge .staze__daske>li{transform-origin:20px 50%} #usluge .staze__daska{column-gap:12px;min-height:60px;padding:9px 40px 9px 36px;transform-origin:20px 50%} #usluge .staze__vijak{left:15px} #usluge .staze__ime strong{font-size:18px} } /* dodir bez pokazivača (tablet ≥ 900 px): oznake na ploči okreću dalekozor, pa im treba područje dodira */ @media (hover:none){ #usluge .staze__tik{pointer-events:auto} #usluge .staze__tik::before{content:"";position:absolute;inset:-24px -18px -4px} } /* ulaz: stup izraste, daske se objese jedna po jedna, dalekozor izroni i otvori se na cijeloj ruti */ @keyframes staze-objesi{from{opacity:0;transform:rotate(-18deg) translateX(-16px)}to{opacity:1;transform:none}} #usluge[data-ulaz="ceka"] .staze__stup{transform:scaleY(0)} #usluge[data-ulaz="ceka"] .staze__stup-mk circle{stroke-dashoffset:1} #usluge[data-ulaz="ceka"] .staze__tlo{opacity:0} #usluge[data-ulaz="ceka"] .staze__daske>li{opacity:0} #usluge[data-ulaz="ide"] .staze__daske>li,#usluge[data-ulaz="gotov"] .staze__daske>li{animation:staze-objesi .8s cubic-bezier(.3,1.45,.5,1) calc(.45s + var(--i)*.11s) backwards} #usluge[data-ulaz="ceka"] .staze__dalekozor{opacity:0;transform:translateY(18px)} #usluge[data-ulaz="ceka"] .staze__vidik{clip-path:inset(0 100% 0 0)} #usluge[data-ulaz="ceka"] :is(.staze__ploca,.staze__dno){opacity:0;transform:translateY(12px)} /* „Zaustavi animacije” i smanjeno gibanje: sve stoji u završnom stanju, bez prijelaza */ html.bez-petlji #usluge *,html.bez-petlji #usluge *::before,html.bez-petlji #usluge *::after{transition:none!important;animation:none!important} @media (prefers-reduced-motion:reduce){ #usluge *,#usluge *::before,#usluge *::after{transition:none!important;animation:none!important} } /* ==================== Zaglavlje sekcija 04 i 05 (.sekcija-glava) ==================== */ #vidljivost .sekcija-glava{max-width:760px} #vidljivost .sekcija-glava h2{margin:0 0 18px;font:600 clamp(2.35rem, 3.5vw, 3.35rem)/1.02 Archivo, sans-serif;letter-spacing:-.048em;color:var(--ink);text-wrap:balance} #vidljivost .sekcija-glava .naslov-oznaka{display:block;margin:0 0 18px;font:600 12px/1.5 var(--pismo-mono);letter-spacing:.16em;color:var(--ink)} #vidljivost .sekcija-glava h2 em{font-family:Fraunces, Georgia, serif;font-style:italic;font-weight:500;letter-spacing:-.035em;color:var(--orange);white-space:nowrap} #vidljivost .sekcija-glava h2 + p{margin:0;max-width:34em;font-size:17px;line-height:1.65;color:#3a433e;text-wrap:pretty} @media (max-width:760px){ #vidljivost .sekcija-glava h2{margin-bottom:16px;font-size:2.3rem} #vidljivost .sekcija-glava h2 + p{font-size:16px} } /* ==================== 04 / Održavanje web stranica i SEO: Terenski servis uz obalu prema Dubrovniku ==================== */ #vidljivost{padding-top:44px;padding-bottom:76px} #vidljivost .podrska{display:grid;grid-template-columns:minmax(0, 1fr);margin-top:6px} #vidljivost .podrska__krajolik{grid-area:1 / 1;position:relative;aspect-ratio:1000 / 260} #vidljivost .podrska__prizor{position:absolute;inset:0;width:100%;height:100%;overflow:visible} #vidljivost .podrska__prizor--usko{display:none} /* crtež */ #vidljivost .pd-nebo{fill:none;stroke:#cdd2c3;stroke-width:1.2;stroke-linecap:round} #vidljivost .pd-izohipse{fill:none;stroke:#d2d7c7;stroke-width:1} #vidljivost .pd-greben{fill:none;stroke:#87907d;stroke-width:1.5;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.5, 0, .2, 1)} #vidljivost .pd-crta{fill:none;stroke:#4c554d;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} #vidljivost .pd-zastava-stup{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round} #vidljivost .pd-zastava{fill:var(--orange);transform-box:fill-box;transform-origin:0 50%;animation:pd-vijori 2.8s ease-in-out infinite} #vidljivost .pd-staza-baza{fill:none;stroke:#a6ad9b;stroke-width:2.3;stroke-linecap:round;stroke-dasharray:.1 7} #vidljivost .pd-staza-put{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} @keyframes pd-vijori{0%, 100%{scale:1 1}50%{scale:.84 1.1}} /* crte su iste debljine na svakoj širini */ #vidljivost :is(.ps-postaja, .ps-raslinje, .ps-grad, .ps-more-sloj, .ps-sprijeda) *{vector-effect:non-scaling-stroke} /* more, otok, jedro */ #vidljivost .ps-horizont{fill:none;stroke:#b9c3b6;stroke-width:1.1} #vidljivost .ps-daleko{fill:#e5e9e0;stroke:#c3cabb;stroke-width:1} #vidljivost .ps-otok{fill:#dde3d4;stroke:#a9b29f;stroke-width:1} #vidljivost .ps-val{fill:none;stroke:#c8d2cb;stroke-width:1.1;stroke-linecap:round} #vidljivost .ps-trup{fill:#f7f6ee;stroke:#5d665d;stroke-width:1.1} #vidljivost .ps-platno{fill:#fbfaf3;stroke:#5d665d;stroke-width:1.1;stroke-linejoin:round} #vidljivost .ps-jedro{animation:ps-plovi 7s ease-in-out infinite alternate} @keyframes ps-plovi{to{translate:14px 0}} /* Dubrovnik */ #vidljivost .ps-stijena{fill:#e9e6da;stroke:#8f978a;stroke-width:1.1;stroke-linejoin:round} #vidljivost .ps-zid{fill:#f4efe0;stroke:#6f776a;stroke-width:1.1;stroke-linejoin:round} #vidljivost .ps-krov{fill:#e99a78;stroke:#b4603f;stroke-width:1;stroke-linejoin:round} #vidljivost .ps-krov--toranj{fill:#d9a77f} #vidljivost .ps-kuca{fill:#f6f1e3;stroke:#8c8f80;stroke-width:.9} #vidljivost .ps-prozor{fill:#7f8879} /* raslinje */ #vidljivost .ps-krosnja{fill:#cdd5c1;stroke:#66715f;stroke-width:1.2;stroke-linejoin:round} #vidljivost .ps-sjena{fill:#b5c0a7} #vidljivost .ps-crta{fill:none;stroke:#4c554d;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round} #vidljivost .ps-deblo{stroke:#66715f;stroke-width:1.6} #vidljivost .ps-agava path{fill:#c3cdb6;stroke:#66715f;stroke-width:1;stroke-linejoin:round} #vidljivost .ps-trava{fill:none;stroke:#8d977f;stroke-width:1.1;stroke-linecap:round} #vidljivost .ps-kamen{fill:#ece9de;stroke:#9aa091;stroke-width:1} #vidljivost .ps-tlo-sjena{fill:#dfe3d4} /* postaje */ #vidljivost .ps-drvo{fill:#ece5d1;stroke:#4c554d;stroke-width:1.3;stroke-linejoin:round} #vidljivost .ps-drvo--tamno{fill:#ddd4bb} #vidljivost .ps-ploca{fill:#f1ecdc;stroke:#4c554d;stroke-width:1.3} #vidljivost .ps-daske{fill:none;stroke:#cfc6ad;stroke-width:1} #vidljivost .ps-karta{fill:#fbfaf3;stroke:#4c554d;stroke-width:1.2;stroke-linejoin:round} #vidljivost .ps-izo{fill:none;stroke:#cdd3c2;stroke-width:1} #vidljivost .ps-karta-stablo{fill:#c9d2bd;stroke:#7b8471;stroke-width:.9} #vidljivost .ps-ruta{fill:none;stroke:var(--orange);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:4 3;transition:stroke .5s} #vidljivost .ps-ruta--velika{stroke-width:3;stroke-dasharray:none} #vidljivost .ps-cvor{fill:#fff;stroke:#4c554d;stroke-width:1.2} #vidljivost .ps-cvor--cilj{fill:var(--orange);stroke:#fff;transition:fill .5s} #vidljivost .ps-staklo{fill:#eef3ef;fill-opacity:.82} #vidljivost .ps-odsjaj{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round} #vidljivost .ps-obod{fill:none;stroke:var(--orange);stroke-width:4;transition:stroke .5s} #vidljivost .ps-drska{fill:none;stroke:#3e4640;stroke-width:5;stroke-linecap:round} #vidljivost .ps-kuka{fill:none;stroke:#4c554d;stroke-width:1.4;stroke-linecap:round} #vidljivost .ps-kompas-obod{fill:#f7f6ee;stroke:#4c554d;stroke-width:1.4} #vidljivost .ps-kompas-lice{fill:#fff;stroke:#a6ad9b;stroke-width:1} #vidljivost .ps-crtice{fill:none;stroke:#4c554d;stroke-width:1.2} #vidljivost .ps-igla{rotate:28deg;transform-box:fill-box;transform-origin:center} #vidljivost .ps-igla-s{fill:var(--orange);transition:fill .5s} #vidljivost .ps-igla-j{fill:var(--ink)} #vidljivost .ps-os{fill:#4c554d} #vidljivost .ps-alat-tamno{fill:#d7dbd0;stroke:#3e4640;stroke-width:1.2;stroke-linejoin:round} #vidljivost .ps-alat-ruc{fill:var(--orange);stroke:#3e4640;stroke-width:1.2;transition:fill .5s} #vidljivost .ps-kljuc, #vidljivost .ps-odvijac{transform-box:fill-box;transform-origin:50% 0} #vidljivost .ps-zasun{fill:var(--orange);transition:fill .5s} #vidljivost .ps-vijak{fill:#4c554d} #vidljivost .ps-uze{fill:none;stroke:#4c554d;stroke-width:1.1} #vidljivost .ps-papir{fill:#fbfaf3;stroke:#4c554d;stroke-width:1.3} #vidljivost .ps-slika{fill:#e5e9db;stroke:#7b8471;stroke-width:1} #vidljivost .ps-sunce-mal{fill:none;stroke:#7b8471;stroke-width:1} #vidljivost .ps-redak{fill:none;stroke:#a6ad9b;stroke-width:1.6;stroke-linecap:round} #vidljivost .ps-zaslon{fill:#2b322e;stroke:#4c554d;stroke-width:1} #vidljivost .ps-play-krug{fill:var(--orange);transition:fill .5s} #vidljivost .ps-play{fill:#fff} #vidljivost .ps-plakat{transform-box:fill-box;transform-origin:50% 0} /* markacija: bijeli krug s narančastim prstenom i znakom (povećalo, kompas, trokut) */ #vidljivost .pd-mk__staro{fill:#f3f2e9;stroke:#aeb4a3;stroke-width:1.3;stroke-dasharray:2.2 2.4;opacity:0;transition:opacity .35s} #vidljivost .pd-mk__novo{transform-box:fill-box;transform-origin:center;transition:scale .3s cubic-bezier(.3, 1.5, .5, 1)} #vidljivost .pd-mk__bijelo{fill:#fff;transform-box:fill-box;transform-origin:center;transition:scale .28s cubic-bezier(.3, 1.6, .5, 1)} #vidljivost .pd-mk__prsten{fill:none;stroke:var(--orange);stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset .45s .1s cubic-bezier(.6, 0, .3, 1)} #vidljivost .pd-mk__drska{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset .3s .5s ease-out} #vidljivost .pd-mk__igla{opacity:1;rotate:18deg;transform-box:fill-box;transform-origin:center;transition:opacity .2s .45s} #vidljivost .pd-mk__igla-s{fill:var(--orange)} #vidljivost .pd-mk__igla-j{fill:var(--ink)} #vidljivost .pd-mk__play{fill:var(--ink);transform-box:fill-box;transform-origin:center;transition:scale .36s .5s cubic-bezier(.3, 1.6, .5, 1)} #vidljivost .pd-mk.je-obojena .pd-mk__igla{animation:pd-igla 1.4s .4s both} #vidljivost .pd-mk.je-aktivna .pd-mk__novo{scale:1.2} @keyframes pd-igla{0%{rotate:-150deg}45%{rotate:42deg}66%{rotate:6deg}83%{rotate:26deg}100%{rotate:18deg}} /* dok šetač ne dođe do markacije, ona je izblijedjela */ #vidljivost :is([data-ulaz="ceka"], [data-ulaz="ide"]) .pd-mk:not(.je-obojena) .pd-mk__staro{opacity:1} #vidljivost :is([data-ulaz="ceka"], [data-ulaz="ide"]) .pd-mk:not(.je-obojena) :is(.pd-mk__bijelo, .pd-mk__play){scale:0} #vidljivost :is([data-ulaz="ceka"], [data-ulaz="ide"]) .pd-mk:not(.je-obojena) :is(.pd-mk__prsten, .pd-mk__drska){stroke-dashoffset:1} #vidljivost :is([data-ulaz="ceka"], [data-ulaz="ide"]) .pd-mk:not(.je-obojena) .pd-mk__igla{opacity:0} #vidljivost .podrska__ikona{display:block;width:32px;height:32px;overflow:visible} /* šetač: narančasta točka s prozirnim krugom */ #vidljivost .pd-setac{transition:opacity .3s} #vidljivost :is([data-ulaz="ceka"], [data-ulaz="ide"]) .pd-setac:not(.je-vidljiv){opacity:0} #vidljivost .pd-setac__tocka{fill:var(--orange);stroke:#fff;stroke-width:2.2} #vidljivost .pd-setac__halo{fill:var(--orange);opacity:.22;transform-box:fill-box;transform-origin:center;animation:pd-halo 2.4s ease-out infinite} @keyframes pd-halo{0%{scale:.55;opacity:.38}100%{scale:1.9;opacity:0}} /* ulaz: greben se nacrta, tlo i stabla izrone, predmeti i markacije se pojave (tekst se vidi od početka) */ #vidljivost :is(.pd-nebo, .pd-tlo, .ps-more-sloj, .ps-grad, .ps-sprijeda){transition:opacity .7s .1s} #vidljivost :is(.pd-predmeti, .pd-vrh, .pd-staza-baza, .pd-mk, .podrska__ploca, .podrska__vrh, .podrska__potpis, .podrska__putokaz){transition:opacity .5s .3s} #vidljivost .ps-raslinje .ps-stablo{transition:opacity .45s, translate .6s cubic-bezier(.2, .8, .2, 1);transition-delay:calc(.25s + var(--i) * 45ms)} #vidljivost [data-ulaz="ceka"] :is(.pd-nebo, .pd-tlo, .ps-more-sloj, .ps-grad, .ps-sprijeda, .pd-predmeti, .pd-vrh, .pd-staza-baza, .pd-mk, .podrska__ploca, .podrska__vrh, .podrska__potpis, .podrska__putokaz){opacity:0} #vidljivost [data-ulaz="ceka"] .ps-raslinje .ps-stablo{opacity:0;translate:0 8px} #vidljivost [data-ulaz="ceka"] .pd-greben{stroke-dashoffset:1} /* postaja čeka sivu dok šetač ne obnovi njezinu markaciju, a onda oživi: lupa pretraži kartu, igla se zavrti, ploče se zaljuljaju */ #vidljivost .ps-postaja{transition:filter .6s, opacity .6s} #vidljivost .podrska__prizor:not(:has(.pd-mk[data-i="0"].je-obojena)) .ps-postaja--1, #vidljivost .podrska__prizor:not(:has(.pd-mk[data-i="1"].je-obojena)) .ps-postaja--2, #vidljivost .podrska__prizor:not(:has(.pd-mk[data-i="2"].je-obojena)) .ps-postaja--3{filter:grayscale(1);opacity:.62} #vidljivost .podrska[data-ulaz="gotov"] .ps-postaja{filter:none;opacity:1} #vidljivost .podrska__prizor:has(.pd-mk[data-i="0"].je-obojena) .ps-lupa{animation:ps-trazi 1.6s .1s cubic-bezier(.45, 0, .25, 1) both} #vidljivost .podrska__prizor:has(.pd-mk[data-i="1"].je-obojena) .ps-igla{animation:ps-igla 1.4s .2s both} #vidljivost .podrska__prizor:has(.pd-mk[data-i="1"].je-obojena) .ps-kljuc{animation:ps-njihaj 1.2s .5s both} #vidljivost .podrska__prizor:has(.pd-mk[data-i="2"].je-obojena) .ps-plakat{animation:ps-njihaj 1.3s calc(.15s + var(--d)) both} /* pokazivač na postaji: lupa traži dalje, igla traži sjever, ploče se zaljuljaju */ #vidljivost .podrska__prizor:has(.pd-mk[data-i="0"].je-aktivna) .ps-lupa{animation:ps-trazi 2.4s cubic-bezier(.45, 0, .25, 1) infinite} #vidljivost .podrska__prizor:has(.pd-mk[data-i="1"].je-aktivna) .ps-igla{animation:ps-igla 1.6s infinite} #vidljivost .podrska__prizor:has(.pd-mk[data-i="1"].je-aktivna) .ps-odvijac{animation:ps-njihaj 1.2s .2s infinite} #vidljivost .podrska__prizor:has(.pd-mk[data-i="2"].je-aktivna) .ps-plakat{animation:ps-njihaj 1.6s var(--d) infinite} @keyframes ps-trazi{0%{translate:0 0}35%{translate:-52px 14px}70%{translate:-24px 9px}100%{translate:0 0}} @keyframes ps-igla{0%{rotate:-150deg}45%{rotate:60deg}66%{rotate:12deg}83%{rotate:36deg}100%{rotate:28deg}} @keyframes ps-njihaj{0%, 100%{rotate:0deg}25%{rotate:4deg}55%{rotate:-3deg}80%{rotate:1.5deg}} /* natpisi u prizoru */ #vidljivost .podrska__vrh, #vidljivost .podrska__potpis{position:absolute;margin:0;display:grid;gap:2px} #vidljivost .podrska__vrh{left:8.6%;top:4%} #vidljivost .podrska__potpis{right:0;top:calc(100% + 2px);width:17%;text-align:right} #vidljivost :is(.podrska__vrh, .podrska__potpis) b{font:600 12px/1.5 var(--pismo-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)} #vidljivost :is(.podrska__vrh, .podrska__potpis) em{font:italic 500 16px/1.35 Fraunces, Georgia, serif;color:#4c554d} /* prava sličica videa sjedi na srednjoj ploči panoa; „upali” se kad šetač obnovi markaciju 03 */ #vidljivost .podrska__ploca{position:absolute;left:59.17%;top:33%;width:8.06%;aspect-ratio:16 / 9;overflow:hidden;background:#16181a;box-shadow:0 0 0 1px #4c554d} #vidljivost .podrska__ploca img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .6s cubic-bezier(.2, .8, .2, 1), filter .6s} #vidljivost .podrska__igraj{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#e0420f;box-shadow:0 0 0 5px rgb(224 66 15 / .24);transition:scale .25s cubic-bezier(.3, 1.6, .5, 1), opacity .3s} #vidljivost .podrska__igraj::before{content:"";position:absolute;left:11px;top:8.5px;border-left:11px solid #fff;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent} #vidljivost .podrska__ploca .podrska__igraj{width:22px;height:22px;margin:-11px 0 0 -11px;box-shadow:0 0 0 4px rgb(224 66 15 / .24)} #vidljivost .podrska__ploca .podrska__igraj::before{left:8.5px;top:6px;border-left-width:8px;border-top-width:5px;border-bottom-width:5px} #vidljivost :is([data-ulaz="ceka"], [data-ulaz="ide"]) .podrska__ploca:not(.je-upaljena) img{filter:saturate(.35) brightness(.8)} #vidljivost :is([data-ulaz="ceka"], [data-ulaz="ide"]) .podrska__ploca:not(.je-upaljena) .podrska__igraj{scale:.6;opacity:.6} #vidljivost .podrska__ploca:hover img{scale:1.06} #vidljivost .podrska__ploca:hover .podrska__igraj{scale:1.15} /* postaje ispod prizora: tekst odmah, broj i crtica postanu narančasti kad šetač obnovi markaciju */ #vidljivost .podrska__postaje{grid-area:2 / 1;list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:calc(25% - 28px) calc(18% - 14px) calc(19% - 14px) minmax(0, 1fr);column-gap:14px;align-items:start} #vidljivost .podrska__postaja{position:relative;max-width:250px} #vidljivost .podrska__postaja:nth-child(1){grid-column:2} #vidljivost .podrska__postaja:nth-child(2){grid-column:3} #vidljivost .podrska__postaja:nth-child(3){grid-column:4} #vidljivost .podrska__postaja::before{content:"";position:absolute;left:14px;top:-17px;height:12px;border-left:1.5px solid var(--orange);transition:border-color .3s} #vidljivost .podrska__postaja .podrska__ikona{display:none} #vidljivost .podrska__br{display:block;margin-bottom:6px;font:600 12px/1.4 var(--pismo-mono);letter-spacing:.12em;color:#c23a0e;transition:color .3s} #vidljivost .podrska__naziv{display:block;font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--ink);transition:color .2s} #vidljivost .podrska__postaja.je-aktivna .podrska__naziv{color:#c23a0e} #vidljivost .podrska__dokaz{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:#4a524c} #vidljivost :is(.podrska__dokaz, .podrska__primjer){color:#bd3d17} #vidljivost .podrska__dokaz a, #vidljivost .podrska__primjer{border-bottom:1px solid currentColor;white-space:nowrap} #vidljivost .podrska__primjer{font-weight:500} #vidljivost :is(.podrska__dokaz a, .podrska__primjer):hover{color:var(--orange)} #vidljivost .podrska__razglednica{display:none} #vidljivost :is([data-ulaz="ceka"], [data-ulaz="ide"]) .podrska__postaja:not(.je-obojena)::before{border-left:1px dashed #a6ad9b} #vidljivost :is([data-ulaz="ceka"], [data-ulaz="ide"]) .podrska__postaja:not(.je-obojena) .podrska__br{color:var(--muted)} /* putokaz: tabla sa strelicom na stupu. Sloj leži preko prizora; stup stoji na stazi, a šetač staje kod njega. Dok ulaz traje, tabla je nakrivljena, pa je šetač ispravi. */ #vidljivost .podrska__sloj{grid-area:1 / 1;position:relative;z-index:2;pointer-events:none} #vidljivost .podrska__putokaz{position:absolute;right:0;top:6%;bottom:var(--podrska-dno, 26.5%);width:max-content;filter:drop-shadow(3px 3px 0 #d4dacb)} #vidljivost .podrska__stup{position:absolute;left:16px;top:10px;bottom:0;width:10px;background:#f7f6ee;border:1.4px solid #4c554d;border-bottom:0;border-radius:2px 2px 0 0} #vidljivost .podrska__tabla{position:relative;z-index:1;pointer-events:auto;display:block;width:max-content;padding:12px 54px 12px 22px;color:var(--ink);text-decoration:none;isolation:isolate;transform-origin:21px 50%;transition:rotate 1.1s cubic-bezier(.3, 1.9, .45, 1)} /* oblik table je na pseudoelementima, pa obris fokusa nije odrezan */ #vidljivost .podrska__tabla::before, #vidljivost .podrska__tabla::after{content:"";position:absolute;inset:0;z-index:-1} #vidljivost .podrska__tabla::before{background:#4c554d;clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%)} #vidljivost .podrska__tabla::after{background:linear-gradient(90deg, var(--orange) 0 7px, #faf9f1 7px);clip-path:polygon(1.5px 1.5px, calc(100% - 30.6px) 1.5px, calc(100% - 2.6px) 50%, calc(100% - 30.6px) calc(100% - 1.5px), 1.5px calc(100% - 1.5px))} #vidljivost .podrska__tabla:is(:hover, :focus-visible)::after{background:linear-gradient(90deg, var(--orange) 0 7px, #fff 7px)} /* na prijelaz mišem miče se samo izgled; okvir table (meta klika) miruje, inače se na lijevih 5 px ciklički gubi hover */ #vidljivost .podrska__tabla::before, #vidljivost .podrska__tabla::after, #vidljivost .podrska__tabla-unutra{transition:translate .25s cubic-bezier(.2, .8, .2, 1)} #vidljivost .podrska__tabla:is(:hover, :focus-visible) :is(.podrska__tabla-unutra, .podrska__tabla-mk), #vidljivost .podrska__tabla:is(:hover, :focus-visible)::before, #vidljivost .podrska__tabla:is(:hover, :focus-visible)::after{translate:5px 0} #vidljivost .podrska__tabla-unutra{display:grid;gap:4px} #vidljivost .podrska__tabla b{font-size:17px;font-weight:650;line-height:1.2;letter-spacing:-.01em} #vidljivost .podrska__tabla small{font:500 12px/1.4 var(--pismo-mono);letter-spacing:.04em;color:var(--muted)} #vidljivost .podrska__tabla strong{font-weight:650;color:var(--ink)} #vidljivost .podrska__tabla-mk{position:absolute;right:33px;top:50%;width:18px;height:18px;margin-top:-9px;transition:rotate .5s, translate .25s cubic-bezier(.2, .8, .2, 1)} #vidljivost .podrska__tabla:hover .podrska__tabla-mk{rotate:90deg} #vidljivost .podrska__tabla:focus-visible{outline:2px solid var(--orange);outline-offset:5px} @media (min-width:861px){ #vidljivost :is([data-ulaz="ceka"], [data-ulaz="ide"]) .podrska__tabla{rotate:-8deg} } /* do 1280 px: sažeta tabla, bez potpisa */ @media (max-width:1280px){ #vidljivost .podrska__tabla{padding:10px 44px 10px 20px} #vidljivost .podrska__tabla b{font-size:15px} #vidljivost .podrska__tabla small{display:grid} #vidljivost .podrska__razmak{display:none} #vidljivost .podrska__tabla-mk{right:27px;width:15px;height:15px;margin-top:-7.5px} #vidljivost .podrska__potpis{display:none} #vidljivost .podrska__naziv{font-size:15px} } /* mobitel: uži prizor, popis u jednom stupcu s ikonama, tabla ispod popisa */ @media (max-width:860px){ #vidljivost .podrska__krajolik{aspect-ratio:400 / 240;max-width:520px;margin-top:8px} #vidljivost .podrska__prizor--siroko{display:none} #vidljivost .podrska__prizor--usko{display:block} #vidljivost .podrska__vrh{left:12%;top:0} #vidljivost .podrska__vrh em{font-size:15px} #vidljivost .podrska__postaje{display:grid;grid-template-columns:minmax(0, 1fr);gap:22px;margin-top:18px} #vidljivost .podrska__postaja:nth-child(n){grid-column:auto;max-width:none;display:grid;grid-template-columns:34px minmax(0, 1fr);column-gap:14px;align-items:start} #vidljivost .podrska__postaja > :not(.podrska__ikona){grid-column:2} #vidljivost .podrska__postaja::before{display:none} #vidljivost .podrska__postaja .podrska__ikona{display:block;grid-column:1;grid-row:1 / span 2;margin-top:2px;transition:filter .4s, opacity .4s, scale .45s cubic-bezier(.3, 1.6, .5, 1)} #vidljivost :is([data-ulaz="ceka"], [data-ulaz="ide"]) .podrska__postaja:not(.je-obojena) .podrska__ikona{filter:grayscale(1);opacity:.45} #vidljivost .podrska__postaja.je-aktivna .podrska__ikona{scale:1.12} #vidljivost .podrska__br{margin-bottom:3px} #vidljivost .podrska__naziv{font-size:16px} #vidljivost .podrska__razglednica{display:block;width:min(100%, 220px);margin-top:16px} #vidljivost .podrska__sloj{grid-area:3 / 1;pointer-events:auto;margin-top:30px} #vidljivost .podrska__putokaz{position:relative;inset:auto;width:auto} #vidljivost .podrska[data-ulaz] .podrska__putokaz{opacity:1} #vidljivost .podrska__ploca{display:none} #vidljivost .podrska__stup{display:none} #vidljivost .podrska__tabla{width:min(100%, 330px);padding:12px 52px 12px 22px} #vidljivost .podrska__tabla b{font-size:17px} #vidljivost .podrska__tabla small{display:block} #vidljivost .podrska__razmak{display:inline} #vidljivost .podrska__tabla-mk{right:32px;width:18px;height:18px;margin-top:-9px} } @media (max-width:360px){ #vidljivost .podrska__tabla small{display:grid} #vidljivost .podrska__razmak{display:none} } @media (max-width:760px){ #vidljivost{padding-top:30px;padding-bottom:60px} } /* razglednica s kadrom videa (mobitel); pribadača gore */ #vidljivost .podrska__rg-slika{position:relative;display:block;aspect-ratio:16 / 9;border:5px solid #fff;outline:1px solid #cbcfc1;background:#16181a;box-shadow:3px 3px 0 #d4dacb;rotate:-2deg;transition:rotate .4s cubic-bezier(.3, 1.6, .5, 1), translate .4s} #vidljivost .podrska__rg-slika img{display:block;width:100%;height:100%;object-fit:cover} #vidljivost .podrska__rg-slika::before{content:"";position:absolute;left:50%;top:-11px;z-index:1;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgb(239 84 40 / .2), inset -2px -2px 0 rgb(194 58 14 / .45)} #vidljivost .podrska__razglednica:hover .podrska__rg-slika{rotate:0deg;translate:0 -3px} #vidljivost .podrska__razglednica:hover .podrska__igraj{scale:1.15} /* „Zaustavi animacije”: sekcija odmah stoji u završnom stanju (smanjeno gibanje već gasi opće pravilo u naslovnica.css) */ html.bez-petlji #vidljivost .podrska *, html.bez-petlji #vidljivost .podrska *::before, html.bez-petlji #vidljivost .podrska *::after{animation:none !important;transition:none !important}