/* ============================================================
RESET & BASE — all sizes in rem so font-size root scales everything
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0c0c0d;
--bg2: #141416;
--bg3: #1c1c1f;
--border: #282830;
--border2: #38383f;
--text: #e8e3da;
--text-muted: #8a857d;
--accent: #c8a96e;
--accent2: #a07845;
--accent2-light: #b19066;
--white: #ffffff;
--header-h: 4rem; /* single header row */
--gap: 0.875rem;
--radius: 3px;
}
/* ============================================================
LIGHT THEME — toggled via [data-theme="light"] on
Pure-white background, near-black text for sharp legibility.
Gold accents (--accent / --accent2 / --accent2-light) and
--white are intentionally left unchanged ("zlatnu ostavi").
============================================================ */
[data-theme="light"] {
--bg: #ffffff;
--bg2: #f7f7f6;
--bg3: #ededeb;
--border: #e2e0dc;
--border2: #cfccc6;
--text: #181715;
--text-muted: #57534c;
/* Gold reads weak/washed-out on white at the dark-mode shade — deepened
here for sharper legibility. --accent2 / --accent2-light (already
darker shades used for "info" text) are left as-is. */
--accent: #ad8a52;
}
/* Frosted-glass header must flip from dark to light tint */
[data-theme="light"] .site-header { background: rgba(255,255,255,0.92); }
/* Mobile nav panel: light glass background + flipped hover highlight
(base rule uses a light-on-dark rgba(255,255,255,…) overlay) */
[data-theme="light"] .mobile-nav-panel { background: rgba(255,255,255,0.97); }
[data-theme="light"] .mobile-nav-item:active,
[data-theme="light"] .mobile-nav-item:hover { background: rgba(0,0,0,0.04); }
/* Diary list row hover: flip the subtle white highlight to a dark one */
[data-theme="light"] .diary-entry:hover { background: rgba(0,0,0,0.025); }
/* Immersive (full-screen) hero is a theme-aware stage like everything
else — gets the page's white backdrop (var(--bg), no override needed)
instead of being pinned dark. Its caption and prev/next arrows are
light-on-dark colours that need a dark-ink flip to stay legible on
white; hover keeps the existing var(--accent) gold. Mirrors the
lightbox reversal: "treba da bude belo, a ne namerno crno". */
[data-theme="light"] .hero-caption { color: rgba(24,23,21,0.5); }
[data-theme="light"] .hero-prev::after { border-right-color: rgba(24,23,21,0.35); }
[data-theme="light"] .hero-next::after { border-left-color: rgba(24,23,21,0.35); }
[data-theme="light"] .hero-close::after { border-bottom-color: rgba(24,23,21,0.35); }
/* Hero overlay gradients exist purely to tint/blend the photo for visual
depth in dark mode — they're built from dark-toned stops (and a
var(--bg) midpoint that assumes a dark backdrop), so on a light theme
they read as harsh white/dark smudges across the image rather than the
seamless, "clean" effect they have in dark mode. Hide them entirely —
the natural light-mode counterpart of an invisible dark-on-dark blend
is no blend at all; every other image on the site (article, about,
masonry) already sits "clean" on white with no overlay. Covers both
the normal landscape hero and the immersive full-screen view. */
[data-theme="light"] .hero-overlay { display: none; }
/* Image counter / prev-next pills (multi-image article page view): in
dark mode their rgba(0,0,0,0.6) backdrop blends invisibly into the page
— no "square" is perceived, just floating white glyphs. On white that
same backdrop reads as a harsh dark box, so flip to the natural inverse:
no backdrop, dark ink — mirroring how they already read in dark mode. */
[data-theme="light"] .image-counter,
[data-theme="light"] .image-nav-btn {
background: transparent;
color: var(--text);
}
[data-theme="light"] .image-nav-btn:hover { background: rgba(0,0,0,0.06); }
/* Lightbox adapts to the page theme like everything else — it's a fixed
dark stage (#060607) by default, overridden here to a white stage so
it never reads as "deliberately black". Its prev/next arrows
(light-on-dark rgba(255,255,255,…)) need a dark-ink flip here to stay
visible on white; hover stays gold via --accent. Dark mode is untouched
since this rule only fires under [data-theme="light"]. */
[data-theme="light"] .lightbox { background: var(--bg); }
[data-theme="light"] .lightbox-prev::after { border-right-color: rgba(24,23,21,0.35); }
[data-theme="light"] .lightbox-next::after { border-left-color: rgba(24,23,21,0.35); }
[data-theme="light"] .lightbox-close::after { border-bottom-color: rgba(24,23,21,0.35); }
/* (The old light-mode "box-shadow: none" override for images was removed
entirely — every image/media element sitewide now carries no box-shadow
in EITHER theme, at its own base rule, so there's nothing left to override.
See .article-img / .lightbox-img / .cb-image img / .about-portrait-img etc.
— all flat, so any image sits on one uniform background in both themes.
Functional non-image panel shadows — .nav-dropdown, .search-box — are
deliberately kept; those are floating UI affordances, not the image-halo
this removal targets.) */
/* These sit on a gold surface over photographic backgrounds and rely on
var(--bg) acting as a dark "ink" colour for contrast — keep it dark */
[data-theme="light"] .hero-cta:hover,
[data-theme="light"] .video-play-btn { color: #0c0c0d; }
/* Hero name/role/latest-link/dots are light-on-dark colours that assume
a dark backdrop. In the real layouts — golden-ratio landscape column,
stacked portrait row, AND immersive full-screen (now a white stage,
see above) — that backdrop is var(--bg) with no dark photo overlay,
so on white these flip to dark ink for legibility. (.hero-name/-role/
-latest-link sit inside .hero-content, which is hidden in immersive
mode, so flipping them there is harmless.)
Inactive dots are drawn as a hollow contour ring (inset box-shadow,
transparent fill) rather than a filled blob — box-sizing is unaffected
since box-shadow doesn't participate in box geometry. */
[data-theme="light"] .hero-name { color: var(--text); }
[data-theme="light"] .hero-role { color: rgba(24,23,21,0.55); }
[data-theme="light"] .hero-latest-link { color: rgba(24,23,21,0.65); }
[data-theme="light"] .hero-latest-link:hover { color: var(--text); }
[data-theme="light"] .hero-dot:not(.active) {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(24,23,21,0.4);
}
[data-theme="light"] .hero-dot:hover {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(24,23,21,0.65);
}
[data-theme="light"] .hero-dot:not(.active)::before {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(24,23,21,0.45);
}
[data-theme="light"] .hero-dot:hover::before {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(24,23,21,0.7);
}
html { scroll-behavior: smooth; font-size: 18px; } /* fixed base — the A-/A+ resize feature was removed */
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 1rem; /* inherits the fixed 18px set on html */
line-height: 1.65;
color: var(--text);
background: var(--bg);
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
/* ============================================================
HEADER
============================================================ */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
min-height: var(--header-h); /* grows when tools wrap to 2 rows */
height: auto;
z-index: 100;
background: rgba(12,12,13,0.95);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
transition: opacity 0.5s ease;
}
body.hero-immersive .site-header {
opacity: 0;
pointer-events: none;
}
.header-inner {
display: flex;
align-items: center;
flex-wrap: nowrap; /* logo + nav stay on row 1 */
min-height: var(--header-h);
max-width: 1600px;
margin: 0 auto;
padding: 0 1.5rem;
gap: 1rem;
}
/* Right side, one row: category nav + search + language as a unit, then a
quieter, compact cluster of display controls (font / grid / theme). */
.header-bar {
display: flex;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
margin-left: auto;
}
/* Quiet cluster: dimmed by default, no button outlines, brightening on hover
so it reads as secondary to the nav it sits beside. */
.header-utils {
display: flex;
align-items: center;
gap: 0.15rem;
opacity: 0.65;
transition: opacity 0.2s;
}
.header-utils:hover { opacity: 1; }
.header-utils .grid-btn,
.header-utils .theme-toggle { border-color: transparent; }
.header-utils .grid-btn:hover,
.header-utils .theme-toggle:hover { border-color: var(--accent2); }
/* Thin divider separating the nav/search group from the quiet cluster. */
.header-sep {
width: 1px;
height: 1.15rem;
background: var(--border2);
margin: 0 0.15rem;
flex-shrink: 0;
}
.logo { display: flex; flex-direction: column; line-height: 1.15; flex-shrink: 0; }
.logo-main {
font-family: 'Gentium Plus', serif;
font-size: 1.45rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--accent);
}
/* ── Grid size controls ─────────────────────────────────────── */
.grid-controls {
display: flex;
gap: 0.15rem;
flex-shrink: 0;
}
.grid-btn {
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: color 0.2s, border-color 0.2s;
}
.grid-btn:hover { color: var(--accent); border-color: var(--accent2); }
/* ── Theme toggle (sun/moon) ────────────────────────────────── */
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: var(--radius);
flex-shrink: 0;
transition: color 0.2s, border-color 0.2s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent2); }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
/* ── Search button ──────────────────────────────────────────── */
.search-btn {
display: flex;
align-items: center;
justify-content: center;
width: 2rem; height: 2rem;
flex-shrink: 0;
color: var(--text-muted);
border-radius: var(--radius);
transition: color 0.2s, background 0.2s;
}
.search-btn:hover { color: var(--text); background: var(--bg3); }
/* ── Nav ────────────────────────────────────────────────────── */
.site-nav {
display: flex;
align-items: center;
gap: 0.15rem;
flex: 0 0 auto;
overflow: visible;
}
.nav-item { position: relative; }
.nav-btn {
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.35rem 0.75rem;
border-radius: var(--radius);
font-size: 0.85rem;
letter-spacing: 0.02em;
color: var(--text-muted);
white-space: nowrap;
transition: color 0.2s, background 0.2s;
}
.nav-btn:hover, .nav-btn.active { color: var(--text); background: var(--bg3); }
.nav-btn.active { color: var(--accent); }
.arrow { font-size: 0.85rem; opacity: 0.6; transition: transform 0.2s; }
.nav-item.open > .nav-btn .arrow { transform: rotate(180deg); }
.nav-dropdown {
display: none;
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
min-width: 14rem;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.3rem 0;
z-index: 200;
box-shadow: 0 1rem 3rem rgba(0,0,0,0.6);
/* no max-height, no overflow — extends to show all items */
}
.nav-item.open > .nav-dropdown {
display: block;
animation: dropdown-in 0.15s ease;
}
/* Mega dropdown (categories with many subcategories): two columns filled
left-to-right (row-major), so the list is half as tall. Anchored to the
button's right edge — the nav sits on the right of the header, so a wide
panel would otherwise run off the viewport. */
.nav-item.open > .nav-dropdown--mega {
display: grid;
grid-template-columns: repeat(2, auto);
column-gap: 0.75rem;
left: auto;
right: 0;
min-width: 0;
}
@keyframes dropdown-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.nav-dropdown-item {
display: block;
padding: 0.3rem 1.1rem;
font-size: 0.85rem;
color: var(--text-muted);
transition: color 0.2s, background 0.2s;
white-space: nowrap;
}
.nav-dropdown-item:hover { color: var(--text); background: var(--bg3); }
.nav-dropdown-item.active { color: var(--accent); }
/* ── Hamburger ──────────────────────────────────────────────── */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 2.5rem;
height: 2.5rem;
padding: 0.5rem;
flex-shrink: 0;
}
.nav-toggle span {
display: block;
width: 100%;
height: 2px;
background: var(--text);
border-radius: 1px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
height: 100vh;
height: 100svh;
min-height: 560px;
display: flex;
align-items: center; /* portrait overrides to stretch; landscape split inherits this */
overflow: hidden;
max-width: 1600px;
margin: 0 auto;
}
/* Immersive (full-screen) mode breaks out of the header-width frame —
"full prikaz" means filling the actual viewport, not the content
column. Slides/overlay/arrows are positioned relative to .hero
(inset/top/left: 0) or the viewport (.hero-prev/.hero-next are
position: fixed), so they naturally re-fill the screen the instant
the frame is lifted. */
body.hero-immersive .hero { max-width: none; margin: 0; }
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
position: absolute;
inset: 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1.2s ease;
}
.hero-slide.active { opacity: 1; }
.hero-overlay {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(to top, rgba(12,12,13,0.88) 0%, rgba(12,12,13,0.25) 55%, rgba(12,12,13,0.05) 100%),
linear-gradient(to right, rgba(12,12,13,0.45) 0%, transparent 65%);
}
.hero-content {
position: relative;
z-index: 2;
/* Symmetric-ish padding so the visible text block sits at the true
vertical center of .hero (align-items: center above) — the old
flex-end layout used a lopsided 9rem bottom pad instead, purely to
clear the fixed-position dot row (.hero-nav, bottom: 1.75rem) while
bottom-anchored; that big invisible pad would otherwise bias a
centered box upward. 2rem top/bottom is just a floor so a wrapped
multi-line .hero-latest-link never gets flush against .hero-nav on
short viewports. */
padding: 2rem 3.5rem;
max-width: 42rem;
transition: opacity 0.5s ease;
}
body.hero-immersive .hero-content {
opacity: 0;
pointer-events: none;
}
.hero-eyebrow {
font-size: 0.85rem;
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.75rem;
}
.hero-name {
font-family: 'Gentium Plus', serif;
font-size: clamp(3.15rem, 7.2vw, 6.75rem);
font-weight: 400;
line-height: 0.92;
letter-spacing: -0.01em;
color: var(--white);
margin-bottom: 1.1rem;
}
.hero-role {
font-size: 0.85rem; /* not smaller than the nav menu items (.nav-btn) */
font-weight: 300;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(232,227,218,0.55);
margin-bottom: 2.2rem;
}
.hero-cta {
display: inline-block;
padding: 0.7rem 1.75rem;
border: 1px solid rgba(200,169,110,0.45);
font-size: 0.85rem; /* not smaller than the nav menu items (.nav-btn) */
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
border-radius: var(--radius);
transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.hero-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.hero-latest {
display: flex;
align-items: baseline;
gap: 0.6rem;
margin-top: 2.2rem;
}
.hero-latest-label {
font-size: 0.85rem; /* not smaller than the nav menu items (.nav-btn) */
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
flex-shrink: 0;
}
.hero-latest-link {
/* Not flex on purpose: the arrow needs to sit inline right after the
title's last word, wherever that word ends up wrapping to — a flex
row would instead park it as its own column, vertically centered
against the whole (possibly multi-line) title block. inline-block
lets title text + arrow flow together as normal text, and max-width
here (rather than on the title span, which as plain inline text
ignores max-width) is what forces the wrap — kept roughly at or
under where ".hero-role" (ICONOGRAPHER · PAINTER · THEOLOGIAN) ends
on the line above, per explicit request. */
display: inline-block;
max-width: 15.5rem;
font-size: 0.85rem; /* not smaller than the nav menu items (.nav-btn) */
font-weight: 300;
color: rgba(232,227,218,0.65);
transition: color 0.2s;
text-align: left;
line-height: 1.6; /* breathing room when a long title wraps to 2+ lines */
}
.hero-latest-link:hover { color: var(--white); }
.hero-latest-arrow {
display: inline-block; /* reliable target for the hover transform, inline */
font-size: 0.85rem;
margin-left: 0.35rem;
transition: transform 0.2s;
}
.hero-latest-link:hover .hero-latest-arrow { transform: translateX(3px); }
/* Same breakpoint as the header's hamburger toggle (`max-width: 1100px`,
see HEADER/RESPONSIVE) — the arrow is dropped entirely in that narrower
view (standard desktop keeps it); independent of the hero's own
separate orientation-based responsive rules below, which only ever
touch this element's font-size, never its display. */
@media (max-width: 1100px) {
.hero-latest-arrow { display: none; }
}
/* ── Hero nav dots: small filled circles ─────────────────── */
.hero-nav {
position: absolute;
left: 3.5rem;
bottom: 1.75rem;
z-index: 2;
display: flex;
flex-direction: row;
gap: 0.55rem;
align-items: center;
}
.hero-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(255,255,255,0.28);
transition: background 0.25s, transform 0.25s;
flex-shrink: 0;
}
.hero-dot.active {
background: var(--accent);
transform: scale(1.25);
}
.hero-dot:hover { background: rgba(255,255,255,0.55); }
/* Hero caption — visible only in immersive mode. Centered with a modest
symmetric inset (just breathing room off the screen edges, not sized to
dodge anything) — prev/next/close all moved to their own top strip (see
.hero-topbar below), so the bottom strip no longer needs to reserve
space around itself the way it used to; a long title still simply wraps
to its own next line, see --hero-cap-extra below for how the strip
grows to fit it. */
.hero-caption {
position: absolute;
bottom: 3.5rem;
left: 2rem; right: 2rem;
text-align: center;
z-index: 3;
font-family: 'Gentium Plus', serif;
font-size: 0.85rem; /* not smaller than the nav menu items (.nav-btn) */
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1.6;
overflow-wrap: break-word;
color: rgba(255,255,255,0.45);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
/* --hero-cap-extra (set by measureHeroCaption() in app.js) only grows the
strip below (.hero-slides/.hero-overlay `bottom`), not this — the
caption's own `bottom` anchor stays put and it simply grows upward by
its own height as it wraps, so only the strip needs to retreat further
to stay clear of it. */
body.hero-immersive .hero-caption { opacity: 1; bottom: 1.8rem; }
/* Top-right control strip (prev / close / next) — a plain flex row, no
background bar, floating over the image the same discreet way every
other hero control already does. The explicit close affordance (the
click-anywhere-to-close behaviour isn't obvious to every visitor) is
now an upward-pointing triangle sitting between prev/next, matching
their own border-trick triangle style instead of a separate "✕" badge —
one consistent triangle family for all three controls. */
.hero-topbar {
display: none;
position: fixed;
top: 0;
right: 0;
height: 3.75rem;
align-items: center;
gap: 1.1rem; /* fino diskretno odmaknite — discreet spacing, not touching */
padding-right: 1.75rem;
z-index: 5;
}
body.hero-immersive .hero-topbar { display: flex; }
.hero-close, .hero-prev, .hero-next {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: none;
background: transparent;
padding: 0;
flex-shrink: 0;
}
/* prev/next only make sense with more than one slide */
.hero-prev, .hero-next { display: none; }
body.hero-immersive.hero-multi .hero-prev,
body.hero-immersive.hero-multi .hero-next { display: flex; }
.hero-close::after, .hero-prev::after, .hero-next::after {
content: '';
width: 0; height: 0;
transition: border-color 0.2s;
}
.hero-prev::after, .hero-next::after {
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
}
.hero-prev::after { border-right: 0.75rem solid #fff; }
.hero-next::after { border-left: 0.75rem solid #fff; }
.hero-close::after {
border-left: 0.5rem solid transparent;
border-right: 0.5rem solid transparent;
border-bottom: 0.75rem solid #fff;
}
.hero-prev:hover::after { border-right-color: var(--accent); }
.hero-next:hover::after { border-left-color: var(--accent); }
.hero-close:hover::after { border-bottom-color: var(--accent); }
/* Clickable hero cursor */
/* Default (arrow) cursor over the hero in general — clicking still opens
fullscreen from anywhere in it, but the cursor itself only calls that
out with a magnifying glass while actually over the photo's own visible
pixels (computed in JS, since a `background-size: contain` image can
leave letterboxed bars within its container that aren't part of the
photo). Real buttons/links inside .hero-content keep their own native
pointer cursor regardless. Immersive (fullscreen) mode: plain default
cursor throughout too — a hand there serves no purpose (nothing left to
"click into", it's already fullscreen); click-anywhere-to-close and
every other control still work exactly as before. */
.hero { cursor: default; }
.hero.cursor-zoom { cursor: zoom-in; }
/* ── Immersive mode: image contained, dots centered below ── */
body.hero-immersive .hero-slides,
body.hero-immersive .hero-overlay {
top: 3.75rem; /* reserve .hero-topbar's own height — image can never sit under prev/close/next */
bottom: calc(3.75rem + var(--hero-cap-extra, 0px)); /* reserve strip for caption + dots */
}
body.hero-immersive .hero-nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.6rem;
flex-direction: row;
width: max-content;
}
/* Portrait img: hidden by default (landscape uses background-image) */
.hero-slide-img { display: none; }
/* ── LANDSCAPE: hero image in right golden-ratio column ──────
Image starts below header (top: header-h) and in right
golden-ratio column (left: 38.2%). Text is on the dark left.
In immersive mode (click) image goes full screen.
────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (min-width: 600px) {
.hero-slides {
top: var(--header-h); /* start below header */
left: 38.2%; /* golden-ratio right column */
}
/* Overlay matches the image area exactly */
.hero-overlay {
top: var(--header-h);
left: 38.2%;
background:
linear-gradient(to right,
var(--bg) 0%,
rgba(12,12,13,0.45) 20%,
transparent 55%),
linear-gradient(to top,
rgba(12,12,13,0.6) 0%,
transparent 45%);
}
/* Immersive: image fills full width (top stays reserved for .hero-topbar,
set in the base immersive rule above — not re-zeroed here). */
body.hero-immersive .hero-slides,
body.hero-immersive .hero-overlay {
left: 0;
}
body.hero-immersive .hero-overlay {
background:
linear-gradient(to top, rgba(12,12,13,0.5) 0%, transparent 40%);
}
/* Tighter hero name in the narrower left column */
.hero-name {
font-size: clamp(2.5rem, 5vw, 5.85rem);
}
}
/* ── PORTRAIT — flex column, guaranteed order: image→dots→text ─
Normal: image starts at header bottom, then dots, then text.
Full (immersive): image from top of screen, dots below image,
text hidden.
────────────────────────────────────────────────────────── */
@media (orientation: portrait) {
/* Whole home = one viewport, no scroll */
#home {
height: 100vh;
height: 100svh;
overflow: hidden;
}
/* Hero: flex column, pushed below header */
.hero {
position: relative;
height: 100vh;
height: 100svh;
padding-top: var(--header-h); /* image starts at header bottom */
display: flex;
flex-direction: column;
align-items: stretch; /* override global flex-end — children fill full width */
overflow: hidden;
cursor: default;
}
/* 1 ── Image area: fixed height, contained image */
.hero-slides {
order: 0; /* first */
position: relative; /* in flex flow, not absolute */
inset: auto;
flex: 0 0 54vh; /* ~54% of viewport for image */
flex: 0 0 54svh;
width: 100%;
overflow: hidden;
z-index: 0;
}
/* Slides fill the image container */
.hero-slide {
position: absolute;
inset: 0;
background-size: contain;
background-position: center;
opacity: 0;
transition: opacity 0.8s ease;
}
.hero-slide.active { opacity: 1; }
/* No overlay — text is in its own row below image */
.hero-overlay { display: none; }
/* 2 ── Dots: full width row, centred, between image and text */
.hero-nav {
order: 1;
position: relative;
inset: auto;
left: auto; right: auto; bottom: auto;
transform: none;
width: 100%; /* full width so justify-content: center works */
flex: 0 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0;
padding: 0.75rem 0;
background: transparent;
z-index: 2;
}
/* Compact dots — smaller tap area, closer together */
.hero-dot {
width: 22px; height: 22px;
background: transparent !important;
transform: none !important;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
}
.hero-dot::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.28);
transition: background 0.25s, transform 0.25s;
}
.hero-dot.active::before { background: var(--accent); transform: scale(1.3); }
.hero-dot:hover::before { background: rgba(255,255,255,0.5); }
/* Portrait dots are two-part: an invisible 22px tap-target (.hero-dot)
plus the actual visible 6px mark (::before) — unlike landscape,
where .hero-dot IS the visible dot. The global light-mode contour-
ring rule (line ~131) draws a ring on .hero-dot itself, which here
lands on the invisible outer tap-target — producing an unwanted
"bullseye" of two concentric rings. Cancel the outer ring; the
::before ring (already styled globally) remains the single visible
contour, matching the clean look of the desktop dots. */
[data-theme="light"] .hero-dot:not(.active),
[data-theme="light"] .hero-dot:hover {
background: transparent;
box-shadow: none;
}
/* 3 ── Text: FATHER + name on one line + Latest */
.hero-content {
order: 2;
position: relative;
inset: auto;
flex: 1;
width: 100%; /* ensure full width for centering */
max-width: none; /* override desktop's 42rem cap — was leaving box flush-left on wide tablets */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 1.5rem 0.75rem;
text-align: center;
z-index: 2;
overflow: hidden;
}
/* FATHER label — larger, prominent */
.hero-eyebrow {
font-size: 0.85rem; /* not smaller than the nav menu items (.nav-btn) */
letter-spacing: 0.28em;
margin-bottom: 0.5rem;
}
/* Name on one line, centered, larger */
.hero-name {
font-size: clamp(1.6rem, 6.75vw, 2.25rem);
white-space: nowrap;
line-height: 1.1;
margin-bottom: 0;
width: 100%;
text-align: center;
}
/* Hide
— space before it in HTML keeps the words separated */
.hero-name br { display: none; }
/* Hide role and Explore Works button */
.hero-role { display: none; }
.hero-cta { display: none; }
/* Latest stays, centred, larger */
.hero-latest { justify-content: center; margin-top: 1.1rem; }
.hero-latest-link { text-align: center; font-size: 0.88rem; }
.hero-latest-label { font-size: 0.85rem; letter-spacing: 0.22em; }
.hero-latest-arrow { font-size: 0.88rem; }
/* Hide caption and scroll hint */
.hero-scroll-hint { display: none !important; }
.hero-caption { display: none !important; }
/* ── Immersive portrait: image from top, caption + dots below, text hidden ── */
body.hero-immersive .hero {
padding-top: 0;
display: block; /* back to standard to allow absolute children */
}
body.hero-immersive .hero-slides {
position: absolute;
inset: 0;
flex: none;
top: 3.75rem; /* reserve .hero-topbar's own height, same as landscape */
bottom: calc(4rem + var(--hero-cap-extra, 0px)); /* reserve strip for caption + dots */
}
body.hero-immersive .hero-caption {
display: block !important;
opacity: 1;
position: absolute;
bottom: 2rem;
text-align: center;
z-index: 3;
font-family: 'Gentium Plus', serif;
font-size: 0.85rem; /* not smaller than the nav menu items (.nav-btn) */
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
pointer-events: none;
}
/* This portrait rule's extra `body` element raises its specificity
above the global [data-theme="light"] .hero-caption flip (line ~61),
so its light-on-dark colour was winning and rendering the caption
invisible against immersive mode's white backdrop ("nedostaje
natpis"). Re-flip to dark ink at matching specificity. */
[data-theme="light"] body.hero-immersive .hero-caption {
color: rgba(24,23,21,0.5);
}
body.hero-immersive .hero-nav {
position: absolute;
inset: auto;
left: 50%;
bottom: 0.5rem;
transform: translateX(-50%);
width: max-content;
padding: 0;
}
body.hero-immersive .hero-content { display: none; }
body.hero-immersive .hero-overlay { display: none; }
}
/* ============================================================
SECTION LANDING
============================================================ */
.section-landing { padding-top: var(--header-h); }
.section-landing-body {
max-width: 720px;
margin: 0 auto;
padding: 2rem 1.75rem 5rem;
}
.section-landing-title {
font-family: 'Gentium Plus', serif;
font-size: clamp(1.35rem, 3.6vw, 2.375rem); /* matches .gallery-title / .article-title exactly */
font-weight: 400;
letter-spacing: 0.02em;
color: var(--text);
margin: 0.5rem 0 0.5rem;
line-height: 1.15;
}
.section-landing-desc {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 2.25rem;
}
/* ── Subcategory list ──────────────────────────────────────── */
.subcat-list { width: 100%; }
.subcat-list-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.5rem;
padding: 0.85rem 0;
border-bottom: 1px solid var(--border);
color: var(--text);
cursor: pointer;
transition: color 0.18s;
text-decoration: none;
}
.subcat-list-item:first-child { border-top: 1px solid var(--border); }
.subcat-list-item:hover { color: var(--accent); }
.subcat-list-name {
font-family: 'Gentium Plus', serif;
font-size: clamp(1.05rem, 2.2vw, 1.35rem);
font-weight: 400;
line-height: 1.25;
}
.subcat-list-count {
font-size: 0.85rem;
letter-spacing: 0.06em;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
transition: color 0.18s;
}
.subcat-list-item:hover .subcat-list-count { color: var(--accent2); }
/* ============================================================
BREADCRUMB
============================================================ */
.breadcrumb {
font-size: 0.82rem;
color: var(--text-muted);
letter-spacing: 0.03em;
margin-bottom: 0.5rem;
display: inline;
line-height: 1.4rem; /* a bit more room between wrapped lines on long titles */
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { margin: 0 0.4rem; opacity: 0.35; }
.breadcrumb .current { color: var(--text); }
.breadcrumb-counter {
font-size: 0.82rem; /* matches the adjacent .breadcrumb */
color: var(--text-muted);
letter-spacing: 0.04em;
white-space: nowrap;
margin-left: 0.6rem;
}
.counter-dot {
opacity: 0.4;
margin-right: 0.3rem;
}
/* ── Sticky breadcrumb bar (section landing & gallery) ──────── */
.crumb-bar {
position: sticky;
top: var(--header-h);
z-index: 10;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.crumb-bar-inner {
max-width: 1600px;
margin: 0 auto;
/* Vertical padding tuned so this bar's height matches the article-page
topbar's (taller, because of its boxed Previous/Back/Next buttons) —
re-tuned after .breadcrumb picked up its own explicit line-height. */
padding: 1.1rem 1.75rem;
line-height: 1.2rem;
}
.crumb-bar .breadcrumb { margin-bottom: 0; }
/* ============================================================
GALLERY
============================================================ */
.gallery-section { padding-top: var(--header-h); }
.gallery-header {
max-width: 1600px; margin: 0 auto;
padding: 1.5rem 1.75rem 1rem;
}
.gallery-title {
font-family: 'Gentium Plus', serif;
font-size: clamp(1.35rem, 3.6vw, 2.375rem);
font-weight: 400;
letter-spacing: 0.02em;
color: var(--text);
margin: 0.375rem 0 0.5rem;
line-height: 1.15;
}
.gallery-desc {
font-size: 0.85rem;
color: var(--text-muted);
max-width: 35rem; line-height: 1.75;
}
.gallery-wrap {
max-width: 1600px; margin: 0 auto;
padding: 1.25rem 1.75rem 2.25rem;
}
.gallery-empty {
color: var(--text-muted); padding: 2rem;
font-size: 0.9rem;
}
/* ── Masonry: JS-managed flex columns ─────────────────────── */
.masonry-grid {
display: flex;
align-items: flex-start;
gap: var(--gap);
}
.masonry-col {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--gap);
min-width: 0;
}
.masonry-item {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: var(--bg2);
cursor: pointer;
border: 1px solid var(--border);
transition: border-color 0.25s, transform 0.25s;
}
.masonry-item:hover { border-color: var(--accent2); transform: translateY(-2px); }
/* Skeleton placeholder — aspect ratio 3:4 before image loads */
.masonry-placeholder {
width: 100%;
padding-top: 133%; /* default 3:4; image will push this aside once loaded */
background: var(--bg3);
animation: skel-pulse 1.5s ease-in-out infinite;
}
@keyframes skel-pulse { 0%,100%{opacity:0.35;} 50%{opacity:0.65;} }
.masonry-img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.4s ease, transform 0.5s ease, filter 0.25s;
filter: brightness(0.88);
}
/* After load: let the image define its own height */
.masonry-img.loaded {
position: static;
height: auto;
object-fit: initial;
opacity: 1;
}
.masonry-item:hover .masonry-img { transform: scale(1.025); filter: brightness(1); }
.masonry-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(12,12,13,0.92) 0%, transparent 100%);
padding: 2rem 0.75rem 0.7rem;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.25s, transform 0.25s;
pointer-events: none;
}
.masonry-item:hover .masonry-caption { opacity: 1; transform: none; }
.masonry-caption-title {
font-family: 'Gentium Plus', serif;
font-size: 0.9rem;
color: var(--white); line-height: 1.3;
}
/* Info (technique/author/year) NOT shown on hover — only in lightbox */
/* Video play button */
.video-play-btn {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 3rem; height: 3rem;
background: rgba(200,169,110,0.85);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
color: var(--bg);
transition: background 0.25s, transform 0.25s;
pointer-events: none;
z-index: 2;
}
.masonry-item:hover .video-play-btn { background: var(--accent); transform: translate(-50%, -50%) scale(1.1); }
/* Text-only card */
.masonry-text-card {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: border-color 0.25s, transform 0.25s;
}
.masonry-text-card:hover { border-color: var(--accent2); transform: translateY(-2px); }
.text-card-inner { padding: 1.25rem 1rem; }
.text-card-title {
font-family: 'Gentium Plus', serif;
font-size: 1.1rem;
font-weight: 400;
color: var(--text);
line-height: 1.35;
margin-bottom: 0.5rem;
}
.text-card-preview {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.6;
}
/* Sentinel */
.loading-sentinel {
height: 4.5rem;
display: flex; align-items: center; justify-content: center;
}
.loading-sentinel::after {
content: '';
width: 1.5rem; height: 1.5rem;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.loading-sentinel.settled::after,
.loading-sentinel.done::after { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.no-more {
text-align: center; padding: 1rem;
font-size: 0.85rem;
letter-spacing: 0.2em; color: var(--text-muted);
}
/* ============================================================
LIGHTBOX — scrollable, left-aligned
============================================================ */
.lightbox {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
/* dvh = dynamic viewport height: adjusts when mobile browser bars show/hide */
min-height: 100vh;
min-height: 100dvh;
z-index: 300;
background: #060607; /* fully opaque — no gap visible on mobile */
display: flex;
flex-direction: column;
overscroll-behavior: none; /* iOS: prevents rubber-band showing background */
}
.lightbox[hidden] { display: none; }
/* Two rows: row 1 is the counter (left) with prev/close/next + the "Page
View" link grouped together on the right; row 2 is the title, centered,
full width. Nothing to dodge anymore — every control lives in row 1, so
the title is free to wrap across as many lines as it needs without any
side constraint (min-height, not height, lets the strip grow for that). */
.lightbox-topbar {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.875rem 1.5rem;
border-bottom: 1px solid var(--border);
min-height: 3.25rem;
}
.lightbox-topbar-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.lightbox-counter {
font-size: 0.85rem;
letter-spacing: 0.1em;
color: var(--text-muted);
flex-shrink: 0;
}
/* Small raised digit for a multi-image article's own image position (e.g.
"13² / 45") — a minor, secondary distinction, kept out of the way of
the main article count instead of a second "N / M" pair next to it. */
.lb-counter-sub {
font-size: 0.65em;
vertical-align: super;
opacity: 0.75;
margin-left: 0.05em;
}
.lightbox-topbar-title {
max-width: 100%;
font-size: 0.95rem; /* it displays the actual item title — a bit more prominent than plain secondary text */
font-weight: 500;
line-height: 1.4;
text-align: center;
color: var(--text);
overflow-wrap: break-word;
}
.lightbox-topbar-title[hidden] { display: none; }
.lightbox-topbar-actions {
display: flex;
align-items: center;
gap: 0.85rem; /* fino diskretno odmaknite — discreet spacing, not cramped */
flex-shrink: 0;
}
/* prev / close / next — one consistent triangle family (close points up,
between the two, matching the same border-trick style used elsewhere
sitewide), finely spaced apart rather than touching. */
.lightbox-close, .lightbox-prev, .lightbox-next {
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border: none;
background: transparent;
padding: 0;
flex-shrink: 0;
}
.lightbox-close::after, .lightbox-prev::after, .lightbox-next::after {
content: '';
width: 0; height: 0;
transition: border-color 0.2s;
}
.lightbox-prev::after, .lightbox-next::after {
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
}
.lightbox-prev::after { border-right: 0.75rem solid #fff; }
.lightbox-next::after { border-left: 0.75rem solid #fff; }
.lightbox-close::after {
border-left: 0.5rem solid transparent;
border-right: 0.5rem solid transparent;
border-bottom: 0.75rem solid #fff;
}
.lightbox-prev:hover::after { border-right-color: var(--accent); }
.lightbox-next:hover::after { border-left-color: var(--accent); }
.lightbox-close:hover::after { border-bottom-color: var(--accent); }
/* Scrollable body */
.lightbox-body {
flex: 1;
overflow: auto; /* x+y scroll — enables pan when image is zoomed */
display: flex;
align-items: flex-start;
justify-content: center;
padding: 2rem 4rem 3rem;
}
.lightbox-inner {
width: 100%;
max-width: 52rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
}
.lightbox-img {
max-width: 100%;
height: auto;
max-height: min(72svh, 72svw); /* cap by the SHORTER viewport side — keeps display size (and zoom headroom) identical between portrait/landscape on any device */
object-fit: contain;
border-radius: var(--radius);
/* No box-shadow anywhere images appear — flat on one uniform background
(the reachable photo-only mode already forced this via
.lightbox--photo-only .lightbox-img; removed from the base too so intent
is uniform across the whole site). */
align-self: center;
}
/* Photo-only mode (the only reachable lightbox mode today — Video "Lightbox
View" button, zoom-click on article/about images): the image fills the
entire available area below the topbar, real dimensions permitting —
no arbitrary width/height cap, matching zizioulas.org's lightbox.
.lightbox-inner is given a *definite* box (100%/100% of .lightbox-body)
so percentage sizing on the image resolves against something real.
Centering is done via margin:auto on the image itself, NOT
align-items/justify-content:center on the flex container — a centered
flex child that overflows an overflow:auto ancestor can't be scrolled
back to its clipped "before" (top/left) edge, since centering never
lets the auto-margin free-space trick engage. margin:auto centers the
image when it fits and collapses to 0 (start-aligned) once it overflows
past 100% (real-dimension zoom), keeping every edge reachable by scroll. */
.lightbox--photo-only .lightbox-body {
align-items: stretch;
justify-content: flex-start;
padding: 0.5rem;
}
.lightbox--photo-only .lightbox-inner {
max-width: none;
width: 100%;
height: 100%;
flex-direction: row;
align-items: stretch;
gap: 0;
}
.lightbox--photo-only .lightbox-img {
max-height: 100%;
margin: auto;
border-radius: 0;
box-shadow: none;
align-self: auto;
}
/* Wrapper, not the iframe itself — YT.Player replaces the inner target
div with its own