/* ============================================================================ * BY SHIVA — modern home design system (image-led beauty clinic) * Cream canvas · espresso ink · champagne-gold accents. Editorial type, * photographic bento grid, marquee, image-topped scroll-snap rail, motion. * (See the PHOTOGRAPHY LAYER block at the foot of this file.) * Scoped under [class^="bys-"] section wrappers; uses theme tokens where present. * ==========================================================================*/ .bys-home { /* set on for the front page */ } :root{ --bys-gold:#C9A35E; --bys-gold-deep:#A6823C; --bys-espresso:#2A2118; --bys-ink:#2A2118; --bys-ink-2:#5A4A36; --bys-muted:#8A7B63; --bys-cream:#F7F1E7; --bys-sand:#EFE6D5; --bys-paper:#FCFAF4; --bys-blush:#F6E7DF; --bys-line:rgba(42,33,24,.12); --bys-line-gold:rgba(201,163,94,.45); --bys-serif:"Cormorant Garamond","EB Garamond",Georgia,serif; --bys-sans:"Inter","Helvetica Neue",Arial,sans-serif; --bys-mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --bys-r:24px; --bys-r-lg:32px; --bys-shadow:0 18px 50px -24px rgba(42,33,24,.30),0 2px 10px rgba(42,33,24,.05); --bys-shadow-lg:0 40px 90px -34px rgba(42,33,24,.42); --bys-ease:cubic-bezier(.16,.84,.44,1); --bys-wrap:1220px; } /* kill the elementor section default padding for our full-bleed sections */ .bys-home .elementor-section .elementor-container{max-width:none} .bys-sec{position:relative;overflow:clip} .bys-wrap{max-width:var(--bys-wrap);margin:0 auto;padding:0 28px} .bys-eyebrow{font-family:var(--bys-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--bys-gold-deep);display:inline-flex;align-items:center;gap:12px;margin:0 0 18px} .bys-eyebrow::before{content:"";width:26px;height:1px;background:var(--bys-gold)} .bys-eyebrow--center{justify-content:center} .bys-display{font-family:var(--bys-serif);font-weight:500;line-height:1.02;letter-spacing:-.01em;color:var(--bys-ink);margin:0} .bys-display em{font-style:italic;color:var(--bys-gold-deep)} .bys-lede{font-family:var(--bys-sans);color:var(--bys-ink-2);font-size:clamp(15px,1.5vw,18px);line-height:1.65;max-width:52ch} .bys-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--bys-sans);font-weight:600;font-size:15px;border-radius:999px;padding:15px 28px;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--bys-ease),box-shadow .25s,background .25s,color .2s} .bys-btn--gold{background:var(--bys-gold);color:var(--bys-espresso);box-shadow:0 12px 26px -12px rgba(201,163,94,.8)} .bys-btn--gold:hover{background:var(--bys-gold-deep);color:#fff;transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(166,130,60,.8)} .bys-btn--ghost{background:transparent;color:var(--bys-ink);border-color:var(--bys-line)} .bys-btn--ghost:hover{border-color:var(--bys-ink);transform:translateY(-2px)} .bys-btn--dark{background:var(--bys-espresso);color:var(--bys-cream)} .bys-btn--dark:hover{background:#3a2c1e;transform:translateY(-2px)} .bys-btn svg,.bys-btn .ar{transition:transform .25s var(--bys-ease)} .bys-btn:hover .ar{transform:translateX(4px)} /* reveal — only hide once JS is active (html.bys-js), so content is never * permanently invisible if the script fails to load/run. */ .bys-js [data-bys-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s var(--bys-ease)} .bys-js [data-bys-reveal].is-in{opacity:1;transform:none} [data-bys-reveal][data-bys-reveal="2"]{transition-delay:.08s} [data-bys-reveal][data-bys-reveal="3"]{transition-delay:.16s} @media (prefers-reduced-motion:reduce){[data-bys-reveal]{opacity:1!important;transform:none!important;transition:none!important}} /* ===================== HERO ===================== */ .bys-hero{padding:64px 0 80px;background: radial-gradient(1200px 560px at 88% -10%,rgba(201,163,94,.18),transparent 60%), radial-gradient(820px 480px at -8% 8%,rgba(231,200,190,.30),transparent 60%), linear-gradient(180deg,var(--bys-paper),var(--bys-cream))} .bys-hero::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--bys-line-gold) 1px,transparent 1px);background-size:100% 76px;opacity:.10;mask:linear-gradient(180deg,#000,transparent 70%)} .bys-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;position:relative;z-index:1} .bys-hero__title{font-size:clamp(44px,6.4vw,92px)} .bys-hero__lede{margin:26px 0 32px} .bys-hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .bys-hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px} .bys-chip{font-family:var(--bys-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bys-ink-2);background:rgba(255,255,255,.6);border:1px solid var(--bys-line);border-radius:999px;padding:8px 14px;backdrop-filter:blur(6px)} .bys-hero__panel{position:relative;background:rgba(252,250,244,.72);backdrop-filter:blur(10px);border:1px solid var(--bys-line-gold);border-radius:var(--bys-r-lg);padding:34px 32px;box-shadow:var(--bys-shadow-lg)} .bys-hero__panel h3{font-family:var(--bys-serif);font-style:italic;font-weight:500;font-size:24px;margin:0 0 18px;color:var(--bys-ink)} .bys-fact{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--bys-line)} .bys-fact:first-of-type{border-top:0} .bys-fact dt{font-family:var(--bys-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bys-muted)} .bys-fact dd{margin:0;font-family:var(--bys-sans);font-weight:600;font-size:14px;color:var(--bys-ink);text-align:right} .bys-medallion{position:absolute;top:-30px;right:-22px;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--bys-espresso);color:var(--bys-gold);border:1px solid var(--bys-gold);box-shadow:var(--bys-shadow);font-family:var(--bys-serif);font-style:italic;font-size:30px;transform:rotate(-6deg)} .bys-stars{color:var(--bys-gold);letter-spacing:2px;font-size:14px} /* ===================== TICKER / MARQUEE ===================== */ .bys-ticker{background:var(--bys-espresso);color:var(--bys-cream);padding:18px 0;border-top:1px solid rgba(201,163,94,.25);border-bottom:1px solid rgba(201,163,94,.25)} .bys-ticker__mask{display:flex;overflow:hidden;white-space:nowrap;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .bys-ticker__track{display:inline-flex;align-items:center;gap:34px;padding-right:34px;animation:bys-marq 38s linear infinite;flex:0 0 auto} .bys-ticker:hover .bys-ticker__track{animation-play-state:paused} .bys-ticker__item{font-family:var(--bys-serif);font-size:22px;font-style:italic;color:var(--bys-cream);opacity:.92;display:inline-flex;align-items:center;gap:34px} .bys-ticker__item::after{content:"✦";color:var(--bys-gold);font-style:normal;font-size:13px} @keyframes bys-marq{to{transform:translateX(-100%)}} @media (prefers-reduced-motion:reduce){.bys-ticker__track{animation:none}} /* ===================== CATEGORIES (BENTO) ===================== */ .bys-cats{padding:96px 0;background:var(--bys-cream)} .bys-cats__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap} .bys-cats__head h2{font-size:clamp(34px,4.4vw,58px)} .bys-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:18px} .bys-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:26px;border-radius:var(--bys-r);background:var(--bys-paper);border:1px solid var(--bys-line);overflow:hidden;text-decoration:none;color:var(--bys-ink);transition:transform .5s var(--bys-ease),box-shadow .5s,border-color .5s,background .5s} .bys-tile::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 280px at 120% 120%,rgba(201,163,94,.16),transparent 60%);opacity:0;transition:opacity .5s} .bys-tile:hover{transform:translateY(-6px);box-shadow:var(--bys-shadow-lg);border-color:var(--bys-gold)} .bys-tile:hover::before{opacity:1} .bys-tile--xl{grid-column:span 2;grid-row:span 2} .bys-tile--w{grid-column:span 2} .bys-tile__num{font-family:var(--bys-mono);font-size:12px;letter-spacing:.18em;color:var(--bys-gold-deep)} .bys-tile__name{font-family:var(--bys-serif);font-weight:500;font-size:26px;line-height:1.1;margin:0} .bys-tile--xl .bys-tile__name{font-size:40px} .bys-tile__desc{font-family:var(--bys-sans);font-size:14px;color:var(--bys-ink-2);line-height:1.55;margin:10px 0 0;max-width:34ch} .bys-tile__go{display:inline-flex;align-items:center;gap:8px;font-family:var(--bys-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bys-ink);margin-top:14px} .bys-tile__go .ar{transition:transform .3s var(--bys-ease)} .bys-tile:hover .bys-tile__go .ar{transform:translateX(5px)} .bys-tile__price{font-family:var(--bys-serif);font-style:italic;color:var(--bys-gold-deep);font-size:18px} /* ===================== FEATURED RAIL ===================== */ .bys-feat{padding:clamp(72px,9vw,118px) 0;background:linear-gradient(180deg,var(--bys-cream),var(--bys-sand))} .bys-feat__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap} .bys-feat__headcopy{max-width:640px} .bys-feat__head h2{font-size:clamp(34px,4.4vw,56px)} .bys-feat__nav{display:flex;gap:10px;flex:0 0 auto} .bys-railbtn{width:50px;height:50px;border-radius:50%;border:1px solid var(--bys-line);background:var(--bys-paper);color:var(--bys-ink);cursor:pointer;display:grid;place-items:center;font-size:18px;transition:.25s var(--bys-ease)} .bys-railbtn:hover{background:var(--bys-espresso);color:var(--bys-gold);border-color:var(--bys-espresso);transform:translateY(-2px)} .bys-railbtn:disabled{opacity:.3;cursor:not-allowed} .bys-railbtn:disabled:hover{background:var(--bys-paper);color:var(--bys-ink);border-color:var(--bys-line);transform:none} /* centred with the heading (inherits max-width + margin:auto from .bys-wrap); * fade only the right edge where cards scroll off. */ .bys-feat__railwrap{position:relative; -webkit-mask:linear-gradient(90deg,#000 90%,transparent);mask:linear-gradient(90deg,#000 90%,transparent)} .bys-feat__rail{display:flex;align-items:stretch;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;padding:10px 0 20px;scrollbar-width:none;cursor:grab} .bys-feat__rail::-webkit-scrollbar{display:none} .bys-feat__rail.is-grabbing{cursor:grabbing} .bys-feat__card{scroll-snap-align:start;flex:0 0 318px;display:flex;flex-direction:column;padding:28px;border-radius:var(--bys-r);background:var(--bys-paper);border:1px solid var(--bys-line);box-shadow:var(--bys-shadow);text-decoration:none;color:var(--bys-ink);position:relative;overflow:hidden;transition:transform .4s var(--bys-ease),box-shadow .4s,border-color .4s} .bys-feat__card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--bys-gold),transparent 70%);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--bys-ease)} .bys-feat__card:hover{transform:translateY(-8px);box-shadow:var(--bys-shadow-lg);border-color:var(--bys-gold)} .bys-feat__card:hover::before{transform:scaleX(1)} .bys-feat__cat{font-family:var(--bys-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bys-gold-deep)} .bys-feat__name{font-family:var(--bys-serif);font-weight:500;font-size:26px;line-height:1.14;margin:12px 0 10px} .bys-feat__excerpt{font-family:var(--bys-sans);font-size:14px;color:var(--bys-ink-2);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .bys-feat__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:auto;padding-top:22px;border-top:1px solid var(--bys-line)} .bys-feat__price{display:flex;flex-direction:column;gap:3px;line-height:1} .bys-feat__price small{font-family:var(--bys-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--bys-muted)} .bys-feat__price b{font-family:var(--bys-serif);font-style:italic;font-weight:500;font-size:28px;color:var(--bys-ink)} /* whole card → service detail page (stretched link); book button → modal */ .bys-feat__namelink{color:inherit;text-decoration:none} .bys-feat__namelink::after{content:"";position:absolute;inset:0;z-index:1} .bys-feat__bookbtn{width:48px;height:48px;border-radius:50%;border:1px solid var(--bys-gold);color:var(--bys-gold-deep);display:grid;place-items:center;font-size:18px;flex:0 0 auto;text-decoration:none;position:relative;z-index:2;transition:.3s var(--bys-ease)} .bys-feat__card:hover .bys-feat__bookbtn{background:var(--bys-gold);color:var(--bys-espresso)} .bys-feat__bookbtn:hover{background:var(--bys-gold-deep);color:#fff;transform:scale(1.07)} .bys-feat__card--all{flex:0 0 230px;justify-content:center;background:transparent;border:1px dashed var(--bys-line-gold);box-shadow:none} .bys-feat__card--all .bys-feat__name{margin:0 0 18px;font-size:24px} .bys-feat__card--all:hover{background:var(--bys-paper);transform:translateY(-8px)} @media (max-width:640px){.bys-feat__card{flex-basis:80vw}} /* ===================== MACHINE (laser technology split) ===================== */ .bys-machine{padding:clamp(80px,9vw,120px) 0;background:linear-gradient(180deg,var(--bys-sand),var(--bys-paper))} .bys-machine__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,68px);align-items:center} .bys-machine__media{position:relative;min-width:0} .bys-machine__img{display:block;max-width:100%} /* device render: contained, floating on a warm-cream product panel (panel colour * matches the flattened image background so the device appears seamless) */ .bys-machine__media--device{background:#F2E9D8;border:1px solid var(--bys-line-gold);border-radius:var(--bys-r-lg); box-shadow:var(--bys-shadow-lg);padding:clamp(18px,3vw,44px);display:grid;place-items:center;min-height:clamp(380px,48vh,560px)} .bys-machine__media--device .bys-machine__img{width:auto;height:auto;max-width:100%;max-height:clamp(320px,42vh,500px);object-fit:contain} /* photographic scene: fills a rounded frame */ .bys-machine__media--photo .bys-machine__img{width:100%;height:clamp(420px,52vh,560px);object-fit:cover;border-radius:var(--bys-r-lg);box-shadow:var(--bys-shadow-lg)} .bys-machine__media--empty{min-height:340px;border-radius:var(--bys-r-lg);background:linear-gradient(135deg,var(--bys-sand),var(--bys-blush))} .bys-machine__badge{position:absolute;left:18px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:3px; background:rgba(252,250,244,.88);backdrop-filter:blur(12px);border:1px solid var(--bys-line-gold); border-radius:16px;padding:12px 18px;box-shadow:0 22px 56px -30px rgba(42,33,24,.7)} .bys-machine__badge b{font-family:var(--bys-serif);font-style:italic;font-weight:500;font-size:20px;line-height:1;color:var(--bys-gold-deep)} .bys-machine__badge span{font-family:var(--bys-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bys-ink-2)} .bys-machine__seal{position:absolute;top:-22px;right:-16px;z-index:3;width:98px;height:98px;border-radius:50%; display:grid;place-items:center;text-align:center;background:var(--bys-espresso);color:var(--bys-gold); border:1px solid var(--bys-gold);box-shadow:var(--bys-shadow);font-family:var(--bys-serif);font-style:italic; font-size:18px;line-height:1.05;transform:rotate(-6deg)} .bys-machine__copy{min-width:0} .bys-machine__title{font-size:clamp(32px,4vw,52px)} .bys-machine__lede{margin:22px 0 30px;max-width:54ch} .bys-machine__specs{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px} .bys-machine__spec{border:1px solid var(--bys-line);border-radius:var(--bys-r);padding:20px 20px 22px;background:var(--bys-paper); transition:transform .4s var(--bys-ease),box-shadow .4s,border-color .4s} .bys-machine__spec:hover{transform:translateY(-4px);box-shadow:var(--bys-shadow);border-color:var(--bys-gold)} .bys-machine__spect{display:block;font-family:var(--bys-serif);font-style:italic;font-weight:500;font-size:19px;line-height:1.15;color:var(--bys-ink);margin:0 0 7px} .bys-machine__specd{display:block;font-family:var(--bys-sans);font-size:13.5px;line-height:1.55;color:var(--bys-ink-2)} .bys-machine__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .bys-machine__note{display:flex;align-items:center;gap:9px;font-family:var(--bys-mono);font-size:11.5px;letter-spacing:.04em;color:var(--bys-muted);margin:18px 0 0;line-height:1.5} .bys-machine__note::before{content:"✦";color:var(--bys-gold);font-size:11px;flex:0 0 auto} /* ===================== WHY (split + stats) ===================== */ .bys-why{padding:104px 0;background:var(--bys-espresso);color:var(--bys-cream)} .bys-why__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center} .bys-why .bys-eyebrow{color:var(--bys-gold)} .bys-why h2{font-family:var(--bys-serif);font-weight:500;font-size:clamp(34px,4.6vw,60px);line-height:1.05;color:var(--bys-cream);margin:0 0 22px} .bys-why h2 em{color:var(--bys-gold);font-style:italic} .bys-why__lede{font-family:var(--bys-sans);color:rgba(247,241,231,.78);line-height:1.7;max-width:48ch;margin:0 0 30px} .bys-reasons{list-style:none;margin:0;padding:0;display:grid;gap:18px} .bys-reason{display:flex;gap:16px;align-items:flex-start} .bys-reason__n{font-family:var(--bys-mono);font-size:12px;color:var(--bys-gold);border:1px solid rgba(201,163,94,.5);border-radius:50%;width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto} .bys-reason__t{font-family:var(--bys-sans);font-weight:600;color:var(--bys-cream);margin:0 0 3px} .bys-reason__d{font-family:var(--bys-sans);font-size:14px;color:rgba(247,241,231,.7);margin:0;line-height:1.5} .bys-statstack{display:grid;grid-template-columns:1fr 1fr;gap:14px} .bys-statcard{border:1px solid rgba(201,163,94,.30);border-radius:var(--bys-r);padding:26px 22px;background:linear-gradient(180deg,rgba(201,163,94,.07),transparent)} .bys-statcard__n{font-family:var(--bys-serif);font-weight:500;font-size:clamp(44px,5vw,68px);line-height:1;color:var(--bys-gold)} .bys-statcard__n span{font-size:.5em;vertical-align:super;color:var(--bys-gold-deep)} .bys-statcard__l{font-family:var(--bys-sans);font-size:13px;color:rgba(247,241,231,.75);margin-top:8px;line-height:1.45} /* ===================== REVIEWS ===================== */ .bys-reviews{padding:100px 0;background:var(--bys-cream)} .bys-reviews__head{text-align:center;margin-bottom:44px} .bys-reviews__head h2{font-size:clamp(34px,4.4vw,56px)} .bys-revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .bys-rev{position:relative;background:var(--bys-paper);border:1px solid var(--bys-line);border-radius:var(--bys-r);padding:34px 30px 28px;box-shadow:var(--bys-shadow);transition:transform .4s var(--bys-ease),box-shadow .4s,border-color .4s} .bys-rev:hover{transform:translateY(-6px);box-shadow:var(--bys-shadow-lg);border-color:var(--bys-gold)} .bys-rev::before{content:"\201C";position:absolute;top:6px;right:22px;font-family:var(--bys-serif);font-size:84px;line-height:1;color:var(--bys-gold);opacity:.22} .bys-rev__stars{color:var(--bys-gold);letter-spacing:3px;font-size:14px;margin-bottom:14px} .bys-rev__q{font-family:var(--bys-serif);font-size:20px;line-height:1.45;color:var(--bys-ink);margin:0 0 18px;font-style:italic} .bys-rev__by{font-family:var(--bys-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bys-muted)} .bys-rev__by b{color:var(--bys-ink);font-weight:600} /* ===================== VISIT / OFFER / CTA ===================== */ .bys-visit{padding:0} .bys-visit__grid{display:grid;grid-template-columns:1fr 1fr;min-height:520px} .bys-visit__offer{background:var(--bys-espresso);color:var(--bys-cream);padding:clamp(40px,6vw,84px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden} .bys-visit__offer::after{content:"";position:absolute;inset:0;background:radial-gradient(540px 320px at 110% -10%,rgba(201,163,94,.22),transparent 60%);pointer-events:none} .bys-visit__offer .bys-eyebrow{color:var(--bys-gold)} .bys-visit__offer h2{font-family:var(--bys-serif);font-weight:500;font-size:clamp(34px,4.6vw,58px);line-height:1.04;color:var(--bys-cream);margin:0 0 16px;position:relative} .bys-visit__offer h2 em{color:var(--bys-gold);font-style:italic} .bys-visit__offer p{font-family:var(--bys-sans);color:rgba(247,241,231,.8);line-height:1.65;margin:0 0 28px;max-width:42ch;position:relative} .bys-visit__cta{display:flex;flex-wrap:wrap;gap:14px;position:relative} .bys-visit__info{background:var(--bys-paper);padding:clamp(40px,6vw,84px);display:flex;flex-direction:column;justify-content:center} .bys-visit__info h3{font-family:var(--bys-serif);font-style:italic;font-weight:500;font-size:28px;margin:0 0 8px;color:var(--bys-ink)} .bys-visit__addr{font-family:var(--bys-sans);color:var(--bys-ink-2);line-height:1.6;margin:0 0 22px} .bys-hours{list-style:none;margin:0 0 24px;padding:0;border-top:1px solid var(--bys-line)} .bys-hours li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--bys-line);font-family:var(--bys-sans);font-size:14px} .bys-hours li b{font-family:var(--bys-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bys-muted);font-weight:500} .bys-hours li.is-today{color:var(--bys-gold-deep)} .bys-visit__links{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--bys-mono);font-size:12px;letter-spacing:.08em} .bys-visit__links a{color:var(--bys-ink);display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid var(--bys-line-gold);padding-bottom:3px} .bys-visit__links a:hover{color:var(--bys-gold-deep)} /* ===================== RESPONSIVE ===================== */ @media (max-width:1000px){ .bys-hero__grid{grid-template-columns:1fr;gap:36px} .bys-why__grid,.bys-visit__grid{grid-template-columns:1fr} .bys-machine__grid{grid-template-columns:1fr;gap:44px} .bys-machine__media--photo .bys-machine__img{height:auto;aspect-ratio:5/4;max-height:520px} .bys-machine__media--device{min-height:0;padding:clamp(20px,6vw,40px)} .bys-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px} .bys-tile--xl{grid-column:span 2;grid-row:span 2} .bys-revgrid{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .bys-cats,.bys-feat,.bys-reviews{padding:64px 0} .bys-why,.bys-machine{padding:64px 0} .bys-machine__media--photo .bys-machine__img{aspect-ratio:4/5;max-height:460px} .bys-machine__media--device .bys-machine__img{max-height:60vh} .bys-machine__specs{grid-template-columns:1fr} .bys-machine__seal{width:74px;height:74px;font-size:14px;top:-14px;right:-6px} .bys-bento{grid-template-columns:1fr;grid-auto-rows:auto} .bys-tile{min-height:150px} .bys-tile--xl,.bys-tile--w{grid-column:span 1;grid-row:auto} .bys-revgrid{grid-template-columns:1fr} .bys-statstack{grid-template-columns:1fr 1fr} .bys-hero{padding:36px 0 56px} .bys-hero__title{font-size:clamp(38px,11vw,60px)} .bys-hero__panel{padding:26px 22px} } /* ===================== bento dark / quiet tiles ===================== */ .bys-tile--dark{background:var(--bys-espresso);color:var(--bys-cream);border-color:rgba(201,163,94,.42)} .bys-tile--dark .bys-tile__num{color:var(--bys-gold)} .bys-tile--dark .bys-tile__name{color:var(--bys-cream)} .bys-tile--dark .bys-tile__desc{color:rgba(247,241,231,.72)} .bys-tile--dark .bys-tile__go{color:var(--bys-cream)} .bys-tile--dark .bys-tile__price{color:var(--bys-gold)} .bys-tile--dark::before{background:radial-gradient(460px 320px at 110% 120%,rgba(201,163,94,.28),transparent 60%);opacity:.7} .bys-tile--dark:hover{border-color:var(--bys-gold)} .bys-tile--quiet{background:var(--bys-sand)} .bys-tile--quiet .bys-tile__name{font-size:22px;display:inline-flex;align-items:center;gap:10px} /* ===================== hero grain (photo-free depth) ===================== */ .bys-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E")} /* ===================== mobile sticky Call | Book bar ===================== */ .bys-mobilebar{display:none} @media (max-width:720px){ .bys-mobilebar{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:1000; padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bys-cream) 86%,transparent); backdrop-filter:blur(12px);border-top:1px solid var(--bys-line-gold)} .bys-mobilebar a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font-family:var(--bys-sans);font-weight:600;font-size:15px;text-decoration:none} .bys-mobilebar__call{background:transparent;color:var(--bys-espresso);border:1px solid var(--bys-espresso)} .bys-mobilebar__book{background:var(--bys-gold);color:var(--bys-espresso)} body.bys-home{padding-bottom:74px} body.bys-home .fab-book{display:none!important} /* avoid double CTA on mobile home */ /* When the booking modal is open, hide the sticky bar — it's fixed at * z-index:1000 and would otherwise cover the modal's own footer * (Continue button) and last list rows, trapping the user on step 1. */ body.hbn-modal-open .bys-mobilebar{display:none!important} } /* ============================================================================ * Mobile overflow hardening — keep everything within the viewport. * (No overflow on : the theme nav is position:sticky and would break.) * ==========================================================================*/ .bys-home main#primary{overflow-x:clip} .bys-hero__grid{min-width:0} .bys-hero__grid>*{min-width:0} .bys-hero__copy{min-width:0} .bys-feat__headcopy{min-width:0} .bys-fact dd{min-width:0;overflow-wrap:anywhere;text-align:right} @media (max-width:900px){ .bys-eyebrow{flex-wrap:wrap;letter-spacing:.18em} .bys-hero__title{overflow-wrap:break-word} .bys-medallion{right:-6px;top:-20px;width:66px;height:66px;font-size:25px} .bys-hero__chips .bys-chip{font-size:10px;padding:7px 11px} } /* ============================================================================ * PHOTOGRAPHY LAYER — By Shiva is a beauty clinic, so the home is now image-led: * an editorial hero photo, a photographic category bento, and image-topped * treatment cards. Every image is a swappable WP attachment (see seed-images). * ==========================================================================*/ /* ---- HERO: editorial photo + overlapping glass facts card ---- */ .bys-hero__media{position:relative;min-height:320px} .bys-hero__img{display:block;width:100%;height:clamp(440px,58vh,608px);object-fit:cover;object-position:50% 30%;border-radius:var(--bys-r-lg);box-shadow:var(--bys-shadow-lg)} .bys-hero__media .bys-medallion{z-index:3} .bys-hero__panel{position:absolute;left:20px;right:20px;bottom:20px;z-index:2; background:rgba(252,250,244,.86);backdrop-filter:blur(14px);border:1px solid var(--bys-line-gold); border-radius:var(--bys-r);padding:18px 22px 16px;box-shadow:0 24px 60px -28px rgba(42,33,24,.6)} .bys-hero__rating{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--bys-line)} .bys-hero__ratingtxt{font-family:var(--bys-sans);font-size:12.5px;font-weight:600;color:var(--bys-ink);line-height:1.25} .bys-hero__panel dl{margin:0} .bys-hero__panel .bys-fact{padding:9px 0} .bys-hero__media--empty{min-height:0} .bys-hero__media--empty .bys-hero__panel{position:static;left:auto;right:auto;bottom:auto;box-shadow:var(--bys-shadow-lg)} /* ---- CATEGORY BENTO: photographic tiles ---- */ .bys-tile--photo{color:#fff;border-color:rgba(255,255,255,.16);background:var(--bys-espresso)} .bys-tile--photo::before{display:none} /* `.bys-tile` prefix raises specificity above Elementor's `.elementor img{height:auto}` (0,1,1); without it the tile photo collapses to its intrinsic height and the espresso tile background shows as a gap below the image. */ .bys-tile .bys-tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .9s var(--bys-ease)} .bys-tile--photo:hover .bys-tile__img{transform:scale(1.06)} .bys-tile__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(22,16,11,.12),rgba(22,16,11,.34) 48%,rgba(22,16,11,.84))} .bys-tile--xl .bys-tile__scrim{background:linear-gradient(180deg,rgba(22,16,11,.22),rgba(22,16,11,.46) 46%,rgba(22,16,11,.9))} .bys-tile--photo>.bys-tile__num,.bys-tile--photo>div{position:relative;z-index:2} .bys-tile--photo .bys-tile__num{color:#F3E4C7} .bys-tile--photo .bys-tile__name,.bys-tile--photo .bys-tile__go{color:#fff} .bys-tile--photo .bys-tile__desc{color:rgba(255,255,255,.86)} .bys-tile--photo .bys-tile__price{color:#F3CE8E} .bys-tile--photo:hover{border-color:var(--bys-gold);box-shadow:var(--bys-shadow-lg)} /* ---- FEATURED RAIL: image-topped cards ---- */ .bys-feat__card{padding:0} .bys-feat__media{position:relative;height:208px;overflow:hidden;background:var(--bys-sand)} .bys-feat__media--empty{background:linear-gradient(135deg,var(--bys-sand),var(--bys-blush))} /* Same Elementor `.elementor img{height:auto}` override guard: keep the photo filling its fixed-height media box rather than collapsing to intrinsic height. */ .bys-feat__media .bys-feat__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--bys-ease)} .bys-feat__card:hover .bys-feat__img{transform:scale(1.06)} .bys-feat__media .bys-feat__cat{position:absolute;left:14px;top:14px;z-index:2;margin:0; background:rgba(28,21,15,.62);color:#fff;backdrop-filter:blur(6px); padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.18)} .bys-feat__body{display:flex;flex-direction:column;flex:1 1 auto;padding:22px 26px 26px} .bys-feat__body .bys-feat__name{margin:0 0 8px} .bys-feat__card--all{padding:34px 28px} /* ---- responsive: keep the hero card overlapping nicely on small screens ---- */ @media (max-width:1000px){ .bys-hero__img{height:auto;aspect-ratio:5/4;max-height:520px;object-position:50% 28%} .bys-hero__panel{position:static;margin:-52px 14px 0;left:auto;right:auto;bottom:auto} } @media (max-width:640px){ .bys-hero__img{aspect-ratio:4/5;max-height:460px} .bys-feat__media{height:190px} .bys-tile--photo .bys-tile__desc{color:rgba(255,255,255,.9)} }