/* ============================================ ALVI - Theme System 3 switchable themes via data-theme on Theme 1: Elegant Premium (default) Theme 2: Modern Food E-commerce Theme 3: Card-based Ordering ============================================ */ /* ════════════════════════════════════════════ THEME 1: ELEGANT PREMIUM Dark header, serif accents, luxe gold tones, editorial whitespace, subtle shadows ════════════════════════════════════════════ */ [data-theme="elegant"], :root { /* Page background: warm beige */ --page-bg: #F0EBE3; /* Header: dark premium */ --header-bg: #1A1814; --header-text: var(--white); --header-nav-text: rgba(255,255,255,.6); --header-nav-hover: var(--white); --header-nav-active-bg: rgba(255,255,255,.1); --header-nav-active-text: var(--gold); --header-border: rgba(255,255,255,.06); --header-logo-text: var(--gold); --header-shadow: 0 2px 20px rgba(0,0,0,.3); /* Menu tabs */ --tab-bg: var(--white); --tab-text: var(--gray-600); --tab-border: var(--gray-300); --tab-active-bg: #1A1814; --tab-active-text: var(--white); --tab-hover-bg: var(--gray-100); --tab-hover-text: var(--gray-900); /* Day tabs */ --daytab-bg: var(--white); --daytab-border: var(--gray-200); --daytab-text: var(--gray-500); --daytab-active-bg: #1A1814; --daytab-active-text: var(--white); /* Section titles */ --section-title-color: #1A1814; /* Soup section: white card */ --soup-bg: var(--white); --soup-border: var(--gray-200); --soup-title: #1A1814; --soup-text: var(--gray-500); --soup-item-bg: var(--white); --soup-item-border: var(--gray-100); --soup-item-text: #1A1814; --soup-price: #1A1814; --soup-cta-bg: #1A1814; --soup-cta-text: var(--white); /* Main dish cards */ --card-bg: var(--white); --card-border: var(--gray-100); --card-hover-border: rgba(201,168,76,.3); --card-hover-shadow: 0 12px 32px -8px rgba(0,0,0,.12); --card-text: #1A1814; --card-img-h: 200px; --card-price-color: #1A1814; --card-cta-bg: #1A1814; --card-cta-text: var(--white); --card-radius: var(--radius-xl); /* Grid */ --grid-min-card: 260px; /* Cart summary */ --summary-bg: var(--white); --summary-border: var(--gray-100); --summary-text: #1A1814; --summary-accent: var(--gold); /* Cart sidebar */ --sidebar-bg: var(--white); --sidebar-border: var(--gray-200); --sidebar-cta-bg: var(--gold); --sidebar-cta-text: #1A1814; /* Page hero banner */ --hero-bg: #1A1814; --hero-text: var(--white); } /* ════════════════════════════════════════════ THEME 2: MODERN FOOD E-COMMERCE Bright, colorful, Uber Eats / DoorDash feel, green CTA, rounded cards, playful ════════════════════════════════════════════ */ [data-theme="modern"] { --page-bg: #F7F8FA; --header-bg: var(--white); --header-text: var(--gray-900); --header-nav-text: var(--gray-500); --header-nav-hover: var(--gray-900); --header-nav-active-bg: #F0FBF0; --header-nav-active-text: #16A34A; --header-border: var(--gray-100); --header-logo-text: var(--gray-900); --header-shadow: 0 1px 3px rgba(0,0,0,.06); --tab-bg: var(--gray-100); --tab-text: var(--gray-500); --tab-border: var(--gray-200); --tab-active-bg: #16A34A; --tab-active-text: var(--white); --tab-hover-bg: #E5E7EB; --tab-hover-text: var(--gray-900); --daytab-bg: var(--white); --daytab-border: var(--gray-200); --daytab-text: var(--gray-500); --daytab-active-bg: #16A34A; --daytab-active-text: var(--white); --section-title-color: var(--gray-900); --soup-bg: linear-gradient(135deg, #FEF9EF 0%, #FFF7E6 100%); --soup-border: #FDE68A; --soup-title: #92400E; --soup-text: var(--gray-600); --soup-item-bg: var(--white); --soup-item-border: #FDE68A; --soup-item-text: var(--gray-900); --soup-price: #16A34A; --soup-cta-bg: #16A34A; --soup-cta-text: var(--white); --card-bg: var(--white); --card-border: var(--gray-100); --card-hover-border: #BBF7D0; --card-hover-shadow: 0 16px 40px -8px rgba(22,163,74,.12); --card-text: var(--gray-900); --card-img-h: 160px; --card-price-color: #16A34A; --card-cta-bg: #16A34A; --card-cta-text: var(--white); --card-radius: var(--radius-2xl); --grid-min-card: 240px; --summary-bg: var(--white); --summary-border: var(--gray-100); --summary-text: var(--gray-900); --summary-accent: #16A34A; --sidebar-bg: var(--white); --sidebar-border: var(--gray-100); --sidebar-cta-bg: #16A34A; --sidebar-cta-text: var(--white); --hero-bg: linear-gradient(135deg, #16A34A 0%, #15803D 100%); --hero-text: var(--white); } /* ════════════════════════════════════════════ THEME 3: CARD-BASED ORDERING Warm neutrals, large cards, horizontal soup banner, big prices, oversized CTAs, Shopify feel ════════════════════════════════════════════ */ [data-theme="cards"] { --page-bg: #F0EBE3; --header-bg: #1E1B18; --header-text: #FBF5EB; --header-nav-text: rgba(251,245,235,.55); --header-nav-hover: #FBF5EB; --header-nav-active-bg: rgba(201,168,76,.12); --header-nav-active-text: var(--gold); --header-border: rgba(255,255,255,.06); --header-logo-text: var(--gold); --header-shadow: 0 2px 16px rgba(0,0,0,.25); --tab-bg: #F5F0E8; --tab-text: #8C7B60; --tab-border: #E8DFD0; --tab-active-bg: #1E1B18; --tab-active-text: var(--gold); --tab-hover-bg: #E8DFD0; --tab-hover-text: #1E1B18; --daytab-bg: #FBF7F0; --daytab-border: #E8DFD0; --daytab-text: #8C7B60; --daytab-active-bg: #1E1B18; --daytab-active-text: var(--gold); --section-title-color: #1E1B18; --soup-bg: linear-gradient(135deg, #FBF7F0 0%, #F5EFE3 100%); --soup-border: #E8DFD0; --soup-title: #1E1B18; --soup-text: #8C7B60; --soup-item-bg: var(--white); --soup-item-border: #E8DFD0; --soup-item-text: #1E1B18; --soup-price: var(--gold-dark); --soup-cta-bg: var(--gold); --soup-cta-text: #1E1B18; --card-bg: var(--white); --card-border: #E8DFD0; --card-hover-border: var(--gold); --card-hover-shadow: 0 24px 56px -12px rgba(30,27,24,.15); --card-text: #1E1B18; --card-img-h: 200px; --card-price-color: #1E1B18; --card-cta-bg: var(--gold); --card-cta-text: #1E1B18; --card-radius: 24px; --grid-min-card: 300px; --summary-bg: #FBF7F0; --summary-border: #E8DFD0; --summary-text: #1E1B18; --summary-accent: var(--gold); --sidebar-bg: #FBF7F0; --sidebar-border: #E8DFD0; --sidebar-cta-bg: var(--gold); --sidebar-cta-text: #1E1B18; --hero-bg: #1E1B18; --hero-text: #FBF5EB; }