/* Technology page, summary-first layout. Loaded by inc/technology-page.php on pages with a .pg-tech-evidence container. * The page is built from Avada elements classed pg-tech-* (see Dev Docs/Design/technology_page_revamp/editing-guide.md); * everything inside cards is styled by structure, so text, images and captions the web team adds match automatically. * !important only where a rule must beat Avada's inline or ID-scoped element styles. */ /* Section headings: one size, centred, with the brand ribbon accent. */ body.pg-tech-page .pg-tech-evidence__head h2, body.pg-tech-page .pg-tech-faq .fusion-text h2, body.pg-tech-page .pg-tech-intro__heading h2, body.pg-tech-page #content .pg-tech-form .fusion-text h2, body.pg-tech-page #content .pg-tech-band > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper > .fusion-text:first-child h2 { font-size: 28px !important; line-height: 1.25 !important; font-weight: 700 !important; color: var(--pg-ink) !important; text-align: center !important; max-width: 900px; margin: 0 auto 24px !important; padding: 0 !important; } body.pg-tech-page .pg-tech-evidence__head h2 *, body.pg-tech-page .pg-tech-faq .fusion-text h2 *, body.pg-tech-page .pg-tech-intro__heading h2 *, body.pg-tech-page #content .pg-tech-form .fusion-text h2 * { font-size: inherit !important; color: inherit !important; font-weight: inherit !important; font-family: inherit !important; } body.pg-tech-page .pg-tech-evidence__head h2 sup, body.pg-tech-page .pg-tech-faq .fusion-text h2 sup, body.pg-tech-page .pg-tech-intro__heading h2 sup, body.pg-tech-page #content .pg-tech-form .fusion-text h2 sup { font-size: .5em !important; vertical-align: super; line-height: 0; } body.pg-tech-page .pg-tech-evidence__head h2::after, body.pg-tech-page .pg-tech-faq .fusion-text h2::after, body.pg-tech-page .pg-tech-intro__heading h2::after, body.pg-tech-page #content .pg-tech-form .fusion-text h2::after, body.pg-tech-page #content .pg-tech-band > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper > .fusion-text:first-child h2::after { content: ""; display: block; width: 56px; height: 4px; margin: 14px auto 0; border-radius: 2px; background: var(--pg-ribbon); } /* Introduction ------------------------------------------------------------------------------------------------ */ /* The intro heading repeats the banner title: visually hidden, still read by screen readers and search engines. */ body.pg-tech-page .pg-tech-intro__title { position: absolute !important; width: 1px; height: 1px; margin: -1px !important; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* The intro's 14 pt text size is the page's own (it was set inline before the rebuild). */ body.pg-tech-page .pg-tech-intro__text p { margin: 0 0 16px; font-size: 18.667px; line-height: 1.85; color: var(--pg-ink); } body.pg-tech-page .pg-tech-intro__text ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 24px 0 0; padding: 0; } body.pg-tech-page .pg-tech-intro__text li { position: relative; margin: 0; padding: 14px 16px 14px 48px; background: var(--pg-surface); border-radius: var(--pg-radius-md); font-size: 18.667px; line-height: 1.5; color: var(--pg-ink); } body.pg-tech-page .pg-tech-intro__text li::before { content: ""; position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; border-radius: 50%; background: var(--pg-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; } /* Workflow chart on a light panel: the horizontal chart on desktop and tablet, the vertical DNA chart on phones * (Avada's per-device visibility on the two Image elements decides which one shows). */ body.pg-tech-page .pg-tech-chart { margin: 32px 0 8px !important; padding: 24px; background: var(--pg-surface); border-radius: var(--pg-radius-md); box-sizing: border-box; text-align: center; } body.pg-tech-page .pg-tech-chart--wide { width: 100%; max-width: none !important; } body.pg-tech-page .pg-tech-chart--wide img { width: 100%; height: auto; } body.pg-tech-page .pg-tech-chart--narrow { width: 100%; padding: 16px; } body.pg-tech-page .pg-tech-chart--narrow img { width: auto; max-width: 100%; max-height: 520px; margin: 0 auto; } /* Free-trial button under the introduction. */ body.pg-tech-page .fusion-button-wrapper:has(.pg-tech-cta) { margin-top: 28px; } body.pg-tech-page .fusion-button.pg-tech-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 28px !important; border: 0 !important; border-radius: var(--pg-radius-sm) !important; background: var(--pg-orange-strong) !important; box-shadow: none !important; } body.pg-tech-page .fusion-button.pg-tech-cta .fusion-button-text { color: var(--pg-white) !important; font-weight: 700; font-size: 14px !important; line-height: 1.2 !important; letter-spacing: .04em; text-transform: uppercase; } body.pg-tech-page .fusion-button.pg-tech-cta:hover, body.pg-tech-page .fusion-button.pg-tech-cta:focus-visible { background: var(--pg-orange-deep) !important; } body.pg-tech-page .fusion-button.pg-tech-cta:focus-visible { outline: 3px solid var(--pg-purple); outline-offset: 3px; } /* Evidence: its own light-grey panel with the cards on it --------------------------------------------------- */ body.pg-tech-page .pg-tech-evidence.fusion-fullwidth { max-width: 1224px; margin: 64px auto 0 !important; padding: 48px 32px !important; background: var(--pg-surface) !important; border-radius: var(--pg-radius-md); box-sizing: border-box; scroll-margin-top: 110px; } body.pg-tech-page .pg-tech-evidence > .fusion-builder-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: none; margin: 0 !important; } body.pg-tech-page .pg-tech-evidence > .fusion-builder-row::before, body.pg-tech-page .pg-tech-evidence > .fusion-builder-row::after, body.pg-tech-page .pg-tech-evidence > .fusion-builder-row > .fusion-clearfix { display: none; } body.pg-tech-page .pg-tech-evidence > .fusion-builder-row > .fusion-layout-column { width: auto !important; margin: 0 !important; float: none; min-width: 0; } body.pg-tech-page .pg-tech-evidence__head { grid-column: 1 / -1; } body.pg-tech-page .pg-tech-evidence__head .fusion-text { margin: 0; } /* Cards: heading, one-line takeaway, optional link, then "Show the data". An open card spans the full row. */ body.pg-tech-page .pg-tech-card { display: flex; flex-direction: column; scroll-margin-top: 110px; } body.pg-tech-page .pg-tech-card:has(.panel-collapse.in), body.pg-tech-page .pg-tech-card.is-open { grid-column: 1 / -1; } /* A card that spans the whole row (for example a workflow chart): add pg-tech-card--wide to the column. */ body.pg-tech-page .pg-tech-card--wide { grid-column: 1 / -1; } /* Stacked testimonials (Avada Testimonials elements) are separate items: 32 px between them, 48 px before what follows. */ body.pg-tech-page #content .fusion-testimonials ~ .fusion-testimonials { margin-top: 32px !important; } body.pg-tech-page #content .fusion-testimonials + :not(.fusion-testimonials):not(.fusion-clearfix) { margin-top: 48px !important; } body.pg-tech-page #content .fusion-testimonials .review + .review { margin-top: 32px !important; } /* Customer case lists in bands (logo, then the case lines as Text elements; hidden separators may sit between them): * 16 px under a logo, 40 px between one case's last line and the next logo, so each case reads as its own block. */ body.pg-tech-page #content .pg-tech-band .fusion-column-wrapper > :is(.fusion-imageframe, .fusion-image-element) { margin-bottom: 16px !important; } body.pg-tech-page #content .pg-tech-band .fusion-column-wrapper > .fusion-text ~ :is(.fusion-imageframe, .fusion-image-element) { margin-top: 40px !important; } /* Case rows built as column pairs after a heading column (logo and case lines | quote): 40 px between rows on wide * screens; on phones, where the columns stack, 40 px above each case and 24 px between a case and its quote. */ body.pg-tech-page #content .pg-tech-band:has(.fusion-testimonials):has(.fusion-imageframe) > .fusion-builder-row > .fusion-layout-column:nth-child(n+4) { margin-top: 40px !important; } @media (max-width: 799px) { body.pg-tech-page #content .pg-tech-band:has(.fusion-testimonials):has(.fusion-imageframe) > .fusion-builder-row > .fusion-layout-column:nth-child(n+3) { margin-top: 24px !important; } body.pg-tech-page #content .pg-tech-band:has(.fusion-testimonials):has(.fusion-imageframe) > .fusion-builder-row > .fusion-layout-column:nth-child(2n+4) { margin-top: 40px !important; } } /* A heading Text element after link boxes in the same band starts a new part: 48 px. */ body.pg-tech-page #content .pg-tech-band .fusion-content-boxes + .fusion-text { margin-top: 48px !important; } /* A disclosure directly under intro text keeps 16 px above its divider. */ body.pg-tech-page #content .pg-tech-intro__text ~ .fusion-accordian { margin-top: 16px !important; } /* The last section keeps the standard gap to the footer (panels otherwise sat flush on it), as on the Applications hub. */ body.pg-tech-page #content .entry-content > .fusion-fullwidth:last-of-type { margin-bottom: 64px !important; } @media (max-width: 767px) { body.pg-tech-page #content .entry-content > .fusion-fullwidth:last-of-type { margin-bottom: 48px !important; } } /* A section heading that is the last thing in its Text element keeps its 24 px gap to the next element (the "last child * has no margin" reset below would otherwise glue a FAQ list to its heading). */ body.pg-tech-page #content :is(.pg-tech-faq, .pg-tech-form, .pg-tech-band) .fusion-text > h2:last-child { margin-bottom: 24px !important; } /* Text after a check list (for example a closing sentence) keeps the list's 24 px distance. */ body.pg-tech-page .pg-tech-intro__text ul + p { margin-top: 24px !important; } /* A list in a form's heading block (what the visitor receives): centred under the lead lines, two columns on wide screens. */ body.pg-tech-page #content .pg-tech-form .fusion-text:has(> h2) ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 32px; max-width: 760px; margin: 16px auto 24px !important; padding-left: 20px; text-align: left; } body.pg-tech-page #content .pg-tech-form .fusion-text:has(> h2) li { margin: 0; font-size: 16px !important; line-height: 1.6 !important; } @media (max-width: 767px) { body.pg-tech-page #content .pg-tech-form .fusion-text:has(> h2) ul { grid-template-columns: minmax(0, 1fr); } } body.pg-tech-page .pg-tech-card > .fusion-column-wrapper { display: flex; flex-direction: column; flex: 1 1 auto; height: auto !important; padding: 24px !important; background: var(--pg-white); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-md); box-sizing: border-box; } body.pg-tech-page .pg-tech-card > .fusion-column-wrapper > .fusion-clearfix { display: none; } body.pg-tech-page .pg-tech-card > .fusion-column-wrapper > .fusion-text h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--pg-ink); } body.pg-tech-page .pg-tech-card > .fusion-column-wrapper > .fusion-text p { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: var(--pg-ink-muted); } body.pg-tech-page .pg-tech-card > .fusion-column-wrapper > .fusion-text a { font-weight: 700; font-size: 15px; text-decoration: none; color: var(--pg-purple); } body.pg-tech-page .pg-tech-card > .fusion-column-wrapper > .fusion-text a:hover, body.pg-tech-page .pg-tech-card > .fusion-column-wrapper > .fusion-text a:focus-visible { color: var(--pg-orange-deep); text-decoration: underline; text-underline-offset: 3px; } body.pg-tech-page .pg-tech-card > .fusion-column-wrapper > .fusion-text { margin-bottom: 0; } /* "Show the data": Avada Toggle, restyled as a quiet disclosure with a +/− circle. */ body.pg-tech-page .pg-tech-more { margin: auto 0 0 !important; padding-top: 12px; border-top: 1px solid var(--pg-border); } body.pg-tech-page .pg-tech-more .panel-group, body.pg-tech-page .pg-tech-more .fusion-panel { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } body.pg-tech-page .pg-tech-more .panel-heading { padding: 0 !important; background: none !important; border: 0 !important; } body.pg-tech-page .pg-tech-more .panel-title { margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.3 !important; } body.pg-tech-page .pg-tech-more .panel-title a { display: inline-flex !important; align-items: center; gap: 8px; min-height: 36px; padding: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: var(--pg-purple) !important; text-decoration: none; } body.pg-tech-page .pg-tech-more .panel-title a:hover { color: var(--pg-orange-deep) !important; } body.pg-tech-page .pg-tech-more .panel-title a:focus-visible { outline: 3px solid var(--pg-purple); outline-offset: 2px; } body.pg-tech-page .pg-tech-more .fusion-toggle-icon-wrapper { display: none !important; } body.pg-tech-page .pg-tech-more .panel-title a::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; font-size: 14px; line-height: 1; } body.pg-tech-page .pg-tech-more .panel-title a.active::before, body.pg-tech-page .pg-tech-more .panel-title a[aria-expanded="true"]::before { content: "\2212"; } /* Fallback: the icon also follows the panel itself (open panels have the class "in"), without any script. */ body.pg-tech-page .pg-tech-more .fusion-panel:has(> .panel-collapse.in) .panel-title a::before { content: "\2212"; } body.pg-tech-page .pg-tech-more .toggle-content { padding: 16px 0 0 !important; border: 0 !important; } /* Content flows in one column. Two single figures in a row (figure, caption, figure, caption) sit side by side with * their captions beneath; the grid order puts the two figures first, then the two captions, then anything after. */ body.pg-tech-page .pg-tech-more .toggle-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } body.pg-tech-page .pg-tech-more .toggle-content > * { grid-column: 1 / -1; } body.pg-tech-page .pg-tech-more .toggle-content > p:has(> img):not(:has(> img + img)):has(+ p + p > img):not(:has(+ p + p > img + img)) { grid-column: 1; } body.pg-tech-page .pg-tech-more .toggle-content > p:has(> img):not(:has(> img + img)):has(+ p + p > img):not(:has(+ p + p > img + img)) + p { grid-column: 1; order: 1; } body.pg-tech-page .pg-tech-more .toggle-content > p:has(> img):not(:has(> img + img)):has(+ p + p > img):not(:has(+ p + p > img + img)) + p + p { grid-column: 2; } body.pg-tech-page .pg-tech-more .toggle-content > p:has(> img):not(:has(> img + img)):has(+ p + p > img):not(:has(+ p + p > img + img)) + p + p + p { grid-column: 2; order: 1; } body.pg-tech-page .pg-tech-more .toggle-content > p:has(> img):not(:has(> img + img)):has(+ p + p > img):not(:has(+ p + p > img + img)) + p + p + p ~ * { order: 2; } /* Inside an open card: text, then figures on light panels with their captions (the paragraph after a figure). */ body.pg-tech-page .pg-tech-more .toggle-content p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; color: var(--pg-ink); } body.pg-tech-page .pg-tech-more .toggle-content h4 { margin: 24px 0 12px; font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--pg-ink); } body.pg-tech-page .pg-tech-more .toggle-content > h4:first-child { margin-top: 0; } body.pg-tech-page .pg-tech-more .toggle-content ul { margin: 0 0 16px; padding-left: 20px; } body.pg-tech-page .pg-tech-more .toggle-content li { margin: 0 0 6px; font-size: 16px; line-height: 1.6; } body.pg-tech-page .pg-tech-more .toggle-content p:has(> img) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; width: fit-content; max-width: 100%; margin: 24px auto 0; padding: 16px; background: var(--pg-surface); border-radius: var(--pg-radius-md); box-sizing: border-box; } body.pg-tech-page .pg-tech-more .toggle-content p:has(> img) img { display: block; max-width: min(100%, 680px); height: auto; margin: 0; } body.pg-tech-page .pg-tech-more .toggle-content p:has(> img + img) { width: 100%; } body.pg-tech-page .pg-tech-more .toggle-content p:has(> img + img) img { flex: 0 1 auto; width: auto; max-width: calc((100% - 32px) / 3); max-height: 260px; } body.pg-tech-page .pg-tech-more .toggle-content p:has(> img) + p { max-width: 760px; margin: 12px auto 16px; font-size: 14px; line-height: 1.6; color: var(--pg-ink-muted); text-align: center; } body.pg-tech-page .pg-tech-more .toggle-content p:has(> img) + p strong, body.pg-tech-page .pg-tech-more .toggle-content p:has(> img) + p b { color: var(--pg-ink); } body.pg-tech-page .pg-tech-more .toggle-content table { width: 100%; margin: 16px 0 0; border-collapse: collapse; font-size: 15px; line-height: 1.6; } body.pg-tech-page .pg-tech-more .toggle-content th, body.pg-tech-page .pg-tech-more .toggle-content td { padding: 10px 12px; border: 1px solid var(--pg-border); vertical-align: top; text-align: left; } body.pg-tech-page .pg-tech-more .toggle-content thead th, body.pg-tech-page .pg-tech-more .toggle-content thead td { background: var(--pg-surface); } /* Forms and FAQ: each on its own gray panel at the same width, 48 px apart (AGENTS.md 3.11 "Forms on content pages"). * Every form looks the same: the surface-gray panel of the cards and FAQ, whatever background (photo, colour) the old * page gave its form container; white fields on the gray keep their borders and contrast. ------------------------ */ body.pg-tech-page .pg-tech-form.fusion-fullwidth { max-width: 1224px; margin: 48px auto 0 !important; padding: 48px 32px !important; background: var(--pg-surface) !important; border-radius: var(--pg-radius-md); overflow: hidden; box-sizing: border-box; scroll-margin-top: 110px; } body.pg-tech-page .pg-tech-form .fusion-column-wrapper, body.pg-tech-page .pg-tech-form .fusion-builder-row { background: transparent !important; } body.pg-tech-page .pg-tech-form > .fusion-builder-row { width: 100%; max-width: none; } body.pg-tech-page .pg-tech-faq.fusion-fullwidth { margin-top: 48px !important; } body.pg-tech-page .pg-tech-faq > .fusion-builder-row { background: var(--pg-surface); border-radius: var(--pg-radius-md); padding: 40px 32px !important; box-sizing: border-box; } body.pg-tech-page .pg-tech-faq > .fusion-builder-row > .fusion-layout-column { margin-top: 0 !important; } body.pg-tech-page .pg-tech-faq > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper { padding-top: 0 !important; } body.pg-tech-page .pg-tech-faq .fusion-column-wrapper > .fusion-text:first-child, body.pg-tech-page .pg-tech-faq .fusion-text h2 { margin-top: 0 !important; padding-top: 0 !important; } @media (max-width: 768px) { body.pg-tech-page .pg-tech-evidence__head h2, body.pg-tech-page .pg-tech-faq .fusion-text h2, body.pg-tech-page #content .pg-tech-form .fusion-text h2 { font-size: 24px !important; } body.pg-tech-page .pg-tech-intro__text ul { grid-template-columns: minmax(0, 1fr); } body.pg-tech-page .pg-tech-evidence.fusion-fullwidth { margin-top: 48px !important; padding: 32px 16px !important; border-radius: 0; } body.pg-tech-page .pg-tech-evidence > .fusion-builder-row { grid-template-columns: minmax(0, 1fr); } body.pg-tech-page .pg-tech-card > .fusion-column-wrapper { padding: 16px !important; } body.pg-tech-page .pg-tech-more .toggle-content table { display: block; max-width: 100%; overflow-x: auto; } body.pg-tech-page .pg-tech-more .toggle-content th, body.pg-tech-page .pg-tech-more .toggle-content td { min-width: 170px; } body.pg-tech-page .pg-tech-more .toggle-content th[scope="row"], body.pg-tech-page .pg-tech-more .toggle-content thead td:first-child { min-width: 110px; } body.pg-tech-page .pg-tech-more .toggle-content { grid-template-columns: minmax(0, 1fr); } body.pg-tech-page .pg-tech-more .toggle-content > * { grid-column: 1 / -1 !important; } body.pg-tech-page .pg-tech-more .toggle-content p:has(> img) { padding: 12px; } body.pg-tech-page .fusion-button.pg-tech-cta { width: 100%; box-sizing: border-box; } body.pg-tech-page .pg-tech-form.fusion-fullwidth { padding: 32px 16px !important; border-radius: 0; } body.pg-tech-page .pg-tech-faq > .fusion-builder-row { padding: 24px 16px !important; } } /* Summary-first pages beyond the Technology page (Technology sub-pages and Application pages, 2026-09-29; * Dev Docs/Design/technology_page_revamp/tools/summary_first.py). */ /* Intro heading kept visible when it differs from the banner title (same look as the section headings above). */ body.pg-tech-page .pg-tech-intro__heading { margin: 0 0 24px !important; } /* Caption under the intro figure: the figure captions' style inside cards (14 px, muted, centered). */ body.pg-tech-page .pg-tech-intro__caption p { margin: 0 auto 8px; max-width: 900px; font-size: 14px; line-height: 1.6; color: var(--pg-ink-muted); text-align: center; } body.pg-tech-page .pg-tech-intro__caption p strong, body.pg-tech-page .pg-tech-intro__caption p b { color: var(--pg-ink); } /* Overview figure shown at its own size (never enlarged past its pixel width), on the chart panel. */ body.pg-tech-page .pg-tech-chart--natural { width: 100%; max-width: none !important; } body.pg-tech-page .pg-tech-chart--natural img { width: auto; max-width: 100%; height: auto; } /* Other bands kept from the old page (for example product boxes): same 1,224 px rounded panel as the form. */ body.pg-tech-page .pg-tech-band.fusion-fullwidth { max-width: 1224px; margin: 48px auto 0 !important; padding-left: 32px !important; padding-right: 32px !important; border-radius: var(--pg-radius-md); overflow: hidden; box-sizing: border-box; } body.pg-tech-page .pg-tech-band > .fusion-builder-row { width: 100%; max-width: none; } /* Sub-heading inside intro text (for example a solution's tagline). */ body.pg-tech-page .pg-tech-intro__text h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--pg-ink); } body.pg-tech-page .pg-tech-solution.fusion-fullwidth { margin-top: 48px !important; } /* Customer quote: photo beside the quote on a light panel. */ body.pg-tech-page .pg-tech-quote-band.fusion-fullwidth { background: var(--pg-surface) !important; padding-top: 32px !important; padding-bottom: 32px !important; } body.pg-tech-page .pg-tech-quote { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 32px; align-items: center; } body.pg-tech-page .pg-tech-quote > p:first-child { margin: 0; } body.pg-tech-page .pg-tech-quote img { display: block; width: 100%; height: auto; border-radius: var(--pg-radius-md); } body.pg-tech-page .pg-tech-quote blockquote { margin: 0; padding: 0 0 0 24px; border-left: 4px solid var(--pg-purple); font-style: italic; font-size: 18px; line-height: 1.6; color: var(--pg-ink); background: none; } body.pg-tech-page .pg-tech-quote blockquote p { margin: 0 0 12px; } body.pg-tech-page .pg-tech-quote blockquote strong { font-style: normal; font-size: 15px; } /* Customer spotlight quote attribution (last paragraph with a bold name, then title lines): upright, quieter than the quote. */ body.pg-tech-page .pg-tech-band--spotlight .pg-tech-quote blockquote p:last-child:has(> strong:first-child) { margin: 16px 0 0; font-style: normal; font-size: 14px; line-height: 1.5; color: var(--pg-ink-muted); } body.pg-tech-page .pg-tech-band--spotlight .pg-tech-quote blockquote p:last-child:has(> strong:first-child) strong { color: var(--pg-ink); } /* Photo gallery (photo, caption, photo, caption): photos side by side with captions beneath; one column on phones. */ body.pg-tech-page .pg-tech-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; gap: 8px 32px; margin-top: 32px; margin-bottom: 24px !important; } body.pg-tech-page .pg-tech-gallery p { margin: 0 !important; } body.pg-tech-page .pg-tech-gallery img { display: block; max-width: 100%; height: auto; border-radius: var(--pg-radius-md); } body.pg-tech-page .pg-tech-gallery p:nth-child(even) { font-size: 14px !important; line-height: 1.5 !important; color: var(--pg-ink-muted); } body.pg-tech-page .pg-tech-band--spotlight .pg-tech-quote { margin-top: 32px; } /* Intro and FAQ width: 1,224 px like the panels, also on pages whose layout or page CSS makes them full width * (no-op on normal pages). */ body.pg-tech-page .pg-tech-intro > .fusion-builder-row, body.pg-tech-page .pg-tech-faq > .fusion-builder-row { max-width: 1224px; margin-left: auto !important; margin-right: auto !important; } /* Some older pages style every toggle in their page-level custom CSS (for example a "question" icon on ".panel-title * a:after" for their FAQ); the "Show the data" toggles keep their own look. */ body.pg-tech-page .pg-tech-more .panel-title a::after { content: none !important; display: none !important; } /* A customer quote inside a card. */ body.pg-tech-page .pg-tech-more .toggle-content blockquote { grid-column: 1 / -1; margin: 8px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--pg-purple); background: none; font-style: italic; color: var(--pg-ink); } body.pg-tech-page .pg-tech-more .toggle-content blockquote p { margin: 0 0 8px; } body.pg-tech-page .pg-tech-more .toggle-content blockquote strong { font-style: normal; } /* A second group of cards right after the first. */ body.pg-tech-page .pg-tech-evidence + .pg-tech-evidence.fusion-fullwidth { margin-top: 48px !important; } /* A short lead paragraph under a card group's heading. */ body.pg-tech-page .pg-tech-evidence__head p { max-width: 900px; margin: 16px auto 0; text-align: center; font-size: 18px; line-height: 1.6; color: var(--pg-ink); } /* Product highlight panel (container class pg-tech-highlight): icon, heading, a line of text and a button, on a soft * gradient in the product line's colour, matching the product sheets. Add one theme class next to pg-tech-highlight: * pg-tech-highlight--cleanplex (orange, also the default), pg-tech-highlight--umi (CleanPlex UMI, purple), * pg-tech-highlight--agritype (AgriType, green/teal). Dark text on the light gradient keeps full contrast; the solid * button keeps white text above 4.5:1. */ body.pg-tech-page .pg-tech-highlight { --pg-hl-bg: linear-gradient(120deg, #fff4ec 0%, #ffe8d9 45%, #fde3d3 100%); --pg-hl-bar: linear-gradient(90deg, var(--pg-orange-strong, #cc3d00), var(--pg-orange, #ff5000)); --pg-hl-btn: var(--pg-orange-strong, #cc3d00); --pg-hl-btn-hover: var(--pg-orange-deep, #a33000); } body.pg-tech-page .pg-tech-highlight--umi { --pg-hl-bg: linear-gradient(120deg, #f3eefb 0%, #e9e0f7 45%, #e2dcf5 100%); --pg-hl-bar: linear-gradient(90deg, var(--pg-purple, #330170), #7c4dcc); --pg-hl-btn: var(--pg-purple, #330170); --pg-hl-btn-hover: var(--pg-purple-hover, #4a1f8c); } body.pg-tech-page .pg-tech-highlight--agritype { --pg-hl-bg: linear-gradient(120deg, #e4f6ee 0%, #d2efe5 45%, #cbe9f0 100%); --pg-hl-bar: linear-gradient(90deg, #0f766e, #14b8a6); --pg-hl-btn: #0f766e; --pg-hl-btn-hover: #115e59; } body.pg-tech-page .pg-tech-highlight.fusion-fullwidth { max-width: 1224px; margin: 48px auto 0 !important; padding: 40px 32px !important; border-radius: var(--pg-radius-md); background: var(--pg-hl-bg) !important; box-sizing: border-box; overflow: hidden; } body.pg-tech-page .pg-tech-highlight > .fusion-builder-row { width: 100%; max-width: none; margin: 0 !important; } body.pg-tech-page .pg-tech-highlight .fusion-text p:first-child { margin: 0 0 16px; } body.pg-tech-page .pg-tech-highlight .fusion-text img { display: block; width: 56px; height: 56px; margin: 0; } body.pg-tech-page .pg-tech-highlight .fusion-text h2 { margin: 0 0 12px; font-size: 28px !important; line-height: 1.25; font-weight: 700; color: var(--pg-ink) !important; text-align: left; } body.pg-tech-page .pg-tech-highlight .fusion-text h2::after { content: ""; display: block; width: 56px; height: 4px; margin: 14px 0 0; border-radius: 2px; background: var(--pg-hl-bar); } body.pg-tech-page .pg-tech-highlight .fusion-text p { margin: 0 0 20px; font-size: 18px; line-height: 1.6; color: var(--pg-ink) !important; } body.pg-tech-page .pg-tech-highlight .fusion-button-wrapper { display: block; text-align: left !important; margin: 0 !important; } body.pg-tech-page .pg-tech-highlight .fusion-button.pg-tech-cta { background: var(--pg-hl-btn) !important; border: 0 !important; color: #fff !important; } body.pg-tech-page .pg-tech-highlight .fusion-button.pg-tech-cta .fusion-button-text { color: #fff !important; } body.pg-tech-page .pg-tech-highlight .fusion-button.pg-tech-cta:hover, body.pg-tech-page .pg-tech-highlight .fusion-button.pg-tech-cta:focus-visible { background: var(--pg-hl-btn-hover) !important; } /* A secondary form in a disclosure (Avada Toggle, class pg-tech-form-toggle; AGENTS.md 3.11 "Forms on content pages"): * the toggle title is a secondary (purple outline) button with a chevron, since the page's main form stays visible. * Same pattern as the Store's pg-store-form-toggle (store-pages.css), which is the area's primary button there. */ body.pg-tech-page .pg-tech-form-toggle .panel-group, body.pg-tech-page .pg-tech-form-toggle .fusion-panel, body.pg-tech-page .pg-tech-form-toggle .panel-heading, body.pg-tech-page .pg-tech-form-toggle .panel-body { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } body.pg-tech-page .pg-tech-form-toggle .panel-title { margin: 8px 0 0 !important; padding: 0 !important; line-height: 1.3 !important; } body.pg-tech-page .pg-tech-form-toggle .panel-title a { display: inline-flex !important; align-items: center; gap: 8px; min-height: 48px; padding: 12px 28px !important; border: 2px solid var(--pg-purple) !important; border-radius: var(--pg-radius-sm); background: var(--pg-white, #fff) !important; color: var(--pg-purple) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.04em; text-decoration: none; text-transform: uppercase; } body.pg-tech-page .pg-tech-form-toggle .panel-title a:hover { background: var(--pg-purple) !important; color: var(--pg-white, #fff) !important; } body.pg-tech-page .pg-tech-form-toggle .panel-title a:focus-visible { outline: 3px solid var(--pg-purple-tint); outline-offset: 2px; } body.pg-tech-page .pg-tech-form-toggle .fusion-toggle-heading { margin: 0 !important; padding: 0 !important; color: inherit !important; } body.pg-tech-page .pg-tech-form-toggle .fusion-toggle-icon-wrapper { display: none !important; } body.pg-tech-page .pg-tech-form-toggle .panel-title a::before { content: none !important; } body.pg-tech-page .pg-tech-form-toggle .panel-title a::after { content: ""; position: static !important; left: auto; top: auto; flex: none; width: 8px; height: 8px; margin: -4px 0 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; } body.pg-tech-page .pg-tech-form-toggle .panel-title a[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); } body.pg-tech-page .pg-tech-form-toggle .panel-body { padding-top: 24px !important; } /* Old page markup gives the form's intro paragraph an inline 80px bottom margin (room for the open form); with the form * collapsed that leaves a gap above the button. On phones the button spans the column so its label fits. */ body.pg-tech-page .fusion-fullwidth:has(.pg-tech-form-toggle) .fusion-text p { margin-bottom: 16px !important; } @media (max-width: 767px) { body.pg-tech-page .pg-tech-form-toggle .panel-title a { display: flex !important; justify-content: center; width: 100%; box-sizing: border-box; padding: 12px 16px !important; text-align: center; } } /* Old page-level CSS on some pages forces every section to another width with a long selector and !important (for * example Pharmacogenomics: ".fusion-fullwidth.fullwidth-box.nonhundred-percent-fullwidth…{max-width:1400px * !important}"). The panels keep the shared 1,224 px width; #content outranks those selectors. */ body.pg-tech-page #content :is(.pg-tech-evidence, .pg-tech-form, .pg-tech-band, .pg-tech-highlight).fusion-fullwidth { max-width: 1224px !important; } /* Three cards: one row of three on desktop (modifier class on the evidence container); an open card spans the row. */ body.pg-tech-page .pg-tech-evidence--thirds > .fusion-builder-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1024px) { body.pg-tech-page .pg-tech-evidence--thirds > .fusion-builder-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { body.pg-tech-page .pg-tech-evidence--thirds > .fusion-builder-row { grid-template-columns: minmax(0, 1fr); } body.pg-tech-page .pg-tech-intro__heading { margin-bottom: 16px !important; } body.pg-tech-page .pg-tech-highlight.fusion-fullwidth { padding: 28px 16px !important; border-radius: 0; } body.pg-tech-page .pg-tech-highlight .fusion-text h2 { font-size: 24px !important; } body.pg-tech-page .pg-tech-quote { grid-template-columns: minmax(0, 1fr); gap: 16px; } body.pg-tech-page .pg-tech-quote img { max-width: 280px; margin: 0 auto; } body.pg-tech-page .pg-tech-gallery { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } body.pg-tech-page .pg-tech-gallery p:nth-child(even) { margin-bottom: 16px !important; } body.pg-tech-page .pg-tech-band.fusion-fullwidth { padding-left: 16px !important; padding-right: 16px !important; border-radius: 0; } } /* Text standard for summary-first pages (AGENTS.md 3.11, Tao 2026-09-29): one line height for body text so every page * reads the same. Montserrat (the site font); paragraphs and list items at line-height 1.6 (readable, above the WCAG * 1.5 minimum); intro and highlight text 18 px, card, opened-card and FAQ text 16 px; captions 14 px at 1.5. * !important because some pages' own custom CSS forces other values ("div p { line-height: 24px !important }", * ".entry-content.clear p { font-family: Arial !important; font-size: 16px !important }"). Scoped to these parts only; * testimonials and forms keep their own styles. */ body.pg-tech-page .pg-tech-intro__text p, body.pg-tech-page .pg-tech-intro__text li, body.pg-tech-page .pg-tech-highlight .fusion-text p, body.pg-tech-page .pg-tech-evidence__head p { font-family: var(--pg-font) !important; font-size: 18px !important; line-height: 1.6 !important; } body.pg-tech-page .pg-tech-card > .fusion-column-wrapper > .fusion-text p, body.pg-tech-page .pg-tech-more .toggle-content p, body.pg-tech-page .pg-tech-more .toggle-content li, body.pg-tech-page .pg-tech-faq .panel-body p, body.pg-tech-page .pg-tech-faq .panel-body li, body.pg-tech-page .pg-tech-faq .toggle-content p { font-family: var(--pg-font) !important; font-size: 16px !important; line-height: 1.6 !important; } body.pg-tech-page .pg-tech-intro__caption p, body.pg-tech-page .pg-tech-more .toggle-content p:has(> img) + p { font-family: var(--pg-font) !important; font-size: 14px !important; line-height: 1.5 !important; } body.pg-tech-page .pg-tech-quote blockquote p { font-family: var(--pg-font) !important; line-height: 1.6 !important; } /* Some page CSS sets list items through an ID ("div#primary ul li { line-height: 24px !important }"), which outranks the * class rules above; the same values with #primary. */ body.pg-tech-page #primary .pg-tech-intro__text li { font-size: 18px !important; line-height: 1.6 !important; } body.pg-tech-page #primary .pg-tech-more .toggle-content li, body.pg-tech-page #primary .pg-tech-faq .panel-body li { font-size: 16px !important; line-height: 1.6 !important; } /* Layout standard (AGENTS.md 3.11 "Section layout"): one text edge and one spacing system on every summary-first page, * whatever the old page CSS or copied Builder settings say. ------------------------------------------------------ */ /* 1. One text edge: each section's content starts 32 px inside the shared 1,224 px column (16 px on phones), the same * line as the panels' content. The FAQ panel spans the column like the others (old page CSS narrowed it). */ body.pg-tech-page #content .pg-tech-intro > .fusion-builder-row { padding-left: 32px !important; padding-right: 32px !important; box-sizing: border-box; } body.pg-tech-page #content .pg-tech-faq.fusion-fullwidth { max-width: 1224px !important; width: auto !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } body.pg-tech-page #content .pg-tech-faq > .fusion-builder-row { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } body.pg-tech-page #content .pg-tech-faq > .fusion-builder-row > .fusion-layout-column { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; float: none; } /* 2. No stray blank space: old column margins/paddings and first/last element margins inside a section are reset, so * the section's own padding and the 48-64 px between sections are the only vertical spacing. Hidden: the divider * lines old form sections used, empty paragraphs. */ body.pg-tech-page #content :is(.pg-tech-intro, .pg-tech-band, .pg-tech-form, .pg-tech-faq, .pg-tech-highlight) > .fusion-builder-row > .fusion-layout-column { margin-top: 0 !important; margin-bottom: 0 !important; } body.pg-tech-page #content :is(.pg-tech-intro, .pg-tech-form, .pg-tech-faq, .pg-tech-highlight) > .fusion-builder-row > .fusion-layout-column, body.pg-tech-page #content :is(.pg-tech-intro, .pg-tech-form, .pg-tech-faq, .pg-tech-highlight) > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } body.pg-tech-page #content :is(.pg-tech-form, .pg-tech-faq) .fusion-column-wrapper, body.pg-tech-page #content :is(.pg-tech-form, .pg-tech-faq) .fusion-column-wrapper > .fusion-text { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } body.pg-tech-page #content :is(.pg-tech-intro, .pg-tech-band, .pg-tech-form, .pg-tech-faq, .pg-tech-highlight) .fusion-column-wrapper > :last-child, body.pg-tech-page #content :is(.pg-tech-intro, .pg-tech-band, .pg-tech-form, .pg-tech-faq, .pg-tech-highlight) .fusion-column-wrapper > :has(+ .fusion-clearfix:last-child), body.pg-tech-page #content :is(.pg-tech-intro, .pg-tech-band, .pg-tech-form, .pg-tech-faq, .pg-tech-highlight) .fusion-text > :last-child { margin-bottom: 0 !important; } body.pg-tech-page #content .pg-tech-form > .fusion-builder-row { padding-top: 0 !important; padding-bottom: 0 !important; } body.pg-tech-page #content .pg-tech-form .gform_wrapper { margin-top: 0 !important; margin-bottom: 0 !important; } body.pg-tech-page #content .pg-tech-form .gform_heading { margin: 0 !important; } /* Form fields start on the panel's text edge: old page CSS indents the form body, and the multi-column add-on indents its * inner field lists. */ body.pg-tech-page #content .pg-tech-form .gform_body { padding-left: 0 !important; padding-right: 0 !important; } body.pg-tech-page #content .pg-tech-form .gform_body ul.flex-wrapper { margin-left: 0 !important; } body.pg-tech-page #content .pg-tech-form :is(.fusion-layout-column, .fusion-column-wrapper, .fusion-text) { padding-left: 0 !important; padding-right: 0 !important; } /* FAQ lists span the panel whatever they are built with (Avada Toggles or an old Code Block list); a list with question * icons keeps its own indent so the icon sits on the shared text edge and the question just after it. */ body.pg-tech-page #content .pg-tech-faq .fusion-column-wrapper { padding-left: 0 !important; padding-right: 0 !important; } body.pg-tech-page #content .pg-tech-faq :is(.faq-container, .fusion-accordian) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } body.pg-tech-page #content .pg-tech-faq .faq-container { padding-left: 0 !important; padding-right: 0 !important; } body.pg-tech-page #content .pg-tech-faq .faq__list { margin-left: 0 !important; padding-left: 32px !important; } body.pg-tech-page #content .pg-tech-faq section.faq { margin-left: 0 !important; margin-right: 0 !important; } body.pg-tech-page #content .pg-tech-faq .faq__list li .title::after { background-color: transparent !important; } /* FAQ split into two Code Block lists (desktop columns faq-desktop, stacked in the panel): no extra space between the * lists, and the first list's last question keeps the divider so the two read as one list. */ body.pg-tech-page #content .pg-tech-faq:has(.faq-desktop) section.faq { padding-top: 0 !important; padding-bottom: 0 !important; } body.pg-tech-page #content .pg-tech-faq:has(.faq-desktop) .faq__list { margin-bottom: 0 !important; } body.pg-tech-page #content .pg-tech-faq .faq-desktop:has(+ .faq-desktop) .faq__list > li:last-child { border-bottom: 1px solid #e5e4e3 !important; } body.pg-tech-page #content .pg-tech-highlight .fusion-text { margin-bottom: 20px !important; } body.pg-tech-page #content :is(.pg-tech-intro, .pg-tech-band, .pg-tech-form, .pg-tech-faq, .pg-tech-highlight) .fusion-column-wrapper > :first-child, body.pg-tech-page #content :is(.pg-tech-intro, .pg-tech-band, .pg-tech-form, .pg-tech-faq, .pg-tech-highlight) .fusion-text > :first-child { margin-top: 0 !important; } body.pg-tech-page #content :is(.pg-tech-intro, .pg-tech-band, .pg-tech-form, .pg-tech-faq, .pg-tech-highlight) .fusion-text p:empty { display: none; } body.pg-tech-page #content :is(.pg-tech-form, .pg-tech-band) .fusion-separator, body.pg-tech-page #content :is(.pg-tech-form, .pg-tech-band) .fusion-sep-clear { display: none !important; } @media (max-width: 767px) { body.pg-tech-page #content .pg-tech-intro > .fusion-builder-row { padding-left: 16px !important; padding-right: 16px !important; margin-left: 0 !important; margin-right: 0 !important; width: auto !important; } body.pg-tech-page #content .pg-tech-intro.fusion-fullwidth { padding-left: 0 !important; padding-right: 0 !important; } /* Phones: panels run to the screen edge (square corners) and text sits 16 px in on every page; the theme's 20 px * content gutter applied on some pages only (others' page CSS removed it). */ body.pg-tech-page #content > .ast-container { padding-left: 0 !important; padding-right: 0 !important; } } /* 3. Form heading (AGENTS.md 3.11): one h2 naming the action, styled like the other section headings (above), an * optional centered lead, then the form; a collapsed secondary form's button sits centered under its heading. */ body.pg-tech-page #content .pg-tech-form .fusion-text:has(> h2) { margin: 0 0 32px !important; } body.pg-tech-page #content .pg-tech-form .fusion-text:has(> h2) p { max-width: 900px; margin: 12px auto 0 !important; text-align: center; font-size: 18px !important; line-height: 1.6 !important; color: var(--pg-ink) !important; font-weight: 400 !important; } body.pg-tech-page #content .pg-tech-form-toggle .panel-heading { text-align: center; } /* 4. One font: text in the rebuilt sections is always the site font. Old inline styles from pasted content (Calibri, * Arial, or 'Montserrat', a name some servers don't have, so it fell back to a serif font) are overridden; icon * elements keep their icon fonts. */ body.pg-tech-page #content [class*="pg-tech-"] :is(p, span, h1, h2, h3, h4, h5, h6, li, a, strong, b, em, td, th, blockquote, label):not([class*="icon"]):not([class*="fa-"]):not(i) { font-family: var(--pg-font) !important; } /* 5. Section gaps are measured as seen: from the last visible content or panel edge of one section to the first of the * next, 48-64 px. The FAQ panel is its inner row, so the FAQ container itself has no vertical padding (old page * settings gave some 80-90 px); link boxes in a band keep no bottom margin after the last row. */ body.pg-tech-page #content .pg-tech-faq.fusion-fullwidth { padding-top: 0 !important; padding-bottom: 0 !important; } body.pg-tech-page #content .pg-tech-band .content-box-column:not(:has(~ .content-box-column)), body.pg-tech-page #content .pg-tech-band .fusion-content-boxes { margin-bottom: 0 !important; } @media (min-width: 800px) { body.pg-tech-page #content .pg-tech-band .fusion-content-boxes .content-box-column { margin-bottom: 0 !important; } } /* A "Read more" toggle followed by more content (for example the introduction's Product Highlight) keeps 24 px before it. */ body.pg-tech-page #content :is(.pg-tech-intro, .pg-tech-solution) .fusion-accordian:not(:last-child) { margin-bottom: var(--pg-space-3) !important; } /* 6. FAQ questions: one marker each. The question icon sits on the text edge and the question starts 32 px in (the same * as the list-style FAQs); Avada's own open/close icon always sits at the right end, never on top of the question * icon. */ body.pg-tech-page #content .pg-tech-faq :is(.fusion-accordian, .panel-group) { padding-left: 0 !important; margin-left: 0 !important; } body.pg-tech-page #content .pg-tech-faq .fusion-accordian .panel-title a { position: relative; display: flex !important; flex-direction: row !important; align-items: flex-start; gap: var(--pg-space-2); padding-left: 32px !important; margin-left: 0 !important; } body.pg-tech-page #content .pg-tech-faq .fusion-accordian .panel-title a::after { left: 0 !important; margin-left: 0 !important; } body.pg-tech-page #content .pg-tech-faq .fusion-accordian .panel-title a .fusion-toggle-heading { order: 1; flex: 1 1 auto; margin: 0 !important; padding: 0 !important; } body.pg-tech-page #content .pg-tech-faq .fusion-accordian .panel-title a .fusion-toggle-icon-wrapper { order: 2; flex: none; position: static !important; margin: 4px 0 0 auto !important; } body.pg-tech-page #content .pg-tech-faq .fusion-accordian .panel-title a .fusion-toggle-icon-wrapper i::before { position: static !important; left: auto !important; } /* The open/close indicator is a plain arrow on every FAQ: no filled box behind it (old page CSS clears the box only for * accordion IDs copied from other pages, so Avada's dark box showed on Liquid Biopsy). */ body.pg-tech-page #content .pg-tech-faq .fusion-accordian .panel-title .fa-fusion-box { background-color: transparent !important; border-color: transparent !important; } /* 7. Link boxes in a band (Avada Content Boxes, for example "Explore pre-optimized panels … LEARN MORE"): boxes in a row * are the same height and their links line up at the bottom; the band sits on white (design guideline: white or * surface-gray backgrounds only), so an old photo background behind the gray boxes is removed. */ body.pg-tech-page #content .pg-tech-band:has(.fusion-content-boxes).fusion-fullwidth { background-image: none !important; } body.pg-tech-page #content .pg-tech-band .fusion-content-boxes { display: flex !important; flex-wrap: wrap; } body.pg-tech-page #content .pg-tech-band .fusion-content-boxes::before, body.pg-tech-page #content .pg-tech-band .fusion-content-boxes::after { display: none !important; } body.pg-tech-page #content .pg-tech-band .content-box-column { display: flex !important; float: none !important; } body.pg-tech-page #content .pg-tech-band .content-box-column > .content-box-wrapper { display: flex !important; flex-direction: column; flex: 1 1 auto; height: auto !important; } body.pg-tech-page #content .pg-tech-band .content-box-wrapper .content-container { display: flex; flex-direction: column; flex: 1 1 auto; } body.pg-tech-page #content .pg-tech-band .content-box-wrapper .content-container > :last-child:has(a) { margin-top: auto !important; padding-top: var(--pg-space-2); } /* Box edges sit on the text edge: a 24 px gap between boxes instead of Avada's column padding and row margins. */ body.pg-tech-page #content .pg-tech-band .fusion-content-boxes { gap: var(--pg-space-3); margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.pg-tech-page #content .pg-tech-band .fusion-content-boxes .content-box-column { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: auto !important; flex: 1 1 100%; } body.pg-tech-page #content .pg-tech-band .fusion-content-boxes.fusion-columns-2 .content-box-column { flex-basis: calc((100% - var(--pg-space-3)) / 2); max-width: calc((100% - var(--pg-space-3)) / 2); } body.pg-tech-page #content .pg-tech-band .fusion-content-boxes.fusion-columns-3 .content-box-column { flex-basis: calc((100% - 2 * var(--pg-space-3)) / 3); max-width: calc((100% - 2 * var(--pg-space-3)) / 3); } @media (max-width: 799px) { body.pg-tech-page #content .pg-tech-band .fusion-content-boxes { gap: var(--pg-space-2); } body.pg-tech-page #content .pg-tech-band > .fusion-builder-row > .fusion-layout-column, body.pg-tech-page #content .pg-tech-band > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } body.pg-tech-page #content .pg-tech-band .fusion-content-boxes .content-box-column { flex-basis: 100% !important; max-width: 100% !important; margin-bottom: 0 !important; } } /* 8. Link boxes in a band (for example the Application sub-pages' "Resources"): up to four in a row (two on tablets), * standard type: 18 px bold heading, 16 px text, the link in bold purple; surface-gray fill, 12 px corners. */ body.pg-tech-page #content .pg-tech-band .fusion-content-boxes.fusion-columns-4 .content-box-column { flex-basis: calc((100% - 3 * var(--pg-space-3)) / 4); max-width: calc((100% - 3 * var(--pg-space-3)) / 4); } @media (min-width: 800px) and (max-width: 1100px) { body.pg-tech-page #content .pg-tech-band .fusion-content-boxes.fusion-columns-4 .content-box-column { flex-basis: calc((100% - var(--pg-space-3)) / 2); max-width: calc((100% - var(--pg-space-3)) / 2); } } body.pg-tech-page #content .pg-tech-band .content-box-wrapper { padding: var(--pg-space-3) !important; background: var(--pg-surface) !important; border-radius: var(--pg-radius-md) !important; } body.pg-tech-page #content .pg-tech-band .content-box-heading { margin: 0 0 var(--pg-space-1) !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; color: var(--pg-ink) !important; } body.pg-tech-page #content .pg-tech-band .content-box-wrapper .heading { margin-bottom: 0 !important; } body.pg-tech-page #content .pg-tech-band .content-container, body.pg-tech-page #content .pg-tech-band .content-container :is(p, span) { font-size: 16px !important; line-height: 1.6 !important; color: var(--pg-ink) !important; } body.pg-tech-page #content .pg-tech-band .content-container a, body.pg-tech-page #content .pg-tech-band .fusion-read-more { color: var(--pg-purple) !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 0.04em; text-transform: uppercase; } body.pg-tech-page #content .pg-tech-band .content-container a:hover { color: var(--pg-orange-strong) !important; } /* "Resources" band: a Library sidebar column kept as a live reference spans the band, and a one-column box list is * laid out as one row (phones: one per row). */ body.pg-tech-page #content .pg-tech-band--resources > .fusion-builder-row > .fusion-layout-column { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; } body.pg-tech-page #content .pg-tech-band--resources .fusion-content-boxes.fusion-columns-1 .content-box-column { flex: 1 1 0; min-width: 0; max-width: none; } @media (min-width: 800px) and (max-width: 1100px) { body.pg-tech-page #content .pg-tech-band--resources .fusion-content-boxes.fusion-columns-1 .content-box-column { flex: 0 0 calc((100% - var(--pg-space-3)) / 2); max-width: calc((100% - var(--pg-space-3)) / 2); } } /* Avada's clear element inside a box row would count as a fifth item (an extra gap): hidden. */ body.pg-tech-page #content .pg-tech-band .fusion-content-boxes > :not(.content-box-column) { display: none !important; } /* Resource links as a list (pg-tech-band--links): a wrapping row of secondary link buttons (purple outline). */ body.pg-tech-page #content .pg-tech-band--links .fusion-text ul { display: flex; flex-wrap: wrap; gap: var(--pg-space-2); margin: 0 0 var(--pg-space-3) !important; padding: 0 !important; list-style: none; } body.pg-tech-page #content .pg-tech-band--links .fusion-text ul li { margin: 0 !important; padding: 0 !important; list-style: none; } body.pg-tech-page #content .pg-tech-band--links .fusion-text ul li::before { content: none !important; } body.pg-tech-page #content .pg-tech-band--links .fusion-text ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border: 2px solid var(--pg-purple); border-radius: var(--pg-radius-sm); color: var(--pg-purple) !important; font-size: 14px !important; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none !important; box-sizing: border-box; } body.pg-tech-page #content .pg-tech-band--links .fusion-text ul a:hover, body.pg-tech-page #content .pg-tech-band--links .fusion-text ul a:focus-visible { background: var(--pg-purple); color: var(--pg-white) !important; } /* Menu pages rollout (2026-09-30; Dev Docs/Design/menu-pages-plan.md). -------------------------------------------- */ /* Secondary call to action (pg-tech-cta--secondary, for example "Start Designing Now" beside the page's main form * button): purple outline, the same as the home page's pg-btn--secondary. Product Highlight panels keep their own * solid button (their rule is more specific). */ body.pg-tech-page .fusion-button.pg-tech-cta.pg-tech-cta--secondary { background: transparent !important; box-shadow: inset 0 0 0 2px var(--pg-purple) !important; } body.pg-tech-page .fusion-button.pg-tech-cta.pg-tech-cta--secondary .fusion-button-text { color: var(--pg-purple) !important; } body.pg-tech-page .fusion-button.pg-tech-cta.pg-tech-cta--secondary:hover, body.pg-tech-page .fusion-button.pg-tech-cta.pg-tech-cta--secondary:focus-visible { background: var(--pg-purple) !important; } body.pg-tech-page .fusion-button.pg-tech-cta.pg-tech-cta--secondary:hover .fusion-button-text, body.pg-tech-page .fusion-button.pg-tech-cta.pg-tech-cta--secondary:focus-visible .fusion-button-text { color: var(--pg-white) !important; } /* Link boxes: text inside a link keeps the link colour (old boxes wrap link text in spans, which the box text colour * above would otherwise turn dark). */ body.pg-tech-page #content .pg-tech-band .content-container a :is(span, strong, b, em) { color: inherit !important; font-size: inherit !important; } /* A lead paragraph under a band's section heading (for example "Available Reference Genomes", ParagonDesigner): * centred under the heading, 18 px, like the card groups' lead. */ body.pg-tech-page #content :is(.pg-tech-band--genomes, .pg-tech-band--designer) .fusion-text:first-child h2 + p { max-width: 900px; margin: 0 auto !important; text-align: center; font-size: 18px !important; line-height: 1.6 !important; color: var(--pg-ink); } body.pg-tech-page #content .pg-tech-band--designer .fusion-button-wrapper { display: block; margin-top: var(--pg-space-3) !important; text-align: center; } body.pg-tech-page #content .pg-tech-band--genomes .pg-tech-more { margin-top: var(--pg-space-3) !important; } /* Reference genome tiles (hand-written grid, class species-grid-container, inside a disclosure): the tiles keep their * own grid; the card rules for figures, captions and paragraphs do not apply to them. The tiles are not links, so no * hover lift. Group labels (Animals, Plant, Disease) are h3. */ body.pg-tech-page #content .pg-tech-more .toggle-content > h3 { margin: var(--pg-space-3) 0 var(--pg-space-2); font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--pg-ink); } body.pg-tech-page #content .pg-tech-more .toggle-content > h3:first-child { margin-top: 0; } body.pg-tech-page #content .pg-tech-more .species-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--pg-space-2); width: 100%; margin: 0 !important; padding: 0 !important; } body.pg-tech-page #content .pg-tech-more .species-grid-container .grid-item { padding: var(--pg-space-2) var(--pg-space-1); background: var(--pg-surface); border-radius: var(--pg-radius-md); text-align: center; transform: none !important; box-shadow: none !important; } body.pg-tech-page #content .pg-tech-more .species-grid-container p:has(> img) { display: block; width: auto; max-width: none; margin: 0 0 var(--pg-space-1) !important; padding: 0; background: none; border-radius: 0; } body.pg-tech-page #content .pg-tech-more .species-grid-container img { display: block; width: 56px; height: auto; max-width: 100%; margin: 0 auto; } body.pg-tech-page #content .pg-tech-more .species-grid-container h4 { margin: 0 !important; font-size: 16px !important; line-height: 1.3 !important; font-weight: 700; color: var(--pg-ink) !important; } body.pg-tech-page #content .pg-tech-more .species-grid-container p { max-width: none; margin: 4px 0 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--pg-ink-muted) !important; text-align: center; overflow-wrap: anywhere; } body.pg-tech-page #content .pg-tech-more .species-grid-container .blank-item { display: none !important; } /* A card without a disclosure ends on its text: no margin under its last paragraph (the card's padding is the space). */ body.pg-tech-page .pg-tech-card:not(:has(.pg-tech-more)) > .fusion-column-wrapper > .fusion-text > :last-child { margin-bottom: 0 !important; } /* A link under a customer quote (for example "See more customer success stories"): 24 px below the quote. */ body.pg-tech-page #content .pg-tech-quote + .fusion-text:not(.pg-tech-gallery) { margin-top: var(--pg-space-3) !important; } /* Cards shown in full (no disclosure): a link inside running text reads as part of the sentence (text size, normal * weight, underlined); a link line at the end of the card is its action, in the card link style, and the actions of * cards in one row line up at the bottom (AGENTS.md 3.11 "Icons, labels": same height, actions at the bottom). */ body.pg-tech-page .pg-tech-card > .fusion-column-wrapper > .fusion-text p:not(:last-child) a { font-size: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } body.pg-tech-page .pg-tech-card:not(:has(.pg-tech-more)) > .fusion-column-wrapper > .fusion-text { display: flex; flex-direction: column; flex: 1 1 auto; } body.pg-tech-page .pg-tech-card:not(:has(.pg-tech-more)) > .fusion-column-wrapper > .fusion-text > p:last-child:has(> a:only-child) { margin-top: auto; padding-top: var(--pg-space-1); } /* Customer case lists (pg-tech-band--cases, for example Customer Success Stories): the case lines under a logo * ("Top ... in the US", "Application: ...", "Challenge: ...") are separate lines in one Text element: 8 px apart. */ body.pg-tech-page #content .pg-tech-band--cases .fusion-text > :is(div, p) + :is(div, p) { margin-top: var(--pg-space-1) !important; } /* A table in a band (pg-tech-band--table, for example the Custom Panel Specifications): the same table look as inside * cards (15 px, bordered cells, gray header row), row names bold on the left; its own scroll region on narrow phones * (no page-wide horizontal scroll). */ body.pg-tech-page #content .pg-tech-band--table .fusion-text table { width: 100%; margin: 0; border-collapse: collapse; font-size: 15px; line-height: 1.6; color: var(--pg-ink); } body.pg-tech-page #content .pg-tech-band--table .fusion-text :is(th, td) { padding: 10px 12px; border: 1px solid var(--pg-border); vertical-align: top; text-align: left; font-family: var(--pg-font) !important; } body.pg-tech-page #content .pg-tech-band--table .fusion-text thead :is(th, td) { background: var(--pg-surface); font-weight: 700; } body.pg-tech-page #content .pg-tech-band--table .fusion-text tbody th { width: 28%; font-weight: 700; } body.pg-tech-page #content .pg-tech-band--table .fusion-text tbody tr:nth-child(even) :is(th, td) { background: #fafbfd; } @media (max-width: 767px) { body.pg-tech-page #content .pg-tech-band--table .fusion-text table { display: block; max-width: 100%; overflow-x: auto; font-size: 14px; } body.pg-tech-page #content .pg-tech-band--table .fusion-text :is(th, td) { min-width: 120px; padding: 8px 10px; } } /* Two intro buttons (main action + secondary, for example "View 100+ Pre-Designed NGS Panels" and "Request a Free * Consultation"): side by side and centred on wide screens, stacked on phones. */ body.pg-tech-page .pg-tech-intro .fusion-column-wrapper:has(> .fusion-button-wrapper .pg-tech-cta--secondary) { display: flex !important; flex-wrap: wrap; justify-content: center; column-gap: var(--pg-space-2); } body.pg-tech-page .pg-tech-intro .fusion-column-wrapper:has(> .fusion-button-wrapper .pg-tech-cta--secondary) > :not(.fusion-button-wrapper) { flex: 0 0 100%; } @media (max-width: 767px) { body.pg-tech-page .pg-tech-intro .fusion-column-wrapper:has(> .fusion-button-wrapper .pg-tech-cta--secondary) > .fusion-button-wrapper { flex: 0 0 100%; } body.pg-tech-page .pg-tech-intro .fusion-button-wrapper:has(.pg-tech-cta) + .fusion-button-wrapper:has(.pg-tech-cta--secondary) { margin-top: var(--pg-space-2) !important; } } /* Lists of toggles in a band (pg-tech-band--lists, for example the Pre-Designed Panels gene lists): rows like the FAQ * questions: 18 px titles in the ink colour on the text edge, the open/close box at the right end of the row. */ body.pg-tech-page #content .pg-tech-band--lists .fusion-accordian .panel-title a { display: flex !important; align-items: center; gap: var(--pg-space-2); padding: 14px 0 !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--pg-ink) !important; } body.pg-tech-page #content .pg-tech-band--lists .fusion-accordian .panel-title a:hover, body.pg-tech-page #content .pg-tech-band--lists .fusion-accordian .panel-title a:focus-visible { color: var(--pg-purple) !important; } body.pg-tech-page #content .pg-tech-band--lists .fusion-accordian .fusion-toggle-heading { order: 1; flex: 1 1 auto; margin: 0 !important; padding: 0 !important; } body.pg-tech-page #content .pg-tech-band--lists .fusion-accordian .fusion-toggle-icon-wrapper { order: 2; flex: none; position: static !important; margin: 0 0 0 auto !important; color: var(--pg-purple) !important; } body.pg-tech-page #content .pg-tech-band--lists .fusion-accordian .fusion-toggle-icon-wrapper i { color: var(--pg-purple) !important; } body.pg-tech-page #content .pg-tech-band--lists .fusion-accordian .toggle-content { padding: 0 0 var(--pg-space-3) !important; font-size: 16px; line-height: 1.6; } body.pg-tech-page .pg-tech-intro .fusion-column-wrapper:has(> .fusion-button-wrapper .pg-tech-cta--secondary) > .fusion-button-wrapper { width: auto; margin-left: 0 !important; margin-right: 0 !important; } body.pg-tech-page #content .pg-tech-band--lists .fusion-accordian .fusion-toggle-icon-wrapper i { background-color: var(--pg-purple) !important; border-color: var(--pg-purple) !important; color: var(--pg-white) !important; } /* Library cards (pg-tech-evidence--library: Conference Posters, Technical Notes, Application Notes): a thumbnail on a * light frame of one height at the top of each card (posters are tall, notes wide: the whole image shows), then the * title, an optional description and the item's link at the bottom. */ body.pg-tech-page .pg-tech-evidence--library .pg-tech-card > .fusion-column-wrapper > .fusion-text > p:first-child:has(> img) { display: flex; align-items: center; justify-content: center; height: 220px; margin: 0 0 var(--pg-space-2) !important; padding: var(--pg-space-2); background: var(--pg-surface); border-radius: var(--pg-radius-md); box-sizing: border-box; } body.pg-tech-page .pg-tech-evidence--library .pg-tech-card > .fusion-column-wrapper > .fusion-text > p:first-child > img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; margin: 0; object-fit: contain; } body.pg-tech-page .pg-tech-evidence--library .pg-tech-card > .fusion-column-wrapper > .fusion-text h3 { font-size: 18px; line-height: 1.4; } /* ParagonSupport contact panel (pg-tech-band--support, Library element 8235 below a library's items): the shared * column spans the band, centred on a light panel. */ body.pg-tech-page #content .pg-tech-band--support.fusion-fullwidth { padding-top: var(--pg-space-5) !important; padding-bottom: var(--pg-space-5) !important; background: var(--pg-surface) !important; text-align: center; } body.pg-tech-page #content .pg-tech-band--support > .fusion-builder-row > .fusion-layout-column { width: 100% !important; max-width: none !important; margin: 0 !important; float: none !important; } body.pg-tech-page #content .pg-tech-band--support .fusion-text { font-size: 16px; line-height: 1.6; } body.pg-tech-page #content .pg-tech-band--support .fusion-text strong { display: block; margin-top: var(--pg-space-2); color: var(--pg-ink); } body.pg-tech-page #content .pg-tech-band--support .fusion-text a { color: var(--pg-purple); } @media (max-width: 767px) { body.pg-tech-page #content .pg-tech-band--support.fusion-fullwidth { padding-top: var(--pg-space-4) !important; padding-bottom: var(--pg-space-4) !important; } } body.pg-tech-page #content .pg-tech-band--support h2, body.pg-tech-page #content .pg-tech-band--support h2 * { margin: 0 !important; font-size: 24px !important; line-height: 1.3 !important; font-weight: 700 !important; color: var(--pg-ink) !important; } body.pg-tech-page #content .pg-tech-band--support .fusion-text .fusion-text { margin-top: var(--pg-space-2) !important; } /* Video lists (pg-tech-band--videos, Video and Webinar): each Content Box is a video: title, then its thumbnail across * the box with rounded corners; a note under the boxes (for example the YouKu channel) is quiet, 14 px. */ body.pg-tech-page #content .pg-tech-band--videos .content-box-wrapper .content-container img { display: block; width: 100%; height: auto; margin: var(--pg-space-1) 0 0; border-radius: var(--pg-radius-sm); } body.pg-tech-page #content .pg-tech-band--videos .content-box-heading a { color: var(--pg-ink) !important; text-decoration: none; } body.pg-tech-page #content .pg-tech-band--videos .content-box-heading a:hover, body.pg-tech-page #content .pg-tech-band--videos .content-box-heading a:focus-visible { color: var(--pg-purple) !important; text-decoration: underline; } body.pg-tech-page #content .pg-tech-band .pg-tech-band__note { margin-top: var(--pg-space-3) !important; } body.pg-tech-page #content .pg-tech-band .pg-tech-band__note p { font-size: 14px !important; line-height: 1.5 !important; color: var(--pg-ink-muted); } body.pg-tech-page #content .pg-tech-band--videos .content-box-wrapper .content-container > :last-child { margin-top: auto !important; } /* Legal text in a band (pg-tech-band--legal, for example the Job Applicant Privacy Policy): readable line length on the * shared text edge (at most 860 px), section titles as 20 px H3s with space above, the text standard (16 px at 1.6). */ body.pg-tech-page #content .pg-tech-band--legal .fusion-text { max-width: 860px; } body.pg-tech-page #content .pg-tech-band--legal .fusion-text h3 { scroll-margin-top: 110px; } body.pg-tech-page #content .pg-tech-band--legal .fusion-text h4 { margin: var(--pg-space-3) 0 var(--pg-space-1) !important; font-size: 17px !important; line-height: 1.4 !important; font-weight: 700 !important; color: var(--pg-ink) !important; } body.pg-tech-page #content .pg-tech-band--legal .fusion-text h2 { margin: 0 0 var(--pg-space-3) !important; font-size: 22px !important; line-height: 1.35 !important; text-align: left !important; } /* "On this page" list of the sections (built by technology-page.js from the H3s, so sections added in the editor are * listed too): above the text on phones and tablets; on wide screens it stays in view in the column beside the text. */ body.pg-tech-page #content .pg-legal-toc { margin: 0 0 var(--pg-space-4); padding: var(--pg-space-3); background: var(--pg-surface); border-radius: var(--pg-radius-md); } body.pg-tech-page #content .pg-legal-toc__label { margin: 0 0 var(--pg-space-1) !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 700; color: var(--pg-ink); } body.pg-tech-page #content .pg-legal-toc ol { margin: 0 !important; padding-left: 20px !important; } body.pg-tech-page #content .pg-legal-toc li { margin: 0 0 6px !important; font-size: 15px !important; line-height: 1.45 !important; color: var(--pg-ink-muted); } body.pg-tech-page #content .pg-legal-toc a { color: var(--pg-purple); text-decoration: none; } body.pg-tech-page #content .pg-legal-toc a:hover, body.pg-tech-page #content .pg-legal-toc a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } @media (min-width: 1100px) { /* The band must not clip, or the list cannot stay in view (position: sticky). The site sets overflow-x: hidden on * html and body, which makes body a scroll container that never scrolls (sticky never sticks); on these pages * "clip" keeps the same protection against sideways scrolling without that side effect. */ html:has(.pg-legal--toc), body.pg-tech-page:has(.pg-legal--toc) { overflow-x: clip !important; } body.pg-tech-page #content .pg-tech-band--legal.fusion-fullwidth:has(.pg-legal--toc) { overflow: visible !important; } body.pg-tech-page #content .pg-tech-band--legal .fusion-column-wrapper.pg-legal--toc { display: grid !important; grid-template-columns: minmax(0, 860px) 280px; column-gap: var(--pg-space-6, 64px); align-items: start; } body.pg-tech-page #content .pg-legal--toc > .fusion-text { grid-column: 1; grid-row: 1; } body.pg-tech-page #content .pg-legal--toc > .pg-legal-toc { grid-column: 2; grid-row: 1; position: sticky; top: 110px; margin: 0; } body.pg-tech-page #content .pg-legal--toc > .fusion-clearfix { display: none; } } /* Job openings (pg-tech-band--jobs): the JazzHR widget's list (its own markup and Arial styles) shown as cards in the * site font: title, location, "View details" link. Jobs come from JazzHR, so new openings get the same look. */ body.pg-tech-page #content .pg-tech-band--jobs #resumator-jobs { display: grid; gap: var(--pg-space-2); } body.pg-tech-page #content .pg-tech-band--jobs .resumator-job { padding: var(--pg-space-3); background: var(--pg-surface); border-radius: var(--pg-radius-md); } body.pg-tech-page #content .pg-tech-band--jobs .resumator-job :is(.resumator-job-title, .resumator-job-info, .resumator-job-view-details, a) { font-family: inherit !important; } body.pg-tech-page #content .pg-tech-band--jobs .resumator-job-title { margin: 0 0 var(--pg-space-1) !important; padding: 0 !important; border: 0 !important; font-size: 20px !important; line-height: 1.35 !important; font-weight: 700 !important; color: var(--pg-ink) !important; } body.pg-tech-page #content .pg-tech-band--jobs .resumator-job-info { float: none !important; margin: 0 !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--pg-ink-muted) !important; } body.pg-tech-page #content .pg-tech-band--jobs .resumator-job-view-details { margin-top: var(--pg-space-1) !important; padding: 0 !important; font-size: 16px !important; line-height: 1.6 !important; } body.pg-tech-page #content .pg-tech-band--jobs a.resumator-job-link { color: var(--pg-purple) !important; font-weight: 700 !important; text-decoration: none; } body.pg-tech-page #content .pg-tech-band--jobs a.resumator-job-link:hover, body.pg-tech-page #content .pg-tech-band--jobs a.resumator-job-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; } body.pg-tech-page #content .pg-tech-band--jobs .resumator-job-description :is(p, li) { font-family: inherit !important; font-size: 16px !important; line-height: 1.6 !important; } body.pg-tech-page #content .pg-tech-band--jobs #resumator-logo { margin: var(--pg-space-2) 0 0 !important; } body.pg-tech-page #content .pg-tech-band--legal .fusion-text :is(p, li) { font-size: 16px !important; line-height: 1.6 !important; color: var(--pg-ink); } body.pg-tech-page #content .pg-tech-band--legal .fusion-text p { margin: 0 0 var(--pg-space-2) !important; } body.pg-tech-page #content .pg-tech-band--legal .fusion-text h3 { margin: var(--pg-space-5) 0 var(--pg-space-2) !important; font-size: 20px !important; line-height: 1.35 !important; font-weight: 700 !important; color: var(--pg-ink) !important; } body.pg-tech-page #content .pg-tech-band--legal .fusion-text ul { margin: 0 0 var(--pg-space-2) !important; padding-left: var(--pg-space-3) !important; } body.pg-tech-page #content .pg-tech-band--legal .fusion-text li { margin: 0 0 6px !important; } /* Long lists (pg-tech-band--list: News Updates, Events, Distributors; technology-page.js adds the jump list and filter). * Group headings (for example the year) are left-aligned 22 px H2s, not centred section headings; items are rows with * the linked name in bold and the details (date, place) quieter. */ body.pg-tech-page #content .pg-tech-band--list > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper > .fusion-text h2 { max-width: none !important; margin: var(--pg-space-5) 0 var(--pg-space-2) !important; font-size: 22px !important; line-height: 1.3 !important; text-align: left !important; scroll-margin-top: 110px; } body.pg-tech-page #content .pg-tech-band--list > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper > .fusion-text h2::after { content: none !important; display: none !important; } body.pg-tech-page #content .pg-tech-band--list .fusion-text ul { margin: 0 !important; padding: 0 !important; list-style: none; border-top: 1px solid var(--pg-border); } body.pg-tech-page #content .pg-tech-band--list .fusion-text li { margin: 0 !important; padding: 14px 0 !important; border-bottom: 1px solid var(--pg-border); font-size: 14px !important; line-height: 1.5 !important; color: var(--pg-ink-muted); list-style: none; } body.pg-tech-page #content .pg-tech-band--list .fusion-text li::before { content: none !important; } body.pg-tech-page #content .pg-tech-band--list .fusion-text li > a:first-child { display: inline-block; margin-bottom: 4px; font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--pg-ink); text-decoration: none; } body.pg-tech-page #content .pg-tech-band--list .fusion-text li > a:first-child:hover, body.pg-tech-page #content .pg-tech-band--list .fusion-text li > a:first-child:focus-visible { color: var(--pg-purple); text-decoration: underline; text-underline-offset: 3px; } body.pg-tech-page #content .pg-list-tools { display: grid; gap: var(--pg-space-2); margin: 0 0 var(--pg-space-2); padding: var(--pg-space-3); background: var(--pg-surface); border-radius: var(--pg-radius-md); } body.pg-tech-page #content .pg-list-jump { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pg-space-1); } body.pg-tech-page #content .pg-list-jump__label { margin-right: var(--pg-space-1); font-size: 14px; font-weight: 700; color: var(--pg-ink); } body.pg-tech-page #content .pg-list-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border: 1px solid var(--pg-purple); border-radius: var(--pg-radius-sm); background: var(--pg-white); color: var(--pg-purple); font-size: 14px; font-weight: 700; text-decoration: none; } body.pg-tech-page #content .pg-list-jump a:hover, body.pg-tech-page #content .pg-list-jump a:focus-visible { background: var(--pg-purple); color: var(--pg-white); } body.pg-tech-page #content .pg-list-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pg-space-1) var(--pg-space-2); } body.pg-tech-page #content .pg-list-filter label { font-size: 14px; font-weight: 700; color: var(--pg-ink); } body.pg-tech-page #content .pg-list-filter input[type="search"] { flex: 1 1 280px; max-width: 480px; min-height: 44px; margin: 0; padding: 8px 14px; border: 1px solid var(--pg-border-strong); border-radius: var(--pg-radius-sm); background: var(--pg-white); font-size: 16px; color: var(--pg-ink); } body.pg-tech-page #content .pg-list-filter input[type="search"]:focus-visible { outline: 3px solid var(--pg-purple); outline-offset: 2px; } body.pg-tech-page #content .pg-list-filter__status { font-size: 14px; color: var(--pg-ink-muted); } body.pg-tech-page #content .pg-list-filter__empty { margin: var(--pg-space-3) 0 0; padding: var(--pg-space-3); border: 1px dashed var(--pg-border-strong); border-radius: var(--pg-radius-md); text-align: center; } body.pg-tech-page #content .pg-list-filter__clear { margin-left: var(--pg-space-1); padding: 6px 14px; border: 2px solid var(--pg-purple); border-radius: var(--pg-radius-sm); background: var(--pg-white); color: var(--pg-purple); font-weight: 700; cursor: pointer; } body.pg-tech-page #content .pg-list-tools + .fusion-text h2 { margin-top: var(--pg-space-3) !important; } @media (max-width: 767px) { body.pg-tech-page #content .pg-list-tools { padding: var(--pg-space-2); } } body.pg-tech-page #content .pg-tech-band--list .fusion-text li > strong:first-child { display: inline-block; margin-bottom: 4px; font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--pg-ink); } /* Card directories (pg-tech-evidence--cards, for example Distributors): the logo on a white frame of one height at the * top of each card, the country as the card heading, the details in 15 px lines; tools above the first group. */ body.pg-tech-page #content .pg-tech-evidence--cards .pg-tech-card > .fusion-column-wrapper > :is(.fusion-imageframe, .fusion-image-element) { display: flex !important; align-items: center; justify-content: center; height: 96px; max-width: none !important; margin: 0 0 var(--pg-space-2) !important; } body.pg-tech-page #content .pg-tech-evidence--cards .pg-tech-card > .fusion-column-wrapper > :is(.fusion-imageframe, .fusion-image-element) img { width: auto; max-width: 100%; max-height: 96px; object-fit: contain; } body.pg-tech-page #content .pg-tech-evidence--cards .pg-tech-card > .fusion-column-wrapper > .fusion-text h3 { font-size: 18px; } body.pg-tech-page #content .pg-tech-evidence--cards .pg-tech-card > .fusion-column-wrapper > .fusion-text p { margin: 0 !important; font-size: 15px !important; line-height: 1.6 !important; overflow-wrap: anywhere; } body.pg-tech-page #content .pg-tech-evidence--cards .pg-tech-card > .fusion-column-wrapper > .fusion-text p a { font-size: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } body.pg-tech-page #content .pg-list-tools--cards { max-width: 1224px; margin: var(--pg-space-6) auto 0; box-sizing: border-box; } body.pg-tech-page #content .pg-list-tools--cards + .pg-tech-evidence.fusion-fullwidth { margin-top: var(--pg-space-3) !important; } body.pg-tech-page #content .pg-tech-evidence--cards + .pg-tech-evidence--cards.fusion-fullwidth { margin-top: var(--pg-space-5) !important; } @media (max-width: 767px) { body.pg-tech-page #content .pg-list-tools--cards { margin-top: var(--pg-space-5); border-radius: 0; } } /* About Us (pg-tech-band--about): left-aligned H2s in the text column (the section-heading size, ribbon on the left), * the mission statement as a lead line; the affiliation logos column beside it. */ body.pg-tech-page #content .pg-tech-band.pg-tech-band--about > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper > .fusion-text:first-child h2 { max-width: none !important; margin: 0 0 var(--pg-space-2) !important; text-align: left !important; } body.pg-tech-page #content .pg-tech-band.pg-tech-band--about > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper > .fusion-text:first-child h2::after { margin: 14px 0 0 !important; } body.pg-tech-page #content .pg-tech-band--about .fusion-text p + h2 { margin-top: var(--pg-space-5) !important; } body.pg-tech-page #content .pg-tech-band--about .fusion-text > h2:first-child + p { font-size: 20px !important; line-height: 1.5 !important; color: var(--pg-ink) !important; } body.pg-tech-page #content .pg-tech-band--about .fusion-text p { font-size: 16px !important; line-height: 1.6 !important; } /* People rows (pg-tech-band--people: Leadership Team, Advisors; Avada Person columns): cards of one height in a row, * name and title centred, the LinkedIn icon at the bottom; four per row (two on tablets, one on phones). */ body.pg-tech-page #content .pg-tech-band--people > .fusion-builder-row { display: flex !important; flex-wrap: wrap; gap: var(--pg-space-3); } body.pg-tech-page #content .pg-tech-band--people > .fusion-builder-row::before, body.pg-tech-page #content .pg-tech-band--people > .fusion-builder-row::after { display: none !important; } body.pg-tech-page #content .pg-tech-band--people > .fusion-builder-row > .fusion-layout-column { float: none !important; margin: 0 !important; width: auto !important; flex: 0 0 calc((100% - 3 * var(--pg-space-3)) / 4); } body.pg-tech-page #content .pg-tech-band--people > .fusion-builder-row > .fusion-layout-column:first-child { flex-basis: 100%; } body.pg-tech-page #content .pg-tech-band--people > .fusion-builder-row > .fusion-layout-column:not(:first-child) > .fusion-column-wrapper { display: flex !important; flex-direction: column; height: 100% !important; padding: var(--pg-space-3) var(--pg-space-2) !important; background: var(--pg-surface); border-radius: var(--pg-radius-md); box-sizing: border-box; text-align: center; } body.pg-tech-page #content .pg-tech-band--people > .fusion-builder-row > .fusion-layout-column:not(:first-child) .fusion-separator { display: none !important; } body.pg-tech-page #content .pg-tech-band--people > .fusion-builder-row > .fusion-layout-column:not(:first-child) .fusion-social-links { margin-top: auto !important; padding-top: var(--pg-space-2); } body.pg-tech-page #content .pg-tech-band--people .fusion-person img { border-radius: var(--pg-radius-md); } @media (max-width: 1100px) { body.pg-tech-page #content .pg-tech-band--people > .fusion-builder-row > .fusion-layout-column:not(:first-child) { flex-basis: calc((100% - var(--pg-space-3)) / 2); } } @media (max-width: 599px) { body.pg-tech-page #content .pg-tech-band--people > .fusion-builder-row > .fusion-layout-column:not(:first-child) { flex-basis: 100%; } } /* Logo rows (pg-tech-band--logos: Investors): logos centred in equal cells, one height. */ body.pg-tech-page #content .pg-tech-band--logos .fusion-imageframe img { max-height: 64px; width: auto; } body.pg-tech-page #content .pg-tech-band--logos > .fusion-builder-row > .fusion-layout-column:not(:first-child) > .fusion-column-wrapper { display: flex !important; align-items: center; justify-content: center; min-height: 96px; } body.pg-tech-page #content .pg-tech-band--about .fusion-column-wrapper > :is(.fusion-imageframe, .fusion-image-element, .imageframe-align-center) ~ :is(.fusion-imageframe, .fusion-image-element, .imageframe-align-center) { margin-top: var(--pg-space-3) !important; } /* Photo grids (pg-tech-band--photos, for example Careers' company events): three per row (two on tablets, one on phones), * each cropped to one 4:3 shape with rounded corners; a photo in the intro spans the column with its caption beneath. */ body.pg-tech-page #content .pg-tech-band--photos > .fusion-builder-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pg-space-3); } body.pg-tech-page #content .pg-tech-band--photos > .fusion-builder-row::before, body.pg-tech-page #content .pg-tech-band--photos > .fusion-builder-row::after { display: none !important; } body.pg-tech-page #content .pg-tech-band--photos > .fusion-builder-row > .fusion-layout-column { width: auto !important; margin: 0 !important; float: none !important; } body.pg-tech-page #content .pg-tech-band--photos > .fusion-builder-row > .fusion-layout-column:first-child { grid-column: 1 / -1; } body.pg-tech-page #content .pg-tech-band--photos :is(.fusion-imageframe, .imageframe-align-center) { display: block !important; width: 100%; max-width: none !important; margin: 0 !important; } body.pg-tech-page #content .pg-tech-band--photos img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--pg-radius-md); } @media (max-width: 1024px) { body.pg-tech-page #content .pg-tech-band--photos > .fusion-builder-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { body.pg-tech-page #content .pg-tech-band--photos > .fusion-builder-row { grid-template-columns: minmax(0, 1fr); } } body.pg-tech-page #content .pg-tech-intro .fusion-imageframe img { display: block; width: 100%; height: auto; border-radius: var(--pg-radius-md); } body.pg-tech-page #content .pg-tech-intro :is(.fusion-imageframe, .imageframe-align-center) { display: block; max-width: none !important; margin: var(--pg-space-3) 0 var(--pg-space-1) !important; } /* Lists inside cards shown in full (for example Core Competencies): 16 px items at 1.6 with a small indent; a figure * card (pg-tech-card--figure) shows its image centred at its own size. */ body.pg-tech-page .pg-tech-card > .fusion-column-wrapper > .fusion-text ul { margin: var(--pg-space-1) 0 0 !important; padding-left: 20px !important; } body.pg-tech-page .pg-tech-card > .fusion-column-wrapper > .fusion-text li { margin: 0 0 6px !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--pg-ink-muted); } body.pg-tech-page .pg-tech-card--figure > .fusion-column-wrapper > .fusion-text p:has(> img) { margin: 0 !important; text-align: center; } body.pg-tech-page .pg-tech-card--figure > .fusion-column-wrapper > .fusion-text img { display: inline-block; width: auto; max-width: 100%; height: auto; } /* Confirmation (thank-you pages, pg-tech-band--confirm): the message on a surface panel at the shared width, a check * mark above it, the text on the shared text edge; the page's own links ("Get more posters here") below it. */ body.pg-tech-page #content .pg-tech-band--confirm.fusion-fullwidth { max-width: 1224px; margin: 48px auto 0 !important; padding: 48px 32px !important; background: var(--pg-surface) !important; border-radius: var(--pg-radius-md); box-sizing: border-box; } body.pg-tech-page #content .pg-tech-band--confirm .fusion-text::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 0 var(--pg-space-2); border-radius: 50%; background: var(--pg-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 22px no-repeat; } body.pg-tech-page #content .pg-tech-band--confirm .fusion-text p { max-width: 860px; margin: 0 0 var(--pg-space-2) !important; font-size: 18px !important; line-height: 1.6 !important; color: var(--pg-ink) !important; } body.pg-tech-page #content .pg-tech-band--confirm .fusion-text p:last-child { margin-bottom: 0 !important; } body.pg-tech-page #content .pg-tech-band--confirm .fusion-text a { color: var(--pg-purple) !important; font-weight: 700; } @media (max-width: 768px) { body.pg-tech-page #content .pg-tech-band--confirm.fusion-fullwidth { padding: 32px 16px !important; border-radius: 0; } } /* Intro with a preview image (pg-tech-intro--media; resource pages such as posters): text and button on the left (3/5), * the preview on the right (2/5), stacked on tablets and phones. */ body.pg-tech-page #content .pg-tech-intro--media > .fusion-builder-row { display: flex; align-items: flex-start; gap: var(--pg-space-5); } body.pg-tech-page #content .pg-tech-intro--media > .fusion-builder-row::before, body.pg-tech-page #content .pg-tech-intro--media > .fusion-builder-row::after { display: none; } body.pg-tech-page #content .pg-tech-intro--media > .fusion-builder-row > .fusion-layout-column { float: none; margin: 0 !important; width: auto !important; flex: 3 1 0; min-width: 0; } body.pg-tech-page #content .pg-tech-intro--media > .fusion-builder-row > .pg-tech-intro__media { flex: 2 1 0; } body.pg-tech-page #content .pg-tech-intro__media img { display: block; width: 100%; height: auto; border: 1px solid var(--pg-border, #e3e5ec); border-radius: var(--pg-radius-md); box-shadow: 0 8px 24px rgba(31, 18, 64, .08); } body.pg-tech-page #content .pg-tech-intro__text + .fusion-button-wrapper, body.pg-tech-page #content .pg-tech-intro__heading + .fusion-button-wrapper { display: block; margin-top: var(--pg-space-3) !important; } @media (max-width: 900px) { body.pg-tech-page #content .pg-tech-intro--media > .fusion-builder-row { flex-direction: column; gap: var(--pg-space-4); } body.pg-tech-page #content .pg-tech-intro--media > .fusion-builder-row > .fusion-layout-column { flex: none; width: 100% !important; } } /* In a two-column intro the heading sits on the text's edge (left), with its accent line. */ body.pg-tech-page #content .pg-tech-intro--media .pg-tech-intro__heading h2 { text-align: left !important; } body.pg-tech-page #content .pg-tech-intro--media .pg-tech-intro__heading h2::after { margin-left: 0 !important; margin-right: auto !important; } body.pg-tech-page #content .pg-tech-intro__text + .pg-tech-intro__text { margin-top: var(--pg-space-2) !important; } /* Interview quote in an intro (Scientist Insider): an accent bar, the quote in 20 px italic. */ body.pg-tech-page #content .pg-tech-intro__text blockquote { margin: var(--pg-space-3) 0 0; padding: 0 0 0 var(--pg-space-3); border-left: 4px solid var(--pg-orange-strong); } body.pg-tech-page #content .pg-tech-intro__text blockquote p { margin: 0 !important; font-size: 20px !important; line-height: 1.5 !important; font-style: italic; color: var(--pg-ink); } /* Portrait photo beside an intro (pg-tech-intro--portrait, for example an interviewee): a 220 px photo, so it stands about * as tall as the text beside it (no empty space under the button); stacked below the text on narrow screens. */ @media (min-width: 901px) { body.pg-tech-page #content .pg-tech-intro--portrait > .fusion-builder-row > .pg-tech-intro__media { flex: 0 0 220px; } } body.pg-tech-page #content .pg-tech-intro--portrait .pg-tech-intro__media img { max-width: 220px; } /* Buttons in a two-column intro sit on the text's edge, not centred (also a secondary button, which the intro rule above * lays out centred in a flex row). */ body.pg-tech-page #content .pg-tech-intro--media .fusion-button-wrapper { text-align: left !important; } body.pg-tech-page #content .pg-tech-intro--media .fusion-column-wrapper:has(> .fusion-button-wrapper .pg-tech-cta--secondary) { justify-content: flex-start; } /* A two-column section further down a page (for example the poster on Liquid Biopsy) keeps the 48 px between sections. */ body.pg-tech-page .fusion-fullwidth ~ .pg-tech-intro--media.fusion-fullwidth { margin-top: 48px !important; } /* Tables in an intro (for example Demo Data's panel / input DNA / download table): the table fits the text column; * long cell contents wrap, so phones never scroll sideways. */ body.pg-tech-page #content .pg-tech-intro__text table { width: 100% !important; max-width: 100%; table-layout: auto; border-collapse: collapse; } body.pg-tech-page #content .pg-tech-intro__text :is(td, th) { overflow-wrap: break-word; vertical-align: top; padding: 8px 10px; } @media (max-width: 544px) { body.pg-tech-page #content .pg-tech-intro__text :is(td, th) { padding: 6px; font-size: 14px !important; line-height: 1.5 !important; } }