/* ============================================ GAMMA SPACE — CSS Brand: Orange #FF6633, Warm gradients, Soft forms ============================================ */ /* --- Custom Properties --- */ :root { color-scheme: light dark; /* Brand base (do not touch — these are the bedrock) */ --orange-base: #FF6633; --orange-light: #FF8855; --orange-dark: #E85520; --orange-text: #C84A1F; /* WCAG AA-compliant orange for body text on cream */ --coral: #FF7B6B; --peach: #FFB088; --gold: #F5C16C; --bg-base: #FAFAF8; --bg-dark: #1A1816; --text: #1A1816; --text-light: #6B6660; /* WCAG AA on #FAFAF8 (4.6:1) */ --text-muted: #5F5A55; --grey: #E8E4E0; --grey-dark: #2A2825; --silver: #C8C4C0; --warm-white: #F5F0EB; --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --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: cubic-bezier(0.65, 0, 0.35, 1); /* Time-aware vars (default = day). Override via .time-sunrise / .time-sunset / .time-night classes on . Only 5 elements are affected: hero orb1, hero orb2, loyalty blob center, --orange accent, --bg tint. */ --orange: var(--orange-base); --bg: var(--bg-base); --hero-orb-1: #FFB347; --hero-orb-2: #FF6633; --hero-orb-3: #FF4466; --hero-orb-sec-1: #F5C16C; --hero-orb-sec-2: #FF8855; --loyalty-blob-core: rgba(255, 145, 70, 0.92); --loyalty-blob-edge: rgba(255, 110, 60, 0.5); } /* ---- Time-of-day subtle accents (only when NOT in night-mode) ---- */ html.time-sunrise:not(.night-mode) { --orange: #FF7755; --bg: #FDF7F5; --hero-orb-1: #FFD4C4; --hero-orb-2: #FF8B77; --hero-orb-3: #FF6088; --hero-orb-sec-1: #FFCDB4; --hero-orb-sec-2: #FF9976; --loyalty-blob-core: rgba(255, 139, 119, 0.88); --loyalty-blob-edge: rgba(255, 96, 136, 0.42); } html.time-sunset:not(.night-mode) { --orange: #E6501D; --bg: #FCF4ED; --hero-orb-1: #FFB020; --hero-orb-2: #FF5520; --hero-orb-3: #E6401D; --hero-orb-sec-1: #F5B84C; --hero-orb-sec-2: #FF6A30; --loyalty-blob-core: rgba(255, 105, 45, 0.92); --loyalty-blob-edge: rgba(230, 64, 29, 0.5); } html.time-night:not(.night-mode) { --orange: var(--orange-base); --bg: var(--bg-base); --hero-orb-1: #FFA866; --hero-orb-2: #FF6633; --hero-orb-3: #FF5566; --hero-orb-sec-1: #F0B575; --hero-orb-sec-2: #FF7555; --loyalty-blob-core: rgba(255, 120, 80, 0.86); --loyalty-blob-edge: rgba(255, 96, 76, 0.48); } /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Skip to main content — keyboard accessibility (visible only when focused) */ .skip-to-main { position: absolute; top: -100px; left: 16px; background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: 8px; text-decoration: none; z-index: 10000; font-family: var(--font-primary); font-size: 13px; font-weight: 500; transition: top 0.3s ease; } .skip-to-main:focus { top: 16px; outline: 2px solid var(--orange); outline-offset: 2px; } /* Visually hidden — invisible to sighted users, but read by screen readers and crawled by search engines. Used for h1 text behind the logo image. */ .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; } /* Hero h1 — reset default h1 margin/font so it doesn't break hero layout */ h1.hero-logo-wrap { font-size: inherit; font-weight: inherit; margin: 0 0 28px; } /* Respect user preference for reduced motion (accessibility + SEO signal) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .cursor-glow, .loyalty-card-glow, .hero-gradient-orb, .hero-gradient-orb--secondary { animation: none !important; } } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Skip rendering off-screen sections; reserved size keeps scroll stable. */ .section { content-visibility: auto; contain-intrinsic-size: auto 800px; } /* Modern typography: balanced line breaks on headings, prettier last lines on prose. */ h1, h2, h3, .hero-tagline { text-wrap: balance; } p, .hero-status-text, .menu-item-desc { text-wrap: pretty; } /* Lenis smooth scroll — when active, Lenis controls scroll position directly, so native scroll-behavior should be off to avoid fighting. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } .lenis.lenis-smooth iframe { pointer-events: none; } /* View transitions: @view-transition rule, ::view-transition-old/new timings, gsVTOut/gsVTIn keyframes, and the reduced-motion override are all inlined via critical.css so they apply on first paint of every page. */ body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; transition: background-color 6s var(--ease-out-expo); } ::selection { background: var(--orange); color: white; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* --- Cursor Glow --- */ :root { --cursor-color: 255, 102, 51; --cursor-intensity: 0.06; --cursor-size: 600px; } .cursor-glow { position: fixed; top: 0; left: 0; width: var(--cursor-size); height: var(--cursor-size); margin-top: calc(var(--cursor-size) / -2); margin-left: calc(var(--cursor-size) / -2); border-radius: 50%; background: radial-gradient(circle, rgba(var(--cursor-color), var(--cursor-intensity)) 0%, transparent 70%); pointer-events: none; z-index: 9999; transition: opacity 0.3s, background 1.2s var(--ease-out-expo), width 0.8s var(--ease-out-expo), height 0.8s var(--ease-out-expo); opacity: 0; will-change: transform, background; } body:hover .cursor-glow { opacity: 1; } /* Section-specific cursor colors */ body.cursor-in-hero { --cursor-color: 255, 132, 80; --cursor-intensity: 0.07; --cursor-size: 700px; } body.cursor-in-philosophy { --cursor-color: 200, 150, 100; --cursor-intensity: 0.05; --cursor-size: 600px; } body.cursor-in-space { --cursor-color: 180, 130, 80; --cursor-intensity: 0.05; --cursor-size: 600px; } body.cursor-in-menu { --cursor-color: 220, 170, 90; --cursor-intensity: 0.05; --cursor-size: 550px; } body.cursor-in-bar { --cursor-color: 100, 160, 220; --cursor-intensity: 0.06; --cursor-size: 600px; } body.cursor-in-loyalty { --cursor-color: 255, 180, 90; --cursor-intensity: 0.08; --cursor-size: 720px; } body.cursor-in-contact { --cursor-color: 255, 130, 70; --cursor-intensity: 0.07; --cursor-size: 650px; } /* ============================================ SCROLL PROGRESS BAR (top) ============================================ */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--orange) 0%, var(--gold) 100%); z-index: 1100; pointer-events: none; transition: width 0.1s linear; box-shadow: 0 0 10px rgba(255, 102, 51, 0.5); } /* ============================================ SCROLL RAIL — magnetic section indicator ============================================ */ .scroll-rail { position: fixed; top: 50%; right: 32px; transform: translateY(-50%); z-index: 9000; /* Explicit height so the track + hidden items render at a fixed size */ height: calc(var(--rail-item-h) * var(--rail-count)); display: flex; align-items: stretch; gap: 0; pointer-events: none; --rail-item-h: 30px; --rail-count: 6; } /* The list and its items stay in the DOM at a fixed layout size so JS can read their Y positions to snap the indicator. Everything visible is hidden via `visibility: hidden` on the labels — the geometry still exists. */ .scroll-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0; pointer-events: none; height: 100%; width: 2px; } .scroll-rail-list li { height: var(--rail-item-h); display: block; width: 2px; } .scroll-rail-item { position: relative; display: block; width: 2px; height: 100%; text-decoration: none; color: transparent; pointer-events: none; cursor: default; } .scroll-rail-name, .scroll-rail-num { display: none; } /* Vertical track to the right of the labels */ .scroll-rail-track { position: relative; width: 2px; background: rgba(26, 24, 22, 0.1); border-radius: 2px; margin: 4px 0; pointer-events: none; } /* Thin line indicator — rubber-band effect. As the user scrolls through a section, the indicator stretches from its current item toward the next item (or previous, if scrolling up). When the active section changes, the trailing edge "magnetizes" to the new item and the indicator collapses back to its resting length. */ .scroll-rail-indicator { position: absolute; top: 0; left: 0; width: 100%; height: 28px; background: linear-gradient(180deg, rgba(255, 102, 51, 0) 0%, var(--orange) 18%, var(--orange) 82%, rgba(255, 102, 51, 0) 100%); border-radius: 1px; transition: top 0.55s cubic-bezier(0.22, 1, 0.36, 1), height 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; will-change: top, height; pointer-events: none; opacity: 0; transform-origin: top center; } .scroll-rail-indicator.is-visible { opacity: 1; } /* Hide on small mobile only */ @media (max-width: 720px) { .scroll-rail { display: none; } } /* Night mode — scroll rail */ .night-mode .scroll-progress { box-shadow: 0 0 14px rgba(255, 102, 51, 0.7); } .night-mode .scroll-rail-track { background: rgba(255, 255, 255, 0.12); } .night-mode .scroll-rail-item { color: rgba(255, 255, 255, 0.4); } .night-mode .scroll-rail-item:hover { color: rgba(255, 255, 255, 0.85); } .night-mode .scroll-rail-item.is-active { color: var(--orange-light); } .night-mode .scroll-rail-indicator { background: linear-gradient(180deg, rgba(255, 136, 85, 0) 0%, var(--orange-light, #FF8855) 22%, var(--orange-light, #FF8855) 78%, rgba(255, 136, 85, 0) 100%); } /* --- Container --- */ .container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 80px); } /* --- Navigation --- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 24px clamp(24px, 5vw, 80px); transition: all 0.6s var(--ease-out-expo); } .nav.scrolled { padding-top: 16px; padding-bottom: 16px; background: rgba(250, 250, 248, 0.85); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .nav-logo { position: relative; z-index: 1001; display: flex; align-items: center; } .nav-logo-img { height: 18px; width: auto; transition: opacity 0.3s, filter 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); } .nav-logo-img--light { position: absolute; left: 0; top: 0; opacity: 0; } .nav-logo::after { content: ''; position: absolute; inset: 0; background: var(--orange); -webkit-mask: url('assets/wave-white.png') no-repeat center / contain; mask: url('assets/wave-white.png') no-repeat center / contain; opacity: 0; transform: scale(1); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); pointer-events: none; } .nav-logo:hover::after { opacity: 1; transform: scale(1.08); } .nav-logo:hover .nav-logo-img { opacity: 0 !important; transform: scale(1.08); } .night-mode .nav.at-hero .nav-logo-img--dark { opacity: 0; } .night-mode .nav.at-hero .nav-logo-img--light { opacity: 1; } /* Language buttons (used inside .lang-dropdown-menu) */ .lang-btn { background: none; border: none; font-family: var(--font-primary); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all 0.3s; } .lang-btn.active { color: var(--orange-text); background: rgba(255, 102, 51, 0.08); } .lang-btn:hover { color: var(--text); } .night-mode .nav.at-hero .lang-btn { color: rgba(255, 255, 255, 0.5); } .night-mode .nav.at-hero .lang-btn.active { color: white; background: rgba(255, 255, 255, 0.15); } .night-mode .nav.at-hero .lang-btn:hover { color: white; } .night-mode .lang-btn { color: rgba(255, 255, 255, 0.4); } .night-mode .lang-btn.active { color: var(--orange-text); background: rgba(255, 102, 51, 0.12); } .night-mode .lang-btn:hover { color: #E8E4E0; } /* Theme Toggle */ .theme-toggle { background: none; border: none; cursor: pointer; padding: 6px; margin-left: 12px; border-left: 1px solid rgba(0, 0, 0, 0.1); padding-left: 16px; position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: background 0.3s; } .theme-toggle:hover { background: rgba(255, 102, 51, 0.08); } .theme-toggle--mobile { border-left: none; margin-left: 0; padding-left: 6px; } .theme-icon { width: 18px; height: 18px; position: absolute; color: var(--text-light); transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo); stroke-linecap: round; stroke-linejoin: round; } .theme-icon--sun { opacity: 1; transform: rotate(0deg) scale(1); } .theme-icon--moon { opacity: 0; transform: rotate(-90deg) scale(0.6); } /* Night mode: show moon, hide sun */ .night-mode .theme-icon--sun { opacity: 0; transform: rotate(90deg) scale(0.6); } .night-mode .theme-icon--moon { opacity: 1; transform: rotate(0deg) scale(1); } /* Hero state */ .night-mode .nav.at-hero .theme-icon { color: rgba(255, 255, 255, 0.7); } .night-mode .nav.at-hero .theme-toggle { border-left-color: rgba(255, 255, 255, 0.2); } .night-mode .nav.at-hero .theme-toggle:hover { background: rgba(255, 255, 255, 0.1); } /* Night mode state */ .night-mode .theme-icon { color: rgba(255, 255, 255, 0.5); } .night-mode .theme-toggle { border-left-color: rgba(255, 255, 255, 0.1); } .night-mode .theme-toggle:hover { background: rgba(255, 102, 51, 0.1); } /* Nav right group (lang + theme + hamburger) — visible at all sizes */ .nav-right-mobile { display: flex; align-items: center; gap: 12px; } /* Language dropdown */ .lang-dropdown { position: relative; } .lang-dropdown-toggle { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 6px 10px; border-radius: 8px; font-family: var(--font-primary); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; color: var(--text); transition: background 0.3s, color 0.3s; } .lang-dropdown-toggle:hover { background: rgba(255, 102, 51, 0.08); } .lang-current { line-height: 1; } .lang-chevron { width: 10px; height: 7px; transition: transform 0.3s var(--ease-out-expo); color: var(--text-muted); } .lang-dropdown.is-open .lang-chevron { transform: rotate(180deg); } .lang-dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 80px; background: var(--bg); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 12px 32px -12px rgba(26, 24, 22, 0.18); opacity: 0; transform: translateY(-6px); pointer-events: none; z-index: 1002; /* Modern CSS 2026: transition opacity/transform AND discrete properties (pointer-events) so the whole state change is declarative. */ transition: opacity 0.28s var(--ease-out-expo), transform 0.28s var(--ease-out-expo), pointer-events 0.28s allow-discrete; } .lang-dropdown.is-open .lang-dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .lang-dropdown-menu .lang-btn { width: 100%; text-align: left; padding: 8px 12px; border-radius: 8px; } .night-mode .lang-dropdown-toggle { color: #E8E4E0; } .night-mode .lang-dropdown-toggle:hover { background: rgba(255, 255, 255, 0.06); } .night-mode .lang-chevron { color: rgba(255, 255, 255, 0.5); } .night-mode .lang-dropdown-menu { background: #25221F; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.5); } .night-mode .nav.at-hero .lang-dropdown-toggle { color: rgba(255, 255, 255, 0.85); } .night-mode .nav.at-hero .lang-chevron { color: rgba(255, 255, 255, 0.5); } /* Georgian font override — applied via both `html[lang="ka"]` (zero-FOUC, takes effect immediately on HTML parse) and `.lang-ka` (backwards-compat for i18n.js runtime language switches without a full reload). */ html[lang="ka"] body, .lang-ka { font-family: 'Noto Sans Georgian', 'Inter', sans-serif; } html[lang="ka"] .philosophy-text, html[lang="ka"] .space-subtitle, html[lang="ka"] .menu-subtitle, html[lang="ka"] .bar-subtitle, html[lang="ka"] .value-card p, html[lang="ka"] .gallery-card p, html[lang="ka"] .bar-card p, html[lang="ka"] .menu-item-desc, html[lang="ka"] .contact-block p, .lang-ka .philosophy-text, .lang-ka .space-subtitle, .lang-ka .menu-subtitle, .lang-ka .bar-subtitle, .lang-ka .value-card p, .lang-ka .gallery-card p, .lang-ka .bar-card p, .lang-ka .menu-item-desc, .lang-ka .contact-block p { font-size: 103%; letter-spacing: 0.005em; } html[lang="ka"] .philosophy-heading, html[lang="ka"] .space-heading, html[lang="ka"] .menu-heading, html[lang="ka"] .bar-heading, html[lang="ka"] .contact-heading, html[lang="ka"] .mobile-link, html[lang="ka"] .value-card h3, html[lang="ka"] .menu-category-header h3, html[lang="ka"] .bar-card h3, .lang-ka .philosophy-heading, .lang-ka .space-heading, .lang-ka .menu-heading, .lang-ka .bar-heading, .lang-ka .contact-heading, .lang-ka .mobile-link, .lang-ka .value-card h3, .lang-ka .menu-category-header h3, .lang-ka .bar-card h3 { font-family: 'Noto Sans Georgian', var(--font-primary), sans-serif; letter-spacing: -0.01em; } /* Hamburger menu button — visible at all sizes */ .nav-menu-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001; } .nav-menu-btn span { display: block; width: 24px; height: 1.5px; background: var(--text); transition: all 0.4s var(--ease-out-expo); } .night-mode .nav.at-hero .nav-menu-btn span { background: white; } .nav-menu-btn.active span { background: var(--text) !important; } .nav-menu-btn.active span:first-child { transform: rotate(45deg) translate(0, 3.75px); } .nav-menu-btn.active span:last-child { transform: rotate(-45deg) translate(0, -3.75px); } /* Mobile Menu */ .mobile-menu { position: fixed; inset: 0; z-index: 999; background: var(--bg); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease-out-expo), pointer-events 0.5s allow-discrete; } .mobile-menu.active { opacity: 1; pointer-events: all; } .mobile-menu-inner { text-align: center; } .mobile-link { display: block; font-family: var(--font-primary); font-size: clamp(36px, 8vw, 56px); font-weight: 500; padding: 12px 0; color: var(--text); transform: translateY(30px); opacity: 0; transition: transform 0.5s var(--ease-out-expo), opacity 0.5s var(--ease-out-expo), color 0.6s var(--ease-out-expo), letter-spacing 0.6s var(--ease-out-expo); } .mobile-menu.active .mobile-link { transform: translateY(0); opacity: 1; } .mobile-menu.active .mobile-link:nth-child(1) { transition-delay: 0.1s; } .mobile-menu.active .mobile-link:nth-child(2) { transition-delay: 0.15s; } .mobile-menu.active .mobile-link:nth-child(3) { transition-delay: 0.2s; } .mobile-menu.active .mobile-link:nth-child(4) { transition-delay: 0.25s; } .mobile-menu.active .mobile-link:nth-child(5) { transition-delay: 0.3s; } .mobile-link:hover { color: var(--orange-text); letter-spacing: 0.05em; } .mobile-menu-footer { margin-top: 48px; } .mobile-tagline { font-family: var(--font-body); font-size: 14px; color: var(--text-light); letter-spacing: 0.05em; } /* ============================================ HERO SECTION ============================================ */ .hero { position: relative; height: 100vh; min-height: 700px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg); transition: background-color 1.5s var(--ease-out-expo); } /* Bottom fade — smooth dissolve from the warm orb gradient into the page background so there's no hard horizontal line where the hero ends. z-index: 1 keeps it above the orbs (z-auto) but below hero-content (z-2). */ .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45vh; background: linear-gradient( to bottom, rgba(250, 250, 248, 0) 0%, rgba(250, 250, 248, 0.3) 40%, rgba(250, 250, 248, 0.7) 70%, rgba(250, 250, 248, 1) 100% ); pointer-events: none; z-index: 1; transition: background 1.5s var(--ease-out-expo); } .night-mode .hero { background: var(--bg-dark); } .night-mode .hero::after { background: linear-gradient( to bottom, rgba(26, 24, 22, 0) 0%, rgba(26, 24, 22, 0.35) 35%, rgba(26, 24, 22, 0.75) 65%, rgba(26, 24, 22, 1) 100% ); } /* Primary orb — very slow drift + breathing scale. Subtle enough that you don't notice it consciously, but the hero feels alive, not static. --hero-parallax-y is written by the scroll handler for parallax. */ .hero-gradient-orb { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; background: radial-gradient( ellipse at 40% 40%, var(--hero-orb-1) 0%, var(--hero-orb-2) 30%, var(--hero-orb-3) 60%, transparent 75% ); filter: blur(60px); opacity: 0.7; /* --hero-parallax-y is updated by JS on scroll; the orbDrift keyframes compose it via calc() into every transform sample. */ --hero-parallax-y: 0px; animation: orbDrift 22s ease-in-out infinite; will-change: transform; transition: opacity 1.5s var(--ease-out-expo), background 6s var(--ease-out-expo); } .night-mode .hero-gradient-orb { opacity: 0.7; } .hero-gradient-orb--secondary { width: 50vmax; height: 50vmax; background: radial-gradient( ellipse at 60% 60%, var(--hero-orb-sec-1) 0%, var(--hero-orb-sec-2) 40%, transparent 70% ); opacity: 0.5; --hero-parallax-y: 0px; animation: orbDrift2 27s ease-in-out infinite; animation-delay: -6s; will-change: transform; transition: opacity 1.5s var(--ease-out-expo), background 6s var(--ease-out-expo); } .night-mode .hero-gradient-orb--secondary { opacity: 0.4; } .hero-noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay; } /* Orb drift: H ±4%, V ±2%, scale 0.93–1.10. The calc() composes the scroll-driven --hero-parallax-y with the keyframe offset so JS scroll parallax and CSS idle drift can coexist on the same transform. */ @keyframes orbDrift { 0% { transform: translate3d(-3%, calc(var(--hero-parallax-y, 0px) + 2%), 0) scale(0.95); } 25% { transform: translate3d(4%, calc(var(--hero-parallax-y, 0px) - 1%), 0) scale(1.08); } 50% { transform: translate3d(-2%, calc(var(--hero-parallax-y, 0px) + 2%), 0) scale(0.94); } 75% { transform: translate3d(5%, calc(var(--hero-parallax-y, 0px) - 2%), 0) scale(1.10); } 100% { transform: translate3d(-3%, calc(var(--hero-parallax-y, 0px) + 2%), 0) scale(0.95); } } @keyframes orbDrift2 { 0% { transform: translate3d(4%, calc(var(--hero-parallax-y, 0px) - 1%), 0) scale(1.06); } 33% { transform: translate3d(-4%, calc(var(--hero-parallax-y, 0px) + 2%), 0) scale(0.93); } 66% { transform: translate3d(3%, calc(var(--hero-parallax-y, 0px) - 2%), 0) scale(1.11); } 100% { transform: translate3d(4%, calc(var(--hero-parallax-y, 0px) - 1%), 0) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .hero-gradient-orb, .hero-gradient-orb--secondary { animation: none !important; transform: translate3d(0, 0, 0) !important; } } .hero-content { position: relative; z-index: 2; text-align: center; color: #FFFFFF; transition: color 1.5s var(--ease-out-expo); } .night-mode .hero-content { color: white; } /* Hero logo: clip-path mask-reveal for left-to-right "drawing" effect on load. */ .hero-logo-wrap { margin-bottom: 28px; position: relative; opacity: 0; animation: logoFadeIn 0.4s var(--ease-out-expo) 0.15s forwards; } .hero-logo-img { width: clamp(300px, 42vw, 560px); height: auto; display: inline-block; clip-path: inset(0 100% 0 0); animation: logoMaskReveal 1.6s cubic-bezier(0.76, 0, 0.24, 1) 0.3s forwards; } .hero-logo-img--dark { display: none; } .hero-logo-img--light { display: inline-block; } @keyframes logoFadeIn { to { opacity: 1; } } @keyframes logoMaskReveal { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } } @media (prefers-reduced-motion: reduce) { .hero-logo-wrap { opacity: 1 !important; animation: none !important; } .hero-logo-img { clip-path: none !important; animation: none !important; } } .hero-tagline { font-family: var(--font-body); font-size: clamp(14px, 2vw, 20px); font-weight: 300; letter-spacing: 0.15em; opacity: 0; transform: translateY(20px); animation: fadeUp 1s var(--ease-out-expo) 0.8s forwards; } .hero-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.3); font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: #FFFFFF; opacity: 0; transform: translateY(20px); animation: fadeUp 1s var(--ease-out-expo) 1.2s forwards; } .hero-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #8A8580; box-shadow: 0 0 0 0 rgba(138, 133, 128, 0.3); flex-shrink: 0; transition: background 0.5s var(--ease-out-expo), box-shadow 0.5s; } .hero-status.is-open .hero-status-dot { background: #4CAF50; animation: statusPulse 2.4s ease-in-out infinite; } .hero-status.is-closed .hero-status-dot { background: #D04A3A; animation: statusPulseClosed 2.8s ease-in-out infinite; } @keyframes statusPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); } } @keyframes statusPulseClosed { 0%, 100% { box-shadow: 0 0 0 0 rgba(208, 74, 58, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(208, 74, 58, 0); } } .night-mode .hero-status { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 400; } .hero-wave { margin-top: 40px; opacity: 0; animation: fadeUp 1s var(--ease-out-expo) 1s forwards; } .wave-svg { width: 80px; height: auto; color: rgba(255, 255, 255, 0.9); } .night-mode .wave-svg { color: rgba(255, 255, 255, 0.6); } .wave-svg path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: drawWave 2s var(--ease-out-expo) 1.2s forwards; } @keyframes drawWave { to { stroke-dashoffset: 0; } } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } /* Scroll indicator */ .hero-scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2; opacity: 0; animation: fadeUp 1s var(--ease-out-expo) 1.5s forwards; } .scroll-line { width: 1px; height: 60px; background: rgba(26, 24, 22, 0.2); position: relative; overflow: hidden; } .night-mode .scroll-line { background: rgba(255, 255, 255, 0.2); box-shadow: none; } .scroll-line::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 40%; background: var(--text); animation: scrollDown 2s var(--ease-in-out) infinite; } .night-mode .scroll-line::after { background: white; box-shadow: none; } @keyframes scrollDown { 0% { top: -40%; } 100% { top: 100%; } } /* ============================================ SECTIONS COMMON ============================================ */ .section { padding: clamp(80px, 12vh, 160px) 0; position: relative; } .section-label { display: flex; align-items: center; gap: 16px; font-family: var(--font-primary); font-size: 13px; font-weight: 400; color: var(--text-light); letter-spacing: 0.05em; margin-bottom: 40px; text-transform: uppercase; } .label-line { width: 40px; height: 1px; background: var(--silver); } /* Splitting.js character reveal: each .char rises from translateY(110%) with a 28ms stagger. Scroll-driven via animation-timeline where supported; .is-visible class triggers the same animation as fallback. */ .gs-split { line-height: 1.05; /* avoid collapse from per-char inline-block layout */ } .gs-split .word { display: inline-block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; vertical-align: top; } .gs-split .char { display: inline-block; transform: translateY(110%) rotate(3deg); opacity: 0; transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--char-index, 0) * 28ms); } .gs-split.is-visible .char { transform: translateY(0) rotate(0); opacity: 1; } @supports (animation-timeline: view()) { .gs-split .char { transition: none; animation: gs-char-reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; animation-timeline: view(); animation-range: entry 0% entry 50%; animation-delay: calc(var(--char-index, 0) * 28ms); } } @keyframes gs-char-reveal { from { transform: translateY(110%) rotate(3deg); opacity: 0; } to { transform: translateY(0) rotate(0deg); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .gs-split .char { transform: none !important; opacity: 1 !important; animation: none !important; transition: none !important; } } /* .reveal-text — fade-and-rise on viewport entry. Uses native animation-timeline where supported; script.js falls back to a .revealed class via IntersectionObserver in older browsers. */ .reveal-text { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); } .reveal-text.revealed { opacity: 1; transform: translateY(0); } /* Native scroll-driven path — zero JS. When the browser supports animation-timeline, we drive the same visual from the viewport intersection instead of a class toggle. */ @supports (animation-timeline: view()) { .reveal-text { opacity: 0; transform: translateY(40px); transition: none; animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; } /* Once fully revealed, stay revealed even if user scrolls past */ .reveal-text.revealed { /* legacy class still wins if JS happens to add it — harmless */ opacity: 1; transform: translateY(0); } } @keyframes reveal-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .reveal-text { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ============================================ PHILOSOPHY SECTION ============================================ */ .philosophy-heading { font-family: var(--font-primary); font-size: clamp(40px, 7vw, 96px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 60px; color: var(--text); } .philosophy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 80px; } .philosophy-text p { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.7; color: var(--text-light); font-weight: 300; } /* Values */ .philosophy-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .value-card { padding: 40px; border-radius: 20px; background: var(--warm-white); border: 1px solid var(--grey); transition: all 0.5s var(--ease-out-expo); transition-delay: calc(var(--delay, 0) * 0.1s); } .value-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06); border-color: var(--orange-text); } .value-number { font-family: var(--font-primary); font-size: 13px; font-weight: 500; color: var(--orange-text); margin-bottom: 20px; } .value-card h3 { font-family: var(--font-primary); font-size: 24px; font-weight: 600; margin-bottom: 12px; } .value-card p { font-size: 15px; color: var(--text-light); line-height: 1.6; font-weight: 300; } /* ============================================ SPACE / INTERIOR SECTION ============================================ */ .space-section { background: var(--warm-white); overflow: hidden; } /* Marquee */ .space-marquee { overflow: hidden; padding: 20px 0; margin-bottom: 60px; border-top: 1px solid var(--grey); border-bottom: 1px solid var(--grey); } .marquee-track { display: flex; gap: 60px; animation: marquee 30s linear infinite; width: max-content; } .marquee-track span { font-family: var(--font-primary); font-size: clamp(14px, 2vw, 18px); font-weight: 500; letter-spacing: 0.3em; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .space-heading { font-family: var(--font-primary); font-size: clamp(36px, 6vw, 80px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 24px; } .space-subtitle { font-size: clamp(16px, 1.8vw, 20px); color: var(--text-light); max-width: 600px; line-height: 1.7; font-weight: 300; margin-bottom: 60px; } /* Gallery Grid */ .space-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 0 clamp(24px, 5vw, 80px); max-width: 1400px; margin: 0 auto; } .gallery-card { transition-delay: calc(var(--delay, 0) * 0.1s); } .gallery-card-visual { aspect-ratio: 3/4; border-radius: 16px; background: var(--gradient); position: relative; overflow: hidden; margin-bottom: 20px; transition: transform 0.7s var(--ease-out-expo), box-shadow 0.7s var(--ease-out-expo); display: flex; align-items: center; justify-content: center; will-change: transform; } .gallery-card:hover .gallery-card-visual { transform: scale(1.035); box-shadow: 0 30px 60px -25px rgba(26, 24, 22, 0.25); } .gallery-card-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.3) 100%); border-radius: inherit; } .gallery-card-icon { position: relative; z-index: 2; width: 60px; height: 60px; color: rgba(255, 255, 255, 0.8); transition: transform 0.5s var(--ease-out-expo); } .gallery-card:hover .gallery-card-icon { transform: scale(1.1); } .gallery-card h3 { font-family: var(--font-primary); font-size: 20px; font-weight: 600; margin-bottom: 8px; } .gallery-card p { font-size: 14px; color: var(--text-light); line-height: 1.5; } /* ============================================ BIG TEXT SECTION ============================================ */ .big-text-section { padding: clamp(60px, 10vh, 120px) 0; overflow: hidden; } .big-text-container { display: flex; align-items: baseline; gap: 30px; justify-content: center; flex-wrap: wrap; } .big-text { font-family: var(--font-primary); font-size: clamp(50px, 10vw, 160px); font-weight: 700; white-space: nowrap; color: var(--orange-text); line-height: 1; letter-spacing: -0.035em; } .big-text-outline { display: block; width: clamp(290px, 58vw, 920px); height: auto; overflow: visible; } .big-text-outline text { fill: var(--bg); stroke: var(--orange); stroke-width: 9; paint-order: stroke; } /* ============================================ MASCOT SECTION — "Emergence from Space" ============================================ */ .mascot-section { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); overflow: hidden; transition: background-color 1.5s var(--ease-out-expo); } .night-mode .mascot-section { background: var(--bg-dark); } .mascot-glow { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; background: radial-gradient( ellipse at 40% 40%, rgba(255, 179, 71, 0.22) 0%, rgba(255, 102, 51, 0.18) 25%, rgba(255, 68, 102, 0.10) 50%, transparent 70% ); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; animation: mascotOrbFloat 18s ease-in-out infinite, mascotGlowPulse 6s ease-in-out infinite; opacity: 0; transition: opacity 1.5s var(--ease-out-expo); filter: blur(30px); } .mascot-glow--secondary { width: 40vmax; height: 40vmax; background: radial-gradient( ellipse at 60% 60%, rgba(245, 193, 108, 0.18) 0%, rgba(255, 136, 85, 0.12) 30%, rgba(255, 102, 51, 0.06) 50%, transparent 65% ); animation: mascotOrbFloat2 22s ease-in-out infinite, mascotGlowPulse 8s ease-in-out infinite reverse; animation-delay: -4s; } .mascot-section.active .mascot-glow { opacity: 1; } @keyframes mascotGlowPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes mascotOrbFloat { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 25% { transform: translate(-45%, -55%) scale(1.08); } 50% { transform: translate(-55%, -48%) scale(0.95); } 75% { transform: translate(-48%, -52%) scale(1.05); } } @keyframes mascotOrbFloat2 { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 33% { transform: translate(-55%, -45%) scale(1.1); } 66% { transform: translate(-45%, -55%) scale(0.93); } } .mascot-container { position: relative; z-index: 2; text-align: center; } .mascot-figure { position: relative; display: inline-block; filter: blur(40px); opacity: 0; transition: filter 0.15s linear, opacity 0.15s linear; will-change: filter, opacity, transform; } .mascot-figure.revealed { animation: mascotFloat 5s ease-in-out infinite; } .mascot-img { width: clamp(180px, 22vw, 300px); height: auto; display: block; filter: drop-shadow(0 0 80px rgba(255, 102, 51, 0.35)); } @keyframes mascotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .mascot-text { font-family: var(--font-primary); font-size: clamp(16px, 2.5vw, 28px); font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0, 0, 0, 0); margin-top: 48px; transition: color 1s var(--ease-out-expo), letter-spacing 1.5s var(--ease-out-expo); } .mascot-text.visible { color: rgba(0, 0, 0, 0.5); letter-spacing: 0.3em; } .night-mode .mascot-text.visible { color: rgba(255, 255, 255, 0.7); } /* ============================================ MENU SECTION ============================================ */ .menu-heading { font-family: var(--font-primary); font-size: clamp(36px, 6vw, 80px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 24px; } .menu-subtitle { font-size: clamp(16px, 1.8vw, 20px); color: var(--text-light); max-width: 500px; line-height: 1.7; font-weight: 300; margin-bottom: 60px; } .menu-categories { margin-bottom: 40px; } .menu-category { border-bottom: 1px solid var(--grey); } .menu-category:first-child { border-top: 1px solid var(--grey); } .menu-category-header { display: flex; align-items: center; gap: 20px; padding: 28px 0; cursor: pointer; transition: color 0.3s; user-select: none; } .menu-category-header:hover { color: var(--orange-text); } .category-icon { width: 40px; height: 40px; flex-shrink: 0; } .category-icon svg { width: 100%; height: 100%; } /* Coffee steam animation */ .steam { opacity: 0; animation: steamRise 2.5s ease-in-out infinite; } .steam-1 { animation-delay: 0s; } .steam-2 { animation-delay: 0.5s; } .steam-3 { animation-delay: 1s; } @keyframes steamRise { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 0.7; } 70% { opacity: 0.3; transform: translateY(-5px); } 100% { opacity: 0; transform: translateY(-8px); } } /* Kitchen cloche animation */ .cloche-lid { animation: clocheLift 4s ease-in-out infinite; transform-origin: 20px 30px; } @keyframes clocheLift { 0%, 30% { transform: translateY(0); } 45%, 55% { transform: translateY(-5px); } 70%, 100% { transform: translateY(0); } } .cloche-steam { opacity: 0; animation: clocheReveal 4s ease-in-out infinite; } @keyframes clocheReveal { 0%, 35% { opacity: 0; transform: translateY(0); } 50% { opacity: 0.6; transform: translateY(-2px); } 65% { opacity: 0.3; transform: translateY(-5px); } 75%, 100% { opacity: 0; transform: translateY(-6px); } } /* Pastry candle flame animation — 3 candles, staggered */ .candle-flame { animation: flameFlicker 2s ease-in-out infinite; } .candle-flame-1 { transform-origin: 15px 15px; animation-delay: 0s; } .candle-flame-2 { transform-origin: 20px 12px; animation-delay: -0.6s; } .candle-flame-3 { transform-origin: 25px 15px; animation-delay: -1.2s; } @keyframes flameFlicker { 0%, 100% { transform: scaleY(1) scaleX(1); opacity: 0.4; } 25% { transform: scaleY(1.12) scaleX(0.88); opacity: 0.55; } 50% { transform: scaleY(0.92) scaleX(1.08); opacity: 0.35; } 75% { transform: scaleY(1.08) scaleX(0.92); opacity: 0.5; } } .menu-category-header h3 { font-family: var(--font-primary); font-size: clamp(24px, 3vw, 36px); font-weight: 600; flex: 1; } .category-toggle { font-family: var(--font-primary); font-size: 28px; font-weight: 300; color: var(--text-light); transition: transform 0.4s var(--ease-out-expo); width: 40px; text-align: center; } .menu-category.open .category-toggle { transform: rotate(45deg); } /* Menu Items */ .menu-items { max-height: 0; overflow: hidden; transition: max-height 0.55s var(--ease-out-expo), opacity 0.5s var(--ease-out-expo), -webkit-mask-position 0.5s var(--ease-out-expo); opacity: 0; } /* Hover preview — peek effect on closed categories */ .menu-category:not(.open):hover .menu-items { max-height: 92px; opacity: 0.55; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 100%); } .menu-category:not(.open):hover .category-toggle { transform: rotate(22deg); color: var(--orange-text); } .menu-category:not(.open):hover .menu-category-header { color: var(--orange-text); } /* Open state — full expansion */ .menu-category.open .menu-items { max-height: 600px; opacity: 1; pointer-events: auto; -webkit-mask-image: none; mask-image: none; } .menu-item { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 0 16px 60px; gap: 20px; border-top: 1px solid rgba(0, 0, 0, 0.04); transition: background 0.3s; } .menu-item:hover { background: rgba(255, 102, 51, 0.03); } .menu-item:last-child { padding-bottom: 28px; } .menu-item-info { flex: 1; } .menu-item-name { display: block; font-family: var(--font-primary); font-size: 17px; font-weight: 500; margin-bottom: 4px; } .menu-item-desc { display: block; font-size: 14px; color: var(--text-light); font-weight: 300; } .menu-item-price { font-family: var(--font-primary); font-size: 17px; font-weight: 500; color: var(--orange-text); white-space: nowrap; } .menu-item-price::after { content: ' \20BD'; font-weight: 300; font-size: 14px; } .menu-note { padding-top: 20px; } .menu-note p { font-size: 13px; color: var(--text-muted); font-weight: 300; } /* ============================================ BAR SECTION ============================================ */ .bar-section { background: var(--warm-white); color: var(--text); overflow: hidden; transition: background-color 1.5s var(--ease-out-expo), color 1.5s var(--ease-out-expo); } .night-mode .bar-section { background: var(--bg-dark); color: #F5F0EB; } .bar-gradient-bg { position: absolute; top: -30%; right: -20%; width: 70vmax; height: 70vmax; border-radius: 50%; background: radial-gradient( ellipse at center, rgba(255, 102, 51, 0.12) 0%, transparent 60% ); pointer-events: none; } .bar-section .section-label { color: var(--text-light); } .bar-section .label-line { background: var(--silver); } .night-mode .bar-section .section-label { color: rgba(255, 255, 255, 0.4); } .night-mode .bar-section .label-line { background: rgba(255, 255, 255, 0.2); } .bar-heading { font-family: var(--font-primary); font-size: clamp(36px, 6vw, 80px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 24px; } .bar-subtitle { font-size: clamp(16px, 1.8vw, 20px); color: var(--text-light); max-width: 550px; line-height: 1.7; font-weight: 300; margin-bottom: 60px; } .night-mode .bar-subtitle { color: rgba(255, 255, 255, 0.5); } .bar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .bar-card { position: relative; padding: 40px; border-radius: 20px; background: var(--bg); border: 1px solid var(--grey); overflow: hidden; transition: all 0.5s var(--ease-out-expo); transition-delay: calc(var(--delay, 0) * 0.1s); } .bar-card:hover { background: var(--warm-white); border-color: var(--orange-text); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06); } .night-mode .bar-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } .night-mode .bar-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 102, 51, 0.3); box-shadow: none; } .bar-card-glow { position: absolute; top: 0; left: 0; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 102, 51, 0.15) 0%, transparent 70%); pointer-events: none; opacity: 0; transition: opacity 0.5s; will-change: transform; } .bar-card:hover .bar-card-glow { opacity: 1; } .bar-card-number { font-family: var(--font-primary); font-size: 13px; font-weight: 500; color: var(--orange-text); margin-bottom: 24px; } .bar-card h3 { font-family: var(--font-primary); font-size: 24px; font-weight: 600; margin-bottom: 12px; } .bar-card p { font-size: 15px; color: var(--text-light); line-height: 1.6; font-weight: 300; margin-bottom: 24px; } .night-mode .bar-card p { color: rgba(255, 255, 255, 0.5); } .bar-card-price { font-family: var(--font-primary); font-size: 14px; font-weight: 500; color: var(--orange-text); } /* ============================================ LOYALTY SECTION (gamma card) ============================================ */ .loyalty-section { position: relative; overflow: hidden; } .loyalty-heading { font-family: var(--font-primary); font-size: clamp(36px, 6vw, 80px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 24px; } .loyalty-subtitle { font-size: clamp(16px, 1.8vw, 20px); color: var(--text-light); max-width: 600px; line-height: 1.7; font-weight: 300; margin-bottom: 80px; } .loyalty-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; max-width: 1200px; margin: 0 auto; } /* gamma card — matches physical card design */ .loyalty-card-wrap { display: flex; justify-content: center; } .loyalty-card { width: 100%; max-width: 440px; aspect-ratio: 1.586/1; transition: transform 0.7s var(--ease-out-expo), box-shadow 0.7s var(--ease-out-expo); will-change: transform; } .loyalty-card-wrap:hover .loyalty-card { transform: scale(1.025); } .loyalty-card-inner { position: relative; width: 100%; height: 100%; border-radius: 22px; background: #FAFAF8; overflow: hidden; box-shadow: 0 30px 80px -25px rgba(255, 102, 51, 0.25), 0 20px 50px -20px rgba(26, 24, 22, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04); padding: clamp(18px, 3vw, 26px) clamp(20px, 3.5vw, 30px); display: flex; flex-direction: column; justify-content: space-between; } .loyalty-card-bg { position: absolute; inset: 0; background: #FAFAF8; pointer-events: none; } /* Compact warm-gradient blob — contained in the middle of the card */ .loyalty-card-glow { position: absolute; top: 50%; left: 50%; width: 74%; height: 72%; transform: translate(-50%, -50%); /* The 4 corner layers stay fixed. Only the centre core follows the time-of-day vars. */ background: radial-gradient(ellipse 42% 58% at 18% 32%, rgba(255, 168, 188, 0.78) 0%, transparent 65%), radial-gradient(ellipse 44% 58% at 82% 28%, rgba(255, 222, 130, 0.92) 0%, transparent 62%), radial-gradient(ellipse 46% 60% at 85% 75%, rgba(255, 110, 90, 0.78) 0%, transparent 65%), radial-gradient(ellipse 40% 52% at 20% 78%, rgba(255, 175, 95, 0.72) 0%, transparent 65%), radial-gradient(ellipse 68% 75% at 50% 55%, var(--loyalty-blob-core) 0%, var(--loyalty-blob-edge) 42%, transparent 72%); filter: blur(18px); border-radius: 50%; pointer-events: none; animation: cardGlowPulse 9s ease-in-out infinite; transition: background 6s var(--ease-out-expo); } @keyframes cardGlowPulse { 0%, 100% { opacity: 0.97; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.035); } } /* Logo inside the card — sized to match the balance number visually */ .loyalty-card-logo { height: clamp(32px, 3.6vw, 44px); width: auto; display: block; } .loyalty-card-logo--dark { display: none; } .night-mode .loyalty-card-logo--light { display: none; } .night-mode .loyalty-card-logo--dark { display: block; } .loyalty-card-row, .loyalty-card-stage { position: relative; z-index: 2; } /* Top row: brand + balance */ .loyalty-card-row--top { display: flex; align-items: flex-start; justify-content: space-between; } .loyalty-card-brand { display: flex; flex-direction: column; line-height: 0.95; color: var(--orange-text); font-family: var(--font-primary); font-weight: 700; font-size: clamp(15px, 1.6vw, 19px); letter-spacing: -0.01em; } .loyalty-card-balance { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .loyalty-card-meta-label { font-family: var(--font-primary); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; color: var(--text-light); text-transform: uppercase; } .loyalty-card-balance-value { font-family: var(--font-primary); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; color: var(--text); line-height: 1; margin-top: 2px; } /* Middle stage: figures + waves */ .loyalty-card-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; margin: 6px 0; } .loyalty-card-waves { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); width: 72%; height: 44%; pointer-events: none; overflow: visible; } .loyalty-card-figures { position: absolute; inset: 0; pointer-events: none; } .loyalty-figure { position: absolute; width: 10%; height: auto; transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo); filter: drop-shadow(0 5px 14px rgba(140, 40, 10, 0.5)); opacity: 0; pointer-events: none; } /* SVG wave viewBox 0-400, peaks at x = 50, 150, 250, 350. Wave is 72% of stage width, centered (left margin = 14%). Stage X% for peak = 14% + (peak/400) × 72 = 14 + 12.5*0.72 etc. */ /* Figure 1 — standing straight ABOVE the first peak */ .loyalty-figure[data-figure="1"] { left: 23%; bottom: 56%; transform-origin: 50% 100%; transform: translate(-50%, 0); animation: figureBob1 4s ease-in-out infinite; } @keyframes figureBob1 { 0%, 100% { transform: translate(-50%, 0) rotate(0deg); } 50% { transform: translate(-50%, -3px) rotate(0deg); } } /* Figure 2 — tilted right (on right leg) ABOVE the second peak */ .loyalty-figure[data-figure="2"] { left: 41%; bottom: 56%; transform-origin: 50% 100%; transform: translate(-50%, 0) rotate(22deg); animation: figureBob2 4.4s ease-in-out infinite; } @keyframes figureBob2 { 0%, 100% { transform: translate(-50%, 0) rotate(22deg); } 50% { transform: translate(-50%, -2px) rotate(18deg); } } /* Figure 3 — one-arm handstand: rotated 135° so the RIGHT arm of the mascot (viewer's left) is pointing straight down as the support. */ .loyalty-figure[data-figure="3"] { left: 59%; bottom: 62%; transform-origin: 50% 50%; transform: translate(-50%, 0) rotate(135deg); animation: figureBob3 4.6s ease-in-out infinite; } @keyframes figureBob3 { 0%, 100% { transform: translate(-50%, 0) rotate(135deg); } 50% { transform: translate(-50%, -2px) rotate(132deg); } } /* Figure 4 — one-arm handstand on the OTHER arm: rotated 225° so the LEFT arm of the mascot (viewer's right) is straight down. */ .loyalty-figure[data-figure="4"] { left: 77%; bottom: 62%; transform-origin: 50% 50%; transform: translate(-50%, 0) rotate(225deg); animation: figureBob4 4.2s ease-in-out infinite; } @keyframes figureBob4 { 0%, 100% { transform: translate(-50%, 0) rotate(225deg); } 50% { transform: translate(-50%, -2px) rotate(228deg); } } /* Tier-controlled visibility: only the current tier's figure is visible */ .loyalty-card[data-tier="1"] .loyalty-figure[data-figure="1"], .loyalty-card[data-tier="2"] .loyalty-figure[data-figure="2"], .loyalty-card[data-tier="3"] .loyalty-figure[data-figure="3"], .loyalty-card[data-tier="4"] .loyalty-figure[data-figure="4"] { opacity: 1; } /* Bottom row: name + cashback */ .loyalty-card-row--bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .loyalty-card-info { display: flex; flex-direction: column; min-width: 0; } .loyalty-card-name { font-family: var(--font-primary); font-size: clamp(14px, 1.7vw, 18px); font-weight: 600; color: var(--text); margin-top: 4px; letter-spacing: -0.01em; } .loyalty-card-cashback { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex-shrink: 0; } .loyalty-card-cashback-value { font-family: var(--font-primary); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; color: var(--orange-text); line-height: 1; margin-top: 2px; } /* Tiers list */ .loyalty-content { display: flex; flex-direction: column; gap: 36px; } .loyalty-tiers { display: flex; flex-direction: column; gap: 24px; } .loyalty-tier { display: flex; align-items: flex-start; gap: 20px; padding: 16px 0 16px 0; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.06); background: none; text-align: left; cursor: pointer; width: 100%; transition: padding 0.4s var(--ease-out-expo), color 0.4s var(--ease-out-expo); font-family: inherit; color: inherit; } .loyalty-tier:last-child { border-bottom: none; } .loyalty-tier:hover, .loyalty-tier.is-active { padding-left: 12px; } .loyalty-tier:hover .loyalty-tier-num, .loyalty-tier.is-active .loyalty-tier-num { color: var(--orange-text); transform: scale(1.1); } .loyalty-tier-num { font-family: var(--font-primary); font-size: 13px; font-weight: 500; color: var(--text-light); flex-shrink: 0; padding-top: 4px; letter-spacing: 0.1em; transition: color 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo); } .loyalty-tier-info h4 { font-family: var(--font-primary); font-size: 18px; font-weight: 600; margin-bottom: 6px; color: var(--text); } .loyalty-tier-info p { font-size: 14px; color: var(--text-light); line-height: 1.55; } .loyalty-cta { display: inline-flex; align-items: center; gap: 12px; padding: 18px 36px; background: var(--text); color: var(--bg); border-radius: 999px; font-family: var(--font-primary); font-size: 14px; font-weight: 500; letter-spacing: 0.05em; align-self: flex-start; transition: background 0.4s var(--ease-out-expo); } .loyalty-cta:hover { background: var(--orange); color: white; } .loyalty-cta svg { width: 18px; height: 18px; transition: transform 0.4s var(--ease-out-expo); } .loyalty-cta:hover svg { transform: translateX(4px); } /* Responsive */ @media (max-width: 900px) { .loyalty-grid { grid-template-columns: 1fr; gap: 60px; } .loyalty-card-wrap { order: 1; } .loyalty-content { order: 2; } } /* Night mode */ .night-mode .loyalty-section { background: #1A1816; } .night-mode .loyalty-heading { color: #F5F0EB; } .night-mode .loyalty-subtitle { color: rgba(255, 255, 255, 0.55); } .night-mode .loyalty-tier { border-bottom-color: rgba(255, 255, 255, 0.06); } .night-mode .loyalty-tier-num { color: rgba(255, 255, 255, 0.4); } .night-mode .loyalty-tier-info h4 { color: #F5F0EB; } .night-mode .loyalty-tier-info p { color: rgba(255, 255, 255, 0.5); } .night-mode .loyalty-cta { background: #F5F0EB; color: #1A1816; } .night-mode .loyalty-cta:hover { background: var(--orange); color: white; } /* In night mode, the loyalty card swaps to a deep card with a stronger glow */ .night-mode .loyalty-card-inner { background: #211C18; box-shadow: 0 30px 80px -20px rgba(255, 102, 51, 0.45), 0 20px 50px -20px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06); } .night-mode .loyalty-card-bg { background: #211C18; } .night-mode .loyalty-card-glow { background: radial-gradient(ellipse 38% 55% at 18% 35%, rgba(255, 130, 150, 0.85) 0%, transparent 65%), radial-gradient(ellipse 42% 55% at 80% 28%, rgba(255, 200, 110, 0.92) 0%, transparent 62%), radial-gradient(ellipse 44% 58% at 84% 75%, rgba(255, 90, 70, 0.85) 0%, transparent 65%), radial-gradient(ellipse 38% 50% at 22% 78%, rgba(255, 145, 80, 0.78) 0%, transparent 65%), radial-gradient(ellipse 65% 75% at 50% 55%, rgba(255, 130, 60, 0.95) 0%, rgba(255, 95, 50, 0.6) 38%, transparent 72%); } .night-mode .loyalty-card-balance-value, .night-mode .loyalty-card-name { color: #F5F0EB; } .night-mode .loyalty-card-meta-label { color: rgba(255, 255, 255, 0.55); } /* ============================================ CONTACT SECTION ============================================ */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .contact-heading { font-family: var(--font-primary); font-size: clamp(36px, 6vw, 80px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 32px; } .wave-svg-contact { width: 100px; color: var(--orange-text); } .contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .contact-block h4 { font-family: var(--font-primary); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 12px; } .contact-block p { font-size: 16px; line-height: 1.6; } .social-links { display: flex; flex-direction: column; gap: 12px; } .social-link { display: flex; align-items: center; gap: 10px; font-size: 15px; transition: color 0.3s; } .social-link:hover { color: var(--orange-text); } .social-link svg { width: 20px; height: 20px; } .contact-phone { display: inline-block; font-family: var(--font-primary); font-size: 16px; font-weight: 500; color: var(--orange-text); padding: 14px 32px; border: 1.5px solid var(--orange); border-radius: 100px; transition: all 0.4s var(--ease-out-expo); } .contact-phone:hover { background: var(--orange); color: white; } /* ============================================ SEO CONTEXT — collapsible via native
Fully indexed by Google, visible only when user clicks ============================================ */ .seo-context { padding: 0; background: var(--bg); border-top: 1px solid rgba(26, 24, 22, 0.05); } /* The trigger — a subtle small link-like summary, hidden default browser marker */ .seo-context-summary { list-style: none; cursor: pointer; padding: 18px 24px; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-primary); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); transition: color 0.4s var(--ease-out-expo); -webkit-tap-highlight-color: transparent; user-select: none; } .seo-context-summary::-webkit-details-marker { display: none; } .seo-context-summary::marker { display: none; content: ''; } .seo-context-summary:hover { color: var(--orange-text); } .seo-context-chevron { width: 12px; height: 12px; transition: transform 0.35s var(--ease-out-expo); } .seo-context[open] .seo-context-chevron { transform: rotate(180deg); } /* Expanded content */ .seo-context-inner { max-width: 1100px; padding-top: 12px; padding-bottom: 50px; animation: seoFadeIn 0.5s var(--ease-out-expo); } @keyframes seoFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .seo-context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); } .seo-context-col h3 { font-family: var(--font-primary); font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 12px; letter-spacing: 0.02em; } .seo-context-col p { font-family: var(--font-body); font-size: 13px; line-height: 1.75; color: var(--text-light); font-weight: 300; margin-bottom: 14px; } .seo-context-col p:last-child { margin-bottom: 0; } .seo-context-col strong { color: var(--text); font-weight: 500; } @media (max-width: 720px) { .seo-context-grid { grid-template-columns: 1fr; gap: 28px; } } .night-mode .seo-context { background: var(--bg-dark); border-top-color: rgba(255, 255, 255, 0.06); } .night-mode .seo-context-summary { color: rgba(255, 255, 255, 0.4); } .night-mode .seo-context-summary:hover { color: var(--orange-light); } .night-mode .seo-context-col h3 { color: #F5F0EB; } .night-mode .seo-context-col p { color: rgba(255, 255, 255, 0.5); } .night-mode .seo-context-col strong { color: #F5F0EB; } /* ============================================ FOOTER ============================================ */ .footer { padding: 60px 0 40px; border-top: 1px solid var(--grey); } .footer-inner { text-align: center; } .footer-logo { display: flex; justify-content: center; margin-bottom: 12px; } .footer-logo { position: relative; } .footer-logo-img { height: 32px; width: auto; opacity: 0.5; } .footer-logo-img--light { position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; } .footer-tagline { font-size: 14px; color: var(--text-light); font-weight: 300; margin-bottom: 24px; } .footer-legal { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 32px; font-family: var(--font-primary); font-size: 11px; font-weight: 400; letter-spacing: 0.05em; flex-wrap: wrap; } .footer-legal a { color: var(--text-light); text-decoration: none; transition: color 0.4s var(--ease-out-expo); } .footer-legal a:hover { color: var(--orange-text); } .footer-legal span { color: var(--text-muted); } .night-mode .footer-legal a { color: rgba(255, 255, 255, 0.45); } .night-mode .footer-legal a:hover { color: var(--orange-light); } .footer-bottom { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-light); font-weight: 300; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .philosophy-values { grid-template-columns: 1fr; gap: 20px; } .space-gallery { grid-template-columns: repeat(2, 1fr); } .bar-grid { grid-template-columns: 1fr; max-width: 500px; } .contact-grid { grid-template-columns: 1fr; gap: 60px; } } @media (max-width: 768px) { .philosophy-grid { grid-template-columns: 1fr; gap: 24px; } .space-gallery { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } .contact-details { grid-template-columns: 1fr; gap: 32px; } .hero-logo-img { width: clamp(240px, 60vw, 400px); } .mascot-img { width: clamp(160px, 40vw, 240px); } .value-card { padding: 28px; } .bar-card { padding: 28px; } .footer-bottom { flex-direction: column; gap: 8px; align-items: center; } .menu-item { padding-left: 0; } .big-text { font-size: clamp(32px, 12vw, 80px); } .big-text-outline { width: clamp(220px, 70vw, 460px); } } @media (max-width: 480px) { .hero-logo-img { width: 240px; } .mascot-img { width: 160px; } .mascot-text { font-size: 13px; } .philosophy-heading, .space-heading, .menu-heading, .bar-heading, .contact-heading { font-size: 36px; } } /* ============================================ NIGHT MODE — "After sunset, we transform" Activated by sunrise/sunset + geolocation ============================================ */ /* Smooth transitions for theme switch */ html { transition: background-color 1.5s var(--ease-out-expo); } body, .section, .space-section, .footer, .nav.scrolled, .mobile-menu, .value-card, .menu-category, .menu-item { transition: background-color 1.5s var(--ease-out-expo), color 1.5s var(--ease-out-expo), border-color 1.5s var(--ease-out-expo); } /* --- Night Mode Overrides --- */ .night-mode body, .night-mode { background-color: var(--bg-dark); color: #E8E4E0; } /* Nav */ .night-mode .nav.scrolled { background: rgba(26, 24, 22, 0.85); border-bottom-color: rgba(255, 255, 255, 0.06); } /* Nav logo: show white version in night mode */ .night-mode .nav-logo-img--dark { opacity: 0; } .night-mode .nav-logo-img--light { opacity: 1; } .night-mode .nav-menu-btn span { background: #E8E4E0; } .night-mode .nav-menu-btn.active span { background: #E8E4E0 !important; } /* Mobile menu */ .night-mode .mobile-menu { background: var(--bg-dark); } .night-mode .mobile-link { color: #E8E4E0; } .night-mode .mobile-link:hover { color: var(--orange-text); } /* Philosophy */ .night-mode .philosophy-heading { color: #F5F0EB; } .night-mode .philosophy-text p { color: rgba(255, 255, 255, 0.5); } .night-mode .section-label { color: rgba(255, 255, 255, 0.35); } .night-mode .label-line { background: rgba(255, 255, 255, 0.15); } .night-mode .value-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } .night-mode .value-card:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--orange-text); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .night-mode .value-card h3 { color: #F5F0EB; } .night-mode .value-card p { color: rgba(255, 255, 255, 0.45); } /* Space section */ .night-mode .space-section { background: #1E1C1A; } .night-mode .space-marquee { border-color: rgba(255, 255, 255, 0.06); } .night-mode .marquee-track span { color: rgba(255, 255, 255, 0.2); } .night-mode .space-heading { color: #F5F0EB; } .night-mode .space-subtitle { color: rgba(255, 255, 255, 0.5); } .night-mode .gallery-card h3 { color: #F5F0EB; } .night-mode .gallery-card p { color: rgba(255, 255, 255, 0.45); } /* Big text */ .night-mode .big-text-outline text { fill: var(--bg-dark); stroke: rgba(255, 102, 51, 0.7); } /* Menu section */ .night-mode .menu-heading { color: #F5F0EB; } .night-mode .menu-subtitle { color: rgba(255, 255, 255, 0.5); } .night-mode .menu-category { border-color: rgba(255, 255, 255, 0.08); } .night-mode .menu-category:first-child { border-top-color: rgba(255, 255, 255, 0.08); } .night-mode .menu-category-header h3 { color: #E8E4E0; } .night-mode .category-toggle { color: rgba(255, 255, 255, 0.3); } .night-mode .menu-item { border-top-color: rgba(255, 255, 255, 0.04); } .night-mode .menu-item:hover { background: rgba(255, 102, 51, 0.06); } .night-mode .menu-item-name { color: #E8E4E0; } .night-mode .menu-item-desc { color: rgba(255, 255, 255, 0.4); } .night-mode .menu-note p { color: rgba(255, 255, 255, 0.25); } /* Contact */ .night-mode .contact-heading { color: #F5F0EB; } .night-mode .contact-block h4 { color: rgba(255, 255, 255, 0.35); } .night-mode .contact-block p { color: #E8E4E0; } .night-mode .social-link { color: rgba(255, 255, 255, 0.7); } .night-mode .wave-svg-contact { color: var(--orange-text); } .night-mode .contact-phone { color: var(--orange-text); border-color: var(--orange-text); } .night-mode .contact-phone:hover { background: var(--orange); color: white; } /* Footer */ .night-mode .footer { border-top-color: rgba(255, 255, 255, 0.06); } .night-mode .footer-logo-img--dark { opacity: 0; } .night-mode .footer-logo-img--light { opacity: 0.35; } .night-mode .footer-tagline { color: rgba(255, 255, 255, 0.25); } .night-mode .footer-bottom { color: rgba(255, 255, 255, 0.2); } /* Cursor glow — more visible at night */ .night-mode .cursor-glow { background: radial-gradient(circle, rgba(var(--cursor-color), calc(var(--cursor-intensity) + 0.04)) 0%, transparent 70%); } /* --- Prefers reduced motion --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .hero-logo-wrap, .hero-tagline, .hero-wave, .hero-scroll-indicator { opacity: 1; transform: none; } .mascot-figure { filter: none !important; opacity: 1 !important; } .mascot-text { color: rgba(255, 255, 255, 0.7) !important; } .reveal-text { opacity: 1; transform: none; } } /* WCAG 2.5.5 — minimum 44px tap targets on touch devices */ @media (max-width: 720px) { .theme-toggle, .lang-dropdown-toggle, .nav-menu-btn, .lang-btn { min-width: 44px; min-height: 44px; } } /* Forced colors mode (Windows high-contrast) — keep CTAs visible */ @media (forced-colors: active) { .loyalty-cta, .contact-phone { border: 2px solid CanvasText; } .hero-gradient-orb, .hero-gradient-orb--secondary, .hero-noise, .cursor-glow { display: none; } } /* cache bust */