/* ============================================================= ARAVALI NATURE CAMP — stylesheet 1. Tokens 5. Buttons & utilities 2. Reset & base 6. Header / nav 3. Typography 7. Sections & components 4. Layout 8. Footer / floating / responsive ============================================================= */ /* ---------- 1. TOKENS ---------- */ :root { --color-forest: #173B2F; --color-jungle: #102B23; --color-moss: #4F6545; --color-sage: #7A8B6A; --color-sandstone: #ff9300; --color-sand: #E9DDC8; --color-brown: #6B5038; /*--color-gold: #B88945;*/ --color-gold: #e28f1a; --color-charcoal: #1E2420; --color-cream: #FFFFFF; /*--color-cream: #F7F4EC;*/ /* Heading / body-text hierarchy — deliberately NOT the same shade. Headings get a bright, saturated accent green; body copy stays a neutral near-black so the two never read as "one green block". */ /*--color-heading: #5F8F6B; */ --color-heading: #09a22f; /* main headings (h1/h2) — bright, fresh */ --color-heading-alt: #3F7054; /* secondary headings (h3/h4, card titles) — deeper accent */ --text-on-dark: rgba(247, 244, 236, 0.68); /* supporting text on dark green sections */ --bg: var(--color-cream); --bg-alt: #F1ECDF; --text: var(--color-charcoal); /* body copy / paragraphs — neutral, clearly distinct from green headings */ --text-soft: #5F685F; /* supporting / intro text — softer muted green-grey */ --line: rgba(30, 36, 32, 0.14); --line-light: rgba(247, 244, 236, 0.28); --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --container: 1240px; --container-narrow: 820px; --gutter: clamp(1.15rem, 4vw, 3rem); /* Vertical rhythm — compact but breathable */ --space-section: clamp(3.25rem, 6vw, 5.75rem); /* ~52–92px */ --space-section-sm: clamp(2.5rem, 4.5vw, 4rem); /* tighter sections */ --space-block: clamp(1.25rem, 2.5vw, 2rem); /* heading -> content */ --radius: 4px; --radius-lg: 10px; --shadow-sm: 0 1px 3px rgba(16, 43, 35, 0.06); --shadow-md: 0 18px 45px -20px rgba(16, 43, 35, 0.35); --shadow-header: 0 1px 0 rgba(30,36,32,0.08), 0 10px 30px -22px rgba(16, 43, 35, 0.45); --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.6s; --header-h: 74px; } /* ---------- 2. RESET & BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 14px); /* is the single scroll container. Clip horizontal overflow here (not on , which would create a second, conflicting scroller). */ overflow-x: hidden; /* Reserve the scrollbar gutter so locking scroll causes no layout shift. */ scrollbar-gutter: stable; } /* Offset in-page anchor targets for the fixed header */ :target, [id] { scroll-margin-top: calc(var(--header-h) + 14px); } /* Scroll lock while a modal / mobile menu / lightbox is open. Applied to (the scroll container) — never uses position:fixed, so it cannot strand the page in a frozen state and it keeps scroll position. */ html.is-locked { overflow: hidden; } body { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.7; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; } ul { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--color-jungle); color: var(--color-cream); padding: 0.8rem 1.2rem; } .skip-link:focus { left: 1rem; top: 1rem; } /* ---------- 3. TYPOGRAPHY ---------- */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.12; letter-spacing: 0.01em; color: var(--color-heading-alt); /* secondary/deeper accent by default (h3/h4, card titles) */ } h1, h2 { color: var(--color-heading); } /* main headings — brighter, fresher, clearly apart from body copy */ h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); } h2 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); } h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); } p { text-wrap: pretty; } .lead { font-size: clamp(0.78rem, 1.9vw, 1.2rem); line-height: 1.6; color: var(--text-soft); padding-bottom: 10px; } .eyebrow { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold) !important; margin-bottom: 0.7rem; font-weight: 900; } .eyebrow--light { display: inline-block; font-size: 0.78rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--color-sandstone); background: rgba(16, 43, 35, 0.52); padding: 0.42rem 0.9rem; border-radius: 7px; margin-bottom: 1.1rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(233, 221, 200, 0.15);} .section-title { margin-bottom: 0.4rem; } .section-intro { margin-top: 0.7rem; max-width: 46ch; color: var(--text-soft); font-size: 1.03rem; } .section-head { margin-bottom: var(--space-block); } .section-head--center { text-align: center; margin-inline: auto; max-width: 720px; } .section-head--center .section-intro { margin-inline: auto; } .prose p + p { margin-top: 0.9rem; } .prose h2 { margin: 1.8rem 0 0.6rem; } .prose h3 { margin: 1.4rem 0 0.5rem; } .prose ul { margin: 0.9rem 0; display: grid; gap: 0.45rem; } .prose li { padding-left: 1.4rem; position: relative; } .prose li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border: 1px solid var(--color-gold); transform: rotate(45deg); } /* ---------- 4. LAYOUT ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--space-section); } .section--sm { padding-block: var(--space-section-sm); } .section--tint { background: var(--bg-alt); } .section--forest { background: var(--color-forest); color: var(--color-sand); } .section--forest h2, .section--forest h3 { color: var(--color-cream); } /* Supporting paragraphs in dark sections — a muted, reduced-opacity cream reads clearly softer next to the solid cream headings above (sand/full-opacity cream were both too close to tell apart). More specific rules (e.g. .statement p, .text-link) still win as before. */ .section--forest p { color: var(--text-on-dark); } .section--flush { padding-block: 0; } /* Collapse the doubled gap between two sections that share a background */ .section:not(.section--tint):not(.section--forest) + .section:not(.section--tint):not(.section--forest), .section--tint + .section--tint { padding-top: 0; } .grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); } .split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-media { grid-template-columns: 1.15fr 0.85fr; } .split--wide-text { grid-template-columns: 0.85fr 1.15fr; } .split--contact { grid-template-columns: 5fr 7fr; } /* ~30 / 70 — wide form column */ .split--reverse .split__media { order: 2; } } .media-frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-sage); } .media-frame img { width: 100%; height: 100%; object-fit: cover; } .media-frame--tall { aspect-ratio: 4 / 4.4; } .media-frame--wide { aspect-ratio: 16 / 10; } .media-frame--stack { aspect-ratio: 1 / 1; } .media-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } .media-duo .media-frame:first-child { margin-top: 1.8rem; } .media-duo .media-frame { aspect-ratio: 3 / 4; } /* ---------- 5. BUTTONS & UTILITIES ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 46px; padding: 0.7rem 1.75rem; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; line-height: 1.1; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius); transition: transform var(--dur) var(--ease), background-color 0.35s, color 0.35s, border-color 0.35s; will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--gold { background: var(--color-gold); color: #fff; } .btn--gold:hover { background: #a5793a; } .btn--forest { background: var(--color-forest); color: var(--color-cream); } .btn--forest:hover { background: var(--color-jungle); } .btn--ghost { border-color: var(--color-forest); color: var(--color-forest); } .btn--ghost:hover { background: var(--color-forest); color: var(--color-cream); } .btn--ghost-light { border-color: var(--color-sand); color: var(--color-cream); } .btn--ghost-light:hover { background: var(--color-cream); color: var(--color-forest); } .text-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-forest); padding-bottom: 3px; border-bottom: 1px solid var(--color-gold); transition: gap 0.35s var(--ease), color 0.3s; } .text-link::after { content: "\2192"; transition: transform 0.35s var(--ease); } .text-link:hover { gap: 0.8rem; color: var(--color-gold); } .text-link:hover::after { transform: translateX(4px); } .section--forest .text-link { color: var(--color-sandstone); } .actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.8rem; } /* reveal animation */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .no-js .reveal { opacity: 1; transform: none; } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.16s; } .reveal[data-delay="3"] { transition-delay: 0.24s; } /* ---------- 6. HEADER / NAV ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), backdrop-filter 0.35s; /*background: rgba(247, 244, 236, 0.9);*/ /*-webkit-backdrop-filter: saturate(140%) blur(10px);*/ background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: saturate(160%) blur(8px); /*backdrop-filter: saturate(160%) blur(10px);*/ /*backdrop-filter: saturate(140%) blur(10px);*/ border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: var(--color-cream); border-bottom-color: rgba(30, 36, 32, 0.08); box-shadow: var(--shadow-header); } .site-header { --brand-mark-h: clamp(44px, 4.6vw, 56px); --header-pad: 0.7rem; } .site-header.is-scrolled { --brand-mark-h: clamp(38px, 3.8vw, 46px); /* logo scales down slightly on scroll */ --header-pad: 0.4rem; } .site-header__inner { max-width: var(--container); margin-inline: auto; padding: var(--header-pad) var(--gutter); display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); min-height: var(--header-h); transition: padding 0.35s var(--ease), min-height 0.35s var(--ease); } .site-header.is-scrolled .site-header__inner { min-height: calc(var(--header-h) - 12px); } /* Brand lockup: leopard emblem (logo2.png) + HTML wordmark */ .site-brand { flex-shrink: 0; display: flex; align-items: center; gap: clamp(0.5rem, 1.3vw, 0.85rem); text-decoration: none; transition: opacity 0.3s var(--ease); } .site-brand:hover { opacity: 0.92; } .site-brand__mark { width: auto; height: var(--brand-mark-h); object-fit: contain; display: block; transition: height 0.35s var(--ease), transform 0.35s var(--ease); } .site-brand:hover .site-brand__mark { transform: scale(1.02); } .site-brand__name { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; } .site-brand__name-1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.1rem, 1.75vw, 1.38rem); letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-forest); } .site-brand__name-2 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(0.52rem, 0.8vw, 0.64rem); letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-brown); margin-top: 0.28em; } .site-nav { margin-left: auto; } .site-nav__list { display: flex; gap: clamp(0.9rem, 1.8vw, 1.9rem); } .site-nav__list a { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; color: var(--color-forest); padding: 0.4rem 0; position: relative; white-space: nowrap; transition: color 0.3s var(--ease); } .site-nav__list a:hover, .site-nav__list a[aria-current="page"] { color: var(--color-gold); } .site-nav__list a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--color-gold); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .site-nav__list a:hover::after, .site-nav__list a[aria-current="page"]::after { transform: scaleX(1); } .site-header__cta { margin-left: 0.5rem; min-height: 40px; padding: 0.6rem 1.3rem; font-size: 0.72rem; white-space: nowrap; } .nav-toggle { display: none; margin-left: auto; align-items: center; gap: 0.55rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-forest); } .nav-toggle__bars { position: relative; width: 26px; height: 14px; } .nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform 0.35s var(--ease), opacity 0.2s; } .nav-toggle__bars span:nth-child(1) { top: 0; } .nav-toggle__bars span:nth-child(2) { top: 6px; } .nav-toggle__bars span:nth-child(3) { top: 12px; } body.nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .mobile-nav[hidden] { display: none !important; } .mobile-nav { position: fixed; inset: 0; z-index: 90; overflow: hidden; /* clip the off-screen sliding panel */ background: rgba(16, 43, 35, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; /* don't block the page while closing */ transition: opacity 0.35s var(--ease); } .mobile-nav.is-open { opacity: 1; pointer-events: auto; } .mobile-nav__panel { position: absolute; inset: 0 0 0 auto; width: min(88vw, 380px); background: var(--color-jungle); color: var(--color-cream); padding: calc(var(--header-h) + 1.5rem) 2rem 2rem; transform: translateX(100%); transition: transform 0.4s var(--ease); overflow-y: auto; } .mobile-nav.is-open .mobile-nav__panel { transform: none; } .mobile-nav__panel a { display: block; font-family: var(--font-serif); font-size: 1.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line-light); color: var(--color-cream); } .mobile-nav__panel a[aria-current="page"] { color: var(--color-sandstone); } .mobile-nav__contact { margin-top: 2rem; display: grid; gap: 0.5rem; font-size: 0.95rem; color: var(--color-sandstone); } /* ---------- 7. SECTIONS & COMPONENTS ---------- */ /* Home hero */ .hero { position: relative; min-height: 100svh; display: flex; align-items: safe center; /* content block sits around the vertical center; never rendered above its box */ padding-top: calc(var(--header-h) + 1.25rem); /* guarantees clearance under the fixed header at ANY viewport height */ color: var(--color-cream); overflow: hidden; } @media (min-width: 1041px) { /* Laptop / desktop only — a touch of extra height keeps the centered content block comfortably clear of the header, without touching typography, colors, buttons or the hero image. Tablet/mobile (below this breakpoint) keep the existing 100svh / 90svh untouched. */ .hero { min-height: calc(100svh + 4.5rem); } } .hero__media { position: absolute; inset: 0; z-index: -2; pointer-events: none; } .hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: heroZoom 18s var(--ease) forwards; } @keyframes heroZoom { to { transform: scale(1); } } .hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* Even, moderately dark wash top-to-bottom so the now vertically-centered text has reliable contrast wherever it falls on the image, not just at the bottom (a light middle band here would otherwise undercut the text once it's no longer anchored to the darkest part of the old gradient). */ background: linear-gradient( 180deg, rgba(16, 43, 35, 0.55) 0%, rgba(16, 43, 35, 0.5) 50%, rgba(16, 43, 35, 0.72) 100% ); } .hero__inner { max-width: var(--container); margin-inline: auto; padding: 0 var(--gutter) clamp(3rem, 7vw, 5.5rem); width: 100%; text-shadow: 0 2px 20px rgba(16, 43, 35, 0.5), 0 1px 3px rgba(16, 43, 35, 0.35); } .hero__brand { display: inline-block; font-size: 0.78rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--color-gold); background: rgba(16, 43, 35, 0.52); padding: 0.42rem 0.9rem; border-radius: 7px; margin-bottom: 1.1rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(233, 221, 200, 0.15); font-weight: 900 !important; } .hero__title { color: #fff; font-size: clamp(2.4rem, 6.2vw, 5.8rem); font-weight: 900; max-width: 18ch; } .hero__copy { margin-top: 1.1rem; max-width: 46ch; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--color-cream); /* muted cream — clearly softer than the solid cream heading above */ } .hero__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.8rem; } .hero__scroll { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247,244,236,0.75); } .hero__scroll span { width: 1px; height: 46px; background: linear-gradient(var(--color-sandstone), transparent); animation: scrollPulse 2.4s ease-in-out infinite; } @keyframes scrollPulse { 0%,100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } } /* Page hero (inner) */ .page-hero { position: relative; isolation: isolate; display: flex; align-items: safe center; /* hero text vertically centred */ min-height: clamp(26rem, 60vh, 44rem); /* spacious — roughly 55–65vh on desktop */ padding-top: var(--header-h); /* never sits under the sticky header */ padding-bottom: clamp(1.5rem, 3vw, 2.5rem); color: var(--color-cream); background-color: var(--color-jungle); /* fallback tone if the image is slow or unavailable */ /* background-image is set inline on the element (header.php) so the relative path resolves against the page, not against this stylesheet's folder. */ background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; } .page-hero__overlay { position: absolute; inset: 0; z-index: 0; /* above the image, below the text */ pointer-events: none; background: linear-gradient( 180deg, rgba(16, 43, 35, 0.36) 0%, rgba(16, 43, 35, 0.40) 55%, rgba(16, 43, 35, 0.60) 100% ); } .page-hero__content { position: relative; z-index: 1; max-width: var(--container); width: 100%; margin-inline: auto; padding-inline: var(--gutter); /* keeps text legible on bright images without needing a heavy overlay */ text-shadow: 0 2px 22px rgba(16, 43, 35, 0.55), 0 1px 3px rgba(16, 43, 35, 0.3); padding-top: 10px; } .page-hero__title { color: var(--color-cream); max-width: 20ch; } .page-hero__subtitle { margin-top: 0.9rem; max-width: 54ch; color: var(--text-on-dark); /* muted cream — clearly softer than the solid cream heading above */ font-size: clamp(0.98rem, 1.5vw, 1.15rem); line-height: 1.6; } @media (max-width: 700px) { .page-hero { min-height: clamp(19rem, 52vh, 27rem); /* roughly 45–55vh on phones */ padding-bottom: clamp(1.25rem, 4vw, 2rem); } } body.no-hero #main { padding-top: var(--header-h); } .page-head { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); } /* Breadcrumbs */ .breadcrumbs { padding: 1.1rem 0 0; } .breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-soft); } .breadcrumbs li { display: flex; align-items: center; gap: 0.5rem; } .breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; color: var(--line); } .breadcrumbs a:hover { color: var(--color-gold); } /* Feature cards (accommodation / experiences) */ .card-grid { display: grid; gap: clamp(1.1rem, 2vw, 1.75rem); } @media (min-width: 720px) { .card-grid--2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } } .feature-card { display: flex; flex-direction: column; background: var(--color-cream); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .feature-card__media { aspect-ratio: 3 / 2; overflow: hidden; } .feature-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .feature-card:hover .feature-card__media img { transform: scale(1.06); } .feature-card__body { padding: clamp(1.1rem, 2vw, 1.5rem); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; } .feature-card__body h3 { color: var(--color-heading); } .feature-card__body p { font-size: 0.96rem; } .feature-card__icon { color: var(--color-gold); display: block; } .feature-card__meta { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--color-gold); text-transform: uppercase; } .feature-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.2rem; } .feature-card__tags span { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-moss); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.7rem; } .feature-card .text-link { margin-top: 0.4rem; } /* Numbered reasons */ .reasons { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); } @media (min-width: 680px) { .reasons { grid-template-columns: 1fr 1fr; } } @media (min-width: 1040px) { .reasons { grid-template-columns: repeat(3, 1fr); } } .reason { padding: 1.3rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.4rem; } .section--forest .reason { border-color: var(--line-light); } .reason__num { font-family: var(--font-serif); font-size: 1.4rem; color: var(--color-sandstone); } .reason__icon { color: var(--color-sandstone); margin-bottom: 0.3rem; } .reason h3 { font-size: 1.25rem; } .reason p { font-size: 0.98rem; color: var(--text-on-dark); } /* Facilities */ .facility-group { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); } .facility-group:last-child { margin-bottom: 0; } .facility-group__title { font-family: var(--font-sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold); padding-bottom: 0.65rem; border-bottom: 1px solid var(--line); margin-bottom: 1.1rem; } .facility-list { display: grid; gap: 0.7rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .facility-list li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; } .facility-list .icon { color: var(--color-moss); flex-shrink: 0; } /* Gallery */ .gallery-grid { columns: 1; column-gap: 1rem; } @media (min-width: 620px) { .gallery-grid { columns: 2; } } @media (min-width: 1000px) { .gallery-grid { columns: 3; } } .gallery-item { break-inside: avoid; margin-bottom: 1rem; position: relative; overflow: hidden; border-radius: var(--radius); display: block; width: 100%; } .gallery-item img { width: 100%; transition: transform 1.1s var(--ease); } .gallery-item::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(16,43,35,0.72)); opacity: 0; transition: opacity 0.4s; } .gallery-item figcaption { pointer-events: none; } .gallery-item figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 0.9rem; color: var(--color-cream); font-size: 0.8rem; letter-spacing: 0.04em; opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.4s var(--ease); z-index: 1; } .gallery-item:hover img { transform: scale(1.05); } .gallery-item:hover::after, .gallery-item:hover figcaption { opacity: 1; } .gallery-item:hover figcaption { transform: none; } .gallery-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.5rem; } .gallery-filters button { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.55rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); transition: background-color 0.3s, color 0.3s, border-color 0.3s; } .gallery-filters button[aria-pressed="true"] { background: var(--color-forest); color: var(--color-cream); border-color: var(--color-forest); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(16, 43, 35, 0.94); display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); opacity: 0; pointer-events: none; transition: opacity 0.35s; } .lightbox.is-open { opacity: 1; pointer-events: auto; } .lightbox img { max-width: 100%; max-height: 82vh; border-radius: var(--radius); box-shadow: var(--shadow-md); } .lightbox__caption { position: absolute; bottom: 1.4rem; left: 0; right: 0; text-align: center; color: var(--color-sand); font-size: 0.85rem; } .lightbox__close, .lightbox__nav { position: absolute; color: var(--color-cream); width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-light); border-radius: 999px; font-size: 1.4rem; transition: background-color 0.3s; } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(247,244,236,0.14); } .lightbox__close { top: 1.2rem; right: 1.2rem; } .lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); } .lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); } /* Quote / statement band */ .statement { text-align: center; max-width: 900px; margin-inline: auto; } .statement p { font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 2.15rem); line-height: 1.35; color: var(--color-forest); } .section--forest .statement p { color: var(--color-cream); } /* Destination mini cards */ .dest-cards { display: grid; gap: 1.1rem; margin-top: 1.5rem; } @media (min-width: 700px) { .dest-cards { grid-template-columns: repeat(3, 1fr); } } .dest-card { border: 1px solid var(--line-light); border-radius: var(--radius); padding: 1.5rem; } .dest-card h3 { font-size: 1.2rem; color: var(--color-cream); margin-bottom: 0.4rem; } .dest-card p { font-size: 0.92rem; opacity: 0.85; } /* ---------- Homepage: guest testimonials ---------- */ .ac-testimonials__grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); } @media (min-width: 700px) { .ac-testimonials__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .ac-testimonials__grid { grid-template-columns: repeat(3, 1fr); } } .ac-testimonial { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 2.6vw, 2.1rem); background: var(--color-cream); border: 1px solid var(--line); border-radius: var(--radius); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); } .ac-testimonial:hover { transform: translateY(-4px); border-color: rgba(184, 137, 69, 0.4); box-shadow: var(--shadow-sm); } .ac-testimonial__mark { color: var(--color-sandstone); } .ac-testimonial__mark svg { display: block; } .ac-testimonial__quote { margin: 0; } .ac-testimonial__quote p { font-family: var(--font-serif); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--color-forest); } .ac-testimonial__cite { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line); display: grid; gap: 0.25rem; } .ac-testimonial__cite cite { font-style: normal; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--color-charcoal); } .ac-testimonial__meta { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brown); } /* ---------- Homepage: FAQ ---------- */ .ac-faq__layout { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); } @media (min-width: 920px) { .ac-faq__layout { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: start; } .ac-faq__header { position: sticky; top: calc(var(--header-h) + 1.5rem); } } .ac-faq__rule { display: block; width: 54px; height: 1px; margin: 1.4rem 0; background: var(--color-sandstone); } .ac-faq__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1rem; font-size: 0.98rem; color: var(--text-soft); } .ac-faq__list { border-top: 1px solid var(--line); } .ac-faq__item { border-bottom: 1px solid var(--line); } .ac-faq__q { margin: 0; font: inherit; } .ac-faq__trigger { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding: clamp(1rem, 1.8vw, 1.35rem) 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--color-heading-alt); /* matches the heading tone, distinct from the text-soft answer */ transition: color 0.3s var(--ease); } .ac-faq__trigger:hover { color: var(--color-gold); } .ac-faq__trigger:focus-visible { outline: 2px solid var(--color-sandstone); outline-offset: 3px; border-radius: var(--radius); } .ac-faq__q-text { font-family: var(--font-serif); font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.35; color: var(--color-jungle); ; } .ac-faq__icon { position: relative; flex: 0 0 24px; width: 24px; height: 24px; margin-top: 0.15rem; /* border: 1px solid var(--color-sandstone); */ border-radius: 999px; } .ac-faq__icon::before, .ac-faq__icon::after { content: ""; position: absolute; left: 25%; right: 25%; top: 50%; height: 1px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .ac-faq__icon::after { transform: rotate(90deg); } .ac-faq__item.is-open .ac-faq__trigger { color: var(--color-gold); } .ac-faq__item.is-open .ac-faq__icon::after { transform: rotate(0); opacity: 0; } .ac-faq__answer { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.38s var(--ease), visibility 0s linear 0.38s; } .ac-faq__item.is-open .ac-faq__answer { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.38s var(--ease), visibility 0s; } .ac-faq__answer-inner { overflow: hidden; } .ac-faq__answer-inner p { padding-bottom: clamp(1rem, 1.8vw, 1.35rem); max-width: 62ch; color: var(--text-soft); font-size: 0.98rem; line-height: 1.65; opacity: 0; transform: translateY(-4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .ac-faq__item.is-open .ac-faq__answer-inner p { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ac-testimonial, .ac-faq__answer, .ac-faq__answer-inner p, .ac-faq__icon::before, .ac-faq__icon::after { transition-duration: 0.001ms; } } /* CTA band */ .cta-band { position: relative; background: var(--color-jungle); color: var(--color-sand); text-align: center; padding-block: clamp(2.75rem, 5vw, 4rem); } .cta-band__inner { max-width: 640px; margin-inline: auto; padding-inline: var(--gutter); } .cta-band h2 { color: var(--color-cream); margin: 0.3rem 0 0.7rem; } .cta-band p { font-size: 1rem; color: var(--text-on-dark); } .cta-band__actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; } /* Forms */ .form-card { background: var(--color-cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 3rem); box-shadow: var(--shadow-sm); } .form-grid { display: grid; gap: 1.3rem; } @media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: 0.45rem; } .field label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-forest); } .field input, .field select, .field textarea { font: inherit; font-size: 0.98rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--text); transition: border-color 0.3s, box-shadow 0.3s; width: 100%; } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-moss); box-shadow: 0 0 0 3px rgba(79, 101, 69, 0.15); } .field--full { grid-column: 1 / -1; } .field__hint { font-size: 0.8rem; color: var(--text-soft); letter-spacing: 0; text-transform: none; font-weight: 400; } .field-error { color: #9c3b2e; font-size: 0.82rem; } .form-note { font-size: 0.82rem; color: var(--text-soft); margin-top: 1rem; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Compact form variant — used where the form column is wide (e.g. contact.php), so pairs of fields sit side by side instead of stacking, and the card reads shorter overall. Only spacing/sizing changes — same fields, same markup. */ .form-card--compact { padding: clamp(1.35rem, 2vw, 2rem); } .form-card--compact .form-grid { gap: 0.8rem 1.1rem; } .form-card--compact .field { gap: 0.32rem; } .form-card--compact .field input, .form-card--compact .field select, .form-card--compact .field textarea { padding: 0.6rem 0.85rem; font-size: 0.94rem; } .form-card--compact .field textarea { min-height: 88px; } .form-card--compact .enquiry-form__foot { margin-top: 0.9rem; } .form-alert { padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-size: 0.95rem; } .form-alert--error { background: #f7e4df; color: #7c2f22; border: 1px solid #e0b3a8; } .form-alert--success { background: #e4ede2; color: #2f5136; border: 1px solid #b7cdb4; } .enquiry-success { text-align: center; padding: clamp(2rem, 6vw, 4rem); background: var(--color-cream); border: 1px solid var(--line); border-radius: var(--radius-lg); } .icon-badge { width: 60px; height: 60px; border-radius: 999px; display: grid; place-items: center; background: var(--color-forest); color: var(--color-cream); margin: 0 auto 1.2rem; } /* Contact info list */ .contact-list { display: grid; gap: 1.2rem; margin-top: 1.5rem; } .contact-list__item { display: flex; gap: 0.9rem; align-items: flex-start; } .contact-list__item .icon { color: var(--color-gold); margin-top: 3px; flex-shrink: 0; } .contact-list dt { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-moss); } .contact-list dd { font-size: 1.02rem; } .contact-pending { color: var(--text-soft); font-style: italic; } /* Stat / info row */ .info-row { display: grid; gap: 1.5rem; } @media (min-width: 700px) { .info-row { grid-template-columns: repeat(3, 1fr); } } .info-row__item { border-top: 1px solid var(--line); padding-top: 1rem; } .info-row__item strong { font-family: var(--font-serif); font-size: 1.6rem; color: var(--color-forest); display: block; } /* 404 */ .notfound { min-height: 80vh; display: grid; place-items: center; text-align: center; padding: var(--header-h) var(--gutter) 4rem; background: var(--color-forest); color: var(--color-sand); } .notfound h1 { color: var(--color-cream); font-size: clamp(2.4rem, 7vw, 4.5rem); } /* ---------- 8. FOOTER / FLOATING ---------- */ .site-footer { background: var(--color-jungle); color: rgba(247, 244, 236, 0.78); padding-top: clamp(2.5rem, 5vw, 3.75rem); border-top: 1px solid rgba(255, 255, 255, 0.568); } .site-footer__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); } @media (min-width: 760px) { .site-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; } } .site-footer__brand-link { display: inline-flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1rem); text-decoration: none; } .site-footer__brand-link.reveal { transform: translateY(16px) scale(0.97); } .site-footer__brand-link.reveal.is-visible, .no-js .site-footer__brand-link.reveal { transform: none; } .site-footer__mark { width: auto; height: clamp(52px, 6vw, 64px); object-fit: contain; display: block; transition: transform 0.35s var(--ease); } .site-footer__brand-link:hover .site-footer__mark { transform: scale(1.02); } .site-footer__name { display: flex; flex-direction: column; line-height: 1.06; white-space: nowrap; } .site-footer__name-1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-cream); } .site-footer__name-2 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(0.58rem, 1vw, 0.68rem); letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-sandstone); margin-top: 0.32em; } .site-footer__desc { margin-top: 1.2rem; font-size: 0.92rem; max-width: 40ch; } .site-footer__social { display: flex; gap: 1rem; margin-top: 1.3rem; } .site-footer__social a { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-sandstone); } .site-footer__social a:hover { color: var(--color-cream); } .site-footer__col h3 { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-sandstone); margin-bottom: 1rem; } .site-footer__col ul { display: grid; gap: 0.6rem; } .site-footer__col a { font-size: 0.9rem; } .site-footer__col a:hover { color: var(--color-cream); } .site-footer__loc { font-size: 0.9rem; } .site-footer__bar { max-width: var(--container); margin: clamp(1.75rem, 4vw, 2.75rem) auto 0; padding: 1.25rem var(--gutter) 1.75rem; border-top: 1px solid var(--line-light); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; font-size: 0.78rem; } .site-footer__fineprint { opacity: 0.7; } /* ---------- Floating action system (enquiry + WhatsApp) ---------- */ .floating-actions { --fab-size: 52px; /* touch target */ --fab-gap: 0.75rem; /* space between buttons */ position: fixed; right: clamp(0.9rem, 2vw, 1.5rem); bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; flex-direction: column; align-items: flex-end; /* pills grow leftwards */ gap: var(--fab-gap); } .floating-action { --_bg: var(--color-forest); --_fg: var(--color-cream); display: flex; align-items: center; height: var(--fab-size); min-width: var(--fab-size); max-width: var(--fab-size); /* collapsed = circle */ border: 0; border-radius: 999px; background: var(--_bg); color: var(--_fg); text-decoration: none; overflow: hidden; cursor: pointer; box-shadow: 0 10px 28px -12px rgba(16, 43, 35, 0.5), 0 2px 8px -3px rgba(16, 43, 35, 0.35); transition: max-width 0.4s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .floating-action__icon { flex: 0 0 var(--fab-size); width: var(--fab-size); height: var(--fab-size); display: grid; place-items: center; } .floating-action__icon svg { display: block; } .floating-action__label { white-space: nowrap; padding-right: 1.15rem; font-family: var(--font-sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0; transition: opacity 0.3s var(--ease); } .floating-action:hover, .floating-action:focus-visible { max-width: 16rem; /* expand to reveal label */ transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(16, 43, 35, 0.55), 0 3px 10px -3px rgba(16, 43, 35, 0.4); } .floating-action:hover .floating-action__label, .floating-action:focus-visible .floating-action__label { opacity: 1; } .floating-action:focus-visible { outline: 2px solid var(--color-sandstone); outline-offset: 3px; } .floating-action--enquiry { --_bg: var(--color-forest); --_fg: var(--color-cream); } .floating-action--enquiry:hover, .floating-action--enquiry:focus-visible { --_bg: var(--color-jungle); } .floating-action--whatsapp { --_bg: #1f7a44; --_fg: #fff; } .floating-action--whatsapp:hover, .floating-action--whatsapp:focus-visible { --_bg: #1a6b3b; } @media (max-width: 700px) { .floating-actions { --fab-size: 46px; --fab-gap: 0.6rem; } .floating-action__label { font-size: 0.72rem; } } @media (prefers-reduced-motion: reduce) { .floating-action, .floating-action__label { transition-duration: 0.001ms; } .floating-action:hover, .floating-action:focus-visible { transform: none; } } /* ---------- Enquiry modal ---------- */ /* Hard-hide when the `hidden` attribute is present — an author `display` value would otherwise beat the UA `[hidden]` rule and leave an invisible full-screen layer intercepting every click on the page. */ .modal[hidden] { display: none !important; } .modal { position: fixed; inset: 0; z-index: 160; display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 3vw, 2rem); opacity: 0; pointer-events: none; /* never intercept clicks unless open */ transition: opacity 0.3s var(--ease); } .modal.is-open { opacity: 1; pointer-events: auto; } .modal__overlay { position: absolute; inset: 0; background: rgba(16, 43, 35, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .modal__dialog { position: relative; width: min(640px, 100%); max-height: min(90vh, 900px); background: var(--color-cream); border-radius: var(--radius-lg); box-shadow: 0 30px 80px -30px rgba(16, 43, 35, 0.6); transform: translateY(16px) scale(0.98); opacity: 0; transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); display: flex; flex-direction: column; overflow: hidden; } .modal.is-open .modal__dialog { transform: none; opacity: 1; } .modal__close { position: absolute; top: 0.65rem; right: 0.65rem; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; color: var(--color-forest); background: rgba(247, 244, 236, 0.9); transition: background-color 0.25s; } .modal__close:hover { background: var(--color-sand); } .modal__scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: clamp(1.5rem, 4vw, 2.5rem); } .modal__title { margin-bottom: 0.35rem; } .modal__intro { color: var(--text-soft); font-size: 0.98rem; margin-bottom: 1.25rem; max-width: 46ch; } .modal__alert { margin-bottom: 1rem; } .modal__success { text-align: center; padding: 1rem 0; } .modal__success h3 { margin-bottom: 0.5rem; } .modal__success p { color: var(--text-soft); max-width: 40ch; margin: 0 auto 1.25rem; } /* ---------- Enquiry form (shared partial) ---------- */ .enquiry-form__foot { margin-top: 1.4rem; } .enquiry-form__foot .btn { width: 100%; } @media (min-width: 560px) { .enquiry-form__foot .btn { width: auto; min-width: 200px; } } /* ---------- Accommodation stay blocks ---------- */ .stay { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-block: var(--space-section-sm); } .stay + .stay { border-top: 1px solid var(--line); } @media (min-width: 900px) { .stay { grid-template-columns: 1.05fr 0.95fr; } .stay--reverse .stay__media { order: 2; } } .stay__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; } .stay__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .stay:hover .stay__media img { transform: scale(1.04); } .stay__body { display: grid; gap: 0.7rem; } .stay__option { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); font-weight: 600; } .stay__title { margin: 0; } .stay__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.9rem; color: var(--color-moss); letter-spacing: 0.02em; } .stay__meta span { display: inline-flex; align-items: center; gap: 0.4rem; } .stay__desc { color: var(--text-soft); } .stay__amen-title { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-forest); margin-top: 0.4rem; } /* ---------- Compact amenity grid ---------- */ .amenity-grid { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.55rem 1.25rem; } @media (min-width: 560px) { .amenity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .amenity-grid li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; } .amenity-grid .icon { color: var(--color-moss); flex-shrink: 0; } .to-top { position: fixed; left: clamp(0.8rem, 2vw, 1.4rem); bottom: clamp(0.8rem, 2vw, 1.4rem); z-index: 80; width: 44px; height: 44px; border-radius: 999px; background: var(--color-cream); color: var(--color-forest); display: grid; place-items: center; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; /* invisible = not clickable */ } .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1040px) { .site-nav, .site-header__cta { display: none; } .nav-toggle { display: flex; } } @media (max-width: 900px) { .media-duo .media-frame:first-child { margin-top: 0; } } @media (max-width: 620px) { :root { --header-h: 62px; } .hero { min-height: 90svh; } .actions .btn, .hero__actions .btn, .cta-band__actions .btn { width: 100%; } .site-footer__bar { flex-direction: column; } .stay__media { aspect-ratio: 3 / 2; } } /* Short / landscape viewports (rotated phones, small browser windows) — the hero content is bottom-anchored, so on a short viewport it can otherwise end up needing more room than the screen has under the fixed header. Shrink the vertical rhythm so everything, including the brand plaque, stays comfortably clear of the header. */ @media (max-height: 520px) { .hero { padding-top: calc(var(--header-h) + 0.75rem); min-height: calc(100svh); } .hero__inner { padding-bottom: clamp(0.75rem, 4vh, 1.5rem); } .hero__brand { margin-bottom: 0.5rem; } .hero__title { font-size: clamp(1.5rem, 6vh, 2.6rem); } .hero__copy { margin-top: 0.4rem; font-size: 0.9rem; } .hero__actions { margin-top: 0.75rem; } } @media (max-width: 620px) { .site-header { --brand-mark-h: 40px; } .site-header.is-scrolled { --brand-mark-h: 36px; } .site-brand__name-1 { font-size: 1.02rem; letter-spacing: 0.12em; } .site-brand__name-2 { font-size: 0.5rem; letter-spacing: 0.22em; } } @media (max-width: 380px) { .site-header { --brand-mark-h: 34px; } .site-header.is-scrolled { --brand-mark-h: 32px; } .site-brand { gap: 0.45rem; } .site-brand__name-1 { font-size: 0.92rem; } .site-brand__name-2 { font-size: 0.46rem; letter-spacing: 0.16em; } } /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal, .site-footer__brand-link.reveal { opacity: 1; transform: none; } .hero__media img { transform: none; animation: none; } } /* ---------- PRINT ---------- */ @media print { .site-header, .mobile-nav, .floating-actions, .to-top, .cta-band, .hero__scroll { display: none !important; } }