.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,var(--ua-color-text,#f6f0df));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,#07090f) 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,#07090f) 88%,transparent);border:1px solid color-mix(in srgb,var(--universe-color-primary,#e8c471) 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,#07090f) 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){ .ua-dialog{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,#e8c471) 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,#07090f) 70%,transparent);padding-inline:clamp(1.4rem,3vw,2.6rem)} .ua-dialog[data-ua-fullscreen=false]{width:min(calc(100vw - 4rem),calc(var(--ua-dialog-width,42rem) + 4rem))} .ua-dialog>header{padding-block:clamp(1.1rem,2.6vh,1.9rem) 0} .ua-dialog>.ua-dialog-actions{padding-block:0 clamp(1.1rem,2.6vh,1.9rem)} /* 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,#07090f) 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,#e8c471) 40%,transparent);border-radius:999rem;background:color-mix(in srgb,var(--universe-color-background,#07090f) 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,#e8c471) 70%,transparent);background:color-mix(in srgb,var(--universe-color-primary,#e8c471) 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,#07090f) 94%,transparent)}.ua-dialog-overlay{background:color-mix(in srgb,var(--universe-color-background,#07090f) 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,#e8c471) 26%,transparent);border-radius:.5rem;background:color-mix(in srgb,var(--universe-color-background,#07090f) 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,#e8c471) 58%,transparent);background:color-mix(in srgb,var(--universe-color-primary,#e8c471) 14%,var(--universe-color-background,#07090f));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,#e8c471) 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,#f6f0df) 20%,transparent)} .ua-scroll-progress-bar{display:block;width:var(--ua-scroll-progress-value,0%);height:100%;background:var(--universe-color-primary,#e8c471)} .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,#e8c471);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,#e8c471);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}}