/* ============================================================================ assets/css/cjp-bg.css Shared "login theme" background for EVERY CJP page (public + member panel). Layers, back to front — all negative z-index, so they sit under normal page content WITHOUT creating a stacking context on the content (existing modals, sticky headers and dropdowns keep working exactly as before): -3 amber ambient glow (body::before) -2 drifting slogans (#cjp-slogans) -1 3D India flag + roach canvas (#cjp-bg-canvas) ← driven by cjp-bg.js Everything is scoped to html.cjp-theme , so a page only gets this if its tag carries that class (public_head.php and the member-panel header add it). Purely visual: no sizes, margins or layout are changed here. ========================================================================== */ :root { --cjp-bg: #020617; --cjp-line: rgba(51, 65, 85, .55); } html.cjp-theme { background: var(--cjp-bg); } /* Tailwind's bg-slate-950 on would paint over the canvas — let the background (same colour) show instead. */ html.cjp-theme body { background-color: transparent !important; } html.cjp-theme body::before { /* soft amber ambient glow */ content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(60rem 38rem at 72% -8%, rgba(245, 158, 11, .13), transparent 62%), radial-gradient(44rem 30rem at -5% 105%, rgba(245, 158, 11, .08), transparent 62%), radial-gradient(30rem 24rem at 100% 100%, rgba(239, 68, 68, .05), transparent 65%); } #cjp-slogans { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; user-select: none; -webkit-user-select: none; } .cjp-slogan { position: absolute; top: 0; color: rgba(255, 255, 255, .07); font-weight: 800; letter-spacing: .02em; white-space: nowrap; animation: cjpFall linear infinite; will-change: transform; } @keyframes cjpFall { from { transform: translate3d(0, -40px, 0); } to { transform: translate3d(0, calc(100vh + 60px), 0); } } #cjp-bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* ───────────────────────────── GLASS SURFACES ────────────────────────────── Opaque slate cards / sections would hide the flag and the roaches completely, so they become the same translucent "login glass" the member panel uses — the 3D flag then shows softly through cards. Overlays, dropdowns, sticky bars and form fields are deliberately left solid so text stays crisp. */ html.cjp-theme { --cjp-glass: rgba(15, 23, 42, .80); } @media (min-width: 1024px) { html.cjp-theme { --cjp-glass: rgba(15, 23, 42, .66); } } html.cjp-theme div.bg-slate-900, html.cjp-theme details.bg-slate-900, html.cjp-theme article.bg-slate-900, html.cjp-theme section.bg-slate-900, html.cjp-theme aside.bg-slate-900, html.cjp-theme li.bg-slate-900 { background-color: var(--cjp-glass); } html.cjp-theme section.bg-slate-950, html.cjp-theme div.bg-slate-950, html.cjp-theme footer.bg-slate-950, html.cjp-theme main.bg-slate-950 { background-color: rgba(2, 6, 23, .52); } html.cjp-theme header.bg-slate-900 { background-color: rgba(15, 23, 42, .88); } @media (min-width: 1024px) { html.cjp-theme div.bg-slate-900, html.cjp-theme details.bg-slate-900, html.cjp-theme article.bg-slate-900, html.cjp-theme header.bg-slate-900 { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } } /* …but never glass for overlays, dropdowns, sticky/fixed bars */ html.cjp-theme .fixed.bg-slate-900, html.cjp-theme .fixed div.bg-slate-900, html.cjp-theme .absolute.bg-slate-900, html.cjp-theme .sticky.bg-slate-900 { background-color: #0f172a; } html.cjp-theme .fixed.bg-slate-950, html.cjp-theme .absolute.bg-slate-950 { background-color: #020617; } /* ───────────────────────────── TEXT OVER THE FLAG ────────────────────────── The painted flag is bright, so headings and paragraphs get a soft dark halo — invisible on plain backgrounds, but keeps text readable wherever it crosses the saffron / white / green paint. */ html.cjp-theme h1, html.cjp-theme h2, html.cjp-theme h3, html.cjp-theme h4, html.cjp-theme p, html.cjp-theme li { text-shadow: 0 1px 8px rgba(2, 6, 23, .85), 0 0 2px rgba(2, 6, 23, .55); } /* gradient-filled text (transparent fill) would show the shadow THROUGH the letters — use a drop-shadow halo instead */ html.cjp-theme .text-transparent, html.cjp-theme .ud-title-lg em { text-shadow: none; } html.cjp-theme .text-transparent, html.cjp-theme .ud-title-lg em { filter: drop-shadow(0 1px 6px rgba(2, 6, 23, .8)); } @media (prefers-reduced-motion: reduce) { .cjp-slogan { animation: none !important; } } @media print { #cjp-bg-canvas, #cjp-slogans, html.cjp-theme body::before { display: none !important; } }