/* * AirFix Riyadh — Custom Stylesheet * Palette: Purple #7C3AED | Blue #2563EB | Cyan #06B6D4 | Orange #F97316 | Dark #050510 * * This file is linked from index.html . All rules use !important * where needed to win over the page's inline styles (inline style attributes * otherwise beat any external/class selector regardless of specificity). */ /* =================================================================== SMOOTH, PROFESSIONAL SCROLLING =================================================================== */ html { scroll-behavior: smooth; scroll-padding-top: 64px; } body { overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: none; } * { max-width: 100%; } img, svg, iframe { max-width: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (hover: none) { .svc-card:hover, .why-card:hover, .tcard:hover, .stat-card:hover, .gal-item:hover img, .hover-lift:hover, .btn-p:hover, .btn-c:hover, .btn-w:hover, .btn-out:hover { transform: none !important; box-shadow: none !important; } } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: #050510; } ::-webkit-scrollbar-thumb { background: linear-gradient(#7C3AED, #06B6D4); border-radius: 3px; } /* =================================================================== RESPONSIVE LAYOUT — TABLET (<=1023px) =================================================================== */ @media (max-width: 1023px) { #hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; padding: 110px 0 50px !important; text-align: center; } #hero-grid > div:first-child { display: flex; flex-direction: column; align-items: center; } #hero-grid p { margin-left: auto !important; margin-right: auto !important; } #hero-stats { max-width: 460px; margin: 0 auto; } #svc-grid { grid-template-columns: 1fr 1fr !important; } #why-grid { grid-template-columns: 1fr 1fr !important; } #process-grid{ grid-template-columns: 1fr 1fr !important; gap: 32px !important; } #test-grid { grid-template-columns: 1fr 1fr !important; } #gg { grid-template-columns: 1fr 1fr !important; } #contact-grid{ grid-template-columns: 1fr !important; gap: 40px !important; } #footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; } } /* =================================================================== RESPONSIVE LAYOUT — MOBILE (<=768px) =================================================================== */ @media (max-width: 768px) { #hero { min-height: auto !important; } #hero-grid { padding: 100px 0 44px !important; } h1 { font-size: clamp(2.1rem, 8vw, 2.8rem) !important; } .sec-h { font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important; } #svc-grid { grid-template-columns: 1fr !important; } #why-grid { grid-template-columns: 1fr 1fr !important; } #test-grid { grid-template-columns: 1fr !important; } #gg { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } section { padding-top: 56px !important; padding-bottom: 56px !important; } #hero { padding-top: 0 !important; padding-bottom: 0 !important; } .aurora-blob { filter: blur(50px) !important; } .a1 { width: 320px !important; height: 320px !important; } .a2 { width: 240px !important; height: 240px !important; } .a3, .a4 { display: none !important; } #contact-grid > div:nth-child(2) { padding: 26px !important; } } /* =================================================================== RESPONSIVE LAYOUT — SMALL PHONES (<=480px) =================================================================== */ @media (max-width: 480px) { #hero-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .stat-card { padding: 14px !important; } .stat-n { font-size: 2rem !important; } #why-grid { grid-template-columns: 1fr !important; } #process-grid { grid-template-columns: 1fr 1fr !important; } #footer-grid { grid-template-columns: 1fr !important; text-align: center; } #footer-grid > div > div[style*="display:flex"] { justify-content: center; } .btn-p, .btn-c, .btn-w, .btn-out { padding: 12px 20px !important; font-size: 14px !important; } .wa-fl { width: 50px !important; height: 50px !important; bottom: 18px !important; right: 14px !important; } .ca-fl { width: 50px !important; height: 50px !important; bottom: 78px !important; right: 14px !important; } .wa-fl i, .ca-fl i { font-size: 18px !important; } } /* ===== UTILITY EXTRAS ===== */ .text-gradient { background: linear-gradient(135deg, #7C3AED, #2563EB, #06B6D4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .glass-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(124,58,237,0.2); border-radius: 20px; } .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-8px); } .btn-glow:hover { box-shadow: 0 0 30px rgba(124,58,237,0.6); } @media print { #tb, #nav, .wa-fl, .ca-fl, #lb { display: none !important; } }