/* =========================================================
Maddy Grubb Maps — Brand CSS
Stage 1: Fonts only.
Loaded last in so it wins the cascade over
nicepage.css and per-page CSS without touching either.
To revert Stage 1: remove this file + its tag.
========================================================= */
:root {
--serif: 'Newsreader', Georgia, serif;
--sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--display: 'Newsreader', Georgia, serif;
--alata: 'Alata', ui-sans-serif, system-ui, sans-serif;
}
/* ── Body / default text → Manrope 400, 15px ────────────── */
/* Sized so it sits subordinate to the navy display headings. */
/* Paper background ensures any gap between sections (e.g. */
/* the hand-drawn section divider) reads as paper, not the */
/* default white inherited from nicepage.css. */
body,
.u-body {
font-family: var(--sans);
font-weight: 400;
font-size: 0.9375rem;
line-height: 1.65;
background-color: var(--paper);
}
p,
li,
.u-text,
.u-paragraph,
p.u-large-text,
p.u-small-text,
p:not(.u-text-variant) {
font-family: var(--sans);
font-weight: 400;
}
.u-custom-font.u-text-font {
font-family: var(--sans) !important;
}
/* Custom .mgm-* body / list / bio paragraphs */
.mgm-mosaic-bio,
.mgm-who-list li,
.mgm-bio-text p,
.mgm-header-sub,
.mgm-lightbox-inner p {
font-family: var(--sans) !important;
font-weight: 400;
}
/* ── Section headings h1 / h2 → Manrope 800 ────────────── */
/* Per brand audit: section titles are display sans, tight tracking. */
h1, h2,
h1.u-title,
h2.u-subtitle,
h1:not(.u-title),
h2:not(.u-subtitle),
.mgm-header-title {
font-family: var(--sans) !important;
font-weight: 800;
letter-spacing: -0.03em;
}
/* ── H3 → Newsreader 500 ───────────────────────────────── */
h3 {
font-family: var(--serif) !important;
font-weight: 500;
letter-spacing: -0.012em;
}
/* ── H4–H6 → Manrope 600 ───────────────────────────────── */
h4, h5, h6,
.mgm-what-card h4 {
font-family: var(--sans) !important;
font-weight: 600;
letter-spacing: -0.01em;
}
/* ── Heritage classes (Pinegrow custom-font) ───────────── */
.u-custom-font.u-heading-font {
font-family: var(--sans) !important;
font-weight: 800;
}
/* ── Hero display H1 → Newsreader 600 semi-bold ─────────── */
/* The big hero pull-line: "Maps Where Science / Meets Art". */
/* Per Maddy 2026-05-04: weight 500 → 600 for more presence. */
/* Size bumped +50% from index.css's clamp(2rem,3.5vw,3rem). */
.mgm-hero-title,
.display,
.u-display,
h1.display,
h2.display,
.pull-line,
.u-pull-line {
font-family: var(--display) !important;
font-weight: 600;
font-style: normal;
font-size: clamp(3rem, 5.25vw, 4.5rem);
letter-spacing: -0.02em;
line-height: 1.1;
}
/* Italic Newsreader inside hero via only. */
/* Sun Orange accent on the italic word ("Art"). */
.mgm-hero-title em,
.display em,
.u-display em,
.pull-line em {
font-style: italic;
font-weight: 600;
color: var(--orange);
}
/* ── Lede → Newsreader italic (editorial pull-quotes) ─── */
/* The .lede role is reserved for italic Newsreader pull- */
/* quotes inside long-form content. Hero / section subheads */
/* are NOT ledes anymore — they get their own Manrope rules */
/* in Stage 2. Per Maddy 2026-05-04. */
.lede,
.u-lede {
font-family: var(--serif) !important;
font-style: italic;
font-weight: 400;
text-transform: none !important;
letter-spacing: -0.005em;
}
/* ── Section eyebrows → JetBrains Mono uppercase ───────── */
/* Small label that sets context above section headings. */
.mgm-section-title,
.eyebrow,
.u-eyebrow,
.meta,
.u-meta,
.caption,
.u-caption,
figcaption,
.coordinates,
.u-coordinates,
.overline,
.u-overline {
font-family: var(--mono) !important;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 400;
}
/* ── Site header / top nav → mono, small, light ────────── */
/* Per Maddy: smaller and lighter than my first pass. */
.u-nav-link,
.u-nav-item > a,
.u-header a.u-nav-link,
.u-menu a,
.u-hamburger-link {
font-family: var(--mono) !important;
font-weight: 400;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ── Buttons / CTAs → JetBrains Mono uppercase ─────────── */
/* Per brand audit: buttons are stamped mono pills. */
.u-btn,
.u-button-style,
.mgm-btn,
button,
input[type="submit"],
input[type="button"] {
font-family: var(--mono) !important;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Form fields stay sans (mono in inputs is unfriendly) */
input,
textarea,
select {
font-family: var(--sans) !important;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
/* ── Wordmark / signature lockup only → Alata ──────────── */
/* Heritage role. Not for body, not for default headings. */
.wordmark,
.u-wordmark,
.signature,
.u-signature,
.logo-wordmark {
font-family: var(--alata) !important;
}
/* =========================================================
Stage 2 — color tokens, role sizing, color-on-dark rules
Sampled from logo per Brand Audit. Use vars, don't hardcode.
========================================================= */
:root {
/* Cream paper neutrals */
--paper: #F6F1E7;
--paper-2: #EFE8D8;
--paper-3: #E4DAC4;
--rule: #D8CFB9;
--ink-4: #9A9384;
--ink-3: #6B6557;
--ink-2: #34455F;
--ink: #122A57;
/* Core brand */
--navy: #1B3D7A;
--navy-deep: #122A57;
--navy-ink: #0C1D3E;
--teal: #3F8775;
--teal-deep: #2C6457;
--teal-soft: #88B5A6;
--orange: #E89A3C;
--orange-deep:#C77D1F;
--orange-soft:#F5C58A;
--red: #AF553D;
--red-deep: #7C3A28;
--red-soft: #E5A797;
/* ── Layout tokens ────────────────────────────────────── */
/* Standardized vertical buffer used by every content */
/* section. Change this value to retune the whole page. */
--section-pad-y: 48px;
/* Inter-element spacing scale. Mapped to logical text-block */
/* relationships rather than t-shirt sizes: */
/* tight → eyebrow ↘ heading */
/* snug → heading ↘ subhead */
/* room → subhead ↘ body / supporting block */
/* loose → heading-block ↘ section content (grid, list) */
--space-tight: 12px;
--space-snug: 20px;
--space-room: 32px;
--space-loose: 56px;
/* Centering / max-width scale. Heading blocks always sit at */
/* --width-heading; prose blocks at the narrower --width- */
/* prose for readability. Container is the outer 1140px max */
/* used by .mgm-container. */
--width-container: 1140px;
--width-heading: 880px;
--width-prose: 720px;
}
/* ── Outer page container ─────────────────────────────────── */
/* Centered, capped at --width-container, with horizontal */
/* padding so smaller viewports still get an edge buffer. */
/* Used by every section that needs the standard outer width */
/* (Journal, Substack, homepage sections, etc.). The 575-and */
/* -below mobile rule (further down) tightens to 20px. */
.mgm-container {
max-width: var(--width-container);
margin: 0 auto;
padding: 0 75px;
}
@media (max-width: 767px) {
.mgm-container { padding: 0 40px; }
}
/* ── Eyebrow: small mono uppercase label above a heading ── */
/* Typography (mono, uppercase, +0.1em tracking) is set by */
/* the eyebrow/meta group above. Stage 2 adds size + color */
/* + spacing. */
.eyebrow,
.u-eyebrow {
display: block;
font-size: 12px;
letter-spacing: 0.14em;
line-height: 1.4;
margin: 0 0 var(--space-tight);
color: var(--teal);
text-align: center;
}
/* Eyebrows on dark hero → white per Maddy 2026-05-04. */
.mgm-hero-section .eyebrow {
color: var(--paper);
}
/* Other dark sections keep Lichen Teal-soft for warmth. */
.mgm-what-section .eyebrow,
.mgm-who-section .eyebrow,
.u-section-8 .eyebrow,
.u-custom-color-3 .eyebrow {
color: var(--teal-soft);
}
/* ── Lede sizing (editorial pull-quotes only) ─────────────── */
.lede,
.u-lede {
font-size: 1.25rem;
line-height: 1.5;
}
/* ── Hero subtitle → Manrope, heading-style ──────────────── */
/* Per Maddy 2026-05-04: this is NOT an italic lede; it's a */
/* secondary heading-weight kicker line in Manrope. */
.mgm-hero-sub {
font-family: var(--sans) !important;
font-weight: 500;
font-style: normal !important;
font-size: 1.5rem;
line-height: 1.3;
letter-spacing: -0.01em;
text-transform: none !important;
color: var(--paper);
}
/* ── Section subhead → Manrope (already body-weight via */
/* Stage 1 group rule). Keep here for clarity + sizing. */
.mgm-header-sub {
font-family: var(--sans) !important;
font-weight: 400;
font-size: 1.0625rem;
line-height: 1.55;
letter-spacing: 0;
}
/* ── Section H2 + supporting subhead on dark backgrounds ── */
/* All current uses of .mgm-header-title sit on dark photo */
/* or dark color sections. Centralize the white-on-dark. */
/* font-size + responsive scale migrated from index.css */
/* 2026-05-05 (Phase 1 cleanup). */
.mgm-header-title {
font-size: 2rem;
color: var(--paper);
}
@media (max-width: 767px) {
.mgm-header-title { font-size: 1.6rem; }
}
.mgm-header-sub {
color: rgba(246, 241, 231, 0.85);
}
/* ── Section divider — short centered hairline ──────────── */
/* Used between two same-toned sections (e.g. Where We Work */
/* → What We Make) to mark the seam without adding furniture. */
.mgm-section-divider {
border: 0;
border-top: 1px solid var(--rule);
width: 80px;
margin: 0 auto;
height: 0;
background: var(--paper);
}
/* ── "What We Make" — paper section, Granite cards ─────── */
/* Paper-cream surface with dark Granite cards keeps the */
/* section quiet on the page and lets the cards do the work. */
.mgm-what-section {
background: var(--paper) !important;
}
.mgm-what-section .mgm-header-title {
color: var(--ink);
}
.mgm-what-section .mgm-header-sub {
color: var(--ink-2);
}
.mgm-what-card {
background: #34455F !important;
border: 1px solid #34455F;
border-radius: 0 !important;
}
.mgm-what-card:hover {
background: #283549 !important; /* slightly deeper navy on hover */
border-color: #283549;
}
/* ── "Bringing Data to Life" — paper section, 3D embed ── */
/* Same surface treatment as What We Make: paper bg, Navy-ink */
/* headline, ink-2 supporting text. Embed is centered and */
/* capped at --width-heading so it sits on the same vertical */
/* axis as the title above and CTA below. */
.mgm-bringing-data-section {
background: var(--paper);
padding: var(--section-pad-y) 56px;
text-align: center;
}
.mgm-bringing-data-section .mgm-container {
max-width: var(--width-container);
margin: 0 auto;
padding: 0;
}
.mgm-bringing-data-section .mgm-header-title {
color: var(--ink);
}
.mgm-bringing-data-section .mgm-header-sub {
color: var(--ink-2);
}
.mgm-bringing-data-embed {
max-width: var(--width-heading);
margin: var(--space-loose) auto;
}
.mgm-bringing-data-embed .sketchfab-embed-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.mgm-bringing-data-embed .sketchfab-embed-wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ── "Who We Work With" — dark photo section ─────────────── */
/* Migrated from index.css 2026-05-05 (Phase 1 cleanup). */
/* Inverse of What We Make: dark photo overlay carries the */
/* section, paper text on top, white-inverted client logos. */
/* Maddy uses this as a moment of contrast against the */
/* paper-on-paper sections above and below. */
.mgm-who-section {
padding: 72px 0;
background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.62), rgba(26, 26, 26, 0.62)),
url('images/Teton_Glaciers_View_COMPOSITE_V2.webp');
background-size: cover;
background-position: 50% 50%;
}
.mgm-who-layout {
display: flex;
gap: 80px;
align-items: flex-start;
}
.mgm-who-left {
flex: 0 0 360px;
}
.mgm-who-list li {
font-size: 1rem;
color: var(--paper);
padding: 13px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
letter-spacing: 0.01em;
}
.mgm-who-list li:first-child {
border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.mgm-who-logos {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 36px 52px;
padding-top: 52px;
}
.mgm-who-logos img {
height: 56px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
}
.mgm-who-logos img:first-child {
height: 90px;
}
@media (max-width: 991px) {
.mgm-who-section { padding: 48px 0; }
.mgm-who-logos { padding-top: 0; }
}
@media (max-width: 599px) {
.mgm-who-layout { gap: 36px; }
.mgm-who-logos { gap: 24px 36px; }
}
/* ── Hand-drawn section divider art ─────────────────────── */
/* Used between the globe and "What We Make". Source PNG is */
/* 2000×200 (10:1 aspect); we cap it narrow so the dashed */
/* line reads as editorial punctuation, not page furniture. */
.mgm-section-divider-art {
display: block;
width: 100%;
max-width: 600px;
height: auto;
margin: 0 auto;
pointer-events: none;
user-select: none;
}
/* ── Card grid titles → Manrope, padded ──────────────────── */
/* Per Maddy 2026-05-04: cards need breathing room around the */
/* title text, and titles read better in Manrope than serif. */
.mgm-what-card h3 {
font-family: var(--sans) !important;
font-weight: 600;
font-size: 1.125rem;
letter-spacing: -0.01em;
color: var(--paper);
padding: 1rem 1.25rem 1.25rem;
margin: 0;
}
/* ── What We Make grid layout + image wrap ──────────────── */
/* Migrated from index.css 2026-05-05 (Phase 1 cleanup). */
/* Layout (3-up desktop, 2-up tablet/mobile) lives here so */
/* the brand system owns the section end-to-end. */
.mgm-what-section {
padding: 72px 0;
}
.mgm-what-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.mgm-what-card {
overflow: hidden;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
}
.mgm-what-card:hover {
transform: translateY(-4px);
}
.mgm-what-img-wrap {
aspect-ratio: 1;
overflow: hidden;
}
.mgm-what-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.mgm-what-card:hover .mgm-what-img-wrap img {
transform: scale(1.06);
}
@media (max-width: 991px) {
.mgm-what-grid { grid-template-columns: repeat(2, 1fr); }
.mgm-what-section { padding: 48px 0; }
}
@media (max-width: 599px) {
.mgm-what-grid { gap: 16px; }
}
/* ── Figure / embed caption ──────────────────────────────── */
/* Caption shares mono typography with eyebrow group, but is */
/* sentence-case (not uppercase) and smaller. */
.caption,
.u-caption {
font-size: 0.9rem;
letter-spacing: 0.04em;
text-transform: none !important;
text-align: center;
margin: 0 0 1.5rem;
color: rgba(246, 241, 231, 0.75);
}
/* ── Buttons — three brand variants per Brand Audit ──────── */
/* All share mono-uppercase + full-pill geometry from the */
/* button/CTA group above. Variants only change color. */
/* .mgm-btn → Accent CTA (Sun Orange) — for */
/* the single most important CTA */
/* per screen. */
/* .mgm-btn--primary → Primary Action (Teton Navy) — */
/* every other primary CTA. */
/* .mgm-btn--secondary → Secondary (paper bg, navy */
/* outline + text) — tertiary */
/* actions, "learn more" links. */
.mgm-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 16px 36px !important;
font-size: 0.8125rem;
line-height: 1;
letter-spacing: 0.12em;
text-decoration: none !important;
border-radius: 999px !important;
background-color: var(--orange) !important;
color: var(--paper) !important;
border: 2px solid var(--orange) !important;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mgm-btn:hover,
.mgm-btn:focus {
background-color: var(--orange-deep) !important;
border-color: var(--orange-deep) !important;
}
.mgm-btn.mgm-btn--primary {
background-color: var(--navy) !important;
color: var(--paper) !important;
border-color: var(--navy) !important;
}
.mgm-btn.mgm-btn--primary:hover,
.mgm-btn.mgm-btn--primary:focus {
background-color: var(--navy-deep) !important;
border-color: var(--navy-deep) !important;
}
.mgm-btn.mgm-btn--secondary {
background-color: transparent !important;
color: var(--ink) !important;
border-color: var(--ink) !important;
}
.mgm-btn.mgm-btn--secondary:hover,
.mgm-btn.mgm-btn--secondary:focus {
background-color: var(--ink) !important;
color: var(--paper) !important;
border-color: var(--ink) !important;
}
/* =========================================================
"Where We Work" — interactive globe + project list section
Light/cream background sandwiched between the dark
"Who We Work With" above and "Bringing Data to Life" below.
========================================================= */
.mgm-where-section {
background: var(--paper);
color: var(--ink-2);
padding: var(--section-pad-y) 56px;
}
.mgm-where-section .mgm-container {
max-width: 1240px;
margin: 0 auto;
padding: 0;
}
/* Eyebrow on light bg defaults to Lichen Teal — already wired by .eyebrow. */
/* Section title — "Section display" treatment: Newsreader 600 + Sun Orange */
/* italic accent. Larger and more editorial than the dark-section H2s. */
.mgm-where-title {
font-family: var(--serif) !important;
font-weight: 600;
font-style: normal;
font-size: clamp(40px, 5vw, 64px);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 0 var(--space-loose);
max-width: 14ch;
text-wrap: pretty;
}
.mgm-where-title em {
font-style: italic;
font-weight: 600;
color: var(--orange);
}
/* Mosaic / About section title — same Section-display treatment */
/* as .mgm-where-title (Newsreader 600 + Sun Orange italic accent). */
.mgm-about-title {
font-family: var(--serif) !important;
font-weight: 600;
font-style: normal;
font-size: clamp(40px, 5vw, 64px);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 auto var(--space-room);
max-width: var(--width-heading);
text-align: center;
text-wrap: pretty;
}
.mgm-about-title em {
font-style: italic;
font-weight: 600;
color: var(--orange);
}
/* Two-column viewer layout: globe left, project list right. */
/* Capped at --width-heading so it visually balances under */
/* the centered title block and the globe + list both sit */
/* with symmetric breathing room from the page edges. */
.mgm-where-viewer {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 64px;
align-items: start;
max-width: var(--width-heading);
margin: 0 auto;
}
.mgm-where-globe-col {
display: flex;
flex-direction: column;
gap: 28px;
align-items: stretch;
min-width: 0;
}
.mgm-where-stage {
width: 100%;
aspect-ratio: 1 / 1;
max-width: 560px;
justify-self: start;
display: grid;
place-items: center;
position: relative;
user-select: none;
}
canvas.mgm-where-globe {
width: 100%;
height: 100%;
display: block;
touch-action: none;
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
canvas.mgm-where-globe:active { cursor: grabbing; }
canvas.mgm-where-globe.is-pin-hover { cursor: pointer; }
/* Project list ─────────────────────────────────────────── */
.mgm-where-projects {
list-style: none;
padding: 0;
margin: 24px 0 0;
border-top: 1px solid var(--rule);
}
.mgm-where-project {
border-bottom: 1px solid var(--rule);
}
.mgm-where-project-row {
width: 100%;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
padding: 5px 4px 5px 0;
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 10px;
align-items: baseline;
color: inherit;
font: inherit;
transition: padding .25s ease;
}
.mgm-where-project-row:hover { padding-left: 6px; }
.mgm-where-project-row:focus-visible {
outline: 2px solid var(--orange);
outline-offset: 2px;
}
.mgm-where-project-num {
font-family: var(--mono) !important;
font-size: 10px;
letter-spacing: 0.14em;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
text-transform: uppercase;
}
.mgm-where-project-title-block {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.mgm-where-project-title {
font-family: var(--sans) !important;
font-weight: 600;
font-size: 1rem;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--ink);
}
.mgm-where-project-region {
font-family: var(--mono) !important;
font-size: 11px;
letter-spacing: 0.08em;
color: var(--ink-3);
text-align: right;
white-space: nowrap;
}
.mgm-where-project[aria-expanded='true'] .mgm-where-project-title { color: var(--red); }
/* Accordion body */
.mgm-where-project-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .42s cubic-bezier(.2,.7,.2,1);
}
.mgm-where-project[aria-expanded='true'] .mgm-where-project-body {
grid-template-rows: 1fr;
}
.mgm-where-project-body-inner {
overflow: hidden;
min-height: 0;
}
.mgm-where-project-body-content {
padding: 6px 0 18px 42px;
max-width: 56ch;
}
.mgm-where-project-figure {
margin: 6px 0 14px;
width: 100%;
overflow: hidden;
border: 1px solid var(--rule);
background: var(--paper-3);
}
.mgm-where-project-figure-img {
width: 100%;
height: auto;
display: block;
cursor: zoom-in;
transition: opacity 0.2s ease;
}
.mgm-where-project-figure-img:hover {
opacity: 0.92;
}
.mgm-where-project-desc {
font-family: var(--sans) !important;
font-weight: 400;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0;
}
/* =========================================================
HEADER — full Nicepage layout reset.
We're keeping the legacy markup and the existing color/state
rules in index.css (.mgm-at-top vs .mgm-header-scrolled), but
nuking every Nicepage layout primitive that touches the bar.
The layout below is built from scratch:
• — full-width sticky band (bg/sticky from
index.css, untouched).
• .u-sheet-1 — flex row, centered cluster, fixed gap.
• .u-image-1 — logo, visually first via flex order.
• .u-menu-1 — nav block, visually second.
• .u-nav-1 — flex row of nav items, gap-spaced.
Mobile (≤767px) switches the flex row to space-between so the
logo hugs the left edge and the hamburger hugs the right edge.
========================================================= */
/* Outer header: only set vertical sizing; bg + position come */
/* from index.css. Wipe any Nicepage padding/margin that might */
/* offset content. */
.u-header,
.u-header.u-sticky,
.u-header.u-white,
.u-header.u-sticky-b4bd {
padding: 0 !important;
z-index: 100;
/* Reserve header height even before mgm-header.js injects the partial.
Prevents the "content jumps up then back down" layout shift on first
paint — without this, the empty is 0px tall, content sits
flush to the top, then the partial loads ~50ms later and pushes
content down by 39px (which the browser's scroll-anchoring corrects). */
min-height: 39px;
}
/* Default header bg is paper-2 site-wide. Beats Nicepage's */
/* .u-white { background:#fff } on every non-homepage page. */
/* index.css's at-top (transparent) + scrolled (paper-2) rules */
/* on the homepage have higher specificity and still win there. */
.u-header,
.u-header.u-white,
.u-header.u-sticky-b4bd {
background-color: var(--paper-2) !important;
background-image: none !important;
}
/* Default nav text + hamburger color on non-homepage pages — */
/* navy ink reads correctly on the paper-2 bar. */
.u-header .u-nav-link,
.u-header .u-text-custom-color-2,
.u-header .u-hamburger-link,
.u-header .u-hamburger-link .u-svg-content rect {
color: var(--ink);
}
.u-header .u-hamburger-link .u-svg-content rect {
fill: var(--ink);
}
/* Hero pages at-top: transparent bar so the hero photo + overlay
show through. Applies to homepage AND Journal — both heroes use
the same dark-overlay treatment, so the header shares the same
white-on-photo treatment. Once mgm-header-scrolled fires (>60px),
the bar reverts to default paper-2.
index.css already applies this on the homepage; this rule is what
makes Journal match (since Journal doesn't load index.css). */
body:has(.mgm-hero-section:not(.mgm-hero-section--half)) #sec-cdd0.mgm-at-top,
body:has(.mgm-hero-section:not(.mgm-hero-section--half)) #sec-cdd0.mgm-at-top.u-white,
body:has(.mgm-hero-section:not(.mgm-hero-section--half)) #sec-cdd0.mgm-at-top.u-sticky-b4bd {
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
/* Hero pages at-top: paper text + paper logo over the dark teal
overlay. Lighter mint-teal on hover keeps the hero feeling soft. */
body:has(.mgm-hero-section:not(.mgm-hero-section--half)) #sec-cdd0.mgm-at-top .u-nav-link,
body:has(.mgm-hero-section:not(.mgm-hero-section--half)) #sec-cdd0.mgm-at-top .u-text-custom-color-2,
body:has(.mgm-hero-section:not(.mgm-hero-section--half)) #sec-cdd0.mgm-at-top .u-hamburger-link {
color: var(--paper) !important;
}
body:has(.mgm-hero-section:not(.mgm-hero-section--half)) #sec-cdd0.mgm-at-top .u-hamburger-link .u-svg-content rect {
fill: var(--paper) !important;
}
/* Sheet: pure flex row, centered, capped width via Nicepage's */
/* responsive --theme-sheet-width vars OR full-width — we set */
/* width: 100% so the bar spans the viewport, and rely on */
/* internal padding for inset. */
.u-header .u-sheet-1 {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 40px !important;
width: 100% !important;
max-width: none !important;
min-height: 39px !important;
padding: 0 32px !important;
margin: 0 !important;
box-sizing: border-box !important;
position: relative !important;
}
/* CRITICAL: kill .u-clearfix's ::before/::after pseudo-elements */
/* on the sheet. In a flex container, pseudo-elements count as */
/* flex children — those two extra empty slots were the reason */
/* space-between pushed the logo away from the left edge. */
.u-header .u-sheet-1::before,
.u-header .u-sheet-1::after {
display: none !important;
content: none !important;
}
/* Logo: fixed dimensions, visually first, no margin hacks. */
.u-header .u-image-1 {
order: 1 !important;
flex: 0 0 auto !important;
align-self: center !important;
width: 95px !important;
height: 19px !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
display: block !important;
}
/* Nav block: shrink-to-fit, no positioning, no width hacks. */
/* Critical: override Nicepage's .u-menu { display: table } — */
/* table sizing was making .u-menu-1 take more width than its */
/* visible content, which pushed the logo off the left edge. */
.u-header .u-menu-1 {
display: flex !important;
align-items: center !important;
order: 2 !important;
flex: 0 0 auto !important;
align-self: center !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
float: none !important;
text-align: left !important;
}
/* Inner containers inside .u-menu-1 must not stretch — Nicepage */
/* defaults often give .u-nav-container display:block which */
/* makes the nav want full width and forces a wrap. */
/* IMPORTANT: do NOT touch .u-nav-container-collapse — that's */
/* the slide-out panel and it needs Nicepage's position: fixed. */
.u-header .u-menu-1 > .u-nav-container,
.u-header .u-menu-1 > .menu-collapse {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
position: static !important;
}
/* =========================================================
Slide-out menu: overlay, do NOT shift the page content.
The nav has class u-offcanvas-shift which makes Nicepage
add .u-offcanvas-shifted-left/right to when the menu
opens, animating all body children sideways. Kill that.
========================================================= */
.u-offcanvas-opened.u-offcanvas-shifted-left .u-body > *,
.u-offcanvas-opened.u-offcanvas-shifted-left.u-body > *,
.u-offcanvas-opened.u-offcanvas-shifted-right .u-body > *,
.u-offcanvas-opened.u-offcanvas-shifted-right.u-body > *,
.u-offcanvas-unshifted-left .u-body > *,
.u-offcanvas-unshifted-left.u-body > *,
.u-offcanvas-unshifted-right .u-body > *,
.u-offcanvas-unshifted-right.u-body > * {
animation: none !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
}
/* Top-level nav list: flex row, tight gap, reset list styles. */
.u-header .u-nav-1 {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 6px !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.u-header .u-nav-1 > .u-nav-item {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
position: relative !important;
}
/* Anchor the dropdown popup BELOW the parent .u-nav-item. */
/* With .u-nav-item set to display:flex (for vertical link */
/* alignment), the popup's default absolute "static position" */
/* becomes horizontally beside the link instead of below it, */
/* so we pin it explicitly to top:100%, left:0. */
.u-header .u-nav-container .u-nav-1 > .u-nav-item > .u-nav-popup {
top: 100% !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
min-width: 240px;
}
/* Top-level link padding — beats the inline style="padding:10px"*/
.u-header .u-nav-1 > .u-nav-item > .u-nav-link,
.u-header .u-nav-1 > .u-nav-item > .u-nav-link[style] {
padding: 6px 10px !important;
margin: 0 !important;
}
/* Top-level nav link hover. */
/* default + Journal at-top + scrolled → var(--teal) #3F8775 */
/* homepage hero at-top only → #B8D4C7 (lighter mint-teal, */
/* reads as desaturated against the green-tinted hero). */
#sec-cdd0 .u-nav-1 > .u-nav-item > .u-nav-link:hover,
#sec-cdd0 .u-nav-1 > .u-nav-item > .u-nav-link:focus,
body.mgm-header-scrolled #sec-cdd0 .u-nav-1 > .u-nav-item > .u-nav-link:hover {
color: var(--teal) !important;
}
body:has(.mgm-hero-section:not(.mgm-hero-section--half)) #sec-cdd0.mgm-at-top .u-nav-1 > .u-nav-item > .u-nav-link:hover,
body:has(.mgm-hero-section:not(.mgm-hero-section--half)) #sec-cdd0.mgm-at-top .u-nav-1 > .u-nav-item > .u-nav-link:focus {
color: #B8D4C7 !important;
}
/* Hamburger trigger sizing on desktop is irrelevant (hidden); */
/* on mobile we want it as a clean square tap target. */
.u-header .menu-collapse {
display: none;
}
.u-header .u-hamburger-link-1 {
width: 22px !important;
height: 22px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.u-header .u-hamburger-link-1 .u-svg-link {
width: 17px !important;
height: 17px !important;
}
/* Mobile: collapse to hamburger, swap to space-between. */
@media (max-width: 767px) {
.u-header .u-sheet-1 {
justify-content: space-between !important;
gap: 0 !important;
padding: 0 20px !important;
}
.u-header .u-nav-container { display: none !important; }
.u-header .menu-collapse { display: block !important; }
/* Journal is desktop-only per Maddy 2026-05-04 — hide its slide-out item. */
.u-nav-3 .mgm-nav-journal { display: none !important; }
}
/* Logo lockup: SVG wordmark inside an that doubles as the layout
slot. The SVG paths inherit `fill="currentColor"` from the