init

app/globals.css

@@ -0,0 +1,96 @@
+@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;
+  }
+}