/* ============================================================
NEST WELL PROFESSIONAL ORGANIZING — custom.css
Bootstrap 5.3 base. All custom styles here, zero inline.
Color brief: Sky Blue #97CBEE · Warm Yellow #FEDD79
Analogous: Soft Mint #96EED6 · Soft Lavender #9C96EE
Soft Coral #FE867B · Soft Yellow-Green #C8FE7B
Type: Cormorant Garamond (headings) · Lato (body)
============================================================ */
/* ── Google Fonts: loaded via + in each page
(moved out of CSS @import 2026-07-13 to remove the render-blocking chain) ── */
/* ── Design Tokens ── */
:root {
/* Brand palette */
--nw-blue: #97CBEE;
--nw-blue-dark: #6aadda;
--nw-yellow: #FEDD79;
--nw-yellow-dark: #f5c93a;
--nw-yellow-soft: #FFF4D8;
--nw-mint: #96EED6;
--nw-lavender: #9C96EE;
--nw-coral: #FE867B;
--nw-yellow-green:#C8FE7B;
/* Neutrals */
--nw-linen: #FAF8F3;
--nw-linen-mid: #F0EDE5;
--nw-charcoal: #2E2E2E;
--nw-mid-gray: #6B6B6B;
--nw-light-rule: #E5E0D8;
--nw-white: #FFFFFF;
/* Typography */
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Lato', system-ui, sans-serif;
/* Spacing rhythm */
--section-pad-y: 4.25rem;
--hub-panel-pad: 4.5rem 0;
}
/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.7;
color: var(--nw-charcoal);
background-color: var(--nw-linen);
-webkit-font-smoothing: antialiased;
}
/* ── Typography Scale ── */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4,
.display-5, .display-6 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.2;
color: var(--nw-charcoal);
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h4 { font-size: 1.25rem; font-weight: 500; }
.display-headline {
font-family: var(--font-display);
font-size: clamp(2.8rem, 6vw, 4.5rem);
font-weight: 300;
font-style: italic;
line-height: 1.15;
letter-spacing: -0.01em;
}
p { margin-bottom: 1.25rem; }
p:last-child { margin-bottom: 0; }
a {
color: var(--nw-blue-dark);
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color 0.2s ease;
}
a:hover { text-decoration-color: var(--nw-blue-dark); }
.text-muted { color: var(--nw-mid-gray) !important; }
/* ── Navbar ── */
.nw-navbar {
background-color: var(--nw-linen);
border-bottom: 1px solid var(--nw-light-rule);
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1030;
}
.nw-navbar .navbar-brand {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 400;
color: var(--nw-charcoal);
letter-spacing: 0.02em;
text-decoration: none;
display: flex;
align-items: center;
padding: 0;
}
/* Logo image swapped in for the text wordmark — added 2026-08.
Sized to ~match the old text brand's rendered line-height (~40px)
so the navbar's overall height, and the resources.html jump-nav
scrollspy offset (data-bs-root-margin, tuned to sticky-stack height),
don't need to be re-tuned. */
.nw-navbar-logo {
height: 40px;
width: auto;
display: block;
}
.nw-navbar .navbar-brand span {
color: var(--nw-blue-dark);
}
.nw-navbar .nav-link {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--nw-charcoal) !important;
padding: 0.35rem 0.75rem !important;
text-decoration: none;
position: relative;
}
.nw-navbar .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0.75rem;
right: 0.75rem;
height: 1px;
background-color: var(--nw-blue-dark);
transform: scaleX(0);
transition: transform 0.25s ease;
transform-origin: left;
}
.nw-navbar .nav-link:hover::after,
.nw-navbar .nav-link.active::after {
transform: scaleX(1);
}
.nw-navbar .nav-link.active {
color: var(--nw-charcoal) !important;
font-weight: 700;
}
.nw-navbar .navbar-toggler {
border: 1px solid var(--nw-light-rule);
border-radius: 4px;
}
.nw-navbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232E2E2E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* ── Buttons ── */
.btn-nw-primary {
background-color: var(--nw-blue);
color: var(--nw-charcoal);
border: 1.5px solid var(--nw-blue);
border-radius: 50px;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.75rem 2rem;
text-decoration: none;
display: inline-block;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn-nw-primary:hover {
background-color: var(--nw-yellow);
border-color: var(--nw-yellow);
color: var(--nw-charcoal);
transform: translateY(-1px);
}
/* On the yellow CTA band a yellow hover would vanish — go charcoal there */
.nw-cta-band .btn-nw-primary:hover {
background-color: var(--nw-charcoal);
border-color: var(--nw-charcoal);
color: var(--nw-linen);
}
.btn-nw-secondary {
background-color: transparent;
color: var(--nw-charcoal);
border: 1.5px solid var(--nw-charcoal);
border-radius: 50px;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.75rem 2rem;
text-decoration: none;
display: inline-block;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn-nw-secondary:hover {
background-color: var(--nw-charcoal);
color: var(--nw-linen);
transform: translateY(-1px);
}
.btn-nw-yellow {
background-color: var(--nw-yellow);
color: var(--nw-charcoal);
border: 1.5px solid var(--nw-yellow);
border-radius: 50px;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.75rem 2rem;
text-decoration: none;
display: inline-block;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-nw-yellow:hover {
background-color: var(--nw-yellow-dark);
border-color: var(--nw-yellow-dark);
color: var(--nw-charcoal);
transform: translateY(-1px);
}
/* ── Sitewide header CTA ("Schedule The Nest Call") — added 2026-08 ──
Lives outside .navbar-collapse so it stays visible on phones without
opening the hamburger menu. order-lg-3 (utility class in the HTML)
pushes it to the far right on desktop, after the nav links. Sizing
steps down at two breakpoints since header space is tight on phones
and most clients are visiting on mobile. ── */
.nw-nav-cta {
padding: 0.45rem 1rem;
font-size: 0.7rem;
letter-spacing: 0.05em;
white-space: nowrap;
flex-shrink: 0;
margin-left: 0.5rem;
}
@media (max-width: 767.98px) {
.nw-nav-cta {
padding: 0.4rem 0.75rem;
font-size: 0.62rem;
letter-spacing: 0.02em;
margin-left: 0.4rem;
}
}
/* Below ~420px, shrink the logo a touch further and tighten the CTA
so logo + button + hamburger all fit comfortably on one line. */
@media (max-width: 420px) {
.nw-navbar-logo {
height: 34px;
}
.nw-nav-cta {
padding: 0.35rem 0.6rem;
font-size: 0.58rem;
}
}
/* ── Hero ── */
.nw-hero {
background-color: var(--nw-linen);
padding: 5rem 0 4rem;
position: relative;
overflow: hidden;
}
.nw-hero-text {
padding-right: 3rem;
}
.nw-hero-image {
max-height: 480px;
width: 100%;
object-fit: cover;
border-radius: 4px;
}
.nw-hero-eyebrow {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--nw-blue-dark);
margin-bottom: 1rem;
display: block;
}
.nw-scroll-nudge {
font-family: var(--font-display);
font-style: italic;
font-size: 1rem;
color: var(--nw-mid-gray);
margin-top: 2rem;
}
/* ── Tagline Strip ── */
.nw-tagline-strip {
background-color: var(--nw-blue);
padding: 0.875rem 0;
overflow: hidden;
}
.nw-tagline-strip p {
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--nw-charcoal);
margin: 0;
}
/* ── Section Base ── */
.nw-section {
padding: var(--section-pad-y) 0;
}
.nw-section-linen { background-color: var(--nw-linen); }
.nw-section-white { background-color: var(--nw-white); }
.nw-section-blue { background-color: var(--nw-blue); }
.nw-section-mid { background-color: var(--nw-linen-mid); }
.nw-section-label {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--nw-blue-dark);
margin-bottom: 0.75rem;
display: block;
}
/* ── Divider — warm yellow accent rule (brand update 2026-07) ── */
.nw-rule {
border: none;
border-top: 3px solid var(--nw-yellow);
width: 120px;
margin: 0 auto;
opacity: 1;
}
/* ── Hub Panels (Home page) ── */
.nw-hub-panel {
padding: var(--hub-panel-pad);
border-bottom: 1px solid var(--nw-light-rule);
}
.nw-hub-panel:last-child { border-bottom: none; }
.nw-hub-panel-img {
width: 100%;
height: 360px;
object-fit: cover;
border-radius: 4px;
}
.nw-hub-panel-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
font-weight: 400;
margin-bottom: 0.75rem;
color: var(--nw-charcoal);
}
.nw-hub-panel-invite {
font-size: 1.0625rem;
color: var(--nw-mid-gray);
margin-bottom: 1.5rem;
}
/* Alternating panel backgrounds */
.nw-hub-panel:nth-child(odd) { background-color: var(--nw-linen); }
.nw-hub-panel:nth-child(even) { background-color: var(--nw-white); }
/* ── Hub Card Grid (Home page — 2026-07 layout, replaces stacked .nw-hub-panel
rows above with a 3-across card grid to shorten the homepage scroll) ── */
.nw-hub-grid .nw-hub-card {
background: var(--nw-white);
border-radius: 16px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 2px 14px rgba(46,46,46,0.07);
border-top: 4px solid transparent;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.nw-hub-grid .nw-hub-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(46,46,46,0.13);
border-top-color: var(--nw-yellow);
}
.nw-hub-grid .nw-hub-card-img {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--nw-linen);
}
.nw-hub-grid .nw-hub-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.nw-hub-grid .nw-hub-card-body {
padding: 1.5rem 1.5rem 1.75rem;
display: flex;
flex-direction: column;
flex: 1;
}
.nw-hub-grid .nw-hub-card-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.4rem;
line-height: 1.2;
margin: 0.4rem 0 0.6rem;
color: var(--nw-charcoal);
}
.nw-hub-grid .nw-hub-card-invite {
font-size: 1rem;
color: var(--nw-mid-gray);
margin-bottom: 1.15rem;
flex: 1;
}
.nw-hub-grid .nw-hub-card-body .btn-nw-secondary {
align-self: flex-start;
}
@media (max-width: 767.98px) {
.nw-hub-grid .nw-hub-card-img { aspect-ratio: 16 / 10; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
.nw-hub-grid .col-md-4 { flex: 0 0 50%; max-width: 50%; }
}
/* ── Who This Is For list ── */
.nw-who-list {
list-style: none;
padding: 0;
margin: 0;
}
.nw-who-list li {
padding: 0.6rem 0 0.6rem 1.75rem;
position: relative;
border-bottom: 1px solid var(--nw-light-rule);
font-size: 1rem;
}
.nw-who-list li:last-child { border-bottom: none; }
.nw-who-list li::before {
content: '–';
position: absolute;
left: 0;
color: var(--nw-blue-dark);
font-weight: 700;
}
/* ── How It Works steps ── */
.nw-steps {
counter-reset: nw-step;
list-style: none;
padding: 0;
margin: 0;
}
.nw-steps li {
counter-increment: nw-step;
padding: 1.5rem 0 1.5rem 3.5rem;
border-bottom: 1px solid var(--nw-light-rule);
position: relative;
}
.nw-steps li:last-child { border-bottom: none; }
.nw-steps li::before {
content: counter(nw-step);
position: absolute;
left: 0;
top: 1.5rem;
font-family: var(--font-display);
font-size: 1.5rem;
font-style: italic;
color: var(--nw-blue-dark);
width: 2.5rem;
text-align: center;
}
/* ── Credentials / Badges ── */
.nw-creds {
background-color: var(--nw-linen-mid);
padding: var(--section-pad-y) 0;
}
.nw-badge-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center;
justify-content: center;
}
.nw-badge-grid img {
height: 100px;
min-height: 80px;
width: auto;
object-fit: contain;
filter: none;
transition: transform 0.2s ease;
}
/* TCE and NAPO badges display equal or larger than the ICD badges */
.nw-badge-grid img[src*="badge-tce"],
.nw-badge-grid img[src*="badge-napo"] {
height: 120px;
}
/* ── Two-row badge layout (index.html, about.html credentials sections) ──
Specialty certification badges get their own larger row; membership /
trust badges (TCE, NAPO) sit in a second, slightly smaller row below. ── */
.nw-badge-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 2.25rem;
}
.nw-badge-row img {
height: 150px;
width: auto;
object-fit: contain;
filter: none;
transition: transform 0.2s ease;
}
.nw-badge-row img:hover { transform: scale(1.05); }
.nw-badge-row-memberships {
gap: 2.5rem;
}
.nw-badge-row-memberships img {
height: 120px;
}
.nw-badge-grid img:hover { transform: scale(1.05); }
.nw-creds-list {
list-style: none;
padding: 0;
margin: 1.5rem 0 0;
font-size: 0.9375rem;
}
.nw-creds-list li {
padding: 0.4rem 0 0.4rem 1.5rem;
position: relative;
color: var(--nw-charcoal);
border-bottom: 1px solid var(--nw-light-rule);
}
.nw-creds-list li:last-child { border-bottom: none; }
.nw-creds-list li::before {
content: '✦';
position: absolute;
left: 0;
font-size: 0.6rem;
top: 0.65rem;
color: var(--nw-blue-dark);
}
/* ── CTA Band ── */
.nw-cta-band {
background-color: var(--nw-yellow);
padding: 4rem 0;
text-align: center;
}
.nw-cta-band h2 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
margin-bottom: 0.5rem;
}
.nw-cta-band p {
font-size: 1.0625rem;
color: var(--nw-charcoal);
margin-bottom: 2rem;
}
/* ── Service Cards ── */
.nw-service-card {
background-color: var(--nw-white);
border: 1px solid var(--nw-light-rule);
border-radius: 4px;
padding: 2rem;
height: 100%;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nw-service-card:hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.07);
transform: translateY(-2px);
}
.nw-service-card h3 {
font-size: 1.4rem;
margin-bottom: 0.75rem;
}
.nw-service-card .nw-service-tag {
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--nw-blue-dark);
margin-bottom: 0.75rem;
display: block;
}
/* ── Testimonial Cards ── */
.nw-testimonial-card {
background-color: var(--nw-yellow-soft);
border-left: 4px solid var(--nw-yellow);
padding: 1.75rem 2rem;
margin-bottom: 1.5rem;
border-radius: 0 4px 4px 0;
}
.nw-testimonial-card blockquote {
font-family: var(--font-display);
font-size: clamp(1.1rem, 2vw, 1.35rem);
font-style: italic;
font-weight: 300;
line-height: 1.6;
margin: 0 0 1rem;
color: var(--nw-charcoal);
}
.nw-testimonial-card cite {
font-family: var(--font-body);
font-size: 0.875rem;
font-style: normal;
color: var(--nw-mid-gray);
display: block;
}
/* ── Testimonial grid — 2-col masonry flow (Kind Words, 2026-07-13) ── */
.nw-testimonial-grid {
columns: 2;
column-gap: 1.5rem;
}
.nw-testimonial-grid .nw-testimonial-card {
break-inside: avoid;
margin-bottom: 1.5rem;
}
@media (min-width: 1200px) {
.nw-testimonial-grid { columns: 3; }
}
@media (max-width: 767.98px) {
.nw-testimonial-grid { columns: 1; }
}
/* ── Resource card grid (Resources page — 2026-07 layout: turns the stacked
single-column resource list into a 2-across card grid to cut page length) ── */
.nw-resource-grid .nw-resource-card {
background-color: var(--nw-white);
border-left: 3px solid var(--nw-yellow);
border-radius: 0 8px 8px 0;
padding: 1.3rem 1.5rem 1.15rem;
height: 100%;
box-shadow: 0 1px 8px rgba(46,46,46,0.05);
}
/* Flip the card fill on white sections so cards stay distinct */
.nw-section-white .nw-resource-grid .nw-resource-card {
background-color: var(--nw-linen);
}
.nw-resource-grid .nw-resource-card h3 { margin-bottom: 0.5rem; }
.nw-resource-grid .nw-resource-card p:last-child { margin-bottom: 0; }
.nw-resource-grid .nw-resource-card a { overflow-wrap: anywhere; }
/* Small uppercase divider label used to break a resource-grid section into
sub-groups (e.g. Donations "Start here" vs "Pet supplies"). 2026-08. */
.nw-resource-subhead {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--nw-mid-gray);
margin: 2rem 0 1rem;
}
.nw-resource-subhead:first-child { margin-top: 0; }
/* ── In-page jump nav (specialty / long-form pages, 2026-07) ──
Rides directly under the main navbar inside .nw-sticky-stack, so readers can
move between sections from anywhere on the page instead of scrolling back up.
Content length is unchanged — this is navigation, not a cut. */
.nw-sticky-stack {
position: sticky;
top: 0;
z-index: 1030;
}
/* Neutralise the navbar's own sticky so the wrapper does the sticking.
relative + higher z-index keeps its dropdown above the jump bar. */
.nw-sticky-stack .nw-navbar {
position: relative;
top: auto;
z-index: 2;
}
.nw-jump-nav {
position: relative;
z-index: 1;
background-color: var(--nw-white);
border-bottom: 1px solid var(--nw-light-rule);
padding: 0.55rem 0;
box-shadow: 0 2px 10px rgba(46,46,46,0.06);
}
.nw-jump-nav-inner {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
}
.nw-jump-nav-label {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--nw-mid-gray);
margin: 0;
white-space: nowrap;
flex-shrink: 0;
}
/* Single line that scrolls sideways rather than stacking and eating height */
.nw-jump-nav ul {
list-style: none;
display: flex;
flex-wrap: nowrap;
gap: 0.5rem;
margin: 0;
padding: 0;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.nw-jump-nav ul::-webkit-scrollbar { display: none; }
.nw-jump-nav a {
display: inline-block;
white-space: nowrap;
font-size: 0.9rem;
line-height: 1.2;
text-decoration: none;
color: var(--nw-charcoal);
background-color: var(--nw-linen);
border: 1px solid var(--nw-light-rule);
border-radius: 999px;
padding: 0.42rem 0.95rem;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.nw-jump-nav a:hover,
.nw-jump-nav a:focus-visible {
background-color: var(--nw-yellow-soft);
border-color: var(--nw-yellow);
color: var(--nw-charcoal);
}
/* Scrollspy marks the section you're currently reading */
.nw-jump-nav a.active {
background-color: var(--nw-yellow);
border-color: var(--nw-yellow);
color: var(--nw-charcoal);
font-weight: 700;
}
/* Keep jump targets clear of the sticky navbar + jump bar */
.nw-jump-target { scroll-margin-top: 140px; }
@media (max-width: 767.98px) {
.nw-jump-nav-label { display: none; }
.nw-jump-target { scroll-margin-top: 124px; }
}
@media (max-width: 575.98px) {
.nw-jump-nav a { font-size: 0.85rem; padding: 0.38rem 0.8rem; }
}
/* ── Accordion (FAQ) ── */
.nw-accordion .accordion-item {
background-color: transparent;
border: none;
border-bottom: 1px solid var(--nw-light-rule);
}
.nw-accordion .accordion-button {
background-color: transparent;
color: var(--nw-charcoal);
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 500;
padding: 1.25rem 0;
box-shadow: none;
}
.nw-accordion .accordion-button:not(.collapsed) {
color: var(--nw-blue-dark);
background-color: transparent;
box-shadow: none;
}
.nw-accordion .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236aadda'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
flex-shrink: 0;
}
.nw-accordion .accordion-body {
padding: 0 0 1.25rem;
font-size: 1rem;
color: var(--nw-mid-gray);
line-height: 1.8;
}
/* ── Contact Form ── */
.nw-form-card {
background-color: var(--nw-white);
border: 1px solid var(--nw-light-rule);
border-radius: 4px;
padding: 2.25rem 2.5rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
@media (max-width: 575.98px) {
.nw-form-card { padding: 1.75rem 1.5rem; }
}
.nw-form-note {
font-size: 0.875rem;
color: var(--nw-mid-gray);
margin-bottom: 1.5rem;
}
.nw-form .form-label {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--nw-charcoal);
margin-bottom: 0.35rem;
}
.nw-form-card .req {
color: var(--nw-coral);
font-weight: 700;
margin-left: 0.1em;
}
.nw-form .form-control,
.nw-form .form-select {
background-color: var(--nw-white);
border: 1.5px solid var(--nw-light-rule);
border-radius: 4px;
padding: 0.75rem 1rem;
font-family: var(--font-body);
font-size: 1rem;
color: var(--nw-charcoal);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nw-form .form-control:hover,
.nw-form .form-select:hover {
border-color: #cfc9bd;
}
.nw-form .form-control:focus,
.nw-form .form-select:focus {
border-color: var(--nw-blue-dark);
box-shadow: 0 0 0 3px rgba(151, 203, 238, 0.35);
outline: none;
}
.nw-form .form-control::placeholder { color: #aaa; }
/* Recolor the native select arrow to match brand blue instead of Bootstrap default gray */
.nw-form .form-select {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236aadda' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.nw-form textarea.form-control {
min-height: 140px;
resize: vertical;
}
/* Conditional referral field — animated reveal instead of an abrupt display:none/block */
.nw-conditional {
overflow: hidden;
max-height: 0;
opacity: 0;
margin-bottom: 0;
transition: max-height 0.35s ease, opacity 0.25s ease, margin-bottom 0.35s ease;
}
.nw-conditional.is-open {
max-height: 140px;
opacity: 1;
margin-bottom: 1rem;
}
/* Submit button loading state */
.nw-form button[type="submit"]:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none !important;
}
/* Feedback messages — mirrors the .result color-coded pattern from service-area-check.html */
.nw-form-feedback {
display: none;
margin-top: 1.5rem;
padding: 1.5rem 1.75rem;
border-radius: 0 4px 4px 0;
border-left: 4px solid transparent;
}
.nw-form-feedback.is-visible { display: block; }
.nw-form-feedback--success {
background-color: rgba(150, 238, 214, 0.22);
border-left-color: var(--nw-mint);
}
.nw-form-feedback--error {
background-color: rgba(254, 134, 123, 0.15);
border-left-color: var(--nw-coral);
}
.nw-form-feedback p {
margin-bottom: 0;
font-family: var(--font-display);
font-size: 1.15rem;
font-style: italic;
color: var(--nw-charcoal);
}
.nw-form-feedback--error p {
font-family: var(--font-body);
font-style: normal;
font-size: 0.9375rem;
}
/* ── Page Hero (inner pages) ── */
.nw-page-hero {
background-color: var(--nw-linen-mid);
padding: 4rem 0 3rem;
border-bottom: 1px solid var(--nw-light-rule);
}
.nw-page-hero-img {
width: 100%;
height: 320px;
object-fit: cover;
border-radius: 4px;
}
/* ── Visual Break Image ── */
.nw-visual-break {
width: 100%;
max-height: 400px;
object-fit: cover;
border-radius: 4px;
display: block;
}
/* ── Spoke page note (referral callout) ── */
.nw-referral-box {
background-color: var(--nw-yellow-soft);
border-left: 4px solid var(--nw-yellow);
padding: 1.5rem 2rem;
border-radius: 0 4px 4px 0;
margin: 2rem 0;
}
.nw-referral-box h4 { margin-bottom: 0.5rem; }
/* ── Footer ── */
.nw-footer {
background-color: var(--nw-charcoal);
color: rgba(255,255,255,0.75);
padding: 3.5rem 0 2rem;
}
.nw-footer-brand {
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--nw-white);
margin-bottom: 0.5rem;
}
.nw-footer p {
font-size: 0.875rem;
line-height: 1.7;
color: rgba(255,255,255,0.6);
margin-bottom: 0;
}
.nw-footer a {
color: var(--nw-blue);
text-decoration: none;
}
.nw-footer a:hover {
color: var(--nw-white);
text-decoration-color: var(--nw-white);
}
.nw-footer-nav {
list-style: none;
padding: 0;
margin: 0;
}
.nw-footer-nav li { margin-bottom: 0.4rem; }
.nw-footer-nav a {
font-size: 0.875rem;
color: rgba(255,255,255,0.65);
text-decoration: none;
}
.nw-footer-nav a:hover { color: var(--nw-white); }
.nw-footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 2.5rem;
padding-top: 1.25rem;
font-size: 0.8125rem;
color: rgba(255,255,255,0.4);
}
.nw-footer-badge-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
margin-top: 1.25rem;
}
.nw-footer-badge-row img {
height: 52px;
width: auto;
object-fit: contain;
opacity: 0.85;
filter: brightness(1.4);
}
/* ── Scroll-fade animation ── */
[data-fade] {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
[data-fade].is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
[data-fade] { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* ── Tightened section rhythm (homepage intro sections) ── */
.nw-section-tight {
padding: 3rem 0;
}
/* ── Resource section header stripes — 4px solid, sitewide-consistent ── */
.nw-stripe {
border-left: 4px solid var(--nw-yellow);
padding-left: 1rem;
}
.nw-stripe-blue { border-left-color: var(--nw-blue); }
.nw-stripe-coral { border-left-color: var(--nw-coral); }
.nw-stripe-yellow { border-left-color: var(--nw-yellow); }
.nw-stripe-green { border-left-color: var(--nw-yellow-green); }
.nw-stripe-mint { border-left-color: var(--nw-mint); }
.nw-stripe-lavender { border-left-color: var(--nw-lavender); }
/* ── CTA band eyebrow (used on Kind Words / Resources CTAs) ── */
.nw-cta-eyebrow {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--nw-charcoal);
margin-bottom: 0.75rem;
}
/* ── Client video embed (Kind Words) ── */
.nw-video {
max-width: 360px; /* caps width so the 496x644 portrait frame doesn't dominate the page */
width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: 12px;
}
.nw-video-caption {
margin: 14px auto 0;
max-width: 360px; /* matches video width so caption doesn't run wider than the frame */
font-size: 0.95rem;
font-style: italic;
color: var(--nw-ink-soft, #5B6B74); /* adjust fallback to match your actual muted-text variable */
}
/* ── Crop helper: bias image toward its left edge ── */
.nw-img-left { object-position: left center; }
/* ── Responsive tweaks ── */
@media (max-width: 991.98px) {
:root { --section-pad-y: 3.5rem; --hub-panel-pad: 3rem 0; }
.nw-hero-text { padding-right: 0; margin-bottom: 2rem; }
.nw-hub-panel-img { height: 260px; }
}
@media (max-width: 767.98px) {
:root { --section-pad-y: 2.75rem; }
.nw-section-tight { padding: 2.25rem 0; }
.nw-hero { padding: 3rem 0 2.5rem; }
.nw-hub-panel-img { height: 220px; }
.nw-badge-grid img { height: 84px; min-height: 80px; }
.nw-badge-grid img[src*="badge-tce"],
.nw-badge-grid img[src*="badge-napo"] { height: 96px; }
.nw-badge-row { gap: 1.5rem; }
.nw-badge-row img { height: 105px; }
.nw-badge-row-memberships { gap: 1.75rem; }
.nw-badge-row-memberships img { height: 90px; }
.nw-footer-badge-row img { height: 40px; }
.nw-cta-band { padding: 2.5rem 0; }
}
@media (max-width: 480px) {
.nw-badge-row img { height: 88px; }
.nw-badge-row-memberships img { height: 76px; }
}