/*
Theme Name: Dygistic Theme (Astra-Child)
Theme URI: https://dygistic.com/
Description: Dygistic brand theme — built on Astra. Slate & Sky Blue palette, Plus Jakarta Sans typography, brand tokens and SVG mark included.
Author: Dylan Grefte
Author URI: https://dygistic.com/
Template: astra
Version: 1.6.0
Text Domain: astra-child
Tags: custom-colors, custom-logo, custom-menu, featured-images, threaded-comments
*/
/* ══════════════════════════════════════════════════════════════════
DYGISTIC · BRAND TOKENS
Single source of truth. Change here → updates everywhere.
══════════════════════════════════════════════════════════════════ */
:root {
/* Primary palette — Slate & Sky Blue */
--dy-slate: #1C2333;
--dy-slate-mid: #2E3F5C;
--dy-slate-ink: #0F1420;
--dy-sky: #4A90B8;
--dy-sky-deep: #3B7A9E;
--dy-sky-soft: #7AB4D6;
--dy-sky-light: #EEF3F8;
--dy-off-white: #F5F7FA;
--dy-white: #FFFFFF;
/* Text & borders */
--dy-ink: #1C2333;
--dy-ink-70: rgba(28,35,51,0.72);
--dy-ink-55: rgba(28,35,51,0.55);
--dy-ink-40: rgba(28,35,51,0.40);
--dy-rule: rgba(28,35,51,0.08);
--dy-rule-strong: rgba(28,35,51,0.14);
/* Typography */
--dy-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
/* Radii & shadows */
--dy-radius: 12px;
--dy-radius-sm: 8px;
--dy-shadow-sm: 0 1px 2px rgba(15,20,32,.04), 0 1px 3px rgba(15,20,32,.06);
--dy-shadow-md: 0 10px 28px rgba(15,20,32,.08);
--dy-shadow-lg: 0 24px 60px rgba(15,20,32,.14);
/* Spacing (8px base) */
--dy-sp-1: 4px;
--dy-sp-2: 8px;
--dy-sp-3: 16px;
--dy-sp-4: 24px;
--dy-sp-5: 32px;
--dy-sp-6: 48px;
--dy-sp-7: 64px;
--dy-sp-8: 96px;
/* Layout */
--dy-max: 1200px;
--dy-pad: clamp(24px, 5vw, 72px);
}
/* ══════════════════════════════════════════════════════════════════
GLOBAL TYPOGRAPHY
Override Astra's defaults with Plus Jakarta Sans + brand scale.
══════════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
body {
font-family: var(--dy-font) !important;
color: var(--dy-ink); /* default text colour — children inherit */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "cv11";
line-height: 1.6;
}
.ast-container,
.entry-content,
.entry-content p {
font-family: var(--dy-font) !important;
line-height: 1.6;
}
/*
Headings inherit their colour on purpose so WP Cover / Group blocks
with their own inline colour (e.g. white-on-slate heroes) keep working.
We only set family, weight and tracking here.
*/
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
font-family: var(--dy-font) !important;
color: inherit;
letter-spacing: -0.02em;
font-weight: 700;
line-height: 1.15;
}
h1, .entry-title { font-size: clamp(32px, 4.4vw, 48px); letter-spacing: -0.025em; line-height: 1.08; }
h2 { font-size: clamp(26px, 3.2vw, 36px); }
h3 { font-size: 22px; }
h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
h5 { font-size: 16px; font-weight: 600; }
h6 { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
/*
Paragraphs inherit colour too. `body { color }` supplies the default
dark-ink tone on light sections; parents with their own colour (Cover
blocks, dark Groups, etc.) pass it down naturally.
*/
p {
color: inherit;
margin-bottom: var(--dy-sp-3);
}
/* Article / main-content prose gets the softer ink-70 colour */
.entry-content p,
.site-main article p {
color: var(--dy-ink-70);
}
a {
color: var(--dy-sky-deep);
text-decoration: none;
transition: color .2s ease;
}
a:hover, a:focus { color: var(--dy-slate-mid); }
/* ══════════════════════════════════════════════════════════════════
NEWFOLD (nfd-*) COMPATIBILITY LAYER
The HostGator / Newfold plugin injects Wonder Block patterns into
pages with a wide utility-class vocabulary: nfd-theme-*, nfd-text-*,
nfd-gap-*, nfd-p-*, nfd-rounded, nfd-container, nfd-btn, etc.
When that plugin is disabled, all those classes become inert and
existing pages fall apart. This section re-defines the essentials
using our own brand tokens so old content keeps rendering cleanly.
Remove this section whenever pages have been migrated off nfd blocks.
══════════════════════════════════════════════════════════════════ */
/* ── Theme variants (background + default text) ──────────────────── */
.nfd-theme-dark,
.is-style-nfd-theme-dark {
--nfd-surface: var(--dy-slate);
--nfd-contrast: var(--dy-white);
--nfd-faded: rgba(255,255,255,0.72);
--nfd-primary: var(--dy-sky-soft);
--nfd-border: rgba(255,255,255,0.10);
background-color: var(--nfd-surface);
color: var(--nfd-contrast);
}
.nfd-theme-darker,
.is-style-nfd-theme-darker {
--nfd-surface: var(--dy-slate-ink);
--nfd-contrast: var(--dy-white);
--nfd-faded: rgba(255,255,255,0.72);
--nfd-primary: var(--dy-sky-soft);
--nfd-border: rgba(255,255,255,0.08);
background-color: var(--nfd-surface);
color: var(--nfd-contrast);
}
.nfd-theme-white,
.is-style-nfd-theme-white {
--nfd-surface: var(--dy-white);
--nfd-contrast: var(--dy-slate);
--nfd-faded: var(--dy-ink-70);
--nfd-primary: var(--dy-sky-deep);
--nfd-border: var(--dy-rule);
background-color: var(--nfd-surface);
color: var(--nfd-contrast);
}
/* nfd-bg-surface uses the theme's surface colour */
.nfd-bg-surface { background-color: var(--nfd-surface, transparent); }
.nfd-bg-subtle { background-color: rgba(255,255,255,0.08); }
/* ── Text utility classes ───────────────────────────────────────── */
.nfd-text-contrast { color: var(--nfd-contrast, var(--dy-slate)); }
.nfd-text-faded { color: var(--nfd-faded, var(--dy-ink-70)); }
.nfd-text-primary { color: var(--nfd-primary, var(--dy-sky-deep)); }
/* Text sizes */
.nfd-text-xs { font-size: 11px; line-height: 1.5; letter-spacing: 0.04em; }
.nfd-text-sm { font-size: 13px; line-height: 1.55; }
.nfd-text-base { font-size: 15px; line-height: 1.6; }
.nfd-text-md { font-size: 17px; line-height: 1.55; }
.nfd-text-lg { font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
.nfd-text-xl { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.nfd-text-2xl { font-size: clamp(32px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -0.022em; font-weight: 700; }
.nfd-text-giga { font-size: clamp(40px, 5.5vw, 72px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; }
.nfd-text-balance { text-wrap: balance; }
/* ── Gap utilities (used on flex / grid wrappers) ───────────────── */
.nfd-gap-xs { gap: var(--dy-sp-2); }
.nfd-gap-sm { gap: 12px; }
.nfd-gap-md { gap: var(--dy-sp-3); }
.nfd-gap-lg { gap: var(--dy-sp-4); }
.nfd-gap-xl { gap: var(--dy-sp-5); }
.nfd-gap-2xl { gap: var(--dy-sp-6); }
.nfd-gap-3xl { gap: var(--dy-sp-7); }
.nfd-gap-4xl { gap: var(--dy-sp-8); }
.nfd-gap-y-2xl { row-gap: var(--dy-sp-6); }
/* ── Padding utilities ──────────────────────────────────────────── */
.nfd-p-xs { padding: var(--dy-sp-2); }
.nfd-p-sm { padding: 12px; }
.nfd-p-md { padding: var(--dy-sp-3); }
.nfd-p-lg { padding: var(--dy-sp-5); }
.nfd-p-xl { padding: var(--dy-sp-6); }
.nfd-p-2xl { padding: var(--dy-sp-7); }
.nfd-pt-lg { padding-top: var(--dy-sp-5); }
.nfd-pt-xl { padding-top: var(--dy-sp-6); }
.nfd-pb-lg { padding-bottom: var(--dy-sp-5); }
.nfd-p-card-md,
.nfd-p-card-lg {
padding: clamp(var(--dy-sp-4), 3vw, var(--dy-sp-5));
}
/* ── Rounded corners ────────────────────────────────────────────── */
.nfd-rounded { border-radius: var(--dy-radius); }
.nfd-rounded-full { border-radius: 999px; }
.nfd-rounded-t-xl { border-top-left-radius: 18px; border-top-right-radius: 18px; }
.nfd-rounded-b-xl { border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
/* ── Shadows & borders ──────────────────────────────────────────── */
.nfd-shadow-xs { box-shadow: var(--dy-shadow-sm); }
.nfd-shadow-md { box-shadow: var(--dy-shadow-md); }
.nfd-border-bg { border: 1px solid var(--nfd-border, var(--dy-rule)); }
/* ── Container (max-width content wrapper) ──────────────────────── */
.nfd-container {
max-width: var(--dy-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--dy-pad);
padding-right: var(--dy-pad);
}
/* ── Grid utilities (simplified — covers common hero layouts) ───── */
.nfd-grid { display: grid; }
.nfd-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.nfd-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.nfd-grid-rows-1 { grid-template-rows: 1fr; }
.nfd-col-start-1 { grid-column-start: 1; }
.nfd-col-start-5 { grid-column-start: 5; }
.nfd-col-start-7 { grid-column-start: 7; }
.nfd-col-end-13 { grid-column-end: 13; }
.nfd-row-start-1 { grid-row-start: 1; }
.nfd-items-center { align-items: center; }
/* ── Responsive order helpers ───────────────────────────────────── */
@media (min-width: 768px) {
.md\:nfd-order-1 { order: 1; }
.md\:nfd-order-2 { order: 2; }
.md\:nfd-order-3 { order: 3; }
}
/* ── Buttons ────────────────────────────────────────────────────── */
.nfd-btn,
.nfd-btn-lg,
.nfd-btn-xl {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--dy-sky);
color: var(--dy-white);
font-weight: 600;
border-radius: var(--dy-radius-sm);
text-decoration: none;
transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.nfd-btn { padding: 10px 20px; font-size: 14px; }
.nfd-btn-lg { padding: 13px 24px; font-size: 15px; }
.nfd-btn-xl { padding: 15px 28px; font-size: 16px; }
.nfd-btn:hover,
.nfd-btn-lg:hover,
.nfd-btn-xl:hover {
background: var(--dy-sky-deep);
box-shadow: 0 8px 24px rgba(74, 144, 184, 0.3);
}
.nfd-btn:active { transform: translateY(1px); }
/* ── Decorative background grid (hero effect) ───────────────────── */
.nfd-bg-effect-grid,
.nfd-bg-effect-grid-2 {
position: relative;
overflow: hidden;
}
.nfd-bg-effect-grid::before,
.nfd-bg-effect-grid-2::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
opacity: 0.7;
z-index: 0;
}
.nfd-bg-effect-grid > *,
.nfd-bg-effect-grid-2 > * { position: relative; z-index: 1; }
/* Light-theme variant of the grid effect: darker lines on white */
.nfd-theme-white .nfd-bg-effect-grid::before,
.nfd-theme-white .nfd-bg-effect-grid-2::before,
.is-style-nfd-theme-white .nfd-bg-effect-grid::before,
.is-style-nfd-theme-white .nfd-bg-effect-grid-2::before {
background-image:
linear-gradient(to right, rgba(28,35,51,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(28,35,51,0.04) 1px, transparent 1px);
}
/* ── Animations (fade-in-bottom) ────────────────────────────────── */
.nfd-wb-animate {
opacity: 0;
transform: translateY(20px);
animation: nfdFadeUp .7s ease forwards;
}
.nfd-wb-fade-in-bottom-short { animation-name: nfdFadeUp; }
.nfd-delay-100 { animation-delay: .1s; }
.nfd-delay-200 { animation-delay: .2s; }
.nfd-delay-300 { animation-delay: .3s; }
.nfd-delay-400 { animation-delay: .4s; }
.nfd-delay-500 { animation-delay: .5s; }
.nfd-delay-600 { animation-delay: .6s; }
@keyframes nfdFadeUp {
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.nfd-wb-animate { opacity: 1; transform: none; animation: none; }
}
/* ══════════════════════════════════════════════════════════════════
DARK-CONTEXT TEXT OVERRIDES
When a block declares a dark background (WP Cover, a slate/ink class,
or any Newfold Wonder Blocks dark theme), every descendant heading /
paragraph / link flips to light automatically. This catches all the
cases where page-builder blocks put dark text on dark backgrounds.
══════════════════════════════════════════════════════════════════ */
/* Root dark contexts — background + default text colour */
.wp-block-cover,
.wp-block-cover-image,
.has-black-background-color,
.has-slate-background-color,
.has-slate-ink-background-color,
.has-slate-mid-background-color,
.dy-bg-slate,
.dy-bg-slate-ink,
.nfd-theme-dark,
.nfd-theme-darker,
.is-style-nfd-theme-dark,
.is-style-nfd-theme-darker {
color: var(--dy-white);
}
/* All descendant headings and paragraphs inherit the dark-context colour */
.wp-block-cover :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,strong,em),
.has-black-background-color :is(h1,h2,h3,h4,h5,h6,p,li),
.has-slate-background-color :is(h1,h2,h3,h4,h5,h6,p,li),
.has-slate-ink-background-color :is(h1,h2,h3,h4,h5,h6,p,li),
.has-slate-mid-background-color :is(h1,h2,h3,h4,h5,h6,p,li),
.dy-bg-slate :is(h1,h2,h3,h4,h5,h6,p,li),
.nfd-theme-dark :is(h1,h2,h3,h4,h5,h6,p,li,strong,em),
.nfd-theme-darker :is(h1,h2,h3,h4,h5,h6,p,li,strong,em),
.is-style-nfd-theme-dark :is(h1,h2,h3,h4,h5,h6,p,li,strong,em),
.is-style-nfd-theme-darker :is(h1,h2,h3,h4,h5,h6,p,li,strong,em) {
color: inherit;
}
/* Newfold utility text colours — explicit mapping so they survive our rules */
.nfd-theme-dark .nfd-text-contrast,
.nfd-theme-darker .nfd-text-contrast,
.is-style-nfd-theme-dark .nfd-text-contrast,
.is-style-nfd-theme-darker .nfd-text-contrast { color: var(--dy-white) !important; }
.nfd-theme-dark .nfd-text-faded,
.nfd-theme-darker .nfd-text-faded,
.is-style-nfd-theme-dark .nfd-text-faded,
.is-style-nfd-theme-darker .nfd-text-faded { color: rgba(255, 255, 255, 0.7) !important; }
.nfd-theme-dark .nfd-text-primary,
.nfd-theme-darker .nfd-text-primary,
.is-style-nfd-theme-dark .nfd-text-primary,
.is-style-nfd-theme-darker .nfd-text-primary { color: var(--dy-sky-soft) !important; }
/* On a white Newfold theme, keep the text readable dark */
.nfd-theme-white .nfd-text-contrast,
.is-style-nfd-theme-white .nfd-text-contrast { color: var(--dy-slate) !important; }
.nfd-theme-white .nfd-text-faded,
.is-style-nfd-theme-white .nfd-text-faded { color: var(--dy-ink-70) !important; }
.nfd-theme-white .nfd-text-primary,
.is-style-nfd-theme-white .nfd-text-primary { color: var(--dy-sky-deep) !important; }
/* Newfold "pricing table" card surface — restyle to match our card grammar */
.is-style-nfd-theme-dark.wp-block-group,
.is-style-nfd-theme-darker.wp-block-group {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.09) !important;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.is-style-nfd-theme-dark.wp-block-group:hover,
.is-style-nfd-theme-darker.wp-block-group:hover {
background: rgba(74, 144, 184, 0.08);
border-color: rgba(74, 144, 184, 0.35) !important;
transform: translateY(-2px);
}
/* Make the big dark hero / section backgrounds use brand slate
(don't override inline background-image on cover blocks) */
.nfd-theme-dark.nfd-bg-surface,
.is-style-nfd-theme-dark.nfd-bg-surface {
background-color: var(--dy-slate) !important;
}
.nfd-theme-darker.nfd-bg-surface,
.is-style-nfd-theme-darker.nfd-bg-surface {
background-color: var(--dy-slate-ink) !important;
}
/* Links inside any dark context → soft sky so they stay readable */
.wp-block-cover a,
.has-black-background-color a,
.has-slate-background-color a,
.has-slate-ink-background-color a,
.has-slate-mid-background-color a,
.dy-bg-slate a,
.dy-bg-slate-ink a,
.nfd-theme-dark a,
.nfd-theme-darker a,
.is-style-nfd-theme-dark a,
.is-style-nfd-theme-darker a {
color: var(--dy-sky-soft);
border-bottom-color: rgba(122,180,214,.35);
}
.wp-block-cover a:hover,
.has-black-background-color a:hover,
.has-slate-background-color a:hover,
.has-slate-ink-background-color a:hover,
.has-slate-mid-background-color a:hover,
.dy-bg-slate a:hover,
.nfd-theme-dark a:hover,
.nfd-theme-darker a:hover { color: var(--dy-white); }
/* Buttons inside dark blocks keep their own (sky) colour — don't let
the dark-context text rules above flip them to inherit */
.wp-block-cover .wp-block-button__link,
.has-slate-background-color .wp-block-button__link,
.has-slate-ink-background-color .wp-block-button__link,
.dy-bg-slate .wp-block-button__link,
.nfd-theme-dark .wp-block-button__link,
.nfd-theme-darker .wp-block-button__link,
.is-style-nfd-theme-dark .wp-block-button__link,
.is-style-nfd-theme-darker .wp-block-button__link {
color: var(--dy-white) !important;
background: var(--dy-sky) !important;
}
/*
Explicit escape hatch — add class="has-light-color" or inline
color:#fff / color:#ffffff on any block and descendants keep that.
*/
.has-light-color, .has-white-color,
[style*="color:#fff"],
[style*="color: #fff"],
[style*="color:#ffffff"],
[style*="color: #ffffff"] {
color: var(--dy-white);
}
.has-light-color *, .has-white-color *,
[style*="color:#fff"] *,
[style*="color: #fff"] *,
[style*="color:#ffffff"] *,
[style*="color: #ffffff"] * {
color: inherit;
}
small, .caption { font-size: 13px; color: var(--dy-ink-55); }
code, pre, kbd {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.92em;
background: var(--dy-off-white);
padding: 2px 6px;
border-radius: 4px;
color: var(--dy-slate-ink);
}
/* ══════════════════════════════════════════════════════════════════
SITE HEADER / NAV · Dark, sticky, glassy — matches homepage v3.
══════════════════════════════════════════════════════════════════ */
.site-header,
.ast-primary-header-bar,
header.site-header {
background: rgba(15, 20, 32, 0.88) !important;
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.site-title,
.site-title a,
.ast-site-identity .site-title a {
color: var(--dy-white) !important;
font-weight: 800;
letter-spacing: -0.03em;
text-transform: lowercase;
}
/* TOP-LEVEL menu items only (scoped with direct-child selector) */
.main-header-menu > .menu-item > a,
.main-navigation .menu > .menu-item > a,
.ast-builder-menu .main-header-menu > li > a,
#ast-hf-menu-1 > .menu-item > a {
color: rgba(255, 255, 255, 0.7) !important;
font-weight: 500;
font-size: 14px;
transition: color .2s ease;
}
.main-header-menu > .menu-item > a:hover,
.main-header-menu > .menu-item.current-menu-item > a,
.main-navigation .menu > .menu-item > a:hover,
.ast-builder-menu .main-header-menu > li > a:hover {
color: var(--dy-white) !important;
}
/* SUB-MENU items: dropdowns have a light background, so links must be dark */
.main-header-menu .sub-menu,
.main-header-menu ul.sub-menu,
.ast-desktop .main-header-menu .sub-menu,
.main-header-menu .astra-megamenu {
background: var(--dy-white) !important;
border: 1px solid var(--dy-rule) !important;
border-radius: var(--dy-radius-sm) !important;
box-shadow: var(--dy-shadow-md) !important;
padding: 6px !important;
}
.main-header-menu .sub-menu .menu-item > a,
.main-header-menu ul.sub-menu li a,
.ast-desktop .main-header-menu .sub-menu a {
color: var(--dy-slate) !important;
font-weight: 500 !important;
font-size: 13.5px !important;
padding: 9px 14px !important;
border-radius: 6px !important;
background: transparent !important;
transition: background .15s ease, color .15s ease;
}
.main-header-menu .sub-menu .menu-item > a:hover,
.main-header-menu .sub-menu .menu-item > a:focus,
.main-header-menu .sub-menu .current-menu-item > a {
color: var(--dy-sky-deep) !important;
background: var(--dy-sky-light) !important;
}
/* Sub-menu arrow / chevron */
.main-header-menu .sub-menu .ast-submenu-expanded .dropdown-menu-toggle {
color: var(--dy-ink-55) !important;
}
/* ══════════════════════════════════════════════════════════════════
MOBILE NAVIGATION (Astra burger + offscreen drawer)
Astra's mobile header swaps to a drawer on screens < mobile-header
breakpoint. Below is the full restyle so it matches the dark brand
and actually looks like something Dylan designed — not Astra's grey
default.
══════════════════════════════════════════════════════════════════ */
/* ── Burger icon (closed state, dark header) ───────────────────── */
.ast-mobile-menu-buttons-minimal,
.ast-mobile-menu-trigger-minimal,
.menu-toggle,
.main-header-bar .menu-toggle {
background: transparent !important;
color: var(--dy-white) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: var(--dy-radius-sm) !important;
padding: 8px 10px !important;
transition: background .2s ease, border-color .2s ease;
}
.ast-mobile-menu-buttons-minimal:hover,
.menu-toggle:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.3) !important;
}
.menu-toggle .menu-toggle-icon,
.ast-mobile-menu-buttons-minimal svg,
.menu-toggle svg {
fill: var(--dy-white) !important;
color: var(--dy-white) !important;
}
/* ── Open-drawer body state ─────────────────────────────────────── */
body.ast-mobile-inline-nav-open,
body.ast-header-break-point.ast-mobile-menu-buttons-fill {
overflow: hidden;
}
/* ── The drawer itself (offscreen) ──────────────────────────────── */
.ast-mobile-header-wrap .main-header-bar-navigation,
#ast-mobile-header,
.ast-desktop .main-header-bar-navigation.toggle-on,
.main-header-bar-navigation.toggle-on,
.main-header-bar-navigation {
background: var(--dy-slate-ink) !important;
color: var(--dy-white);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* ── Mobile menu list ──────────────────────────────────────────── */
.ast-mobile-popup-content,
.main-header-bar-navigation.toggle-on .main-header-menu,
.ast-builder-menu-mobile .main-header-menu {
background: var(--dy-slate-ink) !important;
padding: 8px 0 !important;
}
.ast-mobile-popup-content .menu-item,
.main-header-bar-navigation.toggle-on .menu-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.ast-mobile-popup-content .menu-item:last-child,
.main-header-bar-navigation.toggle-on .menu-item:last-child {
border-bottom: none !important;
}
/* Mobile top-level menu links */
.ast-mobile-popup-content .menu-item > a,
.main-header-bar-navigation.toggle-on .menu-item > a,
#ast-mobile-header .main-header-menu .menu-item > a {
color: rgba(255, 255, 255, 0.85) !important;
font-weight: 500 !important;
font-size: 15px !important;
padding: 16px 24px !important;
background: transparent !important;
transition: background .15s ease, color .15s ease;
}
.ast-mobile-popup-content .menu-item > a:hover,
.ast-mobile-popup-content .menu-item.current-menu-item > a,
.main-header-bar-navigation.toggle-on .menu-item > a:hover {
color: var(--dy-white) !important;
background: rgba(74, 144, 184, 0.14) !important;
}
/* Mobile SUB-menu LEVEL 2 (indented 1 step, subtle darker bg) */
.ast-mobile-popup-content .sub-menu,
.main-header-bar-navigation.toggle-on .sub-menu,
#ast-mobile-header .sub-menu {
background: rgba(0, 0, 0, 0.28) !important;
padding: 0 !important;
border: none !important;
border-left: 3px solid rgba(74, 144, 184, 0.35) !important;
box-shadow: none !important;
border-radius: 0 !important;
margin-left: 16px !important;
}
.ast-mobile-popup-content .sub-menu .menu-item > a,
.main-header-bar-navigation.toggle-on .sub-menu .menu-item > a {
color: rgba(255, 255, 255, 0.72) !important;
font-size: 14px !important;
font-weight: 500 !important;
padding: 12px 24px 12px 36px !important;
background: transparent !important;
position: relative !important;
}
/* Level 2 — small dot bullet on the left for visual anchor */
.ast-mobile-popup-content .sub-menu > .menu-item > a::before,
.main-header-bar-navigation.toggle-on .sub-menu > .menu-item > a::before {
content: "";
position: absolute;
left: 20px;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dy-sky);
transform: translateY(-50%);
opacity: 0.85;
}
.ast-mobile-popup-content .sub-menu .menu-item > a:hover,
.main-header-bar-navigation.toggle-on .sub-menu .menu-item > a:hover {
color: var(--dy-sky-soft) !important;
background: rgba(74, 144, 184, 0.12) !important;
}
/* Mobile SUB-menu LEVEL 3 (deeper indent, smaller type, dash bullet) */
.ast-mobile-popup-content .sub-menu .sub-menu,
.main-header-bar-navigation.toggle-on .sub-menu .sub-menu,
#ast-mobile-header .sub-menu .sub-menu {
background: rgba(0, 0, 0, 0.42) !important;
border-left: 2px solid rgba(74, 144, 184, 0.22) !important;
margin-left: 20px !important;
}
.ast-mobile-popup-content .sub-menu .sub-menu .menu-item > a,
.main-header-bar-navigation.toggle-on .sub-menu .sub-menu .menu-item > a {
color: rgba(255, 255, 255, 0.55) !important;
font-size: 13px !important;
font-weight: 400 !important;
padding: 10px 24px 10px 44px !important;
letter-spacing: 0.005em !important;
}
/* Level 3 — dash bullet instead of dot, smaller, lighter */
.ast-mobile-popup-content .sub-menu .sub-menu > .menu-item > a::before,
.main-header-bar-navigation.toggle-on .sub-menu .sub-menu > .menu-item > a::before {
content: "" !important;
position: absolute !important;
left: 24px !important;
top: 50% !important;
width: 10px !important;
height: 1px !important;
border-radius: 0 !important;
background: rgba(122, 180, 214, 0.5) !important;
transform: translateY(-50%) !important;
opacity: 1 !important;
}
.ast-mobile-popup-content .sub-menu .sub-menu .menu-item > a:hover,
.main-header-bar-navigation.toggle-on .sub-menu .sub-menu .menu-item > a:hover {
color: var(--dy-white) !important;
background: rgba(74, 144, 184, 0.08) !important;
}
/* ── Submenu expand-chevrons (the little arrows to open children) ── */
.ast-mobile-popup-content .ast-menu-toggle,
.main-header-bar-navigation.toggle-on .ast-menu-toggle,
.menu-item .ast-menu-toggle {
color: rgba(255, 255, 255, 0.55) !important;
background: transparent !important;
width: 44px;
height: 44px;
}
.ast-mobile-popup-content .ast-menu-toggle:hover {
color: var(--dy-white) !important;
}
/* ── Close-button on popup-style mobile header ─────────────────── */
.menu-toggle-close,
.ast-mobile-popup-close,
.ast-mobile-popup-header .close-btn {
background: transparent !important;
color: var(--dy-white) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: var(--dy-radius-sm) !important;
padding: 8px !important;
}
/* ── Popup overlay (dimmed backdrop) ────────────────────────────── */
.ast-mobile-popup-drawer,
.ast-mobile-popup-overlay {
background: var(--dy-slate-ink) !important;
}
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
background: var(--dy-slate-ink) !important;
}
/* ── Mobile CTA button inside the drawer, if present ────────────── */
.ast-mobile-popup-content .ast-builder-button-1 .ast-custom-button,
.ast-mobile-popup-content .wp-block-button__link,
.main-header-bar-navigation.toggle-on .ast-custom-button {
background: var(--dy-sky) !important;
color: var(--dy-white) !important;
margin: 16px 24px !important;
padding: 12px 20px !important;
border-radius: var(--dy-radius-sm) !important;
display: inline-block !important;
}
/* ── TranslatePress language switcher in mobile drawer ──────────── */
.ast-mobile-popup-content .trp-language-switcher,
.main-header-bar-navigation.toggle-on .trp-language-switcher {
margin: 14px 24px !important;
}
/* ── Accessibility: focus ring on keyboard navigation ──────────── */
.ast-mobile-popup-content a:focus-visible,
.main-header-bar-navigation.toggle-on a:focus-visible {
outline: 2px solid var(--dy-sky);
outline-offset: -2px;
background: rgba(74, 144, 184, 0.18) !important;
}
/* Primary header button (e.g. "Get in touch") */
.ast-header-button-1 .ast-custom-button,
.header-button .ast-custom-button {
background: var(--dy-sky) !important;
color: var(--dy-white) !important;
border: none !important;
padding: 10px 20px !important;
border-radius: 8px !important;
font-weight: 600 !important;
transition: background .2s ease, box-shadow .2s ease;
}
.ast-header-button-1 .ast-custom-button:hover {
background: var(--dy-sky-deep) !important;
box-shadow: 0 8px 24px rgba(74,144,184,.35);
}
/* Mobile burger */
.ast-mobile-menu-buttons-minimal,
.menu-toggle,
.ast-mobile-menu-trigger-minimal {
color: var(--dy-white) !important;
}
/* ══════════════════════════════════════════════════════════════════
BUTTONS
══════════════════════════════════════════════════════════════════ */
.wp-block-button__link,
.button,
button,
input[type="submit"],
input[type="button"],
.ast-button {
font-family: var(--dy-font);
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.005em;
padding: 13px 24px !important;
border-radius: var(--dy-radius-sm) !important;
background: var(--dy-sky) !important;
color: var(--dy-white) !important;
border: 1px solid transparent;
cursor: pointer;
transition: background .2s, box-shadow .2s, transform .15s;
}
.wp-block-button__link:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.ast-button:hover {
background: var(--dy-sky-deep) !important;
box-shadow: 0 8px 24px rgba(74,144,184,.3);
}
.wp-block-button__link:active,
.button:active { transform: translateY(1px); }
/* Outline / secondary button */
.wp-block-button.is-style-outline .wp-block-button__link,
.button.btn-outline {
background: transparent !important;
color: var(--dy-slate) !important;
border: 1px solid var(--dy-rule-strong) !important;
box-shadow: none !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background: var(--dy-off-white) !important;
}
/* Dark button variant */
.button.btn-dark {
background: var(--dy-slate) !important;
color: var(--dy-white) !important;
}
.button.btn-dark:hover { background: var(--dy-slate-ink) !important; }
/* ══════════════════════════════════════════════════════════════════
FORMS
══════════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
font-family: var(--dy-font);
font-size: 14.5px;
color: var(--dy-slate);
background: var(--dy-white);
border: 1px solid var(--dy-rule-strong);
border-radius: var(--dy-radius-sm);
padding: 12px 14px;
transition: border-color .2s, box-shadow .2s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--dy-sky);
box-shadow: 0 0 0 4px rgba(74, 144, 184, 0.14);
}
label {
font-size: 13px;
font-weight: 600;
color: var(--dy-ink-70);
display: block;
margin-bottom: 6px;
}
/* ══════════════════════════════════════════════════════════════════
CONTENT · Blog posts, entry content
══════════════════════════════════════════════════════════════════ */
.entry-content > * + * { margin-top: var(--dy-sp-3); }
.entry-content h2,
.entry-content h3 {
margin-top: var(--dy-sp-6);
margin-bottom: var(--dy-sp-3);
}
.entry-content blockquote {
border-left: 3px solid var(--dy-sky);
padding: var(--dy-sp-3) var(--dy-sp-4);
background: var(--dy-sky-light);
border-radius: 0 var(--dy-radius-sm) var(--dy-radius-sm) 0;
margin: var(--dy-sp-5) 0;
font-style: normal;
color: var(--dy-slate);
}
.entry-content img {
border-radius: var(--dy-radius);
box-shadow: var(--dy-shadow-sm);
}
.entry-content ul,
.entry-content ol { padding-left: var(--dy-sp-4); }
.entry-content li { margin-bottom: var(--dy-sp-2); color: var(--dy-ink-70); }
/* ══════════════════════════════════════════════════════════════════
UTILITY CLASSES — use via Gutenberg block "Advanced > CSS class"
══════════════════════════════════════════════════════════════════ */
.dy-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dy-sky-deep);
margin-bottom: var(--dy-sp-3);
}
.dy-eyebrow::before {
content: "";
width: 20px;
height: 1px;
background: var(--dy-sky);
display: block;
}
.dy-section { padding: var(--dy-sp-8) 0; }
.dy-section-sm { padding: var(--dy-sp-7) 0; }
.dy-bg-off { background: var(--dy-off-white); }
.dy-bg-sky-light { background: var(--dy-sky-light); }
.dy-bg-slate { background: var(--dy-slate); color: var(--dy-white); }
.dy-bg-slate h1, .dy-bg-slate h2, .dy-bg-slate h3, .dy-bg-slate h4 { color: var(--dy-white); }
.dy-bg-slate p { color: rgba(255,255,255,0.7); }
.dy-bg-slate a { color: var(--dy-sky-soft); }
.dy-card {
padding: var(--dy-sp-5);
border: 1px solid var(--dy-rule);
border-radius: var(--dy-radius);
background: var(--dy-white);
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.dy-card:hover {
transform: translateY(-3px);
box-shadow: var(--dy-shadow-md);
border-color: rgba(74,144,184,0.3);
}
.dy-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
background: var(--dy-sky-light);
color: var(--dy-sky-deep);
}
/* Selection */
::selection { background: var(--dy-sky); color: var(--dy-white); }
/* ══════════════════════════════════════════════════════════════════
SUBTOPIC CARDS
Used in blog articles and content pages to present a small
"header + body" unit. Migrated from Customizer Additional CSS
and rebuilt on brand tokens.
Base usage:
Grid wrapper (auto responsive 1–3 col):
Modifier classes:
.subtopic--accent left-border in Sky Blue
.subtopic--numbered auto-counter "01, 02, 03…" in the corner
.subtopic--italic keep the old italic body style (if you
really want it back on a specific block)
══════════════════════════════════════════════════════════════════ */
.subtopic {
background: var(--dy-off-white);
border: 1px solid var(--dy-rule);
border-radius: var(--dy-radius);
padding: var(--dy-sp-4);
box-shadow: var(--dy-shadow-sm);
margin-bottom: var(--dy-sp-4);
display: flex;
flex-direction: column;
gap: var(--dy-sp-2);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
position: relative;
}
.subtopic:hover {
transform: translateY(-3px);
box-shadow: var(--dy-shadow-md);
border-color: rgba(74, 144, 184, 0.28);
}
.subtopic h3 {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--dy-sky-deep);
margin: 0;
}
.subtopic p {
font-size: 15.5px;
line-height: 1.65;
color: var(--dy-ink-70);
margin: 0;
font-style: normal; /* italic looked brittle on smaller screens — killed */
}
.subtopic a {
color: var(--dy-sky-deep);
text-decoration: none;
border-bottom: 1px solid rgba(74,144,184,0.35);
transition: border-color .15s;
}
.subtopic a:hover { border-bottom-color: var(--dy-sky-deep); }
/* Grid wrapper: drop several .subtopic elements inside, get an auto grid */
.subtopic-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--dy-sp-3);
margin: var(--dy-sp-5) 0;
}
.subtopic-grid .subtopic {
margin-bottom: 0; /* grid handles spacing */
}
/* Accent variant — left border in Sky, subtle emphasis */
.subtopic--accent {
border-left: 3px solid var(--dy-sky);
padding-left: calc(var(--dy-sp-4) - 3px);
}
/* Numbered variant — auto counter 01, 02, 03 in the top-right corner.
Put the counter-reset on the parent:
*/
.subtopic-grid { counter-reset: subt; }
.subtopic--numbered { counter-increment: subt; }
.subtopic--numbered::before {
content: counter(subt, decimal-leading-zero);
position: absolute;
top: var(--dy-sp-3);
right: var(--dy-sp-3);
font-family: var(--dy-font);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--dy-ink-40);
}
/* Legacy italic body (opt-in) — for content authors who really want
the old Customizer look on a specific card. */
.subtopic--italic p { font-style: italic; }
/* Responsive — fine-tune below 768px */
@media (max-width: 768px) {
.subtopic { padding: var(--dy-sp-3); }
.subtopic h3 { font-size: 17px; }
.subtopic p { font-size: 14.5px; line-height: 1.55; }
.subtopic-grid { gap: var(--dy-sp-2); }
}
/* ══════════════════════════════════════════════════════════════════
FOOTER
Astra 3+ Header & Footer Builder (HFB) generates specific wrap
classes with inline styles that beat generic .site-footer selectors.
The rules below target each row explicitly so dark bg + light text
always wins — regardless of the colours stored in astra-settings.
══════════════════════════════════════════════════════════════════ */
/* All three footer rows — slate backgrounds */
.site-footer,
.ast-small-footer,
footer.site-footer,
.site-above-footer-wrap,
.site-above-footer-wrap[data-section],
.site-primary-footer-wrap,
.site-primary-footer-wrap[data-section],
.site-below-footer-wrap,
.site-below-footer-wrap[data-section],
.footer-widget-area[data-section] {
background-color: var(--dy-slate-ink) !important;
color: rgba(255, 255, 255, 0.6) !important;
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
/* Slightly lighter slate for the ABOVE-footer row so it reads as a
distinct section (the "columns" row) */
.site-primary-footer-wrap,
.site-primary-footer-wrap[data-section] {
background-color: var(--dy-slate) !important;
}
/* Footer text defaults */
.site-footer p,
.site-footer li,
.site-footer span,
.site-above-footer-wrap p,
.site-above-footer-wrap li,
.site-primary-footer-wrap p,
.site-primary-footer-wrap li,
.site-below-footer-wrap p,
.site-below-footer-wrap li,
.footer-widget-area p,
.footer-widget-area li {
color: rgba(255, 255, 255, 0.6) !important;
}
/* Headings / widget titles */
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6,
.site-footer .widget-title,
.site-above-footer-wrap .widget-title,
.site-primary-footer-wrap .widget-title,
.site-below-footer-wrap .widget-title,
.footer-widget-area .widget-title {
color: var(--dy-white) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
margin-bottom: var(--dy-sp-3) !important;
}
/* All footer links */
.site-footer a,
.site-above-footer-wrap a,
.site-primary-footer-wrap a,
.site-below-footer-wrap a,
.footer-widget-area a,
.ast-footer-copyright a {
color: rgba(255, 255, 255, 0.6) !important;
text-decoration: none !important;
transition: color .2s ease;
}
.site-footer a:hover,
.site-above-footer-wrap a:hover,
.site-primary-footer-wrap a:hover,
.site-below-footer-wrap a:hover,
.footer-widget-area a:hover,
.ast-footer-copyright a:hover {
color: var(--dy-white) !important;
}
/* Copyright row text */
.ast-footer-copyright,
.site-below-footer-wrap .ast-builder-html-element {
color: rgba(255, 255, 255, 0.45) !important;
font-size: 12.5px !important;
}
/* Menu widgets inside footer */
.footer-widget-area .menu li a,
.site-primary-footer-wrap .menu li a {
padding: 6px 0 !important;
display: inline-block;
border: none !important;
}
/* Search widget in footer (if any) */
.site-footer input[type="search"],
.footer-widget-area input[type="search"] {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: var(--dy-white) !important;
}
.site-footer input[type="search"]::placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
/* ══════════════════════════════════════════════════════════════════
RESPONSIVE ADJUSTMENTS
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
h1, .entry-title { font-size: 32px; }
h2 { font-size: 26px; }
:root { --dy-sp-8: 64px; --dy-sp-7: 48px; }
}
/* ══════════════════════════════════════════════════════════════════
ACCESSIBILITY
══════════════════════════════════════════════════════════════════ */
:focus-visible {
outline: 2px solid var(--dy-sky);
outline-offset: 2px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}