/* ============================================================ MASH RESTO CAFE — Global App Stylesheet Three-tier design system: premium | executive | normal Theme is driven by data-theme attribute on . ============================================================ */ /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--bg-base); color: var(--text-primary); overflow-x: hidden; -webkit-font-smoothing: antialiased; min-height: 100vh; transition: background-color 0.3s ease; } a { color: inherit; text-decoration: none; } /* ================================================================ DESIGN TOKEN DEFAULTS (Normal / Bistro theme) ================================================================ */ :root { --bg-base: #180A0A; --bg-surface: rgba(255,255,255,0.03); --bg-card: rgba(28,15,15,0.85); --bg-nav: rgba(24,10,10,0.92); --bg-sticky: rgba(24,10,10,0.94); --accent-primary: #EF4444; --accent-secondary: #F87171; --accent-gradient: linear-gradient(135deg, #DC2626, #991B1B); --accent-glow: rgba(239,68,68,0.25); --text-primary: #f3f4f6; --text-muted: rgba(255,255,255,0.6); --text-faint: rgba(255,255,255,0.3); --border-subtle: rgba(255,255,255,0.08); --border-accent: rgba(239,68,68,0.35); --border-card: rgba(239,68,68,0.18); --border-card-hover:rgba(239,68,68,0.55); --border-nav: rgba(239,68,68,0.2); --card-radius: 1.25rem; --pill-radius: 9999px; --btn-radius: 9999px; --orb1-color: rgba(220,38,38,0.14); --orb2-color: rgba(185,28,28,0.09); --orb3-color: rgba(239,68,68,0.06); --hero-height: 300px; --hero-height-lg: 360px; --hero-overlay: linear-gradient(to bottom, rgba(24,10,10,0.45) 0%, rgba(24,10,10,0.75) 60%, #180A0A 100%); --hero-brightness: 0.65; --nav-border-style: 1px solid rgba(239,68,68,0.2); --sticky-border: 1px solid rgba(255,255,255,0.06); --price-bg: linear-gradient(135deg, #DC2626, #991B1B); --price-color: #fff; --back-btn-bg: rgba(239,68,68,0.1); --back-btn-border: rgba(239,68,68,0.3); --back-btn-color: #EF4444; --cat-active-bg: linear-gradient(135deg, #DC2626, #991B1B); --cat-active-color: #fff; --cat-active-border:#EF4444; --cat-header-line: rgba(239,68,68,0.45); --badge-bg: rgba(239,68,68,0.12); --badge-border: rgba(239,68,68,0.3); --badge-color: #EF4444; --badge-dot: #EF4444; --card-shadow-hover:0 16px 40px rgba(0,0,0,0.5), 0 0 28px rgba(239,68,68,0.15); --ing-label-color: #EF4444; --cat-count-color: #EF4444; --footer-accent: #EF4444; --client-tag-color: #EF4444; } /* ================================================================ PREMIUM THEME — Luxury Gold & Black ================================================================ */ body[data-theme="premium"] { --bg-base: #050404; --bg-surface: rgba(255,255,255,0.02); --bg-card: rgba(12,10,8,0.9); --bg-nav: rgba(5,4,4,0.96); --bg-sticky: rgba(5,4,4,0.97); --accent-primary: #C9A84C; --accent-secondary: #E8D5A0; --accent-gradient: linear-gradient(135deg, #C9A84C, #A8862A); --accent-glow: rgba(201,168,76,0.2); --text-primary: #F5EDD8; --text-muted: rgba(245,237,216,0.55); --text-faint: rgba(245,237,216,0.28); --border-subtle: rgba(201,168,76,0.08); --border-accent: rgba(201,168,76,0.3); --border-card: rgba(201,168,76,0.18); --border-card-hover:rgba(201,168,76,0.6); --border-nav: rgba(201,168,76,0.2); --card-radius: 0.75rem; --pill-radius: 4px; --btn-radius: 6px; --orb1-color: rgba(201,168,76,0.12); --orb2-color: rgba(168,134,42,0.09); --orb3-color: rgba(201,168,76,0.06); --hero-height: 380px; --hero-height-lg: 460px; --hero-overlay: linear-gradient(to bottom, rgba(5,4,4,0.35) 0%, rgba(5,4,4,0.72) 55%, #050404 100%); --hero-brightness: 0.5; --nav-border-style: 1px solid rgba(201,168,76,0.2); --sticky-border: 1px solid rgba(201,168,76,0.15); --price-bg: linear-gradient(135deg, #C9A84C, #A8862A); --price-color: #050404; --back-btn-bg: rgba(201,168,76,0.08); --back-btn-border: rgba(201,168,76,0.3); --back-btn-color: #C9A84C; --cat-active-bg: linear-gradient(135deg, #C9A84C, #A8862A); --cat-active-color: #050404; --cat-active-border:#C9A84C; --cat-header-line: rgba(201,168,76,0.4); --badge-bg: rgba(201,168,76,0.1); --badge-border: rgba(201,168,76,0.3); --badge-color: #C9A84C; --badge-dot: #C9A84C; --card-shadow-hover:0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(201,168,76,0.15); --ing-label-color: #C9A84C; --cat-count-color: #C9A84C; --footer-accent: #C9A84C; --client-tag-color: #C9A84C; } /* ================================================================ EXECUTIVE THEME — Corporate Navy & Copper ================================================================ */ body[data-theme="executive"] { --bg-base: #0D1B2A; --bg-surface: rgba(255,255,255,0.03); --bg-card: rgba(13,27,42,0.9); --bg-nav: rgba(10,20,32,0.97); --bg-sticky: rgba(10,20,32,0.98); --accent-primary: #D97B4A; --accent-secondary: #6EB5D4; --accent-gradient: linear-gradient(135deg, #D97B4A, #B85E30); --accent-glow: rgba(217,123,74,0.2); --text-primary: #E8EDF2; --text-muted: rgba(232,237,242,0.55); --text-faint: rgba(232,237,242,0.28); --border-subtle: rgba(217,123,74,0.08); --border-accent: rgba(217,123,74,0.35); --border-card: rgba(217,123,74,0.15); --border-card-hover:rgba(217,123,74,0.55); --border-nav: rgba(217,123,74,0.35); --card-radius: 0.5rem; --pill-radius: 6px; --btn-radius: 6px; --orb1-color: rgba(110,181,212,0.08); --orb2-color: rgba(217,123,74,0.09); --orb3-color: rgba(13,27,42,0.0); --hero-height: 240px; --hero-height-lg: 280px; --hero-overlay: linear-gradient(to bottom, rgba(10,20,32,0.7) 0%, rgba(10,20,32,0.88) 60%, #0D1B2A 100%); --hero-brightness: 0.4; --nav-border-style: 3px solid #D97B4A; --sticky-border: 2px solid rgba(217,123,74,0.4); --price-bg: linear-gradient(135deg, #D97B4A, #B85E30); --price-color: #fff; --back-btn-bg: rgba(217,123,74,0.1); --back-btn-border: rgba(217,123,74,0.4); --back-btn-color: #D97B4A; --cat-active-bg: linear-gradient(135deg, #D97B4A, #B85E30); --cat-active-color: #fff; --cat-active-border:#D97B4A; --cat-header-line: rgba(217,123,74,0.4); --badge-bg: rgba(217,123,74,0.1); --badge-border: rgba(217,123,74,0.3); --badge-color: #D97B4A; --badge-dot: #D97B4A; --card-shadow-hover:0 12px 32px rgba(0,0,0,0.5), 4px 0 0 0 #D97B4A; --ing-label-color: #D97B4A; --cat-count-color: #D97B4A; --footer-accent: #D97B4A; --client-tag-color: #D97B4A; } /* ================================================================ CAFE THEME — Warm Bistro & Sage Green ================================================================ */ body[data-theme="cafe"] { --bg-base: #1C1917; --bg-surface: rgba(255,255,255,0.03); --bg-card: rgba(28,25,23,0.85); --bg-nav: rgba(28,25,23,0.92); --bg-sticky: rgba(28,25,23,0.94); --accent-primary: #7CAB6D; --accent-secondary: #E8A020; --accent-gradient: linear-gradient(135deg, #7CAB6D, #5D8F50); --accent-glow: rgba(124,171,109,0.25); --text-primary: #f3f4f6; --text-muted: rgba(255,255,255,0.55); --text-faint: rgba(255,255,255,0.3); --border-subtle: rgba(255,255,255,0.08); --border-accent: rgba(124,171,109,0.35); --border-card: rgba(124,171,109,0.15); --border-card-hover:rgba(124,171,109,0.5); --border-nav: rgba(124,171,109,0.15); --card-radius: 1.25rem; --pill-radius: 9999px; --btn-radius: 9999px; --orb1-color: rgba(124,171,109,0.10); --orb2-color: rgba(232,160,32,0.07); --orb3-color: rgba(93,143,80,0.06); --hero-height: 300px; --hero-height-lg: 360px; --hero-overlay: linear-gradient(to bottom, rgba(28,25,23,0.45) 0%, rgba(28,25,23,0.75) 60%, #1C1917 100%); --hero-brightness: 0.65; --nav-border-style: 1px solid rgba(124,171,109,0.15); --sticky-border: 1px solid rgba(255,255,255,0.06); --price-bg: linear-gradient(135deg, #7CAB6D, #5D8F50); --price-color: #000; --back-btn-bg: rgba(124,171,109,0.1); --back-btn-border: rgba(124,171,109,0.3); --back-btn-color: #7CAB6D; --cat-active-bg: linear-gradient(135deg, #7CAB6D, #5D8F50); --cat-active-color: #000; --cat-active-border:#7CAB6D; --cat-header-line: rgba(124,171,109,0.45); --badge-bg: rgba(124,171,109,0.12); --badge-border: rgba(124,171,109,0.3); --badge-color: #7CAB6D; --badge-dot: #7CAB6D; --card-shadow-hover:0 16px 40px rgba(0,0,0,0.45), 0 0 28px rgba(124,171,109,0.1); --ing-label-color: #7CAB6D; --cat-count-color: #7CAB6D; --footer-accent: #7CAB6D; --client-tag-color: #7CAB6D; } /* ================================================================ SHARED STRUCTURAL STYLES (use CSS variables throughout) ================================================================ */ /* ── Ambient Orbs ── */ #bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bg-orb { position: absolute; border-radius: 50%; filter: blur(140px); } .orb-1 { top: -12rem; left: -10rem; width: 750px; height: 750px; background: var(--orb1-color); animation: floatOrb 24s ease-in-out infinite; } .orb-2 { top: 45%; right: -15rem; width: 650px; height: 650px; background: var(--orb2-color); animation: floatOrb 20s ease-in-out infinite reverse; } .orb-3 { bottom: -10rem; left: 25%; width: 550px; height: 550px; background: var(--orb3-color); animation: floatOrb 28s ease-in-out infinite 4s; } @keyframes floatOrb { 0%, 100% { transform: scale(1) translate(0, 0); } 33% { transform: scale(1.08) translate(30px, -20px); } 66% { transform: scale(0.92) translate(-25px, 25px); } } /* ── PJAX Viewport ── */ #app-viewport { position: relative; z-index: 10; min-height: 100vh; transition: opacity 0.4s ease, transform 0.4s ease; } #app-viewport.page-leaving { opacity: 0; transform: translateY(-16px); pointer-events: none; } #app-viewport.page-entering { opacity: 0; transform: translateY(16px); } /* ── GSAP Reveal ── */ .gsap-reveal { opacity: 0; transform: translateY(30px); } /* ================================================================ HOME PAGE STYLES ================================================================ */ #main-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 1.25rem 2.5rem; display: flex; align-items: center; justify-content: space-between; background: var(--bg-nav); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: var(--nav-border-style); } @media (max-width: 640px) { #main-nav { padding: 1rem 1.25rem; } } .brand-logo { display: flex; flex-direction: column; gap: 0.15rem; } .brand-client { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--client-tag-color); font-weight: 800; } .brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.35rem; font-weight: 800; color: var(--text-primary); letter-spacing: 0.02em; } .nav-right-actions { display: flex; align-items: center; gap: 1rem; } .nav-admin-link { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); padding: 0.5rem 1.1rem; border-radius: var(--btn-radius); border: 1px solid var(--border-subtle); background: var(--bg-surface); transition: all 0.25s ease; } .nav-admin-link:hover { color: var(--accent-primary); border-color: var(--border-accent); } /* ── Home Hero ── */ .home-hero { position: relative; min-height: 85vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 9rem 1.5rem 4rem; max-width: 1100px; margin: 0 auto; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1.25rem; border-radius: var(--pill-radius); background: var(--badge-bg); border: 1px solid var(--badge-border); color: var(--badge-color); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; margin-bottom: 2rem; } .hero-badge-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--badge-dot); box-shadow: 0 0 10px var(--badge-dot); } .hero-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(2.75rem, 7.5vw, 5.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 1.5rem; } .hero-title span { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--text-muted); max-width: 42rem; margin: 0 auto 3rem; line-height: 1.7; font-weight: 400; } .hero-cta-group { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; } .btn-secondary { display: inline-flex; align-items: center; gap: 0.625rem; background: var(--bg-surface); border: 1px solid var(--border-accent); color: var(--text-primary); font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.9rem 2.25rem; border-radius: var(--btn-radius); transition: all 0.3s ease; backdrop-filter: blur(8px); } .btn-secondary:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); } /* ── About Section ── */ .brief-section { padding: 6rem 1.5rem; max-width: 1100px; margin: 0 auto; } .brief-box { background: var(--bg-surface); border: 1px solid var(--border-card); border-radius: var(--card-radius); padding: 4rem 3rem; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.4); } @media (max-width: 640px) { .brief-box { padding: 2.5rem 1.5rem; } } .brief-eyebrow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--accent-primary); font-weight: 700; margin-bottom: 1rem; } .brief-heading { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; color: var(--text-primary); margin-bottom: 1.5rem; line-height: 1.15; letter-spacing: -0.01em; } .brief-text { font-size: 1.05rem; color: var(--text-muted); line-height: 1.8; max-width: 48rem; margin: 0 auto 3rem; font-weight: 400; } .pillars-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; text-align: left; } @media (min-width: 768px) { .pillars-grid { grid-template-columns: repeat(3, 1fr); } } .pillar-card { background: rgba(0,0,0,0.35); border: 1px solid var(--border-card); border-radius: var(--card-radius); padding: 2rem; transition: border-color 0.3s ease; } .pillar-card:hover { border-color: var(--border-card-hover); } .pillar-icon { font-size: 2rem; margin-bottom: 1rem; } .pillar-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; } .pillar-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; font-weight: 400; } /* ================================================================ MENU PAGE STYLES ================================================================ */ /* ── Sticky Header ── */ #sticky-header { position: sticky; top: 0; z-index: 100; background: var(--bg-sticky); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: var(--sticky-border); } /* Executive — bold left rule on sticky header */ body[data-theme="executive"] #sticky-header { border-bottom: none; border-top: 3px solid var(--accent-primary); box-shadow: 0 2px 0 0 rgba(217,123,74,0.25); } .header-top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 2rem; max-width: 1280px; margin: 0 auto; } @media (max-width: 768px) { .header-top { padding: 0.75rem 1.25rem; gap: 0.75rem; } } .header-brand-info { display: flex; align-items: center; gap: 1rem; } .header-back-btn { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--back-btn-color); font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.9rem; border-radius: var(--btn-radius); background: var(--back-btn-bg); border: 1px solid var(--back-btn-border); transition: all 0.2s ease; white-space: nowrap; flex-shrink: 0; } .header-back-btn:hover { opacity: 0.85; transform: translateX(-2px); } .header-title-wrap { display: flex; flex-direction: column; gap: 0.1rem; } .header-client-tag { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--client-tag-color); font-weight: 800; } .header-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.2; } /* ── Dual-Track Toggle ── */ .dual-track-toggle { display: flex; background: var(--bg-surface); padding: 0.25rem; border-radius: var(--pill-radius); border: 1px solid var(--border-subtle); flex-shrink: 0; } .dual-btn { padding: 0.5rem 1.25rem; border-radius: var(--pill-radius); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; border: none; background: transparent; color: var(--text-muted); transition: all 0.25s ease; font-family: 'Plus Jakarta Sans', sans-serif; display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .dual-btn:hover { color: var(--text-primary); } .dual-btn.active { background: var(--accent-gradient); color: var(--price-color); box-shadow: 0 4px 14px var(--accent-glow); } /* ── Category Pill Bar ── */ #category-bar { display: flex; gap: 0.625rem; overflow-x: auto; padding: 0.6rem 2rem 0.8rem; scroll-behavior: smooth; max-width: 1280px; margin: 0 auto; border-top: 1px solid var(--border-subtle); } @media (max-width: 640px) { #category-bar { padding: 0.6rem 1.25rem 0.8rem; } } #category-bar::-webkit-scrollbar { display: none; } #category-bar { -ms-overflow-style: none; scrollbar-width: none; } .cat-pill { white-space: nowrap; padding: 0.45rem 1.35rem; border-radius: var(--pill-radius); font-size: 0.8rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-muted); transition: all 0.25s ease; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; } .cat-pill:hover { border-color: var(--border-accent); color: var(--text-primary); } .cat-pill.active { background: var(--cat-active-bg); color: var(--cat-active-color); border-color: var(--cat-active-border); font-weight: 700; box-shadow: 0 4px 18px var(--accent-glow); } /* ── Hero Banner ── */ #hero-banner { position: relative; height: var(--hero-height); overflow: hidden; } @media (min-width: 640px) { #hero-banner { height: var(--hero-height-lg); } } #hero-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.6s ease; filter: brightness(var(--hero-brightness)); } #hero-gradient { position: absolute; inset: 0; background: var(--hero-overlay); } #hero-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem; } /* Executive: left-align hero text */ body[data-theme="executive"] #hero-text { align-items: flex-start; padding-left: 2rem; text-align: left; } #hero-tagline { font-size: 0.7rem; color: var(--accent-primary); text-transform: uppercase; letter-spacing: 0.3em; font-weight: 700; margin-bottom: 0.625rem; } #hero-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(2.25rem, 8vw, 3.75rem); color: var(--text-primary); margin-bottom: 0.75rem; line-height: 1.15; letter-spacing: -0.02em; } #hero-desc { color: var(--text-muted); font-size: 0.9rem; max-width: 32rem; font-weight: 400; } /* ── Premium: decorative gold line under hero title ── */ body[data-theme="premium"] #hero-title::after { content: ''; display: block; width: 60px; height: 2px; background: var(--accent-primary); margin: 0.75rem auto 0; } /* ── Menu Main Container ── */ #menu-main { max-width: 1280px; margin: 0 auto; padding: 3rem 2rem 6rem; } @media (max-width: 640px) { #menu-main { padding: 2rem 1.25rem 4rem; } } /* ── Category Section ── */ .cat-section { margin-bottom: 4.5rem; scroll-margin-top: 150px; } .cat-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2rem; } .cat-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(1.4rem, 3.5vw, 2rem); color: var(--text-primary); letter-spacing: -0.02em; white-space: nowrap; } .cat-divider { flex: 1; height: 1px; background: linear-gradient(to right, var(--cat-header-line), transparent); } .cat-count { color: var(--cat-count-color); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; } /* ── Items Grid ── */ .items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; align-items: start; } @media (max-width: 580px) { .items-grid { grid-template-columns: 1fr; } } /* ── Unified Item Card ── */ .item-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--card-radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; } .item-card:hover { border-color: var(--border-card-hover); transform: translateY(-5px); box-shadow: var(--card-shadow-hover); } /* Executive: left copper border accent instead of full border glow */ body[data-theme="executive"] .item-card { border-left: 3px solid rgba(217,123,74,0.35); border-top: none; border-right: none; border-bottom: none; border-radius: var(--card-radius); outline: 1px solid rgba(255,255,255,0.06); } body[data-theme="executive"] .item-card:hover { border-left-color: var(--accent-primary); outline-color: rgba(217,123,74,0.2); transform: translateX(4px) translateY(-2px); box-shadow: -4px 8px 32px rgba(0,0,0,0.4); } /* Card Image Area */ .card-img-wrap { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(0,0,0,0.6); flex-shrink: 0; } .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .item-card:hover .card-img-wrap img { transform: scale(1.06); } .card-img-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%); } /* Ingredients hover overlay */ .card-img-wrap .ingredients-overlay { position: absolute; inset: 0; z-index: 10; background: rgba(0,0,0,0.88); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.25rem; text-align: center; opacity: 0; transition: opacity 0.3s ease; } .card-img-wrap:hover .ingredients-overlay { opacity: 1; } .ing-label { color: var(--ing-label-color); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; margin-bottom: 0.4rem; } .ing-text { color: rgba(255,255,255,0.9); font-size: 0.82rem; line-height: 1.5; font-weight: 400; } /* Sold Out */ .unavailable-overlay { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; } .unavailable-badge { color: #fff; font-weight: 700; letter-spacing: 0.2em; font-size: 0.75rem; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.35); padding: 0.4rem 1.25rem; border-radius: var(--pill-radius); background: rgba(0,0,0,0.5); } /* Card Body */ .card-body { padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } .card-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .card-item-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text-primary); line-height: 1.3; flex: 1; letter-spacing: -0.01em; } .card-price-tag { flex-shrink: 0; background: var(--price-bg); color: var(--price-color); font-weight: 800; font-size: 0.88rem; padding: 0.3rem 0.85rem; border-radius: var(--pill-radius); box-shadow: 0 3px 12px var(--accent-glow); align-self: flex-start; white-space: nowrap; } .card-item-desc { color: var(--text-muted); font-size: 0.82rem; line-height: 1.55; font-weight: 400; } .card-footer-notes { font-size: 0.75rem; color: var(--accent-primary); margin-top: auto; line-height: 1.4; opacity: 0.75; } .card-sold-out-label { color: #ef4444; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; } /* ── Premium: shimmer line under card header ── */ body[data-theme="premium"] .card-body { border-top: 1px solid rgba(201,168,76,0.12); } /* ── Empty State ── */ .empty-state { text-align: center; padding: 6rem 1.5rem; color: var(--text-faint); font-size: 1.1rem; } /* ── Footer ── */ footer { border-top: 1px solid var(--border-subtle); padding: 2.5rem 1.5rem; text-align: center; font-size: 0.75rem; position: relative; z-index: 10; } .footer-client { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--footer-accent); font-weight: 800; margin-bottom: 0.35rem; } .footer-copy { color: var(--text-faint); font-weight: 400; }