/* ========================================== Radio Gaza — Front Site Stylesheet Right-rail + slim top strips, Navy + Gold RTL ========================================== */ :root { /* Brand */ --gold: #f5b400; --gold-soft: #ffd45a; --gold-dark: #c89200; --gold-tint: rgba(245, 180, 0, 0.12); --navy: #172537; --navy-deep: #0f1c2d; --navy-soft: #1f3047; --navy-line: #2a3d57; /* Surfaces (light) */ --bg: #f4f5f7; --surface: #ffffff; --surface-alt: #f7f8fa; --line: #e6e8ec; --line-soft: #f0f2f5; /* Text */ --text: #172537; --text-strong: #0f1c2d; --text-muted: #6b7a90; --text-soft: #94a0b3; --text-on-navy: #e3e8ef; /* States */ --danger: #dc3545; /* Tokens */ --rail-w: 280px; --topbar-yellow-h: 44px; --topbar-navy-h: 40px; --breaking-h: 42px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px; --shadow-sm: 0 1px 3px rgba(15, 28, 45, 0.06); --shadow: 0 4px 18px rgba(15, 28, 45, 0.08); --shadow-lg: 0 10px 30px rgba(15, 28, 45, 0.12); --transition: all 0.25s ease; --font: 'Tajawal', 'Segoe UI', sans-serif; --container-max: 1180px; } body.dark-mode { --bg: #0e1a2a; --surface: #15273d; --surface-alt: #1a2e47; --line: #233a55; --line-soft: #1c3049; --text: #e3e8ef; --text-strong: #ffffff; --text-muted: #98a8be; --text-soft: #6f8099; } /* ========================================== Reset + base ========================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.7; font-size: 15px; min-height: 100vh; } a { color: inherit; text-decoration: none; transition: var(--transition); } img { max-width: 100%; height: auto; display: block; } button { font-family: inherit; cursor: pointer; } /* Global image fallback — when JS swaps in the logo.svg for a broken image, keep it centered with breathing room instead of stretched to fill the box. */ img.img-fallback { object-fit: contain !important; background: var(--surface-alt); padding: 12%; opacity: 0.7; } body.dark-mode img.img-fallback { background: var(--surface-alt); opacity: 0.55; } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } /* ========================================== Shell (rail + main column) ========================================== */ .site-shell { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; align-items: stretch; } .site-main-col { min-width: 0; /* prevent overflow on grid child */ display: flex; flex-direction: column; padding-bottom: var(--breaking-h); /* leave room for fixed ticker */ } /* When the episode mini-player is visible, reserve extra space at the bottom so the ticker + mini-player don't cover content. JS adds .has-ep-mini to . */ body.has-ep-mini .site-main-col { padding-bottom: calc(var(--breaking-h) + 64px); } .site-main { flex: 1; } /* ========================================== Right rail ========================================== */ .site-rail { background: var(--navy); color: #fff; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 50; border-inline-start: 1px solid rgba(255, 255, 255, 0.04); scrollbar-width: thin; scrollbar-color: var(--navy-line) transparent; } .site-rail::-webkit-scrollbar { width: 6px; } .site-rail::-webkit-scrollbar-thumb { background: var(--navy-line); border-radius: 3px; } .rail-inner { padding: 24px 20px 28px; display: flex; flex-direction: column; gap: 22px; } .rail-logo { display: flex; align-items: center; justify-content: center; color: #fff; padding-bottom: 18px; border-bottom: 1px solid var(--navy-line); } .rail-logo:hover { color: #fff; } .rail-logo-img { display: block; width: 100%; max-width: 200px; height: auto; } /* Rail nav */ .rail-nav-list { list-style: none; display: flex; flex-direction: column; gap: 2px; } .rail-nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: rgba(255, 255, 255, 0.78); font-size: 14px; font-weight: 600; border-radius: var(--radius); position: relative; transition: var(--transition); } .rail-nav-link i { width: 20px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.55); transition: var(--transition); } .rail-nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.04); } .rail-nav-link:hover i { color: var(--gold); } .rail-nav-item.active .rail-nav-link { color: var(--navy); background: var(--gold); font-weight: 800; } .rail-nav-item.active .rail-nav-link i { color: var(--navy); } /* Rail live button */ .rail-live-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 16px; background: var(--gold); color: var(--navy); border: none; border-radius: var(--radius); font-size: 14px; font-weight: 800; transition: var(--transition); } .rail-live-btn:hover { background: var(--gold-soft); transform: translateY(-1px); } .rail-live-btn i { font-size: 14px; } /* Now-playing card */ /* Broadcast stack — visually unifies the on-air-now band with the live-broadcast card so they read as a single component. Inner cards drop their adjoining border radius / border so they appear connected. */ .rail-broadcast-stack { display: flex; flex-direction: column; gap: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); } /* On-air-now band sits at the top of the stack. - .is-live → burgundy bg with red accent - .is-upcoming → navy bg with gold accent (the always-on default) */ .rail-onair-card { background: var(--navy-deep); border: 1px solid var(--navy-line); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-inline-start: 3px solid var(--gold); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; color: #fff; } .rail-broadcast-stack.is-live .rail-onair-card { background: #2c1421; border-color: #4a2030; border-inline-start-color: #ef4444; } /* When the on-air band is present, square-off the top of the broadcast card so the two read as one. Bottom corners stay rounded. */ .rail-broadcast-stack.has-onair .rail-now-card { border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .rail-onair-head { display: inline-flex; align-items: center; gap: 8px; } .rail-onair-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(245, 180, 0, 0.25); animation: pulse 1.5s ease-in-out infinite; flex: 0 0 auto; } .rail-broadcast-stack.is-live .rail-onair-pulse { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); } .rail-onair-label { font-size: 12px; font-weight: 800; color: var(--gold); letter-spacing: 0.3px; } .rail-broadcast-stack.is-live .rail-onair-label { color: #ef4444; } .rail-onair-time-sep { opacity: 0.5; } .rail-onair-body { display: flex; flex-direction: column; gap: 2px; color: #fff; transition: var(--transition); } .rail-onair-body:hover { color: var(--gold); } .rail-onair-name { font-size: 14px; font-weight: 800; color: #fff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rail-onair-time { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255, 255, 255, 0.7); } .rail-onair-time i { font-size: 10px; } /* Live broadcast card (rail) — title + station, big play button, volume slider. Matches the design tile: same place, same shape, no wide footer bar. */ .rail-now-card { background: var(--navy-deep); border: 1px solid var(--navy-line); border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 14px; } .rail-now-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .rail-now-headings { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rail-now-title { font-size: 18px; font-weight: 900; color: #fff; line-height: 1.2; } .rail-now-subtitle { font-size: 12px; color: var(--text-on-navy); opacity: 0.75; line-height: 1.3; } .rail-now-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; background: var(--navy-soft); color: rgba(255, 255, 255, 0.85); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .rail-now-play { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 14px; border: none; border-radius: 10px; background: var(--gold); color: var(--navy); font-weight: 900; font-size: 15px; cursor: pointer; transition: var(--transition); width: 100%; } .rail-now-play i { font-size: 13px; } .rail-now-play:hover { background: var(--gold-soft); } .rail-now-play:active { transform: scale(0.98); } .rail-now-play.is-playing { background: var(--gold-soft); box-shadow: 0 0 0 0 rgba(245, 180, 0, 0.55); animation: radioPulse 1.6s ease-out infinite; } /* Volume row: small mute icon + gold-fill range slider */ .rail-now-volume { display: flex; align-items: center; gap: 10px; padding-top: 2px; } .rail-now-volume-icon { background: none; border: none; color: rgba(255, 255, 255, 0.7); font-size: 14px; width: 22px; height: 22px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s ease; } .rail-now-volume-icon:hover { color: var(--gold); } .rail-now-volume-icon.is-muted { color: rgba(255, 255, 255, 0.35); } .rail-now-volume-slider { flex: 1; height: 6px; -webkit-appearance: none; appearance: none; background: linear-gradient( to right, var(--gold) 0%, var(--gold) var(--val, 80%), rgba(255, 255, 255, 0.15) var(--val, 80%), rgba(255, 255, 255, 0.15) 100% ); border-radius: 3px; outline: none; cursor: pointer; } [dir="rtl"] .rail-now-volume-slider { background: linear-gradient( to left, var(--gold) 0%, var(--gold) var(--val, 80%), rgba(255, 255, 255, 0.15) var(--val, 80%), rgba(255, 255, 255, 0.15) 100% ); } .rail-now-volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); cursor: pointer; transition: transform 0.1s ease; } .rail-now-volume-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .rail-now-volume-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); cursor: pointer; } .rail-now-error { margin: 0; padding: 6px 10px; border-radius: 6px; background: rgba(255, 0, 0, 0.12); color: #ff8b8b; font-size: 12px; text-align: center; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Mobile rail toggle (hidden on desktop) */ .rail-mobile-toggle { display: none; position: fixed; top: 12px; inset-inline-start: 12px; z-index: 70; width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--navy); color: var(--gold); box-shadow: var(--shadow); font-size: 18px; } .rail-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 28, 45, 0.55); z-index: 49; } .rail-backdrop.show { display: block; } /* ========================================== Top strips (yellow + navy) ========================================== */ .topbar-yellow { background: var(--gold); color: var(--navy); min-height: var(--topbar-yellow-h); display: flex; align-items: stretch; } .topbar-yellow-inner { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 18px; } /* Site name + tagline on the inline-start (visual right in RTL) of the yellow bar. */ .topbar-site-info { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; flex-shrink: 0; } .topbar-search { display: flex; align-items: center; background: rgba(255, 255, 255, 0.92); border-radius: var(--radius-pill); padding: 4px 6px 4px 14px; min-width: 240px; max-width: 320px; flex: 0 1 auto; } .topbar-search input { flex: 1; border: none; background: transparent; font-family: var(--font); font-size: 13px; color: var(--navy); padding: 4px 10px; outline: none; min-width: 0; } .topbar-search input::placeholder { color: var(--text-muted); } .topbar-search button { background: none; border: none; color: var(--navy); font-size: 13px; padding: 4px 6px; } .topbar-yellow-end { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .topbar-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; background: rgba(255, 255, 255, 0.35); border-radius: var(--radius-pill); padding: 6px 14px; margin-inline-start: auto; /* pushes search + toggle to the visual far end */ } .topbar-date i { opacity: 0.7; } .dark-mode-toggle { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(23, 37, 55, 0.18); background: rgba(255, 255, 255, 0.55); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 13px; transition: var(--transition); } .dark-mode-toggle:hover { background: var(--navy); color: var(--gold); border-color: var(--navy); } /* Quick-edit post (admin) */ .topbar-quick-edit { position: relative; display: inline-flex; margin: 0; } .topbar-quick-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(23, 37, 55, 0.22); background: rgba(255, 255, 255, 0.55); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 12px; transition: var(--transition); } .topbar-quick-btn:hover { background: var(--navy); color: var(--gold); border-color: var(--navy); } .topbar-quick-popover { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 80; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(15, 28, 45, 0.18); padding: 10px 12px; display: flex; align-items: center; gap: 8px; min-width: 240px; } .topbar-quick-popover[hidden] { display: none; } .topbar-quick-popover::before { content: ''; position: absolute; top: -6px; inset-inline-end: 14px; width: 12px; height: 12px; background: var(--surface); border-top: 1px solid var(--line); border-inline-start: 1px solid var(--line); transform: rotate(45deg); } .topbar-quick-label { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; } .topbar-quick-popover input { flex: 1; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; font-family: var(--font); font-size: 13px; color: var(--text); background: var(--surface); outline: none; width: 70px; min-width: 0; text-align: center; } .topbar-quick-popover input::-webkit-outer-spin-button, .topbar-quick-popover input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .topbar-quick-popover input { -moz-appearance: textfield; } .topbar-quick-popover input:focus { border-color: var(--gold); } .topbar-quick-submit { width: 30px; height: 30px; background: var(--gold); color: var(--navy); border: none; border-radius: var(--radius); font-size: 12px; cursor: pointer; flex-shrink: 0; transition: var(--transition); } .topbar-quick-submit:hover { background: var(--gold-soft); } /* Site name + tagline now live on the yellow bar (dark navy + dark-gold accent). */ .topbar-site-name { font-size: 16px; font-weight: 900; color: var(--navy); letter-spacing: 0.2px; } .topbar-site-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(23, 37, 55, 0.85); font-weight: 700; } .topbar-site-tag-sep { color: var(--navy); opacity: 0.45; } /* Breaking-news strip — fixed at the bottom of the viewport */ .topbar-breaking { position: fixed; bottom: 0; inset-inline-start: var(--rail-w); inset-inline-end: 0; height: var(--breaking-h); background: var(--navy-deep); border-top: 1px solid var(--navy-line); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18); display: flex; align-items: center; z-index: 55; } /* ========================================== Episode mini-player — sticky bar that shows whenever a podcast episode is playing. Sits just above the breaking-news ticker. Survives Turbo navigation thanks to data-turbo-permanent on the wrapper + audio tag. ========================================== */ .ep-mini { position: fixed; bottom: var(--breaking-h); inset-inline-start: var(--rail-w); inset-inline-end: 0; background: var(--navy-soft); border-top: 1px solid var(--navy-line); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25); z-index: 56; color: #fff; animation: epMiniSlideUp 0.25s ease-out; } @keyframes epMiniSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ep-mini-inner { display: flex; align-items: center; gap: 14px; padding: 10px 22px; max-width: 100%; } .ep-mini-play { width: 38px; height: 38px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--gold); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; transition: background 0.2s ease, transform 0.1s ease; } .ep-mini-play:hover { background: var(--gold-soft); } .ep-mini-play:active { transform: scale(0.95); } .ep-mini-play.is-playing { box-shadow: 0 0 0 0 rgba(245, 180, 0, 0.55); animation: radioPulse 1.6s ease-out infinite; } .ep-mini-info { display: flex; flex-direction: column; min-width: 140px; max-width: 260px; flex-shrink: 1; line-height: 1.25; } .ep-mini-title { color: #fff; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ep-mini-title:hover { color: var(--gold); } .ep-mini-program { font-size: 11px; color: rgba(255, 255, 255, 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ep-mini-progress { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; } .ep-mini-time { font-size: 11px; color: rgba(255, 255, 255, 0.65); font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; unicode-bidi: isolate; direction: ltr; } .ep-mini-seek { flex: 1; height: 4px; -webkit-appearance: none; appearance: none; border-radius: 2px; outline: none; cursor: pointer; background: linear-gradient( to right, var(--gold) 0%, var(--gold) var(--ep-mini-progress, 0%), rgba(255, 255, 255, 0.18) var(--ep-mini-progress, 0%), rgba(255, 255, 255, 0.18) 100% ); } [dir="rtl"] .ep-mini-seek { background: linear-gradient( to left, var(--gold) 0%, var(--gold) var(--ep-mini-progress, 0%), rgba(255, 255, 255, 0.18) var(--ep-mini-progress, 0%), rgba(255, 255, 255, 0.18) 100% ); } .ep-mini-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.4); cursor: pointer; } .ep-mini-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.4); cursor: pointer; } .ep-mini-close { width: 30px; height: 30px; flex-shrink: 0; border: none; background: transparent; color: rgba(255, 255, 255, 0.55); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s ease, background 0.2s ease; } .ep-mini-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } /* Phones: hide the program subtitle and the seek time labels to fit in the strip */ @media (max-width: 575px) { .ep-mini-inner { padding: 8px 14px; gap: 10px; } .ep-mini-info { min-width: 0; max-width: 50%; } .ep-mini-program { display: none; } .ep-mini-time { display: none; } } .topbar-breaking-inner { width: 100%; padding: 0 24px; display: flex; align-items: center; gap: 14px; } .topbar-ticker-tag { background: var(--gold); color: var(--navy); padding: 5px 14px; border-radius: 4px; font-size: 12px; font-weight: 800; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; } .topbar-ticker-text-wrap { overflow: hidden; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; height: 100%; } .topbar-ticker-text { white-space: nowrap; font-size: 13px; color: #fff; font-weight: 500; text-align: center; margin: 0; line-height: 1; animation: ticker-rtl 28s linear infinite; } .topbar-ticker-link { color: #fff; transition: var(--transition); } .topbar-ticker-link:hover { color: var(--gold); } .topbar-ticker-sep { color: var(--gold); margin: 0 14px; font-weight: 800; } .topbar-ticker-time { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--gold); padding-inline-start: 14px; border-inline-start: 1px solid var(--navy-line); } .topbar-ticker-time i { font-size: 12px; opacity: 0.85; } @keyframes ticker-rtl { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } [dir="rtl"] .topbar-ticker-text { animation: ticker-rtl-rtl 28s linear infinite; } @keyframes ticker-rtl-rtl { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ========================================== Section blocks + titles ========================================== */ .section-block { padding: 36px 0; } .section-block.section-gray { background: var(--surface-alt); } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; } .section-title { font-size: 22px; font-weight: 800; color: var(--text-strong); display: flex; align-items: center; gap: 10px; margin: 0; } .title-accent { display: inline-block; width: 4px; height: 22px; background: var(--gold); border-radius: 2px; color: transparent; overflow: hidden; } .section-more { font-size: 13px; font-weight: 700; color: var(--gold-dark); display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--gold-tint); transition: var(--transition); } .section-more:hover { background: var(--gold); color: var(--navy); } /* ========================================== Page header (inner pages) ========================================== */ .page-header { background: var(--surface); color: var(--text-strong); padding: 30px 0 24px; border-bottom: 1px solid var(--line); } .page-header .container { display: flex; flex-direction: column; gap: 6px; } .page-title { font-size: 28px; font-weight: 900; color: var(--text-strong); display: flex; align-items: center; gap: 10px; margin: 0; } .page-header .title-accent { background: var(--gold); height: 28px; } .page-subtitle { font-size: 14px; color: var(--text-muted); margin: 0; } /* Legacy light variant — kept for compatibility */ .page-header.page-header--light { background: var(--surface); color: var(--text-strong); padding: 30px 0 22px; border-bottom: 1px solid var(--line); } .page-header.page-header--light .page-title { color: var(--text-strong); } .page-header.page-header--light .page-subtitle { color: var(--text-muted); } /* Programs page — two-column header (text | search) */ .programs-page-header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .programs-page-header .pg-header-text { display: flex; flex-direction: column; gap: 4px; } .programs-page-header .programs-search { margin: 0; flex-shrink: 0; width: 320px; max-width: 100%; } @media (max-width: 640px) { .programs-page-header .container { flex-direction: column; align-items: flex-end; } .programs-page-header .programs-search { width: 100%; } } /* ========================================== News filter bar (used on /news) ========================================== */ .news-filter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; } .news-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .news-filter-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--text-muted); flex-shrink: 0; } .news-filter-label i { color: var(--gold); font-size: 12px; } .news-filter-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; } .filter-pill { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; color: var(--text-muted); background: transparent; border: 1px solid var(--line); transition: var(--transition); white-space: nowrap; } .filter-pill:hover { color: var(--gold-dark); border-color: var(--gold); } .filter-pill.active { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 800; } .news-filter-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .filter-select { position: relative; display: inline-block; } .filter-select select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid var(--line); border-radius: var(--radius-pill); padding-block: 7px; padding-inline-start: 16px; padding-inline-end: 32px; background: var(--surface); color: var(--text); font-family: var(--font); font-size: 12px; font-weight: 700; cursor: pointer; outline: none; transition: var(--transition); } .filter-select select:hover, .filter-select select:focus { border-color: var(--gold); } .filter-select::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); color: var(--gold); pointer-events: none; font-size: 10px; } .news-filter-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line-soft); } .news-filter-count { font-size: 13px; color: var(--text-muted); font-weight: 600; } .news-filter-count strong { color: var(--gold-dark); font-weight: 800; } .news-filter-search { display: flex; align-items: center; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px 6px 3px 14px; width: 280px; max-width: 100%; transition: var(--transition); } .news-filter-search:focus-within { border-color: var(--gold); background: var(--surface); } .news-filter-search input { flex: 1; border: none; background: transparent; outline: none; font-family: var(--font); font-size: 13px; color: var(--text); padding: 5px 8px; min-width: 0; } .news-filter-search input::placeholder { color: var(--text-soft); } .news-filter-search button { border: none; background: none; color: var(--text-muted); font-size: 13px; padding: 4px 8px; cursor: pointer; } .news-filter-search button:hover { color: var(--gold-dark); } @media (max-width: 767px) { .news-filter { padding: 14px 16px; } .news-filter-row { gap: 10px; } .news-filter-controls { width: 100%; } .filter-select select { width: 100%; } .filter-select { flex: 1; } .news-filter-search { width: 100%; } } /* ========================================== Home featured banner — fixed audio-promo strip above the news section ========================================== */ .home-feature-section { padding: 22px 0 0; } .home-feature-banner { display: flex; align-items: center; gap: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; color: var(--text-strong); box-shadow: var(--shadow-sm); } .home-feature-banner-content { flex: 1; min-width: 0; } .home-feature-banner-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-tint); color: var(--gold-dark); padding: 5px 12px 5px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; margin-bottom: 12px; } .home-feature-banner-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(245, 180, 0, 0.25); } .home-feature-banner-title { font-size: 24px; font-weight: 900; color: var(--text-strong); line-height: 1.5; margin: 0 0 8px; } .home-feature-banner-summary { font-size: 14px; color: var(--text-soft); line-height: 1.7; margin: 0; } .home-feature-banner-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; background: var(--gold); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; } .home-feature-banner-btn { flex: 0 0 auto; background: var(--gold); color: var(--navy); border: none; border-radius: 10px; padding: 16px 28px; font-size: 15px; font-weight: 900; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: var(--transition); } .home-feature-banner-btn i { font-size: 12px; } .home-feature-banner-btn:hover { background: var(--gold-soft); transform: translateY(-1px); } .home-feature-banner-btn:active { transform: scale(0.98); } @media (max-width: 767px) { .home-feature-banner { flex-wrap: wrap; padding: 20px; gap: 14px; } .home-feature-banner-title { font-size: 18px; } .home-feature-banner-icon { width: 44px; height: 44px; font-size: 18px; } .home-feature-banner-btn { padding: 12px 22px; font-size: 14px; } } /* ========================================== Home hero (latest news + sidebar) ========================================== */ .home-hero-card { display: block; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; } .home-hero-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .home-hero-img { position: relative; height: 360px; overflow: hidden; } .home-hero-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .home-hero-card:hover .home-hero-img img { transform: scale(1.04); } .home-hero-img .breaking-badge { position: absolute; top: 16px; inset-inline-end: 16px; z-index: 2; } .home-hero-cat { position: absolute; bottom: 16px; inset-inline-start: 16px; background: var(--gold); color: var(--navy); padding: 5px 12px; border-radius: 4px; font-size: 12px; font-weight: 800; } .home-hero-body { padding: 22px 24px 26px; } .home-hero-title { font-size: 22px; font-weight: 900; line-height: 1.55; color: var(--text-strong); margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-hero-summary { font-size: 14px; color: var(--text-muted); line-height: 1.75; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-hero-date { font-size: 12px; color: var(--text-soft); display: inline-flex; align-items: center; gap: 6px; } .breaking-badge { display: inline-block; background: var(--danger); color: #fff; padding: 4px 14px; border-radius: 4px; font-size: 12px; font-weight: 800; animation: pulse 2s infinite; } /* Sidebar list (small news items beside hero) */ .home-news-sidebar { display: flex; flex-direction: column; gap: 12px; height: 100%; } .home-sidebar-item { display: flex; gap: 12px; background: var(--surface); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-sm); transition: var(--transition); flex: 1; min-height: 80px; } .home-sidebar-item:hover { box-shadow: var(--shadow); transform: translateX(-2px); } [dir="rtl"] .home-sidebar-item:hover { transform: translateX(2px); } .home-sidebar-img { width: 86px; height: 70px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; } .home-sidebar-img img { width: 100%; height: 100%; object-fit: cover; } .home-sidebar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; } .home-sidebar-info h4 { font-size: 13px; font-weight: 700; line-height: 1.55; color: var(--text-strong); margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-sidebar-date { font-size: 11px; color: var(--text-soft); display: inline-flex; align-items: center; gap: 4px; } /* ========================================== Home: "أخرى" (Other) — two-panel block: Reports + Articles Theme-aware: light=white cards on muted bg, dark=navy cards (via dark-mode overrides at the end of this file). ========================================== */ .home-other-section { background: var(--surface-alt); padding-top: 38px; padding-bottom: 42px; } .home-other-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 8px; height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); } .home-other-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px; border-bottom: 1px solid var(--line); } .home-other-panel-title { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--text-strong); margin: 0; } .home-other-panel-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--gold-tint); color: var(--gold-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; } .home-other-panel-more { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--gold-dark); transition: var(--transition); } .home-other-panel-more:hover { color: var(--gold); } .home-other-list { list-style: none; margin: 0; padding: 0; flex: 1; } .home-other-list > li + li { border-top: 1px solid var(--line-soft); } .home-other-link { display: flex; align-items: center; gap: 14px; padding: 14px 14px; color: var(--text); transition: var(--transition); } .home-other-link:hover { background: var(--surface-alt); color: var(--text-strong); } .home-other-num { width: 34px; height: 34px; border-radius: 50%; background: var(--gold-tint); color: var(--gold-dark); border: 1px solid rgba(245, 180, 0, 0.35); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; transition: var(--transition); } .home-other-link:hover .home-other-num { background: var(--gold); color: var(--navy); border-color: var(--gold); box-shadow: 0 4px 14px rgba(245, 180, 0, 0.3); } .home-other-avatar { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid rgba(245, 180, 0, 0.35); background: var(--surface-alt); transition: var(--transition); } .home-other-avatar img { width: 100%; height: 100%; object-fit: cover; } .home-other-link:hover .home-other-avatar { border-color: var(--gold); box-shadow: 0 4px 14px rgba(245, 180, 0, 0.25); } .home-other-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .home-other-cat { display: inline-block; align-self: flex-start; padding: 3px 11px; border-radius: 4px; font-size: 10px; font-weight: 800; line-height: 1.6; letter-spacing: 0.3px; } /* Solid category palette — rotates per index. White text for readability. */ .home-other-cat--0 { background: var(--gold); color: var(--navy); } .home-other-cat--1 { background: #a855f7; color: #fff; } .home-other-cat--2 { background: #10b981; color: #fff; } .home-other-cat--3 { background: #ef4444; color: #fff; } .home-other-cat--4 { background: #3b82f6; color: #fff; } .home-other-title { font-size: 14px; font-weight: 700; line-height: 1.55; color: var(--text-strong); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-other-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-soft); } .home-other-meta i { color: var(--gold-dark); margin-inline-end: 3px; opacity: 0.85; } .home-other-meta .dot { color: var(--gold-dark); opacity: 0.6; } .home-other-author { font-size: 12px; font-weight: 700; color: var(--gold-dark); display: inline-flex; align-items: center; gap: 5px; } .home-other-author i { font-size: 11px; opacity: 0.85; } .home-other-chev { color: var(--text-soft); font-size: 12px; flex-shrink: 0; transition: var(--transition); opacity: 0.6; } .home-other-link:hover .home-other-chev { color: var(--gold-dark); opacity: 1; transform: translateX(-4px); } [dir="ltr"] .home-other-link:hover .home-other-chev { transform: translateX(4px); } @media (max-width: 767px) { .home-other-link { padding: 12px 10px; gap: 10px; } .home-other-num, .home-other-avatar { width: 36px; height: 36px; } .home-other-num { font-size: 12px; } .home-other-title { font-size: 13px; } .home-other-meta { font-size: 10px; gap: 6px; } } /* ========================================== Video card ========================================== */ .video-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); } .video-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .video-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; } .video-card-img img { width: 100%; height: 100%; object-fit: cover; } .video-play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 28, 45, 0.4); color: #fff; font-size: 28px; transition: var(--transition); } .video-play-icon i { width: 56px; height: 56px; background: var(--gold); color: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; } .video-card:hover .video-play-icon { background: rgba(15, 28, 45, 0.55); } .video-card-title { font-size: 13px; font-weight: 700; line-height: 1.55; padding: 12px 14px 14px; color: var(--text-strong); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================== Home videos slider — vertical-aspect cards with prev/next arrows ========================================== */ .home-videos-header { align-items: center; } .home-videos-arrows { display: inline-flex; gap: 10px; margin-inline-end: auto; } .home-videos-arrow { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--gold); background: var(--surface); color: var(--gold-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: var(--transition); } .home-videos-arrow:hover { background: var(--gold); color: var(--navy); } .home-videos-arrow.home-videos-arrow-prev { background: var(--gold); color: var(--navy); border-color: var(--gold); } .home-videos-slider { position: relative; } .home-videos-track { display: flex; gap: 18px; overflow-x: auto; padding: 8px 4px 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; scroll-behavior: smooth; } .home-videos-track::-webkit-scrollbar { height: 6px; } .home-videos-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .home-video-card { flex: 0 0 calc((100% - 18px * 3) / 4); /* 4 visible at a time on desktop */ min-width: 220px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; color: var(--text-strong); transition: var(--transition); } .home-video-card:hover { transform: translateY(-3px); } .home-video-card-thumb { position: relative; aspect-ratio: 4 / 5; /* tall portrait crop */ border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-alt); box-shadow: var(--shadow-sm); } .home-video-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .home-video-card:hover .home-video-card-thumb img { transform: scale(1.05); } .home-video-card-cat { position: absolute; top: 12px; inset-inline-end: 12px; background: var(--gold); color: var(--navy); padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; z-index: 2; } .home-video-card-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 28, 45, 0.25); transition: background 0.2s ease; z-index: 1; } .home-video-card-play::before { content: ''; width: 56px; height: 56px; border-radius: 50%; background: var(--gold); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); position: absolute; } .home-video-card-play i { color: var(--navy); font-size: 18px; z-index: 1; margin-inline-start: 3px; /* nudge play triangle to optical center */ } .home-video-card:hover .home-video-card-play { background: rgba(15, 28, 45, 0.4); } .home-video-card-duration { position: absolute; bottom: 10px; inset-inline-start: 10px; background: rgba(15, 28, 45, 0.75); color: #fff; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; z-index: 2; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .home-video-card-title { font-size: 14px; font-weight: 800; line-height: 1.55; color: var(--text-strong); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-video-card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-dark); font-size: 12px; font-weight: 700; } .home-video-card-link i { font-size: 9px; } @media (max-width: 1199px) { .home-video-card { flex-basis: calc((100% - 18px * 2) / 3); } } @media (max-width: 767px) { .home-video-card { flex-basis: calc((100% - 18px) / 2); min-width: 150px; } .home-video-card-play::before { width: 46px; height: 46px; } .home-video-card-play i { font-size: 14px; } .home-videos-arrow { width: 36px; height: 36px; } } /* ========================================== Home programs slider — vertical poster cards with decorative top stripes ========================================== */ .home-programs-header { align-items: center; } .home-programs-slider { position: relative; } .home-programs-track { display: flex; gap: 18px; overflow-x: auto; padding: 8px 4px 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; scroll-behavior: smooth; } .home-programs-track::-webkit-scrollbar { height: 6px; } .home-programs-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .home-program-card { position: relative; flex: 0 0 calc((100% - 18px * 5) / 6); min-width: 200px; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; scroll-snap-align: start; background: var(--surface-alt); box-shadow: var(--shadow-sm); transition: var(--transition); color: #fff; isolation: isolate; /* keep the stripes/overlay layered above the image only */ } .home-program-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .home-program-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.5s ease; } .home-program-card:hover .home-program-card-img { transform: scale(1.06); } /* Soft lamp-style glow at the bottom — concentrated, fades out quickly so the image stays visible most of the card. */ .home-program-card-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(15, 28, 45, 0.72) 0%, rgba(15, 28, 45, 0.35) 18%, rgba(15, 28, 45, 0) 38% ); pointer-events: none; } /* Single decorative color bar across the top of the card */ .home-program-card-stripe { position: absolute; top: 0; inset-inline: 0; height: 6px; z-index: 3; display: block; } .home-program-card-live { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 4; background: #ef4444; color: #fff; padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.3px; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); } .home-program-card-body { position: absolute; bottom: 0; inset-inline-start: 0; inset-inline-end: 0; padding: 14px 16px 16px; z-index: 2; display: flex; flex-direction: column; gap: 6px; } .home-program-card-name { font-size: 18px; font-weight: 900; color: #fff; margin: 0; line-height: 1.35; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-program-card-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--gold); } .home-program-card-meta i { font-size: 11px; } .home-program-card-meta-sep { color: rgba(245, 180, 0, 0.5); margin: 0 2px; } @media (max-width: 1199px) { .home-program-card { flex-basis: calc((100% - 18px * 3) / 4); } } @media (max-width: 767px) { .home-program-card { flex-basis: calc((100% - 18px) / 2); min-width: 160px; } .home-program-card-name { font-size: 15px; } } /* ========================================== Today's schedule board (home) — navy card with horizontal slots ========================================== */ .today-section { padding: 28px 0; } /* Outer card — light surface in light mode, dark navy-deep in dark mode (via vars). The header strip inside stays navy in both themes. */ .today-board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--text); position: relative; overflow: hidden; } /* Top strip: always navy with white title + gold link, regardless of theme. */ .today-board-head { background: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; color: #fff; } .today-board-title { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; color: #fff; margin: 0; } .today-board-title-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; } .today-board-more { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 13px; font-weight: 700; transition: var(--transition); } .today-board-more:hover { color: var(--gold-soft); transform: translateX(-2px); } [dir="rtl"] .today-board-more:hover { transform: translateX(2px); } /* Cards strip — light cream area below the navy header. */ .today-board-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: 18px 22px; background: var(--surface-alt); will-change: scroll-position; contain: layout paint; } .today-board-row::-webkit-scrollbar { display: none; } .today-slot { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); position: relative; transition: var(--transition); flex: 0 0 200px; min-width: 200px; scroll-snap-align: start; } .today-slot:hover { background: var(--surface); border-color: var(--gold-soft); box-shadow: var(--shadow-sm); transform: translateY(-2px); } /* Time row */ .today-slot-time { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-soft); letter-spacing: 0.3px; } .today-slot-time i { color: var(--text-soft); font-size: 11px; } .today-slot-time > span { unicode-bidi: isolate; direction: ltr; } .today-slot-time-sep { opacity: 0.5; padding: 0 2px; } /* Generic helper — isolate an LTR-looking token (date, time, frequency, "X – Y" range) so its internal characters render in their natural order even when surrounded by Arabic. Use on dates, durations, FM labels, etc. */ .bidi-iso { unicode-bidi: isolate; } .bidi-iso-ltr { unicode-bidi: isolate; direction: ltr; } .today-slot-body { display: flex; align-items: center; gap: 10px; } .today-slot-icon { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .today-slot-name { font-size: 13px; font-weight: 800; color: var(--text-strong); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Active slot — gold-bordered card with a yellow time pill + small "الآن" tag. */ .today-slot.is-live { background: var(--surface); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 8px 24px rgba(245, 180, 0, 0.2); transform: translateY(-3px); } .today-slot.is-live .today-slot-time { /* Anchor the time pill to the inline-start (visual right in RTL) */ align-self: flex-start; margin-inline-end: auto; background: var(--gold-tint); color: var(--gold-dark); padding: 4px 10px; border-radius: var(--radius-pill); } .today-slot.is-live .today-slot-time i { color: var(--gold-dark); } .today-slot.is-live .today-slot-name { color: var(--text-strong); } .today-slot-live-badge { /* "الآن" sits on the inline-start (visual right in RTL) at the bottom */ align-self: flex-start; margin-inline-end: auto; display: inline-flex; align-items: center; gap: 5px; background: transparent; color: var(--danger); padding: 0; border-radius: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.2px; } .today-slot-live-badge .pulse { width: 6px; height: 6px; background: var(--danger); border-radius: 50%; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); animation: pulse 1.3s ease-in-out infinite; } @media (max-width: 767px) { .today-board-head { padding: 14px 16px; } .today-board-title { font-size: 16px; } .today-board-row { padding: 14px 16px; gap: 10px; } .today-slot { flex: 0 0 170px; min-width: 170px; } } /* ========================================== Home ads / sponsor banner ========================================== */ .home-promo { padding: 12px 0 36px; } /* Slider container */ .home-promo-slider { position: relative; } .home-promo-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; user-select: none; /* Hint to the browser: this element scrolls; isolate paint/layout to avoid repainting the whole page on every frame of the animated scroll. */ will-change: scroll-position; contain: layout paint; } .home-promo-track::-webkit-scrollbar { display: none; } .home-promo-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; } .home-promo-track img { -webkit-user-drag: none; pointer-events: none; } .home-promo-track .home-promo-card { -webkit-user-drag: none; } .home-promo-track > .home-promo-card { flex: 0 0 100%; scroll-snap-align: start; } /* Prev/Next arrows */ .home-promo-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--gold); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; z-index: 5; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); transition: var(--transition); } .home-promo-arrow:hover { background: var(--gold-soft); transform: translateY(-50%) scale(1.08); } .home-promo-arrow:disabled { opacity: 0.35; cursor: not-allowed; transform: translateY(-50%); } .home-promo-arrow-prev { inset-inline-start: -18px; } .home-promo-arrow-next { inset-inline-end: -18px; } /* Dots */ .home-promo-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; } .home-promo-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: none; background: var(--line); cursor: pointer; transition: var(--transition); } .home-promo-dot:hover { background: var(--text-soft); } .home-promo-dot.active { background: var(--gold); width: 26px; border-radius: var(--radius-pill); } @media (max-width: 767px) { .home-promo-arrow { width: 36px; height: 36px; } .home-promo-arrow-prev { inset-inline-start: 4px; } .home-promo-arrow-next { inset-inline-end: 4px; } } .home-promo-card { position: relative; display: block; background: var(--surface-alt); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); height: 240px; } .home-promo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .home-promo-card img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 991px) { .home-promo-card { height: 180px; } } @media (max-width: 767px) { .home-promo-card { height: 140px; } } /* ========================================== News card (used on inner index pages) ========================================== */ .news-card { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; } .news-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .news-card-link { display: flex; flex-direction: column; height: 100%; } .news-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; } .news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .news-card:hover .news-card-img img { transform: scale(1.04); } .news-card-category { position: absolute; bottom: 10px; inset-inline-start: 10px; background: var(--gold); color: var(--navy); padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 800; } .news-card-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; } .news-card-title { font-size: 15px; font-weight: 800; line-height: 1.55; color: var(--text-strong); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-card-summary { font-size: 13px; color: var(--text-muted); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; } .news-card-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--text-soft); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line-soft); } .news-card-meta span { display: inline-flex; align-items: center; gap: 4px; } /* ========================================== Category tabs ========================================== */ .category-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 24px; } .tab-item { padding: 7px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--surface-alt); border: 1px solid var(--line); transition: var(--transition); } .tab-item:hover { color: var(--gold-dark); border-color: var(--gold); } .tab-item.active { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 800; } /* ========================================== Sidebar (mostRead / latest) ========================================== */ .sidebar { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 12px; } .sidebar-widget { background: var(--surface); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); } .sidebar-title { font-size: 16px; font-weight: 800; color: var(--text-strong); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--gold); display: inline-block; } .sidebar-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .sidebar-item a { display: flex; gap: 10px; align-items: flex-start; } .sidebar-item-img { width: 70px; height: 60px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; } .sidebar-item-img img { width: 100%; height: 100%; object-fit: cover; } .sidebar-item-info { flex: 1; min-width: 0; } .sidebar-item-info h4 { font-size: 12px; font-weight: 700; line-height: 1.55; color: var(--text-strong); margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sidebar-item-date { font-size: 11px; color: var(--text-soft); } .sidebar-featured a { display: block; } .sidebar-featured img { border-radius: var(--radius); margin-bottom: 10px; aspect-ratio: 16/10; object-fit: cover; width: 100%; } .sidebar-featured h4 { font-size: 14px; font-weight: 800; line-height: 1.55; color: var(--text-strong); margin-bottom: 4px; } .sidebar-author { font-size: 12px; color: var(--gold-dark); font-weight: 600; } .sidebar-categories { list-style: none; display: flex; flex-direction: column; gap: 4px; } .sidebar-categories a { display: block; padding: 8px 12px; border-radius: var(--radius); color: var(--text); font-size: 13px; font-weight: 600; transition: var(--transition); } .sidebar-categories a:hover { background: var(--gold-tint); color: var(--gold-dark); } .social-links-grid { display: flex; flex-wrap: wrap; gap: 8px; } .social-link-item { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--surface-alt); color: var(--text-muted); font-size: 15px; transition: var(--transition); } .social-link-item:hover { color: #fff; } .social-link-item.facebook:hover { background: #1877f2; } .social-link-item.twitter:hover { background: #1da1f2; } .social-link-item.instagram:hover { background: #e4405f; } .social-link-item.youtube:hover { background: #ff0000; } /* ========================================== Featured report ========================================== */ .featured-report { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); } .featured-report:hover { box-shadow: var(--shadow); } .featured-report-link { display: block; } .featured-report-img { aspect-ratio: 16/10; overflow: hidden; } .featured-report-img img { width: 100%; height: 100%; object-fit: cover; } .featured-report-body { padding: 26px 28px; } .featured-report-title { font-size: 22px; font-weight: 900; line-height: 1.5; color: var(--text-strong); margin: 12px 0 12px; } .featured-report-summary { font-size: 14px; color: var(--text-muted); line-height: 1.75; margin-bottom: 16px; } .read-more-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-dark); font-weight: 800; font-size: 13px; } /* ========================================== Programs page (detail card) ========================================== */ .program-detail-card { background: var(--navy-deep); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--navy-line); transition: var(--transition); height: 100%; display: flex; flex-direction: column; } .program-detail-card:hover { box-shadow: 0 8px 32px rgba(15, 28, 45, 0.30); transform: translateY(-4px); } .program-detail-link { display: flex; flex-direction: column; flex: 1; color: inherit; } .program-detail-img { aspect-ratio: 16/10; overflow: hidden; position: relative; flex-shrink: 0; } .program-detail-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .program-detail-card:hover .program-detail-img img { transform: scale(1.05); } .program-detail-badge { position: absolute; top: 12px; inset-inline-start: 12px; background: #e53935; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 12px; border-radius: var(--radius-pill); letter-spacing: 0.3px; z-index: 1; } .program-detail-body { padding: 18px 20px 14px; flex: 1; } .program-detail-name { font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 8px; line-height: 1.4; } .program-detail-presenter { font-size: 12px; color: var(--gold); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; } .program-detail-desc { font-size: 13px; color: var(--text-on-navy); line-height: 1.7; margin-top: 10px; opacity: 0.75; } .program-detail-footer { padding: 0 20px 20px; } .program-detail-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--gold); color: var(--navy-deep); font-weight: 800; font-size: 13px; padding: 10px 18px; border-radius: var(--radius); transition: var(--transition); text-align: center; } .program-detail-btn:hover { background: var(--gold-soft); color: var(--navy-deep); } .search-input-wrapper { display: flex; background: #eef0f3; border: 1.5px solid #d0d5dd; border-radius: var(--radius-pill); overflow: hidden; max-width: 520px; transition: var(--transition); } .search-input-wrapper:focus-within { border-color: var(--gold); background: var(--surface); } .search-input { flex: 1; border: none; padding: 11px 18px; font-family: var(--font); background: transparent; color: var(--text-strong); outline: none; font-size: 14px; } .search-input::placeholder { color: var(--text-soft); } .search-btn { border: none; background: var(--gold); color: var(--navy); padding: 0 22px; font-weight: 800; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: var(--transition); white-space: nowrap; } .search-btn:hover { background: var(--gold-soft); } /* Program show: hero + presenter */ .program-hero { background: var(--navy); color: #fff; padding: 34px 0 30px; } .program-hero-img { aspect-ratio: 1/1; max-width: 240px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .program-hero-img img { width: 100%; height: 100%; object-fit: cover; } .program-hero-info { padding: 16px 24px; } .program-category-badge { display: inline-block; background: var(--gold); color: var(--navy); padding: 4px 14px; border-radius: 4px; font-size: 12px; font-weight: 800; margin-bottom: 12px; } .program-hero-name { font-size: 30px; font-weight: 900; color: #fff; margin-bottom: 12px; } .program-hero-desc { font-size: 14px; color: rgba(255, 255, 255, 0.78); line-height: 1.8; } .presenter-card { background: var(--surface); border-radius: var(--radius-lg); padding: 22px; display: flex; gap: 18px; align-items: center; box-shadow: var(--shadow-sm); } .presenter-avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid var(--gold); } .presenter-avatar img { width: 100%; height: 100%; object-fit: cover; } .presenter-info { flex: 1; min-width: 0; } .presenter-name { font-size: 18px; font-weight: 800; color: var(--text-strong); margin: 0 0 4px; } .presenter-bio { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin: 0; } /* Episodes list */ .episodes-list { display: flex; flex-direction: column; gap: 12px; } .episode-item { background: var(--surface); border-radius: var(--radius); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: var(--shadow-sm); transition: var(--transition); } .episode-item:hover { box-shadow: var(--shadow); } .episode-info { display: flex; gap: 14px; align-items: flex-start; flex: 1; min-width: 0; } .episode-number { background: var(--gold-tint); color: var(--gold-dark); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; } .episode-details { flex: 1; min-width: 0; } .episode-title { font-size: 14px; font-weight: 700; color: var(--text-strong); margin: 0 0 4px; } .episode-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.6; } .episode-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text-soft); } .episode-meta span { display: inline-flex; align-items: center; gap: 4px; } .episode-actions { display: flex; gap: 8px; flex-shrink: 0; } .episode-btn { padding: 7px 14px; border-radius: var(--radius); background: var(--gold-tint); color: var(--gold-dark); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; transition: var(--transition); } .episode-btn:hover { background: var(--gold); color: var(--navy); } .episode-btn-video { background: rgba(220, 53, 69, 0.1); color: #b02a37; } .episode-btn-video:hover { background: var(--danger); color: #fff; } /* ----- Inline audio player on episode rows ----- */ .episode-player { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius); } .episode-play-btn { width: 36px; height: 36px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--gold); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; transition: background 0.2s ease, transform 0.1s ease; } .episode-play-btn:hover { background: var(--gold-soft); } .episode-play-btn:active { transform: scale(0.95); } .episode-play-btn.is-playing { box-shadow: 0 0 0 0 rgba(245, 180, 0, 0.6); animation: radioPulse 1.6s ease-out infinite; } .episode-player-bar { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; } .episode-player-time { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; unicode-bidi: isolate; direction: ltr; } .episode-player-seek { flex: 1; height: 4px; -webkit-appearance: none; appearance: none; border-radius: 2px; outline: none; cursor: pointer; background: linear-gradient( to right, var(--gold) 0%, var(--gold) var(--ep-progress, 0%), var(--line) var(--ep-progress, 0%), var(--line) 100% ); } [dir="rtl"] .episode-player-seek { background: linear-gradient( to left, var(--gold) 0%, var(--gold) var(--ep-progress, 0%), var(--line) var(--ep-progress, 0%), var(--line) 100% ); } .episode-player-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: pointer; } .episode-player-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: pointer; } .episode-player-download { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-muted); transition: color 0.2s ease, background 0.2s ease; } .episode-player-download:hover { color: var(--gold-dark); background: var(--gold-tint); } /* Inline volume control: speaker icon + slim slider next to the seek bar. */ .episode-player-volume { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .episode-player-volume-btn { width: 32px; height: 32px; border: none; background: transparent; color: var(--text-muted); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; transition: color 0.2s ease, background 0.2s ease; } .episode-player-volume-btn:hover { color: var(--gold-dark); background: var(--gold-tint); } .episode-player-volume-btn.is-muted { color: var(--text-soft); } .episode-player-volume-slider { width: 64px; height: 4px; -webkit-appearance: none; appearance: none; border-radius: 2px; outline: none; cursor: pointer; background: linear-gradient( to right, var(--gold) 0%, var(--gold) var(--ep-volume, 80%), var(--line) var(--ep-volume, 80%), var(--line) 100% ); } [dir="rtl"] .episode-player-volume-slider { background: linear-gradient( to left, var(--gold) 0%, var(--gold) var(--ep-volume, 80%), var(--line) var(--ep-volume, 80%), var(--line) 100% ); } .episode-player-volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: pointer; } .episode-player-volume-slider::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: pointer; } /* Compact: hide the slider on narrow screens, keep the mute toggle. */ @media (max-width: 575px) { .episode-player-volume-slider { display: none; } } /* Schedule table */ .schedule-table-wrapper { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .schedule-table { width: 100%; border-collapse: collapse; } .schedule-table thead { background: var(--navy); color: #fff; } .schedule-table th, .schedule-table td { padding: 12px 14px; text-align: center; font-size: 13px; border-bottom: 1px solid var(--line); } .schedule-table th { font-weight: 800; font-size: 13px; } .schedule-table th:first-child { color: var(--gold); } .schedule-program-name { font-weight: 800; color: var(--text-strong); } .schedule-time { color: var(--gold-dark); font-weight: 700; font-size: 12px; display: inline-flex; gap: 3px; justify-content: center; white-space: nowrap; } .schedule-time-sep { opacity: 0.55; } .schedule-empty { color: var(--text-soft); } .schedule-table tbody tr:hover { background: var(--surface-alt); } /* ========================================== Article (news/article show) ========================================== */ /* Legacy hero strip — still used by reports/show. News show no longer @yields('hero'). */ .article-hero { width: 100%; aspect-ratio: 16/7; overflow: hidden; background: var(--navy); } .article-hero-img { width: 100%; height: 100%; object-fit: cover; } .article-section { padding-top: 22px; padding-bottom: 38px; } /* Back button — gold-bordered square icon + plain text */ .article-back-row { max-width: 980px; margin: 0 auto 18px; display: flex; justify-content: flex-start; /* RTL: flex-start = visual right */ } .article-back-btn { display: inline-flex; align-items: center; gap: 10px; color: var(--text-soft); font-weight: 600; font-size: 13px; text-decoration: none; transition: var(--transition); } .article-back-icon { width: 36px; height: 36px; border: 1.5px solid var(--gold); border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: var(--gold-dark); font-size: 13px; background: var(--surface); transition: var(--transition); flex-shrink: 0; } .article-back-text { font-size: 13px; color: var(--text-soft); } .article-back-btn:hover .article-back-icon { background: var(--gold); color: var(--navy-deep); } .article-back-btn:hover .article-back-text { color: var(--gold-dark); } /* Card */ .article-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 38px 36px; box-shadow: var(--shadow-sm); max-width: 980px; margin: 0 auto; } /* Legacy alias kept so other pages (.article-content) still render. */ .article-content { background: var(--surface); border-radius: var(--radius-lg); padding: 30px 36px 36px; box-shadow: var(--shadow-sm); max-width: 880px; margin: 0 auto; } /* Header */ .article-header { margin-bottom: 22px; } .article-top-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .article-meta { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--text-soft); margin-bottom: 0; } .article-meta span { display: inline-flex; align-items: center; gap: 6px; } .article-meta i { color: var(--text-soft); } .article-category { display: inline-flex; align-items: center; gap: 6px; background: rgba(239, 68, 68, 0.12); color: #ef4444; padding: 5px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; margin-bottom: 0; } .article-category-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; display: inline-block; } .article-title { font-size: 30px; font-weight: 900; line-height: 1.55; color: var(--text-strong); margin: 0 0 18px; } /* Excerpt with gold rule on the inline-start. */ .article-excerpt { font-size: 16px; line-height: 1.9; color: var(--text); border-inline-start: 3px solid var(--gold); padding-inline-start: 18px; margin-bottom: 6px; } /* Author + Share row */ .article-attrib-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin-bottom: 26px; } .article-author { display: flex; align-items: center; gap: 12px; } .article-author-info { display: flex; flex-direction: column; gap: 2px; text-align: end; } .article-author-name { font-weight: 800; font-size: 14px; color: var(--text-strong); } .article-author-role { font-size: 12px; color: var(--text-soft); } .article-author-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--gold-tint); color: var(--gold-dark); border: 2px solid var(--gold); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-size: 16px; flex: 0 0 auto; } .article-author-avatar img { width: 100%; height: 100%; object-fit: cover; } .article-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .article-share-label { font-size: 13px; color: var(--text-soft); font-weight: 700; margin-inline-end: 4px; } .share-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; border: 1px solid transparent; background: var(--surface-alt); color: var(--text); transition: var(--transition); cursor: pointer; } .share-pill i { font-size: 12px; } .share-pill:hover { transform: translateY(-1px); } .share-pill--twitter { background: rgba(29, 161, 242, 0.12); color: #1da1f2; } .share-pill--facebook { background: rgba(24, 119, 242, 0.12); color: #1877f2; } .share-pill--whatsapp { background: rgba(37, 211, 102, 0.14); color: #1aa856; } .share-pill--telegram { background: rgba(40, 159, 217, 0.12); color: #289fd9; } .share-pill--copy { background: var(--surface); color: var(--gold-dark); border-color: var(--gold); } .share-pill--copy:hover { background: var(--gold-tint); } .share-pill--copy.is-copied { background: var(--gold); color: var(--navy); border-color: var(--gold); } /* Hero figure inside the card (with caption overlay). */ .article-figure { position: relative; margin: 0 0 28px; border-radius: var(--radius); overflow: hidden; background: var(--surface-alt); aspect-ratio: 16 / 9; } .article-figure-img { width: 100%; height: 100%; object-fit: cover; display: block; } .article-figure-caption { position: absolute; bottom: 14px; inset-inline-end: 18px; background: rgba(15, 28, 45, 0.55); color: #fff; font-size: 12px; padding: 6px 12px; border-radius: var(--radius); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Body */ .article-body { font-size: 16px; line-height: 2.05; color: var(--text); } .article-body p { margin-bottom: 18px; } .article-body h2, .article-body h3 { color: var(--text-strong); font-weight: 800; margin: 24px 0 12px; } .article-body blockquote { border-inline-start: 4px solid var(--gold); background: var(--gold-tint); padding: 16px 22px; border-radius: var(--radius); margin: 18px 0; font-weight: 600; } .article-body img { border-radius: var(--radius); margin: 16px 0; max-width: 100%; height: auto; } .article-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); } .tag-badge { background: var(--surface-alt); color: var(--text-muted); padding: 5px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; } .related-section { margin-top: 40px; max-width: 980px; margin-inline: auto; } .related-section .section-title { margin-bottom: 18px; } /* ========================================== Report detail page ========================================== */ .rpt-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .rpt-source { font-size: 13px; color: var(--text-soft); font-weight: 600; } .rpt-category { background: rgba(168, 85, 247, 0.12); color: #a855f7; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: var(--radius-pill); } .rpt-category i { font-size: 11px; } body.dark-mode .rpt-category { background: rgba(168, 85, 247, 0.22); color: #c084fc; } .rpt-title { font-size: 30px; font-weight: 900; color: var(--text-strong); line-height: 1.5; margin-bottom: 20px; text-align: start; } @media (max-width: 767px) { .rpt-title { font-size: 22px; } } .rpt-meta { justify-content: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 24px; } .rpt-meta i { color: var(--gold-dark); } /* ========================================== Article — Opinion variant (used by articles/show) ========================================== */ .article-section--opinion .article-card { padding-bottom: 32px; } .article-opinion-cat-row { display: flex; justify-content: center; margin-bottom: 18px; } .article-category--opinion { background: rgba(168, 85, 247, 0.12); color: #a855f7; } .article-category--opinion .article-category-dot { background: #a855f7; } body.dark-mode .article-category--opinion { background: rgba(168, 85, 247, 0.22); color: #c084fc; } .article-title--opinion { text-align: center; font-size: 32px; line-height: 1.5; max-width: 820px; margin-inline: auto; margin-bottom: 28px; } @media (max-width: 767px) { .article-title--opinion { font-size: 22px; } } /* Author block under the title (avatar on inline-end, info on inline-start) */ .article-author-block { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin-bottom: 18px; } .article-author-block-info { flex: 1; min-width: 0; text-align: start; } .article-author-block-name { font-size: 16px; font-weight: 900; color: var(--text-strong); margin: 0 0 6px; } .article-author-block-desc { font-size: 13px; line-height: 1.7; color: var(--text-soft); margin: 0; } .article-author-block-avatar { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--gold); background: var(--gold-tint); color: var(--gold-dark); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; } .article-author-block-avatar img { width: 100%; height: 100%; object-fit: cover; } .article-meta--opinion { justify-content: flex-start; margin-bottom: 28px; padding-bottom: 0; } .article-tags-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 0; border-top: 1px solid var(--line-soft); margin-top: 18px; justify-content: flex-start; } .article-tags-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 13px; font-weight: 700; } .article-tags-label i { color: var(--gold-dark); } body.dark-mode .article-tags-label i { color: var(--gold); } .article-tag { color: var(--text-soft); font-size: 13px; font-weight: 700; } /* Related-articles cards (opinion variant) */ .article-related-card { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px 20px; box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; color: var(--text); overflow: hidden; } .article-related-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow); } .article-related-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .article-related-card-cat { display: inline-flex; align-items: center; background: rgba(239, 68, 68, 0.12); color: #ef4444; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; } body.dark-mode .article-related-card-cat { background: rgba(239, 68, 68, 0.22); } .article-related-card-author { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-soft); } .article-related-card-author-name { font-weight: 700; color: var(--text-strong); } .article-related-card-avatar { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--gold); background: var(--gold-tint); color: var(--gold-dark); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; } .article-related-card-avatar img { width: 100%; height: 100%; object-fit: cover; } .article-related-card-title { font-size: 15px; font-weight: 800; line-height: 1.55; color: var(--text-strong); margin: 0; text-align: end; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .article-related-card-more { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-dark); font-size: 13px; font-weight: 800; margin-top: auto; } body.dark-mode .article-related-card-more { color: var(--gold); } .article-related-card-more i { font-size: 10px; transition: transform 0.2s ease; } .article-related-card:hover .article-related-card-more i { transform: translateX(-3px); } .article-related-card-corner { position: absolute; bottom: 12px; inset-inline-start: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-tint); color: var(--gold-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; transition: var(--transition); } body.dark-mode .article-related-card-corner { color: var(--gold); } .article-related-card:hover .article-related-card-corner { background: var(--gold); color: var(--navy); } /* ========================================== Contact page ========================================== */ /* ---- Contact sidebar ---- */ .ct-sidebar { background: var(--navy-deep); color: #fff; border-radius: var(--radius-lg); padding: 30px 26px; display: flex; flex-direction: column; gap: 0; height: 100%; } .ct-freq { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 24px; text-align: center; } .ct-freq-icon { width: 60px; height: 60px; background: var(--gold); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--navy-deep); margin-bottom: 4px; } .ct-freq-label { font-size: 13px; color: rgba(255,255,255,0.65); font-weight: 600; } .ct-freq-number { font-size: 52px; font-weight: 900; color: var(--gold); line-height: 1; } .ct-freq-fm { font-size: 20px; font-weight: 700; color: var(--gold); } .ct-details { display: flex; flex-direction: column; gap: 18px; flex: 1; } .ct-detail-item { display: flex; align-items: center; gap: 14px; } .ct-detail-icon { width: 42px; height: 42px; background: var(--gold); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--navy-deep); flex-shrink: 0; } .ct-detail-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ct-detail-label { font-size: 11px; color: rgba(255,255,255,0.55); font-weight: 600; } .ct-detail-value { font-size: 14px; color: #fff; font-weight: 600; word-break: break-word; } .ct-sidebar-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.8; text-align: center; } .ct-sidebar-note p { margin: 0; } /* ---- Contact form card ---- */ .ct-form-card { background: var(--surface); border-radius: var(--radius-lg); padding: 30px 32px 34px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); } .ct-form-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .ct-form-title { font-size: 22px; font-weight: 800; color: var(--text-strong); margin: 0; } .ct-form-icon { width: 42px; height: 42px; background: var(--gold-tint, #fff8e1); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--gold-dark); } .ct-form-divider { border: none; border-top: 1px solid var(--line); margin: 0 0 22px; } .ct-label { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; display: block; } .ct-input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); font-family: var(--font); font-size: 14px; color: var(--text-strong); background: #f5f6f8; transition: var(--transition); outline: none; } .ct-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint, rgba(227,175,46,0.15)); background: var(--surface); } .ct-input::placeholder { color: var(--text-soft); } .ct-textarea { resize: vertical; min-height: 140px; } .ct-submit-btn { width: 100%; background: var(--gold); color: var(--navy-deep); border: none; padding: 14px 32px; border-radius: var(--radius); font-weight: 800; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: var(--transition); } .ct-submit-btn:hover { background: var(--gold-soft); transform: translateY(-1px); } /* Legacy form selectors — keep for other uses */ .form-label { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; display: block; } .form-control { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font); font-size: 14px; color: var(--text); background: var(--surface); transition: var(--transition); outline: none; } .form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint); } .submit-btn { background: var(--gold); color: var(--navy); border: none; padding: 12px 32px; border-radius: var(--radius); font-weight: 800; font-size: 14px; transition: var(--transition); } .submit-btn:hover { background: var(--gold-soft); transform: translateY(-1px); } .alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; } .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .alert-danger { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* dark mode */ body.dark-mode .ct-form-card { background: var(--surface); border-color: var(--line); } body.dark-mode .ct-input { background: var(--surface-alt); color: var(--text-strong); border-color: var(--line); } body.dark-mode .ct-input:focus { background: var(--surface); } body.dark-mode .ct-form-icon { background: rgba(227,175,46,0.15); } /* ========================================== FM banner ========================================== */ .fm-banner { background: var(--navy); color: #fff; padding: 28px 0; margin-top: auto; } .fm-banner-content { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; } .fm-listen { font-size: 16px; color: rgba(255, 255, 255, 0.7); } .fm-name { font-size: 22px; font-weight: 900; color: #fff; } .fm-frequency { font-size: 26px; font-weight: 900; color: var(--gold); letter-spacing: 1px; } /* ========================================== Footer ========================================== */ .site-footer { background: var(--navy-deep); color: var(--text-on-navy); border-top: 2px solid var(--gold); } /* Social platforms row */ .footer-platforms { padding: 26px 0 8px; } .footer-platforms-title { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.55); margin-bottom: 16px; text-align: start; } .footer-social-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; } .footer-social-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 14px; background: var(--navy-soft); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); color: rgba(255, 255, 255, 0.85); text-align: center; transition: var(--transition); } .footer-social-tile:hover { background: rgba(245, 180, 0, 0.08); border-color: var(--gold); transform: translateY(-2px); color: #fff; } .footer-social-icon { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85); font-size: 15px; transition: var(--transition); } .footer-social-tile:hover .footer-social-icon { background: var(--gold); color: var(--navy); } .footer-social-name { font-size: 12px; font-weight: 800; color: #fff; } .footer-social-handle { font-size: 11px; color: var(--gold); font-weight: 500; direction: ltr; } /* Main 4-col */ .footer-main { padding: 26px 0 22px; } .footer-heading { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.55); margin-bottom: 18px; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; } .footer-links li { position: relative; padding-inline-start: 14px; } .footer-links li::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--gold); } .footer-links a { color: rgba(255, 255, 255, 0.78); font-size: 13px; transition: var(--transition); } .footer-links a:hover { color: var(--gold); } .footer-contact-list { list-style: none; display: flex; flex-direction: column; gap: 14px; padding: 0; margin: 0; } .footer-contact-item { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 600; } .footer-contact-icon { width: 36px; height: 36px; border-radius: var(--radius); background: rgba(245, 180, 0, 0.12); color: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; } .footer-apps { display: flex; flex-direction: column; gap: 10px; max-width: 220px; } .footer-app-btn { display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; color: #fff; transition: var(--transition); } .footer-app-btn:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--gold); color: #fff; } .footer-app-btn i { font-size: 22px; } .footer-app-btn-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1; text-align: end; } .footer-app-btn-text small { font-size: 9px; font-weight: 500; opacity: 0.7; letter-spacing: 0.5px; } .footer-app-btn-text strong { font-size: 14px; font-weight: 800; letter-spacing: 0.3px; } .footer-brand-block { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } [dir="ltr"] .footer-brand-block { align-items: flex-start; } .footer-brand-logo-img { display: block; width: 100%; max-width: 200px; height: auto; } .footer-brand-tagline { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-top: 6px; } .footer-brand-accent { width: 60px; height: 2px; background: var(--gold); border-radius: 2px; margin-top: 4px; } /* Bottom row */ .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 14px 0; } .footer-bottom-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .footer-bottom p { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.45); } .footer-locale .dot { color: var(--gold); margin: 0 4px; } /* ========================================== Radio player (floating) ========================================== */ .radio-player { position: fixed; bottom: var(--breaking-h); inset-inline-start: var(--rail-w); inset-inline-end: 0; background: var(--navy-deep); color: #fff; padding: 14px 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.3); z-index: 60; } .radio-player-content { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .radio-info { display: flex; align-items: center; gap: 12px; } .on-air-badge { background: var(--danger); color: #fff; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 800; animation: pulse 1.5s infinite; } .radio-name { font-weight: 800; font-size: 14px; color: var(--gold); } .radio-error { margin-top: 8px; color: #ff8b8b; font-size: 13px; text-align: center; } .radio-controls { display: flex; align-items: center; gap: 14px; flex: 1; max-width: 360px; } .radio-play-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--gold); color: var(--navy); border: none; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.1s ease; } .radio-play-btn:hover { background: var(--gold-soft); } .radio-play-btn:active { transform: scale(0.96); } /* Subtle pulsing ring while actually streaming */ .radio-play-btn.is-playing { box-shadow: 0 0 0 0 rgba(245, 180, 0, 0.6); animation: radioPulse 1.6s ease-out infinite; } @keyframes radioPulse { 0% { box-shadow: 0 0 0 0 rgba(245, 180, 0, 0.55); } 70% { box-shadow: 0 0 0 12px rgba(245, 180, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 180, 0, 0); } } /* Volume group: speaker icon + range with gold fill --- */ .radio-volume-group { display: flex; align-items: center; gap: 10px; flex: 1; } .radio-volume-icon { background: none; border: none; color: rgba(255, 255, 255, 0.7); font-size: 15px; width: 26px; cursor: pointer; transition: color 0.2s ease; } .radio-volume-icon:hover { color: var(--gold); } .radio-volume-icon.is-muted { color: rgba(255, 255, 255, 0.35); } .radio-volume { flex: 1; height: 6px; -webkit-appearance: none; appearance: none; /* Filled-track effect: gold up to --val, white-translucent after. --val is updated by JS on every input event. */ background: linear-gradient( to right, var(--gold) 0%, var(--gold) var(--val, 80%), rgba(255, 255, 255, 0.15) var(--val, 80%), rgba(255, 255, 255, 0.15) 100% ); border-radius: 3px; outline: none; cursor: pointer; /* Tick marks at 25 / 50 / 75 to show notches at a glance */ position: relative; } [dir="rtl"] .radio-volume { background: linear-gradient( to left, var(--gold) 0%, var(--gold) var(--val, 80%), rgba(255, 255, 255, 0.15) var(--val, 80%), rgba(255, 255, 255, 0.15) 100% ); } .radio-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); cursor: pointer; transition: transform 0.1s ease; } .radio-volume::-webkit-slider-thumb:hover { transform: scale(1.15); } .radio-volume::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); cursor: pointer; } .radio-close-btn { background: none; border: none; color: rgba(255, 255, 255, 0.5); font-size: 18px; } .radio-close-btn:hover { color: var(--gold); } /* ========================================== Pagination, empty state ========================================== */ .pagination-wrapper { padding: 28px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; } /* Custom paginator: prev arrow, page numbers, next arrow + summary line */ .paginator { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } .paginator-pages { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; } .paginator-page { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 800; transition: var(--transition); } .paginator-page:hover { background: var(--gold-tint); border-color: var(--gold); color: var(--gold-dark); } .paginator-page.is-active { background: var(--gold); border-color: var(--gold); color: var(--navy); cursor: default; } .paginator-page.is-disabled { opacity: 0.55; cursor: default; pointer-events: none; } .paginator-arrow { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text-soft); font-size: 13px; font-weight: 800; transition: var(--transition); } .paginator-arrow i { font-size: 11px; } .paginator-arrow:hover { border-color: var(--gold); color: var(--gold-dark); background: var(--gold-tint); } .paginator-arrow.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* Highlight the "Next" arrow as the primary forward action (gold-bordered). */ .paginator-arrow-next:not(.is-disabled) { border-color: var(--gold); color: var(--gold-dark); } .paginator-summary { margin: 0; color: var(--text-soft); font-size: 13px; font-weight: 600; } .paginator-summary .bidi-iso-ltr { color: var(--text-strong); font-weight: 800; } @media (max-width: 575px) { .paginator-arrow { padding: 0 12px; font-size: 12px; } .paginator-arrow span { display: none; } .paginator-page { min-width: 36px; height: 36px; } } /* Legacy classes kept for any inner pages still using Laravel's default pagination view */ .pagination-wrapper .pagination { display: flex; gap: 6px; list-style: none; margin: 0; } .pagination-wrapper .page-link, .pagination-wrapper .page-item span { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 700; transition: var(--transition); } .pagination-wrapper .page-link:hover { background: var(--gold-tint); border-color: var(--gold); color: var(--gold-dark); } .pagination-wrapper .page-item.active .page-link { background: var(--gold); border-color: var(--gold); color: var(--navy); } .empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); } .empty-state i { font-size: 50px; color: var(--text-soft); margin-bottom: 14px; display: block; } .empty-state p { font-size: 15px; margin: 0; } /* ========================================== Dark mode overrides (rail/footer already dark by design) ========================================== */ body.dark-mode .home-hero-card, body.dark-mode .home-sidebar-item, body.dark-mode .home-other-card, body.dark-mode .home-list-item, body.dark-mode .news-card, body.dark-mode .video-card, body.dark-mode .featured-report, body.dark-mode .program-detail-card, body.dark-mode .presenter-card, body.dark-mode .episode-item, body.dark-mode .schedule-table-wrapper, body.dark-mode .article-content, body.dark-mode .article-card, body.dark-mode .home-feature-banner, body.dark-mode .sidebar-widget { background: var(--surface); border-color: var(--line); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } body.dark-mode .home-feature-banner-pill { background: rgba(245, 180, 0, 0.18); color: var(--gold); } /* Brighten gold-dark text where it sits on a dark surface in dark mode. */ body.dark-mode .home-videos-arrow, body.dark-mode .home-video-card-link, body.dark-mode .article-back-btn, body.dark-mode .home-other-panel-more, body.dark-mode .home-other-author, body.dark-mode .share-pill--copy { color: var(--gold); } body.dark-mode .home-other-panel-icon, body.dark-mode .home-other-num { background: rgba(245, 180, 0, 0.18); color: var(--gold); } body.dark-mode .home-list-cat { background: rgba(245, 180, 0, 0.18); } body.dark-mode .article-attrib-row { border-color: var(--line); } body.dark-mode .article-back-btn { background: var(--surface); } body.dark-mode .share-pill { background: var(--surface-alt); } body.dark-mode .share-pill--twitter { background: rgba(29, 161, 242, 0.18); } body.dark-mode .share-pill--facebook { background: rgba(24, 119, 242, 0.18); } body.dark-mode .share-pill--whatsapp { background: rgba(37, 211, 102, 0.18); color: #25d366; } body.dark-mode .share-pill--telegram { background: rgba(40, 159, 217, 0.18); } body.dark-mode .share-pill--copy { background: var(--surface-alt); } body.dark-mode .schedule-table th, body.dark-mode .schedule-table td { border-color: var(--line); } body.dark-mode .form-control { background: var(--surface-alt); border-color: var(--line); color: var(--text); } body.dark-mode .tab-item { background: var(--surface-alt); border-color: var(--line); } body.dark-mode .news-card-meta { border-top-color: var(--line); } body.dark-mode .topbar-search { background: rgba(255, 255, 255, 0.08); } body.dark-mode .topbar-search input { color: #fff; } body.dark-mode .topbar-search input::placeholder { color: rgba(255, 255, 255, 0.55); } body.dark-mode .topbar-search button { color: var(--navy); } body.dark-mode .dark-mode-toggle { background: rgba(255, 255, 255, 0.15); border-color: transparent; color: var(--navy); } body.dark-mode .pagination-wrapper .page-link, body.dark-mode .pagination-wrapper .page-item span { background: var(--surface); border-color: var(--line); color: var(--text); } /* ========================================== Responsive ========================================== */ @media (max-width: 1199px) { :root { --rail-w: 240px; } .home-hero-img { height: 320px; } .footer-social-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 991px) { .site-shell { grid-template-columns: 1fr; } .site-rail { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: 280px; height: 100vh; transform: translateX(100%); transition: transform 0.3s ease; z-index: 80; } [dir="ltr"] .site-rail { transform: translateX(-100%); } .site-rail.show { transform: translateX(0) !important; } .rail-mobile-toggle { display: flex; align-items: center; justify-content: center; } .radio-player { inset-inline: 0; } .topbar-breaking { inset-inline: 0; } .ep-mini { inset-inline: 0; } .topbar-yellow-inner { padding: 8px 16px; } .topbar-search { min-width: 180px; } .topbar-date { display: none; } .topbar-site-tag { display: none; } .topbar-ticker-time { display: none; } .home-hero-img { height: 280px; } .article-content { padding: 22px 22px 28px; } .article-card { padding: 22px 22px 28px; } .article-attrib-row { gap: 14px; } } @media (max-width: 767px) { .container { padding: 0 16px; } .topbar-yellow { min-height: 0; padding: 4px 0; } .topbar-yellow-inner { flex-wrap: wrap; gap: 8px; } .topbar-search { min-width: 0; flex: 1; } .topbar-site-name { font-size: 12px; } .topbar-breaking-inner { padding: 0 14px; gap: 10px; } .section-block { padding: 26px 0; } .section-title { font-size: 18px; } .page-title { font-size: 22px; } .home-hero-img { height: 220px; } .home-hero-title { font-size: 18px; } .home-list-item { flex-direction: column-reverse; } .home-list-img { width: 100%; height: 180px; } .episode-item { flex-direction: column; align-items: stretch; } .episode-actions { justify-content: flex-end; } .footer-social-grid { grid-template-columns: repeat(2, 1fr); } .footer-platforms-title { text-align: center; } .footer-bottom-row { flex-direction: column; text-align: center; } .footer-brand-block { align-items: center; } [dir="rtl"] .footer-brand-block, [dir="ltr"] .footer-brand-block { align-items: center; } .article-title { font-size: 22px; } .program-hero-name { font-size: 22px; } .freq-number-large { font-size: 38px; } .article-meta { gap: 14px; font-size: 12px; } .article-top-row { flex-direction: column-reverse; align-items: flex-start; } .article-attrib-row { flex-direction: column-reverse; align-items: flex-start; } .article-share { justify-content: flex-start; } .share-pill span { display: none; } .share-pill { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; } .share-pill--copy { width: auto; padding: 0 14px; border-radius: var(--radius-pill); } .share-pill--copy span { display: inline; } .article-figure { aspect-ratio: 4/3; } .article-figure-caption { font-size: 11px; padding: 4px 10px; } } @media (max-width: 480px) { .home-other-sidebar { grid-template-columns: 1fr; } .fm-banner-content { flex-direction: column; gap: 4px; } } /* ============================================================ PROGRAMS PAGE – ON-AIR BANNER ============================================================ */ .pg-onair-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff4f4; border: 1.5px solid #ffd0d0; border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 32px; } .pg-onair-banner.is-live { background: #fff4f4; border-color: #e53935; } .pg-onair-banner.is-upcoming { background: var(--surface-alt); border-color: var(--line); } .pg-onair-inner { display: flex; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; } .pg-onair-pulse { display: inline-block; width: 11px; height: 11px; background: #e53935; border-radius: 50%; flex-shrink: 0; margin-top: 7px; animation: pulse-dot 1.4s ease-in-out infinite; } .pg-onair-banner.is-upcoming .pg-onair-pulse { background: var(--gold); } .pg-onair-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pg-onair-label { font-size: 11px; font-weight: 700; color: #e53935; letter-spacing: 0.3px; } .pg-onair-banner.is-upcoming .pg-onair-label { color: var(--gold-dark); } .pg-onair-name { font-size: 20px; font-weight: 900; color: var(--text-strong); text-decoration: none; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-onair-name:hover { color: var(--gold); } .pg-onair-presenter { font-size: 13px; color: var(--text-soft); } .pg-onair-play { width: 50px; height: 50px; border-radius: 50%; background: #e53935; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; transition: var(--transition); } .pg-onair-play:hover { background: #c62828; transform: scale(1.06); } /* ============================================================ PROGRAM CARD (redesign) ============================================================ */ .prog-card { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); transition: var(--transition); display: flex; flex-direction: column; height: 100%; } .prog-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13); transform: translateY(-4px); } .prog-card--live { border-color: #e53935; border-width: 2px; } .prog-card-img { aspect-ratio: 16 / 9; overflow: hidden; position: relative; flex-shrink: 0; } .prog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .prog-card:hover .prog-card-img img { transform: scale(1.05); } .prog-card-live-badge { position: absolute; top: 10px; inset-inline-start: 10px; background: #e53935; color: #fff; font-size: 11px; font-weight: 800; padding: 4px 11px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 5px; z-index: 2; } .prog-card-live-dot { width: 7px; height: 7px; background: #fff; border-radius: 50%; animation: pulse-dot 1.4s ease-in-out infinite; } .prog-card-cat-pill { position: absolute; top: 10px; inset-inline-end: 10px; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-pill); z-index: 2; line-height: 1.4; box-shadow: 0 2px 8px rgba(0,0,0,0.22); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } .cat-color-1 { background: #e53935; } .cat-color-2 { background: #1e88e5; } .cat-color-3 { background: #7b1fa2; } .cat-color-4 { background: #2e7d32; } .cat-color-5 { background: #f57c00; } .cat-color-6 { background: #00838f; } .prog-card-body { padding: 16px 18px 8px; flex: 1; display: flex; flex-direction: column; gap: 6px; } .prog-card-name { font-size: 17px; font-weight: 800; color: var(--text-strong); margin: 0; line-height: 1.4; } .prog-card-presenter { font-size: 13px; color: var(--text-soft); display: inline-flex; align-items: center; gap: 5px; } .prog-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .prog-card-time { font-size: 13px; color: var(--gold-dark); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; } .prog-card-freq { font-size: 11px; font-weight: 700; color: var(--text-soft); background: var(--surface-alt); padding: 2px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line); } .prog-card-desc { font-size: 13px; color: var(--text-soft); line-height: 1.7; margin: 0; } .prog-card-footer { padding: 12px 18px 18px; display: flex; gap: 10px; align-items: stretch; } .prog-card-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: var(--radius); transition: var(--transition); border: none; cursor: pointer; text-decoration: none; white-space: nowrap; flex: 1; } .prog-card-btn--archive { background: transparent; color: var(--gold-dark); border: 1.5px solid var(--gold); } .prog-card-btn--archive:hover { background: var(--gold); color: var(--navy-deep); } .prog-card-btn--listen { background: #e53935; color: #fff; } .prog-card-btn--listen:hover { background: #c62828; } /* dark mode */ body.dark-mode .search-input-wrapper { background: var(--surface-alt); border-color: var(--line); } body.dark-mode .prog-card { background: var(--surface); border-color: var(--line); } body.dark-mode .prog-card--live { border-color: #e53935; } body.dark-mode .prog-card-freq { background: var(--surface-alt); border-color: var(--line); } body.dark-mode .pg-onair-banner.is-live { background: rgba(229, 57, 53, 0.12); } body.dark-mode .pg-onair-banner.is-upcoming { background: var(--surface); border-color: var(--line); } /* ============================================================ NEW SCHEDULE TABLE (sched-new) ============================================================ */ .sched-new thead { background: var(--navy-deep); color: #fff; } .sched-new th { color: #fff !important; font-weight: 700; font-size: 13px; text-align: center; } .sched-new .sched-th-time, .sched-new .sched-td-time { text-align: start; } .sched-new .sched-th-time { color: var(--gold) !important; } .sched-new .sched-td-time { vertical-align: middle; } .sched-time-inner { display: inline-flex; align-items: center; gap: 5px; color: var(--gold-dark); font-weight: 700; font-size: 12px; white-space: nowrap; } .sched-time-inner i { opacity: 0.7; } .sched-new .sched-td-prog { font-weight: 800; color: var(--text-strong); font-size: 14px; } .sched-new .sched-td-presenter { color: var(--text-soft); font-size: 13px; } .sched-new .sched-th-day { min-width: 50px; font-size: 12px; } .sched-new .sched-td-day { text-align: center; vertical-align: middle; } .sched-check { color: var(--gold-dark); font-size: 16px; } .sched-dash { color: var(--text-soft); font-size: 15px; } body.dark-mode .sched-new thead { background: var(--navy); } @media (max-width: 768px) { .pg-onair-name { font-size: 16px; } .prog-card-name { font-size: 15px; } .sched-new .sched-th-day, .sched-new .sched-td-day { min-width: 36px; padding: 8px 6px; font-size: 11px; } .sched-new .sched-td-presenter { display: none; } .sched-new .sched-th-presenter { display: none; } }