/* stylelint-disable */
/* =========================================================================
MISTRAL AI — Ashby Job Board Custom CSS · v4 (2026-06-17)
-------------------------------------------------------------------------
Brand-aligned theme inspired by Mistral's flame palette
(yellow → orange → red gradient) and clean, minimal typography.
v4 — TAB / CONTENT RESTRUCTURE
On the job-detail page the right pane is now a TRANSPARENT flex column
whose children render as SEPARATE stacked cards:
[ Overview | Application ] ← tab bar card
[ description / form ] ← content card
Because the tab bar and the content are independent sibling cards with a
gap between them, they can never visually overlap each other — this is
the definitive fix for the "tab bar floating over the description text"
bug that plagued v2/v3 on mobile (it was Ashby's built-in sticky/float
behavior, which CSS couldn't reliably un-stick blind). Even if Ashby
keeps the bar sticky, it now pins as a clean OPAQUE card above the
content card, matching the desired mobile design exactly.
========================================================================= */
/* -------------------------------------------------------------------------
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 — TRANSPARENT flex-column container (v4).
It no longer paints its own card. Instead it is an invisible column that
stacks its children (the tab bar + the content) as SEPARATE cards with a
gap between them. This is what gives us the two-card look from the target
design and makes tab/content overlap structurally impossible.
------------------------------------------------------------------------- */
.ashby-job-posting-right-pane {
flex: 1 1 auto;
margin: 0 !important;
align-self: flex-start;
background-color: transparent;
border: none;
border-radius: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
/* Every direct child of the right pane that ISN'T the tab bar (or the
hidden tab slider) becomes its own white content card — the description
on the Overview tab, the application form on the Application tab, etc. */
.ashby-job-posting-right-pane > *:not(nav[role="tablist"]):not(.ashby-job-posting-right-pane-tab-slider) {
background-color: var(--mistralSurface);
border: 1px solid var(--mistralBorder);
border-radius: var(--borderRadiusContainer);
padding: 1.5rem 1.5rem;
min-width: 0;
}
/* -------------------------------------------------------------------------
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. The tablist is its OWN standalone card (v4) — a white rounded box
that sits ABOVE the content card with a gap, exactly like the target
design. Crucially it is forced to `position: static` so it can never
float / pin over the content; the two-card structure then guarantees
no overlap. The two tabs share the width evenly. Scope tightly with
:has() so it only touches Ashby's tab nav. */
nav[role="tablist"]:has(.ashby-job-posting-right-pane-overview-tab),
nav[role="tablist"]:has(.ashby-job-posting-right-pane-application-tab) {
position: static !important;
top: auto !important;
display: flex;
align-items: stretch;
gap: 0;
background-color: var(--mistralSurface);
border: 1px solid var(--mistralBorder);
border-radius: var(--borderRadiusContainer);
margin: 0 !important;
padding: 0 0.5rem;
overflow: hidden;
}
/* 3. Each tab anchor fills half the bar, centered, with a transparent
bottom border that becomes the orange underline when active. */
a[role="tab"]:has(> .ashby-job-posting-right-pane-overview-tab),
a[role="tab"]:has(> .ashby-job-posting-right-pane-application-tab) {
flex: 1 1 0;
text-align: center;
font-family: var(--fontFamily);
font-size: 0.9375rem;
font-weight: 600;
color: var(--mistralInkMuted);
text-decoration: none !important;
padding: 1rem 0.5rem;
background: transparent !important;
border: none !important;
border-bottom: 2px solid transparent !important;
box-shadow: none !important;
outline: none;
transition: color 0.15s ease, border-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: -2px;
border-radius: 4px;
}
/* 4. Active tab → Mistral orange text + orange underline. 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;
border-bottom-color: var(--colorPrimary600) !important;
}
/* 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.
margin-top gives the section clear breathing room from the tab nav above,
so on narrow viewports the "Upload file" pill can't visually sit in the
tab nav row. */
.ashby-application-form-autofill-pane {
margin-top: 0.75rem;
margin-bottom: 1.5rem;
}
/* Application autofill input's root element.
`position: relative` establishes a positioning context so that any
absolutely-positioned child Ashby may render (e.g. the upload button on
some Ashby template versions) is anchored inside this box and cannot
escape upward into the tab nav. */
.ashby-application-form-autofill-input-root {
position: relative;
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
-------------------------------------------------------------------------
The job-detail page is the main culprit for mobile breakage: the two-column
layout above is forced via `display: flex !important` with the left pane
locked at `flex: 0 0 260px` (cannot shrink). On a 375px iPhone viewport
that sidebar alone eats ~70% of the screen, pushing the right pane
(description + apply form) off to the side and producing the classic
"I can scroll horizontally but only half the text is visible" bug.
Strategy (defense-in-depth so every phone stacks correctly):
1. Global safety nets to prevent rogue horizontal scroll.
2. `flex-wrap: wrap` on the parent so the right pane naturally drops
below the left pane the moment there isn't enough room (handles
foldables, large phones in landscape, etc.).
3. A pixel-width media query at 1024px so anything tablet-sized or
smaller stacks (catches Pixel 9 Pro XL landscape ≈ 915px and
Chrome's "Request Desktop Site" mode ≈ 980–1024px).
4. A touch-device media query (`hover: none` AND `pointer: coarse`)
that ALWAYS stacks regardless of reported viewport width — this is
the real fix for large phones whose browser advertises a desktop-
class viewport.
========================================================================= */
/* -------------------------------------------------------------------------
Global safety nets — apply at all widths.
------------------------------------------------------------------------- */
/* Prevent any rogue element from triggering page-level horizontal scroll.
Use 100% rather than 100vw to avoid the scrollbar-width overflow gotcha. */
html,
body {
overflow-x: hidden;
max-width: 100%;
}
/* Long URLs, code blocks, or embeds in the job description must not force
the right pane wider than its flex container. */
.ashby-job-posting-right-pane,
.ashby-job-posting-left-pane {
min-width: 0;
overflow-wrap: break-word;
word-wrap: break-word;
}
.ashby-job-posting-right-pane img,
.ashby-job-posting-right-pane iframe,
.ashby-job-posting-right-pane video,
.ashby-job-posting-right-pane pre,
.ashby-job-posting-right-pane table {
max-width: 100%;
height: auto;
}
.ashby-job-posting-right-pane pre {
overflow-x: auto;
white-space: pre-wrap;
}
/* Allow the two-column parent to wrap so the right pane drops below the
left pane whenever there's not enough horizontal room. This is the
foundation that makes the layout self-heal on any odd viewport. */
div:has(> .ashby-job-posting-left-pane):has(> .ashby-job-posting-right-pane) {
flex-wrap: wrap !important;
}
/* Give the right pane a comfortable preferred basis (420px). Combined with
`flex-wrap: wrap` on the parent and the `min-width: 0` safety net above,
it will wrap below the left pane the moment that 420px no longer fits.
Note: we intentionally avoid the CSS `min()` math function here — Ashby's
CSS validator and some older mobile WebViews reject it as "undefined". */
.ashby-job-posting-right-pane {
flex: 1 1 420px;
}
/* -------------------------------------------------------------------------
Tablet, large phones & desktop-mode phones — stack vertically.
Bumped 860 → 1024 so a Pixel 9 Pro XL in landscape (≈915px) and Chrome
"Request Desktop Site" (≈980–1024px) both collapse to a single column.
------------------------------------------------------------------------- */
@media (max-width: 1024px) {
div:has(> .ashby-job-posting-left-pane):has(> .ashby-job-posting-right-pane) {
flex-direction: column !important;
gap: 0.75rem !important;
}
.ashby-job-posting-left-pane {
flex: 1 1 auto !important;
width: 100% !important;
max-width: 100%;
}
.ashby-job-posting-right-pane {
width: 100%;
max-width: 100%;
flex: 1 1 auto;
}
}
/* -------------------------------------------------------------------------
Any touch-primary device — always stack, regardless of viewport width.
This is the real fix for large phones (Pixel 9 Pro XL, Galaxy S25 Ultra,
foldables) whose Chrome may advertise a desktop-class viewport and
therefore miss the pixel breakpoint above.
`hover: none` + `pointer: coarse` reliably identifies finger-driven
devices (phones, tablets) while excluding laptops/desktops with mice
or trackpads — even high-DPI touchscreens that also have a mouse get
`hover: hover`.
------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
div:has(> .ashby-job-posting-left-pane):has(> .ashby-job-posting-right-pane) {
flex-direction: column !important;
gap: 0.75rem !important;
}
.ashby-job-posting-left-pane {
flex: 1 1 auto !important;
width: 100% !important;
max-width: 100%;
}
.ashby-job-posting-right-pane {
width: 100%;
max-width: 100%;
flex: 1 1 auto;
}
}
/* -------------------------------------------------------------------------
Phone — tighter type, tighter padding.
Triggers on narrow viewports OR on any touch-primary device, so large
phones in landscape / desktop mode still get the compact treatment.
------------------------------------------------------------------------- */
@media (max-width: 640px), (hover: none) and (pointer: coarse) and (max-width: 900px) {
.ashby-job-board-heading {
font-size: 1.75rem;
}
.ashby-job-posting-heading {
font-size: 1.5rem;
margin: 0 0 1.5rem 0 !important;
}
.ashby-job-posting-header {
margin: 0 0 1.5rem 0 !important;
padding: 0 0 1rem 0 !important;
}
/* Slightly tighter padding inside the content cards on phones. */
.ashby-job-posting-right-pane > *:not(nav[role="tablist"]):not(.ashby-job-posting-right-pane-tab-slider) {
padding: 1.125rem !important;
}
.ashby-job-posting-left-pane {
padding: 1.25rem 1.125rem !important;
}
.ashby-application-form-submit-button {
padding: 0.75rem 1rem;
}
/* iOS Safari auto-zooms into any form field with a font-size < 16px when
focused, which is jarring on a long application form. Force exactly 16px
on phones so the field stays in place when tapped. We use `16px` (not a
rem) on purpose: it must be an absolute floor regardless of root font
size or user zoom settings. */
.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 {
font-size: 16px;
}
}
/* =========================================================================
TAB NAV — neutralize Ashby's sticky / float (all widths)
-------------------------------------------------------------------------
The v4 two-card structure (transparent right pane → separate tab-bar card
+ content card) already makes tab/content overlap structurally impossible.
As an extra safety belt we also force the nav and ANY wrapper Ashby may
put around it back into normal flow, so the bar can't be pinned/floated.
`*:has(nav…)` matches every ancestor of the nav at once; the
`:has(.…-overview-tab)` filter keeps it specific to this exact nav.
If Ashby DOES wrap the nav in an extra div, that wrapper (not the nav)
would be the direct child of the right pane and would otherwise be styled
as a content card — so we explicitly strip card styling from any element
that contains the nav, leaving the nav's own card styling intact.
========================================================================= */
nav[role="tablist"]:has(.ashby-job-posting-right-pane-overview-tab),
nav[role="tablist"]:has(.ashby-job-posting-right-pane-application-tab),
*:has(nav[role="tablist"]:has(.ashby-job-posting-right-pane-overview-tab)),
*:has(nav[role="tablist"]:has(.ashby-job-posting-right-pane-application-tab)) {
position: static !important;
top: auto !important;
bottom: auto !important;
z-index: auto !important;
transform: none !important;
}
/* If a wrapper sits between the right pane and the nav, don't let it paint
a redundant card around the tab bar — keep only the nav's own card. */
.ashby-job-posting-right-pane > *:has(nav[role="tablist"]:has(.ashby-job-posting-right-pane-overview-tab)),
.ashby-job-posting-right-pane > *:has(nav[role="tablist"]:has(.ashby-job-posting-right-pane-application-tab)) {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* =========================================================================
AUTOFILL — safety net only (v4)
-------------------------------------------------------------------------
In v4 the autofill section keeps Ashby's native horizontal layout
(sparkle icon + title + description on the left, "Upload file" pill on
the right) to match the target design — the previous vertical-stacking
hack is gone because the tab-bar overlap (the real cause of the earlier
clash) is now solved structurally by the two-card layout.
We keep only a minimal safety net: on very narrow phones, let the inner
row wrap so the pill drops below the text instead of overflowing, and
make sure long text wraps. No forced column, no hidden icon.
========================================================================= */
@media (max-width: 420px) {
.ashby-application-form-autofill-input-base-layer {
flex-wrap: wrap;
gap: 0.75rem;
}
}
/* =========================================================================
TOUCH DEVICES — kill "sticky hover" effects
-------------------------------------------------------------------------
On touch devices, :hover states are applied on tap and stay until the
user taps elsewhere. That's especially bad for the job-posting brief
cards, which lift (translateY) and gain an orange shadow on hover —
after a tap, the card stays visually "lifted" behind the navigation,
which looks broken.
We selectively reset only the hover effects that involve transforms,
shadows or background changes (the ones that visibly persist). Pure
color hovers on links/labels are kept because they're invisible once
navigation happens.
========================================================================= */
@media (hover: none) {
.ashby-job-posting-brief:hover {
border-color: var(--mistralBorder);
transform: none;
box-shadow: none;
}
.ashby-application-form-submit-button:hover {
background-position: 0% 50%;
box-shadow: 0 6px 18px -8px rgba(250, 80, 15, 0.55);
}
.ashby-job-board-back-to-all-jobs-button:hover {
border-color: var(--mistralBorder);
color: var(--mistralInk);
}
.ashby-job-board-filter:hover {
border-color: var(--mistralBorder);
}
}
/* =========================================================================
ACCESSIBILITY — honor user preference for reduced motion
-------------------------------------------------------------------------
Users with vestibular disorders set "Reduce motion" in their OS. Respect
it by collapsing every animation/transition to a near-instant duration.
We don't disable them entirely (0ms) because some libraries rely on
transitionend events firing; 0.01ms is the conventional safe value.
========================================================================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}