/* Classy Dental skin (L3) — composes Anchor primitives.
Brand colors come from Theme Colors (ac_colors). Only typography + polish here. */
:root {
--heading-font: 'Playfair Display', Georgia, serif;
--default-font: 'Libre Franklin', system-ui, -apple-system, sans-serif;
--mono-font: 'EB Garamond', Georgia, serif;
/* header/footer chrome fonts (Site Config also sets these; keep in sync) */
--anchor-font-heading: 'Playfair Display', Georgia, serif;
--anchor-font-body: 'Libre Franklin', system-ui, sans-serif;
}
/* Editorial heading treatment */
.u-display, .u-title { letter-spacing: .2px; font-weight: 600; }
.eyebrow-text { letter-spacing: .18em; text-transform: uppercase; font-family: var(--mono-font); }
/* =====================================================================
BUTTON SYSTEM — one base class, two variants. Nothing else.
Every button on the site is `.btn-default` plus (optionally) a variant.
Do NOT invent a new button class in page CSS; page CSS may only set
margins/alignment on the element (e.g. `.closing-cta__btn{margin-top}`).
.btn-default filled gold, square (DEFAULT — every button)
.btn-default.btn-ghost outline (available; nothing uses it today)
.btn-default.btn-sm compact size (nav bar, mobile menu drawer)
Ghost is context-aware: `--btn-ink` is inherited, so an outline button
inside any dark band (.bg-leather / .service-hero / .section--inverse)
flips to light gold automatically with no extra class in the markup.
===================================================================== */
/* --- Ink tokens ------------------------------------------------------ */
:root{
/* Gold fill takes near-black teal ink — white on #b8ae82 is only 1.9:1 and
fails legibility at this type size. */
--btn-fill: var(--accent-color);
--btn-fill-ink: color-mix(in srgb, var(--primary-color) 55%, #000);
--btn-fill-hover: var(--button-hover-color);
--btn-fill-hover-ink: var(--white-color);
/* Ghost, light sections: deep teal line + text. */
--btn-ink: var(--primary-color);
--btn-ink-hover-bg: var(--primary-color);
--btn-ink-hover-text: var(--white-color);
}
/* Ghost, dark bands: light gold line + text (6.1:1 on teal; raw --accent-color is 4.1:1). */
.bg-leather, .service-hero, .section--inverse, .cover, .ac-menu, .ac-header{
--btn-ink: color-mix(in srgb, var(--accent-color) 55%, var(--white-color));
--btn-ink-hover-bg: var(--accent-color);
--btn-ink-hover-text: color-mix(in srgb, var(--primary-color) 55%, #000);
}
/* --- Base (filled gold, square) -------------------------------------- */
/* Overrides the parent framework's pill: radius 100px -> 0, and 16px bold
capitalize -> 13px uppercase letterspaced. */
.btn-default,
.ac-btn{
position: relative;
display: inline-flex;
align-items: center;
font-family: var(--default-font);
font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: .2em;
text-transform: uppercase;
background: var(--btn-fill);
color: var(--btn-fill-ink);
border: 1px solid var(--btn-fill);
border-radius: 0;
padding: 20px 56px 20px 28px;
text-decoration: none;
cursor: pointer;
overflow: hidden;
transition: background .25s ease, color .25s ease, border-color .25s ease;
z-index: 1;
}
.btn-default:hover,
.ac-btn:hover{
background: var(--btn-fill-hover);
border-color: var(--btn-fill-hover);
color: var(--btn-fill-hover-ink);
}
/* Arrow — inherited from the parent (\f061 rotated -45deg). Re-anchored to
the new padding; it straightens on hover, same as the parent. */
.btn-default::before{
font-size: 13px;
transform: translate(-28px, -50%) rotate(-45deg);
}
.btn-default:hover::before{ transform: translate(-28px, -50%) rotate(0deg); }
/* Kill the parent's rotating diagonal sweep — the square system fills flat. */
.btn-default::after{ display: none; }
/* --- Variant: ghost outline ------------------------------------------ */
.btn-default.btn-ghost,
.ac-btn--ghost{
background: transparent;
color: var(--btn-ink);
border-color: color-mix(in srgb, var(--btn-ink) 55%, transparent);
}
.btn-default.btn-ghost:hover,
.ac-btn--ghost:hover{
background: var(--btn-ink-hover-bg);
border-color: var(--btn-ink-hover-bg);
color: var(--btn-ink-hover-text);
}
/* --- Variant: small (nav bar, mobile drawer) ------------------------- */
.btn-default.btn-sm,
.ac-btn--sm{
font-size: 11.5px;
letter-spacing: .22em;
padding: 13px 46px 13px 24px;
}
.btn-default.btn-sm::before{ font-size: 11px; transform: translate(-24px, -50%) rotate(-45deg); }
.btn-default.btn-sm:hover::before{ transform: translate(-24px, -50%) rotate(0deg); }
/* --- Mobile: content CTAs span the column ----------------------------- */
/* The button is inline-flex with 28px/56px padding, so a two-word label like
"Request a Visit" wraps inside a narrow box on a phone. Full width fixes
that, and the arrow needs no adjustment — it is positioned `right: 0`
against the button edge, so it simply moves out with it.
`.btn-sm` is excluded on purpose: those are the nav bar and the mobile
drawer pair, and the drawer lays its two out with `flex: 1` for a 50/50
split that a forced 100% width would break. */
@media (max-width: 767px){
.btn-default:not(.btn-sm){ width: 100%; }
}
/* --- Legacy aliases --------------------------------------------------- */
/* Older parent outline variants map onto .btn-ghost; `.btn-solid` is a no-op
now that gold IS the base. Keeps stale markup from resurrecting the pill. */
.btn-default.btn-highlighted,
.btn-default.btn-border,
.btn-default.btn-ghost-dark{
background: transparent;
color: var(--btn-ink);
border-color: color-mix(in srgb, var(--btn-ink) 55%, transparent);
}
.btn-default.btn-highlighted:hover,
.btn-default.btn-border:hover,
.btn-default.btn-ghost-dark:hover{
background: var(--btn-ink-hover-bg);
border-color: var(--btn-ink-hover-bg);
color: var(--btn-ink-hover-text);
}
/* Column gutters — the parent framework.css pins .row > * to a fixed 15px and
ignores Bootstrap's gx-* gutter classes, so gx-4/gx-5 produce no extra space.
Restore real gutters (overflow-safe: row negative margin matches column padding). */
.row.gx-4{ margin-left: -20px; margin-right: -20px; }
.row.gx-4 > *{ padding-left: 20px; padding-right: 20px; }
.row.gx-5{ margin-left: -28px; margin-right: -28px; }
.row.gx-5 > *{ padding-left: 28px; padding-right: 28px; }
@media (max-width: 991px){
.row.gx-4, .row.gx-5{ margin-left: -15px; margin-right: -15px; }
.row.gx-4 > *, .row.gx-5 > *{ padding-left: 15px; padding-right: 15px; }
}
/* Reusable teal-leather background — drop `.bg-leather` on any section for the
dark leather look (Meet the Dentists, service sections, CTAs). Sets the
background + light-on-dark text defaults so it's drop-in anywhere. */
.bg-leather{
position: relative;
background:
linear-gradient(rgba(3,24,28,0.40), rgba(3,24,28,0.58)),
url('/wp-content/uploads/2026/06/section-leather.avif') center/cover no-repeat;
color: color-mix(in srgb, var(--white-color) 84%, transparent);
}
/* Light-on-dark text is the whole point of the utility, so it must win over any
page-scoped color rule (e.g. `.service-page .content-header`) regardless of load order. */
.bg-leather h1, .bg-leather h2, .bg-leather h3,
.bg-leather .content-header, .bg-leather .u-display, .bg-leather .u-title{ color: var(--white-color) !important; }
.bg-leather p, .bg-leather .prose-serif{ color: color-mix(in srgb, var(--white-color) 82%, transparent) !important; }
.bg-leather .eyebrow-text{ color: var(--accent-color) !important; }
/* Offset frame edge — a gold square sits BEHIND the image, shifted 10px left + 10px
down, so a frame edge peeks at the bottom-left. Drop `.img-frame` on any image
wrapper (works for and background-image blocks); no bare, plain images. */
.img-frame{ position: relative; display: block; }
.img-frame::before{
content: ''; position: absolute; inset: 0;
background: var(--accent-color);
transform: translate(-10px, 10px);
z-index: 0; pointer-events: none;
}
.img-frame > *{ position: relative; z-index: 1; }
/* Inline prose links ---------------------------------------------------
The framework base rule is `a{ text-decoration: none; }` with NO colour, so a
link written inside body copy inherits the paragraph colour and renders as
plain, unclickable-looking text. Every service page that has ever needed an
inline link has re-declared the same fix in its own `_ac_custom_css`; this is
that fix, once, for the whole child theme. Scoped to `.service-page` so it
only touches editorial prose — nav, footer, buttons and whole-card links keep
their own treatments. Page CSS prints at wp_head:99, after this file, so a
page can still override it. */
.service-page .prose-serif a{
color: var(--accent-color);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.3s ease;
}
.service-page .prose-serif a:hover{ color: var(--primary-color); }
/* On the leather band the body copy is already a muted near-white (set
!important above), so the light-section hover would all but disappear —
flip the hover to full white instead. */
.service-page .bg-leather .prose-serif a:hover{ color: var(--white-color); }
/* --- Partner / affiliation logo reel --------------------------------
Sits directly under the page hero on every page except Contact. The
marquee inside is an Anchor Gallery (logo_carousel), which brings its
own sizing; this only supplies the band and its breathing room. */
.partner-reel{
padding: 22px 0;
background: var(--white-color);
border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
}
@media (max-width: 767px){
.partner-reel{ padding: 16px 0; }
}
/* --- Card grids become a peek-slider on small screens ----------------
Every icon-card grid on the site is the same shape: a Bootstrap `.row`
whose columns each hold one `.ac-panel` card (care-card, jaw-card,
promise-card, pillar-card, phase-card, correct-card, advantage-card).
Rather than tag each one, this matches on that shape with `:has()`, so
card grids added later pick the behaviour up with no markup change.
The cards are deliberately narrower than the track: the sliver of the
next card IS the affordance that tells you it swipes. CSS scroll-snap
does the whole job, so there is no JS and nothing to measure on load. */
@media (max-width: 991px){
.row:has(> [class*="col-"] > .ac-panel){
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 6px;
}
.row:has(> [class*="col-"] > .ac-panel)::-webkit-scrollbar{ display: none; }
.row:has(> [class*="col-"] > .ac-panel) > [class*="col-"]{
flex: 0 0 46%;
max-width: 46%;
scroll-snap-align: start;
}
/* Cards keep a common height so the track reads as one row, not a ragged edge. */
.row:has(> [class*="col-"] > .ac-panel) > [class*="col-"] > .ac-panel{ height: 100%; }
}
@media (max-width: 575px){
.row:has(> [class*="col-"] > .ac-panel) > [class*="col-"]{
flex: 0 0 84%;
max-width: 84%;
}
}
/* --- Icon card padding ------------------------------------------------
The framework's .ac-panel ships 40px, which is generous for these short
icon cards and costs a lot of height once they become a mobile slider.
Scoped to the dental card variants rather than .ac-panel itself, because
.ac-panel also backs blog items (which use --flush) and CTA boxes, and a
bare .ac-panel override here would win over those on source order. */
.care-card,
.jaw-card,
.promise-card,
.pillar-card,
.phase-card,
.correct-card,
.advantage-card{ padding: 20px; }
/* --- Image-right rows lead with the image on mobile -------------------
Half the split rows on the site are copy-left / image-right, so the copy
comes first in the DOM and the image drops below it once the row stacks.
That buries the visual and makes every one of those sections open with a
wall of text. Where the image sits in the LAST column, pull it above the
copy on small screens so a split row always leads with its image.
`order` rather than `flex-direction: column-reverse`: .row carries
`flex-wrap: wrap`, and wrapping along the column axis is a different
(and messier) behaviour than wrapping along the row axis. Moving the one
column is equivalent here and leaves the wrap model alone. */
@media (max-width: 991px){
.row:has(> [class*="col-"]:last-child .img-frame) > [class*="col-"]:last-child,
.row:has(> [class*="col-"]:last-child .media) > [class*="col-"]:last-child{
order: -1;
}
}
/* --- Service intro band ----------------------------------------------
The editorial opener on every service page: rotated service name on the
spine, eyebrow + heading in the main column, a hairline, then the lead
prose and the enquiry form. Mirrors the home page's philosophy block,
which is where the pattern was set — but lives here, in the theme, so
all 13 pages share one definition instead of 13 copies of the old
ornate-frame CSS. */
.svc-intro{ background: #fff; }
.svc-intro__grid{
display: grid;
grid-template-columns: 58px 1fr 1px 420px;
gap: 0 56px;
align-items: start;
}
.svc-intro__spine{
writing-mode: vertical-rl; transform: rotate(180deg);
font-family: var(--default-font); font-size: 11px; letter-spacing: .24em;
text-transform: uppercase; color: color-mix(in srgb, var(--primary-color) 45%, transparent);
justify-self: start; white-space: nowrap;
}
.svc-intro__title{
font-family: var(--heading-font); font-weight: 500;
font-size: clamp(34px, 3.75vw, 54px); line-height: 1.08;
color: var(--primary-color); margin: 0;
}
.svc-intro .eyebrow-text{ margin-bottom: 18px; }
/* Hairline column — stretches to the tallest cell in the row. */
.svc-intro__rule{ background: color-mix(in srgb, var(--primary-color) 14%, transparent); align-self: stretch; }
.svc-intro__side .prose-serif{ font-size: 19px; margin: 0 0 18px; }
.svc-intro__side .prose-serif:last-child{ margin-bottom: 0; }
.svc-intro__form{ margin-top: 56px; }
@media (max-width: 1200px){
.svc-intro__grid{ grid-template-columns: 40px 1fr 1px 340px; gap: 0 36px; }
}
@media (max-width: 991px){
.svc-intro__grid{ grid-template-columns: 1fr; gap: 28px; }
/* The spine and hairline are decorative framing; at one column they have
nothing to frame, and the rotated text would eat a full line of height. */
.svc-intro__spine, .svc-intro__rule{ display: none; }
.svc-intro__form{ margin-top: 40px; }
}
/* --- Contact card footer: privacy note, divider, follow ---------------- */
.contact-aside{ margin-top: 30px; text-align: center; }
.contact-aside__privacy{
font-family: var(--default-font); font-size: 13.5px; line-height: 1.6;
color: color-mix(in srgb, var(--primary-color) 62%, transparent);
margin: 0 auto; max-width: 52ch;
}
.contact-aside__divider{
border: 0; height: 1px; margin: 26px auto;
background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}
.contact-aside__follow .eyebrow-text{ margin-bottom: 14px; }
.contact-aside__social{ display: flex; justify-content: center; align-items: center; gap: 14px; }
.cd-social__link{
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
color: var(--primary-color);
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.cd-social__link:hover{
background: var(--primary-color); color: var(--white-color);
border-color: var(--primary-color);
}
/* Footer legal row — sits beside the copyright line. */
.ac-footer__legal a{ color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; }
.ac-footer__legal a:hover{ color: var(--accent-color); border-bottom-color: var(--accent-color); }
.ac-footer__legal span{ opacity: .45; margin: 0 4px; }
/* =====================================================================
READ MORE — a clamped block plus a control that opens the full text.
=====================================================================
For long-form copy that must not set the height of its section: the
block is clamped, faded out at the foot, and a text control hands the
rest to an Anchor Tools popup. The popup owns the full text; this
component is only the clamp and the control, so nothing here has to
know what it is truncating.
Two knobs, both custom properties, so a page sets them rather than
redeclaring the component:
--readmore-h clamped height (default 300px)
--readmore-fade the colour the fade lands on, i.e. the section's
own background (default --secondary-color)
`--readmore-fade` is the one that matters. A fade hard-coded to a
single background only works on that background: drop the same block
into a white or teal section and the gradient ends on the wrong colour
and reads as a grey smear across the copy. Set it per section and the
component travels.
Deliberately NOT `-webkit-line-clamp`: that counts lines within one
block, and these excerpts are several sibling
elements, so it would
clamp the first paragraph alone and leave the others at full height. */
.readmore{
position: relative;
max-height: var(--readmore-h, 300px);
overflow: hidden;
}
.readmore::after{
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
/* Never taller than the clamp itself, or a short block is all fade. */
height: min(150px, var(--readmore-h, 300px));
pointer-events: none;
background: linear-gradient(to bottom,
transparent 0%,
color-mix(in srgb, var(--readmore-fade, var(--secondary-color)) 72%, transparent) 48%,
var(--readmore-fade, var(--secondary-color)) 100%);
}
/* The control. A real