/* ========================================================================= * Brand North — Inner-page layouts (v0.9.19) * Layouts for the top-level nav pages. Reuses tokens + existing components * (.bn-section, .bn-btn, .bn-case, .bn-pricing__*, .bn-team*, reveal attrs). * ========================================================================= */ /* Inner-page main gets an explicit cream base so transparent .bn-section's never reveal the dark background (html is navy for the homepage hero). Scoped to .bn-page so the homepage (.bn-homepage) is unaffected. */ .bn-page { background-color: var(--bn-cream); } /* ---------- Page hero (shared via template-parts/page-hero.php) ---------- */ .bn-page-hero { position: relative; overflow: hidden; padding-block: clamp(var(--space-9), 12vw, var(--space-12)) var(--space-9); background-color: var(--bn-cream); isolation: isolate; } /* Inner = the site's wide content band (centered like the header), so the text left-aligns to the same gutter as the logo/nav. The text COLUMN is capped on the children below, not here, so it sits hard-left in the band. */ .bn-page-hero__inner { position: relative; z-index: 2; } .bn-page-hero__title { font-family: var(--font-display); font-size: clamp(40px, 6vw, 76px); line-height: 1.05; font-weight: 400; letter-spacing: var(--tracking-tight); color: var(--bn-ink); margin-block: var(--space-4) var(--space-5); max-width: 30rem; /* keep the editorial multi-line wrap, left-aligned (natural width on mobile) */ text-wrap: balance; font-variation-settings: 'opsz' 144, 'SOFT' 100; } .bn-page-hero__title em { font-style: italic; color: var(--bn-ink); font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; } .bn-page-hero__sub { font-family: var(--font-body); font-size: var(--fs-body-l); line-height: 1.55; color: var(--bn-text-2); max-width: 56ch; } .bn-page-hero--center .bn-page-hero__sub { margin-inline: auto; } .bn-page-hero__cta { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; } .bn-page-hero--center .bn-page-hero__cta { justify-content: center; } .bn-page-hero__mark { position: absolute; inset-block-start: 50%; inset-inline-end: -6%; transform: translateY(-50%); width: clamp(360px, 42vw, 640px); opacity: 0.06; z-index: 1; pointer-events: none; } .bn-page-hero__mark svg { width: 100%; height: auto; display: block; } @media (max-width: 768px) { .bn-page-hero__mark { inset-inline-end: -20%; width: 320px; } } /* ---------- Hero media (per-page AI image) ------------------------------ */ /* Left-aligned heroes: image on the right ~62%, cream scrim fading left→right so the headline/sub keep AA contrast over solid cream. */ .bn-page-hero--media { min-height: clamp(440px, 56vh, 600px); display: flex; align-items: center; } .bn-page-hero--media .bn-page-hero__inner { width: 100%; } .bn-page-hero__media { position: absolute; inset: 0; /* full-bleed — the image backs the whole hero */ z-index: 0; overflow: hidden; } .bn-page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; scale: 1.06; /* oversize so parallax drift never reveals an edge */ } .bn-page-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; /* Strong cream veil across the text column (left ~60%) so the headline AND sub-deck stay AA-readable over EVEN a busy/bright environmental photo, then a smooth fade so the full-bleed image reveals on the right. Smooth gradient (no hard band) keeps abstract heroes reading as one integrated image. */ background: linear-gradient(to right, rgba(245, 247, 250, 0.95) 0%, rgba(245, 247, 250, 0.92) 50%, rgba(245, 247, 250, 0.7) 62%, rgba(245, 247, 250, 0.25) 78%, rgba(245, 247, 250, 0) 90%); } /* Centered heroes with media: full-bleed image under a uniform cream veil. */ .bn-page-hero--center.bn-page-hero--media .bn-page-hero__scrim { background: linear-gradient(to bottom, rgba(245, 247, 250, 0.9), rgba(245, 247, 250, 0.8)); } /* Mobile: image full-width behind text under a heavy cream veil — text always wins. */ @media (max-width: 768px) { .bn-page-hero--media .bn-page-hero__media { width: 100%; } .bn-page-hero--media .bn-page-hero__scrim { background: linear-gradient(to bottom, rgba(245, 247, 250, 0.9), rgba(245, 247, 250, 0.8)); } } /* ---------- Generic prose ---------- */ .bn-prose { max-width: 64ch; } .bn-prose p { font-size: var(--fs-body-l); line-height: 1.6; color: var(--bn-text-2); margin-bottom: var(--space-5); } .bn-prose p:last-child { margin-bottom: 0; } /* ---------- Section header (reused on inner pages) ---------- */ .bn-page-section__head { max-width: 60ch; margin-bottom: var(--space-8); } .bn-page-section__head--center { margin-inline: auto; text-align: center; } .bn-page-section__title { font-family: var(--font-display); font-size: clamp(30px, 4vw, 48px); line-height: 1.1; font-weight: 400; letter-spacing: var(--tracking-tight); color: var(--bn-ink); margin-block: var(--space-3) var(--space-4); text-wrap: balance; font-variation-settings: 'opsz' 96, 'SOFT' 100; } .bn-page-section__title em { font-style: italic; font-variation-settings: 'opsz' 96, 'SOFT' 100, 'WONK' 1; } .bn-page-section__lead { font-family: var(--font-body); font-size: var(--fs-body-l); line-height: 1.55; color: var(--bn-text-2); } /* ---------- Card grids (services / industries / resources) ---------- */ .bn-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); } @media (max-width: 560px) { .bn-feature-grid { grid-template-columns: 1fr; } } .bn-fcard { position: relative; display: flex; flex-direction: column; padding: var(--space-6); background-color: var(--bn-bg-elevated); border: 1px solid var(--bn-border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-subtle); transition: transform var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart), border-color var(--dur-base) var(--ease-out-quart); text-decoration: none; } a.bn-fcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); border-color: var(--bn-sky-hover); } .bn-fcard__num { font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bn-coral); margin-bottom: var(--space-3); } .bn-fcard__title { font-family: var(--font-display); font-size: 24px; font-weight: 400; letter-spacing: -0.015em; color: var(--bn-ink); margin-bottom: var(--space-3); font-variation-settings: 'opsz' 72, 'SOFT' 100; } .bn-fcard__body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; color: var(--bn-text-2); margin-bottom: var(--space-4); } .bn-fcard__outcome { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--bn-border-subtle); font-family: var(--font-body); font-size: var(--fs-body-s); font-weight: var(--fw-medium); color: var(--bn-ink); } .bn-fcard__outcome strong { color: var(--bn-ink); font-weight: var(--fw-semibold); } .bn-fcard__link { margin-top: var(--space-4); font-family: var(--font-body); font-size: var(--fs-body-s); font-weight: var(--fw-semibold); color: var(--bn-ink); display: inline-flex; align-items: center; gap: 6px; } .bn-fcard__tag { align-self: flex-start; margin-bottom: var(--space-3); padding: 3px 10px; border-radius: var(--radius-pill); background-color: var(--bn-sky-soft); color: var(--bn-ink); font-family: var(--font-body); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; } .bn-fcard__tag--soon { background-color: var(--bn-cream-3); color: var(--bn-text-mute); } /* ---------- Methodology disciplines (numbered) ---------- */ .bn-discipline { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(var(--space-5), 5vw, var(--space-9)); align-items: start; padding-block: clamp(var(--space-7), 6vw, var(--space-9)); border-top: 1px solid var(--bn-border-subtle); } .bn-discipline:first-of-type { border-top: 0; } @media (max-width: 820px) { .bn-discipline { grid-template-columns: 1fr; gap: var(--space-4); } } .bn-discipline__num { font-family: var(--font-display); font-size: clamp(48px, 7vw, 88px); line-height: 0.9; color: var(--bn-sky-hover); font-variation-settings: 'opsz' 144, 'SOFT' 100; } .bn-discipline__title { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); font-weight: 400; color: var(--bn-ink); margin-bottom: var(--space-3); letter-spacing: -0.01em; font-variation-settings: 'opsz' 96, 'SOFT' 100; } .bn-discipline__body { font-family: var(--font-body); font-size: var(--fs-body-l); line-height: 1.6; color: var(--bn-text-2); margin-bottom: var(--space-4); } .bn-discipline__outcome { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: var(--fs-body-s); font-weight: var(--fw-medium); color: var(--bn-ink); } .bn-discipline__outcome::before { content: ''; width: 16px; height: 2px; background: var(--bn-lime); flex-shrink: 0; } /* ---------- Process timeline ---------- */ .bn-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); counter-reset: bn-step; } @media (max-width: 720px) { .bn-timeline { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); } } @media (max-width: 420px) { .bn-timeline { grid-template-columns: 1fr; } } .bn-timeline__step { position: relative; padding-top: var(--space-5); border-top: 2px solid var(--bn-border-default); } .bn-timeline__step::before { counter-increment: bn-step; content: counter(bn-step); position: absolute; inset-block-start: -13px; inset-inline-start: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--bn-ink); color: var(--bn-cream); display: grid; place-items: center; font-family: var(--font-body); font-size: 12px; font-weight: var(--fw-semibold); } .bn-timeline__title { font-family: var(--font-display); font-size: 21px; font-weight: 400; color: var(--bn-ink); margin-bottom: var(--space-2); font-variation-settings: 'opsz' 72, 'SOFT' 100; } .bn-timeline__body { font-family: var(--font-body); font-size: var(--fs-body-s); line-height: 1.5; color: var(--bn-text-2); } /* ---------- Stat band ---------- */ .bn-stat-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding: clamp(var(--space-7), 6vw, var(--space-9)); background-color: var(--bn-ink); border-radius: var(--radius-xl); text-align: center; } @media (max-width: 640px) { .bn-stat-band { grid-template-columns: 1fr; gap: var(--space-6); } } .bn-stat-band__value { font-family: var(--font-display); font-size: clamp(40px, 6vw, 64px); line-height: 1; color: var(--bn-cream); font-variant-numeric: tabular-nums; font-variation-settings: 'opsz' 144, 'SOFT' 100; } .bn-stat-band__label { margin-top: var(--space-3); font-family: var(--font-body); font-size: var(--fs-body-s); color: rgba(242,237,227,0.7); letter-spacing: 0.04em; } /* ---------- Closing CTA band (shared via template-parts/cta-band.php) ---- */ .bn-cta-band { position: relative; text-align: center; background-color: var(--bn-cream); isolation: isolate; overflow: hidden; } .bn-cta-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 50% 45%, rgba(168,216,240,0.16), transparent 70%); } .bn-cta-band__title { font-family: var(--font-display); font-size: clamp(34px, 5vw, 60px); line-height: 1.06; font-weight: 400; color: var(--bn-ink); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); text-wrap: balance; font-variation-settings: 'opsz' 144, 'SOFT' 100; } .bn-cta-band__title em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; } .bn-cta-band__sub { font-family: var(--font-body); font-size: var(--fs-body-l); color: var(--bn-text-2); max-width: 52ch; margin: 0 auto var(--space-6); line-height: 1.55; } .bn-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); justify-content: center; align-items: center; } .bn-cta-band__phone { font-family: var(--font-body); font-size: var(--fs-body-s); font-weight: var(--fw-medium); color: var(--bn-text); text-decoration: none; border-bottom: 1px solid var(--bn-border-default); padding-bottom: 2px; transition: color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart); } .bn-cta-band__phone:hover { color: var(--bn-ink); border-color: var(--bn-ink); } .bn-cta-band__trust { margin-top: var(--space-5); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em; color: var(--bn-mute-2); } /* ---------- Service sub-pages ------------------------------------------- */ .bn-stat-band--single { grid-template-columns: 1fr; max-width: 36ch; margin-inline: auto; } .bn-feature-grid--compact { grid-template-columns: repeat(2, 1fr); } @media (max-width: 640px) { .bn-feature-grid--compact { grid-template-columns: 1fr; } } /* Checklist (what's included) */ .bn-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-6); max-width: 72ch; } @media (max-width: 600px) { .bn-checklist { grid-template-columns: 1fr; } } .bn-checklist__item { display: flex; align-items: flex-start; gap: var(--space-3); font-family: var(--font-body); font-size: var(--fs-body-l); line-height: 1.5; color: var(--bn-text); } .bn-checklist__check { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background-color: var(--bn-sky-soft); color: var(--bn-ink); } .bn-checklist__check svg { width: 13px; height: 13px; } /* ---------- Legal stub --------------------------------------------------- */ .bn-legal-note { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-7); background-color: var(--bn-cream-2); border: 1px solid var(--bn-border-default); border-left: 3px solid var(--bn-gold); border-radius: var(--radius-lg); } .bn-legal-note__tag { align-self: flex-start; font-family: var(--font-body); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bn-ink); background-color: var(--bn-lime); padding: 3px 10px; border-radius: var(--radius-pill); } .bn-legal-note p { margin: 0; font-family: var(--font-body); font-size: var(--fs-body-s); line-height: 1.55; color: var(--bn-text-2); } .bn-prose h2 { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--bn-ink); margin: var(--space-6) 0 var(--space-3); } .bn-prose a { color: var(--bn-ink); text-decoration: underline; text-underline-offset: 2px; } /* ---------- Cost-per-admit calculator ----------------------------------- */ .bn-calc { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(var(--space-5), 4vw, var(--space-8)); align-items: start; } @media (max-width: 820px) { .bn-calc { grid-template-columns: 1fr; } } .bn-calc__inputs { display: grid; gap: var(--space-5); } .bn-field { display: flex; flex-direction: column; gap: 6px; } .bn-field > label { font-family: var(--font-body); font-size: var(--fs-body-s); font-weight: var(--fw-semibold); color: var(--bn-ink); } .bn-field__wrap { position: relative; display: flex; align-items: center; } .bn-field__wrap[data-prefix]::before { content: attr(data-prefix); position: absolute; left: 14px; color: var(--bn-mute-2); font-family: var(--font-body); font-size: var(--fs-body); } .bn-field__wrap[data-suffix]::after { content: attr(data-suffix); position: absolute; right: 14px; color: var(--bn-mute-2); font-family: var(--font-body); font-size: var(--fs-body); } .bn-field__wrap[data-prefix] input { padding-left: 28px; } .bn-field input { width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: var(--fs-body-l); color: var(--bn-ink); background: var(--bn-bg-elevated); border: 1px solid var(--bn-border-default); border-radius: var(--radius-md); font-variant-numeric: tabular-nums; } .bn-field input:focus-visible { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--bn-ink); box-shadow: 0 0 0 3px rgba(20,17,58,0.18); } .bn-field__hint { font-family: var(--font-body); font-size: 12px; color: var(--bn-mute-2); } .bn-calc__results { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: clamp(var(--space-5), 4vw, var(--space-7)); background: var(--bn-ink); border-radius: var(--radius-xl); } .bn-calc__result { display: flex; flex-direction: column; gap: 4px; } .bn-calc__result--primary { grid-column: 1 / -1; padding-bottom: var(--space-4); border-bottom: 1px solid rgba(242,237,227,0.16); } .bn-calc__result-label { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em; color: rgba(242,237,227,0.65); text-transform: uppercase; } .bn-calc__result-value { font-family: var(--font-display); line-height: 1; color: var(--bn-cream); font-size: clamp(28px, 4vw, 40px); font-variant-numeric: tabular-nums; font-variation-settings: 'opsz' 144, 'SOFT' 100; } .bn-calc__result--primary .bn-calc__result-value { font-size: clamp(44px, 7vw, 68px); color: var(--bn-lime); } .bn-calc__note { grid-column: 1 / -1; margin: 0; font-family: var(--font-body); font-size: var(--fs-body-s); line-height: 1.5; color: rgba(242,237,227,0.78); min-height: 1.2em; } .bn-calc__disclaimer { max-width: 60ch; margin-top: var(--space-6); font-family: var(--font-body); font-size: var(--fs-body-s); line-height: 1.55; color: var(--bn-text-2); } .bn-calc__disclaimer em { font-style: italic; color: var(--bn-ink); } /* ---------- Rule list (HIPAA guide) ------------------------------------- */ .bn-rulelist { display: grid; gap: var(--space-5); max-width: 76ch; } .bn-rule { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-5); align-items: start; } .bn-rule__num { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); line-height: 1; color: var(--bn-sky-hover); font-variant-numeric: tabular-nums; } .bn-rule__title { font-family: var(--font-display); font-size: var(--fs-h5, 1.25rem); color: var(--bn-ink); margin: 0 0 6px; } .bn-rule__body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; color: var(--bn-text-2); margin: 0; } /* ---------- Booking (/schedule/) ---------------------------------------- */ .bn-booking { max-width: 60ch; margin-inline: auto; text-align: center; } .bn-booking__embed { margin-bottom: var(--space-6); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-elevated); min-height: 640px; } .bn-booking__embed iframe { width: 100%; min-height: 640px; border: 0; display: block; } .bn-booking__cta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); justify-content: center; align-items: center; } .bn-booking__trust { margin-top: var(--space-5); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em; color: var(--bn-mute-2); } /* ---------- Empty state (blog with no posts) ---------------------------- */ .bn-empty { max-width: 56ch; margin-inline: auto; text-align: center; padding-block: var(--space-7); } .bn-empty__eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bn-mute-2); } .bn-empty__title { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--bn-ink); margin: var(--space-3) 0 var(--space-4); } .bn-empty__title em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; } .bn-empty__body { font-family: var(--font-body); font-size: var(--fs-body-l); line-height: 1.6; color: var(--bn-text-2); margin-bottom: var(--space-6); } .bn-empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); justify-content: center; align-items: center; }