/* ========================================================================== NEXT LEVEL HOSPITALITY — DESIGN TOKENS -------------------------------------------------------------------------- The single source of truth for the visual identity. Every colour, space, shadow, radius and duration used anywhere on this site is defined here and referenced as a custom property. Nothing is hardcoded at the call site. Values are inherited from the old project's marketing pages. Where the old project expressed a value as a Tailwind class name, the literal hex has been resolved and recorded below next to the class it came from, so the origin of every number is traceable without needing Tailwind. Deliberately NOT carried over from the old stylesheet: - the ~90 lines of !important overrides fighting the "green bar" bug - every focus-ring / outline / box-shadow suppression rule - the Google Maps preflight patches - the Vite starter boilerplate - the teal accent pair (--color-accent / --color-accent-subtle). It came off the old application's interior pages, which are not being rebuilt. Gold is the sole accent on this site. See "BRAND" below. Focus states are defined positively at the bottom of this file. Do not suppress them. ========================================================================== */ :root { /* --------------------------------------------------------------------- BRAND Gold is the whole accent story: the logo mark, the wordmark rule, links, buttons, the market fill on the map. There is no second accent colour. Three golds, because one hue cannot do every job legibly: --color-gold the identity gold. Used on the dark header and on dark surfaces, and as a decorative fill anywhere. It is 2.0:1 against white, so it is NEVER used for text or a focus ring on a light background. --color-gold-deep the same hue darkened until it passes AA on the light surfaces (6.1:1 on --color-bg). This is what light-theme links, icons and focus rings use. --color-gold-hover lightened gold, for hover on dark surfaces. --------------------------------------------------------------------- */ --color-gold: #f5a623; --color-gold-hover: #ffb844; /* lightened for hover/active states */ --color-gold-deep: #8a5300; /* darkened until it passes AA on #f8fafc */ /* Tinted gold wash, for icon tiles and the map's market fill. */ --color-gold-subtle: #fdf1dc; --color-gold-wash: #f8dfae; /* Body links and text-level accents resolve through these, so the two themes can disagree about which gold reads better without any call site needing to know. */ --color-link: var(--color-gold-deep); --color-link-hover: #6b4000; /* --------------------------------------------------------------------- HEADER Fixed, dark and translucent in BOTH themes — it sits over the hero photograph, so it never takes the page background. --------------------------------------------------------------------- */ --header-height: 70px; --header-bg: rgba(0, 0, 0, 0.7); --header-blur: 10px; --header-fg: #ffffff; /* wordmark + icon button colour */ --header-fg-muted: rgba(255, 255, 255, 0.75); --header-control-border: rgba(255, 255, 255, 0.6); --header-control-hover-bg: rgba(255, 255, 255, 0.15); --header-z: 999; /* --------------------------------------------------------------------- SURFACES + TEXT — LIGHT THEME (the default) Matched pairs; the dark values are further down under [data-theme]. --------------------------------------------------------------------- */ --color-bg: #f8fafc; /* slate-50 page background */ --color-surface: #ffffff; /* white section / footer */ --color-surface-raised: #ffffff; /* white cards */ --color-heading: #0f172a; /* slate-900 headings */ --color-body: #475569; /* slate-600 body copy */ --color-muted: #64748b; /* slate-500 captions, fine print */ --color-border: #e2e8f0; /* slate-200 card + section rules */ /* Hero fallback colour, shown behind the photograph while it loads. */ --color-hero-backdrop: #f8f8f8; /* The hero carries no text, so there is no scrim: the photograph shows undimmed in both themes. The scroll chevron is the only thing on it, and it has to read over a wall of bright daytime sky as well as over the night shot — so its disc is dark and its icon and rim are white, which is the minimum treatment that works over either image. Measured on the rendered page: the white glyph on this disc came out at 9.8:1 at its worst, on a short viewport where the chevron lands over the bright sky, and around 19:1 where it normally sits. */ --hero-fg: #ffffff; --hero-control-bg: rgba(0, 0, 0, 0.5); --hero-control-border: rgba(255, 255, 255, 0.55); /* --------------------------------------------------------------------- THE MAP The pre-rendered US map is a plain inline with no presentation attributes at all — every fill and stroke on it resolves through one of these, so it re-themes with the rest of the site. --------------------------------------------------------------------- */ --map-state-fill: #e2e8f0; /* states with no presence */ --map-state-stroke: #94a3b8; --map-market-fill: var(--color-gold-wash); --map-market-stroke: #c98a12; --map-marker-fill: var(--color-gold-deep); --map-marker-ring: var(--color-surface); --map-marker-halo: rgba(138, 83, 0, 0.22); --map-inset-fill: var(--color-surface); --map-label-fg: var(--color-heading); --map-label-halo: var(--color-surface); --map-label-size: 13px; /* --------------------------------------------------------------------- ELEVATION — the three shadows, exactly as the old tailwind.config.js defined them. --------------------------------------------------------------------- */ --shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03); --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04); --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-menu: 0 4px 20px rgba(0, 0, 0, 0.15); /* --------------------------------------------------------------------- LAYOUT RHYTHM --------------------------------------------------------------------- */ --container-max: 80rem; /* 1280px — was max-w-7xl */ --measure: 42rem; /* comfortable line length for prose */ --section-padding-y: 5rem; /* 80px — was py-20 */ --grid-gap: 2rem; /* 32px — was gap-8 */ /* Responsive gutters. The media queries that step these up live at the bottom of this file; call sites only ever read --gutter. */ --gutter: 1.5rem; /* 24px — was px-6 */ --gutter-sm: 2rem; /* 32px — was sm:px-8 (>= 640px) */ --gutter-lg: 3rem; /* 48px — was lg:px-12 (>= 1024px) */ --breakpoint-sm: 640px; --breakpoint-md: 768px; /* the mobile nav breakpoint */ --breakpoint-lg: 1024px; /* --------------------------------------------------------------------- THE CARD PATTERN One consistent surface treatment across the whole site. --------------------------------------------------------------------- */ --card-radius: 0.75rem; /* rounded-xl */ --card-padding: 2.5rem; /* p-10 */ --card-border-width: 1px; --card-border: var(--card-border-width) solid var(--color-border); --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-card-hover); --card-transition: all var(--duration-slow) var(--ease-smooth); /* Other radii in use */ --radius-sm: 0.25rem; --radius-md: 0.5rem; /* rounded-lg — buttons */ --radius-lg: 0.75rem; --radius-full: 9999px; /* --------------------------------------------------------------------- MOTION --duration-slow + --ease-smooth together are the old `transition-smooth` utility (transition-all duration-300 ease-in-out). --------------------------------------------------------------------- */ --duration-fast: 0.2s; --duration-slow: 0.3s; --ease-smooth: ease-in-out; --ease-out: ease-out; /* --------------------------------------------------------------------- TYPOGRAPHY --------------------------------------------------------------------- */ --font-wordmark: 'Cinzel', 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Mobile-first, stepped up at 480px and again at 768px by the queries near the bottom of this file. The wordmark is 21 letterspaced characters and has to sit between the hamburger and the theme toggle at 360px, so the base size is set by that constraint, not by taste. */ --wordmark-tracking: 0.08em; /* 0.14em >= 480px, 0.25em >= 768px */ --wordmark-size: 0.6875rem;/* 0.75rem >= 480px, 1.25rem >= 768px */ --wordmark-weight: 400; --wordmark-mark: 28px; /* 32px >= 480px, 40px >= 768px */ --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* Fluid display sizes, so the hero and page headings hold from 360px to 1440px without a stack of breakpoints. */ --text-hero: clamp(2rem, 1.15rem + 3.8vw, 3.5rem); --text-section: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem); --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.625; --tracking-tight: -0.025em; --tracking-wide: 0.05em; /* --------------------------------------------------------------------- FOCUS Built in deliberately. The old project destroyed focus rings across whole subtrees with !important; none of that came across. These tokens exist so that every interactive element gets a visible, consistent ring. NEVER set `outline: none` without providing an equally visible replacement in the same rule. --------------------------------------------------------------------- */ --focus-ring-width: 3px; --focus-ring-offset: 2px; /* Deep gold on light surfaces: the identity gold is only 2.0:1 against white and would give an invisible ring. */ --focus-ring-color: var(--color-gold-deep); /* On the dark header and over the hero photograph the deep gold vanishes, so controls there use the bright identity gold instead. */ --focus-ring-color-on-dark: var(--color-gold); /* --------------------------------------------------------------------- DISABLED One button on the whole site is ever disabled: Send, while the contact form is waiting for the handler. This is how it reads as unavailable. Dimming only — the colour does not change, so no second hue appears. --------------------------------------------------------------------- */ --disabled-opacity: 0.55; } /* ========================================================================== DARK THEME Applied by the theme toggle, which sets data-theme="dark" on . Only the values that actually differ are redefined. ========================================================================== */ :root[data-theme='dark'] { --color-bg: #020617; /* slate-950 */ --color-surface: #0f172a; /* slate-900 */ --color-surface-raised: #1e293b; /* slate-800 — cards sit above surface */ --color-heading: #ffffff; /* white */ --color-body: #94a3b8; /* slate-400 */ --color-muted: #64748b; /* slate-500 — unchanged, reads in both */ --color-border: #334155; /* slate-700 */ --color-gold-subtle: rgba(245, 166, 35, 0.14); --color-gold-wash: rgba(245, 166, 35, 0.34); --color-link: var(--color-gold); --color-link-hover: var(--color-gold-hover); --map-state-fill: #1e293b; --map-state-stroke: #475569; --map-market-stroke: var(--color-gold); --map-marker-fill: var(--color-gold); --map-marker-halo: rgba(245, 166, 35, 0.28); --header-bg: rgba(0, 0, 0, 0.3); /* lighter over night hero */ --color-hero-backdrop: #0d0d0d; --shadow-menu: 0 4px 20px rgba(0, 0, 0, 0.4); --focus-ring-color: var(--color-gold); } /* The OS preference is deliberately NOT honoured anywhere on this site. The theme is whatever data-theme on says, and with nothing stored the inline boot script writes 'light'. Nothing may key off prefers-color-scheme for theming: a rule that did would contradict that light default on an OS set to dark. */ /* ========================================================================== RESPONSIVE STEPS Call sites use var(--gutter) / var(--wordmark-size); these queries step them up. Nothing else in the codebase does breakpoint arithmetic on them. ========================================================================== */ @media (min-width: 480px) { :root { --wordmark-size: 0.75rem; --wordmark-tracking: 0.14em; --wordmark-mark: 32px; } } @media (min-width: 640px) { :root { --gutter: var(--gutter-sm); } } @media (min-width: 768px) { :root { --wordmark-size: 1.25rem; --wordmark-tracking: 0.25em; --wordmark-mark: 40px; } } @media (min-width: 1024px) { :root { --gutter: var(--gutter-lg); } } /* ========================================================================== BASELINE FOCUS STATE A visible ring for every focusable element, everywhere, by default. ========================================================================== */ :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } /* Anything sitting on the dark translucent header — or on the hero photograph — switches to the bright gold ring so it stays visible against the image behind it. */ .site-header :focus-visible, .hero :focus-visible { outline-color: var(--focus-ring-color-on-dark); } /* ========================================================================== MOTION PREFERENCE ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0.01ms; --duration-slow: 0.01ms; } }