/* ========================================================================== BodyAccel Niacinamide Toothpaste Landing Page - Full Stylesheet Critical CSS is inlined in . This file handles non-critical styles. Identity: Soft Sky Blue (#E8F4F8 - #2A7B9B), Cherry Blossom Pink (#FFD1DC) ========================================================================== */ /* font-display: swap on @font-face equivalents - prevents FOIT (Flash of Invisible Text) Note: Handled at Google Fonts URL level via &display=swap */ /* 1. CSS Custom Properties (duplicated here for non-JS fallback path) */ :root { /* Color Palette */ --primary-sky-light: #E8F4F8; --primary-sky: #2A7B9B; --primary-sky-dark: #1A5269; --primary-sky-deep: #0F3545; --flavor-pink-light: #FFF0F3; --flavor-pink: #FFD1DC; --flavor-pink-accent: #FF9AA2; --flavor-peach: #FFDAC1; --accent-gold: #D4AF37; --accent-gold-dark: #B38F24; --text-dark: #2C3E50; /* Improved contrast: was #6C7A89 (3.8:1 ratio), now #5A6776 (4.6:1 ratio) */ --text-muted: #4A5568; --text-light: #FFFFFF; --bg-light: #F8FAFC; --bg-white: #FFFFFF; --bg-card: #FFFFFF; --success-green: #27AE60; --danger-red: #E74C3C; --border-light: #E2E8F0; /* Typography */ --font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Shadows */ --shadow-sm: 0 2px 8px rgba(42, 123, 155, 0.08); --shadow-md: 0 6px 18px rgba(42, 123, 155, 0.12); --shadow-lg: 0 12px 30px rgba(42, 123, 155, 0.18); --shadow-gold: 0 6px 20px rgba(212, 175, 55, 0.35); /* Border Radius */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-full: 9999px; /* Transitions */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; } /* 2. Supplemental Global Styles (non-critical extends critical inline CSS) */ /* Smooth scrolling already on html via critical CSS */ button, input, select, textarea { font-family: inherit; font-size: inherit; } /* Contain layout to reduce paint/reflow cost */ .hero-section, .problem-solution-section, .ingredients-section, .offers-section, .order-form-section { contain: layout style; } @media (min-width: 992px) { body { padding-bottom: 0; } } /* 3. Sticky Top Header */ .top-notification-bar { background: linear-gradient(90deg, var(--primary-sky-deep), var(--primary-sky-dark)); color: var(--text-light); font-size: 0.85rem; font-weight: 600; text-align: center; padding: 0.5rem 1rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .top-notification-bar span.highlight { color: var(--flavor-peach); } .header-nav { position: sticky; top: 0; z-index: 100; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); padding: 0.75rem 0; } .header-container { display: flex; justify-content: space-between; align-items: center; } .brand-logo { display: flex; align-items: center; gap: 0.6rem; } .brand-logo .logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary-sky), var(--flavor-pink-accent)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 1.3rem; box-shadow: 0 4px 10px rgba(42, 123, 155, 0.25); } .brand-logo-text { display: flex; flex-direction: column; } .brand-title { font-size: 1.35rem; font-weight: 900; color: var(--primary-sky-deep); letter-spacing: -0.5px; line-height: 1.1; } .brand-subtitle { font-size: 0.75rem; color: var(--primary-sky); font-weight: 700; } .header-cta-btn { background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark)); color: var(--text-dark); font-weight: 800; font-size: 0.95rem; padding: 0.6rem 1.4rem; border-radius: var(--radius-full); box-shadow: var(--shadow-gold); transition: var(--transition-normal); display: inline-flex; align-items: center; gap: 0.4rem; } .header-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212, 175, 55, 0.45); } /* 4. Hero Section */ .hero-section { padding: 2rem 0 3rem; background: linear-gradient(180deg, var(--primary-sky-light) 0%, var(--flavor-pink-light) 60%, var(--bg-light) 100%); position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } @media (min-width: 992px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; } } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background-color: rgba(255, 255, 255, 0.85); border: 1px solid var(--flavor-pink-accent); padding: 0.4rem 1rem; border-radius: var(--radius-full); color: var(--primary-sky-deep); font-size: 0.85rem; font-weight: 700; margin-bottom: 1rem; box-shadow: var(--shadow-sm); } .hero-title { font-size: 2rem; font-weight: 900; color: var(--text-dark); line-height: 1.3; margin-bottom: 1rem; } .hero-title span.highlight-blue { color: var(--primary-sky); } .hero-title span.highlight-pink { color: #E85D75; } .hero-description { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.7; } .hero-trust-badges { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.8rem; } .trust-badge-item { display: flex; align-items: center; gap: 0.75rem; background-color: var(--bg-white); padding: 0.75rem 1rem; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border-right: 4px solid var(--primary-sky); } .trust-badge-icon { font-size: 1.4rem; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background-color: var(--primary-sky-light); border-radius: 50%; flex-shrink: 0; } .trust-badge-text { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); } /* Pricing Card Box */ .hero-price-box { background: var(--bg-white); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-md); border: 2px solid var(--flavor-pink); margin-bottom: 1.5rem; } .price-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .price-main { display: flex; align-items: baseline; gap: 0.75rem; } .current-price { font-size: 2.2rem; font-weight: 900; color: var(--primary-sky-deep); } .old-price { font-size: 1.2rem; color: var(--text-muted); text-decoration: line-through; } .discount-tag { background-color: var(--danger-red); color: white; font-weight: 800; font-size: 0.85rem; padding: 0.3rem 0.75rem; border-radius: var(--radius-full); } /* Countdown Timer */ .countdown-box { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--border-light); } .countdown-label { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); } .timer-units { display: flex; gap: 0.4rem; direction: ltr; } .timer-unit { background: var(--primary-sky-deep); color: var(--flavor-peach); font-weight: 800; font-size: 1rem; padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); min-width: 36px; text-align: center; } .timer-sep { font-weight: 900; color: var(--primary-sky-deep); align-self: center; } /* Hero Media Display */ .hero-image-wrapper { position: relative; } .hero-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: white; border: 4px solid white; } .hero-image-card img { width: 100%; height: auto; object-fit: cover; transition: transform 0.5s ease; } .hero-image-card:hover img { transform: scale(1.03); } .floating-guarantee-badge { position: absolute; bottom: 1.5rem; right: 1.5rem; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); padding: 0.75rem 1.25rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--flavor-pink-accent); } .floating-badge-icon { font-size: 1.8rem; } .floating-badge-title { font-size: 0.9rem; font-weight: 800; color: var(--primary-sky-deep); } .floating-badge-subtitle { font-size: 0.75rem; color: var(--text-muted); } /* 5. Problem vs Solution Section */ .problem-solution-section { padding: 4rem 0; background-color: var(--bg-white); } .section-header { text-align: center; max-width: 700px; margin: 0 auto 3rem; } .section-tag { display: inline-block; color: var(--primary-sky); font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; } .section-title { font-size: 1.85rem; font-weight: 900; color: var(--text-dark); margin-bottom: 0.75rem; } .section-subtitle { font-size: 1rem; color: var(--text-muted); } .comparison-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .comparison-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } .comparison-card { border-radius: var(--radius-lg); padding: 2rem; position: relative; box-shadow: var(--shadow-sm); transition: var(--transition-normal); } .comparison-card.problem { background-color: #FFF5F5; border: 1px solid #FED7D7; } .comparison-card.solution { background: linear-gradient(135deg, #F0F9FF 0%, #E6F4F8 100%); border: 2px solid var(--primary-sky); box-shadow: var(--shadow-md); } .card-header-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border-radius: var(--radius-full); font-weight: 800; font-size: 0.9rem; margin-bottom: 1.5rem; } .problem .card-header-badge { background-color: #FEE2E2; color: #991B1B; } .solution .card-header-badge { background-color: var(--primary-sky); color: white; } .comparison-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; } .comparison-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.98rem; } .comparison-item-icon { font-size: 1.2rem; margin-top: 0.1rem; flex-shrink: 0; } .problem .comparison-item-icon { color: var(--danger-red); } .solution .comparison-item-icon { color: var(--success-green); } .comparison-item-title { font-weight: 800; color: var(--text-dark); margin-bottom: 0.2rem; } .comparison-item-desc { font-size: 0.88rem; color: var(--text-muted); } /* 6. Active Ingredients Section */ .ingredients-section { padding: 4rem 0; background: linear-gradient(180deg, var(--bg-light) 0%, var(--primary-sky-light) 100%); } .ingredients-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .ingredients-grid { grid-template-columns: repeat(3, 1fr); } } .ingredient-card { background: var(--bg-white); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); text-align: center; transition: var(--transition-normal); border: 1px solid var(--border-light); display: flex; flex-direction: column; align-items: center; } .ingredient-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--primary-sky); } .ingredient-icon-wrapper { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-sky-light), var(--flavor-pink)); display: flex; align-items: center; justify-content: justify-content; justify-content: center; font-size: 2rem; margin-bottom: 1.25rem; color: var(--primary-sky-deep); box-shadow: var(--shadow-sm); } .ingredient-title { font-size: 1.25rem; font-weight: 800; color: var(--primary-sky-deep); margin-bottom: 0.3rem; } .ingredient-subtitle { font-size: 0.85rem; color: var(--primary-sky); font-weight: 700; margin-bottom: 0.75rem; } .ingredient-desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; } /* Ingredients Feature Highlight Banner */ .ingredients-banner { margin-top: 3rem; background: var(--bg-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); display: grid; grid-template-columns: 1fr; } @media (min-width: 992px) { .ingredients-banner { grid-template-columns: 1fr 1fr; } } .banner-img { /* Reserve space (3:2 ratio) before image loads = no CLS */ aspect-ratio: 3 / 2; overflow: hidden; } .banner-img img { width: 100%; height: 100%; object-fit: cover; min-height: 250px; } .banner-content { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; } .banner-title { font-size: 1.5rem; font-weight: 900; color: var(--primary-sky-deep); margin-bottom: 1rem; } .banner-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .banner-list li { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.95rem; } .banner-list li i { color: var(--primary-sky); } /* 7. Offer Selector UI (Radio Cards) */ .offers-section { padding: 4rem 0; background-color: var(--bg-white); } .offers-container { max-width: 850px; margin: 0 auto; } .offer-cards-group { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; } .offer-radio-card { position: relative; border: 2px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; background-color: var(--bg-white); cursor: pointer; transition: var(--transition-normal); display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; box-sizing: border-box; } .offer-card-main { display: flex; align-items: center; gap: 1rem; flex-grow: 1; min-width: 0; } .offer-details { flex-grow: 1; min-width: 0; } .offer-title { font-size: 1.1rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.2rem; word-break: break-word; } .offer-desc { font-size: 0.85rem; color: var(--text-muted); word-break: break-word; } .offer-price-tag { text-align: left; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; } .price-val-box { display: flex; align-items: baseline; gap: 0.4rem; } .offer-current-price { font-size: 1.35rem; font-weight: 900; color: var(--primary-sky-deep); } .offer-old-price { font-size: 0.85rem; color: var(--text-muted); text-decoration: line-through; } .offer-save-badge { font-size: 0.75rem; font-weight: 800; color: var(--success-green); display: block; } @media (max-width: 991px) { .offers-section { scroll-margin-top: 70px; padding: 2.5rem 0; } .offer-radio-card { flex-direction: column; align-items: stretch; padding: 1.25rem 1rem 1rem; gap: 0.75rem; border-radius: 18px; width: 100%; box-sizing: border-box; } .offer-card-main { align-items: flex-start; gap: 0.75rem; width: 100%; } .offer-price-tag { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; background: rgba(42, 123, 155, 0.06); border-radius: 12px; padding: 0.65rem 0.85rem; margin-top: 0.25rem; box-sizing: border-box; } .offer-radio-card.selected .offer-price-tag { background: rgba(42, 123, 155, 0.12); } .offer-current-price { font-size: 1.25rem; font-weight: 900; } .offer-old-price { font-size: 0.82rem; } .offer-save-badge { font-size: 0.76rem; font-weight: 800; color: var(--success-green); background: rgba(39, 174, 96, 0.12); padding: 0.25rem 0.65rem; border-radius: 6px; white-space: nowrap; } .popular-badge-tag { top: -12px; right: 1.2rem; left: auto; font-size: 0.72rem; padding: 0.2rem 0.75rem; } } /* COD Trust Strip — Algerian Market Conversion Signals */ .cod-trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem; background: linear-gradient(135deg, var(--primary-sky-deep), var(--primary-sky-dark)); border-radius: var(--radius-lg); padding: 1rem 1.5rem; margin-bottom: 1.5rem; } .cod-trust-item { display: flex; align-items: center; gap: 0.5rem; color: white; font-size: 0.9rem; font-weight: 600; } .cod-trust-item strong { color: var(--flavor-peach); } .cod-trust-icon { font-size: 1.2rem; line-height: 1; } @media (max-width: 600px) { .cod-trust-strip { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.85rem 1rem; } .cod-trust-item { font-size: 0.85rem; } } /* Bottom Nav Auto-Hide: slides down smoothly when form is in viewport */ .app-bottom-nav { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; } .app-bottom-nav.bar-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; } /* 8. Order Form Section */ .order-form-section { padding: 4rem 0; background: linear-gradient(180deg, var(--primary-sky-light) 0%, var(--bg-light) 100%); scroll-margin-top: 80px; } .form-wrapper-card { background: var(--bg-white); border-radius: var(--radius-lg); padding: 2rem 1.5rem; box-shadow: var(--shadow-lg); border: 1px solid var(--border-light); max-width: 850px; margin: 0 auto; } @media (min-width: 768px) { .form-wrapper-card { padding: 3rem; } } .form-grid-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.25rem; } @media (min-width: 768px) { .form-grid-row.two-cols { grid-template-columns: 1fr 1fr; } } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-label { font-weight: 700; font-size: 0.92rem; color: var(--text-dark); display: flex; align-items: center; gap: 0.4rem; } .form-label span.req { color: var(--danger-red); } .form-control { width: 100%; padding: 0.85rem 1rem; border: 1.5px solid var(--border-light); border-radius: var(--radius-md); background-color: #FAFAFA; font-size: 0.95rem; color: var(--text-dark); transition: var(--transition-fast); outline: none; } .form-control:focus { border-color: var(--primary-sky); background-color: #FFFFFF; box-shadow: 0 0 0 4px rgba(42, 123, 155, 0.12); } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%202C3E50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 1rem center; padding-left: 2.5rem; } /* Delivery Type Selector */ .delivery-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.4rem; } .delivery-type-card { border: 1.5px solid var(--border-light); border-radius: var(--radius-md); padding: 0.85rem 1rem; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; transition: var(--transition-fast); background-color: #FAFAFA; } .delivery-type-card.active { border-color: var(--primary-sky); background-color: var(--primary-sky-light); } .delivery-type-card i { font-size: 1.2rem; color: var(--primary-sky); } .delivery-type-info { display: flex; flex-direction: column; } .delivery-type-title { font-weight: 800; font-size: 0.88rem; } .delivery-type-price { font-size: 0.78rem; color: var(--text-muted); } /* Dynamic Order Summary Box */ .summary-box-ui { background: linear-gradient(135deg, #F8FAFC 0%, var(--primary-sky-light) 100%); border: 1.5px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin: 1.5rem 0 2rem; } .summary-title { font-size: 1.05rem; font-weight: 800; color: var(--primary-sky-deep); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light); } .summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.92rem; color: var(--text-muted); margin-bottom: 0.6rem; } .summary-row.total { font-size: 1.2rem; font-weight: 900; color: var(--primary-sky-deep); margin-top: 0.75rem; padding-top: 0.75rem; border-top: 2px dashed var(--border-light); } .summary-row.total .total-price-val { color: var(--primary-sky); font-size: 1.4rem; } /* Submit Button */ .btn-submit-order { width: 100%; background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark)); color: var(--text-dark); font-weight: 900; font-size: 1.25rem; padding: 1.1rem 2rem; border: none; border-radius: var(--radius-md); cursor: pointer; box-shadow: var(--shadow-gold); transition: var(--transition-normal); display: flex; align-items: center; justify-content: center; gap: 0.75rem; } .btn-submit-order:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5); } .btn-submit-order:active { transform: translateY(-1px); } /* 9. FAQ Accordion Section */ .faq-section { padding: 4rem 0; background-color: var(--bg-white); } .faq-accordion { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .faq-item { border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; background-color: var(--bg-white); transition: var(--transition-fast); } .faq-item.active { border-color: var(--primary-sky); box-shadow: var(--shadow-sm); } .faq-header { padding: 1.25rem 1.5rem; font-weight: 800; font-size: 1.05rem; color: var(--text-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; } .faq-header i { color: var(--primary-sky); transition: transform 0.3s ease; } .faq-item.active .faq-header i { transform: rotate(180deg); } .faq-body { padding: 0 1.5rem 1.25rem; font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; display: none; } .faq-item.active .faq-body { display: block; } /* 10. Sticky Bottom Bar (Mobile Only) */ /* 10. App-Like Docked Bottom Navigation Bar (PWA Style) */ .app-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; justify-content: space-around; align-items: center; padding: 0.4rem 0.5rem max(0.4rem, env(safe-area-inset-bottom)); box-shadow: 0 -5px 25px rgba(15, 53, 69, 0.12); border-top: 1px solid rgba(226, 232, 240, 0.8); } @media (min-width: 992px) { .app-bottom-nav { display: none; } } .nav-tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; color: var(--text-muted); font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.6rem; border-radius: var(--radius-md); transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } .nav-tab-item i { font-size: 1.15rem; transition: transform 0.2s ease; } .nav-tab-item.active { color: var(--primary-sky); } .nav-tab-item.active i { transform: translateY(-2px); color: var(--primary-sky); } .nav-tab-cta { background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark)); color: var(--text-dark) !important; flex-direction: row !important; gap: 0.5rem !important; padding: 0.5rem 1.1rem !important; border-radius: var(--radius-full) !important; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); font-weight: 900 !important; } .nav-tab-cta i { font-size: 1rem; } .nav-tab-cta-text { display: flex; flex-direction: column; line-height: 1.1; text-align: right; } .nav-tab-cta-text span { font-size: 0.85rem; font-weight: 900; } .nav-tab-cta-text small { font-size: 0.72rem; opacity: 0.9; } /* Touch Haptics & App Optimizations */ button, a, input, select, textarea, .offer-radio-card, .delivery-type-card, .faq-header { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } button:active, .btn-submit-order:active, .header-cta-btn:active, .offer-radio-card:active, .nav-tab-item:active { transform: scale(0.97); } @media (max-width: 768px) { html { font-size: 15px; } .container { padding: 0 1rem; } .hero-title { font-size: 1.65rem; } .form-control, select.form-control { font-size: 16px !important; /* Prevents iOS auto-zoom */ padding: 0.95rem 1rem; min-height: 50px; } /* App Sheet feel for success modal on mobile */ .modal-overlay { align-items: flex-end; padding: 0; } .modal-card { border-radius: 24px 24px 0 0; max-width: 100%; padding: 2rem 1.5rem max(2rem, env(safe-area-inset-bottom)); animation: slideUpModal 0.3s ease; } } @keyframes slideUpModal { from { transform: translateY(100%); } to { transform: translateY(0); } } /* 11. Modal Success Pop-up */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background-color: rgba(15, 53, 69, 0.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.25rem; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-card { background: var(--bg-white); border-radius: var(--radius-lg); width: 100%; max-width: 500px; padding: 2.5rem 2rem; text-align: center; box-shadow: var(--shadow-lg); transform: scale(0.85); transition: transform 0.3s ease; position: relative; } .modal-overlay.active .modal-card { transform: scale(1); } .modal-close-btn { position: absolute; top: 1rem; left: 1rem; background: none; border: none; font-size: 1.4rem; color: var(--text-muted); cursor: pointer; } .modal-icon-success { width: 75px; height: 75px; background: #E8F8F0; color: var(--success-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 1.5rem; box-shadow: 0 6px 15px rgba(39, 174, 96, 0.2); } .modal-title { font-size: 1.6rem; font-weight: 900; color: var(--primary-sky-deep); margin-bottom: 0.5rem; } .modal-text { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.6; } .modal-order-details-box { background: var(--primary-sky-light); border-radius: var(--radius-md); padding: 1rem; font-size: 0.88rem; margin-bottom: 1.5rem; text-align: right; } .modal-order-details-box div { margin-bottom: 0.4rem; } .modal-btn-confirm { background: var(--primary-sky); color: white; font-weight: 800; font-size: 1rem; padding: 0.85rem 2rem; border: none; border-radius: var(--radius-md); cursor: pointer; width: 100%; } /* 12. Footer */ .main-footer { background-color: var(--primary-sky-deep); color: rgba(255, 255, 255, 0.8); padding: 2.5rem 0; text-align: center; font-size: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-brand { font-size: 1.4rem; font-weight: 900; color: white; margin-bottom: 0.5rem; } .footer-links { display: flex; justify-content: center; gap: 1.5rem; margin: 1rem 0; list-style: none; } .footer-links a { color: rgba(255, 255, 255, 0.7); transition: color 0.2s; } .footer-links a:hover { color: var(--flavor-peach); }