/*
Theme Name: KSA Custom Theme
Theme URI: https://ksaconsultinginc.com
Description: Standalone custom theme for ASK KSA. Delivers the LearnDash course library and WooCommerce course sales from hand-built templates, with no page builder and no parent theme.
Author: Lara Kroeker Interactive
Author URI: https://larakroekerinteractive.com
Version: 3.30.58
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ksa
*/
/* ============================================================
Base type — binds real content to the token system by TAG, not just
by class. reset.css sets a generic system-font fallback (font-size:
1rem, Apple/Segoe system stack) on with no KSA tokens at all;
without this rule anything not wrapped in one of the component
classes below silently renders in the wrong font at the wrong size,
invisible unless you go looking for it. This is the actual answer
to "how do we make sure no body text escapes the system": bind the
tag itself, so there's a correct default even when nobody remembers
to add a class.
.ksa-lead / .ksa-body / .ksa-small are the three explicit escape
hatches for when a div/span needs a role on purpose rather than by
inheriting from or from a component class that already sets
one of these — same job as LKI's .lki-lead/.lki-body/.lki-small.
============================================================ */
body {
font-family: var(--font-sans);
font-weight: var(--fw-regular);
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
color: var(--fg);
}
.ksa-lead {
font-family: var(--font-condensed);
font-weight: var(--fw-light);
font-size: var(--type-lead-size);
line-height: var(--type-lead-lh);
color: var(--fg);
}
.ksa-body {
font-family: var(--font-sans);
font-weight: var(--fw-regular);
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
color: var(--fg);
}
.ksa-small {
font-family: var(--font-sans);
font-weight: var(--fw-regular);
font-size: var(--type-small-size);
line-height: var(--type-small-lh);
color: var(--fg-muted);
}
/* ============================================================
Nav — header-ksa-preview.php
Static (scrolls with the page, not fixed) per decision Aug 6, 2026.
Uses --ksa- tokens from colors_and_type.css exclusively — no new
colors introduced here.
============================================================ */
.ksa-nav__topbar {
height: 6px;
background: var(--ksa-navy-darker);
}
.ksa-nav {
background: var(--ksa-white);
border-bottom: 1px solid var(--border);
}
.ksa-nav__inner {
max-width: 1280px;
margin: 0 auto;
padding: var(--sp-6) var(--sp-5);
display: flex;
align-items: center;
gap: var(--sp-5);
}
.ksa-nav__logo-link {
display: flex;
align-items: center;
flex-shrink: 0;
}
.ksa-nav .ksa-nav__logo {
height: 64px;
width: auto;
display: block;
}
.ksa-nav__links {
display: flex;
align-items: center;
gap: var(--sp-5);
margin-right: auto;
}
.ksa-nav .ksa-nav__link {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-small-size);
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--fg);
text-decoration: none;
padding: var(--sp-2) 0;
border-bottom: 2px solid transparent;
transition: color 200ms ease-out, border-color 200ms ease-out;
}
.ksa-nav .ksa-nav__link:hover {
color: var(--cta);
}
.ksa-nav .ksa-nav__link[aria-current="page"] {
border-bottom-color: var(--cta);
}
/* Shared CTA pill — used in the nav (.ksa-nav), the footer's own CTA
row at the top of .ksa-footer, and previewed on /design-guidelines/
(.ksa-dg-button-grid, which can't use .ksa-nav or .ksa-footer__cta
as the ancestor without dragging in their own unrelated layout).
Same button, three contexts. */
.ksa-nav .ksa-nav__cta,
.ksa-footer__cta .ksa-nav__cta,
.ksa-dg-button-grid .ksa-nav__cta {
flex-shrink: 0;
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-small-size);
text-transform: uppercase;
letter-spacing: 0.02em;
background: var(--cta);
color: var(--cta-text);
padding: var(--sp-3) var(--sp-5);
border-radius: var(--radius-pill);
text-decoration: none;
white-space: nowrap;
transition: background-color 200ms ease-out;
}
.ksa-nav .ksa-nav__cta:hover,
.ksa-footer__cta .ksa-nav__cta:hover,
.ksa-dg-button-grid .ksa-nav__cta:hover {
background: var(--cta-hover);
color: var(--cta-text);
}
.ksa-nav .ksa-nav__cta:active,
.ksa-footer__cta .ksa-nav__cta:active,
.ksa-dg-button-grid .ksa-nav__cta:active {
background: var(--cta-active);
color: var(--cta-text);
}
.ksa-nav__utility {
display: flex;
align-items: center;
gap: var(--sp-4);
flex-shrink: 0;
}
.ksa-nav .ksa-nav__utility-link {
font-size: var(--type-small-size);
font-weight: var(--fw-medium);
color: var(--fg);
text-decoration: none;
white-space: nowrap;
transition: color 200ms ease-out;
}
.ksa-nav .ksa-nav__utility-link:hover {
color: var(--cta);
}
.ksa-nav .ksa-nav__utility-link--logout {
color: var(--fg-muted);
}
.ksa-nav .ksa-nav__cart {
display: flex;
align-items: center;
gap: var(--sp-2);
color: var(--fg);
text-decoration: none;
position: relative;
padding: var(--sp-2);
min-height: 44px;
min-width: 44px;
transition: color 200ms ease-out;
}
.ksa-nav .ksa-nav__cart:hover {
color: var(--cta);
}
.ksa-nav__cart-icon {
flex-shrink: 0;
}
.ksa-nav__cart-count {
position: absolute;
top: -2px;
left: 22px;
background: var(--cta);
color: var(--cta-text);
font-size: var(--type-micro-size);
font-weight: var(--fw-bold);
line-height: 1;
min-width: 16px;
height: 16px;
border-radius: var(--radius-pill);
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
}
.ksa-nav__cart-total {
font-size: var(--type-small-size);
font-weight: var(--fw-medium);
color: inherit;
}
/* Real Mini Cart block — kept in the DOM for its drawer/store, but not
visually shown; #ksaNavCartTrigger above is the visible button and
opens this block's drawer by proxy. Not display:none, so the block's
own JS never has to reason about a hidden/unmounted element. */
.ksa-nav .wp-block-woocommerce-mini-cart {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.ksa-nav .ksa-nav__hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
flex-shrink: 0;
}
.ksa-nav .ksa-nav__hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--fg);
transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.ksa-nav .ksa-nav__hamburger.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.ksa-nav .ksa-nav__hamburger.is-open span:nth-child(2) {
opacity: 0;
}
.ksa-nav .ksa-nav__hamburger.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.ksa-nav__drawer {
display: none;
flex-direction: column;
background: var(--ksa-white);
border-bottom: 1px solid var(--border);
padding: var(--sp-2) var(--sp-5) var(--sp-5);
}
.ksa-nav__drawer.is-open {
display: flex;
}
.ksa-nav__drawer .ksa-nav__drawer-link,
.ksa-nav__drawer .ksa-nav__drawer-cta {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-body-size);
color: var(--fg);
text-decoration: none;
padding: var(--sp-3) 0;
min-height: 44px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--border);
}
.ksa-nav__drawer .ksa-nav__drawer-cta {
color: var(--accent);
}
.ksa-nav .ksa-nav__link:focus-visible,
.ksa-nav .ksa-nav__cta:focus-visible,
.ksa-footer__cta .ksa-nav__cta:focus-visible,
.ksa-dg-button-grid .ksa-nav__cta:focus-visible,
.ksa-nav .ksa-nav__utility-link:focus-visible,
.ksa-nav .ksa-nav__hamburger:focus-visible,
.ksa-nav__drawer .ksa-nav__drawer-link:focus-visible,
.ksa-nav__drawer .ksa-nav__drawer-cta:focus-visible {
outline: var(--ksa-focus-width) solid var(--ksa-focus-color);
outline-offset: var(--ksa-focus-offset);
}
@media (prefers-reduced-motion: reduce) {
.ksa-nav__link,
.ksa-nav__cta,
.ksa-nav__utility-link,
.ksa-nav__hamburger span {
transition: none;
}
}
@media (max-width: 768px) {
.ksa-nav__links,
.ksa-nav__cta,
.ksa-nav__utility {
display: none;
}
.ksa-nav .ksa-nav__hamburger {
display: flex;
margin-left: auto;
}
}
/* Nav overlay — homepage only (header.php sets `$ksa_nav_overlay` from
is_front_page()). Nav is pulled out of flow and floated transparent
over the video hero instead of sitting in its own solid white bar;
.ksa-hero-video's own top padding (below) reserves the room for it so
the heading/buttons don't render underneath. Logo keeps its own
navy/white artwork so it doesn't need a color swap; links, utility
links and the hamburger do. */
.ksa-nav__topbar--overlay {
background: transparent;
}
.ksa-nav--overlay {
position: absolute;
top: 6px; /* below the (now-transparent) 6px topbar, same visual position as the static nav elsewhere */
left: 0;
right: 0;
z-index: 20;
background: transparent;
border-bottom: none;
}
.ksa-nav--overlay .ksa-nav__link,
.ksa-nav--overlay .ksa-nav__utility-link,
.ksa-nav--overlay .ksa-nav__cart {
color: var(--ksa-white);
}
.ksa-nav--overlay .ksa-nav__utility-link--logout {
color: var(--fg-on-dark-muted);
}
.ksa-nav--overlay .ksa-nav__hamburger span {
background: var(--ksa-white);
}
/* ============================================================
Footer — footer-ksa-preview.php
============================================================ */
.ksa-footer {
background: var(--ksa-navy-darker);
}
.ksa-footer__cta-band {
background: var(--ksa-blue);
}
.ksa-footer__cta {
max-width: 1280px;
margin: 0 auto;
padding: var(--sp-8) var(--sp-5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-6);
}
.ksa-footer__cta-text {
font-family: var(--font-condensed);
font-weight: var(--fw-light);
font-size: var(--type-lead-size);
line-height: var(--type-lead-lh);
color: var(--fg-on-dark);
text-align: center;
margin: 0;
max-width: 820px;
}
.ksa-footer__inner {
max-width: 1280px;
margin: 0 auto;
padding: var(--sp-8) var(--sp-5);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-7);
}
.ksa-footer .ksa-footer__heading {
font-family: var(--font-condensed);
font-weight: var(--fw-black);
font-size: var(--type-caps-size);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--fg-on-dark);
margin: 0 0 var(--sp-4);
}
.ksa-footer .ksa-footer__text {
font-size: var(--type-small-size);
line-height: var(--type-body-lh);
color: var(--fg-on-dark-muted);
margin: 0 0 var(--sp-4);
}
/* font-size set explicitly: the Contact column's links sit inside
.ksa-footer__text and inherited its 14px, but the Services list and
the "Sign up for updates" link sit outside it and were falling back
to the 18px body default — three columns, two different link sizes. */
.ksa-footer .ksa-footer__link {
font-size: var(--type-small-size);
line-height: var(--type-body-lh);
color: var(--fg-on-dark-muted);
text-decoration: none;
transition: color 200ms ease-out;
}
.ksa-footer .ksa-footer__link:hover {
color: var(--cta);
}
.ksa-footer .ksa-footer__link--accent {
color: var(--cta);
}
.ksa-footer .ksa-footer__link--accent:hover {
color: var(--cta-hover);
}
/* Scoped to the Services list only — "Sign up for updates →" already
has its own trailing arrow and shouldn't get a second, leading one. */
.ksa-footer .ksa-footer__list .ksa-footer__link--accent::before {
content: "→";
display: inline-block;
margin-right: var(--sp-2);
}
.ksa-footer .ksa-footer__list {
list-style: none;
margin: 0 0 var(--sp-4);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.ksa-footer__socials {
display: flex;
gap: var(--sp-3);
}
.ksa-footer .ksa-footer__social {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-pill);
border: 1px solid var(--fg-on-dark-subtle);
color: var(--fg-on-dark-muted);
transition: border-color 200ms ease-out, color 200ms ease-out;
}
.ksa-footer .ksa-footer__social:hover {
border-color: var(--cta);
color: var(--cta);
}
.ksa-footer .ksa-footer__social:focus-visible,
.ksa-footer .ksa-footer__link:focus-visible,
.ksa-footer .ksa-footer__link--accent:focus-visible {
outline: var(--ksa-focus-width) solid var(--ksa-focus-color);
outline-offset: var(--ksa-focus-offset);
}
.ksa-footer__bottombar {
background: var(--ksa-navy-darker);
padding: var(--sp-4) var(--sp-5);
}
/* Copyright left, legal links right; stacks on narrow screens. The
max-width/centring moved from .ksa-footer__copyright to this wrapper
when the legal links were added (Aug 7, 2026). */
.ksa-footer__bottombar-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-5);
}
.ksa-footer__copyright {
font-size: var(--type-small-size);
color: var(--fg-on-dark-subtle);
margin: 0;
}
.ksa-footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-5);
}
.ksa-footer .ksa-footer__legal a {
font-size: var(--type-small-size);
color: var(--fg-on-dark-subtle);
text-decoration: none;
transition: color 200ms ease-out;
}
.ksa-footer .ksa-footer__legal a:hover {
color: var(--cta);
}
.ksa-footer .ksa-footer__legal a:focus-visible {
outline: var(--ksa-focus-width) solid var(--ksa-focus-color);
outline-offset: var(--ksa-focus-offset);
}
@media (max-width: 600px) {
.ksa-footer__bottombar-inner {
flex-direction: column;
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
.ksa-footer .ksa-footer__link,
.ksa-footer .ksa-footer__link--accent,
.ksa-footer .ksa-footer__social {
transition: none;
}
}
@media (max-width: 768px) {
.ksa-footer__inner {
grid-template-columns: 1fr;
gap: var(--sp-6);
}
}
.ksa-page-hero {
background: var(--ksa-navy);
}
.ksa-page-hero__inner {
max-width: 1280px;
margin: 0 auto;
padding: var(--sp-9) var(--sp-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-7);
}
.ksa-page-hero__copy {
max-width: 720px;
}
.ksa-page-hero .ksa-page-hero__title {
font-family: var(--font-condensed);
font-weight: var(--fw-black);
font-size: var(--type-h1-size);
line-height: var(--type-h1-lh);
color: var(--cta);
margin: 0 0 var(--sp-4);
}
.ksa-page-hero .ksa-page-hero__text {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
color: var(--fg-on-dark);
margin: 0;
}
/* Matches .ksa-page-section__text--lead's size/weight/line-height —
not its centering/max-width/margin, which assume a centered section
layout the hero (flex row, icon on the right) doesn't use. */
.ksa-page-hero .ksa-page-hero__text--lead {
font-size: var(--type-lead-size);
font-weight: var(--fw-light);
line-height: var(--type-lead-lh);
}
.ksa-page-hero__icon {
flex-shrink: 0;
width: 140px;
height: 140px;
object-fit: contain;
}
.ksa-page-section {
background: var(--ksa-white);
}
.ksa-page-section--tinted {
background: var(--ksa-grey-5);
}
.ksa-page-section__inner {
max-width: 1280px;
margin: 0 auto;
padding: var(--sp-8) var(--sp-5);
}
/* Compact variant — for thin utility rows (like the course filter bar)
where the standard section padding leaves too much dead space above
and below a single row of controls.
Top padding is deliberately larger than the bottom: the bar needs
breathing room from the section above it, but should stay close to
the course grid it actually controls. */
.ksa-page-section--tight .ksa-page-section__inner {
padding-top: var(--sp-9);
padding-bottom: var(--sp-5);
}
/* Drops top padding entirely on whatever section immediately follows
a --tight one, so that section's own top padding doesn't stack with
--tight's bottom padding and make the gap below look bigger than
the gap above (both gaps land on a white background and visually
merge into one, unlike the tinted section above --tight, whose
bottom padding is colored and doesn't read as extra white space). */
.ksa-page-section--flush-top .ksa-page-section__inner {
padding-top: 0;
}
/* Brand New Courses — extra breathing room above and below the mosaic
grid, more than the standard section padding. */
.ksa-home-courses .ksa-page-section__inner {
padding-top: var(--sp-10);
padding-bottom: var(--sp-10);
}
.ksa-page-section .ksa-page-section__heading {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-h2-size);
line-height: var(--type-h2-lh);
color: var(--fg);
margin: 0 0 var(--sp-5);
}
/* Sized like the page's H1 (still an
tag — one real H1 per page,
in the hero — this just borrows its scale for emphasis). */
.ksa-page-section .ksa-page-section__heading--big {
font-size: var(--type-h1-size);
line-height: var(--type-h1-lh);
}
.ksa-page-section .ksa-page-section__eyebrow {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-caps-size);
line-height: var(--type-caps-lh);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 var(--sp-3);
}
.ksa-page-section .ksa-page-section__eyebrow--center {
text-align: center;
}
.ksa-page-section .ksa-page-section__text {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
color: var(--fg);
max-width: 720px;
margin: 0 0 var(--sp-5);
}
.ksa-page-section .ksa-page-section__heading--center {
text-align: center;
max-width: none;
}
.ksa-page-section .ksa-page-section__text--lead {
font-size: var(--type-lead-size);
font-weight: var(--fw-light);
line-height: var(--type-lead-lh);
text-align: center;
max-width: 820px;
margin: 0 auto var(--sp-7);
}
.ksa-page-section .ksa-page-section__link {
color: var(--link);
text-decoration: underline;
transition: color 200ms ease-out;
}
.ksa-page-section .ksa-page-section__link:hover {
color: var(--link-hover);
}
.ksa-page-section .ksa-contact-info {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
color: var(--fg);
margin: 0 0 var(--sp-5);
}
.ksa-socials {
display: flex;
gap: var(--sp-3);
}
.ksa-page-section .ksa-social-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
color: var(--fg-muted);
transition: border-color 200ms ease-out, color 200ms ease-out;
}
.ksa-page-section .ksa-social-btn:hover {
border-color: var(--cta);
color: var(--cta);
}
.ksa-page-section .ksa-social-btn:focus-visible {
outline: var(--ksa-focus-width) solid var(--ksa-focus-color);
outline-offset: var(--ksa-focus-offset);
}
/* Cards enlarged Aug 7, 2026: the 200px minimum packed 5 across and
left them looking like tags rather than something to click. 320px
gives roughly 3 across at full width, still collapsing cleanly. */
.ksa-newsletter-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--sp-5);
}
.ksa-page-section .ksa-newsletter-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--fg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color 200ms ease-out;
}
.ksa-page-section .ksa-newsletter-card:hover {
border-color: var(--cta);
}
.ksa-page-section .ksa-newsletter-card:focus-visible {
outline: var(--ksa-focus-width) solid var(--ksa-focus-color);
outline-offset: var(--ksa-focus-offset);
}
.ksa-newsletter-card__image {
display: block;
width: 100%;
height: 180px;
object-fit: cover;
}
.ksa-page-section .ksa-newsletter-card__title {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-h3-size);
line-height: var(--type-h3-lh);
padding: var(--sp-5) var(--sp-5) 0;
}
.ksa-page-section .ksa-newsletter-card__date {
font-size: var(--type-small-size);
color: var(--fg-muted);
padding: var(--sp-2) var(--sp-5) var(--sp-5);
}
@media (max-width: 768px) {
.ksa-page-hero__inner {
flex-direction: column-reverse;
text-align: center;
}
.ksa-page-hero__copy {
max-width: none;
}
}
/* ============================================================
Pro Tips video blocks — page-pro-tips.php
============================================================ */
/* Copy left, video right (reversed Aug 7, 2026). Done with `order`
rather than by reordering the markup, so the video stays first in the
DOM — which is what mobile wants (see the 768px query below, where the
order is reset and the video returns to the top). */
.ksa-pro-tip {
display: grid;
grid-template-columns: 1fr minmax(280px, 400px);
gap: var(--sp-7);
align-items: start;
}
.ksa-pro-tip__video {
order: 2;
}
.ksa-pro-tip__body {
order: 1;
}
.ksa-pro-tip__video-frame {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
border-radius: var(--radius-md);
overflow: hidden;
background: var(--ksa-navy-darker);
}
.ksa-pro-tip__video-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.ksa-page-section .ksa-pro-tip__text p {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
color: var(--fg);
margin: 0 0 var(--sp-4);
}
.ksa-page-section .ksa-pro-tip__text ul {
margin: 0 0 var(--sp-4);
padding-left: var(--sp-5);
color: var(--fg);
}
.ksa-page-section .ksa-pro-tip__text li {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
margin-bottom: var(--sp-2);
}
.ksa-page-section .ksa-pro-tip__text strong {
font-weight: var(--fw-bold);
color: var(--fg);
}
.ksa-pro-tip__courses {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin-top: var(--sp-4);
}
/* Generic pill button — reusable anywhere inside .ksa-page-section, not
just Pro Tips. Same visual language as .ksa-nav__cta. Also nested
under .ksa-hero-video for the homepage hero, which isn't a
.ksa-page-section — same rule, different ancestor. (Until Aug 27,
2026 this also covered .ksa-hero-carousel; that section was replaced
by the video hero and the carousel markup no longer exists anywhere
in the theme, so that selector was dropped rather than left dead.) */
.ksa-page-section .ksa-pill-btn,
.ksa-hero-video .ksa-pill-btn {
display: inline-flex;
align-items: center;
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-small-size);
text-transform: uppercase;
letter-spacing: 0.02em;
background: var(--cta);
color: var(--cta-text);
padding: var(--sp-3) var(--sp-5);
border-radius: var(--radius-pill);
text-decoration: none;
white-space: nowrap;
transition: background-color 200ms ease-out;
}
.ksa-page-section .ksa-pill-btn:hover,
.ksa-hero-video .ksa-pill-btn:hover {
background: var(--cta-hover);
}
.ksa-page-section .ksa-pill-btn:focus-visible,
.ksa-hero-video .ksa-pill-btn:focus-visible {
outline: var(--ksa-focus-width) solid var(--ksa-focus-color);
outline-offset: var(--ksa-focus-offset);
}
/* Ghost/outline pill variant — added Aug 27, 2026 for the homepage
hero's "Consulting" button. Same footprint as .ksa-pill-btn but
transparent, so it reads as secondary next to a solid CTA on a dark
(video/photo) background. Padding is trimmed by the border width so
both buttons line up at the same height. */
.ksa-page-section .ksa-pill-btn--ghost,
.ksa-hero-video .ksa-pill-btn--ghost {
background: transparent;
border: 2px solid var(--ksa-white);
color: var(--ksa-white);
padding: calc(var(--sp-3) - 2px) calc(var(--sp-5) - 2px);
}
.ksa-page-section .ksa-pill-btn--ghost:hover,
.ksa-hero-video .ksa-pill-btn--ghost:hover {
background: var(--ksa-white);
color: var(--ksa-navy);
}
.ksa-page-section .ksa-pill-btn--ghost:focus-visible,
.ksa-hero-video .ksa-pill-btn--ghost:focus-visible {
outline: var(--ksa-focus-width) solid var(--ksa-focus-color);
outline-offset: var(--ksa-focus-offset);
}
/* "CTA Text" — Small doing a button's job. For a secondary action
next to real content, where a solid pill would compete with it. */
.ksa-page-section .ksa-text-link {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
font-weight: var(--fw-bold);
font-size: var(--type-small-size);
color: var(--cta);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 200ms ease-out, color 200ms ease-out;
}
.ksa-page-section .ksa-text-link:hover {
border-color: var(--cta-hover);
color: var(--cta-hover);
}
.ksa-page-section .ksa-text-link__arrow {
display: inline-block;
transition: transform 250ms cubic-bezier(.34, 1.56, .64, 1);
}
.ksa-page-section .ksa-text-link:hover .ksa-text-link__arrow {
transform: translateX(4px);
}
.ksa-page-section .ksa-text-link:focus-visible {
outline: var(--ksa-focus-width) solid var(--ksa-focus-color);
outline-offset: var(--ksa-focus-offset);
}
/* "Tag" — Eyebrow's 13px without the uppercase/tracking, for a label
that names a fact rather than announcing a section. */
.ksa-page-section .ksa-tag {
display: inline-block;
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-caps-size);
color: var(--accent);
background: var(--ksa-blue-light);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-pill);
}
@media (max-width: 768px) {
.ksa-pro-tip {
grid-template-columns: 1fr;
}
/* Single column — put the video back on top, ahead of the copy. */
.ksa-pro-tip__video,
.ksa-pro-tip__body {
order: 0;
}
}
/* ============================================================
Services page — page-services.php
============================================================ */
.ksa-services-list {
display: flex;
flex-direction: column;
}
.ksa-service-block {
padding: var(--sp-7) 0;
border-bottom: 1px solid var(--border);
}
.ksa-service-block:first-child {
padding-top: 0;
}
.ksa-service-block:last-child {
border-bottom: none;
padding-bottom: 0;
}
.ksa-page-section .ksa-service-block__title {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-h3-size);
color: var(--fg);
margin: 0 0 var(--sp-4);
}
/* `align-items: start` is what puts the "Services include:" list level
with the TOP OF THE PHOTO rather than stretching it down the row —
the photo now leads the left column, so both columns begin on the
same line. */
.ksa-service-block__row {
display: grid;
grid-template-columns: 1fr minmax(240px, 340px);
gap: var(--sp-8);
align-items: start;
}
/* Fixed ratio with object-fit:cover so all five blocks read as one set
regardless of each source photo's own ratio — the originals range
from 3:2 to 4:3, which would otherwise give every block a different
image height and lose the rhythm down the page.
32:9 is exactly half the height of the 16:9 this started at — a wide
banner strip above each title, so the photo sets the tone without
pushing the actual content down the page. */
.ksa-service-block .ksa-service-block__img {
display: block;
width: 100%;
aspect-ratio: 32 / 9;
height: auto;
object-fit: cover;
/* 25%, not the default 50%. At a strip this wide the crop window is
less than half the source height, and a centred window cut the
tops off heads — the standing woman in the CSQM photo lost her
head entirely and the PD photo cropped through the eyes. Biasing
the window upward keeps faces intact in all five, and still reads
naturally on the two photos with no people in them (checked each
crop before committing to the number). */
object-position: center 25%;
border-radius: var(--radius-md);
/* grayscale + a brand-blue overlay (below) pulls every source photo
toward the same blue regardless of its own original colour, so a
yellow-highlighter close-up and a navy-toned office shot read as
one consistent set instead of five unrelated stock photos. */
filter: grayscale(0.6) contrast(1.05) brightness(1.05);
}
.ksa-service-block__img-wrap {
position: relative;
display: block;
margin: 0 0 var(--sp-5);
}
.ksa-service-block__img-wrap::after {
content: '';
position: absolute;
inset: 0;
background: var(--ksa-blue);
mix-blend-mode: color;
opacity: 0.25;
border-radius: var(--radius-md);
pointer-events: none;
}
.ksa-page-section .ksa-service-block__label {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-body-size);
color: var(--fg);
margin: 0 0 var(--sp-3);
}
.ksa-page-section .ksa-service-block__list {
list-style: disc;
margin: 0;
padding-left: var(--sp-5);
color: var(--fg);
}
.ksa-page-section .ksa-service-block__list li {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
margin-bottom: var(--sp-3);
}
.ksa-page-section .ksa-service-block__body {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
color: var(--fg);
margin: 0 0 var(--sp-4);
}
.ksa-service-block .ksa-service-block__link {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-body-size);
color: var(--cta);
text-decoration: none;
transition: color 200ms ease-out;
}
.ksa-service-block .ksa-service-block__link:hover {
color: var(--cta-hover);
}
.ksa-service-block .ksa-service-block__link:focus-visible {
outline: var(--ksa-focus-width) solid var(--ksa-focus-color);
outline-offset: var(--ksa-focus-offset);
}
.ksa-testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.ksa-testimonial-card {
margin: 0;
background: var(--ksa-white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-7) var(--sp-6);
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
gap: var(--sp-5);
}
.ksa-testimonial-card__mark {
font-family: Georgia, serif;
font-style: italic;
font-size: 64px;
line-height: 0.6;
color: var(--cta);
}
.ksa-page-section .ksa-testimonial-card blockquote {
margin: 0;
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
color: var(--fg);
font-weight: var(--fw-regular);
font-style: italic;
}
.ksa-testimonial-card figcaption {
display: flex;
align-items: center;
gap: var(--sp-4);
margin-top: auto;
}
.ksa-testimonial-card__avatar {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: var(--radius-pill);
background: var(--accent);
color: var(--ksa-white);
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-small-size);
}
.ksa-testimonial-card__who {
display: flex;
flex-direction: column;
}
.ksa-testimonial-card__name {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-small-size);
color: var(--fg);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.ksa-testimonial-card__company {
font-size: var(--type-small-size);
color: var(--accent);
margin-top: 2px;
}
@media (max-width: 900px) {
.ksa-service-block__row {
grid-template-columns: 1fr;
gap: var(--sp-5);
}
.ksa-testimonial-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
About page — page-about.php
============================================================ */
.ksa-about-row {
display: grid;
grid-template-columns: minmax(240px, 380px) 1fr;
gap: var(--sp-8);
align-items: center;
}
.ksa-about-row--reverse {
grid-template-columns: 1fr minmax(240px, 380px);
}
.ksa-about-row--reverse .ksa-about-row__media {
order: 2;
}
.ksa-about-row__img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-lg);
}
/* Small/big rhythm for the 4 "Kirsten's approach" / "trusted voice" /
"leadership beyond practice" / "experienced support" rows — added
Aug 27, 2026, modeled on stg-zoedaokroeker-staging.kinsta.cloud/about/'s
.zoe-timeline__media (one fixed photo shape, alternating container
size down the page). "big" needs no rule of its own — it's the same
240-380px column the row already defaults to; only "small" narrows it. */
.ksa-about-row--small {
grid-template-columns: minmax(200px, 280px) 1fr;
}
.ksa-about-row--small.ksa-about-row--reverse {
grid-template-columns: 1fr minmax(200px, 280px);
}
/* Portrait modifier for those same 4 rows — locks every photo to one
shape via object-fit: cover regardless of the source file's own
aspect ratio (the underlying JPEGs are already center-cropped close
to this, but the ratio is enforced here, not assumed from the file). */
.ksa-about-row__img--portrait {
aspect-ratio: 4 / 5;
object-fit: cover;
}
/* Round modifier — Kirsten's second photo, styled as a LinkedIn-style
avatar crop instead of a second big rectangular photo (two large
rectangular photos on one page read as redundant). Stacks the avatar
over a name caption now that the section heading no longer names her
itself ("Experience behind the advice." vs. the old "Meet Kirsten..."). */
.ksa-about-row__media--round {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-3);
}
.ksa-about-row__img--round {
width: 220px;
height: 220px;
object-fit: cover;
border-radius: var(--radius-pill);
box-shadow: var(--shadow-md);
border: 6px solid var(--ksa-white);
}
/* Profile-icon size — added Aug 27, 2026 so the avatar reads as a small
identifying icon next to its caption rather than a second large
photo competing with the row's own media column. Same selector
weight as .ksa-about-row__img--round (one class each); this rule
comes later in the cascade, so its width/height win while everything
else (object-fit, radius, border) is inherited from the rule above. */
.ksa-about-row__img--icon {
width: 120px;
height: 120px;
}
.ksa-about-row__icon-caption {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-small-size);
line-height: var(--type-small-lh);
color: var(--fg);
text-align: center;
margin: 0;
}
.ksa-page-section .ksa-about-row__text {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
color: var(--fg);
margin: 0 0 var(--sp-4);
}
/* Lead variant — same light-weight, larger lead size as the hero and
intro paragraphs elsewhere, but left-aligned and unconstrained since
it sits in a copy column rather than a full-width centered block. */
.ksa-page-section .ksa-about-row__text--lead {
font-size: var(--type-lead-size);
font-weight: var(--fw-light);
line-height: var(--type-lead-lh);
}
.ksa-page-section .ksa-about-row__tags {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin: 0 0 var(--sp-5);
}
/* Callout, not an inline link — bigger, regular-weight navy text on a
tinted block with a left accent border. Replaces an earlier version
that was small bold blue text and read like a link, not a pull-quote. */
.ksa-page-section .ksa-about-row__pull {
font-family: var(--font-condensed);
font-weight: var(--fw-light);
font-size: var(--type-lead-size);
line-height: var(--type-lead-lh);
color: var(--fg);
background: var(--ksa-blue-light);
border-left: 4px solid var(--accent);
padding: var(--sp-5) var(--sp-6);
margin: var(--sp-2) 0 var(--sp-6);
}
/* ---- Kirsten bio timeline (About page) — 3 short cards replacing
what used to be 3 dense paragraphs. Navy top-border for the two
past beats, orange for "Today" — the one accent colour, marking
the present. ---- */
.ksa-timeline-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
margin-top: var(--sp-7);
}
.ksa-timeline-card {
border-top: 3px solid var(--cta);
padding-top: var(--sp-4);
}
.ksa-page-section .ksa-timeline-card__eyebrow {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-caps-size);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--accent);
margin: 0 0 var(--sp-2);
}
.ksa-page-section .ksa-timeline-card__title {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-h4-size);
color: var(--fg);
margin: 0 0 var(--sp-3);
}
.ksa-page-section .ksa-timeline-card__text {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
color: var(--fg);
margin: 0;
}
/* Same 3-column grid as .ksa-timeline-grid directly above it, so the
closing group's left edge lines up exactly with the 2nd timeline
card's — not just visually "aligned right", but on the same column
lines the cards use. */
.ksa-about-closing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
margin-top: var(--sp-7);
}
/* Quote first in markup, photo second — image sits on the right. */
.ksa-about-closing__group {
grid-column: 2 / 4;
display: flex;
align-items: center;
gap: var(--sp-6);
}
.ksa-about-closing__img {
flex-shrink: 0;
width: 160px;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--radius-lg);
}
/* Plain italic body text, not the boxed pull-quote treatment — no
accent line, just a narrower column that wraps to about 4 lines. */
.ksa-page-section .ksa-about-closing__quote {
max-width: 440px;
margin: 0;
font-size: var(--type-body-size);
font-style: italic;
line-height: var(--type-body-lh);
color: var(--fg);
}
@media (max-width: 900px) {
.ksa-timeline-grid {
grid-template-columns: 1fr;
}
.ksa-about-closing {
grid-template-columns: 1fr;
}
.ksa-about-closing__group {
grid-column: 1;
flex-direction: column;
align-items: flex-start;
}
.ksa-about-closing__img {
width: 140px;
}
}
.ksa-page-section .ksa-page-section__text p {
margin: 0 0 var(--sp-4);
}
.ksa-page-section .ksa-page-section__text p:last-child {
margin-bottom: 0;
}
/* Narrow heading column, wide filters + list column — same
narrow-label/wide-content ratio as .ksa-service-block__row and
.ksa-pd-intro — each side in its own wrapper div so the grid always
has exactly 2 children regardless of how much markup each holds. */
.ksa-faq {
display: grid;
grid-template-columns: minmax(240px, 340px) 1fr;
gap: var(--sp-8);
}
@media (max-width: 900px) {
.ksa-faq {
grid-template-columns: 1fr;
}
}
.ksa-page-section .ksa-faq__heading {
font-family: var(--font-condensed);
font-weight: var(--fw-black);
font-size: var(--type-h2-size);
line-height: var(--type-h2-lh);
color: var(--fg);
margin: 0;
}
.ksa-faq .ksa-course-filter {
margin-bottom: var(--sp-6);
}
/* No gap between rows: the alternating stripes below need to be
contiguous to read as a list rather than as separate cards. The
rounded corners move to the container, which clips the first and
last stripe for them. */
.ksa-faq-list {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.ksa-faq-item {
background: var(--ksa-white);
padding: var(--sp-4) var(--sp-5);
transition: background-color 200ms ease-out;
}
/* --ksa-grey-5 is the token literally documented as "alt rows". Class
rather than :nth-child, since :nth-child counts hidden items too —
filtering the list by category would otherwise throw off which
visible row looks "even". JS applies/removes this on filter. */
.ksa-faq-item--alt {
background: var(--ksa-grey-5);
}
/* Higher specificity than .ksa-faq-item--alt (0,2,0 vs 0,1,0), so
hover always wins over the zebra regardless of source order. */
.ksa-faq-item:hover {
background: var(--ksa-blue-light);
}
.ksa-faq-item + .ksa-faq-item {
margin-top: 0;
}
.ksa-page-section .ksa-faq-item__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-body-size);
color: var(--fg);
cursor: pointer;
list-style: none;
}
.ksa-faq-item__q::-webkit-details-marker {
display: none;
}
/* Outlined at rest, filled orange on rollover. Real Phosphor plus/
minus glyphs via mask-image (crisp vector, not a font glyph) — the
circle chrome lives on .ksa-faq-item__icon itself so the mask only
ever clips the glyph layer, never the border/background. */
.ksa-faq-item__icon {
flex-shrink: 0;
position: relative;
width: 36px;
height: 36px;
background: transparent;
border: 1px solid var(--cta);
border-radius: var(--radius-pill);
transition: background-color 200ms ease-out;
}
.ksa-faq-item__icon::after {
content: "";
position: absolute;
inset: 9px;
background-color: var(--cta);
-webkit-mask-image: url("assets-icons/System Icons/plus-light.svg");
mask-image: url("assets-icons/System Icons/plus-light.svg");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: background-color 200ms ease-out;
}
.ksa-faq-item[open] .ksa-faq-item__icon::after {
-webkit-mask-image: url("assets-icons/System Icons/minus-light.svg");
mask-image: url("assets-icons/System Icons/minus-light.svg");
}
/* Both selectors, so the fill appears whether the pointer is over the
button itself or anywhere else on the row — the whole row is the
click target, so the button has to react to the whole row. */
.ksa-faq-item__q:hover .ksa-faq-item__icon,
.ksa-faq-item:hover .ksa-faq-item__icon {
background: var(--cta);
}
.ksa-faq-item__q:hover .ksa-faq-item__icon::after,
.ksa-faq-item:hover .ksa-faq-item__icon::after {
background-color: var(--cta-text);
}
.ksa-faq-item__q:focus-visible {
outline: var(--ksa-focus-width) solid var(--ksa-focus-color);
outline-offset: var(--ksa-focus-offset);
}
.ksa-page-section .ksa-faq-item__a p {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
color: var(--fg);
margin: var(--sp-4) 0 0;
}
@media (max-width: 900px) {
.ksa-about-row,
.ksa-about-row--reverse {
grid-template-columns: 1fr;
}
.ksa-about-row--reverse .ksa-about-row__media {
order: 0;
}
}
/* ============================================================
PD Courses page — page-professional-development-courses.php
============================================================ */
.ksa-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-7);
text-align: center;
}
.ksa-page-section .ksa-feature-card__title {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-h4-size);
color: var(--fg);
margin: 0 0 var(--sp-3);
}
.ksa-page-section .ksa-feature-card__text {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
color: var(--fg);
margin: 0;
}
/* No `align-items: start` — the default `stretch` is what makes the
"Already Enrolled?" card run the full height of the copy beside it,
instead of floating as a short block against a tall paragraph. */
.ksa-pd-intro {
display: grid;
grid-template-columns: 1fr minmax(260px, 340px);
gap: var(--sp-8);
}
/* Box treatment matched to .ksa-about-row__pull on the About page, per
request: same blue wash, same 4px accent rule on the left, same
square corners and same padding. Only the BOX matches — the type
inside stays at its own smaller, more UI-like scale, since this is a
1-2 sentence prompt with a link rather than an excerpted line of
body copy. */
.ksa-pd-intro__aside {
background: var(--ksa-blue-light);
border-left: 4px solid var(--accent);
border-radius: 0;
padding: var(--sp-5) var(--sp-6);
}
.ksa-page-section .ksa-pd-intro__aside-title {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: var(--type-h4-size);
color: var(--fg);
margin: 0 0 var(--sp-3);
}
.ksa-page-section .ksa-pd-intro__aside-text {
font-size: var(--type-small-size);
line-height: var(--type-small-lh);
color: var(--fg);
margin: 0;
}
.ksa-page-section .ksa-pd-intro__aside-text a {
color: var(--link);
text-decoration: underline;
}
.ksa-page-section .ksa-pd-intro__aside-text a:hover {
color: var(--link-hover);
}
.ksa-course-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
}
/* The title sits as a cell in the grid itself, not as a heading above
it — a photo/text mosaic idea. */
.ksa-course-mosaic {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas: "c1 c2 c3" "c4 title c5";
gap: var(--sp-5);
}
.ksa-page-section .ksa-course-mosaic__title {
grid-area: title;
background: var(--ksa-blue-light);
border: 1px solid var(--border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: var(--sp-6) var(--sp-5);
}
.ksa-page-section .ksa-course-mosaic__title p {
color: var(--fg-muted);
margin: 0 0 var(--sp-5);
}
/* The eyebrow is also a