/* ============================================================ Section modifiers. design-tokens.css ships byte-identical to the design handoff so it can be re-synced when the designer revises it. This file holds what that file cannot, in two parts: 1. Values reference.html carried as inline style attributes, lifted here as classes rather than left in the markup. 2. Overrides of Kadence's own CSS where it wins against design-tokens.css. Nothing here is a new design decision. Every value restores the handoff's stated intent. Do not add design decisions to this file. ============================================================ */ /* reference.html:

*/ .ms-page .ms-label--wide { margin-bottom: 36px; } /* reference.html:

(bio) */ .ms-page .ms-label--tight { margin-bottom: 24px; } /* reference.html:
— "What I offer" butts directly against the hero with no rule between. */ .ms-page .ms-section--flush { border-top: none; padding-top: 0; } /* Fallback when no contact form is configured yet (see ms_contact_form()). */ .ms-page .ms-contact__fallback { font-size: 17px; line-height: 1.55; color: var(--ms-on-dark); margin: 0; } /* BRIEF §8.1 was decided as "no detail pages at launch", so case-study cards are
, not . .ms-cs's hover lift promises a destination that does not exist; suppress it until single templates ship. */ .ms-page .ms-cs--static { cursor: default; } .ms-page .ms-cs--static:hover { transform: none; } /* ============================================================ 2. Kadence overrides ============================================================ */ /* Kadence emits a bare `h1, h2, h3 { color: var(--global-palette3) }` (#1f2933). design-tokens.css never sets a heading colour — in reference.html headings correctly inherit --ms-ink from .ms-page, because nothing competes. Inside Kadence that bare element selector beats inheritance, so every heading on the page rendered #1f2933 instead of #111111. BRIEF §2: ink draws every heading. Restore it. Specificity here is (0,1,1), below design-tokens.css's `.ms-page h2.ms-label` (0,2,1), so the white pills are untouched. */ .ms-page h1, .ms-page h2, .ms-page h3 { color: var(--ms-ink); } /* The one heading that sits on the dark band. Inheriting --ms-ink would put #111111 on #111111. Without this rule Kadence rendered it #1f2933 on #111111 — a contrast ratio of 1.28:1, effectively invisible. This is the heading equivalent of the link trap design-tokens.css warns about above its footer rules. */ .ms-page .ms-section--ink .ms-contact__h { color: #ffffff; } /* Kadence suppresses focus outlines in three separate places: :where(html:not(.no-js)) .hide-focus-outline :focus (0,2,0) input[type="text"]:focus (0,2,1) .kb-form-basic-style input[type="text"]:focus (0,3,1) design-tokens.css declares the focus ring at `.ms-form input:focus-visible`, which is (0,2,1). It beats the first two but LOSES to the third, so the ring died on exactly the elements that matter most: the contact form's inputs. A keyboard user got no indication of where they were. Doubling .ms-page lifts these to (0,4,1) so they win on specificity rather than on load order — the block stylesheet is enqueued during render, so its position relative to this file is not reliable. The handoff README lists focus states under "what must not break": yellow, 3px, 2px offset. That is what these restore, unchanged. Kadence's site-wide "hide focus outline" setting should also be turned off in the Customizer. It is bad for every page, not just this one. */ .ms-page.ms-page .ms-form input:focus-visible, .ms-page.ms-page .ms-form textarea:focus-visible, .ms-page.ms-page .ms-form button:focus-visible, .ms-page.ms-page .ms-form [type="submit"]:focus-visible, .ms-page.ms-page a:focus-visible, .ms-page.ms-page button:focus-visible { outline: 3px solid var(--ms-cta); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ms-ink); } /* The ink halo above is what makes the yellow ring work on light bands. Measured against what each focusable actually sits on, --ms-cta alone gives: hero "Start a diagnostic" 1.38:1 on white hero "See the work" 1.38:1 on white nav "Let's talk" pill 1.38:1 on white form submit 13.65:1 on the ink band footer links 13.65:1 on the ink band So the design's focus ring was invisible on every focusable in the top half of the page, including the primary CTA. It only ever worked on the dark band. Geometry, measured out from the border box: the box-shadow spreads 0-7px and the outline paints above it at 2-5px, giving ink / yellow / ink. On white the outer ink edge carries the contrast at 18.9:1. On the ink band the halo is invisible against the background and the yellow ring carries it, which is what it already did. One rule, correct on both. This keeps yellow as the focus colour everywhere, so BRIEF §2 is intact: yellow still means "submits or scrolls to the contact form", focus rings included. box-shadow paints outside the border box without affecting layout, so nothing reflows. */ /* Footer links measured 21px tall on the live page, under WCAG 2.2 AA's 24x24 minimum target size (SC 2.5.8). reference.html has the same problem, so this is the design contradicting the handoff README's own "44px minimum on every interactive target" rule rather than something the WordPress build broke. inline-flex plus min-height lifts the hit area to 24px without moving any text: .ms-footer is already a flex row whose children stretch, so the row grows by 3px and nothing reflows. Centring the row keeps the copyright span on the same baseline as the links now that they are taller. This deliberately stops at 24px rather than 44px. At 13px type, a 44px row would leave three short links floating in a band of empty space and change the footer's proportions. 24px is the AA threshold and costs nothing. */ .ms-page .ms-footer { align-items: center; } .ms-page .ms-footer a { display: inline-flex; align-items: center; min-height: 24px; } /* Form confirmation and error messages. Kadence ships these as: .kb-adv-form-success { background:#ebf8ff; padding:1em; border-radius:3px; border:0; color:#2b6cb0 } .kb-adv-form-message { margin-bottom:3px; margin-top:0px } Two problems. The zero top margin welds the message to the Send button, and the pale blue fill with #2b6cb0 text is off-system: BRIEF §2 gives blue one job, metric bands on case-study cards, and nothing else. The design defines no success state, so the message is treated as what it is, a sibling of the form's fields: white fill, ink text, 12px radius, the same as the inputs above it. The copy carries the "it worked" meaning, so the colour does not have to, which keeps §2 intact. Inventing a success green would collide with the diagnostic mint. The message is inserted as a SIBLING AFTER the form, not inside it -- the frontend JS calls insertAfter(createElementFromHTML(html), form) -- so .kb-advanced-form's own 1.6em flex gap never applies to it. That is why Kadence's margin-top:0 leaves it welded to the Send button. 24px here restores the same cadence as the gaps between fields. Errors keep their red text. It is semantically load-bearing and the palette has no alternative, so only the geometry is brought into line. */ .ms-page .ms-form { --kb-form-success-background: #ffffff; --kb-form-success-color: var(--ms-ink); } .ms-page .ms-form .kb-adv-form-message, .ms-page .ms-form .kb-adv-form-success, .ms-page .ms-form .kb-adv-form-warning { margin-top: 24px; margin-bottom: 0; padding: 16px 20px; border-radius: var(--ms-radius-btn); border: 0; font-size: 15px; line-height: 1.5; } .ms-page .ms-form .kb-adv-form-success { background: #ffffff; color: var(--ms-ink); }