:root{ --green:#07140f; --green-2:#10231b; --green-3:#183326; --gold:#b88a3d; --gold-2:#d7b56c; --cream:#f5eddf; --soft:#fffaf2; --ink:#29251f; --muted:#766858; --line:rgba(184,138,61,.25); --shadow:0 24px 70px rgba(7,20,15,.14); --radius:28px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:var(--soft);color:var(--ink);overflow-x:hidden} a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(1180px,92%);margin:auto}.serif{font-family:'Cormorant Garamond',serif}.tag{letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-size:12px;font-weight:800}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:999px;border:1px solid transparent;font-weight:800;cursor:pointer;transition:.25s ease}.btn.gold{background:var(--gold);color:var(--green);box-shadow:0 16px 40px rgba(184,138,61,.3)}.btn.gold:hover{background:var(--gold-2);transform:translateY(-2px)}.btn.ghost{border-color:rgba(255,255,255,.35);color:#fff}.btn.ghost:hover{background:#fff;color:var(--green)}.btn.dark{background:var(--green);color:#fff}.section{padding:92px 0}.section.cream{background:var(--cream)}.section.dark{background:var(--green);color:#fff}.heading{max-width:780px;margin:0 auto 48px;text-align:center}.heading h2{font-family:'Cormorant Garamond',serif;font-size:clamp(40px,5vw,72px);line-height:.98;margin:12px 0 14px;color:var(--green)}.dark .heading h2{color:#fff}.heading p{color:var(--muted);font-size:17px;line-height:1.8}.dark .heading p{color:rgba(255,255,255,.72)} .header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(7,20,15,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(184,138,61,.18)}.nav{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:#fff}.mark{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-size:27px;color:var(--gold)}.brand strong{font-family:'Cormorant Garamond',serif;font-size:29px;line-height:1}.brand small{display:block;color:rgba(255,255,255,.66);font-size:10px;letter-spacing:3px}.links{display:flex;gap:24px;align-items:center;color:rgba(255,255,255,.82);font-size:14px;font-weight:700}.links a:hover{color:var(--gold-2)}.menuBtn{display:none;background:transparent;border:0;color:#fff;font-size:26px} .hero{min-height:100vh;display:flex;align-items:center;padding-top:82px;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 22%,rgba(184,138,61,.25),transparent 30%),linear-gradient(105deg,rgba(7,20,15,.98) 0%,rgba(7,20,15,.88) 48%,rgba(7,20,15,.25) 100%),url('/assets/hero-triptych.png') center/cover}.hero:after{content:"";position:absolute;inset:auto 0 0;height:190px;background:linear-gradient(0deg,var(--soft),transparent)}.heroGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;position:relative;z-index:2}.hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(58px,8vw,112px);line-height:.88;color:#fff;margin:18px 0 24px;letter-spacing:-2px}.hero p{font-size:18px;line-height:1.9;color:rgba(255,255,255,.78);max-width:620px}.heroCards{display:grid;grid-template-columns:1fr 1fr;gap:18px}.glass{background:rgba(255,255,255,.08);border:1px solid rgba(184,138,61,.22);border-radius:30px;padding:24px;backdrop-filter:blur(14px);color:#fff;box-shadow:0 25px 80px rgba(0,0,0,.22)}.glass.big{grid-column:span 2;min-height:290px;background:linear-gradient(rgba(7,20,15,.25),rgba(7,20,15,.5)),url('/assets/hero-triptych.png') center/cover}.glass h3{font-family:'Cormorant Garamond',serif;font-size:32px;margin:0 0 12px;color:#fff}.glass p{font-size:14px;line-height:1.7;margin:0;color:rgba(255,255,255,.72)} .cardGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.serviceCard,.branchCard,.productCard,.blogCard{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:.25s ease}.serviceCard:hover,.branchCard:hover,.productCard:hover,.blogCard:hover{transform:translateY(-7px);box-shadow:0 34px 80px rgba(7,20,15,.18)}.imagePanel{height:240px;background:linear-gradient(145deg,rgba(7,20,15,.1),rgba(184,138,61,.12)),var(--img,linear-gradient(135deg,#13291f,#c7aa76));background-size:cover;background-position:center;position:relative}.imagePanel:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,20,15,.55),transparent)}.cardBody{padding:28px}.cardBody h3{font-family:'Cormorant Garamond',serif;font-size:34px;line-height:1;margin:0 0 12px;color:var(--green)}.cardBody p{color:var(--muted);line-height:1.75;margin:0 0 22px}.mini{font-size:13px;color:var(--gold);font-weight:800;letter-spacing:2px;text-transform:uppercase}.exclusive .serviceCard{background:linear-gradient(180deg,#fffaf2,#f4ead9)}.serviceList{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.servicePill{padding:20px;border-radius:22px;border:1px solid var(--line);background:#fff;box-shadow:0 12px 35px rgba(7,20,15,.06);cursor:pointer}.servicePill:hover{border-color:var(--gold);transform:translateY(-3px)}.servicePill strong{display:block;color:var(--green);margin-bottom:8px}.servicePill span{font-size:13px;color:var(--muted);line-height:1.55}.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.panel{background:#fffaf2;border:1px solid var(--line);border-radius:34px;padding:46px;box-shadow:var(--shadow)}.panel h2{font-family:'Cormorant Garamond',serif;font-size:56px;line-height:1;margin:10px 0 16px;color:var(--green)}.panel p{line-height:1.85;color:var(--muted)}.photoBlock{min-height:520px;border-radius:34px;border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(180deg,rgba(7,20,15,.04),rgba(7,20,15,.26)),url('https://images.unsplash.com/photo-1633681926022-84c23e8cb2d6?auto=format&fit=crop&w=1200&q=82') center/cover}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}.step{background:#fffaf2;border:1px solid var(--line);border-radius:24px;padding:30px}.step:before{counter-increment:s;content:'0'counter(s);color:var(--gold);font-weight:900;font-size:34px}.step h3{font-family:'Cormorant Garamond',serif;font-size:30px;margin:14px 0 8px;color:var(--green)}.step p{color:var(--muted);line-height:1.7}.bookingBox{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;background:linear-gradient(135deg,var(--green),var(--green-2));border:1px solid rgba(184,138,61,.28);border-radius:36px;padding:42px;box-shadow:0 35px 90px rgba(7,20,15,.25);color:#fff}.bookingBox h2{font-family:'Cormorant Garamond',serif;font-size:58px;line-height:.98;margin:10px 0 16px}.bookingBox p{color:rgba(255,255,255,.72);line-height:1.8}.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form .full{grid-column:span 2}.form input,.form select,.form textarea{width:100%;border:1px solid rgba(184,138,61,.28);background:rgba(255,255,255,.08);color:#fff;border-radius:16px;padding:14px 16px;outline:none}.form option{color:#111}.form textarea{min-height:110px}.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}.gallery div{min-height:230px;border-radius:28px;background:var(--img);background-size:cover;background-position:center;box-shadow:var(--shadow)}.gallery div:first-child{grid-row:span 2}.testimonial{background:#fffaf2;border:1px solid var(--line);border-radius:28px;padding:34px;box-shadow:var(--shadow)}.testimonial p{line-height:1.8;color:var(--muted);font-size:17px}.testimonial strong{color:var(--green)}.faq{max-width:900px;margin:auto;display:grid;gap:14px}.faq details{background:#fffaf2;border:1px solid var(--line);border-radius:22px;padding:22px 26px}.faq summary{font-weight:900;color:var(--green);cursor:pointer}.faq p{color:var(--muted);line-height:1.75}.footer{background:#040c09;color:#fff;padding:70px 0 30px}.footerGrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:34px}.footer h3{font-family:'Cormorant Garamond',serif;font-size:34px;color:var(--gold-2);margin:0 0 16px}.footer p,.footer a{color:rgba(255,255,255,.68);line-height:1.8;font-size:14px}.footer a{display:block;margin:7px 0}.copy{border-top:1px solid rgba(255,255,255,.08);margin-top:40px;padding-top:22px;color:rgba(255,255,255,.48);font-size:13px}.pageHero{padding:170px 0 90px;background:radial-gradient(circle at 80% 15%,rgba(184,138,61,.2),transparent 28%),linear-gradient(135deg,var(--green),var(--green-2));color:#fff;position:relative;overflow:hidden}.pageHero.pageHeroImage{background:radial-gradient(circle at 78% 18%,rgba(184,138,61,.26),transparent 28%),linear-gradient(90deg,rgba(7,20,15,.90) 0%,rgba(7,20,15,.78) 38%,rgba(7,20,15,.52) 60%,rgba(7,20,15,.70) 100%),var(--page-bg) center/cover}.pageHero.pageHeroImage:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,20,15,.22),rgba(7,20,15,.08))}.pageHero .container{position:relative;z-index:1}.pageHero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(52px,7vw,96px);line-height:.9;margin:14px 0}.pageHero p{max-width:720px;color:rgba(255,255,255,.75);line-height:1.8}.branchServices{display:grid;grid-template-columns:280px 1fr;gap:30px}.sideNav{position:sticky;top:100px;align-self:start;background:#fffaf2;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow)}.sideNav button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:12px 14px;border-radius:14px;font-weight:800;color:var(--green);cursor:pointer}.sideNav button.active,.sideNav button:hover{background:var(--cream);color:var(--gold)}.priceGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.priceCard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px}.priceCard h4{font-size:20px;margin:0 0 6px;color:var(--green)}.priceCard p{color:var(--muted);line-height:1.65;margin:0 0 14px}.badge{display:inline-block;background:var(--cream);color:var(--gold);border-radius:999px;padding:7px 12px;font-weight:900;font-size:12px}.modalWrap{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:100;display:grid;place-items:center;padding:18px}.modal{width:min(760px,96vw);background:#fffaf2;border:1px solid var(--line);border-radius:30px;padding:32px;box-shadow:0 40px 100px rgba(0,0,0,.35);position:relative}.modal h2{font-family:'Cormorant Garamond',serif;font-size:46px;margin:0 0 12px;color:var(--green)}.close{position:absolute;top:18px;right:18px;width:42px;height:42px;border:0;border-radius:50%;background:var(--green);color:#fff;font-size:22px;cursor:pointer}.branchSelect{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}.branchSelect a{display:block;padding:24px;border-radius:22px;background:#fff;border:1px solid var(--line)}.branchSelect a:hover{background:var(--green);color:#fff}.branchSelect strong{display:block;font-family:'Cormorant Garamond',serif;font-size:28px}.branchSelect span{font-size:13px;color:var(--muted)}.branchSelect a:hover span{color:rgba(255,255,255,.7)} @media(max-width:980px){.links{display:none}.menuBtn{display:block}.links.open{position:absolute;top:82px;left:0;right:0;background:var(--green);display:grid;padding:24px}.heroGrid,.split,.bookingBox,.branchServices{grid-template-columns:1fr}.cardGrid{grid-template-columns:1fr 1fr}.serviceList,.steps{grid-template-columns:1fr 1fr}.footerGrid{grid-template-columns:1fr 1fr}.heroCards{display:none}.gallery{grid-template-columns:1fr 1fr}.sideNav{position:relative;top:0}.priceGrid{grid-template-columns:1fr}} @media(max-width:640px){.section{padding:64px 0}.nav{height:72px}.hero{padding-top:72px}.cardGrid,.serviceList,.steps,.footerGrid,.gallery,.form,.branchSelect{grid-template-columns:1fr}.form .full{grid-column:auto}.panel,.bookingBox{padding:28px}.panel h2,.bookingBox h2{font-size:42px}.imagePanel{height:210px}.pageHero{padding:135px 0 70px}.btn{width:100%}} /* Updated home-page structure */ .aboutSection{background:linear-gradient(180deg,var(--soft),#f3eadc)} .aboutPanel{position:relative;overflow:hidden} .aboutPanel:before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:rgba(184,138,61,.12)} .aboutStats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px} .aboutStats span{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fff;color:var(--muted);line-height:1.3} .aboutStats b{display:block;color:var(--green);font-size:24px;margin-bottom:3px} .aboutPhoto{min-height:560px;border-radius:38px;border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(180deg,rgba(7,20,15,.08),rgba(7,20,15,.32)),url('https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=1400&q=82') center/cover;position:relative;overflow:hidden;transition:transform .45s ease,box-shadow .45s ease,border-color .45s ease,filter .45s ease}.aboutPhotoLuxury{background:linear-gradient(180deg,rgba(7,20,15,.10),rgba(7,20,15,.34)),url('/assets/about-mona-j-luxury.png') center center/cover}.aboutPhotoLuxury:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 78% 22%,rgba(215,181,108,.20),transparent 26%),linear-gradient(0deg,rgba(7,20,15,.08),rgba(7,20,15,0) 30%);transition:opacity .45s ease,background .45s ease}.aboutPhotoLuxury:after{content:'';position:absolute;inset:-1px;border-radius:38px;pointer-events:none;box-shadow:0 0 0 rgba(215,181,108,0);opacity:0;transition:opacity .45s ease,box-shadow .45s ease}.aboutPhotoLuxury:hover,.aboutPhotoLuxury:focus-within{transform:translateY(-6px) scale(1.01);border-color:rgba(215,181,108,.45);box-shadow:0 30px 80px rgba(7,20,15,.18),0 0 0 1px rgba(215,181,108,.18),0 0 40px rgba(215,181,108,.18)}.aboutPhotoLuxury:hover:before,.aboutPhotoLuxury:focus-within:before{background:radial-gradient(circle at 78% 22%,rgba(215,181,108,.36),transparent 28%),linear-gradient(0deg,rgba(7,20,15,.12),rgba(7,20,15,0) 34%)}.aboutPhotoLuxury:hover:after,.aboutPhotoLuxury:focus-within:after{opacity:1;box-shadow:0 0 24px rgba(215,181,108,.38),0 0 68px rgba(215,181,108,.18)} .floatingCard{position:absolute;left:28px;bottom:28px;background:rgba(7,20,15,.82);backdrop-filter:blur(14px);border:1px solid rgba(184,138,61,.38);border-radius:24px;padding:22px 26px;color:#fff;box-shadow:0 24px 70px rgba(0,0,0,.22);z-index:1;transition:transform .45s ease,box-shadow .45s ease,border-color .45s ease}.aboutPhotoLuxury:hover .floatingCard,.aboutPhotoLuxury:focus-within .floatingCard{transform:translateY(-4px);border-color:rgba(215,181,108,.55);box-shadow:0 22px 54px rgba(0,0,0,.28),0 0 20px rgba(215,181,108,.18)} .floatingCard strong{display:block;font-family:'Cormorant Garamond',serif;color:var(--gold-2);font-size:36px;line-height:1} .floatingCard span{letter-spacing:3px;text-transform:uppercase;font-size:11px;color:rgba(255,255,255,.72)} .videoSection{background:linear-gradient(135deg,#07140f,#10231b);color:#fff;overflow:hidden} .videoSection .heading h2{color:#fff}.videoSection .heading p{color:rgba(255,255,255,.72)} .videoRail{width:100%;overflow:hidden;padding:0 0 10px}.videoTrack{display:flex;gap:20px;width:max-content;animation:mjScrollRight 42s linear infinite}.videoRail:hover .videoTrack{animation-play-state:paused} .reelCard{width:210px;height:360px;flex:0 0 auto;border-radius:28px;background:linear-gradient(145deg,#0f241b,#2e4939);position:relative;overflow:hidden;border:1px solid rgba(184,138,61,.28);box-shadow:0 28px 70px rgba(0,0,0,.28)} .reelCard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78}.reelFallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;background:radial-gradient(circle at 50% 20%,rgba(184,138,61,.22),transparent 34%),linear-gradient(180deg,rgba(7,20,15,.1),rgba(7,20,15,.62))} .reelFallback span{font-family:'Cormorant Garamond',serif;font-size:28px;line-height:1;color:#fff}.reelFallback small{margin-top:9px;color:var(--gold-2);letter-spacing:2px;text-transform:uppercase;font-weight:800;font-size:10px}.reelCard video:not([src])+.reelFallback{display:flex}.reelOverlay{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(0deg,rgba(7,20,15,.95),transparent);color:#fff}.reelOverlay strong{display:block;font-family:'Cormorant Garamond',serif;font-size:25px;line-height:1.05}.reelOverlay span{color:var(--gold-2);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase} @keyframes mjScrollRight{from{transform:translateX(-50%)}to{transform:translateX(0)}} .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px} @media(max-width:767px){.aboutStats{grid-template-columns:1fr}.aboutPhoto{min-height:390px}.reelCard{width:172px;height:298px}.videoTrack{gap:14px;animation-duration:34s}} /* Luxury header refinement */ .luxeHeader{background:linear-gradient(180deg,rgba(6,18,13,.88),rgba(6,18,13,.68));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid rgba(215,181,108,.22);box-shadow:0 18px 60px rgba(0,0,0,.18)} .luxeHeader:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(215,181,108,.72),transparent)} .luxeNav{height:90px;gap:22px}.luxeBrand{min-width:max-content}.luxeMark{width:48px;height:48px;background:radial-gradient(circle at 34% 22%,rgba(255,246,219,.22),transparent 34%),linear-gradient(145deg,rgba(184,138,61,.18),rgba(7,20,15,.72));border-color:rgba(215,181,108,.72);box-shadow:0 0 0 5px rgba(184,138,61,.08),0 14px 38px rgba(0,0,0,.22)} .luxeBrand strong{font-size:31px;letter-spacing:.3px}.luxeBrand small{color:rgba(215,181,108,.78)} .luxeLinks{gap:8px;background:rgba(255,250,242,.055);border:1px solid rgba(215,181,108,.18);border-radius:999px;padding:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} .navLink,.dropTrigger{height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border-radius:999px;color:rgba(255,255,255,.78);font-size:13px;font-weight:800;letter-spacing:.3px;border:0;background:transparent;cursor:pointer;transition:.25s ease;white-space:nowrap}.navLink:hover,.dropTrigger:hover{background:rgba(215,181,108,.13);color:var(--gold-2);transform:translateY(-1px)}.dropTrigger span{font-size:13px;color:var(--gold-2);transition:.25s ease}.navDrop{position:relative}.navDrop:hover .dropTrigger span{transform:rotate(180deg)} .dropMenu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(10px);width:285px;padding:12px;background:linear-gradient(180deg,#fffaf2,#f3eadc);border:1px solid rgba(184,138,61,.28);border-radius:24px;box-shadow:0 28px 75px rgba(0,0,0,.26);opacity:0;visibility:hidden;pointer-events:none;transition:.25s ease}.dropMenu:before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;background:#fffaf2;border-left:1px solid rgba(184,138,61,.26);border-top:1px solid rgba(184,138,61,.26);transform:translateX(-50%) rotate(45deg)}.navDrop:hover .dropMenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .dropMenu a{display:block;padding:15px 16px;border-radius:18px;color:var(--green);cursor:pointer;transition:.25s ease}.dropMenu a:hover{background:var(--green);color:#fff;transform:translateX(3px)}.dropMenu strong{display:block;font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1;color:inherit}.dropMenu small{display:block;margin-top:5px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.dropMenu a:hover small{color:rgba(255,255,255,.68)} .bookBtn{height:48px;display:inline-flex;align-items:center;gap:10px;padding:0 19px 0 24px;border-radius:999px;background:linear-gradient(135deg,#f4d88d,#b88a3d 58%,#8b6429);color:#06120d!important;border:1px solid rgba(255,238,184,.72);font-size:13px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 16px 40px rgba(184,138,61,.28),inset 0 1px 0 rgba(255,255,255,.45);transition:.25s ease;white-space:nowrap}.bookBtn i{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(7,20,15,.16);font-style:normal}.bookBtn:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 22px 54px rgba(184,138,61,.38),inset 0 1px 0 rgba(255,255,255,.55)} @media(max-width:1100px){.luxeLinks{gap:4px}.navLink,.dropTrigger{padding:0 10px}.bookBtn{padding:0 15px 0 18px;font-size:12px}.luxeBrand strong{font-size:27px}} @media(max-width:980px){.luxeNav{height:82px}.luxeLinks.open{border-radius:0;background:rgba(7,20,15,.98);border:0;border-top:1px solid rgba(215,181,108,.22);gap:8px}.luxeLinks.open .navLink,.luxeLinks.open .dropTrigger{justify-content:flex-start;width:100%;padding:0 16px}.navDrop{width:100%}.dropMenu{position:static;transform:none;width:100%;opacity:1;visibility:visible;pointer-events:auto;margin:8px 0 10px;background:rgba(255,250,242,.08);border-color:rgba(215,181,108,.18);box-shadow:none}.dropMenu:before{display:none}.dropMenu a{color:#fff}.dropMenu small{color:rgba(255,255,255,.55)}.bookBtn{width:100%;justify-content:center;margin-top:8px}.luxeMenuBtn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(215,181,108,.26);background:rgba(255,255,255,.05)}} @media(max-width:640px){.luxeNav{height:74px}.luxeMark{width:42px;height:42px}.luxeBrand strong{font-size:25px}.luxeBrand small{font-size:9px}.luxeLinks.open{top:74px}.bookBtn{height:50px}} /* Dropdown hover/click fix: keeps Services submenu open while moving cursor to submenu */ @media(min-width:981px){ .navDrop{position:relative;display:inline-flex;align-items:center;height:54px;} .navDrop::after{content:"";position:absolute;left:-26px;right:-26px;top:44px;height:28px;background:transparent;} .dropMenu{top:calc(100% - 2px);z-index:200;} .navDrop:hover .dropMenu,.navDrop:focus-within .dropMenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);} .navDrop:hover .dropTrigger span,.navDrop:focus-within .dropTrigger span{transform:rotate(180deg);} .dropMenu a{position:relative;z-index:2;} } @media(max-width:980px){ .navDrop{height:auto;display:block;} } /* Bridal page update */ .bridalHero{background:radial-gradient(circle at 76% 18%,rgba(215,181,108,.24),transparent 29%),linear-gradient(105deg,rgba(7,20,15,.94),rgba(7,20,15,.82)),url('https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=2200&q=82') center/cover;min-height:78vh;display:flex;align-items:center}.bridalHero h1{max-width:760px}.bridalShoot{background:linear-gradient(180deg,#fffaf2,#f4ead9)}.bridalShootGrid{align-items:stretch}.bridalShootPhoto{min-height:610px;border-radius:38px;border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden}.bridalShootPoster{background:url('/assets/bridal-shoot-poster.png') center/cover no-repeat;box-shadow:0 22px 60px rgba(7,20,15,.14), inset 0 1px 0 rgba(255,255,255,.28)}.bridalShootPoster:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,20,15,.05),rgba(7,20,15,.12));pointer-events:none}.shootBullets{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 28px}.shootBullets span{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;color:var(--green);font-size:13px;font-weight:800}.bridalCardGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.bridalServiceCard{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:.25s ease;cursor:pointer}.bridalServiceCard:hover{transform:translateY(-7px);box-shadow:0 34px 80px rgba(7,20,15,.18)}.bridalCardImg{height:245px;background:linear-gradient(145deg,rgba(7,20,15,.08),rgba(184,138,61,.12)),var(--img);background-size:cover;background-position:center;position:relative}.bridalCardImg:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,20,15,.52),transparent)}.bridalGallery{display:grid;grid-template-columns:1.35fr .9fr .9fr;grid-auto-rows:250px;gap:18px}.bridalGallery div{border-radius:30px;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--img);background-size:cover;background-position:center;position:relative;overflow:hidden}.bridalGallery div:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,20,15,.18),transparent 60%)}.bridalGallery div:first-child{grid-row:span 2}.bridalVideoTrack{animation-duration:36s}.bridalAboutCard{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:linear-gradient(135deg,var(--green),var(--green-2));border:1px solid rgba(184,138,61,.28);border-radius:34px;padding:34px;box-shadow:0 35px 90px rgba(7,20,15,.22)}.bridalAboutCard span{min-height:138px;border:1px solid rgba(215,181,108,.25);border-radius:24px;background:rgba(255,255,255,.06);display:flex;align-items:end;padding:20px;color:#fff;font-family:'Cormorant Garamond',serif;font-size:30px;line-height:1.05}.bookingModal .form{margin-top:22px}.bookingModal .form input,.bookingModal .form select,.bookingModal .form textarea{background:rgba(7,20,15,.06);color:var(--green);border-color:var(--line)}.bookingModal .form textarea{min-height:90px}.bookingModal .form .btn.gold{color:var(--green)} @media(max-width:980px){.bridalCardGrid{grid-template-columns:1fr 1fr}.bridalGallery{grid-template-columns:1fr 1fr}.bridalGallery div:first-child{grid-row:auto}.bridalShootPhoto{min-height:430px}.bridalAboutCard{grid-template-columns:1fr 1fr}} @media(max-width:640px){.bridalHero{min-height:70vh}.bridalCardGrid,.bridalGallery,.bridalAboutCard{grid-template-columns:1fr}.bridalGallery{grid-auto-rows:230px}.bridalAboutCard span{min-height:108px}.shootBullets{display:grid}.bridalShootPhoto{min-height:360px}} /* Real Mona J salon gallery update */ .salonGallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:18px} .salonGallery div{min-height:230px;border-radius:28px;background:var(--img);background-size:cover;background-position:center;box-shadow:var(--shadow);border:1px solid var(--line);position:relative;overflow:hidden;transition:.28s ease} .salonGallery div:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,20,15,.16),transparent 62%)} .salonGallery div:hover{transform:translateY(-5px);box-shadow:0 32px 80px rgba(7,20,15,.18)} .salonGallery div:nth-child(1),.salonGallery div:nth-child(7){grid-column:span 2;grid-row:span 2} .salonGallery div:nth-child(4),.salonGallery div:nth-child(10){grid-column:span 2} @media(max-width:980px){.salonGallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}.salonGallery div:nth-child(n){grid-column:auto;grid-row:auto}.salonGallery div:nth-child(1),.salonGallery div:nth-child(7){grid-row:span 2}} @media(max-width:640px){.salonGallery{grid-template-columns:1fr;grid-auto-rows:260px}.salonGallery div:nth-child(n){grid-row:auto;grid-column:auto}} /* Premium live hover effects for cards and sections */ .serviceCard, .branchCard, .productCard, .blogCard, .priceCard, .servicePill, .testimonial, .bridalServiceCard { position: relative; overflow: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease, background .45s ease; } .serviceCard::before, .branchCard::before, .productCard::before, .blogCard::before, .priceCard::before, .servicePill::before, .testimonial::before, .bridalServiceCard::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 25% 15%, rgba(215,181,108,.28), transparent 28%), linear-gradient(135deg, rgba(255,255,255,.10), transparent 45%); transition: opacity .45s ease; z-index: 1; } .serviceCard > *, .branchCard > *, .productCard > *, .blogCard > *, .priceCard > *, .servicePill > *, .testimonial > *, .bridalServiceCard > * { position: relative; z-index: 2; } .serviceCard:hover, .branchCard:hover, .productCard:hover, .blogCard:hover, .priceCard:hover, .servicePill:hover, .testimonial:hover, .bridalServiceCard:hover { transform: translateY(-9px) scale(1.015); border-color: rgba(215,181,108,.55); box-shadow: 0 34px 85px rgba(7,20,15,.18), 0 0 0 1px rgba(215,181,108,.16), 0 0 38px rgba(215,181,108,.18); } .serviceCard:hover::before, .branchCard:hover::before, .productCard:hover::before, .blogCard:hover::before, .priceCard:hover::before, .servicePill:hover::before, .testimonial:hover::before, .bridalServiceCard:hover::before { opacity: 1; } .serviceCard .imagePanel, .branchCard .imagePanel, .productCard .imagePanel, .blogCard .imagePanel, .bridalCardImg { transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .45s ease; } .serviceCard:hover .imagePanel, .branchCard:hover .imagePanel, .productCard:hover .imagePanel, .blogCard:hover .imagePanel, .bridalServiceCard:hover .bridalCardImg { transform: scale(1.065); filter: saturate(1.12) contrast(1.04); } .serviceCard .cardBody h3, .branchCard .cardBody h3, .productCard .cardBody h3, .blogCard .cardBody h3, .priceCard h4, .servicePill strong, .bridalServiceCard .cardBody h3 { transition: color .35s ease, transform .35s ease; } .serviceCard:hover .cardBody h3, .branchCard:hover .cardBody h3, .productCard:hover .cardBody h3, .blogCard:hover .cardBody h3, .priceCard:hover h4, .servicePill:hover strong, .bridalServiceCard:hover .cardBody h3 { color: var(--gold); transform: translateX(2px); } .exclusive .serviceCard:hover { background: linear-gradient(180deg, #fffaf2, #f0e2ca); } .salonGallery div, .gallery div, .bridalGallery div { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, filter .45s ease, border-color .45s ease; } .salonGallery div:hover, .gallery div:hover, .bridalGallery div:hover { transform: translateY(-7px) scale(1.018); border-color: rgba(215,181,108,.50); filter: saturate(1.08) contrast(1.04); box-shadow: 0 34px 85px rgba(7,20,15,.18), 0 0 38px rgba(215,181,108,.16); } .reelCard { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease; } .reelCard:hover { transform: translateY(-8px) scale(1.025); border-color: rgba(215,181,108,.55); box-shadow: 0 34px 90px rgba(0,0,0,.36), 0 0 38px rgba(215,181,108,.20); } .btn.gold, .btn.dark, .bookBtn { transition: transform .3s ease, box-shadow .3s ease, filter .3s ease, background .3s ease; } .btn.gold:hover, .bookBtn:hover { transform: translateY(-3px); filter: saturate(1.12); box-shadow: 0 22px 54px rgba(184,138,61,.38), 0 0 26px rgba(215,181,108,.22); } .btn.dark:hover { transform: translateY(-3px); box-shadow: 0 20px 45px rgba(7,20,15,.22), 0 0 24px rgba(215,181,108,.14); } @media (prefers-reduced-motion: reduce) { .serviceCard, .branchCard, .productCard, .blogCard, .priceCard, .servicePill, .testimonial, .bridalServiceCard, .salonGallery div, .gallery div, .bridalGallery div, .reelCard, .btn, .bookBtn, .imagePanel, .bridalCardImg { transition: none !important; } } /* Bridal card and cover image placement */ .exclusive .serviceCard:first-child .imagePanel{ background-position:center top; background-size:cover; } .bridalHero{ min-height:78vh; display:flex; align-items:center; } @media(max-width:640px){ .bridalHero{min-height:70vh} } /* Final bridal cover styling override */ .bridalHero.pageHeroImage{ min-height:78vh; display:flex; align-items:center; background-image: linear-gradient(90deg, rgba(7,20,15,.88) 0%, rgba(7,20,15,.76) 34%, rgba(7,20,15,.50) 58%, rgba(7,20,15,.28) 100%), radial-gradient(circle at 78% 16%, rgba(215,181,108,.22), transparent 26%), var(--page-bg) !important; background-position:center center, center center, center center !important; background-size:auto, auto, cover !important; background-repeat:no-repeat !important; } .bridalHero.pageHeroImage::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,14,11,.18) 0%, rgba(6,14,11,.10) 45%, rgba(6,14,11,.22) 100%); pointer-events:none; } .bridalHero .container{position:relative;z-index:2;} .bridalHeroContent{ max-width:640px; padding:34px 38px; border-radius:32px; background:linear-gradient(135deg, rgba(7,20,15,.42), rgba(7,20,15,.26)); border:1px solid rgba(215,181,108,.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow:0 24px 70px rgba(0,0,0,.22); } .bridalHero .tag, .bridalHero h1, .bridalHero p{ text-shadow:0 2px 18px rgba(0,0,0,.28); } .bridalHero h1{max-width:560px;} .bridalHero p{max-width:560px;color:rgba(255,255,255,.86);} .bridalHero .btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);} .bridalHero .btn.ghost:hover{background:rgba(255,255,255,.14);} @media(max-width:980px){ .bridalHero.pageHeroImage{background-position:center center, center center, 60% center !important; min-height:72vh;} .bridalHeroContent{max-width:560px;padding:28px 30px;} } @media(max-width:640px){ .bridalHero.pageHeroImage{min-height:68vh;background-position:center center, center center, 66% center !important;} .bridalHeroContent{padding:22px 20px;border-radius:24px;} .bridalHero h1{font-size:clamp(44px,12vw,70px);} } /* Real bridal gallery luxury masonry */ .bridalGallerySection{ background: radial-gradient(circle at 18% 12%, rgba(215,181,108,.16), transparent 28%), linear-gradient(180deg,#fffaf2 0%,#f4ead9 100%); } .bridalLuxuryGallery{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:135px; gap:18px; } .bridalGalleryItem{ position:relative; overflow:hidden; border-radius:30px; border:1px solid rgba(184,138,61,.24); background:var(--img) center/cover no-repeat; box-shadow:0 22px 60px rgba(7,20,15,.12); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease, filter .45s ease; } .bridalGalleryItem:before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg,rgba(7,20,15,.04),rgba(7,20,15,.26)), radial-gradient(circle at 78% 18%,rgba(215,181,108,.22),transparent 30%); opacity:.9; transition:opacity .45s ease; } .bridalGalleryItem:after{ content:""; position:absolute; inset:0; border-radius:30px; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); } .bridalGalleryItem span{ position:absolute; left:18px; bottom:16px; z-index:2; color:#fff; background:rgba(7,20,15,.62); border:1px solid rgba(215,181,108,.28); border-radius:999px; padding:9px 13px; font-size:11px; font-weight:900; letter-spacing:1.8px; text-transform:uppercase; backdrop-filter:blur(10px); opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease; } .bridalGalleryItem:hover{ transform:translateY(-8px) scale(1.018); border-color:rgba(215,181,108,.55); filter:saturate(1.08) contrast(1.04); box-shadow:0 34px 95px rgba(7,20,15,.20),0 0 38px rgba(215,181,108,.16); } .bridalGalleryItem:hover:before{opacity:.55} .bridalGalleryItem:hover span{opacity:1;transform:translateY(0)} .bridalGalleryItem:nth-child(1){grid-column:span 4;grid-row:span 4} .bridalGalleryItem:nth-child(2){grid-column:span 4;grid-row:span 3} .bridalGalleryItem:nth-child(3){grid-column:span 4;grid-row:span 3} .bridalGalleryItem:nth-child(4){grid-column:span 3;grid-row:span 3} .bridalGalleryItem:nth-child(5){grid-column:span 3;grid-row:span 3} .bridalGalleryItem:nth-child(6){grid-column:span 3;grid-row:span 3} .bridalGalleryItem:nth-child(7){grid-column:span 3;grid-row:span 3} .bridalGalleryItem:nth-child(8){grid-column:span 4;grid-row:span 4} .bridalGalleryItem:nth-child(9){grid-column:span 4;grid-row:span 4} .bridalGalleryItem:nth-child(10){grid-column:span 4;grid-row:span 4} .bridalGalleryItem:nth-child(n+11){grid-column:span 3;grid-row:span 3} @media(max-width:1100px){ .bridalLuxuryGallery{grid-template-columns:repeat(6,1fr);grid-auto-rows:120px} .bridalGalleryItem:nth-child(n){grid-column:span 3;grid-row:span 3} .bridalGalleryItem:nth-child(1),.bridalGalleryItem:nth-child(8){grid-column:span 6;grid-row:span 4} } @media(max-width:640px){ .bridalLuxuryGallery{grid-template-columns:1fr;grid-auto-rows:360px} .bridalGalleryItem:nth-child(n){grid-column:auto;grid-row:auto} } /* Final equal-size luxury bridal gallery layout */ .bridalGallerySection{ padding-top:95px; padding-bottom:95px; } .bridalLuxuryGallery{ max-width:1180px; margin:0 auto; display:grid !important; grid-template-columns:repeat(4,1fr) !important; grid-auto-rows:auto !important; gap:20px !important; } .bridalGalleryItem, .bridalGalleryItem:nth-child(n), .bridalGalleryItem:nth-child(1), .bridalGalleryItem:nth-child(8){ grid-column:auto !important; grid-row:auto !important; height:330px !important; border-radius:28px; background-size:cover !important; background-position:center top !important; } .bridalGalleryItem:before{ background:linear-gradient(180deg,rgba(7,20,15,.03),rgba(7,20,15,.18)); } .bridalGalleryItem:hover{ transform:translateY(-6px) scale(1.012); } @media(max-width:1100px){ .bridalLuxuryGallery{ grid-template-columns:repeat(3,1fr) !important; max-width:920px; } .bridalGalleryItem, .bridalGalleryItem:nth-child(n){ height:300px !important; } } @media(max-width:760px){ .bridalLuxuryGallery{ grid-template-columns:repeat(2,1fr) !important; gap:14px !important; } .bridalGalleryItem, .bridalGalleryItem:nth-child(n){ height:270px !important; border-radius:22px; } } @media(max-width:520px){ .bridalLuxuryGallery{ grid-template-columns:1fr !important; } .bridalGalleryItem, .bridalGalleryItem:nth-child(n){ height:360px !important; } } /* Bridal Moments image cards — keeps original dark section style */ .bridalPhotoReel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; display:block; opacity:.82; transition:transform .65s cubic-bezier(.2,.8,.2,1), filter .45s ease, opacity .45s ease; } .bridalPhotoReel .reelFallback{ display:none; } .bridalPhotoReel:before{ content:""; position:absolute; inset:0; z-index:1; background: radial-gradient(circle at 72% 16%,rgba(215,181,108,.18),transparent 30%), linear-gradient(180deg,rgba(7,20,15,.02),rgba(7,20,15,.40)); pointer-events:none; } .bridalPhotoReel .reelOverlay{ z-index:2; } .bridalPhotoReel:hover img{ transform:scale(1.06); filter:saturate(1.08) contrast(1.04); opacity:.92; } /* Fix Bridal Moments photo visibility on deep URLs */ .bridalPhotoReel{ background:linear-gradient(145deg,#0f241b,#2e4939); } .bridalPhotoReel img{ z-index:0; } .bridalPhotoReel:before{ z-index:1; } .bridalPhotoReel .reelOverlay{ z-index:2; } /* Full-width luxury homepage video section */ .homeWideVideoSection{ position:relative; width:100%; min-height:72vh; overflow:hidden; background:#07140f; margin:0; } .homeWideVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border:0; outline:0; } .homeWideVideoSection:before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg,rgba(7,20,15,.80) 0%,rgba(7,20,15,.46) 45%,rgba(7,20,15,.18) 100%), radial-gradient(circle at 70% 18%,rgba(215,181,108,.22),transparent 32%); } .homeWideVideoSection:after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 90px 120px rgba(7,20,15,.20), inset 0 -90px 120px rgba(7,20,15,.32); } .homeWideVideoOverlay{ position:relative; z-index:3; min-height:72vh; display:flex; flex-direction:column; justify-content:center; max-width:1240px; margin:0 auto; padding:90px 28px; color:#fff; } .homeWideVideoOverlay h2{ font-family:'Cormorant Garamond',serif; font-size:clamp(48px,6vw,92px); line-height:.92; max-width:720px; margin:16px 0 18px; color:#fff; text-shadow:0 8px 32px rgba(0,0,0,.36); } .homeWideVideoOverlay p{ max-width:560px; color:rgba(255,255,255,.82); font-size:18px; line-height:1.75; text-shadow:0 4px 20px rgba(0,0,0,.32); } @media(max-width:768px){ .homeWideVideoSection, .homeWideVideoOverlay{ min-height:58vh; } .homeWideVideoOverlay{ padding:70px 22px; } } /* Updated Mona J image logo */ .logoBrand{gap:0;align-items:center} .brandLogoImg{display:block;height:58px;width:auto;max-width:260px;object-fit:contain;filter:drop-shadow(0 6px 20px rgba(184,138,61,.22))} .footerBrand{display:inline-flex;align-items:center;margin-bottom:14px} .footerLogoImg{display:block;height:62px;width:auto;max-width:260px;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(184,138,61,.18))} @media(max-width:1100px){.brandLogoImg{height:52px;max-width:220px}.footerLogoImg{height:56px;max-width:220px}} @media(max-width:640px){.brandLogoImg{height:42px;max-width:180px}.footerLogoImg{height:48px;max-width:190px}} /* Branch service list update */ .priceGrid{ align-items:stretch; } .priceCard h4{ text-transform:none; } /* Branch services side tab cleanup */ .branchServices .sideNav button:last-child{ margin-bottom:0; } /* Real Beauty Stories video update */ .realBeautyStories .videoTrack{ gap:22px; } .realBeautyVideoCard{ width:292px; height:430px; flex:0 0 292px; background:#07140f; } .realBeautyVideoCard video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; opacity:.88; display:block; } .realBeautyVideoCard:before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(circle at 75% 14%,rgba(215,181,108,.16),transparent 28%), linear-gradient(180deg,rgba(7,20,15,.02),rgba(7,20,15,.40)); } .realBeautyVideoCard .reelOverlay{ z-index:2; } .realBeautyVideoCard:hover video{ transform:scale(1.045); filter:saturate(1.08) contrast(1.04); } @media(max-width:900px){ .realBeautyVideoCard{ width:252px; height:380px; flex-basis:252px; } } @media(max-width:560px){ .realBeautyVideoCard{ width:225px; height:340px; flex-basis:225px; } } /* Booking submission status */ .bookingStatus{ min-height:0; padding:0; font-size:14px; font-weight:700; } .bookingStatus.success{ margin-top:4px; padding:14px 16px; border-radius:16px; color:#0b2a1f; background:rgba(215,181,108,.18); border:1px solid rgba(184,138,61,.26); } .bookingStatus.error{ margin-top:4px; padding:14px 16px; border-radius:16px; color:#7a1f1f; background:rgba(160,45,45,.10); border:1px solid rgba(160,45,45,.20); } .bookingSubmitBtn:disabled{ opacity:.72; cursor:not-allowed; } /* Mona J luxury opening loader */ html.monaj-loading, html.monaj-loading body{ overflow:hidden; } .monajLoader{ position:fixed; inset:0; z-index:99999; display:grid; place-items:center; overflow:hidden; background:#06110d; color:#fff; } .monajLoaderVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; opacity:.62; transform:scale(1.035); filter:saturate(1.08) contrast(1.08); } .monajLoaderTint{ position:absolute; inset:0; background: radial-gradient(circle at 50% 45%,rgba(215,181,108,.25),transparent 22%), radial-gradient(circle at 78% 14%,rgba(184,138,61,.18),transparent 28%), linear-gradient(90deg,rgba(4,12,9,.92),rgba(7,20,15,.54),rgba(4,12,9,.92)), linear-gradient(180deg,rgba(4,12,9,.80),rgba(4,12,9,.38),rgba(4,12,9,.88)); } .monajLoaderContent{ position:relative; z-index:2; width:min(680px,88vw); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transform:translateY(8px); animation:monajLoaderRise 1.15s ease forwards; } .monajLoaderLogo{ position:relative; width:min(610px,84vw); height:190px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 18px 42px rgba(0,0,0,.42)); } .monajLoaderLogoBase, .monajLoaderLogoFill img{ width:100%; height:100%; object-fit:contain; } .monajLoaderLogoBase{ opacity:.20; filter:grayscale(1) brightness(2.2); } .monajLoaderLogoFill{ position:absolute; left:0; top:0; width:0%; height:100%; overflow:hidden; display:block; animation:monajLogoFill 3.75s cubic-bezier(.18,.84,.22,1) forwards; } .monajLoaderLogoFill img{ width:min(610px,84vw); max-width:none; filter:drop-shadow(0 0 24px rgba(215,181,108,.45)); } .monajLoaderLogo:after{ content:""; position:absolute; top:10%; bottom:10%; left:-20%; width:28%; background:linear-gradient(90deg,transparent,rgba(255,245,207,.72),transparent); transform:skewX(-18deg); opacity:0; animation:monajLogoShine 1.5s ease 2.15s forwards; } .monajLoaderLine{ width:0; height:1px; margin:18px 0 14px; background:linear-gradient(90deg,transparent,#d7b56c,transparent); box-shadow:0 0 18px rgba(215,181,108,.42); animation:monajLineGrow 3.5s ease .25s forwards; } .monajLoaderContent p{ margin:0; color:rgba(255,250,242,.78); font-size:12px; text-transform:uppercase; letter-spacing:5px; font-weight:800; animation:monajTextFade 1.2s ease 1s both; } .monajLoaderHide{ animation:monajLoaderOut .95s cubic-bezier(.76,0,.24,1) forwards; } .monajLoaderInstantHide{ opacity:0; pointer-events:none; } @keyframes monajLoaderRise{ from{opacity:0;transform:translateY(22px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} } @keyframes monajLogoFill{ 0%{width:0%} 72%{width:100%} 100%{width:100%} } @keyframes monajLogoShine{ 0%{left:-25%;opacity:0} 20%{opacity:.65} 100%{left:105%;opacity:0} } @keyframes monajLineGrow{ 0%{width:0;opacity:0} 35%{opacity:1} 100%{width:min(420px,62vw);opacity:1} } @keyframes monajTextFade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } @keyframes monajLoaderOut{ 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.035);visibility:hidden} } @media(max-width:640px){ .monajLoaderLogo{ width:88vw; height:130px; } .monajLoaderLogoFill img{ width:88vw; } .monajLoaderContent p{ font-size:10px; letter-spacing:3.4px; } } /* Mona J product imagery update */ .productIntroGrid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:48px; align-items:center; } .productIntroPanel{ position:relative; z-index:2; } .productMiniList{ display:grid; gap:14px; margin:26px 0 24px; } .productMiniItem{ display:grid; grid-template-columns:86px 1fr; gap:16px; align-items:center; padding:13px; border-radius:22px; background:rgba(255,255,255,.62); border:1px solid rgba(184,138,61,.18); box-shadow:0 14px 34px rgba(7,20,15,.06); transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease; } .productMiniItem:hover{ transform:translateY(-4px); border-color:rgba(184,138,61,.38); box-shadow:0 24px 54px rgba(7,20,15,.12); } .productMiniItem img{ width:86px; height:92px; object-fit:cover; object-position:center; border-radius:18px; box-shadow:0 10px 26px rgba(7,20,15,.12); } .productMiniItem h3{ font-family:'Cormorant Garamond',serif; font-size:26px; line-height:1; margin:4px 0 5px; color:var(--green); } .productMiniItem p{ margin:0; font-size:13px; line-height:1.5; } .productLuxuryVisual, .artProductMainImage{ position:relative; border-radius:38px; overflow:hidden; min-height:560px; border:1px solid rgba(184,138,61,.20); background:linear-gradient(135deg,#fbf4e8,#e8d6bc); box-shadow:0 38px 95px rgba(7,20,15,.16); } .productLuxuryVisual:before, .artProductMainImage:before{ content:""; position:absolute; inset:0; z-index:1; background: radial-gradient(circle at 76% 20%,rgba(215,181,108,.20),transparent 28%), linear-gradient(180deg,rgba(7,20,15,.02),rgba(7,20,15,.16)); pointer-events:none; } .productLuxuryVisual img, .artProductMainImage img{ width:100%; height:100%; min-height:560px; display:block; object-fit:cover; object-position:center; transition:transform .55s ease,filter .55s ease; } .productLuxuryVisual:hover img, .artProductMainImage:hover img{ transform:scale(1.035); filter:saturate(1.04) contrast(1.03); } .productVisualBadge{ position:absolute; left:24px; bottom:24px; z-index:2; padding:17px 20px; border-radius:22px; background:rgba(7,20,15,.72); border:1px solid rgba(215,181,108,.28); color:#fff; backdrop-filter:blur(12px); } .productVisualBadge strong{ display:block; font-family:'Cormorant Garamond',serif; color:var(--gold-2); font-size:30px; line-height:1; } .productVisualBadge span{ display:block; color:rgba(255,255,255,.78); font-size:12px; letter-spacing:2px; text-transform:uppercase; margin-top:6px; } .productExploreBtn{ margin-top:2px; } .artProductHero{ padding-top:92px; } .artHeroGrid{ align-items:center; } .productShopBtn{ display:inline-flex; justify-content:center; align-items:center; min-height:62px; padding:0 34px; border-radius:999px; font-size:14px; letter-spacing:1.4px; text-transform:uppercase; box-shadow:0 18px 44px rgba(184,138,61,.26), inset 0 1px rgba(255,255,255,.45); } .productPageGrid .productImageCard{ background:#fffaf2; } .productPhoto{ height:390px; background:linear-gradient(135deg,#f7ebdb,#e2ccb0); overflow:hidden; } .productPhoto img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .55s ease,filter .55s ease; } .productImageCard:hover .productPhoto img{ transform:scale(1.045); filter:saturate(1.04) contrast(1.04); } .productShopCta{ text-align:center; margin-top:42px; } .productShopCta .productShopBtn{ min-height:72px; padding:0 46px; font-size:15px; } @media(max-width:980px){ .productIntroGrid{ grid-template-columns:1fr; } .productLuxuryVisual, .artProductMainImage, .productLuxuryVisual img, .artProductMainImage img{ min-height:430px; } } @media(max-width:640px){ .productMiniItem{ grid-template-columns:72px 1fr; gap:12px; } .productMiniItem img{ width:72px; height:78px; } .productLuxuryVisual, .artProductMainImage, .productLuxuryVisual img, .artProductMainImage img{ min-height:360px; } .productShopBtn, .productShopCta .productShopBtn{ width:100%; min-height:60px; padding:0 22px; font-size:12px; letter-spacing:.9px; } .productPhoto{ height:330px; } } /* Luxury appointment thank-you modal */ .appointmentThanksWrap{ background: radial-gradient(circle at 50% 35%,rgba(215,181,108,.18),transparent 28%), rgba(0,0,0,.68); backdrop-filter:blur(8px); } .appointmentThanksModal{ width:min(720px,94vw); text-align:center; padding:46px 42px 38px; background: radial-gradient(circle at 50% 0%,rgba(215,181,108,.19),transparent 34%), linear-gradient(145deg,#fffaf2,#f3e6d0 58%,#fff8ec); border:1px solid rgba(184,138,61,.36); box-shadow: 0 44px 120px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.42) inset, 0 0 46px rgba(215,181,108,.13); overflow:hidden; } .appointmentThanksModal:before{ content:""; position:absolute; inset:-1px; border-radius:30px; pointer-events:none; background: linear-gradient(120deg,transparent 0%,rgba(215,181,108,.20) 34%,transparent 58%); opacity:.65; } .thanksLogoWrap{ position:relative; width:210px; height:84px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; transition:transform .45s ease,filter .45s ease; } .thanksLogoWrap img{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 10px 26px rgba(184,138,61,.28)); } .appointmentThanksModal:hover .thanksLogoWrap{ transform:translateY(-3px) scale(1.035); filter:drop-shadow(0 0 22px rgba(215,181,108,.42)); } .appointmentThanksModal h2{ font-size:clamp(46px,6vw,72px); margin:8px 0 12px; color:var(--green); } .thanksMainText{ max-width:560px; margin:0 auto 22px; color:rgba(7,20,15,.72); font-size:17px; line-height:1.85; } .thanksBranchBox{ max-width:420px; margin:0 auto 26px; padding:16px 18px; border-radius:22px; background:rgba(255,255,255,.58); border:1px solid rgba(184,138,61,.20); box-shadow:0 14px 34px rgba(7,20,15,.07); } .thanksBranchBox span{ display:block; color:var(--gold); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; font-weight:900; margin-bottom:5px; } .thanksBranchBox strong{ display:block; color:var(--green); font-family:'Cormorant Garamond',serif; font-size:30px; line-height:1.1; } .thanksBranchBox small{ display:block; color:rgba(7,20,15,.62); font-weight:800; margin-top:5px; } .thanksActions{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; } .thanksGoldBtn, .thanksDarkBtn{ min-height:54px; padding:0 24px; } .thanksGoldBtn{ box-shadow:0 18px 44px rgba(184,138,61,.26), inset 0 1px rgba(255,255,255,.45); } .thanksGoldBtn:hover{ transform:translateY(-4px); box-shadow:0 28px 70px rgba(184,138,61,.36),0 0 28px rgba(215,181,108,.24); } .appointmentThanksClose{ background:linear-gradient(135deg,var(--green),#102d24); border:1px solid rgba(215,181,108,.30); } .developerLink{ display:inline!important; color:var(--gold-2)!important; font-weight:900; text-decoration:none; transition:color .25s ease,text-shadow .25s ease; } .developerLink:hover{ color:#fff4c8!important; text-shadow:0 0 18px rgba(215,181,108,.55); } @media(max-width:640px){ .appointmentThanksModal{ padding:40px 22px 30px; } .thanksLogoWrap{ width:178px; height:72px; } .thanksMainText{ font-size:15px; } .thanksActions .btn{ width:100%; } }