: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: 'Plus Jakarta Sans', system-ui, sans-serif; } /* ── Button normalization ── */ 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 (gated: only when JS adds .js-anim to ) ── */ html.js-anim html.js-anim [data-animate] { opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } html.js-anim html.js-anim [data-animate].is-visible { opacity: 1; transform: scale(1); } /* ── Utility ── */ .rotate-180 { transform: rotate(180deg); } /* ── Decorative backgrounds ── */ .decor-grid-dots { background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px); background-size: 24px 24px; } .decor-grid-lines { background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 32px 32px; } .decor-diagonal { background-image: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(0,0,0,0.03) 10px, rgba(0,0,0,0.03) 11px ); } .decor-mesh { background-image: radial-gradient(at 20% 50%, rgba(255,107,53,0.08) 0px, transparent 50%), radial-gradient(at 80% 20%, rgba(26,26,46,0.08) 0px, transparent 50%); } /* Intensity modifiers */ .decor-subtle { opacity: 0.5; } .decor-moderate { opacity: 0.75; } .decor-bold { opacity: 1; } /* Gradient blur blobs */ .decor-gradient-blur::before, .decor-gradient-blur::after { content: ''; position: absolute; border-radius: 9999px; filter: blur(80px); pointer-events: none; z-index: 0; } .decor-gradient-blur::before { width: 360px; height: 360px; background: rgba(255,107,53,0.12); top: -80px; right: -80px; } .decor-gradient-blur::after { width: 280px; height: 280px; background: rgba(26,26,46,0.1); bottom: -60px; left: -60px; } /* Corner accents */ .decor-corner-tr::before { content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 200px; background: radial-gradient(circle at top right, rgba(255,107,53,0.15), transparent 70%); pointer-events: none; } .decor-corner-bl::after { content: ''; position: absolute; bottom: 0; left: 0; width: 200px; height: 200px; background: radial-gradient(circle at bottom left, rgba(26,26,46,0.1), transparent 70%); pointer-events: none; } /* Glow element */ .decor-glow-element { position: absolute; width: 400px; height: 400px; border-radius: 9999px; background: radial-gradient(circle, rgba(255,107,53,0.18) 0%, transparent 70%); filter: blur(40px); pointer-events: none; z-index: 0; } /* ── Star rating helper ── */ .stars { display: inline-flex; gap: 2px; color: #F59E0B; } /* ── Form styles ── */ .form-input { width: 100%; padding: 0.75rem 1rem; border: 1px solid #E5E7EB; border-radius: 0.75rem; font-size: 0.95rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; 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; box-shadow: 0 0 0 3px rgba(239,68,68,0.1); } /* ── Order form section ── */ #order_form { scroll-margin-top: 5rem; } /* ── FAQ accordion ── */ [data-faq-body] { transition: max-height 0.35s ease, opacity 0.3s ease; overflow: hidden; } /* ── Ingredient card hover ── */ .ingredient-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .ingredient-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); } /* ── Testimonial card ── */ .testimonial-card { transition: transform 0.25s ease; } .testimonial-card:hover { transform: translateY(-3px); } /* ── Benefit icon wrapper ── */ .benefit-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,107,53,0.12); display: flex; align-items: center; justify-content: center; color: #FF6B35; flex-shrink: 0; } /* ── Badge ── */ .product-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background: rgba(255,107,53,0.12); color: #FF6B35; border: 1px solid rgba(255,107,53,0.25); } /* ── Price display ── */ .price-main { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); line-height: 1; } .price-per-day { font-size: 0.85rem; color: #6B7280; } /* ── Trust badges row ── */ .trust-badge { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.78rem; color: #4B5563; } /* ── Smooth transitions for header ── */ header { transition: box-shadow 0.3s ease; } header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); } /* ── Mobile menu transition ── */ #mobile-menu { transition: opacity 0.2s ease; } /* ── Progress / step indicators ── */ .step-number { width: 40px; height: 40px; border-radius: 9999px; background: var(--color-accent); color: #fff; font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── Cookie banner ── */ #cookie-consent { animation: slideUp 0.4s ease forwards; } @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ── Responsive image wrapper ── */ .img-product { max-width: 480px; width: 100%; margin: 0 auto; display: block; } /* ── Section divider ── */ .section-divider { width: 56px; height: 4px; border-radius: 9999px; background: var(--color-accent); margin: 0 auto 1.5rem; } /* ── Guarantee box ── */ .guarantee-box { border: 2px solid rgba(255,107,53,0.25); border-radius: 1.25rem; background: rgba(255,107,53,0.04); }