/* ==== HEADER start ==== */ /* ============================================================================ RA · SITE-WIDE HEADER (ONLY) · delta Theme Settings > Custom CSS. Append AFTER the shared .rapdp stylesheet. Cut from "RA - Header (Only).dc.html" · 2026-08-17 ---------------------------------------------------------------------------- Keep the two ==== HEADER ==== markers. They are how this block is found and replaced later without disturbing the PDP, HOME, NEWSLETTER and CHROME blocks in the same box. Replace between the markers, never the whole box. THIS SUPERSEDES THE HEADER HALF OF THE CHROME BLOCK. If the CHROME block is installed, either delete its header rules (README section 3 lists them by number) or leave them: this block is appended after it and wins on order. The footer half of CHROME is untouched and must stay. PAGE-NEUTRAL BY CONSTRUCTION. Every selector is scoped .rapdp[data-chrome="header"]. No rule here may depend on which page it is rendering on. ONE UNSCOPED RULE EXISTS, in section 2, and it is flagged. ============================================================================ */ /* --------------------------------------------------------------------------- 1 · UNDOING THE SHARED SHEET'S PAGE ASSUMPTIONS · READ THIS FIRST The shared .rapdp rule was written when exactly one .rapdp root existed per page. A PDP now carries three, and two of its declarations are wrong for a chrome partial. --------------------------------------------------------------------------- */ /* a) padding-bottom:40px. Harmless once per page, absurd three times: it puts 40px of dead sand under the header, above the page's first section. */ .rapdp[data-chrome="header"] { padding-bottom: 0; } /* b) overflow-x:hidden. THE ONE THAT SHIPS BROKEN IF THIS RULE IS MISSING. overflow-x:hidden computes overflow-y to auto, which makes the element a scroll container, and position:sticky only sticks within its nearest scroll container. On Home that container was the whole page, so the sticky header worked by accident. Here the root is only as tall as the header, so sticky has nowhere to stick and the header simply scrolls away. overflow-x:clip suppresses the horizontal scrollbar from the shared sheet's 100vw breakout WITHOUT creating a scroll container. A browser too old for `clip` drops the declaration and falls back to `visible`, which is correct but can expose a horizontal scrollbar; the fix then is html{overflow-x:hidden} at the theme level, not reinstating it here. */ .rapdp[data-chrome="header"] { overflow: visible; overflow-x: clip; } /* --------------------------------------------------------------------------- 2 · STICKY HEADER AND ANCHOR LANDINGS The header sticks. An in-page anchor such as /store/#courses would otherwise land underneath it. scroll-padding-top belongs on the scrolling element, and that element is , which cannot be scoped under .rapdp. This is the ONLY unscoped rule in the file. Value = topbar (about 43px) + header (14 + 76 + 14) + air. Reduce it if the utility bar is ever removed. IF THE CHROME BLOCK IS STILL INSTALLED, this rule is already in it. Two identical declarations are harmless; do not "fix" one to a different number. --------------------------------------------------------------------------- */ html { scroll-padding-top: 160px; } /* --------------------------------------------------------------------------- 3 · SKIP LINK Targets #ra-main, which JKM adds to the role="main" element. First focusable element on every page. Until that ID lands it focuses nothing, which is a pending task, not a defect in this package. --------------------------------------------------------------------------- */ .rapdp[data-chrome="header"] [data-skip] { position: absolute; left: -9999px; top: 0; z-index: 200; } .rapdp[data-chrome="header"] [data-skip]:focus, .rapdp[data-chrome="header"] [data-skip]:focus-visible { left: 0; } /* --------------------------------------------------------------------------- 4 · FOCUS RINGS (WCAG 2.2 AA · 2.4.13) Oxblood on sand (about 8.6:1); cream on the dark utility bar (about 16:1). No single colour clears 3:1 against both grounds, so the dark band swaps it. --------------------------------------------------------------------------- */ .rapdp[data-chrome="header"] :focus-visible { outline: 2px solid #7A2A24; outline-offset: 2px; border-radius: 2px; } .rapdp[data-chrome="header"] [data-topbar-band] :focus-visible { outline-color: #F5F1EA; } /* --------------------------------------------------------------------------- 5 · DROPDOWNS Hover, :focus-within and [data-open] are ORed, so the menus still open on pointer AND keyboard with no JavaScript at all. Only the hamburger and the click-to-pin behaviour need the script. TWO ADDITIONS, 2026-08-17. a) A 500ms CLOSE DELAY, ON SIGN IN ONLY (scope narrowed the same day, JKM). Instant on the way in, half a second on the way out, so the 8px gap between pill and panel can be crossed without the menu dumping. LEARN AND SHOP ARE DELIBERATELY EXCLUDED and close instantly: they sit side by side, so a delay there left the first panel on screen while the second opened, and the two overlapped as the cursor crossed the row. Sign In sits alone at the end of the row with nothing to collide with, which is why it keeps the delay. The delay lives on the RESTING rule and is zeroed on the open rule, which is what makes it close-only. b) [data-open="false"] IS AN EXPLICIT DISMISSAL and has to outrank :hover and :focus-within, because it is set while the pointer is still on the trigger (click to close) or focus is still on it (Escape). Without it the menu would reopen from under the cursor the instant it closed. header-nav.js removes the attribute again on mouseleave and when focus leaves the group, so plain hover-to-open returns. It has EQUAL specificity to the hover rule, so it wins on ORDER: keep it last in this section. --------------------------------------------------------------------------- */ .rapdp[data-chrome="header"] [data-nav-menu] { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms; } .rapdp[data-chrome="header"] [data-nav-login] [data-nav-menu] { transition-delay: 500ms; } .rapdp[data-chrome="header"] [data-nav-group]:hover [data-nav-menu], .rapdp[data-chrome="header"] [data-nav-group]:focus-within [data-nav-menu], .rapdp[data-chrome="header"] [data-nav-menu][data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0ms; } .rapdp[data-chrome="header"] [data-nav-group] [data-nav-menu][data-open="false"] { opacity: 0; visibility: hidden; transform: translateY(-4px); transition-delay: 0ms; } /* THE SIGN IN TRIGGER IS A