/* Theme Name: Kadence Child Theme URI: https://conversationware.co.uk Template: kadence Author: Conversationware Author URI: https://conversationware.co.uk Description: Kadence Child Theme Version: 1.0.0 License: GNU General Public License v3.0 (or later) License URI: https://www.gnu.org/licenses/gpl-3.0.html */ .mb-0 { margin-bottom: 0 !important; } .mx-auto { margin-left: auto; margin-right: auto; } .align-start { align-items: flex-start !important; } .mw-380 { max-width: 380px; } .mw-830 { max-width: 830px; } .text-white { color: #FFFFFF; } /** hero **/ .entry-hero .entry-hero-container-inner { padding-top: 40px; padding-bottom: 40px; } /** Calendly * --------------------------------------------------------------------- **/ .calendly-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 9999; background-color: #a5a5a5; background-color: rgba(31, 31, 31, .4); } .calendly-overlay .calendly-close-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .calendly-inline-widget, .calendly-inline-widget *, .calendly-badge-widget, .calendly-badge-widget *, .calendly-overlay, .calendly-overlay * { font-size: 16px; line-height: 1.2em; } .calendly-overlay .calendly-popup { box-sizing: border-box; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); width: 80%; min-width: 900px; max-width: 1000px; height: 90%; max-height: 680px; } .calendly-overlay .calendly-popup .calendly-popup-content { height: 100%; } .calendly-popup-content { position: relative; } .calendly-spinner { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; z-index: -1; } .calendly-inline-widget iframe, .calendly-badge-widget iframe, .calendly-overlay iframe { display: inline; width: 100%; height: 100%; } /** embed responsively * ---------------------------------------------------------------------- **/ .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /** paragraph **/ .single-content p { margin: 0 0 1.25em; } .single-content p:last-child { margin-bottom: 0; } .single-content p:not(.has-text-color) > strong, .single-content ul > li > strong { color: var(--global-palette4); } .entry-content p + ul, .entry-content p + ol { margin-top: -1em; } /** list ---------------------------------------------------------------- **/ .entry-content.single-content ul, .entry-content.single-content ol { /* margin-bottom: 20px; */ } .entry-content.single-content ul:last-child, .entry-content.single-content ol:last-child { margin-bottom: 0; } .entry-content.single-content ul:not([class]) { list-style: none; padding-left: 1em; } .entry-content.single-content ul:not([class]) > li::before { content: "\2022"; color: var(--global-palette1); font-size: 1.2em; font-weight: 700; display: inline-block; width: 1em; margin-left: -1em; } /* image ---------------------------------------------------------------- **/ .wp-block-kadence-image .aligncenter.image-is-svg img { margin-left: auto; margin-right: auto; } /* Blockquote ---------------------------------------------------------------- **/ blockquote { border: 0; border-radius: 4px; background: var(--global-palette8); padding: 40px 40px 40px 115px; position: relative; margin-bottom: 20px; } blockquote::before { content: ''; display: block; background: url(/wp-content/uploads/2022/05/blockquote-icon.svg) no-repeat center center / contain; width: 44px; height: 37px; position: absolute; left: 40px; top: 40px; } blockquote cite { font-size: inherit; } blockquote cite strong { color: var(--global-palette4); } .nlb-blockquote-row .inner-col { position: relative; flex-direction: row; } .nlb-blockquote-row .inner-col::before { content: ''; display: block; background: url(/wp-content/uploads/2025/11/blockquote-icon-yellow.svg) no-repeat center center / contain; width: 44px; min-width: 44px; height: 37px; margin-right: 30px; margin-top: 5px; } @media screen and (max-width: 767px) { .nlb-blockquote-row .inner-col::before { width: 30px; min-width: 30px; margin-right: 15px; margin-top: 5px; } } .uagb-blockquote__content { padding-top: 37px; padding-left: 100px; } .uagb-blockquote__author-wrap.uagb-blockquote__author-at-left { padding-left: 100px; padding-bottom: 40px; } /* Float ---------------------------------------------------------------- **/ .single-content .wp-block-kadence-image .alignleft { margin: 0 20px 20px 0; } /** Sidebar ----------------------------------------------------------------- **/ #secondary .gform_wrapper.gravity-theme .gfield.gfield--width-half { grid-column: span 12; } #secondary .gform_wrapper.gravity-theme .gfield_label { font-weight: 400; } #secondary .sidebar-social-icons { display: flex; } #secondary .sidebar-social-icons .kt-svg-icon-wrap { background-color: var(--global-palette1); width: 35px; height: 35px; border-radius: 5px; margin-right: 15px; } #secondary .sidebar-social-icons .kt-svg-icon-wrap a.kt-svg-icon-link, #secondary .sidebar-social-icons .kt-svg-icon-wrap a.kt-svg-icon-link > div { width: 100%; height: 100%; display:flex; justify-content: center; } @media screen and (min-width: 768px) { #secondary.sidebar-slug-sidebar-primary > .sidebar-inner-wrap { padding-top: 65px; } } @media screen and (min-width: 1025px) { .has-sidebar .content-container { grid-gap: 30px; } .has-sidebar .site .content-container .alignfull:not(.entry-related) { max-width: 100vw; width: 100vw; margin-left: calc(50% - 50vw + calc(23% - 40px)); } .has-left-sidebar.has-sidebar .site .content-container .alignfull { margin-left: calc(50% - 50vw - calc(23% - 70px)); } /* The divider is gone (24 Sep 2026). It ran the height of the menu and no further, so it read as belonging to the menu rather than dividing the columns, and the -65px below lifted it into the banner. Kadence grey, #EAEAEA, never a brand value. The -65px stays: it is what lifts the menu to sit level with the article beside it. Note its counterweight is the 65px padding-top above, which Additional CSS overrides to 25px — so the pair no longer balances and the wrap still sits ~35px high. Left alone because removing the border makes it invisible; fix the pair when the Customizer CSS comes back into the theme. */ #secondary.sidebar-slug-sidebar-primary > .sidebar-inner-wrap { margin-top: -65px; } } @media screen and (min-width: 1200px) { .has-sidebar:not(.has-left-sidebar) .content-container { grid-gap: 50px; } } /** Breadcrumbs ----------------------------------------------------------------- **/ .entry-hero .kadence-breadcrumbs { margin-top: 10px; margin-bottom: 0; } .kadence-breadcrumbs a:not(:hover):not(:focus) { color: var(--global-palette1); text-decoration: none; } .kadence-breadcrumbs .bc-delimiter { font-size: 0; } .kadence-breadcrumbs .bc-delimiter::before { content: '>'; display: inline-block; color: inherit; font-size: 16px; } /** Pagination ----------------------------------------------------------------- **/ .pagination { text-align: center; } .pagination .page-numbers { color: var(--global-palette4); background-color: transparent; border: 1px solid var(--global-palette4); border-radius: 0; } .pagination .current { color: var(--global-palette1); background: transparent; border: 1px solid var(--global-palette1); } /** Forms ----------------------------------------------------------------- **/ ::-webkit-input-placeholder { color: #989898; } ::-moz-placeholder { color: #989898; } :-ms-input-placeholder { color: #989898; } ::-ms-input-placeholder { color: #989898; } ::placeholder { color: #989898; } .gform_wrapper.gravity-theme .gfield_label, .gform_wrapper.gravity-theme .ginput_complex label { color: var(--global-palette2); font-size: 16px; font-weight: 400; margin-bottom: 10px; } .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .gform_wrapper textarea { font-size: 16px; line-height: 1.625; border: 1px solid var(--global-palette8); border-radius: 4px; padding: 15px; background-color: var(--global-palette8); } /* homepage banner form **/ #wrapper .gform_wrapper .banner-form .gf-email-field input[type="email"] { border: 1px solid #E6EFF4; background-image: url(images/form-icon-email.png); background-position: 25px center; background-size: 20px; background-repeat: no-repeat; padding: 18px 20px; padding-left: 65px; } /** Header ------------------------------------------------------------------ **/ .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-is-stuck { box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1); } .header-phone-icon { vertical-align: middle; display: inline-block; } .mobile-html .header-phone-icon { vertical-align: unset; margin-right: 10px; } #masthead .menu-item.highlight > a { color: #eb5a4c; } @media screen and (min-width: 1025px) { #masthead .site-branding { margin-right: 55px; } } @media screen and (min-width: 1600px) { #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { padding-left: calc(45px / 2); padding-right: calc(45px / 2); } } @media screen and (min-width: 1800px) { #masthead .site-header-row-layout-fullwidth > .site-header-row-container-inner > .site-container { padding-left: 80px; padding-right: 80px; } } @media screen and (max-width: 1500px) { #main-header { zoom: 0.95; } } @media screen and (max-width: 1365px) { #main-header { zoom: 0.9; } } @media screen and (max-width: 1210px) { #main-header { zoom: 0.8; } } @media screen and (max-width: 1150px) { #main-header { zoom: 0.72; } } @media screen and (max-width: 1024px) { #main-header { zoom: unset; } } @media screen and (max-width: 767px) and (orientation: portrait) { #masthead .site-top-header-wrap .site-header-row-container-inner>.site-container { padding-left: 10px; padding-right: 10px; } } @media screen and (max-width: 374px) { .hide-on-mobile { display: none !important; } #masthead .site-branding a.brand img { max-width: 220px; } } /** Footer ------------------------------------------------------------------ **/ .site-footer-row-container-inner > .site-container { max-width: 1410px; } #colophon .footer-quicklinks { list-style: none; list-style-type: none; margin: 0; padding: 0; } .footer-quicklinks > li:not(:last-child) { margin-bottom: 20px; } #colophon .widget-title-outer-wrap { margin-bottom: 16px; } /** FAQs **/ .after-content-faq-container { padding: 40px 0; max-width: 1415px; margin: 0 auto; display:block; } .faq-main-wrap{ width: 100% !important; } .faq-main-wrap > h2{ color: #2d3748; font-size:35px; text-align: center; margin-bottom: 26px; } .faq-main-wrap .cw_faq { margin-bottom: 26px; width: 100%; border: 1px solid #2d3748; padding: 35px 20px 40px; } .faq-main-wrap .cw-schema-header { color: #0A2B51; font-size: 25x; font-weight: 700; position: relative; padding-left: 32px; margin-bottom: 20px; } .faq-main-wrap .cw-schema-header:before { content: 'Q:\00a0'; position: absolute; left: 0px; } .faq-main-wrap .cw-schema-text { font-size: 18x; position: relative; padding-left: 32px; } .faq-main-wrap .cw-schema-text::before{ content: 'A:\00a0'; position: absolute; left: 0; } .faq-main-wrap .cw-schema-text p:last-child { margin-bottom: 0; } @media screen and (min-width: 992px) { .after-content-faq-container .faq-main-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; } .after-content-faq-container .faq-main-wrap > h2 { width: 100%; } .after-content-faq-container .cw_faq { -webkit-box-flex: 0; -webkit-flex: 0 0 -webkit-calc(50% - 9px); -moz-box-flex: 0; -ms-flex: 0 0 calc(50% - 9px); flex: 0 0 calc(50% - 9px); max-width: -webkit-calc(50% - 9px); max-width: calc(50% - 9px); } } @media screen and (max-width: 1199px) { .after-content-faq-container { padding-left: 20px; padding-right: 20px; } } .button-has-arrow-right .kt-blocks-info-box-learnmore::after { content: ''; display: inline-block; vertical-align: middle; width: 18px; height: 10px; background: url(/wp-content/uploads/2022/03/nlb-arrow-right-more-icon.png) no-repeat center center / 18px; margin-left: 10px; } .button-has-arrow-right .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-learnmore::after, .button-has-arrow-right .kt-blocks-info-box-link-wrap:focus .kt-blocks-info-box-learnmore::after { background-image: url(/wp-content/uploads/2023/06/Arrow.png); } /** Page info boxes * ---------------------------------------------------------------------------- **/ .page-info-box .kt-blocks-info-box-learnmore { background: var(--global-palette-btn-bg) !important; } .page-info-box .kt-blocks-info-box-learnmore:hover, .page-info-box .kt-blocks-info-box-learnmore:focus { background: var(--global-palette-btn-bg-hover) !important; } @media screen and (max-width: 767px) { .page-info-box .kt-blocks-info-box-link-wrap { flex-wrap: wrap; } .page-info-box .kt-infobox-textcontent { margin-top: 20px; } } /** Blog ------------------------------------------------------------------------------ **/ .blog .entry.loop-entry { border: 1px solid #EDEDED; box-shadow: none; } .blog .loop-entry .entry-content-wrap { padding: 20px; } .blog a.post-more-link { color: var(--global-palette1); font-size: 16px; } .blog a.post-more-link .kadence-svg-iconset { display: none; } @media screen and (min-width: 1200px) { .blog .loop-entry .entry-content-wrap { padding: 40px 35px; } } /** Single posts ------------------------------------------------------------------------------ **/ .entry-related .entry-related-inner-content { padding-bottom: 0; } .entry-related h2.entry-related-title { text-align: center; } .entry-related .splide .splide__pagination { display: none; } .entry-related .loop-entry { box-shadow: none; border: 1px solid #EDEDED; } .entry-related .loop-entry .entry-content-wrap { padding: 20px; } .entry-related .entry-related-carousel .entry-summary, .entry-related .entry-related-carousel .entry-footer { display: block; } .entry-related a.post-more-link { color: var(--global-palette1); } .entry-related a.post-more-link .kadence-svg-iconset { display: none; } @media screen and (min-width: 1200px) { .entry-related .loop-entry .entry-content-wrap { padding: 35px; } .entry-related-carousel h3.entry-title { font-size: 22px; } } /** Homepage ------------------------------------------------------------------------------- */ #home-banner .gform_wrapper { max-width: 500px; } #home-logos .wp-block-image { margin-bottom: 0; } @media screen and (min-width: 1024px) { #home-logos { column-gap: 50px; } } @media screen and (min-width: 1200px) { #home-logos { column-gap: 100px; } } /** Home page services ladder section --------------------------------------------------------------------------------- **/ .home-service-ladder-img-wrap > div { background-size: 100% !important; } @media screen and (min-width: 1025px) { .home-service-ladder-img-wrap { margin-left: -20px; margin-right: -20px; } } /** SaaS Accountants pages --------------------------------------------------------------------------------- **/ #saas-accts-related-pages .kt-inside-inner-col { max-width: 450px; } /** Software Leaders Survey * ------------------------------------------------------------------------------- **/ .major-obstacles-graph iframe { width: 100%; } /** Products page * -------------------------------------------------------------------------------- **/ .products-seis-eis.page-info-box .kt-blocks-info-box-media-container { max-width: 295px; width: 100%; } .products-seis-eis.page-info-box .kt-blocks-info-box-media-container .kadence-info-box-image-inner-intrisic-container .kadence-info-box-image-intrisic { margin-left: auto; margin-right: auto; padding-bottom: 100% !important; } /** Gold Champion Xero Accountant * --------------------------------------------------------------------------------- **/ .gold-xero-infobox .kt-blocks-info-box-learnmore::after { content: url(/wp-content/uploads/2022/05/discover-more-arrow.svg); display: inline-block; vertical-align: middle; margin-left: 10px; } /** Writing A Business Plan **/ .entry-content.single-content .writing-bsns-plan-list { padding-left: 0; } .writing-bsns-plan-list li:not(:last-child) { margin-bottom: 15px; } .entry-content.single-content .writing-bsns-plan-list li { list-style: none; padding-left: 1em; } .entry-content.single-content .writing-bsns-plan-list > li::before { content: "\2022"; color: var(--global-palette1); font-size: 1.2em; font-weight: 700; display: inline-block; width: 1em; margin-left: -1em; } /** Accountants in London page * --------------------------------------------------------------------------------- **/ ul.help-iconbox-list { margin-left: 120px; padding-top: 25px; border-top: 1px solid #E0E0E0; } .how-we-help-rows ul li::before { content: "\2022"; color: var(--global-palette1); font-size: 1.2em; font-weight: 700; display: inline-block; width: 1em; margin-left: -1em; } /** Launchpad Icon boxes * ----------------------------------------------------------------------------------- **/ .launchpad-iconbox .kt-blocks-info-box-link-wrap { min-width: 85px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .launchpad-iconbox .kadence-info-box-image-intrisic { min-height: 90px; } .launchpad-iconbox .kadence-info-box-image-intrisic .kadence-info-box-image-inner-intrisic { height: inherit; display: flex; align-items: center; justify-content: center; min-height: 90px; } .launchpad-iconbox .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media { display: block; } .launchpad-iconbox .kt-blocks-info-box-link-wrap .kt-infobox-textcontent { margin-top: 5px; } .launchpad-iconbox .kt-infobox-textcontent:not(.iconbox-title-wrapper) { display: none; } .launchpad-iconbox .kt-blocks-info-box-link-wrap .kt-blocks-info-box-title { line-height: 1.2; } /** **/ form.post-password-form { max-width: 650px; background: #4C6086 url(/wp-content/uploads/2022/07/password-form-bg.png) no-repeat left top / 100%; padding: 30px 20px; box-shadow: 0px 32px 91px 13px rgba(0, 0, 0, 0.04); border-radius: 4px; text-align: center; } form.post-password-form p { margin-bottom: 40px; } form.post-password-form p, form.post-password-form .forgot-password { color: var(--global-palette9); font-size: 16px; font-weight: 400; } form.post-password-form p label, form.post-password-form input[type="password"] { display: block; text-align: left; width: 100%; } form.post-password-form input[type="password"] { margin-top: 10px; } form.post-password-form input[type="submit"] { margin-top: 40px; min-width: 250px; } form.post-password-form .forgot-password { text-align: center; } form.post-password-form a:hover, form.post-password-form a:focus { color: var(--global-palette9); } @media screen and (min-width: 1024px) { form.post-password-form { padding: 50px 50px 80px; } } @media screen and (min-width: 1280px) { form.post-password-form { padding: 80px 80px 110px; } } /** Software R&D Tax page * ------------------------------------------------------------- **/ #rd-credit-eligibility-test .kt-blocks-accordion-header { width: 225px; justify-content: center; margin-left: auto; margin-right: auto; } #rd-credits-tabs ul.kt-tabs-title-list { max-width: 780px; margin-left: auto; margin-right: auto; } #rd-credits-tabs .kt-tab-title { width: 160px; justify-content: center; text-align: center; } #rd-credits-tabs .kt-accordion-header-wrap .kt-blocks-accordion-header { max-width: 495px; margin-left: auto; margin-right: auto; } @media screen and (min-width: 768px) { #rd-credits-tabs > div > ul > li.kt-title-item { margin-left: 20px; margin-right: 20px; } #rd-credits-tabs > div > ul > li > .kt-tab-title { width: 270px; } #rd-credits-tabs .rd-credits-inner-tabs > div > ul.kt-tabs-title-list { justify-content: space-between; } } @media screen and (min-width: 992px) { #rd-credits-tabs > div > ul > li > .kt-tab-title { width: 335px; } } @media screen and (max-width: 767px) and (orientation: portrait) { #rd-credits-tabs .kt-tab-title { width: 150px; margin-bottom: 10px; } } /** Homepage hero - mobile + tablet (Figma 416:2) Extended to 1024px: on tablet the hero is still two columns, so the text column is only 390px wide while the button row needs 391px. With flex-wrap:nowrap the button was the only shrinkable child and collapsed to 93x112 - the same crush this block fixes on mobile. ------------------------------------------------------------------------------------ **/ @media (max-width: 1024px) { /* Figma 412:1011 - the award badges sit at the very top of the hero, left aligned above the heading. In the markup they live inside .arrow-button-banner, after the paragraph, so they are lifted into place rather than reordered - reordering would mean rebuilding the page. */ .inner-column-1 > .kt-inside-inner-col { position: relative; padding-top: 76px; } .arrow-button-banner > .wp-block-kadence-image:not(.banner-arrow) { position: absolute; top: 0; margin: 0; } .banner-arrow + .wp-block-kadence-image { left: 0; } .banner-arrow + .wp-block-kadence-image + .wp-block-kadence-image { left: 74px; } .arrow-button-banner > .wp-block-kadence-image:not(.banner-arrow) img { width: 58px; height: auto; } /* Figma 412:1001 / 413:1629 - a fixed-width dark button with lime text, and the decorative swirl beside it rather than beneath. */ .wp-block-group.arrow-button-banner { display: flex; align-items: center; gap: 10px; /* 0, not 16: the 105px arrow makes the band 123px tall, so align-items:center already offsets the button ~17px from the band top - which is the gap. */ margin-top: 0 !important; } .arrow-button-banner .kb-buttons-wrap { flex: 0 0 auto; width: auto; } .arrow-button-banner .kb-button { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 15px 28px; background: #201640; border-color: #201640; color: #d7eb0c; border-radius: 3px; white-space: nowrap; } .banner-arrow { flex: 0 0 auto; width: 110px; margin: 0; } .banner-arrow img { display: block; width: 100%; height: auto; } /* Figma 412:999 and 412:1000 */ .inner-column-1 .kt-inside-inner-col h1 { font-size: 34px; line-height: 40.8px; } /* The theme sets .entry-content p { margin-bottom: 50px }, which with the band margin left 83px before the CTA. Figma 412:1000 to 412:1001 is 16px. */ .inner-column-1 .kt-inside-inner-col > p { margin-bottom: 0; font-size: 18px; line-height: 30px; } .inner-column-2 .wp-block-kadence-image figure.alignright { margin-left: auto; margin-right: auto; } } /** Resources page ------------------------------------------------------------------------------------ **/ .resources-page-info-box { } /** Header Navigation - Dropdown Menu - Products **/ .header-navigation .header-menu-container ul #menu-item-1609 ul li.menu-item > a { width: 270px; } /* ========================================================================== Mobile navigation drawer - Figma 423:2190 Panel background, close-icon colour, link colours, typography and row pitch, and both action buttons are all set on the Kadence blocks themselves: the off-canvas block in header CPT 15031, and the links in navigation CPT 17342. Only the three things Kadence exposes no setting for live here. Row pitch is padding-driven on purpose - the theme sets line-height:32px on nav links, so top level is 32+10+10=52px and sub items are 32+3+3=38px. ========================================================================== */ /* 1. The top bar. Kadence off-canvas ships a close button and nothing else, so the logo row is drawn on the wrapper. */ .wp-block-kadence-off-canvas .kb-off-canvas-inner-wrap::before { background: url("/wp-content/uploads/2025/11/ascendant-logo-highlight.png") no-repeat left center / auto 26px; border-bottom: 1px solid #2d244b; content: ""; display: block; height: 60px; margin: 0 16px; } /* The inner column is sized to the viewport, so it has to give the bar its 60px back or the panel scrolls by exactly that much. */ .wp-block-kadence-off-canvas .kb-off-canvas-inner { height: calc(100% - 60px); } .wp-block-kadence-off-canvas .kb-off-canvas-close { right: 10px; top: 10px; } /* 2. The phone sits in that bar next to the close icon, not in the button stack at the bottom where the header markup puts it. */ .wp-block-kadence-off-canvas .asc-drawer-actions > a[href^="tel:"] { background: none; border: 0; color: #d7eb0c; min-height: 0; padding: 0; position: absolute; right: 60px; top: 19px; width: 24px; z-index: 2; } .wp-block-kadence-off-canvas .asc-drawer-actions > a[href^="tel:"] svg { height: 22px; width: 22px; } /* 3. Hairline under every top-level item. The li already spans the panel 16px gutters, so a plain border lands on the inset Figma shows. */ .wp-block-kadence-off-canvas .kb-navigation > .wp-block-kadence-navigation-link { border-bottom: 1px solid #2b2249; } /* The two remaining buttons stack full width under the menu. */ .wp-block-kadence-off-canvas .asc-drawer-actions { flex-direction: column; gap: 10px; margin-top: 20px; } /* The off-canvas overlay is a fixed, z-index:100000 layer that Kadence parks ~1.6 million pixels off-screen and then flips to display:none. Tearing that layer down above the sticky header leaves the header region unrepainted on mobile GPUs: the trigger stays present, styled and hit-testable, but is not painted until the next tap invalidates it - which is why it came back only after tapping somewhere. Its own compositing layer keeps it painted. */ .wp-block-kadence-off-canvas-trigger { backface-visibility: hidden; /* Chrome flattens a lone translateZ(0) to a 2D identity matrix and may skip promotion, so ask for the layer explicitly as well. */ transform: translateZ(0); will-change: transform; } /* ========================================================================== Locations megamenu responsive header The expanded desktop navigation no longer fits once Locations is added. Revert by removing this block to restore Kadence's default breakpoint. ========================================================================== */ .c-locations-megamenu .wp-block-kadence-navigation-link { --kb-nav-link-media-container-padding-right: 16px; --kb-nav-top-link-description-padding-top: 4px; } .c-locations-megamenu .kb-nav-link-content { color: #201640; padding: 9px 0; } .c-locations-megamenu .kb-nav-label-content { color: #201640; font-size: 16px; font-weight: 600; line-height: 20px; } .c-locations-megamenu .kb-nav-label-description { color: #718096; font-size: 13px; font-weight: 400; line-height: 19.5px; } @media (min-width: 1025px) and (max-width: 1439px) { .wp-block-kadence-header15031-cpt-id .wp-block-kadence-header-desktop { display: none; } .wp-block-kadence-header15031-cpt-id .wp-block-kadence-header-tablet { display: block; } } @media (min-width: 1440px) and (max-width: 1599px) { .wp-block-kadence-header15031-cpt-id .wp-block-kadence-navigation15035-cpt-id > nav > .menu-container > .kb-navigation { column-gap: 3px; } } /** Homepage banner - Figma 600:2 ("updated homepage bannner 12") Desktop: text column 575 / visual 734 / gutter 81 at 1920, tops aligned. Below 1024px the columns stack and the award badges lead, as in the mobile design (Figma 412:975). Scoped to the hero row's anchor (#home-banner) so it outranks Kadence's per-block CSS and the older hero block above; the Trusted by row is matched by its Kadence block ID. ------------------------------------------------------------------------------------ **/ #home-banner { background-position: right top 51px; background-size: auto calc(100% - 51px); } #home-banner > .kt-row-column-wrap { grid-template-columns: minmax(0, 575fr) minmax(0, 734fr); column-gap: clamp(40px, 4.2vw, 81px); align-items: start; padding-top: clamp(48px, 5vw, 97px); padding-bottom: clamp(32px, 2.7vw, 52px); } #home-banner > .kt-row-column-wrap > .wp-block-kadence-column { align-self: start; } #home-banner .kt-inside-inner-col { justify-content: flex-start; } /* The older hero block pads this for badges it lifted to the top (<=1024px). */ #home-banner .inner-column-1 > .kt-inside-inner-col { padding-top: 0; } #home-banner .home-banner-eyebrow { margin: 0 0 11px; color: #7f5aff; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.8; text-transform: uppercase; } /* 9.6em keeps Figma's three-line break at every size. */ #home-banner h1 { max-width: 9.6em; margin: 0 0 21px; font-size: clamp(40px, 4.2vw, 54px); font-weight: 600; line-height: 1; } #home-banner .inner-column-1 .kt-inside-inner-col > p:not(.home-banner-eyebrow) { max-width: 575px; margin: 0 0 37px; font-size: 18px; line-height: 38px; } /* Kadence gives every group a 32px bottom margin, and the Customizer CSS pulls this row up 80px with !important, so the top answers in kind. */ #home-banner .arrow-button-banner { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 21px; margin-top: 0 !important; margin-bottom: 0; } #home-banner .arrow-button-banner .kb-buttons-wrap { flex: 0 0 auto; width: auto; margin: 0; } #home-banner .arrow-button-banner .kb-button { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 7px 34px; border: 0; border-radius: 3px; background: #201640; color: #d7eb0c; font-size: 16px; font-weight: 600; line-height: 30px; white-space: nowrap; } #home-banner .arrow-button-banner .kb-button:hover, #home-banner .arrow-button-banner .kb-button:focus-visible { background: #7f5aff; color: #fff; } /* Figma 600:128 - the swirl rises into the paragraph gap and hangs below the button; the negative margins keep the row exactly button height. */ #home-banner .banner-arrow { flex: 0 0 auto; width: 184px; margin: -94px 0 -35px; pointer-events: none; } #home-banner .banner-arrow img { display: block; width: 100%; height: auto; } #home-banner .home-banner-badges { display: flex; flex-wrap: nowrap; gap: 35px; margin: 35px 0 0; } /* Badges shrink to fit when the row is wider than the text column. */ #home-banner .home-banner-badges > .wp-block-kadence-image { flex: 0 1 90px; min-width: 0; max-width: 90px; margin: 0; } #home-banner .home-banner-badges img { display: block; width: 100%; height: auto; } #home-banner .inner-column-2 .wp-block-kadence-image { margin: 0; } #home-banner .inner-column-2 figure { float: none; max-width: 734px; margin: 0 0 0 auto; } #home-banner .inner-column-2 img { display: block; width: 100%; height: auto; } /* Trusted by - on white, straight under the hero (Figma 600:99 / 600:52). */ .kb-row-layout-wrap.kb-row-layout-id29_63563f-5b > .kt-row-column-wrap { min-height: 0; padding-top: 0; padding-bottom: 20px; } .kb-row-layout-wrap.kb-row-layout-id29_63563f-5b .kt-adv-heading29_7ce997-8f { margin: 0 0 18px; font-size: 18px; line-height: 30px; } .kb-row-layout-wrap.kb-row-layout-id29_63563f-5b .row-of-logos { align-items: center; gap: 24px; } @media (max-width: 1023px) { #home-banner { background-image: none; } #home-banner > .kt-row-column-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-top: 32px; padding-bottom: 40px; } /* Stacked: same order as desktop (intro, button, badges), with the swirl centred beside the button rather than rising above it. */ #home-banner .home-banner-badges { gap: 16px; margin: 24px 0 0; } #home-banner .home-banner-badges > .wp-block-kadence-image { flex-basis: 64px; max-width: 64px; } #home-banner .arrow-button-banner { align-items: center; gap: 24px; } /* Overflows the row 16px each way, so the row stays close to button height. */ #home-banner .banner-arrow { width: 107px; margin: -16px 0; } #home-banner h1 { font-size: 44px; line-height: 1.1; } #home-banner .inner-column-2 figure { margin: 0; } .kb-row-layout-wrap.kb-row-layout-id29_63563f-5b > .kt-row-column-wrap { padding-bottom: 40px; } } @media (max-width: 767px) { #home-banner > .kt-row-column-wrap { row-gap: 28px; padding-top: 24px; } #home-banner .home-banner-badges > .wp-block-kadence-image { flex-basis: 58px; max-width: 58px; } #home-banner h1 { margin-bottom: 12px; font-size: 34px; line-height: 1.2; } #home-banner .inner-column-1 .kt-inside-inner-col > p:not(.home-banner-eyebrow) { margin-bottom: 16px; line-height: 30px; } /* Figma 412:1001 - the taller mobile button. */ #home-banner .arrow-button-banner .kb-button { min-height: 57px; padding: 15px 28px; } } /* 360px phones: one size down keeps the three-line heading. */ @media (max-width: 380px) { #home-banner h1 { font-size: 31px; } } /** Professional Services hub hero (page 17976) - Figma group 27:38 This page reuses the Tech hub hero pattern from the Ascendant Blocks plugin. These rules restyle only this page's visual (badge, photo corners, the three cards), so the Tech & SaaS hub is untouched. Card positions above 1200px follow Figma; at 1200px and below the plugin's own re-anchoring still applies. ------------------------------------------------------------------------------------ **/ body.page-id-17976 .asc-tech-hero .asc-tech-hero-photo, body.page-id-17976 .asc-tech-hero .asc-tech-hero-photo img { border-radius: 40px 50px 10px 10px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-photo { box-shadow: 5px 11px 6px #2e1f5c; } /* Briefcase badge (Figma 27:71) in place of the SaaS cloud. */ body.page-id-17976 .asc-tech-hero .asc-tech-hero-media::after { background: #7f5aff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 32' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='9.5' width='28.8' height='18.3' rx='3'/%3E%3Cpath d='M11.8 9.4V6.6a2.4 2.4 0 0 1 2.4-2.4h5.7a2.4 2.4 0 0 1 2.4 2.4v2.8M2.6 17.3h28.8'/%3E%3C/svg%3E") center / 45% auto no-repeat; border-radius: 50%; box-shadow: 0 10px 26px rgb(0 0 0 / 30%); } /* Gross margin card (Figma 27:90). */ body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr { background: #7f5aff; border-radius: 10.5px; box-shadow: 0 14px 35px rgb(0 0 0 / 30%); padding: 16px 22px 14px 29px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr .asc-tech-hero-card-label { color: #e6ddff; font-size: 9.6px; font-weight: 600; letter-spacing: 0.8px; line-height: 17px; text-transform: uppercase; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr .asc-tech-hero-card-value { font-size: 29.7px; line-height: 33px; margin-top: 5px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr .asc-tech-hero-card-meta { font-size: 11.4px; font-weight: 600; line-height: 20.5px; margin-top: 5px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr::after { height: 19px; margin-top: 9px; } /* Recommended action card (Figma 27:76). Its title box runs almost to the card's right edge, which keeps "Book a CFO review" on one line. */ body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--action { border-radius: 14px; box-shadow: 0 18px 40px rgb(8 4 24 / 30%); padding-right: 4px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--action .asc-tech-hero-card-label { color: #3a4400; font-size: 9px; letter-spacing: 0.4px; line-height: 16px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--action .asc-tech-hero-card-value { font-size: 17px; letter-spacing: -0.2px; line-height: 19.5px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--action .asc-tech-hero-card-meta { font-size: 12px; font-weight: 700; line-height: 21.6px; } /* Month-end close pill (Figma 27:82), wide enough for "4 days from 4 weeks". */ body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--pill { border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / 30%); gap: 10px; padding: 10px 14px; width: auto; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--pill .asc-tech-hero-card-label { color: #8b85a0; font-size: 9px; letter-spacing: 0.7px; line-height: 16px; text-transform: uppercase; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--pill .asc-tech-hero-card-value { font-size: 15px; line-height: 27px; } /* Figma positions, relative to the photo, where the plugin keeps its desktop layout. */ @media (min-width: 1201px) { body.page-id-17976 .asc-tech-hero .asc-tech-hero-media::after { height: 76px; left: 29px; top: -21px; width: 76px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr { left: 409px; top: -34px; width: 245px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--action { width: 181px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--pill { left: 458px; } } @media (max-width: 1200px) { body.page-id-17976 .asc-tech-hero .asc-tech-hero-media::after { height: 62px; width: 62px; } } /** Professional Services hub hero (page 17976) - tablet and phone The plugin hides the whole hero visual below 768px and scales the cards to 78% below 901px. On this page the visual stays on phones, and the cards are sized for the narrower photo instead of scaled, so the longer copy stays readable. ------------------------------------------------------------------------------------ **/ @media (max-width: 1200px) { body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr { padding: 12px 16px 12px 20px; width: auto; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr .asc-tech-hero-card-label, body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr .asc-tech-hero-card-meta { white-space: nowrap; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr .asc-tech-hero-card-label { font-size: 8.5px; line-height: 14px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr .asc-tech-hero-card-value { font-size: 24px; line-height: 28px; margin-top: 3px; white-space: nowrap; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr .asc-tech-hero-card-meta { font-size: 10.5px; line-height: 17px; margin-top: 3px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr::after { height: 15px; margin-top: 6px; } } @media (max-width: 900px) { body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr, body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--action, body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--pill { transform: none; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr { padding: 10px 14px 10px 16px; right: -4px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr .asc-tech-hero-card-label { font-size: 8px; line-height: 13px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr .asc-tech-hero-card-value { font-size: 20px; line-height: 24px; margin-top: 2px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr .asc-tech-hero-card-meta { font-size: 10px; line-height: 16px; margin-top: 2px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--arr::after { height: 12px; margin-top: 4px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--action { padding: 10px 4px 10px 12px; width: 144px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--action .asc-tech-hero-card-label { font-size: 8px; line-height: 13px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--action .asc-tech-hero-card-value { font-size: 14px; line-height: 17px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--action .asc-tech-hero-card-meta { font-size: 10px; line-height: 16px; margin-top: 6px; } /* Sits above the action card, so the two never meet on 360px phones. */ body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--pill { bottom: 64px; gap: 8px; padding: 8px 10px; right: 8px; top: auto; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--pill::before { height: 16px; width: 18px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--pill .asc-tech-hero-card-label { font-size: 8px; line-height: 12px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-card--pill .asc-tech-hero-card-value { font-size: 13px; line-height: 20px; } } @media (max-width: 767px) { body.page-id-17976 .asc-tech-hero .asc-tech-hero-media { display: block; margin: 40px 0 28px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-media::after { height: 52px; left: 12px; top: -16px; width: 52px; } body.page-id-17976 .asc-tech-hero .asc-tech-hero-photo, body.page-id-17976 .asc-tech-hero .asc-tech-hero-photo img { border-radius: 24px 30px 8px 8px; } } /** Professional Services hub hero (page 17976) - logo strip, Figma 67:408 (Hero 3) Six white logos (media 18107-18112, 2x PNGs) replace the SaaS wordmarks. Each shows at its Figma frame size on a 1166px strip, 136px apart, and aspect-ratio holds its height before the file loads. Phones keep the plugin grid and scale the set down. */ body.page-id-17976 .asc-tech-hero .asc-tech-logos { margin-top: 29px; max-width: 1166px; } body.page-id-17976 .asc-tech-hero .asc-ps-logo { line-height: 0; margin: 0; } body.page-id-17976 .asc-tech-hero .asc-ps-logo img { aspect-ratio: var(--asc-ps-logo-ratio); display: block; height: auto; max-width: 100%; width: calc(var(--asc-ps-logo-width) * var(--asc-ps-logo-scale, 1)); } body.page-id-17976 .asc-tech-hero .asc-ps-logo--netsuite { --asc-ps-logo-ratio: 1; --asc-ps-logo-width: 45px; } body.page-id-17976 .asc-tech-hero .asc-ps-logo--salesforce { --asc-ps-logo-ratio: 136 / 96; --asc-ps-logo-width: 68px; } body.page-id-17976 .asc-tech-hero .asc-ps-logo--xero { --asc-ps-logo-ratio: 1; --asc-ps-logo-width: 45px; } body.page-id-17976 .asc-tech-hero .asc-ps-logo--workflowmax { --asc-ps-logo-ratio: 233 / 78; --asc-ps-logo-width: 116.5px; } body.page-id-17976 .asc-tech-hero .asc-ps-logo--quickbooks { --asc-ps-logo-ratio: 192 / 49; --asc-ps-logo-width: 96px; } body.page-id-17976 .asc-tech-hero .asc-ps-logo--hubspot { --asc-ps-logo-ratio: 233 / 68; --asc-ps-logo-width: 116.5px; } @media (max-width: 1200px) { body.page-id-17976 .asc-tech-hero .asc-tech-logos { margin-top: 24px; } } @media (max-width: 767px) { body.page-id-17976 .asc-tech-hero .asc-tech-logos { margin-top: 32px; } body.page-id-17976 .asc-tech-hero .asc-ps-logo img { --asc-ps-logo-scale: 0.72; margin-inline: auto; } } /* >>> cw-context client tokens — Ascendant values (clients/ascendant/design/tokens.css); the map below reads them. Safe to delete. */ /* Ascendant — role token layer The ONLY file in this delivery containing literal hex values. Every style in panels.css references these role names, never the hex. Two layers: 1. Brand palette (private) — the client's colours, named as the client names them. 2. Role tokens (public) — what a panel is allowed to use. The test applied to every role name in layer 2: could another client fill this in? "The raised surface" yes. "Mint" no. So no brand words appear in layer 2. THREE CATEGORIES, not two. Surface-invariant roles hold one value everywhere. Surface-dependent roles are re-pointed by a ground, never patched per element (see the ground blocks at the foot of this file). Graphic values — chart lines, illustration fills, the coral — are NOT in this contract at all and do not appear here; they belong to whoever owns the artwork. THIS ROUND, three changes and nothing else. Every one was given by the designer; none is invented. Anything I wanted and could not find is listed in PANELS.md §8 rather than added here. 1. The layout block is replaced by the agreed measures (see the foot). 2. --lh-relaxed 1.65 -> 1.78, the agreed body leading. 3. Nothing added to the type ladder: 52 / 38 / 32 / 19 is already what --t-hero / --t-section / --t-h3 / --t-card-title resolve to at their maxima, so the four agreed steps were here all along. AWAITING CLIENT APPROVAL — one value, listed so it stays visible rather than quietly becoming a brand colour by use: --_violet-deep #6B52D9 used by --surface-accent, --fg-eyebrow, --fg-link, and (new this round) --action-on-dark-bg. */ :root { /* --------------------------------------------------------------- 1. Brand palette — private. Do not reference outside this file. --------------------------------------------------------------- */ --_ink: #201640; --_ink-raised: #2E2260; --_ink-deep: #341D7D; /* hero gradient stop, per the brand guide */ --_ink-60: #3C2B70; /* referenced 16x across the two approved pages */ --_lime: #D7EB0C; --_lime-deep: #D0DF3D; /* the highlighter swipe */ --_violet: #7F5AFF; --_violet-deep: #6B52D9; /* AWAITING APPROVAL — see head of file */ --_violet-light: #9F86FF; --_lavender-pale: #F2F1FF; --_lavender: #EDEEFF; --_grey-pale: #F6F5F9; --_hairline: #EAE4FF; --_hairline-cool: #E9E5F6; --_body: #5B5470; --_body-muted: #75699F; /* the approved pages' body copy on light grounds */ --_on-dark-soft: #D7CCFF; /* dual-role: chosen here as TEXT on dark ground (11.18:1 on --surface-inverse). The same value is the brand's card-plate surface; this file never uses it as a ground, so the pairing the checker flags does not occur. */ --_on-accent-soft: #EFE9FF; --_white: #FFFFFF; /* dual-role: the page ground AND type on dark. Both are correct and both are used below. */ /* --------------------------------------------------------------- 2. Role tokens — panels use only these. --------------------------------------------------------------- */ /* Text — surface-invariant unless re-pointed by a ground block */ --fg-strong: var(--_ink); --fg-medium: var(--_body); --fg-secondary: var(--_ink-60); /* NEW — see SECONDARY note */ --fg-muted: var(--_body-muted); /* see MUTED note */ --fg-on-dark: var(--_white); --fg-on-dark-soft: var(--_on-dark-soft); /* PROVISIONAL */ --fg-on-accent: var(--_white); /* PROVISIONAL */ --fg-on-accent-soft: var(--_on-accent-soft); /* PROVISIONAL */ --fg-eyebrow: var(--_violet-deep); /* PROVISIONAL */ --fg-emphasis-on-dark: var(--_lime); /* PROVISIONAL */ --fg-link: var(--_violet-deep); --fg-link-on-dark: var(--_violet-light); /* PROVISIONAL — 4.53:1 at the ink gradient's lighter stop. Passes, barely. See the GROUND IS A GRADIENT note. */ /* SECONDARY — new role, and it is a naming fix rather than a new colour. The brand primitive --color-ink-60 (#3C2B70) is referenced 16 times across the two approved pages with no role name covering it, so every author reached past the contract for it. It is now --fg-secondary: 11.83:1 on the page surface, 10.90:1 on sunken, 10.59:1 on raised. Passes on every ground it is allowed on. MUTED — held at the approved value #75699F rather than re-pointed, because that is what the approved design uses for body copy and it passes on both grounds this page puts it on: 4.91:1 on --surface-page, 4.52:1 on --surface-sunken. It FAILS on --surface-raised at 4.39:1, so the raised ground block below re-points the role for its whole subtree rather than patching the elements that happen to use it. FLAGGED, because 4.52:1 is one rounding away from a bug: a text role whose contrast depends on which surface it lands on is a broken role, not a broken usage. Either #75699F moves until it clears every ground it is allowed on, or the role splits so the name carries the constraint. The ground block is a containment measure, not a fix. */ /* Surfaces */ --surface-page: var(--_white); --surface-raised: var(--_lavender-pale); --surface-sunken: var(--_grey-pale); --surface-inverse: var(--_ink); --surface-inverse-raised: var(--_ink-raised); /* PROVISIONAL */ --surface-accent: var(--_violet-deep); /* PROVISIONAL + awaiting approval */ --surface-marker: var(--_lavender); /* Badge — lime ground with ink type. The brand's tag/badge, used for the situation pills and the numbered promise discs. 12.62:1. */ --surface-badge: var(--_lime); --fg-on-badge: var(--_ink); /* Ink band gradient — one token, not a family. Used on every ink ground so a dark band is never flat. GROUND IS A GRADIENT, and it changes what the contrast table means. The effective background runs from #201640 at the top to #341D7D at the bottom of the box, so every pairing on an ink ground must be quoted against the LIGHTER stop — that is the surface the text at the foot of the box actually lands on. Ratios drop 2 to 4 points there. Nothing fails, but --fg-link-on-dark lands at 4.53:1, and a ratio quoted against #201640 alone is not a measurement. Full table in PANELS.md §7. */ --gradient-hero: linear-gradient(180deg, var(--_ink) 4%, var(--_ink-deep) 100%); /* Action fills */ --action-primary-bg: var(--_ink); --action-primary-fg: var(--_lime); --action-on-dark-bg: var(--_violet-deep); /* CHANGED this round — was --_violet #7F5AFF, which gave white-on-violet 4.37:1 and failed flat. #6B52D9 gives 5.47:1 and the hero reads near-identically. */ --action-on-dark-fg: var(--_white); --action-on-accent-bg: var(--_lime); /* PROVISIONAL */ --action-on-accent-fg: var(--_ink); /* PROVISIONAL */ --action-ghost-border: var(--_violet); /* the approved hero's outline button is 1.5px #7F5AFF with a #9F86FF label. A border is not text, so the mid-tone is legitimate here — which is exactly the role #7F5AFF keeps after losing the button fill. */ --action-ghost-fg: var(--_violet-light); /* Borders */ --border-faint: var(--_hairline); --border-card: var(--_hairline-cool); --border-soft: var(--_lavender); --border-on-dark: rgba(255, 255, 255, .14); /* PROVISIONAL */ --border-accent: var(--_lime); /* PROVISIONAL — the 2px lime rule over each story column */ --border-accent-on-dark: rgba(215, 235, 12, .5); /* PROVISIONAL — the rules between the gripe rows */ /* Hairline thickness — 1px, a DELIBERATE EXCEPTION to the no-pixels rule and one that belongs in the brief. A hairline is not a layout width: expressed in rem it thickens under reader magnification, which is the opposite of what a hairline is for. Same reasoning the brief applies to --radius-org. */ --hairline: 1px; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-pill: 999px; --radius-xs: 3px; /* the brand's CTA radius. px for the same reason as --hairline: a 3px corner is a graphic detail, not a layout width, and must not scale with text. */ --radius-org: 100px 10px 10px 10px; /* RESTORED. The named signature in the brand guide — every cropped image carries it. px because a corner radius is not a layout width. */ /* Shadow — lavender-tinted, never neutral grey. The brand rule, stated plainly in the guide. --shadow-card-tinted is the DEFAULT card shadow. */ --shadow-card-tinted: 0 2px 4px 0 #39296D; /* RESTORED */ --shadow-card-sm: 0 2px 4px rgba(57, 41, 109, .12); --shadow-card-md: 0 8px 24px rgba(57, 41, 109, .14); --shadow-card-lg: 0 12px 32px rgba(57, 41, 109, .2); --shadow-image: 5px 9px 7px 0 rgba(51, 36, 98, .55); /* Type sizes — fluid, so magnification and viewport both move them */ --t-hero: clamp(34px, 22.4px + 2.6vw, 52px); --t-section: clamp(28px, 21.6px + 1.4vw, 38px); --t-h3: clamp(24px, 20px + 0.9vw, 32px); --t-card-title: 19px; --t-lead: clamp(17px, 16px + 0.35vw, 19px); --t-body: 16px; --t-small: 15px; --t-eyebrow: 13px; /* PROVISIONAL */ --t-stat: clamp(32px, 24px + 1.8vw, 44px); /* PROVISIONAL */ --t-label: 15px; /* the uppercase column labels on a story */ --t-tag: 12px; /* the outlined chip and the status pills */ /* Line height */ --lh-tight: 1.12; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.78; /* AGREED. Body copy is 16px / 1.78. Was 1.65. */ /* Weights */ --fw-regular: 400; --fw-semi: 600; --fw-bold: 700; /* Spacing — rem throughout, so it scales with reader text size */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 56px; --space-11: 72px; --space-12: 96px; /* --------------------------------------------------------------- GRAPHIC — the third category, and NOT part of the colour contract. These are the colour of a line on a chart or the shape of a glyph, not a brand decision, and no client fills them in. They live here only because the stylesheet may not carry a literal value; they are explicitly outside the role set and are not subject to the contrast rule (nothing below renders as text). --------------------------------------------------------------- */ --graphic-swipe: var(--_lime-deep); /* the highlighter behind a headline. NOT used on this page — the approved audit hero sets one word in lime (12.62:1 on the ink ground) rather than carrying a swipe. IT IS USED ON THE ARTICLE PAGE, on a span inside the heading, where the swipe is the light-ground equivalent of that move. Ink on it measures 10.90:1, so it carries text — which means this value does a ROLE's job from inside the graphic category. It wants promoting to --marker-swipe. Flagged in PANELS.md §8, not renamed here. */ /* Status tones — graphic, and the only place the page needs a green/amber/red family. They appear ONLY inside the preview-only hero status card, which is plugin-generated, so they are not panel work. Ink type sits on each ground: on green 12.13:1, on amber 11.69:1, on red 10.03:1. If the status card ever becomes a real panel this has to become a role family — see PANELS.md. */ --graphic-ok-bg: #B9E8C8; --graphic-ok-dot: #147A45; --graphic-warn-bg: #F0D9A8; --graphic-warn-dot: #8A5A00; --graphic-risk-bg: #F3BDBA; --graphic-risk-dot: #B3253F; --mask-chevron-down: url('data:image/svg+xml;utf8,'); /* --------------------------------------------------------------- LAYOUT — the agreed measures. Every one was measured off the live site or chosen by the designer. None is mine to change, and none is derived from another. Expressed in rem at the 16px root, so each resolves to EXACTLY the agreed pixel value — 64.0625rem x 16 = 1025px — while still scaling under reader magnification rather than freezing. Same reasoning this file already applies to spacing. The px value is stated on every line, so the number you agreed is the number you can read here. --measure-content is a MAXIMUM, not a fixed width. On a laptop the column lands near 670px and about 70 characters on its own, which is why there is no second cap anywhere in panels.css. See PANELS.md §3. --------------------------------------------------------------- */ --measure-site: 1800px; /* 1800px — header, nav, footer */ --measure-banner: 1410px; /* 1410px — the hero band. Its text keeps its own width, not the article's. */ --measure-content: 1025px; /* 1025px — WITH a sidebar. Re-pointed to --measure-banner by the body rule at the foot of this file when there is no sidebar. */ --sidebar-w: 315px; /* 315px — the sidebar */ --col-gap: 30px; /* 30px — content to sidebar */ --gutter: var(--space-5); --main-basis: 480px; /* the main column's flex basis — the number below which the pair stacks. Not a width. */ /* Held, not used. Both are the designer's and neither is mine to delete, but no panel references them any more: a panel fills the content column, and the column is the measure. A 60ch cap on a 1025px column is exactly the 621px prose box that made last round read thin. */ --measure-prose: 60ch; --measure-prose-tight: 52ch; } @media (min-width: 48em) { :root { --gutter: var(--space-8); } } /* NO SIDEBAR — hub pages. The content column takes the banner width, per the agreed measures. Set on the body, so one markup tree serves both states and no panel needs to know which page it is on. */ body:not(.has-sidebar) { --measure-content: var(--measure-banner); } /* --------------------------------------------------------------- Ground blocks — the surface-dependent dimension. A ground re-points colour roles for its whole subtree, so a panel never names a surface and moves between grounds unedited. --sunken and --raised are STEPS ON ONE SURFACE: the ground changes, text roles keep their values. --inverse and --accent RE-POINT EVERY COLOUR ROLE. --------------------------------------------------------------- */ .c-ground--sunken { background: var(--surface-sunken); } .c-ground--raised { background: var(--surface-raised); /* --fg-muted fails here at 4.39:1. Re-pointed for the whole subtree so a panel author never has to know about the exception. 6.28:1. */ --fg-muted: var(--fg-medium); } .c-ground--inverse { background: var(--gradient-hero); --fg-strong: var(--fg-on-dark); --fg-medium: var(--fg-on-dark-soft); --fg-secondary: var(--fg-on-dark-soft); --fg-muted: var(--fg-on-dark-soft); --fg-eyebrow: var(--fg-emphasis-on-dark); --fg-link: var(--fg-link-on-dark); --border-faint: var(--border-on-dark); --border-card: var(--border-on-dark); --surface-raised: var(--surface-inverse-raised); --shadow-card-tinted: none; color: var(--fg-on-dark); } /* --page · THE RESET GROUND, and the one the set was missing. A ground re-points colour roles for its whole SUBTREE, which is the right behaviour until a light card is nested inside a dark band — then the card paints itself white and keeps the dark band's white type. The approved page's .c-priority card does exactly that and its heading renders white on white at 1.00:1. Invisible, and invisible in the approved design too. This is not a new colour. Every line below restates the :root value of a role that --inverse or --accent overrides, so nesting a light surface inside a dark one is a class rather than a set of per-element patches. Put it on any element that sets a light background inside an inverted ground. Ink on the page surface is 16.80:1; --fg-muted is 4.91:1. */ .c-ground--page { background: var(--surface-page); --fg-strong: var(--_ink); --fg-medium: var(--_body); --fg-secondary: var(--_ink-60); --fg-muted: var(--_body-muted); --fg-eyebrow: var(--_violet-deep); --fg-link: var(--_violet-deep); --border-faint: var(--_hairline); --border-card: var(--_hairline-cool); color: var(--_ink); } .c-ground--accent { background: var(--surface-accent); --fg-strong: var(--fg-on-accent); --fg-medium: var(--fg-on-accent-soft); --fg-secondary: var(--fg-on-accent-soft); --fg-muted: var(--fg-on-accent-soft); --fg-eyebrow: var(--fg-on-accent-soft); --fg-link: var(--fg-on-accent); --border-faint: var(--border-on-dark); --border-card: var(--border-on-dark); --shadow-card-tinted: none; color: var(--fg-on-accent); } /* <<< cw-context client tokens */ /* >>> cw-context token map — appended as deploy-banner-brand.sh does, safe to delete */ /* ========================================================================== Ascendant — the chassis token map ========================================================================== WHAT THIS IS FOR Two token vocabularies exist and nothing joined them. The chassis plugin is written against `--ds-*`: thirty aliases covering colour, type, space, measure and radius. The approved design is written against `--fg-*`, `--surface-*`, `--space-*`, `--t-*`, and defines no `--ds-*` at all. This file is the join. Every value is a reference to a token the approved design already decided, so nothing here restates a brand decision. WHERE IT BELONGS Not in the plugin. The plugin must not know which client it is serving — that is the whole reason the aliases exist. One of these per site. THE GROUND, CORRECTED An earlier version painted every banner with the ink gradient. That was wrong, and it was one page's treatment generalised to the site: measured on live afterwards, 72 of the 76 banners are a pale grey with ink type. One treatment repeated, not a mix. So light is the default here, and dark is what a page opts into. Both reproduce something the live site already does rather than inventing a third thing. ========================================================================== */ :root { /* -- Colour ---------------------------------------------------------- */ --ds-color-heading: var( --fg-strong ); --ds-color-body: var( --fg-strong ); --ds-color-muted: var( --fg-muted ); --ds-color-border: var( --border-faint ); --ds-color-surface: var( --surface-page ); --ds-color-inverse-bg: var( --surface-inverse ); --ds-color-on-inverse: var( --fg-on-dark ); --ds-color-primary: var( --action-primary-bg ); /* -- Type ------------------------------------------------------------ The approved set has no font-family token: the faces are Kadence's on this site, and inheriting is the honest expression of that. */ --ds-font-heading: inherit; --ds-font-body: inherit; --ds-text-small: var( --t-small ); --ds-text-base: var( --t-body ); --ds-text-large: var( --t-lead ); --ds-text-title: var( --t-section ); --ds-text-display: var( --t-hero ); --ds-weight-regular: var( --fw-regular ); --ds-weight-semibold: var( --fw-semi ); --ds-weight-bold: var( --fw-bold ); --ds-leading-heading: var( --lh-tight ); --ds-leading-body: var( --lh-relaxed ); /* -- Space ------------------------------------------------------------ The chassis names five steps; the approved set has twelve. These are the five the design actually lands on, not an even spread across the scale. */ --ds-space-xs: var( --space-2 ); --ds-space-sm: var( --space-3 ); --ds-space-md: var( --space-5 ); --ds-space-lg: var( --space-7 ); --ds-space-xl: var( --space-9 ); --ds-space-section: var( --space-11 ); /* -- Measure ---------------------------------------------------------- --ds-wide is the banner's own inner maximum: the agreed 1410px band, which is also what live's banner row is set to. */ --ds-wide: var( --measure-banner ); --ds-measure: var( --measure-prose ); /* -- Shape ------------------------------------------------------------ */ --ds-radius-card: var( --radius-md ); --ds-radius-pill: var( --radius-pill ); } /* -------------------------------------------------------------------------- THE DEFAULT GROUND — light Live's banner row is #f0f5f9. The nearest approved token is --surface-sunken at #F6F5F9, six points apart in a pale grey and not distinguishable by eye. The token is used rather than the literal, so that matching live exactly stays a token decision rather than something buried in a client file. -------------------------------------------------------------------------- */ .c-banner { background-color: var( --surface-sunken ); color: var( --fg-strong ); /* Live's banner row is max-width 1410px with padding-inline 1.5rem. The chassis default is 1.25rem, and the difference shows: the brush stroke sits on a ::before that overhangs the text, so at the narrower padding the swipe is clipped by the viewport edge rather than framing the headline. */ padding-inline: var( --space-6 ); } /* -------------------------------------------------------------------------- THE DARK GROUND — what the newer sections already do The ecommerce hub and services heroes went dark and solved the headline there: lime type over the swipe at 30%, not white type over a solid one. Measured against Ascendant's own values: lime on a 30% swipe over ink 5.68:1 passes ink on a solid swipe (light) 12.62:1 passes white on a solid swipe 1.33:1 what this used to do The roles move as a set — ground, text, and the swipe behind the text — because changing a ground without what sits on it is how a heading reaches 1.00:1. PANELS.md §6.3 records that happening once already. -------------------------------------------------------------------------- */ .c-banner--inverse { --ds-color-muted: var( --fg-on-dark-soft ); --ds-color-border: var( --border-on-dark ); background-color: var( --surface-inverse ); background-image: var( --gradient-hero ); } .c-banner--inverse .c-banner__body, .c-banner--inverse .c-banner__breadcrumbs { color: var( --fg-on-dark ); } /* The headline is lime on dark, as the ecommerce hero has it. */ .c-banner--inverse .c-banner__heading { color: var( --graphic-swipe ); } /* And the swipe behind it softens, so the type reads on top of it. */ .c-banner--inverse .c-banner__heading > span.h1-highlight::before { opacity: 0.3; } /* -------------------------------------------------------------------------- THE COLUMNS, AND THE SIZE OF THE ARTWORK The chassis splits a two-column banner 1fr 1fr and caps the image at 100% of its column. Live splits 60/40 and holds the image to 490px inside that. With a 1410px band the difference is not subtle: half of it is ~700px of artwork, and most of these images are SVG — no intrinsic size, so they grow to whatever they are given. That is why the banner ran off the bottom of the screen while live's sat inside its band. Both numbers are read off live rather than chosen: the row is `minmax(0, calc(60% - gap/2))` and the image block is 490px wide. -------------------------------------------------------------------------- */ @media screen and (min-width: 48em) { .c-banner--two-column .c-banner__inner { grid-template-columns: 3fr 2fr; } } /* Live holds the image to 490 wide and 380 TALL, and that second number is what keeps its banner at 470px against our 586px — the whole difference is 116px of artwork. Live gets there with object-fit: fill on a 490x490 file, which squashes a square image by 22%. That is reproduced here only as far as the height: capping max-height with height:auto scales it to 380x380 instead, so the band matches and the artwork is not distorted. It renders 110px narrower than live's as a result. If the squash is deliberate rather than an oversight, it is one line: width: 490px; height: 380px; object-fit: fill. */ .c-banner__media img { margin-inline-start: auto; max-height: 380px; max-width: 490px; width: auto; } /* -------------------------------------------------------------------------- THE IMAGE, ON A PHONE Live drops the image column entirely below 768px — Kadence's own visibility setting, `.kvs-sm-false { display: none !important }` at max-width 767px. The chassis banner stacks instead and keeps it, so on a phone the artwork takes most of the screen before the reader has seen the headline. Same breakpoint, so the two sites behave alike. It sits here rather than in the plugin because dropping an image on a small screen is a design decision about this banner, not a truth about banners. -------------------------------------------------------------------------- */ @media screen and (max-width: 767px) { .c-banner__media { display: none; } } /* -------------------------------------------------------------------------- THE SECTION MENU, ONE COPY PER PAGE Each page renders its section menu once, in one place (functions.php, ONE SECTION MENU PER PAGE). Where that place is the left sidebar, the page template prints the sidebar before the article, so below 1025px, where Kadence stacks the columns, the menu opens the page. This gives it the look the banner's copy had there: a full-width bar straight under the banner, not a card inset by the sidebar's padding. Layout only; nothing is hidden. Two inherited gaps go with the padding. From 768px the sidebar is padded to line its tree up with the article (the 65px rule near the top of this file, 25px !important in Additional CSS), but there is no column to line up with until 1025px. And the widget's own 1.5em bottom margin: Kadence cancels it for the last widget, but that rule and the one setting it tie on specificity, so stylesheet order decides, and Autoptimize's bundle flips the order: 27px under the bar on the live site, none unoptimised. -------------------------------------------------------------------------- */ @media screen and (max-width: 1024.98px) { .content-container > #secondary:first-child { margin-inline: calc(-1 * var(--global-content-edge-padding, 1.25rem)); padding-block: 0; } .content-container > #secondary:first-child > .sidebar-inner-wrap { padding-top: 0 !important; } .content-container > #secondary:first-child .widget:last-child { margin-block-end: 0; } } /* -------------------------------------------------------------------------- THE BUTTON Read off live with getComputedStyle rather than guessed: ink ground, lime text, a 3px corner and a 1.6px border of its own colour. The chassis ships a 999px pill, which is not this brand's button. Stated for both grounds, because the ink fill works on the pale ground and has to invert on the dark one or it disappears into it. -------------------------------------------------------------------------- */ .c-banner .c-banner__button--primary, .c-banner .c-banner__button--secondary { border: 1.6px solid var( --_ink ); border-radius: var( --radius-xs ); font-size: 0.9rem; font-weight: var( --fw-semi ); padding: 0.36rem 0.9rem; text-transform: none; } .c-banner .c-banner__button--primary { background-color: var( --_ink ); color: var( --graphic-swipe ); } .c-banner--inverse .c-banner__button--primary { background-color: var( --graphic-swipe ); border-color: var( --graphic-swipe ); color: var( --_ink ); } .c-banner .c-banner__button--secondary { background-color: transparent; color: var( --_ink ); } .c-banner--inverse .c-banner__button--secondary { border-color: var( --graphic-swipe ); color: var( --graphic-swipe ); } /* The context menu, in Ascendant's colours. When the quick menu moved from kadence-child into cw-context, every colour became a --cw-context-* variable with a neutral fallback, so the plugin carries no brand. Nothing on this site set them, and the menu fell back: the mobile bar's label went from ink #201640 to 62% of the text colour, #7a748d on white, 4.46:1 and under the 4.5:1 minimum. These are the values the child theme's own copy used, read line by line from kadence-child/css/ascendant-quick-menu.css, so the menu looks as it did. Scoped to the menu itself: the sidebar tree beside it is left alone. A later pass can point these at the role tokens above rather than hex. */ /* The trail, 24 Sep 2026. Lime marked the current item and nothing marked the path to it, so the menu had three ways of saying 'you are here' and none of saying 'you came through here'. Purple, and one treatment — see THE TRAIL in the plugin's context-menu.css. On .cw-context, not .cw-context-menu: that wrapper holds both the card and the tree, so the phone and the desktop agree about where the reader is. Scoped to the card alone, as the block below is, the tree would have kept its own answer and the point would have been lost. */ .cw-context { --cw-context-marker: var(--asc-color-purple, #7f5aff); --cw-context-current-text: var(--asc-color-purple, #7f5aff); --cw-context-trail-wash: linear-gradient( 90deg, var(--asc-color-purple-pale, #f1efff) 0%, rgb(255 255 255 / 0%) 82% ); /* The tree's gutter rule ships off; this turns it on so the trail reads the same on desktop as it does on the phone. */ --cw-context-mark-rule: block; } .cw-context-menu { --cw-context-font: var(--asc-font-body, inter, arial, sans-serif); --cw-context-ink: var(--asc-color-ink, #201640); --cw-context-on-dark: var(--asc-color-white, #ffffff); --cw-context-on-dark-soft: var(--asc-color-purple-soft, #d7ccff); --cw-context-radius: var(--asc-radius-card, 14px); --cw-context-current-fill: transparent; --cw-context-muted: #9b8fd0; --cw-context-count: #cfc2ff; --cw-context-focus: rgb(255 255 255 / 4%); --cw-context-link: #e4dcff; --cw-context-surface: #2a1f52; --cw-context-sunken: rgb(0 0 0 / 22%); --cw-context-sunken-soft: rgb(0 0 0 / 12%); --cw-context-tick: rgb(255 255 255 / 18%); --cw-context-wash: rgb(255 255 255 / 10%); --cw-context-light-surface: #ffffff; --cw-context-light-sunken: #faf9ff; --cw-context-light-wash: var(--asc-color-purple-pale, #f1efff); --cw-context-light-link: var(--asc-color-purple, #7f5aff); --cw-context-light-border: var(--asc-color-border, #e9e5f6); --cw-context-light-line: #f1eefa; } /* The one value the child theme set differently on the light bar. */ .cw-context-menu--light { --cw-context-muted: var(--asc-color-muted, #81799b); } /* On a phone the banner's section menu is a full-width bar, as it is on the hub pages: edge to edge and closing the banner, not a card inside it. Only below 48em, where the banner is a single column and the bar is its last item. Margins rather than the banner's own padding, so a banner without the bar keeps its own spacing. */ @media (max-width: 47.99em) { .c-banner__quick-links { margin-inline: calc(-1 * var(--space-6, 1.5rem)); margin-block-end: calc(-1 * var(--ds-space-xl, 3rem)); } } /* <<< cw-context token map */ /* -------------------------------------------------------------------------- PURPLE TEXT THAT PASSES CONTRAST (24 Sep 2026) Lighthouse flagged thirteen failing elements on the home page and every one was the same value: #7f5aff, the brand purple, as small text on white or on the pale #f0f6fd ground. on white 4.37 : 1 on #f0f6fd 4.01 : 1 AA needs 4.50 : 1 below 24px It fails by a whisker, which is why it survived — it looks fine and is measurably not. The replacement is --fg-link (#6b52d9), already defined in this site's role tokens and, until this week, used by nothing. It clears both grounds at 5.48 and 5.04, and sits close enough to the brand that the pages do not visibly change. Two tokens feed these elements, not one: --asc-color-purple and --location-accent. Both are #7f5aff. They are left alone here because both are also used for fills and borders, where white sits on the purple and passes perfectly well. The problem is not the colour, it is the colour used as small text. WHY THE SELECTORS LOOK LIKE THAT ascendant-blocks writes its rules as `:root:root .thing` — a specificity hack, two roots to win arguments. A plain class rule loses to it, which is exactly what my first attempt did. Three roots is ugly, and it is also the only honest way to sit above a rule written to be hard to override. The banner eyebrow needs the ID for the same reason. Buttons are deliberately absent. .kt-btn-inner-text is shared by every Kadence button including filled ones, where the text sits ON the purple, so a blanket rule would put purple on purple. -------------------------------------------------------------------------- */ :root:root:root .asc-scenario-tag, :root:root:root .asc-scenario-link, :root:root:root .asc-scenario-link a, :root:root:root .ascendant-location-finder__eyebrow, :root:root:root [class*="ascendant-location-finder__family"], :root:root:root .home-banner-eyebrow, #home-banner .home-banner-eyebrow { color: var( --fg-link, #6b52d9 ); } /* The outline buttons in the services tabs. Eight buttons on the home page use purple text on a transparent ground and fail contrast the same way the eyebrows did. Six of them live in the tabbed services block, which carries a real class — .home-services-tabs — so they can be reached without touching the filled buttons in the header, where white sits on the purple and passes. Kadence gives every button instance a generated class (kb-btn29_eaf2fb-e3) and nothing marks an outline button as an outline button, so there is no selector for "the transparent ones". Named blocks are the only stable handle. The two outside this block — "View All Services" in the content, and its sibling — need their colour set in the editor. */ :root:root:root .home-services-tabs .kb-button .kt-btn-inner-text, :root:root:root .home-services-tabs .kb-button { color: var( --fg-link, #6b52d9 ); }