/* ============================================================================ T'nB Hub — Shared design system. Loaded by every sub-app (reports, BP consolidé, notices, hub) AFTER their own stylesheet, so the tokens here win the cascade and propagate everywhere. Theme switching: `[data-theme="dark"]` on swaps every variable. Persistence + toggle wiring live in `static/shared.js`. Design language (informed by UI/UX Pro Max search): - Glassmorphism on topbar + key panels (backdrop-filter 14-18 px). - Vibrant subtle gradient background so glass actually reads as glass. - Lexend (headings) + Source Sans 3 (body) — "Corporate Trust" pairing. - Indigo accent + green CTA. Status colours from Tailwind palette. - Contrast: text/bg >= 7:1, secondary >= 4.5:1. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ---------------------------------------------------------------------------- TOKENS — LIGHT (default) ------------------------------------------------------------------------- */ :root { --bg: #f6f7fb; --bg-grad: radial-gradient(1200px 600px at 12% -10%, #e0e7ff 0%, transparent 60%), radial-gradient(900px 500px at 95% 10%, #fae8ff 0%, transparent 60%), linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%); --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --border: #e2e8f0; --border-strong: #cbd5e1; --text: #0f172a; --text-soft: #334155; --text-muted: #64748b; --accent: #6366f1; /* indigo-500 */ --accent-strong: #4f46e5; /* indigo-600 */ --accent-soft: #e0e7ff; /* indigo-100 */ --accent-on: #ffffff; --success: #16a34a; --success-soft: #dcfce7; --warning: #d97706; --warning-soft: #fef3c7; --danger: #dc2626; --danger-soft: #fee2e2; --info: #0ea5e9; --info-soft: #e0f2fe; --glass-bg: rgba(255, 255, 255, 0.62); --glass-bg-strong: rgba(255, 255, 255, 0.78); --glass-blur: 14px; --glass-border: rgba(255, 255, 255, 0.55); --glass-shadow: 0 6px 24px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03); --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08); --shadow-lg: 0 18px 38px -8px rgba(15, 23, 42, 0.18); --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px; --font-sans: 'Source Sans 3', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --font-display: 'Lexend', 'Source Sans 3', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --easing: cubic-bezier(0.22, 1, 0.36, 1); --transition: 180ms var(--easing); } /* ---------------------------------------------------------------------------- TOKENS — DARK ------------------------------------------------------------------------- */ [data-theme="dark"] { --bg: #0b1020; --bg-grad: radial-gradient(1200px 600px at 8% -10%, #312e81 0%, transparent 55%), radial-gradient(900px 600px at 100% 0%, #581c87 0%, transparent 55%), linear-gradient(180deg, #0b1020 0%, #131a37 100%); --surface: #161b32; --surface-2: #1d2440; --surface-3: #252d4f; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --text: #f1f5f9; --text-soft: #cbd5e1; --text-muted: #94a3b8; --accent: #818cf8; /* indigo-400 */ --accent-strong: #a5b4fc; --accent-soft: rgba(129, 140, 248, 0.18); --accent-on: #0b1020; --success: #4ade80; --success-soft: rgba(74, 222, 128, 0.15); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.15); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.15); --info: #38bdf8; --info-soft: rgba(56, 189, 248, 0.15); --glass-bg: rgba(22, 27, 50, 0.55); --glass-bg-strong: rgba(22, 27, 50, 0.80); --glass-blur: 16px; --glass-border: rgba(255, 255, 255, 0.10); --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.4); --shadow-lg: 0 22px 44px -10px rgba(0, 0, 0, 0.6); color-scheme: dark; } /* ---------------------------------------------------------------------------- RESET / BASE ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light dark; } html, body { margin: 0; padding: 0; background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; background-size: cover; color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; } body { transition: color var(--transition), background-color var(--transition); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.012em; color: var(--text); } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-strong); } code, kbd, pre, samp { font-family: var(--font-mono); } ::selection { background: var(--accent-soft); color: var(--text); } /* Scrollbar tinted to theme */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } ::-webkit-scrollbar-track { background: transparent; } /* ---------------------------------------------------------------------------- LAYOUT — shared between apps ------------------------------------------------------------------------- */ .container { max-width: 1180px; margin: 0 auto; padding: 0 28px; } .main-content { padding: 36px 0 72px; } /* ---------------------------------------------------------------------------- TOPBAR — translucent glass, sticky ------------------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 100; background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); border-bottom: 1px solid var(--glass-border); box-shadow: 0 1px 0 var(--border); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; } .brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; color: var(--text); } .brand:hover { color: var(--text); } .brand-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; background: var(--text); color: var(--surface); font-family: var(--font-display); font-weight: 700; font-size: 13px; border-radius: 8px; letter-spacing: 0.01em; } .brand-name { font-size: 15px; font-family: var(--font-display); } .topbar-nav { display: flex; align-items: center; gap: 6px; } .topbar-nav a { padding: 8px 14px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; color: var(--text-soft); transition: background var(--transition), color var(--transition); } .topbar-nav a:hover { background: var(--surface-3); color: var(--text); } .topbar-nav a.cta { background: var(--accent); color: var(--accent-on); } .topbar-nav a.cta:hover { background: var(--accent-strong); color: var(--accent-on); } /* ---------------------------------------------------------------------------- THEME TOGGLE — round pill button ------------------------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); cursor: pointer; transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition); font-size: 16px; } .theme-toggle:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); transform: rotate(20deg); } .theme-toggle .icon-light { display: none; } .theme-toggle .icon-dark { display: inline; } [data-theme="dark"] .theme-toggle .icon-light { display: inline; } [data-theme="dark"] .theme-toggle .icon-dark { display: none; } /* ---------------------------------------------------------------------------- FOOTER ------------------------------------------------------------------------- */ .footer { margin-top: 60px; padding: 22px 0; background: var(--glass-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--glass-border); color: var(--text-muted); font-size: 13px; } /* ---------------------------------------------------------------------------- GLASS UTILITIES — opt-in ------------------------------------------------------------------------- */ .glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: var(--radius-lg); } .glass-strong { background: var(--glass-bg-strong); } /* ---------------------------------------------------------------------------- CARDS — neutral surface (used in editor forms etc.) ------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), border-color var(--transition); } [data-theme="dark"] .card { background: var(--surface); } .card:hover { box-shadow: var(--shadow-md); } .card-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; } .card-desc { margin: 0 0 20px; color: var(--text-muted); font-size: 14px; } /* ---------------------------------------------------------------------------- BUTTONS ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; font: 500 14px/1 var(--font-sans); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .btn:hover { background: var(--surface-3); border-color: var(--border-strong); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--accent); color: var(--accent-on); border-color: var(--accent); box-shadow: 0 6px 16px -6px var(--accent); } .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .btn-success { background: var(--success); color: #ffffff; border-color: var(--success); } .btn-success:hover { background: #15803d; } .btn-danger { background: var(--danger); color: #ffffff; border-color: var(--danger); } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--surface-3); } .btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--radius-sm); } .btn-lg { padding: 12px 22px; font-size: 15px; border-radius: var(--radius); } /* ---------------------------------------------------------------------------- FORMS ------------------------------------------------------------------------- */ input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="url"], input[type="date"], select, textarea { width: 100%; padding: 10px 12px; font: 400 14px/1.4 var(--font-sans); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--surface-2); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } textarea { min-height: 92px; resize: vertical; font-family: var(--font-sans); } label { font-weight: 500; font-size: 14px; color: var(--text-soft); } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field .hint { font-size: 12px; color: var(--text-muted); } .field .req { color: var(--danger); font-weight: 700; } /* ---------------------------------------------------------------------------- PILLS / BADGES ------------------------------------------------------------------------- */ .badge, .pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); } .badge--success { background: var(--success-soft); color: var(--success); } .badge--warning { background: var(--warning-soft); color: var(--warning); } .badge--danger { background: var(--danger-soft); color: var(--danger); } .badge--info { background: var(--info-soft); color: var(--info); } .badge--neutral { background: var(--surface-3); color: var(--text-muted); } /* ---------------------------------------------------------------------------- PAGE HEADER ------------------------------------------------------------------------- */ .page-header { margin: 8px 0 28px; } .page-header h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -0.02em; } .page-subtitle { margin: 0; color: var(--text-muted); max-width: 720px; font-size: 15px; } .page-subtitle .separator { margin: 0 6px; opacity: 0.6; } /* ---------------------------------------------------------------------------- GRID HELPERS ------------------------------------------------------------------------- */ .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 800px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------------------- TOAST ------------------------------------------------------------------------- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 8px); padding: 12px 18px; background: var(--text); color: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 500; opacity: 0; transition: opacity var(--transition), transform var(--transition); z-index: 200; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.success { background: var(--success); color: #fff; } .toast.error { background: var(--danger); color: #fff; } /* ---------------------------------------------------------------------------- REDUCED MOTION ------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- HUB — landing page tool cards (glassmorphic) ------------------------------------------------------------------------- */ .page-header h1 { background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--text); font-size: 38px; letter-spacing: -0.024em; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .tool-card { position: relative; display: flex; flex-direction: column; background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--glass-shadow); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .tool-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 45%); opacity: 0; transition: opacity var(--transition); pointer-events: none; } .tool-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-lg); } .tool-card:hover::before { opacity: 1; } .tool-card--soon { cursor: not-allowed; opacity: 0.55; pointer-events: none; } .tool-card > * { position: relative; z-index: 1; } .tool-card-head { margin-bottom: 10px; } .tool-card-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 12px; } .tool-card-head h2 { margin: 0; font-size: 19px; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .tool-card-desc { flex: 1; margin: 0 0 18px; color: var(--text-muted); font-size: 14.5px; line-height: 1.55; } .tool-card-footer { margin-top: auto; } .tool-card-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--accent); transition: gap var(--transition); } .tool-card:hover .tool-card-cta { gap: 10px; } .tool-card-cta--soon { color: var(--text-muted); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; } }