/* responsive.css — shared mobile/tablet layout safety net, loaded on every page. Scoped entirely to max-width media queries so desktop/laptop rendering is never touched. Fixes generic overflow/oversized-heading issues that were causing horizontal scrolling and text spilling off-screen on phones and tablets, without altering colors, fonts, or component structure. */ /* Hidden by default so pages that don't have a .mobile-bg-fixed element (or render it on desktop briefly before this stylesheet applies) never show it outside the mobile media query below. */ .mobile-bg-fixed { display: none; } @media (max-width: 1024px) { html, body { overflow-x: hidden; } img, video { max-width: 100%; } /* background-attachment:fixed is unreliable on mobile browsers — it can render blank/white on scroll, and even where it doesn't, switching it to `scroll` instead makes `background-size: cover` size against the full (very tall, 10000px+) page instead of the viewport, blowing the bright center of the radial-gradient "spotlight" into one giant washed-out white area, or (with a viewport-sized tile) causing a visible seam every time the pattern repeats down the page. `.mobile-bg-fixed` is a real position:fixed element (inserted as the first child of on every page) standing in for the CSS property instead. Being a genuine fixed element — not a background-attachment trick — it paints once and stays glued to the viewport at every scroll depth with no seams, exactly matching the desktop `fixed` look. The page's own `body` background is neutered to a flat fallback color so nothing shows through underneath it. Selector specificity (html body) intentionally beats each page's own `body { background: ... !important; }` rule. */ .mobile-bg-fixed { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.98) 0%, rgba(210, 244, 255, 0.85) 25%, rgba(14, 165, 233, 0.45) 55%, transparent 75%), radial-gradient(circle at 18% 15%, rgba(125, 211, 252, 0.7) 0%, transparent 45%), radial-gradient(circle at 82% 85%, rgba(56, 189, 248, 0.6) 0%, transparent 50%), linear-gradient(135deg, #0093e9 0%, #0077c8 60%, #005c9e 100%); background-size: cover; } html body { background: #0077c8 !important; background-attachment: scroll !important; } } @media (max-width: 900px) { h1 { font-size: clamp(1.9rem, 8vw, 3.2rem) !important; } h2 { font-size: clamp(1.7rem, 7vw, 2.8rem) !important; } h3 { font-size: clamp(1.3rem, 5.5vw, 2rem) !important; } /* Most product/system pages set body-copy font-sizes as large inline styles tuned for desktop (e.g. style="font-size: 1.45rem"). Only an !important stylesheet rule can win over an inline style without !important, so this is the only way to bring paragraph text down to a readable size on phones/tablets without editing every page. */ p { font-size: clamp(0.95rem, 4vw, 1.15rem) !important; line-height: 1.6 !important; } /* Data tables (e.g. the thermal-sensitivity table on the sprinkler page) use generous desktop padding/font-size inline; shrink them so the table reads well inside its existing horizontal-scroll wrapper instead of feeling cramped/broken. */ table th, table td { padding: 10px 12px !important; font-size: 0.8rem !important; } /* The shared footer component (public/components/footer.html) is built with inline `display:flex` (not the .footer-grid class's grid-template-columns), so only a flex-direction override actually stacks it into one column on narrow screens. */ .footer-grid { flex-direction: column !important; gap: 36px !important; margin-bottom: 36px !important; } .footer-col[style*="text-align: right"] { text-align: left !important; } /* Tighter, more evenly-rhythmed footer to match the Vajrang Kuteer mobile footer: a compact tracked-uppercase label above the contact block (instead of a full-size bold word), smaller/consistent body text, and less top/bottom breathing room than the desktop footer. */ footer { padding: 50px 0 24px !important; } .footer-col > strong { display: block; font-size: 0.7rem !important; font-weight: 600 !important; letter-spacing: 2.5px !important; text-transform: uppercase; opacity: 0.75; margin-bottom: 12px !important; } .footer-col .nav-logo-text strong { font-size: 1.1rem !important; letter-spacing: 0.2px !important; } .footer-col p { font-size: 0.85rem !important; line-height: 1.5 !important; margin-bottom: 8px !important; } .footer-bottom { padding-top: 24px !important; font-size: 0.75rem !important; letter-spacing: 0.5px; } } @media (max-width: 480px) { h1 { font-size: clamp(1.7rem, 9vw, 2.4rem) !important; } h2 { font-size: clamp(1.5rem, 8vw, 2rem) !important; } }