/* ========================================================= ATO DIGITAL SOLUTIONS RESPONSIVE CSS ========================================================= */ /* ========================================================= TABLET ========================================================= */ @media (max-width: 1050px) { .desktop-nav { gap: 20px; } .desktop-nav-cta { display: none; } .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .featured-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } .work-process { grid-template-columns: repeat(3, minmax(0, 1fr)); } .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= MOBILE NAV ========================================================= */ @media (max-width: 880px) { :root { --navbar-height: 80px; } .desktop-nav, .desktop-nav-cta { display: none; } .mobile-menu-btn { display: flex; } .brand { position: absolute; top: 50%; left: 50%; width: 190px; height: 66px; transform: translate(-50%, -50%); } .nav-actions { margin-left: auto; } .home-slider { height: 310px; } .home-intro-grid, .page-opening-grid, .about-preview, .contact-grid { grid-template-columns: 1fr; gap: 34px; } .page-opening { padding: 65px 0 55px; } .section { padding: 75px 0; } .section-header { align-items: flex-start; } .mission-grid, .team-grid, .testimonial-grid { grid-template-columns: 1fr; } .projects-library { grid-template-columns: 1fr; } .process-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .process-strip > div { border-bottom: 1px solid var(--border); } .event-category-header { grid-template-columns: 1fr; gap: 18px; } .three-packages { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 620px) { :root { --navbar-height: 76px; } .container { width: calc(100% - 30px); } .brand { width: 174px; height: 61px; } /* ===================================================== SMALL HOMEPAGE SLIDESHOW ====================================================== */ .home-slider { height: 245px; } .slider-arrow { width: 36px; height: 36px; } .slider-prev { left: 10px; } .slider-next { right: 10px; } .slider-dots { bottom: 11px; } .home-intro { padding-top: 55px; } .home-intro-title { font-size: clamp(2.35rem, 11vw, 3.2rem); } .intro-actions { flex-direction: column; align-items: flex-start; } .intro-actions .btn { width: 100%; } .section { padding: 60px 0; } .section-header { display: block; margin-bottom: 34px; } .section-intro { margin-top: 17px; } .section-title { font-size: clamp(1.9rem, 8vw, 2.5rem); } .page-opening { padding: 52px 0 46px; } .page-opening h1 { font-size: clamp(2.1rem, 10vw, 3rem); } /* SERVICES */ .service-item { grid-template-columns: 42px 1fr 48px; gap: 12px; padding: 23px 0; } .service-main h3 { font-size: 1rem; } .service-main p { font-size: 0.84rem; } .service-icon { width: 45px; height: 45px; font-size: 1.1rem; } /* EVENTS */ .event-grid { display: flex; gap: 13px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; } .event-grid::-webkit-scrollbar { display: none; } .event-card { flex: 0 0 83%; scroll-snap-align: start; } /* INDUSTRIES */ .industry-grid { grid-template-columns: 1fr; gap: 8px; } .industry-card { min-height: 58px; } /* PROJECTS */ .featured-projects { display: flex; gap: 13px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; } .featured-projects::-webkit-scrollbar { display: none; } .featured-projects .project-card { flex: 0 0 86%; scroll-snap-align: start; } .project-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .project-filter::-webkit-scrollbar { display: none; } .filter-btn { flex: 0 0 auto; } /* ABOUT */ .process-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team-card { grid-template-columns: 1fr; } /* SERVICES PROCESS */ .work-process { grid-template-columns: 1fr; } /* EVENT PACKAGES */ .two-packages { grid-template-columns: 1fr; } .package-card { min-height: 0; padding: 24px; } .package-badge { position: static; width: fit-content; margin-bottom: 14px; } .anniversary-block { flex-direction: column; align-items: flex-start; } /* CONTACT */ .contact-form { padding: 24px; } /* CTA */ .main-cta { padding: 50px 0; } .main-cta-inner { flex-direction: column; align-items: flex-start; gap: 25px; } /* FOOTER */ .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { margin-top: 38px; } /* PACKAGE MODAL */ .package-modal { align-items: flex-end; padding: 0; } .package-modal-dialog { width: 100%; max-height: 90vh; padding: 29px 21px; border-radius: 20px 20px 0 0; } .modal-actions { flex-direction: column; } .modal-actions .btn { width: 100%; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 390px) { .brand { width: 162px; height: 58px; } .home-slider { height: 225px; } .values-grid { grid-template-columns: 1fr; } } /* ========================================================= ATO DIGITAL SOLUTIONS GLASS UI RESPONSIVE OVERRIDE Paste at the VERY BOTTOM of responsive.css ========================================================= */ /* ========================================================= TABLET / MOBILE ========================================================= */ @media (max-width: 880px) { /* NAVBAR */ .site-header { background: rgba(248, 252, 252, 0.82); backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); } /* MOBILE NAV */ .mobile-nav { background: rgba(248, 252, 252, 0.92); box-shadow: 0 20px 45px rgba(0, 16, 32, 0.13); backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%); } /* PAGE BACKGROUND */ body { background: radial-gradient( circle at 10% 15%, rgba(14, 222, 176, 0.08), transparent 24% ), radial-gradient( circle at 90% 45%, rgba(4, 78, 123, 0.08), transparent 28% ), linear-gradient( 135deg, #F8FBFC, #EFF6F7 ); background-attachment: scroll; } /* PROJECTS */ .project-card, .library-project-card { background: rgba(255, 255, 255, 0.64); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* PROCESS */ .process-strip { background: rgba(255, 255, 255, 0.58); } /* CONTACT FORM */ .contact-form { background: rgba(255, 255, 255, 0.64); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 620px) { /* ===================================================== NAVIGATION ====================================================== */ .site-header { background: rgba(248, 252, 252, 0.86); border-bottom: 1px solid rgba(255, 255, 255, 0.68); box-shadow: 0 7px 26px rgba(0, 16, 32, 0.08); } .mobile-menu-btn { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.58); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 6px 18px rgba(0, 16, 32, 0.07); } .mobile-nav { padding: 14px 5% 22px; background: rgba(248, 252, 252, 0.94); border-bottom: 1px solid rgba(255, 255, 255, 0.76); box-shadow: 0 20px 45px rgba(0, 16, 32, 0.13); } .mobile-nav > a { padding: 13px 3px; border-bottom: 1px solid rgba(0, 16, 32, 0.065); } .mobile-nav-cta { border: 1px solid rgba(255, 255, 255, 0.08) !important; background: rgba(0, 16, 32, 0.91); box-shadow: 0 10px 24px rgba(0, 16, 32, 0.14); } /* ===================================================== HERO ====================================================== */ .home-slider { box-shadow: 0 16px 40px rgba(0, 16, 32, 0.11); } .slider-dots { padding: 7px 10px; background: rgba(0, 16, 32, 0.30); border: 1px solid rgba(255, 255, 255, 0.11); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ===================================================== BUTTONS ====================================================== */ .btn { box-shadow: 0 7px 20px rgba(0, 16, 32, 0.07); } /* ===================================================== SERVICES ====================================================== */ .service-item { padding-left: 12px; padding-right: 12px; border-radius: 13px; } .service-item:hover { padding-left: 12px; padding-right: 12px; background: rgba(255, 255, 255, 0.62); box-shadow: 0 13px 34px rgba(0, 16, 32, 0.08); } .service-icon { border-radius: 13px; background: rgba(14, 222, 176, 0.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ===================================================== EVENT CARDS ====================================================== */ .event-card { border: 1px solid rgba(255, 255, 255, 0.10); background: linear-gradient( 145deg, rgba(255, 255, 255, 0.075), rgba(1, 29, 52, 0.48) ); box-shadow: 0 14px 36px rgba(0, 6, 17, 0.22); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* ===================================================== INDUSTRY CARDS ====================================================== */ .industry-card { background: rgba(255, 255, 255, 0.60); border: 1px solid rgba(255, 255, 255, 0.76); box-shadow: 0 8px 24px rgba(0, 16, 32, 0.055); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ===================================================== PROJECT CARDS ====================================================== */ .project-card, .library-project-card { background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(255, 255, 255, 0.76); box-shadow: 0 13px 34px rgba(0, 16, 32, 0.07); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* ===================================================== FILTER BUTTONS ====================================================== */ .filter-btn { background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.76); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .filter-btn.active { background: rgba(0, 16, 32, 0.92); border-color: rgba(0, 16, 32, 0.92); } /* ===================================================== PROCESS STRIP ====================================================== */ .process-strip { background: rgba(255, 255, 255, 0.60); border: 1px solid rgba(255, 255, 255, 0.74); box-shadow: 0 12px 32px rgba(0, 16, 32, 0.065); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); } .process-strip > div { border-right: 1px solid rgba(0, 16, 32, 0.06); border-bottom: 1px solid rgba(0, 16, 32, 0.06); } /* ===================================================== VALUE CARDS ====================================================== */ .value-card { background: rgba(255, 255, 255, 0.60); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 10px 28px rgba(0, 16, 32, 0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ===================================================== TEAM CARDS ====================================================== */ .team-card { background: rgba(255, 255, 255, 0.64); border: 1px solid rgba(255, 255, 255, 0.76); box-shadow: 0 13px 34px rgba(0, 16, 32, 0.07); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* ===================================================== TESTIMONIALS ====================================================== */ .testimonial-card { background: rgba(255, 255, 255, 0.64); border: 1px solid rgba(255, 255, 255, 0.76); box-shadow: 0 13px 34px rgba(0, 16, 32, 0.07); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* ===================================================== DARK CARDS ====================================================== */ .mission-card, .work-process article { background: linear-gradient( 145deg, rgba(255, 255, 255, 0.075), rgba(1, 29, 52, 0.50) ); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 14px 36px rgba(0, 6, 17, 0.20); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* ===================================================== PACKAGE CARDS ====================================================== */ .package-card { background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(255, 255, 255, 0.76); box-shadow: 0 13px 34px rgba(0, 16, 32, 0.07); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .featured-package { background: linear-gradient( 145deg, rgba(255, 255, 255, 0.76), rgba(224, 255, 247, 0.52) ); border-color: rgba(14, 222, 176, 0.46); } /* ===================================================== CONTACT DETAILS ====================================================== */ .contact-detail { background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.76); box-shadow: 0 9px 26px rgba(0, 16, 32, 0.055); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ===================================================== CONTACT FORM ====================================================== */ .contact-form { background: rgba(255, 255, 255, 0.67); border: 1px solid rgba(255, 255, 255, 0.78); box-shadow: 0 16px 42px rgba(0, 16, 32, 0.09); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .form-group input, .form-group select, .form-group textarea { background: rgba(255, 255, 255, 0.66); border: 1px solid rgba(0, 16, 32, 0.09); } /* ===================================================== PACKAGE MODAL ====================================================== */ .package-modal-backdrop { background: rgba(0, 6, 17, 0.67); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .package-modal-dialog { background: rgba(248, 252, 252, 0.94); border: 1px solid rgba(255, 255, 255, 0.76); box-shadow: 0 -15px 55px rgba(0, 6, 17, 0.20); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } /* ===================================================== FLOATING BUTTONS ====================================================== */ .back-to-top { background: rgba(0, 16, 32, 0.82); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 11px 30px rgba(0, 16, 32, 0.17); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .whatsapp-float { background: rgba(14, 222, 176, 0.90); border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 12px 32px rgba(0, 16, 32, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* ===================================================== TOAST ====================================================== */ .site-toast { background: rgba(248, 252, 252, 0.92); border: 1px solid rgba(255, 255, 255, 0.78); box-shadow: 0 18px 45px rgba(0, 16, 32, 0.14); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 390px) { .project-card, .library-project-card, .package-card, .team-card, .testimonial-card, .value-card, .industry-card, .contact-detail, .contact-form { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .mobile-nav { backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } } /* ========================================================= ATO DIGITAL SOLUTIONS PERFORMANCE OPTIMIZATION Faster mobile scrolling while preserving glass UI ========================================================= */ /* ========================================================= TABLET + MOBILE ========================================================= */ @media (max-width: 880px) { /* ----------------------------------------------------- FIXED HEADER Reduced from 22px blur ----------------------------------------------------- */ .site-header { backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); } /* ----------------------------------------------------- MOBILE NAVIGATION Reduced from 26px blur ----------------------------------------------------- */ .mobile-nav { backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); } /* ----------------------------------------------------- PROJECT CARDS ----------------------------------------------------- */ .project-card, .library-project-card { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ----------------------------------------------------- CONTACT FORM ----------------------------------------------------- */ .contact-form { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } } /* ========================================================= MOBILE PERFORMANCE ========================================================= */ @media (max-width: 620px) { /* ----------------------------------------------------- HEADER ----------------------------------------------------- */ .site-header { backdrop-filter: blur(7px) saturate(115%); -webkit-backdrop-filter: blur(7px) saturate(115%); } /* ----------------------------------------------------- MOBILE MENU ----------------------------------------------------- */ .mobile-nav { backdrop-filter: blur(7px) saturate(115%); -webkit-backdrop-filter: blur(7px) saturate(115%); } /* ----------------------------------------------------- HERO SLIDER Keep image rendering lightweight ----------------------------------------------------- */ .home-slider { contain: layout paint; transform: translateZ(0); -webkit-transform: translateZ(0); } .slider-track { transform: translateZ(0); -webkit-transform: translateZ(0); } .slide { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .slide img { width: 100%; height: 100%; display: block; object-fit: cover; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* ----------------------------------------------------- SLIDER DOTS Blur isn't visually necessary here ----------------------------------------------------- */ .slider-dots { background: rgba(0, 16, 32, 0.55); backdrop-filter: none; -webkit-backdrop-filter: none; } /* ----------------------------------------------------- SERVICE ICONS ----------------------------------------------------- */ .service-icon { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14, 222, 176, 0.12); } /* ----------------------------------------------------- EVENT CARDS Keep glass appearance with lighter blur ----------------------------------------------------- */ .event-card { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ----------------------------------------------------- INDUSTRY CARDS ----------------------------------------------------- */ .industry-card { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ----------------------------------------------------- PROJECT CARDS ----------------------------------------------------- */ .project-card, .library-project-card { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ----------------------------------------------------- FILTER BUTTONS Small elements don't need blur ----------------------------------------------------- */ .filter-btn { backdrop-filter: none; -webkit-backdrop-filter: none; } /* ----------------------------------------------------- PROCESS STRIP ----------------------------------------------------- */ .process-strip { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ----------------------------------------------------- VALUE CARDS ----------------------------------------------------- */ .value-card { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ----------------------------------------------------- TEAM CARDS ----------------------------------------------------- */ .team-card { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ----------------------------------------------------- TESTIMONIALS ----------------------------------------------------- */ .testimonial-card { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ----------------------------------------------------- DARK GLASS CARDS ----------------------------------------------------- */ .mission-card, .work-process article { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ----------------------------------------------------- PACKAGE CARDS ----------------------------------------------------- */ .package-card { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ----------------------------------------------------- CONTACT DETAILS ----------------------------------------------------- */ .contact-detail { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ----------------------------------------------------- CONTACT FORM ----------------------------------------------------- */ .contact-form { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ----------------------------------------------------- PACKAGE MODAL Only matters when modal is actually open ----------------------------------------------------- */ .package-modal-backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .package-modal-dialog { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ----------------------------------------------------- FIXED FLOATING BUTTONS Remove blur because these move with viewport ----------------------------------------------------- */ .back-to-top { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 16, 32, 0.92); } .whatsapp-float { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14, 222, 176, 0.96); } /* ----------------------------------------------------- TOAST ----------------------------------------------------- */ .site-toast { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ----------------------------------------------------- HORIZONTAL MOBILE CARDS Smoother native scrolling ----------------------------------------------------- */ .event-grid, .featured-projects, .project-filter { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* ----------------------------------------------------- GENERAL MOBILE IMAGE OPTIMIZATION ----------------------------------------------------- */ img { max-width: 100%; } /* ----------------------------------------------------- REMOVE UNNECESSARY GPU HINTS ----------------------------------------------------- */ .event-card, .industry-card, .project-card, .library-project-card, .value-card, .team-card, .testimonial-card, .package-card, .contact-detail { will-change: auto; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 390px) { /* Override the previous 14px glass blur */ .project-card, .library-project-card, .package-card, .team-card, .testimonial-card, .value-card, .industry-card, .contact-detail, .contact-form { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Override previous 22px mobile nav blur */ .mobile-nav { backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%); } .site-header { backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%); } } /* ========================================================= REDUCED MOTION Helps users/devices requesting less animation ========================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }