@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ── Cross-document View Transitions (MPA fade) ── */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: mf-fade-out 0.07s ease-out both; } ::view-transition-new(root) { animation: mf-fade-in 0.09s ease-out both; } @keyframes mf-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes mf-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg-base: #0a0608; --bg-surface: #12080d; --bg-card: #180e14; --bg-card-hover: #211219; --accent: #e11d48; --accent-glow: rgba(225, 29, 72, 0.4); --accent-hover: #be123c; --accent-light: #fb7185; --gradient-1: linear-gradient(135deg, #f43f5e 0%, #7f1d1d 100%); --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); --gradient-5: linear-gradient(135deg, #fa709a 0%, #fee140 100%); --gradient-6: linear-gradient(135deg, #fda4af 0%, #fbc2eb 100%); --gradient-7: linear-gradient(135deg, #fd746c 0%, #ff9068 100%); --gradient-8: linear-gradient(135deg, #30cfd0 0%, #1f0a10 100%); --text-primary: #f5f0f2; --text-secondary: #998890; --text-muted: #635055; --border: rgba(255, 255, 255, 0.07); --border-hover: rgba(225, 29, 72, 0.5); --navbar-h: 70px; /* redesign tokens */ --accent-2: #f43f5e; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --radius: 16px; --radius-lg: 22px; --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.55); --shadow-pop: 0 24px 70px rgba(0, 0, 0, 0.65); --maxw: 1480px; } /* ── Accent themes (all red-family) — set on ── */ html[data-accent="rose"] { --accent: #f43f5e; --accent-2: #fb7185; --accent-hover: #e11d48; --accent-light: #fda4af; --accent-glow: rgba(244, 63, 94, 0.42); --border-hover: rgba(244, 63, 94, 0.55); --gradient-1: linear-gradient(135deg, #fb7185 0%, #9f1239 100%); } html[data-accent="ember"] { --accent: #ef4444; --accent-2: #f87171; --accent-hover: #dc2626; --accent-light: #fca5a5; --accent-glow: rgba(239, 68, 68, 0.42); --border-hover: rgba(239, 68, 68, 0.55); --gradient-1: linear-gradient(135deg, #f87171 0%, #7f1d1d 100%); } html[data-accent="sunset"] { --accent: #f97316; --accent-2: #fb923c; --accent-hover: #ea580c; --accent-light: #fdba74; --accent-glow: rgba(249, 115, 22, 0.42); --border-hover: rgba(249, 115, 22, 0.55); --gradient-1: linear-gradient(135deg, #fb923c 0%, #b91c1c 100%); } html[data-accent="neon"] { --accent: #ff2d55; --accent-2: #ff5c7a; --accent-hover: #e11d48; --accent-light: #ff7a93; --accent-glow: rgba(255, 45, 85, 0.5); --border-hover: rgba(255, 45, 85, 0.6); --gradient-1: linear-gradient(135deg, #ff2d55 0%, #7a1030 100%); } html[data-accent="orchid"] { --accent: #e0115f; --accent-2: #ec4899; --accent-hover: #be123c; --accent-light: #f472b6; --accent-glow: rgba(224, 17, 95, 0.45); --border-hover: rgba(224, 17, 95, 0.55); --gradient-1: linear-gradient(135deg, #ec4899 0%, #831843 100%); } /* ── Full-spectrum accents (greens, blues, yellows, purples…) ── */ html[data-accent="gold"] { --accent: #f59e0b; --accent-2: #fbbf24; --accent-hover: #d97706; --accent-light: #fcd34d; --accent-glow: rgba(245, 158, 11, 0.42); --border-hover: rgba(245, 158, 11, 0.55); --gradient-1: linear-gradient(135deg, #fbbf24 0%, #92400e 100%); } html[data-accent="lime"] { --accent: #84cc16; --accent-2: #a3e635; --accent-hover: #65a30d; --accent-light: #bef264; --accent-glow: rgba(132, 204, 22, 0.42); --border-hover: rgba(132, 204, 22, 0.55); --gradient-1: linear-gradient(135deg, #a3e635 0%, #3f6212 100%); } html[data-accent="emerald"] { --accent: #10b981; --accent-2: #34d399; --accent-hover: #059669; --accent-light: #6ee7b7; --accent-glow: rgba(16, 185, 129, 0.42); --border-hover: rgba(16, 185, 129, 0.55); --gradient-1: linear-gradient(135deg, #34d399 0%, #065f46 100%); } html[data-accent="teal"] { --accent: #14b8a6; --accent-2: #2dd4bf; --accent-hover: #0d9488; --accent-light: #5eead4; --accent-glow: rgba(20, 184, 166, 0.42); --border-hover: rgba(20, 184, 166, 0.55); --gradient-1: linear-gradient(135deg, #2dd4bf 0%, #115e59 100%); } html[data-accent="cyan"] { --accent: #06b6d4; --accent-2: #22d3ee; --accent-hover: #0891b2; --accent-light: #67e8f9; --accent-glow: rgba(6, 182, 212, 0.42); --border-hover: rgba(6, 182, 212, 0.55); --gradient-1: linear-gradient(135deg, #22d3ee 0%, #155e75 100%); } html[data-accent="sky"] { --accent: #0ea5e9; --accent-2: #38bdf8; --accent-hover: #0284c7; --accent-light: #7dd3fc; --accent-glow: rgba(14, 165, 233, 0.42); --border-hover: rgba(14, 165, 233, 0.55); --gradient-1: linear-gradient(135deg, #38bdf8 0%, #075985 100%); } html[data-accent="azure"] { --accent: #3b82f6; --accent-2: #60a5fa; --accent-hover: #2563eb; --accent-light: #93c5fd; --accent-glow: rgba(59, 130, 246, 0.42); --border-hover: rgba(59, 130, 246, 0.55); --gradient-1: linear-gradient(135deg, #60a5fa 0%, #1e3a8a 100%); } html[data-accent="indigo"] { --accent: #6366f1; --accent-2: #818cf8; --accent-hover: #4f46e5; --accent-light: #a5b4fc; --accent-glow: rgba(99, 102, 241, 0.42); --border-hover: rgba(99, 102, 241, 0.55); --gradient-1: linear-gradient(135deg, #818cf8 0%, #312e81 100%); } html[data-accent="violet"] { --accent: #8b5cf6; --accent-2: #a78bfa; --accent-hover: #7c3aed; --accent-light: #c4b5fd; --accent-glow: rgba(139, 92, 246, 0.42); --border-hover: rgba(139, 92, 246, 0.55); --gradient-1: linear-gradient(135deg, #a78bfa 0%, #4c1d95 100%); } html[data-accent="grape"] { --accent: #a855f7; --accent-2: #c084fc; --accent-hover: #9333ea; --accent-light: #d8b4fe; --accent-glow: rgba(168, 85, 247, 0.42); --border-hover: rgba(168, 85, 247, 0.55); --gradient-1: linear-gradient(135deg, #c084fc 0%, #581c87 100%); } html[data-accent="magenta"] { --accent: #d946ef; --accent-2: #e879f9; --accent-hover: #c026d3; --accent-light: #f0abfc; --accent-glow: rgba(217, 70, 239, 0.42); --border-hover: rgba(217, 70, 239, 0.55); --gradient-1: linear-gradient(135deg, #e879f9 0%, #701a75 100%); } html[data-accent="slate"] { --accent: #64748b; --accent-2: #94a3b8; --accent-hover: #475569; --accent-light: #cbd5e1; --accent-glow: rgba(100, 116, 139, 0.42); --border-hover: rgba(100, 116, 139, 0.55); --gradient-1: linear-gradient(135deg, #94a3b8 0%, #1e293b 100%); } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, sans-serif; background-color: var(--bg-base); color: var(--text-primary); min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── Scrollbar — bold red ── */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-light), var(--accent) 45%, var(--accent-hover)); border-radius: 10px; border: 2px solid var(--bg-base); box-shadow: 0 0 10px var(--accent-glow); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent-light), var(--accent)); } ::-webkit-scrollbar-corner { background: var(--bg-base); } /* Firefox */ html { scrollbar-color: var(--accent) var(--bg-base); scrollbar-width: auto; } /* ── Navbar ── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--navbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; background: rgba(8, 8, 15, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); transition: background 0.3s ease; } .navbar.scrolled { background: rgba(8, 8, 15, 0.98); box-shadow: 0 4px 30px rgba(0,0,0,0.5); } .nav-logo { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.5px; background: linear-gradient(135deg, var(--accent-light), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; flex-shrink: 0; } .nav-links { display: flex; align-items: center; gap: 0.25rem; list-style: none; } .nav-links a { color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 0.9rem; padding: 0.5rem 0.9rem; border-radius: 8px; transition: all 0.2s ease; letter-spacing: 0.01em; } .nav-links a:hover, .nav-links a.active { color: var(--text-primary); background: color-mix(in srgb, var(--accent) 15%, transparent); } .nav-links a.active { color: var(--accent-light); } .nav-auth { display: flex; align-items: center; gap: 0.75rem; } .nav-user { display: flex; align-items: center; gap: 0.75rem; } .nav-user-name { font-size: 0.9rem; font-weight: 600; color: var(--accent-light); } .nav-admin-shimmer { display: inline-flex; align-items: center; gap: 4px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem 1.2rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.2s ease; border: none; font-family: inherit; letter-spacing: 0.01em; } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); } .btn-ghost:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 0 20px var(--accent-glow); } .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 0 30px var(--accent-glow); transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--accent-light); border: 1px solid var(--accent); } .btn-outline:hover { background: var(--accent); color: #fff; } .btn-danger { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); } .btn-danger:hover { background: rgba(239, 68, 68, 0.25); } .btn-sm { padding: 0.35rem 0.85rem; font-size: 0.8rem; } .btn-lg { padding: 0.75rem 2rem; font-size: 1rem; border-radius: 10px; } /* ── Page Wrapper ── */ .page { padding-top: var(--navbar-h); min-height: 100vh; } /* ── Hero ── */ .hero { position: relative; min-height: 85vh; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--accent) 25%, transparent) 0%, transparent 70%), radial-gradient(ellipse 50% 50% at 80% 50%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 60%), var(--bg-base); z-index: 0; } .hero-bg::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .hero-content { position: relative; z-index: 1; max-width: 700px; padding: 4rem 2.5rem; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-light); background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding: 0.35rem 0.9rem; border-radius: 100px; margin-bottom: 1.5rem; } .hero-title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 1.25rem; } .hero-title span { background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 50%, var(--accent-2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: 1.15rem; color: var(--text-secondary); margin-bottom: 2.5rem; max-width: 500px; font-weight: 400; line-height: 1.7; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-stats { display: flex; gap: 2.5rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); } .hero-stat-value { font-size: 1.8rem; font-weight: 800; color: var(--text-primary); line-height: 1; } .hero-stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.05em; } /* ── Section ── */ .section { padding: 3.5rem 2.5rem; max-width: 1400px; margin: 0 auto; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; } .section-title { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.6rem; } .section-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; box-shadow: 0 0 8px var(--accent); } /* ── Content Grid (home featured, portrait) ── */ .content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } /* ── Card Grid (browse listing pages) ── */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } /* ── Card ── */ .card { background: var(--bg-card); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; } .card:hover { transform: translateY(-6px) scale(1.02); border-color: var(--border-hover); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); } /* Make cards behave like blocks */ a.card { text-decoration: none; color: inherit; display: block; } .card-poster { width: 100%; aspect-ratio: 2/3; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); } /* Real poster images */ .card-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .card:hover .card-poster img { transform: scale(1.06); } .card-poster-gradient { position: absolute; inset: 0; opacity: 0.9; transition: opacity 0.3s ease; } .card:hover .card-poster-gradient { opacity: 1; } .card-poster-initials { position: relative; z-index: 1; font-size: 2.5rem; font-weight: 900; color: rgba(255,255,255,0.3); letter-spacing: -0.05em; text-shadow: 0 2px 20px rgba(0,0,0,0.5); user-select: none; } .card-poster-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(22, 22, 31, 0.95) 0%, transparent 60%); z-index: 2; opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: 1rem; } .card:hover .card-poster-overlay { opacity: 1; } .card-overlay-desc { font-size: 0.75rem; color: rgba(255,255,255,0.85); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── 2026+ new-release warning flair ───────────────────────── */ .card-new-warn { position: absolute; bottom: 0.55rem; right: 0.55rem; z-index: 4; width: 22px; height: 22px; border-radius: 50%; background: rgba(234,179,8,0.92); color: #000; display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: default; pointer-events: auto; } /* Tooltip is injected via JS (main.js) so it escapes card overflow: hidden */ .card-warn-tooltip { position: fixed; z-index: 9999; max-width: 200px; background: rgba(15,15,15,0.95); color: #f3f4f6; font-size: 0.72rem; line-height: 1.45; padding: 0.45rem 0.7rem; border-radius: 7px; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08); } .card-badge { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); border-radius: 6px; padding: 0.2rem 0.5rem; font-size: 0.72rem; font-weight: 700; color: #fbbf24; display: flex; align-items: center; gap: 0.2rem; } .card-body { padding: 0.9rem 1rem; } .card-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } .card-year { font-weight: 500; } .card-genre { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); padding: 0.1rem 0.5rem; border-radius: 4px; font-weight: 600; font-size: 0.7rem; } /* ── Page Banner ── */ .page-banner { padding: 4rem 2.5rem 2rem; background: radial-gradient(ellipse 80% 100% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%); border-bottom: 1px solid var(--border); margin-bottom: 0; } .page-banner-inner { max-width: 1400px; margin: 0 auto; } .page-banner-title { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 0.5rem; } .page-banner-subtitle { color: var(--text-secondary); font-size: 1rem; } /* ── Filter Bar ── */ .filter-bar { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 2.5rem; max-width: 1400px; margin: 0 auto; flex-wrap: wrap; } .search-box { position: relative; flex: 1; min-width: 200px; max-width: 360px; } .search-box input { width: 100%; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 1rem 0.6rem 2.5rem; color: var(--text-primary); font-size: 0.875rem; font-family: inherit; outline: none; transition: all 0.2s ease; } .search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .search-box input::placeholder { color: var(--text-muted); } .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.85rem; } .genre-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; } .genre-chip { padding: 0.35rem 0.85rem; border-radius: 100px; font-size: 0.78rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); color: var(--text-secondary); background: transparent; font-family: inherit; transition: all 0.2s ease; text-decoration: none; } .genre-chip:hover { border-color: var(--accent); color: var(--accent-light); } .genre-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* ── Auth Pages ── */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; background: radial-gradient(ellipse 60% 60% at 30% 40%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 70% 60%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%), var(--bg-base); } .auth-card { width: 100%; max-width: 420px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6); } .auth-logo { text-align: center; margin-bottom: 2rem; } .auth-logo a { font-size: 1.8rem; font-weight: 900; background: linear-gradient(135deg, var(--accent-light), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; } .auth-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 0.35rem; } .auth-subtitle { font-size: 0.875rem; color: var(--text-muted); text-align: center; margin-bottom: 2rem; } .form-group { margin-bottom: 1.1rem; } .form-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.4rem; letter-spacing: 0.02em; text-transform: uppercase; } .form-input { width: 100%; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 1rem; color: var(--text-primary); font-size: 0.9rem; font-family: inherit; outline: none; transition: all 0.2s ease; } .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .form-input::placeholder { color: var(--text-muted); } .form-input.error { border-color: #ef4444; } .error-alert { display: flex; align-items: center; gap: 0.6rem; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 10px; padding: 0.85rem 1rem; font-size: 0.85rem; color: #fca5a5; margin-bottom: 1.25rem; } .form-submit { width: 100%; margin-top: 0.5rem; } .auth-footer { text-align: center; margin-top: 1.5rem; font-size: 0.85rem; color: var(--text-muted); } .auth-footer a { color: var(--accent-light); text-decoration: none; font-weight: 600; } .auth-footer a:hover { text-decoration: underline; } .registration-hint { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.35rem; } /* ── Footer ── */ .footer { border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); padding: 2.5rem; text-align: center; color: var(--text-muted); font-size: 0.82rem; } .footer-logo { font-size: 1.1rem; font-weight: 900; background: linear-gradient(135deg, var(--accent-light), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; } /* ── Empty State ── */ .empty-state { text-align: center; padding: 5rem 2rem; color: var(--text-muted); } .empty-state-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; } .empty-state h3 { font-size: 1.1rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; } /* ── Hamburger button ── */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; background: none; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; padding: 0; flex-shrink: 0; } .nav-hamburger span { display: block; width: 18px; height: 2px; background: var(--text-secondary); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Responsive ── */ @media (max-width: 768px) { .navbar { padding: 0 0.75rem; } /* Constrain nav-auth so it doesn't push off-screen */ .nav-auth { flex-shrink: 1; min-width: 0; gap: 0.4rem; } .nav-user { flex-shrink: 1; min-width: 0; gap: 0.4rem; } .nav-hamburger { display: flex; flex-shrink: 0; } /* Hide separate admin badge — shimmer name already signals admin */ .nav-badge-admin { display: none !important; } /* Compact profile button so everything fits one line */ .nav-user-name { font-size: 0.76rem; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-avatar { width: 28px; height: 28px; } .nav-avatar-placeholder { width: 28px; height: 28px; font-size: 0.7rem; } .nav-profile-btn { padding: 4px 6px; gap: 5px; flex-shrink: 1; min-width: 0; } /* Nav links hidden by default, drop-down when open */ .nav-links { display: none; position: absolute; top: var(--navbar-h); left: 0; right: 0; background: rgba(10, 6, 8, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch; padding: 0.5rem 0; z-index: 999; gap: 0; } .nav-links.nav-mobile-open { display: flex; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 0.75rem 1.5rem; border-radius: 0; font-size: 1rem; border-bottom: 1px solid var(--border); } .nav-links li:last-child a { border-bottom: none; } .hero-content { padding: 3rem 1.5rem; } .hero-stats { gap: 1.5rem; flex-wrap: wrap; } .section { padding: 2.5rem 1rem; } .page-banner { padding: 3rem 1rem 1.5rem; } .filter-bar { padding: 1rem; } .auth-card { padding: 2rem 1.5rem; } .content-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } /* ── Gradient Helpers ── */ .g0 { background: var(--gradient-1); } .g1 { background: var(--gradient-2); } .g2 { background: var(--gradient-3); } .g3 { background: var(--gradient-4); } .g4 { background: var(--gradient-5); } .g5 { background: var(--gradient-6); } .g6 { background: var(--gradient-7); } .g7 { background: var(--gradient-8); } /* ── Welcome Banner (logged in home) ── */ /* ── Homepage Announcement Bars ── */ .ann-hero-card { width: 100%; max-width: 640px; margin: 0 auto 1.75rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 8%, transparent) 100%); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 16px; padding: 1.4rem 1.8rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .ann-hero-icon { font-size: 1.1rem; color: var(--accent-light); margin-bottom: 0.2rem; } .ann-hero-title { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; } .ann-hero-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; margin-top: 0.1rem; } .ann-hero-meta { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.3rem; } @media (max-width: 640px) { .ann-hero-card { padding: 1.1rem 1.2rem; } .ann-hero-title { font-size: 1rem; } } .ann-bar-icon { color: var(--accent-light); font-size: 0.82rem; flex-shrink: 0; } .ann-bar-text { font-size: 0.87rem; color: var(--text-primary); font-weight: 500; line-height: 1.4; } .ann-bar-meta { font-size: 0.76rem; color: var(--text-muted); flex-shrink: 0; } @media (max-width: 640px) { .ann-bar-text { font-size: 0.8rem; } } .welcome-banner { max-width: 1400px; margin: 2rem auto 0; padding: 0 2.5rem; } .welcome-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent) 0%, color-mix(in srgb, var(--accent) 10%, transparent) 100%); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 16px; padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .welcome-text h2 { font-size: 1.2rem; font-weight: 700; } .welcome-text p { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem; } /* ── Divider ── */ .divider { height: 1px; background: var(--border); margin: 0 2.5rem; } /* ── Navbar Admin ── */ .nav-badge-admin { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; color: var(--accent-light); background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding: 0.2rem 0.6rem; border-radius: 100px; letter-spacing: 0.02em; white-space: nowrap; } /* ── Admin Stats Row ── */ .admin-stats-row { display: flex; gap: 1rem; padding: 1.5rem 2.5rem 0; max-width: 1400px; margin: 0 auto; } .admin-stat-card { display: flex; align-items: center; gap: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.5rem; min-width: 180px; } .admin-stat-icon { width: 42px; height: 42px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .admin-stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1; } .admin-stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.05em; } /* ── Admin Layout ── */ .admin-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.5rem 2.5rem 3rem; max-width: 1400px; margin: 0 auto; } @media (max-width: 900px) { .admin-layout { grid-template-columns: 1fr; } .admin-stats-row { flex-wrap: wrap; } } /* ── Admin Panel Card ── */ .admin-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .admin-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border); gap: 1rem; } .admin-panel-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; } .admin-panel-title i { color: var(--accent-light); } /* ── Site Settings ── */ .admin-sitename-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.75rem; padding: 1rem 1.4rem 1.25rem; } .admin-sitename-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .admin-sitename-label { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .admin-sitename-input { width: 100%; min-width: 0; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 10px; color: var(--text-primary); font: inherit; font-size: 0.95rem; line-height: 1.35; padding: 0.65rem 0.85rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .admin-sitename-input:focus { background: rgba(255,255,255,0.07); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .admin-settings-subsection { border-top: 1px solid var(--border); } .admin-settings-subtitle { display: flex; align-items: center; gap: 0.45rem; padding: 1rem 1.4rem 0; color: var(--text-primary); font-size: 0.86rem; font-weight: 800; } .admin-settings-subtitle i { color: var(--accent-light); } .admin-footer-form { padding-top: 0.75rem; } .new-code-banner-inline { margin: 0.75rem 1.4rem 0; border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 10px; } @media (max-width: 560px) { .admin-sitename-form { grid-template-columns: 1fr; align-items: stretch; padding: 0.95rem 1rem 1.1rem; } .admin-sitename-form .btn { width: 100%; justify-content: center; } .admin-settings-subtitle { padding-inline: 1rem; } .new-code-banner-inline { margin-inline: 1rem; } } /* ── New Code Banner ── */ .new-code-banner { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.4rem; background: color-mix(in srgb, var(--accent) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); flex-wrap: wrap; } .new-code-label { font-size: 0.78rem; font-weight: 600; color: var(--accent-light); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .new-code-value { font-family: 'Courier New', monospace; font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: 0.1em; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding: 0.3rem 0.8rem; border-radius: 8px; } /* ── Admin Table ── */ .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .admin-table th { text-align: left; padding: 0.7rem 1.2rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; } .admin-table td { padding: 0.75rem 1.2rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-primary); } .admin-table tr:last-child td { border-bottom: none; } .admin-table tr:hover td { background: rgba(255,255,255,0.02); } .td-muted { color: var(--text-muted) !important; font-size: 0.82rem; } /* ── Code Pill ── */ .code-pill { font-family: 'Courier New', monospace; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; color: var(--accent-light); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); padding: 0.25rem 0.6rem; border-radius: 6px; } /* ── Role Badges ── */ .role-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 100px; } .role-admin { color: var(--accent-light); background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .role-user { color: var(--text-secondary); background: rgba(255,255,255,0.05); border: 1px solid var(--border); } /* ── User Avatar ── */ .user-row { display: flex; align-items: center; gap: 0.65rem; } .user-avatar { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; color: #fff; flex-shrink: 0; } /* ── Admin Empty ── */ .admin-empty { padding: 2.5rem 1.4rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; } /* ── Admin Announcement Form & List ── */ .ann-form { padding: 1rem 1.4rem 0.5rem; border-bottom: 1px solid var(--border); } .ann-form-error { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 8px; padding: 0.5rem 0.9rem; font-size: 0.82rem; color: var(--accent-light); margin-bottom: 0.75rem; } .ann-form-row { display: flex; gap: 0.75rem; align-items: flex-start; } .ann-textarea { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 10px; color: var(--text-primary); font-size: 0.875rem; padding: 0.65rem 0.9rem; resize: vertical; min-height: 68px; outline: none; font-family: inherit; transition: border-color 0.2s; line-height: 1.5; } .ann-textarea:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .ann-textarea::placeholder { color: var(--text-muted); } .ann-char-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.4rem; text-align: right; } .ann-list { display: flex; flex-direction: column; gap: 0; } .ann-item { display: flex; align-items: flex-start; gap: 1rem; padding: 0.9rem 1.4rem; border-bottom: 1px solid var(--border); transition: background 0.15s; } .ann-item:last-child { border-bottom: none; } .ann-item:hover { background: rgba(255,255,255,0.02); } .ann-item-body { flex: 1; min-width: 0; } .ann-item-text { font-size: 0.875rem; color: var(--text-primary); margin: 0 0 0.3rem; line-height: 1.5; word-break: break-word; } .ann-item-meta { font-size: 0.75rem; color: var(--text-muted); } /* ── Admin stacked layout (replaces 2-col for wider tables) ── */ .admin-layout-stack { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 2.5rem 3rem; max-width: 1400px; margin: 0 auto; } @media (max-width: 768px) { .admin-layout-stack { padding: 1rem; } } /* ── Code pill small variant ── */ .code-pill-sm { font-size: 0.75rem; padding: 0.15rem 0.45rem; } /* ── Status badges ── */ .status-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 100px; } .status-active { color: #4ade80; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.25); } .status-banned { color: #f87171; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); } /* ── Banned row tint ── */ .row-banned td { opacity: 0.55; } .row-banned td:last-child, .row-banned td:nth-last-child(2) { opacity: 1; } /* ── Banned avatar ── */ .avatar-banned { background: linear-gradient(135deg, #ef4444, color-mix(in srgb, var(--accent) 72%, #000)) !important; } /* ── Dev Warning Page ── */ .dev-warning-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; position: relative; overflow: hidden; background: var(--bg-base); } .dev-warning-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .banned-glow { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 70%); } .dev-warning-card { position: relative; z-index: 1; text-align: center; max-width: 480px; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 3rem 2.5rem; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); } .banned-card { border-color: rgba(239, 68, 68, 0.2); } .dev-warning-icon { width: 72px; height: 72px; border-radius: 20px; background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--accent-light); margin: 0 auto 1.5rem; } .banned-icon { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); color: #f87171; } .dev-warning-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); padding: 0.3rem 0.9rem; border-radius: 100px; margin-bottom: 1.5rem; } .banned-badge { color: #f87171; background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.25); } .dev-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); display: inline-block; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } .dev-warning-title { font-size: 2.2rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 0.75rem; background: linear-gradient(135deg, var(--accent-light), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .dev-warning-message { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; margin-bottom: 2rem; } .dev-warning-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* ── No API Notice ── */ .no-api-notice { text-align: center; padding: 2.5rem 2rem; background: rgba(251, 191, 36, 0.05); border: 1px solid rgba(251, 191, 36, 0.15); border-radius: 14px; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.7; } .no-api-notice code { font-family: 'Courier New', monospace; background: rgba(255,255,255,0.08); padding: 0.15rem 0.45rem; border-radius: 4px; font-size: 0.85em; color: var(--accent-light); } /* ── Detail Hero ── */ .detail-hero { width: 100%; height: 52vh; min-height: 360px; max-height: 560px; position: relative; overflow: hidden; background: var(--bg-surface); } .detail-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; } .detail-hero-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent) 0%, color-mix(in srgb, var(--accent) 15%, transparent) 100%); } .detail-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(8,8,15,0.95) 0%, rgba(8,8,15,0.55) 55%, rgba(8,8,15,0.2) 100%), linear-gradient(to top, rgba(8,8,15,1) 0%, transparent 45%); } /* ── Detail Container & Layout ── */ .detail-container { max-width: 1300px; margin: -130px auto 0; padding: 0 2.5rem 4rem; position: relative; z-index: 1; } .detail-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: start; } .detail-poster { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.75); border: 1px solid var(--border); position: sticky; top: calc(var(--navbar-h) + 1.5rem); } .detail-poster img { width: 100%; display: block; } .detail-poster-placeholder { aspect-ratio: 2/3; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 900; color: rgba(255,255,255,0.25); } /* ── Detail Info ── */ .detail-info { padding-top: 0.5rem; } .detail-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; } .detail-title { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 0.4rem; } .detail-tagline { font-size: 0.975rem; color: var(--text-secondary); font-style: italic; margin-bottom: 1.25rem; } .detail-meta-row { display: flex; align-items: center; gap: 0.7rem 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .detail-meta-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--text-secondary); } .detail-meta-item i { color: var(--accent-light); font-size: 0.78rem; } /* Rotten Tomatoes / IMDb rating chips */ .detail-rating-chip { background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 999px; padding: 0.22rem 0.55rem 0.22rem 0.28rem; line-height: 1; white-space: nowrap; } .detail-rt, .detail-imdb { font-weight: 700; color: var(--text-primary); } .detail-rt .rt-tag { background: #fa320a; color: #fff; font-weight: 900; font-size: 0.68rem; padding: 0.12rem 0.32rem; border-radius: 999px; letter-spacing: 0; } .detail-imdb .imdb-tag { background: #f5c518; color: #000; font-weight: 800; font-size: 0.7rem; padding: 0.05rem 0.32rem; border-radius: 0.25rem; letter-spacing: 0.02em; } .detail-rating { display: flex; align-items: center; gap: 0.4rem; font-size: 1.15rem; font-weight: 800; color: #fbbf24; } .detail-genres { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .detail-genre-tag { padding: 0.3rem 0.9rem; border-radius: 100px; font-size: 0.775rem; font-weight: 600; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .detail-desc { font-size: 0.975rem; color: var(--text-secondary); line-height: 1.8; max-width: 680px; margin-bottom: 2rem; } /* ── Cast / Characters Section ── */ .detail-section { max-width: 1300px; margin: 0 auto 3rem; padding: 0 2.5rem; } .detail-section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.6rem; } .cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1rem; } .cast-card { text-align: center; } .cast-photo { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); margin-bottom: 0.5rem; } .cast-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .cast-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--text-muted); } .cast-name { font-size: 0.75rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cast-character { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Detail Actions ── */ .detail-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* ── Responsive (detail) ── */ @media (max-width: 768px) { .detail-layout { grid-template-columns: 1fr; } .detail-poster { position: static; max-width: 160px; margin: 0 auto; } .detail-container { padding: 0 1rem 3rem; margin-top: -80px; } .detail-section { padding: 0 1rem; } .card-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } /* ══════════════════════════════════════════════════════════════ Watch Page ══════════════════════════════════════════════════════════════ */ .watch-page { background: #000; padding-top: 0; } .watch-player-wrap { background: #000; padding-top: var(--navbar-h); } .watch-player-inner { max-width: 1300px; margin: 0 auto; } /* Video container — forced 16:9 */ .watch-video-container { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; } .watch-video-container video, .watch-video-container .plyr { position: absolute; inset: 0; width: 100%; height: 100%; } /* Loading overlay shown while fetching stream */ .watch-init-overlay { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: #06060e; color: var(--text-secondary); font-size: 0.9rem; transition: opacity 0.3s ease; } .watch-init-overlay.hidden { opacity: 0; pointer-events: none; } /* Mid-playback buffering overlay */ .watch-buffer-overlay { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); pointer-events: none; } /* Spinner */ .watch-spinner { width: 44px; height: 44px; border: 3px solid color-mix(in srgb, var(--accent) 20%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Ellipsis dots animation */ .ellipsis::after { content: ''; animation: dots 1.4s steps(4, end) infinite; } @keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } /* Download progress bar */ .dl-progress-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 220px; } .dl-progress-track { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; } .dl-progress-bar { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s ease; } .dl-progress-label { font-size: 0.78rem; color: var(--text-secondary); letter-spacing: 0.03em; } /* ── Info Bar ── */ .watch-info-bar { background: var(--bg-surface); border-bottom: 1px solid var(--border); } .watch-info-inner { max-width: 1300px; margin: 0 auto; padding: 1.75rem 2rem; display: flex; flex-direction: column; gap: 1.75rem; } /* Title block */ .watch-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-light); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; } .watch-title { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.1; } .watch-episode-label { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 0.4rem; min-height: 1.4em; } .watch-episode-label i { color: var(--accent-light); font-size: 0.78rem; } /* ── Episode / Season selectors ── */ .watch-selectors { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; } .watch-select-group { display: flex; flex-direction: column; gap: 0.4rem; } .watch-select-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; } .watch-select-label i { color: var(--accent-light); } .watch-select { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; font-weight: 500; padding: 0.55rem 2rem 0.55rem 0.9rem; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b8aa8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; transition: border-color 0.2s ease, box-shadow 0.2s ease; max-width: 320px; } .watch-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .watch-select:disabled { opacity: 0.45; cursor: not-allowed; } /* ── Quality section ── */ .watch-quality-section { display: flex; flex-direction: column; gap: 0.75rem; } .watch-quality-header { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); } .watch-quality-header i { color: var(--accent-light); } .watch-provider-badge { font-size: 0.68rem; font-weight: 700; color: var(--accent-light); background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding: 0.1rem 0.55rem; border-radius: 100px; letter-spacing: 0.02em; text-transform: none; } .watch-quality-hint { font-size: 0.75rem; font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; margin-left: auto; } /* Sub/Dub switch (anime, shown only when both languages exist) */ .watch-langtoggle { display: inline-flex; gap: 2px; padding: 2px; border-radius: 100px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); } .watch-lang-btn { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); background: transparent; border: 0; padding: 0.12rem 0.6rem; border-radius: 100px; cursor: pointer; transition: background 0.15s, color 0.15s; } .watch-lang-btn:hover { color: var(--text); } .watch-lang-btn.active { color: #fff; background: var(--accent); } .watch-server-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; min-height: 40px; } /* Skeleton placeholder while loading quality */ .watch-quality-skeleton { display: flex; gap: 0.6rem; } .watch-quality-skeleton span { display: inline-block; width: 72px; height: 38px; border-radius: 10px; background: linear-gradient(90deg, var(--bg-card) 25%, rgba(255,255,255,0.04) 50%, var(--bg-card) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } @keyframes shimmer { to { background-position: -200% 0; } } /* Quality buttons */ .server-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .server-btn:hover { border-color: var(--accent); color: var(--text-primary); background: color-mix(in srgb, var(--accent) 10%, transparent); } .server-btn.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-light); box-shadow: 0 0 12px var(--accent-glow); } .server-btn-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; background: rgba(255,255,255,0.08); font-size: 0.72rem; font-weight: 800; flex-shrink: 0; } .server-btn.active .server-btn-num { background: var(--accent); color: #fff; } .server-btn-label { flex: 1; } .server-btn-check { font-size: 0.7rem; opacity: 0; transition: opacity 0.2s ease; color: var(--accent-light); } .server-btn.active .server-btn-check { opacity: 1; } /* No sources notice */ .no-servers-notice { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.2rem; border-radius: 10px; border: 1px dashed var(--border); background: rgba(255,255,255,0.02); color: var(--text-muted); font-size: 0.85rem; font-style: italic; } .no-servers-notice i { opacity: 0.6; } /* ── Footer bar ── */ .watch-footer-bar { background: var(--bg-base); } .watch-footer-inner { max-width: 1300px; margin: 0 auto; padding: 1.25rem 2rem; display: flex; align-items: center; gap: 1rem; } .watch-error-msg { font-size: 0.82rem; color: #f87171; font-weight: 500; } /* ── Plyr theme — follows the active accent (html[data-accent]) ── */ :root { --plyr-color-main: var(--accent); --plyr-video-background: #000; --plyr-video-controls-background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); --plyr-control-radius: 6px; --plyr-range-thumb-background: var(--accent); --plyr-range-fill-background: var(--accent); --plyr-video-range-track-background: rgba(255,255,255,0.2); --plyr-control-icon-size: 17px; --plyr-font-size-base: 14px; --plyr-font-size-small: 12px; --plyr-control-spacing: 10px; } /* Controls bar */ .plyr--video .plyr__controls { padding: 8px 12px 10px; gap: 4px; align-items: center; } /* All control buttons */ .plyr__control { border-radius: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background 0.15s, transform 0.1s; } .plyr__control:hover, .plyr__control:focus-visible { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; transform: scale(1.08); } .plyr__control[aria-pressed=true], .plyr__control.plyr__tab-focus { background: color-mix(in srgb, var(--accent) 18%, transparent) !important; } /* Big play button overlay */ .plyr__control--overlaid { background: color-mix(in srgb, var(--accent) 88%, transparent) !important; border-radius: 50% !important; width: 68px !important; height: 68px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); transition: background 0.15s, transform 0.15s, box-shadow 0.15s; } .plyr__control--overlaid:hover { background: var(--accent) !important; transform: scale(1.1) !important; box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent); } .plyr__control--overlaid svg { width: 28px !important; height: 28px !important; position: relative !important; left: 2px; /* optical compensation for play triangle */ top: 0 !important; transform: none !important; } /* Progress bar */ .plyr--full-ui input[type=range] { color: var(--accent); } .plyr__progress input[type=range]::-webkit-slider-thumb { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } .plyr__progress__buffer { background: rgba(255,255,255,0.15); } /* Volume range */ .plyr__volume input[type=range] { color: var(--accent); } /* Tooltip */ .plyr__tooltip { background: rgba(18,18,24,0.95); color: #fff; border-radius: 6px; font-size: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .plyr__tooltip::before { border-top-color: rgba(18,18,24,0.95); } /* Settings (cogwheel) menu */ .plyr__menu__container { background: rgba(14,14,20,0.97) !important; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important; border-radius: 10px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important; backdrop-filter: blur(12px); min-width: 180px; overflow: hidden; } .plyr__menu__container::after { display: none; } .plyr__menu__container [role=menu] { padding: 4px; } /* Menu items */ .plyr__menu__container .plyr__control { color: rgba(255,255,255,0.9) !important; border-radius: 6px !important; font-size: 13px; padding: 7px 10px; } .plyr__menu__container .plyr__control:hover, .plyr__menu__container .plyr__control[aria-checked=true] { background: color-mix(in srgb, var(--accent) 18%, transparent) !important; color: #fff !important; } .plyr__menu__container .plyr__control[aria-checked=true]::after { background: var(--accent) !important; border-radius: 50%; } /* Menu heading (Quality / Speed labels) */ .plyr__menu__container .plyr__menu__value { color: var(--accent); font-weight: 600; } /* Back button arrow in submenus */ .plyr__menu__container [data-plyr=back] { border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 4px; border-radius: 0 !important; color: rgba(255,255,255,0.6) !important; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .plyr__menu__container [data-plyr=back]:hover { color: #fff !important; } /* Menu divider */ .plyr__menu__container [role=menuitemradio]::before { border-color: rgba(255,255,255,0.1); } /* Captions button (hidden if unused) */ .plyr__controls__item.plyr__menu { margin-left: auto; } /* Time */ .plyr__time { color: rgba(255,255,255,0.85); font-size: 13px; font-variant-numeric: tabular-nums; } .plyr__time + .plyr__time::before { color: rgba(255,255,255,0.4); } /* Fullscreen button glow on hover */ .plyr__controls [data-plyr=fullscreen]:hover svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 70%, transparent)); } /* ── Watch Responsive ── */ @media (max-width: 768px) { .watch-info-inner { padding: 1.25rem 1rem; gap: 1.25rem; } .watch-footer-inner { padding: 1rem; } .watch-quality-hint { display: none; } .watch-select { max-width: 100%; } } /* ── Navbar dropdown ── */ .nav-profile-dropdown { position: relative; } .nav-profile-btn { display: flex; align-items: center; gap: 0.5rem; background: none; border: none; cursor: pointer; color: var(--text-primary); padding: 0.25rem 0.5rem; border-radius: 8px; transition: background 0.15s; font-size: 0.9rem; } .nav-profile-btn:hover { background: rgba(255,255,255,0.06); } .nav-dropdown-caret { font-size: 0.65rem; color: var(--text-muted); transition: transform 0.2s; } .nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; min-width: 260px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); z-index: 1000; overflow: hidden; padding: 0.4rem 0; } .nav-dropdown-menu.open { display: block; } .nav-dropdown-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 1rem; color: var(--text-primary); text-decoration: none; font-size: 0.88rem; background: none; border: none; width: 100%; cursor: pointer; text-align: left; transition: background 0.15s; } .nav-dropdown-item:hover { background: rgba(255,255,255,0.05); } .nav-dropdown-item i { width: 16px; text-align: center; color: var(--text-muted); } .nav-dropdown-logout { color: #f87171; } .nav-dropdown-logout i { color: #f87171; } .nav-dropdown-logout:hover { background: rgba(239,68,68,0.08); } .nav-dropdown-admin { color: var(--accent-light); } .nav-dropdown-admin i { color: var(--accent-light); } .nav-dropdown-admin:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .nav-dropdown-divider { height: 1px; background: var(--border); margin: 0.3rem 0; } .nav-dropdown-section-head { padding: 0.5rem 1rem 0.35rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); display: flex; align-items: center; gap: 0.4rem; } .nav-dropdown-empty, .nav-dropdown-loading { padding: 0.65rem 1rem; font-size: 0.82rem; color: var(--text-muted); font-style: italic; } .nav-dropdown-more { padding: 0.4rem 1rem; font-size: 0.78rem; color: var(--text-muted); } .nav-bookmark-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 1rem; text-decoration: none; color: var(--text-primary); transition: background 0.15s; } .nav-bookmark-item:hover { background: rgba(255,255,255,0.05); } .nav-bookmark-poster { width: 32px; height: 44px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,0.06); } .nav-bookmark-poster img { width: 100%; height: 100%; object-fit: cover; } .nav-bookmark-poster-placeholder { width: 100%; height: 100%; } .nav-bookmark-info { min-width: 0; } .nav-bookmark-title { font-size: 0.83rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; } .nav-bookmark-type { font-size: 0.72rem; color: var(--text-muted); text-transform: capitalize; margin-top: 0.15rem; } /* ── Bookmark button state ── */ .btn-bookmark.is-bookmarked { color: var(--accent-light); border-color: var(--accent); } /* ── Navbar avatar ── */ .nav-user-profile { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--text-primary); transition: opacity 0.2s; } .nav-user-profile:hover { opacity: 0.8; } .nav-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); flex-shrink: 0; } .nav-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--accent-light); flex-shrink: 0; } /* ── Profile page ── */ .profile-page { max-width: 980px; margin: 0 auto; padding: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; } /* Wide sections span the full width; the short forms pair up two-per-row so the page stops stacking into one tall column. */ .profile-page > .alert, .profile-avatar-section, #appearance { grid-column: 1 / -1; } .profile-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; } .profile-avatar-section { display: flex; align-items: center; gap: 2rem; } .profile-avatar-label { position: relative; cursor: pointer; display: block; width: 100px; height: 100px; border-radius: 50%; flex-shrink: 0; overflow: hidden; border: 3px solid var(--accent); } .profile-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: 50%; } .profile-avatar-placeholder { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); font-size: 2.5rem; } .profile-avatar-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; opacity: 0; transition: opacity 0.2s; color: #fff; font-size: 0.75rem; font-weight: 500; } .profile-avatar-label:hover .profile-avatar-overlay { opacity: 1; } .profile-avatar-overlay i { font-size: 1.25rem; } .profile-identity { display: flex; flex-direction: column; gap: 0.35rem; } .profile-display-name { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .profile-username { font-size: 0.9rem; color: var(--text-muted); } .profile-role-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; width: fit-content; } .role-admin { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-light); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .role-user { background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid var(--border); } .profile-section-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.35rem; display: flex; align-items: center; gap: 0.5rem; } .profile-section-title i { color: var(--accent-light); } .profile-section-desc { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 1.25rem; } .profile-form { display: flex; flex-direction: column; gap: 1rem; } .profile-form-row { display: flex; gap: 0.75rem; align-items: center; } .profile-form-row .form-input { flex: 1; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-label { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); } .form-input { background: var(--bg-base); border: 1px solid var(--border); border-radius: 8px; padding: 0.65rem 0.9rem; color: var(--text-primary); font-size: 0.9rem; transition: border-color 0.2s; outline: none; width: 100%; box-sizing: border-box; } .form-input:focus { border-color: var(--accent); } .alert { padding: 0.9rem 1.25rem; border-radius: 10px; font-size: 0.88rem; font-weight: 500; display: flex; align-items: center; gap: 0.6rem; } .alert-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; } .alert-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #86efac; } @media (max-width: 760px) { .profile-page { grid-template-columns: 1fr; } } @media (max-width: 600px) { .profile-page { padding: 1rem; } .profile-avatar-section { flex-direction: column; align-items: center; text-align: center; } .profile-role-badge { margin: 0 auto; } .profile-form-row { flex-direction: column; } .profile-form-row .btn { width: 100%; } } .profile-bio-input { width: 100%; resize: vertical; min-height: 90px; } /* ══════════════════════════════════════════════════════════════ PUBLIC PROFILE PAGE ══════════════════════════════════════════════════════════════ */ .profile-public-page { max-width: 1200px; margin: 0 auto; padding: 2rem; /* Two clean rows on big screens: row 1 → identity card + taste (favorite-genre charts), side by side row 2 → the bookmark collection, full width */ display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1.5rem 2rem; align-items: start; } .profile-public-card { grid-column: 1; grid-row: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; } .profile-pub-genres-section { grid-column: 2; grid-row: 1; } .profile-pub-bookmarks-section { grid-column: 1 / -1; grid-row: 2; } .profile-pub-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; } .profile-pub-avatar-wrap { position: relative; flex-shrink: 0; } .profile-pub-avatar { display: block; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; object-position: center center; aspect-ratio: 1 / 1; border: 3px solid var(--border); background: var(--bg-surface); } .profile-pub-avatar--placeholder { display: flex; align-items: center; justify-content: center; background: var(--bg-surface); color: var(--text-muted); font-size: 2.5rem; border: 3px solid var(--border); } .profile-pub-admin-ring { position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent); pointer-events: none; } .profile-pub-identity { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .profile-pub-name-row { display: flex; align-items: center; gap: 6px; } .profile-pub-display-name { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); } .profile-pub-display-name--admin { background: linear-gradient(135deg, var(--accent-2), var(--accent-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .profile-pub-admin-stars { color: var(--accent); font-size: 0.9rem; } .profile-pub-username { font-size: 0.9rem; color: var(--text-secondary); } .profile-pub-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.25rem; } .profile-pub-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; border: 1px solid; } .profile-pub-badge--admin { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-light); } .profile-pub-badge--user { background: rgba(255,255,255,0.05); border-color: var(--border); color: var(--text-secondary); } .profile-pub-badge--date { background: rgba(255,255,255,0.04); border-color: var(--border); color: var(--text-muted); } .profile-pub-bio-section { background: var(--bg-surface); border-radius: 12px; padding: 1.25rem 1.5rem; border: 1px solid var(--border); } .profile-pub-bio-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 6px; } .profile-pub-bio { font-size: 0.95rem; line-height: 1.6; color: var(--text-primary); } .profile-pub-bio--filler { color: var(--text-muted); font-style: italic; } @media (max-width: 820px) { .profile-public-page { grid-template-columns: 1fr; } .profile-public-card, .profile-pub-genres-section, .profile-pub-bookmarks-section { grid-column: 1; grid-row: auto; } } @media (max-width: 600px) { .profile-public-page { padding: 1rem; } .profile-pub-name-row { justify-content: center; } .profile-pub-badges { justify-content: center; } } /* ── Public profile — bookmark list ─────────────────────────── */ .profile-pub-bookmarks-section { max-width: none; margin: 1.25rem 0 0; padding: 0 0 2rem; } .profile-pub-section-header { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.25rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); } .profile-pub-bk-count { margin-left: auto; background: var(--surface-2); color: var(--text-muted); font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; } .profile-pub-bk-empty { color: var(--text-muted); font-style: italic; text-align: center; padding: 2rem 0; } .profile-pub-bk-group { margin-bottom: 2rem; } .profile-pub-bk-group-label { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; } .profile-pub-bk-group-count { background: var(--surface-2); color: var(--text-muted); font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; } .profile-pub-bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .75rem; } .profile-pub-bk-card { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; color: inherit; border-radius: 8px; overflow: hidden; background: var(--surface-1); border: 1px solid var(--border); transition: transform .15s, border-color .15s; } .profile-pub-bk-card:hover { transform: translateY(-3px); border-color: var(--accent); } .profile-pub-bk-poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; } .profile-pub-bk-poster--placeholder { aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-muted); font-size: 1.5rem; } .profile-pub-bk-info { padding: .35rem .45rem .45rem; display: flex; flex-direction: column; gap: .25rem; } .profile-pub-bk-title { font-size: .75rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .profile-pub-bk-status { font-size: .65rem; font-weight: 600; display: flex; align-items: center; gap: .25rem; } .profile-pub-bk-status--watching { color: #3b82f6; } .profile-pub-bk-status--completed { color: #22c55e; } .profile-pub-bk-status--plan_to_watch { color: var(--text-muted); } @media (max-width: 600px) { .profile-pub-bookmarks-section { padding: 0 1rem 2rem; } .profile-pub-bk-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); } } /* ── Sidebar name links ─────────────────────────────────────── */ .sb-name-link { color: inherit; text-decoration: none; transition: color 0.15s; } .sb-name-link:hover { color: var(--accent-light); text-decoration: underline; } .sb-profile-link { display: contents; text-decoration: none; } /* ══════════════════════════════════════════════════════════════ BOOKMARKS PAGE ══════════════════════════════════════════════════════════════ */ .bk-page { max-width: 1300px; margin: 0 auto; padding: 1.5rem 2rem 3rem; } /* ── Tabs ── */ .bk-tabs { display: flex; gap: 0.4rem; margin-bottom: 2rem; flex-wrap: wrap; } .bk-tab { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .bk-tab:hover { border-color: var(--accent); color: var(--text-primary); } .bk-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; } .bk-tab-count { background: rgba(255,255,255,0.18); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.72rem; font-weight: 700; } /* ── Section ── */ .bk-section { margin-bottom: 2.5rem; } .bk-section-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1.25rem; display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); } .bk-section-title i { color: var(--accent-light); } /* ── Genre group ── */ .bk-genre-group { margin-bottom: 1.75rem; } .bk-genre-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 0.85rem; display: flex; align-items: center; gap: 0.6rem; } .bk-genre-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── Card grid ── */ .bk-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 1.1rem; } /* ── Card ── */ .bk-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: border-color 0.2s, transform 0.2s; display: flex; flex-direction: column; } .bk-card:hover { border-color: var(--accent); transform: translateY(-2px); } /* ── Poster area ── */ .bk-card-poster-wrap { position: relative; aspect-ratio: 2/3; overflow: hidden; background: rgba(255,255,255,0.04); flex-shrink: 0; } .bk-card-poster-link { display: block; width: 100%; height: 100%; } .bk-card-poster-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; } .bk-card:hover .bk-card-poster-img { transform: scale(1.04); } .bk-card-poster-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--text-muted); opacity: 0.35; } .bk-card-hover-play { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; font-size: 1.6rem; color: #fff; pointer-events: none; } .bk-card:hover .bk-card-hover-play { opacity: 1; } /* Status badge on poster */ .bk-card-status-badge { position: absolute; bottom: 0.45rem; left: 0.45rem; border-radius: 999px; font-size: 0.65rem; font-weight: 700; padding: 0.18rem 0.5rem; display: flex; align-items: center; gap: 0.25rem; pointer-events: none; } .badge-done { background: rgba(34,197,94,0.88); color: #fff; } .badge-plan { background: rgba(239,68,68,0.88); color: #fff; } /* Progress bar on poster bottom */ .bk-progress-bar-track { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.15); } .bk-progress-bar-fill { height: 100%; background: var(--accent); } /* ── X delete button ── */ .bk-x-btn { position: absolute; top: 0.35rem; right: 0.35rem; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s, background 0.15s; z-index: 10; } .bk-card:hover .bk-x-btn { opacity: 1; } .bk-x-btn:hover { background: rgba(239,68,68,0.85); color: #fff; border-color: transparent; } /* ── Card body ── */ .bk-card-body { padding: 0.6rem 0.65rem 0.55rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; } .bk-card-title { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; } .bk-card-title:hover { color: var(--accent-light); } .bk-card-progress-info { font-size: 0.72rem; color: var(--accent-light); display: flex; align-items: center; gap: 0.3rem; } .bk-card-progress-info.bk-done { color: #86efac; } .bk-card-progress-info.bk-none { color: var(--text-muted); font-style: italic; } /* ── Status row (3 small buttons) ── */ .bk-status-row { display: flex; gap: 0.3rem; margin-top: auto; padding-top: 0.35rem; } .bk-status-btn { flex: 1; padding: 0.25rem 0.2rem; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 0.65rem; font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-status-btn:hover { border-color: var(--accent); color: var(--text-primary); } .bk-status-btn.active { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); color: var(--accent-light); } /* ── Responsive ── */ @media (max-width: 768px) { .bk-page { padding: 1rem 1rem 2rem; } .bk-card-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; } .bk-x-btn { opacity: 1; } } @media (max-width: 480px) { .bk-card-grid { grid-template-columns: repeat(3, 1fr); } } /* ═══════════════════════════════════════════════════════ Online Presence Sidebar ═══════════════════════════════════════════════════════ */ :root { --online-tab-w: 40px; --online-panel-w: 272px; } /* Pulse dot */ .online-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; position: relative; } .online-pulse-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgba(34, 197, 94, 0.35); animation: onlinePulse 2s ease-in-out infinite; } .online-pulse-dot--lg { width: 10px; height: 10px; } @keyframes onlinePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0; transform: scale(2.2); } } /* Wrapper — translateX so only the tab is visible by default */ .online-sidebar-wrapper { position: fixed; right: 0; top: var(--navbar-h); bottom: 0; width: calc(var(--online-tab-w) + var(--online-panel-w)); display: flex; align-items: stretch; z-index: 950; transform: translateX(var(--online-panel-w)); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .online-sidebar-wrapper.open { transform: translateX(0); } /* Tab button — always shows at the right edge */ .online-tab { width: var(--online-tab-w); flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 14px 0 10px; gap: 8px; background: rgba(17, 17, 24, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-left: 1px solid var(--border); border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-bottom: 1px solid var(--border); border-right: none; border-radius: 10px 0 0 10px; cursor: pointer; pointer-events: all; transition: background 0.2s, border-color 0.2s; } .online-tab:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .online-tab-freq-notif { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 800; line-height: 1; border-radius: 9px; box-shadow: 0 0 0 2px rgba(17, 17, 24, 0.9), 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); animation: freq-notif-pop 0.3s ease; } .online-tab-chat-notif { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-light); font-size: 0.85rem; animation: chat-notif-pulse 1.4s ease-in-out infinite; order: 0; } @keyframes chat-notif-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } .panel-tab-chat-badge { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-light); font-size: 0.6rem; margin-left: 4px; animation: chat-notif-pulse 1.4s ease-in-out infinite; } @keyframes freq-notif-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .online-tab-count { font-size: 0.78rem; font-weight: 700; color: #22c55e; line-height: 1; } .online-tab-icon { font-size: 0.85rem; color: var(--text-secondary); } .online-tab-arrow { font-size: 0.7rem; color: var(--text-muted); margin-top: auto; margin-bottom: 4px; transition: transform 0.3s ease, color 0.2s; } .online-tab:hover .online-tab-arrow { color: var(--accent-light); } /* Panel */ .online-panel { flex: 1; background: rgba(17, 17, 24, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-left: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); pointer-events: all; display: flex; flex-direction: column; overflow: hidden; } /* Section headers (Currently Online / Group Chat) */ .online-section-hdr { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--border); flex-shrink: 0; background: rgba(17, 17, 24, 0.97); } .online-section-hdr--chat { border-top: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-light); } .online-users-list { padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 6px; max-height: 210px; overflow-y: auto; flex-shrink: 0; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .online-loading, .online-empty { padding: 20px 10px; text-align: center; font-size: 0.8rem; color: var(--text-muted); } /* ── User Cards ── */ /* ── Sidebar avatars ── */ .sb-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); } .sb-avatar--placeholder { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.07); color: var(--text-muted); font-size: 0.8rem; } .sb-avatar--sm { width: 26px; height: 26px; font-size: 0.65rem; } .online-user-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .online-user { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: row; align-items: flex-start; gap: 8px; transition: border-color 0.2s; } .online-user:hover { border-color: rgba(255, 255, 255, 0.12); } .online-user-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .online-username { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .online-role-badge { font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.05em; } .online-role-user { background: rgba(139, 138, 168, 0.15); color: var(--text-secondary); border: 1px solid rgba(139, 138, 168, 0.2); } .online-role-admin { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); } .online-user-watching, .online-user-browsing { display: flex; align-items: flex-start; gap: 5px; font-size: 0.75rem; color: var(--text-secondary); line-height: 1.35; } .online-user-watching i, .online-user-browsing i { color: var(--accent-light); font-size: 0.7rem; margin-top: 2px; flex-shrink: 0; } .online-watching-title { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .online-watching-ep { color: var(--text-muted); } /* ── Admin Card — sparkly ── */ .online-user-admin { background: linear-gradient(135deg, rgba(17, 17, 24, 0.9), color-mix(in srgb, var(--accent) 8%, transparent), rgba(251, 191, 36, 0.05)); border: 1px solid rgba(251, 191, 36, 0.28); position: relative; overflow: hidden; } .online-user-admin::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(251, 191, 36, 0.05) 50%, transparent 100%); animation: adminScan 4s linear infinite; pointer-events: none; } @keyframes adminScan { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .online-user-name-row { display: flex; align-items: center; gap: 4px; overflow: hidden; min-width: 0; } /* Sparkle stars */ .admin-star { font-size: 0.65rem; color: #fbbf24; flex-shrink: 0; animation: starTwinkle 1.8s ease-in-out infinite; display: inline-block; } .admin-star:last-child { animation-delay: 0.9s; } @keyframes starTwinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); } 50% { opacity: 0.4; transform: scale(0.7) rotate(20deg); } } /* Shimmering gradient admin username */ @keyframes adminShimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } .admin-name-text { background: linear-gradient(90deg, #ffd700 0%, #ff79c6 18%, var(--accent-light) 36%, #60a5fa 54%, #34d399 72%, #ffd700 100% ); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: adminShimmer 3.5s linear infinite; font-weight: 700; font-size: 0.875rem; overflow: hidden; text-overflow: clip; white-space: nowrap; } /* ── Chat messages ── */ .chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 6px; display: flex; flex-direction: column; gap: 5px; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .chat-empty { padding: 20px 6px; text-align: center; font-size: 0.78rem; color: var(--text-muted); font-style: italic; } .chat-msg { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px 6px; display: flex; flex-direction: row; align-items: flex-start; gap: 7px; flex-shrink: 0; } .chat-msg-avatar { margin-top: 1px; flex-shrink: 0; } .chat-msg-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .chat-msg-header { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .chat-msg-name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; } .chat-msg-name-admin { display: inline-flex; align-items: center; gap: 3px; } .chat-role-badge { font-size: 0.58rem !important; padding: 1px 5px !important; } .chat-msg-time { font-size: 0.68rem; color: var(--text-muted); margin-left: auto; white-space: nowrap; flex-shrink: 0; } .chat-msg-body { font-size: 0.8rem; color: var(--text-primary); line-height: 1.45; word-break: break-word; overflow-wrap: break-word; } /* Admin chat message */ .chat-msg-admin { background: linear-gradient(135deg, rgba(17, 17, 24, 0.9), color-mix(in srgb, var(--accent) 7%, transparent), rgba(251, 191, 36, 0.04)); border: 1px solid rgba(251, 191, 36, 0.22); position: relative; overflow: hidden; } .chat-msg-admin::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.04), transparent); animation: adminScan 5s linear infinite; pointer-events: none; } /* ── Chat input area ── */ .chat-input-area { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); background: rgba(17, 17, 24, 0.98); } .chat-input { flex: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 0.82rem; padding: 6px 10px; outline: none; transition: border-color 0.2s; min-width: 0; } .chat-input:focus { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); } .chat-input::placeholder { color: var(--text-muted); } .chat-send-btn { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: var(--accent); border: none; color: #fff; font-size: 0.78rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.1s; } .chat-send-btn:hover { background: var(--accent-hover); } .chat-send-btn:active { transform: scale(0.93); } .chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Emoji picker ── */ .emoji-wrap { position: relative; flex-shrink: 0; } .emoji-trigger { width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; line-height: 1; } .emoji-trigger:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); } .emoji-picker { display: none; position: absolute; bottom: calc(100% + 8px); left: 0; width: 224px; background: var(--bg-card); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 12px; padding: 8px; grid-template-columns: repeat(7, 1fr); gap: 2px; z-index: 20; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); animation: emojiIn 0.15s ease; } .emoji-picker.open { display: grid; } @keyframes emojiIn { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .emoji-item { width: 30px; height: 30px; border: none; background: transparent; font-size: 1.1rem; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: background 0.12s, transform 0.1s; line-height: 1; } .emoji-item:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.2); } /* ── Mobile: sidebar moves to bottom ─────────────────────────── */ @media (max-width: 768px) { :root { --online-panel-h: 75vh; } /* Full-screen backdrop */ .mob-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1048; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .mob-backdrop.open { display: block; opacity: 1; pointer-events: all; } /* Wrapper: just a floating bubble anchor — no dimensions, bottom-right */ .online-sidebar-wrapper { top: auto !important; left: auto !important; right: 20px !important; bottom: 24px !important; width: auto !important; height: auto !important; transform: none !important; overflow: visible !important; flex-direction: column !important; align-items: flex-end !important; pointer-events: none; z-index: 1049; } /* Chat bubble button */ .online-tab { width: 56px !important; height: 56px !important; border-radius: 50% !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding: 0 !important; gap: 0 !important; border: none !important; background: var(--accent) !important; box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 50%, transparent) !important; pointer-events: all; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .online-tab:active { transform: scale(0.92) !important; } .online-sidebar-wrapper.open .online-tab { background: color-mix(in srgb, var(--accent) 30%, transparent) !important; box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 25%, transparent) !important; } /* Show only the icon in bubble; hide other elements */ .online-tab-count, .online-pulse-dot, .online-tab-arrow { display: none !important; } .online-tab-icon { font-size: 1.3rem !important; color: #fff !important; display: block !important; } /* Notification badges on bubble */ .online-tab-freq-notif { position: absolute !important; top: -4px; right: -4px; min-width: 18px; height: 18px; display: none; /* shown via JS */ } .online-tab-chat-notif { position: absolute !important; top: -4px; left: -4px; font-size: 0.75rem !important; display: none; /* shown via JS */ animation: chat-notif-pulse 1.4s ease-in-out infinite; } /* Panel: slides up from bottom, full-width */ .online-panel { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: var(--online-panel-h) !important; z-index: 1049; flex: none !important; border-left: none !important; border-right: none !important; border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important; border-bottom: none !important; border-radius: 20px 20px 0 0 !important; transform: translateY(110%) !important; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: all; overflow-y: auto !important; } .online-sidebar-wrapper.open .online-panel { transform: translateY(0) !important; } /* Remove pseudo-backdrop */ .online-sidebar-wrapper::before { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ RED THEME ANIMATIONS ═══════════════════════════════════════════════════════════════ */ /* ── Orb float ───────────────────────────────────────────────── */ @keyframes orbFloat { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -40px) scale(1.08); } 66% { transform: translate(-20px, 20px) scale(0.95); } 100% { transform: translate(0, 0) scale(1); } } @keyframes orbFloat2 { 0% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-35px, 30px) scale(1.1); } 75% { transform: translate(25px, -25px) scale(0.92); } 100% { transform: translate(0, 0) scale(1); } } @keyframes orbFloat3 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, 40px) scale(1.06); } 100% { transform: translate(0, 0) scale(1); } } /* ── Hero title shimmer ─────────────────────────────────────── */ @keyframes titleShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ── Hero fade-up ────────────────────────────────────────────── */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* ── Card entrance ───────────────────────────────────────────── */ @keyframes cardIn { from { opacity: 0; transform: translateY(30px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Dot glow pulse ──────────────────────────────────────────── */ @keyframes dotGlow { 0%, 100% { box-shadow: 0 0 4px 2px color-mix(in srgb, var(--accent) 50%, transparent); } 50% { box-shadow: 0 0 12px 5px color-mix(in srgb, var(--accent) 90%, transparent); } } /* ═══════════════════════════════════════════════════════════════ ANIMATED HERO ═══════════════════════════════════════════════════════════════ */ .hero { position: relative; overflow: hidden; background: var(--bg-base); } /* Background orbs */ .hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; } .hero-orb-1 { width: 520px; height: 520px; top: -180px; left: -140px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%); animation: orbFloat 14s ease-in-out infinite; } .hero-orb-2 { width: 420px; height: 420px; top: 40px; right: -100px; background: radial-gradient(circle, rgba(190, 18, 60, 0.18) 0%, transparent 70%); animation: orbFloat2 18s ease-in-out infinite; } .hero-orb-3 { width: 340px; height: 340px; bottom: -80px; left: 40%; background: radial-gradient(circle, rgba(244, 63, 94, 0.14) 0%, transparent 70%); animation: orbFloat3 22s ease-in-out infinite; } .hero > *:not(.hero-orb) { position: relative; z-index: 1; } /* Animated hero title */ .hero-title-animated { background: linear-gradient( 120deg, #ff6b6b 0%, var(--accent) 20%, var(--accent-light) 40%, #fff1f2 55%, var(--accent-light) 70%, var(--accent) 85%, #ff6b6b 100% ); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: titleShimmer 4s linear infinite; } /* Staggered card entrance */ .cards-grid .card, .content-grid .card, .grid .card, .media-grid .card { animation: cardIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .cards-grid .card:nth-child(1), .content-grid .card:nth-child(1), .grid .card:nth-child(1), .media-grid .card:nth-child(1) { animation-delay: 0.05s; } .cards-grid .card:nth-child(2), .content-grid .card:nth-child(2), .grid .card:nth-child(2), .media-grid .card:nth-child(2) { animation-delay: 0.10s; } .cards-grid .card:nth-child(3), .content-grid .card:nth-child(3), .grid .card:nth-child(3), .media-grid .card:nth-child(3) { animation-delay: 0.15s; } .cards-grid .card:nth-child(4), .content-grid .card:nth-child(4), .grid .card:nth-child(4), .media-grid .card:nth-child(4) { animation-delay: 0.20s; } .cards-grid .card:nth-child(5), .content-grid .card:nth-child(5), .grid .card:nth-child(5), .media-grid .card:nth-child(5) { animation-delay: 0.25s; } .cards-grid .card:nth-child(6), .content-grid .card:nth-child(6), .grid .card:nth-child(6), .media-grid .card:nth-child(6) { animation-delay: 0.30s; } .cards-grid .card:nth-child(n+7), .content-grid .card:nth-child(n+7), .grid .card:nth-child(n+7), .media-grid .card:nth-child(n+7) { animation-delay: 0.35s; } /* Hero content fade-up */ .hero-content { animation: heroFadeUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both 0.1s; } /* Glowing accent dot */ .accent-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: dotGlow 2s ease-in-out infinite; vertical-align: middle; margin: 0 4px; } /* Card hover glow */ .card:hover { box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 25%, transparent), 0 2px 8px rgba(0,0,0,0.4); } /* Section header accent line */ .section-header::after, .page-header::after { content: ''; display: block; width: 48px; height: 3px; background: linear-gradient(90deg, var(--accent), transparent); border-radius: 2px; margin-top: 8px; } /* ═══════════════════════════════════════════════════════════════ FRIENDS SYSTEM ═══════════════════════════════════════════════════════════════ */ /* ── Friends Page ─────────────────────────────────────────────── */ .friends-page { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } .friends-hero { margin-bottom: 2.5rem; animation: heroFadeUp 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .friends-page-title { font-size: 2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.4rem; } .friends-page-title i { color: var(--accent); margin-right: 0.4rem; } .friends-page-sub { color: var(--text-secondary); font-size: 0.95rem; } .friends-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; margin-bottom: 1.5rem; animation: cardIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .friends-section-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .friends-section-title i { color: var(--accent); } .friends-badge { background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 100px; min-width: 18px; text-align: center; } /* Search */ .friends-search-wrap { position: relative; margin-bottom: 1rem; } .friends-search-input { width: 100%; padding: 0.65rem 1rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text-primary); font-size: 0.95rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; } .friends-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .friends-search-spinner { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); } .friends-search-results { display: flex; flex-direction: column; gap: 0.5rem; } .friends-result-item { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.75rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; gap: 0.75rem; } .friends-result-info { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; } .friends-result-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .friends-result-role { font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .friends-role-admin { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .friends-role-user { background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid var(--border); } .friends-rel-tag { font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.65rem; border-radius: 100px; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; } .friends-rel-friends { background: rgba(34, 197, 94, 0.12); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.25); } .friends-rel-pending { background: rgba(234, 179, 8, 0.12); color: #fbbf24; border: 1px solid rgba(234, 179, 8, 0.25); } /* Request / friend rows */ .friends-list { display: flex; flex-direction: column; gap: 0.5rem; } .friends-req-item, .friends-friend-item, .friends-sent-item { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.75rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; gap: 0.75rem; } .friends-req-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .friends-req-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); } .friends-req-time { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; } .friends-req-actions { display: flex; gap: 0.4rem; flex-shrink: 0; } .friends-req-btn { width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.1s; } .friends-req-btn:disabled { opacity: 0.5; cursor: not-allowed; } .friends-req-accept { background: rgba(34, 197, 94, 0.15); color: #4ade80; } .friends-req-accept:hover { background: rgba(34, 197, 94, 0.3); transform: scale(1.1); } .friends-req-decline { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-light); } .friends-req-decline:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); transform: scale(1.1); } .friends-remove-btn { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-light); padding: 0.3rem 0.65rem; border-radius: 8px; cursor: pointer; font-size: 0.82rem; transition: background 0.15s; flex-shrink: 0; } .friends-remove-btn:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } .friends-remove-btn:disabled { opacity: 0.5; cursor: not-allowed; } .friends-empty { text-align: center; color: var(--text-muted); font-size: 0.88rem; padding: 1rem 0; } /* ── Sidebar Panel Tab Bar ────────────────────────────────────── */ .panel-tab-bar { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--border); background: rgba(17, 17, 24, 0.98); } .panel-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 6px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 0.74rem; font-weight: 600; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; position: relative; } .panel-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.04); } .panel-tab--active { color: var(--accent-light); border-bottom-color: var(--accent); } .panel-tab-freq-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; background: var(--accent); color: #fff; font-size: 0.62rem; font-weight: 800; border-radius: 8px; line-height: 1; } .panel-tab-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; } /* ── Friends Tab: Search ──────────────────────────────────────── */ .friends-search-wrap-sb { position: relative; padding: 8px 10px 6px; flex-shrink: 0; } .friends-search-input-sb { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 0.8rem; padding: 6px 30px 6px 10px; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .friends-search-input-sb:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .friends-search-input-sb::placeholder { color: var(--text-muted); } .sb-search-spinner { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.75rem; } #sbSearchResults { flex-shrink: 0; max-height: 160px; overflow-y: auto; padding: 0 8px 4px; } .sb-result-item { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 8px; animation: cardIn 0.2s ease both; } .sb-result-item:hover { background: rgba(255,255,255,0.04); } .sb-result-name { font-size: 0.82rem; color: var(--text-primary); font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-action-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border: none; border-radius: 7px; font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s; } .sb-action-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sb-add-btn { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); } .sb-add-btn:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); transform: scale(1.04); } .sb-accept-btn { background: rgba(34, 197, 94, 0.15); color: #4ade80; } .sb-accept-btn:hover { background: rgba(34, 197, 94, 0.28); transform: scale(1.04); } .sb-rel-tag { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 0.71rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; } .sb-rel-friends { background: rgba(34,197,94,0.12); color: #4ade80; } .sb-rel-pending { background: rgba(250,204,21,0.12); color: #facc15; } /* ── Friends Tab: Friends List ────────────────────────────────── */ .online-section-hdr--friendlist { margin-top: 2px; } .sb-friends-list { flex: 1; overflow-y: auto; padding: 4px 8px 8px; } .sb-friend-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; animation: cardIn 0.2s ease both; } .sb-friend-item:hover { background: rgba(255,255,255,0.04); } .sb-friend-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .sb-friend-name { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-friend-since { font-size: 0.68rem; color: var(--text-muted); } .sb-remove-btn { flex-shrink: 0; background: color-mix(in srgb, var(--accent) 10%, transparent); border: none; border-radius: 7px; color: var(--accent-light); padding: 5px 7px; cursor: pointer; font-size: 0.78rem; transition: background 0.15s, transform 0.1s; } .sb-remove-btn:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); transform: scale(1.08); } .sb-remove-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sb-empty { text-align: center; color: var(--text-muted); font-size: 0.8rem; padding: 12px 0; } /* ── Sidebar Friend Request Notifications ─────────────────────── */ .sidebar-friend-reqs { border-bottom: 1px solid var(--border); padding-bottom: 2px; flex-shrink: 0; } .online-section-hdr--requests { background: color-mix(in srgb, var(--accent) 8%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent); } .sidebar-freq-badge { margin-left: auto; background: var(--accent); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 100px; min-width: 16px; text-align: center; } .sidebar-freq-list { max-height: 180px; overflow-y: auto; padding: 4px 0; } .sidebar-freq-item { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.04); animation: cardIn 0.3s ease both; } .sidebar-freq-name { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.3; } .sidebar-freq-name strong { color: var(--text-primary); } .sidebar-freq-actions { display: flex; gap: 0.4rem; } .sidebar-freq-btn { flex: 1; padding: 0.3rem; border: none; border-radius: 7px; cursor: pointer; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.1s; } .sidebar-freq-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sidebar-freq-accept { background: rgba(34, 197, 94, 0.15); color: #4ade80; } .sidebar-freq-accept:hover { background: rgba(34, 197, 94, 0.28); transform: scale(1.05); } .sidebar-freq-decline { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-light); } .sidebar-freq-decline:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); transform: scale(1.05); } /* Tab pulse when new request arrives while closed */ @keyframes tabPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); } } .online-sidebar-wrapper.freq-pulse .online-tab { animation: tabPulse 0.6s ease 3; } /* ── Sidebar Toast ─────────────────────────────────────────────── */ .sidebar-toast { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 1rem; font-size: 0.8rem; color: var(--text-primary); white-space: nowrap; opacity: 0; transition: opacity 0.3s, transform 0.3s; z-index: 200; pointer-events: none; max-width: 220px; text-align: center; white-space: normal; } .sidebar-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .sidebar-toast-success { border-color: rgba(34, 197, 94, 0.4); color: #4ade80; } .sidebar-toast-info { border-color: color-mix(in srgb, var(--accent) 30%, transparent); } /* ══════════════════════════════════════════════════════════════ WATCH WITH OTHERS — button on solo watch page ══════════════════════════════════════════════════════════════ */ .btn-w2g { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; border: none; border-radius: 8px; padding: 0.45rem 1rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s, transform 0.1s; display: inline-flex; align-items: center; gap: 0.4rem; } .btn-w2g:hover { opacity: 0.88; } .btn-w2g:active { transform: scale(0.97); } .btn-w2g:disabled { opacity: 0.5; cursor: not-allowed; } .btn-report { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3); border-radius: 6px; padding: .35rem .75rem; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; } .btn-report:hover { background: rgba(239,68,68,.25); border-color: rgba(239,68,68,.5); } .btn-report:disabled, .btn-report.reported { opacity: .6; cursor: default; background: rgba(74,222,128,.12); color: #4ade80; border-color: rgba(74,222,128,.3); } /* ── Admin reports section ────────────────────────────────── */ .admin-reports-section { max-width: 900px; margin: 2rem auto; padding: 0 1.5rem 3rem; } .admin-panel-header { margin-bottom: 1rem; } .admin-reports-badge { display: inline-flex; align-items: center; justify-content: center; background: #f87171; color: #fff; font-size: .7rem; font-weight: 700; min-width: 1.2rem; height: 1.2rem; border-radius: 999px; padding: 0 .3rem; margin-left: .4rem; vertical-align: middle; } .admin-empty-msg { color: var(--text-muted); display: flex; align-items: center; gap: .5rem; padding: 1rem 0; } .admin-reports-list { display: flex; flex-direction: column; gap: 1.25rem; } .admin-report-group { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .admin-report-group-title { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: var(--surface-2); font-size: .9rem; border-bottom: 1px solid var(--border); } .admin-report-type-badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; padding: .1rem .4rem; border-radius: 4px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: #f87171; } .admin-report-count { margin-left: auto; font-size: .75rem; color: var(--text-muted); } .admin-reports-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .admin-reports-table th { text-align: left; padding: .5rem 1rem; color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); } .admin-reports-table td { padding: .55rem 1rem; border-bottom: 1px solid var(--border); } .admin-reports-table tr:last-child td { border-bottom: none; } .admin-report-user { color: var(--accent); text-decoration: none; font-weight: 600; } .admin-report-user:hover { text-decoration: underline; } .admin-report-time { color: var(--text-muted); font-size: .78rem; } .admin-btn-danger-sm { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.25); border-radius: 5px; padding: .25rem .5rem; cursor: pointer; font-size: .78rem; transition: background .15s; } .admin-btn-danger-sm:hover { background: rgba(239,68,68,.25); } /* ══════════════════════════════════════════════════════════════ WATCH2GETHER — full layout ══════════════════════════════════════════════════════════════ */ :root { --w2g-accent: #6366f1; --w2g-accent-dim: rgba(99, 102, 241, 0.18); --w2g-sidebar-bg: #0e0c1a; --w2g-border: rgba(99, 102, 241, 0.18); } .w2g-layout { display: flex; min-height: calc(100vh - var(--navbar-h)); padding-top: var(--navbar-h); background: var(--bg-base); } /* ── Video column ─────────────────────────────────────────── */ .w2g-video-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background: #080610; } .w2g-player-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; } .w2g-player-wrap video { width: 100%; height: 100%; display: block; } .w2g-init-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.75); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--text-secondary); font-size: 0.9rem; z-index: 10; } .w2g-init-overlay.hidden { display: none; } /* Host-left dissolved state */ .w2g-init-overlay.w2g-overlay--dissolved { background: rgba(0,0,0,.88); } .w2g-init-overlay.w2g-overlay--dissolved #overlayMsg { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; } .w2g-host-left-icon { font-size: 2.5rem; color: var(--accent-light); opacity: .85; } .w2g-host-left-icon i { animation: w2g-door-shake 0.5s ease both; } @keyframes w2g-door-shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(5deg); } 100%{ transform: rotate(0deg); } } .w2g-overlay--dissolved strong { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); } .w2g-host-left-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.15rem; } .w2g-overlay-ready-count { font-size: 0.82rem; color: rgba(255,255,255,.55); letter-spacing: 0.03em; } .w2g-start-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.6rem; background: var(--w2g-accent); color: #fff; border: none; border-radius: 2rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s; margin-top: 0.25rem; } .w2g-start-btn:hover { background: #4f46e5; transform: scale(1.04); } .w2g-start-btn:active { transform: scale(0.97); } .w2g-start-btn.all-ready { animation: w2g-pulse-green 1s ease-in-out infinite; } @keyframes w2g-pulse-green { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); background: #22c55e; } } .w2g-buffer-overlay { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); pointer-events: none; } .w2g-spinner { width: 40px; height: 40px; border: 3px solid rgba(99,102,241,.25); border-top-color: var(--w2g-accent); border-radius: 50%; animation: w2g-spin 0.7s linear infinite; } @keyframes w2g-spin { to { transform: rotate(360deg); } } .w2g-sync-badge { position: absolute; top: 0.8rem; left: 50%; transform: translateX(-50%); background: rgba(99,102,241,.85); color: #fff; font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.85rem; border-radius: 99px; display: flex; align-items: center; gap: 0.35rem; z-index: 20; pointer-events: none; } /* ── Video meta bar ───────────────────────────────────────── */ .w2g-video-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.2rem 0.5rem; border-bottom: 1px solid var(--w2g-border); } .w2g-media-type { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--w2g-accent); } .w2g-media-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0.15rem 0 0.1rem; } .w2g-ep-label { font-size: 0.78rem; color: var(--text-secondary); } .w2g-video-meta-right { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .w2g-role-badge { font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 99px; } .w2g-role-badge.host { background: rgba(251,191,36,.15); color: #fbbf24; } .w2g-role-badge.viewer { background: var(--w2g-accent-dim); color: var(--w2g-accent); } .w2g-viewer-count { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.3rem; } /* ── Source bar ───────────────────────────────────────────── */ .w2g-source-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1.2rem; border-bottom: 1px solid var(--w2g-border); flex-wrap: wrap; } .w2g-source-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; } .w2g-server-grid { display: flex; gap: 0.4rem; flex-wrap: wrap; } .w2g-server-skeleton { display: flex; gap: 0.4rem; } .w2g-server-skeleton span { width: 72px; height: 32px; background: var(--bg-card); border-radius: 6px; animation: pulse 1.4s ease-in-out infinite; } .w2g-server-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.65rem; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; } .w2g-server-btn:hover { border-color: var(--w2g-accent); color: var(--text-primary); } .w2g-server-btn.active { border-color: var(--w2g-accent); color: var(--w2g-accent); background: var(--w2g-accent-dim); } .w2g-server-num { font-weight: 800; font-size: 0.8rem; } .w2g-server-check { display: none; } .w2g-server-btn.active .w2g-server-check { display: inline; } .w2g-source-hint { font-size: 0.72rem; color: var(--text-muted); margin-left: auto; } /* ── Footer bar ───────────────────────────────────────────── */ .w2g-footer-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.2rem; flex-wrap: wrap; } .btn-w2g-invite { background: var(--w2g-accent-dim); color: var(--w2g-accent); border: 1px solid rgba(99,102,241,.35); border-radius: 8px; padding: 0.4rem 0.9rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; transition: background 0.2s; } .btn-w2g-invite:hover { background: rgba(99,102,241,.28); } /* ── Sidebar ──────────────────────────────────────────────── */ .w2g-sidebar { width: 320px; flex-shrink: 0; background: var(--w2g-sidebar-bg); border-left: 1px solid var(--w2g-border); display: flex; flex-direction: column; overflow: hidden; } /* ── Members ──────────────────────────────────────────────── */ .w2g-members-section { padding: 0.75rem 1rem; border-bottom: 1px solid var(--w2g-border); } .w2g-section-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.4rem; } .w2g-member-count-pill { margin-left: auto; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-light); font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 1rem; letter-spacing: 0; } .w2g-members-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--w2g-border) transparent; } .w2g-member-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.3rem 0.5rem; border-radius: 0.5rem; transition: background 0.15s; } .w2g-member-item:hover { background: rgba(255,255,255,.04); } /* avatar wrapper holds the circle + crown badge */ .w2g-member-avatar-wrap { position: relative; flex-shrink: 0; } .w2g-member-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--w2g-accent); color: #fff; font-size: 0.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Crown badge overlaid on avatar bottom-right */ .w2g-avatar-crown { position: absolute; bottom: -2px; right: -3px; background: #1a1a2e; border-radius: 50%; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; color: #fbbf24; } .w2g-member-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .w2g-member-name { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .w2g-member-role-label { font-size: 0.67rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .w2g-member-role-label.is-host { color: #fbbf24; } .w2g-member-role-label.is-viewer { color: var(--text-muted); } /* ── Chat ─────────────────────────────────────────────────── */ .w2g-chat-section { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0.65rem 1rem 0; } .w2g-chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.45rem; padding-bottom: 0.5rem; scrollbar-width: thin; scrollbar-color: var(--w2g-border) transparent; } .w2g-chat-msg { font-size: 0.8rem; line-height: 1.4; word-break: break-word; } .w2g-chat-name { font-weight: 700; color: var(--w2g-accent); margin-right: 0.3em; } .w2g-chat-text { color: var(--text-primary); } .w2g-chat-form { display: flex; gap: 0.4rem; padding: 0.6rem 0; border-top: 1px solid var(--w2g-border); margin-top: auto; } .w2g-chat-input { flex: 1; background: rgba(99,102,241,.07); border: 1px solid var(--w2g-border); border-radius: 8px; padding: 0.4rem 0.7rem; font-size: 0.82rem; color: var(--text-primary); outline: none; transition: border-color 0.2s; } .w2g-chat-input:focus { border-color: var(--w2g-accent); } .w2g-chat-input::placeholder { color: var(--text-muted); } .w2g-chat-send { background: var(--w2g-accent); border: none; border-radius: 8px; padding: 0 0.7rem; color: #fff; font-size: 0.82rem; cursor: pointer; transition: opacity 0.2s; } .w2g-chat-send:hover { opacity: 0.85; } /* ── Invite Modal ─────────────────────────────────────────── */ .w2g-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .w2g-modal { background: var(--bg-card); border: 1px solid var(--w2g-border); border-radius: 14px; width: 100%; max-width: 420px; overflow: hidden; } .w2g-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--w2g-border); } .w2g-modal-header h3 { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; } .w2g-modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 0.2rem; transition: color 0.2s; } .w2g-modal-close:hover { color: var(--text-primary); } .w2g-modal-body { padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; } .w2g-invite-link-row { display: flex; flex-direction: column; gap: 0.35rem; } .w2g-invite-link-label { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .w2g-invite-link-box { display: flex; gap: 0.4rem; } .w2g-invite-link-input { flex: 1; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.7rem; font-size: 0.78rem; color: var(--text-secondary); outline: none; } .w2g-invite-section-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .w2g-friend-search { width: 100%; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.7rem; font-size: 0.82rem; color: var(--text-primary); outline: none; transition: border-color 0.2s; } .w2g-friend-search:focus { border-color: var(--w2g-accent); } .w2g-friend-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; max-height: 200px; overflow-y: auto; } .w2g-friend-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0; } .w2g-friend-name { flex: 1; font-size: 0.85rem; color: var(--text-primary); } .w2g-friend-empty { font-size: 0.82rem; color: var(--text-muted); text-align: center; padding: 0.6rem 0; } .w2g-invite-send-btn { background: var(--w2g-accent-dim); color: var(--w2g-accent); border: 1px solid rgba(99,102,241,.3); border-radius: 6px; padding: 0.25rem 0.65rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; transition: background 0.2s; } .w2g-invite-send-btn:hover { background: rgba(99,102,241,.28); } .w2g-invite-send-btn:disabled { opacity: 0.55; cursor: default; } /* ── Controls blocker (viewers) ──────────────────────────── */ /* Viewer cinema mode: host controls everything. Hide playback controls entirely. */ .w2g-viewer-locked .plyr__control--overlaid { display: none !important; } .w2g-viewer-locked .plyr__controls [data-plyr="play"], .w2g-viewer-locked .plyr__controls [data-plyr="rewind"], .w2g-viewer-locked .plyr__controls [data-plyr="fast-forward"] { display: none !important; } .w2g-viewer-locked .plyr__progress { pointer-events: none; cursor: default; } .w2g-viewer-locked .plyr__progress input[type="range"] { pointer-events: none; } /* ── Chat bubbles (Watch2Gether) ─────────────────────────── */ .w2g-chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.4rem 0 0.5rem; scrollbar-width: thin; scrollbar-color: var(--w2g-border) transparent; } .w2g-chat-bubble { display: flex; gap: 0.5rem; align-items: flex-start; animation: w2g-bubble-in 0.18s ease; } @keyframes w2g-bubble-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .w2g-bubble-avatar { width: 28px; height: 28px; border-radius: 50%; font-size: 0.72rem; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .w2g-bubble-body { flex: 1; min-width: 0; } .w2g-bubble-header { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.15rem; } .w2g-bubble-name { font-size: 0.75rem; font-weight: 700; } .w2g-bubble-time { font-size: 0.65rem; color: var(--text-muted); flex-shrink: 0; } .w2g-bubble-text { font-size: 0.82rem; color: var(--text-primary); line-height: 1.4; word-break: break-word; background: rgba(99,102,241,.08); border-radius: 0 8px 8px 8px; padding: 0.3rem 0.55rem; display: inline-block; max-width: 100%; } /* System messages (join/leave) */ .w2g-chat-system { font-size: 0.72rem; color: var(--text-muted); font-style: italic; text-align: center; padding: 0.1rem 0; } /* Chat form */ .w2g-chat-input-row { display: flex; gap: 0.4rem; } /* ── Party tab badge on toggle button ───────────────────── */ .online-tab-party-notif { position: absolute; top: -4px; left: -4px; background: #6366f1; color: #fff; font-size: 0.55rem; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; animation: freq-pop 0.3s cubic-bezier(.36,.07,.19,.97); } .panel-tab-party-badge { background: #6366f1; color: #fff; font-size: 0.62rem; font-weight: 700; padding: 0.08rem 0.4rem; border-radius: 99px; margin-left: 0.2rem; vertical-align: middle; } .panel-tab--has-badge { position: relative; } /* Party pulse on toggle button */ .online-sidebar-wrapper.party-pulse .online-tab { animation: party-glow 0.6s ease 0s 3 alternate; } @keyframes party-glow { from { box-shadow: 0 0 0 0 rgba(99,102,241,0); } to { box-shadow: 0 0 12px 4px rgba(99,102,241,0.55); } } /* ── Party invite items ──────────────────────────────────── */ .party-empty { font-size: 0.8rem; color: var(--text-muted); text-align: center; padding: 1.2rem 0; } .party-invite-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.8rem; background: var(--w2g-accent-dim); border: 1px solid rgba(99,102,241,.22); border-radius: 10px; margin-bottom: 0.5rem; animation: w2g-bubble-in 0.2s ease; } .party-invite-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(99,102,241,.25); color: #818cf8; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; } .party-invite-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .party-invite-from { font-size: 0.7rem; color: var(--text-muted); } .party-invite-title { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .party-invite-actions { display: flex; gap: 0.3rem; flex-shrink: 0; } .party-join-btn { background: #6366f1; color: #fff; border: none; border-radius: 6px; padding: 0.3rem 0.65rem; font-size: 0.73rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; transition: opacity 0.2s; } .party-join-btn:hover { opacity: 0.85; } .party-dismiss-btn { background: rgba(255,255,255,.07); color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.5rem; font-size: 0.73rem; cursor: pointer; transition: color 0.2s, background 0.2s; } .party-dismiss-btn:hover { color: var(--text-primary); background: rgba(255,255,255,.12); } /* ── System chat messages ────────────────────────────────── */ /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 900px) { .w2g-layout { flex-direction: column; } .w2g-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--w2g-border); max-height: 420px; } .w2g-members-list { max-height: 110px; } } @media (max-width: 600px) { .w2g-video-meta { flex-direction: column; gap: 0.4rem; } .w2g-video-meta-right { flex-direction: row; } } /* ═══════════════════════════════════════════════════════════════ HOME PAGE — BREAKING BAD FULL-PAGE BG + ANNOUNCEMENTS ═══════════════════════════════════════════════════════════════ */ /* Keyframes */ @keyframes homeAnnIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } } @keyframes homeHeroFade { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes particleDrift { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; } 50% { transform: translateY(-28px) scale(1.2); opacity: 0.9; } } @keyframes shimmerSlide { from { background-position: 200% center; } to { background-position: -200% center; } } /* ── Body override for home page ─────────────────────────────── */ body.home-body { background-color: transparent; background-image: url('https://image.tmdb.org/t/p/original/tsRy63Mu5cu8etL1X7ZLyf7UP1M.jpg'); background-size: cover; background-position: center 20%; background-repeat: no-repeat; background-attachment: fixed; } body.home-body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 8, 0.52) 0%, rgba(10, 6, 8, 0.42) 50%, rgba(10, 6, 8, 0.75) 100% ), linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent) 0%, rgba(100, 0, 25, 0.18) 40%, transparent 100% ); z-index: 0; pointer-events: none; } /* ── Full-page layout ─────────────────────────────────────────── */ .home-page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--navbar-h) + 3rem); padding-bottom: 4rem; } /* Particles */ .home-hero-particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; } .particle { position: absolute; border-radius: 50%; background: var(--accent); animation: particleDrift ease-in-out infinite; } .p1 { width: 6px; height: 6px; left: 12%; top: 35%; animation-duration: 7s; opacity: 0.5; } .p2 { width: 4px; height: 4px; left: 28%; top: 60%; animation-duration: 9s; animation-delay: 1.2s; opacity: 0.3; } .p3 { width: 8px; height: 8px; left: 55%; top: 25%; animation-duration: 11s; animation-delay: 0.5s; opacity: 0.45; } .p4 { width: 5px; height: 5px; left: 72%; top: 55%; animation-duration: 8s; animation-delay: 2s; opacity: 0.35; } .p5 { width: 3px; height: 3px; left: 85%; top: 30%; animation-duration: 13s; animation-delay: 0.8s; opacity: 0.4; } .p6 { width: 7px; height: 7px; left: 40%; top: 70%; animation-duration: 10s; animation-delay: 1.8s; opacity: 0.28; } /* ── Announcements ─────────────────────────────────────────────── */ .home-ann-section { position: relative; z-index: 2; width: 100%; display: flex; justify-content: flex-start; margin-bottom: 0; } .home-ann-wrapper { width: 100%; max-width: none; } .home-ann-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .home-ann-icon-wrap { width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); display: flex; align-items: center; justify-content: center; color: var(--accent-light); font-size: 0.85rem; flex-shrink: 0; } .home-ann-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-light); } .home-ann-list { display: flex; flex-direction: column; gap: 0.85rem; } .home-ann-item { animation: homeAnnIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .home-ann-item-inner { display: flex; align-items: flex-start; gap: 1.1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%, rgba(10, 6, 8, 0.72) 100% ); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 14px; padding: 1.2rem 1.6rem; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; } .home-ann-item-inner:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 6px 28px color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-2px); } .home-ann-item-left { flex-shrink: 0; padding-top: 2px; } .home-ann-num { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 25%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); font-size: 0.75rem; font-weight: 700; color: var(--accent-light); } .home-ann-item-body { flex: 1; min-width: 0; } .home-ann-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.3rem; line-height: 1.35; } .home-ann-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 0.4rem; } .home-ann-meta { font-size: 0.75rem; color: var(--text-muted); } /* ── Hero text + CTA ──────────────────────────────────────────── */ .home-hero-content-wrap { position: relative; z-index: 2; width: 100%; display: flex; justify-content: center; align-items: center; } .home-hero-content { width: 80%; max-width: 900px; text-align: center; display: flex; flex-direction: column; align-items: center; animation: homeHeroFade 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both 0.2s; } .home-hero-title { font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin-bottom: 1.2rem; } .home-hero-title-line1 { display: inline; font-size: clamp(2.4rem, 5.5vw, 4.2rem); background: linear-gradient(120deg, #fff1f2 0%, var(--accent-light) 30%, var(--accent) 60%, var(--accent-light) 80%, #fff1f2 100%); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmerSlide 5s linear infinite; } .home-hero-title-line2 { display: inline; font-size: clamp(2.4rem, 5.5vw, 4.2rem); color: var(--text-primary); } .home-hero-sub { font-size: 1.05rem; color: rgba(245, 240, 242, 0.65); margin-bottom: 2.2rem; line-height: 1.7; } .home-hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 768px) { .home-hero-content { width: 92%; } .home-hero-title-line2 { font-size: clamp(2rem, 8vw, 2.8rem); } .home-ann-item-inner { padding: 1rem 1.1rem; } .home-ann-title { font-size: 0.97rem; } } @media (max-width: 480px) { .home-hero-content { width: 96%; } } /* ── Home page navbar — fully opaque like scrolled state ─────── */ body.home-body .navbar { background: rgba(8, 8, 15, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); } /* ── Home page footer — matches navbar (no transparency) ─────── */ body.home-body .footer { position: relative; z-index: 2; background: #080810 !important; border-top: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.6); } /* ── Pagination ──────────────────────────────────────────────── */ .pagination { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: 2rem 0 1rem; flex-wrap: wrap; } .pagination-btn, .pagination-page { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .6rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; text-decoration: none; transition: background .15s, color .15s, border-color .15s; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); background: rgba(255,255,255,.04); color: var(--text-secondary); } .pagination-btn:hover, .pagination-page:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); color: var(--text-primary); } .pagination-page--active { background: var(--accent); border-color: var(--accent); color: #fff; pointer-events: none; } .pagination-btn--disabled { opacity: .35; pointer-events: none; cursor: default; } .pagination-ellipsis { color: var(--text-muted); font-size: .875rem; padding: 0 .25rem; user-select: none; } /* ── Genre pie chart ─────────────────────────────────────────── */ .genre-charts-wrap { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: .75rem; } .genre-chart-card { flex: 1 1 280px; max-width: 400px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem; padding: 1.1rem 1.25rem 1.25rem; } .genre-chart-header { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: .9rem; display: flex; align-items: center; gap: .45rem; } .genre-chart-header i { color: var(--accent-light); } .genre-chart-body { display: flex; align-items: center; gap: 1.25rem; } .genre-pie-canvas { flex-shrink: 0; width: 120px; height: 120px; } .genre-legend { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: .3rem; } .genre-legend-item { display: flex; align-items: center; gap: .45rem; font-size: .8rem; } .genre-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .genre-legend-name { flex: 1; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .genre-legend-pct { font-weight: 600; color: var(--text-primary); font-size: .78rem; white-space: nowrap; } @media (max-width: 480px) { .genre-chart-card { max-width: 100%; } .genre-pie-canvas { width: 100px; height: 100px; } } /* ═══════════════════════════════════════════════════════════════════════════ ✦ MARCFLIX REDESIGN 2026 ✦ Cinematic home, animated content rows, per-user personalization. Appended last so it wins on equal specificity. ═══════════════════════════════════════════════════════════════════════════ */ ::selection { background: var(--accent); color: #fff; } /* ── Scroll reveal (only active once JS marks body ready → no-JS safe) ────── */ body.mf-reveal-ready.mf-anim [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } body.mf-reveal-ready.mf-anim [data-reveal].in { opacity: 1; transform: none; } body.mf-reveal-ready.mf-anim [data-reveal][data-reveal-delay] { transition-delay: var(--rd, 0s); } /* ── Button polish (subtle, safe global overrides) ───────────────────────── */ .btn { transition: transform .2s var(--ease-out), box-shadow .25s, background .25s, color .25s, border-color .25s; } .btn:active { transform: translateY(1px) scale(.985); } .btn-primary { box-shadow: 0 10px 26px -8px var(--accent-glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -8px var(--accent-glow); } .btn-play { background: #fff; color: #160a0f; font-weight: 800; border: 0; } .btn-play:hover { background: var(--accent-light); color: #160a0f; transform: translateY(-2px); } .btn-glass { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .btn-glass:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); } .btn-glass.is-bookmarked { background: var(--accent); border-color: var(--accent); } /* ── Home: hero bleeds beneath a transparent navbar ──────────────────────── */ /* Neutralize the old centered-welcome layout (fixed bg image, overlay, centering) */ body.home-body { background-image: none !important; background-color: var(--bg-base) !important; background-attachment: scroll !important; } body.home-body::before { display: none !important; content: none !important; } body.home-body .navbar:not(.scrolled) { background: linear-gradient(180deg, rgba(6,4,6,.82), rgba(6,4,6,.14) 70%, transparent) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom-color: transparent !important; box-shadow: none !important; } .home-page { padding: 0 0 4rem !important; display: block !important; min-height: 100vh; } .hero { position: relative; min-height: min(92vh, 880px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } /* Must beat the legacy `.hero > *:not(.hero-orb){position:relative;z-index:1}` rule (0,2,0). */ .home-page .hero-slides { position: absolute; inset: 0; z-index: 0; } .home-page .hero-controls { position: absolute; z-index: 4; } .hero-slides { position: absolute; inset: 0; z-index: 0; } .hero-slide { position: absolute; inset: 0; opacity: 0; display: flex; align-items: flex-end; transition: opacity 1s var(--ease-out); } .hero-slide.active { opacity: 1; } .hero-media { position: absolute; inset: 0; overflow: hidden; background: var(--bg-base); } .hero-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transform: scale(1.06); animation: heroKen 20s ease-in-out infinite alternate; } @keyframes heroKen { from { transform: scale(1.04) translate(-1%, -1%); } to { transform: scale(1.13) translate(1%, 0); } } .hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; } .hero-video.ready { opacity: 1; } .hero-video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; min-width: 177.78vh; min-height: 100%; border: 0; pointer-events: none; } /* Transparent shield (added by main.js) that sits over the trailer iframe and swallows all pointer events, so the YouTube control overlay never surfaces. */ .hero-video-shield { position: absolute; inset: 0; z-index: 2; background: transparent; cursor: default; } .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(8,5,7,.94) 0%, rgba(8,5,7,.58) 40%, rgba(8,5,7,0) 72%), linear-gradient(0deg, var(--bg-base) 1%, rgba(10,6,8,.25) 32%, transparent 58%), radial-gradient(120% 75% at 82% 8%, var(--accent-glow) 0%, transparent 55%); } .hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 7vh, 5rem); } .hero-stage { max-width: 720px; } .hero-badges { display: flex; gap: .6rem; align-items: center; margin-bottom: 1.1rem; flex-wrap: wrap; } .hero-trending { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--gradient-1); padding: .42rem .85rem; border-radius: 100px; box-shadow: 0 6px 20px var(--accent-glow); } .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: mfpulse 1.6s infinite; } @keyframes mfpulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } .hero-kind { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-light); background: var(--accent-glow); border: 1px solid var(--border-hover); padding: .36rem .7rem; border-radius: 100px; } .hero-title { font-size: clamp(2.3rem, 6vw, 4.8rem); font-weight: 900; line-height: 1.02; letter-spacing: -.03em; margin-bottom: 1rem; text-shadow: 0 4px 40px rgba(0,0,0,.55); } .hero-meta { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; color: var(--text-secondary); font-weight: 600; font-size: .95rem; margin-bottom: 1.05rem; } .hero-meta .star { color: #fbbf24; } .hero-meta .mdot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); } .hero-genre-chip { background: rgba(255,255,255,.08); border: 1px solid var(--border); padding: .2rem .6rem; border-radius: 100px; font-size: .8rem; color: var(--text-secondary); } .hero-overview { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; max-width: 580px; margin-bottom: 1.8rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; } /* staged entrance for the active slide's text (only when animations are on) */ body.mf-anim .hero-slide .hero-stage > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } body.mf-anim .hero-slide.active .hero-stage > * { opacity: 1; transform: none; } body.mf-anim .hero-slide.active .hero-stage > *:nth-child(1) { transition-delay: .08s; } body.mf-anim .hero-slide.active .hero-stage > *:nth-child(2) { transition-delay: .16s; } body.mf-anim .hero-slide.active .hero-stage > *:nth-child(3) { transition-delay: .24s; } body.mf-anim .hero-slide.active .hero-stage > *:nth-child(4) { transition-delay: .32s; } body.mf-anim .hero-slide.active .hero-stage > *:nth-child(5) { transition-delay: .40s; } .hero-controls { position: absolute; z-index: 3; right: clamp(1rem, 5vw, 4rem); bottom: clamp(2.6rem, 7vh, 5rem); display: flex; align-items: center; gap: .9rem; } .hero-dots { display: flex; gap: .5rem; } .hero-dot { width: 30px; height: 4px; border-radius: 100px; background: rgba(255,255,255,.28); border: 0; padding: 0; cursor: pointer; transition: background .3s, width .3s; } .hero-dot.active { background: var(--accent); width: 46px; box-shadow: 0 0 10px var(--accent-glow); } /* ── Home content rows ───────────────────────────────────────────────────── */ .home-greeting { max-width: var(--maxw); margin: 0 auto; padding: 2.2rem clamp(1rem, 5vw, 2.5rem) .25rem; } .home-greeting h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; } .home-greeting h2 .wave { display: inline-block; animation: wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; } @keyframes wave { 0%,60%,100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(16deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } } .home-greeting .sub { color: var(--text-secondary); margin-top: .3rem; } .home-greeting .name { background: var(--gradient-1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .home-rows { max-width: var(--maxw); margin: 0 auto; padding: 1.2rem clamp(1rem, 5vw, 2.5rem) 4.5rem; display: flex; flex-direction: column; gap: 2.6rem; } .row { position: relative; } .row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding: 0 .15rem; } .row-title { display: flex; align-items: center; gap: .6rem; font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 800; letter-spacing: -.01em; } .row-title i { color: var(--accent-light); font-size: .95em; } .row-title .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .row-see { color: var(--text-secondary); font-size: .85rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; transition: color .2s, gap .2s; white-space: nowrap; } .row-see:hover { color: var(--accent-light); gap: .6rem; } .row-track-wrap { position: relative; } .row-track { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: .5rem .2rem 1.3rem; scrollbar-width: none; -ms-overflow-style: none; } .row-track::-webkit-scrollbar { display: none; } .row-arrow { position: absolute; top: 0; bottom: 1.3rem; width: 60px; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; z-index: 4; color: #fff; opacity: 0; transition: opacity .25s; background: transparent; } .row-arrow.left { left: 0; background: linear-gradient(90deg, rgba(10,6,8,.92), transparent); } .row-arrow.right { right: 0; background: linear-gradient(270deg, rgba(10,6,8,.92), transparent); } .row-track-wrap:hover .row-arrow { opacity: 1; } .row-arrow span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,12,16,.85); border: 1px solid var(--border); font-size: 1.05rem; transition: background .2s, transform .2s, border-color .2s; } .row-arrow:hover span { background: var(--accent); border-color: var(--accent); transform: scale(1.08); } .row-arrow[hidden] { display: none; } .row-card { flex: 0 0 auto; width: clamp(138px, 22vw, 178px); scroll-snap-align: start; text-decoration: none; color: inherit; } .row-card .poster { position: relative; aspect-ratio: 2/3; border-radius: 14px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border); transition: transform .38s var(--ease-out), box-shadow .38s, border-color .38s; } .row-card:hover .poster { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: var(--border-hover); } .row-card .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); } .row-card:hover .poster img { transform: scale(1.07); } .row-card .poster-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.6rem; color: #fff; background: var(--gradient-1); letter-spacing: .02em; } .pl-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,4,6,.92), rgba(8,4,6,.1) 55%, transparent); opacity: 0; transition: opacity .3s; } .row-card:hover .pl-overlay { opacity: 1; } .row-play-circle { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 10px 26px var(--accent-glow); opacity: 0; transform: scale(.55); transition: opacity .3s, transform .4s var(--ease-spring); z-index: 2; } .row-card:hover .row-play-circle { opacity: 1; transform: scale(1); } .rc-rating { position: absolute; top: .5rem; right: .5rem; z-index: 3; font-size: .72rem; font-weight: 800; padding: .2rem .45rem; border-radius: 7px; background: rgba(8,4,6,.8); color: #ffd96b; display: flex; align-items: center; gap: .25rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .rc-badge { position: absolute; top: .5rem; left: .5rem; z-index: 3; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .2rem .5rem; border-radius: 7px; background: var(--accent); color: #fff; } .row-card .title { margin-top: .55rem; font-weight: 700; font-size: .9rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-card .sub { color: var(--text-muted); font-size: .78rem; margin-top: .1rem; } /* continue-watching variant: progress bar + resume label */ .cw-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.2); z-index: 4; } .cw-progress > span { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } .cw-resume { position: absolute; left: .5rem; right: .5rem; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 800; color: #fff; opacity: 0; transform: translateY(6px); transition: .3s; } .cw-card:hover .cw-resume { opacity: 1; transform: none; } .row-empty { color: var(--text-muted); font-size: .9rem; padding: 1.6rem; border: 1px dashed var(--border); border-radius: 14px; text-align: center; } .row-empty a { color: var(--accent-light); } /* ── Top 10 ranked row — oversized rank numeral behind each poster ───────── */ .top10-row .row-track { gap: 1.1rem; align-items: flex-end; padding-left: .2rem; } .top10-card { flex: 0 0 auto; position: relative; display: flex; align-items: flex-end; scroll-snap-align: start; text-decoration: none; color: inherit; padding-left: clamp(42px, 7vw, 64px); } .top10-rank { position: absolute; left: -.05em; bottom: -.14em; z-index: 1; line-height: .8; font-family: 'Arial Black', system-ui, sans-serif; font-weight: 900; font-size: clamp(108px, 17vw, 150px); -webkit-text-stroke: 3px var(--accent); color: transparent; text-shadow: 0 8px 28px rgba(0,0,0,.55); transition: -webkit-text-stroke-color .35s, transform .4s var(--ease-spring); user-select: none; pointer-events: none; } .top10-rank[data-rank="10"] { font-size: clamp(92px, 15vw, 132px); letter-spacing: -.06em; } .top10-card:hover .top10-rank { -webkit-text-stroke-color: var(--accent-light); transform: translateY(-4px); } .top10-poster { position: relative; z-index: 2; width: clamp(110px, 17vw, 150px); aspect-ratio: 2/3; border-radius: 14px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border); transition: transform .38s var(--ease-out), box-shadow .38s, border-color .38s; } .top10-card:hover .top10-poster { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: var(--border-hover); } .top10-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); } .top10-card:hover .top10-poster img { transform: scale(1.07); } .top10-poster .poster-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; color: #fff; background: var(--gradient-1); } .top10-kind { position: absolute; top: .5rem; right: .5rem; z-index: 3; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .18rem .42rem; border-radius: 6px; background: rgba(8,4,6,.7); backdrop-filter: blur(6px); color: #fff; } .top10-poster .row-play-circle { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 10px 26px var(--accent-glow); opacity: 0; transform: scale(.55); transition: opacity .3s, transform .4s var(--ease-spring); z-index: 4; } .top10-card:hover .row-play-circle { opacity: 1; transform: scale(1); } .top10-card:hover .pl-overlay { opacity: 1; } @media (max-width: 640px) { .top10-card { padding-left: clamp(34px, 11vw, 52px); } .top10-rank { font-size: clamp(84px, 24vw, 110px); -webkit-text-stroke-width: 2.5px; } } /* announcements sit in the rows column */ .home-ann-section { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem clamp(1rem, 5vw, 2.5rem) 0; } /* ── Personalization: appearance & playback panel (profile) ──────────────── */ .swatches { display: flex; gap: .85rem; flex-wrap: wrap; } .swatch { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; position: relative; transition: transform .2s var(--ease-spring); } .swatch:hover { transform: scale(1.12); } .swatch.active { border-color: #fff; box-shadow: 0 0 0 3px var(--bg-card), 0 0 18px currentColor; } .swatch.active::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .82rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .swatch-crimson { background: #e11d48; color: #e11d48; } .swatch-rose { background: #f43f5e; color: #f43f5e; } .swatch-ember { background: #ef4444; color: #ef4444; } .swatch-sunset { background: #f97316; color: #f97316; } .swatch-neon { background: #ff2d55; color: #ff2d55; } .swatch-orchid { background: #e0115f; color: #e0115f; } .swatch-gold { background: #f59e0b; color: #f59e0b; } .swatch-lime { background: #84cc16; color: #84cc16; } .swatch-emerald { background: #10b981; color: #10b981; } .swatch-teal { background: #14b8a6; color: #14b8a6; } .swatch-cyan { background: #06b6d4; color: #06b6d4; } .swatch-sky { background: #0ea5e9; color: #0ea5e9; } .swatch-azure { background: #3b82f6; color: #3b82f6; } .swatch-indigo { background: #6366f1; color: #6366f1; } .swatch-violet { background: #8b5cf6; color: #8b5cf6; } .swatch-grape { background: #a855f7; color: #a855f7; } .swatch-magenta { background: #d946ef; color: #d946ef; } .swatch-slate { background: #64748b; color: #64748b; } .swatch-label { text-align: center; font-size: .68rem; color: var(--text-muted); margin-top: .35rem; text-transform: capitalize; } .swatch-wrap { display: flex; flex-direction: column; align-items: center; } .pref-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); } .pref-toggle:last-child { border-bottom: 0; padding-bottom: 0; } .pref-toggle .label { font-weight: 600; } .pref-toggle .desc { color: var(--text-muted); font-size: .82rem; margin-top: .15rem; max-width: 46ch; } .switch { position: relative; width: 50px; height: 28px; flex: 0 0 auto; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; } .switch .track { position: absolute; inset: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 100px; transition: .25s; } .switch .track::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; border-radius: 50%; background: var(--text-muted); transition: .25s var(--ease-out); } .switch input:checked + .track { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } .switch input:checked + .track::before { transform: translateX(22px); background: #fff; } .pref-saved { font-size: .8rem; color: var(--accent-light); opacity: 0; transition: opacity .3s; } .pref-saved.show { opacity: 1; } /* ── Motion-off & reduced-motion guards ──────────────────────────────────── */ .mf-anim-off .hero-backdrop { animation: none; } .mf-anim-off [data-reveal] { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .hero-backdrop { animation: none; } html { scroll-behavior: auto; } body.mf-reveal-ready.mf-anim [data-reveal] { transition: none; } .home-greeting h2 .wave, .pulse-dot { animation: none; } } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 760px) { .hero { min-height: 80vh; align-items: flex-end; } .hero-overview { -webkit-line-clamp: 2; font-size: .98rem; } .hero-controls { display: none; } .row-arrow { display: none; } .row-card { width: clamp(120px, 38vw, 150px); } } /* ══════════════════════════════════════════════════════════════════════════ COMMENTS (watch page) ══════════════════════════════════════════════════════════════════════════ */ .comments { background: var(--bg-base); border-top: 1px solid var(--border); } .comments-inner { max-width: 1300px; margin: 0 auto; padding: 2rem 2rem 4rem; } .comments-title { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1.5rem; } .comments-title i { color: var(--accent); } .comments-count { color: var(--text-muted); font-weight: 500; font-size: .95rem; } /* Composer + comment share the avatar styles */ .comment-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .comment-avatar img { width: 100%; height: 100%; object-fit: cover; } .comment-avatar-initials { font-weight: 700; color: #fff; font-size: 1rem; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--gradient-1); } .comment-composer { display: flex; gap: .85rem; margin-bottom: 2rem; } .comment-composer-main { flex: 1; min-width: 0; } .comment-input { width: 100%; resize: vertical; min-height: 2.6rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; color: var(--text-primary); padding: .7rem .9rem; font: inherit; line-height: 1.45; transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); } .comment-input:focus { outline: none; border-color: var(--border-hover); box-shadow: 0 0 0 3px var(--accent-glow); } .comment-input::placeholder { color: var(--text-muted); } .comment-composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: .85rem; margin-top: .55rem; } .comment-charcount { color: var(--text-muted); font-size: .78rem; margin-right: auto; } /* List */ .comments-list { display: flex; flex-direction: column; gap: 1.4rem; } .comments-empty { color: var(--text-secondary); padding: 1.5rem 0; text-align: center; font-size: .95rem; } .comment { display: flex; gap: .85rem; animation: commentIn .25s var(--ease-out); } @keyframes commentIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .comment-body { flex: 1; min-width: 0; } .comment-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .25rem; flex-wrap: wrap; } .comment-author { font-weight: 600; color: var(--text-primary); font-size: .92rem; } .comment-badge { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--accent); color: #fff; padding: .08rem .4rem; border-radius: 5px; vertical-align: middle; } .comment-time { color: var(--text-muted); font-size: .78rem; } .comment-text { color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; } .comment-actions { display: flex; gap: 1rem; margin-top: .45rem; } .comment-action { background: none; border: none; cursor: pointer; padding: 0; color: var(--text-muted); font-size: .78rem; display: inline-flex; align-items: center; gap: .3rem; transition: color .15s var(--ease-out); } .comment-action:hover { color: var(--accent-light); } .comment-edit-box { margin-top: .5rem; } .comment-edit-box .comment-composer-actions { margin-top: .5rem; } @media (max-width: 640px) { .comments-inner { padding: 1.5rem 1rem 3rem; } .comment-avatar { width: 34px; height: 34px; } } /* ═══════════════════════════════════════════════════════════════════════════ MARCFLIX VERDICT — review system (replaces the old star ratings) ═══════════════════════════════════════════════════════════════════════════ */ /* Inline Meter chip in the detail header (where the star rating used to be) */ .detail-meter { --tone-c: var(--accent); display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .8rem .35rem .5rem; border-radius: 100px; background: color-mix(in srgb, var(--tone-c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--tone-c) 38%, transparent); text-decoration: none; transition: transform .18s var(--ease-out), background .2s; } .detail-meter:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--tone-c) 20%, transparent); } .detail-meter-val { font-size: 1.25rem; font-weight: 900; line-height: 1; color: var(--tone-c); display: inline-flex; align-items: baseline; gap: .05rem; } .detail-meter-val small { font-size: .7rem; font-weight: 700; opacity: .8; } .detail-meter-txt { display: flex; flex-direction: column; line-height: 1.15; } .detail-meter-label { font-size: .85rem; font-weight: 800; color: var(--text-primary); } .detail-meter-sub { font-size: .68rem; color: var(--text-muted); font-weight: 600; letter-spacing: .02em; } .detail-meter--goat { --tone-c: #fbbf24; } .detail-meter--loved { --tone-c: #f97316; } .detail-meter--solid { --tone-c: #3b82f6; } .detail-meter--meh { --tone-c: #a855f7; } .detail-meter--skip { --tone-c: #6b7280; } .detail-meter--none { --tone-c: #6b7280; } /* ── Reviews section ───────────────────────────────────────────────────────── */ .reviews-section { scroll-margin-top: 80px; } .rv-subtitle { color: var(--text-muted); font-size: .9rem; margin: -.4rem 0 1.4rem; } .rv-overview { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 1.6rem; align-items: center; margin-bottom: 2rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem; } /* The MarcFlix Meter ring */ .rv-meter { --tone-c: #6b7280; display: flex; align-items: center; gap: 1.1rem; } .rv-meter-ring { --meter: 0; position: relative; width: 108px; height: 108px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(var(--tone-c) calc(var(--meter) * 1%), color-mix(in srgb, var(--tone-c) 16%, var(--bg-surface)) 0); display: grid; place-items: center; box-shadow: 0 0 26px color-mix(in srgb, var(--tone-c) 32%, transparent); transition: --meter .7s var(--ease-out); } .rv-meter-core { width: 80px; height: 80px; border-radius: 50%; background: var(--bg-card); display: grid; place-items: center; align-content: center; } .rv-meter-num { font-size: 1.9rem; font-weight: 900; color: var(--tone-c); line-height: 1; } .rv-meter-pct { font-size: .8rem; font-weight: 700; color: var(--tone-c); opacity: .7; margin-top: .1rem; } .rv-meter-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 800; } .rv-meter-label { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); margin: .1rem 0; } .rv-meter-count { font-size: .82rem; color: var(--text-muted); } .rv-tone-goat { --tone-c: #fbbf24; } .rv-tone-loved { --tone-c: #f97316; } .rv-tone-solid { --tone-c: #3b82f6; } .rv-tone-meh { --tone-c: #a855f7; } .rv-tone-skip { --tone-c: #6b7280; } .rv-tone-none { --tone-c: #6b7280; } /* Verdict distribution bars */ .rv-dist { display: flex; flex-direction: column; gap: .5rem; min-width: 0; } .rv-dist-row { display: grid; grid-template-columns: 20px 92px 1fr 22px; align-items: center; gap: .6rem; } .rv-dist-icon { font-size: .85rem; text-align: center; } .rv-dist-name { font-size: .8rem; color: var(--text-secondary); font-weight: 600; white-space: nowrap; } .rv-dist-bar { height: 8px; border-radius: 100px; background: var(--bg-surface); overflow: hidden; } .rv-dist-fill { display: block; height: 100%; border-radius: 100px; width: 0; transition: width .6s var(--ease-out); } .rv-dist-n { font-size: .78rem; color: var(--text-muted); font-weight: 700; text-align: right; } /* Verdict picker / composer */ .rv-composer { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem; margin-bottom: 2rem; } .rv-prompt { font-weight: 800; font-size: 1.02rem; margin-bottom: .9rem; color: var(--text-primary); } .rv-verdicts { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; } .rv-vbtn { --vc: var(--accent); display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 92px; padding: .7rem .6rem; border-radius: 14px; cursor: pointer; background: var(--bg-surface); border: 1.5px solid var(--border); color: var(--text-secondary); transition: transform .15s var(--ease-out), border-color .15s, background .15s, box-shadow .15s; } .rv-vbtn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--vc) 55%, transparent); color: var(--text-primary); } .rv-vbtn.selected { border-color: var(--vc); background: color-mix(in srgb, var(--vc) 15%, transparent); color: var(--text-primary); box-shadow: 0 6px 20px color-mix(in srgb, var(--vc) 30%, transparent); } .rv-vbtn-emoji { font-size: 1.5rem; line-height: 1; filter: grayscale(.35); transition: filter .15s, transform .15s; } .rv-vbtn:hover .rv-vbtn-emoji, .rv-vbtn.selected .rv-vbtn-emoji { filter: none; transform: scale(1.12); } .rv-vbtn-label { font-size: .74rem; font-weight: 700; } .rv-text { width: 100%; resize: vertical; min-height: 46px; padding: .7rem .85rem; border-radius: 12px; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary); font: inherit; font-size: .9rem; transition: border-color .15s; } .rv-text:focus { outline: none; border-color: var(--accent); } .rv-text::placeholder { color: var(--text-muted); } .rv-composer-actions { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; } .rv-hint { margin-right: auto; font-size: .8rem; color: var(--text-muted); } .rv-hint--warn { color: var(--accent-light); font-weight: 700; } /* Review list */ .rv-list { display: flex; flex-direction: column; gap: 1.2rem; } .rv-empty { color: var(--text-secondary); text-align: center; padding: 1.4rem 0; font-size: .92rem; } .rv-rev { display: flex; gap: .85rem; animation: commentIn .25s var(--ease-out); } .rv-rev--mine { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 14px; padding: .8rem; margin: -.2rem; } .rv-rev-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: grid; place-items: center; background: var(--bg-surface); } .rv-rev-avatar img { width: 100%; height: 100%; object-fit: cover; } .rv-rev-initials { font-weight: 800; color: var(--accent-light); } .rv-rev-body { flex: 1; min-width: 0; } .rv-rev-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .3rem; } .rv-rev-name { font-weight: 700; color: var(--text-primary); font-size: .9rem; text-decoration: none; } a.rv-rev-name:hover { color: var(--accent-light); } .rv-rev-verdict { --vc: var(--accent); display: inline-flex; align-items: center; gap: .3rem; font-size: .73rem; font-weight: 800; padding: .15rem .55rem; border-radius: 100px; color: var(--vc); background: color-mix(in srgb, var(--vc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--vc) 32%, transparent); } .rv-rev-time { font-size: .75rem; color: var(--text-muted); } .rv-rev-del { margin-left: auto; background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: .78rem; transition: color .15s; } .rv-rev-del:hover { color: #ef4444; } .rv-rev-text { color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; font-size: .92rem; } @media (max-width: 680px) { .rv-overview { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.2rem; } .rv-meter { justify-content: center; } .rv-vbtn { min-width: 0; flex: 1 1 28%; } } /* Public-profile "Taste" pie section */ /* Taste = a panel that mirrors the identity card, with compact vertical donut cards that fill the row evenly (3-across on big screens). */ .profile-pub-genres-section { margin-top: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 1.5rem; } .profile-pub-genres-section .genre-charts-wrap { margin-top: 1.2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .profile-pub-genres-section .genre-chart-card { max-width: none; background: var(--bg-surface); } .profile-pub-genres-section .genre-chart-body { flex-direction: column; align-items: center; text-align: center; gap: .85rem; } .profile-pub-genres-section .genre-legend { width: 100%; } /* "New" pill on the settings effects toggle */ .pref-new-pill { display: inline-block; margin-left: .4rem; padding: .05rem .42rem; border-radius: 100px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; vertical-align: middle; color: #fff; background: linear-gradient(135deg, var(--accent-light), var(--accent)); } /* ═══════════════════════════════════════════════════════════════════════════ CINEMATIC EFFECTS — gated behind body.mf-fx (Settings → Cinematic effects) ═══════════════════════════════════════════════════════════════════════════ */ /* Aurora glow backdrop — fixed, behind everything, GPU-animated */ .mf-aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .mf-aurora-blob { position: absolute; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; border-radius: 50%; filter: blur(90px); opacity: .42; will-change: transform; mix-blend-mode: screen; } .mf-aurora-blob.b1 { top: -12vh; left: -8vw; background: radial-gradient(circle, var(--accent), transparent 68%); animation: mfAurora1 22s ease-in-out infinite; } .mf-aurora-blob.b2 { top: 18vh; right: -12vw; background: radial-gradient(circle, var(--accent-2, var(--accent-light)), transparent 68%); animation: mfAurora2 28s ease-in-out infinite; opacity: .32; } .mf-aurora-blob.b3 { bottom: -18vh; left: 28vw; background: radial-gradient(circle, var(--accent-hover), transparent 68%); animation: mfAurora3 25s ease-in-out infinite; opacity: .3; } @keyframes mfAurora1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(8vw,6vh,0) scale(1.15); } } @keyframes mfAurora2 { 0%,100% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-6vw,8vh,0) scale(.9); } } @keyframes mfAurora3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(5vw,-7vh,0) scale(1.2); } } /* Poster shimmer sweep on listing cards (effects on only) */ .mf-fx .card-poster::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%); transform: translateX(-120%); transition: transform .7s var(--ease-out); opacity: 0; } .mf-fx .card:hover .card-poster::after { transform: translateX(120%); opacity: 1; } /* 3D pointer tilt — vars set by main.js Effects module */ .mf-fx .card, .mf-fx .row-card { transform-style: preserve-3d; } .mf-fx .card.mf-tilt, .mf-fx .row-card.mf-tilt { transform: perspective(800px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(0); transition: transform .12s var(--ease-out); } /* Animated MarcFlix Meter pop-in when effects are on */ .mf-fx .rv-meter-ring { animation: mfMeterPop .6s var(--ease-out) both; } @keyframes mfMeterPop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mf-aurora, .mf-aurora-blob { animation: none !important; } .mf-fx .card.mf-tilt, .mf-fx .row-card.mf-tilt { transform: none; } } /* ── Logged-out Backrooms fan page ── */ .backrooms-page { --accent: #f1d35b; --accent-light: #fff6bd; --accent-hover: #d9b940; --accent-glow: rgba(241, 211, 91, 0.25); --bg-card: rgba(16, 15, 13, 0.92); --bg-surface: rgba(5, 5, 4, 0.78); --border: rgba(246, 222, 129, 0.16); --text-primary: #fff6bd; --text-secondary: #d8cfaa; --text-muted: #8f8264; min-height: 100vh; background: #090807; color: #f3edcf; overflow-x: hidden; } .backrooms-page a { color: inherit; } .backrooms-nav { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 4vw, 3rem); background: rgba(9, 8, 7, 0.72); border-bottom: 1px solid rgba(246, 222, 129, 0.18); backdrop-filter: blur(14px); } .backrooms-mark, .backrooms-links, .backrooms-actions, .backrooms-section__header { display: flex; align-items: center; } .backrooms-mark { gap: 0.65rem; min-width: 0; font-weight: 900; text-transform: uppercase; font-size: 0.82rem; } .backrooms-mark__signal { width: 0.72rem; height: 0.72rem; flex: 0 0 auto; border-radius: 50%; background: #f1d35b; box-shadow: 0 0 0 5px rgba(241, 211, 91, 0.16), 0 0 22px rgba(241, 211, 91, 0.6); } .backrooms-links { gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; } .backrooms-links a, .backrooms-small-link, .backrooms-footer a, .game-gateway__back { min-height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid rgba(246, 222, 129, 0.2); border-radius: 8px; padding: 0.45rem 0.8rem; background: rgba(246, 222, 129, 0.06); color: #f5e8a9; font-size: 0.82rem; font-weight: 800; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .backrooms-links a:hover, .backrooms-small-link:hover, .backrooms-footer a:hover, .game-gateway__back:hover { background: rgba(246, 222, 129, 0.14); border-color: rgba(246, 222, 129, 0.42); color: #fff8cc; } .backrooms-hero { min-height: 92vh; position: relative; display: flex; align-items: flex-end; padding: 7rem clamp(1rem, 5vw, 5rem) 4rem; overflow: hidden; isolation: isolate; } .backrooms-hero__image, .backrooms-hero__shade { position: absolute; inset: 0; } .backrooms-hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.92) contrast(1.06); z-index: -2; } .backrooms-hero__shade { z-index: -1; background: linear-gradient(90deg, rgba(9, 8, 7, 0.9) 0%, rgba(9, 8, 7, 0.54) 42%, rgba(9, 8, 7, 0.2) 100%), linear-gradient(0deg, #090807 0%, rgba(9, 8, 7, 0.28) 46%, rgba(9, 8, 7, 0.18) 100%); } .backrooms-hero__content { width: min(760px, 100%); } .backrooms-kicker { margin: 0 0 0.7rem; color: #b8f28b; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; } .backrooms-hero h1, .game-gateway__intro h1 { margin: 0; color: #fff6bd; font-size: clamp(3.1rem, 10vw, 8.6rem); line-height: 0.9; font-weight: 950; text-transform: uppercase; text-shadow: 0 8px 28px rgba(0, 0, 0, 0.78); } .backrooms-lede, .game-gateway__intro p, .backrooms-section__copy p, .backrooms-file-grid p, .backrooms-terminal li, .backrooms-frame figcaption { color: #d8cfaa; line-height: 1.65; } .backrooms-lede { max-width: 630px; margin: 1.15rem 0 1.6rem; font-size: clamp(1rem, 2vw, 1.22rem); } .backrooms-actions { gap: 0.75rem; flex-wrap: wrap; } .backrooms-page .btn-primary, .game-gateway .btn-primary { color: #14120d; } .backrooms-strip, .backrooms-section, .backrooms-footer { width: min(1180px, calc(100% - 2rem)); margin-left: auto; margin-right: auto; } .backrooms-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: -2rem; position: relative; z-index: 3; border: 1px solid rgba(246, 222, 129, 0.18); border-radius: 8px; overflow: hidden; background: rgba(246, 222, 129, 0.18); } .backrooms-strip div { min-width: 0; padding: 1.05rem; background: rgba(20, 18, 13, 0.94); } .backrooms-strip span { display: block; color: #9fa896; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; } .backrooms-strip strong { display: block; margin-top: 0.22rem; color: #fff6bd; font-size: clamp(0.95rem, 2vw, 1.18rem); overflow-wrap: anywhere; } .backrooms-section { padding: clamp(3rem, 7vw, 6rem) 0; } .backrooms-files { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; } .backrooms-section h2 { margin: 0; color: #fff6bd; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; text-transform: uppercase; } .backrooms-section__copy p { margin: 1rem 0 0; font-size: 1rem; } .backrooms-file-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .backrooms-file-grid article { min-width: 0; min-height: 14rem; padding: 1.1rem; border: 1px solid rgba(246, 222, 129, 0.16); border-radius: 8px; background: #15130f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); } .backrooms-file-grid i { width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #111; background: #f1d35b; } .backrooms-file-grid h3 { margin: 1rem 0 0.45rem; color: #fff6bd; font-size: 1.05rem; } .backrooms-file-grid p { margin: 0; font-size: 0.9rem; } .backrooms-section__header { justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; } .backrooms-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(220px, 22vw); gap: 0.85rem; } .backrooms-frame { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; border: 1px solid rgba(246, 222, 129, 0.16); border-radius: 8px; background: #15130f; } .backrooms-frame--wide { grid-column: span 2; grid-row: span 2; } .backrooms-frame--tall { grid-row: span 2; } .backrooms-frame img, .backrooms-transmissions__image { width: 100%; height: 100%; object-fit: cover; display: block; } .backrooms-frame figcaption { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; padding: 0.5rem 0.65rem; border: 1px solid rgba(246, 222, 129, 0.18); border-radius: 8px; background: rgba(9, 8, 7, 0.76); backdrop-filter: blur(8px); font-size: 0.82rem; } .backrooms-transmissions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr); gap: 1rem; align-items: stretch; } .backrooms-terminal, .backrooms-transmissions__image { min-height: 440px; border: 1px solid rgba(246, 222, 129, 0.16); border-radius: 8px; background: #10100d; overflow: hidden; } .backrooms-terminal { padding: clamp(1.25rem, 4vw, 2rem); } .backrooms-terminal ul { list-style: none; display: grid; gap: 0.75rem; margin: 1.4rem 0 0; padding: 0; } .backrooms-terminal li { min-width: 0; padding: 0.9rem; border: 1px solid rgba(184, 242, 139, 0.16); border-radius: 8px; background: rgba(184, 242, 139, 0.05); } .backrooms-terminal span { display: inline-flex; margin-right: 0.55rem; color: #b8f28b; font-weight: 900; } .backrooms-footer { min-height: 5rem; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 1rem; padding: 2rem 0; border-top: 1px solid rgba(246, 222, 129, 0.14); color: #a9a188; } .backrooms-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #a9a188; } .backrooms-footer__links { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; } .backrooms-footer__links a { min-width: 0; min-height: 2rem; padding: 0.4rem 0.55rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; } .backrooms-info-hero { min-height: 62vh; position: relative; display: flex; align-items: flex-end; padding: 8rem clamp(1rem, 5vw, 5rem) 4rem; overflow: hidden; isolation: isolate; } .backrooms-info-hero__content { width: min(780px, 100%); } .backrooms-info-hero h1 { margin: 0; color: #fff6bd; font-size: clamp(3rem, 9vw, 7rem); line-height: 0.9; font-weight: 950; text-transform: uppercase; text-shadow: 0 8px 28px rgba(0, 0, 0, 0.78); } .backrooms-info-hero p:not(.backrooms-kicker) { max-width: 680px; margin: 1rem 0 0; color: #d8cfaa; font-size: clamp(1rem, 2vw, 1.16rem); line-height: 1.7; } .backrooms-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; } .backrooms-info-grid article, .backrooms-contact-panel { min-width: 0; border: 1px solid rgba(246, 222, 129, 0.16); border-radius: 8px; background: #15130f; padding: clamp(1rem, 3vw, 1.4rem); } .backrooms-info-grid h2, .backrooms-contact-panel h2 { font-size: clamp(1.45rem, 3vw, 2.1rem); } .backrooms-info-grid p:not(.backrooms-kicker), .backrooms-contact-panel p { color: #d8cfaa; line-height: 1.68; } .backrooms-contact-panel { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 1rem; } .backrooms-contact-panel form { display: grid; gap: 0.85rem; } .backrooms-contact-panel label { display: grid; gap: 0.4rem; color: #bdb28e; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; } .backrooms-contact-panel input, .backrooms-contact-panel textarea { width: 100%; border: 1px solid rgba(246, 222, 129, 0.18); border-radius: 8px; background: rgba(5, 5, 4, 0.78); color: #fff6bd; padding: 0.8rem 0.9rem; outline: none; resize: vertical; } .backrooms-contact-panel input:focus, .backrooms-contact-panel textarea:focus { border-color: #f1d35b; box-shadow: 0 0 0 3px rgba(241, 211, 91, 0.16); } /* ── Hidden auth gateway ── */ .game-gateway { --accent: #f1d35b; --accent-light: #fff6bd; --accent-hover: #d9b940; --accent-glow: rgba(241, 211, 91, 0.25); --bg-card: rgba(16, 15, 13, 0.92); --bg-surface: rgba(5, 5, 4, 0.78); --border: rgba(246, 222, 129, 0.16); --text-primary: #fff6bd; --text-secondary: #d8cfaa; --text-muted: #8f8264; min-height: 100vh; display: grid; grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; padding: clamp(1rem, 4vw, 3rem); background: linear-gradient(120deg, rgba(9, 8, 7, 0.96), rgba(23, 23, 18, 0.88)), url("https://screenanarchy.com/assets/2026/04/A24_BACKROOMS_DTR1_NO_GREENBAND_1920x1080_TEXTLESS_SPLITS_PRHQ.00_00_43_20.Still005_R2-1.jpg") center / cover; color: #f3edcf; } .game-gateway__back { position: fixed; z-index: 4; top: 1rem; left: 1rem; background: rgba(9, 8, 7, 0.72); } .game-gateway__intro { max-width: 500px; } .game-gateway__intro p { margin-top: 1rem; font-size: 1.05rem; } .game-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .game-auth-card { max-width: none; width: 100%; border-radius: 8px; background: rgba(16, 15, 13, 0.94); border-color: rgba(246, 222, 129, 0.16); } .game-auth-card .auth-title { font-size: 1.7rem; } .game-auth-grid--single { grid-template-columns: minmax(280px, 460px); justify-content: center; } @media (max-width: 980px) { .backrooms-files, .backrooms-transmissions, .backrooms-info-grid, .backrooms-contact-panel, .game-gateway, .game-auth-grid { grid-template-columns: 1fr; } .backrooms-file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .backrooms-transmissions__image { aspect-ratio: 16 / 9; min-height: 0; } .game-gateway { padding-top: 5rem; } } @media (max-width: 720px) { .backrooms-nav { position: absolute; align-items: flex-start; flex-direction: column; } .backrooms-links { width: 100%; justify-content: flex-start; } .backrooms-links a { flex: 1 1 auto; } .backrooms-hero { min-height: 96vh; padding-top: 10rem; } .backrooms-strip, .backrooms-file-grid, .backrooms-gallery { grid-template-columns: 1fr; } .backrooms-frame, .backrooms-frame--wide, .backrooms-frame--tall { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; } .backrooms-section__header, .backrooms-footer__top, .backrooms-footer { align-items: flex-start; flex-direction: column; } .backrooms-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .backrooms-links a, .backrooms-actions .btn, .backrooms-small-link { width: 100%; } .backrooms-hero h1, .game-gateway__intro h1 { font-size: 3rem; } }