/* ============================================================= Article theme — /articles/:slug Light/dark reading surface for KnocScore Journal articles. Toggled by adding/removing `article-builder-light` on . ============================================================= */ /* ---------- LIGHT MODE OVERRIDES ---------- */ /* Applied when has class `article-builder-light`. Overrides the app's dark Midnight Indigo tokens with a white/ink KnocScore reading palette. */ html.article-builder-light { --background: oklch(1 0 0) !important; --foreground: oklch(0.22 0.01 260) !important; --surface: oklch(0.985 0.003 260) !important; --surface-elevated: oklch(0.97 0.005 260) !important; --card: oklch(1 0 0) !important; --card-foreground: oklch(0.22 0.01 260) !important; --popover: oklch(1 0 0) !important; --popover-foreground: oklch(0.22 0.01 260) !important; --secondary: oklch(0.965 0.005 260) !important; --secondary-foreground: oklch(0.22 0.01 260) !important; --muted: oklch(0.965 0.005 260) !important; --muted-foreground: oklch(0.5 0.01 260) !important; --accent: oklch(0.95 0.01 260) !important; --accent-foreground: oklch(0.22 0.01 260) !important; --border: oklch(0.9 0.005 260 / 90%) !important; --input: oklch(0.9 0.005 260) !important; --ring: oklch(0.4 0.04 260) !important; /* Graph variables */ --graph-bg: #f9f9f9; --graph-text: #333; --graph-line: #ccc; } html:not(.article-builder-light) { --graph-bg: #0f172a; --graph-text: rgba(255, 255, 255, 0.8); --graph-line: #ffffff; } html.article-builder-light body { background-color: oklch(1 0 0) !important; color: oklch(0.22 0.01 260) !important; } /* Light mode overrides for signup section to maintain readability */ html.article-builder-light .section-bg-override { background: var(--background) !important; } html.article-builder-light .section-grid-override { opacity: 0.1 !important; } html.article-builder-light .pilot-badge-override { background-color: var(--muted) !important; } html.article-builder-light .input-field-override { background-color: var(--surface) !important; } /* ---------- ARTICLE TYPOGRAPHY ---------- */ /* Serif reading surface with two-column body on md+ screens. */ .prose-article { font-family: var(--font-article-serif); color: var(--color-foreground); font-size: 1.0625rem; line-height: 1.75; } .prose-article p { margin: 0 0 1.25em; hyphens: auto; } .prose-article a { color: oklch(0.45 0.12 250); text-decoration: underline; text-underline-offset: 2px; } .prose-article h2, .prose-article h3 { font-family: var(--font-article-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; column-span: all; } .prose-article h2 { font-size: 1.75rem; margin: 2.4em 0 0.5em; } .prose-article h3 { font-size: 1.35rem; margin: 1.4em 0 0.5em; } .prose-article figure { margin: 1.25em 0; break-inside: avoid; } .prose-article figure img { width: 100%; height: auto; display: block; border-radius: 0.25rem; } .prose-article figcaption { font-size: 0.8125rem; color: var(--color-muted-foreground); font-style: italic; margin-top: 0.5em; text-align: center; } .prose-article blockquote { font-style: italic; border-left: 3px solid var(--color-border); padding-left: 1em; margin: 1em 0; color: var(--color-foreground); } /* ---------- ARTICLE TITLE ---------- */ .article-title { font-family: var(--font-article-display); font-style: italic; font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; } /* ---------- TWO-COLUMN BODY ---------- */ @media (min-width: 768px) { .prose-article-cols { column-count: 2; column-gap: 2.5rem; column-rule: 1px solid var(--color-border); } } /* Fix for missing list markers in articles */ .prose-article ul, .prose-article ol { list-style: revert !important; margin-left: 2rem !important; } .prose-article ul { list-style-type: disc !important; } .prose-article ol { list-style-type: decimal !important; } .prose-article li { display: list-item !important; padding-left: 0.5rem; }