/* ══════════════════════════════════════════════════════════════ DIVYANSHI WELLNESS — enhance.css (additive polish layer · v2) Load AFTER style.css. Only elevates; page works without it. Pairs with enhance.js. Honors reduced-motion. ┌──────────────────────────────────────────────────────────┐ │ ONE-LINE THEME DIAL — no markup edits, no JS needed. │ │ Find the block marked «PICK A MODE» a few lines down │ │ and keep exactly ONE of the three @import-free mode │ │ blocks uncommented: │ │ MODE 1 Refined — green leads, gold = fine thread │ │ MODE 2 Rich — gold is a real 2nd brand colour │ │ MODE 3 Jewel-box — nav-level intensity everywhere │ │ Default shipped = MODE 2 (Rich). │ │ (You can also just add class="gold-1|gold-2|gold-3" to │ │ to override live — handy for A/B testing.) │ └──────────────────────────────────────────────────────────┘ ══════════════════════════════════════════════════════════════ */ :root{ /* ── One unified gold metal (retires the 4 scattered golds) ── */ --g-deep:#A87F2E; --g-core:#C4A052; --g-lite:#E4C983; --g-glow:#F3D98A; --gold:var(--g-core); --gold-soft:var(--g-lite); --nav-gold:#C9A55C; --nav-gold-lt:var(--g-lite); --nav-ink:#EDE7D8; --glass-a:rgba(48,64,58,.86); --glass-b:rgba(26,38,34,.92); --spring:cubic-bezier(.34,1.56,.64,1); --shadow-sm:0 1px 2px rgba(27,67,50,.05),0 2px 8px rgba(27,67,50,.06); --shadow-md:0 4px 12px rgba(27,67,50,.08),0 14px 30px rgba(27,67,50,.10); --shadow-lg:0 10px 28px rgba(27,67,50,.12),0 26px 52px rgba(27,67,50,.14); --elev-1:0 1px 1px rgba(27,67,50,.04),0 2px 5px rgba(27,67,50,.05),0 6px 14px rgba(27,67,50,.05); --elev-2:0 1px 2px rgba(27,67,50,.035),0 6px 14px rgba(27,67,50,.05),0 16px 34px rgba(27,67,50,.06); --elev-3:0 2px 6px rgba(27,67,50,.055),0 14px 30px rgba(27,67,50,.085),0 30px 60px rgba(27,67,50,.09); --card-surface:linear-gradient(180deg,#FFFFFF 0%,#FBFAF5 100%); --top-light:inset 0 1px 0 var(--gx-card-top); --hair:1px solid var(--gx-card-border); } /* ══════════════════ «PICK A MODE» ══════════════════ * * Uncomment EXACTLY ONE block. Default active = MODE 2. */ /* ── MODE 1 · REFINED ── :root{ --gx-card-border:rgba(27,67,50,.07); --gx-card-top:rgba(255,255,255,.92); --gx-hair-op:.35; --gx-em:var(--green-mid); --gx-price:var(--green-deep); --gx-cta-ring:rgba(228,201,131,.28); --gx-cta-sheen:rgba(255,255,255,.35); --gx-hover-border:var(--green-sage); --gx-hero-edge:.6; --gx-hero-vignette:.05; --gx-drawer-dark:0; } */ /* ── MODE 2 · RICH ── :root{ --gx-card-border:rgba(168,127,46,.16); --gx-card-top:rgba(255,251,240,.95); --gx-hair-op:.55; --gx-em:var(--g-deep); --gx-price:var(--green-deep); --gx-cta-ring:rgba(228,201,131,.45); --gx-cta-sheen:rgba(255,240,200,.5); --gx-hover-border:var(--g-core); --gx-hero-edge:.85; --gx-hero-vignette:.10; --gx-drawer-dark:1; } */ /* ── MODE 1 · REFINED (default) ── */ :root{ --gx-card-border:rgba(27,67,50,.08); --gx-card-top:rgba(255,255,255,.92); --gx-hair-op:.28; --gx-em:var(--green-mid); --gx-price:var(--green-deep); --gx-cta-ring:rgba(228,201,131,.28); --gx-cta-sheen:rgba(255,255,255,.35); --gx-hover-border:var(--green-sage); --gx-hero-edge:.5; --gx-hero-vignette:.04; --gx-drawer-dark:1; } /* ── MODE 3 · JEWEL-BOX ── :root{ --gx-card-border:rgba(168,127,46,.30); --gx-card-top:rgba(255,249,232,1); --gx-hair-op:.8; --gx-em:var(--g-deep); --gx-price:var(--g-deep); --gx-cta-ring:rgba(228,201,131,.7); --gx-cta-sheen:rgba(255,240,200,.65); --gx-hover-border:var(--g-core); --gx-hero-edge:1; --gx-hero-vignette:.18; --gx-drawer-dark:1; } */ /* ── Optional live overrides via ─────────── */ html.gold-1{ --gx-card-border:rgba(27,67,50,.07);--gx-card-top:rgba(255,255,255,.92); --gx-hair-op:.35;--gx-em:var(--green-mid);--gx-price:var(--green-deep); --gx-cta-ring:rgba(228,201,131,.28);--gx-cta-sheen:rgba(255,255,255,.35); --gx-hover-border:var(--green-sage);--gx-hero-edge:.6;--gx-hero-vignette:.05;--gx-drawer-dark:0} html.gold-2{ --gx-card-border:rgba(168,127,46,.16);--gx-card-top:rgba(255,251,240,.95); --gx-hair-op:.55;--gx-em:var(--g-deep);--gx-price:var(--green-deep); --gx-cta-ring:rgba(228,201,131,.45);--gx-cta-sheen:rgba(255,240,200,.5); --gx-hover-border:var(--g-core);--gx-hero-edge:.85;--gx-hero-vignette:.10;--gx-drawer-dark:1} html.gold-3{ --gx-card-border:rgba(168,127,46,.30);--gx-card-top:rgba(255,249,232,1); --gx-hair-op:.8;--gx-em:var(--g-deep);--gx-price:var(--g-deep); --gx-cta-ring:rgba(228,201,131,.7);--gx-cta-sheen:rgba(255,240,200,.65); --gx-hover-border:var(--g-core);--gx-hero-edge:1;--gx-hero-vignette:.18;--gx-drawer-dark:1} /* ambient halo — gold-warmed */ body{ background-color:var(--ivory); background-image: radial-gradient(1100px 520px at 50% -60px,rgba(116,198,157,.10),transparent 58%), radial-gradient(900px 500px at 50% 8%,rgba(196,160,82,.05),transparent 60%); background-repeat:no-repeat} /* ══ MOTION ════════════════════════════════════════════════════ */ .page-content{animation:dwIn .5s cubic-bezier(.4,0,.2,1) both} @keyframes dwIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .dw-reveal{opacity:0;transform:translateY(20px); transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)} .dw-reveal.dw-in{opacity:1;transform:none} .dw-stagger>*{opacity:0;transform:translateY(16px); transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)} .dw-stagger.dw-in>*{opacity:1;transform:none} .dw-stagger.dw-in>*:nth-child(1){transition-delay:.02s} .dw-stagger.dw-in>*:nth-child(2){transition-delay:.07s} .dw-stagger.dw-in>*:nth-child(3){transition-delay:.12s} .dw-stagger.dw-in>*:nth-child(4){transition-delay:.17s} .dw-stagger.dw-in>*:nth-child(5){transition-delay:.22s} .dw-stagger.dw-in>*:nth-child(6){transition-delay:.27s} .dw-stagger.dw-in>*:nth-child(7){transition-delay:.32s} .dw-stagger.dw-in>*:nth-child(8){transition-delay:.37s} .dw-img{opacity:0;transition:opacity .5s ease,filter .5s ease;filter:blur(6px)} .dw-img.dw-loaded{opacity:1;filter:none} /* ══ TANGIBLE ELEVATION ════════════════════════════════════════ */ .service-card,.product-card,.blog-card,.contact-card,.value-card, .next-step-card,.therapy-list-card,.booking-summary,.checkout-card, .product-qty-section,.expert-card,.t-fade-card,.testimonial-card{ position:relative; background:var(--card-surface); box-shadow:var(--elev-2),var(--top-light); border:1px solid var(--gx-card-border); border-radius:var(--radius-md);overflow:hidden} /* faint gilded top edge — scales with mode; near-invisible in Refined */ .service-card::before,.product-card::before,.blog-card::before, .contact-card::before,.next-step-card::before,.therapy-list-card::before, .expert-card::before,.t-fade-card::before,.testimonial-card::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:1; background:linear-gradient(90deg,transparent,var(--g-core) 25%,var(--g-lite) 50%,var(--g-core) 75%,transparent); opacity:calc(var(--gx-hair-op) * .6)} /* value-card rail follows green in Refined, gold in Rich/Jewel */ .value-card{border-left:3px solid var(--green-sage)} html.gold-2 .value-card,html.gold-3 .value-card{border-left:3px solid var(--g-core)} /* jewel mode: warmer ivory surface so gold border truly pops */ html.gold-3 .service-card,html.gold-3 .product-card,html.gold-3 .blog-card, html.gold-3 .contact-card,html.gold-3 .value-card,html.gold-3 .next-step-card, html.gold-3 .therapy-list-card,html.gold-3 .expert-card,html.gold-3 .testimonial-card{ background:linear-gradient(180deg,#FFFDF7 0%,#FBF6EA 100%)} .service-icon,.therapy-list-icon,.value-icon{ background:linear-gradient(145deg,#EDF9F1 0%,#D2ECDC 100%); border:1px solid rgba(116,198,157,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 4px rgba(27,67,50,.06),0 3px 6px rgba(27,67,50,.10)} html.gold-3 .service-icon,html.gold-3 .therapy-list-icon,html.gold-3 .value-icon{ background:linear-gradient(145deg,#FBF3DC 0%,#EAD9A8 100%); border:1px solid rgba(196,160,82,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 4px rgba(120,90,30,.12),0 3px 7px rgba(120,90,30,.18)} .contact-icon-wrap,.next-step-icon{ box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 3px 7px rgba(27,67,50,.10); border:1px solid rgba(27,67,50,.05)} .service-icon-lg{ background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.22)} /* ══ BUTTONS — GOLD-GRADIENT PILLS (match the drawer CTA) ══════ * * The metal fill: gold gradient, dark ink, gold glow + inner * bevel — identical language to .dw-cta / the FAB. Applied to * every primary action so the whole site's buttons feel forged. */ .btn-primary,.btn-green,.btn-submit,.cta-checkout-btn,.header-call, .btn-add-cart,.cart-checkout-btn,.coupon-pill-btn,.drawer-link-cta,.dw-cta, .product-btn,.btn-buy-now{ background:linear-gradient(180deg,var(--g-lite) 0%,var(--g-core) 55%,var(--g-deep) 100%) !important; color:#2A2418 !important; border:none !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(120,90,30,.30), 0 4px 14px rgba(120,90,30,.32), 0 1px 3px rgba(120,90,30,.24) !important} .btn-primary svg,.btn-green svg,.btn-submit svg,.header-call svg, .btn-add-cart svg,.cart-checkout-btn svg,.drawer-link-cta svg,.dw-cta svg, .product-btn svg,.btn-buy-now svg{stroke:#2A2418 !important;color:#2A2418 !important} /* small pills (short height) — flatter, brighter gradient so the dark bevel doesn't dominate and the top white line stays visible */ .btn-add-cart,.cart-checkout-btn,.coupon-pill-btn,.product-btn,.btn-buy-now{ background:linear-gradient(180deg,var(--g-glow) 0%,var(--g-lite) 50%,var(--g-core) 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 2px 8px rgba(120,90,30,.25), 0 1px 2px rgba(120,90,30,.18) !important} /* the reverse pair — light/outline buttons get a gold ring instead */ .btn-white{color:var(--g-deep) !important; box-shadow:var(--top-light),inset 0 0 0 1px rgba(196,160,82,.45),0 6px 18px rgba(120,90,30,.16)} .btn-outline{border:1.5px solid rgba(228,201,131,.55) !important;color:#fff !important} .btn-outline svg{stroke:currentColor} /* travelling sheen across the metal */ .btn-primary,.btn-green,.btn-submit,.header-call,.cart-checkout-btn, .dw-cta,.drawer-link-cta,.btn-add-cart,.btn-buy-now{position:relative;overflow:hidden} .btn-primary::after,.btn-green::after,.btn-submit::after,.header-call::after, .cart-checkout-btn::after,.dw-cta::after,.drawer-link-cta::after, .btn-add-cart::after,.btn-buy-now::after{ content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(115deg,transparent,rgba(255,250,230,.6),transparent); transform:skewX(-18deg);transition:left .6s ease;pointer-events:none} /* stats bar */ .stats-bar{ background:linear-gradient(180deg,#FFFFFF 0%,#F7F4EE 100%); box-shadow:var(--top-light),0 8px 22px rgba(27,67,50,.08); border-bottom:1px solid rgba(196,160,82,calc(var(--gx-hair-op) * .5))} .stat-item{border-right:1px solid rgba(27,67,50,.06)} .stat-number{color:var(--gx-price);position:relative;display:inline-block;padding-bottom:5px} .stat-number::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%); width:18px;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--g-core),transparent);opacity:var(--gx-hair-op)} .form-input,.form-select,.form-textarea,.phone-input-wrap,.coupon-pill{ background:linear-gradient(180deg,#FCFCFA,#FFFFFF); box-shadow:inset 0 1px 2px rgba(27,67,50,.06)} /* ══ HERO — deep glass, gold baseline + corner mist ═══════════ */ .hero{position:relative;box-shadow:inset 0 -22px 40px -24px rgba(0,0,0,.35); padding:34px 28px !important} @media(max-width:380px){.hero{padding:26px 18px !important}} @media(min-width:601px){.hero{padding:40px 40px !important}} @media(min-width:901px){.hero{padding:48px 56px !important}} @media(min-width:1200px){.hero{padding:52px 64px !important}} .hero-badge,.hero h1,.hero-sub,.hero-location,.hero-actions{position:relative;z-index:2} .hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3; background:linear-gradient(90deg,transparent,var(--g-core) 22%,var(--g-lite) 50%,var(--g-core) 78%,transparent); opacity:var(--gx-hero-edge)} .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(120% 90% at 100% 0%,rgba(228,201,131,var(--gx-hero-vignette)),transparent 55%)} .hero.dw-hero-photo::after{ background: radial-gradient(120% 90% at 100% 0%,rgba(228,201,131,var(--gx-hero-vignette)),transparent 55%), linear-gradient(155deg,rgba(27,67,50,.90),rgba(45,106,79,.78) 55%,rgba(27,67,50,.86)), var(--dw-hero-img) center/cover no-repeat; animation:dwKen 22s ease-in-out infinite alternate} .dw-orb{position:absolute;border-radius:50%;filter:blur(46px);pointer-events:none; z-index:0;will-change:transform;opacity:.55} .hero .dw-orb{z-index:1} .dw-orb.o1{width:240px;height:240px;top:-70px;left:-60px; background:radial-gradient(circle,var(--green-sage),transparent 70%);animation:dwFloatA 14s ease-in-out infinite} .dw-orb.o2{width:200px;height:200px;bottom:-80px;right:-40px;opacity:.4; background:radial-gradient(circle,var(--g-lite),transparent 70%);animation:dwFloatB 18s ease-in-out infinite} @keyframes dwFloatA{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,20px)}} @keyframes dwFloatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,-18px)}} @keyframes dwKen{from{background-size:auto,auto,108%}to{background-size:auto,auto,118%}} /* ══ GOLD ACCENTS ══════════════════════════════════════════════ */ .section-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--g-deep)} .section-eyebrow::before{content:"";width:22px;height:1.5px;flex-shrink:0; background:linear-gradient(90deg,var(--g-core),transparent);border-radius:2px} .section-title em{color:var(--gx-em)} .hero h1 em{color:var(--green-sage)} html.gold-2 .hero h1 em,html.gold-3 .hero h1 em{color:var(--g-lite)} .top-header{box-shadow:0 1px 0 rgba(196,160,82,.35),0 2px 12px rgba(0,0,0,.06)} .top-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:linear-gradient(90deg,transparent,var(--g-core) 20%,var(--g-lite) 50%,var(--g-core) 80%,transparent); opacity:calc(.3 + var(--gx-hair-op) * .6)} .testimonial-stars{ background:linear-gradient(180deg,var(--g-glow) 0%,var(--g-core) 45%,var(--g-deep) 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 1px rgba(120,90,20,.25))} .therapy-price,.product-price,.product-total-price,.product-detail-name{color:var(--gx-price)} .service-price-badge{ border:1px solid rgba(228,201,131,.4); background:linear-gradient(180deg,rgba(228,201,131,.16),rgba(255,255,255,.05))} .condition-chip,.expert-chip,.blog-card-tag,.blog-tag{ box-shadow:inset 0 0 0 1px rgba(196,160,82,calc(var(--gx-hair-op) * .5))} .divider{background:linear-gradient(90deg,transparent,rgba(196,160,82,var(--gx-hair-op)) 50%,transparent);height:1px} .hero-badge{position:relative;overflow:hidden; border:1px solid rgba(235,220,175,.5); background:linear-gradient(135deg,rgba(196,160,82,.18),rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 10px rgba(0,0,0,.12)} .hero-badge::before{color:var(--g-lite)!important} .hero-badge::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%; background:linear-gradient(115deg,transparent,rgba(255,240,200,.4),transparent); transform:skewX(-18deg);animation:dwShimmer 5.5s ease-in-out infinite} @keyframes dwShimmer{0%,60%{left:-120%}80%,100%{left:150%}} .cta-banner{ background:linear-gradient(150deg,#9A6A44 0%,var(--earth) 45%,#7C4A2C 100%); border:1px solid rgba(196,160,82,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--elev-3)} html.gold-3 .cta-banner{background:linear-gradient(150deg,var(--glass-a),var(--glass-b));border:1px solid rgba(201,165,92,.4)} html.gold-3 .cta-banner h3{color:#fff} /* ══ FLOATING SLATE-GLASS NAV · GOLD ICONS ════════════════════ */ .bottom-nav{ bottom:calc(env(safe-area-inset-bottom,0px) + 20px) !important; left:50%;transform:translateX(-50%); width:calc(100% - 20px) !important; max-width:calc(var(--content-max) - 20px) !important; height:64px !important;padding:0 4px !important;border-radius:22px !important; border-top:none !important;overflow:visible !important; background:linear-gradient(160deg,var(--glass-a),var(--glass-b)) !important; -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%); border:1px solid rgba(201,165,92,.28) !important; box-shadow:0 12px 32px rgba(0,0,0,.32),0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.14) !important} .bottom-nav .nav-icon{width:22px;height:22px;stroke:currentColor} .nav-item > .nav-icon{display:flex !important;align-items:center;justify-content:center; width:22px !important;height:22px !important;font-size:19px;line-height:1} .nav-item{border-radius:14px !important;padding:6px 2px !important;margin:4px 2px !important; gap:3px !important;min-width:0 !important;color:var(--nav-ink) !important; transition:transform .14s var(--spring),background .2s !important} .nav-item .nav-icon{color:var(--nav-gold) !important;stroke:var(--nav-gold) !important; transition:transform .16s var(--spring),color .2s;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))} .nav-item span{color:rgba(237,231,216,.87) !important} .nav-item.active:not(.nav-book){background:rgba(201,165,92,.16);box-shadow:inset 0 0 0 1px rgba(201,165,92,.3)} .nav-item.active:not(.nav-book) .nav-icon{color:var(--nav-gold-lt) !important;stroke:var(--nav-gold-lt) !important; transform:translateY(-1px) scale(1.08);filter:drop-shadow(0 0 6px rgba(201,165,92,.55))} .nav-item.active:not(.nav-book) span{color:var(--nav-gold-lt) !important} .nav-item.active::before{display:none !important} .nav-item:active:not(.nav-book){transform:scale(.92);background:rgba(201,165,92,.24)} .nav-item:active:not(.nav-book) .nav-icon,.nav-item:active:not(.nav-book) span{transform:translateY(1px) scale(.92)} .nav-book{justify-content:flex-start !important} .nav-book-btn{top:-16px !important; background:linear-gradient(135deg,var(--nav-gold-lt),var(--nav-gold)) !important; border:2px solid var(--green-sage) !important; box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 0 3px rgba(26,38,34,.9), inset 0 2px 3px rgba(255,255,255,.5),inset 0 -3px 6px rgba(120,90,30,.35) !important; transition:transform .14s var(--spring),box-shadow .14s !important} .nav-book:active .nav-book-btn{transform:translateY(2px) scale(.9) !important; box-shadow:0 3px 10px rgba(0,0,0,.4),0 0 0 3px rgba(26,38,34,.9),inset 0 3px 7px rgba(120,90,30,.4) !important} .nav-book span{margin-top:-14px !important;color:rgba(237,231,216,.87) !important} .nav-book.active span{color:var(--nav-gold-lt) !important} .bottom-nav .nav-book-btn{display:flex !important;align-items:center !important;justify-content:center !important; padding:0 !important;line-height:0 !important} .bottom-nav .nav-book-btn > *{display:block !important;margin:0 !important;flex:0 0 auto !important; width:24px !important;height:24px !important;color:#2A2418 !important;stroke:#2A2418 !important; transform:translateY(var(--fab-nudge,0px))} .nav-book-icon{color:#2A2418 !important;font-size:22px !important;display:flex !important; align-items:center;justify-content:center;line-height:1} .bottom-nav .nav-book-btn > i{width:auto !important;height:auto !important;font-size:22px !important;line-height:1 !important} /* ══ DRAWER — matches nav when --gx-drawer-dark:1 (Rich/Jewel) ═ */ html.gold-2 .dw-drawer,html.gold-3 .dw-drawer, :root:not(.gold-1) .dw-drawer{background:linear-gradient(180deg,#1F2C28,#16211D)} html.gold-1 .dw-drawer{background:#fff} :root:not(.gold-1) .dw-head{background:linear-gradient(160deg,var(--glass-a),var(--glass-b)); border-bottom:1px solid rgba(201,165,92,.28)} html.gold-1 .dw-head{background:var(--green-deep);border-bottom:none} :root:not(.gold-1) .dw-head-text span{color:var(--g-lite)} :root:not(.gold-1) .dw-link{color:var(--nav-ink);border-left-color:transparent} :root:not(.gold-1) .dw-link svg{stroke:var(--nav-gold)} :root:not(.gold-1) .dw-link:hover{background:rgba(201,165,92,.12);color:var(--g-lite);border-left-color:var(--g-core)} :root:not(.gold-1) .dw-link:hover svg{stroke:var(--g-lite)} :root:not(.gold-1) .dw-section{color:var(--g-core);opacity:.8} :root:not(.gold-1) .dw-link-sm{color:rgba(237,231,216,.6)} :root:not(.gold-1) .dw-link-sm:hover{color:var(--g-lite)} :root:not(.gold-1) .dw-footer{color:rgba(237,231,216,.5);border-top:1px solid rgba(201,165,92,.18)} :root:not(.gold-1) .dw-cta{background:linear-gradient(135deg,var(--nav-gold-lt),var(--nav-gold)) !important; color:#2A2418 !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 14px rgba(120,90,30,.35)} :root:not(.gold-1) .dw-cta svg{stroke:#2A2418 !important} /* Refined keeps the original light drawer */ html.gold-1 .dw-link{color:#2d3748} html.gold-1 .dw-link svg{stroke:#718096} html.gold-1 .dw-link:hover{background:#f0fff4;color:#1B4332;border-left-color:#74C69D} /* ══ HAMBURGER ═════════════════════════════════════════════════ */ .hamburger-btn{width:38px;height:38px; background:var(--header-ham-bg,rgba(27,67,50,.08)) !important; border:1.5px solid var(--header-ham-border,rgba(27,67,50,.2)) !important; border-radius:10px;gap:4px;box-shadow:0 1px 2px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.4); transition:transform .12s var(--spring),background .2s,box-shadow .12s !important} .hamburger-btn span{width:19px;height:2px;border-radius:2px; background:var(--header-ham-line,#1B4332) !important; transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .2s,width .22s} .hamburger-btn span:nth-child(2){width:15px;align-self:flex-end;margin-right:9.5px} .hamburger-btn:active{transform:scale(.9) !important;box-shadow:inset 0 2px 5px rgba(0,0,0,.2) !important} /* ══ TACTILE PRESS ═════════════════════════════════════════════ */ .btn-primary,.btn-outline,.btn-white,.btn-green,.btn-submit,.btn-add-cart, .cart-checkout-btn,.coupon-pill-btn,.header-call,.hamburger-btn,.drawer-close, .qty-btn,.nav-book-btn,.service-arrow,.product-btn,.btn-buy-now, .drawer-link-cta,[role="button"]{ transition:transform .12s var(--spring),box-shadow .12s ease,filter .12s ease !important;will-change:transform} .btn-green:active,.btn-white:active,.btn-outline:active,.btn-add-cart:active,.cart-checkout-btn:active, .coupon-pill-btn:active,.drawer-link-cta:active,.product-btn:active,.btn-buy-now:active,[role="button"]:active{ transform:translateY(2px) scale(.97) !important; box-shadow:0 1px 3px rgba(0,0,0,.22),inset 0 2px 5px rgba(0,0,0,.16) !important;filter:brightness(.96)} .btn-primary:active,.header-call:active{ transform:translateY(2px) scale(.97) !important;color:#2A2418 !important; box-shadow:inset 0 3px 7px rgba(120,90,30,.4),0 1px 3px rgba(120,90,30,.3) !important; filter:brightness(.95)} .btn-submit:active{transform:translateY(3px) scale(.985) !important; box-shadow:0 2px 5px rgba(0,0,0,.2),inset 0 3px 7px rgba(0,0,0,.18) !important} .qty-btn:active,.drawer-close:active{transform:translateY(1px) scale(.9) !important; box-shadow:inset 0 3px 6px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.15) !important} .service-card:active,.product-card:active,.blog-card:active, .contact-card:active,.next-step-card:active,.therapy-list-card:active{ transition:transform .1s ease,box-shadow .1s ease !important;transform:translateY(1px) scale(.985) !important; box-shadow:0 1px 4px rgba(0,0,0,.1),inset 0 1px 3px rgba(0,0,0,.06) !important} .drawer-link:active,.dw-link:active{transform:translateX(4px) scale(.99); transition:transform .1s ease,background .1s ease} .service-arrow:active{transform:translateY(1px) scale(.94) !important;box-shadow:inset 0 2px 4px rgba(0,0,0,.14) !important} /* ══ HOVER (fine-pointer only) ═════════════════════════════════ */ @media (hover:hover) and (pointer:fine){ .btn-primary:hover,.btn-green:hover,.btn-submit:hover,.header-call:hover, .cart-checkout-btn:hover,.btn-add-cart:hover,.btn-buy-now:hover, .dw-cta:hover,.drawer-link-cta:hover{ background:linear-gradient(180deg,var(--g-glow) 0%,var(--g-lite) 55%,var(--g-core) 100%) !important; transform:translateY(-1px);filter:brightness(1.03)} .btn-primary:hover::after,.btn-green:hover::after,.btn-submit:hover::after, .header-call:hover::after,.cart-checkout-btn:hover::after,.btn-add-cart:hover::after, .btn-buy-now:hover::after,.dw-cta:hover::after,.drawer-link-cta:hover::after{left:130%} .service-card:hover,.product-card:hover,.blog-card:hover,.contact-card:hover, .value-card:hover,.next-step-card:hover,.therapy-list-card:hover{ box-shadow:var(--elev-3),var(--top-light);border-color:var(--gx-hover-border)} .hamburger-btn:hover{background:var(--header-ham-border,rgba(27,67,50,.16)) !important; box-shadow:0 2px 6px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.4)} .hamburger-btn:hover span:nth-child(2){width:19px;margin-right:0} .nav-item:hover:not(.nav-book){background:rgba(201,165,92,.12)} .nav-item:hover:not(.nav-book) .nav-icon{color:var(--nav-gold-lt) !important} } @media (hover:none){ .btn-primary:hover,.header-call:hover{ background:linear-gradient(180deg,var(--g-lite) 0%,var(--g-core) 55%,var(--g-deep) 100%) !important;transform:none} } /* ══ POLISH ════════════════════════════════════════════════════ */ a:focus-visible,button:focus-visible,.form-input:focus-visible, .form-select:focus-visible,.form-textarea:focus-visible{ outline:2px solid var(--green-sage);outline-offset:2px;border-radius:6px} html{-webkit-tap-highlight-color:transparent} a,button,.nav-item,.btn-primary,.btn-outline,.btn-white,.btn-green,.btn-submit,.header-call, .hamburger-btn,.service-card,.product-card,.blog-card,.contact-card,.next-step-card, .therapy-list-card,.qty-btn,.btn-add-cart,.cart-checkout-btn,[role="button"]{ -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none} .nav-item,.bottom-nav span,.btn-primary,.btn-outline,.btn-white,.btn-green,.btn-submit, .header-call,.service-arrow,.hamburger-btn,.dw-link,button:not(.coupon-pill-input){ user-select:none;-webkit-user-select:none} /* ══════════════════════════════════════════════════════════════ PAGE-BY-PAGE ELEVATION — every remaining flat element (secondary heroes, headings, chips, testimonials, ticker, coupon, success screen, floats). All read the mode dial. ══════════════════════════════════════════════════════════════ */ /* ── secondary page heroes: same deep-glass + gold edge as home ─ */ .about-hero,.contact-hero,.book-hero,.service-detail-hero{ position:relative;overflow:hidden; background:linear-gradient(160deg,var(--green-deep) 0%,var(--green-mid) 60%,#1B4332 100%); box-shadow:inset 0 -22px 40px -24px rgba(0,0,0,.35)} .about-hero>*,.contact-hero>*,.book-hero>*,.service-detail-hero>*{position:relative;z-index:2} .about-hero::after,.contact-hero::after,.book-hero::after,.service-detail-hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3; background:linear-gradient(90deg,transparent,var(--g-core) 22%,var(--g-lite) 50%,var(--g-core) 78%,transparent); opacity:var(--gx-hero-edge)} /* gold corner-mist (reuse ::before so we don't clash w/ existing ::after art) */ .about-hero::before{background:radial-gradient(circle,rgba(228,201,131,calc(var(--gx-hero-vignette)+.06)) 0%,transparent 70%) !important} .contact-hero::before,.book-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(120% 90% at 100% 0%,rgba(228,201,131,var(--gx-hero-vignette)),transparent 55%)} .service-detail-hero .service-price-badge{position:relative;z-index:2} /* ── section titles: gilded em, subtle heading weight ─────────── */ .section-title em,.about-section h2 em{color:var(--gx-em)} .section-eyebrow{color:var(--g-deep)} .about-section h2,.legal-content h2{position:relative;padding-bottom:8px} .about-section h2::after,.legal-content h2::after{content:"";position:absolute;left:0;bottom:0; width:34px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--g-core),transparent);opacity:calc(.4 + var(--gx-hair-op)*.6)} /* ── testimonials: gold hairline card + gilded avatar ring ────── */ .testimonial-avatar{border:2px solid var(--green-sage)} html.gold-2 .testimonial-avatar,html.gold-3 .testimonial-avatar{ border:2px solid transparent; background:linear-gradient(135deg,var(--green-light),var(--green-sage)) padding-box, linear-gradient(135deg,var(--g-lite),var(--g-core)) border-box} .scroll-dot.active{background:var(--g-core)} /* ── therapy category labels & all chips: metal ring ──────────── */ .therapy-category-label.perm{ background:linear-gradient(180deg,#EAF7EF,var(--green-light)); box-shadow:inset 0 0 0 1px rgba(196,160,82,calc(var(--gx-hair-op)*.6))} .therapy-category-label.temp{ background:linear-gradient(180deg,#FFF8E4,#FFF3CD); box-shadow:inset 0 0 0 1px rgba(196,160,82,calc(var(--gx-hair-op)*.7))} .condition-chip{ background:linear-gradient(180deg,#EFF9F2,var(--green-light)); box-shadow:inset 0 0 0 1px rgba(196,160,82,calc(var(--gx-hair-op)*.5))} /* concern/age pills: the visible element is the inner span (border-radius:50px). Never style the .concern-chip wrapper — that box shows behind the rounded pill. */ .concern-chip{background:transparent !important;box-shadow:none !important;border:none !important} .concern-chip span{ border-color:rgba(196,160,82,.5) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px rgba(120,90,30,.10)} .concern-chip input:checked + span{ background:linear-gradient(180deg,var(--g-lite) 0%,var(--g-core) 55%,var(--g-deep) 100%) !important; border-color:var(--g-core) !important;color:#2A2418 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(120,90,30,.3), 0 3px 10px rgba(120,90,30,.3) !important} .concern-chip span:hover{border-color:var(--g-core) !important} /* ── back button: gold, tactile ───────────────────────────────── */ .back-btn{color:var(--g-lite)} .back-btn:active{transform:translateX(-3px);transition:transform .12s var(--spring)} /* ── hours strip: warm gold-earth band + hairline ─────────────── */ .hours-strip{background:linear-gradient(180deg,#F6ECDD,var(--earth-light))} /* ── ticker: gold separators + top hairline ───────────────────── */ .ticker-wrap{ background:linear-gradient(180deg,#1F3A2C,var(--green-deep)); border-bottom:1px solid rgba(201,165,92,.28); box-shadow:inset 0 -1px 0 rgba(201,165,92,.15)} .ticker-sep{color:var(--g-lite);opacity:.85} /* ── site notice: keep semantics, add gold hairline warmth ────── */ .site-notice{box-shadow:inset 0 0 0 1px rgba(196,160,82,calc(var(--gx-hair-op)*.35))} /* ── coupon states: gold applied-pill glow ────────────────────── */ .coupon-pill.coupon-applied{ border-color:var(--g-core) !important; box-shadow:inset 0 1px 2px rgba(27,67,50,.06),0 0 0 3px rgba(196,160,82,.15)} .coupon-success{color:var(--g-deep)} .coupon-pill-icon{filter:drop-shadow(0 1px 1px rgba(120,90,30,.2))} /* ── success / booked screen: gilded check medallion ──────────── */ .booked-check,.booked-tick-wrap{ box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 16px rgba(27,67,50,.14)} html.gold-2 .booked-check,html.gold-3 .booked-check, html.gold-2 .booked-tick-wrap,html.gold-3 .booked-tick-wrap{ background:linear-gradient(145deg,#FBF3DC,#EAD9A8); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 6px rgba(120,90,30,.15), 0 8px 20px rgba(120,90,30,.22),0 0 0 4px rgba(196,160,82,.15)} .booked-title,.booked-wrap h2{color:var(--green-deep)} .booked-title em,.booked-wrap h2 em{color:var(--gx-em)} /* ── cart bar: deep-glass instead of flat green (matches nav) ─── */ .cart-bar{ background:linear-gradient(160deg,var(--glass-a),var(--glass-b)); -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%); border:1px solid rgba(201,165,92,.28); box-shadow:0 12px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12)} .cart-count-label,.cart-bar-items{color:var(--nav-ink)} /* ── blog post lead & cta: gold accent bar / glass cta ────────── */ .blog-post-lead{border-left:3px solid var(--green-sage)} html.gold-2 .blog-post-lead,html.gold-3 .blog-post-lead{border-left:3px solid var(--g-core)} .blog-post-content blockquote{border-left:3px solid var(--green-sage)} html.gold-2 .blog-post-content blockquote,html.gold-3 .blog-post-content blockquote{border-left:3px solid var(--g-core)} .blog-post-cta{ background:linear-gradient(160deg,var(--glass-a),var(--glass-b)); border:1px solid rgba(201,165,92,.3); box-shadow:var(--elev-3),inset 0 1px 0 rgba(255,255,255,.12)} .blog-post-cta h3{color:#fff} /* ── expert card: gilded photo ring (box-shadow works on img) ─── */ .expert-photo{border:3px solid var(--green-sage)} html.gold-2 .expert-photo,html.gold-3 .expert-photo{border:3px solid var(--g-core); box-shadow:0 0 0 1px rgba(120,90,30,.25),0 4px 12px rgba(120,90,30,.2)} /* ══ CONTRAST — legibility over decoration (WCAG AA) ═══════════ * * Base greys sat at ~3.7–4.0 (below 4.5). Darkened globally. */ :root{ --grey-mid:#556070; /* was #718096 — now 5.9+ on all light surfaces */ --header-sub:#4C6357; /* brand-sub: was 4.2 → ~5.5 on header-bg */ } /* muted-grey helper texts explicitly re-pinned (some set literal color) */ .section-desc,.service-card p,.product-desc,.product-detail-desc,.expert-bio, .expert-qual,.expert-exp,.testimonial-loc,.blog-card-excerpt,.blog-card-meta, .blog-post-meta,.book-note,.booking-row-label,.contact-card-label, .next-steps-label,.stat-label,.therapy-list-body p,.legal-content p, .drawer-link-sm,.checkout-label,.product-qty-label,.product-unit-price{ color:#556070} /* 'Select all that apply' subtitle & similar muted subs */ .section-eyebrow{color:var(--g-deep)} /* g-deep = 3.7 large-text OK; eyebrows are bold 10px caps → acceptable */ /* back button on green hero: lighten gold so it clears 4.5 */ .back-btn{color:#EED9A0} /* placeholders: readable (3.6) without masquerading as entered text */ .form-input::placeholder,.form-textarea::placeholder, .phone-number::placeholder,.coupon-pill-input::placeholder{color:#7C8996} /* out-of-stock red bumped past 4.5 */ .product-out{color:#CC2222} /* whatsapp/site-notice text unaffected (already pass) */ /* ══ REDUCED MOTION ════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .page-content{animation:none} .dw-reveal,.dw-stagger>*{opacity:1!important;transform:none!important;transition:none!important} .dw-orb{display:none} .dw-img{opacity:1;filter:none} .hero-badge::after{display:none;animation:none} .hero.dw-hero-photo::after{animation:none;background-size:auto,auto,cover} .nav-item,.nav-item .nav-icon,.nav-book-btn{transition:background .2s !important} .btn-primary:active,.btn-green:active,.btn-white:active,.btn-outline:active,.btn-submit:active, .btn-add-cart:active,.cart-checkout-btn:active,.coupon-pill-btn:active,.header-call:active, .qty-btn:active,.nav-book-btn:active,.hamburger-btn:active,.drawer-close:active, .service-card:active,.product-card:active,.blog-card:active,.contact-card:active, .next-step-card:active,.therapy-list-card:active{transform:none !important;filter:brightness(.95)} }