/* ============================================================ ADAMS CHIMNEY SWEEP — Mobile Stylesheet Add to every page's , AFTER shared.css loads. ============================================================ */ /* ============================================================ 1. NAV — tighter height on small screens ============================================================ */ @media (max-width: 768px) { #site-nav .nav-inner { height: 64px; padding: 0 16px; } .logo-img { height: 48px !important; } /* Mobile menu — full-screen overlay feel */ .nav-links { top: 64px; padding: 16px 16px 24px; gap: 2px; } .nav-links a { padding: 14px 16px; font-size: 14px; border-radius: 4px; } .nav-links a.nav-cta { margin-top: 8px; text-align: center; justify-content: center; display: flex; } /* page-wrap offset matches new nav height */ .page-wrap { padding-top: 64px; } /* Booking progress bar sticky offset */ .booking-progress { top: 64px !important; } } /* ============================================================ 2. FLOATING BUTTONS — side by side, bottom center ============================================================ */ @media (max-width: 768px) { /* Hide accessibility toolbar entirely on mobile */ #a11y-toolbar { display: none !important; } /* Align Need Help + Call Now to opposite bottom corners */ .help-float, .need-help-btn { position: fixed; bottom: 16px; top: auto; padding: 12px 16px; font-size: 12px; border-radius: 50px; transform: none; z-index: 9998; } .need-help-btn { left: 16px; } .help-float { right: 16px; } /* Chat panel — full-width bottom sheet */ .chat-panel { left: 0; right: 0; bottom: 0; width: 100%; max-height: 85vh; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,.6); } /* Chat header — tighter on mobile */ .chat-header { padding: 14px 16px; border-radius: 16px 16px 0 0; } .chat-header-name { font-size: 14px; } .chat-header-status { font-size: 11px; } /* Messages area — allow more vertical room */ .chat-messages { max-height: calc(85vh - 180px); padding: 14px 12px; } /* Chat bubbles — slightly smaller text on small screens */ .chat-bubble { font-size: 14px; line-height: 1.55; padding: 10px 13px; } /* Quick replies — horizontal scroll on mobile so all chips fit */ .chat-quick-replies { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 10px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .chat-quick-replies::-webkit-scrollbar { display: none; } .chat-quick-replies button { flex-shrink: 0; font-size: 12px; padding: 8px 14px; min-height: 36px; border-radius: 50px; white-space: nowrap; } /* Input row — full width, taller tap target */ .chat-input-row { padding: 10px 12px; gap: 8px; } #chat-input { font-size: 16px; /* prevents iOS auto-zoom on focus */ padding: 11px 14px; min-height: 44px; } .chat-send-btn { min-width: 44px; min-height: 44px; } /* Human / close buttons — larger tap targets */ .chat-human-btn { font-size: 11px; padding: 7px 10px; min-height: 36px; } .chat-close-btn { min-width: 36px; min-height: 36px; } } /* ============================================================ 3. FOOTER ============================================================ */ @media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 16px 32px; } .footer-logo { height: 52px !important; } .footer-tagline { font-size: 15px; } .footer-bottom { padding: 16px; flex-direction: column; gap: 6px; text-align: center; font-size: 11px; } } @media (max-width: 480px) { .footer-inner { grid-template-columns: 1fr; gap: 24px; } .footer-col:first-child { border-bottom: 1px solid var(--border); padding-bottom: 24px; } } /* ============================================================ 4. SHARED SECTION SPACING ============================================================ */ @media (max-width: 768px) { .section { padding: 56px 16px; } .section-title { letter-spacing: 1px; } .section-body { font-size: 15px; } .btn { font-size: 13px; padding: 14px 24px; min-height: 48px; } /* Trust bar */ .trust-bar { gap: 20px; } .trust-badge { font-size: 11px; } } /* ============================================================ 5. INDEX — HERO ============================================================ */ @media (max-width: 768px) { .hero-content { grid-template-columns: 1fr; padding: 80px 16px 0; } .hero-left { grid-column: 1; grid-row: 1; padding-top: 0; } .hero-right { grid-column: 1; grid-row: 2; min-height: 220px; margin-top: 28px; } .hero-trust-bar { grid-column: 1; grid-row: 3; padding-bottom: 40px; margin-top: 24px; padding-top: 24px; } .hero-headline { font-size: clamp(42px, 11vw, 72px); letter-spacing: 2px; } .hero-sub { font-size: clamp(14px, 3.5vw, 22px); letter-spacing: 3px; } .hero-desc { font-size: 15px; margin-bottom: 24px; } .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; } .hero-actions .btn { text-align: center; justify-content: center; } .trust-phone-row { flex-wrap: wrap; gap: 10px; padding-top: 20px; } .trust-phone-link { font-size: clamp(20px, 5vw, 28px); } .trust-stats-row { flex-wrap: wrap; } .trust-stat { min-width: 45%; padding: 12px 8px; } .trust-stat + .trust-stat::before { display: none; } } @media (max-width: 400px) { .hero-actions .btn { width: 100%; } .trust-stat { min-width: 48%; } } /* ============================================================ 6. INDEX — HOW IT WORKS (process) ============================================================ */ @media (max-width: 768px) { .process-section { padding: 56px 16px; } .process-steps { grid-template-columns: repeat(2, 1fr); gap: 36px; margin-top: 40px; } .process-steps::before { display: none; } .step-num { width: 48px; height: 48px; font-size: 18px; } .step-title { font-size: 16px; } .step-desc { font-size: 13px; } } @media (max-width: 480px) { .process-steps { grid-template-columns: 1fr; gap: 28px; } } /* ============================================================ 7. INDEX — SERVICES PREVIEW ============================================================ */ @media (max-width: 768px) { .services-preview { padding: 56px 16px; } .services-grid { grid-template-columns: 1fr; margin-top: 32px; } .service-card { padding: 28px 20px; } .service-icon { width: 40px; height: 40px; margin-bottom: 16px; } .service-name { font-size: 20px; } } /* ============================================================ 8. INDEX — REVIEWS STRIP ============================================================ */ @media (max-width: 768px) { .reviews-strip { padding: 56px 16px; } .reviews-header { flex-direction: column; gap: 20px; align-items: flex-start; margin-bottom: 36px; } .rating-big { text-align: left; } .rating-num { font-size: 52px; } .reviews-grid { grid-template-columns: 1fr; gap: 2px; } .review-card { padding: 28px 20px; } .review-text { font-size: 14px; } } /* ============================================================ 9. INDEX — AREAS SECTION ============================================================ */ @media (max-width: 768px) { .areas-section { padding: 56px 16px; } .areas-grid { grid-template-columns: 1fr; gap: 2px; margin-top: 32px; } .area-card { padding: 28px 20px; } .area-name { font-size: 24px; } } /* ============================================================ 10. INDEX — CTA VIDEO BANNER ============================================================ */ @media (max-width: 768px) { .cta-section { padding: 80px 16px; } .cta-section .section-title { font-size: clamp(32px, 8vw, 56px); } .cta-section > div[style*="display:flex"] { flex-direction: column; align-items: center; gap: 12px; } .cta-section .btn { width: 100%; max-width: 320px; justify-content: center; } } /* ============================================================ 11. SERVICES PAGE ============================================================ */ @media (max-width: 1024px) { .service-block { grid-template-columns: 1fr; } .service-block:nth-child(even) { direction: ltr; } .service-visual { min-height: auto; padding: 32px 20px; } .service-visual-frame { max-width: 100%; } .why-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .page-hero { padding: 96px 16px 52px; } .service-info { padding: 32px 16px; } .service-info .service-name { font-size: clamp(24px, 6vw, 36px); } .service-info p { font-size: 15px; } .service-visual { padding: 24px 16px; } .why-section { padding: 56px 16px; } .why-grid { grid-template-columns: 1fr; gap: 2px; margin-top: 32px; } .why-card { padding: 28px 20px; } } /* ============================================================ 12. BOOKING PAGE ============================================================ */ @media (max-width: 1024px) { .booking-layout { grid-template-columns: 1fr; padding: 40px 20px; gap: 40px; } .booking-sidebar { position: static; } } @media (max-width: 768px) { .booking-progress { padding: 12px 16px; top: 64px !important; } .progress-inner { gap: 0; } /* Progress bar — stack circle + label vertically, centered */ .progress-inner { align-items: flex-start; } .progress-step { flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; } /* Hide the inline connector lines inside .progress-step */ .progress-step > div[style*="flex:1"] { display: none !important; } /* Draw connector line via pseudo, between circles */ .progress-step:not(:last-child)::after { content: ''; position: absolute; top: 14px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 1px; background: var(--border); } .step-dot { width: 32px; height: 32px; font-size: 11px; flex-shrink: 0; } /* All step labels visible, centered under their circle */ .step-text { display: block; font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; white-space: nowrap; color: var(--gray-mid); line-height: 1.2; } .progress-step.active .step-text { color: var(--red); font-weight: 700; } .progress-step.done .step-text { color: var(--gray-dark); } .booking-layout { padding: 32px 16px; gap: 32px; } .service-options { grid-template-columns: 1fr; gap: 10px; } .service-option { padding: 20px 16px; } .service-option-name { font-size: 16px; } .time-options { grid-template-columns: repeat(2, 1fr); gap: 8px; } .time-btn { padding: 12px 8px; font-size: 12px; } .datetime-grid { grid-template-columns: 1fr; } .form-nav { flex-direction: column-reverse; gap: 12px; align-items: stretch; } .form-nav .btn, .form-nav .btn-back { width: 100%; text-align: center; justify-content: center; } .sidebar-card { padding: 24px 16px; } .success-screen { padding: 48px 16px; } } @media (max-width: 480px) { .time-options { grid-template-columns: 1fr 1fr; } } /* ============================================================ 13. ABOUT PAGE ============================================================ */ @media (max-width: 1024px) { .stats-inner { grid-template-columns: repeat(2, 1fr); } .stat-item { border-bottom: 1px solid var(--border); border-right: none; text-align: center; padding: 28px 20px; } .stat-item:first-child { text-align: center; padding-left: 20px; } .stat-item:nth-child(odd) { border-right: 1px solid var(--border); } .stat-item:nth-last-child(-n+2) { border-bottom: none; } .cert-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .page-hero { padding: 96px 16px 52px; } .story-section { padding: 56px 16px; } .story-inner { grid-template-columns: 1fr; gap: 32px; } .story-visual { aspect-ratio: 16/9; } .story-content p { font-size: 15px; } /* Hide stats/trust bar on about page mobile */ .stats-section { display: none !important; } .cert-section { padding: 56px 16px; } .cert-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; } .cert-card { padding: 24px 16px; } .cert-title { font-size: 14px; } .cert-desc { font-size: 12px; } /* About page CTA section */ section[style*="padding: 96px 40px; text-align:center"] { padding: 56px 16px !important; } } @media (max-width: 480px) { .cert-grid { grid-template-columns: 1fr; } .stats-inner { grid-template-columns: 1fr; } .stat-item { border-right: none !important; border-bottom: 1px solid var(--border); } .stat-item:last-child { border-bottom: none; } .stat-num { font-size: 40px; } } /* ============================================================ 14. REVIEWS PAGE (reviews.html assumed similar to index) ============================================================ */ @media (max-width: 768px) { /* Page-level review grid */ .reviews-page-grid, .reviews-full-grid { grid-template-columns: 1fr !important; gap: 2px; } } /* ============================================================ 15. PRINT — hide non-essential elements ============================================================ */ @media (hover: none) and (pointer: coarse) { /* Remove hover-only underlines on touch */ .service-card::after, .area-card { transition: none; } /* Ensure min tap target 44px everywhere */ .btn { min-height: 48px; } .nav-links a { min-height: 48px; display: flex; align-items: center; } .time-btn { min-height: 44px; } .service-option { min-height: 44px; } /* Disable hover states that don't work on touch */ .service-card:hover { background: var(--surface-mid); } .area-card:hover { border-left-color: transparent; } .area-card.primary:hover { border-left-color: var(--red); } } /* ============================================================ 17. SAFE AREA INSETS — iPhone notch / home bar ============================================================ */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .help-float, .need-help-btn, #a11y-toolbar { padding-bottom: calc(8px + env(safe-area-inset-bottom)); } .chat-panel { padding-bottom: env(safe-area-inset-bottom); } } /* ============================================================ 18. PRINT — hide non-essential elements ============================================================ */ @media print { #site-nav, .help-float, .need-help-btn, .chat-panel, #a11y-toolbar, .cta-section video { display: none !important; } .page-wrap { padding-top: 0; } body { color: #000; background: #fff; } .section-title { color: #000; } a[href]::after { content: " (" attr(href) ")"; font-size: 11px; color: #666; } }