/* =========================================================== SAMUDRA — Shared design tokens & base Inspired by Maybourne's editorial / cinematic luxury aesthetic =========================================================== */ :root { /* Palette — white base (per Daniel 2026-05-19) + deep coastal teal + ink */ --paper: #FFFFFF; /* base background (white) */ --paper-soft: #F6F3EC; /* recessed surface (subtle hover) */ --paper-deep: #E4DDCF; /* hairline rules / inset */ --ink: #2A2520; /* primary text */ --ink-soft: #4A4138; --ink-mute: #6E6456; /* secondary text / labels */ --teal: #2E5E3A; /* camp foliage green (signature) */ --teal-deep: #1C3A23; --sand: #C7A878; /* warm sand accent */ --gold: #2F6F8F; /* sky/sea blue accent */ /* Type */ --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-script: 'Caveat', 'Bricolage Grotesque', cursive; --font-label: 'Hanken Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Spacing rhythm */ --gutter: clamp(20px, 4vw, 64px); --section-y: clamp(72px, 11vw, 160px); /* Motion */ --ease: cubic-bezier(.22,.61,.36,1); } /* Theme variant — applied via [data-theme="dusk"] on */ html[data-theme="dusk"] { --paper: #1C231C; --paper-soft: #28301F; --paper-deep: #3A4430; --ink: #EFEAE0; --ink-soft: #D8D2C6; --ink-mute: #9E9A8C; --teal: #8FB98F; --sand: #C7A878; --gold: #6FA8C4; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--paper); color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* ---------- Typography ---------- */ .eyebrow { font-family: var(--font-label); font-size: 11px; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-mute); } .eyebrow--gold { color: var(--gold); } .eyebrow--light { color: rgba(255,255,255,0.78); } .display-xl { font-family: var(--font-display); font-weight: 300; font-size: clamp(48px, 8.4vw, 132px); line-height: 0.98; letter-spacing: -0.005em; } .display-l { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -0.005em; } .display-m { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 3.8vw, 56px); line-height: 1.08; } .display-s { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: 0.01em; } .script { font-family: var(--font-script); font-weight: 400; font-style: italic; font-size: 1.5em; line-height: 0.9; color: var(--gold); } .lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.65; color: var(--ink-soft); } p { font-family: var(--font-label); font-size: 17px; line-height: 1.65; color: var(--ink-soft); } /* ---------- Rule lines ---------- */ .rule { height: 1px; width: 80px; background: var(--ink); opacity: 0.4; } .rule--center { margin: 0 auto; } .rule--vert { width: 1px; height: 80px; background: currentColor; opacity: 0.35; } .rule--full { height: 1px; width: 100%; background: var(--paper-deep); } .ornament { display: inline-flex; align-items: center; gap: 14px; color: var(--ink-mute); } .ornament::before, .ornament::after { content:""; width: 36px; height: 1px; background: currentColor; opacity: 0.5; } /* ---------- Buttons / Links ---------- */ .link-arrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink); padding-bottom: 4px; position: relative; } .link-arrow::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform-origin: left; transition: transform .5s var(--ease); } .link-arrow:hover::after { transform: scaleX(0); transform-origin: right; } .link-arrow .arr { display: inline-block; transition: transform .4s var(--ease); } .link-arrow:hover .arr { transform: translateX(6px); } /* P2-2 MOBILE FIX 2026-05-20: link-arrow tap target below 44px (~11px text height). Add min-height + vertical padding to meet the 44px touch target floor. */ @media (max-width: 880px) { .link-arrow { min-height: 44px; padding-top: 14px; padding-bottom: 14px; } } .btn-ghost { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; padding: 16px 28px; border: 1px solid currentColor; transition: background .4s var(--ease), color .4s var(--ease); } .btn-ghost:hover { background: var(--ink); color: var(--paper); } .btn-solid { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; padding: 16px 28px; background: var(--ink); color: var(--paper); transition: background .4s var(--ease); } .btn-solid:hover { background: var(--teal); } /* ---------- Top nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px var(--gutter); color: var(--paper); transition: background .5s var(--ease), color .5s var(--ease), border .5s var(--ease); border-bottom: 1px solid transparent; } .nav.is-solid { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--paper-deep); } .nav__group { display: flex; gap: 34px; } .nav__group--right { justify-content: flex-end; } .nav__link { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; padding: 6px 0; position: relative; } .nav__link::after { content:""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: currentColor; transition: left .4s var(--ease), right .4s var(--ease); } .nav__link:hover::after, .nav__link.is-active::after { left: 0; right: 0; } .brand { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: 0.42em; text-transform: uppercase; text-align: center; } .brand small { display: block; font-family: var(--font-label); font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; margin-top: 4px; opacity: 0.7; } .nav__reserve { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; padding: 10px 22px; border: 1px solid currentColor; transition: background .4s var(--ease), color .4s var(--ease); } .nav__reserve:hover { background: currentColor; color: var(--paper); } .nav.is-solid .nav__reserve:hover { background: var(--ink); color: var(--paper); } /* ---------- Footer ---------- */ .foot { background: var(--teal); color: var(--paper); padding: 96px var(--gutter) 36px; } .foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 64px; border-bottom: 1px solid rgba(241,235,223,0.18); } .foot__brand { display: flex; flex-direction: column; gap: 18px; max-width: 320px; } .foot__brand .brand { text-align: left; font-size: 28px; } .foot__brand p { color: rgba(241,235,223,0.7); font-size: 15px; line-height: 1.6; } .foot__col h4 { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(241,235,223,0.55); margin-bottom: 22px; font-weight: 400; } .foot__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .foot__col a { font-size: 15px; color: rgba(241,235,223,0.85); transition: color .3s var(--ease); } .foot__col a:hover { color: var(--paper); } .foot__base { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; font-family: var(--font-label); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(241,235,223,0.5); } /* ---------- Photo frame ---------- */ .frame { position: relative; background-color: #d6c9b1; background-image: radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,0.45), transparent 60%), linear-gradient(135deg, #d6c9b1 0%, #b39d80 55%, #6e5e49 100%); background-size: cover; background-position: center; overflow: hidden; transition: filter .8s var(--ease), opacity .8s var(--ease); } /* Editorial filter — warm, desaturated, soft sepia. Strong enough that randomly-sourced photos read as a single cinematic body of work. */ .frame.has-photo { filter: saturate(0.9) contrast(1.02) brightness(0.98) sepia(0); } /* Warm teal/amber duotone above the photo + bottom darkening band so the caption stays legible regardless of source image. */ .frame.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,12,0.06) 0%, rgba(12,16,12,0.04) 40%, rgba(8,14,10,0.40) 100%), linear-gradient(135deg, rgba(46,94,58,0.06), rgba(47,111,143,0.06)); mix-blend-mode: multiply; pointer-events: none; z-index: 1; } /* Caption sits above overlay + grain, with a small protective pill */ .frame__caption { z-index: 2; padding: 6px 10px 6px 0; background: linear-gradient(90deg, rgba(8,14,16,0.55) 0%, rgba(8,14,16,0.3) 70%, transparent 100%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 1px; } /* Once a real photo has been assigned, hide the placeholder caption — its specific descriptor would mislabel a random landscape. The editorial filter alone holds the frame together. */ .frame.has-photo .frame__caption { display: none; } .frame--teal { background-image: radial-gradient(120% 80% at 70% 15%, rgba(245,238,222,0.25), transparent 60%), linear-gradient(160deg, #2c5b54 0%, #1e443f 45%, #0e2522 100%); color: #f1ebdf; } .frame--dusk { background-image: radial-gradient(80% 60% at 50% 90%, rgba(255,193,140,0.45), transparent 70%), linear-gradient(180deg, #3a2f3a 0%, #6b4a4a 45%, #c4866b 100%); color: #f1ebdf; } .frame--ocean { background-image: radial-gradient(60% 60% at 60% 70%, rgba(255,255,255,0.18), transparent 80%), linear-gradient(180deg, #5d8a89 0%, #2e5a59 50%, #143230 100%); color: #f1ebdf; } .frame--sand { background-image: radial-gradient(120% 80% at 50% 30%, #f4e9d2 0%, #d9c4a0 55%, #a78863 100%); color: #1F1B17; } .frame--forest { background-image: radial-gradient(80% 80% at 30% 70%, rgba(255,255,255,0.15), transparent 70%), linear-gradient(160deg, #4a5e3d 0%, #2c3a25 60%, #14180e 100%); color: #f1ebdf; } .frame--stone { background-image: radial-gradient(120% 80% at 50% 20%, #efe7d8 0%, #b8ad96 60%, #6c6453 100%); color: #1F1B17; } /* Film-grain veneer */ .frame::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; opacity: 0.5; pointer-events: none; } .frame__caption { position: absolute; left: 22px; bottom: 18px; display: flex; align-items: center; gap: 12px; font-family: var(--font-label); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: currentColor; opacity: 0.78; } .frame__caption::before { content:""; width: 18px; height: 1px; background: currentColor; } .frame__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; color: currentColor; opacity: 0.55; pointer-events: none; } .frame__overlay svg { width: 38px; height: 38px; } /* ---------- Reveal-on-scroll utility ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ---------- Container ---------- */ .wrap { padding-left: var(--gutter); padding-right: var(--gutter); } .wrap--narrow { max-width: 880px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* ---------- Section title block ---------- */ .section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; padding: var(--section-y) var(--gutter) calc(var(--section-y) * 0.5); } .section-head .rule { background: var(--ink); opacity: 0.6; } /* ---------- Tag list ---------- */ .tagline { display: flex; align-items: center; gap: 18px; font-family: var(--font-label); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-mute); } .tagline .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; } /* ========================================================== PHASE 1 — MOBILE POLISH (BLOCKS A + B + D + E + H) 2026-05-18 — MASON ========================================================== */ /* ---- BLOCK A1: Hamburger toggle button (hidden on desktop) ---- */ .nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; color: currentColor; cursor: pointer; flex-shrink: 0; } .nav__toggle svg { width: 24px; height: 24px; } /* Drawer hidden on desktop — fixed fullscreen, only visible on mobile */ .nav__drawer { display: none; } /* ---- BLOCK A1: Mobile nav + drawer ---- */ @media (max-width: 880px) { /* Grid: toggle | brand | (right group hidden) → use 3-col: auto 1fr auto */ .nav { grid-template-columns: auto 1fr auto; padding: 16px var(--gutter); } /* Desktop groups hidden — toggle takes their column slot */ .nav__group { display: none; } /* Place brand in center col, toggle in last col */ .brand { grid-column: 2; grid-row: 1; font-size: 18px; letter-spacing: 0.32em; text-align: center; } .brand small { font-size: 8px; } .nav__toggle { display: inline-flex; grid-column: 3; grid-row: 1; } /* Full-screen drawer */ .nav__drawer { position: fixed; inset: 0; background: var(--paper); color: var(--ink); z-index: 60; display: flex; flex-direction: column; /* override global display:none */ padding: 88px var(--gutter) 32px; gap: 0; transform: translateX(100%); transition: transform 0.4s var(--ease); overflow-y: auto; } .nav__drawer.is-open { transform: translateX(0); } /* Drawer nav links */ .nav__drawer .nav__link { display: block; font-family: var(--font-display); font-size: 28px; letter-spacing: 0.04em; text-transform: none; padding: 16px 0; border-bottom: 1px solid var(--paper-deep); color: var(--ink); } .nav__drawer .nav__link::after { display: none; } /* Reserve CTA inside drawer */ .nav__drawer .nav__reserve { margin-top: 24px; padding: 18px 0; text-align: center; background: var(--ink); color: var(--paper); font-size: 12px; border: 0; } /* Lock body scroll when drawer is open */ body.is-nav-open { overflow: hidden; } /* Footer: 2-col on tablet → 1-col on phone */ .foot__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .foot__grid { grid-template-columns: 1fr; } .foot__base { flex-direction: column; gap: 12px; text-align: center; } } /* ---- BLOCK A4: Hero min-height fix ---- */ @media (max-width: 640px) { .hero { min-height: 0; height: 100svh; } @supports not (height: 100svh) { .hero { height: 100vh; min-height: 560px; } } .hero__foot { flex-direction: column; gap: 16px; align-items: flex-start; text-align: left; padding-bottom: 24px; } } /* ---- BLOCK B1: Calendar day tap targets ---- */ @media (max-width: 880px) { .cal__month { padding: 14px; } .cal__day { max-width: none; min-height: 44px; font-size: 17px; } } /* P1-1 MOBILE FIX 2026-05-20: Calendar 308px min-width overflow at 360px repeat(7, minmax(44px,1fr)) = 308px + 28px padding = 336px > 320px usable. Fix: drop width floor, keep height floor for touch target. Reduce padding further at ≤380px to reclaim space. */ @media (max-width: 640px) { .cal__grid { grid-template-columns: repeat(7, 1fr) !important; } .cal__day { min-width: 0; min-height: 44px; } } @media (max-width: 380px) { .cal__month { padding: 8px; } .cal__day { min-height: 40px; font-size: 14px; } } /* ---- BLOCK B2: Stepper — horizontal scroll, no wrap ---- */ @media (max-width: 880px) { .stepper { overflow-x: auto; flex-wrap: nowrap; padding: 0 var(--gutter); scrollbar-width: none; } .stepper::-webkit-scrollbar { display: none; } .step { flex: 0 0 auto; padding: 16px 18px; min-height: 56px; } .step__num { width: 32px; height: 32px; font-size: 16px; } /* P2-6 Stepper fade-edge scroll affordance: right fade hint that more steps exist */ .stepper-wrap { position: relative; } .stepper-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 48px; background: linear-gradient(to left, var(--paper) 0%, transparent 100%); pointer-events: none; z-index: 2; } } /* ---- BLOCK B3: Guest stepper +/- ---- */ @media (max-width: 880px) { .stepper-num button { width: 44px; height: 44px; font-size: 24px; } } /* ---- BLOCK B5: Form input touch-padding ---- */ @media (max-width: 880px) { .form__field input, .form__field textarea, .form__field select { padding: 12px 0; font-size: 18px; min-height: 44px; } .form__field select { padding: 12px 4px; } } /* ---- BLOCK B6: AI widget close/send tap targets ---- */ @media (max-width: 640px) { .sc-close { padding: 12px; min-width: 44px; min-height: 44px; } .sc-send { min-width: 56px; } .sc-input { font-size: 16px; padding: 14px 16px; min-height: 48px; } } /* ---- BLOCK D2: Booking strip — single column on mobile ---- */ @media (max-width: 640px) { .booking { grid-template-columns: 1fr; margin: -32px 16px 0; } .booking__intro, .field { border-right: 0; border-bottom: 1px solid var(--paper-deep); } .field { padding: 18px 24px; min-height: 56px; } .booking__cta { padding: 22px 24px; justify-content: center; } } /* ---- BLOCK A2: Reservations action bar — stack on mobile ---- */ @media (max-width: 640px) { .actions { flex-direction: column-reverse; gap: 14px; align-items: stretch; } .actions__back { text-align: center; padding: 12px 0; } .actions__next { width: 100%; padding: 18px 24px; text-align: center; } } /* ---- BLOCK E / A3: AI widget — shrink + reposition on mobile ---- */ @media (max-width: 640px) { #samudra-concierge-toggle { bottom: 16px; right: 16px; width: 48px; height: 48px; } @supports (padding: max(0px)) { #samudra-concierge-toggle { bottom: max(16px, env(safe-area-inset-bottom)); } } /* On reservations page: push widget above fixed action bar */ body[data-page="reservations"] #samudra-concierge-toggle { bottom: 84px; } } /* P1-2 MOBILE FIX 2026-05-20: AI panel full-bleed moved from ≤400px → ≤480px 401-480px band (Pixel/Plus class 411-430px CSS px) previously got a 400px panel pinned right:12px leaving only ~12px left gap — asymmetric and cramped. Full-bleed now activates at 480px (merged with existing ≤480 block below). */ @media (max-width: 480px) { #samudra-concierge { bottom: 76px; right: 8px; left: 8px; width: auto; max-width: none; /* P2-5: swap 100vh → 100dvh so panel doesn't extend behind iOS Safari toolbar. @supports fallback for older browsers. */ height: calc(100dvh - 96px); max-height: none; } @supports not (height: 100dvh) { #samudra-concierge { height: calc(100vh - 96px); } } } /* ---- BLOCK H: WCAG AA contrast fixes (footer on teal) ---- */ /* Bump footer text alpha to pass 4.5:1 AA against --teal (#1E443F) */ .foot__col h4 { color: rgba(241,235,223,0.72); } /* was 0.55 → ~4.6:1 */ .foot__col a { color: rgba(241,235,223,0.92); } /* was 0.85 — raise slightly */ .foot__base { color: rgba(241,235,223,0.70); } /* was 0.5 → AA compliant */ .eyebrow--light { color: rgba(255,255,255,0.85); } /* was 0.78 */ /* Focus rings — WCAG 2.4.7 */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .btn-ghost:focus-visible, .btn-solid:focus-visible, .nav__reserve:focus-visible, .booking__cta:focus-visible, .actions__next:focus-visible { outline-color: var(--paper); outline-offset: -4px; } /* Anchor scroll-margin (fixed nav offset) */ [id] { scroll-margin-top: 96px; } /* ---- prefers-reduced-motion guard (Block H / global a11y) ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } .hero__media { transform: none !important; } } /* ========================================================== PHASE 2 — READABILITY + EFFECTS POLISH (BLOCKS F + G1–G4) 2026-05-18 — MASON ========================================================== */ /* ===== BLOCK F — READABILITY TYPOGRAPHY ===== */ /* F1: Responsive body font — iOS no-zoom floor + mobile scale */ html, body { font-size: clamp(16px, 0.5vw + 14px, 17px); } /* F2: Paragraph readable max-width (~65ch) */ p { max-width: 65ch; } /* Override for full-bleed / layout containers */ .welcome__body p, .featured__body p, .dining__body p, .summary p, .foot__brand p, .sc-bubble, .room__body p, .section-head p, .hero__sub, .lead { max-width: none; } /* F3: Hero title — reduce mobile floor from 64px → 48px */ .hero__title { font-size: clamp(48px, 11vw, 168px); } /* P0-2 MOBILE FIX 2026-05-20: pagehero h1 clamp floor 56px → 40px All 4 content pages (stay/dine/spa/experiences) share .pagehero h1 with clamp(56px,9vw,140px). At 360px usable ~320px, 56px serif overflows. index.html already had this exact fix (64→48). Lower to 40px here. Shared rule in styles.css beats per-page