/* ============================================================================ * Gallery page — design pass 2 (2026-05-14) * * Loads AFTER photo-library.css per _main.php's per-template CSS pattern, * so this file overrides photo-library.css gallery rules surgically. * * Three moves: * 1. Hide caption text on gallery cards; lightbox keeps the caption. * 2. Restyle .gallery__filters into a dark-token panel that has real weight. * 3. Editorial polish on the header (eyebrow, rose rule, fluid display title). * * DOMINANT MOMENT: the dark filter panel anchored beneath an oversized * Schibsted title; photos breathe on the cream page background. * ============================================================================ */ /* ─── Lightbox tokens (editorial redesign) ────────────────────────────────── * Driven by the site-wide [data-theme] attribute on . Light is the * default :root block; dark overrides via the data-theme cascade. All * lightbox CSS rules later in the file reference these via var(--lb-*). * ─────────────────────────────────────────────────────────────────────────── */ :root { --lb-scrim: rgba(246, 239, 230, 0.92); --lb-rail-bg: var(--paper, #fffaf3); --lb-fg: var(--color-heading, #1a1814); --lb-fg-soft: rgba(26, 24, 20, 0.65); --lb-rose: var(--color-rose, #c3796f); --lb-rule: rgba(26, 24, 20, 0.10); --lb-thumbs-bg: rgba(26, 24, 20, 0.04); --lb-thumbs-rule: rgba(26, 24, 20, 0.10); /* Chrome chips (close + prev/next) - dark glass on the cream scrim. */ --lb-chrome-bg: rgba(26, 24, 20, 0.62); --lb-chrome-bg-hover: rgba(26, 24, 20, 0.82); --lb-chrome-border: rgba(255, 255, 255, 0.12); --lb-chrome-fg: #fff; /* Mobile CTA pair: filled Book = rose in light / teal in dark (site CTA language); Email = ghost/outline with a tint of the same accent. */ --lb-book: #b8807c; --lb-book-fg: #ffffff; --lb-ghost-bd: rgba(184, 128, 124, 0.55); --lb-ghost-fg: #a06b66; } [data-theme="dark"] { --lb-scrim: rgba(11, 22, 26, 0.94); --lb-rail-bg: #0f2125; --lb-fg: #f1ece4; --lb-fg-soft: rgba(241, 236, 228, 0.65); --lb-rose: #d4a0a0; --lb-rule: rgba(241, 236, 228, 0.10); --lb-thumbs-bg: rgba(255, 255, 255, 0.03); --lb-thumbs-rule: rgba(255, 255, 255, 0.08); /* Chrome chips - stay dark in dark mode too. Light glass on the deep teal scrim makes the white icon disappear (both surfaces read as light). Dark chip + white icon = consistent high contrast in both themes. Border stays light so the chip's silhouette still reads. */ --lb-chrome-bg: rgba(0, 0, 0, 0.58); --lb-chrome-bg-hover: rgba(0, 0, 0, 0.78); --lb-chrome-border: rgba(255, 255, 255, 0.18); --lb-chrome-fg: #fff; --lb-book: #4daab8; --lb-book-fg: #04252c; --lb-ghost-bd: rgba(77, 170, 184, 0.45); --lb-ghost-fg: #9fdbe4; } /* ─── Header polish ───────────────────────────────────────────────────────── DOMINANT MOMENT: editorial eyebrow → 5rem Schibsted title → rose hairline → stat strip stack. Signals curated work, not a CMS index page. */ .gallery { padding-block: clamp(3rem, 6vw, 5rem); } .gallery__header { position: relative; isolation: isolate; text-align: center; /* Tightened: once the hero carries visual mass (watermark + oversized stat), the header-to-grid gap no longer needs to read as a hollow void. */ margin-bottom: clamp(1.5rem, 3vw, 2.25rem); max-width: 56rem; margin-inline: auto; padding-block: clamp(1.5rem, 4vw, 3.25rem) clamp(1rem, 2vw, 1.75rem); } /* The ghost Kb monogram behind this heading was removed 2026-08-01 (Ben's call, matching contact + basic-page): the shared closing CTA already carries a Kb, so /gallery/ rendered the mark twice. Worth noting this one was load-bearing in a way the others were not - it gave a text-only header real visual mass, not just edge filler. The soft radial glow below is deliberately KEPT so the header still opens with depth rather than as a bare search-results heading. */ .gallery__header::before { content: ""; position: absolute; z-index: -2; inset: -12% -18%; pointer-events: none; background: radial-gradient(ellipse 55% 62% at 50% 42%, color-mix(in srgb, var(--color-accent-glow) 10%, transparent) 0%, transparent 66%); } [data-theme="dark"] .gallery__header::before { background: radial-gradient(ellipse 55% 62% at 50% 42%, color-mix(in srgb, var(--color-accent-glow) 20%, transparent) 0%, transparent 66%); } .gallery__eyebrow { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-eyebrow); margin: 0 0 0.85rem; text-align: center; max-width: none; width: 100%; } .gallery__header > h1, .gallery__header h1#gallery-heading { /* Velvet Cinema editorial serif hero (matches the pillar heroes: home .hero__heading, svcs-hero__title) - Fraunces, light weight, optical sizing, with a rose-deep serif-italic accent word. */ font-family: var(--font-serif); font-optical-sizing: auto; font-size: clamp(2.75rem, 1.6rem + 5.5vw, 5rem); font-weight: 350; line-height: 1; letter-spacing: -0.015em; color: var(--color-heading); margin: 0 auto 0.75rem; text-wrap: balance; display: block; text-align: center; } .gallery__header > h1 em { font-style: italic; font-weight: 480; color: var(--color-rose-deep); } /* Rose accent rule beneath the title - centered block under the title. */ .gallery__header > h1 + .gallery__meta { position: relative; padding-top: 1.5rem; } .gallery__header > h1 + .gallery__meta::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3rem; height: 2px; background: var(--color-rose); } .gallery__meta { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-eyebrow); margin: 0; text-align: center; /* style.css global rule `p { max-width: 70ch }` clips the p; override. */ max-width: none; width: 100%; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.6rem; } .gallery__stat-sep { color: var(--color-rose); font-size: 0.9rem; line-height: 1; transform: translateY(-1px); letter-spacing: 0; } /* Oversized editorial stat: the photo count is the hero's one number moment - a huge thin (300-weight) serif numeral with the small-caps label riding beside it, so the hero has a dominant visual instead of an even stat line. */ .gallery__stat-num { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.25rem, 6vw, 3.75rem); letter-spacing: -0.02em; color: var(--color-heading); line-height: 0.85; margin-right: 0.3rem; } .gallery__active-filters { font-family: var(--font-body); font-size: 0.85rem; font-style: italic; color: var(--color-body); margin: 0.75rem 0 0; text-align: center; max-width: none; width: 100%; } /* ─── Filter pedestal (light-mode cream surface) ──────────────────────────── Replaces the prior dark `#073542` panel that read as a dark-mode token leak on the cream page. The pedestal is a slightly-deeper cream surface, lifted on a soft shadow, edged with a rose hairline, with all controls in the page's native warm-brown palette. Reads as "page furniture," not a slab. DOMINANT MOMENT: the rose APPLY pill sitting flush-right against quiet cream controls — a single moment of color that pulls the eye to the action without dressing the whole panel in accent. */ .gallery__filters { background: var(--color-bg-elevated); border: 1px solid rgba(212, 160, 160, 0.35); border-radius: 10px; padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); margin-bottom: clamp(2.5rem, 4vw, 3.5rem); display: flex; flex-wrap: wrap; align-items: end; gap: clamp(0.75rem, 1.5vw, 1.25rem) clamp(1rem, 2vw, 1.5rem); /* Soft pedestal lift; ground-line top, lifted body. */ box-shadow: 0 1px 0 rgba(58, 40, 40, 0.04) inset, 0 14px 28px -22px rgba(58, 40, 40, 0.18); position: relative; } /* Atmospheric rose glow top-right - keeps the editorial signature, but at half the prior opacity so it whispers on cream instead of shouting. */ .gallery__filters::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( ellipse 55% 70% at 95% 10%, rgba(212, 160, 160, 0.10) 0%, transparent 65% ); pointer-events: none; } .gallery__filter { display: flex; flex-direction: column; gap: 0.4rem; font-family: var(--font-body); font-size: 0.85rem; position: relative; z-index: 1; } /* Direct-child selector only: when JS upgrades the native is hidden when JS upgrades it to a kb-custom-select (main.js initCustomSelects). The fallback styles below are the no-JS experience and a safety net while JS is initializing. */ .gallery__filter select { appearance: none; -webkit-appearance: none; padding: 0.7rem 2.4rem 0.7rem 0.95rem; background: url("data:image/svg+xml;utf8,") no-repeat right 0.95rem center, var(--color-bg-elevated); background-size: 12px auto, auto; border: 1px solid rgba(212, 160, 160, 0.45); border-radius: 4px; color: var(--color-heading); font-family: var(--font-body); font-size: 0.9rem; line-height: 1.3; min-width: 12rem; cursor: pointer; transition: border-color 200ms ease, box-shadow 200ms ease; } /* Hide the native select once kb-custom-select has wrapped it. The existing rule in style.css is scoped to .contact-section; this generic rule covers any context (gallery, future surfaces). */ select.kb-select-hidden { position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; overflow: hidden; } /* Custom-select trigger restyled for the gallery filter pedestal. The contact-section uses an underline-only trigger; the gallery uses a bordered/boxed input that matches the pedestal language. */ .gallery__filters .kb-custom-select { min-width: 12rem; flex: 0 0 auto; } .gallery__filters .kb-custom-select__trigger { /* Flex row keeps the label and caret on one line (the caret is an inline SVG child, not a background image); min-width matches the pre-JS native