/* ============================================== SUPERMODULAR AI - ASHBY JOB BOARD CUSTOM CSS Design system extracted from Figma prototype Ashby-compliant version (no pseudo-classes) ============================================== */ /* ===== FONTS ===== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @font-face { font-family: 'Denim Ink'; src: url('https://mtfoqnfnulohbbowapdu.supabase.co/storage/v1/object/public/Files/DenimINK-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Denim Ink'; src: url('https://mtfoqnfnulohbbowapdu.supabase.co/storage/v1/object/public/Files/DenimINK-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } /* ===== ROOT VARIABLES (Ashby Theme Override) ===== */ :root { /* Primary theme colors IMPORTANT: --colorPrimary900 is overridden by Ashby's inline style on to #1d1b3e (dark navy). This makes hover states invisible on black background. You MUST change colorPrimary900 in Ashby Admin > Job Board > Theme to #F6FF9A or another light/visible color for hovers, active states, and visited links. */ --colorPrimary900: #F6FF9A; --colorPrimary600: #F6FF9A; --colorPrimary700: #dde670; --colorPrimary500A: rgba(246, 255, 154, 0.16); --colorPrimary000: #0a0a00; --colorAppBackground: #000000; /* Secondary color (used by some Ashby internal components) */ --colorSecondary900: #F6FF9A; /* Override Ashby's full neutral palette for dark theme */ --colorNeutral000: #000000; --colorNeutral100: #0d0d0d; --colorNeutral200: rgba(255, 255, 255, 0.06); --colorNeutral300: rgba(255, 255, 255, 0.08); --colorNeutral400: rgba(255, 255, 255, 0.12); --colorNeutral500: #666666; --colorNeutral600: #a0a0b0; --colorNeutral700: #cccccc; --colorNeutral800: #ffffff; --colorNeutral900: #ffffff; /* Neutral alpha variants (used for overlays, backdrops, borders) */ --colorNeutral000A: rgba(0, 0, 0, 0); --colorNeutral100A: rgba(0, 0, 0, 0.04); --colorNeutral200A: rgba(255, 255, 255, 0.06); --colorNeutral300A: rgba(255, 255, 255, 0.08); --colorNeutral400A: rgba(255, 255, 255, 0.12); --colorNeutral500A: rgba(255, 255, 255, 0.2); --colorNeutral600A: rgba(255, 255, 255, 0.35); --colorNeutral700A: rgba(255, 255, 255, 0.55); --colorNeutral800A: rgba(255, 255, 255, 0.85); /* Transparent variants (used for fade-out effects on scroll) */ --colorNeutral100Transparent: rgba(13, 13, 13, 0); --colorNeutral600Transparent: rgba(160, 160, 176, 0); /* Shadow variables (used for dropdowns, popovers, cards) */ --colorNeutralShadow: rgba(0, 0, 0, 0.5); --colorPrimaryShadow: rgba(246, 255, 154, 0.15); --colorShadowPrimaryXLight: rgba(246, 255, 154, 0.05); --colorShadowPrimaryLight: rgba(246, 255, 154, 0.1); /* Typography */ --fontFamily: 'Denim Ink', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Layout */ --widthMaxJobBoard: 960px; --borderRadiusContainer: 40px; --borderRadiusControl: 40px; --borderRadiusButton: 40px; } /* ===== GLOBAL ===== */ body { font-family: var(--fontFamily); background-color: #000000 !important; color: #ffffff; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* NOTE: Logo alignment cannot be changed via custom CSS. Ashby hardcodes the logo into a CSS grid center column using hashed module classes. To left-align the logo, change it in Ashby Admin > Settings > Job Board > Theme. */ /* ===== JOB BOARD HEADING ===== */ .ashby-job-board-heading { font-family: var(--fontFamily); font-weight: 500; color: #ffffff; line-height: 1.5; } .ashby-job-board-heading-count { background: #F6FF9A; color: #000000; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 999px; padding: 0 8px; vertical-align: middle; margin-left: 8px; position: relative; top: -2px; } /* ===== FILTERS ===== */ .ashby-job-board-filters-label { font-family: var(--fontFamily); color: #a0a0b0; font-weight: 500; font-size: 14px; } .ashby-job-board-filter { font-family: var(--fontFamily); background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--borderRadiusControl); color: #ffffff; font-weight: 400; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .ashby-job-board-reset-filters-label { font-family: var(--fontFamily); color: #F6FF9A; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; transition: opacity 0.15s ease; } /* ===== DEPARTMENT HEADINGS ===== */ .ashby-department-heading { font-family: var(--fontFamily); font-weight: 600; color: #ffffff; line-height: 1.5; } .ashby-department-heading-level { font-family: var(--fontFamily); font-weight: 600; color: #ffffff; } .ashby-job-posting-brief-department-heading { font-family: var(--fontFamily); font-weight: 600; color: #ffffff; } .ashby-job-posting-brief-department-heading-level { font-family: var(--fontFamily); } /* ===== JOB LISTING CARDS ===== */ .ashby-job-posting-brief-list { display: flex; flex-direction: column; gap: 12px; } .ashby-job-posting-brief { margin-bottom: 0; background: #161616; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--borderRadiusContainer); padding: 20px 24px; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease; cursor: pointer; } .ashby-job-posting-brief-title { font-family: var(--fontFamily); font-weight: 500; color: #ffffff; line-height: 1.5; transition: color 0.15s ease; } .ashby-job-posting-brief-details { font-family: var(--fontFamily); color: #a0a0b0; font-weight: 400; line-height: 1.5; } /* ===== JOB DETAIL VIEW ===== */ .ashby-job-posting-left-pane { font-family: var(--fontFamily); color: #ffffff; } .ashby-job-posting-right-pane { font-family: var(--fontFamily); color: #ffffff; } .ashby-job-posting-header { font-family: var(--fontFamily); } .ashby-job-posting-heading { font-family: var(--fontFamily); font-weight: 500; color: #ffffff; line-height: 1.5; } /* Job description content headings */ .ashby-job-posting-right-pane h1, .ashby-job-posting-right-pane h2, .ashby-job-posting-right-pane h3, .ashby-job-posting-right-pane h4, .ashby-job-posting-right-pane h5, .ashby-job-posting-right-pane h6, .ashby-job-posting-left-pane h1, .ashby-job-posting-left-pane h2, .ashby-job-posting-left-pane h3, .ashby-job-posting-left-pane h4, .ashby-job-posting-left-pane h5, .ashby-job-posting-left-pane h6 { font-family: var(--fontFamily); color: #F6FF9A; font-weight: 600; line-height: 1.4; margin-top: 1.5em; margin-bottom: 0.75em; } .ashby-job-posting-right-pane h1, .ashby-job-posting-left-pane h1 { font-size: 1.75em; } .ashby-job-posting-right-pane h2, .ashby-job-posting-left-pane h2 { font-size: 1.5em; } .ashby-job-posting-right-pane h3, .ashby-job-posting-left-pane h3 { font-size: 1.25em; } .ashby-job-posting-right-pane p, .ashby-job-posting-left-pane p { font-family: var(--fontFamily); line-height: 1.7; margin-bottom: 1em; } .ashby-job-posting-right-pane ul, .ashby-job-posting-right-pane ol, .ashby-job-posting-left-pane ul, .ashby-job-posting-left-pane ol { font-family: var(--fontFamily); margin-left: 1.5em; margin-bottom: 1em; } .ashby-job-posting-right-pane li, .ashby-job-posting-left-pane li { line-height: 1.7; margin-bottom: 0.5em; } /* ===== TABS ===== */ .ashby-job-posting-right-pane-tab-slider { font-family: var(--fontFamily); } .ashby-job-posting-right-pane-overview-tab, .ashby-job-posting-right-pane-application-tab { font-family: var(--fontFamily); font-weight: 500; color: #ffffff; background: transparent; border: none; outline: none; text-decoration: none; cursor: pointer; } /* ===== BACK BUTTON ===== */ .ashby-job-board-back-to-all-jobs-button { font-family: var(--fontFamily); background: #1a1a1a; color: #ffffff; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 40px; padding: 10px 20px; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; display: inline-flex; align-items: center; gap: 8px; } /* ===== APPLICATION FORM ===== */ .ashby-application-form-container { font-family: var(--fontFamily); } .ashby-application-form-section-container { font-family: var(--fontFamily); } .ashby-application-form-section-header { font-family: var(--fontFamily); } .ashby-application-form-section-header-title { font-family: var(--fontFamily); font-weight: 500; color: #ffffff; line-height: 1.5; } .ashby-application-form-section-header-description { font-family: var(--fontFamily); color: #a0a0b0; font-weight: 400; } .ashby-application-form-field-entry { font-family: var(--fontFamily); } .ashby-application-form-question-title { font-family: var(--fontFamily); font-weight: 500; color: #ffffff; line-height: 1.5; } .ashby-application-form-question-description { font-family: var(--fontFamily); color: #a0a0b0; font-weight: 400; } /* ===== FORM INPUTS (generic targeting) ===== */ .ashby-application-form-container input, .ashby-application-form-container textarea, .ashby-application-form-container select { font-family: var(--fontFamily); background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--borderRadiusControl); color: #ffffff; font-weight: 400; line-height: 1.5; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .ashby-application-form-container input::placeholder, .ashby-application-form-container textarea::placeholder { color: #666666; } /* ===== SUBMIT BUTTON ===== */ .ashby-application-form-submit-button { font-family: var(--fontFamily); font-weight: 500; border-radius: var(--borderRadiusButton); transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; line-height: 1.5; } /* ===== AUTOFILL / RESUME UPLOAD ===== */ .ashby-application-form-autofill-pane { font-family: var(--fontFamily); border: none; border-radius: var(--borderRadiusContainer); background: transparent; transition: border-color 0.15s ease, background-color 0.15s ease; } .ashby-application-form-autofill-input-root { font-family: var(--fontFamily); } .ashby-application-form-autofill-input-title { font-family: var(--fontFamily); font-weight: 500; color: #ffffff; margin-top: 0; margin-bottom: 0; } .ashby-application-form-autofill-input-description { font-family: var(--fontFamily); color: #a0a0b0; font-weight: 400; margin-bottom: 0; } .ashby-application-form-autofill-uploader { font-family: var(--fontFamily); } /* ===== FORM ALERTS ===== */ .ashby-application-form-autofill-input-form-alert { font-family: var(--fontFamily); border-radius: var(--borderRadiusControl); } /* ===== SUCCESS / FAILURE STATES ===== */ .ashby-application-form-success-container { font-family: var(--fontFamily); color: #ffffff; } .ashby-application-form-failure-container { font-family: var(--fontFamily); } .ashby-application-form-blocked-application-container { font-family: var(--fontFamily); } /* ===== TEXTING CONSENT ===== */ .ashby-application-form-texting-consent-description { font-family: var(--fontFamily); color: #a0a0b0; font-weight: 400; } /* ===== SURVEY FORM ===== */ .ashby-survey-form-container { font-family: var(--fontFamily); } /* ===== JOB DESCRIPTION LINKS ===== */ .ashby-job-posting-right-pane a, .ashby-job-posting-left-pane a { color: #F6FF9A; text-decoration: none; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .ashby-job-posting-brief { padding: 16px; } }