:root { --plans-red: #ca1b20; --plans-red-dark: #a81419; --plans-cream: #FEF1E5; } /* ========================================================== HEADER — reversed to red on this page (bg matches the cream header) Scoped via .plans-page on ========================================================== */ .plans-page .motw-nav { background: var(--plans-red); } /* Tint the red logo to cream so it reads on the red bar (same filter as footer.css) */ .plans-page .motw-nav-brand img { filter: brightness(0) saturate(100%) invert(97%) sepia(9%) saturate(500%) hue-rotate(320deg) brightness(103%); } .plans-page .motw-nav-links a { color: #fff; } .plans-page .motw-nav-links a:hover, .plans-page .motw-nav-links a.is-active { color: var(--motw-orange, #F39C2D); } .plans-page .motw-nav-cart { color: #fff; } .plans-page .motw-nav-cart:hover { color: var(--motw-orange, #F39C2D); } .plans-page .motw-nav-toggle { color: #fff; } .plans-page .motw-btn-signin { color: #fff; border-color: #fff; } .plans-page .motw-btn-signin:hover { background: #fff; color: var(--plans-red); } @media (max-width: 900px) { .plans-page .motw-nav-right { border-top-color: rgba(255,255,255,0.25); } } .plans-hero { padding: 60px 0 40px; } .plans-title { font-family: var(--font-heading, 'Sailor', sans-serif); color: #8c1c1c; /* Dark red color */ font-size: 2.5rem; margin-bottom: 15px; } .plans-subtitle { font-family: var(--font-body, 'Instrument Sans', sans-serif); color: #4a4a4a; font-size: 1.1rem; margin-bottom: 50px; } .plan-card { background: #fff4eb; /* Light peach/orange background */ border-radius: 20px; padding: 30px; text-align: left; height: 100%; display: flex; flex-direction: column; border: none; } .plan-badge { border: 1px solid #c97e7e; color: #c97e7e; border-radius: 20px; padding: 4px 12px; font-size: 0.8rem; font-family: var(--font-body, 'Instrument Sans', sans-serif); display: inline-block; margin-bottom: 20px; width: fit-content; } .plan-name { font-family: var(--font-heading, 'Sailor', sans-serif); color: #8c1c1c; font-size: 2rem; margin-bottom: 10px; } .plan-desc { font-family: var(--font-body, 'Instrument Sans', sans-serif); color: #666; font-size: 0.95rem; font-style: italic; margin-bottom: 20px; flex-grow: 1; } .plan-meals { font-family: var(--font-body, 'Instrument Sans', sans-serif); color: #8c1c1c; font-size: 0.95rem; margin-bottom: 20px; } .plan-price-week { font-family: var(--font-heading, 'Sailor', sans-serif); color: #5a1111; font-size: 1.4rem; margin-bottom: 5px; } .plan-price-meal { font-family: var(--font-body, 'Instrument Sans', sans-serif); color: #666; font-size: 0.9rem; font-style: italic; } .plan-view-btn { display: block; margin-top: 16px; background: var(--plans-red); color: #fff; border-radius: 25px; padding: 10px 0; text-align: center; font-family: var(--font-body, 'Instrument Sans', sans-serif); font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: background 0.2s; } .plan-view-btn:hover { background: var(--plans-red-dark); color: #fff; } .build-plan-section { padding: 40px 0; text-align: center; } .build-plan-title { font-family: var(--font-heading, 'Sailor', sans-serif); color: #1b263b; /* Dark blue/gray */ font-size: 1.8rem; margin-bottom: 20px; } .build-plan-btn { background-color: var(--plans-red); color: #fff; font-family: var(--font-body, 'Instrument Sans', sans-serif); font-weight: bold; border: none; border-radius: 25px; padding: 10px 25px; font-size: 1rem; text-decoration: none; display: inline-block; transition: background-color 0.2s; } .build-plan-btn:hover { background-color: var(--plans-red-dark); color: #fff; } .comparison-table-wrapper { background-color: #e51d20; /* Bright red */ border-radius: 20px; padding: 30px; color: #fff; font-family: var(--font-body, 'Instrument Sans', sans-serif); margin-top: 20px; overflow-x: auto; } .comparison-table { width: 100%; min-width: 600px; border-collapse: collapse; } .comparison-table th, .comparison-table td { padding: 15px 10px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.2); } .comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: none; } .comparison-table th { font-weight: 500; font-size: 1rem; } .comparison-table th:first-child, .comparison-table td:first-child { text-align: left; font-weight: bold; width: 25%; } .faq-section { padding: 60px 0; } .faq-title { font-family: var(--font-heading, 'Sailor', sans-serif); color: #1b263b; font-size: 2rem; text-align: center; margin-bottom: 40px; } .accordion-item { background-color: #e9ecef; border: none; border-radius: 10px !important; margin-bottom: 15px; overflow: hidden; } .accordion-button { background-color: #e9ecef; color: #1b263b; font-family: var(--font-body, 'Instrument Sans', sans-serif); font-weight: 500; font-size: 1.1rem; padding: 20px; box-shadow: none !important; } .accordion-button:not(.collapsed) { background-color: #e9ecef; color: #1b263b; } .accordion-body { font-family: var(--font-body, 'Instrument Sans', sans-serif); color: #4a4a4a; padding: 0 20px 20px; font-size: 0.95rem; line-height: 1.6; } .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231b263b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .faq-icon { margin-right: 15px; font-size: 1.2rem; color: #666; }