/* ========================================================= Sai Jewelers — site styles Palette, type and layout tokens live in :root so you can re-theme the whole site by editing a handful of values. ========================================================= */ :root{ --bg:#06110d; --bg-grad-top:#0b251c; --ink:#040b08; /* footer */ --ink-2:#040f0b; /* trust strip */ --panel:#050d0a; /* gallery bg */ --green:#0c3a2c; --green-d:#082720; --gold:#caa64f; --gold-l:#e3c878; --gold-d:#b08a3a; --cream:#fbf6e9; --cream-2:#fbf3df; --cream-3:#f3ead4; --text:#e7ece5; --text-soft:#cdd6cf; --muted:#9fb0a1; --muted-2:#7e8d80; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif; --maxw:1180px; } *{box-sizing:border-box} /* overflow-x:clip on the root is the reliable guard against sideways scroll on mobile — overflow-x:hidden on alone doesn't stop the element from expanding. `clip` (not `hidden`) is deliberate: it never creates a scroll container, so it can't break the position:sticky financing card. */ html{scroll-behavior:smooth;overflow-x:clip} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100%; } input,textarea,select,button,a{font-family:inherit} ::selection{background:var(--gold);color:var(--bg)} img{display:block;max-width:100%} a:focus-visible,button:focus-visible,input:focus-visible, textarea:focus-visible,select:focus-visible{ outline:2px solid var(--gold-l);outline-offset:3px;border-radius:6px; } /* ---------- keyframes ---------- */ @keyframes sjShimmer{0%{left:-60%}55%,100%{left:155%}} @keyframes sjFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes sjScrollDot{0%{transform:translateY(0);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateY(38px);opacity:0}} @keyframes sjIntroLine{0%{transform:scaleX(0)}100%{transform:scaleX(1)}} /* Failsafe: if JS never runs, the intro overlay must not trap the page. */ @keyframes sjIntroFail{to{opacity:0;visibility:hidden}} /* ---------- mouse glow ---------- */ .sj-glow{position:fixed;top:0;left:0;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%; background:radial-gradient(circle,rgba(202,166,79,.16),rgba(12,58,44,.10) 42%,transparent 68%); pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:0;transition:opacity .8s ease;will-change:transform} /* ---------- cinematic intro ---------- */ .sj-intro{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity .45s ease,visibility .45s ease;animation:sjIntroFail .8s ease 2s forwards} .sj-intro-badge{width:74px;height:74px;border-radius:18px;background:linear-gradient(150deg,var(--green),var(--green-d));display:flex;align-items:center;justify-content:center;border:1px solid rgba(202,166,79,.5);animation:sjFloat 5s ease-in-out infinite} .sj-intro-badge img{width:68%;height:68%;object-fit:contain} .sj-intro-name{font-family:var(--serif);font-size:21px;letter-spacing:.42em;text-transform:uppercase;color:var(--text);padding-left:.42em} .sj-intro-line{width:150px;height:1.5px;background:rgba(202,166,79,.25);position:relative;overflow:hidden;border-radius:2px} .sj-intro-line span{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--gold-l));transform-origin:left;animation:sjIntroLine .5s cubic-bezier(.7,0,.3,1) forwards} /* ---------- shared diamonds / stars ---------- */ .diamond-sm{width:11px;height:11px;border:1.5px solid var(--gold-l);transform:rotate(45deg);display:inline-block;flex:none} .diamond-xs{flex:none;width:7px;height:7px;border:1.4px solid var(--gold-l);transform:rotate(45deg);display:inline-block} .stars{color:var(--gold-l);font-size:15px;letter-spacing:3px} /* ---------- buttons ---------- */ .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px; font-weight:600;letter-spacing:.01em;font-size:15px;border-radius:999px;text-decoration:none;cursor:pointer;border:none; padding:17px 32px;transition:box-shadow .4s ease,background .4s ease,border-color .4s ease,color .4s ease,transform .3s cubic-bezier(.2,.7,.2,1);white-space:nowrap} .btn--sm{padding:11px 20px;font-size:13.5px} .btn--block{width:100%;padding:17px 30px;font-size:15.5px} .btn--gold{background:linear-gradient(135deg,var(--gold),var(--gold-d) 55%,var(--gold-l));color:#241d10;box-shadow:0 20px 46px -22px rgba(202,166,79,.95)} .btn--gold:hover{transform:translateY(-2px);box-shadow:0 30px 64px -20px rgba(227,200,120,1),0 0 24px -4px rgba(227,200,120,.55)} .btn--gold:active{transform:translateY(0)} .btn--gold::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:sjShimmer 3.8s infinite} .btn--ghost{background:rgba(231,236,229,.04);color:var(--text);border:1.5px solid rgba(202,166,79,.4);padding:16px 30px} .btn--ghost:hover{transform:translateY(-2px);background:var(--gold);color:#241d10;border-color:var(--gold);box-shadow:0 18px 40px -20px rgba(227,200,120,.7)} .btn--ghost:active{transform:translateY(0)} .btn--glass{background:rgba(6,17,13,.32);color:var(--cream-3);border-color:rgba(227,200,120,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} /* ---------- eyebrow / section headings ---------- */ .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:24px} .eyebrow--center{justify-content:center} .eyebrow-line{width:12px;height:1px;background:var(--gold)} .eyebrow-line--gold{background:var(--gold-l)} .eyebrow-text{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:600} .eyebrow-text--gold{color:var(--gold-l)} .small-dot{font-size:0.8em;line-height:1;vertical-align:middle;opacity:0.95} .section-title{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.4vw,54px);line-height:1.08;color:var(--cream);margin:0 0 16px} .section-title em{font-style:italic;color:var(--gold-l)} .section-title--center{text-align:center} .section-head{text-align:center;max-width:640px;margin:0 auto clamp(40px,6vh,64px)} .section-lead{font-size:16px;line-height:1.6;color:var(--muted);margin:0} /* ---------- nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:18px clamp(16px,5vw,56px);background:transparent;border-bottom:1px solid transparent; transition:background .45s ease,box-shadow .45s ease,padding .45s ease,border-color .45s ease} .nav.is-scrolled{background:rgba(7,18,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 14px 40px -26px rgba(0,0,0,.9);border-bottom-color:rgba(202,166,79,.18);padding-top:12px;padding-bottom:12px} .brand{display:flex;align-items:center;gap:13px;text-decoration:none} .brand-badge{width:42px;height:42px;border-radius:11px;background:linear-gradient(150deg,var(--green),var(--green-d));display:flex;align-items:center;justify-content:center;border:1px solid rgba(202,166,79,.5)} .brand-badge img{width:68%;height:68%;object-fit:contain} .brand-text{display:flex;flex-direction:column;line-height:1} .brand-name{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--cream-3);letter-spacing:.5px} .brand-loc{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-top:3px} .navlinks{display:flex;align-items:center;gap:clamp(14px,2vw,30px);flex-wrap:wrap;justify-content:flex-end} .navlink{text-decoration:none;color:var(--text-soft);font-size:14px;font-weight:500;transition:color .3s} .navlink:hover{color:var(--gold-l)} /* ---------- mobile menu (hamburger + full-screen drawer) ---------- */ .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;flex:none; border:1px solid rgba(202,166,79,.4);border-radius:12px;background:rgba(6,17,13,.4);cursor:pointer;padding:0; transition:background .3s ease,border-color .3s ease} .nav-burger:hover{border-color:rgba(227,200,120,.7)} .nav-burger span{display:block;width:20px;height:1.5px;margin:0 auto;background:var(--gold-l);border-radius:2px; transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease} .nav-burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav-burger.is-open span:nth-child(2){opacity:0} .nav-burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .mobile-menu{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; padding:96px 24px 48px;background:rgba(6,17,13,.975);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease} .mobile-menu.is-open{opacity:1;visibility:visible} .mobile-menu .m-link{font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:.02em;color:var(--cream-3);text-decoration:none; padding:13px 0;opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),color .3s ease} .mobile-menu .m-link:hover,.mobile-menu .m-link:focus-visible{color:var(--gold-l)} .mobile-menu.is-open .m-link{opacity:1;transform:none} .mobile-menu.is-open .m-link:nth-child(1){transition-delay:.06s} .mobile-menu.is-open .m-link:nth-child(2){transition-delay:.12s} .mobile-menu.is-open .m-link:nth-child(3){transition-delay:.18s} .mobile-menu.is-open .m-link:nth-child(4){transition-delay:.24s} .mobile-menu.is-open .m-link:nth-child(5){transition-delay:.30s} .mobile-menu.is-open .m-link:nth-child(6){transition-delay:.36s} .mobile-menu.is-open .m-link:nth-child(7){transition-delay:.42s} .mobile-menu .m-book{margin-top:24px;opacity:0;transform:translateY(16px);transition:opacity .55s ease .48s,transform .55s cubic-bezier(.2,.7,.2,1) .48s} .mobile-menu.is-open .m-book{opacity:1;transform:none} /* ---------- hero ---------- */ .hero{position:relative;z-index:2;min-height:100svh;display:flex;flex-wrap:wrap;align-items:stretch; background:linear-gradient(180deg,var(--bg-grad-top) 0%,#08160f 55%,var(--bg) 100%)} .hero-copy{flex:1.6 1 520px;max-width:1050px;display:flex;flex-direction:column;justify-content:center; padding:clamp(110px,14vh,150px) clamp(22px,6vw,80px) clamp(50px,8vh,90px)} .hero-title{font-family:var(--serif);font-weight:600;font-size:clamp(44px,6.6vw,88px);line-height:1.1; letter-spacing:-.01em;color:var(--cream);margin:0 0 26px;max-width:980px} .hero-title em{font-style:italic;color:var(--gold-l)} .hero-sub{font-size:clamp(16px,1.5vw,19px);line-height:1.65;color:#aebbb0;max-width:33ch;margin:0 0 44px} /* CTA row — Explore Collection + Contact Us (Contact Us just scrolls to the #contact enquiry/map section; no phone/email in the hero itself, since that already lives in the final enquiry section). */ .hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:0} /* Heritage row — two compact, equally-weighted stat blocks (not a single afterthought stat) sitting close beneath the CTA row. */ .hero-heritage{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:34px} .hero-heritage-stat{display:flex;flex-direction:column;gap:4px} .hero-heritage-num{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-size:22px;font-weight:600;color:var(--gold-l)} .hero-heritage-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)} .hero-heritage-divider{width:1px;align-self:stretch;background:rgba(202,166,79,.3)} @media (max-width:640px){ .hero-actions{flex-direction:column;align-items:stretch} .hero-actions .btn{width:100%;justify-content:center} } @media (max-width:480px){ .hero-heritage-divider{display:none} .hero-heritage{gap:22px 30px} } .hero-media{flex:0.8 1 360px;position:relative;overflow:hidden;min-height:60vh;background:var(--bg)} /* Above tablet width, lock the split to an exact ratio instead of relying on flex-grow math against the two basis widths (which drifts with viewport). */ @media (min-width:900px){ .hero-copy{flex:0 0 48%;max-width:none} .hero-media{flex:0 0 52%} } .hero-img{position:absolute;top:-9%;left:0;width:100%;height:118%;object-fit:cover;object-position:center 40%;transform:scale(1.08);will-change:transform} .hero-media-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,17,13,.85) 0%,rgba(6,17,13,.15) 30%,transparent 55%),linear-gradient(0deg,rgba(6,17,13,.9),transparent 50%)} .scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;z-index:3} .scroll-cue-label{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)} .scroll-cue-track{position:relative;width:1px;height:48px;background:rgba(202,166,79,.28);overflow:hidden} .scroll-cue-dot{position:absolute;left:-1.5px;top:0;width:4px;height:10px;border-radius:2px;background:var(--gold-l);animation:sjScrollDot 2.1s cubic-bezier(.7,0,.3,1) infinite} /* ---------- trust strip ---------- */ .trust{position:relative;z-index:3;background:var(--ink-2);border-top:1px solid rgba(202,166,79,.16);border-bottom:1px solid rgba(202,166,79,.16)} .trust-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(14px,3vw,38px);padding:18px clamp(20px,6vw,80px)} .trust-item{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-soft)} .trust-item strong{color:var(--cream-2);font-weight:600} .trust-sep{width:6px;height:6px;border:1px solid rgba(227,200,120,.5);transform:rotate(45deg);flex:none} /* ---------- collections / video banner ---------- */ .banner{position:relative;z-index:2;scroll-margin-top:84px;min-height:clamp(560px,86vh,820px);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg)} .banner-video-fallback{position:absolute;inset:0;z-index:0;background:url('assets/chains-gold.webp') center/cover no-repeat;transform:scale(1.02)} .banner-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;opacity:1;display:block} .banner-video-toggle{position:absolute;right:clamp(16px,3vw,24px);bottom:clamp(16px,3vw,24px);z-index:3;padding:11px 16px;border:1px solid rgba(227,200,120,.35);border-radius:999px;background:rgba(6,17,13,.74);color:var(--cream-3);font-size:13px;letter-spacing:.16em;text-transform:uppercase;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:opacity .24s ease,visibility .24s ease,transform .24s ease} .banner-video-toggle:hover{transform:translateY(-1px);background:rgba(10,28,21,.86)} .banner-video-toggle.is-hidden{opacity:0;visibility:hidden;pointer-events:none} .banner-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,17,13,.78) 0%,rgba(6,17,13,.5) 45%,rgba(6,17,13,.82) 100%),radial-gradient(circle at 50% 42%,rgba(6,17,13,.18),rgba(6,17,13,.72) 78%)} .banner-content{position:relative;z-index:2;text-align:center;max-width:720px;padding:clamp(70px,12vh,130px) clamp(24px,6vw,56px)} .banner-title{font-family:var(--serif);font-weight:600;font-size:clamp(36px,5.6vw,68px);line-height:1.06;letter-spacing:-.01em;color:var(--cream);margin:0 0 22px;text-shadow:0 4px 30px rgba(0,0,0,.55)} .banner-title em{font-style:italic;color:var(--gold-l)} .banner-sub{font-size:clamp(16px,1.6vw,19px);line-height:1.65;color:#dbe4dc;max-width:42ch;margin:0 auto 38px;text-shadow:0 2px 18px rgba(0,0,0,.5)} .banner-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center} /* ---------- featured collections (categorized cover cards + expand panel) ---------- */ .collections-section{position:relative;z-index:2;scroll-margin-top:84px;padding:clamp(70px,10vh,120px) clamp(20px,6vw,80px);background:var(--panel);overflow:hidden} .collections-bg-glow{position:absolute;top:10%;left:50%;transform:translateX(-50%);width:min(120%,1000px);height:640px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(202,166,79,.10),rgba(12,58,44,.08) 45%,transparent 72%)} .collections-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto} /* ---- four cover cards ---- */ .collections-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media (max-width:980px){.collections-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.collections-grid{grid-template-columns:1fr}} .collection-card{position:relative;display:flex;flex-direction:column;text-align:left; background:none;border:none;padding:0;margin:0;cursor:pointer;border-radius:18px;overflow:hidden; font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent; box-shadow:0 30px 64px -40px rgba(0,0,0,.9); transition:transform .45s cubic-bezier(.2,.7,.2,1);will-change:transform} .collection-card:hover,.collection-card:focus-visible{transform:translateY(-6px)} .collection-card:focus-visible{outline:2px solid var(--gold-l);outline-offset:4px} /* persistent border ring (layers hover/active states without fighting box-shadow) */ .collection-card::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(202,166,79,.25);transition:box-shadow .4s ease} .collection-card:hover::after{box-shadow:inset 0 0 0 1.5px rgba(227,200,120,.6),0 0 34px -10px rgba(226,196,120,.55)} .collection-card.is-active::after{box-shadow:inset 0 0 0 1.5px var(--gold-l),0 0 40px -8px rgba(226,196,120,.7)} .collection-card.is-active .collection-open-label{color:var(--gold-l)} /* one-time glow pulse the instant a card is selected */ @keyframes sjCollectionGlowPulse{ 0%{box-shadow:inset 0 0 0 1.5px var(--gold-l),0 0 0 0 rgba(226,196,120,.6)} 55%{box-shadow:inset 0 0 0 1.5px var(--gold-l),0 0 50px 6px rgba(226,196,120,.45)} 100%{box-shadow:inset 0 0 0 1.5px var(--gold-l),0 0 40px -8px rgba(226,196,120,.7)}} .collection-card.is-glowing::after{animation:sjCollectionGlowPulse .9s ease-out} .collection-cover{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden} .collection-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform 1.6s cubic-bezier(.2,.7,.2,1);will-change:transform} .collection-card:hover .collection-cover img{transform:scale(1.06)} .collection-cover-scrim{position:absolute;inset:0;pointer-events:none; background:linear-gradient(0deg,rgba(4,11,8,.92) 0%,rgba(4,11,8,.38) 46%,transparent 68%)} .collection-cover-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease; box-shadow:inset 0 0 60px -14px rgba(226,196,120,.5)} .collection-card:hover .collection-cover-glow{opacity:1} .collection-card-body{position:relative;padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px; background:linear-gradient(160deg,rgba(16,50,37,.55),rgba(9,32,23,.66))} .collection-card-title{font-family:var(--serif);font-weight:600;font-size:clamp(18px,1.6vw,21px);color:var(--cream-2);line-height:1.2} .collection-card-desc{font-size:13px;line-height:1.5;color:var(--muted);min-height:2.8em} .collection-open-label{margin-top:6px;display:inline-flex;align-items:center;gap:6px; font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold);transition:color .3s ease} .collection-open-label span{transition:transform .3s ease} .collection-card:hover .collection-open-label span{transform:translateX(3px)} /* ---- expanded panel: the private showroom tray ---- */ .collections-expanded{position:relative} .collection-panel{overflow:hidden} .collection-panel-inner{position:relative;margin-top:26px;border-radius:18px;padding:clamp(18px,2.6vw,30px); background:radial-gradient(120% 90% at 50% 0%,rgba(20,60,45,.5),transparent 62%), linear-gradient(168deg,#0a2d22 0%,#071e17 55%,#082418 100%); border:1px solid rgba(202,166,79,.26); box-shadow:inset 0 14px 34px -18px rgba(0,0,0,.75),inset 0 -22px 44px -30px rgba(0,0,0,.7),0 34px 70px -44px rgba(0,0,0,.85)} .collection-panel-edge{position:absolute;top:0;left:8%;right:8%;height:1.5px;border-radius:2px; transform-origin:50% 50%;background:linear-gradient(90deg,transparent,var(--gold-l) 30%,var(--gold-l) 70%,transparent)} .collection-panel-head{margin-bottom:16px} .collection-panel-title{position:relative;display:inline-flex;align-items:center;gap:10px; font-family:var(--serif);font-weight:600;font-size:clamp(21px,2.6vw,28px);color:var(--cream-2);margin:0} .collection-sparkle{position:relative;width:11px;height:11px;pointer-events:none;opacity:0;transform:rotate(45deg); background:linear-gradient(135deg,#f6dd97,#caa64f);box-shadow:0 0 16px 3px rgba(240,209,123,.6)} /* ---- gallery: 4 equal columns, side by side ---- */ .collection-bento{position:relative;z-index:1;display:grid;gap:12px;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px} .collection-item{position:relative;margin:0;border-radius:12px;overflow:hidden; border:1px solid rgba(202,166,79,.2);box-shadow:0 18px 40px -30px rgba(0,0,0,.85)} .collection-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} .collection-item:hover img{transform:scale(1.05)} @media (min-width:1100px){ .collection-bento{gap:14px;grid-auto-rows:260px} .collection-panel-inner{padding:34px} } /* diamond-shaped gold sparkle, played once by JS after a collection opens */ .collection-note{position:relative;z-index:1;margin:16px 4px 14px;font-size:13px;font-style:italic;color:var(--muted)} .collection-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;align-items:center} .collection-close-btn{margin-left:auto;background:none;border:1px solid rgba(227,200,120,.4);color:var(--gold-l);border-radius:999px; padding:13px 24px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer; transition:background .3s ease,color .3s ease,border-color .3s ease} .collection-close-btn:hover{background:rgba(227,200,120,.12);border-color:var(--gold-l)} /* ---- responsive ---- */ @media (max-width:720px){ .collection-bento{grid-template-columns:1fr 1fr;grid-auto-rows:170px} .collection-actions .btn{flex:1 1 100%;justify-content:center} .collection-close-btn{margin:4px auto 0} } @media (max-width:560px){ .collection-bento{grid-template-columns:1fr} } /* ---------- section divider: fine-jewelry accent between sections ---------- */ .section-divider{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:12px; max-width:200px;margin:0 auto;padding:32px 20px;pointer-events:none} .section-divider-line{flex:1;height:1px;opacity:.55;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.19,.65,.2,1)} .section-divider-line--left{background:linear-gradient(90deg,transparent,#D6B25E);transform-origin:100% 50%} .section-divider-line--right{background:linear-gradient(90deg,#D6B25E,transparent);transform-origin:0% 50%} .section-divider-gem{flex:none;opacity:0;transform:scale(.35); filter:drop-shadow(0 0 2.5px rgba(214,178,94,.35)); transition:opacity .6s ease .55s,transform .6s cubic-bezier(.34,1.56,.64,1) .55s} .section-divider.is-in .section-divider-line{transform:scaleX(1)} .section-divider.is-in .section-divider-gem{opacity:1;transform:scale(1)} @media (max-width:520px){ .section-divider{padding:22px 20px;gap:10px} } @media (prefers-reduced-motion: reduce){ .section-divider-line{transition:none;transform:scaleX(1)} .section-divider-gem{transition:none;opacity:1;transform:scale(1)} } /* ---------- reviews ---------- */ .reviews{position:relative;z-index:2;scroll-margin-top:84px;padding:clamp(70px,10vh,120px) clamp(20px,6vw,80px);background:var(--green);color:var(--cream-3);overflow:hidden} .reviews{padding-bottom:clamp(36px,5vh,56px)} .reviews-glow{position:absolute;top:-90px;left:50%;transform:translateX(-50%);width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(202,166,79,.10),transparent 70%);pointer-events:none} .reviews-inner{position:relative;max-width:var(--maxw);margin:0 auto} .rating-pill{display:inline-flex;align-items:center;gap:12px;background:rgba(6,17,13,.4);border:1px solid rgba(227,200,120,.28);border-radius:999px;padding:9px 18px} .rating-pill .stars{font-size:16px} .rating-pill span{font-size:13.5px;color:#dbe4dc} .rating-pill strong{color:var(--cream-2);font-weight:600} .reviews-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px} .review{flex:1 1 300px;max-width:360px;margin:0;display:flex;flex-direction:column;gap:15px;background:rgba(231,236,229,.05);border:1px solid rgba(202,166,79,.18);border-radius:18px;padding:28px 26px;box-shadow:0 30px 70px -46px rgba(0,0,0,.85);transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s ease} .review:hover{transform:translateY(-6px);border-color:rgba(227,200,120,.45)} .review blockquote{margin:0;font-size:16px;line-height:1.62;color:var(--text)} .review-by{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:6px} .avatar{flex:none;width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,var(--green),var(--green-d));border:1px solid rgba(227,200,120,.5);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:16px;color:var(--gold-l)} .review-who{display:flex;flex-direction:column;line-height:1.3} .review-name{font-size:14.5px;font-weight:700;color:var(--cream-2)} .review-meta{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.04em} /* ---------- contact ---------- */ .contact{position:relative;z-index:2;scroll-margin-top:84px;padding:clamp(70px,10vh,120px) clamp(20px,6vw,80px);background:var(--green-d);color:var(--cream-3)} .contact-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:clamp(36px,5vw,64px)} .contact-map{flex:1 1 360px;display:flex} .map-frame{position:relative;flex:1;min-height:380px;border-radius:18px;overflow:hidden;border:1px solid rgba(202,166,79,.28);box-shadow:0 32px 72px -42px rgba(0,0,0,.85)} .map-frame iframe{display:block;width:100%;height:100%;min-height:380px;border:0;filter:invert(.9) hue-rotate(180deg) saturate(.78) brightness(.92) contrast(.96)} .map-suite-tag{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:9px; background:rgba(10,28,21,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(202,166,79,.4);border-radius:999px;padding:9px 16px; font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--cream-2);pointer-events:none} .contact-card-wrap{flex:1 1 380px} .contact-card{position:relative;background:rgba(231,236,229,.04);border:1px solid rgba(202,166,79,.18);border-radius:20px;padding:clamp(30px,3.6vw,48px);box-shadow:0 40px 90px -44px rgba(0,0,0,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column;gap:22px;overflow:hidden} .contact-card-glow{position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(202,166,79,.16),transparent 70%);pointer-events:none} .tag-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-l);font-weight:600;border:1px solid rgba(202,166,79,.3);border-radius:999px;padding:7px 14px} .contact-card-title{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,38px);line-height:1.12;color:var(--cream-2);margin:0} .contact-card-sub{font-size:15.5px;line-height:1.65;color:#bcc8bd;margin:0} .contact-points{display:flex;flex-direction:column;gap:13px;margin:2px 0 4px} .contact-point{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--text-soft)} .contact-call{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center; padding-top:18px;margin-top:2px;border-top:1px solid rgba(202,166,79,.14)} .contact-call-label{font-size:12.5px;color:#8a9a8c} .contact-call-numbers{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center} .contact-call-item{position:relative} .contact-call-item + .contact-call-item::before{content:"";position:absolute;left:-12px;top:2px;bottom:2px;width:1px; background:rgba(202,166,79,.22)} .contact-call-item{display:inline-flex;align-items:center;gap:8px;color:var(--gold-l);text-decoration:none; font-weight:600;font-size:14px;letter-spacing:.01em;transition:color .3s,transform .3s} .contact-call-item:hover{color:var(--cream-2);transform:translateY(-1px)} .contact-call-item small{color:#8a9a8c;font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-left:1px} /* ---------- footer ---------- */ .footer{position:relative;z-index:2;background:var(--ink);color:#bcc8bd;padding:clamp(54px,7vh,84px) clamp(20px,6vw,80px) 34px} .footer-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,64px);justify-content:space-between} .footer-brand{flex:1 1 280px;max-width:340px} .footer-logo{display:flex;align-items:center;gap:13px;margin-bottom:18px} .footer-name{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--cream-2)} .footer-blurb{font-size:14.5px;line-height:1.65;color:var(--muted-2);margin:0 0 22px} .footer-col{flex:0 1 auto} .footer-socials{display:flex;flex-direction:column;gap:16px} .footer-social-link{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:#bcc8bd;font-size:14.5px;transition:color .3s} .footer-social-link:hover{color:var(--cream-2)} .footer-social-link:hover .footer-social-icon{background:var(--gold-l);color:var(--ink)} .footer-social-icon{width:28px;height:28px;border-radius:50%;border:1px solid rgba(227,200,120,.35);display:flex;align-items:center;justify-content:center;color:var(--gold-l);flex:none;transition:background .3s,color .3s} .footer-social-icon svg{width:14px;height:14px} .footer-head{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-l);margin-bottom:18px;font-weight:600} .footer-links{display:flex;flex-direction:column;gap:12px} .footer-links a{text-decoration:none;color:#bcc8bd;font-size:14.5px;transition:color .3s} .footer-links a:hover{color:var(--cream-2)} .footer-visit{display:flex;flex-direction:column;gap:12px;font-size:14.5px;color:#bcc8bd;max-width:220px} .footer-visit a{text-decoration:none;color:#bcc8bd;transition:color .3s} .footer-visit a:hover{color:var(--cream-2)} .footer-phone{display:flex;flex-direction:column;gap:2px} .footer-phone-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600} .footer-contact-block{display:flex;flex-direction:column;gap:3px} .footer-email{font-size:12.5px;color:var(--gold-l);text-decoration:none;transition:color .3s} .footer-email:hover{color:var(--cream-2)} .footer-bottom{max-width:var(--maxw);margin:46px auto 0;padding-top:24px;border-top:1px solid rgba(227,200,120,.16);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:12.5px;color:#5f6e61} .footer-bottom a{color:#5f6e61;text-decoration:none;transition:color .3s} .footer-bottom a:hover{color:var(--cream-2)} /* ---------- mobile sticky CTA ---------- */ .cta-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(6,17,13,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(202,166,79,.28)} .cta-bar-call{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;border:1.5px solid rgba(227,200,120,.45);color:var(--cream-3);text-decoration:none;font-weight:600;font-size:14.5px} .cta-bar-book{flex:2;display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:none;border-radius:999px;background:linear-gradient(135deg,var(--gold),var(--gold-d) 55%,var(--gold-l));color:#241d10;font-weight:600;font-size:14.5px;cursor:pointer} .cta-bar-spacer{height:0} /* ---------- reveal-on-scroll (set up by script.js) ---------- */ [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1)} [data-reveal].is-visible{opacity:1;transform:none} /* ---------- headline word animation ---------- */ .sj-word-mask{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.15} .sj-word{display:inline-block;transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.85,.25,1)} .sj-word.is-in{transform:translateY(0)} .sj-word--italic{font-style:italic} .sj-word--gold{color:var(--gold-l)} /* one-time shimmer on the hero's gold word (reuses the site's shared keyframe) */ .sj-word--gold.is-shimmer{background:linear-gradient(100deg,var(--gold-l) 0%,var(--gold-l) 36%,#fff7df 50%,var(--gold-l) 64%,var(--gold-l) 100%); background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; animation:sjWordShimmer 1.5s ease-out 1 forwards} /* ===== About-section luxury animations ===== */ /* Image reveal: slide in from left, soft blur -> sharp focus */ .reveal-img{opacity:0;transform:translateX(-64px);filter:blur(14px); transition:opacity .45s ease,transform .48s cubic-bezier(.2,.7,.2,1),filter .45s ease} .reveal-img.is-visible{opacity:1;transform:none;filter:blur(0)} /* 3D tilt card (transform applied inline by script.js on pointer move) */ .tilt{transform:rotateX(0) rotateY(0)} /* ---------- responsive ---------- */ @media (max-width:680px){ .cta-bar{display:flex} .cta-bar-spacer{height:74px} .navlinks{display:none} .nav-burger{display:flex} } @media (max-width:420px){ .contact-call-numbers{flex-direction:column;gap:14px} .contact-call-item + .contact-call-item::before{display:none} } /* The site's animations are deliberately subtle / small-area, so we keep them on even when the OS requests reduced motion (the owner runs with Windows "animation effects" off and still wants to see them). We only drop instant scroll-jumping here; the large hero parallax is softened in script.js. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } /* ========================================================= Reviews — "Golden Thread of Trust" ========================================================= */ .reviews-inner > .section-head, .reviews-inner > .reviews-grid{position:relative;z-index:1} /* the gold thread weaves behind the cards */ .thread{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible} .thread-path{filter:drop-shadow(0 0 6px rgba(214,178,94,.35))} /* ambient dust + left diamond sparkle */ .reviews-particles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .reviews-sparkle{position:absolute;left:clamp(8px,4vw,46px);top:40%;width:26px;height:26px;z-index:1;pointer-events:none;opacity:.55} .reviews-sparkle svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 5px rgba(226,196,120,.5))} /* individual stars (split in by reviews.js for one-by-one light-up) */ .star{display:inline-block} /* card hover — lift, gold border + glow, quote mark, brighter stars, medallion ring */ /* opaque emerald panel so the gold thread stays behind the card (visible only in the gaps), never bleeding through over the testimonial text */ .review{position:relative;z-index:1;background:linear-gradient(160deg,rgba(16,50,37,.94),rgba(9,32,23,.96));transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s ease,box-shadow .5s ease} .review:hover{transform:translateY(-8px);border-color:rgba(227,200,120,.55); box-shadow:0 42px 84px -44px rgba(0,0,0,.9),0 0 50px -14px rgba(214,178,94,.30)} .review-quote{position:absolute;top:6px;right:18px;font-family:var(--serif);font-size:48px;line-height:1;color:rgba(227,200,120,.42);opacity:0;transform:translateY(-6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none} .review:hover .review-quote{opacity:1;transform:translateY(0)} .review-stars{transition:filter .4s ease} .review:hover .review-stars{filter:brightness(1.25)} .avatar{position:relative} .avatar::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(227,200,120,.55);opacity:0;pointer-events:none} .review:hover .avatar::after{animation:sjMedallion 1.9s ease-out infinite} @keyframes sjMedallion{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.22);opacity:0}100%{transform:scale(1.22);opacity:0}} /* one-time gold shimmer on "generations" */ @keyframes sjWordShimmer{0%{background-position:130% 0}100%{background-position:-30% 0}} .thread-word.is-shimmer{background:linear-gradient(100deg,var(--gold-l) 0%,var(--gold-l) 36%,#fff7df 50%,var(--gold-l) 64%,var(--gold-l) 100%); background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; animation:sjWordShimmer 1.5s ease-out 1 forwards} /* reduced motion: drop continuous ambient dust */ @media (prefers-reduced-motion:reduce){ .reviews-particles{display:none} } /* ========================================================= Owner & Family Legacy — "Three Generations. One Promise." ========================================================= */ .legacy{position:relative;z-index:2;scroll-margin-top:84px;overflow:hidden; padding:clamp(72px,11vh,128px) clamp(20px,6vw,80px); background:linear-gradient(180deg,#082720 0%,#0c3a2c 50%,#082720 100%);color:var(--cream-3); border-bottom:1px solid rgba(202,166,79,.2)} .legacy-glow{position:absolute;top:50%;left:50%;width:min(120%,1100px);height:760px;transform:translate(-50%,-50%); pointer-events:none;z-index:0;border-radius:50%; background:radial-gradient(circle,rgba(202,166,79,.12),rgba(202,166,79,.04) 40%,transparent 70%)} .legacy-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto; display:flex;flex-wrap:wrap;gap:clamp(28px,3.5vw,52px);align-items:flex-start} .legacy-portrait-col{flex:1.22 1 460px;max-width:520px;margin-top:-6px} .legacy-content{flex:1 1 430px} /* ---- portrait card ---- */ .owner-card{position:relative;margin:0;perspective:1100px} .owner-glow{position:absolute;inset:-9%;z-index:0;pointer-events:none;border-radius:50%; background:radial-gradient(closest-side,rgba(226,196,120,.16),rgba(226,196,120,.05) 55%,transparent 78%);filter:blur(16px)} .owner-frame{position:relative;z-index:1;border-radius:18px;overflow:hidden;aspect-ratio:5/7; box-shadow:0 52px 104px -46px rgba(0,0,0,.9),0 18px 44px -28px rgba(0,0,0,.65); transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.2,1)} .owner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%} .owner-scrim{position:absolute;inset:0;pointer-events:none; background:linear-gradient(0deg,rgba(5,15,11,.94) 0%,rgba(5,15,11,.4) 30%,transparent 54%)} .owner-border{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none; filter:drop-shadow(0 0 3px rgba(214,178,94,.4))} .owner-nameplate{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none; padding:clamp(18px,3vw,26px) clamp(20px,3vw,28px) clamp(26px,4.4vw,38px);display:flex;flex-direction:column;gap:6px} .owner-name{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);font-weight:600;color:var(--cream-2);line-height:1.1} .owner-role{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-l);font-weight:600} .owner-badge{position:absolute;top:clamp(18px,3vw,26px);right:clamp(18px,3vw,26px);z-index:3; width:clamp(92px,9vw,112px);height:clamp(92px,9vw,112px);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; background:radial-gradient(circle at 36% 30%,#f6dd97,#caa64f 68%,#a8842f); color:#241d10;border:2px solid rgba(255,247,222,.55); box-shadow:0 12px 30px -10px rgba(0,0,0,.6),inset 0 0 0 4px rgba(255,247,222,.18),0 0 0 1px rgba(120,90,30,.4); transition:box-shadow .4s ease,transform .4s ease} .owner-badge-num{font-family:var(--serif);font-weight:700;font-size:clamp(14px,1.5vw,16px);line-height:1.1;letter-spacing:.01em} .owner-badge-sub{font-size:clamp(9px,.9vw,10px);letter-spacing:.14em;text-transform:uppercase;margin-top:2px;font-weight:700} .owner-card:hover .owner-badge{transform:scale(1.04); box-shadow:0 14px 34px -8px rgba(0,0,0,.6),inset 0 0 0 4px rgba(255,247,222,.25),0 0 22px 2px rgba(227,200,120,.7)} /* ---- content ---- */ .legacy-title{margin-bottom:18px} .legacy-subtitle{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.7vw,20px);line-height:1.55;color:var(--cream-3);max-width:46ch;margin:0 0 28px} .legacy-body{position:relative;display:flex;flex-direction:column;gap:20px;margin-bottom:28px;padding-left:18px} /* subtle gold spine — separates the narrative paragraphs from the heading/quote above */ .legacy-body::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px; background:linear-gradient(180deg,rgba(227,200,120,.55),rgba(227,200,120,.14) 72%,transparent)} .legacy-line{margin:0;font-size:15.5px;line-height:1.78;color:rgba(243,234,212,.82);max-width:56ch} /* ---- decorative ending mark: closes the narrative without adding copy ---- */ .legacy-end{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin:0 0 0 18px} .legacy-end-line{width:52px;height:1px;background:linear-gradient(90deg,var(--gold-l),rgba(227,200,120,0))} .legacy-end-gem{width:6px;height:6px;flex:none;border:1.3px solid var(--gold-l);transform:rotate(45deg)} @media (max-width:480px){ .legacy-body{padding-left:14px} .legacy-end{margin-left:14px} } /* one-time gold shimmer on "Generations" (reuses @keyframes sjWordShimmer) */ .legacy-word.is-shimmer{background:linear-gradient(100deg,var(--gold-l) 0%,var(--gold-l) 36%,#fff7df 50%,var(--gold-l) 64%,var(--gold-l) 100%); background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; animation:sjWordShimmer 1.5s ease-out 1 forwards} /* ========================================================= Visit Our Showroom — store hours + live open/closed ========================================================= */ .visit{position:relative;z-index:2;scroll-margin-top:84px;overflow:hidden; padding:clamp(72px,11vh,128px) clamp(20px,6vw,80px); padding-top:clamp(36px,5vh,56px); background:linear-gradient(180deg,#0c3a2c 0%,#082720 55%,#0c3a2c 100%);color:var(--cream-3); border-bottom:1px solid rgba(202,166,79,.2)} .visit-glow{position:absolute;top:50%;left:50%;width:min(120%,1100px);height:760px;transform:translate(-50%,-50%); pointer-events:none;z-index:0;border-radius:50%; background:radial-gradient(circle,rgba(202,166,79,.12),rgba(202,166,79,.04) 40%,transparent 70%)} .visit-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto; display:flex;flex-wrap:wrap;gap:clamp(28px,3.5vw,52px);align-items:center} .visit-media-col{flex:1.05 1 420px} .visit-content{flex:1 1 430px} /* ---- showroom photo card ---- */ .showroom-card{position:relative;margin:0;perspective:1100px} .showroom-glow{position:absolute;inset:-9%;z-index:0;pointer-events:none;border-radius:50%; background:radial-gradient(closest-side,rgba(226,196,120,.16),rgba(226,196,120,.05) 55%,transparent 78%);filter:blur(16px)} .showroom-frame{position:relative;z-index:1;border-radius:18px;overflow:hidden;aspect-ratio:3/4; box-shadow:0 52px 104px -46px rgba(0,0,0,.9),0 18px 44px -28px rgba(0,0,0,.65); transition:transform .4s cubic-bezier(.2,.7,.2,1)} .showroom-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; transition:transform 1.6s cubic-bezier(.2,.7,.2,1)} .showroom-frame:hover .showroom-img{transform:scale(1.05)} .showroom-scrim{position:absolute;inset:0;pointer-events:none; background:linear-gradient(0deg,rgba(5,15,11,.9) 0%,rgba(5,15,11,.3) 24%,transparent 46%)} .showroom-border{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none; filter:drop-shadow(0 0 3px rgba(214,178,94,.4))} .showroom-sparkle{position:absolute;top:19%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;z-index:2;pointer-events:none;opacity:0; background:radial-gradient(circle,rgba(255,250,236,.95),rgba(227,200,120,.4) 40%,transparent 70%)} .showroom-label{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none; padding:clamp(18px,3vw,26px) clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:3px} .showroom-label-name{font-family:var(--serif);font-size:clamp(18px,2vw,23px);font-weight:600;color:var(--cream-2);letter-spacing:.5px} .showroom-label-loc{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-l);font-weight:600} /* ---- hours card ---- */ .visit-title{margin-bottom:14px} .visit-sub{font-size:15.5px;line-height:1.7;color:#cdd6cf;max-width:52ch;margin:0 0 22px} .hours-card{position:relative;border-radius:20px;padding:clamp(24px,3vw,38px); background:linear-gradient(160deg,rgba(16,50,37,.5),rgba(9,32,23,.6)); border:1px solid rgba(202,166,79,.2);box-shadow:0 40px 90px -50px rgba(0,0,0,.85); transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease} .hours-card:hover{transform:translateY(-5px);box-shadow:0 48px 100px -48px rgba(0,0,0,.9),0 0 50px -20px rgba(214,178,94,.25)} .hours-badge{display:inline-flex;align-items:center;gap:11px;padding:9px 16px;border-radius:999px;margin:0 0 20px; background:rgba(6,17,13,.4);border:1px solid rgba(227,200,120,.28)} .hours-dot{width:9px;height:9px;border-radius:50%;background:#7e8d80;flex:none} .hours-badge.is-open .hours-dot{background:#6fcf97;box-shadow:0 0 8px 1px rgba(111,207,151,.6)} .hours-badge.is-closed .hours-dot{background:#cf8f6f} .hours-badge-text{display:flex;flex-direction:column;line-height:1.2} .hours-status{font-size:13.5px;font-weight:700;color:var(--cream-2)} .hours-detail{font-size:11.5px;color:var(--muted);letter-spacing:.02em} .hours-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column} .hours-row{position:relative;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;font-size:14.5px; border-bottom:1px solid rgba(202,166,79,.08);transition:background .4s ease,box-shadow .4s ease} .hours-row:last-child{border-bottom:none} .hours-day{flex:1;color:var(--text-soft);font-weight:500} .hours-time{color:var(--cream-3);font-variant-numeric:tabular-nums} .hours-time--closed{color:var(--muted-2);font-style:italic} .hours-today{display:none;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#241d10; background:var(--gold-l);padding:3px 8px;border-radius:999px} .hours-row.is-today{background:rgba(202,166,79,.12);box-shadow:inset 0 0 0 1px rgba(227,200,120,.32)} .hours-row.is-today .hours-day{color:var(--cream-2);font-weight:700} .hours-row.is-today .hours-today{display:inline-block} .hours-spark{position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(circle,rgba(255,250,236,.9),rgba(227,200,120,.35) 42%,transparent 70%)} .hours-note{font-size:12.5px;line-height:1.5;color:var(--muted-2);margin:0 0 22px;font-style:italic} .visit-actions{display:flex;flex-wrap:wrap;gap:12px} /* ========================================================= Financing Made Easy — compact concierge-style block (intentionally small: one feature block, not a landing page) ========================================================= */ /* This section has a position:sticky child (.fin-sticky). overflow:hidden would create a scroll container and break sticky, so we use overflow-x:clip instead — it contains the decorative .fin-bg-glow (which is offset past the viewport on narrow screens) WITHOUT establishing a scroll container, so sticky keeps working. */ .financing{position:relative;z-index:2;scroll-margin-top:84px;overflow-x:clip; padding:clamp(48px,7vh,80px) clamp(20px,6vw,80px) clamp(40px,5.5vh,60px); background:linear-gradient(180deg,#082720 0%,#0c3a2c 50%,#082720 100%);color:var(--cream-3); border-bottom:1px solid rgba(202,166,79,.2); box-shadow:inset 0 0 200px 56px rgba(0,0,0,.34)} .fin-bg-glow{position:absolute;top:38%;left:68%;width:min(120%,880px);height:620px;transform:translate(-50%,-50%); pointer-events:none;z-index:0;border-radius:50%; background:radial-gradient(circle,rgba(202,166,79,.13),rgba(202,166,79,.04) 42%,transparent 72%)} .financing-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto; display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);align-items:stretch} .fin-content{flex:1 1 420px;display:flex;flex-direction:column;justify-content:center} /* stretches to match the copy column's height, giving the sticky card room to travel down the page instead of stranding in empty space */ .fin-card-col{flex:1 1 340px;position:relative} .fin-sticky{display:flex;flex-direction:column;align-items:center;gap:10px} @media (min-width:881px){ .fin-sticky{position:sticky;top:clamp(90px,11vh,120px)} } /* ---- left copy: compact, emotional, CTAs pulled up high ---- */ .fin-title{font-size:clamp(25px,3.4vw,38px);margin-bottom:8px} .fin-emotion{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.6vw,18px);line-height:1.5; color:var(--gold-l);margin:0 0 16px} .fin-text{margin:0 0 12px;font-size:15px;line-height:1.66;color:var(--text-soft);max-width:54ch} .fin-text--support{color:var(--muted);font-size:13.5px;margin-bottom:20px} .fin-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px} .fin-cta-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted-2)} /* ---- compact "Flexible Terms" certificate card ---- */ .fin-card{position:relative;width:100%;max-width:368px;border-radius:18px;padding:clamp(18px,2.2vw,26px); background:linear-gradient(160deg,rgba(16,50,37,.58),rgba(9,32,23,.7)); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:0 40px 90px -46px rgba(0,0,0,.85),inset 0 0 0 1px rgba(202,166,79,.16),inset 0 0 48px -28px rgba(226,196,120,.18)} .fin-glow{position:absolute;inset:-18%;z-index:-1;pointer-events:none;border-radius:50%; background:radial-gradient(closest-side,rgba(226,196,120,.22),rgba(226,196,120,.06) 55%,transparent 78%);filter:blur(24px)} /* thin gold corner frame — drawn in like a certificate border, not a full outline */ .fin-corners{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none; filter:drop-shadow(0 0 3px rgba(214,178,94,.45))} .fin-card-label{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l);font-weight:600;text-align:center;margin-bottom:7px} .fin-card-heading{font-family:var(--serif);font-weight:600;font-size:clamp(18px,2.1vw,22px);line-height:1.2;color:var(--cream-2);text-align:center;margin:0 0 16px} /* terms — vertical gold payment path on desktop. The chain lives in its own gutter to the LEFT of the cards (padding-left on .fin-terms reserves the space) so it's never hidden behind a card's own (semi-opaque) background — it stays on top of the empty card felt. */ .fin-terms{position:relative;z-index:2;display:flex;flex-direction:column;gap:9px;padding-left:30px;margin-bottom:14px} .fin-chain{position:absolute;left:0;top:0;bottom:0;width:24px;z-index:1;pointer-events:none;overflow:visible; filter:drop-shadow(0 0 4px rgba(214,178,94,.4))} .fin-node-dot{fill:#caa64f;stroke:rgba(255,247,222,.6);stroke-width:1} .fin-term{position:relative;z-index:0;display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:12px; background:linear-gradient(160deg,rgba(16,50,37,.5),rgba(9,32,23,.6)); border:1px solid rgba(202,166,79,.22);box-shadow:0 14px 32px -28px rgba(0,0,0,.8); transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s ease,box-shadow .4s ease} .fin-term:hover{transform:translateY(-3px);border-color:rgba(227,200,120,.6); box-shadow:0 24px 46px -32px rgba(0,0,0,.85),0 0 28px -14px rgba(214,178,94,.4)} .fin-num{font-family:var(--serif);font-weight:700;font-size:clamp(28px,3.4vw,34px);line-height:1;color:var(--gold-l);min-width:1.5em;text-align:center} .fin-unit{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-3);font-weight:600} .fin-sparkle{position:absolute;right:18px;top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none;opacity:0; background:radial-gradient(circle,rgba(255,250,236,.95),rgba(227,200,120,.45) 40%,transparent 70%)} .fin-card-note{display:block;font-size:11.5px;line-height:1.5;color:var(--muted-2);text-align:center} /* mobile — financing terms become a 2x2 grid, no chain */ @media (max-width:560px){ .fin-chain{display:none} .fin-terms{flex-direction:row;flex-wrap:wrap;gap:10px;padding-left:0} .fin-term{flex:1 1 calc(50% - 5px);flex-direction:column;align-items:center;gap:3px;padding:16px 10px;text-align:center} .fin-num{min-width:0} } /* ---- slim trust row (reuses the hero trust strip's diamond-bullet language) ---- */ .fin-trust-row{position:relative;z-index:1;max-width:var(--maxw);margin:clamp(28px,4vh,40px) auto 0; padding-top:20px;border-top:1px solid rgba(202,166,79,.16); display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(12px,2.4vw,28px)} .fin-trust-item{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-soft)} .fin-trust-sep{width:6px;height:6px;border:1px solid rgba(227,200,120,.5);transform:rotate(45deg);flex:none} /* ---- "How It Works" — compact jewelry service journey, not a bank flowchart ---- */ .fin-how{position:relative;z-index:1;max-width:var(--maxw);margin:clamp(32px,5vh,48px) auto 0;text-align:center} .fin-how-title{font-family:var(--serif);font-weight:600;font-size:clamp(18px,2vw,24px);color:var(--cream-2);margin:0 0 28px} /* capped width (not the full --maxw section) so the 3-item cluster and its connector line stay tightly coupled on any screen size, instead of the items huddling small and isolated inside a much wider container */ .fin-steps{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(24px,3.4vw,56px); max-width:780px;margin:0 auto} /* The line is an