`). The Phase 2 pages
carry `.dc-page` but never `.service-page`, so not one rule here matches
them. The helpers in S1 were `.dc-page …` in the per-page files and were
RE-SCOPED on the way in for exactly this reason — `.dc-page .section-head`
would have matched all ten.
LOAD ORDER, VERIFIED NOT ASSUMED. This sheet is enqueued at
`wp_enqueue_scripts` and prints as `
` in the
head; `_ac_custom_css` prints from `ac_print_page_css()` at `wp_head` 99,
measured at source line 521 of a rendered service page against line 200 for
this file. A per-page rule of equal specificity therefore still wins on
source order, which is what makes the S9 per-service overrides in the page
files work.
WHAT DELIBERATELY STAYED PER-PAGE — two rules, and only two:
.ac-header{ position: sticky; … }
html, body{ overflow-x: clip; }
Both are GLOBAL selectors, not `.service-page` ones: they re-pin the
masthead because this hero is light, and they undo chrome.css's
`overflow-x: hidden`, which makes body a scroll container and silently
kills the sticky. Neither can be scoped to `.service-page` (the header is
outside the content wrapper) and neither may be hoisted unscoped — that
would change the masthead on all ~30 unauthored URLs. `body.single-service`
would cover the header but not `html`, and scoping `html` needs `:has()`.
So they stay in each page's own CSS, exactly as the seven approved Phase 2
pages already declare them. Four lines per page, and it keeps this sheet
free of any global-element rule.
CONTRAST — every pairing is measured with bin/contrast.py and recorded at
its rule. The accent token INVERTS with its ground and that is not optional:
light grounds → --accent-ink #04807e (4.78:1 on #FFFFFF, 4.53:1 on #F7F9FC)
--accent-color #059e9c is 3.29:1 / 3.12:1 → LARGE TEXT ONLY
dark grounds → --accent-color #059e9c (4.75:1 on #0d2440, 5.44:1 on #081829)
--accent-ink drops to 3.27:1 / 3.75:1 → FAILS there
No bare h1-h6 selector: heading TAGS are fixed by the document outline, and
the class decides how a heading looks.
===================================================================== */
/* ---------------------------------------------------------------------
1 · SHARED HELPERS — the same treatment home/about/services/contact/
testimonials/patient-financing declare in their own S0, re-scoped from
.dc-page to .service-page so it CANNOT reach those ten pages.
--------------------------------------------------------------------- */
/* The parent prints a brand-mark icon before every eyebrow; drop it so the label
reads as plain letter-spaced caps. LIGHT-SURFACE DEFAULT: eyebrows are 12px
caps — SMALL text — so --accent-ink (4.78:1 white / 4.53:1 #F7F9FC PASS),
never raw --accent-color (3.29:1 / 3.12:1 FAIL). Every band on a service page
is light, so unlike home/services there is no dark-ground opt-out below. */
.service-page .eyebrow-text{ padding-left: 0; margin-bottom: 18px; color: var(--accent-ink); }
.service-page .eyebrow-text::before{ display: none; }
.service-page .eyebrow-center{ display: block; text-align: center; }
/* --primary-color #0d2440: 15.63:1 on #FFFFFF, 14.82:1 on #F7F9FC. Both PASS. */
.service-page .content-header{ color: var(--primary-color); }
/* The primitive capitalizes every word, which mangles real titles like
"What are Dental Implants?". Keep the authored casing. */
.service-page .content-subtitle{ text-transform: none; color: var(--primary-color); }
/* --text-color #4E5560: 7.52:1 on #FFFFFF, 7.13:1 on #F7F9FC. Both PASS. */
.service-page .prose-serif{
font-family: var(--mono-font);
font-size: 18px; line-height: 1.65; color: var(--text-color);
}
.service-page .rule-center{
display: block; width: 46px; height: 1px;
background: var(--accent-color); margin: 0 auto 26px;
}
.service-page .rule-left{ margin-left: 0; margin-right: 0; }
/* --- THE ALTERNATION GROUND: cream, not the cool near-white --------------
`.section--muted` paints --secondary-color #F7F9FC (primitives.css). Against
#FFFFFF that is a 1.01:1 difference — this file's own section 6 note already
concedes "the difference is not perceptible" — so the white/muted rhythm the
27 service bodies are built on did not read as a rhythm at all. Every service
page rendered as one undifferentiated white column from hero to footer, which
is exactly what the client flagged: the section after the intro "could use
that cream color to differentiate".
Repointing the modifier at --soc-cream #FBF9F5 fixes all 27 pages at once
instead of adding a second background class to ~90 sections. The token is
already the site's warm surface (the hero rail, `.soc-close`, the reviews
band), so this makes the service bodies agree with the chrome around them
rather than introducing a colour.
SCOPED TO `.service-page` on purpose: the ten Phase 2 pages and every
unauthored URL keep the framework default.
CONTRAST RE-MEASURED ON #FBF9F5 with bin/contrast.py — every pairing that
previously cleared on #F7F9FC still clears, and by a slightly wider margin:
#0d2440 --primary-color 14.86:1 PASS (headings)
#4E5560 --text-color 7.15:1 PASS (body copy, .prose-serif)
#04807e --accent-ink 4.54:1 PASS (eyebrows, inline links) */
.service-page .section--muted{ background-color: var(--soc-cream); }
/* The tinted aside panel and the FAQ's `+` sat on the assumption that the band
under them was #FFFFFF or #F7F9FC. On the cream the panel would vanish, so it
takes white and keeps its accent edge — it still reads as a distinct object,
now by being LIGHTER than its ground rather than darker.
#4E5560 on #FFFFFF = 7.52:1 PASS; #04807e on #FFFFFF = 4.78:1 PASS. */
.service-page .section--muted .svc-note{ background: var(--white-color); }
.service-page .section-head{ text-align: center; max-width: 820px; margin: 0 auto 56px; }
.service-page .section-head .content-header{ margin: 0; }
/* ---------------------------------------------------------------------
2 · HERO — the hero on a service page is the SHARED SUBPAGE HERO. Every
rule that used to live here (`.service-page .soc-hero*`, ~105 lines) is gone:
it is now one block scoped `.dc-page:not(.home-page)` further down this file,
because the client asked for one hero across all 37 non-home URLs and two
copies of it would be two things to keep in step. The old container-relative
`padding-left: max(15px, calc(96.153846% - 635px))` nudge went with it — the
unified rule aligns to the masthead rail instead, so the nudge is redundant
rather than being layered under a second mechanism.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
3 · PROSE MEASURE — the single most important rule on a service page.
These bodies run 4,000-13,000 characters. Unconstrained, a paragraph would
set at ~150 characters per line on a desktop and be unreadable. Everything
textual is held to a ~72ch measure.
--------------------------------------------------------------------- */
.service-page .svc-prose{ max-width: 72ch; }
.service-page .svc-prose--center{ margin-left: auto; margin-right: auto; }
.service-page .svc-prose .prose-serif{ margin: 0 0 22px; }
.service-page .svc-prose .prose-serif:last-child{ margin-bottom: 0; }
/* THE OPENING BAND'S COPY IS CENTRED, and `--center` alone never did that.
`.svc-prose--center` sets `margin-inline: auto` — it centres the BLOCK
inside its container and says nothing about the text inside it, so every
service page opened with a centred rule, a centred eyebrow and a centred h2
sitting on top of a hard-left-ragged paragraph. The head was centred by
`.section-head`; the body underneath it never was.
CLIENT, 2026-08-12: the band under the hero reads centred on every service
page, always. Scoped to `.svc-intro` rather than to `--center` itself, so a
centred-block-but-left-text prose column stays available elsewhere.
Link underlines and the 72ch measure are unaffected. */
.service-page .svc-intro .svc-prose{ text-align: center; }
/* Inline links inside body copy. --accent-ink on #FFFFFF = 4.78:1 and on
#F7F9FC = 4.53:1, both PASS at this 18px size; raw --accent-color would be
3.29:1 / 3.12:1 FAIL. Underlined, so the link is not signalled by colour
alone (WCAG 1.4.1). */
.service-page .svc-prose a,
.service-page .svc-band__copy a,
.service-page .svc-band__lead a,
.service-page .svc-split__body a,
.service-page .svc-duo__col a,
.service-page .svc-list a,
.service-page .faq__a a{
color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
transition: color var(--transition-base) ease;
}
.service-page .svc-prose a:hover,
.service-page .svc-band__copy a:hover,
.service-page .svc-band__lead a:hover,
.service-page .svc-split__body a:hover,
.service-page .svc-duo__col a:hover,
.service-page .svc-list a:hover,
.service-page .faq__a a:hover{ color: var(--primary-color); }
/* ---------------------------------------------------------------------
4 · CONTENT BAND — left-aligned head, copy column + optional aside.
The workhorse layout for a service body h2 and its paragraphs.
--------------------------------------------------------------------- */
.service-page .svc-band__head{ max-width: 760px; margin: 0 0 44px; }
.service-page .svc-band__head .content-header{ margin: 0; }
.service-page .svc-band__lead{ margin: 22px 0 0; }
.service-page .svc-band__tail{ margin-top: 44px; }
.service-page .svc-band__grid{
display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 30px 56px;
align-items: var(--col-align);
}
/* ---------------------------------------------------------------------
4a · COLUMN ALIGNMENT — ONE SETTING, `--col-align`.
CLIENT, 2026-08-17: "This should be a reusable rule in case I decide that I
want things generally aligned center. I should be able to change it with one
CSS rule, the base rule for those. There might be sections where I want
things to align start, so I could just override it, but there should be a
base setting."
SO THE SETTING IS A CUSTOM PROPERTY, DECLARED EXACTLY ONCE — the
`.dc-page{ --col-align: start }` line at the TOP of this file, under its own
banner. Change that one value to `center` and every two-column construct on
every service page and every Phase 2 page re-aligns together: the copy/aside
band, the copy/illustration band, the two-peer duo, and the image/copy split.
Nothing else needs touching, and there is no second place where the answer is
also written down.
WHY A CUSTOM PROPERTY RATHER THAN A SHARED SELECTOR LIST. A selector list is
one place to change the value but not one place to OVERRIDE it: an exception
for a single band would need a new rule at higher specificity for each
construct it contained. A custom property inherits, so an override is one
declaration ON THE SECTION and every grid inside it follows — which is the
second half of what the client asked for.
THE OVERRIDES are `.u-align-center` and `.u-align-start`, and they set the
property rather than `align-items`, so they compose the same way at any depth
and cannot be beaten by a more specific rule further down this file.
==== WHY BOOTSTRAP'S `align-items-center` HAD TO COME OUT OF THE MARKUP ====
The seven `.svc-split` bands carried `
`.
The parent theme ships Bootstrap, whose utility is declared
`align-items: center !important` — so those bands were NOT governed by
anything in this file, and flipping the base setting would silently have left
seven sections behind. `!important` on a utility class cannot be outranked by
specificity; the only fix is to stop using it. Each of those rows now carries
`u-align-center` instead, which pins them to centred exactly as before while
putting them under the token. Nothing moved on the page; the control moved.
--------------------------------------------------------------------- */
/* The consumers. Scoped `.dc-page` rather than `.service-page` so the About
page's two `.bio` rows — the same Bootstrap row, the same defect — are under
the same one setting as the services. Any construct added later joins by
adding one selector here, never by inventing a second base value. */
.dc-page .svc-duo,
.dc-page .svc-split .row,
.dc-page .bio .row{ align-items: var(--col-align); }
/* Per-section exceptions. They set the PROPERTY, so every construct nested in
the section inherits the change from one declaration. */
.dc-page .u-align-center{ --col-align: center; }
.dc-page .u-align-start{ --col-align: start; }
/* A head that has moved INSIDE the copy column is no longer holding its own
measure — the column is doing that — so the 760px cap comes off, and the gap
to the first paragraph tightens from the 44px that separated a full-width
head from a whole grid to the 28px that separates a heading from its own
copy. */
.service-page .svc-band__copy .svc-band__head{ max-width: none; margin: 0 0 28px; }
.service-page .svc-band__copy .prose-serif{ margin: 0 0 22px; }
.service-page .svc-band__copy .prose-serif:last-child{ margin-bottom: 0; }
/* ---------------------------------------------------------------------
4c · THE PROSE BAND, AND THE DEAD HALF IT USED TO LEAVE.
CLIENT, 2026-08-17, over a screenshot of `.svc-band--prose`: "A section like
this needs a photo. If there are none in the library, please use the pixabay
skill and find some photos. I prefer infographic-style things for these, but
I'm fine with a 3D image-type thing. You need to check all the service pages
for issues like this."
THE DEFECT. A prose band was a left-aligned head over a 72ch column and
nothing else, so on a 1328px rail roughly 45% of the section was empty white
to the right of every paragraph. 29 sections across 15 service pages.
TWO FIXES, BECAUSE THERE ARE TWO CASES.
`--figure` (8 sections) — the copy moves into the left column and an
illustration takes the right. This is the shape the client asked for and it
is used wherever an honest image exists for the subject.
`--prose` (the remaining 21) — CENTRED, not padded. The client's own image
rule from 2026-08-12 caps a page at two image-bearing sections per five body
sections and says outright that "being under budget is preferred to padding a
page with stock". Pixabay's dental inventory could not supply a truthful
illustration for these subjects — see the report — and a generic laboratory
photo next to a paragraph about saliva testing is exactly the filler that
rule exists to prevent. So the column is centred on the rail instead: the
dead half becomes two even margins, which reads as a deliberate measure
rather than a missing column. It is the same treatment `.svc-intro` already
carries on every service page.
BOTH CAPS ARE 72ch SO THE TWO EDGES LINE UP. The head was capped at 760px and
the prose at 72ch; centring two different widths would have left their left
edges ~30px apart, which reads as a mistake rather than as centring.
--------------------------------------------------------------------- */
.service-page .svc-band--prose .svc-band__head{ max-width: 72ch; margin-inline: auto; }
.service-page .svc-band--prose .svc-prose{ margin-inline: auto; }
/* --- `--figure`: copy one side, an illustration the other ---------------
THE IMAGE IS NEVER CROPPED. These are anatomical diagrams and 3-D renders,
not photographs — crop a cross-section of a tooth and you have removed the
part that was explaining something. So the media panel sizes to the image
with `object-fit: contain` on a tinted ground rather than filling a fixed
aspect-ratio box the way `.svc-split__media` (a photograph) does.
IT SITS ON --secondary-color #F7F9FC. Most of these illustrations are drawn
on white, and white-on-white would leave the figure floating with no edge;
the tint plus a hairline gives it the same object-ness `.svc-note` has. The
panel is decoration behind an image that carries its own `alt`, so no
contrast pairing arises.
THE HEIGHT CAP is what stops the one portrait asset (a 934x1280 oral-anatomy
diagram) from setting a section twice as tall as its own copy. Landscape
assets never reach it. */
.service-page .svc-band__figure{ min-width: 0; }
.service-page .svc-figure{ margin: 0; }
.service-page .svc-figure__media{
background: var(--secondary-color);
border: 1px solid var(--divider-color);
padding: 22px;
}
.service-page .svc-figure__media img{
display: block; width: 100%; height: auto;
max-height: 520px; object-fit: contain;
}
/* The figure column is the narrower of the two: the copy is the section and the
illustration supports it. 1.35fr / 1fr is `.svc-band__grid`'s own split, so a
figure band and an aside band set to the same rhythm down the page. */
@media (max-width: 991px){
/* Stacked, so the illustration follows the copy it belongs to rather than
being squeezed beside it. The cap comes down with the viewport. */
.service-page .svc-figure__media{ padding: 18px; }
.service-page .svc-figure__media img{ max-height: 380px; }
}
/* --- The aside note: a tinted panel with an accent edge ---------------
Ground is --secondary-color #F7F9FC on the white band, so the panel reads as
a distinct object without a box-shadow. */
.service-page .svc-note{
background: var(--secondary-color);
border-left: 3px solid var(--accent-color);
padding: 30px 30px 30px 27px;
}
/* Small caps on #F7F9FC -> --accent-ink 4.53:1 PASS. */
.service-page .svc-note__label{ margin-bottom: 16px; }
.service-page .svc-list{ list-style: none; margin: 0; padding: 0; }
/* --text-color #4E5560: 7.52:1 on white, 7.13:1 on #F7F9FC. Both PASS. */
.service-page .svc-list li{
position: relative; padding: 12px 0 12px 24px;
font-family: var(--default-font); font-size: 15.5px; line-height: 1.6;
color: var(--text-color);
border-top: 1px solid var(--divider-color);
}
.service-page .svc-list li:first-child{ border-top: 0; padding-top: 0; }
.service-page .svc-list li:last-child{ padding-bottom: 0; }
/* Decorative marker, not text — no contrast requirement, but it is the accent
at full strength either way. */
.service-page .svc-list li::before{
content: ''; position: absolute; left: 2px; top: 20px;
width: 6px; height: 6px; background: var(--accent-color); transform: rotate(45deg);
}
.service-page .svc-list li:first-child::before{ top: 8px; }
/* ---------------------------------------------------------------------
4d · STEPS — `.svc-steps`, for a band that was a wall of paragraphs.
CLIENT, 2026-08-17, over the nine-paragraph implants band: "this is a good
example of a section that SHOULD have been split into multiple sections OR
turned into a manageable component like a tab section." Asked to choose, they
picked numbered steps with everything visible over tabs.
WHY NOT TABS, IN THEIR WORDS AND MINE. Tabs were the client's own example and
they are the more compact answer, but a tab set shows one panel of five: four
fifths of the copy would ship `display: none` on a port whose first rule is
preserving the SEO content structure. Steps chunk the wall without hiding a
sentence, and they need no JavaScript to read — the counter is CSS, so the
component works in the editor preview, in an email export and with scripting
off. The client chose this knowing the trade.
WHAT IT FIXES, BEYOND LENGTH. Four of these walls turned out to contain
FLATTENED HEADINGS — "Bone Grafting Procedures", "Frenectomy",
"Post-treatment pain relief", "How does Ozone Therapy treatment work?" — real
subheads in the source that the port demoted past `div` all the way into
`p.prose-serif`, where they read as one-line paragraphs that trail off. They
become step labels here. Not one word is rewritten: the label text is the
flattened paragraph's own text, moved into the slot it always wanted.
THE NUMBER IS A CSS COUNTER, NOT MARKUP. It is generated content behind
`aria-hidden`, so it is decoration a screen reader never reads out as though
it were part of the sentence, and renumbering after an edit is automatic —
the practice can delete a step in the editor without leaving a gap at 03.
`--plain` DROPS THE COUNTER for sets that are not a sequence. The oral-surgery
implants band compares a bridge, a denture and an implant; numbering three
alternatives would assert an order that the copy does not.
--------------------------------------------------------------------- */
.service-page .svc-steps{
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 26px;
margin-top: 44px;
counter-reset: svc-step;
}
/* THE GRID STATES ITS OWN BOTTOM MARGIN, symmetrical with its top. This is the
seam the client actually reported — a closing paragraph welded to the bottom
edge of the cards. The flow floor in section 11 would have caught it at 22px,
but a component that holds itself 44px off what precedes it should hold the
same distance from what follows; anything else reads as the grid drifting
downward. `:not(:last-child)` so a band that ENDS on its steps does not push
its own section padding out. */
.service-page .svc-steps:not(:last-child){ margin-bottom: 44px; }
/* WHEN A STEPPED BAND ALSO CARRIES A FIGURE, the head, the lead paragraph and
the illustration form the top row and the steps run the FULL RAIL underneath.
Left as an ordinary grid child, the step grid would drop into column one at
1.35fr and the cards would be squeezed into two-thirds of the width for no
reason — the figure has already had its say by then.
Written as a negation rather than by listing `.svc-steps` and `.svc-band__tail`
so that anything else placed at this level (a closing note, a callout added
later) spans by default. In this grid the only things that legitimately hold a
single column are the three named columns. */
.service-page .svc-band__grid > :not(.svc-band__copy):not(.svc-band__aside):not(.svc-band__figure){
grid-column: 1 / -1;
}
/* The group label — a `div`, always, because it carries what used to be a
flattened heading and the port's outline may not move. */
.service-page .svc-steps__label{ grid-column: 1 / -1; margin: 0 0 -8px; }
.service-page .svc-step{
counter-increment: svc-step;
background: var(--white-color);
border: 1px solid var(--divider-color);
border-top: 3px solid var(--accent-color);
padding: 30px 30px 32px;
}
/* On a cream band the card ground stays white, which is what makes it a card;
on a white band it needs the hairline to do the separating, which it does. */
/* THE NUMERAL. --accent-ink #04807e on --white-color #FFFFFF = 4.78:1 PASS —
measured even though at 13px it is small text and therefore held to the
stricter 4.5 bar. `decimal-leading-zero` so 01..09 all set to the same width
and the cards' titles line up across a row. */
.service-page .svc-step__n{
display: block;
font-family: var(--default-font); font-size: 13px; font-weight: 600;
letter-spacing: .18em;
color: var(--accent-ink);
margin-bottom: 14px;
}
.service-page .svc-step__n::before{ content: counter(svc-step, decimal-leading-zero); }
.service-page .svc-steps--plain .svc-step__n{ display: none; }
/* Without a numeral the title would sit hard against the accent edge. */
.service-page .svc-steps--plain .svc-step{ padding-top: 28px; }
/* --primary-color #0d2440 on #FFFFFF = 15.63:1 PASS. Sized between
`.svc-card__title` (21px) and body copy: a step label names a stage, it does
not open a section. */
.service-page .svc-step__title{
font-family: var(--heading-font); font-size: 19px; font-weight: 600;
line-height: 1.3;
color: var(--primary-color);
margin: 0 0 14px;
}
/* The step's own copy. Narrower than the 72ch band measure because the card is
narrower; left to inherit, `.svc-prose`'s cap would never bind and the
paragraph would simply fill the card. */
.service-page .svc-step .prose-serif{ margin: 0 0 16px; font-size: 17px; }
.service-page .svc-step .prose-serif:last-child{ margin-bottom: 0; }
.service-page .svc-step .svc-list{ margin-top: 4px; }
@media (max-width: 767px){
.service-page .svc-steps{ gap: 20px; margin-top: 34px; }
.service-page .svc-step{ padding: 26px 22px 28px; }
}
/* --- Card grid: an h3 + its list, repeated. Used where a service body lists
sub-treatments under h3s. The h3 keeps its TAG; only the look is the card. */
.service-page .svc-cards{
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 26px;
}
.service-page .svc-card{
background: var(--white-color);
border: 1px solid var(--divider-color);
border-top: 3px solid var(--accent-color);
padding: 32px 30px;
}
/* --primary-color #0d2440 on #FFFFFF = 15.63:1 PASS. */
.service-page .svc-card__title{
font-family: var(--heading-font); font-size: 21px; font-weight: 600; line-height: 1.25;
color: var(--primary-color); margin: 0 0 20px;
}
/* A heading that is itself a link keeps the heading colour and takes an accent
underline on hover, so it never reads as body-copy link text. */
.service-page .svc-card__title a{
color: var(--primary-color); text-decoration: none;
border-bottom: 1px solid var(--accent-color); padding-bottom: 2px;
transition: color var(--transition-base) ease, border-color var(--transition-base) ease;
}
.service-page .svc-card__title a:hover{ color: var(--accent-ink); border-color: var(--accent-ink); }
.service-page .svc-card__title a:focus-visible{ outline: 3px solid var(--accent-ink); outline-offset: 3px; }
/* --- DARK CARD BAND — `.svc-band--dark` -------------------------------
White cards on navy. CLIENT, 2026-08-12: a card grid is the one section
shape that should punctuate the page rather than continue it, so every
band that holds `.svc-cards` takes the dark ground and lets the cards do
the reading. 15 sections across 14 service pages.
THE MARKUP CARRIES `section--inverse` TOO, and that primitive is the whole
difficulty here. It paints EVERY descendant text element white
(`:is(.eyebrow-text, .content-header, h1..h6, p, li, a:not(.btn-default))`,
primitives.css) at specificity (0,2,0) — including the copy INSIDE the white
cards, which would be white ink on a white card: invisible, and the exact
failure mode the reviews band was already fixed for once. The card therefore
hands its own text back explicitly at (0,3,0), which beats the primitive on
specificity rather than on source order. Do not "simplify" these four
selectors away; the cards go blank if you do.
Only the BAND is inverse. The cards are an opaque light island inside it and
are measured on white, not on navy.
CONTRAST, bin/contrast.py, on --primary-color #0d2440:
#FFFFFF the h2/h3 and the head's copy 15.63:1 PASS
#10c3cc --on-dark-accent, the eyebrow 7.22:1 PASS (small caps,
so it needs the
normal 4.5 bar —
--accent-ink is
3.27:1 here and
MUST NOT be used)
#FFFFFF the card's own ground 15.63:1 PASS as a boundary
And inside the card, on #FFFFFF:
#0d2440 --primary-color 15.63:1 PASS (.svc-card__title)
#4E5560 --text-color 7.52:1 PASS (.prose-serif)
#04807e --accent-ink 4.78:1 PASS (inline links) */
.service-page .svc-band--dark{ background-color: var(--primary-color); }
/* The eyebrow's accent INVERTS with its ground — see the token note in this
section's header. (0,3,0) so it beats `.section--inverse .eyebrow-text`,
which would otherwise flatten it to plain white and lose the accent. */
.service-page .svc-band--dark .eyebrow-text{ color: var(--on-dark-accent); }
/* The hairline rule is decorative and has no contrast duty, but --accent-color
#059e9c is muddy on the navy; the on-dark token keeps it legible. */
.service-page .svc-band--dark .rule-center{ background: var(--on-dark-accent); }
/* INLINE LINKS OUT ON THE BAND ITSELF — not inside a card, not inside a note.
A `svc-band__tail` paragraph, a `svc-band__copy` column or a lead can sit
directly on the navy, and its links were the one thing the dark band broke.
The accent token INVERTS with its ground (see this section's header) and the
S3 link rules hand every body link --accent-ink, which is the LIGHT-surface
token: on navy it measures 3.27:1 and FAILS. Those rules are (0,2,1) and the
framework's `.section--inverse :is(…, a:not(.btn-default))` is also (0,2,1),
so they tie and the child sheet wins on load order — the failing colour was
the one that shipped. Worse, their `:hover` is --primary-color, which IS the
band, so the link disappeared entirely on hover.
(0,3,1) settles it on specificity rather than on load order.
#04807e --accent-ink on #0d2440 3.27:1 FAIL <- what it was
#10c3cc --on-dark-accent on #0d2440 7.22:1 PASS <- what it is
#FFFFFF hover on #0d2440 15.63:1 PASS
The card and note rules below are (0,4,1) and still win inside their own
opaque grounds, which is exactly what should happen. */
.service-page .svc-band--dark a:not(.btn-default){ color: var(--on-dark-accent); }
.service-page .svc-band--dark a:not(.btn-default):hover{ color: var(--white-color); }
/* THE CARDS HAND THEIR TEXT BACK. Each of these is (0,3,0) vs the primitive's
(0,2,0). The border also has to change: --divider-color is
rgba(13,36,64,.12), a navy tint that is invisible against a navy band, so
the card's edge is the accent alone. */
.service-page .svc-band--dark .svc-card{
border: 1px solid transparent;
border-top: 3px solid var(--accent-color);
}
.service-page .svc-band--dark .svc-card .svc-card__title,
.service-page .svc-band--dark .svc-card .svc-card__title a{ color: var(--primary-color); }
.service-page .svc-band--dark .svc-card p,
.service-page .svc-band--dark .svc-card li{ color: var(--text-color); }
.service-page .svc-band--dark .svc-card a:not(.btn-default):not(.svc-card__title a){ color: var(--accent-ink); }
/* HOVER INSIDE A CARD, PINNED ON SPECIFICITY RATHER THAN ON LINE NUMBER.
Without these two, `.svc-band--dark a:not(.btn-default):hover` (0,4,1) and
`.svc-band--dark .svc-card .svc-card__title a` (0,4,1) TIE, and the only
thing deciding the winner is that the card rule is written further down this
file. That is a real trap: move either block, or hoist the band rule into a
later sheet, and all 27 card links on other-services turn --white-color ON A
WHITE CARD and disappear on hover. Specificity should decide this, not
source order.
.svc-card__title a:hover (0,5,1)
.svc-card a:not()…:not()…:hover (0,6,2)
Both clear the band's (0,4,1) outright, so the block is now order-independent.
These also restore the hover colour on a card title link, which the dark-band
rules had been swallowing — the only remaining hover signal there was the
underline's border-color, so the link changed almost nothing on hover.
Measured on the white card: --accent-ink 4.78:1 PASS, --primary-color
15.63:1 PASS. */
.service-page .svc-band--dark .svc-card .svc-card__title a:hover{ color: var(--accent-ink); }
.service-page .svc-band--dark .svc-card a:not(.btn-default):not(.svc-card__title a):hover{ color: var(--primary-color); }
/* --- CARD ICON — hoisted out of three page files -----------------------
`.svc-card__icon` was written independently into oral-surgery,
periodontal-care and endodontics, byte-identical each time, each carrying a
comment saying a fourth copy should trigger this hoist. Three is enough.
FA 6.6.0 Free is enqueued site-wide by the parent (`ac-fontawesome`).
The icon is DECORATION and every instance is `aria-hidden="true"` — the card
title carries the meaning — so it has no 1.4.3 duty. It clears the bar
anyway: at ~30px it sits inside the opaque white card, never on the navy,
and --accent-ink #04807e on #FFFFFF is 4.78:1 PASS. (--accent-color #059e9c
is 3.29:1 there and is LARGE-TEXT ONLY, so it is not used.)
`
` is not in the `.section--inverse` white-out list, so nothing repaints
these on a dark band. */
.service-page .svc-card__icon{
display: block; font-size: 30px; line-height: 1;
color: var(--accent-ink); margin: 0 0 20px;
}
/* A `.svc-note` aside caught inside a dark band takes the same treatment as
the cards: an opaque white panel, its own ink restored. */
.service-page .svc-band--dark .svc-note{ background: var(--white-color); }
/* …UNLESS IT IS NESTED INSIDE A CARD, which is the case the rule above gets
wrong. `.svc-note` is normally an aside sitting on the band, so painting it
white is right. But a note INSIDE a `.svc-card` is already on white, so the
rule above painted white on white and the panel lost its edge entirely —
found on nutritional-testing-with-kbmo, whose three FIT panels are nested
that way. (0,4,0) beats the (0,3,0) above and hands those back the tinted
ground the note has on every light band, which is what it looked like before
the section went navy. Contrast is therefore unchanged and still measured on
#F7F9FC: #4E5560 7.13:1 PASS, #04807e 4.53:1 PASS. */
.service-page .svc-band--dark .svc-card .svc-note{ background: var(--secondary-color); }
.service-page .svc-band--dark .svc-note p,
.service-page .svc-band--dark .svc-note li{ color: var(--text-color); }
.service-page .svc-band--dark .svc-note .eyebrow-text{ color: var(--accent-ink); }
/* --- Two short h2 sections side by side, for bodies that end in a run of
one-paragraph sections. */
.service-page .svc-duo{
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 40px 56px;
}
.service-page .svc-duo__title{ margin: 0 0 20px; font-size: clamp(24px, 2.2vw, 32px); }
.service-page .svc-duo__col .prose-serif{ margin: 0 0 20px; }
.service-page .svc-duo__col .prose-serif:last-child{ margin-bottom: 0; }
/* ---------------------------------------------------------------------
5 · SPLIT BAND — image one side, copy the other. Reuses the parent's
.img-frame + .media--zoom exactly as home / about / services do.
--------------------------------------------------------------------- */
.service-page .svc-split__body .content-header{ margin: 0 0 24px; }
.service-page .svc-split__body .prose-serif{ margin: 0 0 20px; max-width: 62ch; }
.service-page .svc-split__body .prose-serif:last-child{ margin-bottom: 0; }
.service-page .svc-split__media{ aspect-ratio: 3 / 2; }
/* ---------------------------------------------------------------------
6 · FAQ — native /. No JavaScript, no ARIA to keep in
sync, keyboard-operable for free, and the open state is always truthful.
(The source markup was a dead Divi accordion: