/* ========================================================== CHOOSE PLAN PAGE — Halal Plates - Cream-beige background (#FEF1E5) - Headlines: Sailor | Body: Instrument Sans - Selection boxes: text only, orange stroke, dark-orange on hover - Header reversed to red (scoped via body.cp-page) ========================================================== */ :root { --cp-cream: #FEF1E5; --cp-orange: #F39C2D; --cp-orange-dark: #E08A1B; --cp-red: #C42127; --cp-red-dark: #A8181F; --cp-ink: #1a1a1a; --cp-muted: #8a7e74; --cp-border: #e7d8c6; } @font-face { font-family: 'Sailor'; src: url('../fonts/Sailor.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } ::-webkit-scrollbar { display: none; } * { scrollbar-width: none; box-sizing: border-box; } body { margin: 0; font-family: var(--font-body, 'Instrument Sans', sans-serif); color: var(--cp-ink); background: var(--cp-cream); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, 'Sailor', sans-serif); } /* ========================================================== HEADER — reversed colours (red background) Scoped to this page only via .cp-page on ========================================================== */ .cp-page .motw-nav { background: var(--cp-red); } /* Tint the red logo to cream so it reads on the red bar (same filter as footer.css) */ .cp-page .motw-nav-brand img { filter: brightness(0) saturate(100%) invert(97%) sepia(9%) saturate(500%) hue-rotate(320deg) brightness(103%); } .cp-page .motw-nav-links a { color: #fff; } .cp-page .motw-nav-links a:hover, .cp-page .motw-nav-links a.is-active { color: var(--cp-orange); } .cp-page .motw-nav-cart { color: #fff; } .cp-page .motw-nav-cart:hover { color: var(--cp-orange); } .cp-page .motw-nav-toggle { color: #fff; } .cp-page .motw-btn-signin { color: #fff; border-color: #fff; } .cp-page .motw-btn-signin:hover { background: #fff; color: var(--cp-red); } /* CTA stays orange — reads well on the red bar */ @media (max-width: 900px) { .cp-page .motw-nav-right { border-top-color: rgba(255,255,255,0.25); } } /* ========================================================== CHOOSE PLAN LAYOUT ========================================================== */ .choose-plan-section { padding: 60px 0; background: var(--cp-cream); } .choose-plan-section .container { max-width: 1320px; } .image-sidebar { width: 100%; display: flex; position: sticky; top: 40px; align-items: flex-start; justify-content: center; z-index: 10; } .sidebar-img { width: 100%; height: auto; max-height: 650px; object-fit: cover; border-radius: 24px; } .form-content { padding: 20px 40px; display: flex; flex-direction: column; align-items: stretch; } /* ── Stepper ── */ .stepper-container { width: 100%; max-width: 1100px; margin-bottom: 50px; } .stepper { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; position: relative; } .step { text-align: center; position: relative; z-index: 1; flex: 1; cursor: pointer; } .step-icon-circle { width: 54px; height: 54px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: #d8c3aa; font-size: 1.5rem; transition: all 0.3s; z-index: 2; position: relative; border: 1px solid var(--cp-border); } .step.active .step-icon-circle { background: var(--cp-orange); border-color: var(--cp-orange); color: #fff; } .step.completed .step-icon-circle { background: #fde7cf; border-color: #fde7cf; color: var(--cp-orange-dark); } .step-label { font-size: 0.8rem; color: var(--cp-muted); font-weight: 500; } .step.active .step-label { color: var(--cp-ink); font-weight: 600; } /* ── Section header ── */ .header-section { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; width: 100%; max-width: 1100px; } .title-group h1 { font-family: var(--font-heading, 'Sailor', sans-serif); font-size: 3.2rem; margin-bottom: 5px; color: var(--cp-ink); letter-spacing: 0.5px; } .title-group p { color: var(--cp-muted); font-size: 1rem; margin-bottom: 0; } /* ── Skip / Back buttons (orange theme) ── */ .skip-btn, .back-btn { border: 1.5px solid var(--cp-orange); color: var(--cp-orange); border-radius: 50px; padding: 6px 28px; font-size: 0.9rem; background: transparent; font-weight: 700; transition: all 0.2s ease; text-decoration: none; display: inline-block; } .skip-btn:hover, .back-btn:hover { background: var(--cp-orange); color: #fff; } .back-btn { background: var(--cp-orange); color: #fff; border-color: var(--cp-orange); margin-right: 10px; } .back-btn:hover { background: var(--cp-orange-dark); border-color: var(--cp-orange-dark); } .btn-group-nav { display: flex; align-items: center; } /* ========================================================== SELECTION BOXES — Goal / Person / Meal Text only · orange stroke · dark-orange on hover & selected ========================================================== */ .goal-options, .person-options, .meal-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; } .goal-options { max-width: 850px; } .goal-card, .person-card, .meal-card { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 96px; padding: 22px 24px; border: 2px solid var(--cp-orange); border-radius: 16px; background: transparent; color: var(--cp-ink); text-decoration: none; cursor: pointer; transition: all 0.22s ease; position: relative; overflow: hidden; } .goal-card:hover, .person-card:hover, .meal-card:hover, .goal-card.selected, .person-card.selected, .meal-card.selected { background: var(--cp-orange-dark); border-color: var(--cp-orange-dark); color: #fff; transform: translateY(-2px); } /* Text only — hide all icons & decorative food images */ .goal-icon-wrapper, .person-icon-wrapper, .meal-icon-wrapper, .meal-icons-group, .card-food-img { display: none !important; } .goal-card.selected::after { display: none !important; } .goal-info, .person-info, .meal-info { z-index: 2; } .goal-info h4, .person-info h4, .meal-info h4 { font-family: var(--font-heading, 'Sailor', sans-serif); font-weight: 400; font-size: 1.15rem; margin: 0 0 2px; padding: 0; color: inherit; letter-spacing: 0.3px; } .goal-info p { margin: 0; font-size: 0.9rem; color: inherit; opacity: 0.8; } /* ========================================================== PLAN CARDS — Step 4 ========================================================== */ .plan-options { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 24px; } .plan-card { border: 2px solid var(--cp-orange); border-radius: 16px; padding: 28px 24px; text-align: center; background: transparent; transition: all 0.25s ease; position: relative; } .plan-card:hover { background: var(--cp-orange-dark); border-color: var(--cp-orange-dark); transform: translateY(-3px); } .plan-card:hover .plan-info h4, .plan-card:hover .plan-info p { color: #fff; } .plan-card:hover .btn-choose-plan { background: #fff; color: var(--cp-orange-dark); } .plan-card.popular { border-color: var(--cp-orange-dark); } .popular-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--cp-orange-dark); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.5px; } .plan-info h4 { font-family: var(--font-heading, 'Sailor', sans-serif); font-weight: 400; font-size: 1.3rem; margin-bottom: 5px; color: var(--cp-ink); } .plan-info p { font-size: 0.9rem; color: var(--cp-muted); margin-bottom: 16px; } .btn-choose-plan { display: block; width: 100%; padding: 12px; background: var(--cp-orange); color: #fff; text-decoration: none; border-radius: 30px; font-weight: 600; transition: background 0.25s ease, color 0.25s ease; } .btn-choose-plan:hover { background: var(--cp-orange-dark); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1200px) { .image-sidebar { width: 32%; padding: 20px; } .form-content { padding: 40px; } } @media (max-width: 992px) { .image-sidebar { display: none; } .form-content { padding: 40px 20px; } } @media (max-width: 768px) { .goal-options, .person-options, .meal-options, .plan-options { grid-template-columns: 1fr !important; gap: 12px; } .header-section { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 25px; } .btn-group-nav { width: 100%; justify-content: flex-start; gap: 10px; } .skip-btn, .back-btn { flex: 0 1 auto; padding: 6px 20px; font-size: 0.85rem; } .title-group h1 { font-size: 2rem; line-height: 1.2; margin-bottom: 8px; } .title-group p { font-size: 0.9rem; } .stepper-container { margin-bottom: 25px; } .step-icon-circle { width: 40px; height: 40px; font-size: 1.1rem; margin-bottom: 5px; } .step-label { font-size: 0.65rem; } .form-content { padding: 15px 10px; } .goal-card, .person-card, .meal-card { padding: 16px; min-height: 70px; } .goal-info h4, .person-info h4, .meal-info h4 { font-size: 1rem; } .goal-info p { font-size: 0.8rem; } } @media (max-width: 576px) { .title-group h1 { font-size: 1.74rem; } .step-label { display: none; } .stepper::after { top: 20px; } .plan-card { padding: 22px 15px; } .goal-options, .person-options, .meal-options, .plan-options { gap: 10px; } }