/* ==========================================================================
EpicJobs Design System
Outfit + Inter · Bootstrap 5.3 overrides · design tokens
See doc/modules/12-ui-ux-design-system.md
========================================================================== */
/* --------------------------------------------------------------------------
1. Outfit + Inter — self-hosted
TWO FAMILIES, ONE JOB EACH (doc s.100). Outfit sets every heading and
display figure; Inter sets everything a reader actually reads. They are the
pairing the reference design uses, and the split is the point: Outfit is a
geometric display face with a wide, even colour that looks deliberate at
48px and muddy at 14px, while Inter was drawn for UI text at exactly the
sizes this application spends its life in.
SELF-HOSTED, NOT LINKED. The Content-Security-Policy sets `font-src 'self'`,
so the reference's to fonts.googleapis.com would be blocked outright
and every screen would silently fall back to the system stack. Serving the
files ourselves is also what makes this work on an install with no internet.
ONE FILE PER SCRIPT, NOT ONE PER WEIGHT. Both are variable fonts, so the
whole axis arrives in a single request - Outfit 300-800, Inter 300-700 -
and any weight between the named stops is available for free.
LATIN-EXT IS NOT OPTIONAL HERE. The rupee sign is U+20B9, which lives in
the latin-ext range, and this platform prices everything in rupees. Dropping
that subset to save a request would have replaced every price on the site
with a fallback glyph.
THE FALLBACK METRICS ARE MEASURED, NOT COPIED. Each override below is
derived from the font's own head/hhea tables and a weighted mean advance
over lowercase Latin - not from OS/2.xAvgCharWidth, which in a large family
averages every arrow and box-drawing glyph in the file and comes out ~30%
too wide. A size-adjust built on that number shifts the layout at the swap
instead of holding it still, which is the whole reason the override exists.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Outfit';
src: url('../fonts/outfit/outfit-latin.woff2') format('woff2');
font-weight: 300 800; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Outfit';
src: url('../fonts/outfit/outfit-latin-ext.woff2') format('woff2');
font-weight: 300 800; font-style: normal; font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/inter/inter-latin.woff2') format('woff2');
font-weight: 300 700; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/inter/inter-latin-ext.woff2') format('woff2');
font-weight: 300 700; font-style: normal; font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The metric-matched stand-ins shown during `swap`. */
@font-face {
font-family: 'Outfit Fallback';
src: local('Arial'), local('Helvetica'), local('Liberation Sans');
size-adjust: 98.95%;
ascent-override: 101.06%;
descent-override: 26.28%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Inter Fallback';
src: local('Arial'), local('Helvetica'), local('Liberation Sans');
size-adjust: 107.55%;
ascent-override: 90.07%;
descent-override: 22.43%;
line-gap-override: 0%;
}
/* --------------------------------------------------------------------------
2. Tokens
-------------------------------------------------------------------------- */
/*
THE INDIAN FLAG, WHICH IS ALSO THE LOGO.
Saffron, white and India green, with the chakra's navy - sampled from the
supplied artwork rather than from the flag's official hexes, so the site and
the mark are the same colours: the saffron M (#F98F2E), the green D and
wordmark (#1B790D) and the navy bridge (#081474).
The three hues are NOT interchangeable, and the palette is built around what
each one can actually carry:
- NAVY is the only one that works as text on white (13.6:1). It is also
unusable on the near-black dark theme (1.3:1).
- SAFFRON is the reverse: brilliant on dark (8.4:1) and unusable on light
(2.1:1), where it fails even the 3:1 needed for a border. It is used as
a FILL with dark text over it, never as a thin line or small label on a
pale surface.
- GREEN is the only one that works on both, which is why it carries the
interactive weight - links, primary buttons, focus.
White is the third band, and it is the page: the layout's whitespace is
doing the flag's middle stripe, which is why the surfaces stayed neutral
rather than being tinted.
Dark is the default theme (:root); light is opt-in via [data-theme="light"].
ON THE `br-` PREFIX. It predates the rename and is deliberately kept. It is
an internal namespace, invisible to users, spanning ~3,100 usages across the
stylesheet, forty templates and the JavaScript. Renaming it would risk
silently unstyling an element for every occurrence missed, and no test in
this project asserts that a given element carries a given class. The cost is
real and the benefit is nil, so it stays — read it as "brand", not as the
old product name.
*/
:root {
/* --- Brand ------------------------------------------------------------ */
/* Green carries the interactive weight because it is the only one of the
three legible on both themes. #1B790D is the logo's own green; the accent
is a step lighter so it clears 3:1 on the near-black background, which the
solid brand hue only barely does (3.55:1). */
--br-primary: #2E9E1E;
--br-primary-dark: #1B790D; /* the logo green - hover, and light-theme links */
--br-primary-light: rgba(46,158,30,.16);
--br-primary-glow: rgba(46,158,30,.25);
/* The flag, by name, for anything that has to match the mark exactly. */
--br-brand-saffron: #F98F2E; /* the M */
--br-brand-green: #1B790D; /* the D, and the wordmark */
--br-brand-navy: #081474; /* the bridge, and the chakra */
--br-brand-white: #FFFFFF; /* the middle band - which is the page itself */
/* Persona gradients. Candidates read warm (fuchsia -> pink), recruiters
cool (cyan -> teal), so the two sides of the marketplace are instantly
distinguishable.
TWO SETS, deliberately. The bright reference hues are ACCENTS - links,
borders, icons, glows - which only need 3:1. Solid buttons carry white
labels and need 4.5:1, which the bright hues miss (white on #F98F2E is
2.3:1). The -btn gradients are one step darker and clear 4.5:1 at both
ends. Verified by tools/check-contrast.php. */
/* The primary gradient IS the flag, and the logo: it runs from the M's
saffron to the D's green, in the same direction the bridge spans them.
DECORATIVE ONLY. It is a fill behind icons, rules and borders - never
behind a label, because white on the saffron end is 2.33:1. Anything
carrying text uses --br-gradient-btn. */
--br-gradient: linear-gradient(135deg, #F98F2E 0%, #2E9E1E 100%);
/* A SECOND GRADIENT, FOR TEXT, and it is not the same one.
--br-gradient is a FILL: it sits behind white labels and its job is to
look like the mark. Clipped to letterforms it becomes ink, and ink has to
clear contrast at BOTH ends of the ramp against the page behind it. On
this near-black ground the bright pair does that - saffron 8.4:1, green
3.55:1, and the text it is used on is display-sized, where 3:1 is the bar.
The light theme cannot use the same two hues and overrides this below. */
--br-gradient-text: linear-gradient(135deg, #F98F2E 0%, #2E9E1E 100%);
--br-gradient-candidate: linear-gradient(135deg, #F98F2E 0%, #E2681A 100%);
--br-gradient-recruiter: linear-gradient(135deg, #2E9E1E 0%, #1B790D 100%);
/* Solid buttons carry white labels, and WHITE ON SAFFRON IS 2.3:1 - so the
candidate button is a deepened saffron rather than the brand hue, and the
primary button runs green into the bridge's navy. Both ends of all three
clear 4.5:1, verified by tools/check-contrast.php. */
--br-gradient-btn: linear-gradient(135deg, #14670A 0%, #0B1A8A 100%);
--br-gradient-btn-candidate: linear-gradient(135deg, #9A5200 0%, #8A4A00 100%);
--br-gradient-btn-recruiter: linear-gradient(135deg, #176B0B 0%, #14670A 100%);
/* Candidates read saffron, recruiters green - the flag's own two bands, so
the two sides of the marketplace stay instantly distinguishable. Admin is
the bridge: navy. */
--br-candidate: #F98F2E; --br-candidate-dark: #9A5200;
--br-recruiter: #2E9E1E; --br-recruiter-dark: #14670A;
--br-admin: #7A8CC4; --br-admin-dark: #0B1A8A;
/* Solid button fills - white label safe */
--br-success-btn: #047857;
--br-danger-btn: #DC2626;
/* --- Semantic --------------------------------------------------------- */
--br-success: #10B981; --br-success-bg: rgba(16,185,129,.15);
--br-warning: #F59E0B; --br-warning-bg: rgba(245,158,11,.15);
--br-danger: #EF4444; --br-danger-bg: rgba(239,68,68,.15);
--br-info: #3B82F6; --br-info-bg: rgba(59,130,246,.15);
/* --- Neutrals (dark) -------------------------------------------------- */
--br-ink: #F8FAFC; --br-ink-2: #CBD5E1;
--br-ink-3: #94A3B8; --br-ink-4: #64748B;
--br-line: rgba(255,255,255,.08);
--br-line-2: rgba(255,255,255,.05);
--br-bg: #080B11;
--br-bg-2: #0F1626;
--br-surface: rgba(22,30,49,.6);
--br-surface-2: rgba(30,41,67,.45);
--br-surface-hover: rgba(30,41,67,.75);
--br-blur: 12px;
/* --- Auction semantics — meaning, never decoration -------------------- */
--br-bid-high: #10B981;
--br-bid-out: #EF4444;
--br-reserve: #94A3B8;
--br-locked: #F59E0B;
--br-gold: #FBBF24;
/* --- Elevation -------------------------------------------------------- */
--br-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
--br-shadow: 0 4px 16px rgba(0,0,0,.35);
--br-shadow-lg: 0 12px 40px rgba(0,0,0,.45);
--br-shadow-focus: 0 0 0 3px var(--br-primary-glow);
/* --- Geometry --------------------------------------------------------- */
--br-radius-sm: 8px; --br-radius: 12px;
--br-radius-lg: 16px; --br-radius-xl: 20px; --br-radius-pill: 9999px;
/* --- Motion ----------------------------------------------------------- */
--br-ease: cubic-bezier(.4,0,.2,1);
--br-ease-spring: cubic-bezier(.34,1.56,.64,1);
--br-t-fast: 150ms; --br-t: 250ms; --br-t-slow: 400ms;
/* --- Type scale — fluid, 1.200 minor third on a 16px base ------------
FLUID, NOT STEPPED. Each heading interpolates between a phone size and a
desktop size with clamp(), so there is no breakpoint at which the page
jumps - the scale is continuous across every width between them.
A MINOR THIRD (1.200) through the heading levels, with --fs-display
sitting deliberately outside the ratio. The reference sets its hero at
text-3xl / text-5xl / text-6xl - 30px, 48px, 60px at three hard
breakpoints - and 60px is the size the design is actually drawn around,
so the display token now reaches it.
WHAT IS NOT COPIED IS THE STEPPING. Three fixed sizes means the headline
jumps twice as the window is dragged, and worse, a `vw`-free breakpoint
ignores browser zoom, which fails WCAG 1.4.4. The clamp() below lands on
the same 60px ceiling on a desktop and the same ~30px floor on a phone,
and moves continuously in between.
The middle term of each clamp() is in `vw` plus a `rem` floor, so the text
still scales when a reader zooms - a pure `vw` size ignores zoom, which
fails WCAG 1.4.4.
Body stays at exactly 1rem. It is the one size that must honour whatever
the reader set in their browser. */
--fs-display: clamp(1.875rem, 1.05rem + 3.6vw, 3.75rem);
--fs-h1: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
--fs-h2: clamp(1.4rem, 1.2rem + 0.8vw, 1.875rem);
--fs-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
--fs-h4: clamp(1.0625rem, 1.02rem + 0.2vw, 1.25rem);
--fs-body: 1rem;
--fs-sm: .875rem;
--fs-xs: .8125rem;
--fs-micro: .75rem;
/* --- Line height and tracking ----------------------------------------
Long-form text wants ~1.5 for readability; headings want less, because a
display size at 1.5 leaves a hole between the lines. Tracking tightens as
the size grows, which is how both of these faces are designed to be set -
Outfit in particular is drawn tight and looks slack at 0. */
--lh-tight: 1.15;
--lh-heading: 1.25;
--lh-body: 1.55;
--lh-loose: 1.7;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
/* --- Families ---------------------------------------------------------
Two stacks, named by the job rather than by the typeface, so a future
swap is one line and not a search across 2,000 rules. --br-font-display
is applied on the heading elements themselves; body text inherits the
Bootstrap variable. */
--br-font-display: 'Outfit', 'Outfit Fallback', system-ui, -apple-system,
'Segoe UI', Arial, sans-serif;
/* --- Bootstrap bridge ------------------------------------------------- */
--bs-body-font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system,
'Segoe UI', Arial, sans-serif;
--bs-body-color: var(--br-ink);
--bs-body-bg: var(--br-bg);
--bs-primary: var(--br-primary);
--bs-border-color: var(--br-line);
--bs-emphasis-color: var(--br-ink);
--bs-secondary-color: var(--br-ink-3);
}
/* --- Light theme --------------------------------------------------------- */
[data-theme="light"] {
--br-primary-light: rgba(99,102,241,.10);
--br-primary-glow: rgba(99,102,241,.18);
--br-ink: #0F172A; --br-ink-2: #334155;
--br-ink-3: #475569; --br-ink-4: #5B6B82;
--br-line: rgba(15,23,42,.10);
--br-line-2: rgba(15,23,42,.05);
--br-bg: #EEF1F8;
--br-bg-2: #FFFFFF;
/* On white, saffron is 2.1:1 and fails even the 3:1 a large heading needs,
so the light theme clips the DARK pair instead - the same two hues the
solid buttons use, which are already audited at 4.5:1 on this ground. */
--br-gradient-text: linear-gradient(135deg, #14670A 0%, #0B1A8A 100%);
--br-surface: rgba(255,255,255,.72);
--br-surface-2: rgba(255,255,255,.5);
--br-surface-hover: rgba(255,255,255,.92);
--br-success-bg: rgba(16,185,129,.12);
--br-warning-bg: rgba(245,158,11,.12);
--br-danger-bg: rgba(239,68,68,.12);
--br-info-bg: rgba(59,130,246,.12);
--br-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
--br-shadow: 0 4px 16px rgba(15,23,42,.08);
--br-shadow-lg: 0 12px 40px rgba(15,23,42,.12);
--br-gold: #D97706;
}
/*
Light-theme accents.
The bright hues are tuned for a dark backdrop; as link text on #EEF1F8 the
brand saffron drops to 2.06:1, which is not legible at any size. Each
persona gets a darker accent here so link and icon text stays at 4.5:1.
These selectors are more specific than the persona blocks below, so they win.
THE CANDIDATE ACCENT IS THE ONE THAT MOVES MOST. Saffron cannot be text on
a pale background at all, so on the light theme it deepens to #9A5200 -
still recognisably the same warm hue beside the saffron fills, but 5.19:1
instead of 2.06:1.
*/
[data-theme="light"] { --br-primary: #14670A; }
[data-theme="light"] body[data-persona="recruiter"] { --br-primary: #14670A; }
[data-theme="light"] body[data-persona="candidate"] { --br-primary: #9A5200; }
[data-theme="light"] body[data-persona="admin"] { --br-primary: #0B1A8A; }
/* Persona theming: one attribute on re-points the accent and gradient */
body[data-persona="candidate"] {
--br-accent: var(--br-candidate);
--br-accent-gradient: var(--br-gradient-candidate);
}
body[data-persona="recruiter"] {
--br-primary: var(--br-recruiter);
--br-primary-dark: var(--br-recruiter-dark);
--br-primary-light: rgba(46,158,30,.16);
--br-primary-glow: rgba(46,158,30,.25);
--br-gradient: var(--br-gradient-recruiter);
--br-gradient-btn: var(--br-gradient-btn-recruiter);
--br-accent: var(--br-recruiter);
--br-accent-gradient: var(--br-gradient-recruiter);
}
/* Admin reads as the bridge itself: the chakra's navy, lifted. */
body[data-persona="admin"] {
--br-primary: var(--br-admin);
--br-primary-dark: var(--br-admin-dark);
--br-primary-light: rgba(122,140,196,.16);
--br-primary-glow: rgba(122,140,196,.25);
--br-gradient: linear-gradient(135deg, #081474 0%, #3B4FC4 100%);
--br-gradient-btn: linear-gradient(135deg, #081474 0%, #0B1A8A 100%);
--br-accent: var(--br-admin);
--br-accent-gradient: linear-gradient(135deg, #081474 0%, #3B4FC4 100%);
}
/* --------------------------------------------------------------------------
3. Base
-------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { background: var(--br-bg); }
body {
font-family: var(--bs-body-font-family);
font-size: var(--fs-body); /* 16px — never smaller; <16px zooms on iOS */
line-height: var(--lh-body);
letter-spacing: var(--tracking-normal);
/*
* Inter ships proper typographic figures; ask for them.
*
* `tnum` fixes digit width, which matters on a platform where salaries,
* countdowns and proposal bands sit in columns - proportional digits make
* a column of money jitter as the numbers change.
*/
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: 'kern' 1;
color: var(--br-ink);
background: var(--br-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
transition: background-color var(--br-t) var(--br-ease), color var(--br-t) var(--br-ease);
}
/*
Ambient aurora. Fixed and behind everything, so the glass surfaces have
something to refract. Pointer-events none — it is purely decorative.
*/
body::before {
content: '';
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(60rem 40rem at 12% -10%, rgba(99,102,241,.18), transparent 60%),
radial-gradient(50rem 35rem at 100% 0%, rgba(139,92,246,.14), transparent 55%),
radial-gradient(45rem 35rem at 50% 110%, rgba(20,184,166,.10), transparent 60%);
}
[data-theme="light"] body::before {
background:
radial-gradient(60rem 40rem at 12% -10%, rgba(99,102,241,.14), transparent 60%),
radial-gradient(50rem 35rem at 100% 0%, rgba(139,92,246,.10), transparent 55%),
radial-gradient(45rem 35rem at 50% 110%, rgba(20,184,166,.08), transparent 60%);
}
/*
Headings.
TRACKING TIGHTENS AS THE SIZE GROWS. Letterforms set large look loose at the
spacing that suits body copy, and Outfit is drawn on that assumption - the
larger sizes want negative tracking, the small ones want none.
Weight 500 rather than 600 for the lower levels: a variable font gives every
weight on the axis, so the hierarchy no longer has to be carried by the four
static cuts that happened to be downloaded.
`text-wrap: balance` evens out the last line of a heading that wraps. It is
ignored where unsupported, which is the correct fallback.
*/
h1,h2,h3,h4,h5,h6 {
font-family: var(--br-font-display);
font-weight: 600;
line-height: var(--lh-heading);
color: var(--br-ink);
margin: 0 0 .5rem;
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.01em; }
h4 { font-size: var(--fs-h4); font-weight: 500; }
h5, h6 { font-size: var(--fs-body); font-weight: 500; }
/*
Measure.
Long-form prose is capped so a line does not run the width of a desktop
monitor - past roughly 75 characters the eye loses the start of the next
line. Applied to the legal and coaching copy that actually runs long, never
to layout containers.
*/
.br-prose p, .br-legal-body p { max-width: 72ch; line-height: var(--lh-loose); }
/* Currency and countdowns: fixed-width digits so values don't jitter */
.br-num, .br-money, .br-countdown, td.br-num {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
}
a { color: var(--br-primary); text-decoration: none; transition: color var(--br-t-fast) var(--br-ease); }
a:hover { color: var(--br-primary-dark); text-decoration: underline; }
.br-muted { color: var(--br-ink-3); }
.br-tiny { font-size: var(--fs-xs); }
.br-label {
font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; color: var(--br-ink-3);
}
/* Skip link — keyboard users land here first */
.br-skip {
position: absolute; left: -9999px; top: 0; z-index: 2000;
padding: .75rem 1.25rem; background: var(--br-primary); color: #fff;
border-radius: 0 0 var(--br-radius) 0;
}
.br-skip:focus { left: 0; color: #fff; }
/* --------------------------------------------------------------------------
4. Layout
-------------------------------------------------------------------------- */
.br-shell { min-height: 100vh; display: flex; flex-direction: column; }
.br-main { flex: 1; padding: 1.5rem 0 4rem; }
/* Frosted glass, so the aurora shows through as the page scrolls under it. */
.br-navbar {
background: var(--br-surface);
backdrop-filter: blur(var(--br-blur));
-webkit-backdrop-filter: blur(var(--br-blur));
border-bottom: 1px solid var(--br-line);
position: sticky; top: 0; z-index: 1030;
}
.br-brand {
font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em;
color: var(--br-ink); display: inline-flex; align-items: center; gap: .5rem;
}
.br-brand:hover { color: var(--br-primary); text-decoration: none; }
.br-brand-mark {
width: 32px; height: 32px; border-radius: 10px;
/* -btn, not the decorative gradient: this tile carries a white letter and
white on the brand saffron is 2.33:1. */
background: var(--br-gradient-btn);
color: #fff; display: grid; place-items: center; font-size: 1rem; font-weight: 700;
}
/* --- Logo --------------------------------------------------------------- */
/* THE FULL LOCKUP, STACKED (doc s.126): mark, wordmark, strapline.
Everything below is sized from one custom property, --br-logo-h, which the
component sets to the MARK's height. The two text rows derive from it, so a
caller asking for a bigger logo gets a proportionally bigger lockup rather
than a bigger icon with the same small words under it. */
.br-logo {
display: inline-flex; flex-direction: column; align-items: center;
gap: calc(var(--br-logo-h, 32px) * .12);
text-decoration: none;
/* THE CARD HOLDS ALL THREE ROWS NOW, where it used to hold only the tile.
The wordmark is the brand green and the strapline the brand navy, and
tools/check-contrast.php records why neither may sit on the dark theme:
navy on the dark surface is 1.4:1. On this white it is 15.4:1. The card
is what makes the artwork's own colours usable in both themes - the same
job the tile did for the bridge at s.90. */
background: #FFFFFF;
border-radius: calc(var(--br-logo-h, 32px) * .22);
padding: calc(var(--br-logo-h, 32px) * .16) calc(var(--br-logo-h, 32px) * .26);
filter: drop-shadow(0 2px 8px var(--br-primary-glow));
transition: transform var(--br-t) var(--br-ease-spring),
filter var(--br-t) var(--br-ease);
}
.br-logo:hover { text-decoration: none; }
.br-logo-mark { display: grid; place-items: center; line-height: 0; }
.br-logo-mark img {
display: block; height: var(--br-logo-h, 32px); width: auto;
}
/* The persona accent colours everything AROUND the logo, never the logo.
favicon.svg and the generated PNGs render outside the page and can read no
custom property, so a mark that changed colour in the navbar could never be
the same mark in the tab (doc s.90). */
/* THE WHOLE CARD LIFTS, not the icon inside it (doc s.126). An icon rotating
within a static white card reads as something coming loose. */
.br-logo:hover {
transform: translateY(-2px) scale(1.02);
filter: drop-shadow(0 6px 18px var(--br-primary-glow));
}
.br-logo:active { transform: translateY(0) scale(1.005); }
.br-logo:focus-visible {
outline: none;
box-shadow: var(--br-shadow-focus);
}
.br-logo-text {
display: flex; flex-direction: column; align-items: center;
line-height: 1.05;
}
.br-logo-name {
font-family: var(--br-font-display);
font-weight: 700; letter-spacing: -.01em;
/* .46 of the mark's height, from the artwork: its wordmark band is 159px
against a 322px mark. Not a fixed rem - the lockup has to scale as one
thing, and a fixed wordmark under a scaled mark comes apart at both
ends. */
font-size: calc(var(--br-logo-h, 32px) * .46);
/* The artwork's own green, not the ink colour. It is on white here, where
it is 5.9:1. */
color: var(--br-brand-green);
}
.br-logo-tagline {
font-weight: 600; letter-spacing: .01em;
color: var(--br-brand-navy);
white-space: nowrap;
/* .145 from the artwork - 45px of 322 - but with a FLOOR. That ratio puts
the strapline at 4px in a navbar, which is the exact failure that made
this a composed lockup instead of a flat image. Below 9px it stops
scaling and the mark carries the shrinking instead. */
font-size: max(9px, calc(var(--br-logo-h, 32px) * .145));
margin-top: calc(var(--br-logo-h, 32px) * .07);
/* The flanking rules are in the artwork. Pseudo-elements rather than
em-dashes, so they stretch with the lockup instead of staying one glyph
wide while everything around them grows. */
display: flex; align-items: center; gap: .5em;
}
.br-logo-tagline::before,
.br-logo-tagline::after {
content: ''; height: 2px; width: 1.4em;
background: var(--br-brand-navy); border-radius: 1px;
}
/* MARK-ONLY, for a caller that passes :show-text="false" and no tagline.
The card's padding is tuned for three rows and reads as a frame around
one. */
.br-logo:not(:has(.br-logo-text)) {
padding: calc(var(--br-logo-h, 32px) * .14);
}
.br-logo-lg { justify-content: center; }
@media (max-width: 575.98px) {
/* THE WORDMARK IS NO LONGER HIDDEN HERE (doc s.126).
This rule used to hide the text outright under 576px, which was right
when the lockup was a mark with a wordmark beside it and the bar was
running out of width. The lockup is stacked now, so it costs height
rather than width - and hiding the two rows would remove exactly what
this section was asked to add.
It shrinks instead. The mark carries the reduction; the strapline is
already at its 9px floor and stays legible. */
.br-logo-nav { --br-logo-h: 30px !important; }
}
@media (max-width: 400px) {
/* THE FLANKING RULES GO FIRST on a narrow phone. The strapline cannot
shrink below its 9px floor and cannot wrap, so something has to give, and
these are decoration where the words are the content. Dropping them
reclaims about 34px of a 360px viewport. */
.br-logo-tagline::before,
.br-logo-tagline::after { display: none; }
}
/* --- Nav ---------------------------------------------------------------- */
.br-nav-link {
position: relative;
color: var(--br-ink-2); font-weight: 500; font-size: var(--fs-sm);
padding: .5rem .875rem; border-radius: var(--br-radius-sm);
transition: background var(--br-t-fast) var(--br-ease), color var(--br-t-fast) var(--br-ease);
}
.br-nav-link:hover { background: var(--br-line-2); color: var(--br-ink); text-decoration: none; }
.br-nav-link.active { background: var(--br-primary-light); color: var(--br-primary-dark); font-weight: 600; }
/* Underline grows from the centre on hover - a directional cue, not decoration. */
.br-nav-link::after {
content: ''; position: absolute; left: 50%; bottom: 2px;
width: 0; height: 2px; border-radius: 2px;
background: var(--br-primary);
transform: translateX(-50%);
transition: width var(--br-t) var(--br-ease);
}
.br-nav-link:hover::after { width: 40%; }
.br-nav-link.active::after { width: 55%; }
.br-page-head { margin-bottom: 1.5rem; }
.br-page-head h1 { margin-bottom: .25rem; }
/* --------------------------------------------------------------------------
5. Cards
-------------------------------------------------------------------------- */
.br-card {
background: var(--br-surface);
backdrop-filter: blur(var(--br-blur));
-webkit-backdrop-filter: blur(var(--br-blur));
border: 1px solid var(--br-line);
border-radius: var(--br-radius-lg);
box-shadow: var(--br-shadow-sm);
transition: box-shadow var(--br-t) var(--br-ease),
transform var(--br-t) var(--br-ease),
border-color var(--br-t) var(--br-ease),
background-color var(--br-t) var(--br-ease);
}
.br-card:hover { border-color: rgba(46,158,30,.22); }
.br-card-body { padding: 1.25rem; }
.br-card-head {
padding: 1rem 1.25rem; border-bottom: 1px solid var(--br-line);
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.br-card-head h2, .br-card-head h3 { margin: 0; font-size: var(--fs-h4); }
.br-card-interactive { cursor: pointer; }
.br-card-interactive:hover { transform: translateY(-2px); box-shadow: var(--br-shadow); }
/* The winning bid earns visual primacy */
.br-card-winning {
border-left: 4px solid var(--br-gold);
box-shadow: 0 0 0 1px rgba(212,160,23,.15), var(--br-shadow);
}
.br-card-locked { border-left: 4px solid var(--br-locked); }
.br-card-danger { border-left: 4px solid var(--br-danger); }
/* A closed campaign is still readable, just visibly past. Opacity alone would
drag the text under the AA contrast floor, so only the chrome recedes. */
.br-card-muted { background: var(--br-surface-2); border-style: dashed; }
/* Someone else's words: a candidate's note to a recruiter, or the reverse.
Set apart so it never reads as platform copy. */
.br-quote {
border-left: 3px solid var(--br-line-2);
padding: .5rem 0 .5rem .75rem;
margin: 0;
color: var(--br-ink-2);
font-style: italic;
}
/* --------------------------------------------------------------------------
6. Stat tiles
-------------------------------------------------------------------------- */
/* Flex column so a stretched tile centres its content instead of leaving a
tall empty gap beneath the figure. */
.br-stat {
background: var(--br-surface);
backdrop-filter: blur(var(--br-blur));
-webkit-backdrop-filter: blur(var(--br-blur));
border: 1px solid var(--br-line);
border-radius: var(--br-radius-lg); padding: 1.125rem 1.25rem;
height: 100%;
display: flex; flex-direction: column; justify-content: center;
transition: border-color var(--br-t) var(--br-ease);
}
.br-stat-label {
font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; color: var(--br-ink-3); margin-bottom: .375rem;
}
.br-stat-value {
font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--br-ink); font-variant-numeric: tabular-nums;
}
/* A bid is a range, so this tile carries two figures and a dash where the
others carry one. Sized down and allowed to wrap rather than overflowing the
tile — clamp() keeps it readable on a phone and generous on a desktop. */
.br-stat-value-range {
font-size: clamp(1.05rem, 1.5vw + .5rem, 1.5rem);
line-height: 1.25;
overflow-wrap: anywhere;
}
.br-stat-meta { font-size: var(--fs-xs); color: var(--br-ink-3); margin-top: .25rem; }
.br-stat-meta a { color: var(--br-primary); text-decoration: none; }
.br-stat-meta a:hover { text-decoration: underline; }
.br-stat-accent .br-stat-value { color: var(--br-primary); }
/* A stat that links to the records behind it. The whole tile is the target,
so the hit area matches what the eye reads as one object. */
a.br-stat-link { text-decoration: none; color: inherit; }
a.br-stat-link:hover { text-decoration: none; color: inherit; }
a.br-stat-link .br-stat-meta { color: var(--br-primary); }
a.br-stat-link:hover { border-color: var(--br-primary-glow); }
a.br-stat-link:focus-visible { outline: none; box-shadow: var(--br-shadow-focus); }
@media (hover: hover) and (pointer: fine) {
a.br-stat-link:hover { transform: translateY(-2px); box-shadow: var(--br-shadow); }
}
/* --------------------------------------------------------------------------
7. Buttons
-------------------------------------------------------------------------- */
.br-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
padding: .625rem 1.125rem; min-height: 42px;
border-radius: var(--br-radius); border: 1px solid transparent;
cursor: pointer; text-decoration: none; white-space: nowrap;
transition: transform var(--br-t-fast) var(--br-ease),
box-shadow var(--br-t-fast) var(--br-ease),
background-color var(--br-t-fast) var(--br-ease);
}
.br-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--br-shadow); }
.br-btn:active { transform: translateY(0); box-shadow: var(--br-shadow-sm); }
.br-btn:focus-visible { outline: none; box-shadow: var(--br-shadow-focus); }
.br-btn:disabled, .br-btn.disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
/* Gradient primary, matching the reference. The gradient re-points per
persona, so a recruiter CTA is cyan-teal with no extra class. */
/* Uses the -btn gradient, not the accent gradient: white labels need 4.5:1. */
.br-btn-primary {
background: var(--br-gradient-btn); color: #fff;
box-shadow: 0 4px 14px var(--br-primary-glow);
}
.br-btn-primary:hover { color: #fff; box-shadow: 0 8px 24px var(--br-primary-glow); }
/* Explicit recruiter CTA, for use on candidate-themed pages that link to a
recruiter action. */
.br-btn-recruiter {
background: var(--br-gradient-btn-recruiter); color: #fff;
box-shadow: 0 4px 14px rgba(6,182,212,.25);
}
.br-btn-recruiter:hover { color: #fff; box-shadow: 0 8px 24px rgba(6,182,212,.32); }
.br-btn-secondary {
background: var(--br-surface);
backdrop-filter: blur(var(--br-blur));
-webkit-backdrop-filter: blur(var(--br-blur));
color: var(--br-ink-2); border-color: var(--br-line);
}
.br-btn-secondary:hover {
background: var(--br-surface-hover); color: var(--br-ink);
border-color: rgba(99,102,241,.3);
}
.br-btn-ghost { background: transparent; color: var(--br-ink-3); }
.br-btn-ghost:hover { background: var(--br-line-2); color: var(--br-ink); box-shadow: none; }
.br-btn-success { background: var(--br-success-btn); color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,.25); }
.br-btn-success:hover { background: #065F46; color: #fff; }
.br-btn-danger { background: var(--br-danger-btn); color: #fff; box-shadow: 0 4px 14px rgba(239,68,68,.25); }
.br-btn-danger:hover { background: #B91C1C; color: #fff; }
.br-btn-outline-danger { background: transparent; color: var(--br-danger); border-color: rgba(239,68,68,.5); }
.br-btn-outline-danger:hover { background: var(--br-danger-bg); color: #F87171; border-color: var(--br-danger); }
.br-btn-sm { min-height: 34px; padding: .375rem .75rem; font-size: var(--fs-xs); }
.br-btn-lg { min-height: 50px; padding: .875rem 1.75rem; font-size: var(--fs-body); }
.br-btn-block { width: 100%; }
/* Loading: the label is replaced but the width is held, so nothing reflows */
.br-btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
/*
* THE SPINNER HAD NO POSITION (doc s.103).
*
* `position: absolute` with no offsets leaves the box at its static position -
* the start of the content area - so a 16px ring with a translucent border sat
* at the left edge of a button whose label had just been turned transparent.
* The control read as an empty gradient block rather than as something
* working, which is exactly how a stuck loading state goes unreported: it does
* not look like a spinner that stopped, it looks like a button with no name.
*/
.br-btn.is-loading::after {
content: ''; position: absolute;
top: 50%; left: 50%; margin: -8px 0 0 -8px;
width: 16px; height: 16px;
border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
border-radius: 50%; animation: br-spin .6s linear infinite;
}
.br-btn-secondary.is-loading::after, .br-btn-ghost.is-loading::after {
border-color: rgba(100,116,139,.3); border-top-color: var(--br-ink-3);
}
/* --------------------------------------------------------------------------
8. Status pills — colour is never the only signal
-------------------------------------------------------------------------- */
.br-pill {
display: inline-flex; align-items: center; gap: .3rem;
padding: .25rem .625rem; border-radius: var(--br-radius-pill);
font-size: var(--fs-micro); font-weight: 600;
letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.br-pill-active { background: var(--br-success-bg); color: var(--br-success); border: 1px solid rgba(16,185,129,.25); }
.br-pill-locked { background: var(--br-warning-bg); color: var(--br-warning); border: 1px solid rgba(245,158,11,.25); }
.br-pill-hired { background: var(--br-info-bg); color: var(--br-info); border: 1px solid rgba(59,130,246,.25); }
.br-pill-dormant { background: var(--br-line-2); color: var(--br-ink-3); border: 1px solid var(--br-line); }
.br-pill-danger { background: var(--br-danger-bg); color: var(--br-danger); border: 1px solid rgba(239,68,68,.25); }
.br-pill-neutral { background: var(--br-line-2); color: var(--br-ink-2); border: 1px solid var(--br-line); }
.br-pill-gold { background: rgba(251,191,36,.15); color: var(--br-gold); border: 1px solid rgba(251,191,36,.3); }
/* --------------------------------------------------------------------------
9. Forms
-------------------------------------------------------------------------- */
.br-field { margin-bottom: 1rem; }
.br-field label, .br-form-label {
display: block; font-size: var(--fs-sm); font-weight: 500;
color: var(--br-ink-2); margin-bottom: .375rem;
}
.br-required { color: var(--br-danger); margin-left: .125rem; }
.br-input, .br-select, .br-textarea {
width: 100%; min-height: 42px; padding: .5rem .75rem;
font-family: inherit;
font-size: var(--fs-body); /* 16px prevents iOS zoom on focus */
color: var(--br-ink); background: var(--br-surface-2);
border: 1px solid var(--br-line); border-radius: var(--br-radius);
transition: border-color var(--br-t-fast) var(--br-ease),
box-shadow var(--br-t-fast) var(--br-ease),
background-color var(--br-t-fast) var(--br-ease);
}
.br-input:hover, .br-select:hover, .br-textarea:hover { border-color: rgba(99,102,241,.3); }
.br-input:focus, .br-select:focus, .br-textarea:focus {
outline: none; border-color: var(--br-primary);
box-shadow: var(--br-shadow-focus); background: var(--br-surface-hover);
}
.br-input::placeholder, .br-textarea::placeholder { color: var(--br-ink-4); }
.br-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.br-input[aria-invalid="true"], .br-input.is-invalid { border-color: var(--br-danger); }
.br-input:disabled, .br-select:disabled { background: var(--br-line-2); cursor: not-allowed; opacity: .6; }
/* Native pickers render white-on-white in dark mode without this. */
.br-select option { background: var(--br-bg-2); color: var(--br-ink); }
.br-input[type="date"]::-webkit-calendar-picker-indicator,
.br-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.br-input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.7); }
[data-theme="light"] .br-input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .br-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .br-input[type="time"]::-webkit-calendar-picker-indicator { filter: none; }
.br-help { font-size: var(--fs-xs); color: var(--br-ink-3); margin-top: .25rem; }
.br-error {
font-size: var(--fs-xs); color: var(--br-danger); margin-top: .3rem;
display: flex; align-items: center; gap: .25rem;
animation: br-slide-down 200ms var(--br-ease);
}
.br-input-group { display: flex; align-items: stretch; }
.br-input-prefix {
display: inline-flex; align-items: center; padding: 0 .75rem;
background: var(--br-line-2); border: 1px solid var(--br-line); border-right: 0;
border-radius: var(--br-radius) 0 0 var(--br-radius);
color: var(--br-ink-3); font-weight: 500;
}
.br-input-group .br-input { border-radius: 0 var(--br-radius) var(--br-radius) 0; }
/* Persona / segmented toggle with an animated sliding pill */
.br-segment {
display: inline-flex; position: relative; padding: 4px;
background: var(--br-line-2); border-radius: var(--br-radius-pill);
}
.br-segment input { position: absolute; opacity: 0; pointer-events: none; }
.br-segment label {
position: relative; z-index: 1; margin: 0; cursor: pointer;
padding: .5rem 1.25rem; border-radius: var(--br-radius-pill);
font-size: var(--fs-sm); font-weight: 600; color: var(--br-ink-3);
transition: color var(--br-t) var(--br-ease);
}
.br-segment input:checked + label { color: var(--br-primary-dark); }
.br-segment input:focus-visible + label { box-shadow: var(--br-shadow-focus); }
.br-segment-thumb {
position: absolute; top: 4px; bottom: 4px; z-index: 0;
background: var(--br-surface); border-radius: var(--br-radius-pill);
box-shadow: var(--br-shadow-sm);
transition: transform var(--br-t) var(--br-ease-spring), width var(--br-t) var(--br-ease);
}
/* Skill tag input */
.br-tags {
display: flex; flex-wrap: wrap; gap: .375rem; align-items: center;
min-height: 42px; padding: .35rem .5rem;
border: 1px solid var(--br-line); border-radius: var(--br-radius);
background: var(--br-surface);
}
.br-tags:focus-within { border-color: var(--br-primary); box-shadow: var(--br-shadow-focus); }
.br-tag {
display: inline-flex; align-items: center; gap: .3rem;
padding: .2rem .5rem; background: var(--br-primary-light);
color: var(--br-primary-dark); border-radius: var(--br-radius-sm);
font-size: var(--fs-xs); font-weight: 500;
animation: br-pop 200ms var(--br-ease-spring);
}
.br-tag button {
border: 0; background: none; color: inherit; cursor: pointer;
padding: 0; line-height: 1; opacity: .6; font-size: 1rem;
}
.br-tag button:hover { opacity: 1; }
.br-tags input { border: 0; outline: none; flex: 1; min-width: 100px; font-size: var(--fs-sm); }
/* Big radio cards — interview slot choice */
.br-choice { position: relative; }
.br-choice input { position: absolute; opacity: 0; }
.br-choice label {
display: block; margin: 0; cursor: pointer; height: 100%;
padding: 1rem; border: 2px solid var(--br-line);
border-radius: var(--br-radius); background: var(--br-surface);
transition: border-color var(--br-t) var(--br-ease),
transform var(--br-t) var(--br-ease),
box-shadow var(--br-t) var(--br-ease);
}
.br-choice label:hover { border-color: var(--br-ink-4); }
.br-choice input:checked + label {
border-color: var(--br-primary); background: var(--br-primary-light);
transform: translateY(-2px); box-shadow: var(--br-shadow);
}
.br-choice input:focus-visible + label { box-shadow: var(--br-shadow-focus); }
/* --------------------------------------------------------------------------
10. Tables — collapse to cards on mobile
-------------------------------------------------------------------------- */
.br-table-wrap { overflow-x: auto; border-radius: var(--br-radius-lg); }
.br-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: transparent; }
.br-table th {
text-align: left; padding: .75rem 1rem; background: var(--br-surface-2);
font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; color: var(--br-ink-3);
border-bottom: 1px solid var(--br-line); white-space: nowrap;
}
.br-table td {
padding: .75rem 1rem; border-bottom: 1px solid var(--br-line-2);
vertical-align: middle; color: var(--br-ink-2);
}
.br-table tbody tr { transition: background var(--br-t-fast) var(--br-ease); }
.br-table tbody tr:hover { background: var(--br-primary-light); }
.br-table .br-num { text-align: right; }
/* --- Sortable column headers ------------------------------------------- */
/* The whole header is the target, not just the caption, so the click area
matches what the eye reads as one control. */
.br-sort {
display: inline-flex; align-items: center; gap: .35rem;
color: inherit; text-decoration: none; white-space: nowrap;
}
.br-sort:hover { color: var(--br-primary); text-decoration: none; }
.br-sort.is-active { color: var(--br-ink); }
/* Reserved width, so turning the arrow on does not shift the caption and
nudge every column beside it. */
.br-sort-arrow {
display: inline-block; min-width: .75em;
font-size: .75em; color: var(--br-primary);
}
/* --- Talent list -------------------------------------------------------- */
.br-table-talent td { vertical-align: top; }
.br-talent-initials { font-size: var(--fs-body); letter-spacing: .04em; }
.br-rating { color: var(--br-gold); font-weight: 600; white-space: nowrap; }
.br-lead-range { color: var(--br-bid-high); font-weight: 600; }
/* Bootstrap contextual row classes, restated for the dark palette. */
.br-table tbody tr.table-danger { background: var(--br-danger-bg); }
.br-table tbody tr.table-warning { background: var(--br-warning-bg); }
/* --------------------------------------------------------------------------
11. Countdown ring
-------------------------------------------------------------------------- */
.br-ring { position: relative; width: 132px; height: 132px; }
.br-ring svg { transform: rotate(-90deg); }
.br-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.br-ring .br-ring-track { stroke: var(--br-line); }
.br-ring .br-ring-fill { stroke: var(--br-success); transition: stroke-dashoffset var(--br-t-slow) var(--br-ease); }
.br-ring.is-soon .br-ring-fill { stroke: var(--br-warning); }
.br-ring.is-urgent .br-ring-fill { stroke: var(--br-danger); animation: br-pulse 2s ease-in-out infinite; }
.br-ring-center {
position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.br-ring-value { font-size: 1.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.br-ring-unit { font-size: var(--fs-xs); color: var(--br-ink-3); text-transform: uppercase; letter-spacing: .04em; }
/* --------------------------------------------------------------------------
12. Band slider — live ±15% validation feedback
-------------------------------------------------------------------------- */
.br-band { height: 8px; border-radius: var(--br-radius-pill); background: var(--br-line); overflow: hidden; }
.br-band-fill {
height: 100%; border-radius: inherit; background: var(--br-success);
transition: width var(--br-t) var(--br-ease), background var(--br-t) var(--br-ease);
}
.br-band.is-invalid .br-band-fill { background: var(--br-danger); }
/* --------------------------------------------------------------------------
13. Stepper
-------------------------------------------------------------------------- */
.br-stepper { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.br-step { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--br-ink-4); }
.br-step-dot {
width: 28px; height: 28px; border-radius: 50%;
display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700;
background: var(--br-line); color: var(--br-ink-3);
transition: background var(--br-t) var(--br-ease), color var(--br-t) var(--br-ease);
}
.br-step.is-active { color: var(--br-ink); font-weight: 600; }
.br-step.is-active .br-step-dot { background: var(--br-primary); color: #fff; }
.br-step.is-done .br-step-dot { background: var(--br-success); color: #fff; }
.br-step-line { flex: 1; height: 2px; background: var(--br-line); }
.br-step-line.is-done { background: var(--br-success); }
/* --------------------------------------------------------------------------
14. Timeline
-------------------------------------------------------------------------- */
.br-timeline { position: relative; padding-left: 1.75rem; }
.br-timeline::before {
content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px;
width: 2px; background: var(--br-line);
}
.br-timeline-item { position: relative; padding-bottom: 1.25rem; }
.br-timeline-item::before {
content: ''; position: absolute; left: -1.75rem; top: 5px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--br-surface); border: 3px solid var(--br-line);
}
.br-timeline-item.is-done::before { border-color: var(--br-success); background: var(--br-success); }
.br-timeline-item.is-active::before { border-color: var(--br-primary); }
/* --------------------------------------------------------------------------
15. Notifications
-------------------------------------------------------------------------- */
.br-bell { position: relative; }
.br-bell-badge {
position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
padding: 0 5px; border-radius: var(--br-radius-pill);
background: var(--br-danger); color: #fff;
font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}
.br-bell-badge.is-bumped { animation: br-badge-bump 300ms var(--br-ease-spring); }
.br-bell.is-ringing { animation: br-ring-shake 400ms var(--br-ease); }
.br-notif {
display: flex; gap: .75rem; padding: .875rem 1rem;
border-bottom: 1px solid var(--br-line-2);
border-left: 3px solid transparent;
transition: background var(--br-t) var(--br-ease), border-color var(--br-t) var(--br-ease);
}
.br-notif.is-unread { background: var(--br-primary-light); border-left-color: var(--br-primary); }
.br-notif:hover { background: var(--br-line-2); }
/* --------------------------------------------------------------------------
16. Alerts & empty states
-------------------------------------------------------------------------- */
.br-alert {
padding: .875rem 1rem; border-radius: var(--br-radius);
border: 1px solid transparent; font-size: var(--fs-sm);
display: flex; gap: .625rem; align-items: flex-start;
}
/* Tinted background + matching border and text, so each alert reads clearly
on both themes without a separate rule set. */
.br-alert-success { background: var(--br-success-bg); border-color: rgba(16,185,129,.35); color: var(--br-success); }
.br-alert-warning { background: var(--br-warning-bg); border-color: rgba(245,158,11,.35); color: var(--br-warning); }
.br-alert-danger { background: var(--br-danger-bg); border-color: rgba(239,68,68,.35); color: var(--br-danger); }
.br-alert-info { background: var(--br-info-bg); border-color: rgba(59,130,246,.35); color: var(--br-info); }
/* Body copy inside an alert stays neutral; only the icon and heading carry
the semantic colour. */
.br-alert div { color: var(--br-ink-2); }
[data-theme="light"] .br-alert-success { color: #047857; }
[data-theme="light"] .br-alert-warning { color: #B45309; }
[data-theme="light"] .br-alert-danger { color: #B91C1C; }
[data-theme="light"] .br-alert-info { color: #1D4ED8; }
/* Autopilot outbid banner — one coloured box under the header.
Amber rather than red: losing the lead is a prompt to act, not a failure,
and the danger palette is spoken for by blacklists and account holds. */
.br-outbid-banner {
display: flex; gap: .875rem; align-items: center; flex-wrap: wrap;
padding: .875rem 1rem; border-radius: var(--br-radius);
background: var(--br-warning-bg);
border: 1px solid rgba(245,158,11,.35);
border-left: 4px solid var(--br-warning);
color: var(--br-ink-2); font-size: var(--fs-sm);
}
.br-outbid-icon { font-size: 1.5rem; line-height: 1; flex: none; }
/* Grows to absorb the free space so the actions stay hard right, and may
shrink below its content width so a long auction title wraps instead of
pushing the buttons onto their own row. */
.br-outbid-body { flex: 1 1 16rem; min-width: 0; }
.br-outbid-body strong { color: var(--br-warning); }
[data-theme="light"] .br-outbid-body strong { color: #B45309; }
.br-outbid-actions { display: flex; gap: .5rem; align-items: center; flex: none; }
/* The dismiss control is a one-button form; without this it introduces a
block-level line break in the middle of the action row. */
.br-outbid-actions form { margin: 0; }
/* Landing page — the hiring-cycle table and the audience cards.
The table reuses .br-table for its borders and spacing; only what is
specific to this one lives here. */
.br-table-cycle th[scope="row"] { color: var(--br-ink); font-weight: 600; white-space: nowrap; }
.br-cycle-days {
font-family: var(--br-font-mono, inherit);
font-weight: 700; color: var(--br-primary); white-space: nowrap;
}
/* The total is a summary row, not another phase, and needs to read that way
without relying on position alone. */
.br-table-cycle .br-cycle-total { background: var(--br-primary-light); }
.br-table-cycle .br-cycle-total th,
.br-table-cycle .br-cycle-total td { border-top: 2px solid var(--br-primary); }
/* Small caps label above a card heading — names the audience without
spending a heading level on it, which would break the H1/H2/H3 outline. */
.br-eyebrow {
font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--br-ink-3);
}
/* Legal documents — terms and privacy.
Real bullets, not the ✓ marks of .br-feature-list: a clause is a clause, and
ticking each one would read as a list of benefits. */
.br-legal-list {
margin: 0 0 .5rem; padding-left: 1.15rem;
color: var(--br-ink-2); font-size: var(--fs-sm);
}
.br-legal-list li { margin-bottom: .55rem; line-height: 1.65; }
.br-legal-list strong { color: var(--br-ink); }
/* The credit-reconciliation clause is the only nested list. It needs to read
as subordinate to its parent, not as a continuation of it. */
.br-legal-list-nested { margin-top: .5rem; margin-bottom: 0; list-style-type: circle; }
.br-legal-intro { color: var(--br-ink-2); font-size: var(--fs-sm); margin-bottom: .5rem; }
.br-legal-rule { border: 0; border-top: 1px solid var(--br-line); margin: 1.25rem 0 .25rem; }
.br-empty { text-align: center; padding: 3rem 1.5rem; color: var(--br-ink-3); }
.br-empty-icon { font-size: 2.5rem; opacity: .35; margin-bottom: .75rem; }
/* Privacy notice — FR-2.3 */
.br-privacy {
background: var(--br-warning-bg); border: 1px dashed #FDE68A;
border-radius: var(--br-radius); padding: .75rem .875rem;
font-size: var(--fs-xs); color: #92400E;
}
/* Simulation banner — unmistakable, so nobody mistakes it for production */
.br-sim-banner {
background: repeating-linear-gradient(45deg, #FEF3C7, #FEF3C7 10px, #FDE68A 10px, #FDE68A 20px);
border: 1px solid #F59E0B; color: #92400E;
padding: .5rem 1rem; border-radius: var(--br-radius);
font-size: var(--fs-xs); font-weight: 600;
letter-spacing: .04em; text-transform: uppercase; text-align: center;
}
/* --------------------------------------------------------------------------
17. Skeletons
-------------------------------------------------------------------------- */
.br-skeleton {
background: linear-gradient(90deg, var(--br-line-2) 25%, var(--br-line) 50%, var(--br-line-2) 75%);
background-size: 200% 100%;
animation: br-shimmer 1.5s infinite;
border-radius: var(--br-radius-sm);
}
/* --------------------------------------------------------------------------
16b. Theme toggle
-------------------------------------------------------------------------- */
.br-theme-toggle {
display: inline-grid; place-items: center;
width: 38px; height: 38px; padding: 0;
border: 1px solid var(--br-line); border-radius: var(--br-radius);
background: var(--br-surface); color: var(--br-ink-3);
cursor: pointer; font-size: 1rem; line-height: 1;
transition: background var(--br-t-fast) var(--br-ease),
color var(--br-t-fast) var(--br-ease),
border-color var(--br-t-fast) var(--br-ease),
transform var(--br-t) var(--br-ease-spring);
}
.br-theme-toggle:hover {
background: var(--br-surface-hover); color: var(--br-ink);
border-color: rgba(99,102,241,.3); transform: rotate(-15deg) scale(1.06);
}
.br-theme-toggle:focus-visible { outline: none; box-shadow: var(--br-shadow-focus); }
/* One icon per theme; only the relevant one is shown. */
.br-theme-toggle .br-icon-sun { display: none; }
.br-theme-toggle .br-icon-moon { display: block; }
[data-theme="light"] .br-theme-toggle .br-icon-sun { display: block; }
[data-theme="light"] .br-theme-toggle .br-icon-moon { display: none; }
/* --------------------------------------------------------------------------
17a. Bootstrap component overrides
Bootstrap ships light-only defaults. These re-point its components at our
tokens so they follow the active theme instead of staying white.
-------------------------------------------------------------------------- */
.dropdown-menu {
background: var(--br-bg-2);
backdrop-filter: blur(var(--br-blur));
-webkit-backdrop-filter: blur(var(--br-blur));
border: 1px solid var(--br-line);
border-radius: var(--br-radius);
box-shadow: var(--br-shadow-lg);
padding: .375rem;
}
.dropdown-item {
color: var(--br-ink-2); border-radius: var(--br-radius-sm);
padding: .5rem .75rem; font-size: var(--fs-sm);
transition: background var(--br-t-fast) var(--br-ease), color var(--br-t-fast) var(--br-ease);
}
.dropdown-item:hover, .dropdown-item:focus {
background: var(--br-primary-light); color: var(--br-ink);
}
.dropdown-header { color: var(--br-ink-4); }
.dropdown-divider { border-color: var(--br-line); }
/*
Modals must outrank the backdrop even before BR.core.detachModals() runs.
Our glass surfaces use backdrop-filter, which creates a stacking context and
a containing block for fixed-position children. A modal authored inside a
card would otherwise sit UNDER .modal-backdrop and be unclickable. The JS
relocation is the real fix; these values make the ordering explicit and
guard against a modal added somewhere the script has not reached.
*/
.modal { z-index: 1085; }
.modal-backdrop { z-index: 1080; }
.modal-content {
background: var(--br-bg-2);
border: 1px solid var(--br-line);
border-radius: var(--br-radius-lg);
box-shadow: var(--br-shadow-lg);
color: var(--br-ink);
/* Never taller than the viewport, so the footer buttons stay reachable. */
max-height: calc(100vh - 3.5rem);
}
.modal-backdrop.show { opacity: .7; }
.modal-header, .modal-footer { border-color: var(--br-line); flex-shrink: 0; }
.modal-title { color: var(--br-ink); }
/*
The body scrolls, not the dialog.
Without this a tall modal (the accept-bid confirmation, for instance) is
simply clipped: the consequences list and the confirm button fall off the
bottom with no way to reach them.
*/
.modal-content > .modal-body { overflow-y: auto; }
.modal-dialog-centered { min-height: calc(100% - 3.5rem); }
/*
A MODAL WHOSE CONTENTS ARE WRAPPED IN A FORM (doc s.134).
Bootstrap's scrollable modal works by making .modal-content a flex column
and letting .modal-body take the remaining height with overflow-y:auto. Both
halves of that assume .modal-body is a DIRECT child of .modal-content.
Put a