spb/spboucher.ai Public

1/*2  globals.css3  spboucher.ai Web4  Author: Simon-Pierre Boucher5  Mail: contact@spboucher.ai6*/78@import "tailwindcss";910@custom-variant dark (&:where(.dark, .dark *));1112/* "Quantitative editorial" palette — warm paper, ink, one indigo accent. */13:root {14  --background: oklch(0.972 0.006 85);15  --foreground: oklch(0.245 0.016 75);16  --card: oklch(0.993 0.0035 85);17  --card-foreground: oklch(0.245 0.016 75);18  --muted: oklch(0.944 0.008 85);19  --muted-foreground: oklch(0.475 0.022 78);20  --primary: oklch(0.44 0.155 268);21  --primary-foreground: oklch(0.985 0.004 85);22  --secondary: oklch(0.933 0.01 85);23  --secondary-foreground: oklch(0.3 0.02 75);24  --accent: oklch(0.928 0.012 85);25  --accent-foreground: oklch(0.3 0.02 75);26  --border: oklch(0.878 0.014 82);27  --ring: oklch(0.44 0.155 268);28  --aura-a: oklch(0.44 0.155 268 / 5%);29  --aura-b: oklch(0.62 0.09 60 / 5%);30}3132.dark {33  --background: oklch(0.185 0.008 75);34  --foreground: oklch(0.925 0.01 85);35  --card: oklch(0.223 0.01 78);36  --card-foreground: oklch(0.925 0.01 85);37  --muted: oklch(0.258 0.012 78);38  --muted-foreground: oklch(0.7 0.018 82);39  --primary: oklch(0.73 0.115 268);40  --primary-foreground: oklch(0.185 0.008 75);41  --secondary: oklch(0.273 0.014 78);42  --secondary-foreground: oklch(0.925 0.01 85);43  --accent: oklch(0.285 0.014 78);44  --accent-foreground: oklch(0.925 0.01 85);45  --border: oklch(0.302 0.014 78);46  --ring: oklch(0.73 0.115 268);47  --aura-a: oklch(0.73 0.115 268 / 7%);48  --aura-b: oklch(0.65 0.08 60 / 4%);49}5051@theme inline {52  --color-background: var(--background);53  --color-foreground: var(--foreground);54  --color-card: var(--card);55  --color-card-foreground: var(--card-foreground);56  --color-muted: var(--muted);57  --color-muted-foreground: var(--muted-foreground);58  --color-primary: var(--primary);59  --color-primary-foreground: var(--primary-foreground);60  --color-secondary: var(--secondary);61  --color-secondary-foreground: var(--secondary-foreground);62  --color-accent: var(--accent);63  --color-accent-foreground: var(--accent-foreground);64  --color-border: var(--border);65  --color-ring: var(--ring);66  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;67  --font-display: var(--font-fraunces), "Iowan Old Style", Georgia, serif;68  --font-mono: var(--font-plex-mono), ui-monospace, "SF Mono", Menlo, monospace;69  --radius-4xl: 1.75rem;70  --shadow-soft: 0 1px 2px oklch(0.245 0.016 75 / 4%);71  --shadow-lift: 0 1px 2px oklch(0.245 0.016 75 / 5%),72    0 12px 28px -14px oklch(0.245 0.016 75 / 14%);73  --shadow-glow: 0 0 0 1px oklch(0.44 0.155 268 / 8%),74    0 10px 32px -10px oklch(0.44 0.155 268 / 14%);75}7677html {78  scroll-behavior: smooth;79}8081body {82  background-color: var(--background);83  color: var(--foreground);84  font-family: var(--font-sans);85  -webkit-font-smoothing: antialiased;86  text-rendering: optimizeLegibility;87}8889/* Ambient auras behind the whole site — quiet, fixed, and theme-aware. */90body::before {91  content: "";92  position: fixed;93  inset: 0;94  z-index: -10;95  pointer-events: none;96  background:97    radial-gradient(56rem 30rem at 88% -6%, var(--aura-a), transparent 60%),98    radial-gradient(48rem 26rem at -4% 4%, var(--aura-b), transparent 55%),99    radial-gradient(60rem 32rem at 50% 110%, var(--aura-b), transparent 60%);100}101102/* Faint graph-paper grid above the auras — the econometrician's backdrop —103   faded out toward the lower half of the viewport so content stays quiet. */104body::after {105  content: "";106  position: fixed;107  inset: 0;108  z-index: -9;109  pointer-events: none;110  background-image:111    linear-gradient(to right, oklch(0.44 0.155 268 / 6%) 1px, transparent 1px),112    linear-gradient(to bottom, oklch(0.44 0.155 268 / 6%) 1px, transparent 1px);113  background-size: 34px 34px;114  mask-image: radial-gradient(64rem 36rem at 72% -10%, black 12%, transparent 70%);115}116117.dark body::after {118  background-image:119    linear-gradient(to right, oklch(0.73 0.115 268 / 7%) 1px, transparent 1px),120    linear-gradient(to bottom, oklch(0.73 0.115 268 / 7%) 1px, transparent 1px);121}122123/* Subtle, theme-aware scrollbar. */124::-webkit-scrollbar {125  width: 10px;126}127::-webkit-scrollbar-thumb {128  border-radius: 9999px;129  border: 3px solid var(--background);130  background-color: color-mix(in oklch, var(--muted-foreground) 35%, transparent);131}132::-webkit-scrollbar-thumb:hover {133  background-color: color-mix(in oklch, var(--muted-foreground) 55%, transparent);134}135136::selection {137  background: oklch(0.44 0.155 268 / 16%);138}139140/* Framer Motion reveals bake opacity:0 into SSR inline styles; guarantee141   visibility when animations cannot run (reduced motion or JS disabled). */142@media (prefers-reduced-motion: reduce) {143  [data-reveal] {144    opacity: 1 !important;145    transform: none !important;146  }147}148