/** * Service Location Pages Stylesheet - v2.0 * * ARCHITECTURE: * - Mobile-first responsive design with progressive enhancement * - Component-based organization with inline media queries * - CSS variables for dynamic theming and consistency * - SEO-optimized semantic markup and layout * * BREAKPOINTS (Standardized - Aligned with blog-post-enhanced.css): * - Mobile: Base styles (default) * - Tablet: 768px+ * - Desktop: 1024px+ (changed from 992px for consistency) * - Very Small: 480px (special mobile cases) * * COMPONENTS: * - Compact header with offset featured image * - Stats/social proof section * - Elementor content integration * - Introduction with business info card * - Services, reviews, projects, team sections * - Interactive FAQ accordions * - Map with nearby areas * - Trust badges and CTAs * * DYNAMIC VARIABLES: * - Brand colors, border radius, and spacing * - Set via JavaScript from Theme Design Settings */ /* ======================================== Variables & Base Styles ======================================== Tokens are now provided by css/cgn-tokens.css (static palette + spacing) and inc/design-tokens.php (dynamic brand color, radius, font size emitted inline in at wp_head priority 5). This stylesheet was the original token home; it now scopes a small set of SLP-specific overrides so the page renders identically after the migration. Cross-template note: cgn-tokens.css uses warmer near-black neutrals (#14110F / #2A2622) tuned for the Areas We Serve editorial treatment. The two overrides below preserve the historical SLP near-blacks (#1a1a1a / #2C2C2C) so SLP visuals don't drift with this refactor. */ .service-location-main { --cgn-text-darker: #1a1a1a; --cgn-text-dark: #2C2C2C; --cgn-border: #e5e5e5; --cgn-border-light: #e8e9ea; /* SLP accent: resolve the page's primary accent from the SLP-accent token (inc/design-tokens.php) so card borders, links, focus rings, accent fills, and the gallery lightbox can carry a location-page accent independent of the blog/brand. The token defaults to the brand color, so this is a no-op until an SLP accent is set in CGN Settings -> Design. */ --cgn-primary: var(--cgn-slp-accent, #FF8B5A); --cgn-primary-hover: var(--cgn-slp-accent-hover, #FF8B5A); --cgn-primary-active: var(--cgn-slp-accent-hover, #FF8B5A); color: var(--cgn-text-dark); line-height: 1.6; /* Body font inherits from the parent theme unless the admin picked one in CGN Settings → Design → Body Font. The inline var is set on body.single-service-location by inc/assets.php. */ font-family: var(--cgn-slp-body-font, inherit); } /* Bypass Hello Elementor's .site-main width caps (500/600/800/1140px across responsive breakpoints). The parent rule uses `body:not([class*="elementor-page-"]) .site-main { max-width: N }` which evaluates to specificity (0,2,2) — equal to our `body.single-service-location .service-location-main`. Since theme.css loads AFTER service-location.css, the tied-specificity tiebreaker (source order) gives the parent rule the win unless we mark these declarations !important. This is the documented Hello-Elementor child-theme override pattern. */ body.single-service-location .service-location-main { max-width: 100% !important; width: 100% !important; padding-inline: 0 !important; } /* Heading typography: same inheritance rule as body. When the admin hasn't picked a Heading Font in Design Settings, the var resolves to 'inherit' and the parent theme's heading font carries through. */ .service-location-main h1, .service-location-main h2, .service-location-main h3, .service-location-main h4, .service-location-main h5, .service-location-main h6, .header-title { font-family: var(--cgn-slp-heading-font, inherit); } /* Linked service-card headings: render as brand-colored, underlined links so the user knows they're clickable. Token-driven so every client's brand color flows through automatically. */ .service-card a { color: var(--cgn-brand-color, var(--cgn-primary, currentColor)); border-bottom: 1px solid currentColor; } .container { max-width: 1280px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px); } /* ======================================== Editorial Hero Section (v2.18.0 redesign) ======================================== Editorial split-screen: image at full bleed on the right, stacked editorial typography on the left. Off-white background lets the image and CTA carry the visual weight. Brand color shows up in the eyebrow and the CTA, not as a full-bleed slab. */ .location-header { background: var(--cgn-hero-bg, #fafaf7); border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding-block: clamp(72px, 8vw, 120px); position: relative; margin-bottom: 0; } .location-header .container { max-width: 1280px; padding-inline: clamp(20px, 4vw, 48px); margin: 0 auto; } .header-wrapper { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); align-items: center; } @media (min-width: 1024px) { .header-wrapper { grid-template-columns: 1fr 1.1fr; gap: clamp(56px, 6vw, 96px); } /* Image-less hero: let the editorial column breathe across the full width. */ .location-header--editorial.no-image .header-wrapper { grid-template-columns: minmax(0, 800px); justify-content: center; text-align: center; } .location-header--editorial.no-image .header-cta-row { justify-content: center; } } .header-content { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 24px); /* Mobile-first: image renders first per source order; flip on desktop. */ } /* Eyebrow: small caps brand-color label with an editorial accent rule above. */ .header-tagline { position: relative; padding-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: var(--cgn-brand-color, var(--cgn-primary)); text-transform: uppercase; margin: 0; } .header-tagline::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--cgn-brand-color, var(--cgn-primary)); } /* H1: editorial display weight, tight tracking at large sizes. Font family inherits from Design Settings via --cgn-slp-heading-font (wired in .service-location-main above). No text-transform so manually-styled headlines like "Remodeling in Greenland, NH" don't get re-cased. */ .header-title { font-size: clamp(40px, 5.2vw, 64px); font-weight: 600; margin: 0; color: var(--cgn-hero-h1, var(--cgn-text-darker)); line-height: 1.02; letter-spacing: -0.025em; } .header-subtitle { font-size: clamp(18px, 1.4vw, 22px); color: #4a4a4a; margin: 0; font-weight: 400; line-height: 1.5; max-width: 52ch; } .location-header--editorial.no-image .header-subtitle { margin-inline: auto; } /* Image: full-bleed editorial. No card, no shadow, just a subtle radius and a portrait-leaning aspect that signals "atmosphere," not "stock plugin." */ .header-featured-image { position: relative; width: 100%; border-radius: var(--border-radius); overflow: hidden; background: var(--cgn-white); } .header-featured-image img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; } @media (min-width: 1024px) { .header-featured-image img { aspect-ratio: 5 / 6; } /* Desktop source-order flip: image visually goes to the right column, text stays on the left. Avoids re-engineering the markup. */ .header-content { order: 1; } .header-featured-image { order: 2; } } .header-cta-row { display: flex; gap: var(--spacing-sm); justify-content: flex-start; flex-wrap: wrap; align-items: center; margin-top: clamp(8px, 1vw, 16px); } /* ======================================== Trust Strip — sits directly under the hero ======================================== */ .location-trust-strip { background: var(--cgn-white); border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding-block: clamp(14px, 1.4vw, 20px); } .trust-strip-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 32px); margin: 0; padding: 0; list-style: none; } .trust-strip-item { font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cgn-text-dark); position: relative; padding-right: clamp(12px, 2vw, 32px); } .trust-strip-item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: rgba(0, 0, 0, 0.15); } .trust-strip-item:last-child { padding-right: 0; } /* Button Styles */ .btn { display: inline-flex; align-items: center; padding: 0.875rem 2rem; border-radius: var(--border-radius); font-weight: 600; text-decoration: none; transition: var(--transition); cursor: pointer; border: none; font-size: 1rem; } /* Header button styles — bigger presence than body CTAs */ .btn-header { padding: 18px 36px; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; border-radius: var(--border-radius); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; min-width: 200px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; } .location-header .btn-primary { background: var(--cgn-cta-button-bg); color: var(--cgn-cta-button-text); border: 2px solid var(--cgn-cta-button-bg); } .location-header .btn-primary:hover { background: var(--cgn-cta-button-bg-hover); border-color: var(--cgn-cta-button-bg-hover); color: var(--cgn-cta-button-text); } /* General button styles for rest of page */ .btn-primary { background: var(--cgn-primary); color: var(--cgn-white); } .btn-primary:hover { background: var(--cgn-primary-hover); } .btn-large { padding: 1rem 2.5rem; font-size: 1.125rem; } .phone-icon { margin-right: 0.5rem; } /* ======================================== Stats/Social Proof Section (Trimmed: .stat-number/.stat-label retained — js/service-location.js animates .stat-number[data-count]. Container rules removed as unused.) ======================================== */ .stat-number { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; line-height: 1; margin-bottom: 0.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } .stat-label { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.95; } /* ======================================== Elementor Content Area ======================================== */ .elementor-content-area { padding: var(--spacing-md) 0; } @media (min-width: 1024px) { .elementor-content-area { padding-top: calc(var(--spacing-md) + var(--header-image-offset)); /* Account for offset image */ } } .elementor-content-area .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-sm); } /* Ensure Elementor sections work well with our theme */ .elementor-content-area .elementor-section { margin-bottom: 0; } .elementor-content-area .elementor-container { max-width: 100%; } /* Hide the content area when there's no Elementor content */ .elementor-content-area:empty { display: none; padding: 0; } /* ======================================== Introduction Section (Above the Fold) ======================================== */ .location-intro { padding: var(--spacing-md) 0; background: var(--cgn-white); } @media (min-width: 1024px) { .location-intro { padding-top: calc(var(--spacing-md) + var(--header-image-offset)); /* Account for offset image */ } } .intro-wrapper { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); } @media (min-width: 1024px) { .intro-wrapper { grid-template-columns: 1fr 350px; } } .intro-content h2 { font-size: 1.75rem; margin-bottom: var(--spacing-sm); color: var(--cgn-text-dark); font-weight: 600; } .intro-content p { margin-bottom: var(--spacing-sm); line-height: 1.7; color: var(--cgn-text-dark); } /* Enhanced Business Info Card */ .business-info-card { background: var(--cgn-background); border: 2px solid var(--cgn-border); border-radius: var(--border-radius); padding: var(--spacing-md); height: fit-content; } @media (min-width: 1024px) { .business-info-card { position: sticky; top: var(--spacing-md); } } .business-info-card h3 { font-size: 1.125rem; margin-bottom: var(--spacing-md); color: var(--cgn-text-dark); font-weight: 700; padding-bottom: 0.75rem; border-bottom: 2px solid var(--cgn-primary); } .info-item { padding: 0.875rem 0; border-bottom: 1px solid var(--cgn-border); } .info-item:last-child { border-bottom: none; } .info-item strong { display: block; color: var(--cgn-text-dark); font-size: 0.75rem; margin-bottom: 0.375rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .info-item span, .info-item a { color: var(--cgn-text-dark); font-size: 0.95rem; line-height: 1.4; } .info-item a { color: var(--cgn-primary); text-decoration: none; font-weight: 600; } .info-item a:hover { text-decoration: underline; } /* License Badge */ .info-item.license-info { background: var(--cgn-white); margin: 0 calc(var(--spacing-md) * -1); padding: var(--spacing-sm) var(--spacing-md); border-left: 4px solid var(--cgn-primary); border-bottom: none; } .info-item.license-info strong { color: var(--cgn-primary); } /* ======================================== Services Section ======================================== */ .location-services { padding-block: clamp(64px, 7vw, 100px); background: var(--cgn-services-bg, var(--cgn-primary)); } .location-services h2 { text-align: center; font-size: 2rem; margin-bottom: var(--spacing-lg); color: var(--cgn-white); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-md); } /* Deterministic desktop columns by service count (the PHP adds .services-grid--count-N). 1=centered, 2=2-up, 3=3-up, 4=2x2, 5+=3-up wrap. Tablet/mobile media queries below collapse these to 2-up then 1-up. */ @media (min-width: 1024px) { .services-grid--count-1 { grid-template-columns: minmax(0, 420px); justify-content: center; } .services-grid--count-2 { grid-template-columns: repeat(2, 1fr); } .services-grid--count-3 { grid-template-columns: repeat(3, 1fr); } .services-grid--count-4 { grid-template-columns: repeat(2, 1fr); } .services-grid--count-5, .services-grid--count-6 { grid-template-columns: repeat(3, 1fr); } } .service-card { background: var(--cgn-white); border-radius: var(--border-radius); padding: 0; text-align: center; transition: background-color 0.2s ease; border: 1px solid var(--cgn-border); overflow: hidden; } /* CTA box that fills an empty trailing grid cell (e.g. 5 services in a 3-wide row). Brand-tinted so it reads as an intentional invitation, not an empty card. Matches .service-card footprint. */ .service-card--cta { background: var(--cgn-hero-bg, #fafaf7); border: 1px dashed var(--cgn-primary); display: flex; align-items: center; justify-content: center; } .service-card--cta .service-cta-inner { padding: var(--spacing-md); } .service-card--cta h3 { margin: 0 0 var(--spacing-sm); color: var(--cgn-text-dark); font-size: 1.25rem; } .service-card--cta .service-cta-link { display: inline-flex; align-items: center; color: var(--cgn-primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; } .service-card--cta .service-cta-link:hover, .service-card--cta .service-cta-link:focus-visible { color: var(--cgn-primary-hover); } .service-card:hover { background: var(--cgn-background); } .service-image { position: relative; width: 100%; padding-top: 75%; /* 4:3 aspect ratio */ overflow: hidden; } .service-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .service-card h3 { font-size: 1.25rem; margin-bottom: var(--spacing-sm); margin-top: var(--spacing-md); padding: 0 var(--spacing-md); color: var(--cgn-text-dark); } .service-card p { color: var(--cgn-text-light); margin-bottom: var(--spacing-sm); padding: 0 var(--spacing-md); } /* ======================================== Reviews Section ======================================== */ .location-reviews { padding: var(--spacing-xl) 0; background: var(--cgn-background-light); } .location-reviews h2 { text-align: center; font-size: 2rem; margin-bottom: var(--spacing-lg); } /* .review-text / .review-date are REUSED by the first-party reviews markup (inc/reviews.php, THEME-20) — these unscoped rules style those cards live. Do not remove. */ .review-text { font-style: italic; color: var(--cgn-text-dark); line-height: 1.6; margin: var(--spacing-sm) 0; border-left: 3px solid var(--cgn-primary); padding-left: var(--spacing-sm); } .review-date { font-size: 0.875rem; color: var(--cgn-text-light); } /* ======================================== Projects Section ======================================== */ .location-projects { padding: var(--spacing-xl) 0; background: var(--cgn-background); } .location-projects h2 { text-align: center; font-size: 2rem; margin-bottom: var(--spacing-lg); } .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); } .project-card { background: var(--cgn-white); border-radius: var(--border-radius); overflow: hidden; border: 1px solid var(--cgn-border); transition: border-color 0.2s ease; } .project-card:hover { border-color: var(--cgn-primary); } .projects-cta { text-align: center; } /* ======================================== Map Section ======================================== */ .location-service-area { padding: var(--spacing-xl) 0; background: var(--cgn-white); } .location-service-area h2 { text-align: center; font-size: 2rem; margin-bottom: var(--spacing-md); } .service-area-intro { text-align: center; max-width: 720px; margin: 0 auto var(--spacing-lg); color: var(--cgn-text-muted, #555); } .info-item-reviewed time { color: var(--cgn-text-muted, #555); font-size: 0.9em; } .nearby-areas { width: 100%; background: var(--gradient-light); border: 2px solid var(--cgn-primary); border-radius: var(--border-radius); padding: var(--spacing-md); padding-top: calc(var(--spacing-md) + 12px); position: relative; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); } /* Editable pill label (rendered as a real element in PHP from the nearby_areas_label SLP-global, replacing the old hardcoded .nearby-areas::before content string). */ .nearby-areas-pill { position: absolute; top: -12px; left: var(--spacing-md); background: var(--cgn-primary); color: var(--cgn-white); padding: 4px 16px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .areas-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.75rem; list-style: none; padding: 0; margin: 0; } .areas-list li { padding: 1rem 1rem 1rem 3rem; background: var(--cgn-white); border-radius: var(--border-radius); border: 2px solid var(--cgn-border); font-weight: 600; color: var(--cgn-text-dark); position: relative; transition: all 0.3s ease; } .areas-list li::before { content: '📍'; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.25rem; } .areas-list li:hover { border-color: var(--cgn-primary); background: var(--gradient-light); transform: translateX(4px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); } .areas-list li a { color: var(--cgn-text-dark); text-decoration: none; display: block; transition: color 0.3s ease; } .areas-list li a:hover { color: var(--cgn-primary); } /* ======================================== Business Listing Map Section ======================================== */ .location-map { padding-block: clamp(64px, 6vw, 96px); background: var(--cgn-white); } .location-map h2 { text-align: center; font-size: 2rem; margin-bottom: var(--spacing-lg); } /* Responsive 16:9 wrapper so any pasted iframe (which often carries fixed width/height attrs) scales fluidly without overflow. */ .location-map-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--border-radius); overflow: hidden; } .location-map-embed iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; display: block; } /* Map facade — a CSS-drawn placeholder that lazy-loads the interactive GBP map on click, so Maps JS never touches the critical path (see cgn_render_map_facade() + js/service-location.js). Fills the 16:9 .location-map-embed box, so the iframe swaps in with zero layout shift. */ .cgn-map-facade { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; overflow: hidden; background: #e6eae8; } /* Decorative "map" texture: faint street grid, two through-roads, and a park blob over muted paper. Purely CSS — no image request. */ /* Real static-thumbnail placeholder (when the cgn_slp_map_thumbnail filter supplies a URL). Covers the 16:9 box; the scrim keeps the chip legible. */ .cgn-map-facade__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .cgn-map-facade.has-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%); transition: background 0.2s ease; pointer-events: none; } .cgn-map-facade.has-image:hover::before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.35) 100%); } .cgn-map-facade__canvas { position: absolute; inset: 0; background-color: #e6eae8; background-image: linear-gradient(0deg, rgba(120, 140, 150, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 140, 150, 0.10) 1px, transparent 1px), linear-gradient(115deg, transparent 47%, rgba(255, 255, 255, 0.7) 47%, rgba(255, 255, 255, 0.7) 52%, transparent 52%), linear-gradient(202deg, transparent 62%, rgba(255, 255, 255, 0.55) 62%, rgba(255, 255, 255, 0.55) 66%, transparent 66%), radial-gradient(circle at 28% 32%, rgba(150, 190, 150, 0.35), transparent 55%); background-size: 26px 26px, 26px 26px, 100% 100%, 100% 100%, 100% 100%; transition: transform 0.4s ease; } .cgn-map-facade:hover .cgn-map-facade__canvas, .cgn-map-facade:focus-visible .cgn-map-facade__canvas { transform: scale(1.04); } .cgn-map-facade__pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); color: var(--cgn-cta-button-bg, var(--cgn-primary, #FF8B5A)); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.28)); animation: cgn-map-pin-drop 0.5s ease both; } .cgn-map-facade__pin-svg { display: block; } .cgn-map-facade__pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 16px; height: 6px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.22); border-radius: 50%; filter: blur(1px); } @keyframes cgn-map-pin-drop { from { transform: translate(-50%, -180%); opacity: 0; } to { transform: translate(-50%, -100%); opacity: 1; } } .cgn-map-facade__chip { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; background: #fff; color: #1a1a1a; font-size: 0.9375rem; font-weight: 600; line-height: 1; border-radius: 999px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); white-space: nowrap; transition: box-shadow 0.2s ease, transform 0.2s ease; } .cgn-map-facade__chip svg { color: var(--cgn-cta-button-bg, var(--cgn-primary, #FF8B5A)); } .cgn-map-facade:hover .cgn-map-facade__chip { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24); transform: translateX(-50%) translateY(-1px); } .cgn-map-facade:focus-visible { outline: 3px solid var(--cgn-cta-button-bg, var(--cgn-primary, #FF8B5A)); outline-offset: -3px; } /* Once the iframe is injected, drop the placeholder affordance. */ .cgn-map-facade.is-loaded { cursor: default; background: none; } @media (prefers-reduced-motion: reduce) { .cgn-map-facade__pin { animation: none; } .cgn-map-facade__canvas { transition: none; } .cgn-map-facade:hover .cgn-map-facade__canvas { transform: none; } } /* ======================================== Location Video Section ======================================== */ .location-video { padding-block: clamp(64px, 6vw, 96px); background: var(--cgn-white); } /* Responsive 16:9 wrapper for the oEmbed iframe (wp_oembed_get output). */ .location-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--border-radius); overflow: hidden; } .location-video-embed iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; display: block; } /* ======================================== History Section ======================================== */ .location-history { padding: var(--spacing-xl) 0; background: var(--cgn-background-light); } .history-wrapper { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); align-items: center; } @media (min-width: 1024px) { .history-wrapper { grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); } } .history-content h2 { font-size: 2rem; margin-bottom: var(--spacing-md); color: var(--cgn-text-dark); font-weight: 700; line-height: 1.3; } .history-content h3 { font-size: 1.5rem; margin-bottom: var(--spacing-sm); color: var(--cgn-text-dark); font-weight: 600; } .history-content p { margin-bottom: var(--spacing-sm); line-height: 1.7; color: var(--cgn-text-dark); font-size: 1rem; } .history-content ul, .history-content ol { margin-bottom: var(--spacing-sm); padding-left: 1.5rem; line-height: 1.7; } .history-content li { margin-bottom: 0.5rem; color: var(--cgn-text-dark); } .history-cta { margin-top: var(--spacing-md); } .history-image { position: relative; width: 100%; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } .history-image img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; } /* Portrait-leaning on desktop so vertical history photos aren't cropped to landscape. Mirrors .header-featured-image img (hero). Placed AFTER the base rule above so source order wins (equal specificity). */ @media (min-width: 1024px) { .history-image img { aspect-ratio: 5 / 6; } } /* Mobile: Image first, then content */ @media (max-width: 991px) { .history-wrapper { gap: var(--spacing-md); } .history-image { order: -1; } .history-content h2 { font-size: 1.75rem; } } /* ======================================== Why Choose Section ======================================== */ .why-choose-location { padding: var(--spacing-xl) 0; background: var(--cgn-background); } .why-choose-location h2 { text-align: center; font-size: 2rem; margin-bottom: var(--spacing-lg); } .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-md); } /* Deterministic desktop columns by why-us card count (PHP adds .benefits-grid--count-N). 1=centered, 2=2-up, 3=3-up, 4=2x2. Tablet/mobile media queries below collapse to 2-up then 1-up. */ @media (min-width: 1024px) { .benefits-grid--count-1 { grid-template-columns: minmax(0, 480px); justify-content: center; } .benefits-grid--count-2 { grid-template-columns: repeat(2, 1fr); } .benefits-grid--count-3 { grid-template-columns: repeat(3, 1fr); } .benefits-grid--count-4 { grid-template-columns: repeat(2, 1fr); } } .benefit-card { background: var(--cgn-white); border-left: 4px solid var(--cgn-primary); padding: var(--spacing-md); border-radius: var(--border-radius); } .benefit-icon { display: none; /* Hide emoji icons */ } .benefit-card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; color: var(--cgn-text-dark); font-weight: 600; } .benefit-card p { color: var(--cgn-text-dark); line-height: 1.6; margin: 0; } /* ======================================== FAQ Section - Plain Text Display ======================================== */ .location-faqs { padding: var(--spacing-xl) 0; background: var(--cgn-background); } .location-faqs h2 { text-align: center; font-size: 2rem; margin-bottom: var(--spacing-lg); } .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--cgn-border-light); padding: 1.5rem 1.5rem; } .faq-item:last-child { border-bottom: none; } .faq-question { font-size: 1.25rem; font-weight: 600; color: var(--cgn-text-darker); margin: 0 0 0.75rem 0; line-height: 1.4; } .faq-answer { color: var(--cgn-text-gray); font-size: 1rem; line-height: 1.7; } .faq-answer p { margin: 0 0 1rem 0; } .faq-answer p:last-child { margin-bottom: 0; } /* ======================================== Bottom CTA content typography (.cta-content markup also exists in blog templates — token kept live.) ======================================== */ .cta-content h2 { font-size: 2.5rem; margin-bottom: var(--spacing-sm); } .cta-content p { font-size: 1.25rem; margin-bottom: var(--spacing-md); opacity: 0.95; } /* ======================================== Tablet & Mobile Responsive Styles ======================================== */ /* Tablet Landscape (835px - 1023px) - Optimized Two-Column Layout */ @media (max-width: 1023px) and (min-width: 835px) { .container { padding: 0 1.5rem; } /* Intro section with narrower sidebar */ .intro-wrapper { grid-template-columns: 1fr 320px; gap: 2rem; } .business-info-card { padding: 1.5rem; } /* Adjust grids for tablet landscape */ .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* body.single-service-location prefix raises specificity to (0,3,0) so this wins over the base `.featured-projects .projects-grid` rule, which is LATER in source order — equal-specificity scoping alone loses the cascade. */ body.single-service-location .featured-projects .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } body.single-service-location .featured-projects .project-image { height: 200px; } /* History section adjustments */ .history-wrapper { gap: 2rem; } } /* Tablet Portrait (768px - 834px) - Single Column Layout */ @media (max-width: 834px) and (min-width: 769px) { .container { max-width: 800px; padding: 0 1.5rem; } /* Header single column */ .header-wrapper { grid-template-columns: 1fr; gap: var(--spacing-md); } .header-featured-image { max-height: 360px; } .header-cta-row { justify-content: flex-start; } /* Intro section single column */ .intro-wrapper { grid-template-columns: 1fr; gap: var(--spacing-lg); } .business-info-card { max-width: 100%; } /* Two-column grids for portrait tablet */ .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* body.single-service-location prefix raises specificity to (0,3,0) so this wins over the LATER base 3-column rule. Single column at portrait-tablet width keeps the cards from cramping. */ body.single-service-location .featured-projects .projects-grid { grid-template-columns: 1fr; gap: 1.5rem; } body.single-service-location .featured-projects .project-image { height: 220px; } .areas-list { grid-template-columns: repeat(2, 1fr); } /* History section */ .history-wrapper { grid-template-columns: 1fr; gap: var(--spacing-lg); } .history-image { order: -1; } /* Badges grid */ .badges-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* FAQ section */ .faq-container { max-width: 100%; } } /* Mobile Styles (768px and below) */ @media (max-width: 768px) { .location-header { padding: var(--spacing-sm) 0; margin-bottom: var(--spacing-md); } .header-wrapper { grid-template-columns: 1fr; gap: var(--spacing-md); } .header-featured-image img { aspect-ratio: 4 / 3; /* less tall on small phones to keep H1 above the fold */ } .header-content { gap: var(--spacing-sm); } .header-tagline { font-size: 11px; } .header-title { font-size: clamp(28px, 7vw, 36px); } .header-subtitle { font-size: 16px; } .header-cta-row { flex-direction: column; gap: 0.75rem; } .btn-header { width: 100%; max-width: 300px; padding: 12px 24px; font-size: 14px; min-width: auto; } .intro-wrapper { grid-template-columns: 1fr; } .business-info-card { order: -1; /* Show info card first on mobile */ } .location-intro h2, .location-services h2, .location-reviews h2, .location-projects h2, .location-service-area h2, .why-choose-location h2, .location-faqs h2, .contact-info h2 { font-size: 1.75rem; } .cta-content h2 { font-size: 2rem; } .cta-content p { font-size: 1.125rem; } .services-grid, .projects-grid, .benefits-grid { grid-template-columns: 1fr; } .areas-list { grid-template-columns: 1fr; } .business-info-card { position: static; } .badges-grid { grid-template-columns: repeat(2, 1fr); } /* body.single-service-location prefix raises specificity to (0,3,0) so this wins over the LATER base 3-column rule. Without it the section stays 3-up even on phones. */ body.single-service-location .featured-projects .projects-grid { grid-template-columns: 1fr; } body.single-service-location .featured-projects .project-image { height: 200px; } } @media (max-width: 480px) { .hero-content { gap: 16px; } .hero-title { font-size: clamp(28px, 10vw, 44px); line-height: 1.15; margin: 0; } .hero-subtitle { font-size: 15px; line-height: 1.4; margin: 0; } } /* ======================================== FAQ Responsive Styles ======================================== */ @media (min-width: 768px) { .faq-item { padding: 2rem; } .faq-question { font-size: 1.375rem; margin-bottom: 1rem; } .faq-answer { font-size: 1.0625rem; } .badges-grid { grid-template-columns: 1fr; } .badge-image { min-height: 60px; } .badge-image img { max-height: 80px; } .stat-number { font-size: 2rem; } .stat-label { font-size: 0.875rem; } } @media (min-width: 1024px) { .faq-item { padding: 2.5rem; } .faq-question { font-size: 1.5rem; } .faq-answer { font-size: 1.125rem; } } /* ======================================== Trust Badges Section ======================================== */ .trust-badges { padding: var(--spacing-xl) 0; background: var(--gradient-subtle); position: relative; } .trust-badges::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cgn-border), transparent); } .trust-badges h2 { text-align: center; font-size: 2rem; margin-bottom: 0.5rem; color: var(--cgn-text-dark); } .trust-badges .container > p { text-align: center; color: var(--cgn-text-light); margin-bottom: var(--spacing-lg); font-size: 1.125rem; } .badges-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacing-md); max-width: 900px; margin: 0 auto; justify-items: center; } /* When only 1-2 badges, center them better */ .badges-grid:has(.badge-item:nth-child(1)):not(:has(.badge-item:nth-child(3))) { max-width: 600px; } .badge-item { background: var(--cgn-white); border: 2px solid var(--cgn-primary); border-radius: var(--border-radius); padding: var(--spacing-lg); text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); width: 100%; max-width: 300px; } .badge-item:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16); border-color: var(--cgn-primary-hover); } .badge-image { margin-bottom: var(--spacing-md); min-height: 100px; display: flex; align-items: center; justify-content: center; padding: 1rem; background: linear-gradient(135deg, var(--cgn-bg-soft, #f7f7f8) 0%, #ffffff 100%); border-radius: var(--border-radius); } .badge-image img { max-width: 100%; max-height: 120px; height: auto; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05)); } .badge-name { font-size: 1.25rem; font-weight: 700; color: var(--cgn-text-dark); margin-bottom: 0.75rem; } .badge-description { font-size: 0.9375rem; color: var(--cgn-text-light); line-height: 1.6; } /* ======================================== Video Content Section ======================================== */ .location-video { padding: var(--spacing-xl) 0; background: var(--cgn-background-light); } .location-video h2 { text-align: center; font-size: 2rem; margin-bottom: var(--spacing-lg); color: var(--cgn-text-dark); } /* ======================================== Featured Projects Section ======================================== */ .featured-projects { padding: var(--spacing-xl) 0; background: var(--cgn-background-light); } .featured-projects h2 { text-align: center; font-size: 2rem; margin-bottom: var(--spacing-lg); color: var(--cgn-text-dark); } .featured-projects .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .project-card { background: var(--cgn-white); border: 2px solid var(--cgn-border); border-radius: var(--border-radius); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .project-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14); border-color: var(--cgn-primary); } .project-image { width: 100%; height: 250px; overflow: hidden; } .project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .project-card:hover .project-image img { transform: scale(1.05); } .project-content { padding: var(--spacing-md); } .project-content h3 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--cgn-text-dark); } .project-content h3 a { color: var(--cgn-text-dark); text-decoration: none; transition: color 0.3s ease; } .project-content h3 a:hover { color: var(--cgn-primary); } .project-content p { color: var(--cgn-text-gray); margin-bottom: var(--spacing-sm); line-height: 1.6; } .project-link { display: inline-block; color: var(--cgn-primary); font-weight: 600; text-decoration: none; transition: color 0.3s ease; } .project-link:hover { color: var(--cgn-primary-active); } .projects-cta { text-align: center; margin-top: var(--spacing-lg); } /* ======================================== Print Styles ======================================== */ @media print { .hero-cta-row, .service-link, .projects-cta, .contact-form, .cta-buttons, .location-bottom-cta { display: none; } .service-location-main { color: #000; } .container { max-width: 100%; } .business-info-card { border: 1px solid #000; } } /* ========================================================================== Breadcrumbs (shared with blog post) Note: as of 2.20.1 the visible breadcrumb