/* oceanfromspace.org — base layer * * The reset and the accessibility primitives every module owes its users, * regardless of what it looks like. Deliberately does NOT set page color, * background, or font on : that is identity, and it belongs to the * module's own stylesheet, which loads after this one. * * Load order is always: tokens.css, base.css, then the module's stylesheet. */ * { box-sizing: border-box; } /* Controls do not inherit type by default, and every module wants them to. */ button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } a, button { color: inherit; } /* One focus style across the site, and the stronger of the two the modules had arrived at independently. 3px solid at 2px offset stays visible against both the light page and a raised white card; a 2px translucent ring did not. Keyboard-only by design -- :focus-visible, never :focus, so a mouse click does not leave a ring behind. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* Text for screen readers only. Not `display: none`, which removes it from the accessibility tree along with everything else. */ .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; } /* Every module needs one of these as its first focusable element, pointing at the id of its main landmark. Without it a keyboard user tabs through the whole navigation on every page load. */ .skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 10000; padding: .8rem 1rem; color: #f8fafc; background: var(--ink); border-radius: 8px; } .skip-link:focus { top: 1rem; } /* Motion. Two rules, not one: the media query honours the operating system, and the body class honours an in-page toggle for users whose OS setting does not match what they want right now. Durations are flattened rather than set to zero so animation and transition end events still fire and JavaScript waiting on them does not hang. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }