/* ═══════════════════════════════════════════════════════════════
CRNI HRAM · građa
Sve mjere dolaze iz css/temelj.css. Ovdje se od njih slaže hram:
zaglavlje, odjeljci, mediji, komora znakova, arhiv, podnožje.
═══════════════════════════════════════════════════════════════ */
/* ═══ 1 · NOSIVA MREŽA ═══════════════════════════════════════ */
.pojas {
width: min(100% - 2 * var(--pojas), var(--sirina));
margin-inline: auto;
}
.pojas-siroko { width: min(100% - 2 * var(--pojas), 1560px); margin-inline: auto; }
.pojas.clanak { width: min(100% - 2 * var(--pojas), var(--clanak)); }
/* Mjera za čitanje. Redak duži od ovoga oko se izgubi. */
.tekst { max-width: var(--stupac); }
.tekst-usko { max-width: 52ch; }
.odsjek {
position: relative;
padding-block: var(--odjeljak);
}
.odsjek + .odsjek { padding-top: 0; }
/* Članak: tri stupca — traka oznake, mjera za čitanje, rub.
Ispod 1060 px sve tri padaju u jedan i poravnaju se lijevo.
Prije je članak bio dvostupčan i razapet preko cijele mjere
stranice: traka od 190 px lijevo, pa sve ostalo. Tekst je u tom
„sve ostalo” bio širok 58ch i stajao uz lijevi rub, pa je na
širokom zaslonu desna trećina ostajala prazna kroz cijelo
poglavlje — ne kao zrak, nego kao rupa.
Sada je rub s desne strane jednako širok kao traka s lijeve, a
`justify-content: center` drži cijeli sklop na sredini stranice.
Stupac za čitanje time pada točno na os stranice. Ono što je
doista široko — mreže, tablice, vremenska crta — probija oba
ruba i uzima punu mjeru članka (--probij). */
.clanak {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--r5);
}
.clanak > .traka-oznake { grid-column: 1; }
@media (min-width: 1060px) {
.clanak {
grid-template-columns:
minmax(0, var(--rub-stupac)) minmax(0, var(--stupac)) minmax(0, var(--rub-stupac));
justify-content: center;
column-gap: var(--r8);
/* Red do reda: prije `--r7` (48 px). Zajedno s razmakom odjeljka i
razmakom ispod uvoda to je davalo preko sto piksela između
zadnjeg retka uvoda i prve kartice plakata. */
row-gap: var(--r6);
}
.clanak > .traka-oznake { grid-column: 1; grid-row: 1 / span 2; }
.clanak > .zaglavlje,
.clanak > .telo { grid-column: 2; }
/* Zaglavlje poglavlja uzima i desni rub — ali samo na prednjoj
stranici, ne u čitaonici.
Naslov i uvod su stajali u stupcu za čitanje od 58ch, a desno od
njih je do ruba prozora ostajalo 425 px crnine kroz cijelu visinu
zaglavlja. To nije bio zrak nego rupa: „Balkanski rječnik svetog”
se lomio u dva retka premda bi u jedan stao, i svako je poglavlje
počinjalo praznim gornjim desnim kutom.
U čitaonici ovo ne vrijedi: ondje je ispod zaglavlja proza, i
njoj mjera za čitanje mora ostati mjera za čitanje. */
body:not(.soba) .clanak > .zaglavlje { grid-column: 2 / span 2; }
body:not(.soba) .clanak > .zaglavlje .uvod { max-width: 62ch; }
/* Naslov više ne mora balansirati retke: kad ih je balansirao u
stupcu od 824 px, radije je lomio na dva kratka nego ispisao
jedan pun, pa je desno ostajala ista rupa zbog koje je stupac i
proširen. */
body:not(.soba) .clanak > .zaglavlje h2 { text-wrap: pretty; }
/* Urez prelazi cijelo zaglavlje: zlatna crtica pa vlas koja blijedi
do desnog ruba. Time crnina desno od uvoda postaje rub stranice, a
ne rupa u njoj — a povlači se istim potezom kao i prije, jer se
`scaleX` ne tiče širine. */
body:not(.soba) .clanak > .zaglavlje .urez {
position: relative;
width: 100%; height: 1px;
background: linear-gradient(to right,
var(--rub-jaci), rgba(236, 233, 226, .015));
}
body:not(.soba) .clanak > .zaglavlje .urez::after {
content: "";
position: absolute; left: 0; top: -1px;
width: 64px; height: 2px;
background: var(--zlato);
}
.clanak > .traka-oznake { position: sticky; top: calc(var(--traka-h) + var(--r6)); align-self: start; }
.clanak > .telo { --probij: calc(var(--rub-stupac) + var(--r8)); }
}
:root { --rub-stupac: 170px; }
.telo { --probij: 0px; }
/* Sve što nije redak teksta uzima punu mjeru članka.
`:where()` drži težinu na nuli, pa .probija ispod uvijek pretekne
ovo pravilo bez trke u specifičnosti. */
:where(.telo) > :where(.niz, .rijeci, .opreka, .arhiv, .tablica,
.crta, .zapis, .pitanja) {
width: calc(100% + 2 * var(--probij));
margin-inline: calc(-1 * var(--probij));
max-width: none;
}
/* Probijanje do široke mjere.
Stupac za čitanje leži točno na osi stranice — traka oznake lijevo
i rub desno jednako su široki, pa je središte stupca ujedno i
središte prozora. Zbog toga se sve što treba biti šire može
proširiti računom nad vlastitim roditeljem, bez ijednog `transform`
koji bi se potukao s pogonom pokreta. */
.probija {
--mjera: min(100vw - 2 * var(--pojas), 1560px);
width: var(--mjera);
margin-inline: calc((100% - var(--mjera)) / 2);
max-width: none;
}
/* ═══ 2 · OZNAKE, NASLOVI, UVOD ══════════════════════════════ */
.oznaka {
display: block;
font-family: var(--pismo-ui);
font-size: var(--t-oznaka);
font-weight: 700;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--zlato);
margin: 0 0 var(--r3);
}
.oznaka .broj {
display: block;
font-family: var(--pismo-vel);
font-size: 2.6rem;
font-weight: 400;
letter-spacing: .04em;
line-height: 1;
color: var(--zlato);
margin-bottom: var(--r3);
}
.oznaka .rijec { display: block; color: var(--kost-3); letter-spacing: .26em; }
/* Znamen poglavlja: brojka koja stoji iza naslova, velika i jedva
vidljiva. U traci oznake ista brojka stoji sitna i čitljiva — ovo
nije njezino ponavljanje nego njezina sjena. Zaglavlje je dosad
počinjalo na goloj crnini i naslov nije imao o što se osloniti;
sada ima. Pri pokretu se znamen vozi sporije od naslova, pa se
dubina vidi i bez ijedne animacije.
Znamen dolazi iz `data-znamen`, pa nema svog čvora u građi i čitač
zaslona ga ne izgovara — brojku poglavlja on već ima iz oznake. */
.zaglavlje { position: relative; isolation: isolate; }
.zaglavlje > * { position: relative; z-index: 1; }
.zaglavlje[data-znamen]::before {
content: attr(data-znamen);
position: absolute; z-index: 0;
/* Znamen izlazi iznad naslova, ne iza njegovih slova. Kad je stajao
niže, „XII” je padao točno preko „KALENDAR” i čitao se kao mrlja;
ovako se vidi njegov donji rub i ništa više. */
left: -.08em; top: -.58em;
font-family: var(--pismo-vel);
font-size: clamp(5.5rem, 11vw, 12rem);
line-height: .74; letter-spacing: -.015em;
color: var(--zlato);
/* Znamen mora ostati ispod praga na kojem ga oko počne čitati kao
tekst. Na sedam posto se „XII” vidjelo kao mrlja preko naslova i
otimalo mu prvi pogled; na četiri se vidi samo da iza naslova
nešto stoji, a to je sve što se od njega traži. */
opacity: .042;
transform: translateY(var(--znamen-y, 0px));
pointer-events: none; user-select: none;
white-space: nowrap;
}
/* Na uskom zaslonu znamena nema. Traka oznake se ondje slaže iznad
naslova, pa znamen nema kamo osim ravno preko slova — a brojka
poglavlja tamo ionako stoji velika i čitljiva, na dva reda iznad. */
@media (max-width: 720px) {
.zaglavlje[data-znamen]::before { display: none; }
}
.zaglavlje h2 { margin-bottom: var(--r5); }
/* Urez ispod naslova: kratka crta, ne ukras nego interpunkcija. */
.urez {
display: block;
width: 64px; height: 2px;
background: var(--zlato);
margin: var(--r5) 0 0;
transform-origin: left center;
}
.uvod {
font-family: var(--pismo-ured);
font-size: var(--t-uvod);
line-height: 1.5;
color: var(--kost-2);
max-width: 46ch;
margin: 0;
}
/* ═══ 3 · ZAGLAVLJE STRANICE ═════════════════════════════════ */
.traka {
position: fixed; inset: 0 0 auto; z-index: var(--z-traka);
display: flex; align-items: center; gap: var(--r5);
height: var(--traka-h);
padding-inline: clamp(16px, 4vw, 44px);
color: var(--kost);
transition: background var(--tempo) var(--izlaz),
border-color var(--tempo) var(--izlaz);
border-bottom: 1px solid transparent;
}
/* Nad zaglavljem je prozirna; čim se krene, dobije svoju crninu. */
.traka.spustena {
background: rgba(4, 4, 6, .84);
backdrop-filter: blur(16px) saturate(.9);
-webkit-backdrop-filter: blur(16px) saturate(.9);
border-bottom-color: var(--rub);
}
.znak {
display: flex; align-items: center; gap: var(--r3);
color: var(--kost); flex-shrink: 0;
min-height: 44px;
}
.znak img { width: 22px; height: auto; }
.znak span {
font-family: var(--pismo-znak);
font-size: 1.35rem;
letter-spacing: .02em;
line-height: 1;
padding-top: .1em;
}
.znak:hover { color: var(--zlato-2); }
.veze {
margin-left: auto;
display: flex; align-items: center; gap: var(--r1);
}
.veze a {
position: relative;
font-family: var(--pismo-ui);
font-size: var(--t-oznaka);
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kost-2);
padding: var(--r3) var(--r3);
transition: color var(--brzo) var(--izlaz);
}
.veze a:hover, .veze a.tu { color: var(--zlato-2); }
.veze a::after {
content: "";
position: absolute; left: var(--r3); right: 100%; bottom: 8px;
height: 1px; background: var(--zlato);
transition: right var(--tempo) var(--hod);
}
.veze a:hover::after, .veze a.tu::after { right: var(--r3); }
@media (max-width: 1039px) { .veze { display: none; } }
.jezik { display: flex; gap: 2px; flex-shrink: 0; }
@media (max-width: 1039px) { .jezik { margin-left: auto; } }
.jezik a {
display: grid; place-items: center;
min-width: 44px; min-height: 44px;
font-family: var(--pismo-ui);
font-size: var(--t-oznaka); font-weight: 700; letter-spacing: .1em;
color: var(--kost-3);
border: 1px solid var(--rub);
transition: color var(--brzo), border-color var(--brzo);
}
.jezik a:hover { color: var(--zlato-2); border-color: var(--rub-zlato); }
.jezik a[aria-current] { color: #100e0a; background: var(--zlato); border-color: var(--zlato); }
/* Gumb izbornika: jedina navigacija na uskom zaslonu, i „sve” na širokom. */
.gumb-izbornik {
display: flex; align-items: center; justify-content: center; gap: var(--r3);
flex-shrink: 0;
min-width: 44px; min-height: 44px;
background: none; border: 1px solid var(--rub); color: var(--kost);
font-family: var(--pismo-ui); font-size: var(--t-oznaka); font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
padding: 10px 14px; cursor: pointer;
transition: border-color var(--brzo), color var(--brzo);
}
.gumb-izbornik:hover { border-color: var(--rub-zlato); color: var(--zlato-2); }
.gumb-izbornik .prutovi { display: block; width: 16px; height: 9px; position: relative; }
.gumb-izbornik .prutovi::before,
.gumb-izbornik .prutovi::after {
content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
background: currentColor; transition: transform var(--tempo) var(--hod);
}
.gumb-izbornik .prutovi::before { top: 0; }
.gumb-izbornik .prutovi::after { bottom: 0; }
.gumb-izbornik[aria-expanded="true"] .prutovi::before { transform: translateY(3.75px) rotate(45deg); }
.gumb-izbornik[aria-expanded="true"] .prutovi::after { transform: translateY(-3.75px) rotate(-45deg); }
/* Uski zaslon: u traku stane samo ono nužno. Ime hrama nosi pečat,
gumb izbornika ostaje samo znak, a naziv i dalje čita čitač zaslona. */
@media (max-width: 560px) {
.traka { gap: var(--r3); padding-inline: 14px; }
.znak span { display: none; }
.gumb-izbornik { padding: 10px; }
.gumb-izbornik span:not(.prutovi) {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.jezik a { min-width: 40px; }
}
/* ═══ 4 · IZBORNIK PREKO CIJELOG ZASLONA ═════════════════════ */
.izbornik {
position: fixed; inset: 0; z-index: var(--z-izbornik);
background: var(--crno-dublje);
display: grid; align-content: center;
padding: calc(var(--traka-h) + var(--r7)) var(--pojas) var(--r7);
overflow-y: auto;
visibility: hidden; opacity: 0;
transition: opacity var(--tempo) var(--izlaz), visibility 0s linear var(--tempo);
}
.izbornik[data-otvoren] {
visibility: visible; opacity: 1;
transition: opacity var(--tempo) var(--izlaz);
}
.izbornik ol {
list-style: none; margin: 0 auto; padding: 0;
width: min(100%, var(--sirina));
display: grid; gap: 0;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.izbornik li { margin: 0; border-top: 1px solid var(--rub); }
.izbornik a {
display: flex; align-items: baseline; gap: var(--r4);
padding: clamp(12px, 2vh, 20px) var(--r2);
color: var(--kost);
font-family: var(--pismo-vel);
font-size: clamp(1.3rem, 2.6vw, 1.9rem);
letter-spacing: .03em;
transition: color var(--brzo);
}
.izbornik a:hover { color: var(--zlato-2); }
.izbornik a .rb {
font-family: var(--pismo-ui); font-size: var(--t-oznaka); font-weight: 700;
letter-spacing: .16em; color: var(--kost-3); min-width: 2.4em;
}
.izbornik a:hover .rb { color: var(--zlato); }
html[data-izbornik] { overflow: hidden; }
/* ═══ 5 · ULAZ (zaglavlje s hodnikom) ════════════════════════
Ulaz je prikovan: hodnik stoji, listanje ga vozi, a preko njega se
smjenjuju tri izjave. Snimka ide naprijed dok se ide dolje i unatrag
dok se ide gore — ne vrti se sama od sebe, nego se miče točno onoliko
koliko se miče čitatelj.
Prikivanje pali pogon (`.prikovan`), ne stil. Bez pogona — u miru,
na uskom zaslonu, ili ako knjižnica ne stigne — ulaz je jedan
zaslon kao i prije, a tri izjave stoje ispod njega kao običan niz.
Nijedna riječ se ne gubi ni u jednom slučaju.
═══════════════════════════════════════════════════════════ */
.ulaz-hod { position: relative; }
/* Hod je dug koliko ima izjava. Prvi zaslon je ime hrama, pa po
otprilike osamdeset posto zaslona na svaku izjavu. */
.ulaz-hod.prikovan {
height: calc(100svh + var(--izjava-broj, 3) * 82svh);
}
/* Kad ulaz vozi let, hod više ne mjeri izjave nego dionice: svaka
dobiva svoj zaslon i još malo, da se kroz nju stigne proći bez
trke. Izjave se i dalje smjenjuju preko istog hoda — samo ih je
sada manje nego dionica, pa stoje rjeđe. */
.ulaz-hod.prikovan.let-radi {
height: calc(100svh + var(--dionica-broj, 6) * 88svh);
}
.ulaz-hod.prikovan > .ulaz {
position: sticky; top: 0;
height: 100svh; min-height: 0;
}
.ulaz {
position: relative;
min-height: 100svh;
display: grid;
/* Treći red je za izjave kad ulaz nije prikovan: tada stoje ispod
imena hrama, na istoj slici, kao običan niz. */
grid-template-rows: 1fr auto auto;
padding: calc(var(--traka-h) + var(--r7)) 0 var(--r7);
overflow: hidden;
isolation: isolate;
}
.ulaz-medij {
position: absolute; inset: 0; z-index: -2;
overflow: hidden; pointer-events: none;
}
.ulaz-medij img,
.ulaz-medij video {
width: 100%; height: 100%;
object-fit: cover; object-position: center 42%;
}
.ulaz-medij video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--izlaz); }
.ulaz-medij.snima video { opacity: 1; }
.ulaz-medij.snima img { opacity: 0; transition: opacity 1.2s var(--izlaz); }
/* ── let kroz hram: šest dionica jedna preko druge ──────────────
Sve dionice stoje na istom mjestu i sve su ugašene osim one kroz
koju se upravo prolazi. Pali ih pogon (`letHrama`), jednu po jednu,
s uskim preklopom na šavu.
Bez pogona — mir, uzak zaslon, pukla knjižnica — ostaje upaljena
samo prva, kao obična slika praga. Ulaz je tada običan zaslon i
nijedna riječ se ne gubi. */
.let { position: absolute; inset: 0; }
.let-dionica {
position: absolute; inset: 0;
opacity: 0;
will-change: opacity;
}
.let-dionica:first-child { opacity: 1; }
.let-dionica img,
.let-dionica video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center 42%;
}
/* Snimka pokriva plakat tek kad je preglednik doista nacrtao kadar. */
.let-dionica video { opacity: 0; transition: opacity .45s var(--izlaz); }
.let-dionica.snima video { opacity: 1; }
.let-dionica.snima img { opacity: 0; transition: opacity .45s var(--izlaz); }
/* Zastor čitljivosti: crnina jača pri dnu, gdje stoji tekst.
Ovo je maska za čitljivost, ne obojani ukras. */
.ulaz-medij::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(to top, rgba(4,4,6,.95) 0%, rgba(4,4,6,.66) 26%, rgba(4,4,6,.14) 62%, rgba(4,4,6,.5) 100%),
linear-gradient(to right, rgba(4,4,6,.72) 0%, rgba(4,4,6,.12) 46%, rgba(4,4,6,0) 70%);
}
/* ── izjave preko hodnika ──────────────────────────────────────
Bez prikivanja su običan niz ispod ulaza: tri odlomka, jedan za
drugim, sa svojom brojkom. S prikivanjem se slože jedna preko druge
nasred hodnika i pale se redom. */
.ulaz-izjave {
grid-row: 3;
display: grid;
gap: var(--r8);
width: min(100% - 2 * var(--pojas), var(--sirina));
margin: var(--r9) auto 0;
}
.ulaz-izjava {
max-width: 26ch;
font-family: var(--pismo-ured);
font-size: clamp(1.7rem, 3.4vw, 3.2rem);
line-height: 1.14;
letter-spacing: -.004em;
color: var(--kost-3);
text-wrap: pretty;
}
.ulaz-izjava p { margin: 0; }
/* Druga polovica rečenice nosi težinu — ista podjela kao u silasku,
samo obrnuta: ondje se prigušuje nastavak, ovdje uvod. */
.ulaz-izjava em { color: var(--kost); font-style: normal; }
.ulaz-izjava .rb {
display: block;
font-family: var(--pismo-vel);
font-size: 1.5rem;
font-weight: 400; letter-spacing: .2em;
line-height: 1;
color: var(--zlato);
margin-bottom: var(--r5);
}
/* Brojku prati kratka zlatna crta: ista interpunkcija kao urez pod
naslovom poglavlja, pa se tri izjave čitaju kao tri takta. */
.ulaz-izjava .rb::after {
content: "";
display: block;
width: 40px; height: 1px;
background: var(--zlato-3);
margin-top: var(--r3);
}
.prikovan .ulaz-izjave {
position: absolute; inset: 0; z-index: 2;
/* Cijelo polje mreže, ne samo treći red.
Apsolutno položeno dijete mreže koje **ima** određeno mjesto u njoj
ne računa `inset` prema spremniku nego prema svom polju — a treći
red je pri dnu. Izjava je zato sjedala na donji rub zaslona i
ispadala iz kadra, premda je `top: 50%`. */
grid-row: 1 / -1; grid-column: 1 / -1;
display: block;
margin: 0;
width: auto;
padding: 0 var(--pojas);
pointer-events: none;
}
.prikovan .ulaz-izjava {
position: absolute;
left: var(--pojas); right: var(--pojas);
top: 50%;
/* Uspravni pomak vozi pogon (`--dize`), pa se ovdje ne dira ništa
osim polazišta. */
transform: translateY(calc(-50% + var(--dize, 0px)));
max-width: min(20ch, 62vw);
opacity: 0;
will-change: opacity, transform;
}
@media (min-width: 900px) {
/* Izjava stoji desno od svjetlosnog snopa, ne preko njega. Snop je
najsvjetlije mjesto u kadru i jedino na kojem bijelo slovo nema
kontrasta — na 42 % je prvi redak padao točno u njega. */
.prikovan .ulaz-izjava { left: 53%; right: var(--pojas); }
}
/* Bez prikivanja izjave stoje u donjoj polovici iste slike, a ondje
je zastor čitljivosti bio računat za tri retka gesla, ne za tri
izjave. Donja polovica ide dublje u crninu; gornja, gdje se vidi
hodnik, ostaje kakva jest. */
.ulaz-hod:not(.prikovan) .ulaz-medij::after {
background:
linear-gradient(to top, rgba(4,4,6,.96) 0%, rgba(4,4,6,.9) 42%,
rgba(4,4,6,.3) 76%, rgba(4,4,6,.55) 100%),
linear-gradient(to right, rgba(4,4,6,.72) 0%, rgba(4,4,6,.12) 46%, rgba(4,4,6,0) 70%);
}
/* Zastor koji se pali zajedno s izjavom: hodnik se povuče, riječ
dođe naprijed. Jakost vozi pogon (`--zastor`), pa je zastora točno
onoliko koliko je i riječi — dok riječi nema, hodnik je čist. */
.prikovan .ulaz::after {
content: "";
position: absolute; inset: 0; z-index: 1;
pointer-events: none;
background: linear-gradient(to right,
rgba(4, 4, 6, 0) 22%, rgba(4, 4, 6, .55) 52%, rgba(4, 4, 6, .82) 100%);
opacity: var(--zastor, 0);
}
.ulaz-sadrzaj {
grid-row: 2;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--r6);
align-items: end;
}
@media (min-width: 900px) {
.ulaz-sadrzaj { grid-template-columns: minmax(0, 1fr) auto; }
}
.ulaz h1 {
font-family: var(--pismo-znak);
font-weight: 700;
font-size: var(--t-znak);
line-height: .94;
letter-spacing: .01em;
margin: 0 0 var(--r4);
color: var(--kost);
}
.ulaz .geslo {
font-family: var(--pismo-ui);
font-size: clamp(.74rem, 1.4vw, .95rem);
font-weight: 600;
letter-spacing: .42em;
text-transform: uppercase;
color: var(--zlato);
margin: 0 0 var(--r5);
}
.ulaz .izjava {
font-family: var(--pismo-ured);
font-style: italic;
font-size: clamp(1.15rem, 1.9vw, 1.6rem);
line-height: 1.44;
color: var(--kost-2);
max-width: 40ch;
margin: 0 0 var(--r6);
}
.ulaz .pecat-ulaz {
width: clamp(52px, 6vw, 78px);
margin-bottom: var(--r5);
filter: drop-shadow(0 0 24px rgba(217, 203, 166, .3));
}
.radnje { display: flex; flex-wrap: wrap; gap: var(--r3); }
/* Desni stupac zaglavlja: sitni zapis i pokazivač silaska. */
.ulaz-rub {
display: none;
text-align: right;
font-family: var(--pismo-ui);
font-size: var(--t-oznaka);
letter-spacing: .24em;
text-transform: uppercase;
color: var(--kost-3);
}
@media (min-width: 900px) { .ulaz-rub { display: block; } }
.ulaz-rub dl { display: grid; gap: var(--r3); margin: 0 0 var(--r6); }
.ulaz-rub dt { color: var(--kost-3); }
.ulaz-rub dd { margin: 0; color: var(--kost-2); }
.silazak-znak {
display: inline-flex; flex-direction: column; align-items: center; gap: var(--r2);
color: var(--kost-3);
font-family: var(--pismo-ui); font-size: var(--t-oznaka);
letter-spacing: .24em; text-transform: uppercase;
}
.silazak-znak:hover { color: var(--zlato-2); }
.silazak-znak i {
display: block; width: 1px; height: 44px;
background: linear-gradient(to bottom, transparent, var(--zlato));
transform-origin: top center;
}
/* ═══ 6 · GUMBI I VEZE ═══════════════════════════════════════ */
.gumb {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; gap: var(--r3);
font-family: var(--pismo-ui);
font-size: .78rem; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
padding: 15px 26px;
min-height: 46px;
border: 1px solid transparent;
cursor: pointer;
transition: background var(--brzo) var(--izlaz),
color var(--brzo) var(--izlaz),
border-color var(--brzo) var(--izlaz);
}
.gumb .strelica { transition: transform var(--tempo) var(--hod); }
.gumb:hover .strelica { transform: translateX(5px); }
.gumb-pun { background: var(--zlato); color: #100e0a; }
.gumb-pun:hover { background: var(--zlato-2); }
/* Jedini dopušteni prijelaz boje: bljesak koji prijeđe preko gumba. */
.gumb-pun::after {
content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 44%;
background: linear-gradient(100deg, transparent, rgba(255, 252, 244, .5), transparent);
transform: skewX(-18deg);
transition: left .6s var(--izlaz);
}
.gumb-pun:hover::after { left: 140%; }
.gumb-prazan { border-color: var(--rub-jaci); color: var(--kost); }
.gumb-prazan:hover { border-color: var(--zlato); color: var(--zlato-2); }
/* Veza u tekstu: podvlaka koja izraste, ne skoči. */
.telo a:not(.gumb):not(.plocica),
.podnozje a {
color: var(--zlato-2);
background-image: linear-gradient(var(--zlato), var(--zlato));
background-repeat: no-repeat;
background-size: 0% 1px;
background-position: 0 100%;
transition: background-size var(--tempo) var(--hod), color var(--brzo);
}
.telo a:not(.gumb):not(.plocica):hover,
.podnozje a:hover { background-size: 100% 1px; }
/* ═══ 7 · UREDNIČKI TEKST ════════════════════════════════════ */
.telo > * + *, .uz-tekst > * + * { margin-top: var(--r5); }
.uz-tekst > h3:first-child { margin-top: 0; }
.telo p, .uz-tekst p { max-width: var(--stupac); margin-bottom: 0; }
.telo h3 { margin-top: var(--r8); }
.telo h4, .uz-tekst h4 { margin-top: var(--r6); color: var(--kost); }
.telo ul, .telo ol, .uz-tekst ul { max-width: var(--stupac); margin-bottom: 0; }
.telo li, .uz-tekst li { color: var(--kost-2); }
.telo li strong, .uz-tekst li strong { color: var(--kost); }
/* Blok „znak Crnog Hrama” živi unutar tijela, pa mu treba vlastiti zrak. */
.telo > .niz, .telo > .rijeci, .telo > .opreka,
.telo > .komora-zid, .telo > .arhiv { margin-top: var(--r7); }
/* Verzal na početku manifesta: jedan jedini na stranici. */
.kap::first-letter {
font-family: var(--pismo-vel);
font-weight: 400;
font-size: 4.4em;
line-height: .8;
float: left;
margin: .06em .12em 0 0;
color: var(--zlato);
}
blockquote.navod {
border-left: 2px solid var(--zlato);
padding: var(--r2) 0 var(--r2) var(--r5);
margin-block: var(--r7);
max-width: 44ch;
}
blockquote.navod p {
font-family: var(--pismo-ured);
font-style: italic;
font-size: clamp(1.35rem, 2.4vw, 1.9rem);
line-height: 1.36;
color: var(--kost);
}
blockquote.navod .tko {
display: block; margin-top: var(--r4);
font-family: var(--pismo-ui); font-style: normal;
font-size: var(--t-oznaka); font-weight: 600;
letter-spacing: .26em; text-transform: uppercase;
color: var(--kost-3);
}
.okvir {
border: 1px solid var(--rub-zlato);
border-left-width: 3px;
padding: var(--r6);
max-width: var(--stupac);
}
.okvir h4 { margin-top: 0; color: var(--zlato-2); }
.okvir p { color: var(--kost-2); }
.okvir.krv { border-color: rgba(168, 69, 44, .5); border-left-color: var(--krv); }
.okvir.krv h4 { color: var(--krv-2); }
.sitno { font-size: var(--t-sitno); color: var(--kost-3); line-height: 1.65; }
.izvor {
font-family: var(--pismo-ui);
font-size: var(--t-oznaka);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--kost-3);
margin: 0;
}
/* ═══ 8 · TABLICE ════════════════════════════════════════════ */
.tablica {
overflow-x: auto;
border: 1px solid var(--rub);
-webkit-overflow-scrolling: touch;
}
.tablica table { width: 100%; border-collapse: collapse; min-width: 640px; }
.tablica th {
text-align: left;
font-family: var(--pismo-ui);
font-size: var(--t-oznaka); font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--zlato); background: var(--crno-3);
padding: var(--r4) var(--r5);
border-bottom: 1px solid var(--rub-zlato);
}
.tablica td {
padding: var(--r5);
border-top: 1px solid var(--rub);
vertical-align: top;
font-size: .98rem;
color: var(--kost-2);
}
.tablica td strong { color: var(--kost); }
/* ═══ 9 · PLOČICE (kartice) ══════════════════════════════════ */
/* Bez kutija.
Mreža je do sada bila rešetka od linija: `gap: 1px` preko podloge
boje ruba dao je crtu između svake dvije kartice, a `border` je
zatvorio cijeli blok u okvir. Svaka je kartica time bila sivi
pravokutnik s obrubom — to je tablica, ne stranica, i po tome je
sajt izgledao jeftino.
Sada nema nijedne kutije. Kartice stoje na istoj crnini kao i sve
ostalo, razdvaja ih zrak, a jedina crta na njima je zlatna vlas
koja izraste kad se dođe nad njih. Ono što se vidi je tipografija
i razmak — a to je ono što izgleda skupo. */
.niz {
display: grid;
gap: var(--r7) var(--r6);
background: none;
border: 0;
}
.niz-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.niz-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.plocica {
position: relative;
display: block;
background: none;
padding: var(--r5) 0 0;
color: inherit;
/* Vlas nad karticom: jedina crta koja je ostala. U mirovanju je
jedva vidljiva i ide preko cijele kartice; pod pokazivačem
postane zlatna. Crta iznad, ne okvir okolo — to je razlika
između uveza i kutije. */
border-top: 1px solid var(--rub);
transition: border-color var(--tempo) var(--izlaz);
}
/* Kartica koja vodi u tekst je veza, ne ploha. */
a.plocica { text-decoration: none; }
a.plocica:hover, a.plocica:focus-visible { border-top-color: var(--zlato); }
.plocica:hover { border-top-color: var(--zlato-3); }
/* Nosač u kutu je otišao zajedno s kutijom. Dok je kartica bila
pravokutnik s obrubom, kut ga je završavao; sada kartice nema čime
završiti — nosi vlas iznad sebe i to je sve. Ostavljen, visio je
preko te vlasi kao nešto što je zaboravljeno da se makne. */
.plocica::before {
display: none;
content: "";
position: absolute; top: 0; left: 0;
width: 12px; height: 12px;
border-top: 1px solid var(--zlato); border-left: 1px solid var(--zlato);
opacity: .45;
transition: width var(--tempo) var(--hod), height var(--tempo) var(--hod), opacity var(--tempo);
pointer-events: none;
}
.plocica:hover::before { width: 26px; height: 26px; opacity: 1; }
.plocica h3 { margin-bottom: var(--r3); color: var(--kost); }
.plocica p { color: var(--kost-2); font-size: .98rem; }
.plocica p + p { margin-top: var(--r3); }
.plocica .broj {
display: block;
font-family: var(--pismo-vel);
font-size: 2.2rem; font-weight: 400; line-height: 1;
letter-spacing: .06em;
color: var(--zlato);
margin-bottom: var(--r4);
}
.plocica .stih {
font-family: var(--pismo-ured);
font-style: italic;
font-size: 1.2rem; line-height: 1.36;
color: var(--zlato-2);
margin-bottom: var(--r4);
}
.plocica .glif {
position: absolute; top: var(--r6); right: var(--r6);
color: var(--zlato); opacity: .28;
transition: opacity var(--tempo);
pointer-events: none;
}
.plocica:hover .glif { opacity: .7; }
/* mit / ogledalo, korak / zašto: mala tipografska razlika u istoj pločici */
.plocica .mit { font-size: .95rem; color: var(--kost-3); }
.plocica .zrcalo { font-size: .98rem; color: var(--kost-2); }
.plocica .mit strong, .plocica .zrcalo strong, .plocica .zasto strong {
font-family: var(--pismo-ui); font-size: var(--t-oznaka); font-weight: 700;
letter-spacing: .2em; text-transform: uppercase;
}
.plocica .mit strong { color: var(--kost-3); }
.plocica .zrcalo strong { color: var(--zlato); }
.plocica .zasto {
font-size: .92rem; color: var(--kost-3);
border-top: 1px solid var(--rub); padding-top: var(--r4); margin-top: var(--r5);
}
.plocica .zasto strong { color: var(--zlato); }
.plocica ol, .plocica ul { font-size: .98rem; color: var(--kost-2); margin-bottom: 0; }
.mjere { display: flex; flex-wrap: wrap; gap: var(--r2); margin: 0 0 var(--r5); padding: 0; list-style: none; }
.mjere li {
margin: 0;
font-family: var(--pismo-ui); font-size: var(--t-oznaka); font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
color: var(--zlato-2);
border: 1px solid var(--rub-zlato);
padding: 5px 11px;
}
/* Riječi rječnika: gušća mreža, manje zraka, drugačiji ritam. */
.rijeci { display: grid; gap: var(--r6) var(--r5); background: none; border: 0;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.rijeci .plocica { padding: var(--r4) 0 0; }
.rijeci h3 { font-size: 1.5rem; color: var(--zlato-2); }
.rijeci p { font-size: .94rem; }
/* Jesmo / nismo: dva stupca u opreci */
.opreka { display: grid; gap: var(--r5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.opreka > * { border: 0; padding: 0 0 0 var(--r5); background: none; }
.opreka h3 { margin: 0 0 var(--r5); font-family: var(--pismo-ui); font-size: var(--t-oznaka);
font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.opreka .jesmo { border-left: 3px solid var(--mahovina); }
.opreka .jesmo h3 { color: var(--mahovina); }
.opreka .nismo { border-left: 3px solid var(--krv); }
.opreka .nismo h3 { color: var(--krv-2); }
.opreka ul { list-style: none; padding: 0; margin: 0; }
.opreka li { padding-bottom: var(--r5); margin: 0; font-size: .98rem; }
.opreka li:last-child { padding-bottom: 0; }
/* ═══ 10 · VREMENSKA CRTA ════════════════════════════════════ */
.crta { position: relative; list-style: none; margin: 0; padding: 0 0 0 var(--r6); }
.crta::before {
content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
background: var(--rub-jaci);
}
.crta li { position: relative; padding-bottom: var(--r6); color: var(--kost-2); max-width: 60ch; }
.crta li:last-child { padding-bottom: 0; }
.crta li::before {
content: ""; position: absolute; left: calc(var(--r6) * -1 - 4px); top: 10px;
width: 9px; height: 9px; transform: rotate(45deg);
background: var(--zlato);
}
.crta .god {
display: block;
font-family: var(--pismo-vel); font-size: 1.15rem; letter-spacing: .1em;
color: var(--zlato-2); margin-bottom: var(--r1);
}
/* ═══ 11 · PRIZOR (medij preko cijele širine) ════════════════ */
/* Prizor nema rub.
Prije je stajao kao pravokutnik s razmakom od jednog odjeljka iznad
i ispod: slika je počinjala i završavala rezom, a između nje i
sljedećeg naslova zjapilo je tristo piksela crnine. To je bila
galerija, ne film.
Sada se prizor s obje strane pretače u crninu stranice — maskom na
samom mediju, ne zastorom preko njega — pa nema šava kojim bi
započeo ni završio. Razmaka nema jer ga maska sama pravi: donjih
petnaest posto kadra ionako više nije slika. Iz teksta se ulazi u
sliku i iz slike natrag u tekst, bez praga. */
.prizor {
position: relative;
margin-block: 0;
overflow: hidden;
background: var(--crno);
isolation: isolate;
}
.prizor-visok { min-height: min(92svh, 820px); }
.prizor-nizak { min-height: min(68svh, 620px); }
:is(.prizor, .postaja-kadar) :is(picture, img, video) { position: absolute; inset: 0; }
:is(.prizor, .postaja-kadar) :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
:is(.prizor, .postaja-kadar) video { opacity: 0; transition: opacity 1.2s var(--izlaz); z-index: 1; }
:is(.prizor, .postaja-kadar).snima video { opacity: 1; }
/* Maska: gornjih i donjih dvanaest posto kadra pretače se u ništa. */
.prizor picture, .prizor > video {
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%, #000 13%, #000 86%, transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0%, #000 13%, #000 86%, transparent 100%);
}
/* Zastor u dva smjera. Uspravni drži gornji i donji rub uz crninu
stranice; vodoravni čuva lijevu trećinu, gdje stoji rečenica, jer
se preko snimke ne zna unaprijed što će u tom trenutku ondje biti
svijetlo. Bez njega bi riječ pala na plamen ili na zlato.
Otkad maska nosi rubove, zastor smije biti blaži: slika se više ne
mora gasiti pri vrhu i dnu, nego samo tamo gdje stoji slovo. */
.prizor::after {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background:
linear-gradient(to right, rgba(4,4,6,.8) 0%, rgba(4,4,6,.42) 32%, rgba(4,4,6,0) 58%),
linear-gradient(to bottom, rgba(4,4,6,.42), rgba(4,4,6,.1) 42%, rgba(4,4,6,.62));
}
@media (max-width: 720px) {
.prizor::after {
background:
linear-gradient(to bottom, rgba(4,4,6,.42), rgba(4,4,6,.28) 40%, rgba(4,4,6,.86));
}
}
/* Riječ stoji nad donjim rubom, ne na njemu: donjih je četrnaest
posto kadra maska već pretočila u crninu, pa bi ondje slovo
visjelo u praznom. */
.prizor-rijec {
position: relative; z-index: 3;
display: grid; align-content: end;
min-height: inherit;
padding: var(--r9) var(--pojas) clamp(72px, 13vh, 140px);
margin: 0;
}
.prizor-visok .prizor-rijec { min-height: min(92svh, 820px); }
.prizor-nizak .prizor-rijec { min-height: min(68svh, 620px); }
.prizor-rijec p {
font-family: var(--pismo-ured);
font-style: italic;
font-size: clamp(1.5rem, 3.1vw, 2.9rem);
line-height: 1.26;
color: var(--kost);
/* Rečenica je pisana s prijelomom na točno određenom mjestu ( ).
Na 22ch se i prvi redak lomio sam od sebe, pa je prijelom padao
nasred misli. Mjera je sada šira, ali još uvijek vezana za širinu
prozora, da preko pola kadra ne prijeđe. */
max-width: min(30ch, 44vw);
margin: 0;
text-shadow: 0 2px 30px rgba(0, 0, 0, .85);
text-wrap: pretty;
}
@media (max-width: 720px) { .prizor-rijec p { max-width: 100%; } }
.prizor-rijec .tko {
display: block; margin-top: var(--r5);
font-family: var(--pismo-ui); font-style: normal;
font-size: var(--t-oznaka); font-weight: 700;
letter-spacing: .3em; text-transform: uppercase;
color: var(--zlato);
}
/* ── Kapci: prizor koji se rastvara na segmente ────────────────
Vatra se ne otvara odjednom nego se razlomi na devet uspravnih
daski koje se razmiču dok se lista — susjedne u suprotnim
smjerovima, svaka sa svojim zakašnjenjem. Kadar se time ne
pojavljuje nego *otvara*.
Daske su obična crnina stranice, ne siva ploha: dok su zatvorene,
ne vidi se da išta stoji preko kadra, nego da kadra još nema.
Bez pogona ih nema (`.rastvara` postavlja `rastvaranje()`), pa se
prizor ne može zaglaviti zatvoren ni u miru ni ako pogon padne. */
.kapci { display: none; }
:is(.prizor, .postaja-kadar).rastvara .kapci {
display: flex;
position: absolute; inset: -1px; z-index: 3;
pointer-events: none;
}
:is(.prizor, .postaja-kadar).rastvara .kapci > i {
flex: 1 1 0;
background: var(--crno);
transform: translateY(var(--k, 0%));
/* Rub daske ne smije biti oštar rez: mekan prijelaz čini da se
kadar pokazuje kroz procjep, a ne ispod kulise. */
-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
/* ═══ 11b · POSTAJA — poglavlje kroz koje se ulazi ═══════════
Ulaz je let kroz hram: kadar preko cijele širine, i tekst koji
stoji *na* kadru, ne uz njega. Poglavlja su ispod toga stajala kao
druga stranica — naslov na crnini, pa slika negdje između, pa opet
naslov na crnini. Dvije stranice u jednoj.
Postaja je poglavlje složeno kao ulaz. Kadar je isti materijal kao
prizor (ista maska, ista paralaksa, iste snimke), samo mu na dnu
stoji brojka, naslov i jedan redak. Ispod kadra ostaju pločice, i
svaka od njih vodi u čitaonicu.
Naslov pada točno na os stranice: natpis ima istu trostupčanu
mrežu kao članak i sjeda u njezin srednji stupac. Let time nigdje
ne skreće — spusti se i stane na istu crtu na kojoj se i čita. */
.postaja { padding-block: 0 var(--odjeljak); }
.postaja-kadar {
position: relative;
display: grid; align-content: end;
min-height: min(74svh, 680px);
margin-bottom: var(--r7);
overflow: hidden;
background: var(--crno);
isolation: isolate;
}
.postaja-visok { min-height: min(88svh, 800px); }
/* Kadar se pretače u crninu stranice maskom na samom mediju, kao i
prizor. Dolje jače nego gore: ondje ispod njega odmah počinju
pločice, i prijelaz mora biti gotov prije prvog retka. */
.postaja-kadar picture, .postaja-kadar > video {
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%, #000 10%, #000 85%, transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0%, #000 10%, #000 85%, transparent 100%);
}
/* Zastor pod natpisom, u dva smjera. Uspravni drži donji rub uz
crninu stranice; vodoravni čuva lijevu polovicu, gdje stoji natpis.
Bez vodoravnog je oznaka poglavlja padala ravno na otvorenu knjigu
i na plamen svijeće — preko snimke se ne zna unaprijed što će u
kojem trenutku biti svijetlo, a naslov mora stajati uvijek. */
.postaja-mrak {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background:
linear-gradient(to right, rgba(4,4,6,.88) 0%, rgba(4,4,6,.62) 30%,
rgba(4,4,6,.2) 52%, rgba(4,4,6,0) 70%),
linear-gradient(to top, var(--crno) 0%, rgba(4,4,6,.9) 16%,
rgba(4,4,6,.44) 46%, rgba(4,4,6,.12) 70%, rgba(4,4,6,.5) 100%);
}
/* Na uskom zaslonu natpis ide preko cijele širine, pa bi vodoravni
zastor pojeo cijelu sliku. Ostaje samo uspravni, ali jači. */
@media (max-width: 720px) {
.postaja-mrak {
background: linear-gradient(to top, var(--crno) 0%, rgba(4,4,6,.92) 22%,
rgba(4,4,6,.5) 52%, rgba(4,4,6,.22) 78%, rgba(4,4,6,.5) 100%);
}
}
.postaja-natpis {
position: relative; z-index: 3;
width: min(100% - 2 * var(--pojas), var(--clanak));
margin-inline: auto;
padding-block: var(--r9) clamp(26px, 4.5vh, 52px);
}
@media (min-width: 1060px) {
.postaja-natpis {
display: grid;
grid-template-columns:
minmax(0, var(--rub-stupac)) minmax(0, var(--stupac)) minmax(0, var(--rub-stupac));
justify-content: center;
column-gap: var(--r8);
}
.postaja-natpis > .zaglavlje { grid-column: 2; }
}
/* Uspravan kadar. Ogledalo stoji uspravno i puni visinu slike; rez na
široku traku od njega napravi tamnu prugu u kojoj se ne vidi da je
ogledalo. Zato ovdje slika drži desnu polovicu prozora u punoj
visini, a natpis stoji lijevo od nje, na sredini.
Na uskom zaslonu ovoga nema: ondje je i sam kadar uspravan, pa
uobičajeni rez uspravnu sliku pogađa točno kako treba. */
@media (min-width: 1060px) {
.postaja-uspravno { min-height: min(94svh, 900px); align-content: center; }
/* Samo omot, ne i slika u njemu: slika je već položena na inset 0
unutar omota, pa bi joj isti pomak došao dvaput i ogledalo bi
otišlo skroz uz desni rub. */
.postaja-uspravno > picture, .postaja-uspravno > video { inset: 0 0 0 44%; }
.postaja-uspravno picture {
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%),
linear-gradient(to bottom, transparent 0%, #000 8%, #000 90%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to right, transparent 0%, #000 18%),
linear-gradient(to bottom, transparent 0%, #000 8%, #000 90%, transparent 100%);
mask-composite: intersect;
}
.postaja-uspravno .postaja-mrak {
background:
linear-gradient(to right, var(--crno) 0%, rgba(4,4,6,.82) 32%,
rgba(4,4,6,.28) 50%, rgba(4,4,6,0) 66%),
linear-gradient(to top, var(--crno) 0%, rgba(4,4,6,.35) 18%, rgba(4,4,6,0) 42%);
}
.postaja-uspravno .postaja-natpis { padding-block: var(--r9); }
}
/* Na kadru znamen smije biti vidljiviji nego na crnini: ondje je
pozadina bila prazna pa je i četiri posto bilo dovoljno, ovdje se
natječe sa slikom. */
.postaja .zaglavlje[data-znamen]::before { opacity: .07; }
.postaja .zaglavlje h2 { text-shadow: 0 2px 34px rgba(0, 0, 0, .8); }
.postaja .zaglavlje .oznaka { text-shadow: 0 1px 16px rgba(0, 0, 0, .95); }
.postaja .zaglavlje .uvod {
margin-top: var(--r5);
color: var(--kost);
text-shadow: 0 1px 22px rgba(0, 0, 0, .9);
}
/* Vrata odmah pod natpisom — samo ondje gdje poglavlje nema pločica,
pa bi inače kadar visio bez izlaza. */
.postaja .zaglavlje .dalje { margin-top: var(--r6); }
/* Kadar postaje ne smije pojesti cijeli zaslon na telefonu: ondje je
ispod njega još i sve ostalo, a natpis je već pri dnu. */
@media (max-width: 720px) {
.postaja-kadar { min-height: min(62svh, 520px); margin-bottom: var(--r7); }
.postaja-visok { min-height: min(72svh, 600px); }
.postaja-natpis { padding-block: var(--r8) var(--r7); }
}
/* ═══ 12 · SILAZAK (velika izjava između poglavlja) ══════════ */
/* Silazak nema rub ni razmak prema susjedu: prizori se s obje strane
pretaču maskom, pa bi crta ovdje bila jedini rez na cijeloj
stranici. Prostor dolazi iz uspravnog razmaka unutar odjeljka. */
.silazak {
position: relative;
/* Bilo 19vh (do 224 px) gore i dolje. Silazak je velika izjava i
treba mu zrak, ali je uz razmak susjednog odjeljka nad njim znalo
stajati preko tristo piksela crnine — a to više nije zrak nego
put koji se prevaljuje. */
padding-block: clamp(96px, 14vh, 168px);
overflow: hidden;
isolation: isolate;
}
/* Kamen ispod tihih odjeljaka: tekstura se osjeti, ne vidi. */
.silazak::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background-image: image-set(url("../img/tx-zrno-1280.avif") type("image/avif"),
url("../img/tx-zrno-1280.webp") type("image/webp"));
background-size: cover; background-position: center;
opacity: .07;
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
pointer-events: none;
}
/* Velika izjava.
Prije je stajala u Cinzelu. Cinzel nema pravo malo slovo — njegova
su mala slova kapitalke — pa se rečenica od osamdesetak znakova
crtala kao natpis preko šest redaka verzala. Monumentalno je bilo,
čitljivo nije: oko na verzalu nema za što zapeti, jer su sva slova
iste visine i nema riječi nego samo niz.
Cormorant ima pravo malo slovo. Ista rečenica sada staje u tri do
četiri retka, čita se kao rečenica, a monumentalnost dolazi iz
mjere i iz zraka oko nje, ne iz verzala. Verzal je ostao ondje
gdje mu je mjesto: na sitnim oznakama i na brojci poglavlja. */
.silazak-rijeci {
font-family: var(--pismo-ured);
font-size: clamp(2.3rem, 4.9vw, 4.7rem);
font-weight: 500;
line-height: 1.1;
letter-spacing: -.004em;
color: var(--kost);
max-width: 19ch;
margin: 0;
text-wrap: pretty;
}
.silazak-rijeci .prigusi { color: var(--kost-3); }
.silazak-dopuna {
margin-top: var(--r8);
max-width: 38ch;
color: var(--kost-2);
font-size: 1.05rem;
}
@media (min-width: 1060px) {
/* Samo pojas s riječima nosi dvostupčani raspored. Drugi pojas nosi
zapis činjenica i mora imati punu širinu — dok je i on bio u
ovoj rešetki, zapis se stiskao u lijevu kolonu i lomio u dva
reda s praznom rupom na kraju.
Ne `:first-of-type`: prvo dijete silaska je snimka razdjelnika,
pa bi „prvi div” bio ona, a nijedan pojas ne bi bio pogođen. */
.silazak > .pojas:has(> .silazak-rijeci) {
display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: var(--r10); align-items: end;
}
.silazak-dopuna { margin-top: 0; }
}
/* Zapis činjenica: tanka traka, ne pilule.
Redak koji teče, ne rešetka: zapisa je čas pet (silazak) čas tri
(vrata čitaonice), a rešetka s tvrdim brojem stupaca u drugom je
slučaju ostavljala praznu ćeliju. Ovako se članovi rastegnu do
kraja retka koliko god ih bilo. */
.zapis {
display: flex; flex-wrap: wrap; gap: 1px;
margin: var(--r9) 0 0; padding: 0; list-style: none;
background: var(--rub); border-block: 1px solid var(--rub);
}
.zapis li { flex: 1 1 165px; }
.zapis li {
margin: 0; background: var(--crno); padding: var(--r5) var(--r4);
font-family: var(--pismo-ui); font-size: var(--t-oznaka); font-weight: 600;
letter-spacing: .18em; text-transform: uppercase; color: var(--kost-2);
}
/* Bez okvira: fotografija stoji na crnini stranice, ne u sivoj kutiji
s obrubom. Natpis pod njom nosi vlas, i to je sve sto joj treba. */
.ploca-siroka figcaption {
padding: var(--r4) var(--r5);
border-top: 1px solid var(--rub);
font-family: var(--pismo-ui); font-size: var(--t-oznaka);
letter-spacing: .16em; text-transform: uppercase; color: var(--kost-3);
}
/* ═══ 13b · ŠIROKA PLOČA ═════════════════════════════════════
Slika koja otvara poglavlje punom mjerom, ondje gdje prikovani
medij ne dolazi u obzir jer bi poglavlju uzeo pola širine. */
/* `margin-block`, ne `margin`: kratica bi ponovo postavila i
`margin-inline`, a njime .probija drži ploču na sredini stranice.
S kraticom je ploča bježala 251 px preko desnog ruba prozora. */
.ploca-siroka {
position: relative;
margin-block: 0 var(--r8);
border: 0;
background: none;
}
.ploca-siroka .ploca-znak {
aspect-ratio: 16 / 7;
}
.ploca-siroka .ploca-znak img { height: 100%; object-fit: cover; }
@media (max-width: 720px) { .ploca-siroka .ploca-znak { aspect-ratio: 5 / 4; } }
/* ═══ 14 · KOMORA ZNAKOVA (potpisna interakcija) ═════════════ */
.komora { position: relative; }
.komora-zid {
position: relative;
display: grid; gap: clamp(14px, 1.6vw, 28px);
background: none;
border: 0;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
/* Svjetlo koje prolazi zidom.
Zid znakova je jedina ploha na stranici koja se doista gleda kao
zid: šest kamenih ploča jedna do druge. Dok se silazi kraj njega,
preko njega prolazi svjetlo — kao da netko nosi baklju duž hodnika.
Položaj svjetla daje pogon iz udjela prolaska kroz prozor
(--svjetlo), pa je pokret vezan uz čitatelja, a ne uz sat.
`plus-lighter` samo pribraja svjetlo; ništa se ne zatamnjuje, pa
se natpisi ispod i dalje čitaju jednako. */
.komora-zid::after {
content: "";
position: absolute; inset: 0; z-index: 4;
pointer-events: none;
opacity: 0;
transition: opacity 1.2s var(--izlaz);
background: radial-gradient(60% 130% at var(--svjetlo, 50%) 46%,
rgba(240, 230, 200, .13) 0%,
rgba(217, 203, 166, .05) 38%,
transparent 68%);
mix-blend-mode: plus-lighter;
}
.komora-zid.osvijetljen::after { opacity: 1; }
/* Šest ploča: tri u redu, pa su dva reda puna. Na četiri stupca je
drugi red ostajao upola prazan, a kroz tu se rupu vidjelo ono što
iza zida stoji i ne bi se trebalo vidjeti. */
@media (min-width: 760px) { .komora-zid { grid-template-columns: repeat(3, 1fr); } }
.ploca-znak {
position: relative; margin: 0; overflow: hidden;
background: var(--crno-2);
border: 0; padding: 0;
aspect-ratio: 1;
cursor: pointer;
color: inherit;
display: block; width: 100%;
text-align: left;
}
/* Znak se okrece dok se lista.
Okret ide na *sliku* unutar ploce, ne na plocu: plocu vec vozi
`naginjanje()` za pokazivacem, i dva bi sustava pisala u isti
`transform`. Ovako se slazu — ploca se naginje prema ruci, a znak
se u njoj vrti prema tome koliko je zida proslo.
Zum i okret idu kroz vlastite promjenjive, pa ih `:hover` moze
mijenjati odvojeno bez da pregazi okret. */
.ploca-znak img {
width: 100%; height: 100%; object-fit: cover;
transform: rotateY(var(--vrt, 0deg)) rotateX(var(--vrt-x, 0deg)) scale(var(--zum, 1));
transition: filter var(--tempo) var(--izlaz), scale 1.1s var(--hod);
filter: brightness(.82) saturate(.9);
backface-visibility: hidden;
}
.ploca-znak:hover img,
.ploca-znak:focus-visible img { --zum: 1.035; filter: brightness(1.06) saturate(1); }
.ploca-znak .natpis {
position: absolute; inset: auto 0 0 0; z-index: 2;
padding: var(--r7) var(--r4) var(--r4);
display: flex; align-items: baseline; justify-content: space-between; gap: var(--r3);
font-family: var(--pismo-ui); font-size: var(--t-oznaka); font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
color: var(--kost);
background: linear-gradient(to top, rgba(4,4,6,.9), rgba(4,4,6,0));
}
.ploca-znak .vidi {
color: var(--zlato); opacity: 0;
transform: translateX(-6px);
transition: opacity var(--tempo), transform var(--tempo) var(--hod);
}
.ploca-znak:hover .vidi,
.ploca-znak:focus-visible .vidi { opacity: 1; transform: none; }
/* Prikovani medij uz poglavlje nije kvadrat nego stoji u svom omjeru. */
/* nosač u kutu, isti jezik kao pločice */
.ploca-znak::before {
content: ""; position: absolute; top: 0; left: 0; z-index: 3;
width: 14px; height: 14px;
border-top: 1px solid var(--zlato); border-left: 1px solid var(--zlato);
opacity: .5; transition: width var(--tempo) var(--hod), height var(--tempo) var(--hod), opacity var(--tempo);
pointer-events: none;
}
.ploca-znak:hover::before, .ploca-znak:focus-visible::before { width: 30px; height: 30px; opacity: 1; }
/* ═══ 15 · KAMEN KOJI SE OKREĆE ══════════════════════════════ */
.okret { position: relative; }
.okret-hod { height: 300vh; }
.okret-stalak {
position: sticky; top: 0;
height: 100svh;
display: grid;
align-items: center;
overflow: hidden;
}
/* Kamen i riječi stoje bliže nego prije. Na punoj mjeri stranice
(1280) između njih je zjapilo sto trideset piksela praznine, a
kamen je bio manji od svoje polovice kadra — dva predmeta u istoj
sobi, svaki u svom kutu. Uža mjera i veći kamen drže ih zajedno. */
.okret-mreza {
display: grid; gap: var(--r6);
width: min(100% - 2 * var(--pojas), 1150px);
margin-inline: auto;
align-items: center;
}
@media (min-width: 900px) {
.okret-mreza { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: var(--r8); }
}
.okret-kamen {
position: relative;
aspect-ratio: 1;
max-height: 74svh;
justify-self: center;
width: 100%;
max-width: 600px;
}
/* Kamen lebdi, ne stoji u kutiji.
Snimka i slika imaju svoju crninu, a ona nije crnina stranice —
razlika je od nekoliko postotaka svjetline, ali oko je vidi kao
pravokutnik oko kamena. Maska u obliku elipse gasi rubove kadra
prije nego što dođu do ruba kutije, pa se ta razlika nema gdje
pokazati i kamen doista visi u dvorani. */
.okret-kamen img, .okret-kamen video {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: contain;
/* Dvije maske koje se sijeku gase samo rubnu vrpcu kadra, po osam
posto sa svake strane. Elipsa je ovdje bila kriva alatka: da bi
ugasila kut, morala je zagristi i u sredinu, a u sredini stoji
kamen. Ovako sredina ostaje netaknuta, a šav nema gdje. */
-webkit-mask-image:
linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
mask-composite: intersect;
}
.okret-kamen video { opacity: 0; transition: opacity .9s var(--izlaz); }
.okret.snima .okret-kamen video { opacity: 1; }
.okret.snima .okret-kamen img { opacity: 0; transition: opacity .9s var(--izlaz); }
.okret-rijeci { position: relative; }
.okret-korak {
grid-area: 1 / 1;
max-width: 40ch;
}
.okret-rijeci { display: grid; }
.okret-korak h3 { margin-bottom: var(--r4); }
.okret-korak p { color: var(--kost-2); }
.okret-mjera {
display: flex; align-items: center; gap: var(--r3);
margin-top: var(--r7);
font-family: var(--pismo-ui); font-size: var(--t-oznaka); font-weight: 700;
letter-spacing: .24em; text-transform: uppercase; color: var(--kost-3);
}
.okret-mjera .traka-mjere { flex: 1; height: 1px; background: var(--rub-jaci); position: relative; }
.okret-mjera .traka-mjere i {
position: absolute; inset: 0 auto 0 0; width: 0;
background: var(--zlato);
}
/* Uski zaslon: prikovana dionica postaje običan odjeljak, kamen se
vrti sam, koraci stoje jedan ispod drugoga. Nema dugog praznog hoda. */
@media (max-width: 899px) {
.okret-hod { height: auto; }
.okret-stalak { position: static; height: auto; padding-block: var(--odjeljak); }
.okret-mreza { gap: var(--r7); }
.okret-kamen { max-height: 52svh; max-width: 380px; }
.okret-rijeci { display: grid; gap: var(--r6); }
.okret-korak { grid-area: auto; opacity: 1 !important; transform: none !important; }
.okret-mjera { display: none; }
}
/* ═══ 15b · POVORKA — prizori koji se pretaču ════════════════
Jedino mjesto na stranici gdje slika ne dolazi u bloku nego prelazi
u sljedeću. Pozornica se prikuje u prozor, listanje kroz nju vuče
kadrove, a svaka izjava izroni ispod maske dok je njezin kadar sam
pred očima.
Polazište je obično: bez pogona ovo je niz slika s rečenicom ispod
svake, čitljiv i bez ijednog retka JavaScripta. Pogon na to stavi
.prikovana i tek tada uzima kadrove u svoje ruke. Obrnuto se ne
smije raditi — sve što CSS sakrije, a pogon ne stigne otkriti,
ostaje zauvijek skriveno. */
.povorka { position: relative; background: var(--crno); isolation: isolate; }
/* ── polazište: običan niz ─────────────────────────────────── */
.povorka-kadar {
position: relative;
margin: 0;
min-height: min(72svh, 660px);
overflow: hidden;
}
.povorka-kadar picture,
.povorka-kadar img,
.povorka-kadar video { position: absolute; inset: 0; }
.povorka-kadar img,
.povorka-kadar video { width: 100%; height: 100%; object-fit: cover; }
.povorka-kadar video { opacity: 0; }
.povorka-kadar.snima video { opacity: 1; }
/* U nizu svaki kadar nosi svoj zastor. U prikovanoj dionici zastor je
jedan za sve, inače bi se šest istih preljeva složilo u crninu. */
.povorka:not(.prikovana) .povorka-kadar::after {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(to bottom, rgba(4,4,6,.5), rgba(4,4,6,.12) 42%, rgba(4,4,6,.72));
}
.povorka:not(.prikovana) .povorka-zastor,
.povorka:not(.prikovana) .povorka-rub,
.povorka:not(.prikovana) .povorka-crnina,
.povorka:not(.prikovana) .povorka-mjera { display: none; }
.povorka-izjava {
position: absolute; z-index: 5;
inset: auto 0 0 0;
padding: var(--r7) var(--pojas) clamp(56px, 11vh, 120px);
text-align: center;
}
.povorka-maska { display: block; overflow: hidden; }
.povorka-redak {
display: block; padding-block: .1em;
font-family: var(--pismo-ured);
font-style: italic;
font-size: clamp(1.6rem, 3.4vw, 3.2rem);
line-height: 1.24;
color: var(--kost);
text-wrap: balance;
text-shadow: 0 2px 30px rgba(4, 4, 6, .85);
}
.povorka-izjava .tko {
display: block; margin-top: var(--r5);
font-family: var(--pismo-ui); font-style: normal;
font-size: var(--t-oznaka); font-weight: 700;
letter-spacing: .3em; text-transform: uppercase;
color: var(--zlato); opacity: .78;
}
/* ── prikovana dionica ─────────────────────────────────────── */
/* Hod je dug koliko ima kadrova. Svaki kadar dobiva nešto manje od
jednog zaslona puta: taman toliko da se stigne pretopiti i da se
izjava stigne pročitati, a da se ne čeka. */
.povorka.prikovana .povorka-hod { height: calc(var(--kadrova, 6) * 92svh); }
.povorka.prikovana .povorka-stalak {
position: sticky; top: 0;
height: 100svh;
overflow: hidden;
}
.povorka.prikovana .povorka-kadrovi { position: absolute; inset: 0; }
.povorka.prikovana .povorka-kadar {
position: absolute; inset: 0;
min-height: 0;
}
/* Kadar sam ostaje neproziran; pretače se ono što se vidi, pa izjava
može doći i otići neovisno o slici pod sobom. */
.povorka.prikovana .povorka-kadar picture,
.povorka.prikovana .povorka-kadar video { z-index: 0; opacity: 0; }
.povorka.prikovana .povorka-kadar > figcaption { opacity: 0; }
.povorka-zastor {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background:
radial-gradient(120% 80% at 50% 46%, rgba(4,4,6,0) 34%, rgba(4,4,6,.55) 100%),
linear-gradient(to bottom, rgba(4,4,6,.5), rgba(4,4,6,.06) 38%, rgba(4,4,6,.8));
}
/* Dok povorka tek ulazi u prozor, njezin gornji rub je vodoravni rez
preko cijelog zaslona. Ostatak stranice rubove nema nego maske, pa
ih nema ni ovdje: dok se dionica ne prikuje, preko gornjeg ruba
stoji preljev u crninu stranice. Kad se prikuje, ruba više nema i
preljev odlazi — pogon mu vozi prozirnost. */
.povorka-rub {
position: absolute; inset: 0 0 auto 0; z-index: 4; pointer-events: none;
height: 24vh;
background: linear-gradient(to bottom, var(--crno) 0%, rgba(4,4,6,.72) 42%, rgba(4,4,6,0) 100%);
}
.povorka-crnina {
position: absolute; inset: 0; z-index: 6; pointer-events: none;
background: var(--crno); opacity: 0;
}
.povorka-mjera {
position: absolute; z-index: 7;
inset: auto var(--pojas) clamp(18px, 3.4vh, 36px) var(--pojas);
display: flex; align-items: center; gap: var(--r3);
margin: 0;
font-family: var(--pismo-ui); font-size: var(--t-oznaka); font-weight: 700;
letter-spacing: .24em; text-transform: uppercase; color: var(--kost-3);
}
.povorka-mjera .traka-mjere { flex: 1; height: 1px; background: var(--rub-jaci); position: relative; }
.povorka-mjera .traka-mjere i {
position: absolute; inset: 0 auto 0 0; width: 0;
background: var(--zlato);
}
/* Uski zaslon nosi uspravni izrez, pa izjava ima manje mjesta pod
sobom i mjera odlazi — palcu ionako ne treba. */
@media (max-width: 720px) {
.povorka-izjava { padding-inline: var(--pojas); }
.povorka-mjera { display: none; }
.povorka.prikovana .povorka-hod { height: calc(var(--kadrova, 6) * 84svh); }
}
/* ═══ 16 · ARHIV ═════════════════════════════════════════════ */
/* Arhiv drži tri stupca i na širokom zaslonu.
Devet je stavaka: šest pečata iz grimorija i tri predmeta Hrama.
Na četiri stupca zadnji red ostaje s jednom stavkom i tri rupe; na
tri se popuni točno, tri puna reda. Uz to je zid znakova iznad
također trostupčan, pa arhiv i zid dijele isti ritam umjesto da se
svaki dogovara sam sa sobom. */
.arhiv {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--r4);
}
@media (min-width: 720px) { .arhiv { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r5); } }
/* Vlak je omot koji postoji samo zato da se ima što pomicati. Dok
dionica nije vodoravna, njega nema: `display: contents` ga izbriše
iz rasporeda i članovi padnu ravno u mrežu. */
.vod-vlak { display: contents; }
.vod-mjera { display: none; }
/* ── Arhiv koji se lista postrance ─────────────────────────────
Devet pečata u nizu nije popis nego galerija, a galerija se gleda
hodom uz zid. Ovdje se stranica na jednom mjestu prestane listati
dolje i počne udesno: dionica se prikuje, a niz se pomiče točno
onoliko koliko se miče čitatelj.
Duljinu hoda ne izmišlja CSS nego pogon: `--hod` je visina prozora
plus onoliko koliko niz strši preko njega. Time zadnji pečat sjedne
uz desni rub točno kad dionica završi, ni prije ni poslije.
Razred `vodoravno` postavlja pogon. Bez njega — u miru, na uskom
zaslonu, ili ako knjižnica ne stigne — arhiv je obična mreža. */
.vod-hod.vodoravno { height: var(--hod, 300svh); }
.vodoravno .vod-traka {
position: sticky; top: 0;
height: 100svh;
/* Preko cijele širine prozora, ne samo preko mjere stranice:
vodoravni hod ima smisla samo ako ima kuda ići. */
width: 100vw; max-width: none;
margin-inline: calc(50% - 50vw);
display: flex; align-items: center;
overflow: hidden;
grid-template-columns: none;
gap: 0;
}
.vodoravno .vod-vlak {
display: flex;
align-items: center;
gap: clamp(28px, 3.4vw, 64px);
padding-inline: var(--pojas);
will-change: transform;
}
/* U prikovanoj dionici pecat ima cijeli prozor, pa neka ga i uzme.
Na 24vw je stajao visok cetiristo piksela u prozoru od devetsto i
ostavljao dvjesto pedeset praznih gore i dolje. */
.vodoravno .arhiv-stavka {
flex: 0 0 clamp(300px, 32vw, 560px);
display: block;
}
/* ── Pet podrucja ispitivanja, kao panoi ───────────────────────
U mrezi su bili pet malih kartica s rupom u drugom redu i nista se
od njih nije pamtilo. Ovdje prolaze jedan po jedan, svaki sa svojom
brojkom, imenom i prvim pitanjem — kao petora vrata jedna za
drugima. */
.pitanje-pano {
display: block;
padding: var(--r6) 0 0;
border-top: 1px solid var(--rub);
color: inherit;
text-decoration: none;
transition: border-color var(--tempo) var(--izlaz);
}
.pitanje-pano:hover, .pitanje-pano:focus-visible { border-top-color: var(--zlato); }
.pitanje-pano .broj {
font-family: var(--pismo-vel);
/* Brojka je najjaci graficki znak panoa i u prikovanoj dionici ima
cijeli prozor. Na 6vw je pano stajao visok tristo piksela u
prozoru od devetsto. */
font-size: clamp(4.6rem, 9.5vw, 9.5rem);
line-height: .9; letter-spacing: .02em;
color: var(--zlato);
margin: 0;
}
.pitanje-pano .mjerilo {
font-family: var(--pismo-ui); font-size: var(--t-oznaka); font-weight: 700;
letter-spacing: .28em; text-transform: uppercase;
color: var(--kost-3);
margin: var(--r3) 0 var(--r7);
}
.pitanje-pano h3 {
margin: 0 0 var(--r5);
color: var(--kost);
font-size: clamp(1.5rem, 2.2vw, 2.1rem);
line-height: 1.16;
}
.pitanje-pano:hover h3 { color: var(--zlato-2); }
/* Prvo pitanje skupine: ono kaze kako se ovdje pita, a naslov
skupine ne kaze. Stoji u navodnicima jer je tudja recenica —
citateljeva, ne nasa. */
.pitanje-pano .okus {
margin: 0;
font-family: var(--pismo-ured);
font-style: italic;
font-size: clamp(1.05rem, 1.35vw, 1.3rem);
line-height: 1.4;
color: var(--kost-2);
max-width: 30ch;
}
.pitanje-pano .okus::before { content: "„"; }
.pitanje-pano .okus::after { content: "”"; }
.vodoravno .pitanje-pano {
flex: 0 0 clamp(320px, 34vw, 560px);
}
/* ── Glava prikovane dionice ───────────────────────────────────
Dok je dionica prikovana, u prozoru nema ničega osim niza: ni
naslova poglavlja, ni ruba stranice, ni trake. Niz stoji na mjestu
i pomiče se postrance, a to se bez ijedne oznake čita kao da je
listanje zapelo — čitatelj je prijavio točno to.
Zato ovdje stoji ime dionice i brojka koja se mijenja dok se lista.
Brojka je jedino što nedvojbeno kaže da se nešto događa. */
.vod-glava { display: none; }
.vodoravno .vod-glava {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--r5);
position: absolute; z-index: 2;
left: var(--pojas); right: var(--pojas);
top: calc(var(--traka-h) + var(--r5));
pointer-events: none;
}
.vod-ime, .vod-brojac {
margin: 0;
font-family: var(--pismo-ui); font-size: var(--t-oznaka); font-weight: 700;
letter-spacing: .28em; text-transform: uppercase;
}
.vod-ime { color: var(--kost-3); }
.vod-brojac { color: var(--zlato); display: flex; align-items: baseline; gap: .4em; }
.vod-brojac .kosa { color: var(--kost-3); }
.vod-brojac [data-vod-ukupno] { color: var(--kost-3); }
.vod-uputa {
margin-left: var(--r5);
color: var(--kost-3); font-weight: 600; letter-spacing: .2em;
}
@media (max-width: 720px) { .vod-uputa { display: none; } }
/* Vlas pri dnu koja kaže koliko je niza prošlo. Na jedan piksel se u
crnini nije vidjela, pa je dionica i s njom izgledala mrtvo. */
.vodoravno .vod-mjera {
display: block;
position: absolute;
left: var(--pojas); right: var(--pojas); bottom: clamp(34px, 5vh, 64px);
height: 2px;
background: var(--rub-jaci);
}
.vodoravno .vod-mjera > i {
display: block; height: 100%;
background: linear-gradient(to right, var(--zlato-3), var(--zlato));
transform-origin: left center;
transform: scaleX(var(--tok, 0));
}
/* Pečat stoji na crnini, ne u kutiji. Prije je svaka stavka arhiva
bila sivi pravokutnik s obrubom, pa je devet pečata izgledalo kao
devet gumba. Sada ih drži samo vlas pod natpisom. */
.arhiv-stavka {
position: relative; margin: 0; padding: 0;
background: none;
border: 0;
cursor: pointer;
color: inherit; text-align: left;
display: grid; grid-template-rows: auto 1fr;
}
.arhiv-slika {
position: relative;
display: block;
aspect-ratio: 1;
padding: var(--r5);
overflow: hidden;
}
/* Slika ispunjava ploču i staje u nju.
Prije je stajalo `max-height: 100%` uz `height: auto`. Postotak se u
toj postavi nije imao o što razriješiti — visina ploče dolazi iz
omjera, a omjer iz širine — pa se visoki znak (Sigillum, 392×544)
crtao u punoj mjeri i padao preko natpisa ispod sebe. Isti se
problem vraćao i s `height: 100%`.
Apsolutna slika nema tu dvojbu: kutija joj se mjeri po ploči, a
ploča ima određenu visinu. Mjera mora biti izrečena brojkom —
apsolutno položenoj *zamjenskoj* kutiji (a slika to jest) `auto`
znači vlastitu, urođenu veličinu, pa ni zadana četiri ruba ne bi
pomogla. `object-fit: contain` je onda drži unutra. */
.arhiv-slika img {
position: absolute;
top: var(--r5); left: var(--r5);
width: calc(100% - 2 * var(--r5));
height: calc(100% - 2 * var(--r5));
max-width: none;
object-fit: contain;
filter: drop-shadow(0 0 14px rgba(217, 203, 166, .12));
transition: transform var(--sporo) var(--hod), filter var(--tempo);
}
.arhiv-stavka:hover .arhiv-slika img { transform: scale(1.03); filter: drop-shadow(0 0 24px rgba(217, 203, 166, .3)); }
.arhiv-stavka .natpis {
display: block;
padding: var(--r4) 0 0;
border-top: 1px solid var(--rub);
transition: border-color var(--tempo) var(--izlaz);
}
.arhiv-stavka:hover .natpis,
.arhiv-stavka:focus-visible .natpis { border-top-color: var(--zlato); }
.arhiv-stavka .ime {
display: block;
font-family: var(--pismo-vel); font-size: 1rem; letter-spacing: .06em;
color: var(--kost);
}
.arhiv-stavka .rola {
display: block; margin-top: var(--r1);
font-family: var(--pismo-ui); font-size: var(--t-oznaka);
letter-spacing: .06em; color: var(--kost-3); line-height: 1.4;
}
@media (max-width: 520px) {
.arhiv-slika { padding: var(--r4); }
.arhiv-stavka figcaption { padding: var(--r3) var(--r4) var(--r4); }
.arhiv-stavka .ime { font-size: .92rem; }
}
/* ═══ 17 · PREGLEDNIK MEDIJA ═════════════════════════════════ */
#preglednik {
width: 100vw; max-width: 100vw;
height: 100svh; max-height: 100svh;
padding: 0; margin: 0; border: 0;
background: rgba(2, 2, 3, .97);
color: var(--kost);
overflow: hidden;
}
#preglednik::backdrop { background: rgba(2, 2, 3, .9); }
.preglednik-tijelo {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
height: 100svh;
padding: var(--r4) clamp(12px, 3vw, 28px);
gap: var(--r4);
}
.preglednik-vrh {
display: flex; align-items: center; justify-content: space-between; gap: var(--r4);
font-family: var(--pismo-ui); font-size: var(--t-oznaka); font-weight: 700;
letter-spacing: .24em; text-transform: uppercase; color: var(--kost-3);
}
.preglednik-scena {
display: grid; place-items: center;
min-height: 0;
position: relative;
}
/* Slika u pregledniku stoji apsolutno.
Scena je polje rešetke visoko `minmax(0, 1fr)`. Nad takvim se poljem
postotna visina ne razrješava — ni `max-height: 100%` ni
`height: 100%` — jer preglednik njegovu visinu smatra neodređenom
dok traje raspoređivanje. Kvadratni znak od 1400 px zato se crtao u
punoj mjeri, prelazio preko natpisa i padao ispod donjeg ruba.
Apsolutna slika ima određenu kutiju: scenu, koja je `position:
relative`. `object-fit: contain` je onda drži unutra u svakom
omjeru, a `place-items` scene i dalje drži strelice na mjestu. */
.preglednik-scena img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain;
}
.preglednik-dno {
display: grid; gap: var(--r2);
padding-bottom: var(--r3);
max-width: 70ch;
}
.preglednik-dno h3 { font-size: 1.3rem; color: var(--kost); }
.preglednik-dno p { font-size: .96rem; color: var(--kost-2); margin: 0; }
.preglednik-gumb {
display: grid; place-items: center;
width: 46px; height: 46px;
background: none; border: 1px solid var(--rub-jaci); color: var(--kost);
cursor: pointer;
transition: border-color var(--brzo), color var(--brzo), background var(--brzo);
}
.preglednik-gumb:hover { border-color: var(--zlato); color: var(--zlato-2); background: rgba(217,203,166,.08); }
.preglednik-gumb[disabled] { opacity: .3; cursor: default; }
.preglednik-vodi { display: flex; gap: var(--r2); }
/* Strelice preko scene na širokom zaslonu, ispod scene na uskom. */
@media (min-width: 860px) {
.preglednik-vodi.bocno { position: absolute; inset: 0; align-items: center; justify-content: space-between; pointer-events: none; }
.preglednik-vodi.bocno button { pointer-events: auto; }
}
@media (max-width: 859px) {
.preglednik-vodi.bocno { position: static; justify-content: center; }
}
/* ═══ 18 · PITANJA ═══════════════════════════════════════════ */
.pitanja { border-top: 1px solid var(--rub); max-width: 76ch; }
.pitanja details { border-bottom: 1px solid var(--rub); }
.pitanja summary {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--r5);
padding: var(--r5) 0;
cursor: pointer;
list-style: none;
font-family: var(--pismo-vel);
font-size: clamp(1.1rem, 1.7vw, 1.35rem);
line-height: 1.3;
color: var(--kost);
transition: color var(--brzo);
}
.pitanja summary::-webkit-details-marker { display: none; }
.pitanja summary:hover { color: var(--zlato-2); }
.pitanja summary .kriz {
flex-shrink: 0; width: 13px; height: 13px; position: relative;
transition: transform var(--tempo) var(--hod);
}
.pitanja summary .kriz::before,
.pitanja summary .kriz::after {
content: ""; position: absolute; background: var(--zlato);
}
.pitanja summary .kriz::before { left: 0; right: 0; top: 6px; height: 1px; }
.pitanja summary .kriz::after { top: 0; bottom: 0; left: 6px; width: 1px; }
.pitanja details[open] summary .kriz { transform: rotate(45deg); }
.pitanja details[open] summary .kriz::before,
.pitanja details[open] summary .kriz::after { background: var(--krv-2); }
.pitanja .odgovor { padding: 0 0 var(--r6); max-width: 66ch; }
.pitanja .odgovor p { color: var(--kost-2); font-size: 1rem; }
.pitanja .odgovor p + p { margin-top: var(--r4); }
/* ═══ 19 · ZAVRŠNA IZJAVA ════════════════════════════════════ */
/* Zavjet nema rub prema onome iznad sebe: silazak se ovdje ne
prekida crtom nego se dvorana jednostavno ponovo otvori. */
.zavrsna {
position: relative;
min-height: 100svh;
display: grid; align-items: center;
overflow: hidden;
isolation: isolate;
}
.zavrsna-medij { position: absolute; inset: 0; z-index: -2; }
.zavrsna-medij img { width: 100%; height: 100%; object-fit: cover; }
/* Gornji rub fotografije se pretače u crninu stranice, kao i kod
prizora, pa ulazak u posljednji kadar nema šava. */
.zavrsna-medij picture {
position: absolute; inset: 0;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 15%);
}
.zavrsna-medij::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to right, rgba(4,4,6,.94) 0%, rgba(4,4,6,.72) 45%, rgba(4,4,6,.4) 100%);
}
.zavrsna .oznaka { margin-bottom: var(--r5); }
.zavrsna h2 {
font-family: var(--pismo-ured);
font-style: italic;
font-weight: 500;
font-size: var(--t-golem);
line-height: 1.12;
max-width: 15ch;
margin-bottom: var(--r7);
}
.zavrsna .dopuna { max-width: 44ch; color: var(--kost-2); margin-bottom: var(--r7); }
.zavrsna .radnje { margin-bottom: var(--r6); }
/* ═══ 20 · PODNOŽJE ══════════════════════════════════════════ */
.podnozje {
background: var(--crno-dublje);
border-top: 1px solid var(--rub);
padding-block: var(--r9) var(--r7);
}
.podnozje-mreza { display: grid; gap: var(--r8); }
@media (min-width: 860px) {
.podnozje-mreza { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--r10); }
}
.podnozje .pecat-dno { width: 62px; margin-bottom: var(--r5); opacity: .9; }
.podnozje .ime-dno {
font-family: var(--pismo-znak); font-size: 1.7rem; letter-spacing: .02em;
color: var(--zlato-2); display: block; margin-bottom: var(--r3);
}
.podnozje .zavjet {
font-family: var(--pismo-ured); font-style: italic;
font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.35;
color: var(--kost); max-width: 24ch; margin: 0;
}
.podnozje .odricanje { font-size: .82rem; color: var(--kost-3); line-height: 1.8; }
.podnozje .odricanje p + p { margin-top: var(--r4); }
.podnozje-veze {
display: flex; flex-wrap: wrap; gap: var(--r2) var(--r5);
margin: 0 0 var(--r6); padding: 0; list-style: none;
}
.podnozje-veze li { margin: 0; }
.podnozje-veze a {
display: inline-flex; align-items: center;
min-height: 44px;
font-family: var(--pismo-ui); font-size: var(--t-oznaka); font-weight: 600;
letter-spacing: .18em; text-transform: uppercase; color: var(--kost-2);
}
/* ═══ 21 · TRAKA NAPRETKA ════════════════════════════════════ */
#napredak {
position: fixed; inset: 0 auto auto 0; z-index: calc(var(--z-traka) + 1);
height: 2px; width: 0;
background: var(--zlato);
pointer-events: none;
}
/* ═══ 22 · SIMBOLI (povijesni prikazi uz tekst) ══════════════ */
/* Ploča znaka.
Trinaest izvornika, trinaest omjera. Prije su stajali na kutiji
visine 168px i držali se za `max-height: 100%` — a taj postotak
unutar