:root { --color-primary: #1A1A2E; --color-secondary: #2D2D44; --color-accent: #FF6B35; --color-bg-light: #FFF7ED; --color-bg-alt: #FFEDD5; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; } body { font-family: 'Source Sans 3', system-ui, sans-serif; } /* ── Button base fixes ── */ button, .btn, [class*="btn-"], a[href="#order_form"] { white-space: nowrap; min-width: fit-content; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } form button[type="submit"] { white-space: normal; width: 100%; display: flex; } /* ── Scroll Animations ── Hidden only when JS has enabled animation class on . Bots, no-JS and preview screenshots always see content. */ html.js-anim html.js-anim [data-animate] { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } html.js-anim html.js-anim [data-animate].is-visible { opacity: 1; transform: translateY(0); } /* Stagger delays */ html.js-anim [data-animate][data-delay="100"] { transition-delay: 0.1s; } html.js-anim [data-animate][data-delay="200"] { transition-delay: 0.2s; } html.js-anim [data-animate][data-delay="300"] { transition-delay: 0.3s; } html.js-anim [data-animate][data-delay="400"] { transition-delay: 0.4s; } html.js-anim [data-animate][data-delay="500"] { transition-delay: 0.5s; } html.js-anim [data-animate][data-delay="600"] { transition-delay: 0.6s; } /* ── Decorative Patterns ── */ .decor-grid-dots { background-image: radial-gradient(circle, rgba(255,107,53,0.15) 1px, transparent 1px); background-size: 24px 24px; } .decor-grid-lines { background-image: linear-gradient(rgba(255,107,53,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,107,53,0.06) 1px, transparent 1px); background-size: 40px 40px; } .decor-diagonal { background-image: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(255,107,53,0.04) 10px, rgba(255,107,53,0.04) 20px ); } .decor-mesh { background: radial-gradient(ellipse at 20% 50%, rgba(255,107,53,0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(26,26,46,0.08) 0%, transparent 50%); } /* Decorative blobs */ .decor-gradient-blur::before { content: ''; position: absolute; top: -10%; right: -5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,107,53,0.12) 0%, transparent 70%); border-radius: 50%; pointer-events: none; filter: blur(40px); } .decor-gradient-blur::after { content: ''; position: absolute; bottom: -10%; left: -5%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(26,26,46,0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; filter: blur(40px); } .decor-corner-tr::before { content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 200px; background: linear-gradient(225deg, rgba(255,107,53,0.12) 0%, transparent 60%); pointer-events: none; } .decor-corner-bl::after { content: ''; position: absolute; bottom: 0; left: 0; width: 200px; height: 200px; background: linear-gradient(45deg, rgba(255,107,53,0.10) 0%, transparent 60%); pointer-events: none; } .decor-glow-element { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,107,53,0.18) 0%, transparent 70%); border-radius: 50%; filter: blur(30px); pointer-events: none; } /* Intensity modifiers */ .decor-subtle { opacity: 0.5; } .decor-moderate { opacity: 0.75; } .decor-bold { opacity: 1; } /* ── Rotate utility ── */ .rotate-180 { transform: rotate(180deg); } /* ── FAQ Accordion ── */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease-out, padding 0.35s ease-out; } .faq-answer.is-open { max-height: 500px; } /* ── Star Rating ── */ .stars { color: #FF6B35; letter-spacing: 0.05em; } /* ── Order Form ── */ .form-input { width: 100%; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.75rem; font-size: 1rem; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none; background: #fff; color: #111827; } .form-input:focus { border-color: #FF6B35; box-shadow: 0 0 0 3px rgba(255,107,53,0.12); } .form-input.error { border-color: #ef4444; } .form-error-msg { color: #ef4444; font-size: 0.75rem; margin-top: 0.25rem; } /* ── Pulse animation for CTA ── */ @keyframes pulse-accent { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,53,0.35); } 50% { box-shadow: 0 0 0 10px rgba(255,107,53,0); } } .cta-pulse { animation: pulse-accent 2.5s ease-in-out infinite; } /* ── Progress bar ── */ .progress-bar { height: 6px; background: #FFEDD5; border-radius: 999px; overflow: hidden; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, #FF6B35, #ff8c5e); border-radius: 999px; transition: width 1s ease-out; } /* ── Mobile menu transition ── */ #mobile-menu { transition: opacity 0.2s ease, transform 0.2s ease; } /* ── Smooth card hover ── */ .card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; } .card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); } /* ── Sticky header shadow on scroll ── */ .header-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); } /* ── Newsletter success ── */ .newsletter-success { color: #16a34a; font-size: 0.875rem; font-weight: 500; } /* ── Loading spinner ── */ .spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Responsive image ── */ img { max-width: 100%; height: auto; } /* ── Benefit icon wrapper ── */ .benefit-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; background-color: #FFEDD5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #FF6B35; } /* ── Section divider ── */ .section-divider { width: 48px; height: 4px; background: linear-gradient(90deg, #FF6B35, #ff8c5e); border-radius: 999px; margin: 0 auto 1.5rem; } /* ── Guarantee badge ── */ .guarantee-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: #FFF7ED; border: 1px solid #FFEDD5; border-radius: 999px; padding: 0.375rem 1rem; font-size: 0.875rem; color: #FF6B35; font-weight: 600; }