/* 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.
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;
}
/* Tighter right-pane padding to remove the wasted vertical whitespace
above the Overview / Application tabs on Pixel 9 etc. */
.ashby-job-posting-right-pane {
padding: 1rem 1.125rem;
}
.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;
}
/* The tablist can overflow on very narrow screens — allow horizontal
scrolling within the tab bar instead of pushing the whole page.
Also tighten its vertical margins so the autofill block below sits
closer to it (instead of leaving the upload button visually "hanging"
in space next to the tab row). */
nav[role="tablist"]:has(.ashby-job-posting-right-pane-overview-tab),
nav[role="tablist"]:has(.ashby-job-posting-right-pane-application-tab) {
gap: 1.25rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-top: 0 !important;
margin-bottom: 1rem !important;
padding-top: 0;
padding-bottom: 0.5rem;
}
}
/* =========================================================================
AUTOFILL — vertical stack on EVERY phone / tablet / stacked layout
-------------------------------------------------------------------------
Important: this block is intentionally OUTSIDE the compact-phone media
query above. The autofill overlap bug happens on every phone — including
large phones in landscape (~915px) and "Request Desktop Site" mode
(~980–1024px) — not just the small ones. So we mirror the same
conditions that trigger the column-stack of the two-pane layout:
• any viewport ≤ 1024px (tablets, big phones in landscape, desktop-mode)
• OR any touch-primary device regardless of width (foldables, etc.)
On these viewports, Ashby's default horizontal autofill layout (title +
description on the left, "Upload file" pill on the right) causes the
pill to ride up alongside the tab nav above. Stacking vertically —
title + description first, pill button below — removes the overlap
entirely and gives the pill room to breathe.
We target both `…-base-layer` and `…-root` because Ashby's actual
horizontal layout has lived on either one depending on template version.
========================================================================= */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
.ashby-application-form-autofill-input-root,
.ashby-application-form-autofill-input-base-layer {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.75rem !important;
}
/* Keep the upload pill compact (auto width, left-aligned) rather than
stretched edge-to-edge by the parent's `align-items: stretch`. */
.ashby-application-form-autofill-uploader,
.ashby-application-form-autofill-input-root button,
.ashby-application-form-autofill-input-root [role="button"] {
align-self: flex-start;
width: auto;
max-width: 100%;
position: static !important;
}
/* The magic-sparkles icon is decorative and, in the new vertical column
layout, ends up orphaned on its own row above the title — which looks
awkward. Hide it on mobile; the title text already conveys the intent. */
.ashby-application-form-autofill-input-icon {
display: none !important;
}
}
/* =========================================================================
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;
}
}