/* ============================================================================ hotspotsatu — TEMA DARK-TECH NEON (khusus halaman FWM / home) ---------------------------------------------------------------------------- Di-scope KETAT di bawah [data-theme="fwm-dark"] (atribut pada ), jadi halaman lain (member/voucher/about/dst) TIDAK ikut berubah. Hanya warna/permukaan + latar jaringan. Struktur & ID hook JS tetap. Self-host, tanpa CDN. Hormati prefers-reduced-motion. ============================================================================ */ [data-theme="fwm-dark"]{ /* Override token → permukaan gelap + teks terang */ --ink:#E8F1FB; --muted:#94AAC4; --ink-on-navy:#EAF2FB; --muted-on-navy:#9FBAD6; --bg:#070E1A; --surface:#0E1C30; --surface-2:#0B1626; --line:rgba(120,165,215,.16); --line-soft:rgba(120,165,215,.09); --glass:rgba(18,32,54,.55); --glass-strong:rgba(14,26,46,.74); --glass-brd:rgba(120,180,235,.16); --glass-blur:saturate(160%) blur(14px); /* Aksen neon (identitas AI/jaringan) */ --cyan:#22D3EE; --cyan-2:#5BE7F5; --cyan-deep:#0EA5C4; } /* ---- Latar global gelap + mesh halus ---- */ [data-theme="fwm-dark"] body{ background: radial-gradient(1200px 720px at 82% -12%, rgba(34,211,238,.10), transparent 56%), radial-gradient(1100px 640px at 4% 4%, rgba(34,197,94,.08), transparent 56%), radial-gradient(1000px 900px at 50% 120%, rgba(246,197,68,.06), transparent 60%), #070E1A; } [data-theme="fwm-dark"] .section h2.title, [data-theme="fwm-dark"] .h-lead{color:#F2F7FD} [data-theme="fwm-dark"] .section p.sub{color:var(--muted)} /* ==================================================================== NAV (banner) → dark glass dengan garis neon ==================================================================== */ [data-theme="fwm-dark"] .banner{ background:linear-gradient(180deg, rgba(11,22,38,.92), rgba(8,16,28,.82)); -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px); color:#EAF2FB; box-shadow:0 1px 0 rgba(34,211,238,.18), 0 10px 30px rgba(0,0,0,.45); border-bottom:1px solid rgba(34,211,238,.18); } [data-theme="fwm-dark"] .banner-flag{display:none} [data-theme="fwm-dark"] .banner-wave path{fill:#070E1A} [data-theme="fwm-dark"] .logo .wordmark .hs{color:#4FC3FF} [data-theme="fwm-dark"] .logo .wordmark .satu{color:#34D399} [data-theme="fwm-dark"] .logo .tag{color:#9FBAD6} [data-theme="fwm-dark"] .logo .tag b{color:#34D399} [data-theme="fwm-dark"] .mainnav a{color:#CFE0F2} [data-theme="fwm-dark"] .mainnav a:hover{background:rgba(34,211,238,.12)} [data-theme="fwm-dark"] .mainnav a[aria-current="page"]{ background:rgba(34,211,238,.16); color:#fff; box-shadow:inset 0 0 0 1px rgba(34,211,238,.4)} [data-theme="fwm-dark"] .nav-toggle{ background:rgba(34,211,238,.10); border-color:rgba(34,211,238,.3); color:#EAF2FB} /* ---- Subbar + pills ---- */ [data-theme="fwm-dark"] .date{color:#9FBAD6} [data-theme="fwm-dark"] .pill{ color:#DCEAF7; background:rgba(18,32,54,.6); border-color:rgba(120,180,235,.18)} [data-theme="fwm-dark"] .pill[aria-current="page"]{ background:linear-gradient(135deg, rgba(34,211,238,.22), rgba(34,197,94,.18)); color:#fff; border-color:rgba(34,211,238,.45); box-shadow:0 0 18px rgba(34,211,238,.22)} /* ==================================================================== HERO — wadah jaringan (grid + canvas konstelasi + glow) ==================================================================== */ [data-theme="fwm-dark"] .hero-wrap{ position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-xl); background:linear-gradient(160deg, #0B1A2E 0%, #081222 60%, #060E1A 100%); border:1px solid rgba(34,211,238,.16); box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04); margin-top:14px; } [data-theme="fwm-dark"] .net-bg{position:absolute; inset:0; z-index:0; pointer-events:none} [data-theme="fwm-dark"] #netfx{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.9} /* Grid perspektif yang memudar di tepi */ [data-theme="fwm-dark"] .net-grid{ position:absolute; inset:-2px; background-image: linear-gradient(rgba(34,211,238,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.10) 1px, transparent 1px); background-size:42px 42px; background-position:center; -webkit-mask:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%); mask:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%); animation:netgrid 22s linear infinite; } @keyframes netgrid{from{background-position:0 0}to{background-position:42px 42px}} /* Glow neon mengambang */ [data-theme="fwm-dark"] .net-glow{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55} [data-theme="fwm-dark"] .net-glow.g1{ width:360px; height:360px; top:-120px; right:-60px; background:radial-gradient(circle, rgba(34,211,238,.55), transparent 65%)} [data-theme="fwm-dark"] .net-glow.g2{ width:320px; height:320px; bottom:-130px; left:-50px; background:radial-gradient(circle, rgba(34,197,94,.42), transparent 66%)} [data-theme="fwm-dark"] .hero{position:relative; z-index:1; padding:34px clamp(18px,3vw,40px) 26px} /* ---- Kicker "live" ---- */ [data-theme="fwm-dark"] .kicker{ color:#5BE7F5; background:rgba(34,211,238,.10); border-color:rgba(34,211,238,.3); display:inline-flex; align-items:center; gap:8px} [data-theme="fwm-dark"] .live-dot{ width:8px; height:8px; border-radius:50%; background:#34D399; box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:livepulse 2.2s ease-out infinite} @keyframes livepulse{ 0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)} 70%{box-shadow:0 0 0 9px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}} /* ---- Brand + judul ---- */ [data-theme="fwm-dark"] .hero-brand .wm .hs{color:#4FC3FF} [data-theme="fwm-dark"] .hero-brand .wm .satu{color:#34D399} [data-theme="fwm-dark"] .hero h1{color:#F4F9FE; text-shadow:0 2px 30px rgba(0,0,0,.4)} [data-theme="fwm-dark"] .hero h1 .hl{ background:linear-gradient(120deg,#34D399,#22C55E); -webkit-background-clip:text; background-clip:text; color:transparent} [data-theme="fwm-dark"] .hero h1 .hl-cyan{ background:linear-gradient(120deg,#5BE7F5,#22D3EE); -webkit-background-clip:text; background-clip:text; color:transparent} [data-theme="fwm-dark"] .hero .slogan{color:#CFE0F2} [data-theme="fwm-dark"] .hero .slogan b{color:#34D399} [data-theme="fwm-dark"] .hero .desc{color:#A9C0D8} [data-theme="fwm-dark"] .hero .desc strong{color:#FFE07A} [data-theme="fwm-dark"] .hero-mini{color:#90A6BE} [data-theme="fwm-dark"] .hero-mini svg{color:#34D399} [data-theme="fwm-dark"] .btn-ghost{ background:rgba(34,211,238,.10); color:#DCEFF6; box-shadow:inset 0 0 0 1px rgba(34,211,238,.3)} [data-theme="fwm-dark"] .btn-ghost:hover{background:rgba(34,211,238,.18)} /* ==================================================================== PANEL 3-TUGAS — kaca gelap + tepi neon ==================================================================== */ [data-theme="fwm-dark"] .panel{ background:linear-gradient(165deg, rgba(16,34,58,.92), rgba(9,18,32,.92)); border:1px solid rgba(34,211,238,.22); box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05), 0 0 40px rgba(34,211,238,.06)} [data-theme="fwm-dark"] .panel::before{background:radial-gradient(circle, rgba(34,211,238,.22), transparent 64%)} [data-theme="fwm-dark"] .panel::after{background:radial-gradient(circle, rgba(34,197,94,.18), transparent 66%)} [data-theme="fwm-dark"] .panel-title .k{color:#5BE7F5} [data-theme="fwm-dark"] .step{background:rgba(255,255,255,.04); border-color:rgba(120,180,235,.16)} [data-theme="fwm-dark"] .step[data-state="active"]{ border-color:#22D3EE; background:rgba(34,211,238,.10); box-shadow:0 0 0 3px rgba(34,211,238,.12)} [data-theme="fwm-dark"] .step[data-state="active"] .num{background:#22D3EE; color:#062029} [data-theme="fwm-dark"] .sig.s1 i:nth-child(1), [data-theme="fwm-dark"] .sig.s2 i:nth-child(1), [data-theme="fwm-dark"] .sig.s2 i:nth-child(2), [data-theme="fwm-dark"] .sig.s3 i{background:#22D3EE} [data-theme="fwm-dark"] .pbar > i{background:linear-gradient(90deg,#22D3EE,#34D399)} /* ==================================================================== SLOT IKLAN di dark — fallback kaca gelap (anti-CLS tetap) ==================================================================== */ [data-theme="fwm-dark"] .ad{ background:linear-gradient(135deg, rgba(20,36,60,.6), rgba(12,24,42,.6)); border:1px dashed rgba(120,180,235,.22); color:#7F94AD} [data-theme="fwm-dark"] .ad span small{opacity:.7} [data-theme="fwm-dark"] .sponsor-head{color:#7F95AE} [data-theme="fwm-dark"] .sponsor-head::after{background:rgba(120,165,215,.16)} /* Slot iklan strategis (billboard/native in-feed/video) — bingkai bersih + glow neon */ [data-theme="fwm-dark"] .ad-contain{border-color:rgba(34,211,238,.22); box-shadow:0 14px 40px rgba(0,0,0,.45)} [data-theme="fwm-dark"] .ad-video{border:1px solid rgba(34,211,238,.22); background:#0A1320; box-shadow:0 14px 40px rgba(0,0,0,.45)} /* ==================================================================== CARA KERJA · TRUST — kartu kaca gelap ==================================================================== */ [data-theme="fwm-dark"] .how{ background:rgba(16,30,52,.55); border-color:rgba(120,180,235,.14); box-shadow:0 14px 34px rgba(0,0,0,.4)} [data-theme="fwm-dark"] .how:hover{box-shadow:0 22px 50px rgba(0,0,0,.55), 0 0 30px rgba(34,211,238,.1)} [data-theme="fwm-dark"] .how h3{color:#EAF2FB} [data-theme="fwm-dark"] .how .n{color:#7F95AE} [data-theme="fwm-dark"] .how p{color:#9FB4CC} [data-theme="fwm-dark"] .how:nth-child(1) .ic{ background:linear-gradient(135deg,#22D3EE,#0EA5C4); color:#04212A; box-shadow:0 8px 22px rgba(34,211,238,.3)} [data-theme="fwm-dark"] .tcard{ background:rgba(16,30,52,.55); border-color:rgba(120,180,235,.14)} [data-theme="fwm-dark"] .tcard .v{ background:linear-gradient(120deg,#5BE7F5,#34D399); -webkit-background-clip:text; background-clip:text; color:transparent} [data-theme="fwm-dark"] .tcard .l{color:#90A6BE} /* ---- Kartu jalur: tambah glow tepi pada hover (gradien bawaan dipertahankan) ---- */ [data-theme="fwm-dark"] .jcard{box-shadow:0 18px 44px rgba(0,0,0,.5)} [data-theme="fwm-dark"] .jcard:hover{box-shadow:0 26px 60px rgba(0,0,0,.6), 0 0 34px rgba(34,211,238,.18)} /* ---- Live chat tetap hijau (kontras bagus di dark) ---- */ [data-theme="fwm-dark"] .ctaband{border:1px solid rgba(34,211,238,.18)} /* ==================================================================== FORM & KONTEN (Member Area / Internet Voucher) di dark -------------------------------------------------------------------- Penting: input bawaan = bg putih + teks var(--ink). Karena --ink dioverride jadi terang, input HARUS digelapkan agar teks terbaca. ==================================================================== */ [data-theme="fwm-dark"] .section-title{color:#7FE0EE} [data-theme="fwm-dark"] .card h2, [data-theme="fwm-dark"] .card h3{color:#EAF2FB} [data-theme="fwm-dark"] .lead{color:#A9C0D8} [data-theme="fwm-dark"] .prose p{color:#A9C0D8} [data-theme="fwm-dark"] .prose a{color:#5BE7F5; box-shadow:inset 0 -1px 0 rgba(91,231,245,.45)} [data-theme="fwm-dark"] .field label{color:#DCEAF7} [data-theme="fwm-dark"] .field input, [data-theme="fwm-dark"] .panel .field input{ background:rgba(8,16,28,.78); color:#EAF2FB; border-color:rgba(120,180,235,.22)} [data-theme="fwm-dark"] .field input::placeholder, [data-theme="fwm-dark"] .panel .field input::placeholder{color:#6F86A0} [data-theme="fwm-dark"] .field input:focus, [data-theme="fwm-dark"] .panel .field input:focus{ border-color:#22D3EE; box-shadow:0 0 0 3px rgba(34,211,238,.22)} [data-theme="fwm-dark"] .field .hint{color:#90A6BE} [data-theme="fwm-dark"] .field .hint a{color:#5BE7F5} [data-theme="fwm-dark"] .note{color:#9FB4CC} [data-theme="fwm-dark"] .ol li{border-color:rgba(120,165,215,.12)} [data-theme="fwm-dark"] .loc{border-color:rgba(120,165,215,.12)} [data-theme="fwm-dark"] .loc .a{color:#9FB4CC} [data-theme="fwm-dark"] .loc .a a{color:#5BE7F5; font-weight:700; text-decoration:none} /* ==================================================================== RESPONSIVE / MOTION ==================================================================== */ @media (max-width:1040px){ [data-theme="fwm-dark"] .hero{padding:26px 18px 22px} } @media (prefers-reduced-motion: reduce){ [data-theme="fwm-dark"] .net-grid{animation:none} [data-theme="fwm-dark"] .live-dot{animation:none} }