/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI: https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI: https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/
/* ==========================================================================
Deutsch Miller brand tokens
========================================================================== */
:root {
--dm-admiralty: #1E2438;
--dm-white: #FFFFFF;
--dm-parchment: #E7D0AA;
--dm-parchment-light: #FAF8F5;
--dm-parchment-50: #FBF8EF;
--dm-straw: #E0C091;
--dm-mist: #E8EAF0;
--dm-chambray: #3A4A6B;
--dm-obsidian: #0F0F0D;
--dm-body-text: #6D6C6A;
--dm-font-heading: 'Baskervville', Georgia, 'Times New Roman', serif;
--dm-font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* ==========================================================================
Typography — Baskervville headings, Helvetica body
Sizes per style guide: desktop values below 999px breakpoint switch to
the mobile values (Salient's standard tablet/phone cutover).
========================================================================== */
body,
p,
li,
.body-text {
font-family: var(--dm-font-body);
color: var(--dm-body-text);
}
/* !important is required here: WPBakery's vc_custom_heading always emits an
inline font-family/font-weight (defaults to "Abril Fatface"/400), which
otherwise beats any external stylesheet rule regardless of specificity. */
h1, h2, h3, h4, h5, h6,
.nectar-title-h1, .nectar-title-h2, .nectar-title-h3,
.nectar-title-h4, .nectar-title-h5, .nectar-title-h6 {
font-family: var(--dm-font-heading) !important;
font-style: normal;
color: var(--dm-admiralty);
}
h1 { font-weight: 500 !important; font-size: 64px; line-height: 57px; }
h2 { font-weight: 400 !important; font-size: 46px; line-height: 47px; }
h3 { font-weight: 400 !important; font-size: 38px; line-height: 36px; }
h4 { font-weight: 400 !important; font-size: 30px; line-height: 23px; }
h5 { font-weight: 400 !important; font-size: 22px; line-height: 21px; }
h6 { font-weight: 400 !important; font-size: 20px; line-height: 26px; }
@media only screen and (max-width: 999px) {
h1 { font-size: 32px; line-height: 42px; }
h2 { font-size: 26px; line-height: 34px; }
h3 { font-size: 22px; line-height: 29px; }
h4 { font-size: 18px; line-height: 23px; }
h5 { font-size: 14px; line-height: 18px; }
h6 { font-size: 14px; line-height: 18px; }
}
/* Eyebrow label — small caps + leading dash, e.g. "— ASTUTE CHOICE" */
.dm-eyebrow {
font-family: var(--dm-font-body);
font-weight: 700;
font-size: 14px;
line-height: 21px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--dm-straw);
margin-bottom: 16px;
}
/* wpautop wraps this text in its own , and Salient's core stylesheet
carries ".light p { color: #fff }" — a rule that matches that
directly, so it wins over inheritance from .dm-eyebrow above no matter
how the two compare on specificity. Match it at the same specificity
(class + tag) so cascade order (this file loads after Salient's) settles it. */
.dm-eyebrow p {
color: var(--dm-straw);
}
/* ==========================================================================
Site logo — tracked small-caps serif wordmark, matching "DEUTSCH MILLER"
========================================================================== */
#logo,
#logo.no-image {
font-family: var(--dm-font-heading) !important;
font-size: 24px !important;
font-variant: small-caps;
letter-spacing: 2px;
color: var(--dm-admiralty) !important;
}
@media only screen and (min-width: 1000px) and (max-width: 1100px) {
#header-outer #logo img {
height: 20px;
}
}
/* ==========================================================================
Card components — staggered icon/text cards used in feature + industry grids
========================================================================== */
/* A flex column: icon and heading sit at their natural size, the
description is pushed to margin-top:auto. With the row's own
"Equal Height Columns" option (equal_height="yes" on the row_inner in
post_content) stretching every card to the tallest one, that auto
margin — not the padding, and not a height set on the card itself —
is what absorbs the difference, so the icon+heading stay pinned to
the top at a consistent offset regardless of which card is tallest. */
.dm-card {
display: flex;
flex-direction: column;
/* Pins the icon+heading+description group to the card's bottom edge —
with equal_height stretching every card to the tallest one, the
leftover height now shows up as empty space above the icon rather
than being pushed between the heading and the description. */
justify-content: flex-end;
background: var(--dm-parchment-50);
border-left: 3px solid var(--dm-straw);
/* Square on the border-left side, rounded away from it. */
border-radius: 0 6px 6px 0;
/* No padding here — each card column sets its own 2% via the
builder's own Column Padding (Advanced) setting instead. */
}
/* Space between the card columns. Salient's own "Column Margin" row
option (data-column-margin) looked like the native fit, but it only
controls the gap between columns after they've wrapped to stacked rows
on mobile — not the side-by-side desktop gutter — so it's the wrong
tool here. ".span_12" is the flex container equal_height/vc_row-flex
puts the columns in directly (confirmed in Salient's own CSS); :has()
scopes the gap to a card grid's own flex container without needing a
class added in post_content.
The 4 columns already add up to exactly 100% width with zero native
gap, and this container wraps (flex-wrap: wrap) rather than shrinking
its children — so adding gap on top pushed the 4th card onto its own
line. Trimming each column's own width to make room for its share of
the gap is what actually keeps them on one line. Scoped to desktop
only: below 1000px these columns take on WPBakery's own responsive
width classes to stack for mobile, which this must not fight. */
@media only screen and (min-width: 1000px) {
.vc_row-flex.vc_row-o-equal-height > .span_12:has(> .dm-card) {
gap: 30px;
}
.vc_row-flex.vc_row-o-equal-height > .span_12:has(> .dm-card) > .vc_column_container {
width: calc(25% - 22.5px);
}
}
.dm-card--offset {
margin-top: 40px;
}
/* Who We Work With — 4-col rows with a blank 4th/1st column to create the
staggered layout. That column has no content, but WPBakery still stacks
it as its own full-width block below 1000px (where all 4 columns go
full-width), leaving a visible extra gap between the two card rows —
so it needs removing from the flow entirely on mobile, not just emptied. */
@media only screen and (max-width: 999px) {
.dm-empty-col {
/* Wins over the column's own base display:flex (part of Salient's
flex column layout, applied unconditionally to every
.wpb_column regardless of viewport). */
display: none !important;
}
}
/* Salient zeroes the bottom padding of the last child inside a Full Width
Background row's column (html body .full-width-section > .span_12 >
div:last-child { padding-bottom: 0 }), which is more specific than the
plain .dm-py-md utility and silently wins on every viewport — barely
visible on desktop where the card content supplies its own breathing
room, but leaves the mobile stack with zero gap before the next
section. Re-asserts the .dm-py-md value at matching specificity, scoped
to this section only via its own class (not a blanket override, since
other full_width_background rows may rely on the native zero-bottom
behaviour intentionally). */
.full-width-section > .span_12 > div.dm-industries-section {
padding-bottom: 80px;
}
@media only screen and (max-width: 999px) {
.full-width-section > .span_12 > div.dm-industries-section {
padding-bottom: 50px;
}
}
/* Spacing before the heading — the circle/border look itself now comes
natively from the [nectar_icon] element's own Border Basic style +
padding/size params (set in post_content), not a CSS override. */
.dm-card .nectar_icon_wrap {
margin-bottom: 20px;
}
.dm-card h4 {
font-size: 22px !important;
line-height: 1.25 !important;
margin-bottom: 10px;
}
.dm-card p {
font-size: 15px;
margin: 0;
/* The bottom-alignment now comes from .dm-card's own
justify-content: flex-end, so this is a fixed gap from the heading,
not a flexible one. */
padding-top: 30px;
/* Reserves the same block height regardless of copy length (roughly
3 lines at this font-size/line-height), so a short sentence in one
card and a longer one in the next don't visibly throw off the
description block's size next to each other. */
min-height: 4.6em;
}
@media only screen and (max-width: 999px) {
.dm-card--offset {
margin-top: 0;
}
}
/* ==========================================================================
Placeholder media blocks — stand-ins until real photography is supplied
========================================================================== */
/* Color-matched to the reference photography (sampled from the design
mockup) rather than the brand navy/parchment — these stand in for real
photos, so they read as photographic tone, not a brand-color block. */
.dm-placeholder-photo {
background:
radial-gradient(circle at 85% 12%, rgba(159, 106, 44, 0.5) 0%, rgba(159, 106, 44, 0) 42%),
linear-gradient(135deg, #6b6d70 0%, #3a3a3c 45%, #17171a 100%);
}
.dm-placeholder-photo--warm {
background:
radial-gradient(circle at 22% 18%, rgba(233, 234, 226, 0.22) 0%, rgba(233, 234, 226, 0) 40%),
linear-gradient(135deg, #8a6a35 0%, #4a3820 55%, #201810 100%);
}
/* ==========================================================================
Section padding utilities
Standard vertical-rhythm scale — apply one of these via the row/column's
"Extra Class Name" field in the builder, don't hand-type padding.
dm-py-none — 0 — sections that butt directly against a
neighbour (e.g. a row immediately under
one that already carries the gap)
dm-py-sm — 40px / 24px — tightly-grouped rows within one section
(a heading row sitting right under its
own eyebrow row)
dm-py-md — 80px / 50px — the default for a standalone section
(eyebrow+heading blocks, card grids)
dm-py-lg — 120px / 60px — spacious feature sections (the pull
quote, the contact section)
dm-py-xl — 160px / 70px — full-bleed hero-scale sections
The second number in each pair is the <1000px value, applied below.
========================================================================== */
.dm-py-none { padding-top: 0; padding-bottom: 0; }
.dm-py-sm { padding-top: 40px; padding-bottom: 40px; }
.dm-py-md { padding-top: 80px; padding-bottom: 80px; }
.dm-py-lg { padding-top: 120px; padding-bottom: 120px; }
.dm-py-xl { padding-top: 160px; padding-bottom: 160px; }
.dm-text-center { text-align: center; }
.dm-mt-40 { margin-top: 40px; }
/* Same idea as the py-* scale, for the one recurring case that needs a
one-sided gap instead of symmetric padding: separating two stacked
row_inners (e.g. a heading row sitting right above a card grid) inside
a single outer row that's carrying a shared background across both. */
.dm-mb-md { margin-bottom: 60px; }
@media only screen and (max-width: 999px) {
.dm-py-sm { padding-top: 24px; padding-bottom: 24px; }
.dm-py-md { padding-top: 50px; padding-bottom: 50px; }
.dm-py-lg { padding-top: 60px; padding-bottom: 60px; }
.dm-py-xl { padding-top: 70px; padding-bottom: 70px; }
.dm-mb-md { margin-bottom: 40px; }
}
/* Short-viewport safety net. The breakpoint above is width-only, so a
landscape tablet or a short laptop window — plenty wide, not very
tall — never triggers it: a full-bleed section keeps its desktop
min-height (90vh for the hero) stacked on top of xl-scale padding,
which is what was squeezing the hero's own content on shorter screens.
Ease off on both dimensions once height itself is tight. */
@media only screen and (max-height: 700px) {
.dm-py-xl { padding-top: 60px; padding-bottom: 60px; }
.dm-hero, .dm-band, .dm-cta-band { min-height: auto; }
}
/* ==========================================================================
Hero
========================================================================== */
/* Full-bleed background is handled natively by the row's own bg_image/
bg_color + enable_gradient attributes (they generate a full-viewport
.row-bg-wrap layer via left:50%/-50vw, independent of container width) —
these classes only need to style the CONTAINED text column that sits on
top of that background, not stretch themselves. */
.dm-hero {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding-left: 20px;
padding-right: 20px;
}
.dm-hero .wpb_column,
.dm-hero .vc_column-inner {
position: relative;
z-index: 1;
}
/* .dm-eyebrow keeps its straw accent color even on the dark hero photo.
Only the heading needs forcing to white here — the body copy's own
.dm-hero-copy rule already sets white and its
inherits it, so a
blanket ".dm-hero p" would (and did) catch the eyebrow's
too. */
.dm-hero h1 {
color: var(--dm-white);
}
.dm-hero h1 {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.dm-hero-copy {
max-width: 760px;
margin: 0 auto;
color: var(--dm-white);
font-size: 18px;
line-height: 1.5;
margin-top: 24px;
margin-bottom: 32px;
}
/* wpautop wraps this in its own
, which the base "p { color: ... }"
rule matches directly — a direct match always wins over the inherited
value from .dm-hero-copy above, regardless of specificity. This
currently renders white anyway by a coincidence of the hero row's own
".light p { color: #fff }", not because of the rule above; make it
explicit so it isn't riding on an unrelated rule accidentally matching. */
.dm-hero-copy p {
color: var(--dm-white);
}
/* ==========================================================================
Quote band
========================================================================== */
.dm-quote {
text-align: center;
max-width: 980px;
margin: 0 auto;
}
.dm-quote blockquote {
font-family: var(--dm-font-heading) !important;
font-size: 34px;
line-height: 1.3;
color: var(--dm-obsidian);
margin: 0 0 30px 0;
border: none !important;
padding: 0 !important;
}
/* wpautop wraps the quote text in its own
inside the blockquote. The
base "p { font-family, color }" rule matches that
directly, which
beats inheriting font-family/color from .dm-quote blockquote above no
matter how those compare on specificity (font-size, line-height and
margin aren't affected — the base rule never touches them, so those
two properties are the only ones a direct
match can steal here). */
.dm-quote blockquote p {
font-family: var(--dm-font-heading) !important;
color: var(--dm-obsidian);
}
/* Salient's Material skin gives every
a left accent line via
a plain, unqualified `blockquote::before` rule in skin-material.css
(color forced to #E7D0AA by the theme's dynamic styles). Styling the
blockquote element itself can never touch it — ::before isn't matched
by anything short of its own selector — so it has to be switched off
directly. */
.dm-quote blockquote::before {
display: none;
}
/* Now its own text block (sibling of .dm-quote, not nested inside it),
so the short accent line is drawn with ::before rather than a
border-top — a border-top would span the full width of whatever text
it's given, where this stays a fixed, deliberate size regardless of
the attribution text's length. */
.dm-quote-attribution {
display: block;
position: relative;
padding-top: 26px;
text-align: center;
font-family: var(--dm-font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--dm-straw);
}
/* This is why the color above wasn't showing: wpautop wraps the text in
its own , and the base "p { color: var(--dm-body-text) }" rule
matches that
directly — a direct match on the element always wins
over an inherited value from .dm-quote-attribution, regardless of
specificity. Overriding straw here, on the
itself, is what makes
it actually stick. */
.dm-quote-attribution p {
color: var(--dm-straw);
}
.dm-quote-attribution::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background: var(--dm-straw);
}
@media only screen and (max-width: 999px) {
.dm-quote blockquote { font-size: 24px; }
}
/* ==========================================================================
Full-bleed image + text band ("About Us" pattern, reused twice)
========================================================================== */
.dm-band {
position: relative;
min-height: 520px;
display: flex;
align-items: center;
padding: 60px 8%;
}
/* Salient zeroes out all column padding on "Full Width Content" rows by
design (html body .full-width-content.vc_row-fluid .wpb_column {
padding: 0 }) — a deliberate reset for true edge-to-edge content, and
higher specificity than the plain .dm-band rule above. Only the second
About Us band uses that row type, so this only re-asserts padding
there; matched at the same specificity tier as Salient's own rule
(2 tags + 3 classes) so this file loading after theirs is what wins it. */
html body .full-width-content.vc_row-fluid .dm-band {
padding: 60px 8%;
}
/* Cuts the top-right corner off the row (photo + content together, since
this targets the row wrapper itself, not just the column) with a
rounded transition rather than a sharp diagonal. clip-path: shape()
mixes percentages (so the rectangle stays responsive) with a fixed
corner radius (so the curve doesn't distort at different widths). */
.dm-band-clip {
clip-path: shape(from 0% 0%, line to calc(100% - 100px) 0%, arc to 100% 100px of 100px, line to 100% 100%, line to 0% 100%, close);
}
/* Width/offset now come from the column itself (a 1/2-width column after
an empty 1/2-width spacer — see the "Learn More" band's row_inner in
post_content), not a hardcoded max-width, so the copy block genuinely
fills the right half of the row rather than a fixed pixel measure. */
.dm-band-copy {
position: relative;
z-index: 1;
}
.dm-band-copy .dm-eyebrow,
.dm-band-copy p {
color: var(--dm-white);
}
/* ==========================================================================
Accordion (practice areas)
========================================================================== */
.dm-accordion .nectar-toggle-title,
.dm-accordion .toggle-title {
font-family: var(--dm-font-heading);
font-size: 24px;
color: var(--dm-admiralty);
}
/* Style is set to "minimal" in post_content (transparent background, no
box-shadow, circular +/- icon on the right) — this only re-colors it
from Salient's default gray/black to the brand palette and adds the
divider lines the "minimal" style doesn't draw on its own. */
.dm-accordion .toggles {
border-top: 1px solid var(--dm-mist);
}
.dm-accordion .toggle {
border-bottom: 1px solid var(--dm-mist);
margin-bottom: 0 !important;
}
.dm-accordion .toggle-title a {
padding: 28px 50px 28px 0 !important;
}
.dm-accordion .toggle-title i {
border-color: var(--dm-straw) !important;
}
.dm-accordion .toggle-title i::before,
.dm-accordion .toggle-title i::after {
background-color: var(--dm-straw) !important;
}
/* The expanded panel: text (+ Learn More) on the left, a supporting
photo on the right. */
.dm-expertise-panel {
display: flex;
align-items: flex-start;
gap: 60px;
padding-bottom: 40px;
}
.dm-expertise-text {
flex: 1 1 0;
}
.dm-expertise-text p {
margin-bottom: 24px;
}
.dm-expertise-image {
flex: 1 1 0;
}
.dm-expertise-image img {
display: block;
width: 100%;
height: auto;
border-radius: 4px;
}
@media only screen and (max-width: 999px) {
.dm-expertise-panel {
flex-direction: column;
gap: 24px;
}
}
/* ==========================================================================
Logo / awards row
========================================================================== */
/* Award logos use Salient's own [clients]/[client] element (columns="6",
no arrow nav by design — it only supports swipe/autoplay) — its native
CSS (element-clients.css: sizing, centering, hover fade) already covers
layout, so no custom rule is needed here.
The row is Full Width Content per the design, which zeroes column
padding the same way the second About Us band does (see the .dm-band
override above) — reapply the dm-py-md utility's padding at matching
specificity so the section keeps its normal vertical rhythm. */
html body .full-width-content.vc_row-fluid .dm-py-md {
padding-top: 80px;
padding-bottom: 80px;
}
@media only screen and (max-width: 999px) {
html body .full-width-content.vc_row-fluid .dm-py-md {
padding-top: 50px;
padding-bottom: 50px;
}
}
/* ==========================================================================
Partner / testimonial cards
========================================================================== */
/* The whole card (photo + caption) is one link to the partner's page —
see dm_partner_slider_shortcode(). Flickity has its own click-vs-drag
detection, so a plain here doesn't misfire while swiping. */
.dm-partner-slide {
display: block;
color: inherit;
text-decoration: none;
}
.dm-partner-photo {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 8px;
margin-bottom: 20px;
overflow: hidden;
position: relative;
}
.dm-partner-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.dm-partner-name {
font-family: var(--dm-font-heading);
font-size: 22px;
color: var(--dm-admiralty);
margin: 0;
}
.dm-partner-role {
font-family: var(--dm-font-body);
font-size: 14px;
color: var(--dm-body-text);
margin: 4px 0 0;
}
/* Name/title on the left, the round "view profile" hint button on the
right — see Team hover.png. Hovering anywhere on the card (the whole
.dm-partner-slide is the link) swaps the button from an outlined
diagonal arrow to a filled navy circle with a straight arrow. */
.dm-partner-caption {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
}
.dm-partner-view-btn {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--dm-mist);
color: var(--dm-admiralty);
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.dm-partner-view-btn svg {
width: 16px;
height: 16px;
}
.dm-partner-view-btn .dm-icon-arrow {
display: none;
}
.dm-partner-slide:hover .dm-partner-view-btn {
background: var(--dm-admiralty);
border-color: var(--dm-admiralty);
color: var(--dm-white);
}
.dm-partner-slide:hover .dm-partner-view-btn .dm-icon-diag {
display: none;
}
.dm-partner-slide:hover .dm-partner-view-btn .dm-icon-arrow {
display: block;
}
/* ==========================================================================
Partner slider nav — custom dots (bottom-left) + square arrow buttons
(bottom-right), wired to the Flickity instance by
inc/js/partner-slider.js. Salient's native Flickity wrapper only ever
gives dots OR arrows, never both, so this replaces it entirely
(flickity_controls="none" on the [carousel]). See Slider Buttons.png. */
.dm-slider-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
}
.dm-slider-dots {
display: flex;
align-items: center;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.dm-slider-dots li::marker {
content: none;
}
.dm-slider-dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--dm-mist);
cursor: pointer;
transition: background-color 0.25s ease, transform 0.25s ease;
}
.dm-slider-dot:hover {
background: var(--dm-straw);
}
.dm-slider-dot.is-active {
background: var(--dm-admiralty);
transform: scale(1.25);
}
.dm-slider-arrows {
display: flex;
gap: 12px;
}
.dm-slider-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid var(--dm-mist);
border-radius: 4px;
background: transparent;
color: var(--dm-admiralty);
cursor: pointer;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.dm-slider-arrow svg {
width: 18px;
height: 18px;
}
.dm-slider-prev svg {
transform: scaleX(-1);
}
.dm-slider-arrow:hover {
background: var(--dm-admiralty);
border-color: var(--dm-admiralty);
color: var(--dm-white);
}
/* ==========================================================================
Testimonials — gradient band, custom carousel (built from a plain
[carousel]/[item] of icon + heading + textblocks, same approach as Our
Process, rather than Salient's native [testimonial_slider]/[testimonial]
widget), reusing the tile-animation reveal and the dots+arrows nav.
The band's own gradient is set natively on the row (enable_gradient,
color_overlay, color_overlay_2, gradient_direction="top_to_bottom",
overlay_strength="1" — a page-builder control, not a CSS class), so
.dm-testimonials-band no longer needs a background rule here; the class
stays as a hook for the card/nav rules below and any future tweaks.
There's no row-level line animation either — the reveal here is purely
the per-card dm-tile-animation already on each [vc_row_inner] below. */
/* Each card is a [vc_row_inner] (dm-tile-animation dm-tile-cards, same
mechanism as Our Process's steps) with two full-width [vc_column_inner]
children: an empty dm-tile-panel layer (the card's own background —
fades in as a block, so the whole tile visibly appears rather than just
its text) and dm-tile-content (the stars/quote/name, rising in shortly
after). Content-only fade+rise (no panel) read as "no animation" in
testing — the card box was already fully visible immediately, so only a
24px text shift was left to notice. The panel is position:absolute so
it drops out of flow entirely; dm-tile-content is then the only element
determining the row's natural height, with the panel stretched behind
it via inset:0. */
.dm-testimonial-card {
position: relative;
height: 100%;
overflow: hidden;
}
.dm-testimonial-panel {
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--dm-white) 0%, var(--dm-parchment-light) 100%);
pointer-events: none;
}
.dm-testimonial-content {
position: relative;
z-index: 1;
}
.dm-testimonial-card .dm-tile-content,
.dm-testimonial-card .dm-tile-content > .vc_column-inner {
height: 100%;
}
.dm-testimonial-card .dm-tile-content > .vc_column-inner > .wpb_wrapper {
display: flex;
flex-direction: column;
height: 100%;
padding: 36px 30px;
}
/* Salient's own 3-column cell width (flickity.css: [data-desktop-columns="3"]
.cell { width: calc(31.9% - ...) }) is deliberately under 33.3%, reserving
a ~4.3% budget per row for gaps between cells — but the actual gap here is
a fixed 20px per cell regardless of breakpoint ([data-spacing*="default"]
.cell { margin-right: 20px }, no media query), which only consumes part of
that budget. Confirmed by direct measurement at 1344px container width:
cell width 428.875px (31.9%) x3 + two 20px gaps = 1327px, leaving a 17px
sliver of empty space (or the 4th card's edge) instead of the 3 visible
cards filling the row edge-to-edge. Overriding to the exact fraction that
makes 3 cells + 2 fixed 20px gaps sum to 100%, matching Salient's own
breakpoint tiers (Desktop >=1300px uses data-desktop-columns, Small
Desktop 1000-1300px uses data-small-desktop-columns — both configured to
"3" on this carousel) so each actually reaches 100%. */
@media only screen and (min-width: 1300px) {
.dm-testimonial-slider .nectar-flickity.nectar-carousel[data-desktop-columns="3"] .cell {
width: calc((100% - 40px) / 3);
}
}
@media only screen and (min-width: 1000px) and (max-width: 1300px) {
.dm-testimonial-slider .nectar-flickity.nectar-carousel[data-small-desktop-columns="3"] .cell {
width: calc((100% - 40px) / 3);
}
}
.dm-testimonial-stars {
display: flex;
gap: 4px;
color: var(--dm-straw);
margin-bottom: 16px;
}
/* p, not the el_class wrapper itself — vc_column_text puts el_class on an
outer div and wpautop wraps the actual text in a nested , which the
base theme's "p { color }" rule matches directly and wins over an
ancestor's color regardless of that ancestor's specificity (same issue
as .dm-process-number/.dm-footer-tagline elsewhere in this file). */
.dm-testimonial-quote p {
font-family: var(--dm-font-body);
font-size: 16px;
line-height: 1.6;
color: var(--dm-obsidian);
margin: 0 0 20px;
}
/* vc_custom_heading puts el_class directly on the heading tag itself (no
wrapper/nested-p indirection needed), but it also writes its own
font-family/weight/style straight onto that tag as an inline style
(e.g. style="font-family:Abril Fatface;font-weight:400"), which beats
any external stylesheet rule regardless of specificity — !important is
the only way to actually land the body font here. */
.dm-testimonial-name {
font-family: var(--dm-font-body) !important;
font-weight: 700 !important;
font-size: 15px;
color: var(--dm-obsidian);
margin: 0 0 2px;
}
.dm-testimonial-role p {
font-family: var(--dm-font-body);
font-size: 14px;
color: var(--dm-body-text);
margin: 0;
}
/* Per-card stagger for the tile animation — same pattern as
.dm-process-step-1..5 above. */
.dm-testimonial-card-1 { --stagger: 0ms; }
.dm-testimonial-card-2 { --stagger: 150ms; }
.dm-testimonial-card-3 { --stagger: 300ms; }
.dm-testimonial-card-4 { --stagger: 450ms; }
.dm-testimonial-card-5 { --stagger: 600ms; }
/* ==========================================================================
Process steps — description (top-left), slider (right, full height),
Enquire Now + arrow nav (bottom-left). A 2-row CSS grid on desktop is
what lets the slider column span both rows while the cta block sits
under the description — WPBakery's own flex row can't express that
without fighting its column widths, so this overrides it outright via
.dm-process-row (the row's own Extra Class Name — vc_row uniquely uses
"class", not "el_class", for that field).
On mobile the three columns simply stack in source order, which is
already description → slider → cta, so no reordering is needed there. */
@media only screen and (min-width: 1000px) {
.dm-process-row .row_col_wrap_12 {
/* !important: Salient's own flex column system sets display:flex
on this element from a rule this couldn't out-specificity any
other way (verified via computed style — plain higher
specificity here still lost to it). */
display: grid !important;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"intro slider"
"cta slider";
}
.dm-process-row .dm-process-intro {
grid-area: intro;
width: auto !important;
}
.dm-process-row .dm-process-slider-col {
grid-area: slider;
width: auto !important;
}
.dm-process-row .dm-process-cta {
grid-area: cta;
width: auto !important;
align-self: end;
}
}
.dm-process-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 30px;
width: 100%;
}
.dm-process-cta .nectar-button,
.dm-slider-arrows {
align-self: flex-start;
}
/* Each step is now a native [vc_row_inner] > two [vc_column_inner]s (the
line, then the content) instead of a hand-written
— see
dm_process_step_item() in the post_content build script. .dm-process-step
is that row_inner's own OUTER wrapper (a plain .wpb_row), but its two
columns are actually children of a further-nested .row_col_wrap_12_inner
div, not of .dm-process-step directly — same gap as the outer
.dm-process-row/.row_col_wrap_12 fix above, and just as invisible until
checked: flexing/stretching .dm-process-step itself did nothing to the
columns, so the empty line column had no explicit height anywhere and
collapsed to 0 (which is why no line ever rendered) — while
.dm-tile-content happened to look fine regardless, purely because it
also gets height:100% explicitly, not because the flex chain reached it.
The rules below have to reach two levels deeper still
(.vc_column-inner > .wpb_wrapper) to actually lay out the number/title/
copy stack — a plain .wpb_column only ever has that one wrapper as its
direct child, so styling it directly here has nothing to distribute. */
.dm-process-step {
position: relative;
height: 100%;
min-height: 380px;
background-color: transparent;
transition: background-color 0.3s ease;
}
.dm-process-step .row_col_wrap_12_inner {
display: flex !important;
align-items: stretch;
height: 100%;
}
/* The vertical divider — the "draw itself in" line from the tile
animation (see .dm-tile-line in animations.css) rather than a static
border, so it grows in sync with the number/title/copy rising in.
Positioned absolutely against .row_col_wrap_12_inner — its actual
containing block, since Salient's own grid CSS already puts
position:relative there (not .dm-process-step, despite that also
being position:relative — the *nearest* positioned ancestor wins).
That element also carries Salient's standard -1% bleed margin
(.vc_row-fluid > .span_12 { margin-left: -1% }), normally cancelled
out by a +1% padding on ordinary columns — but ours are both
.child_column, which that compensating rule explicitly excludes, so
left:0 landed 1% short of .dm-process-step's true edge. Invisible
everywhere except slide 1, where that shortfall pushes the line just
past the flickity-viewport's clip boundary (only that slide sits
flush against it) and it renders as though clipped off on load.
left:1% cancels the bleed the same way the native padding would.
top/bottom insets (rather than a stretched flex height) sidestep a
separate issue: percentage height on an empty flex item doesn't
reliably resolve when the flex container's own height comes from a
*sibling's* content — confirmed via computed style, height:100%
!important still rendered as 0 on this empty column even though the
identical rule resolved correctly on .dm-tile-content right next to it. */
.dm-process-step .dm-tile-line {
position: absolute;
left: 1%;
top: 0;
bottom: 0;
/* Salient gives every column a small default gutter padding unless
column_padding="no-extra-padding" is set — this column never sets
it, and with box-sizing:border-box that padding alone (~4px) was
wider than the 1px width itself, so !important width was winning
on paper but rendering as the padding box, not a hairline. */
width: 1px !important;
padding: 0 !important;
background: var(--dm-mist);
transform-origin: top;
transition: background-color 0.3s ease;
}
.dm-process-step .dm-tile-content {
width: auto !important;
flex: 1 1 auto;
}
.dm-process-step .dm-tile-content,
.dm-process-step .dm-tile-content > .vc_column-inner {
height: 100% !important;
}
.dm-process-step .dm-tile-content > .vc_column-inner > .wpb_wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 24px 24px 24px 30px;
}
.dm-process-number {
font-family: var(--dm-font-heading);
font-size: 90px;
color: var(--dm-body-text);
line-height: 1;
margin: 0;
}
/* Same wpautop/base-"p" issue as .dm-quote-attribution etc. elsewhere in
this file — .dm-process-number sits on vc_column_text's outer wrapper,
but the digit itself is in a nested
, which the base "p { color }"
rule matches directly and wins over the wrapper's color regardless of
specificity. color: inherit (rather than repeating each color) means
the --active straw override below still reaches it automatically. */
.dm-process-number p {
font-family: var(--dm-font-heading);
color: inherit;
margin: 0;
}
.dm-process-title {
font-family: var(--dm-font-heading);
font-size: 22px;
color: var(--dm-admiralty);
margin: 0 0 10px;
}
.dm-process-copy {
font-size: 15px;
color: var(--dm-body-text);
margin: 0;
}
/* Whichever step the slider is currently on — toggled by
inc/js/partner-slider.js as the user steps through with the arrows, not
a fixed class in post_content — is called out with its own background,
a straw divider instead of mist, and straw number/title. */
.dm-process-step--active {
background-color: var(--dm-parchment-50);
}
.dm-process-step--active .dm-tile-line {
background: var(--dm-straw);
}
.dm-process-step--active .dm-process-number,
.dm-process-step--active .dm-process-title {
color: var(--dm-straw);
}
/* Per-item stagger for the tile animation — a plain CSS class per step
rather than an inline style, since each step is built from shortcodes
now, not a hand-written element with room for a style="" attribute. */
.dm-process-step-1 { --stagger: 0ms; }
.dm-process-step-2 { --stagger: 200ms; }
.dm-process-step-3 { --stagger: 400ms; }
.dm-process-step-4 { --stagger: 600ms; }
.dm-process-step-5 { --stagger: 800ms; }
/* Solid straw CTA button — the theme's own "Accent Color" button option
isn't wired to the brand palette on this install, so this asserts the
fill directly rather than trusting an unconfigured native mapping. */
.dm-btn-straw.nectar-button {
background-color: var(--dm-straw) !important;
border-color: var(--dm-straw) !important;
color: var(--dm-obsidian) !important;
}
.dm-btn-straw.nectar-button:hover {
background-color: var(--dm-admiralty) !important;
border-color: var(--dm-admiralty) !important;
color: var(--dm-white) !important;
}
/* ==========================================================================
CTA band
========================================================================== */
.dm-cta-band {
position: relative;
overflow: hidden;
min-height: 380px;
display: flex;
align-items: center;
}
/* The D&M monogram — a real image now (a building-facade photo clipped
into the letterforms via ImageMagick, reusing the same Expertise photo
already in the media library — see dm-monogram.png), not styled text.
Rendered via [image_with_animation] (el_class lands on the ![]()
itself, wrapped in .img-with-aniamtion-wrap [sic — native typo] > .inner
— not [vc_single_image]: Salient deliberately unregisters that core
WPBakery element in favor of its own image shortcodes, so it silently
renders as literal text instead of an image). Positioned as a
decorative right-hand layer, scoped to this band since the wrapper
itself carries no custom class to hook. Static now — heading and
image are no longer animated (see .dm-cta-lines below for where the
scroll animation actually lives).
.vc_column-inner (the actual containing block for this absolutely
positioned wrapper — it carries native position:relative, not
.dm-cta-band) shrink-wraps to the width of the heading next to it
(480px, its max-width) since the image wrapper is absolute and so
doesn't count toward that sizing — confirmed via the ancestor chain,
.vc_column-inner and .wpb_wrapper both measured exactly 480px instead
of the band's real ~1372px. Forcing both to full width fixes the
percentage math below without changing the heading's own rendered
width, which is still capped by its own max-width regardless. */
.dm-cta-band .vc_column-inner,
.dm-cta-band .wpb_wrapper {
width: 100% !important;
}
.dm-cta-band .img-with-aniamtion-wrap {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 55%;
max-width: 760px;
pointer-events: none;
}
.dm-cta-image {
display: block;
width: 100%;
height: auto;
opacity: 0.85;
}
/* Background accent line — the row carries the shared ENABLE class
"dm-line-animation" + STYLE class "dm-line-footer" (same pairing as
the global footer, .dm-footer-lines in footer.css), and dm-animations.js
adds ".dm-inview" via IntersectionObserver the first time the row
scrolls into view, which flips the
below (a [vc_raw_html] block in post_content, not generated here) from
its held state into animations.css's "draw" keyframe. Heading and
image stay static; this is the only thing that animates in this row. */
.dm-cta-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.dm-cta-heading {
position: relative;
z-index: 1;
max-width: 480px;
}
.dm-cta-band h2, .dm-cta-band p {
color: var(--dm-white);
position: relative;
z-index: 1;
}
@media only screen and (max-width: 999px) {
.dm-cta-band .img-with-aniamtion-wrap { width: 70%; }
.dm-cta-image { opacity: 0.6; }
}
@media only screen and (max-width: 690px) {
.dm-cta-band .img-with-aniamtion-wrap { display: none; }
}
/* ==========================================================================
Contact form (visual layout only — no submission handler wired up yet)
========================================================================== */
.dm-contact-section h2 {
color: var(--dm-admiralty);
}
/* .dm-eyebrow p (site-wide straw override) already wins the direct-match
contest against the base "p" rule, so overriding .dm-eyebrow itself
here has no effect on the actual — override at the same p-level,
scoped narrower (three classes) so it wins over the site-wide one. */
.dm-contact-section .dm-eyebrow p {
color: var(--dm-admiralty);
}
.dm-form-row {
display: flex;
gap: 20px;
}
.dm-form-row .dm-form-field {
flex: 1;
}
.dm-form-field {
margin-bottom: 20px;
}
.dm-form-field label {
display: block;
font-family: var(--dm-font-body);
font-size: 14px;
color: var(--dm-admiralty);
margin-bottom: 8px;
}
.dm-form-field input,
.dm-form-field select,
.dm-form-field textarea {
width: 100%;
border: 1px solid var(--dm-white);
background: var(--dm-white);
padding: 14px 16px;
font-family: var(--dm-font-body);
font-size: 15px;
color: var(--dm-obsidian);
box-sizing: border-box;
}
/* ==========================================================================
Nav CTA — style the "Contact Us" menu item as a solid button
========================================================================== */
#top #header-outer .dm-nav-cta > a {
background: var(--dm-admiralty);
color: var(--dm-white) !important;
padding: 10px 24px !important;
border-radius: 3px;
}