/* ============================================================= * auto-fixes-design.css — DESIGN-LANE deliverables, split out of auto-fixes.css * Created 2026-09-22 (Chuck H, approved by Jeffrey) to end the two-lane write * collision: css/auto-fixes.css had been clobbered four times in one day because * two lanes wrote the same bytes. * * ENQUEUE ORDER MATTERS: this file loads AFTER auto-fixes.css (see functions.php). * These rules are nearly all !important, so their position in the cascade is what * preserves behaviour — moving a block here without keeping it after auto-fixes.css * CAN change the rendered page. * * Owner: design lane (Jeffrey review items). Contents moved VERBATIM — do not * reorganise without re-running scripts/css-split-fingerprint.py. * ============================================================= */ /* R2b 2026-09-09: trust-bar pills single-line on desktop (315 & 277) */ @media (min-width:992px){ .page-id-315 .trust-bar-inner,.page-id-277 .trust-bar-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-md)} .page-id-315 .trust-pill,.page-id-277 .trust-pill{white-space:nowrap;font-size:0.875rem;padding:9px 18px;line-height:1.3} } /* R2c 2026-09-09: Get a Price (277) uses full content width on desktop (Jeffrey preference) */ @media (min-width:992px){ body.page-id-277 #secondary.widget-area{display:none!important} body.page-id-277 #primary.content-area{flex:0 0 100%;max-width:100%} } /* R2d 2026-09-09: Contact Us (315) full content width on desktop (Jeffrey review) */ @media (min-width:992px){ body.page-id-315 #secondary.widget-area{display:none!important} body.page-id-315 #primary.content-area{flex:0 0 100%;max-width:100%} } /* ============================================================= * Sep 14 2026 — Jeffrey-approved punchlist items * ============================================================= */ /* Q4: /locations/ section headings → navy bold, match region heading size (26px) Scoped to .entry-content so the hero h2 ("Permanent Solution", 60/40px white) outside .entry-content is untouched. clamp() shrinks 26→24px on mobile so we don't enlarge phones vs the pre-fix ~24.6px. */ /* Q4 (renarrowed 2026-09-15): navy page-content H2s. The original selector was tag-only inside .entry-content, so it force-coloured EVERY H2 in the content area — including 8 headings living INSIDE navy bands (.dma-cta-block, .form-card-header, .cta-gap-form) that were designed to inherit white. Navy on navy = 1.00:1 and the titles vanished across 43+ pages. (Repair block further down was the bandaid; this is the root-cause fix.) Scope is now: H2s that are DIRECT children of .entry-content (the page's own content flow = 65 headings site-wide), PLUS the two light nested wrappers that legitimately need it. Anything nested inside a band/card is no longer reached, so it inherits its container's white instead of being forced navy. Pure CSS2 selector — no :not() fallback risk. */ .entry-content > h2, .entry-content .dma-hero h2, .entry-content .sys-section-intro h2 { color: #102961 !important; font-weight: 700 !important; font-size: clamp(24px, 1.8vw, 26px) !important; } /* R4 design #1 — meta line under the kicker (date · read time · sections) */ .gd-blog-meta { display: block; color: #6f7683; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 10px; } .gd-blog-dot { color: #C8963E; margin: 0 7px; font-weight: 700; } /* R4 design #2 — "In this article" line carrying the post's own first subhead */ .gd-blog-subhead { display: block; margin: 16px 0 0; padding: 11px 0 11px 15px; border-left: 3px solid #C8963E; color: #102961; font-weight: 700; font-size: 15.5px; line-height: 1.45; background: #fafbfc; } .gd-blog-slabel { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #6f7683; font-weight: 700; margin: 0 0 5px; } .gd-blog-feature .gd-blog-more { margin-top: 16px; } .gd-blog-feature-title { color: #102961; font-weight: 700; font-size: 27px; line-height: 1.24; margin: 0 0 10px; } .gd-blog-exc { display: block; color: #404040; font-size: 15px; line-height: 1.6; margin: 0; } .gd-blog-more { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 14px; color: #102961; } .gd-blog-more em { font-style: normal; } /* card grid */ .gd-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 22px; } .gd-blog-card { display: flex; background: #fff; border: 1px solid #e6e8ec; border-radius: 6px; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; } .gd-blog-card:hover { box-shadow: 0 8px 22px rgba(16, 41, 97, .12); transform: translateY(-2px); } .gd-blog-card:hover .gd-blog-title { text-decoration: underline; } .gd-blog-card-link { display: flex; flex-direction: column; text-decoration: none; width: 100%; } .gd-blog-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .gd-blog-body { padding: 15px 17px 19px; display: flex; flex-direction: column; gap: 7px; } .gd-blog-date { color: #6f7683; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; margin: 0; } .gd-blog-title { color: #102961; font-weight: 700; font-size: 18px; line-height: 1.32; margin: 0; } .gd-blog-card .gd-blog-exc { font-size: 14px; } .gd-blog-card .gd-blog-more { margin-top: 4px; } /* branded tile for posts with no relevant photo in the asset pool */ .gd-blog-ph { aspect-ratio: 4 / 3; background: #102961; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gd-blog-thumb.gd-blog-ph { border-radius: 6px 6px 0 0; } .gd-blog-ph b { color: #fff; font-size: 19px; letter-spacing: .06em; font-weight: 700; } .gd-blog-ph i { color: #C8963E; font-style: normal; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin-top: 5px; } /* pagination */ .gd-blog-nav { margin: 34px 0 10px; } .gd-blog-nav .nav-links { display: flex; justify-content: space-between; gap: 16px; } .gd-blog-nav a { color: #102961; font-weight: 700; text-decoration: none; } .gd-blog-nav a:hover { text-decoration: underline; } @media (max-width: 1099.98px) { .gd-blog-grid { grid-template-columns: repeat(2, 1fr); } .gd-blog-feature-link { grid-template-columns: 1fr; gap: 16px; } .gd-blog-feature-title { font-size: 23px; } } @media (max-width: 767.98px) { .gd-blog-grid { grid-template-columns: 1fr; gap: 22px; } .gd-blog-feature-title { font-size: 21px; } } /* R2 #5 (2026-09-16, staging) — category/archive list card photo. Was WP's `thumbnail` (150x150, centre-cropped) inside a full-width slot, so on mobile it read as a tiny square next to the /blog/ cards. Now full column width with the SAME 4:3 crop the /blog/ cards use (`.gd-blog-thumb img { aspect-ratio: 4 / 3 }`) — matching the site's card standard, not a new ratio of our own. */ .archive .gd-archive-thumb{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block} @media(max-width:575.98px){.archive .gd-archive-thumb{margin-bottom:12px}} /* R5 (2026-09-16, Jeffrey) - blog feature card meta. PHONES (<768px): three stacked lines - category / date / read time + sections. >=768px (tablet + desktop, where the card has room): ONE line, same order, gold separators. The category item is only rendered when the post has a real category, so legacy + post-dated articles never print "Uncategorized". */ .gd-blog-meta .gd-blog-cat, .gd-blog-meta .gd-blog-mline { display: block; margin: 0 0 3px; } .gd-blog-meta .gd-blog-cat { color: #102961; font-weight: 700; } .gd-blog-meta .gd-blog-msep { display: none; } @media (min-width: 768px) { .gd-blog-meta .gd-blog-cat, .gd-blog-meta .gd-blog-mline { display: inline; margin: 0; } .gd-blog-meta .gd-blog-msep { display: inline; color: #C8963E; font-weight: 700; margin: 0 7px; } } /* ============================================================ DMA hub pages — spacing restored (Sep 16 2026, Jeffrey msg 1549871616362680441; affects all 40 DMA hubs, staging+prod) ------------------------------------------------------------ 1. "Products Available for Homes" BS5's reboot sets h2{margin-top:0; margin-bottom:.5rem}. BS3 (pre-migration) gave h2 20px top / 10px bottom, so the heading sat flush against the benefits row above it. Restored to the BS3 values. Selector is exact: only the h2 that directly precedes the products row, so no other heading moves. 2. Gap between the two product-card rows .dma-product-card declares margin-bottom:20px, but .dma-products-row is display:flex and the card is height:100% inside a stretched col — the margin falls outside the col box and produces no gap between row 1 and row 2. row-gap:20px is the spacing the card always asked for. 3. Space above the YouTube video The video sits in a

with margin-top:0 immediately after the products row. 20px, matching the card gap. Measured before -> after on staging hubs (chicago/knoxville/ seattle/new-hampshire, 1440px): h2 space above 0 -> 20px, below 8 -> 10px, row-to-row 0 -> 20px, products->video 0 -> 20px. All 40 hubs verified to carry one products row with the video paragraph as its immediate next sibling. ============================================================ */ .entry-content > h2:has(+ .dma-products-row) { margin-top: 20px !important; margin-bottom: 10px !important; } .dma-products-row { row-gap: 20px; } .dma-products-row + p { margin-top: 20px !important; } /* ============================================================ DMA BENEFIT CARDS — inter-card gap on phones (2026-09-17 v1) Jeffrey, design channel: on the 40 DMA pages, viewing on MOBILE, the three benefit cards (30-Year Lifetime Limited Warranty / Award Winning / Free In-Home Estimates) read too tight. CAUSE: .dma-benefit-card declares `height:100%` AND `margin-bottom:20px`. Below 576px the row wraps and each col is full width, so the 100% height fills the col box and the 20px margin falls OUTSIDE it -> the three cards rendered FLUSH. Measured gap BEFORE: 0px at 320 / 375 / 390 / 540 / 575. AFTER: 20px. Same root cause as the .dma-products-row block above, so this uses the same row-gap mechanism rather than a new value. SCOPE: the stacked band only (max-width:575.98px). At >=576px the row is 3-across on ONE flex line, where row-gap has no effect anyway. Verified UNCHANGED at 576 / 767 / 1440 (identical card heights and row height) and 0px horizontal overflow at every width. REVERT = delete this block. ============================================================ */ @media (max-width: 575.98px) { .dma-benefits-row { row-gap: 20px; } } /* ============================================================ W16 DESIGN REVIEW — JEFFREY'S RULINGS (2026-09-20, msg 1551471565814759425) + the mobile heading fit (2026-09-21) ------------------------------------------------------------ 1. "Find a Dealer Near You" — KEEP GOLD, make BOLD 2. "GET A FREE QUOTE" CTA — KEEP NAVY, make BOLD 3. About Us "Explore Our Products" — KEEP NAVY, make BOLD 4. About Us "Independently Rated #1" — ONE LINE on phones only (5. footer phone numbers stay BOLD GOLD — already 700, untouched; "CEO & FOUNDER" already 700 bold — untouched.) COLOURS ARE DELIBERATE AND MUST NOT BE "FIXED" TO NAVY: these are brand decisions (Jeffrey 2026-09-20). Gold #C8963E on white measures 2.66:1 — recorded and accepted; do not re-flag. Every selector below was blast-radius-checked on / , /about-us/ and /gallery/ before shipping: each matches EXACTLY ONE element. NOTE `.mobile-getaprice a` is used instead of `a.btn.btn-primary` because the latter also matches two "LEARN MORE" buttons on the home page. 4's size: measured on prod, the H3 text is 310px wide at 26px, in a 260px box at a 320px viewport → one line needs <=21.8px there and <=26.4px at 375px. min(26px, 6.6vw) = 21.1px @320 and 24.8px @375, so it fits every phone width with margin, and ≥576px is untouched. REVERT = delete this block. ============================================================ */ .locations-grid p a { font-weight: 700 !important; } .mobile-getaprice a { font-weight: 700 !important; } .page-id-375 .entry-content > div > a { font-weight: 700 !important; } @media (max-width: 575.98px) { .page-id-375 .callout-box h3 { white-space: nowrap; font-size: min(26px, 6.6vw) !important; } } /* ============================================================ W16 R1 REVIEW — TWO BOLD FIXES (Jeffrey, 2026-09-21, R1) ------------------------------------------------------------ 1. "See Full Gallery ->" (footer gallery band CTA) Was navy #102961 at weight 400 -> 700. Element: footer.php line 269,

. Exactly ONE .gallery-cta per page (footer template), so the selector is unambiguous. Colour already correct — NOT touched. 2. "Get My Free Quote" (the three quote-form submit buttons) Was navy #102961 at weight 600 -> 700. Element: