/* ========================================================================== The Alexander - Main Stylesheet This file imports all CSS partials in the correct order. DO NOT add styles directly to this file—create/edit partials instead. ========================================================================== */ /* Self-hosted fonts (@font-face) - must be before variables */ /* --- Inlined from _fonts.css --- */ /* ========================================================================== The Alexander - Self-Hosted Fonts ========================================================================== */ @font-face { font-family: 'ED Lavonia'; src: url('../assets/fonts/EDLavonia-Regular.woff2') format('woff2'), url('../assets/fonts/EDLavonia-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } /* Design Tokens (variables) */ /* --- Inlined from _variables.css --- */ /* ========================================================================== The Alexander — Design Tokens Version: 2.0.0 Enhanced token system merging facelift refinements into the main build. Built on brand palette: Burgundy #722F37, Ivory #FAF7F2, Gold #C9A962. Refined with warm neutrals inspired by Restaurant Daniel, Eleven Madison Park, and The French Laundry. DO NOT EDIT individual values without updating SITE-MANIFEST.md first. These tokens are the single source of truth for all styling. ========================================================================== */ :root { /* ========================================================================= COLORS — Primary Palette ========================================================================= */ /* Burgundy */ --color-burgundy: #722F37; --color-burgundy-dark: #5A252C; --color-burgundy-deeper: #481E23; --color-burgundy-light: #8A3941; --color-burgundy-muted: #9B6A6F; --color-burgundy-faint: rgba(114, 47, 55, 0.08); /* Ivory */ --color-ivory: #FAF7F2; --color-ivory-warm: #F5F0E6; --color-ivory-dark: #EDE8DF; --color-ivory-deep: #E3DDD2; --color-ivory-highlight: #F5F0E8; --color-white: #FFFFFF; /* Gold */ --color-gold: #C9A962; --color-gold-dark: #B8954A; --color-gold-light: #D4BA7A; --color-gold-muted: #BCA87A; --color-gold-pale: #E8D9B0; --color-gold-faint: rgba(201, 169, 98, 0.15); /* ========================================================================= COLORS — Dark Tones (walnut / espresso / charcoal) ========================================================================= */ --color-walnut: #1E1610; --color-espresso: #2A1F18; --color-charcoal: #2D2D2D; --color-charcoal-warm: #342C28; --color-charcoal-light: #3D3D3D; /* ========================================================================= COLORS — Warm Neutrals Replacing cool grays with warm-toned neutrals that feel like candlelit linen rather than fluorescent office paper. ========================================================================= */ --color-gray-900: #1A1A1A; --color-gray-800: #333333; --color-gray-700: #4A4A4A; --color-gray-600: #5C5650; --color-gray-500: #8A847D; --color-gray-400: #9B9590; --color-gray-300: #C2BBB4; --color-gray-200: #DDD8D2; --color-gray-100: #F0EDE8; /* Legacy neutral aliases (kept for backward compatibility) */ --color-gray-dark: var(--color-gray-700); --color-gray: #6B6B6B; --color-gray-light: var(--color-gray-400); --color-gray-lighter: var(--color-gray-200); /* ========================================================================= COLORS — Functional / Semantic ========================================================================= */ --color-text-primary: #383431; --color-text-secondary: #5C5650; /* --color-text-muted darkened from #8A847D (3.46:1 vs ivory — fails AA) to #6E6862 (~4.85:1 vs ivory — passes AA for body text). */ --color-text-muted: #6E6862; --color-text-inverse: var(--color-ivory); --color-text-on-dark: var(--color-ivory); --color-text-on-dark-muted: rgba(250, 247, 242, 0.7); --color-text-on-dark-subtle: rgba(250, 247, 242, 0.45); --color-background: var(--color-ivory); --color-background-alt: var(--color-ivory-warm); --color-background-card: var(--color-ivory-highlight); --color-background-dark: var(--color-walnut); --color-accent: var(--color-gold); --color-link: var(--color-burgundy); --color-link-hover: var(--color-burgundy-dark); --color-border: var(--color-gray-200); --color-border-subtle: rgba(0, 0, 0, 0.06); --color-border-dark: var(--color-gray-400); --color-border-gold: var(--color-gold-muted); /* ========================================================================= COLORS — Overlays & Gradients ========================================================================= */ --overlay-dark: rgba(30, 22, 16, 0.55); --overlay-darker: rgba(30, 22, 16, 0.72); --overlay-darkest: rgba(30, 22, 16, 0.88); --overlay-burgundy: rgba(114, 47, 55, 0.65); --overlay-gold-soft: rgba(201, 169, 98, 0.08); --gradient-hero: linear-gradient( to bottom, rgba(30, 22, 16, 0.15) 0%, rgba(30, 22, 16, 0.25) 40%, rgba(30, 22, 16, 0.70) 75%, rgba(30, 22, 16, 0.88) 100% ); --gradient-hero-top: linear-gradient( to bottom, rgba(30, 22, 16, 0.45) 0%, transparent 35% ); --gradient-card: linear-gradient( to top, rgba(30, 22, 16, 0.82) 0%, rgba(30, 22, 16, 0.45) 40%, transparent 100% ); --gradient-gold-shine: linear-gradient( 135deg, var(--color-gold-dark) 0%, var(--color-gold-light) 50%, var(--color-gold-dark) 100% ); /* ========================================================================= COLORS — v2 Tokens (preserved for backward compatibility) ========================================================================= */ /* v2 Color Tokens */ --color-deep-walnut: #2C1810; --color-warm-ivory: #F7F2EA; --color-warm-cream: #F5F0E6; /* v2 Functional Tokens */ --color-error-warm: #D4A054; --text-on-deep: #FAF7F2; --text-on-deep-muted: rgba(250, 247, 242, 0.7); --text-on-deep-subtle: rgba(250, 247, 242, 0.5); /* v2 Opacity Tokens */ --color-burgundy-04: rgba(114, 47, 55, 0.04); --color-burgundy-12: rgba(114, 47, 55, 0.12); --color-ivory-08: rgba(250, 247, 242, 0.08); --color-ivory-15: rgba(250, 247, 242, 0.15); --color-gold-50: rgba(201, 169, 98, 0.5); /* NOTE: Gold (#C9A962) on ivory backgrounds fails WCAG contrast. Fix is in templates: eyebrow text on ivory sections should use --color-burgundy, not --color-gold. No CSS changes needed — .eyebrow already defaults to color: var(--color-burgundy). Gold override only applies on .bg-burgundy .eyebrow, which is correct. */ /* ========================================================================= COLORS — Atmosphere Tokens Semantic aliases for the dual-atmosphere system (daylight/evening). ========================================================================= */ --atm-bg: var(--color-ivory); --atm-bg-alt: var(--color-ivory-warm); --atm-text: var(--color-text-primary); --atm-text-sub: var(--color-text-secondary); --atm-accent: var(--color-burgundy); --atm-border: var(--color-gray-200); --color-warm-amber: #D4A574; --color-amber-glow: rgba(212, 165, 116, 0.12); --transition-atmosphere: 1200ms var(--ease-luxe); /* ========================================================================= TYPOGRAPHY — Font Families ========================================================================= */ --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-accent: 'ED Lavonia', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ========================================================================= TYPOGRAPHY — Font Weights ========================================================================= */ --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ========================================================================= TYPOGRAPHY — Fluid Type Scale (clamp) Minimum at 375px viewport, maximum at 1536px viewport. ========================================================================= */ --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); /* ~12-14px */ --text-sm: clamp(0.875rem, 0.82rem + 0.22vw, 1rem); /* ~14-16px */ --text-base: clamp(1.0625rem, 1rem + 0.26vw, 1.1875rem); /* ~17-19px */ --text-lg: clamp(1.1875rem, 1.1rem + 0.36vw, 1.375rem); /* ~19-22px */ --text-xl: clamp(1.375rem, 1.25rem + 0.52vw, 1.625rem); /* ~22-26px */ --text-2xl: clamp(1.625rem, 1.44rem + 0.78vw, 2rem); /* ~26-32px */ --text-3xl: clamp(2rem, 1.74rem + 1.08vw, 2.5rem); /* ~32-40px */ --text-4xl: clamp(2.5rem, 2.08rem + 1.74vw, 3.25rem); /* ~40-52px */ --text-5xl: clamp(3rem, 2.4rem + 2.5vw, 4rem); /* ~48-64px */ --text-6xl: clamp(3.5rem, 2.7rem + 3.34vw, 5rem); /* ~56-80px */ --text-7xl: clamp(4rem, 3rem + 4.17vw, 6rem); /* ~64-96px */ --text-8xl: clamp(4.5rem, 3.2rem + 5.4vw, 7.5rem); /* ~72-120px */ /* ========================================================================= TYPOGRAPHY — Line Heights ========================================================================= */ --leading-none: 1; --leading-tighter: 1.1; --leading-tight: 1.2; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.85; /* ========================================================================= TYPOGRAPHY — Letter Spacing ========================================================================= */ --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.16em; --tracking-caps: 0.2em; /* ========================================================================= SPACING — Scale (4px base unit) ========================================================================= */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-36: 9rem; /* 144px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ --space-50: 12.5rem; /* 200px */ /* ========================================================================= SPACING — Section Padding (responsive) ========================================================================= */ --section-padding: var(--space-20); /* mobile: 5rem */ --section-padding-md: var(--space-28); /* tablet: 7rem */ --section-padding-lg: 9rem; /* desktop: 9rem */ --section-padding-xl: 12rem; /* large desktop: 12rem */ /* ========================================================================= LAYOUT — Container Sizes ========================================================================= */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; --content-width: 65ch; --content-width-narrow: 48ch; --content-width-wide: 80ch; --sidebar-width: 300px; /* ========================================================================= EFFECTS — Shadows ========================================================================= */ --shadow-sm: 0 1px 3px rgba(30, 22, 16, 0.06), 0 1px 2px rgba(30, 22, 16, 0.04); --shadow-md: 0 4px 8px rgba(30, 22, 16, 0.08), 0 2px 4px rgba(30, 22, 16, 0.04); --shadow-lg: 0 12px 24px rgba(30, 22, 16, 0.10), 0 4px 8px rgba(30, 22, 16, 0.05); --shadow-xl: 0 24px 48px rgba(30, 22, 16, 0.12), 0 8px 16px rgba(30, 22, 16, 0.06); --shadow-2xl: 0 32px 64px rgba(30, 22, 16, 0.16), 0 12px 24px rgba(30, 22, 16, 0.08); /* Warm-tinted shadows */ --shadow-warm-sm: 0 2px 12px rgba(114, 47, 55, 0.06); --shadow-warm-md: 0 8px 24px rgba(114, 47, 55, 0.10); --shadow-warm-lg: 0 12px 40px rgba(114, 47, 55, 0.14); /* Soft shadows — for cards on light backgrounds, barely-there depth */ --shadow-soft: 0 4px 20px rgba(56, 52, 49, 0.06); --shadow-soft-lg: 0 8px 32px rgba(56, 52, 49, 0.08); /* Glow variants */ --shadow-gold-glow: 0 0 0 1px rgba(201, 169, 98, 0.25), 0 0 16px rgba(201, 169, 98, 0.12); --shadow-burgundy-glow: 0 0 0 1px rgba(114, 47, 55, 0.20), 0 0 20px rgba(114, 47, 55, 0.10); /* ========================================================================= EFFECTS — Border Radius ========================================================================= */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* ========================================================================= EFFECTS — Easing Curves ========================================================================= */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1); /* ========================================================================= EFFECTS — Transitions Slowed across the board for a more deliberate, high-end feel. ========================================================================= */ --transition-fast: 200ms var(--ease-smooth); --transition-normal: 400ms var(--ease-smooth); --transition-slow: 600ms var(--ease-out-quart); --transition-slower: 1000ms var(--ease-luxe); --transition-slowest: 1600ms var(--ease-luxe); /* ========================================================================= Z-INDEX — Scale ========================================================================= */ --z-behind: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-header: 300; --z-modal-backdrop: 400; --z-overlay: 400; --z-modal: 500; --z-drawer: 500; --z-popover: 600; --z-tooltip: 700; --z-max: 9999; } /* ========================================================================== Breakpoint Reference (for media queries) These cannot be CSS variables, so reference this list: - sm: 640px - md: 768px - lg: 1024px - xl: 1280px - 2xl: 1536px Usage: @media (min-width: 768px) { ... } ========================================================================== */ /* Atmosphere System (light/dark palette switching) */ /* --- Inlined from _atmosphere.css --- */ /* ========================================================================== The Alexander — Dual Atmosphere System Direction 9: Dining pages feel like sunlit afternoon. Event pages feel like candlelit evening. The homepage transitions between them via scroll. Usage: Add .atmosphere-evening to any section wrapper to switch from the default light palette to the dark evening palette. ========================================================================== */ /* Evening atmosphere — remaps semantic tokens to dark palette */ .atmosphere-evening { --atm-bg: var(--color-walnut); --atm-bg-alt: var(--color-espresso); --atm-text: var(--color-ivory); --atm-text-secondary: var(--color-text-on-dark-muted); --atm-text-muted: var(--color-text-on-dark-subtle); --atm-accent: var(--color-gold); --atm-border: rgba(250, 247, 242, 0.1); --atm-border-subtle: rgba(250, 247, 242, 0.06); background-color: var(--atm-bg); color: var(--atm-text); } .atmosphere-evening h1, .atmosphere-evening h2, .atmosphere-evening h3, .atmosphere-evening h4, .atmosphere-evening h5, .atmosphere-evening h6 { color: var(--color-ivory); } .atmosphere-evening .eyebrow { color: var(--color-gold); } .atmosphere-evening .section-header__description, .atmosphere-evening .section__text, .atmosphere-evening p { color: var(--atm-text-secondary); } .atmosphere-evening a:not(.btn) { color: var(--color-gold-light); } .atmosphere-evening a:not(.btn):hover { color: var(--color-gold); } /* Evening CTA adjustments live in styles/_buttons.css */ /* Transition between atmospheres */ .atmosphere-transition { transition: background-color 1.2s var(--ease-luxe), color 0.8s var(--ease-smooth); } /* GSAP integration failsafe — elements hidden before animation runs */ .gsap-hidden { opacity: 0; } /* When JS is disabled or fails, make sure content is visible */ @media (scripting: none) { .gsap-hidden { opacity: 1; } } /* Also ensure visibility when reduced motion is preferred */ @media (prefers-reduced-motion: reduce) { .gsap-hidden { opacity: 1; } .atmosphere-transition { transition: none; } } /* Base styles (reset, typography, utilities) */ /* --- Inlined from _base.css --- */ /* ========================================================================== The Alexander - Base Styles Foundation reset and base element styling ========================================================================== */ /* ------------------------------------------------------------------------- CSS Reset (Modern Minimal) ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Prevent horizontal scroll from GSAP transforms (Ken Burns scale on closing-moment images, ±80px drift on testimonial cards) extending elements past the viewport. overflow-x: clip is the strict variant that doesn't create a scroll container, so position: sticky on descendants still works. Older browsers fall back to hidden. */ overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-normal); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Prevent horizontal scroll from GSAP transforms (Ken Burns scale, drift translate) extending elements past the viewport. overflow-x: clip is the strict clipping variant that doesn't create a scroll container — preserves position: sticky on descendants. Falls back to overflow-x: hidden on browsers that don't support it. */ overflow-x: hidden; overflow-x: clip; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Remove list styles on ul, ol elements with a list role */ ul[role='list'], ol[role='list'] { list-style: none; } /* Set core root defaults */ html:focus-within { scroll-behavior: smooth; } /* A elements that don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; } /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------------- Typography Base ------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--weight-medium); line-height: var(--leading-tight); color: var(--color-text-primary); letter-spacing: var(--tracking-tight); } /* Accent font — ED Lavonia for decorative moments */ /* Rules: max 1-3 per page, always 24px+, always weight 400, never italic */ .font-accent { font-family: var(--font-accent); font-weight: 400; font-style: normal; font-synthesis: none; } h1 { font-size: var(--text-5xl); letter-spacing: var(--tracking-tight); } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-3xl); } h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); } h6 { font-size: var(--text-lg); font-weight: 400; } @media (min-width: 640px) { h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-3xl); } h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); } } @media (min-width: 768px) { h1 { font-size: var(--text-6xl); } h2 { font-size: var(--text-5xl); } h3 { font-size: var(--text-4xl); } } @media (min-width: 1024px) { h1 { font-size: var(--text-6xl); } } p { margin-bottom: var(--space-4); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-link-hover); } strong, b { font-weight: var(--weight-semibold); } small { font-size: var(--text-sm); } /* ------------------------------------------------------------------------- Layout Utilities ------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-xl); margin-left: auto; margin-right: auto; padding-left: var(--space-5); padding-right: var(--space-5); } @media (min-width: 768px) { .container { padding-left: var(--space-8); padding-right: var(--space-8); } } @media (min-width: 1280px) { .container { padding-left: var(--space-12); padding-right: var(--space-12); } } .container--narrow { max-width: var(--container-md); } .container--wide { max-width: var(--container-2xl); } .container--menu { max-width: var(--container-lg); } /* ------------------------------------------------------------------------- Button Base — moved to styles/_buttons.css (single source of truth) ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- Section Base ------------------------------------------------------------------------- */ .section { padding: 5rem 0; position: relative; } @media (min-width: 768px) { .section { padding: 7rem 0; } } @media (min-width: 1280px) { .section { padding: 9rem 0; } } /* Add subtle top border to sections without backgrounds for visual separation */ .section:not(.bg-burgundy):not(.bg-ivory):not(.bg-ivory-dark):not(.bg-white):not(.bg-espresso):not(.bg-deep-walnut):not(.bg-walnut):not(:first-of-type) { border-top: 1px solid var(--color-border); } /* Remove border if previous section has a different background */ .bg-burgundy + .section, .bg-ivory + .section, .bg-ivory-dark + .section { border-top: none; } /* Gold hairline between dark evening sections */ .bg-espresso + .section.bg-espresso, .bg-espresso + .section.bg-deep-walnut, .bg-espresso + .section.bg-walnut, .bg-deep-walnut + .section.bg-espresso, .bg-deep-walnut + .section.bg-deep-walnut, .bg-deep-walnut + .section.bg-walnut, .bg-walnut + .section.bg-espresso, .bg-walnut + .section.bg-deep-walnut, .bg-walnut + .section.bg-walnut { border-top: 1px solid var(--color-gold-faint); } .section--dark { background-color: var(--color-background-dark); color: var(--color-text-inverse); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4, .section--dark h5, .section--dark h6 { color: var(--color-ivory); } .section--alt { background-color: var(--color-background-alt); } /* ------------------------------------------------------------------------- Visually Hidden (for accessibility) ------------------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- Skip Link ------------------------------------------------------------------------- */ .skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: var(--z-tooltip); padding: var(--space-3) var(--space-4); background-color: var(--color-burgundy); color: var(--color-white); text-decoration: none; border-radius: var(--radius-md); } .skip-link:focus { top: var(--space-4); } /* ========================================================================= BACKGROUND UTILITIES ========================================================================= */ .bg-burgundy { background-color: var(--color-burgundy); color: var(--color-white); } .bg-ivory { background-color: var(--color-ivory); } .bg-ivory-dark { background-color: var(--color-ivory-dark); } .bg-white { background-color: var(--color-white); } .bg-deep-walnut { background-color: var(--color-deep-walnut); color: var(--text-on-deep); } .bg-deep-walnut h1, .bg-deep-walnut h2, .bg-deep-walnut h3, .bg-deep-walnut h4, .bg-deep-walnut h5, .bg-deep-walnut h6 { color: var(--color-ivory); } .bg-deep-walnut .eyebrow { color: var(--color-gold); } .bg-deep-walnut .section-header__description, .bg-deep-walnut .section__text { color: var(--text-on-deep-muted); } .bg-warm-ivory { background-color: var(--color-warm-ivory); } .bg-warm-cream { background-color: var(--color-warm-cream); } /* ========================================================================= BREADCRUMB ========================================================================= */ .breadcrumb { padding: var(--space-4) 0; background-color: var(--color-ivory-dark); border-bottom: 1px solid var(--color-border); } .breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; } .breadcrumb__item { display: flex; align-items: center; font-size: var(--text-sm); } .breadcrumb__item:not(:last-child)::after { content: "/"; margin-left: var(--space-2); color: var(--color-gray-light); } .breadcrumb__link { /* Tap-target compliance: pseudo-element expands hit area to ≥44px without changing the visual size of the link text. Padding-block alternative would push siblings; this approach (relative + ::before absolute) keeps the layout pixel-identical. */ position: relative; display: inline-block; color: var(--color-text-secondary); text-decoration: none; transition: color var(--transition-fast); } .breadcrumb__link::before { content: ""; position: absolute; inset: -12px -4px; /* invisible expanded hit-area */ } .breadcrumb__link:hover { color: var(--color-burgundy); text-decoration: underline; } .breadcrumb__current { color: var(--color-text-primary); font-weight: var(--weight-medium); } /* ========================================================================= TEXT UTILITIES ========================================================================= */ .text-center { text-align: center; } .content { line-height: 1.7; } .content p { margin-bottom: var(--space-4); } .content p:last-child { margin-bottom: 0; } /* ========================================================================= GSAP FOUC Prevention Hide elements that will be scroll-revealed. .js class is added in before first paint. GSAP animates these visible on scroll. ========================================================================= */ .js .split-overlap__image, .js .split-overlap__text, .js .dual-card, .js .room-card, .js .pricing-card, .js .testimonial-card, .js [data-atmosphere="transition-start"] .section-header, .js [data-atmosphere="evening"] .section-header, .js .closing-moment__resolve, .js .closing-moment .btn, .js .full-bleed-image, .js .gold-rule, .js .gold-rule--center, .js .food-editorial__header, .js .food-editorial__slice, .js .food-editorial__cta { opacity: 0; } @media (prefers-reduced-motion: reduce) { .js .split-overlap__image, .js .split-overlap__text, .js .dual-card, .js .room-card, .js .pricing-card, .js .testimonial-card, .js [data-atmosphere="transition-start"] .section-header, .js [data-atmosphere="evening"] .section-header, .js .closing-moment__resolve, .js .closing-moment .btn, .js .full-bleed-image, .js .gold-rule, .js .gold-rule--center, .js .food-editorial__header, .js .food-editorial__slice, .js .food-editorial__cta { opacity: 1; } } /* Button System (single source of truth — do not duplicate in other files) */ /* --- Inlined from _buttons.css --- */ /* ========================================================================== The Alexander — Button System (single source of truth) Three semantic variants: .btn--primary — filled, highest weight. Burgundy on light; gold on dark. .btn--secondary — 1px outlined ghost. Fills on hover. .btn--text — text + arrow. Lowest weight. Three sizes: default, .btn--sm, .btn--lg Context switches via .atmosphere-evening OR explicit dark bg classes (.bg-walnut / .bg-espresso / .bg-deep-walnut) — safety net for pages that don't carry the evening atmosphere wrapper. Do NOT add button rules to any other stylesheet. Extend here. ========================================================================== */ /* -------------------------------------------------------------------------- Base .btn — shared across all variants -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px 28px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; user-select: none; transition: transform var(--transition-normal) var(--ease-luxe), background-color var(--transition-normal) var(--ease-luxe), color var(--transition-normal) var(--ease-luxe), border-color var(--transition-normal) var(--ease-luxe), box-shadow var(--transition-normal) var(--ease-luxe); min-height: 44px; /* WCAG 2.5.5 touch target at default size */ } .btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* -------------------------------------------------------------------------- Sizes -------------------------------------------------------------------------- */ .btn--sm { padding: 10px 20px; font-size: var(--text-xs); letter-spacing: var(--tracking-widest); /* Bumped from 40px → 44px to meet WCAG 2.5.5 (header CTAs use btn--sm). Padding stays at 10px so the visual proportions don't change much; the min-height does the lifting. white-space: nowrap prevents 2-line wrap on header CTAs at narrow desktop widths (1024px) where the actions bar is space-constrained. */ min-height: 44px; white-space: nowrap; } .btn--lg { padding: 18px 40px; font-size: var(--text-base); letter-spacing: var(--tracking-caps); min-height: 52px; } /* -------------------------------------------------------------------------- Primary — filled Light context: burgundy fill, ivory text Dark context: gold fill, walnut text -------------------------------------------------------------------------- */ .btn--primary { background-color: var(--color-burgundy); color: var(--color-ivory); border-color: var(--color-burgundy); } .btn--primary::after { content: "\2192"; /* → */ display: inline-block; margin-left: var(--space-1); transition: transform var(--transition-normal) var(--ease-luxe); } .btn--primary:hover, .btn--primary:focus-visible { background-color: var(--color-burgundy-dark); border-color: var(--color-burgundy-dark); color: var(--color-ivory); transform: translateY(-2px); box-shadow: var(--shadow-burgundy-glow); } .btn--primary:hover::after, .btn--primary:focus-visible::after { transform: translateX(4px); } /* -------------------------------------------------------------------------- :active press feedback — instant tactile response on all variants transition: none ensures the press is immediate (not eased) -------------------------------------------------------------------------- */ .btn--primary:active { transform: translateY(1px) scale(0.98); box-shadow: none; transition: none; } .btn--primary:active::after { transform: translateX(0); transition: none; } /* Dark-context override — atmosphere OR explicit dark bg */ .atmosphere-evening .btn--primary, .bg-walnut .btn--primary, .bg-espresso .btn--primary, .bg-deep-walnut .btn--primary, .menu--evening .btn--primary { background-color: var(--color-gold); color: var(--color-walnut); border-color: var(--color-gold); } .atmosphere-evening .btn--primary:hover, .atmosphere-evening .btn--primary:focus-visible, .bg-walnut .btn--primary:hover, .bg-walnut .btn--primary:focus-visible, .bg-espresso .btn--primary:hover, .bg-espresso .btn--primary:focus-visible, .bg-deep-walnut .btn--primary:hover, .bg-deep-walnut .btn--primary:focus-visible, .menu--evening .btn--primary:hover, .menu--evening .btn--primary:focus-visible { background-color: var(--color-gold-light); border-color: var(--color-gold-light); color: var(--color-walnut); box-shadow: var(--shadow-gold-glow); } /* Burgundy-bg context — primary inverts to ivory fill w/ burgundy text */ .bg-burgundy .btn--primary, .cta-block .btn--primary { background-color: var(--color-ivory); color: var(--color-burgundy); border-color: var(--color-ivory); } .bg-burgundy .btn--primary:hover, .bg-burgundy .btn--primary:focus-visible, .cta-block .btn--primary:hover, .cta-block .btn--primary:focus-visible { background-color: var(--color-white); border-color: var(--color-white); color: var(--color-burgundy); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } /* -------------------------------------------------------------------------- Secondary — 1px outlined ghost Light context: burgundy border + text Dark context: ivory border + text Fills on hover in both contexts. -------------------------------------------------------------------------- */ .btn--secondary { background-color: transparent; color: var(--color-burgundy); border-color: var(--color-burgundy); } .btn--secondary:hover, .btn--secondary:focus-visible { background-color: var(--color-burgundy); color: var(--color-ivory); transform: translateY(-2px); } /* Dark-context primary active */ .atmosphere-evening .btn--primary:active, .bg-walnut .btn--primary:active, .bg-espresso .btn--primary:active, .bg-deep-walnut .btn--primary:active, .menu--evening .btn--primary:active { transform: translateY(1px) scale(0.98); box-shadow: none; transition: none; } /* Burgundy-bg context active */ .bg-burgundy .btn--primary:active, .cta-block .btn--primary:active { transform: translateY(1px) scale(0.98); box-shadow: none; transition: none; } .btn--secondary:active { transform: translateY(1px) scale(0.98); box-shadow: none; transition: none; } /* Dark-context secondary active */ .atmosphere-evening .btn--secondary:active, .bg-walnut .btn--secondary:active, .bg-espresso .btn--secondary:active, .bg-deep-walnut .btn--secondary:active, .bg-burgundy .btn--secondary:active, .cta-block .btn--secondary:active, .menu--evening .btn--secondary:active, .hero .btn--secondary:active { transform: translateY(1px) scale(0.98); box-shadow: none; transition: none; } .btn--text:active { opacity: 0.7; transition: none; } .btn--text:active::after { transform: translateX(0); transition: none; } .atmosphere-evening .btn--secondary, .bg-walnut .btn--secondary, .bg-espresso .btn--secondary, .bg-deep-walnut .btn--secondary, .bg-burgundy .btn--secondary, .cta-block .btn--secondary, .menu--evening .btn--secondary, .hero .btn--secondary { background-color: transparent; color: var(--color-ivory); border-color: rgba(250, 247, 242, 0.6); } .atmosphere-evening .btn--secondary:hover, .atmosphere-evening .btn--secondary:focus-visible, .bg-walnut .btn--secondary:hover, .bg-walnut .btn--secondary:focus-visible, .bg-espresso .btn--secondary:hover, .bg-espresso .btn--secondary:focus-visible, .bg-deep-walnut .btn--secondary:hover, .bg-deep-walnut .btn--secondary:focus-visible, .bg-burgundy .btn--secondary:hover, .bg-burgundy .btn--secondary:focus-visible, .cta-block .btn--secondary:hover, .cta-block .btn--secondary:focus-visible, .menu--evening .btn--secondary:hover, .menu--evening .btn--secondary:focus-visible, .hero .btn--secondary:hover, .hero .btn--secondary:focus-visible { background-color: var(--color-ivory); color: var(--color-burgundy); border-color: var(--color-ivory); } /* -------------------------------------------------------------------------- Text — text + arrow, lowest weight. Behaves like a confident link; no border, no fill. -------------------------------------------------------------------------- */ .btn--text { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0; min-height: auto; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-burgundy); background: none; border: none; border-radius: 0; transition: color var(--transition-fast) var(--ease-luxe); } .btn--text::after { content: "\2192"; display: inline-block; transition: transform var(--transition-normal) var(--ease-luxe); } .btn--text:hover, .btn--text:focus-visible { color: var(--color-burgundy-dark); } .btn--text:hover::after, .btn--text:focus-visible::after { transform: translateX(4px); } .btn--text:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; } .atmosphere-evening .btn--text, .bg-walnut .btn--text, .bg-espresso .btn--text, .bg-deep-walnut .btn--text, .bg-burgundy .btn--text, .cta-block .btn--text, .menu--evening .btn--text { color: var(--color-gold); } .atmosphere-evening .btn--text:hover, .atmosphere-evening .btn--text:focus-visible, .bg-walnut .btn--text:hover, .bg-walnut .btn--text:focus-visible, .bg-espresso .btn--text:hover, .bg-espresso .btn--text:focus-visible, .bg-deep-walnut .btn--text:hover, .bg-deep-walnut .btn--text:focus-visible, .bg-burgundy .btn--text:hover, .bg-burgundy .btn--text:focus-visible, .cta-block .btn--text:hover, .cta-block .btn--text:focus-visible, .menu--evening .btn--text:hover, .menu--evening .btn--text:focus-visible { color: var(--color-gold-light); } /* -------------------------------------------------------------------------- Button group — vertical stack with optional trust-line beneath Used for event-inquiry primaries paired with response-time copy.
Plan Your Wedding

Our events manager will be in touch as soon as possible.

-------------------------------------------------------------------------- */ .btn-group { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-3); } .btn-group__trust { margin: 0; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-normal); letter-spacing: var(--tracking-wide); color: var(--color-text-muted); text-align: center; } .atmosphere-evening .btn-group__trust, .bg-walnut .btn-group__trust, .bg-espresso .btn-group__trust, .bg-deep-walnut .btn-group__trust, .bg-burgundy .btn-group__trust, .cta-block .btn-group__trust, .menu--evening .btn-group__trust { color: var(--color-text-on-dark-muted); } /* -------------------------------------------------------------------------- .btn--gold — header CTAs use gold fill directly (not via context class) Active state matches the pattern -------------------------------------------------------------------------- */ .btn--gold:active { transform: translateY(1px) scale(0.98); box-shadow: none; transition: none; } /* -------------------------------------------------------------------------- Reduced motion — suppress lift and arrow glide -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .btn, .btn::after, .btn--text, .btn--text::after { transition: none; } .btn:hover, .btn:focus-visible, .btn--primary:hover, .btn--primary:focus-visible, .btn--secondary:hover, .btn--secondary:focus-visible { transform: none; } .btn--primary:hover::after, .btn--primary:focus-visible::after, .btn--text:hover::after, .btn--text:focus-visible::after { transform: none; } /* :active — suppress transform, use bg-color shift only */ .btn--primary:active { transform: none; background-color: var(--color-burgundy-dark); transition: none; } .atmosphere-evening .btn--primary:active, .bg-walnut .btn--primary:active, .bg-espresso .btn--primary:active, .bg-deep-walnut .btn--primary:active, .menu--evening .btn--primary:active { transform: none; background-color: var(--color-gold-dark); transition: none; } .btn--secondary:active { transform: none; background-color: var(--color-burgundy); color: var(--color-ivory); transition: none; } .btn--text:active { opacity: 0.6; transition: none; } .btn--gold:active { transform: none; background-color: var(--color-gold-dark); transition: none; } } /* Layout Components */ /* --- Inlined from _header.css --- */ /* ========================================================================== Header Component Styles File: styles/_header.css ========================================================================== */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background-color: var(--color-background); border-bottom: 1px solid var(--color-border); } .site-header__container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 80px; } /* Logo */ .site-header__logo { flex-shrink: 0; text-decoration: none; display: flex; align-items: center; } .site-header__logo-img { height: 48px; width: auto; display: block; } /* Navigation */ .site-header__nav { display: none; } @media (min-width: 1024px) { .site-header__nav { display: block; } } .site-header__nav-list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; } .site-header__nav-link { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); text-decoration: none; letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius-sm); transition: color var(--transition-fast), background-color var(--transition-fast); } .site-header__nav-link:hover { color: var(--color-burgundy); background-color: var(--color-ivory-dark); } /* ── Dropdown toggle button ── */ .site-header__dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: none; border: none; cursor: pointer; color: inherit; border-radius: var(--radius-sm); transition: color var(--transition-fast), background-color var(--transition-fast); } .site-header__dropdown-toggle:hover, .site-header__dropdown-toggle:focus-visible { color: var(--color-burgundy); background-color: var(--color-ivory-dark); } .site-header__dropdown-toggle:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; } /* Icon rotates when dropdown is open */ .site-header__dropdown-toggle[aria-expanded="true"] .site-header__nav-icon { transform: rotate(180deg); } .site-header__nav-icon { transition: transform var(--transition-fast); } /* Dark header variant */ .site-header--dark .site-header__dropdown-toggle { color: var(--color-ivory); } .site-header--dark .site-header__dropdown-toggle:hover, .site-header--dark .site-header__dropdown-toggle:focus-visible { color: var(--color-gold-light); background-color: var(--color-ivory-08); } .site-header--scrolled.site-header--dark .site-header__dropdown-toggle { color: var(--color-text-primary); } /* ── Dropdown open/close ── */ /* Dropdown */ .site-header__nav-item--has-dropdown { position: relative; display: flex; align-items: center; } /* Default: visible state (JS removes hidden attr; CSS handles transition) */ .site-header__dropdown { position: absolute; top: 100%; left: 0; min-width: 220px; padding: var(--space-2) 0; background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); list-style: none; opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal); } /* Closed state: JS sets [hidden] attribute AND aria-expanded="false" */ .site-header__dropdown[hidden] { display: block; /* override browser's display:none so transition plays */ opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; } /* Mouse-hover secondary reveal (progressive enhancement for pointer devices) */ @media (hover: hover) and (pointer: fine) { .site-header__nav-item--has-dropdown:hover .site-header__dropdown { display: block; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } } .site-header__dropdown a { display: block; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--color-text-primary); text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast); } .site-header__dropdown a:hover { background-color: var(--color-ivory); color: var(--color-burgundy); } /* Actions */ .site-header__actions { display: none; align-items: center; gap: var(--space-4); } @media (min-width: 640px) { .site-header__actions { display: flex; } } .site-header__phone { display: none; align-items: center; gap: var(--space-2); color: var(--color-text-primary); text-decoration: none; font-size: var(--text-sm); transition: color var(--transition-fast); } .site-header__phone:hover { color: var(--color-burgundy); } @media (min-width: 768px) { .site-header__phone { display: flex; } } .site-header__phone-icon { flex-shrink: 0; } .site-header__cta { display: none; } @media (min-width: 640px) { .site-header__cta { display: inline-flex; } } /* Mobile Menu Toggle */ .site-header__menu-toggle { display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; min-width: 44px; min-height: 44px; width: 44px; height: 44px; padding: 10px; background: none; border: none; cursor: pointer; } @media (min-width: 1024px) { .site-header__menu-toggle { display: none; } } .site-header__menu-toggle-bar { display: block; width: 24px; height: 2.5px; background-color: var(--color-charcoal); border-radius: 2px; pointer-events: none; transition: transform var(--transition-normal), opacity var(--transition-normal); } .site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(2) { opacity: 0; } .site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile Navigation */ .site-header__mobile-nav { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--color-white); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-lg); padding: var(--space-6); max-height: calc(100vh - 80px); overflow-y: auto; } .site-header__mobile-nav[hidden] { display: none; } .site-header__mobile-nav-list { list-style: none; margin: 0 0 var(--space-6) 0; padding: 0; } .site-header__mobile-nav-list a { display: block; padding: var(--space-4) 0; font-size: var(--text-lg); color: var(--color-text-primary); text-decoration: none; } /* Mobile Accordion */ .site-header__mobile-nav-item { border-bottom: 1px solid var(--color-border); } .site-header__mobile-nav-item > a { display: block; padding: var(--space-4) 0; font-size: var(--text-lg); color: var(--color-text-primary); text-decoration: none; } .site-header__mobile-nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-4) 0; font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-normal); color: var(--color-text-primary); background: none; border: none; cursor: pointer; text-align: left; } .site-header__mobile-nav-toggle svg { transition: transform var(--transition-fast); } .site-header__mobile-nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .site-header__mobile-nav-submenu { list-style: none; margin: 0; padding: 0 0 var(--space-2) 0; } .site-header__mobile-nav-submenu[hidden] { display: none; } .site-header__mobile-nav-submenu a { display: block; padding: var(--space-2) var(--space-4); font-size: var(--text-base); color: var(--color-text-secondary); text-decoration: none; transition: color var(--transition-fast); } .site-header__mobile-nav-submenu a:hover { color: var(--color-burgundy); } .site-header__mobile-nav-cta { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); } .site-header__mobile-nav-cta .btn { width: 100%; justify-content: center; } /* Mobile CTA Hierarchy: Menu (primary), Reserve (secondary), Call (tertiary) */ .site-header__mobile-cta-primary { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); padding: var(--space-5) var(--space-8); } .site-header__mobile-cta-secondary { font-size: var(--text-sm); padding: var(--space-3) var(--space-6); } .site-header__mobile-cta-tertiary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) 0; font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: none; letter-spacing: var(--tracking-wide); transition: color var(--transition-fast); } .site-header__mobile-cta-tertiary:hover { color: var(--color-burgundy); } /* ========================================================================== Dark Header Variant For pages starting with dark hero/atmosphere (homepage evening mode, etc.) Applied via headerVariant: "dark" in page JSON ========================================================================== */ .site-header--dark { position: fixed; left: 0; right: 0; background-color: transparent; border-bottom-color: transparent; } .site-header--dark .site-header__nav-link { color: var(--color-ivory); } .site-header--dark .site-header__nav-link:hover { color: var(--color-gold-light); background-color: var(--color-ivory-08); } .site-header--dark .site-header__phone { color: var(--color-ivory); } .site-header--dark .site-header__phone:hover { color: var(--color-gold-light); } .site-header--dark .site-header__cta { background-color: var(--color-gold); color: var(--color-walnut); border-color: var(--color-gold); } .site-header--dark .site-header__cta:hover { background-color: var(--color-gold-dark); border-color: var(--color-gold-dark); } .site-header--dark .site-header__menu-toggle-bar { background-color: var(--color-ivory); } .site-header--dark .site-header__logo-img { filter: brightness(0) invert(1); } /* Dropdown stays light even in dark mode */ .site-header--dark .site-header__dropdown { background-color: var(--color-white); border-color: var(--color-border); } .site-header--dark .site-header__dropdown a { color: var(--color-text-primary); } .site-header--dark .site-header__dropdown a:hover { background-color: var(--color-ivory); color: var(--color-burgundy); } /* ========================================================================== Scrolled State Applied via JavaScript when page is scrolled past 50px (JS already exists in main.js adding .site-header--scrolled) ========================================================================== */ .site-header--scrolled { background-color: var(--color-ivory); border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); } /* When scrolled, revert dark variant to light appearance */ .site-header--scrolled.site-header--dark .site-header__nav-link { color: var(--color-text-primary); } .site-header--scrolled.site-header--dark .site-header__nav-link:hover { color: var(--color-burgundy); background-color: var(--color-ivory-dark); } .site-header--scrolled.site-header--dark .site-header__phone { color: var(--color-text-primary); } .site-header--scrolled.site-header--dark .site-header__phone:hover { color: var(--color-burgundy); } .site-header--scrolled.site-header--dark .site-header__cta { background-color: var(--color-burgundy); color: var(--color-white); border-color: var(--color-burgundy); } .site-header--scrolled.site-header--dark .site-header__cta:hover { background-color: var(--color-burgundy-dark); border-color: var(--color-burgundy-dark); } /* Secondary CTA — ghost/outline style (Plan an Event) */ .site-header__cta--secondary { background-color: transparent; color: var(--color-burgundy); border: 1px solid var(--color-burgundy); margin-right: var(--space-2); } .site-header__cta--secondary:hover { background-color: var(--color-burgundy); color: var(--color-white); } /* Dark header variant — secondary CTA */ .site-header--dark .site-header__cta--secondary { color: var(--color-ivory); border-color: var(--color-ivory); background-color: transparent; } .site-header--dark .site-header__cta--secondary:hover { background-color: var(--color-ivory); color: var(--color-burgundy); } /* Scrolled dark header — secondary CTA */ .site-header--scrolled.site-header--dark .site-header__cta--secondary { color: var(--color-burgundy); border-color: var(--color-burgundy); background-color: transparent; } .site-header--scrolled.site-header--dark .site-header__cta--secondary:hover { background-color: var(--color-burgundy); color: var(--color-white); } .site-header--scrolled.site-header--dark .site-header__menu-toggle-bar { background-color: var(--color-charcoal); } .site-header--scrolled.site-header--dark .site-header__logo-img { filter: none; } /* Transition for smooth scroll state changes */ .site-header, .site-header .site-header__nav-link, .site-header .site-header__phone, .site-header .site-header__cta, .site-header .site-header__menu-toggle-bar, .site-header .site-header__logo-img { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease; } /* --- Inlined from _footer.css --- */ /* ========================================================================== Footer Component Styles File: styles/_footer.css Direction-9 footer: 5-column grid (brand, dining, events, about, visit), icon-accented contact items, structured hours rows, refined social links. ========================================================================== */ .site-footer { background-color: var(--color-charcoal); color: var(--color-text-on-dark); padding-top: 6rem; } /* -------------------------------------------------------------------------- Footer Grid — 5-column layout on desktop -------------------------------------------------------------------------- */ .site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); } @media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); } } @media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: var(--space-6); } } /* -------------------------------------------------------------------------- Brand Column -------------------------------------------------------------------------- */ .site-footer__brand { max-width: 320px; } .site-footer__logo { text-decoration: none; display: block; margin-bottom: var(--space-5); } .site-footer__logo img, .site-footer__logo-img { height: 32px; width: auto; display: block; filter: brightness(0) invert(1); } .site-footer__tagline { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-on-dark-muted); margin-bottom: var(--space-6); } /* -------------------------------------------------------------------------- Social Links — subtle bordered circles -------------------------------------------------------------------------- */ .site-footer__social { display: flex; gap: var(--space-3); } .site-footer__social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid rgba(250, 247, 242, 0.08); color: var(--color-text-on-dark-subtle); transition: color 400ms var(--ease-luxe), border-color 400ms var(--ease-luxe), background-color 400ms var(--ease-luxe); } .site-footer__social-link:hover { color: var(--color-gold); border-color: rgba(201, 169, 98, 0.3); background-color: rgba(201, 169, 98, 0.06); } .site-footer__social-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; } /* -------------------------------------------------------------------------- Navigation Columns — heading + link list -------------------------------------------------------------------------- */ .site-footer__nav-heading { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-normal); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold-muted); margin-bottom: var(--space-5); } .site-footer__nav-list { display: flex; flex-direction: column; /* gap reduced from 10px because each anchor now provides its own padding-block (var(--space-3) = 12px each side) for a 44px tap target */ gap: 0; list-style: none; margin: 0; padding: 0; } .site-footer__nav-link, .site-footer__nav-list a { display: inline-block; font-size: var(--text-sm); /* WCAG AA: --on-dark-subtle (rgba 0.45) on walnut = 4.27:1, fails AA for body. --on-dark-muted (rgba 0.7) composites to ~8.5:1 — passes AA. */ color: var(--color-text-on-dark-muted); text-decoration: none; transition: color 400ms var(--ease-luxe); /* Tap-target compliance: pad each link so the hit area is ≥44px tall without visually altering the column rhythm too much. The list-gap drops to 0 since padding now provides the breathing room. */ padding-block: var(--space-3); min-height: 44px; } .site-footer__nav-link:hover, .site-footer__nav-list a:hover { color: var(--color-ivory); } /* Legacy nav group — backward-compatible with existing 2+4-col layout */ .site-footer__nav-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } @media (min-width: 640px) { .site-footer__nav-group { grid-template-columns: repeat(4, 1fr); } } /* -------------------------------------------------------------------------- Contact Items — icon + text pairs -------------------------------------------------------------------------- */ .site-footer__contact-item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); /* AA contrast — was --on-dark-subtle (4.27:1, fails). */ color: var(--color-text-on-dark-muted); line-height: var(--leading-relaxed); } .site-footer__contact-item + .site-footer__contact-item { margin-top: var(--space-3); } .site-footer__contact-icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--color-gold-muted); } /* Legacy contact block */ .site-footer__contact { font-style: normal; font-size: var(--text-sm); /* AA contrast — was --on-dark-subtle (4.27:1, fails). */ color: var(--color-text-on-dark-muted); margin-bottom: var(--space-4); line-height: var(--leading-relaxed); } .site-footer__contact a { color: var(--color-ivory); text-decoration: none; transition: color var(--transition-fast); } .site-footer__contact a:hover { color: var(--color-gold); } /* -------------------------------------------------------------------------- Hours — structured rows with day/time columns -------------------------------------------------------------------------- */ .site-footer__hours-heading { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-normal); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold-muted); margin-bottom: var(--space-3); } .site-footer__hours { margin-top: var(--space-5); } .site-footer__hours-row { display: flex; justify-content: space-between; font-size: var(--text-sm); /* AA contrast — was --on-dark-subtle (4.27:1, fails). */ color: var(--color-text-on-dark-muted); padding: 6px 0; border-bottom: 1px solid rgba(250, 247, 242, 0.04); } .site-footer__hours-day { color: var(--color-text-on-dark-muted); } /* -------------------------------------------------------------------------- Footer Bottom — copyright + legal links -------------------------------------------------------------------------- */ .site-footer__bottom { margin-top: var(--space-16); padding: var(--space-6) 0; border-top: 1px solid rgba(250, 247, 242, 0.05); display: flex; flex-direction: column; gap: var(--space-4); align-items: center; text-align: center; } @media (min-width: 768px) { .site-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } } .site-footer__copyright { font-size: var(--text-xs); /* AA contrast — was --on-dark-subtle (4.27:1, fails). */ color: var(--color-text-on-dark-muted); margin: 0; } .site-footer__legal { display: flex; gap: var(--space-5); } .site-footer__legal a, .site-footer__legal-link { display: inline-block; font-size: var(--text-xs); /* AA contrast — was --on-dark-subtle (4.27:1, fails). */ color: var(--color-text-on-dark-muted); text-decoration: none; transition: color var(--transition-fast); /* Tap-target padding: lift hit-area to ≥44px without changing visual size. */ padding-block: var(--space-3); min-height: 44px; /* Center text vertically inside the inflated min-height */ display: inline-flex; align-items: center; } .site-footer__legal a:hover, .site-footer__legal-link:hover { color: var(--color-ivory); } /* -------------------------------------------------------------------------- Main Column — backward-compatible with existing 2-col footer layout If the footer uses .site-footer__main instead of .site-footer__grid, these styles apply. -------------------------------------------------------------------------- */ .site-footer__main { display: grid; gap: var(--space-10); margin-bottom: var(--space-12); } @media (min-width: 768px) { .site-footer__main { grid-template-columns: 1fr 2fr; gap: var(--space-16); } } /* Page-Specific Styles */ /* --- Inlined from _home.css --- */ /* ========================================================================== The Alexander — Homepage Styles Page-specific styles for the homepage (page--home) ========================================================================== */ /* Homepage atmosphere zones — scroll-as-arrival transitions */ .page--home .section { transition: background-color 1s ease; } /* Homepage intro — slightly more breathing room */ .page--home .section:first-of-type { padding-top: var(--space-20); } @media (min-width: 768px) { .page--home .section:first-of-type { padding-top: var(--space-24); } } /* --- Scroll-driven animation support --- */ /* Split-overlap: contain clip-path and scale animations */ .page--home .split-overlap { overflow: hidden; } .page--home .split-overlap__image { will-change: clip-path; } /* Word-by-word closing moment reveal */ .closing-word { transition: none; /* GSAP handles all animation */ } /* Testimonial cards — allow horizontal overflow for drift entrance */ .page--home .testimonials { overflow: visible; } /* --- Inlined from _menus.css --- */ /* ========================================================================== The Alexander — Menu Page Styles Shared styles for dinner and drinks menu pages. Dining pages use the light atmosphere (ivory backgrounds). These styles layer on top of the base menu styles in _sections.css, adding refinements that match the direction-9 design system. Typography hierarchy: Category headings — Cormorant Garamond, weight 500 (medium) Subsection headings — Cormorant Garamond, weight 500 (medium) Item names — Cormorant Garamond, weight 400 (normal) Descriptions — DM Sans, muted color, relaxed line-height Prices — Gold accent, medium weight ========================================================================== */ /* Menu page hero — compact variant specific adjustments */ .page--dinner .hero--compact, .page--drinks .hero--compact { min-height: 35vh; } @media (min-width: 768px) { .page--dinner .hero--compact, .page--drinks .hero--compact { min-height: 40vh; } } /* -------------------------------------------------------------------------- Menu Section Background — ivory-warm creates warmth and depth against the default ivory page background. Feels like linen on paper. -------------------------------------------------------------------------- */ .page--dinner .menu, .page--drinks .menu { position: relative; } /* -------------------------------------------------------------------------- Menu Intro — centered lead-in with refined typography -------------------------------------------------------------------------- */ .menu-intro { text-align: center; max-width: 560px; margin: 0 auto var(--space-14); } .menu-intro__text { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-normal); font-style: italic; color: var(--color-text-secondary); line-height: var(--leading-relaxed); } .menu-intro__note { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; letter-spacing: var(--tracking-wide); margin-top: var(--space-4); } /* -------------------------------------------------------------------------- Gold Rule Dividers Between Menu Categories A centered gold gradient line placed between major menu categories to add visual rhythm consistent with the direction-9 design system. -------------------------------------------------------------------------- */ .page--dinner .menu-category + .menu-category::before, .page--drinks .menu-category + .menu-category::before { content: ''; display: block; width: 120px; height: 1px; background: var(--gradient-gold-shine); margin: 0 auto var(--space-16); opacity: 0.6; } /* -------------------------------------------------------------------------- Category Headers — Cormorant Garamond at weight 500 (medium) 500 is the sweet spot: elegant without appearing too heavy. -------------------------------------------------------------------------- */ .page--dinner .menu-category__name, .page--drinks .menu-category__name { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--color-burgundy); margin-bottom: var(--space-3); } .page--dinner .menu-category__description, .page--drinks .menu-category__description { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-bottom: var(--space-10); } /* -------------------------------------------------------------------------- Subsection Headers — wine types, beer types, etc. Same weight as category for consistency; smaller size creates hierarchy. -------------------------------------------------------------------------- */ .page--dinner .menu-subsection__name, .page--drinks .menu-subsection__name { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--color-burgundy); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-2); } /* -------------------------------------------------------------------------- Menu Items — refined spacing and typography -------------------------------------------------------------------------- */ .page--dinner .menu-item, .page--drinks .menu-item { padding-bottom: var(--space-5); border-bottom-color: var(--color-border-subtle); } .page--dinner .menu-item:last-child, .page--drinks .menu-item:last-child { border-bottom: none; padding-bottom: 0; } /* -------------------------------------------------------------------------- Item Name — Cormorant Garamond at weight 400 (normal) Lighter than category headings, creating clear typographic hierarchy. -------------------------------------------------------------------------- */ .page--dinner .menu-item__name, .page--drinks .menu-item__name { font-weight: var(--weight-normal); color: var(--color-text-primary); line-height: var(--leading-snug); } /* -------------------------------------------------------------------------- Item Description — softer, more breathing room -------------------------------------------------------------------------- */ .page--dinner .menu-item__description, .page--drinks .menu-item__description { color: var(--color-text-muted); line-height: var(--leading-loose); letter-spacing: var(--tracking-normal); } /* -------------------------------------------------------------------------- Price — Gold accent for refined distinction Gold reads as sophisticated pricing. Medium weight keeps it readable without competing with item names. -------------------------------------------------------------------------- */ .page--dinner .menu-item__price, .page--drinks .menu-item__price { color: var(--color-gold-dark); font-weight: var(--weight-medium); font-size: var(--text-base); letter-spacing: var(--tracking-wide); } /* -------------------------------------------------------------------------- Wine Region — subtle italic secondary info -------------------------------------------------------------------------- */ .page--dinner .menu-item__region, .page--drinks .menu-item__region { color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); } /* -------------------------------------------------------------------------- Modifier — italic gold for add-ons (e.g., "With Chicken +$8") -------------------------------------------------------------------------- */ .page--dinner .menu-item__modifier, .page--drinks .menu-item__modifier { color: var(--color-gold); font-size: var(--text-xs); font-style: italic; letter-spacing: var(--tracking-wide); } /* -------------------------------------------------------------------------- Note — weekly special indicators (e.g., "Thursday", "Friday & Saturday") -------------------------------------------------------------------------- */ .page--dinner .menu-item__note, .page--drinks .menu-item__note { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-burgundy); letter-spacing: var(--tracking-wider); text-transform: uppercase; } /* -------------------------------------------------------------------------- Featured Item — elegant gold accent treatment Signature items get a subtle gold left border and warm background to set them apart without being loud. -------------------------------------------------------------------------- */ .page--dinner .menu-item:has(.featured-tag), .page--drinks .menu-item:has(.featured-tag) { border-left: 2px solid var(--color-gold); padding-left: var(--space-5); background-color: var(--color-gold-faint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-left: calc(-1 * var(--space-3)); padding-right: var(--space-3); } .page--dinner .featured-tag, .page--drinks .featured-tag { background-color: transparent; color: var(--color-gold-dark); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); border: 1px solid var(--color-gold-muted); padding: var(--space-0-5) var(--space-2); } /* -------------------------------------------------------------------------- Menu Footer — gold rule above, refined CTA -------------------------------------------------------------------------- */ .page--dinner .menu-footer, .page--drinks .menu-footer { border-top-color: transparent; position: relative; margin-top: var(--space-16); padding-top: var(--space-10); } .page--dinner .menu-footer::before, .page--drinks .menu-footer::before { content: ''; display: block; width: 120px; height: 1px; background: var(--gradient-gold-shine); margin: 0 auto var(--space-10); opacity: 0.6; } .page--dinner .menu-footer__note, .page--drinks .menu-footer__note { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); } /* -------------------------------------------------------------------------- Dietary/Local Tags — soften to match design system -------------------------------------------------------------------------- */ .page--dinner .dietary-tag, .page--drinks .dietary-tag { background-color: var(--color-ivory-warm); color: var(--color-text-muted); font-size: 0.6875rem; letter-spacing: var(--tracking-wider); font-weight: var(--weight-normal); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-sm); } .page--dinner .local-tag, .page--drinks .local-tag { color: var(--color-gold-dark); background-color: var(--color-gold-faint); border: 1px solid rgba(201, 169, 98, 0.2); font-size: 0.6875rem; letter-spacing: var(--tracking-wider); font-weight: var(--weight-normal); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-sm); } /* -------------------------------------------------------------------------- Responsive Adjustments -------------------------------------------------------------------------- */ @media (min-width: 768px) { .menu-intro { margin-bottom: var(--space-16); } .page--dinner .menu-category__name, .page--drinks .menu-category__name { margin-bottom: var(--space-3); } .page--dinner .menu-category__description, .page--drinks .menu-category__description { margin-bottom: var(--space-12); } } /* ========================================================================== EVENING MODE — Dark palette for dinner & drinks menus When section.theme == 'evening', menu gets candlelit dark treatment. ========================================================================== */ /* --- Zone Layout --- */ .menu-section--evening { padding: 0; } .menu-intro-zone { padding: var(--space-16) 0 var(--space-12); } .menu-body-zone { padding: var(--space-14) 0 var(--space-16); } /* --- Two-Column Grid (desktop) --- */ @media (min-width: 768px) { .menu--evening .menu-items { grid-template-columns: 1fr 1fr; column-gap: var(--space-10); } } /* --- Color Flips Under .menu--evening --- */ .menu--evening .menu-category__name { color: var(--color-gold); } .menu--evening .menu-category__description { color: var(--color-text-on-dark-muted); } .menu--evening .menu-item__name { color: var(--color-text-on-dark); } .menu--evening .menu-item__description { color: var(--color-text-on-dark-muted); } .menu--evening .menu-item__price { color: var(--color-gold); } .menu--evening .menu-item__modifier { color: var(--color-gold-light); } .menu--evening .menu-item__note { color: var(--color-gold); } .menu--evening .menu-item__region { color: var(--color-text-on-dark-subtle); } .menu--evening .menu-item { border-bottom-color: rgba(250, 247, 242, 0.08); } .menu--evening .menu-subsection__name { color: var(--color-gold); border-bottom-color: rgba(250, 247, 242, 0.1); } /* --- Tags on Dark --- */ .menu--evening .dietary-tag { background-color: rgba(250, 247, 242, 0.08); color: var(--color-text-on-dark-muted); } .menu--evening .local-tag { color: var(--color-gold); background-color: var(--color-gold-faint); border-color: rgba(201, 169, 98, 0.3); } /* --- Featured Items on Dark --- */ .menu--evening .menu-item:has(.featured-tag) { background-color: var(--color-amber-glow); margin-left: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-3)); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); } /* --- Gold Rule Dividers — more visible on dark --- */ .menu--evening .menu-category + .menu-category::before { opacity: 0.8; } /* --- Footer on Dark --- */ .menu--evening .menu-footer::before { opacity: 0.8; } .menu--evening .menu-footer__note { color: var(--color-text-on-dark-muted); } /* .menu--evening button context is handled by styles/_buttons.css */ /* --- Evening Responsive --- */ @media (min-width: 768px) { .menu-intro-zone { padding: var(--space-20) 0 var(--space-14); } .menu-body-zone { padding: var(--space-16) 0 var(--space-20); } } /* ========================================================================== PRINTED MENU MODE — Single-column, centered, matching the physical menu Scoped entirely under .menu--printed to avoid affecting drinks menu. ========================================================================== */ /* --- Layout: single centered column --- */ .menu--printed .menu-items { display: flex; flex-direction: column; gap: var(--space-5); } @media (min-width: 768px) { .menu--printed .menu-items { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } } .menu--printed .menu-category { text-align: center; margin-bottom: var(--space-14); } /* --- Category headings: ALL CAPS, tracked, gold --- */ .menu--printed .menu-category__name { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-normal); letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-8); } /* --- Category modifier (e.g., "add chicken...") --- */ .menu--printed .menu-category__modifier { font-family: var(--font-body); font-size: var(--text-xs); font-style: italic; color: var(--color-gold-light); letter-spacing: var(--tracking-wide); text-align: center; margin-top: calc(-1 * var(--space-4)); margin-bottom: var(--space-8); } /* --- Gold dividers between courses — wider, animated --- */ .menu--printed .menu-category + .menu-category::before, .menu--printed .menu-category + .menu-printed__interstitial::before, .menu--printed .menu-printed__interstitial + .menu-category::before { content: ''; display: block; width: 0; height: 1px; background: var(--gradient-gold-shine); margin: var(--space-4) auto var(--space-14); opacity: 1; transition: width 1.2s cubic-bezier(0.19, 1, 0.22, 1); } .menu--printed .menu-category + .menu-category.cin-visible::before, .menu--printed .menu-category + .menu-printed__interstitial.cin-visible::before, .menu--printed .menu-printed__interstitial + .menu-category.cin-visible::before { width: 180px; } /* --- Item layout: centered, inline name + price --- */ .menu--printed .menu-item { border-bottom: none; padding-bottom: var(--space-2); text-align: center; } .menu--printed .menu-item__header { display: block; text-align: center; margin-bottom: var(--space-1); } .menu--printed .menu-item__name { display: inline; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-normal); color: var(--color-ivory); text-transform: none; } .menu--printed .menu-item__price { display: inline; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-normal); color: var(--color-ivory); margin-left: var(--space-2); } /* --- Star marker for house specialties --- */ .menu--printed .menu-item__star { color: var(--color-gold); font-family: var(--font-heading); margin-right: 2px; } /* --- Descriptions: italic, muted, centered --- */ .menu--printed .menu-item__description { text-align: center; font-family: var(--font-body); font-size: var(--text-sm); font-style: italic; color: var(--color-text-on-dark-subtle); line-height: var(--leading-relaxed); max-width: 40ch; margin: 0 auto; } /* --- Notes (e.g., "Thursday · $10 each") --- */ .menu--printed .menu-item__note { text-align: center; font-size: var(--text-xs); color: var(--color-gold); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-top: var(--space-1); } /* --- Modifier on individual items --- */ .menu--printed .menu-item__modifier { text-align: center; font-size: var(--text-xs); font-style: italic; color: var(--color-gold-light); margin-top: var(--space-1); } /* --- Decorative flourish: "The Alexander" in accent font --- */ .menu-printed__flourish { text-align: center; margin-bottom: var(--space-16); padding-bottom: var(--space-8); position: relative; } .menu-printed__flourish-text { font-family: var(--font-accent); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: var(--weight-normal); color: var(--color-gold); letter-spacing: 0.02em; display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease, transform 1.2s ease; } .menu-printed__flourish-text.cin-visible { opacity: 1; transform: translateY(0); } .menu-printed__flourish::after { content: ''; display: block; width: 200px; height: 1px; background: var(--gradient-gold-shine); margin: var(--space-6) auto 0; opacity: 0.6; } /* --- Interstitial: thank-you note between courses --- */ .menu-printed__interstitial { text-align: center; padding: var(--space-10) 0 var(--space-14); max-width: 440px; margin: 0 auto; } .menu-printed__interstitial-text { font-family: var(--font-heading); font-size: var(--text-base); font-style: italic; font-weight: var(--weight-normal); color: var(--color-text-on-dark-muted); line-height: var(--leading-relaxed); } .menu-printed__interstitial-rule { width: 60px; height: 1px; background: var(--gradient-gold-shine); margin: var(--space-6) auto; opacity: 0.5; } /* --- Hover micro-interaction on items --- */ .menu--printed .menu-item { position: relative; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); transition: background-color 0.4s ease; } .menu--printed .menu-item:hover { background-color: rgba(201, 169, 98, 0.06); } .menu--printed .menu-item::after { content: ''; display: block; width: 0; height: 1px; background: var(--gradient-gold-shine); margin: var(--space-2) auto 0; opacity: 0; transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease; } .menu--printed .menu-item:hover::after { width: 80px; opacity: 0.5; } /* --- Menu footer on printed --- */ .menu--printed + .menu-footer { text-align: center; max-width: 560px; margin: var(--space-16) auto 0; } /* --- Scroll reveal defaults (visible by default, JS adds hidden) --- */ .menu--printed [data-menu-course] { opacity: 1; transform: translateY(0); transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); } .menu--printed [data-menu-item] { opacity: 1; transform: translateY(0); transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); } /* JS adds this class to hide before reveal */ .menu--printed .menu-reveal-hidden { opacity: 0; transform: translateY(20px); } .menu--printed .menu-reveal-visible { opacity: 1; transform: translateY(0); } /* --- Inlined from _events.css --- */ /* ========================================================================== The Alexander — Event Page Styles Evening-aware component overrides for event pages. Event pages use the dual-atmosphere system: daylight sections use the standard light palette, while evening sections (bg-espresso, bg-deep-walnut, bg-walnut) switch to gold accents + ivory text. These styles layer ON TOP of the base component styles in _sections.css and _components.css. Only overrides are defined here — no duplication. Dependencies: _variables.css, _atmosphere.css, _sections.css, _components.css ========================================================================== */ /* ========================================================================== FIRST SECTION SPACING — Post-Breadcrumb Breathing Room Event sub-pages with breadcrumbs need extra space between the breadcrumb bar and the first content section. Homepage has no breadcrumb so this naturally doesn't affect it. P1-3: Reduced ~30% from original values (space-12→space-8, space-16→space-12) to tighten the breadcrumb strip to the hero and eliminate the orphaned-strip read. ========================================================================== */ .breadcrumb + section, .breadcrumb + hr { margin-top: var(--space-8); } @media (min-width: 768px) { .breadcrumb + section, .breadcrumb + hr { margin-top: var(--space-12); } } /* ========================================================================== FEATURES GRID — Evening Mode Gold headings, ivory text, subtle gold left-border on hover. ========================================================================== */ .bg-espresso .feature-card, .bg-deep-walnut .feature-card, .bg-walnut .feature-card { background-color: rgba(250, 247, 242, 0.04); border: 1px solid rgba(250, 247, 242, 0.06); border-left: 2px solid transparent; transition: border-left-color var(--transition-normal), background-color var(--transition-normal); } .bg-espresso .feature-card:hover, .bg-deep-walnut .feature-card:hover, .bg-walnut .feature-card:hover { border-left-color: var(--color-gold); background-color: rgba(250, 247, 242, 0.06); } .bg-espresso .feature-card__title, .bg-deep-walnut .feature-card__title, .bg-walnut .feature-card__title { color: var(--color-gold); } .bg-espresso .feature-card__text, .bg-deep-walnut .feature-card__text, .bg-walnut .feature-card__text { color: var(--color-text-on-dark-muted); } .bg-espresso .feature-card__detail, .bg-deep-walnut .feature-card__detail, .bg-walnut .feature-card__detail { color: var(--color-gold-muted); } .bg-espresso .feature-card__list, .bg-deep-walnut .feature-card__list, .bg-walnut .feature-card__list { color: var(--color-text-on-dark-muted); } .bg-espresso .feature-card__link, .bg-deep-walnut .feature-card__link, .bg-walnut .feature-card__link { color: var(--color-gold-light); } .bg-espresso .feature-card__link:hover, .bg-deep-walnut .feature-card__link:hover, .bg-walnut .feature-card__link:hover { color: var(--color-gold); } /* ========================================================================== INFO GRID — Evening Mode Gold titles, ivory content, subtle borders. ========================================================================== */ .bg-espresso .info-block__title, .bg-deep-walnut .info-block__title, .bg-walnut .info-block__title { color: var(--color-gold); } .bg-espresso .info-block__content, .bg-deep-walnut .info-block__content, .bg-walnut .info-block__content { color: var(--color-text-on-dark-muted); } .bg-espresso .info-block__list, .bg-deep-walnut .info-block__list, .bg-walnut .info-block__list { color: var(--color-text-on-dark-muted); } .bg-espresso .info-block__note, .bg-deep-walnut .info-block__note, .bg-walnut .info-block__note { color: var(--color-text-on-dark-subtle); } .bg-espresso .info-block__link, .bg-deep-walnut .info-block__link, .bg-walnut .info-block__link { color: var(--color-gold-light); } .bg-espresso .info-block__link:hover, .bg-deep-walnut .info-block__link:hover, .bg-walnut .info-block__link:hover { color: var(--color-gold); } /* Info blocks as cards on dark backgrounds */ .bg-espresso .info-block, .bg-deep-walnut .info-block, .bg-walnut .info-block { border: 1px solid var(--color-ivory-08); border-radius: var(--radius-md); padding: var(--space-6); } /* ========================================================================== TIMELINE — Evening Mode Gold connecting line, gold markers, ivory text. ========================================================================== */ .bg-espresso .timeline::before, .bg-deep-walnut .timeline::before, .bg-walnut .timeline::before { background-color: var(--color-gold-muted); } .bg-espresso .timeline__marker, .bg-deep-walnut .timeline__marker, .bg-walnut .timeline__marker { background-color: var(--color-gold); } .bg-espresso .timeline__title, .bg-deep-walnut .timeline__title, .bg-walnut .timeline__title { color: var(--color-ivory); } .bg-espresso .timeline__timing, .bg-deep-walnut .timeline__timing, .bg-walnut .timeline__timing { color: var(--color-gold); } .bg-espresso .timeline__text, .bg-espresso .timeline__note, .bg-deep-walnut .timeline__text, .bg-deep-walnut .timeline__note, .bg-walnut .timeline__text, .bg-walnut .timeline__note { color: var(--color-text-on-dark-muted); } /* ========================================================================== BANNER — Evening Mode + Gold Alert Variant ========================================================================== */ /* --- Base banner on dark backgrounds --- */ .bg-espresso .banner__headline, .bg-deep-walnut .banner__headline, .bg-walnut .banner__headline { color: var(--color-gold); } .bg-espresso .banner__content, .bg-deep-walnut .banner__content, .bg-walnut .banner__content { color: var(--color-text-on-dark-muted); } .bg-espresso .banner__note, .bg-deep-walnut .banner__note, .bg-walnut .banner__note { color: var(--color-text-on-dark-subtle); } /* --- Gold alert variant (celebrations urgency banner) --- */ .banner--gold { background-color: var(--color-ivory-warm); border-left: 4px solid var(--color-gold); padding: var(--space-6) var(--space-8); } .banner--gold .banner__headline { color: var(--color-gold-dark); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-medium); margin-bottom: var(--space-2); } .banner--gold .banner__content { color: var(--color-text-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); } /* --- Burgundy banner base styling --- */ .banner--burgundy { background-color: var(--color-burgundy); padding: var(--space-8) var(--space-8); text-align: center; } .banner--burgundy .banner__headline { color: var(--color-ivory); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-medium); margin-bottom: var(--space-2); } .banner--burgundy .banner__content { color: rgba(250, 247, 242, 0.85); font-size: var(--text-base); line-height: var(--leading-relaxed); max-width: 65ch; margin: 0 auto; } .banner--burgundy .banner__note { color: var(--color-gold-light); font-size: var(--text-sm); margin-top: var(--space-3); } /* ========================================================================== SAMPLE MENU — Evening Mode Gold course/category names, ivory item text, gold hairline separators. ========================================================================== */ .bg-espresso .sample-menu__course-name, .bg-deep-walnut .sample-menu__course-name, .bg-walnut .sample-menu__course-name, .bg-espresso .sample-menu__category-name, .bg-deep-walnut .sample-menu__category-name, .bg-walnut .sample-menu__category-name { color: var(--color-gold); } .bg-espresso .sample-menu__items, .bg-deep-walnut .sample-menu__items, .bg-walnut .sample-menu__items { color: var(--color-text-on-dark-muted); } .bg-espresso .sample-menu__items li, .bg-deep-walnut .sample-menu__items li, .bg-walnut .sample-menu__items li { color: var(--color-text-on-dark-muted); } /* Gold hairline between courses on dark backgrounds */ .bg-espresso .sample-menu__course + .sample-menu__course, .bg-deep-walnut .sample-menu__course + .sample-menu__course, .bg-walnut .sample-menu__course + .sample-menu__course { border-top: 1px solid var(--color-gold-faint); padding-top: var(--space-6); margin-top: var(--space-6); } /* Sample menu base styling (applies everywhere) */ .sample-menu { max-width: 600px; margin: 0 auto; } .sample-menu__course, .sample-menu__category { margin-bottom: var(--space-8); } .sample-menu__course:last-child, .sample-menu__category:last-child { margin-bottom: 0; } .sample-menu__course-name, .sample-menu__category-name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--color-burgundy); margin-bottom: var(--space-3); letter-spacing: var(--tracking-tight); } .sample-menu__items { list-style: none; padding: 0; margin: 0; } /* P1-4: Removed font-style: italic — dish descriptions at body size wrap to 3+ lines of italic serif on mobile, making them hard to scan. Keeping course name italic (via --font-heading Cormorant Garamond) for stylistic hierarchy; dish text is now regular weight for legibility. */ .sample-menu__items li { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); padding: var(--space-2) 0; font-style: normal; } /* ========================================================================== BEVERAGE PACKAGES — Evening Mode Gold package names, ivory text, gold-bordered cards. ========================================================================== */ .beverage-packages { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .beverage-packages { grid-template-columns: repeat(2, 1fr); } } .beverage-package { padding: var(--space-6); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); } .beverage-package__name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--color-burgundy); margin-bottom: var(--space-3); } .beverage-package__includes { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-2); } .beverage-package__note { font-size: var(--text-xs); color: var(--color-gold-dark); font-style: italic; } /* --- Additional Bar Options (Consumption / Cash Bar) --- */ /* Two secondary line-item options that sit below the main package tier cards. Two-column on desktop, stacked on mobile, gold hairline separator between items. */ /* P2-4: Small italic section label — "Alternatives" — visually separates the consumption/cash bar options from the main three tier packages. */ .beverage-packages__alternatives-label { margin-top: var(--space-10); margin-bottom: 0; font-family: var(--font-heading); font-size: var(--text-base); font-style: italic; font-weight: var(--weight-light); color: var(--color-text-secondary); text-align: center; letter-spacing: var(--tracking-wide); } /* On evening dark backgrounds, lighten the label */ .bg-espresso .beverage-packages__alternatives-label, .bg-deep-walnut .beverage-packages__alternatives-label, .bg-walnut .beverage-packages__alternatives-label { color: var(--color-text-on-dark-muted); } .beverage-packages__additional { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border-subtle); } @media (min-width: 768px) { .beverage-packages__additional { grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-8); } } .beverage-packages__additional-item { padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border-subtle); } .beverage-packages__additional-item:last-child { border-bottom: none; } @media (min-width: 768px) { .beverage-packages__additional-item { border-bottom: none; padding: var(--space-4) 0; border-right: none; /* gold hairline between columns handled by gap */ } /* Gold hairline separator between the two desktop columns */ .beverage-packages__additional-item:first-child { padding-right: var(--space-8); border-right: 1px solid var(--color-gold-faint); } .beverage-packages__additional-item:last-child { padding-left: var(--space-8); } } .beverage-packages__additional-name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-burgundy); margin-bottom: var(--space-2); } .beverage-packages__additional-description { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: 0; } /* Evening overrides */ .bg-espresso .beverage-packages__additional, .bg-deep-walnut .beverage-packages__additional, .bg-walnut .beverage-packages__additional { border-top-color: var(--color-gold-faint); } .bg-espresso .beverage-packages__additional-item, .bg-deep-walnut .beverage-packages__additional-item, .bg-walnut .beverage-packages__additional-item { border-bottom-color: var(--color-ivory-08); } @media (min-width: 768px) { .bg-espresso .beverage-packages__additional-item:first-child, .bg-deep-walnut .beverage-packages__additional-item:first-child, .bg-walnut .beverage-packages__additional-item:first-child { border-right-color: var(--color-gold-faint); } } .bg-espresso .beverage-packages__additional-name, .bg-deep-walnut .beverage-packages__additional-name, .bg-walnut .beverage-packages__additional-name { color: var(--color-gold); } .bg-espresso .beverage-packages__additional-description, .bg-deep-walnut .beverage-packages__additional-description, .bg-walnut .beverage-packages__additional-description { color: var(--color-text-on-dark-muted); } /* --- End additional bar options --- */ .beverage-additions { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--color-border-subtle); } .beverage-additions h4 { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-medium); margin-bottom: var(--space-4); } .beverage-additions ul { list-style: none; padding: 0; } .beverage-additions li { font-size: var(--text-sm); color: var(--color-text-secondary); padding: var(--space-2) 0; padding-left: var(--space-5); position: relative; } .beverage-additions li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background-color: var(--color-gold); border-radius: var(--radius-full); } /* Evening overrides */ .bg-espresso .beverage-package, .bg-deep-walnut .beverage-package, .bg-walnut .beverage-package { border-color: var(--color-gold-faint); background-color: rgba(250, 247, 242, 0.03); } .bg-espresso .beverage-package__name, .bg-deep-walnut .beverage-package__name, .bg-walnut .beverage-package__name { color: var(--color-gold); } .bg-espresso .beverage-package__includes, .bg-deep-walnut .beverage-package__includes, .bg-walnut .beverage-package__includes { color: var(--color-text-on-dark-muted); } .bg-espresso .beverage-package__note, .bg-deep-walnut .beverage-package__note, .bg-walnut .beverage-package__note { color: var(--color-gold-light); } /* Evening hover — lift, gold ring, subtle glow. Beverage cards are centered with no gold strip, so use an outer ring (box-shadow) instead of inset. */ .bg-espresso .beverage-package, .bg-deep-walnut .beverage-package, .bg-walnut .beverage-package { transition: transform 280ms var(--ease-luxe), background-color 280ms var(--ease-luxe), box-shadow 280ms var(--ease-luxe); will-change: transform; } .bg-espresso .beverage-package:hover, .bg-deep-walnut .beverage-package:hover, .bg-walnut .beverage-package:hover { transform: translateY(-4px); background-color: rgba(250, 247, 242, 0.06); box-shadow: 0 0 0 1px var(--color-gold), 0 12px 28px -16px rgba(201, 169, 98, 0.35); } @media (prefers-reduced-motion: reduce) { .bg-espresso .beverage-package:hover, .bg-deep-walnut .beverage-package:hover, .bg-walnut .beverage-package:hover { transform: none; } } .bg-espresso .beverage-additions, .bg-deep-walnut .beverage-additions, .bg-walnut .beverage-additions { border-top-color: var(--color-gold-faint); } .bg-espresso .beverage-additions li, .bg-deep-walnut .beverage-additions li, .bg-walnut .beverage-additions li { color: var(--color-text-on-dark-muted); } /* ========================================================================== CAPACITY TABLE — Evening Mode Gold header row, ivory text, subtle gold-faint cell borders. ========================================================================== */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .capacity-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .capacity-table th { font-family: var(--font-body); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-xs); color: var(--color-text-primary); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-border); text-align: left; } .capacity-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); } .capacity-table td:first-child { font-weight: var(--weight-medium); color: var(--color-text-primary); } .capacity-table tbody tr:last-child td { font-weight: var(--weight-semibold); color: var(--color-text-primary); border-bottom: 2px solid var(--color-border); } .capacity-notes { margin-top: var(--space-4); } .capacity-notes ul { list-style: none; padding: 0; } .capacity-notes li { font-size: var(--text-xs); color: var(--color-text-muted); padding: var(--space-1) 0; padding-left: var(--space-4); position: relative; } .capacity-notes li::before { content: '*'; position: absolute; left: 0; color: var(--color-gold); } /* Evening overrides */ .bg-espresso .capacity-table th, .bg-deep-walnut .capacity-table th, .bg-walnut .capacity-table th { color: var(--color-gold); border-bottom-color: var(--color-gold-faint); } .bg-espresso .capacity-table td, .bg-deep-walnut .capacity-table td, .bg-walnut .capacity-table td { color: var(--color-text-on-dark-muted); border-bottom-color: var(--color-ivory-08); } .bg-espresso .capacity-table td:first-child, .bg-deep-walnut .capacity-table td:first-child, .bg-walnut .capacity-table td:first-child { color: var(--color-ivory); } .bg-espresso .capacity-table tbody tr:last-child td, .bg-deep-walnut .capacity-table tbody tr:last-child td, .bg-walnut .capacity-table tbody tr:last-child td { color: var(--color-ivory); border-bottom-color: var(--color-gold-faint); } .bg-espresso .capacity-notes li, .bg-deep-walnut .capacity-notes li, .bg-walnut .capacity-notes li { color: var(--color-text-on-dark-subtle); } /* ========================================================================== SPACE DETAIL — Evening Mode Ivory headline, gold feature pills, ivory body text. ========================================================================== */ .bg-espresso .space-detail__name, .bg-deep-walnut .space-detail__name, .bg-walnut .space-detail__name { color: var(--color-ivory); } .bg-espresso .space-detail__description, .bg-deep-walnut .space-detail__description, .bg-walnut .space-detail__description { color: var(--color-text-on-dark-muted); } .bg-espresso .space-detail__dimensions, .bg-deep-walnut .space-detail__dimensions, .bg-walnut .space-detail__dimensions { color: var(--color-text-on-dark-muted); } .bg-espresso .space-detail__dimensions strong, .bg-deep-walnut .space-detail__dimensions strong, .bg-walnut .space-detail__dimensions strong { color: var(--color-ivory); } .bg-espresso .space-detail__capacity h4, .bg-deep-walnut .space-detail__capacity h4, .bg-walnut .space-detail__capacity h4 { color: var(--color-gold); } .bg-espresso .space-detail__capacity ul, .bg-deep-walnut .space-detail__capacity ul, .bg-walnut .space-detail__capacity ul { color: var(--color-text-on-dark-muted); } .bg-espresso .space-detail__features h4, .bg-deep-walnut .space-detail__features h4, .bg-walnut .space-detail__features h4 { color: var(--color-gold); } .bg-espresso .space-detail__features li, .bg-deep-walnut .space-detail__features li, .bg-walnut .space-detail__features li { color: var(--color-text-on-dark-muted); } .bg-espresso .space-detail__ideal h4, .bg-deep-walnut .space-detail__ideal h4, .bg-walnut .space-detail__ideal h4 { color: var(--color-gold); } .bg-espresso .space-detail__ideal li, .bg-deep-walnut .space-detail__ideal li, .bg-walnut .space-detail__ideal li { color: var(--color-text-on-dark-muted); } .bg-espresso .space-detail__floorplan a, .bg-deep-walnut .space-detail__floorplan a, .bg-walnut .space-detail__floorplan a { color: var(--color-gold-light); } .bg-espresso .space-detail__floorplan a:hover, .bg-deep-walnut .space-detail__floorplan a:hover, .bg-walnut .space-detail__floorplan a:hover { color: var(--color-gold); } /* Space detail base styling refinements */ .space-detail__name { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-normal); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); } .space-detail__description { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); } .space-detail__dimensions { margin-bottom: var(--space-6); } .space-detail__dimensions p { font-size: var(--text-sm); margin-bottom: var(--space-1); } .space-detail__capacity, .space-detail__features, .space-detail__ideal { margin-bottom: var(--space-6); } .space-detail__capacity h4, .space-detail__features h4, .space-detail__ideal h4 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-burgundy-muted); margin-bottom: var(--space-3); } .space-detail__capacity ul, .space-detail__features ul, .space-detail__ideal ul { font-size: var(--text-sm); padding-left: var(--space-4); list-style: disc; } .space-detail__capacity li, .space-detail__features li, .space-detail__ideal li { margin-bottom: var(--space-1); line-height: var(--leading-relaxed); } .space-detail__floorplan { margin-top: var(--space-4); } .space-detail__floorplan a { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-burgundy); } /* ========================================================================== PROCESS STEPS — Evening Mode Gold step numbers, ivory text. ========================================================================== */ .bg-espresso .process-step__number, .bg-deep-walnut .process-step__number, .bg-walnut .process-step__number { color: var(--color-walnut); background-color: var(--color-gold); } .bg-espresso .process-step__title, .bg-deep-walnut .process-step__title, .bg-walnut .process-step__title { color: var(--color-ivory); } .bg-espresso .process-step__description, .bg-deep-walnut .process-step__description, .bg-walnut .process-step__description { color: var(--color-text-on-dark-muted); } /* ========================================================================== FORM SECTION — Evening Mode Gold focus borders, ivory labels, dark input backgrounds. ========================================================================== */ .bg-espresso .form-label, .bg-deep-walnut .form-label, .bg-walnut .form-label { color: var(--color-ivory); } .bg-espresso .form-input, .bg-espresso .form-select, .bg-espresso .form-textarea, .bg-deep-walnut .form-input, .bg-deep-walnut .form-select, .bg-deep-walnut .form-textarea, .bg-walnut .form-input, .bg-walnut .form-select, .bg-walnut .form-textarea { background-color: rgba(250, 247, 242, 0.06); border-color: rgba(250, 247, 242, 0.15); color: var(--color-ivory); } .bg-espresso .form-input:focus, .bg-espresso .form-select:focus, .bg-espresso .form-textarea:focus, .bg-deep-walnut .form-input:focus, .bg-deep-walnut .form-select:focus, .bg-deep-walnut .form-textarea:focus, .bg-walnut .form-input:focus, .bg-walnut .form-select:focus, .bg-walnut .form-textarea:focus { border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.2); } .bg-espresso .form-input::placeholder, .bg-espresso .form-textarea::placeholder, .bg-deep-walnut .form-input::placeholder, .bg-deep-walnut .form-textarea::placeholder, .bg-walnut .form-input::placeholder, .bg-walnut .form-textarea::placeholder { color: var(--color-text-on-dark-subtle); } .bg-espresso .form__legend, .bg-deep-walnut .form__legend, .bg-walnut .form__legend { color: var(--color-ivory); border-bottom-color: var(--color-gold-faint); } .bg-espresso .form__privacy, .bg-deep-walnut .form__privacy, .bg-walnut .form__privacy { color: var(--color-text-on-dark-subtle); } .bg-espresso .form-hint, .bg-deep-walnut .form-hint, .bg-walnut .form-hint { color: var(--color-text-on-dark-subtle); } /* Sidebar on dark backgrounds */ .bg-espresso .form-layout__sidebar, .bg-deep-walnut .form-layout__sidebar, .bg-walnut .form-layout__sidebar { background-color: rgba(250, 247, 242, 0.04); border: 1px solid var(--color-ivory-08); } /* ========================================================================== PRICING OVERVIEW — Evening Mode Gold tier names, ivory text, gold-bordered tier cards. ========================================================================== */ /* --- Experience Cards --- */ .pricing-grid { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } } .pricing-card { padding: var(--space-8) var(--space-6); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); border-top: 2px solid var(--color-gold); background-color: var(--color-white); display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s ease; } .pricing-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); border-color: var(--color-gold); } .pricing-card__name { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-medium); color: var(--color-burgundy); margin-bottom: var(--space-1); } .pricing-card__guests { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-dark); margin-bottom: var(--space-5); } .pricing-card__description { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); margin-bottom: var(--space-6); flex: 1; } .pricing-card__includes { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-loose); letter-spacing: 0.02em; padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); margin-bottom: var(--space-4); } .pricing-card__ideal { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; margin-bottom: 0; } /* Evening overrides */ .bg-espresso .pricing-card, .bg-deep-walnut .pricing-card, .bg-walnut .pricing-card { background-color: rgba(250, 247, 242, 0.04); border-color: var(--color-gold-faint); border-top-color: var(--color-gold); } .bg-espresso .pricing-card__name, .bg-deep-walnut .pricing-card__name, .bg-walnut .pricing-card__name { color: var(--color-gold); } .bg-espresso .pricing-card__guests, .bg-deep-walnut .pricing-card__guests, .bg-walnut .pricing-card__guests { color: var(--color-gold-light); } .bg-espresso .pricing-card__description, .bg-deep-walnut .pricing-card__description, .bg-walnut .pricing-card__description { color: var(--color-text-on-dark-muted); } .bg-espresso .pricing-card__includes, .bg-deep-walnut .pricing-card__includes, .bg-walnut .pricing-card__includes { color: var(--color-text-on-dark-subtle); border-top-color: var(--color-ivory-08); } .bg-espresso .pricing-card__ideal, .bg-deep-walnut .pricing-card__ideal, .bg-walnut .pricing-card__ideal { color: var(--color-text-on-dark-subtle); } /* ========================================================================== TESTIMONIAL SINGLE — Evening Mode (Glass Card Treatment) Glass-card treatment for standalone testimonials on dark backgrounds. ========================================================================== */ .bg-espresso .testimonial, .bg-deep-walnut .testimonial, .bg-walnut .testimonial { background-color: rgba(250, 247, 242, 0.04); border: 1px solid rgba(250, 247, 242, 0.06); border-radius: var(--radius-lg); padding: var(--space-10) var(--space-8); } .bg-espresso .testimonial__quote, .bg-deep-walnut .testimonial__quote, .bg-walnut .testimonial__quote { color: var(--color-ivory); } .bg-espresso .testimonial__author, .bg-deep-walnut .testimonial__author, .bg-walnut .testimonial__author { color: var(--color-ivory); } .bg-espresso .testimonial__source, .bg-deep-walnut .testimonial__source, .bg-walnut .testimonial__source { color: var(--color-text-on-dark-subtle); } .bg-espresso .testimonial__cite, .bg-deep-walnut .testimonial__cite, .bg-walnut .testimonial__cite { color: var(--color-text-on-dark-subtle); } /* Testimonial cards grid — evening overrides */ .bg-espresso .testimonial-card, .bg-deep-walnut .testimonial-card, .bg-walnut .testimonial-card { background-color: rgba(250, 247, 242, 0.04); border-color: rgba(250, 247, 242, 0.06); border-top-color: var(--color-gold); } .bg-espresso .testimonial-card__quote, .bg-deep-walnut .testimonial-card__quote, .bg-walnut .testimonial-card__quote { color: var(--color-ivory); } .bg-espresso .testimonial-card__author, .bg-deep-walnut .testimonial-card__author, .bg-walnut .testimonial-card__author { color: var(--color-ivory); } .bg-espresso .testimonial-card__event, .bg-deep-walnut .testimonial-card__event, .bg-walnut .testimonial-card__event { color: var(--color-text-on-dark-subtle); } /* ========================================================================== RELATED LINKS — Evening Mode Gold arrow icons, ivory titles, muted descriptions, hover background. ========================================================================== */ .bg-espresso .related-link, .bg-deep-walnut .related-link, .bg-walnut .related-link { background-color: rgba(250, 247, 242, 0.04); border-color: rgba(250, 247, 242, 0.08); transition: background-color var(--transition-fast), border-color var(--transition-fast); } .bg-espresso .related-link:hover, .bg-deep-walnut .related-link:hover, .bg-walnut .related-link:hover { background-color: var(--color-gold-faint); border-color: var(--color-gold-faint); box-shadow: none; } .bg-espresso .related-link__title, .bg-deep-walnut .related-link__title, .bg-walnut .related-link__title { color: var(--color-ivory); } .bg-espresso .related-link__description, .bg-deep-walnut .related-link__description, .bg-walnut .related-link__description { color: var(--color-text-on-dark-muted); } .bg-espresso .related-link__arrow, .bg-deep-walnut .related-link__arrow, .bg-walnut .related-link__arrow { color: var(--color-gold); } /* ========================================================================== SERVICE OPTIONS — Base + Evening Mode Catering service format cards. ========================================================================== */ .service-options-grid { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .service-options-grid { grid-template-columns: repeat(2, 1fr); } } .service-option { padding: var(--space-6); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); border-left: 3px solid var(--color-gold); } .service-option__name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--color-text-primary); margin-bottom: var(--space-2); } .service-option__description { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); } .service-option__ideal { font-size: var(--text-xs); color: var(--color-gold-dark); font-weight: var(--weight-medium); } .service-option__courses { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); } /* Evening overrides */ .bg-espresso .service-option, .bg-deep-walnut .service-option, .bg-walnut .service-option { border-color: rgba(250, 247, 242, 0.06); border-left-color: var(--color-gold); background-color: rgba(250, 247, 242, 0.03); } .bg-espresso .service-option__name, .bg-deep-walnut .service-option__name, .bg-walnut .service-option__name { color: var(--color-ivory); } .bg-espresso .service-option__description, .bg-deep-walnut .service-option__description, .bg-walnut .service-option__description { color: var(--color-text-on-dark-muted); } .bg-espresso .service-option__ideal, .bg-deep-walnut .service-option__ideal, .bg-walnut .service-option__ideal { color: var(--color-gold-light); } .bg-espresso .service-option__courses, .bg-deep-walnut .service-option__courses, .bg-walnut .service-option__courses { color: var(--color-text-on-dark-subtle); } /* Evening hover — lift, thicker virtual gold border, subtle glow. Uses inset box-shadow to simulate +2px on the left border without shifting card content. Reduced-motion strips transforms, keeps color/shadow. */ .bg-espresso .service-option, .bg-deep-walnut .service-option, .bg-walnut .service-option { transition: transform 280ms var(--ease-luxe), background-color 280ms var(--ease-luxe), box-shadow 280ms var(--ease-luxe); will-change: transform; } .bg-espresso .service-option:hover, .bg-deep-walnut .service-option:hover, .bg-walnut .service-option:hover { transform: translateY(-4px); background-color: rgba(250, 247, 242, 0.06); box-shadow: inset 2px 0 0 0 var(--color-gold), 0 12px 28px -16px rgba(201, 169, 98, 0.35); } /* Featured "Recommended" badge — micro-shift + saturate on card hover */ .bg-espresso .service-option--featured .service-option__badge, .bg-deep-walnut .service-option--featured .service-option__badge, .bg-walnut .service-option--featured .service-option__badge { transition: transform 280ms var(--ease-luxe), color 280ms var(--ease-luxe); } .bg-espresso .service-option--featured:hover .service-option__badge, .bg-deep-walnut .service-option--featured:hover .service-option__badge, .bg-walnut .service-option--featured:hover .service-option__badge { transform: translateY(-1px); color: var(--color-gold); } /* Hairline divider between description block and "Ideal for:" meta — dark bg only */ .bg-espresso .service-option__ideal, .bg-deep-walnut .service-option__ideal, .bg-walnut .service-option__ideal { padding-top: var(--space-4); border-top: 1px solid var(--color-gold-faint); margin-top: var(--space-4); } @media (prefers-reduced-motion: reduce) { .bg-espresso .service-option:hover, .bg-deep-walnut .service-option:hover, .bg-walnut .service-option:hover { transform: none; box-shadow: inset 2px 0 0 0 var(--color-gold); } .bg-espresso .service-option--featured:hover .service-option__badge, .bg-deep-walnut .service-option--featured:hover .service-option__badge, .bg-walnut .service-option--featured:hover .service-option__badge { transform: none; } } /* ========================================================================== DIETARY SECTION — Base Styling Accommodations list for catering page. ========================================================================== */ .dietary-grid { display: grid; gap: var(--space-4); } @media (min-width: 768px) { .dietary-grid { grid-template-columns: repeat(2, 1fr); } } .dietary-item { padding: var(--space-5); border-left: 3px solid var(--color-gold-muted); } .dietary-item__type { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-2); } .dietary-item__description { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: 0; } /* Dietary section evening overrides */ .bg-espresso .dietary-item, .bg-deep-walnut .dietary-item, .bg-walnut .dietary-item { border-left-color: var(--color-gold); } .bg-espresso .dietary-item__type, .bg-deep-walnut .dietary-item__type, .bg-walnut .dietary-item__type { color: var(--color-gold); } .bg-espresso .dietary-item__description, .bg-deep-walnut .dietary-item__description, .bg-walnut .dietary-item__description { color: var(--color-text-on-dark-muted); } /* Evening hover — mirrors service-option: lift + virtual 5px gold border via inset shadow (no layout shift) + bg brighten + soft glow. */ .bg-espresso .dietary-item, .bg-deep-walnut .dietary-item, .bg-walnut .dietary-item { transition: transform 280ms var(--ease-luxe), background-color 280ms var(--ease-luxe), box-shadow 280ms var(--ease-luxe); will-change: transform; } .bg-espresso .dietary-item:hover, .bg-deep-walnut .dietary-item:hover, .bg-walnut .dietary-item:hover { transform: translateY(-4px); background-color: rgba(250, 247, 242, 0.04); box-shadow: inset 2px 0 0 0 var(--color-gold), 0 12px 28px -16px rgba(201, 169, 98, 0.35); } @media (prefers-reduced-motion: reduce) { .bg-espresso .dietary-item:hover, .bg-deep-walnut .dietary-item:hover, .bg-walnut .dietary-item:hover { transform: none; box-shadow: inset 2px 0 0 0 var(--color-gold); } } /* ========================================================================== VENUE OVERVIEW — Base Styling Totals summary for venue-details page. ========================================================================== */ .venue-totals { display: flex; gap: var(--space-8); justify-content: center; margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border-subtle); } .venue-total { text-align: center; } .venue-total__number { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-medium); color: var(--color-burgundy); display: block; } .venue-total__label { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-text-muted); } .venue-totals__note { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; margin-top: var(--space-4); } /* ========================================================================== CTA BLOCK — Evening Dark Overrides Ensure CTA blocks on dark backgrounds have proper text colors. The bg-burgundy overrides already exist in _sections.css. These cover the walnut/espresso evening backgrounds. ========================================================================== */ .bg-espresso .cta-block__headline, .bg-deep-walnut .cta-block__headline, .bg-walnut .cta-block__headline { color: var(--color-ivory); } .bg-espresso .cta-block__text, .bg-deep-walnut .cta-block__text, .bg-walnut .cta-block__text { color: var(--color-text-on-dark-muted); } /* ========================================================================== EYEBROW — Evening Dark Overrides Gold eyebrow text on dark backgrounds (not already covered by atmosphere.css or components.css). ========================================================================== */ .bg-espresso .eyebrow, .bg-deep-walnut .eyebrow, .bg-walnut .eyebrow { color: var(--color-gold); } /* ========================================================================== FAQ PREVIEW — Evening Mode For FAQ blocks that appear on event pages. ========================================================================== */ .bg-espresso .faq-list, .bg-deep-walnut .faq-list, .bg-walnut .faq-list { border-top-color: var(--color-ivory-08); } .bg-espresso .faq-item, .bg-deep-walnut .faq-item, .bg-walnut .faq-item { border-bottom-color: var(--color-ivory-08); } .bg-espresso .faq-item__question, .bg-deep-walnut .faq-item__question, .bg-walnut .faq-item__question { color: var(--color-ivory); } .bg-espresso .faq-item__question::after, .bg-deep-walnut .faq-item__question::after, .bg-walnut .faq-item__question::after { color: var(--color-gold); } .bg-espresso .faq-item__answer, .bg-deep-walnut .faq-item__answer, .bg-walnut .faq-item__answer { color: var(--color-text-on-dark-muted); } .bg-espresso .faq-item__answer a, .bg-deep-walnut .faq-item__answer a, .bg-walnut .faq-item__answer a { color: var(--color-gold-light); } /* ========================================================================== CARD GRID — Evening Mode For card-grid sections on dark backgrounds. ========================================================================== */ .bg-espresso .card__cta, .bg-deep-walnut .card__cta, .bg-walnut .card__cta { color: var(--color-gold); } /* Cards on dark backgrounds maintain white bg so text stays dark */ .bg-espresso .card, .bg-deep-walnut .card, .bg-walnut .card { background-color: var(--color-white); } /* Outline cards flip to gold/ivory on dark backgrounds */ .bg-espresso .card--outline, .bg-deep-walnut .card--outline, .bg-walnut .card--outline { background-color: transparent; border-color: var(--color-gold-faint); color: var(--color-ivory); } .bg-espresso .card--outline:hover, .bg-deep-walnut .card--outline:hover, .bg-walnut .card--outline:hover { border-color: var(--color-gold); border-style: solid; } .bg-espresso .card--outline .card__link, .bg-deep-walnut .card--outline .card__link, .bg-walnut .card--outline .card__link { color: var(--color-gold); } /* ========================================================================== TWO-COLUMN CONTENT — Evening Mode Ensure list items and generic content inside two-col sections on dark backgrounds use ivory text instead of dark gray. ========================================================================== */ .bg-espresso .two-col__content .content, .bg-deep-walnut .two-col__content .content, .bg-walnut .two-col__content .content { color: var(--color-text-on-dark-muted); } .bg-espresso .two-col__content .content li, .bg-deep-walnut .two-col__content .content li, .bg-walnut .two-col__content .content li { color: var(--color-text-on-dark-muted); } .bg-espresso .two-col__text, .bg-deep-walnut .two-col__text, .bg-walnut .two-col__text { color: var(--color-text-on-dark-muted); } .bg-espresso .two-col__headline, .bg-deep-walnut .two-col__headline, .bg-walnut .two-col__headline { color: var(--color-ivory); } /* ========================================================================== SPACE CARDS — Dark Background Fix Space cards keep their white background on dark sections. Override the blanket .bg-deep-walnut h3 / .bg-deep-walnut p rules so card text stays dark and readable on the white card background. ========================================================================== */ .bg-espresso .space-card, .bg-deep-walnut .space-card, .bg-walnut .space-card { background-color: var(--color-white); box-shadow: var(--shadow-md); } .bg-espresso .space-card__name, .bg-deep-walnut .space-card__name, .bg-walnut .space-card__name { color: var(--color-text-primary); } .bg-espresso .space-card__capacity, .bg-deep-walnut .space-card__capacity, .bg-walnut .space-card__capacity { color: var(--color-gold-dark); } .bg-espresso .space-card__description, .bg-deep-walnut .space-card__description, .bg-walnut .space-card__description { color: var(--color-text-secondary); } .bg-espresso .space-card__features, .bg-deep-walnut .space-card__features, .bg-walnut .space-card__features { color: var(--color-text-secondary); } .bg-espresso .section__note, .bg-deep-walnut .section__note, .bg-walnut .section__note { color: var(--color-text-on-dark-muted); } /* ========================================================================== PULL QUOTE — Evening Mode Gold border, ivory text, gold-muted citation on dark backgrounds. ========================================================================== */ .bg-espresso .pull-quote, .bg-deep-walnut .pull-quote, .bg-walnut .pull-quote { background-color: rgba(250, 247, 242, 0.04); border-left-color: var(--color-gold); } .bg-espresso .pull-quote p, .bg-deep-walnut .pull-quote p, .bg-walnut .pull-quote p { color: var(--color-ivory); } .bg-espresso .pull-quote cite, .bg-deep-walnut .pull-quote cite, .bg-walnut .pull-quote cite { color: var(--color-gold-muted); } /* ========================================================================== CINEMATIC LAYOUT SYSTEM Opt-in layout mode activated by data-layout="cinematic" on . Provides tighter section spacing, full-bleed image breaks, and refined typographic rhythm for event pages that use the cinematic approach (split-overlaps, atmospheric pauses, editorial pacing). All rules scoped to [data-layout="cinematic"] unless they are generic utilities (section-note, testimonials grid, etc.). ========================================================================== */ /* -------------------------------------------------------------------------- Cinematic Daylight Spacing Compressed padding so consecutive daylight sections flow as one block. -------------------------------------------------------------------------- */ [data-layout="cinematic"] [data-atmosphere="daylight"] { padding-top: var(--space-16); padding-bottom: var(--space-12); } @media (min-width: 768px) { [data-layout="cinematic"] [data-atmosphere="daylight"] { padding-top: var(--space-20); padding-bottom: var(--space-16); } } @media (min-width: 1280px) { [data-layout="cinematic"] [data-atmosphere="daylight"] { padding-top: var(--space-24); padding-bottom: var(--space-20); } } /* -------------------------------------------------------------------------- Split-Overlap — Zero Padding in Cinematic Daylight The split-overlap component manages its own internal spacing when inside cinematic daylight zones. Outer padding removed, inner text panel gets its own padding. -------------------------------------------------------------------------- */ /* Zoom out the menu-flexibility image ~15% */ #menu-flexibility .split-overlap__image img { width: 85%; height: 85%; margin: auto; display: block; } /* Show full dish photo without cropping */ #choose-cuisine .split-overlap__image img { object-fit: contain; background: var(--color-espresso); } /* Kitchen & Bar photo — show full plate and drink without cropping */ #philosophy .split-overlap__image img { object-fit: contain; background: var(--color-ivory-warm); } /* Hybrid-advantage Turret-set photo — shift framing to favor foreground (place settings, tables) */ #hybrid-advantage .split-overlap__image img { object-position: center 60%; } [data-layout="cinematic"] .split-overlap[data-atmosphere="daylight"] { padding: 0; } [data-layout="cinematic"] .split-overlap[data-atmosphere="daylight"] .split-overlap__text { padding: var(--space-10) var(--space-8); } @media (min-width: 900px) { [data-layout="cinematic"] .split-overlap[data-atmosphere="daylight"] .split-overlap__text { padding: var(--space-16) var(--space-12); } } /* -------------------------------------------------------------------------- Split-Overlap — Text Panel Background Matching Ensures the overlapping text panel picks up the parent section's background color for a seamless layered look. -------------------------------------------------------------------------- */ .bg-ivory .split-overlap__text, .split-overlap.bg-ivory .split-overlap__text { background-color: var(--color-ivory); } .bg-ivory-warm .split-overlap__text, .split-overlap.bg-ivory-warm .split-overlap__text { background-color: var(--color-ivory-warm); } .bg-espresso .split-overlap__text, .split-overlap.bg-espresso .split-overlap__text { background-color: var(--color-espresso); box-shadow: none; } .bg-deep-walnut .split-overlap__text, .split-overlap.bg-deep-walnut .split-overlap__text { background-color: var(--color-deep-walnut); box-shadow: none; } .bg-walnut .split-overlap__text, .split-overlap.bg-walnut .split-overlap__text { background-color: var(--color-walnut); box-shadow: none; } /* -------------------------------------------------------------------------- Split-Overlap — Body Text Prose Spacing Tighter rhythm between intro paragraphs inside the text panel. -------------------------------------------------------------------------- */ .split-overlap__text .section-intro { margin-bottom: var(--space-5); } .split-overlap__text .section-intro:last-of-type { margin-bottom: var(--space-8); } /* --- Split-Overlap — Rich Content Prose (HTML via content key) --- */ .split-overlap__text .content p { margin-bottom: var(--space-4); font-size: var(--text-base); line-height: var(--leading-relaxed); } .split-overlap__text .content p:last-child { margin-bottom: 0; } .split-overlap__text .content strong { color: var(--color-text-primary); font-weight: 600; letter-spacing: 0.01em; } .split-overlap__text .content ul { list-style: none; padding-left: 0; margin-top: var(--space-3); margin-bottom: var(--space-5); } .split-overlap__text .content ul li { position: relative; padding-left: var(--space-5); margin-bottom: var(--space-2); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); } .split-overlap__text .content ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 1px; background-color: var(--color-gold); } .split-overlap__text .content ul li:last-child { margin-bottom: 0; } /* Dark bg override — content prose */ .bg-espresso .split-overlap__text .content strong, .bg-deep-walnut .split-overlap__text .content strong, .bg-walnut .split-overlap__text .content strong { color: var(--color-ivory); } .bg-espresso .split-overlap__text .content ul li, .bg-deep-walnut .split-overlap__text .content ul li, .bg-walnut .split-overlap__text .content ul li { color: var(--color-text-on-dark-muted); } .bg-espresso .split-overlap__text .content ul li::before, .bg-deep-walnut .split-overlap__text .content ul li::before, .bg-walnut .split-overlap__text .content ul li::before { background-color: var(--color-gold-muted); } /* -------------------------------------------------------------------------- Split-Overlap — Reversed Variant Image right, text left. Uses RTL direction trick to flip the grid order without changing markup or adding extra classes. -------------------------------------------------------------------------- */ @media (min-width: 900px) { .split-overlap--reversed { direction: rtl; } .split-overlap--reversed > * { direction: ltr; } .split-overlap--reversed .split-overlap__text { margin-left: 0; margin-right: -60px; } } /* -------------------------------------------------------------------------- Cinematic Evening Spacing Consistent padding for evening sections in cinematic mode. -------------------------------------------------------------------------- */ [data-layout="cinematic"] [data-atmosphere="evening"] { padding-top: var(--space-16); padding-bottom: var(--space-16); } @media (min-width: 768px) { [data-layout="cinematic"] [data-atmosphere="evening"] { padding-top: var(--space-20); padding-bottom: var(--space-20); } } @media (min-width: 1280px) { [data-layout="cinematic"] [data-atmosphere="evening"] { padding-top: var(--space-24); padding-bottom: var(--space-24); } } /* Closing-moment carries its own internal copy padding — don't double it up with the cinematic-evening section padding. Without this override, the /events/inquiry closing-moment renders ~680px tall on desktop with only a single italic sentence + CTA, which reads as an empty void below the form. */ [data-layout="cinematic"] [data-atmosphere="evening"].closing-moment, [data-layout="cinematic"] .closing-moment[data-atmosphere="evening"] { padding-top: 0; padding-bottom: 0; } /* -------------------------------------------------------------------------- Cinematic Section Headers — Centered Variant Max-width constrained, centered headers with tighter internal spacing. -------------------------------------------------------------------------- */ [data-layout="cinematic"] .section-header--center { text-align: center; max-width: 700px; margin: 0 auto var(--space-12); } @media (min-width: 768px) { [data-layout="cinematic"] .section-header--center { margin-bottom: var(--space-16); } } [data-layout="cinematic"] .section-header--center .eyebrow { margin-bottom: var(--space-3); } [data-layout="cinematic"] .section-header--center .section-title { margin-bottom: var(--space-4); } [data-layout="cinematic"] .section-header--center .section-intro { margin: 0 auto; text-align: center; } /* -------------------------------------------------------------------------- Section Note Centered italic note below grids (e.g., "Inquire about seasonal menus"). -------------------------------------------------------------------------- */ .section-note { text-align: center; margin-top: var(--space-10); font-family: var(--font-heading); font-size: var(--text-lg); font-style: italic; color: var(--color-text-muted); } /* Evening variant */ .bg-espresso .section-note, .bg-deep-walnut .section-note, .bg-walnut .section-note { color: var(--color-text-on-dark-muted); } /* -------------------------------------------------------------------------- Cinematic Full-Bleed Image Breaks Viewport-height image panels with gold hairline borders and optional Ken Burns animation. Used as atmospheric pauses in the evening zone. -------------------------------------------------------------------------- */ .cinematic-full-bleed { position: relative; width: 100%; overflow: hidden; } .cinematic-full-bleed--60 { height: 60vh; min-height: 350px; } .cinematic-full-bleed--50 { height: 50vh; min-height: 300px; } @media (min-width: 768px) { .cinematic-full-bleed--60 { min-height: 450px; } .cinematic-full-bleed--50 { min-height: 380px; } } .cinematic-full-bleed::before, .cinematic-full-bleed::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--gradient-gold-shine); z-index: var(--z-raised); } .cinematic-full-bleed::before { top: 0; } .cinematic-full-bleed::after { bottom: 0; } .cinematic-full-bleed img { width: 100%; height: 100%; object-fit: cover; } @keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.06); } } .cinematic-full-bleed img.ken-burns { animation: kenBurns 20s ease-in-out alternate infinite; animation-play-state: paused; /* IO toggles to running when visible — saves GPU off-screen */ } @media (prefers-reduced-motion: reduce) { .cinematic-full-bleed img.ken-burns { animation: none; } } /* -------------------------------------------------------------------------- Cinematic FAQ Wrap Constrains FAQ sections to a readable measure within cinematic layouts. -------------------------------------------------------------------------- */ .cinematic-faq-wrap { max-width: 800px; margin: 0 auto; } /* -------------------------------------------------------------------------- Cinematic Testimonials — Two-Column Grid Side-by-side testimonial cards at tablet and above. -------------------------------------------------------------------------- */ .testimonials--two-col { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 768px) { .testimonials--two-col { grid-template-columns: 1fr 1fr; gap: var(--space-6); } } /* ========================================================================== SAMPLE MENU ADDITIONS — Private Dining Retool Price anchor line and CTA link below the course listing. The existing .sample-menu block above covers layout, course names, and gold hairlines. Only the new price anchor + CTA need to be added here. ========================================================================== */ .sample-menu__price-anchor { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-on-dark-muted); text-align: center; margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-gold-faint); letter-spacing: var(--tracking-wide); } .sample-menu__cta { text-align: center; margin-top: var(--space-4); } /* Scoped override for sample-menu's text-style CTA — gold-light default, gold on hover, with softer letter-spacing than the global .btn--text. */ .sample-menu__cta .btn--text { color: var(--color-gold-light); text-transform: none; letter-spacing: var(--tracking-wide); } .sample-menu__cta .btn--text:hover { color: var(--color-gold); } /* P1-4: Evening dark-bg dish items — regular weight (italic removed per P1-4 fix) */ .bg-deep-walnut .sample-menu__items li, .bg-espresso .sample-menu__items li, .bg-walnut .sample-menu__items li { font-style: normal; color: var(--color-text-on-dark-muted); } /* ========================================================================== ROOM CARD — Evening-Mode Badge + Tag Overrides The card itself stays white (established in _components.css). These rules adjust only the badge and tags that sit against the dark section background or directly inside the white card on a dark-bg section. ========================================================================== */ /* Badge sits inside .room-card__image (always over a photo, never on the section background), so the daylight gold-on-walnut style from _components.css reads correctly on every section background. The previous dark-bg override produced low-contrast translucent gold-on-image. */ /* ========================================================================== PROCESS STEPS — Evening-Mode Number Override The base .process-step__number uses a white circle with burgundy text (defined in _sections.css). On dark evening backgrounds, flip to a gold circle with walnut text for visual consistency with the gold accent system. ========================================================================== */ .bg-espresso .process-step__number, .bg-deep-walnut .process-step__number, .bg-walnut .process-step__number { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-semibold); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.02em; color: var(--color-walnut); background-color: var(--color-gold); line-height: 1; } /* Note: .process-steps responsive grid (1→2→4 columns) is already declared in _sections.css lines 639–654. No addition needed here. */ /* Micro-wedding Turret image — portrait crop, keep heads in frame */ #micro-wedding-turret .split-overlap__image img { object-position: center 27%; } /* --- Inlined from _pricing-callout.css --- */ /* ========================================================================== PRICING CALLOUT — Two-column minimum band Decision 1: number (left) + fee list (right), vertical hairline divider. Works on .bg-deep-walnut. Stacks at ≤767px: number block first, horizontal hairline, fees below. ========================================================================== */ /* -------------------------------------------------------------------------- Frame — gold hairlines top + bottom -------------------------------------------------------------------------- */ .pricing-callout__frame { border-top: 1px solid var(--color-gold-faint); border-bottom: 1px solid var(--color-gold-faint); padding: var(--space-16) 0; } @media (min-width: 1024px) { .pricing-callout__frame { padding: var(--space-20) 0; } } /* -------------------------------------------------------------------------- Body — flex layout; column on mobile, row on tablet+ -------------------------------------------------------------------------- */ .pricing-callout__body { display: flex; flex-direction: column; gap: var(--space-10); align-items: flex-start; } @media (min-width: 768px) { .pricing-callout__body { flex-direction: row; align-items: flex-start; gap: 0; } } /* -------------------------------------------------------------------------- Left column — label + number + context -------------------------------------------------------------------------- */ .pricing-callout__number-col { flex: 0 0 auto; max-width: 100%; } @media (min-width: 768px) { .pricing-callout__number-col { flex: 1 1 50%; padding-right: var(--space-12); } } .pricing-callout__label { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-on-dark-subtle); letter-spacing: var(--tracking-widest); text-transform: uppercase; margin-bottom: var(--space-3); } .pricing-callout__number { font-family: var(--font-heading); font-size: var(--text-6xl); /* clamp(3.5rem → 5rem) via token */ font-weight: var(--weight-light); color: var(--color-ivory); line-height: var(--leading-none); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-6); } .pricing-callout__context { font-family: var(--font-body); font-size: var(--text-sm); font-style: italic; color: var(--color-text-on-dark-muted); line-height: var(--leading-relaxed); max-width: 38ch; } /* -------------------------------------------------------------------------- Vertical gold hairline divider — desktop only -------------------------------------------------------------------------- */ .pricing-callout__divider { display: none; } @media (min-width: 768px) { .pricing-callout__divider { display: block; width: 1px; background-color: var(--color-gold-faint); align-self: stretch; flex: 0 0 1px; margin: 0 var(--space-12); } } /* -------------------------------------------------------------------------- Right column — fees dl -------------------------------------------------------------------------- */ .pricing-callout__fees-col { flex: 1 1 auto; width: 100%; } /* Horizontal hairline divider — mobile only */ @media (max-width: 767px) { .pricing-callout__fees-col { border-top: 1px solid var(--color-gold-faint); padding-top: var(--space-8); } } @media (min-width: 768px) { .pricing-callout__fees-col { flex: 1 1 50%; padding-left: var(--space-12); } } .pricing-callout__fees { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; } .pricing-callout__fee-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); border-bottom: 1px solid var(--color-ivory-08); padding-bottom: var(--space-4); } .pricing-callout__fee-row:last-child { border-bottom: none; padding-bottom: 0; } .pricing-callout__fee-label { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-on-dark-muted); font-weight: var(--weight-normal); } .pricing-callout__fee-value { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-gold-light); font-weight: var(--weight-medium); white-space: nowrap; margin: 0; } /* -------------------------------------------------------------------------- Hero CTA — evening button override for .hero--full context The .hero--full is outside .atmosphere-evening scope, so force the gold-fill / walnut-text treatment for the primary button directly. -------------------------------------------------------------------------- */ .hero--full .btn--primary { background-color: var(--color-gold); color: var(--color-walnut); border-color: var(--color-gold); } .hero--full .btn--primary:hover { background-color: var(--color-gold-light); border-color: var(--color-gold-light); color: var(--color-walnut); } /* -------------------------------------------------------------------------- Form input 44px touch targets — mobile Ensures all form inputs meet minimum touch target height on mobile. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .form-input, .form-select, .form-textarea { min-height: 44px; } } /* --- Inlined from _cuisine-showcase.css --- */ /* ========================================================================== CUISINE SHOWCASE — Swan Family Multi-Kitchen Section _cuisine-showcase.css 4-column type-forward grid at desktop; 2×2 at tablet; single-column mobile. Cards use gold hairlines only — no borders, no box-shadows — so the section reads as a printed menu announcement rather than a feature-card grid. All dark-background colors reference the evening palette tokens. ========================================================================== */ /* -------------------------------------------------------------------------- Section wrapper -------------------------------------------------------------------------- */ .cuisine-showcase { padding: var(--space-20) 0; } @media (min-width: 1024px) { .cuisine-showcase { padding: var(--space-28) 0; } } /* -------------------------------------------------------------------------- Header — centered, narrow column -------------------------------------------------------------------------- */ .cuisine-showcase__header { text-align: center; max-width: 640px; margin: 0 auto var(--space-16); } @media (min-width: 1024px) { .cuisine-showcase__header { margin-bottom: var(--space-20); } } /* Eyebrow — small gold italic label */ .cuisine-showcase__eyebrow { display: block; font-family: var(--font-body); font-style: italic; font-size: var(--text-sm); color: var(--color-gold-light); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-4); } /* Headline — heading font, light weight, ivory */ .cuisine-showcase__headline { font-family: var(--font-heading); font-size: clamp(2rem, 1.25rem + 3.2vw, 3.25rem); font-weight: var(--weight-light); color: var(--color-ivory); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-6); } /* Intro paragraph — muted-ivory body text */ .cuisine-showcase__intro { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-on-dark-muted); line-height: var(--leading-relaxed); max-width: 52ch; margin: 0 auto; } /* -------------------------------------------------------------------------- Grid — 4 columns desktop, 2×2 tablet, 1 column mobile -------------------------------------------------------------------------- */ .cuisine-showcase__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10) var(--space-8); margin-bottom: var(--space-14); } @media (min-width: 640px) { .cuisine-showcase__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-12) var(--space-10); } } @media (min-width: 1024px) { .cuisine-showcase__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-10) var(--space-8); margin-bottom: var(--space-16); } } /* -------------------------------------------------------------------------- Cards — type-forward, open structure with gold hairline top -------------------------------------------------------------------------- */ .cuisine-showcase__card { border-top: 1px solid var(--color-gold-faint); padding-top: var(--space-6); } /* Cuisine eyebrow — gold, uppercase, italic, small */ .cuisine-showcase__card-eyebrow { display: block; font-family: var(--font-body); font-style: italic; font-size: var(--text-xs); color: var(--color-gold); letter-spacing: var(--tracking-widest); text-transform: uppercase; margin-bottom: var(--space-2); } /* Brand name — heading font, ivory, medium scale */ .cuisine-showcase__name { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-light); color: var(--color-ivory); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); } /* Flavor note — body font, muted-ivory */ .cuisine-showcase__note { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-on-dark-muted); line-height: var(--leading-relaxed); margin: 0; } /* -------------------------------------------------------------------------- CTA — centered arrow link below grid -------------------------------------------------------------------------- */ .cuisine-showcase__cta { text-align: center; margin: 0; } /* .cuisine-showcase__cta-link uses .btn-arrow from _components.css for arrow + color + hover treatment. No additional color overrides needed here. */ .cuisine-showcase__cta-link { text-decoration: none; } /* Component Styles */ /* --- Inlined from _hero.css --- */ /* ========================================================================== Hero Component Styles File: styles/_hero.css Direction-9 hero: full-viewport single image or carousel, bottom-aligned content, multi-layer overlays (gradient + top gradient + vignette), animated scroll indicator. ========================================================================== */ .hero { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 40vh; } /* -------------------------------------------------------------------------- Full Hero (Homepage) — direction-9 style Bottom-aligned content, full viewport height -------------------------------------------------------------------------- */ .hero--full { position: relative; width: 100%; height: 100vh; min-height: 600px; max-height: 1200px; display: flex; align-items: flex-end; overflow: hidden; } /* -------------------------------------------------------------------------- Slim Hero (Interior Pages) -------------------------------------------------------------------------- */ .hero--slim { min-height: 40vh; } @media (min-width: 768px) { .hero--slim { min-height: 50vh; } } /* -------------------------------------------------------------------------- Compact Hero (No Image, Text-Only) -------------------------------------------------------------------------- */ .hero--compact { min-height: auto; } /* Compact heroes with images get more height so the photo isn't over-cropped */ .hero--compact:has(.hero__media) { min-height: 340px; } @media (min-width: 768px) { .hero--compact:has(.hero__media) { min-height: 400px; } } .hero--compact .hero__content { padding: var(--space-8) var(--space-5) var(--space-8); } @media (min-width: 768px) { .hero--compact .hero__content { padding: var(--space-10) var(--space-8) var(--space-10); } } @media (min-width: 1280px) { .hero--compact .hero__content { padding: var(--space-12) var(--space-12) var(--space-10); } } /* -------------------------------------------------------------------------- Background — single image variant -------------------------------------------------------------------------- */ .hero__background { position: absolute; inset: 0; z-index: var(--z-behind); } .hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* -------------------------------------------------------------------------- Hero Media — alternate single-image container -------------------------------------------------------------------------- */ .hero__media { position: absolute; inset: 0; z-index: var(--z-behind); } /* atmosphere-evening sets a walnut bg-color, which paints on top of .hero__media (z-index: -1) and hides the photo. Keep the evening text/accent colors but transparent the bg when there's media to show. */ .hero.atmosphere-evening:has(.hero__media), .hero.atmosphere-evening:has(.hero__carousel) { background-color: transparent; } .hero__media picture { display: contents; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-img-position, center); transform: scale(var(--hero-img-scale, 1)); } /* -------------------------------------------------------------------------- Overlay System — layered gradients from direction-9 -------------------------------------------------------------------------- */ /* Primary overlay — bottom-heavy gradient for text readability */ .hero__overlay { position: absolute; inset: 0; background: var(--gradient-hero); z-index: var(--z-base); } /* Secondary top gradient — ensures nav readability over bright images */ .hero__overlay-top { position: absolute; inset: 0; background: var(--gradient-hero-top); z-index: var(--z-base); } /* Vignette — radial edge darkening for cinematic depth */ .hero__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(30, 22, 16, 0.35) 100%); z-index: var(--z-base); pointer-events: none; } /* -------------------------------------------------------------------------- Content — direction-9 bottom-aligned layout -------------------------------------------------------------------------- */ .hero__content { position: relative; z-index: var(--z-raised); width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: var(--space-16) var(--space-5) var(--space-16); } /* Dark scrim behind hero text — any hero with an image, except the homepage full hero */ .hero:not(.hero--full):has(.hero__media) .hero__content, .hero:not(.hero--full):has(.hero__carousel) .hero__content { background: linear-gradient(135deg, rgba(30, 22, 16, 0.45) 0%, rgba(30, 22, 16, 0.28) 100%); border-radius: var(--radius-sm); max-width: 680px; margin: 0 0 0 var(--space-5); padding: var(--space-8) var(--space-8) var(--space-10); } @media (min-width: 768px) { .hero:not(.hero--full):has(.hero__media) .hero__content, .hero:not(.hero--full):has(.hero__carousel) .hero__content { margin: 0 0 0 var(--space-8); padding: var(--space-10) var(--space-10) var(--space-12); } } @media (min-width: 1280px) { .hero:not(.hero--full):has(.hero__media) .hero__content, .hero:not(.hero--full):has(.hero__carousel) .hero__content { margin: 0 0 0 var(--space-12); padding: var(--space-12) var(--space-12) var(--space-14); } } @media (min-width: 768px) { .hero__content { padding: var(--space-20) var(--space-8) var(--space-20); } } @media (min-width: 1280px) { .hero__content { padding: var(--space-24) var(--space-12) var(--space-24); } } /* Tagline / eyebrow above heading */ .hero__tagline { display: block; font-family: var(--font-body); font-size: 0.7rem; font-weight: var(--weight-medium); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-5); } /* Main heading — fluid type, constrained width */ .hero .hero__headline, .hero__heading { font-family: var(--font-heading); font-size: var(--text-7xl); font-weight: var(--weight-light); line-height: 0.9; letter-spacing: var(--tracking-tighter); color: var(--color-ivory); max-width: 14ch; margin-bottom: var(--space-6); } /* -------------------------------------------------------------------------- Text Shadow — improves readability over busy background images. Only applied to heroes WITH images (excludes .hero--compact text-only). -------------------------------------------------------------------------- */ .hero:not(.hero--compact) .hero__tagline { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 12px rgba(0, 0, 0, 0.6); } .hero:not(.hero--compact) .hero__headline, .hero:not(.hero--compact) .hero__heading { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4); } .hero:not(.hero--compact) .hero__subtitle, .hero:not(.hero--compact) .hero__subheadline { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4); } /* GSAP word/char split helpers */ .hero-word { display: inline-block; margin-right: 0.2em; overflow: hidden; vertical-align: top; } .hero-word:last-child { margin-right: 0; } .hero-word__inner { display: inline-block; } .hero-char { display: inline-block; } /* Gold shimmer pulse on hero tagline — ambient eye-catch */ .page--home .hero:not(.hero--compact) .hero__tagline { text-shadow: none; /* Override — conflicts with background-clip: text */ } .page--home .hero__tagline { background: linear-gradient( 90deg, var(--color-gold) 0%, #E8D5A0 40%, var(--color-gold) 80% ); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; /* Layered drop-shadow — survives background-clip: text where text-shadow does not. Tight dark halo underneath the glyphs, no visible panel. */ filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)); animation: gold-text-shimmer 4s ease-in-out infinite; } @keyframes gold-text-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { .page--home .hero__tagline { animation: none; -webkit-text-fill-color: var(--color-gold); background: none; } } /* Subtitle — italic Cormorant */ .hero__subtitle, .hero__subheadline { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-light); font-style: italic; line-height: var(--leading-snug); color: rgba(250, 247, 242, 0.85); max-width: 50ch; margin-bottom: var(--space-10); } /* CTAs / actions */ .hero__actions, .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); } @media (max-width: 479px) { .hero__ctas { flex-direction: column; align-items: stretch; } } @media (min-width: 480px) { .hero__ctas { align-items: center; } } /* Hero button dark-context override lives in styles/_buttons.css */ /* -------------------------------------------------------------------------- Scroll Indicator — animated vertical line + text -------------------------------------------------------------------------- */ .hero__scroll-indicator { position: absolute; bottom: var(--space-8); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); z-index: var(--z-raised); animation: scroll-bounce 3s ease-in-out infinite; } .hero__scroll-line { width: 0.5px; height: 80px; background: linear-gradient(to bottom, var(--color-gold), transparent); } .hero__scroll-text { font-family: var(--font-body); font-size: 0.5625rem; font-weight: var(--weight-medium); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-on-dark-subtle); } @keyframes scroll-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } /* Hide scroll indicator on mobile — not enough space */ @media (max-width: 767px) { .hero__scroll-indicator { display: none; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .hero__scroll-indicator { animation: none; } } /* -------------------------------------------------------------------------- Homepage Hero — hide text for GSAP entrance animation (prevents flash). .js class is added synchronously in before paint. Without JS, elements remain visible (progressive enhancement). -------------------------------------------------------------------------- */ .js .page--home .hero__tagline, .js .page--home .hero__eyebrow, .js .page--home .hero__headline, .js .page--home .hero__subheadline, .js .page--home .hero__subtitle, .js .page--home .hero__ctas .btn, .js .page--home .hero__actions .btn { opacity: 0; } @media (prefers-reduced-motion: reduce) { .js .page--home .hero__tagline, .js .page--home .hero__eyebrow, .js .page--home .hero__headline, .js .page--home .hero__subheadline, .js .page--home .hero__subtitle, .js .page--home .hero__ctas .btn, .js .page--home .hero__actions .btn { opacity: 1; } } /* ========================================================================== Hero Carousel — Crossfade with Ken Burns ========================================================================== */ /* Carousel container — same positioning as .hero__media */ .hero__carousel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } /* Individual slide — stacked via absolute positioning, crossfade via opacity */ .hero__carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s ease; } .hero__carousel-slide--active { opacity: 1; } /* Slide images — cover the container, Ken Burns animation when active */ .hero__carousel-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__carousel-slide--active img { animation: hero-ken-burns 20s ease-in-out forwards; } /* Ken Burns keyframes — cinematic slow zoom (direction-9: 20s+) */ @keyframes hero-ken-burns { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } /* Dot navigation container */ .hero__carousel-dots { position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-3); z-index: 2; padding: var(--space-2) var(--space-4); } /* Individual dot */ .hero__carousel-dot { width: 10px; height: 10px; border-radius: var(--radius-full); border: 2px solid var(--color-ivory); background: transparent; cursor: pointer; padding: 0; transition: background-color var(--transition-normal), transform var(--transition-normal); opacity: 0.7; } .hero__carousel-dot:hover { opacity: 1; transform: scale(1.2); } /* Active dot — filled with burgundy */ .hero__carousel-dot--active { background-color: var(--color-burgundy); border-color: var(--color-ivory); opacity: 1; } /* Accessibility — respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { .hero__carousel-slide { transition: none; } .hero__carousel-slide--active img { animation: none; } /* Show only the first slide, hide others immediately */ .hero__carousel-slide:not(:first-child) { opacity: 0; } .hero__carousel-slide:first-child { opacity: 1; } } /* ========================================================================== HERO VIDEO (section.video branch in hero.html) ========================================================================== */ .hero__media--video { background-color: var(--color-walnut); background-image: var(--hero-poster-url, none); background-size: cover; background-position: center; } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } /* Stronger overlay for full-bleed video — bottom-weighted for bottom-aligned content */ .hero--full:has(.hero__media--video) .hero__overlay, body.has-hero-video .hero--full .hero__media--video ~ .hero__overlay, body.has-hero-video .hero--full .hero__overlay { background: linear-gradient( 180deg, rgba(20, 14, 10, 0.15) 0%, rgba(20, 14, 10, 0.28) 45%, rgba(20, 14, 10, 0.68) 100% ); } /* Top-down gradient so header floats cleanly over any bright opening frame */ .hero--full:has(.hero__media--video) .hero__overlay-top, body.has-hero-video .hero--full .hero__overlay-top { background: linear-gradient(180deg, rgba(20, 14, 10, 0.48) 0%, rgba(20, 14, 10, 0) 60%); } /* Text legibility — shadows tuned to read over motion, not punch through on solids */ .hero--full:has(.hero__media--video) .hero__headline, .hero--full:has(.hero__media--video) .hero__subheadline, .hero--full:has(.hero__media--video) .hero__tagline, body.has-hero-video .hero--full .hero__headline, body.has-hero-video .hero--full .hero__subheadline, body.has-hero-video .hero--full .hero__tagline { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.45); } /* Subtle backdrop panel behind the bottom-aligned content block */ .hero--full:has(.hero__media--video) .hero__content, body.has-hero-video .hero--full .hero__content { background: linear-gradient(135deg, rgba(20, 14, 10, 0.38) 0%, rgba(20, 14, 10, 0.18) 100%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: var(--radius-sm); padding: var(--space-8) var(--space-8) var(--space-10); max-width: 720px; } /* Reduced motion — hide the video, let the poster (set as bg on .hero__media--video) show */ @media (prefers-reduced-motion: reduce) { .hero__video { display: none; } } /* Safari / iOS tiny tweak — video element itself should never leak focus ring */ .hero__video:focus { outline: none; } /* --- Inlined from _sections.css --- */ /* ========================================================================== SECTION STYLES The Alexander Rochester Styles for all section types used in page templates. ========================================================================== */ /* ========================================================================= SECTION BASE ========================================================================= */ .section__cta { margin-top: var(--space-8); } .section__header { text-align: center; max-width: 700px; margin: 0 auto var(--space-12); } .section__headline { font-family: var(--font-heading); font-size: 2.75rem; font-weight: var(--weight-semibold); margin-bottom: 1rem; } @media (min-width: 768px) { .section__headline { font-size: 3.25rem; } } .section__text { font-size: 1.25rem; color: var(--color-gray); line-height: 1.7; } /* Eyebrow label */ .eyebrow { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-burgundy); margin-bottom: var(--space-3); } /* Section Header (convention used by most section templates) */ .section-header { max-width: 700px; margin: 0 auto var(--space-12); } .section-header--center { text-align: center; } @media (min-width: 768px) { .section-header { margin-bottom: var(--space-16); } } .section-header__headline { font-family: var(--font-heading); font-size: 2.75rem; font-weight: var(--weight-semibold); margin-bottom: 1rem; } @media (min-width: 768px) { .section-header__headline { font-size: 3.25rem; } } .section-header__description { font-size: 1.25rem; color: var(--color-text-secondary); line-height: 1.7; } /* headlineSize modifiers — applied to .section-header wrapper */ .section-header--sm .section-header__headline { font-size: clamp(1.25rem, 3vw, 2rem); } .section-header--md .section-header__headline { font-size: clamp(1.75rem, 4vw, 2.5rem); } /* --lg is the default (2.75rem / 3.25rem) — no override needed */ /* Dark background overrides for section headers */ .bg-burgundy .section-header__headline { color: var(--color-white); } .bg-burgundy .section-header__description { color: var(--color-ivory); } .bg-burgundy .eyebrow { color: var(--color-gold); } .bg-burgundy .section__headline { color: var(--color-white); } /* ========================================================================= TWO COLUMN (preview style) ========================================================================= */ .two-col { display: grid; gap: var(--space-8); } @media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-12); } } .two-col__item { text-align: center; } .two-col__image { border-radius: 8px; overflow: hidden; margin-bottom: var(--space-6); } .two-col__image img { width: 100%; height: 300px; object-fit: cover; } .two-col__headline { font-family: var(--font-heading); font-size: 2.5rem; font-weight: var(--weight-semibold); margin-bottom: 0.75rem; } .two-col__text { color: var(--color-gray); margin-bottom: var(--space-4); line-height: 1.7; } .section__note { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-6); } /* Two-col text+image layout (text-image template) */ .two-col__content { display: flex; flex-direction: column; justify-content: center; } .two-col__content .content { color: var(--color-text-secondary); } .two-col__media { border-radius: var(--radius-md); overflow: hidden; } .two-col__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; min-height: 300px; } .two-col--reverse .two-col__media { order: -1; } [data-atmosphere="evening"] .two-col__media, .atmosphere-evening .two-col__media { box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.18), 0 4px 24px rgba(0,0,0,0.3); } /* ========================================================================= TESTIMONIALS (preview style) ========================================================================= */ .testimonials { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .testimonials { grid-template-columns: repeat(3, 1fr); } } .testimonial { background: var(--color-white); padding: var(--space-6); border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); } .testimonial__stars { color: var(--color-gold); margin-bottom: 0.75rem; font-size: 1.4375rem; } .testimonial__quote { font-style: italic; color: var(--color-gray); margin-bottom: 1rem; line-height: 1.6; } .testimonial__author { font-weight: 600; font-size: 0.9375rem; } .testimonial__source { color: var(--color-gray-light); font-size: 0.8125rem; } .testimonial__cite { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); font-style: normal; margin-top: var(--space-3); } /* ========================================================================= CTA BLOCK (preview style) ========================================================================= */ .cta-block { text-align: center; padding: var(--space-16) var(--space-4); } .cta-block__headline { font-family: var(--font-heading); font-size: 2.75rem; font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: 1rem; } @media (min-width: 768px) { .cta-block__headline { font-size: 3.25rem; } } .bg-burgundy .cta-block__headline { color: var(--color-ivory); } .cta-block__text { font-size: 1.25rem; color: var(--color-text-secondary); opacity: 0.9; margin-bottom: var(--space-6); max-width: 600px; margin-left: auto; margin-right: auto; } .bg-burgundy .cta-block__text { color: var(--color-ivory); } /* ========================================================================= HERO (enhanced) ========================================================================= */ .hero--compact { min-height: 30vh; padding: var(--space-12) 0; } /* Compact hero without a background image — dark text on light page bg */ .hero--compact:not(:has(.hero__media)):not(:has(.hero__carousel)) .hero__headline { color: var(--color-text-primary); } .hero--compact:not(:has(.hero__media)):not(:has(.hero__carousel)) .hero__subheadline { color: var(--color-text-secondary); } .hero--compact .hero__headline { font-size: var(--text-4xl); } @media (min-width: 768px) { .hero--compact .hero__headline { font-size: var(--text-5xl); } } .hero--minimal { min-height: auto; padding: var(--space-16) 0; background-color: var(--color-burgundy); } .hero--minimal .hero__content { text-align: center; max-width: 800px; margin: 0 auto; } /* ========================================================================= FEATURES GRID ========================================================================= */ .features-grid { display: grid; gap: var(--space-8); } .features-grid--2 { grid-template-columns: repeat(1, 1fr); } .features-grid--3 { grid-template-columns: repeat(1, 1fr); } .features-grid--4 { grid-template-columns: repeat(1, 1fr); } @media (min-width: 640px) { .features-grid--2, .features-grid--3, .features-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .features-grid--3 { grid-template-columns: repeat(3, 1fr); } .features-grid--4 { grid-template-columns: repeat(4, 1fr); } } .feature-card { padding: var(--space-6); background-color: var(--color-white); border-radius: var(--radius-md); } .bg-burgundy .feature-card { background-color: rgba(255, 255, 255, 0.1); color: var(--color-white); } .feature-card__icon { width: 48px; height: 48px; margin-bottom: var(--space-4); color: var(--color-gold); } .feature-card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); } .feature-card__text { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 0; } .bg-burgundy .feature-card__text { color: var(--color-ivory); } .feature-card__detail { font-size: var(--text-sm); color: var(--color-gold); margin-top: var(--space-2); margin-bottom: 0; } .feature-card__list { font-size: var(--text-sm); margin-top: var(--space-3); padding-left: var(--space-4); list-style: disc; } .feature-card__link { display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); } /* ========================================================================= FAQ ========================================================================= */ .faq-list { border-top: 1px solid var(--color-border); } .faq-item { border-bottom: 1px solid var(--color-border); } .faq-item__question { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) 0; font-weight: var(--weight-medium); cursor: pointer; list-style: none; } .faq-item__question::-webkit-details-marker { display: none; } .faq-item__question::after { content: "+"; font-size: var(--text-xl); color: var(--color-burgundy); transition: transform var(--transition-fast); flex-shrink: 0; margin-left: var(--space-4); } .faq-item[open] .faq-item__question::after { content: "−"; } .faq-item__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--transition-normal), opacity var(--transition-normal); opacity: 0; overflow: hidden; } .faq-item[open] .faq-item__answer { grid-template-rows: 1fr; opacity: 1; } .faq-item__answer-inner { overflow: hidden; min-height: 0; color: var(--color-text-secondary); } .faq-item[open] .faq-item__answer-inner { padding-bottom: var(--space-5); } @media (prefers-reduced-motion: reduce) { .faq-item__answer { transition: none; } } .faq-item__answer-inner a { text-decoration: underline; } /* FAQ section padding — tighter than default section padding */ .section.faq-section { padding-top: var(--space-12); padding-bottom: var(--space-12); } /* FAQ Navigation */ .faq-nav { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); } .faq-nav__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; } .faq-nav__link { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-burgundy); } /* ========================================================================= CARD GRID ========================================================================= */ .card-grid { display: grid; gap: var(--space-6); } .card { display: block; background-color: var(--color-white); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow var(--transition-fast); } .card:hover { box-shadow: var(--shadow-md); } .card__media { overflow: hidden; } .card__media img { width: 100%; height: 200px; object-fit: cover; } .card__content { padding: var(--space-5); } .card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); } .card__description { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); } .card__cta { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-burgundy); } .card-grid--2 { grid-template-columns: repeat(1, 1fr); } .card-grid--3 { grid-template-columns: repeat(1, 1fr); } @media (min-width: 640px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } .card-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } } .card--outline { border: 2px dashed var(--color-border); display: flex; flex-direction: column; justify-content: center; text-align: center; } .card--outline:hover { border-color: var(--color-burgundy); border-style: solid; } .card__link { font-weight: var(--weight-medium); color: var(--color-burgundy); } /* ========================================================================= SPACES GRID ========================================================================= */ .spaces-grid { display: grid; gap: var(--space-8); } @media (min-width: 768px) { .spaces-grid { grid-template-columns: repeat(3, 1fr); } } .space-card { background-color: var(--color-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .space-card__media { aspect-ratio: 4 / 3; overflow: hidden; } .space-card__media img { width: 100%; height: 100%; object-fit: cover; } .space-card__content { padding: var(--space-5); } .space-card__name { font-size: var(--text-xl); margin-bottom: var(--space-2); } .space-card__capacity { font-size: var(--text-sm); color: var(--color-gold); font-weight: var(--weight-medium); margin-bottom: var(--space-3); } .space-card__description { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 0; } .space-card__features { margin-top: var(--space-4); padding-left: var(--space-4); font-size: var(--text-sm); list-style: disc; } /* ========================================================================= PROCESS STEPS ========================================================================= */ .process-steps { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .process-steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .process-steps { grid-template-columns: repeat(4, 1fr); } } .process-step { display: flex; gap: var(--space-4); } @media (min-width: 1024px) { .process-step { flex-direction: column; text-align: center; } } .process-step__number { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--color-burgundy); background-color: var(--color-white); border-radius: var(--radius-full); } .bg-burgundy .process-step__number { color: var(--color-white); background-color: rgba(255, 255, 255, 0.2); } @media (min-width: 1024px) { .process-step__number { margin: 0 auto var(--space-4); } } .process-step__title { font-size: var(--text-lg); margin-bottom: var(--space-2); } .bg-burgundy .process-step__title { color: var(--color-white); } .process-step__description { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 0; } .bg-burgundy .process-step__description { color: var(--color-ivory); } /* ========================================================================= TIMELINE ========================================================================= */ .timeline { position: relative; padding-left: var(--space-8); } .timeline::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background-color: var(--color-border); } .bg-burgundy .timeline::before { background-color: rgba(255, 255, 255, 0.3); } .timeline__item { position: relative; padding-bottom: var(--space-6); } .timeline__item:last-child { padding-bottom: 0; } .timeline__marker { position: absolute; left: calc(-1 * var(--space-8) + 2px); top: 6px; width: 10px; height: 10px; background-color: var(--color-burgundy); border-radius: var(--radius-full); } .bg-burgundy .timeline__marker { background-color: var(--color-gold); } .timeline__title { font-size: var(--text-lg); margin-bottom: var(--space-1); } .bg-burgundy .timeline__title { color: var(--color-white); } .timeline__timing { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-gold); margin-bottom: var(--space-2); } .timeline__text, .timeline__note { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 0; } .bg-burgundy .timeline__text, .bg-burgundy .timeline__note { color: var(--color-ivory); } /* ========================================================================= INFO GRID ========================================================================= */ .info-grid { display: grid; gap: var(--space-8); } .info-grid--2 { grid-template-columns: repeat(1, 1fr); } .info-grid--3 { grid-template-columns: repeat(1, 1fr); } .info-grid--4 { grid-template-columns: repeat(1, 1fr); } @media (min-width: 640px) { .info-grid--2, .info-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .info-grid--3 { grid-template-columns: repeat(3, 1fr); } .info-grid--4 { grid-template-columns: repeat(4, 1fr); } } .info-block__title { font-size: var(--text-lg); margin-bottom: var(--space-3); } .info-block__content { font-size: var(--text-sm); color: var(--color-text-secondary); } .info-block__list { font-size: var(--text-sm); padding-left: var(--space-4); list-style: disc; } .info-block__list li { margin-bottom: var(--space-1); } .info-block__note { font-size: var(--text-sm); font-style: italic; color: var(--color-text-secondary); margin-top: var(--space-3); } .info-block__link { display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); } /* ========================================================================= RELATED LINKS ========================================================================= */ .related-links { display: grid; gap: var(--space-4); } @media (min-width: 768px) { .related-links { grid-template-columns: repeat(3, 1fr); } } .related-link { display: block; padding: var(--space-5); background-color: var(--color-white); border-radius: var(--radius-md); border: 1px solid var(--color-border); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .related-link:hover { border-color: var(--color-burgundy); box-shadow: var(--shadow-md); } .related-link__title { font-size: var(--text-lg); margin-bottom: var(--space-2); color: var(--color-burgundy); } .related-link__description { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-2); } .related-link__arrow { color: var(--color-burgundy); font-weight: var(--weight-medium); } /* ========================================================================= TESTIMONIALS (multiple) ========================================================================= */ .testimonials-grid { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } } .testimonial-card { padding: var(--space-6); background-color: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .testimonial-card__quote { font-family: var(--font-accent); font-size: var(--text-2xl); font-weight: 400; font-style: normal; font-synthesis: none; line-height: var(--leading-snug); margin-bottom: var(--space-4); } .testimonial-card__footer { font-size: var(--text-sm); } .testimonial-card__author { font-style: normal; font-weight: var(--weight-medium); color: var(--color-text-primary); } .testimonial-card__event { display: block; color: var(--color-text-secondary); } /* Evening-atmosphere overrides — cards on walnut/espresso backgrounds */ .atmosphere-evening .testimonial-card, [data-atmosphere="evening"] .testimonial-card { background-color: rgba(250, 247, 242, 0.06); border: 1px solid rgba(250, 247, 242, 0.12); color: var(--color-ivory); box-shadow: none; } .atmosphere-evening .testimonial-card__quote, [data-atmosphere="evening"] .testimonial-card__quote { color: var(--color-ivory); } .atmosphere-evening .testimonial-card__author, [data-atmosphere="evening"] .testimonial-card__author { color: var(--color-gold); } /* testimonials.html uses __name (author) and __source — cover both */ .atmosphere-evening .testimonial-card__name, [data-atmosphere="evening"] .testimonial-card__name { color: var(--color-gold); } .atmosphere-evening .testimonial-card__source, [data-atmosphere="evening"] .testimonial-card__source { color: var(--color-text-on-dark-subtle); } /* ========================================================================= GALLERY ========================================================================= */ .gallery-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } } .gallery-item { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 1; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .gallery-item:hover img { transform: scale(1.05); } .gallery-item__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-3); background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: var(--color-white); font-size: var(--text-sm); } /* ========================================================================= FORM LAYOUT ========================================================================= */ .form-layout { display: grid; gap: var(--space-8); } .form-layout--with-sidebar { grid-template-columns: 1fr; } @media (min-width: 768px) { .form-layout--with-sidebar { grid-template-columns: 2fr 1fr; } } .form__fieldset { border: none; padding: 0; margin-bottom: var(--space-8); } .form__legend { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-medium); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); } .form-group { margin-bottom: var(--space-4); } .form-group--half { display: inline-block; width: calc(50% - var(--space-2)); margin-right: var(--space-4); } .form-group--half:nth-child(2n) { margin-right: 0; } .form-label { display: block; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); margin-bottom: var(--space-2); } .form-label .required { color: var(--color-burgundy); margin-left: 2px; } /* Gold replaces burgundy in evening/dark sections */ .bg-walnut .form-label .required, .bg-espresso .form-label .required, .bg-deep-walnut .form-label .required { color: var(--color-gold); } .form-input, .form-select, .form-textarea { display: block; width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-burgundy); box-shadow: 0 0 0 3px rgba(114, 47, 55, 0.15); } .form-select { appearance: auto; cursor: pointer; } .form-textarea { resize: vertical; min-height: 100px; } .form-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); } .form__actions { margin-top: var(--space-6); } .form__privacy { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); } .form-radio-group { display: flex; gap: var(--space-4); flex-wrap: wrap; } .form-radio, .form-checkbox { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; } /* Sidebar */ .form-layout__sidebar { padding: var(--space-6); background-color: var(--color-ivory-dark); border-radius: var(--radius-md); height: fit-content; } .form-layout__sidebar h3 { font-size: var(--text-lg); margin-bottom: var(--space-4); } .sidebar-steps { list-style: none; padding: 0; } .sidebar-step { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); } .sidebar-step:last-child { margin-bottom: 0; } .sidebar-step__number { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-white); background-color: var(--color-burgundy); border-radius: var(--radius-full); } .sidebar-step__content strong { display: block; font-size: var(--text-sm); margin-bottom: var(--space-1); } .sidebar-step__content p { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; } .sidebar-contact { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border); } .sidebar-contact h4 { font-size: var(--text-base); margin-bottom: var(--space-2); } .sidebar-contact__hours { font-size: var(--text-sm); color: var(--color-text-secondary); } /* ========================================================================= SAMPLE MENU ========================================================================= */ .sample-menu { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .sample-menu__course, .sample-menu__category { padding: var(--space-5); border-bottom: 1px solid var(--color-border); } .sample-menu__course:last-child, .sample-menu__category:last-child { border-bottom: none; } .sample-menu__course-name, .sample-menu__category-name { font-size: var(--text-lg); color: var(--color-burgundy); margin-bottom: var(--space-3); } .sample-menu__items { font-size: var(--text-sm); padding-left: 0; list-style: none; } .sample-menu__items li { padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border); } .sample-menu__items li:last-child { border-bottom: none; } /* ========================================================================= SERVICE OPTIONS ========================================================================= */ .service-options { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .service-options { grid-template-columns: repeat(2, 1fr); } } .service-option { padding: var(--space-5); background-color: var(--color-white); border-radius: var(--radius-md); border: 1px solid var(--color-border); } .service-option__name { font-size: var(--text-lg); margin-bottom: var(--space-2); } .service-option__description { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); } .service-option__ideal, .service-option__detail { font-size: var(--text-sm); margin-bottom: 0; } /* Featured / "Recommended" treatment — adds a gold hairline + badge */ .service-option--featured { position: relative; border: 1px solid var(--color-gold-muted); box-shadow: 0 0 0 1px var(--color-gold-faint) inset; } /* P1-1: At ≥1024px, the featured (Buffet) card spans the full grid width, implementing the featured-band hierarchy from the strategy brief. The remaining 4 cards stay in the 2-column grid beneath it. Mobile (single-column stack) is unaffected — Buffet is already first. */ @media (min-width: 1024px) { .service-options .service-option--featured { grid-column: 1 / -1; } } .service-option__badge { display: inline-block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-gold); margin-bottom: var(--space-2); } /* On dark/evening backgrounds, the badge already reads; no override needed. */ /* ========================================================================= BEVERAGE PACKAGES ========================================================================= */ .beverage-packages { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .beverage-packages { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .beverage-packages { grid-template-columns: repeat(4, 1fr); } } .beverage-package { padding: var(--space-5); background-color: var(--color-white); border-radius: var(--radius-md); text-align: center; } .beverage-package__name { font-size: var(--text-lg); margin-bottom: var(--space-3); } .beverage-package__includes { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-2); } .beverage-package__note { font-size: var(--text-sm); font-style: italic; color: var(--color-gold); margin-bottom: 0; } .beverage-additions { margin-top: var(--space-8); text-align: center; } .beverage-additions h4 { margin-bottom: var(--space-4); } .beverage-additions ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); list-style: none; font-size: var(--text-sm); } /* ========================================================================= DIETARY SECTION ========================================================================= */ .dietary-grid { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .dietary-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .dietary-grid { grid-template-columns: repeat(3, 1fr); } } .dietary-item { padding: var(--space-4); border-left: 3px solid var(--color-gold); } .dietary-item__type { font-size: var(--text-base); margin-bottom: var(--space-2); } .dietary-item__description { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 0; } /* Pricing styles moved to _events.css */ /* ========================================================================= JOB LISTINGS ========================================================================= */ .job-listings { display: grid; gap: var(--space-6); } .job-card { padding: var(--space-6); background-color: var(--color-white); border-radius: var(--radius-md); border: 1px solid var(--color-border); } .job-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3); flex-wrap: wrap; gap: var(--space-2); } .job-card__title { font-size: var(--text-xl); margin-bottom: 0; } .job-card__type { font-size: var(--text-sm); color: var(--color-gold); font-weight: var(--weight-medium); } .job-card__description { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); } .job-card__requirements { font-size: var(--text-sm); } .job-card__requirements ul { padding-left: var(--space-4); list-style: disc; margin-top: var(--space-2); } /* ========================================================================= CAPACITY TABLE ========================================================================= */ .capacity-table th:first-child, .capacity-table td:first-child { font-weight: var(--weight-medium); } .capacity-table td { text-align: center; } .capacity-table td:first-child { text-align: left; } .capacity-notes { margin-top: var(--space-4); padding: var(--space-4); background-color: var(--color-ivory-dark); border-radius: var(--radius-md); } .capacity-notes ul { font-size: var(--text-sm); color: var(--color-text-secondary); padding-left: var(--space-4); list-style: disc; margin: 0; } /* ========================================================================= VENUE OVERVIEW ========================================================================= */ .venue-totals { display: flex; justify-content: center; gap: var(--space-12); margin-top: var(--space-8); } .venue-total { text-align: center; } .venue-total__number { display: block; font-family: var(--font-heading); font-size: var(--text-5xl); font-weight: 400; color: var(--color-burgundy); line-height: 1; } .venue-total__label { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-2); } /* ========================================================================= BANNER ========================================================================= */ .banner { padding: var(--space-6) 0; text-align: center; } .banner--burgundy { background-color: var(--color-burgundy); color: var(--color-white); } .banner--gold { background-color: var(--color-gold); color: var(--color-charcoal); } .banner--alert { background-color: var(--color-ivory-dark); color: var(--color-charcoal); } .banner__headline { display: block; font-size: var(--text-lg); margin-bottom: var(--space-2); } .banner__content { font-size: var(--text-sm); margin-bottom: 0; } .banner--burgundy .banner__content { color: var(--color-ivory); } .banner__note { font-size: var(--text-sm); font-style: italic; margin-top: var(--space-2); margin-bottom: 0; } /* ========================================================================= SPACE DETAIL ========================================================================= */ .space-detail { border-bottom: 1px solid var(--color-border); } .space-detail:last-of-type { border-bottom: none; } .space-detail__name { font-size: var(--text-3xl); margin-bottom: var(--space-4); } .space-detail__description { font-size: var(--text-lg); color: var(--color-text-secondary); margin-bottom: var(--space-6); } .space-detail__dimensions, .space-detail__capacity, .space-detail__features, .space-detail__ideal { margin-bottom: var(--space-5); } .space-detail__dimensions p, .space-detail__capacity p { margin-bottom: var(--space-1); font-size: var(--text-sm); } .space-detail h4 { font-size: var(--text-base); margin-bottom: var(--space-2); } .space-detail ul { font-size: var(--text-sm); padding-left: var(--space-4); list-style: disc; } .space-detail__floorplan { margin-top: var(--space-6); } .space-detail__floorplan a { font-weight: var(--weight-medium); } .capacity-group { margin-bottom: var(--space-3); } .capacity-group ul { margin-top: var(--space-1); } /* ========================================================================= MENU (Restaurant Menu with Prices) ========================================================================= */ .menu-intro { text-align: center; max-width: 600px; margin: 0 auto var(--space-12); } .menu-intro__text { font-size: var(--text-base); color: var(--color-text-secondary); margin-bottom: var(--space-3); } .menu-intro__note { font-size: var(--text-sm); font-style: italic; color: var(--color-text-secondary); margin-bottom: 0; } .menu-category { margin-bottom: var(--space-16); } .menu-category:last-child { margin-bottom: 0; } .menu-category__name { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-semibold); color: var(--color-burgundy); text-align: center; margin-bottom: var(--space-2); } .menu-category__description { text-align: center; font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-8); } .menu-items { display: grid; gap: var(--space-6); } .menu-item { padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); } .menu-item:last-child { border-bottom: none; padding-bottom: 0; } .menu-item__header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-2); } .menu-item__name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--color-text-primary); margin: 0; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } .menu-item__region { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--color-text-secondary); font-style: italic; } .menu-item__price { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-burgundy); white-space: nowrap; } .menu-item__description { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-2); } .menu-item__modifier { font-size: var(--text-sm); font-style: italic; color: var(--color-gold); margin-bottom: var(--space-2); } .menu-item__note { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-burgundy); margin-bottom: var(--space-2); } .menu-item__dietary { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .dietary-tag, .local-tag, .featured-tag { display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.8125rem; font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--radius-sm); } .dietary-tag { color: var(--color-burgundy); background-color: var(--color-ivory); } .local-tag { color: var(--color-gold); background-color: rgba(201, 169, 98, 0.1); border: 1px solid var(--color-gold); } .featured-tag { color: var(--color-white); background-color: var(--color-burgundy); } .menu-subsection { margin-top: var(--space-8); } .menu-subsection:first-child { margin-top: 0; } .menu-subsection__name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--color-burgundy); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); } .menu-footer { text-align: center; margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--color-border); } .menu-footer__note { font-size: var(--text-sm); font-style: italic; color: var(--color-text-secondary); margin-bottom: var(--space-6); } /* ========================================================================= PULL QUOTE ========================================================================= */ .pull-quote { margin: var(--space-6) 0; padding: var(--space-5); background-color: var(--color-ivory-dark); border-radius: var(--radius-md); border-left: 4px solid var(--color-gold); } .pull-quote p { font-family: var(--font-accent); font-size: var(--text-2xl); font-weight: 400; font-style: normal; font-synthesis: none; line-height: var(--leading-snug); margin-bottom: var(--space-2); } .pull-quote cite { font-size: var(--text-sm); color: var(--color-text-secondary); } /* ========================================================================= TWO COLUMN GRID ========================================================================= */ .two-col-grid { display: grid; gap: var(--space-8); } @media (min-width: 768px) { .two-col-grid { grid-template-columns: repeat(2, 1fr); } } .two-col-card__media { margin-bottom: var(--space-4); border-radius: var(--radius-md); overflow: hidden; } .two-col-card__media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; } .two-col-card__content h3 { margin-bottom: var(--space-3); } .two-col-card__content p { margin-bottom: var(--space-4); color: var(--color-text-secondary); } /* ========================================================================= EMOTIONAL BRIDGE ========================================================================= */ .section-bridge { padding: 80px 0 40px; text-align: center; } .section-bridge__text { font-family: var(--font-accent); font-size: var(--text-4xl); color: var(--color-gold); font-weight: 400; font-style: italic; font-synthesis: none; margin: 0; } .section-bridge__rule { width: 120px; height: 1px; background: var(--color-gold-50); margin: var(--space-10) auto 0; } /* Light-bg variant — daylight editorial breath between two ivory sections. Tighter padding, deeper gold for legibility on warm cream. */ .section-bridge.bg-ivory, .section-bridge.bg-ivory-warm, .section-bridge.bg-white { padding: 56px 0 32px; } .section-bridge.bg-ivory .section-bridge__text, .section-bridge.bg-ivory-warm .section-bridge__text, .section-bridge.bg-white .section-bridge__text { color: var(--color-gold-dark); font-size: var(--text-3xl); } .section-bridge.bg-ivory .section-bridge__rule, .section-bridge.bg-ivory-warm .section-bridge__rule, .section-bridge.bg-white .section-bridge__rule { background: var(--color-gold); opacity: 0.55; } /* Ornament-only variant — silent fleuron divider (rule – diamond – rule). No copy; pure typographic breath between content sections. Selectors combine with bg-* to outrank the asymmetric light-bg rule above. */ .section-bridge--ornament, .section-bridge--ornament.bg-ivory, .section-bridge--ornament.bg-ivory-warm, .section-bridge--ornament.bg-white, .section-bridge--ornament.bg-deep-walnut { padding: 64px 0; text-align: center; } .section-bridge__ornament { display: flex; align-items: center; justify-content: center; gap: var(--space-5); width: 280px; max-width: 60%; margin: 0 auto; } .section-bridge__ornament-line { flex: 1; height: 1px; background: var(--color-gold); opacity: 0.5; } .section-bridge__ornament-mark { width: 7px; height: 7px; background: var(--color-gold); transform: rotate(45deg); opacity: 0.85; flex-shrink: 0; } @media (min-width: 768px) { .section-bridge--ornament { padding: 88px 0; } .section-bridge__ornament { width: 360px; gap: var(--space-6); } .section-bridge__ornament-mark { width: 8px; height: 8px; } } /* ========================================================================= PAGE CLOSE (Dual-CTA) ========================================================================= */ .page-close { padding: 60px 0 100px; text-align: center; } .page-close__eyebrow { display: block; font-family: var(--font-body); font-size: 0.7rem; font-weight: var(--weight-medium); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-4); } .page-close__headline { font-family: var(--font-heading); font-size: var(--text-5xl); font-weight: 400; color: var(--color-ivory); margin-bottom: var(--space-4); } @media (min-width: 768px) { .page-close__headline { font-size: var(--text-5xl); } } .page-close__subtext { font-family: var(--font-body); font-size: var(--text-base); color: var(--text-on-deep-muted); max-width: 560px; margin: 0 auto var(--space-10); } .page-close__ctas { display: flex; gap: var(--space-6); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-10); } .page-close__contact { font-family: var(--font-body); font-size: 0.85rem; margin-bottom: 0; } .page-close__contact a { color: var(--text-on-deep-subtle); text-decoration: none; letter-spacing: 0.05em; } .page-close__contact a:hover { color: var(--color-ivory); } @media (prefers-reduced-motion: reduce) { .gallery-item img { transition: none; } .gallery-item:hover img { transform: none; } /* Optional: suppress minor shadow/border transitions */ .card, .related-link { transition: none; } } /* .btn--outline-gold retired — use .btn--secondary (context-adaptive) */ /* --- Inlined from _components.css --- */ /* ========================================================================== The Alexander — Component Styles Extracted from Direction 9: Dual Atmosphere design target. These are the bespoke layout components that go beyond the generic section templates. Each component has its own visual identity and responsive behavior. Dependencies: _variables.css (design tokens), _atmosphere.css ========================================================================== */ /* ========================================================================== SECTION DECORATORS Shared elements used across multiple components. ========================================================================== */ .section-number { display: block; font-family: var(--font-body); font-size: 0.7rem; font-weight: var(--weight-medium); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-burgundy-muted); margin-bottom: var(--space-4); } .section-title { font-family: var(--font-heading); font-size: var(--text-5xl); font-weight: var(--weight-normal); line-height: var(--leading-tighter); letter-spacing: var(--tracking-tighter); margin-bottom: var(--space-6); } .section-intro { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); max-width: 65ch; } .gold-rule { border: none; height: 1px; background: var(--gradient-gold-shine); width: 100px; margin: var(--space-6) 0; } .gold-rule--center { border: none; height: 1px; background: var(--gradient-gold-shine); width: 100px; margin: var(--space-6) auto; } /* .btn-arrow retired — use .btn--text (lives in styles/_buttons.css) */ /* ========================================================================== SPLIT-OVERLAP 55/45 image-text grid with negative margin overlap on desktop. Used for the dining intro section. ========================================================================== */ .split-overlap { display: grid; grid-template-columns: 1fr; gap: 0; align-items: center; position: relative; } @media (min-width: 1024px) { .split-overlap { grid-template-columns: 55% 1fr; } } .split-overlap__image { position: relative; overflow: hidden; } .split-overlap__image img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; max-height: 420px; } @media (min-width: 1024px) { .split-overlap__image img { min-height: 380px; max-height: 480px; } } .split-overlap__text { background-color: var(--color-ivory); padding: var(--space-12) var(--space-10); position: relative; } @media (min-width: 1024px) { .split-overlap__text { margin-left: -60px; padding: var(--space-16) var(--space-12); z-index: var(--z-raised); box-shadow: var(--shadow-soft-lg); } } .split-overlap__text h2 { margin-bottom: var(--space-4); } .split-overlap__text p { margin-bottom: var(--space-6); } /* Portrait image modifier — taller container for vertical photos */ @media (min-width: 768px) { .split-overlap--portrait { grid-template-columns: 45% 1fr; } .split-overlap--portrait .split-overlap__image img { min-height: 480px; max-height: 640px; } .split-overlap--portrait.split-overlap--reversed { grid-template-columns: 1fr 45%; } } @media (min-width: 1024px) { .split-overlap--portrait .split-overlap__image img { min-height: 520px; max-height: 720px; } } /* Flyer modifier — render the artwork at its natural pixel size, never upscaled. The flyer JPG is the source of truth for sizing. */ .split-overlap--flyer .split-overlap__image { overflow: visible; background: transparent; display: flex; justify-content: center; align-items: flex-start; padding: var(--space-6) 0; } .split-overlap--flyer .split-overlap__image img { width: auto; max-width: 100%; height: auto; min-height: 0; max-height: none; object-fit: contain; display: block; margin: 0 auto; } /* ========================================================================== FULL-BLEED IMAGE Full-width cinematic image break, 70vh tall with subtle hover zoom. ========================================================================== */ .full-bleed-image { position: relative; width: 100%; height: 70vh; min-height: 400px; overflow: hidden; background-color: var(--color-ivory); isolation: isolate; } .full-bleed-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-luxe); /* Soft ivory vignette on all four edges — feathers into the section bg. Image stays fully intact in the center; only the outer ~14% fades. */ -webkit-mask-image: radial-gradient( ellipse 68% 74% at 50% 50%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.88) 65%, rgba(0, 0, 0, 0.4) 85%, rgba(0, 0, 0, 0) 100% ); mask-image: radial-gradient( ellipse 68% 74% at 50% 50%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.88) 65%, rgba(0, 0, 0, 0.4) 85%, rgba(0, 0, 0, 0) 100% ); } .full-bleed-image:hover img { transform: scale(1.01); } /* ========================================================================== DUAL GRID CARDS Two side-by-side image-backed cards with gradient overlay and content. Used for the "Two Experiences" section (dining + events). ========================================================================== */ .dual-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 768px) { .dual-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } } .dual-card { position: relative; overflow: hidden; border-radius: var(--radius-md); cursor: pointer; border-top: 2px solid transparent; transition: border-color 600ms var(--ease-luxe); } .dual-card:hover { border-top-color: var(--color-gold); } .dual-card:focus-within { border-top-color: var(--color-gold); } .dual-card__image { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } .dual-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-luxe); } .dual-card:hover .dual-card__image img { transform: scale(1.04); } .dual-card__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(30, 22, 16, 0.75) 0%, rgba(30, 22, 16, 0.35) 40%, transparent 100% ); } .dual-card__content { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-8); z-index: var(--z-raised); } .dual-card__title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-normal); color: var(--color-ivory); line-height: var(--leading-tight); margin-bottom: var(--space-2); } .dual-card__text { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-on-dark-muted); margin-bottom: var(--space-4); max-width: 38ch; } .dual-card__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); transition: color var(--transition-fast), gap var(--transition-normal); } .dual-card__link::after { content: '\2192'; transition: transform var(--transition-normal); } .dual-card:hover .dual-card__link { color: var(--color-gold-light); } .dual-card:hover .dual-card__link::after { transform: translateX(4px); } .dual-card__link:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; } /* ========================================================================== TRANSITION BRIDGE The pivotal section between dining (light) and events (dark). Uses a background image with a gradient overlay that blends from light to dark, marking the atmosphere shift. ========================================================================== */ .transition-bridge { position: relative; padding: 8rem 0; overflow: hidden; text-align: center; } @media (min-width: 768px) { .transition-bridge { padding: 12rem 0; } } @media (min-width: 1280px) { .transition-bridge { padding: 14rem 0; } } .transition-bridge__bg { position: absolute; inset: 0; z-index: var(--z-behind); overflow: hidden; } .transition-bridge__bg img { width: 100%; height: 100%; object-fit: cover; } .transition-bridge__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, var(--color-ivory-dark) 0%, rgba(237, 232, 223, 0.85) 15%, rgba(44, 24, 16, 0.6) 50%, rgba(44, 24, 16, 0.92) 85%, var(--color-deep-walnut) 100% ); z-index: var(--z-base); } .transition-bridge__content { position: relative; z-index: var(--z-raised); max-width: 600px; margin: 0 auto; padding: var(--space-8) var(--space-8); background: linear-gradient(135deg, rgba(30, 22, 16, 0.45) 0%, rgba(30, 22, 16, 0.28) 100%); border-radius: var(--radius-sm); } .transition-bridge__eyebrow { display: block; font-family: var(--font-body); font-size: 0.7rem; font-weight: var(--weight-medium); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-6); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3); } .transition-bridge__heading { font-family: var(--font-heading); font-size: var(--text-5xl); font-weight: var(--weight-light); font-style: italic; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-ivory); margin-bottom: var(--space-8); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4); } .transition-bridge .gold-rule--center { height: 2px; box-shadow: 0 0 8px rgba(201, 169, 98, 0.4); } .transition-bridge__text { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-normal); font-style: italic; line-height: var(--leading-relaxed); color: rgba(250, 247, 242, 0.75); max-width: 45ch; margin: 0 auto; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4); } /* ========================================================================== ROOM CARDS 3-column grid of event space cards with gold badge, hover lift, and tag pills. Cards have white backgrounds so text colors are overridden even when placed inside dark-background sections. ========================================================================== */ .rooms-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .rooms-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-8); } } .rooms-grid__cta { margin-top: var(--space-12); text-align: center; } .room-card { position: relative; background-color: var(--color-white); border-radius: var(--radius-lg); /* overflow: visible so tag tooltips can spill past the card edge. Image is clipped to the top corners on .room-card__image instead. */ overflow: visible; border: 1px solid var(--color-burgundy-faint); box-shadow: var(--shadow-soft); transition: box-shadow 400ms var(--ease-luxe), transform 400ms var(--ease-luxe), border-color 400ms var(--ease-luxe); } .room-card:has(.room-card__link-stretched) { cursor: pointer; } .room-card__link-stretched { color: inherit; text-decoration: none; outline: none; } .room-card__link-stretched::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .room-card__link-stretched:focus-visible::after { outline: 2px solid var(--color-gold); outline-offset: 2px; } .room-card__tags { position: relative; z-index: 2; } .room-card__tag--interactive { position: relative; z-index: 2; } .room-card:hover { box-shadow: var(--shadow-soft-lg); transform: translateY(-5px); border-color: var(--color-burgundy); } .room-card:focus-within { box-shadow: var(--shadow-gold-glow); transform: translateY(-5px); } .room-card__name { transition: color var(--transition-fast); } .room-card:hover .room-card__name, .room-card:focus-within .room-card__name { color: var(--color-burgundy-dark); } .bg-deep-walnut .room-card:hover, .bg-espresso .room-card:hover, .bg-walnut .room-card:hover { border-color: var(--color-gold); } .bg-deep-walnut .room-card:hover .room-card__name, .bg-espresso .room-card:hover .room-card__name, .bg-walnut .room-card:hover .room-card__name, .bg-deep-walnut .room-card:focus-within .room-card__name, .bg-espresso .room-card:focus-within .room-card__name, .bg-walnut .room-card:focus-within .room-card__name { color: var(--color-gold); } @media (prefers-reduced-motion: reduce) { .room-card, .room-card__image img, .room-card__name { transition: none; } .room-card:hover, .room-card:focus-within { transform: none; } .room-card:hover .room-card__image img, .room-card:focus-within .room-card__image img { transform: none; } } .room-card__image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); } .room-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-luxe); } .room-card:hover .room-card__image img, .room-card:focus-within .room-card__image img { transform: scale(1.045); } .room-card__badge { position: absolute; bottom: var(--space-3); right: var(--space-3); padding: 6px var(--space-3); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-walnut); background-color: var(--color-gold); border-radius: var(--radius-sm); } .room-card__body { padding: var(--space-5) var(--space-6) var(--space-6); } .room-card__name { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-medium); color: var(--color-burgundy); line-height: var(--leading-snug); margin-bottom: var(--space-2); } .room-card__description { font-size: var(--text-sm); color: var(--color-gray-600); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); } .room-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); } .room-card__tag { position: relative; display: inline-block; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-burgundy); border: 1px solid var(--color-burgundy-faint); border-radius: var(--radius-full); background-color: var(--color-burgundy-faint); transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } /* Interactive variant: pill carries an explanatory tooltip on hover/focus. */ .room-card__tag--interactive { cursor: help; } .room-card__tag:hover, .room-card__tag:focus-visible { background-color: rgba(114, 47, 55, 0.18); border-color: var(--color-burgundy); color: var(--color-burgundy-dark); box-shadow: 0 0 0 1.5px rgba(114, 47, 55, 0.35), 0 0 18px rgba(114, 47, 55, 0.30); transform: translateY(-2px); outline: none; } /* Tooltip — pops above the pill, dark espresso panel with gold hairline. Uses data-copy attribute rendered via content: attr(). */ .room-card__tag[data-copy]::after { content: attr(data-copy); position: absolute; bottom: calc(100% + 10px); left: 50%; min-width: 200px; max-width: 260px; padding: var(--space-3) var(--space-4); background-color: var(--color-espresso); color: var(--color-ivory); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-normal); line-height: var(--leading-relaxed); letter-spacing: normal; text-transform: none; text-align: left; white-space: normal; border: 1px solid var(--color-gold-50); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: var(--z-raised); pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity 180ms var(--ease-smooth), transform 180ms var(--ease-smooth), visibility 0s linear 180ms; } /* Tooltip arrow — gold-edged triangle pointing at the pill. */ .room-card__tag[data-copy]::before { content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid var(--color-espresso); z-index: var(--z-raised); pointer-events: none; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: opacity 180ms var(--ease-smooth), visibility 0s linear 180ms; } .room-card__tag[data-copy]:hover::after, .room-card__tag[data-copy]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 180ms var(--ease-smooth) 120ms, transform 180ms var(--ease-smooth) 120ms, visibility 0s linear 120ms; } .room-card__tag[data-copy]:hover::before, .room-card__tag[data-copy]:focus-visible::before { opacity: 1; visibility: visible; transition: opacity 180ms var(--ease-smooth) 120ms, visibility 0s linear 120ms; } @media (prefers-reduced-motion: reduce) { .room-card__tag { transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear, box-shadow 120ms linear; } .room-card__tag:hover, .room-card__tag:focus-visible { transform: none; } .room-card__tag[data-copy]::after, .room-card__tag[data-copy]::before { transition: opacity 120ms linear, visibility 0s linear 120ms; } .room-card__tag[data-copy]:hover::after, .room-card__tag[data-copy]:focus-visible::after { transform: translate(-50%, 0); } } /* Room cards have white backgrounds, so text must stay dark even when the card sits inside a dark-background section. Override the blanket .bg-deep-walnut h3 / .bg-deep-walnut p rules. Gold replaces burgundy in evening zones per direction-9 palette rules. */ .bg-deep-walnut .room-card__name, .bg-espresso .room-card__name, .bg-walnut .room-card__name { color: var(--color-gold-dark, var(--color-gold)); } /* Card border: swap burgundy-faint for gold-faint in dark sections */ .bg-deep-walnut .room-card, .bg-espresso .room-card, .bg-walnut .room-card { border-color: var(--color-gold-faint); } .bg-deep-walnut .room-card__description, .bg-espresso .room-card__description, .bg-walnut .room-card__description { color: var(--color-gray-600); } /* ========================================================================== TESTIMONIAL CARDS (Direction 9) Dark-background testimonial layout with oversized quote mark, burgundy top border, and subtle glass-like card. Replaces the older .testimonial-card styles from _sections.css. ========================================================================== */ .testimonials { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 768px) { .testimonials { grid-template-columns: 1fr 1fr; gap: var(--space-6); } } @media (min-width: 1024px) { .testimonials { grid-template-columns: 1fr 1fr 1fr; } } .testimonial-card { position: relative; padding: var(--space-10) var(--space-8); border-radius: var(--radius-lg); background-color: rgba(250, 247, 242, 0.04); border: 1px solid rgba(250, 247, 242, 0.04); border-top: 2px solid var(--color-burgundy); overflow: hidden; } .testimonial-card__quote-mark { display: block; font-family: var(--font-heading); font-size: 6rem; line-height: 0.5; color: var(--color-gold-muted); opacity: 0.08; position: absolute; top: var(--space-6); left: var(--space-6); user-select: none; pointer-events: none; } .testimonial-card__quote { font-family: var(--font-heading); font-size: var(--text-xl); font-style: italic; font-weight: var(--weight-normal); line-height: var(--leading-snug); color: var(--color-text-on-dark); margin-bottom: var(--space-6); position: relative; } .testimonial-card__attribution { display: flex; flex-direction: column; gap: 2px; position: relative; } .testimonial-card__name { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-ivory); letter-spacing: var(--tracking-wide); } .testimonial-card__source { font-size: var(--text-xs); color: var(--color-text-on-dark-subtle); letter-spacing: var(--tracking-wide); } /* ========================================================================== CLOSING MOMENT Cinematic letterbox crop with closing narrative copy. Image sliver + italic resolve text + CTA. The story ends here. ========================================================================== */ .closing-moment { position: relative; overflow: hidden; padding: 0; } /* --- Image sliver: thin, full-width, cinematic --- */ .closing-moment__image-wrap { position: relative; width: 100%; height: 22vh; min-height: 180px; max-height: 280px; overflow: hidden; } @media (min-width: 768px) { .closing-moment__image-wrap { height: 25vh; min-height: 200px; max-height: 320px; } } .closing-moment__image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* --- Copy block: narrative resolution + CTA below image --- */ .closing-moment__copy { text-align: center; padding: var(--space-12) var(--space-5) var(--space-16); max-width: 620px; margin: 0 auto; } @media (min-width: 768px) { .closing-moment__copy { padding: var(--space-16) var(--space-8) var(--space-20); } } .closing-moment__resolve { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-light); font-style: italic; line-height: var(--leading-snug); color: rgba(250, 247, 242, 0.7); margin-bottom: var(--space-2); } @media (min-width: 768px) { .closing-moment__resolve { font-size: var(--text-3xl); } } .closing-moment .btn { margin-top: var(--space-6); } /* ========================================================================== BACKGROUND UTILITIES Atmosphere-scoped background colors with appropriate text overrides. Used to set the mood of individual sections. ========================================================================== */ /* --- Light / Dining Backgrounds --- */ .bg-ivory { background-color: var(--color-ivory); color: var(--color-text-primary); } .bg-ivory-warm { background-color: var(--color-ivory-warm); color: var(--color-text-primary); } .bg-ivory-dark { background-color: var(--color-ivory-dark); color: var(--color-text-primary); } /* --- Dark / Evening Backgrounds --- */ .bg-deep-walnut { background-color: var(--color-deep-walnut); color: var(--color-text-on-dark); } .bg-espresso { background-color: var(--color-espresso); color: var(--color-text-on-dark); } .bg-walnut { background-color: var(--color-walnut); color: var(--color-text-on-dark); } .bg-burgundy { background-color: var(--color-burgundy); color: var(--color-ivory); } /* --- Dark background text overrides --- */ .bg-deep-walnut h1, .bg-deep-walnut h2, .bg-deep-walnut h3, .bg-deep-walnut h4, .bg-deep-walnut h5, .bg-deep-walnut h6, .bg-espresso h1, .bg-espresso h2, .bg-espresso h3, .bg-espresso h4, .bg-espresso h5, .bg-espresso h6, .bg-walnut h1, .bg-walnut h2, .bg-walnut h3, .bg-walnut h4, .bg-walnut h5, .bg-walnut h6, .bg-burgundy h1, .bg-burgundy h2, .bg-burgundy h3, .bg-burgundy h4, .bg-burgundy h5, .bg-burgundy h6 { color: var(--color-ivory); } .bg-deep-walnut p, .bg-espresso p, .bg-walnut p, .bg-burgundy p { color: var(--color-text-on-dark-muted); } .bg-deep-walnut .section-number, .bg-espresso .section-number, .bg-walnut .section-number, .bg-burgundy .section-number { color: var(--color-gold); } .bg-deep-walnut .section-intro, .bg-espresso .section-intro, .bg-walnut .section-intro, .bg-burgundy .section-intro { color: var(--color-text-on-dark-muted); } .bg-deep-walnut .gold-rule, .bg-espresso .gold-rule, .bg-walnut .gold-rule, .bg-burgundy .gold-rule, .bg-deep-walnut .gold-rule--center, .bg-espresso .gold-rule--center, .bg-walnut .gold-rule--center, .bg-burgundy .gold-rule--center { opacity: 0.7; } /* --- Inlined from _food-exhibition.css --- */ /* ========================================================================== The Alexander — Food Exhibition Full-viewport dark showcase with glassmorphism info panel and thumbnail navigation. Interactive dish carousel with crossfade images and staggered text reveal. Dependencies: _variables.css (design tokens), _components.css (.btn-arrow) ========================================================================== */ /* ── Exhibition container ── */ .food-exhibition { position: relative; width: 100vw; height: 80vh; min-height: 600px; overflow: hidden; background: var(--color-espresso); } /* Edge fades */ .food-exhibition::before, .food-exhibition::after { content: ''; position: absolute; left: 0; right: 0; height: 150px; z-index: 5; pointer-events: none; } .food-exhibition::before { top: 0; background: linear-gradient(to bottom, var(--color-espresso) 0%, transparent 100%); } .food-exhibition::after { bottom: 0; height: 80px; background: linear-gradient(to top, var(--color-espresso) 0%, transparent 100%); } /* ── Stage images ── */ .food-exhibition__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transform: scale(1.05); transition: opacity 1.8s var(--ease-luxe), transform 8s linear; z-index: 1; filter: brightness(0.65) contrast(1.1); } .food-exhibition__image.active { opacity: 1; transform: scale(1); } /* ── Glass panel ── */ .food-exhibition__panel { position: absolute; bottom: 12%; left: 8%; width: 360px; padding: 2.5rem; border-radius: var(--radius-md); background: rgba(42, 31, 24, 0.4); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); border: 1px solid rgba(250, 247, 242, 0.08); box-shadow: 0 20px 48px rgba(30, 22, 16, 0.5), inset 0 1px 0 rgba(250, 247, 242, 0.08); z-index: 10; display: flex; flex-direction: column; gap: 2rem; transform: translateY(0); transition: transform 0.6s var(--ease-luxe); } /* Noise texture overlay */ .food-exhibition__panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: -1; } /* ── Content layers ── */ .food-exhibition__content { position: relative; min-height: 140px; } .food-exhibition__dish { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateY(10px); transition: opacity 0.8s var(--ease-luxe), transform 0.8s var(--ease-luxe); pointer-events: none; } .food-exhibition__dish.active { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; } .food-exhibition__label { font-family: var(--font-body); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--color-text-on-dark-muted); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 8px; } .food-exhibition__label::before { content: ''; display: inline-block; width: 4px; height: 4px; background-color: var(--color-gold); border-radius: 50%; } .food-exhibition__title { font-family: var(--font-heading); font-size: 2.75rem; font-weight: var(--weight-normal); line-height: var(--leading-tighter); margin-bottom: 1rem; letter-spacing: var(--tracking-tight); color: var(--color-text-on-dark); } .food-exhibition__title span { font-style: italic; color: var(--color-gold); font-weight: var(--weight-light); } .food-exhibition__desc { font-size: 0.85rem; color: var(--color-text-on-dark-muted); line-height: var(--leading-relaxed); font-weight: var(--weight-light); } /* ── Controls — border + padding only, .btn-arrow is global ── */ .food-exhibition__controls { display: flex; align-items: center; padding-top: 1.5rem; border-top: 1px solid rgba(250, 247, 242, 0.08); } /* ── Thumbnail nav ── */ .food-exhibition__nav { position: absolute; right: 8%; bottom: 12%; z-index: 10; display: flex; flex-direction: column; gap: 1rem; } .food-exhibition__thumb { width: 60px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; position: relative; cursor: pointer; border: 1px solid rgba(250, 247, 242, 0.1); transition: all 0.5s var(--ease-smooth); background: var(--color-walnut); } .food-exhibition__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: grayscale(100%); transition: all 0.5s var(--ease-smooth); } /* Active state */ .food-exhibition__thumb.active { border-color: var(--color-gold); transform: translateX(-10px); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5); } .food-exhibition__thumb.active img { opacity: 1; filter: grayscale(0%); } /* Hover (not active) */ .food-exhibition__thumb:hover:not(.active) { border-color: rgba(250, 247, 242, 0.3); transform: translateX(-4px); } .food-exhibition__thumb:hover:not(.active) img { opacity: 0.7; } /* Progress bar */ .food-exhibition__thumb::after { content: ''; position: absolute; bottom: 0; left: 0; height: 3px; background: var(--gradient-gold-shine); width: 0%; transition: width 0s; /* instant reset when deactivated */ } .food-exhibition__thumb.active::after { width: 100%; transition: width 8s linear; /* slow fill when active */ } /* ── Responsive ── */ @media (max-width: 1024px) { .food-exhibition__panel { left: 4%; width: 320px; padding: 2rem; } .food-exhibition__nav { right: 4%; } } @media (max-width: 640px) { .food-exhibition { height: auto; min-height: 100vh; display: flex; flex-direction: column; } .food-exhibition__stage { position: relative; width: 100%; height: 50vh; min-height: 300px; flex-shrink: 0; } .food-exhibition__panel { position: relative; bottom: auto; left: auto; width: 100%; border-radius: 0; padding: 2rem 1.5rem; box-shadow: none; border-left: none; border-right: none; } .food-exhibition__nav { position: relative; right: auto; bottom: auto; flex-direction: row; justify-content: center; padding: 1.5rem; gap: 0.75rem; } .food-exhibition__thumb { width: 56px; height: 56px; } .food-exhibition__thumb.active { transform: translateY(-4px); } .food-exhibition__thumb:hover:not(.active) { transform: translateY(-2px); } .food-exhibition__title { font-size: 2.25rem; } } /* --- Inlined from _food-editorial.css --- */ /* ========================================================================== The Alexander — Food Editorial Horizontal slice gallery with hover-to-expand interaction. Pure CSS — no JavaScript. Each slice reveals dish info on hover. Dependencies: _variables.css (design tokens), _buttons.css (.btn--text) ========================================================================== */ /* ── Section wrapper ── */ .food-editorial__wrapper { position: relative; z-index: 1; max-width: 1600px; margin: 0 auto; padding: 0 4vw; display: flex; flex-direction: column; gap: 6vh; } /* ── Header ── */ .food-editorial__header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; } .food-editorial__micro { font-family: var(--font-body); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--color-text-secondary); margin-bottom: var(--space-2); } .food-editorial__title { font-family: var(--font-heading); font-weight: var(--weight-normal); font-size: var(--text-4xl); letter-spacing: 0.02em; color: var(--color-text-primary); line-height: var(--leading-tighter); } /* ── Gallery container — full-viewport breakout ── */ .food-editorial__gallery { display: flex; height: 65vh; min-height: 600px; gap: 2px; background-color: var(--color-ivory-warm); padding: 2px 0; width: 100vw; position: relative; left: 50%; transform: translateX(-50%); } /* ── Slice — THE HERO INTERACTION ── */ .food-editorial__slice { flex: 1; position: relative; overflow: hidden; cursor: pointer; transition: flex 2.5s cubic-bezier(0.19, 1, 0.22, 1); background-color: var(--color-ivory); } .food-editorial__slice:hover { flex: 2.5; } /* ── Progress bar ── */ .food-editorial__progress { position: absolute; top: 12px; left: 12px; right: 12px; height: 2px; background: rgba(201, 169, 98, 0.2); z-index: 10; border-radius: var(--radius-sm); overflow: hidden; } .food-editorial__progress-fill { width: 0%; height: 100%; background: var(--color-gold); transition: width 0s linear; /* instant reset */ } .food-editorial__slice:hover .food-editorial__progress-fill { width: 100%; transition: width 8s linear; /* slow fill while hovered */ } /* ── Slice image ── */ .food-editorial__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: contrast(1) brightness(0.95); transform: scale(1.003); transition: filter 3s cubic-bezier(0.19, 1, 0.22, 1), transform 8s linear; } .food-editorial__slice:hover .food-editorial__image { filter: contrast(1.03) brightness(1); transform: scale(1); } /* Per-slice focus points */ .food-editorial__slice:nth-child(1) .food-editorial__image { object-position: center 60%; /* oyster platter centered */ } /* ── Overlay layer 1: tint ── */ .food-editorial__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(250, 247, 242, 0.5) 0%, rgba(250, 247, 242, 0.1) 35%, transparent 100% ); transition: background 0.6s cubic-bezier(0.19, 1, 0.22, 1); z-index: 2; } .food-editorial__slice:hover .food-editorial__overlay { background: linear-gradient( to top, rgba(201, 169, 98, 0.15) 0%, transparent 60%, transparent 100% ); } /* ── Overlay layer 2: text protection ── */ .food-editorial__text-guard { position: absolute; inset: 0; background: linear-gradient(to top, rgba(250, 247, 242, 0.7) 0%, transparent 45%); z-index: 3; opacity: 0.6; transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1); } .food-editorial__slice:hover .food-editorial__text-guard { opacity: 1; } /* ── Overlay layer 3: gold frame ── */ .food-editorial__frame { position: absolute; inset: 12px; border: 1px solid rgba(201, 169, 98, 0.3); pointer-events: none; z-index: 10; opacity: 0; transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1); } .food-editorial__slice:hover .food-editorial__frame { opacity: 1; transition-delay: 0.4s; /* appears LAST */ } /* ── Slice content container ── */ .food-editorial__content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 3vw; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } /* ── Collapsed content (vertical text) ── */ .food-editorial__collapsed { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; opacity: 1; transition: opacity 0.3s ease; position: absolute; bottom: 3vw; left: 50%; transform: translateX(-50%); background: rgba(250, 247, 242, 0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 0.75rem 1rem; border-radius: var(--radius-sm, 4px); width: 3.5rem; height: 17rem; box-sizing: border-box; } .food-editorial__number { font-family: var(--font-heading); font-size: 1.75rem; font-weight: var(--weight-light); color: var(--color-text-primary); margin-bottom: 1rem; } .food-editorial__vertical { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; color: var(--color-text-muted); } .food-editorial__slice:hover .food-editorial__collapsed { opacity: 0; pointer-events: none; } /* ── Expanded content (hover reveal) ── */ .food-editorial__expanded { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: 0s; pointer-events: none; width: 100%; min-width: 300px; background: rgba(250, 247, 242, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 1.5rem; border-radius: var(--radius-sm); } .food-editorial__slice:hover .food-editorial__expanded { opacity: 1; transform: translateY(0); transition-delay: 0.3s; /* waits for slice expansion to begin */ pointer-events: auto; } /* ── Course meta row ── */ .food-editorial__meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .food-editorial__meta-num { font-family: var(--font-heading); font-size: 2.25rem; font-weight: var(--weight-light); color: var(--color-text-primary); line-height: 1; } .food-editorial__meta-line { height: 1px; flex-grow: 1; background: var(--gradient-gold-shine); opacity: 0.6; max-width: 60px; } .food-editorial__meta-label { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); } /* ── Dish title ── */ .food-editorial__dish-title { font-family: var(--font-heading); font-size: 2.25rem; font-weight: var(--weight-normal); line-height: var(--leading-tighter); margin-bottom: 1.5rem; color: var(--color-text-primary); } /* ── Description ── */ .food-editorial__desc { font-family: var(--font-heading); font-style: italic; font-size: 1.1rem; color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: 2rem; max-width: 80%; } /* ── Detail tags ── */ .food-editorial__details { display: flex; gap: 1.5rem; flex-wrap: wrap; } .food-editorial__detail { display: flex; flex-direction: column; gap: 0.25rem; } .food-editorial__detail-label { font-family: var(--font-body); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-gold); font-weight: var(--weight-semibold); } .food-editorial__detail-value { font-family: var(--font-heading); font-size: 0.9rem; color: var(--color-text-muted); } /* ── CTA ── */ .food-editorial__cta { text-align: center; margin-top: var(--space-8); } .food-editorial__cta .btn--text { padding: var(--space-3) var(--space-8); border: 1px solid var(--color-gold); transition: background-color var(--transition-normal), color var(--transition-normal), gap var(--transition-normal); } .food-editorial__cta .btn--text:hover { background-color: var(--color-gold); color: var(--color-charcoal); } .food-editorial__cta .btn--text:hover::after { transform: translateX(4px); } /* ── Responsive ── */ @media (max-width: 1024px) { .food-editorial__gallery { flex-direction: column; height: 120vh; } .food-editorial__vertical { writing-mode: horizontal-tb; transform: none; margin-top: var(--space-2); } .food-editorial__collapsed { flex-direction: row; bottom: 50%; transform: translate(-50%, 50%); gap: 1rem; width: auto; height: auto; padding: 0.5rem 1rem; } .food-editorial__slice:hover { flex: 3; } } @media (max-width: 767px) { .food-editorial__gallery { flex-direction: column; height: auto; width: 100%; left: auto; transform: none; gap: var(--space-4); padding: 0; background-color: transparent; } .food-editorial__slice { flex: none; min-height: 260px; border-radius: var(--radius-md); overflow: hidden; } .food-editorial__slice:hover { flex: none; } .food-editorial__collapsed { display: none; } .food-editorial__expanded { opacity: 1; transform: translateY(0); pointer-events: auto; position: absolute; bottom: 0; left: 0; width: 100%; min-width: 0; border-radius: 0; background: rgba(30, 22, 16, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 1rem 1.25rem; } .food-editorial__dish-title { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--color-ivory); } .food-editorial__desc { font-size: 0.95rem; color: var(--color-ivory); margin-bottom: 0.75rem; max-width: 100%; } .food-editorial__meta-num, .food-editorial__meta-label { color: var(--color-ivory); } .food-editorial__detail-value { color: var(--color-ivory-warm); } } @media (prefers-reduced-motion: reduce) { .food-editorial__slice { transition: none; } .food-editorial__slice:hover { flex: 2.5; /* allow expand, but instant */ } .food-editorial__progress-fill, .food-editorial__slice:hover .food-editorial__progress-fill { transition: none; } .food-editorial__image { transition: none; transform: none; } .food-editorial__slice:hover .food-editorial__image { transform: none; } .food-editorial__overlay, .food-editorial__text-guard, .food-editorial__frame { transition: none; } .food-editorial__collapsed { transition: none; } .food-editorial__expanded { transition: none; transition-delay: 0s; } .food-editorial__slice:hover .food-editorial__expanded { transition: none; transition-delay: 0s; } } /* --- Inlined from _event-inquiry.css --- */ /* ========================================================================== EVENT INQUIRY — Multi-Step Form The Alexander Rochester All styles scoped under .section--event-inquiry to prevent leaking. Uses design tokens exclusively — no hardcoded values. ========================================================================== */ /* ========================================================================= LAYOUT: Form + Sidebar ========================================================================= */ .inquiry-layout { display: grid; gap: var(--space-8); } @media (min-width: 768px) { .inquiry-layout { grid-template-columns: 1fr; gap: var(--space-12); } } @media (min-width: 1024px) { .inquiry-layout { grid-template-columns: 2fr 1fr; } } .inquiry-layout__main { min-width: 0; } /* ========================================================================= PROGRESS INDICATOR ========================================================================= */ .inquiry-progress { margin-bottom: var(--space-8); } .inquiry-progress__list { display: flex; list-style: none; padding: 0; margin: 0; counter-reset: none; } .inquiry-progress__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); position: relative; text-align: center; } /* Connector line between steps */ .inquiry-progress__step:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 2px; background-color: var(--color-border); transition: background-color var(--transition-normal); } .inquiry-progress__step--active:not(:last-child)::after, .inquiry-progress__step--completed:not(:last-child)::after { background-color: var(--color-burgundy); } .inquiry-progress__number { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); border-radius: var(--radius-full); border: 2px solid var(--color-text-secondary); color: var(--color-text-secondary); background-color: var(--color-white); transition: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal); position: relative; z-index: 1; } .inquiry-progress__step--active .inquiry-progress__number { border-color: var(--color-burgundy); background-color: var(--color-burgundy); color: var(--color-white); } .inquiry-progress__step--completed .inquiry-progress__number { border-color: var(--color-burgundy); background-color: var(--color-burgundy); color: var(--color-white); } .inquiry-progress__label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); transition: color var(--transition-normal); } .inquiry-progress__step--active .inquiry-progress__label { color: var(--color-burgundy); } .inquiry-progress__step--completed .inquiry-progress__label { color: var(--color-text-primary); } /* Hide labels on very small screens */ @media (max-width: 400px) { .inquiry-progress__label { font-size: 0.625rem; letter-spacing: var(--tracking-normal); } } /* ========================================================================= STEP PANELS ========================================================================= */ .inquiry-step__header { margin-bottom: var(--space-8); } .inquiry-step__heading { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); } @media (min-width: 768px) { .inquiry-step__heading { font-size: var(--text-4xl); } } .inquiry-step__description { font-size: var(--text-base); color: var(--color-text-secondary); margin-bottom: 0; } .inquiry-step__selling-point { font-family: var(--font-accent); font-size: var(--text-xl); font-weight: 400; font-style: normal; font-synthesis: none; color: var(--color-text-primary); margin-top: var(--space-3); margin-bottom: 0; } /* ========================================================================= ROOM CARDS (Step 1) ========================================================================= */ .inquiry-rooms { display: grid; gap: var(--space-6); } @media (min-width: 640px) { .inquiry-rooms { grid-template-columns: repeat(2, 1fr); } } /* 3-column grid only kicks in at 1200+ — at 1024 the cards are too tight and "Main Dining Room" wraps to three lines. Keep 2-column from 640 to 1199, then 3-column at 1200+. */ @media (min-width: 1200px) { .inquiry-rooms { grid-template-columns: repeat(3, 1fr); } } .inquiry-room-card { position: relative; background-color: var(--color-white); border: 2px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .inquiry-room-card:hover { border-color: var(--color-gray-light); box-shadow: var(--shadow-md); } .inquiry-room-card:focus { outline: 2px solid var(--color-gold); outline-offset: 2px; } /* Selected state */ .inquiry-room-card[aria-checked="true"] { border-color: var(--color-burgundy); box-shadow: var(--shadow-md); } .inquiry-room-card__media { aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--color-ivory-dark); } .inquiry-room-card__media img { width: 100%; height: 100%; object-fit: cover; } .inquiry-room-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--color-ivory-dark); color: var(--color-gray-light); font-size: var(--text-sm); } .inquiry-room-card__content { padding: var(--space-4); } .inquiry-room-card__name { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-medium); margin-bottom: var(--space-1); } .inquiry-room-card__capacity { font-size: var(--text-sm); color: var(--color-gold); font-weight: var(--weight-medium); margin-bottom: var(--space-3); } .inquiry-room-card__capacity-divider { margin: 0 var(--space-1); color: var(--color-gray-light); } .inquiry-room-card__description { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); } .inquiry-room-card__features { list-style: none; padding: 0; margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); } .inquiry-room-card__features li { padding: var(--space-1) 0; padding-left: var(--space-4); position: relative; } .inquiry-room-card__features li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background-color: var(--color-gold); border-radius: var(--radius-full); } /* Check indicator (hidden until selected) */ .inquiry-room-card__check { position: absolute; top: var(--space-3); right: var(--space-3); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background-color: var(--color-burgundy); color: var(--color-white); border-radius: var(--radius-full); opacity: 0; transform: scale(0.5); transition: opacity var(--transition-fast), transform var(--transition-fast); } .inquiry-room-card[aria-checked="true"] .inquiry-room-card__check { opacity: 1; transform: scale(1); } /* ========================================================================= RESTAURANT CARDS (Step 3) ========================================================================= */ .inquiry-restaurants { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .inquiry-restaurants { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .inquiry-restaurants { grid-template-columns: repeat(3, 1fr); } } .inquiry-restaurant-card { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background-color: var(--color-white); border: 2px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .inquiry-restaurant-card:hover { border-color: var(--color-gray-light); box-shadow: var(--shadow-sm); } .inquiry-restaurant-card:focus { outline: 2px solid var(--color-gold); outline-offset: 2px; } /* Selected state */ .inquiry-restaurant-card[aria-checked="true"] { border-color: var(--color-burgundy); background-color: var(--color-ivory); } .inquiry-restaurant-card__content { flex: 1; min-width: 0; } .inquiry-restaurant-card__name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-medium); margin-bottom: var(--space-1); } .inquiry-restaurant-card__cuisine { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 0; } /* Check indicator */ .inquiry-restaurant-card__check { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--color-burgundy); opacity: 0; transition: opacity var(--transition-fast); } .inquiry-restaurant-card[aria-checked="true"] .inquiry-restaurant-card__check { opacity: 1; } /* Undecided option styling */ .inquiry-restaurant-card--undecided { border-style: dashed; grid-column: 1 / -1; } .inquiry-restaurant-card--undecided .inquiry-restaurant-card__name { opacity: 0.85; } /* ========================================================================= FORM FIELDS (Steps 2 & 4) ========================================================================= */ .inquiry-field { margin-bottom: var(--space-6); } .inquiry-field__label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); margin-bottom: var(--space-2); } .inquiry-field__required { color: var(--color-burgundy); } .inquiry-field__input, .inquiry-field__select, .inquiry-field__textarea { display: block; width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-primary); background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .inquiry-field__input:focus, .inquiry-field__select:focus, .inquiry-field__textarea:focus { outline: none; border-color: var(--color-burgundy); box-shadow: 0 0 0 3px rgba(114, 47, 55, 0.15); } .inquiry-field__input::placeholder, .inquiry-field__textarea::placeholder { color: var(--color-gray-light); } .inquiry-field__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B6B6B' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-10); } .inquiry-field__textarea { resize: vertical; min-height: 120px; } .inquiry-field__hint { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-2); margin-bottom: 0; } /* Error state on fields */ .inquiry-field--error .inquiry-field__input, .inquiry-field--error .inquiry-field__select, .inquiry-field--error .inquiry-field__textarea { border-color: var(--color-burgundy); box-shadow: 0 0 0 3px rgba(114, 47, 55, 0.15); } /* Checkbox */ .inquiry-field__checkbox { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-base); /* Label row meets 44px touch target minimum on mobile */ min-height: 44px; padding-block: var(--space-2); } .inquiry-field__checkbox input[type="checkbox"] { position: relative; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-burgundy); cursor: pointer; } /* Expand checkbox hit area to 44×44 via pseudo-element without affecting layout */ .inquiry-field__checkbox input[type="checkbox"]::before { content: ''; position: absolute; inset: -12px; } .inquiry-field__checkbox-text { line-height: var(--leading-normal); } /* ========================================================================= FIELD ERRORS ========================================================================= */ .inquiry-field-error { font-size: var(--text-sm); color: var(--color-burgundy); margin-top: var(--space-2); margin-bottom: 0; } /* Error banner (form-level errors) */ .inquiry-error-banner { padding: var(--space-4); background-color: var(--color-ivory-dark); border: 1px solid var(--color-burgundy-light); border-radius: var(--radius-md); margin-bottom: var(--space-6); } .inquiry-error-banner__message { font-size: var(--text-sm); color: var(--color-burgundy-dark); margin-bottom: 0; } /* ========================================================================= STEP NAVIGATION ========================================================================= */ .inquiry-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); } .inquiry-nav__spacer { flex: 1; } /* Submit button loading state */ .inquiry-nav__submit[disabled] { opacity: 0.7; cursor: not-allowed; } /* ========================================================================= FORM PRIVACY ========================================================================= */ .inquiry-form__privacy { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-4); margin-bottom: 0; } /* ========================================================================= CONFIRMATION STATE ========================================================================= */ .inquiry-confirmation { text-align: center; padding: var(--space-12) var(--space-4); } .inquiry-confirmation__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--radius-full); background-color: var(--color-ivory-dark); color: var(--color-burgundy); margin-bottom: var(--space-6); } .inquiry-confirmation__heading { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-semibold); margin-bottom: var(--space-6); } .inquiry-confirmation__body { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); max-width: var(--content-width); margin: 0 auto var(--space-6); } .inquiry-confirmation__body p { margin-bottom: var(--space-4); } .inquiry-confirmation__reference { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); } .inquiry-confirmation__reference strong { color: var(--color-burgundy); font-family: var(--font-body); letter-spacing: var(--tracking-wide); } .inquiry-confirmation__contact { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 0; } /* ========================================================================= SIDEBAR ========================================================================= */ .inquiry-layout__sidebar { padding: var(--space-6); background-color: var(--color-ivory-dark); border-radius: var(--radius-md); height: fit-content; position: sticky; top: var(--space-6); } @media (max-width: 1023px) { .inquiry-layout__sidebar { position: static; } } .inquiry-sidebar__title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-medium); margin-bottom: var(--space-6); } .inquiry-sidebar__steps { list-style: none; padding: 0; margin: 0; } .inquiry-sidebar__step { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); } .inquiry-sidebar__step:last-child { margin-bottom: 0; } .inquiry-sidebar__step-number { flex-shrink: 0; font-family: var(--font-accent); font-size: var(--text-xl); font-weight: var(--weight-normal); letter-spacing: var(--tracking-wide); color: var(--color-burgundy); line-height: 1; min-width: 2ch; } .inquiry-sidebar__step-content strong { display: block; font-size: var(--text-sm); margin-bottom: var(--space-1); } .inquiry-sidebar__step-content p { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; line-height: var(--leading-relaxed); } .inquiry-sidebar__contact { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border); } .inquiry-sidebar__contact-title { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); } .inquiry-sidebar__contact p { margin-bottom: var(--space-2); } .inquiry-sidebar__contact p:last-child { margin-bottom: 0; } .inquiry-sidebar__hours { font-size: var(--text-sm); color: var(--color-text-secondary); } /* ========================================================================= EVENING-ZONE OVERRIDES (gold-on-espresso theme) Applies when the section sits inside an evening atmosphere zone. Reuses the dark-form pattern established in _events.css 856–928 by layering the inquiry-specific class names on top of the same approach. ========================================================================= */ .section--event-inquiry[data-atmosphere="evening"] { color: var(--color-text-on-dark); } .section--event-inquiry.bg-espresso { background-color: var(--color-espresso); } /* --- Section header (above progress) ------------------------------------ */ .inquiry-section-header { text-align: center; margin-bottom: var(--space-10); } .inquiry-section-header__eyebrow { display: block; margin-bottom: var(--space-3); } .bg-espresso .inquiry-section-header__eyebrow { color: var(--color-gold); } .inquiry-section-header__headline { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-normal); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); color: var(--color-text-primary); } .bg-espresso .inquiry-section-header__headline, .bg-walnut .inquiry-section-header__headline, .bg-deep-walnut .inquiry-section-header__headline { color: var(--color-text-on-dark); } .inquiry-section-header__intro { font-family: var(--font-body); font-style: normal; font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 48ch; margin: 0 auto; } .bg-espresso .inquiry-section-header__intro, .bg-walnut .inquiry-section-header__intro, .bg-deep-walnut .inquiry-section-header__intro { color: var(--color-text-on-dark-muted); } @media (min-width: 768px) { .inquiry-section-header { margin-bottom: var(--space-12); } } /* --- Gold progress indicator (modifier — keeps burgundy default intact) - */ .inquiry-progress--gold .inquiry-progress__step::after { background-color: rgba(201, 169, 98, 0.18); } .inquiry-progress--gold .inquiry-progress__step--active::after, .inquiry-progress--gold .inquiry-progress__step--completed::after { background-color: var(--color-gold); } .inquiry-progress--gold .inquiry-progress__number { font-family: var(--font-accent); font-weight: var(--weight-normal); font-size: var(--text-base); background-color: transparent; border: 1px solid rgba(201, 169, 98, 0.35); color: rgba(250, 247, 242, 0.45); width: 32px; height: 32px; } .inquiry-progress--gold .inquiry-progress__step--active .inquiry-progress__number { border-color: var(--color-gold); background-color: transparent; color: var(--color-gold); box-shadow: 0 0 0 4px rgba(201, 169, 98, 0.10); } .inquiry-progress--gold .inquiry-progress__step--completed .inquiry-progress__number { border-color: var(--color-gold); background-color: var(--color-gold); color: var(--color-espresso); } .inquiry-progress--gold .inquiry-progress__label { color: var(--color-text-on-dark-subtle); letter-spacing: var(--tracking-widest); font-size: var(--text-xs); } .inquiry-progress--gold .inquiry-progress__step--active .inquiry-progress__label { color: var(--color-gold); } .inquiry-progress--gold .inquiry-progress__step--completed .inquiry-progress__label { color: var(--color-text-on-dark-muted); } /* --- Step heading on dark background ----------------------------------- */ .bg-espresso .inquiry-step__heading { color: var(--color-text-on-dark); font-weight: var(--weight-normal); letter-spacing: var(--tracking-tight); } .bg-espresso .inquiry-step__description { color: var(--color-text-on-dark-muted); font-style: normal; font-family: var(--font-body); } .bg-espresso .inquiry-step__selling-point { color: var(--color-gold); } /* --- Room cards — dark glass with gold hover/active --------------------- */ .bg-espresso .inquiry-room-card { background-color: rgba(250, 247, 242, 0.04); border: 1px solid rgba(201, 169, 98, 0.18); border-radius: var(--radius-md); transition: border-color var(--transition-normal), background-color var(--transition-normal), transform var(--transition-normal); } .bg-espresso .inquiry-room-card:hover { border-color: var(--color-gold); background-color: rgba(250, 247, 242, 0.06); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .bg-espresso .inquiry-room-card:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; } .bg-espresso .inquiry-room-card[aria-checked="true"] { border-color: var(--color-gold); background-color: rgba(250, 247, 242, 0.06); box-shadow: inset 0 0 0 1px rgba(250, 247, 242, 0.08); } .bg-espresso .inquiry-room-card__name { color: var(--color-ivory); font-weight: var(--weight-normal); } .bg-espresso .inquiry-room-card__capacity { color: var(--color-gold); font-family: var(--font-body); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--text-xs); } .bg-espresso .inquiry-room-card__capacity-divider { color: rgba(201, 169, 98, 0.35); } .bg-espresso .inquiry-room-card__description { color: var(--color-text-on-dark-muted); } .bg-espresso .inquiry-room-card__shortline { color: var(--color-text-on-dark); font-style: normal; font-size: var(--text-base); margin: var(--space-3) 0 0; line-height: var(--leading-relaxed); } .bg-espresso .inquiry-room-card__features { color: var(--color-text-on-dark-muted); } .bg-espresso .inquiry-room-card__features li::before { background-color: var(--color-gold-muted); } .bg-espresso .inquiry-room-card__check { background-color: var(--color-gold); color: var(--color-espresso); } /* Undecided / "Help me choose" room card */ .inquiry-room-card--undecided .inquiry-room-card__media--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(201, 169, 98, 0.08), rgba(201, 169, 98, 0.02)); } .inquiry-room-card--undecided .inquiry-room-card__placeholder-mark { font-family: var(--font-accent); font-size: 4rem; color: var(--color-gold); line-height: 1; } .bg-espresso .inquiry-room-card--undecided { border-style: dashed; } /* --- Restaurant cards — same gold hover/active pattern ----------------- */ .bg-espresso .inquiry-restaurant-card { background-color: rgba(250, 247, 242, 0.04); border: 1px solid rgba(201, 169, 98, 0.18); padding: var(--space-4) var(--space-5); } .bg-espresso .inquiry-restaurant-card:hover { border-color: var(--color-gold); background-color: rgba(250, 247, 242, 0.06); transform: translateY(-2px); } .bg-espresso .inquiry-restaurant-card:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; } .bg-espresso .inquiry-restaurant-card[aria-checked="true"] { border-color: var(--color-gold); background-color: rgba(250, 247, 242, 0.06); } .bg-espresso .inquiry-restaurant-card__name { color: var(--color-ivory); font-weight: var(--weight-normal); } .bg-espresso .inquiry-restaurant-card__cuisine { color: var(--color-gold); font-family: var(--font-body); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--text-xs); margin-bottom: var(--space-2); } .bg-espresso .inquiry-restaurant-card__shortline { color: var(--color-text-on-dark-muted); font-style: normal; font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: 0; } .bg-espresso .inquiry-restaurant-card__check { color: var(--color-gold); } .bg-espresso .inquiry-restaurant-card--undecided { border-style: dashed; grid-column: 1 / -1; } .bg-espresso .inquiry-restaurant-card--undecided .inquiry-restaurant-card__name { opacity: 1; } /* --- Form fields — dark glass with gold focus --------------------------- */ .bg-espresso .inquiry-field__label { color: var(--color-text-on-dark); font-family: var(--font-body); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--text-xs); font-weight: var(--weight-medium); } .bg-espresso .inquiry-field__optional { color: var(--color-text-on-dark-subtle); font-weight: var(--weight-normal); text-transform: none; letter-spacing: var(--tracking-normal); } .bg-espresso .inquiry-field__required { color: var(--color-gold); } .bg-espresso .inquiry-field__input, .bg-espresso .inquiry-field__select, .bg-espresso .inquiry-field__textarea { background-color: rgba(250, 247, 242, 0.04); border: 1px solid rgba(201, 169, 98, 0.18); color: var(--color-ivory); } .bg-espresso .inquiry-field__input:focus, .bg-espresso .inquiry-field__select:focus, .bg-espresso .inquiry-field__textarea:focus { border-color: var(--color-gold); box-shadow: 0 0 0 4px rgba(201, 169, 98, 0.15); outline: none; } .bg-espresso .inquiry-field__input::placeholder, .bg-espresso .inquiry-field__textarea::placeholder { color: var(--color-text-on-dark-subtle); font-style: normal; } .bg-espresso .inquiry-field__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23C9A962' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } .bg-espresso .inquiry-field__hint { color: var(--color-text-on-dark-subtle); font-style: normal; } .bg-espresso .inquiry-field--error .inquiry-field__input, .bg-espresso .inquiry-field--error .inquiry-field__select, .bg-espresso .inquiry-field--error .inquiry-field__textarea { border-color: var(--color-burgundy-light); box-shadow: 0 0 0 3px rgba(114, 47, 55, 0.25); } .bg-espresso .inquiry-field-error { color: var(--color-warm-amber); font-style: normal; } .bg-espresso .inquiry-field__checkbox { color: var(--color-text-on-dark); } .bg-espresso .inquiry-field__checkbox input[type="checkbox"] { accent-color: var(--color-gold); } /* --- Step navigation buttons (dark mode) ------------------------------- */ .bg-espresso .inquiry-nav { border-top-color: rgba(201, 169, 98, 0.18); } .bg-espresso .inquiry-nav .btn--primary { background-color: var(--color-gold); color: var(--color-espresso); border: 1px solid var(--color-gold); } .bg-espresso .inquiry-nav .btn--primary:hover { background-color: var(--color-gold-dark); border-color: var(--color-gold-dark); } .bg-espresso .inquiry-nav .btn--primary:focus-visible { outline: 2px solid var(--color-ivory); outline-offset: 3px; } .bg-espresso .inquiry-nav .btn--secondary { background-color: transparent; color: var(--color-ivory); border: 1px solid rgba(250, 247, 242, 0.35); } .bg-espresso .inquiry-nav .btn--secondary:hover { border-color: var(--color-ivory); background-color: rgba(250, 247, 242, 0.06); } .bg-espresso .inquiry-nav__submit[disabled] { opacity: 0.6; } /* --- Privacy + form-level error banner --------------------------------- */ .bg-espresso .inquiry-form__privacy { color: var(--color-text-on-dark-subtle); font-style: normal; text-align: center; margin-top: var(--space-6); } .bg-espresso .inquiry-error-banner { background-color: rgba(114, 47, 55, 0.18); border: 1px solid var(--color-burgundy-light); } .bg-espresso .inquiry-error-banner__message { color: var(--color-warm-amber); } /* --- Sidebar — tinted glass card with internal gold rule --------------- */ .bg-espresso .inquiry-layout__sidebar { background-color: rgba(250, 247, 242, 0.04); border: 1px solid rgba(201, 169, 98, 0.18); border-radius: var(--radius-md); padding: var(--space-8) var(--space-6); } .bg-espresso .inquiry-sidebar__title { color: var(--color-ivory); font-family: var(--font-heading); font-weight: var(--weight-normal); } .bg-espresso .inquiry-sidebar__step-number { background-color: transparent; color: var(--color-gold); font-family: var(--font-accent); font-size: var(--text-lg); width: auto; height: auto; font-weight: var(--weight-normal); } .bg-espresso .inquiry-sidebar__step-content strong { color: var(--color-ivory); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-normal); } .bg-espresso .inquiry-sidebar__step-content p { color: var(--color-text-on-dark-muted); font-size: var(--text-sm); margin-top: var(--space-1); } .inquiry-sidebar__divider { margin: var(--space-6) 0; } .bg-espresso .inquiry-sidebar__contact { border-top-color: transparent; padding-top: 0; margin-top: 0; } .bg-espresso .inquiry-sidebar__contact-title { color: var(--color-ivory); font-family: var(--font-heading); font-weight: var(--weight-normal); font-size: var(--text-lg); margin-bottom: var(--space-3); } .bg-espresso .inquiry-sidebar__contact a { color: var(--color-gold); text-decoration: none; border-bottom: 1px solid rgba(201, 169, 98, 0.35); transition: border-color var(--transition-fast), color var(--transition-fast); } .bg-espresso .inquiry-sidebar__contact a:hover { color: var(--color-gold-light); border-bottom-color: var(--color-gold); } .bg-espresso .inquiry-sidebar__hours { color: var(--color-text-on-dark-muted); font-style: normal; font-size: var(--text-sm); } .bg-espresso .inquiry-sidebar__closing { color: var(--color-gold); font-family: var(--font-body); font-style: normal; font-size: var(--text-sm); margin-top: var(--space-3); } /* --- Confirmation state — cinematic resolve ---------------------------- */ .bg-espresso .inquiry-confirmation { text-align: center; padding: var(--space-16) var(--space-4); max-width: 60ch; margin: 0 auto; } .bg-espresso .inquiry-confirmation__heading { font-family: var(--font-heading); font-size: var(--text-5xl); font-weight: var(--weight-normal); letter-spacing: var(--tracking-tight); color: var(--color-ivory); margin: 0 0 var(--space-6); } .bg-espresso .inquiry-confirmation__body { color: var(--color-text-on-dark-muted); font-size: var(--text-lg); font-style: normal; line-height: var(--leading-relaxed); margin: 0 0 var(--space-8); } .bg-espresso .inquiry-confirmation__body p { margin: 0 0 var(--space-4); } .bg-espresso .inquiry-confirmation__rule { margin: var(--space-8) auto; width: 80px; } .bg-espresso .inquiry-confirmation__reference { color: var(--color-text-on-dark-subtle); font-family: var(--font-body); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-size: var(--text-xs); margin-bottom: var(--space-8); } .bg-espresso .inquiry-confirmation__reference strong { color: var(--color-gold); font-family: var(--font-accent); font-weight: var(--weight-normal); letter-spacing: var(--tracking-wide); text-transform: none; } .bg-espresso .inquiry-confirmation__footer-label { color: var(--color-text-on-dark-muted); font-family: var(--font-body); font-style: normal; font-size: var(--text-base); margin-bottom: var(--space-2); } .bg-espresso .inquiry-confirmation__footer-contact { color: var(--color-gold); font-family: var(--font-heading); font-size: var(--text-xl); } .bg-espresso .inquiry-confirmation__footer-contact a { color: var(--color-gold); text-decoration: none; border-bottom: 1px solid rgba(201, 169, 98, 0.35); } .bg-espresso .inquiry-confirmation__footer-contact a:hover { color: var(--color-gold-light); border-bottom-color: var(--color-gold); } .bg-espresso .inquiry-confirmation__footer-divider { color: var(--color-text-on-dark-subtle); margin: 0 var(--space-3); } /* --- Layout responsive adjustments (mobile) ---------------------------- */ @media (max-width: 1023px) { .bg-espresso .inquiry-layout__sidebar { margin-top: var(--space-12); padding: var(--space-6) var(--space-5); } } @media (max-width: 640px) { .bg-espresso .inquiry-progress--gold .inquiry-progress__label { display: none; } .inquiry-section-header__headline { font-size: var(--text-3xl); } } /* --- Reduced-motion compliance ----------------------------------------- */ @media (prefers-reduced-motion: reduce) { .bg-espresso .inquiry-room-card, .bg-espresso .inquiry-restaurant-card, .bg-espresso .inquiry-field__input, .bg-espresso .inquiry-field__select, .bg-espresso .inquiry-field__textarea { transition-duration: 0.01ms; } .bg-espresso .inquiry-room-card:hover, .bg-espresso .inquiry-restaurant-card:hover { transform: none; } } /* ========================================================================= MOTION — entrance animations (paired with scripts/event-inquiry.js) Spec sections D.2.2 + D.2.3. Progressive enhancement: elements render visible by default; JS toggles the --revealing classes to trigger fades. ========================================================================= */ @media (prefers-reduced-motion: no-preference) { .inquiry-step--revealing { animation: inquiryStepReveal 600ms var(--ease-out-quart) both; } @keyframes inquiryStepReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .inquiry-confirmation--revealing > * { opacity: 0; animation: inquiryConfirmFade 800ms var(--ease-out-quart) forwards; } .inquiry-confirmation--revealing .inquiry-confirmation__heading { animation-delay: 100ms; } .inquiry-confirmation--revealing .inquiry-confirmation__body { animation-delay: 350ms; } .inquiry-confirmation--revealing .inquiry-confirmation__rule { animation-delay: 550ms; } .inquiry-confirmation--revealing .inquiry-confirmation__reference { animation-delay: 700ms; } .inquiry-confirmation--revealing .inquiry-confirmation__footer { animation-delay: 850ms; } @keyframes inquiryConfirmFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Mobile pulse on Continue button after room selection */ @keyframes inquiryContinuePulse { 0% { border-color: var(--color-gold); box-shadow: 0 0 0 0 rgba(201,169,98,0.5); } 50% { border-color: var(--color-gold); box-shadow: 0 0 0 6px rgba(201,169,98,0); } 100% { border-color: var(--color-gold); box-shadow: 0 0 0 0 rgba(201,169,98,0); } } .inquiry-nav__next--pulse { animation: inquiryContinuePulse 800ms ease-out forwards; } } /* ========================================================================= STEP 2 CALENDAR — month-grid date picker Renders 12 months ahead with prev/next nav. Booked dates (from /api/availability/:roomId) are visually dimmed and unselectable. ========================================================================= */ .inquiry-field--calendar .inquiry-calendar { margin-top: var(--space-3); } .inquiry-calendar { position: relative; background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); } .inquiry-calendar__loading { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); } .inquiry-calendar__spinner { width: 14px; height: 14px; border: 2px solid var(--color-border); border-top-color: var(--color-burgundy); border-radius: var(--radius-full); animation: inquiryCalendarSpin 800ms linear infinite; } @keyframes inquiryCalendarSpin { to { transform: rotate(360deg); } } .inquiry-calendar__fallback-note { margin: 0 0 var(--space-3) 0; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); background-color: var(--color-gold-faint); border-left: 2px solid var(--color-gold); border-radius: var(--radius-sm); } .inquiry-calendar__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .inquiry-calendar__month-label { margin: 0; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--color-text-primary); letter-spacing: var(--tracking-tight); text-align: center; flex: 1; } .inquiry-calendar__nav { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background-color: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-burgundy); font-family: var(--font-heading); font-size: var(--text-xl); line-height: 1; cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .inquiry-calendar__nav:hover:not([disabled]) { background-color: var(--color-burgundy); border-color: var(--color-burgundy); color: var(--color-ivory); } .inquiry-calendar__nav:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(114, 47, 55, 0.20); } .inquiry-calendar__nav[disabled] { opacity: 0.35; cursor: not-allowed; } .inquiry-calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); margin-bottom: var(--space-2); } .inquiry-calendar__weekday { text-align: center; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted); padding: var(--space-1) 0; } .inquiry-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); } .inquiry-calendar__day { appearance: none; position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-2); background-color: transparent; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-normal); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .inquiry-calendar__day--filler { visibility: hidden; cursor: default; } .inquiry-calendar__day:hover:not([disabled]):not(.inquiry-calendar__day--selected) { background-color: var(--color-burgundy-faint); border-color: var(--color-burgundy-light); } .inquiry-calendar__day:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(114, 47, 55, 0.20); z-index: 1; } .inquiry-calendar__day--today:not(.inquiry-calendar__day--selected) { border-color: var(--color-gold); font-weight: var(--weight-semibold); } .inquiry-calendar__day--past { color: var(--color-gray-300); cursor: not-allowed; } .inquiry-calendar__day--booked { color: var(--color-gray-400); cursor: not-allowed; background-image: repeating-linear-gradient( -45deg, transparent, transparent 4px, rgba(56, 52, 49, 0.08) 4px, rgba(56, 52, 49, 0.08) 5px ); } .inquiry-calendar__day--booked::after { content: ""; position: absolute; inset: auto 0 6px 0; margin-inline: auto; width: 4px; height: 4px; border-radius: var(--radius-full); background-color: var(--color-gray-400); } .inquiry-calendar__day--selected { background-color: var(--color-burgundy); border-color: var(--color-burgundy); color: var(--color-ivory); font-weight: var(--weight-semibold); } .inquiry-calendar__day--selected:hover { background-color: var(--color-burgundy-dark); border-color: var(--color-burgundy-dark); color: var(--color-ivory); } .inquiry-calendar__selected { margin: var(--space-3) 0 0 0; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-burgundy); letter-spacing: var(--tracking-wide); min-height: 1.2em; } .inquiry-calendar__selected:empty { margin: 0; min-height: 0; } /* Error state — when validateStep(2) flags missing date, the wrapper gets .inquiry-field--error. Tint the calendar border to match other field errors. */ .inquiry-field--error.inquiry-field--calendar .inquiry-calendar { border-color: var(--color-burgundy); box-shadow: 0 0 0 3px rgba(114, 47, 55, 0.15); } /* --- Dark / espresso atmosphere variant ---------------------------------- */ .bg-espresso .inquiry-calendar, .bg-walnut .inquiry-calendar { background-color: rgba(250, 247, 242, 0.04); border-color: rgba(250, 247, 242, 0.15); } .bg-espresso .inquiry-calendar__month-label, .bg-walnut .inquiry-calendar__month-label { color: var(--color-ivory); } .bg-espresso .inquiry-calendar__nav, .bg-walnut .inquiry-calendar__nav { border-color: rgba(250, 247, 242, 0.20); color: var(--color-gold); } .bg-espresso .inquiry-calendar__nav:hover:not([disabled]), .bg-walnut .inquiry-calendar__nav:hover:not([disabled]) { background-color: var(--color-gold); border-color: var(--color-gold); color: var(--color-walnut); } .bg-espresso .inquiry-calendar__weekday, .bg-walnut .inquiry-calendar__weekday { color: var(--color-text-on-dark-muted); } .bg-espresso .inquiry-calendar__day, .bg-walnut .inquiry-calendar__day { color: var(--color-ivory); } .bg-espresso .inquiry-calendar__day:hover:not([disabled]):not(.inquiry-calendar__day--selected), .bg-walnut .inquiry-calendar__day:hover:not([disabled]):not(.inquiry-calendar__day--selected) { background-color: rgba(201, 169, 98, 0.12); border-color: var(--color-gold-muted); } .bg-espresso .inquiry-calendar__day--today:not(.inquiry-calendar__day--selected), .bg-walnut .inquiry-calendar__day--today:not(.inquiry-calendar__day--selected) { border-color: var(--color-gold); } .bg-espresso .inquiry-calendar__day--past, .bg-walnut .inquiry-calendar__day--past { color: rgba(250, 247, 242, 0.25); } .bg-espresso .inquiry-calendar__day--booked, .bg-walnut .inquiry-calendar__day--booked { color: rgba(250, 247, 242, 0.35); background-image: repeating-linear-gradient( -45deg, transparent, transparent 4px, rgba(250, 247, 242, 0.06) 4px, rgba(250, 247, 242, 0.06) 5px ); } .bg-espresso .inquiry-calendar__day--booked::after, .bg-walnut .inquiry-calendar__day--booked::after { background-color: rgba(250, 247, 242, 0.35); } .bg-espresso .inquiry-calendar__day--selected, .bg-walnut .inquiry-calendar__day--selected { background-color: var(--color-gold); border-color: var(--color-gold); color: var(--color-walnut); } .bg-espresso .inquiry-calendar__day--selected:hover, .bg-walnut .inquiry-calendar__day--selected:hover { background-color: var(--color-gold-light); border-color: var(--color-gold-light); } .bg-espresso .inquiry-calendar__selected, .bg-walnut .inquiry-calendar__selected { color: var(--color-gold); } .bg-espresso .inquiry-calendar__fallback-note, .bg-walnut .inquiry-calendar__fallback-note { background-color: rgba(201, 169, 98, 0.08); color: var(--color-text-on-dark-muted); border-left-color: var(--color-gold); } .bg-espresso .inquiry-calendar__loading, .bg-walnut .inquiry-calendar__loading { color: var(--color-text-on-dark-muted); } .bg-espresso .inquiry-calendar__spinner, .bg-walnut .inquiry-calendar__spinner { border-color: rgba(250, 247, 242, 0.15); border-top-color: var(--color-gold); } /* --- Mobile tightening --------------------------------------------------- */ @media (max-width: 480px) { .inquiry-calendar { padding: var(--space-3); } .inquiry-calendar__nav { width: 36px; height: 36px; } .inquiry-calendar__month-label { font-size: var(--text-lg); } .inquiry-calendar__day { font-size: var(--text-sm); min-height: 40px; } } /* --- Reduced-motion: disable spinner/transitions on the calendar --------- */ @media (prefers-reduced-motion: reduce) { .inquiry-calendar__spinner { animation: none; } .inquiry-calendar__nav, .inquiry-calendar__day { transition-duration: 0.01ms; } } /* --- Inlined from _menu-cta-bar.css --- */ /* ========================================================================== Menu CTA Bar Sticky dual-CTA bar that sits below the header on menu pages. Frosted dark glass with gold accent — extends the hero's atmosphere. Buttons inside use the global .btn system with .btn--sm. The dark background classes here propagate to the button context overrides in _buttons.css. ========================================================================== */ .menu-cta-bar { position: sticky; top: 80px; z-index: var(--z-sticky); padding: var(--space-3) 0; background-color: rgba(30, 22, 16, 0.95); } /* Gold gradient rule at top edge */ .menu-cta-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--gradient-gold-shine); opacity: 0.6; } .menu-cta-bar__actions { display: flex; justify-content: center; align-items: center; gap: var(--space-6); } /* Dark-bar context: secondary button uses gold outline, not burgundy */ .menu-cta-bar .btn--secondary { color: var(--color-gold); border-color: var(--color-gold); background-color: transparent; } .menu-cta-bar .btn--secondary:hover, .menu-cta-bar .btn--secondary:focus-visible { background-color: var(--color-gold); border-color: var(--color-gold); color: var(--color-espresso); } @media (max-width: 479px) { .menu-cta-bar { padding: var(--space-2) 0; } .menu-cta-bar__actions { gap: var(--space-3); } } /* --- Inlined from _about.css --- */ /* ========================================================================== The Alexander — About Page Styles ========================================================================== */ /* -------------------------------------------------------------------------- Hero — bottom-aligned content, direction-9 style The hero template doesn't map "slim" to a class, so we target via page scope. Flex-end alignment pins content to bottom like the full hero. -------------------------------------------------------------------------- */ .page--about .hero { min-height: 45vh; align-items: flex-end; } @media (min-width: 768px) { .page--about .hero { min-height: 55vh; } } @media (min-width: 1280px) { .page--about .hero { min-height: 60vh; } } /* -------------------------------------------------------------------------- Split-Overlap — alternating image/text direction for visual rhythm Even-numbered split-overlaps flip the grid so image appears on the right and text overlaps from the left. -------------------------------------------------------------------------- */ .page--about .split-overlap:nth-of-type(even) { direction: rtl; } .page--about .split-overlap:nth-of-type(even) > * { direction: ltr; } @media (min-width: 900px) { .page--about .split-overlap:nth-of-type(even) .split-overlap__text { margin-left: 0; margin-right: -60px; } } /* -------------------------------------------------------------------------- Split-Overlap — ensure section-title wins over base h2 weight _components.css sets font-weight: var(--weight-normal) on .section-title. Reinforce here with page-level specificity so base h2 never overrides. -------------------------------------------------------------------------- */ .page--about .split-overlap .section-title { font-weight: var(--weight-normal); letter-spacing: var(--tracking-tighter); } /* -------------------------------------------------------------------------- Section Spacing — collapsed margins between adjacent sections -------------------------------------------------------------------------- */ .page--about .section + .section { margin-top: 0; } /* -------------------------------------------------------------------------- Swan Family Callout — extra breathing room, warm background -------------------------------------------------------------------------- */ .page--about #swan-family { padding-top: var(--space-16); padding-bottom: var(--space-16); background-color: var(--color-ivory-dark); } @media (min-width: 768px) { .page--about #swan-family { padding-top: var(--space-20); padding-bottom: var(--space-20); } } /* -------------------------------------------------------------------------- Evening Sections — dark-background text overrides Applied to the transition bridge onward, completing the atmosphere arc. -------------------------------------------------------------------------- */ .page--about .split-overlap.bg-espresso .split-overlap__text { background-color: var(--color-espresso); } .page--about .split-overlap.bg-deep-walnut .split-overlap__text { background-color: var(--color-deep-walnut); } /* -------------------------------------------------------------------------- Location Section — warm dark tint for the "Find Us" block -------------------------------------------------------------------------- */ .page--about #location.bg-espresso .two-col__content h2 { color: var(--color-ivory); } .page--about #location.bg-espresso .two-col__content .content { color: var(--color-text-on-dark-muted); } /* -------------------------------------------------------------------------- Gold rule divider before Swan Family section -------------------------------------------------------------------------- */ .page--about #swan-family::before { content: ''; display: block; width: 100px; height: 1px; background: var(--gradient-gold-shine); margin: 0 auto var(--space-16); opacity: 0.6; } /* -------------------------------------------------------------------------- Evening zone — links shift to gold -------------------------------------------------------------------------- */ .page--about #location a:not(.btn) { color: var(--color-gold-light); } /* -------------------------------------------------------------------------- Evening zone — eyebrow gold override -------------------------------------------------------------------------- */ .page--about #location .eyebrow { color: var(--color-gold); } /* --- Inlined from _contact.css --- */ /* ========================================================================== The Alexander — Contact Page Styles Direction-9 design language: refined cards, gold accents, atmosphere depth. ========================================================================== */ /* ========================================================================== ESSENTIALS — 3-column info-grid (Reach Us · Hours · Find Us) Editorial calling-card aesthetic: confident serif scale, generous breathing room, gold detail marks, no-nonsense typographic hierarchy. ========================================================================== */ /* Wider container so each card has enough room for confident type */ .page--contact #essentials .container { max-width: var(--container-2xl); } .page--contact #essentials .info-grid { gap: var(--space-6); } @media (min-width: 1024px) { .page--contact #essentials .info-grid { gap: var(--space-10); } } .page--contact #essentials .info-block { position: relative; display: flex; flex-direction: column; padding: var(--space-12) var(--space-8) var(--space-10); border-radius: var(--radius-lg); border: 1px solid var(--color-gold-faint); border-top: 2px solid var(--color-gold); background-color: var(--color-white); box-shadow: var(--shadow-soft); text-align: center; transition: box-shadow var(--transition-normal), transform var(--transition-normal); } @media (min-width: 1024px) { .page--contact #essentials .info-block { padding: var(--space-14) var(--space-10) var(--space-12); } } .page--contact #essentials .info-block:hover { box-shadow: var(--shadow-soft-lg); transform: translateY(-3px); } /* Card title — small uppercase eyebrow, gold detail mark beneath */ .page--contact #essentials .info-block__title { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-burgundy-muted); margin: 0 0 var(--space-8); position: relative; padding-bottom: var(--space-5); } .page--contact #essentials .info-block__title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--space-6); height: 1px; background: var(--color-gold); } .page--contact #essentials .info-block__note { font-size: var(--text-sm); color: var(--color-text-secondary); font-style: italic; margin-top: auto; padding-top: var(--space-8); line-height: var(--leading-relaxed); } /* Card list — vertical stack of structured rows */ .page--contact #essentials .info-block__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-6); color: var(--color-text-primary); } .page--contact #essentials .info-block__list li { margin: 0; } /* Default link treatment inside any contact-row */ .page--contact #essentials .contact-row a, .page--contact #essentials .contact-row__value { color: var(--color-text-primary); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .page--contact #essentials .contact-row a:hover, .page--contact #essentials .contact-row__value:hover { color: var(--color-burgundy); border-bottom-color: var(--color-gold); } /* PRIMARY ROW — the phone, hero of the Reach Us card */ .page--contact #essentials .contact-row--primary { display: block; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-normal); line-height: 1.1; letter-spacing: 0.01em; } /* STACK ROW — small uppercase label over a confident serif value */ .page--contact #essentials .contact-row--stack { display: flex; flex-direction: column; gap: var(--space-2); } .page--contact #essentials .contact-row__label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-burgundy-muted); } .page--contact #essentials .contact-row__value { font-family: var(--font-heading); font-size: var(--text-lg); line-height: var(--leading-snug); letter-spacing: 0.005em; overflow-wrap: anywhere; } /* SPLIT ROW — day-range left, time right (Hours) */ .page--contact #essentials .contact-row--split { display: grid; grid-template-columns: minmax(0, auto) 1fr; align-items: baseline; gap: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-gold-faint); text-align: left; } .page--contact #essentials .info-block__list li:last-child .contact-row--split { padding-bottom: 0; border-bottom: 0; } .page--contact #essentials .contact-row__day { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-normal); line-height: var(--leading-snug); color: var(--color-text-primary); letter-spacing: 0.01em; } .page--contact #essentials .contact-row__time { font-family: var(--font-heading); font-size: var(--text-lg); font-style: italic; line-height: var(--leading-snug); color: var(--color-text-secondary); white-space: nowrap; text-align: right; letter-spacing: 0.01em; } .page--contact #essentials .contact-row__time--muted { color: var(--color-burgundy-muted); } /* ADDRESS ROW — street + city, stacked, generous serif */ .page--contact #essentials .contact-row--address { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; } .page--contact #essentials .contact-row__street { font-family: var(--font-heading); font-size: var(--text-3xl); line-height: 1.1; color: var(--color-text-primary); } .page--contact #essentials .contact-row__city { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-burgundy-muted); } /* "Get Directions" button-style link */ .page--contact #essentials .info-block__link { display: inline-flex; align-items: center; align-self: center; gap: var(--space-2); margin-top: var(--space-5); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-burgundy); transition: color var(--transition-fast); } .page--contact #essentials .info-block__link:hover { color: var(--color-burgundy-deep); } /* ========================================================================== FIND US — Evening split-overlap Global split-overlap.bg-espresso rules handle the dark text panel. Only override here: warm hover-zoom on the entrance photo. ========================================================================== */ .page--contact #find-us .split-overlap__image img { transition: transform 1.6s var(--ease-luxe); } .page--contact #find-us:hover .split-overlap__image img { transform: scale(1.02); } /* --- Inlined from _faq.css --- */ /* ========================================================================== The Alexander — FAQ Page Styles Modern accordion + sticky scroll-tracked nav + atmosphere-aware sections. ========================================================================== */ /* ========================================================================== AT-A-GLANCE — Quick-answer card strip ========================================================================== */ .page--faq #at-a-glance .info-grid { gap: var(--space-6); } @media (min-width: 768px) { .page--faq #at-a-glance .info-grid { gap: var(--space-8); } } .page--faq #at-a-glance .info-block { padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--color-gold-faint); border-top: 2px solid var(--color-gold); background-color: var(--color-white); box-shadow: var(--shadow-soft); text-align: center; transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .page--faq #at-a-glance .info-block:hover { box-shadow: var(--shadow-soft-lg); transform: translateY(-3px); } .page--faq #at-a-glance .info-block__title { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-burgundy-muted); margin-bottom: var(--space-4); } .page--faq #at-a-glance .info-block__content { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-normal); color: var(--color-text-primary); line-height: var(--leading-snug); } .page--faq #at-a-glance .info-block__list { list-style: none; padding: 0; margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-text-primary); } .page--faq #at-a-glance .info-block__list li { margin-bottom: var(--space-2); } .page--faq #at-a-glance .info-block__list li:last-child { margin-bottom: 0; } .page--faq #at-a-glance .info-block__note { font-size: var(--text-sm); color: var(--color-text-secondary); font-style: italic; margin-top: var(--space-3); } /* ========================================================================== FAQ NAVIGATION — Sticky scroll-tracked category strip ========================================================================== */ .page--faq .faq-nav { position: sticky; top: 0; z-index: var(--z-sticky, 200); background-color: rgba(250, 247, 242, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--color-gold-faint); border-bottom: 1px solid var(--color-gold-faint); padding: var(--space-3) 0; margin-bottom: 0; } @media (max-width: 767px) { .page--faq .faq-nav { position: static; background-color: var(--color-ivory); backdrop-filter: none; -webkit-backdrop-filter: none; } } .page--faq .faq-nav__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: nowrap; gap: var(--space-2); justify-content: center; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .page--faq .faq-nav__list::-webkit-scrollbar { display: none; } @media (min-width: 768px) { .page--faq .faq-nav__list { flex-wrap: wrap; overflow-x: visible; gap: var(--space-3); } } .page--faq .faq-nav__link { display: inline-block; padding: var(--space-2) var(--space-4); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-secondary); border: 1px solid transparent; border-radius: var(--radius-pill, 999px); text-decoration: none; white-space: nowrap; transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); } .page--faq .faq-nav__link:hover { color: var(--color-burgundy); border-color: var(--color-gold-faint); } .page--faq .faq-nav__link.is-active { color: var(--color-burgundy); background-color: rgba(201, 169, 98, 0.12); border-color: var(--color-gold); } /* ========================================================================== FAQ SECTIONS — Editorial framing per category ========================================================================== */ .page--faq .faq-section { padding-top: var(--space-16); padding-bottom: var(--space-16); scroll-margin-top: 80px; /* offset for sticky nav when jump-linked */ } .page--faq .faq-section__header { max-width: 640px; margin: 0 auto var(--space-10); text-align: center; } .page--faq .faq-section__header .eyebrow { display: block; margin-bottom: var(--space-3); } .page--faq .faq-section__header .gold-rule--center { margin: 0 auto var(--space-4); } .page--faq .faq-section__header .section-header__headline { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-normal); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); } @media (min-width: 768px) { .page--faq .faq-section__header .section-header__headline { font-size: var(--text-4xl); } } .page--faq .faq-section__header .section-header__description { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); } /* ========================================================================== FAQ ACCORDION — Refined accordion with smooth indicator + animated reveal ========================================================================== */ .page--faq .faq-list { border-top: 1px solid var(--color-gold-faint); max-width: 760px; margin: 0 auto; } .page--faq .faq-item { border-bottom: 1px solid var(--color-gold-faint); } .page--faq .faq-item__question { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-1); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-normal); line-height: var(--leading-snug); color: var(--color-text-primary); cursor: pointer; list-style: none; transition: color var(--transition-fast); } @media (min-width: 768px) { .page--faq .faq-item__question { font-size: var(--text-xl); padding: var(--space-6) var(--space-2); } } .page--faq .faq-item__question::-webkit-details-marker { display: none; } /* Suppress the legacy text-based +/− pseudo-element from _sections.css — the FAQ page renders its own circular .faq-item__indicator span. */ .page--faq .faq-item__question::after, .page--faq .faq-item[open] .faq-item__question::after { content: none; } .page--faq .faq-item__question:hover { color: var(--color-burgundy); } .page--faq .faq-item__question-text { flex: 1; } /* Animated +/− indicator built from two perpendicular bars. The vertical bar collapses on open to morph the plus into a minus. */ .page--faq .faq-item__indicator { position: relative; flex: 0 0 auto; width: 22px; height: 22px; border: 1px solid var(--color-gold); border-radius: 50%; transition: background-color var(--transition-fast), border-color var(--transition-fast); } .page--faq .faq-item__indicator::before, .page--faq .faq-item__indicator::after { content: ""; position: absolute; top: 50%; left: 50%; background-color: var(--color-gold); transition: transform 280ms var(--ease-luxe), opacity 200ms ease; } .page--faq .faq-item__indicator::before { width: 10px; height: 1.5px; transform: translate(-50%, -50%); } .page--faq .faq-item__indicator::after { width: 1.5px; height: 10px; transform: translate(-50%, -50%); } .page--faq .faq-item[open] .faq-item__indicator { background-color: var(--color-gold); } .page--faq .faq-item[open] .faq-item__indicator::before { background-color: var(--color-ivory); } .page--faq .faq-item[open] .faq-item__indicator::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; } /* Smooth answer reveal — uses CSS grid trick (rows 0fr → 1fr). */ .page--faq .faq-item__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-luxe), opacity 240ms ease; opacity: 0; overflow: hidden; } .page--faq .faq-item[open] .faq-item__answer { grid-template-rows: 1fr; opacity: 1; } .page--faq .faq-item__answer-inner { overflow: hidden; min-height: 0; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); } .page--faq .faq-item[open] .faq-item__answer-inner { padding: 0 var(--space-1) var(--space-6); } .page--faq .faq-item__answer-inner a { color: var(--color-burgundy); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition-fast); } .page--faq .faq-item__answer-inner a:hover { color: var(--color-burgundy-deep); } @media (prefers-reduced-motion: reduce) { .page--faq .faq-item__answer, .page--faq .faq-item__indicator, .page--faq .faq-item__indicator::before, .page--faq .faq-item__indicator::after { transition: none; } } /* ========================================================================== EVENING SECTION OVERRIDES — Dark "Getting Here" block on espresso ========================================================================== */ .page--faq .faq-section.bg-espresso .faq-section__header .eyebrow { color: var(--color-gold); } .page--faq .faq-section.bg-espresso .faq-section__header .section-header__headline { color: var(--color-ivory); } .page--faq .faq-section.bg-espresso .faq-section__header .section-header__description, .page--faq .faq-section.bg-espresso .faq-item__answer-inner { color: var(--color-text-on-dark-muted); } .page--faq .faq-section.bg-espresso .faq-list, .page--faq .faq-section.bg-espresso .faq-item { border-color: rgba(201, 169, 98, 0.25); } .page--faq .faq-section.bg-espresso .faq-item__question { color: var(--color-ivory); } .page--faq .faq-section.bg-espresso .faq-item__question:hover { color: var(--color-gold); } /* --- Inlined from _enhanced-cards.css --- */ /* ========================================================================= ENHANCED CARDS Flexible card grid with gold accents, capacity badges, hover animations. Replaces features-grid and card-grid for sections needing visual hierarchy. ========================================================================= */ /* --- Grid --- */ .enhanced-cards__grid { display: grid; gap: var(--space-6); } .enhanced-cards__grid--2 { grid-template-columns: repeat(1, 1fr); } .enhanced-cards__grid--3 { grid-template-columns: repeat(1, 1fr); } .enhanced-cards__grid--4 { grid-template-columns: repeat(1, 1fr); } .enhanced-cards__grid--6 { grid-template-columns: repeat(1, 1fr); } @media (min-width: 640px) { .enhanced-cards__grid--2, .enhanced-cards__grid--3, .enhanced-cards__grid--4, .enhanced-cards__grid--6 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .enhanced-cards__grid--3, .enhanced-cards__grid--6 { grid-template-columns: repeat(3, 1fr); } .enhanced-cards__grid--4 { grid-template-columns: repeat(4, 1fr); } } /* --- Card Base --- */ .enhanced-card { position: relative; background-color: var(--color-white); border-radius: var(--radius-md); border-top: 2px solid transparent; box-shadow: var(--shadow-soft); transition: box-shadow 400ms var(--ease-luxe), transform 400ms var(--ease-luxe), border-color 600ms var(--ease-luxe); overflow: hidden; text-decoration: none; color: inherit; display: block; } .enhanced-card:hover { box-shadow: var(--shadow-soft-lg); transform: translateY(-3px); border-color: var(--color-gold); } .enhanced-card:focus-within { box-shadow: var(--shadow-gold-glow); } /* --- Card with Image --- */ .enhanced-card__image { position: relative; aspect-ratio: 3 / 4; overflow: hidden; } @media (min-width: 768px) { .enhanced-card__image { aspect-ratio: 4 / 5; } } .enhanced-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-luxe); } .enhanced-card:hover .enhanced-card__image img { transform: scale(1.04); } /* --- Image Overlay (title on image with gradient scrim) --- */ .enhanced-card__image-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-6) var(--space-5) var(--space-5); background: linear-gradient( to top, rgba(30, 22, 16, 0.75) 0%, rgba(30, 22, 16, 0.45) 50%, transparent 100% ); } .enhanced-card__image-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); color: var(--color-ivory); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); margin: 0; } /* --- Card Body --- */ .enhanced-card__body { padding: var(--space-5) var(--space-6) var(--space-6); position: relative; } /* --- Badge (gold pill) --- */ .enhanced-card__badge { display: inline-block; padding: 4px var(--space-3); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); color: var(--color-gold-dark); background-color: var(--color-gold-pale); border: 1px solid var(--color-gold); border-radius: var(--radius-full); margin-bottom: var(--space-3); } /* --- Per-Card Eyebrow (cuisine / package category label) --- */ .enhanced-card__eyebrow { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-gold-dark); /* gold-dark on ivory is WCAG AA; overridden to gold on dark bgs below */ margin-bottom: var(--space-2); } /* --- Title --- */ .enhanced-card__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-medium); line-height: var(--leading-snug); margin-bottom: var(--space-2); } /* --- Text --- */ .enhanced-card__text { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); } /* --- Per-Card Note (de-emphasized footnote at card bottom) --- */ .enhanced-card__note { font-size: var(--text-xs); font-style: italic; color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-top: var(--space-3); margin-bottom: 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); } /* --- CTA --- */ .enhanced-card__cta { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-burgundy); } /* --- Outline Variant (no image, dashed border) --- */ .enhanced-card--outline { border: 2px dashed var(--color-border); border-top: 2px dashed var(--color-border); display: flex; flex-direction: column; justify-content: center; text-align: center; box-shadow: none; } .enhanced-card--outline:hover { border-color: var(--color-gold); border-style: solid; box-shadow: var(--shadow-soft); transform: translateY(-3px); } /* --- Cuisine Variant --- */ .enhanced-cards--cuisine .section-header { margin-bottom: var(--space-8); } .enhanced-cards__cuisine-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-8); } .enhanced-cards__cuisine-card { display: flex; flex-direction: column; align-items: center; padding: var(--space-4) var(--space-6); background-color: var(--color-ivory-warm); border: 1px solid var(--color-gold-pale); border-radius: var(--radius-md); transition: border-color 400ms var(--ease-luxe); min-width: 140px; } .enhanced-cards__cuisine-card:hover { border-color: var(--color-gold); } .enhanced-cards__cuisine-name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: var(--leading-snug); margin-bottom: var(--space-1); } .enhanced-cards__cuisine-type { font-size: var(--text-sm); color: var(--color-gold); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .enhanced-cards__cuisine-footer { text-align: center; max-width: 700px; margin: 0 auto; font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } .enhanced-cards__cuisine-footer p + p { margin-top: var(--space-4); } /* --- Dark background overrides --- */ .bg-deep-walnut .enhanced-card, .bg-espresso .enhanced-card, .bg-walnut .enhanced-card { background-color: var(--color-white); } .bg-deep-walnut .enhanced-card__title, .bg-espresso .enhanced-card__title, .bg-walnut .enhanced-card__title { color: var(--color-text-primary); } .bg-deep-walnut .enhanced-card__text, .bg-espresso .enhanced-card__text, .bg-walnut .enhanced-card__text { color: var(--color-text-secondary); } /* Eyebrow: full gold is fine on white card surface even inside dark sections */ .bg-deep-walnut .enhanced-card__eyebrow, .bg-espresso .enhanced-card__eyebrow, .bg-walnut .enhanced-card__eyebrow { color: var(--color-gold-dark); } /* Note: keep muted on white card surface */ .bg-deep-walnut .enhanced-card__note, .bg-espresso .enhanced-card__note, .bg-walnut .enhanced-card__note { color: var(--color-text-muted); border-top-color: var(--color-border-subtle); } @media (prefers-reduced-motion: reduce) { .enhanced-card { transition: none; } .enhanced-card:hover { transform: none; } .enhanced-card__image img { transition: none; } .enhanced-card:hover .enhanced-card__image img { transform: none; } .enhanced-card--outline:hover { transform: none; } .enhanced-cards__cuisine-card { transition: none; } } /* --- Inlined from _restaurant-spotlight.css --- */ /* ========================================================================== RESTAURANT SPOTLIGHT Seven-card grid showcasing the Swan Family kitchens. Used on the catering-menus page in the daylight arc; evening-mode overrides included for future placement on dark-background sections. Template: templates/partials/sections/restaurant-spotlight.html Card anatomy: mascot SVG + name + cuisine eyebrow + tagline + signatures ========================================================================== */ /* -------------------------------------------------------------------------- Section — outer container The section itself is a standard .section with .bg-* background. Padding is handled by the cinematic daylight/evening spacing rules in _events.css. Nothing extra needed here. -------------------------------------------------------------------------- */ .restaurant-spotlight { /* No extra padding — cinematic atmosphere rules govern vertical rhythm. */ } /* -------------------------------------------------------------------------- Section Header Re-uses .section-header--center from _events.css. The eyebrow inherits .eyebrow color from _sections.css / _events.css. -------------------------------------------------------------------------- */ .restaurant-spotlight__header { /* Centred layout is already provided by .section-header--center. */ } .restaurant-spotlight__headline { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-normal); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); } .restaurant-spotlight__body { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); max-width: 60ch; margin: var(--space-4) auto 0; } .restaurant-spotlight__intro { font-family: var(--font-heading); font-size: var(--text-lg); font-style: italic; color: var(--color-gold); text-align: center; max-width: 55ch; margin: var(--space-3) auto 0; } /* -------------------------------------------------------------------------- Grid — responsive 1 → 2 → 3 columns At 7 items the desktop layout is 3-3-1. The last card is left-aligned naturally; center is also fine — we use justify-items: start on the grid so the last row left-aligns. -------------------------------------------------------------------------- */ .restaurant-spotlight__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); justify-items: stretch; } @media (min-width: 640px) { .restaurant-spotlight__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .restaurant-spotlight__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } } /* -------------------------------------------------------------------------- Card — base Warm ivory background, thin gold hairline border, centered content. No translateY on hover — per design spec ("don't move the card"). -------------------------------------------------------------------------- */ .restaurant-spotlight__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-8); background-color: var(--color-ivory-warm); border: 1px solid var(--color-gold-faint); border-radius: var(--radius-lg); transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); } .restaurant-spotlight__card:hover, .restaurant-spotlight__card:focus-within { background-color: var(--color-ivory-highlight); border-color: var(--color-gold-muted); box-shadow: var(--shadow-soft); } /* Keyboard focus outline on the card link (falls through to the inside) */ .restaurant-spotlight__card:focus-within { outline: none; /* the link itself gets :focus-visible treatment below */ } /* -------------------------------------------------------------------------- Mascot The SVGs already contain their own gold-bordered circle motif, so we do NOT double-ring. We simply constrain the size and add generous breathing room below. A cream backdrop is achieved by the card's ivory-warm background — the SVG floats on it naturally. On dark (evening) sections, a cream wrapper is added via the evening override further down. -------------------------------------------------------------------------- */ .restaurant-spotlight__mascot { width: 96px; height: 96px; margin-bottom: var(--space-5); flex-shrink: 0; /* Unified cream disc behind every mascot — normalizes source images that originated from different file types (some transparent, some with bleed). Padding pulls the artwork in slightly so the disc reads as the visual container, not the artwork's bounding box. */ background-color: var(--color-ivory-highlight); border: 1px solid var(--color-gold-faint); border-radius: var(--radius-full); padding: var(--space-2); box-sizing: content-box; display: flex; align-items: center; justify-content: center; transition: background-color var(--transition-normal), border-color var(--transition-normal); } .restaurant-spotlight__card:hover .restaurant-spotlight__mascot, .restaurant-spotlight__card:focus-within .restaurant-spotlight__mascot { background-color: var(--color-ivory); border-color: var(--color-gold-muted); } @media (min-width: 1024px) { .restaurant-spotlight__mascot { width: 120px; height: 120px; } } .restaurant-spotlight__mascot img { width: 100%; height: 100%; object-fit: contain; display: block; } /* -------------------------------------------------------------------------- Restaurant Name Cormorant Garamond, italic, generous size. -------------------------------------------------------------------------- */ .restaurant-spotlight__name { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-normal); font-style: italic; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); margin-bottom: var(--space-2); } /* Gold underline animates in on hover — scoped to the card hover state */ .restaurant-spotlight__card:hover .restaurant-spotlight__name, .restaurant-spotlight__card:focus-within .restaurant-spotlight__name { text-decoration: underline; text-decoration-color: var(--color-gold); text-decoration-thickness: 1px; /* hairline — documents a raw value: no token exists for text-decoration-thickness */ text-underline-offset: 4px; } /* -------------------------------------------------------------------------- Cuisine Eyebrow Small uppercase DM Sans, gold, letter-spaced. Shares the site-wide "eyebrow" look but scoped to this component so it doesn't bleed into the section header eyebrow on light bg. On ivory backgrounds, gold (#C9A962) against ivory (#FAF7F2) is borderline on contrast — we use --color-gold-dark for better WCAG ratio. -------------------------------------------------------------------------- */ .restaurant-spotlight__cuisine { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-gold-dark); /* --color-gold-dark on ivory is WCAG AA compliant */ margin-bottom: var(--space-3); } /* -------------------------------------------------------------------------- Tagline One sentence, centered, muted secondary text. -------------------------------------------------------------------------- */ .restaurant-spotlight__tagline { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); max-width: 30ch; } /* -------------------------------------------------------------------------- Signatures List Tight list of 2–3 signature dishes, each prefixed with a gold em-dash. -------------------------------------------------------------------------- */ .restaurant-spotlight__signatures { list-style: none; padding: 0; margin: 0 0 var(--space-5); text-align: left; width: 100%; } .restaurant-spotlight__signatures li { position: relative; padding-left: var(--space-5); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-2); } .restaurant-spotlight__signatures li:last-child { margin-bottom: 0; } /* Gold em-dash prefix */ .restaurant-spotlight__signatures li::before { content: '\2014'; /* em-dash */ position: absolute; left: 0; top: 0; color: var(--color-gold); font-size: var(--text-xs); line-height: var(--leading-relaxed); } /* -------------------------------------------------------------------------- External Link Gold text, underline on hover, proper external-link treatment. -------------------------------------------------------------------------- */ .restaurant-spotlight__link { display: inline-block; margin-top: auto; /* pushes link to bottom when cards have unequal content */ padding-top: var(--space-3); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); color: var(--color-gold-dark); text-decoration: none; /* P1-2: persistent underline at rest (reduced opacity) — signals this is a link */ border-bottom: 1px solid color-mix(in srgb, var(--color-gold-dark) 45%, transparent); transition: color var(--transition-fast), border-bottom-color var(--transition-fast); } .restaurant-spotlight__link:hover, .restaurant-spotlight__link:focus-visible { color: var(--color-gold); border-bottom-color: var(--color-gold); } /* Explicit :focus-visible gold outline for keyboard navigation */ .restaurant-spotlight__link:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: var(--radius-sm); } /* -------------------------------------------------------------------------- Closing Note Centered italic line beneath the grid. -------------------------------------------------------------------------- */ .restaurant-spotlight__closing-note { text-align: center; margin-top: var(--space-10); font-family: var(--font-heading); font-size: var(--text-lg); font-style: italic; color: var(--color-text-muted); max-width: 55ch; margin-left: auto; margin-right: auto; } /* ========================================================================== EVENING MODE OVERRIDES Applied when the section sits inside a dark-background context: .bg-espresso, .bg-walnut, .bg-deep-walnut, or data-atmosphere="evening" parent. Cards get a semi-transparent frosted treatment; text goes ivory; the mascot SVG gets an ivory-warm disc backdrop so the cream-ground SVG doesn't disappear against the dark section background. ========================================================================== */ .bg-espresso .restaurant-spotlight__headline, .bg-deep-walnut .restaurant-spotlight__headline, .bg-walnut .restaurant-spotlight__headline { color: var(--color-ivory); } .bg-espresso .restaurant-spotlight__body, .bg-deep-walnut .restaurant-spotlight__body, .bg-walnut .restaurant-spotlight__body { color: var(--color-text-on-dark-muted); } /* Card — dark frosted glass on dark section */ .bg-espresso .restaurant-spotlight__card, .bg-deep-walnut .restaurant-spotlight__card, .bg-walnut .restaurant-spotlight__card { background-color: rgba(250, 247, 242, 0.04); border-color: rgba(201, 169, 98, 0.2); } .bg-espresso .restaurant-spotlight__card:hover, .bg-espresso .restaurant-spotlight__card:focus-within, .bg-deep-walnut .restaurant-spotlight__card:hover, .bg-deep-walnut .restaurant-spotlight__card:focus-within, .bg-walnut .restaurant-spotlight__card:hover, .bg-walnut .restaurant-spotlight__card:focus-within { background-color: rgba(250, 247, 242, 0.07); border-color: var(--color-gold-muted); } /* Mascot — disc already exists in base; evening just shifts the tint so the cream reads against dark sections without competing with the gold accents on the card. */ .bg-espresso .restaurant-spotlight__mascot, .bg-deep-walnut .restaurant-spotlight__mascot, .bg-walnut .restaurant-spotlight__mascot { background-color: var(--color-ivory-warm); border-color: rgba(201, 169, 98, 0.25); } /* Restaurant name — ivory on dark */ .bg-espresso .restaurant-spotlight__name, .bg-deep-walnut .restaurant-spotlight__name, .bg-walnut .restaurant-spotlight__name { color: var(--color-ivory); } /* Cuisine eyebrow — full gold is fine on dark backgrounds */ .bg-espresso .restaurant-spotlight__cuisine, .bg-deep-walnut .restaurant-spotlight__cuisine, .bg-walnut .restaurant-spotlight__cuisine { color: var(--color-gold); } /* Tagline — muted ivory */ .bg-espresso .restaurant-spotlight__tagline, .bg-deep-walnut .restaurant-spotlight__tagline, .bg-walnut .restaurant-spotlight__tagline { color: var(--color-text-on-dark-muted); } /* Signatures — muted ivory text, gold em-dash (already gold, stays) */ .bg-espresso .restaurant-spotlight__signatures li, .bg-deep-walnut .restaurant-spotlight__signatures li, .bg-walnut .restaurant-spotlight__signatures li { color: var(--color-text-on-dark-muted); } /* Link — lighter gold for legibility on dark; matching muted underline at rest */ .bg-espresso .restaurant-spotlight__link, .bg-deep-walnut .restaurant-spotlight__link, .bg-walnut .restaurant-spotlight__link { color: var(--color-gold-light); border-bottom-color: color-mix(in srgb, var(--color-gold-light) 45%, transparent); } .bg-espresso .restaurant-spotlight__link:hover, .bg-espresso .restaurant-spotlight__link:focus-visible, .bg-deep-walnut .restaurant-spotlight__link:hover, .bg-deep-walnut .restaurant-spotlight__link:focus-visible, .bg-walnut .restaurant-spotlight__link:hover, .bg-walnut .restaurant-spotlight__link:focus-visible { color: var(--color-gold); border-bottom-color: var(--color-gold); } /* Closing note — muted ivory on dark */ .bg-espresso .restaurant-spotlight__closing-note, .bg-deep-walnut .restaurant-spotlight__closing-note, .bg-walnut .restaurant-spotlight__closing-note { color: var(--color-text-on-dark-muted); } /* ========================================================================== FEATURED CARD VARIANT The Alexander gets a hero treatment at the top of the grid — a horizontal layout (mascot left, content right) spanning all columns. At desktop (3-col grid), it claims grid-column: 1 / -1 and shifts to a side-by-side layout. At tablet/mobile it falls back to the same centered card the siblings use. ========================================================================== */ .restaurant-spotlight__card--featured { /* Default (mobile/tablet): same as base card, just allow more body copy */ text-align: center; } .restaurant-spotlight__featured-body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); margin: 0 auto var(--space-4); max-width: 60ch; } @media (min-width: 1024px) { .restaurant-spotlight__card--featured { grid-column: 1 / -1; flex-direction: row; align-items: center; text-align: left; gap: var(--space-8); padding: var(--space-10); } /* Mascot column — fixed width so it doesn't compete with the body copy */ .restaurant-spotlight__card--featured .restaurant-spotlight__mascot { width: 160px; height: 160px; margin-bottom: 0; } /* Content column — text aligned left, link sits at the bottom */ .restaurant-spotlight__card--featured .restaurant-spotlight__featured-content { flex: 1; display: flex; flex-direction: column; align-items: flex-start; } .restaurant-spotlight__card--featured .restaurant-spotlight__cuisine, .restaurant-spotlight__card--featured .restaurant-spotlight__name { text-align: left; } .restaurant-spotlight__card--featured .restaurant-spotlight__name { font-size: var(--text-3xl); margin-bottom: var(--space-3); } .restaurant-spotlight__card--featured .restaurant-spotlight__tagline { font-family: var(--font-heading); font-style: italic; font-size: var(--text-xl); color: var(--color-text-primary); line-height: var(--leading-snug); text-align: left; max-width: none; margin-bottom: var(--space-4); } .restaurant-spotlight__card--featured .restaurant-spotlight__featured-body { text-align: left; margin: 0 0 var(--space-5); max-width: 65ch; } /* Signatures — keep left-aligned, but allow 2 columns at this width */ .restaurant-spotlight__card--featured .restaurant-spotlight__signatures { columns: 2; column-gap: var(--space-8); margin-bottom: 0; } .restaurant-spotlight__card--featured .restaurant-spotlight__signatures li { break-inside: avoid; } } /* Featured card — surface lift to mark it as the hero entry */ .restaurant-spotlight__card--featured { background-color: var(--color-ivory-highlight); border-color: var(--color-gold-muted); box-shadow: var(--shadow-soft); } /* Evening overrides for the featured card — keep tagline + body legible against the dark frosted glass treatment that base evening sets. */ .bg-espresso .restaurant-spotlight__card--featured .restaurant-spotlight__tagline, .bg-deep-walnut .restaurant-spotlight__card--featured .restaurant-spotlight__tagline, .bg-walnut .restaurant-spotlight__card--featured .restaurant-spotlight__tagline { color: var(--color-ivory); } .bg-espresso .restaurant-spotlight__card--featured .restaurant-spotlight__featured-body, .bg-deep-walnut .restaurant-spotlight__card--featured .restaurant-spotlight__featured-body, .bg-walnut .restaurant-spotlight__card--featured .restaurant-spotlight__featured-body { color: var(--color-text-on-dark-muted); } /* --- Inlined from _space-profile.css --- */ /* ========================================================================= SPACE PROFILE Cinematic room showcase with capacity stats, feature tags, gold-dash lists. Replaces space-detail for venue-details room specs. ========================================================================= */ /* --- Image --- */ .space-profile__image { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-md); margin-bottom: var(--space-8); } .space-profile__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s var(--ease-luxe); } .space-profile__image:hover img { transform: scale(1.03); } /* --- Name + Description --- */ .space-profile__name { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); margin-bottom: var(--space-4); } .space-profile__description { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: var(--leading-relaxed); max-width: 700px; margin-bottom: var(--space-8); } /* --- Capacity Stat Grid --- */ .space-profile__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-bottom: var(--space-8); padding: var(--space-6) 0; border-top: 1px solid var(--color-gold-pale); border-bottom: 1px solid var(--color-gold-pale); } .space-profile__stat { text-align: center; } .space-profile__stat--dimmed { opacity: 0.4; } .space-profile__stat-number { display: block; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 400; color: var(--color-burgundy); line-height: 1; } .space-profile__stat-label { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); margin-top: var(--space-2); } @media (min-width: 640px) { .space-profile__stats { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .space-profile__stats { max-width: 700px; } } /* --- Feature Tag Pills --- */ .space-profile__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); } .space-profile__tag { display: inline-block; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-burgundy); border: 1px solid rgba(114, 47, 55, 0.12); border-radius: var(--radius-full); background-color: rgba(114, 47, 55, 0.04); } /* --- Ideal For (Gold Dash List) --- */ .space-profile__ideal { margin-bottom: var(--space-8); } .space-profile__ideal-label { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-4); } .space-profile__ideal-list { list-style: none; padding: 0; margin: 0; columns: 1; column-gap: var(--space-8); } .space-profile__ideal-item { position: relative; padding-left: var(--space-6); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-bottom: var(--space-2); break-inside: avoid; } .space-profile__ideal-item::before { content: "\2014"; position: absolute; left: 0; color: var(--color-gold); font-weight: var(--weight-medium); } @media (min-width: 768px) { .space-profile__ideal-list { columns: 2; } } /* --- Floor Plan Link --- */ .space-profile__floorplan { margin-bottom: 0; } /* --- Room Separator (use gold-rule between rooms) --- */ .space-profile + .gold-rule { margin-top: var(--space-16); margin-bottom: var(--space-16); } .space-profile + .gold-rule--center { margin-top: var(--space-16); margin-bottom: var(--space-16); } /* --- Inlined from _data-panel.css --- */ /* ========================================================================= DATA PANEL Structured data: crosshair info grid (info mode) or comparison cards (comparison mode). Replaces info-grid and capacity-table. ========================================================================= */ /* --- Info Mode: Crosshair Grid --- */ .data-panel__grid { display: grid; grid-template-columns: 1fr; gap: 0; } .data-panel__quadrant { padding: var(--space-6); border-bottom: 1px solid var(--color-gold-pale); } .data-panel__quadrant:last-child { border-bottom: none; } @media (min-width: 768px) { .data-panel__grid { grid-template-columns: 1fr 1fr; } .data-panel__quadrant { border-bottom: none; } /* Top row: border-bottom */ .data-panel__quadrant:nth-child(-n+2) { border-bottom: 1px solid var(--color-gold-pale); } /* Left column: border-right */ .data-panel__quadrant:nth-child(odd) { border-right: 1px solid var(--color-gold-pale); } } /* --- Eyebrow Label --- */ .data-panel__eyebrow { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-4); } /* --- Content --- */ .data-panel__content { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); } /* --- List with Gold Dash Markers --- */ .data-panel__list { list-style: none; padding: 0; margin: 0 0 var(--space-3) 0; } .data-panel__list-item { position: relative; padding-left: var(--space-6); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-bottom: var(--space-1); } .data-panel__list-item::before { content: "\2014"; position: absolute; left: 0; color: var(--color-gold); font-weight: var(--weight-medium); } /* --- Note --- */ .data-panel__note { font-size: var(--text-sm); font-style: italic; color: var(--color-text-secondary); margin-top: var(--space-3); margin-bottom: var(--space-3); } /* --- Comparison Mode: Cards --- */ .data-panel__cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (min-width: 768px) { .data-panel__cards { grid-template-columns: repeat(4, 1fr); } } .data-panel__card { padding: var(--space-5); text-align: center; border: 1px solid var(--color-gold-pale); border-radius: var(--radius-md); background-color: var(--color-white); } .data-panel__card--featured { border: 2px solid var(--color-gold); background-color: var(--color-ivory-warm); } .data-panel__card-name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-medium); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-gold-pale); } .data-panel__card--featured .data-panel__card-name { color: var(--color-burgundy); } .data-panel__card-stats { display: flex; flex-direction: column; gap: var(--space-4); } .data-panel__card-stat { display: flex; flex-direction: column; align-items: center; } .data-panel__card-stat--dimmed { opacity: 0.3; } .data-panel__card-stat-label { font-family: var(--font-body); font-size: 0.65rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-1); } .data-panel__card-stat-value { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 400; color: var(--color-burgundy); line-height: 1; } /* --- Footnotes --- */ .data-panel__notes { margin-top: var(--space-6); padding: var(--space-4); background-color: var(--color-ivory-dark); border-radius: var(--radius-md); } .data-panel__notes ul { font-size: var(--text-sm); color: var(--color-text-secondary); padding-left: var(--space-4); list-style: disc; margin: 0; } /* --- Dark background overrides --- */ [data-atmosphere="evening"] .data-panel__quadrant, .bg-deep-walnut .data-panel__quadrant, .bg-espresso .data-panel__quadrant, .bg-walnut .data-panel__quadrant { border-color: rgba(201, 169, 98, 0.25); } [data-atmosphere="evening"] .data-panel__list-item, .bg-deep-walnut .data-panel__list-item, .bg-espresso .data-panel__list-item, .bg-walnut .data-panel__list-item { color: var(--color-text-on-dark); } /* --- Inlined from _rooms-ribbon.css --- */ /* ========================================================================= ROOMS RIBBON Intro stripe for the venue-details page. 3-up portrait cards that anchor to the room switcher below, plus a hairlined venue-total stat row. ========================================================================= */ .rooms-ribbon__header { text-align: center; max-width: 760px; margin: 0 auto var(--space-12); } .rooms-ribbon__headline { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); } .rooms-ribbon__intro { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } .rooms-ribbon__intro p { margin-bottom: 0; } /* --- Cards --- */ .rooms-ribbon__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-12); } @media (min-width: 768px) { .rooms-ribbon__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } } .rooms-ribbon__card { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-3); background-color: var(--color-white); border: 1px solid var(--color-gold-faint); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } @media (min-width: 768px) { .rooms-ribbon__card { grid-template-columns: 1fr; grid-auto-rows: auto; padding: 0; background-color: transparent; border: 0; } } .rooms-ribbon__card:hover, .rooms-ribbon__card:focus-visible { border-color: var(--color-gold-muted); transform: translateY(-2px); box-shadow: var(--shadow-soft); color: inherit; } .rooms-ribbon__card:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; } /* Image wrap */ .rooms-ribbon__image-wrap { display: block; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 1 / 1; } @media (min-width: 768px) { .rooms-ribbon__image-wrap { aspect-ratio: 4 / 5; margin-bottom: var(--space-4); } } .rooms-ribbon__image, .rooms-ribbon__image img { width: 100%; height: 100%; display: block; } .rooms-ribbon__image img { object-fit: cover; transition: transform 1200ms var(--ease-luxe); } .rooms-ribbon__card:hover .rooms-ribbon__image img { transform: scale(1.04); } /* Body */ .rooms-ribbon__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .rooms-ribbon__name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); color: var(--color-text-primary); } @media (min-width: 768px) { .rooms-ribbon__name { font-size: var(--text-2xl); } } .rooms-ribbon__floor { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-burgundy); order: -1; } .rooms-ribbon__line { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); } /* Chevron — visible on mobile, hidden on desktop where the whole card is the cue */ .rooms-ribbon__chevron { font-size: var(--text-lg); color: var(--color-gold); transition: transform var(--transition-fast); } @media (min-width: 768px) { .rooms-ribbon__chevron { display: none; } } .rooms-ribbon__card:hover .rooms-ribbon__chevron { transform: translateX(4px); } /* --- Totals row --- */ .rooms-ribbon__totals { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: center; padding: var(--space-6) var(--space-5); border-top: 1px solid var(--color-gold-pale); border-bottom: 1px solid var(--color-gold-pale); text-align: center; } @media (min-width: 768px) { .rooms-ribbon__totals { grid-template-columns: 1fr auto 1fr auto 2fr; gap: var(--space-8); text-align: left; padding: var(--space-6) var(--space-8); } } .rooms-ribbon__total { display: flex; flex-direction: column; gap: var(--space-1); } .rooms-ribbon__total-number { font-family: var(--font-heading); font-size: var(--text-5xl); font-weight: var(--weight-normal); line-height: 1; color: var(--color-burgundy); letter-spacing: var(--tracking-tight); } .rooms-ribbon__total-label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); } .rooms-ribbon__total-divider { display: none; width: 1px; height: 56px; background-color: var(--color-gold-pale); } @media (min-width: 768px) { .rooms-ribbon__total-divider { display: block; } } .rooms-ribbon__total-note { font-size: var(--text-sm); color: var(--color-text-secondary); font-style: italic; margin: 0; } /* --- Inlined from _room-switcher.css --- */ /* ========================================================================= ROOM SWITCHER Cinematic per-room showcase. JS-off: panels stack. JS-on: tablist appears at the top, only one panel is visible at a time. Tokens used: burgundy, gold, ivory-warm, gold-faint, ease-luxe. ========================================================================= */ .room-switcher__header { text-align: center; max-width: 720px; margin: 0 auto var(--space-12); } .room-switcher__eyebrow { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-burgundy); margin-bottom: var(--space-3); } .room-switcher__headline { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); } .room-switcher__intro { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } /* --- Tablist (JS-injected; hidden by default) --- */ .room-switcher__tabs { display: none; } .room-switcher.is-enhanced .room-switcher__tabs { display: flex; gap: var(--space-1); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-12); padding: var(--space-1); border: 1px solid var(--color-gold-faint); border-radius: var(--radius-full); background-color: var(--color-white); box-shadow: var(--shadow-soft); width: fit-content; margin-left: auto; margin-right: auto; } @media (max-width: 767px) { .room-switcher.is-enhanced .room-switcher__tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); justify-content: flex-start; padding: var(--space-1) var(--space-2); } } .room-switcher__tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); color: var(--color-text-secondary); background-color: transparent; border: 0; border-radius: var(--radius-full); cursor: pointer; transition: color var(--transition-fast), background-color var(--transition-fast); white-space: nowrap; scroll-snap-align: start; } .room-switcher__tab:hover { color: var(--color-burgundy); } .room-switcher__tab[aria-selected="true"] { background-color: var(--color-burgundy); color: var(--color-ivory); } .room-switcher__tab:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; } /* --- Panels --- */ .room-switcher__panels { display: flex; flex-direction: column; gap: var(--space-20); } .room-switcher.is-enhanced .room-switcher__panels { display: block; position: relative; gap: 0; } .room-panel { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; scroll-margin-top: 80px; } /* Invisible alias anchors — preserves legacy hardcoded hash URLs. Absolutely positioned so they don't participate in the grid layout (otherwise they'd push the media/body into the wrong rows/columns). */ .room-panel__anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; overflow: hidden; scroll-margin-top: 80px; } @media (min-width: 1024px) { .room-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-12); } } .room-switcher.is-enhanced .room-panel[hidden] { display: none; } /* JS-on: smooth opacity entrance for the active panel. */ .room-switcher.is-enhanced .room-panel:not([hidden]) { animation: roomPanelFadeIn 320ms var(--ease-luxe) both; } @keyframes roomPanelFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .room-switcher.is-enhanced .room-panel:not([hidden]) { animation: none; } } /* --- Panel media --- */ .room-panel__media { overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4 / 3; background-color: var(--color-ivory-deep); } @media (min-width: 1024px) { .room-panel__media { aspect-ratio: 5 / 4; } } .room-panel__picture, .room-panel__picture img { width: 100%; height: 100%; display: block; } .room-panel__picture img { object-fit: cover; transition: transform 8s var(--ease-luxe); } .room-panel:hover .room-panel__picture img { transform: scale(1.03); } /* --- Panel body --- */ .room-panel__body { display: flex; flex-direction: column; gap: var(--space-5); } .room-panel__floor { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-burgundy); margin-bottom: calc(var(--space-2) * -1); } .room-panel__name { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0; } .room-panel__description { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin: 0; max-width: 60ch; } /* --- Stats --- */ .room-panel__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: var(--space-5) 0; border-top: 1px solid var(--color-gold-pale); border-bottom: 1px solid var(--color-gold-pale); } .room-panel__stat { display: flex; flex-direction: column; gap: var(--space-1); } .room-panel__stat-label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); order: 2; } .room-panel__stat-value { margin: 0; order: 1; } .room-panel__stat-number { display: inline-block; font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-normal); line-height: 1; color: var(--color-burgundy); letter-spacing: var(--tracking-tight); } /* --- Features (pills) --- */ .room-panel__features { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; } .room-panel__feature { display: inline-block; padding: var(--space-1-5) var(--space-3); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-burgundy); background-color: var(--color-burgundy-04); border: 1px solid var(--color-burgundy-12); border-radius: var(--radius-full); } /* --- Ideal for (gold-dash list) --- */ .room-panel__ideal { display: flex; flex-direction: column; gap: var(--space-3); } .room-panel__ideal-label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); } .room-panel__ideal-list { list-style: none; margin: 0; padding: 0; columns: 1; } @media (min-width: 540px) { .room-panel__ideal-list { columns: 2; column-gap: var(--space-8); } } .room-panel__ideal-item { position: relative; padding-left: var(--space-6); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-primary); margin-bottom: var(--space-2); break-inside: avoid; } .room-panel__ideal-item::before { content: "\2014"; position: absolute; left: 0; color: var(--color-gold); font-weight: var(--weight-medium); } /* --- CTA + floorplan --- */ .room-panel__floorplan { margin: 0; } .room-panel__cta { margin-top: var(--space-2); } /* --- Inlined from _capacity-comparison.css --- */ /* ========================================================================= CAPACITY COMPARISON 4-up cards (Main / Turret / Tonga / Full Venue) with 3 stat rows each. Each stat row has a thin gold fill bar showing relative size. ========================================================================= */ .capacity-comparison__header { text-align: center; max-width: 720px; margin: 0 auto var(--space-12); } .capacity-comparison__headline { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); } .capacity-comparison__subheadline { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } /* --- Cards --- */ .capacity-comparison__cards { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-10); } @media (min-width: 640px) { .capacity-comparison__cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .capacity-comparison__cards { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } } .capacity-card { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); background-color: var(--color-white); border: 1px solid var(--color-gold-faint); border-radius: var(--radius-md); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .capacity-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--color-gold-muted); } .capacity-card--featured { background-color: var(--color-burgundy); border-color: var(--color-burgundy); color: var(--color-ivory); } .capacity-card--featured:hover { background-color: var(--color-burgundy-dark); } .capacity-card__name { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); margin: 0; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-gold-pale); } .capacity-card--featured .capacity-card__name { color: var(--color-ivory); border-bottom-color: var(--color-gold); } /* Stats list */ .capacity-card__stats { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; } .capacity-card__stat { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: baseline; gap: var(--space-1) var(--space-3); } .capacity-card__stat-label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); grid-column: 1; grid-row: 1; } .capacity-card--featured .capacity-card__stat-label { color: var(--color-ivory-15); color: rgba(250, 247, 242, 0.65); } .capacity-card__stat-value { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-normal); line-height: 1; color: var(--color-burgundy); letter-spacing: var(--tracking-tight); margin: 0; grid-column: 2; grid-row: 1; } .capacity-card--featured .capacity-card__stat-value { color: var(--color-gold); } .capacity-card__bar { display: block; position: relative; width: 100%; height: 2px; background-color: var(--color-gold-pale); border-radius: var(--radius-full); grid-column: 1 / -1; grid-row: 2; overflow: hidden; } .capacity-card--featured .capacity-card__bar { background-color: rgba(250, 247, 242, 0.15); } .capacity-card__bar-fill { display: block; height: 100%; background-color: var(--color-gold); border-radius: inherit; transform-origin: left; transition: width 1200ms var(--ease-luxe); } @media (prefers-reduced-motion: reduce) { .capacity-card__bar-fill { transition: none; } } /* --- Notes --- */ .capacity-comparison__notes { list-style: none; margin: 0; padding: var(--space-6) 0 0; border-top: 1px solid var(--color-gold-pale); display: flex; flex-direction: column; gap: var(--space-2); } .capacity-comparison__notes li { position: relative; padding-left: var(--space-6); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } .capacity-comparison__notes li::before { content: "\2014"; position: absolute; left: 0; color: var(--color-gold); } /* --- Inlined from _logistics-accordion.css --- */ /* ========================================================================= LOGISTICS ACCORDION Native
/ stack on the evening espresso section. Gold-faint dividers between rows; custom CSS chevron. ========================================================================= */ .logistics-accordion__header { text-align: center; max-width: 720px; margin: 0 auto var(--space-10); } .logistics-accordion__headline { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); color: var(--color-ivory); } .logistics-accordion__subheadline { font-size: var(--text-lg); color: var(--text-on-deep-muted); line-height: var(--leading-relaxed); } .logistics-accordion__list { max-width: 920px; margin: 0 auto; border-top: 1px solid var(--color-gold-faint); } /* --- Item --- */ .logistics-accordion__item { border-bottom: 1px solid var(--color-gold-faint); } .logistics-accordion__item[open] { background-color: rgba(201, 169, 98, 0.04); } /* Hide the native marker (Chrome / Safari) */ .logistics-accordion__summary::-webkit-details-marker { display: none; } .logistics-accordion__summary::marker { content: ""; } .logistics-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-4); list-style: none; cursor: pointer; font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-medium); color: var(--color-ivory); transition: color var(--transition-fast); } .logistics-accordion__summary:hover { color: var(--color-gold); } .logistics-accordion__summary:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -4px; border-radius: var(--radius-sm); } .logistics-accordion__title { flex: 1; min-width: 0; } /* CSS-drawn chevron — rotates 45° when open */ .logistics-accordion__chevron { position: relative; flex-shrink: 0; width: 16px; height: 16px; transition: transform var(--transition-fast); } .logistics-accordion__chevron::before, .logistics-accordion__chevron::after { content: ""; position: absolute; background-color: var(--color-gold); top: 50%; left: 50%; transition: transform var(--transition-fast); } .logistics-accordion__chevron::before { width: 16px; height: 1px; transform: translate(-50%, -50%); } .logistics-accordion__chevron::after { width: 1px; height: 16px; transform: translate(-50%, -50%); } .logistics-accordion__item[open] .logistics-accordion__chevron::after { transform: translate(-50%, -50%) scaleY(0); } /* --- Panel content --- */ .logistics-accordion__panel { padding: 0 var(--space-4) var(--space-8); display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 768px) { .logistics-accordion__panel { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-12); row-gap: var(--space-8); padding: 0 var(--space-6) var(--space-10); } } .logistics-accordion__group { display: flex; flex-direction: column; gap: var(--space-3); } .logistics-accordion__group-label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-gold); } .logistics-accordion__content { font-size: var(--text-base); color: var(--text-on-deep-muted); line-height: var(--leading-relaxed); margin: 0; } .logistics-accordion__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .logistics-accordion__bullet { position: relative; padding-left: var(--space-6); font-size: var(--text-base); color: var(--text-on-deep); line-height: var(--leading-relaxed); } .logistics-accordion__bullet::before { content: "\2014"; position: absolute; left: 0; color: var(--color-gold); font-weight: var(--weight-medium); } .logistics-accordion__note { font-size: var(--text-sm); color: var(--text-on-deep-muted); font-style: italic; line-height: var(--leading-relaxed); margin: 0; } /* --- Inlined from _menu-printed.css --- */ /* ========================================================================== The Alexander — Printed Menu Layout Premium paper aesthetic with masonry grid, matching the physical menu. Design references: - Paper bg: #FDFBF7 (--color-ivory) - Outer bg: #F0EFEB with subtle dot grid - Double border frame with warm neutral strokes - Cormorant Garamond throughout (headings + items) - Dotted ruled lines under course headings - Scroll-reveal with staggered item entrances ========================================================================== */ /* ========================================================================== Section Wrapper: dot-grid background behind the paper ========================================================================== */ .menu-printed-section { background-color: #F0EFEB; background-image: radial-gradient(#d5d3cb 1px, transparent 1px); background-size: 32px 32px; padding: var(--space-8) var(--space-4); } @media (min-width: 768px) { .menu-printed-section { padding: var(--space-12) var(--space-8); } } @media (min-width: 1280px) { .menu-printed-section { padding: var(--space-16) var(--space-12); } } /* ========================================================================== Paper Page: the white card that holds all menu content ========================================================================== */ .menu-printed-page { max-width: 1400px; margin: 0 auto; background-color: var(--color-ivory); position: relative; /* Subtle SVG noise texture for paper grain */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); /* Layered shadow: close contact shadow + ambient depth */ box-shadow: 0 1px 3px rgba(30, 22, 16, 0.04), 0 8px 24px rgba(30, 22, 16, 0.08), 0 25px 50px -12px rgba(30, 22, 16, 0.15), inset 0 0 80px rgba(0, 0, 0, 0.03); } /* Page entrance animation — only when JS is present. Without JS, the page is visible by default. */ .js .menu-printed-page { opacity: 0; transform: translateY(30px); transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1), transform 0.9s cubic-bezier(0.19, 1, 0.22, 1); } .menu-printed-page.menu-printed-entered { opacity: 1; transform: translateY(0); } /* ========================================================================== Decorative Double Border Two nested hairline borders create the classic printed-menu frame. ========================================================================== */ .menu-printed-page__border-outer { position: absolute; inset: 0.5rem; border: 1px solid rgba(56, 52, 49, 0.55); pointer-events: none; z-index: 2; } .menu-printed-page__border-inner { position: absolute; inset: 0.875rem; border: 1px solid rgba(56, 52, 49, 0.55); pointer-events: none; z-index: 2; } @media (min-width: 768px) { .menu-printed-page__border-outer { inset: 0.75rem; } .menu-printed-page__border-inner { inset: 1.125rem; } } /* ========================================================================== Content Area: lives inside the double border frame Padding tuned at each breakpoint to fill the paper without cramping. ========================================================================== */ .menu-printed-page__content { position: relative; z-index: 1; padding: var(--space-8) var(--space-6); } @media (min-width: 768px) { .menu-printed-page__content { padding: var(--space-10) var(--space-8); } } @media (min-width: 1024px) { .menu-printed-page__content { /* ~2.5rem top/bottom, ~3rem left/right — matches PDF density */ padding: 2.5rem 3rem; } } @media (min-width: 1280px) { .menu-printed-page__content { padding: 2.5rem 3.5rem; } } /* ========================================================================== Header: logo centered, thank-you blurb + chameleon top right ========================================================================== */ .menu-printed-header { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-bottom: 1.75rem; } @media (min-width: 768px) { .menu-printed-header { gap: var(--space-6); margin-bottom: 2rem; } } @media (min-width: 1024px) { .menu-printed-header { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--space-8); margin-bottom: 2.5rem; } } /* Left spacer: balances the aside on desktop so logo stays centered */ .menu-printed-header__spacer { display: none; } @media (min-width: 1024px) { .menu-printed-header__spacer { display: block; width: 30%; } } /* Center: logo lockup */ .menu-printed-header__logo { text-align: center; } @media (min-width: 1024px) { .menu-printed-header__logo { width: 50%; display: flex; justify-content: center; } } .menu-printed-header__logo-img { max-width: 320px; width: 100%; height: auto; } @media (min-width: 768px) { .menu-printed-header__logo-img { max-width: 400px; } } /* Right: blurb + chameleon illustration */ .menu-printed-header__aside { text-align: center; position: relative; } @media (min-width: 1024px) { .menu-printed-header__aside { width: 30%; text-align: justify; text-justify: inter-word; } } .menu-printed-header__blurb { font-family: var(--font-heading); font-style: italic; font-size: clamp(1.05rem, 1.4vw, 1.35rem); font-weight: var(--weight-normal); line-height: 1.55; color: var(--color-text-secondary); } .menu-printed-header__blurb em { font-style: italic; color: var(--color-text-primary); } .menu-printed-header__chameleon { display: block; width: 110px; height: auto; opacity: 0.85; margin: var(--space-2) 0 0 auto; animation: menu-float 6s ease-in-out infinite; } @media (min-width: 1024px) { .menu-printed-header__chameleon { width: 130px; margin-right: -0.5rem; } } @keyframes menu-float { 0%, 100% { transform: scaleX(-1) translateY(0) rotate(0deg); } 50% { transform: scaleX(-1) translateY(-8px) rotate(2deg); } } /* ========================================================================== Masonry Grid Single column on mobile, two on tablet, three on desktop. Column gap tuned to give courses breathing room without wasting paper. ========================================================================== */ .menu-printed-masonry { column-count: 1; column-gap: 2rem; } @media (min-width: 768px) { .menu-printed-masonry { column-count: 2; column-gap: 2.25rem; } } @media (min-width: 1024px) { .menu-printed-masonry { column-count: 3; column-gap: 2.5rem; } } /* ========================================================================== Course Sections Each course is a break-inside-avoid block with heading + dotted rule + items. ========================================================================== */ .menu-printed-course { break-inside: avoid; margin-bottom: 1.75rem; } /* Scroll reveal — progressive enhancement. Only hide when JS is present (.js on ). Without JS, courses are visible by default. */ .js .menu-printed-course { opacity: 0; transform: translateY(25px); } .menu-printed-course.menu-printed-visible { opacity: 1; transform: translateY(0); transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); } /* Course header: heading + dotted line */ .menu-printed-course__head { margin-bottom: var(--space-5); } /* Course heading: ALL CAPS, tracked, Cormorant Garamond */ .menu-printed-course__heading { font-family: var(--font-heading); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: var(--weight-medium); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-primary); margin-bottom: var(--space-3); line-height: var(--leading-tight); } /* ========================================================================== Dotted Line Under Headings Thin dotted rule that animates width on scroll reveal. ========================================================================== */ .menu-printed-course__dotted { height: 2px; width: 100%; background-image: linear-gradient( to right, #a09e96 33%, rgba(255, 255, 255, 0) 0% ); background-position: bottom; background-size: 8px 1px; background-repeat: repeat-x; } /* When JS is present, start collapsed and animate on reveal */ .js .menu-printed-course__dotted { width: 0; transition: width 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.3s; } .menu-printed-course.menu-printed-visible .menu-printed-course__dotted, .menu-printed-course__dotted.menu-printed-dotted-visible { width: 100%; } /* ========================================================================== Category Modifier (e.g., "served with choice of side") ========================================================================== */ .menu-printed-course__modifier { font-family: var(--font-body); font-size: var(--text-sm); font-style: italic; color: var(--color-text-muted); margin-top: var(--space-4); padding-top: var(--space-2); border-top: 1px solid rgba(209, 206, 197, 0.4); display: inline-block; } .menu-printed-course__desc { font-family: var(--font-body); font-size: var(--text-sm); font-style: italic; color: var(--color-text-muted); margin-top: var(--space-2); margin-bottom: var(--space-3); } /* ========================================================================== Subsections (wine varietals, beer types) ========================================================================== */ .menu-printed-subsection { margin-top: var(--space-5); } .menu-printed-subsection__name { font-family: var(--font-heading); font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: var(--weight-medium); font-style: italic; color: var(--color-text-secondary); margin-bottom: var(--space-3); padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); } /* ========================================================================== Item Region (wine origin) ========================================================================== */ .menu-printed-item__region { font-family: var(--font-body); font-size: var(--text-xs); font-style: italic; color: var(--color-text-muted); letter-spacing: var(--tracking-wide); margin-left: var(--space-2); } /* ========================================================================== Item Dietary (V · DF · GF) — small uppercase gold sequence inline with the item name. Spaced bullets between tags. Used by event/brunch menus that carry the V/DF/GF legend; dinner menu items have no `item.dietary` so this rule is silent there. ========================================================================== */ .menu-printed-item__dietary { display: inline; font-family: var(--font-body); font-size: 0.65rem; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-dark); margin-left: var(--space-2); white-space: nowrap; vertical-align: 0.15em; } /* ========================================================================== Item Tags (Local, N/A, Signature) ========================================================================== */ .menu-printed-item__tag { display: inline-block; font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid var(--color-border); padding: 1px 6px; border-radius: 2px; margin-top: var(--space-1); } .menu-printed-item__tag--local { color: var(--color-burgundy); border-color: rgba(114, 47, 55, 0.3); } .menu-printed-item__tag--featured { color: var(--color-gold-dark); border-color: rgba(201, 169, 98, 0.4); } /* ========================================================================== Items List ========================================================================== */ .menu-printed-course__items { display: flex; flex-direction: column; gap: 1rem; } /* ========================================================================== Menu Items Name + price on one line, description below. Hover brings a subtle burgundy accent shift. ========================================================================== */ .menu-printed-item { cursor: default; } /* Item row: name left, price right, baseline-aligned */ .menu-printed-item__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: 2px; } /* Item name */ .menu-printed-item__name { font-family: var(--font-heading); font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: var(--weight-medium); color: var(--color-text-primary); line-height: var(--leading-snug); transition: color 300ms ease; } /* Hover: name shifts to burgundy */ .menu-printed-item:hover .menu-printed-item__name { color: var(--color-burgundy); } /* Star marker for featured items */ .menu-printed-item__star { color: var(--color-burgundy); } /* Price: same size as name, semibold, never wraps */ .menu-printed-item__price { font-family: var(--font-heading); font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: var(--weight-semibold); color: var(--color-text-primary); padding-left: var(--space-4); white-space: nowrap; flex-shrink: 0; transition: color 300ms ease, transform 300ms ease; } /* Hover: price shifts to burgundy with subtle scale bump */ .menu-printed-item:hover .menu-printed-item__price { color: var(--color-burgundy); transform: scale(1.05); } /* Description: lighter weight, muted, generous right padding */ .menu-printed-item__desc { font-family: var(--font-heading); font-size: clamp(0.9rem, 1.2vw, 1.1rem); font-weight: var(--weight-normal); color: var(--color-text-primary); opacity: 0.8; line-height: var(--leading-snug); padding-right: var(--space-4); transition: color 300ms ease, opacity 300ms ease; } @media (min-width: 768px) { .menu-printed-item__desc { padding-right: var(--space-8); } } /* Hover: description becomes more readable */ .menu-printed-item:hover .menu-printed-item__desc { color: var(--color-text-secondary); opacity: 1; } /* Special note below an item (e.g., "GF available") */ .menu-printed-item__note { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-burgundy); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-top: var(--space-1); } /* Stagger animation for items within a revealing course. Items start hidden and animate in with a JS-set transition-delay. Only when JS is present — without JS, items are visible by default. */ .js .menu-printed-item { opacity: 0; transform: translateY(10px); transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1), transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .js .menu-printed-item.menu-printed-item-visible { opacity: 1; transform: translateY(0); } /* ========================================================================== Happenings Box Dashed-border callout card for events, specials, or seasonal notes. ========================================================================== */ .menu-printed-happenings { border: 1.5px dashed rgba(56, 52, 49, 0.5); padding: var(--space-8); border-radius: var(--radius-sm); position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); transition: border-color 0.5s ease; } /* Decorative corner flourish — burgundy radial wash, top-right */ .menu-printed-happenings::before { content: ''; position: absolute; top: -1rem; right: -1rem; width: 5rem; height: 5rem; background: radial-gradient( circle at 100% 0%, rgba(114, 47, 55, 0.05) 0%, transparent 70% ); border-radius: 0 0 0 100%; pointer-events: none; transition: transform 0.5s ease; } /* Hover: border turns burgundy, corner flourish grows */ .menu-printed-happenings:hover { border-color: var(--color-burgundy); } .menu-printed-happenings:hover::before { transform: scale(1.6); } /* Heading inside happenings gets tighter bottom margin */ .menu-printed-happenings .menu-printed-course__heading { margin-bottom: var(--space-6); } /* Items inside happenings get more breathing room */ .menu-printed-happenings .menu-printed-course__items { gap: var(--space-6); } /* ========================================================================== Footer Rule: decorative separator above the footer ========================================================================== */ .menu-printed-footer__rule { border: none; border-top: 1px solid var(--color-border); margin: var(--space-8) 0 0; } @media (min-width: 1024px) { .menu-printed-footer__rule { margin-top: var(--space-12); } } /* ========================================================================== Footer: allergy note, sourcing credit, etc. ========================================================================== */ .menu-printed-footer { text-align: center; margin-top: var(--space-8); padding-top: var(--space-6); } @media (min-width: 768px) { .menu-printed-footer { margin-top: var(--space-10); padding-top: var(--space-8); } } @media (min-width: 1024px) { .menu-printed-footer { margin-top: var(--space-14); padding-top: var(--space-8); } } .menu-printed-footer__note { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-6); line-height: var(--leading-relaxed); } /* ========================================================================== Print Styles When physically printed, strip animations, shadows, and the outer bg. ========================================================================== */ @media print { .menu-printed-section { background: none; padding: 0; } .menu-printed-page { box-shadow: none; opacity: 1; transform: none; } .menu-printed-course { opacity: 1; transform: none; } .menu-printed-course .menu-printed-item { opacity: 1; transform: none; } .menu-printed-course__dotted { width: 100%; } .menu-printed-header__chameleon { animation: none; } .menu-printed-happenings::before { display: none; } } /* --- Inlined from _lookbook.css --- */ /* ========================================================================= LOOKBOOK Cinematic, wordless gallery: hero → mood strip → bento grid → close. Click/tap any grid image opens a fullscreen immersive overlay. All styles scoped under .page--lookbook to avoid leaking elsewhere. ========================================================================= */ /* ------------------------------------------------------------------------- 1. HERO OVERRIDE — single italic word, no chrome, no buttons ------------------------------------------------------------------------- */ .page--lookbook .hero--full .hero__content { text-align: center; align-items: center; justify-content: center; padding-bottom: 0; } .page--lookbook .hero--full .hero__tagline { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-6); opacity: 0.9; } .page--lookbook .hero--full .hero__headline { font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: var(--text-8xl); line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--color-ivory); margin: 0 0 var(--space-4); } .page--lookbook .hero--full .hero__subheadline { font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: var(--text-lg); letter-spacing: 0.02em; color: var(--color-gold-pale); max-width: 32rem; margin: 0 auto; opacity: 0.85; } /* Overlay tuned so the photo still reads through — bar-evening is already a dark image, so heavy washes flatten it to solid walnut. Keep the bottom weighted enough for the title; let the top breathe. */ .page--lookbook .hero--full .hero__overlay { background: linear-gradient( 180deg, rgba(30, 22, 16, 0.18) 0%, rgba(30, 22, 16, 0.10) 35%, rgba(30, 22, 16, 0.55) 100% ); } .page--lookbook .hero--full .hero__vignette { background: radial-gradient( ellipse at center, transparent 45%, rgba(30, 22, 16, 0.30) 100% ); } /* ------------------------------------------------------------------------- 2. MOOD STRIP — 3 full-bleed images ------------------------------------------------------------------------- */ .lookbook-mood-strip { padding: 0; margin: 0; } .lookbook-mood-strip__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--color-walnut); } .lookbook-mood-strip__cell { position: relative; aspect-ratio: 3 / 4; overflow: hidden; margin: 0; } .lookbook-mood-strip__picture, .lookbook-mood-strip__cell picture, .lookbook-mood-strip__cell img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.003); transition: transform 1200ms var(--ease-luxe), filter 600ms var(--ease-luxe); filter: brightness(0.96); } @media (hover: hover) { .lookbook-mood-strip__cell:hover img, .lookbook-mood-strip__cell:hover picture img { transform: scale(1.07); filter: brightness(1); } } @media (max-width: 767px) { .lookbook-mood-strip__row { grid-template-columns: 1fr; } .lookbook-mood-strip__cell { aspect-ratio: 4 / 3; } } /* ------------------------------------------------------------------------- 3. BENTO GRID ------------------------------------------------------------------------- */ .lookbook-grid-section { padding: var(--space-12) var(--space-4) var(--space-16); background-color: var(--color-espresso); } .lookbook-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 18vw; grid-auto-flow: dense; gap: var(--space-2); max-width: 1600px; margin: 0 auto; } /* Cell layout variants — span columns and rows */ .lookbook-grid__item--w4 { grid-column: span 4; grid-row: span 1; } .lookbook-grid__item--w6 { grid-column: span 6; grid-row: span 1; } .lookbook-grid__item--w8 { grid-column: span 8; grid-row: span 1; } .lookbook-grid__item--w12 { grid-column: span 12; grid-row: span 1; } .lookbook-grid__item--w4h2 { grid-column: span 4; grid-row: span 2; } .lookbook-grid__item--w6h2 { grid-column: span 6; grid-row: span 2; } .lookbook-grid__item--w8h2 { grid-column: span 8; grid-row: span 2; } /* Button reset + frame */ .lookbook-grid__item { position: relative; border: 0; padding: 0; margin: 0; background: var(--color-walnut); cursor: pointer; overflow: hidden; appearance: none; font: inherit; color: inherit; outline: none; transition: transform var(--transition-normal) var(--ease-luxe); } .lookbook-grid__item:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; } /* Picture fills the cell */ .lookbook-grid__picture, .lookbook-grid__item picture, .lookbook-grid__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-luxe), filter 400ms var(--ease-luxe); } /* Hover scrim — gold-pale wash + slight scale */ .lookbook-grid__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, transparent 55%, rgba(30, 22, 16, 0.45) 100% ); opacity: 0; transition: opacity var(--transition-normal) var(--ease-luxe); } .lookbook-grid__scrim::after { content: ""; position: absolute; inset: auto var(--space-3) var(--space-3) auto; width: 28px; height: 28px; border: 1px solid var(--color-gold-pale); border-radius: 50%; background: linear-gradient(transparent calc(50% - 1px), var(--color-gold-pale) 50%, transparent calc(50% + 1px)), linear-gradient(90deg, transparent calc(50% - 1px), var(--color-gold-pale) 50%, transparent calc(50% + 1px)); opacity: 0.85; transform: scale(0.9); transition: transform var(--transition-normal) var(--ease-luxe); } @media (hover: hover) { .lookbook-grid__item:hover .lookbook-grid__scrim, .lookbook-grid__item:focus-visible .lookbook-grid__scrim { opacity: 1; } .lookbook-grid__item:hover .lookbook-grid__picture img, .lookbook-grid__item:hover img { transform: scale(1.04); } .lookbook-grid__item:hover .lookbook-grid__scrim::after { transform: scale(1); } } /* Tablet — drop to 8-col with simplified spans */ @media (max-width: 1023px) { .lookbook-grid { grid-template-columns: repeat(8, 1fr); grid-auto-rows: 22vw; } .lookbook-grid__item--w4 { grid-column: span 4; grid-row: span 1; } .lookbook-grid__item--w6 { grid-column: span 8; grid-row: span 1; } .lookbook-grid__item--w8 { grid-column: span 8; grid-row: span 1; } .lookbook-grid__item--w12 { grid-column: span 8; grid-row: span 1; } .lookbook-grid__item--w4h2 { grid-column: span 4; grid-row: span 2; } .lookbook-grid__item--w6h2 { grid-column: span 8; grid-row: span 2; } .lookbook-grid__item--w8h2 { grid-column: span 8; grid-row: span 2; } } /* Mobile — clean 2-col, all spans collapse */ @media (max-width: 640px) { .lookbook-grid-section { padding: var(--space-6) var(--space-2) var(--space-10); } .lookbook-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; gap: var(--space-1); } .lookbook-grid__item--w4, .lookbook-grid__item--w6, .lookbook-grid__item--w8 { grid-column: span 1; grid-row: span 1; } .lookbook-grid__item--w12 { grid-column: span 2; grid-row: span 1; } .lookbook-grid__item--w4h2, .lookbook-grid__item--w6h2, .lookbook-grid__item--w8h2 { grid-column: span 1; grid-row: span 2; } .lookbook-grid__scrim::after { width: 22px; height: 22px; inset: auto var(--space-2) var(--space-2) auto; } } /* ------------------------------------------------------------------------- 4. IMMERSIVE OVERLAY ------------------------------------------------------------------------- */ .lookbook-overlay { position: fixed; inset: 0; z-index: var(--z-modal, 500); background: rgba(30, 22, 16, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr auto; align-items: center; justify-items: center; gap: var(--space-2); padding: var(--space-4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-normal) var(--ease-luxe), visibility 0s linear var(--transition-normal); } .lookbook-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--transition-normal) var(--ease-luxe), visibility 0s linear 0s; } .lookbook-overlay__frame { grid-column: 2; grid-row: 1; margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .lookbook-overlay__image { display: block; max-width: 100%; max-height: 88vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); transition: opacity 250ms var(--ease-luxe); } .lookbook-overlay__image.is-swapping { opacity: 0; } /* Buttons — minimal gold ghost */ .lookbook-overlay__close, .lookbook-overlay__nav { appearance: none; border: 1px solid rgba(232, 217, 176, 0.4); background: rgba(30, 22, 16, 0.4); color: var(--color-gold-pale); width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background var(--transition-fast) var(--ease-luxe), border-color var(--transition-fast) var(--ease-luxe), transform var(--transition-fast) var(--ease-luxe); } .lookbook-overlay__close:hover, .lookbook-overlay__nav:hover, .lookbook-overlay__close:focus-visible, .lookbook-overlay__nav:focus-visible { background: rgba(201, 169, 98, 0.18); border-color: var(--color-gold); color: var(--color-gold); outline: none; } .lookbook-overlay__close { position: absolute; top: var(--space-4); right: var(--space-4); font-size: 1.75rem; } .lookbook-overlay__nav--prev { grid-column: 1; grid-row: 1; } .lookbook-overlay__nav--next { grid-column: 3; grid-row: 1; } /* Counter */ .lookbook-overlay__counter { grid-column: 2; grid-row: 2; margin: var(--space-3) 0 0; font-family: var(--font-heading); font-style: italic; font-size: var(--text-sm); letter-spacing: 0.08em; color: var(--color-gold-pale); opacity: 0.85; display: inline-flex; align-items: center; gap: var(--space-2); } .lookbook-overlay__counter-divider { opacity: 0.4; } /* Body scroll lock helper — set by JS when overlay open */ body.lookbook-locked { overflow: hidden; } /* Mobile overlay — hide nav arrows (use swipe), counter at top */ @media (max-width: 640px) { .lookbook-overlay { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: var(--space-2); } .lookbook-overlay__frame { grid-column: 1; grid-row: 2; } .lookbook-overlay__image { max-height: 80vh; } .lookbook-overlay__nav { display: none; } .lookbook-overlay__counter { grid-column: 1; grid-row: 3; } .lookbook-overlay__close { top: var(--space-2); right: var(--space-2); } } /* ------------------------------------------------------------------------- 5. CLOSING-MOMENT — slight tightening on the lookbook page ------------------------------------------------------------------------- */ .page--lookbook .closing-moment .closing-moment__resolve { font-style: italic; } /* --- Inlined from _event-roll.css --- */ /* ========================================================================== Event Roll — /events/upcoming ("What's Happening") Two-zone listing: - .event-roll__zone--dated → "This Season" (primary, 2-col grid desktop) - .event-roll__zone--weekly → "Every Week" (secondary, 3-col grid desktop) DEFAULT PALETTE: evening (dark surfaces, gold accents, ivory type). The page is scoped to lookbook-flavored evening atmosphere by default. Daylight overrides retained for any future light-bg use of the section. Tokens-only. Cinematic-layout-aware via [data-layout="cinematic"]. ========================================================================== */ .event-roll .section-header { margin-bottom: var(--space-10); } .event-roll__zone { margin-bottom: var(--space-16); } .event-roll__zone:last-child { margin-bottom: 0; } .event-roll__divider { border: 0; height: 1px; background: var(--color-border-gold); margin: var(--space-16) 0; opacity: 0.45; } /* --- Dated zone — "This Season" -------------------------------------------- */ .event-roll__grid--dated { display: grid; grid-template-columns: 1fr; gap: var(--space-10); } @media (min-width: 768px) { .event-roll__grid--dated { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); } } /* DEFAULT (evening): translucent ivory wash over dark bg, gold border */ .event-card--dated { position: relative; background: rgba(250, 247, 242, 0.04); border: 1px solid var(--color-border-gold); border-radius: var(--radius-md, 4px); overflow: hidden; transition: transform 500ms var(--ease-luxe), box-shadow 500ms var(--ease-luxe), border-color 400ms var(--ease-luxe); } .event-card--dated:hover, .event-card--dated:focus-within { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); border-color: var(--color-gold); } .event-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .event-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-walnut); } .event-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-luxe), filter 400ms var(--ease-luxe); filter: brightness(0.92); } /* Flyer thumbnails — show the full hand-illustrated artwork with no crop. Date/time is baked into the art, so the badge + scrim are suppressed in the template. Aspect-ratio matches the source flyer (~926×1180, ≈4:5). */ .event-card__media--flyer { aspect-ratio: 4 / 5; background: var(--color-ivory); } .event-card__media--flyer img { object-fit: contain; filter: none; } @media (hover: hover) { .event-card--dated:hover .event-card__media--flyer img, .event-card--dated:focus-within .event-card__media--flyer img { transform: scale(1.02); filter: none; } } @media (hover: hover) { .event-card--dated:hover .event-card__media img, .event-card--dated:focus-within .event-card__media img { transform: scale(1.04); filter: brightness(1); } } /* Lookbook-style hover scrim — gold-pale wash + magnifier-cross indicator */ .event-card__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, transparent 55%, rgba(30, 22, 16, 0.45) 100% ); opacity: 0; transition: opacity var(--transition-normal) var(--ease-luxe); } .event-card__scrim::after { content: ""; position: absolute; inset: auto var(--space-3) var(--space-3) auto; width: 28px; height: 28px; border: 1px solid var(--color-gold-pale); border-radius: 50%; background: linear-gradient(transparent calc(50% - 1px), var(--color-gold-pale) 50%, transparent calc(50% + 1px)), linear-gradient(90deg, transparent calc(50% - 1px), var(--color-gold-pale) 50%, transparent calc(50% + 1px)); opacity: 0.85; transform: scale(0.9); transition: transform var(--transition-normal) var(--ease-luxe); } @media (hover: hover) { .event-card--dated:hover .event-card__scrim, .event-card--dated:focus-within .event-card__scrim { opacity: 1; } .event-card--dated:hover .event-card__scrim::after, .event-card--dated:focus-within .event-card__scrim::after { transform: scale(1); } } @media (max-width: 640px) { .event-card__scrim::after { width: 22px; height: 22px; inset: auto var(--space-2) var(--space-2) auto; } } /* DEFAULT date badge — gold on walnut */ .event-card__badge { position: absolute; left: var(--space-4); bottom: var(--space-4); background: var(--color-gold); color: var(--color-walnut); padding: var(--space-2) var(--space-4); text-align: center; min-width: 4rem; border-radius: 2px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); z-index: 1; } .event-card__badge-month { display: block; font-family: var(--font-sans, inherit); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1; } .event-card__badge-day { display: block; font-family: var(--font-serif-display, var(--font-serif, inherit)); font-size: 1.875rem; font-weight: 500; line-height: 1.05; margin-top: 0.125rem; } .event-card__body { padding: var(--space-6) var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .event-card__eyebrow { font-family: var(--font-sans, inherit); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); } /* DEFAULT (evening): ivory headline, gold-pale supporting type */ .event-card__title { font-family: var(--font-serif-display, var(--font-serif, inherit)); font-size: 1.625rem; line-height: 1.15; font-weight: 500; margin: 0; color: var(--color-text-on-dark); } @media (min-width: 1024px) { .event-card__title { font-size: 1.875rem; } } .event-card__blurb { font-size: 1rem; line-height: 1.55; color: var(--color-text-on-dark-muted); margin: 0; } .event-card__meta { font-size: 0.875rem; color: var(--color-text-on-dark-subtle); margin: 0; font-variant-numeric: tabular-nums; } .event-card__cta { display: inline-block; margin-top: auto; padding-top: var(--space-3); font-family: var(--font-sans, inherit); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-gold); border-top: 1px solid var(--color-gold-faint); transition: color 0.2s ease, border-top-color 0.2s ease; } .event-card--dated:hover .event-card__cta, .event-card--dated:focus-within .event-card__cta { color: var(--color-gold-pale); border-top-color: var(--color-gold); } /* --- Weekly zone — "Every Week" -------------------------------------------- */ .event-roll__zone--weekly .section-title--secondary { font-size: 1.75rem; } @media (min-width: 1024px) { .event-roll__zone--weekly .section-title--secondary { font-size: 2rem; } } .event-roll__grid--weekly { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 768px) { .event-roll__grid--weekly { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .event-roll__grid--weekly { grid-template-columns: repeat(3, 1fr); gap: var(--space-10); } } .weekly-card { display: flex; flex-direction: column; background: transparent; } .weekly-card__media { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: var(--space-5); border-radius: 2px; background: var(--color-walnut); } .weekly-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-luxe); filter: brightness(0.94); } @media (hover: hover) { .weekly-card:hover .weekly-card__media img { transform: scale(1.04); filter: brightness(1); } } .weekly-card__body { display: flex; flex-direction: column; gap: var(--space-2); } .weekly-card__schedule { font-family: var(--font-sans, inherit); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); } /* DEFAULT (evening): ivory titles, gold-pale type */ .weekly-card__title { font-family: var(--font-serif-display, var(--font-serif, inherit)); font-size: 1.375rem; line-height: 1.2; font-weight: 500; margin: 0; color: var(--color-text-on-dark); } @media (min-width: 1024px) { .weekly-card__title { font-size: 1.5rem; } } .weekly-card__blurb { font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-on-dark-muted); margin: 0; } .weekly-card__time { font-size: 0.8125rem; color: var(--color-text-on-dark-subtle); margin: 0; font-variant-numeric: tabular-nums; } /* --- Daylight overrides — used only when section uses an ivory bg ---------- */ .bg-ivory .event-card--dated, .bg-ivory-warm .event-card--dated { background: var(--color-background-card); border-color: var(--color-border-subtle); } .bg-ivory .event-card--dated:hover, .bg-ivory-warm .event-card--dated:hover { box-shadow: 0 12px 32px rgba(30, 22, 16, 0.12); border-color: var(--color-border-gold); } .bg-ivory .event-card__media, .bg-ivory-warm .event-card__media { background: var(--color-ivory-deep); } .bg-ivory .event-card__media img, .bg-ivory-warm .event-card__media img, .bg-ivory .weekly-card__media img, .bg-ivory-warm .weekly-card__media img { filter: brightness(1); } .bg-ivory .event-card__badge, .bg-ivory-warm .event-card__badge { background: var(--color-burgundy); color: var(--color-ivory); box-shadow: 0 4px 12px rgba(30, 22, 16, 0.18); } .bg-ivory .event-card__eyebrow, .bg-ivory-warm .event-card__eyebrow, .bg-ivory .weekly-card__schedule, .bg-ivory-warm .weekly-card__schedule { color: var(--color-gold-dark); } .bg-ivory .event-card__title, .bg-ivory-warm .event-card__title, .bg-ivory .weekly-card__title, .bg-ivory-warm .weekly-card__title { color: var(--color-text-primary); } .bg-ivory .event-card__blurb, .bg-ivory-warm .event-card__blurb, .bg-ivory .weekly-card__blurb, .bg-ivory-warm .weekly-card__blurb { color: var(--color-text-secondary); } .bg-ivory .event-card__meta, .bg-ivory-warm .event-card__meta, .bg-ivory .weekly-card__time, .bg-ivory-warm .weekly-card__time { color: var(--color-text-muted); } .bg-ivory .event-card__cta, .bg-ivory-warm .event-card__cta { color: var(--color-burgundy); border-top-color: var(--color-border-subtle); } .bg-ivory .event-card--dated:hover .event-card__cta, .bg-ivory-warm .event-card--dated:hover .event-card__cta { color: var(--color-burgundy-dark); border-top-color: var(--color-border-subtle); } .bg-ivory .event-card__media, .bg-ivory-warm .event-card__media { background: var(--color-ivory-deep); } /* --- Cinematic-layout tweaks ---------------------------------------------- */ [data-layout="cinematic"] .event-roll { padding-top: var(--space-16); padding-bottom: var(--space-20); } @media (min-width: 1024px) { [data-layout="cinematic"] .event-roll { padding-top: var(--space-20); padding-bottom: var(--space-28); } } /* ========================================================================== PAGE-LEVEL SCOPE — What's Happening (events/upcoming/index.json) build.js derives slug from filename, so the body class is .page--index; we disambiguate from /events/index.json (which has no atmosphere=evening on its hero) by combining body class with the unique hero id and the evening atmosphere data attribute. Mirrors the .page--lookbook pattern. ========================================================================== */ #whats-happening-hero.hero--full .hero__content { text-align: center; align-items: center; justify-content: center; padding-bottom: 0; } #whats-happening-hero.hero--full .hero__tagline { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-6); opacity: 0.9; } #whats-happening-hero.hero--full .hero__headline { font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: var(--text-7xl); line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--color-ivory); margin: 0 0 var(--space-4); } @media (min-width: 1024px) { #whats-happening-hero.hero--full .hero__headline { font-size: var(--text-8xl); } } #whats-happening-hero.hero--full .hero__subheadline { font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: var(--text-lg); letter-spacing: 0.02em; color: var(--color-gold-pale); max-width: 36rem; margin: 0 auto; opacity: 0.88; } /* Hero overlay tuned to the evening bar interior — keep top breathing, weight bottom for headline legibility (mirrors .page--lookbook). */ #whats-happening-hero.hero--full .hero__overlay { background: linear-gradient( 180deg, rgba(30, 22, 16, 0.18) 0%, rgba(30, 22, 16, 0.10) 35%, rgba(30, 22, 16, 0.55) 100% ); } #whats-happening-hero.hero--full .hero__vignette { background: radial-gradient( ellipse at center, transparent 45%, rgba(30, 22, 16, 0.30) 100% ); } /* --- Inlined from _event-detail.css --- */ /* ========================================================================== Event Detail — individual upcoming event pages Minimal additions on top of existing section components (split-overlap, closing-moment, etc.). Reserved for date/time meta blocks and ticketing accents specific to dated event detail pages. ========================================================================== */ /* Date/time meta line that may appear above hero subheadline. Currently rendered inline via hero eyebrow — kept here as the landing spot for any future detail-page-only refinements. */ .event-detail__meta { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-sans, inherit); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold-dark); } .event-detail__meta-divider { display: inline-block; width: 1px; height: 0.875rem; background: var(--color-border-gold); } /* ========================================================================== PAGE-LEVEL SCOPES — Mother's Day & Bridgerton High Tea heroes Mirror the lookbook hero pattern (italic headline, gold-pale italic subheadline, gold caps tagline) on the dated event detail pages so they inherit the cinematic vocabulary. Each scopes to its unique hero id so it doesn't leak to other pages that share the page--{slug} class. Mother's Day stays on a daylight atmosphere (brunch); Bridgerton uses evening. Both share the lookbook hero typography. ========================================================================== */ /* Common: italic display hero on dated event pages */ #mothers-day-hero.hero--full .hero__content, #bridgerton-hero.hero--full .hero__content { align-items: flex-start; justify-content: flex-end; } #mothers-day-hero.hero--full .hero__tagline, #bridgerton-hero.hero--full .hero__tagline { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-5); opacity: 0.92; } #mothers-day-hero.hero--full .hero__headline, #bridgerton-hero.hero--full .hero__headline { font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: var(--text-6xl); line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--color-ivory); margin: 0 0 var(--space-4); } @media (min-width: 1024px) { #mothers-day-hero.hero--full .hero__headline, #bridgerton-hero.hero--full .hero__headline { font-size: var(--text-7xl); } } #mothers-day-hero.hero--full .hero__subheadline, #bridgerton-hero.hero--full .hero__subheadline { font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: var(--text-lg); letter-spacing: 0.02em; color: var(--color-gold-pale); max-width: 34rem; margin: 0 0 var(--space-6); opacity: 0.9; } /* Mother's Day — brunch / daylight: lighter overlay so morning light reads */ #mothers-day-hero.hero--full .hero__overlay { background: linear-gradient( 180deg, rgba(30, 22, 16, 0.10) 0%, rgba(30, 22, 16, 0.05) 35%, rgba(30, 22, 16, 0.45) 100% ); } /* Bridgerton — evening atmospheric overlay matching upcoming hero treatment */ #bridgerton-hero.hero--full .hero__overlay { background: linear-gradient( 180deg, rgba(30, 22, 16, 0.20) 0%, rgba(30, 22, 16, 0.12) 35%, rgba(30, 22, 16, 0.58) 100% ); } #mothers-day-hero.hero--full .hero__vignette, #bridgerton-hero.hero--full .hero__vignette { background: radial-gradient( ellipse at center, transparent 45%, rgba(30, 22, 16, 0.30) 100% ); } /* --- Inlined from _instagram-feed.css --- */ /* ========================================================================== INSTAGRAM FEED Elfsight no-auth widget for @thealexandersocial. Evening palette. 3×2 desktop / 2×3 mobile. Scoped — does not target Elfsight internals (those class names change without notice). Template: templates/partials/sections/instagram-feed.html Script: scripts/instagram-fallback.js (reveal fallback if widget fails) Vertical rhythm: this section uses the standard `.section` class and inherits the project's section padding ramp from `_base.css` (5rem mobile / 7rem ≥768px / 9rem ≥1280px). Header rhythm comes from `.section-header section-header--center` in `_sections.css`. ========================================================================== */ /* -------------------------------------------------------------------------- Embed Container Elfsight injects its own grid inside; we constrain max-width and let their tile rendering breathe. We do NOT target their internal classes. -------------------------------------------------------------------------- */ .instagram-feed__embed { max-width: var(--container-lg); margin: 0 auto; position: relative; /* Reserves space — prevents CLS while widget loads. 3×2 grid at 1024px container width is ~720px tall. */ min-height: 720px; } /* -------------------------------------------------------------------------- Fallback Card Shown when Elfsight fails to load (network blocked, adblock, provider outage). Reveal logic: scripts/instagram-fallback.js, 8s timeout. -------------------------------------------------------------------------- */ .instagram-feed__fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; text-decoration: none; padding: var(--space-12) var(--space-8); border: 1px solid var(--color-gold-50); background-color: var(--color-ivory-08); color: var(--color-ivory); transition: background-color var(--transition-normal), border-color var(--transition-normal); } .instagram-feed__fallback:hover, .instagram-feed__fallback:focus-visible { background-color: var(--color-ivory-15); border-color: var(--color-gold); } .instagram-feed__fallback-eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-gold); } .instagram-feed__fallback-text { font-family: var(--font-heading); font-size: var(--text-2xl); font-style: italic; color: var(--color-ivory); } .instagram-feed__fallback-arrow { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-gold); transition: transform var(--transition-normal); } .instagram-feed__fallback:hover .instagram-feed__fallback-arrow { transform: translateX(4px); } /* -------------------------------------------------------------------------- Footer — outbound CTA -------------------------------------------------------------------------- */ .instagram-feed__footer { text-align: center; margin-top: var(--space-12); } /* -------------------------------------------------------------------------- Mobile tuning -------------------------------------------------------------------------- */ @media (max-width: 767px) { .instagram-feed__embed { /* 2×3 grid at 375px container width is ~560-600px tall. */ min-height: 580px; } .instagram-feed__fallback { padding: var(--space-10) var(--space-6); } .instagram-feed__fallback-text { font-size: var(--text-xl); } }