/* ========================================================== Pjevanje prvo — o crnokosoj Derviši ========================================================== */ :root { --noc-1: #05081a; --noc-2: #0b1430; --noc-3: #15244a; --zlato: #d8b56a; --zlato-svijetlo: #f0d9a0; --zlato-tamno: #9a7a3a; --pergament: #efe2c1; --pergament-tamni: #d9c291; --tinta: #3a2a17; --tinta-blijeda: #6d5634; --zelena: #3f8f6b; --zelena-svijetla: #7fc4a0; --roza: #e8a3a8; --zora-zlato: #f3c983; --zora-tinta: #2c2140; --font-naslov: "Cinzel", Georgia, serif; --font-elegantni: "EB Garamond", Georgia, serif; --font-stih: "EB Garamond", Georgia, serif; --spor: 1.6s; --kriva: cubic-bezier(.22, .61, .36, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--noc-1); } html.zatvoreno { overflow: hidden; } html.zatvoreno body { overflow: hidden; } body { margin: 0; min-height: 100vh; /* Pozadina je na , da nebo i zvijezde (z-index < 0) ostanu vidljivi */ background: transparent; color: var(--zlato-svijetlo); font-family: var(--font-stih); font-size: 1.125rem; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } img { display: block; max-width: 100%; height: auto; } /* ---------- Nebo (fiksni slojevi) ---------- */ .nebo, .zvijezde, .zora { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; } .nebo { z-index: -3; background: radial-gradient(ellipse 120% 70% at 50% 110%, rgba(40, 60, 110, .45), transparent 60%), radial-gradient(ellipse 80% 50% at 80% 0%, rgba(30, 40, 90, .35), transparent 70%), linear-gradient(180deg, var(--noc-1) 0%, var(--noc-2) 55%, var(--noc-3) 100%); } .zvijezde { z-index: -2; } .zora { z-index: -1; opacity: 0; background: radial-gradient(ellipse 140% 60% at 50% 105%, rgba(255, 226, 170, .95), transparent 65%), linear-gradient(180deg, #3e3666 0%, #7e5584 22%, #c9879c 46%, #eaa8a4 66%, #f6cf93 85%, #fbe3b8 100%); will-change: opacity; } /* ---------- Zajedničko ---------- */ .dugme { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; padding: .85em 2.1em; font-family: var(--font-naslov); font-size: .95rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border-radius: 2px; cursor: pointer; transition: background-color .6s var(--kriva), color .6s var(--kriva), border-color .6s var(--kriva), box-shadow .6s var(--kriva); } .dugme:focus-visible { outline: 2px solid var(--zelena-svijetla); outline-offset: 4px; } .dugme-zlatno { color: var(--zlato-svijetlo); background: rgba(216, 181, 106, .06); border: 1px solid rgba(216, 181, 106, .6); box-shadow: inset 0 0 0 4px rgba(5, 8, 26, .9), inset 0 0 0 5px rgba(216, 181, 106, .25); } .dugme-zlatno:hover, .dugme-zlatno:active { background: rgba(216, 181, 106, .16); border-color: var(--zlato); } .naslov-odjeljka { margin: 0 0 .6rem; font-family: var(--font-naslov); font-weight: 400; font-size: clamp(1.5rem, 6.5vw, 2.4rem); letter-spacing: .16em; text-transform: uppercase; text-align: center; color: var(--zlato); } .invokacija { max-width: 30rem; margin: 0 auto; font-family: var(--font-elegantni); font-style: italic; font-size: clamp(1.1rem, 4.4vw, 1.3rem); text-align: center; color: rgba(240, 217, 160, .72); } /* Grčki meandar kao razdjelnik */ .meandar { width: min(280px, 70%); height: 14px; margin: 0 auto 2.2rem; opacity: .55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 13h6V1h12v9h-6V5h-2v8h18' fill='none' stroke='%23d8b56a' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x center / auto 100%; } /* ---------- Otkrivanje pri scrollu ---------- */ .otkrij { opacity: 0; transform: translateY(22px); transition: opacity var(--spor) var(--kriva), transform var(--spor) var(--kriva); } .otkrij.vidljivo { opacity: 1; transform: none; } /* ========================================================== 1. UVOD ========================================================== */ .uvod { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom)); text-align: center; } .uvod-sadrzaj { max-width: 36rem; } .uvod-nadnaslov { margin: 0 0 1.4rem; font-family: var(--font-naslov); font-size: .72rem; letter-spacing: .38em; text-transform: uppercase; color: rgba(216, 181, 106, .55); opacity: 0; animation: pojava 3s var(--kriva) .3s forwards; } .uvod-naslov { margin: 0; font-family: var(--font-naslov); font-weight: 400; font-size: clamp(2.1rem, 11vw, 4.6rem); line-height: 1.1; letter-spacing: .14em; text-transform: uppercase; color: var(--zlato); text-shadow: 0 0 28px rgba(216, 181, 106, .28); opacity: 0; animation: pojava-naslov 3.6s var(--kriva) .9s forwards; } .uvod-podnaslov { margin: 1.1rem 0 3rem; font-family: var(--font-elegantni); font-style: italic; font-size: clamp(1.35rem, 6vw, 2rem); color: var(--zlato-svijetlo); opacity: 0; animation: pojava 3s var(--kriva) 2.8s forwards; } .uvod .dugme { opacity: 0; animation: pojava 2.4s var(--kriva) 4.2s forwards; } @keyframes pojava { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes pojava-naslov { from { opacity: 0; letter-spacing: .3em; filter: blur(6px); } to { opacity: 1; letter-spacing: .14em; filter: none; } } /* ========================================================== 2. KATALOG TRENUTAKA ========================================================== */ .katalog { padding: 5.5rem 1.25rem 5rem; } .katalog .invokacija { margin-bottom: 4rem; } .galerija { display: flex; flex-direction: column; align-items: center; gap: clamp(4rem, 14vw, 6.5rem); max-width: 34rem; margin: 0 auto; } .trenutak { width: 100%; margin: 0; text-align: center; } .trenutak-broj { display: block; margin-bottom: .9rem; font-family: var(--font-naslov); font-size: .8rem; letter-spacing: .3em; color: rgba(216, 181, 106, .6); } .okvir { position: relative; padding: 9px; border: 1px solid rgba(216, 181, 106, .45); background: rgba(216, 181, 106, .04); } .okvir::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(216, 181, 106, .18); pointer-events: none; } .okvir img { width: 100%; max-height: 78vh; object-fit: cover; background: rgba(21, 36, 74, .6); opacity: 0; transition: opacity 1.4s var(--kriva); } .okvir img.ucitana { opacity: 1; } .trenutak figcaption { margin: 1.3rem auto 0; max-width: 26rem; font-family: var(--font-elegantni); font-style: italic; font-size: clamp(1.18rem, 4.8vw, 1.4rem); line-height: 1.45; color: var(--zlato-svijetlo); } /* ========================================================== 3. PJESMA (svitak) ========================================================== */ .pjesma { padding: 3rem .75rem 4rem; } .svitak { position: relative; max-width: 40rem; margin: 0 auto; padding: 3.6rem clamp(1.15rem, 5.5vw, 3.4rem) 3.4rem; color: var(--tinta); background-color: var(--pergament); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 40%, rgba(255, 250, 235, .55), transparent 70%), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(150, 110, 50, .28) 100%), linear-gradient(180deg, #e9d8ae, var(--pergament) 12%, var(--pergament) 88%, #e3cf9f); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(120, 90, 40, .25); border-radius: 3px; } /* Smotani krajevi svitka */ .svitak::before, .svitak::after { content: ""; position: absolute; left: -.55rem; right: -.55rem; height: 1.3rem; border-radius: 999px; background: linear-gradient(180deg, #b8995c 0%, #ecdcb0 30%, #f7ecd0 45%, #d8c08a 70%, #9c7d45 100%); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); } .svitak::before { top: -.65rem; } .svitak::after { bottom: -.65rem; } .svitak-naslov { margin: 0; font-family: var(--font-naslov); font-weight: 600; font-size: clamp(1.15rem, 5.2vw, 1.6rem); letter-spacing: .16em; text-transform: uppercase; text-align: center; color: #6b4b1e; } .ukras { margin: 1.2rem 0 2.2rem; text-align: center; font-size: 1rem; color: var(--zlato-tamno); letter-spacing: 1em; padding-left: 1em; } .svitak .ukras:last-child { margin: 2.4rem 0 0; } .strofa { margin: 0 0 2.1rem; font-family: var(--font-stih); font-size: clamp(1.1rem, 4.5vw, 1.32rem); line-height: 1.62; color: var(--tinta); hyphens: manual; } .strofa:last-of-type { margin-bottom: 0; } /* Hanging indent: kad se dugi heksametar prelomi na mobitelu, nastavak je uvučen, pa se jasno vidi gdje počinje novi stih. */ .stih { display: block; padding-left: 1em; text-indent: -1em; } .strofa:first-of-type .stih:first-child::first-letter { float: left; margin: .08em .1em 0 0; font-family: var(--font-naslov); font-size: 2.7em; line-height: .85; color: #7a5520; text-indent: 0; } /* Nakon inicijala: nema potrebe za uvlakom u prvom stihu */ .strofa:first-of-type .stih:first-child { padding-left: 0; text-indent: 0; } .strofa-zadnja { font-style: italic; color: #2d3f2a; } .strofa.otkrij { transform: translateY(14px); transition-duration: 1.9s; } .strofa.otkrij.vidljivo { transform: none; } /* ========================================================== 4. KRAJ — prelaz iz noći u zoru ========================================================== */ .kraj { position: relative; } .prelaz { min-height: 90vh; min-height: 90svh; display: grid; place-items: center; padding: 0 1.5rem; } .prelaz-stih { margin: 0; font-family: var(--font-elegantni); font-style: italic; font-size: clamp(1.2rem, 5vw, 1.5rem); text-align: center; color: rgba(255, 240, 225, .85); text-shadow: 0 1px 16px rgba(40, 20, 60, .5); } .kraj-sadrzaj { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.25rem calc(3rem + env(safe-area-inset-bottom)); text-align: center; color: var(--zora-tinta); } .kraj-nadnaslov { margin: 0 0 .9rem; font-family: var(--font-naslov); font-size: .78rem; letter-spacing: .38em; text-transform: uppercase; color: rgba(44, 33, 64, .65); } .kraj-naslov { margin: 0; font-family: var(--font-naslov); font-weight: 400; font-size: clamp(1.7rem, 8vw, 3rem); line-height: 1.2; letter-spacing: .08em; color: var(--zora-tinta); } .kraj-poziv { margin: 1.1rem 0 2.6rem; font-family: var(--font-elegantni); font-style: italic; font-size: clamp(1.35rem, 6vw, 1.8rem); color: #3d2f55; } .izbor { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; width: 100%; max-width: 26rem; } .dugme-zora { flex: 1 1 10rem; color: var(--zora-tinta); background: rgba(255, 248, 235, .45); border: 1px solid rgba(44, 33, 64, .45); box-shadow: 0 8px 30px rgba(160, 80, 90, .18); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); letter-spacing: .12em; } .dugme-zora:hover, .dugme-zora:active { background: rgba(255, 248, 235, .8); border-color: var(--zelena); color: #1f4a37; } .kolofon { margin: 3.5rem 0 0; font-family: var(--font-naslov); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(44, 33, 64, .5); } /* ---------- Dugme za muziku ---------- */ .muzika-dugme { position: fixed; right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 10; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: var(--zlato); background: rgba(5, 8, 26, .55); border: 1px solid rgba(216, 181, 106, .4); border-radius: 50%; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .8s var(--kriva), color .8s, border-color .8s; } .muzika-dugme[hidden] { display: none; } .muzika-dugme svg { width: 20px; height: 20px; } .muzika-dugme .precrtano { opacity: 0; transition: opacity .4s; } .muzika-dugme[aria-pressed="false"] .precrtano { opacity: 1; } .muzika-dugme[aria-pressed="false"] { opacity: .7; } .muzika-dugme:focus-visible { outline: 2px solid var(--zelena-svijetla); outline-offset: 3px; } /* ---------- Veći ekrani ---------- */ @media (min-width: 720px) { .katalog { padding-top: 8rem; } .pjesma { padding: 5rem 1.5rem 6rem; } .svitak { padding-top: 4.6rem; padding-bottom: 4.4rem; } } /* ---------- Smanjeno kretanje ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; } .otkrij { opacity: 1; transform: none; } }