/**
* WMD Solutions Base Theme - CSS Variables & Base Styles
* Override any variable in your subtheme's css file.
*/
/* ======================================================
GOOGLE FONTS
Libre Franklin — body (matches CorporatePlus D8)
Cinzel — headings (Copperplate-style, free)
Fonts are loaded via +
in html.html.twig, NOT via @import here. @import creates a render-
blocking waterfall (base.css → fonts CSS → font files), which adds
~750-1500ms of blocking time on first paint. in fires
in parallel with the rest of the page.
Subthemes that use different fonts should override html.html.twig
(see lux subtheme for example).
====================================================== */
:root {
/* Colors */
--color-primary: #333333;
--color-secondary: #666666;
--color-accent: #c0392b;
--color-text: #333333;
--color-text-light: #ffffff;
--color-bg: #ffffff;
--color-bg-dark: #111111;
--color-charcoal: #2d2d2d;
/* Header */
--header-bg: #ffffff;
--header-height: 120px;
--header-height-mobile: 70px;
--header-padding-y: 1.5rem;
--header-sticky-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
--header-transparent-color: #ffffff;
--header-transparent-hover: rgba(255, 255, 255, 0.85);
--header-scrolled-color: var(--color-text);
--header-fade-delay: 1000ms;
--header-scroll-bg: rgba(255, 255, 255, 0.75);
--header-scroll-blur: 8px;
/* Nav */
--nav-font-size: 0.78rem;
--nav-letter-spacing: 0.08em;
--nav-hover-bg: rgba(45, 45, 45, 0.7);
--nav-dropdown-bg: rgba(30, 30, 30, 0.88);
--nav-dropdown-blur: 8px;
--nav-dropdown-color: #ffffff;
--nav-dropdown-hover-bg: rgba(255, 255, 255, 0.1);
--nav-link-color: var(--color-text);
--nav-link-active-bg: var(--nav-hover-bg);
/* Drawer */
--drawer-width: 280px;
--drawer-bg: #ffffff;
--drawer-color: #333333;
--drawer-border: rgba(0, 0, 0, 0.08);
--drawer-hover-bg: var(--color-charcoal, #2d2d2d);
--drawer-hover-color: #ffffff;
--drawer-active-bg: var(--color-charcoal, #2d2d2d);
--drawer-active-color: #ffffff;
--drawer-child-bg: rgba(0, 0, 0, 0.04);
--drawer-child-indent: 1.25rem;
--drawer-font-size: 0.85rem;
--drawer-font-weight: 600;
--drawer-letter-spacing: 0.06em;
/* Hero */
--hero-min-height: 400px;
--hero-card-bg: rgba(0, 0, 0, 0.25);
--hero-card-blur: 6px;
--hero-card-padding: 2rem 2.5rem;
--hero-card-radius: 6px;
--hero-content-gap: 1rem;
--hero-content-gap-mobile: 0.75rem;
--hero-content-padding-y: 2rem;
--hero-content-padding-y-mobile: 1.5rem;
--hero-content-padding-x: 0;
/* Content Regions */
--region-content-padding: 2.5rem 0;
/* Side Bars */
--sidebar-block-padding-bottom: 2.5rem;
/* Tabs */
--tabs-bg: #f3f4f4;
--tabs-bg-active: #ffffff;
--tabs-color: #333333;
--tabs-color-active: #0036b1;
--tabs-border: #bbbfbf;
--tabs-border-active: #0036b1;
--tabs-font-size: 0.9rem;
--tabs-padding: 0.4rem 1rem;
--tabs-radius: 3px 3px 0 0;
/* Buttons */
--btn-primary-bg: #c0392b;
--btn-primary-color: #ffffff;
--btn-primary-hover-bg: #a93226;
--btn-primary-border: #c0392b;
--btn-outline-color: #c0392b;
--btn-outline-hover-bg: #c0392b;
--btn-outline-hover-color: #ffffff;
--btn-border-radius: 4px;
--btn-padding: 0.5rem 1.5rem;
--btn-font-size: 0.8rem;
--btn-font-weight: 600;
--btn-letter-spacing: 0.06em;
/* Gradient Overlay */
--overlay-color: #000000;
--overlay-gradient-start: 0.35;
--overlay-gradient-end: 0.05;
--overlay-solid-opacity: 0.3;
/* Footer */
--footer-bg: #111111;
--footer-color: #ffffff;
--footer-bottom-bg: #0d0d0d;
--footer-bottom-color: #999999;
--footer-bottom-padding: 0.75rem 0;
--footer-bottom-font-size: 0.8rem;
/* Logo */
--logo-max-height: 82px;
/* Typography */
--font-heading: 'Cinzel', 'Copperplate Gothic', serif;
--font-body: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
--font-size-base: 16px;
/* Layout */
--section-padding: 60px 0;
--highlighted-padding: 60px 0;
/* Links */
--color-link: #c0392b;
--color-link-hover: #a93226;
--color-link-visited: #c0392b;
--color-link-active: #c0392b;
/* Region heading alignment */
--region-highlighted-heading-align: center;
--region-highlighted-top-heading-align: left;
--region-content-heading-align: left;
--region-sidebar-heading-align: left;
/* Region block spacing */
--region-content-gap: 2rem;
--region-highlighted-gap: 3rem;
--region-highlighted-top-gap: 0;
--region-sidebar-gap: 2rem;
/* Bootstrap overrides */
--bs-primary: var(--color-primary);
--bs-secondary: var(--color-secondary);
/* Bootstrap link color overrides */
--bs-link-color: var(--color-link);
--bs-link-hover-color: var(--color-link-hover);
--bs-link-color-rgb: 192, 57, 43;
--bs-link-hover-color-rgb: 169, 50, 38;
/* Bootstrap button primary overrides */
--bs-btn-bg: var(--btn-primary-bg);
--bs-btn-border-color: var(--btn-primary-border);
--bs-btn-hover-bg: var(--btn-primary-hover-bg);
--bs-btn-hover-border-color: var(--btn-primary-hover-bg);
}
.region-highlighted .block > h2 { text-align: var(--region-highlighted-heading-align); }
.region-highlighted-top .block > h2 { text-align: var(--region-highlighted-top-heading-align); }
.region-content .block > h2 { text-align: var(--region-content-heading-align); }
.region-sidebar-first .block > h2,
.region-sidebar-second .block > h2 { text-align: var(--region-sidebar-heading-align); }
/* ======================================================
REGION BLOCK SPACING
====================================================== */
.region-content > .block + .block { margin-top: var(--region-content-gap); }
.region-highlighted > .block + .block { margin-top: var(--region-highlighted-gap); }
.region-highlighted-top > .block + .block { margin-top: var(--region-highlighted-top-gap); }
.region-sidebar-first > .block + .block,
.region-sidebar-second > .block + .block { margin-top: var(--region-sidebar-gap); }
/* ======================================================
GLOBAL IMAGE SCALING
====================================================== */
img {
max-width: 100%;
height: auto;
}
/* ======================================================
BASE STYLES
====================================================== */
body {
font-family: var(--font-body);
color: var(--color-text);
font-size: var(--font-size-base);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
}
.site-logo img {
height: var(--logo-max-height);
width: auto;
display: block;
}
.region-content {
padding: var(--region-content-padding);
}
.sidebar .block,
.product-sidebar-inner {
padding-bottom: var(--sidebar-block-padding-bottom);
}
/* ======================================================
OVERLAY UTILITIES
====================================================== */
.wmd-overlay-gradient {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--overlay-color) calc(var(--overlay-gradient-start) * 100%), transparent),
color-mix(in srgb, var(--overlay-color) calc(var(--overlay-gradient-end) * 100%), transparent)
);
z-index: 1;
pointer-events: none;
}
.wmd-overlay-solid {
position: absolute;
inset: 0;
background-color: var(--overlay-color);
opacity: var(--overlay-solid-opacity);
z-index: 1;
pointer-events: none;
}
/* ======================================================
BOOTSTRAP / GIN CONFLICT FIX
====================================================== */
.gin--vertical-toolbar .placeholder {
display: unset;
min-height: unset;
vertical-align: unset;
cursor: unset;
background-color: unset;
opacity: unset;
}
/* ======================================================
WMD NODE HERO
Standard page hero for basic_page nodes and subtheme
content types with banner fields.
CSS variables (define in subtheme):
--wmd-hero-min-height-solid: height when no image (default 200px)
--wmd-hero-min-height-image: height when image present (default 480px)
--wmd-hero-overlay-top: overlay start opacity (default 0.15)
--wmd-hero-overlay-bottom: overlay end opacity (default 0.65)
--wmd-hero-title-font: heading font (defaults to --font-heading)
====================================================== */
.wmd-node-hero {
position: relative;
background-color: var(--color-primary, #002E5D);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
min-height: var(--wmd-hero-min-height-solid, 200px);
}
.wmd-node-hero--has-image {
min-height: var(--wmd-hero-min-height-image, 480px);
}
.wmd-node-hero--solid {
align-items: center;
}
.wmd-node-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, var(--wmd-hero-overlay-top, 0.15)) 0%,
rgba(0, 0, 0, var(--wmd-hero-overlay-bottom, 0.65)) 100%
);
}
.wmd-node-hero--solid .wmd-node-hero__overlay {
background: transparent;
}
.wmd-node-hero__content {
position: relative;
z-index: 2;
padding: 2.5rem 0;
}
.wmd-node-hero__title {
font-family: var(--wmd-hero-title-font, var(--font-heading, sans-serif));
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 700;
color: #ffffff;
margin: 0 0 0.5rem;
line-height: 1.1;
}
.wmd-node-hero__subtitle {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.85);
margin: 0;
line-height: 1.6;
max-width: 640px;
font-style: italic;
}