130 lines
3.6 KiB
CSS
130 lines
3.6 KiB
CSS
@import "tailwindcss";
|
||
@import "@fontsource/chakra-petch/latin-500.css";
|
||
@import "@fontsource/chakra-petch/latin-600.css";
|
||
@import "@fontsource/chakra-petch/latin-700.css";
|
||
@import "@fontsource/barlow/latin-400.css";
|
||
@import "@fontsource/barlow/latin-500.css";
|
||
@import "@fontsource/barlow/latin-600.css";
|
||
|
||
/* "Freight terminal HUD" theme (CR-005, decisions 0.5.47–0.5.48). */
|
||
@theme {
|
||
--font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;
|
||
--font-display: "Chakra Petch", "Barlow", ui-sans-serif, system-ui, sans-serif;
|
||
|
||
/* Surfaces, darkest first. */
|
||
--color-space-950: #03050d;
|
||
--color-space-900: #080d1d;
|
||
--color-space-850: #0c132a;
|
||
--color-space-800: #111a36;
|
||
--color-space-700: #1a2548;
|
||
--color-space-600: #26345f;
|
||
--color-space-500: #3a4a7c;
|
||
|
||
/* Text. */
|
||
--color-ink-50: #f2f5ff;
|
||
--color-ink-200: #c9d3ef;
|
||
--color-ink-300: #a3afd3;
|
||
--color-ink-400: #7e8bb3;
|
||
--color-ink-500: #5c688f;
|
||
|
||
--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;
|
||
}
|
||
/* Every screen sits in space: the map background, dimmed (decision 0.5.47). */
|
||
body::before {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: -1;
|
||
background:
|
||
radial-gradient(ellipse 80% 60% at 50% 0%, rgb(56 189 248 / 0.1), transparent 70%),
|
||
linear-gradient(180deg, rgb(3 5 13 / 0.5), rgb(3 5 13 / 0.82)),
|
||
url("/assets/map-gen/bg.webp") center / cover no-repeat,
|
||
var(--color-space-950);
|
||
}
|
||
:focus-visible {
|
||
outline: 2px solid var(--color-amber-400);
|
||
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;
|
||
}
|