/** * Exxon demo — Nova OS light theme compatibility + component overrides. * Requires nova-tokens.css loaded first. Apply class="light" on . */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.3/400.css'); @import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.3/600.css'); @import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.3/700.css'); /* Legacy variable aliases — keeps inline POC CSS working */ .light { --white: var(--bg-base); --bg: var(--bg-card); --border: var(--border-default); --border-strong: var(--border-strong); --text: var(--text-primary); --muted: var(--text-secondary); --dim: var(--text-muted); --ai: var(--accent-purple); --ai-bg: var(--accent-purple-bg); --ai-border: var(--border-default); --critical: var(--glass-crit); --critical-bg: var(--glass-crit-bg); --warn: var(--glass-warn); --warn-bg: var(--glass-warn-bg); --ok: var(--glass-pos); --ok-bg: var(--glass-pos-bg); --standing: var(--accent-indigo); --standing-bg: var(--badge-info-bg); --triggered: var(--glass-warn); --triggered-bg: var(--glass-warn-bg); --continuous: var(--accent-green); --continuous-bg: var(--glass-pos-bg); --font: var(--fontFamily-console); --mono: ui-monospace, 'SF Mono', Menlo, 'Cascadia Code', 'Courier New', monospace; --chart-primary: #8b5cf6; --chart-primary-soft: rgba(139, 92, 246, 0.12); --chart-secondary: #22d3ee; --chart-success: #16a34a; --chart-danger: #be123c; --chart-muted: #94a3b8; --chart-indigo: #4338ca; --chart-teal: #0d9488; } /* Base */ .light body { font-family: var(--fontFamily-console); font-size: var(--fontSize-base); color: var(--text-primary); background: var(--bg-base); line-height: 1.5; -webkit-font-smoothing: antialiased; } .light :focus-visible { outline: 2px solid transparent; box-shadow: var(--shadow-focus); } /* Shell */ .light .topbar { height: 52px; background: var(--bg-base); border-bottom: 1px solid var(--border-default); padding: 0 var(--spacing-5); } .light .logo { font-family: var(--fontFamily-shell); font-weight: var(--fontWeight-bold); font-size: var(--fontSize-sm); letter-spacing: -0.02em; } .light .system-chip { padding: var(--spacing-1) var(--spacing-3); background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-badge); font-size: var(--fontSize-xs); color: var(--text-secondary); } .light .live-dot { background: var(--accent-green); } .light .container { margin-top: 52px; height: calc(100vh - 52px); } .light .sidebar { width: 256px; background: var(--bg-card); border-right: 1px solid var(--border-default); padding: var(--spacing-4) var(--spacing-2); } .light .nav-item { padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-btn); font-size: var(--fontSize-sm); color: var(--text-primary); margin-bottom: var(--spacing-1); } .light .nav-item:hover { background: var(--bg-hover); } .light .nav-item.active { background: var(--bg-active-item); font-weight: var(--fontWeight-semibold); box-shadow: var(--shadow-card-low); } .light .nav-item.active::before { width: 3px; background: var(--accent-purple); border-radius: 0 2px 2px 0; } .light .nav-badge { background: var(--accent-purple); color: var(--button-primary-text); border-radius: var(--radius-pill); font-size: var(--fontSize-2xs); } .light .main-content { padding: var(--spacing-6) var(--spacing-8); background: var(--bg-base); } .light .screen-title { font-family: var(--fontFamily-shell); font-size: var(--fontSize-2xl); font-weight: var(--fontWeight-semibold); letter-spacing: -0.02em; } .light .screen-subtitle { font-size: var(--fontSize-sm); color: var(--text-secondary); } /* Nova panel — chat */ .light .ai-panel { width: 300px; background: var(--glass-bg-card-hi); border-left: 1px solid var(--glass-border); padding: 0; display: flex; flex-direction: column; overflow: hidden; backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); } .light .nova-header { padding: var(--spacing-4) var(--spacing-4) var(--spacing-3); margin: 0; } .light .nova-chat-messages { padding: var(--spacing-3) var(--spacing-4); } .light .nova-chat-msg--nova .nova-chat-bubble { background: var(--glass-bg-card); border-color: var(--glass-border); } .light .nova-chat-msg--context .nova-chat-bubble { background: var(--glass-bg-card-hi); border-color: var(--accent-purple); } .light .nova-chat-msg--user .nova-chat-bubble { background: var(--glass-bg-card-hi); border-color: var(--accent-purple); } .light .nova-chat-tag, .light .nova-chat-confidence { color: var(--accent-purple); } .light .nova-chat-footer { border-top: 1px solid var(--glass-border); background: var(--glass-bg-card); } .light .nova-chat-input-row { background: var(--glass-bg-card-hi); border-color: var(--glass-border); } .light .nova-session-nav { border-bottom-color: var(--glass-border); } .light .nova-session-nav select { background: var(--glass-bg-card-hi); border-color: var(--glass-border); color: var(--text-primary); } .light .nova-session-readonly { background: var(--glass-bg-card); border-color: var(--glass-border); color: var(--text-secondary); } .light .nova-chat-msg--success .nova-chat-tag { color: var(--badge-success-text, #16a34a); } .light .nova-chat-msg--success .nova-chat-bubble { border-color: var(--badge-success-text, #16a34a); background: rgba(22, 163, 74, 0.08); } .light .nova-name { color: var(--accent-purple); font-family: var(--fontFamily-shell); } .light .agent-status-dot { background: var(--accent-purple); } /* Inbox cards */ .light .inbox-card { background: var(--glass-bg-card); border: 1px solid var(--glass-border); border-left-width: 3px; border-radius: var(--radius-card); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); } .light .inbox-card:hover { box-shadow: var(--shadow-card-low); } .light .inbox-card.critical { border-left-color: var(--glass-crit); } .light .inbox-card.warning { border-left-color: var(--glass-warn); } .light .inbox-card.advisory { border-left-color: var(--text-muted); } .light .inbox-card-badge.critical { color: var(--badge-error-text); } .light .inbox-card-badge.warning { color: var(--badge-warning-text); } .light .inbox-card-badge.advisory { color: var(--badge-neutral-text); } /* Buttons */ .light .btn { border-radius: var(--radius-btn); font-weight: var(--fontWeight-medium); font-family: var(--fontFamily-console); transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .light .btn-primary { background: var(--button-primary-bg); color: var(--button-primary-text); box-shadow: var(--button-primary-shadow); } .light .btn-primary:hover { background: var(--button-primary-hover-bg); } .light .btn-primary.red { background: var(--button-danger-bg); color: var(--button-danger-text); border: 1px solid var(--button-danger-border); box-shadow: none; } .light .btn-primary.red:hover { background: var(--button-danger-hover-bg); border-color: var(--button-danger-hover-border); } .light .btn-secondary { background: var(--button-secondary-bg); color: var(--button-secondary-text); border: 1px solid var(--button-secondary-border); } .light .btn-secondary:hover { background: var(--button-secondary-hover-bg); border-color: var(--button-secondary-hover-border); } .light .btn-tertiary { color: var(--button-ghost-text); } .light .btn-tertiary:hover { background: var(--button-ghost-hover-bg); color: var(--text-primary); } /* Badges */ .light .status-badge { border-radius: var(--radius-badge); font-size: var(--fontSize-2xs); font-weight: var(--fontWeight-semibold); } .light .status-badge.critical { background: var(--badge-error-bg); color: var(--badge-error-text); } .light .status-badge.warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); } .light .status-badge.ok, .light .status-badge.active { background: var(--badge-success-bg); color: var(--badge-success-text); } .light .status-badge.watch { background: var(--badge-info-bg); color: var(--badge-info-text); } /* Tables */ .light .data-table { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-card); overflow: hidden; } .light .data-table th { background: var(--bg-card); padding: var(--spacing-2) var(--spacing-3); color: var(--text-secondary); font-size: var(--fontSize-xs); } .light .data-table td { padding: var(--spacing-3); border-bottom: 1px solid var(--border-default); } .light .data-table tbody tr:hover { background: var(--bg-hover); } .light .clickable-row:hover { background: var(--accent-purple-bg) !important; } /* Cards & KPIs */ .light .stat-card, .light .kpi-card, .light .chart-container, .light .bar-chart, .light .cfg-card, .light .kanban-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-card); box-shadow: var(--shadow-card-low); } .light .kpi-strip { gap: var(--spacing-4); margin-bottom: var(--spacing-6); } .light .kpi-card { padding: var(--spacing-4); } .light .kpi-label { font-size: var(--fontSize-2xs); color: var(--text-secondary); margin-bottom: var(--spacing-2); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--fontWeight-medium); } .light .kpi-value { font-size: var(--fontSize-xl); font-weight: var(--fontWeight-bold); font-family: var(--mono); color: var(--text-primary); } .light .kpi-value.critical { color: var(--glass-crit); } .light .kpi-value.ok { color: var(--glass-pos); } .light .chart-container { padding: var(--spacing-5); margin-bottom: var(--spacing-6); } .light .chart-title { font-family: var(--fontFamily-shell); font-size: var(--fontSize-sm); font-weight: var(--fontWeight-semibold); margin-bottom: var(--spacing-4); color: var(--text-primary); } .light .chart-canvas { max-height: 220px; } .light .forecast-controls { margin-top: var(--spacing-3); display: flex; flex-wrap: wrap; gap: var(--spacing-5); align-items: center; padding-top: var(--spacing-3); border-top: 1px solid var(--border-default); font-size: var(--fontSize-sm); color: var(--text-secondary); } .light .forecast-slider { display: flex; align-items: center; gap: var(--spacing-3); flex: 1; min-width: 200px; } .light .forecast-slider-label { font-size: var(--fontSize-xs); font-weight: var(--fontWeight-medium); color: var(--text-secondary); white-space: nowrap; } .light .forecast-slider input[type="range"] { flex: 1; min-width: 120px; max-width: 200px; accent-color: var(--accent-purple); } .light .forecast-slider-value { font-family: var(--mono); font-size: var(--fontSize-sm); color: var(--text-primary); min-width: 48px; } .light .forecast-checkbox { display: flex; align-items: center; gap: var(--spacing-2); cursor: pointer; user-select: none; } .light .forecast-checkbox input[type="checkbox"] { accent-color: var(--accent-purple); } .light .status-badge.reserved { background: var(--accent-purple-bg); color: var(--accent-purple); border: 1px solid var(--border-default); } .light .maint-auto-badge { display: inline-block; margin-left: var(--spacing-2); font-size: var(--fontSize-2xs); color: var(--accent-purple); font-weight: var(--fontWeight-medium); } .light .detail-header { background: var(--bg-card); border-radius: var(--radius-card); } .light .signal-banner { background: var(--accent-purple-bg); border: 1px solid var(--border-default); border-left: 3px solid var(--accent-purple); border-radius: var(--radius-card); } /* Subtabs */ .light .subtab-nav { border-bottom: 1px solid var(--border-default); gap: var(--spacing-6); } .light .subtab-item.active { color: var(--accent-purple); border-bottom-color: var(--accent-purple); } .light .contract-tab.active { color: var(--accent-purple); border-bottom-color: var(--accent-purple); } /* Filter chips */ .light .leak-filter-chip { border-radius: var(--radius-pill); background: var(--bg-card); border: 1px solid var(--border-default); } .light .leak-filter-chip:hover { border-color: var(--accent-purple); } .light .leak-filter-chip.filtered { background: var(--accent-purple-bg); border-color: var(--accent-purple); color: var(--accent-purple); } .light .scenario-btn.active { background: var(--button-primary-bg); color: var(--button-primary-text); border-color: var(--accent-purple); box-shadow: var(--button-primary-shadow); } /* Drawers */ .light .finding-drawer, .light .contract-drawer, .light .ask-agent-panel { background: var(--bg-base); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-card-mid); } .light .finding-drawer-overlay, .light .contract-drawer-overlay, .light .ask-agent-overlay { background: rgba(9, 9, 9, 0.35); } .light .calc-box { background: var(--bg-overlay); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-btn); } .light .verdict-badge { background: var(--badge-success-bg); color: var(--badge-success-text); border-radius: var(--radius-badge); } /* Ask Nova */ .light .ask-agent-fab { background: var(--button-primary-bg); color: var(--button-primary-text); box-shadow: var(--shadow-accent-glow); } .light .ask-agent-header, .light .ask-agent-footer { background: var(--bg-card); } .light .ask-agent-bubble { background: var(--accent-purple); color: var(--button-primary-text); } .light .ask-agent-answer { background: var(--accent-purple-bg); border: 1px solid var(--border-default); border-radius: var(--radius-card); } .light .ask-agent-confidence { color: var(--accent-purple); border-color: var(--border-default); } .light .ask-agent-deeplink { background: var(--button-primary-bg); box-shadow: var(--button-primary-shadow); } .light .ask-agent-suggestion:hover { background: var(--bg-hover); border-color: var(--accent-purple); } /* Toast */ .light .toast { background: var(--bg-overlay); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-btn); box-shadow: var(--shadow-card-mid); } /* Rig schedule */ .light .rig-cell-toggle.up { background: var(--badge-success-bg); color: var(--badge-success-text); } .light .rig-cell-toggle.planned { background: var(--badge-warning-bg); color: var(--badge-warning-text); } .light .rig-cell-toggle.breakdown { background: var(--badge-error-bg); color: var(--badge-error-text); } .light .expanded-detail { background: var(--accent-purple-bg); border-left-color: var(--accent-purple); border-radius: var(--radius-btn); } .light .collapsible-header:hover { color: var(--accent-purple); } .light .version-indicator.saved { background: var(--badge-success-bg); color: var(--badge-success-text); } .light .version-indicator.unsaved { background: var(--badge-warning-bg); color: var(--badge-warning-text); } .light .kanban-column { background: var(--bg-card); border-radius: var(--radius-card); } .light .activity-agent { color: var(--accent-purple); } .light .filter-bar select:focus { outline: none; box-shadow: var(--shadow-focus); }