97 lines
3.1 KiB
CSS
97 lines
3.1 KiB
CSS
|
@import "tailwindcss";
|
||
|
|
|
||
|
|
/* ============================================================
|
||
|
|
Wayfarer theme — Tailwind v4.
|
||
|
|
Tokens here become utilities: bg-gold, text-stone, font-pixel…
|
||
|
|
All styling lives as utility classes in the components.
|
||
|
|
============================================================ */
|
||
|
|
|
||
|
|
/* `static` keeps every color as a CSS variable even if no class uses it,
|
||
|
|
because the pixel sprites reference them directly (lib/pixel-art.ts). */
|
||
|
|
@theme static {
|
||
|
|
--color-black: #000000;
|
||
|
|
--color-panel: #0a0905; /* faint warmth inside frames so gold reads as metal */
|
||
|
|
--color-gold: #c9a54c;
|
||
|
|
--color-gold-dim: #5c4a1f;
|
||
|
|
--color-gold-bright: #f2d98b;
|
||
|
|
--color-ink: #e8e0c9;
|
||
|
|
--color-stone: #857e6c;
|
||
|
|
--color-teal: #58cbbd;
|
||
|
|
--color-teal-off: #1d2a28;
|
||
|
|
--color-heart: #d64a3c;
|
||
|
|
--color-heart-empty: #4a2420;
|
||
|
|
}
|
||
|
|
|
||
|
|
@theme {
|
||
|
|
--font-display: "Cinzel", Georgia, serif;
|
||
|
|
--font-pixel: "Silkscreen", system-ui, sans-serif;
|
||
|
|
--font-sans: "IBM Plex Sans", system-ui, sans-serif;
|
||
|
|
|
||
|
|
/* The one ambient motion: the hero sprite drifts like a held item. */
|
||
|
|
--animate-float: float 3.2s ease-in-out infinite;
|
||
|
|
@keyframes float {
|
||
|
|
50% {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Cut-corner shape for every frame. Set the corner size per element
|
||
|
|
with [--cut:22px]; it defaults to 14px. */
|
||
|
|
@utility chamfer {
|
||
|
|
clip-path: polygon(
|
||
|
|
var(--cut, 14px) 0, calc(100% - var(--cut, 14px)) 0, 100% var(--cut, 14px),
|
||
|
|
100% calc(100% - var(--cut, 14px)), calc(100% - var(--cut, 14px)) 100%,
|
||
|
|
var(--cut, 14px) 100%, 0 calc(100% - var(--cut, 14px)), 0 var(--cut, 14px)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Leaflet builds its own controls, so they can't take utility classes.
|
||
|
|
Two things make these overrides win over leaflet.css:
|
||
|
|
- they are NOT in an @layer (unlayered CSS always beats layered CSS), and
|
||
|
|
- each starts with .leaflet-container, so it is more specific than Leaflet's
|
||
|
|
own rule even though leaflet.css loads later. */
|
||
|
|
.leaflet-container {
|
||
|
|
@apply bg-black font-sans;
|
||
|
|
}
|
||
|
|
.leaflet-container .leaflet-bar {
|
||
|
|
@apply rounded-none border border-gold-dim shadow-none;
|
||
|
|
}
|
||
|
|
.leaflet-container .leaflet-bar a {
|
||
|
|
@apply rounded-none border-gold-dim bg-black text-gold-bright;
|
||
|
|
}
|
||
|
|
.leaflet-container .leaflet-bar a:hover,
|
||
|
|
.leaflet-container .leaflet-bar a:focus-visible {
|
||
|
|
@apply bg-gold text-black;
|
||
|
|
}
|
||
|
|
.leaflet-container .leaflet-control.leaflet-control-attribution {
|
||
|
|
@apply bg-black/70 text-[10px] text-stone;
|
||
|
|
}
|
||
|
|
.leaflet-container .leaflet-control-attribution a {
|
||
|
|
@apply text-gold;
|
||
|
|
}
|
||
|
|
|
||
|
|
@layer base {
|
||
|
|
html {
|
||
|
|
color-scheme: dark;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
@apply min-h-dvh bg-black font-sans text-ink antialiased;
|
||
|
|
/* A single low ember of light behind the hero; the rest stays pure black. */
|
||
|
|
background-image:
|
||
|
|
radial-gradient(ellipse 65% 42% at 50% 10%, rgb(201 165 76 / 0.11), transparent 72%),
|
||
|
|
radial-gradient(ellipse 40% 30% at 80% 24%, rgb(88 203 189 / 0.04), transparent 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hide the browser's unstyled native clear button on search inputs; PlaceSearch renders its own. */
|
||
|
|
input[type="search"]::-webkit-search-cancel-button {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
:focus-visible {
|
||
|
|
@apply outline-2 outline-offset-3 outline-teal;
|
||
|
|
}
|
||
|
|
}
|