/* ==========================================================================
SumnerOne — Master CSS
Foundational tokens + the component system that has landed across the
site. A new page can link this stylesheet, write semantic markup using
the classes below, and get a brand-correct page without copying any
CSS from reference pages.
STRUCTURE
─────────
1. Tokens (:root)
2. Reset & base
3. Type primitives (.s1-* — opt-in legacy)
4. Layout (.container, .container--narrow, .container--reading)
5. Editorial kicker (universal em-dash glyph for all eyebrow labels)
6. Card fold accent (.has-fold-corner — document-fold corner pseudo-element)
7. Buttons (.btn-primary, .btn-primary--cyan, .btn-primary--saffron, .btn-secondary, .btn-nav, .cta-group)
8. Trust bar marquee (.trust-bar)
9. Utility (.tbd-tag, .visually-hidden)
10. Responsive
11. Form inputs (.form-field, .input, .select, .textarea, .checkbox, .radio)
12. Badges (.badge, .badge--navy/cyan/neutral/saffron/success)
13. Saffron button variant (.btn-primary--saffron)
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS — Fonts (Webflow build — Google Fonts only)
-------------------------------------------------------------------------- */
/* Cormorant Garamond — display (display-md+ / 36px+) only.
DM Sans — subhead, body, eyebrows, H4-H6.
Local fonts/*.ttf paths from the design-system repo are intentionally
removed from this build because Webflow's hosted environment can't
resolve relative font paths. Cormorant Garamond is loaded from Google
Fonts in the same weight + italic range as the local TTFs. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,300..800&display=swap");
:root {
/* ----- Color — Primary ------------------------------------------------ */
--s1-navy: #00395C;
--s1-cyan: #00B3E0;
--s1-navy-hover: #00294A;
--s1-cyan-hover: #009EC7;
/* ----- Color — Neutrals ---------------------------------------------- */
--s1-parchment: #F7F4EF;
--s1-light-gray: #F0F4F8;
--s1-mid-gray: #8A9BAE;
--s1-dark-text: #1A2A3A;
--s1-white: #FFFFFF;
/* ----- Color — Restricted (campaign / sustainability only) ---------- */
--s1-saffron: #F7A947;
--s1-apple-green: #8DC63F;
/* ----- Gradient tones ------------------------------------------------ */
--s1-grad-deep: #5BC2E7;
--s1-grad-light: #99D6EA;
--s1-gradient: linear-gradient(135deg, #00395C 0%, #00B3E0 100%);
--s1-gradient-h: linear-gradient(90deg, #00395C 0%, #00B3E0 100%);
/* ----- Navy Wash overlay (for World B photography) ------------------ */
--s1-navy-wash: rgba(0, 57, 92, 0.50);
--s1-navy-wash-soft: rgba(0, 57, 92, 0.40);
--s1-navy-wash-strong: rgba(0, 57, 92, 0.55);
/* ----- Inverse foreground (text on navy ground) --------------------- */
--on-navy-1: rgba(255, 255, 255, 0.88);
--on-navy-2: rgba(255, 255, 255, 0.80);
--on-navy-3: rgba(255, 255, 255, 0.72);
--on-navy-mute: rgba(255, 255, 255, 0.48);
--border-on-navy: rgba(255, 255, 255, 0.16);
--surface-on-navy: rgba(255, 255, 255, 0.04);
--surface-on-navy-hover: rgba(255, 255, 255, 0.07);
--border-on-navy-card: rgba(255, 255, 255, 0.12);
/* ----- Semantic — surfaces ------------------------------------------ */
--bg-primary: var(--s1-white);
--bg-warm: var(--s1-parchment);
--bg-cool: var(--s1-light-gray);
--bg-inverse: var(--s1-navy);
--bg-card: var(--s1-white);
/* ----- Semantic — foreground ---------------------------------------- */
--fg-1: var(--s1-dark-text);
--fg-2: var(--s1-mid-gray);
--fg-3: #B9C3D0;
--fg-inverse: var(--s1-white);
--fg-accent: var(--s1-cyan);
--fg-brand: var(--s1-navy);
/* ----- Semantic — borders / dividers -------------------------------- */
--border-1: #E4EAF0;
--border-2: #D4DCE6;
--border-inverse: rgba(255, 255, 255, 0.16);
/* ----- Type families ------------------------------------------------- */
--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--font-subhead: "DM Sans", "Aptos", "Calibri", system-ui, -apple-system, sans-serif;
--font-body: "DM Sans", "Calibri", system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* ----- Type scale — Display (Cormorant Garamond, display-md+ only) -- */
--display-xl: clamp(56px, 7vw, 104px);
--display-lg: clamp(44px, 5.2vw, 72px);
--display-md: clamp(36px, 4vw, 56px);
--display-sm: 32px;
/* ----- Type scale — Subhead (DM Sans) ------------------------------- */
--subhead-lg: 22px;
--subhead-md: 18px;
--subhead-sm: 15px;
--label: 13px;
--eyebrow: 12px;
/* ----- Type scale — Body (DM Sans) ---------------------------------- */
--body-lg: 18px;
--body-md: 16px;
--body-sm: 14px;
--caption: 12px;
/* ----- DM Sans bold display range (24-32px) ------------------------- */
--strong-xl: 32px;
--strong-lg: 28px;
--strong-md: 24px;
--strong-metric: 48px;
/* ----- Line heights ------------------------------------------------- */
--lh-display: 1.05;
--lh-subhead: 1.3;
--lh-body: 1.55;
--lh-tight: 1.15;
/* ----- Letter spacing ----------------------------------------------- */
--track-display: -0.01em;
--track-eyebrow: 0.08em;
--track-label: 0.04em;
--track-tight: -0.02em;
/* ----- Spacing scale ------------------------------------------------ */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* ----- Layout ------------------------------------------------------- */
--container-max: 1280px;
--container-narrow-max: 880px;
--container-reading-max: 760px;
--container-pad: var(--space-8);
--container-pad-mobile: var(--space-5);
--header-height: 72px;
/* ----- Radii — restrained; the brand leans rectilinear -------------- */
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-pill: 999px;
/* ----- Shadows ------------------------------------------------------ */
--shadow-sm: 0 1px 2px rgba(0, 57, 92, 0.06);
--shadow-md: 0 4px 16px rgba(0, 57, 92, 0.08);
--shadow-lg: 0 12px 40px rgba(0, 57, 92, 0.14);
--shadow-navy: 0 16px 48px rgba(0, 57, 92, 0.28);
/* ----- Motion ------------------------------------------------------- */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
--dur-fast: 140ms;
--dur-base: 220ms;
--dur-slow: 360ms;
}
/* ==========================================================================
2. RESET & BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
background: var(--bg-primary);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
button { font: inherit; }
/* ==========================================================================
3. TYPE PRIMITIVES — .s1-* classes (legacy, opt-in)
========================================================================== */
.s1-type {
color: var(--fg-1);
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.s1-type h1, .s1-h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--display-xl);
line-height: var(--lh-display);
letter-spacing: var(--track-display);
color: var(--fg-brand);
margin: 0 0 var(--space-5);
}
.s1-type h2, .s1-h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--display-lg);
line-height: var(--lh-display);
letter-spacing: var(--track-display);
color: var(--fg-brand);
margin: 0 0 var(--space-4);
}
.s1-type h3, .s1-h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--display-md);
line-height: var(--lh-tight);
color: var(--fg-brand);
margin: 0 0 var(--space-4);
}
.s1-type .s1-h3-strong, .s1-h3-strong {
font-family: var(--font-subhead);
font-weight: 700;
font-size: var(--display-sm);
line-height: var(--lh-tight);
color: var(--fg-brand);
margin: 0 0 var(--space-4);
}
.s1-type h4, .s1-h4 {
font-family: var(--font-subhead);
font-weight: 600;
font-size: var(--subhead-lg);
line-height: var(--lh-subhead);
color: var(--fg-1);
margin: 0 0 var(--space-3);
}
.s1-type h5, .s1-h5 {
font-family: var(--font-subhead);
font-weight: 600;
font-size: var(--subhead-md);
line-height: var(--lh-subhead);
color: var(--fg-1);
margin: 0 0 var(--space-2);
}
.s1-type h6, .s1-h6 {
font-family: var(--font-subhead);
font-weight: 700;
font-size: var(--subhead-sm);
line-height: var(--lh-subhead);
color: var(--fg-1);
margin: 0 0 var(--space-2);
}
.s1-type p, .s1-p {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
margin: 0 0 var(--space-4);
text-wrap: pretty;
}
/* Editorial kicker — canonical eyebrow class. The .eyebrow alias is the
recommended class on new pages. DM Sans bold (Cormorant reads too thin
at 13px). The em-dash glyph is what differentiates this from a
generic-UI eyebrow. */
.s1-eyebrow,
.eyebrow {
font-family: var(--font-subhead);
font-size: var(--label);
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--fg-accent);
}
.s1-eyebrow::before,
.eyebrow::before {
content: '— ';
color: var(--fg-accent);
}
.s1-label {
font-family: var(--font-subhead);
font-size: var(--label);
font-weight: 600;
letter-spacing: var(--track-label);
color: var(--fg-1);
}
.s1-caption {
font-family: var(--font-body);
font-size: var(--caption);
color: var(--fg-2);
line-height: var(--lh-body);
}
.s1-pullquote {
font-family: var(--font-display);
font-size: var(--display-md);
line-height: 1.2;
font-style: italic;
color: var(--fg-brand);
}
.s1-on-navy {
color: var(--fg-inverse);
background: var(--s1-navy);
}
.s1-on-navy .s1-h1,
.s1-on-navy .s1-h2,
.s1-on-navy .s1-h3,
.s1-on-navy .s1-pullquote { color: var(--fg-inverse); }
.s1-on-navy .s1-eyebrow { color: var(--s1-cyan); }
.s1-on-navy .s1-caption { color: var(--on-navy-3); }
/* ==========================================================================
4. LAYOUT — Containers
Three widths. .container is standard page width. .container--narrow is
for editorial sections (hero copy, single-column reading).
.container--reading is the tightest measure for long prose.
========================================================================== */
.container,
.container--narrow,
.container--reading {
margin: 0 auto;
padding: 0 var(--container-pad);
}
.container { max-width: var(--container-max); }
.container--narrow { max-width: var(--container-narrow-max); }
.container--reading { max-width: var(--container-reading-max); }
/* ==========================================================================
8. EDITORIAL KICKER — Universal em-dash glyph
THE SumnerOne brand differentiator from generic-UI eyebrows. Any class
acting as an "eyebrow" or "kicker label" picks up the same treatment:
DM Sans 700, 13px, uppercase, 0.08em tracking, em-dash + cyan glyph.
New pages should use .eyebrow or .section__eyebrow. The other names
here are for backward-compat with reference pages.
========================================================================== */
.eyebrow,
.section__eyebrow,
.hero__eyebrow,
.cta-section__eyebrow,
.cta-band__eyebrow,
.vertical-hero__eyebrow,
.vertical-cta__eyebrow,
.tldr-band__label,
.trust-bar__caption,
.role-selector__label,
.role-block__role,
.related-content__group-label,
.service-tile__label,
.pillar-card__num,
.pillar-card__audience-label,
.continuum__badge {
font-family: var(--font-subhead);
font-size: var(--label);
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
}
.eyebrow::before,
.section__eyebrow::before,
.hero__eyebrow::before,
.cta-section__eyebrow::before,
.cta-band__eyebrow::before,
.vertical-hero__eyebrow::before,
.vertical-cta__eyebrow::before,
.tldr-band__label::before,
.trust-bar__caption::before,
.role-selector__label::before,
.role-block__role::before,
.related-content__group-label::before,
.service-tile__label::before,
.pillar-card__num::before,
.pillar-card__audience-label::before {
content: '— ';
color: var(--s1-cyan);
}
/* Muted eyebrow — for secondary labels (group labels, audience labels).
Color shifts to mid-gray; em-dash glyph stays cyan as the brand mark. */
.eyebrow--mute,
.section__eyebrow--mute {
color: var(--s1-mid-gray);
}
/* ==========================================================================
9. CARD FOLD ACCENT
The "document-fold corner" — a small cyan triangle that fades in on
hover. This is a SumnerOne brand differentiator, referencing the
literal visual language of a folded document corner — on-brand for a
70-year print and document company.
In Webflow, this is applied via the .has-fold-corner opt-in class.
Component-specific selectors (.card, .outcome-card, .pillar-card,
.proof-card, .article-card, .persona-card) have been retired here
because those components are now defined as ws_* classes in Jerome's
Webflow style panel. To apply the fold-corner accent to a ws_* card,
add .has-fold-corner to the element's class list in Webflow.
========================================================================== */
.has-fold-corner {
position: relative;
}
.has-fold-corner::after {
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 24px;
height: 24px;
background: linear-gradient(45deg, transparent 50%, var(--s1-cyan) 50%);
border-top-right-radius: var(--radius-lg);
opacity: 0;
transition: opacity var(--dur-base) var(--ease-standard),
top var(--dur-base) var(--ease-standard),
height var(--dur-base) var(--ease-standard);
pointer-events: none;
z-index: 2;
}
.has-fold-corner:hover::after,
.has-fold-corner.is-open::after {
top: -2px;
height: 25px;
opacity: 1;
}
/* ==========================================================================
10. BUTTONS
Three button roles: nav (small navy in header), primary (large CTA),
secondary (text + arrow link).
.btn-primary defaults to navy bg / white text — for use on warm,
white, or cool backgrounds. On navy ground (inside .section--navy,
.cta-section, or .hero) it auto-flips to cyan bg / navy text so the
CTA pops. Explicit .btn-primary--cyan modifier still works.
========================================================================== */
.btn-nav {
font-family: var(--font-subhead);
font-size: var(--body-sm);
font-weight: 600;
color: var(--s1-white);
background: var(--s1-navy);
padding: 10px var(--space-5);
border-radius: var(--radius-md);
text-decoration: none;
transition: background var(--dur-fast) var(--ease-standard);
}
.btn-nav:hover { background: var(--s1-navy-hover); color: var(--s1-white); }
/* Saffron variant — reserved for talk-to-us actions (Contact Us, Call Us,
schedule-a-conversation). Differentiates relational CTAs from generic
primary actions. Use sparingly: never more than one saffron CTA visible
at a time. */
.btn-nav--saffron {
background: var(--s1-saffron);
color: #6B4416;
}
.btn-nav--saffron:hover {
background: #ED9525;
color: #6B4416;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-subhead);
font-size: var(--subhead-sm);
font-weight: 600;
color: var(--s1-white);
background: var(--s1-navy);
padding: 16px var(--space-7);
border-radius: var(--radius-md);
border: none;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.btn-primary:hover { background: var(--s1-navy-hover); color: var(--s1-white); }
.btn-primary svg { width: 18px; height: 18px; }
.btn-primary--cyan,
.section--navy .btn-primary,
.cta-section .btn-primary,
.hero .btn-primary {
background: var(--s1-cyan);
color: var(--s1-navy);
}
.btn-primary--cyan:hover,
.section--navy .btn-primary:hover,
.cta-section .btn-primary:hover,
.hero .btn-primary:hover {
background: var(--s1-cyan-hover);
color: var(--s1-navy);
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-subhead);
font-size: var(--subhead-sm);
font-weight: 500;
color: var(--s1-navy);
text-decoration: none;
padding: 16px var(--space-5);
white-space: nowrap;
transition: color var(--dur-fast) var(--ease-standard);
}
.btn-secondary:hover { color: var(--s1-cyan); }
.btn-secondary svg { width: 18px; height: 18px; }
.section--navy .btn-secondary,
.cta-section .btn-secondary,
.hero .btn-secondary {
color: var(--on-navy-2);
}
.section--navy .btn-secondary:hover,
.cta-section .btn-secondary:hover,
.hero .btn-secondary:hover {
color: var(--s1-white);
}
.cta-group {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-5);
flex-wrap: wrap;
}
.cta-group--start { justify-content: flex-start; }
/* CTA section (full-width navy CTA — see print-you-can-trust) */
.cta-section {
background: var(--s1-navy);
padding: var(--space-10) 0;
text-align: center;
color: var(--s1-white);
}
.cta-section__eyebrow {
color: var(--s1-cyan);
margin-bottom: var(--space-5);
display: block;
}
.cta-section__headline {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--display-md);
line-height: var(--lh-display);
letter-spacing: var(--track-display);
color: var(--s1-white);
margin-bottom: var(--space-6);
}
.cta-section__body {
font-family: var(--font-body);
font-size: var(--body-lg);
line-height: var(--lh-body);
color: var(--on-navy-2);
max-width: 640px;
margin: 0 auto var(--space-7);
}
/* CTA on warm (light-bg call-to-action band — see education vertical-cta) */
.cta-band {
background: var(--bg-warm);
padding: var(--space-10) 0;
text-align: center;
position: relative;
}
.cta-band::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 64px;
height: 3px;
background: var(--s1-cyan);
}
.cta-band__eyebrow {
color: var(--s1-cyan);
margin-bottom: var(--space-5);
display: block;
}
.cta-band__headline {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--display-md);
line-height: var(--lh-display);
letter-spacing: var(--track-display);
color: var(--s1-navy);
margin: 0 auto var(--space-6);
max-width: 760px;
}
.cta-band__body {
font-family: var(--font-body);
font-size: var(--body-lg);
line-height: var(--lh-body);
color: var(--fg-1);
max-width: 720px;
margin: 0 auto var(--space-7);
}
/* ==========================================================================
16. TRUST BAR — Logo marquee
Auto-scrolling row of customer names/logos. Pause on hover. Edges
masked so logos fade rather than clip. Set A and Set B should match
for seamless looping.
========================================================================== */
.trust-bar {
background: var(--s1-white);
padding: var(--space-6) 0;
border-bottom: 1px solid var(--border-1);
overflow: hidden;
}
.trust-bar__caption {
color: var(--fg-2);
text-align: center;
margin-bottom: var(--space-5);
display: block;
}
.trust-bar__marquee {
position: relative;
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.trust-bar__track {
display: flex;
gap: var(--space-9);
width: max-content;
animation: trust-scroll 48s linear infinite;
}
.trust-bar__marquee:hover .trust-bar__track { animation-play-state: paused; }
.trust-bar__logo {
font-family: var(--font-subhead);
font-weight: 600;
font-size: var(--subhead-md);
color: var(--s1-mid-gray);
letter-spacing: -0.01em;
white-space: nowrap;
filter: grayscale(1);
opacity: 0.78;
}
@keyframes trust-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ==========================================================================
17. UTILITIES
========================================================================== */
.tbd-tag {
display: inline-block;
background: rgba(247, 169, 71, 0.18);
color: #B97D20;
border: 1px solid rgba(247, 169, 71, 0.4);
border-radius: var(--radius-pill);
font-family: var(--font-subhead);
font-size: 10px;
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
padding: 2px 8px;
margin-left: var(--space-2);
vertical-align: middle;
}
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* ==========================================================================
18. RESPONSIVE
Two breakpoints carry most of the system: 1100px (multi-col grids
collapse) and 900px (containers tighten, header nav collapses).
Page-specific grids should override at 1100px as needed.
========================================================================== */
@media (max-width: 1100px) {
.article-list { grid-template-columns: 1fr 1fr; }
.stat-strip { grid-template-columns: 1fr 1fr; }
.two-col { grid-template-columns: 1fr; }
.two-col__sticky { position: static; }
}
@media (max-width: 900px) {
.container,
.container--narrow,
.container--reading { padding: 0 var(--container-pad-mobile); }
.site-header__inner,
.site-footer__inner { padding: 0 var(--container-pad-mobile); }
.site-header__nav { display: none; }
.article-list { grid-template-columns: 1fr; }
.stat-strip { grid-template-columns: 1fr; gap: var(--space-5); }
.hero { padding: var(--space-9) 0 var(--space-8); }
.closer { font-size: 22px; padding: var(--space-5); }
.editorial-close { font-size: 20px; }
}
/* ==========================================================================
19. FORM INPUTS
Field, label, input/select/textarea, helper text. Cyan focus ring.
Legible at 16px (DM Sans body) so iOS doesn't auto-zoom on focus.
Use .form-field as the wrapper; .form-row for side-by-side fields.
========================================================================== */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: var(--space-5);
}
.form-field__label {
font-family: var(--font-subhead);
font-size: var(--label);
font-weight: 600;
letter-spacing: var(--track-label);
color: var(--fg-1);
}
.form-field__label--required::after {
content: ' *';
color: var(--s1-cyan);
}
/* Generic input, select, textarea — share most properties */
.input,
.select,
.textarea {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
background: var(--s1-white);
border: 1px solid var(--border-2);
border-radius: var(--radius-md);
padding: 10px var(--space-4);
transition: border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard);
width: 100%;
}
.input:hover,
.select:hover,
.textarea:hover {
border-color: var(--s1-mid-gray);
}
.input:focus,
.select:focus,
.textarea:focus {
outline: none;
border-color: var(--s1-cyan);
box-shadow: 0 0 0 3px rgba(0, 179, 224, 0.18);
}
.input::placeholder,
.textarea::placeholder { color: var(--s1-mid-gray); }
.input:disabled,
.select:disabled,
.textarea:disabled {
background: var(--bg-cool);
color: var(--fg-2);
cursor: not-allowed;
}
/* Select gets a chevron via CSS (works in all evergreen browsers) */
.select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
padding-right: var(--space-7);
}
.textarea {
resize: vertical;
min-height: 120px;
}
/* Helper / error text below the field */
.form-field__help {
font-family: var(--font-body);
font-size: var(--caption);
color: var(--fg-2);
line-height: var(--lh-body);
}
.form-field__help--error { color: #C53030; }
.form-field--error .input,
.form-field--error .select,
.form-field--error .textarea { border-color: #C53030; }
.form-field--error .input:focus,
.form-field--error .select:focus,
.form-field--error .textarea:focus {
box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.18);
}
/* On navy ground — invert surface and borders */
.section--navy .form-field__label,
.cta-section .form-field__label { color: var(--s1-white); }
.section--navy .input,
.section--navy .select,
.section--navy .textarea,
.cta-section .input,
.cta-section .select,
.cta-section .textarea {
background: rgba(255, 255, 255, 0.06);
border-color: var(--border-on-navy-card);
color: var(--s1-white);
}
.section--navy .input::placeholder,
.section--navy .textarea::placeholder,
.cta-section .input::placeholder,
.cta-section .textarea::placeholder { color: var(--on-navy-3); }
/* Checkbox / radio — keep it simple, accent-color is the brand cyan */
.checkbox,
.radio {
accent-color: var(--s1-cyan);
width: 16px; height: 16px;
margin-right: var(--space-2);
vertical-align: middle;
}
/* ==========================================================================
20. BADGES
Small inline pills. Distinct from .tbd-tag (saffron placeholder) — use
.badge for status, category, or count chips that ship in real copy.
========================================================================== */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-subhead);
font-size: var(--caption);
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
padding: 3px var(--space-3);
border-radius: var(--radius-pill);
border: 1px solid transparent;
white-space: nowrap;
vertical-align: middle;
}
.badge--navy {
background: rgba(0, 57, 92, 0.08);
color: var(--s1-navy);
}
.badge--cyan {
background: rgba(0, 179, 224, 0.12);
color: var(--s1-cyan);
}
.badge--neutral {
background: var(--bg-cool);
color: var(--fg-2);
border-color: var(--border-1);
}
.badge--saffron {
background: rgba(247, 169, 71, 0.18);
color: #B97D20;
border-color: rgba(247, 169, 71, 0.4);
}
.badge--success {
background: rgba(141, 198, 63, 0.16);
color: #4A7A1F;
}
/* On navy, badges flip surfaces */
.section--navy .badge--navy,
.cta-section .badge--navy {
background: rgba(255, 255, 255, 0.10);
color: var(--s1-white);
}
.section--navy .badge--neutral,
.cta-section .badge--neutral {
background: rgba(255, 255, 255, 0.06);
color: var(--on-navy-3);
border-color: var(--border-on-navy-card);
}
/* Badge with a leading dot — used in continuum-style step indicators */
.badge__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: currentColor;
display: inline-block;
flex-shrink: 0;
}
/* ==========================================================================
21. SAFFRON BUTTON VARIANT
Saffron remains brand-restricted (campaign / sustainability use), but
.btn-primary--saffron is now an approved CTA color. Same shape as the
other primary variants; saffron bg with deep-amber text for contrast.
========================================================================== */
.btn-primary--saffron {
background: var(--s1-saffron);
color: #6B4416;
}
.btn-primary--saffron:hover {
background: #ED9525;
color: #6B4416;
}
/* On navy, the saffron CTA stays warm — just nudge the hover. */
.section--navy .btn-primary--saffron,
.cta-section .btn-primary--saffron,
.hero .btn-primary--saffron {
background: var(--s1-saffron);
color: #6B4416;
}
.section--navy .btn-primary--saffron:hover,
.cta-section .btn-primary--saffron:hover,
.hero .btn-primary--saffron:hover {
background: #ED9525;
color: #6B4416;
}
/* ==========================================================================
22. SITE CHROME — site-header, breadcrumb, banner-note, site-footer
Lifted from the print-you-can-trust + education-vertical sample patterns.
Banner-note is the slim editorial bar called out in CLAUDE.md.
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--s1-white);
border-bottom: 1px solid var(--border-1);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
}
.site-header__logo {
display: inline-flex;
align-items: center;
text-decoration: none;
/* Text fallback when no ![]()
is present */
font-family: var(--font-display);
font-weight: 600;
font-size: 22px;
color: var(--s1-navy);
letter-spacing: -0.01em;
}
.site-header__logo img,
.site-header__logo svg {
display: block;
height: 36px;
width: auto;
}
.site-header__nav {
display: flex;
align-items: center;
gap: var(--space-6);
height: 100%;
}
/* nav-group is intentionally static — dropdowns break out to .site-header
so the panel can span full container width. */
.site-header__nav-group {
position: static;
display: flex;
align-items: center;
height: 100%;
}
.site-header__nav-item {
position: relative;
font-family: var(--font-subhead);
font-size: var(--body-sm);
font-weight: 500;
color: var(--fg-1);
text-decoration: none;
cursor: pointer;
background: none;
border: none;
padding: 0 0 4px;
display: inline-flex;
align-items: center;
gap: 4px;
height: 100%;
align-self: center;
transition: color var(--dur-fast) var(--ease-standard);
}
.site-header__nav-item:hover { color: var(--s1-cyan); }
.site-header__nav-item--has-dropdown::after {
content: '▾';
font-size: 10px;
color: var(--s1-mid-gray);
transition: transform var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
/* Active state — cyan underline + caret rotation when the dropdown is open */
.site-header__nav-item.is-active { color: var(--s1-navy); }
.site-header__nav-item.is-active::before {
content: '';
position: absolute;
left: -4px;
right: -4px;
bottom: -1px;
height: 3px;
background: var(--s1-cyan);
border-radius: 2px 2px 0 0;
}
.site-header__nav-item.is-active.site-header__nav-item--has-dropdown::after {
transform: rotate(180deg);
color: var(--s1-navy);
}
.nav-hidden { display: none !important; }
/* Mega-dropdown panel — anchors to .site-header (sticky positioning context)
so it spans the full container width. Each nav-group's dropdown is
absolutely positioned across the header bottom edge. JS manages
one-open-at-a-time. */
.site-header__dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--s1-white);
border-top: 1px solid var(--border-1);
border-bottom: 1px solid var(--s1-navy);
box-shadow: var(--shadow-lg);
z-index: 200;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard),
visibility 0s linear var(--dur-fast);
}
.site-header__dropdown.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
.site-header__dropdown-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: var(--space-7) var(--container-pad) var(--space-8);
}
.site-header__dropdown-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
}
.site-header__dropdown-grid--three-col {
grid-template-columns: 1fr 1.4fr 1fr;
}
.site-header__dropdown-grid--single {
grid-template-columns: 1fr;
max-width: 360px;
}
.site-header__dropdown-col {
display: flex;
flex-direction: column;
}
.site-header__dropdown-label {
font-family: var(--font-subhead);
font-size: var(--eyebrow);
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--s1-mid-gray);
margin-bottom: var(--space-5);
}
.site-header__dropdown-link {
display: block;
padding: var(--space-3) 0;
text-decoration: none;
color: inherit;
border-radius: var(--radius-md);
transition: background var(--dur-fast) var(--ease-standard);
}
.site-header__dropdown-link + .site-header__dropdown-link {
border-top: 1px solid transparent;
}
.site-header__dropdown-link__title {
display: block;
font-family: var(--font-subhead);
font-size: var(--body-md);
font-weight: 700;
color: var(--s1-navy);
line-height: 1.25;
margin-bottom: 4px;
transition: color var(--dur-fast) var(--ease-standard);
}
.site-header__dropdown-link__sub {
display: block;
font-family: var(--font-body);
font-size: var(--body-sm);
font-weight: 400;
color: var(--fg-2);
line-height: var(--lh-subhead);
}
.site-header__dropdown-link:hover .site-header__dropdown-link__title {
color: var(--s1-cyan);
}
.breadcrumb {
background: var(--s1-white);
border-bottom: 1px solid var(--border-1);
padding: var(--space-3) 0;
}
.breadcrumb__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
font-family: var(--font-subhead);
font-size: var(--caption);
color: var(--fg-2);
}
.breadcrumb a {
color: var(--fg-2);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-standard);
}
.breadcrumb a:hover { color: var(--s1-cyan); }
.breadcrumb__sep {
margin: 0 var(--space-2);
color: var(--border-2);
}
.breadcrumb__current {
color: var(--fg-1);
font-weight: 500;
}
.banner-note {
background: var(--bg-warm);
border-bottom: 1px solid var(--border-1);
padding: var(--space-3) 0;
text-align: center;
}
.banner-note__copy {
font-family: var(--font-display);
font-style: italic;
font-size: 14px;
color: var(--fg-2);
letter-spacing: 0.01em;
}
.site-footer {
background: var(--s1-navy);
padding: var(--space-8) 0;
}
.site-footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
gap: var(--space-6);
flex-wrap: wrap;
}
.site-footer__logo {
display: inline-flex;
align-items: center;
text-decoration: none;
/* Text fallback when no ![]()
is present */
font-family: var(--font-display);
font-weight: 600;
font-size: 22px;
color: var(--s1-white);
letter-spacing: -0.01em;
}
.site-footer__logo img,
.site-footer__logo svg {
display: block;
height: 32px;
width: auto;
}
.site-footer__promise {
font-family: var(--font-subhead);
font-weight: 600;
font-size: var(--body-sm);
color: var(--s1-cyan);
}
.site-footer__meta {
font-family: var(--font-body);
font-size: var(--caption);
color: var(--on-navy-mute);
}
/* ==========================================================================
23. SECTION PRIMITIVES — sections, eyebrow, headline, lede, prose, two-col
========================================================================== */
.section { padding: var(--space-10) 0; }
.section--white { background: var(--s1-white); }
.section--light-gray,
.section--cool { background: var(--bg-cool); }
.section--parchment,
.section--warm { background: var(--bg-warm); }
.section--navy { background: var(--s1-navy); color: var(--s1-white); }
.section__eyebrow {
font-family: var(--font-subhead);
font-size: var(--eyebrow);
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--s1-cyan);
margin-bottom: var(--space-4);
display: block;
}
.section__eyebrow--mute { color: var(--s1-mid-gray); }
.section__headline {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--display-md);
line-height: var(--lh-display);
letter-spacing: var(--track-display);
color: var(--fg-brand);
margin-bottom: var(--space-5);
max-width: 880px;
}
.section__headline--inverse,
.section--navy .section__headline { color: var(--s1-white); }
.section__headline--wide { max-width: 720px; }
.section__lede {
font-family: var(--font-body);
font-size: var(--body-lg);
line-height: var(--lh-body);
color: var(--fg-1);
max-width: 760px;
margin-bottom: var(--space-7);
}
.section--navy .section__lede { color: var(--on-navy-2); }
.prose {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
}
.prose p + p { margin-top: var(--space-5); }
.prose--inverse { color: var(--on-navy-1); }
.prose--inverse p + p { margin-top: var(--space-5); }
.prose ul,
.prose ol {
margin-left: var(--space-6);
margin-bottom: var(--space-5);
padding-left: var(--space-4);
}
.prose li { margin-bottom: var(--space-2); }
.prose p + ul,
.prose p + ol { margin-top: var(--space-5); }
.prose ul + p,
.prose ol + p { margin-top: var(--space-5); }
.prose h2 {
margin-top: var(--space-9);
margin-bottom: var(--space-4);
}
.prose h3 {
margin-top: var(--space-7);
margin-bottom: var(--space-3);
}
.prose h4 {
margin-top: var(--space-6);
margin-bottom: var(--space-2);
}
.prose > h2:first-child,
.prose > h3:first-child,
.prose > h4:first-child { margin-top: 0; }
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-9);
align-items: start;
}
.two-col--sidebar { grid-template-columns: 280px 1fr; }
.two-col__sticky {
position: sticky;
top: calc(var(--header-height) + var(--space-7));
}
/* ==========================================================================
24. HERO VARIANTS — hero (pillar), vertical-hero (verticals)
========================================================================== */
.hero {
background: var(--s1-navy);
padding: var(--space-10) 0 var(--space-9);
position: relative;
overflow: hidden;
}
.hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: var(--s1-cyan);
}
.hero__eyebrow {
color: var(--s1-cyan);
margin-bottom: var(--space-5);
display: block;
}
.hero__headline {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--display-xl);
line-height: var(--lh-display);
letter-spacing: var(--track-display);
color: var(--s1-white);
margin-bottom: var(--space-5);
}
.hero__subhead {
font-family: var(--font-display);
font-weight: 600;
font-style: italic;
font-size: var(--display-md);
color: var(--s1-cyan);
margin-bottom: var(--space-7);
line-height: 1.18;
max-width: 920px;
}
.hero__body {
font-family: var(--font-body);
font-size: var(--body-lg);
line-height: var(--lh-body);
color: var(--on-navy-1);
max-width: 680px;
}
.hero__body p + p { margin-top: var(--space-4); }
/* Hero — Narrative variant (long sentence-style headlines on playbook + hub pages).
Steps the headline + subhead down so multi-line statements don't overpower the page. */
.hero--narrative .hero__headline { font-size: var(--display-lg); }
.hero--narrative .hero__subhead { font-size: var(--display-sm); }
/* Playbook at-a-glance diagram — full-width responsive SVG wrapper. */
.playbook-diagram {
margin-top: var(--space-7);
margin-left: auto;
margin-right: auto;
max-width: 1150px;
}
.playbook-diagram__image {
display: block;
width: 100%;
height: auto;
}
.vertical-hero {
background: var(--s1-navy);
padding: var(--space-10) 0 var(--space-9);
position: relative;
overflow: hidden;
}
.vertical-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: var(--s1-cyan);
}
.vertical-hero__eyebrow {
color: var(--s1-cyan);
margin-bottom: var(--space-5);
display: block;
}
.vertical-hero__headline {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--display-lg);
line-height: var(--lh-display);
letter-spacing: var(--track-display);
color: var(--s1-white);
margin-bottom: var(--space-5);
}
.vertical-hero__subhead {
font-family: var(--font-display);
font-weight: 600;
font-style: italic;
font-size: var(--display-sm);
color: var(--s1-cyan);
margin-bottom: var(--space-7);
line-height: 1.18;
max-width: 920px;
}
.vertical-hero__body {
font-family: var(--font-body);
font-size: var(--body-lg);
line-height: var(--lh-body);
color: var(--on-navy-1);
max-width: 760px;
margin-bottom: var(--space-7);
}
.vertical-hero__cta {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-subhead);
font-size: var(--subhead-sm);
font-weight: 600;
color: var(--s1-navy);
background: var(--s1-cyan);
padding: 16px var(--space-7);
border-radius: var(--radius-md);
text-decoration: none;
transition: background var(--dur-fast) var(--ease-standard);
}
.vertical-hero__cta:hover { background: var(--s1-cyan-hover); color: var(--s1-navy); }
.vertical-hero__cta svg { width: 18px; height: 18px; }
/* ==========================================================================
25. TLDR BAND
========================================================================== */
.tldr-band {
background: var(--bg-warm);
border-bottom: 1px solid var(--border-1);
padding: var(--space-7) 0;
}
.tldr-band__inner {
display: grid;
grid-template-columns: 220px 1fr;
gap: var(--space-7);
align-items: start;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
}
.tldr-band__label { color: var(--s1-navy); }
.tldr-band__copy {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
max-width: 760px;
}
/* ==========================================================================
26. STAT STRIP
========================================================================== */
.stat-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-top: var(--space-8);
padding-top: var(--space-8);
border-top: 1px solid var(--border-1);
}
.section--navy .stat-strip { border-top-color: var(--border-on-navy); }
.stat-item__number {
font-family: var(--font-subhead);
font-size: var(--strong-metric);
font-weight: 700;
color: var(--s1-cyan);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: "lnum" 1, "tnum" 1;
margin-bottom: var(--space-3);
}
.stat-item__label {
font-family: var(--font-body);
font-size: var(--body-sm);
color: var(--fg-2);
line-height: var(--lh-body);
}
.section--navy .stat-item__label { color: var(--on-navy-3); }
/* ==========================================================================
27. CARD GRIDS — outcome, pillar, persona, proof, hover-grid/checklist,
pillar-mini, proof-stat
========================================================================== */
.outcomes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
margin-top: var(--space-7);
}
.outcome-card {
background: var(--s1-white);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
transition: box-shadow var(--dur-base) var(--ease-standard),
border-top-color var(--dur-base) var(--ease-standard),
border-top-width var(--dur-base) var(--ease-standard);
}
.outcome-card:hover {
box-shadow: var(--shadow-md);
border-top: 2px solid var(--s1-cyan);
}
.outcome-card__icon {
width: 36px; height: 36px;
border-radius: var(--radius-md);
background: rgba(0, 179, 224, 0.12);
display: flex; align-items: center; justify-content: center;
color: var(--s1-cyan);
margin-bottom: var(--space-4);
}
.outcome-card__icon svg { width: 18px; height: 18px; }
.outcome-card__title {
font-family: var(--font-subhead);
font-size: var(--subhead-md);
font-weight: 700;
color: var(--s1-navy);
margin-bottom: var(--space-4);
}
.outcome-card__questions {
font-family: var(--font-subhead);
font-weight: 500;
font-size: 17px;
line-height: 1.5;
color: var(--fg-1);
margin-bottom: var(--space-5);
}
.outcome-card__body {
font-family: var(--font-body);
font-size: var(--body-sm);
line-height: var(--lh-body);
color: var(--fg-2);
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height var(--dur-slow) var(--ease-standard),
opacity var(--dur-base) var(--ease-standard),
margin var(--dur-base) var(--ease-standard);
margin-bottom: 0;
}
.outcome-card.is-open .outcome-card__body {
max-height: 800px;
opacity: 1;
margin-bottom: var(--space-5);
}
.outcome-card__toggle {
margin-top: auto;
align-self: flex-start;
background: none;
border: none;
padding: 0;
font-family: var(--font-subhead);
font-size: var(--body-sm);
font-weight: 600;
color: var(--s1-cyan);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--space-2);
transition: color var(--dur-fast) var(--ease-standard);
}
.outcome-card__toggle:hover { color: var(--s1-navy); }
.outcome-card__toggle svg {
width: 16px; height: 16px;
transition: transform var(--dur-base) var(--ease-standard);
}
.outcome-card.is-open .outcome-card__toggle svg { transform: rotate(180deg); }
.outcomes-closer {
margin-top: var(--space-8);
padding: var(--space-6) var(--space-7);
background: var(--s1-navy);
border-radius: var(--radius-lg);
color: var(--s1-white);
font-family: var(--font-subhead);
font-weight: 700;
font-style: italic;
font-size: 28px;
line-height: 1.3;
text-align: center;
}
.outcomes-closer strong { color: var(--s1-cyan); font-weight: 600; font-style: italic; }
.pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
margin-top: var(--space-7);
}
.pillar-card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
margin-top: var(--space-7);
}
.pillar-card-grid--three {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
.pillar-card-grid--three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.pillar-card-grid,
.pillar-card-grid--three { grid-template-columns: 1fr; }
}
.pillar-card {
background: var(--s1-white);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
padding: var(--space-7);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
text-decoration: none;
color: inherit;
transition: box-shadow var(--dur-base) var(--ease-standard),
border-top-color var(--dur-base) var(--ease-standard),
border-top-width var(--dur-base) var(--ease-standard);
}
.pillar-card:hover {
box-shadow: var(--shadow-md);
border-top: 2px solid var(--s1-cyan);
}
.pillar-card__num {
color: var(--s1-cyan);
margin-bottom: var(--space-4);
display: block;
}
.pillar-card__title {
font-family: var(--font-subhead);
font-weight: 700;
font-size: var(--strong-xl);
line-height: var(--lh-tight);
color: var(--s1-navy);
margin-bottom: var(--space-4);
}
.pillar-card__sub {
font-family: var(--font-subhead);
font-weight: 600;
font-style: italic;
font-size: 17px;
color: var(--s1-cyan);
line-height: 1.45;
margin-bottom: var(--space-5);
}
.pillar-card__body {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
margin-bottom: var(--space-5);
}
.pillar-card__audience {
font-family: var(--font-body);
font-size: var(--body-sm);
color: var(--fg-2);
line-height: var(--lh-body);
padding: var(--space-4) 0;
border-top: 1px solid var(--border-1);
margin-bottom: var(--space-5);
}
.pillar-card__audience-label {
display: block;
color: var(--s1-mid-gray);
margin-bottom: var(--space-2);
}
.pillar-card__link {
margin-top: auto;
font-family: var(--font-subhead);
font-size: var(--body-sm);
font-weight: 600;
color: var(--s1-navy);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-2);
transition: color var(--dur-fast) var(--ease-standard);
}
.pillar-card__link:hover { color: var(--s1-cyan); }
.pillar-card__link svg { width: 16px; height: 16px; }
.persona-grid,
.personas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
margin-top: var(--space-7);
}
.persona-card {
background: var(--s1-white);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
position: relative;
transition: box-shadow var(--dur-base) var(--ease-standard),
border-top-color var(--dur-base) var(--ease-standard),
border-top-width var(--dur-base) var(--ease-standard);
}
.persona-card:hover {
box-shadow: var(--shadow-md);
border-top: 2px solid var(--s1-cyan);
}
.persona-card__role {
font-family: var(--font-subhead);
font-size: var(--strong-md);
font-weight: 700;
line-height: 1.2;
color: var(--s1-navy);
margin-bottom: var(--space-4);
}
.persona-card__body {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
}
.proof-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
margin-top: var(--space-7);
margin-bottom: var(--space-9);
}
.proof-card {
background: var(--surface-on-navy);
border: 1px solid var(--border-on-navy-card);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: background var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard);
}
.proof-card:hover {
background: var(--surface-on-navy-hover);
border-color: rgba(0, 179, 224, 0.5);
}
.proof-card__media {
aspect-ratio: 3 / 2;
background-color: var(--s1-navy);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.proof-card__media::after {
content: '';
position: absolute;
inset: 0;
background: var(--s1-navy-wash);
pointer-events: none;
z-index: 1;
}
.proof-card__media[data-placeholder] {
background-color: #002B47;
background-image:
radial-gradient(ellipse at 20% 25%, rgba(0, 179, 224, 0.14) 0%, transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(0, 179, 224, 0.08) 0%, transparent 55%);
}
.proof-card__media[data-placeholder]::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
background-size: 32px 32px;
z-index: 1;
}
.proof-card__media-icon {
position: absolute;
top: var(--space-4);
right: var(--space-4);
z-index: 2;
width: 32px; height: 32px;
border-radius: var(--radius-md);
background: rgba(0, 179, 224, 0.14);
border: 1px solid rgba(0, 179, 224, 0.36);
display: flex; align-items: center; justify-content: center;
color: var(--s1-cyan);
}
.proof-card__media-icon svg { width: 16px; height: 16px; }
.proof-card__media:not([data-placeholder]) .proof-card__media-icon { display: none; }
.proof-card__media-caption {
position: absolute;
bottom: var(--space-4);
left: var(--space-5);
right: var(--space-5);
z-index: 2;
font-family: var(--font-subhead);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--s1-white);
display: flex;
align-items: center;
gap: var(--space-3);
}
.proof-card__media-caption::before {
content: '';
flex-shrink: 0;
width: 20px; height: 1px;
background: var(--s1-cyan);
}
.proof-card__content {
padding: var(--space-6);
display: flex;
flex-direction: column;
flex: 1;
}
.proof-card__metric {
font-family: var(--font-subhead);
font-weight: 700;
font-size: var(--strong-metric);
line-height: 1;
color: var(--s1-cyan);
margin-bottom: var(--space-3);
letter-spacing: -0.02em;
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: "lnum" 1, "tnum" 1;
}
.proof-card__metric-label {
font-family: var(--font-subhead);
font-size: var(--body-sm);
color: var(--on-navy-3);
margin-bottom: var(--space-5);
}
.proof-card__institution {
font-family: var(--font-subhead);
font-size: var(--subhead-md);
font-weight: 700;
color: var(--s1-white);
margin-bottom: var(--space-3);
}
.proof-card__body {
font-family: var(--font-body);
font-size: var(--body-sm);
line-height: var(--lh-body);
color: var(--on-navy-2);
}
.hover-grid,
.checklist {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
margin-top: var(--space-7);
}
.hover-grid__item,
.checklist__item {
background: var(--s1-white);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex;
gap: var(--space-4);
align-items: flex-start;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard);
}
.hover-grid__item:hover,
.checklist__item:hover {
box-shadow: var(--shadow-md);
border-color: var(--s1-cyan);
}
.hover-grid__number,
.checklist__number {
font-family: var(--font-display);
font-size: var(--strong-xl);
font-weight: 600;
color: var(--s1-cyan);
line-height: 1;
flex-shrink: 0;
width: 44px;
}
.hover-grid__text,
.checklist__text { flex: 1; }
.hover-grid__title,
.checklist__title {
font-family: var(--font-subhead);
font-size: var(--subhead-sm);
font-weight: 600;
color: var(--fg-1);
margin-bottom: var(--space-2);
}
.hover-grid__desc,
.checklist__desc {
font-family: var(--font-body);
font-size: var(--body-sm);
line-height: var(--lh-body);
color: var(--fg-2);
}
.hover-grid__footer,
.checklist__footer {
margin-top: var(--space-7);
padding: var(--space-5) var(--space-6);
background: var(--s1-navy);
border-radius: var(--radius-lg);
color: var(--on-navy-1);
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
}
.hover-grid__footer strong,
.checklist__footer strong { color: var(--s1-cyan); font-weight: 600; }
.pillar-mini-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.pillar-mini {
background: var(--s1-white);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
text-decoration: none;
color: inherit;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: box-shadow var(--dur-base) var(--ease-standard),
border-top-color var(--dur-base) var(--ease-standard),
border-top-width var(--dur-base) var(--ease-standard);
}
.pillar-mini:hover {
box-shadow: var(--shadow-md);
border-top: 2px solid var(--s1-cyan);
}
.pillar-mini__num {
font-family: var(--font-subhead);
font-size: 22px;
font-weight: 700;
color: var(--s1-cyan);
line-height: 1;
letter-spacing: -0.01em;
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: "lnum" 1, "tnum" 1;
}
.pillar-mini__title {
font-family: var(--font-subhead);
font-size: var(--body-md);
font-weight: 600;
color: var(--s1-navy);
line-height: var(--lh-subhead);
}
.pillar-mini__arrow {
margin-top: auto;
color: var(--s1-mid-gray);
transition: color var(--dur-fast) var(--ease-standard);
}
.pillar-mini:hover .pillar-mini__arrow { color: var(--s1-cyan); }
.pillar-mini__arrow svg { width: 18px; height: 18px; }
.proof-stat {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.proof-stat__metric {
font-family: var(--font-subhead);
font-size: var(--strong-metric);
font-weight: 700;
color: var(--s1-cyan);
line-height: 1;
letter-spacing: -0.02em;
}
.proof-stat__metric-label {
font-family: var(--font-subhead);
font-size: var(--eyebrow);
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--s1-mid-gray);
}
.proof-stat__desc {
font-family: var(--font-body);
font-size: var(--body-sm);
line-height: var(--lh-body);
color: var(--fg-2);
}
/* ==========================================================================
28. FRAMEWORK & APPROACH — continuum, approach-list, framework
========================================================================== */
.continuum {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
margin-top: var(--space-7);
position: relative;
}
.continuum::before {
content: '';
position: absolute;
top: 28px;
left: calc(var(--space-4) / 2 + 28px);
right: calc(var(--space-4) / 2 + 28px);
height: 2px;
background: var(--border-1);
z-index: 0;
}
.continuum__card {
background: var(--s1-white);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
position: relative;
z-index: 1;
transition: box-shadow var(--dur-base) var(--ease-standard);
}
.continuum__card:hover { box-shadow: var(--shadow-md); }
.continuum__card--active {
border-color: var(--s1-navy);
border-top: 2px solid var(--s1-cyan);
}
.continuum__card--building {
border-top: 2px solid var(--s1-cyan);
opacity: 0.88;
}
.continuum__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--s1-mid-gray);
margin-bottom: var(--space-4);
}
.continuum__badge--active { color: var(--s1-navy); }
.continuum__badge-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--border-2);
}
.continuum__badge-dot--active { background: var(--s1-cyan); }
.continuum__title {
font-family: var(--font-subhead);
font-size: var(--subhead-sm);
font-weight: 700;
color: var(--fg-1);
margin-bottom: var(--space-3);
}
.continuum__body {
font-family: var(--font-body);
font-size: var(--body-sm);
line-height: var(--lh-body);
color: var(--fg-2);
}
.continuum__tag {
display: inline-block;
margin-top: var(--space-4);
font-family: var(--font-subhead);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px var(--space-3);
border-radius: var(--radius-pill);
}
.continuum__tag--today {
background: rgba(0, 57, 92, 0.08);
color: var(--s1-navy);
}
.continuum__tag--building {
background: rgba(0, 179, 224, 0.12);
color: var(--s1-cyan);
}
.continuum__summary {
margin-top: var(--space-7);
padding: var(--space-5) var(--space-6);
background: var(--bg-warm);
border-left: 2px solid var(--s1-navy);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
}
/* Continuum lede — 1-line visible summary shown above the expandable full body. */
.continuum__lede {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
margin-top: var(--space-1);
}
/* Progressive disclosure — native / used inside continuum + framework cards.
Content stays in the DOM (SEO + AEO indexable); the toggle hides/reveals the long-form body. */
.continuum__details,
.framework__details {
margin-top: var(--space-4);
border-top: 1px solid var(--border-1);
}
.continuum__details-toggle,
.framework__details-toggle {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) 0 var(--space-2);
font-family: var(--font-subhead);
font-size: var(--subhead-sm);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--s1-cyan);
list-style: none;
transition: color var(--dur-fast) var(--ease-standard);
}
.continuum__details-toggle::-webkit-details-marker,
.framework__details-toggle::-webkit-details-marker { display: none; }
.continuum__details-toggle::after,
.framework__details-toggle::after {
content: '↓';
font-size: 0.9em;
transition: transform var(--dur-fast) var(--ease-standard);
}
.continuum__details[open] > .continuum__details-toggle::after,
.framework__details[open] > .framework__details-toggle::after {
transform: rotate(180deg);
}
.continuum__details-toggle:hover,
.framework__details-toggle:hover { color: var(--s1-cyan-hover); }
.continuum__details[open] .continuum__body,
.framework__details[open] .framework__desc {
padding-top: var(--space-2);
}
.approach-list {
display: flex;
flex-direction: column;
gap: var(--space-6);
margin-top: var(--space-7);
}
.approach-item {
display: flex;
gap: var(--space-6);
padding-bottom: var(--space-6);
border-bottom: 1px solid var(--border-on-navy);
}
.approach-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.approach-item__icon {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: var(--radius-md);
background: rgba(0, 179, 224, 0.16);
display: flex; align-items: center; justify-content: center;
color: var(--s1-cyan);
}
.approach-item__icon svg { width: 20px; height: 20px; }
.approach-item__title {
font-family: var(--font-subhead);
font-size: var(--strong-md);
font-weight: 700;
line-height: 1.2;
color: var(--s1-white);
margin-bottom: var(--space-3);
}
.approach-item__body {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--on-navy-2);
}
.approach-item__metrics {
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px dashed var(--border-on-navy);
font-family: var(--font-subhead);
font-size: var(--body-sm);
color: var(--on-navy-3);
}
.approach-item__metrics-label {
font-family: var(--font-subhead);
font-size: var(--eyebrow);
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--s1-cyan);
display: inline-block;
margin-right: var(--space-3);
}
.framework {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-top: var(--space-7);
}
.framework__item {
padding: var(--space-6);
background: var(--s1-white);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.framework__num {
font-family: var(--font-display);
font-size: 48px;
font-weight: 600;
color: var(--s1-cyan);
line-height: 1;
margin-bottom: var(--space-4);
font-variant-numeric: lining-nums tabular-nums;
}
.framework__title {
font-family: var(--font-subhead);
font-size: var(--subhead-md);
font-weight: 700;
color: var(--s1-navy);
margin-bottom: var(--space-3);
}
.framework__desc {
font-family: var(--font-body);
font-size: var(--body-sm);
line-height: var(--lh-body);
color: var(--fg-1);
}
/* Framework lede — italic 1-line tagline shown above the expandable full description. */
.framework__lede {
font-family: var(--font-body);
font-style: italic;
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-2);
margin-bottom: var(--space-2);
}
.framework__footer {
grid-column: 1 / -1;
margin-top: var(--space-5);
padding: var(--space-5) var(--space-6);
background: var(--bg-warm);
border-left: 2px solid var(--s1-navy);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
}
/* ==========================================================================
29. LIST PATTERNS — honest-list, article-list, related-content
========================================================================== */
.honest-list {
display: flex;
flex-direction: column;
gap: 0;
margin-top: var(--space-7);
}
.honest-item {
display: flex;
gap: var(--space-5);
padding: var(--space-6) 0;
border-bottom: 1px solid var(--border-2);
align-items: flex-start;
}
.honest-item:first-child { border-top: 1px solid var(--border-2); }
.honest-item__icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: var(--radius-md);
background: var(--s1-navy);
display: flex; align-items: center; justify-content: center;
color: var(--s1-cyan);
margin-top: 2px;
}
.honest-item__icon svg { width: 18px; height: 18px; }
.honest-item__text {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
}
.honest-item__text strong {
font-family: var(--font-subhead);
font-size: var(--strong-md);
font-weight: 700;
line-height: 1.2;
color: var(--fg-brand);
display: block;
margin-bottom: var(--space-3);
}
.article-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.article-card {
background: var(--s1-white);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
display: flex;
align-items: center;
gap: var(--space-4);
text-decoration: none;
color: inherit;
box-shadow: var(--shadow-sm);
position: relative;
transition: box-shadow var(--dur-base) var(--ease-standard),
border-top-color var(--dur-base) var(--ease-standard),
border-top-width var(--dur-base) var(--ease-standard);
}
.article-card:hover {
box-shadow: var(--shadow-md);
border-top: 2px solid var(--s1-cyan);
}
.article-card__icon {
flex-shrink: 0;
color: var(--s1-mid-gray);
transition: color var(--dur-fast) var(--ease-standard);
}
.article-card:hover .article-card__icon { color: var(--s1-cyan); }
.article-card__icon svg { width: 20px; height: 20px; }
.article-card__title {
font-family: var(--font-subhead);
font-size: var(--body-sm);
font-weight: 500;
color: var(--fg-1);
line-height: var(--lh-subhead);
}
.related-content,
.related-reading {
padding: var(--space-9) 0;
background: var(--bg-cool);
}
.related-content__headline,
.related-reading__headline {
font-family: var(--font-subhead);
font-weight: 700;
font-size: var(--display-sm);
color: var(--fg-brand);
margin-bottom: var(--space-7);
}
.related-content__group-label {
margin: var(--space-7) 0 var(--space-4);
display: block;
color: var(--s1-mid-gray);
}
/* ==========================================================================
30. TABLES — section-table
========================================================================== */
.section-table {
margin-top: var(--space-7);
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: var(--body-sm);
}
.section-table__caption {
font-family: var(--font-subhead);
font-size: var(--eyebrow);
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--s1-mid-gray);
text-align: left;
margin-bottom: var(--space-3);
caption-side: top;
}
.section-table thead th {
font-family: var(--font-subhead);
font-size: var(--body-sm);
font-weight: 700;
color: var(--s1-navy);
text-align: left;
padding: var(--space-4) var(--space-5);
background: var(--bg-cool);
border-bottom: 2px solid var(--s1-navy);
}
.section-table tbody td {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-1);
color: var(--fg-1);
vertical-align: top;
line-height: var(--lh-body);
}
.section-table tbody tr:last-child td { border-bottom: none; }
.section-table tbody tr:hover td { background: var(--bg-warm); }
/* ==========================================================================
31. INTERACTIVE — buyer-landscape (role selector + filtered blocks)
========================================================================== */
.buyer-landscape__intro {
max-width: 760px;
margin-bottom: var(--space-7);
}
.role-selector {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
margin-bottom: var(--space-7);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--border-1);
}
.role-selector__label {
color: var(--s1-mid-gray);
width: 100%;
text-align: center;
margin-bottom: var(--space-3);
}
.role-chip {
font-family: var(--font-subhead);
font-size: var(--body-sm);
font-weight: 500;
color: var(--fg-1);
background: var(--s1-white);
border: 1px solid var(--border-2);
border-radius: var(--radius-pill);
padding: 8px var(--space-5);
cursor: pointer;
transition: background var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard);
}
.role-chip:hover {
border-color: var(--s1-cyan);
color: var(--s1-cyan);
}
.role-chip.is-active {
background: var(--s1-navy);
color: var(--s1-white);
border-color: var(--s1-navy);
}
.role-block {
padding: var(--space-7) 0;
border-bottom: 1px solid var(--border-1);
}
.role-block:last-child { border-bottom: none; }
.role-block.is-hidden { display: none; }
.role-block__role {
color: var(--s1-cyan);
margin-bottom: var(--space-3);
display: block;
}
.role-block__title {
font-family: var(--font-subhead);
font-weight: 700;
font-size: var(--strong-xl);
line-height: 1.2;
color: var(--s1-navy);
margin-bottom: var(--space-5);
}
.role-block__body {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
max-width: 760px;
}
.role-block__body p + p { margin-top: var(--space-4); }
.role-block__body ul,
.role-block__body ol {
margin-left: var(--space-6);
margin-bottom: var(--space-5);
padding-left: var(--space-4);
}
.role-block__body li { margin-bottom: var(--space-2); }
.role-block__body p + ul,
.role-block__body p + ol { margin-top: var(--space-3); }
.role-block__body ul + p,
.role-block__body ol + p { margin-top: var(--space-5); }
/* ==========================================================================
32. SERVICE TILES + partner-proof commitment (on navy)
========================================================================== */
.service-models {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
margin-top: var(--space-6);
}
.service-tile {
background: var(--surface-on-navy);
border: 1px solid var(--border-on-navy-card);
border-radius: var(--radius-lg);
padding: var(--space-7);
border-top: 2px solid var(--s1-cyan);
}
.service-tile__label {
color: var(--s1-cyan);
margin-bottom: var(--space-3);
display: block;
}
.service-tile__title {
font-family: var(--font-subhead);
font-weight: 700;
font-size: 28px;
line-height: 1.2;
color: var(--s1-white);
margin-bottom: var(--space-4);
}
.service-tile__body {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--on-navy-2);
}
.partner-proof__commitment {
max-width: 880px;
margin-top: var(--space-8);
padding-top: var(--space-7);
border-top: 1px solid var(--border-on-navy);
font-family: var(--font-body);
font-size: var(--body-lg);
line-height: var(--lh-body);
color: var(--on-navy-1);
}
/* ==========================================================================
33. EDITORIAL — callout
========================================================================== */
.callout {
background: var(--bg-warm);
border-left: 3px solid var(--s1-cyan);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-6) var(--space-7);
margin-top: var(--space-7);
margin-bottom: var(--space-7);
}
.callout__title {
font-family: var(--font-subhead);
font-size: var(--eyebrow);
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--s1-navy);
margin-bottom: var(--space-3);
display: block;
}
.callout__body {
font-family: var(--font-display);
font-weight: 500;
font-style: normal;
font-size: 26px;
line-height: 1.4;
letter-spacing: 0.005em;
color: var(--s1-navy);
}
.callout__body + .callout__body { margin-top: var(--space-4); }
.section--navy .callout {
background: var(--surface-on-navy);
border-left-color: var(--s1-cyan);
}
.section--navy .callout__title { color: var(--s1-cyan); }
.section--navy .callout__body { color: var(--s1-white); }
/* Callout — Link variant (cross-page wayfinding).
Modifier of .callout: drops the parchment box + left rule in favor of a
thin horizontal rule treatment. Uses the same .callout__title / .callout__body
structure, restyled. Anchor inside .callout__body is the focal element. */
.callout.callout--link,
.callout--link {
background: transparent;
border-left: none;
border-radius: 0;
border-top: 1px solid var(--border-1);
border-bottom: 1px solid var(--border-1);
padding: var(--space-5) 0;
margin-top: var(--space-6);
margin-bottom: var(--space-6);
}
.callout--link .callout__title {
font-family: var(--font-subhead);
font-size: var(--eyebrow);
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--s1-cyan);
margin-bottom: var(--space-3);
}
.callout--link .callout__body {
font-family: var(--font-body);
font-weight: 400;
font-style: normal;
font-size: var(--body-md);
line-height: var(--lh-body);
letter-spacing: 0;
color: var(--s1-navy);
max-width: 720px;
}
.callout--link .callout__body a {
font-family: var(--font-subhead);
font-weight: 600;
font-size: var(--subhead-md);
color: var(--s1-cyan);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-standard);
}
.callout--link .callout__body a:hover {
color: var(--s1-cyan-hover);
text-decoration: underline;
text-underline-offset: 4px;
}
.section--navy .callout--link {
background: transparent;
border-top-color: rgba(255,255,255,0.18);
border-bottom-color: rgba(255,255,255,0.18);
}
.section--navy .callout--link .callout__body { color: var(--on-navy-1); }
/* Source quote — third-party verbatim citation embedded in prose.
Distinct from .callout (our editorial voice on a parchment card).
DM Sans italic at body-md; never Cormorant Garamond — it reads thin
below display sizes. */
.source-quote {
border-left: 2px solid var(--s1-cyan);
padding-left: var(--space-5);
margin: var(--space-5) 0;
}
.source-quote__text {
font-family: var(--font-body);
font-style: italic;
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
margin: 0 0 var(--space-3);
}
.source-quote__attribution {
font-family: var(--font-subhead);
font-size: var(--caption);
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--s1-mid-gray);
margin: 0;
}
.section--navy .source-quote__text { color: var(--s1-white); }
.section--navy .source-quote__attribution { color: var(--on-navy-3); }
/* ==========================================================================
34. TOC — table of contents
========================================================================== */
.toc {
background: var(--bg-cool);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-7);
margin-bottom: var(--space-8);
}
.toc__label {
color: var(--s1-mid-gray);
margin-bottom: var(--space-4);
display: block;
}
.toc__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.toc__item {
display: flex;
align-items: baseline;
gap: var(--space-3);
}
.toc__num {
font-family: var(--font-subhead);
font-size: var(--caption);
font-weight: 700;
color: var(--s1-cyan);
letter-spacing: var(--track-eyebrow);
min-width: 28px;
}
.toc__link {
font-family: var(--font-subhead);
font-size: var(--body-sm);
font-weight: 500;
color: var(--s1-navy);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-standard);
}
.toc__link:hover { color: var(--s1-cyan); }
/* ==========================================================================
35. CTA EXTENSIONS — close line + vertical-cta variant
Base file Section 10 defines .cta-section + .cta-band. These add the
italic editorial close line and the warm-bg vertical-cta variant.
========================================================================== */
.cta-section__close {
font-family: var(--font-subhead);
font-weight: 700;
font-style: italic;
font-size: var(--strong-md);
line-height: 1.3;
color: var(--s1-cyan);
max-width: 640px;
margin: 0 auto var(--space-8);
}
/* Trust-bullets pattern inside a centered CTA band.
Centers the list block; left-aligns the items inside so bullets
hug their text instead of floating off to the left. */
.cta-section ul {
list-style: none;
padding: 0;
margin: 0 auto var(--space-7);
display: inline-block;
text-align: left;
color: var(--on-navy-2);
}
.cta-section li {
position: relative;
padding-left: var(--space-4);
margin-bottom: var(--space-2);
}
.cta-section li::before {
content: "•";
position: absolute;
left: 0;
color: var(--s1-cyan);
}
.vertical-cta {
background: var(--bg-warm);
padding: var(--space-10) 0;
text-align: center;
position: relative;
}
.vertical-cta::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 64px; height: 3px;
background: var(--s1-cyan);
}
.vertical-cta__eyebrow {
color: var(--s1-cyan);
margin-bottom: var(--space-5);
display: block;
}
.vertical-cta__headline {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--display-md);
line-height: var(--lh-display);
letter-spacing: var(--track-display);
color: var(--s1-navy);
margin: 0 auto var(--space-6);
max-width: 760px;
}
.vertical-cta__body {
font-family: var(--font-body);
font-size: var(--body-lg);
line-height: var(--lh-body);
color: var(--fg-1);
max-width: 720px;
margin: 0 auto var(--space-7);
}
.vertical-cta__close {
font-family: var(--font-subhead);
font-weight: 700;
font-style: italic;
font-size: var(--strong-md);
line-height: 1.3;
color: var(--s1-navy);
max-width: 640px;
margin: 0 auto var(--space-8);
}
/* ==========================================================================
36. BLOG / TAYA — article-header, direct-answer, key-insights,
article-body, article-tip, related-articles-cluster,
why-partner, next-steps, faq-accordion, author-bio
========================================================================== */
.article-header {
background: var(--s1-white);
padding: var(--space-9) 0 var(--space-7);
border-bottom: 1px solid var(--border-1);
}
.article-header__category {
color: var(--s1-cyan);
margin-bottom: var(--space-4);
display: block;
}
.article-header__h1 {
font-family: var(--font-subhead);
font-weight: 700;
font-size: var(--display-md);
line-height: var(--lh-tight);
letter-spacing: -0.01em;
color: var(--s1-navy);
margin-bottom: var(--space-5);
max-width: 900px;
}
.article-header__year {
font-family: var(--font-subhead);
font-style: italic;
font-weight: 500;
color: var(--s1-cyan);
}
.article-header__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
font-family: var(--font-subhead);
font-size: var(--body-sm);
color: var(--fg-2);
}
.article-header__meta strong {
color: var(--fg-1);
font-weight: 600;
}
.direct-answer {
background: rgba(0, 179, 224, 0.06);
border-left: 3px solid var(--s1-cyan);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-6) var(--space-7);
margin-top: var(--space-7);
margin-bottom: var(--space-7);
}
.direct-answer__label {
font-family: var(--font-subhead);
font-size: var(--eyebrow);
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--s1-cyan);
margin-bottom: var(--space-3);
display: block;
}
.direct-answer__body {
font-family: var(--font-body);
font-size: var(--body-lg);
line-height: var(--lh-body);
color: var(--fg-1);
}
.key-insights {
background: var(--s1-white);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-7);
margin-bottom: var(--space-7);
}
.key-insights__label {
color: var(--s1-mid-gray);
margin-bottom: var(--space-4);
display: block;
}
.key-insights__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.key-insights__list li {
position: relative;
padding-left: var(--space-5);
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
}
.key-insights__list li::before {
content: '';
position: absolute;
left: 0; top: 0.6em;
width: 8px; height: 2px;
background: var(--s1-cyan);
}
.article-body {
font-family: var(--font-body);
font-size: var(--body-lg);
line-height: var(--lh-body);
color: var(--fg-1);
max-width: var(--container-reading-max);
}
.article-body h2 {
font-family: var(--font-subhead);
font-weight: 700;
font-size: var(--strong-lg);
line-height: var(--lh-tight);
letter-spacing: -0.01em;
color: var(--s1-navy);
margin-top: var(--space-9);
margin-bottom: var(--space-4);
}
.article-body h3 {
font-family: var(--font-subhead);
font-weight: 700;
font-size: var(--subhead-lg);
color: var(--s1-navy);
margin-top: var(--space-7);
margin-bottom: var(--space-3);
}
.article-body p { margin-bottom: var(--space-4); }
.article-body ul,
.article-body ol {
margin-left: var(--space-6);
margin-bottom: var(--space-5);
}
.article-body li { margin-bottom: var(--space-2); }
.article-tip {
background: var(--bg-warm);
border-left: 3px solid var(--s1-cyan);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-5) var(--space-6);
margin: var(--space-6) 0;
}
.article-tip__label {
color: var(--s1-cyan);
margin-bottom: var(--space-2);
display: block;
}
.article-tip__body {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
}
.article-tip__attribution {
font-family: var(--font-subhead);
font-size: var(--caption);
color: var(--fg-2);
margin-top: var(--space-2);
font-style: italic;
}
.related-articles-cluster {
margin: var(--space-7) 0;
padding: var(--space-5) 0;
border-top: 1px solid var(--border-1);
border-bottom: 1px solid var(--border-1);
}
.related-articles-cluster__label {
color: var(--s1-mid-gray);
margin-bottom: var(--space-3);
display: block;
}
.related-articles-cluster__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.related-articles-cluster__link {
font-family: var(--font-subhead);
font-size: var(--body-md);
font-weight: 500;
color: var(--s1-navy);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-standard);
}
.related-articles-cluster__link:hover { color: var(--s1-cyan); }
.why-partner {
background: var(--bg-cool);
padding: var(--space-9) 0;
}
.why-partner__eyebrow {
color: var(--s1-cyan);
margin-bottom: var(--space-4);
display: block;
}
.why-partner__headline {
font-family: var(--font-subhead);
font-weight: 700;
font-size: var(--strong-lg);
line-height: var(--lh-tight);
letter-spacing: -0.01em;
color: var(--s1-navy);
margin-bottom: var(--space-6);
}
.why-partner__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.why-partner__list li {
position: relative;
padding-left: var(--space-6);
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
}
.why-partner__list li::before {
content: '✓';
position: absolute;
left: 0; top: 0;
color: var(--s1-cyan);
font-weight: 700;
}
.next-steps {
background: var(--bg-warm);
padding: var(--space-9) 0;
}
.next-steps__eyebrow {
color: var(--s1-cyan);
margin-bottom: var(--space-4);
display: block;
}
.next-steps__headline {
font-family: var(--font-subhead);
font-weight: 700;
font-size: var(--strong-lg);
line-height: var(--lh-tight);
letter-spacing: -0.01em;
color: var(--s1-navy);
margin-bottom: var(--space-6);
}
.next-steps__list {
counter-reset: nextstep;
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.next-steps__list li {
counter-increment: nextstep;
position: relative;
padding-left: var(--space-7);
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
}
.next-steps__list li::before {
content: counter(nextstep, decimal-leading-zero);
position: absolute;
left: 0; top: 0;
font-family: var(--font-subhead);
font-size: var(--body-sm);
font-weight: 700;
color: var(--s1-cyan);
letter-spacing: var(--track-eyebrow);
}
.faq-accordion {
margin-top: var(--space-7);
border-top: 1px solid var(--border-1);
}
.faq-accordion__item {
border-bottom: 1px solid var(--border-1);
}
.faq-accordion__question {
width: 100%;
background: none;
border: none;
padding: var(--space-5) 0;
font-family: var(--font-subhead);
font-size: var(--subhead-md);
font-weight: 600;
color: var(--s1-navy);
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
transition: color var(--dur-fast) var(--ease-standard);
}
.faq-accordion__question:hover { color: var(--s1-cyan); }
.faq-accordion__icon {
flex-shrink: 0;
color: var(--s1-cyan);
transition: transform var(--dur-base) var(--ease-standard);
}
.faq-accordion__icon svg { width: 18px; height: 18px; }
.faq-accordion__item.is-open .faq-accordion__icon { transform: rotate(180deg); }
.faq-accordion__answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--dur-slow) var(--ease-standard),
padding var(--dur-base) var(--ease-standard);
padding: 0;
}
.faq-accordion__item.is-open .faq-accordion__answer {
max-height: 600px;
padding-bottom: var(--space-5);
}
.faq-accordion__answer-body {
font-family: var(--font-body);
font-size: var(--body-md);
line-height: var(--lh-body);
color: var(--fg-1);
}
.faq-accordion__answer-body p + p { margin-top: var(--space-3); }
.author-bio {
background: var(--bg-cool);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-top: var(--space-8);
display: flex;
align-items: flex-start;
gap: var(--space-5);
}
.author-bio__photo {
flex-shrink: 0;
width: 72px; height: 72px;
border-radius: 50%;
background: var(--s1-navy);
color: var(--s1-white);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-weight: 600;
font-size: 28px;
}
.author-bio__content { flex: 1; }
.author-bio__name {
font-family: var(--font-subhead);
font-size: var(--subhead-md);
font-weight: 700;
color: var(--s1-navy);
margin-bottom: var(--space-1);
}
.author-bio__role {
font-family: var(--font-subhead);
font-size: var(--body-sm);
color: var(--fg-2);
margin-bottom: var(--space-3);
}
.author-bio__body {
font-family: var(--font-body);
font-size: var(--body-sm);
line-height: var(--lh-body);
color: var(--fg-1);
}
/* ==========================================================================
37. COMPONENT-LEVEL RESPONSIVE (additions to base Section 18)
Base file handles container padding, header nav collapse, .stat-strip,
.article-list, .two-col, .hero padding. These add the new grids
introduced above.
========================================================================== */
@media (max-width: 1100px) {
.outcomes-grid,
.pillars,
.proof-grid,
.framework,
.pillar-mini-grid,
.continuum { grid-template-columns: 1fr 1fr; }
.tldr-band__inner { grid-template-columns: 1fr; gap: var(--space-4); }
.site-header__dropdown--two-col { min-width: 380px; }
}
@media (max-width: 900px) {
.outcomes-grid,
.pillars,
.proof-grid,
.framework,
.pillar-mini-grid,
.persona-grid,
.personas,
.checklist,
.hover-grid,
.continuum,
.service-models { grid-template-columns: 1fr; gap: var(--space-5); }
.continuum::before { display: none; }
.vertical-hero { padding: var(--space-9) 0 var(--space-8); }
.outcomes-closer { font-size: 22px; padding: var(--space-5); }
.vertical-cta__close,
.cta-section__close { font-size: 20px; }
.tldr-band__inner { padding: 0 var(--container-pad-mobile); }
.author-bio { flex-direction: column; align-items: flex-start; }
}
/* ==========================================================================
38. CARD FOLD-CORNER ACCENT (auto-applied)
The document-fold cyan corner that appears on hover for any card with a
cyan top-border hover state. Restores the behavior from the original
print-you-can-trust + education-vertical sample pages. The base file
(Section 9) keeps the .has-fold-corner opt-in class for ad-hoc use.
========================================================================== */
.outcome-card,
.pillar-card,
.pillar-mini { position: relative; }
.outcome-card::after,
.pillar-card::after,
.persona-card::after,
.pillar-mini::after,
.article-card::after {
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 24px;
height: 24px;
background: linear-gradient(45deg, transparent 50%, var(--s1-cyan) 50%);
border-top-right-radius: var(--radius-lg);
opacity: 0;
transition: opacity var(--dur-base) var(--ease-standard),
top var(--dur-base) var(--ease-standard),
height var(--dur-base) var(--ease-standard);
pointer-events: none;
z-index: 2;
}
.outcome-card:hover::after,
.outcome-card.is-open::after,
.pillar-card:hover::after,
.persona-card:hover::after,
.pillar-mini:hover::after,
.article-card:hover::after {
top: -2px;
height: 25px;
opacity: 1;
}
/* ==========================================================================
39. TRUST-BAR IMAGE SUPPORT
Base trust-bar (Section 16) renders text logos. When real institution
logos arrive, wrap an ![]()
inside .trust-bar__logo — these rules size
and treat it consistently with the text version (mid-gray, grayscale,
faded). Swap to actual brand color by adding .trust-bar__logo--color.
========================================================================== */
.trust-bar__logo img,
.trust-bar__logo svg {
display: block;
height: 32px;
width: auto;
max-width: 160px;
object-fit: contain;
filter: grayscale(1);
opacity: 0.78;
transition: filter var(--dur-base) var(--ease-standard),
opacity var(--dur-base) var(--ease-standard);
}
.trust-bar__marquee:hover .trust-bar__logo img,
.trust-bar__marquee:hover .trust-bar__logo svg {
filter: grayscale(0);
opacity: 1;
}
.trust-bar__logo--color img,
.trust-bar__logo--color svg {
filter: none;
opacity: 1;
}