/* ========================================================================== VESPO — Surgical Outcomes Intelligence Design tokens + component styles. No framework; theming via so charts restyle without re-rendering. ========================================================================== */ :root { /* Typography (Inter for UI, Space Grotesk for display; loaded via ) */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Space Grotesk", var(--font-sans); /* Surfaces & ink */ --page: #f9f9f7; --surface: #fcfcfb; --surface-2: #f0efec; --ink: #0b0b0b; --ink-2: #52514e; --ink-muted: #898781; --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11, 11, 11, 0.10); --shadow: 0 1px 2px rgba(11, 11, 11, 0.05), 0 4px 16px rgba(11, 11, 11, 0.04); /* Data series (validated categorical palette) */ --series-1: #2a78d6; /* planned / primary series */ --series-1-strong: #1c5cab; --series-1-soft: rgba(42, 120, 214, 0.16); --series-2: #e34948; /* emergency */ /* Tooltip (inverted card) */ --tip-bg: rgba(11, 11, 11, 0.92); --tip-ink: #ffffff; --tip-ink-2: #c3c2b7; /* Type scale */ --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --radius: 12px; --radius-sm: 8px; } [data-theme="dark"] { --page: #0d0d0d; --surface: #1a1a19; --surface-2: #242423; --ink: #ffffff; --ink-2: #c3c2b7; --ink-muted: #898781; --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, 0.10); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3); --series-1: #3987e5; --series-1-strong: #6da7ec; --series-1-soft: rgba(57, 135, 229, 0.20); --series-2: #e66767; --tip-bg: rgba(252, 252, 251, 0.96); --tip-ink: #0b0b0b; --tip-ink-2: #52514e; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color 0.25s ease, color 0.25s ease; } a { color: var(--series-1-strong); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; border-radius: 4px; } .shell { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 22px 0; } .header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .brand { display: flex; gap: 14px; align-items: flex-start; min-width: 0; } .brand-mark { width: 38px; height: 38px; flex: none; margin-top: 2px; } .brand-name { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; } .brand-sep { color: var(--ink-muted); font-weight: 400; } .brand-tag { color: var(--ink-2); font-weight: 600; } .brand-sub { margin: 4px 0 0; color: var(--ink-2); font-size: var(--text-sm); max-width: 62ch; } .header-actions { display: flex; gap: 8px; flex: none; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .icon-btn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } /* Theme toggle: show the icon for the theme you'd switch TO */ [data-theme="dark"] .icon-moon { display: none; } [data-theme="light"] .icon-sun, :root:not([data-theme="dark"]) .icon-sun { display: none; } [data-theme="dark"] .icon-sun { display: block; } /* -------------------------------------------------------------------------- Stats strip -------------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0 0; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; } .stat-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); } .stat-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Toolbar (filters + view tabs) -------------------------------------------------------------------------- */ .toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin: 20px 0 16px; } .control { display: flex; flex-direction: column; gap: 6px; } .control label, .control-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); } .control-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-muted); } .control select { appearance: none; -webkit-appearance: none; min-width: 190px; padding: 9px 34px 9px 12px; font: inherit; font-size: var(--text-sm); color: var(--ink); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23898781' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color 0.15s ease; } .control select:hover { border-color: var(--axis); } .control--tabs { margin-left: auto; } .tabs { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; } .tab { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--text-sm); font-weight: 550; padding: 7px 14px; border-radius: 7px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .tab:hover { color: var(--ink); } .tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(11, 11, 11, 0.12); } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 24px 24px; margin: 0 0 20px; transition: background-color 0.25s ease; } .card-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; } .card-title { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 650; letter-spacing: -0.01em; } .card-sub { margin: 2px 0 0; font-size: var(--text-sm); color: var(--ink-muted); } /* Legend */ .legend { display: flex; align-items: center; gap: 16px; font-size: var(--text-sm); color: var(--ink-2); padding-top: 4px; } .legend-item { display: inline-flex; align-items: center; gap: 7px; } .legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; } .legend-swatch--planned { background: var(--series-1); } .legend-swatch--emergency { background: var(--series-2); } /* -------------------------------------------------------------------------- Chart stage -------------------------------------------------------------------------- */ .chart-stage { position: relative; min-height: 320px; } .chart-area svg { display: block; width: 100%; height: auto; } /* Chart chrome — recessive hairline axes, muted tick text */ .chart-area .tick text, .wordcloud-area .tick text { font-size: 11px; font-family: inherit; fill: var(--ink-muted); } .chart-area .tick line { stroke: var(--grid); } .chart-area .domain { stroke: var(--axis); } .axis-label { font-size: 12px; font-weight: 600; fill: var(--ink-2); } .bar-label { font-size: 12px; font-weight: 600; fill: var(--ink-2); } /* Beeswarm dots */ .dot { transition: fill 0.25s ease; } .dot--planned { fill: var(--series-1); } .dot--emergency { fill: var(--series-2); } /* Bar chart */ .bar { fill: var(--series-1); transition: fill 0.15s ease; } .bar:hover, .bar.hover { fill: var(--series-1-strong); } /* Box plot */ .box { fill: var(--series-1-soft); stroke: var(--series-1); stroke-width: 1.5; transition: fill 0.15s ease; } .box:hover { fill: var(--series-1); fill-opacity: 0.35; } .median-line { stroke: var(--series-1-strong); stroke-width: 2; } .whisker-line { stroke: var(--series-1); stroke-width: 1; } /* Sunburst */ .arc { cursor: pointer; transition: fill 0.25s ease; } .arc--planned { fill: var(--series-1); } .arc--emergency { fill: var(--series-2); } .sunburst-label { font-size: 11px; font-family: inherit; fill: var(--ink-2); pointer-events: none; } .central-label { fill: var(--ink); font-weight: 650; } .central-sublabel { fill: var(--ink-muted); font-size: 13px; } /* Word cloud */ .wordcloud-area { min-height: 320px; } .wordcloud-area svg { display: block; width: 100%; height: auto; } .wordcloud-text { fill: var(--series-1); font-family: inherit; font-weight: 650; cursor: default; transition: fill 0.15s ease; } .wordcloud-text:hover { fill: var(--series-2); } /* Explanation panel */ .explanation { margin-top: 16px; padding: 12px 16px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--ink-2); line-height: 1.6; } .explanation:empty { display: none; } .explanation strong { color: var(--ink); } /* Empty / error states */ .chart-message { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 320px; text-align: center; color: var(--ink-2); font-size: var(--text-sm); } .chart-message .title { font-size: var(--text-base); font-weight: 600; color: var(--ink); } .retry-btn { margin-top: 6px; padding: 8px 16px; font: inherit; font-size: var(--text-sm); font-weight: 600; color: #fff; background: var(--series-1); border: 0; border-radius: var(--radius-sm); cursor: pointer; } .retry-btn:hover { background: var(--series-1-strong); } /* Loading overlay */ .loading-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(2px); border-radius: var(--radius-sm); z-index: 5; } .loading-overlay[hidden] { display: none; } .loading-text { margin: 0; font-size: var(--text-sm); color: var(--ink-2); } .spinner { width: 34px; height: 34px; border: 3px solid var(--grid); border-top-color: var(--series-1); border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- Tooltip -------------------------------------------------------------------------- */ .tooltip { position: absolute; max-width: 260px; padding: 9px 12px; background: var(--tip-bg); color: var(--tip-ink); border-radius: var(--radius-sm); font-size: 12px; line-height: 1.5; pointer-events: none; z-index: 100; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.12s ease; } .tooltip.visible { opacity: 1; } .tooltip .tip-title { font-weight: 650; margin-bottom: 2px; } .tooltip .tip-row { display: flex; justify-content: space-between; gap: 14px; } .tooltip .tip-row .k { color: var(--tip-ink-2); } .tooltip .tip-row .v { font-weight: 600; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { margin-top: 28px; background: var(--surface); border-top: 1px solid var(--border); padding: 28px 0 20px; font-size: var(--text-sm); color: var(--ink-2); } .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .site-footer h3 { margin: 0 0 6px; font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); } .site-footer p { margin: 0; max-width: 60ch; } .footer-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--ink-muted); font-size: var(--text-xs); } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } .control--tabs { margin-left: 0; width: 100%; } .footer-grid { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 560px) { .header-row { flex-direction: column; } .header-actions { align-self: flex-end; margin-top: -34px; } .brand-sub { max-width: none; } .toolbar { gap: 12px; } .control { flex: 1 1 45%; } .control select { min-width: 0; width: 100%; } .tabs { width: 100%; } .tab { flex: 1; text-align: center; } .card { padding: 16px; } .stat-value { font-size: 1.25rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: 0.01ms !important; } }