/* ==== Who Genasys is for (Ed): an accordion of business types ==== Ed's Claude Design "Who Genasys Is For", version 2a, built from core/details so it needs no script. The cards take the FAQ's look (style.css §5): white, 12px radius, soft shadow deepening when open. Each type takes one colour in the run the numbered sections use (.gn-split), for its dot, ticks and link. The class gn-fit is on functions.php's not-a-question list, so these are not published as FAQ questions. */ .gn-fit { max-width: 900px; margin-inline: auto !important; } .gn-fit > * { max-width: none !important; } .gn-fit-head { max-width: 720px !important; margin: 0 auto 40px !important; text-align: center; } .gn-fit-head h2 { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--gn-section-heading); line-height: 1.1; letter-spacing: -0.015em; color: var(--wp--preset--color--primary); text-wrap: balance; } .gn-fit-head p { margin: 24px 0 0 !important; font-size: 19px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; } .gn-fit-list { display: flex; flex-direction: column; gap: 16px; } .gn-fit-list > * { margin: 0 !important; } .gn-fit-item { --hue: var(--wp--preset--color--accent); background: var(--wp--preset--color--white); border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px var(--shadow-soft); transition: box-shadow 0.3s ease; } .gn-fit-item:nth-child(6n+2) { --hue: var(--wp--preset--color--primary); } .gn-fit-item:nth-child(6n+3) { --hue: var(--wp--preset--color--cta-hover); } .gn-fit-item:nth-child(6n+4) { --hue: var(--wp--preset--color--cta); } .gn-fit-item:nth-child(6n+5) { --hue: var(--wp--preset--color--purple); } .gn-fit-item:nth-child(6n) { --hue: var(--wp--preset--color--steel); } .gn-fit-item:hover { box-shadow: 0 8px 28px var(--shadow-mid); } .gn-fit-item[open] { box-shadow: 0 10px 28px var(--shadow-mid); } .gn-fit-item > summary { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 18px 28px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: var(--wp--preset--color--ink); cursor: pointer; list-style: none; } .gn-fit-item > summary::-webkit-details-marker { display: none; } .gn-fit-item > summary::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--hue); } /* The FAQ's chevron, on a pale disc. */ .gn-fit-item > summary::after { content: ""; flex: none; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; background: var(--neutral-100) url("data:image/svg+xml,") center / 16px no-repeat; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .gn-fit-item[open] > summary::after { transform: rotate(180deg); } /* The answer lines up under the name, past the dot. */ .gn-fit-item > :not(summary) { margin: 0 !important; padding: 0 28px 0 58px; } .gn-fit-item > :not(summary) + :not(summary) { margin-top: 14px !important; } .gn-fit-item > :not(summary):last-child { padding-bottom: 28px; } .gn-fit-item p { font-size: 17px; line-height: 1.6; color: var(--text-body); text-wrap: pretty; } .gn-fit-item ul { list-style: none; display: grid; gap: 10px; } .gn-fit-item li { position: relative; margin: 0; padding-left: 30px; font-size: 17px; line-height: 1.5; color: var(--wp--preset--color--ink); } .gn-fit-item li::before { content: ""; position: absolute; left: 0; top: 2px; 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; } /* The link is the shared text link (style.css, Text link), in the type's colour. */ .gn-fit-item { --gn-textlink-colour: var(--hue); } @media (prefers-reduced-motion: no-preference) { .gn-fit-item[open] > :not(summary) { animation: gnFaqReveal 0.25s ease-out both; } } @media (max-width: 680px) { .gn-fit-item > summary { gap: 14px; padding: 14px 18px; font-size: 19px; } .gn-fit-item > :not(summary) { padding-inline: 18px; } } /* ==== Secure, scalable cloud insurance platform (Ed) ==== Ed's Claude Design "Platform Security Section", replacing Built on enterprise-grade foundations. The band is Connectivity's integrations gradient (connectivity.css .gn-uc); the heading, rule and eyebrow follow the site's section heads; the cards are native blocks. Each card's icon is a disc (h3::before) with the glyph masked over it (h3::after), as .gn-feat draws its tiles, so the markup carries no SVG. */ .gn-sec.gn-sec { /* width, full-bleed margins and the gradient: the deep band shell in style.css (§427) */ position: relative; padding: var(--gn-section-space) 20px; } .gn-sec .gn-sec-head { max-width: 820px !important; margin-bottom: 56px !important; text-align: center; } .gn-sec-head .gn-eyebrow { margin: 0 0 18px; letter-spacing: 0.14em; color: var(--wp--preset--color--cta-hover); } .gn-sec-head h2 { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--gn-section-heading); line-height: 1.1; letter-spacing: -0.015em; color: var(--wp--preset--color--white); text-wrap: balance; } .gn-sec-head .gn-sec-dek { margin: 24px 0 0 !important; font-size: 19px; line-height: 1.6; color: var(--wp--preset--color--white); text-wrap: pretty; } .gn-sec-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .gn-sec-cards > * { margin: 0 !important; max-width: none !important; } .gn-sec-card { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 36px 32px 34px; border-radius: 16px; background: var(--wp--preset--color--white); box-shadow: 0 12px 32px rgb(from var(--genasys-space-blue) r g b / 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; } .gn-sec-card > * { margin: 0 !important; max-width: none !important; } .gn-sec-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgb(from var(--genasys-space-blue) r g b / 0.4); } .gn-sec-card h3 { position: relative; display: flex; align-items: center; gap: 16px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; color: var(--wp--preset--color--ink); } .gn-sec-card h3::before { content: ""; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--hue); } .gn-sec-card h3::after { content: ""; position: absolute; left: 14px; top: 50%; width: 24px; height: 24px; translate: 0 -50%; background: var(--hue-on); -webkit-mask: var(--gn-sec-icon) center / contain no-repeat; mask: var(--gn-sec-icon) center / contain no-repeat; } /* The glyph is --hue-on, except white on teal (Ed). */ .gn-sec-card.gn-hue-accent h3::after { background: var(--wp--preset--color--white); } .gn-sec-card--security { --gn-sec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } .gn-sec-card--resilience { --gn-sec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect width='20' height='8' x='2' y='2' rx='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2'/%3E%3Cpath d='M6 6h.01M6 18h.01'/%3E%3C/svg%3E"); } .gn-sec-card--connectivity { --gn-sec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 22v-5M9 8V2M15 8V2M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z'/%3E%3C/svg%3E"); } /* The spec list: a small label over each value, ruled between. */ .gn-sec-card ul { list-style: none; padding: 0; } /* padding !important: style.css zeroes the top padding of every list's first item (.entry-content :not(.wp-block-group) > li:first-child), which pushed the first row against its rule (Ed). */ .gn-sec-card li { margin: 0; padding: 16px 0 !important; border-top: 1px solid var(--border-subtle); font-size: 17px; line-height: 1.45; color: var(--wp--preset--color--ink); } .gn-sec-card li:last-child { border-bottom: 1px solid var(--border-subtle); } .gn-sec-card li strong { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .gn-sec-card p { font-size: 16px; line-height: 1.6; color: var(--text-body); text-wrap: pretty; } /* The link is the shared text link (style.css, Text link), in the card's colour. */ .gn-sec-card { --gn-textlink-colour: var(--hue); } .gn-sec-card .gn-sec-link { margin-top: auto !important; } @media (prefers-reduced-motion: reduce) { .gn-sec-card { transition: none; } .gn-sec-card:hover { transform: none; } } @media (max-width: 960px) { .gn-sec-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px !important; } } @media (max-width: 600px) { .gn-sec-card { padding: 28px 22px 26px; } }