/** * Interaction foundation. * * theme.json emits the design tokens; the block stylesheets draw the * components. This file is the layer in between: the rules that must be the * same everywhere or they are wrong everywhere — focus, motion, tap targets, * and the pressed/disabled states of controls. * * Everything here is written with :where(), so it carries zero specificity. A * block that genuinely needs a different treatment overrides it with an * ordinary class selector and no !important. That is deliberate: this file sets * the default, it does not win arguments. * * The exceptions are the shared components further down (.pchs-on-dark, the * button, the card roles, the disclosure): plain classes, because a component * a block opts into by name has to beat core's element styles. Each says so. */ :root { /* ---- motion ------------------------------------------------------- */ /* * Three durations, not a scale. `fast` is for a colour or border swap the * eye should not notice happening; `base` is for a control changing shape * or elevation; `slow` is for something entering or leaving the page. * Anything longer than `slow` on a brochure site is decoration. */ --pchs-duration-fast: 120ms; --pchs-duration: 180ms; --pchs-duration-slow: 260ms; /* Decelerating: fast off the mark, settling at the end. A symmetric ease reads as floating, which is the wrong feel for this site. */ --pchs-ease: cubic-bezier(0.2, 0, 0.2, 1); /* ---- focus -------------------------------------------------------- */ /* * One ring, two tones, because no single colour in the palette clears * 3:1 on every ground the site actually puts a control on. Measured * against the nine grounds in theme.json: * * base surface green greenDark greenTint navy navyDeep dangerTint ink * navy-deep 16.54 15.34 3.12 2.07 12.73 1.41 1.00 14.46 1.11 * base (white) 1.00 1.08 5.30 7.98 1.30 11.69 16.54 1.14 18.42 * * Whichever ground a control lands on, one of the two rings clears 3:1 * against it — worst case 5.30 (navy-deep on green). The two rings * measure 16.54:1 against each other, so the indicator is legible over a * photograph too, where the ground is unknown by definition. * * The halo is painted with box-shadow so it fills the outline-offset gap * exactly. A control that already carries a box-shadow has to restate it * alongside --pchs-focus-halo rather than inherit this rule; there are * four of those on the site and each says so where it is written. */ --pchs-focus-color: var(--wp--preset--color--navy-deep); --pchs-focus-halo-color: var(--wp--preset--color--base); --pchs-focus-width: 2px; --pchs-focus-gap: 2px; --pchs-focus-halo: 0 0 0 var(--pchs-focus-gap) var(--pchs-focus-halo-color); /* ---- tap targets -------------------------------------------------- */ /* WCAG 2.5.5 Target Size (Enhanced). 2.5.8 only asks for 24px, but this site is sold on a phone held in one hand on a driveway. */ --pchs-tap: 2.75rem; /* ---- control and chrome sizes ------------------------------------- */ /* Three button heights, 44 / 48 / 56. Inputs are 3rem, like the default button, so a field and its submit share a baseline. */ --pchs-btn-h-sm: 2.75rem; --pchs-btn-h: 3rem; --pchs-btn-h-lg: 3.5rem; --pchs-callbar-h: 4rem; /* The client asked for the large logo (144px); the scroll shrink stays. */ --pchs-logo-h: 9rem; --pchs-logo-h-scrolled: 6rem; --pchs-header-pad-y: var(--wp--preset--spacing--40); /* The header's height once scrolled: what an in-page anchor has to clear. 129px at desktop, 73px below 80em. */ --pchs-header-h-scrolled: calc(var(--pchs-logo-h-scrolled) + 2 * var(--pchs-header-pad-y) + 1px); --pchs-card-pad: var(--wp--preset--spacing--50); } /* Below the nav breakpoint (80em) the header is the compact drawer bar. */ @media ( max-width: 79.99em ) { :root { --pchs-logo-h: 5.5rem; --pchs-logo-h-scrolled: 3.5rem; --pchs-header-pad-y: var(--wp--preset--spacing--20); } } @media ( min-width: 48em ) { :root { --pchs-card-pad: var(--wp--preset--spacing--60); } } /* ---- dark grounds ----------------------------------------------------- */ /* * Any section root on navy, navy-deep or green-dark carries this class. It * does not paint anything itself: it flips the variables the type roles * (style.css), links and the focus ring read, so a heading, a lead or a ring * inside it is legible without each block restating the dark-ground colours. * The focus pair swaps too: a white ring with a navy-deep halo. */ .pchs-on-dark { --pchs-heading-color: var(--wp--preset--color--base); --pchs-lead-color: var(--wp--preset--color--border-cool); --pchs-link-color: var(--wp--preset--color--green-light); --pchs-eyebrow-color: var(--wp--preset--color--green-light); --pchs-focus-color: var(--wp--preset--color--base); --pchs-focus-halo-color: var(--wp--preset--color--navy-deep); /* Restated: a custom property that reads another resolves where it is declared, so the :root halo stayed white here without this line. */ --pchs-focus-halo: 0 0 0 var(--pchs-focus-gap) var(--pchs-focus-halo-color); } /* ---- page flow -------------------------------------------------------- */ /* * Sections meet edge to edge. * * Core's flow layout gives every child of .wp-site-blocks and of a flow * post-content a 24px margin-block-start (blockGap). Between two full-bleed * sections that paints a 24px white stripe: under the header, between every * pair of bands, and above the band that follows main. Sections carry their * own padding, so the gap is dropped for them only; core prose inside * post-content keeps blockGap. * * Blocks are matched on the block wrapper class, not on "pchs-": core * paragraphs carry pchs- classes too (.pchs-attribution, .pchs-cross-service) * and must keep their gap. * * Templates place sections straight into main as well (the FAQ, financing, * seals and chips after post-content on a service page), and main is a flow * group too. Those are matched on the block wrapper class, not on "pchs-", * because the page title (.pchs-page-title) is a main child that should keep * its gap under the breadcrumbs. Likewise a post-content that opens with a * section right after a section (a city-service page: breadcrumbs, then the * hero inside the content). After the page title it keeps the gap, or the * title's descenders sit on the next band. */ :where(.wp-site-blocks) > main, :where(.wp-site-blocks) > main + *, :where(.wp-site-blocks) > [class*="wp-block-pchs-"] { margin-block-start: 0; } .wp-block-post-content > .alignfull, .wp-block-post-content > [class*="wp-block-pchs-"], main > [class*="wp-block-pchs-"], main > [class*="wp-block-pchs-"] + .wp-block-post-content:has(> [class*="wp-block-pchs-"]:first-child) { margin-block-start: 0; } /* ---- focus ------------------------------------------------------------ */ :where( a[href], area[href], button, input, select, textarea, summary, [contenteditable], [tabindex]:not( [tabindex="-1"] ) ):focus-visible { outline: var(--pchs-focus-width) solid var(--pchs-focus-color); outline-offset: var(--pchs-focus-gap); box-shadow: var(--pchs-focus-halo); } /* * Some engines still paint their own ring under ours. Suppressing :focus * wholesale would take the ring away from keyboard users on browsers without * :focus-visible, so this is scoped to the case where ours is already showing. */ :where( a[href], button, input, select, textarea, summary ):focus:not( :focus-visible ) { outline: none; } /* ---- tap targets ------------------------------------------------------ */ :where( button, input[type="button"], input[type="submit"], input[type="reset"], select ) { min-height: var(--pchs-tap); } /* * Links that own their line. * * A blanket rule on `a` would be wrong: most links here sit inside a sentence, * where WCAG 2.5.8's inline exception applies and a 44px box tears the * paragraph apart. But a link that is the only child of a list item or a * heading is not in a sentence. It is a target with a line to itself, and it * should be the size of a target. * * Measured on the home page at 390px: of 75 focusable elements under 44x44, * 39 are `li > a:only-child` (city chips, footer link lists, nav lists) and 6 * are `heading > a:only-child` (service and product card titles, 20px tall on * the primary navigation path). These two selectors are 45 of them. Most of the * remainder are false positives — the skip link and the visually-hidden radios * behind the form chips are 1x1 by design, and their real targets are elsewhere. * * A foundation rule rather than 45 block-level ones, because the next card * title somebody writes should not have to rediscover it. * * It does move layout in the blocks it reaches — a 20px title becomes 44px — * and that is deliberate. The alternative is the padding-cancelled-by-negative- * margin trick used for breadcrumbs and the announcement-bar link, which grows * a hit area inside existing space. That does not generalise to a stacked list: * two links whose padding is cancelled by negative margins overlap, and * whichever paints last silently takes the other's hit area. An honest 44px * that moves the layout beats a 44px that lies about which link you pressed. * * Unclassed links only. `a:only-child` scores (0,1,1), which beat every * single-class block rule on a link it reached: the nav's submenu links were * forced to inline-flex over their own display: block and could be clicked * across their text only (82 of 240px). A link with a class belongs to a * block, and the block sizes its own target. */ :where( li, h1, h2, h3, h4, h5, h6 ) > a:only-child:not( [class] ) { display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--pchs-tap); } /* ---- pressed, hover, disabled ----------------------------------------- */ /* * A button that moves 1px when pressed is the whole of the "physical tool" * idea, and it is the only motion on this site a visitor triggers on purpose. * It has no transition on the way down so it lands on the same frame the * finger does; the release is carried by the colour transition below. */ @media ( prefers-reduced-motion: no-preference ) { :where( button, input[type="submit"], .wp-element-button, .pchs-btn ):not( :disabled ):active { transform: translateY( 1px ); } :where( button, input[type="submit"], .wp-element-button ) { transition: background-color var(--pchs-duration-fast) var(--pchs-ease), color var(--pchs-duration-fast) var(--pchs-ease), border-color var(--pchs-duration-fast) var(--pchs-ease), box-shadow var(--pchs-duration-fast) var(--pchs-ease); } :where( a ) { transition: color var(--pchs-duration-fast) var(--pchs-ease); } } /* * Disabled is a statement about the control, so it reads the same on every * one: faded, and a cursor that says "not now". WCAG 1.4.3 exempts inactive * components from the contrast floor, which is what makes 0.55 acceptable — * it lands under 4.5:1 against most of the palette, and that is the signal. * * `cursor: progress` is a different claim ("working"), and forms.css keeps it * on the submit button while a lead is in flight. That rule is a class * selector, so it wins here without argument. */ :where( button, input, select, textarea ):disabled, :where( [aria-disabled="true"] ) { opacity: 0.55; cursor: not-allowed; } /* * A disabled fieldset already fades every control inside it. Fading the * fieldset as well compounds the two and takes the legend below legibility, so * the container stays at full opacity and the controls carry the state. */ :where( fieldset ):disabled { cursor: not-allowed; } /* ---- button ----------------------------------------------------------- */ /* * The one button. Every call to action on the site, whether an or a *