/* Shared styles for AI education pages */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;0,6..72,700;1,6..72,400&family=Inter:wght@400;500;600;700&display=swap'); /* ===== Brand Variables ===== */ :root { --brand-accent: #2DD4BF; --brand-accent-rgb: 45, 212, 191; --brand-bg: #0B1525; --brand-text: rgba(255, 255, 255, 0.85); --brand-muted: rgba(255, 255, 255, 0.6); --brand-border: rgba(255, 255, 255, 0.15); --brand-hovercard-bg: #141e33; --brand-scrollbar: #2a3550; --brand-nav-bg: rgba(11, 21, 37, 0.95); --brand-accent-dark: #064D49; /* Semantic status colors — use these instead of raw hex in new code */ --ok: #2ecc71; --ok-rgb: 46, 204, 113; --warn: #f39c12; --warn-rgb: 243, 156, 18; --danger: #e74c3c; --danger-rgb: 231, 76, 60; --info: #3498db; --info-rgb: 52, 152, 219; /* Border tiers — subtle dividers vs visible borders */ --border-subtle: rgba(255, 255, 255, 0.08); --border-mid: rgba(255, 255, 255, 0.15); --font-body: 'Newsreader', Georgia, serif; --font-ui: 'Inter', system-ui, sans-serif; /* Surface elevation — layered tints over --brand-bg so cards/nav read as planes. Use these instead of ad-hoc rgba(255,255,255,0.0x) fills in new code. */ --surface-1: rgba(255, 255, 255, 0.035); --surface-2: rgba(255, 255, 255, 0.06); --surface-3: rgba(255, 255, 255, 0.09); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-2: 0 8px 30px rgba(0, 0, 0, 0.35); } /* ===== Per-vertical accents (wayfinding) ===== theme.js sets data-vertical on from the URL path before first paint. Redefining the accent tokens re-tints every accent-driven element for free. */ [data-vertical="bio"] { --brand-accent: #A78BFA; --brand-accent-rgb: 167, 139, 250; } [data-vertical="faw"] { --brand-accent: #FBBF24; --brand-accent-rgb: 251, 191, 36; } [data-vertical="ghw"] { --brand-accent: #4ADE80; --brand-accent-rgb: 74, 222, 128; } [data-vertical="science"] { --brand-accent: #60A5FA; --brand-accent-rgb: 96, 165, 250; } [data-vertical="abundance"] { --brand-accent: #FB923C; --brand-accent-rgb: 251, 146, 60; } [data-vertical="giving"] { --brand-accent: #F472B6; --brand-accent-rgb: 244, 114, 182; } [data-vertical="scaffold"] { --brand-accent: #94A3B8; --brand-accent-rgb: 148, 163, 184; } /* Subtle background depth — a faint accent-tinted glow top-center so the flat navy stops reading as a single fill. Sits behind all content, ignores reduced motion. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 520px at 50% -8%, rgba(var(--brand-accent-rgb), 0.10), transparent 70%), radial-gradient(900px 600px at 100% 0%, rgba(var(--brand-accent-rgb), 0.045), transparent 60%); } /* ===== Typography ===== */ /* Site-wide heading scale; page heroes may override */ h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); line-height: 105%; letter-spacing: -0.02em; } h2 { font-size: clamp(1.35rem, 2.6vw, 1.6rem); line-height: 120%; letter-spacing: -0.03em; } h3 { font-size: 1.15rem; line-height: 125%; } body { line-height: 130%; padding-top: 90px; } /* Visually hidden, available to screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== Keyboard Focus ===== */ :focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; } /* ===== Skip Link (injected by nav.js) ===== */ .skip-link { position: fixed; top: -100px; left: 16px; z-index: 3000; background: var(--brand-accent); color: #0B1525; padding: 8px 14px; border-radius: 0 0 8px 8px; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ===== Reduced Motion ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto !important; } } /* ===== Navigation Bar (Two-Row) ===== */ :root { --nav-row1-height: 44px; --nav-row2-height: 36px; --nav-total-height: 80px; /* row1 + row2 */ --nav-total-height-single: 44px; /* home page, no row 2 */ } .nav-bar { position: fixed; top: 0; left: 0; right: 0; background: var(--brand-nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--brand-border); z-index: 2000; font-family: var(--font-ui); display: flex; flex-direction: column; } /* Row 1: brand + vertical tabs + theme toggle */ .nav-row { max-width: var(--nav-max-width, 1400px); width: 100%; margin: 0 auto; padding: 0 20px; } .nav-row-top { display: flex; align-items: center; height: var(--nav-row1-height); gap: 16px; } .nav-brand { font-size: 0.95rem; font-weight: 600; color: var(--brand-accent); text-decoration: none; letter-spacing: -0.01em; flex-shrink: 0; } .nav-brand em { font-style: italic; } .nav-brand .brand-full { font-weight: 400; margin-left: 4px; font-size: 0.82rem; opacity: 0.7; } .nav-brand:hover { text-decoration: none; opacity: 0.85; } .nav-vtabs { display: flex; gap: 4px; align-items: center; flex: 1; min-width: 0; } .nav-vtab { color: var(--brand-muted); text-decoration: none; font-size: 0.82rem; font-weight: 500; padding: 5px 12px; border-radius: 6px; transition: all 0.2s; white-space: nowrap; } .nav-vtab:hover { color: #fff; background: rgba(255, 255, 255, 0.05); } .nav-vtab.active { color: var(--brand-accent); font-weight: 600; background: rgba(var(--brand-accent-rgb), 0.1); } /* Row 2: sub-page links */ .nav-row-pages { display: flex; align-items: center; height: var(--nav-row2-height); border-top: 1px solid rgba(255, 255, 255, 0.06); position: relative; } .nav-pages { display: flex; gap: 4px; align-items: center; } .nav-link { color: var(--brand-muted); text-decoration: none; font-size: 0.8rem; padding: 4px 10px; border-radius: 5px; transition: all 0.2s; white-space: nowrap; } .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); } .nav-link.active { color: var(--brand-accent); background: rgba(var(--brand-accent-rgb), 0.1); } /* Divider between public pages and internal-only pages in the sub-nav */ .nav-sep { color: rgba(255, 255, 255, 0.22); font-size: 0.8rem; padding: 0 2px 0 6px; user-select: none; cursor: default; white-space: nowrap; } .nav-sep .nav-lock { font-size: 0.62rem; margin-left: 6px; opacity: 0.75; vertical-align: 1px; } [data-theme="light"] .nav-sep { color: rgba(0, 0, 0, 0.2); } /* Legacy: keep .nav-inner and .nav-links for alignment-funnel-legacy */ .nav-inner { max-width: var(--nav-max-width, 1400px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 48px; } .nav-links { display: flex; gap: 8px; align-items: center; } /* ===== Theme Toggle ===== */ .theme-toggle { background: rgba(255, 255, 255, 0.08); border: none; cursor: pointer; padding: 6px 10px; border-radius: 6px; font-size: 1rem; line-height: 1; transition: background 0.2s; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.15); } /* ===== Term Hover ===== */ .term-hover { color: var(--brand-accent); cursor: pointer; border-bottom: 1px dotted rgba(var(--brand-accent-rgb), 0.5); position: relative; } /* ===== Hovercard ===== */ .hovercard { position: fixed; background: var(--brand-hovercard-bg); border: 1px solid rgba(var(--brand-accent-rgb), 0.3); border-radius: 10px; padding: 14px 18px; max-width: 340px; z-index: 3000; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; } .hovercard.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .hovercard .hc-title { font-size: 0.9rem; font-weight: 700; color: var(--brand-accent); margin-bottom: 4px; } .hovercard .hc-year { font-size: 0.7rem; color: var(--brand-muted); margin-left: 8px; font-weight: 400; } .hovercard .hc-def { font-size: 0.8rem; color: #ccc; line-height: 1.5; } .hovercard .hc-status { margin-top: 8px; font-size: 0.7rem; color: var(--brand-muted); font-style: italic; } /* Proposal hovercards */ .hovercard.proposal-hc { border-color: rgba(255, 255, 255, 0.2); } .hovercard.proposal-hc .hc-title { color: #fff; } .hovercard.proposal-hc .hc-subtitle { font-size: 0.75rem; color: var(--brand-muted); margin-bottom: 8px; } .hovercard.proposal-hc .hc-orgs { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } /* ===== Person Hover ===== */ .person-hover { color: var(--brand-accent); cursor: pointer; border-bottom: 1px dotted rgba(var(--brand-accent-rgb), 0.4); position: relative; } /* ===== Person Hovercard ===== */ .hovercard.person-hc { border-left: 3px solid var(--brand-accent); max-width: 360px; } .hovercard.person-hc .hc-title { display: flex; align-items: center; gap: 8px; } .phc-cg-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px; background: rgba(76, 175, 80, 0.2); color: #66BB6A; padding: 1px 6px; border-radius: 3px; vertical-align: middle; } .phc-affiliations { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); } .phc-affil { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: rgba(255,255,255,0.8); } .phc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .phc-org { flex: 1; } .phc-rel { color: rgba(255,255,255,0.4); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.3px; } .phc-eco-link { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08); } .phc-eco-link a { font-size: 0.72rem; color: var(--brand-accent); text-decoration: none; opacity: 0.8; transition: opacity 0.15s; } .phc-eco-link a:hover { opacity: 1; } /* ===== Research Hover ===== */ .research-hover { color: var(--brand-accent); cursor: pointer; border-bottom: 1px dotted rgba(var(--brand-accent-rgb), 0.4); position: relative; } /* ===== Research Hovercard ===== */ .hovercard.research-hc { border-left: 3px solid #FF9800; max-width: 360px; } .hovercard.research-hc .hc-title { display: flex; align-items: center; gap: 8px; } .rhc-type-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px; color: #fff; padding: 1px 6px; border-radius: 3px; vertical-align: middle; text-transform: uppercase; } .rhc-status-line { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.72rem; } .rhc-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .rhc-status-text { color: rgba(255,255,255,0.7); } .rhc-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .rhc-progress-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; } .rhc-progress-fill { height: 100%; border-radius: 2px; transition: width 0.3s; } .rhc-progress-pct { font-size: 0.65rem; color: rgba(255,255,255,0.5); min-width: 28px; text-align: right; } .rhc-parent { font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-top: 6px; font-style: italic; } .rhc-orgs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); } .rhc-org-tag { font-size: 0.65rem; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); padding: 2px 8px; border-radius: 10px; } .rhc-map-link { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08); } .rhc-map-link a { font-size: 0.72rem; color: var(--brand-accent); text-decoration: none; opacity: 0.8; transition: opacity 0.15s; } .rhc-map-link a:hover { opacity: 1; } /* ===== Term Cards ===== */ .term-card { background: rgba(var(--brand-accent-rgb), 0.05); border: 1px solid rgba(var(--brand-accent-rgb), 0.15); border-radius: 10px; padding: 16px 20px; } /* Hover feedback for the interactive term cards (a light-mode hover rule already existed but the dark-mode base was missing, so cards looked static on the default theme). */ .term-card:hover { background: rgba(var(--brand-accent-rgb), 0.09); border-color: rgba(var(--brand-accent-rgb), 0.4); transform: translateY(-2px); } .term-card .term-name { font-size: 0.95rem; font-weight: 700; color: var(--brand-accent); margin-bottom: 6px; } .term-card .term-year, .term-card .term-origin { font-size: 0.7rem; color: var(--brand-muted); margin-left: 8px; font-weight: 400; } .term-card .term-def { font-size: 0.85rem; color: #bbb; line-height: 1.5; } /* ===== Light Mode (shared rules) ===== */ [data-theme="light"] { --brand-accent: #064D49; --brand-accent-rgb: 6, 77, 73; --brand-bg: #F6F6F6; --brand-text: #333333; --brand-muted: #606060; --brand-border: #D7D7D7; --brand-hovercard-bg: #ffffff; --brand-scrollbar: #c4c8be; --brand-nav-bg: rgba(246, 246, 246, 0.95); --ok: #27ae60; --ok-rgb: 39, 174, 96; --warn: #d68910; --warn-rgb: 214, 137, 16; --danger: #c0392b; --danger-rgb: 192, 57, 43; --info: #2471a3; --info-rgb: 36, 113, 163; --border-subtle: rgba(0, 0, 0, 0.08); --border-mid: rgba(0, 0, 0, 0.15); --surface-1: #ffffff; --surface-2: #fbfbfb; --surface-3: #f2f2f2; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-2: 0 8px 30px rgba(0, 0, 0, 0.10); } /* Light-mode per-vertical accents — darker tones that hold contrast on white */ [data-theme="light"][data-vertical="bio"] { --brand-accent: #6D28D9; --brand-accent-rgb: 109, 40, 217; } [data-theme="light"][data-vertical="faw"] { --brand-accent: #B45309; --brand-accent-rgb: 180, 83, 9; } [data-theme="light"][data-vertical="ghw"] { --brand-accent: #15803D; --brand-accent-rgb: 21, 128, 61; } [data-theme="light"][data-vertical="science"] { --brand-accent: #1D4ED8; --brand-accent-rgb: 29, 78, 216; } [data-theme="light"][data-vertical="abundance"] { --brand-accent: #C2410C; --brand-accent-rgb: 194, 65, 12; } [data-theme="light"][data-vertical="giving"] { --brand-accent: #BE185D; --brand-accent-rgb: 190, 24, 93; } [data-theme="light"][data-vertical="scaffold"] { --brand-accent: #475569; --brand-accent-rgb: 71, 85, 105; } /* Lighten the depth glow for light mode so it stays a whisper, not a wash */ [data-theme="light"] body::before { background: radial-gradient(1100px 520px at 50% -8%, rgba(var(--brand-accent-rgb), 0.06), transparent 70%); } [data-theme="light"] body { background: #F6F6F6; color: #333; } [data-theme="light"] .nav-bar { background: var(--brand-nav-bg); border-bottom-color: var(--brand-border); } [data-theme="light"] .nav-brand { color: var(--brand-accent); } [data-theme="light"] .nav-vtab { color: var(--brand-muted); } [data-theme="light"] .nav-vtab:hover { color: var(--brand-accent); background: rgba(var(--brand-accent-rgb), 0.06); } [data-theme="light"] .nav-vtab.active { color: var(--brand-accent); background: rgba(var(--brand-accent-rgb), 0.12); } [data-theme="light"] .nav-row-pages { border-top-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .nav-link { color: var(--brand-muted); } [data-theme="light"] .nav-link:hover { color: var(--brand-accent); background: rgba(var(--brand-accent-rgb), 0.06); } [data-theme="light"] .nav-link.active { color: var(--brand-accent); background: rgba(var(--brand-accent-rgb), 0.12); } [data-theme="light"] .theme-toggle { background: rgba(0, 0, 0, 0.06); } [data-theme="light"] .theme-toggle:hover { background: rgba(0, 0, 0, 0.12); } [data-theme="light"] .hovercard { background: var(--brand-hovercard-bg); border-color: var(--brand-border); color: #333; box-shadow: 0 4px 16px rgba(0,0,0,0.1); } [data-theme="light"] .hovercard .hc-title { color: var(--brand-accent); } [data-theme="light"] .hovercard .hc-year { color: #666; } [data-theme="light"] .hovercard .hc-def { color: #555; } [data-theme="light"] .hovercard .hc-status { color: #666; } [data-theme="light"] .term-hover { color: var(--brand-accent); border-bottom-color: rgba(var(--brand-accent-rgb), 0.4); } [data-theme="light"] .person-hover { color: var(--brand-accent); border-bottom-color: rgba(var(--brand-accent-rgb), 0.4); } [data-theme="light"] .hovercard.person-hc { border-left-color: var(--brand-accent); } [data-theme="light"] .phc-affiliations { border-top-color: #D7D7D7; } [data-theme="light"] .phc-affil { color: #333; } [data-theme="light"] .phc-rel { color: #999; } [data-theme="light"] .phc-eco-link { border-top-color: #eee; } [data-theme="light"] .phc-cg-badge { background: rgba(76, 175, 80, 0.15); color: #2E7D32; } [data-theme="light"] .research-hover { color: var(--brand-accent); border-bottom-color: rgba(var(--brand-accent-rgb), 0.4); } [data-theme="light"] .hovercard.research-hc { border-left-color: #E65100; } [data-theme="light"] .rhc-status-text { color: #666; } [data-theme="light"] .rhc-progress-bar { background: rgba(0,0,0,0.08); } [data-theme="light"] .rhc-progress-pct { color: #999; } [data-theme="light"] .rhc-parent { color: #888; } [data-theme="light"] .rhc-orgs { border-top-color: #eee; } [data-theme="light"] .rhc-org-tag { color: #555; background: rgba(0,0,0,0.06); } [data-theme="light"] .rhc-map-link { border-top-color: #eee; } [data-theme="light"] .term-card { background: #fff; border-color: var(--brand-border); } [data-theme="light"] .term-card:hover { border-color: rgba(var(--brand-accent-rgb), 0.4); } [data-theme="light"] .term-card .term-def { color: #555; } [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4 { color: #333333; } [data-theme="light"] a { color: var(--brand-accent); } [data-theme="light"] blockquote, [data-theme="light"] .quote-box { background: #ECECEC; border-left-color: var(--brand-accent); color: #555; } [data-theme="light"] code { background: #ECECEC; color: var(--brand-accent); } [data-theme="light"] footer { border-top-color: var(--brand-border); color: #999; } /* ===== Mobile Responsive Styles ===== */ /* Mobile: 768px and below */ @media (max-width: 768px) { .nav-row { padding: 0 12px; } .nav-brand { font-size: 0.9rem; } .nav-brand .brand-full { display: none; } .nav-vtabs { gap: 2px; } /* Taller padding = bigger touch targets within the fixed-height rows */ .nav-vtab { font-size: 0.78rem; padding: 8px 10px; } .nav-pages { gap: 2px; } .nav-link { font-size: 0.76rem; padding: 7px 9px; } .hovercard { max-width: calc(100vw - 40px); font-size: 0.9rem; } .hovercard .hc-title { font-size: 0.85rem; } .hovercard .hc-def { font-size: 0.75rem; } } /* Mobile: 480px and below (very small screens) */ @media (max-width: 480px) { .nav-row { padding: 0 8px; } .nav-brand { font-size: 0.85rem; } .nav-vtab { font-size: 0.74rem; padding: 8px 8px; } .nav-link { font-size: 0.72rem; padding: 7px 7px; } .theme-toggle { padding: 4px 8px; font-size: 0.9rem; } } /* ===== Knowledge Tracking (Arbital-style) ===== */ .hc-knowledge { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); } .hc-knowledge-label { font-size: 0.7rem; color: rgba(255,255,255,0.5); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .hc-knowledge-buttons { display: flex; gap: 4px; } .hc-knowledge-btn { flex: 1; padding: 4px 8px; font-size: 0.7rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.2s; font-weight: 500; } .hc-knowledge-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); } .hc-knowledge-btn.active { background: #064d49; border-color: #0a7a73; color: #fff; font-weight: 600; } [data-theme="light"] .hc-knowledge { border-top-color: rgba(0,0,0,0.1); } [data-theme="light"] .hc-knowledge-label { color: #666; } [data-theme="light"] .hc-knowledge-btn { border-color: #D7D7D7; background: #f5f5f5; color: #666; } [data-theme="light"] .hc-knowledge-btn:hover { background: #e8e8e8; border-color: #c0c0c0; color: #333; } [data-theme="light"] .hc-knowledge-btn.active { background: #064d49; border-color: #064d49; color: #fff; } /* ===== Term Known Indicator ===== */ .term-hover.term-known { border-bottom: 2px solid var(--brand-accent); } .term-hover.term-known::after { content: '\2713'; font-size: 0.6em; margin-left: 2px; opacity: 0.6; } /* ===== Term Card Knowledge Tracker ===== */ /* Progress bar */ .tk-progress { margin-bottom: 20px; font-family: var(--font-ui); } .tk-progress-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .tk-progress-label { font-size: 0.8rem; font-weight: 600; color: var(--brand-accent); letter-spacing: -0.01em; } .tk-progress-count { font-size: 0.75rem; color: var(--brand-muted); font-weight: 500; } .tk-progress-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; position: relative; } .tk-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #064d49, #0a7a73, #2ecc71); transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); position: relative; } .tk-progress-fill::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, transparent 60%, rgba(255,255,255,0.2)); border-radius: 3px; } .tk-progress-msg { font-size: 0.72rem; color: var(--brand-muted); margin-top: 6px; font-style: italic; min-height: 1.2em; transition: opacity 0.3s; } /* Card knowledge level indicators */ .term-card[data-term] { transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s; position: relative; /* Faint accent baseline so the unrated wall has rhythm; the tk-* tier classes below override this once a card is self-rated. */ border-left: 3px solid rgba(var(--brand-accent-rgb), 0.22); } .term-card.tk-novice { border-left-color: rgba(255,255,255,0.1); } .term-card.tk-learning { border-left-color: #f39c12; box-shadow: inset 3px 0 8px -4px rgba(243,156,18,0.15); } .term-card.tk-familiar { border-left-color: #2ecc71; box-shadow: inset 3px 0 8px -4px rgba(46,204,113,0.15); } .term-card.tk-expert { border-left-color: var(--brand-accent); box-shadow: inset 3px 0 8px -4px rgba(var(--brand-accent-rgb),0.2), 0 0 12px rgba(var(--brand-accent-rgb),0.06); } /* Card button strip */ .tk-buttons { display: flex; gap: 3px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); } .tk-btn { flex: 1; padding: 5px 4px; font-size: 0.65rem; font-family: var(--font-ui); font-weight: 500; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; background: transparent; color: rgba(255,255,255,0.55); cursor: pointer; transition: all 0.15s; text-align: center; line-height: 1.3; } .tk-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); } .tk-btn.active { font-weight: 600; } .tk-btn.active[data-level="novice"] { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); } .tk-btn.active[data-level="learning"] { background: rgba(243,156,18,0.12); border-color: rgba(243,156,18,0.4); color: #f39c12; } .tk-btn.active[data-level="familiar"] { background: rgba(46,204,113,0.12); border-color: rgba(46,204,113,0.4); color: #2ecc71; } .tk-btn.active[data-level="expert"] { background: rgba(var(--brand-accent-rgb),0.15); border-color: rgba(var(--brand-accent-rgb),0.5); color: var(--brand-accent); } /* Level-up animation */ @keyframes tk-levelup { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } } .term-card.tk-animate { animation: tk-levelup 0.35s ease-out; } /* Milestone flash on progress bar */ @keyframes tk-flash { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,0.4); } 50% { box-shadow: 0 0 8px 2px rgba(46,204,113,0.3); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } } .tk-progress-bar.tk-milestone { animation: tk-flash 0.8s ease-out; } /* ===== Light Mode term card knowledge ===== */ [data-theme="light"] .tk-progress-bar { background: rgba(0,0,0,0.06); } [data-theme="light"] .tk-progress-msg { color: #888; } [data-theme="light"] .term-card.tk-novice { border-left-color: #D7D7D7; } [data-theme="light"] .term-card.tk-learning { border-left-color: #e67e22; box-shadow: inset 3px 0 8px -4px rgba(230,126,34,0.15); } [data-theme="light"] .term-card.tk-familiar { border-left-color: #27ae60; box-shadow: inset 3px 0 8px -4px rgba(39,174,96,0.15); } [data-theme="light"] .term-card.tk-expert { border-left-color: #064D49; box-shadow: inset 3px 0 8px -4px rgba(6,77,73,0.2), 0 0 12px rgba(6,77,73,0.06); } [data-theme="light"] .tk-buttons { border-top-color: rgba(0,0,0,0.06); } [data-theme="light"] .tk-btn { border-color: #D7D7D7; color: #999; } [data-theme="light"] .tk-btn:hover { background: rgba(0,0,0,0.03); border-color: #bbb; color: #666; } [data-theme="light"] .tk-btn.active[data-level="novice"] { background: #f5f5f5; border-color: #ccc; color: #777; } [data-theme="light"] .tk-btn.active[data-level="learning"] { background: rgba(230,126,34,0.08); border-color: rgba(230,126,34,0.4); color: #e67e22; } [data-theme="light"] .tk-btn.active[data-level="familiar"] { background: rgba(39,174,96,0.08); border-color: rgba(39,174,96,0.4); color: #27ae60; } [data-theme="light"] .tk-btn.active[data-level="expert"] { background: rgba(6,77,73,0.08); border-color: rgba(6,77,73,0.4); color: #064D49; } /* ===== Knowledge Orientation UI ===== */ .tk-orient { margin-bottom: 24px; font-family: var(--font-ui); border: 1px solid rgba(var(--brand-accent-rgb), 0.2); border-radius: 12px; padding: 20px 24px; background: rgba(var(--brand-accent-rgb), 0.04); overflow: hidden; transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), padding 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s; } .tk-orient-title { font-size: 0.95rem; font-weight: 600; color: var(--brand-accent); margin-bottom: 16px; letter-spacing: -0.01em; } .tk-orient-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tk-orient-card { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid rgba(var(--brand-accent-rgb), 0.15); border-radius: 8px; background: rgba(255,255,255,0.03); cursor: pointer; transition: all 0.2s; } .tk-orient-card:hover { border-color: rgba(var(--brand-accent-rgb), 0.4); background: rgba(var(--brand-accent-rgb), 0.08); transform: translateY(-1px); } .tk-orient-card.selected { border-color: var(--brand-accent); background: rgba(var(--brand-accent-rgb), 0.12); box-shadow: 0 0 0 1px var(--brand-accent); } .tk-orient-card-label { font-size: 0.82rem; font-weight: 600; color: var(--brand-text); margin-bottom: 4px; } .tk-orient-card-desc { font-size: 0.72rem; color: var(--brand-muted); line-height: 1.4; } /* Collapsed state */ .tk-orient-collapsed { display: none; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--brand-muted); padding: 2px 0; } .tk-orient-collapsed-label { font-weight: 500; color: var(--brand-text); } .tk-orient-collapsed-action { color: var(--brand-accent); cursor: pointer; font-weight: 500; border: none; background: none; font-family: var(--font-ui); font-size: 0.8rem; padding: 0; text-decoration: underline; text-underline-offset: 2px; } .tk-orient-collapsed-action:hover { opacity: 0.8; } .tk-orient.collapsed { padding: 14px 24px; } .tk-orient.collapsed .tk-orient-title, .tk-orient.collapsed .tk-orient-grid { display: none; } .tk-orient.collapsed .tk-orient-collapsed { display: flex; } /* Mobile: single column */ @media (max-width: 480px) { .tk-orient-grid { grid-template-columns: 1fr; } .tk-orient { padding: 16px; } } /* ===== Light Mode orientation ===== */ [data-theme="light"] .tk-orient { background: #fff; border-color: var(--brand-border); } [data-theme="light"] .tk-orient-card { background: #fafafa; border-color: #e0e0e0; } [data-theme="light"] .tk-orient-card:hover { background: rgba(6,77,73,0.04); border-color: rgba(6,77,73,0.3); } [data-theme="light"] .tk-orient-card.selected { background: rgba(6,77,73,0.06); border-color: #064D49; box-shadow: 0 0 0 1px #064D49; } [data-theme="light"] .tk-orient-card-label { color: #333; } [data-theme="light"] .tk-orient-card-desc { color: #777; } /* ===== Orientation Recommendation ===== */ .tk-orient-rec { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 0.78rem; color: var(--brand-muted); } .tk-orient-rec a { color: var(--brand-accent); text-decoration: none; font-weight: 500; } .tk-orient-rec a:hover { text-decoration: underline; text-underline-offset: 2px; } /* ===== Mobile Nav Overflow ===== */ @media (max-width: 900px) { .nav-vtabs, .nav-pages { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-vtabs::-webkit-scrollbar, .nav-pages::-webkit-scrollbar { display: none; } .nav-vtab, .nav-link { white-space: nowrap; flex-shrink: 0; } /* Legacy */ .nav-links { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } /* Right-edge fade hints that the sub-nav scrolls horizontally (the scrollbar is hidden, so without this the row looks clipped). */ .nav-row-pages::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; background: linear-gradient(to right, transparent, var(--brand-nav-bg)); pointer-events: none; z-index: 1; } } /* ===== Inline Term Pills ===== */ .term-pill { display: inline; color: var(--brand-accent); font-weight: 600; cursor: pointer; border-bottom: 2px dotted rgba(var(--brand-accent-rgb), 0.5); position: relative; transition: border-color 0.2s, color 0.2s; font-family: var(--font-ui); font-size: 0.92em; } .term-pill:hover { border-bottom-color: var(--brand-accent); } .term-pill.active { border-bottom-style: solid; border-bottom-color: var(--brand-accent); } .term-pill-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--brand-hovercard-bg); border: 1px solid rgba(var(--brand-accent-rgb), 0.3); border-radius: 8px; padding: 8px 12px; font-size: 0.78rem; font-weight: 400; color: #ccc; line-height: 1.4; max-width: 280px; min-width: 180px; white-space: normal; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 2000; opacity: 0; transition: opacity 0.15s; } .term-pill:hover .term-pill-tooltip { opacity: 1; } /* ===== Inline Term Cards (expandable) ===== */ .inline-term-card { background: rgba(var(--brand-accent-rgb), 0.04); border: 1px solid rgba(var(--brand-accent-rgb), 0.2); border-radius: 12px; padding: 0; margin: 12px 0 16px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; font-family: var(--font-ui); } .inline-term-card.expanded { max-height: 600px; opacity: 1; padding: 16px 20px; } .itc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .itc-title { font-size: 0.95rem; font-weight: 700; color: var(--brand-accent); } .itc-year { font-size: 0.72rem; color: var(--brand-muted); font-weight: 400; } .itc-close { margin-left: auto; background: none; border: none; color: var(--brand-muted); font-size: 1.2rem; cursor: pointer; padding: 0 4px; line-height: 1; transition: color 0.2s; } .itc-close:hover { color: #fff; } .itc-tabs { display: flex; gap: 4px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(var(--brand-accent-rgb), 0.1); } .itc-tab { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: var(--brand-muted); padding: 4px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s; } .itc-tab:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); } .itc-tab.active { background: rgba(var(--brand-accent-rgb), 0.12); border-color: rgba(var(--brand-accent-rgb), 0.3); color: var(--brand-accent); font-weight: 600; } .itc-content { font-size: 0.88rem; line-height: 1.6; color: #bbb; margin-bottom: 8px; } .itc-crux-link { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(var(--brand-accent-rgb), 0.1); } .itc-crux-link a { color: var(--brand-accent); font-size: 0.8rem; font-weight: 500; text-decoration: none; opacity: 0.8; transition: opacity 0.2s; } .itc-crux-link a:hover { opacity: 1; text-decoration: underline; } .itc-knowledge { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(var(--brand-accent-rgb), 0.1); flex-wrap: wrap; } .itc-knowledge-label { font-size: 0.72rem; color: var(--brand-muted); font-weight: 500; } .itc-knowledge-btn { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12); color: var(--brand-muted); padding: 3px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .itc-knowledge-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); } .itc-knowledge-btn.active { background: rgba(var(--brand-accent-rgb), 0.15); border-color: rgba(var(--brand-accent-rgb), 0.4); color: var(--brand-accent); font-weight: 600; } /* Light mode overrides for inline term system */ [data-theme="light"] .term-pill { color: var(--brand-accent); border-bottom-color: rgba(var(--brand-accent-rgb), 0.4); } [data-theme="light"] .term-pill-tooltip { background: #fff; border-color: var(--brand-border); color: #555; box-shadow: 0 4px 16px rgba(0,0,0,0.1); } [data-theme="light"] .inline-term-card { background: #fff; border-color: var(--brand-border); } [data-theme="light"] .itc-title { color: var(--brand-accent); } [data-theme="light"] .itc-close:hover { color: #333; } [data-theme="light"] .itc-tab { background: #f5f5f5; border-color: #e0e0e0; color: #888; } [data-theme="light"] .itc-tab:hover { background: #eee; color: #555; } [data-theme="light"] .itc-tab.active { background: rgba(var(--brand-accent-rgb), 0.08); border-color: rgba(var(--brand-accent-rgb), 0.3); color: var(--brand-accent); } [data-theme="light"] .itc-content { color: #555; } [data-theme="light"] .itc-knowledge-btn { border-color: #e0e0e0; background: #f8f8f8; color: #888; } [data-theme="light"] .itc-knowledge-btn:hover { background: #eee; color: #555; } [data-theme="light"] .itc-knowledge-btn.active { background: rgba(var(--brand-accent-rgb), 0.08); border-color: rgba(var(--brand-accent-rgb), 0.4); color: var(--brand-accent); } @media (max-width: 768px) { .term-pill-tooltip { display: none; } .itc-tabs { flex-wrap: wrap; } .itc-knowledge { flex-wrap: wrap; } } /* ===== Under Construction Banner ===== */ .under-construction-banner { position: fixed; top: var(--nav-total-height, 80px); left: 0; right: 0; z-index: 1900; display: flex; align-items: center; gap: 10px; padding: 8px 20px; background: rgba(243, 156, 18, 0.12); border-bottom: 1px solid rgba(243, 156, 18, 0.3); font-family: var(--font-ui); font-size: 0.82rem; color: #f5c842; backdrop-filter: blur(8px); transition: opacity 0.3s, max-height 0.3s, padding 0.3s, margin-bottom 0.3s; max-height: 60px; overflow: hidden; } .uc-icon { font-size: 1rem; flex-shrink: 0; } .uc-text { flex: 1; min-width: 0; } .uc-text strong { color: #f5c842; font-weight: 600; } .uc-expires { font-size: 0.72rem; color: rgba(245, 200, 66, 0.6); white-space: nowrap; flex-shrink: 0; } .uc-dismiss { background: none; border: none; color: rgba(245, 200, 66, 0.6); font-size: 1.1rem; cursor: pointer; padding: 0 4px; line-height: 1; transition: color 0.2s; flex-shrink: 0; } .uc-dismiss:hover { color: #f5c842; } /* Light mode */ [data-theme="light"] .under-construction-banner { background: rgba(243, 156, 18, 0.08); border-bottom-color: rgba(243, 156, 18, 0.25); color: #b37400; } [data-theme="light"] .uc-text strong { color: #b37400; } [data-theme="light"] .uc-expires { color: rgba(179, 116, 0, 0.5); } [data-theme="light"] .uc-dismiss { color: rgba(179, 116, 0, 0.5); } [data-theme="light"] .uc-dismiss:hover { color: #b37400; } /* Mobile */ @media (max-width: 768px) { .under-construction-banner { font-size: 0.76rem; padding: 6px 12px; gap: 6px; } .uc-expires { display: none; } } /* ===== Text Color Utilities (theme-adaptive) ===== */ /* Dark mode (default) */ .t-primary { color: #fff; } .t-90 { color: rgba(255,255,255,0.9); } .t-85 { color: rgba(255,255,255,0.85); } .t-80 { color: rgba(255,255,255,0.8); } .t-70 { color: rgba(255,255,255,0.7); } .t-60 { color: rgba(255,255,255,0.6); } .t-50 { color: rgba(255,255,255,0.5); } .t-40 { color: rgba(255,255,255,0.4); } .t-35 { color: rgba(255,255,255,0.35); } .t-30 { color: rgba(255,255,255,0.3); } .t-20 { color: rgba(255,255,255,0.2); } /* Light mode overrides */ [data-theme="light"] .t-primary { color: #1a1a1a; } [data-theme="light"] .t-90 { color: rgba(0,0,0,0.9); } [data-theme="light"] .t-85 { color: rgba(0,0,0,0.85); } [data-theme="light"] .t-80 { color: rgba(0,0,0,0.75); } [data-theme="light"] .t-70 { color: rgba(0,0,0,0.65); } [data-theme="light"] .t-60 { color: rgba(0,0,0,0.55); } [data-theme="light"] .t-50 { color: rgba(0,0,0,0.5); } [data-theme="light"] .t-40 { color: rgba(0,0,0,0.4); } [data-theme="light"] .t-35 { color: rgba(0,0,0,0.35); } [data-theme="light"] .t-30 { color: rgba(0,0,0,0.3); } [data-theme="light"] .t-20 { color: rgba(0,0,0,0.2); } /* =================================================================== Shared Utility Classes Extracted from inline styles across all pages. Every color/bg/border class has a [data-theme="light"] override. =================================================================== */ /* ----- Link Styles ----- */ /* .link-muted — 53× color: var(--brand-accent); text-decoration: underline */ .link-muted { color: var(--brand-accent); text-decoration: underline; } /* .link-inherit — 27× color: inherit; text-decoration: underline */ .link-inherit { color: inherit; text-decoration: underline; } /* .link-yudkowsky — 13× color: #e8a87c; text-decoration: underline */ .link-yudkowsky { color: #e8a87c; text-decoration: underline; } /* .link-muted-sm — 6× color: var(--brand-accent); text-decoration: underline; font-size: 0.9rem */ .link-muted-sm { color: var(--brand-accent); text-decoration: underline; font-size: 0.9rem; } /* .link-muted-lg — 3× color: var(--brand-accent); text-decoration: underline; font-size: 1rem; font-weight: 600 */ .link-muted-lg { color: var(--brand-accent); text-decoration: underline; font-size: 1rem; font-weight: 600; } /* .link-muted-bold — 4× color: var(--brand-accent); text-decoration: underline; font-weight: 600 */ .link-muted-bold { color: var(--brand-accent); text-decoration: underline; font-weight: 600; } /* .link-dotted-muted — 5× color: var(--brand-accent); text-decoration: none; border-bottom: 1px dotted rgba(var(--brand-accent-rgb),0.5) */ .link-dotted-muted { color: var(--brand-accent); text-decoration: none; border-bottom: 1px dotted rgba(var(--brand-accent-rgb),0.5); } /* .link-dotted-info — 9× color: #7eb8da; text-decoration: none; border-bottom: 1px dotted rgba(126,184,218,0.4) */ .link-dotted-info { color: #7eb8da; text-decoration: none; border-bottom: 1px dotted rgba(126,184,218,0.4); } /* .link-dotted-danger — 5× color: #e74c3c; text-decoration: none; border-bottom: 1px dotted rgba(231,76,60,0.5) */ .link-dotted-danger { color: #e74c3c; text-decoration: none; border-bottom: 1px dotted rgba(231,76,60,0.5); } /* .link-dotted-success — 5× color: #4CAF50; text-decoration: none; border-bottom: 1px dotted rgba(76,175,80,0.5) */ .link-dotted-success { color: #4CAF50; text-decoration: none; border-bottom: 1px dotted rgba(76,175,80,0.5); } /* .link-brand-subtle — 4× color:var(--brand-accent); text-decoration:none; border-bottom:1px solid rgba(var(--brand-accent-rgb),0.3); padding-bottom:1px */ .link-brand-subtle { color: var(--brand-accent); text-decoration: none; border-bottom: 1px solid rgba(var(--brand-accent-rgb),0.3); padding-bottom: 1px; } /* ----- Text Color Utilities ----- */ /* .text-brand — 40× color:var(--brand-accent) */ .text-brand { color: var(--brand-accent); } /* .text-danger — 28× color: #e74c3c */ .text-danger { color: #e74c3c; } /* .text-warning — 22× color: #f39c12 */ .text-warning { color: #f39c12; } /* .text-secondary — 16× color: var(--brand-accent) */ .text-secondary { color: var(--brand-accent); } /* .text-info — 15× color: #7eb8da */ .text-info { color: #7eb8da; } /* .text-dim — 13× color: rgba(var(--brand-accent-rgb),0.6) */ .text-dim { color: rgba(var(--brand-accent-rgb),0.6); } /* .text-muted — 13× color: #ccc */ .text-muted { color: #ccc; } /* .text-success — 11× color: #2ecc71 */ .text-success { color: #2ecc71; } /* .text-coral — 9× color:#cc6655 */ .text-coral { color: #cc6655; } /* .text-purple — 8× color: #9b59b6 */ .text-purple { color: #9b59b6; } /* .text-teal — 7× color: #7ec8c8 */ .text-teal { color: #7ec8c8; } /* .text-blue — 7× color: #3498db */ .text-blue { color: #3498db; } /* .text-warning-dim — 6× color: rgba(243,156,18,0.7) */ .text-warning-dim { color: rgba(243,156,18,0.7); } /* .text-mint — 6× color:#5fb89e */ .text-mint { color: #5fb89e; } /* .text-dim-70 — 3× color: rgba(var(--brand-accent-rgb),0.7) */ .text-dim-70 { color: rgba(var(--brand-accent-rgb),0.7); } /* .text-gold — 5× color: #f4d03f */ .text-gold { color: #f4d03f; } /* .text-slate — 5× color: #8b9dc3 */ .text-slate { color: #8b9dc3; } /* .text-sage — 5× color: #7eb8a0 */ .text-sage { color: #7eb8a0; } /* .text-cyan — 4× color: #00bcd4 */ .text-cyan { color: #00bcd4; } /* .text-gold-warm — 4× color: #d4a843; font-weight: 500 */ .text-gold-warm { color: #d4a843; font-weight: 500; } /* .text-caramel — 3× color:#d4884e */ .text-caramel { color: #d4884e; } /* .text-orange — color: #e67e22 */ .text-orange { color: #e67e22; } /* .text-teal-bright — color: #1abc9c */ .text-teal-bright { color: #1abc9c; } /* ----- Typography ----- */ /* .italic — 30× font-style: italic (replacing invalid style="italic") */ .italic { font-style: italic; } /* .body-sm — 21× font-size: 0.8rem; color: #ccc; line-height: 1.5; margin: 0 */ .body-sm { font-size: 0.8rem; color: #ccc; line-height: 1.5; margin: 0; } /* .body-sm-padded — 8× font-size: 0.8rem; color: #ccc; line-height: 1.6; margin: 0; padding-left: 16px */ .body-sm-padded { font-size: 0.8rem; color: #ccc; line-height: 1.6; margin: 0; padding-left: 16px; } /* .body-sm-aaa — 4× font-size: 0.8rem; color: #aaa; line-height: 1.5; margin: 0 */ .body-sm-aaa { font-size: 0.8rem; color: #aaa; line-height: 1.5; margin: 0; } /* .body-article — 10× color: #ccc; font-size: 0.95rem; line-height: 1.7; margin-bottom: 16px */ .body-article { color: #ccc; font-size: 0.95rem; line-height: 1.7; margin-bottom: 16px; } /* .body-article-compact — 4× color: #ccc; font-size: 0.95rem; line-height: 1.6 */ .body-article-compact { color: #ccc; font-size: 0.95rem; line-height: 1.6; } /* .body-muted-mb — 10× color: #ccc; margin-bottom: 16px */ .body-muted-mb { color: #ccc; margin-bottom: 16px; } /* .text-head-light — 6× color: #ecf0f1; font-size: 1.05rem */ .text-head-light { color: #ecf0f1; font-size: 1.05rem; } /* .text-head-secondary — 4× color: var(--brand-accent); font-size: 1.3rem */ .text-head-secondary { color: var(--brand-accent); font-size: 1.3rem; } /* .text-danger-label — 4× color: #e74c3c; font-weight: bold; font-size: 0.8rem; margin-bottom: 6px */ .text-danger-label { color: #e74c3c; font-weight: bold; font-size: 0.8rem; margin-bottom: 6px; } /* .text-subtitle — 4× color: #aaa; font-size: 0.9rem; margin-bottom: 12px; font-style: italic */ .text-subtitle { color: #aaa; font-size: 0.9rem; margin-bottom: 12px; font-style: italic; } /* .text-hero-sub — 3× font-size: 1.1rem; color: #ccc; line-height: 1.8; max-width: 760px; margin: 0 auto 20px */ .text-hero-sub { font-size: 1.1rem; color: #ccc; line-height: 1.8; max-width: 760px; margin: 0 auto 20px; } /* .text-page-sub — 3× font-size: 0.92rem; color: rgba(var(--brand-accent-rgb),0.55); font-family: var(--font-ui); text-align: center; line-height: 1.6 */ .text-page-sub { font-size: 0.92rem; color: rgba(var(--brand-accent-rgb),0.55); font-family: var(--font-ui); text-align: center; line-height: 1.6; } /* .text-bbb-indent — 8× color: #bbb; margin-left: 20px; line-height: 1.8 */ .text-bbb-indent { color: #bbb; margin-left: 20px; line-height: 1.8; } /* .text-article-sm — 4× font-size: 0.95rem; color: #bbb; margin-bottom: 0 */ .text-article-sm { font-size: 0.95rem; color: #bbb; margin-bottom: 0; } /* .text-bbb-sm — 3× color: #bbb; font-size: 0.75rem; margin: 0 */ .text-bbb-sm { color: #bbb; font-size: 0.75rem; margin: 0; } /* .text-caption — 4× font-size: 0.75rem; color: #ccc; margin: 4px 0 0 0 */ .text-caption { font-size: 0.75rem; color: #ccc; margin: 4px 0 0 0; } /* .text-note-sm — 3× font-size: 0.7rem; color: #aaa */ .text-note-sm { font-size: 0.7rem; color: #aaa; } /* .text-list-muted — 3× color: #ccc; font-size: 0.9rem; line-height: 1.8; margin: 0 0 16px 20px; padding: 0 */ .text-list-muted { color: #ccc; font-size: 0.9rem; line-height: 1.8; margin: 0 0 16px 20px; padding: 0; } /* .text-ccc-sm — 3× color: #ccc; font-size: 0.8rem; margin: 0 */ .text-ccc-sm { color: #ccc; font-size: 0.8rem; margin: 0; } /* .font-xs — 10× font-size: 0.6rem */ .font-xs { font-size: 0.6rem; } /* .font-sm — 8× font-size: 0.8rem (standalone) */ .font-sm { font-size: 0.8rem; } /* .font-085 — 3× font-size: 0.85rem (standalone) */ .font-085 { font-size: 0.85rem; } /* .font-09 — 4× font-size: 0.9rem (standalone) */ .font-09 { font-size: 0.9rem; } /* .body-compact — 4× font-size: 0.78rem; line-height: 1.6; margin: 0; padding-left: 14px */ .body-compact { font-size: 0.78rem; line-height: 1.6; margin: 0; padding-left: 14px; } /* .body-xs — 4× font-size: 0.72rem; line-height: 1.4 */ .body-xs { font-size: 0.72rem; line-height: 1.4; } /* .body-list-sm — 3× font-size:0.9rem;line-height:1.6;margin:0.5rem 0;padding-left:1.2rem */ .body-list-sm { font-size: 0.9rem; line-height: 1.6; margin: 0.5rem 0; padding-left: 1.2rem; } /* .text-sm-note — 3× font-size: 0.75rem; font-weight: 400; margin-left: 0.5rem */ .text-sm-note { font-size: 0.75rem; font-weight: 400; margin-left: 0.5rem; } /* .font-heading-sm — 3× font-size: 0.82rem; color: #bbb; margin: 0 0 8px */ .font-heading-sm { font-size: 0.82rem; color: #bbb; margin: 0 0 8px; } /* .text-subhead-secondary — 3× font-size: 0.85rem; color: var(--brand-accent); margin: 0 0 8px; font-weight: 600 */ .text-subhead-secondary { font-size: 0.85rem; color: var(--brand-accent); margin: 0 0 8px; font-weight: 600; } /* .text-section-desc — 5× font-size: 0.85rem; color: var(--brand-muted); margin-bottom: 12px; font-family: var(--font-ui); border-left: 2px solid rgba(var(--brand-accent-rgb),0.2); padding-left: 12px */ .text-section-desc { font-size: 0.85rem; color: var(--brand-muted); margin-bottom: 12px; font-family: var(--font-ui); border-left: 2px solid rgba(var(--brand-accent-rgb),0.2); padding-left: 12px; } /* .text-section-desc-sm — 3× font-size: 0.85rem; color: var(--brand-muted); margin-bottom: 10px; font-family: var(--font-ui); border-left: 2px solid rgba(var(--brand-accent-rgb),0.2); padding-left: 12px */ .text-section-desc-sm { font-size: 0.85rem; color: var(--brand-muted); margin-bottom: 10px; font-family: var(--font-ui); border-left: 2px solid rgba(var(--brand-accent-rgb),0.2); padding-left: 12px; } /* .font-heading-lg — 4× font-size: 1.5rem; margin-bottom: 8px */ .font-heading-lg { font-size: 1.5rem; margin-bottom: 8px; } /* .text-purple-heading — 4× color: #9b59b6; font-size: 1.2rem; margin-bottom: 16px */ .text-purple-heading { color: #9b59b6; font-size: 1.2rem; margin-bottom: 16px; } /* .text-cyan-heading — 4× color: #00bcd4; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px */ .text-cyan-heading { color: #00bcd4; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; } /* .text-silver-heading — 3× color: #bdc3c7; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px */ .text-silver-heading { color: #bdc3c7; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; } /* .text-blue-heading — 3× color: #5dade2; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px */ .text-blue-heading { color: #5dade2; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; } /* .text-sub-md — 5× font-size: 0.88rem; margin-bottom: 18px */ .text-sub-md { font-size: 0.88rem; margin-bottom: 18px; } /* .font-09-mb — 4× font-size: 0.9rem; margin-bottom: 8px */ .font-09-mb { font-size: 0.9rem; margin-bottom: 8px; } /* .body-sm-line-compact — 3× font-size: 0.8rem; margin: 0 0 0.75rem 0; line-height: 1.4 */ .body-sm-line-compact { font-size: 0.8rem; margin: 0 0 0.75rem 0; line-height: 1.4; } /* .body-85-line — 3× font-size: 0.85rem; line-height: 1.7; margin: 0; padding-left: 16px */ .body-85-line { font-size: 0.85rem; line-height: 1.7; margin: 0; padding-left: 16px; } /* .body-article-09 — article body at 0.9rem */ .body-article-09 { color: #ccc; font-size: 0.9rem; line-height: 1.7; margin-bottom: 16px; } /* .body-detail — 0.82rem annotation text */ .body-detail { font-size: 0.82rem; color: #aaa; line-height: 1.6; margin-top: 12px; } /* .text-brand-md — 0.95rem brand accent */ .text-brand-md { font-size: 0.95rem; color: var(--brand-accent); margin: 0; } /* .text-brand-sm — 0.9rem brand accent */ .text-brand-sm { font-size: 0.9rem; color: var(--brand-accent); margin: 0; } /* .panel-desc-mb — panel description with bottom margin */ .panel-desc-mb { margin-bottom: 12px; font-size: 0.85rem; } /* .heading-danger-sm — small danger-colored heading */ .heading-danger-sm { color: #e74c3c; font-size: 0.95rem; margin-bottom: 8px; } /* .heading-success-sm — small success-colored heading */ .heading-success-sm { color: #2ecc71; font-size: 0.95rem; margin-bottom: 8px; } /* .heading-blue-sm — small blue-colored heading */ .heading-blue-sm { color: #3498db; font-size: 0.95rem; margin-bottom: 8px; } /* .heading-secondary-sm — small secondary-colored heading */ .heading-secondary-sm { color: var(--brand-accent); font-size: 0.95rem; margin-bottom: 8px; } /* .blockquote-purple — purple-accented blockquote */ .blockquote-purple { border-left: 3px solid #9b59b6; padding-left: 16px; margin: 16px 0; font-style: italic; color: #bbb; font-size: 0.9rem; } /* ----- Section Labels / Category Tags ----- */ /* .section-label-yudkowsky — 9× font-size: 0.7rem; font-weight: 700; color: #e8a87c; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px */ .section-label-yudkowsky { font-size: 0.7rem; font-weight: 700; color: #e8a87c; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } /* .section-label-secondary — 6× font-size: 0.7rem; font-weight: 700; color: var(--brand-accent); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px */ .section-label-secondary { font-size: 0.7rem; font-weight: 700; color: var(--brand-accent); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } /* .section-label-warning — 5× font-size: 0.7rem; font-weight: 700; color: #f39c12; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px */ .section-label-warning { font-size: 0.7rem; font-weight: 700; color: #f39c12; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } /* .section-label-success — 5× font-size: 0.7rem; font-weight: 700; color: #2ecc71; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px */ .section-label-success { font-size: 0.7rem; font-weight: 700; color: #2ecc71; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } /* .section-label-cyan — 3× font-size: 0.7rem; font-weight: 700; color: #00bcd4; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px */ .section-label-cyan { font-size: 0.7rem; font-weight: 700; color: #00bcd4; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } /* .section-label-danger — danger-colored section label */ .section-label-danger { font-size: 0.7rem; font-weight: 700; color: #e74c3c; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } /* ----- Spacing Utilities ----- */ /* .mb-6 — 15× margin-bottom: 6px */ .mb-6 { margin-bottom: 6px; } /* .mb-8 — 9× margin-bottom: 8px */ .mb-8 { margin-bottom: 8px; } /* .mb-4 — 6× margin-bottom: 4px */ .mb-4 { margin-bottom: 4px; } /* .mb-12 — 4× margin-bottom: 12px */ .mb-12 { margin-bottom: 12px; } /* .mb-40 — 4× margin-bottom: 40px */ .mb-40 { margin-bottom: 40px; } /* .mb-0 — 3× margin-bottom: 0 */ .mb-0 { margin-bottom: 0; } /* .mt-12 — 6× margin-top: 12px */ .mt-12 { margin-top: 12px; } /* .mt-20 — 4× margin-top: 20px */ .mt-20 { margin-top: 20px; } /* .mt-8 — 3× margin-top: 8px */ .mt-8 { margin-top: 8px; } /* .mt-24 — margin-top: 24px */ .mt-24 { margin-top: 24px; } /* .mb-16 — margin-bottom: 16px */ .mb-16 { margin-bottom: 16px; } /* .mb-50 — margin-bottom: 50px */ .mb-50 { margin-bottom: 50px; } /* .m-0 — 4× margin: 0 */ .m-0 { margin: 0; } /* .mx-8 — 3× margin: 0 8px */ .mx-8 { margin: 0 8px; } /* ----- List / Indent Patterns ----- */ /* .list-indent — 21× margin: 0.75rem 0; padding-left: 1.5rem */ .list-indent { margin: 0.75rem 0; padding-left: 1.5rem; } /* .list-indent-lg — 13× margin: 0.5rem 0 1rem; padding-left: 1.5rem */ .list-indent-lg { margin: 0.5rem 0 1rem; padding-left: 1.5rem; } /* .list-indent-md — 8× margin: 1rem 0; padding-left: 1.5rem */ .list-indent-md { margin: 1rem 0; padding-left: 1.5rem; } /* ----- Layout Utilities ----- */ /* .text-center — 5× text-align: center */ .text-center { text-align: center; } /* .d-block — 4× display: block */ .d-block { display: block; } /* .d-none — 3× display: none */ .d-none { display: none; } /* .d-inline — 3× display: inline */ .d-inline { display: inline; } /* .flex-1 — 3× flex: 1 */ .flex-1 { flex: 1; } /* .flex-center — 3× flex:1; text-align:center */ .flex-center { flex: 1; text-align: center; } /* .tag-row — 5× font-size: 0.8rem; margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap */ .tag-row { font-size: 0.8rem; margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } /* .row-gap-16 — 3× display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px */ .row-gap-16 { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; } /* .text-center-mb — 3× text-align: center; margin-bottom: 32px */ .text-center-mb { text-align: center; margin-bottom: 32px; } /* .border-bottom-subtle — 5× border-bottom: 1px solid rgba(255,255,255,0.1) */ .border-bottom-subtle { border-bottom: 1px solid rgba(255,255,255,0.1); } /* .input-standard — 4× width: 100%; padding: 0.6rem 1rem; font-size: 0.85rem */ .input-standard { width: 100%; padding: 0.6rem 1rem; font-size: 0.85rem; } /* .section-padded — 3× padding: 40px 20px; border-bottom: 1px solid rgba(255,255,255,0.15) */ .section-padded { padding: 40px 20px; border-bottom: 1px solid rgba(255,255,255,0.15); } /* .container-narrow — 3× max-width: 900px; margin: 0 auto */ .container-narrow { max-width: 900px; margin: 0 auto; } /* .opacity-70 — 3× margin-left: 8px; opacity: 0.7 */ .opacity-70 { margin-left: 8px; opacity: 0.7; } /* ----- Callout / Info Boxes ----- */ /* .callout-yudkowsky — 9× background: rgba(232,168,124,0.08); border-left: 3px solid rgba(232,168,124,0.4); padding: 10px; margin-top: 14px; border-radius: 4px */ .callout-yudkowsky { background: rgba(232,168,124,0.08); border-left: 3px solid rgba(232,168,124,0.4); padding: 10px; margin-top: 14px; border-radius: 4px; } /* .callout-brand — 6× background: rgba(var(--brand-accent-rgb), 0.1); border: 1px solid rgba(var(--brand-accent-rgb), 0.3); border-radius: 8px; padding: 12px; margin-top: 14px */ .callout-brand { background: rgba(var(--brand-accent-rgb), 0.1); border: 1px solid rgba(var(--brand-accent-rgb), 0.3); border-radius: 8px; padding: 12px; margin-top: 14px; } /* .callout-brand-lg — 3× background: rgba(var(--brand-accent-rgb), 0.08); border: 1px solid rgba(var(--brand-accent-rgb), 0.25); border-radius: 12px; padding: 24px; margin: 20px 0 */ .callout-brand-lg { background: rgba(var(--brand-accent-rgb), 0.08); border: 1px solid rgba(var(--brand-accent-rgb), 0.25); border-radius: 12px; padding: 24px; margin: 20px 0; } /* .callout-note — 5× (14 combined) font-size: 0.85rem; margin-top: 16–20px; padding: 10px; background: rgba(var(--brand-accent-rgb),0.08); border-left: 3px solid rgba(var(--brand-accent-rgb),0.4); border-radius: 4px */ .callout-note { font-size: 0.85rem; padding: 10px; background: rgba(var(--brand-accent-rgb),0.08); border-left: 3px solid rgba(var(--brand-accent-rgb),0.4); border-radius: 4px; } .callout-note-mt16 { font-size: 0.85rem; margin-top: 16px; padding: 10px; background: rgba(var(--brand-accent-rgb),0.08); border-left: 3px solid rgba(var(--brand-accent-rgb),0.4); border-radius: 4px; } .callout-note-mt20 { font-size: 0.85rem; margin-top: 20px; padding: 10px; background: rgba(var(--brand-accent-rgb),0.08); border-left: 3px solid rgba(var(--brand-accent-rgb),0.4); border-radius: 4px; } .callout-note-mt14 { font-size: 0.85rem; margin-top: 14px; padding: 10px; background: rgba(var(--brand-accent-rgb),0.08); border-left: 3px solid rgba(var(--brand-accent-rgb),0.4); border-radius: 4px; } /* .callout-warning — 4× background: rgba(243, 156, 18, 0.08); border-left: 3px solid #f39c12; padding: 12px; margin-top: 14px; border-radius: 0 4px 4px 0 */ .callout-warning { background: rgba(243, 156, 18, 0.08); border-left: 3px solid #f39c12; padding: 12px; margin-top: 14px; border-radius: 0 4px 4px 0; } /* .callout-success — 3× background: rgba(46, 204, 113, 0.1); border-left: 3px solid #2ecc71; padding: 10px 12px; margin-top: 14px; border-radius: 0 4px 4px 0 */ .callout-success { background: rgba(46, 204, 113, 0.1); border-left: 3px solid #2ecc71; padding: 10px 12px; margin-top: 14px; border-radius: 0 4px 4px 0; } /* .callout-cyan — 3× background: rgba(0,188,212,0.08); border-left: 3px solid rgba(0,188,212,0.5); padding: 12px; margin-top: 14px; border-radius: 0 4px 4px 0 */ .callout-cyan { background: rgba(0,188,212,0.08); border-left: 3px solid rgba(0,188,212,0.5); padding: 12px; margin-top: 14px; border-radius: 0 4px 4px 0; } /* .callout-danger — danger-colored left-border callout */ .callout-danger { background: rgba(231, 76, 60, 0.08); border-left: 3px solid rgba(231, 76, 60, 0.5); padding: 12px; margin-top: 14px; border-radius: 0 4px 4px 0; } /* .callout-success-alt — success-colored left-border callout (solid border) */ .callout-success-alt { background: rgba(46, 204, 113, 0.08); border-left: 3px solid #2ecc71; padding: 12px; margin-top: 14px; border-radius: 0 4px 4px 0; } /* .callout-brand-sm — compact brand callout */ .callout-brand-sm { background: rgba(var(--brand-accent-rgb), 0.08); border: 1px solid rgba(var(--brand-accent-rgb), 0.25); border-radius: 8px; padding: 16px; margin-top: 16px; } /* .card-subtle — 4× background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 14px; font-size: 0.8rem; color: #ccc */ .card-subtle { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 14px; font-size: 0.8rem; color: #ccc; } /* .card-danger — 3× flex: 1; min-width: 200px; padding: 14px; background: rgba(231,76,60,0.08); border-radius: 8px */ .card-danger { flex: 1; min-width: 200px; padding: 14px; background: rgba(231,76,60,0.08); border-radius: 8px; } /* .card-center-subtle — 3× background: rgba(255,255,255,0.04); border-radius: 6px; padding: 10px 12px; text-align: center */ .card-center-subtle { background: rgba(255,255,255,0.04); border-radius: 6px; padding: 10px 12px; text-align: center; } /* .panel-padded — 4× padding: 12px 15px */ .panel-padded { padding: 12px 15px; } /* .panel-padded-muted — 4× padding: 12px 15px; color: #ccc */ .panel-padded-muted { padding: 12px 15px; color: #ccc; } /* .footer-hero — 3× max-width: 900px; margin: 40px auto 60px; padding: 20px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; text-align: center */ .footer-hero { max-width: 900px; margin: 40px auto 60px; padding: 20px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; text-align: center; } /* ----- Background Color Utilities ----- */ /* .bg-success — 5× background: #2ecc71 */ .bg-success { background: #2ecc71; } /* .bg-warning-80 — 4× background: rgba(243, 156, 18, 0.8) */ .bg-warning-80 { background: rgba(243, 156, 18, 0.8); } /* .bg-purple-soft — 6× background: rgba(155,89,182,0.2); color: #b39ddb */ .bg-purple-soft { background: rgba(155,89,182,0.2); color: #b39ddb; } /* .bg-warning-30 — background: rgba(243, 156, 18, 0.3) */ .bg-warning-30 { background: rgba(243, 156, 18, 0.3); } /* .bg-success-soft — background: rgba(46, 204, 113, 0.2); color: #2ecc71 */ .bg-success-soft { background: rgba(46, 204, 113, 0.2); color: #2ecc71; } /* .bg-green-dark — 3× background:#2f4a3f */ .bg-green-dark { background: #2f4a3f; } /* .bg-teal-dark — 3× background: #3d8b6e */ .bg-teal-dark { background: #3d8b6e; } /* ============================ Light Mode Overrides ============================ */ /* --- Links --- */ [data-theme="light"] .link-muted { color: #064D49; } [data-theme="light"] .link-yudkowsky { color: #a0522d; } [data-theme="light"] .link-muted-sm { color: #064D49; } [data-theme="light"] .link-muted-lg { color: #064D49; } [data-theme="light"] .link-muted-bold { color: #064D49; } [data-theme="light"] .link-dotted-muted { color: #064D49; border-bottom-color: rgba(6,77,73,0.4); } [data-theme="light"] .link-dotted-info { color: #2471a3; border-bottom-color: rgba(36,113,163,0.4); } [data-theme="light"] .link-dotted-danger { color: #c0392b; border-bottom-color: rgba(192,57,43,0.4); } [data-theme="light"] .link-dotted-success { color: #388E3C; border-bottom-color: rgba(56,142,60,0.4); } [data-theme="light"] .link-brand-subtle { border-bottom-color: rgba(6,77,73,0.3); } /* --- Text Colors --- */ [data-theme="light"] .text-secondary { color: #064D49; } [data-theme="light"] .text-danger { color: #c0392b; } [data-theme="light"] .text-warning { color: #d68910; } [data-theme="light"] .text-info { color: #2471a3; } [data-theme="light"] .text-dim { color: rgba(6,77,73,0.55); } [data-theme="light"] .text-muted { color: #666; } [data-theme="light"] .text-success { color: #27ae60; } [data-theme="light"] .text-coral { color: #a04030; } [data-theme="light"] .text-purple { color: #7b3f9e; } [data-theme="light"] .text-teal { color: #1a8a8a; } [data-theme="light"] .text-blue { color: #2471a3; } [data-theme="light"] .text-warning-dim { color: rgba(180,120,0,0.7); } [data-theme="light"] .text-mint { color: #2d8a6a; } [data-theme="light"] .text-dim-70 { color: rgba(6,77,73,0.65); } [data-theme="light"] .text-gold { color: #b8860b; } [data-theme="light"] .text-slate { color: #4a6080; } [data-theme="light"] .text-sage { color: #3a7a5a; } [data-theme="light"] .text-cyan { color: #00838f; } [data-theme="light"] .text-gold-warm { color: #9a7d2e; } [data-theme="light"] .text-caramel { color: #a05a30; } [data-theme="light"] .text-orange { color: #bf6516; } [data-theme="light"] .text-teal-bright { color: #148a7a; } /* --- Typography --- */ [data-theme="light"] .body-sm { color: #666; } [data-theme="light"] .body-sm-padded { color: #666; } [data-theme="light"] .body-sm-aaa { color: #777; } [data-theme="light"] .body-article { color: #444; } [data-theme="light"] .body-article-compact { color: #444; } [data-theme="light"] .body-muted-mb { color: #666; } [data-theme="light"] .text-head-light { color: #333; } [data-theme="light"] .text-head-secondary { color: #064D49; } [data-theme="light"] .text-danger-label { color: #c0392b; } [data-theme="light"] .text-subtitle { color: #777; } [data-theme="light"] .text-hero-sub { color: #555; } [data-theme="light"] .text-page-sub { color: rgba(6,77,73,0.55); } [data-theme="light"] .text-bbb-indent { color: #555; } [data-theme="light"] .text-article-sm { color: #555; } [data-theme="light"] .text-bbb-sm { color: #666; } [data-theme="light"] .text-caption { color: #777; } [data-theme="light"] .text-note-sm { color: #888; } [data-theme="light"] .text-list-muted { color: #555; } [data-theme="light"] .text-ccc-sm { color: #666; } [data-theme="light"] .font-heading-sm { color: #555; } [data-theme="light"] .text-subhead-secondary { color: #064D49; } [data-theme="light"] .text-section-desc { color: #666; border-left-color: rgba(6,77,73,0.2); } [data-theme="light"] .text-section-desc-sm { color: #666; border-left-color: rgba(6,77,73,0.2); } [data-theme="light"] .text-purple-heading { color: #7b3f9e; } [data-theme="light"] .text-cyan-heading { color: #00838f; } [data-theme="light"] .text-silver-heading { color: #555; } [data-theme="light"] .text-blue-heading { color: #2471a3; } [data-theme="light"] .body-article-09 { color: #444; } [data-theme="light"] .body-detail { color: #777; } [data-theme="light"] .text-brand-md { color: #064D49; } [data-theme="light"] .text-brand-sm { color: #064D49; } [data-theme="light"] .heading-danger-sm { color: #c0392b; } [data-theme="light"] .heading-success-sm { color: #27ae60; } [data-theme="light"] .heading-blue-sm { color: #2471a3; } [data-theme="light"] .heading-secondary-sm { color: #064D49; } [data-theme="light"] .blockquote-purple { border-left-color: #7b3f9e; color: #555; } /* --- Section Labels --- */ [data-theme="light"] .section-label-yudkowsky { color: #a0522d; } [data-theme="light"] .section-label-secondary { color: #064D49; } [data-theme="light"] .section-label-warning { color: #d68910; } [data-theme="light"] .section-label-success { color: #27ae60; } [data-theme="light"] .section-label-cyan { color: #00838f; } [data-theme="light"] .section-label-danger { color: #c0392b; } /* --- Callout / Info Boxes --- */ [data-theme="light"] .callout-yudkowsky { background: rgba(160,82,45,0.06); border-left-color: rgba(160,82,45,0.4); } [data-theme="light"] .callout-brand { background: rgba(6,77,73,0.06); border-color: rgba(6,77,73,0.2); } [data-theme="light"] .callout-brand-lg { background: rgba(6,77,73,0.04); border-color: rgba(6,77,73,0.15); } [data-theme="light"] .callout-note { background: rgba(6,77,73,0.04); border-left-color: rgba(6,77,73,0.3); } [data-theme="light"] .callout-note-mt16 { background: rgba(6,77,73,0.04); border-left-color: rgba(6,77,73,0.3); } [data-theme="light"] .callout-note-mt20 { background: rgba(6,77,73,0.04); border-left-color: rgba(6,77,73,0.3); } [data-theme="light"] .callout-note-mt14 { background: rgba(6,77,73,0.04); border-left-color: rgba(6,77,73,0.3); } [data-theme="light"] .callout-warning { background: rgba(214,137,16,0.06); border-left-color: #d68910; } [data-theme="light"] .callout-success { background: rgba(39,174,96,0.06); border-left-color: #27ae60; } [data-theme="light"] .callout-cyan { background: rgba(0,131,143,0.06); border-left-color: rgba(0,131,143,0.4); } [data-theme="light"] .callout-danger { background: rgba(192,57,43,0.06); border-left-color: rgba(192,57,43,0.4); } [data-theme="light"] .callout-success-alt { background: rgba(39,174,96,0.06); border-left-color: #27ae60; } [data-theme="light"] .callout-brand-sm { background: rgba(6,77,73,0.04); border-color: rgba(6,77,73,0.15); } [data-theme="light"] .card-subtle { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: #555; } [data-theme="light"] .card-danger { background: rgba(192,57,43,0.06); } [data-theme="light"] .card-center-subtle { background: rgba(0,0,0,0.03); } [data-theme="light"] .panel-padded-muted { color: #555; } [data-theme="light"] .footer-hero { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); } /* --- Background Colors --- */ [data-theme="light"] .bg-success { background: #27ae60; } [data-theme="light"] .bg-warning-80 { background: rgba(214,137,16,0.8); } [data-theme="light"] .bg-purple-soft { background: rgba(123,63,158,0.12); color: #7b3f9e; } [data-theme="light"] .bg-warning-30 { background: rgba(214,137,16,0.25); } [data-theme="light"] .bg-success-soft { background: rgba(39,174,96,0.15); color: #27ae60; } [data-theme="light"] .bg-green-dark { background: #b8d8c8; } [data-theme="light"] .bg-teal-dark { background: #a3d4b8; } /* --- Layout --- */ [data-theme="light"] .border-bottom-subtle { border-bottom-color: rgba(0,0,0,0.1); } [data-theme="light"] .section-padded { border-bottom-color: rgba(0,0,0,0.1); } /* ========== Utility classes (wave 2 extraction) ========== */ .text-danger-soft { color: #cc6655; } .text-success-soft { color: #5fb89e; } .link-brand-underline { color: var(--brand-accent); text-decoration: underline; } .text-info-soft { color: #8b9dc3; } .text-green-soft { color: #7eb8a0; } .text-orange-soft { color: #d4884e; } .text-muted-999 { color: #999; } .text-muted-aaa { color: #aaa; } .text-muted-ccc { color: #ccc; } .text-brand-accent { color: var(--brand-accent); } .text-brand-label { color: var(--brand-muted); margin-right: 8px; font-weight: 600; } .text-meta-muted { color: #aaa; font-size: 0.75rem; margin-bottom: 6px; } .text-label-brand { font-size: 1rem; font-weight: 600; color: var(--brand-accent); margin-bottom: 4px; } .text-body-mb12 { font-size: 1rem; margin: 0 0 12px 0; } .text-centered-intro { font-size: 1rem; max-width: 600px; margin: 0 auto 20px; line-height: 1.7; } .text-center { text-align: center; } .font-bold { font-weight: bold; } .font-semibold { font-weight: 600; } .font-italic { font-style: italic; } .font-075 { font-size: 0.75rem; } .font-078 { font-size: 0.78rem; } .font-08 { font-size: 0.8rem; } .font-085-muted { font-size: 0.85rem; color: #999; } .font-11 { font-size: 1.1rem; } .font-12 { font-size: 1.2rem; } .mt-0 { margin-top: 0; } .mt-4 { margin-top: 4px; } .mb-0 { margin-bottom: 0; } .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .ml-8-muted { margin-left: 8px; opacity: 0.7; } .mx-auto { margin: 0 auto; } .p-0 { padding: 0; } .scroll-offset { scroll-margin-top: 90px; } .nowrap { white-space: nowrap; } .valign-mid { vertical-align: middle; } .cursor-pointer { cursor: pointer; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .flex-1-center { flex: 1; text-align: center; } .bg-orange { background: #d4874d; } .bg-purple { background: #8b6cc1; } .bg-blue { background: #4a6fa5; } .bg-teal { background: #3d9e9e; } .btn-quiz-option { text-align: left; padding: 11px 16px; border-radius: 8px; border: 1px solid rgba(var(--brand-accent-rgb),0.18); background: rgba(255,255,255,0.02); font-size: 0.88rem; font-family: var(--font-ui); cursor: pointer; transition: border-color 0.2s, background 0.2s; } /* Light mode overrides for extracted color classes */ [data-theme="light"] .text-danger-soft { color: #b33d2d; } [data-theme="light"] .text-success-soft { color: #2d8a6e; } [data-theme="light"] .link-brand-underline { color: #2d5a4e; } [data-theme="light"] .text-info-soft { color: #4a6fa5; } [data-theme="light"] .text-green-soft { color: #3d7a5e; } [data-theme="light"] .text-brand-accent { color: var(--brand-accent); } [data-theme="light"] .text-label-brand { color: #2d5a4e; } [data-theme="light"] .text-meta-muted { color: #666; } [data-theme="light"] .text-muted-999 { color: #666; } [data-theme="light"] .text-muted-aaa { color: #777; } [data-theme="light"] .text-muted-ccc { color: #555; } [data-theme="light"] .font-085-muted { color: #666; } [data-theme="light"] .btn-quiz-option { border-color: rgba(0,0,0,0.15); background: rgba(0,0,0,0.02); } /* ===== Scenario Tab Dropdown ===== */ .scenario-dropdown { position: relative; } .scenario-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #0B1525; border: 1px solid rgba(255,255,255,0.08); border-radius: 0 0 8px 8px; min-width: 220px; z-index: 100; padding: 4px 0; } .scenario-dropdown:hover .scenario-dropdown-menu, .scenario-dropdown:focus-within .scenario-dropdown-menu { display: block; } .scenario-dropdown-menu a { display: block; padding: 8px 20px; color: rgba(255,255,255,0.6); text-decoration: none; font-family: var(--font-ui); font-size: 0.82rem; transition: background 0.15s, color 0.15s; } .scenario-dropdown-menu a:hover { background: rgba(255,255,255,0.04); color: #fff; } .scenario-dropdown-menu a.active { color: var(--brand-accent); } [data-theme="light"] .scenario-dropdown-menu { background: #fff; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .scenario-dropdown-menu a { color: rgba(0,0,0,0.5); } [data-theme="light"] .scenario-dropdown-menu a:hover { background: rgba(0,0,0,0.03); color: #222; } [data-theme="light"] .scenario-dropdown-menu a.active { color: #064d49; } /* ===== Cross-Links (shared across pages) ===== */ .cross-links { max-width: 760px; margin: 48px auto; padding: 0 20px 60px; } .cross-links h2 { font-size: 1.1rem; color: #fff; margin-bottom: 16px; text-align: center; } .cross-link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cross-link-card { display: block; padding: 16px 20px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; text-decoration: none; transition: all 0.2s; } .cross-link-card:hover { border-color: rgba(var(--brand-accent-rgb),0.25); background: rgba(var(--brand-accent-rgb),0.04); } .cross-link-card .cl-label { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .cross-link-card .cl-label.risk { color: #e74c3c; } .cross-link-card .cl-label.positive { color: #4CAF50; } .cross-link-card .cl-label.neutral { color: var(--brand-accent); } .cross-link-card .cl-label.crux { color: #3498db; } .cross-link-card .cl-label.data { color: #f39c12; } .cross-link-card .cl-title { font-size: 0.92rem; color: rgba(255,255,255,0.75); line-height: 1.4; } @media (max-width: 600px) { .cross-link-grid { grid-template-columns: 1fr; } } [data-theme="light"] .cross-links h2 { color: #222; } [data-theme="light"] .cross-link-card { background: rgba(0,0,0,0.02); border-color: #d0d0c8; } [data-theme="light"] .cross-link-card:hover { border-color: rgba(6,77,73,0.3); background: rgba(6,77,73,0.04); } [data-theme="light"] .cross-link-card .cl-title { color: #444; } /* ===== CG Position Callouts (shared across pages) ===== */ .cg-callout { background: rgba(var(--brand-accent-rgb), 0.06); border-left: 3px solid var(--brand-accent); padding: 12px 16px; border-radius: 0 8px 8px 0; font-size: 0.9rem; color: #ccc; line-height: 1.6; margin: 16px 0; } .cg-callout em { color: var(--brand-accent); font-style: normal; } .cg-callout-label { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--brand-accent); margin-bottom: 6px; display: block; } [data-theme="light"] .cg-callout { background: rgba(var(--brand-accent-rgb), 0.04); color: #555; } [data-theme="light"] .cg-callout em { color: var(--brand-accent-dark); } /* ===== Flagship editorial modules (shared across verticals) ===== The site's signature components: on-ramp callouts, paired Case-for/against debate cards, the "Where CG implicitly takes a position" stance heading, and the "Where we might be wrong" honesty box. Pages may still override these locally; this provides the canonical, consistent default. */ .callout-box { background: rgba(var(--brand-accent-rgb), 0.06); border-left: 3px solid var(--brand-accent); padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 16px 0; color: #ccc; font-size: 1rem; } [data-theme="light"] .callout-box { background: rgba(var(--brand-accent-rgb), 0.04); border-left-color: var(--brand-accent); color: #555; } .debate-section { max-width: 1100px; margin: 0 auto; padding: 40px 20px; border-bottom: 1px solid rgba(255,255,255,0.15); scroll-margin-top: 90px; } .debate-section h2 { font-size: 1.4rem; color: var(--brand-accent); margin-bottom: 8px; font-weight: 700; } .debate-section > p { font-size: 1.05rem; color: #bbb; margin-bottom: 24px; } .debate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .debate-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(var(--brand-accent-rgb), 0.15); border-radius: 10px; padding: 20px; } .debate-card h3 { font-size: 0.85rem; font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(var(--brand-accent-rgb), 0.1); } h3.side-a, .debate-card h3.side-a { color: #5dade2; } h3.side-b, .debate-card h3.side-b { color: #e67e22; } h3.cg-position, .debate-card h3.cg-position { color: var(--brand-accent); } .debate-card p { font-size: 0.92rem; color: #bbb; margin-bottom: 10px; line-height: 1.65; } .debate-card p:last-child { margin-bottom: 0; } .debate-card .highlight { color: #fff; font-weight: 500; } .cg-position-block { margin-bottom: 24px; } .honesty-box { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12); border-left: 3px solid #e67e22; border-radius: 0 10px 10px 0; padding: 20px 24px; } .honesty-box h3 { font-size: 1.1rem; color: #fff; margin-bottom: 12px; font-weight: 600; } .honesty-box p { font-size: 0.98rem; color: #bbb; margin-bottom: 12px; line-height: 1.7; } .honesty-box p:last-child { margin-bottom: 0; } .honesty-box ul { margin: 0 0 12px; padding-left: 20px; } .honesty-box li { font-size: 0.95rem; color: #bbb; line-height: 1.6; margin-bottom: 6px; } [data-theme="light"] .debate-section { border-bottom-color: var(--brand-border); } [data-theme="light"] .debate-section h2 { color: var(--brand-accent); } [data-theme="light"] .debate-section > p { color: #555; } [data-theme="light"] .debate-card { background: #fff; border-color: var(--brand-border); } [data-theme="light"] .debate-card h3 { border-bottom-color: rgba(var(--brand-accent-rgb), 0.1); } [data-theme="light"] .debate-card h3.side-a { color: #2980b9; } [data-theme="light"] .debate-card h3.side-b { color: #d35400; } [data-theme="light"] .debate-card p { color: #555; } [data-theme="light"] .debate-card .highlight { color: #333; } [data-theme="light"] .honesty-box { background: #fff; border-color: var(--brand-border); border-left-color: #d35400; } [data-theme="light"] .honesty-box h3 { color: #222; } [data-theme="light"] .honesty-box p, [data-theme="light"] .honesty-box li { color: #555; } /* ===== Shared SVG Theme Classes ===== */ /* Use these instead of inline fill/stroke rgba(255,255,255,...) in SVGs */ /* Text labels (axis labels, year labels, secondary text) */ .svg-text { fill: rgba(255,255,255,0.55); font-family: 'Inter', system-ui, sans-serif; } .svg-text-dim { fill: rgba(255,255,255,0.35); font-family: 'Inter', system-ui, sans-serif; } .svg-text-bright { fill: rgba(255,255,255,0.75); font-family: 'Inter', system-ui, sans-serif; } /* Node/box backgrounds and borders */ .svg-node { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.15); } .svg-node-subtle { fill: rgba(255,255,255,0.02); stroke: rgba(255,255,255,0.08); } /* Lines, arrows, gridlines */ .svg-line { stroke: rgba(255,255,255,0.2); } .svg-line-dim { stroke: rgba(255,255,255,0.08); } .svg-grid { stroke: rgba(255,255,255,0.06); } .svg-axis { stroke: rgba(255,255,255,0.15); } /* Arrow markers */ .svg-arrow { fill: rgba(255,255,255,0.4); } /* CI / error bars */ .svg-ci { stroke: rgba(255,255,255,0.18); } /* Light mode overrides */ [data-theme="light"] .svg-text { fill: rgba(0,0,0,0.55); } [data-theme="light"] .svg-text-dim { fill: rgba(0,0,0,0.4); } [data-theme="light"] .svg-text-bright { fill: rgba(0,0,0,0.75); } [data-theme="light"] .svg-node { fill: rgba(0,0,0,0.03); stroke: rgba(0,0,0,0.12); } [data-theme="light"] .svg-node-subtle { fill: rgba(0,0,0,0.02); stroke: rgba(0,0,0,0.06); } [data-theme="light"] .svg-line { stroke: rgba(0,0,0,0.2); } [data-theme="light"] .svg-line-dim { stroke: rgba(0,0,0,0.08); } [data-theme="light"] .svg-grid { stroke: rgba(0,0,0,0.08); } [data-theme="light"] .svg-axis { stroke: rgba(0,0,0,0.15); } [data-theme="light"] .svg-arrow { fill: rgba(0,0,0,0.4); } [data-theme="light"] .svg-ci { stroke: rgba(0,0,0,0.18); } /* Hero headings — commonly #fff with no override */ .hero h1, .hero .subtitle { color: #fff; } [data-theme="light"] .hero h1 { color: #1a1a2e; } [data-theme="light"] .hero .subtitle { color: #555; } /* ===== Hero Orientation (shared across vertical entry pages) ===== */ .hero-orient { max-width: 640px; margin: 0 auto; padding: 24px 20px 0; text-align: center; font-family: var(--font-ui); } .hero-orient-q { font-size: 0.88rem; color: rgba(255,255,255,0.65); margin-bottom: 12px; } .hero-orient-pills { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .hero-orient-pill { padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(var(--brand-accent-rgb), 0.25); background: rgba(var(--brand-accent-rgb), 0.06); color: var(--brand-text); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: var(--font-ui); } .hero-orient-pill:hover { border-color: rgba(var(--brand-accent-rgb), 0.5); background: rgba(var(--brand-accent-rgb), 0.12); } .hero-orient-pill.selected { border-color: var(--brand-accent); background: rgba(var(--brand-accent-rgb), 0.18); color: var(--brand-accent); font-weight: 600; } .hero-orient-rec { margin-top: 14px; font-size: 0.85rem; color: rgba(255,255,255,0.65); opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s; } .hero-orient-rec.visible { opacity: 1; transform: translateY(0); } .hero-orient-rec a { color: var(--brand-accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(var(--brand-accent-rgb), 0.4); } .hero-orient-rec a:hover { border-bottom-color: var(--brand-accent); } [data-theme="light"] .hero-orient-q { color: #666; } [data-theme="light"] .hero-orient-rec { color: #666; } [data-theme="light"] .hero-orient-pill { background: rgba(var(--brand-accent-rgb), 0.05); border-color: rgba(var(--brand-accent-rgb), 0.2); color: #555; } [data-theme="light"] .hero-orient-pill:hover { background: rgba(var(--brand-accent-rgb), 0.1); border-color: rgba(var(--brand-accent-rgb), 0.4); } [data-theme="light"] .hero-orient-pill.selected { background: rgba(var(--brand-accent-rgb), 0.12); border-color: var(--brand-accent); color: var(--brand-accent); } /* ===== Copy alt-text button (copy-alt.js) ===== */ .copy-alt-btn { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; z-index: 2; } .copy-alt-btn:hover { color: var(--brand-accent); border-color: rgba(var(--brand-accent-rgb), 0.4); background: rgba(var(--brand-accent-rgb), 0.08); } .copy-alt-btn.copied { color: #10B981; border-color: rgba(16,185,129,0.4); } .copy-alt-btn svg { flex-shrink: 0; } [data-theme="light"] .copy-alt-btn { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.4); } [data-theme="light"] .copy-alt-btn:hover { color: var(--brand-accent); border-color: rgba(var(--brand-accent-rgb), 0.4); background: rgba(var(--brand-accent-rgb), 0.08); } @media (max-width: 600px) { .copy-alt-label { display: none; } }