") center/contain no-repeat;mask:url("data:image/svg+xml,

") center/contain no-repeat} .pw-header__main{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-4)} .pw-header__logo{display:flex;align-items:center;line-height:0} .pw-header__logo img{height:80px;width:auto} .pw-header__actions{display:flex;align-items:center;gap:var(--space-5)} .pw-header__cta .wp-block-button__link{font-size:var(--fs-body-small);padding:9px 16px} .pw-header__main .wp-block-buttons-is-layout-flex {margin-top: 0} /* Nav links: the design system's .pw-nav__link, remapped onto core's markup. */ .pw-nav .wp-block-navigation__container{gap:var(--space-5);align-items:center} .pw-nav .wp-block-navigation-item__content{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--blue-900);border-bottom:2px solid transparent;padding-block:4px;transition:var(--transition-control)} .pw-nav .wp-block-navigation-item__content:hover{color:var(--green-700);border-bottom-color:var(--green-300)} .pw-nav .current-menu-item>.wp-block-navigation-item__content{color:var(--green-700);border-bottom-color:var(--brand-green)} /* Nav link colour, restated at higher specificity. Fixed 2026-09-15. * * The three rules above set every other property correctly, but their colour * never applied. Core ships * `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}` * with the class doubled on purpose -- 0,3,0 against the 0,2,0 above -- so the * links inherited instead: --text-body on desktop, #000 in the overlay. Hover * and current-page happened to reach 0,3,0 and sit later in the file, which is * why those two worked and the resting colour silently did not. * * Colour only, and deliberately not by raising the specificity of the rules * above. Those also carry padding-block:4px, and core zeroes the padding inside * the overlay at 0,4,0; matching that number would leave the overlay's spacing * decided by stylesheet order. The 4px is a desktop underline offset and is not * wanted in the overlay, so the existing rules are left at 0,2,0 and only the * colour is restated here. * * .pw-header prefixes rather than doubling alone, for the reason given at the * overlay breakpoint below: it outranks core regardless of stylesheet order. */ .pw-header .pw-nav .wp-block-navigation-item__content.wp-block-navigation-item__content{color:var(--blue-900)} .pw-header .pw-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover{color:var(--green-700)} .pw-header .pw-nav .current-menu-item>.wp-block-navigation-item__content.wp-block-navigation-item__content{color:var(--green-700)} /* ------------------------------------------------------- mobile overlay * * Everything below applies only while core's overlay is open. The nav carries * four pages plus the Contact Us Buttons block (see functions.php, and section * 8 of DEPLOY.md for why the button rather than a fifth nav link). * * No media queries: the rules key off .is-menu-open, which is present exactly * when the overlay is open and absent otherwise, at any viewport width. That * keeps the design system's no-breakpoints approach intact and means these * cannot desynchronise from the 899px overlay breakpoint above. */ /* The Contact Us button renders as a plain link in the overlay, matching the other four. It stays a green button in the desktop header. Specificity has to clear .wp-block-button:not(.is-style-outline)>.wp-block-button__link (0,3,0) in the buttons section above; this is 0,5,0. colour matches the four navigation links, which now take --blue-900 from the restated rules in the nav section above. padding stays 0 because core zeroes the links' padding inside the overlay and this item has to match them. */ .pw-nav .wp-block-navigation__responsive-container.is-menu-open .pw-header__cta .wp-block-button__link{background:none;background-image:none;color:var(--blue-900);box-shadow:none;border:none;border-bottom:2px solid transparent;border-radius:0;padding:0;font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-semibold);transition:var(--transition-control)} .pw-nav .wp-block-navigation__responsive-container.is-menu-open .pw-header__cta .wp-block-button__link:hover{background:none;color:var(--green-700);border-bottom-color:var(--green-300)} /* Current page, matching the four nav links. sws_pws_mark_current_header_cta() in functions.php adds the modifier, because core only marks navigation-link items and this one is a Buttons block. .pw-header prefix takes it to 0,6,0 so it beats the :hover rule above, mirroring how .current-menu-item outranks hover for the other items. */ .pw-header .pw-nav .wp-block-navigation__responsive-container.is-menu-open .pw-header__cta--current .wp-block-button__link{color:var(--green-700);border-bottom-color:var(--brand-green)} /* Focus, too: the button's own ring is a white-then-green halo tuned for a filled green control. As a plain link it must match the other overlay links, which take the outline from base.css. */ .pw-nav .wp-block-navigation__responsive-container.is-menu-open .pw-header__cta .wp-block-button__link:focus-visible{box-shadow:none;outline:2px solid var(--border-focus);outline-offset:2px} /* Site logo, first item in the overlay only. * * core/site-logo is one of the three blocks core wraps in an

by default, * so the whole list item is hidden rather than just the image -- an emptied but * still-present

would take part in the desktop nav's flex gap and open a * space before Home. */ .pw-nav .wp-block-navigation__container>li:has(.wp-block-site-logo){display:none} .pw-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container>li:has(.wp-block-site-logo){display:block;margin-block-end:var(--space-2)} .pw-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-site-logo img{height:56px;width:auto} /* ------------------------------------------------------------------ footer */ .pw-footer,footer.wp-block-template-part{background:var(--blue-900);color:var(--text-inverse-muted);padding-block:var(--space-9) var(--space-6);font-size:var(--fs-body-sm)} .pw-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-8)} .pw-footer .pw-footer__heading{color:var(--neutral-0);font-family:var(--font-body);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);line-height:var(--lh-heading);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;margin-block-end:var(--space-4)} .pw-footer a{color:var(--text-inverse-muted);border-bottom-color:transparent;text-decoration:none} .pw-footer a:hover{color:var(--neutral-0);border-bottom-color:var(--green-400)} .pw-footer__logo{margin-block-end:var(--space-4)} .pw-footer__logo img{height:46px;width:auto;filter:brightness(0) invert(1)} .pw-footer__brand p{max-width:38ch;line-height:var(--lh-body)} .pw-footer__links{display:flex;flex-direction:column;gap:10px} .pw-footer__links,.pw-footer__links li{list-style:none;margin:0;padding:0} .pw-footer__phone a,.pw-footer__email a,.pw-footer__address{display:flex;gap:8px;align-items:flex-start} .pw-footer__phone a::before,.pw-footer__email a::before,.pw-footer__address::before{content:"";inline-size:14px;block-size:14px;flex:none;margin-block-start:4px;background-color:currentColor} .pw-footer__phone a::before{-webkit-mask:url("data:image/svg+xml,

") center/contain no-repeat;mask:url("data:image/svg+xml,

") center/contain no-repeat} .pw-footer__email a::before{-webkit-mask:url("data:image/svg+xml,

") center/contain no-repeat;mask:url("data:image/svg+xml,

") center/contain no-repeat} .pw-footer__address::before{-webkit-mask:url("data:image/svg+xml,

") center/contain no-repeat;mask:url("data:image/svg+xml,

") center/contain no-repeat} /* Core's default separator is 100px wide and draws two borders. */ .pw-footer__rule{width:100%;max-width:none;border:none;border-top:1px solid var(--border-on-dark);margin:var(--space-8) 0 var(--space-5)} /* Site credit: one centred line across the bottom. Rebuilt 2026-09-15. * * Was two paragraphs pushed to opposite ends with space-between. Now the house * standard -- "Copyright (c) YEAR Company | Site by Scheidler Web Solutions" -- * centred, with the year and company name coming from the `copyright` binding * so neither can go stale. * * The divider is a ::before on the credit rather than markup, because the * alternative inside a block template part is a stray

, which is a * paragraph element carrying no sentence. Block Bindings escape their value * (core sets it as text, not HTML), so the bound copyright text cannot sit in * the same

as the link and image -- hence two paragraphs in a flex row * rather than the single

the source markup used. Rendered result is * identical. */ .pw-footer__credit{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--space-3);text-align:center;font-size:var(--fs-caption);color:#8d9bba} .pw-footer__credit p{margin:0} .pw-footer__sws::before{content:"|";margin-inline-end:var(--space-3);color:var(--border-on-dark)} /* The link is inline-flex, so its baseline comes from the first flex item -- the 22px icon -- whose baseline is its bottom edge. In an inline context that plants the icon's bottom on the paragraph's text baseline, levers the link up and leaves the leftover leading below, so centering the two credit paragraphs against each other does not center the two text runs. Making this paragraph a flex container removes the inline baseline from the equation entirely. The 1px padding offsets the transparent border-bottom base.css gives every link (the hover underline), which otherwise sits inside the box and shifts the icon and text up half a pixel. Note: align-items:baseline on .pw-footer__credit is NOT the fix here -- it makes the offset worse (-3.4px becomes -6.9px), because the paragraph's baseline is the icon's bottom edge rather than its own text baseline. */ .pw-footer__sws{display:flex;align-items:center;justify-content:center} .pw-footer__sws a{display:inline-flex;align-items:center;gap:7px;color:inherit;border-bottom-color:transparent;padding-block-start:1px} .pw-footer__sws a:hover{color:var(--neutral-0);border-bottom-color:var(--green-400)} /* Explicit box: base.css sets img{height:auto}, which would let the 17x22 icon derive its height from the width attribute and shift as the font loads. */ .pw-footer__sws img{width:17px;height:22px;flex:none} /* The divider only makes sense while both halves share a line. Below this the row wraps and it would lead the second line on its own. Third breakpoint in this file, and the only one that exists for a purely typographic reason. */ @media (max-width:639px){ .pw-footer__sws::before{content:none} } /* -------------------------------------------------------- page title / 404 */ .pw-pagetitle{padding-block:var(--section-y) 0} .pw-notfound h1{margin-block:var(--space-3) var(--space-5)} .pw-notfound .wp-block-buttons{margin-block-start:var(--space-7)} /* -------------------------------------------------------------- responsive * * The design system ships no media queries at all - it relies on clamp() and * auto-fit grids. Two places still need an explicit breakpoint; both are * authored here rather than inherited. See the handoff note. */ /* Core collapses the navigation to an overlay below 600px. This menu is five items plus a button and needs ~860px, so the overlay is forced in earlier. The extra .pw-nav in each selector outspecifies core's own rules regardless of stylesheet order. */ @media (max-width:899px){ .pw-header .pw-nav .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex} .pw-header .pw-nav .wp-block-navigation__responsive-container:not(.is-menu-open){display:none} } @media (max-width:859px){ .pw-footer__grid{grid-template-columns:1fr;gap:var(--space-7)} } /* The header CTA is NOT hidden at any width. Removed 2026-09-15. * * It used to be dropped below 560px, on the reasoning that the row ran out of * room and the per-page CTA band carried the action from there. That stopped * being safe once the Buttons block moved inside the Navigation block: the * button is now the header's only route to Contact Us — the nav carries the * other four pages, so nothing links to Contact twice — and it renders inside * the mobile overlay. A display:none below 560px would have hidden it in that * overlay too, on exactly the phones the arrangement exists to serve, leaving * no path to Contact in the menu at all. * * The overlay stacks its items in a column, so the width argument no longer * applies: there is no row left to run out of. */ /* ============================================================================ * Cross-block primitives. * * Added in build step 5. These classes are emitted by inc/blocks.php helpers or * used by three or more of the eleven blocks, so they cannot live in a single * block's style.css without duplicating. Block-specific rules stay in * blocks//style.css and load only where that block is used. * * Copied from _design/components/components.css with values unchanged. * ========================================================================= */ /* ------------------------------------------------------ section tones */ .pw-section--tint-green{background:var(--surface-tint-green)} .pw-section--tint-blue{background:var(--surface-tint-blue)} .pw-section--green{background:var(--gradient-green);color:var(--text-inverse)} .pw-section--green h2,.pw-section--green h3,.pw-section--green h4{color:var(--text-inverse)} /* ------------------------------------------------------------- buttons * The .pw-btn family, emitted by sws_pws_link_button(). Distinct from the * core/button rules above, which style editor-inserted buttons. * * No border-bottom:none reset here. .pw-btn outranks base.css's a{border-bottom} * on specificity, so the 1px transparent border shorthand already hides the link * hairline. Re-adding the reset strips the bottom edge off --outline and knocks * every variant 1px out of vertical centre. */ .pw-btn{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);line-height:1;border:1px solid transparent;border-radius:var(--radius-control);padding:13px 22px;cursor:pointer;transition:var(--transition-control),transform var(--dur-fast) var(--ease-standard);text-decoration:none;white-space:nowrap} .pw-btn:focus-visible{box-shadow:var(--focus-ring);outline:none} .pw-btn:active{transform:var(--press-scale)} .pw-btn--primary{background:var(--gradient-green);color:var(--text-on-green);box-shadow:var(--shadow-inset-top)} .pw-btn--primary:hover{background:var(--action-primary-hover);color:var(--text-on-green)} .pw-btn--secondary{background:var(--action-secondary);color:var(--text-inverse)} .pw-btn--secondary:hover{background:var(--action-secondary-hover);color:var(--text-inverse)} .pw-btn--outline{background:transparent;color:var(--brand-blue);border-color:var(--border-default)} .pw-btn--outline:hover{border-color:var(--brand-green);color:var(--green-700)} .pw-btn--ghost{background:transparent;color:var(--brand-blue);padding-inline:8px} .pw-btn--ghost:hover{color:var(--green-700)} .pw-btn--on-dark{background:var(--neutral-0);color:var(--blue-800)} .pw-btn--on-dark:hover{background:var(--green-100);color:var(--blue-800)} .pw-btn--sm{font-size:var(--fs-caption);padding:9px 16px} .pw-btn--lg{font-size:var(--fs-body);padding:16px 30px} /* --------------------------------------------------------------- icons */ .pw-icon{display:inline-block;flex:none;vertical-align:middle} /* ----------------------------------------------------- section heading */ .pw-secthead{display:flex;flex-direction:column;gap:var(--space-3);max-width:760px} .pw-secthead--center{text-align:center;margin-inline:auto;align-items:center} .pw-secthead__title{margin:0 0 2rem} .pw-secthead__intro{font-size:var(--fs-lead);line-height:var(--lh-snug);color:var(--neutral-600)} .pw-section--blue .pw-secthead__intro,.pw-section--green .pw-secthead__intro{color:var(--text-inverse-muted)} /* --------------------------------------------------------------- cards */ .pw-card{background:var(--surface-card);border:var(--card-border);border-radius:var(--radius-card);padding:var(--space-6);transition:var(--transition-surface),border-color var(--dur-base) var(--ease-standard)} .pw-card--tint{background:var(--surface-tint-blue);border-color:transparent} .pw-card--tint-green{background:var(--surface-tint-green);border-color:transparent} .pw-card--raised{box-shadow:var(--shadow-sm);border-color:transparent} .pw-card--rule{border:none;border-top:3px solid var(--brand-green);border-radius:0;padding:var(--space-5) 0 0;background:transparent} .pw-card__title{font-family:var(--font-heading);font-size:var(--fs-h4);font-weight:var(--fw-semibold);color:var(--text-heading);line-height:var(--lh-heading)} .pw-card__body{font-size:var(--fs-body-sm);color:var(--text-body);margin-block-start:var(--space-3);line-height:var(--lh-body)} /* ---------------------------------------------------- capability lists */ .pw-caps{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:var(--space-4)} /* min() so the track can shrink below its 300px floor when the container is narrower. Fixed 2026-09-15: a bare minmax(300px,1fr) floor cannot go below 300px, so inside .pw-card (padding 32px x2 + 1px border x2 = 66) the list's min-content was 366px. At 390px the .pw-svc__inner column has 335px, so the grid track sized to 366 and the Services page scrolled sideways by 11px. The min() form is inert at every width where the old rule already fitted. */ .pw-caps--two{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} .pw-caps__item{display:flex;gap:var(--space-3);font-size:var(--fs-body);line-height:var(--lh-body)} .pw-caps__item::marker{content:none} .pw-caps__marker{color:var(--brand-green);flex:none;margin-block-start:3px} .pw-caps__term{font-weight:var(--fw-semibold);color:var(--blue-900)} .pw-section--blue .pw-caps__item,.pw-section--green .pw-caps__item{color:var(--text-inverse-muted)} .pw-section--blue .pw-caps__term,.pw-section--green .pw-caps__term{color:var(--neutral-0)} .pw-section--blue .pw-caps__marker,.pw-section--green .pw-caps__marker{color:var(--green-300)} /* ------------------------------------------------------------- media */ .pw-media{border-radius:var(--radius-media)} /* The ratio comes from sws_pws_image() as --pw-media-ratio on the element, not as an inline aspect-ratio, so that a media query can override it per breakpoint by setting --pw-media-ratio-fluid (a name never written inline). `auto` keeps any media without the property behaving normally. */ .pw-media,.pw-imgph{aspect-ratio:var(--pw-media-ratio-fluid,var(--pw-media-ratio,auto))} /* Labelled slot for photography still outstanding — never pretends to be art. */ .pw-imgph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:repeating-linear-gradient(135deg,var(--neutral-100) 0 10px,var(--neutral-50) 10px 20px);border:1px dashed var(--border-default);border-radius:var(--radius-media);color:var(--neutral-600);padding:var(--space-5);min-height:180px} .pw-imgph__label{font-family:var(--font-heading);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--neutral-600)} .pw-imgph__note{font-size:var(--fs-caption);max-width:34ch;line-height:var(--lh-snug)} /* Focus indicator on coloured surfaces. The green outline carries enough contrast on white but not on the blue or green bands, so it switches to white there — WCAG 1.4.11 needs 3:1 against the adjacent colour. */ .pw-section--blue :focus-visible,.pw-section--green :focus-visible,.pw-hero--blue :focus-visible,.pw-cta--blue :focus-visible,.pw-cta--green :focus-visible,.pw-footer :focus-visible,.pw-header__bar :focus-visible{outline-color:var(--neutral-0)} /* ------------------------------------------------------------- alerts * Only the info tone is used today, by the editor-side empty-block notice. */ .pw-alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-card);font-size:var(--fs-body-sm);border-left:3px solid transparent} .pw-alert--info{background:var(--status-info-surface);border-left-color:var(--status-info);color:var(--blue-800)}