/* ========================================================================== WarriorBabe — real Liquid Glass + Hers motion layer Load LAST, after wb-v2.css and wb-brand.css. WHY V2's GLASS LOOKED FLAT Skill §7, "Flat-looking glass: solid backgrounds remove refraction cues." Two mistakes: 1. --glass-light was rgba(255,255,255,.76) — 76% opaque is a tinted panel, not a lens. Real glass sits around .12–.30. 2. There was nothing behind it to refract. A flat gradient gives the blur nothing to bend, so backdrop-filter renders as a no-op. Fix: drop the alpha, raise the blur, and put an ambient colour field behind every glass surface so there is something to distort. MOTION — measured off forhers.com computed styles: reveal opacity,transform 600ms cubic-bezier(.72, 0, .45, 1) ×8 settle 0.67s cubic-bezier(.71, 0, .18, 1) overshoot 8% → −2% float translateY 0 → −15px → 0, slow, infinite hover 300ms ease on colour/box-shadow/backdrop-filter micro 150ms linear on border-color/background-color ========================================================================== */ :root { /* real glass — low alpha, high blur */ /* saturate kept modest — high values over-amplify whatever scrolls under the bar and throw off-brand colour across the chrome */ --g-blur: saturate(140%) blur(28px); --g-blur-strong: saturate(150%) blur(40px); --glass-light: rgba(255,255,255,.22); --glass-light-hi: rgba(255,255,255,.34); --glass-dark: rgba(20,26,14,.28); --glass-dark-hi: rgba(20,26,14,.42); --glass-dark-edge: rgba(255,255,255,.20); /* specular — the highlight that actually sells glass */ --spec-light: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(255,255,255,.18); --spec-dark: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05); /* Hers easing */ --ease-reveal: cubic-bezier(.72, 0, .45, 1); --ease-settle: cubic-bezier(.71, 0, .18, 1); --ease-hover: cubic-bezier(.4, 0, .2, 1); } /* ========================================================================== 1. AMBIENT FIELD — what the glass refracts Three slow-drifting colour blobs behind every dark section. Without this the blur has nothing to bend and the glass reads as flat tint. ========================================================================== */ /* overflow:hidden clips the ambient layer — it is inset -5% horizontally and drifts ±2.5%, which would otherwise push the document wider than the viewport */ .sec-dark, .hero-confirmed, .upsell-head, .chrome { position: relative; isolation: isolate; overflow: hidden; } /* Tonal variation, not fog. Enough structure for the blur to bend, low enough alpha that display type keeps a clean ground. */ .sec-dark::before, .hero-confirmed::before { content: ""; position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none; background: radial-gradient(40% 46% at 16% 18%, rgba(197,237,130,.17), transparent 70%), radial-gradient(36% 42% at 84% 26%, rgba(163,181,141,.13), transparent 72%), radial-gradient(50% 55% at 58% 92%, rgba(30,57,68,.42), transparent 74%), radial-gradient(30% 34% at 94% 76%, rgba(197,237,130,.10), transparent 72%); filter: blur(64px); animation: drift 32s var(--ease-hover) infinite alternate; } @keyframes drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-2.5%, 2%, 0) scale(1.06); } 100% { transform: translate3d(2%, -2.5%, 0) scale(1.03); } } /* light sections get a far subtler version so light glass has something too */ .sec-tint, .sec-3 { position: relative; isolation: isolate; overflow: hidden; } .sec-tint::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 12% 0%, rgba(197,237,130,.30), transparent 70%), radial-gradient(36% 44% at 88% 100%, rgba(180,205,196,.34), transparent 70%); } /* ========================================================================== 2. GLASS SURFACES — genuinely translucent, with specular edges ========================================================================== */ .glass { background: linear-gradient(150deg, var(--glass-light-hi), var(--glass-light)); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border: 1px solid rgba(255,255,255,.55); box-shadow: 0 10px 34px rgba(20,26,14,.14), var(--spec-light); } .glass-dark { background: linear-gradient(150deg, var(--glass-dark-hi), var(--glass-dark)); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border: 1px solid var(--glass-dark-edge); box-shadow: 0 14px 44px rgba(0,0,0,.32), var(--spec-dark); transition: background .3s var(--ease-hover), backdrop-filter .3s var(--ease-hover), box-shadow .3s var(--ease-hover), transform .2s ease-in-out; } /* Hers transitions backdrop-filter on hover — glass-aware interaction */ .glass-dark:hover { background: linear-gradient(150deg, rgba(20,26,14,.34), rgba(20,26,14,.22)); -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong); } /* Sticky bar — content runs edge-to-edge underneath (Apple rule 3), so the backdrop is unpredictable. The bar carries ink text at 14:1 on white, which would fail once it floats over a dark section. Apple's answer is a vibrancy material, not raw transparency: keep enough white in the base that the surface always resolves light, and let the blur carry the colour. At .58/.48 the refraction is still clearly visible (colour from the content below bleeds through) but legibility is guaranteed over any backdrop. Rule 6 beats rule 3 when they conflict. */ .sticky-bar { background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.48)); -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong); border-top: 1px solid rgba(255,255,255,.62); box-shadow: 0 -10px 40px rgba(20,26,14,.14), var(--spec-light); } /* upsell progress chrome */ .chrome { background: linear-gradient(180deg, rgba(20,26,14,.42), rgba(20,26,14,.26)); -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong); border-bottom: 1px solid var(--glass-dark-edge); box-shadow: var(--spec-dark); } /* floating play controls — small, bright, high specular */ .vsl .play, .testi .play, .vid .play { background: linear-gradient(150deg, rgba(255,255,255,.42), rgba(255,255,255,.24)); -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong); border: 1px solid rgba(255,255,255,.65); box-shadow: 0 8px 26px rgba(0,0,0,.30), var(--spec-light); color: #fff; transition: transform .2s ease-in-out, backdrop-filter .3s var(--ease-hover), background .3s var(--ease-hover); } .vsl:hover .play, .testi:hover .play, .vid:hover .play { transform: scale(1.07); } .vsl .play:active, .vid .play:active { transform: scale(.96); } /* badge + appointment card */ .badge, .appt { background: linear-gradient(150deg, var(--glass-dark-hi), var(--glass-dark)); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border: 1px solid var(--glass-dark-edge); box-shadow: 0 14px 44px rgba(0,0,0,.30), var(--spec-dark); } /* ========================================================================== 3. MOTION — Hers vocabulary ========================================================================== */ /* Scroll reveal: opacity+transform 600ms cubic-bezier(.72,0,.45,1). The hidden state is gated behind .js-motion, which wb-motion.js puts on only once it has confirmed it can also REMOVE it. Never hide content from CSS alone — if the observer never fires (JS blocked, script 404s, IntersectionObserver unavailable, page restored from bfcache) the visitor gets a blank sales page and you'd never know. Fail visible. */ .js-motion [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .6s var(--ease-reveal), transform .6s var(--ease-reveal); } .js-motion [data-reveal].in { opacity: 1; transform: none; } /* stagger children */ .js-motion [data-stagger] > * { opacity: 0; transform: translate3d(0,18px,0); transition: opacity .6s var(--ease-reveal), transform .6s var(--ease-reveal); } .js-motion [data-stagger].in > * { opacity: 1; transform: none; } [data-stagger].in > *:nth-child(1) { transition-delay: 0ms; } [data-stagger].in > *:nth-child(2) { transition-delay: 70ms; } [data-stagger].in > *:nth-child(3) { transition-delay: 140ms; } [data-stagger].in > *:nth-child(4) { transition-delay: 210ms; } [data-stagger].in > *:nth-child(5) { transition-delay: 280ms; } [data-stagger].in > *:nth-child(6) { transition-delay: 350ms; } /* settle: Hers' entrance with 8% overshoot then −2% */ @keyframes settle { 0% { opacity: 0; transform: translate3d(0, 26px, 0); } 30% { opacity: 1; transform: translate3d(0, -6px, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } .settle { animation: settle .67s var(--ease-settle) both; } .settle-1 { animation-delay: .06s; } .settle-2 { animation-delay: .14s; } .settle-3 { animation-delay: .22s; } /* ambient float */ @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .floaty { animation: floaty 7s ease-in-out infinite; } /* micro-interactions. */ .btn, .qopt { -webkit-font-smoothing: antialiased; } .btn { transition: background .3s var(--ease-hover), color .3s var(--ease-hover), box-shadow .3s var(--ease-hover), transform .2s ease-in-out; } .btn:hover { transform: translateY(-2px) translateZ(0); } .btn:active { transform: translateY(0) scale(.99) translateZ(0); } .card, .quote, .offer { transition: transform .2s ease-in-out, box-shadow .3s var(--ease-hover), border-color .15s linear; } .card:hover, .quote:hover { transform: translateY(-3px); box-shadow: var(--e-2); } .faq summary { transition: color .15s linear; } .field input, .field select { transition: border-color .15s linear, box-shadow .15s linear; } /* ========================================================================== 4. LOGO PLACEHOLDER — Institute of Health · Women's ========================================================================== */ .ioh-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1; text-decoration: none; color: inherit; } .ioh-logo .mark { font-family: var(--f-body); font-weight: 600; font-size: .62em; letter-spacing: .26em; text-transform: uppercase; opacity: .92; } .ioh-logo .womens { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 1.28em; letter-spacing: -.01em; color: var(--lime); } .sec-dark .ioh-logo, .glass-dark .ioh-logo, footer.site .ioh-logo { color: #fff; } .ioh-logo.on-light .mark { color: var(--moss); } .ioh-logo.on-light .womens { color: var(--moss); } /* flags this as not-final artwork */ .ioh-logo::after { content: "placeholder"; font-family: var(--f-body); font-size: 8px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .38; margin-top: 4px; } /* ========================================================================== 4b. SPECIFICITY LIFT Several pages declare .chrome / .appt / .badge / .vid .play inline in their own