/* ========================================================================== Provision Strategy — device & breakpoint layer Two separate axes are handled here: A. CAPABILITY (, set by js/device.js) Controls things that depend on what the hardware can DO — most importantly whether a `tel:` link will actually place a call. A wide touchscreen is still a phone; a narrow desktop window is still a desktop. B. VIEWPORT (media queries) Controls layout only. ========================================================================== */ /* --- A. Capability-driven visibility ------------------------------------ */ /* Default (before JS runs) = desktop treatment, so nothing flashes. */ .device-mobile { display: none !important; } .device-desktop { display: revert; } html[data-device="mobile"] .device-mobile { display: revert !important; } html[data-device="mobile"] .device-desktop { display: none !important; } html[data-device="mobile"] .device-mobile.d-flex { display: flex !important; } html[data-device="mobile"] .device-mobile.d-grid { display: grid !important; } html[data-device="mobile"] .device-mobile.d-inline-flex { display: inline-flex !important; } /* Kill hover-only affordances on touch hardware — they get stuck "on". */ html[data-device="mobile"] .card:hover, html[data-device="mobile"] .quote-card:hover { transform: none; box-shadow: inset 0 1px 0 var(--glass-hi); } html[data-device="mobile"] .card::before, html[data-device="mobile"] .card::after { display: none; } html[data-device="mobile"] .btn:hover { transform: none; box-shadow: none; } /* Stacked backdrop-filters are the single most expensive thing on a phone GPU. Swap the glass for a flat translucent fill on touch hardware. */ html[data-device="mobile"] .card, html[data-device="mobile"] .quote-card, html[data-device="mobile"] .hero-panel, html[data-device="mobile"] .contact-tile, html[data-device="mobile"] .rating-summary, html[data-device="mobile"] .dash-block, html[data-device="mobile"] .tile, html[data-device="mobile"] .chip, html[data-device="mobile"] .marquee { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface-2); } /* Touch targets get the 44px minimum Apple/WCAG ask for. */ html[data-device="mobile"] .btn { min-height: 48px; padding-inline: 1.5rem; } html[data-device="mobile"] .icon-btn { width: 44px; height: 44px; } html[data-device="mobile"] .nav-link { padding: .7rem 1rem; } /* --- Mobile-only sticky action bar -------------------------------------- Thumb-reachable Call / Text / Book row. Never rendered on desktop, where a tel: link would open nothing useful. */ .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 88; display: none; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(105%); transition: transform .5s var(--ease-out); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); } html[data-device="mobile"] .mobile-bar { display: grid; } .mobile-bar.is-shown { transform: translateY(0); } .mobile-bar a { display: grid; justify-items: center; gap: 3px; padding: .7rem .5rem .8rem; background: color-mix(in srgb, var(--bg) 78%, transparent); font-size: .68rem; font-weight: 650; letter-spacing: .04em; color: var(--muted); -webkit-tap-highlight-color: transparent; transition: background-color .2s, color .2s; } .mobile-bar a svg { width: 19px; height: 19px; } .mobile-bar a:active { background: var(--grad-soft); color: var(--accent-3); } .mobile-bar a.is-primary { color: var(--accent-3); } /* Lift the back-to-top button clear of the bar. */ html[data-device="mobile"] .to-top { bottom: calc(var(--gutter) + 62px); } html[data-device="mobile"] .toast-stack { bottom: calc(var(--gutter) + 62px); } html[data-device="mobile"] body { padding-bottom: 0; } html[data-device="mobile"] .site-footer { padding-bottom: 84px; } /* Desktop call button opens the copy-number dialog instead of a dead link. */ .call-desktop { cursor: pointer; } /* --- B. Breakpoints ------------------------------------------------------ */ /* Large desktop ---------------------------------------------------------- */ @media (max-width: 1180px) { .footer-top { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); } .footer-col:last-child { grid-column: 1 / -1; } } /* Tablet ----------------------------------------------------------------- */ @media (max-width: 1024px) { :root { --header-h: 68px; } .nav-desktop { display: none; } .burger { display: block; } .hero { min-height: auto; padding-top: calc(var(--header-h) + 3rem); } .hero-layout { grid-template-columns: 1fr; gap: 2.5rem; } .hero-panel { max-width: 520px; } .scroll-cue { display: none; } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-band { grid-template-columns: repeat(2, 1fr); } /* Two columns below 1024px. The third child (the description) drops to a second row and must span the wide column, not the 60px number column. */ .step { grid-template-columns: 60px minmax(0, 1fr); } .step > *:last-child { grid-column: 2; } .rating-summary { grid-template-columns: 1fr; text-align: center; } .rating-bars { max-width: 460px; margin-inline: auto; } } /* Phone ------------------------------------------------------------------ */ @media (max-width: 720px) { body { font-size: 16px; } h1 { font-size: clamp(2.25rem, 10vw, 3rem); } h2 { font-size: clamp(1.75rem, 7.4vw, 2.3rem); } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .stat-band { grid-template-columns: 1fr; } .brand-sub { display: none; } .header-actions .btn { display: none; } .hero-proof { gap: 1.1rem 2rem; } .hero-proof-num { font-size: 1.6rem; } .cta-actions { flex-direction: column; } .cta-actions .btn { width: 100%; } .footer-top { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: .6rem; } .toast-stack { left: var(--gutter); right: var(--gutter); max-width: none; } /* Long addresses (the office email) must not break mid-word on a phone. */ .contact-tile-value { font-size: .92rem; overflow-wrap: anywhere; } .contact-tile { padding: 1.15rem; } .modal-panel { padding: 1.6rem 1.3rem; } } /* Small phone ------------------------------------------------------------ */ @media (max-width: 400px) { :root { --gutter: 1.05rem; } .brand-name { font-size: 1rem; } .star-input label svg { width: 26px; height: 26px; } } /* Short landscape phones — stop the hero from eating the whole screen. */ @media (max-height: 520px) and (orientation: landscape) { .hero { min-height: auto; padding-block: calc(var(--header-h) + 2rem) 3rem; } .nav-mobile { justify-content: flex-start; overflow-y: auto; } .nav-mobile li a { font-size: 1.6rem; } } /* --- Print --------------------------------------------------------------- */ @media print { .site-header, .mobile-bar, .to-top, #preloader, .nav-mobile, .toast-stack, .scroll-cue, .marquee { display: none !important; } body { background: #fff; color: #000; } .card, .quote-card { break-inside: avoid; border: 1px solid #ccc; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; } }