/* ---------------------------------- responsive.css / Version: 1.0 Table of Contents 01. Reduced Motion Preference ....................... line 26 02. Breakpoint: <=1040px (Nav + Layout Stacking) .... line 38 03. Breakpoint: <=600px (Small Mobile) .............. line 124 04. Breakpoint: <=380px (Extra-Small Mobile) ........ line 146 05. Touch-First Listings Slider ..................... line 156 ---------------------------------- */ /* ============================================================= RESPONSIVE STYLES Every @media rule for the template lives in this file only — css/style.css is the base/desktop styling, this file is the full set of breakpoint overrides on top of it. Keeping them separate means a developer can hand this single file to whoever owns "make it responsive" without touching the base theme, and can see every breakpoint the template uses just by scanning this one place. Load order matters: this file must be linked AFTER css/style.css in every page's , so these rules can override the base styles at the same specificity. ============================================================= */ /* ============================================================= REDUCED MOTION PREFERENCE Turns off the scroll-reveal fade/slide for anyone with "reduce motion" set at the OS level — this has nothing to do with screen size, so it lives outside the width-based breakpoints below. ============================================================= */ @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} } /* ============================================================= BREAKPOINT: ≤1040px Nav switches to the hamburger menu here, and every section below stacks to a single column in the same breath — both breakpoints are pinned to this SAME value on purpose. Previously the nav switched to hamburger at 1040px while the page content (hero/about/contact/footer grids and centering) only switched at 900px. That left a ~140px "in between" zone — roughly tablet width — where the header looked mobile but the sections underneath were still squeezed into their two-column desktop layout: cramped text, left-aligned copy that was meant to be centered once stacked, and a footer row that could wrap awkwardly instead of dropping to its centered mobile layout. One shared breakpoint means the whole page transitions together — no half-and-half state. ============================================================= */ @media (max-width:1040px){ .nav-phone{display:none;} .nav-links{ position:absolute; top:100%;left:0;right:0; flex-direction:column; align-items:flex-start; gap:4px; background:var(--paper); border-bottom:1px solid var(--line); padding:12px 32px 20px; max-height:0; overflow:hidden; transition:max-height .25s ease; } .nav-links a{width:100%;padding:10px 0;} .nav-links.open{max-height:400px;} .menu-toggle{display:flex;} .hero .wrap, .about .wrap, .contact .wrap{grid-template-columns:1fr;} .service-grid{grid-template-columns:1fr;} .listing-slide{flex-basis:calc((100% - 28px)/2);} .area-grid{grid-template-columns:1fr;} .process-grid{grid-template-columns:repeat(2,1fr);} .calc-grid{grid-template-columns:1fr;} .trust .wrap{justify-content:flex-start;gap:40px;} .plaque{position:static;margin-top:20px;width:100%;} .about-photo{order:-1;} /* Once columns stack, centered text reads better than a ragged left edge floating in the middle of the screen. */ .hero-copy{text-align:center;} .hero-copy .eyebrow, .hero-actions{justify-content:center;} .hero p.lede{margin-left:auto;margin-right:auto;} .section-head{flex-direction:column;align-items:center;text-align:center;} .section-head p{margin:0 auto;} .about .reveal{text-align:center;} .about .eyebrow{justify-content:center;} .about p{margin-left:auto;margin-right:auto;} .contact .wrap > .reveal{text-align:center;} .contact .eyebrow{justify-content:center;} .contact p{margin-left:auto;margin-right:auto;} .contact-meta{display:inline-block;} /* Section padding scales down once the page is in mobile/tablet mode — 120px of top/bottom breathing room made sense next to a wide desktop layout, it just reads as dead space once everything is a single narrow column. */ .hero{padding:56px 0 72px;} .services,.process,.calculator,.listings,.areas,.about,.blog,.contact{padding-bottom:72px;} .faq{padding:72px 0;} .testimonial{padding:64px 0;} .blog-layout{grid-template-columns:1fr;} .blog-feature{border-right:none;border-bottom:1px solid var(--line);} .blog-grid{grid-template-columns:1fr;} .blog-archive{padding-top:40px;} .post-hero{padding:40px 0 0;} .post-featured-photo{margin-bottom:40px;} .post-related{padding:72px 0;} .post-author{padding-left:0;padding-right:0;} .footer-top{flex-direction:column;text-align:center;} .footer-links{justify-content:center;flex-basis:100%;} } /* ============================================================= BREAKPOINT: ≤600px Small phones — tighter section padding, single-column forms, the hero plaque's spec row wraps instead of overflowing. ============================================================= */ @media (max-width:600px){ .form-row{grid-template-columns:1fr;} .process-grid{grid-template-columns:1fr;} .nav-cta .btn{padding:10px 16px;font-size:13px;} .hero{padding:48px 0 56px;} .services,.process,.calculator,.listings,.areas,.about,.blog,.contact{padding-bottom:56px;} .faq{padding:56px 0;} .plaque{padding:18px 20px;} .plaque-specs{flex-wrap:wrap;row-gap:8px;} .blog-feature-body{padding:24px 22px 28px;} .blog-row{padding:18px 22px;} .listing-slide{flex-basis:88%;} .listing-toolbar{justify-content:center;} .post-title{margin-top:8px;} .post-author{flex-direction:column;text-align:center;} } /* ============================================================= BREAKPOINT: ≤380px Smallest phones only — shrinks the header so the logo and hamburger never crowd each other on the narrowest screens. ============================================================= */ @media (max-width:380px){ .nav{padding:16px 20px;gap:12px;} .logo img{height:26px;} } /* ============================================================= TOUCH-FIRST LISTINGS SLIDER Feature-detects a real touchscreen (not just a narrow window — a touch laptop at desktop width gets this too, a resized mouse browser window does not). On touch, the click arrows are replaced by the swipe progress bar since dragging the row with a finger is the natural gesture and the buttons become redundant clutter. ============================================================= */ @media (hover:none) and (pointer:coarse){ .listing-toolbar{display:none;} .listing-progress{display:block;} }