/* ========================================================================= Sahara Dune Camp — Fixed-position navigation Mounted at the top of via wp_body_open hook so it sits above all page content regardless of page template. Starts transparent (cream text over the hero photo); nav.js adds .is-scrolled once you cross 40 px, which flips the bg to translucent cream + blur and the text to ink. ========================================================================= */ .sdc-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 22px 0; background: transparent; border-bottom: 1px solid transparent; color: var(--sdc-cream); transition: padding 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, backdrop-filter 0.3s ease; } .sdc-nav.is-scrolled { padding: 14px 0; background: rgba(250, 246, 236, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--sdc-line); color: var(--sdc-ink); } .sdc-nav__inner { max-width: var(--sdc-container-max); margin: 0 auto; padding: 0 var(--sdc-container-pad); display: flex; align-items: center; justify-content: space-between; gap: 30px; } /* --- Brand block (logo + name + tagline) --- */ .sdc-nav__brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; } .sdc-nav__brand-svg { width: 34px; height: 34px; flex-shrink: 0; } .sdc-nav__brand-text { display: flex; flex-direction: column; line-height: 1; } .sdc-nav__brand-name { font-family: var(--sdc-serif); font-size: 20px; font-weight: 400; letter-spacing: 0.02em; } .sdc-nav__brand-tag { font-family: var(--sdc-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.7; margin-top: 3px; } /* --- Menu items --- */ .sdc-nav__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; color: inherit; } .sdc-nav__links li, .sdc-nav__links .menu-item { font-size: 13px; letter-spacing: 0.04em; list-style: none; } .sdc-nav__links a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-bottom-color 0.2s ease; } .sdc-nav__links a:hover { border-bottom-color: currentColor; } /* --- Reserve CTA on the right --- */ .sdc-nav__cta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid currentColor; color: inherit; background: transparent; font-family: var(--sdc-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; white-space: nowrap; } .sdc-nav:not(.is-scrolled) .sdc-nav__cta:hover { background: var(--sdc-cream); color: var(--sdc-ink); border-color: var(--sdc-cream); } .sdc-nav.is-scrolled .sdc-nav__cta:hover { background: var(--sdc-ink); color: var(--sdc-cream); border-color: var(--sdc-ink); } .sdc-nav__cta svg { flex-shrink: 0; } /* --- Responsive: hide the middle menu on narrow viewports. The brand and Reserve button stay visible so users can still book. A hamburger drawer is a follow-up; design didn't ship one. --- */ @media (max-width: 900px) { .sdc-nav__links { display: none; } } @media (max-width: 480px) { .sdc-nav__brand-tag { display: none; } .sdc-nav__brand-name { font-size: 17px; } }