/* ============================================================================ RSL HEADER — Rafi Securities Limited ---------------------------------------------------------------------------- Deployed as /new/assets/header.css, loaded from Elementor Pro -> Custom Code (Location: ), matching how the existing /new/assets/ticker.css loads. Namespace: rslh- / --rslh-* Deliberately NOT rsl- or rslpx- : both are already taken on this site by the KSE-100 band and the live ticker widget. ON !important ------------- The Elementor template injects its own rules at 0,4,0 through 0,10,0, e.g. .elementor-27 .elementor-element.elementor-element-d49c9a8 .elementor-nav-menu--main .elementor-item { padding: 2px 7px } .elementor-27 .elementor-element.elementor-element-d49c9a8 .elementor-nav-menu .elementor-item { font-size: 13px; line-height: 58px } An external sheet cannot win against that on specificity without pretending to be the template. !important is therefore used deliberately and ONLY where the template declares the same property — never as a blanket. Anything without !important is a property the template leaves alone. ON ANIMATION ------------ Elementor's smartmenus sets a closed desktop submenu to display:none. A transition cannot run across a display change, so the desktop dropdown is animated with @keyframes instead: an animation starts whenever the element becomes displayed. The drawer is different — Elementor drives it with max-height and transform, both of which transition normally, so that one uses transitions. Class hooks the JS adds: html.rslh-ready JS has confirmed the ticker moved below the header body.rslh-scrolled page is scrolled past 24px ========================================================================= */ :root { /* Brand */ --rslh-navy: #00205B; --rslh-navy-deep: #001227; --rslh-blue: #0044A5; --rslh-indigo: #1F1F86; --rslh-white: #FFFFFF; /* Structural heights — the single source of truth for the pinned unit. --rslh-h is the DESIGNED bar height and is used for the rail's min-height and for scroll-padding. header.js writes the MEASURED height to a separate token, --rslh-actual-h, which is what the ticker's sticky offset reads. Those must stay separate. Writing the measured height back into --rslh-h is a feedback loop: the header is the rail plus a 1px border, so each observer cycle makes the rail 1px taller than the header it just measured, and the bar ratchets upward forever. Two tokens, no cycle. */ --rslh-h: 84px; --rslh-actual-h: var(--rslh-h); --rslh-tape-h: 52px; --rslh-logo-h: 68px; --rslh-gutter: clamp(14px, 2.4vw, 36px); --rslh-max: 100%; /* Motion system. Three durations, two curves, one stagger. Nothing is animated that is not listed here. */ --rslh-t-2: 160ms; --rslh-t-3: 240ms; --rslh-e-out: cubic-bezier(0.22, 1, 0.36, 1); --rslh-e-std: cubic-bezier(0.4, 0, 0.2, 1); --rslh-stagger: 40ms; } @media (max-width: 1199px) { :root { --rslh-h: 90px; --rslh-logo-h: 86px; } } @media (max-width: 767px) { :root { --rslh-h: 82px; --rslh-tape-h: 36px; --rslh-logo-h: 76px; } } @media (max-width: 400px) { :root { --rslh-h: 76px; --rslh-logo-h: 70px; } } /* --------------------------------------------------------------------------- 2. STICKY (requirements R1 + R2) ---------------------------------------------------------------------------- The site applies, with !important: html, body { overflow-x: hidden !important } from an Elementor HTML widget inside the FOOTER template, which is why it is the last style node on every page. overflow-x:hidden makes the element a scroll container, because its overflow-y then computes to auto. A position:sticky descendant sticks to THAT element's scrollport rather than the viewport — and body never scrolls, so the sticky never activates. That is why nothing on this site sticks today, including the inert position:sticky already sitting on the header's inner container. overflow-x: clip clips without creating a scroll container, so sticky works again. Guarded behind @supports so a browser without clip support keeps the original scroll behaviour rather than getting a half-applied layout. In that case the header simply does not stick — it is not broken. ------------------------------------------------------------------------ */ @supports (overflow-x: clip) { /* Specificity, not order — this is load-bearing. The hostile block is an Elementor HTML widget inside the FOOTER (.elementor-element-96d00c7), so it is the LAST style node on the page. Equal specificity plus !important on both sides means the later one wins, and a head stylesheet would lose. So these two selectors win on specificity instead, which is order-independent: :root (0,1,0) beats html (0,0,1) html body (0,0,2) beats body (0,0,1) clip also avoids the scroll-container trap that hidden creates. With overflow-y left visible, pairing visible with clip does NOT promote visible to auto, so neither element becomes a scroll container and the sticky descendants keep the viewport as their scrollport. */ :root { overflow-x: clip !important; } html body { overflow-x: clip !important; } /* Anchor targets must clear the pinned unit. */ html { scroll-padding-top: calc(var(--rslh-h) + var(--rslh-tape-h) + 8px); } /* The pinned unit: header at 0, tape directly beneath at the header's own height. Both are direct children of after the JS reorder, so both have the full document as their containing block and room to travel. */ body > .elementor-location-header { position: sticky; top: 0; /* Above the tape and above page content, so the drawer it owns can hang over the tape and the page. */ z-index: 1000; } /* The ticker sheet hardens itself with position: relative !important and z-index: 10000, which is why its own .rsl-ticker--sticky rule is dead code. This selector is (element + attribute + child) — strictly more specific — and both declarations carry !important, so it wins outright. */ body > [data-rsl-ticker] { position: sticky !important; top: var(--rslh-actual-h, var(--rslh-h)) !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 990 !important; } } /* Before header.js has moved it, the ticker is still 's FIRST child. The sticky rules below would then park it at the bar's height while its own flow space at the very top of the page sits empty — a visible band of nothing on every cold load until the script runs. Hold it in normal flow, exactly where it sits today, until rslh-ready confirms the reorder has happened. Fails safe: if the script never runs, the ticker stays above the bar as it is now. */ html:not(.rslh-ready) body > [data-rsl-ticker] { position: relative !important; top: auto !important; } /* The inner Elementor container carries an inert position:sticky from an earlier attempt. Clearing it prevents a second, competing sticky context. */ .elementor-location-header .elementor-element-ae81e40 { position: static !important; top: auto !important; } /* --------------------------------------------------------------------------- 3. THE BAR (R5 full-bleed, R6 base surface) ---------------------------------------------------------------------------- The bleed is structural, not a 100vw hack: the header template's outer section is set to Content Width = Full Width in Elementor, so it is already edge-to-edge and 100vw (which would break sticky) is never needed. ------------------------------------------------------------------------ */ .elementor-location-header { width: 100%; background-color: var(--rslh-navy) !important; color: var(--rslh-white); /* A flat navy surface with one soft top-light. No backdrop-filter: it costs a composited layer on every scroll frame, and mid-range Android is the dominant device for retail brokerage traffic here. */ border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: box-shadow var(--rslh-t-3) var(--rslh-e-std); } /* Scrolled state — the one place depth is introduced. */ body.rslh-scrolled .elementor-location-header { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 10px 30px -12px rgba(0, 18, 39, 0.55); border-bottom-color: rgba(255, 255, 255, 0.16); } /* Compact on scroll. The rail's min-height is what drives the bar's height, and the logo shrinks with it. header.js re-measures on the resulting resize and pushes the new value into --rslh-drawer-top, so the ticker and the drawer follow with no extra wiring. The ticker's own top is transitioned to the same duration and curve, so the two move as one piece instead of the ticker stepping down while the bar animates. */ .elementor-location-header .elementor-element-ae81e40 { transition: min-height var(--rslh-t-3) var(--rslh-e-out); } .elementor-location-header .elementor-element-e5d1427 img { transition: height var(--rslh-t-3) var(--rslh-e-out); } body > [data-rsl-ticker] { transition: top var(--rslh-t-3) var(--rslh-e-out); } @media (min-width: 1200px) { body.rslh-scrolled .elementor-location-header .elementor-element-ae81e40 { min-height: 62px; } body.rslh-scrolled .elementor-location-header .elementor-element-e5d1427 img { height: 52px !important; } } /* The rail. Elementor owns the container; this tightens it and orders the three slots: logo left, then nav and CTAs pushed to the right edge. */ .elementor-location-header .elementor-element-ae81e40 { /* !important on the box metrics only. Once the template's outer container was set to Content Width = Full Width, Elementor regenerated its own CSS for this element at higher specificity than a two-class selector can reach, and its max-width:100% / padding:10px then won — which stretched the CTA slot to 1405px and pushed the buttons off screen. */ max-width: var(--rslh-max) !important; margin-inline: auto !important; padding-inline: var(--rslh-gutter) !important; min-height: var(--rslh-h); display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: clamp(10px, 1.5vw, 26px); box-sizing: border-box; } /* --------------------------------------------------------------------------- 4. LOGO ---------------------------------------------------------------------------- The source is a 500x500 PNG that was rendering 120x120 on mobile and 660x140 at 768px inside an 80px bar. Height now comes from the token scale and width is capped, so the lockup cannot overflow the bar again. ------------------------------------------------------------------------ */ .elementor-location-header .elementor-element-e5d1427 { order: 1; flex: 0 0 auto !important; width: auto !important; max-width: none !important; } .elementor-location-header .elementor-element-e5d1427 a { display: inline-flex; align-items: center; line-height: 0; } .elementor-location-header .elementor-element-e5d1427 img { height: var(--rslh-logo-h) !important; width: auto !important; max-width: min(220px, 42vw) !important; object-fit: contain; display: block; /* The logo is deliberately never animated. */ } /* --------------------------------------------------------------------------- 5. NAV WIDGET PLACEMENT ---------------------------------------------------------------------------- The widget carries an Elementor tablet Width override that collapses its container to about 10px, which is the root cause of the broken tablet bar: the eight links wrap into a vertical ribbon down the page edge. Resetting the width here fixes it in CSS as well as via the widget setting, so the layout is correct even if the setting is missed. ------------------------------------------------------------------------ */ .elementor-location-header .elementor-element-d49c9a8 { order: 2; margin-left: 0; /* logo left, everything else right */ flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-width: 0; /* Static, not relative. Elementor sets position:relative here, which makes this widget the containing block for the absolutely positioned drawer and leaves the drawer offset from the widget's own box — 11px inside the bar, with a visible seam. Static hands the containing block back to the header (which is itself positioned by its own sticky), so the drawer can be pinned with top:100% exactly at the bar's lower edge. */ position: static !important; } .elementor-location-header .elementor-element-ab3c0c8 { order: 3; flex: 0 0 auto !important; width: auto !important; max-width: none !important; } /* Elementor's reset normally removes link underlines and list markers. Both are restated so the design does not depend on that stylesheet's contents or load order. Deliberately only these two properties — anything more (margin/padding) would collide with the rules that size the drawer. */ .elementor-location-header .elementor-nav-menu, .elementor-location-header .elementor-nav-menu ul { list-style: none; } .elementor-location-header .elementor-nav-menu a { text-decoration: none; } /* --------------------------------------------------------------------------- 6. DESKTOP NAV (R6 — smooth hover) ---------------------------------------------------------------------------- Typography and padding carry !important because the template declares both at 0,5,0 (Roboto 13px/400, padding 2px 7px, line-height 58px). ------------------------------------------------------------------------ */ .elementor-location-header .elementor-nav-menu--main ul.elementor-nav-menu { display: flex; align-items: center; gap: clamp(0px, 0.35vw, 6px); flex-wrap: nowrap; } .elementor-location-header .elementor-nav-menu--main .elementor-item { position: relative; display: inline-flex; align-items: center; padding: 10px 9px !important; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important; font-size: 0.875rem !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: 0.01em !important; text-transform: none !important; color: rgba(255, 255, 255, 0.82) !important; text-decoration: none; white-space: nowrap; border-radius: 6px; transition: color var(--rslh-t-2) var(--rslh-e-std), background-color var(--rslh-t-2) var(--rslh-e-std); } /* The underline draws itself. Transform only — no layout, no repaint of siblings, so a hover never costs more than one composite. Elementor's own ::after base rule is compatible with this; the widget is set to e--pointer-none so its pointer variants are inert. */ .elementor-location-header .elementor-nav-menu--main .elementor-item::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 4px; height: 2px; background: var(--rslh-blue); border-radius: 1px; transform: scaleX(0); transform-origin: left center; transition: transform var(--rslh-t-3) var(--rslh-e-out); } /* Hover and keyboard focus get the identical affordance. */ .elementor-location-header .elementor-nav-menu--main .elementor-item:hover, .elementor-location-header .elementor-nav-menu--main .elementor-item:focus-visible { color: var(--rslh-white) !important; background-color: rgba(255, 255, 255, 0.07); } .elementor-location-header .elementor-nav-menu--main .elementor-item:hover::after, .elementor-location-header .elementor-nav-menu--main .elementor-item:focus-visible::after { transform: scaleX(1); } /* Current page keeps the rule, so the active item reads without a hover. */ .elementor-location-header .elementor-nav-menu--main .current-menu-item > .elementor-item, .elementor-location-header .elementor-nav-menu--main .elementor-item-active { color: var(--rslh-white) !important; } .elementor-location-header .elementor-nav-menu--main .current-menu-item > .elementor-item::after { transform: scaleX(1); } .elementor-location-header .elementor-nav-menu--main .sub-arrow { margin-left: 3px; transition: transform var(--rslh-t-3) var(--rslh-e-out); } .elementor-location-header .elementor-nav-menu--main .has-submenu[aria-expanded="true"] .sub-arrow { transform: rotate(180deg); } /* --------------------------------------------------------------------------- 7. DESKTOP DROPDOWNS (R6) ---------------------------------------------------------------------------- Animated with @keyframes, not transitions: smartmenus gives a closed submenu display:none, and a transition cannot run across a display change. ------------------------------------------------------------------------ */ @keyframes rslh-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes rslh-drop-item { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .elementor-location-header .elementor-nav-menu--main .sub-menu { background-color: var(--rslh-indigo) !important; border: 1px solid rgba(255, 255, 255, 0.12); border-top: 2px solid var(--rslh-blue); border-radius: 0 0 10px 10px; padding: 8px !important; min-width: 236px; box-shadow: 0 24px 48px -16px rgba(0, 18, 39, 0.6) !important; } /* Panels hang flush from the bar's base rule — no gap, no pointer triangle. */ .elementor-location-header .elementor-nav-menu--main li:hover > .sub-menu, .elementor-location-header .elementor-nav-menu--main .sub-menu.show { animation: rslh-drop var(--rslh-t-3) var(--rslh-e-out) both; } /* Items stagger in on the shared 40ms grid. */ .elementor-location-header .elementor-nav-menu--main .sub-menu > li { animation: rslh-drop-item var(--rslh-t-2) var(--rslh-e-out) both; } .elementor-location-header .elementor-nav-menu--main .sub-menu > li:nth-child(1) { animation-delay: calc(var(--rslh-stagger) * 1); } .elementor-location-header .elementor-nav-menu--main .sub-menu > li:nth-child(2) { animation-delay: calc(var(--rslh-stagger) * 2); } .elementor-location-header .elementor-nav-menu--main .sub-menu > li:nth-child(3) { animation-delay: calc(var(--rslh-stagger) * 3); } .elementor-location-header .elementor-nav-menu--main .sub-menu > li:nth-child(4) { animation-delay: calc(var(--rslh-stagger) * 4); } .elementor-location-header .elementor-nav-menu--main .sub-menu > li:nth-child(5) { animation-delay: calc(var(--rslh-stagger) * 5); } .elementor-location-header .elementor-nav-menu--main .sub-menu > li:nth-child(6) { animation-delay: calc(var(--rslh-stagger) * 6); } .elementor-location-header .elementor-nav-menu--main .sub-menu > li:nth-child(7) { animation-delay: calc(var(--rslh-stagger) * 7); } .elementor-location-header .elementor-nav-menu--main .sub-menu > li:nth-child(n+8) { animation-delay: calc(var(--rslh-stagger) * 8); } .elementor-location-header .elementor-nav-menu--main .sub-menu .elementor-sub-item { display: block; padding: 9px 12px 9px 14px !important; margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important; font-size: 0.8125rem !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.78) !important; border-radius: 6px; border-left: 2px solid transparent; transition: color var(--rslh-t-2) var(--rslh-e-std), background-color var(--rslh-t-2) var(--rslh-e-std), border-color var(--rslh-t-2) var(--rslh-e-std); } .elementor-location-header .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover, .elementor-location-header .elementor-nav-menu--main .sub-menu .elementor-sub-item:focus-visible { color: var(--rslh-white) !important; background-color: rgba(255, 255, 255, 0.09); border-left-color: var(--rslh-blue); } /* --------------------------------------------------------------------------- 8. CTA BUTTONS (R4 — desktop placement) ---------------------------------------------------------------------------- Two classes deep so these beat the widget's own inline