/* =============================================================================
Woolwich Dental — Design System
Palette A · v3 · July 2026
Written from "06 Page Specs" + the 9 built designs.
Inline styles from the design file are expressed here as classes; page text
always comes from WordPress, never from CSS.
========================================================================== */
/* ---------- 1. Tokens --------------------------------------------------- */
:root {
/* brand */
/* One navy runs through the whole site. This was a teal (#0F4C6B / #0A3450),
which left every link, the contact card's phone and email, and the nav
hovers in a different hue family from the navy headings and buttons. */
--wd-primary: #29295c;
--wd-primary-dark: #0B1250;
/* Filled-button colour. `--wd-accent-rgb` is the same value as a bare triplet
so button shadows tint with it instead of being hard-coded. White on this
measures 13.41:1. */
--wd-accent: #29295c;
--wd-accent-rgb: 41, 41, 92;
--wd-accent-hover: #0B1250;
--wd-eyebrow: #2B5E7A;
/* text */
/* Headings share the button navy — 13.41:1 on white, 11.87:1 on the tint band. */
--wd-heading: #29295c;
/* Paragraph text. Both tiers now carry the same value so body copy reads
uniformly; 8.71:1 on white, 7.60:1 on the tint band. */
--wd-body: #434778;
--wd-body-2: #434778;
--wd-muted: #5A6B7A;
--wd-lead: #3D4C58;
/* surfaces */
/* Both tints were cyan-leaning, left over from the teal palette. With the
brand on navy they read as the wrong family — most visible on the sidebar
cards. Moved into the navy family: 13.29:1 for a navy heading, 7.71:1 for
body copy, and 4.79:1 where --wd-tint is used as TEXT on the dark Our
Services band. */
--wd-tint: #EDF1FC;
--wd-tint-subtle: #F7F9FE;
--wd-white: #ffffff;
/* lines */
--wd-border: #E1E9F0;
--wd-border-strong: #DDE6EE;
--wd-border-header: #E7EEF4;
/* on dark — only these four */
--wd-on-dark: #FFFFFF;
--wd-on-dark-body: #C8DDE9;
--wd-on-dark-muted: #8FB4CA; /* valid on --wd-primary-dark only */
--wd-on-dark-rule: #6FA8C4;
/* footer */
/* Used by the footer AND the utility bar at the top, so the page opens and
closes on the same ground. */
--wd-footer-bg: #020a31;
--wd-footer-body: #9FB3C2;
/* A flat #22323F only reaches 1.46:1 on the darker footer ground and vanishes;
a white wash keeps the hairline readable whatever the background becomes. */
--wd-footer-rule: rgba(255, 255, 255, .12);
--wd-footer-copy: #8296A6;
/* type */
--wd-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--wd-font-body: 'Inter', system-ui, -apple-system, sans-serif;
/* geometry */
--wd-container: 1680px; /* client-approved width, replaces the 1240px spec value */
--wd-gutter: clamp(20px, 4vw, 48px);
/* 2026-08-06 — flat 60px top and bottom for every section band, at the
client's measurement. Was clamp(48px, 6vw, 88px). Read by .wd-band and by
the four home-page bands; nothing else uses it.
2026-08-07 — the 60px is kept exactly: 6.2vw reaches it at 968px, so every
desktop width still measures the 60 the client set. What changed is the
narrow end. A flat 60 on a 394px screen is 15% of the viewport at the top
of every band and the same again at the bottom, which is what was pushing
the page down; below 968px it now eases to 38. One token, so every band on
the site steps down together and the rhythm between sections holds. */
--wd-band: clamp(38px, 6.2vw, 60px);
/* Shared band gradient. The second stop sits past the box, so only the first
57% of the ramp is visible: #02092E at the top down to about rgb(18,52,143)
at the bottom. White text measures 10.97:1 against that lightest visible end
and #C8DDE9 measures 7.83:1, so both clear WCAG AA anywhere on the band. */
--wd-band-gradient: linear-gradient(180deg, #02092e 0%, #1e54d7 174.98%);
/* --wd-accent is a deep navy and disappears against the band above. This
lifted orange gives 3.77:1 there, so an accent mark — currently the active
review pager dot — stays legible on the gradient. */
--wd-accent-on-dark: #E8792F;
/* Arrow used as a CSS mask wherever a control needs to say "this opens a
page". Filled, not stroked, so it masks cleanly at small sizes. */
--wd-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 6H18v9.4h-2.1V9.6l-8.5 8.5-1.5-1.5 8.5-8.5H8.6V6Z'/%3E%3C/svg%3E");
/* Marks for the journal's category, tag, comment and edit links. */
--wd-icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.4a1.8 1.8 0 0 1 1.8-1.8h4.1l2 2.4h7.3A1.8 1.8 0 0 1 20 8.8v9a1.8 1.8 0 0 1-1.8 1.8H4.8A1.8 1.8 0 0 1 3 17.8V6.4Z'/%3E%3C/svg%3E");
--wd-icon-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.6 3.2H20v8.4l-8.8 8.8a1.6 1.6 0 0 1-2.3 0l-6.1-6.1a1.6 1.6 0 0 1 0-2.3l8.8-8.8Z'/%3E%3Cpath d='M16.4 7.6h.01'/%3E%3C/svg%3E");
--wd-icon-comment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 12.2c0 4-3.8 7.2-8.4 7.2-1 0-2-.15-2.9-.43L4 20.6l1.7-3.6c-1.3-1.25-2.1-2.94-2.1-4.8 0-4 3.8-7.2 8.4-7.2s8.4 3.2 8.4 7.2Z'/%3E%3C/svg%3E");
--wd-icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.6 3.6a2.3 2.3 0 0 1 3.3 3.3L8.6 18.2l-4.3 1 1-4.3L16.6 3.6Z'/%3E%3C/svg%3E");
/* Frame, sun and hillside — the placeholder for an illustration the library
has not delivered yet. Same 1.8 stroke as the set above. */
--wd-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.6' width='18' height='14.8' rx='2.2'/%3E%3Ccircle cx='8.6' cy='10' r='1.7'/%3E%3Cpath d='m3.6 17.2 4.6-4.4a1.8 1.8 0 0 1 2.5 0l3.1 3M14 14.4l1.6-1.5a1.8 1.8 0 0 1 2.5 0l2.3 2.2'/%3E%3C/svg%3E");
/* Date and author marks for the journal meta line, masks like the rest. */
--wd-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-12Z'/%3E%3Cpath d='M4 9.5h16M8.5 2.8v3.4M15.5 2.8v3.4'/%3E%3C/svg%3E");
--wd-icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13.8a3.6 3.6 0 0 0 5.4.4l2.6-2.6a3.6 3.6 0 0 0-5.1-5.1l-1.5 1.5'/%3E%3Cpath d='M14 10.2a3.6 3.6 0 0 0-5.4-.4L6 12.4a3.6 3.6 0 0 0 5.1 5.1l1.5-1.5'/%3E%3C/svg%3E");
--wd-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
--wd-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.3 3.5H4.6A1.7 1.7 0 0 0 2.9 5.3c0 8.2 6.6 14.8 14.8 14.8a1.7 1.7 0 0 0 1.8-1.7v-2.7l-4.3-1.7-2.1 2.1a13.3 13.3 0 0 1-5.8-5.8l2.1-2.1Z'/%3E%3C/svg%3E");
--wd-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='5' width='18.4' height='14' rx='2'/%3E%3Cpath d='m3.4 6.6 8.6 6.1 8.6-6.1'/%3E%3C/svg%3E");
--wd-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4a3.9 3.9 0 1 1 0 7.8 3.9 3.9 0 0 1 0-7.8Z'/%3E%3Cpath d='M4.6 20.6c0-3.6 3.3-6.1 7.4-6.1s7.4 2.5 7.4 6.1'/%3E%3C/svg%3E");
/* Chevron for a link in a list. The diagonal arrow above says "this opens
a page" and reads as leaving the site; these topics are pages of this
site, so they get a plain forward chevron instead. */
--wd-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
/* Home glyph for the breadcrumb, used as a CSS mask so it takes currentColor. */
--wd-icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 10.2V21h6.2v-5.6h5.6V21H21V10.2L12 3Z'/%3E%3C/svg%3E");
/* ---- the arrow badge every link button carries on its trailing edge ----
One set of numbers, so a filled button, an outline button and a white
button all show the same arrow in the same disc. Sizing is not arbitrary:
--wd-badge-size 38px fills a 48px button exactly once the button's own
5px padding is counted on both sides (5+38+5).
--wd-badge-icon 55% of the disc. The old 13px glyph was 33% of a 40px
disc, which is what made the disc read as a big empty
ring with a speck in it.
--wd-badge-inset must equal the button's right padding, so the glyph
lands ON the disc. At the old `right: 9px` against a
5px padding the two were 4px out of register.
The colours are a pair, never set individually: --wd-badge-bg is the disc
and --wd-badge-ink the arrow drawn on it. The default below suits a dark
button; any button with a light or white fill flips the pair, otherwise a
white disc sits on a white button and disappears — which is exactly what
the banner's "What We Offer" button was doing. */
--wd-badge-size: 38px;
--wd-badge-icon: 21px;
--wd-badge-inset: 5px;
--wd-badge-bg: #fff;
--wd-badge-ink: var(--wd-accent);
--wd-radius-control: 11px;
--wd-radius-card: 14px;
--wd-radius-panel: 18px;
--wd-shadow-rest: 0 1px 2px rgba(19, 32, 43, .05);
--wd-shadow-hover: 0 10px 28px rgba(15, 76, 107, .12);
--wd-focus: #4A8FB0;
--wd-transition: 150ms ease;
}
/* ---------- 2. Reset / base -------------------------------------------- */
/* `html` prefix so this beats the Customizer's body.custom-background rule,
which still carries the old #f9f9f9 page colour. The setting itself is left
alone — nothing in wp-admin is changed. */
html body.wd-redesign {
margin: 0;
background: var(--wd-white);
-webkit-font-smoothing: antialiased;
}
body.wd-redesign {
font-family: var(--wd-font-body);
font-size: 17.5px;
line-height: 1.68;
color: var(--wd-body);
}
body.wd-redesign *,
body.wd-redesign *::before,
body.wd-redesign *::after { box-sizing: border-box; }
/* Both halves wrapped in :where() so the reset lands at (0,0,0) and any
component rule — header logo, footer logo, hero photo, service icons — sets
its own size without a specificity fight. `body.wd-redesign :where(img)` was
still (0,1,1) and kept beating them. */
:where(body.wd-redesign) :where(img) { max-width: 100%; height: auto; }
/* :where() on the body keeps the base link colour at (0,0,1) specificity, so
component rules like .wd-footer a or .wd-nav a win without needing overrides.
Without this the footer and utility-bar links inherit the primary blue. */
:where(body.wd-redesign) a {
color: var(--wd-primary);
text-decoration: none;
transition: color var(--wd-transition);
}
:where(body.wd-redesign) a:hover,
:where(body.wd-redesign) a:focus { color: var(--wd-accent-hover); }
/* Bootstrap (parent theme) draws the browser's focus ring on plain `:focus` —
a:focus { outline: -webkit-focus-ring-color auto 5px }
.btn.focus, .btn:focus, … { outline: -webkit-focus-ring-color auto 5px }
input[type=checkbox]:focus, … { outline: … }
`:focus` fires on MOUSE clicks as well as keyboard, which is the ring that
appeared after clicking a button. `:focus:not(:focus-visible)` clears it for
pointer interaction only.
The keyboard ring below is deliberately left in place. Dropping it as well
would leave anyone navigating by keyboard with no way to see where they are
(WCAG 2.4.7), and it never appears on click anyway — so nothing is gained by
removing it and the click-ring complaint is fully solved without it.
`.btn:active:focus` is (0,3,0) in Bootstrap, so that one needs the longer
selector to be outranked. */
body.wd-redesign :focus:not(:focus-visible),
body.wd-redesign .btn:focus:not(:focus-visible),
body.wd-redesign .btn:active:focus:not(:focus-visible),
body.wd-redesign .btn.active:focus:not(:focus-visible) {
/* outline only — NOT box-shadow. The form fields use a box-shadow ring to
show which one is active, and that has to survive a mouse click. */
outline: none;
}
body.wd-redesign :focus-visible {
outline: 3px solid var(--wd-focus);
outline-offset: 3px;
border-radius: 4px;
}
/* ---------- 3. Typography ---------------------------------------------- */
/* :where() keeps this reset at (0,0,1) so any component class — .wd-cta__title,
headings inside dark bands — can set its own colour without a specificity
fight. Without it the CTA heading rendered navy-on-navy. */
:where(body.wd-redesign) :where(h1, h2, h3, h4, h5, h6) {
font-family: var(--wd-font-display);
color: var(--wd-heading);
margin: 0 0 .5em;
text-wrap: pretty;
}
.wd-h1--home {
font-size: clamp(34px, 4.2vw, 56px);
line-height: 1.05;
font-weight: 800;
letter-spacing: 0px;
}
.wd-h1 {
font-size: 36px;
line-height: 1.06;
font-weight: 800;
letter-spacing: 0px;
}
/* 42px is the desktop size. A long page title — "Cosmetic & General Dentistry" —
overruns a phone at that size, so it steps down rather than scaling smoothly:
the set value is what renders everywhere there is room for it. */
@media (max-width: 700px) { .wd-h1 { font-size: 34px; } }
@media (max-width: 480px) { .wd-h1 { font-size: 29px; letter-spacing: 0px; } }
@media (max-width: 360px) { .wd-h1 { font-size: 26px; } }
.wd-h2--band {
font-size: clamp(27px, 3vw, 38px);
line-height: 1.14;
font-weight: 700;
letter-spacing: 0px;
}
.wd-h2 {
font-size: clamp(24px, 2.5vw, 30px);
line-height: 1.2;
font-weight: 700;
letter-spacing: 0px;
}
.wd-h3 { font-size: 19px; line-height: 1.3; font-weight: 700; }
.wd-h3--dense { font-size: 18px; }
.wd-lead {
font-size: clamp(17px, 1.6vw, 21px);
line-height: 1.55;
color: var(--wd-lead);
margin: 0 0 34px;
max-width: 44ch;
}
.wd-eyebrow {
font-size: 13px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--wd-eyebrow);
margin-bottom: 18px;
}
.wd-subline { font-size: 15px; line-height: 1.6; color: var(--wd-muted); }
.wd-label { font-size: 14px; font-weight: 600; color: var(--wd-body); }
.wd-micro { font-size: 12.5px; font-weight: 600; color: var(--wd-muted); }
/* prose — the wrapper around the_content() */
/* Full column width. The 68ch reading measure left a wide empty strip beside the
video and the images on the service pages, since the column is much wider than
the measure. */
.wd-prose { max-width: 100%; }
.wd-prose > * + * { margin-top: 26px; }
.wd-prose p { margin: 0; font-size: 16px; line-height: 1.8; }
.wd-prose h2 {
font-size: clamp(24px, 2.5vw, 30px);
font-weight: 700;
letter-spacing: 0px;
margin: 44px 0 0;
}
.wd-prose h3 { font-size: 19px; font-weight: 700; margin: 34px 0 0; }
/* The indent is the list's own padding, so the marker sits inside the text
column rather than hanging off its left edge. */
.wd-prose ul,
.wd-prose ol { margin: 0; padding-left: 34px; }
.wd-prose li + li { margin-top: 9px; }
.wd-prose img { border-radius: var(--wd-radius-card); }
.wd-prose a { text-decoration: underline; text-underline-offset: 2px; }
/* ---------- 3b. Contact lines ------------------------------------------ */
/* Phone, email and address each carry their icon in front of them — see
woolwich_phone_link() / woolwich_email_link() / woolwich_address_line().
The icon is sized in em so it tracks whatever it sits in (the 25px footer
lead, a 17px button, the 16.5px sidebar card) and takes its colour from the
text, so no context needs a rule of its own. */
.wd-iconline {
display: inline-flex;
align-items: center;
gap: .5em;
}
.wd-iconline .wd-icon {
flex: none;
width: .92em;
height: .92em;
}
/* The address runs to two lines in the cards, so its pin sits on the first line
rather than centring against the whole block. */
.wd-addr { align-items: flex-start; }
.wd-addr .wd-icon { margin-top: .26em; }
/* ---------- 4. Layout --------------------------------------------------- */
.wd-container {
max-width: var(--wd-container);
margin-inline: auto;
padding-inline: var(--wd-gutter);
}
/* header.php keeps Bootstrap's #content > .row wrapper so parent-theme
templates we have not rebuilt still render. Bootstrap gives .row a
-15px inline margin for its gutter system, which drags every full-width
band 15px to the left. The redesign does not use that grid, so the margin
is zeroed here — one rule, applied once. */
body.wd-redesign #content > .row { margin-inline: 0; }
.wd-band { padding-block: var(--wd-band); }
/* --flush-top and --tight-bottom, the modifiers for two bands of the same colour
stacked into one section, are declared in content.css. They used to have to
be, to outrank a `body.wd-redesign .wd-band--white` padding rule that no
longer exists; they stay there now simply because that is where the rest of
the interior-copy spacing lives. */
.wd-band--tint { background: var(--wd-tint); }
.wd-band--subtle { background: var(--wd-tint-subtle); }
.wd-band--primary { background: var(--wd-primary); }
.wd-band--dark { background: var(--wd-primary-dark); }
.wd-band--white { background: var(--wd-white); }
.wd-band--primary,
.wd-band--dark { color: var(--wd-on-dark-body); }
.wd-band--primary h1, .wd-band--primary h2, .wd-band--primary h3,
.wd-band--dark h1, .wd-band--dark h2, .wd-band--dark h3 { color: var(--wd-on-dark); }
.wd-band--primary .wd-eyebrow,
.wd-band--dark .wd-eyebrow { color: var(--wd-on-dark-body); }
/* auto-fit grids — the only grid pattern in the design */
.wd-grid { display: grid; gap: 36px; }
/* Content + sidebar. `auto-fit` with `1fr` gave both tracks an EQUAL share, so
the sidebar was taking half the page — 780px each at 1900px wide. Defined as
the asymmetric layout they were always meant to be: the column stacks on
small screens, then the sidebar takes a fixed width and the copy takes the
rest. --2 is page.php's and page-service-detail.php's.
--sidebar was single.php's until 2026-08-10, when the blog post lost its
sidebar (below). Nothing prints it any more — left in place rather than
removed, the same "working CSS, not this change's call to delete" reasoning
as the rounded-list rules (§J.1) and the /services/ grid it sits near. */
.wd-grid--2 { grid-template-columns: minmax(0, 1fr); }
.wd-grid--card{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.wd-grid--tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.wd-grid--sidebar { grid-template-columns: minmax(0, 1fr); }
/* No sidebar on the journal index, a blog post, or a plain page (client's ask,
2026-08-10) — the widget area now shows only on the home page and the
Contact page, and neither of those reaches it through this mechanism (see
home.php). This first ran capped at the reading width the two-column split
used to give main, matching main's own width so nothing looked stretched —
but on a page like /education/, a wide two-column topic index, that read as
the sidebar's space simply left empty. Corrected the same day: main now
runs the full container, "like every other band" above. */
.wd-grid--solo { grid-template-columns: minmax(0, 1fr); }
/* Blog index and blog post specifically — centred, at the client's ask,
2026-08-10, seeing .wd-grid--solo live: full width read right for a wide
topic index, wrong for a single reading column, which just looked like a
very long line flush against the left edge. Same width the two-column
layout used to give main (the sidebar's 400px + 36px gap, subtracted from
the container as a calc so it holds at every size), centred with auto
margins instead of left-aligned. */
.wd-grid--article { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1180px) {
.wd-grid--article {
max-width: calc(100% - 436px);
margin-inline: auto;
}
}
/* No max-width here: capping these at 1240px pushed the copy 220px inboard of
the page header and the site logo, so the interior pages no longer lined up
with everything else. They run the full container like every other band.
The split starts at 1180px, not 980px. The sidebar is a fixed 400px, so at
1024 the copy was left with 491px — narrower than the sidebar's own widgets,
which squeezed the related-reading pictures to 165px and the video to half
size. A media query is matched against the viewport INCLUDING the scrollbar,
so the usable width is ~15px less than the number here: 1180 is where the copy
actually clears 600px. */
@media (min-width: 1180px) {
.wd-grid--2,
.wd-grid--sidebar { grid-template-columns: minmax(0, 1fr) 400px; }
}
/* Stacked, the sidebar is no longer a rail — it should not run the full width of
a tablet either. It centres at a readable width under the copy. */
@media (max-width: 1179.98px) {
.wd-grid--2 > .wd-sidebar,
.wd-grid--sidebar > .wd-sidebar { width: 100%; max-width: 620px; margin-inline: auto; }
}
/* ---------- 5. Buttons -------------------------------------------------- */
.wd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--wd-font-display);
font-weight: 400;
border: none;
cursor: pointer;
text-align: center;
transition: background var(--wd-transition), color var(--wd-transition),
border-color var(--wd-transition), transform var(--wd-transition);
}
/* Buttons carry no drop shadow anywhere on the site — flat fills only. */
/* 2026-08-06 — every accent button gets the same circular arrow badge on its
trailing edge (client's ask: "har jagah left wala tarika" — one style
everywhere), pill-shaped with the badge inset inside the pill. Two free
pseudo-elements do the two extra layers: ::after is the solid white
circle, ::before is the navy arrow mask positioned on top of it. This is
a class-level change, so every template that prints a "Book Appointment"
link (header, mobile drawer, mobile call/book bar) picks it up without
being edited individually. */
.wd-btn--accent {
position: relative;
background: var(--wd-accent);
color: #fff;
gap: 14px;
padding: 5px var(--wd-badge-inset) 5px 26px;
border-radius: 999px;
}
.wd-btn--accent:hover,
.wd-btn--accent:focus,
.wd-btn--accent:focus-visible {
background: var(--wd-accent-hover);
color: #fff;
--wd-badge-ink: var(--wd-accent-hover);
}
/* The three classes below are every link button on the site: .wd-btn--accent is
the theme's own (header, drawer, footer, sidebar), .front-button-1 and
.front-button-2 are the two the page content prints. They shared a shape but
each carried its own copy of the badge, and the three copies had drifted —
different glyph sizes, different insets, and disc colours that did not follow
the button when its fill was overridden. One definition now; the per-context
rules set nothing but the two colour variables. */
.wd-btn--accent::after,
.front-button-1::after,
.front-button-2::after {
content: "";
flex: none;
width: var(--wd-badge-size);
height: var(--wd-badge-size);
margin-left: auto;
border-radius: 50%;
background: var(--wd-badge-bg);
transition: background var(--wd-transition), transform var(--wd-transition);
}
/* laid exactly over the disc — same size, same inset — so the arrow is centred
in it at every button size instead of being positioned independently */
.wd-btn--accent::before,
.front-button-1::before,
.front-button-2::before {
content: "";
position: absolute;
top: 50%;
right: var(--wd-badge-inset);
width: var(--wd-badge-size);
height: var(--wd-badge-size);
transform: translateY(-50%);
background: var(--wd-badge-ink);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: var(--wd-badge-icon);
mask-size: var(--wd-badge-icon);
-webkit-mask-image: var(--wd-icon-arrow);
mask-image: var(--wd-icon-arrow);
transition: background var(--wd-transition);
pointer-events: none;
z-index: 1;
}
/* The badge used to slide 2px outward on hover. Removed at the client's ask —
both halves of it, disc and glyph: the disc's nudge was what the glyph's was
compensating for, so taking only one out would have left the arrow sitting
off its circle for the whole hover. Hover is now a colour change alone. */
/* Keyboard focus has to be visible on its own, not only through the colour
change hover already makes — the two states are not the same thing. */
.wd-btn--accent:focus-visible,
.front-button-1:focus-visible,
.front-button-2:focus-visible {
outline: 3px solid var(--wd-focus);
outline-offset: 3px;
}
/* Nothing moves on hover any more, so only the colour fade is left to switch
off for someone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
.wd-btn--accent::after, .wd-btn--accent::before,
.front-button-1::after, .front-button-1::before,
.front-button-2::after, .front-button-2::before { transition: none; }
}
/* Outline buttons: white ground, navy rule and label — the same navy as the
filled buttons, so the pair reads as one family. */
.wd-btn--outline {
height: 54px;
padding: 0 30px;
border-radius: 999px;
background: #fff;
border: 1.5px solid var(--wd-accent);
color: var(--wd-accent);
font-size: 17px;
}
.wd-btn--outline:hover,
.wd-btn--outline:focus { background: var(--wd-accent); color: #fff; }
.wd-btn--on-dark {
height: 54px;
padding: 0 30px;
border-radius: 999px;
background: transparent;
border: 1.5px solid rgba(255, 255, 255, .55);
color: #fff;
font-size: 17px;
}
.wd-btn--on-dark:hover,
.wd-btn--on-dark:focus { background: #fff; color: var(--wd-primary); }
.wd-btn--sm { height: 48px; padding: 0 22px; font-size: 15.5px; }
/* ---------- 6. Cards ---------------------------------------------------- */
.wd-card {
background: var(--wd-white);
border: 1px solid var(--wd-border);
border-radius: var(--wd-radius-card);
padding: 26px;
box-shadow: var(--wd-shadow-rest);
transition: box-shadow var(--wd-transition), transform var(--wd-transition);
}
.wd-card--hover:hover {
box-shadow: var(--wd-shadow-hover);
transform: translateY(-2px);
}
.wd-card--inset {
background: var(--wd-tint-subtle);
box-shadow: none;
}
.wd-card--panel { border-radius: var(--wd-radius-panel); padding: 30px; }
.wd-card__title { font-family: var(--wd-font-display); font-size: 19px; font-weight: 700; margin: 0 0 8px; color: var(--wd-heading); }
.wd-card__text { font-size: 15px; line-height: 1.6; color: var(--wd-muted); margin: 0; }
.wd-icon-tile {
width: 56px; height: 56px;
border-radius: var(--wd-radius-card);
background: var(--wd-tint);
display: grid; place-items: center;
margin-bottom: 18px;
overflow: hidden;
}
.wd-icon-tile img { width: 32px; height: 32px; object-fit: contain; }
/* pill links */
.wd-pill {
display: inline-flex; align-items: center;
height: 44px; padding: 0 20px;
border-radius: 22px;
border: 1.5px solid var(--wd-border-strong);
font-size: 15.5px; font-weight: 500;
color: var(--wd-body);
background: #fff;
transition: all var(--wd-transition);
}
.wd-pill:hover { border-color: var(--wd-primary); color: var(--wd-primary); }
.wd-pill--active { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }
.wd-pill--active:hover { color: #fff; }
/* ---------- 7. Forms ---------------------------------------------------- */
.wd-field { display: block; margin-bottom: 20px; }
.wd-field > label,
.wd-field .wd-field__label {
display: block;
font-size: 14px; font-weight: 600;
color: var(--wd-body);
margin-bottom: 7px;
}
.wd-field input[type="text"],
.wd-field input[type="email"],
.wd-field input[type="tel"],
.wd-field input[type="url"],
.wd-field input[type="search"],
.wd-field select,
.wd-field textarea {
width: 100%;
min-height: 52px;
padding: 13px 16px;
border: 1.5px solid var(--wd-border-strong);
border-radius: var(--wd-radius-control);
font-family: var(--wd-font-body);
font-size: 16px;
color: var(--wd-body);
background: #fff;
transition: border-color var(--wd-transition), box-shadow var(--wd-transition);
}
.wd-field textarea { min-height: 140px; resize: vertical; }
.wd-field input:focus,
.wd-field select:focus,
.wd-field textarea:focus {
border-color: var(--wd-primary);
outline: none;
box-shadow: 0 0 0 3px rgba(74, 143, 176, .2);
}
/* ---------- 7b. Contact Form 7 ----------------------------------------- */
/* CF7 renders unstyled controls, and the parent theme paints .btn-primary with
the old Unite purple. These bring the plugin's own markup into the design.
The markup is CF7's default and is NOT edited — the client must stay free to
change the fields in the CF7 admin screen:
Everything below styles that shape as it stands. */
/* Each
is one field row. */
body.wd-redesign .wpcf7-form > p {
margin: 0 0 18px;
line-height: 1.45;
}
body.wd-redesign .wpcf7-form > p:last-of-type { margin-bottom: 0; }
/* CF7 puts a between the label and the control. The label is already a
block, so that break only contributed an empty line box — it was the largest
part of the 54px gap this rule set removes. */
body.wd-redesign .wpcf7-form > p > br { display: none; }
body.wd-redesign .wpcf7-form .wpcf7-form-control-wrap { display: block; }
body.wd-redesign .wpcf7-form label {
display: block;
margin: 0 0 7px;
font-size: 13.5px;
font-weight: 600;
letter-spacing: .005em;
color: var(--wd-body-2);
}
body.wd-redesign .wpcf7-form input[type="text"],
body.wd-redesign .wpcf7-form input[type="email"],
body.wd-redesign .wpcf7-form input[type="tel"],
body.wd-redesign .wpcf7-form input[type="url"],
body.wd-redesign .wpcf7-form input[type="date"],
body.wd-redesign .wpcf7-form input[type="number"],
body.wd-redesign .wpcf7-form select,
body.wd-redesign .wpcf7-form textarea {
display: block;
width: 100%;
margin: 0;
min-height: 50px;
padding: 13px 15px;
border: 1.5px solid var(--wd-border-strong);
border-radius: var(--wd-radius-control);
font-family: var(--wd-font-body);
font-size: 16px;
line-height: 1.45;
color: var(--wd-heading);
background: var(--wd-tint-subtle);
transition: border-color var(--wd-transition), background var(--wd-transition), box-shadow var(--wd-transition);
}
/* CF7 emits rows="10", which renders ~258px tall and leaves the form looking
unbalanced. An explicit height overrides the attribute; resize stays on, so a
visitor writing a long message can still drag it open. */
body.wd-redesign .wpcf7-form textarea {
height: 104px;
min-height: 104px;
padding-block: 12px;
resize: vertical;
}
body.wd-redesign .wpcf7-form input::placeholder,
body.wd-redesign .wpcf7-form textarea::placeholder { color: var(--wd-muted); opacity: 1; }
body.wd-redesign .wpcf7-form input:hover:not([type="submit"]),
body.wd-redesign .wpcf7-form select:hover,
body.wd-redesign .wpcf7-form textarea:hover { border-color: #C7D6E2; }
/* The filled field lifts to white on focus, so the active row is obvious.
The submit button is excluded. It is an too, so it was picking this
up and turning white on focus while its label stayed white — clicking Send
made the word "Send" vanish, which is exactly when a person is looking at
it. Its own focus mark is below. */
body.wd-redesign .wpcf7-form input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
body.wd-redesign .wpcf7-form select:focus,
body.wd-redesign .wpcf7-form textarea:focus {
border-color: var(--wd-primary);
background: #fff;
outline: none;
box-shadow: 0 0 0 3px rgba(74, 143, 176, .18);
}
/* The submit keeps its navy fill and takes a ring around it instead, so the
label stays readable while it is focused.
The fill has to be restated, not just left alone: with the white-field rule
out of the way the button fell through to Bootstrap's own .btn-primary:focus
in the parent theme, which paints it rgb(40,96,144) — legible at 6.63:1, but
a blue from a palette this site does not use, flashed on the one control
everybody clicks. */
body.wd-redesign .wpcf7-form input[type="submit"]:focus,
body.wd-redesign .wpcf7-form button[type="submit"]:focus {
background: var(--wd-accent);
border-color: var(--wd-accent);
color: #fff;
box-shadow: none;
}
/* :focus-visible for the ring, so it shows for a keyboard tab but not for the
mouse click that submits the form. */
body.wd-redesign .wpcf7-form input[type="submit"]:focus-visible,
body.wd-redesign .wpcf7-form button[type="submit"]:focus-visible {
outline: 3px solid rgba(var(--wd-accent-rgb), .5);
outline-offset: 2px;
}
/* ---- submit ----
A pill, like every other button on the site. It was on --wd-radius-control
(11px) — the token for text fields — which is right for the inputs above it
but made the one button in the form the only square-cornered button anywhere.
999px rather than a measured number: any value past half the height rounds
the ends completely, so the shape holds whatever the button's height becomes. */
body.wd-redesign .wpcf7-form input[type="submit"],
body.wd-redesign .wpcf7-form .wpcf7-submit {
width: auto;
min-height: 46px;
padding: 0 28px;
border: none;
border-radius: 999px;
background: var(--wd-accent);
color: #fff;
font-family: var(--wd-font-display);
font-size: 16.5px;
font-weight: 600;
letter-spacing: .01em;
cursor: pointer;
transition: background var(--wd-transition), transform var(--wd-transition);
}
body.wd-redesign .wpcf7-form input[type="submit"]:hover,
body.wd-redesign .wpcf7-form .wpcf7-submit:hover {
background: var(--wd-accent-hover);
transform: translateY(-1px);
}
body.wd-redesign .wpcf7-form input[type="submit"]:active,
body.wd-redesign .wpcf7-form .wpcf7-submit:active { transform: none; }
/* full-width button on phones, where a part-width tap target reads as unfinished */
@media (max-width: 599.98px) {
body.wd-redesign .wpcf7-form input[type="submit"],
body.wd-redesign .wpcf7-form .wpcf7-submit { width: 100%; }
}
/* ---- validation + response messages ---- */
body.wd-redesign .wpcf7-not-valid-tip {
margin-top: 6px;
font-size: 13px;
font-weight: 500;
color: #B3261E;
}
body.wd-redesign .wpcf7-form input.wpcf7-not-valid,
body.wd-redesign .wpcf7-form textarea.wpcf7-not-valid { border-color: #B3261E; background: #FEF6F5; }
body.wd-redesign .wpcf7-response-output {
margin: 18px 0 0;
padding: 13px 16px;
border: 1.5px solid var(--wd-border-strong);
border-radius: var(--wd-radius-control);
font-size: 14.5px;
line-height: 1.5;
}
body.wd-redesign .wpcf7 form.sent .wpcf7-response-output { border-color: #2E7D53; background: #F1F9F4; color: #1E5637; }
body.wd-redesign .wpcf7 form.invalid .wpcf7-response-output,
body.wd-redesign .wpcf7 form.failed .wpcf7-response-output { border-color: #B3261E; background: #FEF6F5; color: #8C1D18; }
/* ---- one field per row ----
The first two rows used to pair up on a wide column. They no longer do: every
field runs the full width, which keeps one rhythm down the whole form and
reads the same in the page as it does in the sidebar. */
/* ---------- 8. CTA band ------------------------------------------------- */
.wd-cta { background: var(--wd-primary); padding-block: clamp(34px, 4vw, 56px); }
.wd-cta__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(20px, 3vw, 48px);
flex-wrap: wrap;
}
.wd-cta__title {
font-family: var(--wd-font-display);
font-size: clamp(24px, 2.5vw, 32px);
font-weight: 700;
color: #fff;
margin: 0 0 8px;
}
.wd-cta__sub { font-size: 17px; line-height: 1.6; color: var(--wd-on-dark-body); margin: 0; }
.wd-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* ---------- 9. Page header band ---------------------------------------- */
/* On a phone the band is doing nothing but pushing the page down, so it tightens
to just enough room for the trail and the title.
That was the intent from the start, but the rule under it read `padding-block:
60px` — the same number it was meant to reduce — so the band never tightened
anywhere. A clamp does it in one declaration instead: 60px from 1200px up, the
client's measurement untouched, easing to 28px on a phone. It holds less than
a section band because it holds less — a breadcrumb and a title, no copy. */
.wd-pagehead { background: var(--wd-tint); padding-block: clamp(28px, 5vw, 60px); }
/* Phone end set by the client at 40px — the clamp's own floor of 28 read too
tight under the title. Overrides the clamp on weight, not on order. */
@media (max-width: 480px) {
body.wd-redesign .wd-pagehead { padding-block: 40px; }
}
/* --wd-eyebrow is a teal left over from the old palette, so the trail read in a
different hue family from everything around it. Links take the body colour and
the page you are on is picked out in the heading navy at a heavier weight, so
the current page is visible and not just marked up with aria-current. */
.wd-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5em;
font-size: 13.5px;
font-weight: 500;
color: var(--wd-body);
margin-bottom: 14px;
}
.wd-breadcrumb::before {
content: "";
width: 15px; height: 15px;
flex: none;
background: currentColor;
-webkit-mask: center / contain no-repeat var(--wd-icon-home);
mask: center / contain no-repeat var(--wd-icon-home);
opacity: .75;
}
.wd-breadcrumb a { color: var(--wd-body); text-decoration: none; }
.wd-breadcrumb a:hover { color: var(--wd-accent); text-decoration: underline; }
.wd-breadcrumb [aria-hidden="true"] { color: var(--wd-body); opacity: .45; }
.wd-breadcrumb [aria-current="page"] {
color: var(--wd-heading);
font-weight: 700;
}
.wd-pagehead__intro { font-size: 18.5px; line-height: 1.6; color: var(--wd-lead); margin: 14px 0 0; max-width: 72ch; }
/* dark hero — service/article pages (T5) */
/* The band was sized when it also held a pair of buttons under the title. With
those gone it carries a crumb trail, a heading and one line of meta, and the
old padding left a stretch of empty navy above and below all three. */
.wd-hero--dark { background: var(--wd-primary-dark); padding-block: clamp(26px, 3.2vw, 44px); }
.wd-hero--dark .wd-breadcrumb,
.wd-hero--dark .wd-breadcrumb a { color: var(--wd-on-dark-muted); }
.wd-hero--dark h1 { color: #fff; }
.wd-hero--dark .wd-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
/* The two rules above set the trail and its links, but not the separators or
the page you are on — those keep the light-page colours declared further up,
and both are near enough to this background to vanish into it. Measured on
#0B1250: the separators land at 1.98:1 and the current page at 1.29:1, so the
trail reads as "Home / Blog /" with the title missing. Restated against the
dark, they measure 5.5:1 and 14.04:1. */
.wd-hero--dark .wd-breadcrumb [aria-hidden="true"] {
color: rgba(255, 255, 255, .53);
opacity: 1;
}
.wd-hero--dark .wd-breadcrumb [aria-current="page"] {
color: rgba(255, 255, 255, .9);
/* The light pages set this to 700 so the current page stands out from the
trail. On the dark it does not need the weight — white against navy is
already the loudest thing in the line, and 700 made the crumb compete
with the title right below it. */
font-weight: 500;
}
/* The accent button is the brand navy, which is a shade of this background
rather than a contrast to it: the fill measures 1.29:1 against the hero, so
the button has no visible edge — only its white label shows. On the dark hero
it inverts, white fill and navy label. Same button, read the other way up. */
.wd-hero--dark .wd-btn--accent {
background: #fff;
border-color: #fff;
color: var(--wd-heading);
}
.wd-hero--dark .wd-btn--accent,
.wd-hero--dark .wd-btn--accent:hover,
.wd-hero--dark .wd-btn--accent:focus-visible {
--wd-badge-bg: var(--wd-accent);
--wd-badge-ink: #fff;
}
.wd-hero--dark .wd-btn--accent:hover,
.wd-hero--dark .wd-btn--accent:focus-visible {
background: rgba(255, 255, 255, .86);
border-color: rgba(255, 255, 255, .86);
color: var(--wd-heading);
}
/* icon badge inverts too — navy circle, white arrow — same reasoning as the
header's transparent-state override in chrome.css. */
.wd-hero--dark .wd-btn--accent::after { background: var(--wd-accent); }
.wd-hero--dark .wd-btn--accent::before { background: #fff; }
/* ---------- 9b. Sidebar ------------------------------------------------- */
/* The hold is driven by chrome.js, not CSS — see the note there. Measured on
this page: `top` sticky pins the sidebar the instant it reaches the top and
its lower 330px (the Facebook feed) never comes into view; `bottom` sticky
does not engage at all for an element at the top of a tall containing block.
Neither gives the reference behaviour, so the offset is scripted. */
/* The sidebar is the TRACK: it stretches to the full height of the row so the
inner wrapper has somewhere to travel, and chrome.js switches that wrapper
between absolute (riding with the page) and fixed (held at one edge). No CSS
sticky here — it would fight the script for the same element. */
.wd-sidebar { align-self: stretch; position: relative; }
/* Set by chrome.js on a page whose copy is shorter than the sidebar. There is
nothing for the sidebar to travel along there, so it stops being stretched to
the row and stands at its own height — which is then what sizes the row, and
keeps it inside the section instead of hanging over the footer. */
.wd-sidebar.is-static { align-self: start; }
@media (max-width: 979.98px) {
/* single column: the sidebar is just the next block down */
.wd-sidebar { align-self: auto; }
.wd-sidebar__inner { position: static !important; width: auto !important; }
}
.wd-sidebar__label {
font-size: 12.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wd-muted);
margin-top: 18px;
}
.wd-sidebar__value { margin: 4px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--wd-body); }
.wd-sidebar .wd-card + .wd-card { margin-top: 20px; }
/* booking card — the dark variant used on T5 */
.wd-sidebar__book {
background: var(--wd-primary);
border: none;
border-radius: var(--wd-radius-card);
padding: 26px;
color: var(--wd-on-dark-body);
}
.wd-sidebar__book .wd-card__title { color: #fff; }
/* "On this page" list */
.wd-toc { list-style: none; margin: 0; padding: 0; }
.wd-toc li { border-left: 2px solid var(--wd-border); }
.wd-toc li.is-active { border-left-color: var(--wd-accent); }
.wd-toc a { display: block; padding: 7px 14px; font-size: 15px; color: var(--wd-body-2); }
.wd-toc a:hover { color: var(--wd-primary); }
/* pull-quote — T5 */
.wd-pullquote {
border-left: 3px solid var(--wd-accent);
padding: 4px 0 4px 22px;
margin: 34px 0;
max-width: 52ch;
font-family: var(--wd-font-display);
font-size: 21px;
font-weight: 600;
line-height: 1.45;
color: var(--wd-primary);
}
/* FAQ accordion — T5 */
.wd-faq { border: 1px solid var(--wd-border); border-radius: var(--wd-radius-card); overflow: hidden; }
.wd-faq + .wd-faq { margin-top: 12px; }
.wd-faq summary {
list-style: none;
cursor: pointer;
padding: 18px 22px;
font-family: var(--wd-font-display);
font-size: 18px;
font-weight: 600;
color: var(--wd-heading);
background: #fff;
display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.wd-faq summary::-webkit-details-marker { display: none; }
.wd-faq summary::after { content: "+"; font-size: 22px; color: var(--wd-primary); line-height: 1; }
.wd-faq[open] summary { background: var(--wd-tint-subtle); }
.wd-faq[open] summary::after { content: "\2212"; }
.wd-faq__body { padding: 0 22px 20px; background: var(--wd-tint-subtle); font-size: 16.5px; line-height: 1.65; color: var(--wd-body); }
/* pagination */
.wd-pagination { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wd-pagination .page-numbers {
display: inline-grid; place-items: center;
min-width: 44px; height: 44px; padding: 0 12px;
border: 1px solid var(--wd-border); border-radius: 10px;
font-size: 15.5px; color: var(--wd-body); background: #fff;
}
.wd-pagination .page-numbers:hover { border-color: var(--wd-primary); color: var(--wd-primary); }
.wd-pagination .page-numbers.current { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }
/* ---------- 10. Utilities ---------------------------------------------- */
.wd-stack-sm > * + * { margin-top: 10px; }
.wd-stack > * + * { margin-top: 18px; }
.wd-stack-lg > * + * { margin-top: 32px; }
.wd-center { text-align: center; }
.wd-measure { max-width: 68ch; }
.wd-mt-0 { margin-top: 0 !important; }
.wd-mb-0 { margin-bottom: 0 !important; }
.wd-sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
body.wd-redesign *,
body.wd-redesign *::before,
body.wd-redesign *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* The two-column pairing above keys off the VIEWPORT, but the sidebar form sits
in a ~400px column — Name and Email were being paired inside it. Inside the
sidebar every field runs the full width. */
body.wd-redesign .wd-sidebar .wpcf7-form { display: block; }
body.wd-redesign .wd-sidebar .wpcf7-form > p { grid-column: auto; }
/* The article banner, with the post's own picture behind it.
--wd-hero-img is set inline by single.php; the class is only added when a
picture was actually found, so a post without one keeps the flat navy.
The wash is not decoration — it is what makes the text readable over a
picture nobody chose for its darkness. Measured against the worst case a
photograph can present, a pure-white region: under #091032d1 the composite
below the type is rgb(53,59,87), which leaves the title at 10.94:1, the
breadcrumb's current page at 9.5:1 and the date and author at 8.1:1 — all
clear of AA on the lightest thing an image can be, so no post can produce a
banner that fails to read. The one figure that sits under 4.5 there is the
breadcrumb's "/" separators, at 4.36:1; they are aria-hidden punctuation
rather than content, and only on a photograph that is white behind them. */
.wd-hero--dark.wd-hero--photo {
position: relative;
isolation: isolate;
background-image: var(--wd-hero-img);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.wd-hero--dark.wd-hero--photo::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: #091032d1;
}
/* A fixed attachment is painted against the viewport, so on a touch screen —
where the page scrolls but the background cannot keep up — it judders and
the framing drifts off the subject. Phones and tablets scroll it with the
banner instead. */
@media (max-width: 900px), (hover: none) {
.wd-hero--dark.wd-hero--photo { background-attachment: scroll; }
}