/* stylelint-disable */ /* * ClickHouse-branded Ashby job board. * Tokens mirror marketing-website/src/app/globals.css (Tailwind v4 theme): * primary-300 #faff69 (default) / primary-400 #eef400 (hover) / primary-500 #9fa300 / primary-600 #4f5100 * neutral-200 #dfdfdf, -400 #a0a0a0, -500 #808080, -600 #606060, -700 #414141, -725 #282828, -800 #1d1d1d, -900 #151515 * body: #131312 + linear-gradient(275deg, #292924 0%, #0f0f0f 100%) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* These variables can be used to control values throughout the job board. */ :root { /* Background color of the application */ --colorAppBackground: #131312; /* * Darker primary color * WARNING - This can be set in the Ashby admin under theme settings! * The admin theme injects these as inline styles on , so !important * is required for this file to win. Keep the admin settings in sync anyway. */ --colorPrimary900: #eef400 !important; /* * Lighter primary color * WARNING - This can be set in the Ashby admin under theme settings! * (Admin currently injects #2463EB — blue — which this overrides.) */ --colorPrimary600: #faff69 !important; /* The max width of job board container */ --widthMaxContent: 800px; /* The max width of application form section */ --widthMaxJobBoard: 800px; /* The max width of subscription preferences container */ --widthMaxSubscriptionPreferences: 600px; /* Container border radius (matches marketing rounded-lg) */ --borderRadiusContainer: 8px; /* Border radius of control elements (matches marketing rounded-md inputs) */ --borderRadiusControl: 6px; /* Button border radius (matches marketing .btn rounded) */ --borderRadiusButton: 4px; /* Font families (marketing site body font: Inter) */ --fontFamily: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; /* ClickHouse design tokens */ --chYellow: #faff69; --chYellowHover: #eef400; --chYellowDim: #9fa300; --chYellowBorder: #4f5100; --chText: #dfdfdf; --chTextMuted: #a0a0a0; --chBorder: #414141; --chBorderHover: #808080; --chCard: #1d1d1d; --chCardHover: #282828; --chInputBg: #282828; --chInputFocusBg: #151515; --chOnYellow: #151515; /* * Global styles. Ashby's CSS validator only allows their specified classes, * so page-wide styles live here on :root (background paints the canvas, * color/accent-color/font-smoothing inherit down the tree). */ background-color: #131312; background-image: linear-gradient(275deg, #292924 0%, #0f0f0f 100%); background-attachment: fixed; color: var(--chText); line-height: 1.5; accent-color: var(--chYellow); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --------------------------------------------------------------------------- * Ashby elements * ------------------------------------------------------------------------ */ /* A container for the application limits disclosure message shown before form submission. */ .ashby-application-blocking-disclosure { background-color: var(--chCard); border: 1px solid var(--chBorder); border-radius: var(--borderRadiusContainer); color: var(--chTextMuted); padding: 16px; } /* Application autofill input's base layer element. This contains standard copy, a CTA button, and potential validation alerts. */ .ashby-application-form-autofill-input-base-layer { color: var(--chText); } /* Application autofill input's description. */ .ashby-application-form-autofill-input-description { color: var(--chTextMuted); } /* Application autofill input's drag state overlay element. Can style [data-state] which can be 'active' or 'hidden'. */ .ashby-application-form-autofill-input-drag-layer { border-radius: var(--borderRadiusContainer); } .ashby-application-form-autofill-input-drag-layer[data-state="active"] { background-color: rgba(250, 255, 105, 0.1); } /* Application autofill input form's alert element. Can style [data-highlight] which can be 'negative' or 'positive'. */ .ashby-application-form-autofill-input-form-alert { border-radius: var(--borderRadiusControl); } .ashby-application-form-autofill-input-form-alert[data-highlight="negative"] { color: #f87171; } .ashby-application-form-autofill-input-form-alert[data-highlight="positive"] { color: #4ade80; } /* Application autofill input's magic sparkles icon. */ .ashby-application-form-autofill-input-icon { color: var(--chYellow); } /* Application autofill input's pending state overlay element. Can style [data-state] which can be 'active' or 'hidden'. */ .ashby-application-form-autofill-input-pending-layer { border-radius: var(--borderRadiusContainer); } .ashby-application-form-autofill-input-pending-layer[data-state="active"] { background-color: rgba(19, 19, 18, 0.8); } /* Application autofill input's root element. Can style [data-state] which can be 'pending', 'drag', or 'default'. */ .ashby-application-form-autofill-input-root { background-color: #1f1f1c; border: 1px solid var(--chYellowBorder); border-radius: var(--borderRadiusContainer); transition: border-color 0.3s; } .ashby-application-form-autofill-input-root[data-state="drag"] { border-color: var(--chYellow); } /* Application autofill input's title. */ .ashby-application-form-autofill-input-title { color: #ffffff; font-weight: 600; } /* Container element for application autofill input form. */ .ashby-application-form-autofill-pane { color: var(--chText); } /* The resume uploader to auto-fill the application form */ .ashby-application-form-autofill-uploader { color: var(--chText); } /* A container for displaying the custom message to the user */ .ashby-application-form-blocked-application-container { background-color: var(--chCard); border: 1px solid var(--chBorder); border-radius: var(--borderRadiusContainer); color: var(--chText); padding: 16px; } /* A container for the application form. */ .ashby-application-form-container { background-color: transparent; box-shadow: none; color: var(--chText); } /* A container for the failure message */ .ashby-application-form-failure-container { background-color: var(--chCard); border: 1px solid rgba(248, 113, 113, 0.4); border-radius: var(--borderRadiusContainer); color: var(--chText); padding: 16px; } /* A container for the label and input on an application form. */ .ashby-application-form-field-entry { color: var(--chText); } /* An autocomplete input on an application form. */ .ashby-application-form-input-autocomplete { /* Use [aria-expanded="true"] to target when the popup is open. */ background-color: var(--chInputBg) !important; border: 1px solid var(--chBorder) !important; border-radius: var(--borderRadiusControl) !important; color: #ffffff !important; transition: border-color 0.3s, background-color 0.3s; } .ashby-application-form-input-autocomplete::placeholder { color: var(--chTextMuted) !important; } .ashby-application-form-input-autocomplete:hover { border-color: #606060 !important; } .ashby-application-form-input-autocomplete:focus-within, .ashby-application-form-input-autocomplete:focus, .ashby-application-form-input-autocomplete[aria-expanded="true"] { background-color: var(--chInputFocusBg) !important; border-color: var(--chYellow) !important; outline: none; } /* The results popup for an autocomplete input. */ .ashby-application-form-input-autocomplete-popup { /* Use [data-loading] to target when results are loading. * Use [data-empty] to target when there are no results found. */ background-color: var(--chCard); border: 1px solid var(--chBorder); border-radius: var(--borderRadiusControl); box-shadow: 0 0 24px rgba(0, 0, 0, 0.25); color: var(--chText); } /* The empty state message displayed in an autocomplete input popup. */ .ashby-application-form-input-autocomplete-popup-empty { color: var(--chTextMuted); } /* The loading state message displayed in an autocomplete input popup. */ .ashby-application-form-input-autocomplete-popup-loading { color: var(--chTextMuted); } /* A result item displayed in an autocomplete input popup. */ .ashby-application-form-input-autocomplete-popup-result { /* Use [aria-selected="true"] to target the selected result. */ color: var(--chText); cursor: pointer; } .ashby-application-form-input-autocomplete-popup-result[aria-selected="true"] { background-color: var(--chCardHover); color: #ffffff; } /* A checkbox group on an application form. */ .ashby-application-form-input-checkbox-group { color: var(--chText); } /* An option in a checkbox group. */ .ashby-application-form-input-checkbox-group-option { /* Use [data-checked] to target checked options. * Use [data-disabled] to target disabled options. */ color: var(--chText); } .ashby-application-form-input-checkbox-group-option[data-checked] { color: #ffffff; } .ashby-application-form-input-checkbox-group-option[data-disabled] { opacity: 0.5; } /* The checkbox inside a checkbox group option. */ .ashby-application-form-input-checkbox-group-option-checkbox { accent-color: var(--chYellow); } /* The label for a checkbox group option. */ .ashby-application-form-input-checkbox-group-option-label { cursor: pointer; } /* A date input on an application form. */ .ashby-application-form-input-date { background-color: var(--chInputBg) !important; border: 1px solid var(--chBorder) !important; border-radius: var(--borderRadiusControl) !important; color: #ffffff !important; transition: border-color 0.3s, background-color 0.3s; } .ashby-application-form-input-date:hover { border-color: #606060 !important; } .ashby-application-form-input-date:focus, .ashby-application-form-input-date:focus-within { background-color: var(--chInputFocusBg) !important; border-color: var(--chYellow) !important; outline: none; } /* The date picker popup of a date input. */ .ashby-application-form-input-date-popup { background-color: var(--chCard); border: 1px solid var(--chBorder); border-radius: var(--borderRadiusContainer); box-shadow: 0 0 24px rgba(0, 0, 0, 0.25); color: var(--chText); } /* The header of the date picker popup. */ .ashby-application-form-input-date-popup-header { color: #ffffff; } /* The month navigation button inside the date picker popup header. */ .ashby-application-form-input-date-popup-header-button { /* Use [data-direction="previous"] or [data-direction="next"] to target the buttons separately. */ background-color: transparent; border-radius: var(--borderRadiusButton); color: var(--chText); cursor: pointer; transition: background-color 0.3s; } .ashby-application-form-input-date-popup-header-button:hover { background-color: var(--chCardHover); color: #ffffff; } /* The month/year title of the date picker popup. */ .ashby-application-form-input-date-popup-title { color: #ffffff; font-weight: 600; } /* A dropdown input on an application form. */ .ashby-application-form-input-dropdown { /* Use [data-disabled] to target the disabled state. */ background-color: transparent; border: none; color: #ffffff; } .ashby-application-form-input-dropdown[data-disabled] { opacity: 0.5; } /* The icon inside a dropdown input. */ .ashby-application-form-input-dropdown-icon { color: var(--chTextMuted); } .ashby-application-form-input-dropdown-icon svg, .ashby-application-form-input-dropdown-icon svg path, .ashby-application-form-input-dropdown-icon path { fill: var(--chTextMuted) !important; } /* The select element inside a dropdown input. */ .ashby-application-form-input-dropdown-select { background-color: var(--chInputBg) !important; border: 1px solid var(--chBorder) !important; border-radius: var(--borderRadiusControl) !important; color: #ffffff !important; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; } .ashby-application-form-input-dropdown-select:hover { border-color: #606060 !important; } .ashby-application-form-input-dropdown-select:focus { background-color: var(--chInputFocusBg) !important; border-color: var(--chYellow) !important; outline: none; } .ashby-application-form-input-dropdown-select option { background-color: var(--chCard); color: var(--chText); } /* The add entry button inside the education history input. */ .ashby-application-form-input-education-add { background-color: var(--chCard); border: 1px solid var(--chBorder); border-radius: var(--borderRadiusButton); color: #ffffff; cursor: pointer; font-weight: 500; transition: background-color 0.3s, border-color 0.3s; } .ashby-application-form-input-education-add:hover { background-color: var(--chCardHover); border-color: var(--chBorderHover); } /* An entry in the education history input on an application form. */ .ashby-application-form-input-education-entry { background-color: var(--chCard); border: 1px solid var(--chBorder); border-radius: var(--borderRadiusContainer); } /* The delete button inside an education history entry. */ .ashby-application-form-input-education-entry-delete { background-color: transparent; color: var(--chTextMuted); cursor: pointer; transition: color 0.3s; } .ashby-application-form-input-education-entry-delete:hover { color: #f87171; } /* The header of an entry in the education history input. */ .ashby-application-form-input-education-entry-header { color: #ffffff; font-weight: 600; } /* A file input on an application form. */ .ashby-application-form-input-file { color: var(--chText); } /* The drag & drop zone in a file input. */ .ashby-application-form-input-file-dropzone { background-color: var(--chCard); border: 1px dashed var(--chBorder); border-radius: var(--borderRadiusControl); transition: border-color 0.3s; } .ashby-application-form-input-file-dropzone:hover { border-color: #606060; } /* The instructions for the drag & drop zone in a file input. */ .ashby-application-form-input-file-dropzone-instructions { color: var(--chTextMuted); font-size: 0.875em; } /* The upload button for the drag & drop zone in a file input. */ .ashby-application-form-input-file-dropzone-upload { background-color: var(--chCardHover); border: 1px solid var(--chBorder); border-radius: var(--borderRadiusButton); color: #ffffff; cursor: pointer; font-weight: 500; transition: background-color 0.3s, border-color 0.3s; } .ashby-application-form-input-file-dropzone-upload:hover { border-color: var(--chBorderHover); } /* An uploaded item in a file input. */ .ashby-application-form-input-file-item { background-color: var(--chCard); border: 1px solid var(--chBorder); border-radius: var(--borderRadiusControl); } /* The delete button for an uploaded item in a file input. */ .ashby-application-form-input-file-item-delete { background-color: transparent; color: var(--chTextMuted); cursor: pointer; transition: color 0.3s; } .ashby-application-form-input-file-item-delete:hover { color: #f87171; } /* The filename of an uploaded item in a file input. */ .ashby-application-form-input-file-item-name { color: var(--chText); font-size: 0.875em; } /* A radio group on an application form. */ .ashby-application-form-input-radio-group { color: var(--chText); } /* An option in a radio group. */ .ashby-application-form-input-radio-group-option { /* Use [data-checked] to target the checked option. * Use [data-disabled] to target disabled options. */ color: var(--chText); } .ashby-application-form-input-radio-group-option[data-checked] { color: #ffffff; } .ashby-application-form-input-radio-group-option[data-disabled] { opacity: 0.5; } /* The label for a radio group option. */ .ashby-application-form-input-radio-group-option-label { cursor: pointer; } /* The radio inside a radio group option. */ .ashby-application-form-input-radio-group-option-radio { accent-color: var(--chYellow); } /* A text input on an application form. */ .ashby-application-form-input-text { /* Use [type="..."] to target different fields. Possible values: "text", "email", "tel", "url", "number". */ background-color: var(--chInputBg) !important; border: 1px solid var(--chBorder) !important; border-radius: var(--borderRadiusControl) !important; color: #ffffff !important; transition: border-color 0.3s, background-color 0.3s; } .ashby-application-form-input-text::placeholder { color: var(--chTextMuted) !important; } .ashby-application-form-input-text:hover { border-color: #606060 !important; } .ashby-application-form-input-text:focus { background-color: var(--chInputFocusBg) !important; border-color: var(--chYellow) !important; outline: none; } /* A textarea input on an application form. */ .ashby-application-form-input-textarea { background-color: var(--chInputBg) !important; border: 1px solid var(--chBorder) !important; border-radius: var(--borderRadiusControl) !important; color: #ffffff !important; transition: border-color 0.3s, background-color 0.3s; } .ashby-application-form-input-textarea::placeholder { color: var(--chTextMuted) !important; } .ashby-application-form-input-textarea:hover { border-color: #606060 !important; } .ashby-application-form-input-textarea:focus { background-color: var(--chInputFocusBg) !important; border-color: var(--chYellow) !important; outline: none; } /* A Yes/No input on an application form. */ .ashby-application-form-input-yesno { /* Use [data-disabled] to target the disabled state. */ } .ashby-application-form-input-yesno[data-disabled] { opacity: 0.5; } /* An option inside a Yes/No input. */ .ashby-application-form-input-yesno-option { /* Use [data-option="yes"] or [data-option="no"] to target the options separately. * Use [aria-pressed="true"] to target the active option. */ background-color: var(--chCard) !important; border: 1px solid var(--chBorder) !important; border-radius: var(--borderRadiusButton) !important; color: var(--chText) !important; cursor: pointer; font-weight: 500; transition: background-color 0.3s, border-color 0.3s, color 0.3s; } .ashby-application-form-input-yesno-option:hover { background-color: var(--chCardHover) !important; border-color: var(--chBorderHover) !important; } .ashby-application-form-input-yesno-option[aria-pressed="true"] { background-color: var(--chYellow) !important; border-color: var(--chYellow) !important; color: var(--chOnYellow) !important; } .ashby-application-form-input-yesno-option[aria-pressed="true"]:hover { background-color: var(--chYellowHover) !important; border-color: var(--chYellowHover) !important; } /* The description of each question on an application form. Will only show if a description is specified. */ .ashby-application-form-question-description { color: var(--chTextMuted); } /* The title of each question on an application form. */ .ashby-application-form-question-title { color: #ffffff; font-weight: 500; } /* A single section on the Ashby application form. All questions will be wrapped in sections, though the default section may not have a title. */ .ashby-application-form-section-container { color: var(--chText); } /* The header for an application form section, possibly containing a title and description. */ .ashby-application-form-section-header { } /* The description for an application form section. May not exist if no description was specified. */ .ashby-application-form-section-header-description { color: var(--chTextMuted); } /* The title for an application form section. May not exist for the default section. */ .ashby-application-form-section-header-title { color: #ffffff; font-size: 1.25em; font-weight: 600; line-height: 1.25; } /* The application submission button. Will have loading and hover states that should be tested. */ .ashby-application-form-submit-button { background-color: var(--chYellow) !important; border: 1px solid var(--chYellow) !important; border-radius: var(--borderRadiusButton) !important; color: var(--chOnYellow) !important; cursor: pointer; font-family: var(--fontFamily); font-weight: 500; line-height: 1.25; transition: background-color 0.15s, border-color 0.15s; } .ashby-application-form-submit-button:hover, .ashby-application-form-submit-button:active { background-color: var(--chYellowHover) !important; border-color: var(--chYellowHover) !important; color: var(--chOnYellow) !important; } .ashby-application-form-submit-button:disabled { cursor: default; opacity: 0.5; pointer-events: none; } /* A container for the success message */ .ashby-application-form-success-container { background-color: var(--chCard); border: 1px solid rgba(250, 255, 105, 0.4); border-radius: var(--borderRadiusContainer); color: var(--chText); padding: 16px; } /* The text message consent description. Displayed below phone number fields. Will only show if texting is enabled. */ .ashby-application-form-texting-consent-description { color: var(--chTextMuted); font-size: 0.8125em; } /* The heading of a department, which can have many teams under it. */ .ashby-department-heading { color: #ffffff; font-size: 1.25em; font-weight: 600; line-height: 1.25; } /* The heading of a single team. */ .ashby-department-heading-level { color: var(--chTextMuted); font-size: 0.875em; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; } /* 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 { background-color: var(--chCard); border: 1px solid var(--chBorder); border-radius: var(--borderRadiusButton); color: #ffffff; cursor: pointer; font-weight: 500; text-decoration: none; transition: background-color 0.15s, border-color 0.15s; } .ashby-job-board-back-to-all-jobs-button:hover { background-color: var(--chCardHover); border-color: var(--chBorderHover); text-decoration: none; } /* A select box element for filtering the job board. * Ashby styles this via a compound selector (select._filter_xxx), which beats * a single class — hence !important on the properties their theme also sets. */ .ashby-job-board-filter { background-image: none !important; background-color: var(--chInputBg) !important; border: 1px solid var(--chBorder) !important; border-radius: var(--borderRadiusControl) !important; color: #ffffff !important; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; } .ashby-job-board-filter:hover { border-color: #606060 !important; } .ashby-job-board-filter:focus { background-color: var(--chInputFocusBg) !important; border-color: var(--chYellow) !important; outline: none; } .ashby-job-board-filter option { background-color: var(--chCard); color: var(--chText); } /* The chevron icon overlaid on each filter select (unclassed sibling element). */ .ashby-job-board-filter + div { color: var(--chTextMuted); } .ashby-job-board-filter + div svg, .ashby-job-board-filter + div svg path { fill: var(--chTextMuted) !important; } /* The 'Filters' label element in the job board. */ .ashby-job-board-filters-label { color: var(--chTextMuted); font-size: 0.875em; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; } /* The heading of the entire job board. */ .ashby-job-board-heading { color: #ffffff; font-size: 2em; font-weight: 600; line-height: 1.25; } /* The count of job postings on the job board. */ .ashby-job-board-heading-count { color: var(--chYellow); } /* The 'Reset filters' label element in the job board. The reset filters label element in the job board. */ .ashby-job-board-reset-filters-label { color: var(--chYellow); cursor: pointer; font-size: 0.875em; } .ashby-job-board-reset-filters-label:hover { text-decoration: underline; } .ashby-job-board-reset-filters-label svg, .ashby-job-board-reset-filters-label svg path { fill: currentColor !important; } .ashby-job-board-reset-filters-label:disabled { cursor: default; opacity: 0.5; } /* The container of the job posting details pane. */ .ashby-job-posting-brief { /* This adds some space between posting briefings. */ margin-bottom: 10px; background-color: var(--chCard); border: 1px solid var(--chBorder) !important; border-radius: var(--borderRadiusContainer); transition: background-color 0.15s, border-color 0.15s; display: grid; grid-template-columns: minmax(0, 1fr) max-content; grid-template-rows: auto auto; gap: 0; } .ashby-job-posting-brief > :nth-child(1) { grid-column: 1; grid-row: 1; } .ashby-job-posting-brief > :nth-child(2) { grid-column: 1; grid-row: 2; } .ashby-job-posting-brief::after { content: '->'; color: var(--chYellow); display: grid; place-items: center; grid-column: 2; grid-row: 1 / 3; } .ashby-job-posting-brief:hover { background-color: var(--chCardHover) !important; border-color: var(--chBorderHover) !important; } /* The heading of a department name. Departments group teams. */ .ashby-job-posting-brief-department-heading { color: #ffffff; font-size: 1.25em; font-weight: 600; line-height: 1.25; } /* The heading of a single team. */ .ashby-job-posting-brief-department-heading-level { color: var(--chTextMuted); font-size: 0.875em; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; } /* The container for the details of the job posting, in the details pane. The subtitle of the section. */ .ashby-job-posting-brief-details { color: var(--chTextMuted); font-size: 0.875em; } /* The container for the list of job post briefings. */ .ashby-job-posting-brief-list { } /* The title of the job posting in the details pane. The title of the section. */ .ashby-job-posting-brief-title { color: var(--chYellow); font-size: 1.125em; font-weight: 600; line-height: 1.25; } /* The rich text content of the job posting description */ .ashby-job-posting-description { color: var(--chText); } .ashby-job-posting-description h1, .ashby-job-posting-description h2, .ashby-job-posting-description h3, .ashby-job-posting-description h4, .ashby-job-posting-description h5, .ashby-job-posting-description h6 { color: #ffffff; font-weight: 600; line-height: 1.25; } .ashby-job-posting-description a { color: var(--chYellow); } .ashby-job-posting-description a:hover { text-decoration: underline; } .ashby-job-posting-description blockquote { background-color: var(--chCardHover); border-left: 4px solid var(--chYellow); border-radius: var(--borderRadiusContainer); font-style: italic; padding: 16px 16px 16px 20px; } /* The container of the job posting description, including the apply button */ .ashby-job-posting-description-container { background-color: transparent; box-shadow: none; color: var(--chText); } /* The main header on the job posting page */ .ashby-job-posting-header { } /* The heading of a job post */ .ashby-job-posting-heading { color: #ffffff; font-size: 2.25em; font-weight: 600; line-height: 1.25; } /* The left pane of the job posting, with the job posting details */ .ashby-job-posting-left-pane { } /* The right pane of the job posting, containing the tabs, overview, and application form */ .ashby-job-posting-right-pane { } /* The application tab in the right pane of the job posting */ .ashby-job-posting-right-pane-application-tab { } /* The overview tab in the right pane of the job posting */ .ashby-job-posting-right-pane-overview-tab { } /* The tabs slider in the right pane of the job posting */ .ashby-job-posting-right-pane-tab-slider { background-color: var(--chCard); border: 1px solid var(--chBorder); border-radius: var(--borderRadiusControl); } /* A container for any surveys specified for this application form. */ .ashby-survey-form-container { color: var(--chText); }