/* ═══════════════════════════════════════════════════════════ MEZON PARGOL — assets/css/style.css Light theme · Palette: ivory · sand · mocha · espresso · gold ═══════════════════════════════════════════════════════════ */ /* ---------- 1. TOKENS ---------- */ :root{ --ink: #17120E; /* main text (warm near-black) */ --ink-soft: rgba(23,18,14,.68); --espresso: #3A2418; --mocha: #6B4A35; --sand: #C7A98B; --gold: #C9A567; /* fills & lines */ --gold-ink: #96702F; /* gold that stays readable on ivory */ --cream: #F7F3EC; /* page base */ --cream-2: #F0E8DA; --cream-3: #E7DCC8; --cream-4: #DFD1B9; --white: #FFFFFF; --f-sans: 'Vazirmatn', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --f-disp: 'Cormorant Garamond', 'Times New Roman', serif; --f-alt: 'Jost', var(--f-sans); --wrap: 1440px; --pad: clamp(20px, 5vw, 80px); --r: 2px; --e: cubic-bezier(.22,1,.36,1); --e2: cubic-bezier(.65,0,.35,1); --h-head: 86px; } /* ---------- 2. RESET ---------- */ *,*::before,*::after{ box-sizing:border-box; } *{ margin:0; padding:0; } /* overflow lives on so the gutter is reserved on the real scroll container and the page doesn't jump 14px when the menu / lightbox locks scrolling */ html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; overflow-x:hidden; scrollbar-gutter:stable; } body{ font-family:var(--f-sans); font-size:clamp(15px,1.02vw,17px); line-height:1.95; font-weight:300; color:var(--ink); background:var(--cream); overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.is-locked{ overflow:hidden; height:100vh; } img,video,canvas,svg{ display:block; max-width:100%; } img,video{ height:auto; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } ul{ list-style:none; } details summary::-webkit-details-marker{ display:none; } ::selection{ background:var(--gold); color:var(--ink); } /* ---------- scrollbar (wide & visible) ---------- */ html{ scrollbar-width:auto; scrollbar-color:var(--mocha) var(--cream-3); } ::-webkit-scrollbar{ width:14px; height:14px; } ::-webkit-scrollbar-track{ background:var(--cream-3); } ::-webkit-scrollbar-thumb{ background:var(--mocha); border-radius:20px; border:3px solid var(--cream-3); } ::-webkit-scrollbar-thumb:hover{ background:var(--espresso); } ::-webkit-scrollbar-corner{ background:var(--cream-3); } /* ---------- 3. TYPO HELPERS ---------- */ .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); } .section{ padding-block:clamp(80px,10vw,160px); position:relative; } .h2{ font-weight:300; font-size:clamp(28px,4.6vw,64px); line-height:1.35; letter-spacing:-.01em; } .eyebrow{ font-family:var(--f-alt); font-size:clamp(10px,1vw,12px); letter-spacing:.32em; text-transform:uppercase; color:var(--mocha); margin-bottom:clamp(14px,2vw,26px); display:flex; align-items:center; gap:12px; } .eyebrow::after{ content:''; flex:1; height:1px; background:currentColor; opacity:.35; max-width:90px; } .sec-head{ margin-bottom:clamp(40px,6vw,80px); max-width:900px; } .sec-head--center{ margin-inline:auto; text-align:center; } .sec-head--center .eyebrow{ justify-content:center; } .sec-head--center .eyebrow::after{ display:none; } .sec-head__note{ margin-top:18px; max-width:56ch; color:var(--ink-soft); } .d-mob{ display:none; } /* reveal primitives */ .reveal-line{ overflow:hidden; } .reveal-line>span{ display:inline-block; will-change:transform; } .split-words .w{ display:inline-block; overflow:hidden; vertical-align:top; } .split-words .w>i{ display:inline-block; font-style:inherit; will-change:transform; } /* ---------- 4. ROSETTE MARK ---------- */ .rosette{ width:100%; height:100%; } .rosette__petals circle{ fill:currentColor; } .rosette__core{ fill:currentColor; opacity:.35; } .rosette__ring{ fill:none; stroke:currentColor; stroke-width:2.5; opacity:.9; } /* ---------- 5. BUTTONS ---------- */ .btn{ --bg:var(--espresso); --fg:var(--cream); --bd:var(--espresso); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 34px; border-radius:100px; border:1px solid var(--bd); background:var(--bg); color:var(--fg); font-size:clamp(13px,1vw,14.5px); font-weight:400; letter-spacing:.01em; overflow:hidden; isolation:isolate; cursor:pointer; transition:color .45s var(--e), border-color .45s var(--e); } .btn>span{ position:relative; z-index:2; } .btn::before{ content:''; position:absolute; inset:0; z-index:1; background:var(--gold); transform:translateY(101%); transition:transform .55s var(--e); } .btn:hover::before{ transform:translateY(0); } .btn:hover{ color:var(--ink); border-color:var(--gold); } .btn--sm{ padding:11px 22px; font-size:13px; } .btn--light{ --bg:var(--espresso); --fg:var(--cream); --bd:var(--espresso); } .btn--ghost{ --bg:rgba(247,243,236,.6); --fg:var(--ink); --bd:rgba(23,18,14,.28); backdrop-filter:blur(6px); } .btn--ghost-dark{ --bg:transparent; --fg:var(--ink); --bd:rgba(23,18,14,.25); } .link-arrow{ display:inline-flex; align-items:center; gap:12px; margin-top:34px; font-size:14px; letter-spacing:.02em; padding-bottom:6px; border-bottom:1px solid currentColor; color:var(--espresso); transition:gap .4s var(--e), color .4s var(--e); } .link-arrow svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } .link-arrow:hover{ gap:20px; color:var(--gold-ink); } .iconbtn{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(23,18,14,.2); color:var(--ink); transition:background .4s var(--e), color .4s var(--e), border-color .4s var(--e), transform .4s var(--e); } .iconbtn svg{ width:18px; height:18px; fill:currentColor; } .iconbtn:hover{ background:var(--espresso); color:var(--cream); border-color:var(--espresso); transform:translateY(-2px); } .iconbtn--wa:hover{ background:#1FA855; color:#fff; border-color:#1FA855; } /* ---------- 6. PRELOADER ---------- */ .loader{ position:fixed; inset:0; z-index:9999; background:var(--cream); display:grid; place-items:center; color:var(--ink); } .loader.is-done{ pointer-events:none; } .loader__inner{ text-align:center; width:min(86vw,320px); } .loader__mark{ width:56px; height:56px; margin:0 auto 22px; color:var(--gold-ink); animation:spin 9s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .loader__name{ font-size:19px; font-weight:300; letter-spacing:.34em; margin-bottom:26px; } .loader__bar{ height:1px; background:rgba(23,18,14,.14); position:relative; overflow:hidden; } .loader__bar span{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--espresso); } html[dir=rtl] .loader__bar span{ inset:0 0 0 auto; } .loader__pct{ margin-top:14px; font-size:12px; letter-spacing:.2em; color:var(--gold-ink); } .loader__hint{ margin-top:6px; font-size:11.5px; letter-spacing:.08em; opacity:.45; } /* ---------- 7. SCROLL PROGRESS ---------- */ .scrollbar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:900; background:transparent; pointer-events:none; } .scrollbar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--mocha),var(--gold-ink)); } /* ---------- 8. CURSOR ---------- */ .cursor{ position:fixed; top:0; left:0; z-index:9998; pointer-events:none; display:none; } .cursor__dot{ position:absolute; width:6px; height:6px; border-radius:50%; background:var(--espresso); transform:translate(-50%,-50%); box-shadow:0 0 0 1.5px rgba(247,243,236,.6); } .cursor__ring{ position:absolute; width:42px; height:42px; border-radius:50%; border:1px solid rgba(58,36,24,.5); transform:translate(-50%,-50%) scale(.55); box-shadow:0 0 0 1px rgba(247,243,236,.35) inset; display:grid; place-items:center; transition:width .35s var(--e), height .35s var(--e), background .35s var(--e), border-color .35s var(--e); } .cursor__label{ font-size:11px; letter-spacing:.1em; color:var(--cream); opacity:0; transition:opacity .3s; white-space:nowrap; } .cursor.is-hover .cursor__ring{ border-color:var(--gold-ink); } .cursor.is-view .cursor__ring{ width:88px; height:88px; background:var(--espresso); border-color:var(--espresso); } .cursor.is-view .cursor__label{ opacity:1; } .cursor.is-view .cursor__dot{ opacity:0; } @media (hover:hover) and (pointer:fine){ .cursor{ display:block; } body.has-cursor,body.has-cursor *{ cursor:none !important; } } /* ---------- 9. HEADER ---------- */ .header{ position:fixed; top:0; left:0; right:0; z-index:800; height:var(--h-head); display:flex; align-items:center; justify-content:space-between; gap:20px; padding-inline:var(--pad); color:var(--ink); transition:transform .6s var(--e), background .5s var(--e), height .5s var(--e), box-shadow .5s; } .header::before{ content:''; position:absolute; inset:0; z-index:-1; opacity:0; background:rgba(247,243,236,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(23,18,14,.09); transition:opacity .5s var(--e); } .header.is-solid::before{ opacity:1; } .header.is-hidden{ transform:translateY(-102%); } .header .btn{ --bg:transparent; --fg:var(--ink); --bd:rgba(23,18,14,.26); } .brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; } .brand__mark{ width:34px; height:34px; color:var(--gold-ink); transition:transform .7s var(--e); } .brand:hover .brand__mark{ transform:rotate(45deg); } .brand__text{ display:flex; flex-direction:column; line-height:1.25; } .brand__text b{ font-size:16.5px; font-weight:500; letter-spacing:.04em; } .brand__text i{ font-family:var(--f-alt); font-style:normal; font-size:9px; letter-spacing:.36em; opacity:.55; } .nav{ display:flex; gap:clamp(14px,2.2vw,36px); } .nav a{ position:relative; font-size:14.5px; padding:6px 2px; opacity:.82; transition:opacity .35s; } .nav a span{ position:relative; display:inline-block; } .nav a span::after{ content:''; position:absolute; bottom:-3px; right:0; width:0; height:1px; background:currentColor; transition:width .45s var(--e); } .nav a:hover{ opacity:1; } .nav a:hover span::after{ width:100%; } .nav a.is-active{ opacity:1; } .nav a.is-active span::after{ width:100%; background:var(--gold-ink); } .header__actions{ display:flex; align-items:center; gap:10px; } .burger{ display:none; width:44px; height:44px; position:relative; } .burger span{ position:absolute; left:12px; right:12px; height:1.5px; background:currentColor; transition:transform .45s var(--e), opacity .3s; } .burger span:nth-child(1){ top:19px; } .burger span:nth-child(2){ top:25px; } body.menu-open .burger span:nth-child(1){ transform:translateY(3px) rotate(45deg); } body.menu-open .burger span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); } /* ---------- 10. MOBILE MENU ---------- */ .menu{ position:fixed; inset:0; z-index:790; visibility:hidden; } .menu.is-open{ visibility:visible; } .menu__bg{ position:absolute; inset:0; background:var(--cream-2); clip-path:circle(0% at 92% 6%); transition:clip-path .9s var(--e); } html[dir=rtl] .menu__bg{ clip-path:circle(0% at 8% 6%); } .menu.is-open .menu__bg{ clip-path:circle(150% at 8% 6%); } .menu__body{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; gap:40px; padding:calc(var(--h-head) + 20px) var(--pad) 40px; color:var(--ink); } .menu__nav{ display:flex; flex-direction:column; gap:2px; } .menu__nav a{ display:flex; align-items:baseline; gap:16px; padding:10px 0; font-size:clamp(26px,8vw,44px); font-weight:300; opacity:0; transform:translateY(30px); border-bottom:1px solid rgba(23,18,14,.1); } .menu__nav a i{ font-family:var(--f-alt); font-style:normal; font-size:12px; color:var(--gold-ink); letter-spacing:.1em; } .menu__foot{ font-size:14px; opacity:0; } .menu__phone{ font-size:22px; letter-spacing:.06em; color:var(--espresso); display:inline-block; margin-bottom:12px; } .menu__socials{ display:flex; gap:18px; margin-bottom:12px; } .menu__socials a{ border-bottom:1px solid rgba(23,18,14,.3); padding-bottom:3px; } .menu__foot p{ opacity:.55; font-size:13px; } /* ---------- 11. HERO ---------- */ .hero{ height:520vh; position:relative; background:var(--cream); } .hero__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; background:#F3F1EC; } .hero__canvas{ position:absolute; inset:0; width:100%; height:100%; } /* ivory veil: even across the frame so the dress keeps its depth, with a soft band top & bottom — each text block carries its own glow */ .hero__overlay{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(247,243,236,.5) 0%, rgba(247,243,236,0) 11%, rgba(247,243,236,0) 72%, rgba(247,243,236,.74) 100%), linear-gradient(0deg, rgba(247,243,236,.16), rgba(247,243,236,.16)); } .hero__grain{ position:absolute; inset:-50%; pointer-events:none; opacity:.035; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 8s steps(6) infinite; } @keyframes grain{ 0%,100%{ transform:translate(0,0); } 20%{ transform:translate(-6%,4%); } 40%{ transform:translate(4%,-5%); } 60%{ transform:translate(-3%,-3%); } 80%{ transform:translate(5%,3%); } } .hero__content{ position:relative; z-index:3; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:calc(var(--h-head) + clamp(20px,5vh,60px)) var(--pad) clamp(22px,4vh,40px); color:var(--ink); pointer-events:none; } .hero__content a,.hero__content button{ pointer-events:auto; } .hero__top{ position:relative; max-width:820px; } .hero__top::before{ content:''; position:absolute; inset:-14% -16% -26% -16%; z-index:-1; pointer-events:none; background:radial-gradient(66% 62% at 74% 42%, rgba(247,243,236,.96) 0%, rgba(247,243,236,.8) 42%, rgba(247,243,236,0) 78%); } .hero__eyebrow{ font-family:var(--f-alt); font-size:clamp(9px,1vw,11px); letter-spacing:.42em; color:var(--mocha); margin-bottom:clamp(14px,2.4vh,26px); display:block; } .hero__title{ font-size:clamp(48px,11vw,150px); font-weight:200; line-height:1; letter-spacing:-.02em; margin-bottom:clamp(14px,2.4vh,26px); text-shadow:0 2px 30px rgba(247,243,236,.9), 0 0 70px rgba(247,243,236,.7); } .hero__title .line{ display:block; overflow:hidden; } .hero__title .line>span{ display:block; will-change:transform; } .hero__sub{ font-size:clamp(17px,2.6vw,32px); font-weight:300; color:var(--espresso); margin-bottom:clamp(8px,1.4vh,14px); overflow:hidden; text-shadow:0 2px 22px rgba(247,243,236,.9); } .hero__desc{ font-size:clamp(13.5px,1.35vw,17px); max-width:52ch; color:var(--ink-soft); line-height:2; overflow:hidden; text-shadow:0 2px 18px rgba(247,243,236,.9); } .hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px,3.6vh,40px); } .hero__mid{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; padding-inline:var(--pad); } .hero__mid::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(62% 21% at 50% 50%, rgba(247,243,236,.94) 0%, rgba(247,243,236,.6) 38%, rgba(247,243,236,0) 88%); } .hero__mid p{ position:relative; font-size:clamp(24px,5.4vw,76px); font-weight:200; text-align:center; line-height:1.4; color:var(--ink); text-shadow:0 2px 30px rgba(247,243,236,.95), 0 0 70px rgba(247,243,236,.9); } .hero__bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; font-family:var(--f-alt); font-size:11.5px; letter-spacing:.16em; color:rgba(23,18,14,.6); } .hero__meta{ display:flex; align-items:center; gap:10px; font-family:var(--f-sans); letter-spacing:.02em; font-size:12.5px; } .hero__meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--gold-ink); } .scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--f-sans); font-size:11.5px; letter-spacing:.06em; } .scroll-cue__line{ width:1px; height:52px; background:rgba(23,18,14,.18); position:relative; overflow:hidden; } .scroll-cue__line i{ position:absolute; top:-52px; left:0; width:100%; height:52px; background:var(--gold-ink); animation:cue 2.1s var(--e2) infinite; } @keyframes cue{ 0%{ transform:translateY(0); } 60%,100%{ transform:translateY(104px); } } .hero__frame-counter{ font-variant-numeric:tabular-nums; } /* ---------- 12. MARQUEE ---------- */ .marquee{ background:var(--gold); color:var(--ink); overflow:hidden; padding-block:15px; border-block:1px solid rgba(23,18,14,.14); position:relative; z-index:5; } .marquee__track{ display:flex; width:max-content; will-change:transform; direction:ltr; } .marquee__track span{ white-space:nowrap; padding-inline:16px; font-size:clamp(13px,1.6vw,17px); font-weight:400; letter-spacing:.04em; direction:rtl; } .marquee__track b{ color:var(--espresso); font-weight:400; padding-inline:6px; } /* ---------- 13. STORY ---------- */ .story{ background:var(--cream); color:var(--ink); } .story__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,100px); align-items:center; } .story__media{ position:relative; padding-bottom:60px; } .story__img{ overflow:hidden; border-radius:var(--r); background:var(--cream-3); } .story__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--e); } .story__img:hover img{ transform:scale(1.05); } .story__img--sm{ position:absolute; bottom:0; left:-6%; width:44%; aspect-ratio:3/4; box-shadow:0 30px 70px -34px rgba(58,36,24,.55); border:6px solid var(--cream); } html[dir=rtl] .story__img--sm{ left:auto; right:-6%; } .story__badge{ position:absolute; top:-26px; left:-26px; width:112px; height:112px; border-radius:50%; background:var(--espresso); color:var(--gold); display:grid; place-items:center; gap:4px; text-align:center; padding:14px; z-index:2; } html[dir=rtl] .story__badge{ left:auto; right:-26px; } .story__badge .rosette{ width:26px; height:26px; } .story__badge span{ font-family:var(--f-alt); font-size:8px; letter-spacing:.22em; color:var(--cream); line-height:1.7; } .story__body p+p{ margin-top:18px; } .story__body{ margin-top:26px; color:var(--ink-soft); } .stats{ display:flex; flex-wrap:wrap; gap:clamp(20px,3.4vw,54px); margin-top:clamp(30px,4vw,48px); } .stats li{ display:flex; flex-direction:column; } .stats b{ font-size:clamp(30px,3.6vw,48px); font-weight:200; line-height:1.1; color:var(--espresso); font-variant-numeric:tabular-nums; } .stats span{ font-size:12.5px; letter-spacing:.02em; opacity:.6; margin-top:2px; } /* ---------- 14. COLLECTIONS ---------- */ .collections{ background:var(--cream-2); color:var(--ink); } .cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,24px); } .card{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--white); border:1px solid rgba(23,18,14,.08); box-shadow:0 18px 44px -34px rgba(58,36,24,.4); transition:border-color .5s var(--e), transform .7s var(--e), box-shadow .7s var(--e); } .card:hover{ border-color:rgba(150,112,47,.4); transform:translateY(-6px); box-shadow:0 34px 60px -34px rgba(58,36,24,.5); } .card__no{ position:absolute; top:16px; right:18px; z-index:3; font-family:var(--f-alt); font-size:11px; letter-spacing:.2em; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.55); } html[dir=ltr] .card__no{ right:auto; left:18px; } .card__img{ aspect-ratio:3/4; overflow:hidden; background:var(--cream-3); } .card__img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15); transition:transform 1.2s var(--e), filter .7s var(--e); } .card:hover .card__img img{ transform:scale(1.07); filter:grayscale(0); } .card__body{ padding:clamp(18px,1.6vw,26px); } .card__body h3{ font-size:clamp(17px,1.5vw,21px); font-weight:500; margin-bottom:8px; } .card__body p{ font-size:13.5px; line-height:1.9; color:var(--ink-soft); min-height:3.8em; } .card__go{ display:inline-block; margin-top:14px; font-size:12px; letter-spacing:.06em; color:var(--gold-ink); position:relative; padding-bottom:4px; } .card__go::after{ content:''; position:absolute; bottom:0; right:0; width:0; height:1px; background:var(--gold-ink); transition:width .5s var(--e); } .card:hover .card__go::after{ width:100%; } .card__link{ position:absolute; inset:0; z-index:4; } /* ---------- 15. GALLERY ---------- */ .gallery{ background:var(--cream-3); color:var(--ink); position:relative; } .gallery::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(107,74,53,.35),transparent); } .gallery__pin{ height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding-block:clamp(70px,9vh,110px) clamp(40px,6vh,70px); } .gallery__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(20px,3vh,40px); flex-shrink:0; } .gallery__head .eyebrow{ margin-bottom:8px; } .gallery__head .h2{ font-size:clamp(24px,3.4vw,46px); } .gallery__hint{ font-size:12.5px; letter-spacing:.02em; color:var(--ink-soft); text-align:left; } html[dir=rtl] .gallery__hint{ text-align:right; } .gallery__viewport{ flex:1; display:flex; align-items:center; overflow:hidden; } .gallery__track{ display:flex; align-items:center; gap:clamp(12px,1.4vw,22px); padding-inline:var(--pad); direction:rtl; width:max-content; will-change:transform; } .gcol{ display:flex; flex-direction:column; gap:clamp(12px,1.4vw,22px); flex-shrink:0; } .gcol--offset{ transform:translateY(6%); } .gcol--offset2{ transform:translateY(-7%); } .gcol--offset3{ transform:translateY(4%); } .gitem{ position:relative; overflow:hidden; border-radius:var(--r); flex-shrink:0; height:calc(var(--h) * 1vh); aspect-ratio:var(--ar); background:var(--cream-4); box-shadow:0 16px 40px -30px rgba(58,36,24,.55); will-change:transform; } .gitem img,.gitem video{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--e), filter .6s var(--e); } .gitem::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 45%,rgba(23,18,14,.8) 100%); opacity:0; transition:opacity .5s var(--e); } .gitem:hover img,.gitem:hover video{ transform:scale(1.06); } .gitem:hover::after{ opacity:1; } .gitem figcaption{ position:absolute; bottom:0; right:0; left:0; z-index:3; padding:16px 18px; color:var(--cream); display:flex; flex-direction:column; gap:2px; direction:rtl; text-align:right; transform:translateY(14px); opacity:0; transition:transform .55s var(--e), opacity .45s var(--e); } .gitem:hover figcaption{ transform:translateY(0); opacity:1; } .gitem figcaption b{ font-size:14.5px; font-weight:400; } .gitem figcaption span{ font-size:11.5px; opacity:.7; } .gitem--video::before{ content:''; position:absolute; top:14px; left:14px; z-index:4; width:8px; height:8px; border-radius:50%; background:#ff4b4b; box-shadow:0 0 0 0 rgba(255,75,75,.6); animation:live 2s infinite; } @keyframes live{ 70%{ box-shadow:0 0 0 10px rgba(255,75,75,0); } 100%{ box-shadow:0 0 0 0 rgba(255,75,75,0); } } .gitem__sound{ position:absolute; bottom:14px; left:14px; z-index:5; width:36px; height:36px; border-radius:50%; background:rgba(247,243,236,.85); backdrop-filter:blur(6px); display:grid; place-items:center; border:1px solid rgba(23,18,14,.14); transition:background .3s, transform .3s var(--e); } .gitem__sound:hover{ background:var(--gold); transform:scale(1.08); } .gitem__sound svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; color:var(--espresso); } .gitem__sound .i-on{ display:none; } .gitem__sound.is-on .i-on{ display:block; } .gitem__sound.is-on .i-off{ display:none; } .gend{ display:flex; flex-direction:column; justify-content:center; gap:12px; direction:rtl; height:52vh; width:clamp(230px,22vw,330px); padding:34px; border-radius:var(--r); border:1px solid rgba(150,112,47,.35); background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(247,243,236,.55)); box-shadow:0 18px 44px -34px rgba(58,36,24,.4); transition:background .6s var(--e), transform .6s var(--e); } .gend:hover{ background:linear-gradient(160deg,#fff,rgba(201,165,103,.22)); transform:translateY(-6px); } .gend__k{ font-size:12px; letter-spacing:.14em; color:var(--gold-ink); } .gend b{ font-size:clamp(20px,2vw,28px); font-weight:300; line-height:1.6; } .gend__at{ font-family:var(--f-alt); font-size:13px; letter-spacing:.1em; opacity:.6; direction:ltr; } .gallery__bar{ height:2px; background:rgba(23,18,14,.12); margin:clamp(22px,3vh,34px) var(--pad) 0; flex-shrink:0; border-radius:2px; } .gallery__bar span{ display:block; height:100%; width:0%; background:var(--mocha); border-radius:2px; } /* ---------- 16. SERVICES ---------- */ .services{ background:var(--cream); color:var(--ink); } .srv{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,40px); } .srv__item{ padding-top:26px; border-top:1px solid rgba(23,18,14,.16); position:relative; } .srv__item::before{ content:''; position:absolute; top:-1px; right:0; width:0; height:1px; background:var(--espresso); transition:width .8s var(--e); } .srv__item:hover::before{ width:100%; } .srv__no{ font-family:var(--f-alt); font-size:11px; letter-spacing:.2em; color:var(--mocha); } .srv__item h3{ font-size:clamp(17px,1.5vw,21px); font-weight:500; margin:12px 0 10px; } .srv__item p{ font-size:14px; line-height:2; color:var(--ink-soft); } /* ---------- 17. QUOTE ---------- */ .quote{ background:linear-gradient(160deg,var(--cream-4),var(--sand)); color:var(--espresso); padding-block:clamp(70px,10vw,150px); text-align:center; position:relative; overflow:hidden; } .quote::before{ content:''; position:absolute; inset:0; background:radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.5), transparent 70%); } .quote__text{ position:relative; font-size:clamp(22px,3.8vw,54px); font-weight:300; line-height:1.6; max-width:20ch; margin-inline:auto; } .quote__by{ display:block; margin-top:26px; font-size:13px; letter-spacing:.2em; color:var(--mocha); position:relative; } /* ---------- 18. VISIT ---------- */ .visit{ background:var(--cream); color:var(--ink); } .visit__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,90px); align-items:center; } .visit__lead{ margin-top:22px; max-width:52ch; color:var(--ink-soft); } .visit__list{ margin-top:clamp(26px,3.4vw,44px); border-top:1px solid rgba(23,18,14,.14); } .visit__list li{ display:grid; grid-template-columns:130px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid rgba(23,18,14,.14); align-items:baseline; } .visit__list .k{ font-size:12px; letter-spacing:.16em; color:var(--mocha); font-family:var(--f-alt); text-transform:uppercase; } .visit__list .v{ font-size:clamp(14.5px,1.2vw,17px); } .visit__list .v a{ border-bottom:1px solid rgba(23,18,14,.3); padding-bottom:2px; transition:color .35s,border-color .35s; display:inline-block; } .visit__list .v a:hover{ color:var(--gold-ink); border-color:var(--gold-ink); } .visit__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3vw,40px); } .visit__card{ border-radius:var(--r); overflow:hidden; box-shadow:0 40px 90px -55px rgba(58,36,24,.65); } .visit__map{ aspect-ratio:4/3; position:relative; display:grid; place-items:center; background: repeating-linear-gradient(0deg,transparent 0 38px,rgba(107,74,53,.1) 38px 39px), repeating-linear-gradient(90deg,transparent 0 38px,rgba(107,74,53,.1) 38px 39px), linear-gradient(135deg,var(--cream-2),var(--cream-4)); } .visit__map::before{ content:''; position:absolute; inset:0; background: linear-gradient(120deg,transparent 44%,rgba(199,169,139,.7) 45%,rgba(199,169,139,.7) 47%,transparent 48%), linear-gradient(28deg,transparent 62%,rgba(199,169,139,.45) 63%,rgba(199,169,139,.45) 64.5%,transparent 65%); } .visit__pin{ position:relative; width:74px; height:74px; color:var(--espresso); display:grid; place-items:center; animation:float 4.5s ease-in-out infinite; } .visit__pin::before{ content:''; position:absolute; width:150%; height:150%; border-radius:50%; border:1px solid rgba(58,36,24,.4); animation:ping 2.6s var(--e) infinite; } @keyframes ping{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(1.6); opacity:0; } } @keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } } .visit__maplabel{ position:absolute; bottom:18px; font-family:var(--f-alt); font-size:10.5px; letter-spacing:.3em; color:rgba(58,36,24,.55); } .visit__cardfoot{ background:var(--espresso); color:var(--cream); padding:20px 24px; display:flex; flex-direction:column; gap:3px; } .visit__cardfoot b{ font-weight:400; font-size:16px; } .visit__cardfoot span{ font-size:12.5px; opacity:.65; } /* ---------- 19. FAQ ---------- */ .faq{ background:var(--cream-2); color:var(--ink); } .faq__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,80px); align-items:start; } .faq__side p{ margin-top:18px; color:var(--ink-soft); max-width:34ch; } .faq__item{ border-bottom:1px solid rgba(23,18,14,.16); } .faq__item summary{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; cursor:pointer; font-size:clamp(15px,1.3vw,18px); list-style:none; transition:color .35s; } .faq__item summary:hover{ color:var(--gold-ink); } .faq__item summary i{ position:relative; width:16px; height:16px; flex-shrink:0; } .faq__item summary i::before,.faq__item summary i::after{ content:''; position:absolute; background:currentColor; transition:transform .45s var(--e), opacity .3s; } .faq__item summary i::before{ top:50%; left:0; width:100%; height:1.4px; transform:translateY(-50%); } .faq__item summary i::after{ left:50%; top:0; height:100%; width:1.4px; transform:translateX(-50%); } .faq__item[open] summary i::after{ transform:translateX(-50%) rotate(90deg); opacity:0; } .faq__item[open] summary{ color:var(--espresso); } .faq__ans{ overflow:hidden; } .faq__ans p{ padding-bottom:24px; font-size:14.5px; line-height:2.1; color:var(--ink-soft); max-width:64ch; } /* ---------- 19b. LIVE INSTAGRAM SLOT ---------- */ .iglive{ background:var(--cream); color:var(--ink); } .iglive[hidden]{ display:none; } .iglive__slot{ border:1px solid rgba(23,18,14,.1); border-radius:var(--r); padding:clamp(10px,1.4vw,20px); background:var(--white); overflow:hidden; box-shadow:0 18px 44px -36px rgba(58,36,24,.4); } .iglive__slot:empty{ display:none; } .iglive__slot iframe{ width:100%; border:0; background:var(--white); border-radius:var(--r); } .iglive__embeds{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.2vw,18px); } .iglive__embeds iframe{ min-height:640px; } .iglive__foot{ text-align:center; margin-top:clamp(26px,3vw,44px); } @media (max-width:900px){ .iglive__embeds{ grid-template-columns:1fr; } .iglive__embeds iframe{ min-height:580px; } } /* ---------- 20. CTA ---------- */ .cta{ background:var(--cream-2); color:var(--ink); text-align:center; } .cta .eyebrow{ justify-content:center; } .cta .eyebrow::after{ display:none; } .cta__title{ font-size:clamp(28px,5.4vw,76px); font-weight:200; line-height:1.3; } .cta__sub{ margin-top:18px; color:var(--ink-soft); max-width:48ch; margin-inline:auto; } .cta__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); margin-top:clamp(40px,5vw,70px); text-align:right; } .ctabox{ position:relative; padding:clamp(24px,2.4vw,36px); border-radius:var(--r); border:1px solid rgba(23,18,14,.09); background:var(--white); overflow:hidden; box-shadow:0 18px 44px -36px rgba(58,36,24,.4); display:flex; flex-direction:column; gap:6px; transition:transform .6s var(--e), border-color .5s var(--e), box-shadow .6s var(--e); } .ctabox::before{ content:''; position:absolute; inset:0; opacity:0; transition:opacity .6s var(--e); background:radial-gradient(80% 100% at 50% 100%, rgba(201,165,103,.22), transparent 70%); } .ctabox:hover{ transform:translateY(-8px); border-color:rgba(150,112,47,.4); box-shadow:0 34px 60px -36px rgba(58,36,24,.45); } .ctabox:hover::before{ opacity:1; } .ctabox svg{ width:26px; height:26px; margin-bottom:14px; position:relative; } .ctabox--wa svg{ fill:#1FA855; } .ctabox--ig svg{ fill:var(--gold-ink); } .ctabox--map svg{ fill:none; stroke:var(--mocha); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } .ctabox b{ font-size:clamp(17px,1.5vw,21px); font-weight:500; position:relative; } .ctabox span{ font-size:14.5px; color:var(--ink-soft); position:relative; } .ctabox i{ font-style:normal; font-size:12px; opacity:.5; margin-top:6px; position:relative; } /* ---------- 21. FOOTER ---------- */ .footer{ background:var(--cream-3); color:var(--ink); padding-top:clamp(50px,6vw,90px); border-top:1px solid rgba(23,18,14,.1); overflow:hidden; } .footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(26px,3vw,50px); } .footer__brand .rosette{ width:36px; height:36px; color:var(--gold-ink); margin-bottom:14px; } .footer__brand b{ font-size:19px; font-weight:500; display:block; margin-bottom:10px; } .footer__brand p{ font-size:13.5px; color:var(--ink-soft); max-width:34ch; line-height:2; } .footer__col h4{ font-family:var(--f-alt); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mocha); margin-bottom:16px; font-weight:400; } .footer__col a,.footer__col p{ display:block; font-size:14px; color:var(--ink-soft); margin-bottom:9px; transition:color .3s, transform .4s var(--e); } .footer__col a:hover{ color:var(--ink); transform:translateX(-4px); } .footer__word{ font-family:var(--f-disp); font-size:clamp(60px,18vw,260px); line-height:.9; text-align:center; color:transparent; -webkit-text-stroke:1px rgba(107,74,53,.28); letter-spacing:.06em; margin-top:clamp(30px,4vw,60px); user-select:none; } .footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-block:24px; border-top:1px solid rgba(23,18,14,.12); font-size:12.5px; color:var(--ink-soft); } .totop{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; transition:gap .4s var(--e), color .3s; } .totop svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } .totop:hover{ gap:16px; color:var(--gold-ink); } /* ---------- 22. FLOATING WHATSAPP ---------- */ .fab{ position:fixed; bottom:22px; right:22px; z-index:850; display:flex; align-items:flex-end; gap:12px; flex-direction:row-reverse; } html[dir=rtl] .fab{ right:22px; left:auto; } .fab__btn{ position:relative; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 14px 34px -12px rgba(31,168,85,.75); transition:transform .45s var(--e); } .fab__btn svg{ width:29px; height:29px; fill:currentColor; } .fab__btn:hover{ transform:scale(1.09) rotate(-6deg); } .fab__pulse{ position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:fabping 2.4s var(--e) infinite; } @keyframes fabping{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } } .fab__bubble{ position:relative; background:var(--white); color:var(--ink); border-radius:14px 14px 4px 14px; padding:14px 18px; max-width:250px; border:1px solid rgba(23,18,14,.08); box-shadow:0 20px 50px -22px rgba(58,36,24,.5); display:flex; flex-direction:column; gap:3px; transform-origin:bottom right; opacity:0; visibility:hidden; transform:translateY(10px) scale(.9); transition:opacity .5s var(--e), transform .5s var(--e), visibility .5s; } html[dir=rtl] .fab__bubble{ border-radius:14px 14px 14px 4px; transform-origin:bottom left; } .fab__bubble.is-show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); } .fab__bubble b{ font-size:13.5px; font-weight:500; } .fab__bubble span{ font-size:12px; color:var(--ink-soft); } .fab__close{ position:absolute; top:6px; left:8px; font-size:12px; opacity:.4; line-height:1; padding:4px; } html[dir=rtl] .fab__close{ left:8px; right:auto; } .fab__close:hover{ opacity:1; } /* ---------- 23. LIGHTBOX ---------- */ .lb{ position:fixed; inset:0; z-index:9000; visibility:hidden; } .lb.is-open{ visibility:visible; } .lb__bg{ position:absolute; inset:0; background:rgba(240,232,218,.95); opacity:0; backdrop-filter:blur(10px); } .lb__stage{ position:absolute; inset:0; display:grid; place-items:center; padding:clamp(50px,8vh,90px) clamp(16px,8vw,120px); } .lb__stage img,.lb__stage video{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:var(--r); box-shadow:0 40px 100px -45px rgba(58,36,24,.75); } .lb__close{ position:absolute; top:20px; left:20px; z-index:5; width:46px; height:46px; border-radius:50%; border:1px solid rgba(23,18,14,.14); color:var(--ink); background:rgba(255,255,255,.9); box-shadow:0 8px 22px -12px rgba(58,36,24,.5); display:grid; place-items:center; font-size:16px; transition:background .35s, color .35s, transform .35s var(--e); } .lb__close:hover{ background:var(--espresso); color:var(--cream); transform:rotate(90deg); } .lb__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:52px; height:52px; border-radius:50%; border:1px solid rgba(23,18,14,.14); color:var(--ink); background:rgba(255,255,255,.9); box-shadow:0 8px 22px -12px rgba(58,36,24,.5); display:grid; place-items:center; transition:background .35s, color .35s; } .lb__nav svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; } .lb__nav:hover{ background:var(--espresso); color:var(--cream); } .lb__nav--prev{ right:20px; } .lb__nav--next{ left:20px; } .lb__cap{ position:absolute; bottom:22px; right:0; left:0; text-align:center; color:var(--ink); font-size:14px; opacity:0; padding-inline:20px; } .lb__cap b{ font-weight:500; } .lb__cap span{ display:block; font-size:11.5px; color:var(--ink-soft); margin-top:3px; } .lb__count{ position:absolute; top:26px; right:0; left:0; text-align:center; font-family:var(--f-alt); font-size:12px; letter-spacing:.2em; color:var(--mocha); } /* ═══════════ RESPONSIVE ═══════════ */ @media (max-width:1180px){ .footer__top{ grid-template-columns:1fr 1fr 1fr; } .footer__brand{ grid-column:1 / -1; } .cards{ grid-template-columns:repeat(2,1fr); } .srv{ grid-template-columns:repeat(2,1fr); } } @media (max-width:1024px){ :root{ --h-head:74px; } .nav{ display:none; } .header__cta{ display:none; } .burger{ display:block; } .story__grid{ grid-template-columns:1fr; } .story__media{ max-width:560px; } .visit__grid{ grid-template-columns:1fr; } .faq__grid{ grid-template-columns:1fr; } .cta__grid{ grid-template-columns:1fr; } .hero{ height:460vh; } } @media (max-width:820px){ body{ line-height:1.9; } .hero__bottom{ flex-direction:column; align-items:flex-start; gap:14px; } .hero__frame-counter{ display:none; } .scroll-cue{ align-items:flex-start; } .scroll-cue__line{ height:36px; } @keyframes cue{ 0%{ transform:translateY(0);} 60%,100%{ transform:translateY(72px);} } .hero__content{ justify-content:flex-end; padding-bottom:26px; } .hero__top{ margin-bottom:auto; } .hero__top::before{ inset:-10% -9% -2% -9%; background:radial-gradient(78% 56% at 58% 30%, rgba(247,243,236,.94) 0%, rgba(247,243,236,.62) 44%, rgba(247,243,236,0) 84%); } .gallery__head{ flex-direction:column; align-items:flex-start; gap:8px; } .d-desk{ display:none; } .d-mob{ display:inline; } .story__badge{ width:88px; height:88px; top:-16px; right:-10px; } html[dir=rtl] .story__badge{ right:-10px; } .story__img--sm{ width:48%; right:-4%; } html[dir=rtl] .story__img--sm{ right:-4%; } .visit__list li{ grid-template-columns:1fr; gap:4px; } .lb__nav{ width:44px; height:44px; } .lb__nav--prev{ right:10px; } .lb__nav--next{ left:10px; } } @media (max-width:640px){ :root{ --pad:20px; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ border-width:2px; } .cards{ grid-template-columns:1fr; } .srv{ grid-template-columns:1fr; gap:0; } .srv__item{ padding-block:22px; } .stats{ gap:22px 30px; } .hero{ height:400vh; } .hero__title{ font-size:clamp(42px,14vw,72px); } .hero__ctas .btn{ width:100%; } .footer__top{ grid-template-columns:1fr 1fr; } .footer__bottom{ flex-direction:column; align-items:flex-start; gap:12px; } .fab{ bottom:16px; right:16px; } .fab__btn{ width:54px; height:54px; } .fab__bubble{ max-width:200px; padding:12px 14px; } .quote__text{ max-width:16ch; } } @media (max-width:400px){ .brand__text b{ font-size:15px; } .brand__mark{ width:30px; height:30px; } } /* ═══════════ GALLERY — TOUCH / SMALL SCREENS ═══════════ */ @media (max-width:1024px), (hover:none){ .gallery__pin{ height:auto; padding-block:clamp(70px,10vw,110px); } .gallery__viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .gallery__viewport::-webkit-scrollbar{ display:none; } .gallery__track{ transform:none !important; } .gcol{ scroll-snap-align:center; } .gitem{ height:calc(var(--h) * 0.86vh); } .gitem figcaption{ transform:none; opacity:1; background:linear-gradient(180deg,transparent,rgba(23,18,14,.85)); } .gitem::after{ opacity:.5; } .gend{ height:44vh; width:min(72vw,300px); } } @media (max-width:1024px) and (orientation:portrait){ .gitem{ height:calc(var(--h) * 0.62vh + 120px); } .gcol--offset,.gcol--offset2,.gcol--offset3{ transform:none; } } /* ═══════════ REDUCED MOTION ═══════════ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .hero{ height:100svh; } .hero__sticky{ position:relative; } }