/* Theme Name: Teague Roofing Plus Child Theme URI: https://teagueroofingplus.com Description: Child theme for Hello Elementor, built for Teague Roofing Plus by Dibb Media. Holds the site's own design tokens and the CSS that lets native Elementor widgets reproduce the look currently supplied by ElementsKit and Essential Addons, so those plugins can be retired. Also absorbs the Rank Math schema engine and the accessibility landmark that previously lived in WPCode Lite. Author: Dibb Media Author URI: https://dibbmedia.com Template: hello-elementor Version: 1.0.4 Text Domain: teague-child */ /* ========================================================================== 0. TOKENS Mirrored from the live Elementor global kit (post-16.css) so this stylesheet keeps working if a widget is ever detached from the kit. Elementor defines the same custom properties at runtime; these are a fallback, not a redefinition, which is why every use below is var(--e-global-*, ). ========================================================================== */ :root { --trp-red: #EB2633; /* kit: primary */ --trp-red-deep: #CA2E30; /* kit: cd0e5fb, the dual-header second colour */ --trp-navy: #0B1930; /* kit: secondary */ --trp-grey: #8E8E8E; /* kit: text */ --trp-white: #FFFFFF; /* kit: accent */ --trp-mist: #F2F6F9; /* kit: f7c00a0 */ --trp-hairline: #7878786B;/* kit: 343dd96 */ --trp-blue-deep: #02426A; /* kit: 4c3c053 */ --trp-display: "Zilla Slab", Georgia, "Times New Roman", serif; --trp-heading: "Raleway", "Helvetica Neue", Arial, sans-serif; --trp-ui: "Poppins", "Helvetica Neue", Arial, sans-serif; --trp-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } /* ========================================================================== 1. DUAL-COLOUR HEADING (replaces eael-dual-color-header) -------------------------------------------------------------------------- Essential Addons stores this as two separate strings with independent typography and renders them as one heading. A native Elementor Heading has a single title field, so the two parts become two spans inside it: Nixa, MO Roof Replacement with an optional third line: Free inspection, no obligation Put trp-h plus a size modifier in the Heading widget's CSS Classes field. Sizes below are the real clusters measured across all 1,141 live instances, not invented values: 50px x813, 100px x168 (the page H1s), 40px x148, 48px x4, 75px x1, plus 2 Raleway variants. ========================================================================== */ .trp-h { margin: 0; font-family: var(--trp-display); font-weight: 600; line-height: 1.1; } .trp-h .trp-h__a { color: var(--e-global-color-accent, var(--trp-white)); } .trp-h .trp-h__b { color: var(--e-global-color-cd0e5fb, var(--trp-red-deep)); } .trp-h .trp-h__sub { display: block; margin-top: .5em; font-family: var(--trp-heading); font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--e-global-color-accent, var(--trp-white)); } /* Size modifiers. Each carries the tablet and mobile steps that the original widget defined, so the responsive behaviour survives the swap. */ .trp-h--100 { font-size: 100px; line-height: 100px; } .trp-h--75 { font-size: 75px; line-height: 65px; } .trp-h--50 { font-size: 50px; } .trp-h--48 { font-size: 48px; } .trp-h--40 { font-size: 40px; } /* The Raleway variant (2 instances) rather than the Zilla Slab default. */ .trp-h--alt { font-family: var(--trp-heading); font-weight: 500; } @media (max-width: 1024px) { .trp-h--100 { font-size: 75px; line-height: 1.05; } .trp-h--75 { font-size: 56px; line-height: 1.05; } .trp-h--50 { font-size: 40px; } .trp-h--48 { font-size: 38px; } } @media (max-width: 767px) { .trp-h--100 { font-size: 33px; line-height: 40px; } .trp-h--75 { font-size: 32px; line-height: 1.15; } .trp-h--50 { font-size: 30px; } .trp-h--48 { font-size: 29px; } .trp-h--40 { font-size: 27px; } .trp-h .trp-h__sub { font-size: 18px; } } /* On a light section the white half is invisible, so allow an inversion. */ .trp-h--on-light .trp-h__a { color: var(--e-global-color-secondary, var(--trp-navy)); } .trp-h--on-light .trp-h__sub { color: var(--e-global-color-text, var(--trp-grey)); } /* ========================================================================== 2. FOCUSED HEADING (replaces elementskit-heading) -------------------------------------------------------------------------- ElementsKit splits this into a title, a "focused" run styled in the brand red, and a subtitle. Same approach: spans inside a native Heading. Need a Roof Replacement in Nixa, MO? Your roof will not wait. Measured clusters: Raleway 40px/500 x148 (dominant), Zilla Slab 48px/600 x10, Raleway 40px/600 x2. ========================================================================== */ .trp-eh { margin: 0; font-family: var(--trp-heading); font-size: 40px; font-weight: 500; line-height: 1.2; text-transform: capitalize; } .trp-eh .trp-eh__t { color: var(--e-global-color-accent, var(--trp-white)); } .trp-eh .trp-eh__f { color: var(--e-global-color-primary, var(--trp-red)); font-weight: 600; } .trp-eh .trp-eh__sub { display: block; margin-top: .4em; font-family: var(--trp-body); font-size: 16px; font-weight: 400; line-height: 1.5; text-transform: none; color: var(--e-global-color-text, var(--trp-grey)); } .trp-eh--display { font-family: var(--trp-display); font-size: 48px; font-weight: 600; } .trp-eh--display .trp-eh__f { font-family: var(--trp-display); } .trp-eh--ui .trp-eh__f { font-family: var(--trp-ui); } @media (max-width: 767px) { .trp-eh { font-size: 32px; } .trp-eh--display { font-size: 32px; } } /* Optional hairline under the heading, which several instances carry. */ .trp-eh--ruled { padding-bottom: 5px; border-bottom: 1px solid var(--e-global-color-343dd96, var(--trp-hairline)); } /* ========================================================================== 3. ACCORDION (native nested-accordion, replacing elementskit-accordion) -------------------------------------------------------------------------- Reproduces the ElementsKit look: 1px hairline, 10px radius closed / 15px open, 24px padding, Zilla Slab 25px titles, Raleway 18px body. Add trp-acc in the Nested Accordion widget's CSS Classes field. NOTE: the FAQ schema these accordions used to emit is NOT reproduced here, and must not be. It now lives in Rank Math (rank_math_schema_FAQPage) on all 158 documents, which is where it belongs and where it survives this migration. Do not re-enable any widget-level FAQ schema, or the page will emit two FAQPage nodes. ========================================================================== */ .trp-acc .e-n-accordion-item { margin-bottom: 10px; border: 1px solid var(--e-global-color-accent, var(--trp-white)); border-radius: 10px; overflow: hidden; } .trp-acc .e-n-accordion-item[open] { border-radius: 15px; } .trp-acc .e-n-accordion-item-title { padding: 24px 72px 24px 24px; font-family: var(--trp-display); font-size: 25px; font-weight: 600; line-height: 1.3; letter-spacing: -.2px; color: var(--e-global-color-accent, var(--trp-white)); } .trp-acc .e-n-accordion-item[open] .e-n-accordion-item-title { border-bottom: 1px solid var(--e-global-color-accent, var(--trp-white)); } .trp-acc .e-n-accordion-item > .e-con { padding: 24px 72px 24px 24px; font-family: var(--trp-heading); font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--e-global-color-accent, var(--trp-white)); } .trp-acc a { color: inherit; text-decoration: underline; } @media (max-width: 1024px) { .trp-acc .e-n-accordion-item-title { font-size: 21px; } } @media (max-width: 767px) { .trp-acc .e-n-accordion-item-title, .trp-acc .e-n-accordion-item > .e-con { padding: 10px; } .trp-acc .e-n-accordion-item { border-width: 2px; } } /* ========================================================================== 4. SOCIAL ICONS (native social-icons, replacing elementskit-social-media) ========================================================================== */ .trp-social .elementor-social-icon { background-color: var(--e-global-color-cd0e5fb, var(--trp-red-deep)); color: var(--e-global-color-accent, var(--trp-white)); line-height: 26px; } .trp-social .elementor-social-icon:hover { background-color: var(--e-global-color-primary, var(--trp-red)); } /* ========================================================================== 5. FALL-THROUGH ROUTES (search, category, author, date archives) -------------------------------------------------------------------------- These have no Elementor theme-builder template, so only their CONTENT AREA falls through to Hello Elementor defaults. The header and footer are fine: templates 185 and 188 use the `include/general` condition, so they still wrap these pages. Selectors below are the classes Hello Elementor actually emits on this site, read off a live search render, not guessed: .site-main, .page-content, article.post, .entry-title, .pagination, .nav-next / .nav-previous. Deliberately restrained. The job is "looks like the same website", not a redesign of routes nobody lands on from search. ========================================================================== */ .search .site-main, .archive .site-main, .error404 .site-main { max-width: 1140px; margin: 0 auto; padding: 48px 20px 64px; font-family: var(--trp-body); color: var(--e-global-color-text, var(--trp-grey)); } .search .page-content > h1, .archive .site-main > h1, .search .site-main > h1 { margin: 0 0 32px; font-family: var(--trp-display); font-size: 40px; font-weight: 600; line-height: 1.2; color: var(--e-global-color-secondary, var(--trp-navy)); } .search article.post, .archive article.post { padding: 24px 0; border-bottom: 1px solid var(--e-global-color-343dd96, var(--trp-hairline)); } .search article.post:last-of-type, .archive article.post:last-of-type { border-bottom: 0; } .search .entry-title, .archive .entry-title { margin: 0 0 8px; font-family: var(--trp-heading); font-size: 22px; font-weight: 600; line-height: 1.3; } .search .entry-title a, .archive .entry-title a { color: var(--e-global-color-secondary, var(--trp-navy)); text-decoration: none; } .search .entry-title a:hover, .archive .entry-title a:hover { color: var(--e-global-color-primary, var(--trp-red)); text-decoration: underline; } /* Thumbnails come through at full size and can dwarf the row. */ .search article.post .wp-post-image, .archive article.post .wp-post-image { float: left; width: 120px; height: 90px; margin: 0 20px 12px 0; object-fit: cover; border-radius: 6px; } .search article.post::after, .archive article.post::after { content: ""; display: block; clear: both; } .search .pagination, .archive .pagination { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--e-global-color-343dd96, var(--trp-hairline)); font-family: var(--trp-heading); } .search .pagination a, .archive .pagination a, .nav-next a, .nav-previous a { display: inline-block; padding: 8px 14px; color: var(--e-global-color-secondary, var(--trp-navy)); text-decoration: none; border: 1px solid var(--e-global-color-343dd96, var(--trp-hairline)); border-radius: 6px; } .search .pagination a:hover, .archive .pagination a:hover, .nav-next a:hover, .nav-previous a:hover { color: var(--e-global-color-accent, var(--trp-white)); background: var(--e-global-color-primary, var(--trp-red)); border-color: var(--e-global-color-primary, var(--trp-red)); } .meta-nav { opacity: .7; } @media (max-width: 767px) { .search .site-main, .archive .site-main, .error404 .site-main { padding: 32px 16px 48px; } .search .page-content > h1, .archive .site-main > h1, .search .site-main > h1 { font-size: 30px; } .search article.post .wp-post-image, .archive article.post .wp-post-image { width: 84px; height: 64px; margin-right: 14px; } } /* ========================================================================== 6. ACCESSIBILITY The
landmark injected by inc/accessibility.php is intentionally unstyled so it changes nothing visually. This only guarantees it cannot introduce a stacking or overflow surprise. ========================================================================== */ #trp-main { display: block; } /* A visible focus ring. Hello Elementor leaves this to the browser and Elementor's resets sometimes suppress it, which is a real WCAG 2.4.7 gap. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--e-global-color-primary, var(--trp-red)); outline-offset: 2px; }