/* ============================================================ NUN — Časopis pisma, vjere i istraživanja Now with a dark theme. Toggle via .theme-toggle in the navbar; user preference persists in localStorage. Falls back to the OS `prefers-color-scheme` setting on first visit. ============================================================ */ :root { /* ─── Light theme (default) ─── */ /* Paper / ink */ --paper: #f4ede1; --paper-soft: #faf6ec; --paper-deep: #ebe2d2; --ink: #1c1816; --ink-soft: #5a5048; --ink-faint: #8a7e70; --rule: #c9bfa8; /* Accent palette */ --oxblood: #6b1f1f; --oxblood-deep: #4a1414; --forest: #2d4a3a; --lapis: #1e3a5f; --ochre: #8c5e1b; --gold: #a07a2c; /* Section background tints */ --bg-lapis: #e9ecec; --bg-oxblood: #f5ebdf; --bg-forest: #ebeee2; --bg-ochre: #f4ead0; /* Translucent navbar background (paper at 94%) */ --paper-translucent: rgba(244, 237, 225, 0.94); /* Hero / footer stripe pattern colors */ --stripe-ink: rgba(28, 24, 22, 0.10); --stripe-accent: rgba(107, 31, 31, 0.08); --stripe-ink-low: rgba(28, 24, 22, 0.07); --stripe-accent-low: rgba(107, 31, 31, 0.05); /* Body atmosphere — very subtle radial tints */ --atmos-1: rgba(160, 122, 44, 0.04); --atmos-2: rgba(45, 74, 58, 0.03); /* Hero atmosphere — slightly stronger version */ --hero-glow-1: rgba(160, 122, 44, 0.08); --hero-glow-2: rgba(45, 74, 58, 0.06); /* Hero custom-background overlay — softens any uploaded image so the carousel text stays readable. Light theme: paper-tinted veil. */ --hero-bg-overlay: rgba(244, 237, 225, 0.78); /* Card placeholder hatch */ --placeholder-hatch: rgba(28, 24, 22, 0.03); --placeholder-hatch-strong: rgba(28, 24, 22, 0.025); /* Type */ --display: 'Fraunces', 'Cormorant Garamond', 'Times New Roman', serif; --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; --arabic: 'Amiri', 'Cormorant Garamond', serif; /* Spacing */ --gutter: clamp(1rem, 3vw, 2rem); --hero-gutter: clamp(1.5rem, 5vw, 4.5rem); --section-gap: clamp(3rem, 6vw, 5rem); /* Layout */ --max-width: 1280px; /* The off-canvas sidebar was removed in favour of the navbar "Rubrike" dropdown; keeping this at 0 neutralises the old main/footer offsets and the full-bleed band widths that subtract it. */ --sidebar-width: 0px; --navbar-height: 4.5rem; /* Source for every NUN logo mark (navbar brand, footer mark, splash, placeholders). Defaults to the bundled "Q"; templates override it inline on with the admin-uploaded logo so a custom logo shows up everywhere it appears, not just in the navbar. */ --brand-logo: url("/static/q_logo.png"); color-scheme: light; } /* ═════════════════════════════════════════════ Dark theme — same palette structure, inverted ═════════════════════════════════════════════ */ [data-theme="dark"] { /* Warm editorial dark — beige / brown / burgundy palette. Built from: obsidian ink (#151311) base surface, peony noir (#2A121A) burgundy elevation, smoked rose (#9B5B63) and antique pollen (#C08A36) accents, silk cream (#E8D8C4) ink. */ --paper: #151311; /* obsidian ink — base surface */ --paper-soft: #1e1815; /* warm brown elevation (cards, navbar) */ --paper-deep: #100d0c; /* deepest recess */ --ink: #E8D8C4; /* silk cream — body text */ --ink-soft: #c0b39e; /* dimmed cream */ --ink-faint: #8c7e6a; /* faint warm */ --rule: #3a2a28; /* warm burgundy-brown rule */ /* Accents — burgundy + amber, brightened to stay legible on dark. */ --oxblood: #b56b72; /* smoked rose, brightened */ --oxblood-deep: #9B5B63; /* smoked rose */ --forest: #a98a55; /* warm bronze (was green) */ --lapis: #b58088; /* dusty rose (was blue) */ --ochre: #C08A36; /* antique pollen */ --gold: #d09b4a; /* antique pollen, brighter */ /* Section tints — subtle warm elevations off the obsidian base, the burgundy section leaning toward peony noir. */ --bg-lapis: #1a1517; --bg-oxblood: #21141a; /* peony noir direction */ --bg-forest: #1a1712; --bg-ochre: #1f1810; --paper-translucent: rgba(21, 19, 17, 0.92); --stripe-ink: rgba(232, 216, 196, 0.07); --stripe-accent: rgba(155, 91, 99, 0.10); --stripe-ink-low: rgba(232, 216, 196, 0.04); --stripe-accent-low: rgba(155, 91, 99, 0.06); --atmos-1: rgba(192, 138, 54, 0.05); --atmos-2: rgba(155, 91, 99, 0.04); --hero-glow-1: rgba(192, 138, 54, 0.07); --hero-glow-2: rgba(155, 91, 99, 0.06); /* Deeper warm veil (peony noir tint) so uploaded hero images sit on a burgundy stage. */ --hero-bg-overlay: rgba(26, 16, 20, 0.80); --placeholder-hatch: rgba(232, 216, 196, 0.035); --placeholder-hatch-strong: rgba(232, 216, 196, 0.025); color-scheme: dark; } /* Smooth transition when toggling theme. Limited to colors/bg so layout never animates by accident. */ html { transition: background-color 350ms ease; } body, .navBar, .sidebar, .footer, .hero, .genre-section::before, .rubrika-section::before, .card-media, .card-placeholder, .hero-placeholder, .theme-toggle { transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Clip horizontal overflow at the root, not just . body-only overflow-x:hidden is unreliable on mobile — the viewport scroll lives on — and lets a full-bleed band leave a phantom margin on the right. Pinning both kills it. */ overflow-x: hidden; width: 100%; } body { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink); background: var(--paper); background-image: radial-gradient(circle at 20% 10%, var(--atmos-1) 0%, transparent 40%), radial-gradient(circle at 80% 60%, var(--atmos-2) 0%, transparent 50%); min-height: 100vh; /* The navbar is position: fixed (see .navBar), so reserve its height here to keep in-flow content from sliding underneath it. The fixed sidebar is positioned against the viewport and ignores this padding. */ padding-top: var(--navbar-height); overflow-x: hidden; max-width: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ───────────────────────────────────────────── NAVIGATION BAR ───────────────────────────────────────────── */ .navBar { /* Fixed, not sticky: the root uses overflow-x: hidden (to kill a mobile phantom margin), and a non-visible overflow on an ancestor silently disables position: sticky. Fixed isn't affected, so the bar stays pinned and no gap opens above the fixed sidebar. The body reserves this height via padding-top so content isn't hidden under it. */ position: fixed; top: 0; left: 0; z-index: 50; width: 100%; height: var(--navbar-height); background: var(--paper-translucent); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--ink); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.25rem, 4vw, 3rem); } .brand { display: inline-flex; align-items: center; /* Space between the logo mark and the "NUN" wordmark. Wider on desktop so the custom logo reads as a separate mark rather than the leading letter of the name; tightens a little on narrow screens. */ gap: clamp(0.4rem, 1.4vw, 0.65rem); color: var(--ink); line-height: 1; } /* NUN brand mark — the q_logo.png "Q", masked and tinted to the theme ink colour (near-black on light, cream on dark) so it serves as the leading letter of the "Nun" wordmark and adapts to either theme. */ .brand-arabic { display: inline-block; width: 0.84em; height: 1em; font-size: 1.65rem; line-height: 1; color: var(--ink); background-color: currentColor; -webkit-mask: var(--brand-logo) center / contain no-repeat; mask: var(--brand-logo) center / contain no-repeat; transition: transform 200ms ease, filter 200ms ease; } .brand:hover .brand-arabic { transform: rotate(-3deg); } /* Every other NUN mark reuses the same Q-logo silhouette, tinted to its inherited (theme) colour. Width is widened to the logo's aspect ratio; height stays each mark's own em so they keep their existing scale. The qaf character is removed from the markup, so the box renders only the masked logo. */ .sidebar-link-mark, .placeholder-mark, .empty-mark, .archive-empty-mark, .footer-mark { width: 0.84em; background-color: currentColor; -webkit-mask: var(--brand-logo) center / contain no-repeat; mask: var(--brand-logo) center / contain no-repeat; } /* Divider marks have no box of their own — give them one sized in rem. */ .article-rule-mark, .article-footer-mark, .login-rule-mark { display: inline-block; width: 0.84em; height: 1em; font-size: 1.4rem; vertical-align: middle; background-color: currentColor; -webkit-mask: var(--brand-logo) center / contain no-repeat; mask: var(--brand-logo) center / contain no-repeat; } .brand-latin { font-family: var(--display); font-weight: 600; font-size: 1.55rem; letter-spacing: 0.32em; text-transform: uppercase; font-feature-settings: "ss01" 1; } .navLinks { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); } .navLink { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); position: relative; padding: 0.35rem 0; transition: color 200ms ease; } .navLink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--oxblood); transform: scaleX(0); transform-origin: left; transition: transform 250ms ease; } .navLink:hover { color: var(--oxblood); } .navLink:hover::after { transform: scaleX(1); } /* Logout is a POST, so it lives inside a form with a button. Strip the button chrome so it lines up next to the anchor-styled nav links. */ .navLogoutForm { margin: 0; padding: 0; display: inline; } .navLogoutBtn { background: none; border: 0; padding: 0.35rem 0; cursor: pointer; font: inherit; } /* ───────────────────────────────────────────── RUBRIKE DROPDOWN (navbar) A native

disclosure styled as a menu. Replaces the old off-canvas sidebar — it opens identically on desktop and phone with no JavaScript required to toggle it. ───────────────────────────────────────────── */ .nav-rubrike { position: relative; } /* Desktop shows two separate dropdowns (Rubrike / Biblioteka). The combined single dropdown is for phones only — hidden here, swapped in below. */ .nav-rubrike--all { display: none; } /* The

is styled to read like a .navLink. */ .nav-rubrike-toggle { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); padding: 0.35rem 0; transition: color 200ms ease; } .nav-rubrike-toggle::-webkit-details-marker { display: none; } .nav-rubrike-toggle::marker { content: ""; } .nav-rubrike-toggle:hover { color: var(--oxblood); } .nav-rubrike[open] .nav-rubrike-toggle { color: var(--oxblood); } /* Chevron that flips when the menu opens. */ .nav-rubrike-caret { width: 0.42em; height: 0.42em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.12em) rotate(45deg); transition: transform 200ms ease; } .nav-rubrike[open] .nav-rubrike-caret { transform: translateY(0.08em) rotate(-135deg); } .nav-rubrike-menu { position: absolute; top: calc(100% + 0.75rem); right: 0; min-width: 230px; max-width: min(82vw, 320px); max-height: 72vh; overflow-y: auto; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.28); padding: 0.5rem 0; z-index: 60; -webkit-overflow-scrolling: touch; } .nav-rubrike-item { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.6rem 1.15rem; color: var(--ink); font-family: var(--display); font-style: italic; font-size: 1.02rem; line-height: 1.2; font-variation-settings: "opsz" 144; transition: color 200ms ease, background 200ms ease; } .nav-rubrike-item:hover { color: var(--oxblood); background: var(--paper-soft); } .nav-rubrike-count { font-family: var(--display); font-style: normal; font-size: 0.68rem; letter-spacing: 0.16em; color: var(--ink-faint); font-variant-numeric: tabular-nums; flex-shrink: 0; } /* Biblioteka links (Arhiva / Saradnici) sit below a divider in upright caps. */ .nav-rubrike-item--lib { font-style: normal; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; } .nav-rubrike-divider { display: block; height: 1px; background: var(--rule); margin: 0.5rem 1.15rem; } .nav-rubrike-empty { display: block; padding: 0.6rem 1.15rem; color: var(--ink-faint); font-family: var(--display); font-style: italic; font-size: 0.95rem; } /* On phones the toggle sits mid-navbar, so a menu anchored to its right edge would grow off the left of the screen and get clipped by the root's overflow-x: hidden. Pin it to the viewport instead — a fixed panel just under the navbar, inset a little from both edges — so the whole menu is always visible no matter which toggle opened it. */ @media (max-width: 600px) { .nav-rubrike-menu { position: fixed; top: calc(var(--navbar-height) - 1px); left: 0.75rem; right: 0.75rem; min-width: 0; max-width: none; max-height: calc(100vh - var(--navbar-height) - 1rem); } /* Not enough room on a phone for the Rubrike dropdown plus separate links — collapse everything into the single combined "Meni" dropdown and hide the desktop-only links. */ .nav-rubrike--desktop { display: none; } .nav-rubrike--all { display: block; } .navLink--desktop { display: none; } } /* Tiny inline checkbox for "remove this asset" controls on edit pages. */ .field-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.85rem; color: var(--ink); cursor: pointer; } .field-checkbox input { margin: 0; } /* ───────────────────────────────────────────── THEME TOGGLE BUTTON ───────────────────────────────────────────── */ .theme-toggle { width: 2.4rem; height: 2.4rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0; flex-shrink: 0; transition: background 200ms ease, color 200ms ease, transform 200ms ease, border-color 200ms ease; margin-left: 0.25rem; } .theme-toggle:hover { background: var(--ink); color: var(--paper); transform: rotate(-12deg); } .theme-toggle:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; } .theme-toggle .theme-icon { width: 1.05rem; height: 1.05rem; } /* In light mode: show the moon (click to switch to dark). In dark mode: show the sun (click to switch back to light). */ .theme-icon--moon { display: block; } .theme-icon--sun { display: none; } [data-theme="dark"] .theme-icon--moon { display: none; } [data-theme="dark"] .theme-icon--sun { display: block; } /* ───────────────────────────────────────────── MOBILE MENU TOGGLE (hamburger) Hidden on desktop; revealed below 900px so the sidebar can be opened on-demand. ───────────────────────────────────────────── */ .menu-toggle { display: none; /* shown via @media (max-width: 900px) below */ width: 2.4rem; height: 2.4rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 50%; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 0.6rem; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; } .menu-toggle:hover { background: var(--ink); color: var(--paper); } .menu-toggle:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; } .menu-toggle .menu-icon { width: 1.05rem; height: 1.05rem; } /* ═════════════════════════════════════════════ SIDEBAR ═════════════════════════════════════════════ */ .sidebar { position: fixed; top: var(--navbar-height); left: 0; width: var(--sidebar-width); height: calc(100vh - var(--navbar-height)); z-index: 30; background: var(--paper-soft); border-right: 1px solid var(--ink); overflow-y: auto; padding: 2.25rem 1.5rem 2.5rem; -webkit-overflow-scrolling: touch; } .sidebar-nav { display: flex; flex-direction: column; gap: 2.5rem; } .sidebar-label { font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-bottom: 0.9rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--rule); } .sidebar-list { list-style: none; } .sidebar-list li + li { border-top: 1px dotted var(--rule); } .sidebar-link { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.55rem 0; color: var(--ink); font-family: var(--display); font-style: italic; font-size: 1.05rem; line-height: 1.2; font-variation-settings: "opsz" 144; transition: color 200ms ease, padding-left 200ms ease; } .sidebar-link:hover { color: var(--oxblood); padding-left: 0.35rem; } .sidebar-link-name { flex: 1; } .sidebar-link-count { font-family: var(--display); font-style: normal; font-size: 0.7rem; letter-spacing: 0.18em; color: var(--ink-faint); font-variant-numeric: tabular-nums; flex-shrink: 0; } .sidebar-link-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; font-family: var(--arabic); font-size: 1rem; line-height: 1; color: var(--ink); flex-shrink: 0; } /* Backdrop behind the off-canvas sidebar on mobile. Hidden on desktop; shown when the sidebar is opened from the menu-toggle button. */ .sidebar-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 220ms ease; } .sidebar-backdrop.is-active { opacity: 1; pointer-events: auto; } /* ───────────────────────────────────────────── MAIN + FOOTER offset for sidebar ───────────────────────────────────────────── */ main { margin-left: var(--sidebar-width); } .footer { margin-left: var(--sidebar-width); } /* ═════════════════════════════════════════════ HERO — full bleed, with stripe pattern. Stripes are now a CSS gradient using themeable variables (was previously an inline SVG with hardcoded colors). ═════════════════════════════════════════════ */ .hero { position: relative; width: 100%; border-bottom: 2px solid var(--ink); background-color: var(--paper-soft); background-image: repeating-linear-gradient( 90deg, var(--stripe-ink) 0, var(--stripe-ink) 1px, transparent 1px, transparent 3px, var(--stripe-accent) 3px, var(--stripe-accent) 13px, transparent 13px, transparent 15px, var(--stripe-ink) 15px, var(--stripe-ink) 18px, transparent 18px, transparent 20px, var(--stripe-accent) 20px, var(--stripe-accent) 42px, transparent 42px, transparent 44px, var(--stripe-ink) 44px, var(--stripe-ink) 51px, transparent 51px, transparent 53px ), radial-gradient(circle at 18% 30%, var(--hero-glow-1) 0%, transparent 55%), radial-gradient(circle at 82% 75%, var(--hero-glow-2) 0%, transparent 60%); } /* When a custom background image has been set in the admin panel, swap out the engraved stripes for the photograph. A solid overlay sits on top of the image so the carousel's title and dek stay readable — tinted paper in light mode, ink in dark mode. */ .hero--has-bg { background-color: var(--paper-deep); background-image: linear-gradient(var(--hero-bg-overlay), var(--hero-bg-overlay)), var(--hero-bg-url, none); background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-rail { position: relative; width: 100%; min-height: clamp(580px, 78vh, 880px); } .hero-slide { position: absolute; inset: 0; padding: clamp(2.5rem, 5vw, 4.5rem) var(--hero-gutter); display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 4.5vw, 4rem); align-items: center; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 800ms ease; pointer-events: none; } .hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .hero-visual { position: relative; width: 100%; height: clamp(420px, 64vh, 680px); overflow: hidden; background: var(--paper-deep); border: 1px solid var(--rule); box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 40px 70px -40px rgba(0, 0, 0, 0.35); } .hero-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.02); transition: transform 9s ease; } /* Stretched click target over the whole carousel visual so the featured image opens its post (the .media-play overlay is pointer-events:none, and inactive slides are pointer-events:none, so only the active slide's link is clickable). */ .hero-visual-link { position: absolute; inset: 0; z-index: 3; } .hero-slide.is-active .hero-visual img { transform: scale(1.06); } .hero-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: repeating-linear-gradient(45deg, transparent 0 22px, var(--placeholder-hatch-strong) 22px 23px), var(--paper-deep); color: var(--ink-soft); } /* Video badge — fixed dark/light pair, always works. */ .hero-placeholder--video { background-color: #2d2422; color: #f4ede1; } .hero-placeholder--pdf { background-color: var(--paper-deep); color: var(--forest); } .hero-placeholder--text { background-color: var(--paper-deep); color: var(--oxblood); } .placeholder-mark { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-family: var(--arabic); font-size: clamp(5rem, 10vw, 8rem); line-height: 1; color: var(--ink); } /* Video and PDF placeholders keep their type-glyph fallbacks (▶ and ¶) — they aren't NUN marks, so reinstate the display font. */ .hero-placeholder--video .placeholder-mark, .hero-placeholder--pdf .placeholder-mark { width: auto; height: auto; color: inherit; font-family: var(--display); font-size: clamp(4rem, 8vw, 6rem); /* These show a type glyph (▶ / ¶), not the NUN mark — drop the mask and any inherited custom-logo image. */ background-color: transparent; background-image: none; -webkit-mask: none; mask: none; } .hero-text { align-self: center; max-width: 38rem; } .featured-marker { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-bottom: 2rem; display: flex; align-items: center; gap: 0.85rem; width: fit-content; } .featured-marker::before { content: ""; width: 2.5rem; height: 1px; background: var(--ink-faint); } .featured-counter { color: var(--ink-faint); font-variant-numeric: tabular-nums; } .hero-text .eyebrow { font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--oxblood); font-weight: 500; margin-bottom: 1.5rem; display: block; } .hero-text .eyebrow::before { content: none; } .hero-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 4.8vw, 4.8rem); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 1.6rem; color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 25; } .hero-title a { display: inline; background-image: linear-gradient(var(--oxblood), var(--oxblood)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size 350ms ease, color 220ms ease; } .hero-title a:hover { color: var(--oxblood); background-size: 100% 1px; } .hero-dek { font-family: var(--serif); font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.55; color: var(--ink-soft); margin-bottom: 1.8rem; max-width: 36rem; font-style: italic; } .hero-byline { font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); } .byline-name { color: var(--ink); font-weight: 500; } .byline-dot { margin: 0 0.5em; color: var(--rule); } .hero-controls { display: flex; align-items: center; justify-content: center; gap: 1.75rem; padding: clamp(1.5rem, 3vw, 2.5rem) var(--hero-gutter); } .hero-arrow { width: 3rem; height: 3rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--display); font-size: 1.8rem; line-height: 1; cursor: pointer; border-radius: 50%; display: grid; place-items: center; transition: background 200ms ease, color 200ms ease, transform 200ms ease; } .hero-arrow:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); } .hero-dots { display: flex; gap: 0.6rem; align-items: center; } .hero-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1px solid var(--ink-soft); background: transparent; cursor: pointer; padding: 0; transition: background 200ms ease, transform 200ms ease; } .hero-dot.is-active { background: var(--oxblood); border-color: var(--oxblood); transform: scale(1.3); } /* ───────────────────────────────────────────── PLAY OVERLAY ───────────────────────────────────────────── */ .media-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.35) 100%); transition: background 350ms ease; } .media-play::before { content: ""; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: rgba(0, 0, 0, 0.55); border: 1.5px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); transition: transform 350ms ease, background 350ms ease, border-color 350ms ease; } .media-play::after { content: ""; position: absolute; width: 0; height: 0; border-left: 0.85rem solid rgba(255, 255, 255, 0.95); border-top: 0.55rem solid transparent; border-bottom: 0.55rem solid transparent; transform: translateX(0.18rem); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); transition: transform 350ms ease; } .media-play--lg::before { width: 5.5rem; height: 5.5rem; } .media-play--lg::after { border-left-width: 1.4rem; border-top-width: 0.9rem; border-bottom-width: 0.9rem; transform: translateX(0.3rem); } .card:hover .media-play::before, .hero-slide.is-active:hover .media-play::before { transform: scale(1.08); background: var(--accent, var(--oxblood)); border-color: rgba(255, 255, 255, 1); } /* ═════════════════════════════════════════════ GENRE SECTIONS ═════════════════════════════════════════════ */ .genre-color--lapis { --accent: var(--lapis); --section-bg: var(--bg-lapis); } .genre-color--oxblood { --accent: var(--oxblood); --section-bg: var(--bg-oxblood); } .genre-color--forest { --accent: var(--forest); --section-bg: var(--bg-forest); } .genre-color--ochre { --accent: var(--ochre); --section-bg: var(--bg-ochre); } .genre-section { max-width: var(--max-width); margin: 0 auto; padding: var(--section-gap) var(--gutter) clamp(2.5rem, 5vw, 4rem); position: relative; isolation: isolate; scroll-margin-top: calc(var(--navbar-height) + 1rem); } .genre-section::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100vw - var(--sidebar-width)); background: var(--section-bg, transparent); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); z-index: -1; pointer-events: none; } .genre-header { display: flex; align-items: baseline; gap: 1.5rem; border-bottom: 2px solid var(--accent, var(--ink)); padding-bottom: 1.1rem; margin-bottom: 2.4rem; position: relative; } .genre-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--accent, var(--ink)); opacity: 0.5; } .genre-title { font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-style: italic; color: var(--accent, var(--ink)); font-variation-settings: "opsz" 144, "SOFT" 50; } /* The rubrika title links to its full page, same as the dropdown entry. Inherits the themed accent colour from .genre-title. */ .genre-title-link { color: inherit; transition: opacity 200ms ease; } .genre-title-link:hover { opacity: 0.72; text-decoration: underline; text-underline-offset: 0.15em; } .genre-count { margin-left: auto; font-family: var(--display); font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); } .genre-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem); } .card--lead { grid-column: span 3; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-bottom: 2.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--rule); } .card--lead:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .card--lead .card-link { display: contents; } .card--lead .card-media { aspect-ratio: 16 / 11; } .card--lead .card-text { align-self: center; padding: 0.5rem 0; } .card--lead .card-title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.08; } .card--lead .card-dek { font-size: 1.05rem; -webkit-line-clamp: 4; line-clamp: 4; } .card--lead .media-play::before { width: 4.25rem; height: 4.25rem; } .card--lead .media-play::after { border-left-width: 1.1rem; border-top-width: 0.7rem; border-bottom-width: 0.7rem; transform: translateX(0.22rem); } .card { transition: transform 350ms ease; } .card-link { display: block; color: inherit; } .card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); margin-bottom: 1rem; border: 1px solid var(--rule); } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease, filter 400ms ease; filter: saturate(0.9); } .card:hover .card-media img { transform: scale(1.04); filter: saturate(1); } .card-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: repeating-linear-gradient(45deg, transparent 0 14px, var(--placeholder-hatch) 14px 15px), var(--paper-deep); } .card-placeholder--video { background-color: #2d2422; color: #f4ede1; } .card-placeholder--pdf { background-color: var(--paper-deep); color: var(--forest); } .card-placeholder--text { background-color: var(--paper-deep); color: var(--accent, var(--oxblood)); } .card-placeholder .placeholder-mark { font-size: clamp(2rem, 5vw, 3.5rem); } /* Card video/pdf placeholders show their type glyph (▶ ¶), not the NUN mark — undo the background-image inherited from .placeholder-mark. */ .card-placeholder--video .placeholder-mark, .card-placeholder--pdf .placeholder-mark { width: auto; height: auto; background-image: none; color: inherit; overflow: visible; font-family: var(--display); /* These show a type glyph (▶ / ¶), not the NUN mark — drop the mask. */ background-color: transparent; -webkit-mask: none; mask: none; } .card-text { padding: 0; } .card-eyebrow { font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent, var(--oxblood)); font-weight: 500; margin-bottom: 0.55rem; } .card-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.16; color: var(--ink); margin-bottom: 0.75rem; font-variation-settings: "opsz" 144, "SOFT" 40; transition: color 220ms ease; } .card:hover .card-title { color: var(--accent, var(--oxblood)); } .card-dek { font-family: var(--serif); font-size: 0.98rem; line-height: 1.45; color: var(--ink-soft); margin-bottom: 0.85rem; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-style: italic; } .card-byline { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } /* ───────────────────────────────────────────── "SEE ALL" link ───────────────────────────────────────────── */ .see-all-row { margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: clamp(1.25rem, 2.5vw, 2rem); border-top: 1px dashed var(--rule); text-align: right; } .see-all-link { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--accent, var(--ink)); display: inline-flex; align-items: center; gap: 0.6rem; transition: gap 220ms ease, color 220ms ease; font-variation-settings: "opsz" 144; } .see-all-link::after { content: "→"; font-style: normal; transition: transform 220ms ease; } .see-all-link:hover { gap: 0.95rem; } .see-all-link:hover::after { transform: translateX(0.15rem); } /* "Back to home" link at the foot of a rubrika page — same divider/spacing as .see-all-row, but centred and with a leading ← arrow. */ .back-home-row { text-align: center; } .back-home-link { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--accent, var(--ink)); display: inline-flex; align-items: center; gap: 0.6rem; transition: gap 220ms ease, color 220ms ease; font-variation-settings: "opsz" 144; } .back-home-link::before { content: "←"; font-style: normal; transition: transform 220ms ease; } .back-home-link:hover { gap: 0.95rem; } .back-home-link:hover::before { transform: translateX(-0.15rem); } /* ───────────────────────────────────────────── EMPTY STATE ───────────────────────────────────────────── */ .empty-state { text-align: center; padding: clamp(4rem, 10vw, 8rem) var(--gutter); max-width: 600px; margin: 0 auto; } .empty-mark { display: flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-family: var(--arabic); font-size: 6rem; line-height: 1; color: var(--ink); margin: 0 auto 1.5rem; } .empty-line { font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--ink-soft); } /* ═════════════════════════════════════════════ ARCHIVE PAGE ═════════════════════════════════════════════ */ .page-archive { padding-bottom: clamp(3rem, 6vw, 5rem); } .page-header { max-width: 880px; margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(2rem, 4vw, 3rem); text-align: center; border-bottom: 2px solid var(--ink); } .page-eyebrow { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.85rem; } .page-eyebrow-rule { width: 2.5rem; height: 1px; background: var(--ink-faint); } .page-eyebrow-link { color: var(--ink-faint); transition: color 200ms ease; } .page-eyebrow-link:hover { color: var(--accent, var(--oxblood)); } .page-eyebrow-sep { color: var(--rule); } .page-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1.4rem; font-variation-settings: "opsz" 144, "SOFT" 30; } .page-sub { font-family: var(--serif); font-size: 1.1rem; font-style: italic; color: var(--ink-soft); max-width: 36rem; margin: 0 auto; } .page-sub-count { color: var(--ink-faint); white-space: nowrap; } .archive-list { list-style: none; max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); } .archive-entry { border-bottom: 1px solid var(--rule); } .archive-entry:first-child { border-top: 1px solid var(--rule); } .archive-entry-link { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; padding: clamp(1.5rem, 3vw, 2.25rem) 0.5rem; color: inherit; transition: background 220ms ease, padding-left 220ms ease; } .archive-entry-link:hover { background: var(--bg-oxblood); padding-left: 1rem; } .archive-entry-index { font-family: var(--display); font-size: 1rem; font-weight: 400; color: var(--ink-faint); font-variant-numeric: tabular-nums; letter-spacing: 0.1em; padding-top: 0.35rem; min-width: 2.5rem; } .archive-entry-text { min-width: 0; } .archive-entry-eyebrow { font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--oxblood); font-weight: 500; margin-bottom: 0.7rem; } .archive-entry-dot { color: var(--rule); margin: 0 0.4em; } .archive-entry-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2.3vw, 1.85rem); line-height: 1.12; color: var(--ink); margin-bottom: 0.65rem; font-variation-settings: "opsz" 144, "SOFT" 40; transition: color 220ms ease; } .archive-entry-link:hover .archive-entry-title { color: var(--oxblood); } .archive-entry-dek { font-family: var(--serif); font-size: 1rem; line-height: 1.5; color: var(--ink-soft); font-style: italic; margin-bottom: 0.6rem; } .archive-entry-byline { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } .archive-entry-action { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oxblood); font-weight: 500; padding-top: 0.4rem; white-space: nowrap; align-self: start; opacity: 0; transform: translateX(-0.4rem); transition: opacity 220ms ease, transform 220ms ease; } .archive-entry-link:hover .archive-entry-action { opacity: 1; transform: translateX(0); } .archive-empty { text-align: center; padding: clamp(4rem, 10vw, 8rem) var(--gutter); max-width: 600px; margin: 0 auto; } .archive-empty-mark { display: flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-family: var(--arabic); font-size: 5rem; line-height: 1; color: var(--ink); margin: 0 auto 1.5rem; } .archive-empty-line { font-family: var(--display); font-style: italic; font-size: 1.2rem; color: var(--ink-soft); } /* ═════════════════════════════════════════════ RUBRIKA PAGE ═════════════════════════════════════════════ */ .page-rubrika { padding-bottom: clamp(3rem, 6vw, 5rem); } .page-header--themed .page-eyebrow-link:hover { color: var(--accent, var(--oxblood)); } .page-title--themed { color: var(--accent, var(--ink)); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 50; } .rubrika-section { max-width: var(--max-width); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 0; position: relative; isolation: isolate; } .rubrika-section::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100vw - var(--sidebar-width)); background: var(--section-bg, transparent); border-bottom: 1px solid var(--ink); z-index: -1; pointer-events: none; } /* ═════════════════════════════════════════════ AUTHORS PAGE — stacked portrait cards Each card is a vertical 3:4 portrait on the left beside the contributor's name and bio. Cards run one below the other down the page. ═════════════════════════════════════════════ */ .page-authors { padding-bottom: clamp(3rem, 6vw, 5rem); } .authors-list { list-style: none; max-width: 920px; margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) var(--gutter) 0; display: flex; flex-direction: column; gap: clamp(1.75rem, 3vw, 2.5rem); } .author-card { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: clamp(1.5rem, 4vw, 2.75rem); align-items: start; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--paper-soft); border: 1px solid var(--rule); border-left: 3px solid var(--oxblood); transition: transform 350ms ease, box-shadow 350ms ease; } .author-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.35); } .author-portrait { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-deep); border: 1px solid var(--rule); position: relative; } .author-portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.02); transition: transform 600ms ease, filter 400ms ease; } .author-card:hover .author-portrait img { transform: scale(1.04); filter: saturate(1); } .author-portrait-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: repeating-linear-gradient(45deg, transparent 0 18px, var(--placeholder-hatch) 18px 19px), var(--paper-deep); color: var(--oxblood); } .author-portrait-placeholder .placeholder-mark { font-family: var(--arabic); font-size: clamp(3rem, 7vw, 5rem); line-height: 1; } .author-body { min-width: 0; padding-top: 0.25rem; } .author-eyebrow { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--oxblood); font-weight: 500; margin-bottom: 0.85rem; } .author-name { font-family: var(--display); font-weight: 400; font-style: italic; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; color: var(--ink); margin-bottom: 1rem; font-variation-settings: "opsz" 144, "SOFT" 50; } .author-bio { font-family: var(--serif); font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); } .author-bio--empty { font-style: italic; color: var(--ink-faint); } @media (max-width: 700px) { .author-card { grid-template-columns: 1fr; gap: 1.25rem; } .author-portrait { max-width: 220px; margin: 0 auto; } .author-body { text-align: center; } } /* Portrait-shaped preview on the edit-author page. The general .edit-current-image is sized for landscape covers; the portrait variant constrains by height so a 3:4 image doesn't tower over the form. */ .edit-current-image--portrait { max-width: 220px; aspect-ratio: 3 / 4; object-fit: cover; height: auto; } /* ═════════════════════════════════════════════ SPLASH OVERLAY Full-screen black panel with the centered logo, shown once per browser session. Uses absolute colors (not theme variables) so the splash looks identical in light and dark mode. ═════════════════════════════════════════════ */ .splash { position: fixed; inset: 0; z-index: 9999; background: #0a0a0a; display: grid; place-items: center; cursor: pointer; opacity: 1; transition: opacity 600ms ease; } .splash.is-hiding { opacity: 0; pointer-events: none; } /* Splash wordmark: the logo mark stacked above the "NUN" name. The splash panel is always dark, so everything is a warm off-white regardless of theme. */ .splash-wordmark { display: inline-flex; flex-direction: column; align-items: center; gap: 0.12em; color: #f4ede1; font-size: clamp(110px, 18vmin, 200px); line-height: 1; user-select: none; /* Hidden until the splash script confirms the logo image has loaded (adds .is-ready), so the name never appears before the mark. */ opacity: 0; transform: scale(0.94); transition: opacity 600ms ease-out, transform 600ms ease-out; } .splash.is-ready .splash-wordmark { opacity: 1; transform: scale(1); } .splash-logo { display: inline-block; width: 0.84em; height: 1em; background-color: currentColor; -webkit-mask: var(--brand-logo) center / contain no-repeat; mask: var(--brand-logo) center / contain no-repeat; -webkit-user-drag: none; } .splash-latin { font-family: var(--display); font-weight: 600; text-transform: uppercase; /* Sits below the mark as a smaller caption. The trailing letter-spacing is balanced with an equal text-indent so "NUN" stays optically centred under the logo. */ font-size: 0.42em; letter-spacing: 0.28em; text-indent: 0.28em; line-height: 1; } /* Respect a visitor's motion preference — skip the scale animation. */ @media (prefers-reduced-motion: reduce) { /* Skip the fade/scale — the wordmark still reveals (opacity 1 via .is-ready), just instantly once the logo image is loaded. */ .splash-wordmark { transition: none; transform: none; } .splash { transition: opacity 200ms linear; } } /* ───────────────────────────────────────────── FOOTER — same stripe pattern, quieter opacity ───────────────────────────────────────────── */ .footer { margin-top: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--ink); background-color: var(--paper-deep); background-image: repeating-linear-gradient( 90deg, var(--stripe-ink-low) 0, var(--stripe-ink-low) 1px, transparent 1px, transparent 3px, var(--stripe-accent-low) 3px, var(--stripe-accent-low) 13px, transparent 13px, transparent 15px, var(--stripe-ink-low) 15px, var(--stripe-ink-low) 18px, transparent 18px, transparent 20px, var(--stripe-accent-low) 20px, var(--stripe-accent-low) 42px, transparent 42px, transparent 44px, var(--stripe-ink-low) 44px, var(--stripe-ink-low) 51px, transparent 51px, transparent 53px ); padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); } /* When a custom background image has been set in the admin panel, swap the engraved stripes for the photograph. The same themeable overlay the hero uses sits on top so the footer text stays readable in both themes. */ .footer--has-bg { background-color: var(--paper-deep); background-image: linear-gradient(var(--hero-bg-overlay), var(--hero-bg-overlay)), var(--footer-bg-url, none); background-size: cover; background-position: center; background-repeat: no-repeat; } .footer-inner { max-width: var(--max-width); margin: 0 auto; text-align: center; } .footer-mark { display: flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-family: var(--arabic); font-size: 3rem; line-height: 1; color: var(--ink); margin: 0 auto 0.9rem; } .footer-name { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--ink); margin-bottom: 0.4rem; font-variation-settings: "opsz" 144; } .footer-meta { font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); } .footer-contact { margin: 1.4rem auto 1.2rem; } .footer-contact-heading { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.7rem; } .footer-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem; } .footer-contact-list li { list-style: none; } .footer-contact-list li::marker { content: ""; } .footer-contact-list a { font-family: var(--display); font-size: 0.95rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 200ms ease, color 200ms ease; } .footer-contact-list a:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); } /* ───────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────── */ @media (max-width: 900px) { :root { --sidebar-width: 0px; } main, .footer { margin-left: 0; } /* Full-bleed section bands key off `100vw` on desktop to span past the centered content column. On phones the section already fills the viewport, so anchor the bands to the container (100%) instead — `100vw` can round a hair past the viewport and leave a margin on the right. */ .genre-section::before, .rubrika-section::before { width: 100%; left: 0; transform: none; } /* Reveal the hamburger and push nav links to the far right. (justify-content: space-between distributes three items evenly, which is wrong with the toggle present — margin-left: auto on .navLinks keeps brand+toggle clustered left.) */ .menu-toggle { display: inline-flex; } .navLinks { margin-left: auto; } /* Off-canvas sidebar: stays in the DOM (so the toggle can slide it in) but starts shifted entirely off-screen to the left. When .is-open is set by the JS in _sidebar.html it translates back into view. */ .sidebar { display: block; width: 280px; z-index: 60; background: var(--paper); border-right: 1px solid var(--ink); box-shadow: 0 0 60px rgba(0, 0, 0, 0.35); transform: translateX(-100%); transition: transform 280ms ease; } .sidebar.is-open { transform: translateX(0); } /* Lock body scroll while the overlay is open. Scoped to mobile so that resizing back to desktop never leaves the page un-scrollable. */ body.body--sidebar-open { overflow: hidden; } .hero-rail { min-height: 0; } .hero-slide { position: relative; inset: auto; grid-template-columns: 1fr; gap: 1.75rem; padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2rem); } .hero-slide:not(.is-active) { display: none; } .hero-visual { height: auto; aspect-ratio: 16 / 10; } /* On mobile the slides stack (position: relative) instead of overlapping, so the rail height follows the active slide's text. Post deks vary wildly in length, which made the carousel jump up and down on navigation. Clamp the title and dek to a fixed number of lines AND reserve that height so every slide's text block is the same height — short text no longer collapses the slide. */ .hero-title { font-size: clamp(2.2rem, 7vw, 3.5rem); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.04em); } .hero-dek { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(3 * 1.55em); } .genre-grid { grid-template-columns: repeat(2, 1fr); } .card--lead { grid-column: span 2; grid-template-columns: 1fr; } .card--lead .card-media { aspect-ratio: 16 / 10; } .archive-entry-link { grid-template-columns: auto 1fr; } .archive-entry-action { display: none; } } @media (max-width: 600px) { body { font-size: 17px; } .navBar { padding: 0 1.1rem; } .brand-arabic { font-size: 1.5rem; } .brand-latin { font-size: 1.2rem; letter-spacing: 0.25em; } .navLinks { gap: 0.85rem; } .navLink { font-size: 0.7rem; letter-spacing: 0.18em; } .theme-toggle { width: 2.1rem; height: 2.1rem; } .featured-marker { font-size: 0.7rem; letter-spacing: 0.28em; } .featured-marker::before { width: 1.8rem; } .genre-grid { grid-template-columns: 1fr; } .card--lead { grid-column: span 1; } .genre-header { flex-wrap: wrap; } .genre-count { margin-left: 0; width: 100%; } .see-all-row { text-align: center; } } /* ═════════════════════════════════════════════ CUSTOM LOGO — when the admin uploads one ═════════════════════════════════════════════ The default "Q" is a mask tinted to the theme ink. A custom logo is shown as a real, full-colour image instead: drop the mask and the currentColor fill, and paint the uploaded picture as the element's background. Placed at the end of the file so it overrides the base .brand-arabic / .splash-logo mask rules regardless of where those appear. The background-image itself is set inline per-element (the URL comes from the DB). */ .brand-arabic--img, .splash-logo--img { -webkit-mask: none; mask: none; background-color: transparent; background-size: contain; background-position: center; background-repeat: no-repeat; } /* The navbar brand and splash get the real image via the inline-styled --img classes above. Every *other* NUN mark (footer, placeholders, empty states, article rules) is only ever masked — so with a custom logo that has no transparency, the mask of a solid image renders as a filled ink/cream rectangle (the "black/white square" bug). When a custom logo is set, the body carries .has-custom-logo: paint those marks with the real uploaded image instead of masking the silhouette. The url comes from --brand-logo, set inline on from the DB. */ body.has-custom-logo .sidebar-link-mark, body.has-custom-logo .placeholder-mark, body.has-custom-logo .empty-mark, body.has-custom-logo .archive-empty-mark, body.has-custom-logo .footer-mark, body.has-custom-logo .article-rule-mark, body.has-custom-logo .article-footer-mark, body.has-custom-logo .login-rule-mark { -webkit-mask: none; mask: none; background-color: transparent; background-image: var(--brand-logo); background-size: contain; background-position: center; background-repeat: no-repeat; } /* Video / PDF placeholders show a type glyph (▶ / ¶), never the logo — keep them clear of the custom-logo image too. */ body.has-custom-logo .hero-placeholder--video .placeholder-mark, body.has-custom-logo .hero-placeholder--pdf .placeholder-mark, body.has-custom-logo .card-placeholder--video .placeholder-mark, body.has-custom-logo .card-placeholder--pdf .placeholder-mark { background-image: none; }