/* ── The Riff List — main.css ────────────────────────────────────────────── */ /* :root holds only non-color tokens — layout, type, geometry. These never change between themes. Color tokens live in the three [data-theme] blocks below so a single attribute swap on re-themes the whole app. */ :root { --date-col-width: 56px; --card-gap: 2px; --card-pad: 10px 14px 10px 12px; --type-scale: 1.12; /* global text size multiplier — change this one value to resize all text */ --font-display: 'Metal Mania', cursive; --font-gothic: 'UnifrakturMaguntia', cursive; --font-body: 'Inter', system-ui, sans-serif; --nav-height: 52px; } /* ── Theme: original — the V3.3 warm-black / aged-gold / blood-red look, preserved verbatim as the dormant revert target. ─────────────────────── */ [data-theme="original"] { --bg: #0e0d0b; --shell: #0a0906; --gold: #b8962e; --venue-text: rgba(184, 150, 46, 0.48); --time-text: rgba(184, 150, 46, 0.40); --attending-names: #b8962e; /* .attending-names previously hardcoded var(--gold) — preserved verbatim */ --hex-stroke: rgba(184, 150, 46, 0.20); --parchment: rgba(224, 220, 210, 0.85); --date-col-bg: rgba(184, 150, 46, 0.03); --date-col-bg-att: rgba(120, 15, 15, 0.26); --date-col-border-att: rgba(180, 30, 30, 0.38); --card-bg: rgba(255, 255, 255, 0.022); --card-bg-att: rgba(115, 12, 12, 0.34); /* Attending card edge/outline — no-op here so the pre-migration look never grows a left-edge accent bar it never had (addendum v1.1 §2.3) */ --attend-edge-width: 0px; /* intentional no-op: attending edge is day/night-only, not original; do not remove */ --attend-edge: transparent; --attend-outline-top: rgba(184, 150, 46, 0.09); --attend-outline-bottom: rgba(0, 0, 0, 0.35); --hatch-h: rgba(255, 255, 255, 0.016); --hatch-v: rgba(255, 255, 255, 0.010); --vignette: rgba(0, 0, 0, 0.60); --card-border-top: rgba(184, 150, 46, 0.09); --card-border-bottom: rgba(0, 0, 0, 0.35); --card-dash: rgba(184, 150, 46, 0.10); /* News feed row separators only — same hue as --card-border-top/bottom (the calendar's .show-card divider) but ~20% more opaque and rendered at 2px, not 1px, since the feed has no left-edge date badge doing the row-to-row separation work the calendar gets for free. Scoped to its own variables rather than bumping --card-border-top/bottom directly, so the calendar and Bands/Venues list pages (which also read those) stay exactly as they are. */ --feed-divider-top: rgba(184, 150, 46, 0.11); --feed-divider-bottom: rgba(0, 0, 0, 0.42); --logo-glow: rgba(184, 150, 46, 0.22); --nav-bg: #0c0b09; --nav-border: rgba(184, 150, 46, 0.15); --nav-gold: rgba(184, 150, 46, 0.45); --nav-gold-active: #b8962e; /* Previously-hardcoded gold-trim values, tokenized so they follow theme */ --border-faint: rgba(184, 150, 46, 0.12); --border-hairline: rgba(184, 150, 46, 0.20); --border-focus: rgba(184, 150, 46, 0.50); --border-focus-strong: rgba(184, 150, 46, 0.55); --border-chip: rgba(184, 150, 46, 0.35); --border-medium: rgba(184, 150, 46, 0.45); --border-icon: rgba(184, 150, 46, 0.22); --border-headline: rgba(184, 150, 46, 0.18); --border-success: rgba(184, 150, 46, 0.28); --tint-subtle: rgba(184, 150, 46, 0.10); --tint-hover: rgba(184, 150, 46, 0.06); --tint-active: rgba(184, 150, 46, 0.08); --badge-text: rgba(184, 150, 46, 0.60); --surface-tint: rgba(255, 255, 255, 0.04); --placeholder-search: rgba(224, 220, 210, 0.28); --placeholder-login: rgba(224, 220, 210, 0.22); --accent-on: #0e0d0b; --accent-hover: #c9a83a; } /* ── Theme: night — "Gunmetal". Blackened cool-steel base, chrome-white band names, molten-orange accent, acid-green attending. ────────────────────── */ [data-theme="night"] { --bg: #14171a; --shell: #101317; --gold: #e0611c; --venue-text: #8b959d; --time-text: #79838b; --attending-names: #c3cbd0; --hex-stroke: rgba(224, 97, 28, 0.30); --parchment: #f2f5f7; --date-col-bg: rgba(224, 97, 28, 0.03); --date-col-bg-att: #232f18; --date-col-border-att: #679b24; --card-bg: rgba(255, 255, 255, 0.022); --card-bg-att: #232f18; /* Attending card edge/outline — addendum v1.1 §2, dialed back ~40%, then separator dialed back a further ~10% and card body matched to date-col */ --attend-edge-width: 5px; --attend-edge: #679b24; --attend-outline-top: #3c561e; --attend-outline-bottom: #3c561e; --hatch-h: transparent; --hatch-v: transparent; --vignette: transparent; --card-border-top: rgba(224, 97, 28, 0.14); --card-border-bottom: rgba(0, 0, 0, 0.35); --card-dash: rgba(224, 97, 28, 0.16); /* News feed row separators only — see original theme's comment above. */ --feed-divider-top: rgba(224, 97, 28, 0.17); --feed-divider-bottom: rgba(0, 0, 0, 0.42); --logo-glow: transparent; --nav-bg: #10141a; --nav-border: rgba(224, 97, 28, 0.20); --nav-gold: #78828a; --nav-gold-active: #e0611c; --border-faint: rgba(224, 97, 28, 0.12); --border-hairline: rgba(224, 97, 28, 0.20); --border-focus: rgba(224, 97, 28, 0.50); --border-focus-strong: rgba(224, 97, 28, 0.55); --border-chip: rgba(224, 97, 28, 0.45); --border-medium: rgba(224, 97, 28, 0.45); --border-icon: rgba(224, 97, 28, 0.30); --border-headline: rgba(224, 97, 28, 0.22); --border-success: rgba(224, 97, 28, 0.28); --tint-subtle: rgba(224, 97, 28, 0.10); --tint-hover: rgba(224, 97, 28, 0.08); --tint-active: rgba(224, 97, 28, 0.10); --badge-text: rgba(224, 97, 28, 0.70); --surface-tint: rgba(255, 255, 255, 0.04); --placeholder-search: #79838b; --placeholder-login: #6c757c; --accent-on: #160d06; --accent-hover: #ff7a35; } /* ── Theme: day — "Cold-Rolled Steel". Pale brushed-silver base, etched-black band names, molten-orange accent, acid-green attending. Sun-legible. ──── */ [data-theme="day"] { --bg: #c9cccf; --shell: #b7babd; --gold: #c24e12; --venue-text: #5c656c; --time-text: #6f767c; --attending-names: #4b555d; --hex-stroke: rgba(194, 78, 18, 0.30); --parchment: #131519; --date-col-bg: rgba(194, 78, 18, 0.03); --date-col-bg-att: rgba(78, 147, 16, 0.16); --date-col-border-att: rgba(78, 147, 16, 0.55); --card-bg: rgba(0, 0, 0, 0.018); --card-bg-att: rgba(78, 147, 16, 0.20); /* Attending card edge/outline — same 5px separator bar as night, tuned to day's existing attend-green family */ --attend-edge-width: 5px; --attend-edge: #4e9310; --attend-outline-top: #a9c07f; --attend-outline-bottom: #a9c07f; --hatch-h: transparent; --hatch-v: transparent; --vignette: transparent; --card-border-top: rgba(194, 78, 18, 0.12); --card-border-bottom: rgba(20, 22, 25, 0.15); --card-dash: rgba(194, 78, 18, 0.14); /* News feed row separators only — see original theme's comment above. */ --feed-divider-top: rgba(194, 78, 18, 0.14); --feed-divider-bottom: rgba(20, 22, 25, 0.18); --logo-glow: transparent; --nav-bg: #c3c6c9; --nav-border: rgba(194, 78, 18, 0.20); --nav-gold: #7a828a; --nav-gold-active: #c24e12; --border-faint: rgba(194, 78, 18, 0.12); --border-hairline: rgba(194, 78, 18, 0.22); --border-focus: rgba(194, 78, 18, 0.55); --border-focus-strong: rgba(194, 78, 18, 0.60); --border-chip: rgba(194, 78, 18, 0.45); --border-medium: rgba(194, 78, 18, 0.45); --border-icon: rgba(194, 78, 18, 0.32); --border-headline: rgba(194, 78, 18, 0.22); --border-success: rgba(194, 78, 18, 0.30); --tint-subtle: rgba(194, 78, 18, 0.08); --tint-hover: rgba(194, 78, 18, 0.07); --tint-active: rgba(194, 78, 18, 0.09); --badge-text: rgba(194, 78, 18, 0.75); --surface-tint: rgba(0, 0, 0, 0.035); --placeholder-search: #6f767c; --placeholder-login: #7a8288; --accent-on: #fbeee6; --accent-hover: #a83f0d; } /* ── Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--parchment); font-family: var(--font-body); font-size: calc(14px * var(--type-scale)); line-height: 1.4; min-height: 100dvh; } /* ── Phone shell (desktop preview wrapper) ──────────────────────────────── */ .phone-shell { display: flex; justify-content: center; background: var(--shell); background-image: repeating-linear-gradient( 90deg, var(--hatch-h) 0px, var(--hatch-h) 1px, transparent 1px, transparent 4px ), repeating-linear-gradient( 0deg, var(--hatch-v) 0px, var(--hatch-v) 1px, transparent 1px, transparent 4px ); min-height: 100dvh; padding: 0; } .screen { position: relative; width: 100%; max-width: 430px; background: var(--bg); background-image: radial-gradient(ellipse 85% 85% at 50% 50%, transparent 35%, var(--vignette) 100%), repeating-linear-gradient( 90deg, var(--hatch-h) 0px, var(--hatch-h) 1px, transparent 1px, transparent 4px ), repeating-linear-gradient( 0deg, var(--hatch-v) 0px, var(--hatch-v) 1px, transparent 1px, transparent 4px ); } /* ── App header ─────────────────────────────────────────────────────────── */ .app-header { position: relative; display: flex; flex-direction: column; align-items: center; padding: 24px 16px 10px; border-bottom: 1px solid var(--border-faint); } /* News feed and calendar — shared .app-header's divider removed for these two pages specifically (submit/profile still use the plain .app-header border, untouched). Calendar's is the line below the search box, right above the first month/day row — same divider element as the header itself, not a separate one. */ .app-header.news-feed-header, .app-header.calendar-header { border-bottom: none; } /* ── Hamburger trigger ──────────────────────────────────────────────────── */ .hamburger { position: absolute; top: 20px; left: 14px; width: 36px; height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: none; cursor: pointer; padding: 4px; } /* ── Theme toggle (sun/moon) ─────────────────────────────────────────────── */ .theme-toggle { position: absolute; top: 18px; right: 14px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--gold); cursor: pointer; padding: 4px; } .theme-toggle svg { display: block; } .hamburger span { display: block; width: 20px; height: 2px; background: var(--gold); opacity: 0.70; } .hamburger:hover span { opacity: 1; } .logo { font-family: var(--font-display); font-size: calc(31px * var(--type-scale)); color: var(--gold); letter-spacing: 0.02em; line-height: 1; text-shadow: 0 0 22px var(--logo-glow), 0 2px 8px rgba(0,0,0,0.60); } .subtitle { font-family: var(--font-body); font-size: calc(11px * var(--type-scale)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--venue-text); margin-top: 4px; } /* ── Calendar search bar ────────────────────────────────────────────────── */ .search-wrap { position: relative; width: 100%; margin-top: 12px; } .search-input { width: 100%; background: var(--surface-tint); border: 1px solid var(--border-hairline); color: var(--parchment); font-family: var(--font-body); font-size: calc(14px * var(--type-scale)); font-weight: 400; padding: 9px 38px 9px 12px; /* right pad reserves space under the ✕ */ border-radius: 0; outline: none; transition: border-color 0.15s; -webkit-appearance: none; } .search-input::placeholder { color: var(--placeholder-search); } .search-input:focus { border-color: var(--border-focus); } .search-clear { position: absolute; right: 0; top: 0; bottom: 0; width: 38px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--venue-text); font-size: calc(15px * var(--type-scale)); line-height: 1; cursor: pointer; } .search-clear:hover { color: var(--gold); } /* ── Calendar feed ──────────────────────────────────────────────────────── */ .calendar { padding: 0 0 calc(var(--nav-height) + 24px); } .empty-state { padding: 40px 24px; text-align: center; color: var(--venue-text); font-size: calc(13px * var(--type-scale)); } /* ── Month break slab ───────────────────────────────────────────────────── */ .month-break { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .month-label { /*font-family: var(--font-gothic); font-size: calc(15px * var(--type-scale)); */ font-family: var(--font-display); /* Metal Mania, same as the logo */ font-size: calc(20px * var(--type-scale)); color: var(--gold); white-space: nowrap; flex-shrink: 0; } .month-rule { flex: 1; height: 1px; background: var(--hex-stroke); } /* ── Day row ────────────────────────────────────────────────────────────── */ .day-row { display: flex; align-items: stretch; margin-bottom: var(--card-gap); } /* ── Date column ────────────────────────────────────────────────────────── */ .date-col { width: var(--date-col-width); flex-shrink: 0; position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 0 10px; background: var(--date-col-bg); border-right: 1px solid var(--hex-stroke); } .day-row.attending .date-col { background: var(--date-col-bg-att); border-right-color: var(--date-col-border-att); } /* ── Hexagon date marker ─────────────────────────────────────────────────── */ .hex-wrapper { position: relative; width: 42px; height: 46px; } .hex-svg { display: block; } .hex-svg path { fill: none; stroke: var(--hex-stroke); stroke-width: 1.5; } /* hex stroke is identical in both states — §6.4 */ .hex-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; } .day-abbr { font-family: var(--font-body); font-size: calc(9px * var(--type-scale)); font-weight: 700; letter-spacing: 0.10em; color: var(--gold); line-height: 1; } .date-num { font-family: var(--font-body); font-size: calc(17px * var(--type-scale)); font-weight: 900; color: var(--parchment); line-height: 1; } /* date number is identical in both states — §8 */ .rock-hands { position: absolute; top: 58px; /* padding-top 10px + hex height 46px + 2px clearance */ left: 50%; transform: translateX(-50%); font-size: calc(14px * var(--type-scale)); line-height: 1; } /* ── Shows column ───────────────────────────────────────────────────────── */ .shows-col { flex: 1; display: flex; flex-direction: column; gap: 0; } /* Single card in a day: fill shows-col so its background covers the full row. Without this, a short card (release, minimal show) leaves a dark gap at the bottom of shows-col when the date-col is taller (~66px intrinsic vs ~58px card). */ .shows-col > .show-card:only-child { flex: 1; } /* ── Show card ──────────────────────────────────────────────────────────── */ .show-card { position: relative; background: var(--card-bg); padding: var(--card-pad); display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--card-border-top); border-bottom: 1px solid var(--card-border-bottom); cursor: pointer; } .show-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-image: repeating-linear-gradient( 90deg, var(--card-dash) 0px, var(--card-dash) 2px, transparent 2px, transparent 5px ); } .show-card.attending { background: var(--card-bg-att); border-left: var(--attend-edge-width) solid var(--attend-edge); border-top-color: var(--attend-outline-top); border-bottom-color: var(--attend-outline-bottom); } /* ── Release cards ──────────────────────────────────────────────────────── */ .release-card:hover { background: var(--surface-tint); } .band-name { font-family: var(--font-body); font-size: calc(14px * var(--type-scale)); font-weight: 900; color: var(--parchment); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.03em; } .venue-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .venue-name { font-size: calc(12px * var(--type-scale)); color: var(--gold); line-height: 1.3; } .tickets-btn { flex-shrink: 0; font-size: calc(10px * var(--type-scale)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); text-decoration: none; border: 1px solid var(--border-chip); padding: 3px 7px; border-radius: 2px; line-height: 1.3; } .tickets-btn:hover { background: var(--tint-subtle); } .time-row { display: flex; min-width: 0; overflow: hidden; font-size: calc(11px * var(--type-scale)); font-weight: 700; letter-spacing: 0.06em; color: var(--time-text); line-height: 1.3; } .time-support { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; } .time-dot, .time-fixed { flex-shrink: 0; white-space: nowrap; } .attending-names { font-size: calc(11px * var(--type-scale)); color: var(--attending-names); line-height: 1.4; } /* ── Show Popup ─────────────────────────────────────────────────────────── */ /* Token set — scoped to popup; ALWAYS Cold-Rolled Steel, invariant across [data-theme]. The popup is a deliberate "break" surface — never bind these to the app-wide theme tokens (addendum v1.1 §1). */ .show-popup { /* CSS custom properties scoped here so children inherit them */ --pop-surface: #e2e4e6; --pop-surface-2: #d3d6d8; --pop-ink: #131519; --pop-secondary: #4b555d; --pop-muted: #5c656c; --pop-accent: #c24e12; --pop-accent-on: #fbeee6; --pop-going: #4e9310; --pop-border: #b6babd; --pop-close: #131519; /* Full-screen dim backdrop — panel inside is column-width */ position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.65); display: flex; justify-content: center; overflow: hidden; overscroll-behavior: none; } body.popup-open { overflow: hidden; } .show-popup[hidden] { display: none; } /* Column-width panel — matches the centered app column */ .popup-panel { width: 100%; max-width: 430px; background: var(--pop-surface); display: flex; flex-direction: column; overflow: hidden; position: relative; } /* Paper grain on the panel surface only */ .popup-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: repeating-linear-gradient( -38deg, transparent, transparent 4px, rgba(0,0,0,0.012) 4px, rgba(0,0,0,0.012) 5px ); } /* Fixed header — never scrolls */ .popup-header { position: relative; z-index: 2; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 14px 20px; border-bottom: 1px solid var(--pop-border); background: var(--pop-surface); } /* Header label — centered now that X is gone */ .popup-header-label { font-family: var(--font-body); font-size: calc(11px * var(--type-scale)); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pop-ink); } /* Scrollable middle zone */ .popup-body { position: relative; z-index: 1; flex: 1; overflow-y: auto; padding: 0 20px 16px; scrollbar-width: none; overscroll-behavior: none; } .popup-body::-webkit-scrollbar { display: none; } /* Pinned close bar — parchment surface, thin dark top rule */ .popup-footer { position: relative; z-index: 2; flex-shrink: 0; height: var(--nav-height); background: var(--pop-surface); border-top: 1px solid var(--pop-border); display: flex; } .popup-close-bar { flex: 1; display: flex; align-items: center; justify-content: center; background: transparent; border: none; font-family: var(--font-body); font-size: calc(10px * var(--type-scale)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pop-close); cursor: pointer; } .popup-close-bar:hover { background: rgba(0, 0, 0, 0.05); } /* ── Show Identity block (§6.4) ─────────────────────────────────────────── */ .popup-identity { padding: 22px 0 20px; border-bottom: 1px solid var(--pop-border); } .popup-band-name { font-family: var(--font-body); font-size: calc(28px * var(--type-scale)); font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; color: var(--pop-ink); line-height: 1.05; margin-bottom: 7px; } .popup-venue-line { font-family: var(--font-body); font-size: calc(15px * var(--type-scale)); font-weight: 500; letter-spacing: 0.01em; color: var(--pop-secondary); margin-bottom: 16px; } .popup-core-four { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; } .popup-core-label { font-family: var(--font-body); font-size: calc(8px * var(--type-scale)); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pop-secondary); margin-bottom: 3px; } .popup-core-value { font-family: var(--font-body); font-size: calc(16px * var(--type-scale)); font-weight: 700; letter-spacing: -0.01em; color: var(--pop-ink); } .popup-tickets-btn { display: inline-flex; align-items: center; padding: 9px 18px; background: var(--pop-accent); color: var(--pop-accent-on); font-family: var(--font-body); font-size: calc(10px * var(--type-scale)); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 0; border: none; } /* Album art — release popup only; ~60% width, square, centered */ .popup-album-art { display: block; width: 60%; height: auto; margin-bottom:18px; } /* ── Details block (§6.5) ───────────────────────────────────────────────── */ .popup-details { padding: 18px 0; border-bottom: 1px solid var(--pop-border); } .popup-section-title { font-family: var(--font-body); font-size: calc(11px * var(--type-scale)); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pop-ink); margin-bottom: 12px; } .popup-detail-row { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--pop-border); } .popup-detail-row:last-child { border-bottom: none; } .popup-detail-key { font-family: var(--font-body); font-size: calc(13px * var(--type-scale)); font-weight: 500; letter-spacing: 0.01em; color: var(--pop-muted); } .popup-detail-value { font-family: var(--font-body); font-size: calc(13px * var(--type-scale)); font-weight: 600; letter-spacing: 0.01em; color: var(--pop-muted); } /* ── Attendance block (§6.6) ────────────────────────────────────────────── */ .popup-attendance { padding: 18px 0 14px; border-bottom: 1px solid var(--pop-border); } .popup-member-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--pop-border); } .popup-member-row:last-child { border-bottom: none; } .popup-member-row[data-tappable="true"] { cursor: pointer; } .popup-member-name { font-family: var(--font-body); font-size: calc(17px * var(--type-scale)); font-weight: 400; letter-spacing: 0.01em; color: var(--pop-secondary); flex-shrink: 0; transition: color 0.12s, font-weight 0.12s; } .popup-member-row.going .popup-member-name { font-weight: 700; color: var(--pop-ink); } /* Acid-green "Brah!" — matches the calendar's attending signal */ .popup-brah { font-family: var(--font-body); /* Inter, same as member names */ font-weight: 700; font-size: calc(17px * var(--type-scale)); color: var(--pop-going); margin-left: 6px; flex-shrink: 0; opacity: 0; transition: opacity 0.12s; } .popup-member-row.going .popup-brah { opacity: 1; } .popup-member-spacer { flex: 1; } /* Drive button — hidden until going; lit via weight + fill (§6.6, §10) */ .popup-drive-btn { display: flex; align-items: center; padding: 4px 9px; font-family: var(--font-body); font-size: calc(12px * var(--type-scale)); font-weight: 700; letter-spacing: 0.04em; color: var(--pop-accent); border: 1px solid var(--pop-accent); background: transparent; border-radius: 0; cursor: pointer; white-space: nowrap; flex-shrink: 0; opacity: 0; pointer-events: none; transition: color 0.12s, border-color 0.12s, background 0.12s, opacity 0.12s; } .popup-member-row.going .popup-drive-btn { opacity: 1; pointer-events: all; } .popup-member-row.driving .popup-drive-btn { color: var(--pop-accent-on); border-color: var(--pop-accent); background: var(--pop-accent); font-weight: 900; } /* ── Activity Feed ──────────────────────────────────────────────────────── */ .activity-feed { padding: 8px 0 calc(var(--nav-height) + 24px); } .activity-row { display: flex; flex-direction: column; gap: 5px; padding: 12px 16px; border-bottom: 2px solid var(--feed-divider-bottom); } /* Card rows — News / Release / Show, all rendered via _activity_card.html. Same plain dark-card treatment as the calendar's normal (non-attending) .show-card — var(--card-bg) + var(--card-border-top) — instead of an invented orange tint, so this row type matches the calendar's established look rather than its own separate visual language. */ .activity-row.card { background: var(--card-bg); border-top: 2px solid var(--feed-divider-top); } /* Quiet rows — going / driving / not-going / not-driving. No background tint at all (plain, same as the page background) — .faint (not-going, not-driving) is distinguished only by the absence of an emoji, not by shading. Shorter vertical padding than the card rows above, further de-emphasizing this group. Single child now (no separate time header row), so no gap needed. */ .activity-row.quiet { border-top: 2px solid var(--feed-divider-top); padding: 6px 16px; } .activity-row.quiet .activity-sentence { font-family: var(--font-body); font-size: calc(13px * var(--type-scale)); font-weight: 400; color: var(--parchment); line-height: 1.4; } /* Inline time for quiet rows — flows in normal text with the sentence (e.g. "🤘 Brant is going to Melvins. · 5 hours ago") rather than being anchored top-right like the card component's .activity-time, so the row wraps as a unit only if it genuinely doesn't fit, instead of the time competing with short sentence text for its own line. */ .activity-time-inline { font-family: var(--font-body); font-size: calc(10px * var(--type-scale)); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--venue-text); white-space: nowrap; } /* Card rows' top-right time (News/Release/Show — unchanged, still anchored via .feed-badge-row's flex layout below). */ .activity-time { font-family: var(--font-body); font-size: calc(10px * var(--type-scale)); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--venue-text); margin-left: auto; } .feed-badge-row { display: flex; align-items: center; gap: 8px; } .feed-badge { font-family: var(--font-body); font-size: calc(10px * var(--type-scale)); font-weight: 700; letter-spacing: 0.06em; color: var(--gold); } .feed-card-title { font-weight: 700; } .news-description { font-family: var(--font-body); font-size: calc(12px * var(--type-scale)); color: var(--venue-text); line-height: 1.4; } .news-link-btn { align-self: flex-start; /* Explicit width, not just align-self — real Android Brave stretches this anchor full-width despite align-self measuring correctly in headless tests. */ width: fit-content; } /* ── Simple list pages (Bands / Venues) ─────────────────────────────────── */ .simple-list { padding: 8px 0 calc(var(--nav-height) + 24px); } .simple-list-row { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-bottom: 1px solid var(--card-border-bottom); } /* ── Login page ─────────────────────────────────────────────────────────── */ .login-page { display: flex; justify-content: center; background: var(--shell); min-height: 100dvh; } .login-screen { width: 100%; max-width: 430px; background: var(--bg); background-image: repeating-linear-gradient( 90deg, var(--hatch-h) 0px, var(--hatch-h) 1px, transparent 1px, transparent 24px ), repeating-linear-gradient( 0deg, var(--hatch-v) 0px, var(--hatch-v) 1px, transparent 1px, transparent 24px ); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 32px 60px; } .login-logo { font-family: var(--font-display); font-size: calc(36px * var(--type-scale)); color: var(--gold); letter-spacing: 0.02em; line-height: 1; text-align: center; margin-bottom: 8px; } .login-subtitle { font-family: var(--font-body); font-size: calc(11px * var(--type-scale)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--venue-text); text-align: center; margin-bottom: 48px; } .login-form { width: 100%; display: flex; flex-direction: column; gap: 16px; } .login-field { display: flex; flex-direction: column; gap: 6px; } .login-label { font-family: var(--font-body); font-size: calc(10px * var(--type-scale)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--venue-text); } .login-input { width: 100%; background: var(--surface-tint); border: 1px solid var(--border-hairline); color: var(--parchment); font-family: var(--font-body); font-size: calc(15px * var(--type-scale)); font-weight: 400; padding: 11px 14px; border-radius: 0; outline: none; transition: border-color 0.15s; } .login-input::placeholder { color: var(--placeholder-login); } .login-input:focus { border-color: var(--border-focus-strong); } .login-btn { width: 100%; margin-top: 8px; padding: 13px; background: var(--gold); color: var(--accent-on); font-family: var(--font-body); font-size: calc(11px * var(--type-scale)); font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; border: none; border-radius: 0; cursor: pointer; transition: background 0.15s; } .login-btn:hover { background: var(--accent-hover); } .login-error { font-family: var(--font-body); font-size: calc(13px * var(--type-scale)); color: rgba(200,60,60,0.90); text-align: center; margin-top: -4px; } /* ── App header nav (Profile / Sign Out links) ──────────────────────────── */ .app-header-nav { display: flex; gap: 20px; margin-top: 10px; } .app-header-nav a { font-family: var(--font-body); font-size: calc(10px * var(--type-scale)); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--venue-text); text-decoration: none; } .app-header-nav a:hover { color: var(--gold); } /* ── Bottom nav ─────────────────────────────────────────────────────────── */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; max-width: 430px; margin: 0 auto; height: var(--nav-height); background: var(--nav-bg); background-image: repeating-linear-gradient( 90deg, var(--hatch-h) 0px, var(--hatch-h) 1px, transparent 1px, transparent 4px ), repeating-linear-gradient( 0deg, var(--hatch-v) 0px, var(--hatch-v) 1px, transparent 1px, transparent 4px ); border-top: 1px solid var(--nav-border); display: flex; z-index: 15; } .bottom-nav-tab { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: calc(10px * var(--type-scale)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nav-gold); text-decoration: none; position: relative; } .bottom-nav-tab.active { color: var(--nav-gold-active); } .bottom-nav-tab.active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--nav-gold-active); } /* ── Profile page ───────────────────────────────────────────────────────── */ .profile-content { padding: 20px 20px calc(var(--nav-height) + 24px); } .profile-saved { font-family: var(--font-body); font-size: calc(12px * var(--type-scale)); font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .profile-meta { margin-bottom: 20px; } .profile-username { font-family: var(--font-display); font-size: calc(28px * var(--type-scale)); color: var(--gold); } .profile-section-label { font-family: var(--font-body); font-size: calc(10px * var(--type-scale)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); padding-top: 8px; border-top: 1px solid var(--tint-subtle); } .profile-section-subtitle { font-family: var(--font-body); font-size: calc(10px * var(--type-scale)); font-weight: 700; letter-spacing: 0.14em; color: var(--gold); margin-top: calc(-16px + 4px); /* pull back the login-form flex gap, keep 4px */ } .profile-section-label:first-child { border-top: none; padding-top: 0; } .profile-field-error { font-family: var(--font-body); font-size: calc(12px * var(--type-scale)); color: rgba(200, 60, 60, 0.90); margin-top: 4px; } .profile-action-link { display: block; padding: 10px 0; font-family: var(--font-body); font-size: calc(11px * var(--type-scale)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); text-decoration: none; } .profile-action-link:hover { color: var(--accent-hover); } .profile-logout-btn { display: block; width: 100%; margin-top: 12px; padding: 13px; background: transparent; color: var(--gold); font-family: var(--font-body); font-size: calc(11px * var(--type-scale)); font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; text-align: center; border: 1px solid var(--border-medium); border-radius: 0; transition: background 0.15s, border-color 0.15s; } .profile-logout-btn:hover { background: var(--tint-active); border-color: var(--gold); } /* ── Slide-out drawer ───────────────────────────────────────────────────── */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.22s; } .drawer-backdrop.open { opacity: 1; pointer-events: all; } .drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; background: var(--bg); background-image: repeating-linear-gradient( 90deg, var(--hatch-h) 0px, var(--hatch-h) 1px, transparent 1px, transparent 4px ), repeating-linear-gradient( 0deg, var(--hatch-v) 0px, var(--hatch-v) 1px, transparent 1px, transparent 4px ); border-right: 1px solid var(--nav-border); z-index: 45; transform: translateX(-100%); transition: transform 0.25s ease; display: flex; flex-direction: column; } .drawer.open { transform: translateX(0); } .drawer-top { display: flex; align-items: center; justify-content: flex-end; padding: 14px 14px; border-bottom: 1px solid var(--nav-border); flex-shrink: 0; } .drawer-close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border-icon); color: var(--venue-text); font-size: calc(15px * var(--type-scale)); font-weight: 300; font-family: var(--font-body); line-height: 1; cursor: pointer; border-radius: 0; } .drawer-close:hover { color: var(--gold); border-color: var(--border-medium); } .drawer-nav { flex: 1; display: flex; flex-direction: column; padding: 16px 0; overflow-y: auto; } .drawer-link { display: block; padding: 13px 24px; font-family: var(--font-body); font-size: calc(11px * var(--type-scale)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); text-decoration: none; } .drawer-link:hover { background: var(--tint-hover); } .drawer-link--muted { color: var(--venue-text); pointer-events: none; font-style: italic; letter-spacing: 0.06em; text-transform: none; font-weight: 400; font-size: calc(12px * var(--type-scale)); } .drawer-section-label { font-family: var(--font-body); font-size: calc(9px * var(--type-scale)); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--venue-text); padding: 20px 24px 6px; border-top: 1px solid var(--tint-subtle); margin-top: 12px; } /* ── Submit page ─────────────────────────────────────────────────────────── */ /* .login-label is shared with Login/Profile/Setup/Password-reset (dim gold by design there) — scope the brighter gold to submit's field labels only. */ .submit-panel .login-label { color: var(--gold); } /* Fixed-height column so the tracked list (below) can flex-fill the remaining space down to the bottom nav, identically across all three tabs — regardless of how tall that tab's own form fields are. */ .submit-screen { display: flex; flex-direction: column; height: 100dvh; } .submit-content { padding: 16px 20px calc(var(--nav-height) + 16px); display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; min-height: 0; } .submit-tabs { display: flex; border-bottom: 1px solid var(--border-headline); margin-bottom: 20px; } .submit-tab { flex: 1; padding: 10px 0; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--venue-text); font-family: var(--font-body); font-size: calc(10px * var(--type-scale)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .submit-tab.active { color: var(--gold); border-bottom-color: var(--gold); } .submit-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .submit-panel { display: none; } .submit-panel.active { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-height: 0; } .submit-btn { margin-top: 20px; } /* ── Submit page — lower-half tracked list (information-only) ─────────────── */ .submit-list-section { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; } .submit-list-section .simple-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0; } .submit-field-error { font-family: var(--font-body); font-size: calc(12px * var(--type-scale)); color: rgba(200, 60, 60, 0.90); margin-top: 4px; } .submit-success { background: var(--tint-active); border: 1px solid var(--border-success); color: var(--gold); font-family: var(--font-body); font-size: calc(13px * var(--type-scale)); text-align: center; padding: 14px 16px; margin-bottom: 16px; } /* ── Nav badge (admin-only pending count) ────────────────────────────────── */ .nav-badge { font-size: calc(10px * var(--type-scale)); font-weight: 700; color: var(--badge-text); letter-spacing: 0.04em; }