. The patterns here are reusable for any long-form Tier 1 editorial page — Brandbook, future About / news articles, etc. ========================================================= */ /* Heading reset within the OS-doc scope. legacy/portal-system.css forces h1..h4 to var(--p-ink) and adds margin. Inside an editorial scope we want headings to inherit colour from their ceremonial section (orange, black, purple) and own their own rhythm. Using :where() so this reset has specificity (0,0,1) — same as the legacy element selector it overrides, but still wins on source order. Crucially, page-level class selectors like .rule__t (0,1,0) now win cleanly when they want to set an explicit colour. */ :where(.os-doc) h1, :where(.os-doc) h2, :where(.os-doc) h3, :where(.os-doc) h4 { color: inherit; margin: 0; } /* p-main on tier-1 OS pages should not constrain or pad — sections handle their own width and padding (the editorial pattern alternates full-bleed orange/black panels with paper-bleed prose). */ body.tier-full-brand > main.p-main { max-width: none; padding: 0; margin: 0; background: transparent; } .os-doc { font-family: var(--font-std); color: var(--ink); background: var(--paper); /* Internal tokens — pages can override per-section as needed. */ --os-pad-x: 48px; --os-accent: var(--zeal-orange-digital); } /* ---- Crown ----------------------------------------------------- */ .os-doc .crown { padding: 80px var(--os-pad-x) 56px; display: grid; grid-template-columns: 2fr 1fr; gap: 64px; align-items: end; border-bottom: 1px solid var(--ink); } .os-doc .crown__num { font-family: var(--font-cd); font-weight: var(--w-medium); font-size: 13px; letter-spacing: 0.14em; color: var(--os-accent); margin-bottom: 16px; } .os-doc .crown__num::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--os-accent); vertical-align: middle; margin-right: 10px; } .os-doc .crown h1 { font-family: var(--font-ex); font-weight: var(--w-xbold); font-size: clamp(64px, 10vw, 160px); line-height: 0.86; letter-spacing: -0.045em; text-transform: lowercase; text-wrap: balance; } .os-doc .crown h1 em { font-family: var(--font-ex); font-weight: var(--w-thin); font-style: normal; color: var(--os-accent); } .os-doc .crown__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; font-family: var(--font-cd); font-size: 12px; color: rgba(0, 0, 0, 0.6); } .os-doc .crown__meta > div span { display: block; font-size: 11px; letter-spacing: 0.04em; margin-bottom: 4px; color: rgba(0, 0, 0, 0.5); text-transform: uppercase; } .os-doc .crown__meta > div b { color: var(--ink); font-weight: var(--w-medium); font-family: var(--font-std); font-size: 15px; letter-spacing: 0; } /* ---- Orange ceremonial statement (.stmt) ----------------------- */ .os-doc .stmt { background: var(--zeal-orange); color: var(--paper); padding: 120px var(--os-pad-x) 128px; position: relative; overflow: hidden; } .os-doc .stmt__label { font-family: var(--font-cd); font-weight: var(--w-medium); font-size: 13px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.9); margin-bottom: 40px; } .os-doc .stmt__label::before { content: ""; display: inline-block; width: 28px; height: 1px; background: rgba(255, 255, 255, 0.85); vertical-align: middle; margin-right: 10px; } .os-doc .stmt h2 { font-family: var(--font-ex); font-weight: var(--w-xbold); font-size: clamp(48px, 7.5vw, 124px); line-height: 0.92; letter-spacing: -0.04em; text-transform: lowercase; margin: 0 0 56px; max-width: 18ch; text-wrap: balance; position: relative; z-index: 1; } .os-doc .stmt h2 em { font-style: normal; font-weight: var(--w-thin); color: var(--ink); } .os-doc .stmt__footer { font-family: var(--font-std); font-size: 20px; line-height: 1.5; max-width: 60ch; color: rgba(255, 255, 255, 0.92); margin: 0; text-wrap: pretty; position: relative; z-index: 1; } .os-doc .stmt__footer b { color: var(--paper); font-weight: var(--w-bold); } .os-doc .stmt__spark { position: absolute; right: -120px; bottom: -120px; width: 520px; height: 520px; opacity: 0.1; object-fit: contain; filter: brightness(0); pointer-events: none; } /* ---- Section header (.sh) and prose ---------------------------- */ .os-doc .sh { padding: 96px var(--os-pad-x) 24px; } .os-doc .sh__eyebrow { font-family: var(--font-cd); font-size: 12px; font-weight: var(--w-medium); letter-spacing: 0.1em; color: var(--os-accent); margin-bottom: 18px; text-transform: lowercase; } .os-doc .sh__eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--os-accent); vertical-align: middle; margin-right: 10px; } .os-doc .sh h2 { font-family: var(--font-ex); font-weight: var(--w-xbold); font-size: clamp(44px, 6vw, 88px); line-height: 0.9; letter-spacing: -0.035em; text-transform: lowercase; text-wrap: balance; } .os-doc .sh h2 em { font-style: normal; font-weight: var(--w-thin); color: var(--os-accent); } .os-doc .prose { padding: 0 var(--os-pad-x) 48px; max-width: calc(72ch + var(--os-pad-x)); } .os-doc .prose p { font-family: var(--font-std); font-size: 19px; line-height: 1.55; color: var(--ink); margin: 0 0 22px; text-wrap: pretty; } .os-doc .prose p.lede { font-family: var(--font-ex); font-weight: var(--w-medium); font-size: 28px; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 32px; text-transform: none; max-width: 28ch; } .os-doc .prose strong { font-weight: var(--w-bold); } .os-doc .prose em { font-style: italic; } .os-doc .prose a { color: var(--os-accent); text-decoration: underline; text-underline-offset: 3px; } .os-doc .prose a:hover { color: var(--ink); } /* ---- Black aside note (.note) ---------------------------------- */ .os-doc .note { margin: 48px var(--os-pad-x) 0; padding: 32px 40px; background: var(--ink); color: var(--paper); max-width: calc(72ch + 32px); display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; } .os-doc .note__mark { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; } .os-doc .note__body span { display: block; font-family: var(--font-cd); font-size: 11px; font-weight: var(--w-medium); letter-spacing: 0.04em; color: var(--zeal-orange); margin-bottom: 10px; text-transform: uppercase; } .os-doc .note__body p { font-family: var(--font-ex); font-weight: var(--w-medium); font-size: 20px; line-height: 1.35; letter-spacing: -0.015em; margin: 0; text-wrap: pretty; text-transform: none; } /* ---- Doc-nav (footer prev/back/next) --------------------------- */ .os-doc .doc-nav { margin-top: 96px; display: grid; grid-template-columns: 1fr auto 1fr; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .os-doc .doc-nav a { padding: 40px var(--os-pad-x); text-decoration: none; color: var(--ink); display: block; transition: background var(--dur-fast) var(--ease-std); } .os-doc .doc-nav a:hover { background: var(--paper-2); } .os-doc .doc-nav .k { font-family: var(--font-cd); font-size: 11px; font-weight: var(--w-medium); letter-spacing: 0.04em; color: rgba(0, 0, 0, 0.55); margin-bottom: 10px; } .os-doc .doc-nav .t { font-family: var(--font-ex); font-weight: var(--w-bold); font-size: 28px; letter-spacing: -0.025em; line-height: 1.1; text-transform: lowercase; } .os-doc .doc-nav__next { text-align: right; border-left: 1px solid rgba(0, 0, 0, 0.15); } .os-doc .doc-nav__next:hover { background: var(--zeal-orange); color: var(--paper); } .os-doc .doc-nav__back { padding: 40px 24px; border-left: 1px solid rgba(0, 0, 0, 0.15); border-right: 1px solid rgba(0, 0, 0, 0.15); display: grid; place-items: center; font-family: var(--font-cd); font-size: 12px; letter-spacing: 0.02em; color: rgba(0, 0, 0, 0.6); } .os-doc .doc-nav__back:hover { background: var(--ink); color: var(--paper); } /* ---- Editorial responsive -------------------------------------- */ @media (max-width: 960px) { .os-doc { --os-pad-x: 24px; } .os-doc .crown { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; padding-bottom: 40px; } .os-doc .stmt { padding-top: 80px; padding-bottom: 80px; } .os-doc .sh { padding-top: 64px; } .os-doc .doc-nav { grid-template-columns: 1fr; } .os-doc .doc-nav__next { text-align: left; border-left: 0; border-top: 1px solid rgba(0, 0, 0, 0.15); } .os-doc .doc-nav__back { border-left: 0; border-right: 0; border-top: 1px solid rgba(0, 0, 0, 0.15); padding: 20px 24px; } } /* ========================================================= Editorial document index (.idx-doc) The 3-column "marker / main / pull" pattern shared by the Core OS dashboard and the Playbooks dashboard. Sister pattern to .os-doc above. Sister tokens: [data-handoff="orange"] orange ceremonial slab (Core OS) [data-handoff="black"] black ceremonial slab (Playbooks) ========================================================= */ .idx-doc { --idx-pad-x: 48px; --idx-rule: rgba(0, 0, 0, 0.10); --idx-rule-2: rgba(0, 0, 0, 0.22); --idx-ink-2: rgba(0, 0, 0, 0.72); --idx-ink-3: rgba(0, 0, 0, 0.55); --idx-ink-4: rgba(0, 0, 0, 0.38); --idx-paper-2: var(--zeal-warm-grey-25, #f5f0eb); --idx-accent: var(--zeal-orange-digital); font-family: var(--font-std); color: var(--ink); background: var(--paper); } /* Heading reset, same approach as .os-doc / .pb-detail */ :where(.idx-doc) h1, :where(.idx-doc) h2, :where(.idx-doc) h3, :where(.idx-doc) h4 { color: inherit; margin: 0; } /* p-main inside an index page should not constrain or pad — sections handle their own width and padding. */ body.tier-full-brand > main.p-main:has(.idx-doc) { max-width: none; padding: 0; margin: 0; background: transparent; } /* ---------- Crown ---------- */ .idx-doc .idx-crown { padding: 80px var(--idx-pad-x) 56px; display: grid; grid-template-columns: 2fr 1fr; gap: 64px; align-items: end; border-bottom: 1px solid var(--ink); } .idx-doc .idx-crown__num { font-family: var(--font-cd); font-weight: var(--w-medium); font-size: 13px; letter-spacing: 0.14em; color: var(--idx-accent); margin-bottom: 16px; } .idx-doc .idx-crown__num::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--idx-accent); vertical-align: middle; margin-right: 10px; } .idx-doc .idx-crown h1 { font-family: var(--font-ex); font-weight: var(--w-black); font-size: clamp(64px, 11vw, 200px); line-height: 0.86; letter-spacing: -0.05em; text-transform: lowercase; margin: 0; text-wrap: balance; } .idx-doc .idx-crown h1 em { font-family: var(--font-ex); font-weight: var(--w-thin); font-style: normal; color: var(--idx-accent); } .idx-doc .idx-crown__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; font-family: var(--font-cd); font-size: 12px; color: var(--idx-ink-3); } .idx-doc .idx-crown__meta span { display: block; font-size: 11px; letter-spacing: 0.04em; margin-bottom: 4px; color: var(--idx-ink-4); } .idx-doc .idx-crown__meta b { color: var(--ink); font-weight: var(--w-medium); font-family: var(--font-std); font-size: 15px; letter-spacing: 0; } /* ---------- Statement (orange ceremony — default; black when [data-handoff=black]) ---------- */ .idx-doc .idx-stmt { background: var(--zeal-orange); color: var(--paper); padding: 120px var(--idx-pad-x) 128px; position: relative; overflow: hidden; } .idx-doc[data-handoff="black"] .idx-stmt { background: var(--zeal-black); } .idx-doc .idx-stmt__label { font-family: var(--font-cd); font-weight: var(--w-medium); font-size: 13px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.92); margin-bottom: 40px; text-transform: lowercase; } .idx-doc[data-handoff="black"] .idx-stmt__label { color: var(--idx-accent); } .idx-doc .idx-stmt__label::before { content: ""; display: inline-block; width: 28px; height: 1px; background: rgba(255, 255, 255, 0.85); vertical-align: middle; margin-right: 10px; } .idx-doc[data-handoff="black"] .idx-stmt__label::before { background: var(--idx-accent); } .idx-doc .idx-stmt h2 { font-family: var(--font-ex); font-weight: var(--w-black); font-size: clamp(52px, 7.6vw, 128px); line-height: 0.92; letter-spacing: -0.04em; text-transform: lowercase; margin: 0 0 56px; max-width: 18ch; text-wrap: balance; position: relative; z-index: 1; } .idx-doc .idx-stmt h2 em { font-style: normal; font-weight: var(--w-thin); color: var(--ink); } .idx-doc[data-handoff="black"] .idx-stmt h2 em { color: var(--idx-accent); } .idx-doc .idx-stmt__footer { font-family: var(--font-std); font-size: 20px; line-height: 1.5; max-width: 60ch; color: rgba(255, 255, 255, 0.92); margin: 0; text-wrap: pretty; position: relative; z-index: 1; } .idx-doc[data-handoff="black"] .idx-stmt__footer { color: rgba(255, 255, 255, 0.78); } .idx-doc .idx-stmt__footer b { color: var(--paper); font-weight: var(--w-medium); } .idx-doc .idx-stmt__spark { position: absolute; right: -120px; bottom: -120px; width: 520px; height: 520px; opacity: 0.1; object-fit: contain; filter: brightness(0); pointer-events: none; } .idx-doc[data-handoff="black"] .idx-stmt__spark { opacity: 0.18; filter: none; } /* ---------- Section header + intro prose ---------- */ .idx-doc .idx-sh { padding: 96px var(--idx-pad-x) 24px; } .idx-doc .idx-sh__eyebrow { font-family: var(--font-cd); font-size: 12px; font-weight: var(--w-medium); letter-spacing: 0.1em; color: var(--idx-accent); margin-bottom: 18px; text-transform: lowercase; } .idx-doc .idx-sh__eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--idx-accent); vertical-align: middle; margin-right: 10px; } .idx-doc .idx-sh h2 { font-family: var(--font-ex); font-weight: var(--w-black); font-size: clamp(44px, 6vw, 88px); line-height: 0.9; letter-spacing: -0.035em; text-transform: lowercase; margin: 0; text-wrap: balance; } .idx-doc .idx-sh h2 em { font-style: normal; font-weight: var(--w-thin); color: var(--idx-accent); } .idx-doc .idx-prose { padding: 0 var(--idx-pad-x) 48px; max-width: 72ch; } .idx-doc .idx-prose p { font-family: var(--font-std); font-size: 19px; line-height: 1.55; color: var(--ink); margin: 0 0 22px; text-wrap: pretty; } .idx-doc .idx-prose p.lede { font-family: var(--font-ex); font-weight: var(--w-medium); font-size: 26px; line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 32px; max-width: 28ch; } .idx-doc .idx-prose strong { font-weight: var(--w-bold); } .idx-doc .idx-prose em { font-style: italic; color: var(--idx-ink-2); } .idx-doc .idx-prose a { color: var(--idx-accent); text-decoration: underline; text-underline-offset: 3px; } .idx-doc .idx-prose a:hover { color: var(--ink); } /* ---------- The list ---------- */ .idx-doc .idx-list { border-top: 1px solid var(--ink); margin-top: 8px; } .idx-doc .idx-row { display: grid; grid-template-columns: 280px 1.2fr 1fr; align-items: stretch; gap: 0; border-bottom: 1px solid var(--ink); transition: background 0.2s; cursor: pointer; text-decoration: none; color: inherit; } .idx-doc .idx-row:hover { background: var(--idx-paper-2); } .idx-doc .idx-row:hover .idx-row__title { color: var(--idx-accent); } .idx-doc .idx-row:hover .idx-row__pull { color: var(--ink); } .idx-doc .idx-row__marker { padding: 56px 36px 56px var(--idx-pad-x); border-right: 1px solid var(--idx-rule); display: flex; flex-direction: column; gap: 18px; justify-content: space-between; } .idx-doc .idx-row__id { font-family: var(--font-cd); font-weight: var(--w-medium); font-size: 11px; letter-spacing: 0.14em; color: var(--idx-accent); text-transform: uppercase; } .idx-doc .idx-row__num { font-family: var(--font-ex); font-weight: var(--w-black); font-size: 120px; line-height: 0.82; letter-spacing: -0.05em; color: var(--ink); } .idx-doc .idx-row:nth-child(even) .idx-row__num { color: var(--idx-accent); } .idx-doc .idx-row__meta { font-family: var(--font-cd); font-size: 11px; letter-spacing: 0.06em; color: var(--idx-ink-3); display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--idx-rule); } .idx-doc .idx-row__meta b { font-family: var(--font-std); font-size: 13px; font-weight: var(--w-medium); letter-spacing: 0; color: var(--ink); } .idx-doc .idx-row__main { padding: 56px 40px; display: flex; flex-direction: column; gap: 18px; justify-content: center; border-right: 1px solid var(--idx-rule); } .idx-doc .idx-row__title { font-family: var(--font-ex); font-weight: var(--w-bold); font-size: clamp(40px, 5vw, 64px); line-height: 0.96; letter-spacing: -0.03em; text-transform: lowercase; color: var(--ink); text-wrap: balance; transition: color 0.2s; } .idx-doc .idx-row__title em { font-style: normal; font-weight: var(--w-thin); color: var(--idx-accent); } .idx-doc .idx-row__desc { font-family: var(--font-std); font-size: 17px; line-height: 1.5; color: var(--idx-ink-2); max-width: 44ch; text-wrap: pretty; margin: 0; } .idx-doc .idx-row__quote { padding: 56px var(--idx-pad-x) 56px 40px; display: flex; flex-direction: column; gap: 22px; justify-content: center; } .idx-doc .idx-row__pull { font-family: var(--font-ex); font-weight: var(--w-medium); font-size: 22px; line-height: 1.28; letter-spacing: -0.018em; color: var(--idx-ink-2); text-wrap: pretty; margin: 0; transition: color 0.2s; } .idx-doc .idx-row__pull::before { content: "\201C"; color: var(--idx-accent); margin-right: 2px; } .idx-doc .idx-row__pull::after { content: "\201D"; color: var(--idx-accent); } .idx-doc .idx-row__open { font-family: var(--font-cd); font-weight: var(--w-medium); font-size: 12px; letter-spacing: 0.06em; color: var(--ink); padding-top: 14px; border-top: 1px solid var(--idx-rule); display: flex; justify-content: space-between; align-items: baseline; text-transform: lowercase; } .idx-doc .idx-row__open b { color: var(--idx-accent); font-weight: var(--w-bold); } .idx-doc .idx-row__open b::after { content: " \2192"; } /* ---------- Tail handoff ---------- */ .idx-doc .idx-tail { background: var(--idx-paper-2); padding: 96px var(--idx-pad-x); border-top: 1px solid var(--ink); } .idx-doc .idx-tail__inner { display: grid; grid-template-columns: 2fr 1fr; gap: 64px; align-items: end; max-width: 1280px; } .idx-doc .idx-tail__eyebrow { font-family: var(--font-cd); font-weight: var(--w-medium); font-size: 12px; letter-spacing: 0.1em; color: var(--idx-accent); margin-bottom: 18px; text-transform: lowercase; } .idx-doc .idx-tail__eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--idx-accent); vertical-align: middle; margin-right: 10px; } .idx-doc .idx-tail h3 { font-family: var(--font-ex); font-weight: var(--w-black); font-size: clamp(40px, 5.6vw, 80px); line-height: 0.92; letter-spacing: -0.035em; text-transform: lowercase; margin: 0; max-width: 18ch; text-wrap: balance; } .idx-doc .idx-tail h3 em { font-style: normal; font-weight: var(--w-thin); color: var(--idx-accent); } .idx-doc .idx-tail__col p { font-family: var(--font-std); font-size: 17px; line-height: 1.55; color: var(--idx-ink-2); margin: 0 0 22px; text-wrap: pretty; } .idx-doc .idx-tail__col p b { color: var(--ink); font-weight: var(--w-medium); } .idx-doc .idx-tail__cta { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; background: var(--ink); color: var(--paper); font-family: var(--font-cd); font-weight: var(--w-medium); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; border-radius: 999px; transition: background 0.2s; text-decoration: none; } .idx-doc .idx-tail__cta:hover { background: var(--idx-accent); } .idx-doc .idx-tail__cta::after { content: "\2192"; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .idx-doc .idx-row { grid-template-columns: 220px 1.3fr 1fr; } .idx-doc .idx-row__num { font-size: 88px; } .idx-doc .idx-row__title { font-size: 36px; } .idx-doc .idx-row__pull { font-size: 19px; } } @media (max-width: 860px) { .idx-doc { --idx-pad-x: 20px; } .idx-doc .idx-crown { padding: 48px 20px 32px; grid-template-columns: 1fr; gap: 32px; } .idx-doc .idx-stmt { padding: 72px 20px 80px; } .idx-doc .idx-sh { padding: 64px 20px 16px; } .idx-doc .idx-prose { padding: 0 20px 32px; } .idx-doc .idx-row { grid-template-columns: 1fr; } .idx-doc .idx-row__marker, .idx-doc .idx-row__main, .idx-doc .idx-row__quote { padding: 28px 20px; border-right: 0; } .idx-doc .idx-row__marker { border-bottom: 1px solid var(--idx-rule); flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } .idx-doc .idx-row__num { font-size: 64px; } .idx-doc .idx-row__meta { padding-top: 0; border-top: 0; flex-direction: row; flex-wrap: wrap; gap: 12px 20px; } .idx-doc .idx-row__main { border-bottom: 1px solid var(--idx-rule); } .idx-doc .idx-tail { padding: 56px 20px; } .idx-doc .idx-tail__inner { grid-template-columns: 1fr; gap: 28px; } }