/* Supplemental rules ONLY for markup that has no counterpart in the uploaded templates: dropdown submenus, footer social icons and flash messages. These classes do not exist in the original stylesheets, so nothing is overridden. */ .nav-item{ position:relative; } .nav-submenu{ display:none; position:absolute; top:100%; left:0; margin-top:14px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px; min-width:200px; box-shadow:0 20px 40px -20px rgba(0,0,0,.6); z-index:120; } .nav-item:hover .nav-submenu{ display:block; } .nav-submenu a{ display:block; padding:9px 12px; border-radius:6px; white-space:nowrap; } .nav-submenu a:hover{ background:var(--surface-2); } .footer-social{ display:flex; gap:12px; margin-top:16px; } .footer-social a{ width:32px; height:32px; border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--text-muted); } .footer-social a:hover{ color:var(--accent); border-color:var(--accent-dim); } .site-message{ background:var(--accent-glow); border:1px solid var(--accent-dim); color:var(--text); padding:14px 18px; border-radius:10px; margin-bottom:14px; font-size:14px; } .site-message-error{ background:rgba(229,103,90,.12); border-color:#E5675A; color:#E5675A; } @media (max-width:1040px){ .nav-item .nav-submenu{ display:block; position:static; border:none; padding:0 0 0 14px; margin-top:0; background:transparent; box-shadow:none; } } /* Checkout fields inside the pricing ticket. New classes only — the original stylesheets are untouched. */ .checkout-field{ width:100%; margin-bottom:8px; padding:10px 12px; font-size:13.5px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); } .checkout-field::placeholder{ color:var(--text-dim); } .checkout-field:focus{ outline:none; border-color:var(--accent); } /* --------------------------------------------------------------------------- Floating WhatsApp button. New classes only — nothing in the original stylesheets is overridden. --------------------------------------------------------------------------- */ .wa-float{ position:fixed; bottom:22px; z-index:150; display:inline-flex; align-items:center; gap:10px; padding:11px 16px 11px 12px; border-radius:40px; background:#25D366; color:#0A2E17; font-weight:600; font-size:14px; box-shadow:0 10px 28px -8px rgba(0,0,0,.5); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; } .wa-float:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(0,0,0,.55); } .wa-float:active{ transform:translateY(0); } .wa-right{ right:22px; } .wa-left{ left:22px; } .wa-icon{ display:flex; align-items:center; } .wa-text{ display:flex; flex-direction:column; line-height:1.25; } .wa-hours{ font-size:11px; font-weight:500; opacity:.75; } /* Live-chat widgets sit bottom-right, so shift the button up to avoid overlap. */ .wa-right.wa-with-chat{ bottom:96px; } @media (max-width:640px){ .wa-float{ padding:12px; bottom:16px; } .wa-right{ right:16px; } .wa-left{ left:16px; } .wa-text{ display:none; } /* icon only on small screens */ .wa-desktop-only{ display:none; } } @media (prefers-reduced-motion: reduce){ .wa-float{ transition:none; } .wa-float:hover{ transform:none; } } /* --------------------------------------------------------------------------- Mobile horizontal-scroll fix. The off-canvas menu is position:fixed and parked off-screen right with translateX(100%). `overflow-x:hidden` on alone does not contain that on iOS Safari or Chrome Android — the browser still lets the user pan across to the hidden panel, which reads as "the site isn't responsive". Fixing it needs three things: 1. overflow-x:hidden on as well as 2. the panel clipped out of the layout entirely until it is opened 3. a max-width guard so no single element can force the page wider These are additive rules; the original stylesheets are untouched. --------------------------------------------------------------------------- */ html{ overflow-x:hidden; max-width:100%; } body{ overflow-x:hidden; max-width:100%; position:relative; } @media (max-width:1040px){ /* The mobile menu panel is defined once, further down in this file. */ /* Nothing should be able to push the viewport wider than the screen. */ .container, .hero, .section, .cta-band, .footer-grid, .post-grid, .features-grid, .plans-grid, .config-grid, .contact-grid{ max-width:100%; } /* Long unbroken strings (URLs, IDs, code) are a classic overflow cause. */ .post-excerpt, .article-body, .story, .ticket-row, details p, code, pre{ overflow-wrap:break-word; word-wrap:break-word; } pre, code{ white-space:pre-wrap; } /* Terminal / invoice panels are wide by nature — let them scroll internally rather than stretching the page. */ .terminal-body, .browser-canvas{ overflow-x:auto; max-width:100%; } } /* Tables scroll inside their own box instead of widening the page. */ @media (max-width:760px){ table{ display:block; overflow-x:auto; max-width:100%; } } /* "Client login" / "My account" in the header. A new class, so the uploaded stylesheets stay untouched. */ .nav-account{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border:1px solid var(--border); border-radius:20px; font-size:12.5px; color:var(--text-muted); white-space:nowrap; } .nav-account::before{ content:"\25CF"; font-size:8px; color:var(--accent); } .nav-account:hover{ border-color:var(--accent-dim); color:var(--accent); } @media (max-width:1040px){ .nav-account{ margin-top:14px; align-self:flex-start; } } /* --------------------------------------------------------------------------- Mobile menu panel — complete, self-contained. The original rule for this lives in each page's stylesheet. When those files are served from an older build, or a page uses a different stylesheet, the panel loses its background and layout and only the first link is visible. Declaring the whole panel here means it works the same on every page and does not depend on which page stylesheet happens to be loaded. --------------------------------------------------------------------------- */ @media (max-width:1040px){ /* THE cause of the collapsed menu panel. .nav has backdrop-filter:blur(10px). Any ancestor with backdrop-filter, filter, transform or perspective becomes the containing block for its position:fixed descendants — so the panel was being positioned inside the 72px-tall header instead of the viewport. inset:72px 0 0 0 against a 72px box leaves zero height, which is why one item showed in a tiny scroller. Dropping the blur on mobile hands the panel back to the viewport. */ .nav{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bg, #10151C); } .nav-links{ position:fixed; top:72px; right:0; bottom:0; left:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:28px 24px 40px; background:var(--bg, #10151C); transform:translateX(100%); transition:transform .2s ease; z-index:99; overflow-y:auto; -webkit-overflow-scrolling:touch; box-sizing:border-box; } .nav-links.open{ transform:translateX(0); } /* Every entry on its own full-width row, including the CTA and account pill. */ .nav-links > a, .nav-links > .nav-item, .nav-links > .nav-item > a{ display:block; width:100%; box-sizing:border-box; padding:14px 0; font-size:16px; border-bottom:1px solid var(--border-soft, rgba(255,255,255,.08)); } .nav-links > .nav-item{ padding:0; border-bottom:none; } /* Sub-menu items sit indented under their parent rather than as a dropdown. */ .nav-links .nav-submenu{ position:static; display:block; opacity:1; visibility:visible; transform:none; background:none; border:none; box-shadow:none; padding:0 0 0 14px; min-width:0; } .nav-links .nav-submenu a{ display:block; width:100%; padding:12px 0; font-size:15px; border-bottom:1px solid var(--border-soft, rgba(255,255,255,.06)); } .nav-links > .btn{ margin-top:18px; width:100%; text-align:center; border-bottom:none; } .nav-account{ margin-top:16px; border-bottom:none !important; } }