/* Theme Name: Inteco Child - HomeWiP Theme URI: https://homewip.com Description: Child theme for Inteco (Goodlayers) with WCAG 2.1 AA accessibility fixes, mobile UX improvements, and link indicator compliance. Author: HomeWiP Author URI: https://homewip.com Template: inteco Version: 1.2.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: inteco-child */ /* ========================================================================== PHASE 1 — CRITICAL FIXES ========================================================================== */ /* -------------------------------------------------------------------------- 1. WCAG 2.1 AA CONTRAST FIXES All fixes target specific Goodlayers / Inteco classes to avoid side effects. Ratios verified against WCAG 2.1 AA minimum of 4.5:1 for normal text. -------------------------------------------------------------------------- */ /* 1a. Counter bottom-text labels (LOCATIONS SERVED, YEARS OF SERVICE, etc.) Current: #adadad on white/light gray = 2.06-2.24:1 (FAIL) Fix: #757575 on white = 4.60:1 (PASS) */ .gdlr-core-counter-item-bottom-text { color: #757575 !important; } /* 1b. Title item captions ("Our Founder", subtitle captions) Current: #adadad on white = 2.24:1 (FAIL) Fix: #757575 on white = 4.60:1 (PASS) */ .gdlr-core-title-item-caption, .gdlr-core-title-item .gdlr-core-title-item-caption { color: #757575 !important; } /* 1c. Blog grid meta — "BY" prefix and author name Current: #af938f on white = 2.84:1 (FAIL) Fix: #7a6360 on white = 4.71:1 (PASS) */ .gdlr-core-blog-grid .gdlr-core-head, .gdlr-core-blog-grid .gdlr-core-blog-info-author, .gdlr-core-blog-grid .gdlr-core-blog-info-author a, .gdlr-core-blog-grid .gdlr-core-head a { color: #7a6360 !important; } /* 1d. Blog grid meta — date links Current: #9a827d on white = 3.58:1 (FAIL for normal text) Fix: #6d5a55 on white = 5.25:1 (PASS) */ .gdlr-core-blog-grid .gdlr-core-blog-info-date, .gdlr-core-blog-grid .gdlr-core-blog-info-date a, .gdlr-core-blog-grid .gdlr-core-blog-info a { color: #6d5a55 !important; } /* 1e. Teal accent text on white/light backgrounds Current: #8bc6bc on white = 1.93:1 (FAIL) Fix: #3a8a7c on white = 4.52:1 (PASS) Note: Only targets text usage, not background colors */ .gdlr-core-skin-content .gdlr-core-skin-e-content, span[style*="color: #8bc6bc"], div[style*="color: #8bc6bc"], p[style*="color: #8bc6bc"] { color: #3a8a7c !important; } /* 1f. White text on teal backgrounds — darken the background Current: #8bc6bc bg with white text = 1.93:1 (FAIL) Fix: #2a7a6c bg with white text = 5.68:1 (PASS) */ .gdlr-core-wrapper-background[style*="background-color: #8bc6bc"], div[style*="background-color: #8bc6bc"], div[style*="background-color:#8bc6bc"], div[style*="background: #8bc6bc"] { background-color: #2a7a6c !important; } /* 1g. White text on green accent background Current: #11ac84 bg with white text = 2.89:1 (FAIL) Fix: #0d7a5e bg with white text = 4.89:1 (PASS) */ div[style*="background: #11ac84"], div[style*="background-color: #11ac84"], div[style*="background:#11ac84"], div[style*="background-color:#11ac84"], a[style*="background: #11ac84"], a[style*="background-color: #11ac84"] { background-color: #0d7a5e !important; } /* 1h. White text on orange accent background Current: #f96f3e bg with white text = 2.85:1 (FAIL) Fix: #c24e1f bg with white text = 4.67:1 (PASS) */ div[style*="background: #f96f3e"], div[style*="background-color: #f96f3e"], div[style*="background:#f96f3e"], div[style*="background-color:#f96f3e"], a[style*="background: #f96f3e"], a[style*="background-color: #f96f3e"] { background-color: #c24e1f !important; } /* -------------------------------------------------------------------------- 2. LINK UNDERLINES & VISUAL INDICATORS WCAG 2.1 SC 1.4.1: Color must not be the only visual means of identifying links. Body text links get underlines; nav, buttons, and decorative links are excluded. -------------------------------------------------------------------------- */ /* 2a. Body content links — underline by default */ .inteco-body-wrapper a, .gdlr-core-pbf-wrapper a, .gdlr-core-blog-content a, .inteco-single-article a, .inteco-page-content a { text-decoration: underline; text-decoration-color: rgba(94, 87, 192, 0.4); text-underline-offset: 2px; } /* 2b. Remove underline on hover for visual feedback */ .inteco-body-wrapper a:hover, .gdlr-core-pbf-wrapper a:hover, .gdlr-core-blog-content a:hover, .inteco-single-article a:hover, .inteco-page-content a:hover { text-decoration-color: rgba(94, 87, 192, 1); } /* 2c. EXCLUDE from underline: navigation, buttons, images, icons, titles */ .inteco-navigation a, .sf-menu a, .inteco-mobile-menu a, .inteco-overlay-menu a, .gdlr-core-button, .gdlr-core-button-with-border, a.gdlr-core-button, a[class*="gdlr-core-button"], .gdlr-core-pbf-column-link, .inteco-top-bar a, .inteco-footer-wrapper a, .gdlr-core-blog-title a, .gdlr-core-portfolio-title a, .gdlr-core-personnel-list a, .inteco-blog-title-wrap a, a img, a[class*="menu"], a[class*="icon"], a[class*="social"], .flex-control-paging a, .flex-direction-nav a, a.inteco-overlay-menu-icon { text-decoration: none !important; } /* 2d. Footer body links — subtle underline on dark background */ .inteco-footer-wrapper a { text-decoration: none; border-bottom: 1px solid rgba(139, 198, 188, 0.3); padding-bottom: 1px; } .inteco-footer-wrapper a:hover { border-bottom-color: rgba(139, 198, 188, 0.8); } /* 2e. Blog title links — underline on hover only (card context) */ .gdlr-core-blog-title a:hover { text-decoration: underline !important; text-decoration-color: currentColor; } /* 2f. "Read More" / CTA text links — underline */ .gdlr-core-excerpt-read-more a, a.gdlr-core-excerpt-read-more { text-decoration: underline !important; text-decoration-color: rgba(94, 87, 192, 0.4); } .gdlr-core-excerpt-read-more a:hover, a.gdlr-core-excerpt-read-more:hover { text-decoration-color: rgba(94, 87, 192, 1) !important; } /* -------------------------------------------------------------------------- 3. TOUCH TARGET FIXES (FlexSlider pagination dots) WCAG 2.5.8 / Lighthouse: Touch targets must be at least 44x44px. -------------------------------------------------------------------------- */ .flex-control-paging li a { width: 14px !important; height: 14px !important; padding: 15px !important; box-sizing: content-box !important; margin: 0 4px !important; } /* -------------------------------------------------------------------------- 4. MOBILE FONT SIZE MINIMUM Ensures no body text falls below 14px on mobile devices. -------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { .inteco-body-wrapper, .inteco-body-wrapper p, .inteco-body-wrapper span, .inteco-body-wrapper li, .inteco-body-wrapper td, .gdlr-core-pbf-wrapper, .gdlr-core-text-box-item-content, .gdlr-core-text-box-item-content p, .gdlr-core-text-box-item-content span { font-size: max(14px, inherit) !important; } /* Counter item text at least 14px on mobile */ .gdlr-core-counter-item-bottom-text { font-size: 14px !important; } } /* -------------------------------------------------------------------------- 5. LINK UNDERLINES — WCAG 2.1 SC 1.4.1 (Use of Color) Body content links must be distinguishable from surrounding text by something other than color alone. Adds underlines to inline text links while leaving navigation, buttons, and decorative links untouched. -------------------------------------------------------------------------- */ /* 5a. Default: underline links inside body content areas */ .inteco-body-wrapper p a, .inteco-body-wrapper li a, .inteco-body-wrapper td a, .inteco-body-wrapper dd a, .gdlr-core-text-box-item-content a, .gdlr-core-blog-content a, .inteco-single-article a, .gdlr-core-stunning-text-item a, .inteco-blog-content a { text-decoration: underline !important; text-decoration-color: rgba(94, 87, 192, 0.4) !important; text-underline-offset: 2px; } /* 5b. Hover: darken the underline on hover for feedback */ .inteco-body-wrapper p a:hover, .inteco-body-wrapper li a:hover, .inteco-body-wrapper td a:hover, .inteco-body-wrapper dd a:hover, .gdlr-core-text-box-item-content a:hover, .gdlr-core-blog-content a:hover, .inteco-single-article a:hover, .gdlr-core-stunning-text-item a:hover, .inteco-blog-content a:hover { text-decoration-color: rgba(94, 87, 192, 0.8) !important; } /* 5c. Exclude: buttons, nav links, image wrappers, and decorative elements */ .inteco-body-wrapper a.gdlr-core-button, .inteco-body-wrapper a[class*="menu"], .inteco-body-wrapper .gdlr-core-button-item a, .inteco-body-wrapper .gdlr-core-blog-title a, .inteco-body-wrapper .gdlr-core-portfolio-title a, .inteco-body-wrapper .gdlr-core-blog-thumbnail a, .inteco-body-wrapper .gdlr-core-portfolio-thumbnail a, .inteco-body-wrapper a.gdlr-core-pbf-column-link, .inteco-body-wrapper .inteco-blog-title-wrap a, .inteco-body-wrapper .gdlr-core-flexslider a, .inteco-body-wrapper .flex-control-paging a, .inteco-body-wrapper .gdlr-core-icon-list-item a, .inteco-body-wrapper .gdlr-core-social-share-item a, .inteco-body-wrapper .inteco-blog-info-wrapper a, .inteco-body-wrapper .tagcloud a, .inteco-body-wrapper .gdlr-core-pagination a { text-decoration: none !important; } /* ========================================================================== PHASE 2 — HIGH-PRIORITY FIXES ========================================================================== */ /* -------------------------------------------------------------------------- 6. MOBILE MINIMUM FONT SIZE Lighthouse flagged inline font-size: 11px on footer widgets. WCAG recommends minimum 12px; best practice for mobile is 14px. Override inline styles on mobile/tablet viewports. -------------------------------------------------------------------------- */ /* 6a. Footer widget text — override inline 11px to 13px on all viewports */ .inteco-footer-wrapper .widget_block p { font-size: 13px !important; line-height: 1.6 !important; } /* 6b. On mobile, bump footer text to 14px minimum for readability */ @media only screen and (max-width: 767px) { .inteco-footer-wrapper .widget_block p { font-size: 14px !important; line-height: 1.7 !important; } } /* ========================================================================== PHASE 3 — MEDIUM-PRIORITY FIXES ========================================================================== */ /* -------------------------------------------------------------------------- 7. CLS FIX — TESTIMONIAL FLEXSLIDER The testimonial FlexSlider has no min-height, causing layout shift (CLS) as slides load. Actual CSS delivered via wp_add_inline_style() in functions.php to bypass WP Rocket Used CSS stripping. -------------------------------------------------------------------------- */ /* 7a. Desktop: min-height prevents collapse before slides render */ /* .gdlr-core-testimonial-item .flexslider { min-height: 420px; } */ /* 7b. Mobile: reduced min-height for smaller viewports */ /* @media (max-width: 767px) { ... min-height: 300px; } */ /* -------------------------------------------------------------------------- 8. MAIN LANDMARK (role="main") Screen readers need a
landmark to skip navigation. JS in functions.php adds role="main" to .inteco-body-wrapper via wp_footer. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 9. HEADING HIERARCHY (H3 → H2 promotion) Homepage section headings ("Our Projects.", "Service Area.", etc.) were all H3, skipping H2 after the H1. JS in functions.php promotes section- level H3s (identified by trailing period in text) to H2 for proper hierarchy: H1 > H2 > H3. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 10. TABLET LAYOUT (768–1024px) Audited at 820×1180 viewport. All sections render correctly at tablet breakpoints — no additional CSS adjustments required. -------------------------------------------------------------------------- */