/** * 3D & AR Manager — frontend styles. * * Scoped entirely under .wc3dar-* so nothing leaks into theme styles. * All colours are exposed as custom properties for easy theming. */ :root { --wc3dar-accent: #2b6cb0; --wc3dar-accent-hover: #1f4f85; --wc3dar-accent-contrast: #ffffff; --wc3dar-surface: #ffffff; --wc3dar-surface-alt: #f4f6f8; --wc3dar-text: #1a202c; --wc3dar-muted: #5f6b7a; --wc3dar-border: rgba(15, 23, 42, 0.12); --wc3dar-radius: 12px; --wc3dar-shadow: 0 24px 60px rgba(15, 23, 42, 0.28); /* Stage and dialog sizing. Capped in px *and* in viewport units so the modal is a generous panel on a large monitor without becoming the whole screen. The stage is what determines how big the product looks — enlarging it is the effective lever, far more so than the camera radius below. */ --wc3dar-stage-height: min(65vh, 600px); --wc3dar-dialog-width: min(1000px, 92vw); --wc3dar-dialog-max-height: 90vh; /* * Set explicitly rather than inherited. The dialog is appended to , * and on a theme that styles typography per-template instead of on body, * inheriting lands on the browser's serif default. Override this property * with `inherit` if you would rather follow the theme. */ --wc3dar-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; --wc3dar-z: 999999; } /* -------------------------------------------------- Launch button */ .wc3dar-launch-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 16px 0; clear: both; } .wc3dar-launch { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 1px solid var(--wc3dar-accent); border-radius: 999px; background: var(--wc3dar-accent); color: var(--wc3dar-accent-contrast); font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 2px 6px rgba(43, 108, 176, 0.25); } .wc3dar-launch:hover, .wc3dar-launch:focus-visible { background: var(--wc3dar-accent-hover); border-color: var(--wc3dar-accent-hover); color: var(--wc3dar-accent-contrast); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(43, 108, 176, 0.3); } .wc3dar-launch:focus-visible { outline: 2px solid var(--wc3dar-accent); outline-offset: 3px; } .wc3dar-launch:active { transform: translateY(0); } .wc3dar-launch__icon { flex: 0 0 auto; } .wc3dar-launch__hint { font-size: 12px; color: var(--wc3dar-muted); } /* -------------------------------------------------- Modal */ .wc3dar-modal { position: fixed; inset: 0; z-index: var(--wc3dar-z); display: flex; align-items: center; justify-content: center; padding: 20px; } .wc3dar-modal[hidden] { display: none; } .wc3dar-modal__backdrop { position: absolute; inset: 0; background: rgba(9, 14, 24, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: wc3dar-fade 0.2s ease both; } .wc3dar-modal__dialog { position: relative; display: flex; flex-direction: column; width: var(--wc3dar-dialog-width); max-height: var(--wc3dar-dialog-max-height); overflow: hidden; background: var(--wc3dar-surface); border-radius: var(--wc3dar-radius); box-shadow: var(--wc3dar-shadow); animation: wc3dar-pop 0.22s cubic-bezier(0.2, 0.8, 0.3, 1) both; /* One declaration so the title, buttons and error text all agree. */ font-family: var(--wc3dar-font); -webkit-font-smoothing: antialiased; } .wc3dar-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--wc3dar-border); background: var(--wc3dar-surface-alt); } /* * The title is an

inside a dialog the theme has never styled, so it * inherits whatever the browser falls back to — usually a serif. Set the * typography explicitly and inherit the theme's family when there is one. / .wc3dar-modaltitle { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font-family: inherit; font-size: clamp(15px, 1.6vw, 17px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--wc3dar-text); text-transform: none; text-wrap: balance; / Long product names must not push the close button off the header. / display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } / * Themes frequently style every heading globally. Neutralise the usual * offenders inside our dialog only. / .wc3dar-modaltitle::before, .wc3dar-modaltitle::after { content: none; } .wc3dar-modalclose { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--wc3dar-muted); font-size: 26px; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .wc3dar-modalclose:hover, .wc3dar-modalclose:focus-visible { background: rgba(15, 23, 42, 0.08); color: var(--wc3dar-text); } .wc3dar-modalbody { flex: 1 1 auto; min-height: 0; padding: 0; background: radial-gradient(circle at 50% 20%, #ffffff 0%, #eef1f5 60%, #e3e8ee 100%); } / -------------------------------------------------- Stage / viewer / .wc3dar-stage { position: relative; width: 100%; height: var(--wc3dar-stage-height); } .wc3dar-inline { margin: 20px 0; border: 1px solid var(--wc3dar-border); border-radius: var(--wc3dar-radius); overflow: hidden; background: var(--wc3dar-surface-alt); } .wc3dar-viewer { display: block; width: 100%; height: 100%; background-color: transparent; --poster-color: transparent; --progress-bar-color: var(--wc3dar-accent); --progress-mask: transparent; } .wc3dar-viewer:focus-visible { outline: 2px solid var(--wc3dar-accent); outline-offset: -2px; } / Poster overlay / .wc3dar-poster-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--wc3dar-surface-alt); } .wc3dar-poster-overlay img { width: 100%; height: 100%; object-fit: contain; opacity: 0.9; } .wc3dar-poster-overlayspinner { position: absolute; width: 38px; height: 38px; border: 3px solid rgba(15, 23, 42, 0.15); border-top-color: var(--wc3dar-accent); border-radius: 50%; animation: wc3dar-spin 0.9s linear infinite; } / Progress bar / .wc3dar-progress-bar { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: rgba(15, 23, 42, 0.08); overflow: hidden; } .wc3dar-progress-barfill { width: 0; height: 100%; background: var(--wc3dar-accent); transition: width 0.2s ease; } .wc3dar-progress-bar[hidden], .wc3dar-progress-bar.is-complete { opacity: 0; transition: opacity 0.3s ease; } / -------------------------------------------------- Overlay control layer / / * An inert full-bleed layer over the stage holding every overlay control. * * On a wide screen it changes nothing: it covers exactly the stage box, so each * control's own `bottom: 16px; left: 16px` resolves against the same rectangle * it always did. It exists so the phone breakpoint has a single element to turn * into a real bar — three independently positioned corner controls cannot help * colliding at 360px wide. / .wc3dar-controls { position: absolute; inset: 0; z-index: 4; / The layer must never intercept a drag meant for the model. / pointer-events: none; } .wc3dar-controls > { pointer-events: auto; } /* * The slotted stub that suppresses 's own AR button. It is never * seen; the real control is .wc3dar-ar-button in the layer above. / .wc3dar-ar-slot { display: block; width: 0; height: 0; overflow: hidden; pointer-events: none; } / -------------------------------------------------- AR button / .wc3dar-ar-button { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 11px 18px; border: 1px solid var(--wc3dar-accent); border-radius: 999px; background: var(--wc3dar-accent); color: var(--wc3dar-accent-contrast); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.24); transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease; -webkit-tap-highlight-color: transparent; } .wc3dar-ar-button[hidden] { display: none; } .wc3dar-ar-button:hover, .wc3dar-ar-button:focus-visible { background: var(--wc3dar-accent-hover); border-color: var(--wc3dar-accent-hover); transform: translateX(-50%) translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.3); } .wc3dar-ar-button:focus-visible { outline: 2px solid var(--wc3dar-accent); outline-offset: 3px; } .wc3dar-ar-button:active { transform: translateX(-50%) translateY(0); } .wc3dar-ar-buttonicon { flex: 0 0 auto; } / Error state / .wc3dar-stageerror { position: absolute; inset: auto 0 0 0; margin: 0; padding: 12px 16px; background: #fdecea; color: #8a1c13; font-size: 14px; text-align: center; } .wc3dar-stageerror[hidden] { display: none; } / -------------------------------------------------- Body lock / body.wc3dar-modal-open { overflow: hidden; } / -------------------------------------------------- Motion & responsive / @keyframes wc3dar-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes wc3dar-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes wc3dar-spin { to { transform: rotate(360deg); } } / -------------------------------------------------- Mobile control bar / / * Phones only. The corner layout is fine the moment there is room for it; below * this width the model switch (two pills) and the dimensions toggle already * exceed the viewport between them, and the AR button sits centred underneath * both of them. * * The layer becomes a real flex bar, and every control drops to `position: * static` so its corner offsets stop applying. Secondary controls share the * upper row; the AR button takes a full-width row of its own at the bottom, * where a thumb actually reaches. / @media (max-width: 600px) { .wc3dar-controls { inset: auto 0 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; / env() keeps the bar clear of the iOS home indicator. / padding: 14px 12px calc(12px + env(safe-area-inset-bottom, 0px)); } / * A scrim, only when the bar has something visible in it. Without it the * controls sit on bare render and a pale model washes them out; with it on * an empty bar there would be a grey band over nothing. / .wc3dar-controls:has(> :not([hidden])) { background: linear-gradient( to top, rgba(8, 11, 16, 0.58) 0%, rgba(8, 11, 16, 0.26) 55%, rgba(8, 11, 16, 0) 100% ); } /* * Every control is named explicitly rather than left to the universal child * selector, and that is not style — it is the only thing that works. * `.wc3dar-switch` is declared 80 lines further down this same file, and * `.wc3dar-dim-toggle` lives in a stylesheet that loads after it. At one * class each, both win on source order and stay absolutely positioned, * stacked on top of the bar — which is exactly the mess this breakpoint * exists to clear up. Two classes beats one wherever the rule happens to sit. * * `transform` matters as much as `position`: the AR button carries * translateX(-50%) for its centred desktop placement, and that keeps * shifting it half its own width off to the left even once it is a static * flex item. / .wc3dar-controls > .wc3dar-ar-button, .wc3dar-controls > .wc3dar-switch, .wc3dar-controls > .wc3dar-dim-toggle, .wc3dar-controls > { position: static; inset: auto; transform: none; margin: 0; } /* Primary action: full width, closest to the thumb. / .wc3dar-controls > .wc3dar-ar-button { order: 2; flex: 1 1 100%; padding: 14px 18px; font-size: 15px; border-radius: 14px; } .wc3dar-controls > .wc3dar-ar-button:hover, .wc3dar-controls > .wc3dar-ar-button:focus-visible, .wc3dar-controls > .wc3dar-ar-button:active { transform: none; } / Secondary controls share the row above it. / .wc3dar-controls > .wc3dar-switch, .wc3dar-controls > .wc3dar-dim-toggle { order: 1; box-shadow: none; } .wc3dar-controls > .wc3dar-switch { flex: 0 1 auto; min-width: 0; } .wc3dar-controls > .wc3dar-dim-toggle { flex: 0 0 auto; min-height: 40px; } .wc3dar-controls .wc3dar-switchbtn { min-height: 34px; } } @media (max-width: 782px) { .wc3dar-modal { padding: 0; } .wc3dar-modaldialog { width: 100%; height: 100%; max-height: 100%; border-radius: 0; } .wc3dar-stage { height: calc(100vh - 132px); min-height: 320px; } .wc3dar-launch { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .wc3dar-modalbackdrop, .wc3dar-modaldialog, .wc3dar-launch, .wc3dar-ar-button { animation: none !important; transition: none !important; } } @media (prefers-color-scheme: dark) { .wc3dar-modaldialog { --wc3dar-surface: #171b22; --wc3dar-surface-alt: #1f242d; --wc3dar-text: #e8ecf1; --wc3dar-muted: #9aa5b4; --wc3dar-border: rgba(255, 255, 255, 0.12); background: var(--wc3dar-surface); } .wc3dar-modalbody { background: radial-gradient(circle at 50% 20%, #232935 0%, #171b22 70%); } } / ---------------------------------------------- Dual-model overlay switch / .wc3dar-switch { position: absolute; bottom: 16px; left: 16px; z-index: 4; display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: color-mix(in srgb, var(--wc3dar-surface) 88%, transparent); border: 1px solid var(--wc3dar-border); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16); / The stage can sit over a dark model; blur keeps the labels readable. / -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } / color-mix is recent; older browsers get the solid surface colour. / @supports not (background: color-mix(in srgb, red 50%, transparent)) { .wc3dar-switch { background: var(--wc3dar-surface); } } .wc3dar-switchbtn { appearance: none; -webkit-appearance: none; margin: 0; padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--wc3dar-muted); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease; } .wc3dar-switchbtn:hover { color: var(--wc3dar-text); background: rgba(15, 23, 42, 0.06); } .wc3dar-switchbtn:focus-visible { outline: 2px solid var(--wc3dar-accent); outline-offset: 2px; } .wc3dar-switchbtn.is-active { background: var(--wc3dar-accent); color: var(--wc3dar-accent-contrast); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18); } / Brief dimming while the replacement model streams in. / .wc3dar-stage.is-switching model-viewer { opacity: 0.55; transition: opacity 0.18s ease; } @media (max-width: 480px) { / * Inside the mobile bar the switch is a flex item, so its old corner offsets * no longer apply — only the pill sizing still matters. Let it take the * whole first row when it is the only secondary control. */ .wc3dar-switch { flex: 1 1 auto; justify-content: center; } .wc3dar-switchbtn { flex: 1 1 0; padding: 9px 10px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .wc3dar-switchbtn, .wc3dar-stage.is-switching model-viewer { transition: none !important; } }