/* ========================================================= RIGHT-SIDE CONTROL RAIL --------------------------------------------------------- One grid holds every floating control on the right: the main logo, the envelope, JOIN, a close button when one is relevant, and anything added later. Before this, each control was position:fixed with its `top` hand-computed as the sum of the sizes and gaps of the controls above it — written out twice, once for desktop and once for phone. Adding a fourth control meant editing that chain in both places. Now the rail owns the stacking and a new control is a single appendChild in invent-city.js. EVERY CELL IS THE MENU BAR HEIGHT, SQUARE. --strategy-top-bar-h is the single source; --supplemental-menu-control-size-phone now points at it too, so phone no longer runs a separate 44px. Loaded LAST in index.php so it wins over the per-control positioning still declared in menu.css. ========================================================= */ :root { --rail-cell: var(--strategy-top-bar-h, 50px); --rail-gap: var(--strategy-top-mail-float-gap, 0.5rem); } .strategy-top-rail { position: fixed; z-index: var(--strategy-top-control-z, 2147482995); /* Sits one gap below the bar. The bar height is the only input. */ top: calc(var(--strategy-top-bar-h, 50px) + var(--rail-gap)); /* Desktop: JS publishes --strategy-side-control-center-x to line the controls up with the outer grid column. The rail inherits that placement so the columns still agree. */ left: var(--strategy-side-control-center-x, auto); right: auto; transform: translateX(var(--strategy-float-translate-x, -50%)); display: grid; grid-auto-flow: row; grid-auto-rows: var(--rail-cell); gap: var(--rail-gap); justify-items: center; align-items: center; pointer-events: none; /* the cells take the clicks, not the gaps */ } /* --- cells ------------------------------------------------ Any direct child is a cell: square, bar-height, and no longer responsible for positioning itself. --strategy-float-translate-x is zeroed inside the rail so the hover/scale transforms that use it do not re-apply the rail's own centring offset. */ .strategy-top-rail > * { --strategy-float-translate-x: 0px; position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: var(--rail-cell) !important; height: var(--rail-cell) !important; pointer-events: auto; } /* --- phone ------------------------------------------------ Pinned to the right inset instead of a grid column, but the same rail and the same cell size. */ @media (max-width: 767.98px) { :root { --rail-gap: var(--strategy-top-mail-float-gap-phone, 0.4rem); } .strategy-top-rail { left: auto; right: var(--strategy-top-mail-float-right-phone, 0.75rem); transform: none; /* Clears the bar plus the docked phone logo that sits under it. */ top: calc( var(--strategy-top-bar-h, 50px) + var(--rail-gap) + var(--strategy-top-bar-h, 50px) + var(--rail-gap) ); } } /* ========================================================= OPAQUE FILL — the control reads as a disc of the page colour --------------------------------------------------------- The controls were background:transparent, so whatever scrolled under them showed through the ring and between the marks. Each now carries a solid disc in the colour of the section it is floating over, with every line and mark painted on top of it. --section-bg-dark / --section-bg-light are the same two field colours the scroll-down cue uses. The shell already carries an is-over-* class per section, set by invent-city.js, so the fill follows the page without any new plumbing. The strongest existing transparent rule is (0,4) (.strategy-top-shell.is-over-dark .strategy-top-mail-float:hover), so these are written at (0,5) to win outright. The fill goes on the element that carries the RING — the float for JOIN, the inner icon for mail — so the disc matches the stroke exactly rather than sitting proud of it. ========================================================= */ /* PER-CONTROL FIELD. invent-city.js probes each rail control at its own centre and writes --rail-fill onto that element, so the control that has crossed a section boundary flips on its own — JOIN can go white while the envelope is still black. The shell-level value below is only the fallback for the first paint, before the first scroll pass runs. The is-over-* variants that used to live here have been removed: they are set from a single probe point for the whole shell, so they forced all the controls to share one field, which is exactly the behaviour being fixed. An inline style on the element beats any of these anyway. */ .strategy-top-shell { --rail-fill: var(--section-bg-dark, #000); } /* JOIN: the ring is the float itself. */ .strategy-top-shell .strategy-top-rail > .strategy-top-join-float, .strategy-top-shell .strategy-top-rail > .strategy-top-join-float:hover, .strategy-top-shell .strategy-top-rail > .strategy-top-join-float:active, .strategy-top-shell .strategy-top-rail > .strategy-top-join-float:focus-visible { background-color: var(--rail-fill) !important; border-radius: 50%; } /* Mail: the frame is the inner icon, at 92% of the cell. NO border-radius here. The envelope is a SQUARE drawn in CSS — a bordered box plus the two rotated .…__mark-segment lines that form the flap (see menu.css). Rounding it to 50% turned it into a plain circle and, with the icon's own overflow:hidden, clipped the flap away entirely. Only JOIN is a circle; the envelope is square by design. */ .strategy-top-shell .strategy-top-rail > .strategy-top-mail-float .strategy-top-mail-icon, .strategy-top-shell .strategy-top-rail > .strategy-top-mail-float:hover .strategy-top-mail-icon, .strategy-top-shell .strategy-top-rail > .strategy-top-mail-float:active .strategy-top-mail-icon, .strategy-top-shell .strategy-top-rail > .strategy-top-mail-float:focus-visible .strategy-top-mail-icon { background-color: var(--rail-fill) !important; border-radius: 0; } /* The main logo gets the same disc behind its artwork. */ .strategy-top-shell .strategy-top-logo, .strategy-top-shell .strategy-top-logo.is-over-strategy, .strategy-top-shell .strategy-top-logo.is-over-benefits { background-color: var(--rail-fill) !important; } /* --- marks and overlays paint above the fill --------------- A parent background already sits below its pseudo-elements and children, but these are stated explicitly so a later stacking context cannot drop a mark behind its own disc. */ /* The flap segments are already position:absolute in menu.css, which is what places and rotates them. Setting position:relative here overrode that, put them back in normal flow, and the envelope lost its two angled lines. They only need the z-index, so position is left alone. */ .strategy-top-rail > .strategy-top-mail-float .strategy-top-mail-icon__mark-segment { z-index: 1; } .strategy-top-rail > .strategy-top-join-float::before, .strategy-top-shell .strategy-top-logo > svg, .strategy-top-shell .strategy-top-logo .hero-logo { position: relative; z-index: 1; } /* ========================================================= ENVELOPE + JOIN ALWAYS ON --------------------------------------------------------- menu.css hides the envelope and JOIN by default (opacity:0, visibility:hidden) and reveals them only when invent-city.js adds .is-active, which it toggles from scroll position. That is why they vanished over some sections. NOTE: .strategy-top-logo is deliberately NOT included. That is the small logo that docks into the menu bar, and it is meant to stay conditional — the large in-page logo is a different element (#hero-logo-button .hero-logo, moved by the logoMover logic). Inside the rail they are permanent. These selectors are (0,2,0) — the same weight as .strategy-top-logo.is-active — and this file loads last, so they win without needing !important, except on `display`, which menu.css sets with !important. The logo also gets the envelope's border tokens so all three cells read as one set: same square, same stroke weight. ========================================================= */ .strategy-top-rail > .strategy-top-mail-float, .strategy-top-rail > .strategy-top-join-float { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } /* --- the accordion fade-out --------------------------------- menu.css also carries .strategy-top-mail-float.is-active.is-above-accordion, .strategy-top-join-float.is-active.is-above-accordion { opacity: 0 !important; transform: … scale(0.88) !important; } invent-city.js toggles .is-above-accordion from scroll position, which is what made the envelope and JOIN fade out over the accordions. That rule is (0,3,0) AND !important, so the always-on block above could not reach it. These are (0,3,0) with !important too, and this file loads after menu.css, so they take the tie on source order. The transform is reset as well — without it the controls would be visible but shrunk to 88%. */ .strategy-top-rail > .strategy-top-mail-float.is-above-accordion, .strategy-top-rail > .strategy-top-join-float.is-above-accordion { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(var(--strategy-float-translate-x, 0px)) !important; } /* --- IC LOGO BORDER ------------------------------------------- The bordered IC is the HERO logo (#hero-logo-button), not .strategy-top-logo — that element is permanently hidden, because invent-city.js sets `const logoIsVisible = false`. Keyed to the STATE CLASSES on the button itself, never to an ancestor: the logo is ported out of .hero-logo-stack during its travel (see .hero-logo-button--ported in menu.css), so a descendant selector silently stops matching and the border disappears. .hero-logo--scroll-pinned -> the hero, over the intro photograph .hero-logo--on-mission -> over #mission-bg .hero-logo--mission-parked -> parked in the stack, Strategy onward Between them these cover every scroll position, so the frame is on the logo in all sections. !important and (0,2,0) are both needed: layout.css carries .hero-logo-button.hero-logo--dark { border: 0 !important } at the same weight, and this file loads later, so it takes the tie. */ .hero-logo-button.hero-logo--mission-parked, .hero-logo-button.hero-logo--on-mission, .hero-logo-button.hero-logo--scroll-pinned { box-sizing: border-box; /* --hero-logo-border-w is published per frame by invent-city.js: 6px at full hero size, shrinking with the logo, floored at --close-circle-border-w so the docked frame still matches the envelope and JOIN. The fallback covers the first paint, before the first scroll pass has run. */ border: var(--hero-logo-border-w, var(--close-circle-border-w, 2px)) solid currentColor !important; border-radius: 0; }