/* Jubilee Cell — WCAG 2.2 AA corrections and additions. Loads AFTER tokens.css and styles.css. Every rule here exists because an audit of the handoff design found a specific conformance failure. The original design intent is preserved; only the values that failed are moved, and each is moved the minimum distance needed to pass. Audit results that required a change: --jc-muted #8FA5AD on white 2.58:1 needs 4.5:1 (SC 1.4.3) --jc-stock-in #2E9E6B on white 3.38:1 needs 4.5:1 (SC 1.4.3) --jc-stock-low #C08A17 on white 3.05:1 needs 4.5:1 (SC 1.4.3) --jc-stock-out #8FA5AD on white 2.58:1 needs 4.5:1 (SC 1.4.3) form borders #C9E6F0 on white 1.31:1 needs 3.0:1 (SC 1.4.11) focus ring #69CBE7 on white 1.86:1 needs 3.0:1 (SC 1.4.11) */ :root { /* --- SC 1.4.3 Contrast (Minimum) : darkened, hue preserved --- */ --jc-muted: #597079; /* was #8FA5AD — now 4.50:1 on white, 4.50:1 on cyan-50 */ --jc-stock-in: #27865B; /* was #2E9E6B — now 4.52:1 */ --jc-stock-low: #9A6F12; /* was #C08A17 — now 4.51:1 */ --jc-stock-out: #617A84; /* was #8FA5AD — now 4.54:1 */ /* --- SC 1.4.11 Non-text Contrast --- */ /* Decorative card and section borders keep #C9E6F0: those components are identifiable by content, elevation and background, so the border is not the sole means of identifying the boundary. Form controls are different — the border IS the boundary, so it must reach 3:1. */ --jc-border-input: #37A0C5; /* 3.00:1 on white */ --jc-focus: #0B2E38; /* focus ring core — 14.36:1 on white */ --jc-focus-halo: #69CBE7; /* outer halo, decorative only */ /* Real header height. Used both for the fixed-header offset below and for scroll-padding, so it must match .jc-nav__inner exactly. */ --jc-header-h: 116px; } @media (max-width: 768px) { :root { --jc-header-h: 84px; } } /* --------------------------------------------------------------------------- FIXED HEADER OFFSET .jc-nav is position:fixed, so it is out of normal flow and reserves no space. The homepage hero clears it with 200px of its own top padding, which is why the homepage looked correct and every other page did not: About, Contact, the archives and all detail pages began underneath the header, and the logged-in trade utility bar rendered directly beneath the nav and was completely covered by it. --------------------------------------------------------------------------- */ body:not(.home) { padding-top: var(--jc-header-h); } /* The homepage hero already clears the header, so only the utility bar — which sits above it — needs the space there. */ .home .jc-utility { padding-top: var(--jc-header-h); } /* Keep the header on one line. Wrapped nav labels were a symptom of the actions block growing too wide, but nowrap makes it robust either way. */ .jc-nav__list a, .jc-nav__login, .jc-nav__register, .jc-cart-link { white-space: nowrap; } /* --------------------------------------------------------------------------- REVEAL VISIBILITY MODEL The handoff CSS hides every .jc-reveal block at opacity 0 and depends on JavaScript to bring it back. That is one failure away from a blank page, and the failure is not hypothetical: it is what happens if the GSAP CDN is blocked, if any script above it throws, or if a tween is written with gsap.from() — which animates TO the element's current computed value, and that value is already 0. So the model is inverted here. Content is visible by default. It is only hidden once a script in the head has confirmed motion will actually run, by setting .jc-motion-ready on . A watchdog withdraws that class if the motion layer never boots. Net effect: no JavaScript, blocked CDN, script error, or reduced-motion all land on fully visible content. Hiding is now the exceptional path, not the default one. --------------------------------------------------------------------------- */ .jc-reveal { opacity: 1; transform: none; } html.jc-motion-ready .jc-reveal { opacity: 0; transform: translateY(24px); } html.jc-motion-ready .jc-reveal.is-in { opacity: 1; transform: none; } /* The brand marquee must never wrap into a grid; it is a single scrolling row. */ .jc-brands__row { flex-wrap: nowrap; } .jc-brands__set { flex: 0 0 auto; flex-wrap: nowrap; } /* --------------------------------------------------------------------------- SC 2.4.7 Focus Visible + SC 1.4.11 — a focus indicator that is visible on every one of our six surface colours. Two-tone so it never disappears: a dark core plus a light halo. --------------------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--jc-focus); outline-offset: 2px; border-radius: 3px; box-shadow: 0 0 0 6px rgba(105, 203, 231, 0.55); } /* On the petrol footer and cyan section the dark core would vanish — invert. */ .jc-footer :where(a, button, input):focus-visible, .jc-section--cyan :where(a, button):focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 6px rgba(11, 46, 56, 0.55); } /* Never remove the outline for mouse users without replacing it. */ :where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; } /* --------------------------------------------------------------------------- SC 2.4.11 Focus Not Obscured (Minimum) — the sticky header must not cover an element that has just received focus via keyboard. --------------------------------------------------------------------------- */ html { scroll-padding-top: calc(var(--jc-header-h) + 24px); } :target, [id]:focus-within { scroll-margin-top: calc(var(--jc-header-h) + 24px); } /* --------------------------------------------------------------------------- SC 2.4.1 Bypass Blocks — skip link, visible on focus. --------------------------------------------------------------------------- */ .jc-skip { position: absolute; left: 16px; top: -100px; z-index: 10000; display: inline-block; padding: 14px 22px; background: var(--jc-petrol); color: #FFFFFF; font-family: var(--jc-font-body); font-size: 15px; font-weight: 600; text-decoration: none; border-radius: var(--jc-radius-button); transition: top var(--jc-dur-xs) var(--jc-ease); } .jc-skip:focus { top: 16px; } /* --------------------------------------------------------------------------- Screen-reader-only utility. Standard clip-path pattern; stays focusable. --------------------------------------------------------------------------- */ .jc-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .jc-sr-only--focusable:focus, .jc-sr-only--focusable:focus-within { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } /* --------------------------------------------------------------------------- SC 2.2.2 Pause, Stop, Hide — the brand marquee and the testimonial carousel both move for more than five seconds and both start automatically. A visible, keyboard-reachable control is required; hover-to-pause alone does not satisfy this, because it is unreachable by keyboard and touch. --------------------------------------------------------------------------- */ .jc-motion-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 24px auto 0; padding: 10px 18px; min-height: 44px; background: transparent; border: 1px solid var(--jc-border-input); border-radius: var(--jc-radius-pill); color: var(--jc-deep-cyan); font-family: var(--jc-font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--jc-dur-xs) var(--jc-ease), color var(--jc-dur-xs) var(--jc-ease); } .jc-motion-toggle:hover { background: var(--jc-cyan-50); } .jc-motion-toggle svg { width: 14px; height: 14px; fill: currentColor; } .jc-motion-toggle__wrap { display: flex; justify-content: center; } /* Paused state, driven by JS setting aria-pressed. */ .jc-brands__row.is-paused, .jc-brands.is-paused .jc-brands__row { animation-play-state: paused !important; } /* --------------------------------------------------------------------------- SC 2.5.8 Target Size (Minimum) — 24x24 CSS px floor for all pointer targets. The design already specifies 48px on mobile; this guarantees the floor everywhere, including the small controls the handoff did not size. --------------------------------------------------------------------------- */ /* .jc-dot is deliberately absent from this list. It is a 3px progress bar by design, and min-height beats height, so including it rendered a chunky 24px block instead. Its target size is satisfied by the transparent ::after hit area below, which is the correct technique: SC 2.5.8 measures the target, not the visible ink. */ .jc-nav__search, .jc-nav__toggle, .jc-stepper button, .jc-newsletter button, .jc-filter__toggle { min-width: 24px; min-height: 24px; } @media (pointer: coarse) { .jc-nav__search, .jc-nav__toggle, .jc-stepper button, .jc-newsletter button, .jc-btn, .jc-nav__register { min-width: 48px; min-height: 48px; } } /* The carousel dots are 4px tall by design. Keep the visual, enlarge the hit area with a transparent pseudo-element rather than changing the look. */ .jc-dot { position: relative; } .jc-dot::after { content: ""; position: absolute; inset: -20px -6px; } @media (pointer: coarse) { /* 3px of ink, 48px of target. */ .jc-dot::after { inset: -24px -8px; } } /* --------------------------------------------------------------------------- SC 1.4.11 — form control boundaries. --------------------------------------------------------------------------- */ .jc-field input, .jc-field select, .jc-field textarea, .jc-newsletter input, .jc-search input, .jc-select { border-color: var(--jc-border-input); } /* Checked checkbox must be distinguishable from unchecked at 3:1. */ .jc-check input:checked + .jc-check__box, .jc-check__box.is-checked { background: var(--jc-cyan); border-color: var(--jc-deep-cyan); } /* --------------------------------------------------------------------------- SC 3.3.1 / 3.3.3 Error Identification and Suggestion — errors are announced, described in text, and never signalled by colour alone (SC 1.4.1). --------------------------------------------------------------------------- */ .jc-field--error input, .jc-field--error select, .jc-field--error textarea { border-color: #B3261E; border-width: 2px; } .jc-field__error { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; color: #B3261E; /* 6.24:1 on white */ font-size: 13px; font-weight: 500; line-height: 1.5; } .jc-field__error::before { content: "\26A0"; font-size: 14px; line-height: 1.3; } .jc-field__hint { margin-top: 6px; color: var(--jc-slate); font-size: 13px; line-height: 1.5; } .jc-form__errors { padding: 18px 22px; margin-bottom: 28px; background: #FCEEEC; border: 1px solid #B3261E; border-left-width: 4px; border-radius: var(--jc-radius-button); color: #7A1A15; } .jc-form__errors ul { margin: 8px 0 0; padding-left: 20px; } /* Required marker carries text, not just an asterisk glyph. */ .jc-required { color: #B3261E; font-weight: 700; } /* --------------------------------------------------------------------------- SC 1.4.1 Use of Colour — stock state carries a text label and a distinct glyph, so it is never signalled by the dot colour alone. --------------------------------------------------------------------------- */ .jc-stock::after { margin-left: 6px; font-size: 11px; font-weight: 700; } .jc-stock--in::after { content: "\2713"; } /* check */ .jc-stock--low::after { content: "\0021"; } /* exclamation */ .jc-stock--out::after { content: "\2014"; } /* em dash */ /* --------------------------------------------------------------------------- SC 1.4.4 Resize Text / SC 1.4.10 Reflow — no horizontal scroll to 320px, no loss of content at 200% zoom. --------------------------------------------------------------------------- */ html, body { overflow-x: hidden; } @media (max-width: 400px) { :root { --jc-h1: 34px; --jc-h2: 26px; --jc-gutter: 18px; } } /* --------------------------------------------------------------------------- SC 1.4.12 Text Spacing — the layout must survive user-imposed spacing. Fixed heights on text containers are the usual failure; allow growth. --------------------------------------------------------------------------- */ /* min-height, NOT height:auto. The goal is that a fixed height cannot clip text when a user forces larger line-height or letter-spacing. Replacing height with auto achieved that by destroying the designed size instead: .jc-btn is 52px with no vertical padding, so height:auto collapsed every button to a ~20px sliver. min-height keeps the design at 52px and still lets it grow. */ .jc-btn { height: auto; min-height: 52px; overflow: visible; } .jc-chip, .jc-nav__menu a, .jc-serve__label { height: auto; overflow: visible; } /* --------------------------------------------------------------------------- SC 2.3.3 / 2.2.2 — reduced motion. The handoff CSS already covers most of this; these are the additions for components introduced here. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .jc-brands__row { animation: none !important; transform: none !important; } .jc-motion-toggle__wrap { display: none; } .jc-reveal { opacity: 1 !important; transform: none !important; } } /* --------------------------------------------------------------------------- Forced-colors / Windows High Contrast mode. --------------------------------------------------------------------------- */ @media (forced-colors: active) { .jc-btn, .jc-card, .jc-solution, .jc-product, .jc-field input, .jc-field select { border: 1px solid ButtonBorder; } .jc-solution__badge, .jc-stock::before { forced-color-adjust: none; } :where(a, button, input, select, textarea):focus-visible { outline: 3px solid Highlight; } } /* --------------------------------------------------------------------------- Print — the sticky bar, nav actions and widget should not print. --------------------------------------------------------------------------- */ @media print { .jc-stickybar, .jc-nav__actions, #aw-widget-root, .jc-motion-toggle__wrap { display: none !important; } }