/* Tensorix theme for the HireHive embed widget.
*
* Upload this file in HireHive admin under the custom CSS / theme option.
* It is served inside the iframe at tensorix.hirehive.com, which is why the
* site's CSS variables (oklch tokens) cannot be referenced and colors are
* hardcoded here. Values mirror the light-mode tokens in
* client/src/index.css.
*
* Selectors target two HireHive markup systems:
* - `hh-*` classes used by the public board page at tensorix.hirehive.com/
* - legacy `.job-*` / `.group-*` classes used by the iframe at
* tensorix.hirehive.com/embed (what the careers widget loads)
* Both must be themed because the same custom CSS is served to both.
* Audited against /, /embed, and a detail page on 2026-05-09.
*
* Color palette (kept in sync with client/src/index.css):
* foreground / primary #1a1a1a oklch(0.15 0 0)
* muted-foreground #757575 oklch(0.5 0 0)
* border #d4d4d4 oklch(0.85 0 0)
* secondary / muted #f5f5f5 oklch(0.97 0 0)
* background / card #ffffff oklch(1 0 0)
* primary-foreground #ffffff
* focus ring (subtle) rgba(26, 26, 26, 0.15)
*
* Note on typography: the site font (Aeonik Fono) cannot be loaded inside
* this iframe because HireHive's CSP only allows fonts from `'self'`,
* `storage.hirehive.com`, `zartis.blob.core.windows.net`, and
* `fonts.gstatic.com`. The system stack below is the safe default. To use
* a Google Font, uncomment the `@import` line and the matching font in
* `--tx-font-family`.
*/
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");
:root {
--tx-font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--tx-text: #1a1a1a;
--tx-text-muted: #757575;
--tx-border: #d4d4d4;
--tx-bg: #ffffff;
--tx-bg-muted: #f5f5f5;
--tx-primary: #1a1a1a;
--tx-primary-foreground: #ffffff;
--tx-focus-ring: rgba(26, 26, 26, 0.15);
--tx-radius: 0.5rem;
}
/* HireHive's body carries the Tailwind utility `font-sans`, which has
specificity (0,0,1,0) and beats a plain `body` selector. Match that
specificity by targeting `.font-sans` directly so our font wins via
cascade order (this stylesheet loads after the widget's own CSS). */
body,
body.font-sans,
.font-sans,
.hh-header,
.hh-footer {
font-family: var(--tx-font-family);
color: var(--tx-text);
background-color: var(--tx-bg);
}
/* HireHive uses `a:link/a:visited` (specificity 0,0,1,0) to set their brand
teal on every anchor. A plain `a` selector loses to that. Match the
pseudo-class specificity here so links inherit the page text color.
Exclude buttons-as-anchors (e.g. "Apply with LinkedIn", which carries
`.button` plus Tailwind `text-white`) so their explicit colors are kept. */
a:not(.button, .btn-color, .submit-button),
a:link:not(.button, .btn-color, .submit-button),
a:visited:not(.button, .btn-color, .submit-button) {
color: var(--tx-text);
}
a:hover:not(.button, .btn-color, .submit-button) {
color: var(--tx-text);
opacity: 0.85;
}
/* === Listing page === */
/* Outer wrapper: white surface, no heavy top border. Covers both the
modern `.hh-job-listings` and the legacy `.job-listing` container. */
.hh-job-listings,
.job-listing {
background-color: var(--tx-bg);
border-top: 0;
}
/* Vertical stack of rows. Modern uses `.hh-jobs-openings`. */
.hh-jobs-openings {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* Grouping (only when widget is configured with grouping=category):
`.job-group` wraps each category, `.group-title` is the heading. */
.job-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2rem;
}
.group-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--tx-text);
margin: 2rem 0 1rem;
}
.group-title:first-of-type {
margin-top: 0;
}
/* Each row card. Modern markup uses an ``; legacy
uses a `` containing an ``. */
.hh-job-row,
.job-opening {
background-color: var(--tx-bg);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius);
padding: 1.25rem 1.5rem;
margin-top: 0;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.hh-job-row:hover,
.job-opening:hover {
border-color: var(--tx-text);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
}
/* Card title. Modern: `.hh-job-row-title` (an ). Legacy: `.job-link`
(the anchor itself). Strip the legacy underline arrow via ::after. */
.hh-job-row-title,
.job-link {
color: var(--tx-text);
font-weight: 600;
font-size: 1.0625rem;
line-height: 1.5;
margin: 0;
}
.job-link::after {
display: none;
}
/* Card meta line. Modern uses `.hh-job-row-location/.hh-job-row-experience`.
Legacy uses `.job-location` (which contains `.job-street`, `.job-country`,
`.separator`) plus optional `.job-experience` and `.job-type`. */
.hh-job-row-location,
.hh-job-row-experience,
.job-location,
.job-opening .job-experience,
.job-opening .job-type {
color: var(--tx-text-muted);
font-size: 0.875rem;
margin-top: 0.375rem;
}
/* === Job detail page === */
.hh-back-link,
.back-link {
color: var(--tx-text-muted);
font-size: 0.875rem;
}
.hh-back-link:hover,
.back-link:hover {
color: var(--tx-text);
}
.hh-job-title,
.job-title {
color: var(--tx-text);
font-weight: 700;
font-size: 2rem;
line-height: 1.2;
margin: 0 0 1rem;
}
/* Detail page meta block. Modern wraps items in `.hh-job-information`;
legacy uses `.job-information` containing `.job-details` items
(`.job-details-location`, `.job-details-street`, `.job-details-country`)
plus standalone `.job-experience` and `.job-type`. Render as pill badges. */
.hh-job-information,
.job-information {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.hh-job-information .hh-job-location,
.hh-job-information .hh-job-type,
.hh-job-information .hh-job-experience,
.job-information .job-details,
.job-information .job-details-container,
.job-information > .job-experience,
.job-information > .job-type {
display: inline-flex;
align-items: center;
background: var(--tx-bg-muted);
color: var(--tx-text);
border: 1px solid var(--tx-border);
border-radius: 9999px;
padding: 0.25rem 0.625rem;
font-size: 0.75rem;
line-height: 1.25rem;
}
.hh-job-information svg,
.job-information svg {
stroke: var(--tx-text-muted);
}
.hh-job-description {
color: var(--tx-text);
line-height: 1.7;
}
.hh-job-description h1,
.hh-job-description h2,
.hh-job-description h3,
.hh-job-description h4,
.hh-job-description h5,
.hh-job-description h6 {
color: var(--tx-text);
font-weight: 700;
}
/* === Application form === */
.hh-application-form {
border: none;
}
.hh-application-form input[type="text"],
.hh-application-form input[type="email"],
.hh-application-form input[type="tel"],
.hh-application-form input[type="url"],
.hh-application-form input[type="number"],
.hh-application-form input[type="date"],
.hh-application-form select,
.hh-application-form textarea,
.form-input,
.form-select,
.form-textarea {
background-color: var(--tx-bg);
color: var(--tx-text);
border: 1px solid var(--tx-border);
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
font-family: inherit;
font-size: 0.9375rem;
}
.hh-application-form input:focus,
.hh-application-form select:focus,
.hh-application-form textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--tx-text);
box-shadow: 0 0 0 3px var(--tx-focus-ring);
}
/* Legacy form layout: `.input-row` is a labelled field row, `.input-group`
wraps groups of related fields, `.req-mark` is the asterisk on required
fields. `.application-page` is the outer wrapper. */
.application-page,
.job-application {
color: var(--tx-text);
}
.input-row {
margin-bottom: 1rem;
}
.input-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.req-mark {
color: var(--tx-text-muted);
margin-left: 0.125rem;
}
.submit-panel {
margin-top: 1.5rem;
}
.submit-button {
background-color: var(--tx-primary);
color: var(--tx-primary-foreground);
border: 1px solid var(--tx-primary);
border-radius: 0.375rem;
padding: 0.5rem 1rem;
font-weight: 500;
font-family: inherit;
font-size: 0.9375rem;
cursor: pointer;
transition: opacity 200ms ease;
}
.submit-button:hover {
opacity: 0.9;
}
.submit-button:focus {
outline: none;
box-shadow: 0 0 0 3px var(--tx-focus-ring);
}
/* === Buttons === */
/* `.btn-color` is HireHive's primary "Apply for position" button hook —
pin it to the site primary so it does not inherit the brand teal set
in admin. We deliberately do NOT style the generic `.button` class here:
HireHive applies `.button` to other anchors too (e.g. the LinkedIn apply
link) which carry their own Tailwind colour utilities (`bg-blue-700`,
`text-white`) and should keep their explicit brand styling. */
.btn-color,
button.btn-color {
background-color: var(--tx-primary);
color: var(--tx-primary-foreground);
border: 1px solid var(--tx-primary);
border-radius: 0.375rem;
font-weight: 500;
transition: opacity 200ms ease;
}
.btn-color:hover,
button.btn-color:hover {
opacity: 0.9;
background-color: var(--tx-primary);
color: var(--tx-primary-foreground);
}
.btn-color:focus {
outline: none;
box-shadow: 0 0 0 3px var(--tx-focus-ring);
}
/* HireHive's brand-color hooks. `.user-color` is the legacy hook; `.text-secondary`
is the Tailwind token they use on job titles (e.g. inside .hh-job-row-title).
Both default to the brand teal set in admin — pin them to the page text color
here. The combined-class selector wins by specificity even if HireHive declares
`.text-secondary` after `.user-color` in their own stylesheet. */
.user-color,
.text-secondary,
.user-color.text-secondary {
color: var(--tx-text);
}
.user-color:hover,
.text-secondary:hover,
.user-color.text-secondary:hover {
color: var(--tx-text);
opacity: 0.85;
}