/* Loaded last: the prefers-reduced-motion block at the bottom has to come after everything that animates, or .reveal stays invisible for those users. */ .btn-primary{ font-family: var(--font-label); font-weight: 600; font-size: var(--fs-200); letter-spacing: .2em; text-transform: uppercase; color: var(--paper); background: var(--vermilion); padding: 14px 28px; white-space: nowrap; transition: background .2s ease; } .btn-primary:hover{ background: var(--vermilion-deep); } .btn-primary:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; } .btn-outline{ display: inline-flex; align-items: center; min-height: 44px; padding: 12px 22px; border: 1px solid var(--ink-faint); font-family: var(--font-label); font-weight: 600; font-size: var(--fs-200); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); transition: color .2s ease, border-color .2s ease; } .btn-outline:hover{ color: var(--vermilion); border-color: var(--vermilion); } .btn-outline:focus-visible{ outline: 2px solid var(--vermilion); outline-offset: 3px; } /* The reset in 03-base.css strips colour and underline from every link, so a link inside a sentence has to win them back (WCAG 2.2 SC 1.4.1). */ .link{ color: var(--vermilion); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: opacity .2s ease; } .link:focus-visible{ outline: 2px solid var(--vermilion); outline-offset: 3px; } @media (hover: hover){ .link:hover{ opacity: .68; } } /* Hiding is gated on html.js, set by the inline script in . If JS never runs the class is absent and the content simply shows — without the gate a failed script would leave the page blank below the hero. */ .js .reveal{ opacity: 0; transform: translateY(18px); transition: opacity .8s ease-out, transform .8s cubic-bezier(.22,.8,.25,1); } .js .reveal.in{ opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .js .reveal{ opacity: 1; transform: none; } }