/* Site navigation — shared by the front page (index.html, via hero-preview.html) and /trip. A slim, full-width light-glass bar fixed to the top: small uppercase links, RSVP at the right (Kaylee's reference, 2026-09-04). Identity values are copied, never imported. iOS backdrop-filter rules (save-the-date/CLAUDE.md): the bar itself carries the blur and has NO clip-path; it is a direct child of , so no ancestor carries a filter. The phone row scrolls sideways; the right-edge fade is a plain gradient pseudo-element on the bar (no mask, no filter). */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; padding-top: env(safe-area-inset-top); background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(246,240,252,0.62)); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid rgba(255,255,255,0.55); box-shadow: 0 1px 0 rgba(36,26,46,0.06), 0 12px 30px -18px rgba(16,9,28,0.35); font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; } .site-nav ul { list-style: none; margin: 0 auto; padding: 0 clamp(14px, 4vw, 28px); max-width: 1080px; height: 46px; display: flex; align-items: center; gap: clamp(16px, 2.6vw, 30px); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .site-nav ul::-webkit-scrollbar { display: none; } .site-nav li { flex: 0 0 auto; } .site-nav li.rsvp { margin-left: auto; } .site-nav a { display: inline-block; padding: 6px 0 5px; text-decoration: none; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(36,26,46,0.78); white-space: nowrap; border-bottom: 1.5px solid transparent; transition: color .18s ease, border-color .18s ease; } .site-nav a:hover { color: #241a2e; } .site-nav a[aria-current="page"] { color: #241a2e; border-bottom-color: #cbb1ec; } .site-nav a:focus-visible { outline: 2px solid #6f52a8; outline-offset: 3px; border-radius: 2px; } .site-nav li.rsvp a { color: #8b3f8e; } .site-nav li.rsvp a::after { content: "\00a0\2192"; } .site-nav li.rsvp a[aria-current="page"] { border-bottom-color: #b45fa8; } /* phones: the six links wrap onto two centred rows, so nothing is ever cut off (Kaylee) */ @media (max-width: 640px) { .site-nav ul { height: auto; flex-wrap: wrap; justify-content: center; row-gap: 0; column-gap: 18px; padding: 7px 14px 6px; overflow: visible; } .site-nav li.rsvp { margin-left: 0; } .site-nav a { font-size: 12px; letter-spacing: .14em; padding: 7px 0 6px; } } @media (prefers-reduced-motion: reduce) { .site-nav a { transition: none; } }