/* ============================================================ navbar.css — Global site navigation Crêpe de la Crêpe ============================================================ Consumed by navbar.js (auto-injected) + linked in every page's via: ============================================================ */ /* ── Design tokens ── */ :root { --nav-h: 80px; --nav-px: clamp(28px, 5vw, 80px); --nav-gap: clamp(20px, 3vw, 44px); --nav-font: 'League Spartan', 'Manrope', sans-serif; --nav-fs: clamp(10.5px, 0.85vw, 12.5px); --nav-fw: 800; --nav-ls: 0.17em; /* colours */ --nav-text: rgba(255, 252, 247, 0.91); /* warm off-white (mobile) */ --nav-active: #d4a844; /* gold / ochre */ --nav-cta-bg: #fffaf7; /* cream white */ --nav-cta-text: #c98376; /* flamingo / rosa */ --nav-cta-bdr: rgba(233, 200, 192, 0.60); } /* ── Base ── */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.35s ease, transform 0.35s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease; /* entrance animation — mobile only; cancelled at desktop breakpoint */ opacity: 0; transform: translateY(-8px); animation: siteNavReveal 0.65s ease-out 0.1s forwards; } @keyframes siteNavReveal { to { opacity: 1; transform: translateY(0); } } /* Scrolled state — subtle dark frosted glass (mobile) */ .site-nav.is-scrolled { background: rgba(26, 14, 10, 0.80); backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25); box-shadow: 0 2px 48px rgba(0, 0, 0, 0.24); } /* ── Inner container ── */ .site-nav__inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); padding: 0 var(--nav-px); } /* ── Nav groups (left / right) ── */ .site-nav__left, .site-nav__right { display: flex; align-items: center; gap: var(--nav-gap); z-index: 1; /* sit above the abs-pos logo layer */ } /* The text-link sub-group inside .site-nav__right */ .site-nav__right-links { display: flex; align-items: center; gap: var(--nav-gap); } /* ── Nav links ── */ .site-nav__link { font-family: var(--nav-font); font-size: var(--nav-fs); font-weight: var(--nav-fw); letter-spacing: var(--nav-ls); text-transform: uppercase; color: var(--nav-text); text-decoration: none; white-space: nowrap; line-height: 1; transition: color 0.22s ease, text-shadow 0.4s ease, opacity 0.22s ease; } .site-nav__link:hover, .site-nav__link.is-active { color: var(--nav-active); } /* ── Logo — true viewport centre via absolute positioning ── */ .site-nav__logo { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; text-decoration: none; z-index: 2; transition: opacity 0.22s ease, transform 0.3s ease; } .site-nav__logo:hover { opacity: 0.82; transform: translateX(-50%) scale(1.06); } .site-nav__logo img { width: 56px; height: 56px; border-radius: 50%; object-fit: contain; display: block; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.22)); transition: filter 0.45s ease; } .site-nav.is-scrolled .site-nav__logo img { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.30)); } /* ── CTA — "Book oss" pill (in-navbar, mobile) ── */ .site-nav__cta { font-family: var(--nav-font); font-size: clamp(9.5px, 0.78vw, 11.5px); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nav-cta-text); background: var(--nav-cta-bg); border: 1.5px solid var(--nav-cta-bdr); border-radius: 999px; padding: 10px 26px; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; line-height: 1; box-shadow: 0 4px 18px rgba(201, 131, 118, 0.20); transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; } .site-nav__cta:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 7px 26px rgba(201, 131, 118, 0.28); } /* ── Floating CTA — always visible on desktop ── */ .site-nav__floating-cta { display: none; /* hidden by default; enabled in desktop block below */ position: fixed; top: 20px; right: 30px; z-index: 1001; font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #FAF7F2; background: #c98376; border: none; border-radius: 50px; padding: 0.55rem 1.6rem; text-decoration: none; white-space: nowrap; line-height: 1; box-shadow: 0 2px 12px rgba(159, 100, 91, 0.3); transition: background 0.2s ease, box-shadow 0.2s ease; } .site-nav__floating-cta:hover { background: #9f645b; color: #FAF7F2; box-shadow: 0 4px 18px rgba(159, 100, 91, 0.4); } /* ── Mobile hamburger button ── */ .site-nav__toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.28); border-radius: 10px; cursor: pointer; padding: 0; z-index: 2; transition: border-color 0.3s ease, background 0.3s ease; } .site-nav__toggle:hover { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.07); } .site-nav__bar { display: block; width: 20px; height: 2px; background: var(--nav-text); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } /* Hamburger → X */ .site-nav__toggle[aria-expanded="true"] .site-nav__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-nav__toggle[aria-expanded="true"] .site-nav__bar:nth-child(2) { opacity: 0; } .site-nav__toggle[aria-expanded="true"] .site-nav__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile dropdown drawer ── */ .site-nav__mobile { display: none; flex-direction: column; padding: 20px 24px 28px; background: rgba(26, 14, 10, 0.97); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); border-top: 1px solid rgba(255, 255, 255, 0.07); gap: 0; } .site-nav__mobile.is-open { display: flex; } .site-nav__mobile .site-nav__link { font-size: 13.5px; letter-spacing: 0.22em; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); display: block; } .site-nav__mobile-cta { font-family: var(--nav-font); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nav-cta-text); background: var(--nav-cta-bg); border: 1.5px solid var(--nav-cta-bdr); border-radius: 999px; padding: 14px 28px; text-decoration: none; text-align: center; display: block; margin-top: 18px; transition: opacity 0.2s ease; } .site-nav__mobile-cta:hover { opacity: 0.88; } /* ══════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════ */ /* Tight desktop — slightly reduce gap */ @media (max-width: 1140px) { :root { --nav-gap: clamp(14px, 2vw, 28px); --nav-px: clamp(20px, 3.5vw, 52px); } } /* Tablet / small desktop — collapse to hamburger */ @media (max-width: 860px) { .site-nav__left, .site-nav__right { display: none; } .site-nav__toggle { display: inline-flex; } .site-nav__inner { padding: 0 20px; } .site-nav__logo img { width: 46px; height: 46px; } } /* Print */ @media print { .site-nav { display: none; } .site-nav__floating-cta { display: none; } } /* ══════════════════════════════════════════ DESKTOP NAVBAR BEHAVIOUR (min-width: 861px) ══════════════════════════════════════════ */ @media (min-width: 861px) { /* Cancel mobile entrance animation — desktop states are set directly */ .site-nav { animation: none; opacity: 1; transform: translateY(0); } /* Hide in-navbar CTA on desktop — replaced by the floating CTA */ .site-nav__cta { display: none; } /* Show floating CTA on desktop */ .site-nav__floating-cta { display: inline-flex; align-items: center; } /* ── Desktop nav link base ── */ .site-nav__left .site-nav__link, .site-nav__right-links .site-nav__link { font-family: 'Manrope', sans-serif; text-transform: uppercase; font-weight: 700; letter-spacing: 0.12em; font-size: 0.85rem; transition: color 0.22s ease, text-shadow 0.4s ease, opacity 0.22s ease; } /* ════════════════════════════ HOME PAGE (body.page-home) ════════════════════════════ */ /* State 1 — at top: solid cream background, charcoal text */ .page-home .site-nav { background: #FAF7F2; border-bottom: 1px solid rgba(44, 32, 22, 0.08); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; transform: translateY(0); } .page-home .site-nav .site-nav__left .site-nav__link, .page-home .site-nav .site-nav__right-links .site-nav__link { color: #2C2016; text-shadow: none; opacity: 1; } .page-home .site-nav .site-nav__link:hover { color: #2C2016; opacity: 0.55; } .page-home .site-nav .site-nav__link.is-active { color: #2C2016; opacity: 0.55; } /* State 2 — scrolled: transparent background, text-shadow for readability */ .page-home .site-nav.is-scrolled { background: transparent; border-bottom: 1px solid transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .page-home .site-nav.is-scrolled .site-nav__left .site-nav__link, .page-home .site-nav.is-scrolled .site-nav__right-links .site-nav__link { color: #2C2016; text-shadow: 0 1px 8px rgba(255, 252, 247, 0.9), 0 0 20px rgba(255, 252, 247, 0.6); opacity: 1; } /* Logo on home */ .page-home .site-nav .site-nav__logo img { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.25)); } /* ══════════════════════════════════ INNER PAGES (body.page-inner) ══════════════════════════════════ */ /* State 1 — hidden at top */ .page-inner .site-nav { opacity: 0; transform: translateY(-100%); pointer-events: none; background: transparent; border-bottom: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* State 2 — visible on scroll: slide in with cream background */ .page-inner .site-nav.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; background: #FAF7F2; border-bottom: none; box-shadow: 0 2px 8px rgba(44, 32, 22, 0.06); } /* Link colours for inner pages (both hidden and visible states) */ .page-inner .site-nav .site-nav__left .site-nav__link, .page-inner .site-nav .site-nav__right-links .site-nav__link { color: #2C2016; text-shadow: none; opacity: 1; } .page-inner .site-nav .site-nav__link:hover { color: #2C2016; opacity: 0.55; } .page-inner .site-nav .site-nav__link.is-active { color: #2C2016; opacity: 0.55; } /* Logo on inner pages */ .page-inner .site-nav .site-nav__logo img { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.25)); } }