/* =========================================================================== Vorticity job board theme Upload under Job Board Options > Custom CSS. Small on purpose. Ashby ships its own palette of ~130 custom properties and handles most of the dark treatment once --colorAppBackground is black, so this only sets the ground, the brand colour and the typeface, plus the few places the board genuinely gets wrong on a dark page. Things worth knowing before adding to this file: - Ashby always puts a WHITE label on its primary buttons. That is why the brand colour here is the deeper teal: white on #0e7490 is 5.4:1, white on the bright #22d3ee is 1.8:1. The bright one is used only where it is text on black, which is 11.6:1. - Do not set --borderRadiusControl and --borderRadiusButton to different values. The Yes/No control takes its left corners from the first and its right corners from the second, so a mismatched pair renders as one square button beside one pill. - Ashby's uploader rejects CSS math functions with "font-size: undefined". No clamp(), calc(), min() or max() in here. - Ashby's stylesheet is served cross-origin, so you cannot read its rules from the console to see what it sets. Check computed styles instead. =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); :root { /* Black ground, as on vorticity.xyz. Most of the board follows from this. */ --colorAppBackground: #000000; /* Teal from the Pyrite9 renderings, hue ~190. Ashby writes these two inline on from the Brand Color fields in the admin, and inline beats a stylesheet, hence !important — setting them in the admin does the same. */ --colorPrimary600: #0e7490 !important; --colorPrimary900: #0891b2 !important; --fontFamily: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } html, body { background: #000000; color: #ffffff; font-family: var(--fontFamily); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* The logos uploaded in the admin are the black files, so they vanish here. Upload the white versions and delete this rule; until then, invert. */ a[class*='navLogoLink'] img { filter: invert(1); } /* Display type: Poppins over Inter, as on the site. */ .ashby-job-board-heading, .ashby-job-posting-heading, .ashby-job-posting-brief-title, .ashby-application-form-section-header-title { font-family: 'Poppins', 'Inter', sans-serif; font-weight: 500; letter-spacing: -0.02em; color: #ffffff; } /* --- Beating Ashby's own rules --------------------------------------------- Ashby marks several of its rules !important, and where an uploaded file lands in the cascade is not documented — so source order cannot be relied on. Every rule below that has to win is therefore qualified by element type (select.x, div.x), which raises specificity above Ashby's single hashed class and settles it regardless of order. Verified with this sheet inserted FIRST in , the worst case. --------------------------------------------------------------------------- */ /* --- The job board -------------------------------------------------------- The posting cards and the filter selects are both painted white by Ashby. The card becomes a drawn box: no fill, a hairline, no lift. */ div.ashby-job-posting-brief { background: transparent !important; /* !important on the border too: Ashby sets `border-top: none` on its own card, so without this the box is drawn on three sides and open along the top. The other three edges were never the problem. */ border: 1px solid rgba(255, 255, 255, 0.22) !important; } /* Ashby fills the card with a pale grey on hover, which on a dark card turns the white title white-on-white. Keep it transparent and let the hairline do the work instead. The !important is needed: their hover rule wins otherwise. */ div.ashby-job-posting-brief:hover { background: transparent !important; border-color: rgba(255, 255, 255, 0.55) !important; } .ashby-job-posting-brief :where(*) { color: rgba(255, 255, 255, 0.72); } .ashby-job-posting-brief-title { color: #ffffff; } /* The filters are native