:root { --pink: #e6169c; --pink-light: #ff4fc3; --blue: #4f74f0; --blue-dark: #3d5fd8; --text-dark: #f2eefb; --text-muted: #b7aecb; --bg: #150f22; --bg-2: #1f1633; --radius-lg: 26px; --radius-pill: 999px; --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.08); --max-width: 640px; } html { margin: 0; padding: 0; width: 100%; overflow-x: hidden; /* fallback for very old browsers without overflow:clip */ /* overflow-x: clip (not hidden) — hidden forces the other axis into a scroll container per spec, which breaks position:sticky on the navbar in most mobile browsers. clip gives the same "no horizontal scroll" result without that side effect. */ overflow-x: clip; } /* Real-mobile-device overrides. The .mobile-device class is added to by an inline script in header.php, run synchronously before this stylesheet loads. It is based on touch capability + the device's physical screen.width/height (see header.php), NOT on window.innerWidth or a @media width query — because some mobile browsers report a desktop-sized layout viewport (e.g. Chrome "Desktop Site" mode) even on a real phone, which made a normal max-width media query fail to match and left the ~640px centered .container floating in the middle of the screen with large empty dark bands on both sides. These rules force the phone to use (almost) its full physical width no matter what viewport size the browser claims, while leaving plain desktop browsers (no touch, or a large physical screen) completely on the untouched ~640px centered layout below. !important is required here because .container and .navbar-inner already carry a plain (non-!important) max-width rule further down this file for desktop, which would otherwise win by source order on a mobile browser that also matches this block. */ html.mobile-device .container { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } html.mobile-device .navbar-inner { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } html.mobile-device .site-navbar { width: 100% !important; box-sizing: border-box !important; } * { box-sizing: border-box; } body { margin: 0; width: 100%; min-height: 100vh; background: radial-gradient(ellipse 900px 500px at 50% 0%, rgba(230, 22, 156, 0.10), rgba(230, 22, 156, 0) 60%), radial-gradient(ellipse 700px 500px at 90% 40%, rgba(79, 116, 240, 0.08), rgba(79, 116, 240, 0) 60%), #150f22; color: var(--text-dark); font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif; -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; /* fallback for very old browsers without overflow:clip */ overflow-x: clip; /* Pins this element as its own stacking-context boundary so the decorative layer below (z-index 0) can never be painted above the navbar/content layers (z-index 1+), regardless of how a given mobile/in-app browser handles compositing of animated layers. */ isolation: isolate; } /* Falling petals background effect. Uses position:absolute (not fixed) so it stretches across the FULL scrollable document height via top/right/bottom/left:0 against the body's own box, instead of being pinned to just the viewport. A fixed + animated layer is what caused petals to render above content and leave gaps on some mobile/in-app browsers; absolute positioning keeps it a normal part of the page's stacking order. */ .petals-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .petals-bg::before { content: ""; position: absolute; width: 300px; height: 300px; top: -140px; right: -100px; border-radius: 50%; filter: blur(55px); opacity: 0.5; background: radial-gradient(circle, #d7dcff 0%, #8f9dfa 35%, rgba(143,157,250,0) 65%); } .petals-bg::after { content: ""; position: absolute; width: 260px; height: 260px; bottom: -80px; left: -80px; border-radius: 50%; filter: blur(80px); opacity: 0.3; background: var(--pink); } .petal { position: absolute; /* top:0, NOT a percentage. This is the actual root cause of petals disappearing before the footer/copyright: the fall distance is driven entirely by translateY(--fall-start -> --fall-end), which main.js computes in absolute PIXELS from the real document height. A percentage `top` (e.g. top:-5%) is resolved against .petals-bg's own height (~the full document height), so on a long page it adds an extra "-5% of document height" offset ON TOP OF the translateY distance — e.g. on a ~3000px page that silently ate ~150px off the bottom of the fall range every single time, which is exactly the height of the footer copyright row. Keeping top at a fixed 0 means the only vertical offset is --fall-start (already -40px, set by main.js), so the animation's own start/end values are the single source of truth for how far petals travel — and that range already covers the full page, so they now reach the copyright line. */ top: 0; width: 14px; height: 22px; border-radius: 50% 50% 50% 0; background: linear-gradient(135deg, var(--pink-light), var(--pink)); box-shadow: 0 0 8px rgba(255, 79, 195, 0.5); opacity: 0.9; will-change: transform; animation-name: petal-fall, petal-sway; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; } /* --fall-start/--fall-end are set on #petalsBg by main.js from the real document height (see recalcPetalRange()), so the fall distance always matches the actual page length instead of a fixed viewport range. The vh fallbacks below only apply for the brief moment before that JS runs (or if JS is disabled), so the effect still works, just viewport-sized. */ @keyframes petal-fall { 0% { transform: translateY(var(--fall-start, -10vh)) rotate(var(--start-rot, 0deg)); } 100% { transform: translateY(var(--fall-end, 110vh)) rotate(calc(var(--start-rot, 0deg) + 360deg)); } } @keyframes petal-sway { 0%, 100% { margin-left: -25px; } 50% { margin-left: 25px; } } .container { position: relative; z-index: 1; } .container { max-width: var(--max-width); margin: 0 auto; padding: 40px 20px 0; } /* Header / branding */ .site-header { text-align: center; padding-top: 24px; } .site-logo { max-width: 120px; max-height: 120px; margin-bottom: 12px; } .site-title { font-size: clamp(2.2rem, 9vw, 3.4rem); font-weight: 800; margin: 0; letter-spacing: 0.5px; background: linear-gradient(90deg, var(--pink), var(--pink-light)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 4px 14px rgba(230, 22, 156, 0.18); } .hero-description { text-align: center; color: var(--text-muted); font-size: clamp(1rem, 3.6vw, 1.15rem); line-height: 1.5; margin: 18px auto 0; max-width: 560px; padding: 0 16px; box-sizing: border-box; } /* Sections spacing */ .section { margin-top: 40px; } /* Ad banner */ .ad-banner { display: block; width: 100%; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-soft); } .ad-banner img { display: block; width: 100%; height: auto; object-fit: cover; } .ad-banner-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .ad-stack .ad-banner + .ad-banner, .ad-stack .ad-block + .ad-block { margin-top: 20px; } /* Ad Network / HTML Ad Codes (Monetag, Adsterra, AdSense, custom) — renders whatever the admin pasted, so keep the wrapper itself strictly responsive and overflow-safe regardless of what the ad network's own markup does internally. */ .ad-code-container { width: 100%; max-width: 100%; overflow: hidden; margin: 20px auto; box-sizing: border-box; } .ad-code-container img, .ad-code-container iframe { max-width: 100%; } /* Device targeting: default to visible (All Devices). A code tagged mobile/desktop-only is toggled via the same synchronous html.mobile-device class set in (see includes/header.php) before first paint — no client-side flash, no layout shift. */ [data-ad-device="mobile"] { display: none; } [data-ad-device="desktop"] { display: block; } html.mobile-device [data-ad-device="mobile"] { display: block; } html.mobile-device [data-ad-device="desktop"] { display: none; } /* CTA buttons — vertical stack, spaced so they never touch */ .btn-stack { display: flex; flex-direction: column; gap: 14px; } .btn-pill { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 82px; box-sizing: border-box; text-align: left; padding: 14px 18px; border-radius: var(--radius-lg); background: rgba(230, 22, 156, 0.05); color: #fff; text-decoration: none; border: 1px solid rgba(230, 22, 156, 0.5); box-shadow: 0 0 22px rgba(230, 22, 156, 0.16); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; cursor: pointer; overflow: hidden; } /* Circular custom icon/photo on the LEFT of every CTA button. Falls back to the default icon automatically when a button has no custom image uploaded — see button_icon_url() in functions.php. */ .btn-pill-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); } .btn-pill-icon img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .btn-pill-icon svg { width: 52%; height: 52%; flex-shrink: 0; } /* Text block: label on top, optional subtitle underneath — both stay left-aligned next to the icon and truncate safely instead of overflowing or pushing the arrow off-screen. */ .btn-pill-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .btn-pill-label { font-weight: 800; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; } .btn-pill-subtitle { color: var(--text-muted); font-weight: 500; font-size: 0.78rem; line-height: 1.3; overflow-wrap: anywhere; opacity: 0.9; } /* Arrow on the RIGHT side */ .btn-pill-arrow { display: none; /* hidden per request — markup kept intact, not deleted */ flex: 0 0 auto; width: 20px; height: 20px; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85); } .btn-pill-arrow svg { width: 100%; height: 100%; } @media (max-width: 480px) { .btn-pill { gap: 12px; padding: 12px 16px; min-height: 76px; } .btn-pill-icon { width: 42px; height: 42px; } .btn-pill-label { font-size: 0.95rem; } } .btn-pill:hover, .btn-pill:focus-visible { transform: translateY(-2px); border-color: rgba(230, 22, 156, 0.8); box-shadow: 0 0 28px rgba(230, 22, 156, 0.26); } .btn-pill:active { transform: translateY(0); } @media (min-width: 640px) { .btn-stack { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; } .btn-pill { width: auto; min-height: auto; border: none; border-radius: var(--radius-pill); padding: 14px 22px; background: linear-gradient(90deg, var(--pink), var(--blue)); box-shadow: 0 6px 20px rgba(230, 22, 156, 0.3); } .btn-pill-icon, .btn-pill-subtitle { display: none; } .btn-pill-text { flex: 0 0 auto; } .btn-pill-label { font-size: 0.95rem; white-space: nowrap; } .btn-pill-arrow { width: 18px; height: 18px; } .btn-pill:hover, .btn-pill:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(230, 22, 156, 0.4); } } /* Trust heading */ .trust-heading { text-align: center; color: var(--pink); font-weight: 800; font-size: clamp(1.2rem, 5vw, 1.6rem); text-shadow: 0 3px 10px rgba(230, 22, 156, 0.15); } /* Contact page */ .section-divider { border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0 0 32px; } /* FAQ */ .faq-item { text-align: left; border: 1px solid rgba(230, 22, 156, 0.35); background: rgba(255, 255, 255, 0.02); border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; cursor: pointer; } @media (min-width: 640px) { .faq-item { max-width: 720px; margin-left: auto; margin-right: auto; padding: 8px 16px; margin-bottom: 8px; } .faq-question { font-size: 0.95rem; } } .faq-question { color: var(--pink-light); font-weight: 700; font-size: 1.05rem; list-style: none; } .faq-question::-webkit-details-marker { display: none; } .faq-answer { color: var(--text-muted); text-align: left; margin: 14px 0 0; line-height: 1.5; } .faq-still { color: var(--text-dark); margin-top: 40px; } .contact-heading { color: var(--pink); font-weight: 800; font-size: clamp(2.2rem, 9vw, 3rem); margin: 0 0 18px; } .contact-sub { color: var(--text-muted); max-width: 520px; margin: 0 auto 32px; line-height: 1.6; } /* Why Choose Us */ .why-choose-us { position: relative; } .whychoose-sub { color: var(--text-muted); font-weight: 600; letter-spacing: 0.3px; margin: 0 0 32px; } .feature-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 4px 10px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; } .feature-grid::-webkit-scrollbar { display: none; } .feature-card { position: relative; text-align: center; border: 1px solid rgba(230, 22, 156, 0.45); border-radius: var(--radius-lg); padding: 46px 26px; background: rgba(230, 22, 156, 0.04); flex: 0 0 82%; scroll-snap-align: center; } .feature-icon { width: 84px; height: 84px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--pink-light); background: transparent; } .feature-icon svg { width: 34px; height: 34px; color: var(--pink-light); } .feature-title { color: var(--pink-light); font-weight: 800; font-size: 1.25rem; margin: 0 0 14px; } .feature-text { position: relative; z-index: 1; color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; margin: 0; } @media (min-width: 700px) { .feature-card { flex: 0 0 280px; } .feature-grid { justify-content: center; overflow-x: visible; } } .telegram-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; border: 1px solid rgba(230, 22, 156, 0.35); border-radius: var(--radius-lg); padding: 32px 22px; max-width: 720px; margin: 0 auto; background: rgba(230, 22, 156, 0.04); } .telegram-box-icon-wrap { width: 48px; height: 48px; flex-shrink: 0; color: var(--pink); } .telegram-box-icon { width: 100%; height: 100%; } .telegram-box-body { min-width: 0; } .telegram-box-title { color: #fff; font-size: 1.15rem; font-weight: 800; margin: 0 0 6px; } .telegram-box-text { color: var(--text-muted); line-height: 1.5; margin: 0; } .telegram-box-btn.btn-gradient { width: 100%; flex-shrink: 0; padding: 14px 22px; } /* Desktop: match the FAQ box's compact size/padding instead of the larger mobile padding above. Mobile is intentionally untouched. */ @media (min-width: 640px) { .telegram-box { flex-direction: row; align-items: center; text-align: left; padding: 16px 20px; gap: 16px; border-radius: 12px; } .telegram-box-icon-wrap { width: 34px; height: 34px; } .telegram-box-title { font-size: 1rem; margin: 0 0 3px; } .telegram-box-text { font-size: 0.85rem; line-height: 1.4; } .telegram-box-body { flex: 1 1 200px; min-width: 160px; } .telegram-box-btn.btn-gradient { width: auto; white-space: nowrap; padding: 10px 18px; font-size: 0.9rem; } } .btn-gradient { display: inline-block; width: 100%; box-sizing: border-box; text-align: center; padding: 18px 24px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--pink), var(--blue)); color: #fff; font-weight: 700; font-size: 1.05rem; text-decoration: none; } /* Footer */ .site-footer { text-align: center; margin-top: 60px; padding: 36px 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-muted); font-size: 0.85rem; } .footer-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin-bottom: 8px; } .footer-logo { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex-shrink: 0; } .footer-title { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: 0.5px; } .footer-title-white { color: #fff; } .footer-title-pink { color: var(--pink-light); } .footer-tagline { max-width: 560px; margin: 0 auto 18px; padding: 0 16px; box-sizing: border-box; color: var(--text-muted); line-height: 1.5; } @media (min-width: 700px) { .footer-brand { flex-direction: row; } } .site-footer .footer-links { margin: 10px 0; } .site-footer .footer-links a { color: var(--pink-light); text-decoration: none; margin: 0 12px; font-weight: 600; } .site-footer .footer-links a:hover { color: #fff; } .site-footer .social-links { margin-top: 10px; } .site-footer .social-links a { color: var(--pink); text-decoration: none; margin: 0 8px; font-weight: 600; } .footer-divider { margin: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-bottom { padding: 18px 20px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); font-size: 0.8rem; } .footer-mini-logo { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; } .footer-bottom-brand { color: var(--pink-light); font-weight: 600; } /* Top navbar (dark, edge-to-edge) */ .site-navbar { background: #15111f; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); } .navbar-inner { max-width: var(--max-width); margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .navbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; } .navbar-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; } .navbar-name { color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .navbar-badge { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--pink); display: flex; align-items: center; justify-content: center; } .navbar-badge svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .navbar-icons { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .navbar-icon-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: none; text-decoration: none; cursor: pointer; transition: background 0.15s ease; animation: navIconPulse 2.2s ease-in-out infinite; } @keyframes navIconPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 22, 156, 0.35); } 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(230, 22, 156, 0); } } .navbar-icon-btn:active { background: var(--pink) !important; } .navbar-icon-btn:active svg { stroke: #fff; } .navbar-icon-btn svg { width: 18px; height: 18px; stroke: #cfd1db; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .navbar-icon-btn.cart { background: var(--pink); } .navbar-icon-btn.cart svg { stroke: #fff; fill: #fff; } @media (min-width: 700px) { .container { padding-top: 60px; } }