/* ============================================================================ STATUS SERVER — "BLACK SERVER MONITORING DASHBOARD" Redesign total: dashboard monitoring gelap solid (bukan glass/neumorphism), flat surfaces, shadow tipis, aksen cyan+hijau. Glass & blur HANYA dipakai di satu tempat: floating status bar (lihat bagian FLOATING di bawah) — sisanya sengaja flat, senada instruksi "bukan AI landing page, tapi dashboard server sungguhan". Scope HANYA ke .status-server-page-pad, halaman lain tidak terpengaruh. ============================================================================ */ .status-server-page-pad{ --ss-bg:#050505; --ss-surface:#0A0A0C; --ss-surface-strong:#0E0E11; --ss-border:rgba(255,255,255,.08); --ss-border-strong:rgba(255,255,255,.14); --ss-ink:#F2F2F0; --ss-ink-soft:#8A8A8E; --ss-ink-faint:#5B5B60; --ss-cyan:#2FC4D6; --ss-cyan-soft:rgba(47,196,214,.12); --ss-green:#22C55E; --ss-green-soft:rgba(34,197,94,.12); --ss-red:#EF4444; --ss-red-soft:rgba(239,68,68,.12); --ss-amber:#F59E0B; --ss-amber-soft:rgba(245,158,11,.12); --ss-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace; } /* PENTING: custom property (--ss-bg) hanya dideklarasikan di .status-server-page-pad (elemen anak) — custom property TIDAK mengalir ke ATAS ke (hanya mengalir ke bawah/turunan), jadi var(--ss-bg) di sini akan SELALU tidak terbaca (invalid) kalau dipakai di selector body. Makanya nilainya di-hardcode langsung supaya latar belakang halaman pasti hitam pekat, tidak tergantung dukungan :has() browser sekalipun. */ html:has(.status-server-page-pad), body:has(.status-server-page-pad){ background:#050505 !important; } /* Fallback utama (tidak butuh :has() sama sekali): section pembungkus halaman ini sendiri dipaksa hitam pekat & minimal setinggi layar, jadi tetap hitam penuh walau browser lama. */ .status-server-page-pad{ background:#050505; min-height:100vh; margin-top:-1px; /* rapatkan ke header, jangan sisakan celah putih tipis */ } .status-server-page-pad{ color:var(--ss-ink) !important; font-family:var(--font-body,'Barlow Condensed',sans-serif); } .status-server-page-pad h1, .status-server-page-pad h2, .status-server-page-pad h3{ color:var(--ss-ink) !important; } .status-server-page-pad p{ color:var(--ss-ink-soft) !important; } .status-server-page-pad .section-label{ color:var(--ss-cyan) !important; letter-spacing:3px; } /* --------------------------------------------------------------------- LIVE indicator — dot pulse kecil + label, disandingkan dengan judul. --------------------------------------------------------------------- */ .ss-live{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ss-green) !important; background:var(--ss-green-soft); border:1px solid rgba(34,197,94,.25); padding:4px 10px 4px 8px; border-radius:6px; vertical-align:middle; margin-left:10px; } .ss-live .ss-live-dot{ position:relative; width:6px; height:6px; border-radius:50%; background:var(--ss-green); flex:none; } .ss-live .ss-live-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; background:var(--ss-green); opacity:.5; animation:ssPulse 1.8s ease-out infinite; } /* --------------------------------------------------------------------- TOP STATISTICS — grid compact, 6 kartu rapi. Flat surface, border tipis, icon SVG kecil di kiri label. 6 kolom desktop -> 3 -> 2 di mobile. --------------------------------------------------------------------- */ .ss-summary-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; position:relative; z-index:1; } .ss-summary-card{ background:var(--ss-surface) !important; border:1px solid var(--ss-border); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:6px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } .ss-summary-card .ss-label{ font-size:10px; color:var(--ss-ink-soft) !important; text-transform:uppercase; letter-spacing:1px; display:flex; align-items:center; gap:6px; } .ss-summary-card .ss-label svg{ width:13px !important; height:13px !important; color:var(--ss-cyan); flex:none; } .ss-summary-card .ss-value{ font-size:19px; font-weight:800; color:var(--ss-ink) !important; font-family:var(--ss-mono); font-variant-numeric:tabular-nums; } /* --------------------------------------------------------------------- NODE CARD — panel monitoring solid, radius 20px, border kiri warna status, shadow sangat tipis + inset highlight (bukan neumorphism). --------------------------------------------------------------------- */ .ss-node-card{ background:var(--ss-surface) !important; border:1px solid var(--ss-border); border-radius:20px; padding:16px 18px; position:relative; z-index:1; box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03); border-left-width:3px; border-left-style:solid; transition:border-color .2s, background .2s; } .ss-node-card:hover{ background:var(--ss-surface-strong); } .ss-node-card[data-status="online"]{ border-left-color:var(--ss-green); } .ss-node-card[data-status="offline"]{ border-left-color:var(--ss-red); } .ss-node-card[data-status="maintenance"]{ border-left-color:var(--ss-amber); } .ss-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:5px 12px 5px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.3px; background:#000 !important; color:#FFFFFF !important; border:1px solid var(--ss-border-strong); } .ss-badge svg{ width:12px; height:12px; color:#FFFFFF !important; } /* Warna status jadi dot kecil di kiri teks — badge sendiri tetap hitam+putih supaya tegas. */ .ss-badge::before{ content:''; width:7px; height:7px; border-radius:50%; flex:none; background:currentColor; } .ss-badge.ss-online{ color:#FFFFFF; } .ss-badge.ss-online::before{ background:var(--ss-green); } .ss-badge.ss-offline{ color:#FFFFFF; } .ss-badge.ss-offline::before{ background:var(--ss-red); } .ss-badge.ss-maintenance{ color:#FFFFFF; } .ss-badge.ss-maintenance::before{ background:var(--ss-amber); } .ss-stat{ background:var(--ss-surface-strong) !important; border:1px solid var(--ss-border); border-radius:12px; padding:9px 11px; } .ss-stat .ss-stat-label{ font-size:9.5px; color:var(--ss-ink-soft) !important; text-transform:uppercase; letter-spacing:.6px; } .ss-stat .ss-stat-value{ font-size:13px; font-weight:700; color:var(--ss-ink) !important; margin-top:3px; font-family:var(--ss-mono); font-variant-numeric:tabular-nums; } .ss-stat .ss-bar{ height:4px; border-radius:4px; background:rgba(255,255,255,.08); margin-top:7px; overflow:hidden; } .ss-stat .ss-bar-fill{ height:100%; background:var(--ss-cyan); border-radius:4px; transition:width .4s ease; } .status-server-page-pad .ss-icon-cyan{ color:var(--ss-cyan) !important; } .status-server-page-pad .ss-last-update{ font-size:10.5px; color:var(--ss-ink-soft) !important; } /* --------------------------------------------------------------------- FLOATING STATUS BAR — satu-satunya elemen yang pakai efek kaca (dark glass + backdrop blur) sesuai instruksi: fixed bottom, rounded penuh, border tipis, shadow subtle, mengambang naik-turun sangat halus. Ditaruh di KANAN-bawah — tombol WhatsApp situs ini ada di kiri-bawah, jadi posisi kanan aman dari tabrakan. --------------------------------------------------------------------- */ .ss-floating{ position:fixed; right:16px; bottom:16px; z-index:999; display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 12px; border-radius:999px; background:rgba(10,10,12,.78) !important; border:1px solid var(--ss-border-strong); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); box-shadow:0 8px 24px rgba(0,0,0,.5); cursor:default; user-select:none; animation:ssFloatIn .4s ease both, ssHover 4s ease-in-out .4s infinite; } .ss-floating .ss-floating-dot{ position:relative; width:8px; height:8px; border-radius:50%; flex:none; background:var(--ss-green); } .ss-floating .ss-floating-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; background:var(--ss-green); opacity:.5; animation:ssPulse 1.8s ease-out infinite; } .ss-floating[data-overall="offline"] .ss-floating-dot, .ss-floating[data-overall="offline"] .ss-floating-dot::after{ background:var(--ss-red); } .ss-floating[data-overall="maintenance"] .ss-floating-dot, .ss-floating[data-overall="maintenance"] .ss-floating-dot::after{ background:var(--ss-amber); } .ss-floating .ss-floating-text{ display:flex; flex-direction:column; line-height:1.15; } .ss-floating .ss-floating-title{ font-size:11px; font-weight:800; color:#FFFFFF !important; letter-spacing:.2px; } .ss-floating .ss-floating-sub{ font-size:9.5px; color:var(--ss-ink-soft) !important; letter-spacing:.3px; margin-top:1px; font-family:var(--ss-mono); } @keyframes ssPulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(2.6); opacity:0; } } @keyframes ssFloatIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } } @keyframes ssHover{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } } @media (prefers-reduced-motion: reduce){ .ss-floating, .ss-floating .ss-floating-dot::after, .ss-live .ss-live-dot::after{ animation:none; } } @media (max-width: 900px){ .ss-summary-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width: 640px){ .ss-summary-grid{ grid-template-columns:repeat(2,1fr); } .ss-node-card{ padding:14px; border-radius:16px; } .ss-floating{ right:12px; bottom:12px; padding:9px 14px 9px 11px; max-width:calc(100vw - 24px); } .ss-floating .ss-floating-title{ font-size:10px; } }