:root { /* Institutional palette: UFRGS blue (links, primary) + INF-UFRGS red (accents) */ --ufrgs-blue: #003366; --ufrgs-blue-dark: #002347; --ufrgs-blue-light: #004fce; /* link color — matches original site (Hestia accent) */ --ufrgs-blue-lighter: #3370e6; /* lighter shade of #004fce for link hover */ --inf-red: #ED1C24; --inf-red-dark: #B81017; --bg: #ffffff; --bg-soft: #f5f5f6; --bg-page: #f3f4f5; /* page-level neutral gray (body background) */ --surface: #ffffff; /* raised surfaces: header, container, chips */ --border: #e5e5e7; --neutral-divider: #c4c5c8; /* subtle dividers (e.g. nav hover underline) */ --text: #1a1a1c; --text-muted: #6c6e72; --link: var(--ufrgs-blue-light); --link-hover: var(--ufrgs-blue-lighter); /* Tinted overlays derived from brand colors (for badges, current-page bg) */ --tint-blue-soft: rgba(0, 51, 102, 0.08); /* derived from --ufrgs-blue */ --tint-blue-border: rgba(0, 51, 102, 0.2); --tint-red-soft: rgba(237, 28, 36, 0.05); /* derived from --inf-red */ /* Status / category accent palette (used by tags). Discreet tints. */ --accent-green: #2a7a3a; --tint-green-soft: rgba(42, 122, 58, 0.08); --tint-green-border: rgba(42, 122, 58, 0.25); --accent-orange: #b86e1e; --tint-orange-soft: rgba(184, 110, 30, 0.08); --tint-orange-border: rgba(184, 110, 30, 0.25); --radius: 6px; --radius-pill: 999px; --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); /* Sticky-header drop shadow — pulled out as a variable so the dark theme can swap it for a stronger version (rgba(0,0,0) at low alpha is invisible against a dark surface). */ --header-shadow: 0 1px 10px -6px rgba(0, 0, 0, 0.42), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px -2px rgba(0, 0, 0, 0.10); --font-sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: var(--font-sans); /* Harmonic type scale (~1.2 ratio for headings, anchored at 19px body) */ --text-xs: 0.875rem; /* 14px — tags, micro labels */ --text-sm: 1.0625rem; /* 17px — meta, captions, nav, secondary UI */ --text-base: 1.1875rem; /* 19px — body */ --text-md: 1.3125rem; /* 21px — lead */ --text-lg: 1.4375rem; /* 23px — h3 */ --text-xl: 1.75rem; /* 28px — h2 */ --text-2xl: 2.0625rem; /* 33px — h1 default */ --text-3xl: 2.5rem; /* 40px — hero h1 */ --container: 1080px; } /* ======================================================================== Dark mode ------------------------------------------------------------------------ Two activation paths: 1. The OS-level `prefers-color-scheme: dark` media query — the default for users who haven't expressed an explicit preference on this site. 2. An explicit `data-theme="dark"` attribute on — applied by a bootstrap script in when the user has saved a manual choice in localStorage. This wins over the OS preference. The light theme is the default in `:root` above; dark mode just swaps the values of the same custom properties so every downstream rule keeps working without modification. ======================================================================== */ /* Shared dark-mode token block — copy in both selectors below to avoid relying on CSS-variable-of-variables (which gets harder to debug). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1a1a1c; --bg-soft: #2a2c30; --bg-page: #131316; --surface: #222426; --border: #3a3c40; --neutral-divider: #4a4c50; --text: #e8e8ea; --text-muted: #a4a6ab; /* Lifted brand-blues — the originals (#003366 / #002347) are too dark to be visible against the dark surfaces; these are still recognizably UFRGS but with enough lightness to work as both fg and bg. */ --ufrgs-blue: #5a8fcf; --ufrgs-blue-dark: #3a6da8; --ufrgs-blue-light: #7aaaff; --ufrgs-blue-lighter: #a4c4ff; /* Accents — slightly brighter so tags read on dark surfaces. */ --accent-green: #6bc082; --accent-orange: #d99e60; /* Tints — built from the lifted accents instead of the originals. */ --tint-blue-soft: rgba(122, 170, 255, 0.13); --tint-blue-border: rgba(122, 170, 255, 0.35); --tint-red-soft: rgba(237, 28, 36, 0.12); --tint-green-soft: rgba(107, 192, 130, 0.13); --tint-green-border: rgba(107, 192, 130, 0.35); --tint-orange-soft: rgba(217, 158, 96, 0.13); --tint-orange-border:rgba(217, 158, 96, 0.35); /* Shadows go deeper / more diffuse on dark — pure black at low alpha. */ --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); /* Header shadow — pushed harder than light mode (alpha ~0.6/0.4/0.3 vs light's 0.42/0.12/0.10) so the dark band reads as a visible drop against the dark surface instead of disappearing. */ --header-shadow: 0 1px 10px -6px rgba(0, 0, 0, 0.7), 0 1px 10px 0 rgba(0, 0, 0, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.4); } } :root[data-theme="dark"] { --bg: #1a1a1c; --bg-soft: #2a2c30; --bg-page: #131316; --surface: #222426; --border: #3a3c40; --neutral-divider: #4a4c50; --text: #e8e8ea; --text-muted: #a4a6ab; --ufrgs-blue: #5a8fcf; --ufrgs-blue-dark: #3a6da8; --ufrgs-blue-light: #7aaaff; --ufrgs-blue-lighter: #a4c4ff; --accent-green: #6bc082; --accent-orange: #d99e60; --tint-blue-soft: rgba(122, 170, 255, 0.13); --tint-blue-border: rgba(122, 170, 255, 0.35); --tint-red-soft: rgba(237, 28, 36, 0.12); --tint-green-soft: rgba(107, 192, 130, 0.13); --tint-green-border: rgba(107, 192, 130, 0.35); --tint-orange-soft: rgba(217, 158, 96, 0.13); --tint-orange-border:rgba(217, 158, 96, 0.35); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --header-shadow: 0 1px 10px -6px rgba(0, 0, 0, 0.7), 0 1px 10px 0 rgba(0, 0, 0, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg-page); color: var(--text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--link); text-decoration: none; } /* Center-out underline reveal on hover for blue text links. The underline uses currentColor so it always matches the link color, and grows from the center toward both edges. Speed matches the nav-menu underline (0.12s ease-out). Honors prefers-reduced-motion. */ a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 50% calc(100% - 0.12em); background-size: 0 0.08em; } a:hover { background-size: 100% 0.08em; transition: background-size 0.12s ease-out; } @media (prefers-reduced-motion: reduce) { a:hover { transition: none; } } /* Opt-out for links that have their own hover treatment or are icon-only (no text to underline). */ .site-header a, .year-jump a, .pub-link-icon, .pub-bibtex-toggle, .pub-bibtex-copy { background-image: none; } h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--text); line-height: 1.25; margin: 0 0 0.5em; letter-spacing: -0.01em; } h1 { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.015em; } h2 { font-size: var(--text-xl); font-weight: 600; margin-top: 2rem; } h3 { font-size: var(--text-lg); font-weight: 500; } h4 { font-size: var(--text-md); font-weight: 600; } p { margin: 0 0 1em; } ul, ol { padding-left: 1.25rem; } code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; } /* Main content "card" — Hestia-style raised panel over gray page bg */ main.container { background: var(--surface); border-radius: var(--radius); padding: 2rem 2.5rem; margin-top: 1.75rem; margin-bottom: 2.5rem; box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.20); } /* When the container fills the viewport edge-to-edge: - drop the rounded corners (would be clipped at viewport edges) - glue the container's top to the bottom of the site header - remove the bottom margin and grow the container to fill any remaining viewport space below it (no gray gap at the bottom) - hide the header shadow by default; show it only when scrolled (handled by JS adding .is-scrolled to .site-header) */ @media (max-width: 1080px) { body { display: flex; flex-direction: column; min-height: 100vh; } main.container { border-radius: 0; margin-top: 0; margin-bottom: 0; flex: 1 0 auto; } } @media (max-width: 720px) { /* Tighter horizontal padding on narrow screens — keep vertical padding unchanged so the photo's vertical position is identical to the ≤860px stacked layout (avoids the photo "rising" at this breakpoint). Margins are managed by the ≤1080px fullbleed block (margin-top/bottom: 0); don't override. */ main.container { padding: 2rem 1.25rem; } } /* Header — light, with INF-UFRGS logo */ .site-header { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); box-shadow: var(--header-shadow); position: sticky; top: 0; z-index: 10; } .site-header a { color: var(--text); } .site-header a:hover { text-decoration: none; } /* Fullbleed (≤1080px): hide header shadow until the page is scrolled. Defined AFTER the base .site-header rule so it wins on cascade. */ @media (max-width: 1080px) { .site-header { box-shadow: none; transition: box-shadow 200ms ease; } .site-header.is-scrolled { box-shadow: var(--header-shadow); } } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.85rem; padding-bottom: 0.85rem; min-height: 56px; /* matches base logo height; ensures stable cross-axis */ line-height: 1; /* kill inherited body line-height ghost space */ } .header-row > * { align-self: center; margin-top: 0; margin-bottom: 0; } .brand { display: flex; align-items: center; font-weight: 600; text-decoration: none; line-height: 0; /* prevent baseline whitespace below the img */ /* Don't let the flex parent (.header-row) squeeze the brand below its intrinsic size — would distort the logo (compressed width with fixed height) at narrow viewports between mobile-nav breakpoint and desktop. */ flex-shrink: 0; } .brand:hover { text-decoration: none; } .brand-logo { /* Fixed 56px on desktop (no fluid scaling). The JS-driven nav-collapse in partials/header.njk fires the hamburger BEFORE space gets tight, so the logo never has to compete with the nav for room — it can stay at full size until the mobile breakpoint switches it to 44px. */ height: 56px; width: auto; display: block; vertical-align: middle; /* Override the global `img { max-width: 100% }` rule so the logo can occupy its full intrinsic width inside a constrained flex parent. */ max-width: none; } /* Light/dark logo swap. Both files are loaded so the swap is instant when the theme toggles (no flash); CSS hides the wrong one. */ .brand-logo-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo-light { display: none; } :root:not([data-theme="light"]) .brand-logo-dark { display: block; } } :root[data-theme="dark"] .brand-logo-light { display: none; } :root[data-theme="dark"] .brand-logo-dark { display: block; } /* Theme menu — last item in the nav. The trigger looks like a regular nav link (matching font, weight, and underline behaviour); clicking it reveals a small dropdown with three options (System / Dark / Light). In the collapsed (mobile) nav, the dropdown drops its absolute positioning and renders inline so it nests inside the hamburger layout naturally. */ .theme-menu { position: relative; /* Extra breathing room before the toggle so it reads as a separate control rather than just another nav item. Adds to the parent ul's gap (1.4rem), giving ~2.2rem total separation from the previous item. */ margin-left: 0.8rem; } .theme-menu-trigger { /* Icon-only trigger that should ride the same line as the surrounding text nav items. We don't override `display`, so a