in there would be invalid HTML.
*/
.tip {
position: relative;
display: inline-block;
}
.tip__trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.4em;
height: 1.4em;
margin-left: 0.4em;
padding: 0;
border: 1px solid currentColor;
border-radius: 50%;
background: none;
color: inherit;
font: inherit;
font-size: 0.7em;
line-height: 1;
cursor: pointer;
}
.tip__trigger:hover,
.tip__trigger[aria-expanded="true"] {
border-color: var(--color-accent-dark);
background: var(--color-accent-dark);
color: var(--color-white);
}
/* The tip usually hangs off a label that is uppercase, letter-spaced and
coloured; the panel is body copy and resets all of it. */
.tip__panel:not([hidden]) {
display: block;
}
.tip__panel {
position: absolute;
top: calc(100% + 10px);
left: 0;
z-index: 5;
width: min(420px, 78vw);
max-height: 60vh;
overflow-y: auto;
padding: 18px 20px;
border-top: 3px solid var(--color-accent);
background: var(--color-white);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
color: var(--color-text);
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
line-height: 1.5;
letter-spacing: normal;
text-align: left;
text-transform: none;
}
.tip__title {
display: block;
margin-bottom: 0.6em;
font-family: var(--font-heading);
font-size: 17px;
font-weight: 700;
}
.tip__text {
display: block;
}
.tip__text+.tip__text {
margin-top: 0.8em;
}
/*#endregion*/
/* Layout utilities. */
.wrapper {
width: 100%;
max-width: var(--wrapper-width);
margin: 0 auto;
padding-right: var(--wrapper-gutter);
padding-left: var(--wrapper-gutter);
}
.wrapper-text {
max-width: var(--wrapper-text-width);
}
.full-w {
width: 100%;
}
.section-padding {
padding-top: 48px;
padding-bottom: 48px;
}
.eyebrow {
margin: 0 0 0.5em;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
@media (min-width: 1024px) {
.eyebrow {
font-size: 20px;
}
}
/*
* Centred intro above a grid or card row: eyebrow, heading, one lead sentence.
* Shared by every section that opens that way, so the measure and the spacing
* below it stay identical across the site.
*
* The eyebrow accent is scoped to here rather than set on .eyebrow globally:
* on a dark band the eyebrow inherits white, and --color-accent-dark would be
* unreadable there.
*/
.section__head {
max-width: 44em;
margin: 0 auto 40px;
text-align: center;
}
.section__head .eyebrow {
color: var(--color-accent-dark);
}
.section__head p:last-child {
margin-bottom: 0;
}
/* The "see everything" link that closes a section whose body is a grid or a
slider — used after the service cards, the doctors and the reviews, so it is
defined once rather than per section. */
.section__more {
margin: 40px 0 0;
text-align: center;
}
.pipe::after {
content: "|";
margin: 0 0.5em;
}
.pipe:last-child::after {
content: none;
}
@media (min-width: 769px) {
.section-padding {
padding-top: 72px;
padding-bottom: 72px;
}
}
@media (min-width: 1025px) {
.section-padding {
padding-top: 96px;
padding-bottom: 96px;
}
}
/* Check list --------------------------------------------------------------- */
.check-list {
margin: 1em 0 0;
padding: 0;
list-style: none;
}
.check-list li {
position: relative;
margin-bottom: 10px;
padding-left: 30px;
}
.check-list li::before {
content: "✓";
position: absolute;
top: 0;
left: 0;
font-weight: 700;
color: var(--color-accent-dark);
}
.band--dark .check-list li::before {
color: var(--color-accent-light);
}
.check-list--columns {
display: grid;
grid-template-columns: 1fr;
gap: 0 24px;
}
@media (min-width: 480px) {
.check-list--columns {
grid-template-columns: 1fr 1fr;
}
}
/*#region Slider*/
/*
* Generic horizontal slider, driven by main.js ([data-slider],
* .slider__viewport, .slider__track, .slider__slide, [data-slider-prev|next]).
* Shared component, not review-specific — the JS binds every [data-slider].
*
* The track is moved with a transform, not by scrolling: a scroll container
* fights its own snap points, and Chrome throttles smooth scrolling to nothing
* in a background tab. A transform is deterministic and cheap to composite.
*
* No-JS fallback: without the .js class on the viewport is a plain
* scrollable row, so every slide is still reachable. Once JS is present the
* viewport clips instead and the buttons take over.
*
* Motion is a transform transition, so the global prefers-reduced-motion floor
* further up this file already collapses it — no guard needed here.
*/
.slider__viewport {
overflow-x: auto;
}
.js .slider__viewport {
overflow: hidden;
}
.slider__track {
display: flex;
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
.js .slider__track {
transition: transform 0.45s ease;
}
.slider__slide {
flex: 0 0 100%;
}
/* Two slides from tablet, three from laptop. The basis subtracts the gaps the
row carries, so a whole number of slides fills the viewport exactly — which
is also what lets main.js derive how many are on stage. */
@media (min-width: 700px) {
.slider__slide {
flex-basis: calc((100% - 24px) / 2);
}
}
@media (min-width: 1024px) {
.slider__slide {
flex-basis: calc((100% - 48px) / 3);
}
}
/* Controls ----------------------------------------------------------------- */
.slider__controls {
display: none;
gap: 12px;
justify-content: center;
margin-top: 24px;
}
.js .slider__controls {
display: flex;
}
.slider__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
background: var(--color-bg);
border: 1px solid var(--color-accent-dark);
border-radius: 50%;
color: var(--color-accent-dark);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.slider__btn:hover:not(:disabled) {
background: var(--color-accent-dark);
color: var(--color-white);
}
.slider__btn:focus-visible {
outline: 3px solid var(--color-accent-dark);
outline-offset: 3px;
}
/* At the ends. Reduced opacity is the visual cue; the real state is the
disabled attribute, which assistive tech reads directly, so this is not
colour-only meaning. */
.slider__btn:disabled {
opacity: 0.35;
cursor: default;
}
.slider__btn .icon {
width: 22px;
height: 22px;
}
/* One chevron asset, turned to point each way. */
.slider__btn--prev .icon {
transform: rotate(90deg);
}
.slider__btn--next .icon {
transform: rotate(-90deg);
}
/*
* Desktop: the arrows leave the row underneath and flank the slides instead,
* so the eye does not have to travel down past the cards to reach them. Below
* this width they stay centred under the slider, where a thumb can reach them.
*
* A three-column grid rather than absolute positioning: the buttons occupy
* real space beside the viewport, so they cannot overlap a card, and the track
* simply measures narrower — main.js reads the slide width at runtime, so
* nothing there needs to know this layout exists.
*
* .slider__controls becomes display: contents so its two buttons become grid
* items of .slider directly. It is a plain
with no semantics of its own,
* so dissolving its box costs nothing; its margin-top is dropped with it.
*/
@media (min-width: 1024px) {
.js .slider {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: 20px;
}
.js .slider__viewport {
grid-area: 1 / 2;
}
.js .slider__controls {
display: contents;
}
.js .slider__btn--prev {
grid-area: 1 / 1;
}
.js .slider__btn--next {
grid-area: 1 / 3;
}
}
/*#endregion*/
/*#region Service cards*/
/*
* [service_cards] output (inc/shortcodes.php). Lives here rather than in
* pages/home.css because the same shortcode is meant for the Services landing
* page and any section page that lists its children.
*
* One photo per card with the service name centred on top. The photo carries a
* graphite tint at rest; hovering the card — or focusing its link — takes that
* tint to fully opaque, so the card becomes a solid graphite tile.
*
* Contrast: the title is white on the tinted photo. Even over a pure white
* photo the 0.62 tint composites to ~#7c8185 — 3.94:1, which clears the 3:1
* floor for large text (the title is 24px bold, well past the 18.66px bold
* threshold). Do not lower the tint or shrink the title without redoing that
* sum; on hover the tint is solid and the ratio is 12.69:1.
*/
.service-cards {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
/* Photo and title share one grid cell, so the title centres over the image
without absolute positioning or a hardcoded height. */
.service-card {
position: relative;
display: grid;
overflow: hidden;
border-radius: 3px;
background: var(--color-bg-inverse);
color: var(--color-text-inverse);
}
.service-card__media,
.service-card__title {
grid-area: 1 / 1;
}
.service-card__media {
position: relative;
aspect-ratio: 4 / 3;
line-height: 0;
}
.service-card__image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* No Featured Image: a plain teal tile instead of a photo. It still darkens to
the same navy on hover, so a card without a picture behaves like the others.
White title over the tinted teal is 9.22:1. */
.service-card__media--empty {
background: var(--color-accent-dark);
}
.service-card__media::after {
content: "";
position: absolute;
inset: 0;
background: var(--color-bg-inverse);
opacity: 0.62;
transition: opacity 0.3s ease;
}
/* The tint above is a positioned element, which would paint over ordinary
sibling content — the title has to be positioned to stay on top of it. */
.service-card__title {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 20px;
font-size: 24px;
line-height: 1.2;
text-align: center;
}
.service-card__link {
color: var(--color-text-inverse);
text-decoration: none;
}
/* Stretched link: the whole card is clickable while the link's accessible name
stays just the service title. */
.service-card__link::after {
content: "";
position: absolute;
inset: 0;
}
/* The global focus ring is --color-accent-dark, which is too dark to see on
this navy ground; the light variant is 7.35:1 against it. */
.service-card__link:focus-visible {
outline-color: var(--color-accent-light);
}
.service-card:hover .service-card__media::after,
.service-card:focus-within .service-card__media::after {
opacity: 1;
}
@media (min-width: 600px) {
.service-cards {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.service-cards {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
}
/*#endregion*/
/*#region Footer*/
/*
* Site footer.
*
* Layout: brand + contact, appointments CTA, quick links, then a legal bar.
* Dark navy ground, white text, teal accents — the real Mid County Dental
* brand colors (see design/), not the theme's gold placeholder.
*/
/*
* "Our Location" block — practice details beside an embedded map, sitting
* directly above the footer. Mobile-first: details stack over the map, the two
* sit side by side from 900px up.
*/
.site-location {
background: var(--color-bg-muted);
}
/* Only one h2 and two h3s live in this section, so the shared look rides on the
elements and the classes below carry only what differs between them. */
.site-location h2 {
margin: 0 0 0.8em;
text-align: center;
color: var(--color-bg-inverse);
}
.site-location h3 {
color: var(--color-bg-inverse);
}
.site-location__grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 900px) {
.site-location__grid {
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
}
.site-location__name {
margin: 0 0 0.7em;
}
.site-location__subtitle {
margin: 1.2em 0 0.5em;
font-size: 22px;
}
.site-location__contacts,
.site-location__hours {
margin: 0;
padding: 0;
list-style: none;
font-weight: 600;
}
.site-location__contacts li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.site-location__contacts .icon {
width: 20px;
height: 20px;
flex: 0 0 auto;
color: var(--color-accent);
}
.site-location__contacts a {
color: var(--color-accent-dark);
text-decoration: none;
}
.site-location__contacts a:hover,
.site-location__contacts a:focus-visible {
text-decoration: underline;
text-underline-offset: 2px;
}
.site-location__hours li {
margin-bottom: 6px;
}
/* Reserve the map's space before the iframe loads, so nothing shifts. */
.site-location__map {
height: 100%;
min-height: 300px;
}
.site-location__frame {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.site-footer {
background: var(--color-bg-inverse);
color: var(--color-white);
font-size: 18px;
}
/* Width and side gutters come from .wrapper on the same element. */
.site-footer__inner {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
padding-top: 56px;
padding-bottom: 56px;
}
@media (min-width: 768px) {
.site-footer__inner {
grid-template-columns: 1.4fr 1fr 0.8fr;
gap: 56px;
}
.site-location__map {
min-height: 400px;
}
}
/* Columns ------------------------------------------------------------------ */
.site-footer__col> :first-child {
margin-top: 0;
}
.site-footer__heading {
margin: 0 0 0.75em;
font-size: 24px;
color: var(--color-white);
}
/* Brand + contact ---------------------------------------------------------- */
.site-footer__logo {
margin-bottom: 24px;
}
/*
* The logo is a full-colour raster whose graphite half ("DENTAL SPECIALTIES"
* and the implant screw) is nearly the same value as --color-bg-inverse, so it
* disappears against the footer. brightness(0) crushes every pixel to black,
* invert(1) lifts it to white. Filters touch RGB but not alpha, so the screw's
* semi-transparent gradient stays semi-transparent and reads as soft grey
* depth inside the solid white outline — intended, not a miss. Drop this
* filter if a white logo variant is ever uploaded, or it will invert to dark.
*/
.site-footer__logo img {
height: auto;
max-width: 220px;
filter: brightness(0) invert(1);
}
.site-footer__contact {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 1em;
text-decoration: none;
}
.site-footer__contact .icon {
flex: 0 0 auto;
font-size: 1em;
color: var(--color-accent-light);
}
.site-footer__contact:hover {
color: var(--color-accent-light);
}
.site-footer__social {
display: flex;
gap: 18px;
margin-top: 20px;
}
.site-footer__social-link {
display: inline-flex;
color: var(--color-white);
}
.site-footer__social-link .icon {
font-size: 1.25em;
}
.site-footer__social-link:hover {
color: var(--color-accent-light);
}
/* Appointments ------------------------------------------------------------- */
.site-footer__appointments p {
margin: 0 0 1.25em;
font-size: 1em;
}
.site-footer__cta {
display: inline-block;
}
/* Quick links -------------------------------------------------------------- */
.site-footer__menu {
margin: 0;
padding: 0;
list-style: none;
font-weight: 600;
}
.site-footer__menu li {
margin-bottom: 10px;
}
.site-footer__menu a {
font-size: 1em;
text-decoration: none;
}
.site-footer__menu a:hover {
color: var(--color-accent-light);
}
/* Legal bar ---------------------------------------------------------------- */
.site-footer__bar {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Width and side gutters come from .wrapper on the same element. */
.site-footer__bar-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.site-footer__copyright {
margin: 0;
color: var(--color-accent-light);
}
.site-footer__legal-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 16px;
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__legal-menu a {
text-decoration: none;
}
.site-footer__legal-menu a:hover {
color: var(--color-accent-light);
}
/*#endregion*/