/* ============================================================ DEADBAND LIFE — ARTICLE STYLESHEET db-article.css ------------------------------------------------------------ LOAD THIS ONLY ON ARTICLE / BLOG POST PAGES, AFTER db-global.css: WHAT LIVES HERE: - The White Editorial Theme: overrides the navy marketing default (set in db-global.css) for any page whose carries the .db-article-page class. - Article page SHELL ONLY: page wrapper, post typography, headings, header/byline block, hero figure, tags, further reading, post footer. WHAT DOES NOT LIVE HERE: - Reusable diagnostic/data components (callouts, stat blocks, root-cause flags, system diagrams, action boxes, etc.). Those are owned exclusively by db-components.css. Defining them here as well was the cause of the duplicate-class bug found in the previous version of this file — .db-callout, .db-stat-block, .db-root-cause, .db-action-box, and .db-system-diagram were each defined in BOTH this file and db-components.css with different specs, and which one "won" depended on load order and specificity, not intent. Fixed by giving each class exactly one home. - Any value as a literal hex or literal font-family string. Every color and font below is a var(--token) reference into db-global.css's :root. This file previously hardcoded "Source Serif 4", Georgia, serif (and similar) in four separate places — if the brand font ever changes, this file would have silently drifted out of sync. Fixed. TYPOGRAPHY NOTE (approved deviation, unchanged from v1.1): DB Brand Soul V1.02 specifies Inter for all headlines and body copy. This file uses Barlow Condensed (headlines) and Source Serif 4 (body) instead, per the DB Blog Post Production Prompt V1.1 rationale: Inter reads as a generic AI-default choice, while Barlow Condensed signals editorial authority and Source Serif 4 reads as authoritative-but-not- cold. This is confirmed as an ARTICLE-PAGE-ONLY exception — Brand Soul's Inter spec remains the official standard for the rest of the site (see db-global.css marketing theme) and has NOT been amended. Do not extend this deviation to marketing pages without an explicit decision to update Brand Soul itself. ============================================================ */ /* ============================================================ 1. THEME OVERRIDE — WHITE EDITORIAL THEME ------------------------------------------------------------ Everything in this block exists to cancel the navy marketing defaults from db-global.css for article pages specifically. ============================================================ */ body.db-article-page { background: var(--db-white); color: var(--db-text); font-family: var(--font-article-body); } body.db-article-page .db-navbar { /* The nav bar still uses navy/Inter chrome even on article pages, for site-wide navigational consistency — only the CONTENT area below the nav switches theme. */ margin-bottom: 0; background-color: var(--db-navy-deep); } /* ============================================================ 2. ARTICLE WRAPPER ============================================================ */ .db-page-wrapper { width: 100%; max-width: var(--article-max-width); margin: 0 auto; padding: var(--space-2xl) var(--space-md) var(--space-3xl); } .db-post { width: 100%; font-family: var(--font-article-body); font-size: 1.0625rem; line-height: 1.8; color: var(--db-text); } .db-post p { margin: 0 0 var(--space-md); } .db-post strong { font-weight: 600; } .db-post a { color: var(--db-blue); text-decoration: none; } .db-post a:hover { text-decoration: underline; } /* ============================================================ 3. HEADINGS ============================================================ */ .db-post h1, .db-post h2, .db-post h3, .db-post h4 { font-family: var(--font-article-display); font-weight: 700; line-height: 1.1; color: var(--db-navy); } .db-post h1 { font-size: clamp(3rem, 5vw, 4.5rem); margin: 0 0 var(--space-sm); } .db-post h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin: var(--space-xl) 0 var(--space-sm); } .db-post h3 { font-size: 1.75rem; margin: var(--space-lg) 0 var(--space-xs); } .db-post h4 { font-size: 1.25rem; margin: var(--space-md) 0 var(--space-xs); } /* Article body rhythm: a heading immediately following a section boundary shouldn't double up top margin with the section's own spacing. This is the fix for the previous version's section-spacing bug, where .db-section margins and h2/h3 top margins were both compressed to 0.25rem as a blunt workaround — that approach broke rhythm everywhere a paragraph (not a heading) opened a section. Scoped correctly here instead. */ .db-section + .db-section { margin-top: 0; } .db-section > h2:first-child, .db-section > h3:first-child { margin-top: 0; } /* ============================================================ 4. ARTICLE HEADER ============================================================ */ .db-post__header { margin-bottom: var(--space-xl); } .db-post__meta-row { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); } .db-subtitle { font-size: 1.3rem; line-height: 1.6; font-style: italic; color: var(--db-steel); margin-bottom: var(--space-md); } .db-post__byline { display: flex; gap: var(--space-sm); font-family: var(--font-data); font-size: 0.85rem; color: var(--db-steel); } /* ============================================================ 5. TAGS ------------------------------------------------------------ Article-specific chrome — lives here, not in components.css, because tags are part of the article shell (header/footer), not a content component an article author drops into the body. ============================================================ */ .db-tag { display: inline-block; padding: 0.3rem 0.75rem; border-radius: var(--radius-sharp); color: var(--db-white); font-family: var(--font-data); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; } .db-tag--cross { background: var(--db-navy); } .db-tag--survival { background: var(--pillar-survival); } .db-tag--security { background: var(--pillar-security); } .db-tag--vitality { background: var(--pillar-vitality); } .db-article-number { font-family: var(--font-data); color: var(--db-steel); font-size: 0.85rem; } /* ============================================================ 6. HERO IMAGE ============================================================ */ .db-figure { width: 100%; margin: var(--space-xl) 0; } .db-figure img { width: 100%; display: block; border-radius: var(--radius-sharp); } .db-figure figcaption { margin-top: var(--space-xs); font-size: 0.9rem; line-height: 1.6; color: var(--db-steel); font-style: italic; } /* ============================================================ 7. PULL QUOTES ------------------------------------------------------------ Kept here (not components.css) because a pull quote is a typographic device of the running text, not a standalone diagnostic/data component — it has no dark-mode variant of its own beyond what the page-level dark mode override (below) already provides. ============================================================ */ .db-pullquote { margin: var(--space-lg) 0; padding-left: var(--space-md); border-left: var(--border-data-heavy) solid var(--db-blue); font-size: 1.5rem; line-height: 1.5; font-style: italic; color: var(--db-navy); } /* ============================================================ 8. FURTHER READING + POST FOOTER ============================================================ */ .db-further-reading { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--border-hairline) solid var(--db-border); } .db-link { color: var(--db-blue); } .db-link__number { color: var(--db-steel); font-family: var(--font-data); } .db-post__footer { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--border-hairline) solid var(--db-border); font-size: 0.85rem; color: var(--db-steel); } /* ============================================================ 9. DARK MODE — WHITE EDITORIAL THEME PAGE SHELL ------------------------------------------------------------ Confirmed 2026: article dark mode mirrors the NAVY MARKETING theme palette (not an inverted/grayscale version of the white editorial theme), so the site has exactly two themes total rather than three. This block handles the PAGE SHELL only (background, body text, headings, tags, pull quotes, links). Diagnostic component dark-mode variants (callouts, stat blocks, system diagrams, etc.) are handled inside db-components.css, scoped to their own selectors, with sharp corners preserved per the no-exceptions rule confirmed for both light and dark mode. ============================================================ */ @media (prefers-color-scheme: dark) { body.db-article-page { background: var(--db-navy-deep); color: var(--db-white-muted); } .db-post { color: var(--db-white-muted); } .db-post h1, .db-post h2, .db-post h3, .db-post h4 { color: var(--db-white); } .db-post a { color: var(--db-blue-bright); } .db-subtitle, .db-post__byline, .db-article-number, .db-figure figcaption, .db-post__footer { color: var(--db-steel-light); } .db-pullquote { color: var(--db-white); border-left-color: var(--db-blue-bright); } .db-further-reading, .db-post__footer { border-top-color: var(--db-navy-border); } /* Pillar tags brighten in dark mode using the confirmed dark-mode pillar variants, so tag text stays legible and on-brand against the navy background. */ .db-tag--survival { background: var(--pillar-survival-dark); } .db-tag--security { background: var(--pillar-security-dark); } .db-tag--vitality { background: var(--pillar-vitality-dark); } } /* ============================================================ 11. ARTICLE SHELL ELEMENTS — FOUND IN PRODUCTION ARTICLES ------------------------------------------------------------ Added 2026 after auditing the 18 already-written articles. These elements are used consistently across all 18 files but were missing from the prior rebuild, which was written from the Production Prompt's spec rather than the actual HTML. Per project decision: the 18 articles are the source of truth: this CSS was written to match THEIR markup exactly, not the other way around. ============================================================ */ /* ---- 11.1 SECTION MODIFIERS ---- Used as class="db-section db-section--hook" etc. throughout every article. Purely semantic markers for now — no unique visual treatment beyond what .db-section and the heading styles already provide. If per-section visual treatment is wanted later (e.g. a colored left rail per section type), add it here. */ .db-section--hook, .db-section--diagnosis, .db-section--mechanism, .db-section--design, .db-section--iterate, .db-section--lexicon, .db-section--audience, .db-section--domains { /* intentionally no declarations yet — semantic hooks only */ } /* ---- 11.2 BREADCRUMB NAV ---- */ .db-breadcrumb { margin-bottom: var(--space-md); font-size: 0.8rem; color: var(--db-steel); } .db-breadcrumb a { color: var(--db-steel); } .db-breadcrumb a:hover { color: var(--db-blue); } .db-breadcrumb span[aria-current="page"] { color: var(--db-text); font-weight: 600; } /* ---- 11.3 HEADER META ROW ---- The row containing the pillar/framework tag + article number badge, directly under the breadcrumb. */ .db-post__header-meta { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); } /* "Framework" tag — used on Layer 1/2 cross-pillar articles that aren't tied to a specific Survival/Security/Vitality pillar. Neutral navy, same visual weight as the pillar tags defined in Section 5 above. */ .db-tag--framework { background: var(--db-navy); } /* Post meta row: reading time / author / year, under the subtitle. Distinct from .db-post__byline (Section 4 above) — that one is JetBrains Mono and used in a different spot in some early drafts; .db-post-meta is the version actually used across all 18 live articles. */ .db-post-meta { display: flex; gap: var(--space-sm); font-family: var(--font-data); font-size: 0.85rem; color: var(--db-steel); } /* ---- 11.4 HERO FIGURE MODIFIER + PLACEHOLDER ---- */ .db-figure--hero { /* inherits .db-figure; no overrides needed currently */ } /* Used in articles where a production image has not yet been supplied. Renders a labeled placeholder block at the same aspect ratio a hero image would occupy, so layout doesn't shift when the real image is added later. */ .db-hero-placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--db-light); border: var(--border-data) dashed var(--db-border-strong); } .db-hero-placeholder span { font-family: var(--font-article-display); font-size: 1.5rem; font-weight: 700; color: var(--db-steel); text-align: center; padding: var(--space-md); } /* ---- 11.5 POST FOOTER — TWO NAMING VARIANTS ---- CONFIRMED PROJECT DECISION (2026): Variant B is the standardized go-forward pattern. The 12 articles currently using Variant A are scheduled for editing to match Variant B in a future pass. Variant A's classes are supported here ONLY so those 12 articles keep rendering correctly until that edit happens — remove the Variant A rules once all 18 articles use Variant B consistently. */ /* Variant B (standardized): .db-footer-meta / .db-citations / .db-brand-footer */ .db-footer-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); font-family: var(--font-data); font-size: 0.8rem; color: var(--db-steel); } .db-citations h4 { font-family: var(--font-article-display); font-size: 1rem; color: var(--db-navy); margin-bottom: var(--space-xs); } .db-citations ol { font-size: 0.85rem; color: var(--db-steel); line-height: 1.6; padding-left: 1.25rem; } .db-citations li { margin-bottom: var(--space-sm); } .db-brand-footer { margin-top: var(--space-md); font-size: 0.8rem; color: var(--db-steel); } /* Variant A (DEPRECATED — pending standardization to Variant B per project decision; do not use in new articles): */ .db-post__footer-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); font-family: var(--font-data); font-size: 0.8rem; color: var(--db-steel); } .db-link-number { color: var(--db-steel); font-family: var(--font-data); margin-right: var(--space-2xs); } /* ---- 11.6 PILLAR-SPECIFIC H2 (used in twelve-life-systems-explained) ---- */ .h2--survival { color: var(--pillar-survival); } .h2--security { color: var(--pillar-security); } .h2--vitality { color: var(--pillar-vitality); } /* ---- 11.7 DARK MODE — SHELL ADDITIONS ---- */ @media (prefers-color-scheme: dark) { .db-breadcrumb, .db-breadcrumb a, .db-post-meta, .db-footer-meta, .db-post__footer-meta, .db-citations ol, .db-brand-footer, .db-link-number { color: var(--db-steel-light); } .db-breadcrumb span[aria-current="page"] { color: var(--db-white); } .db-citations h4 { color: var(--db-white); } .db-hero-placeholder { background: var(--db-navy-raised); border-color: var(--db-navy-border); } .db-hero-placeholder span { color: var(--db-steel-light); } .h2--survival { color: var(--pillar-survival-dark); } .h2--security { color: var(--pillar-security-dark); } .h2--vitality { color: var(--pillar-vitality-dark); } } @media (max-width: 768px) { .db-page-wrapper { padding: var(--space-xl) var(--space-sm) var(--space-2xl); } .db-post h1 { font-size: 2.75rem; } .db-post h2 { font-size: 2rem; } } .db-post .db-section { padding: 0; }