/* ============================================================ ViralBD — Custom Styles (Premium Visual Refactor) ------------------------------------------------------------ ⚠️ এই ফাইলে শুধু ভিজ্যুয়াল ডিজাইন আছে। সব ক্লাসের নাম JS লজিকের সাথে যুক্ত — নাম পরিবর্তন করা যাবে না: .hidden .active .show .flex (state classes, JS toggles করে) .video-card .thumb-wrapper .trending-badge .duration-badge .filter-btn .page-btn .action-btn .like-btn .skeleton .sidebar-* .modal-* .toast .glass-search .brand-glow .login-gradient .theme-toggle ============================================================ */ /* ============================================================ ১. ডিজাইন টোকেন (Design Tokens) ============================================================ */ :root { /* ব্র্যান্ড কালার — Midnight + Amber (সব থিমে একই) লিগ্যাসি নামগুলো (--purple, --blue, --violet) amber-এ alias করা, যাতে পুরোনো রেফারেন্স না ভাঙে। নতুন কোডে --accent* ব্যবহার করুন। */ --accent: #f59e0b; /* amber — প্রাইমারি */ --accent-light: #fbbf24; /* amber-300 */ --accent-glow: #fef3c7; /* amber-100 */ --accent-deep: #d97706; /* amber-600 */ --accent-2: #f97316; /* orange-500 — সেকেন্ডারি */ --accent-3: #fb923c; /* orange-400 — হাইলাইট */ /* লিগ্যাসি aliases */ --purple: var(--accent); --purple-light: var(--accent-light); --purple-glow: var(--accent-glow); --purple-deep: var(--accent-deep); --violet: var(--accent); --blue: var(--accent); --blue-accent: var(--accent-deep); /* ডার্ক থিম টোকেন (ডিফল্ট) — Midnight: নীল-কালো আন্ডারটোন */ --obsidian: #0a0a12; --bg-primary: #08080f; --bg-surface: #131520; --bg-surface-2: #1a1d2b; --bg-elevated: #232737; --text-primary: #fafafa; --text-secondary: rgba(250, 250, 250, 0.82); --text-muted: rgba(250, 250, 250, 0.52); --text-faint: rgba(250, 250, 250, 0.32); --border: rgba(250, 250, 250, 0.10); --border-subtle: rgba(250, 250, 250, 0.06); --border-strong: rgba(245, 158, 11, 0.24); --glass-bg: rgba(255, 255, 255, 0.045); --glass-border: rgba(255, 255, 255, 0.12); --overlay-bg: rgba(4, 6, 14, 0.72); --scrollbar-track: #0c0c14; --input-bg: transparent; --input-placeholder: #6b7280; --card-bg: rgba(255, 255, 255, 0.055); --card-hover-bg: rgba(245, 158, 11, 0.12); --card-border: rgba(255, 255, 255, 0.12); --dropdown-bg: #1a1d2b; --dropdown-text: #e5e7eb; --dropdown-hover: rgba(245, 158, 11, 0.14); --dropdown-border: rgba(255, 255, 255, 0.10); --skeleton-from: #141828; --skeleton-to: #232945; /* রেডিয়াস স্কেল */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 28px; --radius-full: 9999px; /* শ্যাডো স্কেল (ডার্ক — soft, layered, amber-tinted glow) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.38); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.36); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45); --shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.58); --shadow-glow: 0 10px 32px rgba(245, 158, 11, 0.28); --shadow-glow-strong: 0 14px 48px rgba(249, 115, 22, 0.38); /* ব্র্যান্ড গ্রেডিয়েন্ট — Amber fire */ --grad-brand: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%); --grad-brand-soft: linear-gradient(135deg, #f59e0b 0%, #fb923c 50%, #fed7aa 100%); --grad-glow-text: linear-gradient(110deg, #fbbf24 0%, #f59e0b 45%, #fb923c 100%); /* ফোকাস রিং */ --ring: #f59e0b; /* অ্যাম্বিয়েন্ট ব্যাকগ্রাউন্ড গ্লো — amber */ --ambient-top: radial-gradient(60% 50% at 50% -10%, rgba(245, 158, 11, 0.18) 0%, rgba(249, 115, 22, 0.06) 40%, transparent 72%); --ambient-bottom: radial-gradient(50% 35% at 50% 110%, rgba(251, 146, 60, 0.12) 0%, transparent 72%); /* ট্রানজিশন */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ===== লাইট থিম টোকেন ===== */ [data-theme="light"] { /* Amber accent লাইট মোডে গাঢ় — কন্ট্রাস্ট বজায় রাখতে */ --accent: #d97706; --accent-light: #f59e0b; --accent-glow: #fef3c7; --accent-deep: #b45309; --accent-2: #ea580c; --accent-3: #f97316; --obsidian: #faf8f5; --bg-primary: #f6f4f0; --bg-surface: #ffffff; --bg-surface-2: #f3f0ea; --bg-elevated: #ffffff; --text-primary: #1c1917; --text-secondary: rgba(28, 25, 23, 0.82); --text-muted: rgba(28, 25, 23, 0.72); --text-faint: rgba(28, 25, 23, 0.60); --border: rgba(28, 25, 23, 0.10); --border-subtle: rgba(28, 25, 23, 0.06); --border-strong: rgba(217, 119, 6, 0.22); --glass-bg: rgba(255, 255, 255, 0.78); --glass-border: rgba(28, 25, 23, 0.10); --overlay-bg: rgba(15, 23, 42, 0.42); --scrollbar-track: #ece9e4; --input-placeholder: #78716c; --card-bg: #ffffff; --card-hover-bg: rgba(217, 119, 6, 0.07); --card-border: rgba(28, 25, 23, 0.10); --dropdown-bg: #ffffff; --dropdown-text: #1c1917; --dropdown-hover: #fef3c7; --dropdown-border: rgba(28, 25, 23, 0.10); --skeleton-from: #e8e5df; --skeleton-to: #f8f7f4; /* লাইট শ্যাডো — softer, amber-tinted */ --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06); --shadow-md: 0 6px 18px rgba(28, 25, 23, 0.09); --shadow-lg: 0 14px 34px rgba(180, 83, 9, 0.12); --shadow-xl: 0 26px 58px rgba(180, 83, 9, 0.16); --shadow-glow: 0 10px 30px rgba(217, 119, 6, 0.18); --shadow-glow-strong: 0 14px 42px rgba(217, 119, 6, 0.24); --ring: #d97706; --ambient-top: radial-gradient(60% 50% at 50% -10%, rgba(217, 119, 6, 0.14) 0%, rgba(251, 191, 36, 0.05) 45%, transparent 72%); --ambient-bottom: radial-gradient(50% 35% at 50% 110%, rgba(249, 115, 22, 0.08) 0%, transparent 70%); } /* ============================================================ ২. বেস / রিসেট + অ্যাম্বিয়েন্ট ডেপথ ============================================================ */ /* ===== LIGHT MODE GLOBAL FIX ===== Tailwind CDN `!important` ব্যবহার করে তাই এটা body level থেকে override করা হয়েছে — এটা সব শিশু element এ text-white class থাকলে সেটা dark text করবে */ html[data-theme="light"] body .text-white { color: var(--text-primary) !important; } /* ===== LIGHT MODE — small / muted text legibility ===== `text-on-surface-variant` is the Tailwind token #a1a1aa (a light grey tuned for dark backgrounds). On the white light-mode surface it — plus its /40, /60 opacity variants — turns nearly invisible. Force all of them to the readable muted token so footer notes, labels and "By continuing…" text stay legible in light mode. */ html[data-theme="light"] body .text-on-surface-variant, html[data-theme="light"] body [class*="text-on-surface-variant/"] { color: var(--text-muted) !important; opacity: 1 !important; } /* Faint footer helper lines (built with utility opacity) — nudge darker still */ html[data-theme="light"] #footer-desc, html[data-theme="light"] #footer-copy { color: var(--text-faint) !important; opacity: 1 !important; } html[data-theme="light"] .brand-glow { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--purple-deep) !important; color: var(--purple-deep) !important; filter: none !important; text-shadow: none !important; opacity: 1 !important; } * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; overflow-x: clip; /* strict clip: carousel scroll-track children never leak 44px peek past the viewport -> mobile zoom-out */ touch-action: manipulation; /* kill double-tap zoom + 300ms tap delay (pinch blocked by viewport meta) */ } body { background-color: var(--bg-primary); color: var(--text-primary); font-family: 'Geist', system-ui, -apple-system, sans-serif; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; /* স্টিকি ফুটার — ফুটার সবসময় স্ক্রিনের একদম নিচে থাকবে */ min-height: 100vh; display: flex; flex-direction: column; /* অ্যাম্বিয়েন্ট ব্র্যান্ড গ্লো — ফিক্সড, সাবলাই */ background-image: var(--ambient-top), var(--ambient-bottom); background-repeat: no-repeat; background-attachment: fixed; background-position: top center, bottom center; position: relative; transition: background-color 0.4s ease, color 0.3s ease; } body::before, body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; } body::before { background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 100% 100%, 68px 68px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent 92%); opacity: 0.08; } body::after { background: radial-gradient(circle at 15% 10%, rgba(245, 158, 11, 0.10), transparent 24%), radial-gradient(circle at 85% 0%, rgba(249, 115, 22, 0.12), transparent 26%), radial-gradient(circle at 50% 110%, rgba(217, 119, 6, 0.06), transparent 25%); opacity: 0.9; } /* উন্নত টেক্সট রেন্ডারিং — হেডিং টাইট */ h1, h2, h3, h4 { letter-spacing: -0.02em; } h1, h2, h3, h4, .brand-glow, .filter-btn, .page-btn { font-family: 'Geist', 'Hind Siliguri', system-ui, sans-serif; } /* ============================================================ ৩. ব্র্যান্ড গ্লো টেক্সট + লোগো ============================================================ */ .brand-glow { background: var(--grad-glow-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; /* ক্লিন গ্রেডিয়েন্ট টেক্সট */ filter: drop-shadow(0 2px 12px rgba(245, 158, 11, 0.35)); } .logo-glow { filter: drop-shadow(0 0 10px rgba(217, 119, 6, 0.45)); } header, main, footer { width: min(1120px, calc(100% - 32px)); max-width: 1120px !important; } header { margin-top: 0; margin-bottom: 8px; padding-bottom: 18px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 28px; box-shadow: var(--shadow-lg); } main { position: relative; z-index: 1; padding-top: 6px; padding-bottom: 40px; flex: 1 0 auto; /* স্টিকি ফুটার: main বাকি জায়গা নেবে */ } footer { margin-top: auto; margin-bottom: 0; padding-top: 22px; padding-bottom: 24px; flex-shrink: 0; border-radius: 28px 28px 20px 20px; background: color-mix(in srgb, var(--bg-surface) 76%, transparent); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); } /* ============================================================ ৪. লগইন গ্রেডিয়েন্ট বাটন ============================================================ */ .login-gradient { background: var(--grad-brand); box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18); position: relative; } /* উপরে হালকা গ্লস হাইলাইট */ .login-gradient::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,0.16), transparent 55%); pointer-events: none; } /* ============================================================ ৫. গ্লাস সার্চ বার (ফ্রস্টেড গ্লাস) ============================================================ */ .glass-search { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: border-color 0.25s ease, box-shadow 0.25s ease; } /* ফোকাসে পার্পল রিং */ .glass-search:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow-md), 0 0 0 3px rgba(245, 158, 11, 0.16); } .glass-search input { color: var(--text-primary) !important; } .glass-search input::placeholder { color: var(--input-placeholder) !important; } /* ============================================================ ৬. সাইডবার ড্রয়ার ============================================================ */ .sidebar-container { pointer-events: none; transition: opacity 0.3s ease; visibility: hidden; } .sidebar-overlay { background: var(--overlay-bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 0.3s ease; } .sidebar-drawer { background-color: color-mix(in srgb, var(--bg-surface) 92%, transparent); background-image: linear-gradient(180deg, rgba(245, 158, 11, 0.08), transparent 28%); border-right: 1px solid var(--border); box-shadow: var(--shadow-xl); transition: transform 0.35s var(--ease-out); } .sidebar-container.active { pointer-events: auto; visibility: visible; } .sidebar-container.active .sidebar-overlay { opacity: 1; pointer-events: auto; } .sidebar-container.active .sidebar-drawer { transform: translateX(0); } /* ============================================================ ৭. ভিডিও কার্ড (প্রিমিয়াম হোভার + লিফট) ============================================================ */ .video-card { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, transparent), var(--bg-surface-2)); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 12px; transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; cursor: pointer; box-shadow: var(--shadow-md); overflow: hidden; /* A card is a link, so one tap must open it. Without this, mobile Safari treats the quick tap-then-tap as a double-tap and the first one is consumed by the browser instead of activating the anchor. */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .video-card h3 { font-size: 17.5px !important; font-weight: 700 !important; letter-spacing: -0.015em; margin-top: 2px; } .video-card .text-sm { font-size: 13.5px !important; color: var(--text-secondary) !important; } .video-card .material-symbols-outlined.text-sm { font-size: 16px !important; } .video-card:active { transform: scale(0.985); } /* ডেস্কটপ হোভারে কার্ড উপরে ওঠে + subtle lift (glow নেই — পরিমিত ও ক্লিন) */ .video-card:hover { transform: translateY(-4px); border-color: var(--border-strong); background: var(--card-hover-bg); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(245, 158, 11, 0.16); } /* থাম্বনেইল র‍্যাপার */ .video-card .thumb-wrapper { position: relative; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-md); aspect-ratio: 16 / 9; } .video-card .thumb-wrapper img, .video-card .thumb-wrapper video { width: 100%; height: 100%; object-fit: cover; } .video-card .thumb-wrapper img { transition: transform 0.45s var(--ease-out); } .video-card:hover .thumb-wrapper img { transform: scale(1.06); } /* থাম্বনেইলে গ্রেডিয়েন্ট স্ক্রিম (ব্যাজ পড়ার জন্য কন্ট্রাস্ট) */ .thumb-wrapper::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.60) 100%); opacity: 0.86; pointer-events: none; z-index: 1; } /* হোভারে subtle ডার্ক vignette — depth দেয়, কিন্তু thumbnail কন্টেন্ট ঢাকে না (আগে এখানে একটি কড়া বেগুনি glow ছিল যা UX নষ্ট করতো) */ .thumb-wrapper::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 60%, rgba(0, 0, 0, 0.22) 100%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 1; } .video-card:hover .thumb-wrapper::after { opacity: 1; } /* মিডিয়া নেই — provider ফাইল মুছে গেছে, ভিডিও খেলবে না। Red INSET ring, not an outline: .thumb-wrapper clips with overflow:hidden, so an outline would be cut off entirely and nothing would show. */ .video-card.is-media-dead .thumb-wrapper { box-shadow: inset 0 0 0 3px #ef4444; } /* Slight red wash so the card reads as "broken" even in a fast scroll, where a 3px ring can be missed. Kept light so the thumbnail is still legible. */ .video-card.is-media-dead .thumb-wrapper::before { background: linear-gradient(180deg, rgba(239, 68, 68, 0.20) 0%, rgba(0, 0, 0, 0.62) 100%); } .video-card.is-media-dead .thumb-wrapper img { filter: saturate(0.55) brightness(0.8); } .media-dead-badge { position: absolute; top: 2px; left: 2px; z-index: 10; display: inline-flex; align-items: center; gap: 3px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); pointer-events: none; } .media-dead-badge .material-symbols-outlined { font-size: 12px; } /* ব্যাজগুলো স্ক্রিমের উপরে থাকবে */ .trending-badge { z-index: 3; } /* ট্রেন্ডিং ব্যাজ */ .trending-badge { position: absolute; top: 10px; left: 10px; background: var(--grad-brand); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.6px; box-shadow: 0 6px 18px rgba(217, 119, 6, 0.42); } /* ============================================================ ক্যাটাগরি হরাইজন্টাল স্ক্রল বার (Category Horizontal Scroll Bar) ============================================================ */ .category-scroll { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* hide scrollbar */ scrollbar-width: none; -ms-overflow-style: none; } .category-scroll::-webkit-scrollbar { display: none; } .cat-chip { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-full); background: var(--bg-surface-2); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .cat-chip:hover { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .cat-chip.active { background: linear-gradient(135deg, var(--accent-deep), var(--accent)); border-color: var(--accent); color: #fff; box-shadow: 0 2px 12px rgba(245, 158, 11, 0.35); } .cat-chip-icon { font-size: 18px; } .cat-chip-count { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); color: inherit; opacity: 0.7; } .cat-chip.active .cat-chip-count { background: rgba(255, 255, 255, 0.25); opacity: 1; } /* লাইট থিম */ html[data-theme="light"] .cat-chip { background: #f1f5f9; border-color: #e2e8f0; color: #475569; } html[data-theme="light"] .cat-chip:hover { background: #e2e8f0; border-color: var(--accent); color: #1e293b; } html[data-theme="light"] .cat-chip-count { background: rgba(0, 0, 0, 0.08); } /* ============================================================ অ্যাড প্লেসহোল্ডার স্টাইল (Ad Placeholders) ============================================================ */ /* ১. থাম্বনেইলের ওপরে ব্যানার অ্যাড ওভারলেই (Overlay banner sitting on top of the thumbnail) */ .ad-banner-overlay { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 10; min-width: 60%; max-width: 90%; min-height: 28px; padding: 6px 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(217, 119, 6, 0.92), rgba(245, 158, 11, 0.92)); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; border-radius: var(--radius-full); border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); pointer-events: none; /* প্লেসহোল্ডার টেক্সট — লাইভ অ্যাড স্ক্রিপ্ট লোড হলে এটি রিপ্লেস হবে */ } .ad-banner-overlay::before { content: 'Ad Space — Banner'; white-space: nowrap; } /* ২. গ্রিড অ্যাড কার্ড — নিয়মিত ভিডিও কার্ডের মাত্রা/লেআউট হুবহু মিলিয়ে (Same dimensions & aspect ratio as a regular thumbnail) */ .ad-grid-card { cursor: default; opacity: 0.95; } /* ভেতরের অ্যাড বক্স — অ্যাড না এলেও নির্দিষ্ট জায়গা ধরে রাখে, যাতে placeholder চ্যাপ্টা না দেখায় এবং 300×250 banner ও native ঠিকমতো বসে। ad-config.js এই বক্সের (.ad-slot-inner) ভেতরে আসল কোড বসায়। */ .ad-slot-inner { width: 100%; min-height: 250px; /* banner 300×250 ও native — দুটোরই জায়গা */ background: rgba(23, 31, 51, 0.35); box-shadow: var(--shadow-md); } /* অ্যাড লোড হওয়ার আগে দেখানো placeholder — striped/dashed "Advertisement" খোপ। অ্যাড এলে ad-config.js এই placeholder সরিয়ে আসল কোড বসায়। */ .ad-slot-placeholder { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center; color: rgba(255, 255, 255, 0.7); background: repeating-linear-gradient( 45deg, rgba(245, 158, 11, 0.08) 0, rgba(245, 158, 11, 0.08) 12px, rgba(255, 255, 255, 0.03) 12px, rgba(255, 255, 255, 0.03) 24px ), rgba(23, 31, 51, 0.6); border: 1px dashed rgba(245, 158, 11, 0.45); } .ad-grid-card .ad-grid-icon { font-size: 40px; color: var(--primary-c); opacity: 0.8; } .ad-grid-card .ad-grid-label { font-size: 13px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #fff; } /* লাইট থিম সাপোর্ট */ html[data-theme="light"] .ad-slot-inner { background: rgba(255, 255, 255, 0.5); } html[data-theme="light"] .ad-slot-placeholder { color: rgba(0, 0, 0, 0.65); background: repeating-linear-gradient( 45deg, rgba(245, 158, 11, 0.10) 0, rgba(245, 158, 11, 0.10) 12px, rgba(0, 0, 0, 0.03) 12px, rgba(0, 0, 0, 0.03) 24px ), rgba(255, 255, 255, 0.7); border-color: rgba(245, 158, 11, 0.5); } html[data-theme="light"] .ad-grid-card .ad-grid-label { color: #1a1a1a; /* লাইট থিমে সাদা লেবেল অস্পষ্ট হতো — কালো করি */ } /* ============================================================ ৮. ফিল্টার ও পেজিনেশন বাটন ============================================================ */ .filter-btn { transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s var(--ease-out); position: relative; opacity: 0.72; padding: 8px 16px; border-radius: var(--radius-full); font-size: 15.5px !important; font-weight: 600 !important; } .filter-btn:hover { opacity: 1; transform: translateY(-1px); } .filter-btn.active { color: #fff; opacity: 1; background: rgba(245, 158, 11, 0.12); } /* অ্যাক্টিভ আন্ডারলাইন — ব্র্যান্ড গ্রেডিয়েন্ট + গ্লো */ .filter-btn.active::after { content: ''; position: absolute; bottom: 4px; left: 14px; right: 14px; height: 2px; background: var(--grad-brand); border-radius: var(--radius-full); box-shadow: 0 2px 10px rgba(245, 158, 11, 0.42); } html[data-theme="light"] .filter-btn.active { color: var(--purple-deep) !important; } html[data-theme="light"] .filter-btn { color: var(--text-secondary) !important; } .page-btn { transition: all 0.2s var(--ease-out); border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); } .page-btn:hover:not(.active) { background: var(--card-hover-bg); transform: translateY(-1px); } .page-btn.active { background: var(--grad-brand); border: none; box-shadow: var(--shadow-glow); } /* ============================================================ ৯. একশন বাটন — রেফারেন্স ডিজাইন অনুযায়ী ============================================================ */ /* ===== লাইক / ডিসলাইক বার (আলাদা ফিচার) ===== */ .like-dislike-bar { display: flex; align-items: center; gap: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 6px; box-shadow: var(--shadow-sm); } .video-description-box { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 14px 16px; box-shadow: var(--shadow-sm); } .ld-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-lg); color: var(--text-secondary); background: transparent; border: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.18s var(--ease-out); font-size: 14px; font-weight: 600; } .ld-btn .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; } .ld-btn .ld-pct { font-weight: 800; font-size: 15px; color: var(--text-primary); } .ld-btn .ld-label { font-size: 13px; opacity: 0.7; } .ld-btn:hover { background: var(--card-hover-bg); color: var(--text-primary); } .ld-btn:active { transform: scale(0.97); } .ld-btn.active { background: var(--grad-brand); color: #fff; box-shadow: 0 6px 22px rgba(217, 119, 6, 0.45); } .ld-btn.active.dislike { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); box-shadow: 0 6px 22px rgba(239, 68, 68, 0.45); } .ld-btn.active .material-symbols-outlined, .ld-btn.active .ld-pct, .ld-btn.active .ld-label { color: #fff; opacity: 1; } .ld-divider { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; } /* ===== অ্যাকশন বার (segmented pill bar — connected segments) ===== */ .action-box { background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 6px; box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.05); overflow: hidden; } .action-box-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; } /* Mobile: allow horizontal scroll so download button is reachable */ @media (max-width: 640px) { .action-box { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .action-box::-webkit-scrollbar { display: none; } .action-box-grid { grid-auto-columns: minmax(72px, 1fr); width: max-content; min-width: 100%; } .action-box-grid .ab { padding: 12px 2px; min-height: 72px; gap: 5px; border-radius: var(--radius-md); } .action-box-grid .ab .material-symbols-outlined { font-size: 24px; } .action-box-grid .ab .ab-label { font-size: 8px; letter-spacing: 0.01em; line-height: 1.15; } .cat-chip { font-size: 13px; padding: 8px 14px; } .cat-chip-icon { font-size: 16px; } .cat-chip-count { font-size: 10px; } .filter-btn { font-size: 13.5px !important; padding: 8px 12px; } .video-card h3 { font-size: 15px !important; } .video-card .text-sm { font-size: 12.5px !important; } .video-card .material-symbols-outlined.text-sm { font-size: 14px !important; } } .action-box-grid .ab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px; border-radius: var(--radius-lg); background: transparent; border: none; color: var(--text-secondary); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s var(--ease-out); min-height: 84px; } /* segment divider — thin line between buttons */ .action-box-grid .ab:not(:first-child)::before { content: ''; position: absolute; left: 0; top: 24%; height: 52%; width: 1px; background: var(--border); transition: opacity 0.2s ease; } .action-box-grid .ab .material-symbols-outlined { font-size: 30px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; color: var(--text-secondary); transition: color 0.2s ease, transform 0.2s var(--ease-spring); } .action-box-grid .ab .ab-label { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-align: center; line-height: 1.2; text-transform: uppercase; } .action-box-grid .ab:hover { background: var(--card-hover-bg); color: var(--text-primary); } /* hide dividers touching a hovered segment for a clean highlight */ .action-box-grid .ab:hover::before, .action-box-grid .ab:hover + .ab::before { opacity: 0; } .action-box-grid .ab:hover .material-symbols-outlined { color: var(--accent); transform: translateY(-2px) scale(1.08); } .action-box-grid .ab:active { transform: scale(0.95); } /* ===== active / selected states — amber accent ===== */ .action-box-grid .ab.fav-active, .action-box-grid .ab.wl-active, .action-box-grid .ab.active { background: var(--grad-brand); color: #fff; box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35); } .action-box-grid .ab.fav-active::before, .action-box-grid .ab.fav-active + .ab::before, .action-box-grid .ab.wl-active::before, .action-box-grid .ab.wl-active + .ab::before, .action-box-grid .ab.active::before, .action-box-grid .ab.active + .ab::before { opacity: 0; } .action-box-grid .ab.fav-active .material-symbols-outlined, .action-box-grid .ab.fav-active .ab-label, .action-box-grid .ab.wl-active .material-symbols-outlined, .action-box-grid .ab.wl-active .ab-label, .action-box-grid .ab.active .material-symbols-outlined, .action-box-grid .ab.active .ab-label { color: #fff; } .action-box-grid .ab.fav-active .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; } /* ===== বিস্তারিত মডাল রো ===== */ .detail-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .detail-row .material-symbols-outlined { font-size: 22px; color: var(--purple-light); flex-shrink: 0; margin-top: 2px; } .detail-row .d-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } .detail-row .d-value { font-size: 14px; color: var(--text-primary); line-height: 1.5; word-break: break-word; } /* লাইক বাটনে আইকন পালস অ্যানিমেশন (স্প্রিং ইজ) */ .like-btn.animate .material-symbols-outlined { animation: likePulse 0.5s var(--ease-spring); } @keyframes likePulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.45); } 70% { transform: scale(0.92); } } /* ---- Fallback .hidden (যদি Tailwind CDN লোড না হয়) ---- */ .hidden { display: none !important; } /* ============================================================ ১১. টোস্ট নোটিফিকেশন (পিল, গ্লো, স্প্রিং স্লাইড) ============================================================ */ .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(120px); background: var(--grad-brand); color: #fff; padding: 13px 26px; border-radius: var(--radius-full); font-weight: 600; font-size: 14px; box-shadow: var(--shadow-glow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.20); z-index: 9000; opacity: 0; transition: transform 0.4s var(--ease-spring), opacity 0.3s ease; pointer-events: none; max-width: 90vw; text-align: center; letter-spacing: -0.01em; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ ১২. লোডার স্কেলিটন (শাইমার) ============================================================ */ .skeleton { background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-to) 50%, var(--skeleton-from) 75%); background-size: 200% 100%; animation: shimmer 1.6s infinite linear; border-radius: var(--radius-md); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ ১৩. মোডাল (বটম-শিট — শেয়ার, কমেন্ট, রিপোর্ট) ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: var(--overlay-bg); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); z-index: 8000; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-sheet { background: var(--bg-surface); background-image: linear-gradient(180deg, rgba(245, 158, 11, 0.07), transparent 20%); border: 1px solid var(--border); border-top: 1px solid rgba(245, 158, 11, 0.20); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; width: 100%; max-width: 480px; padding: 22px 22px 30px; transform: translateY(100%); transition: transform 0.38s var(--ease-out); max-height: 82vh; overflow-y: auto; box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.06); position: relative; } /* উপরে ড্র্যাগ-হ্যান্ডেল ইঙ্গিত */ .modal-sheet::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: var(--radius-full); background: var(--text-faint); } .modal-overlay.active .modal-sheet { transform: translateY(0); } /* ============================================================ ১৪. স্ক্রল বার ============================================================ */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d97706, #f59e0b); border-radius: var(--radius-full); border: 1px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f59e0b, #fbbf24); background-clip: padding-box; } /* ============================================================ ১৫. অ্যানিমেশন কীফ্রেম ============================================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* ভিডিও কার্ড স্ট্যাগার্ড অ্যানিমেশন (কার্ড একে একে উঠে আসে) */ .video-card { animation: slideUp 0.5s var(--ease-out) backwards; } .video-card:nth-child(1) { animation-delay: 0.04s; } .video-card:nth-child(2) { animation-delay: 0.08s; } .video-card:nth-child(3) { animation-delay: 0.12s; } .video-card:nth-child(4) { animation-delay: 0.16s; } .video-card:nth-child(5) { animation-delay: 0.20s; } .video-card:nth-child(6) { animation-delay: 0.24s; } .video-card:nth-child(7) { animation-delay: 0.28s; } .video-card:nth-child(8) { animation-delay: 0.32s; } .video-card:nth-child(9) { animation-delay: 0.36s; } /* ============================================================ ১৬. সার্চ রেজাল্ট হাইলাইট ============================================================ */ .search-highlight { background: rgba(245, 158, 11, 0.28); color: var(--accent-light); padding: 0 3px; border-radius: 4px; font-weight: 600; } /* ============================================================ ১৭. রেসপন্সিভ টুইকস ============================================================ */ @media (max-width: 380px) { .action-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { header, main, footer { width: calc(100% - 20px); } header { border-radius: 24px; top: 8px; padding-bottom: 14px; } header nav { gap: 8px; } .glass-search input { font-size: 14px; } .glass-search button { width: 48px; padding-inline: 0; } .filter-btn { padding: 7px 10px; } .toast { bottom: 16px; width: min(92vw, 320px); padding: 12px 16px; font-size: 13px; } } /* ============================================================ ১৮. ফোকাস অ্যাক্সেসিবিলিটি ============================================================ */ button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; } /* প্রিফার রিডিউসড মোশন */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ ইউজার ড্রপডাউন — fixed position, সবার উপরে ============================================================ */ .user-dropdown-fixed { background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-xl), 0 0 0 1px rgba(245, 158, 11, 0.08); animation: dropdown-appear 0.18s var(--ease-out) both; } @keyframes dropdown-appear { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } html[data-theme="light"] .user-dropdown-fixed { background: #ffffff; border-color: rgba(28, 25, 23, 0.10); box-shadow: 0 20px 60px rgba(28, 25, 23, 0.18), 0 0 0 1px rgba(217, 119, 6, 0.08); } /* ============================================================ ১৯. থিম টগল বাটন ============================================================ */ .theme-toggle { position: relative; width: 54px; height: 30px; border-radius: var(--radius-full); background: linear-gradient(135deg, #192036, #2a3150); border: 1px solid var(--border); cursor: pointer; padding: 0; flex-shrink: 0; transition: background 0.35s ease, border-color 0.35s ease; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4); } .theme-toggle:hover { border-color: var(--border-strong); } .theme-toggle .toggle-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #d97706, #f59e0b); display: flex; align-items: center; justify-content: center; transition: transform 0.4s var(--ease-spring), background 0.35s ease; box-shadow: 0 2px 8px rgba(217, 119, 6, 0.5); } .theme-toggle .toggle-knob .material-symbols-outlined { font-size: 14px; color: #fff; transition: color 0.3s ease; } html[data-theme="light"] .theme-toggle { background: linear-gradient(135deg, #bfdbfe, #fde68a); border-color: rgba(245, 158, 11, 0.32); box-shadow: inset 0 2px 6px rgba(245, 158, 11, 0.16); } html[data-theme="light"] .theme-toggle .toggle-knob { background: linear-gradient(135deg, #f59e0b, #ea580c); transform: translateX(24px); box-shadow: 0 2px 10px rgba(245, 158, 11, 0.55); } html[data-theme="light"] .theme-toggle .toggle-knob .material-symbols-outlined { color: #fff; } /* ============================================================ ২০. লাইট মোড — Tailwind হার্ডকোডেড কালার অভাররাইড Tailwind CDN `!important` ব্যবহার করে তাই `html[data-theme="light"]` দিয়ে specificity বাড়িয়ে override করা হয়েছে। ============================================================ */ /* --- ব্যাকগ্রাউন্ড ও সারফেস --- */ html[data-theme="light"] .bg-black { background-color: var(--bg-primary) !important; } html[data-theme="light"] body::before { opacity: 0.05; } html[data-theme="light"] body::after { opacity: 0.72; } html[data-theme="light"] .bg-obsidian { background-color: var(--obsidian) !important; } html[data-theme="light"] .bg-surface-container-low { background-color: var(--bg-surface) !important; } html[data-theme="light"] .bg-surface-container, html[data-theme="light"] .bg-surface-container-high, html[data-theme="light"] .bg-surface-container-highest { background-color: var(--bg-surface-2) !important; } html[data-theme="light"] .bg-gray-200 { background-color: var(--dropdown-bg) !important; } html[data-theme="light"] .bg-purple-600, html[data-theme="light"] .bg-purple-600\/80 { background-color: var(--purple) !important; } html[data-theme="light"] .bg-blue-600 { background-color: var(--blue-accent) !important; } html[data-theme="light"] .bg-purple-600\/80 { background-color: rgba(245, 158, 11, 0.85) !important; } html[data-theme="light"] .bg-green-500 { background-color: #22c55e !important; } html[data-theme="light"] .bg-sky-500 { background-color: #0ea5e9 !important; } /* --- টেক্সট — প্রাইমারি (সব সাদা টেক্সট → ডার্ক) --- */ html[data-theme="light"] .text-white { color: var(--text-primary) !important; } html[data-theme="light"] .text-gray-200, html[data-theme="light"] .text-gray-800 { color: var(--text-primary) !important; } html[data-theme="light"] .text-gray-300 { color: var(--text-secondary) !important; } html[data-theme="light"] .text-gray-500 { color: var(--text-muted) !important; } /* --- টেক্সট — opacity variants (কন্ট্রাস্ট বাড়ানো হয়েছে) --- */ /* text-white/90, /80, /70 → সেকেন্ডারি (ভালো পড়া যায়) */ html[data-theme="light"] .text-white\/90, html[data-theme="light"] .text-white\/80, html[data-theme="light"] .text-white\/70 { color: var(--text-secondary) !important; } /* text-white/60, /50 → মিউটেড কিন্তু পড়া যায় */ html[data-theme="light"] .text-white\/60, html[data-theme="light"] .text-white\/50 { color: var(--text-muted) !important; } /* text-white/40, /30, /20, /10 → এখনও পড়া যায় (faint কিন্তু visible) */ html[data-theme="light"] .text-white\/40, html[data-theme="light"] .text-white\/30, html[data-theme="light"] .text-white\/20, html[data-theme="light"] .text-white\/10 { color: var(--text-faint) !important; } /* --- .login-gradient বাটনে টেক্সট সব থিমে সাদা থাকবে --- */ html[data-theme="light"] .login-gradient.text-white, html[data-theme="light"] .login-gradient .text-white, html[data-theme="light"] .login-gradient *:not(.material-symbols-outlined) { color: #fff !important; } html[data-theme="light"] .login-gradient .material-symbols-outlined { color: #fff !important; } /* --- পার্পল ও ব্লু টেক্সট --- */ html[data-theme="light"] .text-purple-400 { color: var(--purple-deep) !important; } html[data-theme="light"] .text-blue-400 { color: var(--blue-accent) !important; } /* --- video.html কালার ক্লাস --- */ html[data-theme="light"] .text-on-surface { color: var(--text-primary) !important; } html[data-theme="light"] .text-on-surface-variant { color: var(--text-secondary) !important; } html[data-theme="light"] .text-outline-c { color: var(--input-placeholder) !important; } html[data-theme="light"] .placeholder\:text-outline-c::placeholder { color: var(--input-placeholder) !important; } html[data-theme="light"] .bg-secondary-container { background-color: var(--blue-accent) !important; } /* --- বর্ডার --- */ html[data-theme="light"] .border-white\/10, html[data-theme="light"] .border-white\/5, html[data-theme="light"] .border-white\/20, html[data-theme="light"] .border-gray-300 { border-color: var(--border) !important; } /* --- হোভার স্টেট --- */ html[data-theme="light"] .hover\:bg-white\/5:hover, html[data-theme="light"] .hover\:bg-white\/10:hover, html[data-theme="light"] .hover\:bg-gray-300:hover { background-color: var(--card-hover-bg) !important; } html[data-theme="light"] .hover\:bg-blue-500:hover { background-color: var(--purple) !important; } html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: var(--card-hover-bg) !important; } html[data-theme="light"] .hover\:text-white:hover { color: var(--text-primary) !important; } html[data-theme="light"] .hover\:text-purple-400:hover { color: var(--purple-deep) !important; } html[data-theme="light"] .hover\:bg-surface-container-highest:hover { background-color: var(--bg-surface-2) !important; } /* --- Placeholder --- */ html[data-theme="light"] .placeholder\:text-white\/40::placeholder, html[data-theme="light"] .placeholder\:text-white\/50::placeholder, html[data-theme="light"] .placeholder\:text-white\/60::placeholder, html[data-theme="light"] .placeholder\:text-white\/70::placeholder, html[data-theme="light"] .placeholder\:text-white\/80::placeholder, html[data-theme="light"] .placeholder\:text-white\/::placeholder, html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: var(--input-placeholder) !important; } /* --- JS-rendered inline text-white (innerHTML) — catch-all --- */ html[data-theme="light"] [style*="color: rgb(255"] { color: var(--text-primary) !important; } /* --- Material Symbols আইকন — light mode এ ডার্ক কালার --- */ html[data-theme="light"] .text-white\/70 .material-symbols-outlined, html[data-theme="light"] .text-white\/60 .material-symbols-outlined, html[data-theme="light"] .text-white\/50 .material-symbols-outlined { color: var(--text-muted) !important; } html[data-theme="light"] .text-white\/40 .material-symbols-outlined, html[data-theme="light"] .text-white\/30 .material-symbols-outlined { color: var(--text-faint) !important; } html[data-theme="light"] .text-white\/20 .material-symbols-outlined, html[data-theme="light"] .text-white\/10 .material-symbols-outlined { color: var(--text-faint) !important; } /* --- সাইডবার light mode --- */ html[data-theme="light"] .sidebar-drawer { background-color: var(--bg-surface); border-color: var(--border); background-image: linear-gradient(180deg, rgba(245, 158, 11, 0.05), transparent 30%); } html[data-theme="light"] .sidebar-drawer .text-white\/70 { color: var(--text-muted) !important; } html[data-theme="light"] .sidebar-drawer .text-white\/30 { color: var(--text-faint) !important; } html[data-theme="light"] .sidebar-drawer .text-white\/50 { color: var(--text-faint) !important; } /* --- টাইম ড্রপডাউন light mode --- */ html[data-theme="light"] #time-dropdown-menu { background-color: var(--dropdown-bg); box-shadow: var(--shadow-lg); } html[data-theme="light"] .dropdown-option { color: var(--dropdown-text); } html[data-theme="light"] .dropdown-option:hover { background-color: var(--dropdown-hover); color: var(--purple-deep); } html[data-theme="light"] .dropdown-option.border-b, html[data-theme="light"] .dropdown-option.border-gray-300 { border-color: var(--dropdown-border) !important; } /* --- টোস্ট light mode --- */ html[data-theme="light"] .toast { color: #fff; } /* --- ভিডিও কার্ড light mode --- */ html[data-theme="light"] .video-card { background: var(--card-bg); border-color: var(--card-border); box-shadow: var(--shadow-sm); } html[data-theme="light"] .video-card:hover { background: var(--card-hover-bg); border-color: var(--border-strong); box-shadow: var(--shadow-md), 0 0 0 1px rgba(245, 158, 11, 0.10); } /* ভিডিও কার্ডের মেটাডেটা টেক্সট সবসময় ভালো দেখা যাবে */ html[data-theme="light"] .video-card .text-white\/40 { color: var(--text-muted) !important; } html[data-theme="light"] .video-card .text-white\/50 { color: var(--text-muted) !important; } /* ভিডিও কার্ডের আইকন ও ছোট টেক্সট */ html[data-theme="light"] .video-card .material-symbols-outlined { color: var(--text-muted); } /* --- SVG আইকন light mode (হ্যামবার্গার, সার্চ, ব্যাক বাটন) --- */ html[data-theme="light"] button svg rect { fill: var(--text-primary); } html[data-theme="light"] button svg line, html[data-theme="light"] button svg path, html[data-theme="light"] button svg circle { stroke: var(--text-primary); } /* --- পেজিনেশন light mode --- */ html[data-theme="light"] .page-btn { color: var(--text-primary) !important; border-color: var(--border) !important; background-color: var(--bg-surface) !important; } html[data-theme="light"] .page-btn.active { background: var(--grad-brand) !important; color: #fff !important; border-color: transparent !important; } html[data-theme="light"] .page-btn:hover:not(.active) { background-color: var(--card-hover-bg) !important; } /* --- ফুটার light mode --- */ html[data-theme="light"] footer { background-color: var(--bg-surface) !important; border-top-color: var(--border) !important; } html[data-theme="light"] footer .text-white\/60 { color: var(--text-muted) !important; } html[data-theme="light"] footer .text-white\/40 { color: var(--text-faint) !important; } /* --- Top Categories section light mode --- */ html[data-theme="light"] #top-categories { background-color: var(--bg-surface) !important; border-color: var(--border) !important; } html[data-theme="light"] #top-categories .text-white\/50 { color: var(--text-muted) !important; } /* --- হেডার light mode --- */ html[data-theme="light"] header.bg-obsidian { background-color: var(--obsidian) !important; } /* --- ফিল্টার বাটন (already has specific rules, keeping them) --- */ /* --- মডাল light mode --- */ html[data-theme="light"] .modal-sheet { background-color: var(--bg-surface) !important; border-color: var(--border) !important; border-top-color: var(--border-strong) !important; } html[data-theme="light"] .modal-sheet .text-white { color: var(--text-primary) !important; } html[data-theme="light"] .modal-sheet .text-white\/60 { color: var(--text-muted) !important; } html[data-theme="light"] .modal-sheet .text-white\/80 { color: var(--text-secondary) !important; } html[data-theme="light"] .modal-sheet .bg-surface-container-high { background-color: var(--bg-surface-2) !important; } /* Share modal brand buttons keep white text in light mode (their backgrounds are fixed brand colors, not theme surfaces) */ html[data-theme="light"] .modal-sheet .share-brand-btn { color: #fff !important; } /* --- ক্যাটাগরি চিপস light mode --- */ html[data-theme="light"] #category-chips button { background-color: var(--bg-surface-2) !important; color: var(--text-secondary) !important; border: 1px solid var(--border); } html[data-theme="light"] #category-chips button.bg-purple-600 { background-color: var(--purple) !important; color: #fff !important; border-color: transparent !important; } html[data-theme="light"] #category-chips button:hover:not(.bg-purple-600) { background-color: var(--purple) !important; color: #fff !important; } /* --- ভিডিও ডিটেইল পেজ (video.html) light mode --- */ html[data-theme="light"] .bg-surface-container-highest { background-color: var(--bg-surface-2) !important; } html[data-theme="light"] .bg-black\/40 { background-color: rgba(0, 0, 0, 0.35) !important; } /* --- Empty state icon light mode --- */ html[data-theme="light"] .text-white\/20 .material-symbols-outlined { color: var(--text-faint) !important; } /* --- Show More button hover text fix --- */ html[data-theme="light"] .show-more-btn:hover .material-symbols-outlined, html[data-theme="light"] .show-more-btn:hover span { color: #fff !important; } /* ============================================================ ২১. Show More বাটন — ভিডিও পেজে রিলেটেড ভিডিও লোড ============================================================ */ .show-more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 148px; padding: 10px 18px; border-radius: var(--radius-full); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; background: var(--glass-bg); border: 1px solid var(--border); color: var(--text-primary); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: all 0.25s var(--ease-out); position: relative; overflow: hidden; isolation: isolate; } .show-more-btn::before { content: ''; position: absolute; inset: 0; background: var(--grad-brand); opacity: 0; transition: opacity 0.25s var(--ease-out); z-index: 0; } .show-more-btn:hover::before { opacity: 1; } .show-more-btn:hover { border-color: var(--border-strong); box-shadow: 0 0 24px rgba(245, 158, 11, 0.25), var(--shadow-md); transform: translateY(-2px); } .show-more-btn:active { transform: translateY(0) scale(0.97); } /* আইকন ও টেক্সট gradient এর উপরে থাকবে */ .show-more-btn > .material-symbols-outlined, .show-more-btn > span, .show-more-btn > .show-more-label { position: relative; z-index: 1; } .show-more-label { display: inline-block; color: inherit; white-space: nowrap; } .show-more-btn:focus-visible { outline: 3px solid rgba(245, 158, 11, 0.55); outline-offset: 3px; } /* Light mode */ html[data-theme="light"] .show-more-btn { background: rgba(245, 158, 11, 0.06); border-color: rgba(245, 158, 11, 0.18); color: var(--purple-deep) !important; } html[data-theme="light"] .show-more-btn:hover { border-color: rgba(245, 158, 11, 0.35); box-shadow: 0 0 24px rgba(245, 158, 11, 0.14), var(--shadow-md); } /* ============================================================ ২২. বড় প্লে বাটন (ভিডিও পেজ) — প্রিমিয়াম গ্লো ============================================================ */ .play-button-big { position: relative; width: 88px; height: 88px; border-radius: 50%; background: var(--grad-brand); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5), var(--shadow-glow-strong); transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease; animation: pulseRing 2.5s infinite; } .play-button-big:hover { transform: scale(1.12); box-shadow: 0 0 0 12px rgba(245, 158, 11, 0.0), var(--shadow-glow-strong); } .play-button-big .play-icon { font-size: 48px; color: #fff; margin-left: 4px; /* প্লে আইকন সেন্টারিং */ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* পালস রিং অ্যানিমেশন */ .play-pulse { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(245, 158, 11, 0.6); opacity: 0; animation: pulseExpand 2.5s infinite var(--ease-out); pointer-events: none; } @keyframes pulseRing { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5), var(--shadow-glow-strong); } 50% { box-shadow: 0 0 0 16px rgba(245, 158, 11, 0.0), var(--shadow-glow-strong); } } @keyframes pulseExpand { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.4); opacity: 0; } } /* প্লে ওভারলে হোভারে ডার্ক */ .play-overlay { transition: background-color 0.3s ease; } .play-overlay:hover { background-color: rgba(0, 0, 0, 0.45) !important; } /* ============================================================ ২৩. ভিডিও পেজ অ্যাকশন — পুরোনো action-grid (এখন নতুন action-box ব্যবহৃত) ============================================================ */ .action-grid { gap: 10px; } /* ============================================================ ২৫. শেয়ার অপশন ও রিপোর্ট অপশন ============================================================ */ .share-option, .report-option { cursor: pointer; transition: transform 0.2s var(--ease-out), background-color 0.2s ease; } .share-option:active, .report-option:active { transform: scale(0.96); } /* ব্র্যান্ড SVG আইকন — Material Symbols আইকনের সাইজের সাথে ম্যাচ */ .share-icon { width: 24px; height: 24px; color: inherit; flex-shrink: 0; } /* Light mode: segmented action bar — segments transparent, container is the surface */ html[data-theme="light"] .action-grid .bg-surface-container-high { background-color: var(--bg-surface-2) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; } html[data-theme="light"] .action-box-grid .ab { background-color: transparent !important; border: none !important; color: var(--text-secondary) !important; } html[data-theme="light"] .action-box-grid .ab:hover { background-color: var(--card-hover-bg) !important; color: var(--text-primary) !important; } html[data-theme="light"] .action-box-grid .ab:hover .material-symbols-outlined { color: var(--accent-deep) !important; } /* লাইট মোডেও অ্যাক্টিভ/সিলেক্টেড বাটন amber, টেক্সট সাদা */ html[data-theme="light"] .action-box-grid .ab.fav-active, html[data-theme="light"] .action-box-grid .ab.wl-active, html[data-theme="light"] .action-box-grid .ab.active { background: var(--grad-brand) !important; color: #fff !important; } html[data-theme="light"] .action-box-grid .ab.fav-active .material-symbols-outlined, html[data-theme="light"] .action-box-grid .ab.fav-active .ab-label, html[data-theme="light"] .action-box-grid .ab.wl-active .material-symbols-outlined, html[data-theme="light"] .action-box-grid .ab.wl-active .ab-label, html[data-theme="light"] .action-box-grid .ab.active .material-symbols-outlined, html[data-theme="light"] .action-box-grid .ab.active .ab-label { color: #fff !important; } html[data-theme="light"] .play-overlay { background-color: rgba(0, 0, 0, 0.25) !important; } /* ============================================================ ২৬. Live Search Suggestions Dropdown ============================================================ */ /* --- Dropdown container --- */ #search-suggest { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl), var(--shadow-glow); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); animation: suggestSlideDown 0.22s var(--ease-out); overflow: hidden; } /* ===== Premium content shell ===== */ header > div:first-child, main > *:not(#video-grid):not(#pagination):not(#top-categories), footer > * { position: relative; z-index: 1; } #search-wrapper, #time-dropdown-wrapper, #section-title-wrapper, #category-bar, #pagination, #top-categories { width: 100%; } #search-wrapper { padding-top: 2px; } #video-grid { gap: 1.5rem; } #top-categories { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 96%, transparent), var(--bg-surface-2)) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; } footer .text-white\/40, footer .text-white\/60 { letter-spacing: 0.01em; } @media (min-width: 768px) { header { top: 14px; } main { padding-bottom: 56px; } .video-card { padding: 14px; } } @keyframes suggestSlideDown { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* --- Each suggestion row --- */ .suggest-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--text-primary); transition: background-color 0.15s ease; border-bottom: 1px solid var(--border-subtle); } .suggest-item:last-child { border-bottom: none; } .suggest-item:hover { background: var(--card-hover-bg); } .suggest-item:active { background: rgba(245, 158, 11, 0.18); transform: scale(0.995); } /* --- Thumbnail --- */ .suggest-thumb { width: 80px; height: 45px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--bg-surface-2); box-shadow: var(--shadow-sm); } /* --- Meta (title + subtitle) --- */ .suggest-meta { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; } .suggest-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .suggest-sub { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .suggest-category { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-light); background: rgba(245, 158, 11, 0.14); padding: 1px 6px; border-radius: var(--radius-sm); flex-shrink: 0; } /* --- Play arrow icon --- */ .suggest-arrow { font-size: 24px; color: var(--accent-light); flex-shrink: 0; opacity: 0; transition: opacity 0.2s ease, transform 0.2s var(--ease-out); } .suggest-item:hover .suggest-arrow { opacity: 1; transform: scale(1.15); } /* --- "No results" message inside dropdown --- */ #search-suggest > div:not(.suggest-item) { padding: 16px 20px; text-align: center; font-size: 13px; color: var(--text-muted); } /* --- Light mode dropdown --- */ html[data-theme="light"] #search-suggest { background: var(--bg-elevated); border-color: var(--border); box-shadow: var(--shadow-xl), 0 0 24px rgba(245, 158, 11, 0.12); } html[data-theme="light"] .suggest-item:hover { background: var(--dropdown-hover); } html[data-theme="light"] .suggest-title { color: var(--text-primary); } html[data-theme="light"] .suggest-sub { color: var(--text-muted); } html[data-theme="light"] .suggest-category { color: var(--purple-deep); background: rgba(245, 158, 11, 0.12); } html[data-theme="light"] .suggest-arrow { color: var(--purple-deep); } html[data-theme="light"] .suggest-thumb { background: var(--bg-surface-2); box-shadow: var(--shadow-sm); } /* ============================================================ HOVER PREVIEW FEATURE ------------------------------------------------------------ Thumbnail hover preview: video plays on hover (desktop) or swipe (mobile), with a progress bar indicator. ============================================================ */ /* Preview video element — hidden by default, shown during hover */ .card-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease; z-index: 2; pointer-events: none; } /* Override Tailwind's hidden class for preview video */ .video-card .card-preview.hidden { display: block !important; opacity: 0; visibility: hidden; } .video-card .card-preview:not(.hidden) { display: block !important; visibility: visible; } /* Progress bar container */ .preview-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.2); z-index: 10; overflow: hidden; opacity: 1; transition: opacity 0.2s ease; } .preview-progress.hidden { opacity: 0; } /* Progress bar fill (animated) */ .preview-progress::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 0 2px 2px 0; box-shadow: 0 0 8px rgba(245, 158, 11, 0.6); animation: previewProgress 10s linear forwards; } /* Progress bar animation - fills over 10 seconds */ @keyframes previewProgress { from { width: 0%; } to { width: 100%; } } /* Mobile touch feedback - subtle glow on swipe */ @media (hover: none) { .video-card:active .thumb-wrapper { box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); } } /* ============================================================ ২৩. ADMIN PANEL (#dashboard) — Light Mode Fixes ------------------------------------------------------------ admin.html এর ফর্ম ইনপুট/ড্রপজোন/সিলেক্ট/প্রোগ্রেস বার এ `bg-black/40` (scrim) লাইট মোডে অন্ধকার হয়ে যায়, তাই টেক্সট পড়া যায় না। শুধু #dashboard scope এ ঠিক করা হয়েছে। ============================================================ */ /* --- Inputs / Textarea / Select (admin form fields) --- */ html[data-theme="light"] #dashboard input[type="text"], html[data-theme="light"] #dashboard input[type="password"], html[data-theme="light"] #dashboard input[type="checkbox"], html[data-theme="light"] #dashboard textarea, html[data-theme="light"] #dashboard select { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* Select dropdown পপআপ (browser native) — ডার্ক bg ঠিক করা */ html[data-theme="light"] #dashboard select option { background-color: var(--bg-surface); color: var(--text-primary); } /* Select এর ড্রপডাউন অ্যারো ওভাররাইড করতে নেটিভ স্টাইলিং */ html[data-theme="light"] #dashboard select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } /* Placeholder কালার */ html[data-theme="light"] #dashboard input::placeholder, html[data-theme="light"] #dashboard textarea::placeholder { color: var(--input-placeholder) !important; } /* --- Dropzones (video + thumbnail upload areas) --- */ html[data-theme="light"] #dashboard .dropzone { background-color: var(--bg-surface) !important; border-color: var(--border) !important; border-style: dashed; } html[data-theme="light"] #dashboard .dropzone:hover { border-color: var(--border-strong) !important; background-color: var(--card-hover-bg) !important; } html[data-theme="light"] #dashboard .dropzone .material-symbols-outlined { color: var(--text-muted); } html[data-theme="light"] #dashboard .dropzone:hover .material-symbols-outlined { color: var(--purple-deep); } /* --- Code chips (inline `` tags) --- */ html[data-theme="light"] #dashboard code { background-color: var(--bg-surface-2) !important; color: var(--purple-deep) !important; } /* --- Progress bar track + fill --- */ html[data-theme="light"] #dashboard #progress-wrap > div:first-of-type { background-color: var(--bg-surface-2) !important; } html[data-theme="light"] #dashboard #progress-bar { background: var(--grad-brand) !important; } /* --- DEV warning banner (amber) — boost text contrast --- */ html[data-theme="light"] #dashboard #dev-warning { background-color: rgba(245, 158, 11, 0.12) !important; border-color: rgba(217, 119, 6, 0.45) !important; } html[data-theme="light"] #dashboard #dev-warning .text-amber-300 { color: #92400e !important; /* deep amber — readable on light */ } html[data-theme="light"] #dashboard #dev-warning .text-amber-400 { color: #b45309 !important; } html[data-theme="light"] #dashboard #dev-warning .text-amber-200\/80 { color: #78350f !important; } /* --- Manage Videos list rows --- */ html[data-theme="light"] #dashboard #manage-list > div { background-color: var(--bg-surface) !important; border-color: var(--border-subtle) !important; box-shadow: var(--shadow-sm); } html[data-theme="light"] #dashboard #manage-list > div:hover { border-color: var(--border) !important; background-color: var(--card-hover-bg) !important; } /* thumbnail placeholder bg */ html[data-theme="light"] #dashboard #manage-list img.bg-black\/40, html[data-theme="light"] #dashboard #manage-list img[class*="bg-black"] { background-color: var(--bg-surface-2) !important; } /* --- Result card (success) --- */ html[data-theme="light"] #dashboard #result-card { background-color: var(--bg-surface) !important; border-color: rgba(34, 197, 94, 0.5) !important; box-shadow: var(--shadow-md); } html[data-theme="light"] #dashboard #result-card .text-green-300 { color: #15803d !important; } html[data-theme="light"] #dashboard #result-card .text-white\/80 { color: var(--text-secondary) !important; } /* --- Delete modal --- */ html[data-theme="light"] #delete-modal { background-color: var(--overlay-bg) !important; } html[data-theme="light"] #delete-modal > div { background-color: var(--bg-surface) !important; border-color: rgba(239, 68, 68, 0.45) !important; box-shadow: var(--shadow-xl); } html[data-theme="light"] #delete-modal .text-white\/60 { color: var(--text-secondary) !important; } html[data-theme="light"] #delete-modal .text-red-300\/80 { color: #b91c1c !important; } /* --- Auth screen (#auth-screen) backdrop --- */ html[data-theme="light"] #auth-screen { background-color: var(--bg-primary); } html[data-theme="light"] #auth-screen form { background-color: var(--bg-surface) !important; border-color: var(--border) !important; box-shadow: var(--shadow-xl); } /* --- Footer --- */ html[data-theme="light"] #dashboard > footer { background-color: var(--bg-surface) !important; border-color: var(--border) !important; } /* ============================================================ ২৭. Auth Page (login.html) — token-based styles ------------------------------------------------------------ আগে login.html এ ৩৪০-লাইন embedded