, so the two class names are the SAME box and any padding here silently replaces the .wrap gutter (26px on the subpages, 30px on the homepage) -- which pinned the brand and the hamburger flat against the screen edge. */ .bar .brandblk{order:1;margin-right:auto;margin-left:env(safe-area-inset-left)} .bar .kait-hdr-ctl{order:2;margin-left:0} .bar .navtoggle{order:3;margin-left:0;margin-right:env(safe-area-inset-right)} /* the collapsed panel is positioned, so its order is irrelevant visually -- it is pinned last only so tab order still reaches it after the controls */ .bar nav.site,.bar nav{order:4} /* COMPACT LANGUAGE CONTROL. i18n.js injects `@media(pointer:coarse){.kait-lang-btn{min-height:44px; font-size:15px}}`, which is what made the trigger a 73x44 pill on every phone. The touch target is kept at 44px through an invisible expanded hit area instead of through visible padding, so the control reads as chrome: the box shrinks, the tappable region does not. */ .kait-hdr-ctl .kait-lang-btn{min-height:0;height:32px;padding:0 8px; font-size:12px;border-radius:8px;gap:5px; border-color:rgba(242,199,91,.34);opacity:.92;position:relative} .kait-hdr-ctl .kait-lang-btn::after{content:"";position:absolute; top:-7px;bottom:-7px;left:-4px;right:-4px} /* 46px tall hit area */ .kait-hdr-ctl .kl-flag{font-size:12.5px} .kait-hdr-ctl .kl-code{font-size:11px;letter-spacing:.03em} .kait-hdr-ctl .kl-chev{font-size:8.5px;opacity:.75} /* the open list must not run off the right edge now that it sits inboard */ .kait-hdr-ctl .kait-lang-list{right:0;left:auto} } /* Very narrow phones (320-360). The lockup already steps down here; the language control follows so the three elements never compete for the row. */ @media (max-width:380px){ .bar{gap:8px} .kait-hdr-ctl .kait-lang-btn{height:30px;padding:0 6px;gap:4px} .kait-hdr-ctl .kl-code{font-size:10.5px} .kait-hdr-ctl .kl-flag{font-size:11.5px} } /* No flag-hiding fallback: measured at 320px the row is brand 86 + gap 8 + control 56 + gap 8 + toggle 40 inside a 26px gutter either side = 250 of 320, so flag, code and chevron all survive at the narrowest width tested. Dropping the flag would have been a fix for a problem that does not exist. */ /* ====================== 3. THE SHELL POSITION CONTRACT ===================== Two behaviours, deliberately different, and this is the one place either is decided. THE HEADER IS PINNED. It stays at the top of the viewport for the whole scroll, so the brand, the destinations and the language control are one gesture away from anywhere on a page. `position:sticky`, never `fixed`: the bar keeps its own row in normal flow, so nothing below it has to be pushed down by a compensating offset and there is NO layout shift at the moment it starts sticking -- it never left flow to begin with. A `fixed` bar would have needed a hardcoded padding on every public page to replace the row it stopped occupying, and that number would have had to track three header heights. THE FOOTER IS NOT PINNED. It is the END OF THE DOCUMENT and it is reached, not carried: normal flow, no sticky, no fixed, nothing that could make it float over the page mid-journey. `body` is a min-height:100svh flex column whose content region grows (main.page here, main.hero on the homepage, both flex:1), which is what settles the footer at the bottom of a SHORT page without pinning it to the viewport on a long one. WHY STICKY RESOLVES TO THE VIEWPORT AT ALL: both public sheets clip the x axis with `overflow-x:clip`, not `hidden`. `clip` is not a scrollport, so the bar's nearest scrolling ancestor is still the viewport. `hidden` would have made a scroll container and pinned the bar to a box that never scrolls -- i.e. it would have rendered as if it were static. Z ORDER IS EXPLICIT, not incidental. The background sits at -1, page content at 1, the footer at 2, this bar at 20, and the modal overlays -- body-level siblings of the header, not descendants -- at 50. So the bar covers hero, chart and prose, and a dialog covers the bar. The language list's own z-index (2000, set by i18n.js) is local to the stacking context this rule creates, which is exactly why it can open over the page without anything else in the header needing to know about it. The homepage's header carries no class -- it is `body>header` -- so its own sheet pins it under the same contract. */ header.site{position:sticky;top:0;z-index:20} /* ~1cm of page BELOW the footer, before the background ends. 1cm is 37.8px at the CSS reference resolution of 96dpi, so 38px is the desktop target; the clamp steps it down on narrow screens, where a fixed 38px is a much larger share of the screen than the gap it is imitating. It is DECLARED here -- one name, one value, both public sheets -- and APPLIED there, as body padding. Not applied here: this file is also loaded by the customer app shell and by /pay, neither of which has a public footer to breathe under. */ :root{--public-footer-bottom-breathing-room:clamp(28px,3.5vw,38px)} /* FINAL SWEEP F4 -- a heading that exists for assistive technology only. Three pages jumped h1 -> h3 because a whole region (the XAUUSD panel, the plan grid, the feature grid) had no heading of its own: the cards inside it were h3 with nothing at h2 above them. Promoting the cards would have said they are page-level sections, which they are not, and would have moved the visual type. Naming the region instead fixes the outline AND gives each region the accessible name it never had. Layout is untouched by design: this is removed from flow entirely, so nothing reflows by a pixel. */ .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; border:0}