/* ═══════════════════════════════════════════════════════════════ TESTROUTE FOOTER — v1.0.0 Scoped CSS JS moves .tr-ftr__wrap to to escape Cornerstone. ═══════════════════════════════════════════════════════════════ */ .tr-ftr { display: none !important; } .tr-ftr__wrap { display: block !important; width: 100% !important; background: var(--ftr-bg, #0d1b2a) !important; font-family: '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; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; --ftr-bg: #0d1b2a; --ftr-border: rgba(255,255,255,0.06); --ftr-heading: rgba(255,255,255,0.3); --ftr-link: rgba(255,255,255,0.5); --ftr-link-hover: rgba(255,255,255,0.8); --ftr-copy: rgba(255,255,255,0.2); --ftr-social: rgba(255,255,255,0.4); --ftr-max-w: 1040px; --ftr-pt: 48px; --ftr-pb: 16px; --ftr-gap: 32px; --ftr-fs-h: 11px; --ftr-fs-l: 13px; --ftr-fs-c: 11px; --ftr-ease: cubic-bezier(.4, 0, .2, 1); } .tr-ftr__wrap *, .tr-ftr__wrap *::before, .tr-ftr__wrap *::after { box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; } /* ═══════════════════════════════════════════════════════════════ INNER ═══════════════════════════════════════════════════════════════ */ .tr-ftr__inner { max-width: var(--ftr-max-w) !important; margin: 0 auto !important; padding: var(--ftr-pt) 32px 0 !important; } /* ═══════════════════════════════════════════════════════════════ GRID — 4 columns, equal width ═══════════════════════════════════════════════════════════════ */ .tr-ftr__grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: var(--ftr-gap) !important; padding-top: 32px !important; padding-bottom: 32px !important; border-top: 1.5px solid rgba(3,201,136,.25) !important; } .tr-ftr__col-h { all: unset !important; display: block !important; font-size: var(--ftr-fs-h) !important; font-weight: 600 !important; color: var(--ftr-heading) !important; letter-spacing: .05em !important; text-transform: uppercase !important; margin-bottom: 12px !important; line-height: 1.3 !important; font-family: inherit !important; cursor: default !important; } .tr-ftr__chevron { display: none !important; } .tr-ftr__col-links { display: block !important; } .tr-ftr__link { display: block !important; font-size: var(--ftr-fs-l) !important; font-weight: 400 !important; color: var(--ftr-link) !important; text-decoration: none !important; padding: 3.5px 0 !important; line-height: 1.5 !important; transition: color .15s var(--ftr-ease) !important; border: none !important; outline: none !important; background: none !important; font-family: inherit !important; } .tr-ftr__link:hover { color: var(--ftr-link-hover) !important; } /* ═══════════════════════════════════════════════════════════════ BOTTOM — copyright ═══════════════════════════════════════════════════════════════ */ .tr-ftr__bottom { padding: 0 !important; border-top: 1px solid var(--ftr-border) !important; } .tr-ftr__bottom-inner { max-width: var(--ftr-max-w) !important; margin: 0 auto !important; padding: var(--ftr-pb) 32px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .tr-ftr__copy { font-size: var(--ftr-fs-c) !important; color: var(--ftr-copy) !important; font-weight: 400 !important; font-family: inherit !important; } .tr-ftr__socials { display: flex !important; gap: 8px !important; } .tr-ftr__soc { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 6px !important; background: rgba(255,255,255,.04) !important; border: 1px solid var(--ftr-border) !important; color: var(--ftr-social) !important; text-decoration: none !important; transition: background .2s var(--ftr-ease), color .2s var(--ftr-ease) !important; } .tr-ftr__soc:hover { background: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.7) !important; } .tr-ftr__soc svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — 2x2 grid on mobile ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .tr-ftr__inner { padding: 0 24px !important; } .tr-ftr__grid { grid-template-columns: 1fr !important; gap: 0 !important; padding-top: 16px !important; padding-bottom: 0 !important; } .tr-ftr__col { border-bottom: 1px solid var(--ftr-border) !important; } .tr-ftr__col:last-child { border-bottom: none !important; } .tr-ftr__col-h { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 14px 0 !important; margin-bottom: 0 !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; font-size: 12px !important; } .tr-ftr__chevron { display: block !important; width: 16px !important; height: 16px !important; flex-shrink: 0 !important; color: rgba(255,255,255,.25) !important; transition: transform .25s cubic-bezier(.4,0,.2,1) !important; } .tr-ftr__col-h[aria-expanded="true"] .tr-ftr__chevron { transform: rotate(180deg) !important; } .tr-ftr__col-links { max-height: 0 !important; overflow: hidden !important; transition: max-height .3s cubic-bezier(.4,0,.2,1), padding .3s cubic-bezier(.4,0,.2,1) !important; padding-bottom: 0 !important; } .tr-ftr__col-h[aria-expanded="true"] + .tr-ftr__col-links { max-height: 400px !important; padding-bottom: 12px !important; } .tr-ftr__link { font-size: 14px !important; padding: 5px 0 !important; } .tr-ftr__bottom-inner { padding: 16px 24px !important; } .tr-ftr__copy { font-size: 10px !important; } .tr-ftr__soc { width: 26px !important; height: 26px !important; } .tr-ftr__soc svg { width: 12px !important; height: 12px !important; } } @media (max-width: 480px) { .tr-ftr__inner { padding: 0 20px !important; } .tr-ftr__bottom-inner { padding: 14px 20px !important; } .tr-ftr__link { font-size: 13px !important; } } /* ═══════════════════════════════════════════════════════════════ PRINT + REDUCED MOTION ═══════════════════════════════════════════════════════════════ */ @media print { .tr-ftr, .tr-ftr__wrap { display: none !important; } } @media (prefers-reduced-motion: reduce) { .tr-ftr__link, .tr-ftr__soc { transition: none !important; } }