/* ============================================================================ * Known — Ashby job board theme * ============================================================================ * * Paste the contents of this file into: * Ashby admin → Settings → Theme → Custom CSS * * Notes on overrides: * - Ashby writes `--colorPrimary600` / `--colorPrimary900` as inline * `style` attributes on from the theme admin panel. Inline styles * beat :root selectors on specificity, so we use `!important` on the * neutral/primary token overrides to win. * - Ashby's internal CSS tokens (`--colorNeutral000` … `--colorNeutral900`) * drive body text, borders, and button contrast. We remap them to our * white-on-black palette rather than fighting individual class hashes * (e.g. `_title_ud4nd_34`) which change between builds. * * Matches the marketing site at known.com: * - Switzer Medium everywhere (loaded from our Vercel blob) * - Pure black background, white text * - Solid white pill buttons with black text * - Minimal, modern, typography-led * ============================================================================ */ /* -------- Font -------- */ @font-face { font-family: "Switzer"; font-style: normal; font-weight: 500; font-display: swap; src: url("https://mstspgqzsxe5kj3q.public.blob.vercel-storage.com/fonts/switzer-medium.woff2") format("woff2"); } @font-face { font-family: "Switzer"; font-style: italic; font-weight: 500; font-display: swap; src: url("https://mstspgqzsxe5kj3q.public.blob.vercel-storage.com/fonts/switzer-medium-italic.woff2") format("woff2"); } /* -------- Theme tokens -------- !important is required: Ashby sets some of these as inline styles on from their admin panel; inline > :root without !important. */ :root, html { /* Surfaces */ --colorAppBackground: #000000 !important; --colorNeutral000: #000000 !important; /* used as contrast text on primary buttons */ --colorNeutral100: rgba(255, 255, 255, 0.02) !important; --colorNeutral200: rgba(255, 255, 255, 0.05) !important; /* dividers / borders */ --colorNeutral300: rgba(255, 255, 255, 0.1) !important; --colorNeutral400: rgba(255, 255, 255, 0.3) !important; --colorNeutral500: rgba(255, 255, 255, 0.5) !important; --colorNeutral600: rgba(255, 255, 255, 0.65) !important; --colorNeutral700: rgba(255, 255, 255, 0.78) !important; --colorNeutral800: rgba(255, 255, 255, 0.88) !important; /* body text */ --colorNeutral900: #ffffff !important; /* titles */ /* Primary = pure white; black text on it */ --colorPrimary600: #ffffff !important; --colorPrimary900: #ffffff !important; /* Sizing */ --widthMaxJobBoard: 720px; --borderRadiusContainer: 14px; --borderRadiusControl: 10px; --borderRadiusButton: 9999px; /* Font */ --fontFamily: "Switzer", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* -------- Base -------- */ html, body { background-color: #000 !important; color: rgba(255, 255, 255, 0.9); font-family: var(--fontFamily); font-weight: 500; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; transition: color 200ms var(--ease); } a:hover { color: #fff; } /* Every heading is Switzer — sizes + weight do the hierarchy */ h1, h2, h3, h4 { color: #fff; font-family: var(--fontFamily); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; } h1, .ashby-job-board-heading, .ashby-job-posting-header, .ashby-job-posting-heading { font-size: 32px; letter-spacing: -0.03em; line-height: 1.05; } h2, .ashby-application-form-section-header-title { font-size: 20px; letter-spacing: -0.02em; } /* Force white on every Ashby title class — Ashby's build-hashed classes (`_title_*`, `_heading_*`) apply their own color and beat generic selectors. */ [class*="_title_"], [class*="_heading_"], .ashby-job-posting-heading, .ashby-job-posting-brief-title, .ashby-application-form-section-header-title, .ashby-application-form-question-title, .ashby-application-form-autofill-input-title { color: #ffffff !important; } /* -------- Job board (list view) -------- */ .ashby-job-board-heading-count { color: rgba(255, 255, 255, 0.45); font-family: var(--fontFamily); font-weight: 500; } .ashby-department-heading, .ashby-job-posting-brief-department-heading { color: rgba(255, 255, 255, 0.45); font-family: var(--fontFamily); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .ashby-job-posting-brief { border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0; margin-bottom: 0; padding: 18px 16px; transition: background-color 300ms var(--ease), border-radius 300ms var(--ease), border-color 300ms var(--ease), padding 300ms var(--ease); } .ashby-job-posting-brief:hover { background-color: rgba(255, 255, 255, 0.04); border-bottom-color: transparent; border-radius: 14px; padding: 18px 20px; } .ashby-job-posting-brief-title { color: rgba(255, 255, 255, 0.95); font-family: var(--fontFamily); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; } .ashby-job-posting-brief-details { color: rgba(255, 255, 255, 0.5); font-family: var(--fontFamily); font-size: 13px; font-weight: 500; } /* -------- Job board filters -------- */ .ashby-job-board-filter { background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--borderRadiusControl); color: #fff; font-family: var(--fontFamily); } .ashby-job-board-filters-label, .ashby-job-board-reset-filters-label { color: rgba(255, 255, 255, 0.55); font-family: var(--fontFamily); font-weight: 500; } /* -------- Job posting detail page -------- */ .ashby-job-posting-left-pane, .ashby-job-posting-right-pane { background-color: transparent !important; color: rgba(255, 255, 255, 0.85); font-family: var(--fontFamily); } /* Kill any background colour on child containers — Ashby ships a pale card wrapper around tab panels that fights the dark page. */ .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: transparent !important; } /* Collapse any Ashby `_section_*` horizontal rules to our faint hairline */ [class*="_section_"] { border-bottom-color: rgba(255, 255, 255, 0.05) !important; } .ashby-job-board-back-to-all-jobs-button { background: rgba(255, 255, 255, 0.06); border-radius: 9999px; color: rgba(255, 255, 255, 0.8); font-family: var(--fontFamily); font-weight: 500; transition: background-color 200ms var(--ease), color 200ms var(--ease); } .ashby-job-board-back-to-all-jobs-button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .ashby-job-posting-right-pane-tab-slider { background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9999px; } /* Inline links inside the right pane (job description body copy) — no text-decoration, 1px border-bottom that animates opacity on hover. Mirrors the "Dolly" link treatment in /careers perks. p/li scoping keeps this off the "Apply for this Job" button anchor, which is empty-bodied. */ .ashby-job-posting-right-pane p a, .ashby-job-posting-right-pane li a { border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important; color: inherit !important; text-decoration: none !important; transition: border-color 300ms var(--ease) !important; } .ashby-job-posting-right-pane p a:hover, .ashby-job-posting-right-pane li a:hover { border-bottom-color: rgba(255, 255, 255, 0.9) !important; color: #ffffff !important; } /* -------- Primary buttons — white pill with black text -------- Targets: "Apply for this Job" on posting detail, any Ashby `_primary_*` button, and the application submit button. Ashby's hashed class names change between builds, so we use attribute selectors. */ button[class*="_primary_"], a[class*="_primary_"], .ashby-application-form-submit-button { background-color: #ffffff !important; border: none !important; border-radius: 9999px !important; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2) !important; color: #000000 !important; font-family: var(--fontFamily) !important; font-weight: 500 !important; letter-spacing: -0.02em !important; padding: 12px 24px !important; transition: background-color 300ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease) !important; will-change: transform; } button[class*="_primary_"]:hover, a[class*="_primary_"]:hover, .ashby-application-form-submit-button:hover { background-color: rgba(255, 255, 255, 0.92) !important; box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.25) !important; color: #000 !important; transform: scale(1.02); } /* -------- Application form -------- */ .ashby-application-form-container { background-color: #000 !important; color: rgba(255, 255, 255, 0.9); font-family: var(--fontFamily); } .ashby-application-form-question-title { font-family: var(--fontFamily); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; } .ashby-application-form-question-description, .ashby-application-form-section-header-description { color: rgba(255, 255, 255, 0.55) !important; font-family: var(--fontFamily); font-size: 13px; font-weight: 500; } /* Inputs, textareas, selects */ .ashby-application-form-container input, .ashby-application-form-container textarea, .ashby-application-form-container select { background-color: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: var(--borderRadiusControl) !important; color: #fff !important; font-family: var(--fontFamily) !important; font-weight: 500 !important; letter-spacing: -0.01em; transition: background-color 200ms var(--ease), border-color 200ms var(--ease); } .ashby-application-form-container input:focus, .ashby-application-form-container textarea:focus, .ashby-application-form-container select:focus { background-color: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.35) !important; outline: none !important; } .ashby-application-form-container input::placeholder, .ashby-application-form-container textarea::placeholder { color: rgba(255, 255, 255, 0.3) !important; } /* Autofill (resume drop) zone — white-pill upload button inside stays dark */ .ashby-application-form-autofill-input-root { background-color: rgba(255, 255, 255, 0.03) !important; border: 1px dashed rgba(255, 255, 255, 0.18) !important; border-radius: var(--borderRadiusContainer) !important; color: rgba(255, 255, 255, 0.8); } .ashby-application-form-autofill-input-title { font-family: var(--fontFamily); font-weight: 500; } .ashby-application-form-autofill-input-description { color: rgba(255, 255, 255, 0.55) !important; } /* Post-submit states */ .ashby-application-form-success-container, .ashby-application-form-failure-container, .ashby-application-form-blocked-application-container { background-color: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: var(--borderRadiusContainer) !important; color: rgba(255, 255, 255, 0.9); font-family: var(--fontFamily); padding: 24px; }