/* ═══════════════════════════════════════════════════════════ Albawani Sign — Liquid Glass Theme v7 Loaded in to prevent white flash ═══════════════════════════════════════════════════════════ */ /* Override CSS variables in EVERY possible context */ html, html[style], html.light, html.dark, html[style*="color-scheme: light"], html[style*="color-scheme: dark"], :root { --background: 222 47% 6% !important; --foreground: 0 0% 98% !important; --card: 222 30% 9% !important; --card-foreground: 0 0% 98% !important; --popover: 222 30% 11% !important; --popover-foreground: 0 0% 98% !important; --primary: 160 84% 39% !important; --primary-foreground: 0 0% 100% !important; --secondary: 222 30% 14% !important; --secondary-foreground: 0 0% 85% !important; --muted: 222 25% 14% !important; --muted-foreground: 0 0% 55% !important; --accent: 222 25% 16% !important; --accent-foreground: 0 0% 98% !important; --destructive: 0 84% 60% !important; --destructive-foreground: 0 0% 98% !important; --border: 222 20% 18% !important; --input: 222 20% 18% !important; --ring: 160 84% 39% !important; --documenso: 160 84% 39% !important; color-scheme: dark !important; } /* Force dark on body immediately */ body { background-color: #0a0f1a !important; color: #fafafa !important; } main { background-color: transparent !important; } /* Kill hardcoded light backgrounds */ .bg-neutral-100 { background-color: rgba(15, 21, 37, 0.3) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; } .bg-white, .bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100 { background-color: #0a0f1a !important; } /* Primary buttons */ .bg-primary, .bg-documenso, .dark\:bg-documenso { background: linear-gradient(135deg, #10B981, #059669) !important; color: #fff !important; box-shadow: 0 4px 16px rgba(16,185,129,0.3), inset 0 1px 0 rgba(255,255,255,0.15) !important; } .bg-primary:hover, .bg-documenso:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 28px rgba(16,185,129,0.4) !important; } /* Secondary buttons */ .border.bg-background { background-color: #0f1525 !important; color: #8b8b8b !important; } /* Signin background */ img[alt="background pattern"] { filter: invert(1) hue-rotate(120deg) !important; opacity: 0.03 !important; } /* Inputs */ input, textarea, select { background-color: #0a0f1a !important; border-color: #1e293b !important; color: #fafafa !important; } input:focus, textarea:focus { border-color: #10B981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,0.15) !important; } input::placeholder, textarea::placeholder { color: #555 !important; } /* Header glass */ header, nav { background-color: rgba(10,15,26,0.85) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; } /* Tables */ thead, th { background-color: rgba(255,255,255,0.02) !important; color: #8b8b8b !important; } td, th { border-color: #1e293b !important; } tbody tr:hover { background-color: rgba(16,185,129,0.06) !important; } /* Tabs */ [role="tablist"] { background-color: rgba(255,255,255,0.03) !important; } [role="tab"][data-state="active"] { color: #fafafa !important; background-color: rgba(16,185,129,0.12) !important; } /* Dropdowns */ [role="menu"], [role="listbox"] { background-color: #0f1525 !important; border-color: #1e293b !important; } [role="menuitem"]:hover, [role="option"]:hover { background-color: rgba(16,185,129,0.1) !important; } /* Dialogs */ [role="dialog"] { background-color: #0f1525 !important; border: 1px solid #1e293b !important; } /* Dashed borders */ .border-dashed { border-color: rgba(16,185,129,0.2) !important; } /* Separator */ hr, [role="separator"] { background: linear-gradient(90deg,transparent,rgba(16,185,129,0.1),transparent) !important; border: none !important; height: 1px !important; } /* Text */ .text-muted-foreground { color: #8b8b8b !important; } a.text-documenso-700 { color: #34D399 !important; } /* ─── Gradient Avatars — solid border + glow + gradient fill ─── */ [class*="avatar"], [class*="Avatar"] { border: 2px solid rgba(16, 185, 129, 0.8) !important; box-shadow: 0 0 12px rgba(16, 185, 129, 0.3), 0 0 4px rgba(255,255,255,0.1) !important; transition: box-shadow 0.3s ease !important; } [class*="avatar"]:hover, [class*="Avatar"]:hover { box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), 0 0 6px rgba(255,255,255,0.2) !important; } /* Gradient fill overlay */ [class*="avatar"] span, [class*="Avatar"] span { background-image: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(0,0,0,0.05)) !important; font-weight: 600 !important; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #0a0f1a; } ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(16,185,129,0.3); } ::selection { background: rgba(16,185,129,0.3); color: #fff; } *:focus-visible { outline: 2px solid rgba(16,185,129,0.5) !important; outline-offset: 2px; } /* ─── Logo replacement via CSS (survives React re-renders) ─── */ html body header a[href="/"] svg, html body header a[href*="/t/"] svg, html body header a:has(svg.w-auto) svg { width: 0 !important; height: 0 !important; overflow: hidden !important; opacity: 0 !important; position: absolute !important; } html body header a[href="/"], html body header a[href*="/t/"], html body header a:has(svg.w-auto) { display: inline-block !important; min-width: 160px !important; min-height: 40px !important; background: url('/custom/logo-full.png') no-repeat left center / contain !important; filter: brightness(0) invert(1) !important; overflow: hidden !important; }