:root { /* Scandinavian-minimalist palette -- warm off-white "unbleached paper" background, soft charcoal ink (never pure black -- Scandi design avoids harsh contrast), one confident muted "Nordic sky" blue as the primary accent, plus a sage green and a soft clay/terracotta as supporting accents. Kept the same variable *names* everywhere (--accent, --teal, --gold, --highlight, plus their *-soft tints, --ink, --paper) so no selector below needed to change, just what each name resolves to: --ink soft warm charcoal text (never pure black) --paper warm off-white page background --paper-warm a touch deeper warm neutral -- panel/card backgrounds --accent muted Nordic-sky blue -- primary accent (dates, buttons, the local-artist highlight) --teal sage green -- secondary accent (link hovers, the scrape-progress bar) --gold soft clay/terracotta -- genre-tag pills --highlight warm pale gold -- featured-artist spotlight wash --muted warm mid-gray for secondary text --line soft warm-gray hairline borders/dividers --font-display is Space Grotesk -- a clean geometric sans with just enough character to read as "young," paired with Inter for body copy (set on below) for an overall calm, uncluttered, well-typeset feel rather than anything shouty or embellished. */ --ink: #2b2a27; --paper: #faf9f5; --paper-warm: #f1efe7; --accent: #45688f; --accent-soft: #e7edf3; --teal: #7c9885; --teal-soft: #eaf0ea; --gold: #b8683f; --gold-soft: #f3e7dc; --highlight: #e8c988; --highlight-soft: #faf3e3; --muted: #85817a; --line: #e4e0d6; --font-display: "Space Grotesk", "Inter", -apple-system, "Segoe UI", sans-serif; } * { box-sizing: border-box; } body { margin: 0; font-family: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; background: var(--paper); color: var(--ink); line-height: 1.6; } .site-header { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.75rem 1.5rem 1.1rem; border-bottom: 1px solid var(--line); gap: 0.6rem; } .brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; line-height: 1; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .brand-logo { width: 52px; height: 52px; display: block; } .site-header nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.3rem; } .site-header nav a { color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 500; } .site-header nav a:hover { color: var(--accent); } @media (max-width: 600px) { .brand { font-size: 1.9rem; } .brand-logo { width: 40px; height: 40px; } } .badge { background: var(--accent); color: var(--paper); border-radius: 6px; padding: 0.05rem 0.5rem; font-size: 0.75rem; font-weight: 600; } .container { max-width: 900px; margin: 0 auto; padding: 1.5rem; } .site-footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 2rem 1rem; border-top: 1px solid var(--line); } .site-footer a { color: var(--muted); } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.3rem; margin-bottom: 1rem; } .footer-nav a { font-size: 0.95rem; font-weight: 500; } .footer-nav a:hover { color: var(--accent); } .footer-tagline { margin: 0; } .login-wrap { max-width: 360px; margin: 2rem auto; } .footer-form { display: inline; } .link-button { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; } .flashes { margin-bottom: 1rem; } .flash { padding: 0.6rem 1rem; border-radius: 8px; margin-bottom: 0.5rem; font-size: 0.9rem; } .flash-success { background: var(--teal-soft); border: 1px solid var(--teal); color: #3f5945; } .flash-error { background: #f7e6e2; border: 1px solid #d98b73; color: #8a4530; } h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.01em; margin-bottom: 0.25rem; } h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; margin-top: 2rem; } .page-actions { margin: 1rem 0; } .hero { background: var(--paper-warm); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 16px; padding: 2.25rem 2rem; margin: 0.5rem 0 2rem; } .hero h1 { font-size: 2rem; line-height: 1.2; margin-bottom: 0.9rem; /* No max-width/ch cap here -- "About this site" is now admin-editable HTML (see main.py's edit_about()), so a fixed character-count cap tuned for the old hardcoded copy left visible dead space on the right side of the panel for anything longer or differently structured. Let it fill the panel's own width instead. */ } .hero-lede { font-size: 1.05rem; color: var(--ink); margin-bottom: 0.9rem; } .hero-note { font-size: 0.9rem; color: var(--muted); margin-bottom: 0; } .hero-note strong { color: var(--ink); } .hero-body { margin-top: 0.25rem; } .section-heading { margin-top: 0.5rem; } @media (max-width: 600px) { .hero { padding: 1.5rem 1.25rem; border-radius: 12px; } .hero h1 { font-size: 1.6rem; max-width: none; } } /* Native

collapse toggle, shared by .hero and .featured-artist -- no JS needed. Each summary gets an explicit round icon badge with the toggle glyph inside it -- a solid-colored circle reads clearly as a button -- plus a soft hover tint as a second cue. */ .hero > summary, .featured-artist > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; user-select: none; padding: 0.3rem 0.5rem; margin: -0.3rem -0.5rem 0; border-radius: 8px; transition: background 0.15s ease; } .hero > summary:hover, .featured-artist > summary:hover { background: rgba(0, 0, 0, 0.04); } .hero > summary::-webkit-details-marker, .featured-artist > summary::-webkit-details-marker { display: none; } .toggle-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; color: var(--paper); font-size: 0.75rem; line-height: 1; transition: transform 0.15s ease; } .hero:not([open]) .toggle-icon, .featured-artist:not([open]) .toggle-icon { transform: rotate(-90deg); } .hero > summary { color: var(--accent); } .hero > summary .toggle-icon { background: var(--accent); } .hero[open] > summary { margin-bottom: 0.5rem; } .featured-artist > summary { color: var(--accent); } .featured-artist > summary .toggle-icon { background: var(--accent); } .featured-artist[open] > summary { margin-bottom: 0.75rem; } .featured-artist { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 14px; padding: 1.25rem 1.5rem; margin: 0 0 2rem; background: var(--highlight-soft); } /* "Local Artists Playing This Week!" gallery -- a plain horizontally scrolling flex row with CSS scroll-snap, so swipe/trackpad scrolling works with zero JS; the Prev/Next buttons (see calendar.html's