/* ===================================================================== Liquid glass: one material for the navigation and control layer (header, member top bar, menus, buttons, pills and a few panels). Shared by the public site and the member area; loaded after styles.css or member-style.css. assets/js/liquid-glass.js adds the pointer light, size variants, adaptive chrome and, in Chromium, the liquid distortion. Tiers (on , set by the script) default "optical" glass: literal backdrop blur and saturation, a bright entry rim, a darker exit rim, milky thick edges and a caustic glow inside the exit edge. What iOS Safari, Firefox and every browser without the script get. .lg-liquid Chromium (desktop, and Android for the chrome and hero): the backdrop is also smudged and bent at the rim through an SVG displacement map (--lg-distort, [data-lg-distort]). solid prefers-reduced-transparency or no backdrop-filter: opaque. Roles are declared once, in the registry below (rules that set --lg-role); the script reads those rules, so no list is repeated. chrome bars carrying text over changing content; glass on ::before menu frosted sheets: mobile menu, member drawer, dialogs control buttons pill pills, chips, badges panel a few cards (product window, navy panels, notes) Sizes: data-glass-size="xs|sm|md|lg|xl" scales the rim, edge glow, shadow and distortion. Inferred from the short side by the script; set it in HTML or with --lg-size to override. Tone tokens (registered, not inherited, so nested glass keeps its own): --lg-fill --lg-body --lg-sheen --lg-glint --lg-hi --lg-lo --lg-milk --lg-caustic --lg-line --lg-drop --lg-lift --lg-solid Adaptive chrome: data-glass-tone="light|dark" and data-glass-frost="0|1" on the chrome's host (the
). Dark content is a selector list in liquid-glass.js plus [data-surface="dark"] on any element. New surface: add its selector to a role rule below, or put data-glass="control|pill|panel|menu|chrome" on the element; give it tone tokens in its own rule. Blur values stay literal: Safari ignores var() inside backdrop-filter. ===================================================================== */ @property --lg-x{syntax:"";inherits:false;initial-value:50%} @property --lg-y{syntax:"";inherits:false;initial-value:-20%} @property --lg-angle{syntax:"";inherits:false;initial-value:160deg} @property --lg-role{syntax:"*";inherits:false} @property --lg-size{syntax:"*";inherits:false} @property --lg-liquid{syntax:"*";inherits:false} @property --lg-distort{syntax:"*";inherits:false} @property --lg-fill{syntax:"*";inherits:false} @property --lg-body{syntax:"*";inherits:false} @property --lg-sheen{syntax:"*";inherits:false} @property --lg-glint{syntax:"*";inherits:false} @property --lg-hi{syntax:"*";inherits:false} @property --lg-lo{syntax:"*";inherits:false} @property --lg-milk{syntax:"*";inherits:false} @property --lg-caustic{syntax:"*";inherits:false} @property --lg-line{syntax:"*";inherits:false} @property --lg-drop{syntax:"*";inherits:false} @property --lg-lift{syntax:"*";inherits:false} @property --lg-solid{syntax:"*";inherits:false} :root{ --lg-ease:var(--ease-out,cubic-bezier(.16,1,.3,1)); --lg-spring:var(--ease-glass,cubic-bezier(.34,1.4,.64,1)); --lg-state:.4s; --lg-ink:9,30,50; /* Chrome text, light and dark tone (contrast is measured over the worst content beneath) */ --lg-chrome-ink:#132c44; --lg-chrome-text:#34495e; --lg-chrome-ink-dark:#f4f9fd; --lg-chrome-text-dark:#e3eef7 } /* ---- Shared layers of every sized surface ---- */ /* Edges: entry rim, darker exit rim, milky thick edge, caustic inside the exit edge, hairline, drop. They keep the resting light (from above, slightly left); only the rim ring below follows the pointer, so light updates never restart the box-shadow transitions. */ [data-glass-size]{ --lg-shadow: inset calc(var(--lg-edge-w) * .35) var(--lg-edge-w) 0 var(--lg-hi,rgba(255,255,255,.9)), inset calc(var(--lg-edge-w) * -.26) calc(var(--lg-edge-w) * -.75) 0 var(--lg-lo,rgba(var(--lg-ink),.14)), inset 0 0 var(--lg-milk-r) var(--lg-milk,rgba(255,255,255,.32)), inset calc(var(--lg-edge-w) * -1) calc(var(--lg-edge-w) * -3) var(--lg-milk-r) calc(var(--lg-milk-r) * -.5) var(--lg-caustic,rgba(255,255,255,.55)), 0 0 0 .5px var(--lg-line,rgba(var(--lg-ink),.12)), var(--lg-drop,var(--lg-drop-size)), var(--lg-lift,0 0 0 transparent) } /* Rim ring: bright where the light enters, darker where it leaves, a glint toward the pointer. z-index:-1 inside the surface's stacking context keeps it under the label. */ [data-glass-size]::after{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:var(--lg-rim-w);pointer-events:none; --lg-x:inherit;--lg-y:inherit;--lg-angle:inherit;--lg-hi:inherit;--lg-lo:inherit;--lg-glint:inherit; background: radial-gradient(34% 110% at var(--lg-x) var(--lg-y),var(--lg-glint,rgba(255,255,255,.9)),rgba(255,255,255,0) 70%), linear-gradient(var(--lg-angle),var(--lg-hi,rgba(255,255,255,.95)),rgba(255,255,255,.22) 22%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 58%,var(--lg-lo,rgba(var(--lg-ink),.18)) 92%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude } /* Size variants */ [data-glass-size="xs"]{--lg-rim-w:.75px;--lg-edge-w:1px;--lg-milk-r:3px;--lg-drop-size:0 1px 1px rgba(var(--lg-ink),.1),0 2px 5px -2px rgba(var(--lg-ink),.2)} [data-glass-size="sm"]{--lg-rim-w:.75px;--lg-edge-w:1.1px;--lg-milk-r:4px;--lg-drop-size:0 1px 2px rgba(var(--lg-ink),.1),0 4px 10px -4px rgba(var(--lg-ink),.24)} [data-glass-size="md"]{--lg-rim-w:1px;--lg-edge-w:1.3px;--lg-milk-r:7px;--lg-drop-size:0 2px 4px -1px rgba(var(--lg-ink),.14),0 8px 18px -6px rgba(var(--lg-ink),.26)} [data-glass-size="lg"]{--lg-rim-w:1px;--lg-edge-w:1.4px;--lg-milk-r:10px;--lg-drop-size:0 2px 6px -2px rgba(var(--lg-ink),.12),0 18px 40px -16px rgba(var(--lg-ink),.32)} [data-glass-size="xl"]{--lg-rim-w:1.25px;--lg-edge-w:1.5px;--lg-milk-r:14px;--lg-drop-size:0 3px 8px -3px rgba(var(--lg-ink),.12),0 24px 60px -28px rgba(var(--lg-ink),.42)} /* ---- Registry: every glass surface and its role (liquid-glass.js reads these rules) ---- */ /* Chrome: the glass sits on ::before so menus and controls inside can sample the page */ .site-header .nav-row,.member-header,[data-glass="chrome"]{--lg-role:chrome;--lg-size:xl;isolation:isolate} .site-header .nav-row::before,.member-header::before,[data-glass="chrome"]::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; --lg-fill:inherit;--lg-distort:inherit; background-color:var(--lg-fill,rgba(250,252,254,.34)); -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); box-shadow:var(--lg-shadow,inset 0 1px 0 rgba(255,255,255,.85),0 0 0 .5px rgba(9,30,50,.12),0 10px 24px -12px rgba(9,30,50,.3)); transition:background-color var(--lg-state) var(--lg-ease),box-shadow var(--lg-state) var(--lg-ease) } /* Menus: frosted sheets that keep their links legible over anything */ .site-header .main-nav,.member-sidebar,.notice-dialog,[data-glass="menu"]{ --lg-role:menu;--lg-size:lg; isolation:isolate;border:0; background-color:var(--lg-fill,rgba(248,251,253,.84)); background-image:none; -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%); box-shadow:var(--lg-shadow,inset 0 1px 0 #fff,0 0 0 .5px rgba(9,30,50,.12),0 24px 50px -20px rgba(9,30,50,.45)) } /* Controls: buttons (light glass unless a tone below says otherwise) */ .button:not(.nav-login),.btn,.menu-button,.dialog-close,.video-icon,[data-glass="control"]{ --lg-role:control; position:relative;isolation:isolate;border-color:transparent;border-radius:999px; background-color:var(--lg-fill,rgba(255,255,255,.16)); background-image:radial-gradient(70% 130% at var(--lg-x) var(--lg-y),var(--lg-sheen,rgba(255,255,255,.4)),rgba(255,255,255,0) 62%),var(--lg-body,none); -webkit-backdrop-filter:blur(4px) saturate(190%); backdrop-filter:blur(4px) saturate(190%); box-shadow:var(--lg-shadow,inset 0 1px 0 rgba(255,255,255,.85),0 0 0 .5px rgba(9,30,50,.12),0 6px 14px -6px rgba(9,30,50,.24)); transition:transform .45s var(--lg-spring),box-shadow .3s var(--lg-ease),background-color .3s var(--lg-ease),color .2s } /* Pills: eyebrows, kickers, the trust tray, chips and badges */ .hero .eyebrow-pill,.tour-hero .kicker,.app-intro>.kicker,.bottom-cta .kicker,.tour-final .kicker,.hero .micro-trust,.app-perks,.tier-top .tier-chip,.header-demo,.hero-experience .demo-label,[data-glass="pill"]{ --lg-role:pill; position:relative;isolation:isolate;border:0;border-radius:999px; background-color:var(--lg-fill,rgba(255,255,255,.1)); background-image:radial-gradient(70% 130% at var(--lg-x) var(--lg-y),var(--lg-sheen,rgba(255,255,255,.34)),rgba(255,255,255,0) 62%); -webkit-backdrop-filter:blur(2.5px) saturate(180%); backdrop-filter:blur(2.5px) saturate(180%); box-shadow:var(--lg-shadow,inset 0 1px 0 rgba(255,255,255,.85),0 0 0 .5px rgba(9,30,50,.12),0 4px 10px -4px rgba(9,30,50,.24)) } /* Panels: few, larger, calmer */ .hero-experience .demo-window,.tour-ui,.mission-pledge,.mission-v5-panel,.calc-warning,.demo-banner,.account-card,[data-glass="panel"]{ --lg-role:panel; position:relative;isolation:isolate;border:0; background-color:var(--lg-fill,rgba(255,255,255,.34)); background-image:radial-gradient(60% 50% at var(--lg-x) var(--lg-y),var(--lg-sheen,rgba(255,255,255,.36)),rgba(255,255,255,0) 60%); -webkit-backdrop-filter:blur(10px) saturate(170%); backdrop-filter:blur(10px) saturate(170%); box-shadow:var(--lg-shadow,inset 0 1px 0 rgba(255,255,255,.85),0 0 0 .5px rgba(9,30,50,.12),0 18px 40px -16px rgba(9,30,50,.3)) } /* ---- Tones ---- */ .button-outline,.button-ghost,.btn{color:var(--ink)} /* Tinted glass: the blue body is deep enough for a white label at every point; the light stays on the rim */ .button-blue,.btn-primary{ color:#fff;text-shadow:0 1px 1px rgba(6,40,72,.3); --lg-fill:rgba(20,96,168,.1); --lg-body:linear-gradient(180deg,rgba(27,110,186,.95),rgba(13,82,150,.96)); --lg-sheen:transparent;--lg-glint:rgba(255,255,255,.95); --lg-hi:rgba(255,255,255,.66);--lg-lo:rgba(4,30,60,.5); --lg-milk:rgba(255,255,255,.1);--lg-caustic:rgba(140,200,255,.3); --lg-line:rgba(8,50,90,.4);--lg-lift:0 0 22px rgba(23,109,182,.26);--lg-solid:#176db6 } .btn-soft{color:#135d8f;--lg-fill:rgba(214,234,248,.5);--lg-solid:#e8f3fa} /* Milky glass for the navy call to action: the navy shows through, the label stays crisp */ .button-white{ color:#0f3552; --lg-fill:rgba(255,255,255,.74); --lg-body:linear-gradient(180deg,rgba(255,255,255,.28),rgba(226,240,251,.12)); --lg-sheen:rgba(255,255,255,.9);--lg-lo:rgba(0,8,20,.24);--lg-line:rgba(255,255,255,.3); --lg-lift:0 10px 30px -10px rgba(0,8,20,.5);--lg-solid:#fff } /* Dark glass over navy sections */ .bottom-cta .kicker,.tour-final .kicker,.video-icon,.mission-pledge,.mission-v5-panel{ --lg-fill:rgba(255,255,255,.06);--lg-sheen:rgba(255,255,255,.1);--lg-glint:rgba(255,255,255,.55); --lg-hi:rgba(255,255,255,.5);--lg-lo:rgba(0,8,20,.42);--lg-milk:rgba(255,255,255,.07);--lg-caustic:rgba(255,255,255,.14); --lg-line:rgba(255,255,255,.1);--lg-lift:0 10px 30px -10px rgba(0,8,20,.55);--lg-solid:#173d5c } .tier-top .tier-chip,.header-demo{--lg-fill:rgba(224,240,251,.55);--lg-lo:rgba(23,109,182,.2);--lg-line:rgba(23,109,182,.18);--lg-solid:#e8f3fa} .demo-banner{--lg-fill:rgba(236,246,253,.55);--lg-line:rgba(23,109,182,.16);--lg-solid:#eef6fc} /* ---- Liquid tier (Chromium): the script adds a displacement map per surface ---- */ .lg-liquid [data-lg-distort="self"]{backdrop-filter:var(--lg-distort) blur(.8px) saturate(180%)} .lg-liquid [data-lg-distort="before"]::before{backdrop-filter:var(--lg-distort) blur(2px) saturate(180%)} /* ---- Navigation: a floating glass capsule ---- */ .site-header,.site-header.is-scrolled{height:auto;padding:max(12px,env(safe-area-inset-top)) 0 0;background:none;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none} .site-header .nav-row{position:relative;z-index:0;height:60px;padding:0 8px 0 18px;border-radius:999px} .site-header .nav-row:not(:has(.nav-apply)){padding-right:22px} .site-header .brand-text{color:var(--lg-chrome-ink)} .site-header .main-nav>a,.site-header .nav-actions .text-button,.site-header .nav-actions .nav-login{color:var(--lg-chrome-text)} .site-header .brand-text,.site-header .main-nav>a,.site-header .nav-actions .text-button,.site-header .nav-actions .nav-login{transition:color var(--lg-state) var(--lg-ease),background-color .25s,box-shadow .25s} .site-header .main-nav,.site-header .nav-actions{gap:2px} .site-header .main-nav>a,.site-header .nav-actions .text-button,.site-header .nav-actions .nav-login{padding:9px 13px;border-radius:999px} .site-header .nav-actions .text-button,.site-header .nav-actions .nav-login{min-height:44px} .site-header .nav-actions .nav-login,.site-header .nav-actions .nav-login:active{background:none;box-shadow:none;text-shadow:none;transform:none;-webkit-backdrop-filter:none;backdrop-filter:none} .site-header .nav-apply{min-height:44px;padding:0 18px;margin-left:8px} @media(hover:hover) and (pointer:fine){ .site-header .main-nav>a:hover,.site-header .nav-actions .text-button:hover,.site-header .nav-actions .nav-login:hover{color:var(--lg-chrome-ink);background:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 5px rgba(255,255,255,.6),0 0 0 .5px rgba(9,30,50,.08),0 4px 8px -4px rgba(9,30,50,.22)} } @media(max-width:1240px){.site-header .main-nav>a,.site-header .nav-actions .text-button,.site-header .nav-actions .nav-login{padding:9px 10px}} @media(max-width:1170px){.site-header .main-nav>a,.site-header .nav-actions .text-button,.site-header .nav-actions .nav-login{padding:8px 8px}} @media(max-width:1080px){.site-header .nav-row{gap:6px}.site-header .main-nav>a,.site-header .nav-actions .text-button,.site-header .nav-actions .nav-login{padding:8px 5px}.site-header .nav-apply{padding:0 14px;margin-left:4px}} /* On wide screens the nav is a row of links inside the capsule, not a sheet */ @media(min-width:991px){ .site-header .main-nav{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;isolation:auto} .site-header .main-nav::after{content:none} } /* Mobile menu: a frosted sheet under the capsule that settles in and fades out */ @media(max-width:990px){ .site-header .nav-row{height:58px;padding:0 6px 0 14px} .site-header .main-nav{ display:flex;top:calc(100% + 8px);left:0;right:0;padding:8px;gap:2px;border-radius:26px; visibility:hidden;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none; transition:opacity .2s var(--lg-ease),transform .24s var(--lg-ease),visibility 0s linear .24s } .site-header .main-nav.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .24s var(--lg-ease),transform .42s var(--lg-ease),visibility 0s} .site-header .main-nav>a{min-height:48px;padding:13px 16px;line-height:22px;border-radius:16px;border-bottom:0;color:var(--lg-chrome-ink)} .site-header .main-nav>a:focus-visible,.site-header .main-nav>a:active{background:rgba(255,255,255,.66);box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(9,30,50,.08)} .site-header .main-nav .mobile-nav-cta{color:#15609f} .site-header .mobile-toggle{width:44px;height:44px;align-items:center;border-radius:999px;transition:background-color .25s} /* A light scrim behind the sheet (the capsule and sheet stay above it) */ .site-header::after{content:"";position:fixed;inset:0;z-index:-1;background:rgba(8,29,48,.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--lg-ease),visibility 0s linear .3s} .site-header:has(.main-nav.open)::after{opacity:1;visibility:visible;transition:opacity .3s var(--lg-ease),visibility 0s} } @media(max-width:990px) and (hover:hover) and (pointer:fine){ .site-header .mobile-toggle:hover{background:rgba(255,255,255,.5)} .site-header .main-nav>a:hover{background:rgba(255,255,255,.66);box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(9,30,50,.08)} .site-header[data-glass-tone="dark"] .main-nav>a:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} } @media(max-width:720px){.site-header,.site-header.is-scrolled{padding-top:max(10px,env(safe-area-inset-top))}.site-header .nav-row{height:56px}} /* ---- Adaptive chrome: data-glass-tone / data-glass-frost on the header (liquid-glass.js) ---- */ /* Frost: content is passing under the text, so the glass thickens (the rim stays clear) */ .site-header[data-glass-frost="1"] .nav-row,.member-header[data-glass-frost="1"]{--lg-fill:rgba(247,250,252,.74)} .site-header[data-glass-frost="1"] .nav-row::before,.member-header[data-glass-frost="1"]::before{-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%)} /* Dark tone over navy: dark glass, light text */ .site-header[data-glass-tone="dark"] .nav-row,.member-header[data-glass-tone="dark"]{ --lg-fill:rgba(10,32,54,.5);--lg-hi:rgba(255,255,255,.5);--lg-lo:rgba(0,8,20,.4);--lg-milk:rgba(255,255,255,.08); --lg-caustic:rgba(255,255,255,.14);--lg-line:rgba(255,255,255,.1);--lg-glint:rgba(255,255,255,.5); --lg-lift:0 10px 30px -12px rgba(0,8,20,.5);--lg-solid:#10304c } .site-header[data-glass-tone="dark"][data-glass-frost="1"] .nav-row,.member-header[data-glass-tone="dark"][data-glass-frost="1"]{--lg-fill:rgba(8,26,44,.78)} .site-header[data-glass-tone="dark"] .brand-text{color:var(--lg-chrome-ink-dark)} .site-header[data-glass-tone="dark"] .nav-actions .text-button,.site-header[data-glass-tone="dark"] .nav-actions .nav-login{color:var(--lg-chrome-text-dark)} .site-header[data-glass-tone="dark"] .mobile-toggle span{background:var(--lg-chrome-ink-dark)} @media(min-width:991px){.site-header[data-glass-tone="dark"] .main-nav>a{color:var(--lg-chrome-text-dark)}} @media(hover:hover) and (pointer:fine){ .site-header[data-glass-tone="dark"] .main-nav>a:hover,.site-header[data-glass-tone="dark"] .nav-actions .text-button:hover,.site-header[data-glass-tone="dark"] .nav-actions .nav-login:hover{color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)} } @media(max-width:990px) and (hover:hover) and (pointer:fine){.site-header[data-glass-tone="dark"] .mobile-toggle:hover{background:rgba(255,255,255,.12)}} /* Over navy the mobile menu is a dark sheet, matching the capsule */ @media(max-width:990px){ .site-header[data-glass-tone="dark"] .main-nav{--lg-fill:rgba(11,33,55,.86);--lg-hi:rgba(255,255,255,.42);--lg-lo:rgba(0,8,20,.4);--lg-milk:rgba(255,255,255,.06);--lg-caustic:rgba(255,255,255,.1);--lg-line:rgba(255,255,255,.1);--lg-glint:rgba(255,255,255,.4);--lg-solid:#10304c} .site-header[data-glass-tone="dark"] .main-nav>a{color:var(--lg-chrome-ink-dark)} .site-header[data-glass-tone="dark"] .main-nav .mobile-nav-cta{color:#9fd3ff} .site-header[data-glass-tone="dark"] .main-nav>a:focus-visible,.site-header[data-glass-tone="dark"] .main-nav>a:active{background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} } /* ---- Buttons: glass capsules that swell under the pointer and squeeze when pressed ---- */ :is(.button,.btn):hover:not(:disabled,.nav-login){ transform:none; background-color:var(--lg-fill,rgba(255,255,255,.16)); background-image:radial-gradient(70% 130% at var(--lg-x) var(--lg-y),var(--lg-sheen,rgba(255,255,255,.4)),rgba(255,255,255,0) 62%),var(--lg-body,none); box-shadow:var(--lg-shadow,inset 0 1px 0 rgba(255,255,255,.85),0 0 0 .5px rgba(9,30,50,.12),0 6px 14px -6px rgba(9,30,50,.24)) } @media(hover:hover) and (pointer:fine){ :is(.button,.btn):hover:not(:disabled,.nav-login){transform:scale(1.02);--lg-drop:0 3px 6px -2px rgba(var(--lg-ink),.16),0 14px 26px -10px rgba(var(--lg-ink),.34)} .button:hover span[aria-hidden="true"]:last-child{transform:translate(2px,-2px)} .button[href^="#"]:not([data-checkout]):hover span[aria-hidden="true"]:last-child{transform:translateY(2px)} :is(.button-blue,.btn-primary):hover:not(:disabled){--lg-lift:0 0 30px rgba(23,109,182,.36)} :is(.button-outline,.button-ghost,.btn):hover:not(:disabled,.btn-primary){--lg-fill:rgba(255,255,255,.26)} .button-white:hover{--lg-fill:rgba(255,255,255,.86)} } /* Press: a short squeeze, the touch feedback (hover effects above are pointer-only) */ :is(.button,.btn,.menu-button,.dialog-close,.site-header .mobile-toggle,[data-glass="control"]):active:not(:disabled,.nav-login){transform:scale(.98);transition-duration:.12s} .button span[aria-hidden="true"]:last-child{transition:transform .45s var(--lg-spring)} /* ---- Hero details: glass eyebrow pills and a glass tray for the trust line ---- */ .hero .eyebrow-pill,.tour-hero .kicker,.app-intro>.kicker{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 14px;color:#1d5a86} .tour-hero .kicker,.app-intro>.kicker{font-size:11px;letter-spacing:.12em} .tour-hero .kicker::before,.app-intro>.kicker::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:#3ba0ea;box-shadow:0 0 0 4px rgba(39,143,215,.12)} .hero .eyebrow-pill,.hero-cta .button{--lg-liquid:all} @media(min-width:721px){.hero .micro-trust,.app-perks{display:inline-flex;padding:10px 20px}} /* On phones the trust line wraps onto several lines, so it is plain text */ @media(max-width:720px){ .hero .micro-trust,.app-perks,.lg-liquid .hero .micro-trust,.lg-liquid .app-perks{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none} .hero .micro-trust::after,.app-perks::after{content:none} } /* ---- Product windows: glass chrome around an opaque app, as in visionOS ---- */ .hero-experience .demo-window,.tour-ui{padding:0 8px 8px;overflow:visible;--lg-fill:rgba(255,255,255,.3)} .hero-experience .demo-window{border-radius:28px} .hero-experience .demo-topbar{height:46px;padding:0 10px 0 16px;background:none;border:0} .hero-experience .demo-layout,.tour-ui-content{border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 0 0 .5px rgba(9,30,50,.1),0 1px 3px rgba(9,30,50,.1)} .hero-experience .demo-label{padding:6px 11px;color:#1f5f8c;--lg-fill:rgba(255,255,255,.45)} .tour-ui{border-radius:26px} .tour-ui-top{padding:0 12px;background:none;color:#1b4a6d} .tour-ui-top span:last-child{color:#4f7593} .tour-ui-content{border-radius:18px} @media(max-width:720px){.hero-experience .demo-window{border-radius:24px;padding:0 6px 6px}.hero-experience .demo-topbar{height:40px}.hero-experience .demo-layout{border-radius:18px}} /* ---- Navy sections: dark glass ---- */ .mission-pledge{border-radius:24px} .mission-v5-panel{border-radius:28px;color:#fff} .mission-v5-panel .kicker{color:#9fdbff} .mission-steps>div{border-bottom-color:rgba(255,255,255,.1)} .mission-steps>div>span{border:0;border-radius:12px;color:#d7ecff;background:rgba(255,255,255,.08);box-shadow:inset .5px 1px 0 rgba(255,255,255,.4),inset 0 0 6px rgba(255,255,255,.1),0 3px 6px -2px rgba(0,6,16,.3)} .mission-steps strong{color:#fff} .mission-steps p{color:#b6c9da} .bottom-cta .kicker,.tour-final .kicker{display:inline-flex;align-items:center;gap:9px;padding:9px 16px} .bottom-cta .kicker::before,.tour-final .kicker::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:#7cc8ff;box-shadow:0 0 0 4px rgba(124,200,255,.16),0 0 12px rgba(124,200,255,.8)} .video-icon{position:absolute;border:0} /* ---- Small surfaces: plan chip, estimator note, dialog, toasts ---- */ .tier-top .tier-chip{padding:6px 11px} .calc-warning{border-radius:20px;-webkit-backdrop-filter:blur(6px) saturate(170%);backdrop-filter:blur(6px) saturate(170%)} .notice-dialog{border-radius:30px;--lg-fill:rgba(250,252,254,.76)} .notice-dialog::backdrop{background:rgba(8,32,52,.26);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .dialog-close{position:absolute;--lg-fill:rgba(255,255,255,.4)} .account-toast{bottom:calc(24px + env(safe-area-inset-bottom))} .demo-toast{bottom:calc(22px + env(safe-area-inset-bottom));right:calc(22px + env(safe-area-inset-right))} .account-toast,.demo-toast{border-radius:18px;background:rgba(14,42,66,.78);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset .5px 1px 0 rgba(255,255,255,.35),inset 0 0 8px rgba(255,255,255,.1),0 8px 12px -2px rgba(0,6,16,.35),0 0 30px rgba(0,6,16,.22)} /* ---- Member area: floating glass top bar, sidebar and drawer ---- */ .member-header{top:max(12px,env(safe-area-inset-top));margin:12px 12px 0;min-height:64px;padding:0 20px 0 24px;border:0;border-radius:22px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none} .member-header .member-header-brand{color:var(--lg-chrome-text)} .member-header .member-header-brand span:last-child{color:var(--lg-chrome-ink)} .member-header .back-marketing{display:inline-flex;align-items:center;min-height:44px;color:var(--lg-chrome-text)} .member-header .header-demo{color:#135d8f} .member-header .member-header-brand,.member-header .member-header-brand span,.member-header .back-marketing,.member-header .header-demo{transition:color var(--lg-state) var(--lg-ease)} .member-header[data-glass-tone="dark"] .member-header-brand,.member-header[data-glass-tone="dark"] .back-marketing{color:var(--lg-chrome-text-dark)} .member-header[data-glass-tone="dark"] .member-header-brand span:last-child{color:var(--lg-chrome-ink-dark)} .member-header[data-glass-tone="dark"] .member-header-brand span:not(:last-child){color:rgba(227,238,247,.6)} .member-header[data-glass-tone="dark"] .header-demo{color:#d8ecfa;--lg-fill:rgba(255,255,255,.1);--lg-sheen:rgba(255,255,255,.08);--lg-hi:rgba(255,255,255,.45);--lg-lo:rgba(0,8,20,.4);--lg-milk:rgba(255,255,255,.06);--lg-caustic:rgba(255,255,255,.12);--lg-line:rgba(255,255,255,.14);--lg-solid:#1d4466} .menu-button{width:44px;height:44px;min-width:44px;min-height:44px;border:0;--lg-fill:rgba(255,255,255,.3)} .member-header[data-glass-tone="dark"] .menu-button{color:var(--lg-chrome-ink-dark);--lg-fill:rgba(255,255,255,.1);--lg-hi:rgba(255,255,255,.5);--lg-lo:rgba(0,8,20,.4);--lg-milk:rgba(255,255,255,.08);--lg-caustic:rgba(255,255,255,.14);--lg-line:rgba(255,255,255,.14);--lg-solid:#1d4466} .member-sidebar{top:12px;height:calc(100vh - 24px);height:calc(100dvh - 24px);margin:12px 0 12px 12px;border-radius:26px;--lg-fill:rgba(255,255,255,.56)} .member-nav-link{border-radius:14px;transition:background-color .2s,box-shadow .2s,color .18s} .member-nav-link.current{background:rgba(255,255,255,.62);box-shadow:inset .5px 1px 0 #fff,inset 0 0 6px rgba(255,255,255,.7),0 0 0 .5px rgba(9,30,50,.08),0 4px 8px -3px rgba(9,30,50,.22)} .member-nav-link:active{background:rgba(255,255,255,.62)} @media(hover:hover) and (pointer:fine){.member-nav-link:hover{background:rgba(255,255,255,.62);box-shadow:inset .5px 1px 0 #fff,inset 0 0 6px rgba(255,255,255,.7),0 0 0 .5px rgba(9,30,50,.08),0 4px 8px -3px rgba(9,30,50,.22)}} .demo-banner{border-radius:18px} .account-card{border-radius:30px;--lg-fill:rgba(255,255,255,.56);-webkit-backdrop-filter:blur(20px) saturate(190%);backdrop-filter:blur(20px) saturate(190%)} /* Over the honeycomb (login page) the card turns liquid: clearer, with the plates smudged through it */ .account-page[data-hex-field] .account-card{--lg-fill:rgba(255,255,255,.42);--lg-liquid:fine;-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%)} .lg-liquid .account-page[data-hex-field] .account-card[data-lg-distort]{backdrop-filter:var(--lg-distort) blur(3px) saturate(170%)} @media(max-width:1280px){.member-header{padding:0 18px 0 22px}} /* Drawer: a frosted sheet that slides in over a scrim */ @media(max-width:1023px){ .member-sidebar{ position:fixed;top:max(12px,env(safe-area-inset-top));bottom:auto;left:max(12px,env(safe-area-inset-left)); height:calc(100vh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom))); height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom))); width:min(320px,calc(100% - 56px));margin:0; --lg-fill:rgba(247,250,252,.86); visibility:hidden;opacity:0;transform:translateX(calc(-100% - 24px)); transition:transform .34s var(--lg-ease),opacity .26s var(--lg-ease),visibility 0s linear .34s } .member-sidebar.open{visibility:visible;opacity:1;transform:none;transition:transform .5s var(--lg-ease),opacity .2s var(--lg-ease),visibility 0s} .member-sidebar .member-nav-link{min-height:48px;color:#3a5166} .member-shell::before{content:"";position:fixed;inset:0;z-index:30;background:rgba(8,29,48,.34);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .34s var(--lg-ease),visibility 0s linear .34s} .member-shell:has(.member-sidebar.open)::before{opacity:1;visibility:visible;transition:opacity .34s var(--lg-ease),visibility 0s} /* member-app.js sets data-scrim once a tap on the scrim closes the drawer */ .member-shell[data-scrim]:has(.member-sidebar.open)::before{pointer-events:auto} /* The drawer covers the top bar's links; hide the sliver that would peek out under the scrim */ .member-menu-open .member-header :is(.back-marketing,.header-demo){visibility:hidden} } @media(max-width:719px){.member-header{top:max(8px,env(safe-area-inset-top));margin:8px 8px 0;min-height:56px;padding:0 12px 0 14px;border-radius:18px}} /* ---- Reduced motion: no swell, squeeze or slide; state changes fade ---- */ @media(prefers-reduced-motion:reduce){ :is(.button,.btn,.menu-button,.dialog-close,.site-header .mobile-toggle,[data-glass="control"]):is(:hover,:active):not(:disabled){transform:none} .button:hover span[aria-hidden="true"]:last-child{transform:none} .site-header .main-nav,.site-header .main-nav.open,.member-sidebar,.member-sidebar.open{transform:none} } /* ---- Solid tier: opaque surfaces when transparency is reduced or unsupported. !important so no state or hover rule can bring the transparency back. ---- */ @media(prefers-reduced-transparency:reduce){ [data-glass-size]{--lg-fill:var(--lg-solid,#f9fbfc)!important;--lg-body:none!important;--lg-sheen:transparent!important} [data-glass-size],.site-header .nav-row::before,.member-header::before,.account-toast,.demo-toast{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} .account-toast,.demo-toast{background:#143e5b!important} } /* ---- Forced colors (Windows high contrast): plain system surfaces ---- */ @media(forced-colors:active){ [data-glass-size],.site-header .nav-row::before,.member-header::before,.account-toast,.demo-toast{ background:Canvas!important;border:1px solid CanvasText;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important } .site-header .nav-row,.member-header{border:0} [data-glass-size]::after{content:none} } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ [data-glass-size]{--lg-fill:var(--lg-solid,#f9fbfc)!important;--lg-body:none!important} }