/* ══════════════════════════════════════════════════════════ VARIFORUM UNIFIED DESIGN SYSTEM v2 Shared across all domains with light/dark toggle ══════════════════════════════════════════════════════════ */ :root { /* ─── Dark Theme (Default) ─── */ --bg-base: #1a1a1f; /* Softer than #0a0a0a */ --bg-canvas: #1e1e24; --bg-surface: #252530; --bg-card: #2a2a36; --bg-elevated: #303040; --bg-hover: #363648; /* Borders - softer */ --border: #3a3a48; --border-main: #3a3a48; --border-subtle: #2d2d38; --border-accent: #4a4a5a; /* Typography - warmer whites */ --text-primary: #f4f4f6; --text-secondary: #b8b8c0; --text-muted: #808090; --text-dim: #606070; /* ─── Domain Brand Colors (Unified) ─── */ --brand-gold: #d4af37; /* Primary Variforum Gold */ --brand-gold-dim: #a08428; --brand-net: #38bdf8; /* Cyan - The Hive (.net claims forum) */ --brand-com: #facc15; /* Amber - The Store (.com marketplace) */ --brand-org: #a78bfa; /* Violet - The Institution (.org governance) */ --brand-cloud: #60a5fa; /* Blue - The Pulse (.cloud dashboard) */ --brand-info: #e4e4e7; /* Silver - The Truth (.info whitepaper) */ /* ─── Primary Accent (uses domain or gold) ─── */ --accent: var(--brand-gold); --accent-dim: var(--brand-gold-dim); --accent-subtle: rgba(212, 175, 55, 0.15); /* ─── Consensus Colors ─── */ --consensus-high: #22c55e; /* Green - strong agreement */ --consensus-med: #eab308; /* Yellow - moderate */ --consensus-low: #ef4444; /* Red - disputed */ /* ─── Status Colors ─── */ --success: #22c55e; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; /* ─── Layout ─── */ --hud-height: 64px; --sidebar-width: 260px; --content-max: 1200px; --reader-max: 720px; --card-radius: 12px; --input-radius: 8px; /* ─── Fonts ─── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Crimson Pro', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* ─── Shadows ─── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3); /* ─── Transitions ─── */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s ease; } /* ══════════════════════════════════════════════════════════ LIGHT THEME ══════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg-base: #f8f8fa; --bg-canvas: #ffffff; --bg-surface: #f0f0f4; --bg-card: #ffffff; --bg-elevated: #f5f5f8; --bg-hover: #e8e8f0; --border: #d8d8e0; --border-main: #d8d8e0; --border-subtle: #e8e8f0; --border-accent: #c0c0d0; --text-primary: #18181b; --text-secondary: #52525b; --text-muted: #71717a; --text-dim: #a1a1aa; /* Slightly darken accent for light mode contrast */ --accent: #b8942e; --accent-dim: #9a7c26; --accent-subtle: rgba(184, 148, 46, 0.1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1); } /* ══════════════════════════════════════════════════════════ DOMAIN-SPECIFIC ACCENTS Apply class to or ══════════════════════════════════════════════════════════ */ .domain-net { --accent: var(--brand-net); --accent-dim: #0ea5e9; } .domain-com { --accent: var(--brand-com); --accent-dim: #eab308; } .domain-org { --accent: var(--brand-org); --accent-dim: #8b5cf6; } .domain-cloud { --accent: var(--brand-cloud); --accent-dim: #3b82f6; } .domain-info { --accent: var(--brand-info); --accent-dim: #d4d4d8; } /* ══════════════════════════════════════════════════════════ BASE STYLES ══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); background: var(--bg-base); color: var(--text-primary); line-height: 1.6; min-height: 100vh; transition: background var(--transition-normal), color var(--transition-normal); } a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent-dim); text-decoration: underline; } /* ══════════════════════════════════════════════════════════ UNIFIED NAVIGATION (HUD) ══════════════════════════════════════════════════════════ */ .vf-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--hud-height); background: var(--bg-canvas); border-bottom: 1px solid var(--border); z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; backdrop-filter: blur(12px); transition: background var(--transition-normal), border-color var(--transition-normal); } .vf-nav-left { display: flex; align-items: center; gap: 24px; } .vf-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); font-weight: 600; font-size: 1.1rem; } .vf-logo-symbol { width: 28px; height: 28px; color: var(--accent); } .vf-nav-tabs { display: flex; gap: 4px; } .vf-nav-tab { display: flex; align-items: center; gap: 6px; padding: 10px 16px; background: transparent; border: none; color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; cursor: pointer; border-radius: var(--input-radius); text-decoration: none; transition: all var(--transition-fast); } .vf-nav-tab:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; } .vf-nav-tab.active { background: var(--accent-subtle); color: var(--accent); } .vf-nav-center { flex: 1; display: flex; justify-content: center; max-width: 480px; padding: 0 24px; } .vf-search { width: 100%; display: flex; align-items: center; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 24px; padding: 10px 18px; gap: 10px; transition: all var(--transition-fast); } .vf-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); } .vf-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 0.9rem; } .vf-search input::placeholder { color: var(--text-muted); } .vf-search-icon { color: var(--text-muted); width: 18px; height: 18px; } .vf-nav-right { display: flex; align-items: center; gap: 12px; } /* ─── Theme Toggle ─── */ .vf-theme-toggle { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--input-radius); cursor: pointer; color: var(--text-secondary); transition: all var(--transition-fast); } .vf-theme-toggle:hover { background: var(--bg-hover); color: var(--accent); border-color: var(--accent); } .vf-theme-toggle .icon-sun { display: none; } .vf-theme-toggle .icon-moon { display: block; } [data-theme="light"] .vf-theme-toggle .icon-sun { display: block; } [data-theme="light"] .vf-theme-toggle .icon-moon { display: none; } /* ─── Profile / Auth Button ─── */ .vf-profile-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 50%; cursor: pointer; transition: all var(--transition-fast); } .vf-profile-btn:hover { border-color: var(--accent); } .vf-avatar { width: 32px; height: 32px; background: linear-gradient(135deg, var(--accent), var(--accent-dim)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--bg-base); } /* ─── Primary Action Button ─── */ .vf-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--bg-base); border: none; border-radius: 24px; padding: 10px 20px; font-size: 0.875rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all var(--transition-fast); } .vf-btn-primary:hover { background: var(--accent-dim); transform: translateY(-1px); text-decoration: none; color: var(--bg-base); } /* ══════════════════════════════════════════════════════════ CARDS ══════════════════════════════════════════════════════════ */ .vf-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 20px; transition: all var(--transition-fast); } .vf-card:hover { border-color: var(--border-accent); box-shadow: var(--shadow-md); } .vf-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .vf-card-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; } .vf-card-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); } .vf-card-body { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; } /* ══════════════════════════════════════════════════════════ READER / WHITEPAPER STYLES ══════════════════════════════════════════════════════════ */ .vf-reader { max-width: var(--reader-max); margin: 0 auto; padding: 48px 32px; font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.9; color: var(--text-secondary); } .vf-reader h1 { font-family: var(--font-sans); font-size: 2rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; margin-bottom: 16px; } .vf-reader h2 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-top: 48px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .vf-reader p { margin-bottom: 20px; } .vf-reader blockquote { border-left: 3px solid var(--accent); padding-left: 20px; margin: 32px 0; font-style: italic; color: var(--text-muted); } .vf-reader ul, .vf-reader ol { margin-bottom: 20px; padding-left: 24px; } .vf-reader li { margin-bottom: 8px; } .vf-reader code { font-family: var(--font-mono); background: var(--bg-surface); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; } /* ─── Paper Metadata ─── */ .vf-paper-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .vf-paper-meta strong { color: var(--text-primary); } /* ─── Tab Switcher (Technical / Plain English) ─── */ .vf-tabs { display: flex; gap: 4px; margin-bottom: 32px; border-bottom: 1px solid var(--border); padding-bottom: 8px; } .vf-tab { padding: 8px 16px; background: transparent; border: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; cursor: pointer; border-radius: var(--input-radius) var(--input-radius) 0 0; transition: all var(--transition-fast); } .vf-tab:hover { color: var(--text-primary); background: var(--bg-hover); } .vf-tab.active { color: var(--accent); background: var(--accent-subtle); } .vf-tab-content { display: none; } .vf-tab-content.active { display: block; } /* ══════════════════════════════════════════════════════════ STATUS BADGES ══════════════════════════════════════════════════════════ */ .vf-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } .vf-badge-success { background: rgba(34, 197, 94, 0.15); color: var(--success); } .vf-badge-warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); } .vf-badge-error { background: rgba(239, 68, 68, 0.15); color: var(--error); } .vf-badge-info { background: rgba(59, 130, 246, 0.15); color: var(--info); } .vf-badge-neutral { background: var(--bg-surface); color: var(--text-muted); } /* ══════════════════════════════════════════════════════════ CONSENSUS INDICATORS ══════════════════════════════════════════════════════════ */ .vf-consensus { display: flex; align-items: center; gap: 8px; } .vf-consensus-bar { width: 60px; height: 4px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; } .vf-consensus-fill { height: 100%; border-radius: 2px; transition: width var(--transition-normal); } .vf-consensus-fill.high { background: var(--consensus-high); } .vf-consensus-fill.med { background: var(--consensus-med); } .vf-consensus-fill.low { background: var(--consensus-low); } .vf-consensus-value { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); } /* ══════════════════════════════════════════════════════════ FORMS & INPUTS ══════════════════════════════════════════════════════════ */ .vf-input { width: 100%; padding: 12px 16px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--input-radius); color: var(--text-primary); font-size: 0.9rem; font-family: inherit; outline: none; transition: all var(--transition-fast); } .vf-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); } .vf-input::placeholder { color: var(--text-muted); } .vf-textarea { min-height: 120px; resize: vertical; } /* ══════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════ */ .vf-footer { border-top: 1px solid var(--border); background: var(--bg-canvas); padding: 48px 24px; text-align: center; } .vf-footer p { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); margin-bottom: 8px; } .vf-footer a { color: var(--text-muted); } .vf-footer a:hover { color: var(--accent); } /* ══════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .vf-nav-tabs { display: none; } .vf-nav-center { display: none; } .vf-reader { padding: 24px 16px; font-size: 1rem; } .vf-reader h1 { font-size: 1.5rem; } }