:root { --primary: #F74C06; --secondary: #F9BC2C; --gradient: linear-gradient(90deg, #F74C06, #F9BC2C); --dark: #101114; --dark-secondary: #17191D; --white: #FFFFFF; --light: #F7F7F5; --text: #22252A; --muted: #6F747B; --border: #E8E8E8; --primary-tint: #FDECE3; } /* ===== Icons ===================================================== The site uses Bootstrap Icons (loaded from the jsDelivr CDN in each page's ). Bootstrap Icons renders a glyph via ::before, so an icon inherits the font-size of its parent - any Tailwind text-* size class on the still works. `.icon-md` is the default size used where no explicit text-* size class is set, and matches the 22px the old icon set used, so nothing shifts visually. */ .bi { display: inline-block; line-height: 1; vertical-align: -0.125em; flex-shrink: 0; -webkit-font-smoothing: antialiased; } .icon-md { font-size: 22px; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; } h1, h2, h3, h4, .font-heading { font-family: 'Poppins', sans-serif; } /* Note: horizontal overflow is prevented by keeping content within responsive containers (max-w-* / w-full / grid) rather than by overflow-x:hidden on html/body - that rule breaks the sticky header (position:sticky) in most browsers because it forces body into its own scroll container, so the header sticks to that box instead of the viewport and just scrolls away. If a specific element is ever found to overflow, fix that element's width instead of re-adding overflow-x:hidden here. */ /* Belt-and-braces guard against horizontal scroll on small screens. `overflow-x: clip` (unlike `hidden`) does NOT create a scroll container, so the sticky header keeps sticking to the viewport. Browsers without `clip` support simply fall back to the container-based approach above. */ @supports (overflow: clip) { html, body { overflow-x: clip; } } /* ===== Mobile / Tablet Navigation (hamburger + sidebar drawer) ===== */ .hamburger-btn { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; gap: 5px; background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; flex-shrink: 0; } .hamburger-btn span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; } .hamburger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav-overlay { position: fixed; inset: 0; background: rgba(16, 17, 20, 0.5); z-index: 60; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; } .mobile-nav-overlay.open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; } .mobile-nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 340px); background: var(--white); z-index: 70; box-shadow: -12px 0 32px -12px rgba(16, 17, 20, 0.35); transform: translateX(100%); transition: transform .35s cubic-bezier(.22,1,.36,1); display: flex; flex-direction: column; overflow-y: auto; max-width: 100%; } .mobile-nav-drawer.open { transform: translateX(0); } .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .mobile-nav-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; } .mobile-nav-close:hover { background: var(--light); } .mobile-nav-links { display: flex; flex-direction: column; padding: .5rem 0; } .mobile-nav-links a.nav-link { padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); font-size: 1rem; font-weight: 500; } .mobile-nav-links a.nav-link.active { background: var(--primary-tint); } .mobile-nav-links a.nav-link.active::after { display: none; } .mobile-nav-actions { padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; margin-top: auto; border-top: 1px solid var(--border); } body.nav-open { overflow: hidden; } @media (min-width: 1024px) { .hamburger-btn, .mobile-nav-overlay, .mobile-nav-drawer { display: none; } } /* Scroll reveal animation (existing) */ .reveal-up { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .reveal-up.in-view { opacity: 1; transform: translateY(0); } /* Nav */ .nav-link { color: #555555; position: relative; padding-bottom: 4px; } .nav-link:hover { color: #333333; } .nav-link.active { color: var(--primary); } .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gradient); border-radius: 2px; } /* Cards */ .card-hover { transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; } .card-hover:hover { box-shadow: 0 12px 28px -12px rgba(28,28,30,0.18); transform: translateY(-3px); border-color: #d6d6d8; } /* Buttons — themed with brand gradient */ .btn-red { background: var(--gradient); color: #fff; border: 1px solid transparent; } .btn-red:hover { filter: brightness(0.95); } .text-primary { color: var(--primary); } .border-primary { border-color: var(--primary); } .bg-primary-tint { background: var(--primary-tint); } .bg-brand-gradient { background: var(--gradient); } .dot-grid { background-image: radial-gradient(rgba(247,76,6,0.10) 1px, transparent 1px); background-size: 22px 22px; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background: var(--gradient); border-radius: 8px; } /* Tabs (Perpetual / Subscription) */ .tab-group-pills { display: inline-flex; padding: 4px; background: #fafafa; border: 1px solid var(--border); border-radius: 999px; } .tab-btn { border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; border: none; } .tab-btn.active { background: var(--gradient); color: #fff; } .tab-panel.hidden { display: none; } .tab-group-pills { display: inline-flex; width: fit-content; } /* ===== Floating WhatsApp button ================================== */ .whatsapp-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #ffffff; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.35); transition: transform .18s ease, box-shadow .18s ease; } .whatsapp-fab .bi { font-size: 30px; line-height: 1; } .whatsapp-fab:hover, .whatsapp-fab:focus-visible { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 26px -6px rgba(0, 0, 0, 0.4); color: #ffffff; } .whatsapp-fab:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; } @media (max-width: 640px) { /* Comfortable thumb target, clear of the viewport edge on phones. */ .whatsapp-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; } .whatsapp-fab .bi { font-size: 28px; } } @media (prefers-reduced-motion: reduce) { .whatsapp-fab { transition: none; } .whatsapp-fab:hover, .whatsapp-fab:focus-visible { transform: none; } } /* ===== Contact form validation / status ========================== */ .form-error { display: none; margin-top: 4px; font-size: 11px; font-weight: 600; color: #cd1414; } .field-invalid .form-error { display: block; } .field-invalid input, .field-invalid select, .field-invalid textarea { border-color: #cd1414; } .form-status { display: none; margin-top: 16px; padding: 12px 14px; border-radius: 6px; font-size: 13px; line-height: 1.5; } .form-status.is-visible { display: flex; gap: 8px; align-items: flex-start; } .form-status.is-success { background: #e6f5ef; color: #15603f; border: 1px solid #b9e2d1; } .form-status.is-error { background: #fdecec; color: #8c1414; border: 1px solid #f3c6c6; } .form-status.is-info { background: var(--primary-tint); color: #8a3208; border: 1px solid #f7cdb6; } /* Honeypot field - hidden from people, visible to naive bots. */ .hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ===== Product page FAQ (
accordion) ===================== Tailwind's `list-none` hides the marker in most browsers, but Safari needs the -webkit pseudo-element hidden explicitly. */ .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::marker { content: ""; } .faq-item > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }