/* Minimal reset on top of Bootstrap's normalize + project-wide defaults. */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } /* Setting the background on AS WELL as prevents the brief flash of white that browsers paint when the body element hasn't yet been styled. Combined with the inline pre-paint script in _head.php this gives a clean page-to-page transition with no FOUC in dark mode. */ html { background-color: var(--mf-bg); color-scheme: light; } [data-bs-theme="dark"] { color-scheme: dark; } body { background-color: var(--mf-bg); color: var(--mf-text); font-feature-settings: "cv02", "cv03", "cv04", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; } a { color: var(--mf-primary); text-decoration: none; transition: color var(--mf-transition); } a:hover { color: var(--mf-primary-hover); text-decoration: underline; } /* Visible, modern focus ring on all interactive elements */ :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--mf-bg), 0 0 0 4px var(--mf-primary); border-radius: var(--mf-radius); } /* Custom scrollbar (Webkit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--mf-border-strong); border-radius: var(--mf-radius-full); border: 2px solid var(--mf-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--mf-text-subtle); } /* Selection */ ::selection { background: var(--mf-primary-subtle); color: var(--mf-text); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Hidden but available to screen readers */ .mf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip-to-content link (logged-in pages) */ .mf-skip-link { position: absolute; top: -40px; left: var(--mf-space-4); background: var(--mf-primary); color: #FFFFFF; padding: var(--mf-space-2) var(--mf-space-4); border-radius: var(--mf-radius); z-index: 10000; transition: top var(--mf-transition); } .mf-skip-link:focus { top: var(--mf-space-4); color: #FFFFFF; text-decoration: none; }