/* ============================================================================ Zavana Cancún — brand chrome. The scrub engine ships its own tokens inside @layer sw, so a plain :root block here wins without specificity hacks. ========================================================================== */ :root { /* Brand palette */ --zav-water: #1F7A8C; --zav-shallow: #6FC6C4; --zav-limestone: #F4EFE6; --zav-sand: #D9C3A5; --zav-coral: #E2725B; --zav-night: #0B1B2B; --zav-brass: #B08D57; --zav-ink: #12202E; --zav-ink-soft: #5A6B7A; --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --measure: 68ch; --radius: 4px; /* Engine theme overrides */ --sw-bg: var(--zav-limestone); --sw-ink: var(--zav-ink); --sw-ink-soft: var(--zav-ink-soft); --sw-accent: var(--zav-brass); --sw-font-display: var(--font-display); --sw-font-body: var(--font-body); } /* `clip` contains horizontal overflow WITHOUT making a scroll container. `hidden` here silently breaks every position:sticky inside the engine. */ html { scroll-behavior: smooth; } html, body { overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { margin: 0; background: var(--zav-limestone); color: var(--zav-ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ---------- shared primitives ------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 999; padding: 12px 22px; background: var(--zav-night); color: var(--zav-limestone); font-weight: 600; text-decoration: none; border-radius: 0 0 var(--radius) var(--radius); transition: transform .18s ease; } .skip-link:focus-visible { transform: translate(-50%, 0); } /* One visible focus treatment everywhere, including over video. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--zav-brass); outline-offset: 3px; border-radius: var(--radius); } .btn { display: inline-block; cursor: pointer; font-family: var(--font-body); font-size: .95rem; font-weight: 600; padding: 14px 28px; border: 1px solid transparent; border-radius: 999px; text-decoration: none; transition: transform .18s ease, background-color .18s ease; } .btn--primary { background: var(--zav-night); color: var(--zav-limestone); } .btn--primary:hover { background: #16324b; transform: translateY(-1px); } .btn:disabled { opacity: .55; cursor: progress; transform: none; } /* ---------- persistent demo disclosure ---------------------------------- */ .demo-chip { position: fixed; z-index: 70; margin: 0; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); padding: 7px 16px; font-size: .72rem; font-weight: 500; letter-spacing: .04em; color: var(--zav-limestone); background: color-mix(in srgb, var(--zav-night) 82%, transparent); backdrop-filter: blur(8px); border-radius: 999px; pointer-events: none; } .demo-chip span { color: var(--zav-coral); margin-right: 6px; } @media (max-width: 860px) { .demo-chip { font-size: .66rem; padding: 6px 12px; } } /* ---------- engine chrome restyling ------------------------------------- */ .sw-root .sw-brand__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } .sw-root .sw-copy__eyebrow { font-family: var(--font-body); letter-spacing: .2em; } .sw-root .sw-copy__title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; /* Titles sit over bright pool and beach frames — keep the shadow generous. */ text-shadow: 0 2px 28px color-mix(in srgb, var(--zav-night) 55%, transparent), 0 1px 3px color-mix(in srgb, var(--zav-night) 30%, transparent); } .sw-root .sw-copy__body { text-shadow: 0 1px 16px color-mix(in srgb, var(--zav-night) 40%, transparent); } .sw-root .sw-topcta { font-family: var(--font-body); font-weight: 600; font-size: .85rem; text-decoration: none; padding: 11px 22px; border-radius: 999px; background: var(--zav-night); color: var(--zav-limestone); } /* The engine's own nav collapses on phones; our