/* ============================================================ 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; } :root { --ag-field-bg: #202B31; } /* ---- 1. Page canvas -------------------------------------- */ /* The legacy theme sets `body { font: 300 HK Grotesk; background: #fff }`. Landing pages are dark, so the white showed through anywhere a module didn't paint its own background. Only background-color and the inherited font live here. Both are safe at body level: the chrome declares its own background and font-family, and a declared value always beats an inherited one. */ body.hs-landing-page { background-color: var(--ag-bg-1); font-family: var(--ag-font-sans); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- 2. Page content ------------------------------------- */ .hs-landing-page .body-container-wrapper { color: var(--ag-neutral-darker); font-size: 1rem; line-height: 1.5; } .hs-landing-page .body-container-wrapper h1, .hs-landing-page .body-container-wrapper h2, .hs-landing-page .body-container-wrapper h3, .hs-landing-page .body-container-wrapper h4, .hs-landing-page .body-container-wrapper h5, .hs-landing-page .body-container-wrapper h6 { font-family: var(--ag-font-sans); color: #fff; } /* Heading scale, read from the main site's own theme tokens (--h1-font-size / --h1-font-weight / …), not eyeballed: weight size line-height H1 700 48px 1.2 H2 400 48px 1.3 H3 400 40px 1.4 H4 400 32px 1.3 H5 400 26px 1.3 H6 400 22px 1.2 ONLY H1 is bold. H2 is the same 48px as H1 but Regular — the big, light section heading is a deliberate part of the design. IMPORTANT — why H2..H6 are wrapped in :where() HubSpot modules size their own headings: a form panel title, a card heading, a hero subhead. Applied at normal specificity, this scale overrode all of them — on /factorylogix-overview it took the form panel title from 700/24px to 400/40px and quadrupled its height (28px -> 112px). :where() contributes ZERO specificity, so these rules replace the legacy theme's bare-element defaults but lose to any module rule that has an opinion. H1 is deliberately left at normal specificity: there's one per page, it's the page title, and the legacy 50px/75px is the single worst offender (a 1.5 leading on a display heading). */ .hs-landing-page .body-container-wrapper h1 { font-weight: 700; font-size: 3rem; line-height: 1.2; } :where(.hs-landing-page .body-container-wrapper) h2 { font-weight: 400; font-size: 3rem; line-height: 1.3; } :where(.hs-landing-page .body-container-wrapper) h3 { font-weight: 400; font-size: 2.5rem; line-height: 1.4; } :where(.hs-landing-page .body-container-wrapper) h4 { font-weight: 400; font-size: 2rem; line-height: 1.3; } :where(.hs-landing-page .body-container-wrapper) h5 { font-weight: 400; font-size: 1.625rem; line-height: 1.3; } :where(.hs-landing-page .body-container-wrapper) h6 { font-weight: 400; font-size: 1.375rem; line-height: 1.2; } /* Same reasoning as the heading scale: :where() so a module that sizes its own copy keeps doing so. Colour and family stay at full strength below. */ :where(.hs-landing-page .body-container-wrapper) :is(p, li) { font-family: var(--ag-font-sans); font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--ag-neutral-darker); } /* Links inside rich-text content only — NOT a blanket `a` rule. A blanket rule is what broke the nav and footer in v1. */ .hs-landing-page .body-container-wrapper .hs_cos_wrapper_type_rich_text a { color: var(--ag-primary); text-decoration: underline; } .hs-landing-page .body-container-wrapper .hs_cos_wrapper_type_rich_text a:hover { color: var(--ag-primary-dark); } /* ---- 3. Form fields -------------------------------------- */ /* NB: these target LEGACY HubSpot form markup (.hs-form / .hs-input). www.aiscorp.com uses the newer .hsfc-Form markup — different class names entirely, so the two cannot share a stylesheet. */ .hs-landing-page .body-container-wrapper .hs-form-field { margin-bottom: 1.25rem; } /* Labels: Geist Mono 500 / 14px / neutral-darker, as on the main site. */ .hs-landing-page .body-container-wrapper .hs-form-field > label, .hs-landing-page .body-container-wrapper .hs-form-field > label span { font-family: var(--ag-font-mono); font-size: .875rem; line-height: 1.5; font-weight: 500; color: var(--ag-neutral-darker); } .hs-landing-page .body-container-wrapper .hs-form-field > label { display: block; margin-bottom: .5rem; } .hs-landing-page .body-container-wrapper .hs-form-required { color: var(--ag-neutral-darker); } /* Text inputs, selects and textareas. Checkboxes and radios also carry .hs-input, so they're excluded — a 43px tall checkbox helps nobody. */ .hs-landing-page .body-container-wrapper .hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { box-sizing: border-box; width: 100%; font-family: var(--ag-font-sans); font-size: 1rem; line-height: 1.5; font-weight: 400; color: var(--ag-neutral-darker); background-color: var(--ag-field-bg); border: 1px solid var(--ag-secondary-light); border-radius: var(--ag-radius); padding: 9px 16px 8px; transition: outline-color var(--ag-ease); } .hs-landing-page .body-container-wrapper .hs-input::placeholder { color: #fff; opacity: 1; } .hs-landing-page .body-container-wrapper textarea.hs-input { min-height: 144px; resize: vertical; } /* The native select arrow doesn't survive a dark fill; draw our own. */ .hs-landing-page .body-container-wrapper select.hs-input { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8B8B8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; } /* Focus ring matches the main site: 2px primary, no offset. */ .hs-landing-page .body-container-wrapper .hs-input:focus, .hs-landing-page .body-container-wrapper .hs-input:focus-visible { outline: 2px solid var(--ag-primary); outline-offset: 0; border-color: var(--ag-secondary-light); } /* Checkbox / radio rows */ .hs-landing-page .body-container-wrapper .inputs-list { list-style: none; margin: 0; padding: 0; } .hs-landing-page .body-container-wrapper .inputs-list > li { margin-bottom: .5rem; } .hs-landing-page .body-container-wrapper .hs-form-booleancheckbox-display, .hs-landing-page .body-container-wrapper .hs-form-checkbox-display, .hs-landing-page .body-container-wrapper .hs-form-radio-display { display: flex; align-items: flex-start; gap: .5rem; font-family: var(--ag-font-sans); font-size: .875rem; color: var(--ag-neutral-darker); } .hs-landing-page .body-container-wrapper .hs-input[type="checkbox"], .hs-landing-page .body-container-wrapper .hs-input[type="radio"] { accent-color: var(--ag-primary); margin-top: .2rem; } /* Help text and validation */ .hs-landing-page .body-container-wrapper .hs-field-desc { font-family: var(--ag-font-sans); font-size: .875rem; color: var(--ag-surface-lighter); margin: .25rem 0 0; } .hs-landing-page .body-container-wrapper .hs-error-msg, .hs-landing-page .body-container-wrapper .hs-error-msgs label { font-family: var(--ag-font-sans); font-size: .875rem; color: var(--ag-primary); } .hs-landing-page .body-container-wrapper .hs-input.invalid, .hs-landing-page .body-container-wrapper .hs-input.error { border-color: var(--ag-primary); } /* ---- 4. Submit button ------------------------------------ */ /* The legacy rule is `input.hs-button.primary.large` (0,3,1), setting the old #CF333B red, square corners and 5px/10px padding. Ours reaches (0,5,1) inside the wrapper, so no !important is needed. */ .hs-landing-page .body-container-wrapper .hs-form input.hs-button, .hs-landing-page .body-container-wrapper .hs-form input.hs-button.primary.large { display: inline-flex; align-items: center; justify-content: center; width: auto; font-family: var(--ag-font-mono); font-size: 1rem; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: #fff; background-color: var(--ag-primary); border: 0; border-radius: var(--ag-radius); padding: 12px 16px; cursor: pointer; transition: background-color var(--ag-ease); } .hs-landing-page .body-container-wrapper .hs-form input.hs-button:hover, .hs-landing-page .body-container-wrapper .hs-form input.hs-button.primary.large:hover { background-color: var(--ag-primary-dark); } .hs-landing-page .body-container-wrapper .hs-form input.hs-button:focus-visible { outline: 2px solid var(--ag-primary); outline-offset: 2px; } /* Post-submit thank-you text */ .hs-landing-page .body-container-wrapper .submitted-message, .hs-landing-page .body-container-wrapper .hs-richtext { font-family: var(--ag-font-sans); color: var(--ag-neutral-darker); } /* ============================================================ ONE THING THIS CSS CANNOT FIX: hard-coded colours in content .hs-landing-page .body-container-wrapper .hs_cos_wrapper_type_rich_text [style*="color"] { color: inherit !important; } ============================================================ */