/* ========================================================================== Public site — "Broadcast" theme ========================================================================== */ :root { --void: #0B0E14; --panel: #131826; --panel-2: #1A2033; --hairline: #242938; --text: #F4F6FA; --text-muted: #8A93A6; --text-faint: #5B6478; --red: #E63946; --red-dim: #33141a; --amber: #F4A300; --amber-dim: #332506; --header-bg: rgba(11,14,20,0.9); --alert-error-bg: #33141a; --alert-error-text: #ffb3b8; --alert-success-bg: #12291d; --alert-success-text: #7be3a6; --notice-info-bg: rgba(79,142,247,0.12); --notice-info-text: #6FA8FF; /* Fixed "player chrome" palette - intentionally does NOT change with the light/dark theme toggle below, matching the convention that video/audio player controls (YouTube, Netflix, etc.) stay dark regardless of the surrounding page's theme. */ --chrome-bg: #131826; --chrome-bg-2: #1A2033; --chrome-border: #242938; --chrome-text: #F4F6FA; --chrome-text-muted: #8A93A6; --chrome-text-faint: #5B6478; --font-display: 'Barlow Condensed', 'Noto Sans Bengali', sans-serif; --font-body: 'Inter', 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* Light theme - applied via data-theme="light" on , set by the inline script in (from localStorage) and toggled by the button in the site header. See assets/js/site.js for the toggle logic. */ [data-theme="light"] { --void: #F7F8FA; --panel: #FFFFFF; --panel-2: #F1F3F7; --hairline: #E2E5EC; --text: #14171F; --text-muted: #4A5262; --text-faint: #8A93A6; --red: #E63946; --red-dim: #FCE4E6; --amber: #C97F00; --amber-dim: #FFF3D6; --header-bg: rgba(255,255,255,0.85); --alert-error-bg: #FCE4E6; --alert-error-text: #B3232E; --alert-success-bg: #E3F5EA; --alert-success-text: #0F5C33; --notice-info-bg: rgba(79,142,247,0.12); --notice-info-text: #1D4ED8; /* --chrome-* intentionally omitted: player controls stay dark in both themes */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--void); color: var(--text); font-family: var(--font-body); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.2px; margin: 0; } ::selection { background: var(--red); color: #fff; } .banner-strip:empty { display: none; } /* ---- Header ------------------------------------------------------------ */ .site-header { border-bottom: 1px solid var(--hairline); position: sticky; top: 0; background: var(--header-bg); backdrop-filter: blur(10px); z-index: 20; } .site-header-inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 20px; } .site-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .site-logo-img { height: 34px; width: auto; border-radius: 6px; } .brand-mark { width: 14px; height: 14px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--red-dim); } .brand-text { font-family: var(--font-display); font-weight: 700; font-size: 21px; } .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; row-gap: 6px; flex: 1; min-width: 0; } .site-nav a { padding: 9px 16px; border-radius: 30px; font-weight: 600; font-size: 14.5px; color: var(--text-muted); white-space: nowrap; } .site-nav a:hover { color: var(--text); } .site-nav a.active { background: var(--panel-2); color: var(--text); } /* Channel/station search box, now shown in the page content (homepage, radio listing) instead of the header, so the nav never has to compete with it for space and its links never wrap mid-word. */ .inline-search { display: flex; flex-shrink: 0; } .inline-search input { background: var(--panel-2); border: 1px solid var(--hairline); color: var(--text); padding: 10px 18px; border-radius: 30px; font-size: 14px; width: 260px; outline: none; } .inline-search input:focus { border-color: var(--red); } .nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 22px; cursor: pointer; flex-shrink: 0; } .lang-switch { display: flex; flex-shrink: 0; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 20px; padding: 3px; gap: 2px; } .lang-option { padding: 5px 11px; border-radius: 16px; font-size: 12px; font-weight: 700; color: var(--text-faint); } .lang-option.active { background: var(--red); color: #fff; } .lang-option:not(.active):hover { color: var(--text); } .theme-toggle { background: var(--panel-2); border: 1px solid var(--hairline); color: var(--text); width: 38px; height: 38px; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--red); } .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: inline; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: inline; } /* ---- Banner ads ---------------------------------------------------------- */ .banner-strip { display: flex; justify-content: center; padding: 14px 24px; } .banner-ad { position: relative; display: inline-block; max-width: 100%; } .banner-ad img { border-radius: 8px; max-width: 100%; height: auto; } .banner-ad-label { position: absolute; bottom: 4px; right: 8px; font-size: 9.5px; color: rgba(255,255,255,0.55); background: rgba(0,0,0,0.4); padding: 1px 6px; border-radius: 4px; letter-spacing: 0.05em; } .banner-ad-sidebar { display: block; margin-bottom: 20px; } .banner-ad-sidebar img { width: 100%; } /* ---- Banner rotator (auto-cycles slides every N seconds) ---------------- */ .banner-rotator { display: block; } .banner-slide { display: none; animation: bannerFadeIn .5s ease; } .banner-slide.active { display: block; } @keyframes bannerFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ---- On-air ticker (homepage signature element) -------------------------- */ .onair-ticker { border-bottom: 1px solid var(--hairline); background: var(--panel); overflow: hidden; display: flex; align-items: center; } .onair-label { flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--red); padding: 12px 18px; border-right: 1px solid var(--hairline); background: var(--red-dim); } .onair-track { display: flex; gap: 10px; padding: 10px 16px; animation: ticker 30s linear infinite; white-space: nowrap; } .onair-ticker:hover .onair-track { animation-play-state: paused; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .onair-chip { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 30px; padding: 6px 14px 6px 6px; font-size: 13px; font-weight: 500; flex-shrink: 0; } .onair-chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .onair-chip:hover { border-color: var(--red); } /* ---- Live dot / badges --------------------------------------------------- */ .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: inline-block; animation: blink 1.6s ease-in-out infinite; } .live-dot-amber { background: var(--amber); } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .live-badge { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; background: rgba(11,14,20,0.75); backdrop-filter: blur(4px); color: #fff; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; padding: 5px 10px 5px 8px; border-radius: 20px; } .live-badge-amber { color: var(--amber); } /* ---- Page structure ------------------------------------------------------ */ .page-head { max-width: 1200px; margin: 32px auto 4px; padding: 0 24px; } .page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .page-head h1 { font-size: 34px; } .page-head p { color: var(--text-muted); margin: 6px 0 0; } .filter-tabs { max-width: 1200px; margin: 20px auto 0; padding: 0 24px; display: flex; gap: 8px; flex-wrap: wrap; } .filter-tabs a { padding: 8px 16px; border-radius: 30px; background: var(--panel); border: 1px solid var(--hairline); font-size: 13.5px; font-weight: 600; color: var(--text-muted); } .filter-tabs a:hover { color: var(--text); } .filter-tabs a.active { background: var(--red); border-color: var(--red); color: #fff; } .content-layout { max-width: 1320px; margin: 24px auto 60px; padding: 0 24px; display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; } .content-main { min-width: 0; } /* ---- Channel grid ------------------------------------------------------- */ .channel-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .channel-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; transition: transform .15s ease, border-color .15s ease; } .channel-card:hover { transform: translateY(-3px); border-color: var(--red); } .channel-thumb { position: relative; aspect-ratio: 16/10; background: var(--panel-2); display: flex; align-items: center; justify-content: center; } .channel-thumb img { width: 100%; height: 100%; object-fit: cover; } .channel-thumb-fallback { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; } .radio-thumb { aspect-ratio: 1/1; } .channel-info { padding: 12px 14px; } .channel-name { font-weight: 600; font-size: 14.5px; margin-bottom: 3px; } .channel-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); } .radio-grid { max-width: 1200px; margin: 24px auto 60px; padding: 0 24px; } .empty-state { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state .btn { margin-top: 14px; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border-radius: 30px; font-weight: 600; font-size: 14px; } .btn-primary { background: var(--red); color: #fff; } /* ---- Sidebar -------------------------------------------------------------- */ .content-sidebar, .watch-sidebar { display: flex; flex-direction: column; gap: 20px; } .sidebar-panel { background: var(--panel); border: 1px solid var(--hairline); border-radius: 12px; padding: 18px; } .sidebar-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .sidebar-panel-head h3 { font-size: 16px; } .sidebar-panel-head a { font-size: 12px; color: var(--red); font-weight: 600; } .sidebar-radio-list, .sidebar-channel-list { list-style: none; margin: 0; padding: 0; } .sidebar-radio-list li a, .sidebar-channel-list li a { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; font-weight: 500; border-bottom: 1px solid var(--hairline); } .sidebar-radio-list li:last-child a, .sidebar-channel-list li:last-child a { border-bottom: none; } .radio-mini-icon { color: var(--amber); } .sidebar-channel-list img, .mini-thumb-fallback { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; background: var(--panel-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); } /* ---- Watch / listen layout ------------------------------------------------ */ .watch-layout { max-width: 1200px; margin: 24px auto 60px; padding: 0 24px; display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; } .watch-main { min-width: 0; } .player-shell { position: relative; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--hairline); } .player-video-wrap { position: relative; aspect-ratio: 16/9; background: #000; } #playerVideo { width: 100%; height: 100%; object-fit: contain; background: #000; } .player-youtube { width: 100%; height: 100%; } .player-youtube iframe { width: 100%; height: 100%; border: 0; } .player-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(11,14,20,0.55); color: var(--chrome-text-muted); font-size: 13.5px; } .spinner { width: 16px; height: 16px; border: 2px solid var(--chrome-text-faint); border-top-color: var(--red); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .player-unmute { position: absolute; bottom: 16px; left: 16px; background: rgba(11,14,20,0.75); border: 1px solid var(--chrome-border); color: #fff; padding: 8px 14px; border-radius: 30px; font-size: 12.5px; font-weight: 600; cursor: pointer; } .player-watermark { position: absolute; z-index: 3; max-width: 15%; max-height: 20%; pointer-events: none; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)); } .wm-top-left { top: 14px; left: 14px; } .wm-top-right { top: 14px; right: 14px; } .wm-bottom-left { bottom: 14px; left: 14px; } .wm-bottom-right { bottom: 14px; right: 14px; } .wm-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .player-controls { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--chrome-bg); border-top: 1px solid var(--chrome-border); } .control-btn { background: var(--chrome-bg-2); border: 1px solid var(--chrome-border); color: var(--chrome-text); width: 38px; height: 38px; border-radius: 50%; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .control-btn:hover { border-color: var(--red); } .control-btn-sm { width: 32px; height: 32px; font-size: 13px; } .player-controls .volume-control { display: flex; align-items: center; gap: 8px; } .player-controls .volume-control input[type="range"] { width: 90px; accent-color: var(--red); } .control-hint { font-size: 12px; color: var(--chrome-text-faint); font-family: var(--font-mono); } .player-overlay-banner { position: absolute; top: 12px; right: 12px; z-index: 2; } .player-overlay-banner .banner-ad img { max-width: 200px; border-radius: 6px; } .player-adblock { position: absolute; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; z-index: 5; } .player-adblock video, .player-adblock img { width: 100%; height: 100%; object-fit: contain; cursor: pointer; } .ad-tag { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,0.9); color: #111; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .ad-countdown { position: absolute; bottom: 14px; left: 14px; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.85); } .ad-skip-btn { position: absolute; bottom: 14px; right: 14px; background: rgba(255,255,255,0.95); color: #111; border: none; padding: 9px 16px; border-radius: 30px; font-weight: 700; font-size: 12.5px; cursor: pointer; } .watch-info { padding: 20px 4px 0; } .watch-info-head { display: flex; align-items: center; gap: 14px; } .watch-info-head h1 { font-size: 26px; } .watch-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-top: 6px; } .watch-description { color: var(--text-muted); margin-top: 12px; max-width: 640px; } /* ---- Radio player --------------------------------------------------------- */ .radio-player-shell { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--hairline); border-radius: 14px; padding: 32px; text-align: center; } .radio-art { position: relative; width: 140px; height: 140px; margin: 0 auto 22px; border-radius: 50%; overflow: hidden; background: var(--panel-2); border: 3px solid var(--hairline); display: flex; align-items: center; justify-content: center; } .radio-art img { width: 100%; height: 100%; object-fit: cover; } .radio-art-fallback { font-size: 46px; color: var(--amber); } .eq-bars { position: absolute; bottom: 0; left: 0; right: 0; height: 24px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; background: rgba(11,14,20,0.55); padding: 4px 0; } .eq-bars span { width: 3px; height: 4px; background: var(--amber); border-radius: 2px; transition: height .2s ease; } .eq-bars.playing span { animation: eq 0.9s ease-in-out infinite; } .eq-bars.playing span:nth-child(1) { animation-delay: 0s; } .eq-bars.playing span:nth-child(2) { animation-delay: .1s; } .eq-bars.playing span:nth-child(3) { animation-delay: .2s; } .eq-bars.playing span:nth-child(4) { animation-delay: .15s; } .eq-bars.playing span:nth-child(5) { animation-delay: .05s; } @keyframes eq { 0%, 100% { height: 4px; } 50% { height: 18px; } } .radio-controls { display: flex; align-items: center; gap: 16px; max-width: 420px; margin: 0 auto; } .play-pause-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--amber); border: none; color: #1a1200; font-size: 18px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .radio-controls-info { flex: 1; text-align: left; min-width: 0; } .radio-name { font-weight: 700; font-size: 15px; } .radio-status { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); margin-top: 2px; } .volume-control { display: flex; align-items: center; gap: 6px; color: var(--text-faint); } .volume-control input { accent-color: var(--amber); width: 80px; } /* ---- Footer ---------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--hairline); padding: 32px 24px; margin-top: 40px; } .site-footer-inner { max-width: 1200px; margin: 0 auto; text-align: center; color: var(--text-faint); font-size: 12.5px; } .footer-nav { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .footer-nav a { padding: 7px 14px; border-radius: 30px; background: var(--panel); border: 1px solid var(--hairline); font-size: 13px; font-weight: 600; color: var(--text-muted); } .footer-nav a:hover { color: var(--text); border-color: var(--red); } .footer-brand { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-muted); } .footer-tagline { margin: 4px 0 12px; } .app-badges { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; } .app-badges-label { font-size: 12px; color: var(--text-faint); font-weight: 600; margin-right: 4px; } .app-badge { display: flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--hairline); border-radius: 10px; padding: 8px 16px 8px 12px; color: var(--text); } .app-badge:hover { border-color: var(--red); } .app-badge-icon { font-size: 18px; color: var(--red); } .app-badge-text { display: flex; flex-direction: column; text-align: left; font-size: 14px; font-weight: 700; line-height: 1.25; } .app-badge-text small { font-size: 9.5px; font-weight: 500; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; } /* ---- Newspaper bookmark directory ---------------------------------------- */ .newspaper-sections { max-width: 1000px; margin: 24px auto 20px; padding: 0 24px; } .newspaper-section { margin-bottom: 34px; } .newspaper-section h2 { font-size: 22px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); } .newspaper-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .newspaper-card { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 16px; transition: border-color .15s ease, transform .15s ease; } .newspaper-card:hover { border-color: var(--red); transform: translateY(-2px); } .newspaper-initial { width: 38px; height: 38px; border-radius: 8px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--red); flex-shrink: 0; } .newspaper-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .newspaper-name { font-weight: 600; font-size: 14.5px; } .newspaper-note { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; } .newspaper-arrow { color: var(--text-faint); font-size: 15px; flex-shrink: 0; } .newspaper-disclaimer { max-width: 1000px; margin: 0 auto 40px; padding: 0 24px; font-size: 12px; color: var(--text-faint); } /* ---- Contact page ------------------------------------------------------- */ .contact-layout { max-width: 1000px; margin: 24px auto 60px; padding: 0 24px; display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: start; } .contact-form-panel, .form-panel { background: var(--panel); border: 1px solid var(--hairline); border-radius: 12px; padding: 24px; } .contact-info-panel { background: var(--panel); border: 1px solid var(--hairline); border-radius: 12px; padding: 22px; } .contact-info-panel h3 { font-size: 17px; margin-bottom: 14px; } .contact-info-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-muted); margin-bottom: 12px; } .contact-info-ic { color: var(--red); flex-shrink: 0; } /* Shared form control styling for every public-site form (contact, auth, submit-media) */ .contact-form-panel .form-group, .form-panel .form-group { margin-bottom: 16px; } .contact-form-panel label, .form-panel label { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 7px; font-weight: 600; } .contact-form-panel .form-row, .form-panel .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact-form-panel input, .contact-form-panel textarea, .contact-form-panel select, .form-panel input, .form-panel textarea, .form-panel select { width: 100%; background: var(--panel-2); border: 1px solid var(--hairline); color: var(--text); padding: 11px 13px; border-radius: 8px; font-size: 14px; font-family: var(--font-body); outline: none; } .contact-form-panel input:focus, .contact-form-panel textarea:focus, .contact-form-panel select:focus, .form-panel input:focus, .form-panel textarea:focus, .form-panel select:focus { border-color: var(--red); } .contact-form-panel textarea, .form-panel textarea { resize: vertical; min-height: 120px; } .contact-form-panel .alert, .form-panel .alert { padding: 12px 16px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; } .contact-form-panel .alert-error, .form-panel .alert-error { background: var(--alert-error-bg); color: var(--alert-error-text); } .contact-form-panel .alert-success, .form-panel .alert-success { background: var(--alert-success-bg); color: var(--alert-success-text); } .form-panel .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); margin: 4px 0 18px; } .form-panel .checkbox-label input { width: auto; } .form-panel .form-actions { margin-top: 4px; } .form-panel .field-hint { font-size: 12px; color: var(--text-faint); margin: -8px 0 16px; } .form-panel .radio-pill-group { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .form-panel .radio-pill { display: flex; align-items: center; gap: 7px; border: 1px solid var(--hairline); background: var(--panel-2); padding: 9px 15px; border-radius: 30px; font-size: 13px; cursor: pointer; color: var(--text-muted); } .form-panel .radio-pill input { width: auto; } /* ---- Auth pages (register / login / my account) ---------------------------- */ .auth-layout { max-width: 460px; margin: 24px auto 60px; padding: 0 24px; } .auth-switch { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--text-muted); } .auth-switch a { color: var(--red); font-weight: 600; } .account-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .account-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--red); flex-shrink: 0; } .submission-item { border-bottom: 1px solid var(--hairline); padding: 12px 0; } .submission-item:last-child { border-bottom: none; } .submission-meta { font-size: 12px; color: var(--text-faint); margin-top: 3px; } .tag { display: inline-block; background: var(--panel-2); border: 1px solid var(--hairline); color: var(--text-muted); font-size: 10.5px; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em; } .status-badge { display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 600; } .status-active { background: rgba(46,204,113,0.12); color: #2ECC71; } .status-inactive { background: var(--panel-2); color: var(--text-faint); } /* ---- Framed news viewer page ---------------------------------------------- */ .frame-toolbar { max-width: 1320px; margin: 16px auto 0; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .frame-toolbar-title { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-muted); } .frame-toolbar-title img { width: 24px; height: 24px; border-radius: 5px; } .frame-toolbar-actions { display: flex; gap: 8px; } .btn-sm-frame { font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 30px; background: var(--panel); border: 1px solid var(--hairline); color: var(--text-muted); } .btn-sm-frame:hover { color: var(--text); border-color: var(--red); } .frame-fallback-hint { max-width: 1320px; margin: 10px auto 0; padding: 0 24px; font-size: 12px; color: var(--text-faint); } .frame-fallback-hint a { color: var(--red); font-weight: 600; } .frame-wrap { max-width: 1320px; margin: 12px auto 40px; padding: 0 24px; } .frame-wrap iframe { width: 100%; height: 78vh; min-height: 500px; border: 1px solid var(--hairline); border-radius: 10px; background: #fff; } /* ---- Site notice board -------------------------------------------------- */ .site-notice { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 24px; border-bottom: 1px solid var(--hairline); } .site-notice-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 13.5px; max-width: 900px; text-align: center; } .site-notice-inner strong { flex-shrink: 0; } .site-notice-close { background: none; border: none; font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; opacity: 0.7; } .site-notice-close:hover { opacity: 1; } .site-notice-info { background: var(--notice-info-bg); color: var(--notice-info-text); } .site-notice-info .site-notice-close { color: var(--notice-info-text); } .site-notice-warning { background: var(--amber-dim); color: var(--amber); } .site-notice-warning .site-notice-close { color: var(--amber); } .site-notice-success { background: var(--alert-success-bg); color: var(--alert-success-text); } .site-notice-success .site-notice-close { color: var(--alert-success-text); } /* ---- Footer News Media strip --------------------------------------------- */ .footer-news-media { margin-bottom: 18px; } .footer-news-media-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 700; margin-bottom: 8px; } .footer-news-media-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .footer-news-media-links a { padding: 6px 13px; border-radius: 30px; background: var(--panel); border: 1px solid var(--hairline); font-size: 12.5px; color: var(--text-muted); } .footer-news-media-links a:hover { color: var(--text); border-color: var(--red); } .footer-news-media-more { color: var(--red) !important; font-weight: 700; } /* ---- Side popup ads -------------------------------------------------------- */ .popup-ad { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--hairline); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; } .popup-ad.visible { opacity: 1; pointer-events: auto; } /* Floating: vertically centered on the side, stays put while scrolling */ .popup-ad-floating-left { top: 50%; left: 12px; transform: translateY(-50%) translateX(0); } .popup-ad-floating-left:not(.visible) { transform: translateY(-50%) translateX(-20px); } .popup-ad-floating-right { top: 50%; right: 12px; transform: translateY(-50%) translateX(0); } .popup-ad-floating-right:not(.visible) { transform: translateY(-50%) translateX(20px); } /* Bottom: anchored to the bottom corner, like a small chat-widget tab */ .popup-ad-bottom-left { bottom: 20px; left: 12px; transform: translateX(0); } .popup-ad-bottom-left:not(.visible) { transform: translateX(-20px); } .popup-ad-bottom-right { bottom: 20px; right: 12px; transform: translateX(0); } .popup-ad-bottom-right:not(.visible) { transform: translateX(20px); } .popup-ad img { display: block; border-radius: 6px; object-fit: cover; } .popup-ad-close { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; border: 2px solid var(--void); font-size: 15px; line-height: 1; cursor: pointer; } .popup-ad-label { position: absolute; bottom: 10px; right: 10px; font-size: 9px; color: rgba(255,255,255,0.6); background: rgba(0,0,0,0.45); padding: 1px 6px; border-radius: 4px; letter-spacing: 0.05em; } /* ---- Responsive -------------------------------------------------------- */ @media (max-width: 1150px) { .channel-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 900px) { .content-layout, .watch-layout { grid-template-columns: 1fr; } .contact-layout { grid-template-columns: 1fr; } .channel-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 700px) { .channel-grid { grid-template-columns: repeat(3, 1fr); } .inline-search { width: 100%; } .inline-search input { width: 100%; } } @media (max-width: 480px) { .channel-grid { grid-template-columns: repeat(2, 1fr); } .popup-ad-floating-left { left: 6px; transform: translateY(-50%) scale(0.85); transform-origin: left center; } .popup-ad-floating-right { right: 6px; transform: translateY(-50%) scale(0.85); transform-origin: right center; } .popup-ad-bottom-left { left: 6px; bottom: 10px; transform: scale(0.85); transform-origin: bottom left; } .popup-ad-bottom-right { right: 6px; bottom: 10px; transform: scale(0.85); transform-origin: bottom right; } } @media (max-width: 640px) { .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--panel); flex-direction: column; padding: 10px; border-bottom: 1px solid var(--hairline); display: none; } .site-nav.open { display: flex; } .nav-toggle { display: block; margin-left: auto; } .site-header-inner { flex-wrap: wrap; } .page-head h1 { font-size: 26px; } .radio-controls { flex-wrap: wrap; } }