/* ========================================================================== 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; } /* -------------------------------------------------------------------------- Card surfaces Ashby paints every card from --colorNeutral000, which is pure #fff: the job rows on the board, the posting's left pane, and the description/application panel. Against the cream page that reads as a hard white slab, worst on the posting page where the panel runs ~2,250px tall so its edges are off screen. Long-form reading surfaces stay white: the Overview and Application panel, and the job rows on the board. The posting's left pane takes a warm off-white instead, so the metadata sidebar reads as its own surface. Contrast on the warm sidebar: values #373e4d = 10.6:1, labels #545b6d = 6.7:1. Both clear of the 4.5:1 bar. Do NOT override --colorNeutral000 globally to fix this. Ashby also uses that token for white text on dark fills, dropdown menus, and popovers, so changing it recolours things that are not visible from the job board. -------------------------------------------------------------------------- */ /* Shared elevation for all three card surfaces. */ .ashby-job-posting-brief, .ashby-job-posting-left-pane, .ashby-job-posting-right-pane > div:last-child { box-shadow: 0 1px 2px rgba(28, 26, 51, 0.05), 0 6px 16px rgba(28, 26, 51, 0.06); } /* Metadata sidebar: Location, Employment Type, Location Type, Department. #fffdf9 sits 1.02:1 from white, which is deliberately subtle. If the sidebar does not read as distinct on your display, step this to #f6f2e9 (1.12:1 from white). That single value is the only knob worth turning. */ .ashby-job-posting-left-pane { background-color: #fffdf9; } /* Overview + Application panel. :last-child covers both tabs, since the right pane's children are the tab strip followed by whichever panel is active. */ .ashby-job-posting-right-pane > div:last-child { background-color: #ffffff; } /* Job rows on the board listing. Free-standing, so they round on all four corners. Kept white to match the Overview/Application reading surface. */ .ashby-job-posting-brief { background-color: #ffffff; border-radius: 6px; } /* The posting's two panels sit flush against each other (measured gap: 0px). Rounding both would put a visible seam down the middle, so only the outer corners are rounded and the pair reads as a single card. */ .ashby-job-posting-left-pane { border-radius: 6px 0 0 6px; } .ashby-job-posting-right-pane > div:last-child { border-radius: 0 6px 6px 0; } /* The application form sits inside the panel above, so it needs no surface of its own. Kept flat to avoid a card inside a card. */ .ashby-application-form-container, .ashby-survey-form-container { background-color: transparent; box-shadow: none; } /* Note on the old file: it used `.ashby-job-posting *` and `[class*="ashby-container"]` with box-shadow: none, i.e. every descendant. That is how a stylesheet accidentally deletes focus rings on component libraries that draw them with box-shadow. Ashby uses outline, so it did no harm here, but never reintroduce a descendant-wildcard shadow reset. */ /* -------------------------------------------------------------------------- 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. -------------------------------------------------------------------------- */