/* ============================================ PANTAU MUDIK - Main Stylesheet Modern, Professional, Responsive Design ============================================ */ /* Root Variables */ :root { /* Colors */ --primary-blue: #008FD7; --primary-blue-dark: #0076B5; --accent-green: #10b981; /* Light mode background (requested full #FEFEFE) */ --bg-light: #FEFEFE; --bg-dark: #111827; --text-primary: #1e293b; --text-secondary: #64748b; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* Border Radius */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 300ms ease; --transition-slow: 500ms ease; } /* Reset & Base */ /* Minimal utilities (so app won't appear blank if Tailwind CDN is slow) */ .hidden { display: none !important; } .dark { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } html, body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Light mode: full solid background as requested */ background: var(--bg-light); background-image: none; } /* Dark Mode NOTE: some builds toggle .dark on , others on . Support both so light-mode is never stuck on dark background. */ html.dark, body.dark { color: #ffffff; background-color: var(--bg-dark); background-image: radial-gradient(900px 500px at 10% 0%, rgba(0,143,215,0.18), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgba(16,185,129,0.10), transparent 60%); } html.dark body, body.dark { color: #ffffff; background-color: var(--bg-dark); background-image: radial-gradient(900px 500px at 10% 0%, rgba(0,143,215,0.18), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgba(16,185,129,0.10), transparent 60%); } /* Glassmorphism Effects */ .glass { /* Glassmorphism (lighter & smoother) */ background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); } .dark .glass { background: rgba(17, 24, 39, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); } /* Gradient Backgrounds */ .bg-gradient-to-br { /* Light mode requested: full bright base (#FEFEFE) with subtle gradient */ background: linear-gradient(to bottom right, #FEFEFE, #FEFEFE); } /* Running Clock (light mode should not be white-on-blue always) */ #runningClock { user-select: none; } #runningClock.pm-clock-light { background: rgba(0,143,215,0.10) !important; color: #0b3a55 !important; border: 1px solid rgba(0,143,215,0.25); } /* Light mode: ensure header/nav text is readable (avoid white text on light background) */ html:not(.dark) #header, body:not(.dark) #header, html:not(.dark) #bottomNav, body:not(.dark) #bottomNav, html:not(.dark) #runningTextBar, body:not(.dark) #runningTextBar { color: #0f172a; } html:not(.dark) #runningTextTrack, body:not(.dark) #runningTextTrack { color: #334155 !important; } /* Light mode: modal surface should be bright */ html:not(.dark) #appModal > div, body:not(.dark) #appModal > div { background: #ffffff !important; color: #0f172a; } .dark .bg-gradient-to-br { background: linear-gradient(to bottom right, var(--bg-dark), #1f2937); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } .animate-fade-in { animation: fadeIn 0.5s ease forwards; } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-slide-in { animation: slideIn 0.3s ease forwards; } /* Cards */ .card { background: rgba(255, 255, 255, 0.92); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-md); transition: all var(--transition-normal); border: 1px solid rgba(0, 0, 0, 0.05); will-change: transform; } .dark .card { background: rgba(31, 41, 55, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* Smooth interactions (keep lightweight: opacity/transform only) */ .btn, .card, .input { transform: translateZ(0); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Ensure text visible even if Tailwind CDN is slow */ .card h1, .card h2, .card h3, .card h4 { color: var(--text-primary); } .card p, .card span, .card div { color: inherit; } .dark .card h1, .dark .card h2, .dark .card h3, .dark .card h4 { color: #ffffff; } /* Secondary text helpers (fallback) */ .text-muted { color: var(--text-secondary); } .dark .text-muted { color: #cbd5e1; } /* Status Indicators */ .status-online { color: var(--accent-green); background: rgba(16, 185, 129, 0.1); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; } .status-offline { color: #ef4444; background: rgba(239, 68, 68, 0.1); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; } .status-buffering { color: #f59e0b; background: rgba(245, 158, 11, 0.1); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: var(--radius-md); font-weight: 600; transition: all var(--transition-fast); cursor: pointer; border: none; outline: none; text-decoration: none; } .btn-primary { background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark)); color: white; box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(14, 165, 233, 0.4); } .btn-secondary { background: white; color: var(--text-primary); border: 2px solid var(--primary-blue); } .btn-secondary:hover { background: var(--bg-light); } .dark .btn-secondary { background: rgba(31, 41, 55, 0.95); color: #f1f5f9; } /* Inputs */ .input { width: 100%; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: var(--radius-md); font-size: 1rem; transition: all var(--transition-fast); background: white; color: var(--text-primary); } .input:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); } .dark .input { background: rgba(31, 41, 55, 0.95); border-color: rgba(255, 255, 255, 0.1); color: #f1f5f9; } .dark .input:focus { border-color: var(--primary-blue); } /* Navigation */ .nav-item { position: relative; } .nav-item.active { color: var(--primary-blue); } .dark .nav-item.active { color: var(--primary-blue); } .nav-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: var(--primary-blue); border-radius: 0 0 var(--radius-md) var(--radius-md); } /* Video Player */ .video-container { position: relative; width: 100%; background: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .video-container video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; } /* Badges */ .badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; } .badge-primary { background: var(--primary-blue); color: white; } .badge-accent { background: var(--accent-green); color: white; } .badge-danger { background: #ef4444; color: white; } .badge-warning { background: #f59e0b; color: white; } /* Progress Bar */ .progress-bar { width: 100%; height: 8px; background: #e5e7eb; border-radius: var(--radius-full); overflow: hidden; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary-blue), var(--accent-green)); transition: width var(--transition-normal); } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-light); } .dark ::-webkit-scrollbar-track { background: var(--bg-dark); } ::-webkit-scrollbar-thumb { background: var(--primary-blue); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--primary-blue-dark); } /* Responsive */ @media (max-width: 768px) { html { font-size: 14px; } .card { padding: var(--spacing-md); } } @media (max-width: 480px) { html { font-size: 12px; } .card { padding: var(--spacing-sm); border-radius: var(--radius-md); } } /* Utility Classes */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .font-medium { font-weight: 500; } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-accent { color: var(--accent-green); } .mb-2 { margin-bottom: var(--spacing-sm); } .mb-4 { margin-bottom: var(--spacing-md); } .mb-6 { margin-bottom: var(--spacing-lg); } .mb-8 { margin-bottom: var(--spacing-xl); } .mt-2 { margin-top: var(--spacing-sm); } .mt-4 { margin-top: var(--spacing-md); } .mt-6 { margin-top: var(--spacing-lg); } .mt-8 { margin-top: var(--spacing-xl); } .p-4 { padding: var(--spacing-md); } .p-6 { padding: var(--spacing-lg); } .p-8 { padding: var(--spacing-xl); } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .space-x-2 > * + * { margin-left: var(--spacing-sm); } .space-x-4 > * + * { margin-left: var(--spacing-md); } .space-y-2 > * + * { margin-top: var(--spacing-sm); } .space-y-4 > * + * { margin-top: var(--spacing-md); } .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, 1fr); } .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .gap-2 { gap: var(--spacing-sm); } .gap-4 { gap: var(--spacing-md); } .gap-6 { gap: var(--spacing-lg); } .hidden { display: none; } .block { display: block; } .inline-block { display: inline-block; } .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: var(--radius-full); } .shadow { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } .transition { transition: all var(--transition-normal); } .transition-fast { transition: all var(--transition-fast); } /* Tiny loader */ .loader{width:14px;height:14px;border:2px solid rgba(0,0,0,0.2);border-top-color:rgba(0,0,0,0.6);border-radius:9999px;display:inline-block;animation:spin 1s linear infinite;} .dark .loader{border-color:rgba(255,255,255,0.2);border-top-color:rgba(255,255,255,0.7);} @keyframes spin{to{transform:rotate(360deg);}} /* ============================================ Running Text (Ticker) ============================================ */ .running-track { display: inline-block; padding-left: 100%; animation: pm-marquee 25s linear infinite; will-change: transform; } @keyframes pm-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* Pause on press/hover for convenience */ #runningTextBar:active .running-track, #runningTextBar:hover .running-track { animation-play-state: paused; } /* ============================================ Tailwind Blue Overrides (Theme: #008FD7) Makes UI consistent even when templates still use bg-blue-* utilities. ============================================ */ .bg-blue-50 { background-color: rgba(0, 143, 215, 0.10) !important; } .bg-blue-100 { background-color: rgba(0, 143, 215, 0.16) !important; } .bg-blue-500 { background-color: #008FD7 !important; } .bg-blue-600 { background-color: #006EA8 !important; } .from-blue-500 { --tw-gradient-from: #008FD7 !important; } .to-blue-600 { --tw-gradient-to: #006EA8 !important; } .text-blue-600 { color: #008FD7 !important; } .text-blue-700 { color: #006EA8 !important; } .text-blue-400 { color: #36B0EA !important; } .border-blue-500 { border-color: #008FD7 !important; } .border-blue-600 { border-color: #006EA8 !important; } .ring-blue-500 { --tw-ring-color: rgba(0, 143, 215, 0.35) !important; } /* Sticky / Fixed Player (LiveTV) */ .pm-sticky-player { position: sticky; top: 84px; /* below header */ z-index: 40; } @media (max-width: 640px) { .pm-sticky-player { top: 76px; } } /* Small channel thumbnails */ .tv-thumb img { display: block; } /* PantauMudik Primary Utilities */ .pm-primary-bg{background-color:var(--primary-blue)!important;} .pm-primary-text{color:var(--primary-blue)!important;} .pm-primary-border{border-color:var(--primary-blue)!important;} .pm-gradient{background:linear-gradient(90deg,var(--primary-blue),var(--primary-blue-dark))!important;} .pm-logo{background:linear-gradient(135deg,var(--primary-blue),var(--primary-blue-dark))!important;} /* LiveTV smaller thumb */ .tv-thumb--sm{width:2rem;height:2rem;border-radius:0.75rem;} /* Sticky player: stays visible while scrolling list */ .pm-sticky-player{position:sticky;top:5.25rem;z-index:40;} @media (max-width: 640px){ .pm-sticky-player{top:4.75rem;} } /* ══════════════════════════════════════════════ TV PLAYER CUSTOM UI (function/playertv/) ══════════════════════════════════════════════ */ /* Kontrol tidak muncul saat pointer di dalam container */ .tv-ctrl-btn { cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .15s, transform .1s; } .tv-ctrl-btn:active { transform: scale(.88); } /* Volume slider cross-browser */ #livetvPlayerContainer input[type="range"], [id$="-tv-vol"] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 9999px; background: rgba(255,255,255,.25); cursor: pointer; outline: none; } [id$="-tv-vol"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #008FD7; cursor: pointer; } [id$="-tv-vol"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #008FD7; border: none; cursor: pointer; } /* LIVE badge pulse */ .tv-live-badge span.animate-pulse { animation: tvpulse 1.2s ease-in-out infinite; } @keyframes tvpulse { 0%,100%{ opacity:1; } 50%{ opacity:.35; } } /* Player container: preserve aspect ratio on mobile */ #livetvPlayerContainer { position: relative; min-height: 200px; overflow: hidden; } #livetvPlayerContainer video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; } /* Quality menu item */ .tv-ql { transition: background .12s; } /* ══════════════════════════════════════════════ WISATA CARDS ══════════════════════════════════════════════ */ #wisataGrid { scrollbar-width: none; -ms-overflow-style: none; } #wisataGrid::-webkit-scrollbar { display: none; } .wisata-card { transition: transform .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color: transparent; user-select: none; } .wisata-card:active { transform: scale(.97); } .wisata-fbtn { transition: background .15s, color .15s; white-space: nowrap; } /* line-clamp polyfill (for older Android WebView) */ .line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* --- Light mode hard override (prevents Tailwind gradient from forcing dark background) --- */ body.bg-gradient-to-br { background: #FEFEFE !important; background-image: none !important; } html.dark body.bg-gradient-to-br, body.dark.bg-gradient-to-br { background-color: var(--bg-dark) !important; background-image: radial-gradient(900px 500px at 10% 0%, rgba(0,143,215,0.18), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgba(16,185,129,0.10), transparent 60%) !important; } /* --- Light-mode force for header & bottom navigation --- Some devices + Tailwind CDN can still show dark header/nav due to theme/media. Ensure light mode stays light unless `.dark` exists on html/body. */ html:not(.dark) #header, body:not(.dark) #header { background-color: #FEFEFE !important; color: #111827 !important; } html:not(.dark) #pageTitle, body:not(.dark) #pageTitle { color:#0f172a !important; } html:not(.dark) #header [data-lang="tagline"], body:not(.dark) #header [data-lang="tagline"] { color:#475569 !important; } html:not(.dark) #bottomNav, body:not(.dark) #bottomNav, html:not(.dark) #runningTextBar, body:not(.dark) #runningTextBar { background-color: #FEFEFE !important; border-color: rgba(229,231,235,0.9) !important; } /* Emphasize CCTV in bottom navigation */ .pm-nav-primary { transform: translateY(-2px); } .pm-nav-primary svg { filter: drop-shadow(0 6px 10px rgba(0,143,215,.20)); } /* Header + running text readability in light mode */ :root:not(.dark) #appHeader, body:not(.dark) #appHeader { color: #0f172a; } :root:not(.dark) #runningTextBar { background: rgba(255,255,255,0.92); border-top: 1px solid rgba(15,23,42,0.06); } :root:not(.dark) #runningClock { color: #0f172a; background: rgba(0,143,215,0.08); } /* NAV PRIMARY CCTV */ .nav-primary{ position: relative; } #bottomNav .nav-primary{ transform: translateY(-10px); background: rgba(0,143,215,0.10); border: 1px solid rgba(0,143,215,0.22); border-radius: 16px; padding-top: 10px; padding-bottom: 10px; } .dark #bottomNav .nav-primary{ background: rgba(0,143,215,0.18); border-color: rgba(0,143,215,0.28); } #bottomNav .nav-primary svg{ filter: drop-shadow(0 10px 16px rgba(0,143,215,.25)); } /* GLASSMORPHISM (lightweight) */ .glass{ background: rgba(255,255,255,0.82); border: 1px solid rgba(15,23,42,0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .dark .glass{ background: rgba(17,24,39,0.66); border-color: rgba(255,255,255,0.10); } /* Modal base to avoid dark leftovers in light mode */ .modal-card{ background: rgba(255,255,255,0.95); } .dark .modal-card{ background: rgba(17,24,39,0.92); } /* Bottom navigation layout hard-fix */ #bottomNav{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;z-index:9999} #bottomNav>div{width:100%} #bottomNav .nav-item{flex:1;text-align:center;} #bottomNav .pm-nav-center{transform: translateY(-6px) scale(1.02);} /* Bottom navigation: solid background + non-transparent */ #bottomNav{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;} #bottomNav>div{background:#FEFEFE !important;border-top:1px solid rgba(229,231,235,.9);box-shadow:0 -8px 30px rgba(15,23,42,.08);} .dark #bottomNav>div{background:#0b1220 !important;border-top:1px solid rgba(30,41,59,.9);box-shadow:0 -10px 30px rgba(0,0,0,.35);} /* CCTV center bump */ #bottomNav .pm-nav-primary.pm-nav-center{background:#008FD7 !important;color:#fff !important;border-radius:18px;box-shadow:0 12px 28px rgba(0,143,215,.35);padding-top:10px;padding-bottom:10px;} #bottomNav .pm-nav-primary.pm-nav-center svg{color:#fff !important;} #bottomNav .pm-nav-primary.pm-nav-center span{color:#fff !important;} #bottomNav .pm-nav-primary.pm-nav-center.nav-item{transform: translateY(-10px) scale(1.05) !important;} /* ===== v1.0.5.7 UI polish (stable, lightweight) ===== */ #bottomNav{ background:#ffffff !important; border-top:1px solid rgba(15,23,42,.10) !important; backdrop-filter:none !important; } .dark #bottomNav{ background:#0b1220 !important; border-top:1px solid rgba(255,255,255,.10) !important; } #bottomNav .pm-nav-primary, #bottomNav .pm-nav-center{ background: rgba(0,143,215,.16) !important; border:1px solid rgba(0,143,215,.28) !important; border-radius:18px; transform: translateY(-10px); } .dark #bottomNav .pm-nav-primary, .dark #bottomNav .pm-nav-center{ background: rgba(0,143,215,.22) !important; border-color: rgba(0,143,215,.36) !important; } /* Header title visibility on light mode */ :root:not(.dark) #pageTitle, :root:not(.dark) #appHeader, :root:not(.dark) #appHeader *{ color:#0f172a !important; } :root:not(.dark) #appHeader .text-gray-600, :root:not(.dark) #appHeader .text-gray-500{ color: rgba(15,23,42,.65) !important; } /* Glassmorphism + smooth transitions (no layout change) */ .pm-glass{ background: rgba(255,255,255,.88); border: 1px solid rgba(15,23,42,.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .dark .pm-glass{ background: rgba(15,23,42,.62); border-color: rgba(148,163,184,.12); } .card{ transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; } .card:hover{ transform: translateY(-1px); } /* Imsakiyah UI */ .pm-imsak-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; } .pm-imsak-card{ border-radius:16px; padding:14px; border:1px solid rgba(148,163,184,.18); background: rgba(255,255,255,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .dark .pm-imsak-card{ background: rgba(2,6,23,.35); border-color: rgba(148,163,184,.14); } .pm-imsak-label{ font-size:12px; color:#64748b; margin-bottom:6px; } .dark .pm-imsak-label{ color:#94a3b8; } .pm-imsak-time{ font-size:28px; font-weight:900; letter-spacing:.4px; color:#0f172a; } .dark .pm-imsak-time{ color:#fff; } .pm-imsak-imsak{ outline:2px solid rgba(245,158,11,.18); } .pm-imsak-subuh{ outline:2px solid rgba(59,130,246,.16); } .pm-imsak-maghrib{ outline:2px solid rgba(239,68,68,.16); } .pm-imsak-isya{ outline:2px solid rgba(168,85,247,.16); } .pm-imsak-table-wrap{ overflow:auto; border-radius:14px; border:1px solid rgba(148,163,184,.18); } .dark .pm-imsak-table-wrap{ border-color: rgba(148,163,184,.14); } .pm-imsak-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:760px; font-size:12px; } .pm-imsak-table th{ text-align:left; padding:12px; color:#0f172a; background: rgba(0,143,215,.06); } .dark .pm-imsak-table th{ color:#e2e8f0; background: rgba(0,143,215,.18); } .pm-imsak-table td{ padding:12px; border-top:1px solid rgba(148,163,184,.14); color:#334155; white-space:nowrap; } .dark .pm-imsak-table td{ color:#cbd5e1; border-top-color: rgba(148,163,184,.12); } /* ============================================ Imsakiyah - App-like Hero UI (v1.0.6.2) ============================================ */ .pm-imsak-hero{ border-radius: 22px; overflow: hidden; margin-bottom: 14px; background: radial-gradient(900px 420px at 15% 0%, rgba(0,143,215,0.35), transparent 55%), radial-gradient(900px 420px at 85% 10%, rgba(16,185,129,0.20), transparent 55%), linear-gradient(180deg, #0b3a55, #062a3f); position: relative; } .dark .pm-imsak-hero{ background: radial-gradient(900px 420px at 15% 0%, rgba(0,143,215,0.30), transparent 55%), radial-gradient(900px 420px at 85% 10%, rgba(16,185,129,0.18), transparent 55%), linear-gradient(180deg, #052233, #031722); } .pm-imsak-hero::after{ content: ''; position: absolute; inset: 0; background-image: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%), url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; opacity: .85; pointer-events: none; } .pm-imsak-hero-inner{ position: relative; z-index: 1; padding: 16px 16px 14px; color: #eaf6ff; } .pm-imsak-hero-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pm-imsak-loc{ display:flex; align-items:center; gap:8px; min-width:0; } .pm-imsak-pin{ filter: drop-shadow(0 8px 16px rgba(0,0,0,.3)); } .pm-imsak-loc-text{ font-size: 13px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-imsak-update{ border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff; padding: 10px 12px; border-radius: 14px; font-weight: 800; font-size: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .2s ease, opacity .2s ease; } .pm-imsak-update:active{ transform: scale(.98); } .pm-imsak-hero-main{ padding: 14px 2px 10px; text-align: center; } .pm-imsak-next{ font-size: 34px; font-weight: 1000; letter-spacing: .2px; text-shadow: 0 10px 24px rgba(0,0,0,.35); } .pm-imsak-countdown{ margin-top: 6px; font-size: 16px; letter-spacing: 3px; opacity: .95; } .pm-imsak-datebar{ display:flex; align-items:center; gap: 10px; margin-top: 10px; padding: 12px 12px; background: rgba(0,0,0,.28); /* border: 1px solid rgba(255,255,255,.18);*/ border-radius: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .pm-imsak-datebtn{ width: 40px; height: 40px; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.10); color: #fff; font-size: 22px; font-weight: 900; } .pm-imsak-datecenter{ flex:1; text-align:center; min-width:0; } .pm-imsak-date{ font-size: 16px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-imsak-hijri{ font-size: 12px; opacity: .85; margin-top: 2px; } /* Daily list */ .pm-imsak-daily{ padding: 14px; } .pm-imsak-daily-list{ display:flex; flex-direction:column; gap: 6px; } .pm-imsak-row{ display:flex; align-items:center; justify-content:space-between; padding: 12px 12px; border-radius: 16px; background: rgba(255,255,255,.76); border: 1px solid rgba(15, 23, 42, 0.06); } .dark .pm-imsak-row{ background: rgba(17,24,39,.55); border-color: rgba(255,255,255,.08); } .pm-imsak-row-active{ background: rgba(16,185,129,.18); border-color: rgba(16,185,129,.30); } .dark .pm-imsak-row-active{ background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.22); } .pm-imsak-row-left{ display:flex; align-items:center; gap: 10px; min-width:0; } .pm-imsak-row-ic{ width: 26px; height: 26px; display:flex; align-items:center; justify-content:center; border-radius: 10px; background: rgba(0,143,215,.10); } .dark .pm-imsak-row-ic{ background: rgba(0,143,215,.18); } .pm-imsak-row-label{ font-weight: 900; color: #0f172a; } .dark .pm-imsak-row-label{ color: #fff; } .pm-imsak-row-time{ font-weight: 1000; letter-spacing: .4px; color: #0f172a; } .dark .pm-imsak-row-time{ color: #e2e8f0; } .pm-imsak-summary{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight: 900; user-select:none; } .pm-imsak-summary::-webkit-details-marker{ display:none; } .pm-imsak-summary-hint{ opacity: .65; } .pm-imsak-active-row td{ background: rgba(0,143,215,.07); } .dark .pm-imsak-active-row td{ background: rgba(0,143,215,.10); } .pm-imsak-table tbody tr:hover td { background: rgba(0, 143, 215, 0.05); } .dark .pm-imsak-table tbody tr:hover td { background: rgba(0, 143, 215, 0.12); } /* ============================================ v2.2.2 Refresh Patch - Shell lebih rapi - Render lebih ringan - Mobile viewport lebih stabil ============================================ */ :root { --pm-surface: rgba(255,255,255,0.92); --pm-surface-soft: rgba(248,250,252,0.88); --pm-border-soft: rgba(15,23,42,0.08); --pm-shadow-soft: 0 14px 32px rgba(15,23,42,0.08); --pm-shadow-card: 0 12px 28px rgba(15,23,42,0.06); --pm-shell-max: 980px; --pm-vv-bottom-offset: 0px; } html { background: #f8fafc; overscroll-behavior-y: none; } body.pm-app-shell { min-height: 100dvh; } img { max-width: 100%; height: auto; } #app { min-height: 100dvh; padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } #header { border-bottom: 1px solid rgba(15,23,42,0.05); box-shadow: 0 10px 30px rgba(15,23,42,0.06); } #header .max-w-7xl, #bottomNav .max-w-7xl, #runningTextBar .max-w-7xl, #mainContent.pm-content-shell { max-width: var(--pm-shell-max); } #mainContent.pm-content-shell { margin-left: auto; margin-right: auto; } #mainContent.pm-content-shell > * { content-visibility: auto; contain-intrinsic-size: 1px 760px; } #bottomNav { bottom: var(--pm-vv-bottom-offset); padding-bottom: env(safe-area-inset-bottom, 0px); } #bottomNav > div { border-top-left-radius: 24px; border-top-right-radius: 24px; } #runningTextBar { box-shadow: 0 -8px 24px rgba(15,23,42,0.06); } body.pm-keyboard-open #runningTextBar { opacity: 0; pointer-events: none; } .card { background: var(--pm-surface); border: 1px solid var(--pm-border-soft); box-shadow: var(--pm-shadow-card); border-radius: 20px; } .dark .card { background: rgba(15,23,42,0.84); border-color: rgba(148,163,184,0.14); box-shadow: 0 16px 32px rgba(0,0,0,0.24); } .pm-section-card { position: relative; overflow: hidden; } .pm-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .pm-section-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #0284c7; } .pm-section-title { font-size: 1.125rem; font-weight: 800; color: #0f172a; } .pm-section-subtitle { margin-top: 4px; font-size: 0.875rem; color: #64748b; } .dark .pm-section-title { color: #f8fafc; } .dark .pm-section-subtitle { color: #94a3b8; } .pm-home-hero { position: relative; padding: 0; border: 0; background: linear-gradient(135deg, #0369a1 0%, #008FD7 48%, #0f172a 100%); box-shadow: 0 24px 44px rgba(0, 111, 168, 0.22); } .pm-home-hero__bg { position: absolute; inset: 0; background: radial-gradient(540px 240px at 12% 8%, rgba(255,255,255,0.22), transparent 58%), radial-gradient(420px 200px at 90% 12%, rgba(16,185,129,0.24), transparent 50%); pointer-events: none; } .pm-home-hero__content { position: relative; padding: 22px; color: #fff; } .pm-home-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; } .pm-home-hero__headline { max-width: 560px; } .pm-home-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .pm-home-chip--soft { background: rgba(15,23,42,0.18); } .pm-home-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .pm-home-stat { border-radius: 18px; padding: 14px 16px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .pm-home-stat__label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.82); } .pm-home-stat__value { margin-top: 2px; font-size: 30px; line-height: 1; font-weight: 900; color: #fff; } .pm-home-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pm-home-action { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 18px; color: #fff; border: 0; border-radius: 20px; text-align: left; box-shadow: var(--pm-shadow-soft); } .pm-home-action--emerald { background: linear-gradient(135deg, #059669, #14b8a6); } .pm-home-action--blue { background: linear-gradient(135deg, #0369a1, #008FD7); } .pm-home-action__title { font-size: 18px; font-weight: 800; } .pm-home-action__desc { margin-top: 4px; font-size: 13px; color: rgba(255,255,255,0.9); } .pm-home-action__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 16px; background: rgba(255,255,255,0.18); } .pm-home-quick-grid, .pm-home-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pm-home-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; border-radius: 20px; text-decoration: none; background: var(--pm-surface); border: 1px solid var(--pm-border-soft); box-shadow: var(--pm-shadow-card); } .dark .pm-home-panel { background: rgba(15,23,42,0.84); border-color: rgba(148,163,184,0.14); } .pm-panel-arrow { flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(0,143,215,0.10); color: #0284c7; font-weight: 800; } .pm-countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .pm-countdown-box, .pm-mini-stat { padding: 14px; border-radius: 18px; background: linear-gradient(180deg, rgba(0,143,215,0.08), rgba(255,255,255,0.9)); border: 1px solid rgba(0,143,215,0.10); } .dark .pm-countdown-box, .dark .pm-mini-stat { background: linear-gradient(180deg, rgba(0,143,215,0.18), rgba(15,23,42,0.8)); border-color: rgba(56,189,248,0.14); } .pm-countdown-box__value, .pm-mini-stat__value { font-size: 24px; line-height: 1.1; font-weight: 900; color: #0369a1; } .dark .pm-countdown-box__value, .dark .pm-mini-stat__value { color: #7dd3fc; } .pm-countdown-box__label, .pm-mini-stat__label { margin-top: 6px; font-size: 12px; color: #64748b; } .dark .pm-countdown-box__label, .dark .pm-mini-stat__label { color: #94a3b8; } #homeCCTVHighlights > div, #homeNewsList > div { border-radius: 18px; } #homeNewsList > div { border: 1px solid rgba(15,23,42,0.06); background: rgba(248,250,252,0.82); padding: 14px 16px; } .dark #homeNewsList > div { background: rgba(2,6,23,0.55); border-color: rgba(148,163,184,0.14); } @media (max-width: 768px) { #app { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } .pm-home-actions, .pm-home-quick-grid, .pm-home-split { grid-template-columns: 1fr; } .pm-countdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { #mainContent.pm-content-shell { padding-left: 14px !important; padding-right: 14px !important; } .pm-home-hero__content, .pm-home-action, .pm-home-panel, .card.pm-section-card { padding: 16px; } .pm-home-hero__top { flex-wrap: wrap; } .pm-home-stats { gap: 10px; } .pm-home-stat__value { font-size: 28px; } }