/* ============================================================================ Reynald Lercier — Design tokens + page styles :root design tokens (colors, type, spacing, ...) followed by the page-specific rules that consume them, in a single file so the two never drift out of sync. FONTS ----- For a STANDALONE preview (opening the HTML from disk), add this line to so the fonts resolve without the site theme: The Font Awesome variables (--fa-*) are injected by the Font Awesome library itself and are intentionally omitted here. ============================================================================ */ :root { /* ---- Type families ---- */ --font-family-text: "EB Garamond", serif; /* body copy */ --font-family-title: "EB Garamond", serif; /* headings */ --font-family-mono: "IBM Plex Mono", monospace; /* small labels, citation keys */ /* ---- Brand colours ---- */ --color-ink: #10202F; /* blue-tinted near-black — body text, headings */ --color-crimson: #9B1B30; /* crimson — links, headings, accents (from reference page) */ --color-amber: #B5651D; /* amber — hovers, highlights (from reference page) */ --color-ink-dark: #1B2A3B; --color-slate: #4C5C6E; /* secondary text (cool slate-blue) */ --color-sand: #D9CFC2; /* borders / rules (warm sand) */ --color-paper: #F1EEE9; /* light panels (paper tint, from reference page) */ --color-alert: #ad1a2b; /* alerts / errors */ --color-white: #fff; /* ---- Semantic slots (1→9 map to the palette order above) ---- */ --color-text-1: var(--color-ink); --color-text-2: var(--color-crimson); --color-text-3: var(--color-amber); --color-text-4: var(--color-ink-dark); --color-text-5: var(--color-slate); --color-text-6: var(--color-sand); --color-text-7: var(--color-paper); --color-text-8: var(--color-alert); --color-text-9: var(--color-white); --color-background-1: var(--color-ink); --color-background-2: var(--color-crimson); --color-background-3: var(--color-amber); --color-background-4: var(--color-ink-dark); --color-background-5: var(--color-slate); --color-background-6: var(--color-sand); --color-background-7: var(--color-paper); --color-background-8: var(--color-alert); --color-background-9: var(--color-white); --color-border-1: var(--color-ink); --color-border-2: var(--color-crimson); --color-border-3: var(--color-amber); --color-border-4: var(--color-ink-dark); --color-border-5: var(--color-slate); --color-border-6: var(--color-sand); --color-border-7: var(--color-paper); --color-border-8: var(--color-alert); --color-border-9: var(--color-white); /* ---- Type scale (reference = 16px = 1rem) ---- */ --font-size-reference: 16; --font-size-10: calc((10 / var(--font-size-reference)) * 1rem); --font-size-12: calc((13 / var(--font-size-reference)) * 1rem); --font-size-14: calc((16 / var(--font-size-reference)) * 1rem); --font-size-16: calc((16 / var(--font-size-reference)) * 1rem); --font-size-18: calc((18 / var(--font-size-reference)) * 1rem); --font-size-20: calc((20 / var(--font-size-reference)) * 1rem); --font-size-22: calc((22 / var(--font-size-reference)) * 1rem); --font-size-24: calc((24 / var(--font-size-reference)) * 1rem); --font-size-26: calc((26 / var(--font-size-reference)) * 1rem); --font-size-30: calc((30 / var(--font-size-reference)) * 1rem); --font-size-36: calc((36 / var(--font-size-reference)) * 1rem); --font-size-50: calc((50 / var(--font-size-reference)) * 1rem); --font-size-70: calc((70 / var(--font-size-reference)) * 1rem); --font-size-default: var(--font-size-14); --font-size-smaller: smaller; /* ---- Weights / styles ---- */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-bold: 700; --font-style-italic: italic; --font-variant-small-caps: all-small-caps; /* ---- Line heights ---- */ --line-height-100: 100%; --line-height-120: 120%; --line-height-130: 130%; --line-height-150: 150%; --line-height-default: var(--line-height-150); /* ---- Spacing: margins ---- */ --margin-2: 2px; --margin-5: 5px; --margin-8: 8px; --margin-10: 10px; --margin-16: 16px; --margin-20: 20px; /* ---- Spacing: paddings ---- */ --padding-5: 5px; --padding-8: 8px; --padding-10: 10px; --padding-14: 14px; --padding-16: 16px; --padding-20: 20px; --padding-24: 24px; --padding-30: 30px; --padding-40: 40px; --padding-50: 50px; --padding-80: 80px; --padding-100: 100px; /* ---- Spacing: gaps ---- */ --gap-4: 4px; --gap-6: 6px; --gap-10: 10px; --gap-12: 12px; --gap-14: 14px; --gap-16: 16px; --gap-18: 18px; --gap-20: 20px; --gap-30: 30px; --gap-40: 40px; --gap-60: 60px; --gap-80: 80px; --gap-160: 160px; --gap-main: var(--gap-40); /* ---- Layout widths / heights ---- */ --width-page-print: 1000px; --max-width-inner: 1920px; --max-width-main: 1200px; --max-width-content: 940px; --max-width-sidebar: calc(var(--max-width-main) - var(--gap-main) - var(--max-width-content)); --height-header-small: 80px; --height-header-large: 130px; /* ---- Radii / borders ---- */ --border-radius-5: 5px; --border-radius-10: 10px; --border-radius-round: 50%; --border-width-1: 1px; --border-width-2: 2px; --border-width-4: 4px; /* ---- Aspect ratios ---- */ --aspect-ratio-16-9: 16/9; --aspect-ratio-3-2: 3/2; --aspect-ratio-1: 1; --aspect-ratio-2-3: 2/3; /* ---- Opacity ---- */ --opacity-0: 0; --opacity-1: 1; /* ---- Transitions ---- */ --transition-duration-0-25: 0.25s; --transition-duration-0-5: 0.5s; --transition-function-ease: ease; /* ---- Z-index stack ---- */ --z-index-menu: 40; --z-index-skip-links: 30; --z-index-header: 20; --z-index-cookies: 10; --z-index-above: 1; --z-index-base: 0; --z-index-below: -1; } /* Page shell — role variables map onto the design tokens above. Two-column flex layout: main content on the left, sticky TOC sidebar on the right (collapses to a single column on mobile, see media query below). */ .rl-page { --heading: var(--color-ink); /* section headings & labels */ --link: var(--color-crimson); /* links, icons, active states */ --ink: var(--color-ink); /* body text #10202F */ --ink-soft: var(--color-slate); /* secondary #4C5C6E */ --line: var(--color-sand); /* rules #D9CFC2 */ display: flex; align-items: flex-start; gap: var(--gap-40, 2.5rem); font-family: var(--font-family-text, "Poppins", sans-serif); color: var(--ink); line-height: 1.275; font-size: var(--font-size-default); } .rl-page, .rl-page *, .rl-page *::before, .rl-page *::after { box-sizing: border-box; } .rl-page h1, .rl-page h2, .rl-page h3 { font-family: var(--font-family-title, "Space Grotesk", sans-serif); line-height: 1.3; } /* Main content column */ .rl-content { flex: 1 1 auto; min-width: 0; max-width: 840px; } /* Sidebar table of contents — sticky on desktop, becomes a tap-to-expand accordion on mobile (see the .rl-toc-toggle rules and media query below). */ .rl-toc { flex: 0 0 190px; width: 190px; position: sticky; top: 1.5rem; align-self: flex-start; font-size: var(--font-size-14); } .rl-toc-heading { margin: 0 0 0.7rem; display: flex; align-items: center; justify-content: flex-end; width: 100%; } /* Toggle button (the accordion "selector") — a caret only, no label. Hidden on desktop (the list is always shown there, see media query below). It becomes the real accordion opener on mobile. */ .rl-toc-toggle { display: none; align-items: center; justify-content: center; background: none; border: none; padding: 0.2rem; margin: 0 0 0 -0.2rem; color: var(--ink-soft); font: inherit; cursor: default; pointer-events: none; } .rl-toc-toggle:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; } .rl-toc-caret { display: inline-block; font-size: var(--font-size-12); } .rl-toc ul { list-style: none; margin: 0; padding: 0; } .rl-toc li { margin: 0; } .rl-toc-link { display: block; padding: 0.35rem 0 0.35rem 0.7rem; border-left: 2px solid var(--line); color: var(--ink-soft); text-decoration: none; line-height: 1.3; transition: color 0.2s ease, border-color 0.2s ease; } .rl-toc-link:hover { color: var(--ink); } .rl-toc-link.is-active { color: var(--color-crimson); border-left-color: var(--color-crimson); font-weight: 600; } .rl-page h2[id] { scroll-margin-top: 1.5rem; } /* Mobile layout: single column, and the TOC becomes a tap-to-expand accordion instead of a sticky sidebar. */ @media (max-width: 900px) { .rl-page { display: block; } .rl-toc { position: static; width: auto; margin: 0 0 1.8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .rl-toc-heading { margin: 0; padding: 0.5rem 0; justify-content: space-between; } .rl-toc-toggle { display: inline-flex; cursor: pointer; pointer-events: auto; } .rl-toc-caret { transition: transform 0.2s ease; } .rl-toc.is-open .rl-toc-caret { transform: rotate(180deg); } .rl-toc > ul { display: none; margin-top: 0.7rem; } .rl-toc.is-open > ul { display: block; } .rl-content { max-width: 100%; } } /* Header */ .rl-header { margin: 0 0 1.6rem; display: flex; align-items: center; gap: 1.6rem; } .rl-header-photo { flex: 0 0 auto; width: 190px; height: 190px; border-radius: 16px; object-fit: cover; border: 1px solid var(--line); } .rl-header-text { flex: 1 1 auto; min-width: 0; } .rl-affil-logo { flex: 0 0 auto; height: 48px; width: auto; margin-left: auto; } .rl-header h1 { font-size: var(--font-size-36); margin: 0 0 0.3rem; } .rl-header .role { font-size: var(--font-size-16); color: var(--ink-soft); margin: 0 0 1rem; } .rl-contact-row { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: var(--font-size-12); margin-left: 0.9rem; } .rl-contact-row a { color: var(--link); text-decoration: none; } .rl-contact-row a:hover { text-decoration: underline; } .rl-icon { color: currentColor; width: 1.1em; margin-right: 0.35rem; display: inline-block; text-align: center; } /* Small phones: stack the header and shrink the profile photo */ @media (max-width: 520px) { .rl-header { flex-wrap: wrap; } .rl-header-photo { width: 148px; height: 148px; order: 1; } .rl-affil-logo { order: 2; height: 32px; } .rl-header-text { order: 3; flex: 1 1 100%; margin-top: 0.9rem; } } .rl-page h2 { font-size: var(--font-size-26); color: var(--heading); margin: 2.4rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--line); } .rl-page h3 { font-size: var(--font-size-18); margin: 1.6rem 0 0.6rem; } .rl-page p { margin: 0 0 1rem; } .rl-page ul { margin: 0 0 1rem; padding-left: 1.2rem; } .rl-page li { margin-bottom: 0.5rem; } .rl-page a { color: var(--link); } .rl-page a:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; } /* Publication list */ ul.rl-pub-list { list-style: none; padding-left: 1.2rem; margin: 0 0 1rem; } ul.rl-pub-list li { padding: 0.3rem 0; margin-bottom: 0.25rem; color: var(--color-slate); /* cool slate-blue */ } ul.rl-pub-list .pub-key { font-family: var(--font-family-mono, monospace); color: var(--ink-soft); font-weight: 500; margin-right: 0.3rem; } .rl-links { display: block; margin-top: 0.25rem; font-family: var(--font-family-mono, monospace); font-size: var(--font-size-12); } .rl-links a { margin-right: 1rem; text-decoration: none; } .rl-links a:hover { text-decoration: underline; } .rl-links i { margin-right: 0.3rem; } /* Software cards */ ul.rl-software-list { list-style: none; padding-left: 1.2rem; } ul.rl-software-list li { padding: 0; margin-bottom: 1.1rem; } ul.rl-software-list li:last-child { margin-bottom: 0; } ul.rl-software-list strong { display: block; margin-bottom: 0.15rem; } .rl-page .desc { color: var(--ink-soft); font-size: var(--font-size-14); margin: 0.15rem 0 0; } /* Teaching entries — same rhythm as software cards: entries sit further apart from each other than their own internal lines do. */ ul.rl-teaching-list { padding-left: 1.2rem; } ul.rl-teaching-list li { margin-bottom: 1.1rem; } ul.rl-teaching-list li:last-child { margin-bottom: 0; } ul.rl-software-list .rl-links, ul.rl-teaching-list .rl-links { margin-top: 0.15rem; } /* Links row (icons + label) */ ul.rl-links-list { list-style: none; padding-left: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.6rem; } ul.rl-links-list li { padding: 0; border: none; margin: 0; } ul.rl-links-list a { text-decoration: none; white-space: nowrap; } ul.rl-links-list a:hover { text-decoration: underline; } /* Italic note under a section intro, e.g. the publications pointer */ .rl-note { color: var(--ink-soft); font-style: italic; font-size: var(--font-size-14); margin: 0 0 1.4rem; } /* Date label prefixing each News entry, e.g. "April 2026 — ..." */ .rl-news-date { display: inline-block; /* font-family: var(--font-family-mono, monospace); */ /* font-size: var(--font-size-12); */ /* color: var(--ink-soft); */ white-space: nowrap; } .rl-news-date::after { content: "—"; margin: 0 0.6rem; /* font-family: var(--font-family-mono, monospace); */ /* color: var(--ink-soft); */ } /* Language toggle — sits at the right of the TOC heading row, in the space the old "on this page" title used to occupy. */ .rl-lang-toggle { display: flex; align-items: center; gap: 0.3rem; line-height: 1; } .rl-lang-toggle a, .rl-lang-toggle span { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-family-mono, monospace); font-size: var(--font-size-12); font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 999px; text-decoration: none; } .rl-lang-toggle a { color: var(--ink-soft); } .rl-lang-toggle a:hover { color: var(--ink); background: var(--color-paper); } .rl-lang-toggle span.is-current { color: var(--ink); } .rl-lang-toggle .rl-lang-sep { color: var(--line); padding: 0; font-weight: 400; }