/* ============================================================================= RKC Finserve - site header Companion sheet to rkc.css. Loaded with a hard dependency on 'rkc', so every --rkc-* token printed by RKC_Core::inline_tokens() is already defined here. Rules of the house (same as rkc.css) - No font-family names. Montserrat is reached only through var(--rkc-head). - No raw colours except shadow / hairline alphas, which have no token. - Row 1 (.rkc-topbar) is ALREADY styled in rkc.css - this sheet only sizes the social cluster inside it. Everything else here is new surface. - Mobile first. Nav collapses to the hamburger below 1024px. ========================================================================== */ /* ============================================================================= 01 STICKY HOST position:sticky is constrained by the sticky element's PARENT box. The Elementor container that holds this header is exactly as tall as the header, so a sticky child inside it could never travel. The element that has to be sticky is therefore Elementor's own location wrapper, which is a direct child of and so is constrained only by the page height. --rkc-hdr-top is written by rkc-header.js as (fixed admin-bar height) - (measured utility-bar height) so the teal utility bar scrolls away and the white bar pins flush under the admin bar. If the JS never runs the fallback is 0px: the whole header sticks, utility bar included. Less pretty, still correct. ========================================================================== */ body.rkc-hdr .elementor-location-header { position: sticky; top: var(--rkc-hdr-top, 0px); z-index: 500; } /* The Elementor container wrappers must not add gutters - .rkc-wrap owns the horizontal rhythm, and it has to match every other section on the page. */ body.rkc-hdr .elementor-location-header > .e-con, body.rkc-hdr .elementor-location-header > .e-con > .e-con-inner { padding-left: 0; padding-right: 0; max-width: none; } /* ============================================================================= 02 ROW 1 - utility bar additions .rkc-topbar itself is styled in rkc.css (deep teal, 38px, hidden < 768px). ========================================================================== */ /* rkc.css gives every .rkc-topbar span a 7px gap; the icon cluster wants air. */ .rkc-topbar .rkc-topbar__social { gap: 14px; } .rkc-topbar__soc { opacity: .78; transition: opacity var(--rkc-t), color var(--rkc-t); } .rkc-topbar__soc:hover, .rkc-topbar__soc:focus-visible { opacity: 1; } .rkc-topbar__soc svg { opacity: 1; } /* ============================================================================= 03 ROW 2 - main bar ========================================================================== */ .rkc-header { position: relative; background: var(--rkc-white); border-bottom: 1px solid var(--rkc-line); transition: box-shadow var(--rkc-t), border-color var(--rkc-t); } /* Set by rkc-header.js once the bar has actually pinned. */ .rkc-header.is-stuck { border-bottom-color: transparent; box-shadow: 0 1px 0 rgba(10, 26, 31, .05), 0 10px 30px -16px rgba(10, 26, 31, .38); } .rkc-header__inner { display: flex; align-items: center; gap: 14px; min-height: 62px; } @media (min-width: 1024px) { .rkc-header__inner { min-height: 74px; gap: 18px; } } /* --- brand --------------------------------------------------------------- No logo image exists in the media library, so the mark is drawn markup: a brass rounded tile with an ascending rule inside, next to a typographic wordmark and the ARN as a sub-line. */ .rkc-brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 1 auto; min-width: 0; text-decoration: none; color: inherit; border-radius: var(--rkc-r); } .rkc-brand:focus-visible { outline: none; box-shadow: var(--rkc-ring); } .rkc-brand__mark { display: inline-flex; flex: 0 0 auto; width: 34px; height: 34px; color: var(--rkc-brass); } .rkc-brand__mark svg { display: block; width: 100%; height: 100%; } .rkc-brand__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .rkc-brand__name { font-family: var(--rkc-head); font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: -.015em; color: var(--rkc-deep); white-space: nowrap; } /* The second word carries less weight so "RKC" reads as the mark. */ .rkc-brand__name em { font-style: normal; font-weight: 500; letter-spacing: -.005em; color: var(--rkc-slate); } .rkc-brand__sub { font-family: var(--rkc-head); font-size: 9.5px; font-weight: 600; line-height: 1; letter-spacing: .15em; text-transform: uppercase; color: var(--rkc-brass-deep); white-space: nowrap; } @media (min-width: 1024px) { .rkc-brand__mark { width: 38px; height: 38px; } .rkc-brand__name { font-size: 20px; } } /* --- desktop navigation --------------------------------------------------- */ .rkc-nav { display: none; } .rkc-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } .rkc-nav__list li { position: relative; list-style: none; margin: 0; } .rkc-nav__list a { display: block; padding: 9px 12px; font-size: 14.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: var(--rkc-slate); text-decoration: none; border-radius: var(--rkc-r); transition: color var(--rkc-t), background-color var(--rkc-t); } .rkc-nav__list a:hover { color: var(--rkc-ink); background: var(--rkc-brass-08); } .rkc-nav__list a:focus-visible { outline: none; box-shadow: var(--rkc-ring); } /* Current page - weight plus a short brass rule, no colour shouting. */ .rkc-nav__list > .current-menu-item > a, .rkc-nav__list > .current_page_item > a, .rkc-nav__list > .current-menu-parent > a, .rkc-nav__list > .current-menu-ancestor > a, .rkc-nav__list > .current_page_ancestor > a, .rkc-nav__list > .is-current > a { color: var(--rkc-ink); font-weight: 600; } .rkc-nav__list > li > a::after { content: ""; display: block; height: 2px; margin: 6px auto -11px; width: 0; border-radius: 2px; background: var(--rkc-brass); transition: width var(--rkc-t); } .rkc-nav__list > .current-menu-item > a::after, .rkc-nav__list > .current_page_item > a::after, .rkc-nav__list > .current-menu-parent > a::after, .rkc-nav__list > .current-menu-ancestor > a::after, .rkc-nav__list > .current_page_ancestor > a::after, .rkc-nav__list > .is-current > a::after { width: 18px; } /* Second level. Nothing uses it today, but a menu edit must not silently drop children. Opens on hover and on keyboard focus alike. */ .rkc-nav .sub-menu { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 208px; margin: 0; padding: 6px; list-style: none; background: var(--rkc-white); border: 1px solid var(--rkc-line); border-radius: var(--rkc-r); box-shadow: var(--rkc-shadow-pop); opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity var(--rkc-t), transform var(--rkc-t), visibility var(--rkc-t); } .rkc-nav li:hover > .sub-menu, .rkc-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .rkc-nav .sub-menu a { white-space: normal; font-size: 14px; } .rkc-nav .sub-menu a::after { display: none; } @media (min-width: 1024px) { .rkc-nav { display: block; margin-left: auto; } } /* --- actions -------------------------------------------------------------- */ .rkc-header__act { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; } @media (min-width: 1024px) { /* .rkc-nav has already taken the auto margin, so a fixed gap here keeps the button hard against the right edge instead of centring the pair. */ .rkc-header__act { margin-left: 14px; } } /* rkc.css sizes .rkc-btn for body copy; the bar wants a tighter control. */ .rkc-header__act .rkc-btn, .rkc-mobnav .rkc-btn { white-space: nowrap; } .rkc-header__login { display: none; } @media (min-width: 480px) { .rkc-header__login { display: inline-flex; } } /* --- hamburger ------------------------------------------------------------ */ .rkc-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; padding: 0; background: transparent; color: var(--rkc-deep); border: 1px solid var(--rkc-line); border-radius: var(--rkc-r); cursor: pointer; transition: border-color var(--rkc-t), background-color var(--rkc-t); } .rkc-burger:hover { border-color: var(--rkc-brass); background: var(--rkc-brass-08); } .rkc-burger:focus-visible { outline: none; box-shadow: var(--rkc-ring); } .rkc-burger__box { position: relative; display: block; width: 20px; height: 14px; } .rkc-burger__bar { position: absolute; left: 0; display: block; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--rkc-t), opacity var(--rkc-t); } .rkc-burger__bar:nth-child(1) { top: 0; } .rkc-burger__bar:nth-child(2) { top: 6px; } .rkc-burger__bar:nth-child(3) { top: 12px; } .rkc-burger[aria-expanded="true"] .rkc-burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .rkc-burger[aria-expanded="true"] .rkc-burger__bar:nth-child(2) { opacity: 0; } .rkc-burger[aria-expanded="true"] .rkc-burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (min-width: 1024px) { .rkc-burger { display: none; } } /* ============================================================================= 04 MOBILE PANEL Full-screen, above the chat FAB (z-index 99997) and the floating WhatsApp button (99990) so neither can punch through the open menu. ========================================================================== */ .rkc-mobnav { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--rkc-white); animation: rkc-mobnav-in var(--rkc-t-slow) both; } .rkc-mobnav[hidden] { display: none; } @keyframes rkc-mobnav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } body.rkc-nav-open { overflow: hidden; } .rkc-mobnav__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; flex: 0 0 auto; border-bottom: 1px solid var(--rkc-line); } .rkc-mobnav__body { flex: 1 1 auto; padding-top: 20px; padding-bottom: 32px; } .rkc-mobnav__list { margin: 0 0 22px; padding: 0; list-style: none; } .rkc-mobnav__list li { list-style: none; margin: 0; } .rkc-mobnav__list > li + li { border-top: 1px solid var(--rkc-line); } .rkc-mobnav__list a { display: block; padding: 15px 2px; font-family: var(--rkc-head); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--rkc-ink); text-decoration: none; border-radius: var(--rkc-r); transition: color var(--rkc-t); } .rkc-mobnav__list a:hover { color: var(--rkc-brass-deep); } .rkc-mobnav__list a:focus-visible { outline: none; box-shadow: var(--rkc-ring); } .rkc-mobnav__list .current-menu-item > a, .rkc-mobnav__list .current_page_item > a, .rkc-mobnav__list .current-menu-ancestor > a { color: var(--rkc-brass-deep); } .rkc-mobnav__list .sub-menu { margin: 0 0 10px; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--rkc-brass-18); } .rkc-mobnav__list .sub-menu a { padding: 11px 2px; font-size: 15px; font-weight: 500; color: var(--rkc-slate); } .rkc-mobnav .rkc-btn { width: 100%; } .rkc-mobnav__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rkc-line); } .rkc-mobnav__contact a { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--rkc-slate); text-decoration: none; border-radius: 4px; } .rkc-mobnav__contact a:hover { color: var(--rkc-ink); } .rkc-mobnav__contact a:focus-visible { outline: none; box-shadow: var(--rkc-ring); } .rkc-mobnav__contact svg { flex: 0 0 auto; width: 16px; height: 16px; fill: currentColor; color: var(--rkc-brass); } .rkc-mobnav__arn { font-family: var(--rkc-head); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rkc-brass-deep); } /* ============================================================================= 05 SKIP LINK hello-elementor prints one; with a sticky header it must clear the bar. ========================================================================== */ body.rkc-hdr .skip-link:focus { z-index: 100000; } /* ============================================================================= 06 REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .rkc-header, .rkc-nav__list a, .rkc-nav__list > li > a::after, .rkc-nav .sub-menu, .rkc-burger, .rkc-burger__bar, .rkc-topbar__soc, .rkc-mobnav__list a, .rkc-mobnav { transition: none !important; animation: none !important; } } /* ============================================================================= 07 PRINT ========================================================================== */ @media print { body.rkc-hdr .elementor-location-header { position: static; } .rkc-header { border-bottom: 1px solid var(--rkc-line); box-shadow: none; } .rkc-burger, .rkc-mobnav, .rkc-header__act { display: none !important; } }