/* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ==================== ACCESSIBILITY ==================== */ /* Enhanced focus indicators for keyboard navigation */ :focus { outline: 2px solid var(--color-accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } button:focus-visible, .btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(107, 155, 209, 0.3); } a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 0; border-color: var(--color-accent); } /* Reduced motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* High contrast mode */ @media (prefers-contrast: more) { :root { --color-bg: #000000; --color-surface: #1a1a1a; --color-text: #ffffff; --color-text-dim: #cccccc; --color-border: #666666; --color-accent: #66b3ff; --color-live: #00ff00; --color-muted: #ff4444; --color-partial: #ffaa00; } .attendant, .mute-card { border-width: 3px; } .btn { border: 2px solid currentColor; } .scale-note-pill, .port-item { border-width: 2px; } } /* Additional visual cues beyond color - always applied for safety */ .port-item.port-muted, .port-pill.port-muted { text-decoration: line-through; text-decoration-thickness: 2px; } /* Muted badges get a strikethrough pattern */ .badge-muted::before { content: "✕ "; } .badge-live::before { content: "● "; } .badge-partial::before { content: "◐ "; } .badge-no-audio::before { content: "○ "; } /* Colorblind toggle button */ .colorblind-toggle { background: transparent; border: 1px solid var(--color-border); border-radius: calc(var(--radius) / 2); padding: 4px 8px; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--color-text-dim); transition: all 0.2s; } .colorblind-toggle:hover { background: var(--color-surface); border-color: var(--color-accent); color: var(--color-text); } [data-colorblind="true"] .colorblind-toggle { background: var(--color-accent); border-color: var(--color-accent); color: white; } .colorblind-icon { display: inline-block; } /* ==================== END ACCESSIBILITY ==================== */ :root { --color-bg: #1a1a1a; --color-surface: #2a2a2a; --color-text: #e0e0e0; --color-text-dim: #a0a0a0; --color-border: #3a3a3a; --color-accent: #6b9bd1; --color-live: #4caf50; --color-live-bg: #1b3a1e; --color-muted: #f44336; --color-muted-bg: #3a1c1b; --color-partial: #ff9800; --color-partial-bg: #3a2a1b; --color-warning: #ff9800; --color-error: #f44336; --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --radius: 8px; } /* * Colorblind-safe mode * Uses blue/orange instead of green/red, plus additional visual cues * Applied via data-colorblind attribute on or via toggle */ [data-colorblind="true"] { --color-live: #2196f3; /* Blue instead of green */ --color-live-bg: #1a2a3a; --color-muted: #ff9800; /* Orange instead of red */ --color-muted-bg: #3a2a1a; --color-partial: #e91e63; /* Pink instead of orange for partial */ --color-partial-bg: #3a1a2a; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.6; padding: var(--spacing-lg); padding-bottom: 50px; } .container { max-width: 1200px; margin: 0 auto; } /* Header */ .header { background: var(--color-surface); border-radius: var(--radius); padding: var(--spacing-md); margin-bottom: var(--spacing-md); border: 1px solid var(--color-border); } .header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-sm); } .header h1 { font-size: 2.5rem; margin: 0; color: var(--color-accent); } .header-links { display: flex; gap: var(--spacing-sm); } .header-link { padding: var(--spacing-xs) var(--spacing-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: calc(var(--radius) / 2); color: var(--color-text); text-decoration: none; font-size: 0.875rem; transition: background 0.2s; } .header-link:hover { background: var(--color-border); } /* Fullscreen button */ .fullscreen-btn { cursor: pointer; border: 1px solid var(--color-border); } .fullscreen-btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: white; } /* Fullscreen mode adjustments */ :fullscreen { background: var(--color-bg); } :fullscreen .footer { display: none; } :fullscreen .header-links { position: absolute; top: var(--spacing-sm); right: var(--spacing-lg); opacity: 0.3; transition: opacity 0.3s; } :fullscreen .header-links:hover { opacity: 1; } .jam-info { display: flex; flex-direction: column; gap: var(--spacing-sm); } .jam-details { display: flex; justify-content: center; gap: var(--spacing-lg); flex-wrap: wrap; } .jam-item { display: flex; flex-direction: column; align-items: center; gap: 2px; } .jam-item .label { font-size: 0.875rem; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .jam-item .value { font-size: 2rem; font-weight: 600; color: var(--color-text); } .jam-notes { background: rgba(255, 255, 255, 0.05); padding: var(--spacing-sm); border-radius: var(--radius); text-align: center; font-size: 1.125rem; margin-top: var(--spacing-sm); } /* Scale notes container */ .scale-notes { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-sm); } /* Scale notes pills row */ .scale-notes-pills { display: flex; justify-content: center; gap: var(--spacing-xs); flex-wrap: wrap; } .scale-note-pill { background: var(--color-accent); color: white; padding: var(--spacing-xs) var(--spacing-md); border-radius: 1rem; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; } .scale-note-pill.root-note { background: #e6a23c; } /* Progression display */ .progression-display { background: rgba(107, 155, 209, 0.15); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius); text-align: center; margin-top: var(--spacing-sm); border: 1px solid var(--color-accent); } .progression-roman { font-size: 1.5rem; font-weight: 700; color: var(--color-accent); margin-bottom: var(--spacing-xs); letter-spacing: 0.05em; } .progression-chords { font-size: 1.25rem; font-weight: 500; color: var(--color-text); } .progression-chord-notes { margin-top: var(--spacing-sm); display: flex; justify-content: center; gap: var(--spacing-sm); flex-wrap: wrap; } .progression-chord-notes .chord-notes-group { font-size: 1rem; color: var(--color-text-dim); background: var(--color-surface); padding: 4px 12px; border-radius: var(--radius); border: 1px solid var(--color-border); } /* Mini piano keyboard for chord visualization */ .chord-keyboards { margin-top: var(--spacing-sm); display: flex; justify-content: center; gap: var(--spacing-md); flex-wrap: wrap; } .chord-keyboard-container { display: flex; flex-direction: column; align-items: center; gap: 4px; } .chord-keyboard-label { font-size: 0.8rem; color: var(--color-text-dim); font-weight: 500; } .mini-keyboard { display: flex; position: relative; height: 48px; background: var(--color-border); border-radius: 0 0 4px 4px; padding: 2px; gap: 1px; } .mini-keyboard.two-octave { height: 40px; } .white-key { width: 18px; height: 44px; background: #f0f0f0; border-radius: 0 0 3px 3px; position: relative; z-index: 1; transition: background 0.15s; } .two-octave .white-key { width: 12px; height: 36px; border-radius: 0 0 2px 2px; } .white-key.active { background: var(--color-accent); } .black-keys-overlay { position: absolute; top: 2px; left: 2px; right: 2px; height: 28px; display: flex; gap: 1px; /* Must match white key gap for alignment */ pointer-events: none; z-index: 2; } .two-octave .black-keys-overlay { height: 22px; } .black-key-slot { width: 18px; display: flex; justify-content: flex-end; position: relative; } .two-octave .black-key-slot { width: 12px; } .black-key-slot.has-black::after { content: ''; position: absolute; right: -6px; width: 12px; height: 28px; background: #2a2a2a; border-radius: 0 0 2px 2px; z-index: 3; } .two-octave .black-key-slot.has-black::after { right: -4px; width: 8px; height: 22px; } .black-key-slot.has-black.active::after { background: var(--color-accent); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); /* Outline for visibility against adjacent white keys */ } /* C key marker dot */ .white-key.is-c::before { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: #888; border-radius: 50%; } .two-octave .white-key.is-c::before { bottom: 3px; width: 3px; height: 3px; } .white-key.is-c.active::before, .white-key.is-c.is-root::before { background: #fff; } /* Root note highlight - different color */ .white-key.is-root { background: var(--color-accent-alt, #e67e22); } .white-key.is-root.active { background: var(--color-accent-alt, #e67e22); } .black-key-slot.has-black.is-root::after { background: var(--color-accent-alt, #e67e22); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); /* Outline for visibility against adjacent white keys */ } /* Scale keyboard container */ .scale-keyboard-container { display: flex; flex-direction: column; align-items: center; gap: 4px; } .scale-keyboard-label { font-size: 0.8rem; color: var(--color-text-dim); } /* Colorblind mode keyboard */ [data-colorblind="true"] .white-key.active, [data-colorblind="true"] .black-key-slot.has-black.active::after { background: var(--color-accent); } [data-colorblind="true"] .white-key.is-root, [data-colorblind="true"] .white-key.is-root.active, [data-colorblind="true"] .black-key-slot.has-black.is-root::after { background: var(--color-accent-alt, #e67e22); } /* Parent scale hint (for non-7-note scales) */ .parent-scale-hint { text-align: center; } .hint-description { font-size: 0.95rem; color: var(--color-text-dim); font-style: italic; margin-bottom: var(--spacing-sm); } .hint-suggestion { display: flex; justify-content: center; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; } .hint-label { font-size: 0.875rem; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .hint-roman { font-size: 1.25rem; font-weight: 700; color: var(--color-accent); } .hint-chords { font-size: 1.1rem; font-weight: 500; color: var(--color-text); } /* Day notes section */ .day-notes-section { background: var(--color-surface); border-radius: var(--radius); padding: var(--spacing-md); margin-bottom: var(--spacing-md); border: 1px solid var(--color-border); } .day-notes-section h2 { font-size: 1.25rem; margin-bottom: var(--spacing-sm); color: var(--color-accent); } .day-notes { font-size: 1rem; line-height: 1.8; color: var(--color-text); white-space: pre-wrap; } /* Attendants section */ .attendants-section { background: var(--color-surface); border-radius: var(--radius); padding: var(--spacing-md); margin-bottom: var(--spacing-md); border: 1px solid var(--color-border); } .attendants-section h2 { font-size: 1.25rem; margin-bottom: var(--spacing-sm); color: var(--color-accent); } .attendants-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-sm); } .loading, .no-attendants { text-align: center; padding: var(--spacing-xl); color: var(--color-text-dim); grid-column: 1 / -1; } /* Attendant card */ .attendant { background: var(--color-bg); border-radius: var(--radius); padding: var(--spacing-sm); border: 2px solid var(--color-border); transition: all 0.3s ease; } .attendant.live { border-color: var(--color-live); background: var(--color-live-bg); } .attendant.muted { border-color: var(--color-muted); background: var(--color-muted-bg); } .attendant.partial { border-color: var(--color-partial); background: var(--color-partial-bg); } .attendant.no-audio { border-color: var(--color-border); background: var(--color-surface); opacity: 0.7; } .attendant-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs); gap: var(--spacing-xs); } .attendant-name { font-size: 1.25rem; font-weight: 600; color: var(--color-text); } .attendant-badge { padding: var(--spacing-xs) var(--spacing-sm); border-radius: calc(var(--radius) / 2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; white-space: nowrap; } .badge-live { background: var(--color-live); color: white; } .badge-muted { background: var(--color-muted); color: white; } .badge-partial { background: var(--color-partial); color: white; } .badge-no-audio { background: var(--color-border); color: var(--color-text-dim); } .attendant-details { display: flex; flex-direction: column; gap: var(--spacing-xs); font-size: 0.9rem; } .attendant-role { color: var(--color-text); font-weight: 500; } .attendant-notes { color: var(--color-text-dim); font-style: italic; } .attendant-ports { color: var(--color-text-dim); font-size: 0.85rem; } .attendant-ports-detail { display: flex; flex-direction: column; gap: var(--spacing-xs); font-size: 0.85rem; } .attendant-ports-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); font-size: 0.85rem; } .ports-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); } .ports-label { font-weight: 500; font-size: 0.8rem; } .ports-label.ports-muted { color: var(--color-muted); } .ports-label.ports-live { color: var(--color-live); } .ports-muted-group .ports-label { color: var(--color-muted); } .ports-live-group .ports-label { color: var(--color-live); } /* Port item pills */ .port-item { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 500; position: relative; } .port-item.port-muted { background: rgba(244, 67, 54, 0.2); color: var(--color-muted); border: 1px solid var(--color-muted); } .port-item.port-live { background: rgba(76, 175, 80, 0.2); color: var(--color-live); border: 1px solid var(--color-live); } /* Port tooltip for channel notes */ .port-item.has-tooltip, .port-pill.has-tooltip { cursor: help; text-decoration: underline dotted; } .port-item.has-tooltip::after, .port-pill.has-tooltip::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--color-surface); color: var(--color-text); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius); font-size: 0.85rem; font-weight: normal; text-decoration: none; white-space: nowrap; max-width: 250px; white-space: normal; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); border: 1px solid var(--color-border); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; pointer-events: none; } .port-item.has-tooltip::before, .port-pill.has-tooltip::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--color-border); z-index: 1001; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; } .port-item.has-tooltip:hover::after, .port-item.has-tooltip:hover::before, .port-pill.has-tooltip:hover::after, .port-pill.has-tooltip:hover::before { opacity: 1; visibility: visible; } /* Stereo indicators */ .stereo-indicator { margin-left: 2px; font-size: 0.75em; opacity: 0.8; } /* Port group containers */ .port-group-container { display: inline-flex; align-items: center; gap: 2px; background: rgba(255, 255, 255, 0.05); border-radius: calc(var(--radius) / 2); padding: 2px 4px; margin-right: 4px; } .port-group-name { font-size: 0.75rem; color: var(--color-text-dim); margin-right: 4px; font-weight: 500; } .port-group-container .port-item { margin: 0 1px; } .attendant-midi { color: var(--color-accent); font-size: 0.85rem; } /* Footer */ .footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) var(--spacing-lg); background: var(--color-bg); border-top: 1px solid var(--color-border); font-size: 0.875rem; } .status { padding: var(--spacing-xs) var(--spacing-sm); border-radius: calc(var(--radius) / 2); font-weight: 500; } .status-success { background: rgba(76, 175, 80, 0.2); color: var(--color-live); } .status-error { background: rgba(244, 67, 54, 0.2); color: var(--color-error); } .last-updated { color: var(--color-text-dim); } /* Responsive adjustments */ @media (max-width: 768px) { body { padding: var(--spacing-md); padding-bottom: 70px; } .header-top { flex-direction: column; gap: var(--spacing-sm); } .header h1 { font-size: 2rem; } .jam-item .value { font-size: 1.5rem; } .attendants-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .attendants-list { grid-template-columns: 1fr; } .footer { flex-direction: column; gap: var(--spacing-xs); text-align: center; padding: var(--spacing-xs); } }