/* jobs.co.nz — one stylesheet, token-driven. Manrope for headings, DM Sans for body (self-hosted in static/fonts/, so the site renders identically offline). No framework, no build step. Modern CSS is used where it earns its place, always with a working fallback: the page must stay usable if a feature isn't supported. */ /* fonts.css is linked from the , NOT imported here. @import serialises: the browser cannot request it until this file has arrived and been parsed, and cannot request the woff2 until that in turn arrives — three round trips before any text can be drawn. Linked in the head it is fetched alongside this file. */ /* ---------------------------------------------------------------- tokens */ :root { color-scheme: light; --brand: #0b6b5b; /* jade — NZ, calm, not another blue job board */ --brand-dark: #084c41; --brand-tint: #e8f4f1; --brand-tint-2: #d3ebe5; /* Two coral values on purpose: the bright one is for borders, tints and large display use; the deep one is the only value allowed *behind white text* — white on #e8552f is 3.64:1, which fails AA on the three most important buttons on the site. */ --accent: #c53f1e; --accent-hover: #a83318; --accent-bright: #e8552f; --ink: #10221f; --ink-2: #3d514c; --muted: #5d716b; /* 4.9:1 on --bg; the old #6b807a was 3.97:1 */ --line: #dfe7e4; --line-2: #eef3f1; --bg: #f6f9f8; --surface: #fff; /* semantic name — inverts in dark mode */ --white: #fff; /* literal white; stays white in dark mode */ --warn-bg: #fff4e5; --warn-ink: #7a4200; --err-bg: #fdeceb; --err-ink: #a3281a; --ok-bg: #e6f4ee; --ok-ink: #0b6b45; --featured-bg: #fdeae4; --featured-ink: #a63417; /* 5.8:1 — the old #c53f1e on this tint was 4.4:1 */ --grey-tag-ink: #4f625c; /* One radius system instead of six ad-hoc values. */ --radius-s: 10px; --radius-m: 16px; --radius-l: 20px; --radius-pill: 999px; /* Elevation as a scale, so surfaces can differ from each other. */ --shadow-1: 0 1px 2px rgb(16 34 31 / .06); --shadow-2: 0 1px 2px rgb(16 34 31 / .06), 0 8px 24px rgb(16 34 31 / .08); --shadow-3: 0 2px 4px rgb(16 34 31 / .08), 0 16px 40px rgb(16 34 31 / .12); /* Fluid type: one scale that grows with the viewport, instead of a fixed scale with a single breakpoint. */ --step-2: clamp(2rem, 1.45rem + 2.4vw, 3rem); --step-1: clamp(1.4rem, 1.2rem + .9vw, 1.75rem); --step-0: 1.1rem; --space-section: clamp(40px, 4vw + 20px, 72px); --font-body: "DM Sans", system-ui, sans-serif; --font-head: "Manrope", system-ui, sans-serif; --wrap: 1120px; --tap: 44px; /* minimum tap target */ --focus: var(--brand); } /* Dark mode follows the system only — no toggle to build, persist and find room for. Job seekers browse at night on phones; forcing a bright page is itself a dated tell. */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --brand: #35a68f; /* lifted: #0b6b5b is 2.5:1 on a dark surface */ --brand-dark: #6cc7b2; --brand-tint: #16302a; --brand-tint-2: #1d3d35; --accent: #e8552f; /* bright coral is fine on dark; white on it is 3.6:1 so buttons take dark ink instead — see .btn below */ --accent-hover: #ff6f4a; --accent-bright: #ff6f4a; --ink: #e6efec; --ink-2: #b9c8c3; --muted: #93a6a0; --line: #2c3a35; --line-2: #22302b; --bg: #101815; --surface: #1a2420; --warn-bg: #33240f; --warn-ink: #f0c67a; --err-bg: #351a17; --err-ink: #f5a79a; --ok-bg: #12301f; --ok-ink: #7fd3a5; --featured-bg: #3a1d13; --featured-ink: #ffab8d; --grey-tag-ink: #a8b8b3; --shadow-1: 0 1px 2px rgb(0 0 0 / .4); --shadow-2: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35); --shadow-3: 0 2px 4px rgb(0 0 0 / .5), 0 16px 40px rgb(0 0 0 / .45); --focus: #6cc7b2; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; accent-color: var(--brand); /* brands native radios/checkboxes in one line */ } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; } h1 { font-size: var(--step-2); font-weight: 700; letter-spacing: -.025em; text-wrap: balance; } h2 { font-size: var(--step-1); font-weight: 700; letter-spacing: -.015em; text-wrap: balance; } h3 { font-size: var(--step-0); font-weight: 700; letter-spacing: -.01em; } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--brand); } a:hover { color: var(--brand-dark); } small { font-size: .85rem; } /* One authored focus treatment. There was none — keyboard users got the UA hairline, which is invisible on the jade hero and on solid fills. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* …except the round ones. The blanket 4px radius above put a square ring around a circular radio, and a chunky one around a checkbox. Native controls keep their own shape. */ input[type=radio]:focus-visible { border-radius: 50%; outline-offset: 3px; } input[type=checkbox]:focus-visible { border-radius: 3px; outline-offset: 3px; } /* A radio inside a .choice card: the card shows the selection, so the ring belongs to the card, not to a 16px dot buried in it. :has(:focus-visible) and not :focus-within, or the card rings on every mouse click — the selected state alone is the answer there. A browser without :has() ignores both rules and the control keeps its own ring, which is the right thing to lose. */ .choice:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); } .choice:has(:focus-visible) input:focus-visible { outline: none; } .hero :where(a, button):focus-visible, .site-footer a:focus-visible, .btn:focus-visible { outline-color: var(--white); outline-offset: 3px; } .btn--ghost:focus-visible { outline-color: var(--focus); } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } .wrap--narrow { max-width: 720px; } .muted { color: var(--muted); } .center { text-align: center; } .stack > * + * { margin-top: 14px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------------------------------------------------------------- header */ .site-header { background: var(--surface); border-bottom: 1px solid var(--line-2); position: sticky; top: 0; z-index: 50; } .site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; flex-wrap: wrap; } .logo { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; letter-spacing: -.03em; color: var(--ink); text-decoration: none; white-space: nowrap; } .logo span { color: var(--brand); } .site-nav { display: flex; gap: 4px; align-items: center; margin-left: auto; flex-wrap: wrap; } .site-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 10px; border-radius: var(--radius-s); color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 500; } .site-nav a:hover { color: var(--brand); background: var(--brand-tint); } .site-nav a[aria-current="page"] { color: var(--brand); font-weight: 600; } /* .site-nav a is more specific than .btn, so a button in the nav would otherwise render dark-on-dark. Restore the button's own colours. */ .site-nav a.btn, .site-nav a.btn:hover { color: var(--white); background: var(--brand); } .site-nav a.btn:hover { background: var(--brand-dark); } /* Sign out has to be a POST, so it's a form — styled to sit in the row as if it were one of the links beside it. */ .site-nav .nav-signout { margin: 0; display: inline-flex; } .site-nav .nav-signout button { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 10px; border: 0; background: none; cursor: pointer; border-radius: var(--radius-s); font: 500 .95rem var(--font-body); color: var(--muted); } .site-nav .nav-signout button:hover { color: var(--brand); background: var(--brand-tint); } .site-nav a.btn--ghost, .site-nav a.btn--ghost:hover { color: var(--ink); background: var(--surface); } .header-cta { margin-left: 0; } .nav-toggle { display: none; align-items: center; gap: 8px; margin-left: auto; min-height: var(--tap); padding: 0 12px; background: none; border: 1px solid var(--line); border-radius: var(--radius-s); font: 600 .95rem var(--font-body); color: var(--ink); cursor: pointer; } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); font: 600 .95rem var(--font-body); padding: 11px 20px; border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--brand); color: var(--white); text-decoration: none; cursor: pointer; white-space: nowrap; max-width: 100%; transition: background .15s, border-color .15s, color .15s; } /* nowrap is right for a short label and wrong for a long one. "Send the link to hr@kahuhealth.co.nz" ran 9px past its form on a phone, because a button that cannot wrap can only overflow. Below 640px it wraps instead; labels that already fit are unaffected. */ @media (max-width: 640px) { .btn { white-space: normal; overflow-wrap: anywhere; } } .btn:hover { background: var(--brand-dark); color: var(--white); } .btn--accent { background: var(--accent); } .btn--accent:hover { background: var(--accent-hover); } .btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink); } .btn--ghost:hover { background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--brand-dark); } .btn--sm { padding: 7px 14px; font-size: .85rem; min-height: 38px; } .btn--block { width: 100%; } .btn[disabled] { opacity: .5; pointer-events: none; } .btn svg { width: 18px; height: 18px; } /* The dark palette lifts the fills, and white on those is only 3.0:1 (jade) / 3.6:1 (coral). Dark ink on them is 5.7:1 and 5.0:1. */ @media (prefers-color-scheme: dark) { .btn, .btn:hover, .site-nav a.btn, .site-nav a.btn:hover { color: #08201b; } .btn--accent, .btn--accent:hover { color: #2a0d05; } .btn--ghost, .btn--ghost:hover { color: var(--ink); } .chip:hover, .chip--on { color: #08201b; } .filter-count { color: #08201b; } } /* Press feedback works on touch; hover never fires there, and most of this traffic is thumbs. Motion is opt-out. */ @media (prefers-reduced-motion: no-preference) { .btn { transition: background .15s, border-color .15s, color .15s, transform .1s; } .btn:active { transform: scale(.97); } .job-card { transition: border-color .15s, box-shadow .15s, transform .1s; } .job-card:active { transform: scale(.995); } .chip { transition: background .15s, border-color .15s, color .15s; } } /* ----------------------------------------------------------------- forms */ label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 5px; } /* `input:not([type])` is in this list because the type attribute is optional in HTML and defaults to text. Three admin fields were written without one and matched nothing here: no border, no padding, no min-height — a bare 21px UA input on an otherwise styled page. An allow-list of types fails silently and invisibly, so the default case is now covered. `input[type=file]` is here for its height only; the rest of these do nothing to it. */ input[type=text], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=password], input[type=search], input[type=file], input:not([type]), select, textarea { width: 100%; font: 400 1rem var(--font-body); color: var(--ink); min-height: var(--tap); padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); } /* Must repeat the type list rather than say `input:focus`. A bare `input` catches radios and checkboxes, and an inset square ring is the wrong shape for both — the round-control rules above are written against :focus-visible, which a mouse click on a radio does not match, so this rule won and drew a box around the dot. */ input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=file]:focus, input:not([type]):focus, select:focus, textarea:focus { outline: 3px solid var(--focus); outline-offset: -1px; border-color: var(--brand); } textarea { min-height: 160px; resize: vertical; } .field { margin-bottom: 16px; } .field .hint { font-size: .82rem; color: var(--muted); margin-top: 4px; } /* Required / optional marker on every labelled field. --------------------------------------------------------------------------------------- Driven by the control's OWN `required` attribute rather than a pill written into each label by hand. A hand-placed marker drifts the moment a field's rules change, and then the form is telling people something the validation does not actually enforce — worse than no marker at all. This cannot drift: it reads the same attribute the browser and the server-side validation read. :has() is required for this. Where it is unsupported the markers simply do not appear, which is exactly the old behaviour and costs nothing — `required` still works. */ .field:has(> input[required], > select[required], > textarea[required]) > label::after, .field:has(> .pill-input > input[required]) > label::after { content: "Required"; background: var(--brand-tint); color: var(--brand-dark); } .field:has(> input, > select, > textarea):not( :has(> input[required], > select[required], > textarea[required]) ) > label::after { content: "Optional"; background: var(--line-2); color: var(--muted); } .field > label::after { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; } /* The honeypot is hidden from people; a marker on it would be a hint to a bot and clutter for anyone reading the page with styles off. */ .field:has(> .hp) > label::after { content: none; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; } .check input { width: auto; min-height: 0; margin-top: 3px; } .hp { position: absolute; left: -9999px; } /* honeypot */ /* Radio/checkbox as a selectable card. :has() does the highlight; without it the native control still shows the state, so nothing is lost. */ .choice { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; padding: 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); cursor: pointer; } .choice:hover { border-color: var(--brand-tint-2); } .choice:has(:checked) { border-color: var(--brand); background: var(--brand-tint); } .choice input { width: auto; min-height: 0; margin-top: 3px; } .field:has(input:user-invalid) input { border-color: var(--err-ink); } /* ----------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-m); padding: 22px; } .card + .card { margin-top: 14px; } .panel { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-m); padding: 26px; box-shadow: var(--shadow-1); } /* The logo panel sits between the header and the stats, and .panel carries padding but no margin — so without this it touches whatever follows it. */ .panel--logo { margin: 22px 0; } /* ------------------------------------------------------------- job cards */ .job-list { container-type: inline-size; } /* card adapts to its column, not the page */ .job-card { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-m); padding: 16px 18px; text-decoration: none; color: inherit; } .job-card:hover { border-color: var(--brand); box-shadow: var(--shadow-2); color: inherit; } .job-card + .job-card { margin-top: 10px; } /* Companies have no logos yet; an initial tile gives the card the visual anchor every current board has, without inventing branding. */ .job-card__logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--brand-tint); color: var(--brand-dark); font: 700 .95rem var(--font-head); letter-spacing: .02em; } /* A grid item defaults to min-width:auto, so the 1fr column refuses to shrink below its content's min-content width and the card overflows the phone viewport. */ .job-card__body { display: block; min-width: 0; } .job-card__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .job-card__top h3 { margin: 0 0 2px; font-size: 1.08rem; min-width: 0; overflow-wrap: anywhere; } .job-card__ago { font-size: .8rem; color: var(--muted); white-space: nowrap; flex: 0 0 auto; } .job-card .company { display: block; font-weight: 600; color: var(--ink-2); font-size: .95rem; } /* A slim accent bar instead of a coloured border + tint + badge all saying the same thing. */ .job-card--featured { box-shadow: inset 3px 0 0 var(--accent-bright); } .job-card--featured:hover { box-shadow: inset 3px 0 0 var(--accent-bright), var(--shadow-2); } .job-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: .88rem; margin-top: 8px; } .job-meta span { display: inline-flex; align-items: center; gap: 5px; } .job-meta svg { width: 14px; height: 14px; flex: 0 0 auto; } .job-salary { display: block; margin-top: 8px; font-weight: 700; color: var(--brand-dark); } @container (max-width: 380px) { .job-card { grid-template-columns: 1fr; } .job-card__logo { display: none; } } /* ------------------------------------------------------------------ tags */ .tag { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand-dark); } .tag--featured { background: var(--featured-bg); color: var(--featured-ink); } .tag--verified { background: var(--ok-bg); color: var(--ok-ink); } .tag--warn { background: var(--warn-bg); color: var(--warn-ink); } .tag--grey { background: var(--line-2); color: var(--grey-tag-ink); } .tag--salary { background: #eef6e8; color: #3a6320; } /* ------------------------------------------------------------------ hero */ .hero { background: linear-gradient(135deg, var(--brand-dark), var(--brand) 70%); color: var(--white); padding: clamp(44px, 5vw, 68px) 0 clamp(36px, 4vw, 52px); } @media (prefers-color-scheme: dark) { .hero { background: linear-gradient(135deg, #0d2621, #14342d 70%); } } .hero h1 { color: var(--white); max-width: 16ch; } .hero p.lede { font-size: clamp(1rem, .95rem + .4vw, 1.18rem); color: rgb(255 255 255 / .88); max-width: 54ch; } .searchbar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; background: var(--surface); padding: 6px; border-radius: var(--radius-pill); box-shadow: var(--shadow-3); margin-top: 26px; max-width: 860px; } .searchbar input, .searchbar select { border: 0; background: none; min-height: 46px; } .searchbar input:focus, .searchbar select:focus { outline-offset: -3px; } .searchbar .search-field { position: relative; display: flex; align-items: center; } .searchbar .search-field svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; } .searchbar .search-field input { padding-left: 42px; } /* No divider: the searchbar itself is the bordered control, and a rule between the two fields made the select read as a separate boxed input sitting inside it. */ .searchbar select { border: 0; border-radius: 0; max-width: 230px; } .hero-links { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; } .hero-links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px; border: 1px solid rgb(255 255 255 / .35); border-radius: var(--radius-pill); color: var(--white); text-decoration: none; font-size: .9rem; font-weight: 500; } .hero-links a:hover { background: rgb(255 255 255 / .12); color: var(--white); } /* ----------------------------------------------------------------- pulse */ .pulse { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 30px; border-top: 1px solid rgb(255 255 255 / .18); padding-top: 22px; } .pulse div b { display: block; font: 700 1.7rem var(--font-head); color: var(--white); letter-spacing: -.02em; } .pulse div span { font-size: .85rem; color: rgb(255 255 255 / .78); } /* --------------------------------------------------------------- banners */ .banner { border-radius: var(--radius-m); padding: 18px 22px; margin: 22px 0; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .banner--founding { background: linear-gradient(100deg, var(--featured-bg), color-mix(in oklab, var(--featured-bg), var(--surface) 40%)); border: 1px solid color-mix(in oklab, var(--accent-bright), transparent 70%); } .banner--founding b { font-family: var(--font-head); } .banner--info { background: var(--brand-tint); border: 1px solid var(--brand-tint-2); } .banner--demo { background: var(--warn-bg); border: 1px solid color-mix(in oklab, var(--warn-ink), transparent 70%); color: var(--warn-ink); font-size: .9rem; } /* Same palette as --demo but full size: it flags an unfinished legal page, which is not a footnote. */ .banner--warn { background: var(--warn-bg); border: 1px solid color-mix(in oklab, var(--warn-ink), transparent 70%); color: var(--warn-ink); } /* ----------------------------------------------------------- legal pages Long-form prose rather than the card grids everywhere else, so it gets a measure that is actually readable — around 70 characters — and headings with enough space to scan by. */ .legal { max-width: 74ch; } .legal h2 { margin: 34px 0 10px; font-size: 1.25rem; } .legal h3 { margin: 22px 0 6px; font-size: 1rem; color: var(--ink-2); } .legal p, .legal li { line-height: 1.65; } .legal ul { margin: 12px 0; padding-left: 22px; } .legal li { margin-bottom: 8px; } .legal li::marker { color: var(--brand); } /* ------------------------------------------------------------ empty state A dashed border is a wireframe convention — it reads as "unfinished", which is fatal on a board that deliberately launches empty. Tinted surface + spot mark + one clear action. */ .empty { border: 0; border-radius: var(--radius-l); padding: clamp(32px, 5vw, 52px) 28px; text-align: center; background: linear-gradient(180deg, var(--brand-tint), var(--surface) 72%); box-shadow: var(--shadow-1); } .empty__mark { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 16px; border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-1); color: var(--brand); } .empty__mark svg { width: 32px; height: 32px; } .empty h3 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); } .empty p { max-width: 56ch; margin-left: auto; margin-right: auto; color: var(--ink-2); } .empty .forks { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } /* ---------------------------------------------------------------- layout */ /* padding-block, NOT the padding shorthand: most pages are `class="wrap section"`, and a shorthand here resets .wrap's 20px inline gutter to zero, putting every card flush against the edge of the screen on a phone. */ .section { padding-block: var(--space-section); } .section--tight { padding-block: clamp(24px, 3vw, 34px); } /* Alternating bands give the page rhythm, so the cards don't have to carry it with borders */ .band { background: var(--surface); border-block: 1px solid var(--line-2); } .grid-2 { display: grid; grid-template-columns: 1fr 330px; gap: 30px; align-items: start; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* Grid items default to min-width:auto, so a column won't shrink below its content and the whole page gains a horizontal scrollbar on a narrow phone. This is the fix, applied once. */ .grid-2 > *, .grid-3 > *, .grid-4 > *, .statgrid > * { min-width: 0; } .sidebar { position: sticky; top: 84px; } /* --------------------------------------------------------------- filters */ .filters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; } /* A 16-checkbox group in a 1/5 column renders as 16 stacked rows. It takes the whole row. */ .filters .field--wide { grid-column: 1 / -1; } .filters .field { margin: 0; } /* Mobile: keywords + a Filters button, with the rest in a sheet. The full form stays in the DOM and is simply revealed when or JS is unavailable. */ .filterbar { display: none; gap: 8px; align-items: center; } .filterbar input { flex: 1 1 auto; } .filter-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--brand); color: var(--white); font-size: .78rem; font-weight: 700; } .active-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; } .active-filters a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand-dark); text-decoration: none; font-size: .86rem; font-weight: 600; } .active-filters a:hover { background: var(--brand-tint-2); } dialog.sheet { width: 100%; max-width: 640px; margin: auto auto 0; padding: 0; border: 0; border-radius: var(--radius-l) var(--radius-l) 0 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); } dialog.sheet::backdrop { background: rgb(0 0 0 / .45); } dialog.sheet .sheet__body { padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); } dialog.sheet h2 { margin-bottom: 14px; } @media (prefers-reduced-motion: no-preference) { dialog.sheet { transition: translate .2s ease, opacity .2s ease; } @starting-style { dialog.sheet[open] { translate: 0 12px; opacity: 0; } } } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: .88rem; text-decoration: none; color: var(--ink-2); } .chip:hover, .chip--on { background: var(--brand); border-color: var(--brand); color: var(--white); } /* A 9-chip wrap wall eats the screen on a phone; scroll it instead. Only on phones — in a desktop sidebar a half-cut chip with no scrollbar just looks broken. */ @media (max-width: 640px) { .chips--scroll { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; margin-inline: -20px; padding-inline: 20px; } /* bleed to the screen edge */ .chips--scroll .chip { flex: 0 0 auto; scroll-snap-align: start; } } /* ---------------------------------------------------------------- tables */ table.data { width: 100%; border-collapse: collapse; background: var(--surface); } table.data th, table.data td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-2); font-size: .93rem; vertical-align: top; } table.data th { font-weight: 600; color: var(--muted); font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; } /* ---------------------------------------------------------------- flashes */ .flash { padding: 13px 16px; border-radius: var(--radius-s); margin-bottom: 12px; font-size: .95rem; display: flex; gap: 10px; align-items: flex-start; } .flash--error { background: var(--err-bg); color: var(--err-ink); } .flash--ok { background: var(--ok-bg); color: var(--ok-ink); } .flash svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; } /* ----------------------------------------------------------------- stats */ .statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .stat { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-m); padding: 18px; } .stat b { display: block; font: 700 1.7rem var(--font-head); color: var(--ink); letter-spacing: -.02em; } .stat span { font-size: .84rem; color: var(--muted); } /* ----------------------------------------------------------------- price */ .price-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-l); padding: 26px; display: flex; flex-direction: column; } .price-card--hero { border: 2px solid var(--brand); box-shadow: var(--shadow-2); } .price-card .amount { font: 800 2.1rem var(--font-head); color: var(--ink); letter-spacing: -.03em; } .price-card .amount small { font: 500 .85rem var(--font-body); color: var(--muted); } .price-card ul { padding-left: 18px; margin: 12px 0 20px; color: var(--ink-2); font-size: .93rem; } .price-card li { margin-bottom: 6px; } .price-card .btn { margin-top: auto; } /* --------------------------------------------------------------- talent */ .talent-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-m); padding: 18px; } .talent-card .who { font-family: var(--font-head); font-weight: 700; } .talent-card .locked { color: var(--muted); font-style: italic; } .skills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .skills span { background: var(--line-2); border-radius: 6px; padding: 3px 8px; font-size: .78rem; color: var(--ink-2); } /* ---------------------------------------------------------------- footer */ .site-footer { background: #0c1512; color: rgb(255 255 255 / .74); margin-top: 0; padding: 48px 0 32px; font-size: .92rem; } .site-footer a { color: var(--white); text-decoration: none; display: inline-flex; align-items: center; min-height: 34px; } .site-footer a:hover { text-decoration: underline; } .site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 26px; } .site-footer h2 { /* column headings; h2 so the document never skips a level — every page opens with an h1, so h2 can never be a jump */ color: var(--white); font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 2px; } /* Touch devices get the full 44px target on the smaller controls. Scoped to coarse pointers so a mouse-driven desktop keeps the compact chip/button sizes. */ @media (pointer: coarse) { .btn--sm { min-height: var(--tap); } .chip { min-height: var(--tap); padding-inline: 16px; } .site-footer a { min-height: var(--tap); } .logo { display: inline-flex; align-items: center; min-height: var(--tap); } .active-filters a { min-height: var(--tap); } } /* ------------------------------------------------------------ responsive */ @media (max-width: 900px) { .grid-2, .grid-3, .grid-4, .statgrid, .field-row, .site-footer .cols { grid-template-columns: 1fr; } .filters { grid-template-columns: 1fr 1fr; } .sidebar { position: static; } /* One row of chrome instead of three: logo, menu button, primary CTA. */ .nav-toggle { display: inline-flex; } .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-block: 6px; border-top: 1px solid var(--line-2); margin-left: 0; } .site-nav a { padding: 0 8px; } .site-header:has(.nav-toggle[aria-expanded="true"]) .site-nav, .site-header.nav-open .site-nav { display: flex; } /* class = :has() fallback */ .header-cta { margin-left: auto; } } /* Below ~400px the keyword field, Filters and Search can't share a row without the input collapsing to a couple of characters. Give it its own row. */ @media (max-width: 420px) { .filterbar input { flex: 1 0 100%; } .filterbar .btn { flex: 1 1 auto; } } @media (max-width: 640px) { .searchbar { grid-template-columns: 1fr; border-radius: var(--radius-l); } .searchbar select { border: 0; max-width: none; border-radius: 0; } .filters { display: none; } .filterbar { display: flex; flex-wrap: wrap; } .filters--open { display: grid; grid-template-columns: 1fr; } .pulse { gap: 18px 24px; } .pulse div b { font-size: 1.4rem; } .banner { padding: 16px; } } /* ------------------------------------------------------------ breadcrumbs */ .crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .86rem; color: var(--muted); margin-bottom: 14px; } /* 24px tall, and the gap keeps 24px between centres. A breadcrumb is navigation, not prose, so the inline-target exemption in WCAG 2.2 does not cover it — at .86rem these were 21px and sat 8px apart, which is a hard row to hit on a phone. */ .crumbs a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; } .crumbs a:hover { color: var(--brand); text-decoration: underline; } .crumbs [aria-current="page"] { color: var(--ink-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; } /* A locked field is still readable — it just can't be changed. */ input[readonly], select:disabled { background: var(--line-2); color: var(--ink-2); cursor: not-allowed; } /* Invisible ALTCHA: the widget does its work without taking up space. It stays in the DOM (removing it would remove the field it posts) and keeps its own error/expired messages visible if something goes wrong. */ altcha-widget.altcha { display: block; margin: 0; --altcha-max-width: 100%; --altcha-border-width: 0; --altcha-color-border: transparent; } altcha-widget.altcha:not([data-state="error"]):not([data-state="expired"]) { height: 0; overflow: hidden; } /* Staging marker — deliberately loud, and above everything. */ .staging-bar { position: sticky; top: 0; z-index: 60; background: repeating-linear-gradient(45deg, #7a4200 0 12px, #8d4c00 12px 24px); color: #fff; text-align: center; font-size: .88rem; font-weight: 600; padding: 8px 16px; letter-spacing: .01em; } /* ------------------------------------------------- report link on a talent card A destructive-ish action that has to be available without competing with "Unlock". */ .report-form { display: inline; } /* min-height rather than padding: this sits inline beside other text, and vertical padding would push the line apart. It was a 20px target — "Withdraw" on a phone was a 20px button. */ .linklike { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: .82rem; color: var(--muted); text-decoration: underline; display: inline-flex; align-items: center; min-height: 24px; } .linklike:hover { color: var(--err-ink); } .visibility ul { margin: 6px 0 0; padding-left: 20px; } .visibility h3 { margin: 0 0 4px; font-size: .9rem; } /* was h4 — see _visibility.html */ /* --------------------------------------------------- pill input (progressive enhancement) The plain comma-separated input is what ships; pills.js swaps in this editor when it can. .pill-input__source is the original input, kept in the DOM as the value the form posts. */ .pill-input__source { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; padding: 0; border: 0; min-height: 0; } .pill-input { max-width: 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 7px 10px; min-height: var(--tap); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); cursor: text; } .pill-input:focus-within { border-color: var(--brand); outline: 3px solid var(--focus); outline-offset: -1px; } .pill-input__pills { display: contents; } .pill-input .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand-dark); font-size: .88rem; font-weight: 600; line-height: 1.4; } .pill__x { border: 0; background: none; cursor: pointer; padding: 0; width: 18px; height: 18px; border-radius: 50%; color: var(--brand-dark); font-size: 1rem; line-height: 1; } .pill__x:hover { background: var(--brand-tint-2); } /* Specificity note: the base rule is `input[type=text]` (0,1,1), which outranks a single class — so the entry has to be selected as `.pill-input input.…` (0,2,1) or it keeps the border and focus ring meant for a standalone field. The visible box is the parent; the entry inside it must look like nothing at all. */ .pill-input input.pill-input__entry { flex: 1 1 8ch; min-width: 8ch; padding: 4px 2px; border: 0; outline: none; box-shadow: none; background: transparent; font: 400 1rem var(--font-body); color: var(--ink); min-height: auto; width: auto; } .pill-input input.pill-input__entry:focus, .pill-input input.pill-input__entry:focus-visible { border: 0; outline: none; box-shadow: none; /* the ring belongs to .pill-input */ } /* ------------------------------------------------------------- role toggle Two tabs on the shared sign-in screen. Purely a hint: the form behind it looks in both tables regardless, so a wrong choice costs nothing. */ /* Same tray as the hero search bar: white surface, pill radius, lifted shadow — so the two primary controls on the site read as the same kind of object. The selected side is the brand colour rather than the tray, which puts the emphasis on the choice instead of on the container holding it. */ /* ------------------------------------------------------- application filters */ /* A grid of framed boxes, not a wrapping row. Four short lists in one flex row left most of the width empty beside whichever was longest; auto-fit columns fill it instead, and the frame makes each category legible as a group rather than a run of checkboxes. */ /* display:block, because a site-wide `form { display: grid }` makes this a grid container — and a grid item sizes to its content, which pinned the whole filter bar to 210px however wide the page was. */ .filters { display: block; margin-bottom: 18px; } /* Categories stack full width, so each one's options have the whole row to flow across. Side by side in narrow columns the options had nowhere to wrap TO — which is what left Region as a sixteen-item vertical list beside three mostly-empty boxes. */ .filters__grid { display: flex; flex-direction: column; gap: 12px; } .filters__group { border: 1px solid var(--line-2); border-radius: var(--radius); padding: 10px 14px 12px; margin: 0; min-width: 0; background: var(--white); } .filters__group legend { padding: 0 6px; margin-left: -6px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } /* Options flow across the row and wrap. A grid rather than a wrapping flex row so they line up in even columns: with flex, each item takes its own width and the ragged left edges make a list of sixteen regions hard to read down. */ .filters__options { display: grid; gap: 2px 18px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .filters__group label { display: flex; gap: 8px; align-items: center; min-height: 30px; font-weight: 400; font-size: .9rem; } /* Same reason as the region checkboxes: without flex:0 0 auto a long value squeezes the box below its tap target instead of wrapping. */ .filters__group input[type=checkbox] { flex: 0 0 auto; min-height: 0; margin: 0; } /* Its own row, right-aligned: beside the categories the button read as a fifth one. */ .filters__actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); } /* ---------------------------------------------------------------- company logo field */ /* A circular frame and one button. The frame is always there, empty or not: an upload control with nothing to show reads as "nothing happened", where an empty ring reads as "your logo goes here". */ .logo-picker { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .logo-frame { flex: 0 0 auto; position: relative; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 2px dashed var(--line-2); overflow: hidden; } /* Once there is an image the ring stops being an invitation and becomes a frame. */ .logo-frame:has(img:not([hidden])) { border-style: solid; background: var(--white); } /* `cover`, not `contain`: the image is resized server-side to fill the circle, so anything that does not fill it here would be a mismatch between the two. */ .logo-frame__img { width: 100%; height: 100%; object-fit: cover; } .logo-frame__spinner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--line-2); border-top-color: var(--brand); border-radius: 50%; animation: logo-spin .7s linear infinite; } @keyframes logo-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .logo-frame__spinner { animation-duration: 2.4s; } } .logo-picker__action { min-width: 0; flex: 1 1 16rem; } .logo-frame__initials { font-weight: 700; color: var(--muted); font-size: 1.2rem; } /* The native file input is replaced by the label, which is the only way to style one. It stays in the accessibility tree, so a keyboard still reaches it. */ .logo-picker__action input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* The submit button is the no-JavaScript path: with script, choosing a file uploads it, so a second button is a step that does nothing. Hidden by class rather than by script, or it is painted before the script that would hide it ever runs. */ .js [data-logo-submit] { display: none; } .logo-picker__button { cursor: pointer; } .logo-picker__action input[type=file]:focus-visible + .logo-picker__button { outline: 2px solid var(--brand); outline-offset: 2px; } .hint--error { color: var(--danger, #b3261e); } .job-number { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: .85rem; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ list paging */ .paging { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; } .paging__controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .paging__controls label { font-size: .8rem; color: var(--muted); font-weight: 600; } .paging__controls select { min-height: 34px; padding: 4px 10px; font-size: .9rem; width: auto; } .paging__count { margin: 0; font-size: .88rem; font-variant-numeric: tabular-nums; } /* The Go button is the no-JavaScript path; with script the selects submit themselves. */ .js [data-paging-submit] { display: none; } .pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 18px 0; } .pager__page, .pager__step { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--white); color: var(--ink); text-decoration: none; font-size: .9rem; font-variant-numeric: tabular-nums; } .pager__page--here { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; } .pager__gap { padding: 0 2px; color: var(--muted); } /* --------------------------------------------------------------- employer logo marks */ /* Circles, because they sit beside a name rather than in a grid — a round mark reads as an identity, a square one reads as an image. `contain` so a wide wordmark is not cropped. */ .company--with-logo { display: flex; align-items: center; gap: 10px; } .company__logo { width: 34px; height: 34px; border-radius: 50%; object-fit: contain; background: var(--white); border: 1px solid var(--line-2); padding: 3px; flex: 0 0 auto; } .poster { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .poster__logo { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: var(--white); border: 1px solid var(--line-2); padding: 4px; flex: 0 0 auto; } /* ----------------------------------------------------------------- file inputs */ /* A file input paints its own button from the operating system — grey, square, and nothing like anything else on the page. It cannot be styled directly, so the input is taken out of the layout and a