/* header — section styles (loaded from by build.py) */ /* The bar of the redesign is meant to sit in the flow of the page and stick; this one is still fixed, because inside the Tilda record wrappers a sticky element would come unstuck the moment its own wrapper scrolled away. Same picture, one consequence: it takes up no room, so the page reserves its height once, here, instead of every section leaving a gap of its own. */ :root { --vp-header-h: 76px; } #allrecords { padding-top: var(--vp-header-h); } #vp-header, #vp-header * { box-sizing:border-box; } #vp-header { position:fixed; z-index:80; inset:0 0 auto; background:color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--color-divider); color:var(--color-text); font-family:var(--font-body); } #vp-header .vp-header__inner { width:var(--vp-page); min-height:var(--vp-header-h); margin:auto; display:flex; align-items:center; gap:32px; } /* ----------------------------------------------------------------- brand -- */ #vp-header .vp-header__brand { display:flex; align-items:center; gap:12px; color:var(--color-text); text-decoration:none; white-space:nowrap; } #vp-header .vp-header__brand img { width:40px; height:34px; display:block; object-fit:contain; object-position:left center; } #vp-header .vp-header__wordmark { display:flex; flex-direction:column; line-height:1; } #vp-header .vp-header__name { font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:20px; letter-spacing:-.02em; } #vp-header .vp-header__city { margin-top:4px; color:var(--color-accent-700); font-size:9px; font-weight:700; letter-spacing:.22em; } /* ------------------------------------------------------------------- nav -- */ #vp-header nav { display:flex; align-items:center; gap:26px; margin-right:auto; } #vp-header nav a { color:var(--color-text); text-decoration:none; font-size:14px; font-weight:600; transition:color .18s ease; } #vp-header nav a:hover, #vp-header nav a.is-current { color:var(--color-accent-700); font-weight:700; } /* Two of the six targets are for the open menu of a phone: the desktop bar stays at four so the brand and the button keep their room. */ #vp-header .vp-header__nav-wide, #vp-header .vp-header__nav-book, #vp-header .vp-header__card { display:none; } /* -------------------------------------------------------- language, book -- */ #vp-header .vp-lang { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--color-divider); border-radius:999px; } #vp-header .vp-lang__item { min-width:38px; height:28px; padding:0 8px; border:0; border-radius:999px; background:transparent; color:color-mix(in srgb, var(--color-text) 60%, transparent); font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.06em; cursor:pointer; transition:background .18s ease, color .18s ease; } #vp-header .vp-lang__item:hover { color:var(--color-text); } #vp-header .vp-lang__item.is-active { background:var(--color-accent); color:var(--color-bg); } #vp-header .vp-header__book { padding:12px 24px; font-size:15px; } /* ---------------------------------------------------------------- toggle -- */ #vp-header .vp-toggle { display:none; width:44px; height:44px; border:1px solid var(--color-divider); border-radius:50%; background:transparent; color:var(--color-text); cursor:pointer; } #vp-header .vp-toggle span, #vp-header .vp-toggle:before, #vp-header .vp-toggle:after { content:""; display:block; width:16px; height:1.5px; margin:auto; background:currentColor; transition:transform .2s ease, opacity .2s ease; } #vp-header .vp-toggle:before { transform:translateY(-5px); } #vp-header .vp-toggle:after { transform:translateY(5px); } #vp-header.vp-open .vp-toggle { border-color:var(--color-accent); background:var(--color-accent); color:var(--color-bg); } #vp-header.vp-open .vp-toggle span { opacity:0; } #vp-header.vp-open .vp-toggle:before { transform:translateY(1px) rotate(45deg); } #vp-header.vp-open .vp-toggle:after { transform:translateY(-1px) rotate(-45deg); } /* --------------------------------------------------------------- a phone -- */ @media (max-width:780px) { :root { --vp-header-h: 64px; } /* The bar itself: brand, language, menu — and nothing else, because at 360px anything more is either cramped or too small to hit. Booking lives in the menu and in the sticky bar at the foot of the screen. */ #vp-header .vp-header__inner { width:100%; gap:10px; padding:0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); } #vp-header .vp-header__brand { flex:0 1 auto; min-width:0; } #vp-header .vp-header__brand img { width:32px; height:28px; } #vp-header .vp-header__name { font-size:17px; } #vp-header .vp-header__city { display:none; } #vp-header .vp-header__book { display:none; } #vp-header .vp-lang { margin-left:auto; flex:0 0 auto; } #vp-header .vp-lang__item { min-width:34px; height:26px; } #vp-header .vp-toggle { display:block; flex:0 0 auto; } /* The menu: one target per row, each of them thumb-height. */ #vp-header nav { position:absolute; top:100%; right:0; left:0; z-index:-1; display:flex; flex-direction:column; align-items:stretch; gap:0; margin:0; max-height:calc(100svh - var(--vp-header-h)); overflow-y:auto; overscroll-behavior:contain; padding:4px max(18px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background:var(--color-bg); border-bottom:1px solid var(--color-divider); box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(-10px); transition:.22s ease; } #vp-header.vp-open nav { opacity:1; visibility:visible; transform:none; } #vp-header nav a { min-height:60px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--color-divider); font-size:16px; font-weight:600; } #vp-header nav a:after { content:"\203A"; color:var(--color-accent-700); font-size:22px; font-weight:700; } #vp-header nav a:active { color:var(--color-accent-700); } #vp-header .vp-header__nav-wide { display:flex; } /* The nav rule above sets the ink of every link in the menu, so the one that is a filled button has to name its own. */ #vp-header .vp-header__nav-book { min-height:56px; margin-top:20px; padding:0 20px; display:flex; justify-content:center; border-bottom:0; color:var(--color-bg); font-size:16px; } #vp-header .vp-header__nav-book:after { content:none; } #vp-header .vp-header__card { display:flex; flex-direction:column; gap:4px; margin-top:18px; padding:18px 20px; border-radius:var(--radius-md); background:var(--color-surface); } #vp-header .vp-header__card .vp-label { margin:0; } #vp-header .vp-header__card b { font-size:15px; font-weight:600; line-height:1.45; } #vp-header .vp-header__card span:last-child { color:color-mix(in srgb, var(--color-text) 62%, transparent); font-size:13px; } /* The bar steps out of the way as the guest reads down the page, and comes back the moment they scroll up looking for it (assets/js/sections/header.js). */ #vp-header { transition:transform .25s ease; } #vp-header.is-tucked { transform:translateY(-100%); } } @media (max-width:780px) and (prefers-reduced-motion:reduce) { #vp-header.is-tucked { transform:none; } } /* ------------------------------------------- the sticky bar of a phone -- */ /* Booking is the one thing a guest came here to do, and on a phone it is never more than a thumb away. It appears once the cover is behind them and hides itself whenever an overlay is open (html.vp-locked, mobile.css). */ #vp-mobile-bar { display:none; } @media (max-width:780px) { #vp-mobile-bar { position:fixed; z-index:70; inset:auto 0 0; display:flex; align-items:center; gap:12px; padding:12px max(16px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background:color-mix(in srgb, var(--color-bg) 94%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--color-divider); color:var(--color-text); font-family:var(--font-body); opacity:0; visibility:hidden; transform:translateY(100%); transition:.25s ease; } #vp-mobile-bar.is-visible { opacity:1; visibility:visible; transform:none; } #vp-mobile-bar .vp-mobile-bar__text { min-width:0; display:flex; flex-direction:column; gap:2px; } #vp-mobile-bar .vp-mobile-bar__text b { font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #vp-mobile-bar .vp-mobile-bar__note { color:color-mix(in srgb, var(--color-text) 58%, transparent); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #vp-mobile-bar .vp-mobile-bar__book { min-height:50px; padding:0 26px; flex:0 0 auto; margin-left:auto; } } @media (max-width:340px) { #vp-mobile-bar .vp-mobile-bar__note { display:none; } #vp-mobile-bar .vp-mobile-bar__book { padding:0 18px; } }