spb/airiskindex Public

1/*2  File:    globals.css3  Path:    apps/web/app/globals.css4  Project: AI Risk Index — airiskindex.io5  Author:  Simon-Pierre Boucher6  Contact: contact@spboucher.ai7  Copyright © 2026 Simon-Pierre Boucher. All rights reserved.89  Description: Design tokens (validated dataviz palette roles), card idiom, hero wash, drawer animation.10*/1112@tailwind base;13@tailwind components;14@tailwind utilities;1516/* Data-viz roles — reference palette (dataviz skill, references/palette.md).17   Charts reference roles, never raw hex; dark steps are selected, not flipped. */18:root {19  color-scheme: light;20  --page: #f9f9f7;21  --surface-1: #fcfcfb;22  --ink: #0b0b0b;23  --ink-2: #52514e;24  --muted: #898781;25  --grid: #e1e0d9;26  --baseline: #c3c2b7;27  --border: rgba(11, 11, 11, 0.1);28  --seq: #2a78d6; /* sequential blue 450 (light) */29  --seq-deep: #1c5cab;30  --seq-track: #cde2fb; /* lighter step of the same ramp (meter/bar track) */31  --wash: rgba(42, 120, 214, 0.1); /* series hue at ~10% — area wash */32  --header: rgba(252, 252, 251, 0.82);33}3435@media (prefers-color-scheme: dark) {36  :root {37    color-scheme: dark;38    --page: #0d0d0d;39    --surface-1: #1a1a19;40    --ink: #ffffff;41    --ink-2: #c3c2b7;42    --muted: #898781;43    --grid: #2c2c2a;44    --baseline: #383835;45    --border: rgba(255, 255, 255, 0.1);46    --seq: #3987e5; /* sequential blue 400 (dark) */47    --seq-deep: #6da7ec;48    --seq-track: #0d366b; /* recessive step of the same ramp on dark */49    --wash: rgba(57, 135, 229, 0.12);50    --header: rgba(13, 13, 13, 0.82);51  }52}5354html {55  scroll-behavior: smooth;56}5758body {59  background: var(--page);60  color: var(--ink);61  text-rendering: optimizeLegibility;62  -webkit-font-smoothing: antialiased;63}6465::selection {66  background: var(--seq);67  color: #ffffff;68}6970:focus-visible {71  outline: 2px solid var(--seq);72  outline-offset: 2px;73  border-radius: 4px;74}7576/* Hero backdrop — two soft washes of the series hue, light and airy. */77.hero-wash {78  background:79    radial-gradient(56rem 26rem at 85% -8%, var(--wash), transparent 62%),80    radial-gradient(40rem 22rem at 8% -14%, var(--wash), transparent 55%);81}8283/* Card idiom used across the site. */84.card {85  border: 1px solid var(--border);86  background: var(--surface-1);87  border-radius: 1rem;88}8990.card-hover {91  transition:92    border-color 160ms ease,93    box-shadow 160ms ease,94    transform 160ms ease;95}9697.card-hover:hover {98  border-color: var(--seq);99  box-shadow: 0 4px 20px -8px rgba(42, 120, 214, 0.25);100}101102@keyframes drawer-in {103  from {104    transform: translateX(100%);105  }106  to {107    transform: translateX(0);108  }109}110