/* Static pages theme (Our platform, FAQ, etc.) - EU flag background (like HOME/About) - Improved readability inside glass/cards Apply by adding class="static-page" on and including this CSS. */ body.static-page, body.eu-bg { background: transparent; position: relative; min-height: 100vh; } /* ----------------------------- Background per theme eu-bg = EU flag background without card/table overrides (dashboard pages) -------------------------------- */ /* Dark theme (default) */ body.static-page::before, body.eu-bg::before { content: ''; position: fixed; inset: 0; background: url('/images/eu.jpg') center / cover no-repeat; opacity: 0.50; pointer-events: none; z-index: 0; } body.static-page::after, body.eu-bg::after { content: ''; position: fixed; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.12) 0%, transparent 55%), radial-gradient(circle at 80% 70%, rgba(255,255,255,.10) 0%, transparent 50%), linear-gradient(135deg, rgba(30,64,175,.80) 0%, rgba(59,130,246,.76) 50%, rgba(14,165,233,.74) 100%); pointer-events: none; z-index: 0; } /* Keep layout elements above the background layers (do NOT touch all body children; otherwise it breaks .back-btn-fixed positioning on some pages) */ /* Page container. - flex: 1 makes it grow to fill body (pushes footer to bottom on short pages). - min-height: auto (CSS default for flex items) lets content force the item taller on long pages, so the footer stays after all content, not at viewport bottom. - Background (body.static-page::before/after) is position:fixed → always fills viewport, so no explicit min-height is needed for the visual background effect. */ #pageContainer { flex: 1; padding-top: 0; width: 100%; box-sizing: border-box; overflow-anchor: none; /* prevent browser scroll anchoring on page inject */ } /* Common containers used by static pages */ body.static-page .page, body.static-page .wrap, body.static-page main, body.static-page .container, body.eu-bg .page, body.eu-bg .wrap, body.eu-bg main, body.eu-bg .container, body.eu-bg #pageContainer { position: relative; z-index: 1; } /* Make sure the Back button stays fixed and doesn't stretch */ body.static-page .back-btn-fixed { position: fixed; width: auto; max-width: max-content; display: inline-flex; align-items: center; justify-content: center; } /* ----------------------------- Cards/text per theme -------------------------------- */ /* Dark theme (default) — white cards on blue gradient, matches main page role cards */ body.static-page .glass, body.static-page .card { background: #ffffff; border: none; box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10); color: #1e293b; } body.static-page .glass p, body.static-page .glass li, body.static-page .card p, body.static-page .card li { color: #334155; } body.static-page .glass h1, body.static-page .glass h2, body.static-page .glass h3, body.static-page .glass h4, body.static-page .card h1, body.static-page .card h2, body.static-page .card h3, body.static-page .card h4 { color: #1e293b; } body.static-page .tbl, body.static-page table { background: #ffffff; color: #1e293b; } /* Keep yellow accents where used */ body.static-page h1, body.static-page .sec-hdr h2, body.static-page .mission-main h2 { /* do not force yellow globally; keep page-specific styles */ } /* ── Form fields on static pages (dark theme) ── */ body.static-page input, body.static-page textarea, body.static-page select { background: #ffffff; border: 1.5px solid #cbd5e1; color: #1e293b; border-radius: 10px; } body.static-page input::placeholder, body.static-page textarea::placeholder { color: #94a3b8; } body.static-page input:focus, body.static-page textarea:focus, body.static-page select:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); outline: none; } body.static-page label { color: #1e293b; } body.static-page .hint { color: #64748b; } body.static-page .btn.secondary { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }