/*
Theme Name: Divine Ledger
Theme URI: https://blessedbookkeeping.com
Author: Blessed Bookkeeping
Author URI: https://blessedbookkeeping.com
Description: A custom, performance-focused block theme for Blessed Bookkeeping. Modern luxury consulting aesthetic built on navy, gold and a leaf-green accent.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0.33
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: divineledger
Tags: block-theme, full-site-editing, business, one-column, custom-colors, custom-logo, editor-style, block-styles, wide-blocks
*/
/* -------------------------------------------------------------------------
* Base
* ---------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
/* Lenis drives scrolling; native smooth-scroll would fight it. */
scroll-behavior: auto;
-webkit-text-size-adjust: 100%;
/* `clip` rather than `hidden`: hidden would turn the root into a scroll
container and silently break the sticky header. */
overflow-x: clip;
}
body {
margin: 0;
font-synthesis-weight: none;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
picture,
svg,
video {
max-width: 100%;
height: auto;
}
/* Lenis adds .lenis-smooth to ; these rules are required by it. */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
/* -------------------------------------------------------------------------
* Accessibility
* ---------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--dl-gold-500);
outline-offset: 3px;
border-radius: var(--dl-radius-sm);
}
.dl-surface-dark :where(a, button, [tabindex]):focus-visible {
outline-color: var(--dl-gold-400);
}
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -100px;
left: var(--dl-space-sm);
z-index: 999;
padding: var(--dl-space-2xs) var(--dl-space-sm);
background-color: var(--dl-navy-800);
color: var(--dl-white);
font-family: var(--dl-font-sans);
font-size: var(--dl-text-sm);
text-decoration: none;
transition: top var(--dl-duration-fast) var(--dl-ease-out);
}
.skip-link:focus {
top: var(--dl-space-sm);
}
/* -------------------------------------------------------------------------
* Scroll reveal
*
* The hidden state is scoped to html.dl-motion, which a tiny inline script
* adds before first paint. If JavaScript never runs, the class is never added
* and every element stays visible — the animation is an enhancement, never a
* prerequisite for reading the page.
* ---------------------------------------------------------------------- */
html.dl-motion :is(.dl-reveal, .dl-intro) {
opacity: 0;
transform: translate3d(0, var(--dl-reveal-shift), 0);
will-change: opacity, transform;
/* A fully transparent button is still clickable. Suppress interaction until
the reveal starts, then hand it back via .is-revealed. */
pointer-events: none;
}
html.dl-motion :is(.dl-reveal, .dl-intro).is-revealed {
pointer-events: auto;
will-change: auto;
}
@media ( prefers-reduced-motion: reduce ) {
html.dl-motion :is(.dl-reveal, .dl-intro) {
opacity: 1;
transform: none;
pointer-events: auto;
}
}
/* -------------------------------------------------------------------------
* Layout primitives
* ---------------------------------------------------------------------- */
/**
* Top-level sections own their own vertical rhythm.
*
* WordPress applies the root block gap as a top margin to every direct child of
* .wp-site-blocks. Between two full-bleed navy sections that margin shows up as
* a white seam, so it is removed here and each section pads itself instead. The
* gap is still honoured inside flow and constrained containers, which is where
* it is actually wanted.
*/
.wp-site-blocks > * {
margin-block-start: 0;
}
/**
* The same seam, one level down.
*
* Templates wrap their sections in a constrained group, so the sections are
* children of that group and not of .wp-site-blocks, and the rule above never
* reaches them. Core gives each one a top margin through
* `:root :where(.is-layout-constrained) > *`, which paints a 24px band of body
* white between every pair of full-bleed sections. It is only obvious where two
* dark ones meet, but it is 144px of dead space on the homepage either way.
*
* Matched through .alignfull so it reaches only full-bleed sections, which pad
* themselves; ordinary constrained content keeps its block gap. Two classes
* rather than one so it outranks core's single-class rule on specificity and
* does not depend on where style.css lands in .
*/
.is-layout-constrained > .alignfull {
margin-block-start: 0;
}
.dl-section {
position: relative;
padding-block: var(--dl-section-y);
}
.dl-section--tight {
padding-block: var(--dl-section-y-tight);
}
.dl-container {
width: 100%;
max-width: 1320px;
margin-inline: auto;
padding-inline: var(--dl-gutter);
}
.dl-container--narrow {
max-width: 880px;
}
.dl-surface-dark {
background-color: var(--dl-navy-800);
color: var(--dl-text-inverse);
}
.dl-surface-dark :is(h1, h2, h3, h4, h5) {
color: var(--dl-white);
}
.dl-surface-alt {
background-color: var(--dl-cream);
}
/*
* FAQ + Founder Welcome — merged three-column row.
*
* Wider than the site-wide `.dl-container` (1320px): cap at 1720px / 94vw
* with a slightly tighter gutter. Reading order on wide screens is
* founder bio | portrait | FAQ (founder spans cols 1–2 with bio left of
* portrait; FAQ in col 3). Nested section chrome and nested `.dl-container`
* gutters are neutralized.
*/
.dl-faq-founder-row__grid.dl-container {
max-width: min(1720px, 94vw);
padding-inline: clamp(1.25rem, 2.5vw, 2.5rem);
}
.dl-faq-founder-row__grid {
display: grid;
align-items: start;
gap: clamp(var(--dl-space-lg), 3vw, var(--dl-space-2xl));
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 1.05fr);
}
.dl-faq-founder-row__grid > .wp-block-divineledger-founder-welcome {
grid-column: 1 / 3;
grid-row: 1;
}
.dl-faq-founder-row__grid > .wp-block-divineledger-faq {
grid-column: 3;
grid-row: 1;
}
.dl-faq-founder-row__grid > .alignfull {
width: auto;
max-width: none;
margin-inline: 0;
}
.dl-faq-founder-row__grid > .dl-faq,
.dl-faq-founder-row__grid > .dl-founder {
padding-block: 0;
background-color: transparent;
}
.dl-faq-founder-row__grid .dl-faq > .dl-container,
.dl-faq-founder-row__grid .dl-founder > .dl-container {
max-width: none;
width: 100%;
margin-inline: 0;
padding-inline: 0;
}
.dl-faq-founder-row__grid .dl-founder__grid {
display: grid;
align-items: start;
gap: clamp(var(--dl-space-lg), 3vw, var(--dl-space-2xl));
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
/* DOM is media then content; pin bio left, portrait middle. */
.dl-faq-founder-row__grid .dl-founder__content {
grid-column: 1;
grid-row: 1;
max-width: none;
}
.dl-faq-founder-row__grid .dl-founder__media-column {
grid-column: 2;
grid-row: 1;
}
.dl-faq-founder-row__grid .dl-founder__stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Tighten intro → accordion gap; compact question/answer type in this column. */
.dl-faq-founder-row__grid .dl-faq__header {
margin-bottom: clamp(var(--dl-space-sm), 1.5vw, var(--dl-space-md));
}
.dl-faq-founder-row__grid .dl-faq-item__question {
padding-block: var(--dl-space-sm);
font-size: var(--dl-text-base);
}
.dl-faq-founder-row__grid .dl-faq-item__answer-inner {
padding-block-end: var(--dl-space-md);
font-size: var(--dl-text-sm);
}
@media ( max-width: 899px ) {
.dl-faq-founder-row__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--dl-space-xl);
}
.dl-faq-founder-row__grid > .wp-block-divineledger-founder-welcome {
grid-column: 1;
grid-row: auto;
order: 1;
}
.dl-faq-founder-row__grid > .wp-block-divineledger-faq {
grid-column: 1;
grid-row: auto;
order: 2;
}
.dl-faq-founder-row__grid .dl-founder__grid {
grid-template-columns: minmax(0, 1fr);
}
.dl-faq-founder-row__grid .dl-founder__content,
.dl-faq-founder-row__grid .dl-founder__media-column {
grid-column: 1;
grid-row: auto;
}
/* Keep bio above portrait when stacked. */
.dl-faq-founder-row__grid .dl-founder__content {
order: 1;
}
.dl-faq-founder-row__grid .dl-founder__media-column {
order: 2;
}
}
/* -------------------------------------------------------------------------
* Eyebrow label
* ---------------------------------------------------------------------- */
.dl-eyebrow {
display: flex;
align-items: center;
gap: var(--dl-space-xs);
margin: 0 0 var(--dl-space-md);
font-family: var(--dl-font-sans);
font-size: var(--dl-text-xs);
font-weight: 500;
letter-spacing: var(--dl-tracking-eyebrow);
text-transform: uppercase;
color: var(--dl-gold-600);
}
.dl-eyebrow::before {
content: "";
inline-size: clamp(1.5rem, 4vw, 3rem);
block-size: 1px;
flex: none;
background-color: currentcolor;
}
.dl-surface-dark .dl-eyebrow {
color: var(--dl-gold-400);
}
/* -------------------------------------------------------------------------
* Buttons
*
* Outline colours are driven by custom properties so a dark surface can flip
* them without a separate class. A literal navy outline would vanish against
* the hero's navy scrim, so .dl-surface-dark reassigns them.
* ---------------------------------------------------------------------- */
.dl-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--dl-space-2xs);
padding: 1.0625rem 2.25rem;
border: 1px solid transparent;
border-radius: var(--dl-radius-soft);
font-family: var(--dl-font-sans);
font-size: var(--dl-text-sm);
font-weight: 500;
letter-spacing: var(--dl-tracking-wide);
text-transform: uppercase;
text-decoration: none;
line-height: 1;
cursor: pointer;
transition:
background-color var(--dl-duration-base) var(--dl-ease-out),
border-color var(--dl-duration-base) var(--dl-ease-out),
color var(--dl-duration-base) var(--dl-ease-out),
transform var(--dl-duration-base) var(--dl-ease-out),
box-shadow var(--dl-duration-base) var(--dl-ease-out);
}
.dl-button:hover {
transform: translateY(-2px);
}
.dl-button:active {
transform: translateY(0);
}
.dl-button--primary {
background-color: var(--dl-gold-500);
color: var(--dl-accent-contrast);
}
.dl-button--primary:hover,
.dl-button--primary:focus-visible {
background-color: var(--dl-gold-400);
color: var(--dl-accent-contrast);
box-shadow: var(--dl-shadow-gold);
}
.dl-button--outline {
--dl-btn-outline-fg: var(--dl-navy-800);
--dl-btn-outline-border: var(--dl-navy-800);
--dl-btn-outline-hover-bg: var(--dl-navy-800);
--dl-btn-outline-hover-fg: var(--dl-white);
background-color: transparent;
border-color: var(--dl-btn-outline-border);
color: var(--dl-btn-outline-fg);
}
.dl-button--outline:hover,
.dl-button--outline:focus-visible {
background-color: var(--dl-btn-outline-hover-bg);
border-color: var(--dl-btn-outline-hover-bg);
color: var(--dl-btn-outline-hover-fg);
}
.dl-surface-dark .dl-button--outline {
--dl-btn-outline-fg: var(--dl-white);
--dl-btn-outline-border: rgb(255 255 255 / 45%);
--dl-btn-outline-hover-bg: var(--dl-white);
--dl-btn-outline-hover-fg: var(--dl-navy-900);
}
.dl-button-group {
display: flex;
flex-wrap: wrap;
gap: var(--dl-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
/* -------------------------------------------------------------------------
* Founder signature
* ---------------------------------------------------------------------- */
.dl-founder__signature {
text-align: center;
}
.dl-signature {
display: block;
margin-block: var(--dl-space-lg) 0;
font-family: var(--wp--preset--font-family--script, parisienne, cursive);
font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
font-weight: 400;
line-height: 1;
color: var(--dl-navy-700);
}
.dl-founder__signature .dl-signature {
margin-block-start: 0;
}
.dl-signature__rule {
inline-size: clamp(6rem, 18vw, 11rem);
block-size: 1px;
margin-block: var(--dl-space-sm) var(--dl-space-2xs);
margin-inline: auto;
border: 0;
background-color: var(--dl-gold-500);
}
.dl-signature__role {
display: block;
font-family: var(--dl-font-sans);
font-size: var(--dl-text-xs);
font-weight: 500;
letter-spacing: var(--dl-tracking-eyebrow);
text-transform: uppercase;
color: var(--dl-ink-muted);
}
/* -------------------------------------------------------------------------
* Site header
* ---------------------------------------------------------------------- */
/* The sticky sits on the template-part wrapper rather than on .dl-site-header
itself. A sticky box may only travel within its parent, and the wrapper is
exactly as tall as the bar, so sticking the inner element would leave it no
slack and it would scroll away with the page. */
.wp-site-blocks > header.wp-block-template-part {
position: sticky;
top: 0;
z-index: var(--dl-z-header);
}
/* Solid navy rather than translucent: at the top of the page the bar sits above
the hero rather than over it, so a semi-transparent fill would blend with the
white body and read as washed-out grey. Matching navy-900 also makes the bar
continuous with the top of the hero gradient. */
.dl-site-header {
background-color: var(--dl-navy-900);
border-bottom: 1px solid var(--dl-hairline-inverse);
}
.dl-site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--dl-space-lg);
min-height: 4.75rem;
}
.dl-site-header__brand {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
font-family: var(--dl-font-serif);
font-size: var(--dl-text-xl);
font-weight: 500;
letter-spacing: -0.01em;
color: var(--dl-white);
text-decoration: none;
}
/* core/site-title renders its text inside an `` when linking to home is
enabled (it is, here). theme.json's global `elements.link` styling targets
that `` directly — navy-600 by default, green-500 with an underline on
hover/focus — and an inherited `color`/`text-decoration` from the wrapping
`.dl-site-header__brand` element cannot out-rank a value the global link
style specifies on the element itself, no matter how low that style's
specificity is. Without a rule of our own on the anchor, the two-tone
brand colours below never reach it, and hovering (or focusing) the title
surfaces the site-wide link green instead. Setting `color: inherit` here
is what lets the two-tone wordmark actually apply to the rendered link.
Matched via :any-link rather than a bare `a`, same as the service-list
title links below, so this does not have to be ordered against every
other link rule in the file. */
.dl-site-header__brand :any-link {
color: inherit;
text-decoration: none;
}
.dl-site-header__brand :any-link:hover,
.dl-site-header__brand :any-link:focus-visible {
color: var(--dl-gold-300);
text-decoration: none;
}
/* The accent element is written by the `render_block` filter in inc/brand.php,
which wraps the last word of the site title. It replaces an earlier `em`
selector that could never match, because the site name is stored as plain
text and the core block escapes it. */
.dl-brand__accent {
color: var(--dl-gold-500);
}
/* -------------------------------------------------------------------------
* Brand mark
* ---------------------------------------------------------------------- */
/* The monogram rides on the site title's own pseudo-element rather than on an
image block in the template part. That keeps the mark swappable through the
`divineledger_default_images` filter, and it leaves the accessible name with
the site title text instead of announcing "Blessed Bookkeeping" twice.
The URL arrives from PHP as a custom property; the literal is the fallback
for contexts that render style.css without the inline block, and resolves
relative to this file. Cream-on-navy variant, because every bar this mark
sits in is navy-900.
Sized against the 4.75rem bar: the drawn mark fills ~90% of the square
viewBox, so a 3rem box puts roughly 43px of artwork in a 77px header. The
clamp trims it on narrow screens so the brand does not wrap onto a second
line and stretch the bar.
Scoped through .dl-site-header__inner because the footer reuses the same
brand class for its own site title, and the mark was only specified for the
header. Widening this selector is all it takes to brand the footer too.
Uses the light (cream-and-gold gradient) variant, matching the footer
mark below, rather than logo-icon-mono.svg. The mono cut flattens both
letterforms to one solid gold, and without the navy/cream contrast that
carries the weave between the two Bs, that cut reads as two plain block
letters at any size — it is not just a small-size problem. The light
variant's gradients keep the interlocking detail legible even at the
smaller end of the clamp below, so it holds up as an actual monogram
rather than flattening into text. */
.dl-site-header__inner .dl-site-header__brand::before {
content: "";
flex: 0 0 auto;
align-self: center;
block-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem);
aspect-ratio: 1;
background-image: var(--dl-default-logo-light-image, url(assets/images/logo-icon-light.svg));
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
}
/* -------------------------------------------------------------------------
* Site footer
* ---------------------------------------------------------------------- */
.dl-site-footer {
background-color: var(--dl-navy-900);
color: var(--dl-text-inverse-muted);
/* Scaled ~15% off the raw space tokens, matching the trim applied to
--dl-section-y and the hero, rather than editing the shared tokens
themselves. */
padding-block: calc(var(--dl-space-3xl) * 0.85) calc(var(--dl-space-xl) * 0.85);
font-size: var(--dl-text-sm);
}
.dl-site-footer a {
color: var(--dl-gold-400);
text-decoration: none;
}
.dl-site-footer a:hover {
color: var(--dl-gold-300);
text-decoration: underline;
}
.dl-site-footer__grid {
display: grid;
gap: var(--dl-space-xl);
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
padding-bottom: var(--dl-space-xl);
border-bottom: 1px solid var(--dl-hairline-inverse);
}
.dl-site-footer__heading {
margin: 0 0 var(--dl-space-sm);
font-family: var(--dl-font-sans);
font-size: var(--dl-text-xs);
font-weight: 500;
letter-spacing: var(--dl-tracking-eyebrow);
text-transform: uppercase;
color: var(--dl-white);
}
.dl-site-footer__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--dl-space-2xs);
}
.dl-site-footer__legal {
margin: var(--dl-space-lg) 0 0;
font-size: var(--dl-text-xs);
letter-spacing: 0.02em;
text-align: center;
}
/* -------------------------------------------------------------------------
* Footer brand lockup
* ---------------------------------------------------------------------- */
/* The horizontal tier of the brand system: the monogram beside the wordmark,
and nothing else. Composed from the SVG plus the live site title rather than
a flattened combined asset, so the words stay selectable, translatable and
part of the link's accessible name.
Cream-on-navy variant, because .dl-site-footer is navy-900 — the same fill
the header bar carries.
The two lines are sized to finish at close to the same width: seven letters
at 1.125rem against eleven at 0.9375rem with eyebrow tracking. That
balance, plus a mark tall enough to span both lines, is what makes this
read as a deliberate lockup rather than a shrunken header. */
.dl-site-footer__brand {
display: flex;
align-items: center;
gap: var(--dl-space-sm);
margin: 0;
}
.dl-site-footer__brand::before {
content: "";
flex: 0 0 auto;
block-size: 3.25rem;
aspect-ratio: 1;
background-image: var(--dl-default-logo-light-image, url(assets/images/logo-icon-light.svg));
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
}
/* Without this the blanket `.dl-site-footer a` gold flattens the whole wordmark
to one tone and the split is invisible. The parent class is repeated to clear
that rule's `:hover` variant on specificity rather than on source order,
which is what keeps this block in one piece instead of interleaved with the
footer link rules above.
Sized closer together than the 1.5rem/0.8125rem split this replaced: that
pairing put BLESSED at roughly twice BOOKKEEPING's cap height, which read
as a mismatched stack rather than one lockup. 1.125rem/0.9375rem keeps the
lead word the senior line without the size gap doing the work alone. */
.dl-site-footer .dl-site-footer__brand a {
display: block;
font-family: var(--dl-font-serif);
font-size: 1.125rem;
font-weight: 500;
line-height: 1;
letter-spacing: var(--dl-tracking-wide);
text-transform: uppercase;
color: var(--dl-cream);
text-decoration: none;
}
.dl-site-footer .dl-site-footer__brand a:hover,
.dl-site-footer .dl-site-footer__brand a:focus-visible {
color: var(--dl-white);
text-decoration: none;
}
.dl-site-footer__brand .dl-brand__accent {
display: block;
margin-block-start: 0.34rem;
font-size: 0.9375rem;
letter-spacing: var(--dl-tracking-eyebrow);
color: var(--dl-gold-500);
}
/* -------------------------------------------------------------------------
* Footer seal (full lockup)
*
* The client's complete stacked lockup — mark, wordmark, tagline, pillars,
* script line — only exists as a flat raster with a baked-in white ground
* (logo-lockup.jpg). Matting that transparent would need a crude chroma-key
* that clips the gold gradients, so the raster sits on a small cream plate
* instead: the baked-in white blends straight into the card and the whole
* thing reads as a printed seal, not a cut-out. Kept modest and centred, a
* footer accent under the grid rather than a second hero.
*
* --dl-shadow-md/lg are navy-tinted for elevation on light surfaces, so they
* disappear against .dl-site-footer's navy-900 fill. --dl-shadow-gold is used
* instead — warm enough to read as lift on a dark ground, and already the
* brand's own accent colour, so the plate looks lit rather than pasted on.
* ---------------------------------------------------------------------- */
/* Hidden per client request — the hero already shows the full lockup seal.
To restore the footer seal, change `display: none` back to `display: flex`. */
.dl-footer-seal {
display: none;
justify-content: center;
margin-top: var(--dl-space-xl);
}
/* Sized up from a clamp(12.5rem, 8rem + 12vw, 16rem) ceiling of 16rem/256px
the client found illegible to a 19rem/304px ceiling — the card grows
rather than just its padding shrinking, so the mark inside scales up
with it instead of the seal just getting more cramped. */
.dl-footer-seal__card {
width: clamp(15rem, 9rem + 14vw, 19rem);
padding: var(--dl-space-md);
background-color: var(--dl-cream);
border-radius: var(--dl-radius-lg);
box-shadow: var(--dl-shadow-gold);
}
.dl-footer-seal__mark {
display: block;
aspect-ratio: 1;
background-image: var(--dl-default-logo-lockup-image, url(assets/images/logo-lockup.jpg));
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
}
/* -------------------------------------------------------------------------
* Archive header
* ---------------------------------------------------------------------- */
.dl-archive__intro {
max-width: var(--dl-measure);
margin-block-start: var(--dl-space-md);
font-size: var(--dl-text-lg);
font-weight: 300;
line-height: var(--dl-leading-relaxed);
color: var(--dl-text-inverse-muted);
text-wrap: pretty;
}
.dl-archive__intro p {
margin: 0;
}
.dl-archive__pagination {
margin-block-start: var(--dl-space-xl);
padding-block-start: var(--dl-space-md);
border-top: 1px solid var(--dl-hairline);
font-family: var(--dl-font-sans);
font-size: var(--dl-text-sm);
}
/* -------------------------------------------------------------------------
* Service list
*
* A stacked, hairline-ruled list rather than the homepage card grid. Rows
* carry the longer copy an archive needs, and keeping the two apart means a
* category page never reads as a second, competing homepage.
*
* Lives here rather than in the block stylesheet because core's post-template
* renders this list, so the block's own CSS is never loaded to style it.
*
* Placed last in the file so its link rules sit after the lower-specificity
* footer link rules, which is what stylelint's specificity ordering wants.
* ---------------------------------------------------------------------- */
.dl-service-list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--dl-hairline);
}
.dl-service-list > li {
margin: 0;
border-bottom: 1px solid var(--dl-hairline);
}
.dl-service-list__inner {
padding-block: var(--dl-space-lg);
}
.dl-service-list__title {
margin: 0;
font-size: var(--dl-text-xl);
}
/* Matched via :any-link rather than a bare `a` so these rules do not have to
be ordered against every other link rule in the file. */
.dl-service-list__title :any-link {
color: inherit;
text-decoration: none;
transition: color var(--dl-duration-base) var(--dl-ease-out);
}
.dl-service-list__title :any-link:hover,
.dl-service-list__title :any-link:focus-visible {
color: var(--dl-green-500);
text-decoration: none;
}
.dl-service-list__excerpt {
max-width: var(--dl-measure);
margin-block: var(--dl-space-2xs) 0;
color: var(--dl-ink-muted);
text-wrap: pretty;
}
.dl-service-list__excerpt p {
margin: 0;
}
.dl-service-list__excerpt .wp-block-post-excerpt__more-text {
margin-block-start: var(--dl-space-xs);
}
.dl-service-list__excerpt .wp-block-post-excerpt__more-link {
display: inline-flex;
align-items: center;
gap: var(--dl-space-2xs);
font-family: var(--dl-font-sans);
font-size: var(--dl-text-xs);
font-weight: 500;
letter-spacing: var(--dl-tracking-wide);
text-transform: uppercase;
text-decoration: none;
color: var(--dl-navy-600);
transition: color var(--dl-duration-base) var(--dl-ease-out);
}
.dl-service-list__excerpt .wp-block-post-excerpt__more-link::after {
content: "\2192";
transition: translate var(--dl-duration-base) var(--dl-ease-out);
}
.dl-service-list__inner:hover .wp-block-post-excerpt__more-link {
color: var(--dl-green-500);
}
.dl-service-list__inner:hover .wp-block-post-excerpt__more-link::after {
translate: 0.35rem 0;
}
/* -------------------------------------------------------------------------
* Floating header — restored nav + contact, lang stays far right:
* LEFT = page nav (pre-i18n type/gaps, inset via .dl-container)
* CENTER = logo only (1fr | auto | 1fr)
* RIGHT = Email/WhatsApp (muted labels + gold values)
* EDGE = English | Español (absolute, viewport far-right)
* ---------------------------------------------------------------------- */
.dl-floating-header {
position: relative;
}
/* Keep .dl-container max-width + gutter so nav/contact sit nearer the logo. */
.dl-floating-header .dl-site-header__inner {
position: relative;
min-height: 6rem;
flex-wrap: nowrap;
align-items: center;
padding-block: var(--dl-space-2xs);
transition:
min-height var(--dl-duration-slow) var(--dl-ease-out),
padding-block var(--dl-duration-slow) var(--dl-ease-out);
}
.dl-floating-header.is-scrolled .dl-site-header__inner {
min-height: 5rem;
}
@media (min-width: 1100px) {
.dl-floating-header .dl-site-header__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
column-gap: var(--dl-space-md);
}
.dl-floating-header__nav-group {
grid-column: 1;
grid-row: 1;
justify-self: start;
align-self: center;
min-width: 0;
max-width: 100%;
z-index: 2;
}
.dl-floating-header__brand-group {
grid-column: 2;
grid-row: 1;
justify-self: center;
z-index: 1;
}
.dl-floating-header__contact {
grid-column: 3;
grid-row: 1;
justify-self: end;
/* Clear the absolute lang toggle that sits in the outer margin/gutter. */
margin-inline-end: 0.35rem;
z-index: 2;
}
}
.dl-floating-header__brand-group {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
transition: transform var(--dl-duration-slow) var(--dl-ease-out);
}
.dl-floating-header .dl-site-header__brand {
flex-shrink: 0;
white-space: nowrap;
}
@media (min-width: 1100px) {
.dl-floating-header.is-scrolled .dl-floating-header__brand-group {
transform: scale(0.96);
}
}
/* Language toggle — pinned to the far right of the sticky bar. */
.dl-floating-header__lang {
position: absolute;
top: 0;
right: 0.65rem;
z-index: 4;
display: flex;
align-items: center;
flex-wrap: nowrap;
flex-shrink: 0;
gap: 0.15rem;
height: 100%;
/* Neutralize WP block-gap margin on absolute flow siblings. */
margin: 0;
}
.dl-floating-header__lang-link {
display: inline-flex;
align-items: center;
min-height: 2.25rem;
padding: 0.3rem 0.35rem;
font-family: var(--dl-font-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
color: var(--dl-text-inverse-muted);
text-decoration: none;
border: 0;
border-radius: var(--dl-radius-sm, 0.375rem);
background: transparent;
cursor: pointer;
transition:
color var(--dl-duration-base) var(--dl-ease-out),
background-color var(--dl-duration-base) var(--dl-ease-out);
}
.dl-floating-header__lang-link:hover,
.dl-floating-header__lang-link:focus-visible {
color: var(--dl-gold-300);
text-decoration: none;
}
.dl-floating-header__lang-link.is-active,
.dl-floating-header__lang-link[aria-current="true"] {
color: var(--dl-gold-300);
background: rgb(198 166 103 / 14%);
}
.dl-floating-header__lang-sep {
color: rgb(198 166 103 / 45%);
font-size: 0.72rem;
line-height: 1;
user-select: none;
}
.dl-floating-header__nav-group {
display: flex;
align-items: center;
flex-wrap: nowrap;
min-width: 0;
position: relative;
}
@media (max-width: 1099px) {
.dl-floating-header .dl-site-header__inner {
display: flex;
justify-content: flex-start;
gap: 0.45rem;
/* Clear the absolute language toggle. */
padding-inline-end: 7.25rem;
}
.dl-floating-header__brand-group {
order: 1;
flex: 1 1 auto;
justify-content: flex-start;
min-width: 0;
}
.dl-floating-header__nav-group {
order: 2;
margin-inline-start: auto;
}
.dl-floating-header__contact {
display: none;
}
}
.dl-floating-header__page-nav--desktop {
display: none;
}
.dl-floating-header__nav-drawer {
position: relative;
}
.dl-floating-header__nav-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
list-style: none;
cursor: pointer;
color: var(--dl-text-inverse);
border: 1px solid rgb(198 166 103 / 32%);
border-radius: var(--dl-radius-sm, 0.375rem);
background: rgb(198 166 103 / 10%);
}
.dl-floating-header__nav-toggle::-webkit-details-marker {
display: none;
}
.dl-floating-header__nav-toggle-bars {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.28rem;
width: 1.05rem;
}
.dl-floating-header__nav-toggle-bars span {
display: block;
height: 1.5px;
width: 100%;
background: var(--dl-gold-300);
border-radius: 1px;
}
.dl-floating-header__nav-drawer[open] .dl-floating-header__nav-toggle {
background: rgb(198 166 103 / 22%);
border-color: rgb(198 166 103 / 48%);
}
.dl-floating-header__page-nav-list {
display: flex;
flex-direction: column;
gap: 0.15rem;
list-style: none;
margin: 0;
padding: 0;
}
.dl-floating-header__page-nav :any-link {
display: block;
padding: 0.45rem 0.15rem;
font-family: var(--dl-font-sans);
font-size: var(--dl-text-sm);
font-weight: 500;
letter-spacing: 0.04em;
line-height: 1.2;
color: var(--dl-text-inverse-muted);
text-decoration: none;
white-space: nowrap;
transition: color var(--dl-duration-base) var(--dl-ease-out);
}
.dl-floating-header__page-nav :any-link:hover,
.dl-floating-header__page-nav :any-link:focus-visible {
color: var(--dl-gold-300);
text-decoration: none;
}
.dl-floating-header__page-nav--drawer {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
z-index: 3;
min-width: 11.5rem;
padding: 0.65rem 1rem;
border: 1px solid var(--dl-hairline-gold, rgb(198 166 103 / 35%));
border-radius: var(--dl-radius-md, 0.5rem);
background: rgb(10 23 48 / 96%);
box-shadow: var(--dl-shadow-lg, 0 18px 40px rgb(5 13 28 / 35%));
}
/* Pre-i18n desktop rail: 0.75rem / 0.85rem gaps. */
@media (min-width: 1280px) {
.dl-floating-header__page-nav--desktop {
display: block;
min-width: 0;
max-width: 100%;
}
.dl-floating-header__nav-drawer {
display: none;
}
.dl-floating-header__page-nav--desktop .dl-floating-header__page-nav-list {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 0.15rem 0.85rem;
}
.dl-floating-header__page-nav--desktop :any-link {
padding: 0.25rem 0;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
}
/* Spanish desktop nav — longer uppercase labels overflow the left grid track
at 1440px while EN still fits at 0.75rem / 0.85rem. Scope to [lang="es"]
only so the English rail stays untouched. */
@media (min-width: 1280px) {
[lang="es"] .dl-floating-header__page-nav--desktop .dl-floating-header__page-nav-list {
gap: 0.1rem 0.48rem;
}
[lang="es"] .dl-floating-header__page-nav--desktop :any-link {
font-size: 0.66rem;
letter-spacing: 0.035em;
}
}
@media (min-width: 1280px) and (max-width: 1439px) {
[lang="es"] .dl-floating-header__page-nav--desktop .dl-floating-header__page-nav-list {
gap: 0.1rem 0.4rem;
}
[lang="es"] .dl-floating-header__page-nav--desktop :any-link {
font-size: 0.62rem;
letter-spacing: 0.03em;
}
}
/* Original Email / WhatsApp lockup. */
.dl-floating-header__contact {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 1.125rem;
white-space: nowrap;
}
@media (max-width: 1099px) {
.dl-floating-header__contact {
display: none;
}
}
.dl-floating-header__contact-link {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0.5rem;
text-decoration: none;
color: var(--dl-text-inverse);
}
.dl-floating-header__contact-link:hover,
.dl-floating-header__contact-link:focus-visible {
color: var(--dl-text-inverse);
}
.dl-floating-header__contact-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: rgb(198 166 103 / 12%);
border: 1px solid rgb(198 166 103 / 32%);
color: var(--dl-gold-400);
transition:
background-color var(--dl-duration-base) var(--dl-ease-out),
border-color var(--dl-duration-base) var(--dl-ease-out);
}
.dl-floating-header__contact-icon svg {
width: 15px;
height: 15px;
}
.dl-floating-header__contact-link:hover .dl-floating-header__contact-icon,
.dl-floating-header__contact-link:focus-visible .dl-floating-header__contact-icon {
background: rgb(198 166 103 / 22%);
border-color: rgb(198 166 103 / 48%);
}
.dl-floating-header__contact-text {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.dl-floating-header__contact-label {
font-family: var(--dl-font-sans);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: var(--dl-tracking-wide);
text-transform: uppercase;
color: var(--dl-text-inverse-muted);
}
.dl-floating-header__contact-value {
font-family: var(--dl-font-sans);
font-size: 0.8125rem;
font-weight: 600;
color: var(--dl-gold-300);
}
/* Thin gradient fill anchored to the header's own bottom edge. Absolutely
positioned inside `.dl-floating-header` (which the sticky rule already
pins to the top of the viewport) rather than `position: fixed` on its
own, so it travels with the sticky header for free instead of needing a
second, independently-tracked fixed element. */
.dl-scroll-progress {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
/* 10% up from the original 3px, per the client's request. */
height: 3.3px;
background: transparent;
pointer-events: none;
z-index: 1;
}
.dl-scroll-progress__fill {
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--dl-navy-500) 0%, var(--dl-gold-500) 100%);
box-shadow: 0 0 10px rgb(198 166 103 / 65%), 0 0 4px rgb(198 166 103 / 45%);
transition: width 0.12s linear;
}
@media (prefers-reduced-motion: reduce) {
.dl-scroll-progress__fill {
transition: none;
}
}
/* Fixed bottom-right, well clear of `.dl-side-nav`'s vertically-centred
panel (see assets/css/side-nav.css) — that panel sits around the
viewport's vertical middle, this button sits pinned to the bottom
corner, so the two never occupy the same space even though both anchor
to the right edge. */
.dl-scroll-top {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
z-index: 95;
display: flex;
align-items: center;
justify-content: center;
width: 2.875rem;
height: 2.875rem;
padding: 0;
border-radius: var(--dl-radius-pill);
background: var(--dl-navy-900);
border: 1px solid var(--dl-hairline-gold);
box-shadow: var(--dl-shadow-lg);
color: var(--dl-gold-400);
cursor: pointer;
opacity: 0;
transform: translateY(0.5rem);
pointer-events: none;
transition:
opacity var(--dl-duration-base) var(--dl-ease-out),
transform var(--dl-duration-base) var(--dl-ease-out),
background-color var(--dl-duration-base) var(--dl-ease-out),
border-color var(--dl-duration-base) var(--dl-ease-out);
}
.dl-scroll-top.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.dl-scroll-top:hover,
.dl-scroll-top:focus-visible {
background: var(--dl-navy-800);
border-color: var(--dl-gold-400);
transform: translateY(-2px);
box-shadow: var(--dl-shadow-lg), 0 0 16px rgb(198 166 103 / 35%);
}
.dl-scroll-top.is-visible:hover,
.dl-scroll-top.is-visible:focus-visible {
transform: translateY(-2px);
}
.dl-scroll-top:focus-visible {
outline: 1px solid var(--dl-gold-400);
outline-offset: 2px;
}
/* Hidden per the client's request: Trust Highlight ("100% Virtual") under the
hero. Block markup, assets, and styles stay in the theme — this is a
one-line revert (`display: none` → remove this rule) if they want it back.
`display: none` removes it from layout (no empty gap). Side-nav is already
fully hidden; its `#trust` entry is harmless while this stays off. */
.dl-trust {
display: none;
}