/* DMB Media — Fine Art Prints. Minimal gallery system. */ :root { --bg: #f6f5f1; --ink: #161512; --muted: #6a675f; --hairline: #e2e0d9; --serif: "Cormorant Garamond", Georgia, serif; --sans: "Inter", -apple-system, system-ui, sans-serif; --pad: clamp(20px, 4vw, 56px); } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; } /* ---------- language toggle (EN / ES on one URL) ---------- is set from the device language / saved choice before paint; only the active language's copy is shown. */ [data-lang="en"] [lang="es"], [data-lang="es"] [lang="en"] { display: none; } .nav-lang { display: inline-flex; align-items: baseline; gap: 6px; } .nav-lang::before { content: ""; align-self: center; width: 1px; height: 12px; background: var(--hairline); margin-right: 2px; } .lang-btn { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: none; border: 0; border-bottom: 1px solid transparent; padding: 6px 0; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease; } .lang-btn:hover { color: var(--ink); } .lang-btn[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); } /* ---------- top bar ---------- */ .topbar { display: flex; justify-content: space-between; align-items: baseline; padding: calc(env(safe-area-inset-top) + 22px) var(--pad) 22px; } .wordmark { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: 0.02em; } .wordmark-sub { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-left: 10px; } .nav { display: flex; align-items: baseline; gap: 28px; } .nav a, .nav-cart { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 0; touch-action: manipulation; } .nav a { border-bottom: 1px solid transparent; transition: border-color 0.25s ease; } .nav a:hover { border-bottom-color: var(--ink); } .nav-cart { color: var(--ink); cursor: pointer; } .nav-cur { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); background: none; border: 0; border-bottom: 1px solid transparent; padding: 6px 0; cursor: pointer; transition: border-color 0.25s ease, color 0.25s ease; } .nav-cur:hover { color: var(--ink); border-bottom-color: var(--ink); } @media (max-width: 560px) { .nav-cur { font-size: 10px; letter-spacing: 0.12em; } } @media (max-width: 560px) { .topbar { padding-top: calc(env(safe-area-inset-top) + 16px); padding-bottom: 14px; } .wordmark { font-size: 19px; } .wordmark-sub { display: none; } .nav { flex-wrap: wrap; justify-content: flex-end; gap: 13px; row-gap: 8px; } .nav a, .nav-cart, .lang-btn { font-size: 10px; letter-spacing: 0.1em; } .nav-lang { gap: 5px; } .nav-lang::before { height: 10px; margin-right: 0; } } /* ---------- home ---------- */ .intro { padding: clamp(48px, 9vh, 110px) var(--pad) clamp(36px, 6vh, 72px); max-width: 880px; } .intro-headline { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 5.2vw, 62px); line-height: 1.12; margin: 0 0 18px; text-wrap: balance; } .intro-sub { color: var(--muted); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin: 0; } /* home hero CTA + live "from" price (span filled by cart.js from Shopify) */ .intro-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 28px 0 0; } .cta-link { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; background: var(--ink); color: var(--bg); padding: 13px 22px; touch-action: manipulation; transition: opacity 0.25s ease; } .cta-link:hover { opacity: 0.85; } .from-price { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; } .from-price[hidden] { display: none; } .series-intro .from-price { display: block; margin: 0 0 22px; } /* nav cart notice (empty cart / cart errors), created by cart.js */ .cart-note { position: fixed; top: calc(env(safe-area-inset-top) + 64px); right: var(--pad); max-width: 320px; margin: 0; background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.5; letter-spacing: 0.02em; padding: 12px 16px; z-index: 20; } .cart-note[hidden] { display: none; } /* one standout per collection: a full-width lead + four supporting works */ .hero-grid { display: grid; /* one supporting card per non-lead collection, all on a single row */ grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 2vw, 24px); padding: 0 var(--pad); /* Don't stretch cells to the tallest in the row: otherwise the image (height:100%) fills the stretched cell and pushes its label out of view, which hid the Nocturne/Monochrome labels on mobile (2-col rows). */ align-items: start; } .grid-item { display: block; position: relative; min-width: 0; } .grid-item.is-lead { grid-column: 1 / -1; } .grid-item img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; } /* hero: show the full frame at its own aspect ratio — never crop-to-fit, which zoom-magnified the pixels */ .grid-item.is-lead img { height: auto; aspect-ratio: auto; object-fit: contain; } .grid-label { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; min-width: 0; } .grid-series { font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); } .grid-desc { font-family: var(--serif); font-weight: 300; font-size: 15px; line-height: 1.4; color: var(--ink); max-width: 44ch; } /* supporting cards stay tidy — clamp the blurb to two lines */ .grid-item:not(.is-lead) .grid-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .grid-item.is-lead .grid-label { margin-top: 16px; } .grid-item.is-lead .grid-desc { font-size: clamp(16px, 1.8vw, 21px); max-width: 60ch; } a.grid-item img { transition: opacity 0.35s ease; } a.grid-item:hover img { opacity: 0.85; } @media (max-width: 760px) { .hero-grid { grid-template-columns: repeat(2, 1fr); } /* The full-width lead + an odd number of supporting cards leaves the last one alone on its row; centre it so it reads deliberate, not orphaned. */ .hero-grid > .grid-item:last-child:nth-child(even) { grid-column: 1 / -1; width: calc(50% - clamp(14px, 2vw, 24px) / 2); justify-self: center; } .grid-desc { font-size: 14px; } } /* ---------- collections list ---------- */ .collections { padding: clamp(64px, 11vh, 130px) var(--pad) 0; } .section-label { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; } .series-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto; gap: 18px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--hairline); touch-action: manipulation; } .series-row:last-of-type { border-bottom: 1px solid var(--hairline); } .series-name { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); font-weight: 300; transition: opacity 0.25s ease; } a.series-row:hover .series-name { opacity: 0.55; } .series-line { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .series-count { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .series-row.is-soon .series-name { color: var(--muted); } @media (max-width: 700px) { .series-row { grid-template-columns: 1fr auto; } .series-line { display: none; } } /* ---------- artist statement (below hero) ---------- */ .statement { padding: clamp(56px, 10vh, 120px) var(--pad); max-width: 680px; margin: 0 auto; text-align: center; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .statement-body { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.5vw, 27px); line-height: 1.5; margin: 0; text-wrap: pretty; } .statement-body + .statement-body { margin-top: 0.85em; } .statement-close { font-style: italic; color: var(--muted); margin-top: 1.1em; } .statement .about-lang { text-align: center; display: inline-block; } /* ---------- about / footer ---------- */ .about { padding: clamp(64px, 11vh, 130px) var(--pad); max-width: 720px; } .about-body { font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.55; margin: 0; } .about-body + .about-body { margin-top: 0.9em; } .about-portrait { display: block; width: 100%; height: auto; margin: 0 0 clamp(20px, 4vh, 40px); border-radius: 2px; } .about-dedication { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; color: var(--muted); margin: 1.6em 0 0; padding-top: 1.4em; border-top: 1px solid var(--hairline); } /* ---------- scroll reveal (home statement + about copy) ---------- */ /* Each .reveal element starts faded + nudged down; reveal.js adds .in-view as it scrolls into view so the copy eases in slowly. reveal.js reveals all immediately when JS/IntersectionObserver is absent, and the reduced-motion rule below neutralizes it for visitors who ask for less animation. */ .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.in-view { opacity: 1; transform: none; } .about-lang { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 2.6em 0 1.2em; padding-top: 1.4em; border-top: 1px solid var(--hairline); } .footer { padding: 40px var(--pad) calc(env(safe-area-inset-bottom) + 40px); color: var(--muted); font-size: 11px; letter-spacing: 0.08em; } .footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 18px; font-size: 12px; letter-spacing: 0.04em; } .footer-nav a { color: var(--muted); border-bottom: 1px solid transparent; padding-bottom: 1px; } .footer-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); } /* ---------- legal / policy pages ---------- */ .legal { max-width: 720px; padding: clamp(48px, 9vh, 96px) var(--pad) clamp(40px, 7vh, 80px); } .legal-title { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 5vw, 46px); line-height: 1.1; margin: 0 0 clamp(24px, 4vh, 40px); } .prose { font-size: 15px; line-height: 1.7; } .prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; margin: 2em 0 0.5em; } .prose h2[lang="es"] { margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--hairline); } .prose p { margin: 0 0 1em; } .prose ul { margin: 0 0 1em; padding-left: 1.2em; } .prose li { margin: 0 0 0.4em; } .prose a { border-bottom: 1px solid var(--hairline); } .prose a:hover { border-bottom-color: var(--ink); } .legal-cta { margin-top: 2em; font-family: var(--serif); font-size: clamp(17px, 2vw, 20px); } .contact-list { list-style: none; padding-left: 0; } .contact-list li { margin: 0 0 0.6em; } /* ---------- collection page (responsive masonry grid) ---------- */ .collection { padding: 0 var(--pad) clamp(20px, 4vh, 48px); } .collection-head { max-width: 760px; padding: clamp(16px, 4vh, 40px) 0 clamp(30px, 5vh, 56px); margin-bottom: clamp(24px, 4vh, 44px); border-bottom: 1px solid var(--hairline); } .collection-kicker { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; } .collection-head .series-title { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 8vw, 88px); line-height: 1.02; margin: 0 0 18px; } .collection-head .series-desc { color: var(--muted); font-size: clamp(15px, 1.7vw, 18px); line-height: 1.5; max-width: 52ch; margin: 0 0 22px; } .collection-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; margin: 0; } .collection-meta .from-price { display: inline; margin: 0; } .collection-count { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; } /* CSS multi-column masonry keeps every work at its native aspect ratio, so nothing is cropped and the old off-center-framing bug cannot recur. Layout is reserved from each img's width/height attrs → no cumulative shift. */ .collection-grid { column-count: 2; column-gap: clamp(12px, 2vw, 26px); } @media (min-width: 600px) { .collection-grid { column-count: 3; } } @media (min-width: 1000px) { .collection-grid { column-count: 4; } } @media (min-width: 1600px) { .collection-grid { column-count: 5; } } .tile { display: block; break-inside: avoid; margin: 0 0 clamp(22px, 3.4vw, 42px); } .tile-frame { display: block; overflow: hidden; background: #ecebe5; /* soft placeholder tint before the image paints */ } .tile-img { display: block; width: 100%; height: auto; /* native ratio from width/height attrs */ transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .tile:hover .tile-img, .tile:focus-visible .tile-img { opacity: 0.9; transform: scale(1.03); } .tile-cap { display: block; margin-top: 12px; } .tile-title { display: block; font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(16px, 1.7vw, 21px); line-height: 1.25; color: var(--ink); } .tile-cta { display: inline-block; margin-top: 6px; font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 0.25s ease, border-color 0.25s ease; } .tile:hover .tile-cta, .tile:focus-visible .tile-cta { color: var(--ink); border-bottom-color: var(--ink); } .collection-foot { margin-top: clamp(20px, 4vh, 44px); padding-top: clamp(20px, 3vh, 32px); border-top: 1px solid var(--hairline); } .collection-back { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid transparent; padding: 6px 0; transition: color 0.25s ease, border-color 0.25s ease; } .collection-back:hover, .collection-back:focus-visible { color: var(--ink); border-bottom-color: var(--ink); } .page-collection .footer { border-top: 1px solid var(--hairline); margin-top: clamp(40px, 7vh, 96px); } /* ---------- wall preview page ---------- */ .page-wallpreview .footer { display: none; } .page-wallpreview { overflow: hidden; height: 100dvh; display: flex; flex-direction: column; } .wp-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: 0; padding: 0 var(--pad) calc(env(safe-area-inset-bottom) + 24px); } .wp-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .wp-tabs { display: flex; gap: 24px; padding-bottom: 14px; } .wp-tab { background: none; border: none; padding: 6px 0; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid transparent; cursor: pointer; touch-action: manipulation; } .wp-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); } .wp-pane { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; } .wp-pane[hidden] { display: none; } model-viewer { flex: 1; min-height: 0; width: 100%; background: #edece7; --poster-color: #edece7; --progress-bar-color: transparent; --progress-bar-height: 0px; } .wp-ar-button, .wp-btn, .wp-filebtn { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; background: var(--ink); color: var(--bg); border: none; padding: 12px 20px; cursor: pointer; touch-action: manipulation; } .wp-ar-button { position: absolute; bottom: 16px; left: 16px; } .wp-btn:disabled { opacity: 0.4; cursor: default; } .wp-filebtn { display: inline-block; position: relative; overflow: hidden; } .wp-filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .wp-status { color: var(--muted); font-size: 12px; margin: 10px 0 0; min-height: 1.2em; } /* on-surface "drag to spin" cue floating over the 3D preview (wall-preview.js reveals it once, then fades it via .gone on first interaction/timeout) */ .wp-cue { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); margin: 0; max-width: min(90%, 340px); padding: 8px 15px; background: rgba(22, 21, 18, 0.82); color: #f6f5f1; font-family: var(--sans); font-size: 12px; line-height: 1.45; text-align: center; border-radius: 999px; pointer-events: none; opacity: 1; transition: opacity 0.55s ease; } .wp-cue[hidden] { display: none; } .wp-cue.gone { opacity: 0; } .wp-rail { padding: 4px 0 0 clamp(24px, 3vw, 48px); } .wp-kicker { font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; } .wp-title { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(26px, 3vw, 38px); margin: 0 0 26px; } .wp-field { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; } .wp-field label { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .wp-field select { font-family: var(--sans); font-size: 14px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 0; background: var(--bg); color: var(--ink); } /* what-you-get note for the selected finish (one

per finish; the inline script on wall-preview.html un-hides the matching one) */ .wp-finish-note { margin: 0; padding: 10px 12px; border: 1px solid var(--hairline); border-top: 0; background: rgba(22, 21, 18, 0.03); color: var(--muted); font-size: 12.5px; line-height: 1.55; } .wp-finish-note strong { color: var(--ink); font-weight: 500; } /* inline "?" help affordance — a small round button that opens a short how-to panel via the native Popover API (no JS). Used on Finish/Size, the preview tabs, and the VR intro. Panel centers in the viewport; click-outside/Esc close it. Browsers without popover support leave the panel hidden (fallback below). */ .wp-help { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 5px; padding: 0; border: 1px solid var(--muted); border-radius: 50%; background: none; color: var(--muted); font-family: var(--sans); font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; cursor: pointer; vertical-align: middle; touch-action: manipulation; } .wp-help:hover, .wp-help:focus-visible { border-color: var(--ink); color: var(--ink); } .wp-pop { width: min(340px, 92vw); margin: auto; padding: 18px 20px; border: 1px solid var(--hairline); background: var(--bg); color: var(--muted); font-family: var(--sans); font-size: 13px; line-height: 1.6; box-shadow: 0 18px 50px rgba(22, 21, 18, 0.18); } .wp-pop strong { color: var(--ink); font-weight: 600; } .wp-pop em { font-style: normal; color: var(--ink); font-weight: 500; } .wp-pop::backdrop { background: rgba(22, 21, 18, 0.28); } /* fallback: where the Popover API is unsupported the [popover] attr is ignored and the panel would render inline — hide it so nothing leaks into the page. (Where it IS supported, the UA stylesheet hides closed popovers for us.) */ @supports not selector(:popover-open) { .wp-pop { display: none; } } /* trust line under the buy button */ .wp-trust { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 14px 0 0; } .wp-trust a { border-bottom: 1px solid var(--hairline); padding-bottom: 1px; } .wp-trust a:hover { color: var(--ink); } /* buy-box error line (shown by cart.js on a failed add-to-cart) */ .wp-error { color: #8c3b2e; font-size: 12.5px; line-height: 1.55; margin: 10px 0 0; } .wp-error[hidden] { display: none; } .wp-hint { color: var(--muted); font-size: 12.5px; line-height: 1.55; } .wp-hint a { border-bottom: 1px solid var(--hairline); padding-bottom: 1px; } .wp-hint a:hover { color: var(--ink); } @media (max-width: 860px) { .page-wallpreview { overflow: auto; height: auto; } .wp-main { grid-template-columns: 1fr; } .wp-pane, model-viewer { min-height: 58vh; } .wp-rail { padding: 24px 0 0; } } /* photo simulator */ .sim { flex: 1; min-height: 0; position: relative; background: #edece7; overflow: hidden; touch-action: none; } .sim-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; margin: 0; } .sim-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .sim-calline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .sim-calline line { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; } .sim-print { position: absolute; cursor: grab; user-select: none; -webkit-user-select: none; } .sim-print:active { cursor: grabbing; } .sim-print img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .sim-print[data-style="framed-black"] { border: 5px solid #141414; box-shadow: 0 8px 22px rgba(0,0,0,0.35); } .sim-print[data-style="framed-white"] { border: 5px solid #f2f0ea; box-shadow: 0 8px 22px rgba(0,0,0,0.3); } .sim-print[data-style="framed-oak"] { border: 5px solid #b08a5a; box-shadow: 0 8px 22px rgba(0,0,0,0.32); } .sim-print[data-style="canvas"] { border: none; box-shadow: 3px 10px 24px rgba(0,0,0,0.4); } .sim-print[data-style="paper"] { border: none; box-shadow: 0 3px 10px rgba(0,0,0,0.25); } /* Acrylic: photo face-mounted behind 10mm glossy acrylic, float-mounted off the wall. Crisp deep float shadow + a thin bright edge, and a live glare layer: --gx/--gy are set by wall-preview.js to the position of a light source fixed in room space, so the highlight slides across the panel as the print is dragged — that movement is what sells the glass. */ .sim-print[data-style="acrylic"] { border: none; box-shadow: 0 16px 34px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35); --gx: 32%; --gy: 18%; } .sim-print[data-style="acrylic"]::before { content: ""; position: absolute; inset: 0; pointer-events: none; /* subtle overall glaze; the moving glare lives on ::after */ background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 35%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); } .sim-print[data-style="acrylic"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* specular hotspot + diagonal streak, both anchored to the room's light */ background: radial-gradient(120% 90% at var(--gx) var(--gy), rgba(255,255,255,0.38), rgba(255,255,255,0.12) 32%, rgba(255,255,255,0) 55%), linear-gradient(115deg, rgba(255,255,255,0) calc(var(--gx) - 16%), rgba(255,255,255,0.26) var(--gx), rgba(255,255,255,0) calc(var(--gx) + 16%)); } .sim-bar { display: flex; align-items: center; gap: 14px; padding-top: 14px; flex-wrap: wrap; } .sim-note { color: var(--muted); font-size: 12px; } /* ---------- showroom ---------- */ .page-showroom { overflow: hidden; height: 100dvh; } .page-showroom .footer, .page-showroom .topbar { display: none; } .sr-main, #sr-canvas { position: fixed; inset: 0; } #sr-canvas canvas { display: block; } .sr-overlay[hidden] { display: none; } .sr-overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(246, 245, 241, 0.88); backdrop-filter: blur(6px); text-align: center; padding: 24px; } .sr-title { font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 6vw, 64px); margin: 0; } .sr-sub { color: var(--muted); margin: 0; } .sr-keys { color: var(--muted); font-size: 12px; letter-spacing: 0.08em; margin: 0 0 14px; } .sr-exit-hint { margin: 18px 0 0; font-size: 12px; } .sr-exit-hint a { color: var(--muted); border-bottom: 1px solid var(--hairline); padding-bottom: 1px; } /* mobile touch controls */ .sr-touch[hidden] { display: none; } .sr-stick { position: fixed; left: max(22px, env(safe-area-inset-left)); bottom: calc(env(safe-area-inset-bottom) + 26px); width: 108px; height: 108px; border-radius: 50%; background: rgba(22, 21, 18, 0.12); border: 1px solid rgba(22, 21, 18, 0.25); backdrop-filter: blur(2px); touch-action: none; } .sr-stick-nub { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(22, 21, 18, 0.55); } .sr-exit { position: fixed; top: calc(env(safe-area-inset-top) + 16px); right: max(16px, env(safe-area-inset-right)); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(22, 21, 18, 0.55); color: #f6f5f1; font-size: 22px; line-height: 1; cursor: pointer; touch-action: manipulation; } .sr-recenter { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom) + 30px); padding: 11px 18px; border-radius: 22px; border: 1px solid rgba(246, 245, 241, 0.4); background: rgba(22, 21, 18, 0.55); color: #f6f5f1; font: 500 14px/1 Inter, system-ui, sans-serif; letter-spacing: 0.02em; backdrop-filter: blur(2px); cursor: pointer; touch-action: manipulation; } .sr-recenter[hidden] { display: none; } /* motion preferences */ @media (prefers-reduced-motion: reduce) { a.grid-item img, .nav a, .series-name, .tile-img { transition: none; } .tile:hover .tile-img, .tile:focus-visible .tile-img { transform: none; } .reveal { opacity: 1; transform: none; transition: none; } } /* VR showroom — multi-room gallery HUD (room label, created from JS) */ #sr-room-label { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 18px); transform: translateX(-50%); padding: 9px 20px; border-radius: 999px; background: rgba(22, 21, 18, 0.55); color: #f6f5f1; font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; pointer-events: none; z-index: 6; }