/* Glow design tokens. This is the single source of truth for color/type/spacing values. Tailwind's `tailwind.config` in _layouts/default.html mirrors the color tokens below (bg / ink / accent) so utility classes stay in sync. If you change a value here, change it there too. See /design/DESIGN_SYSTEM.md for the full written spec (usage rules, do/don't) that this file implements. */ :root { /* Color */ --color-bg: #f3f2f2; --color-surface: #ffffff; --color-ink: #201e1d; --color-ink-muted: rgb(32 30 29 / 75%); --color-border: rgb(32 30 29 / 40%); --color-accent: #ec3013; --color-accent-ink: #f3f2f2; /* Type */ --font-sans: "Archivo", system-ui, sans-serif; /* Radius: Glow is sharp-cornered everywhere, no rounding */ --radius: 0px; } /* Dark mode: follows the OS setting by default (prefers-color-scheme), overridden by an explicit user choice stored in localStorage and applied as data-theme="dark"/"light" on (see assets/js/app.js). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #18181a; --color-surface: #232325; --color-ink: #f3f2f2; --color-ink-muted: rgb(243 242 242 / 75%); --color-border: rgb(243 242 242 / 20%); --color-accent: #ff5233; --color-accent-ink: #18181a; } } :root[data-theme="dark"] { --color-bg: #18181a; --color-surface: #232325; --color-ink: #f3f2f2; --color-ink-muted: rgb(243 242 242 / 75%); --color-border: rgb(243 242 242 / 20%); --color-accent: #ff5233; --color-accent-ink: #18181a; } * { border-radius: var(--radius) !important; } html { color-scheme: light dark; } /* --- Theme toggle --- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--color-ink); cursor: pointer; transition: opacity 0.15s ease; } .theme-toggle:hover { opacity: 0.7; } .theme-toggle svg { width: 17px; height: 17px; } /* --- Nav --- */ .nav-link { color: var(--color-ink); opacity: 0.6; transition: opacity 0.15s ease; } .nav-link:hover { opacity: 0.85; } .nav-link--active { opacity: 1; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; } /* --- Buttons --- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 800; font-size: 13px; letter-spacing: 0.01em; padding: 11px 20px; border: none; cursor: pointer; transition: opacity 0.15s ease; } .btn-primary:hover { opacity: 0.9; } /* --- Chips (category / filter pills) --- */ .chip { display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 12px; font-weight: 600; padding: 6px 13px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .chip[aria-pressed="true"], .chip--selected { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); } /* --- Status tags (Answered / Pending etc.) --- */ .tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 3px 9px; border: 1px solid var(--color-border); background: var(--color-surface); } .tag--accent { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-color: transparent; color: var(--color-accent); } /* --- Cards / list rows --- */ .row-divider { border-bottom: 1px solid var(--color-border); } /* --- Message bubbles (a single rec shown as an iMessage-style text) --- Deliberate exception to Glow's sharp-corner rule: a bubble reads as a bubble only when actually rounded, so this overrides the global `* { border-radius: 0 !important }` with a higher-specificity rule. Always the same gray/left-aligned style -- an earlier version alternated side and color per message, but that read as a two-person conversation, which these aren't: each is one unrelated rec. */ .bubble { max-width: 100%; padding: 9px 14px; font-size: 13px; line-height: 1.4; background: color-mix(in srgb, var(--color-ink) 8%, transparent); color: var(--color-ink); border-radius: 18px !important; border-bottom-left-radius: 4px !important; } .avatar-placeholder { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50% !important; background: color-mix(in srgb, var(--color-ink) 15%, transparent); color: var(--color-ink); font-size: 11px; font-weight: 700; } .avatar-photo { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50% !important; object-fit: cover; } /* --- Map (map.html): real Leaflet + OpenStreetMap tiles --- Round dot markers are a deliberate exception to the sharp-corner rule for the same reason .bubble/.avatar-placeholder are: a "point of interest" only reads as one when it's round. Leaflet positions the marker element itself via an inline transform, so this can't also set transform (it would fight Leaflet for placement) -- box-shadow carries the hover/press state instead. */ .map-pin { width: 14px; height: 14px; border-radius: 50% !important; background: var(--color-accent); border: 2px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); cursor: pointer; transition: box-shadow 0.15s ease; } .map-pin:hover { box-shadow: 0 0 0 1px var(--color-border), 0 0 0 5px color-mix(in srgb, var(--color-accent) 25%, transparent); } /* Leaflet ships its own chrome (popups, zoom control, attribution); retint it to Glow's tokens instead of Leaflet's default blue/gray/shadowed look. The global `* { border-radius: 0 !important }` already sharpens its rounded corners. */ .leaflet-container { font-family: var(--font-sans); background: var(--color-bg); } /* Free no-key tile sources (OSM/Wikimedia) are all busy/multicolor by default; desaturating flattens roads/parks/water into a calm grayscale backdrop so the red pins read clearly and the map fits Glow's stripped- down look instead of looking like a bolted-on Google Maps widget. */ .leaflet-tile-pane { filter: grayscale(1) contrast(1.05) brightness(1.05); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-border); box-shadow: none; } .leaflet-popup-close-button { color: var(--color-ink) !important; } /* Leaflet's default content margin (13px 24px 13px 20px) is asymmetric and shrink-wraps tightly to whatever's inside, so a short one-line provider name produces a visibly stubbier card than a two-line one. A consistent margin + min-height keeps every popup the same comfortable proportions regardless of title length. */ .leaflet-popup-content { margin: 16px 18px; min-height: 84px; } /* Leaflet's own `.leaflet-popup-content a` color rule otherwise outranks the `.text-accent` utility class on the "View profile" link (element + class beats class alone). */ .leaflet-popup-content a.text-accent { color: var(--color-accent); } .leaflet-bar, .leaflet-bar a { background: var(--color-surface); border-color: var(--color-border) !important; color: var(--color-ink); box-shadow: none; } .leaflet-bar a:hover { background: var(--color-bg); } /* Fade/slide-in used for cards and list rows as they enter the viewport (see assets/js/app.js) */ .reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; } .reveal.reveal--visible { opacity: 1; transform: translateY(0); }