:root { color-scheme: dark; --bg: #0d0804; --surface: #1a1208; --surface2: #261a0c; --border: #4a3510; --gold: #c8a030; --gold-lt: #e8c868; --text: #e0d0a8; --muted: #907860; --accent: #38b0b8; --accent2: #2898a0; --red: #c83030; --green: #50b858; --radius: 4px; } * { box-sizing: border-box; } body { background: var(--bg); background-image: radial-gradient(ellipse at 50% 0%, rgba(200, 160, 48, .06) 0%, transparent 55%); color: var(--text); font: 14px/1.6 system-ui, sans-serif; margin: 0; padding: 0 1rem 3rem; } h1, h2, h3 { font-family: 'Cinzel', serif; color: var(--gold); margin: 0; } a { color: var(--accent); } .text-muted { color: var(--muted); } /* Golden line frame along the bottom viewport edge. Attached to so it applies on every admin page, not just .auth-page ones. */ html::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 18px; background: url('https://reignofatlantis.com/assets/images/ui/frames/ui_frame_golden_line.webp') repeat-x center / auto 100%; z-index: 5; pointer-events: none; } .mt16 { margin-top: 16px; } .auth-page { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 24px 24px 0; } .auth-page::before { content: ""; position: fixed; inset: -20px; background: url('bg-doa.webp') center / cover no-repeat; filter: blur(2px); z-index: -2; } .auth-page::after { content: ""; position: fixed; inset: 0; background: linear-gradient(rgba(13, 8, 4, .82), rgba(13, 8, 4, .88)), radial-gradient(ellipse at 50% 0%, rgba(200, 160, 48, .06) 0%, transparent 55%); z-index: -1; } .auth-box { background: var(--surface); border-style: solid; border-width: 26px; border-image-source: url('https://reignofatlantis.com/assets/images/ui/backgrounds/ui_background_main.webp'); border-image-slice: 75 fill; border-image-width: 26px; border-image-repeat: stretch; padding: 40px 36px; width: 360px; box-shadow: 0 4px 24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(200, 160, 48, .08); /* Auto top/bottom margins inside .auth-page's column flex: centers the box in the space above the footer, instead of the whole page needing justify-content:center (which would center the footer too). */ margin: auto 0; } .auth-brand { display: block; font-family: 'Cinzel', serif; text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 4px; color: var(--gold); letter-spacing: 1px; text-shadow: 0 0 16px rgba(200, 160, 48, .5); text-decoration: none; } .auth-brand span { color: var(--gold-lt); } .auth-subtitle { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 28px; } .auth-box form label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; } .auth-box input[type="text"], .auth-box input[type="password"], .auth-box input[type="email"] { width: 100%; padding: 8px 10px; margin-bottom: 14px; font-size: 14px; } .auth-box input.field-with-hint { margin-bottom: 4px; } .field-hint { font-size: 12px; color: var(--muted); margin-bottom: 14px; } .auth-box input.is-valid { border: 2px solid var(--green); } .auth-box input.is-invalid { border: 2px solid var(--red); } .field-check { text-transform: none; letter-spacing: 0; font-weight: 700; } .field-check.ok { color: var(--green); } .field-check.bad { color: var(--red); } .auth-box button[type="submit"] { width: 100%; padding: 9px; background: linear-gradient(to bottom, #44c8d0, #1a98a4); color: #fff; border: 1px solid var(--gold); border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 4px; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); } .auth-box button[type="submit"]:hover { opacity: .88; } .auth-footer { margin-top: 20px; text-align: center; font-size: 13px; color: var(--muted); } .alert { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13px; } .alert-error { background: #240c0c; border: 1px solid #601818; color: #d84040; } .alert-success { background: #0c2010; border: 1px solid #1c4020; color: #60c060; } .badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; letter-spacing: .3px; } .badge-green { background: #0e2010; color: #60d060; border: 1px solid #1c4020; } .badge-red { background: #240c0c; color: #d84040; border: 1px solid #501818; } .badge-gray { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); } .admin-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; } .admin-nav { display: flex; gap: 8px; margin-bottom: 20px; } .admin-page .card, .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(200, 160, 48, .07); } .admin-page .card-title, .card-title { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); margin-bottom: 12px; } .admin-page .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(200, 160, 48, .07); } .stat-tile .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; } .stat-tile .stat-value { font-size: 24px; font-weight: 600; color: var(--text); line-height: 1.2; } .stat-tile .stat-delta { margin-top: 4px; font-size: 12px; font-weight: 600; } .stat-delta.delta-up { color: var(--green); } .stat-delta.delta-down { color: var(--red); } .stat-delta.delta-flat { color: var(--muted); } .chart-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 20px; } .admin-page .table-wrap, .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); } .admin-page table { width: 100%; border-collapse: collapse; font-size: 13px; } .admin-page th { text-align: left; padding: 8px 12px; color: var(--gold); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); white-space: nowrap; background: rgba(0, 0, 0, .25); } .admin-page th.sortable { cursor: pointer; user-select: none; } .admin-page th.sortable:hover { color: #fff; } .admin-page th.sortable::after { content: ''; display: inline-block; width: 10px; } .admin-page th.sortable[aria-sort="ascending"]::after { content: ' \25B2'; } .admin-page th.sortable[aria-sort="descending"]::after { content: ' \25BC'; } .admin-page td { padding: 9px 12px; border-bottom: 1px solid rgba(74, 53, 16, .4); vertical-align: middle; } .admin-page tr:last-child td { border-bottom: none; } .admin-page tbody tr:hover { background: rgba(200, 160, 48, .06); } .admin-page .form-group { margin-bottom: 16px; } .admin-page label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; } .admin-page input[type="text"], .admin-page input[type="password"], .admin-page select { width: 100%; padding: 7px 10px; font-size: 14px; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: opacity .15s, box-shadow .15s; letter-spacing: .3px; background: transparent; color: var(--text); text-decoration: none; } .btn:hover { opacity: .9; box-shadow: 0 0 10px rgba(200, 160, 48, .2); } .btn-primary { background: linear-gradient(to bottom, #44c8d0, #1a98a4); color: #fff; border-color: var(--gold); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); } .btn-danger { background: #3a0c0c; color: #d84040; border-color: #601818; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-sm { padding: 4px 10px; font-size: 12px; } .user-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; max-width: 1200px; margin: 0 auto; padding: 8px 16px 0; font-size: 13px; color: var(--muted); } .user-bar strong { color: var(--text); } .user-bar a { color: var(--muted); } .user-bar a:hover { color: var(--gold); } /* FOOTER (login/register/access-denied pages) */ .app-footer { position: relative; /* .auth-page is a flex column with align-items:center (to center .auth-box) and its own 24px horizontal padding. align-self:stretch overrides the centering just for this item so it fills the cross axis, and the negative margins bleed past the padding so it reaches the real viewport edges instead of stopping at the inset. */ align-self: stretch; margin: 24px -24px 0; padding: 28px 24px 40px; border-top: 1px solid var(--border); background: var(--surface); text-align: center; } .app-footer-inner { max-width: 1200px; margin: 0 auto; } .app-footer p { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0 0 12px; } .app-footer-links { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); } .app-footer-links a { color: var(--gold); } .app-footer-links a:hover { color: var(--gold-lt); } .app-footer-discord { display: inline-flex; align-items: center; gap: 6px; } /* Golden line frame — small touch of consistency with the rest of the ROAVault suite. Lives in the footer's normal flow (not position:fixed) so it only appears once, at the actual bottom of the page. No local img.php cache here (unlike the tracker app), so hotlinked directly like ReignOfAtlantisBattleSimulator/simulator/assets/app.css does. */ .app-footer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: url('https://reignofatlantis.com/assets/images/ui/frames/ui_frame_golden_line.webp') repeat-x center / auto 100%; pointer-events: none; }