/* GigNordic — kelly green, near-black stage, and spotlight gold. Dark is the base (brand) theme. Light mode is opted into via [data-theme="light"], set on by the spotlight toggle and a pre-paint script in index.html. */ :root { --bg: #0b0e0b; --bg-raised: #131a13; --bg-hover: #1a241a; --border: #263524; --text: #edf2e8; --text-dim: #94a58e; --accent: #43b649; /* kelly green */ --accent-2: #eab23c; /* spotlight gold */ --danger: #e4574f; --radius: 12px; --on-accent: #06210a; /* text on accent-filled controls */ color-scheme: dark; /* native controls (date picker, scrollbars) */ /* Status chips / banner, themed per mode. */ --ok-bg: #16391a; --ok-fg: #6fdc76; --warn-bg: #3d3212; --warn-fg: #eab23c; --bad-bg: #3c1815; --bad-fg: #e4574f; --info-bg: #123047; --info-fg: #6fb7e8; --chip-bg: #262b36; --banner-bg: #3a2f10; --banner-fg: #ffe9a8; } /* Light mode — neutrals keep a faint green bias; green and gold darken for contrast on the light ground. The header stays a dark stage in both modes (the spotlight logo needs it). */ :root[data-theme="light"] { --bg: #f3f5ef; --bg-raised: #ffffff; --bg-hover: #e9ede1; --border: #ccd6c2; --text: #16231a; --text-dim: #55664f; --accent: #1f7a2b; --accent-2: #9a6a12; --danger: #c0362e; --on-accent: #f5faf3; color-scheme: light; --ok-bg: #d9f0db; --ok-fg: #196b25; --warn-bg: #f7ecca; --warn-fg: #7d5a0d; --bad-bg: #f7dad6; --bad-fg: #a92c23; --info-bg: #d9e9f7; --info-fg: #1d5f8a; --chip-bg: #e4e9dd; --banner-bg: #fdf3d3; --banner-fg: #6d520e; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } .wrap { max-width: 1100px; margin: 0 auto; padding: 0 1rem; } /* Header — the "stage": deliberately dark in BOTH themes. */ .site-header { background: linear-gradient(135deg, #14381a 0%, #0b0e0b 70%); border-bottom: 3px solid #eab23c; padding: 1.6rem 0 1.3rem; } .header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .brand { display: flex; align-items: center; gap: .9rem; } .brand .logo { flex: none; width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 0 0 1px #ffffff14, 0 6px 16px #0008; display: block; } .site-header h1 { margin: 0; font-size: 1.9rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: #edf2e8; } .tagline { margin: .3rem 0 0; color: #94a58e; } .meta { margin: .4rem 0 0; font-size: .8rem; color: #94a58e; } /* Header actions: coffee + theme toggle */ .header-actions { display: flex; align-items: center; gap: .5rem; flex: none; } /* Buy me a coffee — the one warm, "sponsor" accent in the header. */ .coffee-btn { display: flex; align-items: center; gap: .45rem; background: #ffdd00; /* Buy Me a Coffee brand yellow */ color: #14200f; border: 1px solid #d9bb00; border-radius: var(--radius); padding: .5rem .8rem; font-size: .88rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: transform .12s, filter .12s; } .coffee-btn:hover, .coffee-btn:focus-visible { filter: brightness(1.07); transform: translateY(-1px); outline: none; } .coffee-cup { font-size: 1.05rem; line-height: 1; } /* Confirm dialog (leaving the site) */ .confirm-backdrop { align-items: center; } .confirm-box { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 18px 50px #000a; } .confirm-box h2 { margin: 0 0 .5rem; font-size: 1.15rem; } .confirm-box p { margin: 0 0 1.2rem; color: var(--text-dim); font-size: .92rem; } .confirm-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; } .confirm-no, .confirm-yes { border-radius: var(--radius); padding: .55rem 1rem; font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid var(--border); } .confirm-no { background: none; color: var(--text-dim); } .confirm-no:hover { color: var(--text); background: var(--bg-hover); } .confirm-yes { background: #ffdd00; color: #14200f; border-color: #d9bb00; } .confirm-yes:hover { filter: brightness(1.07); } /* Spotlight theme toggle: beam ON = light mode, OFF = dark mode. */ .theme-toggle { flex: none; background: #131a13; border: 1px solid #263524; border-radius: var(--radius); padding: .5rem .6rem; cursor: pointer; transition: border-color .15s; } .theme-toggle:hover, .theme-toggle:focus-visible { border-color: #eab23c; outline: none; } .theme-toggle .spot { width: 26px; height: 26px; display: block; } /* Dark mode (default): show the glowing spotlight; light mode: the off one. */ .theme-toggle .spot--light { display: none; } :root[data-theme="light"] .theme-toggle .spot--dark { display: none; } :root[data-theme="light"] .theme-toggle .spot--light { display: block; } /* Category hero — under the gold bar */ .hero { background: var(--bg-raised); border-bottom: 1px solid var(--border); padding: 1rem 0 1.1rem; } .hero-lead { margin: 0 0 .7rem; color: var(--text-dim); font-size: .9rem; letter-spacing: .01em; } .category-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: .5rem 1rem; font-size: .92rem; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s, color .12s, transform .12s; } .chip:hover { border-color: var(--accent); transform: translateY(-1px); } .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* Sample data banner */ .banner { background: var(--banner-bg); border-bottom: 1px solid var(--accent-2); color: var(--banner-fg); text-align: center; padding: .5rem 1rem; font-size: .9rem; } .banner code { background: #00000055; padding: .1rem .35rem; border-radius: 4px; } /* Toolbar */ .toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: 1rem 0; position: sticky; top: 0; background: var(--bg); z-index: 5; } .toolbar input[type="search"], .toolbar select, .toolbar button { background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .8rem; font-size: .9rem; } .toolbar select { cursor: pointer; } /* Sort: icon-only funnel button; the invisible native select on top keeps the platform dropdown and accessibility. */ .sort-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 40px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim); } .sort-wrap:hover, .sort-wrap:focus-within { color: var(--accent); border-color: var(--accent); } .sort-wrap .funnel { pointer-events: none; } .sort-wrap select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* Search field with embedded search button */ .search-wrap { position: relative; flex: 1 1 180px; min-width: 150px; } .search-wrap input[type="search"] { width: 100%; background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem 2.4rem .5rem .8rem; font-size: .9rem; } #btn-search { position: absolute; top: 0; right: 0; bottom: 0; width: 2.4rem; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-dim); cursor: pointer; } #btn-search:hover { color: var(--accent); } .toolbar button { cursor: pointer; transition: background .15s; } .toolbar button:hover { background: var(--bg-hover); } .toolbar button.active { border-color: var(--accent); color: var(--accent); } .toolbar .ghost { color: var(--text-dim); } /* Location button + its clear (✕) control */ .locate-wrap { display: inline-flex; align-items: stretch; gap: .3rem; } .loc-clear { padding: .5rem .7rem; color: var(--text-dim); line-height: 1; } .loc-clear:hover { color: var(--danger); border-color: var(--danger); } #dist-filter { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-dim); } #dist-filter input[type="range"] { accent-color: var(--accent); } /* Second toolbar row: the four filters. Not sticky — only the search row is. */ .toolbar.filters-row { position: static; padding: 0 0 .8rem; } /* Multi-select filter: a button that opens a checkbox dropdown. */ .ms { position: relative; flex: 1 1 170px; min-width: 150px; } .ms-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .8rem; font-size: .9rem; cursor: pointer; transition: background .15s, border-color .15s; } .ms-btn:hover { background: var(--bg-hover); } .ms-btn.has-sel { border-color: var(--accent); color: var(--accent); } .ms-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-caret { flex: none; color: var(--text-dim); font-size: .8em; } .ms-btn.has-sel .ms-caret { color: var(--accent); } .ms-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: .3rem; max-height: 300px; overflow-y: auto; z-index: 20; box-shadow: 0 10px 28px #0009; } .ms-opt { display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem; border-radius: 8px; cursor: pointer; font-size: .9rem; } .ms-opt:hover { background: var(--bg-hover); } .ms-opt input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; } .ms-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); padding: .5rem .5rem .2rem; } .ms-empty { color: var(--text-dim); font-size: .85rem; padding: .5rem; } /* Date-range filter */ .date-range { display: flex; align-items: center; gap: .35rem; flex: 1 1 250px; min-width: 200px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: .35rem .6rem; } .date-range.active { border-color: var(--accent); } .date-range input[type="date"] { background: transparent; border: none; color: var(--text); font-size: .9rem; flex: 1 1 auto; min-width: 0; } .date-range input[type="date"]:focus { outline: none; } .date-range .dr-label, .date-range .dr-sep { color: var(--text-dim); flex: none; } .dr-clear { flex: none; background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0 .1rem; font-size: .9rem; } .dr-clear:hover { color: var(--danger); } /* Results header: count on the left, per-page selector on the right. */ .results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; } .result-count { color: var(--text-dim); font-size: .85rem; margin: 0; } .per-page { display: flex; align-items: center; gap: .4rem; color: var(--text-dim); font-size: .82rem; } .per-page select { background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .3rem .5rem; font-size: .85rem; cursor: pointer; } /* Pager */ .pager { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0 0 3rem; } .page-btn { background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem 1rem; font-size: .9rem; cursor: pointer; transition: background .15s, border-color .15s; } .page-btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent); } .page-btn:disabled { opacity: .4; cursor: default; } .page-info { color: var(--text-dim); font-size: .85rem; font-variant-numeric: tabular-nums; } /* Band grid */ .band-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; padding-bottom: 3rem; } .band-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; cursor: pointer; transition: transform .12s, border-color .12s, background .12s; } .band-card:hover, .band-card:focus-visible { transform: translateY(-2px); border-color: var(--accent); background: var(--bg-hover); outline: none; } .band-card h3 { margin: 0 0 .25rem; font-size: 1.05rem; } .band-card .flag { margin-right: .35rem; } .band-card .genres { color: var(--accent); font-size: .8rem; margin: 0 0 .5rem; } .band-card .next-show { font-size: .85rem; color: var(--text); margin: 0; } .band-card .sub { font-size: .8rem; color: var(--text-dim); margin: .15rem 0 0; } .band-card .distance { color: var(--accent-2); } .ev-flag { font-size: .95em; } .band-card .ticket-line { font-size: .8rem; margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } /* Price + ticket availability */ .price { color: var(--accent-2); font-weight: 600; } .ticket-site { color: var(--text-dim); } .status { display: inline-block; border-radius: 999px; padding: .05rem .55rem; font-size: .72rem; font-weight: 600; letter-spacing: .02em; } .status-available { background: var(--ok-bg); color: var(--ok-fg); } .status-limited { background: var(--warn-bg); color: var(--warn-fg); } .status-soldout { background: var(--bad-bg); color: var(--bad-fg); } .status-upcoming { background: var(--info-bg); color: var(--info-fg); } .status-cancelled { background: var(--bad-bg); color: var(--bad-fg); text-decoration: line-through; } .release { color: var(--info-fg); font-size: .8rem; font-weight: 600; white-space: nowrap; } .badge { display: inline-block; background: var(--chip-bg); border-radius: 999px; padding: .05rem .55rem; font-size: .72rem; color: var(--text-dim); margin-left: .4rem; vertical-align: middle; } .empty { text-align: center; color: var(--text-dim); padding: 3rem 0; font-size: 1.1rem; } /* Modal */ .modal-backdrop { position: fixed; inset: 0; background: #000a; backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; z-index: 50; overflow-y: auto; } .modal { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); max-width: 640px; width: 100%; padding: 1.5rem; position: relative; } .modal-close { position: absolute; top: .8rem; right: .8rem; background: none; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; } .modal-close:hover { color: var(--text); } .modal h2 { margin: 0 0 .2rem; } .modal .genres { color: var(--accent); font-size: .9rem; margin: 0 0 1rem; } .modal .show-sort { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); font-size: .8rem; padding: .25rem .6rem; cursor: pointer; margin-bottom: .6rem; } .modal .show-sort:hover { color: var(--text); } .show-list { list-style: none; margin: 0; padding: 0; } .show-list li { display: flex; flex-wrap: wrap; gap: .25rem .8rem; align-items: baseline; padding: .6rem 0; border-top: 1px solid var(--border); } .show-list .date { font-weight: 600; min-width: 8.5rem; } .show-list .venue { color: var(--text); } .show-list .city { color: var(--text-dim); } .show-list .distance { color: var(--accent-2); font-size: .8rem; } .show-list .past { opacity: .45; } .show-list .ticket-info { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .85rem; } /* Ticket-vendor link, pinned to the right edge of each show row. */ .ticket-cta { margin-left: auto; white-space: nowrap; color: var(--accent); text-decoration: none; font-size: .82rem; font-weight: 600; border: 1px solid var(--accent); border-radius: 8px; padding: .28rem .7rem; transition: background .12s, color .12s; } .ticket-cta:hover, .ticket-cta:focus-visible { background: var(--accent); color: var(--on-accent); outline: none; } .ticket-cta.disabled { color: var(--text-dim); border-color: var(--border); cursor: default; } .site-footer { border-top: 1px solid var(--border); padding: 1.2rem 0 2rem; color: var(--text-dim); font-size: .82rem; } .hidden { display: none !important; } /* Suppress element transitions during a theme switch so the whole page flips at once instead of fading component-by-component. */ :root.theme-switching * { transition: none !important; } @media (max-width: 560px) { .toolbar { position: static; } .site-header { padding: 1.4rem 0 1.1rem; } .site-header h1 { font-size: 1.4rem; } .brand { gap: .6rem; } .brand .logo { width: 42px; height: 42px; } .theme-toggle { padding: .4rem .45rem; } /* Keep the header compact: the cup alone carries the meaning. */ .header-actions { flex-direction: column; gap: .4rem; } .coffee-text { display: none; } .coffee-btn { padding: .5rem .6rem; min-height: 40px; } .coffee-cup { font-size: 1.2rem; } .results-bar { gap: .35rem; } .per-page select { min-height: 36px; } .page-btn { min-height: 44px; } /* Chips scroll horizontally on phones instead of wrapping into many rows. */ .category-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .2rem; scrollbar-width: none; } .category-chips::-webkit-scrollbar { display: none; } .chip { flex: none; min-height: 40px; } /* 16px stops iOS Safari from auto-zooming focused inputs; 44px is the recommended minimum touch target. */ .search-wrap input[type="search"], .toolbar select, .toolbar button { font-size: 16px; min-height: 44px; } #btn-search { min-height: 0; } /* Funnel + search own the first row; the dropdowns wrap below. */ .search-wrap { flex: 1 1 calc(100% - 60px); min-width: 0; } .sort-wrap { width: 48px; height: 44px; } .toolbar select { flex: 1 1 44%; } .filters-row .ms { flex: 1 1 44%; min-width: 0; } .ms-btn { min-height: 44px; font-size: 16px; } .date-range { flex: 1 1 100%; min-height: 44px; } .date-range input[type="date"] { font-size: 16px; } .toolbar #btn-locate { flex: 1 1 60%; } /* Band view becomes a full-screen sheet on phones. */ .modal-backdrop { padding: 0; } .modal { max-width: none; min-height: 100dvh; border: none; border-radius: 0; padding: 1.3rem 1rem calc(1.3rem + env(safe-area-inset-bottom)); } .show-list .ticket-info { flex-basis: 100%; } .show-list .ticket-cta { margin-left: 0; margin-top: .3rem; } } /* ============================================================ Fixed-menu redesign (marquee top bar + drop-down filters) ============================================================ */ body { padding-top: var(--topbar-h, 112px); scroll-padding-top: var(--topbar-h, 112px); } /* The marquee: a dark "stage" bar pinned to the top in both themes. */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: linear-gradient(135deg, #14381a 0%, #0b0e0b 72%); border-bottom: 3px solid #eab23c; } .topbar-row { display: flex; align-items: center; gap: .8rem; padding: .55rem 1rem; } .brand-mini { flex: none; display: flex; align-items: center; gap: .5rem; text-decoration: none; color: #edf2e8; } .logo-mini { width: 34px; height: 34px; border-radius: 8px; display: block; box-shadow: 0 0 0 1px #ffffff14; } .wordmark { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 1.05rem; } .topbar-actions { flex: none; display: flex; align-items: center; gap: .5rem; margin-left: auto; } /* Country quick-filter row (concert country), between brand and categories. */ .country-bar { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .5rem; } .country-btn { display: inline-flex; align-items: center; gap: .4rem; background: #0e150e; color: #dfeada; border: 1px solid #2a3a2a; border-radius: 999px; padding: .35rem .8rem; font-size: .9rem; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .country-btn .cflag { font-size: 1.05em; line-height: 1; } .country-btn:hover { border-color: var(--accent-2); } .country-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } .country-btn.active { background: var(--accent-2); border-color: var(--accent-2); color: #1c1403; } /* Category chips row, next tier of the marquee. */ .topbar-chips { padding: 0 1rem .55rem; } .topbar-chips .category-chips { padding: 0; } .topbar .chip { background: #0e150e; border-color: #2a3a2a; color: #dfeada; } .topbar .chip:hover { border-color: var(--accent-2); } .topbar .chip.active { background: var(--accent-2); border-color: var(--accent-2); color: #1c1403; } /* Static filter bar: sits in normal flow under the fixed menu, always visible. A responsive grid gives every control real width so nothing is cramped. */ .filters-bar { background: var(--bg-raised); border-bottom: 1px solid var(--border); } .filters-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem; align-items: center; padding: .9rem 0; } /* Search leads the bar on its own full-width row. */ .filters-search { grid-column: 1 / -1; } .filters-inner .ms, .filters-inner .search-wrap, .filters-inner .date-range { width: 100%; min-width: 0; } .filters-inner .ms-btn { width: 100%; } .filters-inner .locate-wrap { display: flex; align-items: center; gap: .4rem; } .panel-select { width: 100%; min-width: 0; background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem .8rem; font-size: .9rem; cursor: pointer; } /* Slim context strip under the filter bar. */ .context-strip { padding: 1.1rem 0 .2rem; } .context-strip .tagline { margin: 0; color: var(--text); font-size: 1rem; } .context-strip .meta { margin: .3rem 0 0; color: var(--text-dim); font-size: .8rem; } @media (max-width: 620px) { body { padding-top: var(--topbar-h, 150px); } .wordmark { display: none; } .topbar-row { gap: .5rem; padding: .5rem .8rem; } .country-bar { padding: 0 .8rem .5rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .country-bar::-webkit-scrollbar { display: none; } .country-btn { flex: none; } .topbar-chips { padding: 0 .8rem .5rem; } .filters-inner { grid-template-columns: 1fr 1fr; } .filters-search, .filters-inner .date-range, .filters-inner .locate-wrap, .filters-inner #dist-filter, .filters-inner #btn-reset { grid-column: 1 / -1; } }