/* * Formsieve base: type, links, focus, buttons, inputs, cards, chips, badges, * placeholders, the logo mark, layout helpers for WPBakery rows/columns. * Values come from "Formsieve Brand Sheet.dc.html" and the page artboards. * * Row classes go in the row "Extra class name" (Salient param `class`), * column classes in the column "Extra class name" (`el_class`). */ /* ------------------------------------------------------------------ */ /* Page */ /* ------------------------------------------------------------------ */ html body.fs-site { /* * Visible page width (viewport minus a classic scrollbar), used by * .fs-wide / .fs-block to find the viewport edges. assets/js/site.js (in * the head) sets --fs-page-w-js from document.documentElement.clientWidth. * 100vw alone is not reliable: browsers disagree on whether it includes * the scrollbar when has overflow-y: scroll (Salient sets it). * Without JS: 100vw minus Salient's measure (clamped at 0 because Salient * leaves −2 px on touch devices). */ --fs-page-w: var(--fs-page-w-js, calc(100vw - max(0px, var(--scroll-bar-w, 0px)))); background: var(--fs-white); color: var(--fs-navy); font-family: var(--fs-font-body); font-size: var(--fs-body); font-weight: 400; line-height: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body.fs-site .container-wrap, body.fs-site #ajax-content-wrap .container-wrap { background: var(--fs-white); padding-top: 0; padding-bottom: 0; margin-top: 0; } body.fs-site .container-wrap > .main-content > .row { padding-bottom: 0; } /* Salient's page container: 1240 px of content at 1440 (max 1420 − 2 × 90). */ @media (max-width: 999px) { body.fs-site .container, body.fs-site .container-wrap .container, body.fs-site .nectar-global-section > .container { max-width: none; width: auto; padding-left: 40px; padding-right: 40px; } } @media (max-width: 690px) { body.fs-site .container, body.fs-site .container-wrap .container, body.fs-site .nectar-global-section > .container { padding-left: 20px; padding-right: 20px; } } /* ------------------------------------------------------------------ */ /* Type */ /* ------------------------------------------------------------------ */ body.fs-site p, body.fs-site .wpb_text_column p, body.fs-site .row .col p { margin: 0; padding: 0; font-size: inherit; line-height: 1.6; color: inherit; } body.fs-site h1, body.fs-site h2, body.fs-site h3, body.fs-site h4, body.fs-site h5, body.fs-site h6, body.fs-site .row .col h1, body.fs-site .row .col h2, body.fs-site .row .col h3, body.fs-site .row .col h4, body.fs-site .row .col h5, body.fs-site .row .col h6 { margin: 0; padding: 0; color: inherit; font-family: var(--fs-font-display); text-transform: none; } /* The artboards balance/pretty-wrap a few headings and paragraphs. */ body.fs-site .fs-balance { text-wrap: balance; } body.fs-site .fs-pretty { text-wrap: pretty; } body.fs-site h1, body.fs-site .row .col h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; } body.fs-site h2, body.fs-site .row .col h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; } body.fs-site h3, body.fs-site .row .col h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: 0; } body.fs-site h4, body.fs-site .row .col h4 { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: 0; } body.fs-site h5, body.fs-site .row .col h5, body.fs-site h6, body.fs-site .row .col h6 { font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: 0; } body.fs-site strong, body.fs-site b { font-weight: 700; } body.fs-site ul, body.fs-site ol { margin: 0; } body.fs-site .wpb_text_column ul, body.fs-site .wpb_text_column ol { margin: 0 0 0 1.25em; padding: 0; } body.fs-site li { line-height: 1.6; } /* Type utilities (apply to a text block, heading or paragraph). */ body.fs-site .fs-display, body.fs-site .row .col .fs-display { font-family: var(--fs-font-display); font-size: var(--fs-display); font-weight: 800; line-height: var(--fs-display-lh); letter-spacing: -.035em; } body.fs-site .fs-title, body.fs-site .row .col .fs-title { font-family: var(--fs-font-display); font-size: var(--fs-h1); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; } body.fs-site .fs-h2, body.fs-site .row .col .fs-h2 { font-family: var(--fs-font-display); font-size: var(--fs-h2); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; } body.fs-site .fs-h3, body.fs-site .row .col .fs-h3 { font-family: var(--fs-font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: 0; } body.fs-site .fs-eyebrow, body.fs-site .row .col .fs-eyebrow { display: block; font-family: var(--fs-font-display); font-size: var(--fs-eyebrow); font-weight: 700; line-height: normal; } body.fs-site .fs-lead, body.fs-site .row .col .fs-lead { font-size: var(--fs-lead); line-height: var(--fs-lead-lh); } body.fs-site .fs-body, body.fs-site .row .col .fs-body { font-size: 16px; line-height: 1.6; } body.fs-site .fs-small, body.fs-site .row .col .fs-small { font-size: 14px; line-height: 1.5; } body.fs-site .fs-mono, body.fs-site .row .col .fs-mono, body.fs-site code { font-family: var(--fs-font-mono); font-size: var(--fs-mono); font-weight: 400; } body.fs-site .fs-center { text-align: center; } /* Paragraph sizes used by the artboards (line-height 1.6). */ body.fs-site .fs-size-13, body.fs-site .row .col .fs-size-13 { font-size: 13px; line-height: 1.5; } body.fs-site .fs-size-15, body.fs-site .row .col .fs-size-15 { font-size: 15px; line-height: 1.55; } body.fs-site .fs-size-17, body.fs-site .row .col .fs-size-17 { font-size: 17px; line-height: 1.6; } body.fs-site .fs-size-18, body.fs-site .row .col .fs-size-18 { font-size: 18px; line-height: 1.6; } .fs-text-navy { color: var(--fs-navy); } .fs-text-violet { color: var(--fs-violet); } .fs-text-orange { color: var(--fs-orange); } .fs-text-white { color: var(--fs-white); } .fs-text-lavender { color: var(--fs-lavender); } body.fs-site .fs-maxw-470 { max-width: 470px; } body.fs-site .fs-maxw-560 { max-width: 560px; } body.fs-site .fs-maxw-640 { max-width: 640px; } body.fs-site .fs-maxw-720 { max-width: 720px; } body.fs-site .fs-maxw-900 { max-width: 900px; } body.fs-site .fs-maxw-1080 { max-width: 1080px; } .fs-visually-hidden, body.fs-site .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ */ /* Links and focus */ /* ------------------------------------------------------------------ */ body.fs-site a { color: var(--fs-navy); text-decoration: underline; transition: color .15s ease; } body.fs-site a:hover { color: var(--fs-violet); } /* White links on dark and violet surfaces. */ body.fs-site .fs-on-dark a:not(.fs-btn), body.fs-site .fs-block--violet a:not(.fs-btn), body.fs-site .fs-block--navy a:not(.fs-btn), body.fs-site .fs-panel--navy a:not(.fs-btn), body.fs-site .fs-panel--violet a:not(.fs-btn), body.fs-site .fs-surface--navy a:not(.fs-btn), body.fs-site .fs-surface--violet a:not(.fs-btn) { color: var(--fs-white); } body.fs-site a.fs-link-violet, body.fs-site .fs-link-violet a { color: var(--fs-violet); } body.fs-site a.fs-link-violet:hover, body.fs-site .fs-link-violet a:hover { color: var(--fs-navy); } body.fs-site :focus { outline: none; } body.fs-site :focus-visible { outline: 3px solid var(--fs-violet); outline-offset: 3px; border-radius: 4px; } body.fs-site .fs-on-dark :focus-visible, body.fs-site .fs-block--violet :focus-visible, body.fs-site .fs-block--navy :focus-visible, body.fs-site .fs-panel--navy :focus-visible, body.fs-site .fs-panel--violet :focus-visible, body.fs-site .fs-surface--navy :focus-visible, body.fs-site .fs-surface--violet :focus-visible { outline-color: var(--fs-white); } body.fs-site .fs-btn:focus-visible { outline-offset: 3px; border-radius: var(--fs-radius-pill); } body.fs-site .nectar-skip-to-content:focus { background: var(--fs-navy); color: var(--fs-white); } /* ------------------------------------------------------------------ */ /* Buttons (.fs-btn). Height 54 px, 48 in the nav, 58 in heroes. */ /* ------------------------------------------------------------------ */ /* * Sizing matches the artboards, which use content-box: the 54 px height is the * inside of the 2 px border, so bordered buttons measure 58 px and borderless * (dark, primary-flat, nav) ones 54 px. */ body.fs-site .fs-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: content-box; height: var(--fs-btn-h); margin: 0; padding: 0 28px; border: 0; border-radius: var(--fs-radius-pill); background: var(--fs-orange); color: var(--fs-navy); font-family: var(--fs-font-body); font-size: 17px; font-weight: 700; line-height: 1; letter-spacing: 0; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: box-shadow .15s ease, background-color .15s ease, color .15s ease, text-decoration-thickness .15s ease; } body.fs-site .fs-btn--primary { background: var(--fs-orange); color: var(--fs-navy); border: 2px solid var(--fs-navy); } /*