/* Work Sans, self-hosted (wwwroot/fonts/work-sans/) instead of loaded from fonts.googleapis.com/fonts.gstatic.com - avoids the GDPR concern around Google Fonts transmitting visitors' IP addresses to Google without consent (a live legal issue for German sites specifically, see the LG München ruling), and means it doesn't need to go through the cookie-consent banner at all. Both files are variable fonts covering the full 400-700 weight range in one file each (that's genuinely how Google itself serves this specific family/version - not a mistake), so two @font-face rules with a font-weight range is correct here, not one rule per weight. */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/work-sans/work-sans-normal.woff2') format('woff2'); } @font-face { font-family: 'Work Sans'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/fonts/work-sans/work-sans-italic.woff2') format('woff2'); } .dev-version-badge { position: fixed; right: 8px; bottom: 8px; background: rgba(36, 26, 32, 0.75); color: #fff; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace; font-size: var(--fs-xs); padding: 0.2rem 0.5rem; border-radius: 3px; z-index: 1000; pointer-events: none; } :root { /* Palette confirmed 2026-09-17 from the theme switcher, replacing the greener off-whites this site shipped with (--paper #e8edec, --surface-soft #f3f6f5, --tile #f3f6f5). */ --paper: #ffffff; --surface: #ffffff; --ink: #241a20; /* Brand color (2026-08) - the site's wine palette uses the exact magenta sampled from the Particip logo (--logo-magenta), confirmed as the final brand color. Old pre-magenta values kept below, commented out, in case of a future revert. --wine-original: #422139; --wine-deep-original: #231820; --wine-soft-original: #f0d3e8; */ --wine: var(--logo-magenta); --wine-deep: #50394a; --wine-soft: #f7dcf1; /* Hover state for magenta text: --wine (#974e83) darkened ~17% at the same hue. Distinct from --wine-deep, which buttons use for their hover background - that one is both darker and desaturated, which reads as a hue change rather than a darkening when applied to text. */ --wine-hover: #7d416d; --surface-soft: #fcfafa; /* The tiles and list entries a reviewer is choosing a palette for: reference and job rows, the sector tiles, Featured Projects tiles, the Home services teaser cards, affiliated company tiles, the account form cards, and the Jobs application panel. Two card types are deliberately NOT here and stay on --surface: the contact form card and the contact office cards. (A third, the Services page's quick-fact cards, was in this list until those were removed on 2026-09-17.) They were included at first and it was too much - changing one colour repainted the Company and Contact pages' own furniture along with the actual content tiles. The office card is also what holds the Google Maps consent gate, so moving it read as the map changing colour. One token for the rest because they are meant to read as one family - before this they were split across three treatments (most on white, the affiliated tiles on the soft band tint, and the reference/job rows with no background at all, showing the page through), which is why a single "tile colour" did not previously exist to change. Now the same #ffffff as --paper and --surface, so tiles carry no colour contrast against the page at all and their border plus --shadow does the entire job of separating them - worth remembering before softening either, and the reason .service-detail-row was given a border of its own when it could otherwise collide with its band. */ --tile: #ffffff; /* An expanded tile or row. The token stays separate from --tile so the two CAN differ, but in the confirmed palette they do not - both are #ffffff - and that has one real consequence, accepted rather than overlooked: of its four consumers, three (.highlight-panel-open, .service-detail-panel-open, .affiliated-panel-open) also carry a --wine left border and a heavy shadow, so they still read as open; .reference-row-open is background-only, so an expanded reference or job row is now distinguished solely by the content it reveals. Give the two tokens different values again to restore that cue. */ --tile-open: #ffffff; /* Navbar and footer. Its default is the literal value of Bootstrap's own --bs-tertiary-bg, which is what the bg-body-tertiary class those two elements used to carry resolved to - so introducing this token changed nothing on screen. It exists because those two surfaces are the only ones the page/band background tokens never reached, and a reviewer needs to be able to try a colour for them too. */ --chrome: #f8f9fa; --slate: #6b6069; --logo-grey: #3d4f51; --logo-magenta: #974e83; --line: #d5dede; --magenta: var(--logo-magenta); /* Text tones for the three --magenta bands - the world map, the Services framework-contract lots, and Company's Facts & Figures. Introduced 2026-09-23, when an audit found SIX literal light values spread across those bands with no token behind any of them, three of them near-identical whites doing the same job. This file had already predicted it: the .stat-label comment says "if a fourth appears, introduce a token", and by then there were three surfaces and six tones. Four roles, measured against --magenta #974e83: --band-heading 5.28:1 headings, stat figures, lot numbers, panel titles, links --band-text 4.75:1 body copy, and the colour the bands themselves set --band-muted 2.25:1 supporting text - labels, meta, empty and loading states --band-hover 5.62:1 interactive hover, one step above --band-heading Three values moved when they were folded into these roles, all of them upward, so every change improved contrast rather than trading it: .map-head p 3.22 -> 4.75, .map-projects-see-all 4.59 -> 5.28, and Company's band section heading 4.75 -> 5.28, that last one being the real inconsistency the audit was looking for - two section headings on two magenta bands were using different whites. --band-muted is deliberately the lowest and stays that way: it is supporting text by definition. It is NOT for controls - see .map-projects-close, which was in this tier and measured 2.01:1 until it was moved to --band-text. Note .world-map-tooltip keeps a literal #fdf6f9 BACKGROUND. Same value, unrelated role: it is a light surface behind dark text rather than band text, so it must not follow these if they are ever retuned. */ /* The small-text scale. Everything below 1rem goes through these four steps. Before 2026-09-23 there were TWELVE distinct values under 1rem, each picked at its own call site, and three clusters of them could not be told apart: .highlight-link at 0.87rem beside .affiliated-card-registered at 0.875rem is 0.08px at a 16px root, and 0.78 / 0.8 / 0.82 sat within 0.64px of each other. That is not a scale, it is twelve independent guesses, and the cost is that nobody adding a rule knows which value to reach for. The steps are chosen so no existing value moved more than 0.64px, which is why they are not round numbers - 0.87 rather than 0.875 because .highlight-link's is the documented "majority size", and 0.8 rather than 0.81 because four rules already sat there. Largest shifts: .highlight-chip 0.68 -> 0.72 and .map-project-meta 0.76 -> 0.8, both up by 0.64px. One of these carries earlier reasoning and is worth checking rather than assuming: .reference-row-code was deliberately raised 0.78 -> 0.85 so it stayed legible at its knowingly-low 2.10:1 contrast. --fs-md is 0.87, i.e. very slightly LARGER, so it moves with that reasoning rather than against it. Sizes at or above 1rem are deliberately not in this scale: they are headings and leads, which take Bootstrap's own display-* and .lead rather than a value of ours. */ --fs-xs: 0.72rem; --fs-sm: 0.8rem; --fs-md: 0.87rem; --fs-lg: 0.95rem; --band-heading: #fdf6f9; --band-text: #f4e9ee; --band-muted: #cf93ab; --band-hover: #ffffff; --shadow: 0 1px 2px rgba(36, 26, 32, 0.05), 0 12px 28px -18px rgba(36, 26, 32, 0.32); /* Shared by every place the site draws a title over a photograph - the page heroes and the services sector tiles. One definition rather than two copies, for the same anti-drift reason as --company-divider-gap: "the same treatment" is a claim that has to stay true, and nothing checks two identical gradients against each other. The stops approximate an ease-out curve rather than a straight ramp, because a linear alpha fade terminates visibly and reads as a band laid over the image. See ADR 0031 for why the scrim is this weak: most of the legibility work belongs to the type's own shadow, which follows the letterforms instead of veiling the picture. Those shadows are NOT shared - they scale with the type, and the tile's are roughly a third of the hero's. */ --photo-scrim-stops: rgba(36, 26, 32, 0.40) 0%, rgba(36, 26, 32, 0.29) 15%, rgba(36, 26, 32, 0.20) 30%, rgba(36, 26, 32, 0.12) 45%, rgba(36, 26, 32, 0.064) 60%, rgba(36, 26, 32, 0.025) 75%, rgba(36, 26, 32, 0.004) 90%, rgba(36, 26, 32, 0) 100%; /* Not pure #fff: nothing in a photograph is fully white across an area of any size, so #fff puts the type outside the image's tonal range and reads as a cut-out laid on top. */ --photo-title-color: rgba(252, 247, 243, 0.92); --font-display: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace; /* Kept in sync with the navbar's real rendered height by site.js (it changes with the mobile hamburger menu open/closed, viewport width, etc.) so anything that scrolls itself into view can offset for the sticky navbar sitting on top of it. */ --navbar-height: 0px; /* Gap between a vertical rule and the text on either side of it. A single value used by both columns so the two sides cannot drift apart, and reused below lg as the vertical gap once the columns stack - one value for the one conceptual separation, whichever direction it happens to run in. Introduced for Corporate Objectives, which no longer has a rule at all (its list was dropped on 2026-09-17); the Facts & Figures divider is the consumer now. */ --company-divider-gap: 2.5rem; } /* .home-intro-section is gone (2026-09-22). Home rendered its intro as a section of its own with padding-top: 7rem - the room the retired introHeading had occupied, tuned by measuring the rendered page (5.5rem read as too close to the image, 8.5rem as too much). It was reported as simply too big a gap, and the fix was structural rather than a smaller number: homePage.cshtml now passes the intro through HeroBanner as every other page does, so it takes that partial's own .hero-banner-content padding and the two cannot drift apart again. Worth keeping from the tuning that is now discarded, in case a bespoke gap is ever wanted here again: the obvious reference does NOT work, because the Featured Projects heading sits only 76px below the intro's bottom edge while reading as further away - a band's own background change supplies separation that a boundary under a full-bleed image does not get. */ /* The navbar and the footer, which are deliberately one rule rather than two: they are meant to be the same colour as each other always, so there is nowhere for them to drift apart. Replaces the bg-body-tertiary class both elements used to carry - swapped out rather than overridden, so the result doesn't depend on this stylesheet loading after Bootstrap's. */ .site-chrome { background-color: var(--chrome); } /* Sticky footer: on pages shorter than the viewport, main grows to fill the remaining space so the footer always sits flush against the bottom of the browser window instead of floating above it with page background visible underneath. */ body { background-color: var(--paper); color: var(--ink); font-family: var(--font-body); display: flex; flex-direction: column; min-height: 100vh; } body > main { flex: 1 0 auto; } /* Bold text authored in a rich text field renders at normal weight inside .lead, and the reason is not obvious from either rule on its own. Bootstrap sets .lead to font-weight: 300 and b/strong to font-weight: bolder - and 'bolder' is *relative*, not absolute: against an inherited 300 the CSS weight table resolves it to 400. So an editor's bold comes out one step heavier than its surroundings instead of bold, which reads as having done nothing at all. An absolute weight fixes it. Scoped to .lead rather than to one page because eleven views use that class and most of them render editor-authored rich text, so every one of them has the same latent bug the first time somebody bolds a line. */ .lead strong, .lead b { font-weight: 700; } /* Every element that gets programmatically scrolled into view (expanding a featured project or a reference row) needs this, or the sticky navbar just overlaps the top of it once the scroll lands. */ .highlight-card, .highlight-panel, .reference-row, #references-results, #references-top, #featured-projects, #contact-legal .accordion-item, .service-detail-tile, .service-detail-row, .service-detail-panel, .affiliated-tile, .affiliated-panel, #account-confirmation { scroll-margin-top: calc(var(--navbar-height) + 12px); } /* The whole tile is a click target, not just its Read more button - see bindExpandGrid in site.js - so the cursor has to say so. A card that expands on click while showing a default arrow gives a visitor nothing to discover it by, which was the substance of the complaint this answers. The button itself stays: it is the visible hint AND the only keyboard- and screen-reader-operable control, neither of which a clickable
is. */ .highlight-card, .service-detail-tile, .affiliated-tile { cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .navbar-brand { font-family: var(--font-display); font-weight: 600; color: var(--wine) !important; } /* Bootstrap's own .nav-link.active only changes colour, which against this navbar's palette is too slight to read as "you are here" - so the weight carries it, with the wine underline as a second, non-colour-dependent cue. Deliberately not applied to .topbar-link items (LinkedIn, newsletter, Login/Register): those are actions rather than places in the site. */ .navbar-nav .nav-link.active { font-weight: 600; color: var(--wine); box-shadow: inset 0 -2px 0 var(--wine); } /* The current page's name beside the burger, below lg only - see master.cshtml for why it uses the node name rather than the nav label. Truncates rather than wrapping or growing, so a long page name can never push the toggler off the edge of a narrow screen. */ .navbar-current-page { flex: 1 1 auto; min-width: 0; margin: 0 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--wine); } /* The row/centring is scoped to lg and up on purpose. These items live inside the navbar collapse, and Bootstrap's own .navbar-expand-lg rules already lay .navbar-nav out as a column below lg and a row at lg - so an unconditional flex-direction: row (which is what this used to be) forced all three onto one line inside the opened mobile menu, where .topbar-link's white-space: nowrap then guaranteed they ran off the side of a phone screen. Leaving the direction to Bootstrap makes them stack as a list on mobile with no extra rules. Everything that spaces these items apart is scoped to lg and up for the same reason, and it is easy to get wrong: below lg they are rows in the same stacked list as the main nav items above them, so anything extra here misaligns them against those. Two things did. The gap became vertical space between items that the main list does not have, and .topbar-link's own padding overrode Bootstrap's .navbar-nav .nav-link (which is 0.5rem 0 - zero horizontal), so these four sat 8px further right than every item above them and were packed tighter. Both now apply only where they are actually wanted, in the inline desktop row. */ .topbar-inline { gap: 0; } @media (min-width: 992px) { .topbar-inline { flex-direction: row; align-items: center; margin-left: 0.5rem; gap: 0.25rem; } .topbar-link { padding: 0.25rem 0.5rem; } } .topbar-link { color: var(--slate); white-space: nowrap; } .topbar-link:hover { color: var(--wine); } .topbar-language-switcher .dropdown-toggle { font-size: 1rem; line-height: 1; padding-left: 0.4rem; padding-right: 0.4rem; } /* Scoped to these specific navbar icons (not a blanket .bi-globe2 rule) since that same icon class is also used elsewhere, e.g. JobCard.cshtml's location indicator, which shouldn't turn magenta too. */ .topbar-link .bi-linkedin, .topbar-language-switcher .bi-globe2 { color: var(--wine); } /* Bootstrap's .dropdown-menu sets --bs-dropdown-min-width: 10rem and reads it back via min-width: var(...) on the same selector - way more than the short "EN"/"FR" codes it holds now. Overriding the min-width property alone wasn't enough (Popper/Bootstrap's own JS can still size the menu against that custom property), so reset the variable itself too. */ .language-dropdown-menu { --bs-dropdown-min-width: 0rem; min-width: 0 !important; width: max-content; padding: 0.25rem; } .language-dropdown-menu .dropdown-item { text-align: center; padding: 0.25rem 0.75rem; } .topbar-language-switcher .dropdown-toggle::after { vertical-align: 0.15em; } .topbar-language-switcher .dropdown-menu { font-size: var(--fs-md); min-width: 8rem; } .topbar-language-switcher .dropdown-item.active { background: var(--wine-soft); color: var(--wine); } .btn-primary { background-color: var(--wine); border-color: var(--wine); } .btn-primary:hover, .btn-primary:focus { background-color: var(--wine-deep); border-color: var(--wine-deep); } .btn-outline-secondary { color: var(--wine); border-color: var(--wine); } .btn-outline-secondary:hover { background-color: var(--wine); border-color: var(--wine); } .page-item.active .page-link { background-color: var(--wine); border-color: var(--wine); } .page-link { color: var(--wine); } /* ---------- shared reference styling ---------- */ .reference-card-title { color: var(--wine); } .reference-card-meta li { line-height: 1.6; } .reference-card-description p:last-child, .reference-card-description ul:last-child { margin-bottom: 0; } /* Job and reference descriptions come from the Promt API, not from this CMS, and the job ones arrive carrying inline styles: ``, twelve spans per language on the jobs page. #212529 is Bootstrap's default body colour rather than this site's --ink #241a20, so job descriptions were the one place on the site where body text was not --ink - subtle, since both are near-black, but real and entirely unintended. !important is necessary and is not the usual code smell. An inline style outranks any class selector without it, and the rule this file states elsewhere - that inline styling should be removed at source rather than fought - applies to content WE author, where the fix is the Tiptap configuration. This content is served by an external API this repo does not own, so there is no source to fix it at. .download-link already does exactly this, for the same reason. The second rule keeps links out of it. There are no anchors in any description today, checked against all ten live listings, but that content is authored upstream and could gain one at any time, at which point a blanket override would silently paint it --ink and it would stop looking like a link. Stated explicitly rather than with :not(a *), which is a Selectors 4 complex :not() and buys nothing here. Deliberately colour ONLY. The same spans also force font-family: system-ui and font-size: 16px, which is the more visible defect - the jobs page renders its descriptions in a different typeface from the rest of the site - but that was not part of this change. One more declaration in the first rule closes it if wanted. */ .reference-card-description, .reference-card-description * { color: var(--ink) !important; } .reference-card-description a, .reference-card-description a * { color: var(--wine) !important; } /* Moves the spam honeypot out of sight without display:none, which some bots deliberately skip - see Partials/SpamHoneypot.cshtml for the whole arrangement. Off-screen rather than zero-size so a field left focusable by accident still cannot be typed into visibly. */ .spam-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- References page list rows ---------- */ /* Frames every list row on both the References and Jobs pages as its own card, so adjacent listings read as distinct entries rather than one continuous list. Job rows carry .reference-row alongside .job-row (see JobCard.cshtml), so this one rule is literally the same frame on both pages rather than a copy per page - the two were asked to look identical, and duplicating five declarations is how they would silently drift the next time one side is nudged. References used to be bottom-border-only here (padding-bottom + border-bottom) while only Jobs had the frame; that difference is what this replaced. The 1px --line border alone read as too faint to separate adjacent listings, so the frame is reinforced with --shadow - the same elevation token .contact-office-card and .service-detail-row already use to lift a card off its background. Chosen over a heavier or darker border because the palette has no mid-grey between --line and --slate, and 2px of a very light grey adds bulk without much more definition. */ .reference-row { border: 1px solid var(--line); border-radius: 6px; padding: 0.85rem 1rem; margin-bottom: 0.6rem; box-shadow: var(--shadow); } /* Reference and job rows had no background of their own until the --tile token existed: they showed the page through, and an expanded row was distinguished purely by gaining a tint. Now both states have a fill, which is the one place where the default palette is not a no-op - a closed row looks slightly different than it did. */ .reference-row { background: var(--tile); } /* An expanded row keeps the full frame above and only changes this background. It used to also set its own radius/padding/margin plus a border-bottom: none - all of which existed to work around the old bottom-border-only collapsed style, and would now either fight the frame or punch a hole in its bottom edge. */ .reference-row-open { background: var(--tile-open); } .reference-row-header { gap: 1rem; align-items: flex-start; } /* Same reasoning as .highlight-panel-open above: a 125px thumbnail plus a 1rem gap leaves too little room for the title and metadata beside it on a phone, so they go underneath instead. The image widens to fill the row once it has nothing sitting next to it - at 125px it would read as a stray postage stamp above the text. */ @media (max-width: 575.98px) { .reference-row-header { flex-direction: column; } .reference-row-img { width: 100%; height: 180px; } /* Source order would drop the code below the text once the header is a column. order keeps it at the top, where the auto margin now right-aligns it on the cross axis instead. */ .reference-row-code { order: -1; } } .reference-row-img { width: 125px; height: 94px; object-fit: cover; border-radius: 4px; } .reference-row-body { flex: 1 1 auto; min-width: 0; } /* The project code, sitting top right of a reference row. References only: JobCard shares .reference-row-header but renders no code, so this is its own class rather than anything on the shared one. flex-shrink: 0 with nowrap keeps it intact - it is an identifier, and one that has wrapped or been truncated is worse than not showing it; the body beside it carries min-width: 0, so the title wraps instead. */ /* Appearance only, shared by the References row's code (top right of its header) and Featured Projects' own (top right of the expanded panel). One rule rather than a copy per page, because the two were asked to look identical - the same reasoning as the shared .highlight-link and .reference-row frame, both of which this file records as having drifted when duplicated. Placement is deliberately NOT here: each site positions its own, below. */ .reference-row-code, .highlight-panel-code { /* Raised from 0.78rem on 2026-09-18, in the same pass that made the colour much paler and for that reason: at 2.10:1 the code needs the size back to stay readable, and the two levers pull against each other rather than both meaning "subtle". Colour is doing the receding here; size is only keeping it legible while it recedes. */ font-size: var(--fs-md); letter-spacing: 0.03em; /* Lighter than the --slate this used to take, asked for on 2026-09-18 so the code recedes behind the title and meta it sits beside. Measured on --slate's own hue against the white tile: --slate was 6.00:1, an AA-preserving 4.54:1 (#7e737c) was not perceptibly different, 3.01:1 (#9b9299) still read as too strong, and this is 2.10:1 - a third of the original. For scale, --line, the token used for 1px borders, is 1.37:1, so there is not much room below this before the code stops being readable at all. **That is below WCAG AA's 4.5:1 for small text**, accepted deliberately here: the code is a supplementary identifier rather than content anyone needs to read to use the page, and it duplicates nothing that is only available here. Don't copy this value onto anything load-bearing. Not a token, because nothing else wants this tone yet; make it one if a second consumer appears. Letter-spacing is the one lever still untouched: dropping the 0.03em would soften the code further without costing any legibility, which is what to reach for before darkening this again. */ color: #b8b1b6; white-space: nowrap; } /* Pushed to the right of the header by margin-left: auto, and never allowed to shrink or wrap - a half-shown identifier is worse than none. */ .reference-row-code { margin-left: auto; flex-shrink: 0; } /* Top right of the open panel, in flow rather than absolutely positioned: it is the third item on the panel's first flex line, and the headline before it is flex: 1 1 0%, so the headline absorbs the free space and this lands hard right. align-self overrides the panel's own align-items: center, which would otherwise float it against the middle of the image. Doing it this way means the layout reserves room for the code, so a long title cannot run underneath - the failure the Services panel used to need a 7rem padding-right to avoid. Below the panel's mobile breakpoint the container becomes a column and this simply takes its own line under the title, left-aligned, which is the only sensible place for it there. */ .highlight-panel-code { flex: 0 0 auto; align-self: flex-start; } /* Jobs only: overrides .reference-row-header's shared align-items: flex-start so the title column and the meta column stretch to match each other's height, then the title column's own trailing content (location + the Read more footer, wrapped together in .job-row-footer-group) is pushed down to the bottom as one unit via margin-top: auto - the two columns end at the same height instead of the footer sitting wherever the title column's own (usually shorter) natural content happens to end. The auto margin goes on the wrapper, not on location or the footer individually - putting it on just one of two adjacent flex children each gets its own independent share of the free space, which can visibly separate them instead of moving them down together. */ .job-row-header { align-items: stretch; } .job-row-header .reference-row-body { display: flex; flex-direction: column; } .job-row-footer-group { margin-top: auto; } /* Jobs-only second column (References uses this space for .reference-row-img instead) - a fixed width with the title column's min-width: 0 above lets long job/project titles wrap normally instead of overflowing into or squashing this column. */ .job-row-meta { flex: 0 0 200px; padding-left: 1.25rem; border-left: 1px solid var(--line); margin-bottom: 0 !important; } .job-row-meta-item { margin-bottom: 0.35rem; } .job-row-meta-item:last-child { margin-bottom: 0; } .job-row-meta dt { color: var(--magenta); font-weight: 600; font-size: var(--fs-sm); } .job-row-meta dd { color: var(--bs-body-color); margin-bottom: 0; } /* The location line moved out of .job-row-meta - now its own row at the bottom of the card, directly above the Read more/expand button. */ .job-row-location { color: var(--bs-body-color); } /* There is deliberately no .job-row frame rule here any more: the card frame moved up to the shared .reference-row rule in the References section, and job rows pick it up through their own .reference-row class. Don't re-add a jobs-only copy - the two pages are meant to stay identical, and a second copy is exactly how they would drift. */ /* Mobile job card, reordered to title -> project -> meta -> location -> Read more. The source order can't produce that on its own: .job-row-meta is a sibling of .reference-row-body while the location and the Read more button (plus everything the button expands - the full description and the application form) sit *inside* that body, so `order` has no way to place the meta between them. Left alone, the state-of-assignment facts land after the entire expanded form on a phone. display: contents promotes the body's children into this header's own flex flow so all four can be ordered together. Two things carried over from the row layout had to go, both of them the traps documented in BACKLOG.md: .reference-row-header's own mobile rule already makes this a column, so flex-wrap: wrap would spill into a second column to the right rather than onto a new row, and the meta's flex-basis of 100% would mean 100% of the container's *height* rather than its width. Neither had visibly broken yet - this container's height is indefinite, so the wrap never triggered - but both were live hazards. */ @media (max-width: 575.98px) { .job-row-header { flex-wrap: nowrap; } .job-row-header .reference-row-body { display: contents; } .job-row-header .reference-card-title { order: 1; } .job-row-header .job-row-project { order: 2; } .job-row-footer-group { order: 4; } .job-row-meta { order: 3; flex: 0 0 auto; padding-left: 0; border-left: none; border-top: 1px solid var(--line); padding-top: 0.75rem; margin-top: 0.5rem !important; } } .reference-row-footer { display: flex; flex-direction: column; } /* Sets the Jobs page's application section apart from the job description above it, so it reads as its own sub-section rather than a continuation of the same content. It takes --tile against its containing row's --tile-open, which is the relationship it has always had (before the tokens existed it was --paper inside a --surface-soft row). The border is what makes that survive a palette change rather than depend on the two tokens differing - and in the palette confirmed 2026-09-17 they do NOT differ, both being #ffffff, so without it this panel rendered completely flush with its row and stopped reading as a section at all. Same collision, and the same fix, as .service-detail-row against its own band. */ .job-application-panel { background: var(--tile); border: 1px solid var(--line); border-radius: 3px; padding: 1.25rem 1.5rem; } /* Mirrors the featured-projects/service-tile pattern: once expanded, the description comes first and the toggle button drops below it, bottom-right, instead of sitting above the text it controls. reference-row-open is toggled by site.js on the show/hide collapse events, including a one-time sync on load for rows that start already expanded (a forceExpanded map link), so it stays the single source of truth for "is this row open" regardless of how it got that way. */ .reference-row-open .reference-card-toggle { order: 2; align-self: flex-end; } .reference-row-open .reference-row-footer .collapse { order: 1; } /* Bootstrap's .collapse is display:none until .show, so the filter panel has to be forced back open above lg - otherwise the desktop layout, which has no toggle button (d-lg-none), would show no filters at all. Only meaningful below lg, where the columns stack and the panel is genuinely collapsible. */ @media (min-width: 992px) { .filter-panel-collapse { display: block !important; height: auto !important; visibility: visible !important; } } .filter-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; padding: 0.5rem 0.75rem; } /* Shorter on phones, so there is page left either side of it to swipe on. A nested scroller traps the gesture: momentum stays inside it, so a thumb landing on the list scrolls the list and the page stays put until you lift and swipe again. At 220px this was a third of a phone screen and easy to land on by accident - worst on My Particip, whose three preference lists sit permanently in the page with no collapse in front of them. The scroller itself has to stay: the country list is 250 items (regions 53, keywords 27), so letting it flow would make the page enormous. This is a mitigation, not a cure - the cure is fewer items on screen, which the type-to-filter box above each list already provides. A fixed px rather than a vh: vh scales the wrong way, growing the list on the tall phones where the problem is already worst. And NOT overscroll-behavior: contain, which prevents the chaining that currently rescues you at the end of the list and would make this worse. */ @media (max-width: 575.98px) { .filter-list { max-height: 150px; } } .reference-active-filters:empty { display: none; } .reference-active-filters-label { font-size: var(--fs-sm); color: var(--slate); } .filter-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--wine-soft); color: var(--wine); border: none; border-radius: 999px; padding: 0.35rem 0.75rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .filter-chip:hover { background: var(--wine); color: #fff; } .filter-chip-clear { background: none; color: var(--slate); text-decoration: underline; text-underline-offset: 2px; } .filter-chip-clear:hover { background: none; color: var(--wine); } /* Replacement for the native file input's own widget, used by the My Particip upload and the job application form. The native "Choose file / No file chosen" text is drawn by the user agent and follows the BROWSER's language rather than the page's - it is not settable from HTML, CSS or a dictionary key, confirmed against MDN - so on a French or Spanish page it read as English for anyone whose browser is English. The real input is hidden and a