/* ------------------------------------------------------------------
edisyl × Ashby — Job board theme
Drop this CSS into the Ashby admin (Theme Settings → Custom CSS),
or load it alongside the Ashby embed on a page that already
matches the edisyl visual system.
Brand tokens used:
ink #1a1916 · paper #f5f2ec · accent red #c4402a
Playfair Display (serif) · IBM Plex Sans (sans) · IBM Plex Mono (mono)
------------------------------------------------------------------ */
/* stylelint-disable */
/* NOTE: Fonts are NOT loaded by this stylesheet on purpose.
Ashby's "Custom CSS" admin field can reject @import rules, which
then triggers downstream JS errors like "font-size: undefined".
Load Google Fonts in the page instead:
*/
:root {
/* Ashby's documented tokens, mapped to edisyl */
--colorPrimary900: #1a1916; /* ink */
--colorPrimary600: #2a2825; /* ink, slightly lifted */
--colorAppBackground: #f5f2ec; /* edisyl paper */
--widthMaxJobBoard: 1080px;
--borderRadiusContainer: 0px;
--borderRadiusControl: 0px;
--borderRadiusButton: 0px;
--fontFamily: "IBM Plex Sans", "-apple-system", BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
/* Fallback size tokens — some Ashby builds read these via JS.
Defining them with explicit pixel values prevents "undefined". */
--fontSizeBody: 14px;
--fontSizeHeading: 32px;
--fontSizeSubheading: 20px;
--fontSizeLabel: 11px;
/* edisyl-only tokens (not used by Ashby internals, but referenced below) */
--edisyl-ink: #1a1916;
--edisyl-ink-soft: #4a4843;
--edisyl-ink-faint: #8a8880;
--edisyl-paper: #f5f2ec;
--edisyl-paper-warm: #ede9e1;
--edisyl-paper-mid: #ddd9d0;
--edisyl-accent: #c4402a;
--edisyl-rule: rgba(26, 25, 22, 0.12);
--edisyl-serif: "Playfair Display", Georgia, serif;
--edisyl-mono: "IBM Plex Mono", monospace;
--edisyl-sans: "IBM Plex Sans", sans-serif;
}
/* ---------- Job board frame ---------- */
.ashby-job-board-heading {
font-family: var(--edisyl-serif);
font-weight: 400;
font-size: 36px;
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--edisyl-ink);
margin: 0 0 24px;
}
.ashby-job-board-heading-count {
font-family: var(--edisyl-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--edisyl-ink-faint);
font-weight: 400;
}
/* ---------- Filters ---------- */
.ashby-job-board-filters-label,
.ashby-job-board-reset-filters-label {
font-family: var(--edisyl-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--edisyl-ink-faint);
}
.ashby-job-board-filter {
font-family: var(--edisyl-sans);
font-size: 13px;
font-weight: 300;
color: var(--edisyl-ink);
background: var(--edisyl-paper);
border: 1px solid var(--edisyl-rule);
border-radius: 0;
padding: 10px 14px;
}
.ashby-job-board-filter:focus {
outline: none;
border-color: var(--edisyl-ink);
}
/* ---------- Department / team headings ---------- */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
font-family: var(--edisyl-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--edisyl-ink-faint);
font-weight: 500;
margin: 32px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--edisyl-rule);
}
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
font-family: var(--edisyl-serif);
font-weight: 400;
font-size: 18px;
color: var(--edisyl-ink);
margin: 16px 0 8px;
}
/* ---------- Job posting briefings (the list rows) ---------- */
.ashby-job-posting-brief-list {
display: block;
}
.ashby-job-posting-brief {
background: var(--edisyl-paper) !important;
border: 1px solid var(--edisyl-rule) !important;
border-radius: 0 !important;
padding: 22px 26px !important;
margin-bottom: 12px !important;
transition: background 0.15s, border-color 0.15s;
display: block;
}
.ashby-job-posting-brief:hover {
background: var(--edisyl-paper-warm) !important;
border-color: var(--edisyl-ink) !important;
}
.ashby-job-posting-brief-title {
font-family: var(--edisyl-serif);
font-weight: 400;
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--edisyl-ink);
margin: 0 0 6px;
}
.ashby-job-posting-brief-details {
font-family: var(--edisyl-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--edisyl-ink-faint);
}
/* ---------- Single posting page ---------- */
.ashby-job-posting-header {
border-bottom: 2px solid var(--edisyl-ink);
padding-bottom: 24px;
margin-bottom: 32px;
}
.ashby-job-posting-heading {
font-family: var(--edisyl-serif);
font-weight: 400;
font-size: 44px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--edisyl-ink);
}
/* Force the entire job posting page (and children) onto the edisyl paper. */
html,
body,
[class*="ashby-job-posting"],
[class*="ashby-application-form"],
.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane,
.ashby-job-posting-right-pane > *,
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
background-color: var(--edisyl-paper) !important;
}
/* Tab strip row: keep the underline accent, but the row background should be paper. */
.ashby-job-posting-right-pane-tab-slider {
background-color: var(--edisyl-ink) !important; /* the active-tab underline */
}
.ashby-job-posting-left-pane {
font-family: var(--edisyl-sans);
font-weight: 300;
font-size: 15px;
line-height: 1.78;
color: var(--edisyl-ink-soft);
}
.ashby-job-posting-left-pane h1,
.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3 {
font-family: var(--edisyl-serif);
font-weight: 400;
color: var(--edisyl-ink);
letter-spacing: -0.01em;
margin: 28px 0 12px;
}
.ashby-job-posting-left-pane h2 { font-size: 22px; }
.ashby-job-posting-left-pane h3 { font-size: 18px; }
.ashby-job-posting-left-pane strong { font-weight: 500; color: var(--edisyl-ink); }
.ashby-job-posting-left-pane ul,
.ashby-job-posting-left-pane ol {
padding-left: 20px;
margin: 12px 0 20px;
}
.ashby-job-posting-left-pane li {
margin-bottom: 8px;
}
.ashby-job-posting-left-pane a {
color: var(--edisyl-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---------- Tabs (Overview / Application) ---------- */
.ashby-job-posting-right-pane-tab-slider {
background: var(--edisyl-ink);
}
/* ---------- Back-to-jobs button ---------- */
.ashby-job-board-back-to-all-jobs-button {
font-family: var(--edisyl-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--edisyl-ink);
background: transparent;
border: 1px solid var(--edisyl-ink);
border-radius: 0;
padding: 10px 16px;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.ashby-job-board-back-to-all-jobs-button:hover {
background: var(--edisyl-ink);
color: var(--edisyl-paper);
}
/* ---------- Application form ---------- */
.ashby-application-form-container {
background: var(--edisyl-paper);
border: 1px solid var(--edisyl-rule);
border-radius: 0;
padding: 32px;
}
.ashby-application-form-section-header-title {
font-family: var(--edisyl-serif);
font-weight: 400;
font-size: 22px;
color: var(--edisyl-ink);
letter-spacing: -0.01em;
margin-bottom: 6px;
}
.ashby-application-form-section-header-description,
.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description {
font-family: var(--edisyl-sans);
font-size: 13px;
font-weight: 300;
color: var(--edisyl-ink-soft);
line-height: 1.7;
}
.ashby-application-form-question-title {
font-family: var(--edisyl-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--edisyl-ink-faint);
font-weight: 500;
margin-bottom: 8px;
}
.ashby-application-form-field-entry {
margin-bottom: 22px;
}
.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
font-family: var(--edisyl-sans);
font-size: 14px;
font-weight: 300;
color: var(--edisyl-ink);
background: var(--edisyl-paper);
border: 1px solid var(--edisyl-rule);
border-radius: 0;
padding: 12px 14px;
}
.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(--edisyl-ink);
}
/* ---------- Submit button (the apply CTA) ---------- */
.ashby-application-form-submit-button {
font-family: var(--edisyl-mono) !important;
font-size: 11px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
color: var(--edisyl-paper) !important;
background-color: var(--edisyl-ink) !important;
border: 1px solid var(--edisyl-ink) !important;
border-radius: 0 !important;
padding: 14px 26px !important;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.ashby-application-form-submit-button:hover {
background-color: var(--edisyl-accent) !important;
border-color: var(--edisyl-accent) !important;
color: var(--edisyl-paper) !important;
}
.ashby-application-form-submit-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ---------- Autofill (resume parsing) panel ---------- */
.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-input-root {
background: var(--edisyl-paper-warm);
border: 1px dashed var(--edisyl-rule);
border-radius: 0;
}
.ashby-application-form-autofill-input-title {
font-family: var(--edisyl-serif);
font-weight: 400;
font-size: 16px;
color: var(--edisyl-ink);
}
.ashby-application-form-autofill-input-description {
font-family: var(--edisyl-sans);
font-size: 13px;
font-weight: 300;
color: var(--edisyl-ink-soft);
}
.ashby-application-form-autofill-input-icon {
color: var(--edisyl-accent);
}
/* ---------- Status / alert messages ---------- */
.ashby-application-form-success-container {
background: var(--edisyl-paper-warm);
border: 1px solid var(--edisyl-rule);
border-left: 3px solid #2a6040;
padding: 20px 24px;
font-family: var(--edisyl-sans);
font-size: 14px;
color: var(--edisyl-ink-soft);
}
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
background: var(--edisyl-paper-warm);
border: 1px solid var(--edisyl-rule);
border-left: 3px solid var(--edisyl-accent);
padding: 20px 24px;
font-family: var(--edisyl-sans);
font-size: 14px;
color: var(--edisyl-ink-soft);
}
.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
color: var(--edisyl-accent);
font-family: var(--edisyl-mono);
font-size: 11px;
letter-spacing: 0.06em;
}
.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
color: #2a6040;
font-family: var(--edisyl-mono);
font-size: 11px;
letter-spacing: 0.06em;
}