/** * TetHub — Canonical Theme (CSS Variables) * Single source of truth for all design tokens. * Loaded as the FIRST stylesheet in base-modern.html so every other * file can safely override per-section. * * Do NOT put layout, typography or component rules here — only variables. */ /* ============================================================ LIGHT MODE (default — LinkedIn warm palette) ============================================================ */ :root { /* Brand / interactive */ --primary: #0a66c2; --primary-hover: #004182; --secondary: #10B981; --danger: #cc1016; --warning: #F59E0B; --success: #057642; /* Semantic action-state colours */ --like-color: #ef4444; /* heart / like button active */ --like-color-bg: rgba(239, 68, 68, 0.12); --save-color: #F59E0B; /* bookmark / save button active */ --share-color: var(--primary); /* Backgrounds — warm beige makes white cards pop */ --bg-primary: #FFFFFF; --bg-primary-rgb: 255, 255, 255; --bg-secondary: #f3f2ef; /* LinkedIn signature warm page bg */ --bg-tertiary: #e9e5e1; --bg-hover: #e6e2dd; /* Text — rich, LinkedIn-grade contrast */ --text-primary: #0d0d0d; /* near-black, punchy */ --text-secondary: #3d3d3d; /* was #595959 — much richer */ --text-tertiary: #6b6b6b; /* was #86888a — clearer hint text */ --text-inverse: #FFFFFF; /* Borders */ --border-color: #c9c5c0; --border-light: #e0dfdc; /* Shadows — subtle card-lift */ --shadow-sm: 0 0 0 1px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); --shadow-md: 0 0 0 1px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.06); --shadow-lg: 0 0 0 1px rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.08); --shadow-xl: 0 0 0 1px rgba(0,0,0,.10), 0 16px 32px rgba(0,0,0,.12); /* Layout */ --sidebar-width: 280px; --header-height: 60px; --sidebar-header-h: 80px; --bottom-nav-height: 64px; /* Motion */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; } /* ============================================================ DARK MODE ============================================================ */ /* X/Twitter-style near-black surfaces */ [data-theme="dark"] { --bg-primary: #000000; --bg-primary-rgb: 0, 0, 0; --bg-secondary: #000000; --bg-tertiary: #16181c; --bg-hover: rgba(239, 243, 244, 0.1); --text-primary: #e7e9ea; --text-secondary: #71767b; --text-tertiary: #71767b; --text-inverse: #e7e9ea; --border-color: #2f3336; --border-light: #2f3336; --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.7); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.65); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.6); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.55); } /* ============================================================ LIGHT MODE — LinkedIn-grade Typography Baseline Subpixel antialiasing keeps strokes physically thicker on light (white) backgrounds; `antialiased` thins them out. We also bump weights on secondary-level text so nothing looks washed-out on a bright page. ============================================================ */ /* Rendering engine: subpixel in light, smooth in dark */ :root:not([data-theme="dark"]) body { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-weight: 400; color: var(--text-primary); } /* Body / paragraph copy — Inter 400 looks fine with subpixel */ :root:not([data-theme="dark"]) p, :root:not([data-theme="dark"]) .post-text, :root:not([data-theme="dark"]) .post-body, :root:not([data-theme="dark"]) .post-content p, :root:not([data-theme="dark"]) .comment-text, :root:not([data-theme="dark"]) .reply-text, :root:not([data-theme="dark"]) .description, :root:not([data-theme="dark"]) .bio, :root:not([data-theme="dark"]) .about-text, :root:not([data-theme="dark"]) .notification-message, :root:not([data-theme="dark"]) .notification-text, :root:not([data-theme="dark"]) label { color: var(--text-primary); font-weight: 400; } /* Metadata / secondary copy — was barely visible; lift to 500 */ :root:not([data-theme="dark"]) .post-meta, :root:not([data-theme="dark"]) .post-timestamp, :root:not([data-theme="dark"]) .post-time, :root:not([data-theme="dark"]) .post-date, :root:not([data-theme="dark"]) .post-author-headline, :root:not([data-theme="dark"]) .post-author-meta, :root:not([data-theme="dark"]) .post-author-sub, :root:not([data-theme="dark"]) .comment-meta, :root:not([data-theme="dark"]) .comment-time, :root:not([data-theme="dark"]) .sidebar-label, :root:not([data-theme="dark"]) .nav-label, :root:not([data-theme="dark"]) .form-text, :root:not([data-theme="dark"]) small, :root:not([data-theme="dark"]) .text-muted, :root:not([data-theme="dark"]) .text-secondary, :root:not([data-theme="dark"]) .helper-text, :root:not([data-theme="dark"]) .tag, :root:not([data-theme="dark"]) .badge-label { font-weight: 500; color: var(--text-secondary); } /* Names, display titles — bold and near-black */ :root:not([data-theme="dark"]) .post-author-name, :root:not([data-theme="dark"]) .comment-author, :root:not([data-theme="dark"]) .reply-author, :root:not([data-theme="dark"]) .user-name, :root:not([data-theme="dark"]) .profile-name, :root:not([data-theme="dark"]) .sidebar-user-name, :root:not([data-theme="dark"]) .nav-display-name, :root:not([data-theme="dark"]) .account-name, :root:not([data-theme="dark"]) .card-title, :root:not([data-theme="dark"]) .widget-title, :root:not([data-theme="dark"]) .section-title { font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } /* Headings — crisp and heavy */ :root:not([data-theme="dark"]) h1, :root:not([data-theme="dark"]) h2, :root:not([data-theme="dark"]) h3, :root:not([data-theme="dark"]) h4, :root:not([data-theme="dark"]) h5, :root:not([data-theme="dark"]) h6 { color: var(--text-primary); font-weight: 700; letter-spacing: -0.015em; } /* Nav items — readable, medium weight */ :root:not([data-theme="dark"]) .nav-item-text, :root:not([data-theme="dark"]) .sidebar-nav-text, :root:not([data-theme="dark"]) .bottom-nav-label { font-weight: 500; color: var(--text-secondary); } /* Links — inherit weight, use primary color */ :root:not([data-theme="dark"]) a:not(.btn):not(.nav-link) { font-weight: inherit; } /* Input placeholders — softer but still readable */ :root:not([data-theme="dark"]) ::placeholder { color: var(--text-tertiary); font-weight: 400; opacity: 1; } /* ============================================================ LIGHT MODE — Bootstrap utility overrides Bootstrap ships .text-muted with color:#6c757d !important, which is far too washed-out on a white background. Re-pin these utilities to our richer token values so they win. ============================================================ */ :root:not([data-theme="dark"]) .text-muted, :root:not([data-theme="dark"]) .text-secondary { color: var(--text-secondary) !important; /* #3d3d3d — rich mid-grey */ } :root:not([data-theme="dark"]) small, :root:not([data-theme="dark"]) .small { color: var(--text-secondary); font-weight: 500; } /* Boost all icon + label pairs that use faded utility colors */ :root:not([data-theme="dark"]) .ri, :root:not([data-theme="dark"]) [class^="ri-"], :root:not([data-theme="dark"]) [class*=" ri-"], :root:not([data-theme="dark"]) .bi, :root:not([data-theme="dark"]) [class^="bi-"], :root:not([data-theme="dark"]) [class*=" bi-"] { color: inherit; } /* Ensure action-count labels (like / comment / share count text) are readable */ :root:not([data-theme="dark"]) .action-count, :root:not([data-theme="dark"]) .post-action-count, :root:not([data-theme="dark"]) .like-count, :root:not([data-theme="dark"]) .comment-count, :root:not([data-theme="dark"]) .share-count, :root:not([data-theme="dark"]) .view-count { color: var(--text-secondary); font-weight: 500; }