/* ========================================================================== Reflection AI - Ashby Job Board custom CSS Rewritten 2026-08-07. Replaces the previous file. Two structural fixes vs the old version: 1. No @layer. Normal (non-!important) declarations inside a layer LOSE to unlayered ones, so the old :root block never applied. Custom CSS loads last, so unlayered rules here win on source order without !important. 2. No hashed class selectors (_container_j2da7_1, _title_ud4nd_34, etc). Those are Ashby build hashes and change on every deploy. Only the documented .ashby-* hooks are used. Accessibility: hover and text colors below are measured against WCAG 2.1 AA. Ratios noted inline. Do not lower them without re-checking. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* -------------------------------------------------------------------------- Theme variables. Ashby's own stylesheet consumes these, so setting them here restyles the board without brute-force overrides. NOTE: --colorPrimary600 (#1A5427) and --colorPrimary900 (#000000) are set INLINE on from Ashby admin > Theme settings. Inline styles beat this file. Change brand colors there, not here. -------------------------------------------------------------------------- */ :root { --fontFamily: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --colorAppBackground: #f8f6f2; --borderRadiusContainer: 6px; --borderRadiusControl: 6px; --borderRadiusButton: 6px; } /* Belt and braces: paint the page surface directly in case a future Ashby release stops routing the body background through --colorAppBackground. */ html, body { background-color: #f8f6f2; } /* -------------------------------------------------------------------------- Headings -------------------------------------------------------------------------- */ /* "Open Positions" */ .ashby-job-board-heading { font-weight: 700; font-size: 2em; margin-bottom: 1em; } /* The "(61)" counter. Explicit color instead of opacity: 0.7. The old opacity trick computed to 4.27:1, which only passed because the text happens to be 24px. This is 6.3:1 and stays valid at any size. */ .ashby-job-board-heading-count { font-weight: 400; font-size: 0.75em; color: #545b6d; } /* Department / team headings */ .ashby-department-heading, .ashby-department-heading-level, .ashby-job-posting-brief-department-heading, .ashby-job-posting-brief-department-heading-level { font-weight: 700; } /* Job posting page title */ .ashby-job-posting-heading, .ashby-job-posting-header h1 { color: #2d5016; /* 8.6:1 on #f8f6f2 */ font-weight: 700; } /* -------------------------------------------------------------------------- Job listing rows -------------------------------------------------------------------------- */ .ashby-job-posting-brief { margin-bottom: 10px; transition: background-color 0.2s ease; } .ashby-job-posting-brief-title { font-weight: 700; } .ashby-job-posting-brief-details { font-weight: 400; } /* Hover + keyboard focus get the SAME treatment. The old file styled :hover only, so keyboard users got no row highlight. #e5ddcf measured against the live text colors: job title #1A5427 on #e5ddcf = 6.7:1 (needs 4.5:1) detail line #545b6d on #e5ddcf = 5.0:1 (needs 4.5:1) The old #b3b3b3 gave 4.28:1 and 3.24:1 respectively. Both failed. */ .ashby-job-posting-brief:hover, .ashby-job-posting-brief:focus-visible { background-color: #e5ddcf; } /* Keep an explicit focus ring. Ashby draws one via outline; this guarantees it survives regardless of their future changes. Never set outline: none here. */ .ashby-job-posting-brief:focus-visible, .ashby-application-form-submit-button:focus-visible, .ashby-job-board-back-to-all-jobs-button:focus-visible { outline: 2px solid #1A5427; outline-offset: 2px; } /* -------------------------------------------------------------------------- Application form -------------------------------------------------------------------------- */ /* Submit button. The old file forced the background to #f8f6f2 and the text to #2d5016, leaving a cream button on a page background of nearly the same colour: 1.08:1 surface contrast, against a 3:1 requirement (WCAG 1.4.11). A solid brand fill fixes it. white on #1A5427 = 9.0:1 button vs #f8f6f2 page = 8.3:1 Delete this block entirely if you would rather inherit Ashby's theme button. */ .ashby-application-form-submit-button { background-color: #1A5427; color: #ffffff; border: 2px solid #1A5427; } .ashby-application-form-submit-button:hover { background-color: #143f1e; border-color: #143f1e; } /* -------------------------------------------------------------------------- Flatten card shadows. Scoped to containers only. The old file used `.ashby-job-posting *` and `[class*="ashby-container"]`, i.e. every descendant, which is how a stylesheet accidentally deletes focus rings on component libraries that draw them with box-shadow. Ashby currently uses outline, so the old rule did no harm, but it is a trap worth not leaving in place. -------------------------------------------------------------------------- */ .ashby-job-posting-brief, .ashby-application-form-container, .ashby-survey-form-container { box-shadow: none; } /* -------------------------------------------------------------------------- Removed from the previous version, deliberately: - `* { font-family: ... !important }` Setting --fontFamily is enough. The old wildcard also lost to the `var(--fontFamily)` rules below it, and since --fontFamily was dead, the whole application form rendered in Whitney SSm instead of Inter. - The ~40-selector `[class*="ashby-"] { background-color: #f8f6f2 }` block Painted cream rectangles behind individual components on a white page instead of colouring the page. --colorAppBackground does this properly. - `div:has(> h1:contains("Technical Staff"))` :contains() is a jQuery selector, not CSS. One invalid selector voids the entire comma-separated rule, so the `main` / `[role="main"]` / `body:has(...)` backgrounds in that block never applied. - `pre.highlight, code.language-html, .syntax-highlight { display: none }` Appeared to be hiding a leaked code block. If that artifact is still showing up, fix it at the source in the job description content. -------------------------------------------------------------------------- */