131 lines
3.8 KiB
CSS
131 lines
3.8 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;
|
|
|
|
--shadow-glow-amber: 0 0 0 1px rgb(251 191 36 / 0.45), 0 0 22px -4px rgb(251 191 36 / 0.6);
|
|
--shadow-glow-cyan: 0 0 0 1px rgb(34 211 238 / 0.4), 0 0 22px -4px rgb(34 211 238 / 0.55);
|
|
--shadow-glow-emerald: 0 0 0 1px rgb(52 211 153 / 0.4), 0 0 22px -4px rgb(52 211 153 / 0.55);
|
|
--shadow-panel: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 12px 32px -12px rgb(0 0 0 / 0.8);
|
|
|
|
--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;
|
|
}
|