/* Alto unified page-refresh experience. The page is allowed to build normally underneath this cover, then revealed once the initial assets/data have settled so users never see a half-rendered layout. */ html.alto-page-booting { scroll-behavior: auto !important; overflow: hidden !important; background: #111214; } /* Keep the real page in layout so scripts can measure/render it normally, but make every page asset non-visible and non-interactive until initial rendering is done. */ html.alto-page-booting body { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; user-select: none !important; } /* Full-viewport refresh cover with the Alto logo. This belongs to , not , so it remains visible while the entire body is intentionally hidden. */ html.alto-page-booting::before { content: ""; position: fixed; inset: 0; z-index: 2147483646; display: block; background-color: #111214; background-image: url('/alto-logo.png'); background-repeat: no-repeat; background-position: center; background-size: 54px 54px; opacity: 0; transition: opacity 80ms ease-out; } /* The logo is preloaded at highest priority by both the HTML and refresh script. Keep the complete loader unit hidden until that image is decoded so the spinner can never paint first and make the Alto mark pop in a moment later. */ html.alto-page-booting.alto-loader-ready::before { opacity: 1; } /* Animated ring around the logo. */ html.alto-page-booting::after { content: ""; position: fixed; z-index: 2147483647; top: 50%; left: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 3px solid rgba(255, 255, 255, 0.14); border-top-color: #da373c; border-right-color: rgba(218, 55, 60, 0.55); border-radius: 50%; box-sizing: border-box; animation: alto-refresh-spin 0.8s linear 6; pointer-events: none; opacity: 0; transition: opacity 80ms ease-out; } html.alto-page-booting.alto-loader-ready::after { opacity: 1; } html[data-theme="light"].alto-page-booting, html[data-theme="light"].alto-page-booting::before { background-color: #f2f3f5; } html[data-theme="light"].alto-page-booting::after { border-color: rgba(17, 18, 20, 0.15); border-top-color: #da373c; border-right-color: rgba(218, 55, 60, 0.55); } /* Prevent an initially active dashboard view from replaying its own entrance effect at the exact moment the global refresh cover is removed. */ .alto-initial-no-motion { animation: none !important; transition: none !important; } /* Reveal the assembled page as one surface instead of individual assets popping in. */ html.alto-page-ready body { animation: alto-page-reveal 160ms ease-out both; } @keyframes alto-refresh-spin { to { transform: rotate(360deg); } } @keyframes alto-page-reveal { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html.alto-page-booting::after { animation: none; } html.alto-page-ready body { animation: none; } } /* Alto global accessibility layer — WCAG 2.2 AA */ /* Accessible semantic foreground colors for dark surfaces. Keep these separate from the stronger brand colors used as fills/borders. */ :root { --danger-text: #ff8b8f; --success-text: #57f287; --on-accent: #0d0e10; --on-success: #0d0e10; } html[data-theme="light"] { --danger-text: #b4232d; --success-text: #16794a; --on-accent: #ffffff; --on-success: #ffffff; } .alto-skip-link, .skip-link { position: fixed; top: 8px; left: 8px; z-index: 2147483647; padding: 10px 14px; border: 2px solid currentColor; border-radius: 8px; background: #ffffff; color: #111214; font: 800 0.95rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: none; transform: translateY(-180%); transition: transform 120ms ease-out; } .alto-skip-link:focus, .skip-link:focus { transform: translateY(0); } .alto-sr-only, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* A two-tone ring remains visible on both light and dark surfaces. */ :where(a[href], button, input, select, textarea, summary, [role="button"], [role="link"], [role="menuitem"], [role="menuitemradio"], [role="option"], [role="tab"], [role="radio"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 3px solid #ffffff !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #005b83 !important; scroll-margin-block: 96px 48px; } /* WCAG 2.2 AA 2.5.8: keep small icon controls at least 24x24 CSS px. */ .info-btn, .image-modal-close, .notif-dropdown-dismiss, .alto-cookie-close, .alto-trial-close, .alto-tutorial-dismiss, .plugin-reorder-btn { min-width: 24px !important; min-height: 24px !important; } /* WCAG 2.2 AA 2.5.8: navigation/footer and legal-page return links get a full 24px hit area. */ footer a[href], .footer a[href], .back-btn, .support-link, .plugin-title a[href], .nav-link { min-height: 24px; display: inline-flex; align-items: center; } /* WCAG 1.4.11: dark-theme form boundaries remain >=3:1 against adjacent dark surfaces. */ html:not([data-theme="light"]) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { border-color: #7f8796 !important; } /* Previously-muted copyright text was below 4.5:1 on Alto's dark footer. */ .footer .copyright, footer .copyright { color: var(--subtext, #b5bac1) !important; } /* Ensure scrollable data regions are visibly focusable without changing layout. */ .table-wrapper[tabindex="0"], .admin-table-container[tabindex="0"] { scroll-margin-block: 96px 48px; } @media (max-width: 720px) { .info-btn, .image-modal-close, .notif-dropdown-dismiss { min-width: 32px !important; min-height: 32px !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } @media (forced-colors: active) { :where(a[href], button, input, select, textarea, summary, [role="button"], [role="link"], [role="menuitem"], [role="menuitemradio"], [role="option"], [role="tab"], [role="radio"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 3px solid Highlight !important; box-shadow: none !important; } } /* WCAG 2.2 AA 2.4.11: focused content should not land underneath Alto's fixed navigation. */ :where(main, [role="main"], a[href], button, input, select, textarea, summary, [role="button"], [role="link"], [role="menuitem"], [role="menuitemradio"], [role="option"], [role="tab"], [role="radio"], [tabindex]:not([tabindex="-1"])) { scroll-margin-block: 96px 48px; } /* ARIA-hidden dialogs must also be removed from keyboard navigation while closed. */ [role="dialog"][aria-hidden="true"] { visibility: hidden !important; } /* WCAG 2.2.2: user control for non-essential auto-updating dashboard content. Keep this in normal document flow so it never obscures content at high zoom/reflow. */ .alto-live-update-toggle { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: calc(100% - 24px); margin: 12px; padding: 8px 12px; border: 1px solid #7f8796; border-radius: 8px; background: #1e1f22; color: #f2f3f5; font: 700 0.86rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; white-space: normal; text-align: center; } .alto-live-update-toggle[aria-pressed="true"] { border-color: #57f287; } html[data-theme="light"] .alto-live-update-toggle { background: #ffffff; color: #1e1f22; border-color: #58616f; } .alto-live-update-toggle[hidden] { display: none !important; }