/* ===================================================== BUSHSCAPES — Safari Lodge Design System ===================================================== */ :root { /* Palette — olive bushveld + charcoal */ --ink: #2d332b; --ink-2: #4f594d; --ink-3: #7b8476; --bone: #d8dacf; --cream: #f3f0e7; --paper: #ffffff; --teal: #8c9500; --teal-deep: #5c6100; --teal-light: #bec253; --gold: #a5ad00; --gold-light: #d7dc62; /* Split-style headline accent (Derek round-6) — one step lighter than --teal-deep so the green word reads clearly against the ink beside it. */ --green-accent: #8c9500; --coral: #b16a3a; --line: rgba(45, 51, 43, 0.11); --line-strong: rgba(45, 51, 43, 0.20); --shadow-soft: 0 18px 60px rgba(45, 51, 43, 0.08); --shadow-strong: 0 30px 90px rgba(45, 51, 43, 0.16); /* Type */ --font-display: "Cormorant Garamond", "Cormorant", "Times New Roman", Georgia, serif; --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Layout */ --container: min(1240px, calc(100vw - 48px)); --container-narrow: min(960px, calc(100vw - 48px)); --radius-sm: 4px; --radius: 8px; --radius-lg: 18px; /* Lodge-profile shell geometry. Hoisted out of .lodge-shell in round 11 so the header can derive its icon positions from the SAME tokens the pricing rail lays itself out with — see --chrome-icon-offset below. */ --rail-w: 332px; --rail-gap: 44px; --lodge-gutter: max(24px, calc((100vw - var(--container)) / 2)); /* Header sizes */ --header-h: 76px; /* .site-header's own horizontal padding, as a token so --chrome-icon-offset can subtract it. Re-declared in the >= 1100px block below. */ --header-pad: max(24px, calc((100vw - 1280px) / 2)); /* === Derek round 11 (A1) — one header-icon geometry for every layout ===== He marked the menu icon as centred on the mid-point of the lodge-profile info/pricing rail, and the search icon mirrored about the logo. The rail is grid column 4 of .lodge-shell (gutter | 1fr | gap | rail | gutter), so its mid-point sits --lodge-gutter + --rail-w / 2 in from the shell's right edge. .lodge-shell is a block in , and .site-header is position: fixed with left/right: 0, so both boxes end at exactly the same x — scrollbar or not. The toggles are positioned against .site-header-inner (which must stay position: relative, see the iPad scrim note at .site-header--fade), so the header's own padding comes back off. Pages with no rail get the identical computed constant from the identical expression, so the two can never drift. */ --chrome-icon-offset: calc(var(--lodge-gutter) + var(--rail-w) / 2 - var(--header-pad)); /* === Derek round 11 (A2/A3) — one standard hero headline ================ Title case at the "What Makes Bushscapes Different" size. Every hero h1 on the site resolves to this token; nothing re-states the clamp. */ --h1-hero: clamp(2.9rem, 6.6vw, 5.4rem); --h1-hero-lh: 0.98; /* === Derek round 11 (A4) — one standard hero height + scroll chevron ==== */ --hero-h: 100svh; --hero-chevron-inset: 30px; /* Bottom padding that keeps hero copy clear of the bottom-centred chevron. Matches the 52px of air the Home hero already leaves (110px padding vs a 28px glyph 30px off the floor), which is the look Derek signed off. */ --hero-copy-clear: clamp(84px, 12svh, 116px); /* Easing */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); } * { box-sizing: border-box; } html { width: 100%; max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; } body { margin: 0; width: 100%; max-width: 100%; overflow-x: hidden; color: var(--ink); background: var(--cream); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } main, .site-header, .site-footer { max-width: 100%; overflow-x: clip; } @supports (overflow: clip) { html, body { overflow-x: clip; } } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease-out); } button { font: inherit; cursor: pointer; } /* Locked scroll when drawers open */ body.no-scroll { overflow: hidden; } /* ========================= TYPOGRAPHY ========================= */ h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.012em; color: var(--ink); } .display em { font-style: italic; font-weight: 400; color: var(--teal-deep); } /* Derek round-6 split-style headings ("About …", "Our Verdict", "Take a closer look…", "Then you might also like…") — the accent word(s) go italic in the lighter green. The em.hl-accent leg out-specifies .display em above so lodge pages get the lighter cut while static pages keep --teal-deep. */ .hl-accent, .display em.hl-accent { font-style: italic; font-weight: 400; color: var(--green-accent, #8c9500); } h1, .h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); } h2, .h2 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); } h3, .h3 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); } p { margin: 0 0 1em; } .lede { max-width: 56ch; margin-top: 18px; color: var(--ink-2); font-size: clamp(1.02rem, 1.4vw, 1.12rem); line-height: 1.7; } .eyebrow { display: inline-block; margin: 0 0 18px; color: var(--teal-deep); font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; } .eyebrow.light { color: var(--gold-light); } /* ========================= BUTTONS ========================= */ .hero-cta, .cta-button { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; border: 1px solid currentColor; border-radius: 999px; color: var(--cream); font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: transparent; transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .hero-cta:hover, .cta-button:hover { background: var(--cream); color: var(--ink); transform: translateY(-2px); } .hero-cta.dark { color: var(--ink); border-color: var(--ink); } .hero-cta.dark:hover { background: var(--ink); color: var(--cream); } .hero-cta span, .cta-button span { transition: transform 0.3s var(--ease-out); } .hero-cta:hover span, .cta-button:hover span { transform: translateX(4px); } .ghost-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-deep); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; transition: color 0.2s, border-color 0.2s; } .ghost-link:hover { color: var(--ink); border-color: var(--ink); } .ghost-link span { transition: transform 0.3s var(--ease-out); } .ghost-link:hover span { transform: translateX(4px); } /* ========================= HEADER ========================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--header-h); display: flex; align-items: center; padding: 0 var(--header-pad); background: var(--cream); border-bottom: 1px solid var(--line); color: var(--ink); transition: box-shadow 0.4s var(--ease-out); } .site-header.is-scrolled { box-shadow: 0 6px 30px rgba(45, 51, 43, 0.06); } .desktop-nav { display: none; } /* Page body offset to clear the fixed header */ body { padding-top: var(--header-h); } body.no-scroll { padding-right: 0; } .site-header-inner { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 16px; width: 100%; } .brand { display: flex; justify-content: center; align-items: center; } .brand img { height: 42px; width: auto; filter: none; image-rendering: auto; } .footer-brand img { filter: none; } .header-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; /* UA stylesheets give