/*
* Theme Name: DSM Theme
* Theme URI: https://drumservicemunich.de
* Description: Child theme of Twenty Twenty-Five for Drum Service Munich.
* Author: Drum Service Munich
* Template: twentytwentyfive
* Version: 1.0.0
* License: GPL-2.0-or-later
* Text Domain: dsm-theme
*/
/* ── Breakpoints ──────────────────────────────────────────────────────────
CSS custom properties can't be used inside @media conditions, so these
are documented here as the site's convention and written as literal rem
values in each media query below.
Mobile: max-width: 48rem (≤ 768px)
Tablet: 48.0625rem–64rem (769px–1024px)
Desktop: min-width: 64.0625rem (≥ 1025px)
Most content blocks only care about mobile vs. desktop and split at
48rem/48.0625rem (tablet renders with the mobile layout). The navbar is
the exception — it uses the full three-tier scale below, since a
horizontal nav + mega menu needs desktop-width room to work, so the
hamburger/call-icon mobile treatment is kept through the tablet range
too, switching to the horizontal desktop nav only at 64.0625rem.
─────────────────────────────────────────────────────────────────────── */
/* ── Global design tokens ── */
:root {
/* Brand — accent blue is the site's default/primary brand colour.
(Previously a green, #2d5016 / #3d6a20 — no longer used anywhere.) */
--clr-brand: #345593;
--clr-brand-hover: #4977ce;
/* Text */
--clr-text-primary: #111111; /* rgb(17,17,17) */
--clr-text-body: #374151;
--clr-text-muted: #6b7280;
--clr-text-subtle: #9ca3af;
--clr-text-inverse: #ffffff;
/* Surface */
--clr-surface: #ffffff;
--clr-surface-alt: #f3f4f6;
--clr-surface-dark: #111827;
/* Border */
--clr-border: #e5e7eb;
--clr-border-footer: #e8e8e8; /* rgb(232, 232, 232) */
/* Link */
--clr-link: #2563eb;
/* New — not yet assigned to any element */
--clr-accent-blue: #345593;
--clr-surface-off-white: #FAFAFA;
--clr-dark: #282B2D;
--clr-dark-gold: #8B6914; /* ~5.1:1 contrast with white text */
--clr-black: #000000; /* Text Grid 2 Col — service panel hover state (border/title) */
--clr-dark-green: #2d5016; /* Text + Image Offset — bottom stop of the left border gradient. This is the site's old brand colour before the rebrand to accent blue (see the comment above), reused here only as a plain dark green, not reviving the old brand identity. */
/* Typography */
--font-family: 'Poppins', sans-serif;
--font-family-heading: 'Source Serif Pro', serif;
--letter-spacing-heading: 0.0625rem; /* 1px */
--font-size-base: 1rem;
--font-size-sm: 0.875rem;
--font-size-lg: 1.125rem;
--font-size-footer-title: clamp( 1rem, 2vw, 1.25rem ); /* was 1.75rem (28px); now fluid, capped at 20px */
--font-size-nav: 1rem; /* 16px — desktop only (>= 64.0625rem); same as --font-size-base so every nav item (top-level and nested/dropdown) is a uniform size on desktop */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-xbold: 800;
/* Buttons / CTAs — canonical style lives on the hero block's button;
every other block's button references these same tokens. */
--btn-bg: var( --clr-dark ); /* rgb(40, 43, 45) */
--btn-color: var( --clr-surface-off-white ); /* rgb(250, 250, 250) */
--btn-radius: 0;
--btn-font-size: 1.25rem; /* 20px */
--btn-font-size-mobile: 1.125rem; /* 18px */
--btn-font-weight: var( --font-weight-medium );
--btn-letter-spacing: 0.025rem; /* 0.4px */
--btn-line-height: 1.5rem; /* 24px */
--btn-padding: 1.5rem; /* 24px, uniform */
--btn-padding-mobile: 1.5rem;
--btn-shadow: inset 0 0 10px 0 rgba( 0, 0, 0, 0.5 );
--btn-transition: all 0.31s ease;
/* Spacing */
--content-max-width: 1200px;
--gutter: 1.5rem;
--logo-width: 12.5rem; /* 200px */
--logo-height: 3.125rem; /* 50px */
/* ── Section vertical rhythm scale ──────────────────────────────────────────
Applied via has-section-padding-* utility classes (see below).
Each size has a desktop value and a mobile value (≤ 48rem).
Change a pair here to adjust that size across the entire site at once.
────────────────────────────────────────────────────────────────────────── */
/* Small — compact sections, e.g. breadcrumb bars or tight feature rows */
--section-padding-sm: 4rem;
--section-padding-sm-mobile: 3rem;
/* Medium — standard content sections (default) */
--section-padding-md: 8rem;
--section-padding-md-mobile: 6rem;
/* Large — hero-adjacent or high-impact sections */
--section-padding-lg: 12rem;
--section-padding-lg-mobile: 8rem;
/* ── Section vertical margin scale ──────────────────────────────────────────
Same sizes as the padding scale above, applied via has-section-margin-*
utility classes (see below). Kept as separate tokens so margin can be
tuned independently of padding.
────────────────────────────────────────────────────────────────────────── */
--section-margin-sm: 4rem;
--section-margin-sm-mobile: 3rem;
--section-margin-md: 8rem;
--section-margin-md-mobile: 6rem;
--section-margin-lg: 12rem;
--section-margin-lg-mobile: 8rem;
}
/* ── Self-hosted fonts ────────────────────────────────────────────────────────
Self-hosted (not loaded from Google's CDN) so no visitor IP/font request is
sent to a third party — required for GDPR compliance on a German site.
Body/paragraph font: Poppins. Heading/title font: Source Serif Pro.
─────────────────────────────────────────────────────────────────────────── */
@font-face {
font-family: 'Poppins';
src: url( 'assets/fonts/poppins/poppins-400.woff2' ) format( 'woff2' );
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url( 'assets/fonts/poppins/poppins-500.woff2' ) format( 'woff2' );
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url( 'assets/fonts/poppins/poppins-600.woff2' ) format( 'woff2' );
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url( 'assets/fonts/poppins/poppins-700.woff2' ) format( 'woff2' );
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Source Serif Pro';
src: url( 'assets/fonts/source-serif-pro/source-serif-pro-400.woff2' ) format( 'woff2' );
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Source Serif Pro';
src: url( 'assets/fonts/source-serif-pro/source-serif-pro-700.woff2' ) format( 'woff2' );
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Source Serif Pro';
src: url( 'assets/fonts/source-serif-pro/source-serif-pro-900.woff2' ) format( 'woff2' );
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* ── Section padding utility classes ─────────────────────────────────────────
Add one of these class names via the block editor's "Additional CSS class(es)"
field (block sidebar → Advanced) to apply vertical rhythm to any full-width
content block. The class targets the block's immediate inner wrapper via
> *:first-child so no per-block CSS selectors are ever needed.
Available classes:
has-section-padding-sm → 4rem top & bottom / 3rem mobile
has-section-padding → 8rem top & bottom / 6rem mobile (standard default)
has-section-padding-lg → 12rem top & bottom / 8rem mobile
has-section-padding-top-half → 4rem top, 8rem bottom / 3rem top, 6rem bottom mobile
has-section-padding-top → 8rem top only / 6rem mobile (same size as has-section-padding)
has-section-padding-bottom → 8rem bottom only / 6rem mobile (same size as has-section-padding)
To add a new size: define a --section-padding-* pair in :root above,
then add a matching class rule below.
─────────────────────────────────────────────────────────────────────────── */
.has-section-padding-sm > *:first-child {
padding-top: var( --section-padding-sm );
padding-bottom: var( --section-padding-sm );
}
.has-section-padding > *:first-child {
padding-top: var( --section-padding-md );
padding-bottom: var( --section-padding-md );
}
.has-section-padding-lg > *:first-child {
padding-top: var( --section-padding-lg );
padding-bottom: var( --section-padding-lg );
}
/* Standard bottom padding but half-height top — useful when a block sits
directly below a hero or another full-bleed section. */
.has-section-padding-top-half > *:first-child {
padding-top: var( --section-padding-sm );
padding-bottom: var( --section-padding-md );
}
/* One-sided variants, same size as has-section-padding (standard/md) — for
when only one edge of a block needs vertical rhythm, e.g. a block that
sits flush against an adjacent section on one side. */
.has-section-padding-top > *:first-child {
padding-top: var( --section-padding-md );
}
.has-section-padding-bottom > *:first-child {
padding-bottom: var( --section-padding-md );
}
@media ( max-width: 48rem ) {
.has-section-padding-sm > *:first-child {
padding-top: var( --section-padding-sm-mobile );
padding-bottom: var( --section-padding-sm-mobile );
}
.has-section-padding > *:first-child {
padding-top: var( --section-padding-md-mobile );
padding-bottom: var( --section-padding-md-mobile );
}
.has-section-padding-lg > *:first-child {
padding-top: var( --section-padding-lg-mobile );
padding-bottom: var( --section-padding-lg-mobile );
}
.has-section-padding-top-half > *:first-child {
padding-top: var( --section-padding-sm-mobile );
padding-bottom: var( --section-padding-md-mobile );
}
.has-section-padding-top > *:first-child {
padding-top: var( --section-padding-md-mobile );
}
.has-section-padding-bottom > *:first-child {
padding-bottom: var( --section-padding-md-mobile );
}
}
/* ── Section margin utility classes ──────────────────────────────────────────
Same pattern as the padding utilities above, but for margin — add via the
block editor's "Additional CSS class(es)" field to push a block away from
its neighbours instead of expanding its own background/click area.
Targets > *:first-child for the same reason as padding: the block's own
wrapper carries a hardcoded margin: 0 !important that would win over a
class applied directly to it.
Available classes:
has-section-margin-sm → 4rem top & bottom / 3rem mobile
has-section-margin → 8rem top & bottom / 6rem mobile (standard default)
has-section-margin-lg → 12rem top & bottom / 8rem mobile
has-section-margin-top-half → 4rem top, no bottom / 3rem top, no bottom mobile
To add a new size: define a --section-margin-* pair in :root above,
then add a matching class rule below.
─────────────────────────────────────────────────────────────────────────── */
.has-section-margin-sm > *:first-child {
margin-top: var( --section-margin-sm );
margin-bottom: var( --section-margin-sm );
}
.has-section-margin > *:first-child {
margin-top: var( --section-margin-md );
margin-bottom: var( --section-margin-md );
}
.has-section-margin-lg > *:first-child {
margin-top: var( --section-margin-lg );
margin-bottom: var( --section-margin-lg );
}
/* Top margin only, no bottom margin — useful when a block sits directly
below a hero or another full-bleed section. */
.has-section-margin-top-half > *:first-child {
margin-top: var( --section-margin-sm );
margin-bottom: 0;
}
@media ( max-width: 48rem ) {
.has-section-margin-sm > *:first-child {
margin-top: var( --section-margin-sm-mobile );
margin-bottom: var( --section-margin-sm-mobile );
}
.has-section-margin > *:first-child {
margin-top: var( --section-margin-md-mobile );
margin-bottom: var( --section-margin-md-mobile );
}
.has-section-margin-lg > *:first-child {
margin-top: var( --section-margin-lg-mobile );
margin-bottom: var( --section-margin-lg-mobile );
}
.has-section-margin-top-half > *:first-child {
margin-top: var( --section-margin-sm-mobile );
margin-bottom: 0;
}
}
/* alignfull blocks use margin: calc(50% - 50vw), and 100vw includes the
desktop scrollbar's width while the visible page doesn't — without this,
every alignfull section adds a scrollbar-width sliver of horizontal
overflow on desktop (mobile's overlay scrollbar isn't affected). */
html {
overflow-x: hidden;
}
body {
font-family: var( --font-family );
font-size: var( --font-size-base );
color: var( --clr-text-body );
}
/* ── Titles: Source Serif Pro; body/paragraph text inherits Poppins from body ── */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
font-family: var( --font-family-heading );
letter-spacing: var( --letter-spacing-heading );
font-weight: var( --font-weight-semibold );
}
/* h1 line-height: parent theme's 1.125 (unitless, scales with font-size)
plus a flat 0.5rem on top. */
h1 {
line-height: calc( 1.125em + 0.5rem );
}
/* ── Mobile: roomier line-height for h1 and body text ── */
@media ( max-width: 48rem ) {
h1 {
line-height: calc( 1.125em + 1rem );
}
body {
line-height: 1.7;
}
}
/* ── Align header & footer with block content (1200px / 1.5rem gutter) ── */
header.wp-block-template-part .wp-block-group.alignwide,
footer.wp-block-template-part .wp-block-group.alignwide {
padding-inline: 1.5rem;
box-sizing: border-box;
}
/* Base typography */
p {
font-family: var( --font-family );
font-weight: var( --font-weight-normal );
font-size: var( --font-size-base );
}
/* Hide post title (e.g. "Home" h1 injected by template) */
.wp-block-post-title {
display: none !important;
}
/* Remove top/bottom spacing on main content wrapper */
main#wp--skip-link--target {
margin-top: 0 !important;
}
main#wp--skip-link--target > .wp-block-group.alignfull {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ── Footer: off-white theme ── */
footer.wp-block-template-part {
background-color: var( --clr-surface-off-white );
color: var( --clr-dark );
font-weight: var( --font-weight-medium );
border-top: 1px solid var( --clr-border-footer );
border-top-left-radius: 0;
border-top-right-radius: 0;
}
footer.wp-block-template-part h6 {
color: var( --clr-dark );
/* Overrides the site-wide h1-h6 default (--font-family-heading, Source
Serif Pro) with the body font specifically for footer column
titles. */
font-family: var( --font-family );
font-size: var( --font-size-footer-title );
font-weight: var( --font-weight-xbold );
letter-spacing: 0.12em;
margin-top: 0;
margin-bottom: 1.25rem;
}
footer.wp-block-template-part p {
margin-block: 0;
line-height: 1.8;
}
footer.wp-block-template-part a {
color: var( --clr-dark );
text-decoration: none;
display: inline-block;
padding-block: 0.25rem;
font-size: var( --font-size-base );
font-weight: var( --font-weight-normal );
transition: color 0.2s ease;
}
footer.wp-block-template-part a:hover {
color: var( --clr-brand );
}
footer.wp-block-template-part strong {
color: var( --clr-text-muted );
}
/* ── Footer: social icon row ── */
.dsm-footer-socials {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 0.5rem;
}
.dsm-footer-socials a {
display: inline-flex;
color: var( --clr-dark );
padding: 0;
transition: color 0.2s ease;
}
.dsm-footer-socials a:hover {
color: var( --clr-brand );
}
.dsm-footer-socials svg {
fill: currentColor;
}
footer.wp-block-template-part hr.wp-block-separator {
border-color: var( --clr-border );
margin-block: 3rem;
}
footer.wp-block-template-part .wp-block-columns {
display: grid !important;
grid-template-columns: repeat( 3, 1fr ) !important;
gap: 2.5rem 4rem;
}
@media ( max-width: 782px ) {
footer.wp-block-template-part .wp-block-columns {
grid-template-columns: 1fr !important;
}
footer.wp-block-template-part .wp-block-column + .wp-block-column {
padding-top: 2rem;
border-top: 1px solid var( --clr-border );
}
}
/* ── Navbar: border bottom ── */
header.wp-block-template-part {
/* #fafafa matches the existing --clr-surface-off-white token exactly. */
background-color: var( --clr-surface-off-white );
border-bottom: 1px solid var( --clr-border );
/* Several content blocks (hero, timeline, image-timeline, ...) give an
inner element z-index:1 to layer it over their own background, which
requires position:relative on that block's own section — making that
section a stacking context in its own right, at the same z-index:auto
level as everything else with no explicit z-index. Ties between
same-level stacking contexts are broken by DOM order, and those
sections come after the header — so without an explicit z-index here,
they'd win and paint over the header, burying any open nav dropdown
or mega menu behind that block's content instead of in front of it.
position:relative + an explicit, high z-index makes the header (and
everything nested inside it, dropdowns and mega menu included) beat
any later section regardless of DOM order or that section's own
internal z-index. */
position: relative;
z-index: 9999;
}
/* ── Navbar: logo size ── */
header.wp-block-template-part .wp-block-site-logo img {
width: var( --logo-width );
height: var( --logo-height );
object-fit: contain;
}
/* ── Navbar: Poppins, semibold weight, item spacing ── */
header.wp-block-template-part .wp-block-navigation,
header.wp-block-template-part .wp-block-navigation a {
font-family: var( --font-family );
font-weight: var( --font-weight-semibold );
/* Mobile/tablet value — reuses the same 1px token already used for
h1–h6. Overridden to 0.1px on desktop below. */
letter-spacing: var( --letter-spacing-heading );
}
/* ── Navbar: 18px/600 on desktop ── */
@media ( min-width: 64.0625rem ) {
header.wp-block-template-part .wp-block-navigation,
header.wp-block-template-part .wp-block-navigation a {
/* Poppins (--font-family, from the base rule above) throughout —
no longer switches to --font-family-nav (Source Serif Pro) here. */
font-size: var( --font-size-nav );
font-weight: var( --font-weight-semibold );
/* Desktop-only override — narrower than the 1px mobile/tablet value above. */
letter-spacing: 0.1px;
}
}
/* ── Navbar: keep the mobile (hamburger) nav through mobile AND tablet,
until the navbar's own desktop breakpoint (64.0625rem) ── WP core
switches the Navigation block from hamburger to inline desktop menu at
a hardcoded 600px, far too narrow for a horizontal nav + mega menu to
have room to work. Every other navbar rule below switches to desktop
styling (Poppins font, call button, controls order, mega menu) at this
same 64.0625rem point, so hamburger + call icon persist for any device
smaller than true desktop. */
@media ( max-width: 64rem ) {
header.wp-block-template-part .wp-block-navigation__responsive-container-open:not( .always-shown ) {
display: flex !important;
}
header.wp-block-template-part .wp-block-navigation__responsive-container:not( .is-menu-open ) {
display: none !important;
}
}
/* 1st-level nav links: --clr-text-primary (rgb(17,17,17)) */
header.wp-block-template-part .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
color: var( --clr-text-primary );
}
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__container {
gap: 2rem;
}
.wp-block-navigation__responsive-container-content .wp-block-navigation__container {
gap: 1.5rem;
}
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
display: block;
padding-block: 0.65rem;
}
@media ( max-width: 64rem ) {
.wp-block-navigation__responsive-container-content li.wp-block-navigation-item {
margin-bottom: 0;
}
}
/* ── Header controls: consistent 2rem gap at all sizes ── */
.dsm-header-controls { gap: 2rem; }
/* ── Header controls: desktop order [nav], phone hidden ── */
@media ( min-width: 64.0625rem ) {
.dsm-header-controls .wp-block-navigation { order: 1; }
.dsm-header-controls .dsm-call-btn { display: none; }
}
/* ── Force-close the mobile overlay if the window is enlarged past desktop
while it's open ── core's own .is-menu-open rule (display:flex, no media
query) keeps the full-screen mobile drawer visible regardless of
viewport width once opened; without this, resizing from mobile to
desktop with the menu open leaves it stuck covering the page even
though the horizontal desktop nav is now the active one underneath.
This only targets the outer overlay (the compound class only matches
.wp-block-navigation__responsive-container itself), not nested submenu
containers, which carry different classes. */
@media ( min-width: 64.0625rem ) {
.wp-block-navigation__responsive-container.is-menu-open {
display: none !important;
}
}
/* ── Header call button (mobile only) ── */
.dsm-call-btn {
display: none;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
background-color: var( --clr-brand );
border-radius: 5px;
color: var( --clr-text-inverse );
text-decoration: none;
flex-shrink: 0;
transition: background-color 0.2s ease;
}
.dsm-call-btn:hover {
background-color: var( --clr-brand-hover );
}
.dsm-call-btn svg {
fill: currentColor;
}
/* ── Desktop nav dropdown: consistent list styling ── */
@media ( min-width: 64.0625rem ) {
header.wp-block-template-part .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
background-color: var( --clr-surface );
border: 1px solid var( --clr-border );
border-radius: 4px;
box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
min-width: 180px;
/* Never wider than the viewport (minus a gutter on each side), so even
a long menu label can't force the dropdown itself off-screen. */
max-width: calc( 100vw - 2 * var( --gutter ) );
overflow: hidden;
/* Belt-and-braces on top of the header's own elevated z-index above —
guarantees this wins even against something else inside the header
that might one day pick up its own z-index. */
z-index: 9999;
}
header.wp-block-template-part .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item {
width: 100%;
border-bottom: 1px solid var( --clr-border );
}
header.wp-block-template-part .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
border-bottom: none;
}
header.wp-block-template-part .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
padding: 0.75rem 1.25rem;
width: 100%;
box-sizing: border-box;
white-space: nowrap;
}
/* The nav is right-justified in the header (patterns/header.php), so the
last one or two top-level items sit right at the edge of the page —
core's default left-aligned dropdown (left:0, opening rightward from
the trigger) would run those off the right edge of the screen. Flip
them to open right-aligned under their trigger instead. The mega menu
is excluded — it already centres and caps its own width separately. */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__container > .has-child:nth-last-child( -n + 2 ) > .wp-block-navigation__submenu-container:not( .dsm-mega-menu ) {
left: auto;
right: 0;
}
}
/* ── "Web services" mega menu: 4-column grid, items grouped under sub-headings ── */
@media ( min-width: 64.0625rem ) {
/* Containing block for the mega menu's fixed positioning: the header's
own wide row (logo + nav), which core's default WP "wide" alignment
already centres in the viewport up to --content-max-width. A
`transform` on an ancestor makes it the containing block for
position:fixed descendants too (per spec) — crucially, unlike
position:relative, this is NOT overridden by the trigger 's own
position:relative sitting closer in the tree (fixed positioning
ignores plain position:relative/absolute ancestors entirely and looks
only for one with transform/filter/perspective/will-change), so this
works regardless of core's own positioning on the in between —
no need to fight or override it. It also means the "fixed" menu below
scrolls with this row rather than staying pinned to the viewport,
which is what we want since the header isn't sticky. */
header.wp-block-template-part .wp-block-group.alignwide {
transform: translateZ( 0 );
}
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container.dsm-mega-menu {
display: grid;
/* 1fr columns span the full width of this container (capped at
the page's fixed width below), rather than capping each column's
own width and centring a narrower grid within it. */
grid-template-columns: repeat( 4, minmax( 140px, 1fr ) );
/* Grid's default align-items:stretch would stretch shorter columns (2 items)
to match taller ones (3 items), which — combined with core's flex-grow:1 on
.wp-block-navigation-item__content — inflated their heading's height to
soak up the extra space. align-items:start keeps every column exactly as
tall as its own content, top-aligned in the row. */
align-items: start;
gap: 2rem;
/* Same content width as every other section on the page (see e.g.
.mcb-vlg__inner, .mcb-testimonial__inner): max-width:
--content-max-width, filling up to that on narrower desktop
viewports via width:100%. !important is required: core has its
own hover-state rule — .has-child:not(.open-on-click):hover >
.submenu-container { width: auto; min-width: 200px } — at 5-class
specificity (via :hover and :not()), beating this selector's 4, so
width: auto was winning while actually hovered. */
width: 100% !important;
max-width: var( --content-max-width ) !important;
padding: 1.75rem;
box-sizing: border-box;
/* position:fixed, but its containing block is the header row above
(via that row's transform), not the trigger core would
otherwise use — so this positions relative to the row, not the
individual nav item. top:100% lands it right below the row;
left:50% + translateX(-50%) centres it on the row's own
horizontal centre, which — since the row itself is centred in the
viewport up to --content-max-width — is the centre of the screen. */
position: fixed !important;
top: 100%;
left: 50%;
right: auto;
transform: translateX( -50% );
margin-top: -1.5rem;
/* Belt-and-braces on top of the header's own elevated z-index above —
guarantees this wins even against something else inside the header
that might one day pick up its own z-index. */
z-index: 9999;
}
/* Sub-heading columns: each is its own vertical stack (heading + its items),
overriding the core nav item's default flex-row (icon+label) layout —
without this, the heading and its item list sit side by side instead of
items appearing underneath their sub-heading. */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container.dsm-mega-menu > .wp-block-navigation-item {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
border-bottom: none;
position: static;
}
/* Sub-heading label: dark, bold, title case — reads as a group title, not a menu row.
Uses the primary text colour (not muted) so it meets 4.5:1 contrast at this size. */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container.dsm-mega-menu > .wp-block-navigation-item > .wp-block-navigation-item__content {
display: flex;
align-items: flex-start;
/* Core sets flex-grow:1 on this class (so single-column dropdown rows fill
their width); inside our flex-column layout that let the heading balloon
to soak up any extra height instead of staying at the fixed value below. */
flex-grow: 0;
flex-shrink: 0;
padding: 0 0 0.5rem;
width: 100%;
white-space: normal;
/* Increased from --font-size-sm (14px) — height below is in `em`, so it
scales with this automatically. */
font-size: var( --font-size-base );
line-height: 1.35;
/* Fixed (not min-) height reserves space for a 2-line heading (e.g. "Strategy &
Analytics") even when a column's heading only wraps to 1 line, so every
.wp-block-navigation-item__content in this row — heading and item alike —
is the same height, and the divider/item list below lines up horizontally
instead of the shortest headings pulling their list up early. */
height: calc( 1.35em * 2 + 0.5rem );
font-weight: var( --font-weight-bold );
letter-spacing: 0.05em;
text-transform: capitalize;
color: var( --clr-text-primary );
border-bottom: 1px solid var( --clr-border );
margin-bottom: 0.5rem;
}
/* Sub-heading's own dropdown arrow is redundant — its children render inline below it.
display:none removes it from focus order entirely, since it does nothing here. */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container.dsm-mega-menu > .wp-block-navigation-item .wp-block-navigation-submenu__toggle {
display: none;
}
/* Force each sub-heading's item list to render inline, vertically, as a column —
instead of the default hover-triggered flyout (which needs a second hover to
reveal and would make items unreachable for keyboard/AT users navigating the
mega menu in one pass). */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container.dsm-mega-menu .wp-block-navigation__submenu-container {
position: static !important;
visibility: visible !important;
opacity: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
min-width: 0 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
gap: 0.4rem;
}
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container.dsm-mega-menu .wp-block-navigation__submenu-container > .wp-block-navigation-item {
width: 100%;
border-bottom: none;
}
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container.dsm-mega-menu .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
display: flex;
align-items: flex-start;
/* Reset core's flex-grow:1 (see the sub-heading rule above for why) so this
stays at exactly the height below regardless of surrounding free space. */
flex-grow: 0;
flex-shrink: 0;
/* Every item link is the same fixed height, so rows line up across all 4
columns even where one column has fewer items than another. Halved
from 2.9rem. */
height: 1.45rem;
padding: 0;
/* Doubled from the 0.4rem gap between items in this list, for extra
clearance above each item's text. */
padding-top: 0.8rem;
width: auto;
white-space: nowrap;
/* Increased from --font-size-sm (14px). */
font-size: var( --font-size-base );
/* Increased by 100 from --font-weight-medium (500) back to
--font-weight-semibold (600) — the item's original inherited weight. */
font-weight: var( --font-weight-semibold );
}
/* Visible keyboard-focus ring on every link in the mega menu (heading and item alike),
so Tab users can always see which of the ~14 links currently has focus. */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container.dsm-mega-menu .wp-block-navigation-item__content:focus-visible {
outline: 2px solid var( --clr-brand );
outline-offset: 2px;
}
}
@media ( max-width: 40rem ) {
footer.wp-block-template-part .wp-block-group.alignwide {
padding-inline: 1rem;
}
}
/* ── Navbar: mobile-nav-range styling (phones + tablets — matches the
hamburger nav's own 64rem/64.0625rem breakpoint above) ── */
@media ( max-width: 64rem ) {
header.wp-block-template-part .wp-block-group.alignwide {
padding-inline: 1rem;
}
/* Mobile order: [lang] [phone] [hamburger] — set via HTML order in header.html */
.dsm-call-btn {
display: inline-flex;
}
/* Mobile nav overlay: pad the outer shell for the close button. Top
padding pushes the first item below the close button's own new
position (see the -close rule below) -- its top offset, plus its own
24px icon height, plus 2rem clearance. Core's default padding-top
(calc(2rem + 24px), i.e. clearance + icon height only) assumed the
button sat flush at top:0, so left a -1px gap (first item overlapping
the button) once the button moved down to align with the hamburger.
!important beats core's own un-prefixed rule at equal specificity,
which would otherwise win via source order (core's stylesheet loads
after this one). */
.wp-block-navigation__responsive-container-content {
padding-inline: 1.5rem;
padding-top: calc( var( --wp--preset--spacing--30 ) + ( var( --logo-height ) - 24px ) / 2 + 24px + 2rem ) !important;
}
/* Strip ul padding and gap so items and dividers span 100% */
.wp-block-navigation__responsive-container-content .wp-block-navigation__container {
padding-inline: 0;
gap: 0;
}
/* Position the close button exactly where the hamburger icon it replaces
sat -- both top and right. Right: 1rem matches the header row's own
padding-inline (1rem, set above at this breakpoint), the same edge
the hamburger icon sits flush against; 1.5rem (confirmed via live
measurement) left it 8px further left than the hamburger actually
was. Top: header row padding-top (--wp--preset--spacing--30) plus
half the gap between the row's tallest sibling (the logo,
--logo-height) and this icon's own fixed 24px size, matching how
align-items:center on the header row naturally centres the hamburger
against the logo. Without this, core's own top:0 default pins the
button flush to the very top of the fixed full-screen overlay
instead, well above where the hamburger sat, so it visibly jumps
position when the menu opens. */
.wp-block-navigation__responsive-container-close {
position: absolute !important;
top: calc( var( --wp--preset--spacing--30 ) + ( var( --logo-height ) - 24px ) / 2 ) !important;
right: 1rem !important;
}
/* Full-width items with faint grey dividers */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
width: 100%;
border-bottom: 1px solid var( --clr-border );
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child {
border-top: 1px solid var( --clr-border );
}
/* Force ul and all li items to stretch to full overlay width */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
align-items: stretch !important;
width: 100% !important;
box-sizing: border-box;
}
/* Left-align all nav text */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
text-align: left !important;
justify-content: flex-start;
width: 100%;
box-sizing: border-box;
}
/* 1st-level items: more breathing room */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
padding-block: 1rem;
}
/* Trigger row: link + toggle share one row, with the submenu wrapping to
its own full-width line below (once expanded) — core forces
flex-direction:column here (.is-menu-open :where(...)
.responsive-container-content .wp-block-navigation-item, 4-class
specificity), which stacked the link, toggle, and submenu all
vertically instead of just the submenu sitting below a link+toggle
row. !important needed to beat that specificity. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
flex-direction: row !important;
flex-wrap: wrap !important;
}
/* Items with a toggle (has-child): let the link share the row instead of
claiming the full width — the item__content rule above sets width:100%
for every link, which inside this flex row was squeezing the toggle
button below/out of view instead of sitting beside the link. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
width: auto;
flex: 1 1 auto;
min-width: 0;
}
/* Forces the submenu-container onto its own new line (flex-wrap above),
since nothing else can share a row with a 100%-basis flex item. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
flex-basis: 100%;
}
/* Toggle button: proper touch target (core's own icon is ~0.6em, far
below the ~44px minimum) so it's actually easy to find and tap.
!important is required: core has its own rule — .is-menu-open
:where(...) .responsive-container-content .wp-block-navigation__submenu-icon
{ display: none } — matching this same button via its OTHER class
(.wp-block-navigation__submenu-icon) at 4-class specificity, higher
than this selector's 3, so it was winning and hiding the button
entirely (confirmed via Playwright: computed display was "none"). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
flex-shrink: 0;
display: flex !important;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
width: 1rem;
height: 1rem;
}
/* Divider on the trigger while its submenu is collapsed (nothing else
visible to provide one); suppressed while expanded, where the last
visible child item's own divider takes over instead. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
border-bottom: 1px solid var( --clr-border );
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu:has( > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ) {
border-bottom: none;
}
/* Submenu: strip desktop card appearance and render inline at full width.
Collapsed by default — core already tracks each submenu's own
open/closed state via its toggle button's aria-expanded (independent
per nesting level), this just makes the container's visibility follow
it instead of forcing every nested item to always show flattened. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
position: static !important;
display: none !important;
flex-direction: column;
align-items: stretch !important;
background-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box;
color: inherit !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
display: flex !important;
}
/* Rotate the chevron to show expanded state */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
transition: transform 0.15s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
transform: rotate( 180deg );
}
/* Submenu items: consistent dividers */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
border-bottom: 1px solid var( --clr-border );
border-top: none !important;
}
/* Submenu items: indented, smaller, muted — shows hierarchy */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding-inline-start: 2.5rem;
font-size: var( --font-size-sm );
color: var( --clr-text-muted );
}
}
/* ── "Web services" mega menu on mobile: no custom treatment at all,
same principle as the desktop mega menu above -- the desktop version
doesn't invent its own positioning scheme, it just adds a couple of
properties on top of core's own default dropdown mechanism. On mobile,
".dsm-mega-menu" itself, and each of its category items (Shopify,
WordPress & WooCommerce, Strategy & Analytics, Custom Solutions --
each is its own navigation-submenu block with children of its own),
now get exactly the same generic mobile submenu treatment every other
item on the site already uses: chevron visible, tap it to expand/
collapse that category's own nested links, one level at a time. An
earlier version forced every category's children to show flattened
(with the chevron hidden) to mirror the desktop grid's everything-at-
once layout, and before that, made the top-level popup float via
position: fixed -- removed both: the flattening hid a working,
expected chevron interaction, and the fixed-position popup kept
breaking for the reasons described in this file's git history. ── */
/* ── Audit form wrapper (Website improvement tips page's
[github_table_pages] shortcode) — the raw wp:shortcode block has no
wrapper of its own, so without this it falls back to the theme's
default content width/centring instead of lining up with the
alignfull sections around it (marketing-hero, FAQ), each of which
defines its own .__inner using this exact same
max-width/margin/padding formula. ── */
.mcb-audit-form-wrap {
max-width: var( --content-max-width );
margin: 0 auto;
padding: 0 var( --gutter );
box-sizing: border-box;
}
@media ( max-width: 48rem ) {
.mcb-audit-form-wrap {
padding: 0 1rem;
}
}
/* ── Contact form [dsm_contact_form] ── */
.dsm-contact-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 36rem;
}
.dsm-required-note {
margin: 0;
font-size: var( --font-size-sm );
color: var( --clr-text-muted );
}
.dsm-form-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.dsm-contact-form label {
font-weight: var( --font-weight-medium );
font-size: var( --font-size-sm );
color: var( --clr-text-primary );
}
.dsm-contact-form input,
.dsm-contact-form select,
.dsm-contact-form textarea {
width: 100%;
border: 1px solid var( --clr-border );
border-radius: 4px;
padding: 0.6rem 0.75rem;
font-family: var( --font-family );
font-size: var( --font-size-base );
color: var( --clr-text-primary );
background-color: var( --clr-surface );
box-sizing: border-box;
transition: border-color 0.15s;
}
.dsm-contact-form input:focus,
.dsm-contact-form select:focus,
.dsm-contact-form textarea:focus {
outline: none;
border-color: var( --clr-brand );
box-shadow: 0 0 0 3px rgba( 45, 80, 22, 0.15 );
}
/* Visible error state on invalid fields */
.dsm-contact-form input[aria-invalid="true"],
.dsm-contact-form select[aria-invalid="true"],
.dsm-contact-form textarea[aria-invalid="true"] {
border-color: #b91c1c;
}
.dsm-contact-form input[aria-invalid="true"]:focus,
.dsm-contact-form select[aria-invalid="true"]:focus,
.dsm-contact-form textarea[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px rgba( 185, 28, 28, 0.15 );
}
.dsm-contact-form textarea {
resize: vertical;
min-height: 8rem;
}
.dsm-contact-form button[type="submit"] {
align-self: flex-start;
background-color: var( --clr-brand );
color: var( --clr-text-inverse );
border: none;
border-radius: 4px;
padding: 0.75rem 2rem;
font-family: var( --font-family );
font-size: var( --font-size-base );
font-weight: var( --font-weight-medium );
cursor: pointer;
transition: background-color 0.2s;
}
.dsm-contact-form button[type="submit"]:hover {
background-color: var( --clr-brand-hover );
}
.dsm-form-success {
color: var( --clr-brand );
font-weight: var( --font-weight-medium );
}
.dsm-form-error,
.dsm-field-error {
color: #b91c1c;
font-size: var( --font-size-sm );
}
.dsm-optional-note {
font-weight: var( --font-weight-normal );
color: var( --clr-text-muted );
}
/* ── Checkbox group (e.g. "What do you need help with?") ──
.dsm-contact-form input already sets width:100% for text/select/textarea;
reset checkboxes back to their native inline size so they don't stretch
to fill the row. */
.dsm-contact-form fieldset.dsm-checkbox-group {
border: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
/* Widened from 0.35rem — with 11 stacked checkbox rows, that gap left
less clearance between adjacent click/tap targets than WCAG 2.5.8
(Target Size) recommends. */
gap: 0.75rem;
}
.dsm-checkbox-group legend {
padding: 0;
margin-bottom: 0.5rem;
font-weight: var( --font-weight-medium );
font-size: var( --font-size-sm );
color: var( --clr-text-primary );
}
.dsm-checkbox-option {
display: flex;
align-items: center;
gap: 0.5rem;
/* Grows the clickable label area itself (not just the gap between rows)
so each option is easier to hit accurately, especially on touch. */
padding: 0.25rem 0;
font-weight: var( --font-weight-normal );
cursor: pointer;
}
.dsm-contact-form .dsm-checkbox-option input[type="checkbox"] {
width: auto;
flex-shrink: 0;
accent-color: var( --clr-brand );
}
.dsm-form-field--error .dsm-checkbox-option {
color: #b91c1c;
}
/* ── Radio group (e.g. "Are you migrating from another supplier?") ──
Same layout/spacing as the checkbox group above, just for
input[type="radio"] instead of checkboxes. */
.dsm-contact-form fieldset.dsm-radio-group {
border: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.dsm-radio-group legend {
padding: 0;
margin-bottom: 0.5rem;
font-weight: var( --font-weight-medium );
font-size: var( --font-size-sm );
color: var( --clr-text-primary );
}
.dsm-radio-option {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0;
font-weight: var( --font-weight-normal );
cursor: pointer;
}
.dsm-contact-form .dsm-radio-option input[type="radio"] {
width: auto;
flex-shrink: 0;
accent-color: var( --clr-brand );
}