/* ===== WEEEE shared styles — matched to actual brand (Inter + DM Mono + #FFCE00) ===== */ :root { --bg: #F5F4F2; --bg-alt: #EEE9E3; --bg-card: #FFFFFF; --border: #E5E0D8; --border-soft: #ECE7DE; --ink: #121212; --ink-soft: #2A2A2A; --ink-mute: #6B6B6B; --ink-faint: #A8A8A8; --yellow: #FFCE00; --yellow-soft: #FFE066; --yellow-deep: #E8B900; --danger: #A8462D; --good: #4A7858; --radius: 0; --shadow-sm: 0 1px 3px rgba(18,18,18,0.05); --shadow-md: 0 4px 16px rgba(18,18,18,0.08); --shadow-lg: 0 12px 40px rgba(18,18,18,0.10); --max: 1240px; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; text-rendering: optimizeLegibility; font-feature-settings: 'ss01', 'cv11', 'kern'; } html { scroll-behavior: smooth; } /* Premium page-load entrance — soft fade-in on every page navigation. Opacity only: a transform on would trap position:fixed children (the liquid-glass ambience layer) inside the page instead of the viewport. */ body { animation: page-enter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes page-enter { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { body { animation: none; } } /* ===== A11Y — skip link + visible focus + reduced motion ===== */ .skip-link { position: absolute; top: -100px; left: 8px; z-index: 999; background: var(--ink); color: var(--yellow); padding: 14px 20px; border-radius: 8px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 8px; outline: 2px solid var(--yellow); outline-offset: 2px; } /* Visible focus for keyboard users (not mouse) */ *:focus { outline: none; } *:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; } button:focus-visible, .btn:focus-visible { outline-offset: 4px; } /* ===== PRINT — paper-friendly version of menu / pages ===== */ @media print { html, body { background: #fff !important; color: #000 !important; } /* Hide all interactive chrome */ .nav, .footer, .wa-fab, .skip-link, .nav-status, .scroll-progress, .hero video, .find-us-map, .cta-banner, .reserve-banner, .stats, .big-text, .story, .says, .faq, .info-row, .marketing-note, .conf-actions, .conf-warn, .terms, #gate, #keypad, .submit, .btn { display: none !important; } /* Show only main content */ a { color: #000 !important; text-decoration: none !important; } /* Menu items: single column, compact */ .cat-section { padding: 16px 0 !important; page-break-inside: avoid; } .cat-header h2 { color: #000 !important; font-size: 22pt !important; margin: 12pt 0 6pt !important; border-bottom: 2px solid #000; padding-bottom: 4pt; } .items-grid { display: block !important; } .item { display: grid !important; grid-template-columns: 1fr auto !important; gap: 8pt; padding: 6pt 0; border-bottom: 0.5pt dotted #999; page-break-inside: avoid; } .item-img-wrap, .item-tag, .item-base { display: none !important; } .item-name { font-size: 11pt !important; font-weight: 700 !important; color: #000 !important; } .item-desc { font-size: 9pt !important; color: #333 !important; max-width: none !important; } .item-price { font-size: 11pt !important; font-weight: 700 !important; color: #000 !important; white-space: nowrap; } /* Page header on print */ .m-hero { background: #fff !important; padding: 0 !important; } .m-hero h1 { color: #000 !important; font-size: 28pt !important; margin: 0 !important; } .m-hero h1 .ink { color: #000 !important; } .m-hero-meta { color: #333 !important; font-size: 10pt !important; margin: 4pt 0 12pt !important; } /* Page breaks */ section { page-break-inside: avoid; } @page { margin: 14mm; size: A4; } } @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; } } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.55; min-height: 100vh; min-height: 100dvh; font-feature-settings: 'ss01', 'cv11'; } /* Global mobile-tap hover reset — prevents iOS sticky :hover after tap. Re-enables hover only on devices with a true hover capability. */ @media (hover: none) { a:hover, button:hover, .btn:hover, .nav-link:hover, .lang-switch button:hover, .perk:hover, .kpi:hover, .stat-card:hover, .sec-btn:hover, .bk-filter:hover, .staff-row:hover, .icon-btn:hover, .refresh-btn:hover, summary:hover { background-color: revert; color: revert; transform: none !important; border-color: revert; box-shadow: revert; } } button, input, select, textarea { font-family: inherit; color: inherit; } a { color: inherit; text-decoration: none; } img, video { max-width: 100%; display: block; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } /* ===== BRAND LOGO (PNG) ===== */ .brand-logo { display: inline-flex; align-items: center; line-height: 0; } .brand-logo img { height: 36px; width: auto; display: block; transition: opacity 0.2s; } .brand-logo:hover img { opacity: 0.78; } @media (max-width: 800px) { .brand-logo img { height: 30px; } } /* Footer uses the white PNG directly — no inversion needed */ .brand-logo-footer img { height: 40px; filter: none; } /* ===== NAV ===== */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(245, 244, 242, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .nav-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; } .nav-brand { display: inline-flex; align-items: center; padding: 8px 0; min-height: 44px; } .nav-links { display: flex; gap: 26px; align-items: center; list-style: none; margin: 0; padding: 0; } .nav-links a { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--yellow); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; padding: 6px 0; transition: color 0.15s; position: relative; } .nav-links a:hover, .nav-links a.active { color: var(--yellow-deep); } .nav-links a.active::after, .nav-links a:hover::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; } /* Logged-in member chip — shown in nav when sessionStorage has a fresh auth */ .nav-me-li { list-style: none; } .nav-me { display: inline-flex !important; align-items: center; gap: 8px; padding: 6px 10px 6px 6px !important; background: rgba(255, 206, 0, 0.12); border: 1px solid rgba(255, 206, 0, 0.6); border-radius: 100px !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; color: var(--ink) !important; letter-spacing: 0.3px !important; text-transform: none !important; font-weight: 600 !important; transition: background 0.15s, transform 0.15s; } .nav-me:hover { background: rgba(255, 206, 0, 0.25); transform: translateY(-1px); } .nav-me::after { display: none !important; } .nav-me-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--yellow); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; } .nav-me-name { white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; flex-direction: column; align-items: center; justify-content: center; } .nav-burger span { display: block; width: 26px; height: 2.5px; background: var(--ink); margin: 6px 0; transition: 0.25s; } /* ===== Live status badge — refined premium pill ===== */ .nav-status { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(230, 226, 215, 0.6); white-space: nowrap; margin-left: 16px; margin-right: 0; box-shadow: 0 1px 2px rgba(18,18,18,0.04); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .nav-status:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(18,18,18,0.08); } .nav-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-mute); flex-shrink: 0; } .nav-status[data-state="open"] { color: #2D7A4F; border-color: #B8DBC3; background: #EAF4EE; } .nav-status[data-state="open"] .nav-status-dot { background: #2D7A4F; animation: pulse 1.6s infinite; } .nav-status[data-state="closing"] { color: #A85A1F; border-color: #E8C4A8; background: #FBF0E5; } .nav-status[data-state="closing"] .nav-status-dot { background: #A85A1F; animation: pulse 1.6s infinite; } .nav-status[data-state="closed"] { color: var(--ink-mute); } @media (max-width: 900px) { .nav-status { display: none; } } /* ===== Language switcher (3-pill segmented) ===== */ .lang-switch { display: inline-flex; gap: 2px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 999px; padding: 3px; margin-left: auto; margin-right: 18px; font-family: 'DM Mono', monospace; } .lang-switch button { background: transparent; border: 0; color: var(--ink-mute); font-family: inherit; font-weight: 600; font-size: 11px; letter-spacing: 1.5px; padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: all 0.15s; min-height: 32px; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; } /* On touch viewports give each lang pill a 44x44 hit area via :before */ @media (pointer: coarse) { .lang-switch button { position: relative; min-height: 44px; } .lang-switch button::before { content: ''; position: absolute; inset: -6px; } } .lang-switch button:hover { color: var(--ink); } .lang-switch button.active { background: var(--ink); color: var(--yellow); } @media (max-width: 900px) { .lang-switch { margin-right: 8px; padding: 2px; } .lang-switch button { font-size: 10px; padding: 4px 7px; } } @media (max-width: 900px) { .nav-inner { padding: 14px 20px; } .nav-links { position: fixed; top: 0; right: -100%; width: 78%; max-width: 320px; height: 100vh; height: 100dvh; background: var(--bg); flex-direction: column; gap: 8px; padding: 88px 28px 32px; transition: right 0.3s ease; align-items: flex-start; } .nav-links.open { right: 0; box-shadow: -8px 0 32px rgba(18,18,18,0.1); } .nav-links a { font-size: 18px; padding: 14px 0; width: 100%; } .nav-burger { display: inline-flex; z-index: 60; } .nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(8px, -8px); } } /* ===== WHATSAPP FLOATING CTA (always present, like original) ===== */ .wa-fab { position: fixed; bottom: calc(22px + env(safe-area-inset-bottom)); right: calc(22px + env(safe-area-inset-right)); z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(255,206,0,0.4); transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; } .wa-fab:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(255,206,0,0.55); } .wa-fab svg { width: 28px; height: 28px; } /* Mobile: shrink + tuck away from content edge to avoid overlapping forms/buttons near the bottom of cards. */ @media (max-width: 700px) { .wa-fab { width: 50px; height: 50px; bottom: calc(18px + env(safe-area-inset-bottom)); right: 14px; } .wa-fab svg { width: 24px; height: 24px; } } /* Reserve confirm card is centered with a max-width; push FAB further so it doesn't sit on top of the card on mobile. */ body[data-page="reserve"] .wa-fab { bottom: calc(96px + env(safe-area-inset-bottom)); } @media (min-width: 700px) { body[data-page="reserve"] .wa-fab { bottom: calc(22px + env(safe-area-inset-bottom)); } } /* ===== FOOTER ===== */ .footer { background: var(--ink); color: var(--bg); padding: 72px 32px 36px; margin-top: 96px; } .footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; } .footer-brand .mark { margin-bottom: 16px; } .footer-brand .mark .pip { background: var(--bg); color: var(--ink); } .footer-brand .mark .pip.dot { background: var(--yellow); } .footer-brand .mark .pip.dot::after { background: var(--bg); } .footer-brand p { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.7; max-width: 340px; } .footer-col h4 { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--yellow); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin: 0 0 18px; } .footer-col a, .footer-col p { display: block; font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.9; margin: 0; transition: color 0.15s; } .footer-col a:hover { color: var(--yellow); } .footer-bottom { max-width: var(--max); margin: 56px auto 0; padding-top: 24px; border-top: 1px solid #2A2A2A; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-mute); letter-spacing: 2px; text-transform: uppercase; } @media (max-width: 800px) { .footer { padding: 56px 22px 28px; margin-top: 64px; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px 24px; } .footer-brand { grid-column: 1 / -1; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; padding-top: 20px; margin-top: 40px; } /* Boost tap targets in footer to >= 44px on touch devices */ .footer-col a { padding: 12px 0; line-height: 1.4; min-height: 44px; box-sizing: border-box; } } /* ===== UTILITY ===== */ .container { max-width: var(--max); margin: 0 auto; padding: 0 32px; } @media (max-width: 800px) { .container { padding: 0 22px; } } .section { padding: 96px 0; } @media (max-width: 800px) { .section { padding: 64px 0; } } .eyebrow { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--yellow); letter-spacing: 2.5px; text-transform: lowercase; font-weight: 700; margin-bottom: 18px; } /* h-section: BIG bold YELLOW lowercase (matches "fresh, daily, mindful" style) */ .h-section { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(56px, 9vw, 112px); line-height: 0.95; color: var(--yellow); letter-spacing: -3px; margin: 0 0 28px; text-transform: lowercase; } .h-section em { color: var(--ink); font-style: normal; } .h-section .ink { color: var(--ink); } /* btn: yellow filled, ink text, bold — premium hover (lift + softer shadow) */ .btn { display: inline-flex; align-items: center; gap: 10px; background: var(--yellow); color: var(--ink); padding: 16px 28px; border-radius: 100px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border: none; cursor: pointer; text-decoration: none; position: relative; overflow: hidden; box-shadow: 0 1px 2px rgba(18,18,18,0.06); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, color 0.25s ease; } .btn:hover { background: var(--ink); color: var(--yellow); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(255,206,0,0.25), 0 2px 6px rgba(18,18,18,0.12); } .btn:active { transform: translateY(-1px); transition-duration: 0.08s; } .btn.outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: none; } .btn.outline:hover { background: var(--ink); color: var(--yellow); border-color: var(--ink); box-shadow: 0 12px 32px rgba(18,18,18,0.20); } .btn.ink { background: var(--ink); color: var(--bg); box-shadow: 0 1px 3px rgba(18,18,18,0.18); } .btn.ink:hover { background: var(--yellow); color: var(--ink); box-shadow: 0 12px 32px rgba(255,206,0,0.35); } /* ===== LIQUID GLASS — shared surface tokens ===== Cards across pages restyle their existing classes with these, so the look stays consistent and tunable from one place. The glass reads because: (1) a vivid drifting fruit-colour layer sits behind the page, (2) cards are genuinely translucent, (3) Chromium bends the backdrop through an SVG displacement filter (#lg, injected by partials.js), (4) a glossy streak + pointer-tracked sheen sit on top. */ :root { /* Apple Liquid Glass: a clear lens, not a frosted card. Fill is nearly transparent; depth comes from the rim highlights + edge refraction. */ --glass-bg: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.30) 44%, rgba(255,255,255,0.05) 50%, transparent 58%), linear-gradient(160deg, rgba(255,255,255,0.26), rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.16)); --glass-border: 1px solid rgba(255,255,255,0.55); --glass-blur: blur(10px) saturate(1.9) brightness(1.06); --glass-radius: 28px; /* inner stack = glass thickness: bright top rim, soft side bevels, faint bottom catch-light; outer = contact + ambient drop */ --glass-shadow: inset 0 1.5px 1px rgba(255,255,255,0.95), inset 0 -1px 1px rgba(255,255,255,0.5), inset 2px 2px 10px -6px rgba(255,255,255,0.95), inset -3px -4px 12px -8px rgba(255,255,255,0.7), 0 2px 6px rgba(18,18,18,0.05), 0 18px 48px rgba(18,18,18,0.12); --glass-shadow-lift: inset 0 1.5px 1px rgba(255,255,255,0.95), inset 0 -1px 1px rgba(255,255,255,0.5), inset 2px 2px 10px -6px rgba(255,255,255,0.95), inset -3px -4px 12px -8px rgba(255,255,255,0.7), 0 4px 10px rgba(18,18,18,0.06), 0 30px 70px rgba(18,18,18,0.18); } @media (max-width: 800px) { :root { --glass-blur: blur(12px) saturate(1.75); } } /* Vivid fruit-colour ambience — fixed, slowly drifting layer the frosted cards blur and refract. Injected by partials.js on customer pages only. */ #glass-ambience { position: fixed; inset: -22%; z-index: -1; pointer-events: none; background: radial-gradient(46vmax 38vmax at 16% 12%, rgba(255,206,0,0.50), transparent 65%), radial-gradient(40vmax 34vmax at 84% 24%, rgba(255,84,112,0.34), transparent 65%), radial-gradient(44vmax 36vmax at 24% 76%, rgba(95,190,126,0.30), transparent 65%), radial-gradient(38vmax 32vmax at 78% 82%, rgba(158,123,240,0.28), transparent 65%), radial-gradient(42vmax 36vmax at 55% 45%, rgba(255,174,61,0.26), transparent 65%); animation: amb-drift 46s ease-in-out infinite alternate; } #glass-ambience::after { content: ''; position: absolute; inset: 0; background: radial-gradient(38vmax 30vmax at 70% 14%, rgba(255,206,0,0.30), transparent 65%), radial-gradient(36vmax 30vmax at 12% 52%, rgba(255,84,112,0.22), transparent 65%), radial-gradient(40vmax 32vmax at 88% 64%, rgba(95,190,126,0.20), transparent 65%); animation: amb-drift2 38s ease-in-out infinite alternate; } @keyframes amb-drift { from { transform: translate(-3%, -2%) rotate(-2deg) scale(1); } to { transform: translate(3%, 3%) rotate(2deg) scale(1.08); } } @keyframes amb-drift2 { from { transform: translate(2%, 3%) scale(1.06); } to { transform: translate(-3%, -3%) scale(1); } } @media (prefers-reduced-motion: reduce) { #glass-ambience, #glass-ambience::after { animation: none; } } /* Chromium lens refraction — the displacement map bends the backdrop at each card's rim (centre stays clear) like Apple's Liquid Glass. `body .x` outranks the per-page declarations; browsers that can't render url() in backdrop-filter keep the plain frost above. Desktop only: displacement on 46 cards is too heavy for phones. */ @media (min-width: 801px) { body .news-card, body .tile, body .quote, body .faq-item, body .info-cell, body .item, body .perk, body .form-card, body .state-card, body .conf-card, body .stat-card, body .info-card { backdrop-filter: url(#lg) blur(3px) saturate(1.9) brightness(1.06); } body nav.nav { backdrop-filter: url(#lg) blur(12px) saturate(1.8); } } /* Press squish — glass gives slightly under the finger */ .tile:active, .item:active, .perk:active, .quote:active { transform: scale(0.985); transition-duration: 0.08s; } /* Roaming specular sheen — partials.js feeds --mx/--my on pointermove. Always faintly on (glass catches light at rest), brighter under the pointer. */ .news-card::after, .tile::after, .quote::after, .faq-item::after, .info-cell::after, .item::after, .perk::after, .form-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 1; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -20%), rgba(255,255,255,0.55), transparent 55%); opacity: 0.5; transition: opacity 0.4s; } .news-card:hover::after, .tile:hover::after, .quote:hover::after, .faq-item:hover::after, .info-cell:hover::after, .item:hover::after, .perk:hover::after, .form-card:hover::after { opacity: 1; } /* ===== Liquid-glass NAV — floating frosted bar over every page ===== */ .nav { background: rgba(245, 244, 242, 0.42); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); border-bottom: 1px solid rgba(255,255,255,0.65); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 10px 36px rgba(18,18,18,0.07); } @media (max-width: 900px) { .nav-links { background: rgba(245, 244, 242, 0.66); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); border-left: 1px solid rgba(255,255,255,0.7); } }