/* Ported for Django. The artboard copy states its narrow rules as @container so each 1440px frame answers to its own width; here the viewport IS the frame, so they are @media. Do not sync that rule in either direction. Converted blocks: 1. */ /* COLOR STUDY — overlay only, additive to recruiting.css. Scoped to `.rec-color`, so the neutral artboards are untouched. Purple is Ambush primary #18122B with a mid-tone #49338D (already --ub-primary in the base sheet); gold stays reserved for the age/stalled scale so the one semantic ramp on these screens keeps its meaning. */ .rec-color { --pp-ink: #18122b; --pp-mid: #49338d; --pp-tint: #f2effa; --pp-tint-2: #e7e1f4; --pp-line: #d9d1ec; --pp-on-dark: rgba(255, 255, 255, 0.72); --pp-on-dark-faint: rgba(255, 255, 255, 0.46); --hs-bg: #f4f2f7; /* Hairlines and hover follow the purple field. --hs-active stays gold: the attention family (paused pills, warnings, vacant seats, confirms) reads off it. */ --hs-line: #e4dff0; --hs-line-strong: #cfc5e6; --hs-hover: #f2effa; --ub-primary: var(--pp-mid); --ub-accent: var(--pp-mid); --ub-accent-hover: #3a2873; --ub-accent-ink: #ffffff; --ub-accent-quiet: color-mix(in srgb, var(--pp-mid) 12%, transparent); } /* -- Section bar ----------------------------------------------------------- */ .rec-color .rec-sectionbar { background: #fff; border-bottom-color: var(--pp-line); } .rec-color .rec-sectionbar__tab:hover { background: var(--pp-tint); color: var(--pp-ink); } .rec-color .rec-sectionbar__tab--on { color: var(--pp-mid); border-bottom-color: var(--pp-mid); background: var(--pp-tint); } .rec-color .rec-sectionbar__n { background: var(--pp-tint-2); color: var(--pp-mid); } .rec-color .rec-sectionbar__tab--on .rec-sectionbar__ink { background: var(--pp-mid); } .rec-color .rec-sectionbar__tab--on:has(> .rec-sectionbar__ink) { border-bottom-color: transparent; } .rec-color .rec-sectionbar__tab--on .rec-sectionbar__n { background: var(--pp-mid); color: #fff; } /* -- Measures: purple cards, first one inverted --------------------------- */ .rec-color .rec-stat { background: #fff; border-color: var(--pp-line); box-shadow: inset 0 2px 0 var(--pp-mid); } .rec-color .rec-stat__label { color: var(--pp-mid); } .rec-color .rec-stat:first-child { background: var(--pp-ink); border-color: var(--pp-ink); box-shadow: inset 0 2px 0 #e0d394; color: #fff; } .rec-color .rec-stat:first-child .rec-stat__label { color: #e0d394; } .rec-color .rec-stat:first-child .rec-stat__sub, .rec-color .rec-stat:first-child .rec-stat__value small { color: var(--pp-on-dark); } /* -- Panels and tables ---------------------------------------------------- */ .rec-color .rec-panel { border-color: var(--pp-line); } .rec-color .rec-panel__head { background: var(--pp-tint-2); border-bottom-color: #cfc5e6; } /* The title is not a shrinkable flex item: a long hint on the same row was compressing it below its max-content and wrapping it mid-phrase. */ .rec-color .rec-panel__title { color: var(--pp-ink); flex: none; white-space: nowrap; } .rec-color .rec-panel__hint { min-width: 0; } /* This sheet is what creates the contrast problem, so it carries the fix: on the --pp-tint-2 head, --hs-ink-faint measures 4.18:1 and fails AA for normal text. Scoped to the head because the same class on white is 5.33:1 and correct. */ .rec-color .rec-panel__head .rec-dur__key { color: var(--hs-ink-soft); } .rec-color .rec-panel__foot { background: var(--pp-tint); border-top-color: var(--pp-line); } .rec-color .rec-table thead th { background: #faf8fd; border-bottom-color: var(--pp-line); color: var(--pp-mid); } .rec-color .rec-table tbody td { border-bottom-color: #efecf7; } /* The same warm row-rule, in the three other places recruiting.css writes it as a literal rather than a token. A literal cannot be reached by re-pointing --hs-line, so each needs naming here or CONTRACT §8's check F fails on any screen that renders one. It did, on 01, until 2026-09-03. */ .rec-color .rec-list > li { border-bottom-color: #efecf7; } .rec-color .rec-card__foot { border-top-color: #efecf7; } @media (max-width: 1024px) { .rec-color .rec-table--stack tbody tr { border-bottom-color: #efecf7; } } .rec-color .rec-table tbody tr:hover { background: #f8f6fd; } .rec-color .rec-table tbody tr.rec-row--selected { background: var(--pp-tint); } .rec-color .rec-table__sort--on { color: var(--pp-mid); } .rec-color .rec-who__name { color: var(--pp-mid); } .rec-color .rec-textbtn { color: var(--pp-mid); text-decoration: none; border-color: var(--pp-line); } .rec-color .rec-textbtn:hover { background: var(--pp-tint); border-color: var(--pp-mid); color: var(--pp-mid); } /* The palette owns this button's colour, so it has to own the disabled one too: a `:disabled` rule in the base sheet ties on specificity with the rule above and loses on sheet order, which left 33c's Merge and Retire looking live. `background` is here because the hover rule tints it. */ .rec-color .rec-textbtn:disabled, .rec-color .rec-textbtn:disabled:hover { color: var(--hs-ink-faint); border-color: var(--pp-line); background: transparent; } .rec-color .rec-eyebrow { color: var(--pp-mid); } .rec-color .rec-card { border-color: var(--pp-line); } /* Age and stalled stay gold: they are the only semantic ramp on the screen. */ /* -- Shell: stays as it ships today. Color is confined to the recruiting workspace; only the shell accents that already exist in the base sheet shift from gold to purple. ------------------------------------------- */ .rec-color .hs-nav__item--active { background: var(--pp-tint); box-shadow: inset 2px 0 0 var(--pp-mid); } .rec-color .hs-nav__item--active .hs-nav__ic { color: var(--pp-mid); } .rec-color .hs-search:hover { border-color: var(--pp-mid); } .rec-color .hs-user__avatar { background: linear-gradient(150deg, #6b52b8, var(--pp-mid)); } /* Links never fall back to the browser default. Anchors that are buttons keep their own ink — otherwise a primary anchor renders purple on purple. */ .rec-color a:not(.button) { color: var(--pp-mid); } .rec-color a:not(.button):hover { color: var(--pp-ink); } .rec-color a.button { color: var(--hs-ink); } .rec-color a.button--primary { color: var(--ub-accent-ink); } .rec-color .rec-eyebrow a { color: var(--pp-mid); text-decoration: none; border-bottom: 1px solid var(--pp-line); } .rec-color .rec-eyebrow a:hover { border-bottom-color: var(--pp-mid); } /* -- Decorative gold moves to purple; attention gold stays --------------- Kept gold on purpose: the age ramp (.rec-days), the stalled tick, vacant seats, paused pills, read-only notes and .rec-warn — everything that means "this is waiting on someone". Everything below was gold only as decoration. */ .rec-color .home-shell :focus-visible, .rec-color :focus-visible { outline-color: var(--pp-mid); } .rec-color .rec-applink__job, .rec-color .rec-applink__stage { text-decoration-color: color-mix(in srgb, var(--pp-mid) 30%, transparent); } .rec-color .rec-applink:hover .rec-applink__job, .rec-color .rec-applink:hover .rec-applink__stage { text-decoration-color: var(--pp-mid); } .rec-color .rec-who__name:hover, .rec-color .rec-list__title a:hover { text-decoration-color: var(--pp-mid); } .rec-color .rec-drawer__kind { color: var(--pp-mid); } .rec-color .rec-drawer__name a { border-bottom-color: color-mix(in srgb, var(--pp-mid) 30%, transparent); } .rec-color .rec-drawer__name a:hover { border-bottom-color: var(--pp-mid); } .rec-color .rec-drawer__close:hover, .rec-color .rec-expand > summary:hover { border-color: var(--pp-mid); } .rec-color .rec-quote { border-left-color: var(--pp-mid); background: #faf9fd; } .rec-color .rec-timeline li.rec-timeline__now::before { border-color: var(--pp-mid); background: var(--pp-mid); } .rec-color .rec-rating i.on { background: var(--pp-mid); } .rec-color .rec-spinner { border-top-color: var(--pp-mid); } .rec-color .rec-source--referral .rec-source__dot { background: var(--pp-mid); } /* -- Table row rhythm ------------------------------------------------------ Under auto layout a nowrap job name's min-content width IS the column's floor, so any cap big enough to show the name also pushed the table past its panel. These tables get a resolved basis instead: fixed layout, widths declared on the header row (fixed layout reads row one), the name filling its column, and prose cells free to wrap onto a second line. No cell can force overflow, so nothing scrolls and the name uses every pixel it has. */ .rec-color .rec-table:has(.rec-applink) { table-layout: fixed; } .rec-color .rec-table--ledger { table-layout: fixed; } .rec-color .rec-table:has(.rec-applink) thead th.rec-table__c--actions { width: 8.75rem; } .rec-color .rec-table:has(.rec-applink) thead th.rec-table__c--check { width: 2.25rem; } /* Which column carries the job name decides where the share goes: the first cell when the job leads, the second when an identity leads. */ .rec-color .rec-table--joblead thead th:first-child { width: 34%; } .rec-color .rec-table--idlead thead th:first-child { width: 24%; } .rec-color .rec-table--idlead thead th:nth-child(2) { width: 32%; } /* Same table with a leading checkbox column: the two data columns after it. */ .rec-color .rec-table--idlead thead th.rec-table__c--check + th { width: 24%; } .rec-color .rec-table--idlead thead th.rec-table__c--check + th + th { width: 26%; } /* In tables the link is a bounded block-level flex box: as inline-flex it shrink-wrapped, so the job name's width resolved against nothing and clipped no matter how wide the column was. */ .rec-color .rec-table .rec-applink { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.35rem; max-width: 100%; min-width: 0; } .rec-color .rec-applink__job { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* A cell that holds nothing but a chip keeps its one line; a cell that mixes a chip with prose stays wrappable, or the prose overflows the column. */ .rec-color .rec-table td:has(> .rec-pill:only-child), .rec-color .rec-table td:has(> .rec-days:only-child), .rec-color .rec-table td:has(> .rec-dur:only-child), .rec-color .rec-table td:has(> .rec-stalled:only-child), .rec-color .rec-table td:has(> .rec-seat:only-child) { white-space: nowrap; } /* Source stays one line and truncates per part. The container must be a block-level flex box: as inline-flex it sized to its own max-content and spilled out of the column instead of compressing its children. */ .rec-color .rec-table td:has(> .rec-source) .rec-source { display: flex; flex-wrap: wrap; max-width: 100%; min-width: 0; } /* Rather than truncate a referrer's name, drop it to a second line. */ .rec-color .rec-table td:has(> .rec-source) .rec-source__by { flex: 1 0 100%; } .rec-color .rec-table td:has(> .rec-source) .rec-source__label, .rec-color .rec-table td:has(> .rec-source) .rec-source__by { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-color .rec-table td.rec-table__c--actions { padding-left: 0.3rem; } /* -- Candidate identity card, restructured ------------------------------- Was one paragraph of pipe-separated metadata under the name, with the action row wrapping to a second line. Now: a tinted identity band with the name, record number and actions, then the contact facts as labelled fields, then tags on their own line. */ .rec-color .rec-idcard--v2 { display: block; padding: 0; overflow: hidden; } .rec-color .rec-idcard--v2 .rec-idcard__top { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.25rem; background: var(--pp-tint-2); border-bottom: 1px solid #cfc5e6; } .rec-color .rec-idcard--v2 .rec-idcard__avatar { background: #fff; color: var(--pp-mid); border: 1px solid #cfc5e6; } .rec-color .rec-idcard--v2 .rec-idcard__who { min-width: 0; flex: 1; } .rec-color .rec-idcard--v2 .rec-idcard__id { display: block; margin-top: 0.25rem; font-family: var(--ub-font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pp-mid); } .rec-color .rec-idcard--v2 .rec-idcard__acts { margin-left: auto; max-width: none; flex-wrap: nowrap; } .rec-color .rec-idcard--v2 .rec-idcard__fields { display: flex; gap: 0 2rem; padding: 0.9rem 1.25rem 0.2rem; } .rec-color .rec-idcard--v2 .rec-field { flex: 1 1 0; min-width: 0; max-width: 18rem; } .rec-color .rec-field__k { margin: 0 0 0.15rem; font-family: var(--ub-font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pp-mid); } .rec-color .rec-field__v { margin: 0; font-size: 0.875rem; color: var(--hs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-color .rec-field__v a { color: var(--hs-ink); text-decoration: none; border-bottom: 1px solid var(--pp-line); } .rec-color .rec-field__v a:hover { border-bottom-color: var(--pp-mid); } .rec-color .rec-idcard--v2 .rec-idcard__tags { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.25rem 0.9rem; } .rec-color .rec-idcard--v2 .rec-idcard__tags .rec-field__k { margin: 0; flex: none; } .rec-color .rec-idcard--v2 .rec-tags { flex-wrap: wrap; overflow: visible; } .rec-color .rec-idcard--v2 .rec-tag { background: #faf9fd; border-color: var(--pp-line); color: var(--hs-ink-soft); } .rec-color .rec-textbtn--add { border-style: dashed; } /* Closed records keep their read-only surfaces; the accents and the panel head tint still apply so a closed record reads as the same product. */ .rec-color.rec-closed .rec-panel__head { background: #efeaf7; } /* Field row wraps when a screen has more facts than fit one line, and the tags field is allowed to run wider than the rest. */ .rec-color .rec-idcard--v2 .rec-idcard__fields { flex-wrap: wrap; } .rec-color .rec-field--tags { max-width: none; flex: 2 1 14rem; } .rec-color .rec-field--tags .rec-field__v { white-space: normal; } .rec-color .rec-idcard--v2 .rec-idcard__who .rec-idcard__id { margin: 0 0 0.15rem; } .rec-color .rec-idcard--v2 .rec-idcard__name a { color: inherit; text-decoration: none; } .rec-color .rec-idcard--v2 .rec-idcard__name a:hover { color: var(--pp-mid); } /* Board columns are this screen's panels: same warm-neutral surface swapped for the purple field, same darker head as .rec-panel__head. */ .rec-color .rec-board__col { background: #faf9fd; border-color: var(--pp-line); } .rec-color .rec-board__head { background: var(--pp-tint-2); border-bottom-color: #cfc5e6; border-radius: calc(var(--ub-radius) - 1px) calc(var(--ub-radius) - 1px) 0 0; } .rec-color .rec-board__pos { color: var(--pp-mid); } .rec-color .rec-board__n { border-color: var(--pp-line); color: var(--pp-mid); } /* Surfaces hardcoded warm in the base sheet, remapped onto the purple field. #faf9fd is the light one, #f6f5fa the recessed one, both against white. */ .rec-color .rec-pill--readonly, .rec-color .rec-state__code, .rec-color .rec-drawer__url { background: #f6f5fa; border-color: var(--pp-line); } .rec-color .rec-readonly-note, .rec-color .rec-strip, .rec-color .rec-tag, .rec-color .rec-state__mark, .rec-color .rec-filters__applied, .rec-color .rec-clock__cell, .rec-color .rec-drawer__primary, .rec-color .rec-drawer__foot, .rec-color .rec-interview__head { background: #faf9fd; border-color: var(--pp-line); } .rec-color .rec-filters__applied, .rec-color .rec-interview__head { border-color: transparent; border-bottom-color: var(--pp-line); } .rec-color .hs-search { background: #faf9fd; } /* .rec-closed sits on the SAME element as .rec-color — compound, not descendant. */ .rec-color.rec-closed, .rec-color.rec-closed .rec-panel, .rec-color.rec-closed .rec-idcard { background: #faf9fd; } .rec-color.rec-closed .rec-closedbar { background: repeating-linear-gradient(135deg, #f6f5fa 0 8px, #efecf7 8px 16px); border-color: var(--pp-line); } /* Stacked tables revert to auto layout: at narrow widths the rows become a grid, where a fixed column basis has nothing to size. */ @media (max-width: 1100px) { .rec-color .rec-table--stack { table-layout: auto; } /* Stacked rows carry the separator themselves — the cell-border override never reaches it, so it kept the pre-color cream hairline. */ .rec-color .rec-table--stack tbody tr { border-bottom-color: #efecf7; } } /* Loading skeletons: the base rule sets a height and a warm gradient but no display, so on an inline box neither dimension applied and the rows read as blank. Block, a default width, and the purple neutrals. */ .rec-color .rec-skel { display: block; width: 7rem; max-width: 100%; background: linear-gradient(90deg, #efecf7 25%, #e4dff0 50%, #efecf7 75%); background-size: 200% 100%; } .rec-color .rec-skel--avatar { width: 1.55rem; } /* The five-column ledger gives Tags 30% — two tags whole at 1280 — and bounds it so more chips shrink and ellipsise; Candidate takes the rest. CONTRACT §4, 2026-10-01. */ .rec-color .rec-table--ledger thead th:nth-child(1) { width: 2.25rem; } .rec-color .rec-table--ledger thead th:nth-child(2) { width: auto; } .rec-color .rec-table--ledger thead th:nth-child(3) { width: 11.5rem; } .rec-color .rec-table--ledger thead th:nth-child(4) { width: 13rem; } .rec-color .rec-table--ledger thead th:nth-child(5) { width: 30%; } /* Where a row still carries more chips than the column holds, the row fades at the edge instead of slicing a chip mid-glyph — it reads as "more beyond". */ .rec-color .rec-table--ledger .rec-tags { mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 12px), transparent 100%); } /* 10g — drawer colour treatment (option 4c). Append to the END of static/css/recruiting-color.css so these win over the .rec-color .rec-drawer__foot rule by source order (same 0,2,0 specificity). Colours are the Ambush off-white (#FAF9F7) and low-contrast hairline (#E5E1D8). */ .rec-drawer { --rd-band: #faf9f7; --rd-line: #e5e1d8; } /* Band: bar + head + tabs share one off-white ground and never scroll. */ .rec-drawer .rec-drawer__band { flex: none; background: var(--rd-band); border-bottom: 1px solid var(--rd-line); } .rec-drawer .rec-drawer__bar { border-bottom-color: var(--rd-line); } .rec-drawer .rec-drawer__band .button, .rec-drawer .rec-drawer__band .rec-drawer__close { background: #fff; border-color: var(--rd-line); } .rec-drawer .rec-drawer__head { border-bottom: 0; padding-bottom: 0.85rem; } /* Folder tabs: the selected tab is a white folder that opens into the body. */ .rec-drawer .rec-drawer__tabs { gap: 2px; margin: 0; padding: 0 0.75rem; border-bottom: 0; } .rec-drawer .rec-drawer__tabs .rec-jobtabs__tab { padding: 0.5rem 0.9rem; margin-bottom: -1px; font-weight: 400; border: 1px solid transparent; border-bottom: 0; border-radius: 2px 2px 0 0; color: var(--pp-mid, var(--hs-ink-soft)); } .rec-drawer .rec-drawer__tabs .rec-jobtabs__tab:hover { color: var(--hs-ink); } .rec-drawer .rec-drawer__tabs .rec-jobtabs__tab--on { background: #fff; color: var(--hs-ink); font-weight: 600; border-color: var(--rd-line); border-bottom: 1px solid #fff; } /* Section strips: full-bleed off-white rows carrying the existing eyebrow label. */ .rec-drawer .rec-drawer__section { margin: 1.1rem -1rem 0.6rem; padding: 0.45rem 1rem; background: var(--rd-band); color: var(--hs-ink-soft); border-top: 1px solid var(--rd-line); border-bottom: 1px solid var(--rd-line); } /* In-strip link (All N notes): quiet text, not a button. */ .rec-drawer .rec-drawer__section .rec-textbtn { border: 0; background: none; padding: 0; font-family: inherit; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--hs-ink-soft); text-decoration: underline; text-decoration-color: var(--hs-line-strong); text-underline-offset: 2px; } .rec-drawer .rec-drawer__section .rec-textbtn:hover { color: var(--hs-ink); text-decoration-color: currentColor; } /* Candidate tab pools. */ .rec-drawer .rec-drawer__pooladd { margin-top: 0.6rem; } .rec-drawer .rec-drawer__poolform { display: flex; gap: 0.4rem; margin-top: 0.45rem; } .rec-drawer .rec-drawer__poolform .rec-select { flex: 1; min-width: 0; } .rec-drawer .rec-drawer__poolform .button { height: 2.1rem; padding-block: 0; } /* Foot: Move only; rarer outcomes behind one disclosure. Move matches the stage select's 2.1rem height. */ .rec-drawer .rec-drawer__advance .button { height: 2.1rem; padding-block: 0; } .rec-drawer .rec-drawer__otherbody { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.55rem; } /* Foot matches the band so both ends of the drawer share one ground. */ .rec-drawer .rec-drawer__foot { background: var(--rd-band); border-top-color: var(--rd-line); } /* EXTENDED 2026-09-23 at the requester's direction, "the idea, colors and shade should be the exact same" on every other panel: screen 10, 10e, Add candidate, Write to, Refer and the tag drawer. They have no band wrapper, so the band's ground and hairline land on their own bar, head and page-button row, and their direct section titles become the same strips. */ .rec-drawer > .rec-drawer__bar, .rec-drawer > .rec-drawer__head, .rec-drawer > .rec-drawer__primary { background: var(--rd-band); } .rec-drawer > .rec-drawer__bar .button, .rec-drawer > .rec-drawer__bar .rec-drawer__close, .rec-drawer > .rec-drawer__primary .button { background: #fff; border-color: var(--rd-line); } .rec-drawer > .rec-drawer__head { border-bottom: 1px solid var(--rd-line); } .rec-drawer > .rec-drawer__head:has(+ .rec-drawer__primary) { border-bottom: 0; } .rec-drawer > .rec-drawer__primary { border-bottom-color: var(--rd-line); } .rec-drawer > .rec-drawer__body > .rec-subhead:not(label) { margin: 1.1rem -1rem 0.6rem; padding: 0.45rem 1rem; background: var(--rd-band); color: var(--hs-ink-soft); border-top: 1px solid var(--rd-line); border-bottom: 1px solid var(--rd-line); } /* CORRECTED 2026-09-24 (V18): a