/* ========================================================================== header.css — site header (global). Built on global.css tokens. Mega menus open via :hover / :focus-within / click. ========================================================================== */ :root { --ry-topbar-h: 44px; --ry-nav-h: 76px; --ry-header-h: calc(var(--ry-topbar-h) + var(--ry-nav-h)); } /* Header is in normal flow (sticky nav); no body offset needed. */ /* -------------------------------------------------------------------------- Shell -------------------------------------------------------------------------- */ /* display:contents lets the sticky nav resolve against (tall), so it stays stuck the whole page instead of releasing after the header. */ .ry-header { display: contents; } /* -------------------------------------------------------------------------- Top bar -------------------------------------------------------------------------- */ .ry-topbar { position: relative; z-index: var(--ry-z-header); height: var(--ry-topbar-h); background: var(--ry-ink-deep); border-bottom: 1px solid var(--ry-ink-line); } .ry-topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .ry-topbar__promo { font-size: 13px; color: var(--ry-text-muted-dark); } .ry-topbar__promo strong { color: #fff; font-weight: 600; } .ry-topbar__login { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ry-text-sm); font-weight: 500; color: #fff; } .ry-topbar__login:hover { color: var(--ry-blue-300); } /* -------------------------------------------------------------------------- Main nav -------------------------------------------------------------------------- */ .ry-nav { position: sticky; top: 0; z-index: var(--ry-z-header); height: var(--ry-nav-h); background: var(--ry-ink); border-bottom: 1px solid transparent; transition: transform 420ms cubic-bezier(0.33, 0, 0.2, 1), box-shadow var(--ry-dur) var(--ry-ease), border-color var(--ry-dur) var(--ry-ease); } /* Shadow once the user has scrolled past the top bar */ .ry-nav--stuck { box-shadow: var(--ry-shadow-md); border-bottom-color: var(--ry-ink-line); } /* Directional hide: slides up on scroll-down, back on scroll-up */ .ry-nav--hidden { transform: translateY(-100%); } .ry-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ry-space-5); height: 100%; } .ry-logo { display: inline-flex; align-items: center; flex-shrink: 0; } .ry-logo img { height: 56px; width: auto; } /* -------------------------------------------------------------------------- Menu -------------------------------------------------------------------------- */ .ry-menu { display: flex; align-items: center; gap: var(--ry-space-2); margin: 0 auto; height: 100%; } .ry-menu__item { position: relative; display: flex; align-items: center; height: 100%; } /* Full-width megas center on the NAV, not on their menu item. Making the item static lets .ry-mega resolve against .ry-nav. */ .ry-menu__item:has(.ry-mega--features), .ry-menu__item:has(.ry-mega--industries) { position: static; } .ry-menu__link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ry-font-body); font-size: var(--ry-text-sm); font-weight: 500; color: var(--ry-slate-200); padding: var(--ry-space-2) var(--ry-space-3); border-radius: var(--ry-radius-sm); transition: color var(--ry-dur-fast) var(--ry-ease); } .ry-menu__link:hover { color: #fff; } .ry-menu__chev { font-size: 15px; transition: transform var(--ry-dur-fast) var(--ry-ease); } .has-mega:hover .ry-menu__chev, .has-mega:focus-within .ry-menu__chev { transform: rotate(180deg); } .has-mega:hover > .ry-menu__link, .has-mega:focus-within > .ry-menu__link { color: #fff; } /* -------------------------------------------------------------------------- Mega panel (shared) -------------------------------------------------------------------------- */ .ry-mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); width: min(var(--ry-container), calc(100vw - var(--ry-space-6))); padding-top: 1px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--ry-dur) var(--ry-ease), transform var(--ry-dur) var(--ry-ease), visibility 0s linear var(--ry-dur); } .has-mega:hover > .ry-mega, .has-mega:focus-within > .ry-mega, .has-mega.is-open > .ry-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s; } .has-mega.is-open > .ry-menu__link { color: #fff; } .has-mega.is-open > .ry-menu__link .ry-menu__chev { transform: rotate(180deg); } .ry-mega__inner { background: var(--ry-bg); border-radius: var(--ry-radius-lg); box-shadow: var(--ry-shadow-lg); border: 1px solid var(--ry-slate-200); padding: var(--ry-space-5); } /* -------------------------------------------------------------------------- Mega focus overlay — dims + blurs the page behind an open mega -------------------------------------------------------------------------- */ .ry-mega-overlay { position: fixed; inset: 0; z-index: var(--ry-z-megamenu); background: rgba(7, 18, 31, 0.42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--ry-dur) var(--ry-ease), visibility 0s linear var(--ry-dur); } body:has(.ry-menu__item.has-mega:hover) .ry-mega-overlay, body:has(.ry-menu__item.has-mega:focus-within) .ry-mega-overlay, body:has(.ry-menu__item.is-open) .ry-mega-overlay { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } /* -------------------------------------------------------------------------- Feature / link item (reused in all menus) -------------------------------------------------------------------------- */ .ry-feat { display: flex; align-items: flex-start; gap: 11px; padding: 9px 10px; margin-top: 10px; border-radius: var(--ry-radius-md); transition: background var(--ry-dur-fast) var(--ry-ease); } .ry-feat:hover { background: #1D4ED81F; } .ry-feat__ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--ry-radius-md); background: #DEEBFD; color: var(--ry-blue-600); } .ry-feat__ic--ai { background: var(--ry-purple-100); color: var(--ry-purple-600); } .ry-feat__ic i, .ry-feat__ic svg { font-size: 20px; width: 20px; height: 20px; } .ry-feat__t { display: block; font-size: var(--ry-text-sm); font-weight: 500; color: var(--ry-slate-900); line-height: 1.3; } .ry-feat__d { display: block; font-size: var(--ry-text-xs); color: var(--ry-text-muted); line-height: 1.35; margin-top: 1px; font-weight: 400; } .ry-tag { font-size: 10px; font-weight: 700; color: var(--ry-purple-700); background: var(--ry-purple-100); padding: 1px 6px; border-radius: var(--ry-radius-sm); vertical-align: 1px; } /* -------------------------------------------------------------------------- Features mega layout -------------------------------------------------------------------------- */ .ry-mega__cols { display: grid; grid-template-columns: 1fr 1fr 1fr 0.92fr; gap: var(--ry-space-5); } .ry-mega__head { padding: 0 10px var(--ry-space-2); } /* AI column heading — purple, flags the differentiator zone */ .ry-mega__head--ai { color: var(--ry-purple-600); } /* AI panel (Industries wide strip) */ .ry-mega__ai { display: flex; flex-direction: column; border-radius: var(--ry-radius-md); padding: var(--ry-space-4); background-color: var(--ry-purple-50); background-image: linear-gradient(180deg, rgba(7, 18, 31, 0.78), rgba(7, 18, 31, 0.65)), url('/wp-content/uploads/2026/06/Ryno-ai-xl.webp'); background-size: cover; background-position: right center; background-repeat: no-repeat; } .ry-mega__ai-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--ry-radius-md); background: var(--ry-purple-600); color: #fff; margin-bottom: 10px; } .ry-mega__ai-ic i, .ry-mega__ai-ic svg { font-size: 18px; } .ry-mega__ai-t { font-family: var(--ry-font-display); font-size: var(--ry-text-xl); font-weight: 500; color: var(--ry-slate-900); line-height: 1.2; } .ry-mega__ai-d { font-size: var(--ry-text-xs); color: var(--ry-text-muted); line-height: 1.45; margin-top: 6px; } .ry-mega__ai-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ry-text-sm); font-weight: 600; color: var(--ry-purple-700); margin-top: 10px; } /* -------------------------------------------------------------------------- Features spotlight panel (AI Visualizer) -------------------------------------------------------------------------- */ .ry-spot { display: flex; flex-direction: column; border-radius: var(--ry-radius-md); overflow: hidden; background: var(--ry-ink); border: 1px solid var(--ry-ink-line); } .ry-spot__media { display: block; overflow: hidden; aspect-ratio: 405 / 250; background: var(--ry-ink-deep); } .ry-spot__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--ry-dur) var(--ry-ease); } .ry-spot:hover .ry-spot__media img { transform: scale(1.03); } .ry-spot__body { display: flex; flex-direction: column; padding: var(--ry-space-4); } .ry-spot__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ry-text-xs); font-weight: 700; text-transform: uppercase; color: var(--ry-purple-300); } .ry-spot__eyebrow i { font-size: 15px; } .ry-spot__t { font-family: var(--ry-font-display); font-size: var(--ry-text-lg); font-weight: 500; color: #fff; line-height: 1.2; margin-top: 8px; } .ry-spot__d { font-size: var(--ry-text-xs); color: var(--ry-slate-300); line-height: 1.45; margin-top: 6px; } .ry-spot__link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ry-text-sm); font-weight: 600; color: var(--ry-purple-300); margin-top: 12px; } .ry-spot__link i { transition: transform var(--ry-dur-fast) var(--ry-ease); } .ry-spot:hover .ry-spot__link i { transform: translateX(3px); } /* -------------------------------------------------------------------------- Industries mega -------------------------------------------------------------------------- */ .ry-ind__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ry-space-4); } .ry-ind__title { font-size: var(--ry-text-lg); line-height: 1.2; } .ry-ind__all { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ry-text-sm); font-weight: 600; } .ry-ind__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ry-space-1); } .ry-ind__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--ry-radius-md); transition: background var(--ry-dur-fast) var(--ry-ease); } .ry-ind__item:hover { background: #1D4ED81F; } .ry-ind__ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--ry-radius-sm); background: #DEEBFD; color: var(--ry-blue-600); } .ry-ind__ic i { font-size: 17px; } .ry-ind__name { font-size: var(--ry-text-sm); font-weight: 600; color: var(--ry-slate-900); line-height: 1.2; } .ry-mega__ai--wide { flex-direction: row; align-items: center; gap: var(--ry-space-4); margin-top: var(--ry-space-4); background-position: right center; } .ry-mega__ai--wide .ry-mega__ai-ic { margin-bottom: 0; } .ry-mega__ai--wide .ry-mega__ai-body { flex: 1; } .ry-mega__ai--wide .ry-mega__ai-link { margin-top: 0; white-space: nowrap; } .ry-mega__ai .ry-mega__ai-t { color: #fff; } .ry-mega__ai .ry-mega__ai-d { color: var(--ry-slate-300); } .ry-mega__ai .ry-mega__ai-link { color: var(--ry-purple-300); } /* -------------------------------------------------------------------------- Resources dropdown (narrow, anchored to its item) -------------------------------------------------------------------------- */ .ry-mega--dropdown { left: 0; transform: translateX(0) translateY(8px); width: 260px; } .has-mega:hover > .ry-mega--dropdown, .has-mega:focus-within > .ry-mega--dropdown, .has-mega.is-open > .ry-mega--dropdown { transform: translateX(0) translateY(0); } .ry-mega--dropdown .ry-mega__inner { padding: var(--ry-space-2); } /* -------------------------------------------------------------------------- CTAs -------------------------------------------------------------------------- */ .ry-nav__ctas { display: flex; align-items: center; gap: var(--ry-space-2); flex-shrink: 0; } .ry-btn--sm { font-size: var(--ry-text-sm); padding: var(--ry-space-2) var(--ry-space-4); } /* -------------------------------------------------------------------------- Mobile burger (hidden on desktop) -------------------------------------------------------------------------- */ .ry-burger { display: none; color: #fff; font-size: 26px; padding: 4px; } /* -------------------------------------------------------------------------- Scroll lock when mobile menu is open -------------------------------------------------------------------------- */ body.ry-noscroll { overflow: hidden; } /* -------------------------------------------------------------------------- Responsive — collapse to mobile below md (768px) -------------------------------------------------------------------------- */ @media (max-width: 980px) { .ry-menu, .ry-nav__ctas { display: none; } .ry-burger { display: inline-flex; } .ry-topbar__promo { font-size: var(--ry-text-xs); } } /* ========================================================================== Mobile overlay menu (full-screen) ========================================================================== */ .ry-mobile { position: fixed; inset: 0; z-index: var(--ry-z-overlay); background: var(--ry-ink); display: flex; flex-direction: column; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--ry-dur) var(--ry-ease), visibility 0s linear var(--ry-dur); } .ry-mobile.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .ry-mobile__top { display: flex; align-items: center; justify-content: space-between; height: var(--ry-nav-h); flex-shrink: 0; padding: 0 var(--ry-space-5); border-bottom: 1px solid var(--ry-ink-line); } .ry-mobile__top .ry-logo img { height: 40px; width: auto; } .ry-mobile__close { color: #fff; font-size: 28px; line-height: 1; padding: 4px; } .ry-mobile__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--ry-space-3) var(--ry-space-5); } .ry-mobile__nav { display: flex; flex-direction: column; } /* Staggered entrance for top-level items + footer */ .ry-mobile__nav > *, .ry-mobile__foot > * { opacity: 0; transform: translateY(18px); transition: opacity var(--ry-dur-slow) var(--ry-ease), transform var(--ry-dur-slow) var(--ry-ease); } .ry-mobile.is-open .ry-mobile__nav > *, .ry-mobile.is-open .ry-mobile__foot > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 0.055s + 0.1s); } /* Accordions + direct items */ .ry-acc { border-bottom: 1px solid var(--ry-ink-line); } .ry-acc__btn, .ry-mobile__direct { display: flex; align-items: center; justify-content: space-between; width: 100%; font-family: var(--ry-font-body); font-size: var(--ry-text-lg); font-weight: 500; color: #fff; text-align: left; padding: var(--ry-space-4) 0; } .ry-acc__chev { font-size: 20px; color: var(--ry-slate-400); transition: transform var(--ry-dur-fast) var(--ry-ease); } .ry-acc.is-open .ry-acc__chev { transform: rotate(180deg); } .ry-acc__panel { max-height: 0; overflow: hidden; transition: max-height var(--ry-dur) var(--ry-ease); } .ry-acc__inner { display: flex; flex-direction: column; gap: 2px; padding: 0 0 var(--ry-space-4) var(--ry-space-2); } .ry-macc-head { padding: var(--ry-space-3) 0 var(--ry-space-1); color: var(--ry-slate-500); } /* Mobile AI sub-heading — purple to match the desktop AI column */ .ry-macc-head--ai { color: var(--ry-purple-300); } .ry-mlink { display: flex; align-items: center; gap: 11px; font-size: var(--ry-text-base); color: var(--ry-slate-200); padding: var(--ry-space-2) 0; } .ry-mlink i { font-size: 19px; width: 22px; color: var(--ry-blue-400); } .ry-mlink--ai { color: var(--ry-purple-300); font-weight: 600; } .ry-mlink--ai i { color: var(--ry-purple-400); } .ry-mobile__foot { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--ry-space-3); padding: var(--ry-space-4) var(--ry-space-5) calc(var(--ry-space-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--ry-ink-line); } .ry-mobile__foot .ry-btn { width: 100%; } .ry-mobile__login { text-align: center; font-size: var(--ry-text-sm); font-weight: 500; color: var(--ry-slate-300); } /* Respect reduced motion for menu entrance */ @media (prefers-reduced-motion: reduce) { .ry-mobile__nav > *, .ry-mobile__foot > * { transition: none; opacity: 1; transform: none; } .ry-nav { transition: none; } } /* -------------------------------------------------------------------------- Morphing mega stage (Features <-> Industries) — JS-driven shared surface -------------------------------------------------------------------------- */ .ry-megastage { --ry-mega-slide: 2.5rem; /* horizontal slide distance — tune to taste */ position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); width: min(var(--ry-container), calc(100vw - var(--ry-space-6))); padding-top: 1px; opacity: 0; visibility: hidden; pointer-events: none; z-index: 1; transition: opacity var(--ry-dur) var(--ry-ease), transform var(--ry-dur) var(--ry-ease), visibility 0s linear var(--ry-dur); } /* Content layers — parked left/right of the active panel; slide in directionally */ .ry-megastage__panel { position: absolute; top: 0; left: 0; right: 0; padding: var(--ry-space-5); opacity: 0; pointer-events: none; transform: translateX(0); transition: opacity 240ms var(--ry-ease), transform 320ms cubic-bezier(0.33, 0, 0.2, 1); } .ry-megastage__panel.is-left { transform: translateX(calc(-1 * var(--ry-mega-slide))); } .ry-megastage__panel.is-right { transform: translateX(var(--ry-mega-slide)); } .ry-megastage__panel.is-active { opacity: 1; pointer-events: auto; transform: translateX(0); } /* First-open snap: no slide-from-side on the very first reveal */ .ry-megastage.no-anim .ry-megastage__inner, .ry-megastage.no-anim .ry-megastage__panel { transition: none; } .ry-megastage.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s; } /* The morphing box — height is set in JS; this is the one element that resizes */ .ry-megastage__inner { position: relative; height: 0; overflow: hidden; background: var(--ry-bg); border-radius: var(--ry-radius-lg); box-shadow: var(--ry-shadow-lg); border: 1px solid var(--ry-slate-200); transition: height 300ms cubic-bezier(0.33, 0, 0.2, 1); will-change: height; } @media (max-width: 980px) { .ry-megastage { display: none; } } @media (prefers-reduced-motion: reduce) { .ry-megastage, .ry-megastage__inner, .ry-megastage__panel { transition: none; } }