/* stylelint-disable */
/* =========================================================================
MISTRAL AI — Ashby Job Board Custom CSS
-------------------------------------------------------------------------
Brand-aligned theme inspired by Mistral's flame palette
(yellow → orange → red gradient) and clean, minimal typography.
========================================================================= */
/* -------------------------------------------------------------------------
Theme tokens
------------------------------------------------------------------------- */
:root {
/* Mistral flame palette */
--mistralYellow: #FFD800;
--mistralOrange: #FA500F;
--mistralRed: #E10500;
--mistralDeep: #1A0F0A;
/* Surfaces */
--mistralInk: #0F0F10;
--mistralInkMuted: #4A4A4F;
--mistralBorder: #ECECEE;
--mistralSurface: #FFFFFF;
--mistralSurfaceAlt: #FAF7F2;
/* Brand gradient (used for accents, buttons) */
--mistralGradient: linear-gradient(
90deg,
var(--mistralYellow) 0%,
var(--mistralOrange) 55%,
var(--mistralRed) 100%
);
/* ---- Ashby theme variables ---- */
/* WARNING: These can also be set in Ashby admin → theme settings.
Keep both in sync if changed there. */
--colorPrimary900: #C84200; /* darker primary (hover / pressed) */
--colorPrimary600: var(--mistralOrange); /* main primary */
--widthMaxJobBoard: 880px;
--borderRadiusContainer: 14px;
--borderRadiusControl: 10px;
--borderRadiusButton: 9999px; /* pill buttons, very Mistral */
--fontFamily:
"Inter",
"Söhne",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Helvetica Neue",
Helvetica,
Arial,
"Apple Color Emoji",
"Segoe UI Emoji",
sans-serif;
/* Page background — updated per brand refresh */
--colorAppBackground: #FBFBF8;
}
/* -------------------------------------------------------------------------
Global page polish
------------------------------------------------------------------------- */
body {
font-family: var(--fontFamily);
color: var(--mistralInk);
background-color: var(--colorAppBackground);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--colorPrimary600);
text-decoration: none;
transition: color 0.15s ease;
}
a:hover {
color: var(--colorPrimary900);
text-decoration: underline;
}
/* =========================================================================
JOB BOARD — index page
========================================================================= */
/* The heading of the entire job board ("Open positions").
Updated per brand refresh — solid dark ink instead of flame gradient. */
.ashby-job-board-heading {
font-size: 2.25rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: #151524;
margin-bottom: 0.5rem;
}
/* The count of job postings on the job board. */
.ashby-job-board-heading-count {
font-weight: 500;
color: var(--mistralInkMuted);
font-size: 1rem;
margin-left: 0.5rem;
}
/* The 'Filters' label element in the job board. */
.ashby-job-board-filters-label {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mistralInkMuted);
}
/* A select box element for filtering the job board. */
.ashby-job-board-filter {
border: 1px solid var(--mistralBorder);
border-radius: var(--borderRadiusControl);
background-color: var(--mistralSurface);
font-family: var(--fontFamily);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ashby-job-board-filter:hover {
border-color: var(--colorPrimary600);
}
.ashby-job-board-filter:focus-within {
border-color: var(--colorPrimary600);
box-shadow: 0 0 0 3px rgba(250, 80, 15, 0.15);
}
/* The 'Reset filters' label element in the job board. */
.ashby-job-board-reset-filters-label {
font-weight: 600;
color: var(--colorPrimary600);
cursor: pointer;
}
.ashby-job-board-reset-filters-label:hover {
color: var(--colorPrimary900);
}
/* The button which allows users to navigate from an individual posting back to the list of all job postings. */
.ashby-job-board-back-to-all-jobs-button {
font-weight: 600;
color: var(--mistralInk);
border: 1px solid var(--mistralBorder);
border-radius: var(--borderRadiusButton);
padding: 0.5rem 1rem;
background-color: var(--mistralSurface);
transition: all 0.15s ease;
}
.ashby-job-board-back-to-all-jobs-button:hover {
border-color: var(--colorPrimary600);
color: var(--colorPrimary600);
}
/* =========================================================================
DEPARTMENTS & TEAMS
========================================================================= */
/* The heading of a department, which can have many teams under it. */
.ashby-department-heading {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--mistralInk);
margin-top: 2.5rem;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--mistralBorder);
position: relative;
}
.ashby-department-heading::before {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 48px;
height: 2px;
background: var(--mistralGradient);
border-radius: 2px;
}
/* The heading of a single team. */
.ashby-department-heading-level {
font-size: 1.0625rem;
font-weight: 600;
color: var(--mistralInkMuted);
margin-top: 1.25rem;
margin-bottom: 0.5rem;
}
/* =========================================================================
POSTING BRIEFS — list of jobs
========================================================================= */
/* The container for the list of job post briefings. */
.ashby-job-posting-brief-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* The container of the job posting details pane. */
.ashby-job-posting-brief {
margin-bottom: 0;
background-color: var(--mistralSurface);
border: 1px solid var(--mistralBorder);
border-radius: var(--borderRadiusContainer);
padding: 1.125rem 1.25rem;
transition:
border-color 0.15s ease,
transform 0.15s ease,
box-shadow 0.15s ease;
}
.ashby-job-posting-brief:hover {
border-color: var(--colorPrimary600);
transform: translateY(-1px);
box-shadow: 0 6px 18px -10px rgba(250, 80, 15, 0.35);
}
/* The title of the job posting in the details pane. */
.ashby-job-posting-brief-title {
font-size: 1.0625rem;
font-weight: 600;
color: var(--mistralInk);
letter-spacing: -0.005em;
}
/* The container for the details of the job posting, in the details pane. */
.ashby-job-posting-brief-details {
font-size: 0.875rem;
color: var(--mistralInkMuted);
margin-top: 0.25rem;
}
/* Department + team headings within a brief */
.ashby-job-posting-brief-department-heading {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--colorPrimary600);
}
.ashby-job-posting-brief-department-heading-level {
font-size: 0.8125rem;
font-weight: 500;
color: var(--mistralInkMuted);
}
/* =========================================================================
JOB POSTING — detail page
========================================================================= */
/* -------------------------------------------------------------------------
Job-posting header (title + generous breathing room before the two-column
layout below). Spacing applied to BOTH the wrapper AND the heading itself
so it works no matter which element Ashby actually renders.
------------------------------------------------------------------------- */
.ashby-job-posting-header {
padding: 0 0 2rem 0 !important;
margin: 0 0 3rem 0 !important;
border-bottom: 1px solid var(--mistralBorder);
}
/* The heading of a job post (e.g. "Account Executive - Enterprise, (Consulting)").
We push margin-bottom directly here as a fallback in case the heading
isn't wrapped in .ashby-job-posting-header. */
.ashby-job-posting-heading {
font-size: 2rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--mistralInk);
margin: 0 0 3rem 0 !important;
padding: 0;
}
/* -------------------------------------------------------------------------
Two-column layout: the parent has hash-based classes (e.g.
_details_135ul_418 / _content_ud4nd_71). Target it via :has() and reset
any internal padding/margin so it lines up flush-left with the title
above it, then space the two columns with a flex gap only.
------------------------------------------------------------------------- */
div:has(> .ashby-job-posting-left-pane):has(> .ashby-job-posting-right-pane) {
display: flex !important;
align-items: flex-start !important;
gap: 2.5rem;
margin: 0 !important;
padding: 0 !important;
width: 100%;
box-sizing: border-box;
}
/* -------------------------------------------------------------------------
Left pane — Location / Employment Type / Department sidebar.
Styled as a white card to mirror the right pane.
------------------------------------------------------------------------- */
.ashby-job-posting-left-pane {
flex: 0 0 260px;
margin: 0 !important;
padding: 1.75rem 1.5rem !important;
background-color: var(--mistralSurface) !important;
border: 1px solid var(--mistralBorder) !important;
border-radius: var(--borderRadiusContainer) !important;
box-shadow: none !important;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--mistralInk);
align-self: flex-start;
box-sizing: border-box;
}
/* Each info section inside the left pane (Location, Employment Type, Department).
Ashby also stamps _section_101oc_37 on these inner divs; reset its
padding/background since the outer pane is now the card. Sections are
separated only by vertical spacing. */
.ashby-job-posting-left-pane > div {
margin: 0 0 1.25rem 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.ashby-job-posting-left-pane > div:last-child {
margin-bottom: 0 !important;
}
/* Small-caps section labels in the left pane */
.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3 {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mistralInkMuted);
margin: 0 0 0.375rem 0;
padding: 0;
}
.ashby-job-posting-left-pane p {
margin: 0;
padding: 0;
color: var(--mistralInk);
font-weight: 500;
}
.ashby-job-posting-left-pane ul {
padding-left: 1.25rem;
margin: 0;
}
.ashby-job-posting-left-pane li {
margin-bottom: 0.35rem;
}
/* -------------------------------------------------------------------------
Right pane — card containing the tabs + content
Aligned with the top of the left pane (no margin-top), so both columns
start on the same baseline.
------------------------------------------------------------------------- */
.ashby-job-posting-right-pane {
flex: 1 1 auto;
margin: 0 !important;
align-self: flex-start;
background-color: var(--mistralSurface);
border: 1px solid var(--mistralBorder);
border-radius: var(--borderRadiusContainer);
padding: 2rem 1.75rem;
}
/* -------------------------------------------------------------------------
Right-pane tabs (Overview / Application)
-------------------------------------------------------------------------
Real DOM (from inspect):
The `.ashby-job-posting-right-pane-tab-slider` class is on an EMPTY span
that Ashby positions with JS to follow the active tab. We hide it and
mark the active tab purely by text color + weight.
------------------------------------------------------------------------- */
/* 1. Hide the orange moving bar entirely. */
.ashby-job-posting-right-pane-tab-slider {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
opacity: 0 !important;
}
/* 2. Style the actual tablist container. Scope tightly with :has() so it
only touches the nav that contains Ashby's tabs. */
nav[role="tablist"]:has(.ashby-job-posting-right-pane-overview-tab),
nav[role="tablist"]:has(.ashby-job-posting-right-pane-application-tab) {
position: relative;
display: flex;
gap: 1.75rem;
align-items: center;
border-bottom: 1px solid var(--mistralBorder);
margin-top: 0.5rem;
margin-bottom: 2rem;
padding: 0.25rem 0 0.75rem;
}
/* 3. Style each tab anchor (the real clickable element). */
a[role="tab"]:has(> .ashby-job-posting-right-pane-overview-tab),
a[role="tab"]:has(> .ashby-job-posting-right-pane-application-tab) {
font-family: var(--fontFamily);
font-size: 0.9375rem;
font-weight: 600;
color: var(--mistralInkMuted);
text-decoration: none !important;
padding: 0.5rem 0.25rem;
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none;
transition: color 0.15s ease;
}
a[role="tab"]:has(> .ashby-job-posting-right-pane-overview-tab):hover,
a[role="tab"]:has(> .ashby-job-posting-right-pane-application-tab):hover {
color: var(--mistralInk);
}
a[role="tab"]:focus-visible:has(> .ashby-job-posting-right-pane-overview-tab),
a[role="tab"]:focus-visible:has(> .ashby-job-posting-right-pane-application-tab) {
outline: 2px solid rgba(250, 80, 15, 0.4);
outline-offset: 4px;
border-radius: 4px;
}
/* 4. Active tab → Mistral orange + bold. Ashby toggles both aria-selected
and aria-current="page" on the active . */
a[role="tab"][aria-selected="true"]:has(> .ashby-job-posting-right-pane-overview-tab),
a[role="tab"][aria-selected="true"]:has(> .ashby-job-posting-right-pane-application-tab),
a[role="tab"][aria-current="page"]:has(> .ashby-job-posting-right-pane-overview-tab),
a[role="tab"][aria-current="page"]:has(> .ashby-job-posting-right-pane-application-tab) {
color: var(--colorPrimary600) !important;
font-weight: 700;
}
/* 5. The documented Ashby class is on the inner — make it inherit
all visual properties from the active parent. */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
color: inherit !important;
font-weight: inherit !important;
background: transparent !important;
text-decoration: none !important;
border: none !important;
}
/* =========================================================================
APPLICATION FORM
========================================================================= */
/* A container for the application form. */
.ashby-application-form-container {
font-family: var(--fontFamily);
color: var(--mistralInk);
}
/* A container for the label and input on an application form. */
.ashby-application-form-field-entry {
margin-bottom: 1.125rem;
}
/* The title of each question on an application form. */
.ashby-application-form-question-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--mistralInk);
margin-bottom: 0.375rem;
}
/* The description of each question on an application form. */
.ashby-application-form-question-description {
font-size: 0.8125rem;
color: var(--mistralInkMuted);
margin-bottom: 0.5rem;
line-height: 1.5;
}
/* Sections */
.ashby-application-form-section-container {
padding: 1.25rem 0;
border-top: 1px solid var(--mistralBorder);
}
.ashby-application-form-section-container:first-of-type {
border-top: none;
}
.ashby-application-form-section-header {
margin-bottom: 1rem;
}
.ashby-application-form-section-header-title {
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.005em;
color: var(--mistralInk);
}
.ashby-application-form-section-header-description {
font-size: 0.875rem;
color: var(--mistralInkMuted);
margin-top: 0.25rem;
line-height: 1.5;
}
/* Inputs — best-effort styling on common Ashby input wrappers */
.ashby-application-form-field-entry input[type="text"],
.ashby-application-form-field-entry input[type="email"],
.ashby-application-form-field-entry input[type="tel"],
.ashby-application-form-field-entry input[type="url"],
.ashby-application-form-field-entry input[type="number"],
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
width: 100%;
font-family: var(--fontFamily);
font-size: 0.9375rem;
color: var(--mistralInk);
background-color: var(--mistralSurface);
border: 1px solid var(--mistralBorder);
border-radius: var(--borderRadiusControl);
padding: 0.625rem 0.75rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ashby-application-form-field-entry input:hover,
.ashby-application-form-field-entry textarea:hover,
.ashby-application-form-field-entry select:hover {
border-color: #C9C9CD;
}
.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
outline: none;
border-color: var(--colorPrimary600);
box-shadow: 0 0 0 3px rgba(250, 80, 15, 0.18);
}
/* The text message consent description below phone number fields. */
.ashby-application-form-texting-consent-description {
font-size: 0.75rem;
color: var(--mistralInkMuted);
margin-top: 0.375rem;
line-height: 1.45;
}
/* The application submission button. */
.ashby-application-form-submit-button {
width: 100%;
font-family: var(--fontFamily);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.01em;
color: #FFFFFF;
background: var(--mistralGradient);
background-size: 150% 100%;
background-position: 0% 50%;
border: none;
border-radius: var(--borderRadiusButton);
padding: 0.875rem 1.25rem;
cursor: pointer;
transition:
background-position 0.4s ease,
transform 0.1s ease,
box-shadow 0.2s ease,
opacity 0.2s ease;
box-shadow: 0 6px 18px -8px rgba(250, 80, 15, 0.55);
}
.ashby-application-form-submit-button:hover {
background-position: 100% 50%;
box-shadow: 0 10px 24px -8px rgba(225, 5, 0, 0.55);
}
.ashby-application-form-submit-button:active {
transform: translateY(1px);
}
.ashby-application-form-submit-button:disabled {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
/* =========================================================================
APPLICATION AUTOFILL (resume drag-and-drop)
========================================================================= */
/* Container element for application autofill input form. */
.ashby-application-form-autofill-pane {
margin-bottom: 1.5rem;
}
/* Application autofill input's root element. */
.ashby-application-form-autofill-input-root {
background-color: var(--mistralSurfaceAlt);
border: 1.5px dashed var(--mistralBorder);
border-radius: var(--borderRadiusContainer);
padding: 1.25rem;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ashby-application-form-autofill-input-root[data-state="drag"] {
border-color: var(--colorPrimary600);
background-color: rgba(250, 80, 15, 0.06);
}
.ashby-application-form-autofill-input-root[data-state="pending"] {
border-style: solid;
border-color: var(--colorPrimary600);
}
/* Application autofill input's base layer (copy + CTA). */
.ashby-application-form-autofill-input-base-layer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
/* Application autofill input's title. */
.ashby-application-form-autofill-input-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--mistralInk);
}
/* Application autofill input's description. */
.ashby-application-form-autofill-input-description {
font-size: 0.8125rem;
color: var(--mistralInkMuted);
line-height: 1.5;
}
/* Application autofill input's magic sparkles icon. */
.ashby-application-form-autofill-input-icon {
color: var(--colorPrimary600);
}
/* Drag overlay. */
.ashby-application-form-autofill-input-drag-layer[data-state="active"] {
background-color: rgba(250, 80, 15, 0.08);
border-radius: var(--borderRadiusContainer);
}
/* Pending overlay. */
.ashby-application-form-autofill-input-pending-layer[data-state="active"] {
background-color: rgba(255, 255, 255, 0.85);
border-radius: var(--borderRadiusContainer);
}
/* The resume uploader to auto-fill the application form. */
.ashby-application-form-autofill-uploader {
font-weight: 600;
color: var(--colorPrimary600);
}
/* Application autofill input form's alert element. */
.ashby-application-form-autofill-input-form-alert {
font-size: 0.8125rem;
border-radius: var(--borderRadiusControl);
padding: 0.5rem 0.75rem;
margin-top: 0.5rem;
}
.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
background-color: rgba(225, 5, 0, 0.08);
color: #B40400;
border: 1px solid rgba(225, 5, 0, 0.2);
}
.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
background-color: rgba(34, 139, 71, 0.08);
color: #1F7A3E;
border: 1px solid rgba(34, 139, 71, 0.2);
}
/* =========================================================================
STATE CONTAINERS — success / failure / blocked / surveys
========================================================================= */
.ashby-application-form-success-container {
background-color: rgba(34, 139, 71, 0.06);
border: 1px solid rgba(34, 139, 71, 0.2);
border-radius: var(--borderRadiusContainer);
padding: 1.25rem;
color: #1F7A3E;
font-weight: 500;
}
.ashby-application-form-failure-container {
background-color: rgba(225, 5, 0, 0.06);
border: 1px solid rgba(225, 5, 0, 0.2);
border-radius: var(--borderRadiusContainer);
padding: 1.25rem;
color: #B40400;
font-weight: 500;
}
.ashby-application-form-blocked-application-container {
background-color: var(--mistralSurfaceAlt);
border: 1px solid var(--mistralBorder);
border-radius: var(--borderRadiusContainer);
padding: 1.25rem;
color: var(--mistralInkMuted);
}
.ashby-survey-form-container {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--mistralBorder);
}
/* =========================================================================
RESPONSIVE
========================================================================= */
@media (max-width: 640px) {
.ashby-job-board-heading {
font-size: 1.75rem;
}
.ashby-job-posting-heading {
font-size: 1.5rem;
}
.ashby-job-posting-right-pane {
padding: 1.125rem;
}
.ashby-application-form-submit-button {
padding: 0.75rem 1rem;
}
}