/* ==========================================================================
NW Shoring component layer v3 — port of the approved standalone prototype.
Cream/white/ink stacked panels, Bricolage display, pill buttons,
marigold-only accent, starburst badge, typewriter hero.
========================================================================== */
:root {
--nws-cream: #FFF6D2;
--nws-marigold: #FFD801;
--nws-ink: #0A0A08;
--nws-paper: #FFFFFF;
--nws-char: #666664;
--nws-oat: #CCCBC7;
--nws-shadow: rgba(70, 58, 0, .12) 0 6px 18px;
--nws-panel-shadow: 0 -18px 40px rgba(10, 10, 8, .16);
--nws-r-card: 20px;
--nws-r-panel: 32px;
--nws-display: "Bricolage Grotesque", "DM Sans", -apple-system, sans-serif;
--nws-sans: "DM Sans", -apple-system, sans-serif;
--nws-mono: "DM Mono", ui-monospace, Menlo, monospace;
}
body { background: var(--nws-ink); } /* peeks behind panel corners */
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.wp-block-post-content > * + * { margin-block-start: 0 !important; }
.wp-block-post-content > .nws-panel { margin-block: 0 !important; }
.wp-block-post-content > .nws-panel:not(.nws-hero) {
padding-top: clamp(56px, 7vw, 96px) !important;
padding-bottom: clamp(64px, 8vw, 110px) !important;
}
main.wp-block-group { padding-bottom: 0 !important; }
.wp-site-blocks { background: transparent; }
main { background: transparent; }
h1, h2, h3 { letter-spacing: -.01em; }
.wp-block-post-content .nws-panel :where(p) { font-size: 1rem; line-height: 1.55; font-weight: 400; }
.nws-panel.has-buttercream-background-color :where(p:not(.nws-eyebrow)),
.nws-panel.has-paper-background-color :where(p:not(.nws-eyebrow)) { color: #3d3d38; }
.wp-block-post-content .nws-panel h2:not(.has-text-align-center) {
font-size: clamp(2.1rem, 4.4vw, 3.3rem) !important;
line-height: 1.03; width: 100%; max-width: 1200px;
margin-top: clamp(16px, 2.5vw, 40px) !important;
margin-left: auto !important; margin-right: auto !important;
}
.wp-block-post-content .nws-panel h2:not(.has-text-align-center) { --nws-h2-measure: 18ch; }
.has-marigold-background-color p.has-large-font-size {
font-size: 1rem !important; max-width: 52ch; margin-left: auto !important; margin-right: auto !important;
}
.has-marigold-background-color h2.has-text-align-center {
font-size: clamp(2.4rem, 5vw, 4rem) !important; max-width: 18ch; margin-left: auto !important; margin-right: auto !important;
}
h1 { line-height: 1.0; }
.nws-mono, .nws-eyebrow {
font-family: var(--nws-mono);
letter-spacing: .08em;
}
/* --------------------------------------------------------------------------
Stacked panels: top-level alignfull groups in post content
-------------------------------------------------------------------------- */
.wp-block-post-content > .nws-panel {
position: sticky; top: 0;
border-radius: var(--nws-r-panel) var(--nws-r-panel) 0 0;
box-shadow: var(--nws-panel-shadow);
overflow: hidden;
background: var(--nws-cream);
}
.wp-block-post-content > .nws-panel:first-child { border-radius: 0; box-shadow: none; }
/* Consecutive white panels read as one surface: the first stops sticking so the
next scrolls normally instead of overlapping, and the seam loses its radius/shadow */
.wp-block-post-content > .nws-panel.has-paper-background-color:has(+ .nws-panel.has-paper-background-color) { position: relative; top: auto !important; }
.wp-block-post-content > .nws-panel.has-paper-background-color + .nws-panel.has-paper-background-color { border-radius: 0; box-shadow: none; }
.wp-block-post-content > .nws-panel.has-paper-background-color { background: var(--nws-paper); }
.wp-block-post-content > .nws-panel.has-ink-background-color { background: var(--nws-ink); }
.wp-block-post-content > .nws-panel.has-marigold-background-color { background: var(--nws-marigold); }
/* Pages without panel markup (service pages): normal flow on cream */
.wp-block-post-content { background: var(--nws-cream); }
/* Cream inset card on a white panel (refero reference pattern): the panel goes
paper, the cream lives in a rounded container around the section's content */
.nws-inset {
background: var(--nws-cream);
border-radius: var(--nws-r-panel);
padding: clamp(28px, 4vw, 56px) clamp(20px, 3.5vw, 52px);
}
/* Short explanatory label at the top of a cream inset card — Apron "Heading Small":
display face, 26px, medium (500) — sub-display scale, never bold, never DM Sans */
.nws-inset .nws-inset-label {
font-family: var(--nws-display);
font-size: clamp(1.55rem, 2.6vw, 2.11rem) !important; /* 26px spec +30% at desktop, min kept under the ~26px mobile section h2 */
font-weight: 500; line-height: 1.2; color: var(--nws-ink) !important;
margin-bottom: 16px;
}
/* Section bands (non-panel pages keep their band rhythm) */
.has-ink-background-color, .has-buttercream-background-color,
.has-paper-background-color, .has-marigold-background-color {
padding-top: clamp(56px, 7vw, 80px);
padding-bottom: clamp(56px, 7vw, 80px);
}
.has-ink-background-color a { color: var(--nws-paper); }
.has-ink-background-color a:hover { color: var(--nws-marigold); }
/* --------------------------------------------------------------------------
Topbar — sticky ink ledger line
-------------------------------------------------------------------------- */
header.wp-block-template-part { position: sticky; top: 0; z-index: 60; }
.nws-topbar {
background: var(--nws-ink);
padding-top: 0 !important; padding-bottom: 0 !important;
}
.nws-topbar p {
margin: 0; padding: 8px 12px; text-align: center;
font-family: var(--nws-mono);
font-size: .72rem !important; letter-spacing: .12em; color: var(--nws-cream);
}
.nws-topbar a { color: inherit; text-decoration: none; }
.nws-topbar a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--nws-marigold); }
@media (max-width: 640px) { .nws-lic { display: none; } }
/* --------------------------------------------------------------------------
Header — sticky cream nav below topbar
-------------------------------------------------------------------------- */
.nws-header {
background: var(--nws-cream);
box-shadow: 0 1px 0 var(--nws-ink);
padding: 12px calc(var(--wp--style--root--padding-right) + 20px) 12px calc(var(--wp--style--root--padding-left) + 20px) !important;
}
.nws-logo { display: inline-flex; align-items: center; }
.nws-logo img { display: block; width: 170px; height: auto; }
@media (min-width: 900px) { .nws-logo img { width: 340px; } }
.nws-header .wp-block-navigation a,
.nws-header .wp-block-navigation .wp-block-navigation-item__content {
font-weight: 400; font-size: .95rem; font-family: inherit; text-decoration: none;
background: none; border: none; cursor: pointer;
}
.nws-header .wp-block-navigation a:hover,
.nws-header .wp-block-navigation button.wp-block-navigation-item__content:hover {
text-decoration: underline; text-underline-offset: 5px;
text-decoration-color: var(--nws-marigold); text-decoration-thickness: 2px;
}
/* --------------------------------------------------------------------------
Buttons — pills; marigold primary, ink-outline secondary
-------------------------------------------------------------------------- */
.wp-block-button__link {
border-radius: 9999px !important;
padding: 14px 28px;
font-family: var(--nws-sans);
font-weight: 500; font-size: .98rem;
transition: transform 80ms ease-out, background-color 140ms ease-out, color 140ms ease-out;
}
.wp-block-button__link:active { transform: translateY(1px); }
.wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--nws-marigold); color: var(--nws-ink); }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--nws-ink); color: var(--nws-paper); }
.wp-block-button.is-style-outline .wp-block-button__link {
background: transparent; border: 1.5px solid var(--nws-ink); color: var(--nws-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--nws-ink); color: var(--nws-paper); }
.nws-btn-jeff .wp-block-button__link { font-weight: 700; }
.nws-btn-ink .wp-block-button__link { background: var(--nws-ink) !important; color: var(--nws-paper) !important; }
.nws-btn-ink .wp-block-button__link:hover { background: var(--nws-marigold) !important; color: var(--nws-ink) !important; }
/* On ink/photo surfaces */
.has-ink-background-color .is-style-outline .wp-block-button__link,
.wp-block-cover .is-style-outline .wp-block-button__link {
border-color: var(--nws-paper); color: var(--nws-paper);
}
.has-ink-background-color .is-style-outline .wp-block-button__link:hover,
.wp-block-cover .is-style-outline .wp-block-button__link:hover {
background: var(--nws-paper); color: var(--nws-ink);
}
/* Ink button on marigold band */
.has-marigold-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link {
background: var(--nws-ink); color: var(--nws-paper);
}
.has-marigold-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
background: var(--nws-paper); color: var(--nws-ink);
}
/* --------------------------------------------------------------------------
Hero cover — photo + warm scrim + typewriter + starburst
-------------------------------------------------------------------------- */
.nws-hero.wp-block-cover { min-height: min(86vh, 760px) !important; border-top: none; }
.nws-hero .wp-block-cover__background { background: linear-gradient(rgba(26,22,8,.68), rgba(26,22,8,.55) 45%, rgba(26,22,8,.74)) !important; opacity: 1 !important; background-image: none; }
.nws-hero h1 { font-size: clamp(2.9rem, 6.8vw, 5.2rem); max-width: 880px !important; margin-left: auto !important; margin-right: auto !important; }
.nws-hero .wp-block-cover__inner-container { width: 100%; }
.nws-hero .nws-lede { color: #EFE9D2 !important; max-width: 46ch !important; margin-left: auto; margin-right: auto; font-size: clamp(1.02rem, 1.4vw, 1.18rem) !important; line-height: 1.55; font-weight: 400 !important; font-family: var(--nws-sans) !important; letter-spacing: 0 !important; }
.nws-hero-note {
font-family: var(--nws-mono); font-size: .72rem !important;
letter-spacing: .16em; color: #D8D2B8 !important; text-transform: uppercase;
}
.nws-typed { white-space: nowrap; }
/* Second hero line as a block span — the block editor strips
from headings
on save, so the line break must not depend on one */
.h1-line2 { display: block; }
.nws-caret {
display: inline-block; width: .09em; height: .92em;
background: var(--nws-marigold); margin-left: .06em; vertical-align: -.08em;
animation: nws-blink 1.05s steps(1) infinite;
}
@keyframes nws-blink { 50% { opacity: 0; } }
.nws-hero em { font-style: normal; position: relative; white-space: nowrap; }
.nws-hero em::after {
content: ""; position: absolute; left: -.04em; right: -.04em; bottom: -.2em;
height: .25em;
background: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat;
}
/* Starburst badge (56 spikes) */
.nws-badge {
--burst: polygon(50.00% 0.00%, 52.55% 4.57%, 55.60% 0.31%, 57.62% 5.14%, 61.13% 1.25%, 62.60% 6.28%, 66.51% 2.81%, 67.41% 7.96%, 71.69% 4.95%, 72.01% 10.18%, 76.60% 7.66%, 76.33% 12.89%, 81.17% 10.91%, 80.32% 16.07%, 85.36% 14.64%, 83.93% 19.68%, 89.09% 18.83%, 87.11% 23.67%, 92.34% 23.40%, 89.82% 27.99%, 95.05% 28.31%, 92.04% 32.59%, 97.19% 33.49%, 93.72% 37.40%, 98.75% 38.87%, 94.86% 42.38%, 99.69% 44.40%, 95.43% 47.45%, 100.00% 50.00%, 95.43% 52.55%, 99.69% 55.60%, 94.86% 57.62%, 98.75% 61.13%, 93.72% 62.60%, 97.19% 66.51%, 92.04% 67.41%, 95.05% 71.69%, 89.82% 72.01%, 92.34% 76.60%, 87.11% 76.33%, 89.09% 81.17%, 83.93% 80.32%, 85.36% 85.36%, 80.32% 83.93%, 81.17% 89.09%, 76.33% 87.11%, 76.60% 92.34%, 72.01% 89.82%, 71.69% 95.05%, 67.41% 92.04%, 66.51% 97.19%, 62.60% 93.72%, 61.13% 98.75%, 57.62% 94.86%, 55.60% 99.69%, 52.55% 95.43%, 50.00% 100.00%, 47.45% 95.43%, 44.40% 99.69%, 42.38% 94.86%, 38.87% 98.75%, 37.40% 93.72%, 33.49% 97.19%, 32.59% 92.04%, 28.31% 95.05%, 27.99% 89.82%, 23.40% 92.34%, 23.67% 87.11%, 18.83% 89.09%, 19.68% 83.93%, 14.64% 85.36%, 16.07% 80.32%, 10.91% 81.17%, 12.89% 76.33%, 7.66% 76.60%, 10.18% 72.01%, 4.95% 71.69%, 7.96% 67.41%, 2.81% 66.51%, 6.28% 62.60%, 1.25% 61.13%, 5.14% 57.62%, 0.31% 55.60%, 4.57% 52.55%, 0.00% 50.00%, 4.57% 47.45%, 0.31% 44.40%, 5.14% 42.38%, 1.25% 38.87%, 6.28% 37.40%, 2.81% 33.49%, 7.96% 32.59%, 4.95% 28.31%, 10.18% 27.99%, 7.66% 23.40%, 12.89% 23.67%, 10.91% 18.83%, 16.07% 19.68%, 14.64% 14.64%, 19.68% 16.07%, 18.83% 10.91%, 23.67% 12.89%, 23.40% 7.66%, 27.99% 10.18%, 28.31% 4.95%, 32.59% 7.96%, 33.49% 2.81%, 37.40% 6.28%, 38.87% 1.25%, 42.38% 5.14%, 44.40% 0.31%, 47.45% 4.57%);
position: absolute; top: calc(clamp(16px, 3vw, 40px) - 120px); right: 0;
width: clamp(132px, 13vw, 172px); height: clamp(104px, 10vw, 136px);
clip-path: var(--burst);
background: var(--nws-marigold); color: var(--nws-ink);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
text-align: center; text-decoration: none;
transform: rotate(7deg); z-index: 5;
filter: drop-shadow(0 5px 10px rgba(70, 58, 0, .25));
animation: nws-seal 5s ease-in-out infinite;
transition: transform .2s ease;
}
.nws-badge > span { position: relative; font-family: var(--nws-display); font-weight: 800; font-size: clamp(.85rem, 1.4vw, 1.15rem); line-height: 1.08; }
.nws-badge:hover { transform: rotate(0deg) scale(1.05); animation-play-state: paused; }
@keyframes nws-seal { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(2deg); } }
/* --------------------------------------------------------------------------
Stats
-------------------------------------------------------------------------- */
.nws-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: clamp(48px, 6vw, 80px); }
.nws-stat-n { font-family: var(--nws-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; }
.nws-stat-n span { color: var(--nws-marigold); -webkit-text-stroke: 1.5px var(--nws-ink); }
.nws-stat-l { font-size: .92rem; color: var(--nws-char); margin-top: 8px; max-width: 22ch; }
@media (max-width: 860px) { .nws-stats { grid-template-columns: repeat(2, 1fr); } }
/* --------------------------------------------------------------------------
Cards & grids (services, symptoms, values)
-------------------------------------------------------------------------- */
.nws-card {
position: relative;
background: var(--nws-cream);
border: 1px solid var(--nws-ink);
border-radius: var(--nws-r-card);
padding: 26px;
transition: transform .15s ease, box-shadow .15s ease;
}
.nws-card:hover { transform: translateY(-3px); box-shadow: var(--nws-shadow); }
.nws-card h3 { margin-top: 0; margin-bottom: 6px; font-size: 1.3rem; }
.nws-card p { margin-bottom: 0; color: #55534A; font-size: .92rem; }
.nws-card a { font-weight: 700; color: var(--nws-ink); }
.nws-card h3 a { text-decoration: none; }
.nws-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--nws-marigold); }
/* Cards whose heading links somewhere (e.g. Related services) are clickable edge to edge */
.nws-card { position: relative; }
.nws-card h3 a::after { content: ""; position: absolute; inset: 0; }
/* Arrow link cue on linked cards, same treatment as homepage bento cells */
.nws-card .nws-cell-link { display: block; }
.nws-card:hover .nws-cell-link { color: #A98F00; }
.wp-block-post-content .nws-panel .nws-grid-3 .nws-card:nth-child(3) .nws-cell-link { color: var(--nws-marigold); }
/* Cards on cream bands read as white islands */
.has-buttercream-background-color .nws-card, .wp-block-post-content > .nws-panel .nws-card { background: var(--nws-paper); }
.wp-block-post-content > .nws-panel.has-paper-background-color .nws-card { background: var(--nws-cream); }
.has-ink-background-color .nws-card { background: var(--nws-ink); border-color: var(--nws-paper); }
.has-ink-background-color .nws-card h3, .has-ink-background-color .nws-card a { color: var(--nws-paper); }
.has-ink-background-color .nws-card p { color: var(--nws-cream); }
/* Accent card variants (services grid rhythm) */
.nws-card.nws-card-gold, .wp-block-post-content > .nws-panel .nws-card.nws-card-gold { background: var(--nws-marigold); }
.nws-card.nws-card-gold p { color: #4A4200; }
.nws-card.nws-card-ink, .wp-block-post-content > .nws-panel .nws-card.nws-card-ink { background: var(--nws-ink); }
.nws-card.nws-card-ink h3, .nws-card.nws-card-ink h3 a { color: var(--nws-paper); }
.nws-card.nws-card-ink p { color: var(--nws-cream); }
/* Screen-reader-only (SEO-safe static text behind the typewriter) */
.nws-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nws-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 781px) { .nws-grid-3 { grid-template-columns: 1fr; } }
/* --------------------------------------------------------------------------
Process steps — mono numerals over dashed rules (ink band)
-------------------------------------------------------------------------- */
.nws-step.nws-eyebrow {
width: auto; height: auto; border-radius: 0; background: transparent;
color: var(--nws-marigold);
font-family: var(--nws-mono); font-weight: 500; font-size: .95rem; letter-spacing: .1em;
display: block; place-items: unset; margin-bottom: 10px;
}
.wp-block-post-content .has-ink-background-color .wp-block-column:has(.nws-step) { border-top: 1px dashed rgba(255,246,210,.4); padding-top: 20px; }
.has-ink-background-color .wp-block-column p.nws-step { color: var(--nws-marigold) !important; }
.has-ink-background-color .wp-block-column h3 { color: var(--nws-paper); font-size: 1.15rem; }
.has-ink-background-color .wp-block-column p { color: #B9B5A4; font-size: .92rem; }
/* Steps on light bands (service pages currently use buttercream process) */
.wp-block-post-content .has-buttercream-background-color .wp-block-column:has(.nws-step) { border-top: 1px dashed rgba(10,10,8,.35); padding-top: 20px; }
/* --------------------------------------------------------------------------
FAQ accordion
-------------------------------------------------------------------------- */
.nws-faq { max-width: 780px !important; margin-left: max(0px, calc((100% - 1200px) / 2)) !important; margin-right: auto !important; }
.nws-faq details { border-bottom: 1px solid var(--nws-ink); padding: 4px 0; }
.nws-faq summary {
font-family: var(--nws-sans); font-weight: 700; cursor: pointer; font-size: 1.05rem;
list-style: none; position: relative; padding: 18px 44px 18px 0;
}
.nws-faq summary::-webkit-details-marker { display: none; }
.nws-faq summary::after {
content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
font-family: var(--nws-mono); font-size: 1.4rem; font-weight: 400;
transition: transform .15s ease;
}
.nws-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.nws-faq details p { margin: 0 0 18px; color: var(--nws-char); max-width: 62ch; }
/* --------------------------------------------------------------------------
Photos & feature tag
-------------------------------------------------------------------------- */
.nws-photo img { border-radius: var(--nws-r-card); border: 1px solid var(--nws-ink); width: 100%; height: auto; object-fit: cover; box-shadow: none; }
.nws-photo .wp-element-caption { font-family: var(--nws-mono); font-size: .78rem; letter-spacing: .04em; color: var(--nws-char); margin-top: 10px; }
.nws-gallery .nws-photo img { aspect-ratio: 4 / 3; }
.nws-featured { gap: clamp(28px, 5vw, 72px); }
.nws-featured .wp-block-column p:not(.nws-eyebrow) { max-width: 52ch; }
.nws-featured .wp-block-column:first-child { position: relative; }
.nws-featured .nws-tag { position: absolute; right: -8px; top: 26px; }
.nws-featured .nws-photo img { aspect-ratio: 4 / 4.6; }
.nws-tag {
display: inline-block; transform: rotate(2deg);
background: var(--nws-marigold); border: 1px solid var(--nws-ink); border-radius: 9999px;
padding: 9px 18px; font-family: var(--nws-mono); font-size: .68rem; letter-spacing: .14em; font-weight: 500;
box-shadow: var(--nws-shadow);
}
.nws-ledger-list { list-style: none; padding-left: 0; margin: 22px 0 26px; }
.nws-ledger-list li {
font-family: var(--nws-mono); font-size: .74rem; letter-spacing: .12em;
padding: 11px 0 11px 26px; position: relative;
border-bottom: 1px solid rgba(10,10,8,.25);
}
.nws-ledger-list li::before { content: "→"; position: absolute; left: 0; color: #A98F00; }
.nws-panel.has-paper-background-color .wp-block-columns .nws-photo img { transform: rotate(1.5deg); }
/* --------------------------------------------------------------------------
Forms (Contact Form 7)
-------------------------------------------------------------------------- */
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea {
width: 100%; padding: 11px 14px; border: 1.5px solid var(--nws-oat); border-radius: 16px;
font: 400 1rem var(--nws-sans); background: var(--nws-paper); resize: vertical;
}
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--nws-ink); }
.wpcf7 input[type=submit] {
background: var(--nws-marigold); color: var(--nws-ink);
border: 0; border-radius: 9999px; padding: 16px 32px;
font-family: var(--nws-sans); font-weight: 700; font-size: 1rem; cursor: pointer;
}
.wpcf7 input[type=submit]:hover { background: var(--nws-ink); color: var(--nws-paper); }
.wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; }
.wpcf7-form p { min-width: 0; }
.wpcf7 input, .wpcf7 textarea { box-sizing: border-box; }
.wpcf7-form > p { margin: 0; font-weight: 700; font-size: .9rem; }
.wpcf7-form > p:has(textarea), .wpcf7-form > p:has(input[type=submit]), .wpcf7-form .wpcf7-response-output { grid-column: 1 / -1; }
.wpcf7-form input[type=submit] { justify-self: start; }
@media (max-width: 640px) { .wpcf7-form { grid-template-columns: 1fr; } }
#get-in-touch > * {
max-width: 780px !important;
margin-left: auto !important;
margin-right: auto !important;
}
#get-in-touch h2 { max-width: 780px !important; }
/* --------------------------------------------------------------------------
Sticky mobile CTA
-------------------------------------------------------------------------- */
.nws-sticky-cta {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
display: none; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--nws-ink);
box-shadow: 0 -2px 12px rgba(10,10,8,.25);
}
.nws-sticky-cta a { padding: 14px 8px; text-align: center; font: 700 .93rem var(--nws-sans); text-decoration: none; }
.nws-sticky-cta .nws-btn-phone { background: var(--nws-ink); color: var(--nws-paper); }
.nws-sticky-cta .nws-btn-estimate { background: var(--nws-marigold); color: var(--nws-ink); }
@media (max-width: 781px) {
.nws-sticky-cta { display: grid; }
body { padding-bottom: 52px; }
.nws-header .wp-block-buttons:has(.nws-cta-header), .wp-block-button.nws-cta-header { display: none !important; }
/* Fixed CTA bar covers the last step of "How it works" panels — give them room */
.wp-block-post-content > .nws-panel:has(.nws-step) { padding-bottom: 150px !important; }
/* Homepage FAQ: same fix, scoped here only (subpage/FAQ-hub accordions sit
mid-panel with more trailing content already, so they don't need it) */
.wp-block-post-content > .nws-panel.nws-home-faq { padding-bottom: 150px !important; }
}
/* --------------------------------------------------------------------------
Footer
-------------------------------------------------------------------------- */
footer .wp-block-group.has-background {
padding-left: var(--wp--style--root--padding-left);
padding-right: var(--wp--style--root--padding-right);
background: var(--nws-ink) !important; color: var(--nws-paper);
position: relative; z-index: 2;
border-radius: var(--nws-r-panel) var(--nws-r-panel) 0 0;
box-shadow: var(--nws-panel-shadow);
overflow: hidden;
}
footer .wp-block-columns { gap: 40px; }
footer p, footer .f-p { color: #B9B5A4; }
.nws-copyright { color: #B9B5A4; font-weight: 400; }
.nws-copyright a { font-weight: 700; }
footer h2 {
font-family: var(--nws-mono) !important; font-weight: 500 !important;
font-size: .72rem !important; letter-spacing: .18em; text-transform: uppercase;
color: var(--nws-cream); overflow-wrap: normal; hyphens: none;
}
footer .wp-block-list { list-style: none; padding-left: 0; }
footer .wp-block-list li { padding: 3px 0; font-size: var(--wp--preset--font-size--small); font-weight: 400; }
footer a { text-decoration: none; color: #B9B5A4 !important; font-size: inherit; font-weight: inherit; }
footer a:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--nws-marigold) !important; }
footer .wp-block-list li { color: #B9B5A4 !important; }
.nws-f-logo { width: 170px; height: auto; margin-bottom: 16px; }
@media (min-width: 900px) { .nws-f-logo { width: 340px; } }
.nws-footer-mark {
font-family: var(--nws-display); font-weight: 800; text-align: center;
font-size: clamp(3.4rem, 11vw, 9rem); line-height: 1; color: rgba(255,246,210,.07);
margin: 48px -20px 8px; white-space: nowrap; user-select: none;
}
/* Small screens: the wordmark must still fit on one line inside the padded footer */
@media (max-width: 620px) {
.nws-footer-mark { font-size: 9vw; margin-left: 0; margin-right: 0; }
}
/* --------------------------------------------------------------------------
Reveal + motion restraint
-------------------------------------------------------------------------- */
.js .nws-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.js .nws-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .nws-reveal { opacity: 1; transform: none; transition: none; }
.nws-caret, .nws-badge { animation: none; }
.nws-card, .wp-block-button__link { transition: none; }
.wp-block-post-content > .nws-panel { position: static; }
}
/* --------------------------------------------------------------------------
Services bento (ported verbatim from prototype)
-------------------------------------------------------------------------- */
.nws-bento {
display: grid; gap: 18px; margin-top: 40px;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
max-width: 1200px; margin-left: auto; margin-right: auto;
}
.nws-cell {
position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
background: var(--nws-cream); border: 1px solid var(--nws-ink); border-radius: var(--nws-r-card);
padding: 26px; text-decoration: none; color: var(--nws-ink);
transition: transform .15s ease, box-shadow .15s ease;
}
.nws-cell:hover { transform: translateY(-3px); box-shadow: var(--nws-shadow); }
.nws-cell h3 { margin: 0 0 6px; font-size: 1.3rem; }
.nws-cell p, .nws-cell .nws-cell-desc { display: block; margin: 0; color: #55534A; font-size: .92rem; line-height: 1.55; }
.nws-cell-link { margin-top: 12px; font-family: var(--nws-mono); font-size: .7rem; letter-spacing: .16em; font-weight: 500; }
.nws-cell:hover .nws-cell-link { color: #A98F00; }
.nws-cell-hero { grid-column: span 2; grid-row: span 2; padding: 0; }
.nws-cell-photo { grid-column: span 2; padding: 0; }
.nws-cell-hero img, .nws-cell-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nws-cell-hero .nws-cell-body, .nws-cell-photo .nws-cell-body {
position: relative; margin-top: auto; background: linear-gradient(transparent, rgba(10,10,8,.82) 38%);
padding: 56px 26px 26px; color: var(--nws-paper);
}
.nws-cell-hero .nws-cell-body h3, .nws-cell-photo .nws-cell-body h3 { color: var(--nws-paper); }
.nws-cell-hero .nws-cell-body p, .nws-cell-photo .nws-cell-body p,
.nws-cell-hero .nws-cell-body .nws-cell-desc, .nws-cell-photo .nws-cell-body .nws-cell-desc { color: #E8E4D2; }
.nws-cell-hero .nws-cell-body .nws-cell-link, .nws-cell-photo .nws-cell-body .nws-cell-link { color: var(--nws-marigold); }
.nws-cell-gold { background: var(--nws-marigold); }
.nws-cell-gold p, .nws-cell-gold .nws-cell-desc { color: #4A4200; }
.nws-cell-ink { background: var(--nws-ink); }
.nws-cell-ink h3 { color: var(--nws-paper); }
.nws-cell-ink p, .nws-cell-ink .nws-cell-desc { color: var(--nws-cream); }
.nws-cell-ink .nws-cell-link { color: var(--nws-marigold); }
/* Paper-panel paragraph tint (.nws-panel.has-paper-background-color :where(p)) must not
reach colored bento cells — these need the extra .nws-panel to win the specificity race */
.nws-panel .nws-cell-gold p, .nws-panel .nws-cell-gold .nws-cell-desc { color: #4A4200; }
.nws-panel .nws-cell-ink p, .nws-panel .nws-cell-ink .nws-cell-desc { color: var(--nws-cream); }
@media (max-width: 980px) {
.nws-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
.nws-cell-hero { grid-column: span 2; min-height: 320px; }
.nws-cell-photo { grid-column: span 2; min-height: 220px; }
}
@media (max-width: 560px) { .nws-bento { grid-template-columns: 1fr; } .nws-cell-hero, .nws-cell-photo { grid-column: span 1; } }
/* "When you need this" bento (subpages): hero image cell + stagger-step like homepage.
Rows grow with copy; the wide cell closes the rectangle next to the 2x2 hero. */
.nws-bento-need { grid-auto-rows: minmax(200px, auto); }
.nws-cell-wide { grid-column: span 2; }
@media (max-width: 560px) { .nws-cell-wide { grid-column: span 1; } }
/* Subpage parity: large paragraphs match homepage lede scale */
.nws-panel :where(p.has-large-font-size) { font-size: clamp(1.02rem, 1.4vw, 1.18rem) !important; line-height: 1.55; }
/* Card grids inherit the homepage bento color rhythm (2nd gold, 3rd ink) */
.wp-block-post-content .nws-panel .nws-grid-3 .nws-card:nth-child(2) { background: var(--nws-marigold); border-color: var(--nws-ink); }
.wp-block-post-content .nws-panel .nws-grid-3 .nws-card:nth-child(2) p { color: #4A4200; }
.wp-block-post-content .nws-panel .nws-grid-3 .nws-card:nth-child(2) h3 { color: var(--nws-ink); }
.wp-block-post-content .nws-panel .nws-grid-3 .nws-card:nth-child(3) { background: var(--nws-ink); }
.wp-block-post-content .nws-panel .nws-grid-3 .nws-card:nth-child(3) h3,
.wp-block-post-content .nws-panel .nws-grid-3 .nws-card:nth-child(3) h3 a,
.wp-block-post-content .nws-panel .nws-grid-3 .nws-card:nth-child(3) a { color: var(--nws-paper); }
.wp-block-post-content .nws-panel .nws-grid-3 .nws-card:nth-child(3) p { color: var(--nws-cream); }
/* --------------------------------------------------------------------------
Flow-layout fallback. Pages saved through the wp-admin editor can lose each
group's "layout" attribute (constrained -> flow), which silently drops the
centered content column and the root side gutters. Recreate both for panel
and inset children so correct rendering never depends on that attribute.
No-op for properly constrained pages (CLI-seeded/local).
-------------------------------------------------------------------------- */
/* Every selector is fully :where()-wrapped (specificity 0) so any component's
own width/padding rule (.nws-bento, .nws-inset, ...) beats the fallback —
the same precedence contract as WP's real constrained-layout CSS. */
:where(.wp-block-post-content > .nws-panel.is-layout-flow) {
padding-left: var(--wp--style--root--padding-left, clamp(16px, 4vw, 32px));
padding-right: var(--wp--style--root--padding-right, clamp(16px, 4vw, 32px));
}
/* Panels declare wideSize:1200 with no contentSize, so constrained children
default to 1200 — mirror that, not the global 720 content size */
:where(.wp-block-post-content > .nws-panel.is-layout-flow) > :where(:not(.alignfull)) { max-width: 1200px; margin-left: auto; margin-right: auto; }
:where(.nws-inset.is-layout-flow) > :where(:not(.alignfull)) { max-width: 1040px; margin-left: auto; margin-right: auto; }
/* The non-alignwide inset (homepage contact form card) is a narrow card locally */
:where(.wp-block-post-content > .nws-panel.is-layout-flow) > :where(.nws-inset:not(.alignwide)) { max-width: 760px; }
:where(.wp-block-post-content > .nws-panel.is-layout-flow) > :where(.alignfull) {
margin-left: calc(-1 * var(--wp--style--root--padding-left, clamp(16px, 4vw, 32px)));
margin-right: calc(-1 * var(--wp--style--root--padding-right, clamp(16px, 4vw, 32px)));
}