/* Cabin font loaded via in HTML — do not @import here (causes render-blocking waterfall) */ /* --------------------------------------------------------------- Trackscout icon set — inline SVGs use this class for sizing, colour inheritance and baseline alignment. SVG paths come from icons.js (or are inlined directly in HTML for first-paint reasons). --------------------------------------------------------------- */ .ts-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; } .ts-icon.filled { fill: currentColor; stroke: none; } :root{ --primary:#60a5fa; --accent:#94a3b8; --background:#111827; --surface:#1f2937; --text:#e5e7eb; --muted:#6b7280; --logo-colour:#eee8e3; --wave-colour:#8ed1ff; --progress-colour:#1f9cef; --marker-colour:#94a3b8; --badge-soundtrack:#818cf8; --badge-video-editor:#fbbf24; --badge-supervisor:#34d399; --badge-file-share:#38bdf8; --badge-presentation:#f472b6; --badge-published:#4ade80; --badge-password:#fbbf24; --badge-beta:#a78bfa; --waveform-bg:#1e293b; --waveform-bg-mid:#334155; --waveform-active-bg:#1e3a5f; --waveform-active-bg-mid:#2d4a6f; --danger:#ef4444; --success:#22c55e; --separator:rgba(255,255,255,0.08); --supervisor-accent:#a855f7; --font-family:'Cabin',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --page-max-width:1400px; } /* Light mode overrides — applied via .light-mode on */ .light-mode { --primary: #2563eb; --accent: #475569; --background: #f8fafc; --surface: #ffffff; --text: #1e293b; --muted: #64748b; --logo-colour: #1e293b; --wave-colour: #3b82f6; --progress-colour: #2563eb; --marker-colour: #475569; --badge-soundtrack: #6366f1; --badge-video-editor: #d97706; --badge-supervisor: #059669; --badge-file-share: #0284c7; --badge-presentation: #db2777; --badge-published: #22c55e; --badge-password: #d97706; --badge-beta: #6366f1; --waveform-bg: #d4cdc4; --waveform-bg-mid: #e0d9d0; --waveform-active-bg: #c8bfb2; --waveform-active-bg-mid: #d8cfc4; --danger: #dc2626; --success: #16a34a; --separator: rgba(0,0,0,0.08); --supervisor-accent: #9333ea; --page-max-width: 1400px; } *{box-sizing:border-box;} body{ font-family:var(--font-family); margin:0; padding:0 1rem 1rem; background:var(--background); color:var(--text); font-weight:500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Page-specific tonal backgrounds (dark mode only) ─────────────────── */ html:not(.light-mode) body.page-dashboard { --background: #111827; } html:not(.light-mode) body.page-uploader { --background: #131720; } html:not(.light-mode) body.page-project { --background: #151515; --surface: #1e1e1e; } html:not(.light-mode) body.page-player { --background: #0e1622; } html:not(.light-mode) body.page-canvas { --background: #121428; } html:not(.light-mode) body.page-admin { --background: #161118; } html:not(.light-mode) body.page-help { --background: #0f181e; } html:not(.light-mode) body.page-settings { --background: #141620; } html:not(.light-mode) body.page-login { --background: #111827; } html:not(.light-mode) body.page-fileshare { --background: #13161e; } /* Pin footer to the very bottom of the viewport on file-share pages (fileshare + its matching download page). Uses fixed positioning so the footer sits at the edge regardless of body content length. */ body.page-fileshare, body.page-fileshare-download { min-height: 100vh; padding-bottom: 4rem; /* reserve space for the fixed footer */ box-sizing: border-box; } body.page-fileshare .site-footer, body.page-fileshare-download .site-footer { position: fixed !important; bottom: 0; left: 0; right: 0; margin: 0 !important; max-width: none !important; padding: 0.85rem 1rem; z-index: 8; background: rgba(12, 14, 20, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid rgba(255, 255, 255, 0.08); } .light-mode body.page-fileshare .site-footer, .light-mode body.page-fileshare-download .site-footer { background: rgba(248, 250, 252, 0.88); border-top-color: rgba(0, 0, 0, 0.08); } /* File share panel — card with a defined border so it reads over a wallpaper */ body.page-fileshare #fileSharePanel { max-width: 760px; margin: 2rem auto; padding: 1.25rem 1.5rem 1.5rem; background: rgba(20, 22, 30, 0.88); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } .light-mode body.page-fileshare #fileSharePanel { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.18); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } /* Light mode: per-page tonal shifts removed — use --background from live theme or .light-mode defaults */ h1,h2{color:var(--primary);font-weight:500;} h3{font-weight:500;margin:0;} section{margin-top:2rem;padding:1rem;background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,0.6);border-radius:6px;} button, .secondary, input, select, textarea { border-radius: 6px; } /* ── Comments side panel layout ────────────────────────────────────────── */ .player-layout { display: flex; gap: 0; align-items: flex-start; margin-top: 0; padding-top: 0.5rem; /* single source of vertical offset — keeps panel & player aligned */ max-width: var(--page-max-width); margin-left: auto; margin-right: auto; } #playerMain { position: relative; flex: 1; min-width: 0; /* prevent flex overflow */ overflow: hidden; } /* ── Comments panel — collapsible, left side by default ──────────────── */ .comments-panel { flex-shrink: 0; background: var(--surface); display: flex; flex-direction: column; align-self: stretch; order: -1; /* left side */ margin-top: 0; padding: 0; /* override section default */ box-shadow: none; /* override section default */ z-index: 5; transition: width 0.25s ease; overflow: hidden; } .comments-panel.hidden { display: none; } /* Expanded state */ .comments-panel.panel-open { width: 30vw; min-width: 280px; max-width: 400px; height: calc(100vh - 32px); position: sticky; top: 32px; box-shadow: 1px 0 6px rgba(0,0,0,0.3); } /* Collapsed state (default) — just the vertical tab */ .comments-panel:not(.panel-open) { width: 36px; min-width: 36px; max-width: 36px; } .comments-panel:not(.panel-open) .comments-panel-header, .comments-panel:not(.panel-open) .comments-panel-body { display: none; } /* Vertical tab — always visible */ .comments-panel-tab { width: 36px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* top-align to match header position when open */ padding-top: 0.6rem; /* match .comments-panel-header padding-top */ cursor: pointer; background: var(--surface); border-right: 1px solid rgba(255,255,255,0.06); z-index: 2; transition: background 0.2s; flex-shrink: 0; } /* When panel is open, hide the tab */ .comments-panel.panel-open .comments-panel-tab { display: none; } .comments-panel-tab:hover { background: rgba(255,255,255,0.04); } .comments-panel-tab-label { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-size: 0.75rem; font-weight: 600; color: var(--muted); white-space: nowrap; letter-spacing: 0.03em; user-select: none; } .comments-panel-tab-count { display: inline-block; background: var(--accent, #6c63ff); color: #fff; font-size: 0.65rem; font-weight: 600; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; margin-top: 6px; writing-mode: horizontal-tb; transform: rotate(0deg); } /* Right-side variant */ .player-layout.comments-right .comments-panel { order: 1; } .player-layout.comments-right .comments-panel.panel-open { box-shadow: -1px 0 6px rgba(0,0,0,0.3); } .player-layout.comments-right .comments-panel-tab { left: auto; right: 0; border-right: none; border-left: 1px solid rgba(255,255,255,0.06); } .player-layout.comments-right .comments-panel-tab-label { transform: rotate(0deg); } .player-layout.comments-right .comments-panel-tab-count { transform: rotate(0deg); } /* Panel header (visible when open) */ .comments-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.75rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; gap: 0.5rem; } .comments-panel-header h2 { margin: 0; font-size: 0.95rem; font-weight: 600; white-space: nowrap; } .comments-panel-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; padding: 0 4px; line-height: 1; flex-shrink: 0; } .comments-panel-close:hover { color: var(--text); background: none; } /* Panel body */ .comments-panel-body { flex: 1; overflow-y: auto; padding: 0.6rem 0.75rem; -webkit-overflow-scrolling: touch; } /* Override default section styles */ .comments-panel { padding: 0; margin-top: 0; } .comments-panel #commentList { padding: 0; margin: 0; list-style: none; } /* Responsive: stack vertically on narrow screens */ @media (max-width: 900px) { .player-layout { flex-direction: column; margin-left: 0; margin-right: 0; } #playerMain { padding: 0; } .comments-panel { width: 100% !important; max-width: none !important; min-width: 0 !important; max-height: none; position: static; order: 1; } .comments-panel:not(.panel-open) { width: 100% !important; } .comments-panel-tab { position: static; width: 100%; height: auto; min-height: 0; flex-direction: row; padding: 0.5rem 1rem; border-right: none; border-top: 1px solid rgba(255,255,255,0.06); } .comments-panel-tab-label { writing-mode: horizontal-tb; transform: none; } .comments-panel-tab-count { writing-mode: horizontal-tb; transform: none; margin-top: 0; margin-left: 6px; } } /* Light mode */ .light-mode .comments-panel.panel-open { box-shadow: 1px 0 6px rgba(0,0,0,0.08); } .light-mode .comments-panel-header { border-bottom-color: #e5e7eb; } .light-mode .comments-panel-tab { border-right-color: #e5e7eb; } .light-mode .comments-panel-tab:hover { background: rgba(0,0,0,0.02); } .light-mode .player-layout.comments-right .comments-panel.panel-open { box-shadow: -1px 0 6px rgba(0,0,0,0.08); } .light-mode .player-layout.comments-right .comments-panel-tab { border-left-color: #e5e7eb; } .light-mode .comments-panel-tab-count { background: var(--accent, #6c63ff); color: #fff; } #player{margin-top:0;position:relative;} #player h2{margin-top:0;margin-bottom:0;} /* ── Visual hierarchy — subdue secondary areas, let the video dominate ──── */ #playerHeader, #waveformHeader, #waveformContainer, #videoAudioWaveform, #videoAudioWaveformUpload, #comments, .share-bar, /* All sections at full opacity — no hover fade-in on upload pages */ /* Progress bar stays fully visible (part of the video experience) */ #controls { opacity: 1; } /* Buffer gate — overlay that holds playback until media is ready */ .buffer-gate { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.85); z-index: 50; display: flex; align-items: center; justify-content: center; border-radius: inherit; transition: opacity 0.3s ease; } .buffer-gate.hidden { display: none; } .buffer-gate.fade-out { opacity: 0; pointer-events: none; } .buffer-gate-inner { text-align: center; } .buffer-gate-spinner { width: 28px; height: 28px; margin: 0 auto 0.75rem; border: 3px solid rgba(255, 255, 255, 0.12); border-top-color: var(--primary); border-radius: 50%; animation: earshots-spin 0.75s linear infinite; } .buffer-gate-text { color: var(--text); font-size: 0.9rem; margin: 0; opacity: 0.8; } .buffer-gate-progress { width: 120px; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; margin: 0.75rem auto 0; overflow: hidden; } .buffer-gate-progress.hidden { display: none; } .buffer-gate-progress-bar { height: 100%; width: 0%; background: var(--primary); border-radius: 2px; transition: width 0.3s ease; } .light-mode .buffer-gate { background: rgba(248, 250, 252, 0.9); } .light-mode .buffer-gate-spinner { border-color: rgba(0, 0, 0, 0.1); border-top-color: var(--primary); } /* Buffering indicator (shown when audio stalls after seek) */ #bufferingIndicator { font-size: 0.78rem; color: var(--muted); margin-left: 0.5rem; opacity: 0; transition: opacity 0.2s ease; } #bufferingIndicator.visible { opacity: 1; } .buffering-dots::after { content: '...'; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; animation: buffering-ellipsis 1.2s steps(4, end) infinite; } @keyframes buffering-ellipsis { to { width: 1em; } } /* Player Header */ #playerHeader { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem; } #playerTitleArea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.25rem; } #playerTitle { outline: none; cursor: text; border-radius: 0.25rem; padding: 0 0.25rem; } #playerTitleArea .last-modified { width: 100%; /* forces to new line */ } #playerTitle:hover { background: rgba(255,255,255,0.05); } #playerTitle:focus { background: rgba(255,255,255,0.1); } .last-modified { font-size: 0.7rem; color: var(--muted); opacity: 0.7; } /* Video Controls in header */ #videoControls { display: flex; align-items: center; gap: 0.5rem; } #videoSizeSelect, #replaceVideoBtn { height: 28px; padding: 0 0.5rem; font-size: 0.75rem; background: var(--surface); border: 1px solid var(--muted); color: var(--muted); cursor: pointer; box-sizing: border-box; } #videoSizeSelect:hover, #replaceVideoBtn:hover { border-color: var(--primary); color: var(--primary); } #replaceVideoLabel { display: flex; margin: 0; } /* Video Container Sizing */ #videoContainer { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; transition: outline 0.2s, background 0.2s; width: 100%; /* ensure the container spans the full width of #playerMain so align-items:center actually centres against the viewport width, not the content-width of whichever child is widest */ } #videoContainer video { max-width: 100%; height: auto; display: block; margin-left: auto; /* belt-and-braces: auto margins centre the video even if align-items gets overridden in a mode transition (e.g. cut-sharing rebuild) */ margin-right: auto; } /* Cut-sharing: stack videos for crossfade dissolve */ #videoContainer.cut-sharing-mode video { position: absolute; top: 0; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 30ms linear; } #videoContainer.cut-sharing-mode video.cut-active { opacity: 1; } #videoContainer.cut-sharing-mode { overflow: hidden; } .video-filename { font-size: 0.7rem; color: var(--muted); opacity: 0.7; text-align: right; width: 100%; margin-bottom: 0.25rem; } #videoContainer.video-size-25 video { width: 25%; } #videoContainer.video-size-50 video { width: 50%; } #videoContainer.video-size-75 video { width: 75%; } #videoContainer.video-size-100 video { width: 100%; } /* Native Fullscreen API */ #videoContainer:fullscreen, #videoContainer:-webkit-full-screen { background: #000; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #videoContainer:fullscreen video, #videoContainer:-webkit-full-screen video { width: 100% !important; height: 100% !important; object-fit: contain; } /* Fullscreen button — sits in the video controls area */ .video-fullscreen-btn { background: var(--surface); color: var(--text); border: 1px solid var(--separator); border-radius: 6px; width: 32px; height: 32px; font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 0.5rem; vertical-align: middle; } .video-fullscreen-btn:hover { background: var(--hover); } /* CSS fallback fullscreen — used when Fullscreen API is blocked */ #videoContainer.video-fullscreen { position: fixed; inset: 0; z-index: 99999; background: #000; display: flex; align-items: center; justify-content: center; width: 100% !important; height: 100% !important; max-width: none !important; border-radius: 0; } #videoContainer.video-fullscreen video { width: 100% !important; height: 100% !important; object-fit: contain; } /* Transport Row - play button absolutely centered */ #transportRow { display: flex; justify-content: center; align-items: center; margin: 0.75rem 0; position: relative; min-height: 48px; } #transportLeft { position: absolute; right: calc(50% + 28px); display: flex; align-items: center; gap: 0.35rem; } #transportRight { position: absolute; left: calc(50% + 28px); display: flex; align-items: center; gap: 0.35rem; } /* Overflow "More actions" menu pinned to the right edge of the transport row, aligned with the transport controls. Uses id + class specificity to beat the generic .overflow-menu rule which sets position: relative and comes later in the cascade. A flex wrapper vertically centres the button without a transform (transform creates a stacking context which can interfere with the position:fixed dropdown that wireOverflowMenus lays on top). */ #transportRow .overflow-menu.transport-overflow-menu { position: absolute; right: 0; top: 0; bottom: 0; left: auto; display: flex; align-items: center; z-index: 4; } #playPause { background: var(--accent); border: 1px solid transparent; color: #000; cursor: pointer; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; z-index: 1; } #playPause:hover { background: #b0bec5; color: #000; } #crossfaderRow { position: absolute; right: 0; display: flex; align-items: center; gap: 0.3rem; max-width: 35%; } #crossfaderRow input[type="range"] { min-width: 50px; flex: 1; } #crossfaderRow #showCrossfader, #crossfaderRow #crossfaderToggle { width: auto; margin: 0; cursor: pointer; pointer-events: auto; } #transportLeft button, #transportRight button { background: rgba(107, 114, 128, 0.2); border: 1px solid transparent; color: var(--muted); cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; font-size: 1.1rem; } #transportLeft button:hover, #transportRight button:hover { background: rgba(107, 114, 128, 0.4); color: var(--text); } #timeDisplay { font-size: 0.8rem; color: var(--muted); font-family: 'Cabin', monospace; background: rgba(107, 114, 128, 0.2); border: 1px solid transparent; padding: 0.5rem 0.75rem; height: 40px; min-width: 160px; /* wide enough for "M:SS:FF / M:SS:FF" at 0.8rem tabular */ display: flex; align-items: center; justify-content: center; } #currentTime, #duration { font-variant-numeric: tabular-nums; letter-spacing: 0; } .crossfader-label { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; white-space: nowrap; } #crossfader { width: 100px; flex-shrink: 1; height: 6px; -webkit-appearance: none; appearance: none; background: linear-gradient(to right, var(--accent) 0%, var(--muted) 100%); cursor: pointer; } #crossfader::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: none; border: none; border-top: 2.5px solid var(--text); border-right: 2.5px solid var(--text); rotate: 45deg; cursor: pointer; } #crossfader::-moz-range-thumb { width: 12px; height: 12px; background: none; border: none; border-top: 2.5px solid var(--text); border-right: 2.5px solid var(--text); rotate: 45deg; cursor: pointer; border-radius: 0; } /* Edit indicator for player title */ .edit-indicator { font-size: 0.7rem; color: var(--muted); opacity: 0.5; margin-left: 0.25rem; } #playerTitleArea:hover .edit-indicator { opacity: 1; color: var(--accent); } #playerTitle:focus ~ .edit-indicator { display: none; /* hide pencil while actively editing the title */ } /* Timestamp button next to project title */ .timestamp-btn { background: none; border: none; font-size: 0.8rem; cursor: pointer; opacity: 0.4; padding: 0 0.25rem; transition: opacity 0.2s; } .timestamp-btn:hover { opacity: 1; } #playerTitle:focus ~ .timestamp-btn { display: none; } /* Waveform Header */ #waveformHeader { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; margin-bottom: 0.5rem; } #waveformTitleArea h3 { color: var(--primary); margin-bottom: 0.1rem; } .waveform-instruction { font-size: 0.7rem; color: var(--muted); opacity: 0.7; } #waveformActions { display: flex; gap: 0.5rem; align-items: stretch; } #addAudioLabel { display: flex; margin: 0; } #waveformActions button, #addAudioBtn { height: 36px; padding: 0 1rem; font-size: 0.85rem; line-height: 36px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; } } /* Drop zone hover states for adding media */ #videoContainer.drop-hover, #waveformContainer.drop-hover { outline: 2px dashed var(--accent); outline-offset: -2px; background: rgba(254, 172, 0, 0.1); } /* Full-area drop overlay shown when dragging files over the player */ .player-drop-overlay { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.85); border: 2px dashed var(--accent); border-radius: 8px; pointer-events: none; } .player-drop-overlay.hidden { display: none; } .player-drop-overlay-content { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .player-drop-overlay-icon { font-size: 2.5rem; color: var(--accent); line-height: 1; } .player-drop-overlay-text { font-size: 1rem; color: var(--text); font-weight: 500; } /* Project Note Display */ #projectNoteDisplay { background: rgba(254, 172, 0, 0.1); border-left: 3px solid var(--accent); padding: 0.75rem 1rem; margin-bottom: 1rem; } #projectNoteContent { color: var(--text); font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; } #projectNoteLabel { display: block; font-size: 0.75rem; color: var(--accent); font-weight: 600; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.5px; } #projectAttachments a:hover { text-decoration: underline; } /* Dashboard tab bar */ #dashboardTabs { display: flex; gap: 0; margin-bottom: 1rem; border-bottom: 1px solid var(--border, #334155); } .tab-btn { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); padding: 0.5rem 1rem; font-size: 0.9rem; cursor: pointer; transition: color 0.15s, border-color 0.15s; outline: none; -webkit-appearance: none; } .tab-btn:hover { color: var(--text); background: transparent; } .tab-btn:focus, .tab-btn:active { background: transparent; outline: none; } .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; } /* Collaborator project cards — simpler than owner cards */ .collaborator-card .project-actions { gap: 0.5rem; } .collaborator-card .project-meta { font-size: 0.8rem; } .mode-badge { font-size: 0.65rem; font-weight: 500; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(108, 99, 255, 0.15); color: var(--accent, #6c63ff); margin-left: 0.5rem; vertical-align: middle; white-space: nowrap; } .remove-collab-btn { padding: 0.25rem 0.5rem !important; font-size: 0.75rem !important; min-width: auto !important; opacity: 0.5; transition: opacity 0.2s; } .remove-collab-btn:hover { opacity: 1; } /* Player page user menu */ #playerUserMenu { gap: 0.5rem; } /* Comments panel is always fully visible (override visual hierarchy opacity) */ .comments-panel#comments { opacity: 1; } /* Old margin rules replaced by panel layout */ #comments h2{margin-top:0;margin-bottom:0.5rem;} #share{margin-top:0.5rem;} #share h2{margin-top:0;margin-bottom:0.5rem;} label{display:block;margin-bottom:0.5rem;font-weight:500;} input[type=file]{margin-top:0.3rem;color:var(--text);} #dropzone{ border:2px dashed var(--muted); border-radius:6px; padding:2rem; text-align:center; transition:border-color .2s; margin-bottom:1rem; color:var(--muted); } #dropzone.dragover{border-color:var(--primary);background:color-mix(in srgb, var(--primary) 8%, var(--surface));} /* Dashboard full-page drop overlay */ .dash-drop-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.75); pointer-events: none; } .dash-drop-overlay-inner { border: 2px dashed var(--primary); border-radius: 12px; padding: 3rem 4rem; text-align: center; color: var(--text); font-size: 1.25rem; font-weight: 600; } .dash-drop-overlay-inner small { display: block; margin-top: 0.5rem; font-size: 0.85rem; font-weight: 400; color: var(--muted); } /* New Project modal — shown from dashboard */ .new-project-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 1rem; } .new-project-modal.hidden { display: none; } .new-project-modal-inner { background: var(--surface); color: var(--text); border-radius: 14px; padding: 2rem 2rem 2.25rem; width: 100%; max-width: 560px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .new-project-modal-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 32px; height: 32px; background: transparent; color: var(--text); border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: 6px; } .new-project-modal-close:hover { background: var(--hover); } .new-project-modal h3 { margin: 0 0 0.25rem; font-size: 1.2rem; font-weight: 600; } .new-project-modal-subtitle { margin: 0 0 1.25rem; color: var(--muted); font-size: 0.9rem; } .new-project-modal-options { display: flex; flex-direction: column; gap: 0.6rem; } .new-project-option { display: grid; grid-template-columns: 2.25rem 1fr; grid-template-rows: auto auto; column-gap: 0.9rem; row-gap: 0.1rem; align-items: center; text-align: left; background: var(--surface-2, rgba(255,255,255,0.04)); color: var(--text); border: 1px solid var(--separator); border-radius: 10px; padding: 0.85rem 1rem; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.05s; } .new-project-option:hover { background: var(--hover); border-color: var(--primary); } .new-project-option:active { transform: translateY(1px); } .new-project-option-icon { grid-row: 1 / span 2; font-size: 1.6rem; line-height: 1; } .new-project-option-title { font-weight: 600; font-size: 0.95rem; } .new-project-option-desc { color: var(--muted); font-size: 0.82rem; } /* Simplified Soundtrack empty state ─────────────────────────────────────── */ /* * Active while at least one of #videoContainer / #waveformContainer is * still empty. Body-level classes: * .empty-needs-video — no video yet * .empty-needs-audio — no audio yet * Non-essential chrome is blurred until BOTH are resolved. */ /* * Blur the surrounding chrome — everything except the two active * dropzones — so the empty state reads as a ghost overlay of the * populated page. Layout stays IDENTICAL: the dropzones sit in the * exact positions they'll occupy once populated. */ body.empty-needs-video #playerHeader, body.empty-needs-video #controls, body.empty-needs-video #transportRow, body.empty-needs-video #waveformHeader, body.empty-needs-video #roundsTabBar, body.empty-needs-video #transcriptSection, body.empty-needs-video #share, body.empty-needs-video #comments, body.empty-needs-video .site-footer, body.empty-needs-audio #playerHeader, body.empty-needs-audio #transcriptSection, body.empty-needs-audio #share, body.empty-needs-audio #comments, body.empty-needs-audio .site-footer { filter: blur(2.5px); opacity: 0.4; pointer-events: none; user-select: none; transition: filter 0.25s, opacity 0.25s; } /* Suppress inline hint cards until the project is fully populated */ body.empty-needs-video .hint-card, body.empty-needs-audio .hint-card { display: none !important; } /* Suppress the page-wide drop overlay — dropzones are now scoped to each area */ body.empty-needs-video #playerDropOverlay, body.empty-needs-audio #playerDropOverlay { display: none !important; } /* Hide the empty