/* ============================================================================ Evaryst 2026 theme (WI 2644, taken app-wide by WI 2646) ---------------------------------------------------------------------------- The design system introduced by the 2026 Figma redesign (Evaryst — Product, https://www.figma.com/design/YVOOc7CyRoeDlG05mjFt7v). TWO layers: 1. TOKENS (:root) — the `--ev-*` custom properties. These are the palette, type ramp and spacing scale; read them rather than hardcoding values. 2. APPEARANCE (.evaryst-theme-2026) — font family, type scale, palette and page surface. WI 2646 put that class on in App.razor, so it now covers the whole product: every page, the public career portal, and the popups/dialogs/tooltips Telerik and Mud portal to the end of the document. The class is kept (rather than folding these rules into bare selectors) so the theme stays one grep away from being scoped down again, and so the rules below keep a specificity edge over the app.css defaults they replace. NOTE `html { font-size: 16px }` in app.css is deliberately untouched: `rem` resolves against html, not body, so the 13px body size here does NOT resize anything sized in rem — most of app.css and all of Telerik. ========================================================================= */ :root { /* --- Surfaces ------------------------------------------------------- */ --ev-surface-page: #f6f8fb; --ev-surface-card: #ffffff; --ev-surface-hover: #ebeff5; /* --- Text ----------------------------------------------------------- */ --ev-text-primary: #1a2433; --ev-text-secondary: #3f4f66; --ev-text-muted: #5a6b82; --ev-text-placeholder: #8695a9; --ev-text-on-brand: #ffffff; /* --- Brand & status -------------------------------------------------- */ --ev-brand-primary: #0a66c2; --ev-status-info-bg: #e7f2fd; --ev-green-400: #36ba6d; --ev-orange-300: #ef8e43; /* --- Status pills (WI 2647) ------------------------------------------- Two OUTCOME tones and a five-step PROGRESS ramp. A candidate's status pill takes the outcome tone when the status is terminal, and a ramp step otherwise — see StatusPillPalette.cs for which is picked and why. The ramp runs dark orange → yellow-green and deliberately STOPS SHORT of the success green. The last in-flight status (today "Offer Made") sits at step 5, and if that were true green it would be indistinguishable from a terminal win — the one thing the pill has to keep apart. Step 5 is olive: clearly the end of the ramp, clearly not the outcome. Every pair is a pale background with a darker same-hue text, which is the pill idiom the design system already uses. */ --ev-status-success-bg: #e9fbf1; --ev-status-success-text: #20603a; --ev-status-danger-bg: #fde8e7; --ev-status-danger-text: #6c1613; /* Bug 2771: the warning role was designed but never bound — the product had no warning tone, so the first thing needing one would have invented a hex and set the precedent. These are the designed values from the token manifest (status/warning/bg, status/warning/text), bound here rather than literal-ised at the one call site. */ --ev-status-warning-bg: #fef8e7; --ev-status-warning-text: #4f3e0d; --ev-progress-1-bg: #fdece0; --ev-progress-1-text: #8a4416; --ev-progress-2-bg: #fdf3dd; --ev-progress-2-text: #8a5f12; --ev-progress-3-bg: #fbf7d9; --ev-progress-3-text: #7a6a10; --ev-progress-4-bg: #f4f8db; --ev-progress-4-text: #63710f; --ev-progress-5-bg: #eef8db; --ev-progress-5-text: #4d7314; /* --- Lines & corners ------------------------------------------------- */ --ev-border-default: #d8e0ea; --ev-radius-xs: 6px; --ev-radius-md: 12px; /* --- Spacing (Figma spacing/*) --------------------------------------- */ --ev-space-2: 2px; --ev-space-4: 4px; --ev-space-6: 6px; --ev-space-8: 8px; --ev-space-12: 12px; --ev-space-16: 16px; --ev-space-24: 24px; /* WI 2815: the three steps the time surface needs. Epic 2805 ruling 13b takes the timesheet screens up a size from the recruiting app's density — 32px page padding, 40px controls, 48px block padding — and the library had the steps while the code stopped at 24. Added here rather than in WI 2816's web half (which ruling 4 originally assigned them to) because this is the first time-surface story to land; 2816 inherits them. */ --ev-space-32: 32px; --ev-space-40: 40px; --ev-space-48: 48px; /* --- Type ------------------------------------------------------------ Inter carries body and labels; Outfit is used for card titles only. Sizes are the Figma ramp: label/11, body/12, body/13, heading/15. */ --ev-font-body: "Inter", "Poppins", system-ui, -apple-system, sans-serif; --ev-font-heading: "Outfit", "Inter", system-ui, -apple-system, sans-serif; --ev-font-size-label: 11px; --ev-font-size-body: 12px; --ev-font-size-body-lg: 13px; --ev-font-size-heading: 15px; /* Outfit 18/26, no tracking. The largest step in the ramp, and still used in exactly one place: the person's name on the candidate page. WI 2729 moved this twice. It was 24/32/-1px; the 1260 redraw's Profile header reports display/20-semibold as the ONLY display token anywhere in its subtree, so size, line height and tracking all moved together — the -1px existed to tighten Outfit at 24 and is wrong below it. Then 20 -> 18 on Tom's call during the smoke test: the name box is a fixed 280px and ellipses, so the type size is what decides how much of a long name survives, and 18 buys roughly three more characters. That 18 is OURS, not the designer's — it is on the list of deltas to fold back into the Figma. ⚠️ THAT IS NOT TRUE, and was not true before WI 2815 either. This token has THREE consumers: · DetailsTopBarPerson.razor.css · FoldersPage.razor.css (predates this story — the sentence above never held) · EvarystMessageCard.razor.css (added by WI 2815; 18px IS the intended size there) Changing this value moves all three, and one of them is a card body rather than a heading. Enumerated rather than counted, because round 8 corrected "one" to "two" and that was still wrong — a count goes stale silently, a list of files can be grepped. Two rules deliberately do NOT read it and must not be "tidied" into doing so — TimeShellHeader's .time-brand-surface (20px) and TimeWeekNav's .time-week-nav-title (24px). Both match drawn display steps; tokenising either silently shrinks it to 18px. That has now happened once and been caught in review, which is why they carry their own warnings. */ --ev-font-size-display: 18px; --ev-line-height-display: 26px; --ev-letter-spacing-display: 0; --ev-line-height-tight: 16px; --ev-line-height-body: 20px; /* The INHERITED default (see the body rule below) — deliberately unitless, unlike the two fixed values above. Those are the Figma ramp and are correct where an element also sets a matching font-size; this one is inherited by elements of every size, so it has to scale with them. 1.54 is 20/13, i.e. the ramp's own body leading expressed as a ratio. */ --ev-line-height-base: 1.54; } /* ============================================================================ The theme itself. Carried by , so everything below is product-wide. ========================================================================= */ .evaryst-theme-2026 { font-family: var(--ev-font-body); font-size: var(--ev-font-size-body-lg); color: var(--ev-text-primary); background-color: var(--ev-surface-page); /* UNITLESS, and it matters. This value is inherited by every element that does not set its own, at every size. A fixed 20px here (what WI 2644 used, harmless while the theme was scoped to a dashboard of 11–15px text) freezes the line box: a 28px ErrorFallback heading is left cramped and a 48px empty-state or success icon overflows and overlaps what follows. Bootstrap's body rule that this replaces is unitless (1.5) for exactly this reason. */ line-height: var(--ev-line-height-base); /* The remove X was red (WI 2146); the 2026 design draws it grey, and WI 2646 made that the product-wide treatment — Active People, the Job Candidates grid, everywhere. Repointing the token EvarystRemoveIcon reads is how that is done: it avoids a specificity fight with the icon's own scoped rule, and EvarystRemoveIcon is the token's only consumer, so nothing else shifts colour. The red literal stays defined in app.css and is now unreferenced by design — leave it there until WI 2146's note is updated. */ --evaryst-remove-red: var(--ev-text-placeholder); } /* Still darkens under the cursor, so it reads as an affordance rather than decoration. */ .evaryst-theme-2026 .evaryst-remove-icon:hover { color: var(--ev-text-secondary); } /* Telerik sets --kendo-font-size on its own containers; the Figma ramp wins here so a raw Telerik button or dropdown matches the 13px text around it rather than Kendo's 14px default. WI 2646 widened this from "inside a card" to the whole product. `:where()` again, and it is load-bearing: `.evaryst-btn` compiles to (0,2,0) under CSS isolation, this rule was also (0,2,0), and theme-2026.css loads LAST — so at full weight it would win every tie and force every EvarystButton in the product to 13px, overriding the 0.875rem/0.75rem size ramp the wrapper defines. At (0,1,0) the wrapper keeps its sizing and this stays what it should be: the default for Telerik controls nothing else has styled. Kendo's own defaults are also (0,1,0) but load earlier, so we still beat those. */ .evaryst-theme-2026 :where(.k-button, .k-input, .k-picker) { font-family: var(--ev-font-body); font-size: var(--ev-font-size-body-lg); } /* The default link treatment. Wrapped in `:where()`, which contributes NO specificity, so the whole selector weighs the same as a bare class (0,1,0) — deliberately weak. Any component that styles its own links keeps winning, which is what a default should do. That matters now the theme is on (WI 2646). Blazor CSS isolation compiles a scoped rule to `.career-company-name[b-xyz]` = (0,2,0); without `:where()` this rule would be (0,2,1) and OUTRANK it, painting the career portal's white-on-dark header and footer links brand blue and underlining them on hover. Same trap for any other component that sets a link colour against a coloured background. `.ev-item-link` stays excluded as well: it is only (0,1,0) itself, so a bare tie would be settled by source order — correct today, silently wrong the moment the rules are reordered. */ .evaryst-theme-2026 :where(a:not(.ev-item-link)) { color: var(--ev-brand-primary); text-decoration: none; } .evaryst-theme-2026 :where(a:not(.ev-item-link)):hover { text-decoration: underline; } /* --- Dashboard page shell ------------------------------------------------ */ .ev-dashboard { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--ev-space-12); padding: var(--ev-space-12); height: 100%; overflow-y: auto; } .ev-dashboard-column { display: flex; flex-direction: column; gap: var(--ev-space-12); min-width: 0; } /* The design is drawn at 1366px. Below the Telerik `md` breakpoint the two columns stack rather than squeezing two 571px cards into the viewport. */ @media (max-width: 991px) { .ev-dashboard { grid-template-columns: 1fr; } } /* --- Shared widget primitives -------------------------------------------- */ /* Company / group heading inside a card (Figma "Section header"): 11px semibold caps in muted grey, with the disclosure chevron ahead of it. */ .ev-group-header { display: flex; align-items: center; gap: var(--ev-space-6); font-size: var(--ev-font-size-label); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ev-text-muted); line-height: var(--ev-line-height-tight); margin-bottom: var(--ev-space-4); } /* Job title inside a group (Figma "Group name"): 12px semibold, primary. */ .ev-group-name { font-size: var(--ev-font-size-body); font-weight: 600; color: var(--ev-text-primary); line-height: var(--ev-line-height-tight); } /* Status line under a job (Figma "Subtitle"): 12px semibold, indented. */ .ev-subtitle { font-size: var(--ev-font-size-body); font-weight: 600; color: var(--ev-text-secondary); line-height: var(--ev-line-height-tight); padding-left: var(--ev-space-12); margin-top: var(--ev-space-4); } /* Leaf rows — candidate names. Indented under their subtitle. */ .ev-item-list { display: flex; flex-direction: column; padding-left: var(--ev-space-24); } .ev-item { font-size: var(--ev-font-size-body); line-height: var(--ev-line-height-tight); color: var(--ev-text-primary); padding: var(--ev-space-2) 0; } .ev-item-link { color: var(--ev-text-primary); cursor: pointer; border-radius: var(--ev-radius-xs); } .ev-item-link:hover { color: var(--ev-brand-primary); text-decoration: none; } /* Trailing context on a leaf row (the job, or "Company · Job") — present so the flat views still say where a candidate sits without a second column. */ .ev-item-secondary { color: var(--ev-text-muted); margin-left: var(--ev-space-6); } /* Two-up layout for the job/company blocks inside a card. Uses CSS columns so blocks flow into the second column at whatever height they happen to be, which is how the design's ragged two-up grid behaves. */ .ev-two-up { columns: 2; column-gap: var(--ev-space-12); } .ev-two-up > * { break-inside: avoid; margin-bottom: var(--ev-space-12); } @media (max-width: 1279px) { .ev-two-up { columns: 1; } } /* Change View, in the Candidates in Process card header. It was a solid green button on the old dashboard (rule removed from app.css with this change — Candidates in Process is its only user); in a 2026 card it reads as a quiet secondary control. */ .change-view-button.k-button, .change-view-button.k-button:focus, .change-view-button.k-button:active { background-color: transparent; border-color: var(--ev-border-default); color: var(--ev-text-secondary); } .change-view-button.k-button:hover { background-color: var(--ev-surface-hover); border-color: var(--ev-border-default); color: var(--ev-text-primary); } /* --- Card-hosted table (My Jobs) ----------------------------------------- */ .ev-table { width: 100%; border-collapse: collapse; font-size: var(--ev-font-size-body-lg); } .ev-table th { text-align: left; font-weight: 600; color: var(--ev-text-muted); padding: var(--ev-space-8) var(--ev-space-12); border-bottom: 1px solid var(--ev-border-default); white-space: nowrap; } .ev-table td { padding: var(--ev-space-8) var(--ev-space-12); border-bottom: 1px solid var(--ev-border-default); color: var(--ev-text-primary); } .ev-table tbody tr:last-child td { border-bottom: none; } .ev-table tbody tr:hover { background-color: var(--ev-surface-hover); } .ev-table .ev-table-numeric { width: 72px; text-align: left; } /* --- States -------------------------------------------------------------- */ .ev-empty, .ev-loading, .ev-error { font-size: var(--ev-font-size-body-lg); color: var(--ev-text-muted); padding: var(--ev-space-8) 0; } .ev-error { color: #b42318; } .ev-loading { display: flex; align-items: center; gap: var(--ev-space-8); } /* --- Status pills (WI 2647) --------------------------------------------- Global rather than scoped because the same pill has to read identically wherever a candidate status is shown. The tone classes carry only the two colours; everything about the pill's shape lives here once. */ .ev-pill { display: inline-flex; align-items: center; /* badge/11-semibold */ font-size: var(--ev-font-size-label); font-weight: 600; line-height: var(--ev-line-height-tight); padding: 0 var(--ev-space-8); border-radius: var(--ev-radius-xs); white-space: nowrap; /* The tenant's own status titles run long ("Submitted to Client"), and a grid cell is narrow. Truncate inside the pill rather than letting it push the column wider. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Unknown or deleted status id — the title still shows, in a tone that claims nothing about where the candidate is. Without this the pill would render with no background at all and read as a missing value rather than an unrecognised one. */ .ev-pill-neutral { background-color: var(--ev-surface-hover); color: var(--ev-text-secondary); } .ev-pill-success { background-color: var(--ev-status-success-bg); color: var(--ev-status-success-text); } .ev-pill-danger { background-color: var(--ev-status-danger-bg); color: var(--ev-status-danger-text); } .ev-pill-1 { background-color: var(--ev-progress-1-bg); color: var(--ev-progress-1-text); } .ev-pill-2 { background-color: var(--ev-progress-2-bg); color: var(--ev-progress-2-text); } .ev-pill-3 { background-color: var(--ev-progress-3-bg); color: var(--ev-progress-3-text); } .ev-pill-4 { background-color: var(--ev-progress-4-bg); color: var(--ev-progress-4-text); } .ev-pill-5 { background-color: var(--ev-progress-5-bg); color: var(--ev-progress-5-text); } /* The pill is also the control that CHANGES the status, so it has to look clickable. Applied only where the cell is editable — a read-only pill keeps the default cursor. */ .ev-pill-interactive { cursor: pointer; } .ev-pill-interactive:hover { filter: brightness(0.96); } /* --- Field grid (WI 2647) ------------------------------------------------ The candidate header's field area. The 2026 design drops the bordered PERSONAL INFORMATION / COMMUNICATION boxes and lays every field out on one grid, so the labels line up across the whole row rather than per box. 12 columns at a fixed track width, because the fields are drawn at set widths (City is wider than ST, ST is wider than Zip) and a fractional grid would rescale them with the viewport. Cells opt into a span; anything that does not fit wraps to the next line, which is what lets the six non-candidate views reflow instead of leaving holes where a Candidate field used to be. */ .ev-field-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ev-space-8) var(--ev-space-12); align-content: start; min-width: 0; } /* No padding of its own: the header places several of these side by side, and per-grid padding would double at every seam. The containing area pads once. */ .ev-field-grid > * { min-width: 0; } .ev-span-1 { grid-column: span 1; } .ev-span-2 { grid-column: span 2; } .ev-span-3 { grid-column: span 3; } .ev-span-4 { grid-column: span 4; } .ev-span-5 { grid-column: span 5; } .ev-span-6 { grid-column: span 6; } .ev-span-7 { grid-column: span 7; } .ev-span-8 { grid-column: span 8; } .ev-span-9 { grid-column: span 9; } .ev-span-10 { grid-column: span 10; } .ev-span-11 { grid-column: span 11; } .ev-span-12 { grid-column: span 12; } /* Field labels inside the grid take the design's label/11-medium. Scoped to the grid rather than applied to `.evaryst-textbox-label` outright: that class is on every EvarystTextBox in the product, and this story is not a licence to re-size all of them. `position: static` is the load-bearing line. app.css draws this label as a floating NOTCH — absolutely positioned at top:-8px, sitting on the input's border with a white gradient behind it to punch a hole in the line. The 2026 design puts the label above the field instead, so it has to come out of absolute positioning first; without that, restyling its type changes the notch's font and nothing else, and `margin-bottom` below is silently inert. */ .ev-field-grid .evaryst-textbox-label { position: static; display: block; background: none; padding: 0; font-size: var(--ev-font-size-label); font-weight: 500; line-height: var(--ev-line-height-tight); margin-bottom: var(--ev-space-2); } /* Colour is split out and wrapped in `:where()` so this rule weighs (0,1,0) — deliberately LIGHTER than `.evaryst-textbox-wrapper--error .evaryst-textbox-label` (0,2,0) in app.css. Folded into the rule above it would load later, win the tie, and paint an over-limit field's label grey instead of red — quietly removing the only signal that a value is too long. */ .ev-field-grid :where(.evaryst-textbox-label) { color: var(--ev-text-secondary); } /* Technical and Soft skills wrap their dropdown in an EvarystTooltip, whose target span is `display: inline-block` — it shrinks to its content, so those two fields would sit narrower than every other cell on the row instead of filling it as the design draws them. Same class of trap as the notched label above: a wrapper's own default quietly defeating the grid. */ .ev-field-grid .evaryst-tooltip-target { display: block; } /* The address triple (City / ST / Zip) is one cell on the outer grid carrying its own three tracks, rather than three cells competing with Technical and Soft skills for the same twelve columns. Twelve columns cannot express the design's 134/56/52 split — ST rounds down to a single ~30px track, too narrow to show a state code — and widening it there would have to come out of City. Nested, the proportions are the design's and the outer row stays even. */ .ev-field-subgrid { display: grid; grid-template-columns: 5fr 2fr 2fr; gap: var(--ev-space-8); min-width: 0; } .ev-field-subgrid > * { min-width: 0; } /* Caption above a panel (FOLLOW UPS). Figma label/11-semibold-caps. The tracking is 0.05em, NOT the 5 the Figma variable reports. That 5 is a percentage — at 11px it is roughly half a pixel. Taking it literally as 5px spread ten characters across ~130px and made the caption read as a stretched-out banner rather than a label. */ .ev-caption { font-size: var(--ev-font-size-label); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ev-text-secondary); line-height: var(--ev-line-height-tight); } /* A control drawn in the design that has nothing behind it yet (WI 2647: the document and gear buttons in the person header; WI 2646's notification bell set the precedent). Muted with no cursor change and no hover response, so it reads as "not available" rather than as a control that was clicked and failed. NOT pointer-events:none — the tooltip that explains the inertness is triggered by hover, so suppressing pointer events would remove the one thing telling the user why nothing happens. There is simply no handler attached. */ .ev-inert { color: var(--ev-text-placeholder); cursor: default; } /* --- Actions menu popup (WI 2647) --------------------------------------- Global, not scoped to PersonActionsMenu: Telerik renders an opened menu group into a popup container at the end of the document, so it is not a DOM descendant of the component and a ::deep rule would compile to a selector that never matches. */ .person-actions-menu-item { display: inline-flex; align-items: center; gap: var(--ev-space-8); } .person-actions-menu-icon { width: 14px; text-align: center; color: var(--ev-text-muted); } /* --- Dropdown caret (WI 2647) -------------------------------------------- Kendo draws its dropdown arrow as a filled triangle; the 2026 design uses a thin chevron. Global on purpose — the design's chevron is the product's caret, and leaving it per-page would mean two different arrows on screen at once. Font Awesome 7 Pro is already loaded (the kit link in App.razor), so the replacement is the same glyph family every other icon here comes from — no inline SVG, no asset to ship. Mechanism: blank Kendo's own glyph, then draw ours in its place. Both the SVG icon (Telerik's default) and the legacy font icon are covered, because which one renders depends on the component's IconType and we do not set it consistently. theme-2026.css loads after the Kendo theme, so a plain class selector is enough to win. */ .evaryst-theme-2026 .k-svg-i-caret-alt-down > svg { display: none; } .evaryst-theme-2026 .k-i-caret-alt-down::before, .evaryst-theme-2026 .k-svg-i-caret-alt-down::before { content: "\f078"; font-family: "Font Awesome 7 Pro"; /* 300 = light, matching the stroke weight of the icons around it. */ font-weight: 300; font-size: 11px; line-height: 1; color: var(--ev-text-placeholder); display: inline-flex; align-items: center; justify-content: center; } /* The caret's button cell is a Kendo control in its own right; the design gives it no fill or border of its own, so it reads as part of the field rather than a button stuck to its end. */ .evaryst-theme-2026 :where(.k-input-button, .k-select) { background: none; background-image: none; border: none; box-shadow: none; }