/** * KOG Performance Rehab — KG Style child theme * ----------------------------------------------------------------------------- * The palette and the type system are swapped in theme.json, and because almost * every parent stylesheet reads the WordPress preset variables, most of the site * changes voice for free. This file only picks up the places that don't: * * 1. about-patterns.css and about-baseline.css each open with their own :root * block of hardcoded --kog-* / --kog-b-* values. Those bypass the presets * entirely, so they are re-pointed here. * 2. Two selectors in about-baseline.css name 'DM Sans' as a literal string. * * Loaded after every parent stylesheet (see functions.php), so it wins on equal * specificity without needing !important. * * NOT touched: the .kgx-* canvas on /kg-style-test/. That page carries its own * namespaced variables and its own @font-face block in the parent theme, so it * keeps rendering as the pixel-matched Canva reproduction it was built to be. */ /* --------------------------------------------------------------------------- * The KG source values, for reference. Everything below is derived from these. * green #122C21 gold #EEBA2B paper #FFFFFF ink #000000 * ------------------------------------------------------------------------- */ /* 0 — the font presets ---------------------------------------------------- * theme.json declares the @font-face rules for Black Mango and Futura (and they * do load), but it cannot re-point the "playfair" and "dm-sans" preset slugs: * when a child theme.json redeclares a font family the parent already defined, * WordPress merges the two fontFace lists but keeps the PARENT's fontFamily * string. The retired Cormorant preview child hit exactly the same wall. * * So the slugs are re-pointed here instead. Every parent stylesheet reads these * two variables, which is why the whole site changes voice from four lines. * * The doubled `:root:root` is deliberate. WordPress prints the preset defaults * on a plain `:root` in its global-styles block; repeating the selector raises * specificity just enough to win without reaching for !important, and stays * correct no matter what order the stylesheets end up in. */ :root:root { --wp--preset--font-family--playfair: 'Black Mango', Georgia, 'Times New Roman', serif; --wp--preset--font-family--dm-sans: 'KG Futura', Futura, 'Century Gothic', system-ui, sans-serif; } /* 1a — about-patterns.css :root ------------------------------------------- */ :root { --kog-green: #122C21; --kog-green-deep: #0B1B14; --kog-green-mid: #1F4A37; --kog-cream: #F4F1E7; --kog-cream-soft: #FFFFFF; --kog-gold: #EEBA2B; --kog-gold-light: #F6D368; --kog-ink: #000000; --kog-ink-soft: #444944; --kog-serif: 'Black Mango', Georgia, 'Times New Roman', serif; --kog-sans: 'KG Futura', Futura, 'Century Gothic', system-ui, sans-serif; } /* 1b — about-baseline.css :root ------------------------------------------- * The baseline family was built on its own slightly-warmer greens and a * Newsreader/Hanken type pair. The parent's Google Fonts request for those two * faces is dequeued in functions.php, so these have to be re-pointed or the * whole About (Baseline) page falls back to Georgia. */ :root { --kog-b-green: #122C21; --kog-b-green-deep: #0B1B14; --kog-b-green-mid: #1F4A37; --kog-b-line: rgba(255, 255, 255, 0.16); --kog-b-cream: #F4F1E7; --kog-b-cream-2: #FFFFFF; --kog-b-gold: #EEBA2B; --kog-b-gold-soft: #F6D368; --kog-b-ink: #000000; --kog-b-ink-soft: #444944; --kog-b-serif: 'Black Mango', Georgia, 'Times New Roman', serif; --kog-b-sans: 'KG Futura', Futura, 'Century Gothic', system-ui, sans-serif; } /* Black Mango is an all-caps display face with a tall cap height. The baseline * headings were sized for Newsreader's much smaller caps, so without this they * come out oversized and set at a line-height meant for lowercase. */ .kog-abb-section :is(h1, h2, h3) { line-height: 1.02; letter-spacing: 0; } /* 2 — the two literal 'DM Sans' declarations in about-baseline.css --------- */ .kog-abb-section :is(.kog-abb-body, .kog-abb-statement, .kog-abb-copy) p:not([class]), .kog-abb-section :is(.kog-abb-body, .kog-abb-statement, .kog-abb-copy) p.wp-block-paragraph:not([class*="kog-abb-"]):not([class*="kog-rk-"]), .kog-abb-section p.kog-abb-muted, .kog-abb-section .kog-abb-lead { font-family: var(--kog-b-sans); } /* --------------------------------------------------------------------------- * Type-metric corrections * Black Mango and Futura both run smaller on the body than Playfair and DM Sans * at the same nominal size, and Futura's x-height is unusually short. These two * rules are the difference between "the fonts changed" and "the page was set in * these fonts". * ------------------------------------------------------------------------- */ /* Futura's short x-height makes the parent's 1.55 body leading read as loose * and its tracking as tight. A hair of positive tracking restores the airy, * geometric feel the design has. */ body { letter-spacing: 0.01em; } /* Black Mango has no italic cut, so the `em` inside an italic-gold heading gets * a synthesised oblique. That is fine on a short accent phrase, which is all * this block style was ever meant for, but the slant plus the heavier face * needs a touch more leading than upright Playfair did or the descenders of one * line clip the caps of the next. */ :is(h1, h2, h3).is-style-kog-italic-gold { letter-spacing: 0; line-height: 1.1; } /* --------------------------------------------------------------------------- * Gold text on light grounds * ----------------------------------------------------------------------------- * KG gold #EEBA2B is much lighter than the #C4973A it replaces, and it manages * only 1.8:1 against white. The Canva design never runs into this because it * only ever puts gold on the green field, but this site puts gold eyebrows, * tags, stat numbers and italic heading accents straight onto the white page * and onto cream cards, where the brand gold goes faint. * * `--kg-gold-text` holds a gold that clears 4.5:1 on all three light grounds * the theme uses: * * white #FFFFFF 5.4:1 cream #F4F1E7 4.8:1 gold-pale #FBEEC4 4.7:1 * * It is a custom property, so it inherits: a dark section sets it once at the * section root and every piece of gold text inside goes back to full-strength * brand gold. Gold used as a BACKGROUND, border, rule or fill is untouched * everywhere. This changes text colour only. * ------------------------------------------------------------------------- */ :root { --kg-gold-text: #85650A; --kg-gold-text-hover: #A37D0D; } /* Dark grounds — restore the full-strength gold. Section-level classes only, so * the list stays stable as the patterns inside them change. Anything painting a * dark background needs to be here; anything missing shows a dark gold that is * dimmer than intended but still legible, which is the safe way to be wrong. * * Judge a section by the scrim it paints, not by the fact that it has a photo. * `.kog-hero-maximize` looks like the dark heroes either side of it and was in * this list, but its wash is warm cream at .65-1 alpha over the crowd shot and * its text colour is charcoal, so full-strength gold landed at 1.5:1 on it. */ .has-forest-background-color, .has-forest-mid-background-color, .has-black-background-color, .has-dark-background-color, .has-charcoal-background-color, .has-card-background-color, .has-card-hover-background-color, .has-border-background-color, .has-sage-background-color, .kog-ab--forest, .kog-ab--deep, .kog-abb--deep, .kog-abb-herofig, .kog-audit-cat-card, .kog-audit-cta-btn, .kog-audit-hero, .kog-audit-progress, .kog-bc-band, .kog-featured-testimonial-section, .kog-hero-alt, .kog-hero-video, .kog-home-hero, .kog-home-hero-card, .kog-home-hero-metric, .kog-kd-hero, .kog-kd-pullquote, .kog-lead-magnet-section, .kog-offering-card, .kog-page-hero, .kog-pillar, .kog-reinvent-band, .kog-rt-teaser, .kog-rtp-data, .kog-rtp-quote, .kog-rtp-video, .kog-site-header--overlay, .kog-speaker-intro, .kog-workshop-bridge, /* The ghost-on-gold button paints its own dark fill, so the button IS the * ground. Its sibling style ghost-on-dark is deliberately left out: that one is * transparent, and it gets used on cream cards as well as on dark sections, so * it has to inherit whichever ground it happens to be sitting on. */ .is-style-kog-ghost-on-gold .wp-block-button__link { --kg-gold-text: var(--wp--preset--color--gold); --kg-gold-text-hover: var(--wp--preset--color--gold-light); } /* ...and the one light variant nested inside a dark section class. */ .kog-kd-hero--light { --kg-gold-text: #85650A; --kg-gold-text-hover: #A37D0D; } /* Every selector the parent theme paints in gold text. * * This list is not hand-written and should not be hand-edited. It is every rule * across the parent's seven stylesheets whose `color` resolves to a gold token * (--wp--preset--color--gold, --kog-gold, --kog-b-gold), extracted by parsing * the CSS. Regenerate it the same way after the parent adds gold text; hunting * for these by eye misses the pattern-specific `em` accents, of which there are * more than thirty. * * `!important` is required because 30 of the parent's own gold rules use it. It * does not interfere with the light/dark switch above, which is decided by * custom-property inheritance rather than by specificity. * * .kgx-* selectors are deliberately excluded: /kg-style-test/ keeps its own * colours. */ .is-style-kog-eyebrow, .is-style-kog-italic-gold em, .is-style-kog-italic-gold i, .is-style-kog-ghost-on-gold .wp-block-button__link, .wp-block-button.is-style-kog-ghost-on-gold .wp-block-button__link, .is-style-kog-ghost-on-gold .wp-block-button__link:hover, .wp-block-button.is-style-kog-ghost-on-gold .wp-block-button__link:hover, .is-style-kog-ghost-on-dark .wp-block-button__link, .wp-block-button.is-style-kog-ghost-on-dark .wp-block-button__link, .kog-problem-headline em, .kog-problem-headline i, .kog-stat-number, .kog-pillar-tag, .kog-pillar-body strong, .kog-rx-symbol, .kog-rx-treatment, .kog-gold-callout .wp-block-button__link, .kog-gold-callout .wp-block-button__link:hover, .kog-cta-banner .wp-block-button__link, .kog-cta-banner .wp-block-button__link:hover, .kog-signature-badge-text, .kog-offering-number, .kog-offering-title em, .kog-offering-title i, .kog-offering-tagline, .kog-eyebrow, .kog-section-headline em, .kog-section-headline i, .kog-home-hero-card-label, .kog-home-hero-metric-value, .kog-featured-testimonial-eyebrow, .kog-featured-testimonial-quote em, .kog-featured-testimonial-quote i, .kog-featured-testimonial-headshot--placeholder, .kog-site-title em, .kog-site-title i, .kog-site-nav .wp-block-navigation-item__content:hover, .kog-site-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .kog-site-nav .wp-block-navigation-item.current-page-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item__content:hover, .kog-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover, .kog-page-footer a:hover, .kog-post-meta a, .wp-block-post-title a:hover, .kog-logo-card--dark .kog-logo-rehab, .kog-logo-card--light .kog-logo-rehab, .kog-section-num, .kog-social-card-eyebrow, .kog-audit-eyebrow, .kog-audit-title em, .kog-audit-meta-item span, .kog-audit-progress-count, .kog-audit-q-category, .kog-audit-results-title em, .kog-audit-score-number, .kog-audit-cat-label, .kog-audit-cat-num, .kog-audit-cta-btn, .kog-audit-cta-btn:hover, .kog-contact-label, .is-style-hero-headline em, .is-style-hero-headline i, .kog-stage-cta-title em, .kog-stage-cta-title i, .wp-block-button.is-style-pill-gold .wp-block-button__link:hover, .wp-block-button.is-style-pill-gold .wp-block-button__link:focus-visible, .kog-hero-alt__brand, .kog-hero-alt__headline em, .kog-hero-alt__headline i, .kog-hero-alt__form-title em, .kog-hero-alt__form-title i, .kog-feature-split .kog-feature-split__hi, .kog-bio-stat-number, .kog-shifts__eyebrow, .kog-shifts__title em, .kog-shifts__title i, .kog-shifts__lead em, .kog-shifts__lead i, .kog-shifts__arrow, .kog-shiftx__title em, .kog-shiftx__title i, .kog-shiftx__shift .after, .kog-shiftx__shift .arrow, .kog-pullquote-stage__eyebrow, .kog-pullquote-stage__quote em, .kog-pullquote-stage__quote i, .kog-journey__eyebrow, .kog-journey__title em, .kog-journey__title i, .kog-journey__era, .kog-video-reel__eyebrow, .kog-video-reel__title em, .kog-video-reel__title i, .kog-speaker-intro__name, .kog-planner-kit__head em, .kog-reel-modal__close:hover, .kog-bc-stat-number, .kog-bc-band-number, .kog-method-col-tagline, .kog-method-arrow, .kog-abb-resttech__line, .kog-ab-kicker, .kog-ab-h1 em, .kog-ab-h2 em, .kog-ab-pullquote em, .kog-ab-quote-xl em, .kog-ab--mission .kog-ab-kicker, .kog-abb-kicker, .page-id-55 .kog-ed .kog-ed-chapnum, .kog-abb-h1 em, .kog-abb-h2 em, .kog-abb-h3 em, .kog-abb-pull em, .kog-abb-bignote em, .kog-abb-section .kog-abb-thesis em, .kog-abb-stat-num, .kog-abb-mark, .kog-abb-cite, .kog-abb-readmore > summary, .kog-abb-reckoning-yo, .kog-abb-section .kog-rk-statement, .kog-abb-resttech__head em, .kog-recovery-band__head em, .kog-recovery-band .kog-rk-statement, .kog-recovery-band .kog-rk-lead--gold, .kog-ed-qmark, .kog-reinvent-band__kicker, .kog-reinvent-band__head em, .kog-kd-hero__title em, .kog-kd-hero--light .kog-kd-hero__subtitle, .kog-kd-stage__content .kog-kd-split__head em, .kog-kd-stage__content .kog-kd-split__head i, .kog-kd-split__head em, .kog-kd-banner__q em, .kog-kd-lead__big em, .kog-kd-pullquote__q em, .kog-kd-col__head em, .kog-kd-stat__number, .kog-kd-cross__head em, .kog-kd-cross__title em, .kog-kd-hero__pairs a, .kog-kd-hero--charisma .kog-kd-hero__title em, .kog-kd-hero__stmt-line em, .kog-rtp-why__statement, .kog-rtp-quote__cite, .kog-rtp-step__label, .kog-rtp-connect__mark, .kog-rtp-connect__side--accent .kog-rtp-connect__line, .kog-rtp-case__title, .kog-rtp-stat__figure, .kog-rtp-stat__ref { color: var(--kg-gold-text) !important; } /* The same, for rules painted in the lighter gold (hover and soft accents). */ .kog-shift-label-after, .kog-post-meta a:hover, .kog-hero-alt__form-eyebrow, .kog-bc-band-eyebrow, .kog-rt-teaser-line, .kog-ab--forest .kog-ab-note, .kog-ab--deep .kog-ab-note, .kog-ab-stat-num, .kog-ab-impact h3, .kog-abb-btn-ghost > .wp-block-button__link:hover, .kog-kd-hero__subtitle, .kog-kd-pullquote__cite { color: var(--kg-gold-text-hover) !important; } /* The three big watermark numerals behind the method, outcome and Rest Tech step * cards are hardcoded to the old gold at 8-42% alpha. They are decorative and * aria-hidden, so they stay faint on purpose and are left out of the gold-text * rule above — but the tint itself still needs to be the KG gold. */ .kog-outcome-number { color: rgba(238, 186, 43, 0.42) !important; } .kog-rtp-step__num { color: rgba(238, 186, 43, 0.13); } .kog-method-col-num { color: rgba(238, 186, 43, 0.08); } /* --------------------------------------------------------------------------- * Homepage hero — dark scrim instead of the warm-white wash * ----------------------------------------------------------------------------- * The parent lays a warm-white gradient over the hero photo, up to 0.95 opacity * on the left, so that charcoal text can sit on it. The photo underneath is a * dark stage shot: sampling the actual crop, the left third has a median * luminance of 0.02 and the right third about 0.17, with Khaliah spotlit in the * middle at 0.6. Painting white over that is what flattens it — the picture * arrives as a pale wash rather than a stage. * * So the scrim is inverted. A dark spotlight vignette in the KG green-black * deepens the frame and leaves the middle open, which reads the way the photo * was actually lit, and the hero copy flips to cream. Text contrast was checked * by compositing this gradient over the real crop at six viewport sizes and * measuring the 98th-percentile background luminance under each block of copy: * * credentials 6.2:1 name 5.0:1 brand (68px gold) 4.1:1 * headline 8.6:1 quote 7.4:1 citation 6.9:1 * * Small copy clears 4.5:1 and the two display lines clear the 3:1 that large * text needs. Nothing here is guesswork; re-measure if the photo is replaced. * * The image is the parent's, hence the walk back up out of the child directory. * ------------------------------------------------------------------------- */ .kog-hero-alt { background-image: radial-gradient( ellipse 30% 56% at 50% 24%, rgba(9, 20, 15, 0.16) 0%, rgba(9, 20, 15, 0.32) 38%, rgba(9, 20, 15, 0.64) 70%, rgba(9, 20, 15, 0.74) 100% ), linear-gradient( to bottom, rgba(9, 20, 15, 0) 62%, rgba(9, 20, 15, 0.30) 100% ), url('../../../kog-performance-rehab/assets/images/khaliah-superhero.jpg'); color: var(--wp--preset--color--cream); } /* The copy flips light. Gold is left alone — .kog-hero-alt is already declared * a dark ground above, so the brand lockup and the italic accent in the * headline both keep the full-strength brand gold. */ .kog-hero-alt__headline, .kog-hero-alt__name, .kog-hero-alt__body, .kog-hero-alt__testimonial, .kog-hero-alt__cite { color: var(--wp--preset--color--cream) !important; } .kog-hero-alt__credentials span { color: var(--wp--preset--color--cream); border-color: rgba(244, 241, 231, 0.34); } /* The secondary CTA was a charcoal outline meant for a pale ground. */ .kog-hero-alt__actions .kog-btn-secondary .wp-block-button__link { color: var(--wp--preset--color--cream); border-color: rgba(244, 241, 231, 0.55); } .kog-hero-alt__actions .kog-btn-secondary .wp-block-button__link:hover, .kog-hero-alt__actions .kog-btn-secondary .wp-block-button__link:focus-visible { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--charcoal); border-color: var(--wp--preset--color--cream); } /* Below 782px the columns stack over the middle of the frame, where the * vignette is deliberately open, so the phone layout gets a plain top-down * scrim instead. * * The horizontal position moves with it. At a phone's aspect ratio, `cover` * scales the photo to roughly three times the viewport width, and the parent's * 92% pins that to the right-hand edge — which on a phone is the empty stage * backdrop, with Khaliah cropped out of frame entirely except for one elbow. * The old warm-white wash hid that; a dark scrim over an out-of-frame subject * would just read as a dark blur. 40% brings her back into the picture. */ @media (max-width: 781px) { .kog-hero-alt { background-position: 40% 15%; background-image: linear-gradient( to bottom, rgba(9, 20, 15, 0.78) 0%, rgba(9, 20, 15, 0.62) 42%, rgba(9, 20, 15, 0.72) 78%, rgba(9, 20, 15, 0.86) 100% ), url('../../../kog-performance-rehab/assets/images/khaliah-superhero.jpg'); } } /* --------------------------------------------------------------------------- * The KG pill * * The Canva hero on /kg-style-test/ builds its two CTAs as fully round gold * pills — 999px, Futura 700 uppercase, and padding that works out to 1em above * and below against 2em either side. That geometry is the house button now, on * every button the site paints. * * Only the shape and those proportions travel. Each family keeps the fill it * already had, so the gold primary still outranks the outlined secondary and * the green-on-gold button still reads against the gold band it sits on. The * reference puts two solid gold pills side by side because that hero has no * secondary action; copying the fill as well would flatten the hierarchy * everywhere else and leave the on-gold buttons invisible. * * Expressing the padding in `em` rather than `rem` is what makes one rule fit * every size: the header pill at 10px and the hero pill at 16px both land on * the reference's ratio instead of one fixed measurement that suits neither. * * `!important` is on the radius alone. Both header parts and `hero-default` * write a radius straight into the markup, and two of the parent's ghost * styles already use !important, so nothing gentler reaches them. Padding and * hover are deliberately left unflagged — that is what lets the header pill, * and the pixel-matched /kg-style-test/ page, keep their own tighter padding. * ------------------------------------------------------------------------- */ .wp-block-button__link, .wp-element-button, .kog-kd-btn, .kog-audit-nav-btn, .kog-audit-cta-btn, .kog-optin-form button { border-radius: 999px !important; } /* The reference's proportions. Unflagged, so anything carrying its own padding * — the two header pills, the kgx page — keeps it. */ .wp-block-button__link, .wp-element-button { padding: 1em 2em; } /* Lift and warm on hover, straight off `.kgx-btn`. The parent gives most * buttons a colour transition already; this adds the movement. */ .wp-block-button__link, .wp-element-button, .kog-kd-btn, .kog-audit-nav-btn, .kog-audit-cta-btn { transition: filter 0.2s ease, transform 0.2s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .wp-block-button__link:hover, .wp-element-button:hover, .kog-kd-btn:hover, .kog-audit-nav-btn:hover, .kog-audit-cta-btn:hover { filter: brightness(1.08); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .wp-block-button__link:hover, .wp-element-button:hover, .kog-kd-btn:hover, .kog-audit-nav-btn:hover, .kog-audit-cta-btn:hover { transform: none; } } /* The header CTA is the one button the restyle never reached: both header * parts hardcode the PARENT's old gold and ink into the markup, so it has been * shipping in #C4973A on a site whose every other button is #EEBA2B. Same fix * shape as the radius above — the part stays inherited rather than forked. */ .kog-site-header .wp-block-button__link { background-color: var(--wp--preset--color--gold) !important; color: var(--wp--preset--color--forest) !important; } /* The two ghost styles set their 6px with !important at three classes deep, so * the blanket rule above ties on importance and loses on specificity. Matching * their selectors exactly hands it back on load order — the child stylesheet is * enqueued after every parent one. */ .is-style-kog-ghost-on-gold .wp-block-button__link, .wp-block-button.is-style-kog-ghost-on-gold .wp-block-button__link, .is-style-kog-ghost-on-dark .wp-block-button__link, .wp-block-button.is-style-kog-ghost-on-dark .wp-block-button__link { border-radius: 999px !important; }