/* ═══════════════════════════════════════════════════════════════ TESTROUTE HEADER — v1.6.0 Scoped CSS All selectors under .tr-hdr__. Uses !important for Cornerstone override protection. ARCHITECTURE: The JS moves .tr-hdr__bar, .tr-hdr__nbar, and .tr-hdr__mobile-menu out of Cornerstone's DOM tree and appends them directly to . This eliminates all container/transform/ overflow issues. CSS variables are defined on .tr-hdr__bar (not .tr-hdr wrapper). ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ WRAPPER — collapses completely, content moved to body by JS ═══════════════════════════════════════════════════════════════ */ .tr-hdr { display: none !important; } /* ═══════════════════════════════════════════════════════════════ BAR — fixed to viewport, lives directly on after JS ═══════════════════════════════════════════════════════════════ */ .tr-hdr__bar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 99990 !important; display: flex !important; align-items: center !important; background: linear-gradient(180deg, rgba(13,27,42,0.95) 0%, rgba(13,27,42,0.65) 60%, rgba(13,27,42,0) 100%) !important; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease !important; border: none !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; /* Reset */ box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; /* Typography */ font-family: var(--hdr-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; line-height: 1.5 !important; /* ── Design tokens — scaled to homepage mid-hierarchy ── */ --hdr-navy: #0d1b2a; --hdr-green: #03c988; --hdr-green-dark: #02a873; --hdr-cta-text: #0d1b2a; --hdr-link: rgba(255,255,255,0.55); --hdr-link-hover: rgba(255,255,255,0.85); --hdr-link-active: #ffffff; --hdr-active-bar: #03c988; --hdr-border: rgba(255,255,255,0.08); --hdr-h-desktop: 72px; --hdr-h-mobile: 56px; --hdr-logo-h: 28px; --hdr-max-w: 1040px; --hdr-fs-nav: 15px; --hdr-fs-cta: 15px; --hdr-fw-nav: 500; --hdr-fw-cta: 600; --hdr-ease: cubic-bezier(.4, 0, .2, 1); --hdr-dur: .2s; height: var(--hdr-h-desktop) !important; } .tr-hdr__bar *, .tr-hdr__bar *::before, .tr-hdr__bar *::after { box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; } .tr-hdr__bar.is-scrolled { background: var(--hdr-navy) !important; border-bottom-color: var(--hdr-border) !important; box-shadow: 0 1px 12px rgba(0,0,0,.25) !important; } /* When notification bar is present, header needs solid bg (gradient would bleed) */ .tr-hdr__bar.has-nbar { background: var(--hdr-navy) !important; border-bottom-color: var(--hdr-border) !important; } /* ═══════════════════════════════════════════════════════════════ INNER ═══════════════════════════════════════════════════════════════ */ .tr-hdr__inner { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; width: 100% !important; max-width: var(--hdr-max-w) !important; margin: 0 auto !important; padding: 0 32px !important; height: 100% !important; } .tr-hdr__logo { display: flex !important; align-items: center !important; flex-shrink: 0 !important; justify-self: start !important; text-decoration: none !important; outline: none !important; border: none !important; background: none !important; } .tr-hdr__logo-img { display: block !important; height: var(--hdr-logo-h, 28px) !important; width: auto !important; max-width: none !important; border: none !important; outline: none !important; object-fit: contain !important; } /* ═══════════════════════════════════════════════════════════════ DESKTOP NAV — Contained pill Border echoes the hero card (1px rgba(255,255,255,.1), radius 24px). Disappears on scroll when bar becomes solid navy. ═══════════════════════════════════════════════════════════════ */ .tr-hdr__nav { display: flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; gap: 22px !important; justify-self: center !important; width: auto !important; height: auto !important; overflow: visible !important; background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 24px !important; padding: 8px 22px !important; transition: background .3s ease, border-color .3s ease, padding .3s ease !important; } .is-scrolled .tr-hdr__nav { background: transparent !important; border-color: transparent !important; padding: 8px 0 !important; } .tr-hdr__link { display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-size: var(--hdr-fs-nav) !important; font-weight: var(--hdr-fw-nav) !important; color: var(--hdr-link) !important; text-decoration: none !important; padding: 4px 0 !important; position: relative !important; white-space: nowrap !important; transition: color var(--hdr-dur) var(--hdr-ease) !important; border: none !important; outline: none !important; background: none !important; line-height: 1.4 !important; font-family: inherit !important; } .tr-hdr__link:hover { color: var(--hdr-link-hover) !important; } .tr-hdr__link--active { color: var(--hdr-link-active) !important; } .tr-hdr__link--active::after { content: '' !important; position: absolute !important; bottom: -4px !important; left: 0 !important; right: 0 !important; height: 2px !important; background: var(--hdr-active-bar) !important; border-radius: 1px !important; } /* ═══════════════════════════════════════════════════════════════ ACTIONS (desktop right side) ═══════════════════════════════════════════════════════════════ */ .tr-hdr__actions { display: flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; gap: 16px !important; flex-shrink: 0 !important; justify-self: end !important; } .tr-hdr__login { display: inline-block !important; font-size: var(--hdr-fs-nav) !important; font-weight: var(--hdr-fw-nav) !important; color: var(--hdr-link) !important; text-decoration: none !important; white-space: nowrap !important; transition: color var(--hdr-dur) var(--hdr-ease) !important; border: none !important; outline: none !important; background: none !important; font-family: inherit !important; } .tr-hdr__login:hover { color: var(--hdr-link-hover) !important; } .tr-hdr__cta { all: unset !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; background: var(--hdr-green) !important; color: var(--hdr-cta-text) !important; font-family: var(--hdr-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important; font-size: var(--hdr-fs-cta) !important; font-weight: var(--hdr-fw-cta) !important; padding: 12px 24px !important; border-radius: 8px !important; cursor: pointer !important; white-space: nowrap !important; text-decoration: none !important; transition: background var(--hdr-dur) var(--hdr-ease), transform var(--hdr-dur) var(--hdr-ease) !important; -webkit-font-smoothing: antialiased !important; line-height: 1.2 !important; box-sizing: border-box !important; } .tr-hdr__cta:hover { background: var(--hdr-green-dark) !important; transform: translateY(-1px) !important; } .tr-hdr__cta:active { transform: translateY(0) !important; } .tr-hdr__cta-arrow { font-size: var(--hdr-fs-cta) !important; line-height: 1 !important; } /* ═══════════════════════════════════════════════════════════════ MOBILE RIGHT — hidden on desktop ═══════════════════════════════════════════════════════════════ */ .tr-hdr__mobile-right { display: none !important; } /* ═══════════════════════════════════════════════════════════════ HAMBURGER ═══════════════════════════════════════════════════════════════ */ .tr-hdr__burger { all: unset !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 4px !important; width: 44px !important; height: 44px !important; align-items: center !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; box-sizing: border-box !important; } .tr-hdr__burger span { display: block !important; width: 18px !important; height: 1.5px !important; background: rgba(255,255,255,.7) !important; border-radius: 1px !important; transition: transform .25s var(--hdr-ease), opacity .25s var(--hdr-ease) !important; } .tr-hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg) !important; } .tr-hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; } .tr-hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg) !important; } /* ═══════════════════════════════════════════════════════════════ MOBILE MENU — lives on after JS ═══════════════════════════════════════════════════════════════ */ .tr-hdr__mobile-menu { display: none !important; position: fixed !important; top: var(--hdr-h-mobile, 52px) !important; left: 0 !important; right: 0 !important; z-index: 99989 !important; background: rgba(13,27,42,.97) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; box-sizing: border-box !important; margin: 0 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; -webkit-font-smoothing: antialiased !important; } .tr-hdr__mobile-menu[aria-hidden="false"] { display: block !important; animation: tr-hdr-slide .2s cubic-bezier(.4,0,.2,1) !important; } .tr-hdr__mobile-menu nav { padding: 8px 20px 20px !important; margin: 0 !important; } @keyframes tr-hdr-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .tr-hdr__mob-link { display: block !important; font-size: 16px !important; font-weight: 500 !important; color: rgba(255,255,255,.65) !important; text-decoration: none !important; padding: 14px 0 !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; background: none !important; outline: none !important; border-top: none !important; border-left: none !important; border-right: none !important; margin: 0 !important; font-family: inherit !important; } .tr-hdr__mob-link:hover { color: #fff !important; } .tr-hdr__mob-link--active { color: #fff !important; } .tr-hdr__mob-link:last-of-type { border-bottom: none !important; } .tr-hdr__mob-divider { height: 1px !important; background: rgba(255,255,255,.08) !important; margin: 8px 0 !important; padding: 0 !important; } .tr-hdr__mob-secondary { display: block !important; font-size: 14px !important; font-weight: 500 !important; color: rgba(255,255,255,.4) !important; text-decoration: none !important; padding: 10px 0 !important; background: none !important; outline: none !important; border: none !important; margin: 0 !important; font-family: inherit !important; } .tr-hdr__mob-secondary:hover { color: rgba(255,255,255,.7) !important; } .tr-hdr__mob-cta { display: block !important; width: 100% !important; text-align: center !important; background: var(--hdr-green, #03c988) !important; color: var(--hdr-cta-text, #0d1b2a) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; padding: 14px 24px !important; border-radius: 10px !important; text-decoration: none !important; margin-top: 12px !important; box-sizing: border-box !important; -webkit-font-smoothing: antialiased !important; transition: background .2s ease !important; } .tr-hdr__mob-cta:hover { background: var(--hdr-green-dark, #02a873) !important; } /* ═══════════════════════════════════════════════════════════════ NOTIFICATION BAR — v1.6 sits above the header bar on Colours via inline --nbar-* custom properties set in PHP. Custom SVG icons (no emoji). Template variable support. ═══════════════════════════════════════════════════════════════ */ .tr-hdr__nbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 99991 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--nbar-bg, #0d1b2a) !important; color: var(--nbar-text, rgba(255,255,255,.85)) !important; font-family: var(--hdr-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; padding: 0 44px 0 16px !important; min-height: 40px !important; box-sizing: border-box !important; overflow: hidden !important; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease !important; transform: translateY(0) !important; opacity: 1 !important; } /* Spring preset: green accent border left */ .tr-hdr__nbar--accent-left { border-left: 3px solid var(--nbar-accent, #03c988) !important; } .tr-hdr__nbar.is-dismissed { transform: translateY(-100%) !important; opacity: 0 !important; pointer-events: none !important; } .tr-hdr__nbar[data-tr-nbar] { visibility: hidden !important; } .tr-hdr__nbar.is-ready { visibility: visible !important; animation: tr-nbar-reveal .4s cubic-bezier(.4,0,.2,1) both !important; } @keyframes tr-nbar-reveal { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .tr-hdr__nbar-inner { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; flex: 1 !important; padding: 9px 0 !important; min-width: 0 !important; text-align: center !important; } .tr-hdr__nbar-inner svg { flex-shrink: 0 !important; } .tr-hdr__nbar-msg { flex-shrink: 1 !important; min-width: 0 !important; } .tr-hdr__nbar-msg strong, .tr-hdr__nbar-msg b { font-weight: 700 !important; } .tr-hdr__nbar-cta { all: unset !important; display: inline-flex !important; align-items: center !important; gap: 3px !important; flex-shrink: 0 !important; padding: 5px 14px !important; background: var(--nbar-accent, #03c988) !important; color: var(--nbar-bg, #0d1b2a) !important; font-family: inherit !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .01em !important; border-radius: 5px !important; cursor: pointer !important; text-decoration: none !important; white-space: nowrap !important; transition: opacity .15s ease, transform .15s ease !important; box-sizing: border-box !important; } .tr-hdr__nbar-cta:hover { opacity: .85 !important; transform: translateY(-1px) !important; } .tr-hdr__nbar-cta:focus-visible { outline: 2px solid var(--nbar-accent, #03c988) !important; outline-offset: 2px !important; } .tr-hdr__nbar-close { all: unset !important; position: absolute !important; top: 50% !important; right: 10px !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; background: rgba(0,0,0,.08) !important; color: var(--nbar-text, rgba(255,255,255,.85)) !important; cursor: pointer !important; transition: background .15s ease !important; -webkit-tap-highlight-color: transparent !important; box-sizing: border-box !important; } .tr-hdr__nbar-close:hover { background: rgba(0,0,0,.15) !important; } .tr-hdr__nbar-close:focus-visible { outline: 2px solid var(--nbar-text, #fff) !important; outline-offset: 2px !important; } /* ── Mobile adjustments ── */ @media (max-width: 599px) { .tr-hdr__nbar { font-size: 12px !important; padding: 0 36px 0 12px !important; min-height: 36px !important; } .tr-hdr__nbar-inner { gap: 6px !important; padding: 8px 0 !important; } .tr-hdr__nbar-cta { font-size: 10.5px !important; padding: 4px 10px !important; } .tr-hdr__nbar-close { right: 6px !important; } /* Hide desktop message, show mobile variant if present */ .tr-hdr__nbar[data-mobile-msg] .tr-hdr__nbar-msg--desktop { display: none !important; } .tr-hdr__nbar[data-mobile-msg] .tr-hdr__nbar-msg--mobile { display: inline !important; } } /* Mobile message: hidden on desktop */ .tr-hdr__nbar-msg--mobile { display: none !important; } /* ── Marketing type: subtle shimmer ── */ .tr-hdr__nbar[data-type="marketing"]::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 60% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent) !important; animation: tr-nbar-shimmer 5s ease-in-out infinite !important; pointer-events: none !important; } @keyframes tr-nbar-shimmer { 0%, 100% { left: -60%; } 50% { left: 100%; } } /* ── Admin bar offset ── */ body.admin-bar .tr-hdr__nbar { top: 32px !important; } @media (max-width: 782px) { body.admin-bar .tr-hdr__nbar { top: 46px !important; } } /* ═══════════════════════════════════════════════════════════════ SENTINEL — invisible scroll observer target on ═══════════════════════════════════════════════════════════════ */ .tr-hdr__sentinel { position: absolute !important; top: 0 !important; left: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none !important; z-index: -1 !important; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — 768px (custom breakpoints via admin inline CSS) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .tr-hdr__bar { height: var(--hdr-h-mobile) !important; } .tr-hdr__nav { display: none !important; } .tr-hdr__actions { display: none !important; } .tr-hdr__mobile-right { display: flex !important; align-items: center !important; flex-shrink: 0 !important; margin-left: auto !important; } .tr-hdr__cta--mobile { display: none !important; } .tr-hdr__logo-img { height: calc(var(--hdr-logo-h, 28px) - 4px) !important; } .tr-hdr__inner { display: flex !important; padding: 0 20px !important; } } /* ═══════════════════════════════════════════════════════════════ WORDPRESS ADMIN BAR — offset header when logged-in WP admin bar = 32px on desktop, 46px on mobile (< 783px) ═══════════════════════════════════════════════════════════════ */ body.admin-bar .tr-hdr__bar { top: 32px !important; } body.admin-bar .tr-hdr__mobile-menu { top: calc(var(--hdr-h-mobile, 52px) + 32px) !important; } @media (max-width: 782px) { body.admin-bar .tr-hdr__bar { top: 46px !important; } body.admin-bar .tr-hdr__mobile-menu { top: calc(var(--hdr-h-mobile, 52px) + 46px) !important; } } @media print { .tr-hdr, .tr-hdr__bar, .tr-hdr__mobile-menu, .tr-hdr__nbar { display: none !important; } } @media (prefers-reduced-motion: reduce) { .tr-hdr__bar { transition: none !important; } .tr-hdr__link { transition: none !important; } .tr-hdr__cta { transition: none !important; } .tr-hdr__login { transition: none !important; } .tr-hdr__burger span { transition: none !important; } .tr-hdr__mobile-menu[aria-hidden="false"] { animation: none !important; } .tr-hdr__nbar { transition: none !important; animation: none !important; } .tr-hdr__nbar.is-ready { animation: none !important; } .tr-hdr__nbar[data-type="marketing"]::before { animation: none !important; } }