/* ============================================== Covo Multipliers — covo-type.css Site-wide typography layer: font tokens, type scale, and the serif / sans / condensed-UI assignments. Linked last in on every public page (after page styles) so the fonts win everywhere while each page keeps its own layout, sizes and colours. Fonts (Google Fonts, SIL Open Font License 1.1): DM Serif Display — editorial headlines (400 + italic) DM Sans — body copy (400/500; variable, so 600/700 in the same file keep existing bold text from faux-bolding) Barlow Condensed — navigation, buttons, eyebrows, small caps headings (600/700) ============================================== */ :root { --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif; --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-ui: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; /* Type scale — desktop max / mobile min */ --fs-display: clamp(2.5rem, 4.6vw, 4rem); /* display statements 40 → 64px */ --fs-hero: clamp(2.75rem, 5.4vw, 4.5rem); /* homepage hero 44 → 72px */ --fs-h2: clamp(2rem, 3.3vw, 2.75rem); /* section 32 → 44px */ --fs-h3: clamp(1.4rem, 2vw, 1.625rem); /* card / sub-head 22 → 26px */ --fs-statement: clamp(1.5rem, 2.5vw, 2rem); /* centered statements 24 → 32px */ --fs-quote: clamp(1.625rem, 2.8vw, 2.375rem); /* featured quote 26 → 38px */ --fs-lead: clamp(1.0625rem, 1.3vw, 1.1875rem); /* intro paragraphs 17 → 19px */ --fs-body: 1.0625rem; /* 17px */ --fs-card: 1rem; /* card copy 16px */ --fs-small: 1rem; /* 16px */ --fs-nav: 0.9375rem; /* 15px, condensed caps */ --fs-btn: 0.9375rem; /* 15px, condensed caps */ --fs-label: 0.8125rem; /* 13px, condensed caps */ /* Rhythm */ --lh-tight: 1.05; --lh-heading: 1.12; --lh-body: 1.6; --tracking-display: -0.01em; /* DM Serif Display at large sizes */ --tracking-heading: 0; --tracking-ui: 0.06em; /* Barlow Condensed caps: nav, buttons */ --tracking-label: 0.1em; /* Barlow Condensed caps: small labels */ } /* ---------- Body: DM Sans ---------- */ body { font-family: var(--font-sans); font-optical-sizing: auto; } /* form controls and plain buttons don't inherit fonts by default */ button, input, select, textarea { font-family: var(--font-sans); } /* ---------- Headlines: DM Serif Display ---------- !important so the serif and its single 400 weight win over older per-page heading rules (many were 800–900 weight system-sans with tight negative tracking, which would turn into faux-bold serif). */ h1, h2, h3 { font-family: var(--font-serif) !important; font-weight: 400 !important; font-style: normal; letter-spacing: var(--tracking-heading) !important; } h1 { letter-spacing: var(--tracking-display) !important; } /* even line lengths, no one-word last lines */ h1, h2, h3, .event-title { text-wrap: balance; } h1 strong, h2 strong, h3 strong, h1 b, h2 b, h3 b { font-weight: 400 !important; } /* ---------- UI: Barlow Condensed ---------- Nav, buttons and eyebrow / kicker labels, matched by the shared class names used across pages. Sizes stay page-defined. */ .slideout-menu-links a, .slideout-menu-title, .masthead-link, .masthead-cta, .btn, a[class*="btn"], a[class*="button"], button[type="submit"], input[type="submit"], [class*="eyebrow"], [class*="kicker"], .ed-label, .ed-cta-link, .footer-heading { font-family: var(--font-ui) !important; font-weight: 600; letter-spacing: var(--tracking-ui); text-transform: uppercase; } [class*="eyebrow"], [class*="kicker"], .ed-label, .footer-heading { letter-spacing: var(--tracking-label); } /* Eyebrows / kickers: the same red-orange as the primary button, site-wide. The immersion card kicker is a date row holding a lime chip, not an eyebrow. */ :is( [class*="eyebrow"], [class*="kicker"], .ed-label, .event-label, .section-label, .logo-tagline, .listen-label, .hero-latest-label, .form-section-label ):not(.immersion-card-kicker) { color: var(--c-coral, #FF5500) !important; } /* the slide-out title is the wordmark, so it stays in the serif */ .slideout-menu-title { font-family: var(--font-serif) !important; font-weight: 400; letter-spacing: 0; text-transform: none; } /* small tags / badges sitting inside a headline, e.g. "(Online)" */ :is(h1, h2, h3) :is([class*="tag"], [class*="badge"], [class*="pill"]) { font-family: var(--font-ui) !important; font-weight: 600 !important; letter-spacing: var(--tracking-ui) !important; } /* any non-heading element set in the serif */ .ed-serif { font-family: var(--font-serif); font-weight: 400; } /* headline-sized text that isn't marked up as h1–h3 */ .event-title, .hero-lede, .nf-code { font-family: var(--font-serif) !important; font-weight: 400 !important; letter-spacing: var(--tracking-display) !important; } /* "Covo Multipliers" wordmarks in page headers and footers */ .brand, .footer-wordmark, a.footer-brand, .assess-header-brand, .dm-header-brand { font-family: var(--font-serif) !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; } /* header wordmarks: the serif reads smaller than the old bold sans */ .brand, .assess-header-brand, .dm-header-brand { font-size: max(1.2rem, 1em) !important; } /* ---------- Readability floors (non-homepage pages) ---------- Ordinary body copy is at least 16px / 1.6; genuine small print (captions, consent, hints, disclaimers, dense tool tables) at least 15px / 1.5. Uppercase labels are untouched. The homepage sets its own sizes in covo-editorial.css, so it is excluded here. */ body:not(:has(.site-masthead)) :is( .archetype-desc, .article-card-excerpt, .assess-body, .assess-card li, .assessment-note p, .barrier-hd, .biblical-desc, .card-body, .checkbox-label, .closing, .content-p, .covo-card-body, .cta-copy, .cta-secondary, .day-rhythm-card p, .diagnostic-question-label, .diagnostic-subtitle, .dm-body, .error, .event-description, .event-description p, .experience-state-copy, .faq-answer, .faq-btn span, .fit-list span, .footer-desc, .form-intro, .guardrail-note p, .guardrails-list li, .hero-error, .hero-hosted, .hero-sub, .hero-tile p, .how-card p, .icon-list span, .immersion-slide-text, .know li, .launch-mini-card p, .launchpad-support-line, .legal-card li, .legal-card p, .legal-intro, .mid-cta-copy, .missing-desc, .osmc-checklist li, .outcome-callout, .pain-card p, .pathway-card p, .pathway-loop, .pattern-note, .phase-intro-desc, .planter-body, .podcast-copy, .problem-card p, .product-b-list li, .profile-card-def, .profiles-section-lead, .question-block p, .question-body, .quote-card, .radio-label, .reassure-inner p, .registration-card div, .related-link-title, .results-integration-lead, .rhythm-body, .rhythm-card p, .section-copy, .section-desc, .site-link-desc, .skill-card p, .social-proof-text, .stage-desc, .stake-item, .stakes-intro, .stakes-pivot, .stuck-card-body, .sub, .table-wrap td, .takeaway-list span, .team-prompt, .testimonial-quote, .third-body, .tp-card p, .tp-deeper-col p, .tp-pathway-item p, .tp-pathway-tools, .track-card p, .workplace-trust, .immersion-cta-list span, .stage-move ) { font-size: max(1rem, 16px) !important; line-height: 1.6 !important; } body:not(:has(.site-masthead)) :is( .article-figure figcaption, .zoom-frame figcaption, .consent label, .consent-label, .form-opt-in label, .form-checkbox-group label, .form-hint, .step-hint, .quality-nudge, .m2-context span, .assess-note, .limitation-note p, .pilot-disclaimer, .biblical-disclaimer, .fine, .form-social-proof-caption, .bottom-cta-date, .hero-support-line, .gd-note, .dynamic-field, .profile-field, .combo-row, .matrix-table td, .results-feature-text, .phase-row-desc, .lane-plain, .otb-desc, .hero-support, .next-copy ) { font-size: 0.9375rem !important; line-height: 1.5 !important; } /* ---------- Button labels: comfortably readable ---------- Functional buttons at least 15px. styles.css drops .btn to 14px on phones; this (loaded later, same specificity) restores 15px while any page rule that sets a larger size still wins. */ @media (max-width: 480px) { .btn { font-size: 0.9375rem; } } :is( .mid-cta-btn, .hbtn, .hero-btn-secondary, .btn-secondary, .action-btn, .experience-toggle-btn, .planner-tab, .next-button, .notes-tog, .btn-copy, .gate-card button ) { font-size: max(0.9375rem, 15px) !important; }