189 lines
5.4 KiB
CSS
189 lines
5.4 KiB
CSS
@import "tailwindcss";
|
|
@import "@fontsource/michroma/latin-400.css";
|
|
@import "@fontsource/instrument-sans/latin-400.css";
|
|
@import "@fontsource/instrument-sans/latin-500.css";
|
|
@import "@fontsource/instrument-sans/latin-600.css";
|
|
@import "@fontsource/instrument-sans/latin-700.css";
|
|
|
|
/* "Deep Field" theme (CR-029, decision 0.5.165). */
|
|
@theme {
|
|
--font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
|
|
/* The wordmark and screen titles only. */
|
|
--font-title: "Michroma", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
|
|
/* Emphasised labels and numbers, used across the screens. */
|
|
--font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
|
|
|
|
/* Surfaces, darkest first. */
|
|
--color-space-950: #050919;
|
|
--color-space-900: #0a1228;
|
|
--color-space-850: #0d152e;
|
|
--color-space-800: #121c3a;
|
|
--color-space-700: #1c284e;
|
|
--color-space-600: #2a3863;
|
|
--color-space-500: #3f4f81;
|
|
|
|
/* Text. Every step stays readable on the glass, whatever is behind it. */
|
|
--color-ink-50: #f0f3ff;
|
|
--color-ink-100: #e2e7f7;
|
|
--color-ink-200: #d3daef;
|
|
--color-ink-300: #b9c4e0;
|
|
--color-ink-400: #abb6d4;
|
|
--color-ink-500: #a0accd;
|
|
|
|
/* Roles (decision 0.5.165). */
|
|
--color-glass: rgb(13 21 46 / 0.82);
|
|
--color-glass-line: rgb(170 195 255 / 0.18);
|
|
--color-action: #ffc04d; /* The main action, and the player's own ship. */
|
|
--color-on-action: #241700;
|
|
--color-flight: #93c9ff; /* Other ships' flights. */
|
|
--color-earned: #84e3b5; /* Money earned. */
|
|
--color-problem: #ff8d7a; /* Something needs attention. */
|
|
--color-on-problem: #2a0a05;
|
|
|
|
/* Accent scales in the role hues: amber action, blue flight, mint earned, coral problem. */
|
|
--color-amber-50: #fff8e8;
|
|
--color-amber-100: #fff0d1;
|
|
--color-amber-200: #ffe2a8;
|
|
--color-amber-300: #ffd27a;
|
|
--color-amber-400: #ffc04d;
|
|
--color-amber-500: #f5a623;
|
|
--color-amber-600: #c97f10;
|
|
--color-amber-700: #9c620f;
|
|
--color-amber-800: #7a4d10;
|
|
--color-amber-900: #5c3b10;
|
|
--color-amber-950: #2e1c04;
|
|
--color-cyan-50: #eef6ff;
|
|
--color-cyan-100: #dcedff;
|
|
--color-cyan-200: #bddcff;
|
|
--color-cyan-300: #93c9ff;
|
|
--color-cyan-400: #68aef5;
|
|
--color-cyan-500: #4690e0;
|
|
--color-cyan-600: #2f74c2;
|
|
--color-cyan-700: #2a5c98;
|
|
--color-cyan-800: #244a78;
|
|
--color-cyan-900: #1f3d61;
|
|
--color-cyan-950: #122540;
|
|
--color-sky-50: #eef6ff;
|
|
--color-sky-100: #dcedff;
|
|
--color-sky-200: #bddcff;
|
|
--color-sky-300: #93c9ff;
|
|
--color-sky-400: #68aef5;
|
|
--color-sky-500: #4690e0;
|
|
--color-sky-600: #2f74c2;
|
|
--color-sky-700: #2a5c98;
|
|
--color-sky-800: #244a78;
|
|
--color-sky-900: #1f3d61;
|
|
--color-sky-950: #122540;
|
|
--color-emerald-50: #eafbf3;
|
|
--color-emerald-100: #d0f6e4;
|
|
--color-emerald-200: #aaf0cf;
|
|
--color-emerald-300: #84e3b5;
|
|
--color-emerald-400: #5ed09a;
|
|
--color-emerald-500: #3db680;
|
|
--color-emerald-600: #2c9367;
|
|
--color-emerald-700: #267553;
|
|
--color-emerald-800: #215d44;
|
|
--color-emerald-900: #1c4c39;
|
|
--color-emerald-950: #0e2c21;
|
|
--color-rose-50: #fff2ef;
|
|
--color-rose-100: #ffe2db;
|
|
--color-rose-200: #ffc8bb;
|
|
--color-rose-300: #ffa896;
|
|
--color-rose-400: #ff8d7a;
|
|
--color-rose-500: #f56f5a;
|
|
--color-rose-600: #dc5340;
|
|
--color-rose-700: #b54232;
|
|
--color-rose-800: #8f372b;
|
|
--color-rose-900: #732f26;
|
|
--color-rose-950: #3f1610;
|
|
|
|
/* Selection rings, without the old neon blur. */
|
|
--shadow-glow-amber: 0 0 0 1px rgb(255 192 77 / 0.55);
|
|
--shadow-glow-cyan: 0 0 0 1px rgb(147 201 255 / 0.5);
|
|
--shadow-glow-emerald: 0 0 0 1px rgb(132 227 181 / 0.5);
|
|
--shadow-panel: 0 10px 30px -14px rgb(0 0 0 / 0.7);
|
|
|
|
--animate-rise: rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
|
--animate-glow: glow 2.4s ease-in-out infinite;
|
|
--animate-sheet: sheet 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
|
--animate-slide: slide 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
|
|
|
@keyframes rise {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes glow {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.55;
|
|
}
|
|
}
|
|
@keyframes slide {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(32px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes sheet {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
body {
|
|
background-color: var(--color-space-950);
|
|
color: var(--color-ink-50);
|
|
font-family: var(--font-sans);
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-action);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Motion is decoration only: switch it off when asked. The app sets
|
|
* data-reduced-motion on <html> from the player's setting (CR-011); without
|
|
* an override it follows the device.
|
|
*/
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root:not([data-reduced-motion="false"]) *,
|
|
:root:not([data-reduced-motion="false"]) *::before,
|
|
:root:not([data-reduced-motion="false"]) *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
:root[data-reduced-motion="true"] *,
|
|
:root[data-reduced-motion="true"] *::before,
|
|
:root[data-reduced-motion="true"] *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|