Repository Public
1@import 'tailwindcss';23/* Design tokens of the « SP » family. Light is luminous, dark is a deep black; .dark on <html> (or on any subtree, such4 as the media viewer) switches. Components use the semantic names only. The accent is an indigo → violet gradient,5 kept for main actions, active states and illustrations. */6@custom-variant dark (&:where(.dark, .dark *));7@theme {8 --font-sans: ui-sans-serif, -apple-system, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;9 --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;10 --color-bg: var(--bg);11 --color-surface: var(--surface);12 --color-raised: var(--raised);13 --color-hover: var(--hover);14 --color-line: var(--line);15 --color-line-strong: var(--line-strong);16 --color-ink: var(--ink);17 --color-ink-2: var(--ink-2);18 --color-ink-3: var(--ink-3);19 --color-accent: var(--accent);20 --color-accent-ink: var(--accent-ink);21 --color-accent-soft: var(--accent-soft);22 --color-danger: var(--danger);23 --color-danger-soft: var(--danger-soft);24 --color-ok: var(--ok);25 --color-ok-soft: var(--ok-soft);26 --color-warn: var(--warn);27 --color-warn-soft: var(--warn-soft);28 --radius-card: 20px;29 --shadow-pop: 0 24px 60px -18px rgb(10 8 40 / 0.34), 0 4px 14px -4px rgb(10 8 40 / 0.14);30 --shadow-card: 0 1px 2px rgb(16 14 50 / 0.04), 0 8px 24px -14px rgb(16 14 50 / 0.14);31 --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);32 --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);33}34:root {35 --bg: #f4f4f9; --surface: #ffffff; --raised: #ffffff; --hover: #ececf4; --line: #e6e6ef; --line-strong: #d0d0de;36 --ink: #0c0b16; --ink-2: #45455a; --ink-3: #6a6a80;37 --accent: #4f46e5; --accent-ink: #ffffff; --accent-soft: #eeedff;38 --grad-a: #4f46e5; --grad-b: #8b3dea; --grad-ink: #ffffff;39 --danger: #c5303b; --danger-soft: #fdecee; --ok: #177a4b; --ok-soft: #e4f6ec; --warn: #8f5400; --warn-soft: #fff3db;40 --glass: rgb(255 255 255 / 0.72); --glass-line: rgb(16 14 50 / 0.08); --scrim: rgb(12 11 30 / 0.38);41 --aurora-1: rgb(99 102 241 / 0.28); --aurora-2: rgb(168 85 247 / 0.24); --aurora-3: rgb(56 189 248 / 0.16);42 --dock: calc(84px + env(safe-area-inset-bottom));43 color-scheme: light;44}45.dark {46 --bg: #050508; --surface: #0f0f15; --raised: #17171f; --hover: #1d1d27; --line: #23232e; --line-strong: #343444;47 --ink: #f5f5fa; --ink-2: #b0b0c2; --ink-3: #8585a0;48 --accent: #a5a3ff; --accent-ink: #0a0a14; --accent-soft: #1c1b3d;49 --grad-a: #5b52f0; --grad-b: #8b3dea; --grad-ink: #ffffff;50 --danger: #ff7b85; --danger-soft: #3a161b; --ok: #4fd08c; --ok-soft: #12301f; --warn: #f2b84b; --warn-soft: #33260c;51 --glass: rgb(18 18 26 / 0.72); --glass-line: rgb(255 255 255 / 0.09); --scrim: rgb(0 0 0 / 0.6);52 --aurora-1: rgb(99 102 241 / 0.34); --aurora-2: rgb(168 85 247 / 0.26); --aurora-3: rgb(56 189 248 / 0.12);53 /* the theme layer is resolved where it is declared: repeat it so a dark subtree inside a light page works */54 --color-bg: var(--bg); --color-surface: var(--surface); --color-raised: var(--raised); --color-hover: var(--hover); --color-line: var(--line);55 --color-line-strong: var(--line-strong); --color-ink: var(--ink); --color-ink-2: var(--ink-2); --color-ink-3: var(--ink-3);56 --color-accent: var(--accent); --color-accent-ink: var(--accent-ink); --color-accent-soft: var(--accent-soft);57 --color-danger: var(--danger); --color-danger-soft: var(--danger-soft); --color-ok: var(--ok); --color-ok-soft: var(--ok-soft);58 --color-warn: var(--warn); --color-warn-soft: var(--warn-soft);59 --shadow-pop: 0 24px 60px -18px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.06);60 --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.045);61 color-scheme: dark;62 color: var(--ink);63}64@media (min-width: 1024px) { :root { --dock: 0px; } }6566html, body, #root { height: 100%; }67body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; font-feature-settings: 'cv11', 'ss01'; text-rendering: optimizeLegibility; }68:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }69::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }70h1, h2, h3 { letter-spacing: -0.02em; }71@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }72.safe-b { padding-bottom: max(env(safe-area-inset-bottom), 0px); }73.safe-t { padding-top: env(safe-area-inset-top); }74/* room for the floating tab bar of phones and tablets (0 on a desktop) */75.pb-dock { padding-bottom: calc(var(--dock) + 1.5rem); }7677/* --- surfaces --- */78.glass { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: 1px solid var(--glass-line); }7980.hairline-b { box-shadow: 0 1px 0 var(--line); }8182/* --- the gradient: main actions and active states --- */83.grad { background-image: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: var(--grad-ink); }84.btn-grad { background-image: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: var(--grad-ink); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--grad-b) 75%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22); }85.btn-grad:hover { filter: brightness(1.08); }86.text-grad { background-image: linear-gradient(120deg, var(--grad-a), var(--grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }87.dark .text-grad { background-image: linear-gradient(120deg, #a5a3ff, #d0a3ff); }88.press { transition: transform 0.18s var(--ease-spring), filter 0.15s, background-color 0.15s, color 0.15s, box-shadow 0.2s, opacity 0.15s; }89.press:active { transform: scale(0.96); }9091/* --- aurora: the soft coloured light behind the sign-in and public pages --- */92.aurora { position: relative; isolation: isolate; }93.aurora::before {94 content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;95 background:96 radial-gradient(60% 46% at 12% 0%, var(--aurora-1), transparent 70%),97 radial-gradient(52% 40% at 92% 6%, var(--aurora-2), transparent 70%),98 radial-gradient(60% 40% at 60% 100%, var(--aurora-3), transparent 72%);99 animation: aurora 18s ease-in-out infinite alternate;100}101@keyframes aurora { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, -2.5%, 0) scale(1.08); } }102103/* --- motion --- */104@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }105@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }106@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }107@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }108@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }109@keyframes float { from { transform: translateY(0); } to { transform: translateY(-6px); } }110.anim-pop { animation: pop-in 0.26s var(--ease-spring); }111.anim-fade { animation: fade-in 0.2s ease-out; }112.anim-rise { animation: rise 0.45s var(--ease-spring) both; }113.anim-float { animation: float 3.2s ease-in-out infinite alternate; }114/* a dialog: a sheet that slides up on a phone, a card that pops on larger screens */115.anim-sheet { animation: sheet-up 0.42s var(--ease-spring); }116@media (min-width: 640px) { .anim-sheet { animation: pop-in 0.26s var(--ease-spring); } }117/* the first entries of a list arrive one after the other */118.stagger > * { animation: rise 0.42s var(--ease-spring) both; }119.stagger > :nth-child(2) { animation-delay: 25ms; } .stagger > :nth-child(3) { animation-delay: 50ms; } .stagger > :nth-child(4) { animation-delay: 75ms; }120.stagger > :nth-child(5) { animation-delay: 100ms; } .stagger > :nth-child(6) { animation-delay: 125ms; } .stagger > :nth-child(7) { animation-delay: 150ms; }121.stagger > :nth-child(8) { animation-delay: 175ms; } .stagger > :nth-child(9) { animation-delay: 200ms; } .stagger > :nth-child(10) { animation-delay: 225ms; }122.stagger > :nth-child(11) { animation-delay: 250ms; } .stagger > :nth-child(12) { animation-delay: 275ms; } .stagger > :nth-child(n + 13) { animation-delay: 300ms; }123.skeleton { background: linear-gradient(100deg, var(--hover) 30%, color-mix(in srgb, var(--hover) 40%, var(--surface)) 50%, var(--hover) 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }124.progress-live { background-image: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-a)); background-size: 200% 100%; animation: shimmer 2.2s linear infinite; }125::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }126127/* thin scrollbars where a pointer shows them */128@media (hover: hover) { * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } }129.no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }130131@utility card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }132