/* Theme Name: KnowBetta Theme URI: https://knowbetta.com Description: Kadence child theme for knowbetta.com — the Wild/Immersive design system (Young Serif / Figtree, cream / ink / amber). Built from the approved mockups in homepage-mockup/. Author: Annie Template: kadence Version: 1.0.0 Requires at least: 6.3 Requires PHP: 7.4 Text Domain: knowbetta */ /* ============================================================ 1. TOKENS The design system. WCAG-verified values — do not lighten --kb-quiet or the focus color without re-checking contrast (see homepage-mockup/ audit notes). ============================================================ */ :root{ --kb-cream:#FAF5EA; --kb-cream-2:#F3ECDD; --kb-ink:#0C141C; --kb-amber:#F5A709; --kb-amber-hover:#FFBB2E; --kb-amber-ink:#8A5E00; /* links on light, focus ring */ --kb-on-amber:#2A1C00; /* text on amber buttons */ --kb-body:#31404C; --kb-quiet:#566672; /* 5.5:1 on cream — min muted text */ --kb-faint:#8A94A2; /* dark surfaces only */ --kb-rule:#E5DCCB; --kb-on-dark:#F4EFE4; --kb-on-dark-quiet:#A8B3BE; --kb-foot-muted:#7E8C97; /* 5.4:1 on ink */ --kb-display:'Young Serif',Georgia,serif; --kb-sans:'Figtree',system-ui,-apple-system,sans-serif; --kb-focus:#8A5E00; /* passes 3:1 on every surface */ --kb-shadow-pop:0 24px 50px -20px rgba(12,20,28,.4); --kb-article-measure:44rem; /* article reading column width */ --kb-ink-hover:#1C2B38; /* hover state for ink surfaces */ --kb-on-dark-body:#C9D4DC; /* body text on ink scenes */ --kb-callout-bg:#FBF1DE; /* amber callout family (6.5:1 text)*/ --kb-callout-border:#EAD9AE; --kb-callout-text:#6A5312; --kb-callout-strong:#4A3A0A; --kb-table-head:#84601D; /* editorial table header (cream text ~5:1) */ --kb-table-zebra:#F3F2F0; /* even rows — deliberately NOT page cream */ } /* ============================================================ 2. BASE Kadence outputs --global-palette1..9 from the palette option (set by the child's kadence_dynamic_css filter), so Kadence UI and kadence-blocks inherit the brand automatically. ============================================================ */ /* !important: Kadence's dynamic CSS paints the site background white from the migrated mods. (Measured load order: the dynamic inline block prints BEFORE this sheet — the !important is belt-and-braces against optimizers reordering, not a cascade necessity.) */ body,body.site,#wrapper{background:var(--kb-cream) !important} body{ color:var(--kb-body); font-family:var(--kb-sans); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; } .single-post body, body.single-post{font-size:1.1875rem;line-height:1.7} h1,h2,h3,h4,h5,h6{ font-family:var(--kb-display); font-weight:400; line-height:1.12; color:var(--kb-ink); letter-spacing:-.012em; text-wrap:balance; } /* balance equalizes multi-line headings — right for heroes and cards, but in article flow it breaks the first line far from the edge and reads as premature wrapping. Natural wrap for content headings. */ .entry-content :is(h2,h3,h4,h5){text-wrap:pretty} :focus-visible{outline:3px solid var(--kb-focus);outline-offset:3px;border-radius:2px} /* Kadence stamps .hide-focus-outline on and suppresses ALL outlines until its JS removes the class on first keydown — with deferred JS (LiteSpeed) that race can eat the first Tab's ring. Restate at higher specificity so the ring never depends on JS. */ body.hide-focus-outline :focus-visible{outline:3px solid var(--kb-focus);outline-offset:3px;border-radius:2px} /* the branding link and Kadence's injected submenu toggle buttons take ring colors from parent rules; force the token, amber on the dark header */ .site-branding a:focus-visible, .dropdown-nav-special-toggle:focus-visible{outline:3px solid var(--kb-focus) !important;outline-offset:3px} .kb-dark-header.kb-dark-header #masthead :focus-visible{outline-color:var(--kb-amber) !important} .skip-link:focus{background:var(--kb-ink);color:var(--kb-cream)} ::selection{background:color-mix(in srgb,var(--kb-amber) 35%,transparent)} .entry-content a:not(.button):not(.wp-block-button__link), .page .entry-content a:not(.button):not(.wp-block-button__link){ color:var(--kb-amber-ink); text-decoration:none; border-bottom:1.5px solid color-mix(in srgb,var(--kb-amber) 50%,transparent); } .entry-content a:not(.button):not(.wp-block-button__link):hover{border-bottom-color:var(--kb-amber)} .entry-content em{font-style:italic} .entry-content strong{color:var(--kb-ink)} /* ============================================================ 3. HEADER (Kadence header builder: cream bar, ink nav, amber-underline hovers, dropdown panels, pill button) ============================================================ */ #masthead, #masthead .site-header-upper-wrap, #masthead .site-header-lower-wrap, #masthead .site-main-header-inner-wrap, #masthead .site-header-row-container-inner{background:var(--kb-cream) !important} #masthead .site-main-header-wrap{border-bottom:1px solid var(--kb-rule)} /* header + footer content aligns with the 1200px content column */ #masthead .site-container,#colophon .site-container{max-width:1200px} /* logo lockup: mascot cap-height with the wordmark, per the mockups */ .site-branding img,.site-branding .custom-logo{max-height:32px;width:auto} .site-branding .site-title{ font-family:var(--kb-display); font-size:1.4375rem; letter-spacing:-.02em; color:var(--kb-ink); /* Young Serif has ONE weight; Kadence's mods set 700 and the browser faux-bolds it into a smeared heavier-looking wordmark */ font-weight:400; } .header-navigation .header-menu-container > ul > li > a{ font-family:var(--kb-sans); font-size:.9375rem; font-weight:600; color:var(--kb-ink); box-shadow:inset 0 -2px 0 transparent; transition:box-shadow .16s ease; } .header-navigation .header-menu-container > ul > li > a:hover, .header-navigation .header-menu-container > ul > li.current-menu-item > a, .header-navigation .header-menu-container > ul > li.current-menu-ancestor > a{ box-shadow:inset 0 -2px 0 var(--kb-amber); color:var(--kb-ink); } /* dropdown panel. Selectors mirror Kadence's dynamic inline CSS (.header-menu-container ul ul…) — same specificity, this sheet loads later and wins. Anything shorter loses to the dynamic ink panel (palette3 bg, palette8 links, 12px). */ .header-navigation .header-menu-container ul ul.sub-menu{ background:var(--kb-cream); border:1px solid var(--kb-rule); border-radius:10px; box-shadow:var(--kb-shadow-pop); padding:9px; min-width:252px; } .header-navigation .header-menu-container ul ul li.menu-item > a{ border-radius:8px; font-size:.90625rem; font-weight:600; color:var(--kb-ink); padding:9px 13px; width:auto; } .header-navigation .header-menu-container ul ul li.menu-item > a:hover, .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a{ background:var(--kb-cream-2); color:var(--kb-amber-ink); } /* keyboard: Kadence ships a :focus-within open rule, but its nav JS adds .menu-item--has-toggle to every parent li at runtime, opting them all out of it — this reopens the keyboard path. Hardened for the fade reveal modes, which hide via opacity/clip, not display (deploy checklist: dropdown reveal must be "none" on production). */ .header-navigation .header-menu-container li.menu-item-has-children:focus-within > ul.sub-menu{ display:block;opacity:1;visibility:visible;clip:auto;clip-path:none;height:auto;overflow:visible; } /* Escape closes a focus-opened submenu (class managed by knowbetta.js) */ .header-navigation li.kb-esc-closed > ul.sub-menu{display:none !important} /* search toggle */ .search-toggle-open{color:var(--kb-ink)} .search-toggle-open:hover{color:var(--kb-amber-ink)} /* search drawer: Kadence's default is a transparent underline field (page text bleeds through) with a TEXT submit stacked on top of the decorative icon — restyle to the mockup's white pill. */ #search-drawer .drawer-inner{background:rgba(12,20,28,.94)} #search-drawer .drawer-inner input.search-field{ font-family:var(--kb-sans); background:#fff !important; color:var(--kb-ink) !important; border:2px solid var(--kb-rule) !important; border-radius:10px !important; padding:16px 60px 16px 18px !important; font-size:1.125rem !important; } #search-drawer .drawer-inner input.search-field::placeholder{color:var(--kb-quiet);opacity:1} #search-drawer .drawer-inner input.search-field:focus{border-color:var(--kb-focus) !important} /* the text submit stays as the click/AT target (its value names it); visually the icon is the button */ #search-drawer .drawer-inner input.search-submit{font-size:0 !important;color:transparent !important;cursor:pointer} #search-drawer .kadence-search-icon-wrap{color:var(--kb-quiet)} /* header button — the "Free printables" pill */ .header-button{ background:var(--kb-ink); color:var(--kb-cream); border:0; border-radius:100px; padding:12px 20px; font-family:var(--kb-sans); font-weight:700; font-size:.90625rem; } .header-button:hover{background:var(--kb-ink-hover);color:var(--kb-cream)} /* mobile drawer */ #mobile-drawer .drawer-inner{background:var(--kb-ink)} #mobile-drawer a, #mobile-drawer .drawer-nav-drop-wrap a{ font-family:var(--kb-sans); color:var(--kb-on-dark) !important; } #mobile-drawer .drawer-nav-drop-wrap a{border-bottom:1px solid rgba(255,255,255,.08)} #mobile-drawer a:hover, #mobile-drawer .drawer-nav-drop-wrap a:hover{color:var(--kb-amber) !important} /* mobile header CTA pill: ink, matching desktop (old mods paint it blue) */ .mobile-header-button,a.button.mobile-header-button{ background:var(--kb-ink) !important;color:var(--kb-cream) !important; border:0;border-radius:100px;font-family:var(--kb-sans);font-weight:700; } .mobile-header-button:hover{background:var(--kb-ink-hover) !important} /* mobile header fit: at phone widths the pill + search + toggle overflow the row and push the hamburger off-screen (unreachable at 360px). Shrink the pill to one line; below 480px the drawer's own Free-printables item carries the CTA. Toggles get 44px targets. */ #mobile-header .mobile-header-button{white-space:nowrap;font-size:.875rem;padding:8px 14px} @media(max-width:479px){ #mobile-header .mobile-header-button-wrap{display:none} } @media(max-width:374px){ #mobile-header .site-container{padding:0 16px} } #mobile-header .search-toggle-open{min-width:44px;min-height:44px} #mobile-header .menu-toggle-open, #mobile-header .mobile-toggle-open{min-width:44px;min-height:44px} /* nav text: ink, per the mockups. Kadence's dynamic CSS colors the top-level anchors palette5 (quiet gray) at (3,3) specificity — this (4,3) selector beats it; the kb-dark-header white override below ties it at (4,3) and wins on source order. The dropdown label span gets inherit, not ink, so it follows its anchor on the dark homepage header too. */ .header-navigation .header-menu-container ul a{color:var(--kb-ink)} .header-navigation .header-menu-container.primary-menu-container > ul > li.menu-item > a{color:var(--kb-ink)} .header-navigation .nav-drop-title-wrap{color:inherit} /* Kadence chrome: scroll-to-top + search drawer icon */ .kadence-scroll-to-top{ background:var(--kb-ink) !important;color:var(--kb-cream) !important; border-color:var(--kb-ink) !important; } .kadence-scroll-to-top:hover{background:var(--kb-ink-hover) !important;color:var(--kb-cream) !important} /* article Sources accordion (legacy content block). cursor here, not in the fallback scope — kadence-blocks' CSS ships none and the headers are