/* ── TrolleyNet Design Tokens ── */ :root { /* Purple ramp */ --purple-50: hsl(265, 47%, 95%); --purple-200: hsl(256, 46%, 83%); --purple-400: hsl(260, 74%, 66%); --purple-500: hsl(260, 63%, 54%); --purple-700: hsl(260, 58%, 42%); --purple-900: hsl(260, 60%, 26%); /* Amber ramp */ --amber-50: hsl(43, 100%, 95%); --amber-200: hsl(43, 100%, 80%); --amber-400: hsl(43, 100%, 48%); --amber-500: hsl(38, 88%, 41%); --amber-700: hsl(38, 100%, 29%); --amber-900: hsl(38, 100%, 18%); /* Semantic */ --success: hsl(142, 68%, 30%); --success-bg: hsl(138, 77%, 93%); --danger: hsl(0, 72%, 51%); --danger-bg: hsl(0, 93%, 94%); /* border radius sizings */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 9999px; /* Monospace font */ --mono: "SF Mono", "Fira Code", "Cascadia Code", monospace; --status-active: var(--success); --status-missing: var(--amber-400); --status-lost: var(--danger); } /* Light theme — applied via data-theme on and class on */ [data-theme="light"], body.light { --bg: hsl(255, 33%, 97%); --bg-base: hsl(255, 33%, 97%); --bg-surface: hsl(0, 0%, 100%); --bg-subtle: hsl(255, 47%, 95%); --bg-overlay: hsl(254, 38%, 89%); --border: hsl(253, 34%, 84%); --border-strong: hsl(252, 30%, 75%); --text-primary: hsl(260, 48%, 13%); --text-secondary: hsl(257, 22%, 34%); --text-muted: hsl(254, 16%, 59%); --muted: hsl(254, 16%, 59%); --text-accent: hsl(260, 63%, 54%); --primary: var(--purple-500); --primary-lt: var(--purple-400); --primary-dk: var(--purple-700); --accent: var(--amber-500); --accent-lt: var(--amber-400); --accent-bg: var(--amber-50); } /* Dark theme */ [data-theme="dark"], body.dark { --bg: hsl(262, 32%, 9%); --bg-base: hsl(0, 0%, 0%); --bg-surface: hsl(244, 30%, 14%); --bg-subtle: hsl(246, 32%, 19%); --bg-overlay: hsl(248, 35%, 25%); --border: hsl(250, 30%, 27%); --border-strong: hsl(252, 25%, 35%); --text-primary: hsl(255, 100%, 97%); --text-secondary: hsl(252, 22%, 76%); --text-muted: hsl(252, 17%, 53%); --muted: hsl(252, 17%, 53%); --text-accent: hsl(265, 100%, 81%); --primary: var(--purple-400); --primary-lt: var(--purple-200); --primary-dk: var(--purple-500); --accent: var(--amber-400); --accent-lt: var(--amber-200); --accent-bg: hsl(43, 100%, 50%, 0.13); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg-base); color: var(--text-primary); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; margin: 0; height: 100vh; display: flex; flex-direction: column; } /* ── Header ── */ header { background-color: var(--bg-surface); padding: 0 10px 0 20px; display: flex; align-items: center; gap: 20px; box-shadow: 0 1px 0 var(--border); flex-shrink: 0; z-index: 2000; position: relative; } .logo { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); text-decoration: none; flex-shrink: 0; } .logo span { color: var(--primary); } /* ── Nav ── */ nav { display: flex; align-items: center; gap: 2px; flex: 1; } .nav-link { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: background 0.15s, color 0.15s; white-space: nowrap; } .nav-link.active { background-color: color-mix(in srgb, var(--primary), transparent 85%); color: var(--primary); } .nav-link:hover { background-color: var(--bg-subtle); color: var(--text-primary); } .nav-link.active { background-color: color-mix(in srgb, var(--primary), transparent 85%); color: var(--primary); } .nav-link svg { /* flex-shrink: 0; */ opacity: 0.7; } .nav-link.active svg { opacity: 1; } /* ── Theme toggle ── */ .theme-toggle { margin-left: auto; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-pill); cursor: pointer; padding: 4px 10px; font-size: 1rem; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; transition: background 0.15s, border-color 0.15s; } .theme-toggle:hover { background: var(--bg-overlay); border-color: var(--border-strong); } [data-theme="dark"] .theme-toggle .icon-sun, body.dark .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon, body.dark .theme-toggle .icon-moon { display: inline; } [data-theme="light"] .theme-toggle .icon-moon, body.light .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun, body.light .theme-toggle .icon-sun { display: inline; } /* ── Main layout ── */ main { flex: 1; min-height: 0; position: relative; } /* ── Utility ── */ .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; text-transform: capitalize; } .badge-active { background: color-mix(in srgb, var(--status-active), transparent 80%); color: var(--status-active); } .badge-missing { background: color-mix(in srgb, var(--status-missing), transparent 80%); color: var(--amber-700); } .badge-lost { background: color-mix(in srgb, var(--status-lost), transparent 80%); color: var(--status-lost); } .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; } .card-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 12px; } .away { background: var(--status-missing); } #map { height: 100%; width: 100%; background: #0d0d0d; z-index: 0; } /* Dark map tiles in dark mode */ [data-theme="dark"] #map .leaflet-tile, body.dark #map .leaflet-tile { filter: brightness(0.75) saturate(0.7) hue-rotate(180deg) invert(1); } header .right { display: flex; gap: 4px; text-decoration: none; } #properganga { display: flex; flex-direction: row; align-items: center; margin-top: 5px; margin-bottom: 5px; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px 12px; } #properganga:hover { background: var(--bg-subtle); border-color: var(--border-strong); cursor: pointer; } #userInitals { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--primary); color: var(--text-primary); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; } #userName { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); } #storeName { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); } textarea { height: 100%; width: 100%; resize: none; } /* maker header a bottom nav for phones */ @media (max-width: 600px) { header { position: fixed; bottom: 0; width: 100%; z-index: 1000; } .nav-link *:last-child { display: none; } .logo { display: none; } #userAndStore { display: none; } nav { justify-content: space-evenly; } .nav-link svg { height: 100%; width: 100%; } }