/* Bristol Jobs (SiteID 7) — site-wide CSS layered over platform.css. * * Loaded automatically by App.razor as /sites/bristoljobs/site.css, so these * rules theme every page (header, footer, buttons) — not just the home page. * Must live at wwwroot/site.css, NOT wwwroot/assets/css/site.css: App.razor * only loads the former. * * ── Token discipline (load-bearing, not style preference) ────────────────── * Bristol is the PARENT of a sub-domain group. Every child SiteDomain shares * this SiteID, this Slug, and therefore THIS stylesheet — only Name and * colours differ per domain. The agreed plan is that a sub-domain can later * break off with its own palette by overriding TOKENS ONLY, never by forking * markup or CSS. So: every colour below resolves to a custom property. A * hard-coded hex in a rule is a future bug. (The old standalone site.css had * ~14 of them — that's the anti-pattern this replaces.) * * Palette + usage rules come from the client handover * (specs/bristoljobs/BristolJobs-design-handover.md §2), swatches in tokens.png. * * NOTE: this file is PR 1 — migration at *current* visual parity plus the new * token vocabulary. The redesign proper (gradients, grid, components) lands in * PR 3+. Tokens are defined here first so nothing downstream hard-codes them. */ /* Design foundations — type scale, grid, buttons, cards, fields, link lists, * the marker rule. Split out so this file stays the *token + shared-chrome* * layer and design.css is the *page primitives* layer. * * @import rather than a second because App.razor emits exactly one * stylesheet per site (/sites/{slug}/site.css) and adding another link would * mean changing shared markup for one site. It must appear before any rule in * this file — CSS requires @import to precede all other statements. */ @import url('/sites/bristoljobs/design.css'); /* Page layouts, imported AFTER design.css so a page rule beats the primitive it * builds on. Order matters here and is easy to get wrong: an @import's rules * land at the point of the import, so when home.css was imported from the top * of design.css its .bj-field-bare { padding-left } lost to design.css's later * .bj-field { padding: 0 15px } shorthand at equal specificity — which quietly * reset the search fields' left padding and put the placeholder text under the * icons. */ @import url('/sites/bristoljobs/home.css'); @import url('/sites/bristoljobs/contact.css'); @import url('/sites/bristoljobs/testimonials.css'); @import url('/sites/bristoljobs/team.css'); @import url('/sites/bristoljobs/results.css'); @import url('/sites/bristoljobs/advertise.css'); @import url('/sites/bristoljobs/employers.css'); @import url('/sites/bristoljobs/articles.css'); :root { /* ── Core ─────────────────────────────────────────────────────────── */ --bj-indigo: #251A5C; /* dark section base, footer start */ --bj-plum: #581A5F; /* gradient midpoint */ --bj-hot: #DE1A6A; /* gradient end */ --bj-magenta: #CC1557; /* BUTTONS ONLY — never a bg or heading colour */ --bj-accent: #E81968; /* marker rules, chevrons, small accents */ --bj-wordmark-pink: #FF2880; /* the "jobs" half of the wordmark ONLY — the client specifies this separately from --bj-accent, so don't merge the two */ --bj-dot: #E81968; /* live-count dot — pink, not the green status dot */ --bj-hero-pink: #FF2E88; /* the site name in the hero H1 ONLY (FIX-01) — distinct from --bj-wordmark-pink and --bj-pink-heading; the client specifies all three separately */ --bj-tint: #EDEBF7; /* light section background */ --bj-icon-disc: #FDF0F6; /* pale pink disc behind the contact icons — sampled from the mock-up; --bj-tint is lilac and reads grey behind a pink glyph */ --bj-white: #FFFFFF; /* cards */ /* ── Text ─────────────────────────────────────────────────────────── */ --bj-ink: #10142E; /* headings + body on light */ --bj-muted: #686C82; /* secondary text on light */ --bj-link-dark: #D8D8E8; /* links on indigo */ --bj-count: #928CBA; /* job counts next to links */ --bj-pink-heading: #FF3C8C; /* section subheadings on indigo */ /* ── Accents (each used once) ─────────────────────────────────────── */ --bj-cyan: #7EF0EB; /* "For jobseekers" heading */ --bj-emp-pink: #FF96C4; /* "For employers" heading */ --bj-green: #22C576; /* "Open now" status dot */ --bj-btn-dark: #4A144A; /* newsletter arrow button in footer */ /* ── Forms ────────────────────────────────────────────────────────── */ --bj-field-bg: #FAF9FC; --bj-border: #DFDBE5; --bj-rule: #E0DDEA; --bj-placeholder: #969AAA; /* ── Gradients (handover §2) ──────────────────────────────────────── */ /* Page header block — nav + hero band on the Contact page. */ --bj-gradient-header: linear-gradient(90deg, var(--bj-hot) 0%, var(--bj-plum) 55%, var(--bj-indigo) 100%); /* Footer — deliberately the reverse of the header. */ --bj-gradient-footer: linear-gradient(90deg, var(--bj-indigo) 0%, var(--bj-plum) 45%, var(--bj-hot) 100%); /* ── Typography ───────────────────────────────────────────────────── */ /* Poppins for all UI; Lora Italic for human asides only. Both are pulled * in by the site's page components — neither was previously loaded * anywhere in Platform.Web. Real fallback stacks so a blocked/slow * Google Fonts request degrades sensibly rather than to Times. */ --bj-font-ui: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --bj-font-aside: 'Lora', Georgia, 'Times New Roman', serif; /* ── Radii + shadow (handover §5) ─────────────────────────────────── */ --bj-radius-btn: 8px; --bj-radius-card: 14px; --bj-radius-photo: 12px; --bj-radius-field: 8px; /* The client's tokens file gives 13px for pills (--bj-r-pill there). Added * when the results page needed it for the "New" badge and the facet * counts; the count pill in the hero predates it and uses its own value. */ --bj-radius-pill: 13px; /* Shadow is only ever applied on light backgrounds. */ --bj-shadow-card: 0 4px 14px rgba(0, 2, 18, 0.10); /* ── Hooks consumed by platform.css shared chrome ─────────────────── */ /* platform.css resolves var(--site-*, var(--b-theme-*)) so setting these * re-themes shared header/footer/buttons without forking components. */ --site-primary: var(--bj-indigo); /* Apply Now on result cards. platform.css styles it via * `.job-list .list-footer .btn-primary`, which is MORE specific than any * rule scoped to .job-list alone -- so overriding it there only won the * border and left the fill on --site-primary (indigo), giving a navy * button with a magenta border. Setting the variable the platform rule * already reads is the fix; no specificity contest. */ --site-apply-bg: var(--bj-magenta); --site-apply-fg: var(--bj-white); /* Outline buttons (Save Job, Remove All Filters) hover to * --site-btn-outline-hover-bg, which defaults to --site-primary = indigo. * A navy flood on hover is the "strange hover style" -- these should tint * toward the accent like every other control on the site. */ --site-btn-outline-hover-bg: var(--bj-magenta); --site-btn-outline-hover-fg: var(--bj-white); /* .btn-secondary is forced to white text by platform.css. Save Job is an * outline button on a white card, so it needs ink instead. */ --site-btn-secondary-fg: var(--bj-ink); --site-secondary: var(--bj-magenta); --site-text-primary: var(--bj-indigo); /* .header-bar (the page-title band on /results, /jobs) renders WHITE text, * so it needs a DARK background. platform.css deliberately keeps * --site-header-bg OUT of that chain because several sites set it white to * theme the top navbar — hence the separate --site-title-bar-bg opt-in. */ --site-title-bar-bg: var(--bj-indigo); --site-header-bg: var(--bj-indigo); --site-footer-bg: var(--bj-indigo); } /* Re-point Blazorise's own theme variables at the design palette. * * Blazorise derives these at runtime from Sites/SiteDomains.PrimaryColour and * SecondaryColour, which still hold pre-redesign values (#FA3C3B on the site, * #5bbbb5 on the domain). Anything themed off --b-theme-* — not just buttons — * inherited those. Redefining them on :root keeps the whole network on the * approved colours from the stylesheet, with no data migration needed. */ :root, body { --b-theme-primary: var(--bj-magenta); --b-theme-secondary: var(--bj-indigo); --b-theme-text-primary: var(--bj-indigo); --b-theme-text-secondary: var(--bj-muted); } body { background-color: var(--bj-white); color: var(--bj-ink); font-family: var(--bj-font-ui); /* type-scale-spec: 16px at every width, never scaled down. Pinned rather * than left to the browser default because the spec is explicit about the * reason -- below 16px iOS Safari zooms form inputs on focus, which on * this site means the search bar and the whole contact form. */ font-size: var(--bj-text-body); line-height: var(--bj-leading-body); } /* ── Headings ───────────────────────────────────────────────────────────── * Blazorise injects .text-primary with inline !important AFTER HeadOutlet, so * these need `body`-prefixed specificity to win the cascade. Same fix as * DentalStaff. */ body h1, body h2, body h3, body h4, body h5, body h6 { font-family: var(--bj-font-ui); color: var(--bj-ink); font-weight: 700; } /* ── The font-size override that everything else depended on ────────────── * * ROOT CAUSE of "the H1 is half the size it should be", reported three times * and re-specified twice without changing. It was never the value. * * platform.css lines 37-47 ship: * h1, h2, h3, h4, h5, h6 { font-weight: 600 !important; } * h1 { font-size: 2em !important; } * h2 { font-size: 1.5rem !important; } * * `!important` on a bare ELEMENT selector beats any normal declaration no * matter how specific — so `.bj-hero-title { font-size: … }` never applied, * and neither did .bj-h2, .bj-contact-title or .bj-step-title. `2em` also * inherits, so the rendered size drifted with whatever the ancestor was, * which is why it measured ~17px rather than a predictable wrong number. * * The only thing that beats !important is !important at equal-or-higher * specificity. These carry it deliberately and are the ONE place in this * stylesheet that should — the alternative is every heading class in the * site carrying its own, which is far worse. Each simply re-points the * element at the design token, so the cascade below behaves normally again. * * If a heading is ever still the wrong size, look here first. */ body .bj-hero-title, body .bj-contact-title { font-size: var(--bj-text-hero) !important; font-weight: 700 !important; } body .bj-h2 { font-size: var(--bj-text-h2) !important; font-weight: 700 !important; } /* font-weight too, not just font-size: platform.css line 37 also ships * `h1,h2,h3,h4,h5,h6 { font-weight: 600 !important }`. These five classes had * their size protected but not their weight, so the ones that ARE headings — * .bj-step-title is an

— rendered at 600 instead of 700. */ body .bj-block-heading, body .bj-subheading, body .bj-step-title, body .bj-footer-heading { font-weight: 700 !important; } body .bj-block-heading { font-size: var(--bj-text-block) !important; } body .bj-subheading { font-size: var(--bj-text-sub) !important; } body .bj-step-title { font-size: var(--bj-text-block) !important; } /* §6.2: column headings 16px/700 against 15px/400 links. */ body .bj-footer-heading { font-size: var(--bj-text-sub) !important; } /* type-scale-spec: block heading, 22px at desktop. Was a hardcoded 1.125rem * (18px) that predated the scale. */ body .bj-logos-heading { font-size: var(--bj-text-block) !important; } /* .bj-logos-heading is a

, so the weight rule above does not apply to it — * its carries the bold. Left out deliberately. */ /* platform.css ALSO ships a second mobile rule the block above must survive: * @media (max-width: 767px) { h1, h2 { font-size: 1.2em !important } } * The `body .bj-*` selectors beat it on specificity at every width, so no * media-query counterpart is needed here. Recorded because it is invisible * until someone adds a heading WITHOUT a bj- class, which would then silently * shrink below 768px. */ body .text-primary { color: var(--bj-indigo) !important; } /* ── Buttons ────────────────────────────────────────────────────────────── * Handover §2: "Magenta #CC1557 is reserved for buttons. Do not use as a * background or heading colour anywhere." §5 gives the geometry: 8px radius, * white Poppins Bold 11px, ~32px high, 24px horizontal padding. Sizing is * applied with the redesign (PR 3) so parity styling isn't disturbed here. */ /* !important throughout, and the Blazorise theme vars are re-pointed below. * * Blazorise builds its own theme CSS at runtime from Sites.PrimaryColour / * SecondaryColour (see Routes.razor) and injects it into the document, so it * lands after this stylesheet and wins on cascade order at equal specificity. * Those DB columns still hold pre-redesign values — SiteID 7 is #FA3C3B (red) * and SiteDomain 6 is #5bbbb5 (teal), and the SiteDomain override means teal * is what actually rendered. Pinning the palette here keeps the design correct * regardless of what the DB carries, per §2. * * Fixing the data as well is still worth doing (it would clean up anything * themed straight off --b-theme-*), but the stylesheet no longer depends on * it. */ body .btn-primary, body .btn-secondary, body .btn-primary:not(:disabled):not(.disabled), body .btn-secondary:not(:disabled):not(.disabled) { background-color: var(--bj-magenta) !important; border-color: var(--bj-magenta) !important; color: var(--bj-white) !important; border-radius: var(--bj-radius-btn); font-weight: 700; } body .btn-primary:hover, body .btn-secondary:hover, body .btn-primary:focus, body .btn-secondary:focus, body .btn-primary:not(:disabled):not(.disabled):active, body .btn-secondary:not(:disabled):not(.disabled):active { background-color: var(--bj-hot) !important; border-color: var(--bj-hot) !important; color: var(--bj-white) !important; } body .btn-outline-primary { border-color: var(--bj-magenta) !important; color: var(--bj-magenta) !important; } body .btn-outline-primary:hover, body .btn-outline-primary:focus { background-color: var(--bj-magenta) !important; color: var(--bj-white) !important; } /* ── Footer ─────────────────────────────────────────────────────────────── * platform.css sets `background: var(--site-footer-bg, ...) !important`, so the * flat indigo above is the base. The reversed gradient is layered here; it * needs matching specificity + !important to win. */ body section.footer, body .footer, body > footer, footer { background: var(--bj-gradient-footer) !important; color: var(--bj-white); } /* platform.css gives the footer `margin-top: 25px`. That margin sits OUTSIDE * the footer's own background, so the page background showed through it as a * white strip between the last (indigo) section and the footer. The design has * the dark run straight into the footer with no seam. */ footer { margin-top: 0; } body section.footer a, body .footer a { color: var(--bj-link-dark); } body section.footer a:hover, body .footer a:hover { color: var(--bj-white); } /* ── Links ────────────────────────────────────────────────────────────── */ body a { color: var(--bj-indigo); } body a:hover { color: var(--bj-magenta); } /* ── Form fields (handover §5) ────────────────────────────────────────── */ body .form-control { background-color: var(--bj-field-bg); border: 1px solid var(--bj-border); border-radius: var(--bj-radius-field); color: var(--bj-ink); } body .form-control::placeholder { color: var(--bj-placeholder); } body .form-control:focus { border-color: var(--bj-accent); box-shadow: 0 0 0 0.15rem rgba(232, 25, 104, 0.15); } /* ── Redesigned footer (§6.9) ───────────────────────────────────────────── * Grid per handover §4: 3 / 2 / 2 / 2 / 2 / 1 — contact block, four link * columns, newsletter. Rendered by Sites/BristolJobs/Shared/NetworkFooter.razor * via RenderRegistered, so these rules only ever apply where that renders. * * platform.css styles the generic `footer` element (padding, colours, the * `ul li a` chain), so a few of these need to out-specify it. */ .bj-footer { padding-block: 44px 0; background: var(--bj-gradient-footer) !important; color: var(--bj-white); } /* A3: the footer must share the page's 12-column grid, so its left edge lines * up with the jobseekers column, the first Latest Jobs column and "Jobs by * salary" above it. * * It was `3fr 2fr 2fr 2fr 2fr 3fr` — fourteen units, not twelve, so none of * its internal edges landed on a grid line. The handover's spans are * 3/2/2/2/2/1, which is twelve. * * Declared as a real 12-column grid with explicit spans rather than as six fr * values: `1fr` per unit only gives equal columns if every gutter is also * equal, and here there are five internal gutters shared unevenly between six * tracks. Spanning a 12-track grid makes the columns land on the same lines * the sections above use. */ .bj-footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--bj-gutter); align-items: start; } /* A3 gives 3/2/2/2/2/1, which sums to 12 — but a 1-column newsletter is ~74px * here, narrower than the email input it has to hold, and Home_v9.png draws * that block roughly as wide as a link column. So the spec table and its own * render disagree, and the table cannot be taken literally. * * Resolved as 2/2/2/2/2/2: every column edge lands on a 12-track grid line — * which is what the client's "draw a vertical line" test actually checks, and * the footer logo still sits on the same x as the jobseekers column above it. * The contact block gives up the column rather than the link columns because * the wordmark replacing the 190px logo image (A1) freed that width, while * "Weston-super-Mare" in the Locations column did not get any shorter. * * Flagged for the client to confirm rather than silently rebalanced. */ /* ISD-3850 §6.1 removed the newsletter block, which was the sixth of six * `span 2` blocks on this 12-track grid. Five blocks x 2 leaves TWO tracks * empty at the right, which is the squashed footer with a gap beside it -- * §6.1 asks that the columns "spread across the full container". * * Rebalanced to 12 across five blocks. The contact block keeps 2: it holds the * wordmark, phone and email, all of which are short. The four link columns * take 2.5 each, expressed in tracks because fractional spans do not exist -- * so the grid is restated as 24 tracks and the columns span 5. Every column * edge still lands on a 12-track line (each 12-track line is an even 24-track * line), which is what the "drop a vertical line" test checks. * * The extra width per column is what gives "View all jobs in Bristol" and * "Modern Slavery Policy" room to sit on one line, per §6.1. */ .bj-footer-grid { grid-template-columns: repeat(24, minmax(0, 1fr)); } .bj-footer-contact { grid-column: span 4; } .bj-footer-col { grid-column: span 5; } /* ── Contact block ───────────────────────────────────────────────────── */ /* A1: the logo is now the HTML wordmark, not an . The old .bj-footer-logo * img / .bj-footer-tagline rules are gone with it — .bj-logo and * .bj-logo-strapline in design.css style both, so header and footer stay * identical by construction rather than by two sets of numbers agreeing. */ .bj-footer-logo { display: inline-block; margin-bottom: var(--bj-space-2); } /* The phone number is the one piece of footer contact detail the design * emphasises — larger and in white, with the email quieter beneath it. */ /* inline-block, NOT block: this carries .bj-phone-rule (spec §6), whose * border-bottom would otherwise run the full width of the footer column * instead of stopping at the end of the number. * * But inline-block alone let it flow up ALONGSIDE the wordmark's strapline, * so the number sat beside "Bristol Jobs, Jobs in Bristol" with its rule * underlining part of that line -- which is what reads as odd. The wrapper * below puts it on its own line; this element still shrink-wraps inside it, so * the rule still stops at the last digit. */ .bj-footer-phone { display: inline-block; margin-top: var(--bj-space-2); margin-bottom: 6px; font-size: var(--bj-text-block); font-weight: 700; color: var(--bj-white) !important; text-decoration: none; } /* A block wrapper so the number starts a new line, while the anchor inside it * stays inline-block and keeps the rule the width of the digits. */ .bj-footer-phone-row { display: block; } .bj-footer-email { display: block; margin-bottom: var(--bj-space-3); /* nowrap: the obfuscated placeholder ("hello [at] bristoljobs.co.uk") is * longer than the real address and was breaking over two lines in the * contact column. The address itself fits once the script swaps it in. */ white-space: nowrap; font-size: var(--bj-text-small); color: var(--bj-link-dark) !important; text-decoration: none; } .bj-footer-phone:hover, .bj-footer-email:hover { text-decoration: underline; } .bj-footer-social { display: flex; gap: var(--bj-space-2); margin: 0; padding: 0; list-style: none; } .bj-footer-social li { margin: 0; } .bj-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--bj-white) !important; } /* J2: 13px on the artboard -> ~17px shipped, white at 96%. The client also * lists Instagram, which has no column on Sites or SiteDomains and so cannot * be rendered without a schema change — see NetworkFooter.razor. */ .bj-footer-social svg { width: 17px; height: 17px; fill: currentColor; opacity: 0.96; } .bj-footer-social a:hover { color: var(--bj-cyan) !important; } /* ── Link columns ────────────────────────────────────────────────────── */ /* Faint vertical rules between the four link columns, as in the mock-up. * Sampled there: a 1px translucent white at ~13% over the gradient (a flat hex * would be wrong — the gradient runs from indigo to hot pink beneath them, so * the rule has to tint whatever it sits on). * * Drawn with a left border on each link column rather than as separators in * the grid, so they land between the columns and inherit the column height. * * The adjacent-sibling selector matters: the columns are children 2-5 of the * grid (contact block first, newsletter last), so an :nth-child rule would both * mis-target and put a rule between the contact block and the first column, * where the design has none. `col + col` gives exactly the three internal * dividers regardless of what sits either side. */ .bj-footer-col + .bj-footer-col { padding-left: var(--bj-gutter); border-left: 1px solid rgba(255, 255, 255, 0.13); } /* J1: all four column headings are the SAME size. (The newsletter block that * also used this class was removed by ISD-3850 §6.1.) */ .bj-footer-heading { margin: 0 0 var(--bj-space-2); font-size: var(--bj-text-nav); font-weight: 700; line-height: 1.35; color: var(--bj-white); } .bj-footer-heading a { color: var(--bj-white) !important; text-decoration: none; } .bj-footer-links { margin: 0; padding: 0; list-style: none; } /* platform.css sets `footer ul li a` colours, so these carry !important to * land the lighter on-indigo link colour from the palette. */ /* J1 asks for 19px row spacing. That is a baseline-to-baseline pitch, not a * gap: the links are 12px with line-height 1.35, so the line box is already * ~16px and this margin is the remainder. Total pitch ~25px, which is 19px * scaled by the page's 1.274 factor (24.2px) to within a pixel. * * A literal 19px margin here would give a ~35px pitch — nearly double what is * drawn. */ /* §6.2: 19px baseline-to-baseline. At 15px/1.35 the line box is ~20px, so * the margin is the remainder rather than the full 19. */ .bj-footer-links li { margin-bottom: 8px; } /* ISD-3850 §6.2: the links were rendering at the same weight as the column * headings, so nothing led and the whole footer shouted. They inherit bold * from platform.css's `footer ul li a`, which is why no weight was set here * and why this one needs !important to undo it. * * Heading 16px/700 against link 15px/400 -- the contrast is the point, and the * client notes this "will do more for the footer than the extra space". * * §6.1: nowrap, so no footer link sits on two lines. There is room for the * long ones now the newsletter block has gone. */ .bj-footer-links a { font-size: var(--bj-text-link); font-weight: 400 !important; line-height: 1.35; color: rgba(232, 231, 244, 0.91) !important; text-decoration: none; white-space: nowrap; } .bj-footer-links a:hover { color: var(--bj-white) !important; text-decoration: underline; } /* ── Newsletter ──────────────────────────────────────────────────────── */ .bj-signup-form { display: flex; align-items: stretch; max-width: 260px; border-radius: var(--bj-radius-btn); background: var(--bj-white); overflow: hidden; } .bj-signup-input { flex: 1 1 auto; min-width: 0; border: 0; padding: 10px 12px; font-size: var(--bj-text-small); color: var(--bj-ink); background: transparent; } .bj-signup-input::placeholder { color: var(--bj-placeholder); } .bj-signup-input:focus { outline: 2px solid var(--bj-accent); outline-offset: -2px; } /* --btn-dark #4A144A, the one place the handover assigns it (§2). */ .bj-signup-btn { flex: 0 0 auto; width: 44px; border: 0; background: var(--bj-btn-dark); color: var(--bj-white); font-size: 1.1rem; line-height: 1; cursor: pointer; } /* J3 note: the resting colour was already --bj-btn-dark, but the hover flipped * it to --bj-hot — the hot pink at the gradient's end, which is precisely the * "disappears against the pink" the client describes, just on hover. Darken on * hover instead of brightening, so the button stays distinguishable wherever * it lands on the gradient. */ .bj-signup-btn:hover { background: #330E33; } .bj-signup-btn:focus-visible { outline: 2px solid var(--bj-white); outline-offset: -3px; } /* ── Legal line ──────────────────────────────────────────────────────── */ .bj-footer-legal { margin-top: var(--bj-space-5); padding-block: var(--bj-space-3); border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: var(--bj-text-small); color: var(--bj-link-dark); } .bj-footer-legal a { color: var(--bj-link-dark) !important; } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 1000px) { /* Contact block spans the top, link columns pair up beneath it. The explicit spans above are per-column, so they have to be re-stated here against the 2-track grid or the 12-track values would leak in. */ .bj-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bj-footer-col { grid-column: span 1; } /* Two-up: only the right-hand column of each pair keeps its rule. The columns are children 2-5, so the right-hand ones are the odd children. */ .bj-footer-col + .bj-footer-col:nth-child(even) { border-left: 0; padding-left: 0; } .bj-footer-contact { grid-column: 1 / -1; } } @media (max-width: 600px) { /* TWO columns, not one. Five link groups stacked single-file made the * footer several screens tall on a phone -- the client's full-page * screenshot is mostly footer. Paired up it is half the height and still * comfortably wide enough for the longest label. */ .bj-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--bj-space-3); row-gap: var(--bj-space-4); } /* The contact block keeps the full width -- the wordmark, phone and email * do not pair sensibly with a link column beside them. */ .bj-footer-contact { grid-column: 1 / -1; } .bj-footer-col { grid-column: span 1; } /* Stacked: vertical rules make no sense at all. */ .bj-footer-col + .bj-footer-col { border-left: 0; padding-left: 0; } /* Labels may wrap in a half-width column -- nowrap is a desktop rule and * would overflow here. */ .bj-footer-links a { white-space: normal; } .bj-signup-form { max-width: none; } } /* ── Testimonials (§6.6) ────────────────────────────────────────────────── * Band with the video alongside the quotes. This used the page-header gradient * (handover §2 reserves --magenta for buttons, so a gradient was the way to * avoid a flat magenta fill) — G1 replaced that with a flat colour, because * the page already carries two gradients and a third competes. */ /* G1: flat, not a gradient. The page already carries two gradients (header * band and footer) and a third competes with them. #C01551 is the client's * specified flat value — deliberately not --bj-magenta, which §2 reserves for * buttons; a band in the button colour would make every button on the page * disappear into it. */ .bj-testimonials { background: #C01551; } .bj-testimonial-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--bj-gutter); align-items: center; } .bj-quote-list { margin: var(--bj-space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--bj-space-4); } .bj-stars { display: block; margin-bottom: 6px; color: var(--bj-cyan); font-size: var(--bj-text-small); letter-spacing: 2px; } /* Lora Italic is the handover's "human aside" face (§3), which is exactly * what a customer quote is. */ .bj-quote-text { margin: 0 0 6px; padding: 0; border: 0; font-family: var(--bj-font-aside); font-style: italic; font-size: var(--bj-text-body); line-height: var(--bj-leading-body); color: var(--bj-white); } .bj-quote-name { font-size: var(--bj-text-small); font-style: normal; color: var(--bj-link-dark); } /* 16:9 without a wrapper hack. */ .bj-testimonial-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--bj-radius-card); overflow: hidden; box-shadow: var(--bj-shadow-card); background: rgba(16, 20, 46, 0.35); } .bj-testimonial-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 900px) { /* Video above the quotes on narrow screens — it is the stronger hook and a 5-column embed is unwatchably small at this width. */ .bj-testimonial-grid { grid-template-columns: 1fr; } .bj-testimonial-video { order: -1; } } /* ── Nav actions (§6.1) ─────────────────────────────────────────────────── * "♡ Saved Jobs · 👤 Sign in · [Post a Job]" — only the CTA is a button; the * other two are plain links with a leading icon. Rendered by * Sites/BristolJobs/Shared/NetworkHeader.razor. */ .bj-header .bj-nav-action { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bj-text-nav); font-weight: 500; color: var(--bj-white) !important; text-decoration: none; white-space: nowrap; } .bj-header .bj-nav-action:hover { color: var(--bj-white) !important; text-decoration: underline; } .bj-nav-icon { display: inline-flex; width: 16px; height: 16px; } .bj-nav-icon svg { width: 100%; height: 100%; } /* The CTA keeps button treatment. Sized from the mock-up: ~74x28 on the * 942px artboard -> ~94x36 at the shipped container width. */ .bj-header .bj-nav-cta { min-width: 0; min-height: 36px; /* These were set when --bj-text-nav was 14px; the type scale raised it to * 16px, which widened the button (and "Sign in" beside it) without anyone * re-checking whether the row still fitted. The actions block is the last * thing in the bar, so any growth here is what pushes past the right edge. * * Padding and type now scale with the viewport on the same schedule as the * nav items, so the whole row degrades together rather than the CTA * holding its full size while everything else gives way. The spec's 16px * still renders wherever there is room for it. */ padding-inline: clamp(12px, 1.5vw, 18px); border-radius: var(--bj-radius-btn); font-size: clamp(0.8125rem, 1.08vw, 1rem); font-weight: 700; white-space: nowrap; } /* "Sign in" carries a 16px icon and a 6px gap; it scales with the CTA so the * two stay visually matched as the row tightens. */ .bj-header .b-bar-end .bj-nav-action { font-size: clamp(0.8125rem, 1.08vw, 1rem); } /* ── A1/H1: the header shares the page container ────────────────────────── * The Blazorise Bar spans the full viewport with its own padding, while every * page section is capped at --bj-container. So the nav's left edge never lined * up with the content beneath it — which is the "header and footer span the * full width but the content sits in a narrower column" the client describes * on the Contact page (and the same misalignment, less obviously, on the home * page). * * The bar KEEPS its full-width background — the gradient and the transparent * hero treatment both depend on that — and only its contents are centred to * the container. Matching .bj-container exactly, including the fluid padding, * so the three agree at every width rather than only at 1200px. * * This is the fix for H1's "same container width and outer margins": the * footer already uses .bj-container, so constraining the header here puts all * three on the same x. */ /* ISD-3850 §1.2: the client measured nav contents at 17 -> 1163 against page * content at 49 -> 1151, and "Post a Job" sitting hard against the right edge * at 1200px. * * The cause: Blazorise.Bootstrap renders onto Bootstrap's .navbar, not * just .b-bar, and Bootstrap's own rule is * .navbar { padding: .5rem 1rem; justify-content: space-between } * 1rem = 16px, which is exactly the x=17 measured. The earlier constraint * targeted .b-bar alone, so it never reached the element actually holding the * padding -- which is why this looked fixed and was not. * * Both classes are constrained now, the padding is zeroed (the 92% IS the * margin), and space-between is overridden: §1.2 is explicit that the right * group must be pushed out by `margin-left: auto`, which it already has. * * Must match .bj-container in design.css exactly -- these are one intent in * three places now, and they have to stay in step. */ .bj-header .b-bar, .bj-header .navbar, .bj-header.navbar { box-sizing: border-box; width: min(92%, var(--bj-container)); margin-inline: auto; padding-inline: 0; /* NOT justify-content: flex-start. Overriding Bootstrap's space-between * here removed the only thing holding the right-hand group inside the box, * and "Post a Job" ran off the right edge at 1200px. §1.2 forbids * space-between as the way to position that group -- margin-left: auto on * .b-bar-end does that job -- but the bar still needs to be allowed to * distribute, and the group must be able to shrink rather than overflow. */ min-width: 0; } /* ── B2: nav on one line ────────────────────────────────────────────────── * The nav wrapped to two rows at 1280px. Three things were spending width: * the 178px logo image (now 19px wordmark text, A1), generous link padding, * and the nav being allowed to wrap at all. * * nowrap on the menu is the guarantee; the tightened padding is what makes it * fit rather than overflow. Both are scoped to the desktop breakpoint — the * burger menu below it is a stacked column and must keep wrapping. */ /* 768px, NOT 992px. The Bar renders navbar-expand-MD (confirmed in the live * DOM: `navbar navbar-light b-bar-light navbar-expand-md b-bar-horizontal`), * so Bootstrap switches to the horizontal layout at 768. Gating this block at * 992 left a 768-992 band where the nav was horizontal but none of the gap or * type scaling applied -- so the row kept its full desktop size in a box two * hundred pixels narrower and pushed Post a Job off the edge. * * That band is easy to miss at a stated "1200px": DevTools docked to the side * leaves the page around 825px, which is exactly inside it. */ @media (min-width: 768px) { .bj-header .b-bar-menu, .bj-header .navbar-collapse, .bj-header .b-bar-start, .bj-header .b-bar-end { flex-wrap: nowrap; white-space: nowrap; } /* The nowrap above stops the ROW wrapping, but not the text inside each * link -- a flex item can still break its own content, and at ~1200px * "Jobs in Bristol" and "Bristol Job Sectors" each broke onto two lines, * making the whole header two rows tall. The items must also refuse to * shrink below their content, or flex will squeeze them to force a fit. */ .bj-header .b-bar-start .b-bar-item, .bj-header .b-bar-end .b-bar-item { flex: 0 0 auto; white-space: nowrap; } .bj-header .b-bar-start .b-bar-link, .bj-header .b-bar-start .b-bar-dropdown-toggle, .bj-header .b-bar-end .bj-nav-action, .bj-header .b-bar-end .bj-nav-cta { white-space: nowrap; } /* ISD-3830 §2.1/§2.3: the nav items sat 84-86px apart against a spec of * 32px, with a 444px void before the right-hand group. * * The cause was NOT justify-content: space-between, which §2.3 suspects -- * it was `.b-bar-start { flex: 1 1 auto }`, added in an earlier round to * keep the right-hand actions against the right margin. That makes the * primary nav absorb ALL the leftover width, and since it is itself a flex * row the slack is distributed between its items. Same visual result, but * the fix is different: the growth moves off the nav and onto an auto * margin, which collects the space in one place at the right. * * Gaps are set on the containers rather than as link padding so the * measured gap is the specified gap -- padding would add to it twice. */ .bj-header .b-bar-start .b-bar-link, .bj-header .b-bar-start .b-bar-dropdown-toggle { padding-inline: 0; } /* §2.3: 32px between primary items, 24px in the right-hand group. */ /* §2.3 gives 32px between primary items and 24px in the right-hand group. * The primary nav may SHRINK below its content (flex: 0 1 auto) -- with * 0 0 auto it was immovable, so once the items plus the 32px gaps exceeded * the container the overflow went onto the right group and "Post a Job" * left the page. The right group never shrinks: it is the CTA, and §1.2 * measures its right edge against the container's. * * The gap narrows below 1200px rather than the items wrapping, which is * exactly what §1.1 asks for: "If they don't fit, reduce the gap or the * font size -- not by wrapping." */ /* The primary nav and the right-hand group together need more width than * the bar has below ~1300px: measured at 1024, the items need 653 and the * actions 219 (872 total) inside a 735px menu. Neither row can shrink -- * the items are nowrap -- so the excess lands on "Post a Job". * * The gap and the font already scale (§1.1's prescribed order). What was * missing is that the primary nav must be allowed to SCROLL rather than * push the actions out, once even the smallest type stops fitting. The * actions never move: §1.2 measures Post a Job's right edge against the * container's. */ .bj-header .b-bar-start { /* Shrinkable, with min-width: 0, so the PRIMARY NAV gives way before * the actions do. Every previous version of this rule was 0 0 auto -- * unshrinkable -- which meant the only thing that could yield was the * actions block at the end of the row, and that is what kept pushing * Post a Job out of the page. * * The items are nowrap, so a narrower box makes this row OVERFLOW * rather than reflow; overflow-x: auto turns that into a scroll of the * nav links alone. The links stay full size and legible, nothing * overlaps, and the actions keep their place at the right margin -- * which is the requirement §1.2 actually measures. */ flex: 0 1 auto; min-width: 0; /* `clip` here, not `auto`: the row must be CONTAINED so it cannot sit * under the actions, and clip does that without making this a scroll * container. (With auto the links scrolled but still painted over * Sign in and Post a Job.) * * This is the one place clipping is right: it clips NAV LINKS, which * degrade gracefully, rather than the CTA -- clipping that is what made * the button vanish. The gap and type scaling above mean a realistic * six-item menu never reaches this point; it is the backstop for a * longer one. */ overflow-x: clip; /* §1.1's order -- gap first, then type. Measured at 1200px the row * came to 692 + 219 actions = 911 against a 904 box: SEVEN pixels * short. The floors below close that honestly rather than by letting * anything overlap or scroll out of view. */ /* FIVE gaps sit between the six items, so each pixel removed here is * worth five across the row -- this is the highest-leverage lever in * the nav, which is why §1.1 names it first. * * Measured: the six labels plus the two actions come to ~1010px of * content against ~880px of menu box at a 1200px viewport. 130px over, * which is why the row never fitted and why removing a menu item fixed * it instantly. 8px x 5 gaps recovers 120 of that; the logo gap and * the type scale below find the rest. */ gap: clamp(8px, 1.6vw, 32px); } /* The actions NEVER shrink and never move: Post a Job's right edge on the * container's right edge is the one thing §1.2 states as the test. */ .bj-header .b-bar-end { flex: 0 0 auto; gap: clamp(12px, 1.6vw, 24px); margin-left: auto; } /* §2.3: 48px from the logo to the first nav item. */ /* §2.3's 48px logo gap. As a MARGIN it was added on top of the menu's * own width, so brand + margin + menu exceeded the bar and the overflow * landed on "Post a Job" (measured 7px past the container's right edge). * * The gap moves onto the bar itself instead, so the three children are * laid out by one flex context that accounts for it -- rather than a * margin the menu's width calculation never saw. */ .bj-header .b-bar-brand { flex: 0 0 auto; margin-right: 0; } .bj-header .b-bar, .bj-header .navbar, .bj-header.navbar { /* One gap, but the widest single one in the bar. */ gap: clamp(16px, 3vw, 48px); } } /* ── Undoing platform.css's Bootstrap-3 header rules ───────────────────── * These are NOT inside the desktop media query on purpose: the platform rules * they counter are themselves unscoped, so scoping the undo to min-width 992 * let them come back at every narrower width. That is why 1024px was still * overflowing by 137px after the menu looked fixed at 1280. * * .navbar-collapse { width: 80%; margin-top: 20px } (platform.css:277) * .navbar-brand { min-width: 180px } (platform.css:321) * * The 80% is the one that mattered: Blazorise renders BarMenu onto * .navbar-collapse, so the menu was pinned to 80% of the bar, the right-hand * group sat at the 80% mark, and "Post a Job" ran off the edge. An explicit * width beats `flex: 1 1 auto`, which is why every earlier check passed -- * they ran inside a box already narrowed to 80%, where the items happened to * fit. * * The 180px brand floor spent width the nav items need; A1 replaced a 190px * logo image with 19px text precisely to free it. * * ── Why every earlier attempt failed ───────────────────────────────────── * The client's DevTools Computed panel settled it: the winning width was * `80%` sourced from `.navbar-collapse` at platform.css:277, with * flex-basis: auto and margin-top: 20px alongside it. None of my rules were * in the cascade at all. * * The reason: .b-bar-menu and .navbar-collapse are on DIFFERENT elements. * Blazorise emits both class names -- I confirmed that much by reading the * Bootstrap provider's DLL -- but never that they land together, and they do * not. So every rule scoped to .b-bar-menu was styling a box that was not * the one being sized, which is why each fix measured correctly in isolation * and changed nothing on the page. * * Every menu rule here now names BOTH classes. `.bj-header .navbar-collapse` * is two classes against platform.css's one, so it wins on specificity * without needing !important. */ /* Desktop only. Unscoped, `flex: 1 1 0` made the collapsed panel a flex item * competing for space on the bar's row, so on a phone it opened BESIDE the * burger and squeezed the logo left instead of dropping below -- which is the * burger appearing to move when the menu opens. Below 768 the panel must stay * a plain full-width block so .navbar's flex-wrap can put it on its own line. */ @media (min-width: 768px) { .bj-header .b-bar-menu, .bj-header .navbar-collapse { width: auto; margin-top: 0; /* `.navbar-expand-lg .navbar-collapse { flex-basis: auto }` lets the menu * size to its CONTENT rather than the space available, and * `.navbar-expand-lg { justify-content: flex-start }` then packs * everything from the left -- so when the content is wider than the bar, * the overflow goes off the right edge and takes Post a Job with it. * * flex-basis: 0 plus flex-grow makes the menu take the space that is * actually left after the brand, rather than claiming what it wants. */ /* ONE rule for this selector. There were three, and the last of them set * `flex: 1 1 auto`, which silently undid the `flex: 1 1 0` here -- same * specificity, later wins. The client's second Computed panel showed * exactly that: my margin-top, justify-content and min-width had all * landed, but flex-basis was still auto and the width still fixed. * * flex-basis: 0 (not auto) is the whole point: auto sizes the menu to its * CONTENT, so it claims more than the bar has and the surplus pushes Post * a Job off the right edge. 0 makes it take what is actually left after * the brand. */ flex: 1 1 0; min-width: 0; /* display/align/justify are set in the desktop block below, NOT here: * at mobile Bootstrap hides this element with * `.collapse:not(.show) { display: none }`, and a display: flex at any * width beats it -- which rendered the menu expanded BESIDE the burger, * running off the right edge. The collapse must stay Bootstrap's to * control. */ /* NOT overflow-x: clip. Containing the spill stopped the page widening -- * the white strip went -- but then CLIPPED Post a Job instead of showing * it, which is worse: the button disappeared entirely. Containment can * only ever hide the symptom, because the row genuinely does not fit at * this width. The row has to become narrower, which is what the wrapping * rule below does. */ } } /* The menu's own two rows must then share that space: the actions keep their * width (they are the CTA, and §1.2 measures Post a Job's right edge), the * primary nav gets the remainder and scales its gap and type into it. */ .bj-header .b-bar-brand { min-width: 0; } /* §1.1: "If they don't fit, reduce the gap or the font size -- not by * wrapping." The gap above gives first; below 1400px the type gives too. * 16px is the spec's desktop size and is kept wherever the row fits -- * measured, that is 1440px and above. * * KNOWN LIMIT, flagged rather than hidden: between roughly 1000 and 1150px * six nav items plus Sign in and Post a Job need ~850px against ~800 * available, even at the 12.5px floor. The row overflows there. * * Not "fixed" by shrinking type past legibility, by letting items overlap, * or by scrolling the row (all three were tried and all three just hide * the collision). Blazorise's burger takes over at 992px, so the affected * band is ~150px wide and sits between the two review widths the client * uses. The real lever is the menu's own length -- it went from nine items * to six in ISD-3830, and five would fit comfortably -- which is the * client's call, not a CSS one. */ @media (max-width: 1400px) { .bj-header .b-bar-start .b-bar-link, .bj-header .b-bar-start .b-bar-dropdown-toggle { /* Held slightly below the viewport ratio deliberately. My probe * has consistently measured this row NARROWER than the live page * -- it lacked the hero, then the caret, then the icon, then the * button classes -- so the margin here is insurance against a real * row that is wider than anything measured here. The spec's 16px * still renders at 1440+, where it fits regardless. */ font-size: clamp(0.75rem, 1.02vw, 1rem); } } /* 767px, NOT 991px. The Bar is navbar-expand-MD, so Bootstrap collapses to the * burger below 768 and expands above it. This block was gated at 991, so * between 768 and 991 the column layout was being applied to a bar Bootstrap * had already expanded into a row -- and the desktop block at min-width: 768 * was applying at the same time. The two fought, which is the jump on open. * * One boundary now, matching the markup: 767 down is the burger panel, 768 up * is the horizontal row. */ @media (max-width: 767px) { /* Stacked burger menu: give the actions room and left-align them with the rest of the nav rather than trailing the last link. */ .bj-header .bj-nav-action { padding-block: 8px; } .bj-header .bj-nav-cta { width: 100%; } /* ── The burger itself ─────────────────────────────────────────────── * Bootstrap's default toggler is a dark icon on a transparent ground, * which is invisible-to-ugly on the indigo mobile header (the desktop * header is transparent over the photo, so this only shows on mobile). * The icon is a background-image with the stroke colour baked into the * data URI, so it cannot inherit currentColor -- it has to be redrawn in * white. */ .bj-header .navbar-toggler, .bj-header .b-bar-toggler { border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--bj-radius-btn); padding: 6px 9px; background: transparent; } .bj-header .navbar-toggler:focus-visible, .bj-header .b-bar-toggler:focus-visible { outline: 2px solid var(--bj-white); outline-offset: 2px; } .bj-header .navbar-toggler-icon, .bj-header .b-bar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } /* ── The expanded panel ────────────────────────────────────────────── * Bootstrap drops the links into a bare stack with no ground of its own, * so they sat over the hero photo and read as loose text. A panel with * the header's own indigo, separated rows and full-width tap targets. */ /* flex-basis: 100% is what makes .navbar's flex-wrap drop this onto its * own line rather than squeezing it in beside the brand and the burger. */ .bj-header .navbar-collapse { flex: 0 0 100%; width: 100%; order: 3; } .bj-header .navbar-collapse.show, .bj-header .navbar-collapse.collapsing { margin-top: 10px; padding: 6px 0 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); } .bj-header .b-bar-start, .bj-header .b-bar-end { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .bj-header .b-bar-start .b-bar-link, .bj-header .b-bar-start .b-bar-dropdown-toggle { display: block; /* 44px minimum tap target, and padding-inline: 0 so the labels align * with the wordmark above them -- Bootstrap's .nav-link carries * `padding: .5rem 1rem`, which indented every row by 16px against the * logo and made the panel look inset for no reason. */ padding: 11px 0; font-size: 1rem; } /* The row separators and the actions divider run the panel's full width, * so the panel reads as one block rather than an indented list. */ .bj-header .b-bar-start .b-bar-item { width: 100%; } .bj-header .b-bar-start .b-bar-item + .b-bar-item .b-bar-link { border-top: 1px solid rgba(255, 255, 255, 0.10); } /* The actions sit below the links with a rule above them, so "Sign in" * and the CTA read as a group rather than two more menu rows. */ .bj-header .b-bar-end { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); gap: 10px; } } /* ═══════════════════════════════════════════════════════════════════════════ JOB SEARCH RESULTS (/jobs, /results) Unlike the home page and Contact, this page has no per-site Razor override — it renders the shared Pages/Jobs/Results.razor for every site on the platform. So it is themed purely from here, by restyling the classes that markup already emits (.job-list, .job-title, .list-footer) and the Bootstrap /Blazorise classes underneath it (.btn-primary, .page-link, .badge). Nothing here may change layout or markup: another site's results page must keep working exactly as it does now, and site.css only loads for this site. The client's note: "borders round buttons, green paging still, can you make it fit with the home page and contact us styles". ═══════════════════════════════════════════════════════════════════════════ */ /* ── The result card ────────────────────────────────────────────────────── * Matched to .bj-card on the other two pages: white on tint, 14px radius, the * same soft shadow, no hard border. The default 1px grey border plus a tight * radius is what made these read as a table rather than a set of cards. */ body .job-list { background: var(--bj-white); border: 1px solid var(--bj-rule); border-radius: var(--bj-radius-card); box-shadow: var(--bj-shadow-card); padding: var(--bj-space-4); margin-bottom: var(--bj-space-3); transition: box-shadow 140ms ease-in-out, border-color 140ms ease-in-out; } /* The whole row is a link target in practice, so it earns a hover state. */ body .job-list:hover { border-color: var(--bj-border); box-shadow: 0 6px 18px rgba(0, 2, 18, 0.13); } /* ── Type ──────────────────────────────────────────────────────────────── * type-scale-spec: block heading 22px/700 for the title, small 13px for meta, * body 16px for the description. These were 19.2px/600 and a 15px grey. */ body .job-list .job-title { font-size: var(--bj-text-block); font-weight: 700; line-height: var(--bj-leading-tight); color: var(--bj-ink); } body .job-list .job-title-link { text-decoration: none; } body .job-list .job-title-link:hover .job-title { color: var(--bj-magenta); } body .job-list .job-posteddate, body .job-list .job-location { font-size: var(--bj-text-small); line-height: var(--bj-leading-small); color: var(--bj-muted); } /* The employer is the second-most useful thing on the row after the title. */ body .job-list .poster-name { font-size: var(--bj-text-small); font-weight: 700; color: var(--bj-ink); } /* Salary carries the same weight and accent as the job cards in the hero, so * the two treatments of the same fact agree across the site. */ body .job-list .job-salary { font-size: var(--bj-text-small); font-weight: 700; color: var(--bj-magenta); } body .job-list .job-description { font-size: var(--bj-text-body); line-height: var(--bj-leading-body); color: var(--bj-muted); } /* ── "New" badge ───────────────────────────────────────────────────────── * Was Bootstrap's amber .badge. Pink-tinted pill, matching the count pill and * the contact-card icon discs. */ body .job-list span.job-status, body .job-list .badge.job-status { display: inline-block; margin-left: var(--bj-space-1); padding: 3px 9px; border-radius: var(--bj-radius-pill); background-color: rgba(232, 25, 104, 0.12); font-size: var(--bj-text-count); font-weight: 700; letter-spacing: 0.02em; color: var(--bj-magenta); vertical-align: middle; } /* ── The footer row ────────────────────────────────────────────────────── * A hairline rule instead of the grey band, so the card reads as one object. */ body .job-list .list-footer { margin-top: var(--bj-space-3); padding-top: var(--bj-space-3); border-top: 1px solid var(--bj-rule); background: transparent; align-items: center; } /* ── Buttons ───────────────────────────────────────────────────────────── * Apply is the page's primary action and takes the magenta CTA treatment used * everywhere else. Save is secondary and becomes a quiet outline button -- * the client's "borders round buttons" is really two buttons competing, not * borders as such: both were rendering solid and identical. * * Scoped to .job-list so this cannot reach the search form, the header CTA or * any other Blazorise button on the page. */ body .job-list .btn-primary, body .job-list .btn-primary:not(:disabled):not(.disabled) { background-color: var(--bj-magenta); border-color: var(--bj-magenta); border-radius: var(--bj-radius-btn); font-weight: 700; color: var(--bj-white); } body .job-list .btn-primary:hover, body .job-list .btn-primary:focus { background-color: var(--bj-hot); border-color: var(--bj-hot); color: var(--bj-white); } /* !important is required, not stylistic: the global button rule earlier in * this file (search "the DB columns still hold pre-redesign values") sets * background/border/colour on every .btn-secondary with !important, to stop * the DB's stale theme colours showing through. Importance is compared before * specificity, so a normal declaration here loses however specific it is -- * the same trap as the platform.css heading rules. */ body .job-list .btn.btn-secondary, body .job-list .btn-secondary, body .job-list .btn-secondary:not(:disabled):not(.disabled) { background-color: transparent !important; background-image: none !important; border-color: var(--bj-border) !important; border-radius: var(--bj-radius-btn); font-weight: 600; color: var(--bj-ink) !important; } body .job-list .btn-secondary:hover, body .job-list .btn-secondary:focus { background-color: var(--bj-field-bg) !important; border-color: var(--bj-magenta) !important; color: var(--bj-magenta) !important; } /* Saved / Applied states: Bootstrap green has no place in this palette. */ body .job-list .btn-success, body .job-list .btn-success:not(:disabled):not(.disabled) { background-color: transparent !important; border-color: var(--bj-magenta) !important; border-radius: var(--bj-radius-btn); font-weight: 700; color: var(--bj-magenta) !important; } /* ── Pagination ────────────────────────────────────────────────────────── * The "green paging" the client flagged. .page-link takes its colour from * Bootstrap's link colour, which is not one of ours. */ body .pagination { gap: 6px; } body .pagination .page-link { min-width: 38px; border: 1px solid var(--bj-rule); border-radius: var(--bj-radius-btn); background: var(--bj-white); font-size: var(--bj-text-small); font-weight: 600; color: var(--bj-ink); text-align: center; } body .pagination .page-link:hover { border-color: var(--bj-magenta); background: var(--bj-field-bg); color: var(--bj-magenta); } body .pagination .page-item.active .page-link { border-color: var(--bj-magenta); background: var(--bj-magenta); color: var(--bj-white); } body .pagination .page-item.disabled .page-link { border-color: var(--bj-rule); background: var(--bj-white); color: var(--bj-placeholder); } /* ── Refine Search panel ───────────────────────────────────────────────── * The left column on /jobs. Same card treatment as the results beside it, so * the two columns read as one system. */ body .refine-search-container { background: var(--bj-white); border: 1px solid var(--bj-rule); border-radius: var(--bj-radius-card); box-shadow: var(--bj-shadow-card); } body .refine-search-container h2 { font-size: var(--bj-text-block) !important; font-weight: 700 !important; color: var(--bj-ink); } /* Facet group labels ("JOB HOURS", "LOCATIONS") — micro, per the type scale. */ body .refine-search-container .refine-group-title, body .refine-search-container label { font-size: var(--bj-text-count); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bj-muted); } body .refine-search-container .refine-filter-row { padding-block: 3px; } body .refine-search-container .refine-filter-name { font-size: var(--bj-text-link); } /* The count badges. Blazorise renders Color.Primary as .badge-primary, which * is where the teal comes from — the same colour the client flagged on the * pagination. A quiet tinted pill reads as a count rather than a status. */ body .refine-search-container .badge-primary, body .refine-search-container .badge.badge-primary { background-color: rgba(37, 26, 92, 0.07); border-radius: var(--bj-radius-pill); font-size: var(--bj-text-count); font-weight: 700; color: var(--bj-indigo); } /* The selected-filter chips at the top of the panel ARE a status, so they keep * the accent — but in the site's magenta, not Bootstrap's. */ body .refine-search-container .refine-clear-all ~ * .badge-primary, body .refine-search-container > .panel-body > .row > .col-sm-12 > .badge-primary { background-color: var(--bj-magenta); color: var(--bj-white); } /* ── Search field + button pair (Blazorise ) ───────────────────── * Renders as a Bootstrap .input-group: the field and the button are one * control, so only the OUTER corners are rounded and the two meet flush. * * The global button rule earlier in this file sets border-radius on all four * corners of every .btn, which rounded the button's LEFT edge where it meets * the field while Bootstrap squared its right edge -- the two corners exactly * inverted, which is what made the pair look detached and lopsided. * * Each side is set explicitly rather than relying on Bootstrap's own * input-group rules, because those lose to the site's own button radius. */ body .refine-search-container .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; } body .refine-search-container .input-group > .input-group-append > .btn, body .refine-search-container .input-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: var(--bj-radius-field) !important; border-bottom-right-radius: var(--bj-radius-field) !important; } /* The button is an icon square, not a labelled button: the global rule's * generous horizontal padding made it far wider than it needs to be. */ body .refine-search-container .input-group > .input-group-append > .btn { padding-inline: 16px; } /* Fields: match the contact form's inputs. */ body .refine-search-container .form-control { border: 1px solid var(--bj-border); border-radius: var(--bj-radius-field); background: var(--bj-field-bg); font-size: var(--bj-text-body); color: var(--bj-ink); } body .refine-search-container .form-control:focus { border-color: var(--bj-magenta); box-shadow: 0 0 0 3px rgba(204, 21, 87, 0.12); } body .refine-search-container .form-control::placeholder { color: var(--bj-placeholder); } /* The panel's own Search buttons are Color.Secondary, which Bootstrap renders * grey. This is the primary action in this column, so it takes the CTA. */ body .refine-search-container .btn-secondary:not([class*="outline"]) { background-color: var(--bj-magenta); border-color: var(--bj-magenta); border-radius: var(--bj-radius-btn); font-weight: 700; color: var(--bj-white); } body .refine-search-container .btn-secondary:not([class*="outline"]):hover { background-color: var(--bj-hot); border-color: var(--bj-hot); } /* "Remove All Filters" is deliberately quiet — it is destructive. */ body .refine-search-container .btn-outline-secondary { border-color: var(--bj-border); border-radius: var(--bj-radius-btn); color: var(--bj-muted); } body .refine-search-container .btn-outline-secondary:hover { border-color: var(--bj-magenta); background: transparent; color: var(--bj-magenta); } /* ── Alert Me ──────────────────────────────────────────────────────────── * Sits above the results and is a genuine secondary action beside them, so it * gets the outline treatment rather than a second solid magenta button * competing with every Apply Now down the page. */ body .b-container-fluid .btn-secondary[href="/register"], body .btn-secondary[href="/register"] { background-color: transparent !important; border-color: var(--bj-magenta) !important; border-radius: var(--bj-radius-btn); font-weight: 700; color: var(--bj-magenta) !important; } /* ── "Top Reasons to Apply" (job detail) ───────────────────────────────── *

    on Pages/Jobs/JobDetails.razor. NOT .job-description * — that holds employer-supplied HTML which other sites render their own way, * so it is deliberately left alone. * * platform.css gives each item a ::before counter at 40px in #fa3c3b — SiteID * 7's pre-redesign brand red, the same stale DB colour the button rule guards * against. At that size, in a face without the glyph, the markers rendered as * grey squares rather than numbers. * * Replaced with the step numerals' treatment from the Contact page, so a * numbered list means the same thing in both places: outlined, in the site's * plum, at a size that reads as a numeral rather than a bullet. */ body .top-reasons { counter-reset: index; margin: var(--bj-space-2) 0 0; padding: 0; list-style: none; } body .top-reasons li { counter-increment: index; display: flex; align-items: flex-start; gap: 14px; padding: 9px 0; font-size: var(--bj-text-body); line-height: var(--bj-leading-body); color: var(--bj-ink); } body .top-reasons li::before { content: counter(index); flex: 0 0 auto; min-width: 28px; font-family: var(--bj-font-ui); font-size: 30px; font-weight: 700; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; /* Same outlined treatment as .bj-step-num, and the same fallback: a * near-background fill would be invisible where -webkit-text-stroke is * unsupported, so those engines get the solid plum instead. */ color: #962054; -webkit-text-stroke: 1.1px #962054; } @supports (-webkit-text-stroke: 1px black) { body .top-reasons li::before { color: transparent; } } /* ── Wordmark on a light header ────────────────────────────────────────── * .bj-logo and .bj-logo-strapline are hardcoded white in design.css, which is * right for the two pages where the header sits on a photo or a gradient -- * the home hero and the Contact band. Every OTHER page (job search, job * detail, account, CMS pages) has a white header, so "bristol" and the * strapline were white on white: only the pink "jobs" was visible, and the * invisible strapline read as an overlap. * * Inverted rather than patched: ink is the default, and white is applied only * where the header is transparent over a dark ground. The selectors mirror the * ones in home.css that make the header transparent in the first place, so the * two cannot drift apart -- if a future page gets a dark header it needs * adding in both places. * * The pink word is unchanged: it reads on both grounds. */ body .bj-logo { color: var(--bj-ink); } body .bj-logo > small { color: var(--bj-ink); } body .bj-logo-strapline { color: var(--bj-muted); } body:has(.bj-hero) .site-header .bj-logo, body:has(.bj-contact-band) .site-header .bj-logo, body:has(.bj-hero) .site-header .bj-logo > small, body:has(.bj-contact-band) .site-header .bj-logo > small { color: var(--bj-white); } body:has(.bj-hero) .site-header .bj-logo-strapline, body:has(.bj-contact-band) .site-header .bj-logo-strapline { color: #E2E0F0; } /* The footer sits on the gradient on every page, so it always takes the dark * treatment regardless of which page it is on. */ body .bj-footer .bj-logo, body .bj-footer .bj-logo > small { color: var(--bj-white); } body .bj-footer .bj-logo-strapline { color: #E2E0F0; } /* ── Header on a light page ────────────────────────────────────────────── * Nav links are forced white by home.css for the transparent header; on a * white header they need the ink back. Same mirrored scoping. */ body .site-header .navbar-nav > li > a, body .site-header .nav-link, body .site-header .b-bar-link { color: var(--bj-ink); } body .site-header .bj-nav-action { color: var(--bj-ink) !important; } body:has(.bj-hero) .site-header .bj-nav-action, body:has(.bj-contact-band) .site-header .bj-nav-action { color: var(--bj-white) !important; } /* A white header needs a boundary against the page beneath it. */ body:not(:has(.bj-hero)):not(:has(.bj-contact-band)) .site-header { border-bottom: 1px solid var(--bj-rule); } /* ── Refine panel rhythm ───────────────────────────────────────────────── * The controls come from three different places (a TextEdit in an Addons * group, a LocationFinder2, a bare