/* ===================================================================== TOKENS ===================================================================== */ :root { /* Dark surfaces: refined charcoal, matches Ennios's brand primary (#333) but a hair deeper for typographic contrast on screen. */ --ink: #2A2A2A; --ink-soft: #3A3A3A; --ink-bevel: #4A4A4A; /* Light surfaces: clean white with one subtle off-white step. */ --paper: #FFFFFF; --paper-alt: #F6F4F0; --rule: #E6E3DE; /* Body text */ --text: #2A2A2A; --text-soft: #6B6B6B; /* Cream: used for body copy on dark surfaces (so it doesn't shout). */ --cream: #F2EEE6; --cream-soft: #E8E4DA; /* Gold: the single accent, used sparingly and only on dark surfaces. */ --gold: #C9A063; --gold-soft: #A88450; --gold-glow: rgba(201, 160, 99, .38); /* Kept defined but no longer applied (left here so the token can be reintroduced for a seasonal palette without re-plumbing the file. */ --maroon: #5E120B; --forest: #0C3D1C; --display: 'belda-normal', 'Times New Roman', 'Georgia', serif; --display-cond: 'belda-condensed', 'belda-normal', serif; --body: 'General Sans', -apple-system, system-ui, 'Segoe UI', sans-serif; --sidebar-w: 320px; --maxw: 1280px; --ease: cubic-bezier(.22, .61, .36, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } html { /* Deliberately NO global `scroll-behavior: smooth`. On a physical mouse wheel it animates every single wheel notch, so each click "snaps" to its destination instead of scrolling continuously — reads as steppy/clunky on a wheel mouse (trackpads mask it). Native wheel scrolling is the responsive default and what people expect. In-page anchor jumps are smoothed in JS for the specific links that benefit (see app.js), so "jump to section" still glides without hijacking the wheel. */ scroll-padding-top: 24px; /* Clip any off-canvas content (booking panels, slide-out drawers, marquee tracks) so it can't push the document wider than the viewport. `clip` is the modern equivalent of `hidden` that does NOT establish a new scrolling context, so position:sticky on the hero and the scroll-stack pattern keep working. Without this, the SevenRooms booking panel sitting at translateX(100%) was adding ~390px to body scrollWidth on mobile and breaking every viewport-relative calculation (sidebar fixed positioning, bottom-nav width, hero sticky thresholds, the home-feature image alignment, etc.). */ overflow-x: clip; } body { overscroll-behavior-y: contain; overflow-x: clip; } body { font-family: var(--body); font-weight: 400; font-size: 14.5px; line-height: 1.55; color: var(--text); background: var(--paper); font-feature-settings: 'ss01' 1, 'ss02' 1, 'cv11' 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* ===================================================================== LENIS smooth-scroll support classes (added by the library on ). Deliberately NO `.lenis.lenis-smooth iframe { pointer-events: none }` rule — the stock Lenis CSS ships it, but it would disable clicks inside the SevenRooms booking iframe, which the live PPC depends on. We pause Lenis when the booking panel opens anyway, so we don't need it. [data-lenis-prevent] marks any inner scroller (e.g. the booking iframe wrap) that should keep its own native scroll. ===================================================================== */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ===================================================================== SHARED PRIMITIVES ===================================================================== */ .eyebrow { font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .eyebrow.dark { color: var(--text-soft); letter-spacing: .28em; } .stars { letter-spacing: .35em; color: var(--gold); font-size: 14px; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; color: inherit; letter-spacing: -0.012em; line-height: 1.05; /* Balance heading line lengths so styled fragments (e.g. an italic gold at the end of an H2) don't end up alone on their own line. Native CSS — silently no-op on older browsers, takes effect in Chrome, Edge, Safari, Firefox 121+. */ text-wrap: balance; } h1 { font-weight: 300; } h3, h4 { font-weight: 500; letter-spacing: -0.005em; } .display-1 { font-size: clamp(40px, 6.2vw, 88px); } .display-2 { font-size: clamp(32px, 4.4vw, 60px); } .display-3 { font-size: clamp(24px, 2.4vw, 34px); } em.script, .script, h1 em, h2 em, h3 em { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--gold); } .lede { font-size: clamp(14.5px, 1.02vw, 17px); line-height: 1.65; color: var(--text-soft); font-weight: 400; max-width: 50ch; } .btn { display: inline-flex; align-items: center; gap: 14px; padding: 16px 30px; border: 1px solid var(--gold); color: var(--cream); font-family: var(--body); font-weight: 500; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; background: transparent; transition: background .28s var(--ease), color .28s var(--ease), letter-spacing .28s var(--ease); } .btn:hover { background: var(--gold); color: var(--ink); letter-spacing: .26em; } .btn.solid { background: var(--gold); color: var(--ink); } .btn.solid:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); } .btn.ghost { color: var(--text); border-color: var(--ink); } .btn.ghost:hover { background: var(--ink); color: var(--cream); } /* Default .btn text color is cream — fine on dark backgrounds (hero, cta-arch, reservation strip, crabby, home-heritage-strip), invisible on light/paper backgrounds. The selectors below override the outline (non-solid) .btn to use dark text + dark border in every light-background container, so the text is readable. .btn.solid (gold background + ink text) always reads either way and is left alone. */ .welcome .btn:not(.solid), .home-feature .btn:not(.solid), .story-copy .btn:not(.solid), .heritage-timeline .btn:not(.solid), .timeline-event .btn:not(.solid), .timeline-event__cta .btn:not(.solid), .old-town-strip .btn:not(.solid), .experience-grid .btn:not(.solid), .experience-tile .btn:not(.solid), .group-bookings .btn:not(.solid), .group-tile .btn:not(.solid), .contact-info .btn:not(.solid), .offer-card .btn:not(.solid), .offers-foot .btn:not(.solid), .menu-panel .btn:not(.solid) { color: var(--ink); border-color: var(--ink); } .welcome .btn:not(.solid):hover, .home-feature .btn:not(.solid):hover, .story-copy .btn:not(.solid):hover, .heritage-timeline .btn:not(.solid):hover, .timeline-event .btn:not(.solid):hover, .timeline-event__cta .btn:not(.solid):hover, .old-town-strip .btn:not(.solid):hover, .experience-grid .btn:not(.solid):hover, .experience-tile .btn:not(.solid):hover, .group-bookings .btn:not(.solid):hover, .group-tile .btn:not(.solid):hover, .contact-info .btn:not(.solid):hover, .offer-card .btn:not(.solid):hover, .offers-foot .btn:not(.solid):hover, .menu-panel .btn:not(.solid):hover { background: var(--ink); color: var(--cream); border-color: var(--ink); } /* Arch primitive: single source of truth. Matches the Ennios building's Victorian-warehouse window shape: a tall portrait rectangle (3:5) with a SHALLOW segmental arch on top, not a Roman half-circle. Vertical radius is 12% of height so the arch rise is roughly 20% of the box width (a chord of a large circle). Combined with 50% horizontal radius this produces a flattened ellipse cap that reads as the same shape as the windows above the awnings. */ .arch { border-radius: 50% 50% 0 0 / 12% 12% 0 0; overflow: hidden; isolation: isolate; } .arch-img { position: relative; aspect-ratio: 3 / 5; background: #2A2220; } .arch-img img { width: 100%; height: 100%; object-fit: cover; } /* ===================================================================== SIDEBAR (desktop) / DRAWER (mobile) ===================================================================== */ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--ink); color: var(--cream); display: flex; flex-direction: column; align-items: stretch; padding: 36px 30px 32px; z-index: 60; border-right: 1px solid rgba(244, 236, 222, .06); transition: width .45s var(--ease), padding .45s var(--ease); /* Last-resort scroll safety: if the viewport is genuinely too short to fit the compressed sidebar (rare, but possible at <600px tall), allow vertical scrolling within the sidebar rather than clipping the foot. Scrollbar is hidden via the WebKit pseudo-element below so the chrome doesn't intrude on the design. */ overflow-y: auto; scrollbar-width: none; } .sidebar::-webkit-scrollbar { display: none; } .sidebar::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 60% at 50% 0%, rgba(201, 160, 99, .06), transparent 60%), radial-gradient(80% 50% at 50% 100%, rgba(255, 255, 255, .04), transparent 65%); pointer-events: none; } .sidebar > * { position: relative; } .brand { display: block; text-align: center; margin: 6px auto 18px; padding: 0 6px; } .brand img { width: 100%; max-width: 240px; height: auto; margin: 0 auto; filter: brightness(0) invert(1); } .nav { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 2px; margin-top: 12px; } .nav a { display: flex; align-items: center; gap: 14px; padding: 9px 18px; font-size: 14px; letter-spacing: .06em; color: var(--cream); border-left: 1px solid transparent; transition: border-color .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease); } .nav a:hover, .nav a.active { border-left-color: var(--gold); color: var(--gold); padding-left: 16px; } .nav-icon { flex-shrink: 0; opacity: .75; transition: opacity .25s var(--ease), color .25s var(--ease); } .nav a:hover .nav-icon, .nav a.active .nav-icon { opacity: 1; } .nav-label { white-space: nowrap; } .sidebar-foot { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(244, 236, 222, .08); } .sidebar-foot .phone-badge { width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 1px solid var(--gold); display: grid; place-items: center; color: var(--gold); } .sidebar-foot .phone-num { font-family: var(--body); font-weight: 500; font-size: 14px; color: var(--cream); letter-spacing: .02em; } .sidebar-foot .phone-hint { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: rgba(244, 236, 222, .55); } .sidebar-foot .socials { display: flex; gap: 10px; margin-top: 8px; } .sidebar-foot .socials a { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--cream); border: 1px solid rgba(244, 236, 222, .18); transition: border-color .25s var(--ease), color .25s var(--ease); } .sidebar-foot .socials a:hover { color: var(--gold); border-color: var(--gold); } /* Mobile top bar (hidden by default on desktop) */ .topbar { display: none; } .drawer-scrim { display: none; } /* ===================================================================== MAIN ===================================================================== */ main { margin-left: var(--sidebar-w); min-height: 100vh; transition: margin-left .45s var(--ease); } /* ===================================================================== HERO ===================================================================== */ .hero { position: relative; height: 100vh; min-height: 660px; max-height: 980px; overflow: hidden; isolation: isolate; color: var(--cream); } .hero-slides { /* Extends 15% above the hero so the parallax translate (image moves slightly downward as the user scrolls down — slower than content) never reveals a gap at the hero top. The hero has overflow: hidden. */ position: absolute; top: -15%; bottom: 0; left: 0; right: 0; } /* Legacy: image slides (still used as a fallback if no .hero-video) */ .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s var(--ease), transform 12s linear; transform: scale(1.04); } .hero-slide.active { opacity: 1; transform: scale(1.12); } /* Hero video sequencer: dual-buffer crossfade. Two