:root { --wm-red: #ca1b20; --wm-cream: #FEF1E5; } /* Page background — cream beige. !important overrides the inline background on layouts.customer's . */ body.week-menu-page { background: var(--wm-cream) !important; } /* ========================================================== HEADER — reversed to red on this page (bg matches the cream header) Scoped via .week-menu-page on ========================================================== */ .week-menu-page .motw-nav { background: var(--wm-red); } /* Tint the red logo to cream so it reads on the red bar (same filter as footer.css) */ .week-menu-page .motw-nav-brand img { filter: brightness(0) saturate(100%) invert(97%) sepia(9%) saturate(500%) hue-rotate(320deg) brightness(103%); } .week-menu-page .motw-nav-links a { color: #fff; } .week-menu-page .motw-nav-links a:hover, .week-menu-page .motw-nav-links a.is-active { color: var(--motw-orange, #F39C2D); } .week-menu-page .motw-nav-cart { color: #fff; } .week-menu-page .motw-nav-cart:hover { color: var(--motw-orange, #F39C2D); } .week-menu-page .motw-nav-toggle { color: #fff; } .week-menu-page .motw-btn-signin { color: #fff; border-color: #fff; } .week-menu-page .motw-btn-signin:hover { background: #fff; color: var(--wm-red); } @media (max-width: 900px) { .week-menu-page .motw-nav-right { border-top-color: rgba(255,255,255,0.25); } } .week-menu-hero { padding: 60px 0 40px; } .week-menu-title { font-family: var(--font-heading, 'Sailor', sans-serif); color: #8c1c1c; /* A dark red color like in the image */ font-size: 2.5rem; margin-bottom: 15px; } .week-menu-subtitle { font-family: var(--font-body, 'Instrument Sans', sans-serif); color: #4a4a4a; font-size: 1.1rem; max-width: 700px; margin: 0 auto; line-height: 1.6; } .menu-card { background: #fff; border-radius: 20px; border: 1px solid #e0e0e0; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; /* Adds space on left and right side of cards */ } .menu-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); } .menu-card-img-container { position: relative; padding: 10px; } .menu-card-img-container img { width: 100%; height: 250px; object-fit: cover; border-radius: 15px; } .add-btn { position: absolute; top: 20px; right: 20px; background-color: #e51d20; color: #fff; border: none; padding: 6px 16px; border-radius: 8px; font-weight: bold; font-family: var(--font-body, 'Instrument Sans', sans-serif); font-size: 0.9rem; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .add-btn:hover { background-color: #cc1a1d; } .menu-card-body { padding: 15px 20px 20px; display: flex; flex-direction: column; flex-grow: 1; } .menu-card-title { font-family: var(--font-heading, 'Sailor', sans-serif); color: #2c2c2c; font-size: 1.5rem; margin-bottom: 10px; } .menu-card-desc { font-family: var(--font-body, 'Instrument Sans', sans-serif); color: #666; font-size: 0.95rem; margin-bottom: 20px; flex-grow: 1; } .menu-card-footer { display: flex; flex-direction: column; gap: 10px; } .calorie-badge { background-color: #61bb61; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; display: inline-block; width: fit-content; } .dietary-tags { font-size: 0.8rem; color: #888; font-family: var(--font-body, 'Instrument Sans', sans-serif); }