:root { /* ======================================== 01. FOUNDATION COLOURS ======================================== */ --color-volcanic: #151817; --color-charcoal: #202421; --color-forest: #344638; --color-ivory: #F0EDE5; --color-stone: #A8AAA3; --color-sand: #C8B7A3; /* ======================================== 02. BRAND COLOURS ======================================== */ --color-brand: #4F999A; --color-brand-hover: #43888A; --color-brand-muted: rgba(79, 153, 154, 0.15); /* ======================================== 03. SEMANTIC COLOURS ======================================== */ --color-bg: var(--color-volcanic); --color-surface: #1C201E; --color-surface-raised: #242825; --color-surface-elevated: #2C302C; --color-text: var(--color-ivory); --color-text-muted: #c8c7c0; --color-text-subtle: #999a93; --color-border: rgba(240, 237, 229, 0.10); /* ======================================== 04. TYPOGRAPHY ======================================== */ --font-serif: "Source Serif 4", serif; --font-sans: "Source Sans 3", sans-serif; /* Type scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem; --text-4xl: 3.5rem; /* ======================================== 05. SPACING ======================================== */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem; --content-max-width: 1200px; /* ======================================== 06. SHAPE ======================================== */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; /* ======================================== 07. MOTION ======================================== */ --motion-fast: 180ms; --motion-medium: 400ms; --motion-slow: 800ms; --ease-standard: ease; --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1); } /* ======================================== 02. RESET / GLOBAL FOUNDATION ======================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p { margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 500; line-height: 1.1; } p { color: var(--color-text-muted); } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } button { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; } img, picture, video { display: block; } img, video { max-width: 100%; } ul, ol { margin: 0; padding: 0; } ul { list-style: none; } :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; } .skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 1000; padding: 0.75rem 1rem; background-color: var(--color-ivory); color: var(--color-volcanic); transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } ::selection { background-color: var(--color-brand); color: var(--color-volcanic); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ======================================== 03. GLOBAL LAYOUT ======================================== */ .container { width: min(100% - 2rem, var(--content-max-width)); margin-inline: auto; } @media (min-width: 768px) { .container { width: min(100% - 4rem, var(--content-max-width)); } } @media (min-width: 1200px) { .container { width: min(100% - 6rem, var(--content-max-width)); } } /* ======================================== 04. HEADER — V2 ======================================== */ .site-header { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; color: var(--color-text); } /* ======================================== HEADER NAVIGATION ======================================== */ .main-navigation { width: min(100% - 2rem, var(--content-max-width)); min-height: 5rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 102; } .site-logo { display: flex; align-items: center; flex-shrink: 0; position: relative; z-index: 103; } .site-logo img { display: block; width: auto; max-width: 9rem; height: auto; } /* ======================================== MENU BUTTON ======================================== */ .menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.75rem 0; position: relative; z-index: 103; color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 500; line-height: 1; transition: color var(--motion-fast) var(--ease-standard); } .menu-toggle:hover { color: var(--color-brand); } /* ======================================== NAVIGATION PANEL ======================================== */ .nav-links { position: fixed; top: 0; right: 0; width: min(30rem, 50vw); height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 7rem clamp(2rem, 5vw, 4rem) 3rem; background-color: rgba(21, 24, 23, 0.97); border-left: 1px solid var(--color-border); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(100%); transition: transform var(--motion-medium) var(--ease-cinematic), opacity var(--motion-medium) var(--ease-cinematic), visibility var(--motion-medium); } .nav-links.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); } /* ======================================== NAVIGATION ITEMS ======================================== */ .nav-links > a, .nav-dropdown-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.75rem; padding: 0.9rem 0; color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); font-weight: 500; line-height: 1.2; border-bottom: 1px solid var(--color-border); transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); } .nav-links > a:hover, .nav-dropdown-toggle:hover { color: var(--color-brand); } /* ======================================== DROPDOWN CONTROLS ======================================== */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { text-align: left; } .nav-dropdown-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.25rem; height: 1.25rem; font-family: var(--font-sans); font-size: 1.15rem; font-weight: 400; line-height: 1; transform: translateX(0); transition: transform var(--motion-medium) var(--ease-cinematic), color var(--motion-fast) var(--ease-standard); } .nav-dropdown.is-open .nav-dropdown-icon { transform: rotate(90deg); } /* ======================================== DROPDOWN MENUS ======================================== */ .nav-dropdown-menu { display: none; flex-direction: column; padding: 0.25rem 0 0.75rem 1.25rem; } .nav-dropdown.is-open .nav-dropdown-menu { display: flex; } .nav-dropdown-menu a { display: block; padding: 0.75rem 0; color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.4; transition: color var(--motion-fast) var(--ease-standard); } .nav-dropdown-menu a:hover { color: var(--color-brand); } /* ======================================== BOOKING CTA ======================================== */ .nav-booking { justify-content: center !important; margin-top: 1.5rem; min-height: 3.5rem !important; padding: 0.9rem 1.25rem !important; background-color: var(--color-brand); color: var(--color-volcanic) !important; border: 0 !important; border-radius: var(--radius-sm); transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); } .nav-booking:hover { background-color: var(--color-ivory); color: var(--color-volcanic) !important; transform: translateY(-1px); } /* ======================================== MENU BACKDROP ======================================== */ .menu-backdrop { position: fixed; inset: 0; z-index: 101; background-color: rgba(10, 12, 11, 0.68); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--motion-medium) var(--ease-cinematic), visibility var(--motion-medium); } .site-header.menu-open .menu-backdrop { opacity: 1; visibility: visible; pointer-events: auto; } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { .main-navigation { width: min(100% - 4rem, var(--content-max-width)); } .site-logo img { max-width: 9rem; } .menu-toggle { min-width: 4rem; } } /* ======================================== MOBILE ======================================== */ @media (max-width: 767px) { .main-navigation { min-height: 4.5rem; width: min(100% - 2rem, var(--content-max-width)); } .site-logo img { max-width: 7.5rem; } .nav-links { width: min(70vw, 30rem); padding: 6.5rem 1.5rem 2rem; } .menu-backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } } /* ======================================== REDUCED MOTION ======================================== */ @media (prefers-reduced-motion: reduce) { .nav-links, .menu-backdrop, .nav-dropdown-icon, .nav-booking { transition: none; } } /* ======================================== 05. HERO — V2 ======================================== */ .hero { position: relative; min-height: 100svh; display: flex; align-items: stretch; justify-content: center; overflow: hidden; background-color: var(--color-volcanic); } /* ======================================== HERO VIDEO ======================================== */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* ======================================== HERO OVERLAY ======================================== */ .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, rgba(21, 24, 23, 0.55) 0%, rgba(21, 24, 23, 0.08) 25%, rgba(21, 24, 23, 0.08) 60%, rgba(21, 24, 23, 0.72) 100% ); } /* ======================================== HERO CONTENT ======================================== */ .hero-content { position: relative; z-index: 2; width: min(100% - 2rem, 900px); display: flex; flex-direction: column; align-items: center; text-align: center; /* Push content toward the bottom while retaining controlled breathing room. */ justify-content: flex-end; padding-top: 8rem; padding-bottom: 3rem; margin-top: auto; } /* ======================================== HERO TAGLINE ======================================== */ .hero-tagline { margin-bottom: 0.75rem; color: var(--color-text); font-family: var(--font-serif); font-size: clamp(2.5rem, 8vw, 5.5rem); font-weight: 400; line-height: 0.95; letter-spacing: -0.025em; } /* ======================================== HERO HEADING ======================================== */ .hero-heading { max-width: 680px; color: var(--color-text); font-size: clamp(1.25rem, 2.8vw, 2rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; } /* ======================================== HERO CTA ======================================== */ .hero-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 1.75rem; padding: 0.9rem 1.4rem; background-color: var(--color-brand); color: var(--color-volcanic); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; transition: background-color var(--motion-medium) var(--ease-standard), transform var(--motion-medium) var(--ease-cinematic); } .hero-cta:hover { background-color: var(--color-ivory); transform: translateY(-2px); } /* ======================================== SCROLL HINT ======================================== */ .hero-scroll-hint { margin-top: 1.5rem; color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.03em; } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { .hero-content { width: min(100% - 4rem, 1000px); padding-top: 8rem; padding-bottom: 4rem; } .hero-tagline { margin-bottom: 1rem; } .hero-heading { max-width: 750px; font-size: clamp(1.5rem, 2.5vw, 2.25rem); } .hero-cta { margin-top: 2rem; padding: 1rem 1.5rem; } .hero-scroll-hint { margin-top: 1.75rem; } } /* ======================================== 06. INTRO ======================================== */ .intro { display: grid; gap: var(--space-xl); padding-top: 4rem; padding-bottom: 0; padding-inline: 1rem; background-color: var(--color-bg); } /* ======================================== CONTENT ======================================== */ .intro-content { max-width: 38rem; display: flex; flex-direction: column; justify-content: center; } .intro-content h2 { color: var(--color-text); font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; text-align: center; } .intro-content h3 { margin-top: var(--space-lg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 500; line-height: 1.3; text-align: center; } .intro-content p { max-width: 34rem; color: var(--color-text-muted); margin-top: var(--space-lg); font-size: var(--text-base); line-height: 1.7; text-align: center; } /* ======================================== IMAGE ======================================== */ .intro-image { width: 100%; overflow: hidden; border-radius: var(--radius-sm); } .intro-image img { width: 100%; height: auto; object-fit: cover; } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { .intro { width: min(100% - 4rem, var(--content-max-width)); margin-inline: auto; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); padding-block: var(--space-2xl); padding-inline: 0; } .intro-content h2 { font-size: clamp(2.75rem, 4vw, 4.5rem); } .intro-image { aspect-ratio: 16 / 9; } .intro-image img { width: 100%; height: 100%; } } /* ======================================== REVEAL ANIMATION ======================================== */ .intro-reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 2500ms var(--ease-cinematic), transform 2500ms var(--ease-cinematic); } .intro.is-visible .intro-reveal { opacity: 1; transform: translateY(0); } .intro-reveal-1 { transition-delay: 0s; } .intro-reveal-2 { transition-delay: 0.3s; } .intro-reveal-3 { transition-delay: 0.6s; } .intro-reveal-4 { transform: translateY(1.8rem); transition: opacity 3500ms var(--ease-cinematic), transform 3500ms var(--ease-cinematic); transition-delay: 1s; } @media (prefers-reduced-motion: reduce) { .intro-reveal { opacity: 1; transform: none; transition: none; } } /* ======================================== 07. HOW IT WORKS ======================================== */ .how-it-works { position: relative; overflow: hidden; padding-top: 4rem; padding-bottom: 0; padding-inline: 1rem; background-color: var(--color-surface); } /* ======================================== BACKGROUND IMAGE ======================================== */ .how-it-works-background { position: absolute; inset: 0; z-index: 0; } .how-it-works-background img { width: 100%; height: 100%; object-fit: cover; } .how-it-works-background-overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient( ellipse at center, rgba(21, 24, 23, 0.08) 25%, rgba(21, 24, 23, 0.85) 85%, rgba(21, 24, 23, 0.95) 100% ); } /* ======================================== CONTENT ======================================== */ .how-it-works-content { position: relative; z-index: 2; } /* ======================================== HEADING ======================================== */ .how-it-works h2 { max-width: 52rem; margin-inline: auto; color: var(--color-text); font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; text-align: center; } /* ======================================== PROCESS ======================================== */ .process { position: relative; max-width: 32rem; margin: 4rem auto 0; display: flex; flex-direction: column; align-items: center; } /* ======================================== PROCESS ITEMS ======================================== */ .process li { position: relative; width: 100%; display: flex; justify-content: center; padding-block: 1.25rem; text-align: center; } /* ======================================== PROCESS TEXT ======================================== */ .process li span { position: relative; z-index: 1; display: inline-block; padding-inline: 1rem; color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 500; line-height: 1.7; } /* ======================================== GROUP OPTIONS ======================================== */ .group-options { max-width: var(--content-max-width); margin: 5rem auto 0; display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } /* ======================================== GROUP OPTION ======================================== */ .group-option { position: relative; overflow: hidden; min-height: 28rem; border-radius: var(--radius-sm); background-color: var(--color-volcanic); } /* ======================================== GROUP IMAGE ======================================== */ .group-option-image { position: absolute; inset: 0; display: block; } .group-option-image img { width: 100%; height: 100%; object-fit: cover; } /* ======================================== GROUP CONTENT ======================================== */ .group-option-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: var(--space-xl); text-align: right; background: linear-gradient( 345deg, rgba(21, 24, 23, 0.98) 0%, rgba(21, 24, 23, 0.85) 20%, rgba(21, 24, 23, 0.12) 55%, transparent 100% ); } /* ======================================== GROUP HEADING ======================================== */ .group-option-content h3 { max-width: 18rem; color: var(--color-text); font-size: var(--text-2xl); font-weight: 500; line-height: 1.05; } /* ======================================== GROUP DESCRIPTION ======================================== */ .group-option-content p { max-width: 24rem; margin-top: var(--space-sm); color: var(--color-text); font-size: var(--text-base); line-height: 1.6; } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { .how-it-works { padding-block: 6rem; padding-inline: 0; max-width: 80vw; margin-inline: auto; } /* ---------------------------------------- Heading ---------------------------------------- */ .how-it-works h2 { font-size: clamp(2.75rem, 4vw, 4.5rem); } /* ---------------------------------------- Process ---------------------------------------- */ .process { max-width: 38rem; margin-top: 4.5rem; } .process li { padding-block: 1.5rem; } .process li span { padding-inline: 1.5rem; transition: transform 0.8s ease; font-size: var(--text-2xl); transform: scale(0.87); will-change: transform; /* Hints to the browser to use hardware acceleration */ backface-visibility: hidden; /* Forces the browser to render a crisp version */ -webkit-font-smoothing: antialiased; } .process li span:hover { transform: scale(1); cursor: default; } /* ---------------------------------------- Group Options ---------------------------------------- */ .group-options { width: calc(100% - 4rem); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: 5rem; margin-inline: auto; } .group-option { min-height: 32rem; } .group-option-content { padding: var(--space-md); } } /* ======================================== BAGGAGE NOTE ======================================== */ .baggage-note { width: 100%; max-width: 32rem; margin-top: 3rem; margin-inline: auto; padding: 1.25rem; color: var(--color-text); background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-sm); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .baggage-note:has(.baggage-details[open]) { max-width: var(--content-max-width); } /* ======================================== NOTE TEXT ======================================== */ .baggage-note-intro { margin: 0; font-size: var(--text-base); line-height: 1.5; text-align: center; } /* ======================================== EXPANDABLE FAQ ======================================== */ .baggage-details { margin-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.22); padding-top: 0.75rem; } .baggage-details summary { width: fit-content; margin-inline: auto; cursor: pointer; font-size: var(--text-base); line-height: 1.5; text-decoration: underline; text-underline-offset: 0.2em; } .baggage-details summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } .baggage-details-content { padding-top: 1.25rem; } .baggage-details-content h3 { margin: 0; padding: 0 2rem 0; font-size: var(--text-lg); font-weight: 500; line-height: 1.4; } .baggage-details-list { margin: 0.75rem 3.5rem 0; font-size: var(--text-base); line-height: 1.7; list-style-type: circle; color: var(--color-text); } /* ======================================== 08. EXPLORE REGIONS ======================================== */ .explore-regions { padding-top: 5rem; padding-bottom: 3rem; padding-inline: 1rem; background-color: var(--color-bg); } /* ======================================== SECTION INTRODUCTION ======================================== */ .section-intro { max-width: 38rem; margin-inline: auto; text-align: center; } .section-intro h2 { color: var(--color-text); font-size: clamp(2.25rem, 8vw, 4rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; padding: 0 1rem 0; } .section-intro p { margin-top: var(--space-md); font-size: var(--text-base); line-height: 1.7; padding: 0 2rem 0; } /* ======================================== BALI REGION EXPERIENCES ======================================== */ .region-experiences { width: min(84vw, 30rem); margin: 4rem auto 0; } /* ======================================== INDIVIDUAL REGION ======================================== */ .region { border-top: 1px solid var(--color-border); } .region:last-child { border-bottom: 1px solid var(--color-border); } /* ======================================== REGION TOGGLE ======================================== */ .region-toggle { width: 100%; min-height: 3.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0.25rem; color: var(--color-text); text-align: left; } .region-toggle > span:first-child { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 500; line-height: 1.2; } /* ---------------------------------------- Toggle Icon ---------------------------------------- */ .region-toggle-icon { flex-shrink: 0; color: var(--color-brand); font-family: var(--font-sans); font-size: 1.25rem; font-weight: 400; line-height: 1; transition: transform var(--motion-medium) var(--ease-cinematic); } .region.is-open .region-toggle-icon { transform: rotate(45deg); } /* ======================================== REGION CONTENT ======================================== */ .region-content { display: grid; grid-template-rows: 0fr; opacity: 0; transition: opacity 400ms var(--ease-standard); } .region.is-open .region-content { grid-template-rows: 1fr; opacity: 1; } .region-content-inner { min-height: 0; overflow: hidden; } /* ======================================== MOBILE REGION SCROLL OFFSETS ======================================== */ #region-ubud-content { scroll-margin-top: 3.5rem; } #region-kintamani-content { scroll-margin-top: 3.5rem; } #region-bedugul-tanah-lot-content { scroll-margin-top: 3.5rem; } #region-uluwatu-content { scroll-margin-top: 3.5rem; } #region-east-bali-content { scroll-margin-top: 3.5rem; } /* ======================================== REGION IMAGE ======================================== */ .region-image { display: block; width: 100%; overflow: hidden; border-radius: var(--radius-sm); } .region-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* ======================================== REGION DESCRIPTION ======================================== */ .region-description { padding: var(--space-md) var(--space-xl) var(--space-md); text-align: center; } .region-description h3 { color: var(--color-text); font-size: var(--text-2xl); font-weight: 500; line-height: 1.05; } .region-description p { max-width: 32rem; margin: var(--space-sm) auto 0; font-size: var(--text-base); line-height: 1.65; } /* ======================================== REGION CTA ======================================== */ .region-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--space-md); padding: 0.8rem 1.15rem; border: 1px solid var(--region-color); border-radius: var(--radius-sm); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-cinematic); } /* ======================================== REGIONAL CTA COLOURS ======================================== */ /* * Regional classes exist ONLY on the CTAs. */ .region-cta--ubud { --region-color: #6F8D69; --region-color-light: #84A17E; } .region-cta--kintamani { --region-color: #A56F58; --region-color-light: #BC856D; } .region-cta--bedugul { --region-color: #6F9188; --region-color-light: #84A69D; } .region-cta--uluwatu { --region-color: #668EA3; --region-color-light: #7CA5BA; } .region-cta--east-bali { --region-color: #A48B61; --region-color-light: #BAA176; } .region-cta--java { --region-color: #886E62; --region-color-light: #9F8376; } /* ---------------------------------------- Mobile Press State ---------------------------------------- */ .region-cta:active { background-color: var(--region-color); color: var(--color-volcanic); transform: translateY(1px); } /* ======================================== OUTSIDE BALI ======================================== */ .outside-bali { margin-top: 5rem; } .outside-bali-heading { text-align: center; } .outside-bali-heading h2 { color: var(--color-text); font-size: clamp(2rem, 7vw, 3rem); font-weight: 500; line-height: 1.05; } /* ======================================== EXTERNAL REGION ======================================== */ .external-region { width: min(84vw, 30rem); margin: var(--space-lg) auto 0; } .external-region .region-description { padding-top: var(--space-md); text-align: center; } /* ======================================== OUTSIDE BALI REVEAL ======================================== */ .outside-bali-reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 1200ms var(--ease-cinematic), transform 1200ms var(--ease-cinematic); } .outside-bali-reveal.is-visible { opacity: 1; transform: translateY(0); } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { /* ------------------------------------ Section ------------------------------------ */ .explore-regions { width: min(100% - 3rem, 1280px); margin-inline: auto; padding-block: 6rem; padding-inline: 0; } .section-intro h2 { font-size: clamp(2.75rem, 4vw, 4.5rem); } /* ==================================== BALI REGION EXPERIENCES ==================================== */ .region-experiences { width: 100%; max-width: none; margin-top: 6rem; display: flex; flex-direction: column; gap: 6rem; } /* ==================================== REGION ==================================== */ .region { border: 0; } /* ------------------------------------ Remove Mobile Toggle ------------------------------------ */ .region-toggle { display: none; } /* ==================================== REGION CONTENT ==================================== */ .region-content { display: block; opacity: 1; } .region-content-inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(3rem, 5vw, 5rem); overflow: visible; } #region-ubud-content .region-description, #region-bedugul-tanah-lot-content .region-description, #region-east-bali-content .region-description { margin-left: 4rem; } /* ==================================== DESKTOP IMAGE ==================================== */ .region-image { grid-column: 2; grid-row: 1; width: 100%; height: clamp(22rem, 32vw, 28rem); } .region-image img { width: 100%; height: 126%; aspect-ratio: auto; object-fit: cover; transform: translateY(-10%); will-change: transform; } /* ==================================== DESKTOP DESCRIPTION ==================================== */ .region-description { grid-column: 1; grid-row: 1; max-width: 28rem; padding: 0; text-align: center; } .region-description h3 { font-size: var(--text-3xl); } .region-description p { margin-inline: 0; } /* ==================================== ALTERNATING REGIONS ==================================== */ .region:nth-child(even) .region-content-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .region:nth-child(even) .region-image { grid-column: 1; } .region:nth-child(even) .region-description { grid-column: 2; } /* ==================================== DESKTOP CTA ==================================== */ .region-cta { border-color: var(--color-brand); } .region-cta:hover { border-color: var(--region-color); background-color: var(--region-color); color: var(--color-volcanic); transform: translateY(-2px); } .region-cta:active { border-color: var(--region-color-light); background-color: var(--region-color-light); color: var(--color-volcanic); transform: translateY(0); } /* ==================================== OUTSIDE BALI ==================================== */ .outside-bali { margin-top: 8rem; } .outside-bali-heading h2 { font-size: var(--text-3xl); } /* ==================================== EXTERNAL REGION ==================================== */ .external-region { width: 100%; max-width: none; margin-top: 4rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(3rem, 5vw, 5rem); } .external-region .region-image { grid-column: 1; grid-row: 1; } .external-region .region-description { grid-column: 2; grid-row: 1; max-width: 28rem; padding: 0; text-align: center; } .external-region .region-description p { margin-inline: 0; } } /* ======================================== LARGE DESKTOP ======================================== */ @media (min-width: 1200px) { .explore-regions { width: min(100% - 4rem, 1280px); } } /* ======================================== REDUCED MOTION ======================================== */ @media (prefers-reduced-motion: reduce) { .outside-bali-reveal { opacity: 1; transform: none; } .region-image img { transform: none !important; } } /* ======================================== REGIONAL PRICING ======================================== */ .region-page-pricing { padding: 3rem 2rem 2rem; margin: 1rem 1rem 0; background-color: rgba(36, 40, 37, 0.72); color: #F5F3EC; } /* ======================================== REGIONAL COLOUR PALETTE ======================================== */ /* Add these variables to an existing .region-page--ubud rule if one exists. */ .region-page--ubud { --region-color: #6F8D69; --region-color-light: #84A17E; } .region-page--kintamani { --region-color: #A56F58; --region-color-light: #BC856D; } .region-page--bedugul { --region-color: #6F9188; --region-color-light: #84A69D; } .region-page--uluwatu { --region-color: #668EA3; --region-color-light: #7CA5BA; } .region-page--east-bali { --region-color: #A48B61; --region-color-light: #BAA176; } .region-page--java { --region-color: #886E62; --region-color-light: #9F8376; } /* ======================================== PRICING INNER LAYOUT ======================================== */ .region-page-pricing__inner { width: min(100%, 72rem); margin-inline: auto; } /* ======================================== PRICING INTRODUCTION ======================================== */ .region-page-pricing__intro { max-width: 42rem; margin: 0 auto 2rem; text-align: center; } .region-page-pricing__intro h2 { margin: 0; color: var(--color-text); font-family: var(--font-serif, Georgia, serif); font-size: var(--text-3xl); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; } .region-page-pricing__intro p { margin: 0.9rem 0 0; color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.65; } /* ======================================== PRICING OPTIONS ======================================== */ .region-page-pricing__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } /* ======================================== INDIVIDUAL PRICE CARDS ======================================== */ .region-page-pricing__option { padding: 1.5rem 1rem; background-color: rgba(255, 255, 255, 0.035); border: 1px solid var(--region-color); border-top: 3px solid var(--region-color-light); text-align: center; } .region-page-pricing__option h3 { margin: 0; color: var(--color-text); font-size: var(--text-2xl); font-weight: 500; line-height: 1.4; } /* ======================================== GROUP SIZE SUBHEADERS ======================================== */ .region-page-pricing__group-size { margin: 0.4rem 0 0; color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.5; } /* ======================================== PRICE DISPLAY ======================================== */ .region-page-pricing__price { display: flex; align-items: baseline; justify-content: center; gap: 0.45rem; margin: 0.9rem 0 0; } .region-page-pricing__amount { color: var(--region-color-light); font-size: var(--text-4xl); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .region-page-pricing__currency { color: var(--color-text); font-size: var(--text-md); letter-spacing: 0.08em; } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { .region-page-pricing { padding: 4rem 1rem 4rem; margin: 3rem 4rem 0; } .region-page-pricing__intro { margin-bottom: 2.5rem; } .region-page-pricing__intro h2 { font-size: var(--text-4xl); } .region-page-pricing__intro p { font-size: var(--text-lg); } .region-page-pricing__options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .region-page-pricing__option { padding: 2rem; } } /* ======================================== 09. REVIEWS ======================================== */ .reviews { padding-block: var(--space-xl); padding-inline: 1rem; background-color: var(--color-bg); } /* ---------------------------------------- Section Heading ---------------------------------------- */ .reviews h2 { max-width: 38rem; margin-inline: auto; color: var(--color-text); font-size: clamp(2.25rem, 8vw, 4rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; text-align: center; } /* ---------------------------------------- Review Card ---------------------------------------- */ .review-card { max-width: 42rem; margin: var(--space-xl) auto var(--space-2xl); padding: var(--space-lg); background-color: rgba(36, 40, 37, 0.72); border: 1px solid rgba(240, 237, 229, 0.10); border-radius: var(--radius-lg); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.12); } /* ---------------------------------------- Review Header ---------------------------------------- */ .review-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); } /* ---------------------------------------- Customer ---------------------------------------- */ .review-customer h3 { color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; line-height: 1.3; } .review-date { margin-top: 0.25rem; color: var(--color-text-subtle); font-size: var(--text-sm); line-height: 1.4; } /* ---------------------------------------- Stars ---------------------------------------- */ .review-stars { flex-shrink: 0; color: var(--color-brand); font-size: var(--text-sm); letter-spacing: 0.08em; line-height: 1; } /* ---------------------------------------- Review Text ---------------------------------------- */ .review-text { margin: var(--space-lg) 0 0; } .review-text p { color: var(--color-text); font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.5; } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { .reviews { width: min(100% - 4rem, var(--content-max-width)); margin-inline: auto; padding-inline: 0; } .reviews h2 { font-size: clamp(2.75rem, 4vw, 4.5rem); } .review-card { padding: var(--space-xl); } .review-text p { font-size: var(--text-2xl); } } /* ======================================== 10. BOOKING CTA ======================================== */ .booking-cta { padding-block: var(--space-3xl); padding-inline: 1rem; background-color: var(--color-charcoal); position: relative; overflow: hidden; isolation: isolate; text-align: center; } /* ---------------------------------------- Background Image ---------------------------------------- */ .booking-cta-background { position: absolute; inset: 0; z-index: 0; } .booking-cta-background img { width: 100%; height: 100%; object-fit: cover; } /* ---------------------------------------- Background Overlay ---------------------------------------- */ .booking-cta-background-overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient( ellipse at center, rgba(21, 24, 23, 0.38) 10%, rgba(21, 24, 23, 0.45) 85%, rgba(21, 24, 23, 0.65) 100% ); } /* ---------------------------------------- Initial Booking Content ---------------------------------------- */ .booking-cta-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 42rem; margin: var(--space-xl) auto var(--space-2xl); padding: var(--space-lg); opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), visibility var(--motion-fast) linear; } /* ---------------------------------------- Heading ---------------------------------------- */ .booking-cta h2 { max-width: 42rem; margin-inline: auto; color: var(--color-text); font-size: clamp(2.25rem, 8vw, 4rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; text-shadow: 2px 2px #555555; } /* ---------------------------------------- Button ---------------------------------------- */ .booking-cta-button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; margin-top: var(--space-lg); padding-inline: 1.5rem; background-color: var(--color-brand); color: var(--color-volcanic); border: 1px solid var(--color-brand); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; line-height: 1; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } .booking-cta-button:hover { background-color: var(--color-brand-hover); border-color: var(--color-brand-hover); } .booking-cta-button:focus-visible { outline-offset: 4px; } /* ---------------------------------------- Content Fade-Out State ---------------------------------------- */ /* JavaScript adds this class to .booking-cta when the visitor opens the booking form. */ .booking-cta--form-open .booking-cta-content { position: absolute; inset: 0; max-width: none; margin: 0; padding: var(--space-lg); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-0.5rem); } /* ---------------------------------------- Tally Form Container ---------------------------------------- */ .booking-cta-form { position: relative; z-index: 3; width: min(100%, 56rem); margin-inline: auto; border-radius: var(--radius-md); padding-block: var(--space-xl); background-color: rgba(36, 40, 37, 0.72); } /* Keep the form hidden until JavaScript opens it. */ .booking-cta-form[hidden] { display: none; } /* ---------------------------------------- Tally Form Iframe ---------------------------------------- */ .booking-cta-form iframe { display: block; width: 100%; min-height: 200px; border: 0; } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { .booking-cta { padding-block: var(--space-2xl); padding-inline: 0; } .booking-cta h2 { font-size: clamp(2.75rem, 4vw, 4.5rem); } } /* ======================================== REDUCED MOTION ======================================== */ @media (prefers-reduced-motion: reduce) { .booking-cta-content { transition: none; transform: none; } } /* ======================================== 11. FOOTER ======================================== */ .site-footer { background-color: var(--color-volcanic); color: var(--color-text); } /* ======================================== FOOTER MAIN ======================================== */ .footer-main { display: grid; gap: var(--space-xl); padding-block: var(--space-3xl); padding-inline: 1rem; } /* ---------------------------------------- Footer Brand ---------------------------------------- */ .footer-brand { display: flex; flex-direction: column; gap: var(--space-sm); } .footer-brand .site-logo { display: inline-flex; width: fit-content; } .footer-brand .site-logo img { width: auto; max-width: 10rem; height: auto; } .footer-brand p { max-width: 20rem; color: var(--color-text-subtle); font-size: var(--text-sm); line-height: 1.5; } /* ======================================== FOOTER NAVIGATION / CONTACT / SOCIAL ======================================== */ .footer-navigation, .footer-contact, .footer-social { display: flex; flex-direction: column; } /* ---------------------------------------- Footer Headings ---------------------------------------- */ .footer-navigation h2, .footer-contact h2, .footer-social h2 { margin-bottom: var(--space-sm); color: var(--color-text-subtle); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; } /* ---------------------------------------- Footer Lists ---------------------------------------- */ .footer-navigation ul, .footer-contact ul { display: flex; flex-direction: column; gap: 0.5rem; } /* ---------------------------------------- Footer Links ---------------------------------------- */ .footer-navigation a, .footer-contact a, .footer-social > a { width: fit-content; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; transition: color var(--motion-fast) var(--ease-standard); } .footer-navigation a:hover, .footer-contact a:hover, .footer-social > a:hover { color: var(--color-text); } /* ======================================== FOOTER BOTTOM ======================================== */ .footer-bottom { display: flex; flex-direction: column; gap: var(--space-md); padding-block: var(--space-md); padding-inline: 1rem; border-top: 1px solid var(--color-border); } /* ---------------------------------------- Legal Navigation ---------------------------------------- */ .footer-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } .footer-legal a { color: var(--color-text-subtle); font-size: var(--text-xs); line-height: 1.5; transition: color var(--motion-fast) var(--ease-standard); } .footer-legal a:hover { color: var(--color-text-muted); } /* ---------------------------------------- Copyright ---------------------------------------- */ .footer-bottom p { color: var(--color-text-subtle); font-size: var(--text-xs); line-height: 1.5; } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { /* ------------------------------------ Footer Main ------------------------------------ */ .footer-main { width: min(100% - 4rem, var(--content-max-width)); margin-inline: auto; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--space-xl); padding-inline: 0; } /* ------------------------------------ Footer Bottom ------------------------------------ */ .footer-bottom { width: min(100% - 4rem, var(--content-max-width)); margin-inline: auto; flex-direction: row; align-items: center; justify-content: space-between; padding-inline: 0; } } /* ======================================== LARGE DESKTOP ======================================== */ @media (min-width: 1200px) { .footer-main { width: min(100% - 6rem, var(--content-max-width)); } .footer-bottom { width: min(100% - 6rem, var(--content-max-width)); } } /* NEW CODE: Floating Book Now Button */ .floating-book-now { position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); right: max(1rem, env(safe-area-inset-right)); z-index: 900; /* Sits above content, below modals/header */ display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.5rem; /* Replace #2563eb with your primary brand color */ background-color: var(--color-brand); border-radius: var(--radius-sm); color: #000000; font-family: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* MODIFIED: Removed 'transform' from transition to prevent fighting the pulse animation */ transition: background-color 0.2s ease, opacity 0.3s ease; /* ADDED: Pulse animation */ animation: subtle-pulse 2.5s infinite ease-in-out; } .floating-book-now:hover { background-color: #ffffff; /* Slightly darker shade for hover */ /* ADDED: Pause animation and combine transforms so it doesn't shrink on hover */ animation-play-state: paused; transform: translateY(-2px) scale(1.03); } .floating-book-now:focus-visible { outline: 3px solid #fbbf24; /* High-contrast focus ring */ outline-offset: 3px; } /* State for when JS hides the button near the booking section */ .floating-book-now.is-hidden { opacity: 0; pointer-events: none; transform: translateY(1rem); /* ADDED: Stop pulsing while fading out */ animation: none; } /* Respect user motion preferences */ @media (prefers-reduced-motion: reduce) { .floating-book-now { transition: none; /* ADDED: Disable animation for reduced motion */ animation: none; } .floating-book-now:hover { transform: none; } } /* ADDED: Keyframes for the pulse effect */ @keyframes subtle-pulse { 0% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } 50% { transform: scale(1.03); /* Softer, slightly larger shadow at peak */ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } 100% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } } /* END NEW CODE */ /* ======================================== REGIONAL HERO ======================================== */ .region-page-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background-color: var(--color-volcanic); } /* ======================================== HERO MEDIA ======================================== */ .region-page-hero__media { position: absolute; inset: 0; z-index: 0; } .region-page-hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ======================================== HERO IMAGE OVERLAY ======================================== */ .region-page-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(21, 24, 23, 0.5) 0%, rgba(21, 24, 23, 0.08) 40%, rgba(21, 24, 23, 0.9) 100% ); pointer-events: none; } /* ======================================== HERO CONTENT ======================================== */ .region-page-hero__content { position: relative; z-index: 1; width: min(100% - 2rem, var(--content-max-width)); margin-inline: auto; padding-top: 8rem; padding-bottom: 3rem; text-align: center; } /* ======================================== HERO HEADING ======================================== */ .region-page-hero__heading { color: var(--color-text); font-size: clamp(3.5rem, 12vw, 5.5rem); font-weight: 400; line-height: 1; letter-spacing: -0.025em; } /* Regional accent */ .region-page-hero__heading::after { content: ""; display: block; width: 3rem; height: 2px; margin: 1rem auto 0; background-color: var(--region-color); } .region-page-hero__subtitle { margin-top: var(--space-sm); color: var(--color-text); font-size: var(--text-lg); line-height: 1.9; text-align: center; } .region-page-hero__description { max-width: 32rem; margin: var(--space-xs) auto 0; color: var(--color-text-muted); font-size: var(--text-md); line-height: 1.7; text-align: center; } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { .region-page-hero__content { width: min(100% - 4rem, var(--content-max-width)); padding-bottom: 4rem; } } /* ======================================== REGIONAL EXPERIENCES ======================================== */ .region-page-experiences { padding-block: 5rem 5rem; padding-inline: 1rem; background-color: var(--color-bg); } /* ======================================== SECTION INTRODUCTION ======================================== */ .region-page-experiences__intro { max-width: 42rem; margin-inline: auto; text-align: center; } .region-page-experiences__intro h2 { color: var(--color-text); font-size: var(--text-3xl); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; } .region-page-experiences__intro h2::after { content: ""; display: block; width: 3rem; height: 2px; margin: var(--space-md) auto 0; background-color: var(--region-color); } .region-page-experiences__intro p { margin-top: var(--space-md); color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.7; } /* ======================================== EXPERIENCE LIST ======================================== */ .region-page-experiences__list { width: 100%; max-width: var(--content-max-width); display: grid; gap: var(--space-xl); margin: var(--space-xl) auto 0; } /* ======================================== INDIVIDUAL EXPERIENCE — MOBILE ======================================== */ .region-page-experience { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "visual" "description" "divider"; row-gap: var(--space-sm); } /* ======================================== CONTENT — MOBILE ======================================== */ .region-page-experience__content { display: contents; text-align: center; } /* Heading positioned over image */ .region-page-experience__content h3 { grid-area: visual; position: relative; z-index: 2; align-self: end; min-width: 0; padding: 1.5rem; color: var(--color-text); font-size: var(--text-3xl); font-weight: 500; line-height: 1.1; } /* Description beneath image */ .region-page-experience__content p { grid-area: description; color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.7; padding: 0 var(--space-sm) 0; } /* ======================================== EXPERIENCE MEDIA — MOBILE ======================================== */ .region-page-experience__media { grid-area: visual; position: relative; min-width: 0; overflow: hidden; border-radius: var(--radius-sm); } .region-page-experience__picture { display: block; width: 100%; } .region-page-experience__picture img { display: block; width: 100%; height: auto; } /* Image gradient */ .region-page-experience__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, transparent 35%, rgba(21, 24, 23, 0.15) 55%, rgba(21, 24, 23, 0.75) 75%, rgba(21, 24, 23, 0.99) 100% ); pointer-events: none; } /* ======================================== EXPERIENCE DIVIDER — MOBILE ======================================== */ .region-page-experience:not(:last-child)::after { content: ""; grid-area: divider; display: block; width: 3rem; height: 1px; margin: var(--space-md) auto 0; background-color: var(--region-color); } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { .region-page-experiences { width: min( 100% - 4rem, var(--content-max-width) ); margin-inline: auto; padding-block: 6rem; padding-inline: 0; } /* Section Introduction */ .region-page-experiences__intro h2 { font-size: var(--text-4xl); } .region-page-experiences__intro p { font-size: var(--text-lg); } /* Experience List */ .region-page-experiences__list { gap: 6rem; margin-top: 6rem; } /* ==================================== EXPERIENCE GRID ==================================== */ .region-page-experience { grid-template-areas: none; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(3rem, 5vw, 5rem); } /* ==================================== DESKTOP CONTENT ==================================== */ .region-page-experience__content { display: block; grid-column: 1; grid-row: 1; width: 100%; max-width: 32rem; justify-self: center; text-align: center; } .region-page-experience__content h3 { grid-area: auto; position: static; padding: 0; color: var(--color-text); font-size: var(--text-3xl); } .region-page-experience__content p { grid-area: auto; margin-top: var(--space-sm); font-size: var(--text-lg); } /* ==================================== DESKTOP IMAGE FRAME ==================================== */ .region-page-experience__media { grid-area: auto; grid-column: 2; grid-row: 1; aspect-ratio: 3 / 2; position: relative; overflow: hidden; } .region-page-experience__picture { width: 100%; height: 100%; } .region-page-experience__picture img { position: absolute; top: -1.5rem; left: 0; width: 100%; height: calc(100% + 3rem); object-fit: cover; transform: translate3d( 0, var(--region-experience-parallax, 0px), 0 ); } /* Remove mobile gradient */ .region-page-experience__media::after { content: none; } /* Remove mobile dividers */ .region-page-experience:not(:last-child)::after { content: none; } /* ==================================== ALTERNATING ROWS ==================================== */ .region-page-experience:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .region-page-experience:nth-child(even) .region-page-experience__media { grid-column: 1; } .region-page-experience:nth-child(even) .region-page-experience__content { grid-column: 2; } } /* ======================================== REDUCED MOTION ======================================== */ @media (prefers-reduced-motion: reduce) { .region-page-experience__picture img { transform: none; } } /* ======================================== ADDITIONAL ACTIVITIES ======================================== */ .region-page-additional-activities { padding: 3rem 2rem 2rem; margin: 2rem 2rem 3rem; background-color: rgba(36, 40, 37, 0.72); } /* ======================================== SECTION INTRODUCTION ======================================== */ .region-page-additional-activities__intro { max-width: 42rem; margin-inline: auto; text-align: center; } .region-page-additional-activities__intro h2 { color: var(--color-text); font-size: var(--text-3xl); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; padding: 0 var(--space-sm) 0; } .region-page-additional-activities__intro h2::after { content: ""; display: block; width: 3rem; height: 2px; margin: var(--space-md) auto 0; background-color: var(--region-color); } .region-page-additional-activities__intro p { margin-top: var(--space-md); color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.7; padding: 0 var(--space-md) 0; } .region-page-additional-activities__hint { margin: 0.65rem 0 0; font-size: var(--text-sm); line-height: 1.5; font-style: italic; color: var(--color-text-subtle); opacity: 0.75; } /* ======================================== ACTIVITY LIST ======================================== */ .region-page-additional-activities__list { width: min(80%, 42rem); margin: var(--space-md) auto 0; } /* ======================================== INDIVIDUAL ACTIVITY ======================================== */ .region-page-activity { position: relative; } /* * Fading divider: * solid on the left, transparent on the right. */ .region-page-activity::after { content: ""; display: block; width: 100%; height: 1px; background: linear-gradient( to right, var(--region-color) 0%, transparent 100% ); } .region-page-activity:last-child::after { content: none; } /* ======================================== ACTIVITY TOGGLE ======================================== */ .region-page-activity__toggle { width: 100%; padding-block: 1.25rem; color: var(--color-text); font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 400; line-height: 1.2; text-align: left; cursor: pointer; transition: color var(--motion-fast) var(--ease-standard); } /* Remove native disclosure marker */ .region-page-activity__toggle::marker { content: ""; } .region-page-activity__toggle::-webkit-details-marker { display: none; } .region-page-activity__toggle:hover { color: var(--region-color-light); } .region-page-activity[open] .region-page-activity__toggle { color: var(--region-color-light); } /* ======================================== ACTIVITY PANEL ======================================== */ .region-page-activity__panel { padding-bottom: var(--space-lg); } /* ======================================== PROVIDER ======================================== */ .region-page-activity__provider { max-width: 36rem; padding-left: var(--space-sm); } .region-page-activity__provider-name { color: var(--color-text); font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 500; line-height: 1.3; } .region-page-activity__description { margin-top: var(--space-sm); color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.7; } /* ======================================== EXTERNAL LINK HINT ======================================== */ .region-page-activity__external-hint { margin-top: var(--space-md); color: var(--color-text-subtle); font-size: var(--text-sm); line-height: 1.5; } /* ======================================== PROVIDER LINKS ======================================== */ .region-page-activity__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: var(--space-sm); } .region-page-activity__link { width: fit-content; color: var(--region-color-light); font-size: var(--text-base); font-weight: 600; line-height: 1.4; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25rem; transition: color var(--motion-fast) var(--ease-standard); } .region-page-activity__link:hover { color: var(--color-text); } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { .region-page-additional-activities { padding: 5rem 1rem 4rem; margin: 3rem 4rem 3rem; } .region-page-additional-activities__intro h2 { font-size: var(--text-4xl); } .region-page-additional-activities__list { width: min(80%, 48rem); margin-top: 2rem; } .region-page-activity__toggle { padding-block: 1.5rem; font-size: var(--text-2xl); } .region-page-activity__panel { padding-bottom: var(--space-xl); } .region-page-activity__provider { padding-left: var(--space-md); } } @media (min-width: 1268px) { .region-page-additional-activities { padding: 5rem 1rem 4rem; margin: 3rem 10rem 6rem; } } /* ======================================== CONTACT PAGE ======================================== */ /* ======================================== CONTACT INTRO ======================================== */ .contact-page-intro { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background-color: var(--color-volcanic); } /* ======================================== HERO MEDIA ======================================== */ .contact-page-hero__media { position: absolute; inset: 0; z-index: 0; } .contact-page-hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ======================================== HERO IMAGE OVERLAY ======================================== */ .contact-page-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(21, 24, 23, 0.5) 0%, rgba(21, 24, 23, 0.08) 40%, rgba(21, 24, 23, 0.8) 80%, rgba(21, 24, 23, 0.99) 100% ); pointer-events: none; } .contact-page-intro__content { max-width: 42rem; margin-inline: auto; text-align: center; z-index: 1; } .contact-page-intro__title { color: var(--color-text); font-size: clamp(3.5rem, 12vw, 5.5rem); font-weight: 400; line-height: 1; letter-spacing: -0.025em; } /* Regional accent */ .contact-page-intro__title::after { content: ""; display: block; width: 3rem; height: 2px; margin: 1rem auto 0; background-color: var(--color-brand); } .contact-page-intro__description { max-width: 32rem; margin: var(--space-xs) auto 0; color: var(--color-text-muted); font-size: var(--text-md); line-height: 1.7; text-align: center; } /* ======================================== CONTACT FAQ ======================================== */ .contact-page-faq { padding: 4rem 1rem 5rem; background-color: var(--color-bg); } /* ======================================== FAQ INTRO ======================================== */ .contact-page-faq__intro { max-width: 42rem; margin-inline: auto; text-align: center; } .contact-page-faq__intro h2 { color: var(--color-text); font-size: clamp(2.25rem, 8vw, 4rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; } .contact-page-faq__intro p { margin-top: var(--space-md); color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.7; } /* ======================================== FAQ LIST ======================================== */ .contact-page-faq__list { width: min(80%, 48rem); margin: var(--space-xl) auto 0; } /* ======================================== FAQ ITEM ======================================== */ .contact-page-faq__item { border-bottom: 1px solid var(--color-border); } .contact-page-faq__item:first-child { border-top: 1px solid var(--color-border); } /* ======================================== FAQ QUESTION ======================================== */ .contact-page-faq__question { position: relative; padding: 1.25rem 2.5rem 1.25rem 0; color: var(--color-text); font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 500; line-height: 1.3; cursor: pointer; } .contact-page-faq__question::marker { content: ""; } .contact-page-faq__question::-webkit-details-marker { display: none; } /* Custom + icon */ .contact-page-faq__question::after { content: "+"; position: absolute; top: 50%; right: 0; color: var(--color-brand); font-family: var(--font-sans); font-size: 1.4rem; font-weight: 400; line-height: 1; transform: translateY(-50%); } .contact-page-faq__item[open] .contact-page-faq__question { color: var(--color-brand); } .contact-page-faq__item[open] .contact-page-faq__question::after { content: "−"; } /* ======================================== FAQ ANSWER ======================================== */ .contact-page-faq__answer { max-width: 42rem; padding: 0 1rem var(--space-lg) 0; } .contact-page-faq__answer p { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.7; } .contact-page-faq__answer p + p { margin-top: var(--space-sm); } /* ======================================== CONTACT OPTIONS ======================================== */ .contact-page-options { padding: 5rem 1rem; background-color: var(--color-surface); } /* ======================================== CONTACT OPTIONS INTRO ======================================== */ .contact-page-options__intro { max-width: 42rem; margin-inline: auto; text-align: center; } .contact-page-options__intro h2 { color: var(--color-text); font-size: clamp(2.25rem, 8vw, 4rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; } .contact-page-options__intro h2::after { content: ""; display: block; width: 3rem; height: 2px; margin: var(--space-md) auto 0; background-color: var(--color-brand); } .contact-page-options__intro p { margin-top: var(--space-md); color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.7; } /* ======================================== CONTACT OPTION LIST ======================================== */ .contact-page-options__list { width: min(100%, 48rem); display: grid; gap: var(--space-sm); margin: var(--space-xl) auto 0; } /* ======================================== CONTACT OPTION ======================================== */ .contact-page-option { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--space-lg) var(--space-md); background-color: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .contact-page-option__title { color: var(--color-text); font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 500; line-height: 1.2; } .contact-page-option__description { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.6; } .contact-page-option__action { width: fit-content; margin-top: var(--space-sm); color: var(--color-brand); font-size: var(--text-sm); font-weight: 600; line-height: 1.4; border-bottom: 1px solid var(--color-brand); } .contact-page-option:hover .contact-page-option__action { color: var(--color-text); border-color: var(--color-text); } @media (max-width: 765px) { .contact-page-intro__content { padding: 0 auto 6rem; } .contact-page-faq__intro h2 { padding-top: 2rem; } } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { /* ------------------------------------ Contact Intro ------------------------------------ */ .contact-page-intro { padding: 11rem 2rem 6rem; } .contact-page-intro h1 { font-size: clamp(4rem, 6vw, 6rem); } /* ------------------------------------ FAQ ------------------------------------ */ .contact-page-faq { padding: 2rem 2rem 7rem; } .contact-page-faq__intro h2 { font-size: clamp(2.75rem, 4vw, 4.5rem); padding-top: 4rem; } .contact-page-faq__list { margin-top: 5rem; } .contact-page-faq__question { padding-block: 1.5rem; font-size: var(--text-xl); } .contact-page-faq__answer { padding-bottom: var(--space-xl); } /* ------------------------------------ Contact Options ------------------------------------ */ .contact-page-options { padding: 7rem 2rem; } .contact-page-options__intro h2 { font-size: clamp(2.75rem, 4vw, 4.5rem); } .contact-page-options__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: 5rem; } .contact-page-option { min-height: 15rem; justify-content: flex-end; padding: var(--space-lg); } } /* ======================================== BOOKING REQUEST CONFIRMATION ======================================== */ .booking-confirmation { min-height: 100vh; padding: var(--space-xl) 1rem; display: flex; align-items: center; justify-content: center; background-color: var(--color-charcoal); color: var(--color-text); } /* ---------------------------------------- MAIN CONTENT ---------------------------------------- */ .booking-confirmation__content { width: 100%; max-width: 44rem; margin-inline: auto; padding: var(--space-xl); background-color: rgba(255, 255, 255, 0.035); border: 1px solid rgba(132, 161, 126, 0.3); border-radius: var(--radius-sm); } /* ---------------------------------------- SUCCESS ICON ---------------------------------------- */ .booking-confirmation__icon { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; margin: 0 auto var(--space-lg); color: var(--color-brand); border: 1px solid var(--color-brand); border-radius: 50%; } /* ---------------------------------------- PAGE HEADING ---------------------------------------- */ .booking-confirmation__heading { max-width: 36rem; margin: 0 auto; color: var(--color-text); font-family: var(--font-serif, Georgia, serif); font-size: clamp(2rem, 7vw, 3.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; text-align: center; text-wrap: balance; } .booking-confirmation__intro { margin: var(--space-md) 0 0; color: var(--color-text); font-size: 1.05rem; line-height: 1.65; text-align: center; } /* ---------------------------------------- CONTENT SECTIONS ---------------------------------------- */ .booking-confirmation__next-steps, .booking-confirmation__reference, .booking-confirmation__reminder, .booking-confirmation__contact { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid rgba(245, 243, 236, 0.14); } .booking-confirmation__content h2 { margin: 0 0 var(--space-sm); color: var(--color-brand); font-size: 1.15rem; font-weight: 600; line-height: 1.4; } .booking-confirmation__content p { margin: 0; color: var(--color-text); font-size: var(--text-sm); line-height: 1.75; } .booking-confirmation__next-steps p + p { margin-top: var(--space-md); } /* ---------------------------------------- BOOKING REFERENCE ---------------------------------------- */ .booking-confirmation__reference-number { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin-top: var(--space-md) !important; padding: var(--space-md); background-color: rgba(111, 141, 105, 0.12); border: 1px solid rgba(132, 161, 126, 0.35); border-radius: var(--radius-sm); } .booking-confirmation__reference-label { font-weight: 600; } #booking-reference { color: var(--color-brand); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* ---------------------------------------- CONTACT LINK ---------------------------------------- */ .booking-confirmation__contact a { color: var(--color-brand); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--motion-fast) var(--ease-standard); } .booking-confirmation__contact a:hover { color: var(--color-brand-hover); } .booking-confirmation__contact a:focus-visible, .booking-confirmation__home-link:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; } /* ---------------------------------------- HOMEPAGE LINK ---------------------------------------- */ .booking-confirmation__actions { display: flex; justify-content: center; margin-top: var(--space-2xl); } .booking-confirmation__home-link { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.9rem 1.5rem; background-color: var(--color-brand); color: var(--color-volcanic); border: 1px solid var(--color-brand); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); } .booking-confirmation__home-link:hover { background-color: var(--color-brand-hover); border-color: var(--color-brand-hover); } /* ======================================== DESKTOP ======================================== */ @media (min-width: 768px) { .booking-confirmation { padding: var(--space-3xl) 2rem; } .booking-confirmation__content { padding: var(--space-2xl); } } /* ======================================== REDUCED MOTION ======================================== */ @media (prefers-reduced-motion: reduce) { .booking-confirmation__contact a, .booking-confirmation__home-link { transition: none; } } /* ======================================== POLICY PAGE ======================================== */ .policy-page { min-height: 100vh; padding: var(--space-3xl) 1rem; background-color: var(--color-charcoal); color: var(--color-text); } .policy-page__main { width: 100%; max-width: 80rem; margin-inline: auto; } /* PAGE HEADER */ .policy-page__header { max-width: 52rem; margin: 0 auto var(--space-xl); text-align: center; } .policy-page__heading { margin: 0; color: var(--color-text); font-family: var(--font-serif, Georgia, serif); font-size: clamp(2.25rem, 6vw, 3.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; } .policy-page__intro { max-width: 42rem; margin: var(--space-md) auto 0; color: var(--color-text); font-size: var(--text-md); line-height: 1.75; } /* PAGE LAYOUT */ .policy-page__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; } /* POLICY NAVIGATION */ .policy-page__navigation { min-width: 0; } .policy-page__navigation-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .policy-page__navigation-item { min-width: 0; margin: 0; padding: 0; } .policy-page__navigation-button { display: flex; align-items: center; width: 100%; min-height: 3.25rem; padding: 0.8rem 0.85rem; background-color: rgba(255, 255, 255, 0.025); color: var(--color-text); border: 1px solid rgba(245, 243, 236, 0.16); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-md); font-weight: 500; line-height: 1.4; text-align: left; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } .policy-page__navigation-button[aria-selected="true"] { background-color: rgba(111, 141, 105, 0.16); color: var(--color-brand); border-color: var(--color-brand); font-weight: 600; } .policy-page__navigation-button:hover { border-color: var(--color-brand); } .policy-page__navigation-button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; } /* POLICY CONTENT */ .policy-page__content { min-width: 0; padding: var(--space-xl); background-color: rgba(255, 255, 255, 0.025); border: 1px solid rgba(245, 243, 236, 0.14); border-radius: var(--radius-sm); } .policy-page__panel[hidden] { display: none; } .policy-page__panel { min-width: 0; overflow-wrap: anywhere; } .policy-page__panel:focus { outline: none; } .policy-page__panel > h2 { margin: 0; color: var(--color-text); font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.8rem, 5vw, 2.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; } .policy-page__updated { margin: var(--space-sm) 0 var(--space-xl); color: var(--color-text); font-size: 0.8rem; line-height: 1.5; opacity: 0.7; } .policy-page__panel > h3 { margin: var(--space-xl) 0 var(--space-md); color: var(--color-brand); font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600; line-height: 1.45; } .policy-page__panel > h2 + h3 { margin-top: var(--space-lg); } .policy-page__panel p { margin: 0 0 var(--space-md); color: var(--color-text); font-size: var(--text-md); line-height: 1.8; } .policy-page__panel p:last-child { margin-bottom: 0; } .policy-page__panel ul { margin: 0 0 var(--space-lg); padding-left: 1.35rem; } .policy-page__panel li { margin-bottom: var(--space-sm); padding-left: 0.2rem; color: var(--color-text); font-size: var(--text-md); line-height: 1.75; } .policy-page__panel li:last-child { margin-bottom: 0; } .policy-page__panel strong { color: var(--color-text); font-weight: 600; } /* ACCESSIBILITY AND MOTION */ @media (prefers-reduced-motion: reduce) { .policy-page__navigation-button { transition: none; } } /* TABLET AND DESKTOP */ @media (min-width: 768px) { .policy-page { padding: var(--space-3xl) 2rem; } .policy-page__header { margin-bottom: var(--space-2xl); } .policy-page__layout { grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); gap: var(--space-2xl); } .policy-page__navigation-list { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } .policy-page__navigation-button { padding: 1rem; } .policy-page__content { padding: var(--space-2xl); } }