/* Evopure product page: the glass bag bar, Uplift's build (lab/site/pdp-r5/glass/build/evo-bagbar.css, 10 Nov) as delivered, with two fixes from the 20-size device matrix (10 Nov): the full-width (phone) layout runs up to 899px, since the desktop bar is 740px wide (wider with three strengths) and ran off a 673px folding screen, and an 820px tablet with Broad Spectrum Oil's three strengths (the build had 640px); and at 360px and narrower the Subscribe / One-time toggle is not in the bar (thumbnail, ADD and the price only; the buy box holds the plan choice, the bar's price follows it): the Master, 10 Nov, rather than squeeze it (the labels overlapped at 320 / 344 in the build, and were down to 6px of room at 320 after a first fix). */ /* Evopure bag bar: liquid glass (approved by Haseeb 10 Nov 2026, v5 "Liquid glass" in glass/v5.html). One neutral glass for every pillar. Squared, with the site's signature top-right corner rounding on hover. Only transform and opacity animate while scrolling. border-top-right-radius animates on hover only (small elements, one-off). */ .evo-bb{ /* geometry: one inset everywhere, so the thumbnail and the button sit the same distance from the glass edge */ --h:46px;--in:6px;--item:calc(var(--h) - 2*var(--in));--R:16px;--r:calc(var(--R) - var(--in)); /* real damped springs, sampled into linear() (Safari 17.2+, Chrome 113+; older browsers fall back to the transition's default ease) */ --bb-soft:linear(0,.0235,.0839,.1681,.2657,.3685,.4706,.5676,.6565,.7358,.8045,.8627,.9106,.949,.9789,1.0013,1.0174,1.0282,1.0347,1.0378,1.0384,1.037,1.0345,1.0311,1.0272,1.0233,1.0194,1.0157,1.0124,1.0095,1.0069,1.0048,1.003,1.0016,1.0006,.9998,.9992,.9988,.9986,.9985,.9985,.9986,.9987,.9988,.999,.9991,.9993,.9994,1); --bb-snap:linear(0,.0431,.1508,.2948,.4523,.6064,.7456,.8632,.9561,1.0244,1.0699,1.0959,1.1062,1.1047,1.0952,1.0808,1.0643,1.0475,1.032,1.0186,1.0078,.9996,.9939,.9905,.9889,.9886,.9894,.9908,.9925,.9943,.996,.9976,.9988,.9998,1.0005,1.0009,1.0011,1.0012,1.0012,1.001,1.0009,1.0007,1.0005,1.0003,1.0002,1.0001,1,.9999,1); --bb-ez:cubic-bezier(.22,.61,.36,1); --bb-navy:var(--evo-navy,#1D293B);--bb-focus:var(--pd,#6B6682); --bb-sans:var(--evo-font-body,"DM Sans","Helvetica Neue",Arial,sans-serif); --bb-display:var(--evo-font-display,"neue-haas-grotesk-display","Helvetica Neue",Arial,sans-serif); --bb-serif:var(--evo-font-serif,"new-spirit",Georgia,serif); position:fixed;left:50%;bottom:18px;z-index:50;width:max-content;height:var(--h);display:flex;align-items:center;gap:10px;padding:0 var(--in); color:var(--bb-navy);font:500 14px/1 var(--bb-sans);transform:translate3d(-50%,150%,0);opacity:0; transition:transform .9s var(--bb-soft),opacity .45s var(--bb-ez)} .evo-bb.is-on{transform:translate3d(-50%,0,0);opacity:1} /* glass stack: every layer follows the bar's corner */ .evo-bb__glass,.evo-bb__tint,.evo-bb__tint i,.evo-bb__light,.evo-bb__amb,.evo-bb__sheen{position:absolute;inset:0;pointer-events:none;border-top-right-radius:0;transform-origin:50% 50%; transition:border-top-right-radius .65s var(--bb-soft),transform .75s var(--bb-soft)} .evo-bb:hover :is(.evo-bb__glass,.evo-bb__tint,.evo-bb__tint i,.evo-bb__light,.evo-bb__amb,.evo-bb__sheen), html.evo-kbd .evo-bb:has(:focus-visible) :is(.evo-bb__glass,.evo-bb__tint,.evo-bb__tint i,.evo-bb__light,.evo-bb__amb,.evo-bb__sheen){border-top-right-radius:var(--R)} .evo-bb:hover .evo-bb__cta,html.evo-kbd .evo-bb:has(:focus-visible) .evo-bb__cta{border-top-right-radius:var(--r)} /* 1. the only backdrop layer, on its own compositing layer; its filter never changes */ .evo-bb__glass{z-index:-5;-webkit-backdrop-filter:blur(24px) saturate(160%) brightness(1.08);backdrop-filter:blur(24px) saturate(160%) brightness(1.08);transform:translateZ(0);will-change:transform} /* Chromium only (the JS adds html.evo-bb-refract): real edge refraction. The blur runs first so displaced edges never show legible text. Safari/WebKit and Firefox ignore url() in backdrop-filter, so they keep the line above. */ html.evo-bb-refract .evo-bb__glass{backdrop-filter:blur(22px) url(#evo-bb-lens) saturate(160%) brightness(1.08)} /* 2. tint: two fixed layers, only opacity moves. t2 thickens the glass over dark sections so navy type holds */ .evo-bb__tint{z-index:-4} .evo-bb__tint .t1{background:linear-gradient(180deg,rgba(255,255,255,.44),rgba(255,255,255,.26))} .evo-bb__tint .t2{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.36));opacity:0} /* 3. thickness and light: a top-left bloom, lit top rim, bottom rim reflection, lit sides, inner curvature. All inset; no drop shadow */ .evo-bb__light{z-index:-3;background: radial-gradient(55% 130% at 10% -25%,rgba(255,255,255,.7),rgba(255,255,255,0) 62%), linear-gradient(90deg,rgba(255,255,255,.35),#fff 16%,rgba(255,255,255,.78) 56%,rgba(255,255,255,.3)) top/100% 1px no-repeat, linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6) 48%,rgba(255,255,255,.18)) bottom/100% 1px no-repeat, linear-gradient(180deg,#fff,rgba(255,255,255,.3)) left top/1px 100% no-repeat, linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.22)) right top/1px 100% no-repeat; box-shadow:inset 0 3px 6px -3px rgba(255,255,255,.65),inset 0 -5px 9px -5px rgba(29,41,59,.2),inset 5px 0 9px -7px rgba(29,41,59,.14),inset -5px 0 9px -7px rgba(29,41,59,.14)} /* over light sections the glass defines itself from inside (deeper rim shading); opacity set by the JS. Nothing paints outside the bar */ .evo-bb__amb{z-index:-3;opacity:0;box-shadow:inset 0 -7px 10px -7px rgba(29,41,59,.2),inset 7px 0 10px -8px rgba(29,41,59,.13),inset -7px 0 10px -8px rgba(29,41,59,.13),inset 0 6px 9px -7px rgba(29,41,59,.08)} /* 4. the glint: a soft streak that drifts with the scroll (compositor-driven where scroll timelines exist; JS transform fallback) */ .evo-bb__sheen{z-index:-2;overflow:hidden} .evo-bb__sheen i{position:absolute;top:-60%;left:0;width:150px;height:220%;background:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 80%);transform:translate3d(-160px,0,0) skewX(-14deg);will-change:transform} @supports (animation-timeline:scroll()){ .evo-bb__sheen i{animation:evo-bb-glint linear both;animation-timeline:scroll(root)} @keyframes evo-bb-glint{0%,25.01%,50.01%,75.01%{transform:translate3d(-160px,0,0) skewX(-14deg)}25%,50%,75%,100%{transform:translate3d(980px,0,0) skewX(-14deg)}}} /* contents: everything sits inside the same inset */ .evo-bb__img{width:var(--item);height:var(--item);object-fit:cover;background:#F9F9F7;flex:none} .evo-bb__name{white-space:nowrap;font:700 italic 17px/1 var(--bb-serif)}.evo-bb__name small{font-weight:300;font-size:inherit} /* the strength select is made of the glass: no box until touched */ .evo-bb__str{appearance:none;-webkit-appearance:none;height:var(--item);border:0;border-radius:0;padding:0 24px 0 10px;font:500 13px/1 var(--bb-sans);color:inherit;cursor:pointer; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%231D293B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center/12px;transition:background-color .3s var(--bb-ez)} .evo-bb__str:hover{background-color:rgba(255,255,255,.22)} .evo-bb__str option{color:#1D293B} /* the switch: a glass bubble that slides on a spring. Words under it are a dark copy clipped to the bubble, so neither label ever disappears mid-travel */ .evo-bb-sw{position:relative;display:grid;grid-template-columns:1fr 1fr;height:var(--item);flex:none} .evo-bb-sw__thumb{position:absolute;top:0;bottom:0;left:0;width:50%;z-index:2;pointer-events:none;will-change:transform} .evo-bb-sw__lens{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.5));transform-origin:50% 50%;will-change:transform; box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.6),inset 0 -4px 6px -4px rgba(29,41,59,.22),inset 0 0 0 .5px rgba(29,41,59,.1)} .evo-bb-sw__clip{position:absolute;inset:0;overflow:hidden;pointer-events:none} .evo-bb-sw__ink{position:absolute;top:0;bottom:0;left:0;width:200%;display:grid;grid-template-columns:1fr 1fr;will-change:transform} .evo-bb-sw__ink span,.evo-bb-sw button{display:flex;align-items:center;justify-content:center;font:500 13px/1 var(--bb-sans);color:var(--bb-navy);white-space:nowrap} .evo-bb-sw button{position:relative;z-index:1;border:0;background:none;padding:0 14px;cursor:pointer;min-width:94px} .evo-bb-sw button[aria-pressed=false]{opacity:.78} /* the button: navy glass, squared, lit along its top edge; the label and price hand over (never blank, never doubled) */ .evo-bb__cta{position:relative;height:var(--item);display:flex;align-items:center;gap:14px;padding:0 16px 0 18px;border:0;border-radius:0;cursor:pointer;flex:none;overflow:hidden; background:linear-gradient(180deg,#2C3A52,#1D293B 55%,#18233A);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.28); font:500 12.5px/1 var(--bb-display);letter-spacing:1.4px;text-transform:uppercase;transition:border-top-right-radius .65s var(--bb-soft),transform .5s var(--bb-snap)} .evo-bb__cta:active{transform:scale(.97)} .evo-bb__cta .sep{width:1px;height:14px;background:rgba(255,255,255,.3)} .evo-bb-xf{display:inline-grid;align-items:center}.evo-bb-xf>*{grid-area:1/1} .evo-bb-xf>*:first-child,.evo-bb-xf.is-alt>*+*{opacity:1;transform:none;transition:opacity .11s cubic-bezier(.2,.7,.3,1) .07s,transform .3s var(--bb-soft) .05s} .evo-bb-xf>*+*{opacity:0;transform:translate3d(0,6px,0);transition:opacity .1s linear,transform .2s cubic-bezier(.4,0,1,1)} .evo-bb-xf.is-alt>*:first-child{opacity:0;transform:translate3d(0,-6px,0);transition:opacity .1s linear,transform .2s cubic-bezier(.4,0,1,1)} .evo-bb__price{font:700 italic 16px/1 var(--bb-serif);letter-spacing:0;text-transform:none;justify-items:end} .evo-bb__arrow{width:14px;height:14px;margin-left:-6px;transform:translate3d(-6px,0,0);opacity:0;transition:transform .6s var(--bb-snap),opacity .25s var(--bb-ez)} .evo-bb__cta:hover .evo-bb__arrow,.evo-bb__cta:focus-visible .evo-bb__arrow{transform:none;opacity:1} /* focus ring for keyboard users only (Chrome marks a mouse-picked