/* Theme Name: Genasys Child Template: ollie Description: Genasys design system on the Ollie parent theme. Version: 1.0.0 */ /* §1 in STYLE-NOTES.md (repo root) */ /* §304 in STYLE-NOTES.md (repo root) */ html, body { overflow-x: clip; } /* §2 in STYLE-NOTES.md (repo root) */ .gn-logos-heading, .gn-carousel-section-heading, .gn-awards-heading, .gn-compare-heading, .gn-proof-header h2, .gn-faq-heading, .gn-stm-head h2 { font-family: var(--wp--preset--font-family--heading); font-size: var(--gn-section-heading); font-weight: 700; line-height: 1.1; max-width: 70%; -webkit-font-smoothing: antialiased; } .gn-faq-heading { color: var(--wp--preset--color--primary); margin: 0 auto; } /* §3 in STYLE-NOTES.md (repo root) */ .gn-faq-heading span { color: var(--wp--preset--color--accent); } .gn-faq-schema { background: linear-gradient(180deg, var(--neutral-50) 50%, var(--wp--preset--color--white) 100%); padding-top: 64px; padding-bottom: 64px; /* §4 in STYLE-NOTES.md (repo root) */ width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-inline: max(20px, calc(50vw - 630px)); } .gn-faq-head { max-width: 1200px; margin-left: auto; margin-right: auto; text-align: center; padding-bottom: 32px; } .gn-faq-items { max-width: 900px; margin-left: auto; margin-right: auto; } /* §5 in STYLE-NOTES.md (repo root) */ .gn-faq-schema .wp-block-details { background: var(--wp--preset--color--white); border: 0; border-radius: 12px; overflow: hidden; padding: 0; box-shadow: 0 4px 20px var(--shadow-soft); transition: box-shadow 0.3s ease; } .gn-faq-schema .wp-block-details + .wp-block-details { margin-top: 16px; } .gn-faq-schema .wp-block-details:hover { box-shadow: 0 8px 28px var(--shadow-mid); } .gn-faq-schema .wp-block-details[open] { box-shadow: 0 10px 28px var(--shadow-mid); } .gn-faq-schema .wp-block-details > summary { display: flex; align-items: center; gap: 20px; padding: 24px; font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 17px; line-height: 1.45; color: var(--wp--preset--color--ink); cursor: pointer; list-style: none; } .gn-faq-schema .wp-block-details > summary::-webkit-details-marker { display: none; } /* The tile is the coloured square; the icon is painted on top of it as a background image, which keeps it to one pseudo-element per side. */ .gn-faq-schema .wp-block-details > summary::before { content: ""; flex: 0 0 48px; height: 48px; border-radius: 10px; background-color: var(--wp--preset--color--primary); background-position: center; background-repeat: no-repeat; background-size: 24px 24px; transition: background-color 0.3s ease; } .gn-faq-schema .wp-block-details[open] > summary::before { background-color: var(--wp--preset--color--ink); } .gn-faq-schema .wp-block-details > summary::after { content: ""; flex: 0 0 20px; height: 20px; margin-left: auto; background-position: center; background-repeat: no-repeat; background-size: 20px 20px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .gn-faq-schema .wp-block-details[open] > summary::after { transform: rotate(180deg); } /* The answer aligns under the question text, past the tile, as live does. */ .gn-faq-schema .wp-block-details > :not(summary) { margin: 0; padding: 0 24px 0 92px; line-height: 1.6; } .gn-faq-schema .wp-block-details > :not(summary):last-child { padding-bottom: 30px; } /* `margin: 0` above is what stops the first paragraph pushing away from the question; consecutive paragraphs still need their own rhythm back. */ .gn-faq-schema .wp-block-details > :not(summary) + :not(summary) { margin-top: 16px; } .gn-faq-schema .wp-block-details > summary + * { padding-top: 4px; } .gn-faq-schema .wp-block-details p { line-height: 1.6; } .gn-faq-schema .wp-block-details a { color: var(--wp--preset--color--primary); } @media (max-width: 680px) { .gn-faq-schema .wp-block-details > summary { gap: 16px; padding: 16px; } .gn-faq-schema .wp-block-details > summary::before { flex-basis: 40px; height: 40px; } .gn-faq-schema .wp-block-details > :not(summary) { padding-left: 16px; padding-right: 16px; } } /* Scoped, never a bare `*` rule: an unscoped reduced-motion block froze content reveals site-wide once already. */ @media (prefers-reduced-motion: no-preference) { .gn-faq-schema .wp-block-details[open] > :not(summary) { animation: gnFaqReveal 0.25s ease-out both; } } @keyframes gnFaqReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* §6 in STYLE-NOTES.md (repo root) */ .gn-faq-schema .wp-block-details > summary::before { background-image: url("data:image/svg+xml,"); } .gn-faq-schema .gn-faq--clock > summary::before { background-image: url("data:image/svg+xml,"); } .gn-faq-schema .gn-faq--globe > summary::before { background-image: url("data:image/svg+xml,"); } .gn-faq-schema .gn-faq--people > summary::before { background-image: url("data:image/svg+xml,"); } .gn-faq-schema .gn-faq--tech > summary::before { background-image: url("data:image/svg+xml,"); } .gn-faq-schema .gn-faq--cost > summary::before { background-image: url("data:image/svg+xml,"); } .gn-faq-schema .gn-faq--setup > summary::before { background-image: url("data:image/svg+xml,"); } .gn-faq-schema .gn-faq--status > summary::before { background-image: url("data:image/svg+xml,"); } .gn-faq-schema .gn-faq--security > summary::before { background-image: url("data:image/svg+xml,"); } /* §7 in STYLE-NOTES.md (repo root) */ /* §8 in STYLE-NOTES.md (repo root) */ .gn-faq-schema .gn-faq--link > summary::before { background-image: url("data:image/svg+xml,"); } .gn-faq-schema .gn-faq--sliders > summary::before { background-image: url("data:image/svg+xml,"); } .gn-faq-schema .gn-faq--cycle > summary::before { background-image: url("data:image/svg+xml,"); } .gn-faq-schema .gn-faq--bolt > summary::before { background-image: url("data:image/svg+xml,"); } .gn-faq-schema .wp-block-details > summary::after { /* §9 in STYLE-NOTES.md (repo root) */ -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 20px 20px; mask-size: 20px 20px; background-color: var(--neutral-400); } /* ===== Header ===== */ /* §10 in STYLE-NOTES.md (repo root) */ .site-header { position: sticky; top: 0; z-index: 1000; } /* §11 in STYLE-NOTES.md (repo root) */ .gn-header-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 64px; pointer-events: none; z-index: -1; } .gn-site-header { /* §12 in STYLE-NOTES.md (repo root) */ background: var(--wp--preset--color--white); /* §13 in STYLE-NOTES.md (repo root) */ position: relative; z-index: 1000; /* §14 in STYLE-NOTES.md (repo root) */ padding-top: 20px; padding-bottom: 20px; transition: padding 0.22s ease, background-color 0.22s ease; } /* §15 in STYLE-NOTES.md (repo root) */ .gn-site-header.gn-condensed { padding-top: 12px; padding-bottom: 12px; /* §16 in STYLE-NOTES.md (repo root) */ background: transparent; } .gn-header-inner { /* §17 in STYLE-NOTES.md (repo root) */ padding-left: 20px; padding-right: 20px; /* §18 in STYLE-NOTES.md (repo root) */ position: relative; transition: padding 0.22s ease; } /* §19 in STYLE-NOTES.md (repo root) */ .gn-header-inner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: transparent; box-shadow: none; transition: background-color 0.22s ease, box-shadow 0.22s ease; } /* §20 in STYLE-NOTES.md (repo root) */ /* §308 in STYLE-NOTES.md (repo root): nothing in the header moves when it condenses */ .gn-site-header.gn-condensed .gn-header-inner { padding-top: 8px; padding-bottom: 8px; } .gn-site-header.gn-condensed .gn-header-inner::before { content: ""; position: absolute; /* The pill is drawn around the controls, which stay exactly where they were: 8px beyond the button on the right and 18px beyond the logo on the left (Ed, 21 September: nudge the logo in by about 10px, which the pill does by growing left, so the logo itself never moves; a second 4px on the same day). */ inset: 0 12px 0 -2px; z-index: -1; background: rgb(from var(--genasys-white) r g b / 0.85); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 12px 32px var(--shadow-mid); border-radius: 999px; } /* §22 in STYLE-NOTES.md (repo root) */ @media (max-width: 1024px) { /* §25 in STYLE-NOTES.md (repo root) */ .gn-site-header.gn-condensed .gn-header-inner .wp-block-image img { width: 110px !important; } } /* §26 in STYLE-NOTES.md (repo root) */ .gn-site-header.gn-condensed .gn-header-inner .wp-block-image img { width: 150px; } /* The wordmark's box sat 3px above the button's centre line, so it looked high in the pill. Same nudge in both states, so nothing moves when the header condenses. */ @media (min-width: 1025px) { .gn-header-inner .wp-block-image { transform: translateY(3px); } } /* §362 in STYLE-NOTES.md (repo root) */ @media (max-width: 1024px) { .gn-header-inner .wp-block-image a { display: block; } } /* Floating version only (Ed, 21 September): the wordmark looks better a further 3px right and 3px lower. */ @media (min-width: 1025px) { .gn-site-header.gn-condensed .gn-header-inner .wp-block-image { transform: translate(3px, 4px); } } /* §27 in STYLE-NOTES.md (repo root) */ @media (prefers-reduced-motion: reduce) { .gn-site-header, .gn-header-inner { transition: none; } } /* §28 in STYLE-NOTES.md (repo root) */ .gn-header-inner { max-width: 1140px; margin-left: auto; margin-right: auto; /* §29 in STYLE-NOTES.md (repo root) */ align-items: center; } .gn-site-nav, .gn-site-nav .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--body); font-size: 16px; font-weight: 400; color: var(--wp--preset--color--ink); } .gn-site-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); } .wp-block-navigation.gn-site-nav .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { background-color: var(--wp--preset--color--white) !important; background-image: none !important; backdrop-filter: none !important; border-radius: 8px; box-shadow: 0 12px 32px var(--shadow-mid); border: none !important; /* §30 in STYLE-NOTES.md (repo root) */ padding: 16px 0; min-width: 240px; opacity: 1; } .wp-block-navigation.gn-site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 20px; font-size: 15px; color: var(--wp--preset--color--ink) !important; } .wp-block-navigation.gn-site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--white) !important; color: var(--wp--preset--color--accent) !important; } /* §31 in STYLE-NOTES.md (repo root) */ .wp-block-navigation.gn-site-nav .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { padding: 16px 0; } /* §32 in STYLE-NOTES.md (repo root) */ .gn-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { font-weight: 700; } /* §33 in STYLE-NOTES.md (repo root) */ .gn-site-nav .wp-block-navigation-submenu:nth-of-type(2) .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--cta); } .gn-site-nav .wp-block-navigation-submenu:nth-of-type(3) .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--cta-hover); } .gn-site-nav .wp-block-navigation-submenu:nth-of-type(4) .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--purple); } .gn-site-nav .wp-block-navigation-submenu:nth-of-type(5) .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--accent); } /* §34 in STYLE-NOTES.md (repo root) */ .gn-cta-button .wp-block-button__link { color: var(--wp--preset--color--white); text-decoration: none; } .gn-cta-button .wp-block-button__link:hover { color: var(--wp--preset--color--white); } /* Mobile nav overlay */ .gn-site-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--white); } .gn-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); font-size: 20px; } .gn-site-nav .wp-block-navigation__responsive-container-open, .gn-site-nav .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--ink); } /* §35 in STYLE-NOTES.md (repo root) */ .gn-site-nav .wp-block-navigation__responsive-container-open svg { display: none; } .gn-site-nav .wp-block-navigation__responsive-container-open { position: relative; } /* §425: a 44px tap area round the small icon, taking no room, so the header keeps its height */ .gn-site-nav .wp-block-navigation__responsive-container-open::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .gn-site-nav .wp-block-navigation__responsive-container-open::before { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; transform: translate(-50%, -50%); } /* §36 in STYLE-NOTES.md (repo root) */ .gn-site-header.gn-condensed .wp-block-navigation__responsive-container-open { width: 40px; height: 40px; border-radius: 50%; background: var(--wp--preset--color--cta); color: var(--wp--preset--color--white); } .gn-site-header.gn-condensed .wp-block-navigation__responsive-container-open:hover { background: var(--wp--preset--color--cta-hover); } /* §37 in STYLE-NOTES.md (repo root) */ @media (min-width: 1025px) { .gn-site-nav .gn-nav-contact { display: none; } } /* §38 in STYLE-NOTES.md (repo root) */ .gn-site-nav .wp-block-navigation__responsive-container.is-menu-open .gn-nav-contact { width: auto !important; align-self: flex-start; margin-bottom: 16px; } .gn-site-nav .wp-block-navigation__responsive-container.is-menu-open .gn-nav-contact .wp-block-navigation-item__content { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 40px; background: var(--wp--preset--color--cta); color: var(--wp--preset--color--white); border-radius: 50px; font-size: 15px; font-weight: 700; outline: none; } /* §39 in STYLE-NOTES.md (repo root) */ .gn-site-nav .wp-block-navigation__responsive-container.is-menu-open .gn-nav-contact .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--cta-hover); color: var(--wp--preset--color--white); outline: none; box-shadow: none; } /* §40 in STYLE-NOTES.md (repo root) */ @media (min-width: 600px) and (max-width: 1024px) { .gn-site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; } .gn-site-nav .wp-block-navigation__responsive-container-open { display: flex; } } /* §41 in STYLE-NOTES.md (repo root) */ /* §42 in STYLE-NOTES.md (repo root) */ @media (max-width: 1024px) { .gn-site-header .wp-block-buttons { display: none; } } /* §43 in STYLE-NOTES.md (repo root) */ .gn-cta-button .wp-block-button__link, .brand-btn, .gn-jobs-panel .gn-job-apply, .gn-cta-btn .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; background: var(--wp--preset--color--cta); font-family: var(--wp--preset--font-family--body); font-weight: 700; border: none; border-radius: 50px; white-space: nowrap; flex-shrink: 0; transition: background 0.3s ease; } .gn-cta-button .wp-block-button__link:hover, .brand-btn:hover, .gn-jobs-panel .gn-job-apply:hover, .gn-cta-btn .wp-block-button__link:hover { background: var(--wp--preset--color--cta-hover); } /* §44 in STYLE-NOTES.md (repo root) */ .brand-btn, .gn-jobs-panel .gn-job-apply { color: var(--wp--preset--color--white) !important; /* 15px, matching live's pill (Gary, 24 August): the padding was always identical at 16px 40px, so what read as "bigger buttons" was this restatement of theme.json's old 16.5. */ font-size: 15px; text-decoration: none !important; cursor: pointer; } .brand-btn svg { transition: transform 0.3s ease; } .brand-btn:hover svg { transform: translateX(4px); } /* §45 in STYLE-NOTES.md (repo root) */ input:not([type="submit"]):not([type="radio"]), select, textarea { border: solid 1px var(--neutral-300); } input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: var(--wp--preset--color--primary); } select { -webkit-appearance: auto; appearance: auto; } ::placeholder { color: var(--text-muted); opacity: 0.75; } /* Inline code. Ollie tints it with `tertiary`, also deleted; 42 occurrences across two items currently render with no background at all. */ *:not(.wp-block-code) > code { background-color: var(--neutral-100); } /* ===== Footer ===== */ .gn-site-footer { background: linear-gradient(180deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--ink) 100%); color: rgb(from var(--genasys-white) r g b / 0.7); font-family: var(--wp--preset--font-family--body); font-size: 14px; } .gn-site-footer p, .gn-site-footer a { color: rgb(from var(--genasys-white) r g b / 0.7); } /* §46 in STYLE-NOTES.md (repo root) */ .gn-site-footer a:hover { color: var(--wp--preset--color--cta-hover); } .gn-ft-top { max-width: 1140px; margin-left: auto; margin-right: auto; border-bottom: 1px solid rgb(from var(--genasys-white) r g b / 0.12); padding-bottom: 40px; margin-bottom: 0; } /* §47 in STYLE-NOTES.md (repo root) */ .gn-ft-logo-img img { height: 28px; width: auto; opacity: 0.9; } .gn-ft-ldlogo-img img { height: 32px; width: auto; opacity: 0.85; } .gn-ft-email { display: inline-flex; align-items: center; gap: 8px; } .gn-ft-email svg { flex: 0 0 auto; color: inherit; } .gn-ft-email a { font-weight: 700; } .gn-ft-title { font-size: 13px; /* §48 in STYLE-NOTES.md (repo root) */ line-height: 1.5; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--white); margin-bottom: 16px; } .gn-ft-title-sub { margin-top: 24px; } .gn-ft-links { list-style: none; margin: 0; padding: 0; } .gn-ft-links li { margin: 0 0 10px; } .gn-ft-socials { margin-top: 20px; justify-content: flex-start; } .gn-ft-socials .wp-social-link { background: rgb(from var(--genasys-white) r g b / 0.06); border-radius: 8px; width: 36px; height: 36px; } .gn-ft-socials .wp-social-link:hover { background: var(--wp--preset--color--accent); } /* §49 in STYLE-NOTES.md (repo root) */ .gn-ft-ldbtn-icon { flex-shrink: 0; } .gn-ft-bottom { max-width: 1140px; margin-left: auto; margin-right: auto; padding-top: 24px; font-size: 13px; color: rgb(from var(--genasys-white) r g b / 0.7); } .gn-ft-bottom p { color: rgb(from var(--genasys-white) r g b / 0.7); margin: 0; } .gn-ft-legal p { margin: 0; } .gn-ft-legal a { font-size: 13px; color: rgb(from var(--genasys-white) r g b / 0.7); } /* §50 in STYLE-NOTES.md (repo root) */ div[class*="wp-block-"] figcaption, figcaption.wp-element-caption { color: var(--text-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.5; } /* §51 in STYLE-NOTES.md (repo root) */ @media (max-width: 781px) { /* The bottom row stacks on small screens, so the button centres with everything else rather than hanging off one edge. */ /* §52 in STYLE-NOTES.md (repo root) */ .gn-ft-legal { column-gap: 16px; } /* §53 in STYLE-NOTES.md (repo root) */ /* §54 in STYLE-NOTES.md (repo root) */ .gn-site-footer { padding-bottom: 120px !important; } } /* §55 in STYLE-NOTES.md (repo root) */ .gn-ft-links a, .gn-ft-legal a { padding-top: 4px; padding-bottom: 4px; } /* §56 in STYLE-NOTES.md (repo root) */ .wp-block-navigation-submenu__toggle.wp-block-navigation__submenu-icon { position: relative; } .wp-block-navigation-submenu__toggle.wp-block-navigation__submenu-icon::after { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 26px; height: 26px; } /* Footer links: no underline anywhere (Ollie's global styles default links to underlined; this section's design has never used underlines). */ .gn-site-footer a, .gn-ft-links a, .gn-ft-legal a, .gn-ft-ldbtn .wp-block-button__link { text-decoration: none !important; } /* §57 in STYLE-NOTES.md (repo root) */ @media (max-width: 1024px) { /* §58 in STYLE-NOTES.md (repo root) */ .gn-ft-top.wp-block-columns { flex-wrap: wrap !important; } /* §425: as specific as core's stack-on-mobile rule, or it wins and the groups stack one per row */ .gn-ft-top.wp-block-columns > .wp-block-column { flex-basis: calc(50% - 20px) !important; flex-grow: 0 !important; } .gn-ft-top.wp-block-columns > .gn-ft-brand.wp-block-column, .gn-ft-top.wp-block-columns > .wp-block-column:last-child { flex-basis: 100% !important; } .gn-ft-bottom { flex-direction: column; align-items: flex-start !important; gap: 12px; } } /* §59 in STYLE-NOTES.md (repo root) */ /* §60 in STYLE-NOTES.md (repo root) */ .gn-cta-band { position: relative; padding: 80px 0 0; background: linear-gradient(180deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 32%, #f4f6fa 40%, #dce4ef 48%, #b8c8de 55%, var(--wp--preset--color--pale-steel) 60%, #7a9cc5 66%, var(--wp--preset--color--steel) 72%, #3966b0 78%, #1d4f9e 85%, var(--wp--preset--color--primary) 92%, var(--wp--preset--color--primary) 100%); overflow: hidden; text-align: center; margin-bottom: -40px !important; } /* §61 in STYLE-NOTES.md (repo root) */ .gn-cta-band:not(.alignfull) { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } .gn-cta-band * { box-sizing: border-box; } /* §62 in STYLE-NOTES.md (repo root) */ .gn-cta-band .brand-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; background: var(--wp--preset--color--cta); color: var(--wp--preset--color--white); border-radius: 999px; font-weight: 700; text-decoration: none; transition: background 0.2s ease; } .gn-cta-band .brand-btn:hover { background: var(--wp--preset--color--cta-hover); } .gn-cta-band .brand-btn svg { width: 14px; height: 14px; transition: transform 0.2s ease; } /* §63 in STYLE-NOTES.md (repo root) */ .gn-cta-band .gn-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* §64 in STYLE-NOTES.md (repo root) */ .gn-cta-band .gn-cta-body a { color: var(--wp--preset--color--primary); text-decoration: underline; } .gn-cta-band .gn-cta-body a:hover { color: var(--wp--preset--color--cta); } .gn-cta-band * { box-sizing: border-box; } .gn-cta-base { position: relative; z-index: 1; width: 100%; height: 30px; background: var(--wp--preset--color--primary); margin: 0; padding: 0; } .gn-cta-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; } .gn-cta-particle { position: absolute; border-radius: 50%; opacity: 0; animation: gnCtaRise linear infinite; } @keyframes gnCtaRise { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 5% { opacity: 0.7; } 50% { opacity: 0.35; } 75% { opacity: 0.1; } 100% { transform: translateY(-70vh) scale(1); opacity: 0; } } /* §303 in STYLE-NOTES.md (repo root) */ .gn-cta-frags { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 64px); pointer-events: none; z-index: 1; overflow: hidden; } .gn-cta-frag { position: absolute; background: rgb(from var(--genasys-white) r g b / 0.06); border: 1px solid rgb(from var(--genasys-white) r g b / 0.12); border-radius: 12px; pointer-events: none; } .gn-cta-frag-1 { width: 140px; height: 90px; bottom: 34%; left: 50%; margin-left: -490px; animation: gnFragFloat 18s ease-in-out infinite; } .gn-cta-frag-1 .gn-frag-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 12px 12px 0 0; background: rgb(from var(--genasys-sea-green) r g b / 0.3); } .gn-cta-frag-1 .gn-frag-lines { position: absolute; top: 18px; left: 14px; } .gn-cta-frag-1 .gn-frag-line { height: 5px; border-radius: 3px; background: rgb(from var(--genasys-white) r g b / 0.12); margin-bottom: 7px; } .gn-cta-frag-1 .gn-frag-l1 { width: 70px; } .gn-cta-frag-1 .gn-frag-l2 { width: 90px; } .gn-cta-frag-1 .gn-frag-l3 { width: 55px; } .gn-cta-frag-1 .gn-frag-pill { position: absolute; bottom: 12px; left: 14px; width: 60px; height: 8px; border-radius: 4px; background: rgb(from var(--genasys-sea-green) r g b / 0.18); } .gn-cta-frag-2 { width: 140px; height: 90px; bottom: 34%; left: 50%; margin-left: 350px; animation: gnFragFloat 20s ease-in-out infinite reverse; } .gn-cta-frag-2 .gn-frag-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 12px 12px 0 0; background: rgb(from var(--genasys-purple) r g b / 0.3); } .gn-cta-frag-2 .gn-frag-grid { position: absolute; top: 16px; left: 12px; right: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .gn-cta-frag-2 .gn-frag-cell { height: 20px; border-radius: 5px; background: rgb(from var(--genasys-white) r g b / 0.06); } .gn-cta-frag-2 .gn-frag-cell-a { background: rgb(from var(--genasys-purple) r g b / 0.12); } .gn-cta-frag-3 { width: 120px; height: 70px; bottom: 16%; left: 50%; margin-left: 330px; animation: gnFragFloat 16s ease-in-out infinite; animation-delay: -5s; } .gn-cta-frag-3 .gn-frag-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 12px 12px 0 0; background: rgb(from var(--genasys-mellow-yellow) r g b / 0.3); } .gn-cta-frag-3 .gn-frag-row { display: flex; align-items: center; gap: 8px; position: absolute; left: 12px; } .gn-cta-frag-3 .gn-frag-r1 { top: 18px; } .gn-cta-frag-3 .gn-frag-r2 { top: 36px; } .gn-cta-frag-3 .gn-frag-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(from var(--genasys-mellow-yellow) r g b / 0.3); flex-shrink: 0; } .gn-cta-frag-3 .gn-frag-stripe { height: 4px; border-radius: 2px; background: rgb(from var(--genasys-white) r g b / 0.06); } .gn-cta-frag-3 .gn-frag-s1 { width: 50px; } .gn-cta-frag-3 .gn-frag-s2 { width: 35px; } .gn-cta-frag-4 { width: 120px; height: 70px; bottom: 16%; left: 50%; margin-left: -450px; animation: gnFragFloat 18s ease-in-out infinite; animation-delay: -8s; } .gn-cta-frag-4 .gn-frag-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 12px 12px 0 0; background: rgb(from var(--genasys-sapphire-blue) r g b / 0.3); } .gn-cta-frag-4 .gn-frag-chart { position: absolute; bottom: 10px; left: 12px; right: 12px; height: 35px; display: flex; align-items: flex-end; gap: 4px; } .gn-cta-frag-4 .gn-frag-col { flex: 1; border-radius: 3px 3px 0 0; background: rgb(from var(--genasys-sapphire-blue) r g b / 0.12); } .gn-cta-frag-4 .gn-frag-c1 { height: 60%; } .gn-cta-frag-4 .gn-frag-c2 { height: 85%; } .gn-cta-frag-4 .gn-frag-c3 { height: 45%; } .gn-cta-frag-4 .gn-frag-c4 { height: 70%; } .gn-cta-frag-4 .gn-frag-c5 { height: 95%; background: rgb(from var(--genasys-sapphire-blue) r g b / 0.3); } .gn-cta-frag-4 .gn-frag-c6 { height: 55%; } .gn-cta-frag-4 .gn-frag-label { position: absolute; top: 14px; left: 12px; width: 50px; height: 4px; border-radius: 2px; background: rgb(from var(--genasys-white) r g b / 0.06); } @keyframes gnFragFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-20px) rotate(1.5deg); } } .gn-cta-inner { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; padding: 0 48px 60px; } .gn-cta-heading { font-family: var(--wp--preset--font-family--heading); font-size: 42px; font-weight: 700; color: var(--wp--preset--color--ink); line-height: 1.15; margin: 0 0 18px; -webkit-font-smoothing: antialiased; } .gn-cta-heading span { color: var(--wp--preset--color--accent); } .gn-cta-body { font-family: var(--wp--preset--font-family--body); font-size: 18px; line-height: 1.6; color: var(--wp--preset--color--ink); max-width: 480px; margin: 0 auto 36px; opacity: 0.88; } .gn-cta-list { list-style: none; padding: 0; margin: 0 0 48px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } /* §65 in STYLE-NOTES.md (repo root) */ .gn-cta-list li, .gn-cta-pill { font-family: var(--wp--preset--font-family--body); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--ink); background: rgb(from var(--genasys-white) r g b / 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 8px 18px; border-radius: 50px; border: 1px solid rgb(from var(--genasys-sapphire-blue) r g b / 0.12); } .gn-cta-band .gn-cta-list.gn-cta-list li:first-child { padding-top: 8px; } .gn-cta-band .gn-cta-list.gn-cta-list li:last-child { padding-bottom: 8px; } /* §66 in STYLE-NOTES.md (repo root) */ .gn-cta-band .gn-cta-list.gn-cta-list li { margin: 0; } .gn-cta-inner > .wp-block-buttons { margin-block: 0; } /* §67 in STYLE-NOTES.md (repo root) */ .gn-cta-inner > .gn-cta-list.gn-cta-list { margin: 0 0 48px; } .gn-cta-list > .gn-cta-pill { margin: 0; } /* An empty pill override means "this page runs with fewer pills": the simulator blog post has two, like its band always did. Without this an empty override paints a bare 38px blob. */ .gn-cta-list > .gn-cta-pill:empty { display: none; } /* §68 in STYLE-NOTES.md (repo root) */ .gn-cta-btn-secondary .wp-block-button__link { background: none; padding: 0; font-size: 15px; font-weight: 700; color: var(--wp--preset--color--white); text-decoration: none; transition: color 0.3s ease; } .gn-cta-btn-secondary .wp-block-button__link:hover { background: none; color: var(--wp--preset--color--cta-hover); } .gn-cta-inner .wp-block-button:has(> .wp-block-button__link:empty) { display: none; } .gn-cta-btn .wp-block-button__link { font-size: 15px; color: var(--wp--preset--color--white); text-decoration: none; } .gn-cta-btn .wp-block-button__link:hover { color: var(--wp--preset--color--white); } /* §69 in STYLE-NOTES.md (repo root) */ .wp-element-button:not(:has(svg)), .gn-jobs-panel .gn-job-apply:not(:has(svg)), .gn-ni-more:not(:has(svg)), .brand-btn:not(:has(svg)), .gn-nav-contact .wp-block-navigation-item__content:not(:has(svg)) { display: inline-flex; align-items: center; gap: 10px; } .wp-element-button:not(:has(svg))::after, .gn-jobs-panel .gn-job-apply:not(:has(svg))::after, .gn-ni-more:not(:has(svg))::after, .brand-btn:not(:has(svg))::after, .gn-nav-contact .wp-block-navigation-item__content:not(:has(svg))::after { content: ""; width: 13px; height: 13px; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.3s ease; } .wp-element-button:not(:has(svg)):hover::after, .gn-jobs-panel .gn-job-apply:not(:has(svg)):hover::after, .gn-ni-more:not(:has(svg)):hover::after, .brand-btn:not(:has(svg)):hover::after, .gn-nav-contact .wp-block-navigation-item__content:not(:has(svg)):hover::after { transform: translateX(4px); } /* §70 in STYLE-NOTES.md (repo root) */ @media (prefers-reduced-motion: reduce) { .gn-cta-particle { animation: none; display: none; } .gn-cta-frag { animation: none; } .wp-element-button:not(:has(svg))::after, .gn-jobs-panel .gn-job-apply:not(:has(svg))::after, .gn-ni-more:not(:has(svg))::after, .brand-btn:not(:has(svg))::after, .gn-nav-contact .wp-block-navigation-item__content:not(:has(svg))::after { transition: none; } } /* §71 in STYLE-NOTES.md (repo root) */ .gn-product-hero { background: radial-gradient(at 50% 0%, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--ink) 100%); } /* §72 in STYLE-NOTES.md (repo root) */ /* §73 in STYLE-NOTES.md (repo root) */ @media (min-width: 782px) { /* The band after the hero is later in the tree, so its background would paint over the overhanging card without this. */ } /* §74 in STYLE-NOTES.md (repo root) */ .gn-mgaa-hero { background: radial-gradient(at 50% 0%, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--ink) 100%); } /* §75 in STYLE-NOTES.md (repo root) */ @media (max-width: 1024px) { .gn-cta-inner { padding: 0 32px 60px; max-width: 520px; } .gn-cta-heading { font-size: 34px; } .gn-cta-body { font-size: 16.5px; } .gn-cta-list { margin-bottom: 36px; } .gn-cta-base { height: 40px; } .gn-cta-frag-1 { margin-left: -400px; } .gn-cta-frag-2 { margin-left: 260px; } .gn-cta-frag-3 { margin-left: 240px; } .gn-cta-frag-4 { display: none; } } @media (max-width: 600px) { .gn-cta-band { padding: 64px 0 0; background: linear-gradient(180deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 28%, #f4f6fa 36%, #dce4ef 44%, #b8c8de 50%, var(--wp--preset--color--pale-steel) 56%, #7a9cc5 62%, var(--wp--preset--color--steel) 68%, #3966b0 75%, #1d4f9e 82%, var(--wp--preset--color--primary) 90%, var(--wp--preset--color--primary) 100%); } .gn-cta-inner { padding: 0 20px 60px; max-width: 100%; } .gn-cta-heading { font-size: 26px; } .gn-cta-body { font-size: 15.5px; margin: 0 auto 24px; } .gn-cta-list { gap: 8px; margin: 0 0 32px; } .gn-cta-list li { font-size: 11px; padding: 6px 14px; } .gn-cta-band .gn-cta-list.gn-cta-list li:first-child { padding-top: 6px; } .gn-cta-band .gn-cta-list.gn-cta-list li:last-child { padding-bottom: 6px; } .gn-cta-base { height: 30px; } .gn-cta-frags { display: none; } .gn-cta-particles { display: none; } } /* §76 in STYLE-NOTES.md (repo root) */ /* §77 in STYLE-NOTES.md (repo root) */ /* Button uses the shared .gn-cta-btn treatment (see CTA Banner section above) instead of its own styling -- same pill/hover/icon-slide as every other primary button on the site. */ /* §78, §79 in STYLE-NOTES.md (repo root): the References Toggle. One look, the pale blue pill, on every post since 27 September 2026 (§361). */ .gn-references { margin-top: 56px; margin-bottom: 0; padding-top: 36px; border-top: 1px solid var(--border-subtle); } .gn-references > summary { display: inline-flex; align-items: center; gap: 9px; width: auto; padding: 11px 22px; border-radius: 999px; background: rgb(from var(--genasys-sapphire-blue) r g b / 0.06); color: var(--genasys-sapphire-blue); font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; list-style: none; transition: background .2s ease, color .2s ease; } .gn-references > summary:is(:hover, :focus) { background: rgb(from var(--genasys-sapphire-blue) r g b / 0.12); color: var(--genasys-sapphire-deep); } .gn-references > summary::-webkit-details-marker { display: none; } .gn-references > summary::after { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='3' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='3' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .25s ease; } .gn-references[open] > summary::after { transform: rotate(90deg); } .gn-ref-label-hide { display: none; } .gn-references[open] .gn-ref-label-show { display: none; } .gn-references[open] .gn-ref-label-hide { display: inline; } .gn-references ol { margin: 24px 0 0; padding-left: 22px; font-size: 14.5px; line-height: 1.65; color: var(--text-muted); overflow-wrap: break-word; word-break: break-word; } .gn-references ol li { margin-bottom: 11px; scroll-margin-top: 28px; } .gn-references ol li::marker { color: var(--genasys-sapphire-blue); font-weight: 700; } .gn-references ol a { color: var(--genasys-sapphire-blue); text-decoration: none; } .gn-references ol a:hover { text-decoration: underline; } .gn-references ol li:target { background: rgb(from var(--genasys-sea-green) r g b / 0.12); border-radius: 6px; padding: 4px 8px; margin-left: -8px; } /* §80 in STYLE-NOTES.md (repo root) */ .gn-job-badges { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0 0 32px; padding: 0; } .gn-job-badge { display: flex; align-items: center; gap: 8px; } .gn-job-badge svg { width: 30px; height: 30px; fill: var(--text-strong); flex-shrink: 0; } .gn-job-badge span { font-family: var(--wp--preset--font-family--body); font-size: 13px; font-weight: 600; color: var(--wp--preset--color--ink); } /* §81 in STYLE-NOTES.md (repo root) */ /* §82 in STYLE-NOTES.md (repo root) */ .entry-content img, .wp-block-post-content img { max-width: 100%; height: auto; } /* §84 in STYLE-NOTES.md (repo root) */ .gn-int-partner { position: relative; background: var(--wp--preset--color--white); border: 1px solid var(--neutral-200); border-radius: 24px; padding: 32px 26px 30px; margin-block: 0 !important; /* the block-gap trap: a grid cell's stretch height is reduced by a child's margin */ box-shadow: 0 2px 10px var(--shadow-soft); transition: scale 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; } /* §85 in STYLE-NOTES.md (repo root) */ /* §107 in STYLE-NOTES.md (repo root): the testimonials card used to share this selector (removed with the redesign, §298); .gn-int-partner still needs its own top stripe. */ .gn-int-partner.gn-g1::before { background-image: linear-gradient(90deg, var(--wp--preset--color--cta), var(--wp--preset--color--cta-hover)); } .gn-int-partner.gn-g2::before { background-image: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--steel)); } .gn-int-partner.gn-g3::before { background-image: linear-gradient(90deg, var(--wp--preset--color--purple), var(--wp--preset--color--cta)); } .gn-int-partner.gn-g4::before { background-image: linear-gradient(90deg, var(--wp--preset--color--cta-hover), var(--wp--preset--color--accent)); } .gn-int-partner.gn-g5::before { background-image: linear-gradient(90deg, var(--wp--preset--color--steel), var(--wp--preset--color--purple)); } .gn-int-partner.gn-g6::before { background-image: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--accent)); } .gn-int-partner:hover { scale: 1.04; box-shadow: 0 14px 30px var(--shadow-mid); border-color: var(--neutral-300); } /* §86 in STYLE-NOTES.md (repo root) */ .gn-int-partner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 24px; border-radius: 24px 24px 0 0; background-repeat: no-repeat; background-size: 100% 4px; z-index: 2; } /* the chasing ring */ .gn-int-partner::after { content: ""; position: absolute; inset: -2px; border-radius: 26px; padding: 2px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; z-index: 1; pointer-events: none; } .gn-int-partner:hover::after { opacity: 1; animation: gn-chase-spin 1.4s linear infinite; } /* §87 in STYLE-NOTES.md (repo root) */ @media (prefers-reduced-motion: reduce) { .gn-int-partner { transition: none; } .gn-int-partner:hover { scale: none; } .gn-int-partner:hover::after { animation: none; } } .gn-int-partner p { font-size: 16.5px; line-height: 1.6; } /* §88 in STYLE-NOTES.md (repo root) */ .gn-eyebrow { font-family: var(--wp--preset--font-family--body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--accent, var(--wp--preset--color--accent)); margin: 0 0 4px; } /* §89 in STYLE-NOTES.md (repo root) */ /* §90 in STYLE-NOTES.md (repo root) */ .is-layout-constrained > .gn-cta-base { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0; } /* §91 in STYLE-NOTES.md (repo root) */ .gn-awards { /* §92 in STYLE-NOTES.md (repo root) */ color: var(--wp--preset--color--white); /* §93 in STYLE-NOTES.md (repo root) */ width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 80px 20px; text-align: center; background-color: var(--wp--preset--color--primary); background-image: url('/wp-content/uploads/2026/03/Artboard-1.webp'); background-position: center center; } /* The band is full width; its contents are not. */ .gn-awards-heading, .gn-awards-body, .gn-awards-badges { max-width: 1100px; margin-left: auto; margin-right: auto; } .gn-awards-heading { color: var(--wp--preset--color--white); margin-top: 0; margin-bottom: 0; /* §94 in STYLE-NOTES.md (repo root) */ } .gn-awards-body { font-size: 16.5px; font-weight: 400; line-height: 1.6; color: var(--wp--preset--color--white); /* §312 in STYLE-NOTES.md (repo root): a longer body than the others was running 980px wide */ max-width: min(70%, 640px); margin-top: 24px; margin-bottom: 24px; } /* §342 */ .gn-awards-badges { --gn-award-size: 150px; --gn-award-gap: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px var(--gn-award-gap); max-width: calc(var(--gn-award-size) * 4 + var(--gn-award-gap) * 3); } .gn-awards-badges > .gn-award { margin: 0; } .gn-award { position: relative; container-type: inline-size; flex: none; width: var(--gn-award-size, 150px); aspect-ratio: 1; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; text-align: center; } .gn-award::before, .gn-award::after { content: ""; position: absolute; inset: 0; background: url("assets/brand/awards/award-wreath-white.webp") center / contain no-repeat; transition: opacity 0.3s ease; } .gn-award::after { background-image: url("assets/brand/awards/award-wreath-colour.webp"); opacity: 0; } /* A swap, not a layer: the white wreath goes as the colour one arrives, or its edges show as a white halo round the colour (Ed). */ .gn-award:hover::before { opacity: 0; } .gn-award:hover::after { opacity: 1; } .gn-award > :is(.gn-award-name, .gn-award-by) { position: absolute; z-index: 1; margin: 0; text-wrap: balance; } .gn-award-name { left: 50%; top: 45.8%; translate: -50% -50%; width: 58%; font-size: 7.6cqw; line-height: 1.14; letter-spacing: -0.01em; color: var(--wp--preset--color--white); } .gn-award-name strong { display: block; font-size: 2.05em; line-height: 1; } .gn-award-by { left: 10.8%; top: 67.8%; width: 78.4%; height: 14.6%; display: flex; align-items: center; justify-content: center; padding: 0 3cqw; font-size: 7.6cqw; line-height: 0.95; color: var(--wp--preset--color--ink); } .gn-award--long .gn-award-by { font-size: 5.6cqw; } /* The year sits under the wreath, not in it: inside, the longer names ran to five lines and met the trophy. The row gap makes room for it. */ .gn-award > .gn-award-year { position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0; font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3; color: var(--wp--preset--color--white); transition: color 0.3s ease; } /* White, turning Mellow Yellow with the wreath's hover (Ed). */ .gn-award:hover > .gn-award-year { color: var(--wp--preset--color--cta-hover); } .gn-awards-badges:has(.gn-award-year) { row-gap: 36px; padding-bottom: 24px; } .gn-awards--light .gn-award-year, .gn-awards--light .gn-award:hover > .gn-award-year { color: var(--wp--preset--color--primary); } .gn-awards-badges > .gn-award:nth-child(2) { animation-delay: 0.1s; } .gn-awards-badges > .gn-award:nth-child(3) { animation-delay: 0.2s; } .gn-awards-badges > .gn-award:nth-child(4) { animation-delay: 0.3s; } .gn-awards-badges > .gn-award:nth-child(6) { animation-delay: 0.1s; } .gn-awards-badges > .gn-award:nth-child(7) { animation-delay: 0.2s; } .gn-awards-badges > .gn-award:nth-child(8) { animation-delay: 0.3s; } .gn-awards--light { background: var(--wp--preset--color--white); } .gn-awards--light .gn-awards-heading, .gn-awards--light .gn-awards-body { color: var(--wp--preset--color--ink); } .gn-awards--light .gn-award::before { background-image: url("assets/brand/awards/award-wreath-blue.webp"); } .gn-awards--light .gn-award::after { display: none; } .gn-awards--light .gn-award-name { color: var(--wp--preset--color--primary); } .gn-awards--light .gn-award-by { color: var(--wp--preset--color--white); } /* §95 in STYLE-NOTES.md (repo root) */ @media (max-width: 600px) { .gn-awards-badges { /* §425: two full-size badges a row, so the names stay readable (three at 110px made them 6 to 8px) */ --gn-award-gap: 12px; row-gap: 16px; max-width: calc(var(--gn-award-size) * 2 + var(--gn-award-gap)); } } @media (max-width: 781px) { .gn-awards { /* §96 in STYLE-NOTES.md (repo root) */ padding: 56px 20px; } .gn-awards-body { max-width: 100%; } } /* §97 in STYLE-NOTES.md (repo root) */ .gn-testimonials { /* §98 in STYLE-NOTES.md (repo root) */ position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-top: 80px; padding-bottom: 80px; overflow-x: clip; overflow-y: visible; background: radial-gradient(at top center, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--ink) 100%); } /* §99 in STYLE-NOTES.md (repo root) */ .gn-testimonials-header, .gn-testimonials-cards, .gn-testimonials-footer { max-width: 1100px; margin-left: auto; margin-right: auto; } .gn-testimonials-header { position: relative; z-index: 2; text-align: center; padding: 0 48px; } .gn-testimonials-header h2 { color: var(--wp--preset--color--white) !important; margin: 0 auto !important; padding: 0 !important; /* §100 in STYLE-NOTES.md (repo root) */ } .gn-testimonials-header h2 span { color: var(--wp--preset--color--cta-hover); } .gn-testimonials-body { font-family: var(--wp--preset--font-family--body); font-size: 16px; color: var(--wp--preset--color--white); line-height: 1.7; max-width: 70%; margin: 24px auto 24px auto; } .gn-testimonials-cards { position: relative; z-index: 2; -webkit-font-smoothing: antialiased; } .gn-testimonials-track-wrap { position: relative; margin-bottom: 0; padding: 35px 0; overflow-x: clip; overflow-y: visible; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .gn-testimonials-track-wrap + .gn-testimonials-track-wrap { margin-top: -50px; } /* §101 in STYLE-NOTES.md (repo root) */ .gn-testimonials-track { display: flex; gap: 18px; padding: 0 40px; animation: gnTestimonialsScrollL 35s linear infinite; width: max-content; } .gn-testimonials-track.gn-testimonials-reverse { animation: gnTestimonialsScrollR 35s linear infinite; } @keyframes gnTestimonialsScrollL { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes gnTestimonialsScrollR { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .gn-testimonials-track-wrap:hover .gn-testimonials-track { animation-play-state: paused; } /* §102 in STYLE-NOTES.md (repo root) */ .gn-testimonials-cards.gn-paused .gn-testimonials-track { animation-play-state: paused; } .gn-testimonials-pause { margin: 12px auto 0; position: relative; z-index: 3; } @media (prefers-reduced-motion: reduce) { /* §103 in STYLE-NOTES.md (repo root) */ .gn-testimonials-track, .gn-testimonials-track.gn-testimonials-reverse { animation: none; } /* §104 in STYLE-NOTES.md (repo root) */ .gn-testimonials-track-wrap { overflow-x: auto; overflow-y: clip; } /* §105 in STYLE-NOTES.md (repo root) */ .gn-testimonials-card:hover { transform: none; box-shadow: 0 4px 20px var(--shadow-strong); } /* §106 in STYLE-NOTES.md (repo root) */ .gn-testimonials-track-wrap + .gn-testimonials-track-wrap { margin-top: 0; } /* Nothing left to pause. */ .gn-testimonials-pause { display: none; } } /* §298 in STYLE-NOTES.md (repo root) */ .gn-testimonials-card { flex-shrink: 0; width: 400px; background: var(--wp--preset--color--white); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 6px 24px var(--shadow-strong); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease; } .gn-testimonials-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px var(--shadow-strong); } /* Colour-only modifiers: badge and avatar ring pick this up, per the CI manual's "no accent stripes on cards" (STYLE-NOTES §298). */ .gn-testimonials-badge { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--hue, var(--wp--preset--color--primary)); } /* §355: the quote mark is drawn here once, not typed into every card. */ .gn-testimonials-badge::before { content: ""; width: 18px; height: 18px; background: var(--wp--preset--color--white); -webkit-mask: url("data:image/svg+xml,") center / contain no-repeat; mask: url("data:image/svg+xml,") center / contain no-repeat; } .gn-testimonials-person { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-subtle); } /* §310 in STYLE-NOTES.md (repo root): a 4px ring in the card's colour, then a 3px white gap, then the photo. */ .gn-testimonials-avatar { box-sizing: border-box; width: 60px; height: 60px; padding: 3px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--wp--preset--color--white); border: 4px solid var(--hue, var(--wp--preset--color--primary)); } .gn-testimonials-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .gn-testimonials-info { min-width: 0; } .gn-testimonials-name { font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 15px; color: var(--wp--preset--color--ink); line-height: 1.3; } .gn-testimonials-role { font-family: var(--wp--preset--font-family--body); font-size: 13px; color: var(--text-muted); line-height: 1.3; } .gn-testimonials-card blockquote { font-family: var(--wp--preset--font-family--body); font-size: 15.5px; color: var(--wp--preset--color--ink); line-height: 1.65; font-style: normal; margin: 0; flex: 1; } /* Stat cards, mixed into the same tracks: same shape, solid brand ground, no badge and no person row. */ .gn-testimonials-stat { flex-shrink: 0; width: 290px; background: var(--hue, var(--wp--preset--color--primary)); border-radius: 14px; padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 6px 24px var(--shadow-strong); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease; } .gn-testimonials-stat:hover { transform: translateY(-4px); box-shadow: 0 14px 34px var(--shadow-strong); } /* No sapphire-blue (--primary) stat card, deliberately (Ed, 18 September): it reads as almost the same navy as the band behind it. */ .gn-testimonials-stat-num { font-family: var(--wp--preset--font-family--heading); font-size: 52px; font-weight: 700; color: var(--wp--preset--color--white); line-height: 1; letter-spacing: -0.01em; } .gn-testimonials-stat-text { font-family: var(--wp--preset--font-family--body); font-size: 15.5px; color: rgb(from var(--wp--preset--color--white) r g b / 0.92); line-height: 1.55; margin: 0; flex: 1; } .gn-testimonials-stat-source { font-family: var(--wp--preset--font-family--body); font-size: 13px; font-weight: 700; color: rgb(from var(--wp--preset--color--white) r g b / 0.75); margin-top: auto; padding-top: 4px; } .gn-testimonials-footer { position: relative; z-index: 2; text-align: center; padding: 40px 48px 0; } .gn-testimonials-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--body); font-size: 18px !important; font-weight: 700; color: var(--wp--preset--color--cta-hover) !important; text-decoration: none; transition: color 0.3s ease; cursor: pointer; } .gn-testimonials-cta:hover { color: var(--wp--preset--color--white) !important; } .gn-testimonials-cta svg { width: 18px; height: 18px; transition: transform 0.3s ease; } .gn-testimonials-cta:hover svg { transform: translateX(6px); } /* Mobile single-card carousel, hidden by default */ .gn-testimonials-mobile { display: none; } @media (max-width: 1024px) { .gn-testimonials-header { padding: 0 32px; } .gn-testimonials-header h2 { font-size: 30px !important; } .gn-testimonials-footer { padding: 32px 32px 0; } } @media (max-width: 600px) { .gn-testimonials-header { padding: 0 20px; } .gn-testimonials-header h2 { font-size: 24px !important; max-width: 100%; } .gn-testimonials-body { max-width: 100%; font-size: 15px; margin: 20px auto 24px auto; } /* Hide both desktop strips on mobile */ .gn-testimonials-cards { display: none; } .gn-testimonials-footer { padding: 32px 20px 0; } .gn-testimonials-cta { font-size: 16px !important; } /* Show the mobile single-card carousel */ .gn-testimonials-mobile { display: block; position: relative; z-index: 2; /* 20px, not flush (Ed, 24 August): the card keeps a side margin and the copy wraps a line or two taller inside the narrower box. */ padding: 0 20px; -webkit-font-smoothing: antialiased; } /* §426 */ .gn-testimonials-mobile-stage { position: relative; display: grid; } .gn-testimonials-mobile .gn-testimonials-card { width: 100%; max-width: 100%; padding: 24px 24px 22px; border-radius: 12px; position: relative; grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .gn-testimonials-mobile .gn-testimonials-card.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; } .gn-testimonials-mobile .gn-testimonials-card:hover { transform: translateY(0); box-shadow: 0 6px 24px var(--shadow-strong); } .gn-testimonials-mobile .gn-testimonials-badge { width: 34px; height: 34px; } .gn-testimonials-mobile .gn-testimonials-badge::before { width: 16px; height: 16px; } .gn-testimonials-mobile .gn-testimonials-person { gap: 12px; } .gn-testimonials-mobile .gn-testimonials-avatar { width: 54px; height: 54px; } .gn-testimonials-mobile .gn-testimonials-name { font-size: 14.5px; } .gn-testimonials-mobile .gn-testimonials-role { font-size: 12.5px; } .gn-testimonials-mobile .gn-testimonials-card blockquote { font-size: 15px; line-height: 1.6; } .gn-testimonials-dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 24px; } .gn-testimonials-dot, .gn-testimonials-dot:hover, .gn-testimonials-dot:focus, .gn-testimonials-dot:active { width: 8px !important; height: 8px !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; border-radius: 50% !important; background: rgb(from var(--genasys-steel-blue) r g b / 0.3) !important; background-color: rgb(from var(--genasys-steel-blue) r g b / 0.3) !important; background-image: none !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; text-indent: -9999px !important; cursor: pointer !important; transition: background-color 0.3s ease, width 0.3s ease, border-radius 0.3s ease !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: transparent !important; transform: none !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: normal !important; } .gn-testimonials-dot.is-active, .gn-testimonials-dot.is-active:hover, .gn-testimonials-dot.is-active:focus { background: var(--wp--preset--color--cta-hover) !important; background-color: var(--wp--preset--color--cta-hover) !important; width: 24px !important; border-radius: 4px !important; } } /* §299 in STYLE-NOTES.md (repo root) */ .gn-underline { position: relative; display: inline-block; z-index: 0; white-space: nowrap; } .gn-underline::before { content: ""; position: absolute; left: -0.08em; right: -0.08em; bottom: 0.16em; height: 0.24em; background: var(--genasys-sizzling-red); transform: skewX(-14deg); border-radius: 1px; z-index: -1; } /* §108 in STYLE-NOTES.md (repo root) */ .gn-guide-cta { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 80px 0 0; background: linear-gradient(180deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 26%, #f4f6fa 34%, #dce4ef 42%, #b8c8de 50%, var(--wp--preset--color--pale-steel) 56%, #7a9cc5 63%, var(--wp--preset--color--steel) 70%, #3966b0 77%, #1d4f9e 85%, var(--wp--preset--color--primary) 92%, var(--wp--preset--color--primary) 100%); overflow: hidden; margin-bottom: -40px !important; } .gn-guide-cta * { box-sizing: border-box; } /* §109 in STYLE-NOTES.md (repo root) */ .gn-guide-cta-base { position: relative; z-index: 1; width: 100vw; max-width: 100vw; margin-top: 0; margin-bottom: 0; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; height: 30px; background: var(--wp--preset--color--primary); padding: 0; } /* Rising particles: light variant only, same reason as the base strip. */ .gn-guide-cta-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; } .gn-guide-cta-particle { position: absolute; border-radius: 50%; opacity: 0; animation: gnGuideCtaRise linear infinite; } @keyframes gnGuideCtaRise { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 5% { opacity: 0.7; } 50% { opacity: 0.35; } 75% { opacity: 0.1; } 100% { transform: translateY(-70vh) scale(1); opacity: 0; } } .gn-guide-cta-inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 40px; padding: 0 48px 60px; } .gn-guide-cta-text { flex: 1; min-width: 0; } .gn-guide-cta-text h2 { font-family: var(--wp--preset--font-family--heading); font-size: 48px; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--wp--preset--color--ink); margin: 0 0 24px; padding: 0; -webkit-font-smoothing: antialiased; text-wrap: balance; } .gn-guide-cta-text h2 span { color: var(--wp--preset--color--primary); } .gn-guide-cta-body { font-family: var(--wp--preset--font-family--body); font-size: 18px; font-weight: 400; color: var(--wp--preset--color--ink); line-height: 1.65; max-width: 520px; margin: 0 0 28px; opacity: 0.88; } .gn-guide-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; background: var(--wp--preset--color--cta); color: var(--wp--preset--color--white) !important; font-family: var(--wp--preset--font-family--body); font-size: 15px; font-weight: 700; border: none; border-radius: 50px; text-decoration: none !important; cursor: pointer; transition: background 0.3s ease; } .gn-guide-cta-btn:hover { background: var(--wp--preset--color--cta-hover); color: var(--wp--preset--color--ink) !important; } .gn-guide-cta-btn:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 3px; } .gn-guide-cta-btn svg { width: 14px; height: 14px; transition: transform 0.3s ease; } .gn-guide-cta-btn:hover svg { transform: translateX(6px); } .gn-guide-cta-media { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; align-self: flex-end; } .gn-guide-cta-media img { width: 100%; max-width: 480px; height: auto; display: block; object-fit: contain; background: transparent; } /* §110 in STYLE-NOTES.md (repo root) */ :is(.gn-guide-cta.gn-guide-cta--dark, .gn-guide-dark .gn-guide-cta) { background: radial-gradient(at 50% 0%, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--ink) 100%); padding: 80px 0; margin-bottom: 0 !important; } :is(.gn-guide-cta.gn-guide-cta--dark, .gn-guide-dark .gn-guide-cta) .gn-guide-cta-inner { padding-bottom: 0; } :is(.gn-guide-cta.gn-guide-cta--dark, .gn-guide-dark .gn-guide-cta) .gn-guide-cta-text h2, :is(.gn-guide-cta.gn-guide-cta--dark, .gn-guide-dark .gn-guide-cta) .gn-guide-cta-body { color: var(--wp--preset--color--white); } :is(.gn-guide-cta.gn-guide-cta--dark, .gn-guide-dark .gn-guide-cta) .gn-guide-cta-body { opacity: 1; } :is(.gn-guide-cta.gn-guide-cta--dark, .gn-guide-dark .gn-guide-cta) .gn-guide-cta-text h2 span { color: var(--wp--preset--color--cta-hover); } :is(.gn-guide-cta.gn-guide-cta--dark, .gn-guide-dark .gn-guide-cta) .gn-guide-cta-btn:focus-visible { outline-color: var(--wp--preset--color--cta-hover); } :is(.gn-guide-cta.gn-guide-cta--dark, .gn-guide-dark .gn-guide-cta) .gn-guide-cta-media { align-self: center; } /* §111 in STYLE-NOTES.md (repo root) */ .gn-guide-dark .gn-guide-cta-particles, .gn-guide-dark .gn-guide-cta-base { display: none; } @media (prefers-reduced-motion: reduce) { .gn-guide-cta-particle { animation: none; display: none; } } @media (max-width: 1024px) { .gn-guide-cta { padding: 64px 0 0; } .gn-guide-cta-inner { flex-direction: column; padding: 0 32px 48px; gap: 32px; text-align: center; } .gn-guide-cta-text { display: flex; flex-direction: column; align-items: center; } .gn-guide-cta-text h2 { font-size: 40px; } .gn-guide-cta-body { font-size: 16px; max-width: 560px; } .gn-guide-cta-media { max-width: 420px; width: 100%; margin: 0 auto; align-self: center; } .gn-guide-cta-base { height: 40px; } } @media (max-width: 600px) { .gn-guide-cta { padding: 48px 0 0; background: linear-gradient(180deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 22%, #f4f6fa 30%, #dce4ef 38%, #b8c8de 45%, var(--wp--preset--color--pale-steel) 52%, #7a9cc5 60%, var(--wp--preset--color--steel) 68%, #3966b0 76%, #1d4f9e 84%, var(--wp--preset--color--primary) 92%, var(--wp--preset--color--primary) 100%); } .gn-guide-cta-inner { flex-direction: column; padding: 0 20px 40px; gap: 24px; text-align: center; } .gn-guide-cta-text { display: flex; flex-direction: column; align-items: center; } .gn-guide-cta-text h2 { font-size: 32px; } .gn-guide-cta-body { font-size: 16px; max-width: 100%; } .gn-guide-cta-media { width: 100%; max-width: 320px; } .gn-guide-cta-particles { display: none; } .gn-guide-cta-base { height: 30px; } } /* §112 in STYLE-NOTES.md (repo root) */ .gn-compare-band { /* §113 in STYLE-NOTES.md (repo root) */ position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; background: var(--wp--preset--color--white); /* §114 in STYLE-NOTES.md (repo root) */ padding: 80px 20px; } .gn-compare-section { max-width: 1100px; margin: 0 auto; padding: 0; text-align: center; } .gn-compare-heading { color: var(--wp--preset--color--primary); margin: 0 auto; } .gn-compare-heading span { color: var(--wp--preset--color--accent); } .gn-compare-body { font-family: var(--wp--preset--font-family--body); font-size: 16.5px; font-weight: 400; color: var(--neutral-500); line-height: 1.6; max-width: 70%; margin: 24px auto 24px auto; } /* ---- Table ---- */ .gn-compare { padding: 0; max-width: 100%; margin: 0 auto; font-family: var(--wp--preset--font-family--body) !important; font-size: 1.1em !important; } .gn-compare-table { width: 100% !important; table-layout: fixed !important; border-collapse: separate !important; border-spacing: 0 !important; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px var(--shadow-soft); } /* §115 in STYLE-NOTES.md (repo root) */ .gn-compare-table thead th { padding: 20px 16px; font-size: 1em !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; vertical-align: middle; width: 18.66% !important; } .gn-compare-table thead th:first-child { text-align: left; background: var(--ink-deep) !important; color: var(--wp--preset--color--white) !important; width: 44% !important; padding-left: 28px; } .gn-compare-th-genasys { background: var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--white) !important; position: relative; } .gn-compare-th-genasys::after { content: 'RECOMMENDED'; display: block; font-size: 0.65em !important; letter-spacing: 0.12em; color: var(--wp--preset--color--accent) !important; margin-top: 4px; font-weight: 600 !important; } .gn-compare-th-legacy { background: var(--wp--preset--color--ink) !important; color: rgb(from var(--genasys-white) r g b / 0.7) !important; } .gn-compare-th-nocode { background: var(--wp--preset--color--ink) !important; color: rgb(from var(--genasys-white) r g b / 0.7) !important; } .gn-compare-th-short { display: none; } .gn-compare-table tbody tr { transition: background 0.2s ease; } .gn-compare-table tbody tr:hover { background: rgb(from var(--genasys-sea-green) r g b / 0.06) !important; } .gn-compare-table tbody td { padding: 16px !important; border-bottom: 1px solid var(--neutral-100) !important; border-top: none !important; border-left: none !important; border-right: none !important; font-size: 1.1em !important; } .gn-compare-table tbody td:first-child { padding-left: 28px !important; text-align: left !important; } .gn-compare-table tbody tr:last-child td { border-bottom: none !important; } /* §116 in STYLE-NOTES.md (repo root) */ .gn-compare-table tbody th { padding: 16px !important; padding-left: 28px !important; border: none !important; border-bottom: 1px solid var(--neutral-100) !important; text-align: left !important; font-weight: 400 !important; background: transparent !important; font-size: 1.1em !important; } .gn-compare-table tbody tr:last-child th { border-bottom: none !important; } .gn-compare-td-feature { font-weight: 700 !important; color: var(--ink-deep) !important; font-size: 1.1em !important; } .gn-compare-td-detail { font-weight: 400 !important; color: var(--text-muted) !important; font-size: 0.95em !important; display: block; margin-top: 2px; } .gn-compare-td-center { text-align: center !important; vertical-align: middle !important; } .gn-compare-td-genasys { background: rgb(from var(--genasys-sapphire-blue) r g b / 0.06) !important; } .gn-compare-check { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; } .gn-compare-check-yes { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); } .gn-compare-check-no { background: var(--wp--preset--color--cta); color: var(--wp--preset--color--white); } .gn-compare-check-partial { background: var(--wp--preset--color--cta-hover); color: var(--wp--preset--color--white); } /* §355: the three marks are drawn here once, not typed into every cell. */ .gn-compare-check::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--gn-compare-mark) center / contain no-repeat; mask: var(--gn-compare-mark) center / contain no-repeat; } .gn-compare-check-yes { --gn-compare-mark: url("data:image/svg+xml,"); } .gn-compare-check-no { --gn-compare-mark: url("data:image/svg+xml,"); } .gn-compare-check-partial { --gn-compare-mark: url("data:image/svg+xml,"); } .gn-compare-legend-item .gn-compare-check { width: 20px; height: 20px; } .gn-compare-legend-item .gn-compare-check::before { width: 12px; height: 12px; } .gn-compare-legend { display: flex; justify-content: center; gap: 24px; margin-top: 20px; flex-wrap: wrap; } .gn-compare-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.95em !important; color: var(--text-muted) !important; font-weight: 600 !important; } .gn-compare-table, .gn-compare-table th, .gn-compare-table td { border: none !important; outline: none !important; } /* ---- Button ---- */ .gn-compare-cta { margin-top: 40px; } /* §117 in STYLE-NOTES.md (repo root) */ .gn-compare-band.gn-compare-band--dark { background: radial-gradient(at 50% 0%, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--ink) 100%); } .gn-compare-band--dark .gn-compare-heading { font-family: var(--font-display) !important; font-size: var(--gn-section-heading); font-weight: 700; color: var(--wp--preset--color--white); line-height: 1.1; max-width: 70%; -webkit-font-smoothing: antialiased; } /* §410 */ .gn-compare-band--dark .gn-compare-heading span { color: var(--wp--preset--color--cta-hover); } .gn-compare-band--dark .gn-compare-body { color: var(--wp--preset--color--white); } .gn-compare-band--dark .gn-compare-table { background: var(--wp--preset--color--white) !important; } .gn-compare-band--dark .gn-compare-legend-item { color: var(--wp--preset--color--white) !important; } /* ---- Tablet ---- */ @media (max-width: 1024px) { .gn-compare-table thead th { padding: 14px 8px !important; font-size: 0.85em !important; } /* §118 in STYLE-NOTES.md (repo root) */ .gn-compare-table thead th:first-child { padding-left: 16px !important; } .gn-compare-table tbody td { padding: 12px 8px !important; } .gn-compare-table tbody td:first-child { padding-left: 12px !important; text-align: left !important; } .gn-compare-table tbody th { padding: 12px 8px !important; padding-left: 12px !important; } .gn-compare-td-detail { font-size: 0.85em !important; } /* §119 in STYLE-NOTES.md (repo root) */ } /* ---- Mobile ---- */ @media (max-width: 600px) { .gn-compare-heading { max-width: 100%; } .gn-compare-body { max-width: 100%; } /* 16px a side rather than 1% (Ed, 24 August): live keeps a visible margin around the table on phones. */ .gn-compare { max-width: calc(100% - 32px); margin-left: auto; margin-right: auto; } .gn-compare-th-full { display: none; } .gn-compare-th-short { display: inline; } .gn-compare-table thead th { padding: 10px 4px !important; font-size: 0.7em !important; letter-spacing: 0.02em; } /* Same clobbered-left-padding fix as the tablet rule above, scaled down again for this narrower column. */ .gn-compare-table thead th:first-child { padding-left: 10px !important; } .gn-compare-table tbody td { padding: 10px 6px !important; font-size: 0.9em !important; } .gn-compare-table tbody td:first-child { padding-left: 8px !important; text-align: left !important; } .gn-compare-table tbody th { padding: 10px 6px !important; padding-left: 8px !important; } .gn-compare-td-feature { font-size: 0.9em !important; } .gn-compare-td-detail { display: none; } .gn-compare-check { width: 26px; height: 26px; border-radius: 6px; } .gn-compare-check::before { width: 14px; height: 14px; } .gn-compare-legend { gap: 12px; } .gn-compare-legend-item { font-size: 0.8em !important; } /* §425: under 7px here, so hidden on phones; the header keeps "(recommended)" for screen readers */ .gn-compare-th-genasys::after { display: none; } .gn-compare-table thead th { width: 17% !important; } .gn-compare-table thead th:first-child { width: 49% !important; } .gn-compare-band--dark .gn-compare-heading { max-width: 100%; } /* §120 in STYLE-NOTES.md (repo root) */ .gn-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; contain: paint; } .gn-compare-table { min-width: 300px; } } /* §121 in STYLE-NOTES.md (repo root) */ .gn-proof-section { width: 100%; max-width: 1100px; margin: 0 auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .gn-proof-header { text-align: center; } .gn-proof-header h2 { color: var(--wp--preset--color--white) !important; margin: 0 auto !important; padding: 0 !important; } .gn-proof-header h2 span { color: var(--wp--preset--color--cta-hover); } .gn-proof-body { font-family: var(--wp--preset--font-family--body); font-size: 16px; color: var(--wp--preset--color--white); line-height: 1.7; max-width: 70%; margin: 24px auto 32px auto; } /* ============ DESKTOP ACCORDION (>1024px) ============ */ .gn-proof-accordion { display: flex; gap: 8px; height: 480px; } .gn-proof-item { flex: 1; min-width: 0; position: relative; overflow: hidden; cursor: pointer; border-radius: 14px; background-size: auto 140%; background-position: center bottom; background-repeat: no-repeat; transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 6px 24px var(--shadow-mid); } /* Each photo is cropped for its slot in synced block 24, so the size follows the slot. */ .gn-proof-item:nth-child(1), .gn-proof-item:nth-child(2) { background-size: auto 120%; } .gn-proof-item:nth-child(3) { background-size: auto 100%; } .gn-proof-item:nth-child(4) { background-size: auto 103%; } /* Bottom-up colour gradient — photo dominates the top half */ .gn-proof-item::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity 0.55s ease; } .gn-proof-item::before { background: linear-gradient(to top, rgb(from var(--hue) r g b / 0.85) 0%, rgb(from var(--hue) r g b / 0.85) 32%, rgb(from var(--hue) r g b / 0.3) 62%, rgb(from var(--hue) r g b / 0) 100%); } /* Accordion expansion */ .gn-proof-item:first-child { flex: 2.6; } .gn-proof-item:hover { flex: 2.6; } .gn-proof-accordion:hover .gn-proof-item { flex: 1; } .gn-proof-accordion:hover .gn-proof-item:first-child { flex: 1; } .gn-proof-accordion:hover .gn-proof-item:hover { flex: 2.6; } /* Content layout — uses absolute positioning so the number stays fixed regardless of detail visibility or unit line count */ .gn-proof-content { position: relative; z-index: 2; height: 100%; } .gn-proof-meta { position: absolute; left: 24px; right: 24px; bottom: 170px; } .gn-proof-num { font-family: var(--wp--preset--font-family--heading); font-size: 68px; font-weight: 700; line-height: 0.95; color: var(--wp--preset--color--white); -webkit-font-smoothing: antialiased; white-space: nowrap; margin-bottom: 8px; } .gn-proof-num-suffix { font-size: 0.42em; font-weight: 700; color: rgb(from var(--genasys-white) r g b / 0.7); margin-left: 3px; } .gn-proof-unit { font-family: var(--wp--preset--font-family--body); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(from var(--genasys-white) r g b / 0.85); line-height: 1.4; min-height: 34px; display: flex; align-items: flex-start; } .gn-proof-detail { position: absolute; left: 24px; right: 24px; bottom: 28px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s; pointer-events: none; } .gn-proof-item:first-child .gn-proof-detail { opacity: 1; transform: translateY(0); pointer-events: auto; } .gn-proof-accordion:hover .gn-proof-item:first-child .gn-proof-detail { opacity: 0; transform: translateY(10px); pointer-events: none; } .gn-proof-accordion:hover .gn-proof-item:hover .gn-proof-detail { opacity: 1; transform: translateY(0); pointer-events: auto; } .gn-proof-customer { font-family: var(--wp--preset--font-family--body); font-size: 14px; color: var(--wp--preset--color--white); line-height: 1.5; margin: 0 0 14px 0; width: 300px; } .gn-proof-customer strong { font-weight: 700; } .gn-proof-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--body); font-size: 13px; font-weight: 700; text-decoration: none; color: var(--wp--preset--color--white) !important; background: rgb(from var(--genasys-space-blue) r g b / 0.85); padding: 9px 18px; border-radius: 8px; transition: background 0.3s ease; } .gn-proof-link:hover { background: var(--wp--preset--color--ink); } .gn-proof-link svg { width: 13px; height: 13px; transition: transform 0.3s ease; } .gn-proof-link:hover svg { transform: translateX(4px); } /* ============ TABLET (≤1024px) — 2x2 grid ============ */ @media (max-width: 1024px) { .gn-proof-body { font-size: 15px; } .gn-proof-accordion { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: auto; } .gn-proof-item, .gn-proof-item:first-child, .gn-proof-item:hover { flex: none; height: 360px; } .gn-proof-accordion:hover .gn-proof-item, .gn-proof-accordion:hover .gn-proof-item:first-child, .gn-proof-accordion:hover .gn-proof-item:hover { flex: none; } .gn-proof-meta { left: 22px; right: 22px; bottom: 165px; } .gn-proof-detail { left: 22px; right: 22px; bottom: 24px; } .gn-proof-num { font-size: 56px; } .gn-proof-unit { font-size: 11px; min-height: 32px; } /* All cards show detail at all times on tablet */ .gn-proof-detail, .gn-proof-item:first-child .gn-proof-detail, .gn-proof-accordion:hover .gn-proof-item:first-child .gn-proof-detail { opacity: 1; transform: translateY(0); pointer-events: auto; transition: none; } .gn-proof-customer { font-size: 14px; margin-bottom: 12px; } } /* ============ MOBILE (≤600px) — single column ============ */ @media (max-width: 600px) { .gn-proof-header h2 { max-width: 100%; } .gn-proof-body { max-width: 100%; } .gn-proof-accordion { grid-template-columns: 1fr; gap: 14px; } .gn-proof-item, .gn-proof-item:first-child, .gn-proof-item:hover { height: 320px; } .gn-proof-meta { left: 20px; right: 20px; bottom: 155px; } .gn-proof-detail { left: 20px; right: 20px; bottom: 22px; } .gn-proof-num { font-size: 52px; } .gn-proof-customer { font-size: 14px; width: auto; max-width: 100%; } .gn-proof-link { font-size: 13px; padding: 9px 16px; } } /* §122 in STYLE-NOTES.md (repo root) */ /* §422; .visually-hidden and .gn-visually-hidden are two landing pages' names for the same rule (§427) */ .gn-sr-only, .visually-hidden, .gn-visually-hidden, figure.wp-block-table > .wp-element-caption { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* §124 in STYLE-NOTES.md (repo root) */ @media (max-width: 600px) { .gn-site-header .wp-block-image img { width: 116px; height: auto; } /* §125 in STYLE-NOTES.md (repo root) */ .gn-site-header.gn-condensed .gn-header-inner .wp-block-image img { width: 96px; } } /* §126 in STYLE-NOTES.md (repo root) */ .gn-band--accent :is(p, li) { font-size: 16.5px; } .gn-band--accent h2 + p { margin-block-start: 20px; } .gn-band--accent ul.wp-block-list { margin-block-start: 16px; margin-block-end: 0; } .gn-band--accent ul.wp-block-list li { margin-bottom: 2px; } .gn-band--accent ul.wp-block-list + p { margin-block-start: 24px; } /* §127 in STYLE-NOTES.md (repo root) */ .gn-ni-more-wrap { margin-block: 64px 40px; } /* §128, §129: the hero-post rules went with the in-content heroes (§357). */ /* §130 in STYLE-NOTES.md (repo root) */ /* §131 in STYLE-NOTES.md (repo root) */ .gn-feat { position: relative; } .gn-feat::before { content: ""; display: block; width: 48px; height: 48px; border-radius: 12px; background: var(--hue, var(--wp--preset--color--cta)); margin-bottom: 24px; } .gn-feat::after { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 48px; background: var(--wp--preset--color--white); -webkit-mask: var(--gn-feat-icon) center / 26px no-repeat; mask: var(--gn-feat-icon) center / 26px no-repeat; } .gn-feat h2 { color: var(--wp--preset--color--ink); } .gn-feat ul { list-style: none; padding-left: 0; } .gn-feat ul li { position: relative; padding-left: 32px; } .gn-feat ul li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--hue, var(--wp--preset--color--cta)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat; } /* The CTA is the text-link archetype, not a pill: coloured text, global chevron, hover to ink. Scoped so the pill styling from theme.json is undone only here. */ .gn-feat .wp-block-button__link { background: none; padding: 0; border-radius: 0; color: var(--hue, var(--wp--preset--color--cta)); font-size: 18px; font-weight: 700; } .gn-feat .wp-block-button__link:hover { background: none; color: var(--wp--preset--color--ink); } .gn-feat--claims { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4'/%3E%3C/svg%3E"); } /* §132 in STYLE-NOTES.md (repo root) */ /* Vertical padding tracks the section token so a band boundary and a plain boundary measure the same. The horizontal value is unrelated and stays. */ .gn-band { padding: var(--gn-section-space) 20px; } /* §133 in STYLE-NOTES.md (repo root) */ .gn-band--full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* §134 in STYLE-NOTES.md (repo root) */ .gn-band--accent { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); } /* §135 in STYLE-NOTES.md (repo root) */ .gn-band--primary { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); } /* The pale page grey under the homepage carousel (STYLE-NOTES §386). */ .gn-band--page { background-color: var(--surface-page); } /* §136 in STYLE-NOTES.md (repo root) */ @media (max-width: 600px) { .gn-band { padding: 40px 16px; } } /* §137 in STYLE-NOTES.md (repo root) */ .gn-carousel-items { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px 24px; } /* Info boxes: a flexible column, capped so three or four sit per row rather than stretching to half the page when only two are left on the last row. */ .gn-carousel-items > .wp-block-group { flex: 1 1 240px; max-width: 320px; text-align: left; } /* §138 in STYLE-NOTES.md (repo root) */ .gn-info-box { border: 2px solid var(--wp--preset--color--primary); border-radius: 20px; padding: 20px 22px 22px; /* §139 in STYLE-NOTES.md (repo root) */ align-self: stretch; /* §140 in STYLE-NOTES.md (repo root) */ margin-block: 0 !important; } .gn-info-box p:last-child { margin-bottom: 0; } /* §144 in STYLE-NOTES.md (repo root) */ .gn-bene-band .gn-info-box { background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); } /* §145 in STYLE-NOTES.md (repo root) */ .gn-info-box > strong, .gn-info-box strong > span { display: block; text-align: center; } .gn-info-box p { text-align: center; } /* §146 in STYLE-NOTES.md (repo root) */ /* §147 in STYLE-NOTES.md (repo root) */ .gn-bene-carousel:has(.gn-carousel--bene) { display: block; } .gn-carousel--bene { width: 100%; } /* The benefit cards carry a heading and copy, not the pillar cards' icon and pill list, so they need their own inner padding. */ .gn-carousel--bene .gn-carousel-card { padding: 32px 28px; /* The band is navy and sets white copy for the boxes that used to sit directly on it. On a white carousel card that is white on white, so the card states its own colour. */ color: var(--wp--preset--color--ink); } .gn-carousel--bene .gn-carousel-card p { font-size: 16.5px; line-height: 1.6; margin: 12px 0 0; } .gn-carousel--bene .gn-carousel-card strong { font-size: 18px; line-height: 1.3; } .gn-bene-carousel:has(.gn-bene-strip) { position: relative; display: block; } .gn-bene-strip { display: flex; flex-wrap: nowrap; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 24px; padding-block: 4px; /* the arrows and the peeking next card are the affordance; a scrollbar under the boxes is not part of the design, and hiding it changes nothing about keyboard or touch scrolling */ scrollbar-width: none; } .gn-bene-strip::-webkit-scrollbar { display: none; } /* 320 leaves a fourth box part-showing in 1100px of width, which is the "there is more" signal. On a phone one box takes most of the width and the next still peeks. */ .gn-bene-strip > .gn-info-box { flex: 0 0 min(320px, 84%); max-width: none; scroll-snap-align: start; } @media (prefers-reduced-motion: reduce) { /* the arrows still work; they simply jump rather than glide */ .gn-bene-strip { scroll-behavior: auto; } } /* Short labels: size to content so they read as chips rather than columns. */ .gn-carousel-items > p { flex: 0 0 auto; margin: 0; } @media (max-width: 600px) { .gn-carousel-items { gap: 12px 16px; } .gn-carousel-items > .wp-block-group { flex-basis: 100%; max-width: none; } } /* §151 in STYLE-NOTES.md (repo root) */ /* §152 in STYLE-NOTES.md (repo root) */ .gn-logos-grid > *::before, .gn-int-partner::after { background-image: conic-gradient(from var(--gn-chase-angle), transparent 0%, transparent 35%, rgb(from var(--hue) r g b / var(--gn-chase-a1, 0.3)) 48%, rgb(from var(--hue) r g b / var(--gn-chase-a2, 0.7)) 53%, var(--wp--preset--color--white) 56%, rgb(from var(--hue) r g b / var(--gn-chase-a2, 0.7)) 59%, rgb(from var(--hue) r g b / var(--gn-chase-a1, 0.3)) 64%, transparent 70%, transparent 100%); } @property --gn-chase-angle { syntax: ''; initial-value: 0deg; inherits: false; } .gn-logos { padding: 0; max-width: 1100px; margin: 0 auto; font-family: var(--wp--preset--font-family--body); text-align: center; } .gn-logos-heading { color: var(--wp--preset--color--primary); padding: 0; margin-left: auto; margin-right: auto; } .gn-logos-subheading { font-family: var(--wp--preset--font-family--body); font-size: 16.5px; font-weight: 400; color: var(--wp--preset--color--ink); line-height: 1.6; padding: 0; max-width: 70%; margin-left: auto; margin-right: auto; } .gn-logos-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding-top: 20px; padding-bottom: 40px; } .gn-logos-grid > * { position: relative; background: var(--wp--preset--color--white); border-radius: 12px; padding: 32px 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px var(--shadow-soft); transition: transform 0.4s ease, box-shadow 0.4s ease; overflow: visible; cursor: default; } .gn-logos-grid > * img { max-width: 140px; max-height: 48px; width: auto; height: auto; object-fit: contain; filter: grayscale(100%) opacity(0.5); transition: filter 0.4s ease; } .gn-logos-grid > *:hover img { filter: grayscale(0%) opacity(1); } .gn-logos-grid > *:hover { transform: scale(1.04); box-shadow: 0 10px 28px var(--shadow-mid); } /* Chasing border - base */ .gn-logos-grid > *::before { content: ''; position: absolute; inset: -2px; border-radius: 14px; padding: 2px; -webkit-mask: linear-gradient(var(--wp--preset--color--white) 0 0) content-box, linear-gradient(var(--wp--preset--color--white) 0 0); mask: linear-gradient(var(--wp--preset--color--white) 0 0) content-box, linear-gradient(var(--wp--preset--color--white) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; z-index: 1; pointer-events: none; } .gn-logos-grid > *:hover::before { opacity: 1; animation: gn-chase-spin 1.4s linear infinite; } @keyframes gn-chase-spin { to { --gn-chase-angle: 360deg; } } /* Same guard the partner cards and the team photos carry: colour and shadow stay, scale and spin go. Placed after the hover rules it overrides, since it only ties them on specificity. */ @media (prefers-reduced-motion: reduce) { .gn-logos-grid > * { transition: none; } .gn-logos-grid > *:hover { transform: none; } .gn-logos-grid > *:hover::before { animation: none; } } /* Each card gets a unique chase colour; the ring itself is on :root */ .gn-logos-grid > *:nth-child(1) { --hue: var(--wp--preset--color--accent); } .gn-logos-grid > *:nth-child(2) { --hue: var(--wp--preset--color--cta); } .gn-logos-grid > *:nth-child(3) { --hue: var(--wp--preset--color--accent); } .gn-logos-grid > *:nth-child(4) { --hue: var(--wp--preset--color--purple); } .gn-logos-grid > *:nth-child(5) { --hue: var(--wp--preset--color--cta-hover); } .gn-logos-grid > *:nth-child(6) { --hue: var(--wp--preset--color--steel); } .gn-logos-grid > *:nth-child(7) { --hue: var(--wp--preset--color--accent); } .gn-logos-grid > *:nth-child(8) { --hue: var(--wp--preset--color--cta); } .gn-logos-grid > *:nth-child(9) { --hue: var(--wp--preset--color--accent); } .gn-logos-grid > *:nth-child(10) { --hue: var(--wp--preset--color--ink); } .gn-logos-grid > *:nth-child(11) { --hue: var(--wp--preset--color--primary); } .gn-logos-grid > *:nth-child(12) { --hue: var(--wp--preset--color--pale-steel); --gn-chase-a1: 0.4; --gn-chase-a2: 0.8; } .gn-logos-grid > *:nth-child(13) { --hue: var(--wp--preset--color--purple); } .gn-logos-grid > *:nth-child(14) { --hue: var(--wp--preset--color--accent); } .gn-logos-grid > *:nth-child(15) { --hue: var(--wp--preset--color--cta); } /* Text link button */ .gn-logos-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--body); font-size: 18px !important; font-weight: 700; color: var(--wp--preset--color--accent); text-decoration: none; transition: color 0.3s ease; } /* The tinted logo band ends with room below its link, inside the band. It used to be a 60px margin on the link, from before the section token existed, which then added itself to the token's gap. A page that removes the tint removes this too (policy-administration.css): a white section carries no padding. */ .gn-logos-link:hover { color: var(--wp--preset--color--ink); } .gn-logos-link svg { width: 14px; height: 14px; transition: transform 0.3s ease; } .gn-logos-link:hover svg { transform: translateX(6px); } @media (max-width: 1024px) { .gn-logos-grid { grid-template-columns: repeat(3, 1fr); } .gn-logos-subheading { font-size: 15px; } } @media (max-width: 600px) { /* §154 in STYLE-NOTES.md (repo root) */ .gn-logos-grid > * img { max-width: 110px; max-height: 36px; } .gn-logos-heading { line-height: 1.3; max-width: 100%; } .gn-logos-subheading { font-size: 14.5px; max-width: 100%; } .gn-logos-link { font-size: 14px !important; } } /* §155 in STYLE-NOTES.md (repo root) */ .gn-carousel { overflow-x: clip; } /* §156 in STYLE-NOTES.md (repo root) */ .gn-logos-grid { padding-inline: 20px; } /* Base state is visible; the fade is the enhancement, not the gate. */ @keyframes gn-logos-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .gn-logos-grid > * { animation: gn-logos-in 0.5s ease both; } .gn-logos-grid > *:nth-child(1) { animation-delay: 0ms; } .gn-logos-grid > *:nth-child(2) { animation-delay: 50ms; } .gn-logos-grid > *:nth-child(3) { animation-delay: 100ms; } .gn-logos-grid > *:nth-child(4) { animation-delay: 150ms; } .gn-logos-grid > *:nth-child(5) { animation-delay: 200ms; } .gn-logos-grid > *:nth-child(n+6) { animation-delay: 250ms; } /* §157 in STYLE-NOTES.md (repo root) */ @media (prefers-reduced-motion: no-preference) { html.gn-js .gn-logos-grid > * { animation: none; opacity: 0; transform: translateY(20px); } html.gn-js .gn-logos-grid > *.gn-in { animation: gn-logos-in 0.5s ease both; } } /* The load stagger was never inside a motion guard. It is now: a visitor who has asked for less motion gets fifteen still cards. */ @media (prefers-reduced-motion: reduce) { .gn-logos-grid > * { animation: none; } } @media (max-width: 600px) { .gn-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .gn-logos-grid > * { padding: 20px 12px; } /* §158 in STYLE-NOTES.md (repo root) */ .gn-logos-grid { overflow-x: clip; } /* NOTE: clip is correct ONLY where hover cannot happen. See the padding rule outside this media block for the wider widths. */ } /* §159, §160: the end-of-post CTA box (.gn-cta-final) is retired; every post ends with the GN CTA band (§360). */ /* §354 in STYLE-NOTES.md (repo root). The resource card: an image, a title, one line and a button, promoting a guide or the newsletter inside a post. The synced blocks "GN Resource Card — ..." and the Resource Card pattern. */ .wp-block-group.gn-res-card { max-width: 520px; margin-inline: auto; border: 1px solid var(--wp--preset--color--pale-steel); border-radius: 12px; overflow: hidden; } .gn-res-card > *, .gn-res-card-body > * { margin-block: 0 !important; } .gn-res-card .wp-block-image img { display: block; width: 100%; height: auto; } .gn-res-card-body { padding: 20px; } .gn-res-card-body > .gn-res-card-title { margin-bottom: 8px !important; font-size: 1.1em; font-weight: 700; } .gn-res-card-body > .wp-block-buttons { margin-top: 12px !important; } /* §161 in STYLE-NOTES.md (repo root) */ /* What's Included carousel (homepage style) */ /* §162 in STYLE-NOTES.md (repo root) */ .gn-carousel-section.gn-carousel-section { font-family: var(--wp--preset--font-family--body); max-width: 1100px; margin: 0 auto; padding: 0; text-align: center; } .gn-carousel-section-heading.gn-carousel-section-heading { font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--primary); margin: 0 auto 32px auto; line-height: 1.1; max-width: 70%; -webkit-font-smoothing: antialiased; } .gn-carousel-section-heading .gn-heading-accent { color: var(--wp--preset--color--accent); } .gn-carousel-section-body.gn-carousel-section-body { font-family: var(--wp--preset--font-family--body); font-size: 16.5px; font-weight: 400; color: var(--neutral-500); margin: 28px auto 68px auto; max-width: 70%; line-height: 1.5; } /* §163 in STYLE-NOTES.md (repo root) */ .gn-carousel-closing.gn-carousel-closing { max-width: 1100px; margin: 40px auto 0; text-align: center; } .gn-carousel-closing.gn-carousel-closing p { font-family: var(--wp--preset--font-family--body); font-size: 16.5px; font-weight: 700; color: var(--neutral-500); max-width: 70%; margin: 0 auto; line-height: 1.5; } /* §164 in STYLE-NOTES.md (repo root) */ .gn-carousel.gn-carousel { font-family: var(--wp--preset--font-family--body); position: relative; max-width: 1100px; margin: 0 auto; padding: 0 60px; opacity: 0; transition: opacity 0.6s ease; } .gn-carousel.gn-visible { opacity: 1; } .gn-carousel-stage { position: relative; height: 460px; overflow: visible; } .gn-carousel-card { position: absolute; top: 50%; border-radius: 16px; width: 360px; background: var(--wp--preset--color--white); border: none; box-shadow: 0 4px 20px var(--shadow-soft); transition: left 0.65s cubic-bezier(0.23,1,0.32,1), right 0.65s cubic-bezier(0.23,1,0.32,1), transform 0.65s cubic-bezier(0.23,1,0.32,1), opacity 0.65s cubic-bezier(0.23,1,0.32,1), box-shadow 0.65s cubic-bezier(0.23,1,0.32,1), border-color 0.3s ease; visibility: hidden; transform: translateY(-40%) scale(0.85); } .gn-carousel-card.gn-entered { visibility: visible; } .gn-carousel-card.gn-hue-accent { background: linear-gradient(to bottom, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 65%, #e6f7f7 100%); } .gn-carousel-card.gn-hue-primary { background: linear-gradient(to bottom, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 65%, #e0eaf5 100%); } .gn-carousel-card.gn-hue-purple { background: linear-gradient(to bottom, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 65%, #f0e3f3 100%); } /* Every part of a card reads its colour from the card's .gn-hue-* class. */ .gn-carousel-card .gn-carousel-bar { background: var(--hue); } .gn-carousel-card .gn-carousel-icon { background: var(--hue); } .gn-carousel-card .gn-carousel-subtitle { color: var(--hue); } .gn-carousel-card .gn-carousel-pill-dot { background: var(--hue); } .gn-carousel-card .gn-carousel-ticks svg { color: var(--hue); } .gn-carousel-dot.gn-dot-active { background: var(--hue); } /* Cards outside the three-card window (a carousel with more than three, like Connectivity's benefits). Hidden rather than removed, so the rotation can bring them in without a reflow. */ .gn-carousel-card[data-pos="off"] { left: 50%; transform: translate(-50%, -50%) scale(0.85); opacity: 0; visibility: hidden; pointer-events: none; z-index: 0; } .gn-carousel-card[data-pos="left"] { left: 0; transform: translateY(-50%) scale(0.88); opacity: 0.55; z-index: 1; } .gn-carousel-card[data-pos="center"] { left: 50%; transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 3; box-shadow: 0 12px 40px var(--shadow-mid); } .gn-carousel-card[data-pos="right"] { right: 0; left: auto; transform: translateY(-50%) scale(0.88); opacity: 0.55; z-index: 1; } .gn-carousel-card[data-pos="left"]:hover, .gn-carousel-card[data-pos="right"]:hover { opacity: 0.75; box-shadow: 0 4px 20px var(--shadow-mid); cursor: pointer; } .gn-carousel-card[data-pos="center"]:hover { box-shadow: 0 16px 48px var(--shadow-mid); } .gn-carousel .gn-carousel-bar { height: 3px; width: 0; border-radius: 2px; margin-top: 6px; margin-bottom: 14px; transition: width 0.8s cubic-bezier(0.23,1,0.32,1) 0.3s; position: relative; z-index: 1; } .gn-carousel-card[data-pos="center"] .gn-carousel-bar { width: 64px; } .gn-carousel-card[data-pos="left"] .gn-carousel-bar, .gn-carousel-card[data-pos="right"] .gn-carousel-bar { transition: width 0.3s ease 0s; } /* §165 in STYLE-NOTES.md (repo root) */ .gn-carousel .gn-carousel-body { padding: 32px 32px 36px; position: relative; } .gn-carousel-num { font-size: 7em; font-weight: 700; line-height: 1; color: rgb(from var(--genasys-space-blue) r g b / 0.06); position: absolute; top: 8px; right: 20px; pointer-events: none; transition: color 0.5s ease; font-family: var(--wp--preset--font-family--heading); } .gn-carousel-card[data-pos="center"] .gn-carousel-num { color: rgb(from var(--genasys-space-blue) r g b / 0.06); } .gn-carousel .gn-carousel-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--wp--preset--color--white); position: relative; z-index: 1; transition: transform 0.5s cubic-bezier(0.23,1,0.32,1); } .gn-carousel-card[data-pos="center"] .gn-carousel-icon { transform: scale(1.06); } .gn-carousel-icon svg { width: 26px; height: 26px; } .gn-carousel-card[data-pos="center"] .gn-wheel { animation: gn-wheel-spin 1.8s linear infinite; } .gn-carousel-card[data-pos="center"] .gn-steam-1 { animation: gn-steam 1.8s ease-in-out infinite; } .gn-carousel-card[data-pos="center"] .gn-steam-2 { animation: gn-steam 1.8s ease-in-out infinite 0.3s; } .gn-carousel-card[data-pos="center"] .gn-steam-3 { animation: gn-steam 1.8s ease-in-out infinite 0.6s; } .gn-carousel-card[data-pos="center"] .gn-person-1 { animation: gn-bob 2s ease-in-out infinite; } .gn-carousel-card[data-pos="center"] .gn-person-2 { animation: gn-bob 2s ease-in-out infinite 1s; } .gn-carousel-title { font-size: 30px; font-weight: 700; color: var(--ink-deep); margin: 0; position: relative; z-index: 1; font-family: var(--wp--preset--font-family--heading); } .gn-carousel .gn-carousel-subtitle { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 12px 0; position: relative; z-index: 1; } .gn-carousel .gn-carousel-desc { font-size: 16px; font-weight: 400; color: var(--neutral-500); line-height: 1.55; margin: 0 0 16px 0; position: relative; z-index: 1; } .gn-carousel-pills { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; } .gn-carousel .gn-carousel-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; background: rgb(from var(--genasys-space-blue) r g b / 0.06); font-size: 15px; font-weight: 600; color: var(--wp--preset--color--ink); white-space: nowrap; } .gn-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--wp--preset--color--white); border: 1px solid rgb(from var(--genasys-space-blue) r g b / 0.06); box-shadow: 0 2px 12px var(--shadow-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: box-shadow 0.3s ease, background 0.3s ease, opacity 0.4s ease; color: var(--wp--preset--color--ink); padding: 0; margin: 0; opacity: 0; outline: none; -webkit-appearance: none; appearance: none; } .gn-carousel-arrow.gn-entered { opacity: 1; } .gn-carousel-arrow:hover { box-shadow: 0 4px 20px var(--shadow-mid); background: var(--neutral-50); } .gn-carousel-arrow svg { width: 20px; height: 20px; flex-shrink: 0; display: block; } .gn-carousel-arrow-left { left: 0; } .gn-carousel-arrow-right { right: 0; } .gn-carousel .gn-carousel-dots { display: none; justify-content: center; gap: 10px; padding-top: 24px; } /* §166 in STYLE-NOTES.md (repo root) */ /* §167 in STYLE-NOTES.md (repo root) */ /* §307 in STYLE-NOTES.md (repo root): one pause button for every auto-moving strip. */ .gn-testimonials-pause, .gn-photo-pause, .gn-chips-pause, .gn-snaps-pause { display: block; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--wp--preset--color--white); box-shadow: 0 2px 10px var(--shadow-mid); cursor: pointer; transition: box-shadow 0.2s ease; } :is(.gn-testimonials-pause, .gn-photo-pause, .gn-chips-pause, .gn-snaps-pause)::before { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: var(--wp--preset--color--primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h4v14H7zM13 5h4v14h-4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h4v14H7zM13 5h4v14h-4z'/%3E%3C/svg%3E") center / contain no-repeat; } :is(.gn-testimonials-pause, .gn-photo-pause, .gn-chips-pause, .gn-snaps-pause)[aria-pressed="true"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); } :is(.gn-testimonials-pause, .gn-photo-pause, .gn-chips-pause, .gn-snaps-pause):hover { box-shadow: 0 4px 16px var(--shadow-strong); } :is(.gn-testimonials-pause, .gn-photo-pause, .gn-chips-pause, .gn-snaps-pause):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; } .gn-carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: rgb(from var(--genasys-space-blue) r g b / 0.12); border: none; padding: 0; margin: 0; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; -webkit-appearance: none; appearance: none; } .gn-carousel-dot:hover { background: rgb(from var(--genasys-space-blue) r g b / 0.3); } .gn-carousel-dot.gn-dot-active { transform: scale(1.2); } /* §168 in STYLE-NOTES.md (repo root) */ .gn-carousel-arrow:focus-visible { outline: 2px solid var(--wp--preset--color--primary) !important; outline-offset: 2px; } .gn-carousel-dot:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; } @media (max-width: 1024px) { .gn-carousel-section-body.gn-carousel-section-body { font-size: 15.5px; margin-bottom: 56px; } .gn-carousel.gn-carousel { padding: 0 24px; } .gn-carousel-arrow { width: 38px; height: 38px; } .gn-carousel-arrow svg { width: 17px; height: 17px; } .gn-carousel-arrow-left { left: -4px; } .gn-carousel-arrow-right { right: -4px; } .gn-carousel .gn-carousel-dots { display: flex; } } @media (max-width: 600px) { .gn-carousel-section-heading.gn-carousel-section-heading { max-width: 100%; } .gn-carousel-section-body.gn-carousel-section-body { font-size: 15px; margin-bottom: 28px; max-width: 100%; } .gn-carousel.gn-carousel { padding: 0 16px 4px; } .gn-carousel-stage { height: auto !important; overflow: visible; } .gn-carousel-card { width: 100% !important; max-width: 100%; } .gn-carousel-card[data-pos="center"] { position: relative !important; left: auto !important; transform: none !important; opacity: 1 !important; box-shadow: 0 8px 30px var(--shadow-soft) !important; margin: 0 auto; z-index: 3 !important; } .gn-carousel-card[data-pos="left"], .gn-carousel-card[data-pos="right"] { opacity: 0 !important; pointer-events: none !important; position: absolute !important; left: -200% !important; } .gn-carousel .gn-carousel-body { padding: 24px 24px 28px; } .gn-carousel-num { font-size: 5em; } .gn-carousel-title { font-size: 26px; } .gn-carousel .gn-carousel-desc { font-size: 15px; } .gn-carousel .gn-carousel-pill { font-size: 13px; padding: 3px 10px; } .gn-carousel .gn-carousel-dots { padding-top: 20px; } } /* §169 in STYLE-NOTES.md (repo root) */ .entry-content iframe { max-width: 100%; } @media (max-width: 781px) { .entry-content iframe { width: 100%; } } /* §170 in STYLE-NOTES.md (repo root) */ @media (max-width: 781px) { .entry-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Long unbroken strings, mostly reference URLs, must wrap rather than widen the page. Same sweep: three glossary posts overflowed 390px by 20-40px on a single long link. */ .entry-content { overflow-wrap: break-word; } /* §171 in STYLE-NOTES.md (repo root) */ html { overflow-x: clip; } /* §172 in STYLE-NOTES.md (repo root) */ .gn-job-hero { position: relative; background: radial-gradient(120% 95% at 50% 0%, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--ink) 100%); color: var(--wp--preset--color--white); padding: 64px 24px 0; overflow: hidden; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } .gn-job-hero-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; } .gn-job-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 6px 16px 6px 13px; border-radius: 999px; } .gn-job-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--accent); } .gn-job-hero h1, .gn-job-hero .wp-block-post-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 56px; line-height: 1.04; letter-spacing: -.02em; margin: 20px 0 0; color: var(--wp--preset--color--white); text-wrap: balance; } /* §173 in STYLE-NOTES.md (repo root) */ .gn-job-hero .gn-job-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin: 30px 0 64px; padding: 0; list-style: none; } /* §174 in STYLE-NOTES.md (repo root) */ .gn-job-hero .gn-job-badge span { color: var(--wp--preset--color--white); font-size: 14px; } .gn-job-hero .gn-job-badge svg { fill: var(--wp--preset--color--white); opacity: .85; } /* The six-colour rule under the hero, and the short rule under each h2. */ .gn-job-spectrum { position: relative; z-index: 2; height: 3px; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent) 22%, var(--wp--preset--color--cta-hover) 44%, var(--wp--preset--color--cta) 66%, var(--wp--preset--color--purple) 84%, var(--wp--preset--color--ink) 100%); } /* Body. Scoped to the job template's content so it styles whatever blocks a vacancy is written with, rather than requiring hand-built markup. */ .gn-job-body { max-width: 720px; margin: 0 auto; padding: 64px 24px 60px; color: var(--text-body); } .gn-job-body p { font-size: 17px; line-height: 1.75; margin: 0 0 22px; text-wrap: pretty; } .gn-job-body h2 { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 30px; line-height: 1.18; letter-spacing: -.015em; color: var(--wp--preset--color--ink); margin: 60px 0 8px; } .gn-job-body > *:first-child h2, .gn-job-body > h2:first-child { margin-top: 0; } .gn-job-body h2::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; margin-top: 16px; background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent) 22%, var(--wp--preset--color--cta-hover) 44%, var(--wp--preset--color--cta) 66%, var(--wp--preset--color--purple) 84%, var(--wp--preset--color--ink) 100%); } .gn-job-body h2 + p { margin-top: 22px; } .gn-job-body h3 { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 19px; color: var(--wp--preset--color--primary); margin: 32px 0 12px; } .gn-job-body ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; } .gn-job-body ul li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.6; } /* U+25B8, the small right-pointing triangle the original used. Written as an escape rather than a literal so it survives any re-encoding of this file. */ .gn-job-body ul li::before { content: "\25B8"; position: absolute; left: 0; top: 0; color: var(--wp--preset--color--accent); font-size: 15px; line-height: 1.8; } .gn-job-body a { color: var(--wp--preset--color--primary); text-decoration: none; border-bottom: 1px solid rgb(from var(--genasys-sapphire-blue) r g b / 0.3); transition: border-color .2s ease; } .gn-job-body a:hover { border-bottom-color: var(--wp--preset--color--primary); } /* Apply card. The band and shell; the application form inside it is rendered by the genasys-careers-endpoint plugin ([genasys_careers_form]), which carries the form's own styles. */ .gn-job-apply { background: var(--wp--preset--color--white); border-radius: 16px; box-shadow: 0 4px 20px var(--shadow-mid); overflow: hidden; margin: 52px 0 0; } /* §175 in STYLE-NOTES.md (repo root) */ .gn-job-travel { background: var(--wp--preset--color--cta); border-radius: 16px; box-shadow: 0 4px 20px var(--shadow-mid); padding: 24px 28px; margin: 52px 0; } .gn-job-travel :is(h2, h3) { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 20px; color: var(--wp--preset--color--white); margin: 0 0 8px; } .gn-job-travel :is(h2, h3)::after { display: none; } .gn-job-travel p { font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--white); margin: 0; } .gn-job-apply-band { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 18px; padding: 14px 28px; } .gn-job-apply-body { padding: 28px; } .gn-job-apply-body p { margin: 0 0 12px; } .gn-job-apply-body p:last-child { margin-bottom: 0; } @media (max-width: 680px) { .gn-job-hero { padding: 48px 20px 0; } .gn-job-hero h1, .gn-job-hero .wp-block-post-title { font-size: 36px; } .gn-job-hero .gn-job-badges { margin-bottom: 48px; } /* §426 */ .gn-job-body { padding: 48px 0; } .gn-job-body h2 { font-size: 25px; margin-top: 48px; } .gn-job-apply-band, .gn-job-apply-body { padding-inline: 20px; } } /* §176 in STYLE-NOTES.md (repo root) */ .gn-job-closed { background: var(--neutral-50); border-left: 4px solid var(--wp--preset--color--cta); border-radius: 8px; padding: 20px 24px; margin: 0 0 36px; } .gn-job-closed p { margin: 0; } /* === gn article/figure components, hoisted 2026-08-13 (hoist-article.py) === */ /* Shared by the ga-/fig-/ref-toggle article posts; each statement appeared byte-identical in at least three of them. The bespoke remainders joined them on 27 September 2026: see §357 below. */ *{box-sizing:border-box;} @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body{margin:0;font-family:var(--font-body);color:var(--text-body);background:var(--wp--preset--color--white);-webkit-font-smoothing:antialiased;} img{display:block;} /* §177 in STYLE-NOTES.md (repo root) */ /* §178 in STYLE-NOTES.md (repo root) */ /* The sticky header's script measures the header and writes --gn-header-height on the root element (functions.php, genasys_child_header_height_var_script). This is the default it starts from. Declared on `html`, not in a token block, on purpose: the token layer is harvested from the root blocks and verified against what computes there, and a value a script rewrites can never pass that check. It is chrome state, not a design token. (And do not write the root selector's name in this comment: the harvester's regex would match it and take the declaration below as a token.) */ html { --gn-header-height: 93px; } :root { /* ---- Brand palette (raw) ---------------------------------- */ --genasys-sapphire-blue: #004EAA; --genasys-space-blue: #2F3351; --genasys-white: #FFFFFF; --genasys-sky-blue: #547EC1; --genasys-steel-blue: #9FB6D4; --genasys-sea-green: #00B2B1; --genasys-mellow-yellow: #F1B53D; --genasys-sizzling-red: #E10054; --genasys-purple: #B24EBE; --genasys-sapphire-deep: #003F89; --genasys-sea-green-deep: #00918F; /* sea green darkened for TEXT on white, where #00B2B1 reads 2.9:1; the Product page's connectivity metric. Named 4 September 2026, same idea as sapphire-deep. */ /* sapphire darkened one step; hover states. Renamed 2026-08-30 from the alias layer's orphaned primary-hover token. */ --genasys-gradient-line: linear-gradient(90deg, #004EAA 0%, #00B2B1 22%, #F1B53D 44%, #E10054 66%, #B24EBE 84%, #2F3351 100%); /* ---- Neutral ramp (derived from Space Blue) --------------- */ --neutral-50: #F6F8FB; --neutral-100: #EDF1F7; --neutral-200: #DCE3ED; --neutral-300: #C2CDDD; --neutral-400: #9AA6BC; --neutral-500: #6B7589; --neutral-600: #4C5468; --neutral-700: #353B52; /* ---- Semantic aliases ------------------------------------- */ --text-strong: var(--genasys-space-blue); --text-body: #3A4055; --text-muted: var(--neutral-500); --text-link: var(--genasys-sapphire-blue); --surface-page: var(--neutral-50); --surface-card: var(--genasys-white); --border-subtle: var(--neutral-200); /* §179 in STYLE-NOTES.md (repo root) */ --ink-deep: #1A1E38; /* §180 in STYLE-NOTES.md (repo root) */ --shadow-soft: rgba(47, 51, 81, 0.06); --shadow-mid: rgba(47, 51, 81, 0.12); --shadow-strong: rgba(47, 51, 81, 0.3); } :root { --font-display: "Avenir Next LT Pro", "Avenir Next", "Segoe UI", system-ui, sans-serif; --font-body: "Source Sans Pro", "Source Sans 3", "Segoe UI", system-ui, sans-serif; } :root { --radius-pill: 999px; --card-radius: 16px; --card-shadow: 0 4px 20px var(--shadow-soft); --card-border: 1px solid transparent; } .gn-exp-infographic{margin:44px 0 0 !important;width:100%;padding-bottom:52px;} .fig-card{padding:26px 26px 22px;background:var(--surface-card);border-radius:var(--card-radius);box-shadow:var(--card-shadow);border:var(--card-border);} .fig-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;} .fig-ic{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--wp--preset--color--white);} .fig-ic svg{width:21px;height:21px;} .fig-head .gn-exp-fig-title{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.2;color:var(--text-strong);margin:0;letter-spacing:-.01em;} .fig-source{margin:14px auto 0;text-align:center;font-size:12px;line-height:1.5;color:var(--neutral-400);} .fig-grid{display:grid;gap:14px;} .fig-grid--4{grid-template-columns:repeat(4,1fr);} .fig-grid--3{grid-template-columns:repeat(3,1fr);} .fig-grid--2{grid-template-columns:repeat(2,1fr);} .gn-exp-fig-tile{border-radius:14px;padding:24px 16px 18px;text-align:center;color:var(--wp--preset--color--white);} .gn-exp-fig-tile .ic{width:34px;height:34px;margin:0 auto 14px;} .gn-exp-fig-tile .ic svg{width:100%;height:100%;} .gn-exp-fig-tile .gn-exp-num{font-family:var(--font-display);font-weight:700;font-size:38px;line-height:1;} .gn-exp-fig-tile .gn-exp-lbl{font-size:13px;margin-top:10px;opacity:.95;} .gn-exp-fig-stat{border-radius:12px;padding:22px 16px;text-align:center;background:var(--surface-page);border:1px solid var(--border-subtle);} .gn-exp-fig-stat .gn-exp-num{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1;color:var(--genasys-sapphire-blue);} .gn-exp-fig-stat .gn-exp-lbl{font-size:13px;color:var(--neutral-600);margin-top:11px;} .cos-row{display:flex;align-items:center;gap:18px;background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:12px;padding:18px 22px;} .cos-row + .cos-row{margin-top:12px;} .cos-badge{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--wp--preset--color--white);font-family:var(--font-display);font-weight:700;font-size:19px;} .cos-main{flex:1 1 auto;min-width:0;} .cos-link{font-size:11px;font-weight:700;letter-spacing:1px;} .cos-title{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--text-strong);margin:3px 0;} .cos-desc{font-size:13px;color:var(--neutral-600);} .cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .gn-exp-cmp-col{border-radius:14px;padding:22px 22px 20px;} .gn-exp-cmp-col.legacy{background:var(--surface-page);border:1px solid var(--border-subtle);} .gn-exp-cmp-col.modern{background:rgb(from var(--genasys-sea-green) r g b / 0.06);border:1px solid rgb(from var(--genasys-sea-green) r g b / 0.3);} .gn-exp-cmp-col h4{font-family:var(--font-display);font-weight:700;font-size:16px;margin:0 0 14px;color:var(--text-strong);display:flex;align-items:center;gap:9px;} .gn-exp-cmp-col h4 .gn-exp-tag{flex:none;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--wp--preset--color--white);} .gn-exp-cmp-col h4 .gn-exp-tag svg{width:14px;height:14px;} .gn-exp-cmp-col.legacy h4 .gn-exp-tag{background:var(--genasys-steel-blue);} .gn-exp-cmp-col.modern h4 .gn-exp-tag{background:var(--genasys-sea-green);} .gn-exp-cmp-col ul{list-style:none;margin:0;padding:0;} .gn-exp-cmp-col li{font-size:13.5px;line-height:1.5;color:var(--neutral-700);padding:0 0 0 22px;margin-bottom:11px;position:relative;} .gn-exp-cmp-col li:last-child{margin-bottom:0;} .gn-exp-cmp-col li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;} .gn-exp-cmp-col.legacy li::before{background:var(--genasys-steel-blue);} .gn-exp-cmp-col.modern li::before{background:var(--genasys-sea-green);} .gn-exp-cmp-col li strong{color:var(--text-strong);font-weight:700;} @media (prefers-reduced-motion: no-preference){ html.gn-js .gn-exp-infographic{transform:translateY(22px);transition:transform .7s cubic-bezier(.22,1,.36,1);} html.gn-js .gn-exp-infographic.gn-in{transform:none;} } @media(max-width:700px){ .fig-grid--4{grid-template-columns:repeat(2,1fr);} .fig-grid--3{grid-template-columns:repeat(2,1fr);} .fig-card{padding:22px 18px 18px;} .cmp-grid{grid-template-columns:1fr;} } @media(max-width:480px){ .fig-grid--3{grid-template-columns:1fr;} .fig-grid--2{grid-template-columns:1fr;} .cos-row{flex-direction:column;align-items:flex-start;gap:14px;padding:18px;} .gn-exp-fig-tile .gn-exp-num{font-size:34px;} .fig-head{gap:12px;margin-bottom:16px;} .fig-head .gn-exp-fig-title{font-size:17px;} } /* The theme sets an explicit h4 colour, which beats the colour .func-tile sets for its children to inherit; blue-on-blue on the reinsurance post until this. */ .entry-content .func-tile h4 { color: inherit; } /* §357 in STYLE-NOTES.md (repo root): the article kit. What nine post stylesheets and the .article wrapper held, as components any post can use. A post's typography is the standard post's; these are the pieces inside it. A figure's variant is a class on the figure. */ /* Width: the text's measure, for the pieces the measure rule cannot see. */ body.single-post .entry-content > :is(.ga-shot, .gn-clearfix, .mostread, .fail-grid) { max-width: var(--gn-post-measure); margin-left: auto; margin-right: auto; } body.single-post .entry-content > .gn-exp-infographic { max-width: var(--gn-post-measure); margin: 44px auto 0 !important; } body.single-post .entry-content > .ga-photo { max-width: var(--gn-post-measure); margin: 44px auto !important; } /* Heading label, lead paragraph, footnote markers */ .entry-content h2 .kicker{display:block;font-family:var(--font-body);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--genasys-sea-green);margin-bottom:12px;} .entry-content p.gn-ah-lead{font-weight:700;color:var(--text-strong);} /* Pull quote, epigraph, photographs, screenshots */ .entry-content .gn-ah-pull{margin-top:44px;margin-bottom:44px;padding:6px 0 6px 28px;border-left:4px solid var(--genasys-sea-green);font-family:var(--font-display);font-weight:700;font-size:27px;line-height:1.32;letter-spacing:-.01em;color:var(--text-strong);text-wrap:balance;} .entry-content .epigraph{margin-top:0;margin-bottom:36px;padding:0;font-family:var(--font-display);font-weight:700;font-size:44px;line-height:1.08;letter-spacing:-.02em;color:var(--text-strong);text-wrap:balance;} .entry-content .epigraph::after{content:"";display:block;width:64px;height:3px;border-radius:2px;background:var(--genasys-gradient-line);margin-top:22px;} .entry-content .ga-photo{width:100%;} .entry-content .ga-photo img{width:100%;height:auto;border-radius:var(--card-radius);box-shadow:var(--card-shadow);} .entry-content .ga-photo figcaption{margin-top:12px;text-align:center;font-size:13px;line-height:1.5;color:var(--neutral-500);} .entry-content .ga-photo--inline{float:right;width:280px;max-width:45%;margin:6px 0 18px 28px !important;} .entry-content .gn-clearfix::after{content:"";display:table;clear:both;} .entry-content .ga-shot{margin-top:24px;margin-bottom:8px;} .entry-content .ga-shot img{width:100%;height:auto;border-radius:var(--card-radius);box-shadow:0 16px 40px var(--shadow-mid);} .entry-content .ga-shot figcaption{font-size:14px;line-height:1.55;color:var(--text-muted);margin-top:14px;padding-left:2px;text-wrap:pretty;} .entry-content .ga-shot figcaption b{color:var(--text-strong);font-weight:700;} @media (max-width:680px){ .entry-content .gn-ah-pull{font-size:22px;padding-left:22px;margin-top:36px;margin-bottom:36px;} .entry-content .epigraph{font-size:32px;} } @media (max-width:600px){ .entry-content .ga-photo--inline{float:none;width:100%;max-width:100%;margin:32px 0 !important;} } @media (prefers-reduced-motion: no-preference){ html.gn-js .ga-photo,html.gn-js .gn-ah-pull{transform:translateY(16px);transition:transform .7s cubic-bezier(.22,1,.36,1);} html.gn-js .ga-photo.gn-in,html.gn-js .gn-ah-pull.gn-in{transform:none;} } /* Figure parts */ .gn-exp-fig-stat .gn-exp-chg{font-size:11px;font-weight:700;margin-top:8px;} .gn-exp-fig-stat .gn-exp-chg.gn-exp-up{color:var(--genasys-sea-green);} .gn-exp-fig-stat .gn-exp-chg.gn-exp-down{color:var(--genasys-sizzling-red);} .gn-exp-fig-stat .gn-exp-chg.gn-exp-flat{color:var(--neutral-500);} .cos-fig{flex:none;text-align:right;} .cos-fig .gn-cos-big{font-family:var(--font-display);font-weight:700;font-size:28px;line-height:1;} .cos-fig .gn-cos-sub{font-size:13px;color:var(--neutral-600);margin-top:6px;} .cos-meta{flex:none;font-size:13px;color:var(--neutral-500);text-align:right;} .fig-func{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .func-tile{border-radius:14px;padding:20px 17px;color:var(--wp--preset--color--white);} .func-tile .gn-exp-tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.9;} .func-tile h4{font-family:var(--font-display);font-weight:700;font-size:16px;margin:9px 0 7px;line-height:1.2;} .func-tile p{font-size:12.5px;line-height:1.5;margin:0;opacity:.95;color:inherit;} .fig-cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .gn-exp-cmp-col:where(.gn-exp-a,.gn-exp-b){padding:22px 20px;background:var(--surface-page);border:1px solid var(--border-subtle);} .gn-exp-cmp-col:where(.gn-exp-a,.gn-exp-b) h4{font-size:18px;margin:0 0 4px;letter-spacing:-.01em;} .gn-exp-cmp-col.gn-exp-a h4{color:var(--genasys-sapphire-blue);} .gn-exp-cmp-col.gn-exp-b h4{color:var(--genasys-purple);} .gn-exp-cmp-col .gn-exp-sub{font-size:13px;line-height:1.7;color:var(--neutral-500);margin:0 0 14px;} .gn-exp-cmp-col:where(.gn-exp-a,.gn-exp-b) li{padding-left:20px;margin-bottom:10px;font-size:14px;color:var(--text-body);} .gn-exp-cmp-col:where(.gn-exp-a,.gn-exp-b) li::before{top:7px;width:8px;height:8px;} .gn-exp-cmp-col.gn-exp-a li::before{background:var(--genasys-sapphire-blue);} .gn-exp-cmp-col.gn-exp-b li::before{background:var(--genasys-purple);} .fig-gloss{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .gloss-card{background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:12px;padding:16px 18px;} /* The two lines of a glossary card are set as the article's paragraphs were: the wrapper's paragraph rule outranked the card's own, and that is the look the page has had. */ .entry-content .gloss-term{font-family:var(--font-body);font-weight:700;font-size:16.5px;line-height:1.7;color:var(--text-body);margin:0 0 22px;} .entry-content .gloss-def{font-size:16.5px;line-height:1.7;color:var(--text-body);margin:0 0 22px;} @media (max-width:700px){ .fig-func{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .fig-cmp,.fig-gloss{grid-template-columns:1fr;} } @media (max-width:480px){ .fig-func{grid-template-columns:1fr;} .cos-fig,.cos-meta{text-align:left;} } /* Figure variants */ .gn-exp-infographic--dense .gn-exp-fig-tile{padding:24px 14px 18px;min-width:0;} .gn-exp-infographic--dense .gn-exp-fig-tile .gn-exp-num{font-size:27px;line-height:1.05;letter-spacing:-.015em;overflow-wrap:anywhere;} .gn-exp-infographic--dense .gn-exp-fig-tile .gn-exp-lbl{font-size:12.5px;line-height:1.4;} .gn-exp-infographic--dense .gn-exp-fig-stat{min-width:0;} .gn-exp-infographic--dense .gn-exp-fig-stat .gn-exp-num{font-size:27px;line-height:1.05;letter-spacing:-.01em;overflow-wrap:anywhere;} .gn-exp-infographic--dense .gn-exp-fig-stat .gn-exp-lbl{line-height:1.45;} @media (max-width:480px){ .gn-exp-infographic--dense .gn-exp-fig-tile .gn-exp-num{font-size:26px;} } .gn-exp-infographic--multi .gn-exp-fig-stat .gn-exp-num{font-size:28px;line-height:1.05;letter-spacing:-.01em;} .gn-exp-infographic--multi .gn-exp-fig-stat:nth-child(1) .gn-exp-num{color:var(--genasys-sapphire-blue);} .gn-exp-infographic--multi .gn-exp-fig-stat:nth-child(2) .gn-exp-num{color:var(--genasys-sea-green);} .gn-exp-infographic--multi .gn-exp-fig-stat:nth-child(3) .gn-exp-num{color:var(--genasys-space-blue);} .gn-exp-infographic--multi .gn-exp-fig-stat:nth-child(4) .gn-exp-num{color:var(--genasys-sizzling-red);} .gn-exp-infographic--multi .gn-exp-fig-stat .gn-exp-lbl{line-height:1.45;} .gn-exp-infographic--chart{padding:0;overflow:hidden;background:var(--wp--preset--color--white);} .gn-exp-infographic--chart svg{display:block;max-width:100%;height:auto;margin:0 auto;} .gn-exp-infographic--chart-card{padding:22px 22px 16px;background:var(--neutral-50);border-radius:12px;} .gn-exp-infographic--chart-card svg{width:100%;height:auto;display:block;} .gn-exp-infographic--chart-card figcaption{font-size:.78rem;color:var(--text-muted);margin-top:10px;} .gn-exp-infographic--chart-card .ga-svg text{font-family:'Source Sans 3','Source Sans Pro',Arial,sans-serif;} @media (max-width:600px){ .gn-exp-infographic--chart-card{padding:16px 14px 12px;} } /* Colour and size classes, for what posts used to set inline (§358). The values are the ones the posts carried. `gn-fill-` paints a figure's tile, badge or icon; `gn-ink-` colours a figure's label. Doubled selectors so a class outranks the piece's own colour, as the inline style did. */ .gn-fill-sapphire-blue.gn-fill-sapphire-blue{background:var(--genasys-sapphire-blue);} .gn-fill-sea-green.gn-fill-sea-green{background:var(--genasys-sea-green);} .gn-fill-purple.gn-fill-purple{background:var(--genasys-purple);} .gn-fill-sky-blue.gn-fill-sky-blue{background:var(--genasys-sky-blue);} .gn-fill-sizzling-red.gn-fill-sizzling-red{background:var(--genasys-sizzling-red);} .gn-fill-space-blue.gn-fill-space-blue{background:var(--genasys-space-blue);} .gn-fill-mellow-yellow.gn-fill-mellow-yellow{background:var(--genasys-mellow-yellow);color:var(--genasys-space-blue);} .gn-ink-sapphire-blue.gn-ink-sapphire-blue{color:var(--genasys-sapphire-blue);} .gn-ink-sea-green.gn-ink-sea-green{color:var(--genasys-sea-green);} .gn-ink-purple.gn-ink-purple{color:var(--genasys-purple);} .gn-ink-sky-blue.gn-ink-sky-blue{color:var(--genasys-sky-blue);} .gn-ink-sizzling-red.gn-ink-sizzling-red{color:var(--genasys-sizzling-red);} .gn-ink-space-blue.gn-ink-space-blue{color:var(--genasys-space-blue);} .gn-ink-mellow-yellow.gn-ink-mellow-yellow{color:var(--genasys-mellow-yellow);} .gn-exp-lbl .gn-exp-lbl-head{color:var(--genasys-sapphire-blue);font-size:15px;display:block;margin-bottom:6px;} .cos-badge svg{width:20px;height:20px;} .cos-main > .cos-title:only-child{margin:0;} .entry-content .gn-size-130{font-size:1.3em;} .entry-content .gn-size-150{font-size:1.5em;} /* Post summary box (was .container > .box) */ .entry-content p.gn-post-summary{background-color:var(--wp--preset--color--cta);border-radius:15px;padding:36px 20px;text-align:center;font-family:Arial,sans-serif;color:var(--wp--preset--color--white);} /* The Insurance Simulator pieces: most-read list, tiles, and the game promo */ .entry-content .mostread{margin-top:36px;margin-bottom:36px;background:var(--surface-card);border-radius:var(--card-radius);box-shadow:var(--card-shadow);border:var(--card-border);padding:26px 28px;} .entry-content .mostread .mr-head{display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.11em;font-size:13px;color:var(--genasys-sea-green);margin:0 0 6px;} .entry-content .mostread .mr-head::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--genasys-sizzling-red);flex:none;} .entry-content .mostread .mr-sub{font-size:13.5px;line-height:1.7;color:var(--text-muted);margin:0 0 14px;} .entry-content .mostread ol{margin:0;padding:0;list-style:none;counter-reset:mr;} .entry-content .mostread li{counter-increment:mr;display:flex;gap:15px;padding:14px 0;font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.35;color:var(--text-strong);border-top:1px solid var(--border-subtle);text-wrap:pretty;letter-spacing:-.005em;} .entry-content .mostread li:first-child{border-top:none;padding-top:2px;} .entry-content .mostread ol li:last-child{padding-bottom:14px;} .entry-content .mostread li::before{content:counter(mr);font-family:var(--font-display);color:var(--genasys-steel-blue);font-size:16px;flex:none;width:16px;} .entry-content .fail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;margin-bottom:40px;} @media (max-width:600px){ .entry-content .fail-grid{grid-template-columns:1fr;} } .entry-content .fail-tile{border-radius:var(--card-radius);padding:26px 22px;color:var(--wp--preset--color--white);} .entry-content .fail-tile .fic{width:42px;height:42px;border-radius:50%;background:rgb(from var(--genasys-white) r g b / 0.18);display:flex;align-items:center;justify-content:center;margin-bottom:16px;} .entry-content .fail-tile .fic svg{width:22px;height:22px;} /* The tiles' headings are h3s, and took the wrapper's h3 rule rather than the h4 rule below; kept as the page has had it. */ .entry-content .fail-tile h3{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.25;letter-spacing:-.01em;color:var(--text-strong);margin:34px 0 0;} .entry-content .fail-tile h4{font-family:var(--font-display);font-weight:700;font-size:19px;margin:0 0 7px;color:var(--wp--preset--color--white);letter-spacing:-.01em;} .entry-content .fail-tile p{font-size:14.5px;line-height:1.55;margin:0;color:rgb(from var(--genasys-white) r g b / 0.85);} .entry-content .gn-cta{position:relative;width:100vw;left:50%;margin-left:-50vw;background:radial-gradient(120% 120% at 50% 0%, var(--wp--preset--color--primary) 42%, var(--wp--preset--color--ink) 100%);overflow:hidden;} .entry-content .gn-cta *{box-sizing:border-box;} .entry-content .gn-cta img{display:block;} .entry-content .gn-cta .gn-cta-line{position:absolute;top:0;left:0;right:0;height:3px;background:var(--genasys-gradient-line);z-index:3;} .entry-content .gn-cta .gn-cta-glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0;} .entry-content .gn-cta .gn-cta-glow.g1{width:420px;height:420px;top:-170px;right:-120px;background:radial-gradient(circle, rgb(from var(--genasys-sea-green) r g b / 0.3), transparent 70%);} .entry-content .gn-cta .gn-cta-glow.g2{width:380px;height:380px;bottom:-190px;left:-130px;background:radial-gradient(circle, rgb(from var(--genasys-purple) r g b / 0.18), transparent 70%);} .entry-content .gn-cta .gn-cta-inner{position:relative;z-index:2;max-width:960px;margin:0 auto;padding:74px 48px;display:flex;align-items:center;gap:56px;} .entry-content .gn-cta .gn-cta-logo{flex:none;width:300px;max-width:42%;height:auto;filter:drop-shadow(0 14px 32px var(--shadow-strong));} .entry-content .gn-cta .gn-cta-content{flex:1;min-width:0;text-align:left;} .entry-content .gn-cta .gn-cta-eyebrow{font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--genasys-sea-green);margin:0 0 14px;} .entry-content .gn-cta .gn-cta-heading{font-family:var(--font-display);font-size:38px;font-weight:700;color:var(--wp--preset--color--white);line-height:1.12;margin:0 0 16px;letter-spacing:-.02em;} .entry-content .gn-cta .gn-cta-heading span{color:var(--genasys-mellow-yellow);} .entry-content .gn-cta .gn-cta-body{font-family:var(--font-body);font-size:16.5px;line-height:1.62;color:rgb(from var(--genasys-white) r g b / 0.85);margin:0 0 26px;} .entry-content .gn-cta .gn-cta-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;} .entry-content .gn-cta .brand-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 40px;background:var(--genasys-sizzling-red);color:var(--wp--preset--color--white);font-family:var(--font-body);font-size:16.5px;font-weight:700;border:none;border-radius:50px;text-decoration:none;cursor:pointer;transition:background .3s ease,color .3s ease;} .entry-content .gn-cta .brand-btn:hover{background:var(--genasys-mellow-yellow);color:var(--genasys-space-blue);} .entry-content .gn-cta .brand-btn svg{width:14px;height:14px;transition:transform .2s ease;} .entry-content .gn-cta .brand-btn:hover svg{transform:translateX(4px);} .entry-content .gn-cta .gn-cta-note{font-family:var(--font-body);font-size:13px;line-height:1.55;color:rgb(from var(--genasys-white) r g b / 0.7);margin:20px 0 0;} @media (max-width:768px){ .entry-content .gn-cta .gn-cta-inner{flex-direction:column;text-align:center;gap:30px;padding:56px 28px;} .entry-content .gn-cta .gn-cta-logo{width:240px;max-width:70%;} .entry-content .gn-cta .gn-cta-content{text-align:center;} .entry-content .gn-cta .gn-cta-actions{justify-content:center;} .entry-content .gn-cta .gn-cta-heading{font-size:30px;} } /* === end article/figure components === */ /* §181 in STYLE-NOTES.md (repo root) */ @media (prefers-reduced-motion: reduce) { .gn-team-card, .tdi-stage-card, .gn-carousel, .gn-carousel-arrow, .gn-ni-card.gn-pre { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } /* the tour's stage cards keep their fully-booked dimming, which is information rather than motion */ .tdi-stage-card.is-booked { opacity: 0.5 !important; } } /* §183 in STYLE-NOTES.md (repo root) */ /* §184 in STYLE-NOTES.md (repo root) */ :is(.gn-on-dark, .gn-awards, .gn-crs-hero, .gn-band-navy, .gn-band-teal, .gn-band--accent, .gn-band--steel, .gn-band--primary, .gn-band--ink, .gn-quote-band, .gn-team-hero, .gn-res-hero, .gn-sc-results, .tdi-reg-card-head):is(.gn-on-dark, .gn-awards, .gn-crs-hero, .gn-band-navy, .gn-band-teal, .gn-band--accent, .gn-band--steel, .gn-band--primary, .gn-band--ink, .gn-quote-band, .gn-team-hero, .gn-res-hero, .gn-sc-results, .tdi-reg-card-head) :is(h1, h2, h3, h4, h5, h6) { color: inherit; } .gn-on-dark { color: var(--wp--preset--color--white); } /* §185 in STYLE-NOTES.md (repo root) */ .wp-block-image img[src*="/quote-"] { width: 44px; height: auto; } /* §186 in STYLE-NOTES.md (repo root) */ .gn-crs-hero, .gn-band-navy { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; background: linear-gradient(180deg, var(--wp--preset--color--primary) 0%, #17346c 78%, var(--wp--preset--color--ink) 100%); color: var(--wp--preset--color--white); padding: 72px max(20px, calc(50vw - 630px)); } .gn-crs-hero { padding-bottom: 0; } .gn-crs-hero .wp-block-columns { align-items: center; } .gn-crs-hero h1 { font-size: 56px; line-height: 1.05; } .gn-crs-hero p { color: rgb(from var(--genasys-white) r g b / 0.85); max-width: 560px; } .gn-crs-hero img { max-width: 520px; width: 100%; height: auto; } /* Speed to Market's demo video ran the full 1100px column against live's 960. Only this page has a full-width video; the landing pages' sit in a narrow column well under the cap. */ .wp-block-video { max-width: 960px; margin-inline: auto; } /* §189 in STYLE-NOTES.md (repo root) */ @media (prefers-reduced-motion: no-preference) { /* §190 in STYLE-NOTES.md (repo root) */ .gn-js .gn-zoom-in { opacity: 0; transform: scale(0.88); } .gn-js .gn-zoom-in.gn-in { animation: gnZoomIn 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes gnZoomIn { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: none; } } /* §191 in STYLE-NOTES.md (repo root) */ .gn-js .gn-fade-in { opacity: 0; } .gn-js .gn-fade-in.gn-in { animation: gnFadeIn 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes gnFadeIn { from { opacity: 0; } to { opacity: 1; } } .gn-js .gn-fade-up { opacity: 0; transform: translateY(40px); } .gn-js .gn-fade-up.gn-in { animation: gnFadeUp 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes gnFadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } } .gn-js .gn-slide-left { opacity: 0; transform: translateX(-40px); } .gn-js .gn-slide-left.gn-in { animation: gnSlideLeft 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes gnSlideLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } } .gn-js .gn-slide-right { opacity: 0; transform: translateX(40px); } .gn-js .gn-slide-right.gn-in { animation: gnSlideRight 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes gnSlideRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } } /* §192 in STYLE-NOTES.md (repo root) */ @media (max-width: 1180px) { .gn-js .gn-slide-right { transform: translateX(16px); } @keyframes gnSlideRight { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } } } /* §195 in STYLE-NOTES.md (repo root) */ :root { --gn-section-space: clamp(64px, 8vw, 120px); } /* The section heading: the h2 that opens a section, on every page. One size, stepping down on tablets and phones. A heading inside prose (a post's h2) is the other role and keeps theme.json's 32px. */ :root { --gn-section-heading: 37.5px; } @media (max-width: 1024px) { :root { --gn-section-heading: 30px; } } @media (max-width: 600px) { :root { --gn-section-heading: 24px; } } /* §196 in STYLE-NOTES.md (repo root) */ body.page .entry-content > * + * { margin-block-start: var(--gn-section-space); } /* §197 in STYLE-NOTES.md (repo root) */ /* §198 in STYLE-NOTES.md (repo root) */ body.page .entry-content :is(.gn-band, .gn-band-navy, .gn-band-teal, .gn-awards, .gn-testimonials, .gn-compare-band--dark, .gn-benefits, .gn-faq-schema, .gn-contact-hero, .gn-contact-offices, .gn-painted, .gn-carousel-section, .gn-quote-band) + :is(.gn-band, .gn-band-navy, .gn-band-teal, .gn-awards, .gn-testimonials, .gn-compare-band--dark, .gn-benefits, .gn-faq-schema, .gn-contact-hero, .gn-contact-offices, .gn-painted, .gn-carousel-section, .gn-quote-band) { margin-block-start: 0; } /* §199 in STYLE-NOTES.md (repo root) */ body.page .entry-content :is(.gn-band, .gn-band-navy, .gn-band-teal, .gn-awards, .gn-testimonials, .gn-compare-band--dark, .gn-benefits, .gn-faq-schema, .gn-contact-hero, .gn-contact-offices, .gn-painted, .gn-carousel-section, .gn-quote-band, .gn-product-hero, .gn-crs-hero, .gn-team-hero, .gn-mgaa-hero, .gn-res-hero, .wp-block-group:has(> :is(.gn-band, .gn-band-navy, .gn-band-teal, .gn-awards, .gn-testimonials, .gn-compare-band--dark, .gn-benefits, .gn-faq-schema, .gn-contact-hero, .gn-contact-offices, .gn-painted, .gn-carousel-section, .gn-quote-band, .gn-product-hero, .gn-crs-hero, .gn-team-hero, .gn-mgaa-hero, .gn-res-hero))) + :is(.gn-band, .gn-band-navy, .gn-band-teal, .gn-awards, .gn-testimonials, .gn-compare-band--dark, .gn-benefits, .gn-faq-schema, .gn-contact-hero, .gn-contact-offices, .gn-painted, .gn-carousel-section, .gn-quote-band, .gn-product-hero, .gn-crs-hero, .gn-team-hero, .gn-mgaa-hero, .gn-res-hero, .wp-block-group:has(> :is(.gn-band, .gn-band-navy, .gn-band-teal, .gn-awards, .gn-testimonials, .gn-compare-band--dark, .gn-benefits, .gn-faq-schema, .gn-contact-hero, .gn-contact-offices, .gn-painted, .gn-carousel-section, .gn-quote-band, .gn-product-hero, .gn-crs-hero, .gn-team-hero, .gn-mgaa-hero, .gn-res-hero))) { margin-block-start: 0; } /* §200 in STYLE-NOTES.md (repo root) */ body.single .entry-content :is(.gn-band, .gn-band-navy, .gn-band-teal, .gn-awards, .gn-testimonials, .gn-faq-schema, .gn-quote-band, .gn-painted, .gn-cta, :has(> :is(.gn-cta, .gn-band-navy, .gn-quote-band):last-child)) + :is(.gn-band, .gn-band-navy, .gn-band-teal, .gn-awards, .gn-testimonials, .gn-faq-schema, .gn-quote-band, .gn-painted, .gn-cta) { margin-block-start: 0; } /* §201 in STYLE-NOTES.md (repo root) */ body.page .entry-content > :last-child:not(:is(.gn-band, .gn-band-navy, .gn-band-teal, .gn-awards, .gn-testimonials, .gn-compare-band--dark, .gn-benefits, .gn-contact-offices)):not(:has(.gn-band, .gn-band-navy, .gn-band-teal, .gn-awards, .gn-testimonials, .gn-compare-band--dark, .gn-cta-band)) { margin-block-end: var(--gn-section-space); } /* §202 in STYLE-NOTES.md (repo root) */ /* §203 in STYLE-NOTES.md (repo root) */ body.page .entry-content :is(.gn-band, .gn-band-navy, .gn-band-teal, .gn-awards, .gn-testimonials, .gn-compare-band--dark, .gn-benefits, .gn-faq-schema, .gn-quote-band) { padding-block: var(--gn-section-space); } /* §204 in STYLE-NOTES.md (repo root) */ body.page .entry-content .gn-faq-schema { padding-bottom: 0; } body.page .entry-content .gn-cta-band { padding-top: 0; } /* §205 in STYLE-NOTES.md (repo root) */ body.page .entry-content .gn-guide-cta { padding-top: 0; } body.page .entry-content .gn-guide-dark .gn-guide-cta { padding-top: 80px; } /* §206 in STYLE-NOTES.md (repo root) */ body.page .entry-content :is(.gn-guide-cta, .wp-block-group:has(.gn-guide-cta)) + :is(.gn-band, .gn-band-navy, .gn-band-teal, .gn-awards, .gn-testimonials, .gn-compare-band--dark, .gn-benefits, .gn-faq-schema, .gn-contact-hero, .gn-contact-offices, .gn-painted, .gn-carousel-section, .gn-quote-band, .wp-block-group:has(> :is(.gn-band, .gn-band-navy, .gn-band-teal, .gn-awards, .gn-testimonials, .gn-compare-band--dark, .gn-benefits, .gn-faq-schema, .gn-contact-hero, .gn-contact-offices, .gn-painted, .gn-carousel-section, .gn-quote-band))) { margin-block-start: 0; } /* §208 in STYLE-NOTES.md (repo root) */ :is(.is-layout-flow, .is-layout-constrained) > p + p { margin-block-start: 14px; } /* §218 in STYLE-NOTES.md (repo root) */ /* §219 in STYLE-NOTES.md (repo root) */ .gn-band-flush-bottom { margin-bottom: calc(-1 * var(--gn-section-space)) !important; } /* §220 in STYLE-NOTES.md (repo root) */ .gn-band-flush-bottom { line-height: 0; } .gn-band-flush-bottom img { display: block; } .gn-photo-pause { margin: 12px auto 0; position: relative; } .gn-photo-marquee { overflow-x: clip; overflow-y: visible; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); } .gn-photo-strip { display: flex !important; flex-wrap: nowrap !important; gap: 18px; width: max-content; /* §221 in STYLE-NOTES.md (repo root) */ max-width: none !important; /* §222 in STYLE-NOTES.md (repo root) */ animation: gnPhotoScroll var(--gn-photo-duration, 60s) linear infinite; } /* 5,724px at the Cares strip's 42px/s. */ .gn-photo-strip--long { --gn-photo-duration: 135s; } .gn-photo-marquee:hover .gn-photo-strip, .gn-photo-marquee.gn-paused .gn-photo-strip { animation-play-state: paused; } @keyframes gnPhotoScroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 9px)); } } .gn-photo-strip figure { flex: 0 0 300px !important; margin: 0 !important; } .gn-photo-strip img { width: 300px; height: 225px; object-fit: cover; border-radius: 12px; } @media (prefers-reduced-motion: reduce) { /* §223 in STYLE-NOTES.md (repo root) */ .gn-photo-strip { animation: none; } .gn-photo-marquee { overflow-x: auto; } .gn-photo-strip figure { scroll-snap-align: start; } .gn-photo-marquee { scroll-snap-type: x mandatory; } } /* ── jobs panel: the query loop as cards on a lifted band ── */ .gn-jobs-panel { background: rgb(from var(--genasys-white) r g b / 0.18); border-radius: 28px; padding: 48px 40px; } /* §224 in STYLE-NOTES.md (repo root) */ .gn-jobs-panel .wp-block-post-template { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 28px; list-style: none; padding: 0; /* The arrows and the peeking next card are the affordance; a scrollbar under the cards is not part of the design. Keyboard and touch scrolling are unaffected by hiding it. */ scrollbar-width: none; } .gn-jobs-panel .wp-block-post-template::-webkit-scrollbar { display: none; } /* 360px leaves a third card half-showing in the panel's 1020px of inner width, which is the "there is more" signal. On a phone the card takes most of the width and the next one still peeks. */ .gn-jobs-panel .wp-block-post { flex: 0 0 min(360px, 82%); scroll-snap-align: start; /* §225 in STYLE-NOTES.md (repo root) */ margin-block: 0; } /* §226 in STYLE-NOTES.md (repo root) */ .gn-jobs-panel { position: relative; } .gn-jobs-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); box-shadow: 0 2px 10px var(--shadow-mid); cursor: pointer; z-index: 2; } .gn-jobs-arrow svg { width: 20px; height: 20px; } .gn-jobs-arrow--left { left: -6px; } .gn-jobs-arrow--right { right: -6px; } .gn-jobs-arrow[disabled] { opacity: 0; pointer-events: none; } .gn-jobs-arrow:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; } /* The badge row on a CARD, against the same component on the single-job hero. Smaller icons and a tighter gap, because a card is a summary and the hero is the page. */ .gn-jobs-panel .gn-job-badges { gap: 8px 16px; margin: 0 0 16px; } .gn-jobs-panel .gn-job-badge svg { width: 24px; height: 24px; } .gn-jobs-panel .gn-job-badge span { font-size: 15px; font-weight: 400; } @media (prefers-reduced-motion: reduce) { /* A smooth scroll is motion the visitor did not ask for. The arrows still work; the jump is instant. */ .gn-jobs-panel .wp-block-post-template { scroll-behavior: auto; } } /* §227 in STYLE-NOTES.md (repo root) */ .gn-jobs-panel .wp-block-post-template > li.wp-block-post:first-child { padding-top: 30px; } .gn-jobs-panel .wp-block-post { background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink, var(--wp--preset--color--ink)); border-radius: 16px; padding: 30px 28px; } /* §228 in STYLE-NOTES.md (repo root) */ .gn-jobs-panel .wp-block-post-title { font-size: 18px; margin: 0 0 14px; } .gn-jobs-panel .wp-block-post-title a { color: inherit; text-decoration: none; } .gn-jobs-panel .wp-block-post-excerpt { font-size: 15px; line-height: 1.6; } /* §229 in STYLE-NOTES.md (repo root) */ .gn-jobs-panel .wp-block-post { display: flex; flex-direction: column; } /* The 32px block gap between the card children was most of the card's height (128px of the 505). 16px inside a card, and the pill keeps its auto top margin so it still sits on the floor. */ .gn-jobs-panel .wp-block-post > * + * { margin-block-start: 16px; } /* §230 in STYLE-NOTES.md (repo root) */ .gn-jobs-panel { overflow-x: clip; } /* §231 in STYLE-NOTES.md (repo root) */ .gn-jobs-panel .wp-block-post-template.wp-block-post-template > li.wp-block-post { padding-bottom: 30px; } /* §232 in STYLE-NOTES.md (repo root) */ .gn-jobs-panel .wp-block-post-title { min-height: 54px; } .gn-jobs-panel .gn-job-badges { min-height: 88px; } .gn-jobs-panel .wp-block-post-excerpt { height: 144px; overflow: hidden; } /* §233 in STYLE-NOTES.md (repo root) */ .gn-jobs-panel .wp-block-post-excerpt__more-link { display: inline; font-weight: 700; color: var(--wp--preset--color--accent); text-decoration: none; } .gn-jobs-panel .wp-block-post-excerpt__more-link:hover { color: var(--wp--preset--color--ink); text-decoration: underline; } .gn-jobs-panel .gn-job-apply { margin-top: auto; align-self: center; } /* §234 in STYLE-NOTES.md (repo root) */ .gn-jobs-panel .gn-job-apply { margin-top: auto; text-decoration: none; } @media (max-width: 820px) { .gn-jobs-panel { padding: 28px 20px; } .gn-jobs-arrow--left { left: -10px; } .gn-jobs-arrow--right { right: -10px; } } /* §241-244 in STYLE-NOTES.md (repo root): retired 22 September 2026, see §327. Was Connectivity's original purple pull-quote card; nothing published uses `.gn-quote-panel` any more now that both pages using this component (Speed to Market, Connectivity) share the flat `.gn-quote-band`/`.gn-quote-inner` design instead. */ .gn-eco-copy { max-width: 700px; /* live's copy measure on this section */ margin-inline: auto; } /* §250 in STYLE-NOTES.md (repo root) */ .gn-res-hero.gn-res-hero { width: 100vw; max-width: 100vw; /* §251 in STYLE-NOTES.md (repo root) */ margin: 0 calc(50% - 50vw) 0 !important; border-radius: 0; padding: 56px max(20px, calc(50vw - 630px)) 0; } /* §252 in STYLE-NOTES.md (repo root) */ .gn-res-line.gn-res-line { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw) 40px !important; } /* §253 in STYLE-NOTES.md (repo root) */ /* §254 in STYLE-NOTES.md (repo root) */ .gn-ni-more.gn-ni-more { /* §255 in STYLE-NOTES.md (repo root) */ text-transform: capitalize !important; background: var(--wp--preset--color--cta) !important; color: var(--wp--preset--color--white) !important; border-color: var(--wp--preset--color--cta) !important; border-radius: 50px !important; padding: 16px 40px !important; font-size: 16.5px !important; } .gn-ni-more.gn-ni-more:hover { background: var(--wp--preset--color--cta-hover) !important; border-color: var(--wp--preset--color--cta-hover) !important; color: var(--wp--preset--color--white) !important; } /* Teal band: services' testimonial section, same shape as .gn-band-navy */ .gn-band-teal { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); padding: 64px max(20px, calc(50vw - 630px)); } /* ════════════════════════════════════════ VISUAL-COMPARE FIXES, 2026-08-17 agent review ════════════════════════════════════════ */ /* §256 in STYLE-NOTES.md (repo root) */ /* §257 in STYLE-NOTES.md (repo root) */ /* §258 in STYLE-NOTES.md (repo root) */ /* landing pillar cards: white cards on the navy band, accent top border */ .gn-lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; } .gn-lp-cards > .wp-block-group { background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink, var(--wp--preset--color--ink)); border-radius: 14px; padding: 28px 24px; border-top: 5px solid var(--wp--preset--color--accent); } .gn-lp-cards > .wp-block-group:nth-child(2) { border-top-color: var(--wp--preset--color--primary); } .gn-lp-cards > .wp-block-group:nth-child(3) { border-top-color: var(--wp--preset--color--purple); } .gn-lp-cards > .wp-block-group :is(h3, h4) { color: var(--wp--preset--color--primary); margin-top: 0; } @media (max-width: 860px) { .gn-lp-cards { grid-template-columns: 1fr; } } /* §259 in STYLE-NOTES.md (repo root) */ .gn-lp-cards > .wp-block-group { position: relative; padding-top: 100px; /* the layout block-gap margin pushed cards 2 and 3 down 32px inside their grid cells; live top-aligns all three */ margin-block-start: 0; } .gn-lp-cards > .wp-block-group::before { content: ""; position: absolute; top: 28px; left: 24px; width: 56px; height: 56px; border-radius: 12px; background: var(--hue, var(--wp--preset--color--accent)); } .gn-lp-cards > .wp-block-group::after { content: ""; position: absolute; top: 28px; left: 24px; width: 56px; height: 56px; background: var(--wp--preset--color--white); -webkit-mask: var(--gn-lp-icon) center / 30px no-repeat; mask: var(--gn-lp-icon) center / 30px no-repeat; } .gn-lp-cards > .wp-block-group:nth-child(1) { --gn-lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4'/%3E%3C/svg%3E"); } .gn-lp-cards > .wp-block-group:nth-child(2) { --hue: var(--wp--preset--color--primary); --gn-lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'/%3E%3Cpath d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E"); } .gn-lp-cards > .wp-block-group:nth-child(3) { --hue: var(--wp--preset--color--purple); --gn-lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'/%3E%3C/svg%3E"); } /* Centring inside the pillar band, scoped by :has so the many other .gn-band-navy uses keep their own alignment. Live centres the heading, the closing line and the CTA. */ .gn-band-navy:has(.gn-lp-cards) > h2 { text-align: center; } .gn-band-navy:has(.gn-lp-cards) > p { text-align: center; } .gn-band-navy:has(.gn-lp-cards) > .wp-block-buttons { justify-content: center; } /* §260 in STYLE-NOTES.md (repo root) */ .gn-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .gn-chips p { margin: 0 !important; background: var(--wp--preset--color--white); border-radius: 12px; padding: 14px 20px; font-size: 15px; color: var(--wp--preset--color--ink); white-space: nowrap; } .gn-chips p strong { font-weight: 600; } .gn-chips.gn-chips--marquee { flex-wrap: nowrap; justify-content: flex-start; overflow-x: clip; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .gn-chips-track { display: flex; gap: 12px; width: max-content; animation: gnChipsScroll 45s linear infinite; } @keyframes gnChipsScroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 6px)); } } .gn-chips-track:hover, .gn-chips.gn-paused .gn-chips-track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .gn-chips-track { animation: none; } } .gn-chips-pause { margin: 16px auto 0; position: relative; } @media (prefers-reduced-motion: reduce) { .gn-chips-pause { display: none; } } /* §261 in STYLE-NOTES.md (repo root) */ .gn-crs-hero .wp-block-buttons { display: inline-flex; margin-right: 10px; } /* §262 in STYLE-NOTES.md (repo root) */ .gn-crs-hero .wp-block-group:has(> .wp-block-buttons) { margin-bottom: 72px; } /* §263 in STYLE-NOTES.md (repo root) */ /* One flat navy band, not a lighter band with a shadowed card floating in it (§327): the two-tone steel-behind-navy-card look was the one leftover piece on Speed to Market that still looked like the site's older component family. */ .gn-quote-band { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; background: var(--wp--preset--color--primary); padding-block: var(--gn-section-space); padding-inline: 20px; } .gn-quote-inner { max-width: var(--wp--style--global--content-size); margin: 0 auto; color: var(--wp--preset--color--white); } .gn-quote-inner .wp-block-columns { gap: 56px; margin-block: 0; } /* ════════════════════════════════════════ POST-SWEEP FIXES, 2026-08-17 ════════════════════════════════════════ */ /* §269 in STYLE-NOTES.md (repo root) */ .entry-content .table-content table, .entry-content figure.wp-block-table table { border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 15px; } .entry-content .table-content :is(td, th), .entry-content figure.wp-block-table :is(td, th) { border: 1px solid var(--neutral-200); padding: 10px 14px; text-align: left; vertical-align: top; } .entry-content .table-content th, .entry-content figure.wp-block-table th { background: var(--neutral-100); font-weight: 700; } /* §409 */ .entry-content :is(.table-content, figure.wp-block-table) tbody tr:nth-child(even) td { background: var(--neutral-50); } /* §270 in STYLE-NOTES.md (repo root) */ .entry-content a svg[viewBox]:not([width]) { width: 1em; height: 1em; vertical-align: -0.125em; } /* §271 in STYLE-NOTES.md (repo root) */ :is(.gn-product-hero, .gn-team-hero, .gn-contact-hero, .gn-contact-offices, .gn-mgaa-hero):is( .gn-product-hero, .gn-team-hero, .gn-contact-hero, .gn-contact-offices, .gn-mgaa-hero) { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* §272 in STYLE-NOTES.md (repo root) */ :is(.gn-product-hero, .gn-team-hero, .gn-contact-hero, .gn-mgaa-hero) { margin-top: 0 !important; } /* §273 in STYLE-NOTES.md (repo root) */ :is(.gn-product-hero, .gn-team-hero, .gn-mgaa-hero):is( .gn-product-hero, .gn-team-hero, .gn-mgaa-hero) > * { margin-left: auto; margin-right: auto; } /* §274 in STYLE-NOTES.md (repo root) */ body.single-post { --gn-post-measure: 780px; } /* Title, category, byline and featured image. The header group is `alignfull` with a constrained layout, so setting its content size is enough. */ body.single-post .gn-post-header { --wp--style--global--content-size: var(--gn-post-measure); } body.single-post .wp-block-post-featured-image { max-width: var(--gn-post-measure); margin-left: auto; margin-right: auto; } /* §275 in STYLE-NOTES.md (repo root) */ body.single-post .wp-block-post-featured-image img { display: block; width: auto; height: auto; max-width: 100%; max-height: 560px; margin-left: auto; margin-right: auto; object-fit: contain; aspect-ratio: auto; } /* Body text. Not the layout variable, which would take the designed sections down with it. The excluded ancestors are looked for inside the content only: carries `gn-js` on any page with a scroll reveal, and matched `[class*="gn-"]` for every paragraph below it (§357). */ body.single-post .entry-content :is(p, h2, h3, h4, h5, h6, ul, ol, blockquote, figure.wp-block-table, .wp-block-details):not(.entry-content :is([class*="-hero"], [class*="gn-"], table, blockquote, .wp-block-details, .wp-block-columns) *) { max-width: var(--gn-post-measure); margin-left: auto; margin-right: auto; } /* A post that ships its own designed hero does not want a second one above it. No post does since §357; the rule stays for any that gains a `gn-*-hero`. */ body.single-post main:has(.entry-content [class*="gn-"][class*="-hero"]) .wp-block-post-featured-image { display: none; } /* §276 in STYLE-NOTES.md (repo root) */ .gn-product-hero { width: 100%; position: relative; } .gn-product-hero * { box-sizing: border-box; } /* §309 in STYLE-NOTES.md (repo root) */ /* The hero text never sits left of the header logo (Ed, §346): the side inset is the header's (root padding + 20px) plus 8px, because this band is 100vw wide and a desktop scrollbar pulls its content about 8px left. The max-width grows by the same, so wide screens still line up exactly. */ .gn-product-hero-inner { --gn-hero-inset: calc(var(--wp--style--root--padding-left, 32px) + 28px); max-width: calc(1100px + 2 * var(--gn-hero-inset)); margin: 0 auto; display: flex; align-items: center; gap: 40px; padding: 80px var(--gn-hero-inset); } .gn-product-hero-text { flex: 1; min-width: 0; } .gn-product-hero-pill { display: inline-block !important; font-family: var(--wp--preset--font-family--body) !important; font-size: 12px !important; font-weight: 700 !important; color: var(--wp--preset--color--white) !important; letter-spacing: 0.11em !important; text-transform: uppercase !important; border: 1.5px solid rgb(from var(--genasys-white) r g b / 0.5) !important; border-radius: 100px !important; padding: 6px 18px !important; margin: 0 0 24px !important; line-height: 1.4 !important; background: transparent !important; white-space: nowrap !important; } /* The hero headline matches h1 OR h2 (22 September 2026). Every page using this hero had the eyebrow pill as its h1 and the real headline as an h2, so the page's single h1 was a three-word label: backwards for a screen reader and for Google. The pill is a paragraph now and the headline is the h1. Both elements keep the headline look so the pages can be converted one at a time without a half-styled hero in between. The `:not(.gn-product-hero-pill)` is load-bearing and was added after measuring, not before: on the seven pages still marking the pill up as an h1, the plain `:is()` version matched the PILL, and at (0,1,1) with !important it beat the pill's own (0,1,0) !important rules and rendered a 12px uppercase label at 58px. Keep the exclusion even after every page is converted, so a page that reverts cannot break quietly. */ :is(.gn-product-hero h1, .gn-product-hero h2):not(.gn-product-hero-pill) { font-family: 'Avenir Next LT Pro', 'Avenir Next', sans-serif !important; font-size: 58px !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; color: var(--wp--preset--color--white) !important; margin: 0 0 26px !important; padding: 0 !important; -webkit-font-smoothing: antialiased; } :is(.gn-product-hero h1, .gn-product-hero h2):not(.gn-product-hero-pill) span { color: var(--wp--preset--color--cta-hover); } .gn-product-hero-body { font-family: var(--wp--preset--font-family--body); font-size: 18px; font-weight: 400; color: rgb(from var(--genasys-white) r g b / 0.85); line-height: 1.65; max-width: 520px; margin: 0 0 28px; } .gn-product-hero-cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; background: var(--wp--preset--color--cta); color: var(--wp--preset--color--white) !important; font-family: var(--wp--preset--font-family--body); font-size: 15px; font-weight: 700; border: none; border-radius: 50px; text-decoration: none !important; cursor: pointer; transition: background 0.3s ease; } .gn-product-hero-cta:hover { background: var(--wp--preset--color--cta-hover); } .gn-product-hero-cta svg { width: 14px; height: 14px; transition: transform 0.3s ease; } .gn-product-hero-cta:hover svg { transform: translateX(6px); } .gn-product-hero-graphic { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; } /* §302 in STYLE-NOTES.md (repo root) */ @media (min-width: 1025px) { .gn-product-hero-inner { min-height: 732px; } } @media (max-width: 1024px) { .gn-product-hero-inner { flex-direction: column; padding: 64px var(--gn-hero-inset); gap: 32px; text-align: center; } .gn-product-hero-text { flex: none; display: flex; flex-direction: column; align-items: center; } :is(.gn-product-hero h1, .gn-product-hero h2):not(.gn-product-hero-pill) { font-size: 44px !important; } .gn-product-hero-body { font-size: 16px; max-width: 560px; } .gn-product-hero-graphic { flex: none; max-width: 480px; width: 100%; margin: 0 auto; } } @media (max-width: 600px) { .gn-product-hero-inner { flex-direction: column; padding: 48px var(--gn-hero-inset); gap: 24px; text-align: center; } .gn-product-hero-text { flex: none; display: flex; flex-direction: column; align-items: center; } :is(.gn-product-hero h1, .gn-product-hero h2):not(.gn-product-hero-pill) { font-size: 36px !important; } .gn-product-hero-body { font-size: 16px; max-width: 100%; } /* §425: 12px, and allowed to wrap: the capsule is the h1, and the long ones no longer fit a phone on one line */ .gn-product-hero-pill { font-size: 12px !important; padding: 6px 16px !important; white-space: normal !important; text-wrap: balance; max-width: 100%; border-radius: 20px !important; } .gn-product-hero-graphic { flex: none; width: 100%; max-width: 100%; } } /* The two genuine variants the five families hid. Everything else was one component; these are the only per-page truths, so they are the only modifiers. */ .gn-product-hero--contained-graphic .gn-product-hero-graphic img { width: 100%; max-width: 560px; height: auto; display: block; } .gn-product-hero--rounded .gn-product-hero-graphic img { border-radius: 16px; } /* §277 in STYLE-NOTES.md (repo root) */ .gn-product-hero-graphic .gn-bind-outer { max-width: 100%; } .gn-product-hero-graphic :is(.gc-outer, .gf-outer) { width: 100%; max-width: 560px; } @media (max-width: 1024px) { .gn-product-hero-graphic :is(.gc-outer, .gf-outer) { max-width: 480px; } } @media (max-width: 600px) { .gn-product-hero-graphic :is(.gc-outer, .gf-outer) { max-width: 100%; } } /* §278 in STYLE-NOTES.md (repo root) */ .gn-awards + .gn-testimonials { margin-top: 0 !important; } /* §279 in STYLE-NOTES.md (repo root) */ body.page .entry-content > .gn-carousel-section { /* §280 in STYLE-NOTES.md (repo root) */ position: relative; padding-top: var(--gn-section-space); /* §281 in STYLE-NOTES.md (repo root) */ display: flow-root; } body.page .entry-content > .gn-carousel-section::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--neutral-50); z-index: -1; } /* §282 in STYLE-NOTES.md (repo root) */ body.page .entry-content > .wp-block-group:has(> .gn-carousel-section) { position: relative; padding-block: var(--gn-section-space); display: flow-root; } body.page .entry-content > .wp-block-group:has(> .gn-carousel-section)::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--neutral-50); z-index: -1; } /* §283 in STYLE-NOTES.md (repo root) */ .entry-content .gn-compare-band:not(.gn-compare-band--dark) { padding-top: 0; padding-bottom: 0; } /* §284 in STYLE-NOTES.md (repo root) */ :is(.gn-crs-hero, .gn-band-navy, .gn-contact-hero) .gn-hubspot-form { background: var(--wp--preset--color--white); border-radius: 5px; padding: 25px; } .gn-feat[class*="gn-hue-"] { --gn-textlink-colour: var(--hue); } /* §288 in STYLE-NOTES.md (repo root) */ .gn-carousel-arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border-radius: 50% !important; background: var(--wp--preset--color--white) !important; border: 1px solid rgb(from var(--genasys-space-blue) r g b / 0.06) !important; box-shadow: 0 2px 12px var(--shadow-soft) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; transition: box-shadow 0.3s ease, background 0.3s ease, opacity 0.4s ease !important; color: var(--wp--preset--color--ink) !important; padding: 0 !important; margin: 0 !important; opacity: 0; line-height: 1 !important; font-size: 0 !important; text-indent: 0 !important; letter-spacing: 0 !important; text-align: center !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; } /* §289 in STYLE-NOTES.md (repo root) */ .gn-carousel-arrow:hover { box-shadow: 0 4px 20px var(--shadow-mid) !important; background: var(--neutral-50) !important; } .gn-carousel-card[data-pos="center"] .gn-icon-cog { animation: gn-cog-spin 4s linear infinite; } .gn-carousel-card[data-pos="center"] .gn-icon-blocks .gn-block-1 { animation: gn-block-swap-1 3s ease-in-out infinite; } .gn-carousel-card[data-pos="center"] .gn-icon-blocks .gn-block-2 { animation: gn-block-swap-2 3s ease-in-out infinite; } .gn-carousel-card[data-pos="center"] .gn-icon-connect .gn-connect-arrow { animation: gn-connect-pulse 2s ease-in-out infinite; } .gn-carousel-card[data-pos="center"] .gn-icon-connect .gn-connect-line { animation: gn-connect-draw 2s ease-in-out infinite; } @keyframes gn-cog-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes gn-block-swap-1 { 0%, 100% { transform: translate(0, 0); } 40%, 60% { transform: translate(10px, -10px); } } @keyframes gn-block-swap-2 { 0%, 100% { transform: translate(0, 0); } 40%, 60% { transform: translate(-10px, 10px); } } @keyframes gn-connect-pulse { 0%, 100% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(2px, -2px); opacity: 0.6; } } @keyframes gn-connect-draw { 0%, 100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: 8; } } /* §290 in STYLE-NOTES.md (repo root) */ @media (min-width: 601px) { body.home .gn-carousel .gn-carousel-stage { position: relative; height: 540px; overflow: visible; } body.home .gn-carousel .gn-carousel-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: rgb(from var(--genasys-space-blue) r g b / 0.06); font-size: 15px !important; font-weight: 600 !important; color: var(--wp--preset--color--ink) !important; white-space: nowrap; } } @media (max-width: 1024px) { .gn-carousel-arrow { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; } .gn-carousel-section { padding: 0; } } @media (max-width: 600px) { .gn-carousel-stage { height: auto !important; min-height: auto; overflow: visible; } .gn-carousel-pill { font-size: 13px !important; padding: 3px 8px; } .gn-carousel-section { padding: 0; } /* §426 */ .gn-carousel-arrow { top: auto !important; bottom: -10px !important; transform: none !important; } .gn-carousel-arrow-left { left: 16px !important; } .gn-carousel-arrow-right { right: 16px !important; } } @media (prefers-reduced-motion: reduce) { .gn-icon-cog, .gn-block-1, .gn-block-2, .gn-connect-arrow, .gn-connect-line { animation: none !important; } }.gn-carousel-pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } /* §291 in STYLE-NOTES.md (repo root) */ /* §292 in STYLE-NOTES.md (repo root) */ /* ---- Hero header: matches the Resources / Content Library hero ---- */ /* §293 in STYLE-NOTES.md (repo root) */ /* ---- Team grid ---- */ /* §294 in STYLE-NOTES.md (repo root) */ /* Photo tile holds the chasing border ring */ /* Inner clip layer so the cover image can scale without leaking corners */ /* Hover / pulse bring the photo into colour */ /* Chasing border - base */ /* Each card gets a unique chase colour; the ring is the shared rule above */ @media (prefers-reduced-motion: reduce) { /* the empty `.gn-team-card {}` rule that was here did nothing; the card's own fade had no guard at all and now has one */ } /* §295 in STYLE-NOTES.md (repo root) */ .gn-ni { /* ---- Inlined Genasys design tokens (scoped) ---- */ --gn-sapphire: var(--wp--preset--color--primary); /* Primary — Genasys Blue */ --gn-space: var(--wp--preset--color--ink); /* Space Blue — deepest neutral */ --gn-sky: var(--wp--preset--color--steel); --gn-steel: var(--wp--preset--color--pale-steel); --gn-sea: var(--wp--preset--color--accent); /* Sea Green — teal accent */ --gn-yellow: var(--wp--preset--color--cta-hover); --gn-red: var(--wp--preset--color--cta); --gn-purple: var(--wp--preset--color--purple); --gn-white: var(--wp--preset--color--white); --gn-neutral-50: var(--neutral-50); --gn-neutral-100: var(--neutral-100); --gn-neutral-200: var(--neutral-200); --gn-neutral-500: var(--neutral-500); --gn-text-body: var(--text-body); /* was the #3A4055 literal, which is what --text-body already holds */ --gn-text-muted: var(--neutral-500); /* §296 in STYLE-NOTES.md (repo root) */ --gn-font-display: "Avenir Next LT Pro", "Avenir Next", "Segoe UI", system-ui, sans-serif; --gn-font-body: "Source Sans Pro", "Source Sans 3", "Segoe UI", system-ui, sans-serif; /* Card recipe — the single approved card style */ --gn-card-radius: 12px; /* Logo-card treatment: no border, soft shadow does the lift. */ --gn-card-shadow: 0 2px 10px var(--shadow-soft); --gn-card-shadow-hover: 0 10px 28px var(--shadow-mid); --gn-grad-blend: radial-gradient(120% 90% at 50% 0%, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--ink) 100%); width: 100%; font-family: var(--gn-font-body); -webkit-font-smoothing: antialiased; box-sizing: border-box; } .gn-ni *, .gn-ni *::before, .gn-ni *::after { box-sizing: border-box; } .gn-ni-header { text-align: center; max-width: 1100px; margin: 0 auto; padding: 0 48px; } .gn-ni-header h2 { font-family: var(--gn-font-display) !important; font-size: 36px !important; font-weight: 700 !important; color: var(--gn-sapphire) !important; line-height: 1.12 !important; letter-spacing: -0.01em !important; margin: 0 auto !important; padding: 0 !important; max-width: 680px; } .gn-ni-header h2 span { color: var(--gn-sea) !important; } .gn-ni-body { font-family: var(--gn-font-body) !important; font-size: 17px !important; color: var(--gn-text-body) !important; line-height: 1.6 !important; max-width: none; margin: 18px auto 28px auto !important; } /* ---- Search ---- */ .gn-ni-search-wrap { max-width: 560px; margin: 0 auto 30px; padding: 0 48px; } .gn-ni-search { position: relative; display: flex; align-items: center; } .gn-ni-search-icon { position: absolute; left: 20px; width: 18px; height: 18px; color: var(--gn-steel); pointer-events: none; } .gn-ni-search input { width: 100% !important; font-family: var(--gn-font-body) !important; font-size: 16px !important; font-weight: 400 !important; color: var(--gn-space) !important; margin: 0 !important; padding: 14px 48px 14px 48px !important; border: 1px solid var(--gn-neutral-200) !important; border-radius: 999px !important; background: var(--gn-white) !important; box-shadow: 0 2px 6px var(--shadow-soft) !important; outline: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; } .gn-ni-search input::placeholder { color: var(--gn-text-muted) !important; opacity: 1 !important; } .gn-ni-search input:focus { border-color: var(--gn-sapphire) !important; box-shadow: 0 0 0 3px rgb(from var(--genasys-sapphire-blue) r g b / 0.12) !important; } .gn-ni-search-clear { position: absolute !important; right: 14px; width: 24px !important; height: 24px !important; display: none; align-items: center; justify-content: center; border: none !important; background: var(--gn-neutral-100) !important; color: var(--gn-text-muted) !important; border-radius: 999px !important; cursor: pointer !important; padding: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } .gn-ni-search-clear:hover { background: var(--gn-neutral-200) !important; color: var(--gn-space) !important; } .gn-ni-search-clear.is-visible { display: flex !important; } .gn-ni-search-clear svg { width: 12px !important; height: 12px !important; } /* ---- Tabs ---- */ .gn-ni-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 1100px; margin: 0 auto 36px; padding: 0 48px; } .gn-ni-tab { font-family: var(--gn-font-body) !important; font-size: 15px !important; font-weight: 700 !important; padding: 14px 18px !important; margin: 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; color: var(--gn-neutral-500) !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; position: relative !important; transition: color 0.2s ease !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1 !important; -webkit-appearance: none !important; appearance: none !important; outline: none !important; } .gn-ni-tab svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; } .gn-ni-tab:hover { color: var(--gn-sapphire) !important; } .gn-ni-tab.is-active { color: var(--gn-sapphire) !important; } .gn-ni-tab:focus-visible { outline: 2px solid var(--gn-sapphire) !important; outline-offset: 2px !important; } /* default (All) */ .gn-ni-tab.is-active::after { content: ''; position: absolute; bottom: 0; left: 18px; right: 18px; height: 3px; background: var(--gn-sapphire); border-radius: 3px 3px 0 0; } /* Active tab TEXT and its underline share the resource-type colour */ .gn-ni-tab[data-slug="news"]:hover, .gn-ni-tab[data-slug="news"].is-active { color: var(--gn-sea) !important; } .gn-ni-tab[data-slug="news"].is-active::after { background: var(--gn-sea); } .gn-ni-tab[data-slug="blogs"]:hover, .gn-ni-tab[data-slug="blogs"].is-active { color: var(--gn-sky) !important; } .gn-ni-tab[data-slug="blogs"].is-active::after { background: var(--gn-sky); } .gn-ni-tab[data-slug="case-studies"]:hover, .gn-ni-tab[data-slug="case-studies"].is-active { color: var(--gn-red) !important; } .gn-ni-tab[data-slug="case-studies"].is-active::after { background: var(--gn-red); } .gn-ni-tab[data-slug="glossary"]:hover, .gn-ni-tab[data-slug="glossary"].is-active { color: var(--gn-purple) !important; } .gn-ni-tab[data-slug="glossary"].is-active::after { background: var(--gn-purple); } .gn-ni-tab[data-slug="downloads"]:hover, .gn-ni-tab[data-slug="downloads"].is-active { color: var(--gn-yellow) !important; } .gn-ni-tab[data-slug="downloads"].is-active::after { background: var(--gn-yellow); } .gn-ni-tab.is-hidden { display: none !important; } /* ---- Grid ---- */ .gn-ni-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto 40px; padding: 0 48px; min-height: 380px; } @media (min-width: 1025px) { .gn-ni-grid:not(.is-search):not(.is-grid) > .gn-ni-card:nth-child(4), .gn-ni-grid:not(.is-search):not(.is-grid) > .gn-ni-skeleton:nth-child(4) { display: none; } } .gn-ni-card { position: relative; background: var(--gn-white) !important; border-radius: var(--gn-card-radius) !important; overflow: visible; box-shadow: 0 2px 10px var(--shadow-soft) !important; transition: box-shadow 0.4s ease, transform 0.4s ease, opacity 0.5s ease !important; display: flex; flex-direction: column; text-decoration: none !important; } .gn-ni-card:hover { box-shadow: 0 10px 28px var(--shadow-mid) !important; transform: scale(1.04) !important; } /* Staggered scroll-in entrance */ .gn-ni-card.gn-pre { opacity: 0; transform: translateY(18px); } .gn-ni-card.gn-visible { opacity: 1; transform: none; } .gn-ni-card.gn-visible:hover { transform: scale(1.04) !important; } @media (prefers-reduced-motion: reduce) { .gn-ni-card.gn-pre { opacity: 1; transform: none; } } .gn-ni-card-img { height: 200px; overflow: hidden; background: var(--gn-neutral-100); border-radius: var(--gn-card-radius) var(--gn-card-radius) 0 0; display: flex; align-items: center; justify-content: center; } .gn-ni-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .gn-ni-card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--gn-grad-blend); } .gn-ni-card-img-placeholder svg { opacity: 0.4; } .gn-ni-card-body { padding: 24px 24px 18px; flex: 1; display: flex; flex-direction: column; } .gn-ni-card-category { font-family: var(--gn-font-body) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--gn-sea) !important; margin: 0 0 10px !important; } .gn-ni-card-category.gn-ni-cat--news { color: var(--gn-sea) !important; } .gn-ni-card-category.gn-ni-cat--blogs { color: var(--gn-sky) !important; } .gn-ni-card-category.gn-ni-cat--case-studies { color: var(--gn-red) !important; } .gn-ni-card-category.gn-ni-cat--glossary { color: var(--gn-purple) !important; } .gn-ni-card-category.gn-ni-cat--downloads { color: var(--gn-yellow) !important; } .gn-ni-card-title { font-family: var(--gn-font-display) !important; font-size: 19px !important; font-weight: 700 !important; color: var(--gn-sapphire) !important; margin: 0 0 18px !important; line-height: 1.32 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; line-clamp: 3 !important; overflow: hidden !important; min-height: 3.96em !important; /* reserve three lines so every card matches */ } .gn-ni-card-date { font-family: var(--gn-font-body) !important; font-size: 13px !important; color: var(--gn-text-muted) !important; display: flex !important; align-items: center !important; gap: 6px !important; margin: auto 0 0 0 !important; /* pin to the bottom of the card */ font-weight: 600 !important; } .gn-ni-card-date svg { flex-shrink: 0; } /* ---- Skeleton ---- */ .gn-ni-skeleton { background: var(--gn-white); border-radius: var(--gn-card-radius); overflow: hidden; /* §297 in STYLE-NOTES.md (repo root) */ border: var(--card-border); box-shadow: var(--gn-card-shadow); display: flex; flex-direction: column; } .gn-ni-skeleton-img { height: 200px; background: var(--gn-neutral-100); } .gn-ni-skeleton-body { padding: 24px; flex: 1; } .gn-ni-skeleton-line { height: 12px; border-radius: 4px; background: var(--gn-neutral-100); margin-bottom: 12px; animation: gnNiPulse 1.4s ease-in-out infinite; } .gn-ni-skeleton-line--short { width: 35%; } .gn-ni-skeleton-line--med { width: 70%; } .gn-ni-skeleton-line--full { width: 100%; } @keyframes gnNiPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .gn-ni-message { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; color: var(--gn-text-muted); font-family: var(--gn-font-body); font-size: 15px; padding: 3rem 0; } /* ---- CTA ---- */ .gn-ni-cta-wrap { text-align: center; padding: 0 48px; } .gn-ni-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--gn-font-body) !important; font-size: 18px !important; font-weight: 700 !important; color: var(--gn-sea) !important; text-decoration: none !important; transition: color 0.3s ease, gap 0.3s ease; cursor: pointer; } .gn-ni-cta:hover { color: var(--gn-space) !important; gap: 12px; } .gn-ni-cta svg { width: 18px; height: 18px; transition: transform 0.3s ease; } .gn-ni-cta:hover svg { transform: translateX(4px); } /* ---- Load more ---- */ .gn-ni-more-wrap { text-align: center; padding: 24px 48px 0; } .gn-ni-more { font-family: var(--gn-font-body) !important; font-size: 16px !important; font-weight: 700 !important; color: var(--gn-sapphire) !important; background: var(--gn-white) !important; border: 1.5px solid var(--gn-neutral-200) !important; border-radius: 999px !important; padding: 13px 30px !important; cursor: pointer !important; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease !important; -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important; letter-spacing: normal !important; line-height: 1 !important; } .gn-ni-more:hover { border-color: var(--gn-sapphire) !important; background: var(--gn-sapphire) !important; color: var(--wp--preset--color--white) !important; } .gn-ni-more[disabled] { opacity: 0.55; cursor: default; pointer-events: none; } .gn-ni-hidden { display: none !important; } @media (max-width: 1024px) { .gn-ni-header { padding: 0 32px; } .gn-ni-header h2 { font-size: 30px !important; } .gn-ni-search-wrap { padding: 0 32px; } .gn-ni-tabs { padding: 0 32px; } .gn-ni-grid { grid-template-columns: repeat(2, 1fr); padding: 0 32px; } .gn-ni-cta-wrap { padding: 0 32px; } } @media (max-width: 600px) { .gn-ni-header { padding: 0 20px; } .gn-ni-header h2 { font-size: 25px !important; max-width: 100%; } .gn-ni-body { max-width: 100%; font-size: 16px !important; } .gn-ni-search-wrap { padding: 0 20px; } /* Tabs wrap onto multiple centred rows so every option is visible without scrolling */ .gn-ni-tabs { padding: 0 16px; gap: 0 4px; margin-bottom: 24px; flex-wrap: wrap; justify-content: center; } .gn-ni-tab { padding: 12px 10px !important; font-size: 14px !important; } .gn-ni-tab svg { display: none !important; } .gn-ni-grid { grid-template-columns: 1fr; padding: 0 20px; gap: 16px; margin-bottom: 32px; } /* Homepage teaser: show three cards, not four, when stacked vertically */ .gn-ni-grid:not(.is-search):not(.is-grid) > .gn-ni-card:nth-child(4), .gn-ni-grid:not(.is-search):not(.is-grid) > .gn-ni-skeleton:nth-child(4) { display: none; } .gn-ni-card-img { height: 180px; } .gn-ni-card-body { padding: 20px 20px 16px; } .gn-ni-card-title { font-size: 17px !important; } .gn-ni-cta-wrap { padding: 0 20px; } } /* Was inline in wp_block 19 (gw-product-pillars) until 4 September 2026; moved by the audit's CSS pass so git, review and the theme comparison can see it. Synced block: a theme component. */ @keyframes gfSU { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .pa-card { /* demo scope: literals on purpose, never site tokens */ --pa-accent: #00B2B1; --pa-cta: #E10054; --pa-cta-hover: #F1B53D; --pa-ink: #2F3351; --pa-pale-steel: #9FB6D4; --pa-primary: #004EAA; --pa-purple: #B24EBE; --pa-steel: #547EC1; --pa-white: #FFFFFF; --pa-accent-press: #00A09F; } .gn-cursor-ripple { position: absolute; top: -6px; left: -6px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--pa-accent); animation: gnRipple 0.4s ease-out forwards; pointer-events: none; } @keyframes gnRipple { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } } @keyframes gfSD { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes gfBG { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes gfLI { from { stroke-dashoffset: 500; } to { stroke-dashoffset: 0; } } /* Was inline in wp_block 17 (gw-hero) until 4 September 2026; moved by the audit's CSS pass so git, review and the theme comparison can see it. Synced block: a theme component. */ #gn-hero-full { --hero-accent: var(--wp--preset--color--accent); --hero-cta: var(--wp--preset--color--cta); --hero-cta-hover: var(--wp--preset--color--cta-hover); --hero-ink: var(--wp--preset--color--ink); --hero-pale-steel: var(--wp--preset--color--pale-steel); --hero-primary: var(--wp--preset--color--primary); --hero-purple: var(--wp--preset--color--purple); --hero-steel: var(--wp--preset--color--steel); --hero-white: var(--wp--preset--color--white); } #gn-hero-full { --gn-mockup-height: clamp(190px, 42vh, 500px); --gn-mockup-bottom: calc(var(--gn-mockup-height) * -0.28); --gn-mockup-top: calc(var(--gn-mockup-height) + var(--gn-mockup-bottom)); position: relative; width: 100%; min-height: calc(100vh - var(--gn-header-height)); height: auto; overflow: hidden; } #gn-hero-full * { box-sizing: border-box; } .gn-hero-text-wrap { position: absolute; top: clamp(12px, 5vh, 60px); left: 0; right: 0; bottom: var(--gn-mockup-top); z-index: 30; display: flex; align-items: center; justify-content: center; padding: 0 32px clamp(8px, 3vh, 32px); } .gn-hero-text { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 1200px; } .gn-hero-pill { display: inline-block !important; font-family: var(--wp--preset--font-family--body) !important; font-size: 12px !important; font-weight: 700 !important; color: var(--hero-white) !important; letter-spacing: 0.11em !important; text-transform: uppercase !important; border: 1.5px solid rgb(from var(--genasys-white) r g b / 0.5) !important; border-radius: 100px !important; padding: 6px 18px !important; margin: 0 0 clamp(6px, 2vh, 20px) !important; line-height: 1.4 !important; background: transparent !important; white-space: nowrap !important; } .gn-hero-h2 { font-family: var(--wp--preset--font-family--heading) !important; font-size: clamp(26px, min(5vw, 7vh), 72px) !important; font-weight: 700 !important; line-height: 1.0 !important; letter-spacing: -0.02em !important; color: var(--hero-white) !important; margin: 0 0 4px !important; text-wrap: balance; } .gn-hero-h2-yellow { font-family: var(--wp--preset--font-family--heading) !important; font-size: clamp(26px, min(5vw, 7vh), 72px) !important; font-weight: 700 !important; line-height: 1.0 !important; letter-spacing: -0.02em !important; color: var(--hero-cta-hover) !important; margin: 0 0 clamp(8px, 3vh, 22px) !important; text-wrap: balance; } .gn-hero-body { font-family: var(--wp--preset--font-family--body); font-size: clamp(13px, 2.4vh, 16.5px); font-weight: 400; color: rgb(from var(--genasys-white) r g b / 0.85); line-height: 1.6; max-width: 720px; text-wrap: balance; margin: 0 auto clamp(10px, 3vh, 26px); } .gn-hero-body strong { color:var(--hero-white); font-weight:700; } .gn-hero-mob-br { display: none; } @property --gn-frame-angle { syntax: ''; initial-value: 0deg; inherits: false; } @media (max-width: 1024px) { #gn-hero-full { --gn-mockup-height: clamp(128px, 35.2vh, 368px); --gn-mockup-bottom: calc(var(--gn-mockup-height) * -0.217); min-height: calc(100vh - var(--gn-header-height)); height: auto; position: relative; overflow: hidden; display: block; } .gn-hero-text-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: var(--gn-mockup-top); padding: clamp(16px, 6vh, 50px) 24px clamp(16px, 5vh, 48px); } .gn-hero-h2, .gn-hero-h2-yellow { font-size: clamp(28px, min(8vw, 7vh), 80px) !important; } } @media (max-width: 600px) { #gn-hero-full { min-height: calc(100vh - var(--gn-header-height)); height: auto; position: relative; overflow: hidden; display: block; } .gn-hero-text-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: clamp(20px, 8vh, 60px) 20px clamp(20px, 9vh, 80px); display: flex; align-items: center; justify-content: center; } .gn-hero-text { max-width: 360px; } .gn-hero-h2, .gn-hero-h2-yellow { font-size: clamp(28px, min(12vw, 8vh), 60px) !important; line-height: 0.95 !important; } .gn-hero-h2-yellow { margin-bottom: clamp(8px, 3vh, 22px) !important; } .gn-hero-mob-br { display: inline; } .gn-hero-body { font-size: clamp(13px, 3vh, 16px) !important; max-width: 320px; } .gn-hero-pill { font-size: 12px !important; padding: 6px 16px !important; white-space: normal !important; text-wrap: balance; max-width: 100%; margin-bottom: clamp(6px, 2.5vh, 20px) !important; } } @media (prefers-reduced-motion: reduce) { #gn-hero-full *, #gn-hero-full *::before, #gn-hero-full *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ---- Colour per item: .gn-hue- (24 September 2026) ---- THE one way to give an item a palette colour. The class is named by the theme.json slug, so a colour has one name in the picker, the preset and here. It sets variables only; the component decides what to paint: --hue the colour --hue-on text or an icon on it: ink where white fails contrast, else white --hue-blob the brand blob shape, a mask the component fills with --hue A component that wants another on-colour sets it on itself (the signposts put white on every colour, Ed's choice). A list that colours its items by position sets --hue with :nth-child and nothing else. Never a new --gn--hue, a colour-named modifier, or a data-color attribute. */ .gn-hue-primary { --hue: var(--wp--preset--color--primary); --hue-on: var(--wp--preset--color--white); --hue-blob: url("/wp-content/themes/genasys-child/assets/brand/blob-primary.png"); } .gn-hue-accent { --hue: var(--wp--preset--color--accent); --hue-on: var(--wp--preset--color--ink); --hue-blob: url("/wp-content/themes/genasys-child/assets/brand/blob-teal.png"); } .gn-hue-accent-light { --hue: var(--wp--preset--color--accent-light); --hue-on: var(--wp--preset--color--ink); } .gn-hue-ink { --hue: var(--wp--preset--color--ink); --hue-on: var(--wp--preset--color--white); --hue-blob: url("/wp-content/themes/genasys-child/assets/brand/blob-steel.png"); } .gn-hue-steel { --hue: var(--wp--preset--color--steel); --hue-on: var(--wp--preset--color--white); --hue-blob: url("/wp-content/themes/genasys-child/assets/brand/blob-steel.png"); } .gn-hue-pale-steel { --hue: var(--wp--preset--color--pale-steel); --hue-on: var(--wp--preset--color--ink); --hue-blob: url("/wp-content/themes/genasys-child/assets/brand/blob-steel.png"); } .gn-hue-cta { --hue: var(--wp--preset--color--cta); --hue-on: var(--wp--preset--color--white); --hue-blob: url("/wp-content/themes/genasys-child/assets/brand/blob-red.png"); } .gn-hue-cta-hover { --hue: var(--wp--preset--color--cta-hover); --hue-on: var(--wp--preset--color--ink); --hue-blob: url("/wp-content/themes/genasys-child/assets/brand/blob-yellow.png"); } .gn-hue-purple { --hue: var(--wp--preset--color--purple); --hue-on: var(--wp--preset--color--white); --hue-blob: url("/wp-content/themes/genasys-child/assets/brand/blob-purple.png"); } .gn-icards { --gn-icard-cols: 4; display: grid; grid-template-columns: repeat(var(--gn-icard-cols), minmax(0, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; } .gn-icards > * { margin: 0 !important; max-width: none !important; } .gn-icard { position: relative; padding: 100px 28px 32px; border-radius: var(--card-radius); background: var(--wp--preset--color--white); box-shadow: 0 6px 24px var(--shadow-mid); text-align: left; } /* The icon: a filled brand circle with a thin line glyph, drawn by the two pseudo-elements. */ .gn-icard::before, .gn-icard::after { content: ""; position: absolute; left: 28px; top: 28px; width: 56px; height: 56px; } .gn-icard::before { border-radius: 50%; background: var(--hue); } .gn-icard::after { background: var(--hue-on); -webkit-mask: var(--icon) center / 28px no-repeat; mask: var(--icon) center / 28px no-repeat; } .gn-icard h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.2; } .gn-icard p, .gn-icard li { font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--ink); } .gn-icard p { margin: 0; } .gn-icard ul { margin: 0; padding-left: 1.1em; } .gn-icard li { margin: 0 0 6px; } .gn-icard--i-bolt { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202.5%205%2013.5h6l-1%208%208-11h-6z%22%2F%3E%3C%2Fsvg%3E"); } .gn-icard--i-check { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8%2012.5%203%203%205-6%22%2F%3E%3C%2Fsvg%3E"); } .gn-icard--i-sliders { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h9M17%207h3M4%2017h3M11%2017h9%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%227%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2217%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); } .gn-icard--i-users { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M2.5%2020c0-3.6%202.9-6%206.5-6s6.5%202.4%206.5%206%22%2F%3E%3Cpath%20d%3D%22M16%204.7a3.5%203.5%200%200%201%200%206.6M18.2%2014.6c2%20.8%203.3%202.7%203.3%205.4%22%2F%3E%3C%2Fsvg%3E"); } @media (max-width: 1024px) { .gn-icards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .gn-icards { grid-template-columns: 1fr; } } /* The pause control on an auto-advancing jobs strip (functions.php, gn-jobs-panel--auto). */ .gn-jobs-pause { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 24px auto 0; padding: 0; border: 0; border-radius: 50%; background: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); box-shadow: 0 2px 10px var(--shadow-mid); cursor: pointer; } .gn-jobs-pause svg { width: 18px; height: 18px; } .gn-jobs-pause:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; } /* §313 in STYLE-NOTES.md (repo root) */ .wp-block-navigation.gn-site-nav .wp-block-navigation__submenu-container .gn-nav-sep { /* A real margin here would shift the item itself right, tabbing its text in from its neighbours. The line is drawn by a pseudo-element instead, inset 20px each side to match the text's own padding, so the item's position and text stay exactly where the others are. */ position: relative; margin-top: 8px; padding-top: 8px; } .wp-block-navigation.gn-site-nav .wp-block-navigation__submenu-container .gn-nav-sep::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; border-top: 1px solid rgb(from var(--genasys-space-blue) r g b / 0.06); } /* ============================================================ Shared from two page sheets, 22 September 2026 ------------------------------------------------------------ Gary's call after the page sheets were measured: About Us and Careers held 51 identical declaration blocks between them, about 368 lines, the same components with the class prefix renamed. What moved here is only what was byte-identical in both sheets. What differs stays per page: Careers' timeline track has five columns to About Us's six, its gradient is recomputed to match, and it overrides three list rules after the shared ones. Those overrides still win, because a page sheet is enqueued with the child stylesheet as a dependency and therefore loads after it. The markup keeps its page-specific class names, so these are alias pairs rather than a rename: one implementation, no content edits, and `:is()` holds the same specificity as the bare class it replaces. Rename both to a single class when a third page wants either component. NOT moved, deliberately: the signpost cards and the section heads. Both look like duplication and are not. Only 7 of the signpost's 27 rules are identical across the three pages that use it, and 2 of the section head's 14; the rest have drifted apart in padding, icon size and hover. Flattening them into one component would restyle two pages, which is a design decision rather than a refactor, so it is Ed's and Gary's to make rather than something to slip into a tidy-up. Image paths are rewritten relative to THIS file: a page sheet in assets/pages/ reaches the art as ../brand/, and from the theme root that is assets/brand/. A missing background image throws nothing, so getting this wrong loses the blobs in silence. ============================================================ */ /* ---- The interactive timeline ---- Built for About Us ("How we got here"), then copied into Careers as "How we hire" with the prefix renamed. STYLE-NOTES §306 said to move it when a third page wanted it; a second copy is already what that rule exists to prevent. */ /* ---- Interactive timeline: CSS only, no script ---- */ :is(.gn-ab-tl, .gn-cr-tl) { --tl-blob: 128px; } /* §345: one grid. Each era is display: contents, so its blob, title and panel sit in the track's own grid: blobs on row 1, titles on row 2, and every panel in the same cell on row 3. That row is as tall as the tallest panel, so nothing overflows and no height is guessed. :hover and :focus-within still match the era, because they follow the DOM. A page sheet sets only --tl-count and its line's colours. */ :is(.gn-ab-tl-track, .gn-cr-tl-track) { --tl-count: 6; /* the default; a page sheet sets its own era count */ position: relative; display: grid; grid-template-columns: repeat(var(--tl-count), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } :is(.gn-ab-tl-track, .gn-cr-tl-track)::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--tl-blob) / 2 - 3px); height: 6px; border-radius: 999px; } :is(.gn-ab-tl-era, .gn-cr-tl-era) { display: contents; margin: 0; padding: 0; text-align: center; list-style: none; } :is(.gn-ab-tl-blob, .gn-cr-tl-blob) { grid-row: 1; } :is(.gn-ab-tl-tag, .gn-cr-tl-tag) { grid-row: 2; } :is(.gn-ab-tl-panel, .gn-cr-tl-panel) { grid-row: 3; grid-column: 1 / -1; align-self: start; /* its own height, not the tallest panel's (Ed): grid items stretch by default */ /* Closed panels leave the layout, so the timeline is as tall as the open panel, growing and shrinking with it (Ed). Absolutely placed in the same grid area, they still fade in and out where they belong. */ position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 240px 1fr; margin-top: 40px; overflow: hidden; border-radius: var(--card-radius); background: var(--wp--preset--color--white); box-shadow: 0 8px 30px var(--shadow-mid); text-align: left; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; } :is(.gn-ab-tl-list, .gn-cr-tl-list) li { position: relative; margin: 0 0 16px; padding-left: 30px; font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--ink); } :is(.gn-ab-tl-list, .gn-cr-tl-list) li::before { content: ""; position: absolute; left: 0; top: 0.4em; width: 14px; height: 14px; border-radius: 50%; background: var(--hue); } :is(.gn-ab-tl-blob, .gn-cr-tl-blob) { position: relative; z-index: 1; display: block; width: var(--tl-blob); height: var(--tl-blob); margin: 0 auto; padding: 0; border: 0; background: none; color: var(--wp--preset--color--white); cursor: pointer; transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); } /* The blob is a mask, so any palette colour can fill its shape. */ :is(.gn-ab-tl-blob, .gn-cr-tl-blob)::before { content: ""; position: absolute; inset: 0; background: var(--hue); -webkit-mask: var(--hue-blob) center / contain no-repeat; mask: var(--hue-blob) center / contain no-repeat; } :is(.gn-ab-tl-year, .gn-cr-tl-year) { position: relative; font-family: var(--wp--preset--font-family--heading); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; text-shadow: 0 1px 4px rgb(from var(--genasys-space-blue) r g b / 0.3); } :is(.gn-ab-tl-blob, .gn-cr-tl-blob):focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 4px; border-radius: 50%; } :is(.gn-ab-tl-tag, .gn-cr-tl-tag) { margin: 6px 6px 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--wp--preset--color--ink); } :is(.gn-ab-tl-range, .gn-cr-tl-range) { display: flex; align-items: center; margin: 0; padding: 28px; font-size: 28px; line-height: 1.1; color: var(--hue-on); background: var(--hue); } /* Milestones run down the panel in time order, joined by a thin line. */ :is(.gn-ab-tl-list, .gn-cr-tl-list) { margin: 0; padding: 26px 32px 12px 36px; list-style: none; } :is(.gn-ab-tl-list, .gn-cr-tl-list) li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: calc(0.4em + 14px); bottom: -14px; width: 2px; background: var(--hue); opacity: 0.35; } :is(.gn-ab-tl-era, .gn-cr-tl-era):hover :is(.gn-ab-tl-panel, .gn-cr-tl-panel), :is(.gn-ab-tl-era, .gn-cr-tl-era):focus-within :is(.gn-ab-tl-panel, .gn-cr-tl-panel), :is(.gn-ab-tl-track, .gn-cr-tl-track):not(:has(:is(.gn-ab-tl-era, .gn-cr-tl-era):hover, :is(.gn-ab-tl-era, .gn-cr-tl-era):focus-within)) :is(.gn-ab-tl-era, .gn-cr-tl-era):first-child :is(.gn-ab-tl-panel, .gn-cr-tl-panel) { position: relative; opacity: 1; pointer-events: auto; transform: none; } :is(.gn-ab-tl-era, .gn-cr-tl-era):hover :is(.gn-ab-tl-blob, .gn-cr-tl-blob), :is(.gn-ab-tl-era, .gn-cr-tl-era):focus-within :is(.gn-ab-tl-blob, .gn-cr-tl-blob), :is(.gn-ab-tl-track, .gn-cr-tl-track):not(:has(:is(.gn-ab-tl-era, .gn-cr-tl-era):hover, :is(.gn-ab-tl-era, .gn-cr-tl-era):focus-within)) :is(.gn-ab-tl-era, .gn-cr-tl-era):first-child :is(.gn-ab-tl-blob, .gn-cr-tl-blob) { transform: scale(1.14); } @media (max-width: 1024px) { :is(.gn-ab-tl, .gn-cr-tl) { --tl-blob: 104px; } } @media (max-width: 1024px) { :is(.gn-ab-tl-range, .gn-cr-tl-range) { font-size: 22px; padding: 22px; } } @media (max-width: 1024px) { :is(.gn-ab-tl-list, .gn-cr-tl-list) { padding: 22px 24px 8px 28px; } } @media (max-width: 1024px) { :is(.gn-ab-tl-year, .gn-cr-tl-year) { font-size: 20px; } } @media (max-width: 860px) { /* Below tablet the timeline is a plain vertical list: every era open. */ :is(.gn-ab-tl-track, .gn-cr-tl-track) { display: block; padding-bottom: 0; } } @media (max-width: 860px) { :is(.gn-ab-tl-track, .gn-cr-tl-track)::before { display: none; } } @media (max-width: 860px) { :is(.gn-ab-tl-era, .gn-cr-tl-era) { display: block; margin-bottom: 32px; text-align: left; } } @media (max-width: 860px) { /* No blobs in the list (Ed): each panel's coloured header already shows the years, so the blob only repeated them. The era's title leads. */ :is(.gn-ab-tl-blob, .gn-cr-tl-blob) { display: none; } } @media (max-width: 860px) { :is(.gn-ab-tl, .gn-cr-tl) { --tl-blob: 96px; } } @media (max-width: 860px) { /* The list places its own parts: undo the row grid's rows (§345). */ :is(.gn-ab-tl-blob, .gn-cr-tl-blob, .gn-ab-tl-tag, .gn-cr-tl-tag, .gn-ab-tl-panel, .gn-cr-tl-panel) { grid-row: auto; } } @media (max-width: 860px) { :is(.gn-ab-tl-blob, .gn-cr-tl-blob) { margin: 0; } } @media (max-width: 860px) { :is(.gn-ab-tl-tag, .gn-cr-tl-tag) { margin: 0; font-size: 17px; } } @media (max-width: 860px) { :is(.gn-ab-tl-panel, .gn-cr-tl-panel) { position: static; grid-column: 1 / -1; grid-template-columns: 1fr; margin-top: 14px; opacity: 1; pointer-events: auto; transform: none; box-shadow: var(--card-shadow); } } @media (max-width: 860px) { :is(.gn-ab-tl-range, .gn-cr-tl-range) { padding: 16px 22px; font-size: 22px; } } @media (max-width: 860px) { :is(.gn-ab-tl-list, .gn-cr-tl-list) { padding: 20px 22px 6px 26px; } } @media (max-width: 860px) { :is(.gn-ab-tl-era, .gn-cr-tl-era):hover :is(.gn-ab-tl-blob, .gn-cr-tl-blob), :is(.gn-ab-tl-era, .gn-cr-tl-era):focus-within :is(.gn-ab-tl-blob, .gn-cr-tl-blob), :is(.gn-ab-tl-track, .gn-cr-tl-track):not(:has(:is(.gn-ab-tl-era, .gn-cr-tl-era):hover, :is(.gn-ab-tl-era, .gn-cr-tl-era):focus-within)) :is(.gn-ab-tl-era, .gn-cr-tl-era):first-child :is(.gn-ab-tl-blob, .gn-cr-tl-blob) { transform: none; } } /* §348 in STYLE-NOTES.md (repo root) */ /* §426 */ .gn-ab-team { --cols: 5; --gx: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px var(--gx); margin-top: 8px; } .gn-ab-team > * { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols)); } .gn-ab-team-card { display: block; text-align: center; text-decoration: none; color: inherit; } .gn-ab-team-photo { position: relative; display: block; width: 100%; max-width: 200px; margin: 0 auto; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 50%; background: var(--neutral-100); box-shadow: 0 2px 10px var(--shadow-soft); transition: background-color 0.7s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease; } .gn-ab-team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.7s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .gn-ab-team-card:hover .gn-ab-team-photo, .gn-ab-team-card:focus-visible .gn-ab-team-photo { background-color: var(--hue); transform: scale(1.06); box-shadow: 0 14px 32px var(--shadow-mid); } .gn-ab-team-card:hover .gn-ab-team-photo img, .gn-ab-team-card:focus-visible .gn-ab-team-photo img { filter: none; } .gn-ab-team-card:focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 6px; border-radius: 16px; } .gn-ab-team-name { font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--wp--preset--color--ink); margin: 18px 0 4px; } .gn-ab-team-role { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text-muted); margin: 0; } @media (hover: none) { .gn-ab-team-photo { background-color: var(--hue); } .gn-ab-team-photo img { filter: none; } } /* §349 in STYLE-NOTES.md (repo root) */ .wp-block-button[class*="gn-hue-"] .wp-block-button__link { background: var(--hue); color: var(--wp--preset--color--white); } .wp-block-button[class*="gn-hue-"] .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); } /* §350 in STYLE-NOTES.md (repo root) */ .gn-form-thanks:not(.is-shown) { display: none; } @media (prefers-reduced-motion: reduce) { :is(.gn-ab-tl-blob, .gn-cr-tl-blob), :is(.gn-ab-tl-panel, .gn-cr-tl-panel), :is(.gn-ab-sign, .gn-cr-sign), :is(.gn-ab-sign-icon, .gn-cr-sign-icon), :is(.gn-ab-sign-more, .gn-cr-sign-more), :is(.gn-ab-team-photo, .gn-cr-team-photo), :is(.gn-ab-team-photo, .gn-cr-team-photo) img, :is(.gn-ab-textlink, .gn-cr-textlink) a::after { transition: none; } } /* ---- The tile colour modifiers ---- Each class sets the custom properties its components read. Both sheets already used the SAME property names, `--gn-ab-c` and friends, even inside `.gn-cr-c-*` in the Careers sheet, so sharing them needed no change to any consumer. The names read as About Us's and are not; left alone rather than renamed across 26 references on the same day. */ /* Purple is an alias pair like the four below. Primary, steel and sky exist only on About Us today; they live here anyway, because the rule that READS these properties lives here, and a url() inside a custom property is resolved against the file where the var() is used, not the file where the property is declared. Left in the page sheet, `../brand/` resolved from the theme root instead of from assets/pages/ and the blobs 404'd: that is what broke the first one or two timeline steps on both pages on 22 September 2026, visible as a missing blob and no hover. Keep every --gn-ab-blob declaration in this file. */ /* ---- The signposts ---- Hover-reveal value bars on About Us, Careers and Speed to Market. One implementation behind alias pairs, so the markup keeps its page names. §330 in STYLE-NOTES.md (repo root). */ :is(.gn-ab-signs, .gn-cr-signs, .gn-stm-signs) { display: flex; flex-direction: column; gap: 16px; } /* Every sign has a fixed height, so opening one never pushes the others. */ :is(.gn-ab-sign, .gn-cr-sign, .gn-stm-sign) { position: relative; display: flex; align-items: center; gap: 24px; height: 124px; padding: 0 34px; border-radius: 36px; background: var(--hue); color: var(--wp--preset--color--white); text-shadow: 0 1px 4px rgb(from var(--genasys-space-blue) r g b / 0.3); box-shadow: 0 6px 20px rgb(from var(--genasys-space-blue) r g b / 0.18); cursor: default; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease; } :is(.gn-ab-sign, .gn-cr-sign, .gn-stm-sign):focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 4px; } :is(.gn-ab-sign-icon, .gn-cr-sign-icon, .gn-stm-sign-icon) { flex: 0 0 64px; width: 64px; height: 64px; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } :is(.gn-ab-sign-icon, .gn-cr-sign-icon, .gn-stm-sign-icon) svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgb(from var(--genasys-space-blue) r g b / 0.3)); } :is(.gn-ab-sign-text, .gn-cr-sign-text, .gn-stm-sign-text) { flex: 1; min-width: 0; } :is(.gn-ab-sign, .gn-cr-sign, .gn-stm-sign) :is(.gn-ab-sign-title, .gn-cr-sign-title, .gn-stm-sign-title) { font-family: var(--wp--preset--font-family--heading); font-size: 26px; font-weight: 700; line-height: 1.1; color: inherit; margin: 0 !important; } /* The description is always in the HTML, folded shut until hover or focus. */ :is(.gn-ab-sign-more, .gn-cr-sign-more, .gn-stm-sign-more) { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease 0.08s; } :is(.gn-ab-sign-more, .gn-cr-sign-more, .gn-stm-sign-more) > p { min-height: 0; overflow: hidden; margin: 0; font-size: 17px; line-height: 1.4; } :is(.gn-ab-sign-more, .gn-cr-sign-more, .gn-stm-sign-more) > p::before { content: ""; display: block; height: 8px; } :is(.gn-ab-sign, .gn-cr-sign, .gn-stm-sign):is(:hover, :focus-visible) { z-index: 2; transform: scale(1.05); box-shadow: 0 18px 38px rgb(from var(--genasys-space-blue) r g b / 0.3); } :is(.gn-ab-sign, .gn-cr-sign, .gn-stm-sign):is(:hover, :focus-visible) :is(.gn-ab-sign-more, .gn-cr-sign-more, .gn-stm-sign-more) { grid-template-rows: 1fr; opacity: 1; } :is(.gn-ab-sign, .gn-cr-sign, .gn-stm-sign):is(:hover, :focus-visible) :is(.gn-ab-sign-icon, .gn-cr-sign-icon, .gn-stm-sign-icon) { transform: scale(1.08); } /* Touch has no hover, so the signs stay open. */ @media (max-width: 860px) { :is(.gn-ab-sign-more, .gn-cr-sign-more, .gn-stm-sign-more) { grid-template-rows: 1fr; opacity: 1; } :is(.gn-ab-sign, .gn-cr-sign, .gn-stm-sign) { height: auto; min-height: 124px; padding-block: 22px; } :is(.gn-ab-sign, .gn-cr-sign, .gn-stm-sign):is(:hover, :focus-visible) { transform: none; } } @media (max-width: 600px) { :is(.gn-ab-sign, .gn-cr-sign, .gn-stm-sign) { gap: 18px; padding-inline: 22px; border-radius: 30px; } :is(.gn-ab-sign-icon, .gn-cr-sign-icon, .gn-stm-sign-icon) { flex-basis: 48px; width: 48px; height: 48px; } :is(.gn-ab-sign, .gn-cr-sign, .gn-stm-sign) :is(.gn-ab-sign-title, .gn-cr-sign-title, .gn-stm-sign-title) { font-size: 22px; } :is(.gn-ab-sign-more, .gn-cr-sign-more, .gn-stm-sign-more) > p { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { :is(.gn-ab-sign, .gn-cr-sign, .gn-stm-sign), :is(.gn-ab-sign-icon, .gn-cr-sign-icon, .gn-stm-sign-icon), :is(.gn-ab-sign-more, .gn-cr-sign-more, .gn-stm-sign-more) { transition: none; } } /* ================= Case-study quote band (shared, 23 September 2026) ======= Built for Speed to Market (GENRIC/Cornel) and taken up by Connectivity (Craig) the same week, so it is promoted out of the page sheet on the site rule: the second page that wants a thing makes it shared. Selectors are :is() alias pairs, .gn-stm-case* and .gn-case*, so Speed to Market keeps its markup and nothing needed a content edit. New pages use the .gn-case* names. Every part is optional: a quote with no eyebrow, no stats and no call to action degrades to quote, attribution, rule and artwork. Connectivity uses exactly that reduced form. ====================================================================== */ /* ---- GENRIC case-study quote (23 September 2026, Ed's design) ---- A MODIFIER on the shared .gn-quote-band, deliberately not a change to it: that band is also Connectivity's closing quote (Craig Olivier), which has no cutout, no stats and no case study behind it. Changing the shared component would have restyled a page nobody asked about. Labels are white, not Steel Blue: #9FB6D4 on Sapphire measures 3.79:1, which fails AA below 18.66px. Hierarchy comes from size and weight instead. The house eyebrow is white here for the same reason; its teal is 3.00:1. */ :is(:is(.gn-stm-case-grid, .gn-case-grid), .gn-case-grid) { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; } :is(:is(.gn-stm-case, .gn-case), .gn-case) .gn-eyebrow { color: var(--wp--preset--color--white); margin-bottom: 18px; } :is(:is(.gn-stm-case-quote, .gn-case-quote), .gn-case-quote) { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(26px, 2.9vw, 36px); line-height: 1.14; color: var(--wp--preset--color--white); /* No last word alone on its own line (Ed). */ text-wrap: pretty; } :is(.gn-stm-case-quote, .gn-case-quote)::before { content: "”"; display: block; margin-bottom: 10px; font-size: 64px; line-height: 0.55; color: var(--wp--preset--color--cta-hover); } /* Name and role on one line, a thin rule between (Ed); they wrap when narrow. */ :is(:is(.gn-stm-case-name, .gn-case-name), .gn-case-name) { display: inline-block; margin: 26px 0 0; font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--wp--preset--color--white); } :is(:is(.gn-stm-case-name, .gn-case-name), .gn-case-name)::after { content: ""; display: inline-block; width: 1px; height: 0.9em; margin: 0 12px; vertical-align: -0.1em; background: currentColor; } :is(:is(.gn-stm-case-role, .gn-case-role), .gn-case-role) { display: inline-block; margin: 0; font-size: 17px; line-height: 1.5; color: var(--wp--preset--color--white); } @media (max-width: 600px) { :is(.gn-stm-case-name, .gn-case-name, .gn-stm-case-role, .gn-case-role) { display: block; } :is(.gn-stm-case-name, .gn-case-name)::after { display: none; } :is(.gn-stm-case-role, .gn-case-role) { margin-top: 2px; } } /* The palette in order, as a hairline. */ :is(:is(.gn-stm-case-rule, .gn-case-rule), .gn-case-rule) { height: 3px; margin: 26px 0; border: 0; border-radius: 2px; background: linear-gradient(90deg, var(--wp--preset--color--steel) 0%, var(--wp--preset--color--accent) 28%, var(--wp--preset--color--cta-hover) 52%, var(--wp--preset--color--cta) 76%, var(--wp--preset--color--purple) 100%); } :is(:is(.gn-stm-case-context, .gn-case-context), .gn-case-context) { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--wp--preset--color--white); } :is(:is(.gn-stm-case-stats, .gn-case-stats), .gn-case-stats) { display: flex; gap: 52px; margin-top: 34px; } :is(:is(.gn-stm-case-num, .gn-case-num), .gn-case-num) { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(34px, 4vw, 52px); line-height: 1; color: var(--wp--preset--color--white); white-space: nowrap; } :is(:is(.gn-stm-case-lab, .gn-case-lab), .gn-case-lab) { margin: 8px 0 0; font-size: 15px; line-height: 1.4; color: var(--wp--preset--color--white); } /* The cutout carries its own purple blob, so there is no ring or plate behind it. */ :is(:is(.gn-stm-case-art, .gn-case-art), .gn-case-art) { position: relative; } :is(:is(.gn-stm-case-art, .gn-case-art), .gn-case-art) img { display: block; width: 100%; height: auto; } :is(:is(.gn-stm-case-dot, .gn-case-dot), .gn-case-dot) { position: absolute; border-radius: 50%; } :is(:is(.gn-stm-case-dot--1, .gn-case-dot--1), .gn-case-dot--1) { top: 18%; left: 95%; width: 14px; height: 14px; background: var(--wp--preset--color--cta-hover); } :is(:is(.gn-stm-case-dot--2, .gn-case-dot--2), .gn-case-dot--2) { top: 39%; left: -3%; width: 11px; height: 11px; background: var(--wp--preset--color--cta); } :is(:is(.gn-stm-case-dot--3, .gn-case-dot--3), .gn-case-dot--3) { top: 87%; left: 98%; width: 12px; height: 12px; background: var(--wp--preset--color--accent); } @media (max-width: 900px) { :is(:is(.gn-stm-case-grid, .gn-case-grid), .gn-case-grid) { grid-template-columns: 1fr; gap: 36px; } :is(:is(.gn-stm-case-art, .gn-case-art), .gn-case-art) { max-width: 380px; margin-inline: auto; } :is(:is(.gn-stm-case-stats, .gn-case-stats), .gn-case-stats) { gap: 36px; } } /* ---- Case template on tablets and phones (Ed, 24 September 2026) ---- More room at the sides than the band's 20px, on every case section. Once stacked, a case with no stats (Connectivity's Craig Olivier) centres. A case with stats (Speed to Market's Cornel Schoeman) keeps its text left on tablets, narrowed, with the photo small in the bottom right beside the stats rather than a full-width photo underneath. */ :is(.gn-stm-case, .gn-case) { padding-inline: clamp(28px, 6vw, 56px); } /* The case template's call to action: a plain text link in Mellow Yellow, not a button (Ed). Promoted from the Speed to Market sheet when Connectivity's Craig Olivier section took the same shape. */ .gn-quote-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; color: var(--wp--preset--color--cta-hover); font-weight: 700; font-size: 17px; text-decoration: none; } .gn-quote-cta svg { width: 16px; height: 16px; transition: translate 0.25s ease; } .gn-quote-cta:hover { color: var(--wp--preset--color--white); } .gn-quote-cta:hover svg { translate: 4px 0; } /* §343: an award badge on the photo's bottom right (Careers, Andre Symes). */ .gn-case-award { position: absolute; z-index: 1; right: 2%; bottom: 4%; } .gn-case-award .gn-award { --gn-award-size: 140px; } @media (max-width: 900px) { .gn-case-award .gn-award { --gn-award-size: 110px; } } @media (min-width: 601px) and (max-width: 900px) { .gn-case-grid:has(.gn-case-stats) .gn-case-award { right: -4%; bottom: 0; } .gn-case-grid:has(.gn-case-stats) .gn-case-award .gn-award { --gn-award-size: 96px; } } /* A context of several paragraphs (Connectivity) needs a gap between them. */ :is(.gn-stm-case-context, .gn-case-context) + :is(.gn-stm-case-context, .gn-case-context) { margin-top: 1em; } @media (max-width: 900px) { :is(.gn-stm-case-grid, .gn-case-grid):not(:has(:is(.gn-stm-case-stats, .gn-case-stats))) { text-align: center; } :is(.gn-stm-case-grid, .gn-case-grid):not(:has(:is(.gn-stm-case-stats, .gn-case-stats))) :is(.gn-stm-case-context, .gn-case-context) { margin-inline: auto; } } @media (min-width: 601px) and (max-width: 900px) { :is(.gn-stm-case-grid, .gn-case-grid):has(:is(.gn-stm-case-stats, .gn-case-stats)) { position: relative; max-width: 620px; margin-inline: auto; } /* The photo fills the space right of the words below the rule (Ed). */ :is(.gn-stm-case-grid, .gn-case-grid):has(:is(.gn-stm-case-stats, .gn-case-stats)) :is(.gn-stm-case-stats, .gn-case-stats, .gn-stm-case-context, .gn-case-context) { padding-right: 45%; } :is(.gn-stm-case-grid, .gn-case-grid):has(:is(.gn-stm-case-stats, .gn-case-stats)) :is(.gn-stm-case-art, .gn-case-art) { position: absolute; right: 0; bottom: 0; width: 42%; max-width: none; margin: 0; } } /* Ed (23 September 2026): the case-quote band was a flat Sapphire fill next to heroes that carry a gradient, so it read as a different kind of surface. It now uses the SAME ground .gn-product-hero draws: Sapphire from the top centre out to Ink. Scoped to the case template rather than to .gn-quote-band, so any plain quote band keeps the flat fill. Same specificity as .gn-quote-band (0,1,0) and later in the file, which is what makes it win; if this block is ever moved above that rule it stops working with no error anywhere. */ :is(.gn-stm-case, .gn-case) { background: radial-gradient(at 50% 0%, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--ink) 100%); } /* ============ .gn-feat brought onto the homepage pillar styling ============ Ed (23 September 2026): the zig-zag sections on Speed to Market should match the homepage Product Pillars. The two are NOT selector-compatible, so this is not an alias pair: .gn-pil draws its check marks as inline SVG and .gn-feat as a masked pseudo-element. What is shared is the look, so .gn-feat takes the pillar measurements. Claims Management uses .gn-feat too and changes with it, which Ed approved. Values copied from .gn-pil-*: 56px icon at 14px radius, h2 at --gn-section-heading in Sapphire, 15px uppercase kicker, 16px/1.7 body, 16px/1.6 bullets, 18px link. ======================================================================== */ .gn-feat::before { width: 56px; height: 56px; border-radius: 14px; } .gn-feat::after { width: 56px; height: 56px; -webkit-mask-size: 28px; mask-size: 28px; } .gn-feat h2 { font-family: var(--wp--preset--font-family--heading); font-size: var(--gn-section-heading); font-weight: 700; line-height: 1.1; color: var(--wp--preset--color--primary); margin: 0 0 12px; } /* The kicker was a plain coloured paragraph with the words merely typed in capitals; the pillar version is a real label. */ .gn-feat-kicker { font-family: var(--wp--preset--font-family--body); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hue, var(--wp--preset--color--cta)); margin: 0 0 20px; } .gn-feat > p:not(.gn-feat-kicker) { font-size: 16px; line-height: 1.7; color: var(--wp--preset--color--ink); margin-bottom: 28px; } .gn-feat ul { display: flex; flex-direction: column; gap: 14px; margin: 0 0 32px; } .gn-feat ul li { font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--ink); margin: 0; } /* One palette per section, matching the homepage teal, red and purple. */ .gn-feat--asfast { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L4.5 13H11l-1 9 8.5-11H12l1-9z'/%3E%3C/svg%3E"); } .gn-feat--control { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E"); } .gn-feat--waiting { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); } /* ==== Editorial split (.gn-split): pattern "Editorial Split" (Ed, 24 September 2026) ==== A sticky intro on the left (eyebrow, h2, spectrum rule, one paragraph) and a numbered two-column list of items on the right, each an h3 with a paragraph or a bullet list. One look for every page that uses it: Connectivity's 'Benefits of insurance API integration' and Speed to Market's 'Everything you need to build insurance products'. The words stay per page; this is a pattern, not a synced block. Native blocks only; the numbers are a CSS counter and the spectrum rule a pseudo-element, so neither needs markup and screen readers skip both. */ .gn-split.gn-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; max-width: var(--wp--style--global--content-size); /* lines up with every other section (Ed); the handoff said 1180px */ margin-inline: auto !important; /* vertical space comes from the site's section spacing */ } .gn-split > * { max-width: none !important; margin: 0 !important; } .gn-split-head { position: sticky; top: calc(var(--gn-header-height) + 37px); } /* clears the sticky site header, with room */ .gn-split-head .gn-eyebrow { letter-spacing: 0.14em; margin-bottom: 18px; } .gn-split-head h2 { margin: 0 0 24px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--gn-section-heading); /* the site's section-heading size (style.css, STYLE-NOTES §2), not the handoff's 48 (Ed) */ line-height: 1.1; letter-spacing: -0.015em; color: var(--wp--preset--color--primary); text-wrap: balance; } .gn-split-head h2::after { content: ""; display: block; width: 120px; height: 3px; margin-top: 24px; border-radius: 2px; background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent) 22%, var(--wp--preset--color--cta-hover) 44%, var(--wp--preset--color--cta) 66%, var(--wp--preset--color--purple) 84%, var(--wp--preset--color--ink) 100%); } .gn-split-head .gn-split-dek { margin: 0; font-size: 19px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; } .gn-split-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; counter-reset: gn-split; } .gn-split-list > * { max-width: none !important; margin: 0 !important; } .gn-split-item { border-top: 1px solid var(--border-subtle); padding-top: 24px; counter-increment: gn-split; --hue: var(--wp--preset--color--accent); } /* Each item takes one Genasys colour for its number and its ticks (Ed), in a repeating run of six so any count works. */ .gn-split-item:nth-child(6n+2) { --hue: var(--wp--preset--color--primary); } .gn-split-item:nth-child(6n+3) { --hue: var(--wp--preset--color--cta-hover); } .gn-split-item:nth-child(6n+4) { --hue: var(--wp--preset--color--cta); } .gn-split-item:nth-child(6n+5) { --hue: var(--wp--preset--color--purple); } .gn-split-item:nth-child(6n) { --hue: var(--wp--preset--color--steel); } .gn-split-item::before { content: counter(gn-split, decimal-leading-zero) / ""; display: block; margin-bottom: 12px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 15px; color: var(--hue); } .gn-split-item h3 { margin: 0 0 10px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 21px; line-height: 1.22; color: var(--wp--preset--color--ink); } .gn-split-item :is(p, li) { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; } .gn-split-item ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .gn-split-item li { position: relative; padding-left: 30px; } /* The zig-zag tick (.gn-feat), in the item's colour. */ .gn-split-item li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: var(--hue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat; } /* An item may open with a paragraph above its list and close with a text link. */ .gn-split-item p + ul { margin-top: 14px; } .gn-split-item .gn-split-link { margin-top: 16px; } .gn-split-item { --gn-textlink-colour: var(--hue); } /* ==== Text link: the style guide's text-only button (Ed) ==== Bold text and a chevron, never an arrow and never a button shape, in the section's colour (set --gn-textlink-colour on the item), hover to ink with the chevron nudging on. One implementation: new sections add their link class here rather than restyling it. The chevron is inline so it stays on the end of the text when the text wraps. */ :is(.gn-textlink, .gn-split-link, .gn-fit-link, .gn-sec-link) a { font-size: 18px; font-weight: 700; text-decoration: none; color: var(--gn-textlink-colour, var(--wp--preset--color--primary)); transition: color 0.3s ease; } :is(.gn-textlink, .gn-split-link, .gn-fit-link, .gn-sec-link) a::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.3s ease; } :is(.gn-textlink, .gn-split-link, .gn-fit-link, .gn-sec-link) a:hover { color: var(--wp--preset--color--ink); } :is(.gn-textlink, .gn-split-link, .gn-fit-link, .gn-sec-link) a:hover::after { transform: translateX(6px); } /* §384 in STYLE-NOTES.md (repo root) */ :is(.gn-on-dark, .gn-band-navy, .gn-band--primary, .gn-band--ink) { --gn-textlink-colour: var(--wp--preset--color--cta-hover); } :is(.gn-on-dark, .gn-band-navy, .gn-band--primary, .gn-band--ink) :is(.gn-textlink, .gn-split-link, .gn-fit-link, .gn-sec-link) a:hover { color: var(--wp--preset--color--white); } @media (prefers-reduced-motion: reduce) { :is(.gn-textlink, .gn-split-link, .gn-fit-link, .gn-sec-link) a, :is(.gn-textlink, .gn-split-link, .gn-fit-link, .gn-sec-link) a::after { transition: none; } } @media (max-width: 960px) { .gn-split.gn-split { grid-template-columns: 1fr; gap: 56px; } .gn-split-head { position: static; max-width: 640px; } } @media (max-width: 640px) { .gn-split-list { grid-template-columns: 1fr; gap: 36px; } } /* ==== Values split: words left, signs right ==== About Us (mission and values), Careers (values we hire for) and Speed to Market (speed is your new competitive advantage) each had their own copy; promoted per STYLE-NOTES §312 when the third arrived. Alias selectors, so no page content changed. Page sheets keep only what is theirs. */ :is(.gn-ab-values-cols, .gn-cr-values-cols, .gn-stm-speed-cols) { align-items: center; gap: 64px; margin: 0; } :is(.gn-ab-values-copy, .gn-cr-values-copy, .gn-stm-speed-copy) { flex-basis: 42% !important; } :is(.gn-ab-values-signs, .gn-cr-values-signs, .gn-stm-speed-signs) { flex-basis: 58% !important; } @media (max-width: 1024px) { :is(.gn-ab-values-cols, .gn-cr-values-cols, .gn-stm-speed-cols) { gap: 40px; } } @media (max-width: 860px) { :is(.gn-ab-values-cols, .gn-cr-values-cols, .gn-stm-speed-cols) { gap: 32px; } :is(.gn-ab-values-copy, .gn-cr-values-copy, .gn-stm-speed-copy), :is(.gn-ab-values-signs, .gn-cr-values-signs, .gn-stm-speed-signs) { flex-basis: 100% !important; } } /* The mission lead and the values words, written twice until §427. */ :is(.gn-ab-mission-lead, .gn-cr-mission-lead) { font-family: var(--wp--preset--font-family--body); font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--wp--preset--color--ink); margin: 4px 0 26px; } :is(.gn-ab-values-copy p:not(.gn-ab-mission-lead), .gn-cr-values-copy p:not(.gn-cr-mission-lead)) { font-size: 17px; line-height: 1.6; } @media (max-width: 600px) { :is(.gn-ab-mission-lead, .gn-cr-mission-lead) { font-size: 22px; } } /* ==== Deep band shell: edge to edge, primary into ink from the top ==== Product's security band (.gn-sec) and Connectivity's integrations (.gn-uc) each wrote these five lines (§427). Doubled classes, as the sheets had them, so the full-bleed margins still beat the constrained layout's. A third band joins the list; its padding and inner width stay in its sheet. */ :is(.gn-sec.gn-sec, .gn-uc.gn-uc) { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; background: radial-gradient(120% 90% at 50% 0%, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--ink) 100%); } /* ==== Demo band: a centred heading and paragraph over a video, edge to edge ==== Speed to Market's Watch the demo (§338), promoted when Product took it. .gn-demo is the name for new pages; .gn-stm-demo stays as an alias so Speed to Market's content is untouched. Default: white falling to the Steel Blue tint. .gn-demo--tint: the Steel Blue tint across the whole band (Ed, Product). */ :is(.gn-stm-demo, .gn-demo).gn-painted { padding-block: var(--gn-section-space); width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-inline: 20px; background: linear-gradient(180deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 40%, rgb(from var(--genasys-steel-blue) r g b / 0.15) 100%); } .gn-demo.gn-demo--tint.gn-painted { background: rgb(from var(--genasys-steel-blue) r g b / 0.15); } :is(.gn-demo-head, .gn-stm-head) { max-width: 760px; margin-inline: auto !important; text-align: center; } .gn-demo-head h2 { margin-bottom: 14px !important; font-size: var(--gn-section-heading); line-height: 1.1; } .gn-stm-head h2 { margin-bottom: 14px !important; } @media (max-width: 1024px) { :is(.gn-stm-demo, .gn-demo) .wp-block-video { max-width: 600px; margin-inline: auto; } } /* ==== .gn-feat zig-zag once stacked (core stacks columns below 782px) ==== Each section centres and its picture follows its words; the bullets stay left-aligned in a centred block, because centred ticks do not scan. Speed to Market first (Ed, 24 September 2026), shared so Claims matches. */ @media (max-width: 781px) { .wp-block-columns:has(> .gn-feat) > .wp-block-column:not(.gn-feat) { order: 2; } .gn-feat { text-align: center; } .gn-feat::before { margin-inline: auto; } .gn-feat::after { left: 50%; translate: -50% 0; } .gn-feat .wp-block-list { width: fit-content; margin-inline: auto; text-align: left; } .gn-feat .wp-block-buttons { justify-content: center; } } /* §425: on a tablet the stacked strip is one 600px column and each list fills it, so every list starts at the same edge and lines stay readable (fit-content let each list find its own indent) */ @media (min-width: 601px) and (max-width: 781px) { .gn-feat > :not(.wp-block-buttons) { max-width: 600px; margin-inline: auto; } .gn-feat .wp-block-list { width: 100%; } } /* ==== Product Pillars Carousel: h3 titles, tick lists, animated icons, card link ==== Built for Connectivity's Technology ecosystem (Ed's Claude Design, 24 September 2026) and promoted when Careers and Product took the carousel too. */ .gn-carousel .gn-carousel-title { font-size: 30px; line-height: 1.2; margin: 0; } .gn-carousel .gn-carousel-subtitle, .gn-carousel .gn-carousel-desc { margin-top: 0; } .gn-carousel .gn-carousel-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; } .gn-carousel .gn-carousel-ticks li { display: flex; gap: 10px; margin: 0; padding: 0; font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--ink); } .gn-carousel .gn-carousel-ticks li::before { content: none; } .gn-carousel .gn-carousel-ticks svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; } /* Icons animate on the centre card only, and not at all under reduced motion. */ .gn-carousel-card[data-pos="center"] .gn-code-l { animation: gn-conn-code-l 2s ease-in-out infinite; } .gn-carousel-card[data-pos="center"] .gn-code-r { animation: gn-conn-code-r 2s ease-in-out infinite; } .gn-carousel-card[data-pos="center"] .gn-code-slash { animation: gn-conn-code-slash 2s ease-in-out infinite; } .gn-carousel-card[data-pos="center"] .gn-pulse-line { animation: gn-conn-pulse 2.4s ease-in-out infinite; } .gn-carousel-card[data-pos="center"] .gn-flow-line { animation: gn-conn-flow 1.2s linear infinite; } .gn-carousel-card[data-pos="center"] .gn-flow-node { animation: gn-conn-node 1.2s ease-in-out infinite; } @keyframes gn-conn-code-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2px); } } @keyframes gn-conn-code-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } } @keyframes gn-conn-code-slash { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes gn-conn-pulse { 0% { stroke-dashoffset: 1; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } } @keyframes gn-conn-flow { to { stroke-dashoffset: -8; } } @keyframes gn-conn-node { 0%, 70%, 100% { opacity: 1; } 80% { opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { :is(.gn-code-l, .gn-code-r, .gn-code-slash, .gn-pulse-line, .gn-flow-line, .gn-flow-node) { animation: none !important; } } /* A text link at the foot of a card (Product): the site's text-link archetype in the card's colour, hover to ink. */ .gn-carousel .gn-carousel-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; position: relative; z-index: 1; font-size: 17px; font-weight: 700; text-decoration: none; color: var(--hue, var(--wp--preset--color--primary)); } .gn-carousel .gn-carousel-link:hover { color: var(--wp--preset--color--ink); } /* ==== Step journey (.gn-journey): pattern "Step journey" (Claims Management, 8 October 2026) ==== §364 in STYLE-NOTES.md (repo root) */ .gn-journey { padding-block: var(--gn-section-space); background: rgb(from var(--genasys-steel-blue) r g b / 0.15); /* the site's soft blue, as .gn-tint */ } .gn-journey-inner.gn-journey-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; max-width: var(--wp--style--global--content-size); margin-inline: auto !important; } .gn-journey-inner > * { max-width: none !important; margin: 0 !important; } .gn-journey-head { position: sticky; top: calc(var(--gn-header-height) + 37px); } .gn-journey-head h2 { margin: 0 0 16px; font-size: var(--gn-section-heading); line-height: 1.1; color: var(--wp--preset--color--primary); text-wrap: balance; } .gn-journey-head p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; } .gn-journey-list { counter-reset: gn-jstep; } .gn-journey-list > * { margin: 0 !important; } .gn-jstep { counter-increment: gn-jstep; position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; padding-bottom: 30px; } /* Nine palette colours, one per step (Ed); the two teals and the two steels are kept apart. */ .gn-jstep:nth-child(9n+1) { --hue: var(--wp--preset--color--primary); --hue-on: var(--wp--preset--color--white); } .gn-jstep:nth-child(9n+2) { --hue: var(--wp--preset--color--accent); --hue-on: var(--wp--preset--color--ink); } .gn-jstep:nth-child(9n+3) { --hue: var(--wp--preset--color--cta-hover); --hue-on: var(--wp--preset--color--ink); } .gn-jstep:nth-child(9n+4) { --hue: var(--wp--preset--color--cta); --hue-on: var(--wp--preset--color--white); } .gn-jstep:nth-child(9n+5) { --hue: var(--wp--preset--color--purple); --hue-on: var(--wp--preset--color--white); } .gn-jstep:nth-child(9n+6) { --hue: var(--wp--preset--color--ink); --hue-on: var(--wp--preset--color--white); } .gn-jstep:nth-child(9n+7) { --hue: var(--wp--preset--color--steel); --hue-on: var(--wp--preset--color--white); } .gn-jstep:nth-child(9n+8) { --hue: var(--wp--preset--color--accent-light); --hue-on: var(--wp--preset--color--ink); } .gn-jstep:nth-child(9n) { --hue: var(--wp--preset--color--pale-steel); --hue-on: var(--wp--preset--color--ink); } .gn-jstep::before { content: counter(gn-jstep); grid-row: 1 / span 2; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--hue); color: var(--hue-on); font-family: var(--font-display); font-weight: 700; font-size: 19px; box-shadow: 0 0 0 6px rgb(from var(--hue) r g b / 0.15); } .gn-jstep:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 54px; bottom: 4px; width: 2px; background: var(--hue); transform-origin: top; } .gn-jstep > :is(h3, p, ul) { grid-column: 2; } .gn-jstep h3 { margin-block: 10px 4px !important; font-size: 20px; line-height: 1.3; color: var(--wp--preset--color--primary); } .gn-jstep p { margin: 0 !important; font-size: 16px; line-height: 1.6; color: var(--text-muted); } /* A longer step: paragraphs spaced, then a small label and its list as pills in the step's colour (§395). */ .gn-jstep p + p { margin-top: 10px !important; } .gn-jstep p.gn-jstep-label { margin-top: 18px !important; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--ink); } .gn-jstep > ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 !important; padding: 0; list-style: none; } .gn-jstep > ul li { display: inline-flex; align-items: center; margin: 0 !important; padding: 6px 12px !important; border-radius: 99px; background: rgb(from var(--hue) r g b / 0.14); box-shadow: inset 0 0 0 1px rgb(from var(--hue) r g b / 0.3); font-size: 14px; line-height: 1.3; color: var(--wp--preset--color--ink); } .gn-journey-list .gn-jstep:has(> ul) { padding-bottom: 44px; } /* Reveal once as each step scrolls in (the site's reveal script adds .gn-in; STYLE-NOTES §377): the step fades and slides into place, its circle fills from an outline and the line below it draws down. Without the script, or under reduced motion, the finished journey shows. */ @media (prefers-reduced-motion: no-preference) { html.gn-js .gn-jstep { transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); } html.gn-js .gn-jstep:not(.gn-in) { opacity: 0.35; translate: 12px 0; } html.gn-js .gn-jstep::before { transition: background-color 0.6s ease 0.25s, color 0.6s ease 0.25s, box-shadow 0.6s ease 0.25s; } html.gn-js .gn-jstep:not(.gn-in)::before { background: var(--wp--preset--color--white); color: var(--hue); box-shadow: 0 0 0 2px var(--hue); } html.gn-js .gn-jstep:not(:last-child)::after { transition: transform 0.9s ease 0.35s; } html.gn-js .gn-jstep:not(.gn-in):not(:last-child)::after { transform: scaleY(0); } } @media (max-width: 860px) { .gn-journey-inner.gn-journey-inner { grid-template-columns: 1fr; gap: 32px; } .gn-journey-head { position: static; text-align: center; } .gn-journey-head p { font-size: 17px; } } /* ==== Connected record (.gn-record): pattern "Connected record" (Claims Management, 8 October 2026) ==== §365 in STYLE-NOTES.md (repo root) */ /* No padding of its own: the site already spaces sections (Ed: the gap above it was doubled). */ .gn-record-head.gn-record-head, .gn-record-foot.gn-record-foot { max-width: 760px; margin-inline: auto !important; text-align: center; } .gn-record-head h2 { margin: 0 0 20px; font-size: var(--gn-section-heading); line-height: 1.1; color: var(--wp--preset--color--primary); text-wrap: balance; } .gn-record-head p, .gn-record-foot > p { font-size: 18px; line-height: 1.65; color: var(--text-muted); text-wrap: pretty; } /* The map: the claim in the centre, four linked records round it. */ .gn-record-map.gn-record-map { --gn-link-gap: 64px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 32px var(--gn-link-gap); align-items: center; max-width: 1060px; margin: 56px auto !important; } .gn-record-map > * { margin: 0 !important; max-width: none !important; } .gn-node--customer { grid-column: 1; grid-row: 1; --hue: var(--wp--preset--color--accent); --hue-on: var(--wp--preset--color--ink); } .gn-node--policy { grid-column: 1; grid-row: 2; --hue: var(--wp--preset--color--purple); --hue-on: var(--wp--preset--color--white); } .gn-node--claim { grid-column: 2; grid-row: 1 / span 2; --hue: var(--wp--preset--color--primary); --hue-on: var(--wp--preset--color--white); } .gn-node--financials { grid-column: 3; grid-row: 1; --hue: var(--wp--preset--color--cta); --hue-on: var(--wp--preset--color--white); } .gn-node--documents { grid-column: 3; grid-row: 2; --hue: var(--wp--preset--color--cta-hover); --hue-on: var(--wp--preset--color--ink); } /* A record card: a coloured title bar like the product's screens, then its fields. */ .gn-node { position: relative; border-radius: var(--card-radius); background: var(--wp--preset--color--white); box-shadow: var(--card-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; } .gn-node > * { margin: 0 !important; } .gn-node-title { padding: 12px 18px; border-radius: var(--card-radius) var(--card-radius) 0 0; background: var(--hue); color: var(--hue-on); font-family: var(--font-display); font-weight: 700; font-size: 16px; } .gn-record .gn-node .gn-node-fields.gn-node-fields { list-style: none; margin: 0; padding: 14px 18px 16px; display: grid; gap: 10px; } .gn-record .gn-node .gn-node-fields.gn-node-fields > li { display: grid; grid-template-columns: auto minmax(24px, 1fr); align-items: center; gap: 14px; margin: 0; padding: 0; font-size: 14px; line-height: 1.3; color: var(--wp--preset--color--ink); } /* A placeholder value beside each field: shape only, no invented data. */ .gn-node-fields > li::after { content: ""; justify-self: end; width: 100%; max-width: 110px; height: 8px; border-radius: 4px; background: rgb(from var(--hue) r g b / 0.22); } .gn-node-fields > li:nth-child(2n)::after { max-width: 72px; } .gn-node-fields > li:nth-child(3n)::after { max-width: 92px; } /* The claim: its stages light up in turn, as a claim moves. */ .gn-node--claim { box-shadow: 0 16px 40px var(--shadow-mid), 0 0 0 3px var(--gn-record-hl, transparent); } .gn-node--claim .gn-node-title { padding: 16px 22px; font-size: 18px; } .gn-record .gn-node--claim .gn-node-fields.gn-node-fields { padding: 20px 22px 22px; gap: 0; counter-reset: gn-stage; } .gn-record .gn-node--claim .gn-node-fields.gn-node-fields > li { counter-increment: gn-stage; position: relative; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 9px 0; font-size: 16px; font-weight: 700; } .gn-node--claim .gn-node-fields > li::after { display: none; } .gn-node--claim .gn-node-fields > li::before { content: counter(gn-stage); z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--white); box-shadow: inset 0 0 0 2px var(--hue); color: var(--hue); font-size: 13px; } .gn-node--claim .gn-node-fields > li:not(:last-child) { background: linear-gradient(var(--hue), var(--hue)) 14px 39px / 2px calc(100% - 30px) no-repeat; } /* Connectors: from each outer record into the claim, with data flowing inwards. */ .gn-node:not(.gn-node--claim)::before { content: ""; position: absolute; top: 50%; width: var(--gn-link-gap); height: 2px; background: repeating-linear-gradient(90deg, var(--hue) 0 8px, transparent 8px 14px); background-size: 14px 2px; opacity: 0.7; transition: opacity 0.3s ease, height 0.3s ease; } :is(.gn-node--customer, .gn-node--policy)::before { left: 100%; } :is(.gn-node--financials, .gn-node--documents)::before { right: 100%; } /* Hover a record: it lifts, its connector goes solid and the claim takes its colour. */ .gn-node:not(.gn-node--claim):hover { transform: translateY(-4px); box-shadow: 0 14px 32px var(--shadow-mid); } .gn-node:not(.gn-node--claim):hover::before { opacity: 1; height: 3px; background: var(--hue); } .gn-record-map:has(.gn-node--customer:hover) { --gn-record-hl: var(--wp--preset--color--accent); } .gn-record-map:has(.gn-node--policy:hover) { --gn-record-hl: var(--wp--preset--color--purple); } .gn-record-map:has(.gn-node--financials:hover) { --gn-record-hl: var(--wp--preset--color--cta); } .gn-record-map:has(.gn-node--documents:hover) { --gn-record-hl: var(--wp--preset--color--cta-hover); } .gn-node--claim { transition: box-shadow 0.3s ease; } @media (prefers-reduced-motion: no-preference) { :is(.gn-node--customer, .gn-node--policy)::before { animation: gn-flow-right 0.9s linear infinite; } :is(.gn-node--financials, .gn-node--documents)::before { animation: gn-flow-left 0.9s linear infinite; } .gn-node--claim .gn-node-fields > li::before { animation: gn-stage-lit 7.5s ease-in-out infinite; } .gn-node--claim .gn-node-fields > li:nth-child(2)::before { animation-delay: 1.5s; } .gn-node--claim .gn-node-fields > li:nth-child(3)::before { animation-delay: 3s; } .gn-node--claim .gn-node-fields > li:nth-child(4)::before { animation-delay: 4.5s; } .gn-node--claim .gn-node-fields > li:nth-child(5)::before { animation-delay: 6s; } } @keyframes gn-flow-right { to { background-position: 14px 0; } } @keyframes gn-flow-left { to { background-position: -14px 0; } } @keyframes gn-stage-lit { 0%, 24%, 100% { background: var(--wp--preset--color--white); color: var(--hue); } 4%, 20% { background: var(--hue); color: var(--hue-on); } } /* Tablet and phone: the claim on top, the four records two by two beneath, no connectors. */ @media (max-width: 900px) { .gn-record-map.gn-record-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .gn-node--claim { grid-column: 1 / -1; grid-row: 1; } .gn-node--customer { grid-column: 1; grid-row: 2; } .gn-node--policy { grid-column: 2; grid-row: 2; } .gn-node--financials { grid-column: 1; grid-row: 3; } .gn-node--documents { grid-column: 2; grid-row: 3; } .gn-node:not(.gn-node--claim)::before { display: none; } } @media (max-width: 560px) { .gn-record-map.gn-record-map { grid-template-columns: 1fr; } .gn-node--claim, .gn-node--customer, .gn-node--policy, .gn-node--financials, .gn-node--documents { grid-column: 1; grid-row: auto; } } /* ==== Claims Management additions to shared components (8 October 2026) ==== §367 in STYLE-NOTES.md (repo root) */ .gn-feat--control { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 3v6c0 4.2-3 7.6-7 9-4-1.4-7-4.8-7-9V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); } .gn-feat--customer { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E"); } .gn-feat--reporting { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); } .gn-feat--settlement { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Cpath d='M2.5 10h19M6.5 15h4'/%3E%3C/svg%3E"); } .gn-feat--recovery { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12a9 9 0 0 1 15.5-6.2L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15.5 6.2L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E"); } /* ==== Zig-zag text width: one setting for every zig-zag on the site ==== §382 in STYLE-NOTES.md (repo root). Read by .gn-feat, the one zig-zag build (§405); the picture takes the rest of the row. */ body { --gn-zz-row: min(var(--wp--style--global--content-size, 1100px), 100vw - 96px); --gn-zz-text: calc(0.45 * var(--gn-zz-row)); --gn-zz-gap: clamp(48px, 6vw, 96px); } @media (min-width: 782px) { .wp-block-columns:has(> .gn-feat) { max-width: var(--gn-zz-row); margin-inline: auto; column-gap: var(--gn-zz-gap); } .wp-block-columns:has(> .gn-feat) > .gn-feat { flex: 0 0 var(--gn-zz-text) !important; } .wp-block-columns:has(> .gn-feat) > .wp-block-column:not(.gn-feat) { flex: 1 1 0 !important; min-width: 0; } } .gn-split--plain .gn-split-head h2::after { display: none; } @media (min-width: 1025px) { .gn-icards--3 { --gn-icard-cols: 3; } .gn-icards--2 { --gn-icard-cols: 2; max-width: 860px; } } /* The highlighted words in the logos and awards headings, as classes instead of inline colour. */ .gn-logos-heading span { color: var(--wp--preset--color--accent); } .gn-awards-heading span { color: var(--wp--preset--color--cta-hover); } /* A heading at the top of the quote band, where other bands carry no heading. */ .gn-case-heading { margin: 0 0 20px; font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--white); } /* Icon card icons for the connected services on Claims Management (§367). */ .gn-icard--i-shield { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v6c0%204.2-3%207.6-7%209-4-1.4-7-4.8-7-9V6l7-3z%22%2F%3E%3Cpath%20d%3D%22M12%208v4M12%2015.5v.5%22%2F%3E%3C%2Fsvg%3E"); } .gn-icard--i-doc { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpath%20d%3D%22M14%203v5h5M9%2013h6M9%2017h6%22%2F%3E%3C%2Fsvg%3E"); } .gn-icard--i-recover { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%200%201%2015.5-6.2L21%208%22%2F%3E%3Cpath%20d%3D%22M21%203v5h-5%22%2F%3E%3Cpath%20d%3D%22M21%2012a9%209%200%200%201-15.5%206.2L3%2016%22%2F%3E%3Cpath%20d%3D%22M3%2021v-5h5%22%2F%3E%3C%2Fsvg%3E"); } .gn-icard--i-pay { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%225.5%22%20width%3D%2219%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M2.5%2010h19M6.5%2015h4%22%2F%3E%3C%2Fsvg%3E"); } .gn-icard--i-data { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%225.5%22%20rx%3D%228%22%20ry%3D%223%22%2F%3E%3Cpath%20d%3D%22M4%205.5v13c0%201.7%203.6%203%208%203s8-1.3%208-3v-13%22%2F%3E%3Cpath%20d%3D%22M4%2012c0%201.7%203.6%203%208%203s8-1.3%208-3%22%2F%3E%3C%2Fsvg%3E"); } .gn-icard--i-plug { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%202v6M15%202v6%22%2F%3E%3Cpath%20d%3D%22M6%208h12v3a6%206%200%200%201-12%200z%22%2F%3E%3Cpath%20d%3D%22M12%2017v5%22%2F%3E%3C%2Fsvg%3E"); } /* Three cards at two columns leave one alone: let it span the row. */ @media (min-width: 601px) and (max-width: 1024px) { .gn-icards--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } } /* ==== Soft blue bands, for any full-width group (8 October 2026) ==== §368 in STYLE-NOTES.md (repo root) */ .gn-tint, .gn-tint-rise { padding-block: var(--gn-section-space); } .gn-tint { background: rgb(from var(--genasys-steel-blue) r g b / 0.15); } .gn-tint-rise { background: linear-gradient(180deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 50%, rgb(from var(--genasys-steel-blue) r g b / 0.15) 100%); } /* the logo band's fade (Ed) */ /* A tinted band running straight into another band: no white strip between them (Ed). */ :is(.gn-tint, .gn-journey, .gn-band--page, .gn-quote-band) + :is(.gn-quote-band, .gn-awards, .gn-tint, .gn-tint-rise, .gn-journey, .gn-band--page, .gn-faq-schema) { margin-top: 0 !important; } /* ==== Quote band without a picture: centred and compact (8 October 2026) ==== §369 in STYLE-NOTES.md (repo root) */ .gn-quote-band.gn-case--text { padding-block: clamp(56px, 6vw, 88px); } .gn-case--text .gn-case-grid { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; text-align: center; } .gn-case--text .gn-case-quote { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.25; } .gn-case--text .gn-case-rule { width: 120px; margin: 24px auto; } .gn-case--text .gn-case-context { margin-inline: auto; } /* Icon cards close with the shared text link, in the card's colour. */ .gn-icard { --gn-textlink-colour: var(--hue); } .gn-icard > .gn-textlink { margin-top: 14px !important; } /* ==== Carousel card with a customer logo in place of the icon (Claims Management case studies, 8 October 2026) ==== §370 in STYLE-NOTES.md (repo root) */ .gn-carousel-logo { height: 40px; margin-bottom: 18px; display: flex; align-items: center; } .gn-carousel-logo img { display: block; width: auto; height: 34px; max-width: 180px; object-fit: contain; filter: grayscale(100%) opacity(0.6); transition: filter 0.4s ease; } /* The logo comes into colour on the front card. */ .gn-carousel-card[data-pos="center"] .gn-carousel-logo img { filter: none; } @media (prefers-reduced-motion: reduce) { .gn-carousel-logo img { transition: none; } } /* ==== Connected services on a claim line (.gn-cline) (Claims Management, 9 October 2026) ==== §373 and §378 in STYLE-NOTES.md (repo root). The cards are the shared icon cards; this lays them along a claim line and animates the connections. */ @property --cline-on { syntax: ""; inherits: true; initial-value: 0; } .gn-cline.gn-cline { --cline-line: 96px; --cols: 36; position: relative; display: grid; max-width: calc(1140px * var(--cols) / 36); margin: 48px auto 0 !important; } .gn-cline > * { margin: 0 !important; max-width: none !important; } .gn-cline-item { position: relative; display: flex; padding-inline: 10px; } .gn-cline-item > .gn-icard { width: 100%; transform: translateY(calc(var(--cline-on) * -4px)); box-shadow: var(--card-shadow), 0 0 0 calc(var(--cline-on) * 3px) var(--hue); } /* Each card carries its own stage and result, as paragraphs in the page (§378). */ .gn-cline .gn-cline-stage { margin: 0 0 6px !important; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--text-muted); } /* Desktop: cards alternate above and below the line, each a sixth further along. */ @media (min-width: 1025px) { .gn-cline.gn-cline { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: auto var(--cline-line) auto; } /* Four to eight cards: the grid is as wide as the cards need. Six is the default. */ .gn-cline:has(> :nth-child(4):last-child) { --cols: 26; } .gn-cline:has(> :nth-child(5):last-child) { --cols: 30; } .gn-cline:has(> :nth-child(7):last-child) { --cols: 40; } .gn-cline:has(> :nth-child(8):last-child) { --cols: 46; } .gn-cline-item { grid-column: var(--col) / span 10; } .gn-cline-item:nth-child(1) { --col: 1; } .gn-cline-item:nth-child(2) { --col: 7; } .gn-cline-item:nth-child(3) { --col: 11; } .gn-cline-item:nth-child(4) { --col: 17; } .gn-cline-item:nth-child(5) { --col: 21; } .gn-cline-item:nth-child(6) { --col: 27; } .gn-cline-item:nth-child(7) { --col: 31; } .gn-cline-item:nth-child(8) { --col: 37; } .gn-cline-item:nth-child(odd) { grid-row: 1; align-items: flex-end; } .gn-cline-item:nth-child(even) { grid-row: 3; align-items: flex-start; } /* The line and the claim marker. */ .gn-cline::before { content: ""; grid-row: 2; grid-column: 1 / -1; align-self: center; height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--wp--preset--color--purple), var(--wp--preset--color--accent), var(--wp--preset--color--cta), var(--wp--preset--color--cta-hover), var(--wp--preset--color--accent), var(--wp--preset--color--primary)); opacity: 0.35; } .gn-cline::after { content: ""; grid-row: 2; grid-column: 1 / -1; justify-self: start; align-self: center; position: relative; left: 100%; z-index: 2; width: 18px; height: 18px; translate: -50% 0; border-radius: 50%; background: var(--wp--preset--color--primary); box-shadow: 0 0 0 5px var(--wp--preset--color--white), 0 0 0 9px rgb(from var(--wp--preset--color--primary) r g b / 0.25), 0 0 22px 6px rgb(from var(--wp--preset--color--accent) r g b / 0.45); } /* The connector from each card to the line. */ .gn-cline-item::before { content: ""; position: absolute; left: 50%; width: 3px; height: calc(var(--cline-line) / 2 - 7px); translate: -50% 0; background: repeating-linear-gradient(180deg, var(--hue) 0 6px, transparent 6px 11px); opacity: calc(0.45 + var(--cline-on) * 0.55); } .gn-cline-item:nth-child(odd)::before { top: 100%; } .gn-cline-item:nth-child(even)::before { bottom: 100%; } /* The stage sits on the far side of the line from its card, with the connection point above or below it. */ .gn-cline .gn-cline-stage { position: absolute; left: 50%; margin: 0 !important; translate: -50% calc(var(--cline-on) * 4px); } .gn-cline-stage::before { content: ""; position: absolute; left: 50%; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%; background: var(--wp--preset--color--white); box-shadow: inset 0 0 0 3px var(--hue); } .gn-cline-item:nth-child(odd) .gn-cline-stage { top: calc(100% + var(--cline-line) / 2 + 16px); } .gn-cline-item:nth-child(odd) .gn-cline-stage::before { top: -23px; } .gn-cline-item:nth-child(even) .gn-cline-stage { bottom: calc(100% + var(--cline-line) / 2 + 16px); } .gn-cline-item:nth-child(even) .gn-cline-stage::before { bottom: -23px; } /* The result the service returns, shown while its card is lit. */ .gn-cline .gn-cline-result { position: absolute; right: 12px; top: 18px; z-index: 2; margin: 0 !important; padding: 5px 11px; border-radius: 99px; background: var(--hue); color: var(--hue-on); font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; opacity: var(--cline-on); scale: calc(0.85 + var(--cline-on) * 0.15); pointer-events: none; } /* The open socket at the end of the line: the next service to plug in. */ .gn-cline-item:last-child::after { content: "+"; position: absolute; right: 0; width: 30px; height: 30px; display: grid; place-items: center; border: 2px dashed var(--wp--preset--color--steel); border-radius: 50%; background: var(--wp--preset--color--white); color: var(--wp--preset--color--steel); font-weight: 700; font-size: 18px; line-height: 1; } .gn-cline-item:nth-child(odd):last-child::after { top: calc(100% + var(--cline-line) / 2); translate: 50% -50%; } .gn-cline-item:nth-child(even):last-child::after { bottom: calc(100% + var(--cline-line) / 2); translate: 50% 50%; } } /* One loop for every card: the marker crosses in the first 85%, and each card's turn is delayed by where its point sits on the line (§378). */ @media (min-width: 1025px) and (prefers-reduced-motion: no-preference) { .gn-cline::after { animation: gn-cline-marker 14s linear infinite; } .gn-cline-item { animation: gn-cline-on 14s linear infinite; animation-delay: calc(((var(--col) + 4) / var(--cols) * 0.85 - 0.01) * 14s); } /* Hover pauses the loop and lights the card under the pointer. */ .gn-cline:hover::after, .gn-cline:hover .gn-cline-item { animation-play-state: paused; } .gn-cline .gn-cline-item:hover { --cline-on: 1 !important; } } @keyframes gn-cline-marker { 0% { left: 0%; opacity: 0; } 3% { opacity: 1; } 85% { left: 100%; opacity: 1; } 92%, 100% { left: 100%; opacity: 0; } } @keyframes gn-cline-on { 0%, 16%, 100% { --cline-on: 0; } 2%, 12% { --cline-on: 1; } } /* Tablet and phone: the line runs down the left and the cards branch off it, in claim order. */ @media (max-width: 1024px) { .gn-cline.gn-cline { grid-template-columns: minmax(0, 1fr); gap: 22px; } .gn-cline::before { content: ""; position: absolute; left: 20px; top: 30px; bottom: 30px; width: 4px; border-radius: 99px; background: linear-gradient(180deg, var(--wp--preset--color--purple), var(--wp--preset--color--accent), var(--wp--preset--color--cta), var(--wp--preset--color--cta-hover), var(--wp--preset--color--accent), var(--wp--preset--color--primary)); opacity: 0.35; } .gn-cline-item { padding: 0 0 0 56px; } .gn-cline-item::before { content: ""; position: absolute; top: 44px; left: 22px; width: 34px; height: 3px; background: var(--hue); opacity: calc(0.45 + var(--cline-on) * 0.55); } .gn-cline-item::after { content: ""; position: absolute; left: 13px; top: 37px; z-index: 2; width: 17px; height: 17px; border-radius: 50%; background: var(--wp--preset--color--white); box-shadow: inset 0 0 0 4px var(--hue); scale: calc(1 + var(--cline-on) * 0.25); pointer-events: none; } .gn-cline .gn-cline-stage { font-family: var(--font-display); line-height: 1.2; } .gn-cline .gn-cline-result { display: none; } } /* Tablet and phone: each card lights once as it is revealed (the site's reveal script adds .gn-in; STYLE-NOTES §377). */ @media (max-width: 1024px) and (prefers-reduced-motion: no-preference) { .gn-cline-item.gn-in { animation: gn-cline-pulse 1.8s ease-in-out 0.2s both; } } @keyframes gn-cline-pulse { 0%, 100% { --cline-on: 0; } 40%, 60% { --cline-on: 1; } } @media (prefers-reduced-motion: reduce) { .gn-cline::after { display: none; } } /* ==== Definition (.gn-define): pattern "Definition" (9 October 2026) ==== §374 in STYLE-NOTES.md (repo root) */ .gn-define { padding-block: clamp(56px, 6vw, 88px); background: rgb(from var(--genasys-steel-blue) r g b / 0.15); text-align: center; } .gn-define > * { max-width: 780px !important; margin-inline: auto !important; } .gn-define h2 { margin-top: 0 !important; margin-bottom: 18px !important; font-size: var(--gn-section-heading); line-height: 1.1; color: var(--wp--preset--color--primary); text-wrap: balance; } .gn-define .gn-define-term { margin-top: 0 !important; font-size: 21px; line-height: 1.6; color: var(--wp--preset--color--ink); text-wrap: pretty; } .gn-define .gn-define-more { margin-top: 14px !important; margin-bottom: 0 !important; font-size: 17px; line-height: 1.65; color: var(--text-muted); text-wrap: pretty; } @media (max-width: 600px) { .gn-define .gn-define-term { font-size: 18px; } .gn-define .gn-define-more { font-size: 16px; } } /* Straight under a product hero, the two bands meet with no white strip between them. */ .wp-block-group:has(> .gn-product-hero) + .gn-define { margin-top: 0 !important; } /* ==== Related reading on posts: the News and Insights cards (9 October 2026) ==== §376 in STYLE-NOTES.md (repo root) */ .gn-related.gn-related { position: relative; margin-top: 72px !important; margin-bottom: 64px !important; padding-top: 56px; } .gn-related::before { content: ""; position: absolute; top: 0; left: 25%; width: 50%; height: 1px; background: var(--neutral-200); } /* §407 */ main.wp-block-group:has(> .entry-content > :last-child.gn-cta-band), main.wp-block-group:has(> .entry-content > :last-child .gn-cta-band) { padding-bottom: 0 !important; } main.wp-block-group:has(> .entry-content > :last-child .gn-cta-band) > .entry-content ~ .wp-block-template-part:not(:has(:is(p, a, img, time))) { display: none; } .gn-related .gn-ni-header { padding: 0; margin-bottom: 32px; } .gn-related .gn-ni-header h2 { font-size: var(--gn-section-heading) !important; } .gn-related .gn-ni-grid { padding: 0; margin: 0 auto; min-height: 0; } /* ==== Technology ecosystem wheel, the shared component (synced block GN Ecosystem Wheel) ==== §383 in STYLE-NOTES.md (repo root) */ .gn-eco-wheel { --gn-eco-spin: 0deg; } .gn-eco-pill { --a: 0deg; --r: 0cqw; } .gn-eco-wheel { position: relative; width: min(100%, 940px); margin-inline: auto; aspect-ratio: 1; container-type: inline-size; --gn-eco-ease: cubic-bezier(0.16, 0.84, 0.22, 1); --gn-eco-spin-time: 3.4s; } .gn-eco-rotor { position: absolute; inset: 0; rotate: var(--gn-eco-spin, 0deg); transition: rotate var(--gn-eco-spin-time) var(--gn-eco-ease); } .gn-eco-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .gn-eco-arc-label { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 30px; letter-spacing: 0.01em; fill: var(--wp--preset--color--white); } .gn-eco-arc { stroke: var(--hue); } .gn-eco-arc-label { fill: var(--hue-on); } .gn-eco-arc-label.gn-hue-accent { fill: var(--wp--preset--color--white); } .gn-eco-divider { stroke: var(--wp--preset--color--pale-steel); stroke-width: 2; stroke-dasharray: 5 9; opacity: 0.7; } .gn-eco-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))); } .gn-eco-pill-in { display: inline-flex; align-items: center; gap: 0.8cqw; padding: 0.45cqw; border-radius: 999px; background: var(--wp--preset--color--white); box-shadow: 0 4px 14px var(--shadow-mid); white-space: nowrap; font-family: var(--wp--preset--font-family--body); font-size: 1.56cqw; font-weight: 600; color: var(--text-strong); rotate: calc(-1 * (var(--a) + var(--gn-eco-spin, 0deg))); transition: rotate var(--gn-eco-spin-time) var(--gn-eco-ease), scale 0.22s ease, box-shadow 0.22s ease; } .gn-eco-pill-in:hover { scale: 1.8; box-shadow: 0 10px 26px var(--shadow-strong); z-index: 2; } .gn-eco-pill-label { display: block; } .gn-eco-pill-in img { display: block; max-width: 92px; height: auto; } .gn-eco-dot { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; flex: none; } .gn-eco-pill .gn-eco-dot { background: var(--hue); } .gn-eco-hub { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 23%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 50% 30%, var(--wp--preset--color--steel) 0%, var(--wp--preset--color--primary) 55%, var(--ink-deep) 100%); display: grid; place-items: center; transition: scale 0.22s ease, box-shadow 0.22s ease; box-shadow: 0 10px 30px var(--shadow-strong); } .gn-eco-hub:hover { scale: 1.05; } .gn-eco-hub:focus-visible { outline: 3px solid var(--wp--preset--color--cta); outline-offset: 5px; } .gn-eco-hub-ring { position: absolute; inset: -2px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--cta-hover), var(--wp--preset--color--cta), var(--wp--preset--color--purple), var(--wp--preset--color--steel), var(--wp--preset--color--accent)); mask: linear-gradient(var(--wp--preset--color--white) 0 0) content-box, linear-gradient(var(--wp--preset--color--white) 0 0); mask-composite: exclude; } .gn-eco-hub-face { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(15px, 2.1vw, 27px); letter-spacing: 0.1em; color: var(--wp--preset--color--white); } @media (max-width: 900px) { .gn-eco-arc-label { font-size: 38px; } .gn-eco-pill-in { font-size: 13px; padding: 7px 11px; gap: 6px; } } @media (max-width: 600px) { .gn-eco-arc-label { font-size: 38px; } .gn-eco-pill-in { font-size: 11px; padding: 5px 8px; } .gn-eco-dot { width: 5px; height: 5px; } } @media (prefers-reduced-motion: reduce) { .gn-eco-rotor, .gn-eco-pill-in { transition: none; } .gn-eco-hub, .gn-eco-pill-in:hover { scale: 1; } } @media (max-width: 900px) { .gn-eco-pill-in { font-size: 13px; padding: 7px 11px; gap: 6px; } .gn-eco-dot { width: 6px; height: 6px; } } .gn-eco-hub-face { display: grid; place-items: center; width: 62%; } .gn-eco-hub-face img { display: block; width: 100%; height: auto; } .gn-eco-hub:active { scale: 0.93; } .gn-eco-hub { transition: scale 0.12s ease, box-shadow 0.22s ease; } .gn-eco-hub-face { width: 58%; max-width: 58%; } .gn-eco-hub-face img { max-width: 100%; height: auto; object-fit: contain; } .gn-eco-seg { position: absolute; inset: 0; pointer-events: none; transform-origin: 50% 50%; transition: scale 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .gn-eco-seg-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .gn-eco-seg-pills { position: absolute; inset: 0; } .gn-eco-hit { fill: transparent; pointer-events: auto; cursor: pointer; } .gn-eco-seg .gn-eco-pill-in { pointer-events: auto; } .gn-eco-seg:hover { scale: 1.4; z-index: 6; } .gn-eco-hub { z-index: 10; } .gn-eco-pill:has(.gn-eco-pill-in:hover) { z-index: 5; } .gn-eco-rotor:has(.gn-eco-pill-in:hover) { z-index: 11; } .gn-eco-wheel { overflow: visible; } @media (prefers-reduced-motion: reduce) { .gn-eco-seg { transition: none; } .gn-eco-seg:hover { scale: 1; } } .gn-eco-divider { transform-box: view-box; transform-origin: 50% 50%; transition: scale 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .gn-eco-rotor:has([data-gn-eco-seg="rating"]:hover) :is(.gn-eco-divider--0, .gn-eco-divider--1), .gn-eco-rotor:has([data-gn-eco-seg="cloud"]:hover) :is(.gn-eco-divider--1, .gn-eco-divider--2), .gn-eco-rotor:has([data-gn-eco-seg="enrich"]:hover) :is(.gn-eco-divider--2, .gn-eco-divider--3), .gn-eco-rotor:has([data-gn-eco-seg="crm"]:hover) :is(.gn-eco-divider--3, .gn-eco-divider--4), .gn-eco-rotor:has([data-gn-eco-seg="finance"]:hover) :is(.gn-eco-divider--4, .gn-eco-divider--5), .gn-eco-rotor:has([data-gn-eco-seg="comms"]:hover) :is(.gn-eco-divider--5, .gn-eco-divider--6), .gn-eco-rotor:has([data-gn-eco-seg="data"]:hover) :is(.gn-eco-divider--6, .gn-eco-divider--0) { scale: 1.4; } @media (prefers-reduced-motion: reduce) { .gn-eco-divider { transition: none; } } .gn-eco-pill-logo { display: block; width: 3.5em !important; height: 3.5em !important; max-width: none !important; object-fit: contain; } @container (max-width: 479px) { .gn-eco-seg-pills { display: none; } } /* ==== Wheel band: words beside the ecosystem wheel on a band ==== §384 in STYLE-NOTES.md (repo root) */ .gn-wheel-band > .wp-block-columns { align-items: center; column-gap: var(--gn-zz-gap); } .gn-wheel-band .gn-eco-wheel { max-width: 560px; } .gn-wheel-band h2 { font-size: var(--gn-section-heading); } @media (max-width: 1200px) { .gn-wheel-band > .wp-block-columns { flex-wrap: wrap !important; row-gap: 48px; } .gn-wheel-band > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; } } @media (min-width: 1201px) { .gn-wheel-band > .wp-block-columns { max-width: var(--gn-zz-row); margin-inline: auto; } .gn-wheel-band > .wp-block-columns > .wp-block-column:first-child { flex: 0 0 var(--gn-zz-text) !important; } .gn-wheel-band > .wp-block-columns > .wp-block-column:last-child { flex: 1 1 0 !important; min-width: 0; } } /* ==== Feature strip icons: Billing & Finance and MGA Software ==== §385 in STYLE-NOTES.md (repo root) */ .gn-feat--invoice { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M10 12h5M10 16h5M10 8h2'/%3E%3C/svg%3E"); } .gn-feat--collect { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Cpath d='M9 15l2 2 4-4'/%3E%3C/svg%3E"); } .gn-feat--commission { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3Cpath d='M19 5L5 19'/%3E%3C/svg%3E"); } .gn-feat--bordereaux { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17M3.5 14.5h17M9.5 4.5v15'/%3E%3C/svg%3E"); } .gn-feat--lifecycle { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 0 1-14.3 4.9'/%3E%3Cpath d='M4 12a8 8 0 0 1 14.3-4.9'/%3E%3Cpath d='M18.5 3v4.1h-4.1'/%3E%3Cpath d='M5.5 21v-4.1h4.1'/%3E%3C/svg%3E"); } .gn-feat--globe { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17'/%3E%3Cpath d='M12 3.5c2.3 2.4 3.5 5.2 3.5 8.5s-1.2 6.1-3.5 8.5c-2.3-2.4-3.5-5.2-3.5-8.5s1.2-6.1 3.5-8.5z'/%3E%3C/svg%3E"); } .gn-feat--builder { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Cpath d='M16.75 14v5.5M14 16.75h5.5'/%3E%3C/svg%3E"); } .gn-feat--documents { --gn-feat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h6l4 4v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9.5 17l1.5 1.5 3-3'/%3E%3C/svg%3E"); } /* ---- A section intro on a navy band turns white, its accent words yellow (§389) ---- */ .gn-band-navy .gn-carousel-section-heading.gn-carousel-section-heading { color: var(--wp--preset--color--white); } .gn-band-navy .gn-carousel-section-heading span { color: var(--wp--preset--color--cta-hover) !important; } .gn-band-navy .gn-carousel-section-body { color: var(--wp--preset--color--white); opacity: 0.9; } /* ---- Premium split (.gn-psplit): one premium, divided between every party (§388) ---- Each slice's share is --s on the slice, a number in pounds; the key below the bar is the same parties in the same order, in words. .is-own marks the reader's share. */ .gn-psplit { display: flex; flex-direction: column; gap: 14px; } .gn-psplit-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 !important; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-500); } .gn-psplit-total b { font-size: 26px; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--ink); } .gn-psplit-bar { display: flex; flex-direction: column; gap: 3px; height: 220px; border-radius: 10px; overflow: hidden; clip-path: inset(0 0 0 0 round 10px); } .gn-psplit-bar i { --s: 1; flex: var(--s) 1 0; min-height: 5px; background: var(--hue); opacity: 0.35; transition: opacity 0.25s ease; } .gn-psplit-bar i.is-own { opacity: 1; } .gn-psplit-key { display: grid; gap: 6px; margin: 0 !important; padding: 0; list-style: none; } .gn-psplit-key li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; font-size: 15px; color: var(--neutral-500); transition: background 0.25s ease; } .gn-psplit-key li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--hue); opacity: 0.35; } .gn-psplit-key li b { color: var(--wp--preset--color--ink); } .gn-psplit-key li.is-own { color: var(--wp--preset--color--ink); font-weight: 700; } .gn-psplit-key li.is-own::before { opacity: 1; } /* A slice and its line in the key light together, whichever is hovered. */ .gn-psplit:has(.gn-psplit-key li:nth-child(1):hover, .gn-psplit-bar i:nth-child(1):hover) .gn-psplit-bar i:nth-child(1), .gn-psplit:has(.gn-psplit-key li:nth-child(1):hover, .gn-psplit-bar i:nth-child(1):hover) .gn-psplit-key li:nth-child(1)::before, .gn-psplit:has(.gn-psplit-key li:nth-child(2):hover, .gn-psplit-bar i:nth-child(2):hover) .gn-psplit-bar i:nth-child(2), .gn-psplit:has(.gn-psplit-key li:nth-child(2):hover, .gn-psplit-bar i:nth-child(2):hover) .gn-psplit-key li:nth-child(2)::before, .gn-psplit:has(.gn-psplit-key li:nth-child(3):hover, .gn-psplit-bar i:nth-child(3):hover) .gn-psplit-bar i:nth-child(3), .gn-psplit:has(.gn-psplit-key li:nth-child(3):hover, .gn-psplit-bar i:nth-child(3):hover) .gn-psplit-key li:nth-child(3)::before, .gn-psplit:has(.gn-psplit-key li:nth-child(4):hover, .gn-psplit-bar i:nth-child(4):hover) .gn-psplit-bar i:nth-child(4), .gn-psplit:has(.gn-psplit-key li:nth-child(4):hover, .gn-psplit-bar i:nth-child(4):hover) .gn-psplit-key li:nth-child(4)::before, .gn-psplit:has(.gn-psplit-key li:nth-child(5):hover, .gn-psplit-bar i:nth-child(5):hover) .gn-psplit-bar i:nth-child(5), .gn-psplit:has(.gn-psplit-key li:nth-child(5):hover, .gn-psplit-bar i:nth-child(5):hover) .gn-psplit-key li:nth-child(5)::before { opacity: 1; } .gn-psplit:has(.gn-psplit-key li:nth-child(1):hover, .gn-psplit-bar i:nth-child(1):hover) .gn-psplit-key li:nth-child(1), .gn-psplit:has(.gn-psplit-key li:nth-child(2):hover, .gn-psplit-bar i:nth-child(2):hover) .gn-psplit-key li:nth-child(2), .gn-psplit:has(.gn-psplit-key li:nth-child(3):hover, .gn-psplit-bar i:nth-child(3):hover) .gn-psplit-key li:nth-child(3), .gn-psplit:has(.gn-psplit-key li:nth-child(4):hover, .gn-psplit-bar i:nth-child(4):hover) .gn-psplit-key li:nth-child(4), .gn-psplit:has(.gn-psplit-key li:nth-child(5):hover, .gn-psplit-bar i:nth-child(5):hover) .gn-psplit-key li:nth-child(5) { background: var(--neutral-50); } /* The bar fills from the bottom when revealed, then opens into its slices (the reveal script adds .gn-in). */ html.gn-js .gn-psplit:not(.gn-in) .gn-psplit-bar { clip-path: inset(100% 0 0 0 round 10px); gap: 0; } @media (prefers-reduced-motion: no-preference) { .gn-psplit-bar { transition: clip-path 1s cubic-bezier(0.22, 0.61, 0.36, 1), gap 0.5s ease 1s; } .gn-receipt:nth-child(2) .gn-psplit-bar { transition-delay: 0.25s, 1.25s; } .gn-receipt:nth-child(3) .gn-psplit-bar { transition-delay: 0.5s, 1.5s; } } /* Party colours, the same in the bar and the key. */ .gn-ps--net { --hue: var(--wp--preset--color--primary); } .gn-ps--broker { --hue: var(--wp--preset--color--cta-hover); } .gn-ps--mga { --hue: var(--wp--preset--color--purple); } .gn-ps--fee { --hue: var(--wp--preset--color--accent); } .gn-ps--intro { --hue: var(--wp--preset--color--cta); } .gn-ps--tax { --hue: var(--wp--preset--color--steel); } .gn-ps--insp { --hue: var(--wp--preset--color--accent-light); } .gn-ps--vat { --hue: var(--wp--preset--color--pale-steel); } /* ---- Receipts (.gn-receipts): one premium, split three ways side by side, on icon cards (§389) ---- */ .gn-receipts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: var(--gn-zz-row); margin: 8px auto 0 !important; align-items: start; } .gn-receipts > * { margin: 0 !important; } .gn-receipt { display: flex; flex-direction: column; gap: 14px; padding-bottom: 44px; border-radius: var(--card-radius) var(--card-radius) 0 0; -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, black) 0 0 / 22px 100% repeat-x; mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, black) 0 0 / 22px 100% repeat-x; } .gn-receipt > * { margin: 0 !important; } .gn-band-navy .gn-receipt h3 { color: var(--wp--preset--color--primary) !important; font-size: 24px; } .gn-receipt > p { font-size: 15px; line-height: 1.55; color: var(--neutral-500); } .gn-receipt-ticks { display: grid; gap: 8px; padding: 6px 0 0 !important; list-style: none; } .gn-receipt-ticks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--ink); } .gn-receipt-ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: var(--hue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat; } .gn-receipts-note { max-width: 780px; margin: 32px auto 0 !important; text-align: center; font-size: 14px; opacity: 0.8; } @media (max-width: 1024px) { .gn-receipts { grid-template-columns: minmax(0, 1fr); max-width: 480px; gap: 24px; } } /* ---- After a claim line: a centred note and text link (§390) ---- */ .gn-cline ~ .gn-cline-note { max-width: 780px; margin: 40px auto 0 !important; text-align: center; font-size: 15px; color: var(--text-muted); } .gn-cline ~ .gn-textlink { margin-top: 12px !important; text-align: center; } /* ---- Section headings wrap in balanced lines (§391) ---- */ .gn-carousel-section-heading.gn-carousel-section-heading, .gn-cta-heading { text-wrap: balance; } /* §397 in STYLE-NOTES.md (repo root) */ .gn-contact-cards > .wp-block-column { background: var(--wp--preset--color--ink); border-radius: 10px; padding: 30px 30px 30px 113px; } .gn-contact-cards h3 { font-size: 15px; line-height: 1.2; margin: 0 0 16px; color: var(--wp--preset--color--accent); position: relative; } .gn-contact-cards h3 a { color: var(--wp--preset--color--accent); text-decoration: none; } .gn-contact-cards h3 a:hover, .gn-contact-cards h3 a:focus-visible { text-decoration: underline; } .gn-contact-cards p { color: var(--wp--preset--color--white); font-size: 15px; line-height: 1.5; margin: 0; } .gn-contact-cards p strong { font-size: 16.5px; } .gn-contact-cards .gn-office-hours { margin-top: 48px; } .gn-contact-cards .gn-office-hours + p { font-size: 16.5px; } .gn-office-city::before, .gn-office-hours::before { content: ""; position: absolute; left: -83px; top: -6px; width: 68px; height: 68px; box-sizing: border-box; border: 2px solid var(--wp--preset--color--accent); border-radius: 50%; } .gn-office-city::after, .gn-office-hours::after { content: ""; position: absolute; left: -83px; top: -6px; width: 68px; height: 68px; background: var(--wp--preset--color--accent); -webkit-mask: var(--gn-office-icon) center / 32px no-repeat; mask: var(--gn-office-icon) center / 32px no-repeat; } .gn-office-city { --gn-office-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'/%3E%3Cpath d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E"); } .gn-office-hours { --gn-office-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E"); } :is(.gn-ab-head, .gn-cr-head) { text-align: center; margin-bottom: 40px; } :is(.gn-ab-head, .gn-cr-head) h2 { font-size: var(--gn-section-heading); line-height: 1.1; } :is(.gn-ab-head, .gn-cr-head) p { max-width: 760px; margin-left: auto; margin-right: auto; font-size: 18px; line-height: 1.6; } @media (max-width: 600px) { .gn-ab-head p { font-size: 16px; } } /* ---- Section headings that had their own sizes take the section-heading size ---- */ /* §404 */ .gn-testimonials-header h2, .gn-ni-header h2, .gn-cr-values-copy h2, .gn-cr-roles .gn-cr-head h2 { font-size: var(--gn-section-heading) !important; } /* ---- The zig-zag strip (.gn-feat): a frame for the large app demos, and the reveal ---- */ /* §405 */ .gn-feat-demo { width: 100%; max-width: 560px; margin-inline: auto; overflow: hidden; } .wp-block-columns:has(> .gn-feat) > .wp-block-column { transition: opacity 0.8s cubic-bezier(0.23,1,0.32,1), transform 0.8s cubic-bezier(0.23,1,0.32,1); } .wp-block-columns:has(> .gn-feat) > .wp-block-column:not(.gn-feat) { transition-delay: 0.12s; } @media (prefers-reduced-motion: no-preference) { html.gn-js .wp-block-columns:has(> .gn-feat:not(.gn-in)) > .wp-block-column { opacity: 0; transform: translateY(36px); } } /* ---- Buyer's guide CTA: what the guide covers, and the book on a blob, ring and dots ---- */ /* §406 */ .gn-guide-cta-list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; } .gn-guide-cta-list li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--ink); } .gn-guide-cta-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--gn-guide-tick, var(--wp--preset--color--primary)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat; } :is(.gn-guide-cta.gn-guide-cta--dark, .gn-guide-dark .gn-guide-cta) { --gn-guide-tick: var(--wp--preset--color--cta-hover); --gn-guide-ring: rgb(255 255 255 / 0.3); } :is(.gn-guide-cta.gn-guide-cta--dark, .gn-guide-dark .gn-guide-cta) .gn-guide-cta-list li { color: var(--wp--preset--color--white); } .gn-guide-cta-media { position: relative; isolation: isolate; padding: 24px 0; } .gn-guide-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .gn-guide-blob { position: absolute; left: 50%; top: 50%; width: min(86%, 440px); aspect-ratio: 1.08; translate: -50% -48%; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: var(--wp--preset--color--purple); } .gn-guide-ring { position: absolute; right: -2%; top: -4%; width: min(54%, 320px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--gn-guide-ring, rgb(0 78 170 / 0.25)); } .gn-guide-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; } .gn-guide-dot--a { left: 9%; top: 9%; background: var(--wp--preset--color--accent); } .gn-guide-dot--b { left: 5%; bottom: 20%; background: var(--wp--preset--color--cta-hover); } .gn-guide-dot--c { right: 5%; bottom: 24%; width: 10px; height: 10px; background: var(--wp--preset--color--cta); } .gn-guide-cta-media img { position: relative; max-width: 360px; filter: drop-shadow(0 24px 32px rgb(0 0 0 / 0.3)); } @media (max-width: 1024px) { .gn-guide-cta-list { width: fit-content; max-width: 560px; margin-inline: auto; } .gn-guide-cta-media img { max-width: 300px; } } /* §412 */ .gn-logos-fade { background-image: linear-gradient(var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 50%, rgb(from var(--wp--preset--color--pale-steel) r g b / 0.15) 100%); } /* §413 */ .gn-compare-table thead tr > :first-child { border-top-left-radius: 16px; } .gn-compare-table thead tr > :last-child { border-top-right-radius: 16px; } .gn-psplit-bar i:first-child { border-radius: 10px 10px 0 0; } .gn-psplit-bar i:last-child { border-radius: 0 0 10px 10px; } :is(.gn-ab-tl-panel, .gn-cr-tl-panel) > :is(.gn-ab-tl-range, .gn-cr-tl-range) { border-top-left-radius: inherit; border-bottom-left-radius: inherit; } @media (max-width: 860px) { :is(.gn-ab-tl-panel, .gn-cr-tl-panel) > :is(.gn-ab-tl-range, .gn-cr-tl-range) { border-top-right-radius: inherit; border-bottom-left-radius: 0; } } /* §415 */ .gn-logos-fade { padding-bottom: 60px; } .entry-content > :has(.gn-logos-fade) + * { margin-block-start: 0 !important; } /* §417 */ :is(.gn-on-dark, .gn-band-navy, .gn-band-teal, .gn-band--primary, .gn-band--ink, .gn-band--steel) .gn-icard :is(h3, p:not(.gn-cline-stage), li) { color: var(--wp--preset--color--ink); } :is(.gn-on-dark, .gn-band-navy, .gn-band--primary, .gn-band--ink) .gn-cline ~ .gn-cline-note { color: var(--wp--preset--color--white); } :is(.gn-on-dark, .gn-band-navy, .gn-band--primary, .gn-band--ink) .gn-cline-stage { color: var(--wp--preset--color--white); } /* §420 */ .gn-nav-for { color: var(--neutral-200); font-weight: 400; font-style: italic; margin-right: 0.2em; } /* §424 */ .gn-aud { --aud-hue: var(--wp--preset--color--accent); position: relative; width: 100%; max-width: 600px; margin: 0 auto; aspect-ratio: 1; container-type: inline-size; } .gn-aud--purple { --aud-hue: var(--wp--preset--color--purple); } .gn-aud--cta { --aud-hue: var(--wp--preset--color--cta); } .gn-aud--yellow { --aud-hue: var(--wp--preset--color--cta-hover); } .gn-product-hero-graphic .gn-aud img.gn-aud-base { display: block; width: 100%; max-width: none; height: auto; border-radius: 0; } .gn-aud-dot { position: absolute; border-radius: 50%; width: 2.4cqw; height: 2.4cqw; } .gn-aud-dot--1 { top: 9%; left: 86%; background: var(--wp--preset--color--cta-hover); } .gn-aud-dot--2 { top: 44%; left: 1%; width: 1.9cqw; height: 1.9cqw; background: var(--wp--preset--color--cta); } .gn-aud-dot--3 { top: 91%; left: 84%; width: 2cqw; height: 2cqw; background: var(--wp--preset--color--white); } .gn-aud-card { position: absolute; z-index: 1; border-radius: 2.2cqw; background: none; box-shadow: 0 2cqw 5cqw rgb(0 0 0 / 0.28); color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--body); font-size: clamp(9px, 2.25cqw, 13.5px); line-height: 1.3; text-align: left; } /* Each strip rounds its own corners and paints its own background, so nothing white sits behind the dark header curve and no overflow clip is needed (§413). */ .gn-aud-card > * { background: var(--wp--preset--color--white); } .gn-aud-card > :first-child { border-radius: 2.2cqw 2.2cqw 0 0; } .gn-aud-card > :last-child { border-radius: 0 0 2.2cqw 2.2cqw; } .gn-aud-hd { display: flex; justify-content: space-between; align-items: center; gap: 1.5cqw; padding: 1.8cqw 2.4cqw; border-radius: 2.2cqw 2.2cqw 0 0; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); } .gn-aud-hd small { font-size: 0.82em; font-weight: 600; opacity: 0.75; } .gn-aud-hd--light { background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); border-bottom: 1px solid var(--neutral-100); } .gn-aud-row { display: flex; justify-content: space-between; align-items: center; gap: 1.5cqw; padding: 1.5cqw 2.4cqw; border-bottom: 1px solid var(--neutral-100); } .gn-aud-row:last-child { border-bottom: 0; } .gn-aud-row small { display: block; font-size: 0.82em; color: var(--neutral-600); } .gn-aud-pill { display: inline-flex; padding: 0.4cqw 1.6cqw; border-radius: 50px; font-size: 0.82em; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--aud-hue) 18%, var(--wp--preset--color--white)); } .gn-aud-pill--warn { background: color-mix(in srgb, var(--wp--preset--color--cta-hover) 30%, var(--wp--preset--color--white)); } .gn-aud-swap { display: inline-grid; justify-items: end; } .gn-aud-swap > * { grid-area: 1 / 1; opacity: 0; } .gn-aud-swap > :last-child { opacity: 1; } .gn-aud-steps { position: relative; padding: 2.2cqw 0 1.6cqw; } .gn-aud-steps ol { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; } .gn-aud-steps::before, .gn-aud-fill { content: ""; position: absolute; top: calc(2.2cqw + 1.1cqw - 1px); left: 16.667%; width: 66.667%; height: 2px; background: var(--neutral-200); } .gn-aud-fill { z-index: 1; background: var(--aud-hue); transform-origin: left; } .gn-aud-steps li { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1cqw; margin: 0; font-size: 0.82em; font-weight: 600; color: var(--neutral-600); } .gn-aud-steps li::before { content: ""; box-sizing: border-box; width: 2.2cqw; height: 2.2cqw; border: 2px solid var(--aud-hue); border-radius: 50%; background: var(--aud-hue); } .gn-aud-foot { display: flex; justify-content: space-between; gap: 1.5cqw; padding: 1.5cqw 2.4cqw; background: var(--neutral-50); font-size: 0.9em; } .gn-aud-foot b { font-weight: 700; } /* Insurers: the customer record, and a claim on its fleet policy */ .gn-aud--ins .gn-aud-card--list { left: 0; top: 41%; width: 50%; } .gn-aud--ins .gn-aud-card--track { left: 12%; top: 76%; width: 54%; } .gn-aud--ins .gn-aud-dot--1 { top: 7%; left: 9%; } .gn-aud--ins .gn-aud-dot--2 { top: 90%; left: 4%; } /* MGAs: the product builder and a release going live. The building is on the left, so the cards sit right. */ .gn-aud--mga { --aud-hue: var(--wp--preset--color--cta-hover); } .gn-aud--mga .gn-aud-card--list { left: 50%; top: 40%; width: 50%; } .gn-aud--mga .gn-aud-card--track { left: 34%; top: 76%; width: 56%; } .gn-aud--mga .gn-aud-dot--1 { top: 7%; left: 3%; background: var(--wp--preset--color--cta); } .gn-aud--mga .gn-aud-dot--2 { top: 4%; left: 90%; background: var(--wp--preset--color--accent); } .gn-aud--mga .gn-aud-dot--3 { top: 80%; left: 95%; } /* Brokers: the risk bordereau, and the paid bordereau reconciled. The Gherkin is on the left, so the cards sit right. */ .gn-aud--bk { --aud-hue: var(--wp--preset--color--cta); } .gn-aud--bk .gn-aud-card--list { left: 52%; top: 42%; width: 48%; } .gn-aud--bk .gn-aud-card--track { left: 40%; top: 77%; width: 56%; } .gn-aud--bk .gn-aud-dot--1 { top: 8%; left: 90%; } .gn-aud--bk .gn-aud-dot--2 { top: 40%; left: 2%; background: var(--wp--preset--color--accent); } .gn-aud--bk .gn-aud-dot--3 { top: 92%; left: 4%; } /* London Market: lines filling on the subscription stack, then the slip bound. The building is on the right, so the cards keep below it. */ .gn-aud--lm .gn-aud-card--list { left: 50%; top: 47%; width: 50%; } .gn-aud--lm .gn-aud-card--track { left: 38%; top: 80%; width: 60%; } .gn-aud--lm .gn-aud-dot--1 { top: 10%; left: 3%; } .gn-aud--lm .gn-aud-dot--2 { top: 2%; left: 96%; background: var(--wp--preset--color--accent); } .gn-aud--lm .gn-aud-dot--3 { top: 93%; left: 3%; } .gn-aud-line { display: grid; grid-template-columns: 1fr 26% auto; align-items: center; gap: 1.6cqw; padding: 1.3cqw 2.4cqw; border-bottom: 1px solid var(--neutral-100); } .gn-aud-line:last-child { border-bottom: 0; } .gn-aud-line small { display: block; font-size: 0.82em; color: var(--neutral-600); } .gn-aud-line i { display: block; height: 0.9cqw; border-radius: 1cqw; background: var(--neutral-100); } .gn-aud-line i::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 1cqw; background: var(--aud-hue); transform-origin: left; } .gn-aud-line b { font-size: 0.9em; } .gn-aud-line:nth-child(3) i::after { width: 80%; } .gn-aud-line:nth-child(4) i::after { width: 60%; } @media (prefers-reduced-motion: no-preference) { .gn-aud-card { animation: gn-aud-in 0.8s cubic-bezier(0.23, 1, 0.32, 1) both 0.3s; } .gn-aud-card--track { animation-delay: 0.7s; } .gn-aud-dot { animation: gn-aud-float 7s ease-in-out infinite; } .gn-aud-dot--2 { animation-delay: -2.3s; } .gn-aud-dot--3 { animation-delay: -4.6s; } .gn-aud-swap > * { animation: 9s ease infinite 1.5s both; } .gn-aud-swap--3 > :nth-child(1) { animation-name: gn-aud-s1; } .gn-aud-swap--3 > :nth-child(2) { animation-name: gn-aud-s2; } .gn-aud-swap--3 > :nth-child(3) { animation-name: gn-aud-s3; } .gn-aud-swap--2 > :nth-child(1) { animation-name: gn-aud-s12; } .gn-aud-swap--2 > :nth-child(2) { animation-name: gn-aud-s3; } .gn-aud-fill { animation: gn-aud-fill 9s ease-in-out infinite 1.5s both; } .gn-aud-steps li:nth-child(2)::before { animation: gn-aud-n2 9s ease infinite 1.5s both; } .gn-aud-steps li:nth-child(3)::before { animation: gn-aud-n3 9s ease infinite 1.5s both; } .gn-aud-line i::after { animation: gn-aud-bar 9s ease-out infinite 1.5s both; } .gn-aud-line:nth-child(3) i::after { animation-delay: 1.9s; } .gn-aud-line:nth-child(4) i::after { animation-delay: 2.3s; } } @keyframes gn-aud-bar { 0% { transform: scaleX(0); } 22%, 95% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @keyframes gn-aud-in { from { opacity: 0; translate: 0 3cqw; } to { opacity: 1; translate: 0 0; } } @keyframes gn-aud-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6cqw; } } @keyframes gn-aud-s1 { 0% { opacity: 0; } 3%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } } @keyframes gn-aud-s2 { 0%, 30% { opacity: 0; } 33%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } } @keyframes gn-aud-s3 { 0%, 63% { opacity: 0; } 66%, 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes gn-aud-s12 { 0% { opacity: 0; } 3%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } } @keyframes gn-aud-fill { 0%, 30% { transform: scaleX(0); } 33%, 63% { transform: scaleX(0.5); } 66%, 95% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @keyframes gn-aud-n2 { 0%, 30% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } 33%, 95% { background: var(--aud-hue); border-color: var(--aud-hue); } 100% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } } @keyframes gn-aud-n3 { 0%, 63% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } 66%, 95% { background: var(--aud-hue); border-color: var(--aud-hue); } 100% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } } /* §425 */ .gn-carousel .gn-carousel-dots { gap: 14px; } .gn-carousel-dot { position: relative; } .gn-carousel-dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; } .gn-testimonials-dots { gap: 16px !important; } .gn-testimonials-dot { position: relative !important; } .gn-testimonials-dot::after { content: ""; position: absolute; inset: -8px; } :is(.gn-logos-link, .gn-carousel-link) { padding-block: 2px; } .gn-ft-email a { display: inline-block; padding-block: 2px; } .gn-office-city a { display: inline-block; padding-block: 3px; } .gn-site-header .wp-block-image a { position: relative; } .gn-site-header .wp-block-image a::after { content: ""; position: absolute; inset: -6px -4px; } :is(h1, h2, h3, h4, .gn-eyebrow) { text-wrap: balance; } :is(p, li) { text-wrap: pretty; } /* the 900px rule enlarges text pills; logo pills keep the wheel's own proportions, or they pile up on a tablet */ @media (max-width: 900px) { .gn-eco-pill-in:has(img) { font-size: 1.56cqw; padding: 0.45cqw; gap: 0.8cqw; } .gn-eco-pill-in:has(img) .gn-eco-dot { width: 1.1cqw; height: 1.1cqw; } } @media (min-width: 601px) and (max-width: 1024px) { .gn-ft-top.wp-block-columns > .wp-block-column:not(.gn-ft-brand):not(:last-child) { flex-basis: calc((100% - 80px) / 3) !important; } } /* phones: the composite takes most of the screen width; inside the hero's wide insets it was 256px and the cards (text floored at 9px) overlapped */ @media (max-width: 600px) { .gn-product-hero-graphic :is(.gn-aud, .gn-bind-outer, .gc-outer, .gf-outer) { width: calc(100% + 2 * var(--gn-hero-inset) - 24px); max-width: none; margin-inline: calc(12px - var(--gn-hero-inset)); } } /* phones: a lone last logo sits in the middle, not alone on the left; tablets (three across) put it in the middle column */ @media (max-width: 600px) { .gn-logos-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); } } @media (min-width: 601px) and (max-width: 1024px) { .gn-logos-grid > :last-child:nth-child(3n+1) { grid-column: 2; } } /* a feature strip straight after the logo band needs its own top space: the band's following margin is removed (see the logos rule above) */ .entry-content > :has(.gn-logos-fade) + :has(.gn-feat) { padding-top: clamp(48px, 8vw, 96px); } /* tablet: each office card puts the address beside the hours rather than above them */ @media (min-width: 601px) and (max-width: 781px) { .gn-contact-cards > .wp-block-column { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: auto 1fr; grid-auto-flow: column; column-gap: 100px; align-items: start; } /* the clock icon hangs 83px left of its heading, inside this gap */ .gn-contact-cards > .wp-block-column > .gn-office-hours { margin-top: 0 !important; } } /* phones: the receipt total goes under its label; side by side, the label wrapped round the amount */ @media (max-width: 600px) { .gn-psplit-total { flex-direction: column; align-items: flex-start; gap: 2px; } } /* §426 HubSpot forms */ .gn-hubspot-form .hs-form { font-family: var(--font-body); color: var(--wp--preset--color--ink); } .gn-hubspot-form .hs-form fieldset { max-width: none !important; border: 0; padding: 0; margin: 0; } .gn-hubspot-form .hs-form .form-columns-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; } @media (max-width: 600px) { .gn-hubspot-form .hs-form .form-columns-2 { grid-template-columns: minmax(0, 1fr); } } .gn-hubspot-form .hs-form .form-columns-2 > .hs-form-field, .gn-hubspot-form .hs-form .form-columns-1 > .hs-form-field { width: auto; float: none; } .gn-hubspot-form .hs-form .hs-form-field { margin: 0 0 18px; } .gn-hubspot-form .hs-form .input { margin: 0 !important; } .gn-hubspot-form .hs-form .hs-form-field > label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--wp--preset--color--ink); } .gn-hubspot-form .hs-form .hs-form-required { color: var(--wp--preset--color--cta); margin-left: 2px; } .gn-hubspot-form .hs-form .hs-field-desc { margin: -2px 0 8px; font-size: 13px; line-height: 1.45; color: var(--neutral-600); } .gn-hubspot-form .hs-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea).hs-input { display: block; width: 100% !important; max-width: none !important; min-height: 44px !important; padding: 10px 12px !important; font: inherit; font-size: 16px; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--white); border: 1px solid var(--neutral-300); border-radius: 10px; box-sizing: border-box; -webkit-appearance: none; appearance: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .gn-hubspot-form .hs-form textarea.hs-input { min-height: 120px; resize: vertical; } .gn-hubspot-form .hs-form .hs-input:focus { outline: none; border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 3px rgb(from var(--wp--preset--color--primary) r g b / 0.25); } .gn-hubspot-form .hs-form .hs-input.invalid.error { border-color: var(--wp--preset--color--cta); } .gn-hubspot-form .hs-form :is(.inputs-list, .hs-error-msgs) { list-style: none; margin: 0; padding: 0; } .gn-hubspot-form .hs-form .inputs-list > li::before { content: none; } .gn-hubspot-form .hs-form .hs-error-msgs label { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--wp--preset--color--cta); } .gn-hubspot-form .hs-form .hs-form-booleancheckbox-display { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; cursor: pointer; } .gn-hubspot-form .hs-form .hs-form-booleancheckbox-display input { flex: none; width: 20px; height: 20px; min-height: 0 !important; padding: 0 !important; margin: 1px 0 0; accent-color: var(--wp--preset--color--primary); } .gn-hubspot-form .hs-form .hs-form-booleancheckbox-display > span { margin: 0 !important; } .gn-hubspot-form .hs-form :is(.hs-richtext, .hs-richtext p, .legal-consent-container p) { font-size: 13px; line-height: 1.5; color: var(--neutral-600); margin: 0 0 10px; } .gn-hubspot-form .hs-form .legal-consent-container { margin-bottom: 18px; } .gn-hubspot-form .hs-form .hs-richtext a { color: var(--wp--preset--color--primary); } .gn-hubspot-form .hs-form .hs-recaptcha { margin-bottom: 20px; } .gn-hubspot-form .hs-form .hs-button { display: inline-flex; min-height: 48px; padding: 14px 40px; font-family: var(--wp--preset--font-family--body); font-size: 15px; font-weight: 700; color: var(--wp--preset--color--white); background: var(--wp--preset--color--cta); border: 0; border-radius: 50px; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 0.2s ease; } .gn-hubspot-form .hs-form .hs-button:is(:hover, :focus-visible) { background: var(--wp--preset--color--cta-hover); } .gn-hubspot-form .hs-form .hs-button:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; } .gn-hubspot-form .submitted-message { color: var(--wp--preset--color--ink); } /* §426 Legal pages */ .gn-legal > .wp-block-group > * { max-width: 46rem; margin-left: 0 !important; }