/* ============================================================ TOKENS ============================================================ */ :root{ --navy-900:#08243f; --navy-800:#0d3a63; --navy-700:#12507f; --navy-600:#1d6fae; --blue-500:#2b86c9; --blue-400:#4d9fd8; --blue-300:#9fcbe8; --ice:#dbf0f5; /* was #93a4bd, which read 2.5:1 on white - under half what AA asks for, and this is the colour every small label and note uses */ --muted:#667183; --paper:#f5f7fb; --ink:#0a1730; --ink-soft:#4a5a75; --line:#e3e9f3; --radius:18px; --max:1320px; --brand:#7fb3dc; --brand-deep:#2d77a2; --ease:cubic-bezier(.22,1,.36,1); /* ---- one card language ------------------------------------------------- Every card on the site used to lift a different amount over a different duration: -2px in .3s here, -5px in .4s there, -6px in .7s on the home steps. Read down a page they never felt like the same object. These four values are the whole vocabulary now: a card lifts --lift over --card-t, and its shadow deepens from --card-shadow to --card-shadow-hover. Rows and chips - things that are controls rather than cards - use --lift-sm. ------------------------------------------------------------------- */ --lift:-6px; --lift-sm:-2px; --card-t:.42s; --card-shadow:0 18px 44px rgba(8,36,63,.10); --card-shadow-hover:0 30px 64px rgba(8,36,63,.18); } *{box-sizing:border-box} /* the UA sheet's [hidden] rule loses to any author display declaration, and several sections here set display - so gated content needs this to stay gone */ [hidden]{display:none!important} html{scroll-behavior:smooth} /* Nothing may scroll sideways. `overflow-x:hidden` on the body alone did not hold it - the root kept its own scroller, which is what let the hero be dragged left to reveal the bare blue panel behind it. `clip` rather than `hidden` on purpose: `hidden` makes a scroll container and kills the position:sticky "How we do it" panel. */ html{overflow-x:clip} body{ margin:0; background:var(--navy-900); color:var(--ink); font-family:"Inter","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; } h1,h2,h3,h4,.display,.phead-title{font-family:"Inter Tight","Inter",sans-serif;letter-spacing:-.03em;margin:0} p{margin:0} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} .wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,56px)} /* ============================================================ PRELOADER --p (0 -> 1) is real load progress, set from JS in index.html. Both the droplet fill and the track width hang off it, so the mark *is* the progress indicator and neither can report 100% while an image is still in flight. ============================================================ */ @property --p{syntax:"";inherits:true;initial-value:0} .preload{ --p:0; position:fixed;inset:0;z-index:999;padding:28px; display:grid;place-items:center;overflow:hidden; background:radial-gradient(122% 92% at 50% 40%,#12406b 0%,#0a2440 56%,#061626 100%); /* the droplet mask is inlined, not linked: Chrome refuses cross-origin images as CSS masks, and every file:// image counts as cross-origin - a linked mask silently renders nothing when opened straight from disk */ --pl-mask:url("data:image/png;base64,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"); clip-path:inset(0 0 0 0); transition:clip-path .9s cubic-bezier(.76,0,.24,1),visibility 0s linear .9s} /* slow caustics so the panel never reads as flat navy. blurred gradients, not a background photo - a full-screen jpg under filter:blur() costs a repaint every frame on mobile GPUs */ .pl-water{ position:absolute;inset:-25%;z-index:0;pointer-events:none; background: radial-gradient(38% 32% at 22% 26%,rgba(96,175,224,.22),transparent 70%), radial-gradient(34% 30% at 78% 74%,rgba(51,132,190,.18),transparent 70%); filter:blur(26px); animation:plDrift 9s ease-in-out infinite alternate} @keyframes plDrift{ from{transform:translate3d(-2%,-1%,0) scale(1)} to{transform:translate3d(3%,2%,0) scale(1.09)}} /* exit: stage lifts away, then the panel rolls up like a curtain */ .preload.done{clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none} .preload.done .pl-stage{opacity:0;transform:translateY(-22px) scale(.96);filter:blur(5px)} .pl-stage{ position:relative;z-index:2;max-width:100%; display:grid;justify-items:center;text-align:center; transition:opacity .5s ease,transform .6s cubic-bezier(.5,0,.75,0),filter .5s ease} .pl-stage>*{animation:plIn .8s var(--ease) both} .pl-word-mark{animation-delay:.14s}.pl-tag{animation-delay:.24s} .pl-bar{animation-delay:.34s}.pl-load{animation-delay:.42s} @keyframes plIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* ---- the droplet, filling with the page ---- */ .pl-mark{position:relative;isolation:isolate; width:clamp(96px,15vmin,152px);aspect-ratio:1} .pl-aura{position:absolute;inset:-42%;z-index:-1;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(127,179,220,.34),rgba(127,179,220,.09) 45%,transparent 70%); animation:plPulse 3.2s ease-in-out infinite} @keyframes plPulse{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.06);opacity:1}} /* the unfilled droplet, barely there, so the empty state still reads as the mark */ .pl-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; opacity:.17;filter:grayscale(1) brightness(2.4)} .pl-liquid{position:absolute;inset:0;overflow:hidden; -webkit-mask:var(--pl-mask) center/contain no-repeat; mask:var(--pl-mask) center/contain no-repeat} /* two wave blobs at different speeds = depth; the spin makes the surface wobble */ .pl-liquid i{position:absolute;left:-70%;width:240%;height:240%; border-radius:43% 47% 44% 46%; animation:plSpin 5.2s linear infinite; transition:bottom .8s cubic-bezier(.33,1,.68,1)} .pl-liquid .w1{bottom:calc(-246% + var(--p,0) * 128%); background:linear-gradient(180deg,#b7e2f4 0%,#69b4d9 44%,#2f86b4 100%)} .pl-liquid .w2{bottom:calc(-240% + var(--p,0) * 128%);opacity:.42; background:linear-gradient(180deg,#dff2fb,#8cc8e5); animation-duration:7.6s;animation-direction:reverse} @keyframes plSpin{to{transform:rotate(360deg)}} /* glass sheen sweeping across the mark */ .pl-gloss{position:absolute;inset:0;overflow:hidden;pointer-events:none; -webkit-mask:var(--pl-mask) center/contain no-repeat; mask:var(--pl-mask) center/contain no-repeat} .pl-gloss::before{content:"";position:absolute;top:-40%;left:-60%;width:34%;height:180%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:rotate(18deg); animation:plGloss 3.6s cubic-bezier(.5,0,.3,1) infinite} @keyframes plGloss{0%{left:-60%;opacity:0}12%{opacity:.9}45%,100%{left:130%;opacity:0}} /* ---- wordmark: the light cut, because this panel is navy ---- */ .pl-word-mark{margin-top:clamp(18px,2.6vmin,28px)} .pl-word-mark img{width:clamp(178px,25vmin,258px);height:auto; filter:drop-shadow(0 4px 18px rgba(6,26,48,.5))} /* tracked-out caps. text-indent cancels the trailing letter-space, otherwise the line sits half a space left of true center. --ls keeps the two in lockstep when the breakpoint retracks the line */ .pl-tag{--ls:.58em; margin:clamp(16px,2.4vmin,24px) 0 0;max-width:100%;color:rgba(199,224,246,.86); font-size:clamp(9.5px,1.35vmin,12px);font-weight:600;line-height:1.6; letter-spacing:var(--ls);text-indent:var(--ls);text-transform:uppercase} /* determinate track - width follows the same --p as the droplet */ .pl-bar{margin-top:clamp(20px,3vmin,30px); width:clamp(210px,32vmin,360px);height:4px; border-radius:20px;background:rgba(255,255,255,.13)} .pl-bar i{ position:relative;display:block;height:100%;overflow:hidden; width:calc(var(--p,0) * 100%);border-radius:20px; background:linear-gradient(90deg,var(--brand-deep),var(--brand),#dff1fb); box-shadow:0 0 14px rgba(127,179,220,.65); transition:width .8s cubic-bezier(.33,1,.68,1)} /* sheen rides the filled part only, so it is clipped by the fill, not the track */ .pl-bar i::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); animation:plSheen 1.9s cubic-bezier(.5,0,.3,1) infinite} @keyframes plSheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}} /* LOADING + dots. three spans, not an animated `content` string - Firefox does not animate content, so a ::after trick freezes there. text-indent only applies to block containers - as a flex box this line kept its trailing letter-space and sat half a space right of center */ .pl-load{--ls:.55em; margin-top:clamp(14px,2vmin,20px); display:block;text-align:center;color:rgba(160,196,226,.8); font-size:clamp(9px,1.25vmin,11px);font-weight:500; letter-spacing:var(--ls);text-indent:var(--ls)} /* zero-width box: the dots overflow to the right and contribute nothing to the line, so "Loading" stays optically centred on the track above it */ .pl-dots{display:inline-flex;vertical-align:middle;gap:3px; letter-spacing:normal;width:0;overflow:visible;margin-left:-.34em} .pl-dots i{width:3px;height:3px;border-radius:50%;background:currentColor; animation:plDot 1.4s ease-in-out infinite} .pl-dots i:nth-child(2){animation-delay:.18s} .pl-dots i:nth-child(3){animation-delay:.36s} @keyframes plDot{0%,60%,100%{opacity:.18;transform:translateY(0)} 30%{opacity:1;transform:translateY(-2px)}} @media (max-width:620px){ .pl-tag{--ls:.28em} .pl-load{--ls:.34em} .pl-word-mark img{width:min(226px,66vw)} .pl-bar{width:min(250px,72vw)} } /* ============================================================ NAV ============================================================ */ /* a thin utility strip above the bar; the nav and every page top offset are pushed down by exactly its height, kept in one variable so they cannot drift */ :root{--topbar-h:34px} /* the credit is back above the nav; every page top offsets by this */ .topbar{position:fixed;top:0;left:0;right:0;z-index:70;height:var(--topbar-h); display:flex;align-items:center;background:#061a2e;color:rgba(198,220,240,.62); border-bottom:1px solid rgba(255,255,255,.06)} .topbar-inner{display:flex;justify-content:flex-end} .topbar span,.topbar a{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase; color:inherit;transition:color .3s} .topbar a:hover{color:#fff} .topbar b{color:rgba(226,240,252,.92);font-weight:600;letter-spacing:.1em} @media (max-width:620px){ .topbar span,.topbar a{font-size:10.4px;letter-spacing:.06em} } .nav{ position:fixed;top:var(--topbar-h);left:0;right:0;z-index:60; padding:13px 0; transition:background .4s var(--ease),backdrop-filter .4s var(--ease),padding .4s var(--ease),border-color .4s; border-bottom:1px solid transparent; } .nav.scrolled{ padding:9px 0; background:rgba(8,34,60,.8); backdrop-filter:blur(16px) saturate(140%); border-bottom-color:rgba(255,255,255,.09); } /* A product page opens straight onto a light panel, so there is no dark hero for the knocked-out nav to sit on. It wears the scrolled bar from the start instead - solid rather than translucent, since white shows through .8. */ body.nav-solid .nav{ padding:9px 0; background:linear-gradient(180deg,#0b2b49,#08243f); border-bottom-color:rgba(255,255,255,.08); box-shadow:0 10px 30px rgba(8,36,63,.18); } .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px} .brand{display:flex;align-items:center;text-decoration:none;color:#fff} /* Every nav sits on something dark - the hero, the .phead gradient, or the navy bar it turns into once scrolled - so only the knocked-out wordmark is ever needed here. No light-background nav state exists to swap for. */ /* The full lockup carries the WELLNESS CENTER pill, which is only about a third of its height - so the mark has to run taller than a plain wordmark would, or the pill type is unreadable. The bar grows to match. */ .brand-logo{height:clamp(40px,4vw,54px);width:auto;display:block} .brand:hover .brand-logo{transform:translateY(-1px)} .brand-logo{transition:transform .4s var(--ease)} .foot-logo .brand-logo{height:58px} /* footer shows the full lockup */ .brand .mark{height:34px;width:auto;flex:none;transition:transform .4s var(--ease)} .brand:hover .mark{transform:translateY(-2px) scale(1.04)} .brand .lockup{display:flex;flex-direction:column;line-height:1} .brand .word{ font-family:"Inter Tight",sans-serif;font-weight:300;font-size:21px; letter-spacing:.15em;text-transform:uppercase;color:#fff; } .brand .sub{ font-family:"Inter",sans-serif;font-weight:400;font-size:8.5px; letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.62); margin-top:5px;align-self:flex-end;margin-right:-.42em; } .nav-links{display:flex;gap:clamp(14px,1.9vw,30px);align-items:center} .nav-links a{color:rgba(255,255,255,.9);font-size:15.5px;font-weight:450;position:relative;padding:6px 0; white-space:nowrap} .nav-links a::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:#fff; transition:width .35s var(--ease); } .nav-links a:hover::after{width:100%} .btn{ display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer; font-family:"Inter",sans-serif;font-size:15.5px;font-weight:500; padding:13px 26px;border-radius:999px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s; white-space:nowrap; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.978);transition-duration:.09s} .btn:focus-visible,.nav-links a:focus-visible,.cat:focus-visible,.card:focus-visible{ outline:2px solid var(--brand);outline-offset:3px;border-radius:999px} .btn-ghost{ color:#fff; background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 8px 30px rgba(20,90,160,.38); backdrop-filter:blur(8px); } .btn-ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 12px 40px rgba(40,130,200,.52)} /* One button scale, three steps: 42px in the bar, 45px for a plain .btn, 47px for a primary and 49px for the one on a hero. They used to run 42/45/48/49/50/53/54/57 with four different type sizes, which is why the same action looked like a different button on every page. */ .btn-white{background:#fff;color:var(--navy-900);font-weight:500;padding:15px 30px;font-size:16px;box-shadow:0 14px 44px rgba(0,20,70,.4)} .btn-white:hover{box-shadow:0 20px 60px rgba(0,30,100,.55)} .nav-cta{display:flex;align-items:center;gap:10px} .btn-shop{background:#fff;color:var(--navy-900);font-weight:500;padding:12px 22px;font-size:15px; box-shadow:0 8px 26px rgba(0,20,30,.28)} .btn-shop:hover{box-shadow:0 12px 34px rgba(0,25,40,.42)} .btn-clinic{padding:12px 22px;font-size:15px} /* Third nav action, back in the bar at Rishi's request. Green, not blue: earning is a different kind of thing from booking or buying, and it has to be findable at a glance in a bar that is otherwise navy and white. Same green as the standing tab site.js injects on the right edge, so a visitor who meets both knows they are the same door. */ .btn-affiliate{padding:12px 22px;font-size:15px;font-weight:600; background:linear-gradient(200deg,#18815f,#0f5c45 70%);color:#fff; box-shadow:0 8px 24px rgba(9,60,45,.34),inset 0 0 0 1px rgba(255,255,255,.14)} .btn-affiliate:hover{background:linear-gradient(200deg,#1c9770,#126b50 70%); box-shadow:0 12px 30px rgba(9,60,45,.46),inset 0 0 0 1px rgba(255,255,255,.22)} .btn-navy{background:var(--navy-800);color:#fff;padding:14px 28px;font-size:15.5px} .btn-navy:hover{background:var(--navy-700)} .arrow{width:15px;height:15px;flex:none;transition:transform .3s var(--ease)} .btn:hover .arrow{transform:translate(2px,-2px)} .burger{display:none;background:none;border:0;padding:8px;cursor:pointer} .burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px} .burger span+span{margin-top:6px} /* ============================================================ HERO ============================================================ */ .hero{--hero-tone:#123f60;position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate; background:var(--hero-tone);transition:background-color 1.15s ease} .hero-bg{position:absolute;inset:0;z-index:-3;background: var(--hero-tone);transition:background-color 1.15s ease; } .hero-bg::after{ /* vignette */ content:"";position:absolute;inset:0; background:none; } .bokeh{position:absolute;inset:0;z-index:-1;overflow:hidden;opacity:.35} .bokeh i{ position:absolute;border-radius:50%; background:radial-gradient(circle at 35% 32%,rgba(175,215,245,.5),rgba(40,120,190,.18) 60%,transparent 72%); filter:blur(14px); animation:drift linear infinite; } @keyframes drift{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(18px,-26px,0) scale(1.08)} 100%{transform:translate3d(0,0,0) scale(1)} } .hero-grid{ position:relative;width:50%;max-width:none;margin:0; padding:calc(150px + var(--topbar-h)) clamp(28px,3vw,54px) 96px clamp(30px,5vw,92px); display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center; } .hero-copy{max-width:min(640px,44vw);display:grid} .hero-message{grid-area:1/1;align-self:center;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .48s ease,visibility 0s linear .48s} .hero-message.is-active{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s} h1{ color:#fff;font-weight:600;text-shadow:0 2px 22px rgba(4,18,36,.5); font-size:clamp(2.2rem,4vw,3.9rem); line-height:1.03; } h1 .dim{ color:#78b7e5;text-shadow:0 2px 20px rgba(32,95,141,.25); } h1 .ln{display:block;overflow:hidden;padding-bottom:.06em} h1 .ln>span{display:block;transform:translateY(115%)} body.ready h1 .ln>span{animation:lineUp .95s cubic-bezier(.22,1,.36,1) both} body.ready h1 .ln:nth-child(2)>span{animation-delay:.09s} body.ready h1 .ln:nth-child(3)>span{animation-delay:.18s} @keyframes lineUp{from{transform:translateY(115%)}to{transform:none}} .hero-sub,.hero-cta{opacity:0;transform:translateY(20px)} body.ready .hero-sub{animation:riseIn .85s cubic-bezier(.22,1,.36,1) .34s both} body.ready .hero-cta{animation:riseIn .85s cubic-bezier(.22,1,.36,1) .46s both} .hero-photo{opacity:0} body.ready .hero-photo{animation:riseIn 1.1s cubic-bezier(.22,1,.36,1) .1s both} @keyframes riseIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} .hero-sub{ text-shadow:0 1px 12px rgba(4,18,36,.4);color:rgba(232,242,250,.95);font-size:clamp(1rem,1.25vw,1.19rem);line-height:1.55; margin-top:clamp(22px,3vw,34px);max-width:34em; } .hero-cta{margin-top:clamp(30px,4vw,46px);display:flex;flex-wrap:wrap;gap:16px;align-items:center} .hero-note{color:rgba(210,226,255,.62);font-size:14px} .hero .btn-white{background:#fff;color:#102f49;box-shadow:0 14px 35px rgba(4,18,36,.24)} .hero .btn-white:hover{background:#eef6fb} /* vial */ /* hero photo - whole image, never cropped */ .hero-photo{position:absolute;inset:0 0 0 50%;z-index:-2;margin:0;overflow:hidden;background:var(--hero-tone); transition:background-color 1.15s ease} .hero-photo .s1{--deep:#0b2742;--mid:#143a5e;--pos:48.6%} .hero-photo .s2{--deep:#092740;--mid:#11405f;--pos:50%} .hero-photo .s3{--deep:#0b2643;--mid:#143b60;--pos:51.4%} .hero-photo .s4{--deep:#0c2845;--mid:#153d62;--pos:0%} .hero-photo .slide{position:absolute;inset:0;opacity:0;visibility:hidden;will-change:opacity; transition:opacity 1.35s ease-in-out,visibility 0s linear 1.35s; background:var(--hero-tone)} .hero-photo .slide.is-active{opacity:1;visibility:visible;transition-delay:0s} .hero-photo img{position:absolute;inset:0;width:100%;height:100%;display:block} .hero-photo .fill{width:100%;height:100%;object-fit:fill;object-position:center;filter:none;transform:none;opacity:1} /* slow push on whichever frame is showing - restarts as the class moves */ .hero-photo .slide.is-active .fill{animation:kenBurns 7.4s cubic-bezier(.22,.61,.36,1) both} @keyframes kenBurns{from{transform:scale(1.001)}to{transform:scale(1.062)}} /* the complete image, sharp and uncropped, centred - its box hugs the image exactly (max-width/height + auto) so the mask can feather the real picture edges, not the hero box, letting it dissolve into its own blurred copy with no visible seam */ .hero-photo .whole{ display:none} .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--hero-tone) 0%,transparent 14%);pointer-events:none} body:not(.page-products) .nav:not(.scrolled) .brand, /* written when every hero was navy; a light head opts itself out, by being one - see THE INK NAV further down */ body:not(.page-products):not(:has(.phead-airy:not(.head-dark))) .nav:not(.scrolled) .nav-links a{color:#fff} /* the line above and the one below both exclude a light head; this one did not, which is what kept the burger white on the homepage's light hero */ body:not(.page-products):not(:has(.phead-airy:not(.head-dark))) .nav:not(.scrolled) .burger span{background:#fff} body:not(.page-products):not(:has(.phead-airy:not(.head-dark))) .nav:not(.scrolled) .btn-shop{background:#fff;color:#102f49} body:not(.page-products):not(:has(.phead-airy:not(.head-dark))) .nav:not(.scrolled) .btn-clinic{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.1)} /* category cards under the hero */ .cats{background:#fff; padding:clamp(40px,4.6vw,68px) 0 clamp(44px,5.2vw,76px);color:var(--ink)} /* The marquee's mask-image gives it a stacking context, and its 84px of top padding overlaps this block - without a z-index the row would paint on top of the headline and swallow hover and text selection there. */ .cats-head{position:relative;z-index:1} .cats-head h2{color:var(--ink);font-size:clamp(1.8rem,3.4vw,2.9rem);margin-top:16px;text-wrap:balance} .eyebrow-dark{color:var(--brand-deep)} .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px); margin-top:clamp(34px,4.5vw,54px)} /* ---- product marquee ---------------------------------------------------- One endless row of every product, flowing right -> left. The track holds the list twice and travels exactly one list-width, so the seam is invisible. Hovering pauses it, which is also what lets a vial's cap be opened. */ /* The row has to be clipped horizontally, but a lifted cap needs room to rise above it. `overflow-x:hidden` alone can't do that - a `visible` on the other axis computes to `auto` - so the box is padded out vertically and pulled back by the same amount with negative margins. The clip line then sits well above and below the artwork, and the layout is unchanged. */ .cat-marquee{ --mq-top:84px; --mq-bottom:30px; padding-inline:clamp(20px,4vw,56px); margin-top:calc(clamp(34px,4.5vw,54px) - var(--mq-top)); margin-bottom:calc(0px - var(--mq-bottom)); padding:var(--mq-top) 0 var(--mq-bottom); overflow:visible} /* Four products, so the row is a fixed four-up rather than a loop. It used to scroll because there were fifteen of them and no other way to show them all; with four, movement is just noise. */ .cat-track{--mq-gap:clamp(14px,1.6vw,22px); display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mq-gap);width:100%} .cat-track .cat{flex:none;min-width:0} /* The vial has to FIT its box: `width:100%;height:100%` let it render at its natural aspect - twice the box height - and cover the name underneath, which the marquee's old `overflow:hidden` had been hiding. The box stays a GRID: the body and the cap are stacked with `grid-area:1/1`, and switching it to flex laid the cap out beside the bottle instead. */ .cat-track .bottle-cat .cat-img{--shot-h:clamp(210px,17vw,300px);height:var(--shot-h)} /* the cap is stacked on the bottle with `grid-area:1/1` and the row is sized by `place-items:center`, so it is auto - which makes `max-height:100%` resolve against nothing. The cap has to be given the box height in real units. */ .cat-track .bottle-cat .cat-img img{width:auto;height:auto; max-width:100%;max-height:var(--shot-h);object-fit:contain} .cat-track .cat-title{font-size:1.02rem} .cat-track .cat-note{font-size:13px} /* Four fixed columns meant 77px per product on a 390px phone, and "Semaglutide" is 90px of word that cannot break - so the name ran off the side of the screen with its first letter clipped. Two up below 760px. */ @media (max-width:760px){ .cat-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,4vw,24px)} .cat-track .bottle-cat .cat-img{--shot-h:clamp(190px,42vw,260px)} } .cat-title,.cat-note{min-width:0;overflow-wrap:break-word} /* ---- parcel delivery ---------------------------------------------------- A kraft box drops in from the upper left, opens, and the vials arc out of it into their slots. Driven by parcel.js, which measures the real positions and sets --dx/--dy/--d per item, so it stays correct at any grid width and works for any container tagged data-parcel. Items are hidden only once the script confirms it can run - otherwise they just sit where they are. */ [data-parcel]{position:relative} .parcel{position:absolute;width:164px;height:146px;opacity:0; pointer-events:none;transform-origin:50% 100%} .parcel i{position:absolute;display:block} .pb-shadow{left:6px;right:6px;bottom:-9px;height:17px;border-radius:50%; background:rgba(58,40,16,.24);filter:blur(7px)} /* inner back wall, seen through the open top */ .pb-back{left:11px;right:11px;bottom:86px;height:36px;border-radius:2px 2px 0 0; background:linear-gradient(180deg,#6f5230 0%,#8b6941 62%,#a37c4d 100%)} /* the two top flaps, hinged on their inner edge */ .pb-flap-l,.pb-flap-r{bottom:114px;width:50%;height:32px; background:linear-gradient(180deg,#8f6c42 0%,#a87f50 34%,#d3aa7c 100%); box-shadow:0 4px 9px rgba(62,42,16,.22)} .pb-flap-l{left:0;transform-origin:100% 100%;border-radius:3px 0 0 3px} .pb-flap-r{right:0;transform-origin:0 100%;border-radius:0 3px 3px 0} .pb-front{left:0;right:0;bottom:0;height:104px;border-radius:3px 3px 6px 6px; background:linear-gradient(178deg,#e2c095 0%,#d2a87c 40%,#c1915f 78%,#b1815200 78%), linear-gradient(180deg,#d3a97c,#bb8f5f); box-shadow:0 18px 30px rgba(62,42,16,.26),inset 0 1px 0 rgba(255,255,255,.45), inset -22px 0 26px rgba(90,62,26,.16)} .pb-tape{left:0;right:0;bottom:38px;height:17px;background:rgba(248,242,231,.86); box-shadow:0 1px 2px rgba(80,55,20,.18),0 -1px 0 rgba(255,255,255,.3)} /* Printed on the box like a shipping mark. No multiply here: the pill's white lettering would multiply away to nothing against the kraft, taking the words WELLNESS CENTER with it - so it prints at reduced opacity instead. */ .parcel .pb-mark{position:absolute;z-index:2;left:50%;translate:-50% 0;bottom:56px; width:72px;height:auto;opacity:.62} .parcel-armed .parcel{opacity:0} .parcel-armed .parcel-item{opacity:0} .parcel-go .parcel{animation:parcelRun 2.5s linear both} .parcel-go .pb-flap-l{animation:pbFlapL 2.5s cubic-bezier(.34,1.2,.5,1) both} .parcel-go .pb-flap-r{animation:pbFlapR 2.5s cubic-bezier(.34,1.2,.5,1) both} .parcel-go .parcel-item.parcel-item{animation:vialOut .88s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d,0s)} /* class repeated: raises specificity so a stray animation-delay elsewhere can never hijack the stagger */ @keyframes parcelRun{ /* it lands near the left edge, so a big leftward start would fall off-screen (body has overflow-x:hidden) - lean it left just enough to read as "from the left" while keeping the whole drop inside the viewport */ 0% {opacity:0;transform:translate(calc(0px - var(--px,92px)),-268px) rotate(-28deg) scale(1); animation-timing-function:cubic-bezier(.4,0,.85,.45)} /* gravity pulls it down */ 8% {opacity:1;transform:translate(calc(0px - var(--px,92px) * .87),-232px) rotate(-25deg) scale(1); animation-timing-function:cubic-bezier(.45,0,.9,.5)} 26% {transform:translate(0,0) rotate(0deg) scale(1.08,.92); /* impact + squash */ animation-timing-function:cubic-bezier(.25,1.5,.5,1)} 32% {transform:translate(0,-14px) rotate(1.6deg) scale(.97,1.04)} /* rebound */ 38% {transform:translate(0,0) rotate(0deg) scale(1.02,.98)} 43% {transform:translate(0,0) rotate(0deg) scale(1)} /* settled */ 86% {opacity:1;transform:translate(0,0) rotate(0deg) scale(1); animation-timing-function:cubic-bezier(.5,0,.75,0)} 100%{opacity:0;transform:translate(-320px,40px) rotate(-13deg) scale(1)} } @keyframes pbFlapL{0%,36%{transform:rotate(0)}46%,80%{transform:rotate(-104deg)}90%,100%{transform:rotate(0)}} @keyframes pbFlapR{0%,36%{transform:rotate(0)}46%,80%{transform:rotate(104deg)} 90%,100%{transform:rotate(0)}} @keyframes vialOut{ 0% {opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.16) rotate(-28deg)} 18% {opacity:1} 55% {transform:translate(calc(var(--dx,0px)*.36),calc(var(--dy,0px)*.36 - 66px)) scale(.72) rotate(-9deg)} 100%{opacity:1;transform:none} } /* no card at all - the cutout sits straight on the section */ .cat{display:flex;flex-direction:column;text-decoration:none;color:var(--ink); background:none;box-shadow:none;border-radius:0;overflow:visible; transition:transform .45s var(--ease)} .cat:hover{transform:translateY(var(--lift))} .cat-img{display:block;position:relative;overflow:hidden;border-radius:14px} .cat-img::after{content:"";position:absolute;z-index:2;top:-45%;left:-35%;width:42px;height:190%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent); transform:rotate(18deg);opacity:0;pointer-events:none} .cat-img img{width:100%;height:auto;display:block; transition:transform .58s var(--ease),filter .58s var(--ease)} .cat:hover .cat-img img{transform:translateY(-7px) rotate(-1deg) scale(1.045); filter:drop-shadow(0 16px 12px rgba(8,36,63,.2))} .cat:hover .cat-img::after{animation:vialShine .8s ease-out} .bottle-cat .cat-img{height:clamp(280px,30vw,400px);display:grid;place-items:center;overflow:visible;border-radius:0;padding:12px} .bottle-cat .cat-img img{width:100%;height:100%;max-width:100%;object-fit:contain; filter:drop-shadow(0 12px 9px rgba(8,36,63,.17))} .bottle-cat:hover .cat-img img{transform:translateY(-12px) rotate(-1.8deg) scale(1.05); filter:drop-shadow(0 20px 13px rgba(8,36,63,.23))} /* photographic vial that opens on hover - cap and body are two layers cut from the same shot, so they stay pixel-aligned, and the gesture matches the CSS vials on the products page rather than reading as a pasted-in clip */ .shot-open>img{grid-area:1/1} /* the lifted cap overhangs the next card; without this it steals that card's hover and clicks, because an keeps its full box as a hit target */ .shot-open>img{pointer-events:none} .shot-cap{transform-origin:74% 22%} .bottle-cat:hover .cat-img .shot-cap, .bottle-cat:focus-visible .cat-img .shot-cap{ transform:translate(14px,-30px) rotate(16deg) scale(1.05); filter:drop-shadow(-7px 13px 11px rgba(8,36,63,.24))} .cat-body{display:flex;flex-direction:column;gap:7px;padding:18px 2px 0} .cat-title{display:flex;align-items:center;gap:8px;font-family:"Inter Tight",sans-serif; font-size:1.18rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)} .cat-title .arrow{width:13px;height:13px;opacity:.5;transition:transform .35s var(--ease),opacity .35s} .cat:hover .cat-title .arrow{opacity:1;transform:translate(2px,-2px)} .cat-note{font-size:14px;line-height:1.5;color:var(--ink-soft)} /* The vial is centred in its cell by `place-items:center`, and the cell is far wider than the bottle - so a left-aligned name reads as belonging to nothing. It goes under the bottle instead. Scoped to .bottle-cat, so any other card that uses .cat keeps its left-aligned body. */ .bottle-cat .cat-body{align-items:center;text-align:center} .bottle-cat .cat-title{justify-content:center} @media (max-width:1080px){.cat-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.cat-grid{grid-template-columns:1fr}} /* how we do it */ .how{background:#fff;color:var(--ink);position:relative;padding:clamp(42px,5vw,72px) 0 clamp(48px,5.4vw,80px);overflow:hidden} .how-sticky{position:relative} .how-head h2{color:var(--ink);font-size:clamp(1.8rem,3.4vw,2.9rem);margin-top:16px;text-wrap:balance} .how-lede{color:var(--ink-soft);font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;margin-top:18px;max-width:56ch} /* A card lifts 6px on hover and casts a 26px/70px shadow, so the stage carries vertical slack and pulls it back with a negative margin; without it both were sliced flat. The horizontal padding matches .wrap so the four cards line up with the heading above them. */ .how-stage{--hs-top:18px;--hs-bottom:84px; width:100%;max-width:var(--max);margin-left:auto;margin-right:auto; margin-top:calc(clamp(26px,3vw,44px) - var(--hs-top)); margin-bottom:calc(0px - var(--hs-bottom)); padding:var(--hs-top) clamp(20px,4vw,56px) var(--hs-bottom)} /* Four steps, four cards, one row - the numbers only mean something read as a set, and a 2x2 grid put step 4 below the fold on a laptop, so the set was never actually visible at once. Four across costs each card width, which is why the type below is sized for a ~280px card rather than the 590px one the 2x2 gave; the 1080px breakpoint puts both back. */ .how-grid{--how-gap:clamp(18px,2vw,28px); display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--how-gap)} /* every card reads as active now - there is no "current step" to dim the rest */ /* sized by width, not by 42vh: at one width the card used to be 320px tall on a laptop and 460px on a tall monitor, so the row never looked the same twice */ .how-card{position:relative;height:clamp(340px,27vw,400px); border-radius:24px;overflow:hidden;background:#08243f;color:#fff; box-shadow:0 26px 70px rgba(8,36,63,.24); transition:transform var(--card-t) var(--ease),box-shadow var(--card-t) var(--ease)} .how-card:hover{transform:translateY(var(--lift));box-shadow:0 34px 84px rgba(8,36,63,.34)} .how-img,.how-img::after{position:absolute;inset:0;display:block} .how-img::after{content:"";background:linear-gradient(180deg,rgba(4,20,37,.04) 20%,rgba(4,20,37,.28) 55%,rgba(4,20,37,.94) 100%)} .how-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)} .how-card:hover .how-img img{transform:scale(1.045)} .how-num{position:absolute;z-index:2;top:20px;left:20px;font-size:11.5px;font-weight:500; letter-spacing:.03em;padding:6px 11px;border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.13);backdrop-filter:blur(10px);border-radius:999px;color:#fff} .how-copy{position:absolute;z-index:2;left:20px;right:20px;bottom:22px;display:block} .how-card h3{font-size:clamp(1.25rem,1.55vw,1.6rem);font-weight:500;letter-spacing:-.03em;color:#fff} .how-card p{color:rgba(240,247,255,.86);font-size:13.8px;line-height:1.5;margin-top:8px} /* Below this the row cannot hold four readable cards, so fall back to the 2x2 and give the copy back the size it had there. It must sit above the 700px block: both match on a phone, and the later rule would otherwise win. */ @media (max-width:1080px){ .how-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .how-card{height:clamp(360px,40vw,420px)} .how-num{top:24px;left:26px;font-size:12px;padding:7px 12px} .how-copy{left:28px;right:28px;bottom:26px} .how-card h3{font-size:clamp(1.6rem,2.9vw,2.3rem);letter-spacing:-.035em} .how-card p{font-size:15.2px;line-height:1.55;max-width:46ch;margin-top:10px} } @media (max-width:700px){ .how{padding:56px 0 70px} .how-lede{margin-top:12px;font-size:.94rem} .how-head h2{margin-top:11px;font-size:clamp(1.65rem,7.5vw,2.2rem)} .how-stage{margin-top:22px} .how-grid{grid-template-columns:1fr;gap:16px} .how-card{height:clamp(320px,92vw,400px);border-radius:20px} .how-copy{left:22px;right:22px;bottom:22px} .how-num{top:18px;left:20px} } /* first visit card */ .first{background:#fff;padding:0 0 clamp(56px,7vw,96px)} .first-card{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,4vw,60px); align-items:center;border-radius:24px; padding:clamp(30px,3.6vw,52px) clamp(28px,3.4vw,54px); /* The artwork already carries its own dark panel down the left, sized for the copy - it reads about 52/255 there against 120 in the photograph. Laying a scrim over that only doubles the gradient and greys the room out, which is what made this card look washed. The picture goes down as it is; the gradient underneath is only the fallback if it 404s. The original export carried its own white rounded frame, so under `cover` the dark panel sat 14px inside this card's edge, out of line with the step cards above it, with the corner glow showing through the white as a pale second border. first-visit-card.webp is the same picture with that frame cropped off. */ background: url("../img/pages/first-visit-card.webp") center/cover no-repeat, linear-gradient(135deg,#0a2c50 0%,#12507f 52%,#1d6fae 120%); min-height:clamp(260px,24vw,340px); color:#fff;overflow:hidden;position:relative} .first-card::after{content:"";position:absolute;width:420px;height:420px;right:-130px;top:-160px; border-radius:50%;background:radial-gradient(circle,rgba(150,215,235,.4),transparent 66%);filter:blur(10px)} .first-copy{position:relative;z-index:1} .first-card h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-top:14px;color:#fff} .first-card p{color:rgba(220,240,248,.86);font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.6; margin-top:16px;max-width:46ch} .first-list{list-style:none;margin:22px 0 0;padding:0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 26px} .first-list li{display:flex;align-items:center;gap:11px;font-size:14.6px;color:#eaf5fb} .first-list li::before{content:"";width:21px;height:21px;border-radius:50%;flex:none; background:var(--blue-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.8 9.6 3.5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px 11px no-repeat} @media (max-width:640px){.first-list{grid-template-columns:1fr}} .first-action{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px} .first-note{font-size:13.5px;color:rgba(214,236,244,.7)} .first-card .eyebrow-dark{color:var(--blue-300)} @media (max-width:900px){.first-card{grid-template-columns:1fr;gap:26px}} /* mission */ .mission{background:var(--paper);color:var(--ink);padding:clamp(44px,5.2vw,78px) 0} .mission-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,76px);align-items:center} .mission-copy{display:flex;flex-direction:column;align-items:flex-start} .mission-mark{display:flex;align-items:center;gap:13px;margin-bottom:26px} .mission-mark img{width:clamp(170px,17vw,215px);height:auto;flex:none} .mission-word{display:flex;flex-direction:column;line-height:1; font-family:"Inter Tight",sans-serif;font-weight:300;font-size:27px; letter-spacing:.15em;text-transform:uppercase;color:var(--ink)} .mission-word em{font-style:normal;font-family:"Inter",sans-serif;font-weight:400; font-size:9.5px;letter-spacing:.44em;color:var(--ink-soft); margin-top:6px;align-self:flex-end;margin-right:-.44em} .mission h2{font-size:clamp(1.8rem,3.4vw,2.9rem);margin-top:14px;text-wrap:balance;max-width:18ch} .mission-copy p{color:var(--ink-soft);font-size:clamp(1rem,1.15vw,1.09rem);line-height:1.65; margin-top:20px;max-width:52ch} .mission-copy .btn{margin-top:32px} .mission-img{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/5; box-shadow:0 26px 60px rgba(6,30,80,.16)} .mission-img img{width:100%;height:100%;object-fit:cover;object-position:center 28.5%;display:block} @media (max-width:900px){ .mission-grid{grid-template-columns:1fr;gap:34px} .mission-img{order:-1;aspect-ratio:4/3} .mission-img img{object-position:center 45%} } /* reviews */ .reviews-section{background:#fff;color:var(--ink);padding:clamp(46px,5.2vw,78px) 0} .reviews-section h2{font-size:clamp(2rem,4vw,3.25rem);margin-top:16px;letter-spacing:-.035em} .reviews-rating{display:flex;align-items:center;gap:12px;margin-top:20px;color:var(--ink);font-size:14px} /* the stars carry the rating, so they have to clear AA like any other text - #caa86a read 2.2:1 on the card. Same gold, taken down to 4.6:1. */ .reviews-rating>span,.review-stars{color:#8f6f22;letter-spacing:3px;font-size:18px} .reviews-rating small{color:#757575} /* one row, so the scrolling reviews underneath are on screen with it */ .reviews-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.5vw,22px);margin-top:clamp(26px,3vw,44px)} .reviews-gallery figure{margin:0;position:relative;overflow:hidden;border-radius:20px; height:clamp(240px,24vw,340px);background:#08243f; box-shadow:0 16px 40px rgba(8,36,63,.16)} .reviews-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)} .reviews-gallery figcaption{position:absolute;inset:auto 20px 18px;color:#fff;font-size:15px;font-weight:600; opacity:0;transform:translateY(8px);transition:.35s var(--ease);text-shadow:0 2px 8px #000} .reviews-gallery figure:hover img{transform:scale(1.055)} .reviews-gallery figure:hover figcaption{opacity:1;transform:none} /* ---- review marquee ----------------------------------------------------- Same endless row as the products and the steps: the list twice over, one period of travel, trailing gap so the seam is exact. */ .review-marquee{--rv-gap:20px;margin-top:28px;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} .review-track{display:flex;gap:var(--rv-gap);padding-right:var(--rv-gap); width:max-content;align-items:stretch; animation:reviewFlow 58s linear infinite} @keyframes reviewFlow{from{transform:translateX(0)}to{transform:translateX(-50%)}} .review-marquee:hover .review-track, .review-marquee:focus-within .review-track{animation-play-state:paused} .review-track .review-card{flex:0 0 clamp(276px,25vw,352px);display:flex;flex-direction:column} /* reviews differ a lot in length - clamp the long ones so the row stays even. The full text stays in the markup; the ellipsis shows it has been trimmed. */ .review-track blockquote{flex:1;display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:6;overflow:hidden} .review-card{padding:28px;border:1px solid #e8e4dd;border-radius:17px;background:#fdfcf9; box-shadow:0 14px 40px rgba(8,36,63,.05); transition:transform var(--card-t) var(--ease),box-shadow var(--card-t) var(--ease)} /* the marquee already pauses under the pointer, so the card it is over can lift like any other card rather than sliding away from the cursor */ .review-card:hover{transform:translateY(var(--lift));box-shadow:0 26px 56px rgba(8,36,63,.13)} .review-card blockquote{margin:17px 0 28px;color:#515965;font-size:14.5px;line-height:1.72} .review-card footer{background:transparent;color:var(--ink);padding:18px 0 0;border-top:1px solid #ebe6de; display:flex;align-items:center;gap:12px} .review-card footer>b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#cce9f8;color:#15486d;font-size:12px} .review-card footer span{display:flex;flex-direction:column;gap:3px} .review-card footer strong{font-size:12px}.review-card footer small{font-size:9px;color:#737373;text-transform:uppercase;letter-spacing:.05em} /* gift cards */ .gift-section{position:relative;overflow:hidden;background:#fff;color:var(--ink); padding:clamp(18px,2vw,30px) 0 clamp(48px,5.4vw,78px)} .gift-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(40px,7vw,100px)} .gift-pill{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1); padding:7px 14px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#c9e6f5} .gift-copy h2{font-size:clamp(2.1rem,4vw,3.4rem);margin-top:0;color:var(--ink)} .gift-copy p{max-width:60ch;color:var(--ink-soft);font-size:15.5px;line-height:1.75;margin-top:22px} .gift-actions{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap} .gift-actions>a:not(.btn){display:inline-flex;align-items:center;gap:7px;color:var(--navy-700);font-size:14px;font-weight:500} .gift-actions>a:not(.btn):hover{color:var(--navy-600)} .gift-btn{background:var(--navy-700);color:#fff;padding:14px 28px;box-shadow:0 14px 32px rgba(18,80,127,.26)} .gift-btn:hover{background:var(--navy-600)} .gift-card-wrap{perspective:1000px} .gift-card-wrap .gift-card-art{width:100%;margin:0} /* The card reads as a real one: deep navy stock, knocked-out mark, a gold rule under the line, the value set large, and a faint embossed number strip. */ .gift-card-art{position:relative;aspect-ratio:1.59/1;border-radius:24px;padding:clamp(24px,2.4vw,34px); overflow:hidden;color:#fff; background:linear-gradient(138deg,#0b2b49 0%,#12405f 44%,#1b5b86 100%); box-shadow:0 34px 70px rgba(6,26,48,.42),inset 0 1px 0 rgba(255,255,255,.13); /* flat at rest so it lines up exactly with the message below and the panel beside it; the tilt is kept for the hover */ transition:transform .7s var(--ease);transform:none} .gift-card-wrap:hover .gift-card-art{transform:rotateY(-4deg) rotateX(2deg) translateY(-8px)} .gift-brand{display:flex;align-items:center} .gift-brand img{width:clamp(120px,13vw,160px);height:auto;display:block} .gift-label{position:absolute;right:clamp(24px,2.4vw,34px);top:calc(clamp(24px,2.4vw,34px) + 6px); text-transform:uppercase;letter-spacing:.3em;font-size:11px;font-weight:600;color:#9fcbe8} .gift-card-art em{display:block;font-size:clamp(15px,1.35vw,18px);font-style:italic;font-weight:500; margin-top:clamp(20px,2.4vw,32px);color:rgba(255,255,255,.94)} .gift-card-art>i{display:block;width:64px;height:2px;background:#d4b476;margin-top:clamp(14px,1.6vw,22px)} .gift-card-art>strong{display:block;font-family:"Inter Tight",sans-serif;font-weight:600; font-size:clamp(38px,4.4vw,58px);line-height:1;letter-spacing:-.03em;margin-top:12px;color:#fff} .gift-card-art>small{display:block;margin-top:clamp(12px,1.4vw,18px);text-transform:uppercase; letter-spacing:.2em;font-size:11.5px;color:rgba(197,221,241,.62)} /* the dot strip where a card number would sit */ .gift-card-art>small::after{content:"";position:absolute;right:clamp(24px,2.4vw,34px);bottom:clamp(26px,2.6vw,36px); width:104px;height:5px;border-radius:3px; background:radial-gradient(circle,rgba(255,255,255,.5) 46%,transparent 47%) 0 0/13px 5px repeat-x} .gift-rings{position:absolute;width:250px;height:250px;border:4px solid rgba(255,255,255,.07); border-radius:50%;right:-85px;bottom:-120px;pointer-events:none} .gift-rings::after{content:"";position:absolute;inset:42px;border:3px solid rgba(212,180,118,.22);border-radius:50%} @media(max-width:1080px){.reviews-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.gift-inner{grid-template-columns:1fr}.gift-card-wrap{max-width:560px}} @media(max-width:580px){.reviews-gallery{grid-template-columns:1fr;gap:14px} .reviews-gallery figure{height:auto;aspect-ratio:4/5;border-radius:20px} .reviews-gallery figcaption{inset:auto 18px 16px}.gift-card-art{padding:24px}.gift-card-art>strong{font-size:40px}.gift-label{right:22px;top:27px}} /* product menu */ .tabs{display:flex;gap:8px;margin-top:clamp(30px,4vw,44px);flex-wrap:wrap} .tab{font-family:"Inter",sans-serif;font-size:15px;font-weight:500;cursor:pointer; display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px; border:1px solid var(--line);background:#fff;color:var(--ink-soft); transition:background .3s,color .3s,border-color .3s} .tab span{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px; background:var(--paper);color:var(--ink-soft)} .tab:hover{border-color:#c3d4e4;color:var(--ink)} .tab.is-on{background:var(--navy-800);border-color:var(--navy-800);color:#fff} .tab.is-on span{background:rgba(255,255,255,.18);color:#fff} .prod-meta{display:flex;align-items:center;gap:10px;white-space:nowrap} .pill{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; padding:4px 9px;border-radius:999px} .pill-ship{background:#e2f5ea;color:#1c6b42} .pill-clinic{background:#e6f0f6;color:#2f6584} .pane[hidden]{display:none} .prod-groups{display:flex;flex-direction:column;gap:clamp(38px,4vw,58px);margin-top:clamp(38px,5vw,60px)} .prod-cat{display:flex;align-items:baseline;gap:10px;font-size:1.02rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--navy-600); padding-bottom:14px;border-bottom:1px solid var(--line)} .prod-cat span{font-family:"Inter",sans-serif;font-size:12px;font-weight:500;letter-spacing:.04em; color:var(--ink-soft);opacity:.7} .prod-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,2.4vw,36px)} .prod{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:baseline; padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit; transition:padding-left .3s var(--ease),border-color .3s} .prod:hover{padding-left:8px;border-color:var(--blue-400)} .prod-name{font-family:"Inter Tight",sans-serif;font-size:1.05rem;font-weight:600;letter-spacing:-.015em} .prod-price{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--navy-600);white-space:nowrap} .prod-desc{grid-column:1/-1;font-size:14px;line-height:1.5;color:var(--ink-soft);margin-top:2px} @media (max-width:1000px){.prod-list{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.prod-list{grid-template-columns:1fr}} /* ============================================================ LIGHT SECTIONS ============================================================ */ .light{background:var(--paper);color:var(--ink);position:relative} /* padding-block only. The shorthand here wiped out the left/right padding that .wrap sets, so every `section class="pad wrap"` ran to the screen edge with no gutter at all. Tightened vertically too - the old 72px floor left a bare band between a hero and the row under it. */ /* 5.4vw put 78px above and below every section - 155px of air between one band of content and the next on a laptop, which is what made the longer pages feel like they were mostly gap. 3.6vw gives 52px, so ~104px between sections: still a clear break, a third less scrolling. */ section.pad{padding-block:clamp(34px,3.6vw,58px)} .eyebrow{ display:inline-flex;align-items:center; font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--navy-600); } h2{font-size:clamp(2rem,4.3vw,3.5rem);line-height:1.03;font-weight:600;margin-top:18px} .section-lede{color:var(--ink-soft);font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.6;margin-top:20px;max-width:56ch} .head-row{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end} /* cards */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(38px,5vw,60px)} .card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:30px 28px 26px;display:flex;flex-direction:column;gap:14px; transition:transform var(--card-t) var(--ease),box-shadow var(--card-t) var(--ease),border-color var(--card-t); } .card:hover{transform:translateY(var(--lift));box-shadow:var(--card-shadow-hover);border-color:#cbd9ee} .card .ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(145deg,#12507f,#1d6fae);display:grid;place-items:center;color:#fff} .card .ico svg{width:22px;height:22px} .card h3{font-size:1.3rem;font-weight:600} .card p{color:var(--ink-soft);font-size:15.3px;line-height:1.6} .tag{ margin-top:auto;align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--navy-600);background:#e8f1f9;border-radius:999px;padding:7px 13px; } /* steps */ /* Four steps in a row of four. They were in a three-column grid, which left the fourth stranded on a line of its own, and each one was a hairline rule rather than anything you could look at. They are cards now, in the same language as the rest of the site: white surface, soft ring, a lift on hover. The gap is tighter than the old 44px - four cards reading as one sequence should sit close enough to be read as one. */ .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.5vw,20px);margin-top:clamp(26px,3vw,40px);counter-reset:s} /* The same card the tiers above are made of: navy gradient, gold rule, pale type. Four white boxes under four navy ones looked like two different pages stitched together. */ .step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px; padding:clamp(20px,2.1vw,26px);color:#fff;border:0;border-radius:22px;overflow:hidden; background:linear-gradient(138deg,#0b2b49 0%,#12405f 44%,#1b5b86 100%); box-shadow:0 22px 48px rgba(6,26,48,.34),inset 0 1px 0 rgba(255,255,255,.13); transition:transform var(--card-t) var(--ease),box-shadow var(--card-t) var(--ease)} /* the third step is the one that does the work, so it takes the lighter face the commission tier uses */ .steps .step:nth-child(3){background:linear-gradient(138deg,#12507f 0%,#1b6ea3 46%,#2b86c9 100%); box-shadow:0 26px 58px rgba(9,52,92,.44),inset 0 1px 0 rgba(255,255,255,.18)} /* the lighter face needs brighter body type: the standard pale blue lands at 4.28:1 on it, just under the 4.5 AA wants */ .steps .step:nth-child(3) p{color:#eef5fd} .step:hover{transform:translateY(var(--lift)); box-shadow:0 30px 64px rgba(6,26,48,.44),inset 0 1px 0 rgba(255,255,255,.2)} /* A bare "01" in a circle made the reader work out what the number meant. It says Step 01, as a tag rather than a token - the same uppercase, letter-spaced label the tier cards use for They save and You earn, so the two rows of cards are speaking the same way. */ .step::before{ counter-increment:s;content:"Step 0" counter(s); display:inline-flex;align-items:center;flex:none; padding:6px 12px;border-radius:999px; font-family:"Inter Tight",sans-serif;font-size:10.5px;font-weight:600; letter-spacing:.2em;text-transform:uppercase; color:#06243f;background:#9fcbe8; box-shadow:0 6px 16px rgba(3,17,32,.26); } /* they arrive one after another rather than all at once - enough to notice, not enough to wait for */ /* the stagger was .07s apart, enough that a screenshot or a fast scroll caught them at four different heights and read as misalignment; tightened so they arrive almost together and still have a sense of order */ .steps .rv:nth-child(2){transition-delay:.04s} .steps .rv:nth-child(3){transition-delay:.08s} .steps .rv:nth-child(4){transition-delay:.12s} @media (prefers-reduced-motion:reduce){.steps .rv{transition-delay:0s}} /* A gold rule under the number, the same one the tier cards and the gift card use, so the page has one accent rather than three. And a hairline across each gap: four separate boxes became four steps of one thing. */ .step::after{content:"";position:absolute;top:calc(clamp(20px,2.1vw,26px) + 14px); left:100%;width:clamp(14px,1.5vw,20px);height:1px; background:linear-gradient(90deg,rgba(159,203,232,.5),rgba(159,203,232,.12))} .step:last-child::after{display:none} .step-rule{display:block;width:34px;height:2px;background:#d4b476;margin:-2px 0 2px} .step h3{font-size:1.06rem;font-weight:600;margin-top:2px;color:#fff} .step p{color:rgba(210,229,246,.9);font-size:14px;line-height:1.6;margin-top:0} /* science split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center} .panel{ border-radius:26px;padding:clamp(28px,3.4vw,46px); background:linear-gradient(160deg,#12507f,#0d3358 55%,#081f38); color:#fff;position:relative;overflow:hidden; } .panel::after{ content:"";position:absolute;width:340px;height:340px;right:-90px;top:-110px;border-radius:50%; background:radial-gradient(circle,rgba(120,180,255,.5),transparent 65%);filter:blur(8px); } .metric-list{display:grid;gap:2px;position:relative;z-index:1} .metric{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14)} .metric:last-child{border-bottom:0} .metric .n{font-family:"Inter Tight",sans-serif;font-size:clamp(2rem,3.4vw,2.9rem);font-weight:600;letter-spacing:-.03em} .metric .l{color:rgba(206,225,255,.75);font-size:14.5px;text-align:right;max-width:17ch;line-height:1.4} /* faq */ .faq{margin-top:clamp(36px,4vw,54px);border-top:1px solid var(--line)} .q{border-bottom:1px solid var(--line)} .q button{ width:100%;background:none;border:0;cursor:pointer;text-align:left; display:flex;justify-content:space-between;align-items:center;gap:24px; padding:26px 0;font-family:"Inter Tight",sans-serif;font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:500;color:var(--ink);letter-spacing:-.02em; } .q .pm{width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .4s var(--ease),background .3s,border-color .3s} .q .pm::before,.q .pm::after{content:"";position:absolute;background:var(--navy-700);border-radius:2px;transition:opacity .3s} .q .pm{position:relative} .q .pm::before{width:11px;height:1.6px} .q .pm::after{width:1.6px;height:11px} .q[open-state] .pm{transform:rotate(90deg);background:var(--navy-800);border-color:var(--navy-800)} .q[open-state] .pm::before,.q[open-state] .pm::after{background:#fff} .q[open-state] .pm::after{opacity:0} .a{overflow:hidden;max-height:0;transition:max-height .5s var(--ease)} .a p{color:var(--ink-soft);font-size:15.6px;line-height:1.68;padding:0 0 26px;max-width:70ch} /* cta band */ .cta-band{ background:#fff;color:#173c88;position:relative;overflow:hidden; padding:clamp(48px,5.6vw,84px) 0; } .cta-band::before{display:none} .cta-inner{position:relative;min-height:420px;border-radius:28px;overflow:hidden;background:#0d181d; display:grid;grid-template-columns:1.15fr .85fr;align-items:center;box-shadow:0 22px 58px rgba(5,18,28,.2)} .cta-copy{position:relative;z-index:2;padding:clamp(38px,5vw,66px)} .cta-pill{display:inline-flex;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);color:#b9dbef;font-size:12px;font-weight:500} .cta-inner h2{font-size:clamp(2.15rem,4vw,3.35rem);line-height:1.05;font-weight:500;letter-spacing:-.045em; color:#fff;margin-top:21px} .cta-inner p{color:rgba(221,235,241,.76);font-size:1rem;line-height:1.6;max-width:52ch;margin-top:18px} /* was #2351b8 - an indigo that appears nowhere else on the site, so the last button before the footer was the one button in a different brand */ .cta-button{margin-top:28px;background:var(--navy-600);color:#fff;padding:14px 28px; box-shadow:0 12px 25px rgba(29,111,174,.3)} .cta-button:hover{background:var(--blue-500)} .cta-photo{position:absolute;inset:0 0 0 56%;margin:0;overflow:hidden} .cta-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d181d 0%,rgba(13,24,29,.94) 9%,rgba(13,24,29,.55) 22%,transparent 43%)} .cta-photo img{width:100%;height:100%;object-fit:cover;object-position:center 23%;display:block; transition:transform 1s var(--ease)} .cta-inner:hover .cta-photo img{transform:scale(1.025)} @media(max-width:760px){ .cta-inner{grid-template-columns:1fr;min-height:700px;align-items:start} .cta-copy{padding:38px 28px} .cta-photo{inset:auto 0 0;height:48%} .cta-photo::after{background:linear-gradient(180deg,#0d181d 0%,rgba(13,24,29,.82) 15%,transparent 38%)} } /* footer */ footer{background:var(--navy-900);color:rgba(214,229,255,.72);padding:clamp(42px,4.4vw,66px) 0 62px;position:relative} .foot-top{display:grid;grid-template-columns:1.7fr 1.15fr 1fr 1fr .8fr;gap:clamp(26px,3vw,44px)} .foot-col h4,.foot-brand h4{color:#fff;font-size:13px;font-weight:600;letter-spacing:.09em; text-transform:uppercase;margin:0 0 16px} .foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:14.6px} .foot-col a:hover,.foot-social a:hover,.foot-legal a:hover{color:#fff} .foot-brand p{margin-top:16px;font-size:14.8px;line-height:1.65;max-width:34ch} /* Eight icons do not fit the brand column in one row, and a free wrap left six on top and two stranded underneath. Four and four reads as intended. */ .foot-social{display:grid;grid-template-columns:repeat(4,38px);gap:10px;margin-top:22px} .foot-social a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%; border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05); transition:background .3s,border-color .3s,transform .3s var(--ease)} .foot-social a:hover{background:var(--navy-600);border-color:var(--navy-600);transform:translateY(-2px)} .foot-social svg{width:16px;height:16px;fill:rgba(220,235,250,.85)} .foot-social a:hover svg{fill:#fff} .foot-map{margin-top:clamp(34px,4vw,52px);border-radius:18px;overflow:hidden; border:1px solid rgba(255,255,255,.14);height:clamp(200px,26vh,280px);background:#0d3358} .foot-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.25) contrast(1.05)} .foot-col address{font-style:normal;font-size:14.6px;line-height:1.6;margin-top:16px} .foot-hours{font-size:14.6px;line-height:1.6;margin-top:14px;color:rgba(200,218,240,.62)} .foot-dir{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:14px; font-weight:500;color:var(--blue-300)} .foot-dir:hover{color:#fff} /* the same link sits in a light panel on the contact page, where the footer's pale blue reads 1.6:1 - there it takes the ink palette instead */ .light .foot-dir,.contact-details .foot-dir{color:var(--navy-700)} .light .foot-dir:hover,.contact-details .foot-dir:hover{color:var(--navy-900)} .foot-dir .arrow{width:12px;height:12px} .foot-logo .sub{font-size:8px;letter-spacing:.24em;margin-right:0;align-self:flex-start; color:rgba(255,255,255,.6);white-space:nowrap} .foot-pay{font-size:13.2px;line-height:1.6;color:rgba(206,224,246,.6);margin-top:20px;max-width:70ch} .foot-legal{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13.4px; margin-top:clamp(38px,4.5vw,58px);padding-top:24px;border-top:1px solid rgba(255,255,255,.1)} .legal{margin-top:18px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between; font-size:13px;color:rgba(200,218,250,.72)} /* .45 put this at 3.3:1 on the footer navy; small print is exactly the text that cannot afford to be faint */ .disclaimer{font-size:12.4px;line-height:1.65;color:rgba(196,214,248,.72);margin-top:22px;max-width:92ch} @media (max-width:1080px){.foot-top{grid-template-columns:1fr 1fr 1fr}} @media (max-width:640px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}} @media (max-width:430px){.foot-top{grid-template-columns:1fr}} /* reveal - uses the standalone translate/scale properties, not `transform`, so a card's own hover transform keeps its own (much snappier) timing */ .rv{opacity:0;translate:0 30px;scale:.988;filter:blur(5px); transition:opacity .9s var(--ease),translate .9s var(--ease), scale .9s var(--ease),filter .9s var(--ease); will-change:opacity,translate,filter} .rv.in{opacity:1;translate:none;scale:none;filter:blur(0);will-change:auto} /* ---- no-JS fallback, which is also the AI-crawler fallback --------------- 527 blocks across 80 pages sit at opacity:0 until an IntersectionObserver adds .in; the preloader covers the whole viewport until a script clears it; every FAQ answer is max-height:0 until it is clicked. Anything that parses the page without running scripts was handed a blank page - and most AI crawlers (GPTBot, ClaudeBot, PerplexityBot, CCBot) do exactly that, as do reader modes and text browsers. picks up .js from an inline script in the head, so these three rules apply only when that script has not run. Nothing changes for a real browser: with .js present the selector cannot match, so the reveal, the preloader and the accordion behave exactly as before - including the reduced-motion override further up, which this deliberately does not touch. */ html:not(.js) .rv{opacity:1;translate:none;scale:none;filter:none} html:not(.js) .preload{display:none} html:not(.js) .a{max-height:none} /* directional variants for side-by-side blocks */ .rv-l{translate:-34px 12px} .rv-r{translate:34px 12px} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .cards{grid-template-columns:repeat(2,1fr)} } /* Five links, three pills and the logo need about 1060px. The burger used to wait until 900px, so in between "How it works" broke onto two and then three lines and the logo was squeezed from 132px down to 61px. */ @media (max-width:1060px){ .nav-links{display:none} .burger{display:block} .brand{flex:none} } @media (max-width:900px){ /* Side-by-side blocks are stacked by now, so entering from the side means nothing - and .rv-r parks 34px to the right until it reveals, which is enough to make the whole page draggable sideways. Come up instead. */ .rv-l,.rv-r{translate:0 30px} .hero-grid{width:100%;grid-template-columns:1fr;padding:calc(150px + var(--topbar-h)) clamp(20px,4vw,56px) calc(42vh + 42px);gap:34px} .hero-copy{max-width:none} .hero{min-height:max(100svh,860px);align-items:flex-start} .hero-photo{inset:auto 0 0;height:42%;background:var(--hero-tone)} .hero-photo .fill{object-fit:contain} .hero-photo .whole{height:100%;width:100%;object-fit:contain;object-position:center; -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 5%,#000 14%,#000 86%,rgba(0,0,0,.55) 95%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 5%,#000 14%,#000 86%,rgba(0,0,0,.55) 95%,transparent 100%)} .hero-photo::after{background:none} .vial{height:auto;width:min(62%,290px)} .hero-copy{max-width:640px} .split{grid-template-columns:1fr} .head-row{grid-template-columns:1fr} } @media (max-width:620px){ .cards{grid-template-columns:1fr} .brk{display:none} /* These two used to be hidden here, which put Shop Now and In-Clinic Services behind the burger on exactly the device most people arrive on. Three pills, a logo and a burger will not fit on one 360px line, so the bar takes two rows instead of hiding anything: the logo, Earn With Us and the burger on top, then Shop Now and In-Clinic Services across the full width underneath, where they are the easiest thing on the page to hit. display:contents dissolves the .nav-cta wrapper so its three buttons become flex items of the bar itself and can be ordered around the burger. The ::after is a zero-height full-width item - the flex way of saying "line break here". */ .nav-cta{display:contents} .nav-inner{gap:8px;row-gap:9px;flex-wrap:wrap;justify-content:flex-start} .brand{order:1;flex:1 1 auto;min-width:0} .btn-affiliate{order:2;padding:9px 14px;font-size:12.5px;letter-spacing:0} .burger{order:3} .nav-inner::after{content:"";order:4;flex-basis:100%;height:0} .btn-shop{order:5} .btn-clinic{order:6} .btn-shop,.btn-clinic{flex:1 1 0;justify-content:center; padding:11px 10px;font-size:13px;letter-spacing:0} .brand-logo{height:36px} .hero-grid{padding:calc(132px + var(--topbar-h)) clamp(20px,4vw,56px) calc(42vh + 36px)} .brand .word{font-size:19px} h1{font-size:clamp(2.15rem,9vw,3.2rem);overflow-wrap:break-word} .hero-sub{font-size:1rem} } @media (prefers-reduced-motion:reduce){ /* collapse animations instead of killing them - `animation:none` strands every `both`/`forwards` element on its *start* frame, which left the hero copy, the hero photo and the preloader wordmark permanently blank */ *,*::before,*::after{ animation-duration:.01ms!important; animation-delay:0s!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0s!important; scroll-behavior:auto!important} html{scroll-behavior:auto} .pl-water,.pl-aura,.pl-gloss,.pl-bar i::after{display:none} .hero-photo .slide:not(.s1){opacity:0} .hero-photo .slide.is-active .fill{transform:none} .rv{opacity:1;translate:none;scale:none;filter:none} .review-marquee{overflow-x:auto} .review-track{animation:none;transform:none} .how{padding:64px 0} .how-sticky{position:static} } @media (prefers-reduced-motion:reduce) and (max-width:700px){ .how-grid{grid-template-columns:1fr} } /* mobile menu */ .sheet{ position:fixed;inset:0;top:var(--topbar-h);z-index:70; /* after inset, or inset resets it */background:rgba(8,36,63,.97);backdrop-filter:blur(14px); display:grid;place-content:center;gap:8px;text-align:center; opacity:0;pointer-events:none;transition:opacity .35s var(--ease); } .sheet.open{opacity:1;pointer-events:auto} .sheet a{color:#fff;font-family:"Inter Tight",sans-serif;font-size:30px;font-weight:500;padding:14px} .sheet .close{position:absolute;top:22px;right:22px;background:none;border:0;color:#fff;font-size:30px;cursor:pointer;line-height:1} /* .sheet a paints every link white, which erased the white button's own label and blew its type up to the 30px menu size */ .sheet a.btn{font-size:16px;font-family:"Inter",sans-serif;padding:14px 26px} .sheet a.btn-white{color:var(--navy-900)} /* ============================================================ PRODUCTS PAGE - professional blue ============================================================ */ :root{ --pb-900:#08243f; --pb-700:#12507f; --pb-500:#1d6fae; --pb-200:#c7dcee; --pb-100:#e8f1f9; --pb-50:#f5f9fd; } body.page-products{background:var(--pb-50)} .phead{background:linear-gradient(135deg,#08243f 0%,#12507f 55%,#1d6fae 130%);color:#fff; padding:calc(clamp(104px,11.5vw,146px) + var(--topbar-h)) 0 clamp(38px,4.6vw,60px);position:relative;overflow:hidden} .phead::after{content:"";position:absolute;width:560px;height:560px;right:-160px;top:-220px; border-radius:50%;background:radial-gradient(circle,rgba(150,205,240,.32),transparent 66%);filter:blur(14px)} .phead .wrap{position:relative;z-index:1} /* .phead-title is the Florida-gate notice on the peptide pages. It was an

, which gave those pages two - and the product name is the page, not the gate. It is a
now and borrows the head type so nothing moved. / .phead h1,.phead .phead-title{color:#fff;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.05; text-shadow:none;max-width:16ch;margin-top:16px} .phead p{color:rgba(214,235,250,.86);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6; margin-top:18px;max-width:58ch} / #9fcbe8 fell to 4.1:1 on the lighter head grounds; this clears AA on all of them / .phead .eyebrow{color:#c3e0f5} .pbody{padding:clamp(26px,3vw,40px) 0 clamp(48px,5.6vw,84px)} .tabs{display:flex;gap:8px;flex-wrap:wrap} .tab{font-family:"Inter",sans-serif;font-size:15px;font-weight:500;cursor:pointer; display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px; border:1px solid var(--pb-200);background:#fff;color:var(--pb-700); transition:background .3s,color .3s,border-color .3s,box-shadow .3s} .tab span{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px; background:var(--pb-100);color:var(--pb-700)} .tab:hover{border-color:var(--pb-500);box-shadow:0 6px 18px rgba(10,55,100,.1)} .tab.is-on{background:var(--pb-700);border-color:var(--pb-700);color:#fff; box-shadow:0 10px 26px rgba(10,55,100,.24)} .tab.is-on span{background:rgba(255,255,255,.2);color:#fff} .pane[hidden]{display:none} .pgroup{margin-top:clamp(34px,4vw,52px)} .pgroup h2{display:flex;align-items:baseline;gap:10px;font-size:1rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--pb-700);margin:0 0 18px; padding-bottom:13px;border-bottom:1px solid var(--pb-200)} .pgroup h2 em{font-style:normal;font-family:"Inter",sans-serif;font-size:12px;font-weight:500; letter-spacing:.04em;color:var(--pb-500);opacity:.8} .pgroup h2{flex-wrap:wrap} .pgroup-from{margin-left:auto;font-family:"Inter",sans-serif;font-size:12px;font-weight:500; letter-spacing:.01em;text-transform:none;color:var(--pb-700)} @media (max-width:560px){.pgroup-from{margin-left:0;flex-basis:100%}} .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:clamp(14px,1.5vw,20px)} .pcard{display:flex;flex-direction:column;gap:9px;text-decoration:none; background:#fff;border:1px solid var(--pb-200);border-radius:16px; padding:22px 22px 19px;color:var(--pb-900); transition:transform var(--card-t) var(--ease),box-shadow var(--card-t) var(--ease),border-color var(--card-t)} .pcard:hover{transform:translateY(var(--lift));border-color:var(--pb-500); box-shadow:0 22px 48px rgba(10,55,100,.15)} .pcard-product{position:relative;overflow:visible;padding:0 10px 20px;background:transparent;border:0;border-radius:0;box-shadow:none} .pcard-product:hover{border-color:transparent;box-shadow:none;transform:none} .pvisual{height:190px;display:grid;place-items:center;margin:-4px -4px 8px; border-radius:12px;background:radial-gradient(circle at 50% 68%,#fff 0,#edf6fc 54%,#e3eef7 100%); overflow:hidden;position:relative} .pvisual::after{content:"";position:absolute;width:116px;height:18px;bottom:13px;border-radius:50%; background:rgba(8,36,63,.16);filter:blur(7px);transition:transform .5s var(--ease),opacity .5s} .pvial{width:116px;height:166px;position:relative;z-index:1;display:block; transition:transform .55s var(--ease)} .pglass{position:absolute;left:8px;right:8px;top:37px;height:124px;border-radius:18px 18px 22px 22px; border:2px solid rgba(113,143,163,.42);overflow:hidden; background:linear-gradient(90deg,rgba(190,218,231,.68),rgba(255,255,255,.96) 18%,rgba(255,255,255,.72) 75%,rgba(174,207,222,.7)); box-shadow:inset 8px 0 10px rgba(255,255,255,.75),inset -5px 0 9px rgba(81,125,151,.12)} .pneck{position:absolute;z-index:2;top:26px;left:24px;width:68px;height:26px;border:2px solid rgba(108,139,157,.45); border-radius:8px;background:linear-gradient(90deg,#d7e8ef,#fff 24%,#e3f0f5 75%,#bfd4df)} .pcap{position:absolute;z-index:4;top:8px;left:13px;width:90px;height:35px;border-radius:9px 9px 7px 7px; background:linear-gradient(180deg,#f7fafc 0,#9da8b0 18%,#dce2e6 44%,#818d96 76%,#c8d0d5 100%); border:1px solid #9ba6ad;box-shadow:0 4px 5px rgba(8,36,63,.2); transform-origin:88% 60%;transition:transform .58s cubic-bezier(.2,.85,.25,1),box-shadow .58s} .pcap::after{content:"";position:absolute;left:7px;right:7px;bottom:6px;height:2px;background:rgba(69,83,93,.28); box-shadow:0 -6px rgba(255,255,255,.34),0 5px rgba(255,255,255,.25)} .plabel{position:absolute;z-index:2;left:0;right:0;top:31px;min-height:63px;padding:13px 6px 8px;text-align:center; background:rgba(255,255,255,.94);border-bottom:4px solid #46a9d6;color:var(--pb-900)} .plabel strong{display:block;font-family:"Inter Tight",sans-serif;font-size:14px;line-height:1.1;letter-spacing:-.03em} .plabel small{display:block;font-size:7px;color:#50677c;margin-top:5px;white-space:nowrap} .ppowder{position:absolute;left:9px;right:9px;bottom:5px;height:19px;border-radius:50% 50% 9px 9px; background:linear-gradient(180deg,#f7fbfd,#dfe8ec);box-shadow:0 -2px 6px rgba(122,155,171,.2)} .pcard-product:hover .pvial{transform:translateY(-8px) rotate(-1.5deg)} .pcard-product:hover .pcap{transform:translate(25px,-28px) rotate(24deg);box-shadow:-8px 12px 12px rgba(8,36,63,.18)} .pcard-product:hover .pvisual::after{transform:scale(.82);opacity:.65} .pcard-product:hover .ppowder{animation:powderShift .7s ease-in-out both} @keyframes powderShift{50%{transform:skewX(-12deg) translateX(-2px)}100%{transform:skewX(5deg) translateX(1px)}} .pvial-svg{width:142px;height:190px;overflow:visible;position:relative;z-index:1; transition:transform .55s var(--ease);filter:drop-shadow(0 8px 7px rgba(8,36,63,.12))} .vial-cap{transform-box:fill-box;transform-origin:88% 70%; transition:transform .58s cubic-bezier(.2,.85,.25,1)} .vial-name{font-family:"Inter Tight",sans-serif;font-size:23px;font-weight:700;letter-spacing:-.8px; text-anchor:middle;fill:#08243f} .vial-sub{font-family:"Inter",sans-serif;font-size:8.5px;font-weight:500;letter-spacing:.15px; text-anchor:middle;fill:#4a5f70} .vial-dose{font-family:"Inter",sans-serif;font-size:6.5px;text-anchor:middle;fill:#657783} .vial-powder{transform-box:fill-box;transform-origin:center bottom} .pcard-product:hover .pvial-svg{transform:translateY(-8px) rotate(-1.2deg)} .pcard-product:hover .vial-cap{transform:translate(34px,-34px) rotate(24deg)} .pcard-product:hover .vial-powder{animation:powderShift .7s ease-in-out both} .pvial-photo{position:relative;z-index:1;width:auto;height:182px;object-fit:contain; filter:drop-shadow(0 9px 8px rgba(8,36,63,.16));transition:transform .55s var(--ease),filter .55s} .pvisual-photo::before{content:"";position:absolute;z-index:2;top:-35%;left:-45%;width:34px;height:170%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); transform:rotate(18deg);opacity:0;pointer-events:none} .pcard-product:hover .pvial-photo{transform:translateY(-9px) rotate(-1.5deg) scale(1.035); filter:drop-shadow(0 15px 11px rgba(8,36,63,.2))} .pcard-product:hover .pvisual-photo::before{animation:vialShine .8s ease-out} @keyframes vialShine{0%{left:-45%;opacity:0}20%{opacity:.75}100%{left:120%;opacity:0}} .pcard-product .pvisual{height:300px;margin:0 0 10px;background:transparent;border-radius:0;overflow:visible} .pcard-product .pvisual::after{bottom:21px;width:150px;opacity:.72} .pcard-product .pvial-photo{height:286px;max-width:100%} .pcard-product:hover .pvial-photo{transform:translateY(-14px) rotate(-1.8deg) scale(1.045)} / the photographic vial opens like the CSS ones above it - must sit after the .pvial-photo hover rule, which it ties with on specificity / .pcard-product:hover .shot-cap{ transform:translate(12px,-27px) rotate(16deg) scale(1.045); filter:drop-shadow(-7px 13px 11px rgba(8,36,63,.24))} .pcard .pname{font-family:"Inter Tight",sans-serif;font-size:1.14rem;font-weight:600; letter-spacing:-.02em;color:var(--pb-900)} .pcard .pdesc{font-size:14.3px;line-height:1.55;color:#4a6480;flex:1} .pcard .prow{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:6px;padding-top:14px;border-top:1px solid var(--pb-100)} .pcard .pprice{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--pb-700)} .pill{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; padding:4px 9px;border-radius:999px} .pill-ship{background:#e3f2e9;color:#1c6b42} .pill-clinic{background:var(--pb-100);color:var(--pb-700)} / ============================================================ CONTACT PAGE ============================================================ / .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,4vw,64px);align-items:start} / while the request form is hidden the second column has nothing in it, so the details would sit in a half-width gutter with dead space beside them / .contact-grid:has(.contact-form-card[hidden]){grid-template-columns:minmax(0,1fr)} .contact-details h2{font-size:clamp(1.6rem,2.6vw,2.3rem);color:var(--ink);line-height:1.16} .contact-block{margin-top:clamp(24px,3vw,36px)} .contact-block h3{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--brand-deep);margin-bottom:10px} .contact-details address{font-style:normal;color:var(--ink-soft);font-size:15.5px;line-height:1.7} .contact-list{list-style:none;margin:0;padding:0;display:grid;gap:8px} .contact-list li{display:flex;justify-content:space-between;gap:16px; color:var(--ink-soft);font-size:15.5px;max-width:340px} .contact-list li b{color:var(--ink);font-weight:600} .contact-list a{color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .3s} .contact-list a:hover{border-bottom-color:var(--brand-deep)} .contact-details .btn-navy{margin-top:clamp(26px,3vw,38px)} .contact-form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(24px,3vw,40px);box-shadow:0 20px 54px rgba(8,36,63,.09)} .contact-form-card h2{font-size:clamp(1.3rem,2vw,1.7rem);color:var(--ink)} .contact-note{color:var(--ink-soft);font-size:14.6px;line-height:1.6;margin-top:8px} .contact-form{display:grid;gap:16px;margin-top:22px} .contact-form label{display:grid;gap:7px;font-size:13px;font-weight:500;color:var(--ink)} .contact-form input,.contact-form textarea{ font:inherit;font-size:15px;color:var(--ink);background:var(--paper); border:1px solid var(--line);border-radius:11px;padding:12px 14px; transition:border-color .25s,box-shadow .25s} .contact-form textarea{resize:vertical;min-height:104px} .contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--blue-400); box-shadow:0 0 0 3px rgba(77,159,216,.18)} .contact-form .btn{justify-self:start;margin-top:4px} .form-status{font-size:14px;color:var(--ink-soft);min-height:1.2em;margin:0} @media(max-width:860px){.contact-grid{grid-template-columns:1fr}} / ============================================================ GIFT CARDS PAGE ============================================================ / / equal columns: the amounts panel, the card and the message all end up the same width, which is what makes the three read as one set / .handoff-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,4.5vw,72px);align-items:start} .handoff-copy{max-width:none} .handoff-copy>p{max-width:52ch} .handoff-copy h2{font-size:clamp(1.9rem,3.4vw,2.9rem);color:var(--ink);margin-top:16px} .handoff-copy>p{color:var(--ink-soft);font-size:15.5px;line-height:1.75;margin-top:22px} .handoff-picker{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px} .ho-chip{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line); background:#fff;font:500 14.5px/1 "Inter",sans-serif;color:var(--ink);cursor:pointer; transition:border-color .25s,background .25s,color .25s,transform .25s var(--ease)} .ho-chip:hover{border-color:var(--blue-400);transform:translateY(-1px)} .ho-chip.is-on{background:var(--navy-700);border-color:transparent;color:#fff} .ho-chip:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px} .handoff-card{margin:0;perspective:1000px} / the message sits below the card rather than across it - overlapping buried the artwork and left the left column empty / .handoff-note{position:relative;z-index:2;margin:22px 0 0;width:100%; background:#fff;border:1px solid var(--line);border-radius:20px; padding:clamp(26px,3vw,38px);box-shadow:0 26px 60px rgba(8,36,63,.10)} .ho-kicker{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-700)} / an editable field that still reads as the message itself, not a form input / .ho-line{display:block;width:100%;resize:none;overflow:hidden; border:0;border-bottom:2px solid transparent;background:none;padding:0 0 6px; font-family:"Inter Tight","Inter",sans-serif;font-weight:400; transition:border-color .25s,background .25s; font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.4;letter-spacing:-.02em; color:var(--ink);margin-top:14px;min-height:4.2em; transition:opacity .3s ease} .ho-line.is-out{opacity:0;transition-duration:.15s} .ho-line:hover{border-bottom-color:var(--line)} .ho-line:focus{outline:none;border-bottom-color:var(--blue-400)} .ho-line::placeholder{color:var(--muted);opacity:1} .ho-count{margin-top:10px;font-size:12.4px;color:var(--muted);display:flex; align-items:center;gap:8px} .ho-reset{border:0;background:none;padding:0;cursor:pointer;font:inherit; color:var(--navy-700);border-bottom:1px solid rgba(18,80,127,.35)} .ho-reset:hover{color:var(--navy-800)} .ho-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center} / the line the copy button appends, shown so the preview is what you get / .ho-tail{margin-top:14px;font-size:14.4px;color:var(--ink-soft); padding-top:14px;border-top:1px dashed var(--line)} .ho-code{display:inline-flex;background:var(--ice);color:var(--navy-800); font:13px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;padding:8px 12px;border-radius:8px} .ho-hint{font-size:13px;color:var(--ink-soft);margin-top:10px;line-height:1.55} .ho-copy{margin-top:20px;border:1px solid var(--line);background:#fff;border-radius:999px; padding:12px 20px;font:500 14px/1 "Inter",sans-serif;color:var(--ink);cursor:pointer; transition:border-color .25s,transform .25s var(--ease)} .ho-copy:hover{border-color:var(--blue-400);transform:translateY(-1px)} .ho-copy:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px} .ho-status{display:block;margin-top:10px;font-size:13px;color:var(--ink-soft);min-height:1.2em} .why-band{background:linear-gradient(160deg,#08243f 0%,#0d3a63 62%,#12507f 120%); color:#fff;padding:clamp(48px,5.4vw,80px) 0} .why-band h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.9rem);margin-top:16px;max-width:20ch} .why-lead{color:rgba(214,235,250,.82);font-size:15.8px;line-height:1.7;margin-top:18px;max-width:46ch} .why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(22px,2.6vw,38px);margin-top:clamp(44px,5vw,68px)} .why-item h3{font-size:1.12rem;font-weight:600;color:#fff;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)} .why-item p{color:rgba(206,227,245,.76);font-size:14.8px;line-height:1.65;margin-top:12px} / the one thing that could waste someone's money, said before they spend it / .why-caveat{margin-top:clamp(44px,5vw,64px);border-left:3px solid #d4b476; padding:4px 0 4px clamp(20px,2vw,28px);max-width:78ch} .why-caveat h3{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#d4b476} .why-caveat p{color:rgba(214,235,250,.86);font-size:15.4px;line-height:1.72;margin-top:12px} .particulars-grid{display:grid;grid-template-columns:1.15fr .85fr; gap:clamp(40px,5vw,80px);margin-top:clamp(34px,4vw,52px);align-items:start} / The rule over each row is drawn by the dt and the dd separately, so the column gap left a 34px notch in every line. The space between the columns is the dt's own right padding now, and the two halves meet as one rule. / .facts{margin:0;display:grid;grid-template-columns:max-content 1fr; column-gap:0;row-gap:0} .facts dt{font-size:13.6px;font-weight:600;color:var(--ink);padding:16px clamp(20px,2.4vw,34px) 16px 0; border-top:1px solid var(--line);white-space:nowrap} .facts dd{margin:0;font-size:14.8px;line-height:1.62;color:var(--ink-soft); padding:16px 0;border-top:1px solid var(--line)} .amount-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(26px,3vw,38px);box-shadow:0 20px 48px rgba(8,36,63,.08)} .amount-kicker{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-700)} / amounts are typeset, not tappable - nothing here can take a payment / .amount-row{display:flex;flex-wrap:wrap;gap:clamp(14px,1.6vw,24px);margin-top:16px} .amount-row b{font-family:"Inter Tight",sans-serif;font-size:clamp(1.5rem,2.2vw,2rem); font-weight:600;letter-spacing:-.03em;color:var(--ink)} .amount-line{font-size:14.6px;line-height:1.65;color:var(--ink-soft);margin-top:16px} .amount-panel .btn{margin-top:24px} .amount-note{font-size:13px;line-height:1.6;color:var(--ink-soft);margin-top:16px} .gift-close h2{font-size:clamp(1.8rem,3.2vw,2.7rem);color:var(--ink)} .gift-close>div>p{color:var(--ink-soft);font-size:15.6px;line-height:1.72;margin-top:20px;max-width:56ch} .gift-close a[href^="tel"]{color:var(--navy-700);border-bottom:1px solid var(--line)} @media(max-width:1080px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){ .handoff-grid,.particulars-grid{grid-template-columns:1fr} .handoff-card{max-width:560px} .handoff-note{margin:20px 0 0;width:100%} .handoff-card .gift-card-art{transform:none} } @media(max-width:620px){ .why-grid{grid-template-columns:1fr} .facts{grid-template-columns:1fr;row-gap:0} .facts dt{padding-bottom:4px;white-space:normal} .facts dd{border-top:0;padding-top:0} .ho-line{font-size:1.15rem;min-height:6em} } / ============================================================ AFFILIATE BAND ============================================================ / .affiliate-band{border-top:1px solid var(--line)} .aff-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,5vw,84px);align-items:start} .aff-copy h2{font-size:clamp(1.8rem,3.2vw,2.7rem);color:var(--ink);margin-top:16px} .aff-copy>p{color:var(--ink-soft);font-size:15.5px;line-height:1.75;margin-top:20px;max-width:56ch} .aff-facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;max-width:56ch} .aff-facts li{position:relative;padding-left:24px;color:var(--ink-soft);font-size:15px;line-height:1.6} .aff-facts li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px; border-radius:50%;background:var(--blue-300);box-shadow:0 0 0 3px rgba(159,203,232,.28)} .aff-facts b{color:var(--ink);font-weight:600} .aff-copy .btn{margin-top:clamp(26px,3vw,36px)} / Built like the gift card: the same navy stock, the knocked-out mark at the top, a gold rule under it and the faint ring in the corner. The two are the only things on the site the visitor is handed rather than shown. / .aff-tiers{position:relative;overflow:hidden; background:linear-gradient(138deg,#0b2b49 0%,#12405f 44%,#1b5b86 100%); color:#fff;border-radius:var(--radius);padding:clamp(26px,3vw,40px); box-shadow:0 26px 60px rgba(8,36,63,.24),inset 0 1px 0 rgba(255,255,255,.13)} .aff-tiers>{position:relative;z-index:2} /* the ring, same as the gift card's / .aff-tiers::after{content:"";position:absolute;z-index:1;width:250px;height:250px; right:-96px;bottom:-108px;border:4px solid rgba(255,255,255,.07);border-radius:50%} .aff-brand{display:flex;align-items:center;justify-content:space-between;gap:16px} .aff-brand img{width:clamp(120px,13vw,155px);height:auto;display:block} .aff-tag{text-transform:uppercase;letter-spacing:.3em;font-size:11px;font-weight:600; color:#9fcbe8} .aff-rule{display:block;width:64px;height:2px;background:#d4b476; margin:clamp(16px,1.8vw,24px) 0 clamp(18px,2vw,26px)} .aff-kicker{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#9fcbe8} / a ladder, so the climb is the point rather than three equal boxes / .aff-ladder{list-style:none;margin:0;padding:0;display:grid;gap:2px} / the value stacks over its caption: the labels are phrases now ("10% COMMISSION"), not the two-character figures the side-by-side row assumed / .aff-ladder li{display:grid;gap:6px;padding:18px 0; border-top:1px solid rgba(255,255,255,.14)} .aff-ladder li:first-child{border-top:0;padding-top:0} .aff-ladder li b{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-.02em; font-size:clamp(1.45rem,2.1vw,1.95rem);line-height:1.05;color:rgba(255,255,255,.78)} .aff-ladder li span{font-size:14.6px;line-height:1.5;color:rgba(206,227,245,.78)} .aff-ladder li.is-top b{color:#fff} .aff-ladder li.is-top span{color:rgba(224,240,252,.92)} .aff-note{font-size:13.4px;line-height:1.6;color:rgba(198,220,240,.66);margin-top:18px} / The tier cards live in the right-hand column, two across. Below ~1180px that column is too narrow for them: at 1000px each card was 166px wide, so the THEY SAVE / YOU EARN tags were cut off mid-word and the captions ran into the MORE hint. Stack the deal early and hold the panel at the width the cards were designed for, rather than letting it stretch across a tablet. / @media(max-width:1180px){ .aff-grid{grid-template-columns:1fr} .aff-grid .aff-tiers{max-width:620px;width:100%} } / ---- affiliates page ----------------------------------------------------- / .aff-hero .aff-copy>p{margin-top:20px} .aff-copy .aff-small{font-size:14px;line-height:1.65;color:var(--ink-soft);margin-top:16px;max-width:52ch} .aff-note-inline{font-size:13px;color:var(--ink-soft);margin-top:14px} / the four pillars off the approved design - two up, each a claim and the reason it holds, so the row carries some weight rather than four bare words / .aff-pillars{list-style:none;margin:clamp(22px,2.6vw,30px) 0 0;padding:0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;max-width:60ch} .aff-pillars li{display:grid;gap:3px;padding-left:15px;position:relative} .aff-pillars li::before{content:"";position:absolute;left:0;top:7px; width:7px;height:7px;border-radius:50%;background:var(--blue-400); box-shadow:0 0 0 3px rgba(77,159,216,.16)} .aff-pillars b{font-size:15px;font-weight:600;color:var(--ink);line-height:1.25} .aff-pillars span{font-size:13.4px;line-height:1.5;color:var(--ink-soft)} @media (max-width:620px){.aff-pillars{grid-template-columns:1fr}} .aff-maths-inner{display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,80px);align-items:center} .aff-maths-inner h2{font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--ink);margin-top:16px} .aff-maths-inner p{color:var(--ink-soft);font-size:15.4px;line-height:1.72;margin-top:18px;max-width:52ch} / the sum is set out as a sum, so the number is clearly derived and not promised / .aff-sum{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(24px,3vw,36px);box-shadow:0 20px 48px rgba(8,36,63,.08)} .aff-sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px; padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:15.2px} .aff-sum-row b{font-family:"Inter Tight",sans-serif;font-size:1.1rem;color:var(--blue-500)} .aff-sum-total{display:flex;align-items:baseline;gap:14px;padding-top:20px;flex-wrap:wrap} .aff-sum-total b{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-.03em; font-size:clamp(2.2rem,3.6vw,3rem);color:var(--ink)} .aff-sum-total span{font-size:14.6px;color:var(--ink-soft)} .aff-terms-block .facts{margin-top:clamp(28px,3vw,40px)} .aff-terms-block .gift-actions{margin-top:clamp(30px,3.4vw,44px)} @media(max-width:900px){.aff-maths-inner{grid-template-columns:1fr}} / ---- a card's own action, under the card's link ---- / .padd{position:relative;display:flex;align-items:center;justify-content:center;gap:8px; margin-top:14px;width:100%;padding:12px 18px;border-radius:999px; border:0;background:var(--navy-700);color:#fff; font:500 14.5px/1 "Inter",sans-serif;cursor:pointer;overflow:hidden; transition:background .25s,transform .25s var(--ease)} .padd:hover{background:var(--navy-600);transform:translateY(-1px)} .padd:focus-visible{outline:2px solid var(--blue-400);outline-offset:3px} .pcard-link{display:block;color:inherit} / gift card amount picker / .amount-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .amount-chip{padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff; font:600 15px/1 "Inter Tight",sans-serif;color:var(--ink);cursor:pointer; transition:border-color .25s,background .25s,color .25s} .amount-chip:hover{border-color:var(--blue-400)} .amount-chip.is-on{background:var(--navy-700);border-color:transparent;color:#fff} .amount-custom{display:grid;gap:7px;margin-top:16px;font-size:13px;font-weight:500;color:var(--ink)} .amount-custom>span{display:flex;align-items:center;gap:6px;border:1px solid var(--line); border-radius:11px;background:#fff;padding:0 14px} .amount-custom i{font-style:normal;color:var(--ink-soft);font-size:15px} .amount-custom input{flex:1;border:0;background:none;font:inherit;font-size:15px; color:var(--ink);padding:12px 0;outline:none;-moz-appearance:textfield} .amount-custom input::-webkit-outer-spin-button, .amount-custom input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .amount-custom>span:focus-within{border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(77,159,216,.18)} .amount-add{margin-top:18px;width:100%;justify-content:center} / the slim page head, shared by the legal, journal and utility pages / .phead-slim{padding-top:calc(clamp(92px,10vw,124px) + var(--topbar-h));padding-bottom:clamp(28px,3.2vw,44px)} / ---- affiliate application ------------------------------------------- / .aff-apply{padding-bottom:clamp(44px,5.2vw,76px)} .aff-apply-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,64px); align-items:start} / this band sits on the light ground, so the copy is ink not white / .aff-apply h2{font-size:clamp(1.7rem,3.2vw,2.6rem);color:var(--ink);margin-bottom:16px} .aff-apply-grid>div:first-child p{color:var(--ink-soft);line-height:1.7;font-size:15.5px} .aff-check{list-style:none;margin:22px 0 18px;padding:0;display:grid;gap:11px} .aff-check li{position:relative;padding-left:30px;color:var(--ink);font-size:14.6px} .aff-check li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px; border-radius:50%;background:var(--blue-500); / the tick, drawn with two borders rotated into an L / box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)} .aff-check li::after{content:"";position:absolute;left:6px;top:8px;width:6px;height:3px; border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)} .aff-apply .contact-form-card h2{color:var(--ink);font-size:clamp(1.25rem,2vw,1.6rem)} .aff-portal-card{display:flex;flex-direction:column;align-items:flex-start} .aff-portal-card h2{margin-top:12px} .aff-portal-card .aff-check{width:100%;margin-block:22px} .aff-portal-card .aff-note-inline{margin-bottom:0} .f-two{display:grid;grid-template-columns:1fr 1fr;gap:16px} .f-opt{font-weight:400;color:var(--muted);font-size:12px} .contact-form select{width:100%;padding:12px 14px;border:1px solid var(--line); border-radius:12px;background:#fff;font:inherit;font-size:14.5px;color:var(--ink); appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%), linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%); background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%; background-size:5px 5px,5px 5px;background-repeat:no-repeat} .contact-form select:focus{outline:none;border-color:var(--blue-400)} .f-agree{display:flex!important;flex-direction:row;align-items:flex-start;gap:11px; font-weight:400!important;color:var(--ink-soft)!important;line-height:1.55} .f-agree input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--navy-700)} @media (max-width:900px){ .aff-apply-grid{grid-template-columns:1fr} .f-two{grid-template-columns:1fr} } / ============================================================ LEGAL PAGES A sticky rail on the left carries the date, a table of contents that follows the scroll, and the standing notice. The document reads beside it. ============================================================ / / The document takes the gutter, level with the h1 above it; the rail sits to its right. With the rail on the left the body started 330px in while the page heading started at the edge, which broke the page's own left edge. / .legal-shell{display:grid;grid-template-columns:minmax(0,1fr) 264px; gap:clamp(34px,5vw,80px);align-items:start; padding-top:clamp(30px,3.4vw,48px);padding-bottom:clamp(48px,5.6vw,84px)} / how far through the document you are / .legal-progress{position:sticky;top:var(--topbar-h);z-index:6;height:2px; background:rgba(8,36,63,.07)} .legal-progress i{display:block;height:100%;width:0; background:linear-gradient(90deg,var(--blue-500),var(--navy-700)); transition:width .12s linear} .legal-side{position:sticky;top:calc(var(--topbar-h) + 34px)} .legal-side-in{display:grid;gap:20px} .legal-updated{display:grid;gap:3px;font-size:11.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--muted);margin:0} .legal-updated b{font:600 14.5px/1.4 "Inter",sans-serif;letter-spacing:0; text-transform:none;color:var(--ink)} .legal-toc{display:grid;gap:1px;padding-left:13px;border-left:2px solid var(--line)} .legal-toc-t{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin-bottom:7px} .legal-toc a{position:relative;display:block;padding:6px 0;font-size:13.6px;line-height:1.45; color:var(--ink-soft);transition:color .25s,transform .25s var(--ease)} .legal-toc a::before{content:"";position:absolute;left:-15px;top:50%;translate:0 -50%; width:2px;height:0;border-radius:2px;background:var(--blue-500); transition:height .3s var(--ease)} .legal-toc a:hover{color:var(--ink)} .legal-toc a.is-here{color:var(--navy-700);font-weight:600;transform:translateX(2px)} .legal-toc a.is-here::before{height:74%} .legal-aside-note{background:#fff6e6;border:1px solid #e6d3ab;border-radius:13px; padding:14px 16px;font-size:12.8px;line-height:1.62;color:#5b4413} .legal-aside-note b{color:#3f2f08} .legal-side-call{display:inline-flex;align-items:center;gap:7px;font-size:13.4px; font-weight:500;color:var(--navy-700)} .legal-side-call .arrow{width:13px;height:13px} / ---- the document ---- / .legal-doc{max-width:76ch} .legal-sec{scroll-margin-top:calc(var(--topbar-h) + 26px); padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--line)} .legal-sec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} .legal-doc h2{font-size:clamp(1.2rem,2.1vw,1.6rem);color:var(--ink);margin-bottom:14px} .legal-doc p{color:var(--ink-soft);line-height:1.78;font-size:15.4px;margin-bottom:14px} .legal-doc p:last-child{margin-bottom:0} .legal-doc p b{color:var(--ink);font-weight:600} .legal-doc a{color:var(--navy-700);border-bottom:1px solid rgba(18,80,127,.3); transition:border-color .25s} .legal-doc a:hover{border-bottom-color:var(--navy-700)} .legal-lede{font-size:16.6px!important;color:var(--ink)!important;line-height:1.72!important} .legal-note{background:var(--paper);border-left:3px solid var(--blue-400); padding:14px 18px;border-radius:0 11px 11px 0;font-size:14.6px!important} .legal-ul{margin:0 0 16px;padding-left:20px;color:var(--ink-soft); line-height:1.78;font-size:15.4px} .legal-ul li{margin-bottom:8px;padding-left:4px} .legal-ul li::marker{color:var(--blue-400)} .legal-dl{margin:0} .legal-dl dt{font-weight:600;color:var(--ink);font-size:14.9px;margin-top:20px} .legal-dl dt:first-child{margin-top:0} .legal-dl dd{margin:6px 0 0;color:var(--ink-soft);line-height:1.74;font-size:15.2px} .todo{background:#ffe9a8;color:#5b4413;padding:1px 7px;border-radius:5px; font-size:.93em;font-weight:600} @media (max-width:960px){ .legal-shell{grid-template-columns:1fr;gap:30px} / the rail follows the document in the DOM so the document keeps the gutter on desktop; on one column that would bury the contents list and the draft notice at the foot of the page, so they are pulled back to the top / .legal-side{position:static;order:-1} .legal-doc{order:0} .legal-side-in{gap:16px} / on one column the contents list becomes a scrollable strip of chips / .legal-toc{display:flex;gap:8px;overflow-x:auto;padding:0 0 4px;border-left:0; scrollbar-width:none} .legal-toc::-webkit-scrollbar{display:none} .legal-toc-t{display:none} .legal-toc a{flex:none;padding:7px 13px;border:1px solid var(--line);border-radius:999px; background:#fff;white-space:nowrap;font-size:12.8px} .legal-toc a::before{display:none} .legal-toc a.is-here{border-color:var(--navy-700);background:var(--navy-700);color:#fff} .legal-doc{max-width:none} } / ============================================================ PRODUCT PAGE ============================================================ / / inside the navy header, so knocked out rather than ink / .crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap; margin-bottom:18px;font-size:13px;color:rgba(190,214,236,.72)} .crumbs a{color:rgba(214,231,245,.88);transition:color .25s} .crumbs a:hover{color:#fff} .crumbs i{font-style:normal;opacity:.45} .crumbs span{color:#fff;font-weight:500} .pdp-wrap{padding-top:clamp(28px,3.2vw,46px);padding-bottom:clamp(38px,4.4vw,62px)} .pdp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,80px);align-items:start} / ---- the vial ---- / / The vial used to sit inside two frames here - an outer card and a plate behind it - which left the product small inside a pair of boxes while the listing showed it standing on the page. This drops both, keeps the size the product deserves on its own page, and opens on hover exactly as the cards do: the same lift, the same cap coming off, the same sweep of light. / .pdp-media{position:relative;display:grid;justify-items:center;gap:26px; padding:0;background:none;border:0;border-radius:0;box-shadow:none} .pdp-media .pvisual{width:min(100%,460px);height:clamp(330px,40vw,470px);aspect-ratio:auto; justify-self:center;margin:0;background:transparent;border-radius:0;overflow:visible} .pdp-media .pvisual::after{width:190px;height:24px;bottom:18px;opacity:.6} .pdp-media .pvial-photo{height:clamp(310px,38vw,450px);max-width:100%; filter:drop-shadow(0 18px 22px rgba(8,36,63,.18))} .pdp-media:hover .pvial-photo{transform:translateY(-14px) rotate(-1.8deg) scale(1.045); filter:drop-shadow(0 28px 30px rgba(8,36,63,.22))} .pdp-media:hover .pvisual::after{transform:scale(.82);opacity:.5} .pdp-media:hover .pvisual-photo::before{animation:vialShine .8s ease-out} / must follow the .pvial-photo hover rule, which it ties with on specificity / .pdp-media:hover .shot-cap{ transform:translate(12px,-27px) rotate(16deg) scale(1.045); filter:drop-shadow(-7px 13px 11px rgba(8,36,63,.24))} / Glutathione carries the in-clinic photograph rather than a vial render, so its plate is the service card's 16/10 rather than the portrait the vials use. / .pdp-media .svisual{width:min(100%,460px);justify-self:center;margin:0} .pdp-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0} .pdp-chips li{padding:6px 13px;border-radius:999px;background:#fff; border:1px solid var(--line);font-size:12px;font-weight:500;color:var(--ink-soft)} .pdp-chips li:first-child{background:var(--navy-800);border-color:transparent;color:#fff} / ---- the copy and the buy box ---- / .pdp-cat{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--brand-deep);margin-bottom:12px} .pdp-info h1{font-size:clamp(2rem,4.4vw,3.1rem);color:var(--ink);line-height:1.02} .pdp-tag{font-size:16.4px;line-height:1.65;color:var(--ink-soft);margin-top:12px;max-width:52ch} .pdp-from{margin-top:20px;font-size:14px;color:var(--ink-soft)} .pdp-from b{font-family:"Inter Tight",sans-serif;font-size:2rem;font-weight:600; color:var(--ink);margin-left:6px;letter-spacing:-.03em} .pdp-from-enq{font-family:"Inter Tight",sans-serif;font-size:1.35rem;font-weight:600; color:var(--ink)} .pdp-meta{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line); display:grid;gap:11px} .pdp-meta li{display:flex;justify-content:space-between;gap:20px;align-items:baseline; font-size:14.2px} .pdp-meta span{color:var(--muted)} .pdp-meta b{color:var(--ink);font-weight:600;text-align:right} / The amount is emphasised, the term is not - but they are one sentence, so the term cannot be read away from the number it qualifies. / .pdp-price{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-soft)} .pdp-price b{font-family:"Inter Tight","Inter",sans-serif;font-size:21px;font-weight:700; letter-spacing:-.02em;color:var(--ink)} .pdp-buy{margin-top:24px;padding:22px;border-radius:20px;background:#fff; border:1px solid var(--line);box-shadow:0 20px 46px rgba(8,36,63,.09); display:grid;gap:16px} .pdp-field{display:grid;gap:8px} .pdp-field>span{font-size:12.5px;font-weight:600;color:var(--ink)} .pdp-buy select{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:13px; background:#fff;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%), linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%; background-size:5px 5px,5px 5px;background-repeat:no-repeat; transition:border-color .25s,box-shadow .25s} .pdp-buy select:focus{outline:none;border-color:var(--blue-400); box-shadow:0 0 0 3px rgba(77,159,216,.18)} .pdp-add{justify-content:center;width:100%;padding:14px 22px;font-size:15.5px} .pdp-buy-enquire{gap:13px} .pdp-enquire-t{font:600 16px/1.3 "Inter Tight","Inter",sans-serif;color:var(--ink)} .pdp-enquire-p{font-size:14.2px;line-height:1.65;color:var(--ink-soft)} .pdp-book{display:inline-flex;align-items:center;gap:7px; font-size:14px;font-weight:500;color:var(--navy-700);justify-self:start} .pdp-book .arrow{width:13px;height:13px} / A tel: link does nothing at all in a desktop browser - the visitor clicks "Speak With a Specialist" and the page just sits there, which reads as a broken link. The footer pill is fine because the number is printed directly under it; these two CTAs stood alone, so the number is now part of the label. The tap still dials on a phone and the laptop finally gets told what the link is for. / .callno{font-weight:650;letter-spacing:.01em;white-space:nowrap} .pdp-rx{margin-top:16px;font-size:13px;line-height:1.62;color:var(--ink-soft);max-width:56ch} / ---- panels below ---- / .pdp-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(20px,2.6vw,30px);padding-top:clamp(34px,4vw,56px); padding-bottom:clamp(30px,4vw,48px)} .pdp-panel{background:#fff;border:1px solid var(--line);border-radius:20px; padding:clamp(22px,2.6vw,30px); transition:transform var(--card-t) var(--ease),box-shadow var(--card-t) var(--ease), border-color var(--card-t)} .pdp-panel:hover{transform:translateY(var(--lift));border-color:#cbd9ee; box-shadow:var(--card-shadow-hover)} .pdp-panel h2{font-size:1.16rem;color:var(--ink);margin-bottom:14px} .pdp-panel p{font-size:14.8px;line-height:1.72;color:var(--ink-soft);margin-bottom:12px} .pdp-panel p:last-child{margin-bottom:0} .pdp-panel a{color:var(--navy-700);border-bottom:1px solid rgba(18,80,127,.3)} .pdp-list{list-style:none;margin:0;padding:0;display:grid;gap:11px} .pdp-list li{position:relative;padding-left:26px;font-size:14.8px;line-height:1.65; color:var(--ink-soft)} .pdp-list li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px; border-radius:50%;background:var(--blue-500)} .pdp-list-warn li::before{background:#d9a441} .pdp-panel-note{background:var(--paper)} / ---- more from the same group ---- / .pdp-rel{padding-bottom:clamp(44px,5.2vw,76px)} .rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px;margin-top:18px} .rel-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff; border:1px solid var(--line);border-radius:16px; transition:transform .3s var(--ease),box-shadow .3s,border-color .3s} .rel-card:hover{transform:translateY(var(--lift-sm));border-color:transparent; box-shadow:0 18px 36px rgba(8,36,63,.13)} .rel-card img{width:44px;height:54px;object-fit:contain;flex:none} .rel-card span{display:flex;flex-direction:column;gap:3px;min-width:0} .rel-card b{font-size:14.4px;font-weight:600;color:var(--ink)} .rel-card small{font-size:12.4px;color:var(--ink-soft)} @media (max-width:900px){ .pdp{grid-template-columns:1fr;gap:28px} .pdp-media .pvisual{width:min(100%,250px)} } / ============================================================ IN-CLINIC SERVICES - cards and service pages These carry photographs rather than a cut-out vial, so the visual is a 16:10 crop across the top of the card instead of a floating object. ============================================================ / / The in-clinic cards carry the same treatment as the product cards now: no white box, no border, no shadow - the photograph sits on the page and the words sit under it, centred. A grid of forty boxes was a grid of forty boxes; a grid of forty photographs is a menu. / .pcard-service{position:relative;display:flex;flex-direction:column;overflow:visible; background:transparent;border:0;border-radius:0;box-shadow:none; padding:0 10px 20px;text-align:center} .pcard-service:hover{transform:none;border-color:transparent;box-shadow:none} .pcard-service .pname,.pcard-service .pdesc{text-align:center} .pcard-service .prow{justify-content:center;border-top:0;padding-top:8px;gap:10px} / the picture lifts on hover instead of the box / .pcard-service .svisual{transition:transform .4s var(--ease),box-shadow .4s var(--ease); box-shadow:0 10px 26px rgba(8,36,63,.10)} .pcard-service:hover .svisual{transform:translateY(-6px); box-shadow:0 20px 42px rgba(8,36,63,.17)} .pcard-service .pcard-link{display:flex;flex-direction:column;flex:1} .svisual{display:block;margin:0 0 12px;border-radius:14px;overflow:hidden; background:#e9eff7;aspect-ratio:16/10} .svisual img{width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ease)} .pcard-service:hover .svisual img{transform:scale(1.045)} .pcard-service .pname{margin-bottom:4px} .pcard-service .prow{margin-top:auto} / Book is a link, not a button - nothing on the site is bought here / .padd-book{display:flex;align-items:center;justify-content:center; background:#fff;color:var(--navy-700);box-shadow:inset 0 0 0 1px var(--navy-700)} .padd-book:hover{background:var(--navy-700);color:#fff;box-shadow:none} / ---- the service page ---- / .pdp-service{align-items:start} .svc-media{border-radius:22px;overflow:hidden;border:1px solid var(--line); box-shadow:0 24px 60px rgba(8,36,63,.12);background:#e9eff7} .svc-media img{width:100%;height:auto;display:block;aspect-ratio:16/11;object-fit:cover} @media (max-width:900px){ .svc-media img{aspect-ratio:16/10} } .form-picked{display:inline-flex;align-items:center;gap:8px;align-self:start; padding:8px 14px;border-radius:999px;background:#eaf3fb;color:var(--navy-800); font:600 13px/1 "Inter",sans-serif} / ============================================================ GIFT CARD HERO The photograph carries the card on its right and open navy on its left, so the copy sits in the empty half and a scrim keeps it legible as the image crops in at narrower widths. ============================================================ / .gift-hero,.photo-head{position:relative;overflow:hidden; background:var(--head-top,#0b2b49); / the same height as .phead-airy - about and how-it-works use this variant and the journal uses that one, and a reader moving between them should not see the head change size / min-height:clamp(430px,40vw,560px); padding-bottom:clamp(38px,5vw,60px)} .gift-hero-bg,.photo-head-bg{position:absolute;inset:0; / Full bleed, right up behind the bar. Starting the photograph lower left a band of flat colour above it that never matched the picture, and read as a second strip. The nav is transparent and sits on the scrim instead. / background:var(--head-img) right center/cover no-repeat; animation:giftDrift 26s var(--ease) infinite alternate} .gift-hero{--head-img:url("../img/pages/gift-card-hero.webp")} / Page-head photographs are declared HERE, not in an inline style. A url() inside a custom property is resolved against the stylesheet that USES it, not the document that declares it - so an inline "../assets/img/..." on a page in pages/ was being resolved against assets/css/ and 404ing. Declaring it here makes the base unambiguous and keeps the path relative. / .head-about{--head-img:url("../img/pages/about-hero.webp")} .head-contact{--head-img:url("../img/pages/contact-room.webp")} .head-faq{--head-img:url("../img/pages/faq-room.webp")} .head-how-it-works{--head-img:url("../img/pages/how-it-works-hero.webp")} .head-journal{--head-img:url("../img/pages/journal-room.webp")} .head-affiliates{--head-img:url("../img/pages/affiliates-room.webp")} .head-shop{--head-img:url("../img/pages/shop-room.webp")} @keyframes giftDrift{from{transform:scale(1.04) translateX(0)} to{transform:scale(1.1) translateX(-1.4%)}} / the scrim: opaque enough to read on at the left, gone by the card / .gift-hero::after,.photo-head::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,rgba(6,28,50,.94) 0%,rgba(6,28,50,.82) 34%, rgba(7,32,56,.42) 56%,rgba(8,36,63,.06) 74%,transparent 100%)} .gift-hero-in,.photo-head-in{position:relative;z-index:2} .gift-hero-in p{max-width:52ch} .gift-points{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:30px 0 0;padding:0} .gift-points li{display:grid;justify-items:start;gap:9px; padding:0 clamp(16px,2.2vw,28px) 0 0;margin-right:clamp(16px,2.2vw,28px); border-right:1px solid rgba(255,255,255,.2)} .gift-points li:last-child{border-right:0;margin-right:0;padding-right:0} .gift-points svg{width:26px;height:26px;fill:none;stroke:#e8f4ff;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .gift-points span{font-size:13.4px;font-weight:500;line-height:1.4;color:#eaf3fb;max-width:12ch; text-shadow:0 1px 6px rgba(4,20,38,.5)} @media (max-width:860px){ / at this width the card is cropped away, so the scrim covers the whole frame / .gift-hero::after,.photo-head::after{ background:linear-gradient(160deg,rgba(6,28,50,.95),rgba(8,36,63,.8))} .gift-points{gap:18px 0} .gift-points li{flex:1 1 44%;border-right:0;margin-right:0;padding-right:12px} .gift-points span{max-width:none} } / ---- membership plans ------------------------------------------------- / .mplans{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:clamp(16px,2vw,24px);padding-top:clamp(34px,4vw,52px)} .mplan{position:relative;display:flex;flex-direction:column;background:#fff; border:1px solid var(--line);border-radius:20px;padding:clamp(22px,2.4vw,28px); transition:transform var(--card-t) var(--ease),box-shadow var(--card-t) var(--ease), border-color var(--card-t)} .mplan:hover{transform:translateY(var(--lift));border-color:#cbd9ee; box-shadow:var(--card-shadow-hover)} .mplan.is-best{border-color:var(--navy-700);box-shadow:0 24px 54px rgba(8,36,63,.14)} .mplan-flag{position:absolute;top:-11px;left:clamp(22px,2.4vw,28px); padding:5px 12px;border-radius:999px;background:var(--navy-800);color:#fff; font:600 11px/1 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase} .mplan h2{font-size:1.22rem;color:var(--ink)} .mplan-price{display:flex;align-items:baseline;gap:7px;margin-top:10px} .mplan-price b{font-family:"Inter Tight",sans-serif;font-size:2.2rem;font-weight:600; letter-spacing:-.03em;color:var(--ink)} .mplan-price span{font-size:13.6px;color:var(--ink-soft)} .mplan-disc{margin-top:6px;display:inline-block;align-self:flex-start;padding:5px 11px; border-radius:999px;background:#e8f4ea;color:#1c6b42;font:600 12.4px/1 "Inter",sans-serif} .mplan-inc{margin:18px 0 11px;font-size:13.4px;font-weight:600;color:var(--ink)} .mplan .pdp-list{margin-bottom:20px} .mplan .pdp-list li{font-size:14px} .mplan .btn{margin-top:auto;justify-content:center} .mnote{margin-top:clamp(30px,4vw,46px);background:#fff;border:1px solid var(--line); border-radius:20px;padding:clamp(22px,2.6vw,30px);max-width:82ch} .mnote h2{font-size:1.16rem;color:var(--ink);margin-bottom:14px} .mnote p{font-size:14.8px;line-height:1.72;color:var(--ink-soft)} .mnote a{color:var(--navy-700);border-bottom:1px solid rgba(18,80,127,.3)} / ---- current specials -------------------------------------------------- / .offers{display:grid;gap:14px;padding-top:clamp(34px,4vw,52px);max-width:92ch} .offer{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(18px,2.4vw,30px); align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px; padding:clamp(18px,2.2vw,24px); transition:transform var(--card-t) var(--ease),box-shadow var(--card-t),border-color var(--card-t)} .offer:hover{transform:translateY(var(--lift-sm));border-color:transparent; box-shadow:0 18px 40px rgba(8,36,63,.12)} .offer-v{display:grid;place-items:center;min-height:64px;padding:12px;border-radius:14px; background:linear-gradient(150deg,#12507f,#08243f);color:#fff;text-align:center; font:600 1.05rem/1.2 "Inter Tight","Inter",sans-serif;letter-spacing:-.02em} .offer-b h2{font-size:1.08rem;color:var(--ink);margin-bottom:6px} .offer-b p{font-size:14.6px;line-height:1.65;color:var(--ink-soft)} .offer-c{margin-top:7px;font-size:13px!important;color:var(--muted)!important} .offer-c a{color:var(--navy-700);border-bottom:1px solid rgba(18,80,127,.3)} / ---- sitemap ----------------------------------------------------------- / .smap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(24px,3vw,44px);padding-top:clamp(34px,4vw,52px)} .smap-g h2{font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--brand-deep);padding-bottom:12px;border-bottom:1px solid var(--line); margin-bottom:14px;display:flex;align-items:baseline;gap:8px} .smap-g h2 em{font-style:normal;font-size:11.6px;color:var(--muted);font-weight:500} .smap-g ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .smap-g a{font-size:14.2px;color:var(--ink-soft);transition:color .2s,padding-left .2s} .smap-g a:hover{color:var(--navy-700);padding-left:4px} @media (max-width:620px){ .offer{grid-template-columns:1fr;gap:14px} .offer-v{justify-self:start;min-height:0;padding:9px 16px} } / the amount picker now lives inside the message card: write it, price it, add it - without leaving the block or hunting for the panel further down / .handoff-copy .amount-panel{margin-top:34px;padding:clamp(22px,2.4vw,28px); background:#fff;border:1px solid var(--line);border-radius:var(--radius); box-shadow:0 20px 48px rgba(8,36,63,.08);max-width:none} .handoff-copy .amount-kicker{display:block;margin-bottom:12px} .handoff-copy .amount-panel .btn{margin-top:18px;width:100%;justify-content:center} .handoff-copy .amount-note{margin-top:12px;font-size:12.4px;line-height:1.55;color:var(--muted)} / ============================================================ JOURNAL ============================================================ / .post-lead{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3vw,44px); align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px; overflow:hidden;color:inherit; transition:transform var(--card-t) var(--ease),box-shadow var(--card-t),border-color var(--card-t)} .post-lead:hover{transform:translateY(var(--lift));border-color:transparent; box-shadow:0 28px 64px rgba(8,36,63,.16)} .post-lead-shot{display:block;aspect-ratio:16/11;background:#e9eff7} .post-lead-shot img{width:100%;height:100%;object-fit:cover;display:block} .post-lead-body{display:block;padding:clamp(22px,3vw,40px) clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0} .post-lead-body h2{font-size:clamp(1.5rem,2.6vw,2.15rem);color:var(--ink);margin:10px 0 12px} .post-lead-body p{font-size:15.4px;line-height:1.7;color:var(--ink-soft)} .post-meta{display:block;font-size:11.5px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--brand-deep)} .post-more{display:inline-flex;align-items:center;gap:7px;margin-top:18px; font-size:14px;font-weight:500;color:var(--navy-700)} .post-more .arrow{width:13px;height:13px} .post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:clamp(16px,2vw,24px);margin-top:clamp(20px,2.4vw,30px)} .post-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden; transition:transform var(--card-t) var(--ease),box-shadow var(--card-t),border-color var(--card-t)} .post-card:hover{transform:translateY(var(--lift));border-color:transparent; box-shadow:var(--card-shadow-hover)} .post-card>a{display:block;color:inherit} .post-shot{display:block;aspect-ratio:16/10;background:#e9eff7;overflow:hidden} .post-shot img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s var(--ease)} .post-card:hover .post-shot img{transform:scale(1.045)} .post-card .post-meta{margin:clamp(18px,2vw,22px) clamp(18px,2vw,22px) 0} .post-card h3{font-size:1.12rem;color:var(--ink);margin:8px clamp(18px,2vw,22px) 0; line-height:1.3} .post-card p{font-size:14.2px;line-height:1.62;color:var(--ink-soft); margin:9px clamp(18px,2vw,22px) clamp(20px,2.2vw,24px)} .post-foot{margin-top:clamp(26px,3vw,40px);font-size:14.4px;line-height:1.7; color:var(--ink-soft);max-width:70ch} .post-foot a{color:var(--navy-700);border-bottom:1px solid rgba(18,80,127,.3)} / a post's own page / .post-figure{padding-top:clamp(22px,2.6vw,34px)} .post-figure img{width:100%;height:auto;display:block;border-radius:22px; aspect-ratio:21/9;object-fit:cover;border:1px solid var(--line)} .post-doc .post-list{margin:0 0 16px;padding-left:22px;color:var(--ink-soft); line-height:1.78;font-size:15.4px} .post-doc .post-list li{margin-bottom:9px;padding-left:4px} .post-doc .post-list li::marker{color:var(--blue-400)} .post-doc .post-list-num li::marker{color:var(--brand-deep);font-weight:600} .post-note{background:var(--paper);border-left:3px solid var(--blue-400); padding:14px 18px;border-radius:0 11px 11px 0;font-size:14.2px!important; line-height:1.65!important} @media (max-width:820px){ .post-lead{grid-template-columns:1fr} .post-lead-body{padding:0 clamp(20px,4vw,28px) clamp(24px,4vw,32px)} .post-figure img{aspect-ratio:16/9} } / ---- the standing affiliate tab, against the right edge ---------------- Vertical rather than a corner button: it holds its own edge and never crosses the content. ---------------------------------------------------------------------- / .afloat{position:fixed;right:0;top:50%;translate:0 -50%;z-index:79; display:flex;flex-direction:column;align-items:center;gap:6px; animation:afloatIn .5s var(--ease) .8s both} @keyframes afloatIn{from{opacity:0;translate:14px -50%}to{opacity:1;translate:0 -50%}} .afloat.is-gone{opacity:0;translate:12px -50%;transition:opacity .28s,translate .28s} .afloat-btn{display:flex;flex-direction:column;align-items:center;gap:11px; padding:20px 11px;border-radius:14px 0 0 14px;color:#f2fbf6; / a considered green - it has to sit beside navy without shouting / background:linear-gradient(200deg,#177a5a 0%,#0f5c45 62%,#0b4735 100%); box-shadow:-8px 12px 30px rgba(9,60,45,.34),inset 1px 0 0 rgba(255,255,255,.14); transition:padding-right .35s var(--ease),filter .35s,box-shadow .35s} .afloat-btn:hover{padding-right:17px;filter:brightness(1.08); box-shadow:-10px 16px 38px rgba(9,60,45,.44),inset 1px 0 0 rgba(255,255,255,.2)} .afloat-btn:focus-visible{outline:2px solid #7fe3bd;outline-offset:-3px} .afloat-btn svg{width:21px;height:21px;flex:none;fill:none;stroke:#9fe8c9;stroke-width:1.7; stroke-linecap:round} / the label runs down the tab rather than wrapping to one letter per line / .afloat-label{writing-mode:vertical-rl;text-orientation:mixed; font:600 13.4px/1 "Inter",sans-serif;letter-spacing:.04em;white-space:nowrap} .afloat-x{width:22px;height:22px;border:0;border-radius:50%;cursor:pointer;padding:0; background:rgba(11,71,53,.55);color:#cfeadd;font-size:14px;line-height:22px; opacity:0;transition:opacity .25s,background .2s} .afloat:hover .afloat-x,.afloat-x:focus-visible{opacity:1} .afloat-x:hover{background:#0b4735;color:#fff} / On a phone the tab sat on top of the page's own right edge - it covered the end of the reviews heading and the Google count beside it. The green Earn With Us pill is already in the top bar at that width, so the tab steps aside. / @media (max-width:620px){ .afloat{display:none} } @media (prefers-reduced-motion:reduce){ .afloat{animation:none} } / ============================================================ A LIGHT PAGE HEAD, AND THE NAV THAT GOES WITH IT Every head until now sat on navy, so the knocked-out nav had something dark under it. This one is a pale interior photograph, so both the head and the bar it carries need an ink version. ============================================================ / .phead-airy{position:relative;overflow:hidden;color:var(--ink); / the flat ground is the photograph's own wall colour, so where the picture stops the head simply carries on / background:#e7f1f9; min-height:clamp(430px,40vw,560px)} / The picture is a panel in its own right: it takes the full height of the head and exactly the width its own proportions ask for, so it fills that panel edge to edge with nothing cropped and no bands above or below. `contain` on a full-width box left gaps once the head was narrower than the picture. / .airy-bg{position:absolute;inset:0; background:var(--head-img) center/cover no-repeat} / The photograph is full bleed, so the wash only has to firm up the band the copy sits on. It clears by 62% - past the last line of the lede - which lets the picture read right across the head instead of starting partway in. / .phead-airy::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(94deg,rgba(231,241,249,.96) 0%,rgba(231,241,249,.86) 22%, rgba(231,241,249,.45) 38%,rgba(231,241,249,.1) 52%,transparent 62%)} / Some of the head artwork arrives with its own dark panel already built into the left of the picture, sized for the copy. Washing that in pale blue only greys the photograph out - and on the contact room it still left the headline at 3.6:1. These heads take the picture as it is and turn the type white instead. / .phead-airy.head-dark{background:#0a2c4c} .phead-airy.head-dark::after{content:none} .phead-airy.head-dark .eyebrow{color:var(--blue-300)} .phead-airy.head-dark h1{color:#fff} .phead-airy.head-dark>.wrap>p{color:rgba(226,240,252,.88)} / the points below the lede are part of the head, so they turn with it - left on the light palette they were near-black type on a navy panel / .phead-airy.head-dark .airy-points b, .phead-airy.head-dark .airy-points strong{color:#fff} .phead-airy.head-dark .airy-points small, .phead-airy.head-dark .airy-points span{color:rgba(206,226,245,.82)} .phead-airy.head-dark .ap-ico{background:rgba(255,255,255,.12);color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)} .airy-in{position:relative;z-index:2} .phead-airy .eyebrow{color:var(--brand-deep)} .phead-airy h1{color:var(--ink)} .phead-airy>.wrap>p{color:var(--ink-soft);max-width:40ch} .airy-points{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,44px); margin:clamp(28px,3.4vw,44px) 0 0;padding:0} .airy-points li{display:grid;justify-items:start;gap:10px} .ap-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px; background:#dbeaf6;color:var(--navy-700)} .ap-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .airy-points span:last-child{font-size:13.4px;line-height:1.4;color:var(--ink-soft)} / ---- the ink nav ---- / / This used to hang off a `nav-light` class on , set by hand per page - and the two came apart. FAQ and Contact kept the class after their heads were switched to .head-dark, which left near-black nav links (1.25:1), the ink lockup and a black burger on a #0a2c4c panel: the whole bar vanished. The condition is asked of the page itself now. A light bar is worn only while a genuinely light head is present, so the head and the nav on top of it cannot drift apart again. Browsers without :has() fall through to the knocked-out bar, which is correct for every head this site currently ships - all of them are dark. / / scoped to the bar: unscoped, the brand-logo rule below also hid the footer's lockup, which sits on navy and still wants the light one / .nav .brand-logo-ink{display:none} body:has(.phead-airy:not(.head-dark)) .nav .brand-logo{display:none} body:has(.phead-airy:not(.head-dark)) .nav .brand-logo-ink{display:block} body:has(.phead-airy:not(.head-dark)) .nav .nav-links a{color:var(--ink)} body:has(.phead-airy:not(.head-dark)) .nav .nav-links a::after{background:var(--navy-700)} body:has(.phead-airy:not(.head-dark)) .nav .nav-links a:hover{color:var(--navy-800)} body:has(.phead-airy:not(.head-dark)) .nav .btn-shop{background:#fff;color:var(--navy-900); box-shadow:0 6px 18px rgba(8,36,63,.14),0 0 0 1px rgba(8,36,63,.07)} body:has(.phead-airy:not(.head-dark)) .nav .btn-shop:hover{box-shadow:0 10px 26px rgba(8,36,63,.2),0 0 0 1px rgba(8,36,63,.1)} / the ghost button has nothing to knock out of on a pale ground, so it fills / body:has(.phead-airy:not(.head-dark)) .nav .btn-ghost{color:#fff;background:linear-gradient(150deg,#2b86c9,#1d6fae); box-shadow:0 8px 22px rgba(29,111,174,.32);backdrop-filter:none} body:has(.phead-airy:not(.head-dark)) .nav .btn-ghost:hover{box-shadow:0 12px 30px rgba(29,111,174,.44)} / The burger turns ink ONLY on a light head. It used to also turn ink on `body.page-products .nav:not(.scrolled)` - and every inner page on the site is .page-products sitting on a dark head, so that rule painted the burger #0a1730 on navy at 1.13-2.10:1 on all 92 of them. On a phone the burger is the only way into How it works, About, FAQ, Contact and the Journal, so that was the entire menu, invisible, everywhere but the homepage. / body:has(.phead-airy:not(.head-dark)) .burger span{background:var(--ink)} / once scrolled it becomes a white bar rather than a navy one / body:has(.phead-airy:not(.head-dark)) .nav.scrolled{background:rgba(255,255,255,.86); border-bottom-color:rgba(8,36,63,.08); box-shadow:0 10px 30px rgba(8,36,63,.08)} @media (max-width:900px){ / stacked: the copy is at the top, so the wash is vertical and thins out downwards rather than flattening the whole picture / .phead-airy::after{background:linear-gradient(180deg,rgba(232,243,250,.95) 0%, rgba(232,243,250,.88) 38%,rgba(234,244,251,.5) 62%,rgba(234,244,251,.22) 100%)} .airy-points{gap:18px 26px} } / ============================================================ HOMEPAGE HERO One piece of artwork carries the composition; every word on it is real HTML. --u is one pixel of the 1671x941 artwork, so type and spacing scale locked to the picture, and the blocks are positioned as percentages of the stage - which means they land on the same spot at every width, with no cropping and no drift, because the stage keeps the artwork's aspect. ============================================================ / / The copy on the plate is white. That does not ask the photograph to be dark: the scrim on .hero2-bgwrap::after, a few rules down, is what makes the left of the frame safe to write on, and it is what lets the home plate be the Aventura reception - a bright, white room - without a colour changing here. / .hero2{position:relative;background:#07243d} .hero2-stage{position:relative;--u:0.05984vw} .hero2-stage{height:100svh;min-height:min(620px,100vw/1.776);max-height:calc(100vw/1.776)} .hero2-bgwrap{position:absolute;inset:0;line-height:0} .hero2-bg{width:100%;height:100%;display:block; object-fit:cover;object-position:center} / The artwork used to be a rendering with an empty navy left half built into it. These are photographs of the clinic, and a real room does not come with somewhere convenient to put the words - so the dark half is laid on here instead. It fades out well before the right, where the subject stands, and one gradient serves all five pictures as the strip swaps them. / .hero2-bgwrap::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,rgba(4,22,38,.94) 0%,rgba(4,22,38,.86) 30%, rgba(4,22,38,.62) 46%,rgba(4,22,38,.26) 64%,rgba(4,22,38,.06) 82%,rgba(4,22,38,0) 100%)} / ---- the copy, at the artwork's own left margin ---- / / top is a share of the stage, but the nav above it is a fixed ~104px - so as the window narrowed the kicker crept up under the logo: 38px clear at 1440, 10px at 1024. The floor keeps it clear of the bar at every desktop width, and a small laptop gets a little more stage so the copy, now lower, still clears the category strip along the bottom. / .hero2-copy{position:absolute;z-index:3;left:4.25%;top:max(17.1%,calc(var(--topbar-h) + 98px));width:38.5%} @media (min-width:1001px) and (max-width:1180px){ .hero2-stage{min-height:640px} } / #38afe4 measured 4.37:1 on the hormone-optimization slide - the copy band there is a lit window. Lightened until the worst of the six clears 4.5. / .hero2-kicker{display:block;font-weight:700;color:#5ec0ea; font-size:calc(var(--u)14);letter-spacing:.3em;text-transform:uppercase} .hero2 h1{font-family:"Playfair Display",Georgia,serif;font-weight:600; font-size:calc(var(--u)76);line-height:.96;letter-spacing:-.035em; color:#fff;margin-top:calc(var(--u)26)} .hero2 h1 em{font-style:italic;font-weight:500;color:#4fb0e5;white-space:nowrap; letter-spacing:-.07em} .hero2-lede{margin-top:calc(var(--u)24);max-width:calc(var(--u)548); font-size:calc(var(--u)19);line-height:1.65;color:rgba(226,240,252,.88)} .hero2-cta{display:flex;flex-wrap:wrap;gap:calc(var(--u)26); margin-top:calc(var(--u)22)} .hero2-cta .btn{height:calc(var(--u)52);padding:0 calc(var(--u)30); justify-content:center;font-size:calc(var(--u)16.5);font-weight:600; gap:calc(var(--u)12)} .hero2-cta .btn-navy{min-width:calc(var(--u)277); background:#fff;color:#0a2f52; box-shadow:0 calc(var(--u)14) calc(var(--u)35) rgba(0,20,40,.35)} .hero2-cta .btn-navy:hover{background:#eaf6ff} /* Explore Services carries its own ground. It was transparent with a 62% white hairline, so its weight was whatever photograph happened to be behind it - and the strip swaps that photograph five ways. On the bright slides the outline fell to 3.4:1 and the button read as absent. The scrim here is part of the button, so it looks the same on every slide: the label clears 11:1 against its own face on the brightest one, and the rule reads 5.9:1 against the picture outside it. The hover is a single rule on purpose. There used to be two, and the second won: it painted the face #f7fdff and left the label #fff - white type on near-white, 1.03:1. Pointing at the button erased its name. It inverts to a solid white pill with navy type now, which is the same move the primary makes and cannot collide with its own label. / .hero2-cta .btn-outline{min-width:calc(var(--u)221);color:#fff; background:rgba(6,28,50,.55);backdrop-filter:blur(calc(var(--u)6)); box-shadow:inset 0 0 0 calc(var(--u)2) #fff} .hero2-cta .btn-outline:hover{background:#fff;color:#0a2f52; box-shadow:inset 0 0 0 calc(var(--u)2) #fff,0 calc(var(--u)14) calc(var(--u)35) rgba(0,20,40,.35)} .hero2-cta .arrow{width:calc(var(--u)17);height:calc(var(--u)17)} / the light-panel outline button - Start over, Book this drip. At .28 its rule was 1.74:1 on the page ground, under the 3:1 a control's own edge has to hold, so the button read as a bare word. .52 puts it at 3.1:1 and the pill is a pill again. / .btn-outline{background:none;color:var(--navy-800); box-shadow:inset 0 0 0 1.5px rgba(13,47,79,.52)} .btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--navy-700); background:rgba(13,47,79,.04)} .hero2-points{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(var(--u)18);margin:calc(var(--u)47) 0 0;padding:0; max-width:calc(var(--u)552)} .hero2-points li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto; column-gap:calc(var(--u)13);align-items:center;min-width:0} .h2-ico{grid-row:1/3;display:grid;place-items:center;flex:none; width:calc(var(--u)50);height:calc(var(--u)50); border-radius:50%;background:rgba(255,255,255,.1);color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)} .h2-ico svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .hero2-points b{font-family:"Inter",sans-serif;font-weight:600;color:#fff; font-size:calc(var(--u)15);line-height:1.28;align-self:end} /* .72 measured 4.31:1 on the home slide; these are 11px uppercase captions, the type that can least afford to be faint. .86 clears every slide. / .hero2-points small{font-size:calc(var(--u)10.5);line-height:1.45;letter-spacing:.1em; text-transform:uppercase;color:rgba(206,225,243,.86);align-self:start;margin-top:calc(var(--u)5)} .hero2-tag{display:flex;align-items:center; margin-top:calc(var(--u)60);padding-left:calc(var(--u)17);font-size:calc(var(--u)11.5); letter-spacing:.22em;text-transform:uppercase;color:rgba(197,219,240,.72)} /* The two lines of handwriting - "A Healthier Brighter You" across the glass and "Wellness for What's Next" at the end of the strip - are gone at Rishi's request. They were the only Dancing Script on the site, so index.html no longer asks Google Fonts for it. / / ---- the service band sits on the navy wave already in the artwork ---- / / The old artwork had a navy wave painted across its foot and the categories sat on that. This one runs the photograph to the bottom edge, so the strip carries its own scrim - without it the right-hand half of the list falls onto the lit cabinet and stops being readable. / / The strip is the main control on the homepage, not a caption: on a phone it is how someone finds out what we do without visiting a single other page. So the categories are pills - a shape people already read as "tap me" - set larger than the old 12-unit lettering, with the live one filled rather than underlined. The scrim grew with them. / .hero2-bar{position:absolute;z-index:3;left:0;right:0;bottom:0;height:14.6%; display:flex;align-items:center; padding:0 3% 0 8.97%; background:linear-gradient(to top,rgba(4,20,37,.96),rgba(4,20,37,.84) 62%,rgba(4,20,37,0))} .hero2-bar ul{list-style:none;display:flex;flex-wrap:nowrap;margin:0;padding:0;min-width:0; gap:calc(var(--u)10)} /* flex:none matters. As flex items these shrink by default, and a button will squeeze below its own text, so on a phone the six of them collapsed to their padding - 12px each, no words. They hold their width and wrap instead. / .hero2-bar li{white-space:nowrap;flex:none} / the label and the control are the same object - the bar keeps its letter-spaced, uppercase look and gains a hit area, a focus ring and a pressed state / .hero2-cat{appearance:none;border:0;cursor:pointer;font:inherit; text-transform:uppercase;color:rgba(228,241,253,.94);text-decoration:none; font-size:calc(var(--u)14);font-weight:600;letter-spacing:.14em;line-height:1; padding:calc(var(--u)14) calc(var(--u)20);position:relative;display:block; border-radius:999px;background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(159,203,232,.34); transition:color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)} .hero2-cat:hover{color:#fff;background:rgba(159,203,232,.2); box-shadow:inset 0 0 0 1px rgba(159,203,232,.7)} .hero2-cat.is-on{color:#06243f;background:#9fcbe8;box-shadow:none} .hero2-cat:focus-visible{outline:2px solid var(--blue-400);outline-offset:3px} .hero2-cat[data-hero=""]{cursor:default} /* the plate crossfades rather than cutting / .hero2-bg{transition:opacity .45s var(--ease)} .hero2-bgwrap.is-swapping .hero2-bg{opacity:0} / the words cross with the picture, a touch faster so they land first / .hero2-copy h1,.hero2-lede{transition:opacity .35s var(--ease)} .hero2-copy.is-swapping h1,.hero2-copy.is-swapping .hero2-lede{opacity:0} @media (prefers-reduced-motion:reduce){ .hero2-bg,.hero2-cat,.hero2-cat::after, .hero2-copy h1,.hero2-lede{transition-duration:.01ms} } / ---- narrow: the artwork becomes a banner and the copy flows beneath it, because type locked to the artwork is unreadable once the picture is small. --u is zeroed here and every size is restated in px. ---- / @media (max-width:1000px){ .hero2{background:linear-gradient(160deg,#0a2c49,#07243d 62%,#061d33)} .hero2-stage{--u:0px;height:auto;min-height:min(94svh,780px);max-height:none; display:flex;flex-direction:column;justify-content:flex-end;position:relative} / The words used to sit above the picture and the picture below them, which read as three stacked blocks rather than one hero - a slab of navy, then a band of photograph, then the strip. The copy sits ON the picture here now, the way it does on a desktop, so a phone gets the same thing a laptop does. The photograph fills the stage behind everything. / .hero2-bgwrap{position:absolute;inset:0;order:0;overflow:hidden} .hero2-bg{width:100%;height:100%;object-fit:cover;object-position:72% center} / The desktop scrim darkens the LEFT, because that is the half the headline sits in. On a phone the headline runs the full width, so the shade has to come down from the top instead - heavier where the type is, opening up at the foot so the picture is still a picture. / .hero2-bgwrap::after{background:linear-gradient(180deg, rgba(4,22,38,.93) 0%,rgba(4,22,38,.88) 34%,rgba(4,22,38,.72) 58%, rgba(4,22,38,.55) 78%,rgba(4,22,38,.62) 100%)} .hero2-copy,.hero2-bar{position:relative;z-index:3;left:auto;right:auto;top:auto; bottom:auto;width:auto;height:auto} .hero2-copy{order:1;max-width:760px; padding:clamp(96px,14vw,150px) clamp(20px,4vw,56px) clamp(22px,3.4vw,34px)} .hero2-kicker{font-size:12.5px;letter-spacing:.26em} .hero2 h1{font-size:clamp(2.3rem,7.2vw,3.5rem);margin-top:16px;letter-spacing:-.03em} .hero2 h1 em{letter-spacing:-.04em} .hero2-lede{font-size:clamp(15px,1.9vw,17.5px);line-height:1.6; margin-top:18px;max-width:62ch} .hero2-cta{gap:14px;margin-top:26px} .hero2-cta .btn{min-width:0;flex:1 1 auto;height:50px;padding:0 28px; font-size:15.5px;gap:9px} / --u is 0 here, so the desktop blur and rule collapse to nothing and have to be restated in px - otherwise the phone gets an unbordered dark pill / .hero2-cta .btn-outline{backdrop-filter:blur(6px); box-shadow:inset 0 0 0 2px #fff} .hero2-cta .btn-outline:hover{box-shadow:inset 0 0 0 2px #fff,0 12px 30px rgba(0,20,40,.35)} .hero2-cta .btn-navy{box-shadow:0 12px 30px rgba(0,45,78,.18)} .hero2-cta .arrow{width:15px;height:15px} .hero2-points{gap:18px;margin-top:30px;max-width:none} .hero2-points li{column-gap:12px} .h2-ico{width:46px;height:46px} .hero2-points b{font-size:14px} .hero2-points small{font-size:10.4px;margin-top:4px} .hero2-tag{font-size:11px;margin-top:26px;padding-left:0} .hero2-bar{order:3;flex-wrap:wrap;row-gap:10px; padding:clamp(16px,3vw,24px) clamp(20px,4vw,56px); background:linear-gradient(100deg,#073354,#0a3151 56%,#072b49)} / The bar wraps, but the list inside it did not: every category stayed on one nowrap line, 791px of it at a 390px viewport. That is the horizontal scroll that let you drag the page sideways and find the bare blue panel behind the hero. Both levels wrap now, and `max-width:100%` stops the ul from reporting a width the bar cannot hold. / .hero2-bar ul{flex-wrap:wrap;row-gap:9px;gap:9px;max-width:100%} / --u is 0 in this layout, so calc(var(--u)n) collapses to nothing - the control carries its own size here or the labels vanish / .hero2-bar li{padding:0;max-width:100%} .hero2-cat{font-size:12.5px;letter-spacing:.1em;padding:10px 15px; white-space:normal} } @media (max-width:620px){ .hero2-points{grid-template-columns:1fr;gap:14px} .hero2-cta .btn{flex:1 1 100%} .hero2-cat{font-size:12px;letter-spacing:.08em;padding:10px 13px} } /* ============================================================ START TREATMENT + FLORIDA GATE Karpa Health owns the intake and the payment, so a product page sells and then hands over - there is no quantity, no cart and no total, because each treatment needs its own physician approval and cannot be batched. ============================================================ / / What the product is, and what it does, sits above the button - the decision to start a course of medication should be made from the explanation, not from a name and a price. The only figure shown is the "starting from" price, and it always carries "for a minimum of 3 months" with it: the Karpa program is billed for the full term, and a monthly number on its own reads as cheaper than the thing actually costs. / .pdp-about{margin:26px 0 4px} .pdp-about h2{font-size:19px;letter-spacing:-.02em;color:var(--navy-800)} .pdp-about h3{margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--navy-700);opacity:.75} .pdp-about p{margin-top:9px;font-size:15px;line-height:1.65;color:var(--ink,#26333f)} .pdp-helps{margin-top:10px;display:grid;gap:8px;list-style:none;padding:0} .pdp-helps li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.6} .pdp-helps li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px; border-radius:50%;background:var(--pb-500,#46b5df)} .pdp-held{color:var(--muted)} .pdp-start{width:100%;justify-content:center;padding:14px 28px;font-size:15.5px} .pdp-handoff{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--muted)} / .pdp-book is declared once, further up. Only the hover lived here. / .pdp-book:hover{color:var(--navy-800)} / The card offers one route now: read about it. Start Treatment used to sit here too, which asked someone to begin a prescription from a tile that gave them a name and a price and nothing else. It lives on the product page, on the other side of the explanation - Tell me more, then decide. / .pcard-cta{display:flex;gap:8px;padding:0 14px 14px} .pcard-cta .pc-more{flex:1;display:inline-flex;align-items:center; justify-content:center;gap:6px;border-radius:999px;font-size:13.5px;font-weight:600; padding:12px 12px;white-space:nowrap;transition:background .25s,box-shadow .25s,color .25s; color:var(--navy-800);box-shadow:inset 0 0 0 1.4px rgba(13,47,79,.24)} .pcard-cta .pc-more:hover{box-shadow:inset 0 0 0 1.4px var(--navy-700);background:rgba(13,47,79,.04)} / ---- the gate ---- / .flgate{border-radius:var(--radius);background:#fff; box-shadow:0 1px 0 var(--line),0 18px 50px rgba(8,36,63,.07); border:1px solid var(--line);padding:clamp(24px,3.4vw,40px); max-width:640px;margin-inline:auto;text-align:center} .flgate-ico{width:52px;height:52px;margin:0 auto 18px;border-radius:50%; display:grid;place-items:center;background:var(--ice);color:var(--navy-700)} .flgate-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .flgate h2{font-size:clamp(1.35rem,2.2vw,1.75rem);color:var(--navy-900)} .flgate p{margin-top:12px;font-size:15px;line-height:1.65;color:var(--ink-soft)} .flgate-form{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap} .flgate-form input{width:170px;padding:14px 18px;border-radius:999px;font:inherit; font-size:15px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink); text-align:center;letter-spacing:.08em} .flgate-form input:focus{outline:none;border-color:var(--brand);background:#fff} .flgate-form .btn{padding:14px 26px;font-size:15px} .flgate-err{margin-top:14px;font-size:13.5px;line-height:1.5;color:#b4442f} .flgate-fine{margin-top:20px;font-size:12px;line-height:1.6;color:var(--muted)} / the shop's unlock panel spans the grid rather than sitting in a card slot / .flgate-shop{margin-top:clamp(20px,2.6vw,32px)} / ============================================================ MATCH MY DRIP A questionnaire, so the radios are the interface: the real input is hidden and the label is the target, which keeps the hit area large and the keyboard behavior native. ============================================================ / .mmd{max-width:880px} .mmd-form{display:grid;gap:clamp(22px,3vw,34px)} .mmd-q{border:0;padding:0;margin:0;min-width:0} .mmd-q legend{display:flex;align-items:center;gap:12px;padding:0;margin-bottom:14px; font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-.02em; font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--navy-900)} .mmd-q legend b{flex:none;display:grid;place-items:center;width:28px;height:28px; border-radius:50%;background:var(--ice);color:var(--navy-700); font-size:13px;font-weight:700} .mmd-opts{display:grid;gap:9px} .mmd-opt{position:relative;display:block;cursor:pointer} .mmd-opt input{position:absolute;opacity:0;width:0;height:0} .mmd-opt span{display:block;padding:14px 18px;border-radius:12px;background:#fff; border:1.5px solid var(--line);font-size:15px;line-height:1.45;color:var(--ink); transition:border-color .2s,background .2s,box-shadow .2s} .mmd-opt:hover span{border-color:#c3d4e6} .mmd-opt input:checked + span{border-color:var(--navy-700);background:#f4f9fd; box-shadow:inset 0 0 0 1px var(--navy-700)} .mmd-opt input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px} .mmd-actions{display:flex;gap:12px;flex-wrap:wrap} .mmd-err{font-size:13.5px;color:#b4442f} .mmd-result{margin-top:clamp(34px,4.5vw,58px);padding-top:clamp(30px,4vw,44px); border-top:1px solid var(--line)} .mmd-result h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-top:10px;color:var(--navy-900)} .mmd-top-note{margin-top:12px;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.6; color:var(--ink-soft);max-width:56ch} .mmd-top-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} .mmd-pairs,.mmd-alts{margin-top:clamp(28px,3.6vw,42px)} .mmd-pairs h3,.mmd-alts h3{font-family:"Inter Tight",sans-serif;font-weight:600; letter-spacing:-.02em;font-size:1.15rem;color:var(--navy-900)} .mmd-pairs-lede{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)} .mmd-addons,.mmd-altlist{list-style:none;margin:16px 0 0;padding:0;display:grid; gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .mmd-addons a,.mmd-altlist a{display:grid;grid-template-columns:1fr auto;align-items:center; gap:10px;padding:16px 18px;border-radius:12px;background:#fff;border:1px solid var(--line); transition:border-color .25s,transform .25s var(--ease),box-shadow .25s} .mmd-addons a:hover,.mmd-altlist a:hover{border-color:#c3d4e6;transform:translateY(-2px); box-shadow:0 10px 26px rgba(8,36,63,.07)} .mmd-addons b,.mmd-altlist b{grid-column:1;font-size:15px;color:var(--navy-900)} .mmd-addons small,.mmd-altlist small{grid-column:1;font-size:12.8px;line-height:1.45; color:var(--ink-soft);margin-top:3px} .mmd-addons .arrow,.mmd-altlist .arrow{grid-column:2;grid-row:1/3;width:14px;height:14px; opacity:.45;color:var(--navy-700)} .mmd-shots{margin-top:16px;padding:16px 18px;border-radius:12px;background:var(--paper); font-size:14px;line-height:1.6;color:var(--ink-soft)} .mmd-shots b{color:var(--navy-900)} .mmd-fine{margin-top:clamp(26px,3.4vw,40px);font-size:12.2px;line-height:1.65; color:var(--muted);max-width:74ch} / the entry point, sat at the head of the IV therapy list / .mmd-entry{grid-column:1/-1;display:flex;align-items:center;gap:clamp(14px,2vw,26px); flex-wrap:wrap;padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,32px);border-radius:var(--radius); background:linear-gradient(110deg,#0d2f4f,#12507f 62%,#1d6fae);color:#fff} .mmd-entry-t{flex:1 1 300px;min-width:0} .mmd-entry-t b{display:block;font-family:"Inter Tight",sans-serif;font-weight:600; letter-spacing:-.02em;font-size:clamp(1.1rem,1.7vw,1.4rem)} .mmd-entry-t span{display:block;margin-top:7px;font-size:14.5px;line-height:1.55; color:rgba(224,240,252,.86)} @media (max-width:620px){ .mmd-entry .btn{width:100%;justify-content:center} } / ---- affiliate steps, responsive ------------------------------------------ These sit at the end because the RESPONSIVE block above used to flatten .steps to a single column with no gap, and a component rule further up the file cannot win against it. / @media (max-width:1080px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:620px){.steps{grid-template-columns:1fr;gap:12px}} / ============================================================ TWO-ROW HEADER CLEARANCE (phones) The bar carries Shop Now and In-Clinic Services on their own row below 620px, so it is about 50px deeper than it was. Every first block on a page sets its own top padding from a clamp() rather than from the bar's height, so each of them needs the extra row here. This block sits at the end of the file deliberately: the rules it overrides are declared after the responsive section, and a media query does not beat source order. ============================================================ / @media (max-width:620px){ .hero2-copy{padding-top:clamp(146px,22vw,178px)} .phead{padding-top:calc(clamp(140px,21vw,172px) + var(--topbar-h))} .hero-grid{padding-top:calc(176px + var(--topbar-h))} } / ============================================================ AFFILIATES - tightened "Too much space everywhere. Wording is too small. Tighten it up. There's too much blank area, we don't need that. Get to the point." So: the bands are shorter, the gaps between columns are smaller, and every run of body copy is a point or so larger. Scoped to the page rather than changed in .pad, which 80 other pages are laid out on. ============================================================ / .page-affiliates section.pad{padding-block:clamp(26px,2.4vw,38px)} .page-affiliates .phead{padding-bottom:clamp(30px,3.2vw,42px)} .page-affiliates .aff-grid{gap:clamp(28px,3.2vw,52px)} .page-affiliates .aff-copy>p{font-size:17px;line-height:1.62;margin-top:14px;max-width:60ch} .page-affiliates .aff-copy h2{margin-top:12px} .page-affiliates .aff-pillars{margin-top:20px;gap:14px 26px} .page-affiliates .aff-pillars b{font-size:16px} .page-affiliates .aff-pillars span{font-size:14.4px} .page-affiliates .aff-copy .btn{margin-top:22px} .page-affiliates .aff-copy .aff-small{font-size:14.6px;line-height:1.6;margin-top:12px;max-width:62ch} .page-affiliates .aff-note-inline{font-size:14px;margin-top:10px} .page-affiliates .aff-tiers{padding:clamp(22px,2.6vw,32px)} .page-affiliates .aff-ladder li{padding:14px 0} .page-affiliates .aff-ladder li span{font-size:15.4px} .page-affiliates .aff-apply{padding-bottom:clamp(30px,3.4vw,46px)} .page-affiliates .aff-apply-grid{gap:clamp(24px,3vw,46px)} .page-affiliates .aff-apply-grid>div:first-child p{font-size:16.6px;line-height:1.6} .page-affiliates .aff-apply h2{margin-bottom:12px} .page-affiliates .aff-check{margin:18px 0 14px;gap:9px} .page-affiliates .aff-check li{font-size:15.6px} .page-affiliates .aff-maths-inner{gap:clamp(24px,3vw,48px)} .page-affiliates .aff-maths-inner p{font-size:16.6px;line-height:1.6;margin-top:12px;max-width:58ch} .page-affiliates .aff-sum{padding:clamp(20px,2.4vw,28px)} .page-affiliates .aff-sum-total span{font-size:15.4px} .page-affiliates .aff-terms-block .facts{margin-top:clamp(20px,2.2vw,28px)} .page-affiliates .aff-terms-block .gift-actions{margin-top:clamp(22px,2.4vw,30px)} .page-affiliates .steps{margin-top:clamp(20px,2.4vw,30px)} .page-affiliates .step p{font-size:15.6px;line-height:1.6} .page-affiliates .facts dd{font-size:15.6px;line-height:1.6} / Doug's Priority 2: the named human route, in the footer of every page so it is never more than one scroll away - and it dials, it does not open a form. / .foot-spec{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px; / This asked for var(--pb-500) with #46b5df behind it as the fallback - but --pb-500 is defined (#1d6fae), so the fallback never ran and the pill has been shipping two steps darker than it was drawn for. Dark ink on it read 3.09:1, under AA, while the hover state sat at 8.74:1 - the button was legible only while you were pointing at it. The fallback colour is the one that was meant: 7.02:1 at rest. / padding:10px 18px;border-radius:999px;background:#46b5df;color:#062133; font-size:13.5px;font-weight:600;letter-spacing:.01em;transition:background .25s} .foot-spec:hover{background:#6fc8ea;color:#062133} @media (max-width:620px){ .foot-spec{width:100%;justify-content:center;padding:13px 18px;font-size:14.5px} } / Partner With Us, section 2 of the brief. Deliberately plain: the partnership terms are not settled, so the page invites a conversation rather than publishing rates nobody has agreed. / / Partner With Us and How It Works are two sections sharing one .rv wrapper, so nothing separated them: the Speak With a Specialist button sat 4px above the HOW IT WORKS kicker and the two blocks read as one confused block. / .partner-block{border-top:1px solid var(--line); margin-bottom:clamp(56px,6vw,88px)} .partner-lede{margin-top:12px;max-width:62ch;font-size:16px;line-height:1.7;color:var(--ink-soft,#4a6480)} .partner-list{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .partner-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.5} .partner-list li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px; border-radius:50%;background:var(--pb-500,#46b5df)} / ============================================================ EARN WITH US - the tier cards Same material as the gift card: navy gradient, gold rule, a number set large enough to be the whole message. Each card turns over rather than carrying a paragraph on its face, so the front stays one figure and one line. ============================================================ / .aff-cards{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.6vw,20px); grid-template-columns:repeat(2,minmax(0,1fr))} .aff-card{perspective:1100px;min-height:clamp(210px,20vw,250px);outline:none} .aff-card-in{position:relative;height:100%;transform-style:preserve-3d; transition:transform .72s var(--ease)} .aff-card:hover .aff-card-in, .aff-card:focus-visible .aff-card-in, .aff-card.is-flipped .aff-card-in{transform:rotateY(180deg)} .aff-card:focus-visible{border-radius:22px;box-shadow:0 0 0 3px var(--blue-400)} .aff-face{position:absolute;inset:0;border-radius:22px;overflow:hidden;color:#fff; padding:clamp(18px,1.8vw,24px);display:flex;flex-direction:column; backface-visibility:hidden;-webkit-backface-visibility:hidden; background:linear-gradient(138deg,#0b2b49 0%,#12405f 44%,#1b5b86 100%); box-shadow:0 22px 48px rgba(6,26,48,.34),inset 0 1px 0 rgba(255,255,255,.13)} / the middle tier is the one we want read first / .aff-card.is-top .aff-face{background:linear-gradient(138deg,#12507f 0%,#1b6ea3 46%,#2b86c9 100%); box-shadow:0 26px 58px rgba(9,52,92,.44),inset 0 1px 0 rgba(255,255,255,.18)} .aff-back{transform:rotateY(180deg);justify-content:center;gap:10px} .aff-brand{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0} .aff-brand img{width:clamp(78px,7.2vw,104px);min-width:0;flex:0 1 auto;height:auto;display:block} .aff-tag{text-transform:uppercase;letter-spacing:.24em;font-size:10px;font-weight:600; color:#9fcbe8;white-space:nowrap} .aff-rule{display:block;width:52px;height:2px;background:#d4b476;margin:clamp(12px,1.4vw,18px) 0 0} .aff-face strong{display:block;font-family:"Inter Tight",sans-serif;font-weight:600; font-size:clamp(32px,3.6vw,46px);line-height:1;letter-spacing:-.03em;margin-top:auto;color:#fff} .aff-face strong .aff-num{font-variant-numeric:tabular-nums} .aff-face small{display:block;margin-top:8px;text-transform:uppercase;letter-spacing:.16em; font-size:10.5px;color:rgba(197,221,241,.72); / the turn hint sits bottom-right; keep the caption clear of it / padding-right:52px} .aff-turn{position:absolute;right:clamp(18px,1.8vw,24px);bottom:clamp(16px,1.6vw,20px); font-style:normal;text-transform:uppercase;letter-spacing:.18em;font-size:9.5px; color:rgba(197,221,241,.45);pointer-events:none} .aff-back p{margin:0;font-size:14px;line-height:1.6;color:rgba(229,241,253,.92)} .aff-face-cta{align-self:flex-start;margin-top:4px;font-size:13px;font-weight:600; color:#9fcbe8;border-bottom:1px solid rgba(159,203,232,.45);padding-bottom:2px} .aff-face-cta:hover{color:#fff;border-bottom-color:#fff} / the fourth card is the door, so it wears the inverse / .aff-card-cta{perspective:none} .aff-card-cta a{position:relative;height:100%;border-radius:22px;overflow:hidden; padding:clamp(18px,1.8vw,24px);display:flex;flex-direction:column;text-decoration:none; background:#fff;color:var(--navy-900); box-shadow:0 22px 48px rgba(6,26,48,.16),inset 0 0 0 1px rgba(13,58,99,.1); transition:transform var(--card-t) var(--ease),box-shadow var(--card-t) var(--ease)} .aff-card-cta a:hover{transform:translateY(var(--lift)); box-shadow:0 30px 62px rgba(6,26,48,.24),inset 0 0 0 1px rgba(13,58,99,.18)} .aff-card-cta .aff-tag{color:var(--brand-deep)} .aff-card-cta strong{margin-top:auto;font-family:"Inter Tight",sans-serif;font-weight:600; font-size:clamp(26px,2.6vw,34px);line-height:1.05;letter-spacing:-.03em;color:var(--navy-900)} .aff-card-cta small{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-soft); text-transform:none;letter-spacing:0} .aff-cta-arrow{position:absolute;right:clamp(18px,1.8vw,24px);top:clamp(18px,1.8vw,24px); width:34px;height:34px;border-radius:50%;display:grid;place-items:center; background:var(--navy-800);color:#fff;transition:transform .4s var(--ease)} .aff-card-cta a:hover .aff-cta-arrow{transform:translate(2px,-2px)} .aff-cta-arrow .arrow{width:15px;height:15px} @media(max-width:560px){ .aff-cards{grid-template-columns:1fr} } / The hairline across each gap only reads as "and then" while the four steps are one row. From 1080px down they are 2x2, and the old 900px cut-off left the second card's line hanging 12px past the row into the page gutter. / @media(max-width:1080px){ .step::after{display:none} } / a card that turns on hover is a card that never turns on a phone, and a flip is motion somebody may have asked not to see */ @media(prefers-reduced-motion:reduce){ .aff-card-in{transition-duration:.01ms} }