/* ========================================================= SVO Landing — skin terang Dipakai lewat class `pm-light` di . Lapisan ini hanya mengganti warna; struktur, animasi, dan konten Pro Max tetap berasal dari liquid.css sehingga skin gelap bisa dipulihkan dengan melepas satu class. ========================================================= */ body.theme-liquid.pm-light { --pm-bg: #eaf2ff; --pm-bg-deep: #dce8fb; --pm-surface: rgba(255, 255, 255, 0.88); --pm-surface-strong: #ffffff; --pm-border: rgba(15, 23, 42, 0.09); --pm-border-soft: rgba(15, 23, 42, 0.06); --pm-text: #0f172a; --pm-muted: #5a6b85; --pm-dim: #94a3b8; --pm-blue: #2563eb; --pm-blue-bright: #1d4ed8; --pm-ink-soft: #475569; --pm-card: #ffffff; --pm-card-shadow: 0 18px 44px rgba(15, 23, 42, 0.07); --pm-card-shadow-hi: 0 26px 60px rgba(15, 23, 42, 0.1); } /* —— Kanvas halaman —— */ body.theme-liquid.pm-light::before { background: radial-gradient(ellipse 60% 55% at 14% 30%, rgba(59, 130, 246, 0.22), transparent 62%), radial-gradient(ellipse 52% 48% at 88% 38%, rgba(56, 189, 248, 0.2), transparent 60%), radial-gradient(ellipse 46% 40% at 52% 0%, rgba(99, 102, 241, 0.12), transparent 58%), linear-gradient(180deg, #f4f8ff 0%, #e9f1fe 46%, #e3edfc 100%); } body.theme-liquid.pm-light::after { background: radial-gradient(circle at 20% 44%, rgba(37, 99, 235, 0.14), transparent 34%), radial-gradient(circle at 80% 56%, rgba(249, 115, 22, 0.09), transparent 32%); } /* —— Navigasi —— */ body.theme-liquid.pm-light .landing-nav { background: rgba(255, 255, 255, 0.82) !important; border: 1px solid rgba(15, 23, 42, 0.07) !important; box-shadow: 0 14px 38px rgba(15, 23, 42, 0.08); } body.theme-liquid.pm-light .pm-brand-text, body.theme-liquid.pm-light .landing-secret, body.theme-liquid.pm-light .pm-brand { color: var(--pm-text) !important; } body.theme-liquid.pm-light .logo-secret:hover, body.theme-liquid.pm-light .pm-brand:hover { background: rgba(37, 99, 235, 0.07) !important; } body.theme-liquid.pm-light .landing-links button { color: var(--pm-ink-soft) !important; } body.theme-liquid.pm-light .landing-links button:hover { color: var(--pm-blue) !important; background: rgba(37, 99, 235, 0.09) !important; } /* —— Tombol —— */ body.theme-liquid.pm-light .landing-primary, body.theme-liquid.pm-light .lg-btn-dark, body.theme-liquid.pm-light .pm-btn-primary { background: var(--pm-blue) !important; color: #ffffff !important; box-shadow: 0 12px 26px rgba(37, 99, 235, 0.26) !important; } body.theme-liquid.pm-light .landing-primary:hover, body.theme-liquid.pm-light .lg-btn-dark:hover, body.theme-liquid.pm-light .pm-btn-primary:hover { background: #1d4ed8 !important; box-shadow: 0 16px 32px rgba(37, 99, 235, 0.32) !important; } body.theme-liquid.pm-light .landing-outline, body.theme-liquid.pm-light .lg-btn-glass, body.theme-liquid.pm-light .pm-btn-ghost { background: #ffffff !important; color: var(--pm-text) !important; border: 1px solid rgba(15, 23, 42, 0.12) !important; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important; } body.theme-liquid.pm-light .pm-btn-ghost:hover, body.theme-liquid.pm-light .lg-btn-glass:hover { background: #f4f7ff !important; border-color: rgba(37, 99, 235, 0.32) !important; } /* —— Hero —— */ body.theme-liquid.pm-light .pm-badge { color: var(--pm-ink-soft); background: rgba(255, 255, 255, 0.9); border-color: rgba(15, 23, 42, 0.08); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05); } body.theme-liquid.pm-light .pm-title .plain { color: var(--pm-text); } body.theme-liquid.pm-light .pm-cli { color: var(--pm-ink-soft); background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 23, 42, 0.08); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07); } body.theme-liquid.pm-light .pm-cli .pm-cli-text { color: var(--pm-text); } body.theme-liquid.pm-light .pm-cli .pm-cli-cursor { background: var(--pm-blue); } body.theme-liquid.pm-light .pm-login-dock::before { background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.3), transparent 50%), radial-gradient(circle at 75% 78%, rgba(56, 189, 248, 0.26), transparent 54%); filter: blur(34px); } body.theme-liquid.pm-light .pm-stat { background: var(--pm-card); border-color: rgba(15, 23, 42, 0.07); box-shadow: var(--pm-card-shadow); } body.theme-liquid.pm-light .pm-stat:hover { background: #ffffff; border-color: rgba(37, 99, 235, 0.3); box-shadow: var(--pm-card-shadow-hi); } /* —— Panel masuk yang menempel di hero —— */ body.theme-liquid.pm-light .svo-login-overlay.is-inline .svo-login-box { border: 1px solid rgba(15, 23, 42, 0.07); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12); } body.theme-liquid.pm-light .svo-login-overlay.is-inline .svo-login-box.is-manifest { background: #111318; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.06); } /* —— Seksi konten —— */ body.theme-liquid.pm-light .lg-sheet, body.theme-liquid.pm-light .pm-sheet, body.theme-liquid.pm-light .lg-cta, body.theme-liquid.pm-light .pm-cta { background: rgba(255, 255, 255, 0.86); border-color: rgba(15, 23, 42, 0.07); box-shadow: var(--pm-card-shadow); } body.theme-liquid.pm-light .lg-card, body.theme-liquid.pm-light .pm-card { background: #ffffff; border-color: rgba(15, 23, 42, 0.07); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05); } body.theme-liquid.pm-light .lg-card:hover, body.theme-liquid.pm-light .pm-card:hover { border-color: rgba(37, 99, 235, 0.3); box-shadow: var(--pm-card-shadow); } body.theme-liquid.pm-light .lg-card span, body.theme-liquid.pm-light .pm-card span, body.theme-liquid.pm-light .lg-section-head h2, body.theme-liquid.pm-light .pm-section-head h2, body.theme-liquid.pm-light .lg-tile h3, body.theme-liquid.pm-light .pm-tile h3, body.theme-liquid.pm-light .lg-feature strong, body.theme-liquid.pm-light .pm-feature strong, body.theme-liquid.pm-light .lg-feature-card strong, body.theme-liquid.pm-light .lg-price-card h3, body.theme-liquid.pm-light .lg-proj h3, body.theme-liquid.pm-light .pm-proj h3, body.theme-liquid.pm-light .lg-cta h2, body.theme-liquid.pm-light .pm-cta h2, body.theme-liquid.pm-light .lg-footer strong, body.theme-liquid.pm-light .pm-footer strong, body.theme-liquid.pm-light .lg-footer span, body.theme-liquid.pm-light .pm-footer span { color: var(--pm-text); } body.theme-liquid.pm-light .lg-tile, body.theme-liquid.pm-light .pm-tile, body.theme-liquid.pm-light .lg-feature, body.theme-liquid.pm-light .pm-feature, body.theme-liquid.pm-light .lg-feature-card, body.theme-liquid.pm-light .lg-proj, body.theme-liquid.pm-light .pm-proj, body.theme-liquid.pm-light .lg-price-card, body.theme-liquid.pm-light .lg-price-note { background: #ffffff; border-color: rgba(15, 23, 42, 0.07); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05); } body.theme-liquid.pm-light .lg-tile:hover, body.theme-liquid.pm-light .pm-tile:hover { border-color: rgba(37, 99, 235, 0.3); box-shadow: var(--pm-card-shadow); } body.theme-liquid.pm-light .lg-price-card-featured { background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%); border-color: rgba(37, 99, 235, 0.38); box-shadow: 0 20px 46px rgba(37, 99, 235, 0.14); } body.theme-liquid.pm-light .lg-include li { color: var(--pm-ink-soft); } body.theme-liquid.pm-light .lg-include li::before { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } body.theme-liquid.pm-light .lg-tile .material-symbols-rounded, body.theme-liquid.pm-light .pm-tile .material-symbols-rounded, body.theme-liquid.pm-light .lg-feature-card .material-symbols-rounded { background: rgba(37, 99, 235, 0.09); border-color: rgba(37, 99, 235, 0.18); } body.theme-liquid.pm-light .lg-blog-card .lg-blog-tag { background: rgba(37, 99, 235, 0.09); border-color: rgba(37, 99, 235, 0.2); } /* —— Footer & penanda —— */ body.theme-liquid.pm-light .lg-footer a, body.theme-liquid.pm-light .pm-footer a { color: var(--pm-ink-soft); } body.theme-liquid.pm-light .lg-footer a:hover, body.theme-liquid.pm-light .pm-footer a:hover { color: var(--pm-blue); } body.theme-liquid.pm-light .svo-we-are { color: var(--pm-text); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1); } body.theme-liquid.pm-light .svo-we-are span em { color: var(--pm-muted); }