/* Open engagements board — Framer /jobs page tokens, not candidate-v2's * cream/Georgia/maroon chrome. Same token/pill/hover vocabulary as * careers.css (read that first): ink/paper/surface/border tokens with hex * fallbacks, pill selects with the inline-SVG chevron, 0.4s * cubic-bezier(0.22, 1, 0.36, 1) hover language. * * jobs.js mounts #verita-jobs-root by replacing the children of the * two-column row that (on the cloned /faq shell) holds both the page hero * and the "Verita FAQ List" section — see jobs.js's findJobsHost() for why * there's no stable class selector for that row to target here instead. * The row's own width is widened at runtime (see widenRowToContent()), so * this file's max-width is a generous cap, not the effective width. */ /* Fail closed, not open: /jobs is a clone of /faq's exported shell (see * jobs.js's findJobsHost() comment) with no static edit to its body, so * without this rule a crawler, a JS-blocked visitor, or the re-export- * breakage case findJobsHost() already warns about (class hashes changed, * host not found) all get the full FAQ page — hero copy, FAQ accordion, and * the "Still have questions" CTA — rendered under the "Open Engagements" * title. This also removes the pre-hydrate FAQ flash: the rule applies at * first paint, before jobs.js (loaded with `defer`) ever runs. * * main[data-framer-name="Introduction"] is the one stable, Framer-authored * selector spanning that whole cloned section (its own class hash changes * on every re-export, this attribute does not). Hidden by default; jobs.js * reveals it by tagging once the board actually mounts (see * ensureRoot()) — so an unmounted or failed board renders as an empty page, * never the FAQ. This protection only holds while the attribute selector * below actually matches something: if a re-export ever renames this * attribute value away (findJobsHost()'s total give-up case, when even * findAnyMainHost()'s bare-
fallback fails too), a selector matching * nothing hides nothing — jobs.js's ensureRoot() has to actively hide that * stray content itself at that point (see hideStrayCloneContent()), this * rule can't do it. * * !important on both rules: Framer's own exported CSS sets this element's * display via a higher-specificity descendant selector (two classes, e.g. * ".framer-O1Osb .framer-w3c31a") that otherwise wins over our single * attribute+type selector regardless of stylesheet order. The reveal value * is "flex" (not "block") to match that same Framer rule's own value, so * mounting doesn't change how this element lays out its children. */ main[data-framer-name="Introduction"] { display: none !important; } html[data-verita-jobs-mounted] main[data-framer-name="Introduction"] { display: flex !important; } #verita-jobs-root { /* Same Framer tokens careers.css defines (this file has no dependency on * careers.css being loaded — both pages define their own copy). */ --verita-ink: var(--token-2ddcea38-bb42-4986-8e36-4a45eb0c9596, #1a1a1a); --verita-paper: var(--token-7bbf4f4d-a8fb-4fe0-a164-a8cf2fd0048a, #ffffff); --verita-surface: var(--token-1273543a-0813-435f-bd61-d8398d80d684, #f0f0f0); --verita-border: var(--token-4a25c684-3670-4b2a-bae7-5c23bcc7c2d3, rgba(26, 26, 26, 0.1)); --verita-muted: color-mix(in srgb, var(--verita-ink) 55%, transparent); display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 auto; /* The cloned section already carries ~111px of top padding to clear the * fixed nav. Adding a second hero-sized pad on top of it left a large * empty band above the eyebrow, so keep only breathing room here. */ /* Bottom stays small too: the cloned section contributes a 50px flex gap * plus its own padding before the closing CTA band below us. */ padding: 16px 40px 24px; color: var(--verita-ink); font-family: "Inter Display", "Inter Display Placeholder", "Inter", "Inter Placeholder", sans-serif; -webkit-font-smoothing: antialiased; } #verita-jobs-root * { box-sizing: border-box; } #verita-jobs-root a { color: inherit; } #verita-jobs-root a:visited { color: inherit; } @media (max-width: 1199.98px) { #verita-jobs-root { padding: 12px 32px 20px; } } @media (max-width: 809.98px) { #verita-jobs-root { padding: 8px 20px 16px; } } /* ---- header ------------------------------------------------------------ */ .verita-jobs-header { margin: 0 0 40px; /* Wide enough that "Currently hiring across the practice." sets on one * line at the 54px cap (it needs ~771px); the dek keeps its own narrower * measure below so the prose line length stays readable. */ max-width: 900px; } .verita-jobs-eyebrow { margin: 0 0 16px; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verita-muted); } .verita-jobs-headline { margin: 0 0 16px; font-family: inherit; font-size: clamp(32px, 4.5vw, 54px); font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; color: var(--verita-ink); } .verita-jobs-headline em { font-style: italic; } .verita-jobs-dek { margin: 0; max-width: 620px; font-size: 16px; font-weight: 300; letter-spacing: 0.02em; line-height: 1.5; color: var(--verita-muted); } /* ---- filters ------------------------------------------------------------ */ .verita-jobs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 20px; } .verita-jobs-search { flex: 1 1 200px; min-width: 180px; box-sizing: border-box; padding: 10px 16px; background: var(--verita-paper); border: 1px solid var(--verita-border); border-radius: 16px; color: var(--verita-ink); font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; } .verita-jobs-search::placeholder { color: var(--verita-muted); } .verita-jobs-search:focus { outline: 2px solid color-mix(in srgb, var(--verita-ink) 25%, transparent); outline-offset: 2px; } .verita-jobs-filter { display: inline-flex; align-items: center; margin: 0; flex: none; } .verita-jobs-filter select { appearance: none; -webkit-appearance: none; background: var(--verita-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath stroke='%231a1a1a' stroke-width='1.5' d='M1.5 1.5 6 6 10.5 1.5'/%3E%3C/svg%3E") no-repeat right 12px center / 10px; border: 1px solid var(--verita-border); border-radius: 16px; color: var(--verita-ink); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; padding: 10px 34px 10px 14px; max-width: 100%; } .verita-jobs-filter select:focus { outline: 2px solid color-mix(in srgb, var(--verita-ink) 25%, transparent); outline-offset: 2px; } .verita-jobs-clear-filters { appearance: none; background: none; border: none; padding: 8px 4px; margin: 0; font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--verita-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .verita-jobs-clear-filters:hover { opacity: 0.75; } .verita-jobs-result-count { margin: -8px 0 14px; font-size: 13px; font-weight: 400; letter-spacing: 0.01em; color: var(--verita-muted); } /* ---- section tabs -------------------------------------------------------- */ .verita-jobs-tabs { display: flex; align-items: center; gap: 4px; margin: 4px 0 20px; } .verita-jobs-tab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 16px 10px 0; margin-right: 12px; font-family: inherit; font-size: 15px; font-weight: 400; letter-spacing: 0.01em; color: var(--verita-muted); cursor: pointer; transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .verita-jobs-tab:hover { color: var(--verita-ink); } .verita-jobs-tab.is-active { color: var(--verita-ink); border-bottom-color: var(--verita-ink); } .verita-jobs-tab-count { font-size: 12px; font-weight: 400; opacity: 0.7; margin-left: 4px; } /* ---- table --------------------------------------------------------------- */ .verita-jobs-table { background: var(--verita-paper); border: 1px solid var(--verita-border); border-radius: 16px; overflow: hidden; } .verita-jobs-table-header { display: grid; grid-template-columns: 90px 1fr 160px 170px; gap: 16px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--verita-border); } .verita-jobs-table-header span { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--verita-muted); } .verita-jobs-row { display: grid; grid-template-columns: 90px 1fr 160px 170px; gap: 16px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--verita-border); text-decoration: none; color: inherit; transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .verita-jobs-row.is-last { border-bottom: none; } .verita-jobs-row:hover { background: color-mix(in srgb, var(--verita-surface) 45%, var(--verita-paper)); } .verita-jobs-row:focus-visible { outline: 2px solid color-mix(in srgb, var(--verita-ink) 35%, transparent); outline-offset: -2px; } .verita-jobs-cell--posted { font-size: 12px; font-weight: 400; letter-spacing: 0.02em; color: var(--verita-muted); } .verita-jobs-cell--posted.is-fresh { color: var(--verita-ink); font-weight: 500; } .verita-jobs-row-title { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--verita-ink); } .verita-jobs-row-title-row, .verita-job-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Detail title row owns the headline's former 0 0 16px — the inner h1 is * zeroed so flex align-items:center keeps the Applied pill on the title * baseline without stacking a second bottom margin under the pill. */ .verita-job-title-row { margin: 0 0 16px; } .verita-job-title-row .verita-jobs-headline { margin: 0; } .verita-jobs-applied-pill { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--verita-ink) 8%, transparent); color: var(--verita-ink); font-size: 10px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.2; white-space: nowrap; } .verita-jobs-row-subtitle { margin: 3px 0 0; font-size: 12px; font-weight: 300; letter-spacing: 0.02em; color: var(--verita-muted); } .verita-jobs-cell--discipline { font-size: 13px; font-weight: 400; color: var(--verita-muted); } .verita-jobs-cell--rate { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--verita-ink); } /* ---- status / empty / error ------------------------------------------ */ .verita-jobs-status { margin: 0; padding: 40px 22px; text-align: center; font-size: 14px; font-weight: 300; letter-spacing: 0.02em; line-height: 1.5; color: var(--verita-muted); } .verita-jobs-status--error { color: var(--verita-ink); } .verita-jobs-empty { padding: 28px 22px 36px; text-align: center; } .verita-jobs-empty .verita-jobs-status { padding: 0 0 18px; } .verita-jobs-empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; } .verita-jobs-empty-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid var(--verita-border); border-radius: 16px; background: var(--verita-paper); color: var(--verita-ink); font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1); } .verita-jobs-empty-btn:hover { transform: scale(1.03); } .verita-jobs-empty-btn--primary { background: var(--verita-ink); border-color: var(--verita-ink); color: var(--verita-paper); } #verita-jobs-root a.verita-jobs-empty-btn, #verita-jobs-root a.verita-jobs-empty-btn:visited { color: var(--verita-ink); } #verita-jobs-root a.verita-jobs-empty-btn--primary, #verita-jobs-root a.verita-jobs-empty-btn--primary:visited { color: var(--verita-paper); } .verita-jobs-retry { background: none; border: none; padding: 0; margin-left: 4px; font: inherit; font-weight: 500; color: var(--verita-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* ---- pager -------------------------------------------------------------- */ .verita-jobs-pager { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 24px 0 0; } .verita-jobs-pager-btn { background: none; border: none; padding: 0; font: inherit; font-size: 13px; color: var(--verita-ink); cursor: pointer; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .verita-jobs-pager-btn:disabled { opacity: 0.35; cursor: default; } .verita-jobs-pager-status { font-size: 12px; color: var(--verita-muted); } .verita-jobs-truncated { margin: 16px 0 0; text-align: center; font-size: 11px; font-style: italic; color: var(--verita-muted); } /* ---- detail --------------------------------------------------------------- */ .verita-job-detail { width: 100%; } .verita-job-nav { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 28px; font-size: 14px; font-weight: 400; letter-spacing: 0.02em; color: var(--verita-muted); text-decoration: none; transition: color 0.2s ease; } .verita-job-nav:hover { color: var(--verita-ink); } .verita-job-header { margin: 0 0 32px; } .verita-job-meta { margin: 0 0 20px; } .verita-job-stats { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 20px; border-top: 1px solid var(--verita-border); } .verita-job-stat { display: flex; flex-direction: column; gap: 4px; } .verita-job-stat-label { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verita-muted); } .verita-job-stat-value { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--verita-ink); } .verita-job-section { margin: 0 0 32px; max-width: 720px; } .verita-job-section-label { margin: 0 0 10px; font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--verita-muted); } .verita-job-section-body { font-size: 15px; font-weight: 300; letter-spacing: 0.01em; line-height: 1.7; color: var(--verita-ink); } .verita-job-section-body p:first-child, .verita-job-plaintext { margin-top: 0; } .verita-job-section-body p { margin: 0 0 1em; white-space: pre-line; } .verita-job-section-body ul, .verita-job-section-body ol { margin: 0 0 1em; padding-left: 1.25em; } .verita-job-section-body li { margin: 0 0 0.4em; } .verita-job-section-body a { color: var(--verita-ink); text-decoration: underline; text-underline-offset: 2px; } .verita-job-skills { display: flex; flex-wrap: wrap; gap: 8px; } .verita-job-skill { padding: 6px 14px; background: var(--verita-surface); border: 1px solid var(--verita-border); border-radius: 999px; font-size: 12px; font-weight: 400; color: var(--verita-ink); } .verita-job-apply { margin-top: 40px; } .verita-job-applied-note { margin: 0 0 12px; font-size: 14px; font-weight: 400; color: var(--verita-muted); } /* ID-scoped so it outranks the `#verita-jobs-root a { color: inherit }` * reset above — a bare class loses to that, which left the label rendering * ink-on-ink (invisible) inside the filled pill. */ #verita-jobs-root .verita-jobs-apply-btn, #verita-jobs-root .verita-jobs-apply-btn:visited { display: inline-flex; align-items: center; padding: 14px 28px; background: var(--verita-ink); border-radius: 999px; color: var(--verita-paper); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1); } #verita-jobs-root .verita-jobs-apply-btn.is-applied, #verita-jobs-root .verita-jobs-apply-btn.is-applied:visited { opacity: 0.85; background: color-mix(in srgb, var(--verita-ink) 88%, transparent); } .verita-jobs-apply-btn:hover { transform: scale(1.03); } /* ---- responsive: tablet -------------------------------------------------- */ @media (max-width: 1199.98px) { .verita-jobs-table-header, .verita-jobs-row { grid-template-columns: 80px 1fr 130px 150px; } } /* ---- responsive: phone — stacked rows instead of a scrolling table ------- */ @media (max-width: 809.98px) { .verita-jobs-filters { flex-direction: column; align-items: stretch; } /* `flex: 1 1 200px` sizes the search field along the main axis, and the row * just became a column — so the basis applied to its HEIGHT and the input * rendered 302x200. The sibling .verita-jobs-filter wrappers escape it only * because they already carry `flex: none`; give the search the same. */ .verita-jobs-search { flex: none; } .verita-jobs-filter, .verita-jobs-filter select { width: 100%; } .verita-jobs-table-header { display: none; } .verita-jobs-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; } .verita-jobs-cell--posted { order: -1; } .verita-jobs-cell--discipline, .verita-jobs-cell--rate { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 8px; border-top: 1px solid var(--verita-border); } .verita-jobs-cell--discipline::before, .verita-jobs-cell--rate::before { flex: none; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verita-muted); } .verita-jobs-cell--discipline::before { content: "Discipline"; } .verita-jobs-cell--rate::before { content: "Rate / type"; } .verita-job-stats { flex-direction: column; gap: 16px; } }