/* Theme Name: Tone & Muscle Theme URI: https://wemarketma.com Author: We Market MA Author URI: https://wemarketma.com Description: Child theme of Hello Elementor. Header, footer, menu and page layouts are edited in Elementor (Theme Builder); business details are under Settings > Business Details; colours and fonts are Elementor's Global Colors and Fonts. Template: hello-elementor Version: 1.0.11 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: wmm-child */ /* The Global Colors as CSS variables, for the client's own CSS below. Change a colour in Elementor and these follow. */ :root { --wmm-base: var(--e-global-color-wmm_base, #FFFFFF); --wmm-surface: var(--e-global-color-wmm_surface, #F6F5F2); --wmm-contrast: var(--e-global-color-wmm_contrast, #1C1C20); --wmm-heading: var(--e-global-color-wmm_heading, #0D0F12); --wmm-muted: var(--e-global-color-wmm_muted, #4A4A55); --wmm-line: var(--e-global-color-wmm_line, #E8E6DD); --wmm-accent: var(--e-global-color-wmm_accent, #2D74DA); --wmm-accent-hi: var(--e-global-color-wmm_accent_hi, #89AADD); --wmm-on-accent: var(--e-global-color-wmm_on_accent, #FFFFFF); --wp--preset--color--base: var(--wmm-base); --wp--preset--color--surface: var(--wmm-surface); --wp--preset--color--contrast: var(--wmm-contrast); --wp--preset--color--heading: var(--wmm-heading); --wp--preset--color--muted: var(--wmm-muted); --wp--preset--color--line: var(--wmm-line); --wp--preset--color--accent: var(--wmm-accent); --wp--preset--color--accent-hi: var(--wmm-accent-hi); --wp--preset--color--on-accent: var(--wmm-on-accent); --wp--preset--font-family--display: var(--e-global-typography-wmm_heading-font-family, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); --wp--preset--font-family--body: var(--e-global-typography-wmm_body-font-family, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); --wmm-container: 1080px; --wmm-read: var(--wmm-container, 1240px); --wmm-faq: var(--wmm-container, 1240px); --wmm-read-size: 19px; } /* Client-specific CSS (wp-build/theme-overrides/style.css) */ /* WordPress's own wrappers around the live markup must add nothing: no gaps, no padding, no width limits. */ .wp-site-blocks { padding: 0 !important; } .wp-site-blocks > *, .wp-site-blocks .wp-block-template-part { margin: 0 !important; } .wp-block-post-content.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; } .wp-block-post-content { max-width: none; } /* The HighLevel form and review widget sit where the old ones were. */ .wmm-embed-form iframe { width: 100%; min-height: 745px; border: 0; } .wmm-form-legal { font-size: 13px; text-align: center; margin-top: 10px; } /* the project's own rules (wp-build/client.css) */ /* Tone & Muscle: the Elementor header styled like the live header (duplicate means identical; measured on toneandmuscle.com, 26 October 2026). Live: #main-header #0a0a0a, 98px, logo 184px wide in a 1080px container; links "Open Sans" (Arial as visitors see it) 14px 600, white at 60%, the current page #2ea3f2. Dropdowns as approved on the earlier staging build: #0a0a0a, a 3px #2ea3f2 top rule, 240px, links white at 60%. Mobile menu #0a0a0a like the live .et_mobile_menu. */ body .elementor.elementor-location-header .elementor-element.e-con.wmm-header { background-color: #0a0a0a; box-shadow: 0 1px 0 rgba(0, 0, 0, .1); min-height: 98px; } body .elementor.elementor-location-header .elementor-element.wmm-logo img { width: 184px; max-width: 184px; height: auto; } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--main .elementor-item { color: rgba(255, 255, 255, .6); fill: rgba(255, 255, 255, .6); font-family: "Open Sans", Arial, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none; } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--main .elementor-item:hover, body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--main .elementor-item:focus-visible { color: rgba(255, 255, 255, .85); } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--main .elementor-item.elementor-item-active { color: #2ea3f2; } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--main .elementor-item::before, body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--main .elementor-item::after { background-color: transparent; } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--main .sub-menu { background-color: #0a0a0a; border-top: 3px solid #2ea3f2; box-shadow: 0 2px 5px rgba(0, 0, 0, .1); min-width: 240px; padding: 20px 0; } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item { background-color: transparent; color: rgba(255, 255, 255, .6); font-family: "Open Sans", Arial, sans-serif; font-size: 14px; font-weight: 600; padding: 6px 20px; } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover, body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item.elementor-item-active { color: #2ea3f2; background-color: transparent; } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-menu-toggle { color: #ffffff; fill: #ffffff; background-color: transparent; } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-menu-toggle svg { fill: #ffffff; } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--dropdown { background-color: #0a0a0a; border-top: 3px solid #2ea3f2; } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--dropdown a { color: rgba(255, 255, 255, .8); background-color: transparent; } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--dropdown a:hover, body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--dropdown a.elementor-item-active { color: #2ea3f2; background-color: transparent; } /* the header buttons on the dark bar: the call button outlined in white; Apply Now keeps the live brand blue */ body .elementor.elementor-location-header .elementor-element.wmm-btn--line .elementor-button { color: #ffffff; border-color: rgba(255, 255, 255, .6); background-color: transparent; } body .elementor.elementor-location-header .elementor-element.wmm-btn--line .elementor-button:hover { border-color: #ffffff; } body .elementor.elementor-location-header .elementor-element.wmm-callicon a { color: #ffffff; } /* the live header's content sits in a centred container (1080px live); the core 5 menu, the phone and Apply Now need 1280px to stay on one line, with the live menu's own spacing between links (Divi: 22px) */ @media (min-width: 1025px) { body .elementor.elementor-location-header .elementor-element.e-con.wmm-header { --padding-left: max(20px, calc((100% - 1280px) / 2)); --padding-right: max(20px, calc((100% - 1280px) / 2)); } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item { padding-left: 11px; padding-right: 11px; } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu { flex-wrap: nowrap; } } /* phones and tablets: the live header's logo is about 80px wide under Divi's 980px breakpoint */ @media (max-width: 980px) { body .elementor.elementor-location-header .elementor-element.wmm-logo img { width: 80px; max-width: 80px; } } /* 1025-1199px: the core 5 menu, the phone and Apply Now share less room; tighter spacing and a smaller logo keep the phone button clear of the menu */ @media (min-width: 1025px) and (max-width: 1199px) { body .elementor.elementor-location-header .elementor-element.wmm-logo img { width: 130px; max-width: 130px; } body .elementor.elementor-location-header .elementor-element.wmm-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item { padding-left: 6px; padding-right: 6px; } body .elementor.elementor-location-header .elementor-element.e-con.wmm-header { --gap: 12px; --column-gap: 12px; } } /* ---------- Elementor footer, in the live footer's colours (measured on toneandmuscle.com, 26 October 2026) ---------- Live: .tm-full-footer-wrap radial-gradient(circle at 100% 0%, #1a1e26, #0d0f12), a 4px #2D74DA top rule, 80px above; headings white 14px 800 uppercase, 1.5px letter spacing; lists #9ea3ac 14px; the bottom bar rgba(0,0,0,.4) with a 1px rgba(255,255,255,.05) rule, white 14px text, links #2ea3f2. */ body .elementor.elementor-location-footer .elementor-element.e-con.wmm-footer { background-color: #0d0f12; background-image: radial-gradient(circle at 100% 0%, #1a1e26 0%, #0d0f12 100%); border-top: 4px solid #2D74DA; --padding-top: 80px; } body .elementor.elementor-location-footer .wmm-footer :is(h2, h3, h4, h5, .elementor-heading-title) { color: #ffffff; font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body .elementor.elementor-location-footer .wmm-footer-name, body .elementor.elementor-location-footer .wmm-footer-name * { color: #ffffff; } body .elementor.elementor-location-footer .wmm-footer, body .elementor.elementor-location-footer .wmm-footer-address, body .elementor.elementor-location-footer .wmm-footer-address * { color: #b0b3b8; } body .elementor.elementor-location-footer .wmm-footer-tel a { color: #ffffff; } /* the Explore menu: .elementor-nav-menu--main and :is(.elementor-item-active) outrank the footer template's own (dark) menu colours */ body .elementor.elementor-location-footer .wmm-footer-menu .elementor-nav-menu--main .elementor-item:is(*, .elementor-item-active), body .elementor.elementor-location-footer .wmm-footer-towns a, body .elementor.elementor-location-footer .wmm-footer-towns li { color: #9ea3ac; background-color: transparent; } body .elementor.elementor-location-footer .wmm-footer-menu .elementor-nav-menu--main .elementor-item:is(:hover, :focus-visible), body .elementor.elementor-location-footer .wmm-footer-towns a:hover { color: #2D74DA; } body .elementor.elementor-location-footer .elementor-element.wmm-logo img { width: 200px; max-width: 100%; } body .elementor.elementor-location-footer .elementor-element.e-con.wmm-footer-base { background-color: rgba(0, 0, 0, .4); border-top: 1px solid rgba(255, 255, 255, .05); } body .elementor.elementor-location-footer .wmm-footer-base, body .elementor.elementor-location-footer .wmm-footer-base * { color: #ffffff; } body .elementor.elementor-location-footer .wmm-footer-base a { color: #2ea3f2; } /* the phone call bar on the dark site: the live header's black, Apply Now outlined in white */ body .elementor.elementor-location-footer .elementor-element.e-con.wmm-callbar { background-color: #0a0a0a; } body .elementor.elementor-location-footer .wmm-callbar .wmm-btn--line .elementor-button { color: #ffffff; border-color: rgba(255, 255, 255, .6); background-color: transparent; } /* Photos in the page copy (Mike, 27 October 2026): no taller than 540px, cropped to fill the content width, so a portrait photo does not run past the screen. Cards and side-by-side bands keep their own image sizes. */ .elementor-widget-theme-post-content > figure.wp-block-image img, .elementor-widget-theme-post-content > .elementor-widget-container > figure.wp-block-image img { width: 100%; max-height: 540px; object-fit: cover; object-position: 50% 30%; } /* Sticky header (standing rule, Mike, 29 October 2026): the menu and its call buttons stay in view while the page scrolls. The Theme Builder's header wrapper is the element that sticks (the wmm-site plugin from 1.0.3 does the same; this keeps it on the installed plugin). */ .elementor.elementor-location-header { position: sticky; top: 0; z-index: 90; } .admin-bar .elementor.elementor-location-header { top: var(--wp-admin--admin-bar--height, 32px); } @media (max-width: 600px) { .admin-bar .elementor.elementor-location-header { top: 0; } } html { scroll-padding-top: 120px; } /* Reviews 4 to a row on desktop (Mike, 9 November 2026). The HighLevel widget shows 4 columns only when it is wider than 1,100px and 2 below that; the content is 1,060px, so the widget lays itself out at 1,128px and is shown at 94%, keeping the page's edges. Tablets and phones keep the widget's own 2 and 1 columns. */ @media (min-width: 1024px) { body .wmm-embed-reviews iframe.lc_reviews_widget { zoom: .94; width: calc(100% / .94) !important; min-width: 0 !important; } } /* Home page video ("The TMA Transformation") at its own widescreen shape (Mike, 9 November 2026). Its embed code says 4:3, which the old site showed with the cover's text cut off at the sides; listed as a change from the live site. */ body .et_pb_video_box iframe[src*="OTyrzVvk0zg"] { aspect-ratio: 16 / 9 !important; }