/* ============================================================ Aegis site chrome — header, mega-nav, footer Ported from the HubSpot CMS theme (Tailwind v4) to plain CSS. Everything is namespaced under .ag-header / .ag-footer so it cannot collide with the existing WordPress/Bootstrap styles. ============================================================ */ /* ---- 1. Design tokens ------------------------------------- */ :root { /* brand */ --ag-primary: #EF3B32; --ag-primary-dark: #B32C26; --ag-primary-darker: #781E19; --ag-secondary: #1D5A83; --ag-secondary-light: #81A5BB; --ag-secondary-lighter: #E6EDF1; /* neutrals */ --ag-neutral-lighter: #FFFFFF; --ag-neutral-light: #F7F7F7; --ag-neutral-default: #F2F2F2; --ag-neutral-dark: #E5E5E5; --ag-neutral-darker: #B8B8B8; /* surfaces */ --ag-surface-lighter: #999999; --ag-surface-light: #808080; --ag-surface: #404040; /* hairline borders */ --ag-surface-dark: #1A1A1A; --ag-surface-darker: #000000; /* backgrounds */ --ag-bg-1: #000000; /* the chrome background */ --ag-bg-4: #1A1A1A; /* type */ --ag-font-sans: "Epilogue", system-ui, -apple-system, "Segoe UI", sans-serif; --ag-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* layout */ --ag-container: 1600px; --ag-gutter: 1.625rem; /* 26px — mobile (px-6.5) */ --ag-gutter-md: 3rem; /* 48px — tablet (md:px-12) */ --ag-gutter-lg: 2rem; /* 32px — desktop (lg:px-8) */ --ag-gutter-xl: 4rem; /* 64px — wide (xl:px-16) */ --ag-header-h: 80px; /* mobile */ --ag-header-h-lg: 125px; /* desktop */ --ag-radius: 4px; --ag-ease: 300ms cubic-bezier(.4,0,.2,1); } /* ---- 2. Shared primitives --------------------------------- */ .ag-header *, .ag-footer *, .ag-header *::before, .ag-footer *::before, .ag-header *::after, .ag-footer *::after { box-sizing: border-box; } /* The host theme sets `body { font-weight: 300 }` and Bootstrap sets `a { color: #007bff }`. Both cascade in. Neutralise them at the root of the chrome so Epilogue renders at Regular and links inherit their local colour. */ .ag-header, .ag-footer { font-weight: 400; /* The source site sets this on . Without it Epilogue rasterises with subpixel antialiasing and renders visibly heavier than the original — every measured value matches, but the type still reads wrong. Scoped to the chrome so the support content keeps the host theme's rendering. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ag-header a, .ag-footer a { color: inherit; text-decoration: none; } /* Bootstrap's reboot ships `a:hover { color:#0056b3; text-decoration:underline }` in BOTH style.css and style-jj.css, at specificity (0,1,1). style-jj.css loads AFTER this file, so it also wins any tie — which is where the 1px blue underline on mega-menu links came from. Match the state and out-specify it (0,2,1). */ .ag-header a:hover, .ag-header a:focus, .ag-header a:active, .ag-footer a:hover, .ag-footer a:focus, .ag-footer a:active { color: inherit; text-decoration: none; } .ag-container { width: 100%; max-width: var(--ag-container); margin-inline: auto; padding-inline: var(--ag-gutter); } @media (min-width: 768px) { .ag-container { padding-inline: var(--ag-gutter-md); } } @media (min-width: 1024px) { .ag-container { padding-inline: var(--ag-gutter-lg); } } @media (min-width: 1280px) { .ag-container { padding-inline: var(--ag-gutter-xl); } } /* Buttons — Geist Mono, 4px radius, tight tracking */ .ag-btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ag-font-mono); font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; padding: 12px 16px; border-radius: var(--ag-radius); border: 0; /* a 1px border here made the CTA 50px, not 48 */ text-decoration: none; cursor: pointer; transition: background-color var(--ag-ease), border-color var(--ag-ease), color var(--ag-ease); } .ag-btn--primary { background: var(--ag-primary); color: #fff; } .ag-btn--primary:hover, .ag-btn--primary:focus-visible { background: var(--ag-primary-dark); color: #fff; } /* inset shadow instead of a border so the ghost variant matches the primary's box */ .ag-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--ag-surface); } .ag-btn--ghost:hover { box-shadow: inset 0 0 0 1px #fff; } /* Eyebrow / group label. Measured off production: Geist Mono 500, 14px, uppercase, neutral-darker, no extra tracking, 24px bottom margin. */ .ag-eyebrow { font-family: var(--ag-font-mono); font-size: .875rem; line-height: 1.5; font-weight: 500; letter-spacing: normal; text-transform: uppercase; color: var(--ag-neutral-darker); margin: 0 0 1.5rem; } .ag-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ 3. HEADER ============================================================ */ .ag-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; background: var(--ag-bg-1); border-bottom: 1px solid var(--ag-surface); padding-block: 1rem; font-family: var(--ag-font-sans); color: #fff; transition: transform var(--ag-ease), background-color var(--ag-ease); } /* Offset for the fixed header — put this class on . --ag-header-measured is written by aegis-chrome.js from the real rendered height, so translated nav labels that wrap can never hide page content behind the header. The static values are the no-JS fallback. */ .ag-has-fixed-header { padding-top: var(--ag-header-measured, var(--ag-header-h)); } @media (min-width: 1024px) { .ag-has-fixed-header { padding-top: var(--ag-header-measured, var(--ag-header-h-lg)); } } /* -- 3a. Utility bar (Search / Customer Support) -- */ .ag-header__utility { display: none; } @media (min-width: 1024px) { .ag-header__utility { display: block; margin-bottom: 1rem; } } .ag-header__utility-inner { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; min-height: 24px; } .ag-header__utility a { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ag-font-mono); font-size: 1rem; line-height: 1.5; color: #fff; text-decoration: none; transition: color var(--ag-ease); } .ag-header__utility a:hover { color: var(--ag-primary); } .ag-header__utility svg { width: 20px; height: 20px; flex: none; } /* -- 3a-ii. Language switcher (kept from the EE build) -- */ /* display:flex, not block — an inline-flex child sits on a text baseline and added ~6px of descender space, which pushed the whole header to 132px. */ .ag-lang { position: relative; display: flex; } .ag-lang__toggle { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--ag-font-mono); font-size: 1rem; line-height: 1.5; color: #fff; transition: color var(--ag-ease); } .ag-lang__toggle:hover { color: var(--ag-primary); } .ag-lang__toggle > svg { width: 20px; height: 20px; flex: none; } .ag-lang__caret { width: 16px !important; height: 16px !important; transition: transform var(--ag-ease); } .ag-lang__toggle[aria-expanded="true"] .ag-lang__caret { transform: rotate(180deg); } .ag-lang__menu { position: absolute; top: calc(100% + .75rem); right: 0; z-index: 60; min-width: 180px; margin: 0; padding: .5rem 0; list-style: none; background: var(--ag-surface-dark); border: 1px solid var(--ag-surface); border-radius: var(--ag-radius); } .ag-lang__menu[hidden] { display: none; } .ag-lang__menu a { display: block; padding: .5rem 1rem; font-family: var(--ag-font-sans); font-size: .875rem; color: var(--ag-neutral-darker); text-decoration: none; } .ag-lang__menu a:hover { background: var(--ag-surface); color: #fff; } .ag-lang__menu a[aria-current="true"] { color: #fff; } /* -- 3b. Main row -- */ .ag-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ag-header__logo { display: block; flex: none; } .ag-header__logo img { display: block; height: 40px; width: auto; } @media (min-width: 1024px) { .ag-header__logo img { height: 52px; } } .ag-header__actions { display: flex; align-items: center; gap: 1rem; } /* the demo CTA lives in the drawer on small screens, like the source site */ .ag-header__actions > .ag-btn { display: none; } @media (min-width: 1024px) { .ag-header__actions > .ag-btn { display: inline-flex; } } /* -- 3c. Desktop nav -- */ /* The bar has three children — logo, nav, actions — so `space-between` was spreading them evenly and parking the nav in the middle. The source groups the links and the CTA together against the right edge; an auto left margin on the nav absorbs all the free space and reproduces that without touching the markup. (Auto margins take priority over justify-content, so the `space-between` on .ag-header__bar becomes a no-op at this breakpoint and still does the right thing below 1024px where .ag-nav is display:none.) */ .ag-nav { display: none; } @media (min-width: 1024px) { .ag-nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; } } .ag-nav__list { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; } .ag-nav__item { position: static; } .ag-nav__toggle { display: flex; align-items: center; gap: .5rem; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--ag-font-mono); font-size: 1rem; font-weight: 500; line-height: 1.5; color: #fff; transition: color var(--ag-ease); } .ag-nav__toggle:hover, .ag-nav__item--open > .ag-nav__toggle { color: var(--ag-primary); } .ag-nav__toggle svg { width: 16px; height: 16px; transition: transform var(--ag-ease); } .ag-nav__item--open > .ag-nav__toggle svg { transform: rotate(180deg); } /* -- 3d. Mega panel -- */ .ag-mega { position: absolute; top: 100%; left: 0; width: 100%; background: var(--ag-bg-1); border-top: 1px solid var(--ag-surface); padding: 2rem 0 4rem; opacity: 0; visibility: hidden; transition: opacity var(--ag-ease), visibility var(--ag-ease); max-height: calc(100dvh - var(--ag-header-measured, var(--ag-header-h-lg))); overflow-y: auto; } .ag-mega[aria-hidden="false"] { opacity: 1; visibility: visible; } .ag-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem; } .ag-mega__col { display: flex; flex-direction: column; } .ag-mega__group { padding-bottom: 2rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--ag-surface); } .ag-mega__group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } /* A column may span two grid tracks — Solutions and Industries both do. */ .ag-mega__col--wide { grid-column: span 2; } /* Optional overview link at the top of a group ("Solutions Overview") */ .ag-mega__overview { display: block; margin: 0 0 1rem; font-family: var(--ag-font-sans); font-size: 1.125rem; line-height: 1.5; font-weight: 400; color: #fff; text-decoration: none; transition: color var(--ag-ease); } /* (0,3,0) so it beats the blanket .ag-header a:hover reset above */ .ag-header a.ag-mega__overview:hover { color: var(--ag-primary); } /* Link list. --2col splits into two tracks at lg, as Solutions/Industries do. */ .ag-mega__menu { display: grid; grid-template-columns: 1fr; column-gap: 4rem; row-gap: 1rem; margin: 0; padding: 0; list-style: none; } @media (min-width: 1024px) { .ag-mega__menu--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ag-mega__link { display: block; text-decoration: none; } /* Item title and description are BOTH Geist Mono — 16px white over 14px neutral-darker. Every panel on production uses this pattern; the earlier 22px Epilogue title came from the older sandbox build. */ .ag-mega__item-title { margin: 0; font-family: var(--ag-font-mono); font-size: 1rem; line-height: 1.5; font-weight: 400; color: #fff; transition: color var(--ag-ease); } .ag-mega__link:hover .ag-mega__item-title { color: var(--ag-primary); } .ag-mega__item-desc { margin: 0; font-family: var(--ag-font-mono); font-size: .875rem; line-height: 1.5; font-weight: 400; color: var(--ag-neutral-darker); } /* Featured card — 1px gradient hairline wrapping a faintly gradient panel */ .ag-mega__featured { display: block; padding: 1px; border-radius: var(--ag-radius); background: linear-gradient(125deg, rgba(129,165,187,.85) 0%, rgba(29,90,131,.35) 100%); text-decoration: none; } .ag-mega__featured-inner { border-radius: calc(var(--ag-radius) - 1px); overflow: hidden; background: linear-gradient(341deg, rgba(129,165,187,.11) 13.89%, rgba(29,90,131,.04) 65.82%), linear-gradient(0deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.02) 100%); } .ag-mega__featured img { display: block; width: 100%; height: 236px; object-fit: cover; border-radius: var(--ag-radius); } .ag-mega__featured-body { padding: 1.5rem; } .ag-mega__featured-title { margin: 0 0 .5rem; font-family: var(--ag-font-sans); font-size: 1.375rem; line-height: 1.2; font-weight: 400; color: #fff; } .ag-mega__featured-sub { margin: 0; font-family: var(--ag-font-sans); font-size: 1rem; line-height: 1.5; color: var(--ag-neutral-darker); } /* -- 3e. Burger -- */ .ag-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; background: #fff; border: 0; border-radius: var(--ag-radius); cursor: pointer; } @media (min-width: 1024px) { .ag-burger { display: none; } } .ag-burger span { display: block; height: 2px; width: 100%; background: #000; border-radius: 2px; transition: transform var(--ag-ease), opacity var(--ag-ease); } .ag-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ag-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .ag-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* -- 3f. Mobile drawer -- */ .ag-drawer { position: absolute; top: 100%; inset-inline: 0; z-index: 50; height: calc(100dvh - var(--ag-header-measured, var(--ag-header-h))); background: var(--ag-bg-1); display: none; } .ag-drawer.is-open { display: block; } @media (min-width: 1024px) { .ag-drawer { display: none !important; } } /* Drawer gutters follow the source: 26px, stepping to 64px at 640px. */ .ag-drawer__scroll { height: 100%; overflow-y: auto; padding: 2rem var(--ag-gutter); } @media (min-width: 640px) { .ag-drawer__scroll { padding: 3rem 4rem; } } .ag-drawer .ag-btn { width: 100%; justify-content: center; margin-top: 2rem; } /* No dividers between closed items — the source only draws a rule above the OPEN one, and turns that label red. */ .ag-drawer__item { border-top: 0; } .ag-drawer__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.5rem 0; background: none; border: 0; border-top: 1px solid transparent; cursor: pointer; font-family: var(--ag-font-mono); font-size: 1rem; line-height: 1.5; font-weight: 500; color: #fff; transition: color var(--ag-ease); } .ag-drawer__toggle svg { width: 16px; height: 16px; flex: none; transition: transform var(--ag-ease); } .ag-drawer__item.is-open > .ag-drawer__toggle { color: var(--ag-primary); border-top-color: var(--ag-surface); } .ag-drawer__item.is-open > .ag-drawer__toggle svg { transform: rotate(180deg); } /* Open panel is a raised card, not a bare list. */ .ag-drawer__panel { display: none; } .ag-drawer__item.is-open > .ag-drawer__panel { display: block; background: var(--ag-surface-dark); border-radius: var(--ag-radius); padding: 2rem; margin-bottom: 2rem; } /* The panel holds a clone of the desktop mega grid — collapse it to one column so every .ag-mega__* rule carries over unchanged. */ .ag-drawer .ag-mega__grid { grid-template-columns: 1fr; gap: 2rem; } .ag-drawer .ag-mega__col--wide { grid-column: span 1; } .ag-drawer .ag-mega__menu, .ag-drawer .ag-mega__menu--2col { grid-template-columns: 1fr; } .ag-drawer .ag-mega__featured img { height: 180px; } /* Search / Customer Support, mirrored into the drawer from the utility bar */ .ag-drawer__utility { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-top: 2rem; } .ag-drawer__utility a { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ag-font-mono); font-size: 1rem; line-height: 1.5; color: #fff; text-decoration: none; } .ag-drawer__utility a:hover { color: var(--ag-primary); } .ag-drawer__utility svg { width: 20px; height: 20px; flex: none; } /* the language list is still a plain link list */ .ag-drawer__item--lang .ag-drawer__panel a { display: block; padding: .5rem 0; font-family: var(--ag-font-sans); font-size: .875rem; color: var(--ag-neutral-darker); text-decoration: none; } .ag-drawer__item--lang .ag-drawer__panel a:hover, .ag-drawer__item--lang .ag-drawer__panel a[aria-current="true"] { color: #fff; } /* ============================================================ 4. FOOTER ============================================================ */ .ag-footer { position: relative; overflow: hidden; background: var(--ag-bg-1); border-top: 4px solid var(--ag-primary); /* the red rule */ color: #fff; font-family: var(--ag-font-sans); padding-block: 4rem; } @media (min-width: 640px) { .ag-footer { padding-block: 3.5rem; } } @media (min-width: 1024px) { .ag-footer { padding-block: 8rem; } } .ag-footer__top { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--ag-surface); } @media (min-width: 768px) { .ag-footer__top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0; } } /* Production renders the footer logo at the same 160x52 as the header. */ .ag-footer__logo { display: block; } .ag-footer__logo img { display: block; height: 52px; width: auto; object-fit: contain; } .ag-footer__social { display: flex; align-items: center; gap: 1.5rem; } @media (min-width: 768px) { .ag-footer__social { gap: 2rem; } } .ag-footer__social a { color: #fff; display: inline-flex; transition: color var(--ag-ease); } .ag-footer__social a:hover { color: var(--ag-primary); } .ag-footer__social svg { width: 24px; height: 24px; } /* -- nav columns -- */ .ag-footer__nav { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .ag-footer__nav { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1024px) { .ag-footer__nav { grid-template-columns: repeat(4, minmax(0,1fr)); } } .ag-footer__col { display: flex; flex-direction: column; gap: 1.5rem; } /* Production's footer is 7 columns over a 4-track grid (8 tracks, 2 rows). The FactoryLogix column is the wide one. */ .ag-footer__col--wide { grid-column: span 1; } @media (min-width: 1024px) { .ag-footer__col--wide { grid-column: span 2; } } .ag-footer__heading { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 0 1rem; padding: 0; background: none; border: 0; font-family: var(--ag-font-mono); font-size: 1rem; font-weight: 400; line-height: 1.5; color: #fff; cursor: pointer; /* accordion on mobile */ } @media (min-width: 1024px) { .ag-footer__heading { cursor: default; } } .ag-footer__heading svg { width: 16px; height: 16px; transition: transform var(--ag-ease); } @media (min-width: 1024px) { .ag-footer__heading svg { display: none; } } .ag-footer__group.is-open .ag-footer__heading svg { transform: rotate(180deg); } .ag-footer__list { list-style: none; margin: 0; padding: 0; display: none; } .ag-footer__group.is-open .ag-footer__list { display: block; } @media (min-width: 1024px) { .ag-footer__list { display: block; } } /* The wide FactoryLogix column splits its list into two CSS columns at lg, matching production's `lg:columns-2`. */ @media (min-width: 1024px) { .ag-footer__list--2col { columns: 2; column-gap: 1rem; } .ag-footer__list--2col li { break-inside: avoid; } } .ag-footer__list li { padding-bottom: 1.5rem; } @media (min-width: 1024px) { .ag-footer__list li { padding-bottom: .5rem; } } .ag-footer__list a { font-family: var(--ag-font-sans); font-size: .875rem; line-height: 1.43; color: var(--ag-neutral-darker); text-decoration: none; } .ag-footer__list a:hover { color: #fff; text-decoration: underline; } /* -- bottom bar -- */ .ag-footer__bottom { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--ag-surface); font-size: .875rem; color: var(--ag-neutral-darker); } @media (min-width: 768px) { .ag-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } } .ag-footer__legal { display: flex; gap: 1.5rem; } .ag-footer__legal a { color: var(--ag-neutral-darker); text-decoration: none; } .ag-footer__legal a:hover { color: #fff; text-decoration: underline; } /* ---- 5. Focus states (kept visible for a11y) --------------- */ /* style-jj.css has a global `* { outline: 0 !important }`, which was silently removing every focus ring inside the chrome. !important is the only way past an !important, so this is deliberate rather than lazy. */ .ag-header :focus-visible, .ag-footer :focus-visible { outline: 2px solid var(--ag-primary) !important; outline-offset: 2px; }