/* ============================================================ HERB HEAVEN JBAY - cinematic & immersive design system (v2) Dark canvas by default. Photography is the hero. Light is the accent. Built on the v1 plumbing (data.js, components.js, agegate.js). See build-sheet-v2 for the art direction. ============================================================ */ /* ---------- 1. TOKENS ------------------------------------- */ :root { --color-charcoal: #1c1c1c; --color-charcoal-mid: #2a2a2a; --color-ink: #141414; --color-sage: #8faa96; --color-sage-deep: #4a7a56; --color-moss: #3b5c42; --color-amber: #c47d2e; --color-amber-light: #e8a84a; --color-cream: #f4efe6; --color-cream-dark: #ece5d8; --color-text-dark: #2c2c2c; --color-text-muted: #6b6b6b; --color-text-light: #e8e2d9; --color-text-pale: #a8a49e; --color-white: #ffffff; --color-whatsapp: #25d366; --color-whatsapp-hover: #1db954; /* Editorial type scale - dramatic, not timid */ --fs-mega: clamp(3.2rem, 1.8rem + 7vw, 7rem); --fs-display: clamp(2.4rem, 1.6rem + 4vw, 4.5rem); --fs-h2: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); --fs-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); --fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); --fs-body: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem); --fs-eyebrow: 0.78rem; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Outfit', -apple-system, system-ui, sans-serif; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 8rem; --space-2xl: 12rem; --max-width: 1240px; --content-width: 760px; --gutter: clamp(1.5rem, 5vw, 4rem); --radius-sm: 4px; --radius-md: 12px; --radius-lg: 24px; --radius-pill: 999px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.7s; } /* ---------- 2. BASE --------------------------------------- */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; max-width: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7; color: var(--color-text-light); background: var(--color-ink); font-feature-settings: 'liga' 1, 'onum' 1; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; } body.is-locked { overflow: hidden; position: fixed; width: 100%; /* iOS Safari: overflow:hidden alone does not prevent page scroll. position:fixed freezes the viewport. JS in agegate.js and main.js saves/restores scrollY to prevent a position jump. */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.5em; } p { margin: 0 0 1.1em; } ::selection { background: var(--color-amber); color: var(--color-ink); } :focus-visible { outline: 2px solid var(--color-amber-light); outline-offset: 3px; } /* ---------- 3. LAYOUT PRIMITIVES -------------------------- */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); } .measure { max-width: 62ch; } .measure--tight { max-width: 48ch; } .band { position: relative; padding-block: clamp(4.5rem, 10vw, 9rem); isolation: isolate; overflow: hidden; } .band--dark { background: var(--color-charcoal); } .band--ink { background: var(--color-ink); } .band--mid { background: var(--color-charcoal-mid); } .band--cream { background: var(--color-cream); color: var(--color-text-dark); } .band--flush { padding-block: 0; } .band--tight { padding-block: clamp(3rem, 6vw, 5rem); } /* Film grain over dark sections - sub-1KB inline SVG noise */ .band--dark::after, .band--ink::after, .band--mid::after, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Amber "lit pool" radial glow helper, placed inside dark bands */ .glow { position: absolute; z-index: -1; pointer-events: none; width: 60vw; max-width: 760px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(232,168,74,0.18) 0%, rgba(196,125,46,0.07) 35%, transparent 68%); filter: blur(8px); } .glow--tl { top: -10%; left: -8%; } .glow--br { bottom: -14%; right: -10%; } .glow--c { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ---------- 4. TYPOGRAPHY PIECES -------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.24em; color: var(--color-amber-light); margin: 0 0 1.4rem; } .eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: 0.7; } .band--cream .eyebrow { color: var(--color-sage-deep); } .mega { font-size: var(--fs-mega); font-weight: 800; line-height: 0.96; } .display { font-size: var(--fs-display); font-weight: 700; line-height: 1.0; } .h2 { font-size: var(--fs-h2); font-weight: 600; } .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--color-text-pale); } .band--cream .lead { color: var(--color-text-muted); } .serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; } .voice { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-display); line-height: 1.12; letter-spacing: -0.01em; color: var(--color-cream); } .band--cream .voice { color: var(--color-moss); } .amber { color: var(--color-amber-light); } .band--cream .amber { color: var(--color-amber); } .text-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--color-sage); position: relative; width: max-content; } .band--cream .text-link { color: var(--color-sage-deep); } .text-link::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .text-link:hover::after { transform: scaleX(1); } .text-link i { transition: transform 0.4s var(--ease); } .text-link:hover i { transform: translateX(4px); } /* ---------- 5. ATMOSPHERE: embers + lights-on bloom ------- */ #atmosphere { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .ember { position: absolute; bottom: -10vh; width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle, rgba(232,168,74,0.9), rgba(232,168,74,0)); opacity: 0; animation: drift linear infinite; } @keyframes drift { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.7; } 90% { opacity: 0.5; } 100% { transform: translateY(-118vh) translateX(var(--dx, 20px)); opacity: 0; } } /* Lights On bloom - a warm radial wash that blooms from centre once */ #lights-bloom { position: fixed; inset: 0; z-index: 9500; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 46%, rgba(232,168,74,0.55) 0%, rgba(196,125,46,0.25) 30%, rgba(20,20,20,0) 62%); } body.lights-on #lights-bloom { animation: bloom 1.25s var(--ease) forwards; } @keyframes bloom { 0% { opacity: 0; transform: scale(0.4); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } } /* ---------- 6. ENTRANCE / REVEAL MOTION ------------------- */ /* Hero entrance waits while gate is up, then plays on `entered`. */ .lift { opacity: 0; transform: translateY(28px); } body.entered .lift { animation: lift-in 0.9s var(--ease) forwards; } .lift[data-d="1"] { animation-delay: 0.15s; } .lift[data-d="2"] { animation-delay: 0.3s; } .lift[data-d="3"] { animation-delay: 0.45s; } .lift[data-d="4"] { animation-delay: 0.6s; } @keyframes lift-in { to { opacity: 1; transform: none; } } /* Scroll reveals - choreographed, not a single uniform fade */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .reveal--mask { opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity 0.8s var(--ease), clip-path 0.9s var(--ease); } .reveal--img { opacity: 0; clip-path: inset(8% 8% 8% 8%); transform: scale(1.04); transition: opacity 0.9s var(--ease), clip-path 1s var(--ease), transform 1.2s var(--ease); } .reveal.is-visible, .reveal--mask.is-visible, .reveal--img.is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } /* Staggered children */ .stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .stagger.is-visible > * { opacity: 1; transform: none; } .stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; } .stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; } .stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; } .stagger.is-visible > *:nth-child(5) { transition-delay: 0.32s; } /* Parallax hook (JS sets --py) */ .parallax { will-change: transform; transform: translateY(var(--py, 0)); } @media (prefers-reduced-motion: reduce) { .lift, .reveal, .reveal--mask, .reveal--img, .stagger > * { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; } .ember, #lights-bloom, .ken-burns img { animation: none !important; } .parallax { transform: none !important; } } /* ---------- 7. FIGURES / BLUR-UP -------------------------- */ .figure { position: relative; overflow: hidden; background: var(--color-charcoal-mid); } .figure img { width: 100%; height: 100%; object-fit: cover; } .figure[class*="lqip-"] img { animation: fade-img 0.8s ease forwards; } @keyframes fade-img { from { opacity: 0; } to { opacity: 1; } } .figure figcaption { position: absolute; left: 0; bottom: 0; padding: 0.7rem 1rem; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--color-text-light); background: linear-gradient(transparent, rgba(20,20,20,0.7)); width: 100%; } /* ---------- 8. BUTTONS ------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; padding: 0.95rem 1.7rem; border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer; line-height: 1; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s, color 0.3s; min-height: 48px; } .btn:hover { transform: translateY(-2px); } .btn--whatsapp { background: var(--color-whatsapp); color: #062b16; } .btn--whatsapp:hover { background: var(--color-whatsapp-hover); box-shadow: 0 10px 30px rgba(37,211,102,0.32); } .btn--sage { background: var(--color-sage); color: var(--color-ink); } .btn--sage:hover { background: var(--color-sage-deep); color: var(--color-white); box-shadow: 0 10px 30px rgba(74,122,86,0.3); } .btn--amber { background: var(--color-amber); color: var(--color-ink); } .btn--amber:hover { background: var(--color-amber-light); box-shadow: 0 10px 30px rgba(196,125,46,0.35); } .btn--ghost { background: transparent; border-color: var(--color-sage); color: var(--color-sage); } .btn--ghost:hover { background: rgba(143,170,150,0.12); } .btn--ghost-dark { background: transparent; border-color: var(--color-sage-deep); color: var(--color-sage-deep); } .btn--ghost-dark:hover { background: rgba(74,122,86,0.1); } [data-pending="true"] { cursor: default; opacity: 0.92; } /* ---------- 9. NAV --------------------------------------- */ .nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: background 0.4s var(--ease), backdrop-filter 0.4s, box-shadow 0.4s; } .nav__inner { max-width: var(--max-width); margin-inline: auto; padding: 1.1rem var(--gutter); display: flex; align-items: center; justify-content: space-between; } .nav__logo { display: flex; align-items: center; gap: 0.6rem; } .nav__logo img { width: 38px; height: auto; } .nav__logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--color-cream); letter-spacing: -0.01em; } .nav__links { display: flex; gap: 1.8rem; } .nav__link { font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-light); position: relative; padding: 0.3rem 0; } .nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%; background: var(--color-amber-light); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); } .nav__link.is-active { color: var(--color-amber-light); } .nav.is-solid { background: rgba(22,22,22,0.72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 rgba(143,170,150,0.12); } .nav__toggle { display: none; background: none; border: 0; color: var(--color-cream); font-size: 1.4rem; cursor: pointer; } .nav__overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(18,18,18,0.97); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s; } .nav__overlay.is-open { opacity: 1; visibility: visible; } .nav__overlay .nav__link { font-size: 1.4rem; } .nav__overlay-close { position: absolute; top: 1.5rem; right: 1.8rem; background: none; border: 0; color: var(--color-cream); font-size: 1.8rem; cursor: pointer; } /* ---------- 10. HERO ------------------------------------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__media.ken-burns img { animation: ken 24s ease-in-out infinite alternate; } @keyframes ken { from { transform: scale(1.02); } to { transform: scale(1.12) translateY(-1.5%); } } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(18,18,18,0.94) 4%, rgba(18,18,18,0.45) 42%, rgba(18,18,18,0.55) 100%); } .hero__inner { padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 9vw, 7rem); max-width: 56rem; } .hero__title { font-size: var(--fs-mega); font-weight: 800; line-height: 0.96; color: var(--color-white); margin: 0 0 0.5em; } .hero__title em { font-style: italic; font-weight: 400; color: var(--color-amber-light); } .hero__sub { font-size: var(--fs-lead); max-width: 46ch; color: var(--color-text-light); } .hero__voice { margin-bottom: 1.6rem; max-width: 40ch; } .hero__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; } .scroll-cue { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); color: var(--color-text-pale); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 2; } .scroll-cue i { animation: nudge 1.8s ease-in-out infinite; } @keyframes nudge { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(6px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .scroll-cue i { animation: none; } } /* Inner-page shorter hero */ .subhero { position: relative; min-height: 56vh; min-height: 56svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .subhero--short { min-height: 48vh; min-height: 48svh; } .subhero__media { position: absolute; inset: 0; z-index: -2; } .subhero__media img { width: 100%; height: 100%; object-fit: cover; } .subhero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(18,18,18,0.92), rgba(18,18,18,0.35) 60%, rgba(18,18,18,0.5)); } .subhero__inner { padding-block: clamp(3rem, 7vw, 5rem); } .subhero__title { font-size: var(--fs-display); font-weight: 800; color: var(--color-white); } .subhero__title em { font-style: italic; font-weight: 400; color: var(--color-amber-light); } /* ---------- 11. HOME: invitation strip ------------------- */ .invite { text-align: center; } .invite__line { font-size: var(--fs-h2); font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--color-cream); max-width: 22ch; margin-inline: auto; line-height: 1.2; } .microlabels { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: 2.4rem; } .microlabels span { padding: 0 1.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; color: var(--color-text-pale); position: relative; } .microlabels span + span::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 1.1em; width: 1px; background: rgba(168,164,158,0.4); } /* ---------- 12. HOME: two-rooms band --------------------- */ .tworooms { position: relative; min-height: 78vh; min-height: 78svh; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; isolation: isolate; } .tworooms__half { position: relative; overflow: hidden; } .tworooms__half img { width: 100%; height: 100%; object-fit: cover; } .tworooms__half--dark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(18,18,18,0.5), rgba(18,18,18,0.15)); } .tworooms__half--warm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(60,40,15,0.35), transparent); } .tworooms__copy { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--gutter); } .tworooms__copy::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(18,18,18,0.55), transparent 70%); z-index: -1; } .tworooms__copy h2 { color: var(--color-white); font-size: var(--fs-display); } .tworooms__copy p { color: var(--color-text-light); max-width: 40ch; } .tworooms .tworooms__half--dark { transition: clip-path 1s var(--ease); } .tworooms .tworooms__half--warm { transition: clip-path 1s var(--ease); } .tworooms:not(.is-visible) .tworooms__half--dark { clip-path: inset(0 50% 0 0); } .tworooms:not(.is-visible) .tworooms__half--warm { clip-path: inset(0 0 0 50%); } /* ---------- 13. EDITORIAL SPLIT (asymmetric) ------------- */ .editorial { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .editorial--42 { grid-template-columns: 42% 1fr; } .editorial--58 { grid-template-columns: 1fr 42%; } .editorial__media { position: relative; aspect-ratio: 4/5; } .editorial__media--tall { aspect-ratio: 3/4.4; transform: translateY(-3%); } .editorial__media img { width: 100%; height: 100%; object-fit: cover; } .editorial__copy h2 { font-size: var(--fs-h2); } /* Stacked value statements (About / Membership) */ .statements { display: grid; gap: 0; } .statement { padding-block: clamp(2rem, 5vw, 3.4rem); border-top: 1px solid rgba(143,170,150,0.18); } .statement:last-child { border-bottom: 1px solid rgba(143,170,150,0.18); } .statement__word { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 700; color: var(--color-cream); line-height: 1; margin-bottom: 0.4rem; } .band--cream .statement { border-color: rgba(74,122,86,0.2); } .band--cream .statement__word { color: var(--color-moss); } .statement p { max-width: 52ch; } /* Cream "exhale" membership invitation */ .exhale__grid { display: grid; grid-template-columns: 1fr 40%; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .exhale__media { position: relative; aspect-ratio: 4/5; align-self: stretch; } .exhale__media img { width: 100%; height: 100%; object-fit: cover; } .invite-lines { list-style: none; padding: 0; margin: 1.6rem 0 2rem; display: grid; gap: 0.7rem; } .invite-lines li { font-size: var(--fs-lead); color: var(--color-text-dark); padding-left: 1.6rem; position: relative; } .invite-lines li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.7rem; height: 1px; background: var(--color-amber); } /* ---------- 14. HOME: blog editorial list ---------------- */ .blogfeed__lead { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-bottom: 1rem; } .blogfeed__lead .figure { aspect-ratio: 16/9; } .blogfeed__rows { display: grid; } .blog-row { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: baseline; padding: 1.3rem 0; border-top: 1px solid rgba(143,170,150,0.16); } .blog-row__num { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-amber-light); opacity: 0.8; } .blog-row__cat { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-sage); } .blog-row__title { display: block; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--color-cream); margin: 0.2rem 0 0; line-height: 1.2; } .blog-row__title a:hover { color: var(--color-amber-light); } /* ---------- 15. THE SPACE -------------------------------- */ .act__lead { aspect-ratio: 21/9; position: relative; } .act__lead img { width: 100%; height: 100%; object-fit: cover; } .cluster { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; align-items: start; margin-top: 1.6rem; } .cluster--right { grid-template-columns: 1fr 1.3fr; } .cluster__stack { display: grid; gap: 1.2rem; } .cluster .figure { aspect-ratio: 4/5; } .cluster__stack .figure { aspect-ratio: 4/3; } .act__copy { max-width: 48ch; margin-top: 1.8rem; } .mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12rem; gap: 0.9rem; } .mosaic .figure { transition: transform 0.5s var(--ease); } .mosaic .figure:hover { transform: scale(1.03); z-index: 2; } .mosaic .m-tall { grid-row: span 2; } .mosaic .m-wide { grid-column: span 2; } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; } .gallery__item { padding: 0; border: 0; background: var(--color-charcoal-mid); cursor: zoom-in; overflow: hidden; aspect-ratio: 1; display: block; width: 100%; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); } .gallery__item:hover img { transform: scale(1.06); } /* Lightbox (markup built by gallery.js) */ .lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(10,10,10,0.96); display: none; align-items: center; justify-content: center; } .lightbox.is-open { display: flex; } .lightbox__img { max-width: 92vw; max-height: 84vh; object-fit: contain; } .lightbox__btn { position: absolute; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; padding: 1rem; opacity: 0.8; } .lightbox__btn:hover { opacity: 1; } .lightbox__prev { left: 1rem; } .lightbox__next { right: 1rem; } .lightbox__close { top: 1rem; right: 1rem; } .lightbox__counter { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); color: var(--color-text-pale); font-size: 0.85rem; letter-spacing: 0.1em; } /* ---------- 16. MEMBERSHIP ------------------------------- */ .steps { display: grid; gap: 0; } .step { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: start; padding-block: clamp(1.6rem, 4vw, 2.6rem); border-top: 1px solid rgba(143,170,150,0.18); } .step__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4rem); color: var(--color-amber); line-height: 0.8; } .step h3 { font-size: var(--fs-h3); margin-bottom: 0.3rem; } .faq { border-top: 1px solid rgba(74,122,86,0.22); } .faq__item { border-bottom: 1px solid rgba(74,122,86,0.22); } .faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 1.3rem 2.5rem 1.3rem 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--color-text-dark); position: relative; } .faq__q::after { content: "\002B"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); font-family: var(--font-body); color: var(--color-sage-deep); transition: transform 0.3s; } .faq__q[aria-expanded="true"]::after { content: "\2212"; } .faq__a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); } .faq__a > div { padding: 0 0 1.3rem; max-width: 60ch; color: var(--color-text-muted); } .map-frame { aspect-ratio: 16/9; border: 0; width: 100%; border-radius: var(--radius-md); } .map-ph { aspect-ratio: 16/9; display: grid; place-items: center; background: var(--color-charcoal-mid); color: var(--color-text-pale); border-radius: var(--radius-md); border: 1px dashed rgba(143,170,150,0.3); text-align: center; padding: 1rem; } .disclaimer { border: 1px solid rgba(143,170,150,0.28); border-radius: var(--radius-md); padding: 1.4rem 1.6rem; color: var(--color-text-pale); font-size: 0.95rem; max-width: 62ch; } .disclaimer strong { color: var(--color-sage); } /* ---------- 17. BLOG INDEX + ARTICLE --------------------- */ .feature-banner { position: relative; min-height: 60vh; min-height: 60svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .feature-banner__media { position: absolute; inset: 0; z-index: -2; } .feature-banner__media img { width: 100%; height: 100%; object-fit: cover; } .feature-banner__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(18,18,18,0.92), rgba(18,18,18,0.2) 70%); } .feature-banner__inner { padding-block: clamp(2.5rem, 6vw, 4rem); } .feature-banner__inner h2 { font-size: var(--fs-display); color: var(--color-white); max-width: 20ch; } .filterbar { display: flex; flex-wrap: wrap; gap: 0.6rem; } .filter-pill { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.5rem 1.1rem; border-radius: var(--radius-pill); border: 1px solid rgba(143,170,150,0.4); background: transparent; color: var(--color-sage); cursor: pointer; transition: background 0.3s, color 0.3s; } .filter-pill.is-active, .filter-pill:hover { background: var(--color-sage); color: var(--color-ink); border-color: var(--color-sage); } .editorial-list { display: grid; gap: 0; } .post-row { display: grid; grid-template-columns: 38% 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; padding-block: clamp(1.6rem, 4vw, 2.6rem); border-top: 1px solid rgba(143,170,150,0.16); } .post-row:nth-child(even) { direction: rtl; } .post-row:nth-child(even) > * { direction: ltr; } .post-row.is-hidden { display: none; } .post-row__media { aspect-ratio: 4/3; position: relative; overflow: hidden; } .post-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .post-row__media:hover img { transform: scale(1.05); } .post-row__title { font-size: var(--fs-h3); color: var(--color-cream); margin: 0.4rem 0; } .post-row__title a:hover { color: var(--color-amber-light); } .post-row__meta { font-size: 0.82rem; color: var(--color-text-pale); letter-spacing: 0.04em; } .pill { display: inline-block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-amber-light); padding: 0.3rem 0.7rem; border: 1px solid rgba(232,168,74,0.4); border-radius: var(--radius-pill); } /* Article reading mode */ .article { max-width: 70ch; margin-inline: auto; } .article p, .article li { font-size: 1.08rem; line-height: 1.85; color: var(--color-text-light); } .band--cream .article p, .band--cream .article li { color: #3a3a36; } .article h2 { font-size: var(--fs-h2); margin-top: 2.2rem; } .article h3 { font-size: var(--fs-h3); margin-top: 1.8rem; } .article blockquote { margin: 2rem 0; padding-left: 1.4rem; border-left: 3px solid var(--color-amber); font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--color-moss); } .breadcrumb { font-size: 0.82rem; color: var(--color-text-pale); letter-spacing: 0.04em; margin-bottom: 1rem; } .breadcrumb a:hover { color: var(--color-amber-light); } .article-meta { color: var(--color-text-pale); font-size: 0.85rem; letter-spacing: 0.05em; margin-bottom: 0; } /* ---------- 18. AGE GATE --------------------------------- */ .agegate { position: fixed; inset: 0; z-index: 9999; background: var(--color-ink); display: flex; align-items: center; justify-content: center; padding: var(--gutter); overflow: hidden; transition: opacity 0.6s var(--ease), visibility 0.6s; } .agegate.is-hidden { opacity: 0; visibility: hidden; } .agegate__particles { position: absolute; inset: 0; pointer-events: none; } .agegate__particles i { position: absolute; top: -10%; color: var(--color-sage); opacity: 0.12; animation: fall linear infinite; } @keyframes fall { to { transform: translateY(120vh) rotate(220deg); } } .agegate__inner { position: relative; z-index: 2; text-align: center; max-width: 30rem; } .agegate__logo { width: 84px; height: auto; margin: 0 auto 1.2rem; } .agegate__name { font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.82rem; color: var(--color-sage); } .agegate__loc { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-text-pale); margin-top: 0.3rem; } .agegate__heading { font-size: clamp(2rem, 6vw, 3.2rem); color: var(--color-white); margin: 1.6rem 0 0.6rem; } .agegate__text { color: var(--color-text-pale); max-width: 34ch; margin-inline: auto; } .agegate__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; } @media (prefers-reduced-motion: reduce) { .agegate__particles i { animation: none; } } /* ---------- 19. FLOATING WHATSAPP ------------------------ */ .wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 900; display: inline-flex; align-items: center; gap: 0.6rem; background: var(--color-whatsapp); color: #062b16; font-weight: 600; padding: 0.85rem 1.2rem; border-radius: var(--radius-pill); box-shadow: 0 8px 26px rgba(37,211,102,0.34); transition: transform 0.3s var(--ease), box-shadow 0.3s; } .wa-float:hover { transform: translateY(-2px) scale(1.03); } .wa-float__icon { font-size: 1.4rem; line-height: 1; display: inline-flex; animation: wa-pulse 2.4s ease-in-out infinite; } @keyframes wa-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .wa-float__icon { animation: none; } } @media (max-width: 560px) { .wa-float__label { display: none; } .wa-float { padding: 0; width: 56px; height: 56px; justify-content: center; } } /* ---------- 20. FOOTER ----------------------------------- */ .footer { background: var(--color-ink); color: var(--color-text-pale); padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; position: relative; } .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; } .footer__brand-logo { width: 46px; margin-bottom: 1rem; } .footer__tag { max-width: 30ch; font-size: 0.95rem; } .footer h4 { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--color-sage); margin: 0 0 1rem; } .footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; font-size: 0.95rem; } .footer__list a:hover { color: var(--color-amber-light); } .footer__social { display: flex; gap: 0.8rem; } .footer__social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(143,170,150,0.3); display: inline-flex; align-items: center; justify-content: center; transition: background 0.3s, color 0.3s; } .footer__social a:hover { background: var(--color-sage); color: var(--color-ink); } .footer__map { width: 100%; aspect-ratio: 4/3; border: 0; border-radius: var(--radius-sm); } .footer__map-ph { aspect-ratio: 4/3; display: grid; place-items: center; font-size: 0.85rem; text-align: center; } .ph { background: var(--color-charcoal-mid); color: var(--color-text-pale); border: 1px dashed rgba(143,170,150,0.3); } .footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(143,170,150,0.14); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; } .footer__ccsa a { color: var(--color-sage); } .footer__ccsa a:hover { color: var(--color-amber-light); } /* ---------- 21. MISC ------------------------------------- */ .center { text-align: center; } .mt-sm { margin-top: 1rem; } .mt-md { margin-top: 2rem; } .mt-lg { margin-top: 3rem; } .cta-band { text-align: center; } .cta-band h2 { font-size: var(--fs-display); color: var(--color-white); max-width: 18ch; margin-inline: auto; } .flow > * + * { margin-top: 1.1rem; } /* ---------- 22. RESPONSIVE ------------------------------- */ @media (max-width: 880px) { .nav__links { display: none; } .nav__toggle { display: inline-flex; } .editorial--42, .editorial--58, .exhale__grid { grid-template-columns: 1fr; } .editorial__media--tall { transform: none; } .tworooms { grid-template-columns: 1fr; min-height: auto; } .tworooms__half { aspect-ratio: 16/10; } .tworooms:not(.is-visible) .tworooms__half--dark, .tworooms:not(.is-visible) .tworooms__half--warm { clip-path: inset(0); } .post-row { grid-template-columns: 1fr; } .post-row:nth-child(even) { direction: ltr; } .footer__grid { grid-template-columns: 1fr 1fr; } .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 10rem; } .cluster, .cluster--right { grid-template-columns: 1fr; } } @media (max-width: 540px) { .gallery { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; } .hero__actions { gap: 1rem; } } /* ============================================================ 23. V3 MOBILE FIXES Applied 2026-06-05. Fixes iOS-specific issues, aspect ratios, performance, and touch targets identified in the v3 audit. All changes target max-width: 880px (tablet/mobile) or max-width: 540px (small phone) unless otherwise noted. ============================================================ */ /* ---- Ken Burns: disable on mobile (battery + GPU drain) ---- */ /* The 24s continuous scale animation on a full-viewport image is expensive on mobile GPUs and unnecessary when the hero is only visible for a few seconds before the user scrolls. */ @media (max-width: 880px) { .hero__media.ken-burns img { animation: none; } } /* ---- .act__lead: fix ultra-wide 21:9 ratio on mobile -------- */ /* 21:9 at 390px width = ~167px tall - looks like a thin banner. Progressive aspect ratio relaxation for mobile screens. */ @media (max-width: 880px) { .act__lead { aspect-ratio: 16/9; } } @media (max-width: 540px) { .act__lead { aspect-ratio: 4/3; } } /* ---- Editorial and exhale media: fix tall portrait on mobile - */ /* 4:5 ratio at full mobile width = ~487px tall. When these collapse to single column, switch to landscape. */ @media (max-width: 880px) { .editorial__media { aspect-ratio: 16/9; } .exhale__media { aspect-ratio: 16/9; } } /* ---- Two-rooms: fix copy overlay on stacked mobile layout ---- */ /* On desktop, .tworooms__copy is position:absolute over 2 side-by-side halves. On mobile, the halves stack vertically, making the absolute overlay land at the seam between both images. Fix: make the copy a normal in-flow block below both images. */ @media (max-width: 880px) { .tworooms__copy { position: static; background: var(--color-charcoal); padding: clamp(2rem, 6vw, 3rem) var(--gutter); text-align: center; } .tworooms__copy::before { display: none; } } /* ---- Filter pills: raise to iOS 44pt minimum touch target ---- */ @media (max-width: 880px) { .filter-pill { min-height: 44px; padding-block: 0.7rem; } } /* ---- Subhero heights: tighten on small iPhones -------------- */ /* At 540px (iPhone SE and below), reduce subhero height so more page content appears above the fold. */ @media (max-width: 540px) { .subhero { min-height: 44vh; min-height: 44svh; } .subhero--short { min-height: 36vh; min-height: 36svh; } } /* ---- Footer map: reduce height in single-column mobile footer - */ /* 4:3 ratio at 390px = 293px tall. Reduce to 16:9 with max-height for a less dominant map in a dense single-column footer. */ @media (max-width: 540px) { .footer__map { aspect-ratio: 16/9; max-height: 180px; } } /* ---- Mosaic: single-column fallback for very small screens --- */ /* At 400px and below (iPhone SE 1st gen), 2-column mosaic with m-tall and m-wide spanning variants can produce very narrow or oddly shaped cells. Collapse to 1 column for clean rendering. */ @media (max-width: 400px) { .mosaic { grid-template-columns: 1fr; grid-auto-rows: 14rem; } .mosaic .m-tall { grid-row: span 1; } .mosaic .m-wide { grid-column: span 1; } } /* ---- Hero eyebrow: prevent mid-phrase wrap on small screens -- */ /* "Jeffreys Bay ยท a private members club" wraps after "Bay" at 320px. Force nowrap and scale via clamp. */ @media (max-width: 400px) { .hero__eyebrow { font-size: 0.68rem; letter-spacing: 0.16em; } } /* ---- Feature banner: tighten min-height on small iPhones ----- */ @media (max-width: 540px) { .feature-banner { min-height: 50vh; min-height: 50svh; } } /* ---- Editorial --tall + cluster figures: tall portrait on mobile - */ /* editorial__media--tall (3/4.4) = ~572px and .cluster .figure (4/5) = ~487px at full mobile width. Relax both to landscape once the grids collapse to a single column. */ @media (max-width: 880px) { .editorial__media--tall { aspect-ratio: 16/9; } .cluster .figure { aspect-ratio: 16/9; } } /* ---- Blog row: collapse three-column layout on mobile -------- */ /* The home feed blog-row is number | (cat+title) | read-time. On narrow screens the read-time column starves the title. Drop to two columns and hide the read-time (the direct-child .blog-row__cat; the category eyebrow is nested and stays). */ @media (max-width: 880px) { .blog-row { grid-template-columns: auto 1fr; } .blog-row > .blog-row__cat { display: none; } } /* ---- .figure--cinematic: responsive cinematic aspect ratio ---- */ /* Used on the about page full-bleed staff photo. Replaces a hard inline aspect-ratio:21/9 that could not be overridden. Mobile progressively relaxes the ratio so it reads as a photo, not a sliver. */ .figure--cinematic { aspect-ratio: 21/9; } @media (max-width: 880px) { .figure--cinematic { aspect-ratio: 16/9; } } @media (max-width: 540px) { .figure--cinematic { aspect-ratio: 4/3; } } /* ---- Mosaic: fix ultra-thin m-wide strips at 401-540px -------- */ /* A 2-column m-wide cell spans full width but only 10rem tall (~3:1). Raise the row height and collapse m-wide to a single column so it is no longer a letterbox strip. (<=400px is handled separately below.) */ @media (max-width: 540px) { .mosaic { grid-auto-rows: 12rem; } .mosaic .m-wide { grid-column: span 1; } } /* ---- Lightbox nav: larger touch targets on mobile ------------ */ @media (max-width: 880px) { .lightbox__prev, .lightbox__next { padding: 1.5rem; font-size: 1.5rem; } .lightbox__prev { left: 0.25rem; } .lightbox__next { right: 0.25rem; } } /* ---- Microlabels: suppress dividers when labels wrap ---------- */ /* At <=400px flex-wrap can stack labels; the absolute ::before pipe would render at the wrong edge, so hide it and add row spacing. */ @media (max-width: 400px) { .microlabels { gap: 0.8rem; } .microlabels span + span::before { display: none; } } /* ============================================================ END V3 MOBILE FIXES ============================================================ */ /* ============================================================ 24. MEMBERSHIP PAGE ENHANCEMENTS (v3) Applied 2026-06-05. Glass benefit cards, photo break band, horizontal journey steps, peek-inside modal, member counter. ============================================================ */ /* ---- Benefit cards ---------------------------------------- */ .benefit-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem); align-items: start; } .benefit-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(232, 168, 74, 0.15); border-radius: var(--radius-md); padding: clamp(1.4rem, 3vw, 2rem); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; overflow: hidden; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s; } /* Amber underlight accent line at base of each card */ .benefit-card::after { content: ""; position: absolute; bottom: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(to right, transparent, rgba(232, 168, 74, 0.45), transparent); } /* Middle card drops down for stagger depth */ .benefit-card:nth-child(2) { margin-top: 1.5rem; } .benefit-card:hover { transform: translateY(-6px); border-color: rgba(232, 168, 74, 0.32); box-shadow: 0 20px 50px rgba(196, 125, 46, 0.14), 0 0 0 1px rgba(232, 168, 74, 0.2) inset; } .benefit-card__word { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--color-cream); line-height: 1.1; margin: 0 0 0.65rem; } .benefit-card__text { color: var(--color-text-pale); font-size: 1rem; line-height: 1.65; margin: 0; } /* "See what membership looks like" nudge link */ .benefit-cards__cta { margin-top: 2rem; text-align: center; } /* ---- CTA band: two-button layout -------------------------- */ .cta-band__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; } /* ---- Photo break band ------------------------------------- */ .photo-break { position: relative; height: 35vh; overflow: hidden; isolation: isolate; } .photo-break__media { position: absolute; inset: 0; z-index: -2; } .photo-break__media img { width: 100%; height: 100%; object-fit: cover; /* Slight upward offset so the warm lounge ceiling/light fills the crop */ object-position: center 30%; } .photo-break__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient( to bottom, rgba(18, 18, 18, 0.5), rgba(18, 18, 18, 0.28) 50%, rgba(18, 18, 18, 0.55) ); } .photo-break__quote { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; font-size: var(--fs-display); color: var(--color-cream); text-align: center; padding-inline: var(--gutter); margin: 0; text-shadow: 0 2px 24px rgba(18, 18, 18, 0.65); pointer-events: none; } /* ---- Animated member counter ------------------------------ */ .counter-line { display: inline-flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; justify-content: center; margin: 0; } .counter-num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); color: var(--color-amber-light); line-height: 1; /* Tabular figures so the count-up doesn't cause layout shift */ font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .counter-label { font-size: var(--fs-lead); color: var(--color-text-light); } /* ---- Steps: horizontal journey layout (desktop only) ------ */ /* Remove the old border-top hairlines on desktop journey layout */ @media (min-width: 881px) { .steps.journey-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; align-items: start; } /* Amber connector line threading between the three step numerals */ .steps.journey-steps::before { content: ""; position: absolute; /* Sit at the visual centre of the large amber numerals */ top: 1.1rem; /* Start after the first numeral, end before the last */ left: calc(100% / 6); right: calc(100% / 6); height: 1px; background: linear-gradient( to right, transparent, rgba(196, 125, 46, 0.55) 15%, rgba(196, 125, 46, 0.55) 85%, transparent ); pointer-events: none; z-index: 0; } /* Each step: centred column layout on desktop */ .steps.journey-steps .step { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 0; padding-inline: clamp(1rem, 3vw, 2rem); border-top: none; gap: 0.6rem; } /* Give the numeral a background swatch so the connector line doesn't visually pass through the number character */ .steps.journey-steps .step__num { position: relative; z-index: 2; background: var(--color-ink); padding: 0 0.6rem; display: inline-block; } .steps.journey-steps .step h3 { margin-bottom: 0.2rem; } } /* Mobile: keep vertical layout. Add a left amber guide line. */ @media (max-width: 880px) { .steps.journey-steps { position: relative; padding-left: 0; } .steps.journey-steps .step { border-top: 1px solid rgba(143, 170, 150, 0.18); padding-block: clamp(1.6rem, 4vw, 2.6rem); } } /* ---- Membership modal ------------------------------------- */ .mem-modal { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 2rem); visibility: hidden; opacity: 0; transition: opacity 0.4s var(--ease), visibility 0.4s; } .mem-modal.is-open { visibility: visible; opacity: 1; } /* Dark blurred backdrop (a