/* ============================================================================ MDG COMMAND CENTER — SHARED DESIGN TOKENS (single source of truth) Include on every page in : Theme is driven by html[data-theme="dark" | "light"] (default = dark). Token VALUES come from the design system (Company Cards.dc.html / Company Page.dc.html). Legacy token names from the old per-page styles are kept as aliases so not-yet-migrated markup keeps theming until each page is redone. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&display=swap'); /* ---- Scales (theme-independent) ------------------------------------------ */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --radius-s: 12px; --radius-m: 16px; --radius-l: 22px; --ease: cubic-bezier(.2, .9, .25, 1); --dur: 500ms; --dur-fast: 240ms; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --header-h: 64px; } /* ---- DARK (default) ------------------------------------------------------ */ :root, :root[data-theme="dark"] { --bg: #0A0B0E; --bg2: #0E1014; --ink: #F3F3F2; --mid: #9396A0; --faint: #5A5D66; --up: #7DD6A8; --down: #E58B8B; --gold: #D6A878; --blue: #5B8AF0; --plat: #C7CBD3; --glass: rgba(23, 26, 32, 0.52); --glass2: rgba(34, 38, 47, 0.35); --stroke: rgba(255, 255, 255, 0.10); --stroke-hi: rgba(255, 255, 255, 0.24); --sheen: rgba(255, 255, 255, 0.16); --spot: rgba(255, 255, 255, 0.10); --track: rgba(255, 255, 255, 0.08); --shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.75), 0 3px 10px rgba(0, 0, 0, 0.4); --shadow-hover: 0 34px 70px -22px rgba(0, 0, 0, 0.82), 0 6px 16px rgba(0, 0, 0, 0.5); --glow: 0 0 60px -10px rgba(91, 138, 240, 0.35); --glass-blur: blur(30px) saturate(1.8); --header-glass: rgba(10, 11, 14, 0.72); /* Buttons — refined glass is the DEFAULT everywhere; blue is a rare accent reserved for a few standout CTAs (e.g. "Read full brief"). Both theme-aware. */ --btn-glass: rgba(255, 255, 255, 0.07); --btn-glass-hover: rgba(255, 255, 255, 0.12); --btn-glass-bd: rgba(255, 255, 255, 0.16); --btn-glass-bd-hover: rgba(255, 255, 255, 0.28); --btn-glass-fg: #F3F3F2; --btn-blue: linear-gradient(180deg, #6B97F2, #4A6FD8); --btn-blue-fg: #FFFFFF; --btn-blue-shadow: 0 2px 10px -3px rgba(74, 111, 216, 0.55); --warn: #E8D87C; /* compat: legacy amber "watch" state used by some pages */ /* legacy aliases (old per-page names → new) */ --panel: #131519; --panel-raised: #1A1D23; --panel-gradient-end: #0F1115; --line: var(--stroke); --line-soft: rgba(255, 255, 255, 0.045); --platinum: var(--plat); --platinum-dim: rgba(199, 203, 211, 0.08); --text-hi: var(--ink); --text-mid: var(--mid); --text-low: var(--faint); --warm: var(--gold); --card-bg: var(--glass); --card-border: var(--stroke); --card-shadow: var(--shadow); --card-shadow-hover: var(--shadow-hover); --card-sheen: var(--sheen); --card-border-hover: var(--stroke-hi); --card-private-bg: linear-gradient(180deg, rgba(30,26,42,0.6), rgba(24,20,34,0.6)); --stats-bg: var(--glass); --strip-bg: linear-gradient(90deg, rgba(13,15,20,0.72), rgba(17,20,24,0.72)); --brief-bg: linear-gradient(135deg, rgba(26,20,12,0.9), rgba(19,17,14,0.9) 60%, rgba(14,17,22,0.9)); --avatar-bg: linear-gradient(135deg, #2A2E36, #1A1D23); --avatar-fg: var(--plat); } /* ---- LIGHT --------------------------------------------------------------- */ :root[data-theme="light"] { --bg: #E7E5E1; --bg2: #F1EFEB; --ink: #17181B; --mid: #6B6E77; --faint: #A4A6AD; --up: #3E9A72; --down: #C05C5C; --gold: #A9793F; --blue: #3A61C2; --plat: #787D88; --glass: rgba(255, 255, 255, 0.55); --glass2: rgba(255, 255, 255, 0.4); --stroke: rgba(20, 22, 28, 0.10); --stroke-hi: rgba(255, 255, 255, 0.9); --sheen: rgba(255, 255, 255, 0.95); --spot: rgba(255, 255, 255, 0.6); --track: rgba(20, 22, 28, 0.07); --shadow: 0 26px 55px -26px rgba(30, 34, 46, 0.38), 0 2px 8px rgba(30, 34, 46, 0.12); --shadow-hover: 0 34px 66px -24px rgba(30, 34, 46, 0.46), 0 4px 12px rgba(30, 34, 46, 0.16); --glow: 0 0 60px -10px rgba(58, 97, 194, 0.28); --glass-blur: blur(30px) saturate(1.7); --header-glass: rgba(241, 239, 235, 0.72); --btn-glass: #FFFFFF; --btn-glass-hover: #F4F4F6; --btn-glass-bd: rgba(20, 22, 28, 0.14); --btn-glass-bd-hover: rgba(20, 22, 28, 0.26); --btn-glass-fg: #17181B; --btn-blue: linear-gradient(180deg, #5B84E0, #3A61C2); --btn-blue-fg: #FFFFFF; --btn-blue-shadow: 0 2px 10px -3px rgba(58, 97, 194, 0.40); --warn: #9A7A24; /* compat: darker amber so the "watch" state reads on light */ --panel: #FFFFFF; --panel-raised: #FFFFFF; --panel-gradient-end: #EBEBEE; --line: var(--stroke); --line-soft: rgba(0, 0, 0, 0.05); --platinum: var(--plat); --platinum-dim: rgba(0, 0, 0, 0.05); --text-hi: var(--ink); --text-mid: var(--mid); --text-low: var(--faint); --warm: var(--gold); --card-bg: var(--glass); --card-border: var(--stroke); --card-shadow: var(--shadow); --card-shadow-hover: var(--shadow-hover); --card-sheen: var(--sheen); --card-border-hover: rgba(20,22,28,0.18); --card-private-bg: linear-gradient(180deg, rgba(246,243,252,0.68), rgba(240,236,250,0.68)); --stats-bg: var(--glass); --strip-bg: linear-gradient(90deg, rgba(255,255,255,0.72), rgba(247,248,251,0.72)); --brief-bg: linear-gradient(135deg, #FBF3E7, #F6EFE6 60%, #EFF1F5); --avatar-bg: linear-gradient(135deg, #E8EAEE, #D8DBE1); --avatar-fg: #3A3D45; } /* ---- Base ---------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11'; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; } ::selection { background: color-mix(in srgb, var(--blue) 32%, transparent); } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* Numeric/ticker text opts into mono + tabular figures via one class */ .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .serif { font-family: var(--font-serif); } /* ---- Glass material utility --------------------------------------------- * Any element with class "mdg-glass" gets the frosted pane: translucent gradient fill, backdrop blur, hairline border, layered shadow, a top light sheen (::before) and an optional cursor spotlight (::after, driven by --mx/--my set by app.js on pointer move). */ .mdg-glass { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--glass), var(--glass2)); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--stroke); box-shadow: var(--shadow), inset 0 1px 0 var(--stroke-hi); border-radius: var(--radius-l); } .mdg-glass::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(180deg, var(--sheen), transparent 85%); opacity: .5; pointer-events: none; z-index: 1; } .mdg-glass > * { position: relative; z-index: 3; } .mdg-glass.spotlight::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(260px 260px at var(--mx, 50%) var(--my, -30%), var(--spot), transparent 60%); } /* Spring-lift hover for interactive glass */ .mdg-glass.interactive { cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .mdg-glass.interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover), inset 0 1px 0 var(--stroke-hi); border-color: var(--stroke-hi); } /* ---- Buttons ------------------------------------------------------------- */ /* Default button = refined glass (site-wide default). Add .primary for the rare blue accent, .ghost for a transparent variant. */ .mdg-btn { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .01em; padding: 10px 16px; border-radius: var(--radius-s); cursor: pointer; border: 1px solid var(--btn-glass-bd); background: var(--btn-glass); color: var(--btn-glass-fg); transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) ease, border-color var(--dur-fast) ease, filter var(--dur-fast) ease; } .mdg-btn:hover { transform: translateY(-1px); background: var(--btn-glass-hover); border-color: var(--btn-glass-bd-hover); } .mdg-btn:active { transform: translateY(0); } .mdg-btn:disabled { opacity: .5; cursor: not-allowed; } .mdg-btn.primary { background: var(--btn-blue); color: var(--btn-blue-fg); border: none; box-shadow: var(--btn-blue-shadow); } .mdg-btn.primary:hover { filter: brightness(1.05); } .mdg-btn.ghost { background: transparent; border-color: transparent; color: var(--mid); } .mdg-btn.ghost:hover { color: var(--ink); background: var(--btn-glass-hover); } /* ---- Keyframes (shared across all backdrops, cards, and pages) ---------- */ @keyframes riseIn { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes floatBlob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.15); } } @keyframes floatBlob2 { 0%, 100% { transform: translate(0, 0) scale(1.1); } 50% { transform: translate(-50px, 40px) scale(1); } } @keyframes pulseRing { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes livePulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @keyframes radarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes specular { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(260%) skewX(-18deg); } } @keyframes auroraA { 0%, 100% { transform: translate(-10%, -10%) scale(1); } 50% { transform: translate(20%, 15%) scale(1.3); } } @keyframes auroraB { 0%, 100% { transform: translate(15%, 10%) scale(1.2); } 50% { transform: translate(-15%, -12%) scale(1); } } @keyframes mdgSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---- Shared app chrome (drawer header + nav) — markup injected by mdg-app.js Adapted from the dashboard header (the design source of truth): a sticky glass bar with a hamburger that opens a slide-in nav drawer, the brand + per-page title, a mount point for global search (mdg-search.js), a live clock, the notification bell, and the user chip/menu. Every migrated page gets this identical chrome by calling MDG.renderHeader({ active, title }). */ .mdg-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; gap: 20px; padding: 0 24px; background: var(--header-glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--stroke); } .mdg-iconbtn { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--mid); cursor: pointer; transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; } .mdg-iconbtn:hover { background: var(--glass2); color: var(--ink); border-color: var(--stroke); } .mdg-iconbtn svg { width: 18px; height: 18px; } .mdg-brand { display: inline-flex; align-items: baseline; font-weight: 700; font-size: 20px; letter-spacing: -.03em; color: var(--ink); text-decoration: none; user-select: none; } .mdg-brand .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 2px; background: linear-gradient(135deg, var(--plat), var(--gold)); box-shadow: 0 0 6px rgba(214,168,120,.5); } .mdg-brand-sub { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--stroke); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); white-space: nowrap; } /* NOTE: class name kept as ".header-spacer" so mdg-search.js mounts the global search bar here (it replaces this element with its own slot). */ .header-spacer { flex: 1; min-width: 0; } .mdg-clock { font-family: var(--font-mono); font-size: 12px; color: var(--mid); padding: 0 8px; user-select: none; white-space: nowrap; } /* notification bell */ .mdg-bell-wrap { position: relative; flex-shrink: 0; } .mdg-bell .count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--gold); color: #0A0B0E; font-size: 9px; font-weight: 700; font-family: var(--font-mono); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(214,168,120,.5); } .mdg-bell .count.hidden { display: none; } .mdg-bell-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-width: calc(100vw - 28px); max-height: 480px; background: linear-gradient(180deg, var(--panel) 0%, var(--panel-gradient-end) 100%); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6); z-index: 150; display: none; flex-direction: column; overflow: hidden; } .mdg-bell-panel.open { display: flex; } .mdg-bell-head { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); } .mdg-bell-head .title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); } .mdg-bell-head .clear { background: transparent; border: none; color: var(--mid); font-size: 11px; cursor: pointer; font-family: inherit; } .mdg-bell-head .clear:hover { color: var(--ink); } .mdg-bell-body { overflow-y: auto; flex: 1; padding: 6px 0; } .mdg-notif { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background 120ms ease; } .mdg-notif:hover { background: var(--glass2); } .mdg-notif:last-child { border-bottom: none; } .mdg-notif.unread { border-left: 2px solid var(--plat); padding-left: 14px; background: var(--platinum-dim); } .mdg-notif .nh { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 3px; } .mdg-notif .ttl { font-size: 12px; font-weight: 500; color: var(--ink); } .mdg-notif .tm { font-size: 10px; color: var(--faint); font-family: var(--font-mono); white-space: nowrap; } .mdg-notif .bd { font-size: 11px; color: var(--mid); line-height: 1.5; } .mdg-bell-empty { padding: 30px 20px; text-align: center; color: var(--mid); font-size: 12px; } /* user chip + menu */ .mdg-userchip { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; flex-shrink: 0; padding: 0 10px 0 6px; background: var(--glass2); border: 1px solid var(--stroke); border-radius: 9px; cursor: pointer; transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease; } .mdg-userchip:hover { background: var(--glass); border-color: var(--stroke-hi); } .mdg-avatar { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; line-height: 1; background: var(--avatar-bg); color: var(--avatar-fg); } .mdg-username { font-size: 12px; font-weight: 500; line-height: 1; color: var(--ink); white-space: nowrap; } .mdg-usermenu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; padding: 6px; background: linear-gradient(180deg, var(--panel) 0%, var(--panel-gradient-end) 100%); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6); z-index: 150; display: none; overflow: hidden; } .mdg-usermenu.open { display: block; } .mdg-usermenu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; background: transparent; border: none; border-radius: 6px; color: var(--ink); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background 120ms ease; } .mdg-usermenu button:hover { background: var(--platinum-dim); } .mdg-usermenu button.danger { color: var(--down); } .mdg-usermenu button.danger:hover { background: rgba(229,139,139,0.08); } .mdg-usermenu button svg { width: 15px; height: 15px; opacity: .7; flex-shrink: 0; } .mdg-usermenu hr { border: none; border-top: 1px solid var(--line); margin: 5px 2px; } /* slide-in nav drawer (opened by the hamburger) */ .mdg-drawer-backdrop { position: fixed; inset: 0; z-index: 199; background: rgba(5,6,8,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 180ms ease; } .mdg-drawer-backdrop.open { opacity: 1; pointer-events: auto; } .mdg-drawer { position: fixed; top: 0; left: 0; width: 280px; max-width: 85vw; height: 100vh; z-index: 200; background: linear-gradient(180deg, var(--panel) 0%, var(--panel-gradient-end) 100%); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform 220ms cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; } .mdg-drawer.open { transform: translateX(0); } .mdg-drawer-head { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; } .mdg-drawer-head .mdg-brand { font-size: 17px; } .mdg-drawer-head .sub { font-size: 11px; color: var(--mid); } .mdg-drawer ul { list-style: none; padding: 14px 0; margin: 0; flex: 1; overflow-y: auto; } .mdg-drawer a { display: flex; align-items: center; gap: 12px; padding: 11px 22px; color: var(--mid); text-decoration: none; font-size: 13px; font-weight: 500; border-left: 2px solid transparent; transition: color 140ms ease, background 140ms ease, border-color 140ms ease; } .mdg-drawer a:hover { color: var(--ink); background: var(--glass2); } .mdg-drawer a.active { color: var(--ink); border-left-color: var(--plat); background: var(--platinum-dim); } .mdg-drawer a svg { width: 16px; height: 16px; opacity: .7; flex-shrink: 0; } @media (max-width: 720px) { .mdg-header { padding: 0 14px; gap: 10px; } .mdg-brand-sub, .mdg-clock, .mdg-username { display: none; } } /* content wrapper sits above the fixed animated background (z-index:0) */ .mdg-app { position: relative; z-index: 2; }