/* ========================================================================== base.css — reset, element defaults, typography, and the two global accessibility guarantees: a visible focus ring and a reduced-motion escape. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Clears the sticky header so #anchor jumps don't land under it. The header sits on its 4.5rem min-height (the 2.5rem lockup plus its padding is only 4rem); the extra 1rem is breathing room. Re-check this if .brand__logo grows past 3rem, which is when the lockup starts setting the header height. */ scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-base); font-weight: 400; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: var(--lh-snug); text-wrap: balance; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } blockquote { margin: 0; } dl, dd { margin: 0; } fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; } legend { padding: 0; } /* -------------------------------------------------------------------------- Focus. The original site shipped three :focus rules, one of which was `outline: none`, leaving the browser default white ring on a cream page. One global :focus-visible ring, defined once, in a brand red bright enough to clear 3:1 on the light page and on the near-black grounds. -------------------------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); } /* The one ground --focus cannot clear is a --red panel (1.6:1), so the ring goes white there. The dark grounds take white too — it reads cleaner than a red ring on near-black, and the old navy ring on navy was 1.8:1 anyway. */ .booking__perks :focus-visible, .section--dark :focus-visible, .site-footer :focus-visible { outline-color: #fff; } /* Only suppress the ring for pointer users, never for keyboard users. */ :focus:not(:focus-visible) { outline: none; } .skip-link { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 100; padding: var(--space-3) var(--space-5); background: var(--red); color: #fff; font-size: var(--fs-sm); font-weight: 600; border-radius: var(--radius-sm); text-decoration: none; transform: translateY(calc(-100% - var(--space-5))); transition: transform 160ms var(--ease); } .skip-link:focus { transform: translateY(0); } /* -------------------------------------------------------------------------- Scroll reveal. Two safety properties the original lacked: 1. The hidden state is scoped to `html.js`, which is set by an inline script in . If the script never runs, or a stylesheet loads without the JS, content is visible by default — it can never be hidden permanently. 2. reveal.js also carries a timeout that force-reveals everything, so a failed observer degrades to "visible", never to "blank". -------------------------------------------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .js [data-reveal].is-revealed { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Reduced motion. One block, reading the single --dur token, disables every transition and the smooth scrolling. Reveal elements are forced visible so nobody who asked for less motion is left staring at an empty section. -------------------------------------------------------------------------- */ @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; } .js [data-reveal] { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- Typographic primitives shared across sections. -------------------------------------------------------------------------- */ .eyebrow { margin: 0 0 var(--space-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--red-text); } .section--tint .eyebrow { color: var(--red-text); } .eyebrow--on-dark { color: var(--red-on-dark); } .booking__perks .eyebrow { color: var(--on-red); } .tagline { display: inline-block; margin: 0 0 var(--space-5); padding: var(--space-2) var(--space-4); border: 1px solid rgb(255 255 255 / 0.35); border-radius: var(--radius-pill); background: rgb(28 25 23 / 0.35); backdrop-filter: blur(6px); color: #fff; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; } em { font-style: italic; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }