.ua-dialog,.ua-drawer,.ua-tooltip,.ua-tabs,.ua-carousel,.ua-parallax-section,.ua-sticky-section,.ua-parallax-layers,.ua-magnetic-element{color:var(--universe-color-text);font-family:var(--universe-font-standard,var(--ua-font-body,inherit))} .ua-dialog-shell{position:relative;display:block} .ua-dialog-trigger{display:inline-flex} /* The dialog is the platform's full-screen focus surface (north star §5): the world behind FADES and BLURS but stays present — the overlay softens the page, the panel becomes the page. Never a small floating card. It must layer over the ENTIRE page, so the client portals the overlay+panel into `.ua-dialog-portal` on (escaping any glass/transform ancestor that would otherwise clamp a fixed element to its box). */ .ua-dialog-portal{position:static} .ua-dialog-overlay{position:fixed;inset:0;z-index:2147483646;background:color-mix(in srgb,var(--universe-color-background) 55%,transparent);backdrop-filter:blur(1.1rem) saturate(.92);-webkit-backdrop-filter:blur(1.1rem) saturate(.92)} .ua-drawer-panel,.ua-tooltip-bubble{background:color-mix(in srgb,var(--universe-color-background) 88%,transparent);border:1px solid color-mix(in srgb,var(--universe-color-primary) 28%,transparent);box-shadow:0 1.5rem 4rem rgba(0,0,0,.38);backdrop-filter:blur(1rem)} /* Full-bleed glass surface: the page is still felt through it. Content rides in a centered column with breath; the gutters around the column belong to the surface and (when closeOnOutside) act as the tap-outside-to-dismiss area. */ .ua-dialog{position:fixed;inset:0;z-index:2147483647;max-width:none;border:0;border-radius:0;box-shadow:none;background:color-mix(in srgb,var(--universe-color-background) 62%,transparent);backdrop-filter:blur(1.4rem) saturate(1.04);-webkit-backdrop-filter:blur(1.4rem) saturate(1.04);overflow-y:auto;overscroll-behavior:contain;padding-inline:clamp(1.1rem,4vw,3rem);padding-block:0 env(safe-area-inset-bottom,0rem)} .ua-dialog:not([hidden]){display:grid;grid-template-rows:auto 1fr auto;gap:clamp(.85rem,2.5vh,1.6rem)} /* Every dialog is full-screen; fullscreen=true/false only picks the content column width. */ .ua-dialog[data-ua-fullscreen=true]{--ua-dialog-col:64rem} .ua-dialog[data-ua-fullscreen=false]{--ua-dialog-col:var(--ua-dialog-width,42rem)} .ua-dialog>header,.ua-dialog>.ua-dialog-body,.ua-dialog>.ua-dialog-actions{inline-size:min(100%,var(--ua-dialog-col,64rem));margin-inline:auto} /* Desktop standard (operator §DIALOGS): full-screen FEEL = a blurred backdrop (the overlay) with a large CENTERED GLASS SHEET floating on top — never an opaque dark slab. On wide viewports the panel keeps its frosted-glass surface but draws in to a centered, rounded, bordered sheet at a comfortable max width/height; the overlay behind it carries the page blur. On phones the panel stays the full-viewport glass surface (the base rule above), which is the right mobile feel. The surface is always glass (translucent + blur), so the beautiful page/background is still felt through it — no scrim, no opaque slab. */ @media (min-width:48rem){ /* Operator §DIALOGS [2026-06-29]: EVERY dialog is a FULL-SCREEN blurred-glass surface that uses the whole viewport — never a small centered floating box. The content rides in a centered, comfortable reading column (margin-auto, --ua-dialog-col) so it never sprawls edge to edge; the page behind still blurs through the glass (no dark scrim). This is the default for every breakpoint (the base rule above already does it on phones). The legacy centered SHEET is now an explicit opt-in (surface=sheet) only. */ .ua-dialog>header{padding-block:max(clamp(1.1rem,3vh,2rem),env(safe-area-inset-top,0rem)) 0} .ua-dialog>.ua-dialog-actions{padding-block:0 clamp(1.1rem,3vh,2rem)} /* OPT-IN legacy centered sheet (surface=sheet): a rounded, bordered glass card at a comfortable max width/height, floating on the blurred overlay. Not used by default; kept for a deliberate small task. */ .ua-dialog[data-ua-dialog-surface=sheet]{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100vw - 4rem),calc(var(--ua-dialog-col,64rem) + 6rem));max-height:min(calc(100vh - 4rem),52rem);border:1px solid color-mix(in srgb,var(--universe-color-primary) 22%,transparent);border-radius:1.5rem;box-shadow:0 2.5rem 6rem rgba(0,0,0,.5);background:color-mix(in srgb,var(--universe-color-background) 70%,transparent);padding-inline:clamp(1.4rem,3vw,2.6rem)} .ua-dialog[data-ua-dialog-surface=sheet][data-ua-fullscreen=false]{width:min(calc(100vw - 4rem),calc(var(--ua-dialog-width,42rem) + 4rem))} /* FULL-BLEED surface (operator §DIALOGS power-tool): the filter / workspace dialog must use ALL the free space — NOT draw in to a centered sheet with empty side margins. surface=fullbleed OPTS OUT of the centered-sheet treatment above, keeping the base full-viewport blurred-glass surface (inset:0, no transform, no max-height, no rounded floating card) on every breakpoint, and widens the content column to use the room. The page behind still blurs through the glass (no dark scrim). */ .ua-dialog[data-ua-dialog-surface=fullbleed]{inset:0;top:0;right:0;bottom:0;left:0;transform:none;width:auto;max-width:none;max-height:none;border:0;border-radius:0;box-shadow:none;background:color-mix(in srgb,var(--universe-color-background) 60%,transparent);padding-inline:clamp(1.4rem,5vw,4rem);--ua-dialog-col:min(100%,86rem)} } .ua-dialog>header,.ua-drawer-header{display:flex;align-items:center;justify-content:space-between;gap:1rem} .ua-dialog>header{padding-block:max(clamp(1rem,3.5vh,2.2rem),env(safe-area-inset-top,0rem)) 0} .ua-dialog>header h2{margin:0;font-family:var(--universe-font-heading,inherit);font-size:clamp(1.45rem,1.1rem + 1.6vw,2.2rem);font-weight:640;letter-spacing:.01em} .ua-dialog-body{display:grid;align-content:center;gap:clamp(.85rem,2vh,1.35rem);padding-block:clamp(.5rem,2vh,1.5rem)} /* The full-bleed (power-tool) dialog body is content-rich and top-aligned: it fills the surface from the top down so the facet grid uses the whole space, rather than floating centered with empty space below. */ .ua-dialog[data-ua-dialog-surface=fullbleed]>.ua-dialog-body{align-content:start} .ua-dialog-actions{padding-block:0 clamp(1rem,3.5vh,2rem)} .ua-dialog-close,.ua-drawer-close{min-width:2.75rem;min-height:2.75rem;border:1px solid color-mix(in srgb,var(--universe-color-primary) 40%,transparent);border-radius:999rem;background:color-mix(in srgb,var(--universe-color-background) 45%,transparent);color:inherit;display:inline-grid;place-items:center;cursor:pointer} .ua-dialog-close svg{inline-size:1.1rem;block-size:1.1rem} .ua-dialog-close:hover,.ua-dialog-close:focus-visible{outline:0;border-color:color-mix(in srgb,var(--universe-color-primary) 70%,transparent);background:color-mix(in srgb,var(--universe-color-primary) 14%,transparent)} html.ua-dialog-lock,html.ua-dialog-lock body{overflow:hidden} @supports not (backdrop-filter:blur(1rem)){.ua-dialog{background:color-mix(in srgb,var(--universe-color-background) 94%,transparent)}.ua-dialog-overlay{background:color-mix(in srgb,var(--universe-color-background) 74%,transparent)}} /* Motion keys off whichever element currently holds the overlay/panel — the portal host once open (state is mirrored onto both the shell and the host by the client). */ @media (prefers-reduced-motion:no-preference){ .ua-dialog-shell[data-ua-dialog-open=true]:not([data-ua-dialog-closing=true]) .ua-dialog-overlay, .ua-dialog-portal[data-ua-dialog-open=true]:not([data-ua-dialog-closing=true]) .ua-dialog-overlay{animation:ua-dialog-fade .32s cubic-bezier(.2,.7,.2,1)} .ua-dialog-shell[data-ua-dialog-open=true]:not([data-ua-dialog-closing=true]) .ua-dialog, .ua-dialog-portal[data-ua-dialog-open=true]:not([data-ua-dialog-closing=true]) .ua-dialog{animation:ua-dialog-rise .36s cubic-bezier(.2,.7,.2,1)} .ua-dialog-shell[data-ua-dialog-closing=true] .ua-dialog-overlay, .ua-dialog-portal[data-ua-dialog-closing=true] .ua-dialog-overlay{animation:ua-dialog-fade .24s cubic-bezier(.4,0,.7,1) reverse forwards} .ua-dialog-shell[data-ua-dialog-closing=true] .ua-dialog, .ua-dialog-portal[data-ua-dialog-closing=true] .ua-dialog{animation:ua-dialog-settle .24s cubic-bezier(.4,0,.7,1) forwards} } @keyframes ua-dialog-fade{from{opacity:0}to{opacity:1}} @keyframes ua-dialog-rise{from{opacity:0;transform:translateY(.85rem) scale(.992)}to{opacity:1;transform:none}} @keyframes ua-dialog-settle{from{opacity:1;transform:none}to{opacity:0;transform:translateY(.5rem) scale(.996)}} /* Desktop the panel is centred with translate(-50%,-50%); the rise/settle motion must keep that centring, so override the keyframes for wide viewports to animate around the centred origin. */ @media (min-width:48rem) and (prefers-reduced-motion:no-preference){ .ua-dialog-shell[data-ua-dialog-open=true]:not([data-ua-dialog-closing=true]) .ua-dialog:not([data-ua-dialog-surface=fullbleed]), .ua-dialog-portal[data-ua-dialog-open=true]:not([data-ua-dialog-closing=true]) .ua-dialog:not([data-ua-dialog-surface=fullbleed]){animation:ua-dialog-rise-center .36s cubic-bezier(.2,.7,.2,1)} .ua-dialog-shell[data-ua-dialog-closing=true] .ua-dialog:not([data-ua-dialog-surface=fullbleed]), .ua-dialog-portal[data-ua-dialog-closing=true] .ua-dialog:not([data-ua-dialog-surface=fullbleed]){animation:ua-dialog-settle-center .24s cubic-bezier(.4,0,.7,1) forwards} /* full-bleed is not translate-centered, so it keeps the non-centered rise/settle keyframes on desktop. */ .ua-dialog-shell[data-ua-dialog-open=true]:not([data-ua-dialog-closing=true]) .ua-dialog[data-ua-dialog-surface=fullbleed], .ua-dialog-portal[data-ua-dialog-open=true]:not([data-ua-dialog-closing=true]) .ua-dialog[data-ua-dialog-surface=fullbleed]{animation:ua-dialog-rise .36s cubic-bezier(.2,.7,.2,1)} .ua-dialog-shell[data-ua-dialog-closing=true] .ua-dialog[data-ua-dialog-surface=fullbleed], .ua-dialog-portal[data-ua-dialog-closing=true] .ua-dialog[data-ua-dialog-surface=fullbleed]{animation:ua-dialog-settle .24s cubic-bezier(.4,0,.7,1) forwards} } @keyframes ua-dialog-rise-center{from{opacity:0;transform:translate(-50%,calc(-50% + .85rem)) scale(.992)}to{opacity:1;transform:translate(-50%,-50%)}} @keyframes ua-dialog-settle-center{from{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,calc(-50% + .5rem)) scale(.996)}} .ua-drawer{position:relative} .ua-drawer-panel{position:fixed;z-index:85;display:grid;grid-template-rows:auto 1fr auto;gap:1rem;padding:1rem;overflow:auto} .ua-drawer-panel[data-ua-edge=left],.ua-drawer-panel[data-ua-edge=right]{top:0;bottom:0;width:min(var(--ua-drawer-size,24rem),calc(100vw - 2rem))} .ua-drawer-panel[data-ua-edge=left]{left:0}.ua-drawer-panel[data-ua-edge=right]{right:0}.ua-drawer-panel[data-ua-edge=top]{top:0;left:0;right:0;max-height:min(var(--ua-drawer-size,24rem),80vh)}.ua-drawer-panel[data-ua-edge=bottom]{bottom:0;left:0;right:0;max-height:min(var(--ua-drawer-size,24rem),80vh)} .ua-drawer-overlay{position:fixed;inset:0;z-index:84;background:rgba(0,0,0,.45)} .ua-tooltip{position:relative;display:inline-flex;align-items:center;gap:.35rem} .ua-tooltip-trigger{display:inline-flex;align-items:center;gap:.35rem;min-height:2.35rem;border:1px solid color-mix(in srgb,var(--universe-color-primary) 26%,transparent);border-radius:.5rem;background:color-mix(in srgb,var(--universe-color-background) 72%,transparent);color:inherit;padding:.35rem .65rem;text-decoration:none;text-underline-offset:.18em;cursor:help} .ua-tooltip-trigger:hover,.ua-tooltip-trigger:focus-visible{border-color:color-mix(in srgb,var(--universe-color-primary) 58%,transparent);background:color-mix(in srgb,var(--universe-color-primary) 14%,var(--universe-color-background));outline:0} .ua-tooltip-bubble{position:absolute;z-index:90;width:min(var(--ua-tooltip-width,18rem),calc(100vw - 2rem));border-radius:.5rem;padding:.72rem .82rem;font-size:.875rem;font-weight:680;line-height:1.38;letter-spacing:0} .ua-tooltip-bubble[hidden]{display:none!important} .ua-tooltip-bubble::after{content:"";position:absolute;width:.65rem;height:.65rem;border:1px solid color-mix(in srgb,var(--universe-color-primary) 28%,transparent);background:inherit;transform:rotate(45deg)} .ua-tooltip[data-ua-position=top] .ua-tooltip-bubble{bottom:calc(100% + .65rem);left:50%;transform:translateX(-50%)}.ua-tooltip[data-ua-position=bottom] .ua-tooltip-bubble{top:calc(100% + .65rem);left:50%;transform:translateX(-50%)}.ua-tooltip[data-ua-position=left] .ua-tooltip-bubble{right:calc(100% + .65rem);top:50%;transform:translateY(-50%)}.ua-tooltip[data-ua-position=right] .ua-tooltip-bubble{left:calc(100% + .65rem);top:50%;transform:translateY(-50%)} .ua-tooltip[data-ua-position=top] .ua-tooltip-bubble::after{bottom:-.36rem;left:calc(50% - .33rem);border-top:0;border-left:0}.ua-tooltip[data-ua-position=bottom] .ua-tooltip-bubble::after{top:-.36rem;left:calc(50% - .33rem);border-bottom:0;border-right:0}.ua-tooltip[data-ua-position=left] .ua-tooltip-bubble::after{right:-.36rem;top:calc(50% - .33rem);border-bottom:0;border-left:0}.ua-tooltip[data-ua-position=right] .ua-tooltip-bubble::after{left:-.36rem;top:calc(50% - .33rem);border-top:0;border-right:0} .ua-scroll-progress{position:sticky;top:0;z-index:40;height:var(--ua-scroll-progress-height,.25rem);background:color-mix(in srgb,var(--universe-color-text) 20%,transparent)} .ua-scroll-progress-bar{display:block;width:var(--ua-scroll-progress-value,0%);height:100%;background:var(--universe-color-primary)} .ua-parallax-section,.ua-sticky-section,.ua-parallax-layers{position:relative;overflow:hidden} .ua-parallax-section{min-height:clamp(18rem,70vh,42rem);display:grid;align-items:center} .ua-sticky-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(1rem,4vw,3rem)} .ua-sticky-pin{position:sticky;top:var(--ua-sticky-top,2rem);align-self:start} .ua-parallax-layer{position:absolute;inset:0;transform:translate3d(0,calc(var(--ua-parallax-progress,0)*var(--ua-layer-speed,1rem)),0);pointer-events:none} .ua-parallax-layer-content{position:relative;z-index:1} .ua-cursor-effect{position:fixed;left:0;top:0;z-index:9999;width:var(--ua-cursor-size,1rem);height:var(--ua-cursor-size,1rem);border-radius:999px;border:1px solid var(--universe-color-primary);pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:var(--ua-cursor-blend,normal)} .ua-confetti{position:relative} .ua-confetti-cue{display:inline-flex;align-items:center;gap:.4rem} .ua-confetti-particle{position:absolute;width:.45rem;height:.75rem;border-radius:.125rem;background:var(--universe-color-primary);opacity:.9} .ua-magnetic-element{display:inline-flex;will-change:transform;transition:transform .18s ease} @media (max-width:48rem){.ua-sticky-section{grid-template-columns:1fr}.ua-sticky-pin{position:relative;top:auto}.ua-drawer-panel{width:100%;max-width:100%}} @media (prefers-reduced-motion:reduce){.ua-parallax-layer,.ua-magnetic-element,.ua-cursor-effect{transform:none!important;transition:none!important}.ua-confetti-particle{display:none}}