/* ==========================================================================
Northwoods (NWS Digital) Brand Stylesheet
Source of truth for NWS brand styling across all internal HTML deliverables.
Reference: https://www.nwsdigital.com/OffNav/Brand-Style-Guidelines
========================================================================== */
/* ----- Fonts ------------------------------------------------------------- */
/* Consumers should also add these preconnect + stylesheet links in :
*/
/* ----- Color Palette ----------------------------------------------------- */
:root {
/* Logo */
--nws-green: #88ac3e; /* Northwoods Green — primary accent, bullets, borders */
--nws-gray-logo: #81827e; /* Northwoods Gray */
/* Headings / key UI */
--nws-teal-dark: #064347; /* Deep Teal — H1/H2/H3, header banners, New badges */
--nws-forest: #5a6e3c; /* Dark Forest Green — labels on light backgrounds */
/* Accents */
--nws-gold: #ddb027; /* Gold — highlights, "latest" markers, Polish badges */
--nws-teal: #418c7d; /* Teal — secondary accent */
--nws-slate: #4c7887; /* Slate Blue — muted accent */
--nws-rust: #a95b28; /* Rust Orange — warm accent */
--nws-olive: #9fa538; /* Olive Green */
--nws-lt-green: #86aa3f; /* Light Green */
/* Text */
--nws-gray-dark: #4b4b4b; /* Body text */
--nws-gray-med: #7e7e7e; /* Secondary / meta text */
--nws-black: #000000;
/* Backgrounds */
--nws-pale-green: #e1e6d2; /* Page background */
--nws-pale-sage: #d7e1d7; /* Card / stripe background */
--nws-cream: #f0eecd; /* Warm block background */
--nws-off-white: #e1d7c3; /* Off-white tan */
--nws-pale-blue: #c8dcdc; /* Pale blue */
--nws-gray-light: #e6e6e6; /* Rules, borders, GreyStripe background */
/* Typography stacks */
--nws-font-primary: "Montserrat", Arial, sans-serif;
--nws-font-secondary: "Libre Baskerville", "Times New Roman", serif;
--nws-font-mono: "Courier New", Courier, monospace;
}
/* ----- Base + Typography ------------------------------------------------- */
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: var(--nws-font-primary);
font-size: 14px;
line-height: 1.55;
color: var(--nws-gray-dark);
background: var(--nws-pale-green);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--nws-font-primary);
color: var(--nws-teal-dark);
margin: 0 0 0.5em;
}
h1,
h2 {
font-size: 36px;
font-weight: 500;
}
h3 {
font-size: 24px;
font-weight: 400;
}
h5 {
font-size: 18px;
font-weight: 500;
}
small,
.nws-small {
font-size: 13px;
color: var(--nws-gray-med);
}
/* Section headings (h2 only) get a Northwoods-Green underline rule.
h3+ are intentionally left alone so downstream layouts can style them
as labels, sub-headings, or whatever they need. Opt in to the bordered
look with `.nws-section-heading` on any element. */
h2,
.nws-section-heading {
border-bottom: 2px solid var(--nws-green);
padding-bottom: 0.35em;
}
/* Prose lists get green en-dash bullets. Applied only inside .nws-prose
so arbitrary UI lists (tier cards, nav, grids) keep their native
rendering. Use the explicit .nws-bullets class to opt in elsewhere. */
.nws-prose ul,
.nws-bullets {
list-style: none;
padding-left: 1.25em;
}
.nws-prose ul li,
.nws-bullets li {
position: relative;
}
.nws-prose ul li::before,
.nws-bullets li::before {
content: "\2013"; /* en dash */
color: var(--nws-green);
position: absolute;
left: -1.1em;
font-weight: 700;
}
a {
color: var(--nws-teal);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ----- Layout Patterns --------------------------------------------------- */
/* Page body container */
.PageBody,
.nws-page-body {
max-width: 860px;
margin: 0 auto;
padding: 48px 80px 80px;
background: #ffffff;
}
/* Header banner */
.BlueBlock {
background: var(--nws-teal-dark);
color: #ffffff;
padding: 48px 80px;
}
.BlueBlock h1,
.BlueBlock h2,
.BlueBlock h3,
.BlueBlock p {
color: #ffffff;
border-bottom: none;
}
/* Grey stripe */
.GreyStripe {
background: var(--nws-gray-light);
padding: 20px;
}
/* Cards / content blocks */
.nws-card {
background: #ffffff;
border: 1px solid var(--nws-gray-light);
border-top: 3px solid var(--nws-green);
padding: 24px;
margin-bottom: 24px;
}
.nws-card--teal { border-top-color: var(--nws-teal-dark); }
.nws-card--gold { border-top-color: var(--nws-gold); }
.nws-card--rust { border-top-color: var(--nws-rust); }
.nws-card--slate { border-top-color: var(--nws-slate); }
.nws-card--forest { border-top-color: var(--nws-forest); }
/* Footer */
.nws-footer {
background: var(--nws-gray-light);
border-top: 1px solid #ccc;
color: var(--nws-gray-med);
font-size: 13px;
padding: 24px 80px;
}
/* ----- Badges / Labels --------------------------------------------------- */
.nws-badge {
display: inline-block;
font-family: var(--nws-font-primary);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #ffffff;
padding: 3px 8px;
border-radius: 0; /* square corners — brand aesthetic */
line-height: 1.4;
}
.nws-badge--new { background: var(--nws-teal-dark); }
.nws-badge--feature { background: var(--nws-green); }
.nws-badge--polish { background: var(--nws-gold); }
.nws-badge--warning { background: var(--nws-rust); }
/* ----- Inline Code ------------------------------------------------------- */
code {
font-family: var(--nws-font-mono);
font-size: 12px;
background: var(--nws-pale-green);
color: var(--nws-forest);
padding: 1px 5px;
border: 1px solid var(--nws-gray-light);
}
pre code {
display: block;
padding: 12px 16px;
overflow-x: auto;
line-height: 1.5;
}
/* ----- Prose (Libre Baskerville) ----------------------------------------- */
/* Apply to long-form prose sections where the serif reads better */
.nws-prose {
font-family: var(--nws-font-secondary);
font-size: 14px;
line-height: 1.7;
color: var(--nws-gray-dark);
}
/* ----- Utility ----------------------------------------------------------- */
.nws-rule {
border: 0;
border-top: 2px solid var(--nws-green);
margin: 2em 0;
}