/* ============================================================= Air Sorce-1 HVAC — css/style.css Non-critical styles. Loaded async via media="print" swap. Above-the-fold CSS is inlined in each HTML . ============================================================= */ /* TYPOGRAPHY */ h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); } h3 { font-size: clamp(1.05rem, 2vw, 1.35rem); } h4 { font-size: 1rem; } p { font-size: 1rem; color: var(--gray-700); max-width: 68ch; } /* LAYOUT UTILITIES */ .section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; } .section-alt { background: var(--off-white); } .text-center { text-align: center; } .text-center p { margin-left: auto; margin-right: auto; } .section-label { display: inline-block; font-family: var(--font-heading); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red); background: rgba(192, 57, 43, .08); padding: .3rem .9rem; border-radius: 100px; margin-bottom: .75rem; } .section-title { margin-bottom: 1rem; } .section-sub { font-size: 1.05rem; color: var(--gray-500); max-width: 54ch; margin: 0 auto 2.5rem; } /* PAGE HERO (inner pages) */ .page-hero { background: var(--blue); padding: 4rem 0 3rem; position: relative; } .page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--red); } .page-hero h1 { color: var(--white); font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 2.8rem); contain: layout; } .page-hero .sub { color: rgba(255,255,255,.78); font-size: 1.05rem; max-width: 52ch; margin-top: .75rem; } /* TRUST BAR */ .trust-bar { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--white); } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .trust-card { text-align: center; padding: 1.75rem 1rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .trust-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .trust-card-icon { font-size: 2rem; margin-bottom: .75rem; } .trust-card h3 { font-size: 1rem; margin-bottom: .3rem; } .trust-card p { font-size: .88rem; color: var(--gray-500); max-width: none; } /* SERVICES GRID */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: left; } .service-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 2rem 1.75rem; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--red), var(--red-light)); } .service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .service-icon { font-size: 2rem; margin-bottom: 1rem; } .service-card h3 { font-size: 1.1rem; margin-bottom: .6rem; } .service-card p { font-size: .9rem; color: var(--gray-500); margin-bottom: 1.25rem; } .service-link { font-family: var(--font-heading); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--red); font-weight: 700; transition: color var(--transition); } .service-link:hover { color: var(--red-dark); } /* WHY CHOOSE US */ .why-grid { display: grid; grid-template-columns: 1fr 400px; gap: 4rem; align-items: center; } .why-intro { font-size: 1.05rem; color: var(--gray-500); margin-bottom: 2rem; max-width: none; } .why-list { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; } .why-item { display: flex; gap: 1rem; align-items: flex-start; } .why-check { width: 28px; height: 28px; background: var(--red); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; flex-shrink: 0; margin-top: .15rem; } .why-item h3 { font-size: 1rem; margin-bottom: .3rem; font-weight: 600; } .why-item p { font-size: .9rem; color: var(--gray-500); max-width: none; } .why-visual { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%); border-radius: var(--radius-lg); min-height: 320px; display: flex; align-items: center; justify-content: center; } .why-badge { background: var(--red); color: white; border-radius: var(--radius-lg); padding: 1.5rem 2rem; text-align: center; box-shadow: var(--shadow-lg); } .why-badge .num { display: block; font-family: var(--font-heading); font-size: 3.5rem; font-weight: 700; line-height: 1; } .why-badge .label { display: block; font-family: var(--font-heading); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; opacity: .9; margin-top: .4rem; } /* TESTIMONIALS */ .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: left; } .testimonial-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .stars { color: #F59E0B; font-size: 1.1rem; margin-bottom: .75rem; } .testimonial-text { font-size: .93rem; color: var(--gray-700); line-height: 1.7; margin-bottom: 1.25rem; flex: 1; } .testimonial-author { display: flex; align-items: center; gap: .75rem; } .author-avatar { width: 42px; height: 42px; background: linear-gradient(135deg, var(--blue), var(--blue-mid)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-family: var(--font-heading); font-size: .85rem; font-weight: 700; flex-shrink: 0; } .author-name { font-weight: 700; font-size: .9rem; color: var(--gray-900); } .author-location { font-size: .8rem; color: var(--gray-500); } /* MAP */ .map-container { aspect-ratio: 16 / 7; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); margin-top: 1rem; } .map-container iframe { width: 100%; height: 100%; border: 0; display: block; } /* HOW IT WORKS */ .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2rem; } .step { text-align: center; padding: 2rem 1.25rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .step-num { width: 52px; height: 52px; background: var(--red); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; margin: 0 auto 1rem; } .step h3 { font-size: 1rem; margin-bottom: .5rem; } .step p { font-size: .88rem; color: var(--gray-500); max-width: none; } /* FAQ */ .faq-list { max-width: 760px; margin: 2rem auto 0; display: flex; flex-direction: column; gap: .75rem; } .faq-item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; } .faq-q { width: 100%; padding: 1.1rem 1.25rem; background: transparent; border: none; text-align: left; font-family: var(--font-heading); font-size: .95rem; font-weight: 700; color: var(--gray-900); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: background var(--transition); min-height: 44px; } .faq-q:hover { background: var(--gray-100); } .faq-q:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } .faq-q::after { content: '+'; font-size: 1.4rem; color: var(--red); flex-shrink: 0; transition: transform var(--transition); } .faq-item.open .faq-q::after { transform: rotate(45deg); } .faq-a { display: none; padding: .75rem 1.25rem 1.25rem; font-size: .93rem; color: var(--gray-700); line-height: 1.7; border-top: 1px solid var(--gray-100); } .faq-item.open .faq-a { display: block; } /* CTA BANNER */ .cta-banner { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%); padding: clamp(3rem, 6vw, 5rem) 0; } .cta-inner { text-align: center; } .cta-inner h2 { color: var(--white); margin-bottom: 1rem; } .cta-inner p { color: rgba(255,255,255,.82); max-width: 52ch; margin: 0 auto 2.5rem; font-size: 1.05rem; } .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* FOOTER */ footer { background: var(--gray-900); padding: clamp(3rem, 6vw, 5rem) 0 2rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; } .footer-brand .logo-wrap { margin-bottom: 1rem; } .footer-brand p { font-size: .88rem; color: rgba(255,255,255,.8); max-width: 30ch; margin-bottom: 1.25rem; } .footer-brand address { display: flex; flex-direction: column; gap: .5rem; } .footer-brand address a { font-size: .88rem; color: rgba(255,255,255,.85); transition: color var(--transition); } .footer-brand address a:hover { color: var(--white); } .footer-col h3 { font-family: var(--font-heading); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--white); margin-bottom: 1rem; } .footer-col ul { display: flex; flex-direction: column; gap: .5rem; } .footer-col li { font-size: .88rem; color: rgba(255,255,255,.8); } .footer-col a { font-size: .88rem; color: rgba(255,255,255,.85); transition: color var(--transition); } .footer-col a:hover { color: var(--white); } .footer-col .emergency { color: var(--red-light); font-weight: 700; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-bottom p { font-size: .82rem; color: rgba(255,255,255,.75); } .footer-bottom a { color: rgba(255,255,255,.85); transition: color var(--transition); } .footer-bottom a:hover { color: var(--white); } /* ABOUT PAGE */ .about-grid { display: grid; grid-template-columns: 1fr 380px; gap: 4rem; align-items: start; } .about-text h2 { margin-bottom: 1rem; } .about-text p { margin-bottom: 1.25rem; } .about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .stat-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.5rem; text-align: center; box-shadow: var(--shadow-sm); } .stat-num { display: block; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; color: var(--red); line-height: 1; } .stat-label { display: block; font-size: .85rem; color: var(--gray-500); margin-top: .3rem; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .08em; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: left; } .value-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); } .value-icon { font-size: 2rem; margin-bottom: 1rem; } /* SERVICES PAGE */ .service-detail-grid { display: grid; grid-template-columns: 1fr 200px; gap: 3rem; align-items: center; } .service-detail-grid.reverse { grid-template-columns: 200px 1fr; } .service-detail-icon { font-size: 8rem; text-align: center; opacity: .8; } .service-detail-list { list-style: none; margin: 1.5rem 0 2rem; display: flex; flex-direction: column; gap: .65rem; } .service-detail-list li { display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: var(--gray-700); } .service-detail-list li::before { content: '✓'; color: var(--red); font-weight: 700; flex-shrink: 0; } .maintenance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; } .maintenance-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); position: relative; } .maintenance-card h3 { margin-bottom: .75rem; } .maintenance-card p { font-size: .9rem; color: var(--gray-500); margin-bottom: 1.5rem; } .maintenance-card.featured { border-color: var(--red); box-shadow: 0 0 0 2px var(--red), var(--shadow-md); } .featured-badge { background: var(--red); color: white; font-family: var(--font-heading); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .75rem; border-radius: 100px; margin-bottom: .75rem; display: inline-block; } /* CONTACT PAGE */ .contact-grid { display: grid; grid-template-columns: 1fr 400px; gap: 3rem; align-items: start; } .contact-form-wrap h2 { margin-bottom: .5rem; } .contact-form-wrap > p { margin-bottom: 2rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.25rem; } .form-group label { font-family: var(--font-heading); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-700); font-weight: 700; } .form-group input, .form-group textarea { padding: .75rem 1rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; color: var(--gray-900); background: var(--white); transition: border-color var(--transition); min-height: 44px; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,58,92,.1); } .form-group textarea { resize: vertical; min-height: 120px; } .contact-info h2 { margin-bottom: 1.5rem; } .contact-info address { display: flex; flex-direction: column; gap: 1.5rem; } .contact-info-item { display: flex; gap: 1rem; align-items: flex-start; } .contact-info-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: .1rem; } .contact-info-item strong { display: block; font-family: var(--font-heading); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); margin-bottom: .3rem; } .contact-info-item a, .contact-info-item span { display: block; font-size: .95rem; color: var(--gray-700); transition: color var(--transition); } .contact-info-item a:hover { color: var(--blue); } .emergency-text { color: var(--red) !important; font-weight: 700 !important; } /* SCROLL ANIMATIONS */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity .4s ease, transform .4s ease; will-change: transform, opacity; } /* Safety: if JS fails or misses element, show content after 1.5s */ @keyframes fadeInSafe{to{opacity:1;transform:none;}} .fade-in{animation:fadeInSafe 0s 1.5s forwards;} .js-loaded .fade-in{animation:none;} .fade-in.visible { opacity: 1; transform: none; will-change: auto; } /* TABLET */ @media (max-width: 1024px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } .services-grid { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: 1fr; } .why-visual { min-height: 200px; } .steps-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .about-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .values-grid { grid-template-columns: 1fr 1fr; } .maintenance-grid { grid-template-columns: 1fr 1fr; } .service-detail-grid, .service-detail-grid.reverse { grid-template-columns: 1fr; } .service-detail-icon { display: none; } } /* MOBILE */ @media (max-width: 768px) { .trust-grid { grid-template-columns: 1fr 1fr; } .services-grid { grid-template-columns: 1fr; } .testimonials-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } .map-container { aspect-ratio: 4 / 3; } .why-grid { gap: 2rem; } .form-row { grid-template-columns: 1fr; } .values-grid { grid-template-columns: 1fr; } .maintenance-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .cta-actions { flex-direction: column; align-items: center; } .trust-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; } .about-stats { grid-template-columns: 1fr 1fr; } } /* MAP PLACEHOLDER — loads iframe only on click */ .map-placeholder { width: 100%; height: 100%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); } .map-placeholder-inner { text-align: center; } .map-icon { font-size: 3rem; display: block; margin-bottom: .75rem; } .map-placeholder-inner p { font-family: var(--font-heading); font-size: 1.1rem; color: var(--gray-500); margin-bottom: 1.25rem; } /* PHOTO GRID */ .photos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; } .photo-slot { border-radius: var(--radius-lg); overflow: hidden; background: var(--gray-100); aspect-ratio: 4 / 3; } .photo-slot img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } @media (max-width: 768px) { .photos-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .photos-grid { grid-template-columns: 1fr; } } /* Screen-reader only — visually hidden but accessible */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}