/* ============================================================ MediaWatch'd — styles.css Font: Plus Jakarta Sans | Accent: #dce233 ============================================================ */ /* ---------- RESET & BASE ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --accent: #dce233; --accent-dim: #dce23322; --accent-hover: #eaf04a; --bg: #141414; --bg2: #1e1e1e; --bg3: #252525; --bg4: #2e2e2e; --border: #333; --text: #f0f0f0; --text-muted: #888; --text-dim: #555; --sidebar-w: 220px; --mobile-nav-h: 64px; --radius: 10px; --radius-sm: 6px; --shadow: 0 4px 24px rgba(0,0,0,0.5); /* Type badges */ --badge-movie: #dce233; --badge-tv: #4a9eff; --badge-doc: #ff8c42; --badge-docuseries: #b87fff; /* v31b system tokens: spacing, sizing, motion, states */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; --shadow-soft: 0 8px 28px rgba(0,0,0,.35); --shadow-strong: 0 18px 60px rgba(0,0,0,.58); --focus-ring: 0 0 0 3px rgba(220,226,51,.22); --success: #4ade80; --danger: #f87171; --motion-fast: 150ms ease; --motion-med: 220ms ease; /* ── Bottom-sheet modal system ────────────────────────────────────── --sheet-bottom-offset: how far from the bottom the sheet stops. index.html body sets this to var(--mobile-nav-h) so the sheet rises from the nav bar and the nav stays visible. public.html body sets this to 0px (no nav bar on that page). --modal-peek: how much of the page backdrop shows above the sheet when content is tall. Reminds the user the page is behind it. */ --sheet-bottom-offset: 0px; /* default; overridden per-page on */ --modal-peek: 2.5rem; } html { font-size: 16px; } body { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; background: var(--bg); color: var(--text); line-height: 1.5; min-height: 100vh; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, select, textarea { font-family: inherit; font-size: 1rem; } img { display: block; max-width: 100%; } .hidden { display: none !important; } /* ---------- SCROLLBAR ---------- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg2); } ::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; } /* ============================================================ v31b FOUNDATION UTILITIES Shared primitives used to reduce inline style drift and make future component refactors predictable. ============================================================ */ .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-3)); } .row { display: flex; align-items: center; gap: var(--row-gap, var(--space-3)); } .wrap { flex-wrap: wrap; } .cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .surface { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); } .surface-subtle { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); } .text-muted { color: var(--text-muted); } .text-dim { color: var(--text-dim); } .text-accent { color: var(--accent); } .text-danger { color: var(--danger); } .text-success { color: var(--success); } .font-bold { font-weight: 700; } .truncate { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast), transform .1s; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ============================================================ AUTH ============================================================ */ .auth-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; /* Solid dark background below the hero strip */ background: var(--bg); padding: 0 1rem 2rem; position: relative; } /* Top hero strip — CoverGrid + gradient fade, same pattern as explore-hero */ .auth-hero { width: calc(100% + 2rem); /* bleed past the 1rem side padding */ margin: 0 -1rem 2rem -1rem; min-height: 200px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; } .auth-hero::before { content: ""; position: absolute; inset: 0; background: url("/images/CoverGrid.png") center top / cover no-repeat; opacity: 0.22; z-index: 0; } .auth-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,20,20,0.35) 0%, rgba(20,20,20,0.82) 70%, var(--bg) 100%); z-index: 1; } .auth-hero-inner { position: relative; z-index: 2; padding: 2.5rem 1rem 2rem; } .auth-hero-logo { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; color: var(--accent); } .auth-hero-logo i { font-size: 2rem; } .auth-hero-logo span { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; } .auth-hero-tagline { font-size: 0.9rem; color: var(--text-muted); margin: 0; } .auth-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; width: 100%; max-width: 400px; box-shadow: var(--shadow); } .auth-explore-cta { margin-top: 1.5rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; } .auth-explore-cta p { margin: 0 0 0.5rem; } .auth-explore-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent); font-weight: 600; font-size: 0.9rem; text-decoration: none; padding: 0.4rem 0.85rem; border: 1px solid var(--accent); border-radius: 999px; transition: background 0.15s; } .auth-explore-link:hover { background: var(--accent-dim); } .auth-error { background: #3d1515; border: 1px solid #7a2020; color: #ff7070; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.875rem; margin-bottom: 1rem; } .auth-panel { display: flex; flex-direction: column; gap: 0.75rem; } .auth-input { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; color: var(--text); width: 100%; transition: border-color 0.2s; } .auth-input:focus { outline: none; border-color: var(--accent); } .btn-primary { background: var(--accent); color: #111; font-weight: 700; font-size: 1rem; padding: 0.75rem; border-radius: var(--radius-sm); width: 100%; transition: background 0.2s, transform 0.1s; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { transform: scale(0.98); } .btn-google { display: flex; align-items: center; justify-content: center; gap: 0.6rem; background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 0.95rem; padding: 0.7rem; border-radius: var(--radius-sm); width: 100%; transition: border-color 0.2s, background 0.2s; } .btn-google img { width: 18px; height: 18px; } .btn-google:hover { border-color: var(--accent); background: var(--bg4); } .auth-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--text-dim); font-size: 0.8rem; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .auth-switch { font-size: 0.875rem; color: var(--text-muted); text-align: center; } .auth-switch a { color: var(--accent); font-weight: 600; } /* ============================================================ APP LAYOUT ============================================================ */ .app { display: flex; min-height: 100vh; overflow-x: hidden; } /* ---------- SIDEBAR ---------- */ .sidebar { width: var(--sidebar-w); background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; /* Respect notch/Dynamic Island when sidebar is visible (landscape) */ padding: max(1.25rem, env(safe-area-inset-top)) 0 max(1.25rem, env(safe-area-inset-bottom)); } .sidebar-logo { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; font-weight: 800; color: var(--accent); padding: 0 1.25rem 1.25rem; border-bottom: 1px solid var(--border); } .sidebar-logo i { font-size: 1rem; } .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 0.75rem 0; } .nav-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; color: var(--text-muted); transition: background 0.15s, color 0.15s; } .nav-item i { width: 16px; text-align: center; font-size: 0.9rem; } .nav-item:hover { background: var(--bg3); color: var(--text); } .nav-item.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; } .sidebar-bottom { padding: 0.75rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.15rem; } .btn-signout { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; color: var(--text-dim); width: 100%; transition: background 0.15s, color 0.15s; } .btn-signout:hover { background: var(--bg3); color: #ff6b6b; } /* ---------- MAIN CONTENT ---------- */ .main-content { flex: 1; margin-left: var(--sidebar-w); padding: 2rem; min-height: 100vh; padding-bottom: 3rem; overflow-x: hidden; min-width: 0; } /* ---------- PAGE ---------- */ .page { display: none; } .page.active { display: block; } /* Dashboard CoverGrid — cosmetic top strip, sits BEHIND content via position:absolute. page-dashboard must be position:relative. Content is not pushed down. */ #page-dashboard { position: relative; } .dash-cover-hero { position: absolute; top: -2rem; /* reach up into the main-content padding */ left: -2rem; right: -2rem; height: 260px; overflow: hidden; pointer-events: none; z-index: 0; } .dash-cover-hero::before { content: ""; position: absolute; inset: 0; background: url("/images/CoverGrid.png") center top / cover no-repeat; opacity: 0.22; } .dash-cover-hero::after { content: ""; position: absolute; inset: 0; /* Fade from semi-dark at top to fully transparent at bottom — content reads on top */ background: linear-gradient(to bottom, rgba(20,20,20,0.35) 0%, rgba(20,20,20,0.65) 55%, var(--bg) 100% ); } /* All direct children of dashboard sit above the cover strip */ #page-dashboard > *:not(.dash-cover-hero) { position: relative; z-index: 1; } @media (max-width: 768px) { .dash-cover-hero { top: -1rem; left: -1rem; right: -1rem; height: 200px; } } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; } .page-header h1 { font-size: 1.75rem; font-weight: 800; line-height: 1.2; } .page-subtitle { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.2rem; } .section-title { font-size: 1rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; } /* ============================================================ VIEW TOGGLE ============================================================ */ .view-toggle { display: flex; gap: 0.25rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.2rem; } .vt-btn { padding: 0.35rem 0.6rem; border-radius: 4px; color: var(--text-muted); font-size: 0.85rem; transition: background 0.15s, color 0.15s; } .vt-btn:hover { color: var(--text); } .vt-btn.active { background: var(--accent); color: #111; } /* ============================================================ STAT BAR (Dashboard) ============================================================ */ .stat-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.75rem; margin-bottom: 2rem; } .stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; } .stat-card .stat-num { font-size: 1.75rem; font-weight: 800; color: var(--accent); line-height: 1; } .stat-card .stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; } /* ============================================================ ENTRIES GRID — all 3 view modes ============================================================ */ .entries-grid { width: 100%; } /* --- CARDS VIEW (default) --- */ .entries-grid.cards-view { display: flex; flex-direction: column; gap: 0.75rem; } .entry-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); display: flex; gap: 1rem; padding: 0.85rem; cursor: pointer; transition: border-color 0.2s, transform 0.15s; } .entry-card:hover { border-color: var(--accent); transform: translateX(3px); } .entry-card .card-poster { width: 56px; height: 84px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--bg3); } .entry-card .card-poster-placeholder { width: 56px; height: 84px; border-radius: var(--radius-sm); background: var(--bg3); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 1.25rem; flex-shrink: 0; } .entry-card .card-body { flex: 1; min-width: 0; } .entry-card .card-title { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entry-card .card-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .entry-card .card-overview { font-size: 0.825rem; color: var(--text-muted); margin-top: 0.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .entry-card .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; flex-wrap: wrap; gap: 0.4rem; } .entry-card .card-rating { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; } .entry-card .card-date { font-size: 0.775rem; color: var(--text-dim); } /* --- GRID VIEW (covers + titles) --- */ .entries-grid.grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; } .entry-grid-item { cursor: pointer; transition: transform 0.15s; } .entry-grid-item:hover { transform: scale(1.03); } .entry-grid-item img, .entry-grid-item .grid-placeholder { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-sm); object-fit: cover; background: var(--bg3); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 2rem; } .entry-grid-item .grid-title { font-size: 0.8rem; font-weight: 600; margin-top: 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entry-grid-item .grid-year { font-size: 0.75rem; color: var(--text-muted); } /* --- COVERS VIEW (just posters) --- */ .entries-grid.covers-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; } .entry-cover-item { cursor: pointer; transition: transform 0.15s, opacity 0.15s; border-radius: var(--radius-sm); overflow: hidden; } .entry-cover-item:hover { transform: scale(1.05); opacity: 0.85; } .entry-cover-item img, .entry-cover-item .cover-placeholder { width: 100%; aspect-ratio: 2/3; object-fit: cover; background: var(--bg3); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 1.5rem; } /* Dashboard "View More Titles" placeholder card */ .dash-view-more { opacity: 0.65; transition: opacity 0.15s; } .dash-view-more:hover { opacity: 1; } .dash-view-more-inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.4rem; color: var(--text-dim); } .dash-view-more .grid-title { text-align: center; } .dash-view-more.entry-card .card-body { display: flex; align-items: center; justify-content: center; flex: 1; } .dash-view-more.entry-card .card-title { text-align: center; color: var(--text-dim); font-size: 0.75rem; } .dash-view-more-poster { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--text-dim); } /* ============================================================ BADGES ============================================================ */ .type-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.15rem 0.5rem; border-radius: 999px; text-transform: uppercase; } .badge-movie { background: #dce23322; color: var(--badge-movie); border: 1px solid #dce23344; } .badge-television { background: #4a9eff22; color: var(--badge-tv); border: 1px solid #4a9eff44; } .badge-documentary{ background: #ff8c4222; color: var(--badge-doc); border: 1px solid #ff8c4244; } .badge-docuseries { background: #b87fff22; color: var(--badge-docuseries); border: 1px solid #b87fff44; } /* ============================================================ THUMBS / STARS RATING ============================================================ */ .thumb-rating { display: flex; align-items: center; gap: 0.4rem; } .thumb-btn { font-size: 1rem; padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); color: var(--text-dim); transition: color 0.15s, background 0.15s; } .thumb-btn:hover { color: var(--text); background: var(--bg3); } .thumb-btn.active-up { color: #4ade80; } .thumb-btn.active-down { color: #f87171; } .star-rating { display: flex; gap: 0.15rem; } .star-btn { font-size: 0.9rem; color: var(--text-dim); transition: color 0.15s; padding: 0.1rem; } .star-btn.lit { color: var(--accent); } /* ============================================================ FILTER BAR (My Log) ============================================================ */ .filter-bar { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; align-items: stretch; /* all children same height */ } .filter-input { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; color: var(--text); flex: 1; min-width: 160px; transition: border-color 0.2s; height: 38px; box-sizing: border-box; } .filter-input:focus { outline: none; border-color: var(--accent); } .filter-select { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 2.4rem 0 0.85rem; color: var(--text); cursor: pointer; 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='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; height: 38px; box-sizing: border-box; font-size: 0.875rem; } .filter-select:focus { outline: none; border-color: var(--accent); } /* filter-row-2: wraps Type + Sort selects for mobile two-column layout */ .filter-row-2 { display: contents; /* invisible on desktop — children participate in filter-bar flex directly */ } /* Sticky filter bar */ .log-sticky-header { position: sticky; top: 0; z-index: 50; background: var(--bg); padding-bottom: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; } /* page-header inside sticky wrapper — remove its own bottom margin */ .log-sticky-header .page-header { margin-bottom: 0.5rem; } .filter-bar-sticky { /* No longer needs its own sticky — parent handles it */ padding: 0 0 0.5rem; } /* Search input X clear button */ .filter-input-wrap { position: relative; flex: 1; min-width: 160px; height: 38px; } .filter-input-wrap .filter-input { width: 100%; height: 38px; padding-right: 2.2rem; } .filter-input-clear { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 0.8rem; cursor: pointer; transition: color 0.15s; padding: 0.2rem; background: none; border: none; display: none; } .filter-input-clear.visible { display: block; } .filter-input-clear:hover { color: var(--text); } /* Detail hero uses the v31+ media-detail-shell composition below. Legacy banner/mobile hero classes were removed in v31b. */ .detail-hero { display: flex; gap: 1.25rem; position: relative; z-index: 1; align-items: flex-start; } .detail-poster { cursor: pointer; transition: opacity var(--motion-med), transform var(--motion-med); display: block; box-shadow: var(--shadow-soft); } .detail-poster:hover { opacity: .9; transform: scale(1.015); } .detail-poster-placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 2.5rem; } /* Star filter — fill-up style */ .star-filter { display: flex; align-items: center; gap: 0.2rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 0.6rem; flex-shrink: 0; height: 38px; box-sizing: border-box; } .star-filter-label { font-size: 0.8rem; color: var(--text-muted); margin-right: 0.2rem; white-space: nowrap; } .sf-all { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 4px; color: var(--text-muted); background: transparent; transition: background 0.15s, color 0.15s; white-space: nowrap; } .sf-all:hover { color: var(--text); } .sf-all.active { background: var(--accent-dim); color: var(--accent); } .sf-star { font-size: 1rem; padding: 0.15rem 0.1rem; color: var(--text-dim); transition: color 0.1s, transform 0.1s; cursor: pointer; user-select: none; } .sf-star:hover { color: var(--accent); transform: scale(1.15); } .sf-star.lit i { color: var(--accent); } .sf-star i { color: inherit; transition: color 0.1s; } /* ============================================================ SEARCH PAGE ============================================================ */ .search-bar-wrap { display: flex; flex-direction: column; gap: 0.5rem; /* matches .filter-bar gap for visual consistency */ margin-bottom: 1.5rem; } .search-type-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; /* matches filter-bar gap — consistent spacing rhythm */ /* no margin-bottom — parent gap handles all spacing uniformly */ } .stt-btn { padding: 0.75rem 1.1rem; /* match search input vertical padding */ border-radius: var(--radius-sm); font-size: 1rem; /* match search input font-size */ font-weight: 600; color: var(--text-muted); border: 1px solid var(--border); background: var(--bg2); transition: all 0.15s; flex-shrink: 0; } .stt-btn.active { background: var(--accent); color: #111; border-color: var(--accent); } @media (max-width: 500px) { .search-type-tabs { gap: 0.5rem; } /* consistent with parent search-bar-wrap gap */ .stt-btn { flex: 1 1 calc(50% - 0.25rem); /* 2-col grid: (100% - gap) / 2 */ text-align: center; justify-content: center; padding: 0.75rem 0.5rem; font-size: 0.9rem; } } /* search-input-wrap moved below */ .search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } .search-result-item { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: border-color 0.2s, transform 0.15s; } .search-result-item:hover { border-color: var(--accent); transform: translateY(-2px); } .search-result-item img, .search-result-item .sr-placeholder { width: 100%; aspect-ratio: 2/3; object-fit: cover; background: var(--bg3); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 2.5rem; } .sr-info { padding: 0.6rem 0.75rem; } .sr-title { font-size: 0.875rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-year { font-size: 0.775rem; color: var(--text-muted); margin-top: 0.1rem; } /* Season selector (TV) */ .season-picker { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; color: var(--text); font-size: 0.875rem; width: 100%; margin-top: 0.4rem; cursor: pointer; } /* ============================================================ MODAL SYSTEM Two contexts, one set of classes: • Desktop (>768px): centered card, max 700px wide, rounded all corners • Mobile (≤768px): bottom sheet — slides up from nav bar edge, rounded top corners, content-height driven with a max-height cap that lets the page peek above (--modal-peek). --sheet-bottom-offset is set per-page on : index.html → var(--mobile-nav-h) (sheet clears the nav bar) public.html → 0px (no nav bar) ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn 0.15s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 700px; max-height: 90vh; position: relative; box-shadow: var(--shadow); animation: slideUp 0.2s ease; display: flex; flex-direction: column; overflow: hidden; } /* Drag-handle pill — floats over the banner image on mobile. Position:absolute keeps it out of the flex flow so the banner fills all the way to the top of the modal-box. */ .modal-drag-handle { display: none; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; background: rgba(255,255,255,0.35); border-radius: 2px; z-index: 20; /* above banner, below toolbar buttons */ pointer-events: none; } /* Content scrolls, actions pinned at bottom */ #media-content { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; position: relative; } #media-actions { flex-shrink: 0; background: var(--bg2); border-radius: 0 0 16px 16px; } #media-actions:empty { display: none; } .modal-box-sm { max-width: 460px; } @keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes sheetUp { from { transform: translateY(60px); opacity: 0.5; } to { transform: translateY(0); opacity: 1; } } .modal-close { width: 32px; height: 32px; border-radius: 50%; background: var(--bg3); color: var(--text-muted); font-size: 0.9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .modal-close:hover { background: var(--bg4); color: var(--text); } /* Modal toolbar — flex row at the top, always in document flow so content never underlaps */ .modal-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; /* symmetric — top equals sides */ position: absolute; top: 0; left: 0; right: 0; z-index: 10; min-height: 44px; /* Transparent by default — banner shows through */ background: transparent; /* When no banner: gradient to ensure buttons readable against dark bg */ background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 100%); } .modal-toolbar-left { display: flex; align-items: center; min-width: 60px; /* No extra padding-left — toolbar padding handles the gutter uniformly */ } .modal-toolbar-right { display: flex; align-items: center; gap: 0.4rem; } /* Ensure toolbar buttons are readable against any background */ .modal-toolbar .modal-close, .modal-toolbar .modal-back-btn { background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal-toolbar .modal-close:hover { background: rgba(0,0,0,0.65); color: var(--text); } #media-refresh-meta { color: var(--text-muted); } #media-refresh-meta:hover { color: var(--accent); background: var(--bg4); } #media-refresh-meta.spinning i { animation: spin360 1s linear infinite; } @keyframes spin360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Detail modal layout */ .detail-hero { display: flex; gap: 1.25rem; padding-top: 5.5rem; /* clear toolbar (44px) + intentional banner exposure above content */ padding-right: 1.5rem; padding-bottom: 1rem; padding-left: 1.5rem; border-bottom: 1px solid var(--border); } .detail-info { flex: 1; min-width: 0; padding-top: 0.5rem; /* subtle offset so title sits just below poster top */ } .detail-title { font-size: 1.4rem; font-weight: 800; line-height: 1.2; margin-bottom: 0.3rem; padding-right: 2rem; } .detail-meta { font-size: 0.85rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; } .detail-meta span { display: flex; align-items: center; gap: 0.25rem; } .detail-overview { font-size: 0.875rem; color: #bbb; line-height: 1.6; } .detail-body { padding: 1.25rem 1.5rem; } .detail-section { margin-bottom: 1.25rem; } .detail-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.6rem; } /* Cast row — legacy (still used in stats cast row) */ .cast-row { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.5rem; } .cast-row::-webkit-scrollbar { height: 4px; } .cast-item { flex-shrink: 0; width: 80px; min-width: 80px; max-width: 80px; text-align: center; overflow: hidden; } .cast-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto 0.4rem; background: var(--bg3); border: 2px solid var(--border); display: block; } /* Photo as clickable button */ .cast-photo-btn { background: none; border: none; padding: 0; cursor: pointer; display: block; margin: 0 auto 0.4rem; border-radius: 50%; transition: opacity 0.15s, transform 0.15s; text-decoration: none; } .cast-photo-btn:hover { opacity: 0.8; transform: scale(1.05); } .cast-photo-btn img, .cast-photo-btn .cast-initial { margin: 0; } .cast-initial { width: 64px; height: 64px; border-radius: 50%; background: var(--bg4); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: var(--text-muted); margin: 0 auto 0.4rem; } .cast-name { font-size: 0.75rem; font-weight: 600; color: var(--text); word-break: break-word; overflow-wrap: break-word; white-space: normal; line-height: 1.25; display: block; width: 100%; padding: 0 2px; } .cast-char { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; padding: 0 2px; margin-top: 0.1rem; } /* User rating in detail */ .detail-rating-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .detail-actions { display: flex; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); flex-wrap: wrap; flex-shrink: 0; background: var(--bg2); } .btn-edit { padding: 0.55rem 1.1rem; border-radius: var(--radius-sm); background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; transition: border-color 0.15s; } .btn-edit:hover { border-color: var(--accent); } .btn-delete { padding: 0.55rem 1.1rem; border-radius: var(--radius-sm); background: #3d151522; border: 1px solid #7a202044; color: #f87171; font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; margin-left: auto; transition: background 0.15s; } .btn-delete:hover { background: #3d1515; } /* ============================================================ LOG ENTRY MODAL (add/edit) ============================================================ */ .entry-form { padding: 1.5rem; } .entry-form h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 1.25rem; } .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.05em; } .form-control { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.65rem 0.85rem; color: var(--text); font-size: 0.95rem; transition: border-color 0.2s; } select.form-control { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; 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='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-color: var(--bg3); } .form-control:focus { outline: none; border-color: var(--accent); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } /* .form-actions removed — moved to #media-actions sticky footer */ .btn-cancel { padding: 0.65rem 1.1rem; border-radius: var(--radius-sm); background: var(--bg3); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.9rem; font-weight: 600; transition: color 0.15s; } .btn-cancel:hover { color: var(--text); } /* ============================================================ STATS PAGE ============================================================ */ .stats-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; min-width: 0; overflow: hidden; } @media (min-width: 900px) { .stats-content { grid-template-columns: repeat(3, 1fr); } } .stats-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; min-width: 0; overflow: hidden; } .stats-card h3 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 1rem; } .stats-list { display: flex; flex-direction: column; gap: 0.5rem; } .stats-list-item { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; min-width: 0; } .stats-list-item .bar-wrap { flex: 1; height: 4px; background: var(--bg4); border-radius: 2px; margin: 0 0.75rem; overflow: hidden; min-width: 0; } .stats-list-item .bar-fill { height: 100%; background: var(--accent); border-radius: 2px; } .stats-list-item .bar-count { font-size: 0.8rem; color: var(--text-muted); min-width: 24px; text-align: right; } /* ============================================================ SETTINGS PAGE ============================================================ */ .settings-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; } .stab { padding: 0.65rem 1.1rem; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 0.4rem; transition: color 0.15s, border-color 0.15s; } .stab:hover { color: var(--text); } .stab.active { color: var(--accent); border-bottom-color: var(--accent); } .settings-body { max-width: none; width: 100%; } .settings-section { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; max-width: 860px; /* comfortable reading width — prevents excessive stretching on ultrawide */ } .settings-section h3 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 1rem; } .pref-row { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .pref-row:last-child { border-bottom: none; } .pref-label { font-size: 0.9rem; font-weight: 500; } .pref-desc { font-size: 0.8rem; color: var(--text-muted); } /* Toggle switch */ .toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-slider { position: absolute; inset: 0; background: var(--bg4); border-radius: 999px; cursor: pointer; transition: background 0.2s; } .toggle-slider::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform 0.2s; } .toggle input:checked + .toggle-slider { background: var(--accent); } .toggle input:checked + .toggle-slider::after { transform: translateX(18px); } /* Import section */ .import-dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; margin-bottom: 1rem; } .import-dropzone:hover { border-color: var(--accent); background: var(--accent-dim); } .import-dropzone i { font-size: 2rem; color: var(--text-dim); margin-bottom: 0.5rem; } .import-dropzone p { font-size: 0.875rem; color: var(--text-muted); } .import-dropzone strong { color: var(--accent); } .import-format-example { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; overflow-x: auto; } .import-format-example table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .import-format-example th { text-align: left; padding: 0.3rem 0.5rem; color: var(--accent); border-bottom: 1px solid var(--border); } .import-format-example td { padding: 0.3rem 0.5rem; color: var(--text-muted); border-bottom: 1px solid var(--border); } .import-progress { font-size: 0.875rem; color: var(--text-muted); text-align: center; padding: 0.75rem; } .btn-export { padding: 0.6rem 1.2rem; border-radius: var(--radius-sm); background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-size: 0.875rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; transition: border-color 0.15s; } .btn-export:hover { border-color: var(--accent); } /* Profile section */ .profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-dim); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 800; color: var(--accent); margin-bottom: 0.75rem; } .profile-name { font-size: 1.1rem; font-weight: 700; } .profile-email { font-size: 0.875rem; color: var(--text-muted); } .danger-btn { padding: 0.55rem 1rem; border-radius: var(--radius-sm); background: #3d151522; border: 1px solid #7a202044; color: #f87171; font-size: 0.875rem; font-weight: 600; transition: background 0.15s; } .danger-btn:hover { background: #3d1515; } /* ============================================================ LIGHTBOX ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 1rem; } .lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.9); cursor: pointer; } .lightbox img { position: relative; max-height: 90vh; max-width: 90vw; border-radius: var(--radius); box-shadow: 0 8px 48px rgba(0,0,0,0.8); z-index: 1; } /* ============================================================ TOAST ============================================================ */ .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } .toast { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 1.1rem; font-size: 0.875rem; font-weight: 500; box-shadow: var(--shadow); display: flex; align-items: center; gap: 0.5rem; animation: toastIn 0.25s ease; pointer-events: auto; max-width: 320px; } .toast.success { border-left: 3px solid #4ade80; } .toast.error { border-left: 3px solid #f87171; } .toast.info { border-left: 3px solid var(--accent); } @keyframes toastIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Mobile toasts slide down from top */ @media (max-width: 768px) { @keyframes toastIn { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } } /* ============================================================ MOBILE NAV ============================================================ */ .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; /* Extend into home indicator zone on iOS */ height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bg2); border-top: 1px solid var(--border); z-index: 300; align-items: stretch; box-shadow: 0 -4px 16px rgba(0,0,0,0.4); } .mn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; color: var(--text-muted); font-size: 0.65rem; font-weight: 600; transition: color 0.15s; padding: 0.5rem 0; } .mn-item i { font-size: 1.1rem; } .mn-item.active { color: var(--accent); } /* ============================================================ EMPTY STATE ============================================================ */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); } .empty-state i { font-size: 2.5rem; margin-bottom: 0.75rem; color: var(--text-dim); } .empty-state p { font-size: 0.9rem; } .empty-state a { color: var(--accent); font-weight: 600; } .detail-poster-placeholder { width: 140px; height: 210px; background: var(--bg3); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 2.5rem; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { .sidebar { display: none; } .main-content { margin-left: 0; padding: 1rem; padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 1.5rem); width: 100%; max-width: 100vw; overflow-x: hidden; } .mobile-nav { display: flex; } .page-header { flex-wrap: wrap; gap: 0.75rem; } .page-header h1 { font-size: 1.3rem; } .filter-bar { flex-direction: column; align-items: stretch; } /* Row 1: search bar (full width — handled by filter-input-wrap flex:1) */ /* Row 2: Type + Sort dropdowns side by side */ .filter-row-2 { display: flex; gap: 0.5rem; width: 100%; } .filter-row-2 .filter-select { flex: 1; min-width: 0; width: auto; } /* Stars row and Select button remain full width */ .filter-input { width: 100%; } .star-filter { width: 100%; } .search-results { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } .form-row { grid-template-columns: 1fr; } .detail-hero { flex-direction: column; } .detail-poster { width: 120px; } .detail-poster-placeholder { width: 120px; height: 180px; } .toast-container { /* Mobile: centered at top of viewport — always visible above bottom sheet */ bottom: auto; top: 1rem; left: 50%; right: auto; transform: translateX(-50%); align-items: center; width: max-content; max-width: calc(100vw - 2rem); } .settings-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; /* #8: hide scrollbar track that appears as a vertical bar on some mobile browsers */ scrollbar-width: none; -ms-overflow-style: none; /* remove bottom border — it renders as a stray vertical line when row overflows */ border-bottom: none; padding-bottom: 0; /* re-add border as a bottom line only on the tab container inner */ box-shadow: inset 0 -1px 0 var(--border); } .settings-tabs::-webkit-scrollbar { display: none; } .stab { white-space: nowrap; } .import-format-example { overflow-x: auto; -webkit-overflow-scrolling: touch; } .import-format-example table { min-width: 400px; } .stat-bar { grid-template-columns: repeat(3, 1fr); } /* ── Mobile bottom-sheet modal ───────────────────────────────────── The overlay rect stops at the nav bar (inset bottom = --sheet-bottom-offset). The nav bar sits outside the overlay, stays visible and tappable. The sheet rises from that edge with rounded top corners. max-height leaves --modal-peek of backdrop showing above the sheet so the user knows the page is behind it. */ .modal-overlay { inset: 0 0 var(--sheet-bottom-offset) 0; /* don't cover the nav bar */ align-items: flex-end; justify-content: center; padding: 0; } .modal-box { width: 100%; max-width: none; max-height: calc(100dvh - var(--sheet-bottom-offset) - var(--modal-peek)); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,0.55); animation: sheetUp 0.32s cubic-bezier(0.32, 0.72, 0, 1); } .modal-drag-handle { display: block; } /* show pill on mobile, floats over banner */ #media-actions { border-radius: 0; } /* flat bottom — sheet sits on nav */ } @media (max-width: 480px) { .entries-grid.grid-view { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .entries-grid.covers-view { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); } .stat-bar { grid-template-columns: repeat(2, 1fr); } .search-results { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } } /* ============================================================ UTILITY ============================================================ */ .dot { color: var(--text-dim); } .loading { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.9rem; } /* Cast / director clickable link in detail */ .detail-director { margin-top: 0.4rem; font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .cast-search-link { color: var(--accent); font-weight: 600; font-size: 0.85rem; text-decoration: none; cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; transition: opacity 0.15s; } .cast-search-link:hover { opacity: 0.75; } .fm-year-input { width: 5.5rem; height: 100%; min-height: 44px; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 0.75rem 0.8rem; font: inherit; font-size: 1rem; outline: none; } .fm-year-input:focus { border-color: var(--accent); } /* Cast match rows (co-watched / fix match) */ .cast-match-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg3); margin-bottom: 0.5rem; cursor: pointer; transition: border-color 0.15s; } .cast-match-row:hover { border-color: var(--accent); } .cast-match-poster { width: 40px; height: 60px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: var(--bg4); } .cast-match-placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 1rem; } /* Profile photo from Google */ .profile-avatar-img { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; margin-bottom: 0.75rem; display: block; } /* ============================================================ STATS — rich visual components ============================================================ */ .stats-hero-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.6rem; margin-bottom: 0.25rem; } .stats-hero-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; text-align: center; } .stats-hero-card .stat-num { font-size: 1.5rem; } .stats-card-wide { grid-column: 1 / -1; } /* Day heatmap */ .day-heatmap { display: flex; gap: 0.5rem; align-items: flex-end; height: 100px; padding-top: 0.5rem; } .day-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; height: 100%; } .day-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; background: var(--bg3); border-radius: 4px; overflow: hidden; } .day-bar { width: 100%; background: var(--accent); border-radius: 4px; min-height: 4px; transition: height 0.3s ease; } .day-count { font-size: 0.65rem; color: var(--text-muted); } .day-label { font-size: 0.65rem; font-weight: 600; color: var(--text-dim); } /* Cover rows (5-star shelf, rewatched, biggest binge) — wrapping grid */ .stats-cover-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: 0.75rem; padding-top: 6px; } .stats-cover-item { width: 100%; text-align: center; cursor: pointer; transition: transform 0.15s; min-width: 0; } .stats-cover-item:hover { transform: translateY(-3px); } .stats-cover-item img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; transition: box-shadow 0.15s; } .stats-cover-item:hover img { box-shadow: 0 4px 16px rgba(0,0,0,0.5); } .stats-cover-placeholder { width: 100%; aspect-ratio: 2/3; background: var(--bg3); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 1.5rem; border: 1px solid var(--border); } .stats-cover-title { font-size: 0.68rem; font-weight: 600; margin-top: 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .stats-cover-sub { font-size: 0.62rem; color: var(--text-muted); } /* Cast row in stats */ .stats-cast-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.75rem; padding-bottom: 0.5rem; } .stats-cast-item { min-width: 0; text-align: center; overflow: hidden; } /* Watchlist item hover */ .wl-item { transition: transform 0.15s; } .wl-item:hover { transform: scale(1.02); } .wl-log-btn { background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent); border-radius: var(--radius-sm); font-size: .75rem; padding: .2rem .6rem; font-family: inherit; cursor: pointer; font-weight: 600; transition: background 0.15s; } .wl-log-btn:hover { background: var(--accent); color: #111; } .wl-remove-btn { background: none; border: 1px solid #7a202044; color: #f87171; border-radius: var(--radius-sm); font-size: .75rem; padding: .2rem .5rem; font-family: inherit; cursor: pointer; transition: background 0.15s; } .wl-remove-btn:hover { background: #3d1515; } /* ============================================================ SKELETON LOADING ============================================================ */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton-line { border-radius: 4px; background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%); background-size: 800px 100%; animation: shimmer 1.4s infinite; display: block; } .skeleton-poster { width: 56px; height: 84px; border-radius: var(--radius-sm); flex-shrink: 0; background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%); background-size: 800px 100%; animation: shimmer 1.4s infinite; } /* ============================================================ TRAILER BUTTON UNDER POSTER ============================================================ */ .detail-poster-col { flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; /* children (poster + trailer) fill the column width */ gap: 0.5rem; z-index: 2; position: relative; margin-top: -30px; /* pull up into banner overlap zone while staying below toolbar */ } .trailer-under-poster { width: 100%; /* fills poster-col width — matches poster exactly */ max-width: none; /* remove the old 130px cap */ padding: 0.45rem 0; border-radius: var(--radius-sm); background: rgba(255,68,68,0.12); border: 1px solid rgba(255,68,68,0.4); color: #ff6b6b; font-size: 0.8rem; font-weight: 600; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.35rem; transition: background 0.15s; } .trailer-under-poster:hover { background: rgba(255,68,68,0.25); } /* Mobile: trailer shown inline inside info column, desktop button hidden */ .trailer-mobile { display: none; } /* Note: mobile .detail-poster-col and trailer rules for .media-detail-shell are handled in the unified @media (max-width: 600px) block further below. These legacy rules only apply outside the shell (non-modal contexts). */ @media (max-width: 600px) { /* Legacy non-shell contexts — keep row layout for backward compat */ .detail-poster-col:not(.media-detail-shell .detail-poster-col) { margin-top: -20px; flex-direction: row; align-items: flex-end; gap: 0.75rem; } } /* Search page X clear button */ .search-input-wrap { position: relative; } .search-input-wrap i.fa-magnifying-glass { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.9rem; pointer-events: none; } .search-input-wrap input { width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 2.5rem 0.75rem 2.5rem; color: var(--text); font-size: 1rem; transition: border-color 0.2s; } .search-input-wrap input:focus { outline: none; border-color: var(--accent); } .search-clear-btn { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-dim); font-size: 0.85rem; cursor: pointer; padding: 0.25rem; display: none; transition: color 0.15s; } .search-clear-btn.visible { display: block; } .search-clear-btn:hover { color: var(--text); } /* ============================================================ MOBILE SETTINGS TABS — icon only except active ============================================================ */ @media (max-width: 768px) { .stab .stab-text { display: none; } .stab.active .stab-text { display: inline; } .stab { padding: 0.65rem 0.8rem; gap: 0; } .stab.active { gap: 0.4rem; } /* Mobile delete button — icon only */ .btn-delete .btn-delete-text { display: none; } /* Trailer button spacing fix */ .trailer-under-poster { gap: 0.5rem; letter-spacing: 0.01em; } } /* ============================================================ CAST SCROLL CHEVRONS ============================================================ */ /* Cast — wrapping grid (replaces horizontal scroll) */ .cast-grid-wrap { display: flex; flex-direction: column; gap: 0.75rem; } .cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.75rem 0.5rem; } .cast-item { min-width: 0; text-align: center; overflow: hidden; } .cast-load-more-circle { cursor: pointer; } .cast-load-more-circle:hover .cast-more-placeholder { border-color: var(--accent); background: var(--bg4); } .cast-more-placeholder { width: 64px; height: 64px; border-radius: 50%; background: var(--bg3); border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.1rem; margin: 0 auto 0.4rem; transition: background 0.15s, border-color 0.15s; } .cast-load-more { /* legacy — unused but kept for compat */ align-self: flex-start; background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: 0.8rem; padding: 0.35rem 0.85rem; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; transition: background 0.15s, color 0.15s; } .cast-load-more:hover { background: var(--bg3); color: var(--text); } /* ============================================================ STREAMING PROVIDERS ============================================================ */ .providers-section { margin-top: 0.5rem; } .provider-group { margin-bottom: 0.6rem; } .provider-group-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.35rem; } .provider-logos { display: flex; flex-wrap: wrap; gap: 0.4rem; } .provider-logo-link { display: block; border-radius: 8px; overflow: hidden; transition: transform 0.15s, opacity 0.15s; border: 1px solid var(--border); } .provider-logo-link:hover { transform: scale(1.08); opacity: 0.85; } .provider-logo-link img { width: 36px; height: 36px; display: block; object-fit: cover; } /* ============================================================ BULK SELECT MODE ============================================================ */ .select-mode-btn { padding: 0 0.75rem; border-radius: var(--radius-sm); background: var(--bg2); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.8rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color 0.15s, color 0.15s; white-space: nowrap; height: 38px; box-sizing: border-box; display: flex; align-items: center; gap: 0.4rem; } .select-mode-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } .entry-select-circle { position: absolute; top: 0.4rem; right: 0.4rem; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.6); background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: transparent; transition: background 0.15s, border-color 0.15s, color 0.15s; pointer-events: none; z-index: 3; } .entry-selectable { position: relative; } .entry-selectable.selected .entry-select-circle { background: var(--accent); border-color: var(--accent); color: #111; } .entry-selectable.selected .entry-select-circle::after { content: "✓"; font-weight: 700; font-size: 0.7rem; } .bulk-edit-bar { position: fixed; bottom: calc(var(--mobile-nav-h) + 0.75rem); left: calc(var(--sidebar-w) + 1rem); right: 1rem; background: var(--bg2); border: 1px solid var(--accent); border-radius: var(--radius); padding: 0.65rem 1rem; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 4px 32px rgba(0,0,0,0.6); z-index: 200; flex-wrap: nowrap; } .bulk-count { font-size: 0.875rem; font-weight: 600; color: var(--accent); white-space: nowrap; } @media (min-width: 769px) { .bulk-edit-bar { bottom: 1rem; left: calc(var(--sidebar-w) + 1rem); right: 1rem; } } @media (max-width: 768px) { .bulk-edit-bar { left: 0.5rem; right: 0.5rem; bottom: calc(var(--mobile-nav-h) + 0.5rem); border-radius: var(--radius); } } /* ── Watch date chips (#13) ─────────────────────────────────── */ .watch-date-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .watch-date-chip { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(220,226,51,0.3); border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.78rem; font-weight: 600; } /* ── Cast scroll chevrons (#10) ─────────────────────────────── */ /* cast-chevron duplicate removed */ /* ── Select mode (#9) ───────────────────────────────────────── */ .select-mode-btn { padding: 0.35rem 0.75rem; border-radius: var(--radius-sm); background: var(--bg2); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color 0.15s, color 0.15s; white-space: nowrap; } .select-mode-btn.active { border-color: var(--accent); color: var(--accent); } .entry-select-circle { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.6); background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; transition: background 0.15s, border-color 0.15s; } .entry-select-circle.checked { background: var(--accent); border-color: var(--accent); } .entry-select-circle.checked::after { content: ''; width: 6px; height: 10px; border: 2px solid #111; border-top: none; border-left: none; transform: rotate(45deg) translateY(-1px); display: block; } .entry-card, .entry-grid-item, .entry-cover-item { position: relative; } /* Bulk edit modal */ .bulk-edit-wrap { padding: 1.5rem; } .bulk-edit-wrap h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 1.25rem; } .bulk-count { font-size: .875rem; color: var(--text-muted); margin-bottom: 1rem; } /* Pending friend request badge */ .friends-pending-badge { background: var(--accent); color: #111; border-radius: 999px; font-size: 0.65rem; font-weight: 800; padding: 0 5px; min-width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; vertical-align: middle; } /* Bulk edit bar layout */ .bulk-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; flex: 1; } .bulk-action-btn { padding: 0.35rem 0.55rem; font-size: 0.9rem; } .bulk-star-rating { display: flex; gap: 0.15rem; } .bulk-star-rating .star-btn { font-size: 1rem; padding: 0.1rem; color: var(--text-dim); cursor: pointer; background: none; border: none; font-family: inherit; transition: color 0.1s; } .bulk-star-rating .star-btn.lit { color: var(--accent); } .bulk-star-rating .star-btn i { color: inherit; } /* ============================================================ SEARCH BAR AUTOCOMPLETE — keep dark mode on autofill/selection ============================================================ */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--bg2) inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text); transition: background-color 5000s ease-in-out 0s; } input::selection { background: var(--accent-dim); color: var(--text); } /* Browser suggestion list - force dark where supported */ input { color-scheme: dark; } /* ============================================================ INLINE PROGRESS BAR (#6) — renders inside status divs in settings ============================================================ */ .inline-progress { margin-top: 0.5rem; padding: 0.75rem; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); } .inline-progress-label { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; } .inline-progress-pct { font-weight: 700; color: var(--accent); font-size: 0.8rem; } .inline-progress-track { height: 6px; background: var(--bg4); border-radius: 3px; overflow: hidden; } .inline-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.25s ease; width: 0%; } /* ============================================================ FRIENDS PAGE (desktop sidebar) — #11 ============================================================ */ #page-friends .settings-section { margin-bottom: 1.25rem; } /* ============================================================ PUBLIC LOG PAGE — used by public.html ============================================================ */ .public-header { background: var(--bg2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top); } /* Inner wrapper aligns with page content (same max-width as .public-page) */ .public-header-inner { max-width: 1100px; margin: 0 auto; padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .public-header-logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.1rem; color: var(--accent); text-decoration: none; } .public-header-logo i { font-size: 1.2rem; } /* CTA bar — desktop: one row, text left, button right */ .public-cta-bar { background: linear-gradient(135deg, var(--bg3), var(--bg2)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin: 1rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .public-cta-bar p { flex: 1; margin: 0; font-size: 0.875rem; color: var(--text-muted); min-width: 200px; } .public-cta-bar strong { color: var(--accent); } .public-cta-btn-wrap { flex-shrink: 0; } .public-cta-btn { display: inline-block; background: var(--accent); color: #111; font-weight: 700; font-size: 0.875rem; padding: 0.55rem 1.1rem; border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; transition: opacity 0.15s; } .public-cta-btn:hover { opacity: 0.85; } /* Mobile: stack text above button, button right-aligned */ @media (max-width: 600px) { .public-cta-bar { flex-direction: column; align-items: stretch; gap: 0.75rem; } .public-cta-btn-wrap { display: flex; justify-content: flex-end; } } .public-entries-wrap { padding: 0.75rem 1rem; } .public-name-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .public-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bg4); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: var(--text-muted); overflow: hidden; flex-shrink: 0; } .public-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================ USERNAME MODAL OVERLAY — #19 ============================================================ */ #username-modal-overlay input.form-control { margin-bottom: 0; } /* ============================================================ MORE DRAWER — slides up from mobile bottom nav (#7) ============================================================ */ .more-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 298; /* above FAB (296) */ backdrop-filter: blur(2px); transition: opacity 0.2s; } .more-drawer-backdrop.hidden { display: none; } .more-drawer { position: fixed; bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)); left: 0; right: 0; background: var(--bg2); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; z-index: 299; /* above FAB (296) and backdrop (298) */ padding: 0.5rem 0 1rem; box-shadow: 0 -8px 32px rgba(0,0,0,0.5); transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1); } .more-drawer.open { transform: translateY(0); } .more-drawer.hidden { display: none; } .more-drawer-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 0.5rem auto 0.75rem; } .more-drawer-item { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.5rem; font-size: 1rem; font-weight: 600; color: var(--text); transition: background 0.12s, color 0.12s; width: 100%; background: none; border: none; text-align: left; cursor: pointer; font-family: inherit; } .more-drawer-item i { width: 24px; text-align: center; font-size: 1.1rem; color: var(--text-muted); } .more-drawer-item:hover, .more-drawer-item:active { background: var(--bg3); color: var(--accent); } .more-drawer-item:hover i, .more-drawer-item:active i { color: var(--accent); } .more-drawer-signout { color: var(--text-muted); } .more-drawer-signout:hover { color: #f87171; } .more-drawer-signout:hover i { color: #f87171; } /* Make the More button look like other mn-items */ #mn-more-btn { background: none; border: none; cursor: pointer; font-family: inherit; } /* Friend log overlay padding — matches main-content so content never touches edges */ #friend-log-overlay { box-sizing: border-box; } @media (max-width: 767px) { #friend-log-overlay { padding: 1rem !important; padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 1.5rem) !important; } } /* ── BULK ACTION BAR — thumb/star coloring (#12) ──────────────────────────*/ /* Thumbs start muted, light up when their button is active */ #bulk-thumbs-up .fa-thumbs-up { color: var(--text-dim); transition: color 0.15s; } #bulk-thumbs-down .fa-thumbs-down { color: var(--text-dim); transition: color 0.15s; } #bulk-thumbs-up.active .fa-thumbs-up { color: #4ade80; } #bulk-thumbs-down.active .fa-thumbs-down { color: #f87171; } /* Star buttons in bulk bar — inactive muted, active accent */ #bulk-stars .star-btn { color: var(--text-dim); transition: color 0.15s; } #bulk-stars .star-btn.active, #bulk-stars .star-btn.active ~ .star-btn { color: var(--text-dim); } #bulk-stars .star-btn.active { color: var(--accent); } /* ── Public page stat bar ───────────────────────────────────────────────── Overrides the default margin-bottom since it sits between owner row and entries, not at the top of a dashboard page. */ /* pub-stat-bar: consistent 1rem side margins, 0.75rem gap above and below */ #pub-stat-bar.stat-bar { margin: 0.75rem 1rem 0.75rem; } #pub-stat-bar .stat-card { padding: 0.75rem 1rem; } #pub-stat-bar .stat-num { font-size: 1.4rem; } @media (max-width: 600px) { #pub-stat-bar.stat-bar { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin: 0.5rem 0.75rem 0.75rem; } #pub-stat-bar .stat-card { padding: 0.6rem 0.75rem; } #pub-stat-bar .stat-num { font-size: 1.1rem; } } /* view toggle in public header — ensure it doesn't gain extra margin/padding */ .public-header-inner .view-toggle { margin: 0; } /* Stats cast items — clickable to open TMDB discover (#11) */ .stats-cast-item[data-cast-name] { transition: opacity 0.15s; } .stats-cast-item[data-cast-name]:hover { opacity: 0.75; } /* cast-name in stats: no underline — avatar is the visual button, not the name (#8) */ .stats-cast-item[data-cast-name] .cast-name, .stats-cast-item[data-dir-name] .cast-name { text-decoration: none; } /* ── Trending section in Search & Add (#12) ──────────────────────────────*/ .trending-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0 0.5rem; margin-bottom: 0.5rem; } .trending-title { font-size: 0.95rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 0.4rem; } .trending-toggle { display: flex; gap: 0.25rem; background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem; } .trend-btn { background: none; border: none; border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; } .trend-btn.active { background: var(--accent); color: #111; } /* Star rating badge in search cards */ .sr-rating { display: inline-block; font-size: 0.7rem; color: var(--accent); margin-left: 0.35rem; font-weight: 700; } /* ── Rate It Dice Game (#8) ──────────────────────────────────────────────*/ #dice-btn:hover { opacity: 1 !important; transform: scale(1.2); transition: transform 0.15s; } #rate-it-overlay { animation: fadeInOverlay 0.2s ease; } @keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } } #dice-card { animation: slideUpCard 0.25s cubic-bezier(0.32, 0.72, 0, 1); } @keyframes slideUpCard { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .dice-thumb:hover { transform: scale(1.2); } .dice-star:hover { color: var(--accent) !important; } .modal-back-btn.hidden { display: none; } .modal-back-btn { font-size: 0.82rem; padding: 0.3rem 0.65rem; } /* Stats cast/director avatars — only avatar scales, name is not a link (#3) */ .stats-cast-avatar { transition: transform 0.15s; } .stats-cast-item:hover .stats-cast-avatar { transform: scale(1.08); } .stats-cast-item .cast-name { text-decoration: none !important; text-underline-offset: unset; } /* Unique Titles toggle — solid accent when active for clear on/off signal */ #log-unique-btn.active { background: var(--accent); color: #111; border-color: var(--accent); } #log-unique-btn.active i { color: #111; } /* ── Loading Overlay ────────────────────────────────────────────────────── */ #load-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-direction: column; } .load-box { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: min(340px, 90vw); } .load-logo { font-size: 1.4rem; font-weight: 800; color: var(--accent); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .load-msg { font-size: 0.85rem; color: var(--text-muted); text-align: center; min-height: 1.2em; transition: opacity 0.2s; } /* Pill-shaped track */ .load-track { width: 100%; height: 8px; background: var(--bg3); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); } .load-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 999px; /* No CSS transition here — JS tween controls the animation */ } .load-pct { font-size: 0.75rem; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; } /* Load More card — spans full grid width, clearly visible (#7) */ .load-more-card { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; margin-top: 0.25rem; border: 1.5px dashed var(--border); border-radius: var(--radius); cursor: pointer; color: var(--text-muted); font-weight: 600; font-size: 0.875rem; background: var(--bg2); transition: border-color 0.15s, color 0.15s; } .load-more-card:hover { border-color: var(--accent); color: var(--accent); } /* ── Person Cards (Actor/Director tab preloads) ─────────────────────────── */ .person-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .75rem; padding: .25rem 0; } .person-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; cursor: pointer; transition: transform .15s; } .person-card:hover { transform: translateY(-2px); } .person-card-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--bg3); border: 2px solid var(--border); flex-shrink: 0; } .person-card-avatar img { width: 100%; height: 100%; object-fit: cover; } .person-card-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; color: var(--accent); } .person-card-name { font-size: .78rem; font-weight: 700; color: var(--text); line-height: 1.2; word-break: break-word; } .person-card-sub { font-size: .72rem; color: var(--accent); font-weight: 600; } /* ============================================================ v31b SHARED DETAIL / PUBLIC MODAL PRIMITIVES ============================================================ */ .detail-rating-row, .rating-summary-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); } .rating-thumb-up { color: var(--success); font-size: 1.1rem; } .rating-thumb-down { color: var(--danger); font-size: 1.1rem; } .rating-stars { color: var(--accent); font-size: 1rem; } .rating-none { color: var(--text-dim); font-size: .85rem; } .watched-date { color: var(--text-muted); font-size: .8rem; } .detail-director-name { color: var(--accent); font-weight: 700; } .trailer-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .trailer-frame { position: relative; width: 100%; max-width: 900px; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-strong); } .trailer-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .trailer-close { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index: 901; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.15); backdrop-filter: blur(4px); } .trailer-close:hover { background: rgba(255,255,255,.24); } /* ── Public page layout — consistent 1rem horizontal gutter everywhere ── */ .public-owner-row { display: none; align-items: center; gap: var(--space-3); padding: var(--space-3) 1rem; border-bottom: 1px solid var(--border); } .public-owner-name { font-weight: 700; font-size: 1rem; } .public-owner-count { color: var(--text-muted); font-size: .8rem; } /* stat-bar starts hidden; JS sets display:grid once data is ready */ .public-stat-bar { display: none; margin: .75rem 1rem 0; gap: var(--space-2); } /* entries sit flush with same 1rem horizontal gutter */ .public-entry-grid { padding: .75rem 1rem 1rem; } /* ============================================================ v31 UNIFIED MEDIA DETAIL MODAL SYSTEM Purpose: replaces legacy banner/mobile hero drift with a single responsive modal composition for title detail, search, watchlist, and friend detail screens. ============================================================ */ .media-detail-shell { --detail-gutter: 1.5rem; position: relative; min-height: 100%; isolation: isolate; } .media-detail-shell::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 260px; background-image: linear-gradient(to bottom, rgba(0,0,0,.30), rgba(30,30,30,.86) 76%, var(--bg2) 100%), var(--media-backdrop, none); background-size: cover; background-position: center 20%; opacity: .95; z-index: -1; } .media-detail-shell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0, transparent 220px, var(--bg2) 330px); z-index: -1; pointer-events: none; } .media-detail-shell .detail-hero-banner, .media-detail-shell .detail-mobile-hero { display: none !important; } .media-detail-shell .detail-hero { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.25rem; align-items: end; padding: 5.7rem var(--detail-gutter) 1.25rem; border-bottom: 1px solid var(--border); } .media-detail-shell .detail-poster-col { margin-top: 0; align-items: stretch; /* trailer button fills same width as poster */ width: 150px; } .media-detail-shell .detail-poster, .media-detail-shell .detail-poster-placeholder { width: 150px; height: auto; aspect-ratio: 2 / 3; border-radius: calc(var(--radius) + 2px); object-fit: cover; background: var(--bg3); border: 1px solid rgba(255,255,255,.08); } .media-detail-shell .detail-info { padding: 0 0 .2rem; min-width: 0; } .media-detail-shell .detail-title { font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: .5rem; padding-right: 2.5rem; text-wrap: balance; } .media-detail-shell .detail-meta { gap: .4rem .55rem; margin-bottom: .7rem; } .detail-eyebrow, .season-helper, .detail-saved-note { font-size: .8rem; color: var(--text-muted); } .detail-rating-chip, .detail-status-note { color: var(--accent); } .detail-status-note { margin-top: .5rem; font-size: .82rem; } /* TMDB logo inside rating chip */ .tmdb-logo-chip { height: 12px; width: auto; vertical-align: middle; margin-right: 4px; border-radius: 2px; position: relative; top: -1px; } /* TMDB logo on explore/features page */ .tmdb-attribution { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--text-muted); text-decoration: none; } .tmdb-attribution img { height: 18px; width: auto; border-radius: 3px; } .media-detail-shell .detail-overview { max-width: 68ch; color: var(--text-muted); line-height: 1.58; } .media-detail-shell .detail-body { padding: 1.25rem var(--detail-gutter) 1.4rem; } .media-detail-shell .detail-section { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.06); } .media-detail-shell .detail-section:first-child { padding-top: 0; } .media-detail-shell .detail-section:last-child { border-bottom: 0; padding-bottom: 0; } .detail-notes { font-size: .875rem; color: var(--text); line-height: 1.55; } .date-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; } .date-chip { font-size: .8rem; padding: .24rem .55rem; background: var(--bg3); color: var(--text-muted); border-radius: 999px; border: 1px solid var(--border); } .date-chip-current { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); } .season-select { margin-bottom: .4rem; } .btn-accent-outline { color: var(--accent); border-color: var(--accent); } .detail-actions-primary { flex-wrap: nowrap; gap: .5rem; } .action-main { flex: 1; } .action-secondary { flex-shrink: 0; } #media-actions .detail-actions { padding: .85rem 1.5rem calc(.85rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg2) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .modal-overlay:not(.hidden) .modal-box { transform-origin: center bottom; } @media (max-width: 600px) { /* media-detail-shell mobile layout — inside the bottom sheet */ .media-detail-shell { --detail-gutter: 1rem; } .media-detail-shell::before { height: 128px; opacity: .55; background-image: linear-gradient(to bottom, rgba(0,0,0,.55), var(--bg2) 100%), var(--media-backdrop, none); } .media-detail-shell::after { display: none; } /* Cover top-aligned with title */ .media-detail-shell .detail-hero { grid-template-columns: 96px minmax(0, 1fr); gap: .85rem; align-items: start; padding: 3.65rem var(--detail-gutter) 1rem; } .media-detail-shell .detail-poster-col { width: 96px; flex-direction: column; align-items: stretch; gap: .45rem; } .media-detail-shell .detail-poster, .media-detail-shell .detail-poster-placeholder { width: 96px; box-shadow: 0 8px 18px rgba(0,0,0,.55); } /* Trailer button under cover — same width as cover via align-items:stretch */ .media-detail-shell .trailer-under-poster:not(.trailer-mobile) { display: flex; width: 100%; max-width: none; padding: .38rem 0; font-size: .75rem; } .trailer-mobile { display: none; } .media-detail-shell .detail-title { font-size: 1.25rem; line-height: 1.12; padding-right: 1.75rem; } .media-detail-shell .detail-meta { font-size: .78rem; gap: .32rem .45rem; margin-bottom: .45rem; } .media-detail-shell .detail-director { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .45rem; margin-bottom: .45rem; } .media-detail-shell .detail-overview { font-size: .86rem; } .media-detail-shell .detail-body { padding: 1rem var(--detail-gutter) 1.15rem; } .detail-actions-primary { flex-wrap: nowrap; } .detail-actions-primary .action-main { flex: 1; } .detail-actions-primary .action-secondary { flex-shrink: 0; } .action-icon-only { width: 42px; min-width: 42px; padding: 0; justify-content: center; } } /* ============================================================ v31c shared rendering/component helpers ============================================================ */ .ef-header { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.25rem; } .ef-cover { width:70px; border-radius:var(--radius); flex-shrink:0; box-shadow:var(--shadow-sm); object-fit:cover; cursor:pointer; } .ef-cover.is-locked { cursor:default; } .ef-cover-placeholder { width:70px; height:105px; background:var(--bg3); border-radius:var(--radius); flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-dim); cursor:pointer; gap:.3rem; border:1px dashed var(--border); } .ef-cover-placeholder i { font-size:1.2rem; } .ef-cover-placeholder span { font-size:.6rem; text-align:center; padding:0 .25rem; } .ef-heading { flex:1; min-width:0; } .ef-heading h2 { font-size:1.1rem; margin-bottom:.25rem; } .ef-title-sub { font-size:.875rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ef-year-sub { font-size:.8rem; color:var(--text-dim); } .rating-control-row { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; } .detail-actions.is-form-actions { flex-wrap:nowrap; gap:.5rem; } .detail-actions.is-form-actions .btn-primary { flex:1; } .detail-actions.is-form-actions .btn-cancel { flex-shrink:0; } .skeleton-clicksafe { pointer-events:none; } .skel-w-70 { width:70%; } .skel-w-45 { width:45%; } .skel-w-90 { width:90%; } .skel-w-80 { width:80%; } .skel-w-75 { width:75%; } .skel-w-50 { width:50%; } .skel-w-stat { width:48px; } .skel-h-title { height:1rem; } .skel-h-small { height:.75rem; } .skel-h-grid-title { height:.8rem; } .skel-h-grid-year { height:.7rem; } .skel-h-stat { height:1.75rem; } .skel-mb-sm { margin-bottom:.3rem; } .skel-mb-md { margin-bottom:.5rem; } .skel-mb-xs { margin-bottom:.4rem; } .skel-grid-title { margin:.4rem auto 0; } .skel-grid-year { margin:.25rem auto 0; } .confirm-overlay { position:fixed; inset:0; z-index:800; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; padding:1rem; backdrop-filter:blur(2px); } .confirm-card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:1.5rem; max-width:360px; width:100%; box-shadow:var(--shadow-lg); } .confirm-card p { font-size:.95rem; color:var(--text); margin-bottom:1.25rem; line-height:1.5; } .confirm-actions { display:flex; gap:.5rem; justify-content:flex-end; } .confirm-actions button { padding:.5rem 1rem; border-radius:6px; font-size:.875rem; font-family:inherit; cursor:pointer; } .confirm-cancel { background:var(--bg3); border:1px solid var(--border); color:var(--text-muted); } .confirm-confirm { background:var(--accent); border:1px solid var(--accent); color:#111; font-weight:700; } .confirm-confirm.is-danger { background:#3d1515; border-color:#7a2020; color:#f87171; } .vp-sentinel { height:4px; width:100%; grid-column:1/-1; } .status-error { color:#f87171; } .status-success { color:#4ade80; } .status-accent { color:var(--accent); } /* ============================================================ v31d unified accessible overlays ============================================================ */ .app-overlay { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(0,0,0,.72); backdrop-filter: blur(4px); animation: fadeIn .15s ease; } .app-dialog { width: 100%; max-width: 420px; max-height: min(90vh, 720px); overflow: auto; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-strong); padding: var(--space-6); animation: slideUp .2s ease; } .dialog-title { margin: 0 0 var(--space-2); font-size: 1.3rem; } .dialog-copy { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: .875rem; line-height: 1.45; } .dialog-status { min-height: 1.2rem; margin: var(--space-2) 0 var(--space-3); font-size: .8rem; } .dialog-actions { display: flex; gap: var(--space-2); } .dialog-actions .btn-primary { flex: 1; } .dialog-actions .btn-cancel { flex-shrink: 0; } .accent-code { color: var(--accent); } .rate-it-overlay { z-index: 1000; background: rgba(0,0,0,.88); /* slightly darker — dice feels like its own world */ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Dice game dialog — centered card, comfortable width */ .rate-it-dialog { width: min(100%, 360px); outline: none; } @media (max-width: 640px) { /* ── Confirm / username dialogs: stay centered (small focused dialogs) ── */ .app-overlay:not(.rate-it-overlay) { align-items: center; justify-content: center; padding: 1rem; } .app-overlay:not(.rate-it-overlay) .app-dialog { max-height: calc(100dvh - 2rem); border-radius: var(--radius-lg); padding: var(--space-5); } .dialog-actions { flex-direction: column; } .dialog-actions .btn-cancel { width: 100%; } /* ── Dice game: full-bleed centered overlay, card centered ── */ .rate-it-overlay { align-items: center; justify-content: center; padding: 1.5rem; inset: 0; /* covers full viewport including nav — intentional for dice immersion */ } .rate-it-dialog { width: min(100%, 360px); max-height: calc(100dvh - 3rem); overflow-y: auto; } } /* v31e performance: allow long media lists to skip off-screen paint/layout work */ .entry-card, .entry-grid-item, .entry-cover-item { content-visibility: auto; } .entry-card { contain-intrinsic-size: 1px 112px; } .entry-grid-item, .entry-cover-item { contain-intrinsic-size: 1px 220px; } /* v31f shared utility cleanup */ .rating-thumb-up { color: #4ade80; font-size: .85rem; } .rating-thumb-down { color: #f87171; font-size: .85rem; } .rating-stars-compact { color: var(--accent); font-size: .8rem; } .is-hidden { visibility: hidden !important; } /* ============================================================ v31g consolidated feature-screen cleanup ============================================================ */ .loading-panel { padding: var(--space-4); color: var(--text-muted); } .settings-section-accent { border-color: var(--accent); } .settings-section-muted { border-color: var(--text-dim); } .section-title-accent { color: var(--accent); } .section-title-muted { color: var(--text-muted); } .section-copy { font-size: .875rem; color: var(--text-muted); margin-bottom: .75rem; line-height: 1.45; } .section-helper { font-size: .8rem; color: var(--text-dim); margin-bottom: .5rem; } .inline-form-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .inline-form-input { flex: 1; min-width: 180px; } .inline-form-button { width: auto; padding: .55rem 1.1rem; font-size: .875rem; flex-shrink: 0; } .inline-status { margin-top: .5rem; font-size: .875rem; min-height: 1.2rem; } .inline-status-sm { margin-top: .4rem; font-size: .8rem; } .empty-note { color: var(--text-muted); font-size: .875rem; padding: .75rem; text-align: center; } .friends-list { display: flex; flex-direction: column; gap: .5rem; } .friend-request-row { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--border); } .friend-request-name { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .friend-request-email, .friend-email { font-size: .75rem; color: var(--text-muted); } .pending-label { font-size: .75rem; color: var(--text-dim); font-style: italic; } .btn-compact { width: auto; padding: .35rem .75rem; font-size: .8rem; flex-shrink: 0; } .friend-row { display: flex; align-items: center; gap: .75rem; padding: .6rem; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); } .friend-avatar-img, .friend-avatar-fallback { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; } .friend-avatar-img { object-fit: cover; } .friend-avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--bg4); color: var(--text-muted); font-size: .9rem; font-weight: 700; } .friend-meta { flex: 1; min-width: 0; } .friend-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .is-clickable { cursor: pointer; } .profile-email-spaced { margin-bottom: .75rem; } .profile-join-date { font-size: .8rem; color: var(--text-muted); } .form-group-spaced { margin-bottom: .75rem; } /* ============================================================ FAB — Floating Action Button (mobile dashboard only, #1) ============================================================ */ .fab-add { display: none; /* hidden on desktop — mobile shows via media query */ } @media (max-width: 768px) { .fab-add { display: flex; align-items: center; justify-content: center; position: fixed; bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 1rem); right: 1rem; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #111; border: none; font-size: 1.4rem; cursor: pointer; box-shadow: 0 4px 20px rgba(220,226,51,0.45); z-index: 296; /* above more-drawer (295), below modal (500) */ transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; } .fab-add:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(220,226,51,0.6); } .fab-add:active { transform: scale(0.95); } .fab-add.hidden { display: none; } } /* ============================================================ EXPLORE FEATURES PAGE (#8) ============================================================ */ /* ── Explore Features page hero: full-bleed, CoverGrid backdrop ── */ .explore-hero { /* Bleed out of main-content's 2rem padding on all sides */ margin: -2rem -2rem 2rem -2rem; position: relative; overflow: hidden; min-height: 260px; display: flex; align-items: center; justify-content: center; text-align: center; } /* CoverGrid image fills the full hero area */ .explore-hero::before { content: ""; position: absolute; inset: 0; background: url("/images/CoverGrid.png") center center / cover no-repeat; opacity: 0.22; z-index: 0; } /* Gradient fades the grid to dark at bottom */ .explore-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,20,20,0.35) 0%, rgba(20,20,20,0.82) 70%, var(--bg) 100%); z-index: 1; } .explore-hero-inner { position: relative; z-index: 2; padding: 3rem 2rem 2.5rem; max-width: 560px; } /* Big logo */ .explore-hero-logo { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 1.25rem; } .explore-hero-logo-icon { font-size: 2.5rem; color: var(--accent); } .explore-hero-logo-text { font-size: 2rem; font-weight: 800; color: var(--accent); letter-spacing: -0.03em; } .explore-hero-title { font-size: clamp(1.4rem, 3.5vw, 2.1rem); font-weight: 800; line-height: 1.12; margin-bottom: .75rem; letter-spacing: -.02em; color: var(--text); } .explore-hero-sub { color: var(--text-muted); font-size: 1rem; max-width: 42ch; margin: 0 auto; line-height: 1.55; } .explore-features { display: grid; /* Max 2 columns — keeps Rate It + Rewatches always in the same row */ grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; } /* "Log Everything" spans all columns — most prominent feature */ .explore-card-wide { grid-column: 1 / -1; } /* On wide card, show entries side-by-side instead of stacked */ .explore-card-wide .explore-mockup-entries { flex-direction: row; gap: 1rem; /* Pull left so entries align with the icon's left edge */ margin-left: calc(-44px - 1.25rem); width: calc(100% + 44px + 1.25rem); } .explore-card-wide .em-card { flex: 1; } /* Cards after Log Everything flow naturally in 2-col pairs */ .explore-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; display: flex; gap: 1.25rem; align-items: flex-start; transition: border-color 0.15s; } .explore-card:hover { border-color: var(--accent); } .explore-card-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .explore-card-body { flex: 1; min-width: 0; } .explore-card-title { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; line-height: 1.2; } .explore-card-desc { font-size: .875rem; color: var(--text-muted); line-height: 1.55; margin-bottom: .75rem; } .explore-card-desc:last-child { margin-bottom: 0; } .explore-card-list { margin: -.25rem 0 0 1.05rem; padding: 0; color: var(--text-muted); font-size: .84rem; line-height: 1.5; } .explore-card-list li { margin: .18rem 0; } /* Inline mockups inside cards */ .explore-mockup { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem; font-size: .8rem; } .explore-mockup-url { display: flex; align-items: center; gap: .5rem; } .explore-url { color: var(--text-muted); word-break: break-all; } .explore-url strong { color: var(--accent); } .explore-code { background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: .1rem .4rem; font-size: .8rem; color: var(--accent); font-family: monospace; } .explore-mockup-tags { display: flex; flex-wrap: wrap; gap: .4rem; background: none; border: none; padding: 0; } .explore-tag { display: inline-flex; align-items: center; gap: .35rem; background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .75rem; font-size: .78rem; color: var(--text-muted); } .explore-tag i { color: var(--accent); } /* em- prefix = explore mockup sub-components */ .explore-mockup-entries { display: flex; flex-direction: column; gap: .5rem; background: none; border: none; padding: 0; } .em-card { display: flex; gap: .75rem; align-items: center; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem; } .em-poster-img { width: 36px; height: 54px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: var(--bg4); } .em-title { font-weight: 700; font-size: .85rem; margin-bottom: .15rem; } .em-meta { font-size: .73rem; color: var(--text-muted); margin-bottom: .2rem; } .em-rating { font-size: .78rem; } .explore-mockup-providers { display: flex; gap: 1rem; flex-wrap: wrap; background: none; border: none; padding: 0; } .em-provider-group { } .em-provider-label { font-size: .7rem; color: var(--text-muted); margin-bottom: .35rem; } .em-providers { display: flex; gap: .35rem; flex-wrap: wrap; } .em-prov-logo { width: 36px; height: 36px; border-radius: 22%; /* squircle — matches iOS app icon rounding */ object-fit: cover; background: var(--bg4); flex-shrink: 0; } .explore-mockup-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; background: none; border: none; padding: 0; } .em-stat { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .4rem; text-align: center; } .em-stat-num { font-size: 1.1rem; font-weight: 800; color: var(--accent); line-height: 1; } .em-stat-label { font-size: .65rem; color: var(--text-muted); margin-top: .2rem; } .explore-mockup-dice { background: none; border: none; padding: 0; } .em-dice-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem; display: flex; gap: .75rem; align-items: center; } .em-dice-poster { width: 44px; height: 66px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: var(--bg4); } .em-dice-info { flex: 1; } .em-dice-title { font-weight: 700; font-size: .88rem; margin-bottom: .4rem; line-height: 1.2; } .em-dice-actions { display: flex; align-items: center; gap: .6rem; } .explore-footer { text-align: center; padding: 2rem; color: var(--text-muted); font-size: .875rem; border-top: 1px solid var(--border); } .explore-cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .75rem 1.25rem; border-radius: var(--radius-sm); font-size: .95rem; cursor: pointer; width: auto; } @media (max-width: 600px) { .explore-hero { margin: -1rem -1rem 1.5rem -1rem; min-height: 200px; } .explore-hero-logo-icon { font-size: 1.8rem; } .explore-hero-logo-text { font-size: 1.5rem; } .explore-hero-inner { padding: 2rem 1.25rem 1.75rem; } .explore-card { flex-direction: column; gap: .75rem; padding: 1.25rem; } .explore-card-wide .explore-mockup-entries { flex-direction: column; margin-left: 0; width: 100%; } .explore-card-icon { width: 38px; height: 38px; font-size: 1rem; } .explore-mockup-stats { grid-template-columns: repeat(2, 1fr); } .explore-features { grid-template-columns: 1fr; } } /* Compact genre rows/results. Prevent genre-card grid row sizing from leaking into results. */ .trending-header { min-height: 2.5rem; align-items: center; } .genre-load-more { grid-column: 1 / -1; width: auto; min-height: 2.5rem; justify-content: center; justify-self: stretch; margin-top: 0.5rem; } /* ============================================================ CHAIN'D GAME ============================================================ */ /* ── Loading ── */ .chaind-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 1rem; padding: 2rem; } .chaind-loading-icon { font-size: 3rem; color: var(--accent); animation: chaind-pulse 1.5s ease-in-out infinite; } @keyframes chaind-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.7; } } .chaind-loading-title { font-size: 1.8rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; } .chaind-loading-bar-wrap { width: 240px; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; } .chaind-loading-bar-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 2px; transition: width .4s ease; } .chaind-loading-msg { font-size: .85rem; color: var(--text-muted); min-height: 1.2em; text-align: center; } /* ── Landing ── */ .chaind-landing { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 3rem; } .chaind-header { text-align: left; margin-bottom: .25rem; } .chaind-logo { font-size: 1.75rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; display: block; } .chaind-tagline { font-size: .88rem; color: var(--text-muted); margin-top: .25rem; } .chaind-section { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; } .chaind-section-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 1rem; } /* Today's status */ .chaind-today-ready { text-align: center; } .chaind-today-actors { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; } .chaind-vs { font-size: 1.4rem; color: var(--accent); } .chaind-today-label { font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; } .chaind-play-btn { width: auto; padding: .65rem 2.5rem; font-size: 1rem; margin: 0 auto; display: block; } .chaind-today-result { display: flex; align-items: center; gap: 1rem; } .chaind-today-result-icon { font-size: 2rem; } .chaind-today-result-title { font-weight: 700; font-size: 1rem; } .chaind-today-result-sub { font-size: .85rem; color: var(--text-muted); margin-top: .15rem; } .chaind-comeback { font-size: .82rem; color: var(--text-muted); text-align: center; margin-top: .75rem; } /* Actor circle */ .chaind-actor-circle { display: flex; flex-direction: column; align-items: center; gap: .4rem; } .chaind-actor-circle-sm .chaind-actor-photo, .chaind-actor-circle-sm img, .chaind-actor-circle-sm .chaind-actor-initials { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: var(--text-muted); } .chaind-actor-circle-md img, .chaind-actor-circle-md .chaind-actor-initials { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.4rem; color: var(--text-muted); } .chaind-actor-circle-lg img, .chaind-actor-circle-lg .chaind-actor-initials { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.8rem; color: var(--text-muted); } .chaind-actor-name { font-size: .78rem; font-weight: 600; text-align: center; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Stats grid */ .chaind-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .6rem; } .chaind-stat-chip { background: var(--bg3); border-radius: var(--radius-sm); padding: .6rem .5rem; text-align: center; } .chaind-stat-val { font-size: 1.2rem; font-weight: 800; color: var(--accent); } .chaind-stat-label { font-size: .68rem; color: var(--text-muted); margin-top: .15rem; text-transform: uppercase; letter-spacing: .05em; } .chaind-no-stats { font-size: .85rem; color: var(--text-muted); text-align: center; padding: .5rem 0; } /* Leaderboard */ .chaind-lb-list { display: flex; flex-direction: column; gap: .35rem; } .chaind-lb-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--bg3); font-size: .85rem; } .chaind-lb-row.is-me { background: var(--accent); color: #111; } .chaind-lb-row.is-me .chaind-lb-score, .chaind-lb-row.is-me .chaind-lb-meta { color: #111; } .chaind-lb-rank { width: 20px; font-weight: 700; font-size: .8rem; color: var(--text-muted); flex-shrink: 0; } .chaind-lb-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .chaind-lb-avatar img { width: 100%; height: 100%; object-fit: cover; } .chaind-lb-initial { width: 28px; height: 28px; border-radius: 50%; background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: var(--text-muted); } .chaind-lb-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chaind-lb-score { font-weight: 700; color: var(--accent); flex-shrink: 0; } .chaind-lb-meta { font-size: .75rem; color: var(--text-muted); flex-shrink: 0; } /* ── Game Screen ── */ .chaind-game { display: flex; flex-direction: column; gap: 1.25rem; padding: 1rem 0; } .chaind-round-indicator { text-align: center; font-size: .8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; } /* Chain strip */ .chaind-chain-strip { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .75rem; overflow: hidden; min-height: 60px; display: flex; align-items: center; } .chaind-strip-inner { display: flex; align-items: center; gap: .3rem; justify-content: center; flex-wrap: nowrap; width: 100%; transform-origin: center center; transition: transform .3s ease; } .chaind-strip-node { display: flex; flex-direction: column; align-items: center; gap: .15rem; flex-shrink: 0; } .chaind-strip-actor img, .chaind-strip-actor .chaind-strip-initial { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; color: var(--text-muted); } .chaind-strip-movie img, .chaind-strip-poster-ph { width: 22px; height: 33px; border-radius: 2px; object-fit: cover; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: .55rem; color: var(--text-dim); } .chaind-strip-name { font-size: .58rem; color: var(--text-muted); max-width: 50px; overflow: hidden; text-overflow: ellipsis; text-align: center; white-space: nowrap; } .chaind-strip-arrow { font-size: .75rem; color: var(--text-dim); flex-shrink: 0; } .chaind-strip-gap { flex: 1; } /* Actor slots */ .chaind-actors-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; } .chaind-actor-slot { cursor: pointer; transition: transform .2s ease, opacity .2s ease; border-radius: 50%; } .chaind-actor-slot.is-active { transform: scale(1.05); opacity: 1; } .chaind-actor-slot.is-inactive { opacity: .45; } .chaind-actor-slot:hover { opacity: .85; } .chaind-actor-divider { font-size: 1.5rem; color: var(--accent); flex-shrink: 0; } /* Choice area */ .chaind-choice-area { display: flex; flex-direction: column; gap: .75rem; } .chaind-choice-label { font-size: .85rem; color: var(--text-muted); margin-bottom: .25rem; } .chaind-movie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .6rem; } .chaind-movie-card { cursor: pointer; } .chaind-cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .75rem; } .chaind-cast-card { cursor: pointer; } /* Search */ .chaind-search-wrap { position: relative; } .chaind-search-input { width: 100%; padding: .6rem .85rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg2); color: var(--text); font-size: .9rem; font-family: inherit; } .chaind-search-input:focus { outline: none; border-color: var(--accent); } .chaind-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); z-index: 50; max-height: 280px; overflow-y: auto; box-shadow: 0 4px 16px rgba(0,0,0,.3); } .chaind-search-results.hidden { display: none; } .chaind-search-item { display: flex; align-items: center; gap: .75rem; padding: .55rem .85rem; cursor: pointer; transition: background .12s; } .chaind-search-item:hover { background: var(--bg3); } .chaind-search-item img { width: 32px; height: 48px; object-fit: cover; border-radius: 3px; flex-shrink: 0; } .chaind-search-item-ph { width: 32px; height: 48px; background: var(--bg3); border-radius: 3px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--text-dim); } .chaind-search-item-circle { height: 32px !important; border-radius: 50% !important; font-size: .75rem; font-weight: 700; } .chaind-search-item-title { font-size: .85rem; font-weight: 600; } .chaind-search-item-year { font-size: .75rem; color: var(--text-muted); } .chaind-search-none { padding: .75rem 1rem; font-size: .82rem; color: var(--text-muted); font-style: italic; } .chaind-search-item-locked { opacity: .45; cursor: not-allowed; } /* ── Result Screen ── */ .chaind-result { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-bottom: 3rem; text-align: center; width: 100%; } .chaind-result-icon { font-size: 3rem; } .chaind-result-title { font-size: 1.4rem; font-weight: 800; } .chaind-result-score { font-size: 1rem; color: var(--accent); font-weight: 700; } .chaind-result-chain { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 100%; } .chaind-result-arrow { font-size: .9rem; color: var(--text-dim); } .chaind-result-node { display: flex; align-items: center; gap: .75rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .85rem; width: 100%; max-width: 320px; } .chaind-result-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .chaind-result-avatar img { width: 100%; height: 100%; object-fit: cover; } .chaind-result-initial { width: 40px; height: 40px; border-radius: 50%; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-muted); } .chaind-result-poster { width: 30px; height: 45px; object-fit: cover; border-radius: 3px; flex-shrink: 0; } .chaind-result-poster-ph { width: 30px; height: 45px; background: var(--bg3); border-radius: 3px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--text-dim); } .chaind-result-name { font-size: .9rem; font-weight: 600; text-align: left; } .chaind-result-solution { width: 100%; } .chaind-solution-chain { opacity: .75; } .chaind-share-btn { width: auto; padding: .65rem 2rem; margin-top: .5rem; } /* ── Admin Panel ── */ .chaind-admin-section { border-color: var(--accent); } .chaind-admin-search-row { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; } .chaind-admin-actor-col { flex: 1; display: flex; flex-direction: column; gap: .4rem; position: relative; } .chaind-admin-vs { padding-top: 1.8rem; color: var(--text-muted); font-weight: 700; } .chaind-admin-label { font-size: .75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; } .chaind-admin-selected { font-size: .85rem; color: var(--accent); margin-top: .2rem; } .chaind-admin-controls { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; } .chaind-admin-schedule { display: flex; flex-direction: column; gap: .5rem; } .chaind-admin-puzzle-row { display: flex; gap: .75rem; align-items: center; padding: .45rem .75rem; background: var(--bg3); border-radius: var(--radius-sm); font-size: .82rem; } .chaind-admin-puzzle-date { font-weight: 700; color: var(--accent); flex-shrink: 0; } .chaind-admin-puzzle-actors { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chaind-admin-puzzle-meta { color: var(--text-muted); flex-shrink: 0; } @media (max-width: 480px) { .chaind-admin-search-row { flex-direction: column; } .chaind-admin-vs { padding-top: 0; align-self: center; } .chaind-stats-grid { grid-template-columns: repeat(4, 1fr); } .chaind-movie-grid { grid-template-columns: repeat(3, 1fr); } } /* ── Chain'd v2 additions ── */ .chaind-inpage-results { margin-top: .5rem; /* No max-height or overflow-y — content flows in page, page scrolls naturally. Inner scroll containers capture scroll events and block outer page scroll. */ } .chaind-today-result-row { display: flex; align-items: center; gap: 1rem; } .chaind-result-pair { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .75rem; } .chaind-result-endpoint { border-color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 8%, var(--bg2)) !important; } .chaind-solution-wrap { width: 100%; transition: opacity .6s ease; } .chaind-section + .chaind-section { margin-top: 0; } /* Admin panel in settings — not full width, matches other tabs */ .chaind-admin-search-row { display: flex; gap: 1rem; align-items: flex-start; margin-top: .75rem; } .chaind-admin-actor-col { flex: 1; display: flex; flex-direction: column; gap: .4rem; position: relative; } .chaind-admin-vs { padding-top: 1.6rem; color: var(--text-muted); font-weight: 700; flex-shrink: 0; } .chaind-admin-label { font-size: .75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; } .chaind-admin-selected { font-size: .85rem; color: var(--text); margin-top: .25rem; min-height: 36px; display: flex; align-items: center; } .chaind-admin-puzzle-row { background: var(--bg3); border-radius: var(--radius-sm); padding: .6rem .85rem; font-size: .82rem; display: flex; flex-direction: column; gap: .2rem; } .chaind-admin-puzzle-date { font-weight: 700; color: var(--accent); } .chaind-admin-puzzle-actors { color: var(--text); } .chaind-admin-puzzle-meta { color: var(--text-muted); } .chaind-admin-schedule { display: flex; flex-direction: column; gap: .5rem; } @media (max-width: 480px) { .chaind-admin-search-row { flex-direction: column; } .chaind-admin-vs { padding-top: 0; align-self: center; } } /* Chain'd admin — past/completed puzzle rows */ .chaind-puzzle-past-row { opacity: 0.55; } .chaind-admin-puzzle-date.chaind-puzzle-past { color: var(--text-muted) !important; text-decoration: line-through; text-decoration-color: var(--text-dim); }