/* === THEME: TERMINAL WARM === Dark brown #1a1008, amber #c87941, Space Mono throughout. Derived from mockup-3f-terminal-ascii. */ /* === Reset === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* === Variables === */ :root { --sidebar-width: 270px; --bg: #1a1008; --surface: #241609; --surface2: #2e1d0c; --border: #3d2a12; --text: #e8d5b0; --muted: #9a7a50; --dim: #5a4020; --accent: #c87941; --accent-hover: #e09050; --accent-bg: rgba(200,121,65,0.10); --today-bg: rgba(200,121,65,0.05); } /* === Palette overrides (driven by data-palette attribute on ) === */ html[data-palette="phosphor"] { --bg: #060d07; --surface: #0c1a0d; --surface2: #122014; --border: #1e3820; --text: #a8d8ac; --muted: #4e8858; --dim: #28502e; --accent: #44c754; --accent-hover: #68e078; --accent-bg: rgba(68,199,84,0.10); --today-bg: rgba(68,199,84,0.05); } html[data-palette="midnight"] { --bg: #050810; --surface: #0a0f20; --surface2: #101828; --border: #1a2640; --text: #c0cce0; --muted: #4868a0; --dim: #1a2e50; --accent: #4888e8; --accent-hover: #68a8ff; --accent-bg: rgba(72,136,232,0.12); --today-bg: rgba(72,136,232,0.05); } html[data-palette="wisteria"] { --bg: #0e0810; --surface: #180e1c; --surface2: #201428; --border: #361e40; --text: #e0c8e8; --muted: #906898; --dim: #4a2858; --accent: #c060d0; --accent-hover: #d880e8; --accent-bg: rgba(192,96,208,0.12); --today-bg: rgba(192,96,208,0.05); } /* === Light mode palette overrides === data-mode="light" triggers warm-paper versions of each accent family. Compound selectors [data-mode="light"][data-palette="..."] have higher specificity and win over the single-attr dark overrides above. */ html[data-mode="light"] { --bg: #fdf6e8; --surface: #f7ead4; --surface2: #f0ddbb; --border: #dcc898; --text: #2c1a06; --muted: #7a5520; --dim: #c4a068; --accent: #b86020; --accent-hover: #8a4010; --accent-bg: rgba(184,96,32,0.10); --today-bg: rgba(184,96,32,0.06); } html[data-mode="light"][data-palette="phosphor"] { --bg: #f0f8f1; --surface: #e4f2e6; --surface2: #d4ebd8; --border: #b0d8b8; --text: #0a2010; --muted: #2a6838; --dim: #88b898; --accent: #1a8830; --accent-hover: #106820; --accent-bg: rgba(26,136,48,0.10); --today-bg: rgba(26,136,48,0.06); } html[data-mode="light"][data-palette="midnight"] { --bg: #f0f4fc; --surface: #e4ecf8; --surface2: #d4e0f4; --border: #aabce0; --text: #08102a; --muted: #284888; --dim: #88a0c8; --accent: #2050c8; --accent-hover: #103898; --accent-bg: rgba(32,80,200,0.10); --today-bg: rgba(32,80,200,0.06); } html[data-mode="light"][data-palette="wisteria"] { --bg: #f8f0fc; --surface: #f0e4f8; --surface2: #e4d0f0; --border: #c8a8d8; --text: #1a0828; --muted: #603878; --dim: #b090c8; --accent: #8828a8; --accent-hover: #6a1888; --accent-bg: rgba(136,40,168,0.10); --today-bg: rgba(136,40,168,0.06); } /* === Base === */ html, body { height: 100%; background: var(--bg); color: var(--text); font-family: 'Space Mono', monospace; font-size: 16px; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } /* === Layout === */ .layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: auto 1fr; height: 100vh; height: 100dvh; overflow: hidden; } /* === Header === */ .app-header { grid-column: 1 / -1; background: var(--surface); border-bottom: 2px solid var(--border); padding: 0.6rem 1rem 0.5rem; overflow-x: auto; position: relative; } .ascii-title { font-family: 'Space Mono', monospace; font-size: 11px; line-height: 1.22; white-space: pre; color: var(--accent); user-select: none; } .site-title { display: none; font-family: 'Orbitron', monospace; font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 900; font-style: italic; letter-spacing: 0.03em; color: var(--accent); user-select: none; line-height: 1; } .site-subtitle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: 'Space Mono', monospace; font-size: 0.75rem; font-style: italic; color: var(--muted); white-space: nowrap; pointer-events: none; margin: 0; } .cursor { display: inline-block; width: 0.5em; height: 0.85em; background: var(--accent); vertical-align: text-bottom; margin-left: 3px; animation: blink 1.1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } .header-right { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); display: flex; align-items: center; gap: 0.75rem; } .btn-filter-toggle { display: none; font-family: 'Space Mono', monospace; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.25rem 0.6rem; background: var(--surface2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; border-radius: 1px; } .btn-filter-toggle:hover { border-color: var(--accent); color: var(--accent); } /* Sidebar backdrop — hidden on desktop, toggled on mobile */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 899; } .sidebar-backdrop.active { display: block; } /* === Sidebar === */ .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 1.1rem 1rem; overflow-y: auto; height: 100%; display: flex; flex-direction: column; } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-track { background: var(--bg); } .sidebar::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 2px; } .filter-section { margin-bottom: 1.4rem; } /* Section labels — terminal # prefix */ .filter-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 0.45rem; } .filter-label::before { content: "# "; color: var(--accent); } /* Search */ .search-wrapper { margin-bottom: 1.25rem; } .search-wrapper input, #search-input { width: 100%; font-family: 'Space Mono', monospace; font-size: 0.75rem; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 0.4rem 0.6rem; outline: none; border-radius: 1px; } #search-input::placeholder { color: var(--dim); } #search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); } /* Chips (city, size, event type — all rendered by JS) */ .chip-group { display: flex; flex-wrap: wrap; gap: 0.3rem; } .chip { font-family: 'Space Mono', monospace; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.18rem 0.5rem; border: 1px solid var(--dim); background: transparent; color: var(--muted); cursor: pointer; border-radius: 1px; transition: all 0.12s; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-hover); } /* Palette switcher */ .palette-group { gap: 0.45rem; } .palette-btn { width: 18px; height: 18px; border-radius: 1px; border: 2px solid transparent; cursor: pointer; padding: 0; flex-shrink: 0; transition: border-color 0.12s, transform 0.1s; } .palette-btn:hover { border-color: var(--muted); transform: scale(1.15); } .palette-btn.active { border-color: var(--text); transform: scale(1.15); } /* City chips use per-city color from --chip-border */ .city-chip { border-color: var(--chip-border, var(--dim)); color: var(--chip-border, var(--muted)); opacity: 0.65; } .city-chip:hover { border-color: var(--chip-border, var(--accent)); color: var(--chip-border, var(--accent)); opacity: 1; } .city-chip.active { background: var(--chip-active-bg, var(--accent-bg)); border-color: var(--chip-border, var(--accent)); color: var(--chip-border, var(--accent-hover)); opacity: 1; } /* Venue hidden via individual or city toggle */ .venue-checkbox:has(input:not(:checked)) .venue-label { opacity: 0.45; } /* Venue list (rendered by JS as .venue-checkbox labels) */ .venue-list { display: flex; flex-direction: column; gap: 0.35rem; max-height: 280px; overflow-y: auto; } .venue-checkbox { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--muted); cursor: pointer; } .venue-checkbox::before { content: "> "; color: var(--dim); font-family: 'Space Mono', monospace; } .venue-checkbox:hover .venue-label { color: var(--accent); } .venue-checkbox input { display: none; } .venue-dot { width: 6px; height: 6px; border-radius: 0; /* square */ flex-shrink: 0; } /* Unchecked venue: strikethrough */ .venue-checkbox input:not(:checked) ~ .venue-label { opacity: 0.35; text-decoration: line-through; } .venue-checkbox input:not(:checked) ~ .venue-dot { opacity: 0.25; } /* === Friends & Feeds === */ .feeds-list { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; } .feeds-list a { font-size: 0.65rem; color: var(--muted); display: flex; align-items: baseline; gap: 0.35rem; transition: color 0.12s; text-decoration: none; } .feeds-list a::before { content: '›'; color: var(--accent); font-size: 0.85rem; } .feeds-list a:hover { color: var(--accent); text-decoration: none; } /* === Ko-fi === */ .kofi-sidebar { display: none; } .kofi-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; } .kofi-pitch { font-size: 0.55rem; font-style: italic; color: var(--muted); } .kofi-btn { display: inline-block; font-family: 'Space Mono', monospace; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.7rem; background: var(--accent); color: var(--bg); border-radius: 1px; text-decoration: none; transition: background 0.15s; } .kofi-btn:hover { background: var(--accent-hover); color: var(--bg); text-decoration: none; } /* === Calendar === */ .calendar-container { padding: 1.1rem 1.25rem; background: var(--bg); overflow-y: auto; height: 100%; } /* FullCalendar overrides */ .fc { --fc-border-color: var(--border); --fc-button-bg-color: var(--surface2); --fc-button-border-color: var(--border); --fc-button-hover-bg-color: var(--accent-bg); --fc-button-hover-border-color: var(--accent); --fc-button-active-bg-color: var(--accent-bg); --fc-button-active-border-color:var(--accent); --fc-today-bg-color: var(--today-bg); --fc-page-bg-color: var(--surface); --fc-list-event-hover-bg-color: var(--surface2); font-family: 'Space Mono', monospace; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; } .fc .fc-toolbar-title { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); } .fc .fc-toolbar-title::before { content: "$ "; opacity: 0.4; } .fc .fc-button { font-family: 'Space Mono', monospace !important; font-size: 0.6rem !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; border-radius: 1px !important; color: var(--text) !important; box-shadow: none !important; } .fc .fc-button:hover { color: var(--accent) !important; } .fc .fc-button-active, .fc .fc-button:focus { color: var(--accent-hover) !important; box-shadow: none !important; } .fc .fc-col-header-cell-cushion { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); text-decoration: none; } .fc .fc-daygrid-day-number { font-size: 0.75rem; color: var(--muted); text-decoration: none; padding: 4px 6px; } .fc .fc-day-today .fc-daygrid-day-number { color: var(--accent); font-weight: 700; } .fc .fc-day-other .fc-daygrid-day-number { color: var(--dim); } .fc .fc-daygrid-event { border-radius: 1px !important; border: none !important; margin-bottom: 2px !important; cursor: pointer; } .fc .fc-daygrid-more-link { font-family: 'Space Mono', monospace; font-size: 0.58rem; color: var(--muted); } .fc .fc-daygrid-more-link:hover { color: var(--accent); } .fc .fc-list-day-cushion { background: var(--surface2) !important; } .fc .fc-list-day-text, .fc .fc-list-day-side-text { color: var(--accent); font-size: 0.7rem; text-transform: uppercase; text-decoration: none; } .fc .fc-list-event { cursor: pointer; } .fc .fc-list-event:hover td { background: var(--surface2) !important; } .fc .fc-popover { background: var(--surface) !important; border: 1px solid var(--accent) !important; border-radius: 2px !important; } .fc .fc-popover-header { background: var(--surface2) !important; color: var(--text) !important; font-family: 'Space Mono', monospace !important; font-size: 0.65rem !important; } /* Event tiles */ .ev { position: relative; display: flex; flex-direction: column; padding: 2px 32px 2px 4px; /* right padding reserves space for heart + hide */ overflow: hidden; } .ev-title { font-family: 'Space Mono', monospace; font-size: 0.75rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } .ev-venue { font-family: 'Space Mono', monospace; font-size: 0.63rem; color: rgba(255,255,255,0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Heart / favorite button — shows on hover, 20% bigger than original */ .ev-heart { position: absolute; top: 50%; right: 17px; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 0.84rem; line-height: 1; color: rgba(255,255,255,0.5); padding: 1px 2px; opacity: 0; transition: opacity 0.15s, color 0.12s; z-index: 1; user-select: none; } .ev:hover .ev-heart { opacity: 1; } .ev-heart.hearted { opacity: 1 !important; color: #ff8fa8; } .ev-heart:hover { color: rgba(255,255,255,0.9); } .ev-heart.hearted:hover { color: #ff5580; } /* Hide button — dismiss event until page refresh */ .ev-hide { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 0.62rem; line-height: 1; color: rgba(255,255,255,0.4); padding: 1px 2px; opacity: 0; transition: opacity 0.15s, color 0.12s; z-index: 1; user-select: none; } .ev:hover .ev-hide { opacity: 1; } .ev-hide:hover { color: rgba(255,255,255,0.9); } /* === Modal === */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 1000; backdrop-filter: blur(2px); } .modal-overlay.active { display: block; } .event-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 1px solid var(--accent); border-radius: 2px; box-shadow: 0 8px 32px rgba(0,0,0,0.6); z-index: 1001; max-width: 500px; width: 90%; max-height: 85vh; overflow-y: auto; font-family: 'Space Mono', monospace; } .event-modal.active { display: block; } .modal-close { position: absolute; top: 0.6rem; right: 0.6rem; background: var(--dim); color: var(--text); border: 1px solid var(--border); width: 28px; height: 28px; border-radius: 1px; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; z-index: 2; font-family: 'Space Mono', monospace; } .modal-close:hover { background: var(--accent); color: var(--bg); } .modal-image { width: 100%; height: 180px; object-fit: cover; border-radius: 0; } .modal-body { padding: 1.1rem 1.25rem 1.25rem; } .modal-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .modal-body h2 { font-size: 1.1rem; font-weight: 700; line-height: 1.25; color: var(--accent); } .modal-event-name { color: var(--muted); font-size: 0.82rem; margin-top: 0.25rem; } .modal-support { color: var(--muted); font-size: 0.82rem; margin-top: 0.2rem; font-style: italic; } .modal-venue { font-weight: 700; font-size: 0.85rem; margin-top: 0.65rem; } .modal-date { font-size: 0.8rem; margin-top: 0.2rem; color: var(--muted); } .modal-times { display: flex; gap: 1rem; margin-top: 0.4rem; font-size: 0.78rem; color: var(--muted); } .modal-price { margin-top: 0.65rem; font-size: 1rem; font-weight: 700; color: var(--accent); } .modal-genre, .modal-age { margin-top: 0.2rem; font-size: 0.75rem; color: var(--muted); } .modal-description { margin-top: 0.65rem; font-size: 0.8rem; color: var(--muted); line-height: 1.5; } /* Badges */ .badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 1px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .badge-sold-out { background: rgba(220,38,38,0.2); color: #f87171; border: 1px solid #f87171; } .badge-cancelled { background: rgba(202,138,4,0.2); color: #fbbf24; border: 1px solid #fbbf24; } .badge-free { background: rgba(22,163,74,0.2); color: #4ade80; border: 1px solid #4ade80; } .btn-tickets { display: inline-block; margin-top: 0.85rem; padding: 0.4rem 1.1rem; background: var(--accent); color: var(--bg); text-decoration: none; border-radius: 1px; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; transition: background 0.15s; } .btn-tickets:hover { background: var(--accent-hover); color: var(--bg); text-decoration: none; } /* === Mode toggle === */ .mode-toggle-wrap { margin-top: 0.5rem; } .mode-toggle { font-family: 'Space Mono', monospace; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.22rem 0.55rem; background: var(--surface2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; border-radius: 1px; transition: all 0.12s; } .mode-toggle:hover { border-color: var(--accent); color: var(--accent); } /* === Bottom-left utility bar (favorites + restore hidden) === */ .favorites-bar { position: fixed; bottom: 1.1rem; left: calc(var(--sidebar-width) + 1rem); z-index: 500; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .favorites-bar.visible { pointer-events: auto; opacity: 1; transform: translateY(0); } .btn-download-shows, .btn-restore-hidden { display: inline-block; padding: 0.38rem 0.85rem; font-family: 'Space Mono', monospace; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; background: transparent; border: 1px solid var(--accent); color: var(--accent); cursor: pointer; border-radius: 1px; transition: background 0.15s, color 0.15s; opacity: 0.72; } .btn-download-shows:hover, .btn-restore-hidden:hover { background: var(--accent); color: var(--bg); opacity: 1; } /* Restore button: slightly subdued by default */ .btn-restore-hidden { opacity: 0.55; } /* First-appear bounce for the buttons */ .favorites-bar.visible .btn-download-shows, .favorites-bar.visible .btn-restore-hidden { animation: favBounceIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes favBounceIn { from { transform: scale(0.82) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } /* === Desktop: sticky calendar toolbar === */ @media (min-width: 769px) { .fc .fc-header-toolbar, .fc .fc-toolbar { position: sticky; top: 0; z-index: 5; background: var(--surface); padding-top: 0.5rem; padding-bottom: 0.25rem; } } /* === Responsive === */ @media (max-width: 768px) { .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; } .btn-filter-toggle { display: block; } /* Swap title: hide ASCII art, show Orbitron text + subtitle below */ .ascii-title { display: none; } .site-title { display: inline; } .site-subtitle { position: static; transform: none; display: block; font-size: 0.65rem; margin-top: 0.25rem; white-space: normal; max-width: calc(100% - 5rem); /* clear the filters button */ } /* Prevent iOS auto-zoom on input focus */ #search-input { font-size: 16px; } .sidebar { position: fixed; top: 0; left: -100%; width: 85%; max-width: 300px; height: 100vh; height: 100dvh; z-index: 900; transition: left 0.25s ease; box-shadow: 4px 0 20px rgba(0,0,0,0.6); } .sidebar.open { left: 0; } .calendar-container { padding: 0.75rem; height: auto; overflow-x: hidden; overflow-y: visible; } /* List view: pin dot column, collapse hidden time column, give title all remaining space */ .fc .fc-list-table { width: 100%; table-layout: fixed; } .fc .fc-list-event-graphic { width: 24px; } .fc .fc-list-event-time { display: none; width: 0; padding: 0; } .fc .fc-list-event-title { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4px; } /* Reduce ev right padding — absolute buttons still sit at their positions */ .ev { padding-right: 20px; } /* Ko-fi: hide from header, show at bottom of sidebar */ .app-header .kofi-wrap { display: none; } .kofi-sidebar { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .fc .fc-toolbar { flex-direction: column; gap: 0.5rem; } .event-modal { width: 95%; max-height: 90dvh; } /* Bigger touch targets */ .chip { padding: 0.5rem 0.75rem; font-size: 0.72rem; } .venue-checkbox { min-height: 2.75rem; } .palette-btn { width: 26px; height: 26px; } /* Heart + hide: always slightly visible on mobile (no real hover) */ .ev-heart { opacity: 0.4; font-size: 0.84rem; } .ev-hide { opacity: 0.3; } /* Bottom bar: left edge on mobile (sidebar is hidden) */ .favorites-bar { left: 0.75rem; } } /* Light mode: darken the modal overlay slightly less */ html[data-mode="light"] .modal-overlay { background: rgba(0,0,0,0.45); }