/* ============================================================
Coptic Hymnody Archive — stylesheet
============================================================ */
:root {
/* Light — warm parchment */
--bg: #f5eddb;
--bg-elev: #fffaec;
--bg-deep: #eadfc5;
--bg-sunk: #e1d5b6;
--ink: #241b11;
--ink-soft: #645337;
--ink-faint: #9b896a;
--accent: #8a2a1a;
--accent-ink: #fff5e6;
--accent-soft: #c4705e;
--gold: #b58832;
--gold-soft: #d9b76c;
--line: #d9c9a5;
--line-soft: #e7dbbe;
--ink-mute: #b0987a; /* softer than ink-faint — for placeholder / secondary labels */
--bg-hover: #e6dbc4; /* subtle highlight for hover states */
--shadow-sm: 0 1px 2px rgba(36, 27, 17, 0.06);
--shadow: 0 2px 6px rgba(36, 27, 17, 0.08), 0 12px 32px rgba(36, 27, 17, 0.06);
--shadow-lg: 0 24px 48px -12px rgba(36, 27, 17, 0.25);
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 18px;
--sidebar-w: 280px;
--related-w: 0px;
--player-h: 108px;
--header-h: 64px;
--transition: 0.18s cubic-bezier(0.3, 0, 0.2, 1);
/* Semantic aliases used by newer components */
--bg-card: #fffaec; /* elevated card surface — matches --bg-elev */
--border: #d9c9a5; /* standard border colour — matches --line */
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-ui: 'Inter', system-ui, sans-serif;
}
[data-theme="dark"] {
--bg: #14100a;
--bg-elev: #1e1810;
--bg-deep: #0c0905;
--bg-sunk: #090704;
--ink: #f2e8d4;
--ink-soft: #b8a888;
--ink-faint: #786a50;
--accent: #e5876d;
--accent-ink: #190b06;
--accent-soft: #f3a690;
--gold: #d8ad54;
--gold-soft: #efc97c;
--line: #2d2519;
--line-soft: #241d13;
--ink-mute: #6b5d47; /* softer than ink-faint for dark mode */
--bg-hover: #2a2016; /* subtle hover bg for dark mode */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
/* Semantic aliases — dark overrides */
--bg-card: #1e1810; /* elevated card surface — matches --bg-elev */
--border: #2d2519; /* standard border colour — matches --line */
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
transition: background var(--transition), color var(--transition);
}
body {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr var(--related-w);
grid-template-rows: var(--header-h) 1fr var(--player-h);
grid-template-areas:
"head head head"
"side main rela"
"play play play";
min-height: 100vh;
transition: grid-template-columns var(--transition);
}
body.has-related { --related-w: 260px; }
/* Collapsed sidebar — desktop only.
We shrink the sidebar column to zero and slide the sidebar out of view.
Hide overflow so nav items don't bleed onto the main column during the slide.
On mobile (<=720px) the sidebar already switches to a drawer; the collapse
class is a no-op there because a separate rule resets the grid to 1fr. */
body.sidebar-collapsed {
grid-template-columns: 0 1fr var(--related-w);
}
body.sidebar-collapsed .sidebar {
transform: translateX(-100%);
overflow: hidden;
border-right-color: transparent;
padding-left: 0;
padding-right: 0;
pointer-events: none;
}
.sidebar {
transition: transform var(--transition), border-color var(--transition);
position: relative; /* needed to anchor the resize handle */
}
/* ---- Sidebar resize handle ----
Attached to (not .sidebar) so the sidebar's overflow-y:auto
clipping can't swallow it. Positioned using the --sidebar-w CSS var
so it always sits exactly at the sidebar's right edge. */
.sidebar-resize {
position: fixed;
top: var(--header-h);
left: calc(var(--sidebar-w) - 4px); /* straddle the right edge */
width: 8px;
height: calc(100vh - var(--header-h) - var(--player-h));
cursor: col-resize;
z-index: 100;
background: transparent;
transition: background 0.15s, left var(--transition);
pointer-events: auto;
}
.sidebar-resize:hover,
.sidebar-resize.dragging {
background: var(--accent);
opacity: 0.45;
}
/* Hide when sidebar is fully collapsed */
body.sidebar-collapsed .sidebar-resize { display: none; }
/* Prevent text selection site-wide while dragging */
body.sidebar-resizing * {
user-select: none !important;
cursor: col-resize !important;
}
/* Hide on mobile (sidebar is a drawer there) */
@media (max-width: 720px) {
.sidebar-resize { display: none; }
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* ============================================================
Header
============================================================ */
.site-head {
grid-area: head;
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: 12px;
padding: 0 20px;
background: var(--bg-elev);
border-bottom: 1px solid var(--line);
backdrop-filter: saturate(140%) blur(8px);
}
/* Three equal-flex groups keep the search visually centered in the viewport.
`min-width: 0` on the flex children lets them shrink so the middle group
(search) retains its configured max-width regardless of brand-title length. */
.head-left,
.head-right {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 0;
min-width: 0;
}
.head-right { justify-content: flex-end; gap: 6px; }
/* Visual grouping within the right header cluster */
.head-btn-group {
display: flex;
align-items: center;
gap: 2px;
}
.head-sep {
width: 1px;
height: 20px;
background: var(--line);
margin: 0 6px;
flex-shrink: 0;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 0 1 auto;
}
.brand-mark {
width: 32px; height: 32px;
display: grid; place-items: center;
color: var(--gold);
flex: 0 0 auto;
}
.brand-mark svg { width: 32px; height: 32px; }
.brand-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 600;
font-size: 20px;
letter-spacing: 0.01em;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.brand-title .amp { color: var(--gold); margin: 0 4px; }
/* Legacy spacer kept for backward compatibility in case the JS falls through. */
.head-spacer { flex: 1; }
.search-wrap {
position: relative;
/* Don't grow — the flanking head-left/head-right groups do the growing.
That way the search stays centered even when the title wraps. */
flex: 0 1 520px;
width: 100%;
min-width: 240px;
max-width: 520px;
}
.search-wrap::before {
content: "";
position: absolute;
left: 14px; top: 50%;
width: 16px; height: 16px;
transform: translateY(-50%);
background: var(--ink-soft);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
opacity: 0.7;
}
.search {
width: 100%;
height: 40px;
padding: 0 48px 0 40px;
font: inherit;
font-size: 14.5px;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line);
border-radius: 20px;
outline: none;
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.search:focus {
border-color: var(--accent);
background: var(--bg-elev);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.search-kbd {
position: absolute;
right: 10px; top: 50%;
transform: translateY(-50%);
font-size: 11px;
color: var(--ink-faint);
border: 1px solid var(--line);
border-radius: 5px;
padding: 1px 6px;
background: var(--bg-elev);
pointer-events: none;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.search-wrap:focus-within .search-kbd { display: none; }
.icon-btn {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--bg);
display: grid;
place-items: center;
color: var(--ink);
transition: background var(--transition), border-color var(--transition), transform var(--transition);
flex: 0 0 auto;
}
.icon-btn:hover { background: var(--bg-deep); border-color: var(--gold-soft); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.ghost { border: none; background: transparent; }
.menu-toggle { display: none; }
/* Desktop sidebar-collapse button: visible on wider screens only (the mobile
drawer uses the separate .menu-toggle above). */
.sidebar-toggle { display: grid; }
.sidebar-toggle.is-collapsed svg { transform: scaleX(-1); }
.sidebar-toggle svg { transition: transform var(--transition); }
/* ============================================================
Sidebar
============================================================ */
.sidebar {
grid-area: side;
overflow-y: auto;
padding: 18px 12px 24px;
background: var(--bg-elev);
border-right: 1px solid var(--line);
position: sticky;
top: var(--header-h);
height: calc(100vh - var(--header-h) - var(--player-h));
}
.sidebar-section-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-faint);
padding: 12px 12px 6px;
font-weight: 600;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid transparent;
background: transparent;
color: var(--ink);
text-align: left;
font-size: 14px;
transition: background var(--transition), border-color var(--transition);
}
.nav-item:hover { background: var(--bg-deep); }
.nav-item.active {
background: var(--bg-deep);
border-color: var(--gold-soft);
}
.nav-item .nav-icon {
width: 20px; height: 20px;
display: grid; place-items: center;
color: var(--gold);
flex: 0 0 auto;
}
.nav-item .nav-label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-item .nav-count {
font-size: 12px;
color: var(--ink-faint);
font-variant-numeric: tabular-nums;
}
.nav-item.active .nav-count { color: var(--accent); }
.sidebar-divider {
border: none;
border-top: 1px solid var(--line);
margin: 12px 8px;
}
/* ============================================================
Main content
============================================================ */
main {
grid-area: main;
overflow-y: auto;
padding: 28px clamp(16px, 3vw, 40px) 40px;
max-width: 100%;
}
.content-inner {
max-width: 960px;
margin: 0 auto;
}
/* Hero card */
.hero {
display: flex;
align-items: center;
gap: 24px;
padding: 28px;
border-radius: var(--radius-lg);
background:
radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 55%),
radial-gradient(ellipse at 90% 100%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%),
var(--bg-elev);
border: 1px solid var(--line);
box-shadow: var(--shadow);
margin-bottom: 32px;
}
.hero-mark {
flex: 0 0 auto;
width: 84px; height: 84px;
border-radius: 50%;
display: grid; place-items: center;
color: var(--gold);
background: var(--bg);
border: 1.5px solid var(--gold-soft);
box-shadow: inset 0 0 0 3px var(--bg-elev);
}
.hero-mark svg { width: 48px; height: 48px; }
.hero-body { flex: 1; min-width: 0; }
.hero-eyebrow {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 6px;
font-weight: 600;
}
.hero-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 600;
font-size: clamp(26px, 3.2vw, 36px);
margin: 0 0 6px;
letter-spacing: 0.01em;
line-height: 1.15;
}
.hero-meta {
color: var(--ink-soft);
font-size: 14px;
margin-bottom: 8px;
}
.hero-meta .dot { margin: 0 8px; color: var(--gold); }
.hero-bio {
color: var(--ink-soft);
font-size: 14.5px;
max-width: 620px;
}
.hero-actions {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 14px;
border-radius: 18px;
border: 1px solid var(--line);
background: var(--bg);
color: var(--ink);
font-size: 13.5px;
font-weight: 500;
transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { background: var(--bg-deep); border-color: var(--gold-soft); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }
.btn.primary {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
}
.btn.primary:hover {
background: color-mix(in srgb, var(--accent) 85%, black);
}
/* Collection */
.collection {
border: 1px solid var(--line);
background: var(--bg-elev);
border-radius: var(--radius);
overflow: hidden;
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition);
}
.collection:hover { box-shadow: var(--shadow); }
.collection-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
cursor: pointer;
user-select: none;
transition: background var(--transition);
}
.collection-head:hover { background: var(--bg-deep); }
.collection-chev {
color: var(--ink-faint);
transition: transform 0.22s;
width: 18px;
}
.collection.collapsed .collection-chev { transform: rotate(-90deg); }
.collection.collapsed .collection-body { display: none; }
.collection-name {
flex: 1;
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 600;
font-size: 20px;
letter-spacing: 0.01em;
}
.collection-count {
color: var(--ink-faint);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.collection-body { padding: 2px 10px 10px; }
.subfolder-name {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
color: var(--accent);
font-size: 16px;
margin: 14px 8px 4px;
padding-left: 10px;
border-left: 2px solid var(--gold);
}
[data-theme="dark"] .subfolder-name { color: var(--accent-soft); }
.subfolder-name.sf-clickable {
cursor: pointer;
/* Override the left-border heading look — become a pill button */
border-left: none;
border: 1px solid var(--line);
border-radius: 20px;
padding: 4px 14px;
background: var(--bg-deep);
color: var(--ink-soft);
font-style: normal;
font-size: 12px;
font-weight: 500;
margin: 10px 8px 4px;
display: inline-block;
white-space: nowrap;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.subfolder-name.sf-clickable:hover {
background: var(--bg-elev);
border-color: var(--gold);
color: var(--ink);
}
.subfolder-name.sf-clickable.sf-active {
background: var(--gold);
border-color: var(--gold);
color: var(--bg);
font-style: normal;
font-weight: 600;
}
/* ── L1 quick-filter pill row (hierarchical mode) ─────────────────────── */
.sf-l1-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 12px 6px;
border-bottom: 1px solid var(--line);
}
.sf-l1-pill {
padding: 4px 14px;
border-radius: 20px;
border: 1px solid var(--line);
background: var(--bg-deep);
color: var(--ink-soft);
font: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
white-space: nowrap;
}
.sf-l1-pill:hover {
background: var(--bg-elev);
border-color: var(--gold);
color: var(--ink);
}
.sf-l1-pill.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
font-weight: 600;
}
[data-theme="dark"] .sf-l1-pill.active {
color: var(--bg);
}
/* Subfolder pill bar */
.sf-pill-bar {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 12px 4px;
border-bottom: 1px solid var(--line);
margin-bottom: 4px;
}
.sf-pill {
padding: 4px 11px;
border-radius: 20px;
border: 1px solid var(--line);
background: var(--bg-deep);
color: var(--ink-soft);
font: inherit;
font-size: 11.5px;
font-weight: 500;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
white-space: nowrap;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
}
.sf-pill:hover {
background: var(--bg-elev);
border-color: var(--gold);
color: var(--ink);
}
.sf-pill.active {
background: var(--gold);
border-color: var(--gold);
color: var(--bg);
font-weight: 600;
}
/* Bilingual pills: Arabic label + transliteration beneath */
.sf-pill.sf-pill-bilingual {
white-space: normal;
display: inline-flex;
flex-direction: column;
align-items: center;
line-height: 1.2;
padding: 5px 11px;
text-overflow: clip;
}
.sf-pill-translit {
display: block;
font-size: 9px;
font-style: italic;
font-weight: 400;
color: var(--ink-mute);
margin-top: 2px;
letter-spacing: 0.01em;
}
.sf-pill.sf-pill-bilingual.active .sf-pill-translit {
color: var(--bg);
opacity: 0.75;
}
/* Same bilingual treatment for hierarchical L1 pills */
.sf-l1-pill.sf-pill-bilingual {
white-space: normal;
display: inline-flex;
flex-direction: column;
align-items: center;
line-height: 1.2;
padding: 5px 14px;
text-overflow: clip;
}
.sf-l1-pill.sf-pill-bilingual.active .sf-pill-translit {
color: #fff;
opacity: 0.75;
}
[data-theme="dark"] .sf-l1-pill.sf-pill-bilingual.active .sf-pill-translit {
color: var(--bg);
opacity: 0.75;
}
/* ── Hierarchical two-level filter ─────────────────────────────────────── */
.sf-hier-filter {
border-bottom: 1px solid var(--line);
padding: 10px 12px 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.sf-hier-l1 {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.sf-hier-btn {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 13px;
border-radius: 20px;
border: 1px solid var(--line);
background: var(--bg-deep);
color: var(--ink-soft);
font: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.sf-hier-btn:hover {
background: var(--bg-elev);
border-color: var(--gold);
color: var(--ink);
}
.sf-hier-btn.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
font-weight: 600;
}
[data-theme="dark"] .sf-hier-btn.active {
background: var(--accent);
color: var(--bg);
}
.sf-hier-count {
font-size: 10px;
font-weight: 600;
opacity: 0.75;
background: rgba(255,255,255,0.25);
border-radius: 10px;
padding: 0 5px;
line-height: 1.6;
min-width: 18px;
text-align: center;
}
.sf-hier-btn:not(.active) .sf-hier-count {
background: var(--line);
color: var(--ink-soft);
}
.sf-hier-l2 {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 6px 0 2px;
border-top: 1px dashed var(--line);
align-items: center;
}
.sf-hier-l2-btn {
padding: 3px 11px;
border-radius: 20px;
border: 1px solid var(--line);
background: var(--bg);
color: var(--ink-soft);
font: inherit;
font-size: 11px;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
white-space: nowrap;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.sf-hier-l2-btn:hover {
background: var(--bg-elev);
border-color: var(--gold);
color: var(--ink);
}
.sf-hier-l2-btn.active {
background: var(--gold);
border-color: var(--gold);
color: var(--bg);
font-weight: 600;
}
.sf-hier-search {
flex: 1;
min-width: 160px;
max-width: 280px;
padding: 4px 10px;
border-radius: 16px;
border: 1px solid var(--line);
background: var(--bg-deep);
color: var(--ink);
font: inherit;
font-size: 11.5px;
outline: none;
transition: border-color var(--transition);
}
.sf-hier-search:focus { border-color: var(--gold); }
/* ── Grouped dropdown filter (hierarchical mode) ─────────────────────── */
.sf-dropdown-wrap {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px 8px;
border-bottom: 1px solid var(--line);
}
.sf-dropdown-label {
font-size: 12px;
font-weight: 600;
color: var(--ink-mute);
white-space: nowrap;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.sf-dropdown {
flex: 1;
max-width: 360px;
padding: 6px 32px 6px 12px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--bg-deep);
color: var(--ink);
font: inherit;
font-size: 13px;
cursor: pointer;
outline: none;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
transition: border-color var(--transition);
}
.sf-dropdown:hover,
.sf-dropdown:focus { border-color: var(--gold); }
[data-theme="dark"] .sf-dropdown {
background-color: var(--bg-deep);
}
/* ── Section search box (many-flat mode) ──────────────────────────────── */
.sf-search-wrap {
padding: 10px 12px 6px;
border-bottom: 1px solid var(--line);
}
.sf-search-input {
width: 100%;
box-sizing: border-box;
padding: 7px 14px;
border-radius: 20px;
border: 1px solid var(--line);
background: var(--bg-deep);
color: var(--ink);
font: inherit;
font-size: 12.5px;
outline: none;
transition: border-color var(--transition);
}
.sf-search-input:focus { border-color: var(--gold); }
.sf-search-input::placeholder { color: var(--ink-mute); }
/* Track rows */
ul.tracks { list-style: none; margin: 0; padding: 0; }
li.track {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
transition: background var(--transition);
position: relative;
}
li.track:hover { background: var(--bg-deep); }
li.track.playing {
background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev));
}
li.track.playing::before {
content: "";
position: absolute;
left: 0; top: 8px; bottom: 8px;
width: 3px;
background: var(--accent);
border-radius: 2px;
}
.row-play {
width: 32px; height: 32px;
flex: 0 0 auto;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--bg);
display: grid; place-items: center;
color: var(--accent);
transition: background var(--transition), color var(--transition), transform var(--transition);
}
.row-play:hover {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
transform: scale(1.08);
}
.row-play svg { width: 12px; height: 12px; }
li.track.playing .row-play {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
}
/* Current track loaded but paused */
li.track.paused-current {
background: color-mix(in srgb, var(--accent) 5%, var(--bg-elev));
}
li.track.paused-current::before {
content: "";
position: absolute;
left: 0; top: 8px; bottom: 8px;
width: 3px;
background: var(--accent);
border-radius: 2px;
opacity: 0.45;
}
li.track.paused-current .row-play {
border-color: var(--accent);
color: var(--accent);
}
li.track.paused-current .track-num { color: var(--accent); }
.track-title {
font-size: 14.5px;
color: var(--ink);
cursor: pointer;
word-break: break-word;
}
.track-title mark {
background: color-mix(in srgb, var(--gold) 40%, transparent);
color: inherit;
padding: 0 2px;
border-radius: 3px;
}
/* Latin romanisation shown beneath Arabic titles */
.track-translit {
display: block;
font-size: 11px;
font-style: italic;
color: var(--ink-faint);
margin-top: 1px;
line-height: 1.3;
}
.track-meta {
font-size: 11.5px;
color: var(--ink-faint);
flex: 0 0 auto;
}
.track-ext {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-faint);
padding: 2px 6px;
border: 1px solid var(--line);
border-radius: 4px;
}
.row-action {
width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: 6px;
border: none;
background: transparent;
color: var(--ink-faint);
transition: background var(--transition), color var(--transition);
}
.row-action:hover { background: var(--bg-elev); color: var(--accent); }
.row-action svg { width: 15px; height: 15px; }
.row-action.is-fav { color: var(--gold); }
.row-action.is-fav svg { fill: currentColor; }
/* Empty state / no results */
.empty {
text-align: center;
padding: 48px 20px;
color: var(--ink-faint);
}
.empty h3 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 22px;
font-weight: 500;
margin: 12px 0 6px;
color: var(--ink-soft);
}
/* ============================================================
Player (custom)
============================================================ */
.player {
grid-area: play;
display: flex;
flex-direction: column;
background: var(--bg-elev);
border-top: 1px solid var(--line);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
position: sticky;
bottom: 0;
z-index: 15;
}
[data-theme="dark"] .player { box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35); }
/* Main row — the always-visible transport strip */
.player-main {
display: grid;
grid-template-columns: minmax(200px, 1fr) auto minmax(220px, 1fr);
align-items: center;
gap: 16px;
padding: 0 20px;
min-height: 80px;
}
/* ── Speed preset chips in player right section ──────────────────────────── */
.preset-chip-row {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.speed-preset-wrap {
position: relative;
display: inline-flex;
}
.speed-preset {
height: 26px;
padding: 0 10px;
border-radius: 13px;
border: 1.5px solid var(--line);
background: transparent;
color: var(--ink-soft);
font-size: 11.5px;
font-variant-numeric: tabular-nums;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
white-space: nowrap;
}
.speed-preset:hover {
border-color: var(--accent);
color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.speed-preset.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
font-weight: 600;
}
.preset-edit-btn {
position: absolute;
top: -5px;
right: -6px;
background: var(--bg-elev);
border: 1px solid var(--line);
cursor: pointer;
color: var(--ink-faint);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
width: 16px;
height: 16px;
border-radius: 50%;
opacity: 0.7;
transition: opacity 0.15s, color 0.15s, background 0.15s;
z-index: 1;
}
.preset-edit-btn:hover {
opacity: 1;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, var(--bg-elev));
}
.preset-edit-btn svg { width: 9px; height: 9px; }
.preset-edit-input {
height: 26px;
width: 58px;
padding: 0 6px;
border-radius: 13px;
border: 1.5px solid var(--accent);
background: var(--bg-elev);
color: var(--ink);
font-size: 11.5px;
font-variant-numeric: tabular-nums;
outline: none;
text-align: center;
}
.player-left {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.player-art {
width: 60px; height: 60px;
border-radius: 10px;
flex: 0 0 auto;
background:
radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--gold) 25%, transparent), transparent 60%),
radial-gradient(ellipse at 70% 80%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
var(--bg-deep);
display: grid;
place-items: center;
color: var(--gold);
border: 1px solid var(--line);
transition: box-shadow 0.4s ease, border-color 0.3s ease;
}
/* Glow when actively playing */
body.is-playing .player-art {
border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.player-art svg { width: 32px; height: 32px; }
.player-meta { min-width: 0; }
.player-meta-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-faint);
font-weight: 600;
transition: color 0.2s;
}
/* Accent color when actively playing */
body.is-playing .player-meta-label { color: var(--accent); }
.player-meta-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 600;
font-size: 18px;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
.player-meta-sub {
font-size: 12px;
color: var(--ink-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.player-fav-btn {
width: 32px; height: 32px;
display: grid; place-items: center;
border-radius: 50%;
border: 1px solid var(--line);
background: transparent;
color: var(--ink-faint);
transition: color var(--transition), background var(--transition), border-color var(--transition);
flex: 0 0 auto;
}
.player-fav-btn:hover { background: var(--bg-deep); color: var(--gold); }
.player-fav-btn.is-fav { color: var(--gold); border-color: var(--gold-soft); }
.player-fav-btn.is-fav svg { fill: currentColor; }
.player-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
min-width: 320px;
}
.player-transport {
display: flex;
align-items: center;
gap: 10px;
}
.transport-btn {
width: 34px; height: 34px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--ink);
display: grid; place-items: center;
transition: background var(--transition), color var(--transition), transform var(--transition);
}
.transport-btn:hover { background: var(--bg-deep); color: var(--accent); }
.transport-btn:active { transform: scale(0.94); }
.transport-btn svg { width: 16px; height: 16px; }
.transport-btn.toggle.on { color: var(--accent); }
.transport-btn.toggle.on::after {
content: "";
width: 4px; height: 4px;
border-radius: 50%;
background: var(--accent);
position: absolute;
margin-top: 26px;
}
.transport-btn { position: relative; }
.play-big {
width: 48px; height: 48px;
border-radius: 50%;
background: var(--accent);
color: var(--accent-ink);
border: none;
display: grid; place-items: center;
transition: transform var(--transition), background var(--transition);
box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}
.play-big:hover { transform: scale(1.05); background: color-mix(in srgb, var(--accent) 85%, black); }
.play-big:active { transform: scale(0.97); }
.play-big svg { width: 22px; height: 22px; margin-left: 2px; }
.play-big[data-state="playing"] svg { margin-left: 0; }
.player-progress {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-width: 300px;
}
.time {
font-size: 11.5px;
color: var(--ink-faint);
font-variant-numeric: tabular-nums;
min-width: 38px;
text-align: center;
}
.progress-track {
flex: 1;
height: 10px;
background: var(--bg-deep);
border-radius: 5px;
position: relative;
cursor: pointer;
transition: height var(--transition);
}
.progress-track:hover { height: 13px; }
.progress-buffer {
position: absolute;
left: 0; top: 0; bottom: 0;
background: color-mix(in srgb, var(--ink-faint) 25%, transparent);
border-radius: 3px;
width: 0;
}
.progress-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
background: linear-gradient(90deg, var(--accent), var(--gold));
border-radius: 3px;
width: 0;
transition: width 0.08s linear;
}
.progress-thumb {
position: absolute;
top: 50%;
width: 14px; height: 14px;
background: var(--accent);
border: 2px solid var(--bg-elev);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity var(--transition);
pointer-events: none;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.progress-track:hover .progress-thumb,
.progress-track.dragging .progress-thumb { opacity: 1; }
.player-right {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
min-width: 0;
flex-wrap: nowrap;
overflow: visible;
}
.speed-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.speed-display {
height: 26px;
min-width: 46px;
padding: 0 9px;
border-radius: 13px;
border: 1px solid var(--line);
background: transparent;
color: var(--ink-soft);
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: center;
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.speed-display:hover { background: var(--bg-deep); color: var(--accent); border-color: var(--gold-soft); }
.speed-display.altered { color: var(--accent); border-color: var(--accent); }
.speed-slider {
-webkit-appearance: none;
appearance: none;
width: 96px;
height: 4px;
background: linear-gradient(90deg,
var(--bg-deep) 0%,
var(--gold-soft) 50%,
var(--bg-deep) 50%,
var(--bg-deep) 100%);
border-radius: 2px;
outline: none;
cursor: pointer;
position: relative;
}
/* Subtle tick at the 1× midpoint so users can find center quickly. */
.speed-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--accent);
cursor: grab;
border: 2px solid var(--bg-elev);
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.speed-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.speed-slider::-moz-range-thumb {
width: 12px; height: 12px;
border-radius: 50%;
background: var(--accent);
cursor: grab;
border: 2px solid var(--bg-elev);
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.volume-wrap { display: flex; align-items: center; gap: 6px; }
.volume-slider {
-webkit-appearance: none;
appearance: none;
width: 80px;
height: 4px;
background: var(--bg-deep);
border-radius: 2px;
outline: none;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--accent);
cursor: pointer;
border: 2px solid var(--bg-elev);
}
.volume-slider::-moz-range-thumb {
width: 12px; height: 12px;
border-radius: 50%;
background: var(--accent);
cursor: pointer;
border: 2px solid var(--bg-elev);
}
/* ============================================================
Overlays: Help, Toast
============================================================ */
.overlay {
position: fixed;
inset: 0;
background: color-mix(in srgb, var(--bg-deep) 85%, transparent);
backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
z-index: 100;
padding: 20px;
}
.overlay.open { display: flex; }
.overlay-card {
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px;
max-width: 520px;
width: 100%;
box-shadow: var(--shadow-lg);
}
.overlay-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 26px;
font-weight: 600;
margin: 0 0 14px;
}
.kbd-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px 18px;
font-size: 14px;
}
.kbd-grid kbd {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
padding: 2px 8px;
border: 1px solid var(--line);
border-radius: 5px;
background: var(--bg);
color: var(--ink-soft);
min-width: 24px;
text-align: center;
display: inline-block;
}
.toast {
position: fixed;
bottom: calc(var(--player-h) + 16px);
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--ink);
color: var(--bg);
font-size: 13px;
padding: 10px 18px;
border-radius: 20px;
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s, transform 0.18s;
z-index: 50;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ============================================================
About page
============================================================ */
.about-hero {
display: grid;
grid-template-columns: auto 1fr;
gap: 28px;
align-items: center;
padding: 28px 28px;
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
.about-hero::before {
/* Subtle gold seam along the top to echo the hero cards on other pages. */
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
opacity: 0.65;
}
.about-portrait {
width: 180px;
height: 180px;
margin: 0;
border-radius: 50%;
overflow: hidden;
flex: 0 0 auto;
position: relative;
background: var(--bg-deep);
border: 3px solid var(--gold-soft);
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.about-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Fallback avatar: only shown when the ![]()
fails to load (the onerror
handler adds .is-missing to the ). */
.about-portrait-fallback {
position: absolute;
inset: 0;
display: none;
place-items: center;
background: linear-gradient(135deg, var(--gold-soft), var(--bg-deep));
color: var(--gold);
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 64px;
font-weight: 600;
letter-spacing: 0.02em;
}
.about-portrait.is-missing .about-portrait-fallback { display: grid; }
.about-hero-body {
min-width: 0;
}
.about-hero-body .hero-title { margin: 6px 0 4px; }
.about-lead {
color: var(--ink-soft);
font-size: 15.5px;
line-height: 1.65;
max-width: 56ch;
margin: 10px 0 18px;
}
.about-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.about-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid var(--gold-soft);
background: var(--bg);
color: var(--ink);
font-weight: 500;
font-size: 14px;
text-decoration: none;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.about-btn:hover {
background: var(--bg-deep);
border-color: var(--gold);
transform: translateY(-1px);
}
.about-btn svg { width: 18px; height: 18px; }
.about-btn.soundcloud {
background: linear-gradient(135deg, #ff7700, #ff3300);
border-color: transparent;
color: #fff;
}
.about-btn.soundcloud:hover {
background: linear-gradient(135deg, #ff8800, #ff4400);
border-color: transparent;
color: #fff;
}
.about-section {
margin: 28px 0;
}
.about-h2 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 28px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink);
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--gold-soft);
}
.about-diocese {
display: grid;
grid-template-columns: 220px 1fr;
gap: 28px;
align-items: start;
}
.about-bishop {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
position: relative;
}
.about-bishop img {
width: 220px;
height: 260px;
object-fit: cover;
border-radius: 14px;
border: 1px solid var(--gold-soft);
box-shadow: var(--shadow-sm);
}
.about-bishop-fallback {
display: none;
width: 220px;
height: 260px;
border-radius: 14px;
border: 1px solid var(--gold-soft);
background: linear-gradient(135deg, var(--bg-deep), var(--bg-elev));
color: var(--gold);
place-items: center;
}
.about-bishop-fallback svg { width: 80px; height: 80px; }
.about-bishop.is-missing img { display: none; }
.about-bishop.is-missing .about-bishop-fallback { display: grid; }
.about-bishop figcaption {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 17px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.01em;
}
.about-diocese-body p {
color: var(--ink-soft);
line-height: 1.7;
font-size: 15px;
margin: 0 0 12px;
}
.about-diocese-body strong {
color: var(--ink);
font-weight: 600;
}
.about-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 10px;
color: var(--ink-faint);
font-size: 13.5px;
}
.about-links a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px dotted color-mix(in srgb, var(--accent) 50%, transparent);
padding-bottom: 1px;
}
.about-links a:hover {
border-bottom-style: solid;
}
.about-links .dot { color: var(--ink-faint); }
.about-parish-intro {
color: var(--ink-soft);
line-height: 1.6;
margin: 0 0 16px;
}
.about-parishes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
.about-parish-card {
display: flex;
gap: 14px;
padding: 18px 18px;
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: 14px;
transition: border-color var(--transition), transform var(--transition);
}
.about-parish-card:hover {
border-color: var(--gold-soft);
transform: translateY(-1px);
}
.about-parish-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--bg-deep);
color: var(--gold);
display: grid;
place-items: center;
flex: 0 0 auto;
}
.about-parish-icon svg { width: 22px; height: 22px; }
.about-parish-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.about-parish-name {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 18px;
font-weight: 600;
color: var(--ink);
line-height: 1.25;
}
.about-parish-city {
font-size: 13px;
color: var(--ink-faint);
}
.about-parish-link {
margin-top: 6px;
font-size: 13px;
color: var(--accent);
text-decoration: none;
align-self: flex-start;
}
.about-parish-link:hover { text-decoration: underline; }
.about-archive p {
color: var(--ink-soft);
line-height: 1.7;
font-size: 15px;
}
.about-archive kbd {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
border: 1px solid var(--line);
border-radius: 5px;
padding: 1px 6px;
background: var(--bg-elev);
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 900px) {
:root { --sidebar-w: 240px; }
/* Keep player-right visible but trimmed — hide presets, sleep, speed display */
.player-main { grid-template-columns: minmax(160px, 1fr) auto minmax(0, auto); gap: 10px; }
.preset-chip-row { display: none; }
.sleep-timer-wrap { display: none; }
.speed-display { display: none; }
.player-progress { min-width: 200px; }
}
@media (max-width: 720px) {
body {
grid-template-columns: 1fr;
grid-template-areas:
"head"
"main"
"play";
}
body.has-related { --related-w: 0px; }
.sidebar {
position: fixed;
top: var(--header-h);
left: 0;
width: 280px;
height: calc(100vh - var(--header-h) - var(--player-h));
border-right: 1px solid var(--line);
transform: translateX(-100%);
transition: transform var(--transition);
z-index: 30;
box-shadow: var(--shadow-lg);
}
.sidebar.open { transform: translateX(0); }
.scrim {
display: none;
position: fixed;
inset: var(--header-h) 0 var(--player-h) 0;
background: rgba(0,0,0,0.3);
z-index: 25;
}
.scrim.open { display: block; }
.menu-toggle { display: grid; }
.sidebar-toggle { display: none; } /* drawer only on mobile — no collapse button needed */
.brand-title { font-size: 16px; }
.search-wrap { max-width: none; flex: 1 1 auto; }
.search-kbd { display: none; }
/* About page — stack portrait, stack diocese block */
.about-hero {
grid-template-columns: 1fr;
text-align: center;
padding: 22px;
}
.about-portrait {
width: 150px;
height: 150px;
margin: 0 auto;
}
.about-hero-body { text-align: center; }
.about-lead { margin-left: auto; margin-right: auto; }
.about-actions { justify-content: center; }
.about-diocese {
grid-template-columns: 1fr;
text-align: center;
}
.about-bishop { margin: 0 auto; }
.about-links { justify-content: center; }
main { padding: 20px 16px 30px; }
.hero {
flex-direction: column;
text-align: center;
padding: 22px;
}
.hero-actions { justify-content: center; }
.player-center { min-width: auto; }
.player-progress { min-width: auto; }
.player-left { flex: 1; min-width: 0; }
.player-right { display: none; } /* volume accessible via full player (E) on mobile */
.player-art { width: 48px; height: 48px; }
.player-art svg { width: 24px; height: 24px; }
.player-meta-title { font-size: 15px; }
.transport-btn:nth-child(1),
.transport-btn:nth-child(5),
.transport-btn:nth-child(8) { display: none; }
}
/* Utility */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* ============================================================
Search prompt (All Hymns catalog-search view)
============================================================ */
.search-prompt {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 48px 24px 56px;
color: var(--ink-soft);
font-size: 15px;
text-align: center;
}
.search-prompt-icon {
font-size: 36px;
opacity: 0.5;
line-height: 1;
}
.search-prompt p { margin: 0; max-width: 440px; line-height: 1.6; }
.search-overflow-note {
padding: 12px 16px;
color: var(--ink-soft);
font-size: 13px;
background: var(--bg-elev);
border-radius: var(--radius-sm);
margin: 8px 0 0;
text-align: center;
}
/* ============================================================
Admin mode
============================================================ */
/* Admin toolbar — fixed bar at the very bottom above the player */
.admin-toolbar {
position: fixed;
top: var(--header-h);
left: 0;
right: 0;
z-index: 50;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 18px;
background: color-mix(in srgb, var(--accent) 92%, transparent);
color: var(--accent-ink, #fff);
font-size: 13px;
flex-wrap: wrap;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.admin-toolbar-label {
display: flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.admin-toolbar-label svg { width: 15px; height: 15px; }
.admin-toolbar-hint {
flex: 1;
min-width: 0;
opacity: 0.82;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-toolbar-btn {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 5px;
padding: 5px 11px;
border-radius: 6px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.25);
color: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.13s;
}
.admin-toolbar-btn:hover { background: rgba(255,255,255,0.28); }
.admin-toolbar-btn svg { width: 13px; height: 13px; }
.admin-toolbar-btn--danger {
background: rgba(0,0,0,0.2);
border-color: rgba(255,255,255,0.15);
}
.admin-toolbar-btn--danger:hover { background: rgba(0,0,0,0.38); }
/* Shift content down so admin toolbar doesn't overlap */
body.admin-mode #content {
margin-top: 42px;
}
/* Editable elements — show pencil cursor + subtle underline affordance */
.admin-editable {
cursor: text;
border-bottom: 1.5px dashed var(--accent-soft);
padding-bottom: 1px;
transition: border-color 0.15s, background 0.15s;
}
.admin-editable:hover {
background: color-mix(in srgb, var(--accent) 10%, transparent);
border-bottom-color: var(--accent);
border-radius: 3px;
}
/* Inline edit input */
.admin-edit-input {
border: none;
border-bottom: 2px solid var(--accent);
background: var(--bg-elev);
color: var(--ink);
font: inherit;
font-size: inherit;
padding: 1px 4px;
border-radius: 3px 3px 0 0;
outline: none;
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
min-width: 80px;
}
/* Hide/show track button in admin mode */
.admin-hide-btn svg { width: 15px; height: 15px; }
.admin-hide-btn { opacity: 0.55; }
.admin-hide-btn:hover { opacity: 1; }
.admin-hide-btn.is-hidden { color: var(--accent); opacity: 0.9; }
/* Hidden track styling in admin mode */
body.admin-mode li.track.admin-hidden-track {
opacity: 0.4;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 4px,
color-mix(in srgb, var(--accent) 6%, transparent) 4px,
color-mix(in srgb, var(--accent) 6%, transparent) 8px
);
border-radius: var(--radius-sm);
}
/* Hidden tracks are not rendered at all in normal mode
(filtered in _renderCollectionBody), so no CSS needed for normal mode. */
/* ── Admin toggle button in header ─────────────────────────────────────── */
.admin-toggle-btn {
transition: color 0.15s, background 0.15s;
}
.admin-toggle-btn.admin-active {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 14%, transparent);
border-radius: var(--radius-sm);
}
.admin-toggle-btn.admin-active:hover {
background: color-mix(in srgb, var(--accent) 22%, transparent);
}
/* ── Admin password modal ───────────────────────────────────────────────── */
.admin-auth-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.admin-auth-dialog {
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 32px 24px;
width: min(360px, 90vw);
box-shadow: 0 8px 40px rgba(0,0,0,0.35);
display: flex;
flex-direction: column;
gap: 12px;
}
.admin-auth-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--ink);
display: flex;
align-items: center;
gap: 8px;
}
.admin-auth-title svg { width: 18px; height: 18px; color: var(--accent); }
.admin-auth-input {
width: 100%;
padding: 10px 12px;
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--ink);
font: inherit;
font-size: 15px;
outline: none;
transition: border-color 0.15s;
box-sizing: border-box;
}
.admin-auth-input:focus {
border-color: var(--accent);
}
.admin-auth-error {
color: var(--accent);
font-size: 13px;
min-height: 18px;
}
.admin-auth-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 4px;
}
.admin-auth-actions button {
padding: 8px 18px;
border-radius: var(--radius-sm);
font: inherit;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border: 1.5px solid var(--line);
background: var(--bg);
color: var(--ink);
transition: background 0.15s, border-color 0.15s;
}
.admin-auth-actions button:hover {
background: var(--bg-elev);
}
.admin-auth-actions button.admin-auth-submit {
background: var(--accent);
color: var(--accent-ink, #fff);
border-color: var(--accent);
}
.admin-auth-actions button.admin-auth-submit:hover {
filter: brightness(1.1);
}
@keyframes adminShake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-7px); }
40%, 80% { transform: translateX(7px); }
}
.admin-auth-shake {
animation: adminShake 0.45s ease;
}
/* ── Account button & avatar ───────────────────────────────────── */
.account-btn { position: relative; }
.account-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--accent);
color: var(--accent-ink, #fff);
font-size: 11px;
font-weight: 700;
font-family: var(--font-ui);
letter-spacing: 0.03em;
}
.account-avatar.pending {
background: var(--ink-soft);
opacity: 0.7;
}
.account-badge {
position: absolute;
top: 2px;
right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: #e53e3e;
color: #fff;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
/* ── Auth modal ─────────────────────────────────────────────────── */
.auth-card {
width: min(420px, 92vw);
}
.auth-tabs {
display: flex;
gap: 0;
border-bottom: 1.5px solid var(--line);
margin-bottom: 20px;
}
.auth-tab {
flex: 1;
padding: 10px 0;
background: none;
border: none;
border-bottom: 2.5px solid transparent;
margin-bottom: -1.5px;
color: var(--ink-soft);
font: inherit;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.auth-subtitle {
color: var(--ink-soft);
font-size: 14px;
margin: 0 0 16px;
line-height: 1.5;
}
.auth-input {
display: block;
width: 100%;
padding: 10px 12px;
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--ink);
font: inherit;
font-size: 15px;
margin-bottom: 10px;
outline: none;
transition: border-color 0.15s;
box-sizing: border-box;
}
.auth-input:focus { border-color: var(--accent); }
/* Password field + show/hide toggle */
.auth-pw-wrap {
position: relative;
margin-bottom: 10px;
}
.auth-pw-wrap .auth-input {
margin-bottom: 0;
padding-right: 44px;
}
.auth-pw-eye {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 16px;
line-height: 1;
color: var(--ink-faint);
padding: 4px;
border-radius: 4px;
transition: color 0.15s;
}
.auth-pw-eye:hover { color: var(--ink); }
.auth-error {
color: #e53e3e;
font-size: 13px;
margin-bottom: 10px;
padding: 8px 10px;
background: color-mix(in srgb, #e53e3e 10%, transparent);
border-radius: var(--radius-sm);
}
.auth-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 4px;
}
.auth-submit { min-width: 120px; }
.auth-pending {
text-align: center;
padding: 16px 8px 8px;
}
.auth-pending-icon { font-size: 2.8rem; margin-bottom: 12px; }
.auth-pending h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 20px; }
.auth-pending p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
/* ── User menu dropdown ─────────────────────────────────────────── */
.user-menu {
position: fixed;
z-index: 500;
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
min-width: 220px;
overflow: hidden;
animation: fadeIn 0.12s ease;
}
.user-menu-header {
padding: 14px 16px 12px;
border-bottom: 1px solid var(--line);
}
.user-menu-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.user-menu-email { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.user-menu-status {
display: inline-block;
margin-top: 6px;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 20px;
}
.user-menu-status.approved { background: color-mix(in srgb, #38a169 15%, transparent); color: #276749; }
.user-menu-status.pending { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
[data-theme="dark"] .user-menu-status.approved { color: #68d391; }
[data-theme="dark"] .user-menu-status.pending { color: var(--gold); }
.user-menu-item {
display: block;
width: 100%;
padding: 11px 16px;
background: none;
border: none;
text-align: left;
font: inherit;
font-size: 14px;
color: var(--ink);
cursor: pointer;
transition: background 0.12s;
}
.user-menu-item:hover { background: var(--bg-hover); }
.user-menu-signout { color: #e53e3e; }
.user-menu-divider { border: none; border-top: 1px solid var(--line); margin: 0; }
/* ── Approval panel ─────────────────────────────────────────────── */
.approval-card {
width: min(560px, 92vw);
max-height: 80vh;
display: flex;
flex-direction: column;
}
.approval-list {
overflow-y: auto;
flex: 1;
margin: 0 -4px;
padding: 0 4px;
}
.approval-loading {
color: var(--ink-soft);
padding: 24px 0;
text-align: center;
}
.approval-empty {
text-align: center;
padding: 32px 16px;
color: var(--ink-soft);
}
.approval-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
.approval-row:last-child { border-bottom: none; }
.approval-user { flex: 1; min-width: 0; }
.approval-user-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.approval-user-email { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.approval-user-date { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.approval-btns { display: flex; gap: 8px; flex-shrink: 0; }
.approval-approve { font-size: 13px; padding: 6px 14px; }
.approval-decline { font-size: 13px; padding: 6px 14px; color: #e53e3e; border-color: #e53e3e; }
.approval-decline:hover { background: color-mix(in srgb, #e53e3e 10%, transparent); }
.approval-approve svg, .approval-decline svg { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
/* ============================================================
Now-playing animated bars
============================================================ */
@keyframes np-bar {
0%, 100% { height: 4px; }
50% { height: 14px; }
}
.np-bars {
display: flex;
align-items: flex-end;
gap: 2.5px;
height: 16px;
padding-bottom: 1px;
}
.np-bars .np-bar {
width: 3px;
background: currentColor;
border-radius: 2px;
animation: np-bar 0.8s ease-in-out infinite;
min-height: 4px;
}
/* Negative delays so bars start mid-cycle when first rendered —
prevents the "all bars flash to minimum height" on track switch. */
.np-bars .np-bar:nth-child(1) { animation-delay: -0.3s; }
.np-bars .np-bar:nth-child(2) { animation-delay: -0.52s; }
.np-bars .np-bar:nth-child(3) { animation-delay: -0.08s; }
/* Paused state — bars frozen mid-height */
.np-bars.paused .np-bar {
animation-play-state: paused;
height: 8px;
}
/* ============================================================
Track number badge
============================================================ */
.track-num {
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--ink-faint);
min-width: 22px;
text-align: right;
flex: 0 0 auto;
user-select: none;
letter-spacing: -0.01em;
}
li.track.playing .track-num { color: var(--accent); font-weight: 600; }
/* ============================================================
Player: position counter + jump button
============================================================ */
.player-position {
font-size: 10.5px;
color: var(--ink-faint);
font-variant-numeric: tabular-nums;
white-space: nowrap;
line-height: 1;
margin-top: 2px;
}
.jump-btn {
width: 28px; height: 28px;
display: grid; place-items: center;
border-radius: 50%;
border: 1px solid var(--line);
background: transparent;
color: var(--ink-faint);
transition: color var(--transition), background var(--transition);
flex: 0 0 auto;
}
.jump-btn:hover { background: var(--bg-deep); color: var(--accent); border-color: var(--gold-soft); }
.jump-btn svg { width: 13px; height: 13px; }
/* ============================================================
Sleep timer
============================================================ */
.sleep-timer-wrap {
position: relative;
}
.sleep-timer-menu {
position: absolute;
bottom: calc(100% + 8px);
right: 0;
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
padding: 6px;
display: none;
flex-direction: column;
gap: 2px;
min-width: 150px;
z-index: 60;
/* Prevent clipping on short viewports */
max-height: calc(100vh - var(--player-h) - var(--header-h) - 16px);
overflow-y: auto;
}
.sleep-timer-menu.open { display: flex; }
.sleep-opt {
padding: 8px 12px;
border-radius: 6px;
border: none;
background: transparent;
color: var(--ink);
font: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
transition: background var(--transition);
white-space: nowrap;
}
.sleep-opt:hover { background: var(--bg-deep); color: var(--accent); }
.sleep-opt.active { color: var(--accent); font-weight: 600; }
.sleep-menu-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink-faint);
padding: 4px 12px 6px;
border-bottom: 1px solid var(--line);
margin-bottom: 2px;
}
.sleep-custom-row {
display: flex;
gap: 4px;
padding: 4px 6px 2px;
border-top: 1px solid var(--line);
margin-top: 2px;
}
.sleep-custom-input {
flex: 1;
min-width: 0;
padding: 5px 8px;
border-radius: 5px;
border: 1px solid var(--line);
background: var(--bg);
color: var(--ink);
font: inherit;
font-size: 12px;
}
.sleep-custom-input:focus {
outline: none;
border-color: var(--accent);
}
.sleep-custom-set {
padding: 5px 10px !important;
background: var(--gold) !important;
color: var(--bg) !important;
font-weight: 600 !important;
border-radius: 5px !important;
}
.sleep-timer-btn {
position: relative;
}
.sleep-timer-btn.active { color: var(--accent); }
.sleep-countdown {
font-size: 9px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--accent);
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
line-height: 1;
letter-spacing: -0.02em;
}
/* ============================================================
Search dropdown
============================================================ */
.search-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
z-index: 200;
display: none;
max-height: 380px;
overflow-y: auto;
}
.search-dropdown.open { display: block; }
.sdrop-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
cursor: pointer;
border-bottom: 1px solid var(--line-soft);
transition: background var(--transition);
}
.sdrop-item:last-child { border-bottom: none; }
.sdrop-item:hover, .sdrop-item.sdrop-focused { background: var(--bg-deep); }
.sdrop-play-btn {
width: 26px; height: 26px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--bg);
display: grid; place-items: center;
color: var(--accent);
flex: 0 0 auto;
transition: background var(--transition);
}
.sdrop-play-btn svg { width: 10px; height: 10px; }
.sdrop-item:hover .sdrop-play-btn { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.sdrop-text { flex: 1; min-width: 0; }
.sdrop-title {
font-size: 13.5px;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sdrop-sub {
font-size: 11.5px;
color: var(--ink-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
.sdrop-more {
padding: 9px 14px;
font-size: 12px;
color: var(--ink-faint);
text-align: center;
border-top: 1px solid var(--line-soft);
}
.sdrop-empty {
padding: 20px 14px;
text-align: center;
font-size: 13.5px;
color: var(--ink-faint);
font-style: italic;
}
/* ============================================================
Scroll-to-top button
============================================================ */
.scroll-top-btn {
position: fixed;
bottom: calc(var(--player-h) + 20px);
right: 22px;
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--bg-elev);
color: var(--ink-soft);
display: grid; place-items: center;
box-shadow: var(--shadow);
cursor: pointer;
z-index: 40;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: opacity var(--transition), transform var(--transition), background var(--transition);
}
.scroll-top-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--bg-deep); border-color: var(--gold-soft); color: var(--accent); }
.scroll-top-btn svg { width: 15px; height: 15px; }
/* ============================================================
Collection in-line filter
============================================================ */
.col-filter-wrap {
padding: 6px 10px 8px;
border-bottom: 1px solid var(--line-soft);
}
/* Inner row holds the input + icon together so positioning is independent of the count line */
.col-filter-row {
position: relative;
display: flex;
align-items: center;
}
.col-filter-row::before {
content: "";
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 13px; height: 13px;
background: var(--ink-soft);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
opacity: 0.45;
pointer-events: none;
z-index: 1;
}
.col-filter {
width: 100%;
height: 30px;
padding: 0 10px 0 28px;
font: inherit;
font-size: 13px;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line);
border-radius: 15px;
outline: none;
transition: border-color var(--transition), box-shadow var(--transition);
box-sizing: border-box;
/* Hide native search decorations (browser magnifying glass + cancel button) */
-webkit-appearance: none;
appearance: none;
}
.col-filter::-webkit-search-decoration,
.col-filter::-webkit-search-cancel-button { display: none; }
.col-filter:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.col-filter-count {
font-size: 11px;
color: var(--ink-faint);
text-align: center;
padding: 2px 0 0;
display: none;
}
.col-filter-count.visible { display: block; }
/* ============================================================
Feature cards — Hymn of the Day + Continue Listening
============================================================ */
.feature-card {
border-radius: 14px;
border: 1px solid var(--line);
background: var(--bg-elev);
padding: 16px 20px;
margin-bottom: 14px;
display: flex;
flex-direction: column;
gap: 6px;
transition: box-shadow var(--transition), border-color var(--transition);
}
.feature-card:hover { box-shadow: var(--shadow); border-color: var(--gold-soft); }
.hotd-card { border-left: 3px solid var(--gold); }
.continue-card { border-left: 3px solid var(--accent); }
.feature-card-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold);
}
.feature-card-label svg { width: 13px; height: 13px; }
.continue-card .feature-card-label { color: var(--accent); }
.feature-card-title {
font-family: 'Cormorant Garamond', serif;
font-size: 19px;
font-weight: 600;
color: var(--ink);
line-height: 1.3;
}
.feature-card-meta {
font-size: 12.5px;
color: var(--ink-soft);
}
.feature-card-actions {
display: flex;
gap: 8px;
margin-top: 4px;
flex-wrap: wrap;
}
/* ============================================================
Bookmark button state
============================================================ */
.row-bm.is-bm { color: var(--accent); }
.row-bm.is-bm svg { fill: var(--accent); stroke: var(--accent); }
/* Bookmark time badge in bookmarks view */
.bm-time-badge {
display: inline-block;
font-size: 10px;
font-variant-numeric: tabular-nums;
background: var(--bg-deep);
color: var(--ink-soft);
border: 1px solid var(--line);
border-radius: 4px;
padding: 1px 5px;
margin-left: 6px;
vertical-align: middle;
}
/* Admin note button */
.admin-note-btn { opacity: 0.4; }
.admin-note-btn.has-note { opacity: 1; color: var(--gold); }
/* ============================================================
CSS Waveform in player
============================================================ */
.progress-stack {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.player-waveform {
display: flex;
align-items: flex-end;
gap: 2px;
height: 18px;
padding: 0 2px;
overflow: hidden;
opacity: 0.18;
transition: opacity var(--transition);
}
.player-waveform.playing { opacity: 0.55; }
@keyframes wv-pulse {
0%, 100% { height: var(--wv-h, 40%); }
50% { height: 100%; }
}
.wv-bar {
flex: 1;
background: var(--gold);
border-radius: 2px 2px 0 0;
height: var(--wv-h, 40%);
animation: wv-pulse 1.4s ease-in-out infinite;
animation-play-state: paused;
}
.player-waveform.playing .wv-bar { animation-play-state: running; }
/* ============================================================
Related / More cantors section
============================================================ */
.related-section {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--line-soft);
}
.related-heading {
display: flex;
align-items: center;
gap: 8px;
font-family: 'Cormorant Garamond', serif;
font-size: 17px;
font-weight: 600;
color: var(--ink-soft);
margin: 0 0 12px;
}
.related-heading svg { width: 16px; height: 16px; opacity: 0.6; }
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
.related-card {
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 14px;
cursor: pointer;
transition: box-shadow var(--transition), border-color var(--transition), background var(--transition);
display: flex;
flex-direction: column;
gap: 4px;
}
.related-card:hover { box-shadow: var(--shadow); border-color: var(--gold-soft); background: var(--bg-deep); }
.related-card-icon { color: var(--gold); margin-bottom: 2px; }
.related-card-icon svg { width: 18px; height: 18px; }
.related-card-name {
font-size: 13px;
font-weight: 600;
color: var(--ink);
line-height: 1.3;
}
.related-card-meta {
font-size: 11px;
color: var(--ink-faint);
}
/* ============================================================
Bookmarks view — play button override note
============================================================ */
.bm-position-badge {
font-size: 10px;
color: var(--gold);
padding: 1px 5px;
background: color-mix(in srgb, var(--gold) 12%, transparent);
border-radius: 4px;
white-space: nowrap;
}
/* ============================================================
Related tracks panel (right column)
============================================================ */
.related-panel {
grid-area: rela;
overflow-y: auto;
overflow-x: hidden;
border-left: 1px solid var(--line);
background: var(--bg-elev);
display: flex;
flex-direction: column;
width: 260px;
/* Hidden by default — body.has-related makes it visible */
pointer-events: none;
opacity: 0;
transition: opacity var(--transition);
}
body.has-related .related-panel {
pointer-events: auto;
opacity: 1;
}
.related-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px 8px;
border-bottom: 1px solid var(--line-soft);
position: sticky;
top: 0;
background: var(--bg-elev);
z-index: 2;
}
.related-panel-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-faint);
display: flex;
align-items: center;
gap: 6px;
}
.related-panel-title svg { width: 13px; height: 13px; }
.related-panel-refresh,
.related-panel-close {
width: 24px; height: 24px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--ink-faint);
display: grid; place-items: center;
cursor: pointer;
flex-shrink: 0;
transition: background var(--transition), color var(--transition);
}
.related-panel-refresh:hover { background: var(--bg-deep); color: var(--accent); }
.related-panel-close:hover { background: var(--bg-deep); color: var(--ink); }
.related-panel-refresh svg,
.related-panel-close svg { width: 14px; height: 14px; }
/* Push refresh to the right, keep close right at the edge */
.related-panel-head { gap: 4px; }
.related-panel-refresh { margin-left: auto; }
.related-panel-now {
padding: 10px 14px 8px;
border-bottom: 1px solid var(--line-soft);
font-size: 12px;
color: var(--ink-soft);
line-height: 1.4;
}
.related-now-title {
color: var(--ink);
font-size: 13px;
font-weight: 600;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.related-now-meta {
font-size: 11px;
color: var(--ink-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.related-col-header {
display: flex;
align-items: center;
padding: 0 14px 4px;
padding-left: calc(14px + 26px + 8px); /* offset past the play button column */
border-bottom: 1px solid var(--line);
margin-bottom: 2px;
}
.related-col-track {
flex: 1;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink-faint);
}
.related-col-sim {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink-faint);
}
.related-panel-list {
list-style: none;
margin: 0;
padding: 6px 0;
flex: 1;
}
.related-row {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 7px 14px;
cursor: pointer;
transition: background var(--transition);
border-bottom: 1px solid transparent;
}
.related-row:hover { background: var(--bg-deep); }
.related-row.is-playing { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.related-row-play {
width: 26px; height: 26px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--bg-elev);
color: var(--ink-soft);
display: grid; place-items: center;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
margin-top: 1px;
}
.related-row:hover .related-row-play,
.related-row.is-playing .related-row-play {
background: var(--gold);
border-color: var(--gold);
color: var(--bg);
}
.related-row-play svg { width: 11px; height: 11px; }
.related-row-body { flex: 1; min-width: 0; }
.related-row-title {
font-size: 12.5px;
font-weight: 500;
color: var(--ink);
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.related-row-meta {
font-size: 11px;
color: var(--ink-faint);
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.related-score {
flex-shrink: 0;
font-size: 10px;
color: var(--ink-faint);
background: var(--bg-deep);
border-radius: 4px;
padding: 1px 5px;
margin-top: 4px;
}
.related-empty {
padding: 30px 14px;
text-align: center;
color: var(--ink-faint);
font-size: 13px;
font-style: italic;
}
/* Hide on mobile */
@media (max-width: 900px) {
.related-panel { display: none; }
}
/* ============================================================
Bookmark comment modal
============================================================ */
.bm-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 200;
display: grid;
place-items: center;
padding: 20px;
}
.bm-modal {
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
width: 100%;
max-width: 400px;
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
gap: 14px;
}
.bm-modal-title {
font-family: 'Cormorant Garamond', serif;
font-size: 18px;
font-weight: 600;
color: var(--ink);
}
.bm-modal-track {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.4;
}
.bm-modal-time {
display: inline-block;
font-size: 11px;
font-variant-numeric: tabular-nums;
background: color-mix(in srgb, var(--gold) 15%, transparent);
color: var(--gold);
border-radius: 4px;
padding: 1px 6px;
margin-top: 4px;
font-weight: 600;
}
.bm-modal textarea {
width: 100%;
min-height: 80px;
padding: 10px 12px;
font: inherit;
font-size: 13.5px;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
resize: vertical;
outline: none;
box-sizing: border-box;
transition: border-color var(--transition);
}
.bm-modal textarea:focus { border-color: var(--accent); }
.bm-modal-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
/* Bookmark comment display in bookmarks view */
.bm-comment {
font-size: 12px;
color: var(--ink-soft);
font-style: italic;
margin-top: 3px;
line-height: 1.4;
padding-left: 2px;
}
/* ============================================================
Track Comments Panel
============================================================ */
/* The panel wraps below the flex row items */
.tc-panel {
flex-basis: 100%;
order: 9999;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px 14px 14px;
margin-top: 2px;
margin-bottom: 4px;
}
/* Comment button on the track row */
.row-cmt {
position: relative;
color: var(--ink-soft);
transition: color var(--transition);
}
.row-cmt:hover { color: var(--accent); }
.row-cmt.has-comments { color: var(--accent); }
.row-cmt-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 14px;
height: 14px;
padding: 0 3px;
font-size: 9px;
font-weight: 700;
line-height: 14px;
text-align: center;
background: var(--accent);
color: #fff;
border-radius: 7px;
display: none;
}
.row-cmt.has-comments .row-cmt-badge { display: block; }
/* Panel header */
.tc-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.tc-header-label {
font-size: 12px;
font-weight: 600;
color: var(--ink-soft);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.tc-close {
background: none;
border: none;
cursor: pointer;
padding: 2px 4px;
color: var(--ink-soft);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.tc-close:hover { color: var(--ink); background: var(--bg-deep); }
/* Comment list */
.tc-list { list-style: none; margin: 0 0 12px; padding: 0; }
.tc-empty {
font-size: 13px;
color: var(--ink-soft);
font-style: italic;
padding: 4px 0 10px;
}
.tc-item {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--line);
}
.tc-item:last-child { border-bottom: none; }
.tc-item-left { flex: 1; min-width: 0; }
.tc-text {
font-size: 13.5px;
color: var(--ink);
line-height: 1.45;
word-break: break-word;
}
.tc-time-badge {
display: inline-block;
font-size: 10px;
font-variant-numeric: tabular-nums;
font-weight: 700;
background: color-mix(in srgb, var(--accent) 15%, transparent);
color: var(--accent);
border-radius: 4px;
padding: 1px 5px;
margin-top: 4px;
margin-right: 4px;
}
.tc-general-badge {
display: inline-block;
font-size: 10px;
font-weight: 600;
background: var(--bg-deep);
color: var(--ink-soft);
border-radius: 4px;
padding: 1px 5px;
margin-top: 4px;
}
.tc-delete {
background: none;
border: none;
cursor: pointer;
color: var(--ink-soft);
padding: 2px 4px;
border-radius: 4px;
flex-shrink: 0;
opacity: 0.5;
transition: opacity var(--transition), color var(--transition);
display: flex;
align-items: center;
}
.tc-item:hover .tc-delete { opacity: 1; }
.tc-delete:hover { color: #e05050; }
/* Add comment form */
.tc-form { display: flex; flex-direction: column; gap: 8px; }
.tc-input {
width: 100%;
min-height: 60px;
padding: 8px 10px;
font: inherit;
font-size: 13px;
color: var(--ink);
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: 7px;
resize: vertical;
outline: none;
box-sizing: border-box;
transition: border-color var(--transition);
}
.tc-input:focus { border-color: var(--accent); }
.tc-form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.tc-time-wrap {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--ink-soft);
}
.tc-time-wrap input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.tc-time-label { cursor: pointer; }
.tc-time-val {
font-variant-numeric: tabular-nums;
font-size: 11px;
font-weight: 600;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-radius: 4px;
padding: 1px 5px;
}
.tc-submit {
padding: 5px 14px;
font-size: 13px;
font-weight: 600;
background: var(--accent);
color: #fff;
border: none;
border-radius: 7px;
cursor: pointer;
transition: opacity var(--transition);
}
.tc-submit:hover { opacity: 0.85; }
/* Keep track rows from collapsing when comments-open */
li.track.comments-open { background: var(--bg-deep); border-radius: 8px; }
/* ── Video panel ─────────────────────────────────────────────────────────── */
#videoPanel {
position: fixed;
bottom: calc(var(--player-h, 72px) + 12px);
right: 16px;
width: 380px;
max-width: calc(100vw - 32px);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
overflow: hidden;
z-index: 900;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#videoPanel.hidden { display: none; }
#videoPanel.minimized #videoElem { display: none; }
#videoPanel.minimized { width: 240px; }
/* Corner mini — compact in-app player (stays inside this window, unlike PiP which floats over other apps) */
#videoPanel.corner-mini {
width: 240px;
}
#videoPanel.corner-mini #videoElem {
max-height: 135px;
}
/* In corner-mini mode, show labels so all modes are clearly identified */
#videoPanel.corner-mini .video-mode-btn .vp-label { display: inline; }
/* Theater mode — panel fills the entire content area */
#videoPanel.theater {
left: var(--sidebar-w, 280px);
right: 0;
top: var(--header-h, 56px);
bottom: var(--player-h, 108px);
width: auto;
max-width: none;
border-radius: 0;
border-top: 1px solid var(--border);
border-left: 1px solid var(--border);
border-right: none;
border-bottom: none;
box-shadow: none;
z-index: 800;
display: flex;
flex-direction: column;
}
body.sidebar-collapsed #videoPanel.theater {
left: 0;
}
#videoPanel.theater #videoElem {
flex: 1;
max-height: none;
height: 100%;
object-fit: contain;
background: #000;
}
/* In theater mode, make mode buttons slightly larger and more visible */
#videoPanel.theater .video-mode-btn {
font-size: 12px;
padding: 5px 11px;
}
#videoPanel.theater .video-panel-title {
font-size: 13px;
}
.video-panel-header {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
background: var(--bg-deep);
border-bottom: 1px solid var(--border);
}
.video-panel-title {
flex: 1;
font-size: 12px;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.video-panel-btn {
flex-shrink: 0;
background: none;
border: none;
cursor: pointer;
font-size: 14px;
color: var(--ink-soft);
padding: 2px 6px;
border-radius: 6px;
line-height: 1;
transition: background var(--transition), color var(--transition);
}
.video-panel-btn:hover { background: var(--bg-hover); color: var(--ink); }
.video-panel-close {
display: flex;
align-items: center;
padding: 4px;
}
.video-panel-close svg { width: 14px; height: 14px; }
/* Three view-mode buttons: PiP · Theater · Full screen */
.video-mode-btns {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.video-mode-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
font-size: 11px;
font-weight: 600;
color: var(--ink-soft);
padding: 4px 9px;
white-space: nowrap;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.video-mode-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.video-mode-btn .vp-label { display: none; } /* icon-only in compact mode */
.video-mode-btn:hover {
background: var(--bg-hover);
color: var(--ink);
border-color: var(--gold-soft);
}
.video-mode-btn.active {
background: color-mix(in srgb, var(--gold) 15%, transparent);
border-color: var(--gold-soft);
color: var(--gold);
}
/* In theater mode show full labels */
#videoPanel.theater .video-mode-btn .vp-label { display: inline; }
#videoElem {
display: block;
width: 100%;
max-height: 260px;
object-fit: contain;
background: #000;
}
/* Video track badge in track rows */
.track-video-badge {
display: inline-flex;
align-items: center;
font-size: 9px;
font-weight: 700;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 14%, transparent);
border-radius: 4px;
padding: 2px 5px;
margin-right: 2px;
letter-spacing: 0.02em;
flex-shrink: 0;
}
li.track.video-track .track-ext {
/* Use accent colour for video file extensions */
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
/* ── Video gallery: per-cantor sections ─────────────────────────────── */
.video-cantor-section {
margin-bottom: 28px;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: var(--bg-elev);
}
.video-cantor-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: var(--bg-deep);
border-bottom: 1px solid var(--line);
cursor: pointer;
user-select: none;
}
/* Chevron for collapse/expand */
.video-cantor-chev {
display: flex;
align-items: center;
color: var(--ink-mute);
flex-shrink: 0;
transition: transform var(--transition);
}
.video-cantor-chev svg { width: 14px; height: 14px; }
/* Collapsed state: hide body, flip chevron */
.video-cantor-section.vc-collapsed .video-cantor-body { display: none; }
.video-cantor-section.vc-collapsed .video-cantor-header { border-bottom: none; }
/* Body wrapper */
.video-cantor-body { }
.video-cantor-icon {
display: flex;
align-items: center;
color: var(--accent);
flex-shrink: 0;
}
.video-cantor-icon svg { width: 15px; height: 15px; }
.video-cantor-name {
flex: 1;
font-size: 14px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--transition);
}
.video-cantor-name:hover { color: var(--gold); }
.video-cantor-count {
font-size: 11px;
font-weight: 500;
color: var(--ink-mute);
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
padding: 2px 9px;
white-space: nowrap;
flex-shrink: 0;
}
.video-cantor-section .tracks {
margin: 0;
border-radius: 0;
}
.video-cantor-body .tracks {
border-top: none;
}
/* ── Photo Gallery ───────────────────────────────────────────────────────── */
.gallery-section {
margin-bottom: 40px;
}
.gallery-section-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--ink);
margin: 0 0 4px 0;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
/* Romanization subtitle under Arabic-only gallery/collection headings */
.gallery-translit {
font-size: 12px;
color: var(--ink-mute);
font-style: italic;
margin: 0 0 12px 0;
letter-spacing: 0.03em;
}
.collection-translit {
font-size: 10.5px;
color: var(--ink-mute);
font-style: italic;
letter-spacing: 0.03em;
margin-top: 1px;
line-height: 1.3;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
.gallery-thumb {
position: relative;
aspect-ratio: 1;
overflow: hidden;
border-radius: 10px;
background: var(--bg-deep);
cursor: pointer;
border: 1px solid var(--border);
transition: transform 0.15s, box-shadow 0.15s;
}
.gallery-thumb:hover {
transform: scale(1.03);
box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.2s;
}
.gallery-thumb-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 4px 6px;
font-size: 10px;
color: #fff;
background: linear-gradient(transparent, rgba(0,0,0,0.6));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 0 0 10px 10px;
opacity: 0;
transition: opacity 0.15s;
}
.gallery-thumb:hover .gallery-thumb-caption { opacity: 1; }
/* Lightbox */
.gallery-lightbox {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(0,0,0,0.92);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.gallery-lightbox.hidden { display: none; }
.gallery-lb-img {
max-width: min(90vw, 900px);
max-height: calc(100vh - 130px);
object-fit: contain;
border-radius: 8px;
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
/* Caption area — stacked lines */
.gallery-lb-caption {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
text-align: center;
max-width: 640px;
}
.gallery-lb-cantor {
font-size: 14px;
font-weight: 600;
color: var(--gold);
letter-spacing: 0.02em;
}
.gallery-lb-folder {
font-size: 12px;
color: rgba(255,255,255,0.6);
}
.gallery-lb-text {
font-size: 13px;
color: rgba(255,255,255,0.85);
}
.gallery-lb-counter {
font-size: 11px;
color: rgba(255,255,255,0.4);
margin-top: 2px;
}
.gallery-lb-btn {
position: fixed;
background: rgba(255,255,255,0.12);
border: none;
color: #fff;
font-size: 28px;
cursor: pointer;
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: background 0.15s;
}
.gallery-lb-btn:hover { background: rgba(255,255,255,0.25); }
.gallery-lb-close { top: 16px; right: 16px; font-size: 22px; }
.gallery-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.gallery-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.gallery-lb-dl { top: 16px; right: 68px; font-size: 14px; }
.gallery-lb-dl svg { width: 18px; height: 18px; }
/* Download button on gallery thumbnails (appears on hover) */
.gallery-thumb-dl {
position: absolute;
top: 6px; right: 6px;
width: 28px; height: 28px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,0.55);
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, background 0.15s;
z-index: 2;
}
.gallery-thumb:hover .gallery-thumb-dl { opacity: 1; }
.gallery-thumb-dl:hover { background: rgba(0,0,0,0.8); }
.gallery-thumb-dl svg { width: 14px; height: 14px; }
@media (max-width: 600px) {
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
/* ═══════════════════════════════════════════════════════════════════════════
NEW FEATURES — 2026-04
═══════════════════════════════════════════════════════════════════════════ */
/* ── Now Playing transliteration ─────────────────────────────────────────── */
.player-meta-translit {
font-size: 11px;
font-style: italic;
color: var(--ink-mute);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.01em;
margin-top: -1px;
margin-bottom: 1px;
}
/* ── Time-jump input on player timecode ──────────────────────────────────── */
.time-interactive {
cursor: pointer;
border-radius: 5px;
transition: background 0.15s, color 0.15s;
padding: 4px 6px;
margin: 0 -6px;
user-select: none;
min-width: 44px;
}
.time-interactive:hover {
background: var(--bg-hover);
color: var(--ink);
text-decoration: underline dotted;
text-underline-offset: 2px;
}
.time-interactive:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.time-interactive.time-jump-editing {
background: var(--bg-deep);
padding: 2px 4px;
}
.time-jump-input {
width: 52px;
background: transparent;
border: none;
border-bottom: 1.5px solid var(--accent);
font-size: 11.5px;
color: var(--ink);
font-family: inherit;
font-variant-numeric: tabular-nums;
padding: 0;
text-align: center;
outline: none;
display: block;
}
/* ── Video track thumbnails ──────────────────────────────────────────────── */
.track-vid-thumb {
width: 80px;
height: 45px;
border-radius: 5px;
overflow: hidden;
flex-shrink: 0;
background: var(--bg-deep);
margin-right: 8px;
position: relative;
border: 1px solid var(--line);
cursor: pointer;
}
.track-vid-thumb video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.4s;
}
.track-vid-thumb.has-frame video { opacity: 1; }
.track-vid-thumb-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.38);
opacity: 0;
transition: opacity 0.18s;
}
.track-vid-thumb-play svg {
width: 18px;
height: 18px;
color: #fff;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.track-vid-thumb:hover .track-vid-thumb-play { opacity: 1; }
li.track.playing .track-vid-thumb-play { opacity: 1; }
@media (max-width: 600px) { .track-vid-thumb { width: 60px; height: 34px; margin-right: 6px; } }
/* ── Analytics dashboard ─────────────────────────────────────────────────── */
.analytics-wrap {
max-width: 900px;
margin: 0 auto;
padding: 24px 20px 80px;
}
.analytics-msg {
color: var(--ink-faint);
font-size: 14px;
margin-top: 24px;
text-align: center;
}
.analytics-stats {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 24px 0;
}
.analytics-stat-card {
flex: 1 1 120px;
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px 20px;
text-align: center;
}
.analytics-stat-val {
font-size: 28px;
font-weight: 700;
font-family: 'Cormorant Garamond', Georgia, serif;
color: var(--accent);
}
.analytics-stat-lbl {
font-size: 12px;
color: var(--ink-mute);
margin-top: 4px;
}
.analytics-section-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 20px;
font-weight: 600;
color: var(--ink);
margin: 32px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.analytics-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
margin-bottom: 8px;
}
.analytics-table th {
text-align: left;
color: var(--ink-mute);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 6px 10px;
border-bottom: 1px solid var(--line);
}
.analytics-table td {
padding: 7px 10px;
border-bottom: 1px solid var(--bg-deep);
color: var(--ink);
vertical-align: middle;
}
.analytics-table tr:last-child td { border-bottom: none; }
.analytics-table tr:hover td { background: var(--bg-hover); }
.analytics-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-mute); }
.analytics-event-type {
font-size: 11px;
font-weight: 600;
font-family: 'Courier New', monospace;
color: var(--accent);
}
.analytics-table-sm { font-size: 12px; }
/* ============================================================
Full-screen player overlay (#fullPlayer)
============================================================ */
.full-player {
position: fixed;
inset: 0;
z-index: 220;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 24px 28px;
gap: 0;
/* Hidden by default — slides in from bottom */
opacity: 0;
pointer-events: none;
transform: translateY(40px);
transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.full-player.open {
opacity: 1;
pointer-events: all;
transform: translateY(0);
}
/* Blurred backdrop */
.fp-bg {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--bg) 86%, transparent);
backdrop-filter: blur(32px) saturate(1.4);
-webkit-backdrop-filter: blur(32px) saturate(1.4);
z-index: 0;
}
/* All content sits above the bg (except the close btn which is absolutely positioned) */
.full-player > *:not(.fp-bg):not(.fp-close) { position: relative; z-index: 1; }
/* Close / collapse button — stays pinned top-right of the overlay */
.fp-close {
position: absolute;
top: 20px;
right: 24px;
background: none;
border: none;
cursor: pointer;
color: var(--ink-mute);
padding: 8px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s;
z-index: 2;
}
.fp-close:hover { color: var(--ink); background: var(--bg-hover); }
.fp-close svg { width: 22px; height: 22px; }
/* Album art / icon */
.fp-art {
width: 160px;
height: 160px;
border-radius: 20px;
background:
radial-gradient(ellipse at 30% 25%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 60%),
radial-gradient(ellipse at 70% 75%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%),
var(--bg-deep);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 18%, transparent),
0 2px 8px rgba(0,0,0,0.12);
transition: box-shadow 0.4s ease, transform 0.4s ease;
}
/* Subtle pulse when track is playing */
body.is-playing .fp-art {
box-shadow: 0 12px 48px color-mix(in srgb, var(--accent) 30%, transparent),
0 4px 16px rgba(0,0,0,0.15);
animation: fp-art-breathe 3.5s ease-in-out infinite;
}
@keyframes fp-art-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.025); }
}
.fp-art svg { width: 72px; height: 72px; color: var(--gold); opacity: 0.7; }
.fp-art img { width: 100%; height: 100%; object-fit: cover; }
/* Title + meta */
.fp-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(20px, 4vw, 30px);
font-weight: 600;
color: var(--ink);
text-align: center;
max-width: 680px;
line-height: 1.25;
margin-bottom: 4px;
}
.fp-translit {
font-size: 13px;
font-style: italic;
color: var(--ink-mute);
text-align: center;
margin-bottom: 4px;
letter-spacing: 0.015em;
}
.fp-sub {
font-size: 13px;
color: var(--ink-mute);
text-align: center;
margin-bottom: 12px;
}
.fp-fav {
margin-bottom: 16px;
display: flex;
justify-content: center;
}
.fp-fav-btn {
background: none;
border: none;
cursor: pointer;
padding: 6px 10px;
border-radius: 20px;
color: var(--ink-faint);
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
transition: color 0.15s, background 0.15s;
}
.fp-fav-btn:hover { color: var(--gold); background: var(--bg-hover); }
.fp-fav-btn.is-fav { color: var(--gold); }
.fp-fav-btn svg { width: 18px; height: 18px; }
/* ── Seekbar ─────────────────────────────────────────────────────────────── */
.fp-progress-row {
width: 100%;
max-width: 680px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.fp-time {
font-size: 12px;
font-variant-numeric: tabular-nums;
color: var(--ink-mute);
min-width: 36px;
text-align: center;
flex-shrink: 0;
}
.fp-track {
flex: 1;
height: 8px;
background: var(--bg-deep);
border-radius: 4px;
position: relative;
cursor: pointer;
transition: height 0.15s;
}
.fp-track:hover,
.fp-track.dragging { height: 12px; }
.fp-buffer {
position: absolute;
left: 0; top: 0; bottom: 0;
background: color-mix(in srgb, var(--ink-faint) 30%, transparent);
border-radius: 3px;
pointer-events: none;
}
.fp-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
background: linear-gradient(90deg, var(--accent), var(--gold));
border-radius: 3px;
pointer-events: none;
}
.fp-thumb {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
background: var(--accent);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.fp-track:hover .fp-thumb,
.fp-track.dragging .fp-thumb { opacity: 1; }
/* ── Transport row (shuffle · prev · back · play · fwd · next · repeat) ─── */
.fp-transport {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
}
.fp-btn {
background: none;
border: none;
cursor: pointer;
padding: 10px;
border-radius: 50%;
color: var(--ink-mute);
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s;
flex-shrink: 0;
}
.fp-btn:hover { color: var(--ink); background: var(--bg-hover); }
.fp-btn svg { width: 20px; height: 20px; }
.fp-btn.fp-btn-on { color: var(--accent); }
.fp-btn.fp-btn-back svg,
.fp-btn.fp-btn-fwd svg { width: 22px; height: 22px; }
/* Big play button */
.fp-play {
background: var(--accent);
border: none;
cursor: pointer;
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: background 0.15s, transform 0.1s;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.fp-play:hover { background: var(--accent-hi, var(--gold)); transform: scale(1.06); }
.fp-play:active { transform: scale(0.96); }
.fp-play svg { width: 28px; height: 28px; }
/* ── Speed preset chips row (full player) ──────────────────────────────── */
.fp-preset-row {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
padding-top: 6px; /* room for absolute badge above chips */
}
/* In the full player, chips are slightly larger for comfortable touch targets */
.fp-preset-row .speed-preset {
height: 30px;
padding: 0 14px;
border-radius: 15px;
font-size: 12.5px;
}
.fp-preset-row .preset-edit-btn { width: 18px; height: 18px; top: -6px; right: -7px; }
.fp-preset-row .preset-edit-btn svg { width: 10px; height: 10px; }
.fp-preset-row .preset-edit-input {
height: 30px;
width: 64px;
font-size: 12.5px;
}
/* ── Controls row (speed + volume) ─────────────────────────────────────── */
.fp-controls-row {
display: flex;
gap: 24px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100%;
max-width: 480px;
}
.fp-speed-wrap,
.fp-vol-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.fp-ctrl-lbl {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-faint);
}
.fp-speed-display {
background: var(--bg-hover);
border: none;
border-radius: 6px;
padding: 4px 8px;
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--ink);
cursor: pointer;
transition: background 0.15s;
min-width: 40px;
text-align: center;
}
.fp-speed-display:hover { background: var(--bg-deep); }
.fp-vol-btn {
background: none;
border: none;
cursor: pointer;
color: var(--ink-mute);
display: flex;
align-items: center;
padding: 4px;
border-radius: 6px;
transition: color 0.15s;
}
.fp-vol-btn:hover { color: var(--ink); }
.fp-vol-btn svg { width: 18px; height: 18px; }
.fp-slider {
-webkit-appearance: none;
appearance: none;
width: 100px;
height: 4px;
border-radius: 2px;
background: var(--bg-deep);
cursor: pointer;
outline: none;
}
.fp-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent);
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.fp-slider::-moz-range-thumb {
width: 14px;
height: 14px;
border: none;
border-radius: 50%;
background: var(--accent);
cursor: pointer;
}
.fp-slider:hover { background: color-mix(in srgb, var(--bg-deep) 70%, var(--accent)); }
/* Prevent body scroll when full player is open */
body.fp-open { overflow: hidden; }
/* ── Expand button on mini player ────────────────────────────────────────── */
.expand-btn,
.player-expand-btn {
background: none;
border: none;
cursor: pointer;
color: var(--ink-faint);
display: flex;
align-items: center;
justify-content: center;
padding: 4px 6px;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
flex-shrink: 0;
}
.expand-btn:hover, .player-expand-btn:hover { color: var(--ink); background: var(--bg-hover); }
.expand-btn svg, .player-expand-btn svg { width: 16px; height: 16px; }
/* Responsive — stack controls on narrow screens */
@media (max-width: 600px) {
.fp-art { width: 120px; height: 120px; border-radius: 16px; margin-bottom: 16px; }
.fp-art svg { width: 56px; height: 56px; }
/* Stack speed + volume controls vertically so sliders have full row width */
.fp-controls-row {
flex-direction: column;
align-items: stretch;
gap: 14px;
max-width: 320px;
}
.fp-speed-wrap,
.fp-vol-wrap {
justify-content: space-between;
}
/* Give sliders more room — fill the remaining row width */
.fp-slider { flex: 1; width: auto; min-width: 0; }
/* Larger thumb for touch */
.fp-slider::-webkit-slider-thumb { width: 20px; height: 20px; }
.fp-slider::-moz-range-thumb { width: 20px; height: 20px; }
/* Taller hit area */
.fp-slider { height: 6px; }
}
@media (max-width: 500px) {
.fp-art { width: 96px; height: 96px; border-radius: 12px; margin-bottom: 14px; }
.fp-art svg { width: 48px; height: 48px; }
.fp-transport { gap: 4px; }
.fp-play { width: 54px; height: 54px; }
.fp-play svg { width: 24px; height: 24px; }
/* Hide preset chips on very narrow screens — use the slider instead */
.fp-preset-row { display: none; }
.full-player { padding: 24px 16px 20px; }
}