*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .skip-link { transition: none; } } body { font-family: var(--font-body); background: var(--color-white); color: var(--color-dark); overflow-x: hidden; -webkit-font-smoothing: antialiased; line-height: 1.5; } img { max-width: 100%; display: block; } a { color: inherit; } /* reCAPTCHA v3's own floating badge would sit in the same bottom-right corner as site-whatsapp-float — hidden here, with the required Google attribution text shown near each form instead (see .recaptcha-disclosure in components.css), per Google's ToS for hiding the badge. */ .grecaptcha-badge { visibility: hidden; } /* Visually-hidden but available to screen readers */ .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 link: hidden until focused */ .skip-link { position: absolute; top: -48px; left: 8px; z-index: 1000; background: var(--color-dark); color: var(--color-white); padding: 12px 20px; border-radius: 8px; font-family: var(--font-mono); font-size: 14px; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 8px; } /* Visible focus state for every interactive element, everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 2px; border-radius: 4px; } /* The purple ring above only contrasts 2:1 against --color-dark, below the 3:1 WCAG non-text contrast minimum — .site-footer and .hero sit directly on that dark background, so their focusable children need a white ring instead. Every other section is light enough for the purple default. */ .site-footer a:focus-visible, .site-footer button:focus-visible, .hero a:focus-visible, .hero button:focus-visible { outline-color: var(--color-white); } [aria-disabled="true"] { pointer-events: none; opacity: 0.5; cursor: not-allowed; } /* Scroll-reveal: only hides content when .js is present on (set by an inline script in , before first paint — see index.html). Without that marker (no-JS, or the reveal script fails to load), [data-reveal] elements stay fully visible instead of being stuck invisible. */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.2, 0, 0, 1), transform 0.6s cubic-bezier(0.2, 0, 0, 1); } .js [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }