/* ============================================================ SEIIKI RETREAT — MONSOON & STONE Live stylesheet for seiikiretreat.com. Playfair Display + Inter · monsoon / jungle / terracotta. Spec: see DESIGN.md in the repo root. Change both together. ============================================================ */ :root{ /* colour */ --monsoon-black:#1A1A1A; --volcanic-stone:#2D2D2D; --rice-paper:#F5F3EF; --mist-white:#FAFAFA; --jungle-canopy:#3D4A3A; --terracotta:#B8956B; --monsoon-grey:#8B8680; --rule: rgba(26,26,26,.12); /* type */ --font-display:'Playfair Display',Georgia,serif; --font-body:'Inter',sans-serif; /* layout */ --content-max:1280px; /* page content width */ --nav-h:84px; /* nav bar height AND mobile panel top offset — keep as one value */ --section-y:140px; /* section vertical padding */ --gutter:40px; /* section horizontal padding */ /* geometry */ --radius-btn:2px; --radius-card:4px; /* elevation + motion */ --shadow-hover:0 20px 40px rgba(26,26,26,.08); --ease-lift:.5s cubic-bezier(.4,0,.2,1); } /* NOTE: custom properties do NOT work in media queries — @media (max-width:var(--x)) is invalid CSS. Breakpoints (900/820/560) are hardcoded by necessity. */ *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ background:var(--rice-paper); color:var(--monsoon-black); font-family:var(--font-body); position:relative; overflow-x:hidden; } /* fine film-grain texture over everything */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9000; opacity:.03; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } h1,h2,h3,h4{font-family:var(--font-display); font-weight:400; line-height:1.15;} a{color:inherit; text-decoration:none;} img{display:block; max-width:100%;} .eyebrow{ font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--jungle-canopy); display:block; margin-bottom:14px; } .eyebrow.light{ color:var(--terracotta); } /* scroll reveal */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; } .reveal.in{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none;} html{scroll-behavior:auto;} } .progress-bar{ position:fixed; top:0; left:0; height:2px; background:var(--jungle-canopy); z-index:10001; width:0%; } /* ===== NAV ===== */ .site-nav{ position:fixed; top:0; left:0; right:0; z-index:9500; height:var(--nav-h); display:flex; align-items:center; background:rgba(245,243,239,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule); } .nav-inner{ width:100%; max-width:var(--content-max); margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; } .logo{ display:flex; align-items:center; flex-shrink:0; font-family:var(--font-display); font-size:22px; letter-spacing:.04em; } /* logo image: fixed height, auto width, never shrinks/warps at small widths */ .logo-img{ display:block; height:72px; width:auto; object-fit:contain; } .nav-links{ display:flex; gap:36px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; } .nav-links a{ opacity:.75; transition:opacity .3s ease, color .3s ease; } .nav-links a:hover, .nav-links a.active{ opacity:1; color:var(--jungle-canopy); } .nav-right{ display:flex; align-items:center; gap:12px; flex-shrink:0; } .nav-cta{ background:var(--monsoon-black); color:var(--mist-white); padding:13px 26px; border-radius:var(--radius-btn); font-size:12px; letter-spacing:.08em; text-transform:uppercase; transition:background .3s ease; white-space:nowrap; } .nav-cta:hover{ background:var(--jungle-canopy); } /* ===== MOBILE NAV (hamburger + panel) ===== */ .nav-toggle{ display:none; align-items:center; justify-content:center; flex-direction:column; width:44px; height:44px; margin-right:-10px; padding:0; background:transparent; border:none; cursor:pointer; position:relative; z-index:9600; } .nav-toggle:focus-visible{ outline:1px solid var(--jungle-canopy); outline-offset:3px; } .nav-toggle .bar{ display:block; width:24px; height:1.5px; background:var(--monsoon-black); transition:transform .4s ease, opacity .3s ease; } .nav-toggle .bar + .bar{ margin-top:6px; } .nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); } .nav-panel{ position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:9400; background:rgba(245,243,239,.98); backdrop-filter:blur(10px); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:48px 24px 80px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .35s ease, transform .35s ease, visibility .35s; } .nav-panel.open{ opacity:1; visibility:visible; transform:translateY(0); } .nav-panel a{ width:100%; max-width:340px; text-align:center; font-family:var(--font-body); font-size:15px; letter-spacing:.12em; text-transform:uppercase; padding:22px 8px; opacity:.8; border-bottom:1px solid var(--rule); transition:opacity .3s ease, color .3s ease; } .nav-panel a:last-of-type{ border-bottom:none; } .nav-panel a:hover, .nav-panel a:focus-visible{ opacity:1; color:var(--jungle-canopy); } body.nav-open{ overflow:hidden; } @media (max-width:900px){ .nav-links{ display:none; } .nav-toggle{ display:flex; } .logo-img{ height:57px; } } @media (min-width:901px){ .nav-panel{ display:none; } } @media (max-width:560px){ .nav-inner{ padding:0 20px; } .logo-img{ height:48px; } .nav-cta{ padding:11px 16px; font-size:11px; letter-spacing:.06em; } .nav-right{ gap:6px; } } @media (prefers-reduced-motion: reduce){ .nav-panel, .nav-toggle .bar{ transition:none; } } /* ===== BUTTONS ===== */ .btn-primary{ display:inline-block; background:var(--monsoon-black); color:var(--mist-white); border:none; padding:18px 42px; border-radius:var(--radius-btn); font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:all .4s ease; } .btn-primary:hover{ background:var(--jungle-canopy); transform:translateY(-2px); box-shadow:0 12px 32px rgba(26,26,26,.2); } .btn-secondary{ display:inline-block; background:transparent; color:var(--monsoon-black); border:1px solid var(--monsoon-black); padding:18px 42px; border-radius:var(--radius-btn); font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:all .4s ease; } .btn-secondary:hover{ background:var(--monsoon-black); color:var(--mist-white); } .btn-secondary.light{ border-color:var(--mist-white); color:var(--mist-white); } .btn-secondary.light:hover{ background:var(--mist-white); color:var(--monsoon-black); } /* ===== HERO ===== */ .hero{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; } .hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.02) brightness(1.18); } .hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,26,26,.10) 0%, rgba(26,26,26,.26) 55%, rgba(26,26,26,.5) 100%); } .hero-content{ position:relative; z-index:2; text-align:center; color:var(--mist-white); max-width:760px; padding:32px; transform:translateY(13vh); } .hero-content h1{ font-size:clamp(40px,7vw,76px); font-weight:300; letter-spacing:-.02em; margin-bottom:22px; } .hero-content .sub{ font-size:18px; line-height:1.6; opacity:.88; margin-bottom:36px; max-width:520px; margin-left:auto; margin-right:auto; } .scroll-cue{ position:absolute; bottom:32px; left:50%; transform:translateX(-50%); color:var(--mist-white); opacity:.7; font-size:18px; animation:bounce 2.2s infinite; z-index:2; } @keyframes bounce{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);} } /* section shell */ section{ max-width:var(--content-max); margin:0 auto; padding:var(--section-y) var(--gutter); } @media (max-width:820px){ section{ padding:90px 24px; } } .section-full{ max-width:none; padding-left:0; padding-right:0; } /* ===== PART 1 — ANCHOR QUOTE & WELCOME ===== */ .anchor-welcome{ text-align:center; max-width:900px; } .anchor-welcome .anchor-quote{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(24px,3.4vw,38px); line-height:1.4; color:var(--jungle-canopy); margin:0 auto 30px; max-width:760px; } .anchor-welcome .mission{ font-size:18px; line-height:1.8; opacity:.8; max-width:640px; margin:0 auto; } .anchor-rule{ width:60px; height:2px; background:var(--terracotta); margin:0 auto 40px; } /* welcome heading sits on the page (cream); quote + mission sit inside a firm-edged image band below */ .welcome-head{ text-align:center; max-width:900px; margin:0 auto; padding:120px 32px 56px; } .welcome-head .welcome{ font-size:clamp(32px,4.5vw,52px); font-weight:400; } .welcome-band{ position:relative; width:100%; min-height:92vh; overflow:hidden; display:flex; align-items:flex-start; justify-content:center; } .welcome-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; } .welcome-text{ position:relative; z-index:3; text-align:center; padding:8vh 32px 0; color:var(--mist-white); text-shadow:0 2px 22px rgba(0,0,0,.55); } /* overlay text on the photo is white for legibility */ .welcome-text .anchor-quote{ color:var(--mist-white); } .welcome-text .mission{ color:var(--mist-white); opacity:.95; } /* ===== PART 2 — CORE PHILOSOPHY (two column) ===== */ .philosophy{ display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; align-items:stretch; } .philosophy-text h2{ font-size:clamp(30px,3.6vw,42px); margin-bottom:26px; } .philosophy-text p{ font-size:17px; line-height:1.8; opacity:.82; margin-bottom:24px; max-width:540px; } .philosophy-text p.lead-out{ font-weight:500; opacity:1; color:var(--jungle-canopy); } @media (max-width:900px){ .philosophy{ grid-template-columns:1fr; gap:40px; } } .philosophy-img{ width:100%; height:100%; min-height:620px; object-fit:cover; object-position:center bottom; border-radius:var(--radius-card); border:1px solid var(--rule); } @media (max-width:900px){ .philosophy-img{ height:auto; min-height:0; aspect-ratio:4/5; } } /* ===== WE DESIGN & DELIVER (offerings) — cards left, image right ===== */ .deliver{ display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:stretch; } .deliver-head{ max-width:720px; margin-bottom:36px; } .deliver-head h2{ font-size:clamp(30px,3.6vw,44px); } /* organizer-facing subheading above the offer cards */ .deliver-sub{ font-size:16px; line-height:1.75; opacity:.82; margin-top:18px; max-width:600px; } .deliver-sub strong{ font-weight:600; color:var(--jungle-canopy); } .deliver-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .deliver-media{ height:100%; } .deliver-media img{ width:100%; height:100%; min-height:100%; object-fit:cover; object-position:center; border-radius:var(--radius-card); border:1px solid var(--rule); } .deliver-card{ position:relative; background:var(--mist-white); border:1px solid var(--rule); border-radius:var(--radius-card); padding:40px 26px; text-align:center; overflow:hidden; transition:transform var(--ease-lift), box-shadow .5s ease; } .deliver-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--terracotta); transform:scaleX(0); transform-origin:left; transition:transform .5s ease; } .deliver-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); } .deliver-card:hover::before{ transform:scaleX(1); } .deliver-num{ font-family:var(--font-display); font-size:22px; font-weight:300; color:var(--terracotta); display:block; margin-bottom:16px; } .deliver-card h3{ font-family:var(--font-body); font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:uppercase; line-height:1.5; color:var(--jungle-canopy); } @media (max-width:900px){ .deliver{ grid-template-columns:1fr; gap:40px; } .deliver-media img{ min-height:auto; height:420px; } } @media (max-width:560px){ .deliver-grid{ grid-template-columns:1fr; } } /* ===== WHY HOST WITH SEIIKI (4 pillars) ===== */ .whywork-head{ max-width:760px; margin-bottom:60px; } .whywork-head h2{ font-size:clamp(32px,4.2vw,52px); } .whywork-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; } .whywork-card{ background:var(--mist-white); border:1px solid var(--rule); border-radius:var(--radius-card); padding:40px; transition:transform var(--ease-lift), box-shadow .5s ease; } .whywork-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); } .whywork-card h3{ font-size:23px; margin-bottom:14px; } .whywork-card p{ font-size:16px; line-height:1.75; opacity:.8; } @media (max-width:820px){ .whywork-grid{ grid-template-columns:1fr; } } /* ===== PART 3 — LANDSCAPE AS A LIVING ELEMENT (full bleed) ===== */ .living{ position:relative; min-height:80vh; display:flex; align-items:center; justify-content:center; padding:120px var(--gutter); overflow:hidden; } .living-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } .living-overlay{ position:absolute; inset:0; background:rgba(26,26,26,.22); } /* card at 20% opacity so the SK 11 photo reads through it */ .living-card{ position:relative; z-index:3; background:rgba(26,26,26,.2); backdrop-filter:blur(2px); border:1px solid rgba(250,250,250,.22); border-radius:6px; padding:56px clamp(28px,4vw,64px); max-width:720px; color:var(--mist-white); text-align:center; text-shadow:0 2px 18px rgba(0,0,0,.55); } .living-card h2{ font-size:clamp(28px,3.6vw,44px); margin-bottom:26px; } .living-card p{ font-size:16px; line-height:1.8; opacity:.9; margin-bottom:20px; } .living-card p:last-child{ margin-bottom:0; } /* the two new nav anchors must not land under the fixed 84px nav bar */ #visa, #guide{ scroll-margin-top:var(--nav-h); } /* ===== VISA & COMPLIANCE (organizer funnel) ===== Two columns on cream: narrative left, three numbered clarity points right. Points use hairline rules rather than cards — this band should read as a quiet document, not as another set of marketing tiles. */ .visa{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; } .visa-lead h2{ font-size:clamp(30px,3.6vw,42px); margin-bottom:26px; } .visa-lead p{ font-size:17px; line-height:1.8; opacity:.82; margin-bottom:24px; max-width:540px; } .visa-lead p.lead-out{ font-weight:500; opacity:1; color:var(--jungle-canopy); } .visa-note{ font-size:14px; line-height:1.7; font-style:italic; opacity:.7; border-left:2px solid var(--terracotta); padding-left:20px; margin-bottom:0; } .visa-point{ border-top:1px solid var(--rule); padding:28px 0; } .visa-point:last-child{ border-bottom:1px solid var(--rule); } .visa-num{ font-family:var(--font-display); font-size:20px; font-weight:300; color:var(--terracotta); display:block; margin-bottom:12px; } .visa-point h3{ font-family:var(--font-body); font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:uppercase; line-height:1.5; color:var(--jungle-canopy); margin-bottom:12px; } .visa-point p{ font-size:16px; line-height:1.75; opacity:.8; } @media (max-width:900px){ .visa{ grid-template-columns:1fr; gap:44px; } } /* ===== BALI RETREAT OPS & VISA GUIDE (lead magnet, dark band) ===== Dark band so the one conversion block on the page carries weight. Reuses the global .field / .thank-you / .btn-secondary.light rules, which were already written for a dark background in the contact section. */ .guide{ background:var(--volcanic-stone); color:var(--mist-white); max-width:none; padding:var(--section-y) var(--gutter); } .guide-inner{ max-width:var(--content-max); margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:80px; align-items:stretch; } /* picture slot — fills the full height of the band beside the text, so the image carries the same visual weight as the copy rather than floating in it */ .guide-media{ height:100%; } .guide-media img{ width:100%; height:100%; min-height:640px; object-fit:cover; border-radius:var(--radius-card); border:1px solid rgba(250,250,250,.16); } .guide-cta{ margin:6px 0 30px; } .guide .eyebrow{ color:var(--terracotta); } .guide h2{ font-size:clamp(30px,3.8vw,44px); font-weight:300; margin-bottom:22px; } .guide-lede{ font-size:17px; line-height:1.8; opacity:.85; max-width:520px; margin-bottom:34px; } .guide-list{ list-style:none; } .guide-list li{ font-size:16px; line-height:1.7; padding:18px 0 18px 30px; position:relative; border-bottom:1px solid rgba(250,250,250,.14); opacity:.88; } .guide-list li:first-child{ border-top:1px solid rgba(250,250,250,.14); } .guide-list li::before{ content:""; position:absolute; left:0; top:26px; width:9px; height:9px; border-radius:50%; background:var(--terracotta); } .guide-form-head{ font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--terracotta); margin-bottom:30px; } .guide-privacy{ font-size:13px; line-height:1.7; opacity:.6; margin-top:24px; max-width:400px; } .guide .thank-you{ font-size:22px; padding:24px 0; } @media (max-width:900px){ .guide-inner{ grid-template-columns:1fr; gap:44px; } .guide-media{ order:2; } .guide-lead{ order:1; } .guide-media img{ height:auto; min-height:440px; } } /* ===== PART 5 — WHO SEIIKI IS BUILT FOR ===== */ .visionary{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .visionary-lead h2{ font-size:clamp(30px,3.6vw,42px); margin-bottom:24px; } .visionary-lead p{ font-size:17px; line-height:1.8; opacity:.82; max-width:520px; } .visionary-lead h4{ font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--jungle-canopy); margin:36px 0 20px; } .container-list{ list-style:none; margin-bottom:40px; } .container-list li{ font-size:16px; line-height:1.6; padding:16px 0 16px 30px; position:relative; border-bottom:1px solid var(--rule); opacity:.9; } .container-list li:first-child{ border-top:1px solid var(--rule); } .container-list li::before{ content:""; position:absolute; left:0; top:23px; width:9px; height:9px; border-radius:50%; background:var(--terracotta); } @media (max-width:900px){ .visionary{ grid-template-columns:1fr; gap:44px; } } .visionary-media{ height:100%; } .visionary-media img{ width:100%; height:100%; min-height:560px; object-fit:cover; border-radius:var(--radius-card); border:1px solid var(--rule); } @media (max-width:900px){ .visionary-media img{ min-height:420px; } } /* ===== PART 6 — HOW IT WORKS ===== */ .howitworks{ background:var(--volcanic-stone); color:var(--mist-white); max-width:none; padding:var(--section-y) var(--gutter); } .hiw-inner{ max-width:var(--content-max); margin:0 auto; } .hiw-intro{ font-family:var(--font-display); font-weight:300; font-style:italic; font-size:clamp(24px,3.2vw,36px); line-height:1.4; max-width:900px; margin-bottom:80px; } .hiw-intro .frequency{ color:var(--terracotta); font-style:normal; } .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; } .step{ border-top:2px solid var(--terracotta); padding-top:28px; } .step-num{ font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta); display:block; margin-bottom:16px; } .step h3{ font-size:22px; line-height:1.25; margin-bottom:16px; color:var(--mist-white); } .step p{ font-size:15px; line-height:1.75; opacity:.78; } @media (max-width:900px){ .steps{ grid-template-columns:1fr; gap:44px; } } /* ===== PART 7 — CTA BAND (flower-feature background) ===== */ .cta-band{ position:relative; text-align:center; overflow:hidden; } .cta-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } .cta-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,26,26,.5), rgba(26,26,26,.66)); } .cta-inner{ position:relative; z-index:2; max-width:820px; margin:0 auto; padding:0 24px; color:var(--mist-white); } .cta-band h2{ font-size:clamp(32px,4.6vw,56px); font-weight:300; margin-bottom:24px; } .cta-band p{ font-size:18px; line-height:1.75; opacity:.9; max-width:620px; margin:0 auto 44px; } /* supporting line under the Ops Clarity Call button — needs .cta-band in the selector to outweigh the .cta-band p rule above */ .cta-band .cta-note{ font-size:14px; line-height:1.7; opacity:.72; max-width:520px; margin:26px auto 0; } /* ===== CONTACT ===== */ .contact{ background:var(--volcanic-stone); color:var(--mist-white); max-width:none; padding:var(--section-y) var(--gutter); } .contact .eyebrow{ color:var(--terracotta); } .contact h2{ font-size:42px; margin-bottom:16px; } .contact .lede{ font-size:16px; opacity:.7; margin-bottom:64px; max-width:480px; } .contact-grid{ max-width:var(--content-max); margin:0 auto; display:grid; grid-template-columns:1.3fr .7fr; gap:80px; } .field{ position:relative; margin-bottom:30px; } .field input, .field textarea{ width:100%; background:transparent; border:none; border-bottom:1px solid rgba(250,250,250,.35); padding:14px 0 8px; font-family:var(--font-body); font-size:16px; color:var(--mist-white); outline:none; resize:none; transition:border-color .3s ease; } .field input:focus, .field textarea:focus{ border-color:var(--terracotta); } .field label{ position:absolute; left:0; top:14px; font-size:14px; color:rgba(250,250,250,.55); pointer-events:none; transition:all .3s ease; } .field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{ transform:translateY(-20px) scale(.85); color:var(--terracotta); } .thank-you{ display:none; font-family:var(--font-display); font-size:24px; line-height:1.5; padding:40px 0; } .contact-side{ display:flex; flex-direction:column; gap:32px; } .socials{ display:flex; flex-direction:column; gap:14px; font-size:14px; letter-spacing:.05em; text-transform:uppercase; } .socials a{ opacity:.7; transition:opacity .3s ease; } .socials a:hover{ opacity:1; color:var(--terracotta); } @media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:48px; } } /* ===== GUIDE REQUEST PAGE (/guide) ===== A single-purpose page: light intro band, then the lead form on a dark band so it can reuse the global .field rules, which were written for dark grounds. */ .guide-form-band{ background:var(--volcanic-stone); color:var(--mist-white); max-width:none; padding:calc(var(--nav-h) + 80px) var(--gutter) var(--section-y); } /* the band already carries --gutter padding, so subtract it to keep the form on the same left edge as the rest of the site's content */ .guide-form-inner{ max-width:calc(var(--content-max) - (var(--gutter) * 2)); margin:0 auto; } .guide-form-inner form, .guide-form-inner .sub{ max-width:720px; } .guide-form-band .eyebrow{ color:var(--terracotta); } .guide-form-band h2{ font-size:clamp(26px,3.4vw,38px); font-weight:300; margin-bottom:14px; } .guide-form-band .sub{ font-size:15px; line-height:1.7; opacity:.75; margin-bottom:46px; max-width:520px; } /* two fields side by side on wide screens */ .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 32px; } @media (max-width:640px){ .field-row{ grid-template-columns:1fr; } } /* select, styled to match the underline inputs rather than the OS default */ .field select{ width:100%; background:transparent; border:none; border-bottom:1px solid rgba(250,250,250,.35); padding:14px 22px 8px 0; font-family:var(--font-body); font-size:16px; color:var(--mist-white); outline:none; appearance:none; -webkit-appearance:none; border-radius:0; cursor:pointer; transition:border-color .3s ease; } .field select:focus{ border-color:var(--terracotta); } .field select option{ background:var(--volcanic-stone); color:var(--mist-white); } .field.select-field::after{ content:""; position:absolute; right:4px; top:24px; width:7px; height:7px; border-right:1px solid rgba(250,250,250,.55); border-bottom:1px solid rgba(250,250,250,.55); transform:rotate(45deg); pointer-events:none; } /* a select always has a value, so its label sits up permanently */ .field.select-field label{ transform:translateY(-20px) scale(.85); } .form-legend{ font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta); margin:44px 0 26px; padding-bottom:10px; border-bottom:1px solid rgba(250,250,250,.14); } .form-legend:first-of-type{ margin-top:0; } .guide-form-band .btn-secondary.light{ margin-top:14px; } .form-note{ font-size:13px; line-height:1.7; opacity:.6; margin-top:22px; max-width:460px; } .form-error{ display:none; font-size:14px; line-height:1.6; color:#E8B4A0; margin-top:18px; } /* the honeypot must be reachable by bots but invisible and unfocusable */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } /* CTA that replaced the inline form in the homepage guide band */ .guide-cta-note{ font-size:13px; line-height:1.7; opacity:.6; margin-top:20px; max-width:380px; } /* ===== /guide FORM FIELDS (added 2026-08-29) ===== The global .field is underline-only with a label that floats over the input. On a long form on a dark ground that reads as blank lines rather than as fields, so this page names every field with a permanent label above it and gives the input a faint ground. Still underline-led, no boxes, no radius — the system's geometry is kept, the ambiguity is not. */ .gfield{ margin-bottom:24px; } .gfield label{ display:block; font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(250,250,250,.62); margin-bottom:9px; } .gfield input, .gfield select, .gfield textarea{ width:100%; background:rgba(250,250,250,.05); border:none; border-bottom:1px solid rgba(250,250,250,.34); border-radius:0; padding:13px 14px; font-family:var(--font-body); font-size:16px; color:var(--mist-white); outline:none; resize:none; transition:border-color .3s ease, background .3s ease; } .gfield textarea{ line-height:1.6; } .gfield input:focus, .gfield select:focus, .gfield textarea:focus{ border-color:var(--terracotta); background:rgba(250,250,250,.09); } .gfield input::placeholder, .gfield textarea::placeholder{ color:rgba(250,250,250,.35); } .gfield select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px; } .gfield select option{ background:var(--volcanic-stone); color:var(--mist-white); } .gfield.select-field{ position:relative; } .gfield.select-field::after{ content:""; position:absolute; right:14px; bottom:20px; width:7px; height:7px; border-right:1px solid rgba(250,250,250,.55); border-bottom:1px solid rgba(250,250,250,.55); transform:rotate(45deg); pointer-events:none; } .gfield .hint{ display:block; font-size:12px; letter-spacing:0; text-transform:none; color:rgba(250,250,250,.4); margin-top:7px; font-weight:400; } .gfield-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 32px; } @media (max-width:680px){ .gfield-row{ grid-template-columns:1fr; } } /* ===== Multi-section booking forms (added 2026-09-21) ===== Section headers and notes inside a .guide-form-band form (e.g. the Disconnect to Reconnect booking form), plus a checkbox row for consent / T&C acceptance, styled to match the .gfield system rather than the OS default checkbox. */ .gform-section-title{ font-family:var(--font-display); font-weight:300; font-size:clamp(18px,2.2vw,24px); color:var(--mist-white); margin:40px 0 6px; padding-top:24px; border-top:1px solid rgba(250,250,250,.14); } .gform-section-title:first-of-type{ margin-top:0; padding-top:0; border-top:none; } .gform-section-note{ font-size:13px; line-height:1.6; color:rgba(250,250,250,.55); margin-bottom:18px; max-width:520px; } .gfield-check{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; cursor:pointer; } .gfield-check input{ flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--terracotta); cursor:pointer; } .gfield-check span{ font-size:14px; line-height:1.6; color:rgba(250,250,250,.82); } .gfield-check a{ color:var(--terracotta); text-decoration:underline; } /* match the site's own mobile gutter (section drops to 24px below 820px) */ @media (max-width:820px){ .guide-form-band{ padding:calc(var(--nav-h) + 50px) 24px 90px; } } /* ===== EVENT LANDING PAGES (added 2026-09-19) ===== e.g. /disconnect-to-reconnect — the same shell as the /guide lead-magnet page (light hero -> light content -> dark .guide-form-band for the RSVP), plus a 16:9 video slot in the hero. See DESIGN.md §4 -> Event pages. */ #rsvp{ scroll-margin-top:var(--nav-h); } .event-hero{ padding-top:calc(var(--nav-h) + 60px); display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .event-hero-text h1{ font-size:clamp(36px,5.4vw,58px); font-weight:300; letter-spacing:-.02em; margin-bottom:18px; } .event-hero-caption{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(19px,2.2vw,24px); line-height:1.5; color:var(--jungle-canopy); margin-bottom:22px; } .event-hero-text .lede{ font-size:16px; line-height:1.8; opacity:.82; max-width:480px; margin-bottom:34px; } .event-hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; } .event-hero-note{ font-size:13px; line-height:1.7; opacity:.65; margin-top:18px; } /* 16:9 video frame — aspect-ratio keeps it exact at every width, no JS needed */ .event-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-card); border:1px solid var(--rule); overflow:hidden; background:var(--volcanic-stone); } .event-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } @media (max-width:900px){ .event-hero{ grid-template-columns:1fr; gap:40px; padding-top:calc(var(--nav-h) + 40px); } } /* two-column highlight list on cream — reuses .container-list per column */ .highlights-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; } @media (max-width:700px){ .highlights-grid{ grid-template-columns:1fr; } } /* ===== BOOKING COUNTDOWN (placeholder purchase page, added 2026-09-19) ===== /disconnect-to-reconnect-reserve holds a live countdown to public booking opening, with the CTA disabled until it reaches zero. */ .countdown{ display:flex; justify-content:center; gap:28px; margin:8px 0 40px; flex-wrap:wrap; } .countdown-unit{ display:flex; flex-direction:column; align-items:center; min-width:64px; } .countdown-num{ font-family:var(--font-display); font-size:clamp(32px,5vw,48px); font-weight:400; color:var(--jungle-canopy); line-height:1; font-variant-numeric:tabular-nums; } .countdown-label{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-top:8px; } /* .btn-primary is normally an styled as a button; this page uses a real