/* ============================================================================= * KaKiSo site-wide typography * Plus Jakarta Sans EVERYWHERE, except the header, which stays Poppins. * Applies to guests and logged-in users alike. * Built 2026-08-06. * ----------------------------------------------------------------------------- * WHY THIS IS ONE OVERRIDE FILE AND NOT 91 EDITS * 91 front-end files declare a font. Most landing/shop/storefront sections force * their own family with a rule shaped like: * * #khNiche, #khNiche *:not([class*="fa-"]) { font-family:'Inter',... !important } * * That is specificity (1,1,0) WITH !important. A plain `* { ... !important }` * loses to it, because when two declarations are both !important the more * specific one wins. So this file deliberately out-specifies them once, centrally, * instead of hand-editing every widget. Reverting the whole change is one line: * remove the kakiso-fonts.php require from functions.php. * * THE :not(#kk-nope) PAIRS ARE A SPECIFICITY PAD, NOT A TYPO. * #kk-nope is an ID that intentionally matches nothing. :not() inherits the * specificity of its argument, so each one adds (1,0,0). Two of them lift the * sweep to roughly (2,2,1), comfortably above the (1,1,0) section rules, while * still matching every element. Do not "clean these up" or the whole file stops * working. * * WHY THE EXCLUSION LIST IS GENEROUS * font-family INHERITS. So wrongly excluding an element is harmless, it simply * inherits Plus Jakarta from its parent. Wrongly INCLUDING an icon element is * what breaks things, because it overwrites the icon font and the glyphs turn * into letters. When in doubt, exclude. * * DEPENDENCY: the family is loaded by includes/kakiso-fonts.php at weights * 400..800. header.php only ever loaded 600;700;800, which is why body copy * needed the extra 400/500 before this could look right. * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1. BASE. header.php:58 sets `body{font-family:'Poppins'}` with no !important, * and this file is enqueued at wp_head (line 392), i.e. AFTER that inline * block, so an equal-specificity rule here legitimately wins on cascade * order. No !important needed at this level. * -------------------------------------------------------------------------- */ html body { font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Plus Jakarta has a larger x-height than Poppins and renders slightly heavy on Windows without this. Keeps body copy legible at 14-16px. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ----------------------------------------------------------------------------- * 2. THE SWEEP. Beats every per-section `#id *{...!important}` rule. * * Excluded on purpose: * [class*="fa-"], .fa/.fas/.far/.fab Font Awesome (fa-solid, fa-arrow-right) * [class*="ph-"], .ph Phosphor, used across the dashboards * i bare icon elements * .kcm-qa-btn i etc are covered by the above * Note [class*="ph-"] also catches things like "graph-bar". That false * positive is harmless, see the inheritance note in the header comment. * -------------------------------------------------------------------------- */ html body:not(#kk-nope):not(#kk-nope) *:not([class*="fa-"]):not([class*="ph-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.ph):not(i) { font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* ----------------------------------------------------------------------------- * 3. THE ONE EXCEPTION: the header keeps Poppins, exactly as before. * * Two hooks are needed because the header chrome is not a single element: * #kakiso-hdr the sticky header bar itself (header.php:596, and the * supplier header at widget-supplier-header.php:102) * .font-sans the dark top strip (header.php:448) and the Browse * Categories / mega-menu bar (header.php:777), which sit * OUTSIDE #kakiso-hdr and already carried this class * * Three :not() pads here (3,x,x) so this always outranks the sweep above. * -------------------------------------------------------------------------- */ html body :is(#kakiso-hdr, .font-sans):not(#kk-nope):not(#kk-nope):not(#kk-nope), html body :is(#kakiso-hdr, .font-sans):not(#kk-nope):not(#kk-nope):not(#kk-nope) *:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(i) { font-family: 'Poppins', sans-serif !important; } /* ----------------------------------------------------------------------------- * NOTE ON ICON FONTS. There is deliberately NO "re-assert the Font Awesome * family" rule here. It looks like useful insurance but it is a net risk: any * selector broad enough to catch every icon (say [class*="fa-"]) also catches * ordinary elements that merely have "fa-" somewhere in a class name, and would * force a glyph font onto real text. The exclusions in section 2 are enough, * because excluded elements simply keep whatever Font Awesome's own stylesheet * already sets on them. * -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * 4. SUPPLIER LANDING. That page deliberately used Baloo 2 as its display face * (the v5 rebuild). "Everywhere" now includes it, so it is intentionally NOT * excluded above and its headings become Plus Jakarta like the rest of the * site. TO PUT BALOO 2 BACK, uncomment this block only: * * html body .ksl:not(#kk-nope):not(#kk-nope):not(#kk-nope) h1, * html body .ksl:not(#kk-nope):not(#kk-nope):not(#kk-nope) h2, * html body .ksl:not(#kk-nope):not(#kk-nope):not(#kk-nope) h3, * html body .ksl:not(#kk-nope):not(#kk-nope):not(#kk-nope) .ksl-h1a { * font-family: 'Baloo 2', cursive !important; * } * -------------------------------------------------------------------------- */