/* ================================================================== Traction Canvas: site overrides One CSS file for all of the site's custom styling, loaded LAST (after the theme, plugins and Elementor) so these rules win. Created 3 Oct 2026 by moving styles out of Code Snippets (#17, #18, #21, #39, #40, #41, #44) and Appearance > Customize > Additional CSS. Edit it in Appearance > Theme File Editor > css/site-overrides.css. AFTER EVERY CHANGE: bump the ?v number on the site-overrides.css line in header.php, or visitors' browsers keep showing the old styles. Design rules (Craig): buttons are green #557638; never brown (use black); zone colours Learn red #962B01, Earn orange #EB8802, Scale green #557638. ================================================================== */ /* ------------------------------------------------------------------ Text logo (placeholder until a real logo file is uploaded) [was snippet #18] ------------------------------------------------------------------ */ header a.navbar-brand img.header-logo{display:none !important;} header a.navbar-brand{display:inline-block;text-decoration:none;} header a.navbar-brand::after{content:"Traction\A Canvas";white-space:pre;text-align:left;display:block;font-weight:800;font-size:40px;line-height:1;letter-spacing:-0.02em;color:#111;padding-top:8px;border-top:5px solid transparent;border-image:linear-gradient(90deg,#962B01 0 22%,transparent 22% 26%,#EB8802 26% 48%,transparent 48% 52%,#557638 52% 74%,transparent 74% 100%) 1;} /* ------------------------------------------------------------------ Traction Thirty application form: always visible [was in snippet #21] ------------------------------------------------------------------ */ /* Traction Thirty Application (form 27): Gravity Forms was leaving it hidden waiting for a setup script that never ran; the form has no show/hide rules, so it is safe to show it */ #gform_wrapper_27{display:block !important;} /* ------------------------------------------------------------------ Footer logo text colour [was in snippet #21] ------------------------------------------------------------------ */ /* Footer: the "Traction Canvas" name under the three colour bars was white on the pale footer, so invisible. Black matches the header logo and the HASO footer. */ footer .tc-footer-logo, footer .tc-footer-logo *{color:#111 !important;} footer .tc-footer-logo{font-size:36px !important;line-height:1 !important;} /* 36px matches the HASO footer logo height (~86px) */ /* ------------------------------------------------------------------ Bold text is black, not the theme's grey-brown [was in snippet #21] ------------------------------------------------------------------ */ /* Bold text: the theme made / a faded grey-brown. Craig: never brown, use black. Coloured words inside bold (e.g. LEARN/EARN/SCALE spans) keep their own colour. */ strong, b { color: #111 !important; } /* ------------------------------------------------------------------ Home page: no page-title banner [was in snippet #21] ------------------------------------------------------------------ */ /* Home page: no page-title banner; the hero promise is the first thing people see */ body.home #pageBanner{display:none !important;} /* ------------------------------------------------------------------ Form submit button sizing [was in snippet #21] ------------------------------------------------------------------ */ .gform_wrapper .gform_footer .gform_button{width:auto !important;min-width:120px;text-align:center;} /* ------------------------------------------------------------------ Footer logo [was in snippet #21] ------------------------------------------------------------------ */ .tc-footer-logo{display:block;font-weight:800;font-size:26px;line-height:1;letter-spacing:-0.02em;color:#fff;margin-bottom:16px;padding-top:8px;border-top:5px solid transparent;border-image:linear-gradient(90deg,#962B01 0 22%,transparent 22% 26%,#EB8802 26% 48%,transparent 48% 52%,#557638 52% 74%,transparent 74% 100%) 1;width:max-content;} /* ------------------------------------------------------------------ Green "Free Diagnostic" menu button [was snippet #39] ------------------------------------------------------------------ */ header .tc-menu-diagnostic > a { background: #557638 !important; color: #fff !important; border-radius: 6px; padding: 8px 16px !important; margin-left: 8px; font-weight: 700; } header .tc-menu-diagnostic > a:hover { background: #557638 !important; color: #fff !important; opacity: .85; } /* ------------------------------------------------------------------ Colour-coded hover on the 10 boxes in the menu (Learn red, Earn orange, Scale green) [was snippet #40] ------------------------------------------------------------------ */ header .dropdown-menu a[href$="/problems/"]:hover, header .sub-menu a[href$="/problems/"]:hover, header .dropdown-menu a[href$="/problems/"]:focus, header .sub-menu a[href$="/problems/"]:focus, header .dropdown-menu a[href$="/bifurcation/"]:hover, header .sub-menu a[href$="/bifurcation/"]:hover, header .dropdown-menu a[href$="/bifurcation/"]:focus, header .sub-menu a[href$="/bifurcation/"]:focus, header .dropdown-menu a[href$="/competition/"]:hover, header .sub-menu a[href$="/competition/"]:hover, header .dropdown-menu a[href$="/competition/"]:focus, header .sub-menu a[href$="/competition/"]:focus, header .dropdown-menu a[href$="/seven-second-sale/"]:hover, header .sub-menu a[href$="/seven-second-sale/"]:hover, header .dropdown-menu a[href$="/seven-second-sale/"]:focus, header .sub-menu a[href$="/seven-second-sale/"]:focus, header .dropdown-menu a[href$="/enrolling/"]:hover, header .sub-menu a[href$="/enrolling/"]:hover, header .dropdown-menu a[href$="/enrolling/"]:focus, header .sub-menu a[href$="/enrolling/"]:focus { color: #962B01 !important; } header .dropdown-menu a[href$="/trigger-events/"]:hover, header .sub-menu a[href$="/trigger-events/"]:hover, header .dropdown-menu a[href$="/trigger-events/"]:focus, header .sub-menu a[href$="/trigger-events/"]:focus, header .dropdown-menu a[href$="/disqualifying/"]:hover, header .sub-menu a[href$="/disqualifying/"]:hover, header .dropdown-menu a[href$="/disqualifying/"]:focus, header .sub-menu a[href$="/disqualifying/"]:focus, header .dropdown-menu a[href$="/emotional-favourite/"]:hover, header .sub-menu a[href$="/emotional-favourite/"]:hover, header .dropdown-menu a[href$="/emotional-favourite/"]:focus, header .sub-menu a[href$="/emotional-favourite/"]:focus, header .dropdown-menu a[href$="/won-sales-analysis/"]:hover, header .sub-menu a[href$="/won-sales-analysis/"]:hover, header .dropdown-menu a[href$="/won-sales-analysis/"]:focus, header .sub-menu a[href$="/won-sales-analysis/"]:focus { color: #EB8802 !important; } header .dropdown-menu a[href$="/marketing-moat/"]:hover, header .sub-menu a[href$="/marketing-moat/"]:hover, header .dropdown-menu a[href$="/marketing-moat/"]:focus, header .sub-menu a[href$="/marketing-moat/"]:focus { color: #557638 !important; } /* ------------------------------------------------------------------ Link colours: footer links, visited links, bold inside links [was snippet #41] ------------------------------------------------------------------ */ footer a, footer a:visited { color: #557638 !important; } footer a:hover, footer a:focus { color: #557638 !important; text-decoration: underline !important; } /* hover = underline, so the brand green stays */ /* Links in page content: visited links stay green (the theme turned them reddish-brown), and bold words inside a link keep the link colour instead of the black bold-text rule. */ /* Buttons are left out so a visited Diagnostic button keeps its white text on green. */ main a:not(.elementor-button):visited, .site-main a:not(.elementor-button):visited, article a:not(.elementor-button):visited { color: #557638; } a strong, a b { color: inherit !important; } /* Elementor buttons (e.g. the green "Take the free Traction Diagnostic" buttons) always keep white text, whatever link-colour rule would otherwise turn the text green on green. */ /* They also match the green "Free Diagnostic" button in the header: bold, rounded, no underline, a little larger; darker green on hover. */ .elementor-widget-button a.elementor-button, .elementor-widget-button a.elementor-button:visited, .elementor-widget-button a.elementor-button:hover, .elementor-widget-button a.elementor-button:focus { color: #FFFFFF !important; text-decoration: none !important; font-size: 18px; font-weight: 700; padding: 12px 24px; border-radius: 6px; } .elementor-widget-button a.elementor-button:hover, .elementor-widget-button a.elementor-button:focus { background-color: #557638 !important; opacity: .85; } /* hover = slight fade, so the brand green stays */ /* ------------------------------------------------------------------ Hide the "Home" menu item on the home page [was snippet #44] ------------------------------------------------------------------ */ body.home header .tc-menu-home { display: none !important; } /* ------------------------------------------------------------------ From Appearance > Customize > Additional CSS ------------------------------------------------------------------ */ /* Fix footer illustration overlap on mobile — keep logo, shrink it and add gap */ @media (max-width: 780px) { footer.site-footer img.footer-logo { max-width: 150px !important; display: block !important; margin: 0 auto 1.5rem auto !important; } } /* Hide footer illustration background on mobile - overlaps text below 780px */ @media (max-width: 780px) { footer.site-footer { background-image: none !important; } } /* Traction Canvas — pull-quote styling (HASO brand colors) */ blockquote { position: relative; padding: 28px 70px 36px 80px; margin: 32px auto 48px auto; border: 0; background: transparent; width: fit-content; max-width: 100%; } blockquote h2 { text-align: center !important; margin: 0 !important; } /* Large decorative quote marks — opening orange, closing green */ blockquote::before, blockquote::after { position: absolute; font-family: Georgia, "Times New Roman", serif; font-size: 110px; line-height: 1; font-style: normal; font-weight: 400; } blockquote::before { content: "\201C"; top: 0; left: 8px; color: #EB8802; } blockquote::after { content: "\201D"; bottom: -34px; right: 8px; color: #557638; } @media (max-width: 600px) { blockquote { padding: 18px 50px 24px 55px; } blockquote::before, blockquote::after { font-size: 75px; } } /* Traction Canvas — callout box (worked example, seven-part template, etc.) */ .haso-callout { background: #FFF8F6; border-left: 4px solid #962B01; padding: 24px 28px; margin: 32px 0; border-radius: 6px; font-size: 1.05em; line-height: 1.6; } .haso-callout .haso-callout-label { display: block; text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.08em; font-weight: 600; color: #962B01; margin-bottom: 10px; } .haso-callout p:last-child { margin-bottom: 0; } .haso-callout strong { color: #363636; } @media (max-width: 600px) { .haso-callout { padding: 18px 20px; margin: 24px 0; } } /* Make body text fully opaque (was washed-out gray at 71% opacity) */ html body p, html body ul, html body ol, html body li, html body .elementor.elementor.elementor p, html body .elementor.elementor.elementor ul, html body .elementor.elementor.elementor ol, html body .elementor.elementor.elementor li, html body .elementor-icon-list-text { color: #3b3937 !important; } /* ============================================ BOX PAGE HEADING HIERARCHY H3 = major section, H4 = sub-section Targets text-editor widgets only — does not affect tc-vic, tc-we, or other HTML widgets ============================================ */ /* H3 — major section headings (What / Why / How / Validate / Mistakes / Next) */ .elementor-widget-text-editor h3 { margin-top: 38px !important; margin-bottom: 14px !important; } /* H4 — sub-section headings (individual steps, tests, sub-topics) */ .elementor-widget-text-editor h4 { color: #557638; font-size: 24px !important; margin-top: 22px !important; margin-bottom: 8px !important; } /* Fix (s) capitalization in GF form 25 and form 5 (Contact Us) field labels */ #gform_25 .gfield_label, #gform_5 .gfield_label { text-transform: none; } /* GF Form 25 — indent radio buttons and checkboxes */ #gform_25 .gfield_radio, #gform_25 .gfield_checkbox { padding-left: 1.25em; } /* GF Form 25 — phone and email inputs fill their column width */ #gform_25 #input_25_2, #gform_25 #input_25_3 { width: 100%; box-sizing: border-box; } /* GF Form 25 — smaller Comments/Questions textarea */ #gform_25 #input_25_7 { height: 80px !important; } /* Gravity Forms — Traction Canvas green submit button (was HASO orange #EB8802; buttons are green, Craig 3 Oct 2026) */ button.gform_button, .gform_wrapper button.gform_button, .gform-theme--no-framework button.gform_button { background-color: #557638 !important; color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; padding: 10px 28px !important; border: 1px solid #ffffff !important; border-radius: 100px !important; cursor: pointer !important; text-transform: uppercase !important; letter-spacing: .05em !important; box-shadow: none !important; } button.gform_button:hover { background-color: #557638 !important; opacity: .85; /* hover = slight fade, so the brand green stays */ } /* Widen footer text column a bit (was col-sm-8/col-sm-4 = 66.67%/33.33%) */ footer.site-footer .footer-col.col-sm-8 { width: 72% !important; } footer.site-footer .footer-col.col-sm-4 { width: 28% !important; } /* Keep "Privacy Policy" on one line in the footer meta bar */ .footer-meta a { white-space: nowrap; } /* ------------------------------------------------------------------ Chat widget (Chatling) tweaks [was in snippet #17] ------------------------------------------------------------------ */ body:not(.haso-chat-msg-ready) .chtl-hovering-message-container{display:none!important} @media (max-width:600px){ #chtl-chat-icon-container{transform:scale(.75);transform-origin:bottom right} footer.site-footer{padding-bottom:90px} } @media (max-width:600px){ figure.tc-road, figure.tc-map{overflow-x:auto;-webkit-overflow-scrolling:touch} figure.tc-road svg{min-width:560px} figure.tc-map svg{min-width:540px} .tc-fit-box table{min-width:460px!important} .tc-fit-box col:first-child{width:118px!important} .tc-fit-box th, .tc-fit-box td{font-size:15px!important;padding:8px 10px!important} } /* ------------------------------------------------------------------ Comparison pages (Compare + the 12 "… vs. the Traction Canvas" pages) ------------------------------------------------------------------ */ /* Their Elementor container has the CSS class "tc-article". Laying it out as a normal block (instead of Elementor's flex row/column) lets the space after one paragraph and before the next heading overlap, as on a normal page, instead of adding up into a double gap. */ .e-con.tc-article { display: block !important; } /* "Best for" / "Not designed for" row labels in the fit table sit in the middle of their row, not at the top. */ .tc-article .tc-fit-box th[scope="row"] { vertical-align: middle !important; }