/* ============================================================ Armadin — Custom Ashby Job Board CSS (Ashby-validator compliant) Theme: Sleek Monochrome (Black background / White text) Accent: Armadin Red ============================================================ HOW TO USE: Paste this entire file into Ashby Admin -> Job Board -> Custom CSS. In Ashby theme settings, set your primary color to #FFFFFF so built-in components (back arrow, focus states, checkboxes) match. NOTE: Ashby's CSS validator only allows selectors that use its documented .ashby-* classes (plus standard element/at-rule syntax). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap'); :root { --colorPrimary900: #FFFFFF; --colorPrimary600: #E5E5E5; --widthMaxJobBoard: 880px; --borderRadiusContainer: 12px; --borderRadiusControl: 8px; --borderRadiusButton: 8px; --colorAppBackground: #000000; --fontFamily: "Inter", "DM Sans", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", sans-serif; --arm-bg: #000000; --arm-surface: #0b0b0b; --arm-surface-2: #141414; --arm-border: #1a1a1a; --arm-border-strong: #2a2a2a; --arm-white: #FFFFFF; --arm-text: #EDEDED; --arm-muted: #8a8a8a; --arm-faint: #5a5a5a; --arm-accent: #E63946; --arm-accent-hover: #ff4d5b; --arm-ease: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } body, html { background-color: var(--arm-bg) !important; color: var(--arm-text); font-family: var(--fontFamily); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Job board heading */ .ashby-job-board-heading { background: linear-gradient(180deg, #101010 0%, #000 100%); border: none; border-radius: var(--borderRadiusContainer); padding: 3.5rem 2rem 3rem; margin-bottom: 2.5rem; font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 600; font-size: 2rem; line-height: 1.15; letter-spacing: 0.06em; text-transform: uppercase; color: var(--arm-white); } .ashby-job-board-heading-count { color: var(--arm-muted); font-size: 0.8rem; letter-spacing: 0.08em; display: block; margin-top: 0.6rem; font-weight: 400; } /* Filters label */ .ashby-job-board-filters-label { color: var(--arm-muted); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; } /* FIX: Filter dropdowns render as white boxes because Ashby paints a white linear-gradient background-image over the select. */ .ashby-job-board-filter { background-color: var(--arm-surface) !important; background-image: none !important; color: var(--arm-text) !important; border: 1px solid var(--arm-border-strong) !important; border-radius: var(--borderRadiusControl) !important; padding: 0.6rem 0.85rem !important; font-family: var(--fontFamily); font-weight: 400; -webkit-appearance: none !important; appearance: none !important; transition: border-color var(--arm-ease); } .ashby-job-board-filter:hover { border-color: var(--arm-white) !important; } .ashby-job-board-filter:focus-visible { border-color: var(--arm-accent) !important; outline: none !important; } .ashby-job-board-filter option { background-color: var(--arm-surface) !important; color: var(--arm-text) !important; } /* Department headings */ .ashby-department-heading, .ashby-job-posting-brief-department-heading { color: var(--arm-muted); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; border-bottom: 1px solid var(--arm-border); padding-bottom: 0.6rem; margin-top: 2.5rem; margin-bottom: 1.25rem; } /* Job listing cards */ .ashby-job-posting-brief { background-color: var(--arm-surface); border: 1px solid transparent; border-radius: var(--borderRadiusContainer); padding: 1.5rem 1.75rem; margin-bottom: 12px; transition: background-color var(--arm-ease), border-color var(--arm-ease), transform var(--arm-ease); } .ashby-job-posting-brief:hover { background-color: var(--arm-surface-2); border-color: var(--arm-border-strong); transform: translateY(-1px); } .ashby-job-posting-brief-title { color: var(--arm-white); font-weight: 500; font-size: 1.02rem; } .ashby-job-posting-brief-details { color: var(--arm-muted); font-size: 0.82rem; margin-top: 0.4rem; } /* Job detail header + title */ .ashby-job-posting-header { background: linear-gradient(180deg, #101010 0%, #000 100%); border: none; border-radius: var(--borderRadiusContainer); padding: 3rem 2rem 2.5rem; margin-bottom: 2.5rem; box-shadow: none; } .ashby-job-posting-heading { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 600; font-size: 1.75rem; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; color: var(--arm-white); box-shadow: none; text-shadow: none; } /* Detail panes */ .ashby-job-posting-left-pane, .ashby-job-posting-right-pane { background-color: transparent; border: none; padding: 1.75rem; color: var(--arm-text); } /* Left-pane sidebar labels -> white */ .ashby-job-posting-left-pane h2 { color: var(--arm-white) !important; } .ashby-job-posting-left-pane p { color: var(--arm-text); line-height: 1.6; } /* FIX: Overview job-description block has a white background baked in by Ashby. Make it transparent and force white text (white-on-black). */ .ashby-job-posting-right-pane > div { background-color: transparent !important; background-image: none !important; } .ashby-job-posting-right-pane > div, .ashby-job-posting-right-pane p, .ashby-job-posting-right-pane li, .ashby-job-posting-right-pane h1, .ashby-job-posting-right-pane h2, .ashby-job-posting-right-pane h3, .ashby-job-posting-right-pane span { color: var(--arm-text) !important; } .ashby-job-posting-right-pane p, .ashby-job-posting-right-pane li { line-height: 1.7; } .ashby-job-posting-right-pane a { color: var(--arm-accent) !important; text-decoration: none; } .ashby-job-posting-right-pane a:hover { color: var(--arm-accent-hover) !important; text-decoration: underline; } /* Tabs */ .ashby-job-posting-right-pane-overview-tab, .ashby-job-posting-right-pane-application-tab { color: var(--arm-muted); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; padding: 0.5rem 1rem; transition: color var(--arm-ease); } .ashby-job-posting-right-pane-overview-tab:hover, .ashby-job-posting-right-pane-application-tab:hover { color: var(--arm-white); } .ashby-job-posting-right-pane-tab-slider { background: var(--arm-accent); height: 2px; } /* Back button */ .ashby-job-board-back-to-all-jobs-button { color: var(--arm-muted); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; transition: color var(--arm-ease), gap var(--arm-ease); } .ashby-job-board-back-to-all-jobs-button:hover { color: var(--arm-white); gap: 0.55rem; } /* Application form */ .ashby-application-form-container, .ashby-survey-form-container { background-color: transparent; border: none; padding: 1.75rem; } .ashby-application-form-section-header-title { color: var(--arm-white); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase; } .ashby-application-form-section-header-description, .ashby-application-form-question-description { color: var(--arm-muted); font-size: 0.8rem; line-height: 1.6; } /* Form question labels -> white */ .ashby-application-form-question-title { color: var(--arm-white) !important; font-size: 0.85rem; font-weight: 500; } .ashby-application-form-field-entry input, .ashby-application-form-field-entry textarea { background-color: var(--arm-surface); border: 1px solid #1f1f1f; color: var(--arm-text); border-radius: var(--borderRadiusControl); transition: border-color var(--arm-ease), box-shadow var(--arm-ease); } .ashby-application-form-field-entry input::placeholder, .ashby-application-form-field-entry textarea::placeholder { color: var(--arm-faint); } .ashby-application-form-field-entry input:focus, .ashby-application-form-field-entry textarea:focus { border-color: var(--arm-accent); box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15); outline: none; } /* FIX: autofill PANE outer wrapper has a white background -> transparent. */ .ashby-application-form-autofill-pane { background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } /* Resume / autofill upload box -> BLACK box, WHITE lettering. */ .ashby-application-form-autofill-input-root { background-color: #000000 !important; border: 1px solid var(--arm-white) !important; border-radius: 10px !important; padding: 1.5rem; transition: border-color var(--arm-ease); } .ashby-application-form-autofill-input-root:hover { border-color: var(--arm-accent) !important; } .ashby-application-form-autofill-input-title { color: var(--arm-white) !important; font-weight: 500; } .ashby-application-form-autofill-input-description { color: var(--arm-white) !important; font-size: 0.8rem; } .ashby-application-form-autofill-input-icon svg, .ashby-application-form-autofill-input-icon path { color: var(--arm-white) !important; fill: var(--arm-white) !important; } /* "Upload file" button inside the autofill box -> black box, white lettering. */ .ashby-application-form-autofill-input-root button { background: #000000 !important; color: #FFFFFF !important; border: 1px solid #FFFFFF !important; border-radius: var(--borderRadiusButton) !important; transition: background-color var(--arm-ease), color var(--arm-ease); } .ashby-application-form-autofill-input-root button:hover { background: #FFFFFF !important; color: #000000 !important; } .ashby-application-form-autofill-input-root button svg, .ashby-application-form-autofill-input-root button path { color: #FFFFFF !important; fill: #FFFFFF !important; } .ashby-application-form-autofill-input-root button:hover svg, .ashby-application-form-autofill-input-root button:hover path { color: #000000 !important; fill: #000000 !important; } /* Submit button */ .ashby-application-form-submit-button { background: var(--arm-white); color: #000; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--arm-white); border-radius: var(--borderRadiusButton); padding: 0.85rem 2.25rem; cursor: pointer; transition: background-color var(--arm-ease), color var(--arm-ease), transform var(--arm-ease); box-shadow: none; } /* FIX: the submit label lives in a child that inherited a near-white color (#EDEDED), making the text invisible on the white button. Force it dark so it reads clearly. (Verified live on the page.) */ .ashby-application-form-submit-button span { color: #000000 !important; } .ashby-application-form-submit-button svg, .ashby-application-form-submit-button path { color: #000000 !important; fill: #000000 !important; } .ashby-application-form-submit-button:hover { background: var(--arm-accent); border-color: var(--arm-accent); transform: translateY(-1px); } .ashby-application-form-submit-button:hover span { color: #FFFFFF !important; } .ashby-application-form-submit-button:hover svg, .ashby-application-form-submit-button:hover path { color: #FFFFFF !important; fill: #FFFFFF !important; } .ashby-application-form-submit-button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }