/* ByFarhan — Dark Mode + Theme Toggle Linked on every page via Dark-mode rules only fire when is set by theme.js. */ /* ── CSS Variable Overrides ──────────────────────────────────── */ html[data-theme="dark"] { --bg-color: #1C1C1E; --text-primary: #F5F5F7; --text-secondary: #98989D; --glass-bg: rgba(44, 44, 46, 0.94); --glass-border: rgba(255, 255, 255, 0.10); --glass-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 12px 48px rgba(0,0,0,0.45); /* Used as fallback in inline border-color vars e.g. var(--border-color, #eee) */ --border-color: rgba(255, 255, 255, 0.08); color-scheme: dark; } /* FAQ answer text — hardcoded #666 inline style is too dark on dark bg */ html[data-theme="dark"] details p { color: var(--text-secondary) !important; } html[data-theme="dark"] details { border-bottom-color: rgba(255,255,255,0.08) !important; } /* ── Base backgrounds ─────────────────────────────────────────── */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: #1C1C1E; } html[data-theme="dark"] body::before { background-color: #1C1C1E !important; } /* ── Mobile Safari scroll stability ───────────────────────────── */ @media (max-width: 900px), (hover: none), (pointer: coarse) { html, body { scroll-snap-type: none !important; } .slide-sentinel { scroll-snap-align: none !important; scroll-snap-stop: normal !important; } /* iOS Safari can crash the renderer when many image cards combine backdrop-filter with SVG filters while scrolling. Keep the gallery shape and shadows, but use a flat glass fallback on touch devices. */ .gallery-item { contain: paint style; transition: opacity 0.35s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; } .gallery-item::before { display: none !important; } .gallery-item::after { background: rgba(255, 255, 255, 0.72) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; } .gallery-item img { filter: none !important; transform: none !important; will-change: auto !important; } .gallery-item.interactive { transform: none !important; } .lightbox { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="dark"] .gallery-item::after { background: rgba(28, 28, 30, 0.72) !important; } } /* ── Sitewide content links ───────────────────────────────────── */ a { text-decoration: none !important; } /* ── Navbar logo optical balance ──────────────────────────────── */ .nav-brand { gap: 7px; } .nav-brand .nav-logo-mark { height: 14.5px; transform: translateY(0.5px); } /* PJAX swaps should feel instant and settled. Keep first-load entrance animations for hard loads, but do not replay nav/header drops after an in-site page change. */ body.pjax-no-intro .main-nav, body.pjax-no-intro .page-header, body.pjax-no-intro .page-title, body.pjax-no-intro .page-subtitle { animation: none !important; transform: none !important; opacity: 1 !important; } main p a:not(.cta-btn):not(.prints-cta):not(.print-card):not(.gallery-item), main li a:not(.cta-btn):not(.prints-cta):not(.print-card):not(.gallery-item), .seo-section a:not(.cta-btn), .prints-custom-note a, .prints-faq a { color: var(--text-primary, #1D1D1F) !important; font-weight: 500; text-decoration: none !important; border-bottom: 0 !important; transition: opacity 0.2s ease, background 0.2s ease; } main p a:not(.cta-btn):not(.prints-cta):not(.print-card):not(.gallery-item):hover, main li a:not(.cta-btn):not(.prints-cta):not(.print-card):not(.gallery-item):hover, .seo-section a:not(.cta-btn):hover, .prints-custom-note a:hover, .prints-faq a:hover { opacity: 0.78; } html[data-theme="dark"] main p a:not(.cta-btn):not(.prints-cta):not(.print-card):not(.gallery-item), html[data-theme="dark"] main li a:not(.cta-btn):not(.prints-cta):not(.print-card):not(.gallery-item), html[data-theme="dark"] .seo-section a:not(.cta-btn), html[data-theme="dark"] .prints-custom-note a, html[data-theme="dark"] .prints-faq a { border-bottom: 0 !important; } /* ── Nav — white text, keep original font-size untouched ─────── */ html[data-theme="dark"] .main-nav { border-bottom-color: rgba(255,255,255,0.07); box-shadow: 0 2px 10px rgba(0,0,0,0.35); } html[data-theme="dark"] .main-nav::before { background: rgba(28,28,30,0.60) !important; } /* White nav text in dark mode (not grey) */ html[data-theme="dark"] .nav-brand, html[data-theme="dark"] .nav-menu a { color: var(--text-primary); } html[data-theme="dark"] .nav-menu a:hover, html[data-theme="dark"] .nav-menu a.active { color: #fff; } /* Slideshow has its own dark overlay nav — make toggle visible */ .slideshow-nav .theme-toggle { color: rgba(255,255,255,0.85); opacity: 1; } .slideshow-nav .theme-toggle:hover { color: #fff; opacity: 1; } /* ── Cards / Glass frames ─────────────────────────────────────── */ html[data-theme="dark"] .glass-frame, html[data-theme="dark"] .service-card, html[data-theme="dark"] .gallery-frame, html[data-theme="dark"] .photo-card, html[data-theme="dark"] .card { background: var(--glass-bg); border-color: var(--glass-border); } /* Location highlight cards (nanaimo, tofino, vancouver pages) */ html[data-theme="dark"] .highlight-card { background: rgba(44,44,46,0.92) !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; } /* Journal story cards — existing .dark-mode selector never fires; use data-theme */ html[data-theme="dark"] .journal-card { background-image: linear-gradient(145deg, rgba(44,44,46,0.96), rgba(36,36,38,0.90)) !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 12px 40px -4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important; } html[data-theme="dark"] .journal-footer { border-top-color: rgba(255,255,255,0.08) !important; } /* Journal tabs pill */ html[data-theme="dark"] .journal-tabs { background: rgba(44,44,46,0.92) !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important; } html[data-theme="dark"] .journal-tab-btn.active { background: rgba(255,255,255,0.12) !important; color: var(--text-primary) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important; } /* About page hero card */ html[data-theme="dark"] .about-hero-container { background-image: linear-gradient(145deg, rgba(44,44,46,0.95), rgba(36,36,38,0.85)) !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 24px 60px -8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .about-hero-img { border-color: rgba(255,255,255,0.15) !important; } /* About page Instagram social tag */ html[data-theme="dark"] .social-tag { background: rgba(44,44,46,0.9); border-color: rgba(255,255,255,0.1); color: var(--text-primary); } html[data-theme="dark"] .social-tag:hover { background: rgba(60,60,62,0.95); border-color: rgba(255,255,255,0.2); } /* ── CTA buttons ──────────────────────────────────────────────── */ /* Primary: white bg with dark text (inverted from light mode) */ html[data-theme="dark"] .cta-btn--primary { background: #F5F5F7 !important; color: #1C1C1E !important; } html[data-theme="dark"] .cta-btn--primary:hover { background: #ffffff !important; color: #1C1C1E !important; } /* Secondary: white outline + text */ html[data-theme="dark"] .cta-btn--secondary { color: #F5F5F7; border-color: rgba(255,255,255,0.35); } html[data-theme="dark"] .cta-btn--secondary:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.5); } /* Submit button on forms */ html[data-theme="dark"] .submit-btn { background: #F5F5F7; color: #1C1C1E; } html[data-theme="dark"] .submit-btn:hover { background: #ffffff; color: #1C1C1E; } /* ── Location / Vancouver CTA card ───────────────────────────── */ html[data-theme="dark"] .location-cta { background: rgba(44,44,46,0.92) !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.3) !important; } /* ── Service pills (location pages) ──────────────────────────── */ html[data-theme="dark"] .service-pill { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); color: var(--text-secondary); } /* ── Filter Buttons ───────────────────────────────────────────── */ html[data-theme="dark"] .filter-btn { color: var(--text-secondary); border-color: rgba(255,255,255,0.1); } html[data-theme="dark"] .filter-btn:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); } html[data-theme="dark"] .filter-btn.active { background: #F5F5F7; color: #1C1C1E; border-color: #F5F5F7; } /* ── CTA section / box ────────────────────────────────────────── */ html[data-theme="dark"] .cta-section, html[data-theme="dark"] .cta-box { background: rgba(44,44,46,0.9); border-color: rgba(255,255,255,0.08); } /* ── Forms ────────────────────────────────────────────────────── */ html[data-theme="dark"] .form-group label { color: var(--text-primary); } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .form-group input, html[data-theme="dark"] .form-group textarea, html[data-theme="dark"] .form-group select { background: rgba(44,44,46,0.9) !important; color: var(--text-primary) !important; border-color: rgba(255,255,255,0.12) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text-secondary); } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] .form-group input:focus, html[data-theme="dark"] .form-group textarea:focus, html[data-theme="dark"] .form-group select:focus { border-color: rgba(255,255,255,0.3) !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.06) !important; outline: none; } /* Back-to-top */ .back-to-top { position: fixed; right: max(20px, calc(env(safe-area-inset-right, 0px) + 20px)); bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 24px)); z-index: 160; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(29, 29, 31, 0.06); border-radius: 50%; appearance: none; -webkit-appearance: none; background: rgba(255, 255, 255, 0.82); color: #1D1D1F; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 14px, 0) scale(0.96); transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); text-decoration: none !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .back-to-top.visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); } .back-to-top:hover { background: rgba(255, 255, 255, 0.96); border-color: rgba(29, 29, 31, 0.1); transform: translate3d(0, -2px, 0) scale(1.02); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92); } .back-to-top:active { transform: translate3d(0, 0, 0) scale(0.98); } .back-to-top svg { width: 22px; height: 22px; } @media (max-width: 768px) { .back-to-top { right: max(18px, calc(env(safe-area-inset-right, 0px) + 18px)); bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px)); width: 52px; height: 52px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.92); } .back-to-top:hover { transform: translate3d(0, 0, 0) scale(1); } } html[data-theme="dark"] .back-to-top { background: rgba(44, 44, 46, 0.76); border-color: rgba(255, 255, 255, 0.1); color: #F5F5F7; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .back-to-top:hover { background: rgba(58, 58, 60, 0.9); border-color: rgba(255, 255, 255, 0.16); } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity 0.18s ease, visibility 0.18s ease; transform: none; } .back-to-top.visible, .back-to-top:hover, .back-to-top:active { transform: none; } } /* ── Footer ───────────────────────────────────────────────────── */ /* Logo uses mix-blend-mode:multiply which darkens on dark bg — reset to normal */ html[data-theme="dark"] footer img { mix-blend-mode: normal !important; opacity: 0.7 !important; } html[data-theme="dark"] footer, html[data-theme="dark"] .site-footer { background: #161618 !important; border-top-color: rgba(255,255,255,0.07); color: var(--text-secondary); } html[data-theme="dark"] footer a, html[data-theme="dark"] .site-footer a { color: var(--text-secondary); } html[data-theme="dark"] footer a:hover, html[data-theme="dark"] .site-footer a:hover { color: var(--text-primary); } /* ── Mobile nav overlay ───────────────────────────────────────── */ html[data-theme="dark"] .mobile-nav-overlay { background: rgba(28,28,30,0.98) !important; } /* ── Lightbox ─────────────────────────────────────────────────── */ html[data-theme="dark"] .lightbox { background: rgba(20,20,22,0.96) !important; backdrop-filter: blur(40px) !important; } html[data-theme="dark"] .lightbox-content { box-shadow: 0 24px 80px rgba(0,0,0,0.7) !important; } html[data-theme="dark"] .close { background: rgba(44,44,46,0.9) !important; color: #F5F5F7 !important; } html[data-theme="dark"] .close:hover { background: rgba(60,60,62,1) !important; } html[data-theme="dark"] .lightbox-nav { background: rgba(255,255,255,0.08) !important; color: #F5F5F7 !important; } html[data-theme="dark"] .lightbox-nav:hover { background: rgba(255,255,255,0.18) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; } /* ── Page header titles ───────────────────────────────────────── */ html[data-theme="dark"] .page-header .page-title, html[data-theme="dark"] .page-header .page-subtitle { color: var(--text-primary); } /* ══════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON ══════════════════════════════════════════════════════════════ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; /* Inherit color from nav-menu context so it matches adjacent icons exactly */ color: inherit; cursor: pointer; padding: 6px; margin: -6px; opacity: 1; transition: color 0.6s ease; line-height: 0; flex-shrink: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; z-index: 1; } .theme-toggle:hover { opacity: 1; background: transparent; color: var(--text-primary); } /* The icon "stage" — reserves a fixed 17px square so both icons can be * stacked on top of each other via absolute positioning. That's what * powers the rotate + cross-fade animation on theme switch. */ .theme-toggle { width: 29px; /* 17 + 6*2 padding */ height: 29px; margin: -6px; padding: 6px; } .theme-toggle svg { width: 17px; height: 17px; display: block; flex-shrink: 0; position: absolute; top: 50%; left: 50%; /* `will-change` kicks the icons to the GPU compositor so the swap * stays at 60fps on budget Android devices. Scoped tightly so it * doesn't leak memory on the whole page. */ will-change: transform, opacity; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; transform-origin: center; } .theme-toggle .icon-moon { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; } .theme-toggle .icon-sun { transform: translate(-50%, -50%) rotate(90deg) scale(0.4); opacity: 0; } html[data-theme="dark"] .theme-toggle .icon-moon { transform: translate(-50%, -50%) rotate(-90deg) scale(0.4); opacity: 0; } html[data-theme="dark"] .theme-toggle .icon-sun { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; } /* Respect reduced-motion: skip the spring rotation, just cross-fade. */ @media (prefers-reduced-motion: reduce) { .theme-toggle svg { transition: opacity 0.15s ease; transform: translate(-50%, -50%) !important; } .theme-toggle .icon-sun, html[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; } .theme-toggle .icon-moon, html[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; } } /* Desktop nav: match theme toggle colour to adjacent .nav-menu a icons */ .nav-menu .theme-toggle { color: var(--text-secondary); } .nav-menu .theme-toggle:hover { color: var(--text-primary); } /* Scroll: light background behind nav → icons turn white (matches .nav-icon.nav-text-light) */ .theme-toggle.nav-text-light { color: rgba(255, 255, 255, 0.95); } .theme-toggle.nav-text-light:hover { color: #fff; } /* ── Mobile-only toggle ───────────────────────────────────────── */ .mobile-theme-toggle { display: none; } @media (max-width: 768px) { /* Order: brand | … | instagram(1) | toggle(2) | hamburger(3) */ .mobile-instagram { order: 1 !important; } .mobile-theme-toggle { order: 2 !important; } .mobile-menu-btn { order: 3 !important; } /* Align all right-side nav icons identically. Use consistent tap targets (44×44 WCAG) and visible gaps between icons. */ .mobile-instagram, .mobile-theme-toggle, .mobile-menu-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 10px !important; flex-shrink: 0 !important; } /* Visible breathing room between icons */ .mobile-instagram { margin-right: 2px !important; } .mobile-theme-toggle { margin-right: 2px !important; } /* Pull the hamburger toward the edge so it feels balanced with the 20px container padding */ .mobile-menu-btn { margin-right: -6px !important; } /* Remove the old -2px nudge that caused vertical misalignment */ .mobile-instagram svg { margin-top: 0 !important; } .mobile-theme-toggle { border: none; background: transparent; cursor: pointer; color: inherit; opacity: 1; transition: color 0.6s ease, background-color 0.2s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; } .mobile-theme-toggle svg { width: 18px; height: 18px; } /* Subtle press feedback on touch */ .mobile-instagram:active, .mobile-theme-toggle:active, .mobile-menu-btn:active { background: rgba(0, 0, 0, 0.06); } html[data-theme="dark"] .mobile-instagram:active, html[data-theme="dark"] .mobile-theme-toggle:active, html[data-theme="dark"] .mobile-menu-btn:active { background: rgba(255, 255, 255, 0.08); } .mobile-theme-toggle:hover { color: var(--text-primary); } .mobile-theme-toggle.nav-text-light { color: rgba(255, 255, 255, 0.95); } } /* ════════════════════════════════════════════════════════════════ GLOBAL ENHANCEMENTS (April 2026) Loaded after every page's inline CSS, so rules here override. ════════════════════════════════════════════════════════════════ */ /* ── Mobile vertical rhythm: slightly denser, still image-led ─── */ @media (max-width: 768px) { main.page-container, .page-container { padding-top: 88px !important; padding-bottom: 72px !important; } .page-header { margin-bottom: 42px !important; } .page-title { margin-bottom: 10px !important; } .page-subtitle { line-height: 1.48 !important; } .filter-buttons, .prints-filters, .journal-tabs-wrap { margin-top: 22px !important; } .filter-buttons { margin-bottom: 34px !important; } .masonry-wrapper { gap: 16px !important; } .gallery-item { padding: 10px !important; } .journal-grid { gap: 22px !important; margin-top: 34px !important; } .journal-body { padding: 24px !important; } .journal-tag { margin-bottom: 12px !important; } .journal-excerpt { margin-bottom: 22px !important; } .article-header { margin-bottom: 40px !important; } .article-body p { margin-bottom: 18px !important; } .article-body h2 { margin-top: 36px !important; margin-bottom: 18px !important; } .article-body blockquote { margin: 34px 0 !important; padding-left: 18px !important; } .article-gallery { gap: 16px !important; margin-top: 34px !important; } .breadcrumb { padding-top: 58px !important; } .location-hero { padding-top: 34px !important; padding-bottom: 28px !important; } .location-tag { margin-bottom: 14px !important; } .location-title { margin-bottom: 12px !important; } .location-subtitle { margin-bottom: 24px !important; line-height: 1.5 !important; } .highlights { gap: 14px !important; margin-bottom: 44px !important; } .highlight-card { padding: 22px 20px !important; } .highlight-icon { margin-bottom: 8px !important; } .location-gallery { margin-bottom: 52px !important; } .location-gallery h2, .location-services h2, .location-cta h2 { margin-bottom: 10px !important; } .location-services { margin-bottom: 58px !important; } .location-services p { margin-bottom: 24px !important; line-height: 1.6 !important; } .service-pills { gap: 8px !important; } .service-pill { padding: 8px 16px !important; } .location-cta { padding: 30px 22px !important; margin-bottom: 52px !important; } .location-cta p { margin-bottom: 22px !important; } .seo-hub { margin-top: 58px !important; } .seo-section + .seo-section { margin-top: 34px !important; padding-top: 32px !important; } .seo-section h2 { margin-bottom: 10px !important; } .seo-pill-row { margin-top: 22px !important; gap: 8px !important; } .seo-faq { margin-top: 22px !important; } .seo-faq summary { padding-top: 15px !important; padding-bottom: 15px !important; } .prints-main { padding-bottom: 64px !important; } .prints-grid { gap: 18px !important; margin-top: 34px !important; } .prints-info { margin-top: 58px !important; padding-top: 30px !important; } .prints-info-row { gap: 18px !important; margin-bottom: 34px !important; } .prints-faq { padding-top: 12px !important; padding-bottom: 12px !important; } .about-hero-container { margin-top: 0 !important; padding: 26px 22px !important; gap: 16px !important; } .about-content-inner p { margin-bottom: 12px !important; line-height: 1.48 !important; } .about-intro-greeting { margin-bottom: 8px !important; } .contact-form { gap: 18px !important; } .form-group { margin-bottom: 18px !important; } .contact-direct { margin-top: 28px !important; } main.page-container > section[style*="margin-top: 64px"] { margin-top: 46px !important; padding-top: 34px !important; } } @media (max-width: 480px) { main.page-container, .page-container { padding-left: 20px !important; padding-right: 20px !important; padding-top: 82px !important; padding-bottom: 64px !important; } .page-header { margin-bottom: 34px !important; } .location-hero { padding-left: 20px !important; padding-right: 20px !important; padding-top: 30px !important; } .highlights, .location-gallery, .location-services { padding-left: 20px !important; padding-right: 20px !important; } .location-cta { margin-left: 20px !important; margin-right: 20px !important; } .cta-group { gap: 10px !important; } .cta-btn, .submit-btn { min-height: 42px !important; padding-top: 12px !important; padding-bottom: 12px !important; } } /* ── A11y: consistent focus rings for keyboard users ───────────── */ /* Uses :focus-visible so mouse clicks don't show an outline, only keyboard nav does. Applied to every interactive element including nav links, buttons, theme toggles, gallery items, and form controls. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [role="button"]:focus-visible, .gallery-item:focus-visible, .filter-pill:focus-visible, .theme-toggle:focus-visible, .mobile-menu-btn:focus-visible, .mobile-instagram:focus-visible, .mobile-theme-toggle:focus-visible { outline: 2px solid rgba(29, 29, 31, 0.42); outline-offset: 2px; border-radius: 6px; } html[data-theme="dark"] a:focus-visible, html[data-theme="dark"] button:focus-visible, html[data-theme="dark"] input:focus-visible, html[data-theme="dark"] textarea:focus-visible, html[data-theme="dark"] select:focus-visible, html[data-theme="dark"] summary:focus-visible, html[data-theme="dark"] [role="button"]:focus-visible, html[data-theme="dark"] .gallery-item:focus-visible, html[data-theme="dark"] .filter-pill:focus-visible { outline-color: rgba(245, 245, 247, 0.52); } /* ── Perf: skip layout & paint for offscreen gallery items ───── */ /* 30-50% rendering speedup on long masonry grids. `contain-intrinsic-size` reserves space so the scrollbar doesn't jitter while items materialise. */ /* NOTE: `content-visibility: auto` was previously applied to gallery * items but it broke the CSS masonry layout — offscreen items collapsed * to their reserved intrinsic size, leaving huge vertical gaps between * cards on mobile. Removed. If we re-enable it later it needs to be * paired with per-item `contain-intrinsic-size` that matches each * image's real aspect ratio. */ /* ── Mobile menu: slide-from-right + backdrop fade ────────────── */ /* Overrides the scale-fade transition baked into each page's inline CSS with a more premium slide pattern. Specificity bumped with `.mobile-nav-overlay` appearing twice so it wins over the existing `.mobile-nav-overlay.active` rule in the inline