/* ============================================================ MedSpaMedia — SITE.CSS · premium refinement layer (load LAST) Order: tokens.css → base.css → components.css → concept-*.css → site.css This file only NUDGES the existing system toward the Apple bar: more air, calmer motion, a correctly centered preview modal, and the law that content is visible by default (animation is a courtesy, not a gate). It overrides; it does not re-architect. Every motion = opacity/transform only. ============================================================ */ /* ------------------------------------------------------------ 1) CONTENT VISIBLE BY DEFAULT (the inviolable rule) base.css ships .reveal { opacity:0 } — i.e. hidden until JS runs. We flip that: everything is visible by default. The reveal animation only ARMS itself when html.js is present (set synchronously in and again by site.js). If JS never runs, nobody ever sees a blank section. ------------------------------------------------------------ */ .reveal{ opacity:1; transform:none; } html.js .reveal{ opacity:0; transform:translateY(14px); } html.js .reveal.in{ opacity:1; transform:none; transition:opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal); } @media (prefers-reduced-motion:reduce){ .reveal, html.js .reveal{ opacity:1!important; transform:none!important; transition:none!important; } } /* ------------------------------------------------------------ 2) THE PREVIEW MODAL — centered, soft, blurred backdrop The bug: base.css `*{ margin:0 }` wiped the UA `margin:auto` that centers a modal , so it pinned to the top-left corner. Restoring margin:auto returns it to the true center, on phone and desktop. Entry = scale + fade ~200ms. Backdrop = darkened green + light blur. ------------------------------------------------------------ */ dialog.lightbox{ margin:auto; /* THE FIX — back to dead center */ border:none; padding:0; background:transparent; max-width:min(880px,92vw); width:100%; } dialog.lightbox::backdrop{ background:rgba(22,50,31,.55); -webkit-backdrop-filter:blur(8px) saturate(1.05); backdrop-filter:blur(8px) saturate(1.05); } dialog.lightbox[open]{ animation:msmModalIn var(--dur-base) var(--ease-out); } dialog.lightbox[open]::backdrop{ animation:msmBackdropIn var(--dur-base) var(--ease-out-soft); } @keyframes msmModalIn{ from{ opacity:0; transform:scale(.965); } to{ opacity:1; transform:none; } } @keyframes msmBackdropIn{ from{ opacity:0; } to{ opacity:1; } } .lightbox__inner{ box-shadow:0 30px 80px rgba(22,50,31,.34); } @media (prefers-reduced-motion:reduce){ dialog.lightbox[open], dialog.lightbox[open]::backdrop{ animation:none; } } /* ------------------------------------------------------------ 3) RESPIRO — more white space, one idea per section ------------------------------------------------------------ */ .section-head{ margin-bottom:var(--sp-16); } .section-head.center{ max-width:54ch; } /* tighter headline measure = more confident */ .stack > p + p{ margin-top:var(--sp-6); } /* generous paragraph rhythm */ .lead{ max-width:58ch; } /* shorter lead lines read calmer */ /* ------------------------------------------------------------ 4) TYPOGRAPHY — calmer, more confident hierarchy ------------------------------------------------------------ */ .display{ letter-spacing:-0.03em; } /* tighten the big title a touch */ h1,.h1{ text-wrap:balance; } .eyebrow{ margin-bottom:var(--sp-4); opacity:.92; } ::selection{ background:color-mix(in srgb,var(--leaf) 28%, transparent); color:var(--deep); } /* ------------------------------------------------------------ 5) MOTION — subtler, faster, never gimmicky Kill the looping badge pulse: a premium price card does not blink. ------------------------------------------------------------ */ .plan__badge{ animation:none; } /* hovers stay gentle: cap lift + keep the green-tinted shadow consistent */ @media (hover:hover) and (pointer:fine){ .card.lift:hover, .vcard.lift:hover{ transform:translateY(-2px); } .btn-primary:hover{ transform:translateY(-1px); } } /* ------------------------------------------------------------ 6) COMPONENT POLISH — one accent per surface, consistent radius/shadow ------------------------------------------------------------ */ .plan--featured{ box-shadow:var(--elev-hi),0 20px 50px rgba(31,70,47,.16); } .searchbar{ box-shadow:0 1px 2px rgba(31,70,47,.05),0 12px 34px rgba(31,70,47,.08); } .footer__cols a{ transition:color var(--dur-fast) var(--ease-out-soft); } /* the cart scrim and modal backdrop share the same calm darkened green */ .scrim{ background:rgba(22,50,31,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } /* ------------------------------------------------------------ FLOW — "From pick to posted." 3 steps as calm elevated cards on the deep band: bigger number, glass surface, gentle lift. ------------------------------------------------------------ */ .section--deep .how-teaser{ gap:var(--sp-6); margin-top:var(--sp-12); } .section--deep .how-step{ flex-direction:column; align-items:flex-start; text-align:left; gap:var(--sp-5); background:rgba(255,255,255,.045); border:1px solid rgba(163,190,152,.20); border-radius:var(--r-card-lg); padding:var(--sp-8); transition:transform var(--dur-base) var(--ease-out-soft), background var(--dur-base) var(--ease-out-soft), border-color var(--dur-base) var(--ease-out-soft); } @media (hover:hover){ .section--deep .how-step:hover{ transform:translateY(-4px); background:rgba(255,255,255,.075); border-color:rgba(163,190,152,.42); } } .section--deep .how-step__n{ width:56px; height:56px; font-size:1.35rem; font-weight:var(--w-bold); background:var(--cta); color:var(--on-dark); border:none; box-shadow:0 10px 26px rgba(0,0,0,.28), var(--cta-hi); } .section--deep .how-step h3{ font-size:var(--t-h3); color:var(--on-dark); } .section--deep .how-step p{ font-size:var(--t-body); line-height:var(--lh-body); } @media (prefers-reduced-motion:reduce){ .section--deep .how-step{ transition:none; } .section--deep .how-step:hover{ transform:none; } } /* ------------------------------------------------------------ 7) THE STORE — the cart is real (localStorage, rendered by main.js from window.MSM). Drawer line items + live totals, and the product link on every library/product card title (besides the quick preview). ------------------------------------------------------------ */ .line-item{ position:relative; align-items:flex-start; } .line-item__thumb{ flex:none; display:block; width:84px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; box-shadow:var(--shadow-card); } .line-item__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-base) var(--ease-out); } @media (hover:hover){ .line-item__thumb:hover img{ transform:scale(1.05); } } .line-item__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; padding-right:var(--sp-6); } .line-item__title{ font-size:var(--t-body-sm); font-weight:var(--w-semi); color:var(--heading); line-height:1.3; transition:color var(--dur-fast) var(--ease-out-soft); } @media (hover:hover){ .line-item__title:hover{ color:var(--primary-press); } } .line-item__cat{ font-size:var(--t-eyebrow); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } .line-item__price{ font-weight:var(--w-semi); color:var(--heading); font-size:var(--t-body-sm); } .line-item__remove{ position:absolute; top:-4px; right:-4px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--muted); transition:background var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) var(--ease-out-soft); } .line-item__remove svg{ width:16px; height:16px; } @media (hover:hover){ .line-item__remove:hover{ background:rgba(154,59,47,.10); color:var(--danger); } } .cart-totals{ display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-4); } .cart-line{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); } .cart-line dt{ font-size:var(--t-body-sm); color:var(--ink); } .cart-line dd{ font-size:var(--t-body-sm); font-weight:var(--w-med); color:var(--heading); white-space:nowrap; } .cart-line--disc dt,.cart-line--disc dd{ color:var(--leaf); font-weight:var(--w-semi); } .cart-line--total{ margin-top:var(--sp-1); padding-top:var(--sp-3); border-top:1px solid var(--hairline); } .cart-line--total dt{ font-size:var(--t-body); font-weight:var(--w-semi); color:var(--heading); } .cart-line--total dd{ font-size:var(--t-h3); font-weight:var(--w-bold); color:var(--deep); } /* the card title links to its product page; quick-preview play is untouched */ .vcard__link{ display:block; color:var(--heading); } .vcard__link strong{ transition:color var(--dur-fast) var(--ease-out-soft); } @media (hover:hover){ .vcard__link:hover strong{ color:var(--primary-press); text-decoration:underline; text-underline-offset:3px; } } /* ------------------------------------------------------------ TESTIMONIALS — refined: numbered badge, soft surface, portrait below ------------------------------------------------------------ */ .testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-8); margin-top:var(--sp-16); } @media (max-width:880px){ .testimonials{ grid-template-columns:1fr; gap:var(--sp-12); } } .testimonial{ position:relative; background:linear-gradient(180deg,#ffffff 0%, #FBF8F2 100%); border:1px solid color-mix(in srgb, var(--leaf) 12%, var(--hairline)); border-radius:24px; padding:calc(var(--sp-10) + 18px) var(--sp-8) var(--sp-8); box-shadow:0 1px 2px rgba(31,70,47,.04), 0 20px 48px rgba(31,70,47,.07); margin:42px 0 0; display:flex; flex-direction:column; gap:var(--sp-5); transition:transform var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-out-soft), border-color var(--dur-base) var(--ease-out-soft); } /* decorative oversized open-quote glyph */ .testimonial::before{ content:"\201C"; position:absolute; top:6px; right:18px; font-family:Georgia, 'Times New Roman', serif; font-size:140px; line-height:1; color:var(--leaf); opacity:.10; pointer-events:none; letter-spacing:-0.02em; } /* subtle top accent rule */ .testimonial::after{ content:""; position:absolute; top:0; left:24px; right:24px; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--leaf) 50%, transparent), transparent); pointer-events:none; } @media (hover:hover){ .testimonial:hover{ transform:translateY(-6px); box-shadow:0 1px 2px rgba(31,70,47,.04), 0 32px 64px rgba(31,70,47,.14); border-color:color-mix(in srgb, var(--leaf) 30%, var(--hairline)); } } /* portrait avatar floating on top edge */ .testimonial__avatar{ position:absolute; top:-36px; left:50%; transform:translateX(-50%); width:72px; height:72px; border-radius:50%; object-fit:cover; border:4px solid #fff; box-shadow:0 10px 24px rgba(31,70,47,.22), 0 0 0 1px color-mix(in srgb, var(--leaf) 35%, transparent); z-index:2; } .testimonial__stars{ color:#e6a200; letter-spacing:4px; font-size:1rem; line-height:1; } .testimonial blockquote{ margin:0; font-size:1.05rem; line-height:1.65; color:var(--ink); font-style:normal; font-weight:var(--w-reg,400); text-wrap:pretty; position:relative; z-index:1; } .testimonial blockquote em{ font-style:italic; color:var(--deep); font-weight:var(--w-med,500); } /* name + role inside the card */ .testimonial__person{ margin:auto 0 0; padding-top:var(--sp-4); border-top:1px solid color-mix(in srgb, var(--leaf) 14%, var(--hairline)); text-align:left; } .testimonial__person strong{ display:block; font-size:var(--t-body-sm); color:var(--heading); font-weight:var(--w-semi,600); letter-spacing:-0.005em; } .testimonial__person span{ display:block; font-size:var(--t-eyebrow); color:var(--muted); margin-top:2px; } /* Floating circular cart button */ .cart-fab{ position:fixed; right:var(--sp-6,1.5rem); bottom:var(--sp-6,1.5rem); width:56px; height:56px; border-radius:9999px; background:var(--brand,#0f5132); color:var(--on-dark,#fff); border:none; box-shadow:0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; z-index:80; transition:transform .15s ease, box-shadow .2s ease; } .cart-fab:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.22), 0 3px 8px rgba(0,0,0,.14); } .cart-fab:focus-visible{ outline:2px solid var(--ring,#fff); outline-offset:3px; } .cart-fab svg{ width:24px; height:24px; } .cart-fab .cart-count{ position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 6px; border-radius:9999px; background:#e11d48; color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--bg,#fff); } @media (max-width:640px){ .cart-fab{ right:var(--sp-4,1rem); bottom:var(--sp-4,1rem); width:52px; height:52px; } }