/* responsive.css — Aperio responsive layer. Load order: styles.css, pages.css, seo.css (SEO pages only), responsive.css, consent.css. This file only adds/overrides; it never duplicates full component styles from the three files above. See docs/HANDOFF-README.md §A2 for the spec this implements. */ /* ============================================================ 1. Skip link — must be the first child of ============================================================ */ .skip-link{position:fixed;left:12px;top:-60px;z-index:200;background:var(--navy);color:var(--cream);padding:12px 20px;border-radius:6px;font-size:14px;font-weight:600;text-decoration:none;transition:top .15s ease} /* A-09 / SC 1.4.11: was var(--teal) #1BA4B6 = 2.82:1 on --paper. outline-offset:2px puts the ring outside the link's own navy chip, so BOTH its adjacent colours are paper — the navy never touches it. This rule's specificity (0,2,0) beats the global a:focus-visible rule (0,1,1), so it has to carry a compliant colour itself. --teal-deep is 5.23:1. */ .skip-link:focus{top:12px;outline:2px solid var(--teal-deep);outline-offset:2px} /* ============================================================ 2. Focus-visible — consistent 2px outline, 2px offset. The colour comes from --focus (styles.css :root = --teal-deep, 4.9:1 on paper/cream) because one fixed teal ring measured only 2.92:1 against --navy, under the 3:1 that SC 1.4.11 requires for a non-text UI indicator (04 §1.1). Every navy section re-declares --focus to --mustard (8.78:1 on navy) and the variable inherits down to whatever is focused inside it. Scroll-padding-top keeps a focused element from landing under the 68px sticky nav (04 §1.5, SC 2.4.11). A-01 (BLOCKER, SC 1.4.11) — WHY THE LIST BELOW IS NOT THE WHOLE FIX. --focus is an INHERITED custom property, so the mustard declared here for a navy section also reached every LIGHT surface nested inside it. Measured before: .cta form.addr input / .addr-aux / submit ring #E8C547 on #fff = 1.68:1 .contact .lead-form input/select/textarea ring #E8C547 on #FBF8F1 = 1.58:1 .keyless .screen .notif button.u / .d ring #E8C547 on #fff = 1.68:1 (3:1 required; 46 + 10 + 10 + 6 + 6 + 6 failing controls across the audited pages.) The reset is NOT written here as a list of "light things that live inside dark things" — that list goes stale the first time someone drops a new light component into a navy section. Instead each light surface declares --focus next to its own `background`, on the element that owns it: .addr and .screen (styles.css), .lead-form, .addr-list and .est-attach (pages.css). A declaration on the element always beats an inherited value, whatever the file order or specificity here. If you add a component with its own background, give it its own --focus. ============================================================ */ html{scroll-padding-top:76px} .keyless,.cta,.contact,.ph.dark,.hero-tag,.cloud{--focus:var(--mustard)} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible, select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--focus,var(--teal-deep));outline-offset:2px;border-radius:4px } /* pill/segmented controls need a tighter radius so the outline doesn't look detached */ .seg a:focus-visible,.seg button:focus-visible{border-radius:3px} .addr-aux:focus-visible{border-radius:50%} /* ============================================================ 3. Reduced motion — kill decorative animation/transition globally. .rv visibility is already handled in styles.css; count-ups are gated in site.js. This covers the hero-scene keyframes (pulse, notif slide-in, data streams, packet dots, cloud blip) plus any other transition/animation in the three base files. ============================================================ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; animation-delay:0s!important; /* .hero-tag .dot 1.6s, .notif .3s, .pk .9s/1.8s, .dots i .15s/.3s and the new .rv failsafe's 2.5s all had to be reset — killing the duration alone still left the delay running */ transition-duration:.01ms!important; transition-delay:0s!important; scroll-behavior:auto!important } /* offset-path travel is not a "duration" — stop the packet dots moving at all, rather than letting a .01ms run snap them to the end of the path */ .pk{animation:none!important} } /* ============================================================ 4. Font fallback metrics — reduces CLS from the Google Fonts swap. Values below are ESTIMATES (typical Instrument Sans/Serif vs. Arial/Times metrics) — replace with measured output from a tool like Capsize or Fontaine before shipping. ============================================================ */ @font-face{ font-family:'Instrument Sans Fallback'; src:local('Arial'); ascent-override:95%; descent-override:23%; line-gap-override:0%; size-adjust:104%; } @font-face{ font-family:'Instrument Serif Fallback'; src:local('Times New Roman'),local('Georgia'); ascent-override:88%; descent-override:22%; line-gap-override:0%; size-adjust:114%; } /* --sans/--serif in styles.css :root already list these fallback names ahead of the generic family so they apply during the font swap. */ /* ============================================================ 5. Language toggle: in .seg (was