/* ── Typefaces ─────────────────────────────────────────────────────────────── Self-hosted, latin subset only (site/fonts/, 326 KB total). The cyrillic, greek and vietnamese subsets would have tripled that for glyphs this site never renders. font-src 'self' in the CSP already permits these, so no policy change was needed. Newsreader carries display type, Inter everything else. Arial was the previous answer everywhere, which is the typeface a browser falls back to when no decision has been made. */ @font-face{font-family:'Newsreader';src:url('../fonts/newsreader-400.woff2') format('woff2');font-weight:400;font-display:swap;} @font-face{font-family:'Newsreader';src:url('../fonts/newsreader-600.woff2') format('woff2');font-weight:600;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/inter-700.woff2') format('woff2');font-weight:700;font-display:swap;} /* ══════════════════════════════════════════════════════════════════════════ EPFL MDH DASHBOARD — MAIN STYLESHEET Whole-site styles. The MDH Context tab (#panel-mdh) has its own scoped stylesheet in mdh-map.css; everything else lives here. ── NEW HERE? READ THIS FIRST ───────────────────────────────────────────── This file styles the whole site. It is organised into 13 numbered sections (see the table of contents below). To find the styles for a page, jump to its section: e.g. the Actors page = Section 6, the landing page = Section 12. Two kinds of section: • SHARED sections style things used by MANY pages (design tokens, the header/nav, cards, filters, modals). Change these and it affects the whole site. Sections 1, 2, 3, 5, 9, 10 are shared. • PAGE sections style ONE page only. Sections 4, 6, 7, 8, 11, 12. How CSS "wins" (important): when two rules style the same thing, the one that comes LATER in this file wins. So order matters — do not reorder sections. To tweak a page without affecting others, edit that page's own section. Every colour comes from a named EPFL brand token defined in Section 1 (e.g. var(--groseille) for red). Never paste a raw hex like #B51F1F into a rule — use the token, or add a new token in Section 1. See feedback_epfl_color_palette. TABLE OF CONTENTS 1. Design tokens (:root) + a11y helpers [SHARED] colours, sizes 2. Base + header + top navigation [SHARED] the top bar 3. Panels + shared layout primitives [SHARED] page frames, section heads 4. Beyond EPFL panel [PAGE] the "Beyond EPFL" tab 5. Intro banners + Takeaways [SHARED+PAGE] tab intros; Takeaways tab 6. Actors status panel (cards, funnel, views) [PAGE] the "EPFL Actors" tab 7. Visual mapping (map + spider charts) [PAGE] the "Visual Mapping" tab 8. Projects / publications cards + badges [PAGE] the "Publications" tab 9. Filters (search, bars, colours, collapsibles)[SHARED] used by Actors + Publications 10. Charts + modals (bib, enlarge, researcher) [SHARED] pop-up dialogs 11. Funding panel [PAGE] the "Funding" tab 12. Landing page (hero, tiles, explore, footer) [PAGE] the home page 13. Responsive overrides [SHARED] phone/tablet tweaks ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. DESIGN TOKENS + A11Y ─────────────────────────────────────────────── */ /* The site colour palette + sizes, defined once as var(--name). Everything else references these. */ /* Visually hidden but exposed to screen readers (a11y labels). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :root { /* ── EPFL official brand palette ────────────────────────────────────────── Names + hexes are verbatim from the EPFL brand chart ("La marque EPFL | Couleurs"). These are the ONLY colours used on the site; every rule references one of these tokens. See feedback_epfl_color_palette. */ --rouge-suisse:#FF0000; /* Rouge suisse (Pantone 485, RAL 3020) */ --groseille:#B51F1F; /* Groseille (Pantone 3546, RAL 3000) */ --leman:#00A79F; /* Léman (Pantone 3272, RAL 5018) */ --canard:#007480; /* Canard (Pantone 7714, RAL 5025) */ --mont-rose:#F39869; /* Mont Rose */ --perle:#CAC7C7; /* Perle */ --vert-deau:#C2DDB0; /* Vert d'eau */ --rose:#ED6E9C; /* Rose */ --acier:#4F8FCC; /* Acier */ --soufre:#FBEE66; /* Soufre */ --carotte:#EC6608; /* Carotte */ --zinzolin:#5C2483; /* Zinzolin */ --chartreuse:#C8D300; /* Chartreuse */ --marron:#5B3428; /* Marron (Pantone Black 4 C) */ --ardoise:#453A4C; /* Ardoise (Pantone Black 5 C) — primary ink */ --taupe:#413D3A; /* Taupe (Pantone Black 7 C) */ /* Everything above is a real EPFL chart colour, used by name — there are NO colour aliases (no --navy/--ink/--red/--muted/--bg). Rules reference the chart token directly (Ardoise for dark ink/text, Rouge suisse for red). Plain white is written as #fff. --border is a translucent Ardoise hairline. */ --border:rgba(69,58,76,0.2); /* ── Secondary ink, two steps, both WCAG AA ─────────────────────────────── Muted label colours were written inline as rgba(69,58,76,a) at eight different alphas between .30 and .72. Measured over the site's own grounds (tools/dev/contrast.mjs), NONE of those clear 4.5:1 for normal text: .62 on white is 3.58:1 and .50 is 2.67:1, so the glossary sources, the table's sort headers, the closeness chips and the figure captions were all failing AA. .75 is the smallest alpha that passes on white, --ground, --ground-tint and the three washes at once (4.69 to 5.09:1). Two steps rather than eight is also the better typography: full Ardoise for primary text, --ink-body where a block should recede slightly, --ink-muted for labels and captions. Anything fainter than --ink-muted is decoration, not text, and must not carry information. --perle (#CAC7C7) is the exception: as a TEXT ground it needs .84. It is a rule and divider colour, so nothing sets type on it; if that changes, check the table in tools/dev/contrast.mjs first. */ --ink-body:rgba(69,58,76,.86); --ink-muted:rgba(69,58,76,.75); /* ── Text-safe equivalents of the light chart hues ──────────────────────── The EPFL chart is a FILL palette. Measured on white (tools/dev/contrast.mjs) Mont Rose is 2.21:1, Rose 2.87:1, Carotte 3.25:1, Acier 3.42:1 and Perle 1.68:1, all under the 4.5:1 AA floor for normal text. mdh-map.css already solved this for the three pillars with --mdh-m-txt / --mdh-d-txt / --mdh-hs-txt; these are the same idea for the rest, and the first three resolve to exactly those on-chart inks so the two sets cannot drift. Use for `color:`. Keep the base hues for fills, borders and dots, where the threshold is 3:1 and the identity matters more. */ --rose-txt:#D81B5F; /* Rose darkened, true hue 4.55 on --ground */ --acier-txt:#3373B1; /* Acier darkened, true hue 4.56 on --ground */ --mont-rose-txt:#5B3428; /* = Marron 10.68:1 */ --mont-rose-dark:#C04B0F; /* Mont Rose darkened, true hue, 4.53:1: text on a Mont Rose ground (owner, 2026-09-16) */ --carotte-txt:#B95006; /* Carotte darkened 4.58:1 on --ground */ --leman-txt:#007D77; /* Leman darkened 4.59:1 on --ground */ --perle-txt:#969494; /* Perle darkened 3.02:1, large text only */ /* ── Chrome grey, OFF the EPFL chart, by agreement ──────────────────────── The header, nav and footer were Ardoise (#453A4C) and #372E3C, both of which are violet: on a large flat area that cast reads as brownish rather than as ink, which is what it looks like at 12px in a table cell. This is a dark NEUTRAL grey, so the only chroma in the header band is the book spines. Declared once here rather than pasted, because every rule below references a token and an off-chart literal scattered through the file is how a palette stops being one. */ --chrome:#2A2A2D; /* ── FACET COLOUR KEY ───────────────────────────────────────────────────── One EPFL hue per facet type, used EVERYWHERE that facet appears: the chip in the shared filter, the pill on an actor card, the pill on a publication card, the tag in the actor modal. A reader who learns a colour once knows it on all three Mapping EPFL subtabs. Rose, Acier and Mont Rose are RESERVED for the three MDH pillars and are never spent on anything else - focus is the one facet whose VALUES carry the colour, because M, D and H are the site's primary axis and already wear these hues in the wordmark and the charts. 16 facets, 16 hues, from a 16-token palette. One pair shares, and it is a genuine parent/child pair: theme with subtopic. Everything else is its own colour. Affiliation took Rouge suisse on 2026-09-10, which frees Marron for Lab. Rouge suisse was the only palette token not on a facet, but it was not idle: it is also the site's link and accent red (project links, the details summary). It now does both jobs, so a red label and a red link sit on the same page. Chosen by the user over leaving Lab without a hue of its own. */ --f-focus-m:var(--rose); /* Misinformation */ --f-focus-d:var(--acier); /* Disinformation */ --f-focus-h:var(--mont-rose); /* Targeted harm */ --f-close:var(--groseille); --f-stage:var(--chartreuse); --f-theme:var(--leman); /* + subtopic, its child */ --f-subject:var(--zinzolin); --f-method:var(--canard); --f-data:var(--vert-deau); --f-platform:var(--carotte); --f-type:var(--ardoise); --f-year:var(--soufre); /* swapped with Author: Soufre reads better on a chart than Perle, and a year needs no hue of its own */ --f-affil:var(--rouge-suisse); /* also the site's link red, see above */ --f-lab:var(--marron); /* freed by Affiliation moving to Rouge suisse */ --f-actor:var(--perle); /* swapped with Year */ --f-score:var(--taupe); /* Shared page-banner backdrop. Near-black, but built FROM the chart: Ardoise under a black scrim, so the base keeps its violet cast without introducing an off-chart hex. Animated art only reads against a near-black; on plain Ardoise a glow has nowhere to fall off to and the field goes muddy. Used by the MDH Context, Research Directions, Funding and Takeaways banners, which all have to match. */ --banner-bg:linear-gradient(rgba(0,0,0,0.82),rgba(0,0,0,0.82)),var(--ardoise); /* The title/description plate that sits on those banners. Plain black rather than a lifted grey: against a near-black field a grey plate reads as a slab floating on top of the glow. At 0.82 the art stops showing through, which matters most on MDH Context, where the backdrop is a field of 28px white glyphs with a halo and the 14px description sat on a mottled, pulsing surface. One value for all four banners. */ --banner-plate:rgba(0,0,0,0.82); /* Layout metrics. The three bar heights track the type inside them: the nav tab, sub-tab and header rules set min-height from these, so raising the type scale without raising these crops the text against the bar edge. */ --header-h:72px; --nav-h:48px; --subnav-h:40px; --gutter:48px; /* Soft body ink. Was used in six places before it existed; an undefined var() makes an inherited property inherit instead of falling back, so those six quietly took their parent colour. */ --ink-soft:rgba(69,58,76,.78); /* ── The spine band ──────────────────────────────────────────────────────── Book spines reduced to a repeating 250px tile: bars of varied width with thin dark gaps, in the landing-page bookcase's own colours. Thirteen soft tones carry it (Mont Rose, Vert d'eau, Rose, Soufre, Acier, Perle) with four bolder spines spaced across (Groseille, Canard, Zinzolin, Carotte), exactly the proportion the big shelf uses. A tile, not a stretch: it repeats as the window widens and clips mid-tile as it narrows, so it never distorts and needs no media query. */ --spine-band:linear-gradient(90deg, #F39869 0 13px, transparent 13px 16px, #C2DDB0 16px 25px, transparent 25px 28px, #ED6E9C 28px 39px, transparent 39px 42px, #FBEE66 42px 49px, transparent 49px 52px, #B51F1F 52px 63px, transparent 63px 66px, #4F8FCC 66px 76px, transparent 76px 79px, #CAC7C7 79px 87px, transparent 87px 90px, #F39869 90px 102px, transparent 102px 105px, #C2DDB0 105px 113px, transparent 113px 116px, #007480 116px 127px, transparent 127px 130px, #ED6E9C 130px 140px, transparent 140px 143px, #FBEE66 143px 151px, transparent 151px 154px, #4F8FCC 154px 166px, transparent 166px 169px, #5C2483 169px 176px, transparent 176px 179px, #CAC7C7 179px 190px, transparent 190px 193px, #F39869 193px 203px, transparent 203px 206px, #EC6608 206px 217px, transparent 217px 220px, #4F8FCC 220px 231px, transparent 231px 234px, #C2DDB0 234px 246px, transparent 246px 250px); /* Content measure. Without it, body text ran the full window: on a wide screen that is 200+ characters a line, where comfortable reading is 60-80, and it is the main reason the pages felt like a wall. The panel is capped and centred; the banner breaks back out to full width on its own (see .map-hero). */ --measure:1240px; /* ── GRID SCALE ─────────────────────────────────────────────────────────── Charts, Actors and Publications share one filter, and used to run at four different densities: 260, 280, 360 and 420px minimums with two different gaps. Three subtabs of one tab read as three different pages. One scale now, sized so each lands on a whole number of columns inside the 1240px measure with an 18px gutter: --grid-card 4 across a name, a unit and a few label rows --grid-panel 3 across the distribution charts and the work cards --grid-wide 2 across the radials, which carry three encodings each Chosen from the measure backwards, not by eye: at 390px a chart is wide enough for a horizontal bar's category label, which is the entire reason four of them are horizontal, and at 260px it was not. */ --grid-card:290px; --grid-panel:390px; --grid-wide:560px; --grid-gap:18px; /* Display serif and UI sans. Every Arial declaration on the site now points at one of these two, so the pairing is changed in one place. */ --sans:'Inter',Arial,Helvetica,sans-serif; --display:'Newsreader',Georgia,'Times New Roman',serif; /* Three section grounds, all derived from the chart: white, Perle at 18%, and Ardoise at 5% for the cooler third register. */ --ground:#F6F5F5; --ground-tint:#F0EEF1; /* The panel's own top padding. A token because the full-bleed banner cancels it with a negative margin to sit flush under the nav. */ --panel-pad-top:28px; /* Static fallback for .main's top padding (header + topnav, incl. any wrapped rows/subnav). JS measures the real rendered height on load/resize and overrides this inline on , so it self-corrects instead of relying on this guess staying right for every width and every tab's subnav state. */ --main-top:160px; } /* Realistic-desktop tier (roughly a 14" laptop's logical CSS px, after typical OS scaling): the values above are now this tier's baseline. Genuinely large monitors get a bit more breathing room back via this band. */ @media (min-width:1441px){ :root{--header-h:96px; --nav-h:54px; --subnav-h:42px; --gutter:80px; --main-top:150px;} } /* ── Internal-section passcode gate (panel-gate.js) ───────────────────────── */ .gate-hidden{display:none !important;} .tab-gate{display:flex;justify-content:center;align-items:flex-start;padding:64px 20px;min-height:50vh;} /* A gated tab keeps its banner (see applyGate in panel-gate.js), so the card no longer has to carry the whole page on its own: it sits under the banner instead of being pushed down and stretched to fill the viewport. */ .map-hero ~ .tab-gate{padding-top:36px;min-height:0;} .tab-gate-card{background:#fff;border-radius:12px; box-shadow:0 6px 26px rgba(0,0,0,.12);padding:30px 30px 26px;max-width:400px;width:100%;text-align:center;} .tab-gate-lock{font-size:34px;line-height:1;margin-bottom:8px;} /* The card is just a lock, a title and the field. The explanatory lead that used to sit between the title and the field is gone, so the title carries the gap. */ .tab-gate-title{font-family:var(--sans);font-size:20px;font-weight:700;color:var(--ardoise);margin-bottom:18px;} .tab-gate-row{display:flex;gap:8px;} .tab-gate-input{flex:1;font-family:var(--sans);font-size:16px;color:var(--ardoise); border:1.5px solid var(--perle);border-radius:12px;padding:10px 13px;} .tab-gate-input:focus{outline:none;border-color:var(--canard);} /* Why these two min-widths exist. A gated tab is a column flex container (.panel.active:has(> .page-head .scope-note) below), so .tab-gate is a stretched flex item and cannot render narrower than its own min-content width. That width was being set by this input: a text input carries a default `size` of 20 characters, and as a flex item its automatic minimum size is that intrinsic width, so it refused to shrink. At 375px the gate measured 420px against a 375px viewport and Beyond, Takeaways and Funding were the only three tabs on the site that scrolled sideways on a phone. */ .tab-gate{min-width:0;} /* min-width:0 alone is not enough here: the panel's `margin-inline:auto` turns .tab-gate into a shrink-to-fit box, and a shrink-to-fit box is floored at its min-content width, to which an still contributes its intrinsic `size` width. `width:0` drops that contribution to nothing and flex-grow then gives the field the whole row. */ .tab-gate-input{min-width:0;width:0;} /* ...and with the field contributing nothing, the shrink-to-fit gate shrank to the title's width and left a 57px field. The gate takes the panel's width; the card inside keeps its 400px cap. */ .tab-gate{width:100%;box-sizing:border-box;} .tab-gate-btn{font-family:var(--sans);font-size:15px;font-weight:700;color:#fff; background:var(--ardoise);border:none;border-radius:12px;padding:10px 20px;cursor:pointer;} .tab-gate-btn:hover{background:var(--taupe);} .tab-gate-err{font-size:13.5px;color:var(--groseille);margin:12px 0 0;} @media (max-width:480px){ .tab-gate{padding:36px 14px;} .tab-gate-card{padding:24px 20px 22px;} } /* ── 2. BASE + HEADER + TOP NAVIGATION ───────────────────────────────────── */ /* The dark bar at the very top: logo, title, and the row of section tabs. Same on every page. */ html{scroll-behavior:smooth;} /* Note: the site does NOT honour the OS "reduce motion" setting as a global rule (removed per an explicit request); the big banner animations run for everyone. Two small, deliberate exceptions remain and are fine to keep: the chat typing dots (mdh-map.css) and the funding particles (fund-particles.js) still respect reduce-motion. If a global guard is ever wanted again, add a `@media (prefers-reduced-motion: reduce)` block here that zeroes animation and transition durations. */ *{box-sizing:border-box;margin:0;padding:0;} /* ── B. Page ground ───────────────────────────────────────────────────────── #F6F5F5 is Perle (#CAC7C7) at 18% over white, so it is the chart palette, not a new colour. White panels and cards now sit ON something instead of being white-on-white, which is what separates them since the static drop shadows were removed. Figure and ground rather than a stack of invisible boxes. */ /* ── PAPER ──────────────────────────────────────────────────────────────── TWO layers, both Ardoise, both background images so neither costs a request and both vanish in print. 1. A DOT GRID on a 22px pitch, 1.3px dots. This is the layer you actually see: it reads as dot-grid paper, the kind a notebook is ruled with, and it gives the page a measure to sit on. 2. A MICRO GRAIN on a 5px pitch, sub-pixel dots, at roughly half the strength. On its own it is invisible; under the grid it stops the dots floating on a flat fill and reads as the tooth of the stock. The first pass used only layer 2, at 3.8 to 6 percent. That is below the threshold where a texture registers at all on a normal screen, which is why it looked like nothing had changed. background-attachment:fixed on the page so the grain belongs to the sheet rather than scrolling with the content, which is the difference between paper and wallpaper. Cards deliberately stay clean: they sit ON the paper, and the figure-and-ground separation described just above is what replaced the static drop shadows. Texturing them too would put that back to square one. */ /* An explicit base size. Nothing anchored the cascade before this: html and body set no font-size at all, so every text block carried a local override and anything that did not was silently on the browser's 16px default. 16.5px is the site's own body step, already set by .panel; putting it on body means a new element inherits the right size instead of the accidental one. */ body{font-size:16.5px;font-family:var(--sans);background:#F6F5F5; color:var(--ardoise);min-height:100vh;display:flex;flex-direction:column; /* Crisper text rendering (no layout change): smoother glyph edges on the dark header + hero, and legibility-optimised kerning/ligatures site-wide. */ -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;} /* Header + topnav share one fixed wrapper: the nav sits in normal flow right after the header inside it, so their relative position is the browser's own layout (correct under any zoom/OS scaling) instead of a JS-measured top:Npx offset between two independently fixed siblings. */ .site-chrome{position:fixed;top:0;left:0;right:0;z-index:110;} /* Skip-to-content link: off-screen until a keyboard user tabs to it, then it slides into the top-left so they can jump past the fixed header/nav. */ .skip-link{position:absolute;left:8px;top:-48px;z-index:200;background:var(--groseille);color:#fff;padding:8px 14px;border-radius:0 0 12px 12px;font-size:15px;font-weight:700;text-decoration:none;transition:top .15s;} .skip-link:focus{top:0;outline:2px solid #fff;outline-offset:2px;} /* The skip link's target takes focus from script (A1, 2026-09-14); the page itself needs no ring. */ #main-content:focus{outline:none} /* Scoped to .site-chrome: a bare header{} selector also matched every panel's
, painting the page title Ardoise-on-Ardoise. */ .site-chrome header{background:var(--ardoise);padding:12px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden;} /* ── The shelf in the header ──────────────────────────────────────────────── The bookcase fills the gap BETWEEN the wordmark and the buttons, as a real flex item rather than an overlay pinned to a percentage of the band. That choice is what makes it survive every width. An overlay sized to 46% is fine on a laptop but collapses on a phone, where the wordmark wraps to two lines and grows into the art, leaving books squashed behind text. As a flex item the shelf simply takes whatever space is left over: it stretches on a wide monitor, and on a narrow one it shrinks to nothing and disappears cleanly. No breakpoint, no overlap, and no text ever sits on a spine. Because nothing has to stay legible over it, the scrim can be light (35%) and the books actually show, instead of being dimmed to a suggestion. It fades to solid Ardoise at both ends so it reads as shelving glimpsed through the band rather than as a panel dropped into it. */ /* Ground is a DARKER ARDOISE, not near-black: same family as the header band, so the shelf reads as a recess in it rather than a hole cut through it. */ /* #2A2A2D, a dark neutral grey. This was #372E3C, which is a plum, and that is where the band's brownish cast came from. Neutral lets the spine colours be the only chroma in the header. */ .h-shelf{position:absolute;inset:0;z-index:0;overflow:hidden;background-color:var(--chrome); /* Declared here, not on .map-hero-art: .h-shelf-rail is that element's sibling, so a --rail defined inside the art could never reach it. */ --rail:#9a979c;} /* The wordmark and the buttons ride ON the shelf, so they need to sit above it. */ .h-left,.h-right{position:relative;z-index:1;} /* ── The header bookshelf: 159 individually placed books ───────────────── NOT a tile. A repeating background cannot avoid repeating: widening the tile only makes the books bigger, and shifting it only changes the phase. These are 159 separate background layers across 2600px, each with its own width, height, colour and position, so no run of spines ever recurs. Each book is a two-stop gradient, a lit face and a shaded side, which is what makes a rectangle read as a book. Heights vary between 60 and 100 percent of the band, the way shelved books do. Generated deterministically (tools note: scratchpad/gen-header-shelf.mjs, seed 20260806) so it is stable across builds and reviewable in a diff. Soft tones carry it; Groseille, Canard, Zinzolin and Carotte appear about one book in eight. */ /* The header shows the SAME bookcase as the landing page, one shelf row deep. The art draws its own Perle rail as the shelf board, so no separate board element is needed. 196x88 keeps the tile's proportions (250:112 = 2.23, 196:88 = 2.23) rather than stretching the books to fill the band. */ .h-shelf .map-hero-art{--glow:.86;--color-1:var(--chrome);opacity:.5;} /* ── Colour zones ────────────────────────────────────────────────────────── The artwork is untouched: same 17 spines, same 250px tile, same widths and heights. The lit layer is laid down as 10 slices, each exactly one tile wide and each with its own palette, so a book shape that recurs every 250px is a different colour every time. Slice edges sit on tile boundaries, where the artwork has a 1% gap between the last spine (ending 99%) and the first (starting 0%), so a colour change never cuts a book in half. Since 2026-09-16 there is ONE grey, #45454A, with the two neighbours six points either side of it, flat: each spine's lit face and shaded side are the same value, so the shelf reads as a grain in the band rather than as an illustration on it. At the 50% opacity the art carries, the whole range lands inside about four points of lightness, which separates one spine from the next without reading as a second colour. The earlier seventeen-tone palette (pinks, olives, oranges, none of them EPFL values) was the loudest thing on the page. Generated by scratchpad/apply-shelf2.js. */ .hz{position:absolute;inset:0;} .hz1{clip-path:inset(0 calc(100% - 250px) 0 0px);--s1:#45454A;--s1d:#45454A;--s2:#3F3F44;--s2d:#3F3F44;--s3:#4B4B50;--s3d:#4B4B50;--s4:#45454A;--s4d:#45454A;--s5:#3F3F44;--s5d:#3F3F44;--s6:#4B4B50;--s6d:#4B4B50;--s7:#45454A;--s7d:#45454A;--s8:#3F3F44;--s8d:#3F3F44;--s9:#4B4B50;--s9d:#4B4B50;--s10:#45454A;--s10d:#45454A;--s11:#3F3F44;--s11d:#3F3F44;--s12:#4B4B50;--s12d:#4B4B50;--s13:#45454A;--s13d:#45454A;--s14:#3F3F44;--s14d:#3F3F44;--s15:#4B4B50;--s15d:#4B4B50;--s16:#45454A;--s16d:#45454A;--s17:#3F3F44;--s17d:#3F3F44;} .hz2{clip-path:inset(0 calc(100% - 500px) 0 250px);--s1:#3F3F44;--s1d:#3F3F44;--s2:#4B4B50;--s2d:#4B4B50;--s3:#45454A;--s3d:#45454A;--s4:#3F3F44;--s4d:#3F3F44;--s5:#4B4B50;--s5d:#4B4B50;--s6:#45454A;--s6d:#45454A;--s7:#3F3F44;--s7d:#3F3F44;--s8:#4B4B50;--s8d:#4B4B50;--s9:#45454A;--s9d:#45454A;--s10:#3F3F44;--s10d:#3F3F44;--s11:#4B4B50;--s11d:#4B4B50;--s12:#45454A;--s12d:#45454A;--s13:#3F3F44;--s13d:#3F3F44;--s14:#4B4B50;--s14d:#4B4B50;--s15:#45454A;--s15d:#45454A;--s16:#3F3F44;--s16d:#3F3F44;--s17:#4B4B50;--s17d:#4B4B50;} .hz3{clip-path:inset(0 calc(100% - 750px) 0 500px);--s1:#4B4B50;--s1d:#4B4B50;--s2:#45454A;--s2d:#45454A;--s3:#3F3F44;--s3d:#3F3F44;--s4:#4B4B50;--s4d:#4B4B50;--s5:#45454A;--s5d:#45454A;--s6:#3F3F44;--s6d:#3F3F44;--s7:#4B4B50;--s7d:#4B4B50;--s8:#45454A;--s8d:#45454A;--s9:#3F3F44;--s9d:#3F3F44;--s10:#4B4B50;--s10d:#4B4B50;--s11:#45454A;--s11d:#45454A;--s12:#3F3F44;--s12d:#3F3F44;--s13:#4B4B50;--s13d:#4B4B50;--s14:#45454A;--s14d:#45454A;--s15:#3F3F44;--s15d:#3F3F44;--s16:#4B4B50;--s16d:#4B4B50;--s17:#45454A;--s17d:#45454A;} .hz4{clip-path:inset(0 calc(100% - 1000px) 0 750px);--s1:#45454A;--s1d:#45454A;--s2:#3F3F44;--s2d:#3F3F44;--s3:#4B4B50;--s3d:#4B4B50;--s4:#45454A;--s4d:#45454A;--s5:#3F3F44;--s5d:#3F3F44;--s6:#4B4B50;--s6d:#4B4B50;--s7:#45454A;--s7d:#45454A;--s8:#3F3F44;--s8d:#3F3F44;--s9:#4B4B50;--s9d:#4B4B50;--s10:#45454A;--s10d:#45454A;--s11:#3F3F44;--s11d:#3F3F44;--s12:#4B4B50;--s12d:#4B4B50;--s13:#45454A;--s13d:#45454A;--s14:#3F3F44;--s14d:#3F3F44;--s15:#4B4B50;--s15d:#4B4B50;--s16:#45454A;--s16d:#45454A;--s17:#3F3F44;--s17d:#3F3F44;} .hz5{clip-path:inset(0 calc(100% - 1250px) 0 1000px);--s1:#3F3F44;--s1d:#3F3F44;--s2:#4B4B50;--s2d:#4B4B50;--s3:#45454A;--s3d:#45454A;--s4:#3F3F44;--s4d:#3F3F44;--s5:#4B4B50;--s5d:#4B4B50;--s6:#45454A;--s6d:#45454A;--s7:#3F3F44;--s7d:#3F3F44;--s8:#4B4B50;--s8d:#4B4B50;--s9:#45454A;--s9d:#45454A;--s10:#3F3F44;--s10d:#3F3F44;--s11:#4B4B50;--s11d:#4B4B50;--s12:#45454A;--s12d:#45454A;--s13:#3F3F44;--s13d:#3F3F44;--s14:#4B4B50;--s14d:#4B4B50;--s15:#45454A;--s15d:#45454A;--s16:#3F3F44;--s16d:#3F3F44;--s17:#4B4B50;--s17d:#4B4B50;} .hz6{clip-path:inset(0 calc(100% - 1500px) 0 1250px);--s1:#4B4B50;--s1d:#4B4B50;--s2:#45454A;--s2d:#45454A;--s3:#3F3F44;--s3d:#3F3F44;--s4:#4B4B50;--s4d:#4B4B50;--s5:#45454A;--s5d:#45454A;--s6:#3F3F44;--s6d:#3F3F44;--s7:#4B4B50;--s7d:#4B4B50;--s8:#45454A;--s8d:#45454A;--s9:#3F3F44;--s9d:#3F3F44;--s10:#4B4B50;--s10d:#4B4B50;--s11:#45454A;--s11d:#45454A;--s12:#3F3F44;--s12d:#3F3F44;--s13:#4B4B50;--s13d:#4B4B50;--s14:#45454A;--s14d:#45454A;--s15:#3F3F44;--s15d:#3F3F44;--s16:#4B4B50;--s16d:#4B4B50;--s17:#45454A;--s17d:#45454A;} .hz7{clip-path:inset(0 calc(100% - 1750px) 0 1500px);--s1:#45454A;--s1d:#45454A;--s2:#3F3F44;--s2d:#3F3F44;--s3:#4B4B50;--s3d:#4B4B50;--s4:#45454A;--s4d:#45454A;--s5:#3F3F44;--s5d:#3F3F44;--s6:#4B4B50;--s6d:#4B4B50;--s7:#45454A;--s7d:#45454A;--s8:#3F3F44;--s8d:#3F3F44;--s9:#4B4B50;--s9d:#4B4B50;--s10:#45454A;--s10d:#45454A;--s11:#3F3F44;--s11d:#3F3F44;--s12:#4B4B50;--s12d:#4B4B50;--s13:#45454A;--s13d:#45454A;--s14:#3F3F44;--s14d:#3F3F44;--s15:#4B4B50;--s15d:#4B4B50;--s16:#45454A;--s16d:#45454A;--s17:#3F3F44;--s17d:#3F3F44;} .hz8{clip-path:inset(0 calc(100% - 2000px) 0 1750px);--s1:#3F3F44;--s1d:#3F3F44;--s2:#4B4B50;--s2d:#4B4B50;--s3:#45454A;--s3d:#45454A;--s4:#3F3F44;--s4d:#3F3F44;--s5:#4B4B50;--s5d:#4B4B50;--s6:#45454A;--s6d:#45454A;--s7:#3F3F44;--s7d:#3F3F44;--s8:#4B4B50;--s8d:#4B4B50;--s9:#45454A;--s9d:#45454A;--s10:#3F3F44;--s10d:#3F3F44;--s11:#4B4B50;--s11d:#4B4B50;--s12:#45454A;--s12d:#45454A;--s13:#3F3F44;--s13d:#3F3F44;--s14:#4B4B50;--s14d:#4B4B50;--s15:#45454A;--s15d:#45454A;--s16:#3F3F44;--s16d:#3F3F44;--s17:#4B4B50;--s17d:#4B4B50;} .hz9{clip-path:inset(0 calc(100% - 2250px) 0 2000px);--s1:#4B4B50;--s1d:#4B4B50;--s2:#45454A;--s2d:#45454A;--s3:#3F3F44;--s3d:#3F3F44;--s4:#4B4B50;--s4d:#4B4B50;--s5:#45454A;--s5d:#45454A;--s6:#3F3F44;--s6d:#3F3F44;--s7:#4B4B50;--s7d:#4B4B50;--s8:#45454A;--s8d:#45454A;--s9:#3F3F44;--s9d:#3F3F44;--s10:#4B4B50;--s10d:#4B4B50;--s11:#45454A;--s11d:#45454A;--s12:#3F3F44;--s12d:#3F3F44;--s13:#4B4B50;--s13d:#4B4B50;--s14:#45454A;--s14d:#45454A;--s15:#3F3F44;--s15d:#3F3F44;--s16:#4B4B50;--s16d:#4B4B50;--s17:#45454A;--s17d:#45454A;} .hz10{clip-path:inset(0 0 0 2250px);--s1:#45454A;--s1d:#45454A;--s2:#3F3F44;--s2d:#3F3F44;--s3:#4B4B50;--s3d:#4B4B50;--s4:#45454A;--s4d:#45454A;--s5:#3F3F44;--s5d:#3F3F44;--s6:#4B4B50;--s6d:#4B4B50;--s7:#45454A;--s7d:#45454A;--s8:#3F3F44;--s8d:#3F3F44;--s9:#4B4B50;--s9d:#4B4B50;--s10:#45454A;--s10d:#45454A;--s11:#3F3F44;--s11d:#3F3F44;--s12:#4B4B50;--s12d:#4B4B50;--s13:#45454A;--s13d:#45454A;--s14:#3F3F44;--s14d:#3F3F44;--s15:#4B4B50;--s15d:#4B4B50;--s16:#45454A;--s16d:#45454A;--s17:#3F3F44;--s17d:#3F3F44;} .h-shelf .mh-lit{display:none;} .h-shelf .mhs-up{display:none;} /* The fade: solid behind the wordmark, fully clear by 640px, so the books reach full colour across the rest of the band. Nothing dims the right-hand side, which is why Search and Log in carry solid backgrounds - white text on a lit Soufre or Vert d'eau spine is unreadable, so the controls bring their own ground. */ /* SHORTENED from 500px solid / clear by 920px. This scrim, not the ground colour, was the reason the band read as a flat slab: it covered most of the artwork on any normal screen, so recolouring the shelf changed almost nothing that was actually visible. The wordmark still gets its backing; the books now show across the rest of the band. */ .h-shelf::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(90deg,var(--chrome) 0,var(--chrome) var(--shelf-start), transparent calc(var(--shelf-start) + 24px), transparent calc(100% - var(--shelf-end) - 24px), var(--chrome) calc(100% - var(--shelf-end)));} /* Both ends are measured, not guessed, and both are distances the layout actually produces: --shelf-start is where the wordmark ends, --shelf-end is how far the Search and Log in buttons reach in from the right. The buttons are right-aligned, so the second is near enough constant per breakpoint: 262px above 1600, 230px from 1024, 202px below that (scratchpad/shelf-options/measure-header.mjs). Ascending min-width only, so each one overrides the last. The books therefore live in the gap between the two, and touch neither. */ .h-shelf{--shelf-start:525px;--shelf-end:202px;} @media (min-width:1024px){.h-shelf{--shelf-start:553px;--shelf-end:230px;}} @media (min-width:1600px){.h-shelf{--shelf-start:585px;--shelf-end:262px;}} /* Below 768px the wordmark and the buttons nearly touch: about 10px of band is left, which is not a shelf, it is a smear. Hide the art and the board rather than draw a sliver. */ @media (max-width:767px){.h-shelf .map-hero-art,.h-shelf-rail{display:none;}} /* The shelf line runs the FULL width, uniformly, including behind the wordmark. The artwork draws its own rail, but the fade covers it with solid Ardoise on the left, so the board appeared to start only where the books did. Drawing it as its own element ABOVE the fade (z-index 3, the fade is 2) makes it one continuous line edge to edge. Proportions match the art exactly: the tile puts Perle in its bottom 5% and a dark sliver from 5 to 7%, which at an 88px band is 4.4px and 1.8px. */ .h-shelf-rail{position:absolute;left:0;right:0;bottom:0;height:6.2px;z-index:3;pointer-events:none; background:linear-gradient(to top,var(--rail) 0 4.4px,var(--chrome) 4.4px 6.2px);} .h-shelf .mhs-lo{top:auto;bottom:0;height:88px; background-size:196px 88px;background-position:var(--shelf-x) bottom;} /* Search and Log in are opaque, so they read as solid controls resting on the shelf rather than as outlines with books showing through them. */ header .h-search-btn,header .h-login-btn{background:var(--ardoise);border-color:rgba(255,255,255,.5); box-shadow:0 2px 12px rgba(0,0,0,.55);} header .h-search-btn:hover,header .h-login-btn:hover{background:#3a3140;border-color:rgba(255,255,255,.75);color:#fff;} .h-right{display:flex;flex-direction:row;align-items:center;gap:18px;} .h-title-block{cursor:pointer;display:inline-block;} .h-title-block:hover .h-brand{opacity:0.85;} .h-title-block:focus-visible{outline:2px solid rgba(255,255,255,0.5);outline-offset:4px;border-radius:4px;} .h-logo-link{display:inline-flex;align-items:center;text-decoration:none;} .h-logo-link:focus-visible{outline:2px solid rgba(255,255,255,0.5);outline-offset:4px;border-radius:4px;} .h-logo{height:44px;width:auto;} /* The header brand is the MDH laptop illustration (decorative), inlined so its SMIL animation runs (SMIL is frozen inside ). Sized to roughly match the MDH title block height. The header has no fixed height and a load/resize script re-measures --main-top, so a taller brand mark just grows the header band. */ .h-logo-laptop-wrap{display:inline-flex;align-items:center;line-height:0;} /* 42:28 now that the viewBox is cropped to the laptop itself (2026-09-16): the same 64px of header height, with no empty margin inside it. */ .h-logo-laptop{height:64px;width:96px;display:block;} .h-logo-sub{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#fff;} /* EssentialTech logo, moved to the footer "Built by" column and the homepage About section. White logo on the dark footer; boxed on the light About card. */ .ph-footer-logo-link{display:inline-block;margin:2px 0 0;} .ph-footer-logo{height:56px;width:auto;display:block;} .ph-about-logo-link{display:inline-block;margin:18px 0 0;} .ph-about-logo{height:40px;width:auto;display:block;background:var(--ardoise);padding:8px 12px;border-radius:12px;} /* Laptop brand mark sits to the LEFT of the MDH title block. */ .h-left{display:flex;align-items:center;gap:16px;} /* The site name was the page's h1 on every tab, so no page had its own title as its main heading. It is a div now, and these rules carry the h1 look it had (bold, no margin, normal line height). */ .h-left .h-brand{font-family:var(--sans);font-size:22px;font-weight:700;line-height:normal;margin:0;color:#fff;letter-spacing:-0.5px;} .h-left .h-brand em{font-style:normal;} .h-left p{font-size:13px;color:#fff;margin-top:4px;letter-spacing:1.2px;text-transform:uppercase;} .h-left p em{font-style:normal;font-weight:700;font-size:20px;line-height:0;letter-spacing:0;} .hm{color:var(--rose);} .hd{color:var(--acier);} .hh{color:var(--mont-rose);} .tab-bar[hidden]{display:none !important;} sup.ref{font-size:12px;font-weight:700;opacity:.65;vertical-align:super;margin-left:1px;cursor:pointer;color:var(--zinzolin);text-decoration:underline;text-underline-offset:2px} sup.ref:hover{opacity:1} .main{padding-top:var(--main-top);flex:1 0 auto;} /* ── Top navigation bar: section tabs (left) + audience selector (right), fixed under the header ── */ /* ── The header ground ───────────────────────────────────────────────────── Flat Ardoise read as a cheap slab: one unmodulated fill has no depth, and at nav height it is the first thing anyone sees. Three layers now, in the order they stack: 1. a micro dot lattice, 1px at 5.5% white on a 7px grid, which reads as fine texture rather than as dots and gives the surface something to catch; 2. a downward scrim, the SAME construction as --banner-bg (Ardoise under black rather than a new hex), so the header and the page banners read as one family and the bar sits above the page instead of floating on it; 3. Ardoise itself, still the only colour involved. A dot lattice, not the filter bar's diagonal hatch: the two surfaces do different jobs, one is identity and one is a control, and repeating the hatch would make them look like the same component. The subnav between them stays flat Perle on purpose - three textured rows in a stack is noise. */ /* NO PATTERN HERE, deliberately. A dot lattice was tried and removed: the page below now carries a grain and the filter row carries a hatch, and a third textured surface in the same vertical stack is noise rather than depth. The nav keeps only the downward scrim, which gives it weight without a texture. Its grey matches the header exactly so the two read as one object. */ .topnav{ background: linear-gradient(rgba(0,0,0,.14), rgba(0,0,0,.30)), var(--chrome); border-top:1px solid rgba(255,255,255,.22); /* A 1px light edge along the bottom. This is what makes an edge read as milled rather than cut, and it is most of the difference between "flat" and "finished" on a dark bar. */ box-shadow:inset 0 -1px 0 rgba(255,255,255,.10); position:relative;z-index:1} .topnav-inner{display:flex;align-items:stretch;justify-content:space-between;gap:10px;padding:0 var(--gutter);min-height:var(--nav-h);flex-wrap:wrap} .topnav-tabs{display:flex;align-items:stretch;gap:0;flex-wrap:wrap} .topnav-tab{appearance:none;background:none;border:none;color:rgba(255,255,255,.72);font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:.1px;padding:0 9px;cursor:pointer;position:relative;display:inline-flex;align-items:center;min-height:var(--nav-h);transition:color .15s;white-space:nowrap} .topnav-tab:hover{color:#fff} .topnav-tab.active{color:#fff;font-weight:600} .topnav-tab.active::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--groseille);border-radius:4px 4px 0 0} .topnav-tab:focus-visible{outline:2px solid var(--canard);outline-offset:-2px;border-radius:4px} /* Each nav tab that has sub-tabs reveals them as a hover menu for direct selection (this replaces the old "explain the tab" tooltip). Tabs without sub-tabs show nothing on hover. Guarded to fine-pointer devices so touch users are not left with a stuck-open menu. */ .topnav-tab-wrap{position:relative;display:flex;align-items:stretch} .topnav-tab-menu{position:absolute;top:100%;left:6px;z-index:130;min-width:190px;background:#fff;border-radius:0 0 12px 12px;box-shadow:0 12px 30px rgba(0,0,0,.28);padding:6px;display:flex;flex-direction:column;gap:1px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s,transform .14s,visibility .14s;pointer-events:none} .topnav-tab-menu-item{appearance:none;background:none;border:none;text-align:left;font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.1px;color:var(--ardoise);padding:9px 12px;border-radius:4px;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s} .topnav-tab-menu-item:hover{background:var(--perle);color:var(--groseille)} .topnav-tab-menu-item:focus-visible{outline:2px solid var(--canard);outline-offset:-2px} @media (hover:hover) and (pointer:fine){ .topnav-tab-wrap:hover .topnav-tab-menu,.topnav-tab-wrap:focus-within .topnav-tab-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} /* The active section already shows its sub-tabs in the row below, and its hover menu opened exactly on top of that row, so a pointer moving down to a sub-tab could click the menu instead (site scan, 2026-09-15). */ .topnav-tab-wrap:has(.topnav-tab.active) .topnav-tab-menu{display:none} } .topnav-aud{display:flex;align-items:center;gap:6px;flex-shrink:0} .topnav-aud-label{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.55)} /* View select box: a single button that opens a small menu. */ .aud-select{position:relative} .aud-select-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.1px;padding:5px 10px;border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s;white-space:nowrap} .aud-select-btn:hover{border-color:rgba(255,255,255,.65)} .aud-select-btn[aria-expanded="true"]{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.65)} .aud-select-btn:focus-visible{outline:2px solid var(--canard);outline-offset:2px} .aud-select-caret{font-size:12px;opacity:.85} .aud-select-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:120;min-width:210px;background:#fff;border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.32);padding:6px;display:flex;flex-direction:column;gap:2px} .aud-select-menu[hidden]{display:none} .aud-select-menu .topnav-aud-btn{appearance:none;display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--ardoise);border-radius:4px;padding:10px 12px;font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:0;cursor:pointer} .aud-select-menu .topnav-aud-btn:hover{background:rgba(69,58,76,.08)} .aud-select-menu .topnav-aud-btn.active{background:var(--groseille);color:#fff} .aud-select-menu .topnav-aud-btn:focus-visible{outline:2px solid var(--canard);outline-offset:-2px} /* Second row: the active section's subtabs, shown only when a section has them. */ .topnav-sub{background:var(--perle);border-top:1px solid rgba(0,0,0,.10);border-bottom:1px solid rgba(0,0,0,.10)} .topnav-sub[hidden]{display:none} .topnav-sub-inner{display:flex;align-items:stretch;gap:2px;padding:0 var(--gutter);min-height:var(--subnav-h);flex-wrap:wrap} .topnav-subtab{position:relative;appearance:none;background:none;border:none;color:var(--ink-body);font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.2px;padding:0 11px;min-height:var(--subnav-h);display:inline-flex;align-items:center;cursor:pointer;transition:color .15s;white-space:nowrap} .topnav-subtab:hover{color:var(--ardoise)} .topnav-subtab.active{color:var(--ardoise);font-weight:600} .topnav-subtab.active::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--groseille);border-radius:4px 4px 0 0} .topnav-subtab:focus-visible{outline:2px solid var(--canard);outline-offset:-2px;border-radius:4px} /* On hover/focus a subtab explains what it is. */ .topnav-subtab-desc{position:absolute;top:calc(100% + 6px);left:14px;z-index:120;width:max-content;max-width:300px;padding:8px 11px;background:#fff;color:var(--ardoise);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.28);font-size:13.5px;font-weight:400;line-height:1.45;letter-spacing:0;text-transform:none;white-space:normal;opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .14s,transform .14s,visibility .14s;pointer-events:none} .topnav-subtab:hover .topnav-subtab-desc,.topnav-subtab:focus-visible .topnav-subtab-desc{opacity:1;visibility:visible;transform:translateY(0)} /* ── Interior page header ─────────────────────────────────────────────────── What replaced the 265px bookshelf band on every interior page. A hero is a greeting and you greet someone once: Home keeps the full shelf, and the pages people actually work in start with their content instead. Four lines, always in the same order, so a reader learns the shape once: eyebrow which section this belongs to (only where there is a parent) title the page sub one line on what it is for meta a figure where the count is the point, a keyword where it is not Groseille on the eyebrow is the site's single accent, not a per-page colour: one accent is what keeps a page from reading as multicoloured. */ /* No rule under the header: the note beside it and the band change below it already separate it from the page, and a third divider read as a stray line with empty space under it. */ .page-head{padding:0;margin:0;} .page-eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--groseille);margin:0 0 9px;} .page-head .page-headline-title{font-family:var(--display);font-size:30px;font-weight:600; letter-spacing:-.02em;line-height:1.04;color:var(--ardoise);margin:0;} .page-head .page-sub{font-size:19px;line-height:1.55;color:rgba(69,58,76,.78);margin:14px 0 0;max-width:none;} .page-head .page-meta{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--ink-muted);margin:26px 0 0;} /* ── 3b. THE PAGE FORMAT: bands, eyebrows, display headings ───────────────── The blog/poster register. A page is a stack of BANDS, each a full-width strip of one ground colour holding one centred content column. Alternating the ground is what gives a long page rhythm instead of one continuous scroll. The shape inside a band is always the same, so a reader learns it once: eyebrow small, uppercase, Groseille - what kind of thing this is display h Newsreader serif, large - the point body Inter, 17px, capped at 62 characters content whatever the section actually holds Bands are full-bleed: they cancel the panel's gutter with a negative margin and re-establish the measure inside, so a ground colour reaches both edges of the window while the text stays in the same column as everything else. */ /* 56px, not 64. What is MDH? sets 56 (.mdh-page-section) and it is now the one number for every banded section on the site, homepage included. The old 3b-i note called the 64/56 split "the one number the four tabs still disagree on"; they no longer do. */ .band{margin:0 calc(var(--gutter) * -1);padding:56px var(--gutter);} .band > *{max-width:var(--measure);margin-inline:auto;} /* GROUNDS ALTERNATE AUTOMATICALLY. Hand-assigned .band-white / .band-ground drifted the moment a band was added or removed: map.html ended up white, ground, white, WHITE, breaking its own stated rule that no two bands of the same ground may touch. This is the mechanism .mdh-page-section already uses, and it cannot get out of order. The explicit classes are kept as an override for the few panels that still set them. */ /* Bands paint their own ground, and the `background` SHORTHAND resets background-image, so each has to restate the grain in longhand or the page texture simply vanishes behind them. THREE strengths, not one: white bands take the faintest dose so they still read as the light half of the alternation, tinted and ground bands take more. A single uniform texture flattened the band rhythm the whole site is built on. */ .band:nth-of-type(odd),.band-white{background-color:#fff;} .band:nth-of-type(even),.band-ground{background-color:var(--ground);} /* .band.band-tint, not .band-tint: the alternation above is a class PLUS a pseudo-class, so a bare class loses to it and every tinted band on the site was rendering as plain ground instead. Measured on Beyond EPFL: the band marked band-tint came back #F6F5F5, the ground, where the token says #F0EEF1. Four bands were affected, on Beyond EPFL, Contribute, Funding and Takeaways. Tint has to be hand-assigned because the alternation only knows two grounds, so this is the one ground class that must be able to win. */ .band.band-tint{background-color:var(--ground-tint);} /* ── GRAPH PAPER, under the cards themselves ────────────────────────────── Earlier this was on the whole band, keyed by :has(). That was still too broad: a band usually opens with an eyebrow, a headline and a lede before its cards, and ruling ran under all of it. Ruling under running text makes a page look like a form to fill in. It is on the GRID now, so the paper starts where the cards start and stops where they stop, and the prose above sits on a clean ground. Padding so the sheet extends a little past the cards rather than being cut flush to them. Pitches divide by construction: a 16px minor rule and an 80px major, exactly five minors, the 5:1 real graph paper uses. An earlier pass used a 22px dot grid over a 5px grain, and those do not divide, so the small dots never landed on the big ones and it read as two unrelated speckles. Anchored to the element, not the viewport: background-attachment:fixed made one continuous sheet under the whole page, but the ruling then slid under the content as you scrolled and belonged to the window rather than to the cards. */ /* FULL BLEED, not a panel. Painted on the grid box itself with padding and a radius it read as one more rounded card, a box around the boxes, which is the opposite of what a ground should do. It is a layer behind the cards now: an absolutely positioned ::before, 100vw wide and centred, so the ruling runs the full width of the section and simply stops where the cards stop vertically. The grid keeps its own layout untouched, so no column maths changes. overflow-x:clip on .band contains the 100vw so it cannot raise a horizontal scrollbar; clip rather than hidden, because hidden would make every band a scroll container and break sticky positioning inside it. */ .chart-grid,.actor-grid,.proj-grid,.spider-grid, .rd-grid,.ins-grid,.beyond-grid,.pgrid{position:relative;padding:22px 0;} .chart-grid::before,.actor-grid::before,.proj-grid::before,.spider-grid::before, .rd-grid::before,.ins-grid::before,.beyond-grid::before,.pgrid::before{ content:"";position:absolute;inset:0 auto;top:0;bottom:0; left:50%;width:100vw;transform:translateX(-50%); z-index:0;pointer-events:none; background-image: linear-gradient(rgba(69,58,76,.042) 1px,transparent 1px), linear-gradient(90deg,rgba(69,58,76,.042) 1px,transparent 1px), linear-gradient(rgba(69,58,76,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(69,58,76,.022) 1px,transparent 1px); background-size:80px 80px,80px 80px,16px 16px,16px 16px; } /* The cards ride above the sheet. Without this the ::before would paint over them, because a positioned pseudo-element beats static siblings. */ .chart-grid > *,.actor-grid > *,.proj-grid > *,.spider-grid > *, .rd-grid > *,.ins-grid > *,.beyond-grid > *,.pgrid > *{position:relative;z-index:1} /* Beside the filter rail the paper starts at the content column: centred on 100vw it ran under the rail and ended there in a hard edge (2026-09-14). It still bleeds to the right edge. */ .epfl-main :is(.chart-grid,.actor-grid,.proj-grid,.spider-grid,.pgrid)::before{ left:0;right:calc(var(--gutter) * -1);width:auto;transform:none} .band{overflow-x:clip} /* Consecutive bands of the same ground would read as one, so collapse the seam. */ .band + .band{padding-top:56px;} /* Nothing between the last band and the footer. A panel ending in a band kept its own 48px bottom padding, painted in the body grey under the band's white: an empty two-tone strip above the footer on every interior page. The What is MDH? and Glossary bodies are built of full-bleed sections that carry their own bottom padding, so the band around them adds none either. */ .panel.active:has(.band){padding-bottom:0;} .band:has(> #panel-mdh-body),.band:has(> #panel-glossary-body){padding-bottom:0;} /* ── Card interiors, in the draft's voice ──────────────────────────────────── A card's own heading is display type, like every other heading on the site, and its supporting text is Inter at the same measure as body copy. Before this, card titles were bold sans at a size close to their body text, so a card had no internal hierarchy at all and read as one undifferentiated block. Scoped to the card classes so nothing else inherits it. */ .beyond-card-q, /* .rd-card h3 removed from this list: the card's h3 carries .rd-card-title, and this selector (0,1,1) was beating it (0,1,0), so the 21px title size declared below never rendered. */ .ins-card h3, .ins-card .ins-title, /* .proj-card is gone: nothing in site/js or site/partials emitted it. Work cards are .rcard.rcard-compact, the same component the actor cards use, so the two grids already share an anatomy. Its rules included a border colour-coded by MDH closeness in three different hues, which is the same "one facet, three colours" defect removed from the label pills, so it is deleted rather than left to be revived by accident. .proj-grid is still live and still used. */ /* .chart-card h3 was declared here at 19px and again below at 16px; the later rule wins, so this one only made the real size hard to find. */ .def-block h4{ font-family:var(--display);font-weight:600;font-size:19px;line-height:1.2; color:var(--ardoise);margin:0 0 6px; } /* The audience note under a Beyond card says who the card is for. It was set like the figure labels, but it runs two to five lines, and letter-spaced capitals at that length shout; .beyond-card p also beat the 12px, so it rendered at 16px. Sentence case and normal weight, a step under body (2026-09-14). Two classes so it outranks .beyond-card p. */ .beyond-card .beyond-card-aud{ font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:normal; line-height:1.55;text-transform:none;color:var(--ink-muted); } /* ── Actions: the draft's buttons ─────────────────────────────────────────── A band can end by sending the reader somewhere. These are the same two shapes the reference uses: one filled, one outlined, side by side. They are