/* ============================================================ Maravilla clone — Framer-free (plain HTML/CSS/JS) Step 1: Nav header + Hero + primary menu overlay Mobile-first. Breakpoints: 810px (tablet), 1200px (desktop), 1440px (large). All values measured 1:1 from the live reference / Framer export. ============================================================ */ /* ---------- Fonts: Libre Caslon Condensed (self-hosted, display) ---------- */ @font-face{font-family:"Libre Caslon Condensed";font-style:normal;font-weight:400;font-display:swap; src:url(../assets/fonts/libre-caslon-condensed-400.woff2) format("woff2");} @font-face{font-family:"Libre Caslon Condensed";font-style:italic;font-weight:400;font-display:swap; src:url(../assets/fonts/libre-caslon-condensed-400i.woff2) format("woff2");} @font-face{font-family:"Libre Caslon Condensed";font-style:normal;font-weight:500;font-display:swap; src:url(../assets/fonts/libre-caslon-condensed-500.woff2) format("woff2");} @font-face{font-family:"Libre Caslon Condensed";font-style:italic;font-weight:500;font-display:swap; src:url(../assets/fonts/libre-caslon-condensed-500i.woff2) format("woff2");} @font-face{font-family:"Libre Caslon Condensed";font-style:normal;font-weight:600;font-display:swap; src:url(../assets/fonts/libre-caslon-condensed-600.woff2) format("woff2");} :root{ /* Palette (Framer tokens, measured) */ --c-red:#ad1a1a; /* primary accent / headlines */ --c-maroon:#48120e; /* deep dark — dark sections, hero fallback, dark text */ --c-cream:#f6efe5; /* main light bg */ --c-sand:#f2e8d8; /* warm panel bg */ --c-offwhite:#faf6f0; /* lightest bg / hero wordmark */ --c-taupe:#82625b; /* muted body text */ --c-line:#dbcfcc; /* borders / hairlines */ --c-white:#ffffff; --c-black:#000000; /* Fonts */ --font-display:"Libre Caslon Condensed",Georgia,"Times New Roman",serif; --font-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-script:"Gochi Hand",cursive; /* Layout */ --pad-x:20px; /* side padding (phone) */ --nav-h:68px; } *,*::before,*::after{box-sizing:border-box;} html,body{margin:0;padding:0;} html{overflow-y:scroll;-webkit-text-size-adjust:100%;} /* Lenis smooth-scroll (official recommended setup) */ html.lenis,html.lenis body{height:auto;} .lenis.lenis-smooth{scroll-behavior:auto !important;} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;} .lenis.lenis-stopped{overflow:hidden;} body{ font-family:var(--font-sans); color:var(--c-maroon); background:var(--c-cream); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; /* clip the bleeding hero wordmark WITHOUT making body a scroll container (which would break position:sticky) */ } a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;} ul{list-style:none;margin:0;padding:0;} img,svg,video{display:block;max-width:100%;} /* ---------- Scroll reveal: text + UI fade up as they enter the viewport. Hidden state applies at first paint (html.reveal-on set by an inline script); js/main.js reveals each element (inline opacity/transform) via IntersectionObserver. ---------- */ html.reveal-on :is( .sincebar,.about-head,.about-copy,.about .btn-group,.about-images, .feature-head,.feature-foot,.rooms-top,.room-card,.services-head,.service-cta, .dw-head,.dw-card,.packages-head,.pkg-card,.pkg-text,.pkg-quote-banner, .reviews-top,.reviews-partner, .news-head,.news-card,.news-cta,.explore-card, .footer-top,.footer-main,.footer-bottom, [data-reveal] ){opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);} /* ============================================================ NAV (fixed, transparent over hero → solid cream on scroll) ============================================================ */ .nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:background-color .4s ease,box-shadow .4s ease;} .nav-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:var(--nav-h); padding:0 var(--pad-x); } /* Menu trigger (left) */ .menu-trigger{justify-self:start;display:inline-flex;align-items:center;gap:10px;color:var(--c-offwhite);} .burger{display:inline-flex;flex-direction:column;gap:7px;width:28px;} .burger span{display:block;height:2px;width:28px;background:currentColor;transition:transform .35s ease,opacity .25s ease;} .menu-label{font-family:var(--font-sans);font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1;} /* Brand logo (center) */ .brand{justify-self:center;display:inline-flex;align-items:center;} .brand-logo{height:42px;width:auto;object-fit:contain;} .brand-logo--dark{display:none;} /* CTA (right): Book pill + arrow circle */ .nav-cta{justify-self:end;display:inline-flex;align-items:center;gap:8px;} .btn-book{ display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:100px; background:var(--c-cream);color:var(--c-maroon); font-family:var(--font-sans);font-size:15px;font-weight:500;line-height:1;white-space:nowrap; transition:background-color .3s ease,color .3s ease; } .btn-arrow{ display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%; background:var(--c-cream);color:var(--c-maroon); transition:background-color .3s ease,color .3s ease,transform .3s ease; } .btn-arrow svg{width:16px;height:16px;transition:transform .3s ease;} .btn-book:hover{background:var(--c-maroon);color:var(--c-cream);} .nav-cta:hover .btn-arrow svg{transform:rotate(45deg);} /* Scrolled state: frosted cream bar + dark content (readable over every section). */ .nav.is-solid{background:rgba(246,239,229,.82);backdrop-filter:blur(14px) saturate(1.08);-webkit-backdrop-filter:blur(14px) saturate(1.08);box-shadow:0 1px 0 rgba(72,18,14,.07);} .nav.is-solid .menu-trigger{color:var(--c-maroon);} .nav.is-solid .brand-logo--light{display:none;} .nav.is-solid .brand-logo--dark{display:block;} .nav.is-solid .btn-book,.nav.is-solid .btn-arrow{background:var(--c-red);color:var(--c-white);} .nav.is-solid .btn-book:hover,.nav.is-solid .btn-arrow:hover{background:var(--c-maroon);} /* ---------- mobile header: quiet bar (burger + wordmark only) ---------- The top-bar CTA and the "Menu" label crowded the narrow row and competed with the wordmark; on phones the CTA lives in the floating pill below. */ @media (max-width:809px){ .nav .nav-cta{display:none;} .nav .menu-label{display:none;} } /* floating Enquire pill (mobile only; injected by js/main.js on every page) */ .enquire-pill{ position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));translate:-50% 12px;z-index:90; display:none;align-items:center;gap:.5em; padding:14px 24px;border-radius:100px; background:var(--c-red);color:var(--c-cream); font-family:var(--font-sans);font-size:12.5px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap; box-shadow:0 12px 34px rgba(63,9,7,.45); /* hidden at the top of the page (so it doesn't clash with the header); JS adds .is-revealed once the user scrolls down a little — fades + rises into view */ opacity:0;visibility:hidden;pointer-events:none; transition:opacity .35s ease, translate .35s ease, visibility .35s ease; } .enquire-pill::after{content:"\2197";letter-spacing:0;font-size:1.05em;} @media (max-width:809px){ .enquire-pill{display:inline-flex;} .enquire-pill.is-revealed{opacity:1;visibility:visible;pointer-events:auto;translate:-50% 0;} } /* covered surfaces take over: side menu (which has its own pill), booking overlay */ body.menu-open .enquire-pill{display:none !important;} html.form-overlay-lock .enquire-pill{display:none !important;} /* menu Enquire pill — beside the Close button inside the OPEN menu (mobile only; injected by js/main.js on every page; top aligned to #menuClose by JS) */ .menu-enquire{ display:none;position:absolute;right:24px;z-index:5; align-items:center;gap:.45em; padding:9px 16px;border-radius:100px; background:var(--c-red);color:var(--c-cream); font-family:var(--font-sans);font-size:11px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap; } .menu-enquire::after{content:"\2197";letter-spacing:0;} @media (max-width:809px){ .menu-enquire{display:inline-flex;} } /* ============================================================ HERO (full-viewport video + giant italic wordmark + badges) ============================================================ */ /* Hero PINS while the content (main) slides up over it like a blanket. Hero stays at top:0 (sticky, low z-index); #main is lifted above it with a solid bg so it covers the video as you scroll. */ .hero{position:sticky;top:0;z-index:1;height:100vh;height:100svh;overflow:clip;background:var(--c-maroon);} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0;} #main{position:relative;z-index:2;background:var(--c-cream);} .hero-wordmark{ position:absolute;z-index:1;left:50%;bottom:-2.6vw;transform:translateX(-50%); margin:0;white-space:nowrap; font-family:var(--font-display);font-style:italic;font-weight:400; color:var(--c-offwhite); font-size:28.5vw;line-height:.9;letter-spacing:-.05em; pointer-events:none; } .badge{ position:absolute;z-index:2; background:var(--c-white);color:var(--c-maroon); font-family:var(--font-sans);font-size:16px;font-weight:500;line-height:1;white-space:nowrap; padding:12px 25px;border-radius:50px; } .badge--quiet{left:12%;top:78%;} .badge--purpose{left:auto;right:12%;top:50%;} /* ============================================================ PRIMARY MENU — cream side panel + dim backdrop z-order: content/hero < backdrop(120) < nav(100? raised below) ; panel(160) over nav's left ============================================================ */ /* backdrop dims the site but the nav (logo/Book) stays above it */ .menu-backdrop{position:fixed;inset:0;z-index:60;background:rgba(40,12,8,.55);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;cursor:pointer;} body.menu-open .menu-backdrop{opacity:1;visibility:visible;} .menu{ position:fixed;left:0;top:0;bottom:0;z-index:160;width:100%;max-width:560px; background:var(--c-cream);color:var(--c-maroon); transform:translateX(-100%);transition:transform .6s cubic-bezier(.76,0,.24,1),visibility .6s; visibility:hidden;overflow-y:auto;box-shadow:0 0 60px rgba(40,12,8,.22); } body.menu-open .menu{transform:none;visibility:visible;} .menu-inner{min-height:100%;display:flex;flex-direction:column;gap:40px;padding:18px var(--pad-x) 28px;} .menu-close{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;color:var(--c-maroon);font-family:var(--font-sans);font-size:15px;} /* the X sits in a red-outlined coin so it clearly reads as a button */ .menu-close__icon{position:relative;flex:0 0 auto;width:36px;height:36px;border:1.5px solid var(--c-red);border-radius:50%;transition:background-color .2s ease,color .2s ease;} .menu-close__icon::before,.menu-close__icon::after{content:"";position:absolute;top:50%;left:50%;width:15px;height:1.5px;background:currentColor;} .menu-close__icon::before{transform:translate(-50%,-50%) rotate(45deg);} .menu-close__icon::after{transform:translate(-50%,-50%) rotate(-45deg);} .menu-close:hover .menu-close__icon{background:var(--c-red);color:var(--c-cream);} .menu-eyebrow{margin:0 0 14px;font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--c-taupe);} /* top: big nav links + Maravilla sub-nav & socials */ /* single column always: the big links get the full panel width (so they never wrap awkwardly on wider laptops), with Auvelle/sublinks/social stacked below */ .menu-top{display:flex;flex-direction:column;gap:32px;} .menu-col--main{flex:0 0 auto;} .menu-links{display:flex;flex-direction:column;gap:0;} .menu-links a{font-family:var(--font-display);font-weight:500;font-size:clamp(36px,9vw,52px);line-height:.86;letter-spacing:-.03em;color:var(--c-red);transition:color .2s ease;} .menu-links a:hover{color:var(--c-maroon);} .menu-col--sub{display:flex;flex-direction:column;gap:24px;} .menu-sublinks{display:flex;flex-direction:column;gap:6px;} .menu-sublinks a{font-family:var(--font-display);font-weight:500;font-size:17px;line-height:1.25;color:#241510;text-decoration:underline;text-underline-offset:3px;transition:color .2s ease;} .menu-sublinks a:hover{color:var(--c-red);} .menu-social{display:flex;gap:16px;} .menu-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--c-red);color:var(--c-offwhite);transition:background-color .2s ease;} .menu-social a:hover{background:var(--c-maroon);} .menu-social svg{width:19px;height:19px;} /* packages + stay lists — STACKED on mobile (divider between), side-by-side on desktop */ .menu-lists{display:flex;flex-direction:column;gap:0;padding-top:30px;border-top:1px solid rgba(130,98,91,.28);} .menu-lists .menu-col + .menu-col{margin-top:24px;padding-top:24px;border-top:1px solid rgba(130,98,91,.28);} .menu-sublist{display:flex;flex-direction:column;gap:9px;} .menu-sublist a{font-family:var(--font-sans);font-size:15px;line-height:1.3;color:var(--c-maroon);transition:color .2s ease;} .menu-sublist a:hover{color:var(--c-red);} /* bottom: rating + copyright */ /* removed: redundant with the "Loved by 40+ academies" proof card above */ .menu-bottom{display:none;} .menu-rating{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);font-size:15px;color:var(--c-maroon);text-decoration:underline;text-underline-offset:3px;} .menu-stars{font-size:16px;color:var(--c-red);letter-spacing:2px;text-decoration:none;} .menu-copy{font-family:var(--font-sans);font-size:14px;color:var(--c-taupe);} /* "What you get" replaced by a featured client video review */ .menu-proof{display:flex;gap:14px;align-items:center;text-decoration:none;} .menu-proof__thumb{position:relative;flex:0 0 auto;width:74px;height:92px;border-radius:12px;overflow:hidden;background:#000;} .menu-proof__video{width:100%;height:100%;object-fit:cover;display:block;} .menu-proof__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .3s ease;} .menu-proof__play svg{width:15px;height:15px;color:var(--c-red);background:rgba(255,255,255,.92);border-radius:50%;padding:7px;box-sizing:content-box;} .menu-proof.is-playing .menu-proof__play{opacity:0;} .menu-proof__meta{display:flex;flex-direction:column;gap:3px;min-width:0;} .menu-proof__rating{font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1;color:var(--c-maroon);} .menu-proof__rating small{font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--c-taupe);white-space:nowrap;} .menu-proof__cta{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--c-maroon);text-decoration:underline;text-underline-offset:3px;} .menu-proof__cta svg{flex:0 0 auto;width:14px;height:14px;transition:transform .2s ease;} .menu-proof:hover .menu-proof__cta svg{transform:translateX(3px);} /* ---- mobile menu tweaks ---- */ @media (max-width:809.98px){ /* tighten the "Auvelle" label → sublinks gap */ .menu-col--sub{ gap:12px; } .menu-col--sub .menu-eyebrow{ margin-bottom:2px; } /* social icons are relocated to the very bottom by main.js — give that section its own divider so it reads as a distinct block */ .menu-inner > .menu-social{ padding-top:26px; border-top:1px solid rgba(130,98,91,.28); } } /* lock page scroll while menu open */ body.menu-open{overflow:hidden;} /* keep the nav (logo + Book) visible & dark over the dimmed site while the menu is open */ body.menu-open .nav .brand-logo--light{display:none;} body.menu-open .nav .brand-logo--dark{display:block;} body.menu-open .nav .menu-trigger{color:var(--c-maroon);} body.menu-open .nav .btn-book,body.menu-open .nav .btn-arrow{background:var(--c-red);color:var(--c-white);} /* desktop: partial side panel (kept narrow enough not to cover the centred nav logo) so the site shows through */ @media (min-width:810px){ .menu{width:clamp(380px,36vw,600px);max-width:none;} /* one even section rhythm (24px) so the roomier nav links stay contained (no scrollbar) */ .menu-inner{padding:20px 44px 24px;gap:24px;} /* generous, misclick-safe spacing on the big nav links (was line-height .86, cramped) */ .menu-links a{font-size:clamp(48px,4.2vw,66px);line-height:1.05;} /* one consistent label->content gap everywhere = the .menu-eyebrow 14px margin. .menu-col--sub previously added an extra gap:24px on top of it (~38px vs 14px). */ .menu-top{gap:24px;} .menu-col--sub{gap:0;} .menu-lists{flex-direction:row;gap:0 44px;padding-top:20px;} .menu-lists .menu-col{flex:1;} .menu-lists .menu-col--proof{flex:1.35;} .menu-lists .menu-col + .menu-col{margin-top:0;padding-top:0;border-top:none;} /* X-only close, pinned to the top-right and taken out of the flow so the nav links (Menu / Why Auvelle / How it works …) rise to the top of the panel */ .menu-inner{position:relative;} .menu-close{position:absolute;top:20px;right:44px;gap:0;z-index:2;} .menu-close .menu-label{display:none;} .menu-close__icon{width:40px;height:40px;} } /* ============================================================ "SINCE 1975" STAR BAND ============================================================ */ .sincebar{ display:flex;flex-direction:column;align-items:center;gap:14px; text-align:center;padding:64px 20px 0;background:var(--c-cream); } .stars{display:inline-flex;gap:5px;color:var(--c-red);} .stars svg{width:11px;height:11px;display:block;} .since{margin:0;font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1.1;color:var(--c-red);} /* ============================================================ ABOUT ============================================================ */ .about{position:relative;overflow:hidden;padding:80px 20px;background:var(--c-cream);} .about-squiggle{position:absolute;top:0;left:0;width:100%;height:auto;z-index:0;pointer-events:none;overflow:visible;display:none;} .about-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;} .about-head{ margin:0;display:flex;flex-direction:column;gap:.12em; font-family:var(--font-display);font-weight:500;color:var(--c-red); font-size:48px;line-height:.92;letter-spacing:-.03em; } .about-head .l2{font-style:italic;} .about-copy{max-width:550px;margin-top:24px;display:flex;flex-direction:column;gap:16px;} .about-copy p{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.3;color:var(--c-taupe);} /* Reusable in-page CTA: red pill + red circular arrow */ /* pill + arrow sit flush (gap:0) and split their radius so they read as ONE pill */ .btn-group{margin-top:30px;display:inline-flex;align-items:center;gap:0;} .btn-pill{ display:inline-flex;align-items:center;height:52px;padding:0 26px;border-radius:100px 0 0 100px; background:var(--c-red);color:var(--c-white); font-family:var(--font-sans);font-size:15px;font-weight:500;line-height:1;white-space:nowrap; transition:background-color .3s ease; } .btn-circle{ display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:0 100px 100px 0; background:var(--c-red);color:var(--c-white); transition:background-color .3s ease; } .btn-circle svg{width:16px;height:16px;transition:transform .3s ease;} .btn-group:hover .btn-pill,.btn-group:hover .btn-circle{background:var(--c-maroon);} .btn-group:hover .btn-circle svg{transform:rotate(45deg);} .about-images{margin-top:40px;width:100%;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:10px;} .about-img{margin:0;flex:1 1 0;min-width:0;max-width:527px;border-radius:10px;overflow:hidden;} .about-img--2{margin-top:48px;} .about-img img{display:block;width:100%;aspect-ratio:527/672;object-fit:cover;} /* ============================================================ FEATURE / QUOTE (full-bleed image + split "Luxury / Retreats") ============================================================ */ .feature{ position:relative;overflow:hidden; min-height:clamp(560px,66vw,1259px); display:flex;flex-direction:column;justify-content:center; padding:0 20px;color:var(--c-offwhite); } .feature-bg{position:absolute;inset:0;z-index:0;background:var(--c-maroon);} .feature-bg img{width:100%;height:100%;object-fit:cover;} .feature-head{ position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:16px; font-family:var(--font-display);font-weight:500;font-size:48px;line-height:.9;letter-spacing:-.03em; } .feature-head .r{font-style:italic;} .feature-foot{ position:absolute;z-index:1;left:50%;bottom:6%;transform:translateX(-50%); width:100%;max-width:440px;padding:0 20px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:18px; } .feature-sub{margin:0;font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1.08;color:var(--c-offwhite);} .feature-link{ font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.12em; color:var(--c-offwhite);padding-bottom:6px;border-bottom:1px solid rgba(250,246,240,.55); } /* ============================================================ ROOMS (editorial card layout) ============================================================ */ .rooms{padding:80px 20px;background:var(--c-cream);} .rooms-top{display:flex;flex-direction:column;gap:24px;margin-bottom:40px;} .rooms-head{margin:0;display:flex;flex-direction:column;font-family:var(--font-display);font-weight:500;color:var(--c-red);font-size:48px;line-height:.92;letter-spacing:-.03em;} .rooms-head .l2{font-style:italic;} .rooms-top__aside{display:flex;flex-direction:column;gap:20px;align-items:flex-start;max-width:360px;} .rooms-sub{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.3;color:var(--c-taupe);} .rooms-cards{display:flex;flex-direction:column;gap:24px;} .rooms-row{display:flex;flex-direction:column;gap:24px;} .room-card{display:flex;flex-direction:column;} .room-media{position:relative;border-radius:10px;overflow:hidden;} .room-media img{display:block;width:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1);} .room-card:hover .room-media img{transform:scale(1.05);} .room-card--a .room-media img,.room-card--b .room-media img, .room-card--c .room-media img,.room-card--d .room-media img{aspect-ratio:885/599;} /* pills: hidden by default, revealed on hover (desktop); fully hidden on touch/mobile */ .room-pills{position:absolute;top:16px;left:16px;display:flex;gap:8px;flex-wrap:wrap;opacity:0;transform:translateY(-8px);transition:opacity .4s ease,transform .4s ease;pointer-events:none;} .room-card:hover .room-pills{opacity:1;transform:none;} @media (hover:none),(max-width:809px){.room-pills{display:none;}} .pill{display:inline-flex;align-items:center;gap:6px;background:var(--c-cream);color:var(--c-maroon); font-family:var(--font-sans);font-size:13px;font-weight:500;line-height:1;padding:8px 12px;border-radius:50px;white-space:nowrap;} .pill svg{width:14px;height:14px;flex:none;color:var(--c-red);} .room-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;} .room-name{margin:0;font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.12;color:var(--c-red);} .room-arrow{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%; border:1px solid var(--c-line);color:var(--c-red);transition:background-color .25s ease,color .25s ease,transform .25s ease;} .room-arrow svg{width:15px;height:15px;} .room-arrow:hover{background:var(--c-red);color:var(--c-white);transform:rotate(45deg);} .room-desc{margin:8px 0 0;font-family:var(--font-sans);font-size:16px;line-height:1.3;color:var(--c-taupe);max-width:500px;} @media (min-width:810px){ .feature{padding:0 40px;} .feature-head{font-size:58px;} .feature-sub{font-size:32px;} .rooms{padding:108px 40px;} .rooms-top{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px;} .rooms-head{font-size:58px;} .rooms-row{flex-direction:row;align-items:flex-start;gap:20px;} .rooms-row>.room-card{flex:1 1 0;min-width:0;} } @media (min-width:1200px){ .feature{padding:0 50px;} .feature-head{font-size:72px;} .feature-foot{bottom:5%;max-width:460px;gap:22px;} .feature-sub{font-size:40px;} .rooms{padding:140px 50px;} .rooms-head{font-size:72px;line-height:.9;letter-spacing:-.04em;} .rooms-top__aside{max-width:380px;} .rooms-cards{gap:40px;} .room-pills{top:20px;left:20px;} .pill{font-size:14px;} .room-name{font-size:28px;} } @media (min-width:1440px){ .feature-head{font-size:90px;} .rooms-head{font-size:90px;} } /* ============================================================ SERVICES ("Care in every detail" — stacked full-bleed cards) ============================================================ */ .services{padding:80px 20px;background:var(--c-cream);} .services-head{margin:0 0 40px;display:flex;flex-direction:column;align-items:center;text-align:center; font-family:var(--font-display);font-weight:500;color:var(--c-red);font-size:48px;line-height:.92;letter-spacing:-.03em;} .services-head .l2{font-style:italic;} .services-list{display:flex;flex-direction:column;gap:18px;} /* sticky-stack frame — passthrough on mobile, a pinned 100vh box on desktop */ .service-frame{display:contents;} .service-card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:40px; min-height:470px;width:100%;padding:32px 28px;border-radius:10px;overflow:hidden;color:var(--c-offwhite); background-size:cover;background-position:center;} /* premium dark gradient — clear at top, deepening to near-black at the bottom for depth */ .service-card::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(18,7,5,0) 0%,rgba(18,7,5,.14) 42%,rgba(18,7,5,.52) 72%,rgba(18,7,5,.88) 100%);} .service-num{font-family:var(--font-display);font-weight:500;font-size:84px;line-height:.8;color:var(--c-offwhite);} .service-bottom{display:flex;flex-direction:column;gap:18px;} .service-info{display:flex;flex-direction:column;gap:14px;align-items:flex-start;} .service-tags{display:flex;gap:8px;flex-wrap:wrap;} .tag{background:var(--c-white);color:var(--c-maroon);font-family:var(--font-sans);font-size:13px;font-weight:500;line-height:1;padding:9px 16px;border-radius:50px;} .service-title{margin:0;font-family:var(--font-display);font-weight:500;font-size:38px;line-height:.95;letter-spacing:-.03em;color:var(--c-offwhite);} /* tight, magazine-style description — medium weight, near-1.1 leading, narrow column */ .service-desc{margin:0;max-width:360px;font-family:var(--font-sans);font-weight:500;font-size:16px;line-height:1.16;color:var(--c-offwhite);} .service-cta{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px; min-height:440px;padding:48px 28px;border-radius:10px;overflow:hidden;color:var(--c-offwhite);background-size:cover;background-position:center;} .service-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(28,9,6,.45);} .service-cta__head{margin:0;display:flex;flex-direction:column;font-family:var(--font-display);font-weight:500;font-size:54px;line-height:.92;} .service-cta__head .l2{font-style:italic;} .service-cta__desc{margin:0;max-width:420px;font-family:var(--font-sans);font-size:16px;line-height:1.3;} /* ============================================================ DINING & WELLNESS (blurred bg + sharp inset image cards) ============================================================ */ .dw{padding:80px 20px;background:var(--c-cream);} .dw-head{margin:0 0 40px;display:flex;flex-direction:column;align-items:center;text-align:center; font-family:var(--font-display);font-weight:500;color:var(--c-red);font-size:48px;line-height:.92;letter-spacing:-.03em;} .dw-head .l2{font-style:italic;} .dw-grid{display:flex;flex-direction:column;gap:18px;} .dw-card{position:relative;border-radius:10px;overflow:hidden;min-height:520px;display:flex;} /* bg kept softly blurred (less extreme than before) so the scene reads through, like the live site */ .dw-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(11px) brightness(.62);transform:scale(1.18);} .dw-content{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;gap:24px;padding:44px 28px;color:var(--c-offwhite);} .dw-title{margin:0;font-family:var(--font-display);font-weight:500;font-size:36px;line-height:1;} /* image + "Just for you" sit together in the vertical centre; the link is pushed to the card's bottom */ .dw-mid{display:flex;flex-direction:column;align-items:center;gap:18px;} .dw-inner{width:min(74%,380px);border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);} .dw-inner img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;} .dw-sub{margin:0;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:28px;line-height:1;letter-spacing:-.01em;color:var(--c-offwhite);} .dw-link{font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.12em; color:var(--c-offwhite);padding-bottom:6px;border-bottom:1px solid rgba(250,246,240,.55);} /* ============================================================ NEARBY (pinned card · scroll-driven image wipe) Scenes stack and clip-reveal up the screen (clip-path set by js/main.js); the cream frame + number/place stay pinned, the number/place text updates per scene. ============================================================ */ .nearby{position:relative;background:var(--c-maroon);} .nearby-track{position:relative;height:400vh;} .nearby-pin{position:sticky;top:0;height:100vh;overflow:hidden;} /* Two scene-strips that both WIPE vertically on scroll: a blurred full-bleed BACKGROUND and a sharp one inside the card frame. Each strip = the 4 scenes stacked; JS slides each by translateY (bg by a viewport per scene, the card by a card-frame per scene → the card wipes at a gentler rate = parallax, like the reference). No clip-path. Heights are set in px by JS (nbLayout) off window.innerHeight, because `vh` is unreliable in some preview envs. */ .nearby-bg{position:absolute;inset:0;z-index:0;background:var(--c-maroon);overflow:hidden;} .nb-strip{position:absolute;left:0;top:0;width:100%;will-change:transform;} .nb-scene{position:absolute;left:0;width:100%;overflow:hidden;} /* top + height set per-index by JS */ .nb-scene img,.nb-scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(10px) brightness(.62);transform:scale(1.08);} /* card frame — anchored. Each scene photo is a STATIC cover-crop; JS clip-wipes them so only the band the bg shows for that scene is visible → photo never pans, just gets revealed/covered by the bg's wipe line. */ .nearby-inner{position:relative;z-index:1;height:100%;width:100%;display:flex;align-items:center;justify-content:center;padding:0 var(--pad-x);} .nearby-card{position:relative;width:100%;max-width:460px;background:var(--c-cream);color:var(--c-maroon);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:16px;} .nearby-media{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3;} .nb-card-scene{position:absolute;inset:0;} .nb-card-scene img,.nb-card-scene video{display:block;width:100%;height:100%;object-fit:cover;} .nearby-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;row-gap:6px;flex-wrap:wrap;padding:2px 8px 8px;} .nb-num{font-family:var(--font-display);font-weight:500;font-size:64px;line-height:.78;color:var(--c-red);white-space:nowrap;} .nb-num--word{font-size:42px;line-height:.9;} .nb-num__link{color:inherit;text-decoration:none;} .nb-num__link:hover{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.14em;} @media (max-width:479.98px){ .nearby-foot{display:block;} .nb-num{font-size:56px;} .nb-num--word{font-size:36px;} .nearby-foot .nb-place{text-align:left;margin-top:8px;max-width:none;} } .nb-place{margin:0;text-align:right;font-family:var(--font-sans);font-size:17px;line-height:1.4;color:var(--c-taupe);max-width:34ch;} .nb-num .nb-star{font-size:.45em;display:inline-block;transform:translateY(-.55em);margin-left:.04em;} .nb-place .nb-link{color:var(--c-red);font-weight:600;text-decoration:underline;text-underline-offset:3px;} .nb-place .nb-link:hover{color:var(--c-maroon);} @media (min-width:810px){ /* anchor the card to the top-right quadrant (pinned to the grid's right edge, starting lower) — like the reference */ .nearby-inner{justify-content:flex-end;align-items:flex-start;padding-top:clamp(120px,17vh,200px);} .nearby-card{max-width:548px;padding:24px;gap:20px;} .nearby-media{aspect-ratio:3/2;} .nb-num{font-size:96px;} .nb-num--word{font-size:58px;} .nb-place{font-size:18px;} } @media (min-width:1200px){ .nearby-card{max-width:588px;} .nb-num{font-size:108px;} .nb-num--word{font-size:66px;} } /* ============================================================ PACKAGES (3-column: 2 image cards + text card) + quote banner ============================================================ */ .packages{padding:80px 20px;background:var(--c-cream);} .packages-head{margin:0 0 40px;text-align:center;font-family:var(--font-display);font-weight:500;color:var(--c-red);font-size:48px;line-height:.92;letter-spacing:-.03em;} .packages-head .l2{font-style:italic;} .pkg-grid{display:flex;flex-direction:column;gap:18px;} .pkg-card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;text-align:center; min-height:560px;padding:24px;border-radius:10px;overflow:hidden;color:var(--c-offwhite);background-size:cover;background-position:center;} .pkg-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 12%,rgba(0,0,0,.48) 56%,rgba(0,0,0,.92) 100%);} .pkg-label{position:absolute;top:18px;left:18px;background:rgba(250,246,240,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:var(--c-offwhite);font-family:var(--font-sans);font-size:13px;font-weight:500;padding:8px 14px;border-radius:50px;} .pkg-body{display:flex;flex-direction:column;gap:12px;align-items:center;} .pkg-name{margin:0;font-family:var(--font-display);font-weight:500;font-size:40px;line-height:1;} .pkg-desc{margin:0;max-width:320px;font-family:var(--font-sans);font-size:14px;line-height:1.35;color:rgba(250,246,240,.85);} .pkg-foot{position:absolute;left:24px;right:24px;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:14px;} .pkg-price{font-family:var(--font-display);font-weight:500;font-size:24px;} .pkg-more{display:inline-flex;align-items:center;justify-content:center;min-width:200px;height:52px;padding:0 26px;border-radius:50px; border:1px solid rgba(250,246,240,.55);color:var(--c-offwhite);font-family:var(--font-sans);font-size:14px;font-weight:500;transition:background-color .25s ease,color .25s ease;} .pkg-more:hover{background:var(--c-offwhite);color:var(--c-maroon);} .pkg-text{display:flex;flex-direction:column;min-height:560px;padding:34px;border-radius:10px;background:var(--c-offwhite);color:var(--c-red);} .pkg-quote{font-family:var(--font-display);font-size:96px;line-height:.5;color:var(--c-red);} .pkg-text__body{margin:24px 0 auto;font-family:var(--font-display);font-weight:500;font-size:28px;line-height:1.12;letter-spacing:-.01em;color:var(--c-red);} .pkg-text__link{align-self:flex-start;font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--c-red);padding-bottom:6px;border-bottom:1px solid rgba(173,26,26,.4);} /* Sofía Navarro quote card — light card, photo left + quote mark + attribution */ .pkg-quote-banner{margin-top:18px;background:var(--c-offwhite);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:22px;} .pqb-photo{flex:none;width:150px;border-radius:8px;overflow:hidden;} .pqb-photo img{display:block;width:100%;aspect-ratio:5/6;object-fit:cover;} .pqb-body{flex:1;display:flex;flex-direction:column;gap:12px;} .pqb-mark{font-family:var(--font-display);font-weight:500;font-size:54px;line-height:.45;color:var(--c-red);} .pqb-text{margin:0;max-width:820px;font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.16;color:var(--c-red);} .pqb-author{display:flex;flex-direction:column;gap:2px;margin-top:4px;} .pqb-name{font-family:var(--font-sans);font-size:16px;font-weight:600;color:var(--c-maroon);} .pqb-role{font-family:var(--font-sans);font-size:13px;color:var(--c-taupe);} @media (min-width:810px){ .packages{padding:108px 40px;} .packages-head{font-size:58px;margin-bottom:48px;} .pkg-grid{flex-direction:row;flex-wrap:wrap;gap:20px;} .pkg-card,.pkg-text{flex:1 1 calc(50% - 10px);min-width:0;min-height:640px;} .pkg-quote-banner{margin-top:20px;flex-direction:row;align-items:center;gap:40px;padding:36px 44px;} .pqb-photo{width:184px;} .pqb-text{font-size:28px;} } @media (min-width:1200px){ .packages{padding:140px 50px;} .packages-head{font-size:72px;} .pkg-grid{flex-wrap:nowrap;gap:20px;} .pkg-card,.pkg-text{flex:1 1 0;min-height:743px;} .pkg-text__body{font-size:30px;} .pqb-text{font-size:30px;} } @media (min-width:1440px){ .packages-head{font-size:90px;} } /* ============================================================ REVIEWS ============================================================ */ .reviews{position:relative;overflow:hidden;padding:64px 20px 76px;background:var(--c-maroon);color:var(--c-cream);} .reviews-bg{position:absolute;inset:0;z-index:0;} .reviews-bg img{width:100%;height:100%;object-fit:cover;} .reviews-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,5,4,.60) 0%,rgba(18,5,4,.42) 42%,rgba(18,5,4,.74) 100%);} .reviews-top{position:relative;z-index:1;display:flex;flex-direction:column;gap:26px;margin-bottom:38px;} .reviews-head{margin:0;display:flex;flex-direction:column;font-family:var(--font-display);font-weight:500;color:var(--c-cream);font-size:46px;line-height:.96;letter-spacing:-.03em;} .reviews-head .l2{font-style:italic;} .reviews-stat{align-self:flex-start;background:var(--c-offwhite);color:var(--c-maroon);border-radius:18px;padding:20px 24px;display:flex;flex-direction:column;gap:16px;min-width:316px;box-shadow:0 18px 50px rgba(0,0,0,.28);} .stat-row{display:flex;align-items:center;justify-content:space-between;gap:28px;} .avatars{display:flex;} .avatars img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--c-offwhite);margin-left:-13px;} .avatars img:first-child{margin-left:0;} .stat-num{font-family:var(--font-display);font-weight:600;font-size:46px;line-height:.9;color:var(--c-red);} .stat-num small{font-size:22px;font-weight:500;} .stat-text{margin:0;text-align:right;font-family:var(--font-sans);font-size:13px;line-height:1.25;color:var(--c-maroon);max-width:120px;} .stat-text strong{font-weight:600;} .stars{color:var(--c-red);letter-spacing:3px;font-size:16px;} /* horizontal marquee of review cards */ .reviews-marquee{position:relative;z-index:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);} .reviews-track{display:flex;width:max-content;animation:revscroll 46s linear infinite;} .reviews-marquee:hover .reviews-track{animation-play-state:paused;} @keyframes revscroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} .rev-card{flex:none;width:330px;margin-right:18px;background:var(--c-offwhite);border-radius:16px;padding:20px;display:flex;align-items:center;gap:16px;} .rev-photo{flex:none;width:110px;border-radius:10px;overflow:hidden;} .rev-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;} .rev-body{display:flex;flex-direction:column;gap:8px;min-width:0;} .rev-mark{font-family:var(--font-display);font-weight:500;font-size:38px;line-height:.35;color:var(--c-red);} .rev-quote{margin:0;font-family:var(--font-display);font-weight:500;font-size:17px;line-height:1.22;color:var(--c-red);} .rev-foot{display:flex;flex-direction:column;gap:3px;margin-top:6px;} .rev-name{font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--c-maroon);} /* partner sentence — sits over the hallway bg, below the marquee (left-aligned) */ .reviews-partner{position:relative;z-index:1;margin:52px 0 0;max-width:430px;font-family:var(--font-display);font-weight:500;font-size:26px;line-height:1.12;color:var(--c-cream);} @media (min-width:810px){ .reviews{padding:96px 40px 108px;} .reviews-top{flex-direction:row;justify-content:space-between;align-items:flex-end;margin-bottom:50px;} .reviews-head{font-size:72px;} .reviews-stat{align-self:auto;flex:none;} .rev-card{width:486px;margin-right:26px;padding:26px;gap:22px;} .rev-photo{width:136px;} .rev-mark{font-size:48px;} .rev-quote{font-size:21px;} .reviews-partner{margin-top:64px;font-size:30px;max-width:480px;} .pola figcaption{font-size:20px;padding-bottom:18px;} } @media (min-width:1200px){ .reviews{padding:120px 50px 132px;} .reviews-head{font-size:90px;} .rev-card{width:520px;} } /* ============================================================ GALLERY ============================================================ */ /* Mobile: tall section with breathing room to drag; big heading filling the width; big cards. Flex-centres the heading so the text sits mid-section with empty room above/below/around to fling the stickers into and reveal it. */ .gallery{position:relative;overflow:hidden;background:#12100e;padding:70px 14px 70px;min-height:90vh;display:flex;align-items:center;justify-content:center;} .gallery-title{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--font-display);font-weight:500;color:var(--c-red);font-size:clamp(150px,40vw,400px);line-height:.86;letter-spacing:-.05em;pointer-events:none;user-select:none;} .gallery-title .g3{font-style:italic;} /* drag stage covers the section; only the cards capture the pointer */ .gallery-stage{position:absolute;inset:0;pointer-events:none;} .pola{position:absolute;left:50%;top:50%;width:clamp(264px,70vw,332px);background:#fff;border-radius:10px;padding:14px 14px 0;box-shadow:0 24px 52px rgba(40,12,8,.22),0 5px 14px rgba(40,12,8,.13);pointer-events:auto;cursor:grab;touch-action:none;will-change:transform;transform:translate(-50%,-50%);} .pola.grabbing{cursor:grabbing;box-shadow:0 38px 76px rgba(40,12,8,.34),0 10px 22px rgba(40,12,8,.2);} .pola-photo{overflow:hidden;border-radius:3px;background:var(--c-sand);} .pola-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;-webkit-user-drag:none;user-select:none;pointer-events:none;} .pola figcaption{padding:12px 5px 16px;font-family:var(--font-script);font-size:19px;line-height:1.05;color:var(--c-maroon);text-align:left;} html.reveal-on .pola{opacity:0;} /* Desktop: taller stage (2-line heading) with room to move the cards; bigger cards. */ @media (min-width:810px){ .gallery{min-height:880px;padding:90px 40px 90px;} .gallery-title{font-size:clamp(300px,26vw,520px);} .pola{width:clamp(360px,28.8vw,544px);padding:16px 16px 0;} .pola figcaption{font-size:23px;padding:14px 6px 18px;} } /* ============================================================ NEWS ============================================================ */ .news{padding:80px 20px;background:var(--c-cream);} .news-head{display:flex;flex-direction:column;gap:16px;margin-bottom:40px;} .news-title{margin:0;font-family:var(--font-display);font-weight:500;color:var(--c-red);font-size:48px;line-height:.92;letter-spacing:-.03em;} .news-title .l2{font-style:italic;} .news-sub{margin:0;max-width:520px;font-family:var(--font-sans);font-size:16px;line-height:1.3;color:var(--c-taupe);} .news-grid{display:grid;grid-template-columns:1fr;gap:24px;} .news-card{display:flex;flex-direction:column;gap:16px;} .news-card__img{position:relative;border-radius:10px;overflow:hidden;} .news-card__img img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease;} .news-card:hover .news-card__img img{transform:scale(1.04);} .news-tag{position:absolute;top:14px;left:14px;background:rgba(250,246,240,.88);color:var(--c-maroon);font-family:var(--font-sans);font-size:12px;font-weight:500;padding:6px 14px;border-radius:50px;} .news-card__title{margin:0;font-family:var(--font-display);font-weight:500;font-size:26px;line-height:1.05;color:var(--c-red);} .news-date{font-family:var(--font-sans);font-size:14px;color:var(--c-taupe);} .news-cta{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:40px;} .news-cta p{margin:0;max-width:460px;font-family:var(--font-sans);font-size:16px;line-height:1.3;color:var(--c-taupe);} .explore-cards{display:flex;flex-direction:column;gap:16px;margin-top:48px;} .explore-card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end; aspect-ratio:5/4;padding:30px;border-radius:10px;overflow:hidden;color:var(--c-offwhite);background-size:cover;background-position:center;} .explore-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(28,9,6,0) 38%,rgba(28,9,6,.58) 80%,rgba(28,9,6,.74) 100%);} .explore-copy{display:flex;flex-direction:column;gap:6px;} .explore-eyebrow{font-family:var(--font-sans);font-size:13px;text-transform:uppercase;letter-spacing:.14em;} .explore-title{font-family:var(--font-display);font-weight:500;font-style:italic;font-size:56px;line-height:1;} .explore-arrow{position:absolute;right:26px;bottom:26px;width:50px;height:50px;border-radius:50%;background:var(--c-red);color:var(--c-offwhite);display:flex;align-items:center;justify-content:center;transition:transform .35s ease;} .explore-arrow svg{width:18px;height:18px;} .explore-card:hover .explore-arrow{transform:rotate(45deg);} /* ============================================================ FOOTER ============================================================ */ /* position:relative + z-index lifts the footer above the sticky hero (z-index 1) — otherwise the pinned hero video covers it */ .site-footer{position:relative;z-index:2;background:var(--c-maroon);color:var(--c-cream);overflow:hidden;} .footer-inner{max-width:1400px;margin:0 auto;padding:56px 20px 28px;} /* top: centred logo + newsletter */ .footer-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding-bottom:52px;border-bottom:1px solid rgba(219,207,204,.18);} .footer-logo{height:42px;width:auto;} .footer-news__text{margin:0;max-width:540px;font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.18;color:var(--c-cream);} .footer-news__form{display:flex;gap:10px;width:100%;max-width:430px;} .footer-news__form input{flex:1;min-width:0;background:transparent;border:1px solid rgba(219,207,204,.4);border-radius:50px;padding:0 22px;height:54px;color:var(--c-cream);font-family:var(--font-sans);font-size:16px;} .footer-news__form input::placeholder{color:rgba(246,239,229,.5);} .footer-news__form button{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;flex:none;border-radius:50%;background:var(--c-red);color:var(--c-white);cursor:pointer;transition:background-color .2s ease,color .2s ease;} .footer-news__form button svg{width:20px;height:20px;} .footer-news__form button:hover{background:var(--c-cream);color:var(--c-maroon);} /* columns */ .footer-main{display:flex;flex-direction:column;gap:40px;padding:48px 0;} .footer-label{margin:0 0 18px;font-family:var(--font-sans);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:rgba(246,239,229,.55);} .footer-address{margin:0;font-style:normal;font-family:var(--font-display);font-weight:500;font-size:clamp(22px,6vw,28px);line-height:1.26;color:var(--c-cream);} .fbrand__lead{margin:14px 0 0;font-family:var(--font-display);font-weight:500;font-size:clamp(24px,5.6vw,30px);line-height:1.16;color:var(--c-cream);} .fbrand__sub{margin:14px 0 0;font-family:var(--font-sans);font-size:13.5px;line-height:1.5;letter-spacing:.02em;color:rgba(246,239,229,.58);} .footer-social{display:flex;gap:16px;margin-top:24px;} .footer-social a{color:rgba(246,239,229,.7);transition:color .2s ease;} .footer-social a:hover{color:var(--c-red);} .footer-social svg{width:20px;height:20px;display:block;} /* brand-column small print: hairline divider + ONE muted line of legal links — deliberately smaller/lighter than everything else in the column (legal boilerplate, not brand content). Replaces the old .footer-legal row in the bottom bar. */ .fbrand__legal{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(219,207,204,.18);font-family:var(--font-sans);font-size:12.5px;letter-spacing:.02em;} .fbrand__legal a{color:rgba(246,239,229,.5);transition:color .2s ease;} .fbrand__legal a:hover{color:var(--c-cream);} .fbrand__legal .sep{color:rgba(246,239,229,.3);} .footer-links{display:flex;flex-direction:column;gap:8px;} .footer-links a{font-family:var(--font-display);font-weight:500;font-size:20px;line-height:1.25;color:var(--c-cream);transition:color .2s ease;} .footer-links--lg a{font-size:clamp(28px,8vw,40px);line-height:1.16;} .footer-links a:hover{color:var(--c-red);} /* bottom bar */ .footer-bottom{display:flex;flex-direction:column;gap:14px;padding-top:26px;border-top:1px solid rgba(219,207,204,.18);} .footer-copy{font-family:var(--font-sans);font-size:14px;color:rgba(246,239,229,.6);} .footer-legal{display:flex;gap:24px;} .footer-legal a{font-family:var(--font-sans);font-size:14px;color:rgba(246,239,229,.6);transition:color .2s ease;} .footer-legal a:hover{color:var(--c-cream);} @media (min-width:600px){ .news-grid{grid-template-columns:1fr 1fr;} } @media (min-width:810px){ .reviews{padding:108px 40px;} .reviews-head{font-size:58px;} .news{padding:108px 40px;} .news-head{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:40px;} .news-title{font-size:58px;} .news-grid{grid-template-columns:repeat(3,1fr);} .news-cta{flex-direction:row;justify-content:space-between;align-items:center;} .explore-cards{flex-direction:row;} .explore-card{flex:1 1 0;} .explore-title{font-size:64px;} .footer-inner{padding:80px 40px 32px;} .footer-top{gap:26px;padding-bottom:64px;} .footer-news__text{font-size:26px;} .footer-main{flex-direction:row;justify-content:space-between;gap:48px;align-items:flex-start;padding:64px 0;} .footer-col--brand{flex:1.5;max-width:420px;} .footer-col{flex:1;} .footer-bottom{flex-direction:row;justify-content:space-between;align-items:center;} } @media (min-width:1200px){ .reviews{padding:140px 50px;} .reviews-head{font-size:72px;} .news{padding:140px 50px;} .news-title{font-size:72px;} .footer-inner{padding:90px 50px 36px;} } @media (min-width:1440px){ .reviews-head{font-size:90px;} .news-title{font-size:90px;} } @media (min-width:810px){ .services{padding:108px 40px;} .services-head{font-size:58px;margin-bottom:48px;} .services-list{gap:0;} /* desktop: each frame pins to the viewport top; the next card slides up and covers it (sticky stack) */ .service-frame{display:flex;position:sticky;top:0;min-height:100vh;align-items:center;} .service-card{min-height:0;height:clamp(540px,80vh,680px);padding:44px;} .service-num{font-size:120px;} .service-bottom{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:30px;} .service-title{font-size:54px;} .service-desc{font-size:20px;line-height:1.1;max-width:400px;} .service-cta{min-height:0;height:clamp(420px,62vh,520px);} .service-cta__head{font-size:72px;} .dw{padding:108px 40px;} .dw-head{font-size:58px;} .dw-grid{flex-direction:row;gap:20px;} .dw-card{flex:1 1 0;min-width:0;min-height:640px;} .dw-title{font-size:40px;} .dw-sub{font-size:34px;} } @media (min-width:1200px){ .services{padding:140px 50px;} .services-head{font-size:72px;} .service-card{height:clamp(600px,82vh,700px);padding:50px;} .service-num{font-size:150px;} .service-title{font-size:64px;} .service-desc{font-size:20px;line-height:1.1;max-width:400px;} .service-cta__head{font-size:90px;} .dw{padding:140px 50px;} .dw-head{font-size:72px;} .dw-card{min-height:720px;} .dw-inner{width:min(70%,420px);} .dw-sub{font-size:40px;} } @media (min-width:1440px){ .services-head{font-size:90px;} .dw-head{font-size:90px;} } /* ============================================================ RESPONSIVE ============================================================ */ /* About + star band — tablet/desktop scale-up */ @media (min-width:810px){ .sincebar{padding-top:80px;gap:16px;} .about{padding:108px 40px 96px;} .about-squiggle{display:block;} .about-head{font-size:58px;} .about-copy{margin-top:28px;} .about-images{flex-direction:row;justify-content:center;align-items:flex-start;gap:19px;max-width:1075px;margin-left:auto;margin-right:auto;margin-top:56px;} .about-img{width:auto;flex:1 1 0;max-width:527px;} .about-img--2{margin-top:100px;} } @media (min-width:1200px){ .sincebar{padding-top:90px;gap:18px;} .since{font-size:20px;} .about{padding:140px 50px 120px;} .about-head{font-size:72px;line-height:.9;letter-spacing:-.04em;} .about-copy{margin-top:30px;gap:18px;} .btn-group{margin-top:34px;} .about-images{margin-top:70px;} } @media (min-width:1440px){ .about-head{font-size:90px;} } /* Phone: compact nav — burger icon only (no "Menu" text), Book pill without the arrow circle (matches the reference's Phone variant). */ @media (max-width:809.98px){ .nav .menu-label{display:none;} .nav .btn-arrow{display:none;} } @media (min-width:810px){ :root{--pad-x:40px;--nav-h:72px;} .brand-logo{height:46px;} .menu-links{padding:0;} /* Book pill + arrow flush into one pill (arrow only shows on desktop) */ .nav-cta{gap:0;} .btn-book{border-radius:100px 0 0 100px;} .btn-arrow{border-radius:0 100px 100px 0;} } @media (min-width:1200px){ :root{--pad-x:50px;--nav-h:75px;} .brand-logo{height:50px;} .menu-label{font-size:16px;} } /* wordmark uses vw → scales/bleeds consistently at every width (matches the reference's SVG-scaled wordmark) so no per-breakpoint override is needed. */ /* ============================================================ BOOK PAGE (book.html) — Reserve your Escape + enquiry form, FAQ accordion + contact card, explore cards. Inner pages have no video hero → nav must be solid from paint. ============================================================ */ body.page-inner{background:var(--c-cream);} body.page-inner .nav{background:rgba(246,239,229,.82);backdrop-filter:blur(14px) saturate(1.08);-webkit-backdrop-filter:blur(14px) saturate(1.08);box-shadow:0 1px 0 rgba(72,18,14,.07);} body.page-inner .nav .menu-trigger{color:var(--c-maroon);} body.page-inner .nav .brand-logo--light{display:none;} body.page-inner .nav .brand-logo--dark{display:block;} body.page-inner .nav .btn-book,body.page-inner .nav .btn-arrow{background:var(--c-red);color:var(--c-white);} body.page-inner .nav .btn-book:hover,body.page-inner .nav .btn-arrow:hover{background:var(--c-maroon);} /* ---------- Hero — full-bleed image with a floating cream form card ---------- */ .book-hero{position:relative;padding:calc(var(--nav-h) + clamp(96px,18vh,170px)) var(--pad-x) clamp(48px,8vh,90px);overflow:hidden;} .book-hero__bg{position:absolute;inset:0;z-index:0;} .book-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 18%;} .book-card{position:relative;z-index:1;max-width:700px;margin:0 auto;background:var(--c-cream);border-radius:10px; padding:clamp(34px,5vw,70px) clamp(22px,4vw,50px);box-shadow:0 40px 130px rgba(28,9,6,.4);} .book-hero__head{max-width:560px;margin:0 auto;text-align:center;} .book-title{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(44px,11vw,64px);line-height:1.0;color:var(--c-red);letter-spacing:-.01em;} .book-title em{font-style:italic;} .book-sub{margin:16px auto 0;max-width:430px;font-family:var(--font-sans);font-size:16px;line-height:1.42;color:var(--c-taupe);} /* ---------- Enquiry form ---------- */ .book-form{width:100%;margin:38px 0 0;display:flex;flex-direction:column;gap:18px;text-align:left;} .bf-row{display:grid;gap:16px;} .bf-row--2{grid-template-columns:1fr 1fr;} .bf-field{display:flex;flex-direction:column;gap:8px;min-width:0;} .bf-control{display:flex;flex-direction:column;gap:8px;} .bf-viewlink{align-self:flex-start;font-family:var(--font-sans);font-size:13px;color:var(--c-maroon);text-decoration:underline;text-underline-offset:2px;transition:color .2s ease;} .bf-viewlink:hover{color:var(--c-red);} .bf-label{font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--c-maroon);} .bf-req{color:var(--c-red);margin-left:2px;} .bf-field input,.bf-field textarea,.bf-field select{ width:100%;font-family:var(--font-sans);font-size:15px;color:var(--c-maroon); background:var(--c-offwhite);border:1px solid var(--c-line);border-radius:10px; padding:13px 15px;transition:border-color .25s ease,box-shadow .25s ease; } .bf-field textarea{resize:vertical;min-height:118px;line-height:1.4;} .bf-field input::placeholder,.bf-field textarea::placeholder{color:var(--c-taupe);opacity:.85;} .bf-field input:focus,.bf-field textarea:focus,.bf-field select:focus{outline:none;border-color:var(--c-red);box-shadow:0 0 0 3px rgba(173,26,26,.12);} /* custom-styled select with chevron */ .bf-select{position:relative;} .bf-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:42px;cursor:pointer;} .bf-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--c-taupe);} .bf-chevron svg{width:20px;height:20px;} /* checkboxes */ .bf-check{position:relative;display:flex;align-items:flex-start;gap:12px;font-family:var(--font-sans);font-size:14px;line-height:1.45;color:var(--c-taupe);cursor:pointer;} .bf-check input{position:absolute;opacity:0;width:0;height:0;} .bf-check__box{flex:0 0 auto;width:20px;height:20px;margin-top:1px;border:1px solid var(--c-line);border-radius:5px;background:var(--c-offwhite);position:relative;transition:background .2s ease,border-color .2s ease;} .bf-check__box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--c-offwhite);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .18s ease;} .bf-check input:checked + .bf-check__box{background:var(--c-red);border-color:var(--c-red);} .bf-check input:checked + .bf-check__box::after{transform:rotate(45deg) scale(1);} .bf-check input:focus-visible + .bf-check__box{box-shadow:0 0 0 3px rgba(173,26,26,.18);} .bf-check a{color:var(--c-red);text-decoration:underline;} /* full-width red pill with a white arrow circle pinned right (matches the live) */ .bf-submit{position:relative;width:100%;margin-top:8px;display:inline-flex;align-items:center;justify-content:center;height:64px;padding:0 60px;border:none;border-radius:100px;background:var(--c-red);color:var(--c-offwhite);font-family:var(--font-sans);font-size:16px;font-weight:500;cursor:pointer;transition:background-color .3s ease;} .bf-submit:hover{background:var(--c-maroon);} .bf-submit__arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--c-offwhite);color:var(--c-red);transition:transform .35s ease;} .bf-submit__arrow svg{width:18px;height:18px;} .bf-submit:hover .bf-submit__arrow{transform:translateY(-50%) rotate(45deg);} .bf-success{margin:4px 0 0;font-family:var(--font-sans);font-size:14px;color:var(--c-red);} /* ---------- FAQ (heading + contact card LEFT, accordion RIGHT) ---------- */ .faq{padding:64px var(--pad-x) 96px;background:var(--c-cream);} .faq-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr;grid-template-areas:"head" "list" "contact";gap:28px;} .faq-left{grid-area:head;} .faq-title{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(64px,17vw,104px);line-height:.9;color:var(--c-red);} .faq-sub{margin:14px 0 0;max-width:340px;font-family:var(--font-sans);font-size:16px;line-height:1.42;color:var(--c-taupe);} /* accordion — offwhite rounded cards with a red + circle */ .faq-list{grid-area:list;display:flex;flex-direction:column;gap:14px;} .faq-item{background:var(--c-offwhite);border-radius:10px;overflow:hidden;} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--font-display);font-weight:500;font-size:19px;line-height:1.25;color:var(--c-maroon);} .faq-icon{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--c-red);} .faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;background:var(--c-offwhite);transition:transform .3s ease,opacity .3s ease;} .faq-icon::before{width:14px;height:2px;transform:translate(-50%,-50%);} .faq-icon::after{width:2px;height:14px;transform:translate(-50%,-50%);} .faq-q[aria-expanded="true"] .faq-icon::after{transform:translate(-50%,-50%) scaleY(0);opacity:0;} .faq-a{overflow:hidden;max-height:0;transition:max-height .42s cubic-bezier(.4,0,.2,1);} .faq-a p{margin:0;padding:0 24px 22px;font-family:var(--font-sans);font-size:15px;line-height:1.55;color:var(--c-taupe);} /* contact card — person on top, then text, then Contact-us button */ .faq-contact{grid-area:contact;max-width:440px;background:var(--c-offwhite);border-radius:14px;padding:26px;} .faq-contact__person{display:flex;align-items:center;gap:14px;} .faq-contact__person img{width:56px;height:56px;border-radius:50%;object-fit:cover;} .faq-contact__name{margin:0;font-family:var(--font-sans);font-size:18px;font-weight:600;color:var(--c-maroon);} .faq-contact__role{margin:2px 0 0;font-family:var(--font-sans);font-size:13px;color:var(--c-taupe);} .faq-contact__text{margin:18px 0 0;font-family:var(--font-sans);font-size:15px;line-height:1.5;color:var(--c-taupe);} .faq-contact__cta{margin-top:22px;} .faq-contact__channels{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;} .faq-contact__channels a{ display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%; background:var(--c-red);color:var(--c-white); transition:background-color .3s ease,transform .3s ease; } .faq-contact__channels a svg{width:20px;height:20px;} .faq-contact__channels a:hover{background:var(--c-maroon);transform:translateY(-2px);} /* ---------- Explore (standalone on book page) ---------- */ .explore{padding:0 var(--pad-x) 80px;background:var(--c-cream);} .explore .explore-cards{margin-top:0;} @media (min-width:900px){ .faq-grid{grid-template-columns:minmax(0,42%) 1fr;grid-template-areas:"head list" "contact list";column-gap:60px;row-gap:36px;align-items:start;} .faq-q{font-size:21px;} } /* ============================================================ ABOUT PAGE (about.html) — hero + collage, stats counters, Our Story, Team grid. Reuses Reviews + Explore + Footer. ============================================================ */ /* ---------- Hero ---------- */ .ab-hero{padding:calc(var(--nav-h) + 48px) var(--pad-x) 56px;background:var(--c-cream);} .ab-hero__head{max-width:760px;margin:0 auto;text-align:center;} .ab-eyebrow{display:inline-block;font-family:var(--font-script);font-size:26px;line-height:1;color:var(--c-red);margin-bottom:14px;} .ab-hero__title{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(40px,9vw,72px);line-height:1.02;letter-spacing:-.01em;color:var(--c-red);} .ab-hero__title em{font-style:italic;} .ab-hero__sub{margin:20px auto 0;max-width:540px;font-family:var(--font-sans);font-size:17px;line-height:1.45;color:var(--c-taupe);} /* collage: 2×2 on phone → staggered 4-across on desktop */ .ab-collage{margin:44px auto 0;max-width:1180px;display:grid;grid-template-columns:1fr 1fr;gap:14px;} .ab-collage__item{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:var(--c-sand);} .ab-collage__item img{width:100%;height:100%;object-fit:cover;} /* ---------- Stats ---------- */ .ab-stats{padding:24px var(--pad-x) 72px;background:var(--c-cream);} .ab-stats__grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:36px 28px;} .ab-stat{display:flex;flex-direction:column;gap:8px;padding-top:22px;border-top:1px solid var(--c-line);} .ab-stat__num{font-family:var(--font-display);font-weight:500;font-size:clamp(48px,12vw,80px);line-height:.92;color:var(--c-red);letter-spacing:-.01em;} .ab-stat__star{margin-left:4px;} .ab-stat__label{margin:0;font-family:var(--font-sans);font-size:15px;line-height:1.35;color:var(--c-taupe);max-width:200px;} /* ---------- Our Story ---------- */ .ab-story{position:relative;padding:64px var(--pad-x) 72px;background:var(--c-cream);overflow:hidden;} .ab-story__watermark{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-family:var(--font-display);font-style:italic;font-weight:500;font-size:26vw;line-height:1;color:var(--c-red);opacity:.05;pointer-events:none;white-space:nowrap;z-index:0;} .ab-story__inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:32px;} .ab-story__head{margin:0 0 8px;font-family:var(--font-display);font-weight:500;font-size:clamp(56px,16vw,90px);line-height:.92;color:var(--c-red);} .ab-story__head em{font-style:italic;} .ab-story__copy p{margin:0 0 16px;font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--c-taupe);max-width:560px;} .ab-story__copy .btn-group{margin-top:10px;} .ab-story__portrait{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:var(--c-sand);} .ab-story__portrait img{width:100%;height:100%;object-fit:cover;} .ab-story__wide{position:relative;z-index:1;max-width:1180px;margin:28px auto 0;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:var(--c-sand);} .ab-story__wide img{width:100%;height:100%;object-fit:cover;} /* ---------- Team ---------- */ .ab-team{padding:24px var(--pad-x) 88px;background:var(--c-cream);} .ab-team__head{max-width:1180px;margin:0 auto 40px;text-align:center;font-family:var(--font-display);font-weight:500;font-size:clamp(56px,17vw,90px);line-height:.92;color:var(--c-red);} .ab-team__head em{font-style:italic;} .ab-team__grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;} .team-card{margin:0;} .team-card__photo{border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:var(--c-sand);} .team-card__photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;} .team-card:hover .team-card__photo img{transform:scale(1.04);} .team-card__name{margin:14px 0 0;font-family:var(--font-display);font-weight:500;font-size:20px;line-height:1.1;color:var(--c-maroon);} .team-card__role{margin:4px 0 0;font-family:var(--font-sans);font-size:14px;line-height:1.3;color:var(--c-taupe);} /* contact card occupies a grid cell alongside the team photos */ .team-contact{display:flex;flex-direction:column;justify-content:space-between;gap:24px;background:var(--c-sand);border-radius:12px;padding:26px;} .team-contact__text{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(22px,5vw,26px);line-height:1.18;color:var(--c-red);} .team-contact__cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:100px;background:var(--c-red);color:var(--c-offwhite);font-family:var(--font-sans);font-size:15px;font-weight:500;transition:background-color .3s ease;} .team-contact__cta svg{width:16px;height:16px;transition:transform .3s ease;} .team-contact__cta:hover{background:var(--c-maroon);} .team-contact__cta:hover svg{transform:rotate(45deg);} /* ---------- About responsive ---------- */ @media (min-width:810px){ .ab-collage{grid-template-columns:repeat(4,1fr);gap:18px;} /* gentle vertical stagger like the homepage About images */ .ab-collage__item--a{margin-top:32px;} .ab-collage__item--b{margin-top:0;} .ab-collage__item--c{margin-top:48px;} .ab-collage__item--d{margin-top:16px;} .ab-stats__grid{grid-template-columns:repeat(4,1fr);gap:0;} .ab-stat{padding:0 26px;border-top:none;border-left:1px solid var(--c-line);} .ab-stat:first-child{border-left:none;padding-left:0;} .ab-story__inner{flex-direction:row;align-items:flex-end;gap:48px;} .ab-story__copy{flex:1 1 0;} .ab-story__portrait{flex:0 0 42%;max-width:460px;} .ab-team__grid{grid-template-columns:repeat(4,1fr);gap:28px 22px;} } @media (min-width:1200px){ .ab-stat__label{font-size:16px;} } /* ============================================================ MENU · "Contact us" block (layout variant E, chosen 2026-07-07): the old "Auvelle" sublinks are gone; the social links render as serif text links (label via data-label) inside the sub column. ============================================================ */ .menu-col--sub .menu-social{flex-direction:column;align-items:flex-start;gap:9px;} .menu-col--sub .menu-social a{width:auto;height:auto;background:transparent;border-radius:0; font-family:var(--font-display);font-size:17px;line-height:1.25;color:#241510; text-decoration:underline;text-underline-offset:3px;transition:color .2s ease;} .menu-col--sub .menu-social a:hover{background:transparent;color:var(--c-red);} .menu-col--sub .menu-social a svg{display:none;} .menu-col--sub .menu-social a::after{content:attr(data-label);} /* ============================================================ PROGRESSIVE BLUR — edge strips where marquee content slides out of FOCUS, not just opacity (vanilla port of skiper-ui #41). Five stacked backdrop-filter layers, each mask-banded to its own slice of the strip so the blur ramps 0.5→8px toward the outer edge. Pure CSS, no JS. The host wrapper (.logos, .reviews-marquee) must be position:relative; its existing transparency mask keeps providing the fade — and is the automatic fallback where backdrop-filter is unsupported (the layers simply paint nothing). Markup: ============================================================ */ .pblur{position:absolute;top:0;bottom:0;width:var(--pb-w,clamp(72px,11vw,170px));z-index:3;pointer-events:none;} .pblur--left{left:0;--pb-dir:to left;} .pblur--right{right:0;--pb-dir:to right;} .pblur i{position:absolute;inset:0;} .pblur i:nth-child(1){-webkit-backdrop-filter:blur(calc(var(--pb-max,8px)/16));backdrop-filter:blur(calc(var(--pb-max,8px)/16)); -webkit-mask:linear-gradient(var(--pb-dir),transparent 0%,#000 17%,#000 34%,transparent 50%); mask:linear-gradient(var(--pb-dir),transparent 0%,#000 17%,#000 34%,transparent 50%);} .pblur i:nth-child(2){-webkit-backdrop-filter:blur(calc(var(--pb-max,8px)/8));backdrop-filter:blur(calc(var(--pb-max,8px)/8)); -webkit-mask:linear-gradient(var(--pb-dir),transparent 17%,#000 34%,#000 50%,transparent 67%); mask:linear-gradient(var(--pb-dir),transparent 17%,#000 34%,#000 50%,transparent 67%);} .pblur i:nth-child(3){-webkit-backdrop-filter:blur(calc(var(--pb-max,8px)/4));backdrop-filter:blur(calc(var(--pb-max,8px)/4)); -webkit-mask:linear-gradient(var(--pb-dir),transparent 34%,#000 50%,#000 67%,transparent 84%); mask:linear-gradient(var(--pb-dir),transparent 34%,#000 50%,#000 67%,transparent 84%);} .pblur i:nth-child(4){-webkit-backdrop-filter:blur(calc(var(--pb-max,8px)/2));backdrop-filter:blur(calc(var(--pb-max,8px)/2)); -webkit-mask:linear-gradient(var(--pb-dir),transparent 50%,#000 67%,#000 84%,transparent 100%); mask:linear-gradient(var(--pb-dir),transparent 50%,#000 67%,#000 84%,transparent 100%);} .pblur i:nth-child(5){-webkit-backdrop-filter:blur(var(--pb-max,8px));backdrop-filter:blur(var(--pb-max,8px)); -webkit-mask:linear-gradient(var(--pb-dir),transparent 67%,#000 84%); mask:linear-gradient(var(--pb-dir),transparent 67%,#000 84%);} /* NOTE: tried on the reviews marquee, REMOVED 2026-07-10 — large light content-dense cards over a dark photo bg turn muddy when faded/blurred at the edges (partial transparency mixes cream into near-black mid-card). Keep this utility for small repeating items on a flat bg (logos strip); big card carousels read best with a clean hard cut. */ /* Count-up numbers (.count[data-count], animated by js/main.js): tabular figures so the digits don't wobble sideways mid-count (no-op if the font lacks the feature). */ .count{font-variant-numeric:tabular-nums;} /* ============================================================ FOOTER REVEAL — site-wide (moved here from index.html inline on 2026-07-12 so EVERY page shares it; it was EN-index-only before). The footer drops UNDER #main (z-index:2) and sticks to the viewport bottom, so #main slides up off it to uncover it at the end of the page. A sticky reveal can only show a footer that FITS the viewport, so the footer is compacted (below) and the reveal is gated per width tier to the heights where the compacted footer actually fits. Layering: homepages = footer(0) < .hero-pin(1) < #main(2); subpages have no hero-pin, so footer(0) < #main(2). Either way #main covers the footer until the end of scroll, then slides off to reveal it. To revert site-wide: delete this block. */ /* footer compaction (all widths) — reclaims ~245px of padding so it fits the reveal */ .footer-inner{ padding-top:32px; padding-bottom:20px; } .footer-top{ gap:16px; padding-bottom:24px; } .footer-news__text{ font-size:21px; } .footer-main{ padding:30px 0; } .footer-social{ margin-top:12px; } .footer-bottom{ padding-top:14px; } /* mobile/stacked (<810px): restructure the stacked columns into a compact grid — brand full-width, Explore | Resources side by side, Contact/Kontakt as one inline row — so the whole footer fits a phone screen. All content kept, just denser. */ @media (max-width:809.98px){ .footer-inner{ padding-top:24px; padding-bottom:14px; } .footer-logo{ height:24px; } .footer-top{ gap:12px; padding-bottom:18px; } .footer-news__text{ font-size:16.5px; max-width:340px; } .footer-news__form{ max-width:340px; } .footer-news__form input{ height:46px; padding:0 18px; font-size:15px; } .footer-news__form button{ width:46px; height:46px; } .footer-main{ display:grid; grid-template-columns:1fr 1fr; gap:20px 18px; padding:20px 0; } .footer-col--brand{ grid-column:1/-1; } .footer-label{ font-size:10px; margin-bottom:8px; } .fbrand__lead{ font-size:17px; margin-top:4px; } .fbrand__sub{ font-size:12px; margin-top:6px; } .footer-social{ margin-top:10px; gap:14px; } .footer-social svg{ width:18px; height:18px; } .fbrand__legal{ margin-top:12px; padding-top:10px; font-size:12px; } .footer-links{ gap:5px; } .footer-links a{ font-size:14.5px; } .footer-links--lg a{ font-size:16px; line-height:1.3; } /* Contact (EN) / Kontakt (DE) drops below Explore|Resources as one full-width inline row */ .footer-col[aria-label="Contact"], .footer-col[aria-label="Kontakt"]{ grid-column:1/-1; order:5; } .footer-col[aria-label="Contact"] .footer-links, .footer-col[aria-label="Kontakt"] .footer-links{ flex-direction:row; flex-wrap:wrap; gap:6px 16px; } .footer-bottom{ padding-top:12px; } .footer-copy{ font-size:12px; } } /* the reveal itself, per width tier (only where the compacted footer fits) */ @media (min-width:1024px) and (min-height:700px){ .site-footer{ position:sticky; bottom:0; z-index:0; } } @media (min-width:810px) and (max-width:1023.98px) and (min-height:780px){ .site-footer{ position:sticky; bottom:0; z-index:0; } } @media (max-width:809.98px) and (min-height:660px){ .site-footer{ position:sticky; bottom:0; z-index:0; } /* compacted footer measures ~639px @360-375w */ } /* ============================================================ COOKIE CONSENT — site-wide, markup injected by js/main.js (DSGVO/TTDSG). Laptop: dark editorial corner card, bottom-left. Mobile (<=809.98px): slim full-width bar, flush to the bottom, no eyebrow. Accept / Decline only; withdraw via the footer "Cookie settings" link. ============================================================ */ .cc-banner{ position:fixed; z-index:130; left:20px; bottom:20px; width:392px; max-width:calc(100vw - 40px); background:#3d0f0b; color:#f4ece0; border:1px solid rgba(246,236,224,.14); border-radius:16px; padding:20px 20px 18px; box-shadow:0 22px 54px rgba(20,6,3,.5); font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } .cc-banner[hidden]{ display:none; } .cc-text{ margin:0 0 15px; font-size:12.5px; line-height:1.5; color:rgba(244,236,224,.82); } .cc-text a{ color:#f4ece0; text-decoration:underline; text-underline-offset:2px; } .cc-actions{ display:flex; gap:24px; align-items:center; } /* Accept + Decline as identical underlined text links — equal prominence (compliant), just lighter than pills. Same font/size/weight/colour; only the word differs. */ .cc-btn{ appearance:none; -webkit-appearance:none; cursor:pointer; background:transparent; border:0; margin:0; padding:12px 4px; color:#f4ece0; font:600 13px/1 "DM Sans",system-ui,sans-serif; letter-spacing:.01em; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; transition:opacity .18s ease; } .cc-accept, .cc-decline{ background:transparent; border:0; color:#f4ece0; } .cc-btn:hover{ opacity:.7; } .cc-btn:focus-visible{ outline:2px solid #f4ece0; outline-offset:3px; border-radius:3px; } .cc-prefs{ cursor:pointer; } /* footer link inherits .fbrand__legal a styling */ @media (max-width:809.98px){ .cc-banner{ left:0; right:0; bottom:0; width:auto; max-width:none; border-radius:0; border:0; border-top:1px solid rgba(244,236,224,.16); padding:15px 16px 17px; box-shadow:0 -10px 26px rgba(20,6,3,.34); } .cc-text{ margin-bottom:13px; font-size:12px; } body.cc-open .enquire-pill{ display:none !important; } /* keep the floating pill clear of the bar */ } @media (prefers-reduced-motion:no-preference){ .cc-banner{ animation:ccRise .45s cubic-bezier(.2,.7,.2,1) both; } @keyframes ccRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } }