/* Robbi — Quiet design system, server-rendered SEO pages. * Tokens mirror frontend/src/styles/variables.css (that file is the source * of truth — update here if it changes). Lives outside wwwroot because the * Vite build wipes wwwroot on every `npm run build`. */ :root { --bg: #F3EFE7; --paper: #FBF9F4; --paper-hi: #FFFDF7; --ink: #1C1C19; --ink-2: #2A2824; --sub: #6B655A; --sub-hi: #918879; --line: #E4DFD4; --line-2: #D9D2C4; --stone: #D9D2C4; --rust: #B8533A; --sage: #5C7A5F; --scrim: rgba(28, 28, 25, 0.45); --glass-bg: rgba(251, 249, 244, 0.92); --serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --sans: 'Inter Tight', 'Inter', -apple-system, system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); } * { margin: 0; padding: 0; box-sizing: border-box; } /* ---------- signed-in vs anonymous ---------- * The HTML always ships the anonymous copy — that is what crawlers index and * what a visitor without JavaScript sees. The inline probe in sets * data-auth before paint, so nothing flashes. These rules only ever *hide*: * whichever variant is shown keeps its own display value. */ :root:not([data-auth="user"]) .seo-user-only { display: none; } [data-auth="user"] .seo-anon-only { display: none; } body { font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.55; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--ink); text-decoration: none; } a:hover { color: var(--rust); } em { font-style: italic; } .seo-container { max-width: 1160px; margin: 0 auto; padding: 0 28px; } /* ---------- type ---------- */ .seo-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -1.2px; line-height: 1.04; margin: 14px 0 16px; max-width: 16ch; text-wrap: pretty; } .seo-h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.6px; line-height: 1.12; } .seo-kicker { font-family: var(--mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; color: var(--sub); } .seo-mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2px; } .seo-sub { color: var(--sub); } .seo-note { color: var(--sub); font-size: 13px; margin-top: 12px; max-width: 60ch; } /* ---------- nav ---------- * The header and footer are the SPA's shared chrome — markup in * Seo/Templates/Layout.cs, styles in /seo-assets/site-chrome.css (generated * from frontend/src/styles/site-chrome.css). Nothing for them lives here. */ /* ---------- buttons ---------- */ .seo-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 14px; font-weight: 500; border: 1px solid transparent; border-radius: 14px; padding: 11px 20px; cursor: pointer; background: none; transition: background 150ms var(--ease-enter), transform 150ms var(--ease-enter), border-color 150ms var(--ease-enter), color 150ms var(--ease-enter); } .seo-btn:active { transform: scale(0.98); } .seo-btn-primary { background: var(--ink); color: var(--paper); } .seo-btn-primary:hover { background: var(--ink-2); color: var(--paper); } .seo-btn-secondary { border-color: var(--line-2); color: var(--ink); } .seo-btn-secondary:hover { background: var(--paper); color: var(--ink); } .seo-btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 11px; } .seo-btn-lg { padding: 15px 26px; font-size: 15px; border-radius: 16px; } /* ---------- breadcrumbs ---------- */ .seo-breadcrumbs { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--sub-hi); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .seo-breadcrumbs a { color: var(--sub); } .seo-breadcrumbs a:hover { color: var(--ink); } .seo-crumb-sep { color: var(--line-2); } /* ---------- hero ---------- */ .seo-hero { padding: 40px 0 30px; } .seo-hero .seo-kicker { margin-top: 16px; } .seo-hero-sub { color: var(--sub); font-size: 17px; max-width: 52ch; text-wrap: pretty; } /* Facts strip — every number here comes from live data or the salary dataset. Nothing invented; an unknown fact is omitted, not guessed. */ .seo-facts { display: flex; flex-wrap: wrap; margin-top: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .seo-fact { flex: 0 0 auto; padding: 16px 26px 16px 0; margin-right: 26px; border-right: 1px solid var(--line); } .seo-fact:last-child { border-right: none; margin-right: 0; } .seo-fact-n { font-family: var(--serif); font-size: 26px; letter-spacing: -0.5px; line-height: 1.1; } .seo-fact-unit { font-family: var(--serif); font-size: 16px; color: var(--sub); } .seo-fact-l { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--sub); margin-top: 4px; } .seo-trust { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; font-size: 13.5px; color: var(--sub); } .seo-trust b { font-weight: 500; color: var(--ink); } .seo-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--rust); flex: 0 0 auto; } /* ---------- two-column body ---------- */ .seo-cols { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 56px; align-items: start; padding-bottom: 40px; } .seo-rail { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 14px; } /* ---------- sections ---------- */ .seo-section { padding: 38px 0; } /* Inside the two-column body the rule sits in the column, not across the viewport — full-width hub sections stay un-ruled. */ .seo-cols main > .seo-section { border-top: 1px solid var(--line); } .seo-cols main > .seo-section:first-child { border-top: none; padding-top: 8px; } .seo-section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; } .seo-section-num { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--sub-hi); padding-top: 6px; } .seo-section-head p { color: var(--sub); font-size: 14px; margin-top: 4px; } /* ---------- job cards ---------- */ .seo-job-list { display: flex; flex-direction: column; gap: 10px; } .seo-job-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; transition: background 150ms var(--ease-enter), border-color 150ms var(--ease-enter); } .seo-job-card:hover { background: var(--paper-hi); border-color: var(--line-2); } .seo-job-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .seo-job-card h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; letter-spacing: -0.3px; line-height: 1.2; } /* Already opened. The browser's own visited state covers a listing followed from this very page; .is-visited (set by seo.js from the shared store) carries the same signal over from the app, where the link to the same listing differs only by query parameters. Colour only — that is all :visited is allowed to change. */ .seo-job-card h3 a:visited, .seo-job-card.is-visited h3 a { color: var(--sub-hi); } .seo-job-card h3 a:hover { color: var(--rust); } .seo-job-pay { font-family: var(--mono); font-size: 13px; white-space: nowrap; padding-top: 3px; } .seo-job-meta { color: var(--sub); font-size: 13.5px; margin-top: 5px; } .seo-job-snippet { color: var(--sub); font-size: 13.5px; margin-top: 10px; max-width: 64ch; text-wrap: pretty; } .seo-job-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .seo-job-foot .seo-spacer { flex: 1; } .seo-save { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 12.5px; color: var(--sub); background: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 13px; transition: color 150ms var(--ease-enter), border-color 150ms var(--ease-enter); } .seo-save:hover { color: var(--ink); border-color: var(--ink); } button.seo-save { cursor: pointer; font-size: 12.5px; } button.seo-save:disabled { opacity: 0.6; cursor: default; } /* Already in the pipeline — clicking again opens the tracker. */ .seo-save.on { background: var(--ink); border-color: var(--ink); color: var(--paper); } .seo-save.on:hover { color: var(--paper); } .seo-empty { background: var(--paper); border: 1px dashed var(--line-2); border-radius: 16px; padding: 24px; color: var(--sub); } .seo-more { margin-top: 14px; } /* ---------- chips ---------- */ .seo-chip-row { display: flex; flex-wrap: wrap; gap: 7px; } .seo-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; color: var(--ink); } .seo-chip-quiet { background: transparent; color: var(--sub); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase; padding: 5px 10px; } a.seo-chip { transition: background 150ms var(--ease-enter), border-color 150ms var(--ease-enter); } a.seo-chip:hover { background: var(--paper-hi); border-color: var(--line-2); color: var(--ink); } /* ---------- tiles (directory) ---------- */ .seo-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .seo-tile { display: flex; flex-direction: column; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; transition: transform 150ms var(--ease-enter), background 150ms var(--ease-enter); } .seo-tile:hover { background: var(--paper-hi); transform: translateY(-2px); color: var(--ink); } .seo-tile-title { font-family: var(--serif); font-size: 17px; } .seo-tile-meta { color: var(--sub); font-size: 13.5px; } /* ---------- salary table ---------- */ .seo-salary-table { width: 100%; max-width: 600px; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .seo-salary-table th, .seo-salary-table td { text-align: left; padding: 13px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; } .seo-salary-table th { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--sub); font-weight: 500; } .seo-salary-table tr:last-child td { border-bottom: none; } .seo-salary-table td.seo-n { font-family: var(--mono); font-size: 13.5px; } .seo-salary-hr { color: var(--sub); } /* ---------- faq ---------- */ .seo-faq { display: flex; flex-direction: column; gap: 9px; max-width: 760px; } .seo-faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; } .seo-faq-item summary { cursor: pointer; font-family: var(--serif); font-size: 16px; letter-spacing: -0.2px; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; } .seo-faq-item summary::-webkit-details-marker { display: none; } .seo-faq-item summary::after { content: '+'; font-family: var(--serif); font-size: 20px; color: var(--sub-hi); } .seo-faq-item[open] summary::after { content: '–'; } .seo-faq-item p { margin-top: 11px; color: var(--sub); font-size: 14px; max-width: 68ch; text-wrap: pretty; } /* ---------- numbered tips ---------- */ .seo-tips { display: flex; flex-direction: column; max-width: 760px; } .seo-tip { display: flex; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); } .seo-tip:last-child { border-bottom: none; } .seo-tip-num { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--sub-hi); padding-top: 4px; } .seo-tip p { font-size: 14.5px; max-width: 64ch; text-wrap: pretty; } /* ---------- career path ---------- */ .seo-path { display: flex; flex-direction: column; max-width: 560px; } .seo-path-step { display: flex; align-items: center; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 13px 18px; font-size: 14.5px; } .seo-path-num { color: var(--sub-hi); font-size: 11px; } .seo-path-line { width: 1px; height: 12px; background: var(--line-2); margin-left: 38px; } /* ---------- prose ---------- */ .seo-prose { max-width: 68ch; } .seo-prose p { margin-bottom: 13px; font-size: 15px; line-height: 1.68; color: var(--ink-2); } /* ---------- rail ---------- */ .seo-rail-cta { background: var(--ink); color: var(--paper); border-radius: 20px; padding: 22px; } .seo-rail-cta .seo-kicker { color: rgba(251, 249, 244, 0.6); } .seo-rail-cta h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; letter-spacing: -0.4px; line-height: 1.15; margin: 10px 0 8px; } .seo-rail-cta p { font-size: 13.5px; color: rgba(251, 249, 244, 0.72); margin-bottom: 16px; } .seo-rail-cta .seo-btn-primary { background: var(--paper); color: var(--ink); width: 100%; justify-content: center; } .seo-rail-cta .seo-btn-primary:hover { background: var(--paper-hi); color: var(--ink); } .seo-rail-fine { font-size: 11.5px; color: rgba(251, 249, 244, 0.5); margin: 12px 0 0; text-align: center; } .seo-mini { margin-top: 18px; border-top: 1px solid rgba(251, 249, 244, 0.14); padding-top: 14px; display: flex; flex-direction: column; gap: 7px; } .seo-mini-row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: rgba(251, 249, 244, 0.85); } .seo-mini-row .seo-mini-stage { font-family: var(--mono); font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(251, 249, 244, 0.5); width: 62px; flex: 0 0 auto; } .seo-mini-row .seo-mini-bar { flex: 1; height: 3px; border-radius: 999px; background: rgba(251, 249, 244, 0.16); overflow: hidden; } .seo-mini-row .seo-mini-bar i { display: block; height: 100%; background: var(--paper); border-radius: 999px; } .seo-rail-box { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; } .seo-rail-box h4 { font-family: var(--mono); font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.1px; color: var(--sub); margin-bottom: 12px; } .seo-rail-box p { font-size: 13.5px; color: var(--sub); margin-bottom: 14px; } .seo-rail-box .seo-btn { width: 100%; justify-content: center; } .seo-toc { display: flex; flex-direction: column; gap: 9px; } .seo-toc a { font-size: 13.5px; color: var(--sub); display: flex; justify-content: space-between; gap: 10px; } .seo-toc a:hover { color: var(--ink); } .seo-toc a b { font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--sub-hi); } /* ---------- big CTA ---------- */ .seo-cta { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 44px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; margin: 8px 0 48px; } .seo-cta .seo-h2 { max-width: 22ch; margin-top: 12px; } .seo-cta p { color: var(--sub); max-width: 46ch; margin-top: 10px; font-size: 15px; } .seo-cta-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .seo-cta-trust { font-size: 12.5px; color: var(--sub-hi); } /* ---------- sticky mobile bar ---------- */ .seo-mobile-bar { display: none; } @media (max-width: 980px) { .seo-cols { grid-template-columns: 1fr; gap: 0; } .seo-rail { position: static; margin: 28px 0 0; } .seo-rail-box-toc { display: none; } } @media (max-width: 640px) { .seo-container { padding: 0 22px; } .seo-h1 { letter-spacing: -0.8px; } .seo-fact { padding-right: 18px; margin-right: 18px; } .seo-cta { padding: 30px 24px; } .seo-job-card { padding: 18px 18px; } .seo-job-top { flex-direction: column; gap: 6px; } .seo-job-pay { padding-top: 0; } /* Break after the chips so the two actions stay side by side rather than stacking one per line. */ .seo-job-foot .seo-spacer { flex: 1 0 100%; height: 0; } body { padding-bottom: 74px; } .seo-mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: center; gap: 12px; padding: 12px 20px; background: rgba(251, 249, 244, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); } .seo-mobile-bar .seo-mobile-txt { flex: 1; font-size: 12.5px; line-height: 1.35; color: var(--sub); } .seo-mobile-bar .seo-mobile-txt b { display: block; font-family: var(--serif); font-weight: 400; font-size: 15px; color: var(--ink); } } /* ---------- job description page (/job/{token}) ---------- */ /* The step between a listing and the employer's site. Narrow measure and one dominant action — there is nothing to browse here, only to decide. */ /* padding-block only — the shorthand here used to wipe out the gutters .seo-container sets, leaving the text flush against the screen edge. */ .seo-jp { max-width: 640px; padding-block: 40px 60px; } .seo-jp-back { display: inline-block; margin-bottom: 22px; font-size: 13.5px; color: var(--sub); } .seo-jp-back:hover { color: var(--ink); } .seo-jp-title { margin-bottom: 10px; } .seo-jp-meta { color: var(--sub); font-size: 15px; margin-bottom: 14px; } .seo-jp-snippet { color: var(--ink-2); font-size: 15.5px; line-height: 1.7; max-width: 60ch; margin-top: 18px; } .seo-jp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 26px 0 18px; } .seo-jp-note { color: var(--sub); font-size: 13.5px; line-height: 1.6; max-width: 56ch; } .seo-jp-aside { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); } .seo-jp-aside .seo-h2 { font-size: 22px; margin-bottom: 12px; } .seo-jp-aside p { color: var(--sub); line-height: 1.65; margin-bottom: 16px; max-width: 56ch; } @media (max-width: 640px) { .seo-jp { padding-block: 28px 48px; } .seo-jp-actions .seo-btn-lg { width: 100%; justify-content: center; } }