/* ========================================= PASTELLE WEBSITE - SHARED STYLES Common CSS for all pages ========================================= */ /* ========================================= THEME TOKENS Single source of truth for what each theme looks like. Components below consume these instead of repeating per-theme colour literals, so one rule can serve light / dark / navy / pastel. Cascade order matters: navy carries BOTH `.dark` and `.navy`, so html.navy must come after html.dark (equal specificity, later wins) and only needs to restate what actually differs from dark. Pastel maps onto the --pastelle-pastel-* properties js/theme.js writes onto . ========================================= */ :root { /* ── Motion scale ──────────────────────────────────────────────────────── One curve family for the whole site. Everything decelerates and settles; nothing overshoots. On a page whose subject is the artwork, the interface should resolve out of the way rather than spring around. --ease-out-expo is the sharp one: a fast departure that lands softly, for state changes the pointer is waiting on. --ease-out-soft is gentler, for travel the eye follows across distance (panels, sheets, staggered rows). --pnav-ease is kept as its alias so the nav rules below read in their own vocabulary. Durations pair with them by intent, not by element: --motion-fast for a change under the cursor, --motion-base for something entering or leaving, --motion-slow for content arriving on scroll. */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --motion-fast: 0.18s; --motion-base: 0.28s; --motion-slow: 0.42s; --theme-bg: #ECEBDD; --theme-surface: #E5E5E5; --theme-ink: #000; --theme-accent: currentColor; --theme-hairline: rgba(18, 18, 18, 0.12); /* Fixed chrome: navbar shell + mobile sheet */ --theme-chrome-hairline: rgba(19, 18, 10, 0.1); --theme-chrome-saturate: 130%; /* Elevation ramps follow shadow-plugin's stacked geometry (see css/shadow-plugin.css): five layers halving in offset/blur so the falloff reads as one soft gradient instead of a single hard blur. The alphas are tuned per theme — a dark page needs far more than a light one for the same apparent depth — but the geometry is identical everywhere. */ --theme-sheet-shadow: 0 25px 50px rgba(20, 19, 12, 0.1), 0 12px 24px rgba(20, 19, 12, 0.08), 0 6px 12px rgba(20, 19, 12, 0.06), 0 3px 6px rgba(20, 19, 12, 0.04), 0 1.5px 3px rgba(20, 19, 12, 0.03); --theme-sheet-hairline: var(--pnav-rule); --theme-menu-bg: #f5f4ec; --theme-menu-hairline: var(--pnav-rule); /* Menus are opaque on purpose. These float over generative artwork, and at even 95% the pattern underneath showed through and read as cheap. The inset hairline gives the top edge a lit rim so the panel has an edge of its own rather than being a flat rectangle. */ --theme-menu-shadow: 0 18px 32px rgba(20, 19, 12, 0.14), 0 6px 12px rgba(20, 19, 12, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.45); --theme-hover-soft: color-mix(in srgb, currentColor 8%, transparent); --theme-hover-strong: color-mix(in srgb, currentColor 12%, transparent); --theme-menu-hover: rgba(18, 18, 18, 0.06); --theme-menu-rail: currentColor; --theme-chip-bg: color-mix(in srgb, currentColor 6%, transparent); /* Long-form collection / orbital surfaces */ --theme-live-bg: #ECEBDD; --theme-live-hairline: rgba(18, 18, 18, 0.075); --theme-frame-bg: #fdfcf8; --theme-frame-hairline: rgba(18, 18, 18, 0.12); --theme-frame-shadow: 0 60px 120px rgba(18, 18, 18, 0.1), 0 30px 60px rgba(18, 18, 18, 0.08), 0 15px 30px rgba(18, 18, 18, 0.06), 0 7.5px 15px rgba(18, 18, 18, 0.05), 0 3px 6px rgba(18, 18, 18, 0.04), 0 1px 0 rgba(255, 255, 255, 0.72) inset; --theme-modal-bg: #fdfcf8; --theme-modal-hairline: rgba(18, 18, 18, 0.1); --theme-modal-shadow: 0 60px 120px rgba(18, 18, 18, 0.11), 0 30px 60px rgba(18, 18, 18, 0.09), 0 15px 30px rgba(18, 18, 18, 0.07), 0 7.5px 15px rgba(18, 18, 18, 0.05), 0 3px 6px rgba(18, 18, 18, 0.04); --theme-scrim: rgba(247, 246, 239, 0.72); --theme-cfooter-bg: #ecebdd; --theme-cfooter-ink: #121212; --theme-cfooter-hairline: rgba(18, 18, 18, 0.08); --theme-copy-muted: rgba(18, 18, 18, 0.62); } html.dark { --theme-bg: #13120A; --theme-surface: #121212; --theme-ink: #fff; --theme-hairline: rgba(255, 255, 255, 0.12); --theme-chrome-hairline: rgba(246, 241, 227, 0.1); --theme-sheet-shadow: 0 25px 50px rgba(0, 0, 0, 0.34), 0 12px 24px rgba(0, 0, 0, 0.28), 0 6px 12px rgba(0, 0, 0, 0.22), 0 3px 6px rgba(0, 0, 0, 0.16), 0 1.5px 3px rgba(0, 0, 0, 0.12); --theme-menu-bg: #1f1e14; --theme-menu-hover: rgba(255, 255, 255, 0.08); --theme-menu-shadow: 0 18px 32px rgba(0, 0, 0, 0.42), 0 6px 12px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07); --theme-live-bg: #13120A; --theme-live-hairline: rgba(255, 255, 255, 0.085); --theme-frame-bg: #050505; --theme-frame-hairline: rgba(255, 255, 255, 0.12); --theme-frame-shadow: 0 60px 120px rgba(0, 0, 0, 0.36), 0 30px 60px rgba(0, 0, 0, 0.3), 0 15px 30px rgba(0, 0, 0, 0.24), 0 7.5px 15px rgba(0, 0, 0, 0.18), 0 3px 6px rgba(0, 0, 0, 0.14), 0 1px 0 rgba(255, 255, 255, 0.08) inset; --theme-modal-bg: #12120f; --theme-modal-hairline: rgba(255, 255, 255, 0.1); --theme-modal-shadow: 0 60px 120px rgba(0, 0, 0, 0.36), 0 30px 60px rgba(0, 0, 0, 0.3), 0 15px 30px rgba(0, 0, 0, 0.24), 0 7.5px 15px rgba(0, 0, 0, 0.18), 0 3px 6px rgba(0, 0, 0, 0.14); --theme-scrim: rgba(16, 16, 13, 0.78); --theme-cfooter-bg: #13120a; --theme-cfooter-ink: #ecebdd; --theme-cfooter-hairline: rgba(255, 255, 255, 0.08); --theme-copy-muted: rgba(255, 255, 255, 0.66); } html.navy { --theme-bg: #061830; --theme-surface: #0b2240; --theme-accent: #fff; --theme-hairline: rgba(220, 235, 255, 0.14); --theme-chrome-hairline: rgba(220, 235, 255, 0.12); --theme-sheet-hairline: var(--theme-hairline); /* Opaque, and a step lighter than --theme-surface so the panel reads as lifted off the bar rather than cut out of it. */ --theme-menu-bg: #102c50; --theme-menu-hairline: rgba(220, 235, 255, 0.18); --theme-menu-hover: rgba(220, 235, 255, 0.08); --theme-menu-shadow: 0 18px 32px rgba(2, 10, 22, 0.46), 0 6px 12px rgba(2, 10, 22, 0.26), inset 0 1px 0 rgba(220, 235, 255, 0.1); --theme-hover-soft: rgba(220, 235, 255, 0.08); --theme-hover-strong: rgba(220, 235, 255, 0.08); --theme-chip-bg: rgba(10, 34, 64, 0.88); --theme-live-bg: #061830; --theme-live-hairline: rgba(220, 235, 255, 0.14); --theme-frame-bg: #0b2240; --theme-frame-hairline: rgba(220, 235, 255, 0.14); --theme-modal-bg: #0b2240; --theme-modal-hairline: rgba(220, 235, 255, 0.14); --theme-scrim: rgba(6, 24, 48, 0.78); --theme-cfooter-bg: #061830; --theme-cfooter-ink: #fff; --theme-cfooter-hairline: rgba(220, 235, 255, 0.14); } html.pastel { --theme-bg: var(--pastelle-pastel-bg); --theme-surface: var(--pastelle-pastel-surface); --theme-ink: var(--pastelle-pastel-ink); --theme-accent: var(--pastelle-pastel-accent); --theme-hairline: var(--pastelle-pastel-hairline); /* The pastel backgrounds are highly saturated, so the frosted chrome must not push them further or the bar reads as a different colour than the page it sits on. */ --theme-chrome-hairline: color-mix(in srgb, var(--pastelle-pastel-ink) 10%, transparent); --theme-chrome-saturate: 100%; --theme-sheet-hairline: var(--theme-hairline); --theme-menu-bg: var(--pastelle-pastel-surface-strong); --theme-menu-hairline: color-mix(in srgb, var(--pastelle-pastel-ink) 15%, transparent); --theme-menu-hover: color-mix(in srgb, var(--pastelle-pastel-ink) 8%, transparent); --theme-menu-rail: var(--pastelle-pastel-ink); --theme-menu-shadow: 0 12px 24px color-mix(in srgb, #111111 13%, transparent), 0 2px 6px color-mix(in srgb, #111111 9%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent); --theme-hover-soft: var(--pastelle-pastel-accent-soft); --theme-hover-strong: color-mix(in srgb, var(--pastelle-pastel-accent) 20%, var(--pastelle-pastel-bg) 80%); --theme-chip-bg: var(--pastelle-pastel-accent-soft); --theme-live-bg: var(--pastelle-pastel-surface); --theme-live-hairline: var(--pastelle-pastel-hairline); --theme-frame-bg: var(--pastelle-pastel-surface-strong); --theme-frame-hairline: var(--pastelle-pastel-hairline); --theme-frame-shadow: 0 60px 120px color-mix(in srgb, var(--pastelle-pastel-accent) 11%, transparent), 0 30px 60px color-mix(in srgb, var(--pastelle-pastel-accent) 9%, transparent), 0 15px 30px color-mix(in srgb, var(--pastelle-pastel-accent) 7%, transparent), 0 7.5px 15px color-mix(in srgb, var(--pastelle-pastel-accent) 6%, transparent), 0 3px 6px color-mix(in srgb, var(--pastelle-pastel-accent) 5%, transparent), 0 1px 0 rgba(255, 255, 255, 0.32) inset; --theme-modal-bg: var(--pastelle-pastel-surface-strong); --theme-modal-hairline: var(--pastelle-pastel-hairline); --theme-modal-shadow: 0 60px 120px color-mix(in srgb, var(--pastelle-pastel-accent) 11%, transparent), 0 30px 60px color-mix(in srgb, var(--pastelle-pastel-accent) 9%, transparent), 0 15px 30px color-mix(in srgb, var(--pastelle-pastel-accent) 7%, transparent), 0 7.5px 15px color-mix(in srgb, var(--pastelle-pastel-accent) 6%, transparent), 0 3px 6px color-mix(in srgb, var(--pastelle-pastel-accent) 5%, transparent); --theme-scrim: color-mix(in srgb, var(--pastelle-pastel-bg) 78%, transparent); --theme-cfooter-bg: var(--pastelle-pastel-bg); --theme-cfooter-ink: var(--pastelle-pastel-ink); --theme-cfooter-hairline: var(--pastelle-pastel-hairline); } /* ========== BASE STYLES ========== */ /* Font Smoothing */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scrollbar-gutter: stable; } /* ========== PAGE TITLE SCALE ========== */ /* Three explicit title roles keep hierarchy consistent across templates. */ .page-title-display, .page-title-section, .page-title-detail { font-family: 'Manrope', sans-serif; font-weight: 600 !important; text-wrap: balance; } html body h1.page-title-display.page-title-display { font-size: clamp(3.5rem, 9vw, 9rem) !important; line-height: 0.9 !important; letter-spacing: -0.035em !important; } html body h1.page-title-section.page-title-section, html body #page-header h1.page-title-section { font-size: clamp(2.75rem, 7.5vw, 6.5rem) !important; line-height: 0.94 !important; letter-spacing: -0.03em !important; } html body h1.page-title-detail.page-title-detail, html body #work-title.page-title-detail { font-size: clamp(2.25rem, 5.5vw, 5rem) !important; line-height: 0.98 !important; letter-spacing: -0.025em !important; } @media (max-width: 640px) { html body h1.page-title-display.page-title-display { font-size: clamp(2.75rem, 14vw, 4.8rem) !important; } html body h1.page-title-section.page-title-section, html body #page-header h1.page-title-section { font-size: clamp(2.75rem, 12vw, 4.25rem) !important; } html body h1.page-title-detail.page-title-detail, html body #work-title.page-title-detail { font-size: clamp(2.25rem, 10vw, 3.5rem) !important; } } /* ========== ACCESSIBILITY ========== */ /* Focus Visible Styles - Subtle but clear focus indicators */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .dark button:focus-visible, .dark a:focus-visible, .dark [role="button"]:focus-visible, .dark select:focus-visible, .dark input:focus-visible, .dark textarea:focus-visible { outline-color: rgba(255, 255, 255, 0.8); } /* Touch Action - Prevent double-tap zoom */ button, a, [role="button"], label { touch-action: manipulation; } button, a[href], [role="button"] { -webkit-tap-highlight-color: transparent; } /* Screen Reader Only - Visually hidden but accessible */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Skip to Content Link */ .skip-to-content { position: absolute; top: -100px; left: 0; background: #000; color: #fff; padding: 0.75rem 1.5rem; z-index: 9999; text-decoration: none; font-weight: 500; border-radius: 0 0 0.5rem 0; } .skip-to-content:focus { top: 0; } .dark .skip-to-content { background: #fff; color: #000; } /* Custom Selection Color */ ::selection { background: #4B7BE5; color: #fff; } .dark ::selection { background: #4B7BE5; color: #fff; } /* ========== SCROLLBAR STYLES ========== */ /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } .dark ::-webkit-scrollbar-thumb { background: #333; } /* Hide Scrollbar but allow scroll */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Custom Scrollbar for Modal */ .custom-scrollbar::-webkit-scrollbar { width: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 20px; } .dark .custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); } /* ========== IMAGE LOADING - SKELETON LOADERS ========== */ /* Skeleton loading animation */ @keyframes skeleton-loading { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .skeleton { background: linear-gradient( 90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px ); background-size: 200px 100%; animation: skeleton-loading 1.5s infinite linear; } .dark .skeleton { background: linear-gradient( 90deg, #1a1a1a 0px, #2a2a2a 40px, #1a1a1a 80px ); background-size: 200px 100%; } /* ---- Shared media loading placeholder -------------------------------------- `.media-frame` goes on the *wrapper* around a grid image (the element that already reserves the cell's box). It paints a themed surface plus a soft shimmer that sits BEHIND the media, so the treatment is purely additive: the image paints over it as soon as it decodes, and a page whose JS never runs simply shows the surface — nothing is ever hidden by this rule. js/image-optimizer.js adds `.media-ready` on the media's load event and `.media-ready .media-failed` on error; both stop the shimmer. NOTE: the older `.skeleton` helper above and the previous `img[loading="lazy"]:not([src])` rule never applied to the gallery grids — no markup carries `.skeleton`, and every grid image is created with its `src` already set, so `:not([src])` could not match. `.media-frame` replaces that dead selector. */ @keyframes pastelle-media-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } } .media-frame { position: relative; background-color: var(--theme-surface); background-image: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--theme-ink) 9%, transparent) 50%, transparent 100% ); background-size: 60% 100%; background-repeat: no-repeat; animation: pastelle-media-shimmer 1.6s linear infinite; } .media-frame.media-ready { background-image: none; animation: none; } /* Failed media keeps the plain surface — never a permanent shimmer. */ .media-frame.media-failed { background-image: none; animation: none; } /* Grids whose cells have no intrinsic box until the image arrives can opt into a reserved square while loading, so the page has structure to shimmer. */ .media-frame[data-media-reserve]:not(.media-ready) { aspect-ratio: 1; } @media (prefers-reduced-motion: reduce) { .media-frame { background-image: none; animation: none; } } /* ========== REVEAL ANIMATIONS ========== */ /* Shared reveal system. Elements tagged .reveal-up rise into view when scrolled to; the shared observer in micro-animations.js activates them and staggers siblings that arrive together. Image tiles (.gallery-item / .p-img-tilt, or opt-in .reveal-focus) additionally resolve from a blur, and .reveal-mask headings wipe upward from a clipped edge — the same vocabulary as the Onchain page. ADDITIVE BY DEFAULT: the hidden starting state is applied only under `html.js-anim-ready`, which js/theme.js stamps on from the head — before the body is parsed, so there is no flash. If that script never runs (JS off, blocked bundle, parse error) every .reveal-up is simply visible and the page reads normally. Reduced-motion users never get the hidden state at all, so content is instant for them too. The gate is written as `:where(html.js-anim-ready)` on purpose: :where() contributes zero specificity, so these rules keep the exact weight the ungated `.reveal-up { opacity: 0 }` used to have and every per-page override (Unique-Works, Projects, SideEffectsMayVary) keeps winning exactly as it did before. */ @media (prefers-reduced-motion: no-preference) { :where(html.js-anim-ready) .reveal-up { opacity: 0; transform: translateY(16px); } :where(html.js-anim-ready) .reveal-mask { clip-path: inset(0 0 100% 0); transform: translateY(12px); } .reveal-up { transition: opacity 0.32s var(--ease-out-expo), transform 0.38s var(--ease-out-expo), filter 0.44s var(--ease-out-expo); } :where(html.js-anim-ready) .reveal-up.gallery-item, :where(html.js-anim-ready) .reveal-up.p-img-tilt, :where(html.js-anim-ready) .reveal-up.reveal-focus { filter: blur(8px); } .reveal-mask { transition: clip-path 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo); } } .reveal-up.active { opacity: 1; transform: translateY(0); filter: none; } /* Slight over-clip on reveal so descenders and text shadows never sit on a hard clipped edge. */ .reveal-mask.active { clip-path: inset(-5% -5% -5% -5%); transform: translateY(0); } /* Reduced Motion Support - Disable animations for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========== BUTTON ANIMATIONS ========== */ /* Primary Button Micro Animations */ .btn-primary { position: relative; overflow: hidden; transition: transform 0.2s var(--ease-out-expo), box-shadow 0.22s ease; } .btn-primary::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.15); transform: translate(-50%, -50%); transition: width 0.38s ease, height 0.38s ease; } .btn-primary:hover::before { width: 300px; height: 300px; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .dark .btn-primary:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .btn-primary:active { transform: translateY(0px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); } /* Secondary Button */ .btn-secondary { position: relative; transition: transform 0.2s var(--ease-out-expo), border-color 0.2s var(--ease-out-expo); } .btn-secondary::before { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: currentColor; opacity: 0; transition: opacity 0.2s ease; } .btn-secondary:hover { transform: translateY(-2px); border-color: currentColor; } .btn-secondary:hover::before { opacity: 0.05; } .btn-secondary:active { transform: translateY(0px); } /* Link button hover animation */ .link-btn { position: relative; } .link-btn::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: currentColor; transition: width 0.4s var(--ease-out-expo); } .link-btn:hover::after { width: 100%; } .link-btn svg { transition: transform 0.18s var(--ease-out-expo); } .link-btn:hover svg { transform: translateX(4px); } /* ========== ENHANCED LINK ANIMATIONS ========== */ /* Animated underline from center */ .link-animated { position: relative; text-decoration: none; } .link-animated::after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 1px; background: currentColor; transform: translateX(-50%); transition: width 0.3s var(--ease-out-expo); } .link-animated:hover::after { width: 100%; } /* Navigation link animation */ nav a:not(.link-animated) { position: relative; } nav a:not(.link-animated)::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: currentColor; transition: width 0.3s var(--ease-out-expo); opacity: 0.8; } nav a:not(.link-animated):hover::after { width: 100%; } /* ========== CAROUSEL ANIMATIONS (Homepage) ========== */ /* Carousel Slide Transitions */ .carousel-slide { transition: opacity 0.42s var(--ease-out-expo), transform 0.42s var(--ease-out-expo); } /* Carousel Button Animations */ .carousel-btn { position: relative; transition: transform 0.18s var(--ease-out-expo), border-color 0.18s var(--ease-out-expo); } .carousel-btn svg { transition: transform 0.18s var(--ease-out-expo); } .carousel-btn:hover { transform: scale(1.1); border-color: rgba(255, 255, 255, 0.4); } .carousel-btn:hover svg { transform: translateX(2px); } .carousel-btn:first-of-type:hover svg { transform: translateX(-2px); } .carousel-btn:active { transform: scale(0.95); } /* ========== ART CARD STYLES ========== */ /* Card Refinements - Subtle shadows and borders */ .art-card > div:first-child { border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .dark .art-card > div:first-child { border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* Image Hover Effect */ .art-card img { transition: filter 0.5s ease; } /* ========== TEXT SCRAMBLE EFFECT ========== */ .dud { color: #757575; opacity: 0.5; } .dark .dud { color: #a3a3a3; } /* ========== CROSS-DOCUMENT VIEW TRANSITIONS ========== */ /* Native page navigation uses a restrained editorial shutter: the themed surface and navbar remain fixed while the incoming page resolves downward behind a slightly angled edge. Artwork transitions independently when a matching source and destination are present. */ @view-transition { navigation: auto; } ::view-transition-group(*) { animation-duration: 0.18s; animation-timing-function: var(--ease-out-expo); } ::view-transition-old(*) { animation: vt-refocus-out 0.08s ease-out both; } ::view-transition-new(*) { animation: vt-refocus-in 0.18s var(--ease-out-expo) both; } ::view-transition-old(*):only-child { animation: vt-fade-out 0.08s ease-out both; } ::view-transition-new(*):only-child { animation: vt-fade-in 0.16s var(--ease-out-expo) both; } ::view-transition-old(root) { animation: none; } ::view-transition-new(root) { animation: vt-page-reveal 0.16s var(--ease-out-soft) both; } /* The navbar is identical on both ends of the navigation, so pin it: hide the outgoing snapshot and show the incoming one immediately, and it reads as stationary chrome while the page moves beneath. */ #navbar { view-transition-name: site-nav; } ::view-transition-old(site-nav) { animation: none; opacity: 0; } ::view-transition-new(site-nav) { animation: none; } @keyframes vt-refocus-out { to { opacity: 0; } } @keyframes vt-refocus-in { from { opacity: 0; } } @keyframes vt-fade-out { to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; } } @keyframes vt-page-reveal { from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 2.5%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.01ms !important; animation-delay: 0s !important; } } /* Native View Transitions are progressive enhancement. On browsers without that API, internal navigation still gets a short color-field exit so a page change feels intentional without blocking the browser's navigation. */ @media (prefers-reduced-motion: no-preference) { html.page-transitioning-out::after { position: fixed; inset: 0; z-index: 10001; content: ''; pointer-events: none; background: var(--theme-bg, #ecebdd); animation: pastelle-page-exit 0.2s var(--ease-out-expo) both; } } @keyframes pastelle-page-exit { from { opacity: 0; transform: translate3d(0, 0.5rem, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: no-preference) { .shared-artwork-transitioning { animation: pastelle-shared-artwork-exit 0.2s var(--ease-out-expo) both; } } @keyframes pastelle-shared-artwork-exit { from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } to { opacity: 0.72; transform: translate3d(0, -0.25rem, 0) scale(0.985); } } /* ========== NAVBAR STYLES ========== */ /* One token-driven rule per state, for every theme. Keeping the theme out of the selector matters: the old html.navy / html.pastel variants carried more specificity than a page's own `#navbar > .absolute`, so page-level navbar treatments silently stopped applying in those themes and the bar drifted away from the page background it sits on. */ #navbar { color: var(--theme-ink); } #navbar > .absolute { left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; transform: none !important; background: var(--theme-bg) !important; border-bottom: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease; } #navbar.scrolled > .absolute { background: color-mix(in srgb, var(--theme-bg) 88%, transparent) !important; backdrop-filter: blur(18px) saturate(var(--theme-chrome-saturate)) !important; -webkit-backdrop-filter: blur(18px) saturate(var(--theme-chrome-saturate)) !important; } /* Scroll-direction response: the bar slides away as you read downward and returns the moment you scroll back up (see navbar.js). */ #navbar { transition: transform 0.22s var(--ease-out-expo); } #navbar.nav-hidden { transform: translateY(-102%); } /* A crisp hairline replaces the soft shadow once the bar goes frosted, so the glass edge reads cleanly against content passing beneath it. */ #navbar.scrolled > .absolute { box-shadow: 0 1px 0 var(--theme-chrome-hairline) !important; } @media (prefers-reduced-motion: reduce) { #navbar { transition: none; } #navbar.nav-hidden { transform: none; } } /* Navbar Scrolled State */ #navbar.scrolled #navbar-inner { height: 4rem; } #navbar-inner { width: 100%; max-width: none !important; /* The scroll collapse (5rem -> 4rem) used to ride an overshoot curve set in the markup, which made the bar rebound past its resting height. Motion for the nav is owned here now, and it settles instead. */ transition: height var(--motion-base) var(--ease-out-expo); } #navbar a, #navbar button { color: inherit !important; } /* Normalize button rendering to match links */ #navbar-inner button { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Logo Animation on Scroll */ #navbar-inner a { transition: transform 0.2s var(--ease-out-expo); } #navbar.scrolled #navbar-inner a { transform: scale(0.9); } /* Tailwind 4 emits translate/scale/rotate as their own properties. Reset those helpers so the dropdown can use one transform as a single hinge: centered under its trigger, then growing down from that selection. */ #navbar .relative.group > div.absolute { translate: none !important; scale: none !important; transform: translate3d(calc(-50% + var(--pnav-shift, 0px)), 3px, 0) scale(0.96) !important; transform-origin: top center !important; } #navbar .relative.group:hover > div.absolute, #navbar .relative.group:focus-within > div.absolute, #navbar .relative.group.nav-dropdown-open > div.absolute { opacity: 1 !important; visibility: visible !important; transform: translate3d(calc(-50% + var(--pnav-shift, 0px)), 0, 0) scale(1) !important; } #navbar .relative.group > div.absolute a, #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a, #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button, #navbar button[aria-label="Toggle theme"], #mobileMenu a, #mobileMenu button { scale: none !important; } #navbar .relative.group > button > svg { rotate: 0deg !important; transform: none !important; } #navbar .relative.group:hover > button > svg, #navbar .relative.group:focus-within > button > svg, #navbar .relative.group.nav-dropdown-open > button > svg { rotate: 180deg !important; } #mobileMenu > div > div > button[aria-expanded="true"] > svg { rotate: 180deg; } #navbar button[aria-label="Toggle theme"] { transition: opacity 0.18s ease !important; } #navbar button[aria-label="Toggle theme"]:hover, #navbar button[aria-label="Toggle theme"]:focus-visible { opacity: 0.7; transform: none !important; } #mobileMenu { z-index: 80 !important; } /* ========================================================================== NAVIGATION REVAMP Restyles the shared navbar markup in place: quieter desktop dropdowns and a full-bleed mobile sheet. Everything here targets the existing structure, so no per-page markup changes are needed. Theme colour rules live further down the file and intentionally still win over the neutral defaults set here — this block owns geometry and motion, not palette. ========================================================================== */ :root { --pnav-ease: var(--ease-out-soft); --pnav-rule: color-mix(in srgb, currentColor 12%, transparent); --pnav-rule-soft: color-mix(in srgb, currentColor 8%, transparent); --pnav-h: 5rem; } /* The sheet hangs off the bar, so it has to follow the condensed height. */ #navbar.scrolled ~ #mobileMenu { --pnav-h: 4rem; } /* ── Hamburger ───────────────────────────────────────────────────────────── navbar.js swaps the three-line icon for these two rules, which cross into a close mark on open. Two strokes read cleaner than three at this size. */ .nav-burger { display: block; position: relative; width: 20px; height: 12px; } .nav-burger > span { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 0.34s var(--pnav-ease); } .nav-burger > span:nth-child(1) { top: 2px; } .nav-burger > span:nth-child(2) { top: 8.5px; } [aria-expanded="true"] > .nav-burger > span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); } [aria-expanded="true"] > .nav-burger > span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .nav-burger > span { transition: none; } } /* ── Scrim ───────────────────────────────────────────────────────────────── Sits under the navbar (z-50) so the bar and its close button stay live, and over everything else so the page reads as parked. */ #nav-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(19, 18, 10, 0.34); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.26s var(--pnav-ease), visibility 0.26s var(--pnav-ease); } .dark #nav-scrim { background: rgba(0, 0, 0, 0.52); } #nav-scrim.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } @media (min-width: 768px) { #nav-scrim { display: none; } } /* ── Desktop: top-level items ────────────────────────────────────────────── The old treatment nudged and scaled each item. A centred rule that grows from the middle says the same thing without moving the type around. */ @media (min-width: 768px) { #navbar-inner > div.hidden[class*="md:flex"] > div.flex { gap: 2rem; } /* Typography matches the home page's nav list: Manrope 500, sentence case, normal tracking. The old uppercase-plus-wide-tracking treatment read as a different, heavier face even though the family and weight were identical. */ #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a, #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button { position: relative; display: inline-flex; align-items: center; padding-block: 1rem; font-size: 0.9375rem; font-weight: 500; letter-spacing: normal; text-transform: none; opacity: 1 !important; transform: none !important; transition: opacity 0.18s ease !important; } #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a::after, #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.75rem; height: 1px; background: currentColor; opacity: 0.45; transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--pnav-ease); } #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a:hover::after, #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a:focus-visible::after, #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group:hover > button::after, #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button:focus-visible::after, #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group.nav-dropdown-open > button::after { transform: scaleX(1); } /* Current page keeps the rule drawn, a shade stronger than hover. */ #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a[aria-current="page"], #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button.nav-current { text-decoration: none; } #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a[aria-current="page"]::after, #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button.nav-current::after { transform: scaleX(1); opacity: 0.85; } #navbar-inner .relative.group > button > svg { width: 0.625rem; height: 0.625rem; opacity: 0.4; /* The open state sets `rotate`, not `transform` — transitioning `transform` here animated nothing and the chevron flipped instantly. */ transition: rotate var(--motion-base) var(--pnav-ease), opacity var(--motion-fast) ease; } #navbar-inner .relative.group:hover > button > svg, #navbar-inner .relative.group.nav-dropdown-open > button > svg { opacity: 0.75; } #navbar-inner .relative.group > button:focus-visible { outline: 1px solid var(--theme-menu-hairline) !important; outline-offset: 2px; } /* ── Desktop: dropdown panel ──────────────────────────────────────────── */ #navbar .relative.group > div.absolute { padding-top: 0 !important; max-width: calc(100vw - 2rem) !important; transform-origin: top center !important; transition: opacity 0.2s var(--pnav-ease), visibility 0.2s var(--pnav-ease), transform var(--motion-base) var(--pnav-ease) !important; /* Hover intent: the panel lingers on pointer-out so diagonal travel from the trigger into the menu never collapses it. */ transition-delay: 130ms; } #navbar .relative.group:hover > div.absolute, #navbar .relative.group:focus-within > div.absolute, #navbar .relative.group.nav-dropdown-open > div.absolute { transition-delay: 0ms; } /* A hair lighter than the bar so the panel reads as lifted off it, and opaque enough that artwork underneath never bleeds through. Palette comes from the theme tokens, so all four themes share this one rule. */ /* The nested drawer is listed here too: left to its own Tailwind classes it rendered a different surface from the panel it hangs off — its own radius, shadow and border rather than the theme tokens — which read as a stray window instead of part of the same menu. 6px matches the frames, modals and lightboxes elsewhere on the site. The panels used to sit at 14px, by some distance the softest corner on a site whose every other surface is 3-6px, which is what made them feel foreign. */ #navbar .relative.group > div.absolute > div, #navbar .relative.group .nav-submenu-panel { position: relative; background: var(--theme-menu-bg) !important; padding: 0.5rem !important; gap: 0.125rem !important; border: 1px solid var(--theme-menu-hairline) !important; border-radius: 12px !important; border-color: var(--theme-menu-hairline) !important; box-shadow: var(--theme-menu-shadow) !important; /* No backdrop-filter: the surface is opaque now, so blurring what is behind it is invisible work — and it was costing a full-panel recomposite on every scroll frame while the menu was open. */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Keep the Work drawer slightly wider than its longest label without turning the panel into a large card. */ #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group:first-child > div.absolute { width: 16rem !important; } /* Uniform rows: one line of title, one of meta, both clipped rather than wrapped, so the two-column grid never goes ragged. */ #navbar .relative.group > div.absolute a, .nav-submenu-trigger { display: block !important; position: relative; overflow: hidden; padding: 0.625rem 0.75rem !important; border-radius: 8px !important; transform: none !important; transition: opacity 0.18s ease, translate 0.24s var(--pnav-ease), background-color 0.16s ease !important; } /* Restored after the shared row rule above forces display:block. */ .nav-submenu-trigger { display: flex !important; align-items: center; justify-content: space-between; width: 100%; } #navbar .relative.group > div.absolute a > div { min-width: 0; } #navbar .relative.group > div.absolute a span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #navbar .relative.group > div.absolute a span:first-child { font-size: 0.875rem; line-height: 1.35; } #navbar .relative.group > div.absolute a span + span { margin-top: 1px; font-size: 0.625rem; line-height: 1.4; opacity: 0.62; } /* A small active rail gives each row a tactile edge without turning the whole menu into a stack of filled pills. The rail is also useful when a pointer is moving quickly through a long collection list. */ #navbar .relative.group > div.absolute a::before { content: ""; position: absolute; left: 1px; top: 0.625rem; bottom: 0.625rem; width: 2px; border-radius: 2px; background: var(--theme-menu-rail); opacity: 0; transform: scaleY(0); transform-origin: center; transition: opacity 0.16s ease, transform 0.24s var(--pnav-ease); } #navbar .relative.group > div.absolute a:hover, #navbar .relative.group > div.absolute a:focus-visible { background: var(--theme-menu-hover) !important; translate: 3px 0; } #navbar .relative.group > div.absolute a:hover::before, #navbar .relative.group > div.absolute a:focus-visible::before { opacity: 0.42; transform: scaleY(1); } /* ── Grouped columns ───────────────────────────────────────────────────── Each panel column is a stack of one or more labelled groups. The label replaces the per-row metadata caption these rows used to carry, which repeated "Long Form" six times and "Platform" three times and doubled every row's height for information that belongs to the group, not the item. */ /* Items rise in behind the panel; the whole cascade lands inside 130ms. Staggered per column with nth-of-type so the interleaved labels don't consume indices — both columns start together, which reads as the panel filling in rather than one column chasing the other. */ #navbar .relative.group > div.absolute .nav-menu-col > a, #navbar .relative.group > div.absolute .nav-menu-col > .nav-submenu > .nav-submenu-trigger { opacity: 0; translate: 0 5px; } /* These have to mirror the resting selector's shape, not just its intent: the resting rule below reaches through .nav-menu-col > .nav-submenu, so a shorter "open" selector loses on specificity and the row stays invisible. */ #navbar .relative.group:hover > div.absolute .nav-menu-col > a, #navbar .relative.group:focus-within > div.absolute .nav-menu-col > a, #navbar .relative.group.nav-dropdown-open > div.absolute .nav-menu-col > a, #navbar .relative.group:hover > div.absolute .nav-menu-col > .nav-submenu > .nav-submenu-trigger, #navbar .relative.group:focus-within > div.absolute .nav-menu-col > .nav-submenu > .nav-submenu-trigger, #navbar .relative.group.nav-dropdown-open > div.absolute .nav-menu-col > .nav-submenu > .nav-submenu-trigger { opacity: 1; translate: none; } #navbar .relative.group:hover > div.absolute .nav-menu-col > a:nth-of-type(1) { transition-delay: 10ms, 10ms, 0s; } #navbar .relative.group:hover > div.absolute .nav-menu-col > a:nth-of-type(2) { transition-delay: 22ms, 22ms, 0s; } #navbar .relative.group:hover > div.absolute .nav-menu-col > a:nth-of-type(3) { transition-delay: 34ms, 34ms, 0s; } #navbar .relative.group:hover > div.absolute .nav-menu-col > a:nth-of-type(4) { transition-delay: 46ms, 46ms, 0s; } #navbar .relative.group:hover > div.absolute .nav-submenu-trigger { transition-delay: 34ms, 34ms, 0s; } /* The drawer sits third in the Work column, so the link after it is fourth in reading order even though it is only the third . */ #navbar .relative.group:hover > div.absolute .nav-menu-col > .nav-submenu ~ a { transition-delay: 46ms, 46ms, 0s; } /* ── Collections drawer ──────────────────────────────────────────────── Collections is a grouping, not a destination, so it opens a nested panel instead of navigating. Folding it away is what lets the Work menu be a single narrow column of four entries rather than a two-column block. */ .nav-submenu { position: relative; } .nav-menu-col > .nav-submenu { margin-block: 0.25rem; padding-block: 0.25rem; border-block: 1px solid var(--theme-menu-hairline); } /* Geometry and the row transition come from the shared row rule above, which this trigger is listed in; only the type and cursor are its own. */ .nav-submenu-trigger { font-size: 0.875rem; line-height: 1.35; text-align: left; cursor: pointer; } .nav-submenu-chevron { width: 0.5625rem; height: 0.5625rem; flex: none; opacity: 0.4; transition: opacity var(--motion-fast) ease, translate var(--motion-base) var(--pnav-ease); } .nav-submenu:hover > .nav-submenu-trigger .nav-submenu-chevron, .nav-submenu:focus-within > .nav-submenu-trigger .nav-submenu-chevron { opacity: 0.75; translate: 2px 0; } #navbar .relative.group .nav-submenu-panel { position: absolute; /* Negative the panel's own padding, so the drawer's first row lines up with the trigger it opened from instead of sitting a few px high. */ top: -0.3125rem; /* Measured from inside the parent's padding and border, so this has to clear both before it buys any visible gap — at 0.5rem the two panels sat 2px apart and read as one shape that had been cut in half. This lands them ~10px apart. */ left: calc(100% + 0.75rem); z-index: 2; display: flex; flex-direction: column; gap: 0.125rem; width: 16rem; } /* Keep the hidden state lower-specificity than the open state. The geometry rule above needs the navbar hook to beat the old page-level framing, but the state rule must still be overridable by `.is-open`. */ .nav-submenu-panel { opacity: 0; visibility: hidden; translate: -4px 0; scale: 0.96; transform-origin: left top; transition: opacity 0.18s var(--pnav-ease), visibility 0.18s var(--pnav-ease), translate var(--motion-base) var(--pnav-ease), scale var(--motion-base) var(--pnav-ease); } /* Bridges the gap between trigger and panel so diagonal travel doesn't cross dead space and collapse the whole menu on the way over. */ .nav-submenu-panel::before { content: ""; position: absolute; top: 0; bottom: 0; left: -0.75rem; width: 0.75rem; } .nav-submenu:hover > .nav-submenu-panel, .nav-submenu:focus-within > .nav-submenu-panel, .nav-submenu.is-open > .nav-submenu-panel { opacity: 1; visibility: visible; translate: none; scale: 1; } .nav-submenu.is-open > .nav-submenu-trigger, .nav-submenu:hover > .nav-submenu-trigger { background: var(--theme-menu-hover); } .nav-submenu-trigger:focus-visible { outline: 1px solid var(--theme-menu-hairline) !important; outline-offset: -1px; } .nav-submenu.is-open > .nav-submenu-trigger .nav-submenu-chevron { opacity: 0.75; translate: 2px 0; } /* Active entry: a short marker rail instead of a filled block. */ #navbar .relative.group > div.absolute a[aria-current="page"] { position: relative; background: transparent !important; } #navbar .relative.group > div.absolute a[aria-current="page"]:hover, #navbar .relative.group > div.absolute a[aria-current="page"]:focus-visible { background: var(--theme-menu-hover) !important; } #navbar .relative.group > div.absolute a[aria-current="page"]::before { opacity: 0.58; transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { #navbar .relative.group > div.absolute, #navbar .relative.group > div.absolute :is(.nav-menu-col, .nav-menu-row, .nav-menu-grid) > a, #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a::after, #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button::after { transition: none !important; transition-delay: 0ms !important; } #navbar .relative.group > div.absolute :is(.nav-menu-col, .nav-menu-row, .nav-menu-grid) > a { translate: none; opacity: 1; } } /* ── Grouped menu labels ─────────────────────────────────────────────────── Both the desktop dropdowns and the mobile sheet group their entries under a quiet label. This replaces the per-row metadata caption those rows used to carry, which repeated "Long Form" six times and "Platform" three times and doubled every row's height for information that describes the group rather than the item. Defined outside the breakpoint blocks because both surfaces use it; the columns it sits in are desktop-only. */ .nav-menu-label { margin: 0.5rem 0 0.125rem; padding-inline: 0.6875rem; font-size: 0.5625rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: currentColor; opacity: 0.42; } /* Desktop panel: stacked sections. Standalone destinations sit in their own rows; the Collections group is a 2-column block between them. The panel is a flex column so the sections keep the authored order — Unique Works and Onchain, then Collections, then Prints. */ .nav-menu-panel { display: flex; flex-direction: column; gap: 1px; } .nav-menu-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; } /* A label opening the panel shouldn't push away from its own padding. */ .nav-menu-panel > .nav-menu-label:first-child, #mobileMenu div[id$="Section"] .nav-menu-label:first-child { margin-top: 0.125rem; } /* Mobile: a standalone entry after a group needs an edge, or it reads as the last item of that group rather than a peer of the ones above it. */ #mobileMenu .nav-menu-standalone { margin-top: 0.375rem; border-top: 1px solid var(--pnav-rule-soft); padding-top: 0.75rem; } /* ── Mobile sheet ────────────────────────────────────────────────────────── Was a rounded card floating on a margin, with the sub-menus crammed into two columns that wrapped unevenly. Now it is a full-bleed sheet hanging off the bar, with one list column and a single row rhythm throughout. */ @media (max-width: 767px) { #mobileMenu { top: var(--pnav-h) !important; transition: transform 0.32s var(--pnav-ease), opacity 0.24s var(--pnav-ease), visibility 0.24s var(--pnav-ease) !important; } /* Match the bar's own surface in every theme — a sheet in a different colour from the bar it hangs off reads as two unrelated panels. Driven entirely from --theme-bg so navy and pastel no longer need their own copies of this rule. */ #mobileMenu > div { background: color-mix(in srgb, var(--theme-bg) 96%, transparent) !important; margin: 0 !important; border-radius: 0 !important; border-width: 0 0 1px 0 !important; border-bottom-color: var(--theme-sheet-hairline) !important; box-shadow: var(--theme-sheet-shadow) !important; max-height: calc(100dvh - var(--pnav-h)) !important; overscroll-behavior: contain; backdrop-filter: blur(22px) saturate(150%) !important; -webkit-backdrop-filter: blur(22px) saturate(150%) !important; } #mobileMenu > div > div { padding: 0 !important; gap: 0 !important; } /* Top-level rows */ #mobileMenu > div > div > a, #mobileMenu > div > div > button { width: 100%; min-height: 3.375rem; padding: 0 1.5rem !important; border-radius: 0 !important; border-width: 1px 0 0 0 !important; border-top-color: var(--pnav-rule-soft) !important; background: transparent !important; transform: none !important; transition: background-color 0.16s ease !important; } #mobileMenu > div > div > *:first-child { border-top-width: 0 !important; } #mobileMenu > div > div > a:active, #mobileMenu > div > div > button:active { background: color-mix(in srgb, currentColor 6%, transparent) !important; } /* Same treatment as the home page's nav list, which this sheet mirrors. */ #mobileMenu > div > div > a > span, #mobileMenu > div > div > button > span { font-size: 1.125rem; font-weight: 500; letter-spacing: normal; text-transform: none; } #mobileMenu > div > div > a[aria-current="page"] { position: relative; background: transparent !important; } #mobileMenu > div > div > a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 1.25rem; margin-top: -0.625rem; border-radius: 0 2px 2px 0; background: currentColor; opacity: 0.8; } #mobileMenu > div > div > button > svg { width: 0.75rem; height: 0.75rem; opacity: 0.45; /* Same as the desktop chevron: the accordion's open state rotates via `rotate`, so that is what has to be transitioned. */ transition: rotate 0.3s var(--pnav-ease); } /* Accordion panels */ #mobileMenu div[id$="Section"] { padding-left: 0 !important; transition: max-height 0.34s var(--pnav-ease) !important; } #mobileMenu div[id$="Section"] > div { display: block !important; margin: 0 0 0.5rem 1.5rem !important; padding-left: 0.875rem; border-left: 1px solid var(--pnav-rule-soft); } #mobileMenu div[id$="Section"] a { display: flex !important; flex-direction: row !important; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: 2.625rem; padding: 0.375rem 1.5rem 0.375rem 0 !important; border-radius: 0 !important; background: transparent !important; transform: none !important; opacity: 0; translate: 0 -4px; transition: opacity 0.2s ease, translate 0.28s var(--pnav-ease), background-color 0.16s ease !important; } #mobileMenu div[id$="Section"].mobile-section-open a { opacity: 1; translate: none; } /* nth-of-type, not nth-child: the group labels are interleaved

siblings and would otherwise consume indices, leaving later rows undelayed. */ #mobileMenu div[id$="Section"].mobile-section-open a:nth-of-type(1) { transition-delay: 30ms; } #mobileMenu div[id$="Section"].mobile-section-open a:nth-of-type(2) { transition-delay: 44ms; } #mobileMenu div[id$="Section"].mobile-section-open a:nth-of-type(3) { transition-delay: 58ms; } #mobileMenu div[id$="Section"].mobile-section-open a:nth-of-type(4) { transition-delay: 72ms; } #mobileMenu div[id$="Section"].mobile-section-open a:nth-of-type(5) { transition-delay: 86ms; } #mobileMenu div[id$="Section"].mobile-section-open a:nth-of-type(6) { transition-delay: 100ms; } #mobileMenu div[id$="Section"].mobile-section-open a:nth-of-type(7) { transition-delay: 112ms; } #mobileMenu div[id$="Section"].mobile-section-open a:nth-of-type(8) { transition-delay: 122ms; } #mobileMenu div[id$="Section"].mobile-section-open a:nth-of-type(9) { transition-delay: 130ms; } #mobileMenu div[id$="Section"].mobile-section-open a:nth-of-type(10) { transition-delay: 136ms; } #mobileMenu div[id$="Section"].mobile-section-open a:nth-of-type(11) { transition-delay: 140ms; } #mobileMenu div[id$="Section"] a:active { background: color-mix(in srgb, currentColor 6%, transparent) !important; } /* Title left, category right — one line each, clipped rather than wrapped. */ #mobileMenu div[id$="Section"] a > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #mobileMenu div[id$="Section"] a > span:first-child { flex: 1 1 auto; min-width: 0; font-size: 0.9375rem; line-height: 1.4; } #mobileMenu div[id$="Section"] a > span + span { flex: 0 0 auto; max-width: 45%; font-size: 0.5625rem; line-height: 1.4; opacity: 0.55; } #mobileMenu div[id$="Section"] a[aria-current="page"] { position: relative; background: transparent !important; } #mobileMenu div[id$="Section"] a[aria-current="page"]::before { content: ""; position: absolute; left: -0.875rem; top: 50%; width: 2px; height: 1.125rem; margin-top: -0.5625rem; background: currentColor; opacity: 0.8; } } @media (max-width: 767px) and (prefers-reduced-motion: reduce) { #mobileMenu, #mobileMenu div[id$="Section"], #mobileMenu div[id$="Section"] a { transition: none !important; transition-delay: 0ms !important; } #mobileMenu div[id$="Section"] a { opacity: 1; translate: none; } } /* ========== SCROLL PROGRESS INDICATOR ========== */ #scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, #121212, #666); z-index: 9998; transform: scaleX(0); transition: transform 0.08s linear; transform-origin: left; will-change: transform; } .dark #scroll-progress { background: linear-gradient(90deg, #ECEBDD, #999); } /* ========== BACK TO TOP BUTTON ========== */ #back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; border-radius: 50%; background: #121212; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.8); transition: opacity 0.18s var(--ease-out-expo), visibility 0.18s var(--ease-out-expo), transform 0.22s var(--ease-out-expo), background 0.16s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; } .dark #back-to-top { background: #ECEBDD; color: #121212; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } #back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } #back-to-top:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .dark #back-to-top:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); } #back-to-top:active { transform: translateY(-2px) scale(1); } #back-to-top svg { width: 20px; height: 20px; transition: transform 0.18s var(--ease-out-expo); } #back-to-top:hover svg { transform: translateY(-2px); } /* ========== ENHANCED THEME TOGGLE ========== */ .theme-toggle-enhanced { position: relative; overflow: hidden; /* Guarantee a 40x40 tap target without shifting surrounding layout. */ min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle-enhanced svg { transition: transform 0.24s var(--ease-out-expo), opacity 0.18s ease; } .theme-toggle-enhanced .sun-icon { opacity: 1; } .theme-toggle-enhanced .moon-icon, .theme-toggle-enhanced .palette-icon, .theme-toggle-enhanced .prism-icon { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg); } /* Hover effects: explicit selectors prevent absolute transform/translate overrides */ .theme-toggle-enhanced:hover .sun-icon { transform: rotate(20deg) scale(1.1); } .theme-toggle-enhanced:hover .moon-icon, .theme-toggle-enhanced:hover .palette-icon, .theme-toggle-enhanced:hover .prism-icon { transform: translate(-50%, -50%) rotate(20deg) scale(1.1); } /* Dark theme toggle state (excluding Navy) */ html.dark:not(.navy) .theme-toggle-enhanced .sun-icon { opacity: 0; transform: rotate(90deg); } html.dark:not(.navy) .theme-toggle-enhanced .moon-icon { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); } /* Navy theme toggle state */ html.navy .theme-toggle-enhanced .sun-icon, html.navy .theme-toggle-enhanced .moon-icon { opacity: 0; transform: translate(-50%, -50%) rotate(30deg); } html.navy .theme-toggle-enhanced .palette-icon { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); } /* Pastel theme toggle state */ html.pastel .theme-toggle-enhanced .sun-icon, html.pastel .theme-toggle-enhanced .moon-icon, html.pastel .theme-toggle-enhanced .palette-icon { opacity: 0; transform: translate(-50%, -50%) rotate(30deg); } html.pastel .theme-toggle-enhanced .prism-icon { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); } html.pastel .theme-toggle-enhanced { color: var(--pastelle-pastel-accent) !important; background-color: transparent !important; box-shadow: none !important; } html.pastel .theme-toggle-enhanced:hover { color: var(--pastelle-pastel-ink) !important; background-color: transparent !important; box-shadow: none !important; } /* Position indicator: one dot per theme in the light > dark > navy > pastel cycle. Absolutely positioned so it never affects the button's box. */ .theme-toggle-enhanced .theme-toggle-dots { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; gap: 2px; pointer-events: none; line-height: 0; } .theme-toggle-enhanced .theme-toggle-dots i { width: 3px; height: 3px; border-radius: 50%; background-color: currentColor; opacity: 0.22; transition: opacity 0.18s ease; } .theme-toggle-enhanced .theme-toggle-dots[data-active="0"] i:nth-child(1), .theme-toggle-enhanced .theme-toggle-dots[data-active="1"] i:nth-child(2), .theme-toggle-enhanced .theme-toggle-dots[data-active="2"] i:nth-child(3), .theme-toggle-enhanced .theme-toggle-dots[data-active="3"] i:nth-child(4) { opacity: 0.9; } @media (prefers-reduced-motion: reduce) { .theme-toggle-enhanced .theme-toggle-dots i { transition: none; } } /* ========== LONG-FORM COLLECTION PAGES ========== */ /* Long-form pages paint their own page field; one token-driven rule covers light, dark, navy and pastel. */ body.collection-page, body.orbital-page { background: var(--theme-bg) !important; } .collection-page .collection-hero { padding-top: 0 !important; } .collection-page .collection-hero h1 { font-size: clamp(2.75rem, 7vw, 6.25rem) !important; line-height: 0.95 !important; letter-spacing: -0.025em !important; text-wrap: balance; } .collection-page .collection-hero > div > .flex:first-of-type > span, .collection-page .collection-hero > div > .flex:last-child > p { display: none !important; } .collection-page .collection-hero a { font-variant-numeric: tabular-nums; } .collection-page .collection-hero p { max-width: 52rem; line-height: 1.45; } .collection-page .collection-hero .h-px { opacity: 0.16 !important; } .collection-page .collection-live { margin-top: clamp(1.25rem, 3vw, 3rem); padding-top: clamp(2rem, 4vw, 4.5rem) !important; padding-bottom: clamp(3rem, 6vw, 6rem) !important; } /* Palette is split out and carries the `html body` prefix so it also wins against the per-theme `.bg-neutral-*` overrides at the end of this file. */ html body.collection-page .collection-live { background: color-mix(in srgb, var(--theme-live-bg) 88%, transparent) !important; border-top: 1px solid var(--theme-live-hairline); border-bottom: 1px solid var(--theme-live-hairline); } .collection-page .collection-gallery { scroll-margin-top: 6rem; } .collection-scroll-indicator { position: fixed; left: 50%; bottom: 1.2rem; z-index: 45; display: inline-flex; align-items: center; gap: 0.55rem; transform: translateX(-50%); padding: 0.55rem 0.72rem 0.55rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(19, 18, 10, 0.72); color: rgba(255, 255, 255, 0.82); box-shadow: 0 14px 42px rgba(0, 0, 0, 0.24); backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.62rem; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .collection-scroll-indicator::after { content: ""; width: 0.42rem; height: 0.42rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); animation: collection-scroll-cue 1.4s ease-in-out infinite; } .collection-scroll-indicator:hover, .collection-scroll-indicator:focus-visible { color: #fff; border-color: rgba(255, 255, 255, 0.32); transform: translateX(-50%) translateY(-2px); } html:not(.dark) .collection-scroll-indicator { border-color: rgba(18, 18, 18, 0.12); background: rgba(236, 235, 221, 0.82); color: rgba(18, 18, 18, 0.74); box-shadow: 0 14px 38px rgba(18, 18, 18, 0.14); } html:not(.dark) .collection-scroll-indicator:hover, html:not(.dark) .collection-scroll-indicator:focus-visible { color: #121212; border-color: rgba(18, 18, 18, 0.28); } @keyframes collection-scroll-cue { 0%, 100% { translate: 0 -1px; opacity: 0.65; } 50% { translate: 0 3px; opacity: 1; } } .collection-page .collection-live .grid { display: flex !important; flex-direction: column !important; align-items: center !important; gap: clamp(1.25rem, 3vw, 2.25rem) !important; } .collection-page .collection-live .grid > :first-child { order: 2; width: 100% !important; max-width: min(100%, 980px, calc(100dvh - 5rem)) !important; display: flex !important; justify-content: center !important; } .collection-page .collection-live .grid > :last-child { order: 1; width: 100% !important; display: flex !important; justify-content: center !important; } .collection-page .collection-live h2 { display: none !important; } .collection-page .collection-live .grid > :first-child > .p-4 { width: min(100%, 32rem); text-align: center; background: rgba(255, 255, 255, 0.54); } .dark .collection-page .collection-live .grid > :first-child > .p-4 { background: rgba(255, 255, 255, 0.035); } .collection-live-title-page .collection-hero { display: none !important; } .collection-live-title-page .collection-live { margin-top: 0 !important; padding-top: 0 !important; } .collection-live-title-page .collection-live .grid { display: grid !important; grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 1.45fr); grid-template-rows: auto auto; align-items: center !important; column-gap: clamp(2rem, 5vw, 6rem) !important; row-gap: clamp(1rem, 2vw, 1.75rem) !important; } .collection-live-title-page .collection-live-copy { grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: start; width: 100% !important; max-width: 38rem !important; display: block !important; } .collection-live-title-page .collection-live-copy h1 { font-size: clamp(3rem, 5.4vw, 6.75rem) !important; line-height: 0.92 !important; letter-spacing: -0.03em !important; text-wrap: balance; } .collection-live-title-page .collection-live .grid > .collection-live-copy + div { grid-column: 2; grid-row: 2; align-self: start; justify-self: end; width: min(100%, 980px, calc(100dvh - 5rem)) !important; max-width: min(100%, 980px, calc(100dvh - 5rem)) !important; display: flex !important; justify-content: center !important; } .collection-live-title-page .collection-live .grid > .collection-live-copy + div:not(:has(.p-4)) { display: none !important; } .collection-live-title-page .collection-live .grid > :last-child { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; width: 100% !important; display: flex !important; justify-content: flex-end !important; } .collection-live-title-page .collection-live-frame { margin-left: auto !important; margin-right: 0 !important; } .collection-page .collection-live-frame { max-width: min(100%, 980px, calc(100dvh - 5rem)) !important; margin-left: auto !important; margin-right: auto !important; border-radius: 6px !important; } /* Palette only — kept off the geometry rule above so the margin overrides in .collection-live-title-page and the width media queries still win. */ html body.collection-page .collection-live-frame { border: 1px solid var(--theme-frame-hairline) !important; background: var(--theme-frame-bg) !important; box-shadow: var(--theme-frame-shadow) !important; } .collection-page .collection-live-frame iframe { display: block; background: #fff; } .collection-page .collection-gallery { padding-top: clamp(5rem, 8vw, 9rem) !important; padding-bottom: clamp(6rem, 9vw, 10rem) !important; } .collection-page .collection-gallery > .text-center, .collection-page .collection-gallery > .text-left { text-align: left !important; max-width: 58rem; margin-left: 0 !important; margin-right: auto !important; margin-bottom: clamp(3rem, 6vw, 6rem) !important; } .collection-page .collection-gallery h2 { font-size: clamp(2.5rem, 6vw, 6rem) !important; line-height: 0.95 !important; letter-spacing: -0.035em !important; font-weight: 500 !important; text-wrap: balance; } html body.collection-page .collection-gallery p { max-width: 44rem !important; margin-left: 0 !important; margin-right: auto !important; color: var(--theme-copy-muted) !important; line-height: 1.65 !important; } .collection-page .collection-gallery .grid, .collection-page .collection-gallery #galleryGrid, .collection-page .collection-gallery #gallery-grid { gap: clamp(1rem, 2vw, 2rem) !important; } .collection-page .gallery-item { cursor: zoom-in; border-radius: 4px; transition: transform 0.35s var(--ease-out-expo), opacity 0.25s ease !important; } .collection-page .gallery-item:hover { transform: translateY(-3px); } .collection-page .gallery-item > .relative, .collection-page .gallery-item .aspect-ratio-box { border-radius: 4px !important; margin-bottom: 0 !important; background: #ecebe2 !important; border: 1px solid rgba(18, 18, 18, 0.075); /* Stacked to match the elevation ramps in the theme tokens — this was the last single-blur shadow left on a raised surface. */ box-shadow: 0 25px 50px rgba(18, 18, 18, 0.05), 0 12px 24px rgba(18, 18, 18, 0.04), 0 6px 12px rgba(18, 18, 18, 0.03), 0 3px 6px rgba(18, 18, 18, 0.02), 0 1.5px 3px rgba(18, 18, 18, 0.02); } .dark .collection-page .gallery-item > .relative, .dark .collection-page .gallery-item .aspect-ratio-box { background: #171713 !important; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.24), 0 12px 24px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.12), 0 1.5px 3px rgba(0, 0, 0, 0.09); } .collection-page .gallery-item img { transform-origin: center; transition: transform 0.75s var(--ease-out-expo), filter 0.45s ease !important; } .collection-page .gallery-item:hover img, .collection-page .gallery-item:focus-visible img { transform: scale(1.025) !important; filter: contrast(1.02); } /* ── Print cards ──────────────────────────────────────────────────────────── The Prints grid was the one gallery that never got this hover language — it only tinted an overlay, so a card gave no sense of being liftable even though clicking one opens a lightbox. Same vocabulary as .gallery-item above: a short lift on the card, a much slower settle on the image beneath it, so the picture drifts rather than snaps. The lift is deliberately the faster of the two — the card should answer the pointer immediately while the image is still moving. */ .print-card { cursor: zoom-in; transition: transform var(--motion-slow) var(--ease-out-expo); } .print-card:hover, .print-card:focus-visible { transform: translateY(-3px); } .print-card img { transform-origin: center; transition: transform 0.75s var(--ease-out-expo), filter 0.45s ease; } .print-card:hover img, .print-card:focus-visible img { transform: scale(1.025); filter: contrast(1.02); } .collection-page .collection-filter { top: 4.75rem !important; margin-bottom: clamp(2.5rem, 5vw, 5rem) !important; background: rgba(247, 246, 239, 0.82) !important; border-top: 1px solid rgba(18, 18, 18, 0.055); border-bottom: 1px solid rgba(18, 18, 18, 0.085) !important; } .dark .collection-page .collection-filter { background: rgba(16, 16, 13, 0.82) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .collection-page .collection-filter > div { justify-content: flex-start !important; } .collection-page .collection-filter .flex.p-1 { border-radius: 5px !important; background: rgba(18, 18, 18, 0.06) !important; padding: 3px !important; } .dark .collection-page .collection-filter .flex.p-1 { background: rgba(255, 255, 255, 0.08) !important; } .collection-page .collection-filter .filter-btn { border-radius: 3px !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.68rem !important; letter-spacing: 0.12em; text-transform: uppercase; } /* Orbital uses the same quiet, image-first rhythm as the Vasarely study page. Its page background is set with body.collection-page further up. */ .orbital-page .collection-hero { padding-top: 0 !important; } .orbital-page .collection-hero h1 { font-size: clamp(4.25rem, 11vw, 12rem) !important; font-weight: 700 !important; line-height: 0.78 !important; letter-spacing: -0.06em !important; } .orbital-page .orbital-title-row { display: flex; align-items: end; justify-content: space-between; min-height: 0; overflow: visible; } .orbital-page .orbital-title { position: relative; width: max-content; max-width: 100%; color: #fafafa; animation: orbital-title-reveal 900ms var(--ease-out-expo) both; } html:not(.dark) .orbital-page .orbital-title { color: #111; } .orbital-page .orbital-title::before { content: ""; position: absolute; left: 0.04em; right: -0.12em; bottom: -0.16em; z-index: -1; height: 1px; background: currentColor; opacity: 0.34; transform: scaleX(0); transform-origin: left center; animation: orbital-title-rule 900ms var(--ease-out-expo) 220ms both; } html:not(.dark) .orbital-page .orbital-title::before { opacity: 0.26; } @keyframes orbital-title-reveal { from { clip-path: inset(0 100% 0 0); letter-spacing: -0.025em; opacity: 0.72; transform: translateY(0.08em); } to { clip-path: inset(0 0 0 0); letter-spacing: -0.06em; opacity: 1; transform: translateY(0); } } @keyframes orbital-title-rule { to { transform: scaleX(1); } } .orbital-page .collection-gallery { padding-top: clamp(1.5rem, 3vw, 3rem) !important; } .orbital-page .collection-gallery #gallery-grid { --orbital-gap: clamp(0.9rem, 1.6vw, 1.75rem); display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: var(--orbital-gap) !important; } .orbital-page .gallery-item { cursor: pointer; min-width: 0; position: relative; overflow: hidden; border: 1px solid rgba(23, 23, 23, 0.075); background: rgba(245, 245, 240, 0.72); } .orbital-page .gallery-item.orbital-tile-small { --orbital-span: 3; } .orbital-page .gallery-item.orbital-tile-medium { --orbital-span: 4; } .orbital-page .gallery-item.orbital-tile-large { --orbital-span: 6; } .orbital-page .gallery-item.orbital-tile-feature { --orbital-span: 6; } .orbital-page .gallery-item.orbital-tile-wide { --orbital-span: 12; } .orbital-page .gallery-item.orbital-slot-1 { grid-column: 1 / span 6; grid-row: 1 / span 6; } .orbital-page .gallery-item.orbital-slot-2 { grid-column: 7 / span 3; grid-row: 1 / span 3; } .orbital-page .gallery-item.orbital-slot-3 { grid-column: 10 / span 3; grid-row: 1 / span 3; } .orbital-page .gallery-item.orbital-slot-4 { grid-column: 7 / span 3; grid-row: 4 / span 3; } .orbital-page .gallery-item.orbital-slot-5 { grid-column: 10 / span 3; grid-row: 4 / span 3; } .orbital-page .gallery-item.orbital-slot-6 { grid-column: 1 / span 4; grid-row: 7 / span 4; } .orbital-page .gallery-item.orbital-slot-7 { grid-column: 5 / span 4; grid-row: 7 / span 4; } .orbital-page .gallery-item.orbital-slot-8 { grid-column: 9 / span 4; grid-row: 7 / span 4; } .orbital-page .gallery-item.orbital-slot-9 { grid-column: 1 / span 6; grid-row: 11 / span 6; } .orbital-page .gallery-item.orbital-slot-10 { grid-column: 7 / span 6; grid-row: 11 / span 6; } .orbital-page .gallery-item > .relative { aspect-ratio: 1 / 1 !important; height: 100% !important; margin-bottom: 0 !important; background: rgba(245, 245, 240, 0.72) !important; box-shadow: none !important; border: 0 !important; } .dark .orbital-page .gallery-item { border-color: rgba(250, 250, 250, 0.08); background: rgba(20, 20, 17, 0.72); } .dark .orbital-page .gallery-item > .relative { background: rgba(20, 20, 17, 0.72) !important; box-shadow: none !important; } .orbital-page .gallery-item img { object-fit: contain !important; } .orbital-page .gallery-item [class*="bg-red-500"] { display: none !important; } .orbital-page .orbital-card-copy { display: flex; flex-direction: column; gap: 0.65rem; position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: clamp(0.8rem, 1.2vw, 1.15rem); background: linear-gradient(180deg, transparent, rgba(250, 250, 250, 0.88) 34%, rgba(250, 250, 250, 0.96)); opacity: 0; transform: translateY(0.4rem); transition: opacity 0.25s ease, transform 0.25s ease; } .dark .orbital-page .orbital-card-copy { background: linear-gradient(180deg, transparent, rgba(10, 10, 10, 0.78) 34%, rgba(10, 10, 10, 0.94)); } .orbital-page .gallery-item:hover .orbital-card-copy, .orbital-page .gallery-item:focus-within .orbital-card-copy { opacity: 1; transform: translateY(0); } .orbital-page .orbital-card-heading { display: block; } .orbital-page .orbital-card-title { min-width: 0; letter-spacing: 0; color: #171717; text-wrap: balance; } .dark .orbital-page .orbital-card-title { color: #fafafa; } .orbital-page .orbital-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .orbital-page .orbital-edition-label { flex: 0 0 auto; width: max-content; border: 1px solid rgba(212, 212, 212, 1); border-radius: 0.25rem; padding: 0.25rem 0.75rem; color: rgba(23, 23, 23, 0.76); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.75rem; letter-spacing: 0.12em; line-height: 1.1; text-transform: uppercase; } .dark .orbital-page .orbital-edition-label { border-color: rgba(64, 64, 64, 1); color: rgba(250, 250, 250, 0.56); } .orbital-page .gallery-item a[href*="superrare.com/artwork"] { width: max-content; border-radius: 0.25rem !important; background: transparent; line-height: 1.1; } .orbital-page .gallery-item a[href*="superrare.com/artwork"]:hover, .orbital-page .gallery-item a[href*="superrare.com/artwork"]:focus-visible { background: #171717 !important; color: #fff !important; } .dark .orbital-page .gallery-item a[href*="superrare.com/artwork"]:hover, .dark .orbital-page .gallery-item a[href*="superrare.com/artwork"]:focus-visible { background: #fafafa !important; color: #0a0a0a !important; } @media (min-width: 1024px) { .orbital-page .gallery-item.orbital-tile-small .orbital-card-copy { padding: 0.8rem; } .orbital-page .gallery-item.orbital-tile-small .orbital-card-title { font-size: 1rem !important; } .orbital-page .gallery-item.orbital-tile-small .orbital-card-actions { align-items: flex-start; flex-direction: column; gap: 0.5rem; } } .orbital-page .modal-content { max-width: min(1180px, calc(100vw - 2rem)) !important; } .orbital-page .modal-image { box-shadow: none !important; } .orbital-page .modal-title { font-weight: 500 !important; letter-spacing: -0.02em; } .orbital-page .modal-details { color: rgba(23, 23, 23, 0.62) !important; } .dark .orbital-page .modal-details { color: rgba(250, 250, 250, 0.66) !important; } .orbital-page .modal-buttons a { border-radius: 3px !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.7rem !important; letter-spacing: 0.12em; text-transform: uppercase; } html body.collection-page .lightbox, html body.collection-page .modal-overlay { background: var(--theme-scrim) !important; backdrop-filter: blur(22px) !important; } html body.collection-page .lightbox > div[onclick], html body.collection-page .lightbox-stage, html body.collection-page .modal-content { border-radius: 6px !important; border: 1px solid var(--theme-modal-hairline) !important; background: var(--theme-modal-bg) !important; box-shadow: var(--theme-modal-shadow) !important; } .collection-page footer { background: var(--theme-cfooter-bg) !important; color: var(--theme-cfooter-ink) !important; border-top: 1px solid var(--theme-cfooter-hairline) !important; } @media (min-width: 1024px) { .collection-page .collection-live-frame { margin-left: auto !important; margin-right: auto !important; } .collection-live-title-page .collection-live-frame { margin-left: auto !important; margin-right: 0 !important; } } @media (max-width: 767px) { .collection-page .collection-hero > div > .flex { align-items: flex-start !important; flex-direction: column !important; } .collection-page .collection-hero a { align-self: flex-start; } .collection-page .collection-live h2 { max-width: none; } .collection-page .collection-live-frame { max-width: 100% !important; } .collection-live-title-page .collection-live { padding-top: 0 !important; } .collection-live-title-page .collection-live .grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 1.25rem !important; } .collection-live-title-page .collection-live-copy { grid-column: 1; grid-row: 1; } .collection-live-title-page .collection-live-copy h1 { font-size: clamp(3.25rem, 18vw, 5.5rem) !important; } .collection-live-title-page .collection-live .grid > :last-child { grid-column: 1; grid-row: 2; justify-content: center !important; } .collection-live-title-page .collection-live .grid > .collection-live-copy + div { grid-column: 1; grid-row: 3; justify-self: center; } .collection-live-title-page .collection-live-frame { margin-left: auto !important; margin-right: auto !important; } .collection-scroll-indicator { bottom: 0.85rem; padding: 0.5rem 0.66rem 0.5rem 0.78rem; font-size: 0.58rem; } .collection-page .collection-gallery .grid, .collection-page .collection-gallery #galleryGrid, .collection-page .collection-gallery #gallery-grid { gap: 0.9rem !important; } .orbital-page .collection-hero h1 { font-size: clamp(4.5rem, 24vw, 7.5rem) !important; line-height: 0.82 !important; } .orbital-page .collection-gallery { padding-top: clamp(3rem, 16vw, 5rem) !important; } .orbital-page .collection-gallery #gallery-grid { --orbital-gap: clamp(1.1rem, 5vw, 1.5rem); grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: clamp(1.5rem, 8vw, 2.25rem) !important; } .orbital-page .gallery-item, .orbital-page .gallery-item.orbital-tile-small, .orbital-page .gallery-item.orbital-tile-medium, .orbital-page .gallery-item.orbital-tile-large, .orbital-page .gallery-item.orbital-tile-feature, .orbital-page .gallery-item.orbital-tile-wide, .orbital-page .gallery-item[class*="orbital-slot-"] { --orbital-span: 6; grid-column: 1 / -1; grid-row: auto / span 6; } .orbital-page .orbital-card-actions { align-items: flex-start; flex-direction: column; gap: 0.55rem; } } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { .collection-scroll-indicator::after { animation: none; } .orbital-page .orbital-title, .orbital-page .orbital-title::before { animation: none; } .orbital-page .orbital-title { clip-path: none; opacity: 1; transform: none; } .orbital-page .orbital-title::before { transform: scaleX(1); } } /* ========================================= NAVY + PASTEL THEME OVERRIDES Must be at the end of the file so they win over the Dark mode styles (.dark / html.dark) that navy also matches. Both themes reskin the same set of Tailwind utilities, so the selectors are shared and every value comes from the theme tokens at the top of this file. Only genuinely theme-specific declarations are written out per theme below. ========================================= */ html.navy { background-color: #061830 !important; color-scheme: dark; /* Redefine Tailwind v4 theme variables for Navy mode */ --color-neutral-50: #061830; --color-neutral-100: #0b2240; --color-neutral-200: rgba(220, 235, 255, 0.14); --color-neutral-300: rgba(220, 235, 255, 0.2); --color-neutral-700: rgba(220, 235, 255, 0.6); --color-neutral-800: rgba(220, 235, 255, 0.14); --color-neutral-900: #0b2240; --color-neutral-950: #061830; } html.pastel { background-color: var(--pastelle-pastel-bg) !important; color-scheme: light; --color-neutral-50: var(--pastelle-pastel-bg); --color-neutral-100: var(--pastelle-pastel-surface); --color-neutral-200: var(--pastelle-pastel-hairline); --color-neutral-300: color-mix(in srgb, var(--pastelle-pastel-ink) 20%, transparent); --color-neutral-700: var(--pastelle-pastel-muted); --color-neutral-800: color-mix(in srgb, var(--pastelle-pastel-ink) 74%, var(--pastelle-pastel-bg) 26%); --color-neutral-900: var(--pastelle-pastel-ink); --color-neutral-950: color-mix(in srgb, var(--pastelle-pastel-ink) 82%, black 18%); } html.navy body, html.pastel body { background-color: var(--theme-bg) !important; } html.navy body { color: #fff; } html.pastel body { color: var(--pastelle-pastel-ink) !important; } @media (prefers-reduced-motion: no-preference) { html.pastel body, html.pastel #navbar > .absolute, html.pastel #navbar .group .absolute > div, html.pastel #mobileMenu > div, html.pastel .bg-neutral-50, html.pastel .bg-neutral-100, html.pastel .dark\:bg-neutral-950, html.pastel .dark\:bg-neutral-900 { transition: background-color 260ms var(--ease-out-expo), color 260ms var(--ease-out-expo), border-color 260ms var(--ease-out-expo), box-shadow 260ms var(--ease-out-expo); } html.pastel.pastel-settling body { animation: pastel-color-settle 240ms var(--ease-out-expo) both; } } @keyframes pastel-color-settle { 0% { filter: saturate(0.9) brightness(1.04); } 55% { filter: saturate(1.08) brightness(1.01); } 100% { filter: saturate(1) brightness(1); } } html.pastel ::selection { background: color-mix(in srgb, var(--pastelle-pastel-accent) 22%, transparent); color: var(--pastelle-pastel-ink); } /* ── Fixed chrome ──────────────────────────────────────────────────────── The navbar shell, its scrolled state and the mobile sheet are now driven from --theme-bg in the base rules further up, so nothing theme-specific is needed here. Only the pieces the base rules do not own remain. */ html.navy #navbar .w-px.h-4, html.pastel #navbar .w-px.h-4 { background-color: var(--theme-hairline) !important; } html.navy #navbar .group .absolute > div a:hover, html.pastel #navbar .group .absolute > div a:hover { background: var(--theme-menu-hover) !important; color: var(--theme-accent) !important; } html.navy #mobileMenu :is(button, a), html.pastel #mobileMenu :is(button, a) { color: var(--theme-ink) !important; } html.navy #mobileMenu :is(button, a):hover, html.pastel #mobileMenu :is(button, a):hover { background-color: var(--theme-hover-soft) !important; color: var(--theme-accent) !important; } /* ── Long-form page surfaces ───────────────────────────────────────────── collection-live, collection-live-frame, the lightbox/modal panels and the page footer are all token-driven in the base rules above and need no navy/pastel copies. */ html.navy .collection-scroll-indicator, html.pastel .collection-scroll-indicator { background: var(--theme-menu-bg) !important; border-color: var(--theme-hairline) !important; } html.navy .collection-scroll-indicator { color: rgba(220, 235, 255, 0.82) !important; } html.pastel .collection-scroll-indicator { color: var(--pastelle-pastel-muted) !important; } /* ── Tailwind utility reskins ──────────────────────────────────────────── One rule per utility group per property, shared by both themes. */ html.navy .bg-neutral-50, html.navy .dark\:bg-neutral-950, html.navy .bg-neutral-950, html.navy section.bg-neutral-50, html.navy section.dark\:bg-neutral-950, html.pastel .bg-neutral-50, html.pastel .dark\:bg-neutral-950, html.pastel .bg-neutral-950, html.pastel section.bg-neutral-50, html.pastel section.dark\:bg-neutral-950 { background-color: var(--theme-bg) !important; } html.navy .bg-neutral-100, html.navy .dark\:bg-neutral-900, html.navy .bg-neutral-900, html.pastel .bg-neutral-100, html.pastel .dark\:bg-neutral-900, html.pastel .bg-neutral-900, html.pastel .bg-white { background-color: var(--theme-surface) !important; } html.navy .border-neutral-200, html.navy .dark\:border-neutral-800, html.navy .dark\:border-neutral-700, html.navy .border-neutral-200\/50, html.navy .dark\:border-neutral-800\/50, html.pastel .border-neutral-200, html.pastel .dark\:border-neutral-800, html.pastel .dark\:border-neutral-700, html.pastel .border-neutral-200\/50, html.pastel .dark\:border-neutral-800\/50 { border-color: var(--theme-hairline) !important; } html.navy .bg-neutral-200\/50, html.navy .dark\:bg-neutral-800\/50, html.pastel .bg-neutral-200\/50, html.pastel .dark\:bg-neutral-800\/50 { background-color: var(--theme-chip-bg) !important; } html.navy .hover\:bg-neutral-200\/50:hover, html.navy .dark\:hover\:bg-neutral-800\/50:hover, html.pastel .hover\:bg-neutral-200\/50:hover, html.pastel .dark\:hover\:bg-neutral-800\/50:hover { background-color: var(--theme-hover-strong) !important; } html.navy .text-neutral-900, html.navy .dark\:text-white, html.pastel .text-neutral-900, html.pastel .dark\:text-white { color: var(--theme-ink) !important; } /* .text-neutral-700 / .text-neutral-500 / .text-neutral-400 are handled once for every theme by the TEXT READABILITY block at the end of this file (html.navy body … / html.pastel body …), which outranks anything written here — the old per-theme copies were dead weight. */ html.navy ::-webkit-scrollbar-thumb { background: #0f3566; } html.pastel ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pastelle-pastel-ink) 42%, var(--pastelle-pastel-bg) 58%); } html.navy .custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(220, 235, 255, 0.2); } html.pastel .custom-scrollbar::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--pastelle-pastel-ink) 22%, transparent); } html.navy .skeleton, html.navy img[loading="lazy"]:not([src]) { background: linear-gradient( 90deg, #0b2240 0px, #0f3566 40px, #0b2240 80px ); background-size: 200px 100%; } html.pastel .skeleton, html.pastel img[loading="lazy"]:not([src]) { background: linear-gradient( 90deg, var(--pastelle-pastel-surface) 0px, color-mix(in srgb, var(--pastelle-pastel-accent) 14%, var(--pastelle-pastel-bg) 86%) 40px, var(--pastelle-pastel-surface) 80px ); background-size: 200px 100%; } /* ── Pastel-only accents ─────────────────────────────────────────────── */ html.pastel a:hover, html.pastel .hover\:text-neutral-900:hover, html.pastel .dark\:hover\:text-white:hover { color: var(--pastelle-pastel-accent) !important; } html.pastel :focus-visible { outline-color: var(--pastelle-pastel-accent) !important; } /* Menu focus remains visible without reintroducing the pastel theme's bright accent ring. The menu hairline is intentionally darker and quieter. */ html.pastel #navbar-inner .relative.group > button:focus-visible, html.pastel #navbar .nav-submenu-trigger:focus-visible { outline-color: var(--theme-menu-hairline) !important; } html.pastel #scroll-progress { background: linear-gradient(90deg, var(--pastelle-pastel-ink), var(--pastelle-pastel-accent)) !important; } /* ========================================= SHARED IMAGE MODAL + CAPSULE TABS Progressive interaction primitives used by galleries and filters. ========================================= */ [data-image-modal-trigger] { cursor: pointer; } [data-image-modal-overlay] { overscroll-behavior: contain; } [data-image-modal-overlay] :is( [data-image-modal-media], .modal-main-image img, #modalImage, .modal-image-col img ) { backface-visibility: hidden; transform: translateZ(0); } [data-ui-capsule].ui-capsule-group { position: relative !important; isolation: isolate; gap: 0 !important; padding: 3px !important; border: 1px solid var(--page-hairline, rgba(0, 0, 0, 0.1)) !important; border-radius: 9px !important; background: color-mix(in srgb, var(--page-panel, #f2f1ea) 86%, transparent) !important; } [data-ui-capsule] > .ui-capsule-indicator { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border: 1px solid color-mix( in srgb, var(--page-ink, #13120a) 10%, var(--page-hairline, rgba(0, 0, 0, 0.1)) ); border-radius: 6px; background: var(--page-panel-strong, #fff); box-shadow: 0 2px 8px color-mix(in srgb, var(--page-ink, #13120a) 8%, transparent); opacity: 0; pointer-events: none; transform-origin: left center; will-change: transform; } [data-ui-capsule][data-ui-capsule] > :is(button, [role="tab"]) { position: relative; z-index: 1; border: 0 !important; background: transparent !important; transform: none !important; } [data-ui-capsule][data-ui-capsule] > :is(button, [role="tab"]):hover { background: color-mix(in srgb, var(--page-ink, #13120a) 5%, transparent) !important; transform: none !important; } [data-ui-capsule][data-ui-capsule] > :is( button.active, button[aria-pressed="true"], [role="tab"][aria-selected="true"] ) { background: transparent !important; color: var(--page-ink, #13120a) !important; transform: none !important; } [data-ui-tabs] [role="tabpanel"][hidden] { display: none !important; } @media (min-width: 1280px) { #category-expand-wrapper[data-ui-capsule] > .category-option-btn, #year-expand-wrapper[data-ui-capsule] > .year-option-btn { flex: 0 0 auto !important; width: auto !important; max-width: 9rem !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; border-right: 0 !important; opacity: 1 !important; overflow: visible !important; pointer-events: auto !important; } } @media (prefers-reduced-motion: reduce) { [data-ui-capsule] > .ui-capsule-indicator { will-change: auto; } } /* ========================================= SHARED SITE FOOTER One self-contained, theme-aware footer used across every page except the home page. Colours come from per-theme custom props so it adapts to light / dark / navy / pastel without page-local vars. ========================================= */ #site-footer { --footer-ink: #13120A; --footer-muted: var(--site-text-muted, rgba(19, 18, 10, 0.72)); --footer-hairline: rgba(19, 18, 10, 0.12); margin-top: clamp(3.5rem, 7vw, 8rem); padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(2.5rem, 5vw, 4.5rem); background: transparent; border-top: 1px solid var(--footer-hairline); color: var(--footer-ink); } .dark #site-footer { --footer-ink: #F6F1E3; --footer-muted: var(--site-text-muted, rgba(246, 241, 227, 0.74)); --footer-hairline: rgba(246, 241, 227, 0.13); } html.navy #site-footer { --footer-ink: #F4F8FF; --footer-muted: var(--site-text-muted, rgba(244, 248, 255, 0.78)); --footer-hairline: rgba(220, 235, 255, 0.15); } html.pastel #site-footer { --footer-ink: var(--pastelle-pastel-ink); --footer-muted: var(--site-text-muted, var(--pastelle-pastel-ink)); --footer-hairline: var(--pastelle-pastel-hairline); } .site-footer-inner { width: 100%; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 6rem); align-items: end; } @media (min-width: 768px) { .site-footer-inner { padding-left: 3rem; padding-right: 3rem; } } #site-footer a.footer-mark { display: inline-block; color: var(--footer-ink); font-size: clamp(2.8rem, 7vw, 9rem); font-weight: 700; line-height: 0.86; letter-spacing: -0.02em; text-decoration: none; } #site-footer .footer-note { max-width: 34rem; margin-top: 1.25rem; color: var(--footer-muted); font-size: 0.86rem; line-height: 1.65; } #site-footer .footer-links { display: grid; grid-template-columns: repeat(2, minmax(6rem, auto)); gap: 0.75rem 2.5rem; justify-items: start; font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; } #site-footer .footer-links a { color: var(--footer-muted); text-decoration: none; transition: color 0.18s ease, transform 0.18s ease; } #site-footer .footer-links a:hover { color: var(--footer-ink); transform: translate3d(3px, 0, 0); } @media (max-width: 767px) { .site-footer-inner { grid-template-columns: 1fr; align-items: start; } } /* ========================================= TEXT READABILITY Muted copy uses one readable hierarchy instead of compounded opacity. ========================================= */ html { --site-text-primary: #13120A; --site-text-secondary: rgba(19, 18, 10, 0.84); --site-text-muted: rgba(19, 18, 10, 0.72); --site-utility-text-opacity: 0.78; --site-chrome-background: #DAE1E1; /* Keep page-specific templates on the same readable text tokens. */ --page-muted: var(--site-text-muted) !important; --projects-muted: var(--site-text-muted) !important; --about-muted: var(--site-text-muted) !important; --res-muted: var(--site-text-muted) !important; } html.dark { --site-text-primary: #F6F1E3; --site-text-secondary: rgba(246, 241, 227, 0.86); --site-text-muted: rgba(246, 241, 227, 0.74); --site-chrome-background: #0F121B; } html.navy { --site-text-primary: #F4F8FF; --site-text-secondary: rgba(244, 248, 255, 0.88); --site-text-muted: rgba(244, 248, 255, 0.78); --site-chrome-background: #06142E; } html.pastel { --site-text-primary: var(--pastelle-pastel-ink); --site-text-secondary: var(--pastelle-pastel-ink); --site-text-muted: var(--pastelle-pastel-ink); --site-utility-text-opacity: 1; --site-chrome-background: color-mix(in srgb, var(--pastelle-pastel-bg) 96%, #000 4%); --pastelle-pastel-muted: var(--pastelle-pastel-ink) !important; } body { isolation: isolate; } /* Scroll state classes may add Tailwind's shadow utility to the navbar element itself. Keep the shared chrome edge clean in every theme. */ html:root body #navbar { box-shadow: none !important; } /* Pages with a secondary action bar use a persistent, condensed navbar. Both bars share the exact 4rem seam after scrolling, with no translucent gap. */ html body:has(:is(#controls-bar, .collection-controls)) #navbar.nav-hidden { transform: none !important; } html body:has(#navbar.scrolled) :is(#controls-bar, .collection-controls) { top: 4rem !important; } /* `overflow-x: hidden` creates a root scroll container on narrow layouts and disables position: sticky. Clip the unused horizontal overflow without changing the element that owns vertical scrolling. */ html:has(body :is(#controls-bar, .collection-controls)), html body:has(:is(#controls-bar, .collection-controls)) { overflow-x: clip !important; } /* Tailwind opacity utilities were being used at several different strengths for readable copy. Normalize only text-bearing elements; media, overlays, transitions, and decorative SVG opacity remain untouched. */ :is( p, a, button, span, label, li, dt, dd, small, time, figcaption, h1, h2, h3 )[class~="opacity-40"], :is( p, a, button, span, label, li, dt, dd, small, time, figcaption, h1, h2, h3 )[class~="opacity-50"], :is( p, a, button, span, label, li, dt, dd, small, time, figcaption, h1, h2, h3 )[class~="opacity-60"] { opacity: var(--site-utility-text-opacity) !important; } :is( p, a, button, span, label, li, dt, dd, small, time, figcaption )[class*="opacity-"]:is(:hover, :focus-visible) { opacity: 1 !important; } html body .text-neutral-700, html.dark body .dark\:text-neutral-300, html.navy body .text-neutral-700, html.navy body .dark\:text-neutral-300, html.pastel body .text-neutral-700, html.pastel body .dark\:text-neutral-300 { color: var(--site-text-secondary) !important; opacity: 1 !important; } html body .text-neutral-500, html body .text-neutral-400, html.dark body .dark\:text-neutral-400, html.dark body .dark\:text-neutral-500, html.navy body .text-neutral-500, html.navy body .text-neutral-400, html.navy body .dark\:text-neutral-400, html.navy body .dark\:text-neutral-500, html.pastel body .text-neutral-500, html.pastel body .text-neutral-400, html.pastel body .dark\:text-neutral-400, html.pastel body .dark\:text-neutral-500 { color: var(--site-text-muted) !important; opacity: 1 !important; } html body :is( .home-subtitle, .modal-subtitle, .detail-label, .entry-meta, .about-eyebrow, .about-addr, .collection-page .artwork-item p, .project-row p, #site-footer .footer-note, #site-footer .footer-links a ) { color: var(--site-text-muted) !important; opacity: 1 !important; } /* ======================================================================== Shared navbar interaction refinement Keep the established navbar geometry. The shared layer owns the desktop hover, panel, row, focus, and reduced-motion interaction without changing the markup or the JS state hooks. ======================================================================== */ :root { --pnav-h: 5rem; --pnav-control-h: 2.25rem; --pnav-trigger-hover: color-mix(in srgb, var(--theme-ink) 6%, transparent); --pnav-trigger-open: color-mix(in srgb, var(--theme-ink) 9%, transparent); --pnav-trigger-keyline: color-mix(in srgb, var(--theme-ink) 11%, transparent); --pnav-trigger-indicator: color-mix(in srgb, var(--theme-ink) 68%, transparent); --pnav-focus-ring: color-mix(in srgb, var(--theme-ink) 46%, transparent); --pnav-row-hover: color-mix(in srgb, var(--theme-ink) 7%, transparent); --pnav-row-active: color-mix(in srgb, var(--theme-ink) 11%, transparent); --pnav-panel-radius: 0.75rem; --pnav-row-radius: 0.4375rem; --pnav-motion-ease: cubic-bezier(0.2, 0.74, 0.24, 1); --pnav-hover-duration: 150ms; --pnav-panel-duration: 320ms; --pnav-row-duration: 260ms; --pnav-pointer-grace: 70ms; } #navbar { height: auto !important; } #navbar.scrolled { height: 4rem !important; } #navbar > .absolute { background: var(--theme-bg) !important; border-bottom: 0 !important; box-shadow: none !important; } #navbar.scrolled > .absolute { background: color-mix(in srgb, var(--theme-bg) 88%, transparent) !important; border-bottom-color: transparent !important; box-shadow: 0 1px 0 var(--theme-chrome-hairline) !important; backdrop-filter: blur(18px) saturate(var(--theme-chrome-saturate)) !important; -webkit-backdrop-filter: blur(18px) saturate(var(--theme-chrome-saturate)) !important; } #navbar-inner, #navbar.scrolled #navbar-inner { width: 100% !important; max-width: none !important; height: 5rem !important; padding-inline: 3rem !important; } #navbar.scrolled #navbar-inner { height: 4rem !important; } #navbar-inner > a:first-child, #navbar.scrolled #navbar-inner > a:first-child { font-size: 1.5rem !important; } #navbar-inner > div.hidden[class*="md:flex"] { gap: 2rem !important; flex: none; justify-content: initial; margin-left: 0; } #navbar-inner > div.hidden[class*="md:flex"] > div.flex { gap: 2rem !important; } /* Top-level controls stay transparent; their pseudo-element is the only hover/open/current material and is visually inset from the control box. */ html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button { height: auto !important; padding: 1rem 0 !important; border-radius: 0 !important; background: transparent !important; font-size: 0.9375rem !important; font-weight: 500 !important; letter-spacing: normal !important; text-transform: none !important; opacity: 1 !important; position: relative; isolation: isolate; translate: none !important; scale: none !important; transform: none !important; transition: color var(--pnav-hover-duration) ease, background-color var(--pnav-hover-duration) ease, opacity var(--pnav-hover-duration) ease !important; } html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a::before, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0.625rem; height: 1px; z-index: -1; border-radius: 999px; background: var(--pnav-trigger-indicator); box-shadow: none; opacity: 0; pointer-events: none; transform: scaleX(0); transform-origin: left center; transition: opacity var(--pnav-hover-duration) ease, transform 280ms var(--pnav-motion-ease); } html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a:hover, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a:focus-visible, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a[aria-current="page"], html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group:hover > button, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group:focus-within > button, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group.nav-dropdown-open > button, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button.nav-current { background: transparent !important; color: var(--theme-ink) !important; opacity: 1 !important; translate: none !important; scale: none !important; transform: none !important; } html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a:hover::before, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a:focus-visible::before, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a[aria-current="page"]::before, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group:hover > button::before, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group:focus-within > button::before, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group.nav-dropdown-open > button::before, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button.nav-current::before { opacity: 1; background: var(--pnav-trigger-indicator); transform: scaleX(1); } html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a:hover::before, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a:focus-visible::before { transform: scaleX(1); } html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a[aria-current="page"]::before, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group:hover > button::before, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group:focus-within > button::before, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group.nav-dropdown-open > button::before { background: var(--pnav-trigger-indicator); transform: scaleX(1); } html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a:focus-visible, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button:focus-visible { outline: none !important; outline-offset: 0; } html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a:focus-visible::before, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button:focus-visible::before { height: 2px; background: var(--pnav-focus-ring); box-shadow: none; } html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a::after, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button::after { content: none !important; display: none !important; } html body #navbar-inner .relative.group > button > svg { rotate: 0deg !important; transform-origin: center; transition: rotate var(--pnav-panel-duration) var(--pnav-motion-ease), opacity var(--pnav-hover-duration) ease !important; } html body #navbar-inner .relative.group:hover > button > svg, html body #navbar-inner .relative.group:focus-within > button > svg, html body #navbar-inner .relative.group.nav-dropdown-open > button > svg { rotate: 180deg !important; opacity: 0.78 !important; } html body #navbar .nav-submenu-chevron { translate: 0 0 !important; transition: translate var(--pnav-row-duration) var(--pnav-motion-ease), opacity var(--pnav-hover-duration) ease !important; } html body #navbar .nav-submenu:hover > .nav-submenu-trigger .nav-submenu-chevron, html body #navbar .nav-submenu:focus-within > .nav-submenu-trigger .nav-submenu-chevron, html body #navbar .nav-submenu.is-open > .nav-submenu-trigger .nav-submenu-chevron { translate: 3px 0 !important; opacity: 0.8 !important; } #navbar-inner > div.hidden[class*="md:flex"] > .w-px { display: block !important; } /* Preserve the theme-toggle box and its placement; only its existing quiet state styling is kept here, outside the top-level highlight selectors. */ #navbar-inner > div.hidden[class*="md:flex"] > button[aria-label="Toggle theme"] { width: auto !important; height: auto !important; min-width: 0 !important; margin-left: 0; padding: 0.5rem !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease !important; } #navbar-inner > div.hidden[class*="md:flex"] > button[aria-label="Toggle theme"]:hover, #navbar-inner > div.hidden[class*="md:flex"] > button[aria-label="Toggle theme"]:focus-visible { background: var(--theme-hover-soft) !important; opacity: 1 !important; } /* Outer panels use one conventional transform. Tailwind's translate/scale longhands are explicitly neutralised in both states, so the -50% anchor is composed exactly once. */ html body #navbar .relative.group > div.absolute { top: 100% !important; padding-top: 0 !important; max-width: calc(100vw - 2rem) !important; opacity: 0 !important; visibility: hidden !important; filter: none !important; clip-path: none !important; translate: none !important; scale: none !important; transform: translate3d(calc(-50% + var(--pnav-shift, 0px)), -0.5rem, 0) scaleY(0.9) !important; transform-origin: top center !important; transition: opacity var(--pnav-hover-duration) var(--pnav-ease), visibility var(--pnav-hover-duration) var(--pnav-ease), transform var(--pnav-panel-duration) var(--pnav-motion-ease) !important; transition-delay: var(--pnav-pointer-grace) !important; will-change: opacity, transform; } html body #navbar .relative.group:hover > div.absolute, html body #navbar .relative.group:focus-within > div.absolute, html body #navbar .relative.group.nav-dropdown-open > div.absolute { opacity: 1 !important; visibility: visible !important; filter: none !important; clip-path: none !important; translate: none !important; scale: none !important; transform: translate3d(calc(-50% + var(--pnav-shift, 0px)), 0, 0) scaleY(1) !important; transition-delay: 0ms !important; } #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group:first-child > div.absolute { width: 16rem !important; } #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group:last-child > div.absolute { width: 25rem !important; } /* Main and nested panels share the same opaque surface, hairline, radius, and diffuse elevation. */ html body #navbar .relative.group > div.absolute > div, html body #navbar .relative.group .nav-submenu-panel { border-radius: var(--pnav-panel-radius) !important; border: 1px solid var(--theme-menu-hairline) !important; background: var(--theme-menu-bg) !important; border-color: var(--theme-menu-hairline) !important; box-shadow: var(--theme-menu-shadow) !important; overflow: hidden !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* The parent surface must leave its side edge open for Collections to grow from that row; only the nested surface clips its own rounded corners. */ html body #navbar .relative.group > div.absolute > div { overflow: visible !important; } html body #navbar .relative.group .nav-submenu-panel { overflow: hidden !important; } /* Rows reveal vertically only; their labels never slide horizontally. */ html body #navbar .relative.group > div.absolute a, html body #navbar .relative.group > div.absolute .nav-submenu-trigger { min-height: var(--pnav-control-h); padding: 0.5rem 0.75rem !important; border-radius: var(--pnav-row-radius) !important; background: transparent !important; opacity: 0; translate: none !important; scale: none !important; transform: translate3d(0, -6px, 0) !important; transition: opacity var(--pnav-hover-duration) ease, transform var(--pnav-row-duration) var(--pnav-motion-ease), color var(--pnav-hover-duration) ease, background-color var(--pnav-hover-duration) ease !important; transition-delay: var(--pnav-row-delay, 0ms), var(--pnav-row-delay, 0ms), 0ms, 0ms !important; will-change: opacity, transform; } html body #navbar .relative.group > div.absolute a::before { content: none !important; display: none !important; } html body #navbar .relative.group:hover > div.absolute a, html body #navbar .relative.group:focus-within > div.absolute a, html body #navbar .relative.group.nav-dropdown-open > div.absolute a, html body #navbar .relative.group:hover > div.absolute .nav-submenu-trigger, html body #navbar .relative.group:focus-within > div.absolute .nav-submenu-trigger, html body #navbar .relative.group.nav-dropdown-open > div.absolute .nav-submenu-trigger { opacity: 1; translate: none !important; scale: none !important; transform: translate3d(0, 0, 0) !important; } html body #navbar .relative.group > div.absolute a:hover, html body #navbar .relative.group > div.absolute a:focus-visible, html body #navbar .nav-submenu:hover > .nav-submenu-trigger, html body #navbar .nav-submenu:focus-within > .nav-submenu-trigger { background: var(--pnav-row-hover) !important; color: var(--theme-ink) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-ink) 7%, transparent) !important; translate: none !important; scale: none !important; transform: translate3d(0, 0, 0) !important; } html body #navbar .relative.group > div.absolute a[aria-current="page"], html body #navbar .nav-submenu.is-open > .nav-submenu-trigger { background: var(--pnav-row-active) !important; color: var(--theme-ink) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-ink) 9%, transparent) !important; } html body #navbar .relative.group > div.absolute a:focus-visible, html body #navbar .nav-submenu-trigger:focus-visible { outline: 1px solid var(--pnav-focus-ring) !important; outline-offset: -2px; } /* A short cascade makes the panel feel assembled rather than simply shown. It stays capped so the long Collections drawer still resolves quickly. */ html body #navbar .relative.group > div.absolute a:nth-of-type(1) { --pnav-row-delay: 0ms; } html body #navbar .relative.group > div.absolute a:nth-of-type(2) { --pnav-row-delay: 18ms; } html body #navbar .relative.group > div.absolute a:nth-of-type(3) { --pnav-row-delay: 36ms; } html body #navbar .relative.group > div.absolute a:nth-of-type(4) { --pnav-row-delay: 54ms; } html body #navbar .relative.group > div.absolute a:nth-of-type(n + 5) { --pnav-row-delay: 72ms; } html body #navbar .relative.group > div.absolute .nav-submenu-trigger { --pnav-row-delay: 36ms; } html body #navbar .relative.group > div.absolute a span:first-child, html body #navbar .nav-submenu-trigger span { font-size: 0.875rem !important; line-height: 1.35 !important; } /* Collections keeps its existing side-selection and pointer bridge geometry; only its material and transform are shared with the parent panel. */ html body #navbar .nav-submenu-panel { top: -0.25rem !important; left: calc(100% + 0.35rem) !important; width: 17rem !important; opacity: 0 !important; visibility: hidden !important; translate: none !important; scale: none !important; transform: translate3d(-10px, 0, 0) scale(0.94) !important; transform-origin: left top !important; transition: opacity var(--pnav-hover-duration) var(--pnav-ease), visibility var(--pnav-hover-duration) var(--pnav-ease), transform var(--pnav-panel-duration) var(--pnav-motion-ease) !important; transition-delay: 0ms !important; will-change: opacity, transform; } html body #navbar .nav-submenu-panel::before { left: -0.35rem !important; width: 0.35rem !important; } html body #navbar .nav-submenu.nav-submenu-left > .nav-submenu-panel { left: auto !important; right: calc(100% + 0.35rem) !important; } html body #navbar .nav-submenu.nav-submenu-left > .nav-submenu-panel::before { left: auto !important; right: -0.35rem !important; } html body #navbar .nav-submenu:hover > .nav-submenu-panel, html body #navbar .nav-submenu:focus-within > .nav-submenu-panel, html body #navbar .nav-submenu.is-open > .nav-submenu-panel { opacity: 1 !important; visibility: visible !important; translate: none !important; scale: none !important; transform: translate3d(0, 0, 0) scale(1) !important; transition-delay: 0ms !important; } /* Nested rows have their own reveal. Without this reset they are already in their final state when the parent Work panel opens, so the side drawer feels like a flat second card instead of growing from Collections. */ html body #navbar .nav-submenu-panel a { opacity: 0 !important; transform: translate3d(-6px, 0, 0) !important; } html body #navbar .nav-submenu:hover > .nav-submenu-panel a, html body #navbar .nav-submenu:focus-within > .nav-submenu-panel a, html body #navbar .nav-submenu.is-open > .nav-submenu-panel a { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; } @media (max-width: 767px) { #navbar > .absolute, #navbar.scrolled > .absolute { background: var(--theme-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #navbar-inner, #navbar.scrolled #navbar-inner { padding-inline: 1.5rem !important; } #navbar-inner > a:first-child, #navbar.scrolled #navbar-inner > a:first-child { font-size: 1.5rem !important; } #navbar-inner > div[class*="md:hidden"] { gap: 1rem !important; } #navbar-inner > div[class*="md:hidden"] > button { width: auto !important; height: auto !important; min-width: 0 !important; padding: 0.5rem !important; border: 0 !important; border-radius: 0 !important; } #mobileMenu { top: var(--pnav-h) !important; } #mobileMenu > div { margin: 0.5rem 1rem 0 !important; border: 1px solid var(--theme-menu-hairline) !important; border-radius: 0.75rem !important; background: var(--theme-menu-bg) !important; box-shadow: var(--theme-menu-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #mobileMenu > div > div { padding: 1rem !important; } #mobileMenu > div > div > a, #mobileMenu > div > div > button { min-height: 0 !important; padding-inline: 0.75rem !important; border-radius: 0.5rem !important; border-top: 0 !important; } } @media (prefers-reduced-motion: reduce) { html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > a::before, html body #navbar-inner > div.hidden[class*="md:flex"] > div.flex > .group > button::before, html body #navbar .relative.group > div.absolute, html body #navbar .nav-submenu-panel, html body #navbar .relative.group > div.absolute a, html body #navbar .nav-submenu-trigger, html body #navbar .relative.group > button > svg, html body #navbar .nav-submenu-chevron { transition: none !important; transition-delay: 0ms !important; } } /* The home page's accordion sub-items own their own resting/hover opacity (see the inline styles in index.html). They used to be normalised here as well, which outranked the page rule and killed the hover step. */ /* ======================================================================== Sol Medium UI refresh — final shared chrome overrides Keep the existing navbar state hooks and WebGL seam; refine only material, control feedback, focus treatment, and touch sizing. ======================================================================== */ :root { --pnav-panel-radius: 0.6875rem; --pnav-row-radius: 0.5rem; --pnav-control-h: 2.5rem; --pnav-hover-duration: 140ms; --pnav-panel-duration: 180ms; --pnav-row-duration: 150ms; --pnav-pointer-grace: 40ms; } html body #navbar .relative.group > div.absolute > div, html body #navbar .relative.group .nav-submenu-panel { border-radius: var(--pnav-panel-radius) !important; border-color: var(--theme-menu-hairline) !important; background: var(--theme-menu-bg) !important; box-shadow: var(--theme-menu-shadow) !important; } html body #navbar .relative.group > div.absolute a, html body #navbar .relative.group > div.absolute .nav-submenu-trigger { min-height: var(--pnav-control-h) !important; border-radius: var(--pnav-row-radius) !important; } html body #navbar :is(.theme-toggle-enhanced, [data-mobile-menu-trigger]) { min-width: 40px !important; min-height: 40px !important; border: 1px solid var(--theme-hairline) !important; border-radius: 0.625rem !important; background: color-mix(in srgb, var(--theme-surface) 72%, transparent) !important; color: var(--theme-ink) !important; opacity: 1 !important; transition: color var(--pnav-hover-duration) ease, background-color var(--pnav-hover-duration) ease, border-color var(--pnav-hover-duration) ease, transform var(--pnav-hover-duration) var(--pnav-motion-ease) !important; } html body #navbar :is(.theme-toggle-enhanced, [data-mobile-menu-trigger]):hover, html body #navbar :is(.theme-toggle-enhanced, [data-mobile-menu-trigger]):focus-visible { background: var(--theme-hover-soft) !important; border-color: var(--theme-menu-hairline) !important; transform: translate3d(0, -1px, 0) !important; } html body #navbar :is(.theme-toggle-enhanced, [data-mobile-menu-trigger]):active { transform: translate3d(0, 1px, 0) scale(0.98) !important; } html body #navbar :is( .theme-toggle-enhanced, [data-mobile-menu-trigger], .relative.group > div.absolute a, .nav-submenu-trigger ):focus-visible { outline: 1px solid var(--pnav-focus-ring) !important; outline-offset: 2px !important; } /* The controls keep their hit areas and focus rings, but their surfaces do not need visible boxes on either breakpoint. */ html body #navbar #navbar-inner .shadcn-theme-toggle, html body #navbar #navbar-inner .theme-toggle-enhanced { border: 0 !important; background: transparent !important; box-shadow: none !important; } html body #navbar #navbar-inner .shadcn-theme-toggle:hover, html body #navbar #navbar-inner .shadcn-theme-toggle:focus-visible, html body #navbar #navbar-inner .theme-toggle-enhanced:hover, html body #navbar #navbar-inner .theme-toggle-enhanced:focus-visible { border-color: transparent !important; background: transparent !important; } @media (max-width: 767px) { html body #mobileMenu > div { border-radius: var(--pnav-panel-radius) !important; } html body #mobileMenu > div > div > a, html body #mobileMenu > div > div > button { min-height: 40px !important; border-radius: var(--pnav-row-radius) !important; } } @media (prefers-reduced-motion: reduce) { html body #navbar :is(.theme-toggle-enhanced, [data-mobile-menu-trigger]) { transition: none !important; transform: none !important; } } /* shadcn Sera navigation menu, adapted to Pastelle's theme tokens. */ [data-shadcn-navigation] { flex: 1 1 auto; min-width: 22rem; min-height: 2.25rem; } .shadcn-mobile-nav { display: none; } .shadcn-navigation { position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; max-width: max-content; } .shadcn-nav-list { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; } .shadcn-nav-trigger, .shadcn-nav-top-link { display: inline-flex !important; position: relative; width: max-content; height: 2.25rem; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.625rem 1.125rem !important; border: 0; border-radius: 0 !important; background: transparent; font-size: 0.75rem !important; font-weight: 600 !important; line-height: 1; letter-spacing: 0.09em !important; text-transform: uppercase !important; outline: none; isolation: isolate; transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease; } .shadcn-nav-trigger:hover, .shadcn-nav-trigger:focus-visible, .shadcn-nav-top-link:hover, .shadcn-nav-top-link:focus-visible { background: var(--pnav-trigger-hover) !important; } .shadcn-nav-trigger[data-state="open"] { background: var(--pnav-trigger-open) !important; } .shadcn-nav-top-link[data-active] { background: transparent !important; } .shadcn-nav-trigger::after, .shadcn-nav-top-link::after { position: absolute; right: 0.75rem; bottom: 0.25rem; left: 0.75rem; z-index: -1; height: 1px; border-radius: 999px; background: var(--pnav-trigger-indicator); content: ""; opacity: 0; pointer-events: none; transform: scaleX(0); transform-origin: center; transition: opacity 180ms ease, transform 240ms var(--pnav-motion-ease); } .shadcn-nav-trigger:hover::after, .shadcn-nav-trigger:focus-visible::after, .shadcn-nav-top-link:hover::after, .shadcn-nav-top-link:focus-visible::after, .shadcn-nav-top-link[data-active]::after { opacity: 0.72; transform: scaleX(1); } .shadcn-nav-trigger[data-state="open"]::after { opacity: 0; transform: scaleX(0); } .shadcn-nav-trigger:focus-visible, .shadcn-nav-top-link:focus-visible, .shadcn-nav-link:focus-visible { outline: 1px solid var(--pnav-focus-ring) !important; outline-offset: 2px; } .shadcn-nav-trigger svg { position: relative; top: 1px; width: 0.75rem; height: 0.75rem; transition: transform 300ms var(--pnav-motion-ease); } .shadcn-nav-trigger[data-state="open"] svg { transform: rotate(180deg); } .shadcn-nav-content { position: absolute; top: 0; left: 0; width: max-content; padding: 0.625rem 0.75rem 0.75rem 0.625rem; animation-duration: var(--pnav-panel-duration); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .shadcn-nav-content[data-motion="from-start"] { animation-name: shadcn-nav-enter-left; } .shadcn-nav-content[data-motion="from-end"] { animation-name: shadcn-nav-enter-right; } .shadcn-nav-content[data-motion="to-start"] { animation-name: shadcn-nav-exit-left; } .shadcn-nav-content[data-motion="to-end"] { animation-name: shadcn-nav-exit-right; } .shadcn-nav-viewport-position { position: absolute; top: 100%; right: 0; z-index: 50; display: flex; justify-content: center; } .shadcn-nav-viewport { position: relative; width: var(--radix-navigation-menu-viewport-width); height: var(--radix-navigation-menu-viewport-height); margin-top: 0.375rem; overflow: hidden; border: 1px solid var(--theme-menu-hairline); border-radius: var(--pnav-panel-radius) !important; background: var(--theme-menu-bg); color: var(--theme-ink); box-shadow: var(--theme-menu-shadow); transform-origin: top center; transition: opacity var(--pnav-panel-duration) ease, transform var(--pnav-panel-duration) var(--pnav-motion-ease); will-change: opacity, transform; } .shadcn-nav-viewport[data-state="open"] { animation: shadcn-nav-viewport-in 180ms ease-out; } .shadcn-nav-viewport[data-state="closed"] { animation: shadcn-nav-viewport-out 140ms ease-in; } .shadcn-nav-work-grid { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(18rem, 1.2fr); gap: 0.5rem; width: 38rem; } .shadcn-nav-featured-list, .shadcn-nav-compact-list, .shadcn-nav-about-grid { margin: 0; padding: 0; list-style: none; } .shadcn-nav-compact-list, .shadcn-nav-about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.125rem; } .shadcn-nav-about-grid { width: 34rem; } .shadcn-nav-collection-column { padding-left: 0.5rem; border-left: 1px solid var(--theme-menu-hairline); } .shadcn-nav-label { margin: 0; padding: 0.625rem 0.75rem 0.375rem; color: color-mix(in srgb, currentColor 58%, transparent); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .shadcn-nav-link { display: flex !important; min-height: 2.5rem; flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 0.25rem !important; padding: 0.75rem !important; border-radius: 0 !important; outline: none; transition: background-color 160ms ease, transform 160ms var(--pnav-motion-ease); } .shadcn-nav-link:hover, .shadcn-nav-link:focus-visible, .shadcn-nav-link[data-active] { background: var(--theme-hover-soft) !important; } .shadcn-nav-link:active { transform: translateY(1px); } .shadcn-nav-card-title { font-size: 0.8125rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } .shadcn-nav-card-copy { color: color-mix(in srgb, currentColor 58%, transparent); font-size: 0.6875rem; line-height: 1.35; } .shadcn-nav-indicator { position: relative; top: 100%; z-index: 51; display: flex; height: 0.375rem; align-items: flex-end; justify-content: center; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 180ms ease; } .shadcn-nav-indicator[data-state="visible"] { opacity: 1; } .shadcn-nav-indicator > span { position: relative; top: auto; width: 100%; height: 1px; background: var(--pnav-trigger-indicator); } @keyframes shadcn-nav-enter-left { from { opacity: 0; transform: translate3d(0, -0.5rem, 0) scale(0.985); } } @keyframes shadcn-nav-enter-right { from { opacity: 0; transform: translate3d(0, -0.5rem, 0) scale(0.985); } } @keyframes shadcn-nav-exit-left { to { opacity: 0; transform: translate3d(0, -0.35rem, 0) scale(0.99); } } @keyframes shadcn-nav-exit-right { to { opacity: 0; transform: translate3d(0, -0.35rem, 0) scale(0.99); } } @keyframes shadcn-nav-viewport-in { from { opacity: 0; transform: translate3d(0, -0.25rem, 0) scale(0.985); } } @keyframes shadcn-nav-viewport-out { to { opacity: 0; transform: translate3d(0, -0.25rem, 0) scale(0.99); } } @media (prefers-reduced-motion: reduce) { .shadcn-nav-content, .shadcn-nav-viewport, .shadcn-nav-trigger svg, .shadcn-nav-trigger::after, .shadcn-nav-top-link::after, .shadcn-nav-indicator { animation: none !important; transition: none !important; } } @media (max-width: 767px) { [data-shadcn-navigation] { min-width: 0; min-height: 0; } .shadcn-nav-desktop { display: none; } .shadcn-mobile-nav { position: relative; display: block; } .shadcn-mobile-trigger { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--theme-hairline); border-radius: 0.625rem; background: var(--theme-menu-bg); color: var(--theme-ink); transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--pnav-motion-ease); } .shadcn-mobile-trigger:hover, .shadcn-mobile-trigger:focus-visible { background: var(--theme-hover-soft); border-color: var(--theme-menu-hairline); outline: 1px solid var(--pnav-focus-ring); outline-offset: 2px; transform: translateY(-1px); } .shadcn-mobile-trigger:active { transform: translateY(1px) scale(0.98); } .shadcn-mobile-trigger-icon { position: relative; display: block; width: 1rem; height: 1rem; } .shadcn-mobile-trigger-icon i { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform 180ms var(--pnav-motion-ease), top 180ms var(--pnav-motion-ease); } .shadcn-mobile-trigger-icon i:first-child { top: 0.3rem; } .shadcn-mobile-trigger-icon i:last-child { top: 0.7rem; } .shadcn-mobile-trigger[aria-expanded="true"] .shadcn-mobile-trigger-icon i:first-child { top: 0.5rem; transform: rotate(45deg); } .shadcn-mobile-trigger[aria-expanded="true"] .shadcn-mobile-trigger-icon i:last-child { top: 0.5rem; transform: rotate(-45deg); } .shadcn-mobile-panel { position: fixed; top: 5rem; right: 1rem; left: 1rem; z-index: 40; max-height: calc(100dvh - 6rem); overflow-y: auto; border: 1px solid var(--theme-menu-hairline); border-radius: var(--pnav-panel-radius); background: var(--theme-menu-bg); box-shadow: var(--theme-menu-shadow); opacity: 0; pointer-events: none; transform: translate3d(0, -0.75rem, 0) scale(0.985); visibility: hidden; transition: opacity 180ms ease, transform 220ms var(--pnav-motion-ease), visibility 180ms; backdrop-filter: none; -webkit-backdrop-filter: none; } .shadcn-mobile-panel[data-open="true"] { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); visibility: visible; } .shadcn-mobile-panel-inner { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem; } .shadcn-mobile-section, .shadcn-mobile-top-link { border-bottom: 1px solid var(--theme-menu-hairline); } .shadcn-mobile-section-trigger, .shadcn-mobile-top-link { display: flex !important; width: 100%; min-height: 2.75rem; align-items: center; justify-content: space-between; padding: 0.75rem !important; border: 0; border-radius: var(--pnav-row-radius) !important; background: transparent; color: var(--theme-ink) !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; outline: none; } .shadcn-mobile-section-trigger:hover, .shadcn-mobile-section-trigger:focus-visible, .shadcn-mobile-top-link:hover, .shadcn-mobile-top-link:focus-visible { background: var(--theme-hover-soft) !important; outline: 1px solid var(--pnav-focus-ring); outline-offset: -1px; } .shadcn-mobile-section-trigger svg { width: 1rem; height: 1rem; transition: transform 180ms var(--pnav-motion-ease); } .shadcn-mobile-section-trigger[aria-expanded="true"] svg { transform: rotate(180deg); } .shadcn-mobile-section-panel { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 220ms var(--pnav-motion-ease); } .shadcn-mobile-section-panel[data-open="true"] { grid-template-rows: 1fr; } .shadcn-mobile-section-panel-inner { min-height: 0; } .shadcn-mobile-link-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.125rem; padding: 0.25rem 0.25rem 0.75rem; } .shadcn-mobile-link { display: flex !important; min-width: 0; min-height: 2.5rem; align-items: center; padding: 0.625rem !important; border-radius: var(--pnav-row-radius) !important; color: var(--theme-ink) !important; font-size: 0.75rem !important; line-height: 1.25; overflow-wrap: anywhere; outline: none; } .shadcn-mobile-link:hover, .shadcn-mobile-link:focus-visible, .shadcn-mobile-link[data-active] { background: var(--theme-hover-soft) !important; outline: 1px solid var(--pnav-focus-ring); outline-offset: -1px; } .shadcn-mobile-label { margin: 0; padding: 0.25rem 0.875rem 0.125rem; color: color-mix(in srgb, currentColor 58%, transparent); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } /* Mobile chrome should recede behind the artwork. Keep the hit areas tappable, but let the controls sit directly on the header surface. */ #navbar-inner > div.flex { gap: 0 !important; } #navbar-inner > div.flex > .w-px { display: none !important; } #navbar-inner .shadcn-mobile-trigger, #navbar-inner .shadcn-theme-toggle, #navbar-inner .theme-toggle-enhanced { position: relative !important; isolation: isolate; width: 2.75rem !important; height: 2.75rem !important; min-width: 2.75rem !important; min-height: 2.75rem !important; padding: 0 !important; border: 0 !important; border-radius: 0.625rem !important; background: transparent !important; box-shadow: none !important; touch-action: manipulation; } #navbar-inner .shadcn-mobile-trigger:hover, #navbar-inner .shadcn-mobile-trigger:focus-visible, #navbar-inner .shadcn-theme-toggle:hover, #navbar-inner .shadcn-theme-toggle:focus-visible, #navbar-inner .theme-toggle-enhanced:hover, #navbar-inner .theme-toggle-enhanced:focus-visible { background: transparent !important; } #navbar-inner .shadcn-mobile-trigger-icon { position: relative; width: 0.875rem; height: 0.875rem; z-index: 1; } #navbar-inner .theme-toggle-enhanced svg { width: 1rem !important; height: 1rem !important; z-index: 1; } #navbar-inner .theme-toggle-enhanced .theme-toggle-dots { bottom: 2px; z-index: 1; } } @media (prefers-reduced-motion: reduce) and (max-width: 767px) { .shadcn-mobile-trigger, .shadcn-mobile-trigger-icon i, .shadcn-mobile-panel, .shadcn-mobile-section-panel, .shadcn-mobile-section-trigger svg { transition: none !important; } } /* Interior-inspired sticky chrome contract. The shared header owns the document's sticky edge; secondary action bars dock below its current height. Page-specific shells can style their inner surface without having to repeat positioning or scroll-state offsets. */ :root { --pastelle-nav-height: 5rem; --pastelle-nav-height-condensed: 4rem; --pastelle-sticky-offset: var(--pastelle-nav-height); } #navbar[data-sticky-header] { position: sticky !important; top: 0 !important; right: auto !important; left: auto !important; width: 100% !important; z-index: 50 !important; } #navbar[data-sticky-header] > .absolute { position: absolute !important; inset: 0 !important; } html body :is(#controls-bar[data-sticky-surface], .collection-controls[data-sticky-surface]) { position: sticky !important; top: var(--pastelle-sticky-offset) !important; z-index: 40 !important; isolation: isolate; } html body:has(#navbar.scrolled) :is(#controls-bar[data-sticky-surface], .collection-controls[data-sticky-surface]) { top: var(--pastelle-nav-height-condensed) !important; } @media (prefers-reduced-motion: reduce) { #navbar[data-sticky-header], html body :is(#controls-bar[data-sticky-surface], .collection-controls[data-sticky-surface]) { scroll-behavior: auto; } }