/* Allowed :root vars in this file: NONE Allowed literal colors (hex/rgba) in this file: NONE */ /* Theme mapping (single hop): maintenance component vars -> index.css vars */ /* If your site already applies .dark/.light on normally, great. If not, this file still works if you manually add class="dark" or class="light" to in maintenance.html. */ .maintenance-page.light { /* force dark scheme only */ --maintenance-page-bg: var(--clr0e131B); --maintenance-card-bg: var(--clr212A37); --maintenance-card-border: var(--clr1d5a6d); --maintenance-title: var(--clrf7fcfe); --maintenance-text: var(--clrd3f7fa); --maintenance-badge-bg: var(--clr0d313f); --maintenance-badge-border: var(--clr159db5); --maintenance-badge-text: var(--clrf7fcfe); --maintenance-link: var(--clr22bbd7); --maintenance-focus: var(--clr22bbd7); } .dark { --maintenance-page-bg: var(--clr0e131B); --maintenance-card-bg: var(--clr212A37); --maintenance-card-border: var(--clr1d5a6d); --maintenance-title: var(--clrf7fcfe); --maintenance-text: var(--clrd3f7fa); --maintenance-badge-bg: var(--clr0d313f); --maintenance-badge-border: var(--clr159db5); --maintenance-badge-text: var(--clrf7fcfe); --maintenance-link: var(--clr22bbd7); --maintenance-focus: var(--clr22bbd7); } .maintenance-page { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--maintenance-page-bg); color: var(--maintenance-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } .maintenance-card { width: 100%; max-width: 42rem; border-radius: 1.25rem; padding: 2rem; border: 0.0625rem solid var(--maintenance-card-border); background: var(--maintenance-card-bg); box-sizing: border-box; } .maintenance-badge { display: inline-block; padding: 0.5rem 0.875rem; border-radius: 999rem; border: 0.0625rem solid var(--maintenance-badge-border); background: var(--maintenance-badge-bg); color: var(--maintenance-badge-text); font-size: 0.9rem; margin-bottom: 1rem; } .maintenance-title { margin: 0 0 0.75rem 0; font-size: 2rem; line-height: 1.2; color: var(--maintenance-title); } .maintenance-text { margin: 0 0 1rem 0; font-size: 1.05rem; line-height: 1.55; color: var(--maintenance-text); } .maintenance-link { color: var(--maintenance-link); text-decoration: none; } .maintenance-link:hover { text-decoration: underline; } .maintenance-link:focus-visible { outline: 0.1875rem solid var(--maintenance-focus); outline-offset: 0.25rem; border-radius: 0.5rem; }