too. Every element that reads var(--font-body) - nav links, .de-btn, the ask bar text, .de-eyebrow, body paragraphs - inherits the override because .de-home-2026 sits on , an ancestor of the header, main and footer alike. No other page carries that class, so no other page is affected. This does NOT touch: - "Archivo" (the wide uppercase poster/caps face used by .de-caps-headline / .de-caps-h2 / .de-story-caps etc.) - a distinct display face, not --font-body, left exactly as is. - "Instrument Serif" / --font-display (Bitter) - the italic serif accent face used by .de-caps-accent, the hero eyebrow, pull quotes and .de-signature - untouched per the brief. Epilogue is loaded via Google Fonts in the custom_head setting (weights 400/500/600/700/800, covering every weight --font-body is set at anywhere on the site: 400 body copy, 500/600 nav/ buttons/eyebrows, plus 700/800 headroom). */ .de-home-2026 { --font-body: 'Epilogue', 'Segoe UI', system-ui, sans-serif; } /* --- Section headlines -------------------------------------- */ .de-caps-h2 { font-family: "Archivo", "Work Sans", system-ui, sans-serif; font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800; font-style: normal; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.95; font-size: clamp(30px, 4.9vw, 64px); max-width: 20ch; margin: 0 auto 22px; text-wrap: balance; } .de-photo-section h2.de-caps-h2, .de-section-green h2.de-caps-h2 { color: var(--de-cream); font-style: normal; } .de-section-white h2.de-caps-h2 { color: var(--de-green); } .de-section-grey h2.de-caps-h2 { color: var(--de-green-deep); } .de-caps-accent { display: block; font-family: "Instrument Serif", var(--font-display); font-style: italic; font-weight: 400; font-stretch: 100%; font-variation-settings: normal; text-transform: none; letter-spacing: -0.01em; line-height: 1.02; font-size: 1.12em; margin-top: 0.1em; color: var(--de-green-mid); } .de-photo-section .de-caps-accent, .de-section-green .de-caps-accent { color: var(--de-gold-light); } .de-section-white .de-caps-accent { color: var(--de-green-mid); } .de-section-grey .de-caps-accent { color: var(--de-green-mid); } .de-caps-lead { max-width: 52ch; margin: 0 auto; font-size: 17px; line-height: 1.65; color: var(--text-muted); } .de-photo-section .de-caps-lead, .de-section-green .de-caps-lead { color: rgba(238, 232, 222, 0.82); } .de-section-grey .de-caps-lead { color: var(--de-green-deep); } /* The hook gets the biggest type on the page after the hero. */ .de-hook .de-caps-h2 { font-size: clamp(27px, 4.9vw, 65px); max-width: 17ch; } /* Scoped to the hook section only - this line ("If you don't know, that's the point.") is requested at half its previous rendered size. .de-caps-accent's shared 1.12em rule is used on five other headings on this page, so it stays untouched there; this override restates that same accent line as a fixed clamp() equal to half of what 1.12em previously resolved to against the hook's own (pre- reduction) heading size, rather than letting it recompute smaller automatically from the heading's own -15% change above. */ .de-hook .de-caps-accent { font-size: clamp(17.9px, 3.25vw, 42.6px); } .de-hook { padding: 190px 0; } /* --- Opening statement: "The answers exist" ------------------ The very first section on the page, sitting directly under the fixed nav and ahead of the hero. A single short claim rather than a full moment (no story panel, no diagram): two lines of the poster headline over the quiet .de-section-grey ground, followed by body copy set with the same .de-caps-lead treatment already used for the "Learn" section's lead paragraph (52ch measure, centered) - reused as-is for two paragraphs rather than a new copy class. Only .de-section-grey (colour ground) is new; its type-colour mapping lives with the other section variants above. */ /* --- Learn: the story panel ---------------------------------- */ .de-story { position: relative; overflow: hidden; border-radius: 6px; background: #0A1F52; color: var(--de-cream); min-height: 620px; max-width: 1100px; margin: 52px auto 0; isolation: isolate; text-align: center; box-shadow: 0 40px 80px -40px rgba(10, 31, 82, 0.55); } /* The brand's gold double rule, inset like the industry tiles. */ .de-story::before { content: ""; position: absolute; inset: 16px; z-index: 3; pointer-events: none; border: 1px solid rgba(238, 212, 132, 0.34); outline: 1px solid rgba(238, 212, 132, 0.14); outline-offset: 5px; border-radius: 2px; } .de-story-wall { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 0; } .de-story-q { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; opacity: 0.32; margin: 0; transition: opacity 0.5s ease, color 0.5s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); animation: de-story-drift 14s ease-in-out infinite alternate; } .de-story-q.t-sans { font-family: var(--font-body); font-size: 15px; } .de-story-q.t-serif { font-family: "Instrument Serif", serif; font-style: italic; font-size: 25px; } .de-story-q.t-caps { font-family: "Archivo", sans-serif; font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: 0.02em; } .de-story-q.t-big { font-family: "Instrument Serif", serif; font-size: 36px; } .de-story-q:nth-child(3n) { animation-duration: 17s; animation-delay: -4s; } .de-story-q:nth-child(3n+1) { animation-duration: 12s; animation-delay: -7s; } .de-story-q:nth-child(4n) { animation-direction: alternate-reverse; } @keyframes de-story-drift { from { margin-top: -6px; margin-left: -8px; } to { margin-top: 6px; margin-left: 8px; } } .de-story-q.is-lit { opacity: 0.95; color: #FFFFFF; } .de-story.is-focus .de-story-q { opacity: 0.1; } .de-story.is-focus .de-story-q.is-key { opacity: 1; color: var(--de-gold-light); transform: translate(-50%, -50%) scale(1.25); } .de-story.is-reveal .de-story-q, .de-story.is-reveal .de-story-q.is-key { opacity: 0.07; } /* A pool of shadow behind the reveal type. */ .de-story::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(10, 31, 82, 0.96) 0%, rgba(10, 31, 82, 0.85) 45%, rgba(10, 31, 82, 0) 100%); opacity: 0; transition: opacity 0.8s ease; } .de-story.is-reveal::after, .de-story.is-still::after, .de-story:not(.is-js)::after { opacity: 1; } .de-story-beat { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 32px; opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .de-story-beat.is-on { opacity: 1; transform: none; pointer-events: auto; } .de-story-caps { font-family: "Archivo", sans-serif; font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase; line-height: 0.98; margin: 0; font-size: clamp(24px, 4.2vw, 52px); color: var(--de-cream); } .de-story-ital { display: block; font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; text-transform: none; font-stretch: 100%; font-variation-settings: normal; font-size: 1.12em; line-height: 1.05; color: var(--de-gold-light); margin: 0.08em 0; } .de-story-line { display: block; } .de-story-small { font-family: "Instrument Serif", serif; font-style: italic; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; margin: 0 0 6px; color: var(--de-cream); } .de-story-small-caps { font-family: "Archivo", sans-serif; font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase; font-size: clamp(15px, 1.6vw, 19px); letter-spacing: 0.03em; color: var(--de-gold-light); margin: 0 0 34px; } .de-story-notif { width: min(420px, 100%); background: #C9D3FA; color: #0A1F52; border-radius: 18px; padding: 18px 22px 22px; text-align: left; box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(26px) scale(0.98); transition: opacity 0.6s ease 0.7s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s; } .de-story-beat.is-on .de-story-notif { opacity: 1; transform: none; } .de-story-notif-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } .de-story-notif-head b { width: 26px; height: 26px; border-radius: 50%; background: #0A1F52; color: #C9D3FA; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: 0; } .de-story-notif-head span { margin-left: auto; opacity: 0.55; letter-spacing: 0.04em; text-transform: none; font-weight: 500; } .de-story .de-story-notif p:last-child { margin: 0; font-family: var(--font-body); font-size: 19px; line-height: 1.35; font-weight: 500; color: #0A1F52; } .de-story-meta { position: absolute; left: 34px; right: 34px; bottom: 28px; z-index: 4; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: rgba(226, 220, 210, 0.5); } .de-story-replay { background: none; border: 0; padding: 6px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: rgba(226, 220, 210, 0.75); cursor: pointer; opacity: 0; transition: opacity 0.4s ease; } .de-story.is-done .de-story-replay { opacity: 1; } .de-story-replay:hover { color: var(--de-gold-light); } .de-story-fomo { font-family: "Archivo", sans-serif; font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.05; color: var(--de-green); margin: 52px auto 0; max-width: 22ch; } .de-story-fomo em { display: block; font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; text-transform: none; font-stretch: 100%; font-variation-settings: normal; font-size: 1.15em; margin-top: 4px; color: var(--de-green-mid); } /* --- Learn panel variant: light blue ground, dark blue type ----- Requested treatment for the "Every answer helps them" moment: swaps this one section from the standard white+green pairing to a light blue ground with dark navy type, reusing the site's existing --de-navy token set (already the site's secondary_color, #00205B, and already used on the footer and persona card) rather than inventing new colours. Scoped to .de-learn-panel (added alongside .de-section-white on this section only in the page markup) so every OTHER .de-section-white section on the site keeps its original white+green look untouched. The animated question-cloud panel (.de-story, further up this file) that used to sit inside this section has been removed from the page markup entirely per request - the section is now just the heading and lead line, centered. Its CSS above is left in place unused rather than deleted, in case the story-panel component is wanted again elsewhere; nothing on the site still references #de-story. */ .de-learn-panel { background: var(--de-navy-soft); } .de-learn-panel h2.de-caps-h2 { color: var(--de-navy); } .de-learn-panel .de-caps-accent { color: var(--de-navy-mid); } .de-learn-panel .de-caps-lead { color: var(--de-navy-mid); } .de-story:not(.is-js) .de-story-beat-2, .de-story.is-still .de-story-beat-2 { opacity: 1; transform: none; } .de-story:not(.is-js) .de-story-notif, .de-story.is-still .de-story-notif { opacity: 1; transform: none; transition: none; } .de-story:not(.is-js) .de-story-q, .de-story.is-still .de-story-q { opacity: 0.07; animation: none; } @media (prefers-reduced-motion: reduce) { .de-story-q { animation: none; } } /* --- Loop cards: labels in the caps voice -------------------- */ .de-loop-cards .de-mini-card h4 { font-family: "Archivo", sans-serif; font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: 0.06em; color: var(--de-gold-light); margin: 0 0 10px; } .de-loop-cards .de-mini-card { padding: 26px 26px 28px; } .de-loop-cards .de-mini-card p { font-size: 14.5px; line-height: 1.6; } /* --- BMRG proof band ----------------------------------------- */ .de-proof-band { padding: 96px 0; } .de-proof-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; max-width: 1080px; margin: 0 auto; } .de-proof-media { position: relative; display: block; min-height: 380px; border-radius: 5px; background-size: cover; background-position: center; overflow: hidden; } .de-proof-media::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(238, 212, 132, 0.5); outline: 1px solid rgba(238, 212, 132, 0.2); outline-offset: 4px; border-radius: 2px; pointer-events: none; } .de-proof-copy { text-align: left; } .de-proof-copy .de-caps-h2 { margin: 0 0 20px; max-width: 14ch; font-size: clamp(28px, 3.8vw, 50px); } .de-proof-copy .de-caps-accent { color: var(--de-green-mid); } .de-proof-copy p { font-size: 16px; } .de-proof-areas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 30px; padding: 0; } .de-proof-areas li { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; color: var(--de-green); border: 1px solid rgba(21, 71, 52, 0.28); border-radius: 999px; padding: 8px 14px; } .de-proof-link { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--de-green); text-decoration: none; border-bottom: 1px solid rgba(21, 71, 52, 0.4); padding-bottom: 4px; } /* --- Very light green section backgrounds (2026.6) ------------- Requested treatment for two specific home-page sections: the opening "THE ANSWERS EXIST." statement (.de-section-grey, plain #F4F2EE neutral in de-brand-2026.css) and the BMRG proof band (.de-section-soft, the sitewide warm-cream #EFEAE1 ground from de-site.css). Both of those base classes are shared with many other pages/sections across the site (.de-section-soft alone appears on 28+ other pages), so they are NOT edited directly - doing so would recolour every other section that uses them. Instead both overrides are scoped through .de-home-2026, the class this file's own note above already explains is added to /

only when the requested slug is "home" - so this rule can only ever match on this page, however these two base classes get reused elsewhere later. The .de-proof-band class is additionally unique to the BMRG band, so the second selector cannot touch any other .de-section-soft section even on this page. Both reuse --de-green-soft (#E4ECE7), the same very pale green already used at section-sized scale elsewhere on the site (.de-callout, .de-compare-col.is-after) rather than inventing a new tone - and it keeps the dark green heading/body copy already set for these sections easily legible (well over 6:1 contrast). */ .de-home-2026 .de-section-grey { background: var(--de-green-soft); } .de-home-2026 .de-proof-band { background: var(--de-green-soft); } /* --- Close ----------------------------------------------------- */ .de-close .de-caps-h2 { max-width: 16ch; margin-bottom: 36px; } .de-signature { margin: 40px 0 0; font-family: "Instrument Serif", var(--font-display); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); color: var(--de-gold-light); } /* --- Small screens --------------------------------------------- */ @media (max-width: 860px) { .de-proof-grid { grid-template-columns: 1fr; gap: 36px; } .de-proof-media { min-height: 280px; } .de-hook { padding: 120px 0; } } @media (max-width: 720px) { .de-story { min-height: 580px; border-radius: 4px; margin-top: 40px; } .de-story::before { inset: 10px; outline-offset: 3px; } .de-story-q.t-big { font-size: 24px; } .de-story-q.t-serif { font-size: 19px; } .de-story-q.t-sans { font-size: 13px; } .de-story-q.hide-sm { display: none; } .de-story-wall { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; padding: 34px 22px 54px; } .de-story-q { position: static; transform: none; white-space: normal; max-width: 100%; } .de-story.is-focus .de-story-q.is-key { transform: scale(1.2); } .de-story-meta { left: 24px; right: 24px; bottom: 20px; } .de-story .de-story-notif p:last-child { font-size: 17px; } } @media (max-width: 480px) { .de-caps-h2 { font-size: clamp(22px, 7.4vw, 34px); } .de-hook .de-caps-h2 { font-size: clamp(20px, 6.6vw, 31px); } .de-proof-copy .de-caps-h2 { font-size: clamp(22px, 7.4vw, 32px); } }