/* ========================================================= Faseelh — A Greener Tomorrow (faithful rebuild) Layered on top of Tailwind utilities. ========================================================= */ /* Google Fonts moved out of this stylesheet: a render-blocking @import created a chain (styles.css -> css2 -> woff2). Now loaded non-blocking from with preconnect + media=print/onload swap (display=swap, same rendering, faster). */ @font-face { font-family: 'Radiant'; /* woff2 (71KB) first, ttf (284KB) fallback for old browsers */ src: url('../../fonts/Radiant.woff2') format('woff2'), url('../../fonts/Radiant.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* ---- Lenis smooth scroll ---- */ 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; } .lenis.lenis-scrolling iframe { pointer-events: none; } :root { --bg: #FBFAF7; /* page cream */ --bg-2: #F3F1EB; /* subtle alt */ --ink: #0E0F0C; /* near-black */ --muted: #666666; /* secondary text */ --faint: #9A9A93; /* tertiary */ --line: #E6E4DD; /* hairline */ --card: #FFFFFF; --black: #000000; } * { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } body { font-family: 'Manrope', 'Figtree', system-ui, sans-serif; background: var(--bg); color: var(--ink); overflow-x: hidden; position: relative; } /* ---- Typography ---- Per the Figma source the display/headline face is Figtree (sans), not the serif. Instrument Serif is kept only for the footer wordmark. */ .font-serif-d { font-family: 'Figtree', system-ui, sans-serif; font-weight: 500; } .display { font-family: 'Figtree', system-ui, sans-serif; font-weight: 400; line-height: 1.06; letter-spacing: -.015em; } .serif-display { font-family: 'Radiant', 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.06; letter-spacing: -0.01em; } .label { display: inline-flex; align-items: center; gap: .55rem; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--ink); } .label .leaf { width: 22px; height: 16px; display: grid; place-items: center; } .label .leaf svg { width: 22px; height: 16px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; font-size: 15px; line-height: 1; padding: .55rem .55rem .55rem 1.15rem; border-radius: 12px; transition: background-color .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; cursor: pointer; } .btn .ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 4px; transition: background-color .2s ease, color .2s ease; } /* frosted translucent white pill + black arrow box (1:1 with Figma) */ .btn-light { background: rgba(255,255,255,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(0,0,0,.2); color: var(--ink); } .btn-light .ico { background: var(--ink); color: #fff; } /* hover = pure colour flip: pill→black, text→white, arrow box→white, arrow→black */ .btn-light:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-light:hover .ico { background: #fff; color: var(--ink); } /* solid white pill (used on the dark Pro pricing card) hover = flip: pill→black with white border, text→white, arrow box→white */ .btn-white { background: #fff; border: 1px solid #fff; color: var(--ink); } .btn-white .ico { background: var(--ink); color: #fff; } .btn-white:hover { background: var(--ink); border-color: #fff; color: #fff; } .btn-white:hover .ico { background: #fff; color: var(--ink); } /* compact footer subscribe form (slimmer input + button) */ [data-subscribe] .btn { height: 44px; padding-top: 0; padding-bottom: 0; } [data-subscribe] .btn .ico { width: 24px; height: 24px; } /* black pill variant (kept for reuse) */ .btn-dark { background: var(--ink); color: #fff; padding-left: 1.25rem; } .btn-dark .ico { background: #fff; color: var(--ink); } .btn-dark:hover { background: #000; } /* simple text pill without icon */ .btn-plain { padding: .82rem 1.3rem; } /* ---- Cards & hairlines ---- */ .bordered { border: 1px solid var(--line); } /* card hover lift/shadow intentionally disabled (kept as no-op for existing markup) */ .lift { transition: none; } .media { overflow: hidden; } .media img { transition: transform .9s cubic-bezier(.2,.7,.2,1); width: 100%; height: 100%; object-fit: cover; display:block; } .media:hover img { transform: scale(1.05); } /* Parallax image: sits a touch taller than its frame so it can drift on scroll (same effect as .hero-img; the vertical shift is written inline by main.js). */ .media img.parallax-img { position: absolute; left: 0; top: -18%; width: 100%; height: 136%; object-fit: cover; transition: none; will-change: transform; } /* ---- Reveal (only hides when JS is active, so content is safe without JS) ---- */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ---- Film grain / noise overlay — fine SVG grain over the whole document. Absolute (scrolls with the page), overlay blend so grain reads on both the light cream and the dark hero image without hazing the colours. ---- */ .grain { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; pointer-events: none; opacity: .04; /* 1:1 with the Framer source */ background-image: url('../images/noise.webp'); background-repeat: repeat; background-size: 161px 161px; } /* ---- Header (sits in normal flow at the top, scrolls away with the page) ---- */ [data-header] { background: transparent; } .logo-mark svg { display:block; } /* menu toggle icon swap */ .menu-ico { position: relative; } .menu-ico svg { position:absolute; inset:0; margin:auto; transition: opacity .25s, transform .25s; } .menu-ico .menu-ico-close { opacity:0; transform: rotate(-45deg); } [data-menu-toggle][aria-expanded="true"] .menu-ico-open { opacity:0; transform: rotate(45deg); } [data-menu-toggle][aria-expanded="true"] .menu-ico-close { opacity:1; transform: rotate(0); } /* dropdown panel */ .menu-panel { z-index: 70; transform-origin: top right; opacity: 0; transform: translateY(-8px) scale(.97); pointer-events: none; box-shadow: 0 26px 50px -22px rgba(14,15,12,.28); transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.2,1); } .menu-panel.open { opacity: 1; transform: none; pointer-events: auto; } .menu-link { display: block; padding: .62rem .85rem; border-radius: 11px; font-size: 15.5px; color: var(--ink); transition: background .2s, padding .2s; } .menu-link:hover { background: var(--bg-2); } /* ---- Hero card ---- */ .hero-card { background: var(--bg-2); box-shadow: 0 40px 80px -50px rgba(14,15,12,.45); } /* hero image is taller than the card so it can drift (parallax) without revealing edges */ .hero-img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; object-position: center 40%; opacity: 0; scale: 1.08; will-change: transform, scale, opacity; } /* Intro on every load: appears quickly, then slowly un-zooms from 1.08 → 1. Uses the independent `scale` property so it stacks with the parallax `transform` (translate) that main.js writes inline on .hero-img. JS adds .is-loaded on image load. */ .hero-img.is-loaded { animation: heroImgIn 1.6s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes heroImgIn { 0% { opacity: 0; scale: 1.08; } 22% { opacity: 1; } /* appears fast (~0.35s) … */ 100% { opacity: 1; scale: 1; } /* … then keeps un-zooming slowly */ } @media (prefers-reduced-motion: reduce) { .hero-img { opacity: 1; scale: 1; animation: none !important; } } /* Blur Gradient layer (backdrop blur fading out toward the top) */ .hero-blur { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(to top, #000 38%, transparent); mask-image: linear-gradient(to top, #000 38%, transparent); } .hero-tint { pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 26%), linear-gradient(0deg, rgba(20,40,28,.30) 0%, rgba(20,40,28,0) 38%); } /* ---- Carousel base ---- */ .carousel { scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; } .carousel::-webkit-scrollbar { display: none; } .carousel > * { scroll-snap-align: start; } .navbtn { display:grid; place-items:center; border-radius:999px; background: var(--black); color:#fff; transition: transform .25s, opacity .25s; } .navbtn:hover { transform: scale(1.07); } .navbtn:active { transform: scale(.94); } /* ---- Programs slides: cross-fade with a light flash (no horizontal slide) ---- */ .prog-slide { opacity: 0; transition: opacity .6s ease; } .prog-slide.is-active { opacity: 1; } .prog-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 6; } .prog-flash.go { animation: progFlash .6s ease; } @keyframes progFlash { 0% { opacity: 0; } 45% { opacity: .5; } 100% { opacity: 0; } } /* ---- Programs slide ---- */ .seg { height: 4px; border-radius: 999px; background: rgba(255,255,255,.35); overflow: hidden; flex: 1; } .seg > span { display:block; height:100%; width:0; background:#fff; border-radius:999px; transition: width .4s linear; } .seg.active > span { width: 100%; } .seg.done > span { width: 100%; } /* ---- Before/after comparison slider (Why Choose Us right card) ---- */ [data-compare] { touch-action: none; } [data-compare] .cmp-top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); } [data-compare] .cmp-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: rgba(255,255,255,.9); pointer-events: none; } [data-compare] .cmp-handle { position: absolute; top: 50%; left: var(--pos); transform: translate(-50%,-50%); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 10px 28px -12px rgba(0,0,0,.55); cursor: ew-resize; } /* ---- Awards rows ---- */ .award-row { transition: background .3s; } .award-row:hover { background: var(--bg-2); } .award-row:hover .award-arrow { background: var(--ink); color:#fff; } /* ---- Pricing toggle ---- */ .toggle-knob { transition: transform .3s cubic-bezier(.2,.7,.2,1); } [data-billing="yearly"] .toggle-knob { transform: translateX(100%); } [data-pricing] [data-bill-btn] { transition: color .3s; } [data-billing="monthly"] [data-bill-btn="monthly"], [data-billing="yearly"] [data-bill-btn="yearly"] { color: var(--ink); } [data-billing="monthly"] [data-bill-btn="yearly"], [data-billing="yearly"] [data-bill-btn="monthly"] { color: var(--faint); } /* ---- FAQ accordion ---- */ .faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; } .faq.open .faq-body { grid-template-rows: 1fr; } .faq-body > div { overflow: hidden; } .faq .faq-ico svg { transition: transform .4s ease; } .faq.open .faq-ico svg { transform: rotate(45deg); } .faq.open .faq-q { color: var(--ink); } /* ---- Testimonial dots ---- */ [data-dot] { width:8px; height:8px; border-radius:999px; background: rgba(14,15,12,.2); transition: all .3s; } [data-dot].is-active { background: var(--ink); width: 22px; } /* ---- Footer wordmark ---- */ .wordmark { font-family:'Figtree',system-ui,sans-serif; font-weight:600; line-height:.78; letter-spacing:-.03em; color:rgba(255,255,255,.07); } /* ---- Layout ---- */ .container-x { width:100%; max-width:1180px; margin:0 auto; padding-left:24px; padding-right:24px; } .divider { height:1px; background: var(--line); } /* ===================== Booking modal (updated design) ===================== */ .eyebrow { font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); } .subheading { font-weight:600; letter-spacing:-0.01em; } .modal-backdrop { opacity:0; transition:opacity 300ms ease-out; } .modal-backdrop.is-open { opacity:1; } .modal-panel { transform:translateY(100%); opacity:1; transition:transform 450ms cubic-bezier(0.32,0.72,0,1), opacity 300ms ease-out; will-change:transform,opacity; } @media (min-width:768px){ .modal-panel { transform:translateY(16px) scale(0.97); opacity:0; transition:transform 350ms cubic-bezier(0.16,1,0.3,1), opacity 250ms ease-out; } } .modal-panel.is-open { transform:none; opacity:1; } #booking-steps-bar .step-dot { width:28px; background-color:var(--line); } #booking-steps-bar .step-dot.is-active { background-color:var(--ink); width:40px; } .format-option { background-color:#F3F1EB; } .format-option:hover { background-color:#E6E4DD; } .format-option:has(input:checked) { background-color:#E6E4DD; } .format-option .format-radio { border-color:#CFCCC4; } .format-option:has(input:checked) .format-radio { border-color:var(--ink); } .format-option:has(input:checked) .format-radio .dot { opacity:1; } .cal-day { height:40px; display:grid; place-items:center; border-radius:12px; font-size:14px; color:var(--ink); transition:background-color 160ms ease, color 160ms ease; } .cal-day.is-empty { visibility:hidden; } .cal-day.is-disabled { color:#C4C2BA; cursor:not-allowed; } .cal-day.is-available { cursor:pointer; } .cal-day.is-available:hover { background-color:#F3F1EB; } .cal-day.is-today { font-weight:600; box-shadow:inset 0 0 0 1.5px var(--line); } .cal-day.is-selected { background-color:var(--ink) !important; color:#fff !important; box-shadow:none; } .time-slot { height:40px; border-radius:12px; border:1px solid var(--line); background:#fff; font-size:14px; color:var(--ink); transition:border-color 160ms ease, background-color 160ms ease, color 160ms ease; cursor:pointer; } .time-slot:hover { border-color:var(--ink); } .time-slot.is-selected { background-color:var(--ink); color:#fff; border-color:var(--ink); } body.modal-open { overflow:hidden; } /* Hero heading — hidden until its webfont (Radiant) loads, then fades up (no FOUT flash) */ .hero-h1 { visibility: hidden; } html.fonts-ready .hero-h1 { visibility: visible; } .hero-h1 .word { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(16px); will-change: opacity, filter, transform; } html.fonts-ready .hero-h1 .word { animation: heroWordIn .7s ease-out forwards; } @keyframes heroWordIn { to { opacity: 1; filter: blur(0); transform: none; } } @media (prefers-reduced-motion: reduce) { .hero-h1 .word { animation: none !important; opacity: 1; filter: none; transform: none; } }