/* ========================================================= Mayon Background — Reusable across pages Apply by adding class="mayon-bg" to ========================================================= */ /* ── Full-page Mayon image ───────────────────────────────── */ body.mayon-bg::before { content: ''; position: fixed; inset: 0; z-index: 0; background-image: url('../images/mayon.png'); background-size: cover; background-position: center top; background-repeat: no-repeat; } /* ── Dark radial overlay — lighter centre so Mayon shows ─── */ body.mayon-bg::after { content: ''; position: fixed; inset: 0; z-index: 1; background: radial-gradient(ellipse 75% 65% at 50% 42%, rgba(5, 2, 15, 0.08) 0%, rgba(5, 2, 15, 0.40) 55%, rgba(5, 2, 15, 0.80) 100%); pointer-events: none; } /* ── Ensure blobs + page content sit above the overlay ───── */ body.mayon-bg .background-blobs { z-index: 2; } body.mayon-bg .background-blobs .blob { opacity: 0.20; /* Soft blobs — image is the star */ } /* Everything interactive must be above z-index 1 */ /* NOTE: .home-nav intentionally excluded — it already has position:fixed + z-index:200 in home.css */ body.mayon-bg .login-container, body.mayon-bg .home-main, body.mayon-bg .maya-main { position: relative; z-index: 10; } /* ── Login card — glass on dark Mayon background ─────────── */ body.mayon-bg .login-card { background: rgba(5, 2, 15, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(255, 153, 51, 0.32); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 180, 80, 0.12); } /* Nav dark glass on these pages */ body.mayon-bg .home-nav { background: rgba(8, 4, 18, 0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1.5px solid rgba(255, 153, 51, 0.25); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } /* Login card text contrast */ body.mayon-bg .login-header p, body.mayon-bg label { color: rgba(235, 220, 255, 0.90); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); } /* Input fields — light on dark */ body.mayon-bg .form-group input, body.mayon-bg .maya-field input, body.mayon-bg .maya-field select { background: rgba(255, 255, 255, 0.92); color: #1a0a00; border-color: rgba(255, 153, 51, 0.4); } /* Question / maya cards on dark bg — must sit above ::after overlay */ body.mayon-bg .maya-card { position: relative; z-index: 10; background: rgb(8, 4, 20); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(255, 153, 51, 0.30); box-shadow: 0 6px 36px rgba(0, 0, 0, 0.55); } body.mayon-bg .maya-content { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 153, 51, 0.20); color: rgba(235, 220, 255, 0.92); } body.mayon-bg .maya-header h2 { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.9)); } body.mayon-bg .maya-header p, body.mayon-bg .questionnaire-header p { color: rgba(240, 225, 255, 1.0); text-shadow: 0 1px 8px rgba(0, 0, 0, 1.0), 0 0 20px rgba(0, 0, 0, 0.8); } /* Question items */ body.mayon-bg .question-item { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 153, 51, 0.25); } body.mayon-bg .question-text { color: rgba(240, 228, 255, 0.95); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } body.mayon-bg .option-item { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 153, 51, 0.20); } body.mayon-bg .option-item:hover { background: rgba(255, 153, 51, 0.18); border-color: rgba(255, 153, 51, 0.45); } body.mayon-bg .option-item.selected { background: rgba(255, 153, 51, 0.25); border-color: var(--saffron); } body.mayon-bg .option-label { color: rgba(235, 220, 255, 0.92); } body.mayon-bg .loading-message p { color: rgba(220, 210, 240, 0.85); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); } /* Welcome badge in nav */ body.mayon-bg .welcome-badge { background: rgba(255, 153, 51, 0.15); border-color: rgba(255, 153, 51, 0.35); color: rgba(255, 230, 190, 0.95); } /* Language selector labels - visible on dark Mayon background */ body.mayon-bg .language-selector .lang-label { color: rgba(255, 230, 190, 0.95); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); } /* Active language label - saffron color with shadow */ body.mayon-bg .language-selector #langToggle:checked~.lang-label:last-child, body.mayon-bg .language-selector #langToggle:not(:checked)~.lang-label:first-child { color: #FFB366; text-shadow: 0 0 8px rgba(255, 179, 102, 0.5), 0 1px 6px rgba(0, 0, 0, 0.8); }