/* Fonts — FS Industrie, self-hosted from the External Handbook (already served publicly there, so web use is established). WOFF2 is the primary format (~half the OTF weight, so the swap window is short enough to avoid the visible FOUT in the header); the OTFs stay as a fallback source and keep handbook parity. The body weights (400/700/900) are preloaded in the page so they download in parallel with the CSS. */ @font-face { font-family: "FS Industrie"; src: url("/fonts/FSIndustrie-Book.woff2") format("woff2"), url("/fonts/FSIndustrie-Book.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "FS Industrie"; src: url("/fonts/FSIndustrie-Regular.woff2") format("woff2"), url("/fonts/FSIndustrie-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "FS Industrie"; src: url("/fonts/FSIndustrie-Bold.woff2") format("woff2"), url("/fonts/FSIndustrie-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "FS Industrie"; src: url("/fonts/FSIndustrie-Black.woff2") format("woff2"), url("/fonts/FSIndustrie-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } /* Palette (CDS Brandbook v6, as implemented on the handbook), with the handbook's WCAG AA contrast table (on white): #1BA396 teal — 2.92:1 decorative use only (borders, accents) #138078 dark teal — 4.78:1 all text links / interactive elements #1B345C navy — 12.4:1 headings #1B1B1B charcoal — 17.3:1 body text #F05222 orange — 3.54:1 large text / decorative only #E6007D magenta — 4.50:1 passes, use sparingly #EDEDED grey — backgrounds only, never text (Normal-size text needs 4.5:1 for AA.) */ :root { --cds-teal: #1BA396; --cds-teal-dark: #138078; --cds-navy: #1B345C; --cds-charcoal: #1B1B1B; --cds-grey: #EDEDED; --cds-white: #FFFFFF; --cds-orange: #F05222; --cds-magenta: #E6007D; /* The one place to change type. Fallback stack matches the handbook. */ --font-body: "FS Industrie", "Calibri", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-heading: var(--font-body); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-weight: 400; color: var(--cds-charcoal); background: var(--cds-white); line-height: 1.5; } /* Headings: h1/h2 navy, h3 dark teal — as the handbook */ h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; } h1 { color: var(--cds-navy); font-weight: 900; } h2 { color: var(--cds-navy); font-weight: 700; } h3 { color: var(--cds-teal-dark); font-weight: 700; } /* Links: dark teal, underlined (WCAG 1.4.1 — not colour alone) */ a { color: var(--cds-teal-dark); text-decoration: underline; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--cds-charcoal); color: var(--cds-white); padding: 0.5rem 1rem; z-index: 11; /* above the sticky header */ } .skip-link:focus { position: fixed; } .skip-link:focus { left: 0; } /* Focus indicator — as the handbook (WCAG 2.4.7) */ :focus-visible { outline: 2px solid var(--cds-teal-dark); outline-offset: 2px; } /* Header: dark teal (white on it is 4.78:1), white logo asset. The header never moves (162883, supersedes sticky from 162882): the body is a non-scrolling shell and .page-scroll is the only scroll container — the header sits outside it. Anchor targets land inside the scroller, always clear of the header. Short viewports (and print) revert to normal flow so the header gives the space back. overscroll-behavior on the shell itself, not just .page-scroll: that property only suppresses bounce on an element that actually scrolls. On short pages .page-scroll has no overflow, and the header always sits outside it — in both cases the gesture chains to the viewport, which is what rubber-bands and drags the header. Killing the bounce on html/body (a non-scrolling shell) stops that everywhere. */ html, body { height: 100%; overscroll-behavior: none; } body { display: flex; flex-direction: column; } .page-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: none; scroll-padding-top: 0.5rem; /* anchored rows land with a little air */ /* Sticky-footer layout (story 162971): the disclaimer banner sits at the bottom of the page, not floating mid-viewport on short pages. The 1fr content row grows to fill; the auto footer row pins to the bottom. On long pages the content row exceeds the viewport, the scroller scrolls, and the footer flows after the content. No bounce — overscroll is killed on the shell above. */ display: grid; grid-template-rows: 1fr auto; } @media (max-height: 30rem), print { html, body { height: auto; } body { display: block; } .page-scroll { overflow-y: visible; } } /* Self-service profile export (FR-51). Reads cleanly on screen; the @media print block strips the app chrome so browser Save-as-PDF is a tidy document. */ .export-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; } .profile-export h2 { border-bottom: 2px solid var(--cds-teal-dark); padding-bottom: 0.2rem; margin-top: 1.5rem; } .profile-export h3 { margin: 0.75rem 0 0.25rem; font-size: 0.95rem; color: var(--cds-charcoal); } .profile-export .export-sub { color: #555; margin-top: 0; } .profile-export .export-stale { color: var(--cds-orange); font-weight: 700; } .profile-export .x-empty { color: #777; font-style: italic; } ul.export-list { list-style: none; padding: 0; margin: 0 0 0.5rem; } ul.export-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; break-inside: avoid; } ul.export-list .x-name { font-weight: 700; } ul.export-list .x-detail { color: #444; text-align: right; } .export-foot { margin-top: 1.5rem; color: #666; } @media print { header.site, footer.site, .skip-link, .no-print { display: none !important; } main { max-width: none; padding: 0; } .profile-export { color: #000; } .profile-export section { break-inside: avoid; } .profile-export h2 { break-after: avoid; } ul.export-list .x-detail { color: #000; } } header.site { background: var(--cds-teal-dark); color: var(--cds-white); padding: 0.6rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } header.site .logo { display: flex; align-items: center; gap: 0.6rem; color: var(--cds-white); text-decoration: none; font-weight: 700; font-size: 1.1rem; } /* Supplied CDS asset only — never recreated or distorted; exclusion zone respected by the surrounding flex gap/padding. */ /* The wordmark is ~1.7x the cap height of "Skills Matrix", so align-items centring (geometrically correct) still drops its base ~4.5px below the text baseline — and the eye lines things up on that shared baseline, so it reads as low. Lift it so the base sits on the baseline, letting the taller "d" rise above the caps as a larger letterform should. Value measured against the rendered header. Baseline-kiss sits at ~-4.5px (the wordmark is all round-bottomed letters, which overshoot the baseline to look aligned); the value here is lifted further by brand preference to ride higher in the bar. Repositions only; never scales/distorts the supplied asset. */ header.site .logo img { height: 1.8rem; width: auto; transform: translateY(-5.5px); } header.site nav a { color: var(--cds-white); margin-right: 0.75rem; text-decoration: none; } header.site nav a:hover { text-decoration: underline; text-underline-offset: 2px; } main { width: 100%; /* as a grid item it must fill the column up to max-width, not shrink to content */ max-width: 60rem; margin: 0 auto; padding: 1rem; } /* Footer: charcoal — as the handbook */ footer.site { background: var(--cds-charcoal); color: rgba(255, 255, 255, 0.7); margin-top: 2rem; padding: 1rem; text-align: center; font-size: 0.875rem; } footer.site a { color: var(--cds-white); } /* Tables: navy header row, grey even rows — as the handbook */ .table-wrap { overflow-x: auto; } table { border-collapse: collapse; width: 100%; margin: 0.5rem 0 1rem; } th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--cds-grey); } thead th { background: var(--cds-navy); color: var(--cds-white); } thead th a { color: var(--cds-white); text-decoration: none; } thead th a:hover { text-decoration: underline; text-underline-offset: 2px; } tbody tr:nth-child(even) { background: var(--cds-grey); } /* Forms: stacked, generous targets (WCAG 2.2 target size). Modern control look applied app-wide (story 162918): a softer #878787 border (kept >=3:1 for WCAG 1.4.11) and gentler radius than the handbook's heavier form style. */ label { display: inline-block; margin: 0.25rem 0; } input, select, button, textarea { font: inherit; padding: 0.4rem 0.6rem; min-height: 24px; border: 1px solid #878787; border-radius: 6px; background: var(--cds-white); color: var(--cds-charcoal); max-width: 100%; } /* Buttons: dark teal with white text (4.78:1 — AA) */ button { background: var(--cds-teal-dark); color: var(--cds-white); border: none; font-weight: 700; cursor: pointer; padding: 0.45rem 0.9rem; } button:hover { background: var(--cds-navy); } button:disabled, button:disabled:hover { background: var(--cds-grey); color: #6B6B6B; cursor: not-allowed; } /* A busy button (mid-save) is also disabled, so it greys via the rule above; the progress cursor distinguishes "working" from "you can't click this" (app.js sets aria-busy on the submitter while a save/import is in flight). */ button[aria-busy="true"], button[aria-busy="true"]:hover { cursor: progress; } /* Selects, app-wide (story 162918): drop the native chrome and draw our own chevron, round the corners; hover warms the border, focus uses the global teal outline. The .edit-inline override (above) keeps panel selects full-width. */ select { appearance: none; -webkit-appearance: none; border-radius: 8px; padding: 0.45rem 2rem 0.45rem 0.7rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23595959' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 0.85rem; line-height: 1.3; cursor: pointer; } select:hover { border-color: var(--cds-teal-dark); } form { margin: 0.5rem 0; } /* CSV import upload forms (story 162919): the form sits bare in a card, so it needs its own breathing room — the options fieldset is a tidy panel and the action buttons get a clear gap above and below rather than hugging the fieldset and the card edge. */ .upload-form { margin: 0.25rem 0; } .upload-form > label { display: block; margin-bottom: 0.25rem; } .import-options { margin: 1rem 0; padding: 0.4rem 1rem 0.85rem; border: 1px solid var(--cds-grey); border-radius: 8px; } .import-options legend { padding: 0 0.4rem; font-weight: 700; color: #595959; } .import-options label.check { display: flex; align-items: center; gap: 0.55rem; margin: 0.55rem 0; } .import-options input[type="checkbox"] { width: auto; min-height: 0; margin: 0; padding: 0; } .import-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0.5rem; } /* Sector multi-select on the client add/edit forms (Feature 163275): a tidy bordered fieldset of checkboxes, mirroring the import-options panel. */ .sector-picker { margin: 0.8rem 0; padding: 0.4rem 1rem 0.85rem; border: 1px solid var(--cds-grey); border-radius: 8px; } .sector-picker legend { padding: 0 0.4rem; font-weight: 700; color: #595959; } .sector-picker label.check { display: flex; align-items: center; gap: 0.55rem; margin: 0.4rem 0; } .sector-picker input[type="checkbox"] { width: auto; min-height: 0; margin: 0; padding: 0; } /* A client with no sector yet (bold so meaning isn't carried by colour alone), and the inline action cluster on client/sector table rows. */ .needs-attention { color: var(--cds-orange); font-weight: 700; } .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } /* Bid profile generation (§6.8): a page-level GET form in a card, plus the editable draft textarea. Mirrors the import-form breathing room. */ .bidprofile-form > label { display: block; margin: 0.7rem 0 0.25rem; } /* The Emphasis free-text steer fills the form width on its own line (story 163216) — at the browser default it only showed a few words. */ .bidprofile-form > label input[type="text"] { display: block; width: 100%; margin-top: 0.3rem; } .bidprofile-form fieldset { border: 1px solid var(--cds-grey); border-radius: 8px; margin: 0.25rem 0 0.7rem; padding: 0.4rem 1rem 0.6rem; } .bidprofile-form legend { padding: 0 0.4rem; font-weight: 700; color: #595959; } .bidprofile-form fieldset label, .bidprofile-form label.check { display: flex; align-items: center; gap: 0.55rem; margin: 0.45rem 0; } .bidprofile-form input[type="checkbox"], .bidprofile-form input[type="radio"] { width: auto; min-height: 0; margin: 0; padding: 0; } .bidprofile-draft { width: 100%; font: inherit; } /* Copy button is a JS-only action (story 163095): hidden until app.js sets .js, so no-JS users never see a dead control — they select the textarea by hand. */ .bidprofile-copy { display: none; } .js .bidprofile-copy { display: inline-block; } /* A field that only applies for one