{"path":"/public_html/ar/style.css","name":"style.css","size":13187,"extension":".css","modified":"2026-03-26T02:26:44.944046046Z","mode":420,"isDir":false,"isSymlink":false,"type":"text","content":"/* =====================================================\n RAWABET v2 - Enhanced UI/UX Dark Theme\n ===================================================== */\n\n*, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n:root {\n --bg: #080b12;\n --bg-secondary: #0d1117;\n --card-bg: #111827;\n --card-hover: #161f2e;\n --border: #1e2a3a;\n --border-light: #2a3a50;\n --text: #e2e8f0;\n --text-muted: #7a8899;\n --text-subtle: #4a5568;\n --accent: #3b82f6;\n --accent-hover: #2563eb;\n --accent-glow: rgba(59,130,246,0.15);\n --live-green: #10b981;\n --error-red: #ef4444;\n --demo-orange: #f59e0b;\n --radius: 14px;\n --radius-sm: 8px;\n --radius-pill: 99px;\n --shadow: 0 4px 20px rgba(0,0,0,0.4);\n --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);\n --transition: 0.2s ease;\n --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;\n --font-arabic: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;\n}\n\nhtml, body {\n background: var(--bg);\n color: var(--text);\n font-family: var(--font);\n font-size: 15px;\n line-height: 1.6;\n min-height: 100vh;\n -webkit-font-smoothing: antialiased;\n}\n\n[dir=\"rtl\"] body { font-family: var(--font-arabic); }\n\n::-webkit-scrollbar { width: 6px; }\n::-webkit-scrollbar-track { background: var(--bg); }\n::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }\n::-webkit-scrollbar-thumb:hover { background: var(--accent); }\n\n.site-header {\n position: sticky;\n top: 0;\n z-index: 100;\n background: rgba(8,11,18,0.92);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border-bottom: 1px solid var(--border);\n}\n\n.header-inner {\n max-width: 1280px;\n margin: 0 auto;\n height: 60px;\n padding: 0 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n}\n\n.header-logo {\n display: flex;\n align-items: center;\n gap: 10px;\n text-decoration: none;\n}\n\n.logo-icon { font-size: 22px; }\n\n.logo-title {\n font-size: 20px;\n font-weight: 700;\n color: var(--accent);\n letter-spacing: -0.3px;\n line-height: 1;\n}\n\n.logo-sub {\n font-size: 11px;\n color: var(--text-muted);\n letter-spacing: 0.3px;\n}\n\n.lang-switcher { display: flex; gap: 4px; }\n\n.lang-btn {\n background: transparent;\n border: 1px solid var(--border-light);\n color: var(--text-muted);\n padding: 5px 12px;\n border-radius: var(--radius-pill);\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n transition: all var(--transition);\n letter-spacing: 0.5px;\n}\n\n.lang-btn:hover {\n border-color: var(--accent);\n color: var(--accent);\n background: var(--accent-glow);\n}\n\n.lang-btn.active {\n background: var(--accent);\n border-color: var(--accent);\n color: #fff;\n}\n\n.status-banner {\n text-align: center;\n padding: 7px 20px;\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.3px;\n border-bottom: 1px solid transparent;\n}\n\n.status-live {\n background: rgba(16,185,129,0.08);\n color: var(--live-green);\n border-bottom-color: rgba(16,185,129,0.15);\n}\n\n.status-error {\n background: rgba(239,68,68,0.08);\n color: var(--error-red);\n border-bottom-color: rgba(239,68,68,0.15);\n}\n\n.status-loading {\n background: rgba(59,130,246,0.08);\n color: var(--accent);\n border-bottom-color: rgba(59,130,246,0.15);\n}\n\n.status-demo {\n background: rgba(245,158,11,0.08);\n color: var(--demo-orange);\n border-bottom-color: rgba(245,158,11,0.15);\n}\n\n.layout-container {\n max-width: 1280px;\n margin: 0 auto;\n padding: 20px 16px;\n display: grid;\n grid-template-columns: 260px 1fr 260px;\n gap: 20px;\n align-items: start;\n}\n\n.sidebar-left, .sidebar-right {\n position: sticky;\n top: 76px;\n display: flex;\n flex-direction: column;\n gap: 14px;\n}\n\n.sidebar-card {\n background: var(--card-bg);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 18px;\n transition: border-color var(--transition);\n}\n\n.sidebar-card:hover { border-color: var(--border-light); }\n\n.sidebar-title {\n font-size: 12px;\n font-weight: 700;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.8px;\n margin-bottom: 14px;\n padding-bottom: 10px;\n border-bottom: 1px solid var(--border);\n}\n\n.stat-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 0;\n border-bottom: 1px solid var(--border);\n}\n.stat-row:last-child { border-bottom: none; }\n\n.stat-label {\n font-size: 12px;\n color: var(--text-muted);\n}\n\n.stat-value {\n font-size: 18px;\n font-weight: 700;\n color: var(--accent);\n font-variant-numeric: tabular-nums;\n}\n\n.about-card p {\n font-size: 13px;\n color: var(--text-muted);\n line-height: 1.7;\n}\n\n.sources-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.sources-list li {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 13px;\n color: var(--text-muted);\n padding: 4px 0;\n transition: color var(--transition);\n cursor: default;\n}\n\n.sources-list li:hover { color: var(--text); }\n\n.src-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n box-shadow: 0 0 6px currentColor;\n}\n\n.feed-main { min-width: 0; }\n\n.feed-toolbar {\n display: flex;\n gap: 10px;\n margin-bottom: 14px;\n align-items: center;\n}\n\n.search-wrap { flex: 1; position: relative; }\n\n.search-icon {\n position: absolute;\n top: 50%;\n inset-inline-start: 14px;\n transform: translateY(-50%);\n color: var(--text-muted);\n font-size: 15px;\n pointer-events: none;\n}\n\n.search-input {\n width: 100%;\n background: var(--card-bg);\n border: 1px solid var(--border);\n color: var(--text);\n padding: 10px 16px 10px 42px;\n border-radius: var(--radius-pill);\n font-size: 14px;\n outline: none;\n transition: border-color var(--transition), box-shadow var(--transition);\n}\n\n.search-input:focus {\n border-color: var(--accent);\n box-shadow: 0 0 0 3px var(--accent-glow);\n}\n\n.search-input::placeholder { color: var(--text-subtle); }\n\n.refresh-btn {\n background: var(--accent);\n border: none;\n color: #fff;\n padding: 10px 20px;\n border-radius: var(--radius-pill);\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n white-space: nowrap;\n transition: background var(--transition), transform var(--transition), box-shadow var(--transition);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.refresh-btn:hover {\n background: var(--accent-hover);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(59,130,246,0.4);\n}\n\n.refresh-btn:active { transform: translateY(0); }\n\n.source-filters {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: 16px;\n}\n\n.filter-pill {\n background: var(--card-bg);\n border: 1px solid var(--border);\n color: var(--text-muted);\n padding: 5px 14px;\n border-radius: var(--radius-pill);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all var(--transition);\n}\n\n.filter-pill:hover {\n border-color: var(--accent);\n color: var(--accent);\n background: var(--accent-glow);\n}\n\n.filter-pill.active {\n background: var(--accent);\n border-color: var(--accent);\n color: #fff;\n box-shadow: 0 2px 8px rgba(59,130,246,0.3);\n}\n\n.loading-spinner {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 60px;\n flex-direction: column;\n gap: 16px;\n}\n\n.spinner {\n width: 40px;\n height: 40px;\n border: 3px solid var(--border);\n border-top-color: var(--accent);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin { to { transform: rotate(360deg); } }\n\n.tweet-feed {\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n.tweet-card {\n background: var(--card-bg);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n margin-bottom: 10px;\n padding: 18px 20px;\n transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);\n cursor: default;\n position: relative;\n overflow: hidden;\n}\n\n.tweet-card::before {\n content: '';\n position: absolute;\n top: 0;\n inset-inline-start: 0;\n width: 3px;\n height: 100%;\n background: var(--source-color, var(--accent));\n border-radius: 3px 0 0 3px;\n opacity: 0;\n transition: opacity var(--transition);\n}\n\n.tweet-card:hover {\n background: var(--card-hover);\n border-color: var(--border-light);\n transform: translateY(-1px);\n box-shadow: 0 8px 24px rgba(0,0,0,0.3);\n}\n\n.tweet-card:hover::before { opacity: 1; }\n\n.tweet-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n flex-wrap: nowrap;\n}\n\n.source-avatar {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 800;\n font-size: 11px;\n color: #fff;\n flex-shrink: 0;\n letter-spacing: 0.5px;\n}\n\n.tweet-source {\n display: flex;\n flex-direction: column;\n min-width: 0;\n flex: 1;\n}\n\n.tweet-name {\n font-weight: 700;\n font-size: 13px;\n color: var(--text);\n line-height: 1.2;\n}\n\n.tweet-handle {\n font-size: 11px;\n color: var(--text-subtle);\n line-height: 1.2;\n}\n\n.tweet-time {\n font-size: 11px;\n color: var(--text-muted);\n white-space: nowrap;\n flex-shrink: 0;\n background: var(--bg-secondary);\n padding: 3px 8px;\n border-radius: var(--radius-pill);\n border: 1px solid var(--border);\n}\n\n.tweet-snippet {\n font-size: 15px;\n color: var(--text);\n line-height: 1.7;\n margin-bottom: 8px;\n}\n\n.tweet-title {\n font-size: 12px;\n color: var(--text-muted);\n margin-bottom: 12px;\n font-style: italic;\n line-height: 1.5;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n.read-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--accent);\n text-decoration: none;\n padding: 5px 14px;\n border: 1px solid rgba(59,130,246,0.4);\n border-radius: var(--radius-pill);\n font-weight: 600;\n transition: all var(--transition);\n background: transparent;\n}\n\n.read-btn:hover {\n background: var(--accent);\n border-color: var(--accent);\n color: #fff;\n box-shadow: 0 2px 8px rgba(59,130,246,0.35);\n}\n\n.empty-state {\n text-align: center;\n padding: 80px 20px;\n color: var(--text-muted);\n}\n\n.empty-icon {\n font-size: 56px;\n display: block;\n margin-bottom: 16px;\n opacity: 0.6;\n}\n\n.empty-state h3 {\n font-size: 18px;\n color: var(--text);\n margin-bottom: 8px;\n}\n\n.empty-state p {\n font-size: 14px;\n color: var(--text-muted);\n}\n\n.trending-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 4px;\n}\n\n.tag {\n background: var(--accent-glow);\n border: 1px solid rgba(59,130,246,0.3);\n color: var(--accent);\n padding: 4px 10px;\n border-radius: var(--radius-pill);\n font-size: 11px;\n font-weight: 600;\n cursor: default;\n transition: all var(--transition);\n letter-spacing: 0.3px;\n}\n\n.tag:hover {\n background: rgba(59,130,246,0.2);\n border-color: var(--accent);\n}\n\n.powered-card .powered-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 7px 0;\n font-size: 12px;\n color: var(--text-muted);\n border-bottom: 1px solid var(--border);\n}\n\n.powered-card .powered-item:last-child { border-bottom: none; }\n.powered-icon { font-size: 15px; }\n\n.site-footer {\n border-top: 1px solid var(--border);\n padding: 20px 16px;\n margin-top: 40px;\n background: var(--bg-secondary);\n}\n\n.footer-inner {\n max-width: 1280px;\n margin: 0 auto;\n display: flex;\n justify-content: center;\n gap: 8px;\n flex-wrap: wrap;\n font-size: 12px;\n color: var(--text-muted);\n align-items: center;\n}\n\n.footer-inner span { color: var(--text-subtle); }\n\n[dir=\"rtl\"] .tweet-card::before {\n border-radius: 0 3px 3px 0;\n}\n\n[dir=\"rtl\"] .tweet-title {\n direction: ltr;\n text-align: start;\n}\n\n[dir=\"rtl\"] .tweet-time {\n margin-inline-start: auto;\n margin-inline-end: 0;\n}\n\n@media (max-width: 1100px) {\n .layout-container {\n grid-template-columns: 240px 1fr;\n padding: 16px;\n }\n .sidebar-right { display: none; }\n}\n\n@media (max-width: 768px) {\n .layout-container {\n grid-template-columns: 1fr;\n padding: 10px;\n }\n\n .sidebar-left {\n position: static;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n\n .sources-card { grid-column: 1 / -1; }\n\n .tweet-card { padding: 14px 16px; }\n\n .tweet-snippet { font-size: 14px; }\n\n .source-avatar { width: 28px; height: 28px; font-size: 10px; }\n}\n\n@media (max-width: 480px) {\n .sidebar-left { grid-template-columns: 1fr; }\n\n .header-inner {\n flex-direction: column;\n height: auto;\n padding: 10px 14px;\n gap: 8px;\n }\n\n .site-header { position: relative; }\n\n .source-filters { gap: 5px; }\n .filter-pill { font-size: 11px; padding: 4px 10px; }\n\n .feed-toolbar { flex-wrap: wrap; }\n .refresh-btn { width: 100%; justify-content: center; }\n}\n\n@keyframes fadeInUp {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.tweet-card {\n animation: fadeInUp 0.3s ease both;\n}\n\n.tweet-card:nth-child(1) { animation-delay: 0.02s; }\n.tweet-card:nth-child(2) { animation-delay: 0.04s; }\n.tweet-card:nth-child(3) { animation-delay: 0.06s; }\n.tweet-card:nth-child(4) { animation-delay: 0.08s; }\n.tweet-card:nth-child(5) { animation-delay: 0.10s; }\n.tweet-card:nth-child(n+6) { animation-delay: 0.12s; }\n","link":""}