/* Edem theme presets — applied via data-menu-theme on . * Switching theme should re-skin EVERY UI element: header, buttons, * cart, language, booking, dropdowns, beach map, dish cards, etc. * * IMPORTANT: All themes MUST define ALL variables from styles.css :root * to ensure complete visual consistency. */ /* ---- Mediterranean ----------------------------------------------------- */ html[data-menu-theme="mediterranean"] { --bg: #fff8ea; --card: #ffffff; --hover: #fdeed1; --txt: #1e3a52; --sec: #4a6b80; --brd: rgba(10, 90, 138, 0.16); --acc: #0a5a8a; --blue: #0a5a8a; --sand: #e9b665; --header-bg: #fdf6ec; --header-text: #1a3a52; --primary: #0a5a8a; --btn-bg: #ffffff; --card-radius: 20px; --btn-radius: 14px; --font-family: "Cormorant Garamond","Playfair Display",Georgia,serif; --sh: 0 6px 22px rgba(10,90,138,0.10), 0 1px 4px rgba(10,90,138,0.05); --cat-ovl: linear-gradient(to top, rgba(253,246,236,0.92) 0%, rgba(253,246,236,0.55) 45%, transparent 100%); } html[data-menu-theme="mediterranean"] .btn-primary { background: var(--acc); color: #fff; } html[data-menu-theme="mediterranean"] .btn { background: var(--card); color: var(--txt); border-color: var(--brd); } html[data-menu-theme="mediterranean"] .header { background: var(--header-bg); color: var(--header-text); } html[data-menu-theme="mediterranean"] .tab.active { background: var(--acc); border-color: var(--acc); color: #fff; } /* ---- Beach Resort ------------------------------------------------------ */ html[data-menu-theme="beach-resort"] { --bg: linear-gradient(180deg, #d8f3f0 0%, #fff3d8 60%, #ffe9b3 100%); --card: rgba(255,255,255,0.92); --hover: rgba(255,255,255,1); --txt: #0d3a3f; --sec: #427377; --brd: rgba(13,58,63,0.14); --acc: #1ca6b5; --blue: #0d3a3f; --sand: #ffb86b; --primary: #1ca6b5; --header-bg: linear-gradient(135deg,#9be2d8,#fff3d8); --header-text: #0d3a3f; --btn-bg: #ffffff; --card-radius: 24px; --btn-radius: 50px; --font-family: "Montserrat","Inter",sans-serif; --sh: 0 10px 32px rgba(13,58,63,0.10), 0 1px 4px rgba(13,58,63,0.05); } html[data-menu-theme="beach-resort"] body { background: var(--bg) !important; } html[data-menu-theme="beach-resort"] .btn-primary { background: var(--sand); color: var(--blue); } html[data-menu-theme="beach-resort"] .header { background: var(--header-bg); } html[data-menu-theme="beach-resort"] .cart-icon { background: var(--acc); color: #fff; box-shadow: 0 10px 28px rgba(28,166,181,0.45); } /* ---- Italian Classic --------------------------------------------------- */ html[data-menu-theme="italian-classic"] { --bg: #fff7ee; --card: #fffaf3; --hover: #fff0db; --txt: #3a1f15; --sec: #8b6650; --brd: rgba(58,31,21,0.16); --acc: #a93226; --blue: #a93226; --sand: #d4a574; --header-bg: #fff8ef; --header-text: #3a1f15; --primary: #a93226; --card-radius: 10px; --btn-radius: 8px; --font-family: "Playfair Display","Cormorant Garamond",Georgia,serif; --sh: 0 4px 14px rgba(58,31,21,0.10); } html[data-menu-theme="italian-classic"] .btn { letter-spacing: 1.2px; text-transform: uppercase; font-weight: 500; } html[data-menu-theme="italian-classic"] .btn-primary { background: var(--acc); color: #fff; border:none; } html[data-menu-theme="italian-classic"] .tab.active { background: var(--acc); color:#fff; border-color: var(--acc); } /* ---- Minimal Light ----------------------------------------------------- */ html[data-menu-theme="minimal-light"] { --bg: #ffffff; --card: #ffffff; --hover: #f5f5f5; --txt: #111111; --sec: #6b6b6b; --brd: rgba(0,0,0,0.10); --acc: #111111; --blue: #555; --sand: #888; --header-bg: #ffffff; --header-text: #111111; --primary: #111111; --card-radius: 8px; --btn-radius: 6px; --font-family: "Inter","SF Pro Text",sans-serif; --sh: 0 1px 2px rgba(0,0,0,0.06); } html[data-menu-theme="minimal-light"] .btn { background: #fff; border: 1px solid var(--brd); } html[data-menu-theme="minimal-light"] .btn-primary { background: #111; color: #fff; } html[data-menu-theme="minimal-light"] .cart-icon { background:#111; color:#fff; box-shadow: 0 4px 12px rgba(0,0,0,0.18); } html[data-menu-theme="minimal-light"] .cat-card { border:1px solid var(--brd); box-shadow: none; } /* ---- Oriental Night ---------------------------------------------------- */ html[data-menu-theme="oriental-night"] { --bg: #0e0c1b; --card: #1a1828; --hover: #221e36; --txt: #f5e6c4; --sec: #c5b388; --brd: rgba(212,175,55,0.20); --acc: #d4af37; --blue: #3a2d56; --sand: #d4af37; --header-bg: #0e0c1b; --header-text: #f5e6c4; --primary: #d4af37; --card-radius: 14px; --btn-radius: 10px; --font-family: "Noto Serif","PT Serif",serif; --sh: 0 8px 32px rgba(0,0,0,0.65), 0 2px 8px rgba(212,175,55,0.10); --cat-ovl: linear-gradient(to top, rgba(14,12,27,0.92) 0%, rgba(14,12,27,0.45) 50%, transparent 100%); } html[data-menu-theme="oriental-night"] .btn-primary { background: var(--acc); color: #1a1428; } html[data-menu-theme="oriental-night"] .tab.active { background: var(--acc); color:#1a1428; border-color: var(--acc); } html[data-menu-theme="oriental-night"] .header { border-bottom: 1px solid rgba(212,175,55,0.25); background: rgba(14,12,27,0.85); backdrop-filter: blur(10px); } /* ═══════════════════════════════════════════════════════════════════════ EDEM BEACH — EXACT DESIGN FROM USER REFERENCE (sscoder.pro/dis_2) PURE MONOCHROME GLASSMORPHISM — NO COLORS, NO ACCENTS All elements: identical glass style with subtle animations only ═══════════════════════════════════════════════════════════════════════ */ html[data-menu-theme="edem-beach"] { /* Base font & colors */ --font-family: "Georgia", serif; --txt: #ffffff; --sec: rgba(255, 255, 255, 0.6); --brd: rgba(255, 255, 255, 0.15); /* Pure glass — identical for ALL elements */ --card: rgba(255, 255, 255, 0.08); --hover: rgba(255, 255, 255, 0.15); /* Dark background with video overlay */ --bg: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%); /* Shadows — subtle, monochrome only */ --sh: none; } /* 🌑 Apply background to body */ html[data-menu-theme="edem-beach"] body { font-family: 'Georgia', serif !important; overflow-x: hidden !important; color: #fff !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #0a0a0a !important; } /* 🎬 Video background container */ html[data-menu-theme="edem-beach"] .video-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } html[data-menu-theme="edem-beach"] .video-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%); z-index: -1; } /* 🏢 Header — pure glass */ html[data-menu-theme="edem-beach"] .header { position: fixed; top: 0; width: 100%; padding: 30px 60px; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; z-index: 100; color: #fff; } html[data-menu-theme="edem-beach"] .logo { font-size: 32px; letter-spacing: 8px; font-weight: 300; } /* 🗂️ Container & Grid */ html[data-menu-theme="edem-beach"] .container { padding: 150px 60px 50px; max-width: 1200px; margin: 0 auto; } html[data-menu-theme="edem-beach"] .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } /* 🪟 Category Cards — EXACT glass style from reference */ html[data-menu-theme="edem-beach"] .cat-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.15); padding: 50px 40px; cursor: pointer; transition: all 0.5s ease; position: relative; overflow: hidden; color: #fff; } /* Sliding light effect on hover */ html[data-menu-theme="edem-beach"] .cat-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.7s; } html[data-menu-theme="edem-beach"] .cat-card:hover::before { left: 100%; } html[data-menu-theme="edem-beach"] .cat-card:hover { background: rgba(255, 255, 255, 0.15); transform: scale(1.02); } html[data-menu-theme="edem-beach"] .cat-number { font-size: 14px; opacity: 0.6; margin-bottom: 15px; } html[data-menu-theme="edem-beach"] .cat-title { font-size: 32px; font-weight: 300; letter-spacing: 4px; margin-bottom: 15px; } html[data-menu-theme="edem-beach"] .cat-line { width: 60px; height: 1px; background: rgba(255, 255, 255, 0.5); margin-bottom: 20px; } /* 🔘 ALL Buttons — IDENTICAL glass style as cards, NO colors */ html[data-menu-theme="edem-beach"] .btn, html[data-menu-theme="edem-beach"] .btn-primary, html[data-menu-theme="edem-beach"] .submit-btn, html[data-menu-theme="edem-beach"] .add-btn, html[data-menu-theme="edem-beach"] .btn-orders, html[data-menu-theme="edem-beach"] .beach-close, html[data-menu-theme="edem-beach"] .close-modal, html[data-menu-theme="edem-beach"] .promo-popup-btn, html[data-menu-theme="edem-beach"] .tip-btn, html[data-menu-theme="edem-beach"] .filter-toggle, html[data-menu-theme="edem-beach"] .tab, html[data-menu-theme="edem-beach"] .review-tab, html[data-menu-theme="edem-beach"] .dish-order-btn, html[data-menu-theme="edem-beach"] .del-opt, html[data-menu-theme="edem-beach"] .filter-chip { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(15px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #fff !important; padding: 12px 24px !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.5s ease !important; position: relative !important; overflow: hidden !important; font-family: 'Georgia', serif !important; font-weight: 300 !important; letter-spacing: 1px !important; } /* Button hover — same as cards */ html[data-menu-theme="edem-beach"] .btn:hover, html[data-menu-theme="edem-beach"] .btn-primary:hover, html[data-menu-theme="edem-beach"] .submit-btn:hover, html[data-menu-theme="edem-beach"] .add-btn:hover, html[data-menu-theme="edem-beach"] .btn-orders:hover, html[data-menu-theme="edem-beach"] .beach-close:hover, html[data-menu-theme="edem-beach"] .close-modal:hover, html[data-menu-theme="edem-beach"] .promo-popup-btn:hover, html[data-menu-theme="edem-beach"] .tip-btn:hover, html[data-menu-theme="edem-beach"] .filter-toggle:hover, html[data-menu-theme="edem-beach"] .tab:hover, html[data-menu-theme="edem-beach"] .review-tab:hover, html[data-menu-theme="edem-beach"] .dish-order-btn:hover, html[data-menu-theme="edem-beach"] .del-opt:hover, html[data-menu-theme="edem-beach"] .filter-chip:hover { background: rgba(255, 255, 255, 0.15) !important; transform: scale(1.02) !important; } /* Button ::before sliding light */ html[data-menu-theme="edem-beach"] .btn::before, html[data-menu-theme="edem-beach"] .btn-primary::before, html[data-menu-theme="edem-beach"] .submit-btn::before, html[data-menu-theme="edem-beach"] .add-btn::before, html[data-menu-theme="edem-beach"] .btn-orders::before, html[data-menu-theme="edem-beach"] .beach-close::before, html[data-menu-theme="edem-beach"] .close-modal::before, html[data-menu-theme="edem-beach"] .promo-popup-btn::before, html[data-menu-theme="edem-beach"] .tip-btn::before, html[data-menu-theme="edem-beach"] .filter-toggle::before, html[data-menu-theme="edem-beach"] .tab::before, html[data-menu-theme="edem-beach"] .review-tab::before, html[data-menu-theme="edem-beach"] .dish-order-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.7s; } html[data-menu-theme="edem-beach"] .btn:hover::before, html[data-menu-theme="edem-beach"] .btn-primary:hover::before, html[data-menu-theme="edem-beach"] .submit-btn:hover::before, html[data-menu-theme="edem-beach"] .add-btn:hover::before, html[data-menu-theme="edem-beach"] .btn-orders:hover::before, html[data-menu-theme="edem-beach"] .beach-close:hover::before, html[data-menu-theme="edem-beach"] .close-modal:hover::before, html[data-menu-theme="edem-beach"] .promo-popup-btn:hover::before, html[data-menu-theme="edem-beach"] .tip-btn:hover::before, html[data-menu-theme="edem-beach"] .filter-toggle:hover::before, html[data-menu-theme="edem-beach"] .tab:hover::before, html[data-menu-theme="edem-beach"] .review-tab:hover::before, html[data-menu-theme="edem-beach"] .dish-order-btn:hover::before { left: 100%; } /* 🗣️ Modals — pure glass */ html[data-menu-theme="edem-beach"] .modal, html[data-menu-theme="edem-beach"] .beach-modal { background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(10px) !important; } html[data-menu-theme="edem-beach"] .modal-box, html[data-menu-theme="edem-beach"] .beach-box { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(15px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #fff !important; } /* 📝 Forms & Inputs */ html[data-menu-theme="edem-beach"] input, html[data-menu-theme="edem-beach"] select, html[data-menu-theme="edem-beach"] textarea, html[data-menu-theme="edem-beach"] .lang-select { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #fff !important; padding: 10px 14px !important; border-radius: 6px !important; font-family: 'Georgia', serif !important; } html[data-menu-theme="edem-beach"] input:focus, html[data-menu-theme="edem-beach"] select:focus, html[data-menu-theme="edem-beach"] textarea:focus { background: rgba(255, 255, 255, 0.15) !important; outline: none !important; } /* 💰 Prices — just white, NO gold */ html[data-menu-theme="edem-beach"] .item-price, html[data-menu-theme="edem-beach"] .cart-total, html[data-menu-theme="edem-beach"] .grand, html[data-menu-theme="edem-beach"] .dish-price { color: rgba(255, 255, 255, 0.95) !important; font-weight: 400 !important; text-shadow: none !important; } /* ⭐ Icons — white, NO colored glow */ html[data-menu-theme="edem-beach"] [data-icon] svg, html[data-menu-theme="edem-beach"] .has-icon svg { color: rgba(255, 255, 255, 0.92) !important; transition: color 0.25s ease !important; } html[data-menu-theme="edem-beach"] [data-icon]:hover svg, html[data-menu-theme="edem-beach"] .has-icon:hover svg { color: rgba(255, 255, 255, 0.98) !important; } /* 🛒 Cart Icon — pure glass */ html[data-menu-theme="edem-beach"] .cart-icon { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(15px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #fff !important; } html[data-menu-theme="edem-beach"] .cart-count { background: rgba(255, 255, 255, 0.15) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } /* 🏖️ Beach Map — glass chairs */ html[data-menu-theme="edem-beach"] .chair { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } html[data-menu-theme="edem-beach"] .chair.selected { background: rgba(255, 255, 255, 0.15) !important; transform: scale(1.02) !important; } html[data-menu-theme="edem-beach"] .sea-ind { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } /* 🚫 Hide theme toggle for this template */ html[data-menu-theme="edem-beach"] .theme-toggle { display: none !important; } /* 📱 Responsive */ @media (max-width: 768px) { html[data-menu-theme="edem-beach"] .cat-grid { grid-template-columns: 1fr !important; } html[data-menu-theme="edem-beach"] .header { padding: 20px 30px !important; } html[data-menu-theme="edem-beach"] .container { padding: 120px 30px 40px !important; } } /* ═══════════════════════════════════════════════════════════════════════ FALLBACK: Ensure all elements use the same glass style ═══════════════════════════════════════════════════════════════════════ */ html[data-menu-theme="edem-beach"] .item, html[data-menu-theme="edem-beach"] .dropdown, html[data-menu-theme="edem-beach"] .bill-modal-box, html[data-menu-theme="edem-beach"] .rating-modal-box, html[data-menu-theme="edem-beach"] .dish-modal-box, html[data-menu-theme="edem-beach"] .promo-popup-box, html[data-menu-theme="edem-beach"] .guest-reg-box, html[data-menu-theme="edem-beach"] .my-orders-box, html[data-menu-theme="edem-beach"] .tracker-box, html[data-menu-theme="edem-beach"] .status-badge, html[data-menu-theme="edem-beach"] .beach-map { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(15px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #fff !important; } /* Preserve functionality: ensure all interactive elements remain clickable */ html[data-menu-theme="edem-beach"] [onclick], html[data-menu-theme="edem-beach"] button, html[data-menu-theme="edem-beach"] a, html[data-menu-theme="edem-beach"] .cat-card, html[data-menu-theme="edem-beach"] .chair { cursor: pointer !important; pointer-events: auto !important; } /* Ensure JS event listeners still work */ html[data-menu-theme="edem-beach"] [data-icon], html[data-menu-theme="edem-beach"] .has-icon { display: inline-flex !important; align-items: center !important; gap: 6px !important; } /* Video background support */ html[data-menu-theme="edem-beach"] #edemBgVideo { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -2; opacity: 0.6; pointer-events: none; } html[data-menu-theme="edem-beach"] #edemBgVideoOverlay { position: fixed; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%); z-index: -1; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════ 🎯 FINAL GUARANTEE: Pure monochrome, NO colored accents anywhere ═══════════════════════════════════════════════════════════════════════ */ html[data-menu-theme="edem-beach"] * { text-shadow: none !important; box-shadow: none !important; } html[data-menu-theme="edem-beach"] .cat-card, html[data-menu-theme="edem-beach"] .btn, html[data-menu-theme="edem-beach"] .modal-box, html[data-menu-theme="edem-beach"] .chair { box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important; } html[data-menu-theme="edem-beach"] .cat-card:hover, html[data-menu-theme="edem-beach"] .btn:hover, html[data-menu-theme="edem-beach"] .modal-box:hover, html[data-menu-theme="edem-beach"] .chair:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important; } /* ═══════════════════════════════════════════════════════════════════════ MOBILE READABILITY OVERRIDES (added) The glass fallback above makes the burger dropdown almost transparent over the video background, so on phones it visually merges with the scene. Give it a solid dark panel and a brighter burger icon. Also keep the section "back" button clearly framed. ═══════════════════════════════════════════════════════════════════════ */ html[data-menu-theme="edem-beach"] .dropdown { background: rgba(12, 16, 24, 0.97) !important; backdrop-filter: blur(22px) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; box-shadow: 0 18px 55px rgba(0, 0, 0, 0.65) !important; color: #fff !important; } html[data-menu-theme="edem-beach"] .dropdown .btn { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: #fff !important; } html[data-menu-theme="edem-beach"] .dropdown .btn:hover { background: rgba(255, 255, 255, 0.16) !important; } html[data-menu-theme="edem-beach"] .hamburger { background: rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: 12px !important; } html[data-menu-theme="edem-beach"] .hamburger span { background: #fff !important; } html[data-menu-theme="edem-beach"] .back-btn { background: rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; color: #fff !important; border-radius: 50px !important; }