/* Ported verbatim from visitrotterdam.com static/assets/css/components.css (no site-specific strings in the original; ".vr-dock" etc. renamed to ".vd-dock" for Visit Doha). */ /* ============================================================= Third-party Voute global ticker widget (voute-ticker.js, loaded from voutedigital.com, shared across the Voute Digital portfolio). Its own injected styles pad the controls to 0, which crams the region dropdown and buttons against the bar's edges. Cannot edit the shared script from this site, so override visually here instead: safe, standard practice for third-party widget styling. ============================================================= */ .vgt-controls { padding: 6px 10px !important; gap: 8px !important; } /* ============================================================= Cookie consent bar. Direct child of , closed before any other markup, never wraps the dock/pill/header, so hiding it with display:none can never take other fixed elements down with it. See CLAUDE.md "cookie-bar structuur altijd controleren". ============================================================= */ .cookie-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cookie-bar); flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; padding: 18px clamp(18px, 4vw, 40px); background: var(--ink); color: rgba(255, 255, 255, 0.88); box-shadow: 0 -8px 30px rgba(22, 49, 63, 0.22); } .cookie-bar-text { font-size: 13.5px; line-height: 1.6; max-width: 640px; margin: 0; } .cookie-bar-text a { color: #fff; text-decoration: underline; } .cookie-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; } .cookie-bar-actions button { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.03em; padding: 10px 20px; border-radius: var(--radius-xs); cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; color: #fff; transition: background-color 0.18s ease, border-color 0.18s ease; } #cookieAccept { background: var(--accent-600); border-color: var(--accent-600); } #cookieAccept:hover, #cookieAccept:focus-visible { background: var(--accent-700); border-color: var(--accent-700); } #cookieDecline:hover, #cookieDecline:focus-visible { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); } /* ===== STAY / BOOKING CTA BAR (prominent hotel-booking CTA, all pages) ===== */ .stay-cta-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; background: var(--ink); border-top: 1px solid var(--accent-600); padding: 20px clamp(18px, 4vw, 52px); text-align: center; } .stay-cta-bar-icon { color: var(--accent-500); width: 20px; height: 20px; flex-shrink: 0; } .stay-cta-bar-text { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.88); } .stay-cta-bar-text strong { color: #fff; font-family: var(--font-serif); font-weight: 400; font-size: 15.5px; letter-spacing: 0.02em; } .stay-cta-bar-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-600); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 26px; border-radius: var(--radius-xs); text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, transform 0.2s ease; } .stay-cta-bar-btn:hover, .stay-cta-bar-btn:focus-visible { background: var(--accent-700); transform: translateY(-2px); } /* ===== HEADER ===== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(18px, 4vw, 52px); height: var(--nav-height); background: rgba(251, 250, 248, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .site-logo { text-decoration: none; display: flex; flex-direction: column; line-height: 1; gap: 3px; } .site-logo-top { font-family: var(--font-serif); font-size: 19px; letter-spacing: 0.18em; color: var(--ink); } .site-logo-bot { font-size: 9.5px; letter-spacing: 0.42em; color: var(--stone); text-transform: uppercase; } .header-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); } .header-nav a { font-size: 14px; letter-spacing: 0.02em; text-decoration: none; color: var(--ink2); transition: color 0.18s ease; } .header-nav a:hover, .header-nav a:focus-visible { color: var(--accent-600); } .nav-dropdown { position: relative; } .nav-dropdown-toggle { font: inherit; background: none; border: none; padding: 0; margin: 0; cursor: pointer; } .header-nav .nav-dropdown-toggle { font-size: 14px; letter-spacing: 0.02em; color: var(--ink2); display: inline-flex; align-items: center; gap: 5px; transition: color 0.18s ease; } .header-nav .nav-dropdown-toggle::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.18s ease; } .header-nav .nav-dropdown-toggle:hover, .header-nav .nav-dropdown-toggle:focus-visible, .header-nav .nav-dropdown.is-open .nav-dropdown-toggle { color: var(--accent-600); } .header-nav .nav-dropdown.is-open .nav-dropdown-toggle::after { transform: rotate(225deg) translateY(2px); } .vd-dock .nav-dropdown { flex: 1 1 0; min-width: 0; display: flex; } .vd-dock .nav-dropdown-toggle { flex: 1 1 0; min-width: 0; } .vd-dock .nav-dropdown.is-open .nav-dropdown-toggle { color: var(--ink); background: rgba(22, 49, 63, 0.05); } .nav-dropdown-panel { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 200px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-md); padding: 10px; display: flex; flex-direction: column; gap: 2px; z-index: 40; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; } .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel, .nav-dropdown.is-open .nav-dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Invisible hover bridge: keeps the pointer within .nav-dropdown's hover chain while crossing the visual gap between the toggle and the panel, so the panel does not close mid-transit before the cursor reaches it. */ .header-nav .nav-dropdown-panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; visibility: visible; pointer-events: auto; } .nav-dropdown-panel a { font-size: 13.5px; color: var(--ink2); text-decoration: none; padding: 8px 12px; border-radius: 6px; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .nav-dropdown-panel a:hover, .nav-dropdown-panel a:focus-visible { background: var(--sand, rgba(0, 0, 0, 0.04)); color: var(--accent-600); } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 30px; border-radius: var(--radius-xs); font-size: 14px; letter-spacing: 0.04em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .btn-primary { background: var(--accent-600); color: #fff; } .btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-700); } .btn-outline { border-color: var(--ink); color: var(--ink); } .btn-outline:hover, .btn-outline:focus-visible { background: var(--ink); color: #fff; } .btn-outline-light { border-color: rgba(255, 255, 255, 0.7); color: #fff; } .btn-outline-light:hover, .btn-outline-light:focus-visible { background: #fff; color: var(--ink); } @media (max-width: 640px) { .btn { padding: 12px 20px; } } /* ============================================================= Mobile navigation: top dock + floating sections pill. Direct children of . Never nest inside a cookie bar, modal or overlay wrapper: hiding that wrapper with display:none would take the whole nav down with it. Do NOT put overflow-x:hidden on html or body, see base.css. ============================================================= */ .vd-dock, .vd-pill, .vd-panel { display: none; } @media (max-width: 1024px) { .site-header .header-nav { display: none; } main { overflow-x: hidden; } body { padding-top: max(72px, calc(62px + env(safe-area-inset-top))); } /* --- top dock (Ibiza pattern: fixed TOP, not bottom) --- */ .vd-dock { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-dock); display: flex; justify-content: space-around; align-items: stretch; gap: 2px; padding: max(6px, env(safe-area-inset-top)) 4px 6px; background: rgba(251, 250, 248, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); } .vd-dock__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 4px; border-radius: var(--radius-2xl); color: var(--stone); text-decoration: none; transition: color 0.16s ease, background-color 0.16s ease; } .vd-dock__item svg { width: 22px; height: 22px; flex: none; stroke-width: 1.75; } .vd-dock__item span { font-size: 9.5px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vd-dock__item--active, .vd-dock__item:hover, .vd-dock__item:focus-visible { color: var(--ink); background: rgba(22, 49, 63, 0.05); } .vd-dock .nav-dropdown-panel { position: fixed; top: max(78px, calc(68px + env(safe-area-inset-top))); left: 12px; right: 12px; width: auto; min-width: 0; max-height: 65vh; overflow-y: auto; transform: translateY(-8px); } .vd-dock .nav-dropdown:hover .nav-dropdown-panel, .vd-dock .nav-dropdown:focus-within .nav-dropdown-panel, .vd-dock .nav-dropdown.is-open .nav-dropdown-panel { transform: translateY(0); } /* --- floating language/sections pill --- */ .vd-pill { position: fixed; top: calc(86px + env(safe-area-inset-top)); right: 12px; z-index: var(--z-lang-pill); display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-pill); background: rgba(251, 250, 248, 0.9); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 500; color: var(--ink); } } /* ===== BACK TO TOP ===== */ .back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-back-top); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; border: none; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); box-shadow: var(--shadow-md); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background-color 0.18s ease; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover, .back-to-top:focus-visible { background: var(--accent-600); } .back-to-top svg { width: 20px; height: 20px; } @media (max-width: 1024px) { .back-to-top { bottom: calc(20px + env(safe-area-inset-bottom)); } } .moments-lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);background:rgba(10,14,18,0.92);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);} .moments-lightbox[hidden]{display:none;} .moments-lightbox__close,.moments-lightbox__prev,.moments-lightbox__next{position:absolute;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.12);color:#fff;border:none;border-radius:50%;font-size:28px;line-height:1;cursor:pointer;} .moments-lightbox__close{top:16px;right:16px;} .moments-lightbox__prev{left:16px;top:50%;transform:translateY(-50%);} .moments-lightbox__next{right:16px;top:50%;transform:translateY(-50%);} .moments-lightbox__close:hover,.moments-lightbox__prev:hover,.moments-lightbox__next:hover{background:rgba(255,255,255,0.24);} .moments-lightbox__close[hidden],.moments-lightbox__prev[hidden],.moments-lightbox__next[hidden]{display:none;} .moments-lightbox__figure{margin:0;max-width:min(90vw,900px);max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:12px;} .moments-lightbox__img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:var(--radius-xl,8px);} .moments-lightbox__img-fallback{color:#fff;font-size:14px;} .moments-lightbox__caption{max-width:60ch;text-align:center;color:#fff;} .moments-lightbox__name{display:block;font-weight:600;font-size:14px;margin:0 0 4px;} .moments-lightbox__caption .moments-card-caption{margin:0;color:rgba(255,255,255,0.85);font-size:14px;line-height:1.5;} .moments-lightbox__caption .moments-card-caption a{color:#fff;text-decoration:underline;text-underline-offset:2px;} .moments-lightbox__counter{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.8);font-size:13px;margin:0;} @media(max-width:520px){.moments-lightbox__prev,.moments-lightbox__next{font-size:22px;}}