/* ---------- Fonts ---------- */ /* Aukio (headings, wordmark, UI accents) is loaded via Adobe Fonts (Typekit) — see the in of every page. Montserrat (body text) is self-hosted below. */ @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat/Montserrat-VariableFont_wght.ttf") format("truetype-variations"), url("../fonts/montserrat/Montserrat-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations"), url("../fonts/montserrat/Montserrat-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; } /* ---------- Design tokens ---------- */ :root { --color-bg: #faf7f1; --color-bg-alt: #f1ebdf; --color-card: #ffffff; --color-ink: #211c15; --color-ink-soft: #6a6255; --color-line: #e6dfd0; --color-green-deep: #202b23; --color-green: #35452f; --color-maroon: #4a241c; --color-maroon-deep: #391a14; --color-brass: #b3894f; --color-cream-text: #f3ead9; /* Aukio (Adobe Fonts / Typekit, kit sjc1lxy) for headings, wordmark and UI accents. The kit only ships the regular (400) weight, so bold/ italic here are browser-synthesized. Body text uses Montserrat (self-hosted, see @font-face above). */ --font-serif: "aukio-std", Georgia, "Times New Roman", serif; --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-accent: "aukio-std", var(--font-sans); --radius-lg: 18px; --radius-md: 12px; --radius-full: 999px; --shadow-card: 0 8px 24px rgba(32, 27, 20, 0.08); --shadow-bar: 0 10px 30px rgba(32, 27, 20, 0.14); --container: 1180px; } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.15; margin: 0 0 0.5em; color: var(--color-ink); } p { margin: 0 0 1em; } button, input, select { font-family: var(--font-sans); font-size: 1rem; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Placeholder image blocks ---------- */ /* Real photos: main.js checks each [data-photo] element for a file at that path. If it loads, main.js sets this element's background-image inline (which overrides the placeholder below) and hides the placeholder label. If it 404s, nothing changes — the striped placeholder + label stay exactly as they are. See assets/img/README.txt. */ .ph-img { position: relative; width: 100%; height: 100%; min-height: 90px; background: repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 12px, transparent 12px 24px), linear-gradient(160deg, #ded3bd, #c9bda2); border-radius: inherit; overflow: hidden; display: flex; align-items: flex-end; } .ph-img::after { content: attr(data-label); display: block; width: 100%; padding: 8px 10px; font-family: var(--font-accent); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: #5a5240; background: rgba(255,255,255,0.55); } .ph-img.has-photo::after { display: none; } /* ---------- Header ---------- */ .site-header { position: relative; z-index: 1; } .header-bar { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; } .header-bar .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; } .menu-btn { background: none; border: 1px solid rgba(255,255,255,0.5); color: var(--color-cream-text); border-radius: var(--radius-full); width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .menu-btn span, .menu-btn::before, .menu-btn::after { content: ""; } .menu-icon { width: 18px; height: 12px; position: relative; } .menu-icon span, .menu-icon i { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; } .menu-icon span { top: 0; } .menu-icon b { position: absolute; left: 0; top: 5px; width: 100%; height: 2px; background: currentColor; } .menu-icon i { bottom: 0; } .brand { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; color: var(--color-cream-text); letter-spacing: 0.02em; } .header-bar .brand { font-size: 1.2rem; } .nav-left { display: flex; align-items: center; gap: 40px; } .nav-links { display: flex; align-items: center; gap: 26px; } .nav-links a { font-family: var(--font-accent); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-cream-text); opacity: 0.85; } .nav-links a:hover { opacity: 1; } .header-bar-actions { display: flex; align-items: center; gap: 16px; } @media (min-width: 861px) { .menu-btn { display: none; } } @media (max-width: 860px) { .nav-links { display: none; } } .login-link { font-family: var(--font-accent); font-weight: 600; letter-spacing: 0.03em; color: var(--color-cream-text); border: 1px solid rgba(255,255,255,0.6); border-radius: var(--radius-full); padding: 9px 18px; display: inline-flex; align-items: center; gap: 6px; background: transparent; cursor: pointer; } /* Nav drawer */ .nav-drawer { position: fixed; inset: 0; z-index: 50; display: none; } .nav-drawer.open { display: block; } .nav-drawer .backdrop { position: absolute; inset: 0; background: rgba(20, 16, 11, 0.55); } .nav-drawer .panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(320px, 82vw); background: var(--color-green-deep); padding: 28px 24px; display: flex; flex-direction: column; gap: 6px; } .nav-drawer .panel a, .nav-drawer .panel button { font-family: var(--font-accent); font-size: 1.1rem; letter-spacing: 0.02em; color: var(--color-cream-text); padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,0.12); text-align: left; background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; } .nav-drawer .close-btn { align-self: flex-end; color: var(--color-cream-text); background: none; border: none; font-size: 1.4rem; cursor: pointer; margin-bottom: 12px; } /* ---------- Hero ---------- */ .hero { background: linear-gradient(180deg, rgba(16,20,15,0.35), rgba(16,20,15,0.55)), repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 16px, transparent 16px 32px), linear-gradient(150deg, #33422f, #1c2419); color: var(--color-cream-text); padding-bottom: 64px; } .hero-inner { padding: 70px 24px 90px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .hero h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); color: var(--color-cream-text); margin: 0; } .hero .tagline { font-family: var(--font-accent); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.95rem; color: rgba(243,234,217,0.85); margin: 0; } /* ---------- Homepage hero-intro (below the hero photo) ---------- */ .home-intro-section { background: var(--color-green-deep); padding: 72px 0; } .home-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .home-intro .ph-img { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); } .home-intro h2 { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--color-cream-text); margin-bottom: 20px; } .home-intro p { font-size: 1.05rem; color: rgba(243, 234, 217, 0.85); margin-bottom: 28px; } .home-intro .btn-row { display: flex; gap: 14px; flex-wrap: wrap; } /* ---------- Membership gate (blur until logged in) ---------- */ .gated-wrap { position: relative; } [data-exp-rows].is-locked { filter: blur(18px); pointer-events: none; user-select: none; } .gate-overlay[hidden] { display: none; } .gate-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; } .gate-card { background: rgba(255, 255, 255, 0.94); border-radius: var(--radius-lg); padding: 36px 44px; text-align: center; box-shadow: var(--shadow-bar); max-width: 360px; } .gate-card h3 { font-size: 1.3rem; margin-bottom: 8px; } .gate-card p { color: var(--color-ink-soft); margin-bottom: 20px; } /* ---------- Experience rows / grid ---------- */ .rows { padding: 56px 0 40px; } .exp-row { margin-bottom: 44px; } .exp-row-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } .exp-row-head h2 { font-size: 1.4rem; font-style: italic; } .exp-row-empty { color: var(--color-ink-soft); font-style: italic; } .exp-scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; } .exp-card { background: var(--color-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); display: block; cursor: pointer; border: 1px solid var(--color-line); } .exp-card:hover { box-shadow: 0 14px 30px rgba(32,27,20,0.14); } .exp-card .ph-img { aspect-ratio: 4 / 3; height: auto; border-radius: 0; } .exp-card-body { padding: 14px 16px 18px; } .exp-card-badge { font-family: var(--font-accent); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--color-brass); border-radius: var(--radius-full); padding: 3px 10px; position: absolute; left: 12px; bottom: 12px; } .exp-card-title { font-family: var(--font-sans); font-weight: 400; font-size: 1.05rem; margin: 0 0 8px; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .exp-card-meta { font-family: var(--font-sans); font-size: 0.78rem; color: var(--color-ink-soft); display: flex; justify-content: space-between; gap: 8px; } .exp-card-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .exp-card-meta span:last-child { text-align: right; } /* ---------- Grid (used on detail page "more experiences") ---------- */ .exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; } /* ---------- Footer ---------- */ .site-footer { background: var(--color-green-deep); color: rgba(243,234,217,0.75); margin-top: 60px; padding: 40px 0 28px; } .footer-top { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; margin-bottom: 22px; } .footer-top .brand { font-size: 1.3rem; } .footer-nav { display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--font-accent); } .footer-fine { border-top: 1px solid rgba(243,234,217,0.15); padding-top: 18px; font-size: 0.82rem; color: rgba(243,234,217,0.5); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-accent); font-weight: 700; letter-spacing: 0.03em; border-radius: var(--radius-full); padding: 14px 30px; border: none; cursor: pointer; font-size: 0.95rem; } .btn-primary { background: var(--color-green-deep); color: var(--color-cream-text); } .btn-primary:hover { background: #171f18; } .btn-outline { background: transparent; border: 1px solid var(--color-ink); color: var(--color-ink); } .btn-light { background: var(--color-cream-text); color: var(--color-green-deep); } .btn-light:hover { background: #fff; } .btn-outline-light { background: transparent; border: 1px solid rgba(243, 234, 217, 0.6); color: var(--color-cream-text); } .btn-outline-light:hover { border-color: var(--color-cream-text); } /* ---------- Membership page ---------- */ .section { padding: 64px 0; } .section-tight { padding: 48px 0; } .membership-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .membership-intro .ph-img { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); } .membership-intro .eyebrow { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--color-brass); margin-bottom: 10px; display: block; } .membership-intro p.lede { font-size: 1.08rem; color: var(--color-ink-soft); } .band-maroon { background: linear-gradient(160deg, var(--color-maroon), var(--color-maroon-deep)); color: var(--color-cream-text); } .band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .band-card { background: var(--color-card); color: var(--color-ink); border-radius: var(--radius-md); overflow: hidden; } .band-card .ph-img { aspect-ratio: 16 / 10; border-radius: 0; position: relative; } .band-card .ph-img::after { display: none; } .band-card .ph-img .label-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px; font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: #fff; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55)); } .band-card-body { padding: 16px 18px 20px; } .band-card-body h3 { font-size: 1.05rem; font-style: italic; } .band-card-body p { color: var(--color-ink-soft); margin: 0; font-size: 0.92rem; } .how-we-work { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; } .how-we-work .eyebrow { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--color-brass); display: block; margin-bottom: 10px; } .step-list { display: flex; flex-direction: column; gap: 26px; } .step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; } .step-num { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--color-maroon); } .step h3 { font-size: 1.05rem; margin-bottom: 4px; } .step p { color: var(--color-ink-soft); margin: 0; } .cta-center { text-align: center; padding: 64px 0 80px; } .cta-center p { color: var(--color-ink-soft); max-width: 480px; margin: 0 auto 22px; } /* ---------- Experience detail page ---------- */ .detail-header { padding: 40px 0 8px; } .detail-header .eyebrow { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--color-brass); display: block; margin-bottom: 8px; } .detail-header h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); max-width: 760px; } .gallery { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin: 28px 0 36px; height: clamp(320px, 42vw, 480px); } .gallery .ph-img { border-radius: var(--radius-lg); height: 100%; } .gallery-main { height: 100%; } .gallery-thumbs { display: flex; flex-direction: column; gap: 12px; height: 100%; } .gallery-thumbs .ph-img { flex: 1 1 0; min-height: 0; } .detail-body { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 48px; align-items: start; } .detail-desc p { color: var(--color-ink-soft); font-size: 1.02rem; } .detail-facts { display: flex; gap: 28px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-line); font-family: var(--font-sans); } .detail-facts div span { display: block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-soft); } .detail-facts div strong { font-size: 1.02rem; font-weight: 700; } .detail-addition { margin-top: 28px; padding: 22px 24px; background: var(--color-bg-alt); border-radius: var(--radius-lg); } .detail-addition .eyebrow { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--color-brass); display: block; margin-bottom: 6px; } .detail-addition h3 { font-size: 1.15rem; margin-bottom: 10px; } .detail-addition p { color: var(--color-ink-soft); font-size: 0.98rem; } .detail-addition p:last-child { margin-bottom: 0; } .booking-widget { background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-card); position: sticky; top: 24px; } .booking-widget h3 { font-size: 1.1rem; margin-bottom: 4px; } .booking-widget .price { color: var(--color-ink-soft); margin-bottom: 16px; font-size: 0.92rem; } .booking-fields { border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px; } .booking-field { padding: 10px 14px; border-bottom: 1px solid var(--color-line); } .booking-field:last-child { border-bottom: none; } .booking-field label { font-family: var(--font-accent); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-soft); display: block; margin-bottom: 2px; } .booking-field input, .booking-field select { border: none; outline: none; width: 100%; background: transparent; font-size: 0.94rem; color: var(--color-ink); } .booking-widget .btn { width: 100%; } .booking-confirm { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-md); background: #eef4ea; color: #33502c; font-size: 0.9rem; display: none; } .booking-confirm.show { display: block; } .more-experiences { margin-top: 72px; } .more-experiences h2 { font-style: italic; font-size: 1.5rem; margin-bottom: 18px; } /* ---------- Gallery: clickable photo tiles + inline video embed ---------- */ .gallery .ph-img { cursor: pointer; } .gallery .ph-img:hover::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.08); } .video-embed { cursor: default; background: var(--color-green-deep); padding: 0; } .video-embed::after { display: none; } .gallery .ph-img.video-embed:hover::before { content: none; } .video-embed iframe { width: 100%; height: 100%; display: block; border: none; } /* ---------- Lightbox ---------- */ .lightbox[hidden], .modal[hidden] { display: none; } .lightbox { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; } .lightbox-backdrop { position: absolute; inset: 0; background: rgba(10, 9, 7, 0.92); } .lightbox-stage { position: relative; z-index: 1; width: min(1100px, 90vw); height: min(80vh, 720px); display: flex; align-items: center; justify-content: center; } .lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); } .lightbox-stage iframe { width: 100%; height: 100%; border: none; border-radius: var(--radius-md); background: #000; } .lightbox-close { position: absolute; top: 20px; right: 24px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } .lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,0.75); font-family: var(--font-accent); font-size: 0.85rem; letter-spacing: 0.04em; } /* ---------- Request-details modal ---------- */ .modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; } .modal-backdrop { position: absolute; inset: 0; background: rgba(20, 16, 11, 0.55); } .modal-card { position: relative; z-index: 1; width: min(440px, 100%); background: var(--color-card); border-radius: var(--radius-lg); padding: 32px 28px 28px; box-shadow: var(--shadow-bar); } .modal-card h3 { font-size: 1.3rem; margin-bottom: 6px; } .modal-sub { color: var(--color-ink-soft); font-size: 0.92rem; margin-bottom: 22px; } .modal-close { position: absolute; top: 16px; right: 16px; border: none; background: none; font-size: 1.4rem; line-height: 1; color: var(--color-ink-soft); cursor: pointer; } .modal-field { margin-bottom: 14px; } .modal-field label { font-family: var(--font-accent); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-soft); display: block; margin-bottom: 4px; } .modal-field label span { text-transform: none; letter-spacing: 0; } .modal-field input { width: 100%; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 10px 12px; font-size: 0.95rem; color: var(--color-ink); background: var(--color-bg); } .modal-field input:focus { outline: 2px solid var(--color-green-deep); outline-offset: 1px; } .modal-card .btn { width: 100%; margin-top: 6px; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .membership-intro, .home-intro, .how-we-work, .detail-body { grid-template-columns: 1fr; } .band-grid { grid-template-columns: 1fr; } .booking-widget { position: static; } .gallery { grid-template-columns: 1fr; height: auto; } .gallery-main { height: 260px; } .gallery-thumbs { flex-direction: row; height: 110px; } } @media (max-width: 560px) { .footer-top { flex-direction: column; align-items: flex-start; } }