/* ==========================================================================
CD Construction Group — site.css
Everything theme.json cannot express: component layout, motifs, header/nav,
motion, print. Colours/fonts/spacing always come from theme.json presets
(--wp--preset--*) so editors and the cdcg-core plugin share one system.
Contents
01 Tokens 10 Hero sections
02 Base 11 Section patterns
03 Context (dark/light) 12 Footer + mobile action bar
04 Typography 13 Project case study
05 Block styles 14 Portfolio, search, index, 404
06 Buttons & links 15 Image-slot placeholders
07 Header 16 Motion (reveal, view transitions)
08 Navigation 17 Reduced motion
09 Mobile menu 18 Print
========================================================================== */
/* 01 — Tokens ------------------------------------------------------------- */
:root {
--cdcg-radius: 4px;
--cdcg-radius-lg: 10px;
--cdcg-shadow: 0 1px 2px rgba(11, 11, 12, 0.06), 0 18px 40px -22px rgba(11, 11, 12, 0.35);
--cdcg-shadow-lift: 0 2px 4px rgba(11, 11, 12, 0.08), 0 30px 60px -28px rgba(11, 11, 12, 0.45);
--cdcg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--cdcg-header-h: 72px;
--cdcg-focus: 0 0 0 3px var(--wp--preset--color--orange, #fb6e00);
--cdcg-gutter: var(--wp--style--root--padding-left, clamp(1.25rem, 4vw, 3rem));
--cdcg-bar-h: 0px;
/* Context-aware accents (flipped for dark surfaces in §03). */
--cdcg-accent: var(--wp--preset--color--orange-ink, #b84a00);
--cdcg-focus-color: var(--wp--preset--color--orange-ink, #b84a00);
--cdcg-rule: var(--wp--preset--color--line, #e2ded6);
--cdcg-muted: var(--wp--preset--color--muted, #55565c);
--cdcg-grid-line: rgba(255, 255, 255, 0.04);
--cdcg-blueprint:
linear-gradient(var(--cdcg-grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--cdcg-grid-line) 1px, transparent 1px);
/* Inline SVG icons (used as CSS masks so they take currentColor / orange). */
--cdcg-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
--cdcg-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
--cdcg-i-arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E");
--cdcg-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
--cdcg-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
--cdcg-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
--cdcg-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
--cdcg-i-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E");
--cdcg-i-status: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
--cdcg-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
--cdcg-i-experience: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18.5h20M4.5 18.5a7.5 7.5 0 0 1 15 0M10 11V7.2a2 2 0 0 1 4 0V11M7.5 13.2V12M16.5 13.2V12'/%3E%3C/svg%3E");
--cdcg-i-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='16' width='11' height='4' rx='2'/%3E%3Cpath d='M3.5 16v-4h5.5l1.8 4M5 12V9.5h3.5l.5 2.5M10.5 12l4-6.5 4.2 2.6M18.7 8.1l1.3 4.9M17.5 13h4.5l-1.6 3.2h-2.4z'/%3E%3C/svg%3E");
--cdcg-i-buildings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 21h21M3 21V11.5l5.5-4.5 5.5 4.5M14 21V3.5h7V21M6.5 21v-4.5h4V21M17 7.5h1.5M17 11.5h1.5M17 15.5h1.5'/%3E%3C/svg%3E");
--cdcg-i-network: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.5'/%3E%3Ccircle cx='5' cy='18' r='2.5'/%3E%3Ccircle cx='19' cy='18' r='2.5'/%3E%3Cpath d='M10.8 7.2l-4.6 8.4M13.2 7.2l4.6 8.4M7.5 18h9'/%3E%3C/svg%3E");
--cdcg-i-communication: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.5a8.5 8.5 0 0 1-12.4 7.5L3.5 20.5l1.4-4.3A8.5 8.5 0 1 1 20.5 11.5z'/%3E%3Cpath d='M8.5 10h7M8.5 13.5h4.5'/%3E%3C/svg%3E");
--cdcg-i-quality: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l8 3v5.7c0 4.6-3.4 8.4-8 9.7-4.6-1.3-8-5.1-8-9.7V5.8z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}
@media (min-width: 1024px) {
:root {
--cdcg-header-h: 88px;
}
}
/* 02 — Base --------------------------------------------------------------- */
html {
scroll-padding-top: calc(var(--cdcg-header-h) + 1rem);
scroll-padding-bottom: calc(var(--cdcg-bar-h) + 1rem);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
interpolate-size: allow-keywords;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Safety net against horizontal scroll from bleed elements; `clip` keeps sticky working. */
.wp-site-blocks {
overflow-x: clip;
}
/* Template-level stacking: sections butt up against each other (no blockGap seams). */
.wp-site-blocks > *,
.cdcg-main > *,
.cdcg-main > .wp-block-template-part > *,
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + * {
margin-block-start: 0;
margin-block-end: 0;
}
::selection {
background: var(--wp--preset--color--orange);
color: var(--wp--preset--color--ink);
}
img,
svg,
video {
max-width: 100%;
height: auto;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--cdcg-focus-color);
outline-offset: 3px;
border-radius: 2px;
}
/* Skip link (core prints it for block themes) — on-brand and above everything. */
body .skip-link.screen-reader-text:focus {
background: var(--wp--preset--color--orange);
color: var(--wp--preset--color--ink);
clip-path: none;
font-family: var(--wp--preset--font-family--display);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.95rem 1.4rem;
border-radius: var(--cdcg-radius);
top: 0.75rem;
left: 0.75rem;
z-index: 100000;
box-shadow: 0 0 0 3px var(--wp--preset--color--ink);
}
.screen-reader-text:not(:focus) {
clip-path: inset(50%);
}
/* 03 — Context: dark & light surfaces ---------------------------------- */
:where(
.is-style-section-dark,
.is-style-card-dark,
.wp-block-cover:not(.is-light),
.has-ink-background-color,
.has-char-background-color,
.has-char-2-background-color,
.cdcg-header,
.cdcg-footer,
.cdcg-action-bar
) {
--cdcg-accent: var(--wp--preset--color--orange);
--cdcg-focus-color: var(--wp--preset--color--orange);
--cdcg-rule: var(--wp--preset--color--line-dark);
--cdcg-muted: var(--wp--preset--color--muted-on-dark);
}
:where(
.is-style-section-light,
.is-style-card,
.has-paper-background-color,
.has-concrete-background-color
) {
--cdcg-accent: var(--wp--preset--color--orange-ink);
--cdcg-focus-color: var(--wp--preset--color--orange-ink);
--cdcg-rule: var(--wp--preset--color--line);
--cdcg-muted: var(--wp--preset--color--muted);
}
/* Text links on dark surfaces are orange (7.3:1 on ink). */
:is(
.is-style-section-dark,
.is-style-card-dark,
.wp-block-cover:not(.is-light),
.has-ink-background-color,
.has-char-background-color
) a:where(:not(.wp-element-button)) {
color: var(--wp--preset--color--orange);
}
:is(
.is-style-section-dark,
.is-style-card-dark,
.wp-block-cover:not(.is-light),
.has-ink-background-color,
.has-char-background-color
) a:where(:not(.wp-element-button)):hover {
color: var(--wp--preset--color--orange-hover);
}
/* Blueprint grid on dark sections — faint, fading out from the top. */
.wp-block-group.is-style-section-dark,
.cdcg-footer {
position: relative;
isolation: isolate;
}
.wp-block-group.is-style-section-dark::before,
.cdcg-footer::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: var(--cdcg-blueprint);
background-size: 40px 40px;
background-position: -1px -1px;
-webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
}
/* 04 — Typography --------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
overflow-wrap: break-word;
}
p,
li,
dd {
text-wrap: pretty;
}
/* Hyphenate only where a long word would otherwise overflow (narrow phones). */
@media (max-width: 480px) {
h1,
h2,
.is-style-display {
hyphens: auto;
-webkit-hyphens: auto;
}
}
strong,
b {
font-weight: 700;
}
mark.has-inline-color {
background: transparent;
}
/* Heading inline highlight keeps a hairline of breathing room on italic display type. */
.is-style-display mark {
padding-right: 0.04em;
}
.is-style-display,
.wp-block-post-title.is-style-display {
font-family: var(--wp--preset--font-family--display);
font-weight: 800;
font-style: italic;
text-transform: uppercase;
line-height: 0.88;
letter-spacing: -0.01em;
}
/* 05 — Block styles (SPEC §12.2) ----------------------------------------- */
/* Eyebrow: condensed label with a two-bar "speed" ornament. */
.is-style-eyebrow {
display: flex;
align-items: center;
gap: 0.85em;
color: var(--cdcg-accent);
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
font-size: 0.9375rem;
letter-spacing: 0.16em;
line-height: 1.3;
text-transform: uppercase;
}
.is-style-eyebrow::before {
content: "";
flex: none;
width: 1.9em;
height: 0.62em;
background:
linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
linear-gradient(currentColor, currentColor) 0 100% / 68% 2px no-repeat;
transform: skewX(-24deg);
}
.is-style-eyebrow.has-text-align-center {
justify-content: center;
}
.is-style-eyebrow a {
color: inherit;
text-decoration: none;
}
/* Lead paragraph. */
.is-style-lead {
font-size: var(--wp--preset--font-size--large);
line-height: 1.5;
max-width: 62ch;
}
:where(.is-style-section-dark, .wp-block-cover:not(.is-light), .has-ink-background-color) .is-style-lead {
color: rgba(245, 245, 244, 0.86);
}
/* Separator: speed bars. */
.wp-block-separator.is-style-speed-bars {
border: 0 !important;
width: 92px;
max-width: 92px;
height: 12px;
opacity: 1;
background:
linear-gradient(var(--wp--preset--color--orange), var(--wp--preset--color--orange)) 0 0 / 100% 4px no-repeat,
linear-gradient(var(--wp--preset--color--orange), var(--wp--preset--color--orange)) 14px 100% / 64% 4px no-repeat;
transform: skewX(-24deg);
transform-origin: left center;
margin-left: 0 !important;
margin-right: auto !important;
}
.wp-block-separator.is-style-speed-bars.aligncenter,
.has-text-align-center > .wp-block-separator.is-style-speed-bars {
margin-left: auto !important;
}
/* Group: cards. */
.wp-block-group.is-style-card,
.wp-block-group.is-style-card-dark {
position: relative;
}
/* A card that is a column's only child fills the column, so every card in a row ends on
the same line; a trailing link or button row is pinned to the card's bottom edge. */
.wp-block-columns:not(.are-vertically-aligned-center) > .wp-block-column:not(.is-vertically-aligned-center):not(.is-vertically-aligned-bottom) > :is(.is-style-card, .is-style-card-dark):only-child {
height: 100%;
display: flex;
flex-direction: column;
}
.wp-block-columns > .wp-block-column > :is(.is-style-card, .is-style-card-dark):only-child:has(> :is(.cdcg-link-arrow, .wp-block-buttons):last-child) > :nth-last-child(2) {
margin-bottom: auto;
}
/* List: checklist + two-column checklist. */
.wp-block-list.is-style-checklist,
.wp-block-list.is-style-two-column {
list-style: none;
padding-left: 0;
}
.wp-block-list.is-style-checklist > li,
.wp-block-list.is-style-two-column > li {
position: relative;
padding-left: 2.1rem;
margin-block: 0;
line-height: 1.45;
}
.wp-block-list.is-style-checklist > li + li {
margin-top: 0.85rem;
}
.wp-block-list.is-style-checklist > li::before,
.wp-block-list.is-style-two-column > li::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
width: 1.15rem;
height: 1.15rem;
background: var(--wp--preset--color--orange);
-webkit-mask: var(--cdcg-i-check) center / contain no-repeat;
mask: var(--cdcg-i-check) center / contain no-repeat;
}
.wp-block-list.is-style-two-column {
display: grid;
gap: 0.9rem 2.5rem;
}
@media (min-width: 640px) {
.wp-block-list.is-style-two-column {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.wp-block-list.is-style-two-column > li {
padding-block: 0.15rem 0.95rem;
border-bottom: 1px solid var(--cdcg-rule);
}
/* Details: FAQ accordion. */
.wp-block-details.is-style-faq {
border-top: 1px solid var(--cdcg-rule);
padding: 0;
margin: 0;
}
.wp-block-details.is-style-faq:last-child {
border-bottom: 1px solid var(--cdcg-rule);
}
.wp-block-details.is-style-faq + .wp-block-details.is-style-faq {
margin-top: 0;
}
.wp-block-details.is-style-faq > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 44px;
padding: 1.35rem 0;
cursor: pointer;
list-style: none;
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
line-height: 1.2;
transition: color 0.2s ease;
}
.wp-block-details.is-style-faq > summary::-webkit-details-marker {
display: none;
}
.wp-block-details.is-style-faq > summary::marker {
content: "";
}
.wp-block-details.is-style-faq > summary::after {
content: "";
flex: none;
width: 2.5rem;
height: 2.5rem;
border: 1px solid var(--cdcg-rule);
border-radius: 50%;
background:
linear-gradient(currentColor, currentColor) center / 0.85rem 2px no-repeat,
linear-gradient(currentColor, currentColor) center / 2px 0.85rem no-repeat;
transition: transform 0.35s var(--cdcg-ease), background-color 0.2s ease, border-color 0.2s ease;
}
.wp-block-details.is-style-faq > summary:hover {
color: var(--cdcg-accent);
}
.wp-block-details.is-style-faq[open] > summary::after {
transform: rotate(135deg);
border-color: var(--wp--preset--color--orange);
background-color: var(--wp--preset--color--orange);
color: var(--wp--preset--color--ink);
}
.wp-block-details.is-style-faq > :not(summary) {
margin-top: 0;
padding-bottom: 1.5rem;
max-width: 64ch;
color: var(--cdcg-muted);
}
.wp-block-details.is-style-faq::details-content {
block-size: 0;
overflow-y: clip;
transition: block-size 0.35s var(--cdcg-ease), content-visibility 0.35s allow-discrete;
}
.wp-block-details.is-style-faq[open]::details-content {
block-size: auto;
}
/* Image / cover: angled corner. */
.is-style-angled,
.wp-block-image.is-style-angled img {
--cdcg-angle: clamp(32px, 5vw, 64px);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cdcg-angle)), calc(100% - var(--cdcg-angle)) 100%, 0 100%);
}
.wp-block-image.is-style-angled {
clip-path: none;
}
/* Placeholder figures (no ![]()
) carry the angle themselves. */
.wp-block-image.is-style-angled.cdcg-slot-empty {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cdcg-angle)), calc(100% - var(--cdcg-angle)) 100%, 0 100%);
}
/* 06 — Buttons & links ---------------------------------------------------- */
.wp-block-button__link,
.wp-element-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
min-height: 52px;
position: relative;
overflow: hidden;
isolation: isolate;
text-align: center;
transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease,
transform 0.25s var(--cdcg-ease);
}
.wp-block-button__link:active {
transform: translateY(1px);
}
/* Primary (fill) — slanted light sheen sweeps across on hover. */
.wp-block-button:not(.is-style-outline):not(.is-style-ghost-light) > .wp-block-button__link::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -70%;
width: 45%;
z-index: -1;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
transform: skewX(-20deg);
transition: left 0.6s var(--cdcg-ease);
}
.wp-block-button:not(.is-style-outline):not(.is-style-ghost-light) > .wp-block-button__link:hover::after {
left: 125%;
}
/* Outline (on light) and ghost (on dark) — arrow that nudges on hover. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-ghost-light > .wp-block-button__link {
background: transparent;
border: 2px solid currentColor;
padding: 1rem 1.6rem;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
color: var(--wp--preset--color--ink);
border-color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--paper);
}
.wp-block-button.is-style-ghost-light > .wp-block-button__link,
:is(.is-style-section-dark, .is-style-card-dark, .wp-block-cover:not(.is-light), .has-ink-background-color) .wp-block-button.is-style-outline > .wp-block-button__link {
color: var(--wp--preset--color--on-dark);
border-color: rgba(245, 245, 244, 0.55);
}
.wp-block-button.is-style-ghost-light > .wp-block-button__link:hover,
:is(.is-style-section-dark, .is-style-card-dark, .wp-block-cover:not(.is-light), .has-ink-background-color) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
background: var(--wp--preset--color--on-dark);
color: var(--wp--preset--color--ink);
border-color: var(--wp--preset--color--on-dark);
}
.wp-block-button.is-style-outline > .wp-block-button__link::after,
.wp-block-button.is-style-ghost-light > .wp-block-button__link::after {
content: "";
width: 1.05em;
height: 1.05em;
flex: none;
background: currentColor;
-webkit-mask: var(--cdcg-i-arrow) center / contain no-repeat;
mask: var(--cdcg-i-arrow) center / contain no-repeat;
transition: transform 0.3s var(--cdcg-ease);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover::after,
.wp-block-button.is-style-ghost-light > .wp-block-button__link:hover::after {
transform: translateX(4px);
}
.wp-block-buttons {
gap: 0.75rem;
}
/* Text link with arrow (paragraph class). */
.cdcg-link-arrow a {
display: inline-flex;
align-items: center;
gap: 0.55em;
min-height: 44px;
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
color: var(--cdcg-accent);
background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 2px no-repeat;
transition: background-size 0.35s var(--cdcg-ease), color 0.2s ease;
}
.cdcg-link-arrow a::after {
content: "";
width: 1.1em;
height: 1.1em;
background: currentColor;
-webkit-mask: var(--cdcg-i-arrow) center / contain no-repeat;
mask: var(--cdcg-i-arrow) center / contain no-repeat;
transition: transform 0.3s var(--cdcg-ease);
}
.cdcg-link-arrow a:hover {
background-size: calc(100% - 1.65em) 2px;
color: var(--cdcg-accent);
}
.cdcg-link-arrow a:hover::after {
transform: translateX(4px);
}
/* Slanted chip (labels only — the box slants, the text stays upright). */
.cdcg-chip {
position: relative;
isolation: isolate;
display: inline-flex;
width: fit-content;
align-items: center;
padding: 0.4rem 0.95rem;
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.2;
}
.cdcg-chip::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--wp--preset--color--orange);
transform: skewX(-12deg);
border-radius: 2px;
}
/* 07 — Header ------------------------------------------------------------- */
.cdcg-site-header {
position: sticky;
top: var(--wp-admin--admin-bar--height, 0px);
z-index: 100;
view-transition-name: cdcg-header;
}
/* Over a dark hero the header floats (fixed) and starts transparent. */
.cdcg-has-hero .cdcg-site-header {
position: fixed;
left: 0;
right: 0;
}
.cdcg-header {
position: relative;
color: var(--wp--preset--color--on-dark);
background-color: var(--wp--preset--color--ink);
border-bottom: 1px solid var(--wp--preset--color--line-dark);
transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* Legibility veil while transparent; becomes a blurred ink bar once scrolled.
(Blur sits on a pseudo-element: a filter on .cdcg-header itself would trap the
fixed-position mobile menu inside the header box.) */
.cdcg-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0;
background: rgba(11, 11, 12, 0.95);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
transition: opacity 0.35s ease;
}
.cdcg-has-hero .cdcg-header {
background-color: transparent;
border-bottom-color: transparent;
background-image: linear-gradient(180deg, rgba(11, 11, 12, 0.72) 0%, rgba(11, 11, 12, 0) 100%);
}
.cdcg-has-hero.cdcg-scrolled .cdcg-header,
.cdcg-scrolled .cdcg-has-hero .cdcg-header {
background-image: none;
border-bottom-color: rgba(46, 46, 53, 0.9);
box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.8);
}
.cdcg-scrolled .cdcg-header::before {
opacity: 1;
}
.cdcg-menu-open .cdcg-header {
background-color: var(--wp--preset--color--ink);
background-image: none;
}
.cdcg-header__bar {
min-height: var(--cdcg-header-h);
gap: clamp(1rem, 2.5vw, 2.5rem);
}
.cdcg-header__logo,
.cdcg-header .wp-block-site-logo {
flex: none;
position: relative;
z-index: 3;
line-height: 0;
}
.cdcg-header .wp-block-site-logo img {
width: clamp(132px, 11vw + 60px, 176px);
height: auto;
}
.cdcg-header .wp-block-site-logo a {
display: inline-block;
border-radius: 2px;
}
.cdcg-header__actions {
flex: none;
gap: 1.25rem;
position: relative;
z-index: 3;
}
.cdcg-header__actions > * {
margin: 0;
}
.cdcg-header__cta .wp-block-button__link {
min-height: 46px;
padding: 0.8rem 1.3rem;
font-size: 0.975rem;
}
/* Phone link (empty until the Company Profile has a phone number). */
.cdcg-phone-link {
margin: 0;
}
.cdcg-phone-link a {
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-height: 44px;
color: var(--wp--preset--color--on-dark);
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: 0.05em;
text-decoration: none;
white-space: nowrap;
}
.cdcg-phone-link a::before {
content: "";
width: 1.05em;
height: 1.05em;
flex: none;
background: var(--wp--preset--color--orange);
-webkit-mask: var(--cdcg-i-phone) center / contain no-repeat;
mask: var(--cdcg-i-phone) center / contain no-repeat;
}
.cdcg-phone-link a:hover {
color: var(--wp--preset--color--orange);
}
@media (max-width: 1279.98px) {
.cdcg-header__phone {
display: none;
}
}
/* 08 — Navigation (desktop) ---------------------------------------------- */
nav.cdcg-nav {
margin-left: auto;
align-self: stretch;
font-family: var(--wp--preset--font-family--display);
}
.cdcg-nav .wp-block-navigation__container {
align-self: stretch;
align-items: stretch;
gap: clamp(1.1rem, 2vw, 2.1rem);
}
.cdcg-nav .wp-block-navigation__container > .wp-block-navigation-item {
display: flex;
align-items: center;
}
.cdcg-nav .wp-block-navigation-item__content {
position: relative;
color: var(--wp--preset--color--on-dark);
font-weight: 600;
font-size: 1.0625rem;
letter-spacing: 0.07em;
text-transform: uppercase;
text-decoration: none;
padding-block: 0.5rem;
transition: color 0.2s ease;
}
.cdcg-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.15rem;
height: 2px;
background: var(--wp--preset--color--orange);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s var(--cdcg-ease);
}
.cdcg-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.cdcg-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.cdcg-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after,
.cdcg-nav .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content::after {
transform: scaleX(1);
}
.cdcg-nav .wp-block-navigation-item__content:hover,
.cdcg-nav .current-menu-item > .wp-block-navigation-item__content,
.cdcg-nav .current-menu-ancestor > .wp-block-navigation-item__content {
color: var(--wp--preset--color--paper);
}
/* "Services" parent: a small chevron (decorative). */
.cdcg-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
padding-right: 1.15em;
}
.cdcg-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content::before {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 0.8em;
height: 0.8em;
margin-top: -0.4em;
background: var(--wp--preset--color--orange);
-webkit-mask: var(--cdcg-i-chevron) center / contain no-repeat;
mask: var(--cdcg-i-chevron) center / contain no-repeat;
transition: transform 0.3s var(--cdcg-ease);
}
.cdcg-nav .has-child:hover > .wp-block-navigation-item__content::before,
.cdcg-nav .has-child:focus-within > .wp-block-navigation-item__content::before {
transform: rotate(180deg);
}
/* Submenu panel. */
.cdcg-nav.wp-block-navigation .wp-block-navigation__submenu-container {
top: 100%;
left: -1.25rem !important;
right: auto !important;
min-width: 24rem !important;
padding: 0.6rem;
background-color: var(--wp--preset--color--char);
color: var(--wp--preset--color--on-dark);
border: 1px solid var(--wp--preset--color--line-dark);
border-top: 3px solid var(--wp--preset--color--orange);
border-radius: 0 0 var(--cdcg-radius-lg) var(--cdcg-radius-lg);
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75);
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.3s var(--cdcg-ease), visibility 0.2s;
}
.cdcg-nav.wp-block-navigation .has-child:not(.is-dismissed):hover > .wp-block-navigation__submenu-container,
.cdcg-nav.wp-block-navigation .has-child:not(.is-dismissed):focus-within > .wp-block-navigation__submenu-container {
transform: none;
}
.cdcg-nav.wp-block-navigation .has-child.is-dismissed > .wp-block-navigation__submenu-container {
visibility: hidden !important;
opacity: 0 !important;
}
.cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 48px;
padding: 0.7rem 0.9rem;
border-radius: var(--cdcg-radius);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
line-height: 1.25;
color: var(--wp--preset--color--on-dark);
}
/* Submenu items: label over a one-line description, arrow on the right. */
.cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:has(.wp-block-navigation-item__description) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 1rem;
row-gap: 0.15rem;
padding-block: 0.8rem;
}
.cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
grid-column: 1;
}
.cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
display: block;
grid-column: 1;
color: var(--wp--preset--color--muted-on-dark);
font-family: var(--wp--preset--font-family--body);
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0;
line-height: 1.35;
text-transform: none;
}
.cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
grid-column: 2;
grid-row: 1 / span 2;
content: "";
flex: none;
width: 1rem;
height: 1rem;
background: var(--wp--preset--color--orange);
-webkit-mask: var(--cdcg-i-arrow) center / contain no-repeat;
mask: var(--cdcg-i-arrow) center / contain no-repeat;
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.2s ease, transform 0.3s var(--cdcg-ease);
}
.cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.cdcg-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
background: var(--wp--preset--color--char-2);
color: var(--wp--preset--color--paper);
}
.cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after,
.cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible::after {
opacity: 1;
transform: none;
}
.cdcg-nav .cdcg-nav-all {
margin-top: 0.35rem;
padding-top: 0.35rem;
border-top: 1px solid var(--wp--preset--color--line-dark);
}
.cdcg-nav .cdcg-nav-all > .wp-block-navigation-item__content {
color: var(--wp--preset--color--orange);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.875rem;
}
/* The extra "Start a Project" nav item only appears inside the mobile menu. */
.cdcg-nav .wp-block-navigation__container > .cdcg-nav-cta {
display: none;
}
/* Menu toggle (rendered server-side, shown only when JS is available, mobile only). */
.cdcg-menu-toggle {
display: none;
position: relative;
z-index: 3;
align-items: center;
gap: 0.7rem;
min-height: 46px;
min-width: 46px;
margin-left: auto;
padding: 0.5rem 0.95rem;
color: var(--wp--preset--color--on-dark);
background: rgba(20, 20, 22, 0.55);
border: 1px solid var(--wp--preset--color--line-dark);
border-radius: var(--cdcg-radius);
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
}
.cdcg-menu-toggle__icon {
position: relative;
width: 22px;
height: 12px;
transform: skewX(-20deg);
}
.cdcg-menu-toggle__icon span {
position: absolute;
left: 0;
height: 2px;
background: var(--wp--preset--color--orange);
transition: transform 0.35s var(--cdcg-ease), width 0.35s var(--cdcg-ease), top 0.35s var(--cdcg-ease);
}
.cdcg-menu-toggle__icon span:first-child {
top: 1px;
width: 22px;
}
.cdcg-menu-toggle__icon span:last-child {
top: 9px;
width: 15px;
}
.cdcg-menu-toggle[aria-expanded="true"] .cdcg-menu-toggle__icon {
transform: none;
}
.cdcg-menu-toggle[aria-expanded="true"] .cdcg-menu-toggle__icon span {
top: 5px;
width: 22px;
}
.cdcg-menu-toggle[aria-expanded="true"] .cdcg-menu-toggle__icon span:first-child {
transform: rotate(45deg);
}
.cdcg-menu-toggle[aria-expanded="true"] .cdcg-menu-toggle__icon span:last-child {
transform: rotate(-45deg);
}
/* 09 — Mobile menu (≤ 1023px) -------------------------------------------- */
@media (max-width: 1023.98px) {
.js .cdcg-menu-toggle {
display: inline-flex;
order: 3;
margin-left: 0.75rem;
}
.wp-block-group.cdcg-header__bar {
justify-content: flex-start;
}
.wp-block-group.cdcg-header__actions {
order: 2;
margin-left: auto;
}
/* Without JS the links simply wrap under the logo. */
html:not(.js) .cdcg-header__bar {
flex-wrap: wrap;
padding-block: 0.75rem;
}
html:not(.js) nav.cdcg-nav {
order: 3;
width: 100%;
margin-left: 0;
}
html:not(.js) .cdcg-nav .wp-block-navigation__container {
flex-wrap: wrap;
gap: 0.25rem 1.25rem;
}
.js nav.cdcg-nav {
display: none;
}
.js.cdcg-menu-open nav.cdcg-nav {
display: flex;
position: fixed;
inset: 0;
z-index: 2;
margin: 0;
padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--cdcg-header-h) + 2rem) var(--cdcg-gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
flex-direction: column;
align-items: stretch;
overflow-y: auto;
overscroll-behavior: contain;
background-color: var(--wp--preset--color--ink);
background-image: var(--cdcg-blueprint);
background-size: 40px 40px;
animation: cdcg-menu-in 0.4s var(--cdcg-ease) both;
}
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__container {
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
}
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__container > .wp-block-navigation-item {
display: block;
border-bottom: 1px solid var(--wp--preset--color--line-dark);
animation: cdcg-menu-item-in 0.5s var(--cdcg-ease) both;
}
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.04s; }
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.08s; }
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.12s; }
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.16s; }
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) { animation-delay: 0.2s; }
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
display: flex;
width: 100%;
padding: 0.85rem 0;
font-size: clamp(2rem, 8.5vw, 2.75rem);
font-weight: 800;
font-style: italic;
letter-spacing: 0.01em;
line-height: 1;
}
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
display: none;
}
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content::before {
display: none;
}
.js.cdcg-menu-open .cdcg-nav .current-menu-item > .wp-block-navigation-item__content,
.js.cdcg-menu-open .cdcg-nav .current-menu-ancestor > .wp-block-navigation-item__content {
color: var(--wp--preset--color--orange);
}
/* Services sub-links are listed in place, always visible. */
.js.cdcg-menu-open .cdcg-nav.wp-block-navigation .wp-block-navigation__submenu-container {
position: static;
visibility: visible;
opacity: 1;
width: auto;
height: auto;
min-width: 0;
overflow: visible;
transform: none;
margin: 0 0 1rem;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
min-height: 44px;
padding: 0.3rem 0 0.3rem 1.4rem;
color: var(--wp--preset--color--muted-on-dark);
font-size: 1.125rem;
position: relative;
justify-content: flex-start;
}
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 0.7rem;
height: 2px;
background: var(--wp--preset--color--orange);
transform: skewX(-24deg);
}
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after,
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation-item__description {
display: none;
}
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:has(.wp-block-navigation-item__description) {
display: flex !important;
}
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
background: transparent;
color: var(--wp--preset--color--on-dark);
}
.js.cdcg-menu-open .cdcg-nav .cdcg-nav-all {
border-top: 0;
margin-top: 0;
}
.js.cdcg-menu-open .cdcg-nav .wp-block-navigation__container > .cdcg-nav-cta {
display: block;
border-bottom: 0 !important;
margin-top: 1.75rem;
}
.js.cdcg-menu-open .cdcg-nav .cdcg-nav-cta > .wp-block-navigation-item__content {
justify-content: center;
align-items: center;
min-height: 58px;
border-radius: var(--cdcg-radius);
background: var(--wp--preset--color--orange);
color: var(--wp--preset--color--ink) !important;
font-size: 1.25rem !important;
font-style: normal !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
}
.cdcg-menu-open {
overflow: hidden;
}
}
@media (max-width: 781.98px) {
/* Phones: the sticky action bar carries the CTA, so the header is just logo + menu. */
.wp-block-group.cdcg-header__actions {
display: none;
}
.js .cdcg-menu-toggle {
margin-left: auto;
}
.is-style-eyebrow {
font-size: 0.875rem;
letter-spacing: 0.12em;
}
}
@keyframes cdcg-menu-in {
from {
opacity: 0;
clip-path: inset(0 0 100% 0);
}
to {
opacity: 1;
clip-path: inset(0 0 0 0);
}
}
@keyframes cdcg-menu-item-in {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
/* 10 — Hero sections ------------------------------------------------------ */
.wp-block-cover.alignfull {
padding-inline: var(--wp--style--root--padding-left, var(--cdcg-gutter)) var(--wp--style--root--padding-right, var(--cdcg-gutter));
}
/* The cover carries the gutter; its constrained inner container must not add a second one
(core only strips it when the cover sits inside another padded container). */
.wp-block-cover.alignfull > .wp-block-cover__inner-container.has-global-padding {
padding-inline: 0;
}
.wp-block-cover.cdcg-hero {
background-color: var(--wp--preset--color--ink);
color: var(--wp--preset--color--on-dark);
}
/* Custom content positions shrink-wrap the inner container; ours span the wide column. */
.wp-block-cover.cdcg-hero .wp-block-cover__inner-container,
.wp-block-cover.cdcg-cta-band .wp-block-cover__inner-container {
width: 100% !important;
}
/* Content always paints above the image, scrim and decorative speed bars. */
.wp-block-cover.cdcg-hero > .wp-block-cover__inner-container,
.wp-block-cover.cdcg-cta-band > .wp-block-cover__inner-container,
.wp-block-cover.cdcg-service-card > .wp-block-cover__inner-container {
z-index: 2;
}
/* Background loops (inc/video.php + site.js): framed like the photo, faded in over it once
playing, under the scrim. The photo underneath is the poster. */
.wp-block-cover .cdcg-cover-video {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
object-fit: cover;
opacity: 0;
pointer-events: none;
transition: opacity 1.2s ease;
}
.wp-block-cover.is-video-playing .cdcg-cover-video {
opacity: 1;
}
.cdcg-video-toggle {
position: absolute;
right: clamp(1rem, 0.5rem + 2vw, 2rem);
bottom: clamp(1rem, 0.5rem + 2vw, 2rem);
z-index: 3;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 1px solid rgba(245, 245, 244, 0.45);
border-radius: 50%;
background: rgba(11, 11, 12, 0.55);
color: var(--wp--preset--color--on-dark, #f5f5f4);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cdcg-video-toggle:hover {
border-color: var(--wp--preset--color--orange);
background: rgba(11, 11, 12, 0.8);
}
.cdcg-video-toggle:focus-visible {
outline: 3px solid var(--wp--preset--color--orange);
outline-offset: 3px;
}
.cdcg-video-toggle svg {
fill: currentColor;
}
.cdcg-video-toggle .cdcg-video-toggle__play,
.cdcg-video-toggle.is-paused .cdcg-video-toggle__pause {
display: none;
}
.cdcg-video-toggle.is-paused .cdcg-video-toggle__play {
display: inline;
}
/* The home and service hero photos/loops keep their subject on the right third (the left is
left dark for the headline). On a portrait phone screen, centre-cropping would cut the
machine or crew off entirely, so the crop leans right. */
@media (max-width: 781.98px) {
.cdcg-hero--home > .wp-block-cover__image-background,
.cdcg-hero--home > .cdcg-cover-video,
.cdcg-service-hero > .wp-block-cover__image-background,
.cdcg-service-hero > .cdcg-cover-video {
object-position: 70% 50%;
}
}
/* The mobile action bar sits along the bottom edge on phones; keep the button clear of it. */
@media (max-width: 781.98px) {
.cdcg-hero .cdcg-video-toggle {
top: calc(var(--cdcg-header-h, 4.5rem) + 0.75rem);
bottom: auto;
}
}
@media print {
.cdcg-cover-video,
.cdcg-video-toggle {
display: none !important;
}
}
.cdcg-hero__content {
width: 100%;
max-width: var(--wp--style--global--wide-size, 1320px);
margin-inline: auto;
}
.cdcg-hero__content > * {
margin-block: 0;
}
/* Home hero: full viewport, content anchored bottom-left. */
.wp-block-cover.cdcg-hero--home {
min-height: max(40rem, 100svh) !important;
padding-top: calc(var(--cdcg-header-h) + clamp(3rem, 8vh, 6rem));
padding-bottom: clamp(2rem, 5vh, 3.5rem);
}
.cdcg-hero__eyebrow,
.cdcg-hero__content > .is-style-eyebrow {
margin-bottom: clamp(1rem, 2.5vh, 1.75rem) !important;
}
.cdcg-hero__title {
max-width: 12ch;
text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
.cdcg-hero--home .cdcg-hero__title {
font-size: clamp(3.25rem, 2rem + 6.5vw, 8.25rem) !important;
line-height: 0.86;
}
.cdcg-hero__sub {
max-width: 40rem !important;
margin-top: clamp(1.25rem, 3vh, 2rem) !important;
}
.cdcg-hero__actions {
margin-top: clamp(1.75rem, 4vh, 2.5rem) !important;
}
.cdcg-hero__trust {
margin-top: clamp(2.5rem, 7vh, 4.5rem) !important;
padding-top: 1.4rem;
border-top: 1px solid rgba(245, 245, 244, 0.16);
gap: 0.85rem 2.25rem !important;
}
.cdcg-trust-item {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0;
color: var(--wp--preset--color--on-dark);
font-family: var(--wp--preset--font-family--display);
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: 0.1em;
line-height: 1.2;
text-transform: uppercase;
}
.cdcg-trust-item::before {
content: "";
flex: none;
width: 1.05rem;
height: 1.05rem;
background: var(--wp--preset--color--orange);
-webkit-mask: var(--cdcg-i-check) center / contain no-repeat;
mask: var(--cdcg-i-check) center / contain no-repeat;
}
/* Signature speed bars bleeding off the right edge of the home hero. */
.cdcg-hero--home::after {
content: "";
position: absolute;
z-index: 1;
right: -3vw;
bottom: clamp(9rem, 22vh, 13rem);
width: min(30vw, 440px);
height: clamp(30px, 3vw, 46px);
background:
linear-gradient(var(--wp--preset--color--orange), var(--wp--preset--color--orange)) 0 0 / 100% 34% no-repeat,
linear-gradient(var(--wp--preset--color--orange), var(--wp--preset--color--orange)) 22% 100% / 78% 34% no-repeat;
transform: skewX(-24deg);
pointer-events: none;
}
@media (max-width: 781.98px) {
.cdcg-hero--home::after {
display: none;
}
}
/* Interior page hero (typographic, dark). */
.wp-block-group.cdcg-page-hero {
padding-top: calc(var(--cdcg-header-h) + var(--wp--preset--spacing--70));
padding-bottom: var(--wp--preset--spacing--70);
overflow: hidden;
}
.cdcg-page-hero__inner > * {
margin-block: 0;
}
.cdcg-page-hero__inner > * + * {
margin-top: 1.25rem;
}
.cdcg-page-hero__title {
font-size: var(--wp--preset--font-size--gigantic);
max-width: 20ch;
}
.cdcg-page-hero__title.has-colossal-font-size {
font-size: var(--wp--preset--font-size--colossal) !important;
}
.cdcg-page-hero__lead {
max-width: 44rem !important;
margin-top: 1.75rem !important;
}
.cdcg-page-hero .wp-block-separator.is-style-speed-bars {
margin-top: clamp(2rem, 4vw, 3rem) !important;
}
.cdcg-page-hero__split {
gap: 1.5rem 4rem;
}
.cdcg-page-hero__split > * {
margin: 0 !important;
}
.cdcg-page-hero__split .cdcg-page-hero__title {
flex: 1 1 34rem;
}
.cdcg-page-hero__split .cdcg-page-hero__lead {
flex: 0 1 27rem;
padding-bottom: 0.6rem;
}
/* Service hero. */
.wp-block-cover.cdcg-service-hero {
min-height: max(34rem, 78svh) !important;
padding-top: calc(var(--cdcg-header-h) + var(--wp--preset--spacing--70));
padding-bottom: var(--wp--preset--spacing--60);
}
.cdcg-service-hero__title {
max-width: 15ch;
}
/* Phones: the stacked hero copy fills most of the photo, so the scrim reaches higher. */
@media (max-width: 639.98px) {
.wp-block-cover.cdcg-hero .wp-block-cover__background.has-hero-scrim-gradient-background {
background: linear-gradient(0deg, rgba(11, 11, 12, 0.94) 0%, rgba(11, 11, 12, 0.72) 50%, rgba(11, 11, 12, 0.5) 100%) !important;
}
}
/* 11 — Section patterns --------------------------------------------------- */
/* Shared section head: title block left, intro/link right, bottom-aligned. */
.wp-block-group.cdcg-section-head {
gap: 1.5rem clamp(2rem, 6vw, 6rem);
}
.cdcg-section-head__title {
flex: 1 1 30rem;
max-width: 52rem;
}
.cdcg-section-head__title > * {
margin-block: 0;
}
.cdcg-section-head__title > h2 {
margin-top: 1rem;
}
.cdcg-section-head__aside {
flex: 0 1 27rem;
margin: 0 !important;
color: var(--cdcg-muted);
padding-bottom: 0.35rem;
}
.cdcg-section-head > .cdcg-link-arrow {
margin: 0 !important;
}
.wp-block-group.cdcg-section-head + * {
margin-top: clamp(2.5rem, 5vw, 4.5rem) !important;
}
/* Service cards. */
.wp-block-group.cdcg-service-grid {
gap: clamp(0.75rem, 1.2vw, 1.25rem);
}
.wp-block-cover.cdcg-service-card {
min-height: clamp(26rem, 38vw, 35rem) !important;
padding: 0;
align-items: stretch;
border-radius: var(--cdcg-radius-lg);
background-color: var(--wp--preset--color--char);
transition: transform 0.5s var(--cdcg-ease), box-shadow 0.5s var(--cdcg-ease);
}
@media (max-width: 639.98px) {
.wp-block-cover.cdcg-service-card {
min-height: 21rem !important;
}
/* Copy covers about two thirds of the shorter card: darken from higher up. */
.wp-block-cover.cdcg-service-card .wp-block-cover__background.has-card-scrim-gradient-background {
background: linear-gradient(180deg, rgba(11, 11, 12, 0.1) 0%, rgba(11, 11, 12, 0.62) 32%, rgba(11, 11, 12, 0.95) 72%) !important;
}
}
.cdcg-service-card .wp-block-cover__image-background {
transition: transform 1.2s var(--cdcg-ease);
}
.cdcg-service-card .wp-block-cover__inner-container {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.85rem;
padding: clamp(1.4rem, 2vw, 2rem);
}
.cdcg-service-card .wp-block-cover__inner-container > * {
margin: 0;
}
.cdcg-card-index {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--wp--preset--color--orange);
font-family: var(--wp--preset--font-family--display);
font-weight: 800;
font-style: italic;
font-size: 1.0625rem;
letter-spacing: 0.1em;
}
.cdcg-card-index::after {
content: "";
width: 2.5rem;
height: 1px;
background: rgba(245, 245, 244, 0.4);
}
.cdcg-service-card__title {
font-size: clamp(1.65rem, 1.2rem + 1vw, 2.15rem);
font-weight: 800;
line-height: 0.98;
text-transform: uppercase;
}
.cdcg-service-card__title a {
color: var(--wp--preset--color--on-dark) !important;
text-decoration: none;
}
/* Whole card is one link: the title link stretches over the card. */
.cdcg-service-card__title a::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: var(--cdcg-radius-lg);
}
.cdcg-service-card__title a:focus-visible {
outline: none;
}
.cdcg-service-card__title a:focus-visible::before {
outline: 3px solid var(--wp--preset--color--orange);
outline-offset: -3px;
}
.cdcg-service-card__text {
color: rgba(245, 245, 244, 0.82);
font-size: 1rem;
line-height: 1.5;
max-width: 34ch;
}
/* Arrow badge + orange base line on hover. */
.cdcg-service-card .wp-block-cover__inner-container::after {
content: "";
position: absolute;
top: clamp(1.4rem, 2vw, 2rem);
right: clamp(1.4rem, 2vw, 2rem);
width: 3rem;
height: 3rem;
border-radius: 50%;
border: 1px solid rgba(245, 245, 244, 0.35);
background: transparent;
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.4s var(--cdcg-ease);
}
.cdcg-service-card .wp-block-cover__inner-container::before {
content: "";
position: absolute;
z-index: 1;
top: calc(clamp(1.4rem, 2vw, 2rem) + 0.9rem);
right: calc(clamp(1.4rem, 2vw, 2rem) + 0.9rem);
width: 1.2rem;
height: 1.2rem;
background: var(--wp--preset--color--on-dark);
-webkit-mask: var(--cdcg-i-arrow-ne) center / contain no-repeat;
mask: var(--cdcg-i-arrow-ne) center / contain no-repeat;
transition: background-color 0.3s ease, transform 0.4s var(--cdcg-ease);
}
.wp-block-cover.cdcg-service-card::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
height: 4px;
background: var(--wp--preset--color--orange);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.5s var(--cdcg-ease);
}
.wp-block-cover.cdcg-service-card:hover,
.wp-block-cover.cdcg-service-card:focus-within {
transform: translateY(-6px);
box-shadow: 0 40px 70px -40px rgba(11, 11, 12, 0.7);
}
.wp-block-cover.cdcg-service-card:hover::after,
.wp-block-cover.cdcg-service-card:focus-within::after {
transform: scaleX(1);
}
.cdcg-service-card:hover .wp-block-cover__image-background {
transform: scale(1.06);
}
.cdcg-service-card:hover .wp-block-cover__inner-container::after {
background-color: var(--wp--preset--color--orange);
border-color: var(--wp--preset--color--orange);
}
.cdcg-service-card:hover .wp-block-cover__inner-container::before {
background: var(--wp--preset--color--ink);
transform: translate(2px, -2px);
}
/* Why choose: ruled spec-sheet grid. */
.wp-block-group.cdcg-why-grid {
gap: 0;
border-top: 1px solid var(--cdcg-rule);
border-left: 1px solid var(--cdcg-rule);
}
.cdcg-why-item {
position: relative;
padding: clamp(1.75rem, 2.8vw, 2.75rem);
border-right: 1px solid var(--cdcg-rule);
border-bottom: 1px solid var(--cdcg-rule);
transition: background-color 0.35s ease;
}
.cdcg-why-item > * {
margin-block: 0;
}
.cdcg-why-item::before {
content: "";
display: block;
width: 3rem;
height: 3rem;
margin-bottom: 1.75rem;
background: var(--wp--preset--color--orange);
-webkit-mask: var(--cdcg-icon, var(--cdcg-i-check)) center / contain no-repeat;
mask: var(--cdcg-icon, var(--cdcg-i-check)) center / contain no-repeat;
transition: transform 0.45s var(--cdcg-ease);
}
.cdcg-why-item::after {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 3px;
background: var(--wp--preset--color--orange);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.5s var(--cdcg-ease);
}
.cdcg-why-item:hover {
background-color: var(--wp--preset--color--paper);
}
.cdcg-why-item:hover::after {
transform: scaleX(1);
}
.cdcg-why-item:hover::before {
transform: translateY(-3px);
}
.cdcg-icon-experience { --cdcg-icon: var(--cdcg-i-experience); }
.cdcg-icon-field { --cdcg-icon: var(--cdcg-i-field); }
.cdcg-icon-buildings { --cdcg-icon: var(--cdcg-i-buildings); }
.cdcg-icon-network { --cdcg-icon: var(--cdcg-i-network); }
.cdcg-icon-communication { --cdcg-icon: var(--cdcg-i-communication); }
.cdcg-icon-quality { --cdcg-icon: var(--cdcg-i-quality); }
.cdcg-why-item__num {
position: absolute;
top: clamp(1.75rem, 2.8vw, 2.75rem);
right: clamp(1.75rem, 2.8vw, 2.75rem);
color: var(--cdcg-muted);
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
font-size: 0.9375rem;
letter-spacing: 0.12em;
}
.cdcg-why-item__title {
font-size: var(--wp--preset--font-size--x-large);
font-weight: 800;
line-height: 1.02;
text-transform: uppercase;
}
.cdcg-why-item__text {
margin-top: 0.85rem !important;
color: var(--cdcg-muted);
font-size: 1.0625rem;
line-height: 1.55;
}
/* Process: numbered timeline. */
.wp-block-group.cdcg-steps {
gap: 0;
}
.cdcg-step {
position: relative;
padding: 2.5rem clamp(1rem, 2vw, 2rem) 0 0;
border-top: 1px solid var(--cdcg-rule);
}
.cdcg-step > * {
margin-block: 0;
}
.cdcg-step::before {
content: "";
position: absolute;
top: -7px;
left: 0;
width: 12px;
height: 12px;
background: var(--wp--preset--color--ink);
border: 2px solid var(--wp--preset--color--orange);
transform: rotate(45deg);
transition: background-color 0.3s ease;
}
.cdcg-step:hover::before {
background: var(--wp--preset--color--orange);
}
.cdcg-step__num {
margin-bottom: 1.5rem !important;
color: transparent;
-webkit-text-stroke: 1.5px var(--wp--preset--color--orange);
font-family: var(--wp--preset--font-family--display);
font-weight: 800;
font-style: italic;
font-size: clamp(3.75rem, 5.5vw, 5.75rem);
line-height: 0.8;
letter-spacing: -0.02em;
transition: color 0.4s ease;
}
.cdcg-step:hover .cdcg-step__num {
color: var(--wp--preset--color--orange);
}
.cdcg-step__title {
font-size: var(--wp--preset--font-size--x-large);
font-weight: 800;
line-height: 1.02;
text-transform: uppercase;
}
.cdcg-step__text {
margin-top: 0.75rem !important;
color: var(--cdcg-muted);
font-size: 1rem;
line-height: 1.55;
}
@media (max-width: 781.98px) {
.wp-block-group.cdcg-steps {
grid-template-columns: minmax(0, 1fr) !important;
}
.cdcg-step {
display: grid;
grid-template-columns: 4.5rem 1fr;
column-gap: 1rem;
padding: 0 0 2.25rem 1.75rem;
border-top: 0;
border-left: 1px solid var(--cdcg-rule);
}
.cdcg-step:last-child {
padding-bottom: 0;
}
.cdcg-step::before {
top: 0.35rem;
left: -7px;
}
.cdcg-step__num {
grid-row: span 2;
margin: 0 !important;
font-size: 3.5rem;
}
.cdcg-step__title {
align-self: end;
}
}
/* Founder. */
.wp-block-columns.cdcg-founder__cols {
gap: clamp(2.5rem, 7vw, 7rem);
}
.cdcg-founder__media {
position: relative;
}
.cdcg-founder__media::before {
content: "";
position: absolute;
inset: 1.5rem -1.5rem -1.5rem 1.5rem;
border: 2px solid rgba(251, 110, 0, 0.55);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), calc(100% - 64px) 100%, 0 100%);
pointer-events: none;
}
.cdcg-founder__photo {
position: relative;
margin: 0;
}
.cdcg-founder__photo img {
width: 100%;
display: block;
}
/* Stacked (single column): a landscape crop keeps the photo from towering over the text. */
@media (max-width: 781.98px) {
.cdcg-founder__photo img,
.wp-block-image.cdcg-founder__photo.cdcg-slot-empty {
aspect-ratio: 4 / 3 !important;
}
.cdcg-founder__media::before {
inset: 1rem -0.75rem -0.75rem 1rem;
}
}
.cdcg-founder__body > * {
margin-block: 0;
}
.cdcg-founder__name {
margin-top: 1rem !important;
font-size: var(--wp--preset--font-size--gigantic);
}
.cdcg-founder__body .cdcg-chip {
margin-top: 1.1rem !important;
}
.cdcg-founder__titles {
margin-top: 1.1rem !important;
color: var(--cdcg-muted);
font-family: var(--wp--preset--font-family--display);
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: 0.1em;
line-height: 1.5;
text-transform: uppercase;
}
.wp-block-quote.cdcg-founder__quote {
margin-top: 2.25rem !important;
padding-left: clamp(1.25rem, 2vw, 1.75rem);
border-left: 3px solid var(--wp--preset--color--orange);
}
.wp-block-quote.cdcg-founder__quote p {
color: var(--wp--preset--color--on-dark);
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
font-style: italic;
font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.1rem);
line-height: 1.18;
}
.cdcg-founder__text {
margin-top: 1.75rem !important;
color: var(--cdcg-muted);
max-width: 60ch;
}
/* The ConstructionDad tagline, set like a sign-off under the bio. */
.cdcg-founder__tagline {
margin-top: 1.25rem !important;
color: var(--wp--preset--color--orange);
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
font-style: italic;
font-size: 1.05rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wp-block-group.cdcg-founder__facts {
margin-top: 2rem !important;
gap: 1.5rem 3rem;
}
.cdcg-founder__facts .cdcg-fact {
max-width: 15rem;
}
.cdcg-fact {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin: 0;
color: var(--cdcg-muted);
font-family: var(--wp--preset--font-family--display);
font-weight: 600;
font-size: 0.875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.cdcg-fact strong {
color: var(--wp--preset--color--orange);
font-weight: 800;
font-style: italic;
font-size: clamp(2.75rem, 4vw, 3.75rem);
line-height: 0.9;
letter-spacing: -0.01em;
}
.cdcg-founder__body .wp-block-buttons {
margin-top: 2.25rem !important;
}
/* CTA band. */
.wp-block-cover.cdcg-cta-band {
min-height: clamp(30rem, 46vw, 40rem) !important;
padding-block: var(--wp--preset--spacing--80);
background-color: var(--wp--preset--color--ink);
}
.cdcg-cta-band__inner {
max-width: var(--wp--style--global--wide-size, 1320px);
margin-inline: auto;
width: 100%;
}
.cdcg-cta-band__inner > * {
margin-block: 0;
}
.cdcg-cta-band__title {
margin-top: 1.25rem !important;
max-width: 17ch;
}
.cdcg-cta-band__text {
margin-top: 1.5rem !important;
max-width: 40rem !important;
}
.cdcg-cta-band .wp-block-buttons {
margin-top: 2.25rem !important;
}
.cdcg-cta-band__links {
margin-top: 1.5rem !important;
max-width: 44rem;
color: var(--wp--preset--color--muted-on-dark);
font-size: 0.9375rem;
line-height: 1.7;
}
.wp-block-cover .cdcg-cta-band__links a:where(:not(.wp-element-button)) {
color: var(--wp--preset--color--on-dark);
text-decoration: underline;
text-decoration-color: rgba(251, 110, 0, 0.7);
text-decoration-thickness: 2px;
text-underline-offset: 0.25em;
}
.wp-block-cover .cdcg-cta-band__links a:where(:not(.wp-element-button)):hover {
color: var(--wp--preset--color--orange);
}
.cdcg-cta-band__motto {
margin-top: 2.75rem !important;
color: var(--wp--preset--color--muted-on-dark);
font-family: var(--wp--preset--font-family--display);
font-weight: 800;
font-style: italic;
font-size: 1rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.wp-block-cover.cdcg-cta-band::after {
content: "";
position: absolute;
z-index: 1;
right: -4vw;
top: 50%;
width: min(34vw, 520px);
height: clamp(36px, 4vw, 60px);
margin-top: -30px;
background:
linear-gradient(var(--wp--preset--color--orange), var(--wp--preset--color--orange)) 0 0 / 100% 34% no-repeat,
linear-gradient(var(--wp--preset--color--orange), var(--wp--preset--color--orange)) 22% 100% / 78% 34% no-repeat;
transform: skewX(-24deg);
pointer-events: none;
}
@media (max-width: 1023.98px) {
.wp-block-cover.cdcg-cta-band::after {
display: none;
}
}
/* FAQ layout. */
.wp-block-columns.cdcg-faq__cols {
gap: clamp(2.5rem, 6vw, 6rem);
}
.cdcg-faq__intro > * {
margin-block: 0;
}
.cdcg-faq__intro > * + * {
margin-top: 1.25rem;
}
.cdcg-faq__intro p:not(.is-style-eyebrow):not(.cdcg-link-arrow) {
color: var(--cdcg-muted);
max-width: 36ch;
}
@media (min-width: 782px) {
.cdcg-faq__intro {
position: sticky;
top: calc(var(--cdcg-header-h) + 2rem);
align-self: flex-start;
}
}
/* Service includes. */
.wp-block-columns.cdcg-includes__cols {
gap: clamp(2.5rem, 6vw, 6rem);
}
.cdcg-includes__intro > * {
margin-block: 0;
}
.cdcg-includes__intro > * + * {
margin-top: 1.25rem;
}
.cdcg-includes__intro .wp-block-buttons {
margin-top: 2rem;
}
.cdcg-includes__intro p:not(.is-style-eyebrow) {
color: var(--cdcg-muted);
}
/* Contact split. */
.wp-block-columns.cdcg-contact__cols {
gap: clamp(2.5rem, 6vw, 6rem);
}
/* Two-column form sections (contact, trade partners, careers): the short intro column stays
in view beside the long form card instead of leaving an empty column for most of the scroll.
Only on screens tall enough to show the whole intro while it is pinned (the contact intro,
with its next-steps list, is about 800px tall). */
@media (min-width: 782px) and (min-height: 640px) {
.wp-block-columns:not(.cdcg-contact__cols):has(> .wp-block-column .cdcg-form-card) > .wp-block-column:first-child:not(:has(.cdcg-form-card)) {
position: sticky;
top: calc(var(--cdcg-header-h) + 1rem);
align-self: flex-start;
}
}
@media (min-width: 782px) and (min-height: 900px) {
.wp-block-columns.cdcg-contact__cols > .wp-block-column:first-child:not(:has(.cdcg-form-card)) {
position: sticky;
top: calc(var(--cdcg-header-h) + 1rem);
align-self: flex-start;
}
}
.cdcg-contact__intro > * {
margin-block: 0;
}
.cdcg-contact__intro > * + * {
margin-top: 1.25rem;
}
.cdcg-contact__subhead {
margin-top: 2.5rem !important;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.cdcg-next-steps {
display: grid;
gap: 0;
counter-reset: none;
}
.cdcg-next-steps > * {
margin: 0 !important;
}
.cdcg-next-step {
display: grid;
grid-template-columns: 2.75rem 1fr;
gap: 1rem;
align-items: start;
padding-block: 1rem;
border-top: 1px solid var(--cdcg-rule);
}
.cdcg-next-step > * {
margin: 0 !important;
}
.cdcg-next-step__num {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--orange);
font-family: var(--wp--preset--font-family--display);
font-weight: 800;
font-style: italic;
font-size: 1.25rem;
}
.cdcg-next-step__text {
color: var(--cdcg-muted);
font-size: 1rem;
line-height: 1.5;
}
.cdcg-next-step__text strong {
display: block;
color: var(--wp--preset--color--text);
font-family: var(--wp--preset--font-family--display);
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.wp-block-group.cdcg-form-card {
padding: clamp(1.5rem, 3.5vw, 3rem);
border-top: 4px solid var(--wp--preset--color--orange);
}
/* Media & text. */
.wp-block-media-text.cdcg-media-text {
gap: clamp(2rem, 6vw, 6rem);
}
.wp-block-media-text.cdcg-media-text > .wp-block-media-text__content {
padding: 0;
}
.cdcg-media-text .wp-block-media-text__content > * {
margin-block: 0;
}
.cdcg-media-text .wp-block-media-text__content > * + * {
margin-top: 1.25rem;
}
.cdcg-media-text .wp-block-media-text__content > p:not(.is-style-eyebrow):not(.cdcg-link-arrow) {
color: var(--cdcg-muted);
}
.cdcg-media-text .wp-block-media-text__media {
--cdcg-angle: clamp(32px, 5vw, 72px);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cdcg-angle)), calc(100% - var(--cdcg-angle)) 100%, 0 100%);
}
.cdcg-media-text .wp-block-media-text__media img {
aspect-ratio: 5 / 4;
object-fit: cover;
width: 100%;
}
@media (max-width: 599.98px) {
.wp-block-media-text.cdcg-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
padding: 2rem 0 0;
}
}
/* Service rows (Services overview): alternating image/text bands. */
.wp-block-columns.cdcg-service-row {
gap: clamp(2rem, 6vw, 6rem);
}
.wp-block-columns.cdcg-service-row + .wp-block-columns.cdcg-service-row {
margin-top: var(--wp--preset--spacing--70) !important;
padding-top: var(--wp--preset--spacing--70);
border-top: 1px solid var(--cdcg-rule);
}
.cdcg-service-row .wp-block-column > * {
margin-block: 0;
}
.cdcg-service-row .wp-block-column > * + * {
margin-top: 1.25rem;
}
.cdcg-service-row .wp-block-column > h2 {
margin-top: 1rem;
font-size: var(--wp--preset--font-size--xx-large);
}
.cdcg-service-row .wp-block-list {
margin-top: 1.75rem !important;
}
.cdcg-service-row .cdcg-link-arrow {
margin-top: 1.5rem !important;
}
/* Stacked (single column): every service reads photo → eyebrow → heading → list → link,
instead of the desktop zig-zag putting two photos back to back. */
@media (max-width: 781.98px) {
.wp-block-columns.cdcg-service-row > .wp-block-column:has(> figure.wp-block-image) {
order: -1;
}
}
/* Logo wall. */
.wp-block-group.cdcg-logo-wall__inner {
gap: 1.5rem 3rem;
}
.cdcg-logo-wall__label {
margin: 0;
flex: 0 0 auto;
}
.cdcg-logo-wall__logos {
flex: 1 1 36rem;
margin: 0 !important;
gap: 1rem 2.5rem !important;
align-items: center;
}
.cdcg-logo-wall__logos .wp-block-image img {
max-height: 56px;
width: auto !important;
object-fit: contain !important;
filter: grayscale(1) contrast(1.1);
opacity: 0.7;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.cdcg-logo-wall__logos .wp-block-image:hover img {
filter: none;
opacity: 1;
}
/* Stats / featured / testimonials bands. */
.wp-block-group.cdcg-stats-section {
padding-block: var(--wp--preset--spacing--60);
border-bottom: 1px solid var(--wp--preset--color--line-dark);
}
/* A stats band directly after a hero reads as part of it. */
.cdcg-hero + .cdcg-stats-section {
padding-top: var(--wp--preset--spacing--50);
}
/* 12 — Footer + mobile action bar ---------------------------------------- */
.cdcg-footer {
overflow: hidden;
border-top: 1px solid var(--wp--preset--color--line-dark);
}
.wp-block-group.cdcg-footer a:where(:not(.wp-element-button)) {
color: var(--wp--preset--color--muted-on-dark);
text-decoration: none;
transition: color 0.2s ease;
}
.wp-block-group.cdcg-footer a:where(:not(.wp-element-button)):hover {
color: var(--wp--preset--color--on-dark);
}
.wp-block-group.cdcg-footer-cta {
gap: 2rem clamp(2rem, 6vw, 6rem);
padding-block: var(--wp--preset--spacing--70);
border-bottom: 1px solid var(--wp--preset--color--line-dark);
}
.cdcg-footer-cta__text {
flex: 1 1 34rem;
}
.cdcg-footer-cta__text > * {
margin-block: 0;
}
.cdcg-footer-cta__title {
margin-top: 1.1rem !important;
font-size: var(--wp--preset--font-size--gigantic);
max-width: 19ch;
}
.cdcg-footer-cta__actions {
flex: 0 1 22rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.cdcg-footer-cta__actions > * {
margin: 0 !important;
}
.cdcg-footer-cta__note {
color: var(--wp--preset--color--muted-on-dark);
font-size: 1.0625rem;
}
/* Hide the footer CTA strip when the page already ends with a CTA band, or is the form itself. */
body:has(.wp-block-cdcg-lead-form) .cdcg-footer-cta,
main:has(> .wp-block-template-part:last-child .cdcg-cta-band) + .cdcg-site-footer .cdcg-footer-cta,
main:has(.wp-block-post-content > .cdcg-cta-band:last-child) + .cdcg-site-footer .cdcg-footer-cta,
main:has(> .cdcg-cta-band:last-child) + .cdcg-site-footer .cdcg-footer-cta {
display: none;
}
.wp-block-group.cdcg-footer-main {
display: grid;
/* Services column wide enough for "General Contracting & Construction Management" on one line at 1440. */
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 1.45fr) minmax(0, 1.05fr);
gap: 3rem clamp(2rem, 4vw, 4rem);
padding-block: var(--wp--preset--spacing--70);
}
.cdcg-footer-main > * {
margin: 0 !important;
}
@media (max-width: 1023.98px) {
.wp-block-group.cdcg-footer-main {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 599.98px) {
.wp-block-group.cdcg-footer-main {
grid-template-columns: minmax(0, 1fr);
gap: 2.5rem;
}
}
.cdcg-footer-brand > * {
margin-block: 0;
}
.cdcg-footer .wp-block-site-logo img {
width: clamp(180px, 16vw, 232px);
height: auto;
}
.cdcg-footer-tagline {
margin-top: 1.75rem !important;
max-width: 24rem;
color: var(--wp--preset--color--on-dark);
font-size: 1.0625rem;
line-height: 1.5;
}
.cdcg-footer-motto {
margin-top: 1rem !important;
color: var(--wp--preset--color--orange);
font-family: var(--wp--preset--font-family--display);
font-weight: 800;
font-style: italic;
font-size: 1.25rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.cdcg-footer-brand > :last-child:not(p) {
margin-top: 1.5rem;
}
.cdcg-footer-col > * {
margin-block: 0;
}
.cdcg-footer-heading {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 1.4rem !important;
color: var(--wp--preset--color--on-dark);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1.2;
text-transform: uppercase;
}
.cdcg-footer-heading::before {
content: "";
width: 1.3rem;
height: 0.55rem;
flex: none;
background:
linear-gradient(var(--wp--preset--color--orange), var(--wp--preset--color--orange)) 0 0 / 100% 2px no-repeat,
linear-gradient(var(--wp--preset--color--orange), var(--wp--preset--color--orange)) 0 100% / 68% 2px no-repeat;
transform: skewX(-24deg);
}
.cdcg-footer-links {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.15rem;
}
.cdcg-footer-links li {
margin: 0;
}
.cdcg-footer-links a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding-block: 0.2rem;
font-size: 1rem;
line-height: 1.35;
}
.cdcg-footer-contact__note {
margin-top: 1rem !important;
font-size: 1rem;
line-height: 1.5;
max-width: 30ch;
}
.cdcg-footer .cdcg-link-arrow {
margin-top: 0.75rem !important;
}
.wp-block-group.cdcg-footer .cdcg-link-arrow a {
color: var(--wp--preset--color--orange);
}
.wp-block-group.cdcg-footer-legal {
gap: 1rem 2rem;
padding-block: 1.5rem 2rem;
border-top: 1px solid var(--wp--preset--color--line-dark);
font-size: 0.875rem;
}
.cdcg-footer-legal > *,
.cdcg-footer-legal__meta > * {
margin: 0 !important;
}
.cdcg-footer-legal__meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1.5rem;
}
.cdcg-legal-links {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.5rem;
margin: 0;
padding: 0;
}
.cdcg-legal-links li {
margin: 0;
}
.cdcg-legal-links a {
display: inline-flex;
align-items: center;
min-height: 32px;
}
/* Mobile sticky action bar: Call (when a phone is set) + Start a Project. */
.wp-block-group.cdcg-action-bar {
display: none;
}
@media (max-width: 781.98px) {
:root {
--cdcg-bar-h: calc(70px + env(safe-area-inset-bottom, 0px));
}
.cdcg-site-footer {
padding-bottom: var(--cdcg-bar-h);
background-color: var(--wp--preset--color--ink);
}
.wp-block-group.cdcg-action-bar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
gap: 0.625rem;
margin: 0;
padding: 0.625rem var(--cdcg-gutter) calc(0.625rem + env(safe-area-inset-bottom, 0px));
background: rgba(11, 11, 12, 0.94);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-top: 1px solid var(--wp--preset--color--line-dark);
transition: transform 0.35s var(--cdcg-ease);
}
.cdcg-action-bar > * {
margin: 0 !important;
}
.cdcg-action-bar .cdcg-phone-link {
flex: 0 0 auto;
}
.cdcg-action-bar .cdcg-phone-link a {
justify-content: center;
min-height: 50px;
padding: 0 1.15rem;
border: 2px solid rgba(245, 245, 244, 0.55);
border-radius: var(--cdcg-radius);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.cdcg-action-bar__start {
flex: 1 1 auto;
}
.cdcg-action-bar__start .wp-block-button {
width: 100%;
}
.cdcg-action-bar__start .wp-block-button__link {
min-height: 50px;
width: 100%;
}
.cdcg-menu-open .cdcg-action-bar,
.cdcg-bar-hidden .cdcg-action-bar {
transform: translateY(110%);
}
/* Off screen beside a lead form: also out of the tab order and the accessibility tree. */
.cdcg-bar-hidden .cdcg-action-bar {
visibility: hidden;
transition: transform 0.35s var(--cdcg-ease), visibility 0s linear 0.35s;
}
}
/* 13 — Project case study ------------------------------------------------- */
.wp-block-cover.cdcg-project-hero {
min-height: max(34rem, min(82svh, 58rem)) !important;
padding-top: calc(var(--cdcg-header-h) + var(--wp--preset--spacing--70));
padding-bottom: var(--wp--preset--spacing--60);
}
/* No photo yet: there is nothing to look at above the title, so the hero closes up around
the text on a blueprint ground instead of standing 82% of the screen tall. */
.wp-block-cover.cdcg-project-hero:not(:has(.wp-block-cover__image-background)) {
min-height: 0 !important;
background: var(--cdcg-blueprint), var(--wp--preset--color--ink);
}
.cdcg-project-hero__title {
font-size: var(--wp--preset--font-size--gigantic);
max-width: 18ch;
}
.cdcg-project-hero__services {
margin-bottom: 1.25rem !important;
}
@media (max-width: 781.98px) {
/* Small orange caps over a bright photo: same lift as the feature cards' text. */
.cdcg-project-hero__services {
text-shadow: 0 1px 2px rgba(11, 11, 12, 0.85), 0 0 14px rgba(11, 11, 12, 0.6);
}
}
.cdcg-project-hero .cdcg-hero__sub {
max-width: 46rem !important;
}
.wp-block-group.cdcg-project-meta {
gap: 0.6rem 2rem;
margin-top: 2rem !important;
padding-top: 1.4rem;
border-top: 1px solid rgba(245, 245, 244, 0.16);
}
.wp-block-group.cdcg-project-meta:not(:has(> *)) {
display: none;
}
.cdcg-meta {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin: 0;
color: var(--wp--preset--color--on-dark);
font-family: var(--wp--preset--font-family--display);
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.cdcg-meta::before {
content: "";
flex: none;
width: 1.05rem;
height: 1.05rem;
background: var(--wp--preset--color--orange);
-webkit-mask: var(--cdcg-i-pin) center / contain no-repeat;
mask: var(--cdcg-i-pin) center / contain no-repeat;
}
.cdcg-meta--date::before {
-webkit-mask-image: var(--cdcg-i-calendar);
mask-image: var(--cdcg-i-calendar);
}
.cdcg-meta--status::before {
-webkit-mask-image: var(--cdcg-i-status);
mask-image: var(--cdcg-i-status);
}
.cdcg-meta--photos::before {
-webkit-mask-image: var(--cdcg-i-photo);
mask-image: var(--cdcg-i-photo);
}
.cdcg-meta--photos a {
display: inline-flex;
align-items: center;
min-height: 24px;
color: inherit;
text-decoration: underline;
text-decoration-color: var(--wp--preset--color--orange);
text-decoration-thickness: 2px;
text-underline-offset: 0.3em;
}
.cdcg-meta--photos a:hover {
color: var(--wp--preset--color--orange);
}
.wp-block-group.cdcg-project-notice {
padding-block: var(--wp--preset--spacing--50);
}
.wp-block-group.cdcg-project-stats {
padding-block: var(--wp--preset--spacing--60);
}
.wp-block-group.cdcg-project-body {
padding-block: var(--wp--preset--spacing--70);
}
.wp-block-columns.cdcg-project-columns {
gap: clamp(2rem, 5vw, 5rem);
}
.cdcg-project-main > * + * {
margin-top: var(--wp--preset--spacing--60);
}
.cdcg-project-content:empty {
display: none;
}
/* A job with no written story yet: drop the empty story column and let the facts panel and
the call-to-action card share the full width. */
.cdcg-project-columns:not(:has(.wp-block-cdcg-project-story, .cdcg-project-content:not(:empty))) > .cdcg-project-main {
display: none;
}
@media (min-width: 782px) {
.cdcg-project-columns:not(:has(.wp-block-cdcg-project-story, .cdcg-project-content:not(:empty))) > .cdcg-project-side {
flex-basis: 100% !important;
}
.cdcg-project-columns:not(:has(.wp-block-cdcg-project-story, .cdcg-project-content:not(:empty))) .cdcg-project-aside {
position: static;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
align-items: start;
}
}
.cdcg-project-aside {
display: grid;
gap: 1.5rem;
}
.cdcg-project-aside > * {
margin: 0 !important;
}
@media (min-width: 782px) {
.cdcg-project-aside {
position: sticky;
top: calc(var(--cdcg-header-h) + 1.5rem);
}
}
@media (max-width: 781.98px) {
.cdcg-project-side {
order: -1;
}
/* The facts panel sits above the story here; its own one-line "Start a project" link
is the only CTA it needs (the sticky action bar and closing band cover the rest). */
.cdcg-project-aside .cdcg-aside-cta {
display: none;
}
}
/* Wide screens: the sticky aside ends with the CTA card, so the facts panel's own
"Planning something similar?" line would say the same thing twice. */
@media (min-width: 782px) {
.cdcg-project-aside:has(.cdcg-aside-cta) .cdcg-facts__cta {
display: none;
}
}
.cdcg-aside-cta > * {
margin-block: 0;
}
.cdcg-aside-cta > * + * {
margin-top: 1rem;
}
.cdcg-aside-cta__title {
font-size: var(--wp--preset--font-size--x-large);
font-weight: 800;
text-transform: uppercase;
line-height: 1;
}
.cdcg-aside-cta__text {
color: var(--wp--preset--color--muted-on-dark);
font-size: 1rem;
}
.cdcg-aside-cta .wp-block-buttons {
margin-top: 1.5rem;
}
.wp-block-group.cdcg-project-section {
padding-block: var(--wp--preset--spacing--60);
}
.cdcg-project-section:not(.is-style-section-dark) + .cdcg-project-section:not(.is-style-section-dark) {
padding-top: 0;
}
.wp-block-group.cdcg-project-chips-grid {
gap: 1.5rem;
}
/* 14 — Portfolio, search, index, 404 ------------------------------------- */
.cdcg-portfolio-hero__stats {
margin-top: var(--wp--preset--spacing--60) !important;
padding-top: var(--wp--preset--spacing--50);
border-top: 1px solid var(--wp--preset--color--line-dark);
}
.wp-block-group.cdcg-portfolio-grid {
padding-top: var(--wp--preset--spacing--60);
}
/* Content pages: breathing room unless the content brings its own full-bleed sections. */
.wp-block-post-content.cdcg-page-content {
padding-block: var(--wp--preset--spacing--70);
}
.wp-block-post-content.cdcg-page-content:has(> .alignfull:first-child) {
padding-top: 0;
}
.wp-block-post-content.cdcg-page-content:has(> .alignfull:last-child) {
padding-bottom: 0;
}
.cdcg-page-content > h2,
.cdcg-article__content > h2 {
font-size: var(--wp--preset--font-size--xx-large);
margin-top: 2.5em;
}
.cdcg-page-content > h3,
.cdcg-article__content > h3 {
font-size: var(--wp--preset--font-size--x-large);
margin-top: 2em;
}
/* Search form (dark hero + 404). */
.cdcg-search {
max-width: 40rem;
margin-top: 2rem !important;
}
.cdcg-search .wp-block-search__inside-wrapper {
gap: 0.5rem;
padding: 0;
border: 0;
background: transparent;
}
.cdcg-search .wp-block-search__input {
min-height: 56px;
padding: 0 1.25rem;
border: 1px solid var(--cdcg-rule);
border-radius: var(--cdcg-radius);
background: var(--wp--preset--color--char);
color: var(--wp--preset--color--on-dark);
font-family: var(--wp--preset--font-family--body);
font-size: 1.0625rem;
}
.cdcg-search .wp-block-search__input::placeholder {
color: var(--wp--preset--color--muted-on-dark);
opacity: 1;
}
.cdcg-search .wp-block-search__input:focus {
border-color: var(--wp--preset--color--orange);
outline: 2px solid var(--wp--preset--color--orange);
outline-offset: 0;
}
.cdcg-search .wp-block-search__button {
margin: 0;
min-height: 56px;
flex: none;
}
.wp-block-query.cdcg-results > * + * {
margin-top: var(--wp--preset--spacing--50);
}
.cdcg-results__count {
margin: 0;
color: var(--cdcg-muted);
font-family: var(--wp--preset--font-family--display);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.wp-block-post-template.cdcg-result-grid {
gap: clamp(1rem, 2vw, 1.75rem);
/* Text-only results (pages) must not stretch to the height of an image card beside them. */
align-items: start;
}
/* From tablet up, results are one list of horizontal rows (thumbnail left when the result has
one), so tall project cards and short page cards never leave holes in a grid. */
@media (min-width: 600px) {
.wp-block-post-template.cdcg-result-grid {
grid-template-columns: minmax(0, 1fr);
max-width: 62rem;
}
.wp-block-group.cdcg-result-card:has(> .wp-block-post-featured-image) {
display: grid;
grid-template-columns: minmax(11rem, 34%) minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
align-items: start;
}
.cdcg-result-card > .wp-block-post-featured-image {
grid-column: 1;
grid-row: 1 / -1;
}
.cdcg-result-card:has(> .wp-block-post-featured-image) > :not(.wp-block-post-featured-image) {
grid-column: 2;
}
}
.wp-block-group.cdcg-result-card {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
transition: transform 0.4s var(--cdcg-ease), box-shadow 0.4s var(--cdcg-ease);
}
.cdcg-result-card > * {
margin: 0 !important;
}
.cdcg-result-card > :not(.wp-block-post-featured-image) {
padding-inline: clamp(1.25rem, 2vw, 1.75rem);
}
.cdcg-result-card > :first-child:not(.wp-block-post-featured-image),
.cdcg-result-card > .wp-block-post-featured-image + * {
padding-top: 1.5rem;
}
.cdcg-result-card > :last-child {
padding-bottom: 1.75rem;
}
.cdcg-result-card__image {
overflow: hidden;
}
.cdcg-result-card__image img {
transition: transform 0.9s var(--cdcg-ease);
}
.cdcg-result-card__type,
.cdcg-result-card__meta {
font-size: 0.8125rem !important;
color: var(--cdcg-accent);
}
.cdcg-result-card__title {
margin-top: 0.6rem !important;
font-size: var(--wp--preset--font-size--x-large);
font-weight: 800;
line-height: 1.02;
text-transform: uppercase;
}
.cdcg-result-card__title a {
color: var(--wp--preset--color--text);
text-decoration: none;
}
.cdcg-result-card__title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.cdcg-result-card__excerpt {
margin-top: 0.75rem !important;
color: var(--cdcg-muted);
font-size: 1rem;
line-height: 1.5;
}
.cdcg-result-card__excerpt p {
margin: 0;
}
.wp-block-group.cdcg-result-card:hover,
.wp-block-group.cdcg-result-card:focus-within {
transform: translateY(-4px);
box-shadow: var(--cdcg-shadow-lift);
}
.cdcg-result-card:hover .cdcg-result-card__image img {
transform: scale(1.05);
}
.cdcg-pagination {
gap: 0.5rem;
margin-top: var(--wp--preset--spacing--60) !important;
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
}
.cdcg-pagination a,
.cdcg-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 46px;
min-height: 46px;
padding: 0 0.9rem;
border: 1px solid var(--cdcg-rule);
border-radius: var(--cdcg-radius);
background: var(--wp--preset--color--paper);
color: var(--wp--preset--color--text);
text-decoration: none;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.cdcg-pagination .page-numbers.current {
background: var(--wp--preset--color--ink);
border-color: var(--wp--preset--color--ink);
color: var(--wp--preset--color--on-dark);
}
.cdcg-pagination a:hover {
border-color: var(--wp--preset--color--ink);
}
.cdcg-empty-state {
max-width: 46rem;
}
.cdcg-empty-state > * + * {
margin-top: 1.25rem;
}
.cdcg-empty-state p {
color: var(--cdcg-muted);
}
.cdcg-empty-state .wp-block-buttons {
margin-top: 2rem;
}
/* Single post. */
.wp-block-group.cdcg-article {
padding-block: var(--wp--preset--spacing--70);
}
.cdcg-article__image {
margin-bottom: var(--wp--preset--spacing--60) !important;
border-radius: var(--cdcg-radius-lg);
overflow: hidden;
}
.cdcg-post-date {
margin-top: 1.5rem !important;
color: var(--wp--preset--color--muted-on-dark);
}
.cdcg-post-nav {
margin-top: var(--wp--preset--spacing--60) !important;
padding-top: 2rem;
border-top: 1px solid var(--cdcg-rule);
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* 404. */
.wp-block-group.cdcg-404 {
min-height: 100svh;
padding-top: calc(var(--cdcg-header-h) + var(--wp--preset--spacing--60));
padding-bottom: var(--wp--preset--spacing--70);
overflow: hidden;
}
.cdcg-404__inner > * {
margin-block: 0;
}
.cdcg-404__code {
margin-bottom: 0.25rem !important;
color: transparent;
-webkit-text-stroke: 2px rgba(251, 110, 0, 0.7);
font-family: var(--wp--preset--font-family--display);
font-weight: 800;
font-style: italic;
font-size: clamp(7rem, 24vw, 20rem);
line-height: 0.78;
letter-spacing: -0.03em;
user-select: none;
}
.cdcg-404 .is-style-eyebrow {
margin-top: 1.5rem !important;
}
.cdcg-404__title {
margin-top: 1rem !important;
font-size: var(--wp--preset--font-size--gigantic);
max-width: 15ch;
}
.cdcg-404__lead {
margin-top: 1.5rem !important;
max-width: 44rem !important;
}
.wp-block-group.cdcg-404__links {
margin-top: var(--wp--preset--spacing--60) !important;
gap: 1rem;
}
.wp-block-group.cdcg-link-card {
transition: border-color 0.3s ease, transform 0.4s var(--cdcg-ease), background-color 0.3s ease;
}
.cdcg-link-card > * {
margin-block: 0;
}
.cdcg-link-card__num {
color: var(--wp--preset--color--orange);
font-family: var(--wp--preset--font-family--display);
font-weight: 800;
font-style: italic;
letter-spacing: 0.1em;
}
.cdcg-link-card__title {
margin-top: 2.5rem !important;
font-size: var(--wp--preset--font-size--xx-large);
font-weight: 800;
text-transform: uppercase;
line-height: 1;
}
.cdcg-link-card__title a {
color: var(--wp--preset--color--on-dark) !important;
text-decoration: none;
}
.cdcg-link-card__title a::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--cdcg-radius-lg);
}
.cdcg-link-card__text {
margin-top: 0.75rem !important;
color: var(--wp--preset--color--muted-on-dark);
font-size: 1rem;
}
.cdcg-link-card::after {
content: "";
position: absolute;
top: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
right: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
width: 1.4rem;
height: 1.4rem;
background: var(--wp--preset--color--orange);
-webkit-mask: var(--cdcg-i-arrow-ne) center / contain no-repeat;
mask: var(--cdcg-i-arrow-ne) center / contain no-repeat;
transition: transform 0.4s var(--cdcg-ease);
}
.wp-block-group.cdcg-link-card:hover {
border-color: var(--wp--preset--color--orange);
transform: translateY(-4px);
}
.cdcg-link-card:hover::after {
transform: translate(3px, -3px);
}
.cdcg-404__more {
margin-top: 2rem !important;
color: var(--wp--preset--color--muted-on-dark);
}
/* 15 — Image-slot placeholders ------------------------------------------- */
/* An unresolved `slot:` image is removed server-side (inc/slots.php); these keep the
layout deliberate: dark surface, blueprint grid, a warm glow. */
img[src^="slot:"] {
visibility: hidden;
}
.wp-block-cover.cdcg-slot-empty {
background-color: var(--wp--preset--color--ink);
background-image:
radial-gradient(ellipse 60% 70% at 88% 18%, rgba(251, 110, 0, 0.22), transparent 62%),
radial-gradient(ellipse 50% 60% at 10% 100%, rgba(251, 110, 0, 0.08), transparent 70%),
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: auto, auto, 40px 40px, 40px 40px;
}
.wp-block-cover.cdcg-service-card.cdcg-slot-empty {
background-color: var(--wp--preset--color--char);
background-image:
radial-gradient(ellipse 90% 60% at 100% 0%, rgba(251, 110, 0, 0.2), transparent 65%),
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: auto, 32px 32px, 32px 32px;
}
.wp-block-image.cdcg-slot-empty,
.wp-block-media-text.cdcg-slot-empty .wp-block-media-text__media {
position: relative;
aspect-ratio: var(--cdcg-slot-ratio, 4 / 5);
min-height: 18rem;
background-color: var(--wp--preset--color--char);
background-image:
radial-gradient(ellipse 80% 60% at 80% 10%, rgba(251, 110, 0, 0.22), transparent 65%),
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: auto, 32px 32px, 32px 32px;
}
.wp-block-media-text.cdcg-slot-empty .wp-block-media-text__media {
aspect-ratio: var(--cdcg-slot-ratio, 5 / 4);
}
.wp-block-image.cdcg-slot-empty::after,
.wp-block-media-text.cdcg-slot-empty .wp-block-media-text__media::after {
content: "";
position: absolute;
left: 12%;
bottom: 14%;
width: 42%;
height: 26px;
background:
linear-gradient(var(--wp--preset--color--orange), var(--wp--preset--color--orange)) 0 0 / 100% 6px no-repeat,
linear-gradient(var(--wp--preset--color--orange), var(--wp--preset--color--orange)) 18% 100% / 74% 6px no-repeat;
transform: skewX(-24deg);
opacity: 0.9;
}
/* 16 — Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
.cdcg-motion .cdcg-reveal:not(.is-revealed),
.cdcg-motion .cdcg-stagger > :not(.is-revealed) {
opacity: 0;
transform: translate3d(0, 14px, 0);
}
.cdcg-motion .cdcg-reveal,
.cdcg-motion .cdcg-stagger > * {
transition:
opacity 0.8s var(--cdcg-ease),
transform 0.8s var(--cdcg-ease),
box-shadow 0.5s var(--cdcg-ease),
background-color 0.35s ease,
border-color 0.3s ease;
transition-delay: calc(var(--cdcg-i, 0) * 80ms);
}
.cdcg-motion .cdcg-stagger > .is-revealed:hover {
transition-delay: 0s;
}
/* Cross-document page transitions (Chromium/Safari); harmless elsewhere. */
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.28s;
animation-timing-function: var(--cdcg-ease);
}
}
/* 16b — Quiet motion details (site.js §7–8). Everything here only exists under
prefers-reduced-motion: no-preference; the default state is the finished design. */
/* Animatable sweep angle for the "Why choose" icon draw. */
@property --cdcg-draw {
syntax: "";
inherits: false;
initial-value: 360deg;
}
/* Service card loops (hover mode): framed like the photo, quicker fade, same slow zoom. */
.cdcg-service-card .cdcg-cover-video--hover {
transition: opacity 0.5s ease, transform 1.2s var(--cdcg-ease);
}
.cdcg-service-card:hover .cdcg-cover-video--hover {
transform: scale(1.06);
}
@media (prefers-reduced-motion: no-preference) {
/* Signature speed bars slide in from the right: on load in the home hero, on reveal in
the closing call-to-action band. */
.cdcg-hero--home::after {
animation: cdcg-bars-in 0.9s var(--cdcg-ease) 0.35s both;
}
.cdcg-motion .wp-block-cover.cdcg-cta-band::after {
transition: opacity 0.9s var(--cdcg-ease) 0.25s, transform 0.9s var(--cdcg-ease) 0.25s;
}
.cdcg-motion .wp-block-cover.cdcg-cta-band:has(.cdcg-reveal:not(.is-revealed))::after {
opacity: 0;
transform: translateX(14%) skewX(-24deg);
}
/* Eyebrow speed-bar marks draw out to full width: with the hero on load, with their
section everywhere else. */
.cdcg-hero .is-style-eyebrow::before {
animation: cdcg-bar-draw 0.7s var(--cdcg-ease) 0.2s both;
}
.cdcg-motion .is-style-eyebrow::before {
transition: clip-path 0.7s var(--cdcg-ease) 0.3s;
}
.cdcg-motion .cdcg-reveal:not(.is-revealed) .is-style-eyebrow::before,
.cdcg-motion .cdcg-stagger > :not(.is-revealed) .is-style-eyebrow::before {
clip-path: inset(0 100% 0 0);
}
/* "Why choose" icons draw in with a sweep as their card reveals. */
.cdcg-motion .cdcg-why-item::before {
-webkit-mask: var(--cdcg-icon, var(--cdcg-i-check)) center / contain no-repeat, conic-gradient(from -90deg, #000 var(--cdcg-draw), transparent 0);
-webkit-mask-composite: source-in;
mask: var(--cdcg-icon, var(--cdcg-i-check)) center / contain no-repeat, conic-gradient(from -90deg, #000 var(--cdcg-draw), transparent 0);
mask-composite: intersect;
}
/* Hidden cards drop straight to an empty sweep; only the reveal is animated. */
.cdcg-motion .cdcg-stagger > .cdcg-why-item:not(.is-revealed)::before {
--cdcg-draw: 0deg;
}
.cdcg-motion .cdcg-stagger > .cdcg-why-item.is-revealed::before {
transition: transform 0.45s var(--cdcg-ease), --cdcg-draw 1s var(--cdcg-ease) calc(var(--cdcg-i, 0) * 80ms + 250ms);
}
/* Home "How it works": the rail draws across, the diamond pops in and flashes orange,
the outlined numeral fills for a beat. Hover keeps working once the beat has passed. */
.cdcg-steps.cdcg-draw > .cdcg-step {
border-top-color: transparent;
}
.cdcg-steps.cdcg-draw > .cdcg-step::after {
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: var(--cdcg-rule);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.8s var(--cdcg-ease) calc(var(--cdcg-batch, 0) * 120ms);
}
.cdcg-steps.cdcg-draw > .cdcg-step::before {
transform: rotate(45deg) scale(0);
transition: transform 0.5s var(--cdcg-ease) calc(var(--cdcg-batch, 0) * 120ms + 120ms), background-color 0.3s ease;
}
.cdcg-steps.cdcg-draw > .cdcg-step.is-drawn::after {
transform: none;
}
.cdcg-steps.cdcg-draw > .cdcg-step.is-drawn::before {
transform: rotate(45deg);
animation: cdcg-diamond-lit 1.2s ease-out calc(var(--cdcg-batch, 0) * 120ms + 220ms);
}
.cdcg-steps.cdcg-draw > .cdcg-step.is-drawn .cdcg-step__num {
animation: cdcg-numeral-lit 1.4s ease-out calc(var(--cdcg-batch, 0) * 120ms + 260ms);
}
/* Process page: each stage's number rises in as its card arrives. */
.cdcg-draw-card .cdcg-step-number {
opacity: 0.15;
transform: translate3d(0, 10px, 0);
transition: opacity 0.7s var(--cdcg-ease) 0.1s, transform 0.7s var(--cdcg-ease) 0.1s;
}
.cdcg-draw-card.is-drawn .cdcg-step-number {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: no-preference) and (max-width: 781.98px) {
/* Stacked steps: the rail runs down the left edge instead. */
.cdcg-steps.cdcg-draw > .cdcg-step {
border-left-color: transparent;
}
.cdcg-steps.cdcg-draw > .cdcg-step::after {
top: 0;
right: auto;
bottom: 0;
left: -1px;
width: 1px;
height: auto;
transform: scaleY(0);
transform-origin: center top;
}
}
@keyframes cdcg-bars-in {
from {
opacity: 0;
transform: translateX(14%) skewX(-24deg);
}
to {
opacity: 1;
transform: skewX(-24deg);
}
}
@keyframes cdcg-bar-draw {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
@keyframes cdcg-diamond-lit {
0%,
100% {
background-color: var(--wp--preset--color--ink);
}
35% {
background-color: var(--wp--preset--color--orange);
}
}
@keyframes cdcg-numeral-lit {
0%,
100% {
color: transparent;
}
35% {
color: var(--wp--preset--color--orange);
}
}
/* 17 — Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
.cdcg-service-card:hover .wp-block-cover__image-background,
.cdcg-result-card:hover .cdcg-result-card__image img,
.wp-block-cover.cdcg-service-card:hover,
.wp-block-group.cdcg-result-card:hover,
.wp-block-group.cdcg-link-card:hover {
transform: none;
}
}
/* 18 — Print: a clean one-page case study for RFQ packets ------------------ */
@media print {
@page {
margin: 14mm 12mm;
}
:root {
--cdcg-header-h: 0px;
}
html,
body {
background: #fff !important;
color: #000 !important;
font-size: 10.5pt;
padding: 0 !important;
}
body::before {
content: "CD Construction Group LLC — Project case study";
display: block;
margin-bottom: 6mm;
padding-bottom: 3mm;
border-bottom: 2pt solid #fb6e00;
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
font-size: 11pt;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body:not(.cdcg-is-project)::before {
content: "CD Construction Group LLC";
}
html body .cdcg-site-header,
html body .cdcg-action-bar,
html body .cdcg-footer-cta,
html body .cdcg-cta-band,
html body .cdcg-project-related,
html body .cdcg-project-video-section,
html body .cdcg-aside-cta,
html body .cdcg-menu-toggle,
html body .wp-block-buttons,
html body .wp-block-search,
html body .skip-link,
html body .cdcg-hero--home::after,
html body #wpadminbar,
html body .cdcg-footer-main > :not(.cdcg-footer-contact),
html body .cdcg-footer-contact__note,
html body .cdcg-footer-contact .cdcg-link-arrow {
display: none !important;
}
*,
*::before,
*::after {
box-shadow: none !important;
text-shadow: none !important;
animation: none !important;
transition: none !important;
}
.cdcg-motion .cdcg-reveal,
.cdcg-motion .cdcg-stagger > * {
opacity: 1 !important;
transform: none !important;
}
.is-style-section-dark,
.is-style-card-dark,
.has-ink-background-color,
.wp-block-cover,
.cdcg-footer {
background: #fff !important;
color: #000 !important;
}
.is-style-section-dark::before,
.cdcg-footer::before,
.wp-block-cover__background {
display: none !important;
}
.wp-block-cover {
min-height: 0 !important;
padding: 0 !important;
display: block !important;
}
.wp-block-cover .wp-block-cover__image-background {
position: static !important;
display: block;
width: 100% !important;
height: 7.5cm !important;
object-fit: cover;
margin-bottom: 5mm !important;
}
.wp-block-cover__inner-container,
.wp-block-cover a,
.cdcg-meta,
.cdcg-hero__sub,
.is-style-lead {
color: #000 !important;
}
.cdcg-project-hero__title,
.cdcg-page-hero__title,
.cdcg-hero__title {
font-size: 26pt !important;
max-width: none;
color: #000 !important;
}
.is-style-eyebrow,
.cdcg-meta::before {
color: #b84a00 !important;
}
.cdcg-post-date,
.cdcg-founder__titles,
.cdcg-step__text,
.cdcg-aside-cta__text {
color: #444 !important;
}
.cdcg-project-meta {
border-color: #ccc !important;
}
.wp-block-group.cdcg-project-body,
.wp-block-group.cdcg-project-section,
.wp-block-group.cdcg-project-stats,
.wp-block-group.cdcg-page-hero {
padding: 4mm 0 !important;
}
.wp-block-columns.cdcg-project-columns {
display: grid !important;
grid-template-columns: 1.6fr 1fr;
gap: 8mm !important;
}
.cdcg-project-aside {
position: static !important;
}
.cdcg-project-stats,
.cdcg-project-aside,
.wp-block-image,
figure,
tr,
li {
break-inside: avoid;
}
h1,
h2,
h3 {
break-after: avoid;
color: #000 !important;
}
/* Gallery: first four images, two per row. */
.cdcg-project-gallery-section img {
max-height: 5.5cm;
object-fit: cover;
}
.cdcg-project-gallery-section figure:nth-of-type(n + 5),
.cdcg-project-gallery-section li:nth-of-type(n + 5) {
display: none !important;
}
.cdcg-project-body a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 8pt;
color: #555;
}
.cdcg-footer {
border-top: 1pt solid #ccc;
margin-top: 6mm;
}
html body .wp-block-group.cdcg-footer-main {
display: block;
padding: 4mm 0 0;
}
.cdcg-footer-heading {
color: #000 !important;
margin-bottom: 2mm !important;
}
.cdcg-footer-legal {
border: 0 !important;
color: #333 !important;
}
.cdcg-footer-legal a {
color: #333 !important;
}
}