/* ===================================================================== ViberWorld App — base styles Dark theme by default, light theme available via .theme-light on . Both keep the brand identity (vibe, neon, glass) — light is bright but themed, not generic. ===================================================================== */ /* ---------- Theme tokens ---------- */ :root, html.theme-dark { --bg: #0f0c29; --bg-2: #1a1640; --panel: rgba(20, 16, 50, 0.72); --panel-2: rgba(28, 22, 70, 0.55); --border: rgba(168, 139, 250, 0.18); --border-h: rgba(168, 139, 250, 0.32); --text: #e9e2ff; --muted: #a8a2cc; --cyan: #22d3ee; --magenta: #ec4899; --gold: #facc15; --green: #22c55e; --pink: #f472b6; --violet: #a78bfa; --blue: #60a5fa; --red: #f87171; } html.theme-light { --bg: #f4f1ff; --bg-2: #ede5ff; --panel: rgba(255, 255, 255, 0.85); --panel-2: rgba(244, 241, 255, 0.92); --border: rgba(124, 58, 237, 0.2); --border-h: rgba(124, 58, 237, 0.4); --text: #1a1135; --muted: #5d4d8a; --cyan: #0e7490; --magenta: #be185d; --gold: #a16207; --green: #15803d; --pink: #be185d; --violet: #7c3aed; --blue: #1d4ed8; --red: #dc2626; } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; line-height: 1.55; min-height: 100vh; overflow-x: hidden; } /* Vibe background — radial gradient + subtle grid */ .vw-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(800px 600px at 20% 10%, rgba(167, 139, 250, 0.18), transparent 60%), radial-gradient(700px 500px at 80% 80%, rgba(34, 211, 238, 0.15), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); } html.theme-light .vw-bg { background: radial-gradient(800px 600px at 20% 10%, rgba(167, 139, 250, 0.25), transparent 60%), radial-gradient(700px 500px at 80% 80%, rgba(236, 72, 153, 0.12), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); } /* ---------- Top bar ---------- */ .vw-topbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--panel); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .vw-brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.2rem; text-decoration: none; background: linear-gradient(135deg, var(--violet), var(--cyan), var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.01em; } .vw-nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .vw-nav a, .vw-link-btn { font-size: 0.92rem; color: var(--text); text-decoration: none; padding: 6px 10px; border-radius: 8px; transition: all 0.15s ease; background: transparent; border: 0; cursor: pointer; font-family: inherit; } .vw-nav a:hover, .vw-link-btn:hover { background: var(--panel-2); color: var(--violet); } .vw-nav .vw-cta { background: linear-gradient(135deg, var(--violet), var(--magenta)); color: #fff; font-weight: 600; } .vw-nav .vw-cta:hover { filter: brightness(1.1); color: #fff; } .vw-nav-staff { border: 1px solid var(--border-h); } .vw-logout-form { display: inline; margin: 0; } /* ---------- Main layout ---------- */ .vw-main { max-width: 1280px; margin: 0 auto; padding: 32px 20px 64px; } /* ---------- Footer ---------- */ .vw-footer { text-align: center; padding: 24px 16px; color: var(--muted); font-size: 0.86rem; border-top: 1px solid var(--border); margin-top: 64px; } .vw-footer a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--border-h); } .vw-footer a:hover { color: var(--text); } /* ---------- Flash messages ---------- */ .vw-flash { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .vw-flash-item { padding: 12px 16px; border-radius: 10px; font-size: 0.95rem; border: 1px solid var(--border); } .vw-flash-ok { background: rgba(34, 197, 94, 0.1); border-color: rgba(34,197,94,0.3); color: #86efac; } .vw-flash-err { background: rgba(248, 113, 113, 0.1); border-color: rgba(248,113,113,0.3); color: #fca5a5; } .vw-flash-info { background: rgba(99, 102, 241, 0.08); border-color: rgba(99,102,241,0.3); color: var(--violet); } html.theme-light .vw-flash-ok { color: #166534; } html.theme-light .vw-flash-err { color: #991b1b; } html.theme-light .vw-flash-info { color: #4338ca; } /* ---------- Cards / panels ---------- */ .vw-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 24px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ---------- Forms ---------- */ .vw-form { display: flex; flex-direction: column; gap: 14px; max-width: 440px; margin: 0 auto; } .vw-field { display: flex; flex-direction: column; gap: 6px; } .vw-field label { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; } .vw-field input[type="text"], .vw-field input[type="email"], .vw-field input[type="password"], .vw-field input[type="number"], .vw-field textarea, .vw-field select { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .vw-field input:focus, .vw-field textarea:focus, .vw-field select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18); } .vw-help { font-size: 0.82rem; color: var(--muted); } /* Native