/* 05 / Video produkcija: „Klapa i set” (21. 10. 2026., proba _candidates/video-studio-2026-10-21, prijedlog D). Zasebna datoteka (vlasnikova odluka 21. 10.): osnova ljetnog kina (program, ulaznice, ulaz) pa sloj klape, vrpce, kamere, mikrofona i table „Snimamo”. Markup je statičan u index.html; JS: postaviKino (naslovnica-sekcije.js) i naslovnica-video.js. */ #video{ padding-top: 18px; padding-bottom: 72px; background: linear-gradient(#f2f1e7, #f4f3ea); } @keyframes kino-pojavi{ from{ opacity: 0; } to{ opacity: 1; } } @keyframes kino-markacija{ from{ transform: scale(0); } to{ transform: scale(1); } } #video .kino{ --kino-zvuk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4Z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E"); display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 40px 56px; align-items: center; border-top: 1px solid #cbcfc1; padding-top: 40px; } #video .kino__tekst h2{ margin: 0 0 20px; font: 600 clamp(2.35rem, 3.5vw, 3.35rem)/1.02 Archivo, sans-serif; letter-spacing: -.048em; color: #272f2c; } #video .kino__tekst h2 .eyebrow{ display: block; margin: 0 0 18px; font: 600 12px/1.5 var(--pismo-mono); letter-spacing: .16em; color: #272f2c; } #video .kino__tekst h2 em{ font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -.035em; color: #ef5428; white-space: nowrap; } #video .kino__opis > p{ margin: 0; max-width: 34em; font-size: 16px; line-height: 1.72; color: #3f4641; } #video .kino__opis .service-points{ margin-top: 20px; font-size: 15px; } /* --- kino: krajolik, stupovi s markacijama, šipka s lampicama, platno */ #video .kino__scena{ --stup-d: 6px; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 22px 34px; } #video .kino__krajolik{ position: absolute; z-index: -1; left: -34px; right: -34px; bottom: 0; width: calc(100% + 68px); height: 58%; -webkit-mask: linear-gradient(90deg, #0000, #000 9%, #000 91%, #0000), linear-gradient(#000 76%, #0000); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, #0000, #000 9%, #000 91%, #0000), linear-gradient(#000 76%, #0000); mask-composite: intersect; } #video .kino__brdo{ fill: #e6e9dd; } #video .kino__izo{ fill: none; stroke: #d7dbcd; stroke-width: 1; vector-effect: non-scaling-stroke; } #video .kino__tlo{ fill: none; stroke: #9aa290; stroke-width: 1.2; vector-effect: non-scaling-stroke; } #video .kino__more{ fill: none; stroke: #c4cbbb; stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; } #video .kino__platno{ position: relative; align-self: start; margin: 30px 14px 0; padding: 8px; background: #fdfcf6; border: 1px solid #c9cdbf; box-shadow: 4px 4px 0 #d4dacb; } /* dvije uzice od šipke do platna */ #video .kino__platno::before, #video .kino__platno::after{ content: ""; position: absolute; top: -20px; width: 1.4px; height: 20px; background: #272f2c; } #video .kino__platno::before{ left: 14%; } #video .kino__platno::after{ right: 14%; } /* platno je bijelo dok projektor ne upali kadar */ #video .kino__ekran{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f1f0e6; } #video .kino__ekran video, #video .kino__pregled{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #video .kino__ekran video{ background: #16181a; } #video .kino__pregled{ opacity: 0; pointer-events: none; transition: opacity .35s ease; } #video .kino--pregled .kino__pregled{ opacity: 1; } #video .kino__igraj{ position: absolute; inset: 0; place-items: center; padding: 0; border: 0; background: linear-gradient(180deg, rgb(22 24 26 / 0) 45%, rgb(22 24 26 / .32)); cursor: pointer; transition: opacity .3s, visibility .3s; } #video .kino__igraj > span{ display: grid; place-items: center; width: 86px; height: 86px; border: 9px solid #ef5428; border-radius: 50%; background: #fff; box-sizing: border-box; box-shadow: 0 0 0 9px rgb(255 255 255 / .28), 0 16px 32px rgb(22 24 26 / .35); transition: transform .35s cubic-bezier(.2, .8, .2, 1); } #video .kino__igraj svg{ width: 30px; height: 30px; margin-left: 5px; fill: #ef5428; } #video .kino__igraj:hover > span, #video .kino__igraj:focus-visible > span{ transform: scale(1.07); } #video .kino__igraj:focus-visible{ outline: 3px solid #ef5428; outline-offset: -6px; } /* natpis na platnu samo kao pregled druge ulaznice (odabrana se vidi na programu) */ #video .kino__natpis{ position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 9px 13px 10px; max-width: calc(100% - 32px); background: rgb(250 249 241 / .97); box-shadow: 3px 3px 0 rgb(22 24 26 / .22); rotate: -1.2deg; pointer-events: none; opacity: 0; transition: opacity .25s; } #video .kino__natpis b{ display: block; font: 600 15px/1.25 Archivo, sans-serif; color: #16181a; } #video .kino__natpis small{ display: block; margin-top: 3px; font: 600 12px/1.3 var(--pismo-mono); letter-spacing: .1em; text-transform: uppercase; color: #c23a0e; } #video .kino--pregled .kino__natpis{ opacity: 1; } #video .kino--igra .kino__igraj{ opacity: 0; visibility: hidden; } /* --- program: konop je staza, ulaznice vise na pribadačama */ #video .kino__program{ position: relative; margin: 26px 14px 0; } #video .kino__konop{ position: absolute; top: 0; left: -28px; width: calc(100% + 56px); height: 40px; overflow: visible; } #video .kino__konop path{ fill: none; stroke: #ef5428; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; } #video .kino__setac{ position: absolute; left: 0; top: 0; z-index: 3; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #ef5428; box-shadow: 0 0 0 6px rgb(239 84 40 / .2); pointer-events: none; transition: transform .7s cubic-bezier(.45, 0, .2, 1); } #video .kino__setac.kino__setac--odmah{ transition: none; } #video .kino__ulaznice{ position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 18px; margin: 0; padding: 0; list-style: none; } #video .kino__ulaznice > li{ position: relative; padding-top: calc(var(--y, 14px) + 7px); } #video .kino__pin{ position: absolute; z-index: 2; top: calc(var(--y, 14px) - 7px); left: 50%; width: 14px; height: 14px; margin-left: -7px; border: 3.5px solid #ef5428; border-radius: 50%; background: #fff; box-sizing: border-box; box-shadow: 1px 2px 2px rgb(0 0 0 / .18); } /* ulaznica: blagi nagib, sjena je zaseban sloj (bez filtera), pa tekst ostaje oštar */ #video .kino__ulaznica{ position: relative; display: block; width: 100%; --rot: var(--r); --pom: 0 0; --pom-s: 3px 3px; } #video .kino__ulaznica > :is(.kino__sjena, .kino__papir){ rotate: var(--rot); transform-origin: 50% -7px; transition: rotate .5s cubic-bezier(.3, 1.45, .45, 1), translate .35s cubic-bezier(.2, .8, .2, 1), background .25s; } #video .kino__ulaznica > .kino__papir{ translate: var(--pom); } #video .kino__ulaznica > .kino__sjena{ translate: var(--pom-s); } #video .kino__karta{ position: relative; display: block; width: 100%; rotate: var(--r); transform-origin: 50% -7px; transition: rotate .5s cubic-bezier(.3, 1.45, .45, 1), translate .35s cubic-bezier(.2, .8, .2, 1); } #video .kino__ulaznica{ padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } #video .kino__ulaznica:hover, #video .kino__ulaznica:focus-visible{ --rot: 0deg; --pom: 0 -4px; --pom-s: 3px -1px; } #video .kino__ulaznica:focus-visible{ outline: 2px solid #ef5428; outline-offset: 5px; border-radius: 2px; } #video .kino__ulaznica[aria-current="true"]{ --rot: calc(var(--r) * .35); } #video .kino__sjena, #video .kino__papir{ --kino-maska: radial-gradient(circle 6px at 26px 0, #0000 95%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at 26px 100%, #0000 95%, #000) bottom / 100% 51% no-repeat; -webkit-mask: var(--kino-maska); mask: var(--kino-maska); } #video .kino__sjena{ position: absolute; inset: 0; background: #d4dacb; } #video .kino__papir{ position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); min-height: 86px; background: #faf9f1; transition: background .25s; } #video .kino__ulaznica[aria-current="true"] .kino__papir{ background: #fff; } #video .kino__stub{ position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 13px; border-right: 1.5px dashed #c9ccbf; font: 600 12px/1 var(--pismo-mono); letter-spacing: .04em; color: #c23a0e; } #video .kino__rupa{ position: absolute; left: 50%; bottom: 13px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #efeee4; box-shadow: inset 1px 1px 2px rgb(22 24 26 / .35); scale: 0; transition: scale .35s cubic-bezier(.3, 1.7, .5, 1); } #video [aria-current="true"] .kino__rupa{ scale: 1; } #video .kino__eq{ display: flex; align-items: flex-end; gap: 2px; height: 14px; margin-top: 10px; opacity: 0; transition: opacity .25s; } #video .kino__eq i{ width: 3px; height: 100%; background: #ef5428; transform-origin: 50% 100%; scale: 1 .35; } #video .je-svira .kino__eq{ opacity: 1; } #video .kino__tijelo{ display: block; min-width: 0; padding: 11px 10px 12px 11px; } #video .kino__tijelo b{ display: block; font: 600 15px/1.22 Archivo, sans-serif; letter-spacing: -.01em; color: #16181a; transition: color .2s; } #video .kino__tijelo b i{ display: block; font: italic 500 16px/1.2 Fraunces, Georgia, serif; letter-spacing: -.01em; color: #c23a0e; } #video .kino__tijelo small{ display: flex; align-items: center; margin-top: 8px; font: 600 12px/1.35 var(--pismo-mono); letter-spacing: .04em; text-transform: uppercase; color: #647067; white-space: nowrap; } #video .kino__tijelo small::after{ content: ""; flex: none; width: 13px; height: 13px; margin-left: 5px; background: currentColor; -webkit-mask: var(--kino-zvuk) center / contain no-repeat; mask: var(--kino-zvuk) center / contain no-repeat; } #video .kino__ulaznica:hover b, #video .kino__ulaznica[aria-current="true"] b{ color: #c23a0e; } /* zadnje mjesto na programu: vaš video, puna ulaznica s narančastim stubom; cijela je poveznica */ #video .kino__vas .kino__pin{ background: #ef5428; border-color: #fff; box-shadow: 0 0 0 1.5px #ef5428, 1px 2px 2px rgb(0 0 0 / .18); } #video .kino__vas:hover .kino__karta, #video .kino__vas:focus-within .kino__karta{ rotate: 0deg; translate: 0 -4px; } #video .kino__karta:has(.text-link:focus-visible){ outline: 2px solid #ef5428; outline-offset: 5px; border-radius: 2px; } #video .kino__vas .kino__stub{ border-right: 0; background: #c23a0e; color: #fff; } #video .kino__vas .kino__tijelo b{ font: italic 500 18px/1.2 Fraunces, Georgia, serif; color: #272f2c; } #video .kino__vas .text-link{ display: inline-block; margin-top: 6px; padding: 0; border: 0; font: 600 15px/1.45 Archivo, sans-serif; color: #c23a0e; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } #video .kino__vas .text-link::after{ content: ""; position: absolute; inset: 0; } #video .kino__vas .text-link span{ display: inline-block; margin-left: 4px; font-size: 16px; color: #ef5428; text-decoration: none; transition: translate .25s; } #video .kino__vas:hover .text-link span{ translate: 3px -3px; } /* obrub fokusa dobiva cijela karta; preglednici bez :has() zadržavaju obrub poveznice */ @supports selector(:has(*)){ #video .kino__vas .text-link:focus-visible{ outline: none; } } /* --- ulaz (≈1,5 s): stupovi rastu, šipka se razvuče, platno se bijelo odmota, lampice se objese, projektor upali kadar; ulaznice se objese kad je platno razapeto (ili kad se vide, na mobitelu) */ #video .kino__scena[data-ulaz="ceka"] :is(.kino__platno, .kino__krajolik){ opacity: 0; } #video .kino__scena[data-ulaz="ide"] :is(.kino__krajolik){ animation: kino-pojavi .6s ease backwards; } #video .kino__scena[data-ulaz="ide"] .kino__platno{ animation: kino-odmotaj .55s .42s cubic-bezier(.65, 0, .25, 1) backwards; } #video .kino__scena[data-ulaz="ide"] :is(.kino__ekran video, .kino__igraj){ animation: kino-projektor .45s .92s linear backwards; } #video .kino__scena[data-ulaz="ide"] .kino__igraj > span{ animation: kino-markacija .45s 1.02s cubic-bezier(.3, 1.6, .5, 1) backwards; } @keyframes kino-odmotaj{ from{ opacity: 1; clip-path: inset(-22px -10px calc(100% + 22px) -10px); } to{ opacity: 1; clip-path: inset(-22px -10px -10px -10px); } } @keyframes kino-projektor{ 0%{ opacity: 0; } 30%{ opacity: .85; } 42%{ opacity: .3; } 62%{ opacity: 1; } 74%{ opacity: .75; } 86%, 100%{ opacity: 1; } } #video .kino__program[data-ulaz="ceka"] :is(.kino__konop, .kino__setac, .kino__ulaznice > li){ opacity: 0; } #video .kino__program[data-ulaz="ceka"]::before{ opacity: 0; } #video .kino__program[data-ulaz="ide"] .kino__konop{ animation: kino-konop .5s var(--kasni, 0s) cubic-bezier(.6, 0, .2, 1) backwards; } #video .kino__program[data-ulaz="ide"]::before{ animation: kino-niz .5s var(--kasni, 0s) cubic-bezier(.6, 0, .2, 1) backwards; } #video .kino__program[data-ulaz="ide"] .kino__ulaznice > li{ animation: kino-objesi .6s calc(var(--kasni, 0s) + .15s + var(--i) * .1s) cubic-bezier(.3, .8, .35, 1) backwards; transform-origin: 50% var(--y, 14px); } #video .kino__program[data-ulaz="ide"] .kino__setac{ animation: kino-pojavi .3s calc(var(--kasni, 0s) + .62s) ease backwards; } @keyframes kino-konop{ from{ opacity: 1; clip-path: inset(-20px 100% -20px 0); } to{ opacity: 1; clip-path: inset(-20px 0 -20px 0); } } @keyframes kino-niz{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } } @keyframes kino-objesi{ 0%{ opacity: 0; transform: translateY(-14px) rotate(-8deg); } 45%{ opacity: 1; transform: translateY(0) rotate(4deg); } 72%{ transform: rotate(-1.5deg); } 100%{ opacity: 1; transform: none; } } @keyframes kino-stigni{ from{ opacity: 0; transform: translateX(-14px); } to{ opacity: 1; transform: none; } } #video .je-svira .kino__eq i{ animation: kino-eq .8s ease-in-out infinite alternate; } #video .je-svira .kino__eq i:nth-child(2){ animation-duration: .55s; animation-delay: -.2s; } #video .je-svira .kino__eq i:nth-child(3){ animation-duration: .7s; animation-delay: -.45s; } @keyframes kino-eq{ from{ scale: 1 .25; } to{ scale: 1 1; } } @media (min-width: 1281px) and (max-width: 1439px){ #video .kino{ grid-template-columns: 270px minmax(0, 1fr); gap: 40px 44px; } } /* --- do 1280 px: tekst gore u dva stupca, ulaznice okomito na stazi (uz platno ili ispod njega) */ @media (max-width: 1280px){ #video .kino{ grid-template-columns: minmax(0, 1fr); gap: 32px; } #video .kino__tekst{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px 48px; align-items: end; } #video .kino__tekst h2{ margin: 0; } #video .kino__opis .service-points{ margin-top: 14px; } /* ništa iz kina ne ide lijevo od sadržaja, u traku žičare */ #video .kino__krajolik{ left: 0; right: 0; width: 100%; } #video .kino__program{ padding-left: 26px; } #video .kino__program::before{ content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; border-left: 2.4px dotted #ef5428; transform-origin: 50% 0; } #video .kino__konop{ display: none; } #video .kino__ulaznice{ grid-template-columns: minmax(0, 1fr); gap: 12px; } #video .kino__ulaznice > li{ padding-top: 0; } #video .kino__pin{ top: 50%; left: -26px; margin: -7px 0 0; } #video .kino__ulaznica{ --rot: calc(var(--r) * .4); } #video .kino__ulaznica > :is(.kino__sjena, .kino__papir){ transform-origin: 0 50%; } #video .kino__karta{ transform-origin: 0 50%; rotate: calc(var(--r) * .4); } #video .kino__ulaznica:hover, #video .kino__ulaznica:focus-visible{ --rot: calc(var(--r) * .4); --pom: 4px 0; --pom-s: 7px 3px; } #video .kino__vas:hover .kino__karta, #video .kino__vas:focus-within .kino__karta{ translate: 4px 0; } #video .kino__program[data-ulaz="ide"] .kino__ulaznice > li{ animation-name: kino-stigni; transform-origin: 0 50%; } } /* 941–1280: program je uski stupac desno od platna; desni stup stoji uz platno */ @media (min-width: 941px) and (max-width: 1280px){ #video .kino__scena{ --stup-d: 268px; grid-template-columns: minmax(0, 1fr) 250px; column-gap: 34px; padding-right: 0; } #video .kino__program{ margin: 30px 0 0; align-self: start; } #video .kino__papir{ min-height: 76px; } #video .kino__tijelo{ padding: 10px 10px 11px 12px; } } @media (max-width: 940px){ #video .kino__program{ margin: 24px 14px 0; } } /* srednje široko: ulaznica je široka kao karta za vlak, naslov lijevo, trajanje desno */ @media (min-width: 560px) and (max-width: 940px){ #video .kino__ulaznice{ max-width: 620px; } #video .kino__tijelo{ display: flex; align-items: center; justify-content: space-between; gap: 16px; } #video .kino__tijelo small{ margin: 0; } } @media (max-width: 760px){ #video{ padding-bottom: 60px; } #video .kino{ gap: 28px; padding-top: 30px; } #video .kino__tekst{ display: block; } #video .kino__tekst h2{ margin: 0 0 16px; font-size: 2.3rem; } #video .kino__opis .service-points{ margin-top: 20px; font-size: 15px; } #video .kino__scena{ padding: 0 0 26px; } #video .kino__natpis, #video .kino__more{ display: none; } #video .kino__platno{ margin: 28px 0 0; padding: 6px; } #video .kino__platno::before{ left: 10%; } #video .kino__platno::after{ right: 10%; } #video .kino__krajolik{ height: 50%; } #video .kino__igraj > span{ width: 66px; height: 66px; border-width: 7px; } #video .kino__igraj svg{ width: 24px; height: 24px; } #video .kino__program{ margin: 24px 0 0; } #video .kino__papir{ min-height: 74px; } #video .kino__tijelo{ padding: 12px 14px 12px; } #video .kino__tijelo b{ font-size: 15px; } } /* veliki gumb i šetač postoje tek kad je JS spreman; bez skripte ništa od toga ne bi radilo */ #video .kino__igraj, #video .kino__setac{ display: none; } #video .kino--ziv .kino__igraj{ display: grid; } #video .kino--ziv .kino__setac{ display: block; } /* smanjeno gibanje i „Zaustavi animacije”: sve je odmah u završnom stanju */ @media (prefers-reduced-motion: reduce){ #video .kino *, #video .kino *::before, #video .kino *::after{ animation: none !important; transition: none !important; } } html.bez-petlji #video .kino *, html.bez-petlji #video .kino *::before, html.bez-petlji #video .kino *::after{ animation: none !important; transition: none !important; } /* Prijedlog D · Klapa i set (proba 21. 10. 2026.): okvir i lijevi stupac iz C (klapa, vrpca, ploča s trajanjem), kamera na stativu i mikrofon na motki iz A, tabla „Snimamo” iz B. Učitava se nakon naslovnica-sekcije.css. --pojas: prostor iznad klape (tabla, mikrofon); --fl/--fr: razmak okvira od lijevog/desnog ruba scene. */ #video .kino{ padding-top: 34px; } #video .kino__scena{ --kh: 22px; --vr: 29px; --rw: 10px; --rk: 16px; --pruge: 9; --otvor: 26px; --mir: 7px; --pojas: 58px; --fl: 0px; --fr: 0px; --mik: 96px; --kraj: -96px; padding: 0 0 28px; --duz: calc(100cqw + 2 * var(--vr)); --kut: calc(-1 * atan2(var(--otvor), var(--duz))); --mirno: calc(-1 * atan2(var(--mir), var(--duz))); --pr: calc(var(--duz) / var(--pruge)); } #video .kino__program{ margin-top: 22px; } /* --- lijevi stupac: ikone uz točke i niz „Ton · Kamera · Akcija!” */ #video .kino__opis .service-points li::before{ width: 18px; height: 18px; margin-top: .14em; border: 0; border-radius: 0; background: #ef5428; -webkit-mask: var(--ik) center / contain no-repeat; mask: var(--ik) center / contain no-repeat; } #video .kino__opis .service-points li:nth-child(1){ --ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.6' cy='5.4' r='2.6'/%3E%3Ccircle cx='12.6' cy='5.4' r='2.6'/%3E%3Crect x='2.5' y='9.2' width='13' height='9.8' rx='1.6'/%3E%3Cpath d='M15.5 12.6 21.5 9.6v9l-6-3'/%3E%3C/svg%3E"); } #video .kino__opis .service-points li:nth-child(2){ --ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 19C12.6 19 11.4 5 16.8 5'/%3E%3Cpath d='M4.5 16.3 7.2 19 4.5 21.7 1.8 19Z'/%3E%3Cpath d='M19.5 2.3 22.2 5 19.5 7.7 16.8 5Z'/%3E%3C/svg%3E"); } #video .kino__opis .service-points li:nth-child(3){ --ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.5 10.5v3M7.5 7.5v9M11.5 4v16M15.5 8v8M19.5 10v4'/%3E%3C/svg%3E"); } #video .kino__tekst > .kino__niz{ display: flex; align-items: center; gap: 10px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid #d9dccf; font: 600 12px/1 var(--pismo-mono); letter-spacing: .18em; text-transform: uppercase; color: #272f2c; white-space: nowrap; } #video .kino__niz i{ flex: 0 1 30px; min-width: 12px; border-top: 2px dotted #ef5428; transform-origin: 0 50%; } #video .kino__niz em{ font: italic 500 24px/1 Fraunces, Georgia, serif; letter-spacing: -.01em; text-transform: none; color: #ef5428; transform-origin: 0 60%; } /* --- okvir: grafitni kadar vrpce s klapom (spremnik za cqw) */ #video .kino__platno{ container-type: inline-size; margin: calc(var(--pojas) + var(--kh) * 2 + 3px) 0 0; padding: 9px var(--vr) 0; background: #272f2c; border: 0; border-radius: 4px; box-shadow: 5px 5px 0 #d4dacb; } #video .kino__platno::before, #video .kino__platno::after{ content: none; } #video .kino__ekran{ outline: 1px solid rgb(250 249 241 / .28); outline-offset: 3px; transition: outline-color .4s; } #video .kino--mrak .kino__ekran{ outline-color: rgb(255 125 82 / .75); } #video .kino__vrpca{ position: absolute; top: 0; bottom: 0; width: var(--vr); overflow: hidden; pointer-events: none; } #video .kino__vrpca--l{ left: 0; } #video .kino__vrpca--d{ right: 0; } #video .kino__vrpca i{ position: absolute; inset: calc(var(--rk) * -3) 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Crect y='4.5' width='10' height='7' rx='1.7' fill='%23f2f1e7'/%3E%3C/svg%3E") 50% 0 / var(--rw) var(--rk) repeat-y; } #video .kino__klapa{ position: absolute; left: 0; right: 0; bottom: calc(100% + 2px); height: calc(var(--kh) * 2); pointer-events: none; } #video .kino__letva{ position: absolute; left: 0; right: 0; height: var(--kh); border: 1.5px solid #272f2c; border-radius: 3px; box-sizing: border-box; background: repeating-linear-gradient(var(--smjer), #272f2c 0 calc(var(--pr) * .3536), #faf9f1 0 calc(var(--pr) * .7071)); } #video .kino__letva--dolje{ bottom: 0; --smjer: 45deg; box-shadow: 3px 3px 0 #d4dacb; } #video .kino__letva--gore{ top: 0; --smjer: -45deg; transform-origin: 0 100%; rotate: var(--mirno); transition: rotate .45s cubic-bezier(.3, 1.5, .5, 1); } #video .kino__zglob{ position: absolute; z-index: 1; left: -7px; top: calc(var(--kh) - 7px); width: 14px; height: 14px; border: 3.5px solid #ef5428; border-radius: 50%; background: #fff; box-sizing: border-box; box-shadow: 1px 2px 2px rgb(0 0 0 / .2); } #video .kino--pregled .kino__letva--gore, #video .kino:not(.kino--mrak) .kino__platno:has(.kino__igraj:hover, .kino__igraj:focus-visible) .kino__letva--gore, #video .kino:not(.kino--mrak):has(.kino__vas:hover, .kino__vas:focus-within) .kino__letva--gore{ rotate: calc(var(--kut) * .55); } /* ploča klape: Produkcija · Trajanje · Kadar · Ton (trajanje i kadar prate ulaznicu, video.js) */ #video .kino__ploca{ display: flex; align-items: center; height: 34px; margin: 0; overflow: hidden; color: #faf9f1; } #video .kino__polje{ display: flex; align-items: baseline; gap: 9px; padding: 0 18px; border-left: 1px solid rgb(250 249 241 / .22); white-space: nowrap; } #video .kino__polje:first-child{ margin-right: auto; padding-left: 2px; border-left: 0; } #video .kino__polje:last-child{ padding-right: 2px; } #video .kino__polje small{ font: 600 11px/1 var(--pismo-mono); letter-spacing: .16em; text-transform: uppercase; color: #aab2a4; } #video .kino__polje b{ display: inline-block; font: italic 500 17px/1 Fraunces, Georgia, serif; color: #faf9f1; } #video .kino__polje b.kino__kadar{ min-width: 1.3em; color: #ff7d52; } #video .kino__traj{ min-width: 2.4em; } #video .je-nov{ animation: c-kadar .32s cubic-bezier(.2, .8, .2, 1); } @keyframes c-kadar{ from{ opacity: 0; translate: 0 6px; } } #video .kino__polje b.kino__ton{ display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } #video .kino__ton i{ width: 3px; height: 100%; background: #ff7d52; transform-origin: 50% 100%; scale: 1 .5; } #video .kino__ton i:nth-child(2){ scale: 1 1; } #video .kino__ton i:nth-child(3){ scale: 1 .7; } #video .kino--mrak .kino__ton i{ animation: kino-eq .8s ease-in-out infinite alternate; } #video .kino--mrak .kino__ton i:nth-child(2){ animation-duration: .55s; animation-delay: -.2s; } #video .kino--mrak .kino__ton i:nth-child(3){ animation-duration: .7s; animation-delay: -.45s; } #video .kino__natpis{ left: 20px; bottom: 16px; padding: 8px 13px 9px 11px; background: #272f2c; border-left: 3px solid #ef5428; box-shadow: 3px 3px 0 rgb(22 24 26 / .22); rotate: 0deg; } #video .kino__natpis b{ color: #faf9f1; } #video .kino__natpis small{ color: #ff7d52; } /* --- set: kamera na stativu, mikrofon na motki, tabla „Snimamo” (sve ukras, bez klikova) */ #video :is(.set__kamera, .set__boom, .set__tabla){ pointer-events: none; } #video :is(.set__glava, .set__noge, .set__motka, .set__mik) *{ vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } #video .set__kamera{ position: relative; z-index: 1; display: none; flex-direction: column; } #video .set__glava{ display: block; width: 100%; height: auto; overflow: visible; } #video .set__noge{ display: block; flex: 1; width: 92%; min-height: 0; margin: -4px auto 0; overflow: visible; transform-origin: 50% 0; } #video .set__rola, #video .set__tijelo{ fill: #faf9f1; stroke: #272f2c; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; } #video .set__os{ fill: none; stroke: #9aa290; stroke-width: 1; } #video .set__dio, #video .set__krzno{ fill: #e4e8dc; stroke: #272f2c; stroke-width: 1.3; } #video .set__znak{ fill: #fff; stroke: #ef5428; stroke-width: 3; } #video .set__tally{ fill: #cbcfc1; stroke: #272f2c; stroke-width: 1; transition: fill .3s; } #video .set__cijev{ fill: none; stroke: #272f2c; stroke-width: 4; } #video .set__ruckica{ fill: none; stroke: #ef5428; stroke-width: 5; } #video .set__noge path{ fill: none; } #video .set__n-o{ stroke: #272f2c; stroke-width: 4; } #video .set__n-u{ stroke: #faf9f1; stroke-width: 1.8; } #video .set__n-mk{ stroke: #ef5428; stroke-width: 5; stroke-linecap: butt !important; } /* mikrofon: motka ulazi zdesna i pretapa se --kraj px iza okvira; mikrofon visi iznad klape */ #video .set__boom{ position: absolute; z-index: 3; top: var(--boom-y, -18px); height: 12px; left: calc(var(--fl) + (100% - var(--fl) - var(--fr)) * var(--mx, .64)); right: calc(var(--fr) - var(--kraj)); } #video .set__motka{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; -webkit-mask: linear-gradient(to left, #0000, #000 60px); mask: linear-gradient(to left, #0000, #000 60px); } #video .set__mik{ position: absolute; top: 10px; left: calc(var(--mik) * -.5); width: var(--mik); height: auto; overflow: visible; transform-origin: 50% 0; transition: rotate .5s cubic-bezier(.3, 1.4, .5, 1); } #video .set__nosac{ fill: none; stroke: #272f2c; stroke-width: 1.5; } #video .set__dlake{ fill: none; stroke: #6f7a6c; stroke-width: 1.1; } #video .set__vlakna{ fill: none; stroke: #b9c0ae; stroke-width: 1; } #video .kino:not(.kino--mrak) .kino__scena:has(.kino__igraj:hover) .set__mik{ rotate: -5deg; } #video .kino__scena:has(.kino__igraj:hover) .set__tally{ fill: #f7b9a3; } /* tabla „Snimamo” visi na dvije žice iznad klape; ugašena, a upali se dok video svira */ #video .set__tabla{ position: absolute; z-index: 2; top: calc(var(--pojas) - 44px); left: calc(var(--fl) + (100% - var(--fl) - var(--fr)) * var(--tx, .36)); translate: -50% 0; display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 12px; font: 700 12px/1 var(--pismo-mono); letter-spacing: .24em; text-transform: uppercase; color: #5d665a; background: #f1f0e6; border: 1.4px solid #272f2c; border-radius: 3px; box-shadow: inset 0 0 0 2.5px #faf9f1, inset 0 0 0 3.6px #d4dacb; transition: background .35s, color .35s, box-shadow .35s; } #video .set__tabla::before{ content: ""; position: absolute; bottom: 100%; left: 18%; right: 18%; height: 22px; border: solid #272f2c; border-width: 0 1.4px; -webkit-mask: linear-gradient(#0000, #000 70%); mask: linear-gradient(#0000, #000 70%); } #video .set__tabla i{ width: 8px; height: 8px; border-radius: 50%; background: #9aa290; } /* --- svira: tabla svijetli, REC trepće, lampica kamere je crvena, role se vrte */ #video .kino--mrak .set__tabla{ color: #fff; background: #c23a0e; box-shadow: inset 0 0 0 2.5px #c23a0e, inset 0 0 0 3.6px rgb(255 255 255 / .38), 0 0 0 5px rgb(239 84 40 / .14), 0 4px 24px rgb(239 84 40 / .5); } #video .kino--mrak .set__tabla i{ background: #fff; animation: d-rec 1.2s steps(1) infinite; } #video .kino--mrak .set__tally{ fill: #ef5428; } #video .kino--mrak .set__rola{ animation: d-rola 3s .2s linear infinite; } @keyframes d-rec{ 50%{ opacity: .2; } } @keyframes d-rola{ to{ rotate: 1turn; } } /* --- ulaz (≈1,5 s): klapa dođe otvorena, kadar se odmota, stativ se raširi i kamera sjedne, motka uđe, tabla se spusti; „Akcija!” i klap ≈0,86 s, tabla jednom trepne ≈1,1 s; zatim projektor (postojeći) */ #video .kino__scena[data-ulaz="ceka"] :is(.set__kamera, .set__boom, .set__tabla){ opacity: 0; } #video .kino__scena[data-ulaz="ide"] .kino__platno{ animation: c-odmotaj .62s .12s cubic-bezier(.65, 0, .25, 1) backwards; } @keyframes c-odmotaj{ from{ opacity: 1; clip-path: inset(-150px -16px 100% -16px); } to{ opacity: 1; clip-path: inset(-150px -16px -16px -16px); } } #video .kino__scena[data-ulaz="ide"] .kino__klapa{ animation: c-klapa-dodi .42s cubic-bezier(.2, .8, .2, 1) backwards; } @keyframes c-klapa-dodi{ from{ opacity: 0; translate: 0 -8px; } } #video .kino__scena[data-ulaz="ide"] .kino__letva--gore{ animation: c-klapa-ulaz 1.2s linear backwards; } @keyframes c-klapa-ulaz{ 0%, 62%{ rotate: var(--kut); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 74%{ rotate: 0deg; animation-timing-function: ease-out; } 81%{ rotate: calc(var(--kut) * .14); animation-timing-function: ease-in; } 88%{ rotate: 0deg; animation-timing-function: ease-in-out; } 100%{ rotate: var(--mirno); } } #video .kino__scena[data-ulaz="ide"] .kino__vrpca i{ animation: c-vrpca-odmotaj .85s .12s cubic-bezier(.2, .7, .3, 1) backwards; } @keyframes c-vrpca-odmotaj{ from{ translate: 0 calc(var(--rk) * -3); } } #video .kino__scena[data-ulaz="ide"] .kino__ploca > *{ animation: kino-pojavi .3s calc(.6s + var(--p, 0s)) ease backwards; } #video .kino__ploca > :nth-child(2){ --p: .07s; } #video .kino__ploca > :nth-child(3){ --p: .14s; } #video .kino__ploca > :nth-child(4){ --p: .21s; } #video .kino__scena[data-ulaz="ide"] .set__noge{ animation: d-noge .5s cubic-bezier(.2, .8, .2, 1) backwards; } #video .kino__scena[data-ulaz="ide"] .set__glava{ animation: d-glava .5s .26s cubic-bezier(.3, 1.5, .5, 1) backwards; } #video .kino__scena[data-ulaz="ide"] .set__boom{ animation: d-boom .6s .1s cubic-bezier(.2, .8, .2, 1) backwards; } #video .kino__scena[data-ulaz="ide"] .set__mik{ animation: d-ton .8s .6s ease-out backwards; } #video .kino__scena[data-ulaz="ide"] .set__tabla{ animation: d-tabla .45s .5s cubic-bezier(.3, 1.5, .5, 1) backwards, d-proba .4s 1.1s; } @keyframes d-noge{ from{ transform: scaleY(0); } } @keyframes d-glava{ from{ opacity: 0; transform: translateY(-20px); } } @keyframes d-boom{ from{ opacity: 0; transform: translateX(var(--boom-od, 60px)); } } @keyframes d-ton{ 0%{ rotate: 9deg; } 30%{ rotate: -6deg; } 60%{ rotate: 2deg; } 100%{ rotate: 0deg; } } @keyframes d-tabla{ from{ opacity: 0; translate: -50% -24px; } } @keyframes d-proba{ 50%{ color: #fff; background: #ef5428; } } #video .kino:has(> .kino__scena[data-ulaz="ceka"]) .kino__niz em{ opacity: 0; } #video .kino:has(> .kino__scena[data-ulaz="ceka"]) .kino__niz i{ scale: 0 1; } #video .kino:has(> .kino__scena[data-ulaz="ide"]) .kino__niz span{ animation: c-upali .5s calc(.2s + var(--n) * .32s) ease; } #video .kino:has(> .kino__scena[data-ulaz="ide"]) .kino__niz i{ animation: c-crta .26s calc(.4s + var(--n) * .32s) ease-out backwards; } #video .kino:has(> .kino__scena[data-ulaz="ide"]) .kino__niz em{ animation: c-akcija .5s .86s cubic-bezier(.3, 1.6, .5, 1) backwards; } @keyframes c-upali{ 35%{ color: #c23a0e; } } @keyframes c-crta{ from{ scale: 0 1; } } @keyframes c-akcija{ from{ opacity: 0; scale: .55; } 40%{ opacity: 1; } } /* --- novi video krene (.kino--klap): Ton (mikrofon se zanjiše) → Kamera → Akcija! (klapa klapne) */ #video .kino--klap .kino__letva--gore{ animation: c-klapa-klap .8s linear; } @keyframes c-klapa-klap{ 0%{ rotate: var(--mirno); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } 36%, 52%{ rotate: var(--kut); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 64%{ rotate: 0deg; animation-timing-function: ease-out; } 72%{ rotate: calc(var(--kut) * .14); animation-timing-function: ease-in; } 80%{ rotate: 0deg; animation-timing-function: ease-in-out; } 100%{ rotate: var(--mirno); } } #video .kino--klap .set__mik{ animation: d-ton .8s ease-out; } #video .kino--klap .kino__niz span{ animation: c-upali .4s calc(var(--n) * .2s) ease; } #video .kino--klap .kino__niz i{ animation: c-crta .2s calc(.1s + var(--n) * .2s) ease-out backwards; } #video .kino--klap .kino__niz em{ animation: c-akcija .45s .44s cubic-bezier(.3, 1.6, .5, 1) backwards; } #video .kino--mrak .kino__vrpca i{ animation: c-vrpca-tece 1.8s linear infinite; } @keyframes c-vrpca-tece{ to{ translate: 0 var(--rk); } } /* ===== raspored ===== */ /* računalo: tekst | kamera na stativu | kadar; program visi s donjih kutova okvira */ @media (min-width: 1281px){ #video .kino{ grid-template-columns: 300px minmax(0, 1fr); column-gap: 30px; } #video .kino__scena{ --kam: clamp(104px, 8.4vw, 124px); --fl: calc(var(--kam) + 10px); grid-template-columns: var(--kam) minmax(0, 1fr); column-gap: 10px; } #video .set__kamera{ display: flex; grid-row: 1 / 3; padding: calc(var(--pojas) + var(--kh) * 2 + 96px) 0 20px; } #video .set__kamera::after{ content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: 14px; height: 12px; background: radial-gradient(closest-side, rgb(39 47 44 / .14), #0000); } #video .kino__platno, #video .kino__program{ grid-column: 2; } #video .kino__program{ margin-top: -4px; } #video .kino__konop{ left: -14px; width: calc(100% + 28px); max-width: none; } #video .kino__platno::before, #video .kino__platno::after{ content: ""; position: absolute; z-index: 2; top: 100%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 3px solid #ef5428; border-radius: 50%; background: #fff; box-sizing: border-box; box-shadow: 1px 2px 2px rgb(0 0 0 / .2); } #video .kino__platno::after{ left: 100%; } } /* 1281–1439: stativ stoji uz kadar, program ide ispod cijele scene (naslovi ulaznica ostaju u dva retka) */ @media (min-width: 1281px) and (max-width: 1439px){ #video .kino{ grid-template-columns: 268px minmax(0, 1fr); column-gap: 26px; } #video .set__kamera{ grid-row: 1; padding-bottom: 0; } #video .set__kamera::after{ bottom: -6px; } #video .kino__program{ grid-column: 1 / -1; margin-top: 30px; } #video .kino__konop{ left: -28px; width: calc(100% + 56px); } #video .kino__platno::before, #video .kino__platno::after{ content: none; } } @media (min-width: 761px) and (max-width: 1280px){ #video .kino__tekst{ grid-template-areas: "naslov opis" "niz opis"; } #video .kino__tekst > h2{ grid-area: naslov; } #video .kino__opis{ grid-area: opis; } #video .kino__tekst > .kino__niz{ grid-area: niz; margin: 0; padding-top: 12px; } #video .kino__scena{ --otvor: 20px; --mir: 6px; } } /* 941–1280: kamera (zrcaljena, gleda u kadar) stoji na vrhu stupca s ulaznicama; mikrofon ulazi slijeva */ @media (min-width: 941px) and (max-width: 1280px){ #video .kino__scena{ --vr: 24px; --rw: 9px; --rk: 14px; --fr: 284px; --mx: .2; --tx: .56; --kraj: -24px; } #video .kino__program{ margin-top: calc(var(--pojas) + var(--kh) * 2 + 3px); } #video .set__kamera{ display: flex; position: absolute; top: 6px; right: 176px; width: 88px; height: calc(var(--pojas) + var(--kh) * 2 - 3px); scale: -1 1; } #video .set__boom{ left: calc(-1 * var(--kraj)); right: calc(100% - (100% - var(--fr)) * var(--mx)); scale: -1 1; } #video .kino__ploca{ height: 32px; } #video .kino__polje{ padding: 0 12px; } #video .kino__polje b{ font-size: 16px; } } @media (min-width: 941px) and (max-width: 1100px){ #video .kino__polje--prod small{ display: none; } } /* do 940: kamera bez nogu lijevo iznad klape, tabla u sredini, mikrofon zdesna */ @media (max-width: 940px){ #video .kino__scena{ --tx: .5; --mx: .8; --kraj: -14px; } #video .set__kamera{ display: block; position: absolute; top: 0; left: 6px; width: 72px; rotate: 9deg; } #video .set__noge{ display: none; } } @media (max-width: 760px){ #video .kino{ gap: 22px; padding-top: 30px; } #video .kino__tekst > .kino__niz{ margin-top: 16px; padding-top: 12px; } #video .kino__scena{ --kh: 16px; --vr: 11px; --rw: 7px; --rk: 11px; --pruge: 8; --otvor: 15px; --mir: 5px; --pojas: 48px; --mik: 70px; --boom-y: -8px; padding: 0 0 24px; } #video .set__kamera{ width: 54px; left: 2px; } #video .set__tabla{ top: calc(var(--pojas) - 38px); padding: 6px 10px 6px 9px; font-size: 11px; letter-spacing: .14em; gap: 7px; } #video .set__tabla i{ width: 7px; height: 7px; } #video .kino__platno{ padding: 5px var(--vr) 0; border-radius: 3px; box-shadow: 4px 4px 0 #d4dacb; } #video .kino__ekran{ outline-offset: 2px; } #video .kino__letva{ border-width: 1.2px; } #video .kino__zglob{ left: -6px; top: calc(var(--kh) - 6px); width: 12px; height: 12px; border-width: 3px; } #video .kino__ploca{ height: 30px; } #video .kino__polje--prod{ display: none; } #video .kino__polje{ flex: 1 1 auto; justify-content: center; gap: 6px; padding: 0 5px; } #video .kino__polje:nth-child(2){ border-left: 0; } #video .kino__polje small{ font-size: 11px; letter-spacing: .08em; } #video .kino__polje b{ font-size: 15px; } #video .kino__polje b.kino__ton{ height: 11px; } } @media (max-width: 360px){ #video .kino__scena{ --vr: 10px; --rw: 6px; --rk: 10px; } #video .kino__tekst > .kino__niz{ gap: 7px; letter-spacing: .12em; } #video .kino__polje small{ letter-spacing: .02em; } #video .kino__scena{ --tx: .44; --mik: 58px; } #video .kino__polje:last-child small{ display: none; } #video .set__kamera{ width: 46px; } #video .set__tabla{ padding: 5px 8px; letter-spacing: .12em; gap: 6px; } #video .kino__igraj > span{ width: 56px; height: 56px; border-width: 6px; box-shadow: 0 0 0 6px rgb(255 255 255 / .28), 0 12px 24px rgb(22 24 26 / .35); } #video .kino__igraj svg{ width: 20px; height: 20px; margin-left: 4px; } } /* do 1280 px ništa iz kina ne ide lijevo od sadržaja (traka žičare): zglob klape sjedne na rub okvira */ @media (max-width: 1280px){ #video .kino__zglob{ left: 0; } }