/* ==========================================================================
Dental Leaf — Conversion Layer
Sticky mobile action bar (Call / WhatsApp / Book) + desktop WhatsApp FAB.
Additive only: no existing selector is overridden.
WCAG 2.2 — 44x44 min target (2.5.8), visible focus (2.4.11/2.4.13).
========================================================================== */
:root {
/* PHASE 18 — both greens failed WCAG 1.4.3 behind their white labels.
Measured on the live bar: call 4.38:1, WhatsApp 1.98:1, against a 4.5:1
requirement (the labels are 12px/600, nowhere near 'large text').
axe did not report these: it could not resolve the background under a
fixed, box-shadowed bar, so it filed them as 'incomplete' rather than a
violation. They were found by measuring the computed colours directly.
Same hues, darkened to the minimum that passes: 4.61:1 and 4.71:1. */
--dl-call: #1e864a;
--dl-wa: #178540;
--dl-book: var(--primary-color, #4a7cd2);
--dl-bar-h: 62px;
}
/* --------------------------------------------------------------------------
0. Responsive image sizing — REQUIRED by the width/height attributes
Every now carries intrinsic width and height attributes so the
browser can reserve the right space and avoid layout shift (CLS). But an
HTML height attribute is a real sizing hint: with no CSS height to override
it, the browser uses it literally.
This theme sets width only (.w-100{width:100%}, .w-70px{width:70px} ...) and
never sets height:auto, so an image would render 100% wide but locked to its
intrinsic pixel height — badly stretched. This rule restores proportional
scaling and is what makes the width/height attributes safe.
Deliberately a bare element selector (specificity 0,0,1):
- it beats the HTML attribute, which is what we need;
- it LOSES to every class-based rule in the theme, so intentional fixed
heights are untouched — .de_testi_by img (80px), .images-carousel-group
img (350px), #custom-owl-slider .item img (100%), #btn-extra.img (32px).
-------------------------------------------------------------------------- */
img {
height: auto;
}
/* --------------------------------------------------------------------------
0b. Footer column titles were
purely for their size, which produced a
h3 -> h5 skip in the document outline on every page (WCAG 1.3.1). They are
now
, which is what they actually are: page-level landmarks.
The theme styles them by tag (`footer h5`, `footer .widget h5`), so those
declarations are re-stated here for
to keep the footer looking
identical. Nothing visual changes.
-------------------------------------------------------------------------- */
footer h2 {
font-size: 18px;
text-transform: none;
color: #fff;
}
footer .widget h2 {
margin-bottom: 20px;
}
/* --------------------------------------------------------------------------
1. Sticky mobile action bar
-------------------------------------------------------------------------- */
.dl-actionbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1040; /* under the chat panel (1000/1001) is intentional: see §3 */
display: none;
background: #fff;
box-shadow: 0 -2px 18px rgba(0, 0, 0, .16);
padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone home indicator */
}
.dl-actionbar__inner {
display: flex;
align-items: stretch;
}
.dl-actionbar a {
flex: 1 1 0;
min-height: 44px;
height: var(--dl-bar-h);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
text-decoration: none;
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 1.1;
letter-spacing: .2px;
transition: filter .18s ease;
-webkit-tap-highlight-color: transparent;
}
.dl-actionbar a:hover,
.dl-actionbar a:active {
filter: brightness(1.08);
color: #fff;
}
.dl-actionbar a:focus-visible {
outline: 3px solid #111;
outline-offset: -3px;
}
.dl-actionbar a i {
font-size: 19px;
line-height: 1;
}
.dl-actionbar__call { background: var(--dl-call); }
.dl-actionbar__wa { background: var(--dl-wa); }
.dl-actionbar__book { background: var(--dl-book); }
/* --------------------------------------------------------------------------
2. Desktop WhatsApp floating button
-------------------------------------------------------------------------- */
.dl-fab-wa {
position: fixed;
right: 13px;
bottom: 141px; /* clears the existing chat toggle at bottom:71px (60px tall) */
z-index: 999;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--dl-wa);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.dl-fab-wa:hover {
color: #fff;
transform: scale(1.08);
box-shadow: 0 10px 28px rgba(37, 211, 102, .6);
}
.dl-fab-wa:focus-visible {
outline: 3px solid #111;
outline-offset: 3px;
}
.dl-fab-wa i { font-size: 27px; }
/* --------------------------------------------------------------------------
3. Responsive switch
Below 992px the bar takes over and the existing DentaBot chat toggle is
lifted above it so the two never overlap.
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
.dl-actionbar { display: block; }
.dl-fab-wa { display: none; }
/* Reserve space so the bar never covers the footer's last line. */
body { padding-bottom: calc(var(--dl-bar-h) + env(safe-area-inset-bottom, 0px)); }
/* Lift the pre-existing chat widget clear of the bar. */
.chat-widget { bottom: calc(var(--dl-bar-h) + 16px + env(safe-area-inset-bottom, 0px)); }
/* Keep scroll-to-top clear of the bar if the theme renders one. */
#back-to-top { bottom: calc(var(--dl-bar-h) + 16px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (min-width: 992px) {
.dl-actionbar { display: none; }
.dl-fab-wa { display: flex; }
}
/* --------------------------------------------------------------------------
4. Inline contact links (footer / contact page)
Makes the newly-linked phone + email look identical to the old plain text,
so no visual regression — only behaviour changes.
-------------------------------------------------------------------------- */
.dl-contact-link {
color: inherit;
text-decoration: none;
transition: color .18s ease;
}
.dl-contact-link:hover,
.dl-contact-link:focus-visible {
color: var(--primary-color, #4a7cd2);
text-decoration: underline;
}
/* --------------------------------------------------------------------------
5. Google Maps embed wrapper (contact page) — responsive, no CLS
-------------------------------------------------------------------------- */
.dl-map {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
min-height: 300px;
border-radius: 12px;
overflow: hidden;
background: #eef1f5; /* placeholder colour prevents a white flash */
}
.dl-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* --------------------------------------------------------------------------
6. Homepage hero (LCP element)
Previously the hero was painted by designesia.js reading a data-bgimage
attribute. That put the largest image on the page behind ~1 MB of
JavaScript, so the browser's preload scanner could never find it and LCP
was gated on script execution.
These rules paint it straight from CSS, which the preload scanner *can*
see, and the matching in starts the download
in the very first round trip.
Mobile gets an 828px-wide file (37 KB) instead of the desktop 1920px one
(114 KB) — the original JPEG was 486 KB for every device.
-------------------------------------------------------------------------- */
.dl-hero-1,
.dl-hero-2 {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-color: #16324f; /* paints instantly; prevents a white flash */
}
.dl-hero-1 { background-image: url(../images/slider/1-828.webp); }
.dl-hero-2 { background-image: url(../images/slider/2-828.webp); }
@media (min-width: 768px) {
.dl-hero-1 { background-image: url(../images/slider/1.webp); }
.dl-hero-2 { background-image: url(../images/slider/2.webp); }
}
/* --------------------------------------------------------------------------
7. Skip-to-content link (WCAG 2.4.1 Bypass Blocks, Level A)
Hidden until it receives keyboard focus, then it appears as the first
thing on the page. A keyboard or screen-reader user can jump straight to
the content instead of tabbing through the logo and the whole main menu on
every single page.
-------------------------------------------------------------------------- */
.dl-skip-link {
position: absolute;
top: -100px;
left: 8px;
z-index: 2000;
padding: 12px 20px;
background: var(--primary-color, #4a7cd2);
color: #fff;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 8px 8px;
transition: top .15s ease-in-out;
}
.dl-skip-link:focus,
.dl-skip-link:focus-visible {
top: 0;
color: #fff;
outline: 3px solid #111;
outline-offset: 2px;
}
/* WCAG 2.4.11 — make sure focus is never invisible on interactive elements
the theme styles with outline:0. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--primary-color, #4a7cd2);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
8. Accessibility helpers
-------------------------------------------------------------------------- */
.dl-visually-hidden {
position: absolute !important;
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) {
.dl-fab-wa,
.dl-actionbar a {
transition: none;
}
}
/* ------------------------------------------------------------------
CLS: stop #content's top margin collapsing through #wrapper.
#content carries `margin-top: 50px` from style.min.css. At first paint
#wrapper is a block-formatting context, so that margin sits INSIDE it and
#wrapper's own top edge is at y=0. Once the deferred scripts finish
(plugins.js, then designesia.js appending the sticky bar, FAB and chat
nodes — body children go 5 -> 12) #wrapper stops being a BFC, the margin
collapses through it, and the entire page drops 50px.
Measured: a single 0.059 layout shift at ~5.9s, the whole of the page's
CLS. It was invisible before only because the page used to paint later
than the shift; making the site faster is what exposed it.
display: flow-root makes #wrapper a BFC permanently, so the margin is
contained from the first paint onward and nothing moves. It is the
purpose-built keyword for exactly this and changes no other geometry.
------------------------------------------------------------------ */
#wrapper {
display: flow-root;
}
/* ------------------------------------------------------------------
CLS: the mobile header must not sit in the flow before JS runs.
Measured on a throttled mobile emulation:
at first paint header is position:static, height 54, IN the flow
after scripts designesia.js adds .header-mobile, whose rule in
style.min.css is `position: fixed !important`
Leaving the flow frees 54px, so #content jumps from y=104 to y=50 and the
whole page lurches upward — 0.056 of layout shift, the entire remaining CLS.
Declaring the same fixed position up front makes the first paint identical
to the settled state, so nothing moves. Scoped to the theme's own 992px
mobile breakpoint; desktop is unaffected because there the base
`header { position: absolute }` already keeps it out of the flow.
------------------------------------------------------------------ */
@media only screen and (max-width: 992px) {
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
}
/* ------------------------------------------------------------------
Phase 15 — internal linking blocks
.dl-areastrip the one-line "patients travel to us from ..." band that sits
above the closing CTA on service and treatment pages
.dl-arealine that sentence, and the hub link under the sibling cards
.dl-morelink the contextual pointers added to FAQ / reviews / about
sections so those pages stop being reachable from the
navigation alone
Deliberately quiet styling: these are wayfinding aids, not calls to action,
and they must not compete with the booking buttons beside them.
------------------------------------------------------------------ */
.dl-areastrip {
padding: 26px 0 0;
}
.dl-arealine,
.dl-morelink {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--body-font-color, #93a0af);
}
.dl-morelink {
margin-top: 18px;
}
.dl-arealine a,
.dl-morelink a {
color: var(--primary-color, #4a7cd2);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.dl-arealine a:hover,
.dl-morelink a:hover {
text-decoration: none;
}
/* the sibling-area cards reuse .dlh-card, but the title is a link there */
.dlh-card__title a {
color: inherit;
text-decoration: none;
}
.dlh-card__title a:hover {
color: var(--primary-color, #4a7cd2);
text-decoration: underline;
}
/* ==========================================================================
PHASE 18 — WCAG 2.2 AA colour and link fixes
==========================================================================
1. BODY TEXT CONTRAST (WCAG 1.4.3 Contrast Minimum)
The theme's --body-font-color is #93a0af. Measured against the three
backgrounds it actually sits on:
on #ffffff 2.66:1
on #f8f9fa 2.53:1
on #edf2fb 2.37:1 all need 4.5:1
That is roughly half the required contrast for ordinary paragraph text —
the single largest accessibility defect on the site, and one that affects
every visitor reading in daylight, not only those with low vision.
#5E6D7E is the smallest darkening that clears 4.5:1 with margin on EVERY
light background on the site — 4.65:1 against the worst case, #ebf0fa.
(An earlier value, #606F81, measured 4.49:1 there: right idea, one step short,
because #ebf0fa had not been included in the original measurement.) Hue and saturation are unchanged, so the
grey-blue character of the palette is kept.
Overridden here rather than in style.min.css because this file loads after
it, so the theme stays unmodified and the change is trivial to revert.
-------------------------------------------------------------------------- */
* {
--body-font-color: #5E6D7E;
}
/* 2. LINKS IN BODY TEXT (WCAG 1.4.1 Use of Colour)
axe flagged in-text links that were distinguishable from surrounding
paragraph text by colour alone. Someone with colour-vision deficiency
cannot see that they are links at all. Underlining them is the standard
remedy and costs nothing.
Scoped to links inside paragraphs and list items so it never touches
buttons, the navigation, cards or breadcrumb chevrons. */
p > a:not([class]),
li > a:not([class]),
.dl-reviewed a,
.crumb a {
text-decoration: underline;
text-underline-offset: 2px;
}
p > a:not([class]):hover,
li > a:not([class]):hover,
.dl-reviewed a:hover,
.crumb a:hover {
text-decoration: none;
}
/* 3. MUTED TEXT ON COLOURED BANDS
axe reported #b7cbed on the primary blue at 2.50:1. There is no literal
#b7cbed anywhere — it is the theme's --body-font-color-dark,
rgba(255,255,255,.6), blending over the blue behind it.
Measured against the newly darkened primary (#326BCB):
alpha .60 2.89:1
alpha .80 3.90:1
alpha .90 4.48:1 still short
alpha .95 4.79:1 passes
.95 is used rather than solid white so these lines keep a little of their
intended softness against the headline above them, while clearing AA.
(Solid white on the same background is 5.12:1, up from 4.11:1 before the
primary was darkened — so the buttons and headings on coloured bands were
fixed by that change alone.) */
* {
--body-font-color-dark: rgba(255, 255, 255, .95);
}
/* 4. THE CLOSED OVERLAY PANEL — see js/dl-conversion.js
#extra-wrap is the slide-in panel behind the hamburger. Closed, it sits at
right:-500px: off-screen, but still display:block and visibility:visible,
so its 16 links stayed in the tab order. Measured by real Tab traversal:
focus entered the invisible panel 48 times in 250 presses. The user sees
nothing move and has no idea where focus has gone (WCAG 2.4.3 / 2.4.7).
axe cannot detect this.
Fixing it in CSS does NOT work: WOW.js writes an inline
"visibility: visible" onto an animated wrapper inside the panel, and an
inline style beats any stylesheet rule short of !important — which would in
turn kill the slide-out animation.
It is handled with the "inert" attribute in js/dl-conversion.js instead.
inert removes a subtree from the tab order AND from the accessibility tree
without touching visibility, so the animation is completely unaffected.
It is handled with the attribute in js/dl-conversion.js instead.
inert removes a subtree from the tab order AND from the accessibility tree
without touching visibility, so the animation is completely unaffected. */
/* 5. Blog date badges: the theme printed the day number in the dark heading
navy (#10244b) on the primary blue — 2.86:1 against a 3:1 requirement for
text this size. White on the darkened primary is 5.34:1. */
.abs.bg-color .h4,
.abs.bg-color .fs-36,
.abs.bg-color {
color: #fff;
}
/* ==========================================================================
Footer bottom bar
Reworked after the finanex reference: the bar is a clearly separated strip
beneath the columns, with the copyright on the left and the policy links on
the right, stacking to centred on narrow screens.
The theme's own rule is `.subfooter .de-flex, .subfooter .de-flex-col
{ display: block }`, which stacked the two halves and left the links
hanging under the copyright. This lays them out properly instead of
fighting that rule, using its own class names.
========================================================================== */
.dl-subfooter {
margin-top: 60px;
padding: 26px 0;
border-top: 1px solid rgba(255, 255, 255, .12);
}
.dl-subfooter__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 28px;
}
.dl-copyright {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: rgba(255, 255, 255, .95);
}
/* the year swaps 2025 -> 2026 after scripts run; a fixed width for the digits
stops that swap nudging the text beside it (a small but real layout shift) */
.dl-copyright [data-dl-year] {
font-variant-numeric: tabular-nums;
}
.dl-legal ul.menu-simple {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 26px;
margin: 0;
padding: 0;
list-style: none;
}
.dl-legal ul.menu-simple li {
margin: 0;
padding: 0;
border: 0;
float: none;
}
.dl-legal ul.menu-simple li a {
display: inline-block;
padding: 2px 0;
font-size: 14.5px;
color: rgba(255, 255, 255, .95);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .18s ease, color .18s ease;
}
.dl-legal ul.menu-simple li a:hover,
.dl-legal ul.menu-simple li a:focus-visible {
color: #fff;
border-bottom-color: currentColor;
}
.dl-legal ul.menu-simple li a:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
border-bottom-color: transparent;
}
@media (max-width: 767.98px) {
.dl-subfooter {
margin-top: 40px;
text-align: center;
}
.dl-subfooter__inner {
justify-content: center;
gap: 16px;
}
.dl-legal ul.menu-simple {
justify-content: center;
gap: 10px 20px;
}
/* Clear the floating chat widget. Measured at 412px: the DentaBot toggle
and its greeting bubble occupy roughly 71-139px up from the bottom of
the viewport, and the bottom bar sat directly underneath them — the
copyright and both policy links were unreadable at the end of the page.
The body already reserves 62px for the sticky action bar, so 90px more
lifts the text clear of the widget entirely. The policy links wrap onto
their own row BELOW the copyright at this width, so the clearance has to
cover the whole block, not just the first line — 90px left the last link
still sitting under the bubble. */
.dl-subfooter {
padding-bottom: 160px;
}
}
/* The back-to-top button is fixed at the bottom-right and, once the visitor
reaches the end of the page, it sat on top of the last policy link —
measured overlap: the button spans x=1220-1260, "Privacy Policy" ends at
x=1228, so 8px of a real link was unclickable. Reserve room for it.
Desktop only: below 992px the button moves above the sticky action bar and
the links are centred, so there is nothing to clear. */
@media (min-width: 992px) {
.dl-legal {
padding-right: 56px;
}
}
/* ==========================================================================
FOOTER — reworked to the finanex reference
The signature details of that design, adapted rather than copied:
1. Each column heading sits above a hairline rule, with a short bright
accent segment at its left end. On the reference that accent is a
purple-to-orange gradient; here it uses the clinic's own primary and
secondary colours, so the pattern is borrowed but the brand is not.
2. Social icons become rounded tiles under a "Follow Us On:" label rather
than bare glyphs on the background.
3. Contact details become icon tile + label + value rows instead of a run
of inline icons.
4. The bottom bar is centred on one line.
========================================================================== */
/* ---- 1. column headings with the accent rule ---- */
footer .dl-fhead {
position: relative;
margin: 0 0 30px;
padding-bottom: 16px;
font-size: 21px;
font-weight: 700;
line-height: 1.3;
color: #fff;
text-transform: none;
}
/* the hairline */
footer .dl-fhead::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
max-width: 232px;
height: 1px;
background: rgba(255, 255, 255, .16);
}
/* the bright segment sitting on it */
footer .dl-fhead::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 46px;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg,
var(--primary-color, #3168c7) 0%,
var(--secondary-color, #eaa638) 100%);
}
footer .dl-fhead--follow {
margin-top: 34px;
}
/* ---- 2. link columns ---- */
footer ul.dl-flinks {
margin: 0;
padding: 0;
list-style: none;
}
footer ul.dl-flinks li {
margin: 0 0 13px;
padding: 0;
}
footer ul.dl-flinks li a {
display: inline-block;
color: rgba(255, 255, 255, .78);
text-decoration: none;
transition: color .18s ease, transform .18s ease;
}
footer ul.dl-flinks li a:hover,
footer ul.dl-flinks li a:focus-visible {
color: #fff;
transform: translateX(3px);
}
footer .dl-fabout {
color: rgba(255, 255, 255, .78);
line-height: 1.8;
}
/* ---- 3. social tiles ---- */
footer .dl-fsocial {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
}
footer .dl-fsocial a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 13px;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .12);
color: #fff;
font-size: 17px;
text-decoration: none;
transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
footer .dl-fsocial a:hover {
background: var(--primary-color, #3168c7);
border-color: var(--primary-color, #3168c7);
color: #fff;
transform: translateY(-2px);
}
footer .dl-fsocial a:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
}
/* ---- 4. contact rows ---- */
footer ul.dl-fcontact {
margin: 0;
padding: 0;
list-style: none;
}
footer .dl-fcontact__row {
display: flex;
align-items: flex-start;
gap: 14px;
margin: 0 0 22px;
padding: 0;
}
footer .dl-fcontact__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .12);
color: #fff;
font-size: 16px;
}
footer .dl-fcontact__body {
display: block;
padding-top: 1px;
}
footer .dl-fcontact__label {
display: block;
font-weight: 700;
color: #fff;
margin-bottom: 2px;
}
footer .dl-fcontact__value {
display: block;
color: rgba(255, 255, 255, .78);
line-height: 1.65;
}
footer .dl-fcontact__value a {
color: rgba(255, 255, 255, .78);
}
footer .dl-fcontact__value a:hover {
color: #fff;
}
/* ---- 5. bottom bar, centred like the reference ---- */
.dl-subfooter__inner {
flex-direction: column;
justify-content: center;
text-align: center;
gap: 12px;
}
.dl-legal ul.menu-simple {
justify-content: center;
}
@media (min-width: 992px) {
/* the back-to-top button no longer sits beside the links now that the bar
is centred, so the reserved gutter from the earlier layout is dropped */
.dl-legal {
padding-right: 0;
}
}
/* "Follow Us On:" keeps the rule and accent.
The reference leaves this one plain — only its three column headings are
underlined — and it was briefly matched to that. Kept underlined by choice:
it ties the brand column to the other three, and with four headings all
marked the same way the row reads as one system rather than three-plus-one.
Slightly smaller than the column headings so it still sits below them in
the visual hierarchy. */
footer .dl-fhead--follow {
margin-bottom: 20px;
font-size: 19px;
}
/* the columns end at different heights (10 services against 7 company links),
so the space before the bottom bar was reading as an empty band */
.dl-subfooter {
margin-top: 34px;
}
/* ==========================================================================
BLOG SIDEBAR + CATEGORY FILTER
--------------------------------------------------------------------------
The theme shipped a demo sidebar — a stock recent-posts list and a
"Popular Tags" cloud whose links went nowhere. Replaced with three
generated widgets: Recent Posts, Categories, Popular Treatments.
.dl-fhead / .dl-flinks already exist but are scoped to `footer`, i.e.
white text on dark. The sidebar sits on white, so it needs its own colours
while keeping the same gradient accent rule under each heading.
========================================================================== */
.dl-blogside .dl-widget {
margin-bottom: 38px;
padding: 26px 24px;
border: 1px solid #e6ebf3;
border-radius: 10px;
background: #fbfcfe;
}
.dl-blogside .dl-fhead {
position: relative;
margin: 0 0 22px;
padding-bottom: 14px;
font-size: 19px;
font-weight: 700;
line-height: 1.3;
color: #1d2733;
}
.dl-blogside .dl-fhead::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #e3e9f2;
}
.dl-blogside .dl-fhead::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 46px;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg,
var(--primary-color, #3168c7) 0%,
var(--secondary-color, #eaa638) 100%);
}
/* ---- Recent Posts ---- */
.dl-recent {
margin: 0;
padding: 0;
list-style: none;
}
.dl-recent__item + .dl-recent__item {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid #edf1f7;
}
.dl-recent__link {
display: flex;
gap: 14px;
align-items: flex-start;
text-decoration: none;
}
.dl-recent__thumb {
flex: 0 0 72px;
width: 72px;
height: 72px;
border-radius: 8px;
object-fit: cover;
}
.dl-recent__title {
display: block;
font-weight: 600;
line-height: 1.4;
color: #1d2733;
transition: color .18s ease;
}
.dl-recent__link:hover .dl-recent__title,
.dl-recent__link:focus-visible .dl-recent__title {
color: var(--primary-color, #3168c7);
}
.dl-recent__date {
display: block;
margin-top: 5px;
font-size: 13.5px;
color: #5e6d7e;
}
/* ---- Categories + Popular Treatments ---- */
.dl-blogside ul.dl-flinks {
margin: 0;
padding: 0;
list-style: none;
}
.dl-blogside ul.dl-flinks li {
margin: 0 0 12px;
}
.dl-blogside ul.dl-flinks li:last-child {
margin-bottom: 0;
}
.dl-blogside ul.dl-flinks li a {
display: inline-block;
color: #405063;
text-decoration: none;
transition: color .18s ease, transform .18s ease;
}
.dl-blogside ul.dl-flinks li a:hover,
.dl-blogside ul.dl-flinks li a:focus-visible {
color: var(--primary-color, #3168c7);
transform: translateX(3px);
}
/* the current post's own category, marked with aria-current in the markup —
never colour alone, so it also carries weight (WCAG 1.4.1) */
.dl-blogside ul.dl-cats li a[aria-current] {
font-weight: 700;
color: var(--primary-color, #3168c7);
}
.dl-cats li a {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.dl-cat__count {
flex: 0 0 auto;
min-width: 26px;
padding: 2px 8px;
border-radius: 20px;
background: #eaf0fa;
font-size: 12.5px;
font-weight: 600;
line-height: 1.6;
text-align: center;
color: #3d5a8a;
}
/* ==========================================================================
Category filter bar on blog.html
========================================================================== */
.dl-filter {
margin: 0 0 34px;
}
.dl-filter__list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.dl-filter__pill {
padding: 9px 18px;
border: 1px solid #dbe3ef;
border-radius: 30px;
background: #fff;
font-size: 14.5px;
font-weight: 600;
color: #405063;
cursor: pointer;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.dl-filter__pill:hover {
border-color: var(--primary-color, #3168c7);
color: var(--primary-color, #3168c7);
}
.dl-filter__pill.is-active {
border-color: var(--primary-color, #3168c7);
background: var(--primary-color, #3168c7);
color: #fff;
}
.dl-filter__status {
margin: 14px 0 0;
font-size: 14.5px;
color: #5e6d7e;
}
/* The filter bar is a progressive enhancement: without JavaScript nothing
can be filtered, so the controls should not be offered at all. The script
sets this flag on as soon as it binds. */
.dl-filter {
display: none;
}
.dl-js .dl-filter {
display: block;
}
/* The landmark that holds the floating WhatsApp button and back-to-top link.
Both children are position:fixed, so nothing is left in flow and the nav
collapses to zero height on its own — it exists purely to give them a place
in the accessibility tree.
Deliberately NOT display:contents, which is the obvious way to write this:
several engines drop a display:contents element from the accessibility tree
entirely, which would remove the very landmark this is here to add.
No transform, filter or perspective either — any of them would make this a
containing block, and the fixed children would start positioning against it
instead of the viewport. */
.dl-floating {
margin: 0;
padding: 0;
}
/* --------------------------------------------------------------------------
Stat counters on the dark band (index.html)
The four numbers were rendering at #10244B on a #000A5B background —
1.15:1, which is invisible. Only the labels under them were readable, so
the band read as four captions with nothing above them.
Cause: the number sits in `
`, and the theme's heading
rule sets an explicit dark `color`. An explicit colour beats the inherited
one from the section's `.text-light`, so the number stayed dark while
everything around it went white.
Inheriting from .de_count restores the section's own light colour
(#f8f9fa, 16.68:1) instead of hard-coding another value, so re-theming the
band keeps working. Scoped to .bg-dark: the same counter on a light
section must keep its dark heading colour.
-------------------------------------------------------------------------- */
.bg-dark .de_count .h3,
.bg-dark .de_count .timer {
color: inherit;
}
/* --------------------------------------------------------------------------
Form captcha + inline messages (contact.html, booking.html)
The captcha row is injected by js/dl-forms.js, never present in the HTML —
see that file for why. These styles therefore only ever apply when the
script has run.
-------------------------------------------------------------------------- */
.dl-captcha {
margin: 18px 0 4px;
padding: 16px 18px;
background: #f5f8fc;
border: 1px solid #e3eaf4;
border-radius: 12px;
}
.dl-captcha__label {
display: block;
margin-bottom: 10px;
font-size: 14.5px;
font-weight: 600;
color: #1d2733;
}
.dl-captcha__row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.dl-captcha__row input {
flex: 0 0 96px;
width: 96px;
min-height: 44px; /* WCAG 2.5.8 target size */
padding: 10px 12px;
border: 1px solid #cfd8e6;
border-radius: 8px;
font: inherit;
text-align: center;
}
.dl-captcha__refresh {
min-height: 44px;
padding: 10px 16px;
border: 1px solid #cfd8e6;
border-radius: 8px;
background: #fff;
font-size: 14px;
font-weight: 600;
color: var(--primary-color, #3168c7);
cursor: pointer;
}
.dl-captcha__refresh:hover {
border-color: var(--primary-color, #3168c7);
}
.dl-captcha__help:not(:empty) {
margin-top: 8px;
font-size: 13.5px;
color: #6b7584;
}
.dl-formmsg {
margin-top: 16px;
padding: 13px 16px;
border-radius: 10px;
font-size: 14.5px;
line-height: 1.55;
}
/* Never colour alone — each carries its own border weight and wording so the
state is conveyed without relying on hue (WCAG 1.4.1). */
.dl-formmsg--info { background: #eef3fb; border: 1px solid #cfdcf2; color: #274f96; }
.dl-formmsg--error { background: #fdecec; border: 1px solid #f5c2c2; color: #8c1d1d; }
.dl-formmsg--ok { background: #e8f3ec; border: 1px solid #bfdfcb; color: #136436; }
/* --------------------------------------------------------------------------
Tab labels on faq.html
The inactive tab labels inherit #999999, which is 2.85:1 on white — well
below the 4.5:1 minimum. These are interactive controls: a visitor who
cannot read them cannot tell there are other categories to open.
Darkened to the least that passes, so the active/inactive distinction is
still clear. The active tab is unaffected: it is white on the primary
colour and already passes.
-------------------------------------------------------------------------- */
/* The cause is OPACITY, not colour. The theme sets
.de-tab.plain .d-tab-nav li { color: #000; opacity: .4 }
and black at 40% over white renders as exactly #999999 — 2.84:1.
Worth recording how that was nearly missed: getComputedStyle().color
reports rgb(0, 0, 0), because it returns the declared colour and takes no
account of opacity. On that basis this looked like an axe false positive.
A screenshot settled it — the labels are plainly grey. axe was right.
0.6 renders as #666666 (5.74:1) and still reads as clearly dimmer than the
active tab, which stays at full opacity. Matching the theme's own selector
specificity and winning on cascade order. */
.de-tab.plain .d-tab-nav li {
opacity: .6;
}
.de-tab.plain .d-tab-nav li.active-tab {
opacity: 1;
}
/* ==========================================================================
Mega menu for long dropdowns
--------------------------------------------------------------------------
The Services dropdown grew from 10 items to 20 as the treatment and
condition pages were built. The theme styles a submenu as a single 190px
column, so at 20 items it ran roughly 800px tall and off the bottom of a
laptop screen — the last few services were unreachable.
includes/build-menu.js adds .dl-mega to any submenu with 10+ items, so this
applies itself automatically if more services are added later, and the short
"Pages" dropdown keeps the theme's original single column.
Width is 570px = exactly 3 x the theme's own 190px column, so the columns
line up with the existing design rather than introducing a new measurement.
DESKTOP ONLY. Below 993px the theme switches to the stacked mobile
accordion, which must stay a single column — hence the media query.
========================================================================== */
@media (min-width: 993px) {
#mainmenu li ul.dl-mega {
width: 570px;
column-count: 3;
column-gap: 0;
padding: 6px 0;
}
/* keep each link whole — without this a label can split across columns */
#mainmenu li ul.dl-mega > li {
display: block;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
}
/* the theme's 1px divider reads as a grid line once there are columns;
keep it inside each column only */
#mainmenu li ul.dl-mega > li:last-child > a {
border-bottom: none;
}
}
/* ==========================================================================
Floating call button
--------------------------------------------------------------------------
Sits directly above the WhatsApp button, same size and shape, in the brand
colour so the two read as a pair rather than competing.
Stack from the bottom up:
chat toggle bottom: 71px (60px tall)
WhatsApp bottom: 141px (56px tall)
call bottom: 211px (56px tall) <- this
Each is 70px above the last: 56px button + 14px gap.
DESKTOP ONLY, matching .dl-fab-wa. Below 992px the sticky action bar
already carries Call, WhatsApp and Book, so showing this too would put the
same action on screen twice.
========================================================================== */
.dl-fab-call {
position: fixed;
right: 13px;
bottom: 211px;
z-index: 999;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary-color, #3168C7);
color: #fff;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(49, 104, 199, .45);
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.dl-fab-call i { font-size: 26px; line-height: 1; }
.dl-fab-call:hover,
.dl-fab-call:focus-visible {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(49, 104, 199, .55);
}
@media (max-width: 991.98px) {
.dl-fab-call { display: none; }
}
@media (min-width: 992px) {
.dl-fab-call { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
.dl-fab-call { transition: none; }
.dl-fab-call:hover, .dl-fab-call:focus-visible { transform: none; }
}