@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&family=Cormorant+Garamond:wght@400;500&family=Space+Mono:wght@400;700&display=swap"); /* Smooth cross-page navigation (index → category → product → back) instead of a hard cut on every link click. Native browser feature, zero JS: supporting browsers (Chrome/Edge) cross-fade between full page loads automatically; everywhere else this rule is simply ignored and navigation works as before. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } :root { /* Brand accent — overridden inline on from js/config.js at load time */ --accent-r: 200; --accent-g: 162; --accent-b: 65; --accent-deep-r: 138; --accent-deep-g: 111; --accent-deep-b: 40; --accent-light-r: 214; --accent-light-g: 185; --accent-light-b: 113; /* Readable text color for content sitting on top of bg-accent / bg-accent-deep — recomputed in js/theme-init.js from the configured accent so it stays legible whether the accent ends up light or dark. */ --on-accent: #1e2a22; --on-accent-deep: #1e2a22; /* Accent-colored text sitting on the page background (eyebrow labels, nav hover, the hero gradient word) — recomputed in js/color-utils.js (applyAccentTheme) so it stays readable against --bg even if the configured accent is close in tone to the page background. */ --accent-text-r: 46; --accent-text-g: 74; --accent-text-b: 61; --accent-text-light-r: 127; --accent-text-light-g: 174; --accent-text-light-b: 140; /* Gold accent — VIYO Premium Hospitality Color System's secondary accent. Fixed (not derived from the configured brand accent): used specifically for focus rings and for labels sitting on dark/near-black bands (see .band-black in css/viyo-theme.css), matching the color handoff. */ --gold-r: 201; --gold-g: 166; --gold-b: 96; /* Light theme tokens — from the VIYO Premium Hospitality Color System (design_handoff_viyo_homepage/README.md): warm cream backgrounds, charcoal-green text. */ --bg: #fffde9; --bg-elevated: #ffffff; --text-primary: #1e2a22; --text-secondary: #6b7268; --glass-bg: rgba(255, 255, 255, 0.55); --glass-border: rgba(255, 255, 255, 0.45); --glass-shadow: rgba(30, 42, 34, 0.08); --grain-opacity: 0.03; /* Plain content dividers (list separators, menu rules) sitting directly on page/panel backgrounds — unlike --glass-border, this needs to actually show up against a light surface, not just add a frosted-glass edge. */ --divider: #ece7da; } [data-theme="dark"] { /* A uniform +7% lightness lift over the handoff's literal dark tokens — the literal values read as near-black; this keeps the same hues and relative contrast steps between every dark surface, just softer. A further +4.5% on top (same hue/sat) per a follow-up "make dark mode a little lighter" request. */ --bg: #313e37; --bg-elevated: #3d4c42; --text-primary: #f5f1e8; --text-secondary: #8f998f; --glass-bg: rgba(46, 57, 51, 0.55); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: rgba(0, 0, 0, 0.35); --grain-opacity: 0.05; --divider: #46574b; --gold-r: 224; --gold-g: 188; --gold-b: 122; } * { scrollbar-color: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.5) transparent; } html { scroll-behavior: smooth; background: var(--bg); /* clip, not hidden — hidden on one axis forces the other axis's computed overflow to auto, which silently breaks position:sticky (the header) for every descendant. clip suppresses horizontal bleed without that side effect. */ overflow-x: clip; } [x-cloak] { display: none !important; } /* Remove Chrome / WebKit / Safari / Edge native search input cancel (cross) icons */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none !important; appearance: none !important; display: none !important; margin: 0 !important; } input[type="search"]::-ms-clear, input[type="search"]::-ms-reveal { display: none !important; width: 0 !important; height: 0 !important; } input[type="search"] { caret-color: #1e2a22 !important; } /* Casual-user deterrent against saving images — pairs with js/image-protect.js which blocks the right-click/drag events; this stops the drag ghost and selection highlight. Not real protection (see that file's comment). */ img { -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { background: var(--bg); color: var(--text-primary); transition: background-color 0.4s ease, color 0.4s ease; font-family: "Inter", sans-serif; /* clip, not hidden — hidden on one axis forces the other axis's computed overflow to auto, which silently breaks position:sticky (the header) for every descendant. clip suppresses horizontal bleed without that side effect. */ overflow-x: clip; } .font-display { font-family: "Fraunces", serif; } .font-body { font-family: "Inter", sans-serif; } .font-label { font-family: "Space Grotesk", sans-serif; } /* Signature element: frosted glass panel with an ambient champagne glow drifting behind it — chandelier light through frosted glass. */ .glass-panel { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 8px 32px var(--glass-shadow); isolation: isolate; overflow: hidden; } .glass-panel::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: radial-gradient( circle at 30% 20%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.35), transparent 60% ); filter: blur(40px); opacity: 0.5; animation: drift 14s ease-in-out infinite alternate; pointer-events: none; } @keyframes drift { 0% { transform: translate(-5%, -5%) scale(1); } 100% { transform: translate(5%, 8%) scale(1.15); } } /* Nav "Our Products" mega dropdown — opaque (unlike .glass-panel) since it can float over the hero photo and needs to stay legible regardless of what's behind it, but now follows the site's light/dark theme tokens instead of being hardcoded dark in both: light theme gets a light panel. Re-declares --text-primary/--text-secondary itself instead of just inheriting them — the header's pre-scroll .header-overlay state redeclares those same tokens to a pale cream so its own text stays legible over the hero photo, and since this dropdown lives inside the header, it was inheriting that pale cream too even though its own panel is always solid white/dark, never the photo — nearly invisible text on a white panel while the header hadn't scrolled yet. */ .nav-dropdown { --text-primary: #1e2a22; --text-secondary: #6b7268; background: var(--bg-elevated); border: 1px solid var(--divider); } [data-theme="dark"] .nav-dropdown { --text-primary: #f5f1e8; --text-secondary: #8f998f; } /* Long category lists (14+ items) can run out of room below the pill, especially on shorter viewports — scrolls internally instead of spilling past the bottom of the screen with no way to reach the rest. */ .nav-dropdown::-webkit-scrollbar { width: 6px; } .nav-dropdown::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 999px; } .nav-dropdown .nav-dropdown-heading { color: var(--text-primary); } .nav-dropdown .nav-dropdown-link { color: var(--text-secondary); display: block; padding: 0.4rem 0; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.15s ease, color 0.15s ease; } .nav-dropdown .nav-dropdown-link:hover { color: rgb(var(--accent-text-r) var(--accent-text-g) var(--accent-text-b)); text-decoration-color: rgb(var(--accent-text-r) var(--accent-text-g) var(--accent-text-b)); } /* Slow push-in on the active banner slide — restarts each time a slide becomes active again (class re-added), giving the carousel a cinematic, editorial feel instead of a static cut between slides. */ @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } } .animate-kenburns { animation: kenburns 6.5s ease-out forwards; } @media (prefers-reduced-motion: reduce) { .animate-kenburns { animation: none; } } .text-gradient-accent { background: linear-gradient( 100deg, rgb(var(--accent-text-light-r) var(--accent-text-light-g) var(--accent-text-light-b)), rgb(var(--accent-text-r) var(--accent-text-g) var(--accent-text-b)) ); -webkit-background-clip: text; background-clip: text; color: transparent; } .shadow-glass { box-shadow: 0 8px 32px var(--glass-shadow); } /* Category page product cards: a neutral depth lift on hover instead of .shadow-glow's accent-tinted halo, per the category redesign's brief to use the brand green more sparingly. */ .product-card { box-shadow: 0 6px 24px var(--glass-shadow); } .product-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px var(--glass-shadow); } .shadow-glow { box-shadow: 0 0 60px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.25); } .bg-accent { background-color: rgb(var(--accent-r) var(--accent-g) var(--accent-b)); } .bg-accent-deep:hover, .hover\:bg-accent-deep:hover { background-color: rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b)); } .text-accent { color: rgb(var(--accent-text-r) var(--accent-text-g) var(--accent-text-b)); } .text-on-accent { color: var(--on-accent); } .text-on-accent.hover\:bg-accent-deep:hover, .text-on-accent.bg-accent-deep:hover { color: var(--on-accent-deep); } .hover\:text-accent:hover { color: rgb(var(--accent-text-r) var(--accent-text-g) var(--accent-text-b)); } .border-accent { border-color: rgb(var(--accent-r) var(--accent-g) var(--accent-b)); } .hover\:border-accent:hover { border-color: rgb(var(--accent-r) var(--accent-g) var(--accent-b)); } .focus\:border-accent:focus { border-color: rgb(var(--accent-r) var(--accent-g) var(--accent-b)); } .border-glass-border { border-color: var(--glass-border); } .border-divider { border-color: var(--divider); } .bg-bg { background-color: var(--bg); } .bg-bg-elevated { background-color: var(--bg-elevated); } .text-ink { color: var(--text-primary); } .text-muted { color: var(--text-secondary); } .bg-accent\/10 { background-color: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.1); } .bg-accent\/15 { background-color: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.15); } .bg-accent\/25 { background-color: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.25); } .text-accent\/30 { color: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.3); } .text-accent\/40 { color: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.4); } /* Focus visibility, kept even under the glass aesthetic — gold, not the brand green, per the color handoff's "2px solid #C9A660 (gold) focus ring" spec (--gold-r/g/b brightens automatically in dark mode). */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid rgb(var(--gold-r) var(--gold-g) var(--gold-b)); outline-offset: 2px; border-radius: 4px; } /* Scroll-reveal: paired with the IntersectionObserver in js/app.js */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal-delay="1"] { transition-delay: 0.08s; } [data-reveal-delay="2"] { transition-delay: 0.16s; } [data-reveal-delay="3"] { transition-delay: 0.24s; } /* Animated underline sweep for header nav links — grows in from the left on hover/focus instead of the plain color swap alone. */ .nav-link { position: relative; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1.5px; border-radius: 1px; background: rgb(var(--accent-r) var(--accent-g) var(--accent-b)); transform: scaleX(0); transform-origin: right; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); transform-origin: left; } .nav-link:focus-visible { color: rgb(var(--accent-text-r) var(--accent-text-g) var(--accent-text-b)); } /* Infinite logo/wordmark marquee — duplicated track scrolls left forever, pauses on hover so it's actually readable when a visitor cares to look. */ @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { animation: marquee-scroll 55s linear infinite; } .marquee-viewport:hover .marquee-track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* Subtle film grain texture on elevated surfaces */ .grain { position: relative; } .grain::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: var(--grain-opacity); pointer-events: none; mix-blend-mode: overlay; border-radius: inherit; }