/* WorkAgain marketing site: shared tokens and layout. Anatomy follows a utility job board: link bar, heavy italic green headline, a stats and alerts row, emoji category chips, a filter bar, then a dense numbered jobs table that turns into cards on phones. No inline styles anywhere: the CSP in _headers blocks them. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('/fonts/poppins-latin-700-italic.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url('/fonts/poppins-latin-800-italic.woff2') format('woff2'); } /* ---------- theme tokens ---------- The page uses the LIGHT set: . Founder decision, 2026-09-19: a white page for now, so Airtable's standard embed, which is always white, can be used as it is. The dark set (the GTM brief's charcoal) stays here; switching back is that one attribute. */ :root { color-scheme: dark; --wa-canvas: #0D1113; --wa-raised: #13181C; --wa-sunken: #181F24; --wa-hairline: #253039; --wa-boundary: #63717B; --wa-text: #F0F3F5; --wa-text-2: #A8B0B5; --wa-brand: #31F889; /* fills: buttons, active chip */ --wa-brand-hover: #5FFAA3; --wa-on-brand: #0D1113; /* label on green is always dark, never white */ --wa-brand-text: #31F889; /* green used as text: headline, stats, active link */ --wa-brand-soft: #0E231A; --wa-pending: #C3A65E; --wa-pending-bg: #201C14; --wa-pill-remote-fg: #5FE3A0; --wa-pill-remote-bg: #0E231A; --wa-pill-hybrid-fg: #8CC2E8; --wa-pill-hybrid-bg: #101F29; --wa-pill-onsite-fg: #C3B2F0; --wa-pill-onsite-bg: #1E1A2E; --wa-font: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --wa-gutter: 20px; --wa-content: 1080px; --wa-radius: 8px; } :root[data-theme="light"] { color-scheme: light; --wa-canvas: #FFFFFF; --wa-raised: #F5F7F8; --wa-sunken: #EEF1F3; --wa-hairline: #E1E5E8; --wa-boundary: #7B8790; --wa-text: #0D1113; --wa-text-2: #4C5862; --wa-brand: #31F889; --wa-brand-hover: #5FFAA3; --wa-on-brand: #0D1113; --wa-brand-text: #007A48; /* #31F889 is unreadable as text on white, so text uses a deep green */ --wa-brand-soft: #E6FBF0; --wa-pending: #8A6A12; --wa-pending-bg: #FBF4E0; --wa-pill-remote-fg: #0B7A45; --wa-pill-remote-bg: #E3F8EC; --wa-pill-hybrid-fg: #1F5F8B; --wa-pill-hybrid-bg: #E3F0F9; --wa-pill-onsite-fg: #5B3FB3; --wa-pill-onsite-bg: #EFE9FB; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--wa-canvas); } body { margin: 0; background: var(--wa-canvas); color: var(--wa-text); font-family: var(--wa-font); font-size: 16px; font-weight: 400; line-height: 1.5; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } img { height: auto; } h1, h2, p, ul, dl, dd { margin: 0; } strong { font-weight: 700; } :focus-visible { outline: 3px solid var(--wa-brand-text); outline-offset: 3px; border-radius: 4px; } .wa-icon { flex: none; } .wa-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .wa-wrap { width: 100%; max-width: calc(var(--wa-content) + 2 * var(--wa-gutter)); margin-inline: auto; padding-left: max(var(--wa-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--wa-gutter), env(safe-area-inset-right, 0px)); } .wa-skip { position: absolute; left: 12px; top: -80px; z-index: 10; padding: 12px 16px; border-radius: 8px; background: var(--wa-brand); color: var(--wa-on-brand); font-weight: 700; text-decoration: none; } .wa-skip:focus { top: 12px; } /* ---------- draft banner (deleted at go-live) ---------- */ .wa-draft { background: var(--wa-pending-bg); border-bottom: 1px solid var(--wa-hairline); padding-block: 8px; font-size: 14px; line-height: 1.45; } .wa-draft strong { color: var(--wa-pending); } /* ---------- link bar ---------- */ .wa-nav__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; border-bottom: 1px solid var(--wa-hairline); } .wa-nav__links, .wa-nav__right { display: flex; align-items: center; gap: 32px; } .wa-nav__links { display: none; } /* phones show the brand only, like the reference */ .wa-nav__right .wa-nav__link, .wa-nav__divider { display: none; } .wa-nav__link { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; color: var(--wa-text); font-size: 15px; font-weight: 600; text-decoration: none; } a.wa-nav__link:hover { color: var(--wa-brand-text); } .wa-nav__link--active { color: var(--wa-brand-text); } .wa-nav__link--pending { color: var(--wa-text-2); } .wa-nav__divider { width: 1px; height: 22px; background: var(--wa-hairline); } .wa-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--wa-text); text-decoration: none; } .wa-brand img { display: block; width: 48px; height: 28px; } .wa-brand__name { color: var(--wa-brand-text); font-size: 21px; font-style: italic; font-weight: 800; letter-spacing: -0.01em; } /* ---------- headline ---------- */ .wa-hero { padding-block: 24px 22px; } .wa-hero h1 { color: var(--wa-brand-text); font-size: clamp(1.625rem, 6.2vw, 2.125rem); font-style: italic; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; } .wa-hero p { margin-top: 14px; font-size: 15px; } /* ---------- stats and alerts row ---------- */ .wa-stats { border-top: 1px solid var(--wa-hairline); padding-block: 14px 16px; } .wa-updated { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; font-weight: 500; } .wa-facts { display: flex; flex-wrap: wrap; gap: 2px 22px; margin-top: 8px; font-size: 15px; font-weight: 500; } .wa-fact strong { color: var(--wa-brand-text); font-size: 1.1875rem; font-style: italic; font-weight: 800; margin-right: 2px; } .wa-subscribe { padding-block: 8px 28px; } /* phones: after the jobs, as in the reference */ .wa-subscribe__inner { padding: 18px 16px; border-radius: var(--wa-radius); background: var(--wa-raised); } .wa-subscribe__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-style: italic; font-weight: 700; line-height: 1.4; } .wa-subscribe__choices { display: grid; gap: 4px; margin-top: 10px; padding: 0; list-style: none; color: var(--wa-text-2); font-size: 14px; } .wa-subscribe__choices strong { color: var(--wa-text); font-weight: 600; } .wa-subscribe__note { margin-top: 10px; color: var(--wa-text-2); font-size: 14px; } /* mock-only form pieces (never in the deployed page) */ .wa-form { display: grid; gap: 10px; margin-top: 12px; } .wa-input { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border: 1px solid var(--wa-hairline); border-radius: 6px; background: var(--wa-canvas); color: var(--wa-text-2); font-size: 14px; } .wa-checks { display: grid; gap: 6px; font-size: 14px; } .wa-check { display: flex; align-items: flex-start; gap: 8px; } .wa-check::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 3px; border: 1.5px solid var(--wa-boundary); border-radius: 4px; } /* ---------- jobs ---------- */ .wa-jobs { border-top: 1px solid var(--wa-hairline); padding-block: 22px 12px; } .wa-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0; list-style: none; } .wa-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: 6px; color: var(--wa-text); font-size: 15px; line-height: 1.25; text-decoration: none; } .wa-chip--active { background: var(--wa-brand); color: var(--wa-on-brand); font-weight: 500; } .wa-slot { margin-top: 14px; } /* Honest empty table for the draft: real column headers, no rows. */ .wa-tableshell { border: 1px solid var(--wa-hairline); border-radius: var(--wa-radius); overflow: hidden; } .wa-tableshell__head { display: none; background: var(--wa-raised); font-size: 14px; font-weight: 600; } .wa-tableshell__body { display: grid; gap: 6px; padding: 28px 20px; color: var(--wa-text-2); font-size: 15px; text-align: center; } .wa-tableshell__body strong { color: var(--wa-text); font-size: 1.0625rem; } /* filter bar */ .wa-filterbar { display: none; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; color: var(--wa-text-2); font-size: 14px; } .wa-filterbar__label { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; } .wa-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px; border-radius: 6px; background: var(--wa-raised); color: var(--wa-text); font-size: 14px; } .wa-filter::after { content: ''; border: 4px solid transparent; border-top: 5px solid currentColor; margin-top: 5px; } .wa-allfilters { margin-top: 14px; } /* table rows: cards on phones, a numbered grid on wide screens */ .wa-table { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; } .wa-table__head { display: none; } .wa-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 14px 12px; border: 1px solid var(--wa-hairline); border-radius: var(--wa-radius); background: var(--wa-canvas); font-size: 14px; line-height: 1.35; } .wa-row::after { content: ''; order: 5; flex-basis: 100%; height: 0; } .wa-cell--num { display: none; } .wa-cell--title { order: 1; flex-basis: 100%; font-size: 16px; font-weight: 700; } .wa-cell--co { order: 2; flex-basis: 100%; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .wa-cell--loc, .wa-cell--pay { order: 3; padding: 4px 10px; border-radius: 6px; background: var(--wa-raised); } .wa-cell--model { order: 3; } .wa-cell--pay { order: 4; } .wa-cell--date { order: 6; flex: 1 1 auto; color: var(--wa-text-2); } .wa-cell--apply { order: 7; } .wa-pill { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 14px; font-weight: 500; } .wa-pill--remote { background: var(--wa-pill-remote-bg); color: var(--wa-pill-remote-fg); } .wa-pill--hybrid { background: var(--wa-pill-hybrid-bg); color: var(--wa-pill-hybrid-fg); } .wa-pill--onsite { background: var(--wa-pill-onsite-bg); color: var(--wa-pill-onsite-fg); } .wa-apply { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 16px; border-radius: 6px; background: var(--wa-brand); color: var(--wa-on-brand); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; } a.wa-apply:hover { background: var(--wa-brand-hover); } .wa-footnote { margin-top: 16px; color: var(--wa-text-2); font-size: 14px; } /* ---------- pending notes (draft only) ---------- */ .wa-pending-label, .wa-pending-tag { color: var(--wa-pending); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.3; text-transform: uppercase; } .wa-pending-inline { color: var(--wa-pending); font-weight: 500; } .wa-pending-note { display: grid; gap: 4px; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--wa-boundary); border-radius: 6px; color: var(--wa-text-2); font-size: 14px; } .wa-slot-link { margin-top: 16px; } .wa-pending-text { display: inline-flex; align-items: center; min-height: 48px; color: var(--wa-text-2); font-size: 15px; } /* ---------- live components, ready for the integration tickets ---------- */ .wa-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 22px; border-radius: 6px; background: var(--wa-brand); color: var(--wa-on-brand); font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; } .wa-button:hover { background: var(--wa-brand-hover); } .wa-button--block { display: flex; width: 100%; } .wa-gallery-frame { display: block; width: 100%; height: 720px; border: 1px solid var(--wa-hairline); border-radius: var(--wa-radius); background: #FFFFFF; /* Airtable's embed is always light */ } .wa-empty { display: grid; gap: 6px; padding: 28px 20px; border: 1px solid var(--wa-hairline); border-radius: var(--wa-radius); color: var(--wa-text-2); text-align: center; } /* ---------- footer ---------- */ .wa-footer { border-top: 1px solid var(--wa-hairline); padding-block: 14px max(36px, env(safe-area-inset-bottom, 0px)); color: var(--wa-text-2); font-size: 14px; } .wa-footer__links { display: flex; flex-wrap: wrap; gap: 0 26px; padding: 0; list-style: none; } .wa-footer__links a { display: inline-flex; align-items: center; min-height: 48px; color: var(--wa-text); font-size: 15px; font-weight: 500; text-decoration: none; } .wa-footer__links a:hover { color: var(--wa-brand-text); } .wa-footer__line { margin-top: 10px; } .wa-footer__line + .wa-footer__line { margin-top: 2px; } /* ---------- 404 ---------- */ .wa-notfound { padding-block: 44px 72px; } .wa-notfound h1 { color: var(--wa-brand-text); font-size: clamp(1.625rem, 6.2vw, 2.125rem); font-style: italic; font-weight: 800; line-height: 1.15; } .wa-notfound p { margin-top: 12px; max-width: 640px; color: var(--wa-text-2); } .wa-notfound .wa-button { margin-top: 24px; } /* ---------- wide screens ---------- */ @media (min-width: 900px) { :root { --wa-gutter: 32px; } .wa-nav__links { display: flex; } .wa-nav__right .wa-nav__link, .wa-nav__divider { display: inline-flex; } .wa-hero { padding-block: 40px 28px; } .wa-hero p { margin-top: 22px; font-size: 16px; } .wa-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "hero hero" "stats alerts" "jobs jobs"; } .wa-hero { grid-area: hero; } .wa-jobs { grid-area: jobs; } .wa-stats { grid-area: stats; padding: 22px 40px 22px 0; } .wa-updated { font-size: 15px; } .wa-facts { gap: 2px 32px; margin-top: 10px; font-size: 16px; } .wa-fact strong { font-size: 1.375rem; } .wa-subscribe { grid-area: alerts; border-top: 1px solid var(--wa-hairline); padding-block: 22px; } .wa-subscribe__inner { height: 100%; padding: 0 0 0 40px; border-left: 1px solid var(--wa-hairline); border-radius: 0; background: transparent; } .wa-subscribe__title { font-size: 15px; font-style: normal; font-weight: 500; } .wa-form { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .wa-checks { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; } .wa-jobs { padding-block: 26px 36px; } .wa-filterbar { display: flex; } .wa-allfilters { display: none; } .wa-tableshell__head { display: grid; } .wa-table { gap: 0; border: 1px solid var(--wa-hairline); border-bottom: 0; } .wa-table__head, .wa-tableshell__head, .wa-row { display: grid; grid-template-columns: 44px minmax(0, 2.4fr) 112px 108px 118px minmax(0, 1.6fr) minmax(0, 1.8fr) minmax(0, 1.2fr); align-items: stretch; } .wa-table__head { background: var(--wa-raised); font-size: 14px; font-weight: 600; } .wa-table__head > span, .wa-tableshell__head > span { white-space: nowrap; padding: 8px 10px; border-right: 1px solid var(--wa-hairline); } .wa-table__head, .wa-row { border-bottom: 1px solid var(--wa-hairline); } .wa-row { flex-wrap: nowrap; gap: 0; padding: 0; border: 0; border-bottom: 1px solid var(--wa-hairline); border-radius: 0; background: transparent; } .wa-row::after { display: none; } .wa-cell { order: 0; display: flex; align-items: center; min-width: 0; padding: 6px 10px; border-right: 1px solid var(--wa-hairline); border-radius: 0; background: transparent; font-size: 14px; font-weight: 400; text-decoration: none; color: var(--wa-text); } .wa-cell > .wa-clip, .wa-cell--title, .wa-cell--co, .wa-cell--loc, .wa-cell--pay { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .wa-cell--title, .wa-cell--co, .wa-cell--loc, .wa-cell--pay { display: block; line-height: 32px; } .wa-cell--num { display: flex; justify-content: center; color: var(--wa-text-2); } .wa-cell--title { font-size: 14px; font-weight: 600; } .wa-cell--date { flex: none; color: var(--wa-text-2); } .wa-table__head > span:last-child, .wa-tableshell__head > span:last-child, .wa-row > .wa-cell:last-of-type { border-right: 0; } .wa-apply { min-height: 28px; padding: 2px 9px; gap: 5px; border-radius: 4px; font-size: 14px; } }