/** * SUPERWISE Design System — Template Stylesheet * * Reusable styles from the AI Governance Framework. Copy this file to other * projects as a design-system baseline. * * Dependencies: * * * Required HTML attributes: * (use "light" for light mode) * * CSS variables: --bg, --surface, --surface2, --border, --accent, --accent2, --accent3, --accent4, --text, --muted * Semantic classes: .label, .layer-*, .tag-*, .dot-*, .pillar-* */ :root, [data-theme="dark"] { --bg: #0d0e11; --surface: #1a1d24; --surface2: #141619; --border: rgba(255,255,255,0.1); --accent: #22d3ee; --accent2: #E20000; --accent3: #ff3333; --accent4: #f59e0b; --text: #ffffff; --muted: #657490; --h1-from: #ffffff; --table-hover: rgba(255,255,255,0.03); --table-row-border: rgba(255,255,255,0.06); } [data-theme="light"] { --bg: #ffffff; --surface: #f6f7f9; --surface2: #eceef2; --border: rgba(0,0,0,0.08); --accent: #059669; --accent2: #E20000; --accent3: #c40000; --accent4: #d97706; --text: #1a1d24; --muted: #8492aa; --h1-from: #1a1d24; --table-hover: rgba(0,0,0,0.02); --table-row-border: rgba(0,0,0,0.05); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; min-height: 100vh; padding: 40px 24px 80px; transition: background 0.3s, color 0.3s; } /* THEME TOGGLE */ .theme-toggle { position: fixed; top: 20px; right: 24px; z-index: 100; background: var(--surface); border: 1px solid var(--border); border-radius: 40px; padding: 6px 14px 6px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 11px; color: var(--muted); letter-spacing: 0.05em; transition: all 0.2s; box-shadow: 0 2px 12px rgba(0,0,0,0.15); } .theme-toggle:hover { border-color: var(--accent2); color: var(--text); } .toggle-icon { font-size: 14px; } .toggle-icon.icon-svg { display: inline-flex; align-items: center; } .toggle-icon.icon-svg svg { width: 17px; height: 17px; stroke: currentColor; fill: none; transform: translateY(1px); } .toggle-track { width: 32px; height: 18px; background: var(--border); border-radius: 9px; position: relative; transition: background 0.2s; } [data-theme="light"] .toggle-track { background: var(--accent2); } .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: all 0.2s; } [data-theme="light"] .toggle-thumb { left: 17px; background: #fff; } .header { text-align: center; margin-bottom: 64px; } .label { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.2em; color: #E20000; text-transform: uppercase; margin-bottom: 16px; display: block; } h1 { font-family: 'Inter', sans-serif; font-size: clamp(28px, 5vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--text); margin-bottom: 16px; } .subtitle { color: #8492aa; font-size: 15px; max-width: 560px; margin: 0 auto; line-height: 1.6; } [data-theme="light"] .subtitle { color: #505d77; } /* TABS */ .tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px; max-width: 400px; margin: 0 auto 48px; } .tab { flex: 1; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; transition: all 0.2s; background: transparent; color: var(--muted); } .tab.active { background: var(--accent2); color: #fff; } .tab.tab-link { flex: 1; text-align: center; text-decoration: none; } .tab.tab-link:hover { color: var(--text); } /* VIEWS */ .view { display: none; } .view.active { display: block; } /* FRAMEWORK VISUAL */ .framework { max-width: 900px; margin: 0 auto; } .framework-intro { text-align: center; margin-bottom: 40px; color: var(--muted); font-size: 13px; font-family: 'IBM Plex Mono', monospace; font-weight: 500; letter-spacing: 0.05em; } .layers-container { display: flex; flex-direction: column; gap: 3px; position: relative; } .layer { border-radius: 10px; padding: 20px 28px; border: 1px solid transparent; cursor: pointer; transition: all 0.25s; position: relative; overflow: hidden; } .layer::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s; } .layer:hover::before { opacity: 1; } /* Pillar section colors — single background per section */ .pillar-define .layer { background: rgba(76, 140, 240, 0.14); border-color: rgba(76, 140, 240, 0.3); } .pillar-define .layer::before { background: rgba(76, 140, 240, 0.06); } .pillar-enforce .layer { background: rgba(79, 180, 100, 0.14); border-color: rgba(79, 180, 100, 0.3); } .pillar-enforce .layer::before { background: rgba(79, 180, 100, 0.06); } .pillar-monitor .layer { background: rgba(255, 165, 0, 0.14); border-color: rgba(255, 165, 0, 0.3); } .pillar-monitor .layer::before { background: rgba(255, 165, 0, 0.06); } .pillar-respond .layer { background: rgba(124, 92, 252, 0.14); border-color: rgba(124, 92, 252, 0.3); } .pillar-respond .layer::before { background: rgba(124, 92, 252, 0.06); } .pillar-sustain .layer { background: rgba(220, 80, 80, 0.14); border-color: rgba(220, 80, 80, 0.3); } .pillar-sustain .layer::before { background: rgba(220, 80, 80, 0.06); } .layer-header { display: flex; align-items: center; gap: 16px; } .layer-num { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 14px; color: var(--muted); width: 32px; flex-shrink: 0; } .pillar-define .layer-num { color: #7dd3ff; } .pillar-enforce .layer-num { color: #7dd9a0; } .pillar-monitor .layer-num { color: #ffd97a; } .pillar-respond .layer-num { color: #a78bfa; } .pillar-sustain .layer-num { color: #f08989; } [data-theme="light"] .pillar-define .layer-num { color: #0e7a9e; } [data-theme="light"] .pillar-enforce .layer-num { color: #2d8a3e; } [data-theme="light"] .pillar-monitor .layer-num { color: #b8730a; } [data-theme="light"] .pillar-respond .layer-num { color: #5b3fd4; } [data-theme="light"] .pillar-sustain .layer-num { color: #c0392b; } .layer-icon { font-size: 20px; flex-shrink: 0; } .layer-icon.icon-svg, .comp-icon.icon-svg { display: inline-flex; align-items: center; justify-content: center; } .layer-icon.icon-svg svg, .comp-icon.icon-svg svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } /* Layer & component icons — match pillar colors */ .pillar-define .layer-icon, .pillar-define .comp-icon { color: #7dd3ff; } .pillar-enforce .layer-icon, .pillar-enforce .comp-icon { color: #7dd9a0; } .pillar-monitor .layer-icon, .pillar-monitor .comp-icon { color: #ffd97a; } .pillar-respond .layer-icon, .pillar-respond .comp-icon { color: #a78bfa; } .pillar-sustain .layer-icon, .pillar-sustain .comp-icon { color: #f08989; } [data-theme="light"] .pillar-define .layer-icon, [data-theme="light"] .pillar-define .comp-icon { color: #0e7a9e; } [data-theme="light"] .pillar-enforce .layer-icon, [data-theme="light"] .pillar-enforce .comp-icon { color: #2d8a3e; } [data-theme="light"] .pillar-monitor .layer-icon, [data-theme="light"] .pillar-monitor .comp-icon { color: #b8730a; } [data-theme="light"] .pillar-respond .layer-icon, [data-theme="light"] .pillar-respond .comp-icon { color: #5b3fd4; } [data-theme="light"] .pillar-sustain .layer-icon, [data-theme="light"] .pillar-sustain .comp-icon { color: #c0392b; } .layer-name { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; flex: 1; } /* Pillar-tinted title — dark mode */ .pillar-define .layer-name { color: #7dd3ff; } .pillar-enforce .layer-name { color: #7dd9a0; } .pillar-monitor .layer-name { color: #ffd97a; } .pillar-respond .layer-name { color: #a78bfa; } .pillar-sustain .layer-name { color: #f08989; } /* Body text — mid gray */ .layer-desc { color: #777; } [data-theme="light"] .layer-desc { color: var(--muted); } /* Pillar-tinted title — light mode */ [data-theme="light"] .pillar-define .layer-name { color: #0e7a9e; } [data-theme="light"] .pillar-enforce .layer-name { color: #2d8a3e; } [data-theme="light"] .pillar-monitor .layer-name { color: #b8730a; } [data-theme="light"] .pillar-respond .layer-name { color: #5b3fd4; } [data-theme="light"] .pillar-sustain .layer-name { color: #c0392b; } .layer-tag { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 10px; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.1em; text-transform: uppercase; } .tag-define { background: rgba(76, 201, 240, 0.15); color: #4cc9f0; } .tag-enforce { background: rgba(79, 180, 100, 0.25); color: #4fb864; } .tag-monitor { background: rgba(255, 193, 69, 0.15); color: #ffc145; } .tag-respond { background: rgba(124, 92, 252, 0.15); color: #7c5cfc; } .tag-sustain { background: rgba(220, 80, 80, 0.25); color: #e06060; } [data-theme="light"] .tag-define { color: #0e7a9e; } [data-theme="light"] .tag-enforce { color: #2d8a3e; } [data-theme="light"] .tag-monitor { color: #b8730a; } [data-theme="light"] .tag-respond { color: #5b3fd4; } [data-theme="light"] .tag-sustain { color: #c0392b; } .layer-desc { font-family: 'IBM Plex Mono', monospace; font-weight: 500; margin-top: 12px; margin-left: 36px; font-size: 13px; line-height: 1.6; display: none; } .layer.expanded .layer-desc { display: block; } .layer-chevron { font-size: 12px; color: var(--muted); transition: transform 0.2s; } .layer.expanded .layer-chevron { transform: rotate(180deg); } .pillar-label { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); padding: 20px 0 8px; display: flex; align-items: baseline; gap: 0; } .pillar-label-name { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; } .pillar-define .pillar-label-name { color: #7dd3ff; } .pillar-enforce .pillar-label-name { color: #7dd9a0; } .pillar-monitor .pillar-label-name { color: #ffd97a; } .pillar-respond .pillar-label-name { color: #a78bfa; } .pillar-sustain .pillar-label-name { color: #f08989; } [data-theme="light"] .pillar-define .pillar-label-name { color: #0e7a9e; } [data-theme="light"] .pillar-enforce .pillar-label-name { color: #2d8a3e; } [data-theme="light"] .pillar-monitor .pillar-label-name { color: #b8730a; } [data-theme="light"] .pillar-respond .pillar-label-name { color: #5b3fd4; } [data-theme="light"] .pillar-sustain .pillar-label-name { color: #c0392b; } .pillar-label::after { content: ''; order: 1; flex: 1; height: 1px; background: var(--border); align-self: center; margin: 0 12px; } .pillar-label-desc { order: 2; } /* CAPABILITY MATRIX */ .matrix { max-width: 1000px; margin: 0 auto; overflow-x: auto; } .matrix-table { width: 100%; border-collapse: collapse; font-size: 13px; } .matrix-table th { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); color: var(--muted); white-space: nowrap; } .matrix-table th:first-child { color: var(--text); min-width: 200px; } .col-header { text-align: center !important; min-width: 100px; } .matrix-table tr { border-bottom: 1px solid var(--table-row-border); transition: background 0.15s; } .matrix-table tbody tr:hover { background: var(--table-hover); } .matrix-table td { padding: 12px 16px; vertical-align: middle; } .component-cell { display: flex; align-items: center; gap: 10px; } .comp-icon { font-size: 16px; } .comp-name { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); } .score-cell { text-align: center; vertical-align: middle; } .dot { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 22px; line-height: 1; } .dot-full { color: #22c55e; font-size: 24px; transform: translateY(-1px); } .dot-high { color: #eab308; transform: translateY(-1px); } .dot-med { color: transparent; -webkit-text-stroke: 1.5px #f97316; transform: translateY(-1px); } .dot-low { color: #ff3333; font-size: 20px; transform: translateY(-1px); } .dot-none { color: var(--muted); } .pillar-row td { padding: 6px 0; border-bottom: none; vertical-align: middle; } .pillar-row td .pillar-row-inner { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 8px; text-align: left; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; } .pillar-row.pillar-define td .pillar-row-inner { background: rgba(76, 201, 240, 0.15); color: #4cc9f0; } .pillar-row.pillar-enforce td .pillar-row-inner { background: rgba(79, 180, 100, 0.25); color: #4fb864; } .pillar-row.pillar-monitor td .pillar-row-inner { background: rgba(255, 193, 69, 0.15); color: #ffc145; } .pillar-row.pillar-respond td .pillar-row-inner { background: rgba(124, 92, 252, 0.15); color: #7c5cfc; } .pillar-row.pillar-sustain td .pillar-row-inner { background: rgba(220, 80, 80, 0.25); color: #e06060; } [data-theme="light"] .pillar-row.pillar-define td .pillar-row-inner { color: #0e7a9e; } [data-theme="light"] .pillar-row.pillar-enforce td .pillar-row-inner { color: #2d8a3e; } [data-theme="light"] .pillar-row.pillar-monitor td .pillar-row-inner { color: #b8730a; } [data-theme="light"] .pillar-row.pillar-respond td .pillar-row-inner { color: #5b3fd4; } [data-theme="light"] .pillar-row.pillar-sustain td .pillar-row-inner { color: #c0392b; } .matrix-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 24px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: 12px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-weight: 500; } .legend-item { display: flex; align-items: center; gap: 0; } .legend-item .dot { flex-shrink: 0; } .matrix-note { margin-top: 16px; padding: 14px 20px; background: rgba(34, 211, 238, 0.05); border: 1px solid rgba(34, 211, 238, 0.15); border-radius: 10px; font-size: 13px; color: var(--muted); line-height: 1.6; font-family: 'IBM Plex Mono', monospace; font-weight: 500; } [data-theme="light"] .matrix-note { background: rgba(5, 150, 105, 0.04); border-color: rgba(5, 150, 105, 0.2); } .matrix-note span { color: var(--accent); } .section-title { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 8px; } .section-sub { color: var(--muted); font-size: 13px; margin-bottom: 28px; } .matrix .section-title, .matrix .section-sub { text-align: center; } @media (max-width: 640px) { .col-header { min-width: 70px; } .matrix-table th, .matrix-table td { padding: 10px 10px; } .theme-toggle .toggle-label { display: none; } } /* FOOTER */ .page-footer { margin-top: 64px; padding: 24px 24px 48px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; border-top: 1px solid var(--border); } .footer-logo-link { display: flex; align-items: center; } .footer-logo { width: 160px; height: auto; object-fit: contain; object-position: left center; display: block; } [data-theme="dark"] .footer-logo-light, [data-theme="light"] .footer-logo-dark { display: none !important; } .page-footer .footer-nav { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 12px; letter-spacing: 0.08em; color: #E20000; text-decoration: none; transition: color 0.2s; } .page-footer .footer-nav:hover { color: #c40000; }