/*
Theme Name: WebMS
Theme URI: https://webmsconsultancy.com
Author: WebMS Consultancy
Author URI: https://webmsconsultancy.com
Description: Block theme for WebMS Consultancy — WordPress development, micro-SaaS, and local-business marketing. Everything is a pattern; theme.json is the single source of truth.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webms
Tags: block-patterns, full-site-editing, one-column, custom-colors, custom-logo, accessibility-ready
*/
/*
* Only what theme.json cannot express: the layout of the section patterns,
* interaction, and the handful of places core's block layout has to be
* overridden. Every value resolves to a preset variable.
*
* A note on the !important rules below. Core's constrained layout sets
* `margin-left/right: auto !important` on every child of a group. Where we turn
* a group into a flex or grid container, that auto margin makes children shrink
* to their content and centre. Clearing it needs the same weight.
*/
/* --------------------------------------------------------------- base ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--wp--preset--color--primary);
outline-offset: 2px;
border-radius: 2px;
}
:where(img, svg, video, iframe) {
max-width: 100%;
height: auto;
}
/* Every section owns its vertical space, so the document-level gap core puts
between header, main and footer would add to that padding. */
.wp-site-blocks > * {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
main > :first-child {
margin-block-start: 0 !important;
}
.wms_measure > * {
max-width: 64ch;
margin-left: 0 !important;
margin-right: auto !important;
}
/* Unconfirmed facts stay visible so they cannot ship unnoticed. */
.wms_todo {
color: var(--wp--preset--color--signal);
font-style: italic;
}
/* ------------------------------------------------------- header + footer -- */
/*
* The palette is light-only and every pair in it was contrast-checked against a
* light ground. Without this declaration Chrome's auto dark mode is free to
* invert the backgrounds while leaving those colours alone, which turns the
* page into dark panels carrying text picked for white — the eyebrows and body
* copy drop to a few hundredths of the contrast they were chosen for, and the
* logo loses its subtitle. Declaring the scheme stops the browser doing it.
*/
:root {
color-scheme: light;
}
.wms_logo {
display: inline-flex;
text-decoration: none;
line-height: 0;
}
/*
* The header's padding is set by the block itself, inline, at spacing 30
* (24px). A `header.wp-block-group { padding: 26px }` rule used to sit here
* claiming the comp's 26px, but an inline style outranks any selector without
* `!important`, so it never applied and the header has always rendered at
* 24px. Removed rather than forced: 24px is a real step on the scale, 26px is
* not, and two pixels is not worth an `!important` or a one-off token.
*/
header .wp-block-button__link {
line-height: 1.6;
padding-top: 11px;
padding-bottom: 11px;
}
.wp-block-navigation .wp-block-navigation-item__content {
position: relative;
padding-bottom: 3px;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 2px;
background: var(--wp--preset--color--primary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
transform: scaleX(1);
}
/*
* Footer.
*
* The old footer was a single flex row of four mono uppercase strings and not
* one link in it — a reader who reached the bottom of any page had nowhere to
* go. It is now a directory: a brand column carrying the one claim the whole
* site argues for, then three columns of real destinations.
*
* Mono uppercase is kept for the three column labels only. It used to be
* every string in the footer, which is what made the band read as chrome
* rather than as content, and "BUILT WITH WORDPRESS. NO PAGE BUILDER WAS USED
* ON THIS SITE." tracked out at 0.14em was the least readable line on the site.
*
* Links need no colour rule here: the dark-band rule further down already
* resolves them to primary-glow, with on-dark on hover.
*/
.wms_footer .wms_logo {
display: inline-block;
margin-bottom: var( --wp--preset--spacing--25 );
}
/* The footer mark tracks the header's, a step smaller. */
.wms_footer .wms_logo svg {
display: block;
width: clamp( 106px, calc( 6vw + 58px ), 134px );
height: auto;
}
.wms_fclaim {
max-width: 24ch;
letter-spacing: -0.012em;
}
/*
* The vertical hairline between link columns. It is the divider doing the
* work, not the gap — three columns separated by whitespace alone read as
* three unrelated stacks at this width.
*/
.wms_fcol {
border-left: 1px solid var( --wp--preset--color--dark-border );
padding-left: var( --wp--preset--spacing--35 );
}
.wms_fcol_label {
margin-bottom: var( --wp--preset--spacing--25 ) !important;
}
.wms_flist {
list-style: none;
margin: 0;
padding: 0;
}
.wms_flist li + li {
margin-top: var( --wp--preset--spacing--15 );
}
.wms_fcontact + .wms_fcontact {
margin-top: var( --wp--preset--spacing--15 ) !important;
}
.wms_fbottom p {
margin: 0;
max-width: 62ch;
}
/* --------------------------------------------------------------- hero ---- */
.wms_hero h1 {
max-width: 1080px;
line-height: 1;
margin-left: 0 !important;
margin-right: auto !important;
}
.wms_hero_row {
gap: 100px;
align-items: flex-start;
margin-top: var(--wp--preset--spacing--45);
}
.wms_hero_row > .wms_measure {
flex: 0 1 560px;
}
.wms_hero_row > .wms_measure > * {
max-width: 560px;
line-height: 1.55;
}
.wms_hero_cta {
flex: none;
padding-top: 4px;
}
.wms_hero_cta .wp-block-buttons {
flex-direction: column;
gap: 14px;
/*
* Core sets `align-items: center` on .is-layout-flex. In a column that stops
* the two buttons stretching, so each sizes to its own label and the shorter
* one sits inset from the longer — the comp has them the same width with
* both edges flush.
*/
align-items: stretch;
}
/*
* The .wms_arrow gap rule further down is the same specificity as this one and
* wins on source order, which pulled the icon in to 0.7rem and left the button
* 28px narrower than drawn. The wrapper class buys the one point needed.
*/
.wms_hero_cta .wp-block-buttons .wp-block-button__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
min-width: 260px;
padding: 16px 22px;
}
/* The hero primary is near-black; teal belongs to the header CTA alone. */
.wms_dark .wp-block-button__link {
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
.wms_dark .wp-block-button__link:hover {
background: var(--wp--preset--color--primary);
}
.wms_hero_cta .is-style-outline .wp-block-button__link {
border: 1px solid var(--wp--preset--color--contrast);
color: var(--wp--preset--color--contrast);
background: transparent;
}
.wms_hero_cta .is-style-outline .wp-block-button__link:hover {
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
.wms_micro {
margin-top: 65px;
border-top: 1px solid var(--wp--preset--color--border);
padding-top: 26px;
}
.wms_micro .wp-block-column > p:first-child {
margin-bottom: 10px;
}
/* ---------------------------------------------------------- platforms ---- */
/*
* On /handover/ this follows wms_handover, and both sit on the page base: no
* colour change, two 96px paddings back to back, and 216px of nothing between
* the button and the eyebrow. Every other transition in the theme is marked by
* a background change or by this hairline — micro and platforms below both use
* it, and MobileHome.dc.html gives this very section a border-top. Same device
* here, with the top padding cut to match.
*/
.wms_process {
border-top: 1px solid var(--wp--preset--color--border);
padding-top: 30px !important;
}
.wms_platforms {
border-top: 1px solid var(--wp--preset--color--border);
border-bottom: 1px solid var(--wp--preset--color--border);
padding-top: 30px;
padding-bottom: 30px;
}
.wms_platrow {
gap: 46px;
align-items: center;
}
.wms_platrow > p {
flex: none;
max-width: 130px;
line-height: 1.5;
margin: 0;
white-space: nowrap;
}
.wms_marks {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px 38px;
}
.wms_mark {
align-items: center;
gap: 10px;
transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wms_markicon {
display: inline-flex;
line-height: 0;
flex: none;
}
.wms_markname {
margin: 0;
white-space: nowrap;
transition: color 0.2s ease;
}
.wms_mark > * {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none;
}
.wms_mark:hover {
transform: translateY(-2px);
}
.wms_mark:hover .wms_markname {
color: var(--wp--preset--color--contrast);
}
/* ------------------------------------------------- shared section head ---- */
/* Eyebrow and heading left, a right-aligned lead on the right, both sitting on
the same baseline at the foot of the row. */
.wms_shead {
align-items: flex-end;
gap: 60px;
margin-bottom: 52px;
}
.wms_sintro {
flex: 0 1 420px;
max-width: 420px;
text-align: right;
margin: 0;
}
.wms_chead {
text-align: center;
margin-bottom: 46px;
}
.wms_chead h2 {
margin-inline: auto;
}
.wms_centered_lead {
max-width: 620px;
margin-inline: auto !important;
}
/* ----------------------------------------------------------- products ---- */
.wms_prodhead {
align-items: flex-end;
gap: var(--wp--preset--spacing--40);
margin-bottom: 46px;
}
.wms_prodintro {
flex: 0 1 400px;
max-width: 400px;
text-align: right;
margin: 0;
}
.wms_prodgrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.wms_prodcard {
display: flex;
flex-direction: column;
border: 1px solid var(--wp--preset--color--dark-border);
background: var(--wp--preset--color--dark-surface);
}
.wms_shot {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 220px;
background: var(--wp--preset--color--dark-raised);
border-bottom: 1px solid var(--wp--preset--color--dark-border);
}
/*
* The product screenshot fills its band and the caption sits over it. A scrim
* carries the caption rather than a solid bar, so the image is not cropped
* twice — once by the band and again by a strip of chrome across it.
*/
/*
* The screenshot fills the well behind the caption. These are core/image blocks
* now so the markup is figure > img: the figure takes the box and the image
* fills it. Scoped to .wms_shot rather than a class on the image, because the
* block editor puts a custom class on the figure, not the img.
*/
.wms_shot figure {
position: absolute;
inset: 0;
margin: 0;
}
.wms_shot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top left;
}
.wms_shot .wms_shotcap {
position: absolute;
inset-inline: 0;
bottom: 0;
z-index: 1;
margin: 0;
padding: 28px 20px 14px;
background: linear-gradient( to top, rgb(8 15 16 / 88%), rgb(8 15 16 / 0%) );
}
.wms_shotlabel {
margin: 0;
}
.wms_shotcap {
position: absolute;
inset: auto 0 0 0;
align-items: flex-end;
flex-wrap: nowrap;
gap: 20px;
padding: 14px 18px;
background: linear-gradient( to top, rgba( 11, 16, 19, 0.72 ), transparent );
}
.wms_shotcap p {
margin: 0;
}
.wms_shotcap > :first-child {
flex: 1 1 auto;
}
.wms_shotcap > .wms_file {
flex: 0 0 auto;
font-size: 13px;
opacity: 0.85;
}
.wms_prodbody {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 28px 30px 30px;
}
/*
* The fourth cell holds the two plugins. They have no interface worth a
* screenshot — a reading-time estimate and an open/closed line are a sentence
* each — so the cell carries the same frame and padding as a product card but
* skips the image band rather than filling it with a placeholder.
*/
.wms_studiocard {
padding: 28px 30px 30px;
justify-content: flex-start;
gap: 22px;
}
.wms_studiocard > * {
margin: 0 !important;
max-width: none;
}
.wms_plugrow {
padding-top: 18px;
border-top: 1px solid var(--wp--preset--color--dark-border);
}
.wms_plugrow > * {
margin: 0 !important;
max-width: none;
}
.wms_plugrow > p:first-child {
margin-bottom: 6px !important;
}
.wms_prodtitle {
align-items: baseline;
gap: 16px;
}
.wms_prodtitle h3,
.wms_prodsub {
margin: 0;
}
.wms_pill {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 5px 12px;
border-radius: 100px;
white-space: nowrap;
}
.wms_pill::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.wms_pill.is-live {
background: var(--wp--preset--color--primary-soft);
color: var(--wp--preset--color--primary);
}
.wms_pill.is-soon {
border: 1px solid var(--wp--preset--color--dark-border);
color: var(--wp--preset--color--on-dark);
}
.wms_tags {
gap: 8px;
margin-top: auto;
padding-top: 16px;
flex-wrap: wrap;
}
.wms_tag {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 5px 11px;
border: 1px solid var(--wp--preset--color--dark-border);
}
/* ----------------------------------------------------------- services ---- */
.wms_svc_grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
align-items: start;
}
/* Each column opens on a heavy teal rule — the device that separates the three
verbs without needing a box around each. */
.wms_svc_col {
display: flex;
flex-direction: column;
border-top: 2px solid var(--wp--preset--color--primary);
padding-top: 24px;
}
.wms_svc_col h3 {
margin: 0;
}
.wms_svc_sub {
margin: 0 0 8px;
}
.wms_svc_list {
display: flex;
flex-direction: column;
}
.wp-block-group.wms_svc_item {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 15px 0;
border-top: 1px solid var(--wp--preset--color--border);
transition: background-color 0.2s ease;
}
.wms_svc_item:last-child {
border-bottom: 1px solid var(--wp--preset--color--border);
}
.wms_svc_icon {
color: var(--wp--preset--color--primary);
display: block;
line-height: 0;
padding-top: 2px;
}
/* Pin the mark to the column so it cannot be shrunk by a flex parent. */
.wms_svc_icon > svg {
width: 30px;
height: 30px;
}
.wms_svc_icon > span > svg {
width: 13px;
height: 13px;
}
.wms_svc_icon > span,
.wms_bandicon > span {
gap: 3px !important;
}
.wms_svc_name {
margin: 0 0 3px;
}
/* The name and its description are one unit: 3px apart, as the artboard has
them, not separated by the group's block gap. */
.wms_svc_text > * {
margin-block-start: 0 !important;
}
.wms_svc_text p {
margin: 0;
}
.wms_svc_text > p:first-child {
margin-bottom: 3px;
}
/* ------------------------------------------------- cards (shared shape) ---- */
.wms_card_grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.wms_card {
display: flex;
flex-direction: column;
gap: 14px;
border: 1px solid var(--wp--preset--color--border);
background: var(--wp--preset--color--surface);
border-radius: 10px;
padding: 28px 30px;
transition:
border-color 0.22s ease,
box-shadow 0.22s ease,
transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wms_card:hover {
border-color: var(--wp--preset--color--primary);
box-shadow: var(--wp--preset--shadow--lift);
transform: translateY(-3px);
}
.wms_card h3,
.wms_card p {
margin: 0;
}
.wms_inset {
margin-top: 20px;
border-radius: 10px;
gap: 40px;
}
.wms_inset h3,
.wms_inset p {
margin: 0;
}
/* ------------------------------------------------------------ process ---- */
.wms_stages {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wms_stage {
display: flex;
flex-direction: column;
}
/* The rail: a hairline through the row with a ringed node on each stage. The
line is hidden before the first node and after the last, so the track starts
and stops at the sequence rather than running off the edge. */
.wms_rail {
display: flex;
align-items: center;
height: 22px;
}
.wms_rail_line {
height: 1px;
flex-grow: 1;
background: var(--wp--preset--color--border);
}
.wms_rail_line.is-hidden {
opacity: 0;
}
.wms_rail_dot {
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--wp--preset--color--base);
border: 2px solid var(--wp--preset--color--primary);
flex: none;
}
.wms_stage_body {
padding: 22px 26px 0 0;
}
.wms_stage_head {
gap: 12px;
align-items: center;
}
.wms_stage_head h3,
.wms_stage_body p {
margin: 0;
}
.wms_stage_icon {
color: var(--wp--preset--color--primary);
display: inline-flex;
line-height: 0;
}
.wms_stage_ok {
align-items: flex-start;
gap: 8px;
margin-top: 18px;
color: var(--wp--preset--color--muted);
font-family: var(--wp--preset--font-family--mono);
font-size: var(--wp--preset--font-size--x-small);
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.5;
}
.wms_okicon {
color: var(--wp--preset--color--primary);
display: inline-flex;
line-height: 0;
flex: none;
margin-top: 3px;
}
.wms_oktext {
margin: 0;
}
.wms_stage_ok > * {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none;
}
/* The last node is filled: the sequence ends there. */
.wms_rail_dot.is-done {
background: var(--wp--preset--color--primary);
box-shadow: 0 0 0 3px var(--wp--preset--color--base);
}
.wms_credhead {
margin-bottom: 28px;
}
/* ------------------------------------------------------------ contact ---- */
.wms_contact_grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 620px;
gap: 80px;
align-items: start;
}
.wms_contact_lead {
max-width: 520px;
}
.wms_fields {
margin-top: 30px;
border-top: 1px solid var(--wp--preset--color--border);
}
.wms_field {
padding: 16px 0;
border-bottom: 1px solid var(--wp--preset--color--border);
}
.wms_field.is-last {
border-bottom: 0;
}
.wms_field p {
margin: 0;
}
.wms_field > p:first-child {
margin-bottom: 6px;
}
.wms_contact_cta {
margin-top: 28px;
gap: 14px;
}
.wms_map {
margin: 0;
border: 1px solid var(--wp--preset--color--border);
border-radius: 10px;
overflow: hidden;
height: 420px;
}
.wms_map iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* ---------------------------------------------------------------- cta ---- */
.wms_cta_grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 400px;
gap: 90px;
align-items: start;
}
/*
* Capped at 560 like the comp, but the cap alone left the constrained layout
* free to centre it inside the column — which put the lead 92px right of the
* heading directly above it on all four `cta-*` variants. The comp gives the
* paragraph no left margin at all, so it starts where the heading starts.
* cta.php was unaffected: `.wms_cta_left > *` already zeroed it there.
*/
.wms_cta_lead {
max-width: 560px;
margin-left: 0 !important;
margin-right: auto !important;
}
.wms_cta_buttons {
margin-top: 34px;
gap: 14px;
}
.wms_cta_details {
border-left: 1px solid var(--wp--preset--color--border);
padding-left: 40px;
}
.wms_cta_details .wms_field {
padding: 0;
border-bottom: 0;
}
/* ------------------------------ clearing core's centring inside our grids -- */
.wms_prodcard > *,
.wms_prodbody > *,
.wms_prodtitle > *,
.wms_tags > *,
.wms_shotcap > *,
.wms_shot > *,
.wms_svc_col > *,
.wms_svc_list > *,
.wms_svc_text > *,
.wms_stage > *,
.wms_stage_body > *,
.wms_stage_head > *,
.wms_card > *,
.wms_fields > *,
.wms_field > *,
.wms_contact_left > *,
.wms_cta_left > *,
.wms_cta_details > * {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none;
}
.wms_shot > .wms_shotlabel {
margin-inline: auto !important;
}
/* Grid cells position their own children. An inherited top margin knocks them
out of alignment, and an inherited auto inline margin makes the cell shrink
to its content and centre — which is what collapsed the map to a fraction of
its column. */
.wms_prodgrid > *,
.wms_svc_grid > *,
.wms_card_grid > *,
.wms_stages > *,
.wms_contact_grid > *,
.wms_cta_grid > * {
margin-block-start: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none;
}
/* ------------------------------------------------------- white bands ----- */
.wms_topline,
.wms_services,
.wms_credentials,
.wms_contact,
.wms_cta {
border-top: 1px solid var(--wp--preset--color--border);
}
.wms_services,
.wms_credentials {
border-bottom: 1px solid var(--wp--preset--color--border);
}
/* -------------------------------------------------------- interaction ---- */
.wp-block-button__link {
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wms_arrow .wp-block-button__link svg {
transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wms_arrow .wp-block-button__link:hover svg {
transform: translateX(4px);
}
.wms_arrow.is-down .wp-block-button__link:hover svg {
transform: translateY(3px);
}
.wms_arrow .wp-block-button__link,
.wms_wa .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.wms_svc_item:hover {
background: var(--wp--preset--color--primary-soft);
}
.wp-block-heading a {
text-decoration: none;
color: inherit;
box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--primary);
}
.wp-block-heading a:hover {
box-shadow: inset 0 -0.7em 0 0 var(--wp--preset--color--primary-soft);
}
.wp-block-post-content :where(p, li) a {
text-decoration: none;
background-image: linear-gradient( currentColor, currentColor );
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 100% 1px;
padding-bottom: 1px;
transition: background-size 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wp-block-post-content :where(p, li) a:hover {
background-size: 100% 2px;
}
/* Reveals opt in only once the script confirms it can run, so no JavaScript
means the full page renders rather than a blank one. */
.wms-reveal-ready [data-reveal] {
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.55s ease,
transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wms-reveal-ready [data-reveal].is-revealed {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.wms-reveal-ready [data-reveal] {
opacity: 1;
transform: none;
}
}
/* -------------------------------------------------------- inner pages ---- */
.wms_note {
border: 1px solid var(--wp--preset--color--signal);
background: var(--wp--preset--color--base);
border-radius: 10px;
margin-top: 40px;
}
/* The same panel once its question has been answered: a card, not a warning. */
.wms_note.is-plain {
border-color: var( --wp--preset--color--border );
background: var( --wp--preset--color--surface );
}
.wms_note > * {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none;
}
.wms_card_grid.is-four {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wms_card_grid.is-two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/*
* This band is `alignfull`, so `margin-left: 0` aligned the prose to the bleed
* edge rather than to the 1140 measure — the eyebrow above it sat 119px to the
* right of its own heading. And 62ch at the display size computes to 1254px,
* wider than the measure itself.
*
* The left margin reproduces what the constrained layout's `auto` resolves to,
* so these start exactly where every other line in the section does, and the
* cap can never exceed the measure.
*/
.wms_whyhead,
.wms_whybody {
max-width: min( 62ch, var( --wp--style--global--content-size ) );
margin-left: max(
0px,
calc( ( 100% - var( --wp--style--global--content-size ) ) / 2 )
) !important;
margin-right: auto !important;
}
.wms_about_cols {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 40px;
border-top: 1px solid var(--wp--preset--color--border);
}
.wms_about_cols > * {
margin-block-start: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none;
}
.wms_about_cols .wms_field {
border-bottom: 0;
}
/* ---------------------------------------------------------- responsive ---- */
/* The section layouts above are written at the design width. Everything below
is the ladder down from it. Column counts drop before type does, because a
three-column grid at 110px a column is unreadable long before the text is. */
@media (max-width: 1200px) {
.wms_contact_grid,
.wms_cta_grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
gap: 48px;
}
.wms_hero_row {
gap: 48px;
}
.wms_platrow {
gap: 28px;
}
}
@media (max-width: 960px) {
.wms_svc_grid,
.wms_prodgrid,
.wms_contact_grid,
.wms_cta_grid,
.wms_about_cols {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.wms_card_grid,
.wms_card_grid.is-four,
.wms_stages {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* The rail reads as a sequence across a row. Once the stages wrap onto two
rows it stops meaning anything, so it comes off. */
.wms_rail {
display: none;
}
.wms_stage_body {
padding: 0 26px 0 0;
border-top: 2px solid var(--wp--preset--color--primary);
padding-top: 20px;
}
.wms_stages {
gap: 28px;
}
.wms_cta_details {
border-left: 0;
border-top: 1px solid var(--wp--preset--color--border);
padding-left: 0;
padding-top: 28px;
}
.wms_map {
height: 340px;
}
}
@media (max-width: 720px) {
/* Split headers stack, and the right-aligned lead goes back to the left —
a right-aligned paragraph on a narrow screen reads as a mistake. */
.wms_shead,
.wms_prodhead,
.wms_hero_row,
.wms_platrow {
display: block;
}
.wms_sintro,
.wms_prodintro {
max-width: none;
text-align: left;
margin-top: 20px;
}
.wms_shead,
.wms_prodhead {
margin-bottom: 32px;
}
.wms_platrow > p {
white-space: normal;
max-width: none;
margin-bottom: 16px;
}
.wms_hero_row > .wms_measure,
.wms_hero_row > .wms_measure > * {
max-width: none;
}
.wms_hero_cta {
margin-top: 28px;
padding-top: 0;
/*
* `flex: none` sizes this column to its content, which is right beside the
* measure but wrong once the row wraps and the column owns the line: the
* buttons stopped 50px short of the gutter the heading reaches. The mobile
* comp runs them gutter to gutter.
*/
width: 100%;
}
.wms_hero_cta .wp-block-button,
.wms_hero_cta .wp-block-button__link {
width: 100%;
}
.wms_card_grid,
.wms_card_grid.is-four,
.wms_card_grid.is-two,
.wms_stages {
grid-template-columns: minmax(0, 1fr);
}
.wms_micro .wp-block-columns {
flex-wrap: wrap !important;
gap: 28px;
}
.wms_micro .wp-block-column {
flex-basis: calc( 50% - 14px ) !important;
}
.wms_prodbody,
.wms_card {
padding: 22px 22px 24px;
}
.wms_shot {
height: 180px;
}
.wms_shotcap {
flex-wrap: wrap;
gap: 4px;
}
.wms_inset {
display: block;
}
.wms_inset .wp-block-buttons {
margin-top: 24px;
}
.wms_map {
height: 280px;
}
/*
* Stacked, the vertical rules would be four hanging lines against nothing,
* so they become the horizontal separators the stack actually needs.
*/
.wms_fcol {
border-left: 0;
border-top: 1px solid var( --wp--preset--color--dark-border );
padding-left: 0;
padding-top: var( --wp--preset--spacing--30 );
}
.wms_fclaim {
max-width: none;
}
}
@media (max-width: 480px) {
.wms_micro .wp-block-column {
flex-basis: 100% !important;
}
.wms_contact_cta .wp-block-button,
.wms_cta_buttons .wp-block-button {
width: 100%;
}
.wms_contact_cta .wp-block-button__link,
.wms_cta_buttons .wp-block-button__link {
width: 100%;
justify-content: center;
}
}
/* ------------------------------------------------------ services page ---- */
/* The page version lays each verb out as a horizontal band — a fixed title
column beside the list — rather than the three narrow columns the homepage
section uses. There is room here, so the descriptions get to be readable. */
.wms_pagehero {
margin-bottom: 20px;
}
.wms_pagehead {
max-width: 940px;
margin-left: 0 !important;
margin-right: auto !important;
}
.wms_band {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: 70px;
border-top: 2px solid var(--wp--preset--color--primary);
padding-top: 30px;
margin-bottom: 56px;
}
.wms_bandhead h2,
.wms_bandhead p {
margin: 0;
}
.wms_bandlist {
display: flex;
flex-direction: column;
}
.wms_banditem {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 18px;
align-items: start;
border-top: 1px solid var(--wp--preset--color--border);
padding: 20px 0;
transition: background-color 0.2s ease;
}
.wms_banditem:hover {
background: var(--wp--preset--color--primary-soft);
}
.wms_bandicon,
.wms_noicon {
display: block;
line-height: 0;
padding-top: 2px;
}
.wms_bandicon {
color: var(--wp--preset--color--primary);
}
.wms_bandicon > svg {
width: 34px;
height: 34px;
}
.wms_bandicon > span > svg {
width: 15px;
height: 15px;
}
/* -------------------------------------------- what we will not sell you -- */
.wms_nogrid {
display: grid;
grid-template-columns: 380px minmax(0, 1fr);
gap: 90px;
align-items: start;
}
.wms_nohead h2,
.wms_nohead p {
margin: 0;
}
.wms_nolist {
display: flex;
flex-direction: column;
}
.wms_norow {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 16px;
align-items: start;
border-top: 1px solid var(--wp--preset--color--dark-border);
padding: 22px 0;
}
.wms_noname {
margin: 0 0 6px;
}
/* ------------------------------------------------------- per-page CTA ---- */
.wms_ctarow {
align-items: flex-end;
gap: 60px;
}
.wms_cta_side {
flex: none;
}
.wms_band > *,
.wms_bandhead > *,
.wms_bandlist > *,
.wms_banditem > *,
.wms_nogrid > *,
.wms_nohead > *,
.wms_nolist > *,
.wms_norow > *,
.wms_ctarow > *,
.wms_cta_side > *,
.wms_pagehero > * {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none;
}
.wms_band > *,
.wms_nogrid > *,
.wms_banditem > *,
.wms_norow > * {
margin-block-start: 0 !important;
}
.wms_pagehead {
max-width: 940px;
}
@media (max-width: 960px) {
.wms_band,
.wms_nogrid {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.wms_ctarow {
display: block;
}
.wms_cta_side {
margin-top: 28px;
}
}
/* The mark scales with the viewport rather than sitting at one fixed size:
120px on a phone, up to 156px on a wide screen. The box is still pinned in
CSS, because the site-logo block sets a width but leaves height to the
upload's own ratio — so a differently proportioned file would otherwise
change the header's height. */
/*
* The header mark is the shipped SVG, inlined the way the footer's already is,
* so it is sharp at any pixel ratio. The uploaded PNG it replaced topped out at
* 330px wide against a slot that needs 468px on a 3x phone, and its generated
* `sizes` attribute claimed a 110px slot for one that actually renders at
* 156px. The trade is that the mark is no longer swappable from Site Identity
* — as was already true of the footer.
*/
/*
* The header logo is core/site-logo now, so the thing to size is the the
* block renders, not an inline