/* =====================================================================
SPECTRUM OF CARE — Luminous Editorial system
Dr. Giancarlo Spizzirri
Type: Fraunces (display) · Hanken Grotesk (body) · IBM Plex Mono (labels)
===================================================================== */
/* ===== SELF-HOSTED FONTS =====
Variable woff2 subsets (latin + latin-ext) served from our own origin —
no render-blocking third-party CSS, same-origin HTTP/2, 1-year cache.
Files and unicode-ranges mirror Google Fonts' css2 output. */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 600;
font-display: swap;
src: url(assets/fonts/fraunces-normal-300-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 600;
font-display: swap;
src: url(assets/fonts/fraunces-normal-300-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 300 500;
font-display: swap;
src: url(assets/fonts/fraunces-italic-300-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 300 500;
font-display: swap;
src: url(assets/fonts/fraunces-italic-300-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(assets/fonts/hankengrotesk-normal-300-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(assets/fonts/hankengrotesk-normal-300-700-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/ibmplexmono-normal-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/ibmplexmono-normal-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/ibmplexmono-normal-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/ibmplexmono-normal-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(assets/fonts/ibmplexmono-normal-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(assets/fonts/ibmplexmono-normal-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* --- Progress Pride hues (the DNA) --- */
--red: #E40303;
--orange: #FF8C00;
--yellow: #F5C400;
--green: #00913C;
--blue: #2E4FB0;
--violet: #8A2EA0;
--sky: #5BCEFA;
--pink: #F5A9B8;
--brown: #613915;
/* --- Text-safe ink variants of the hues (AA contrast on bone) ---
Use these wherever a hue colours TEXT or sits behind white text/glyphs;
keep the pure hues for bars, dots, glows, and other graphics. */
--red-ink: color-mix(in srgb, var(--red) 78%, var(--ink));
--orange-ink: color-mix(in srgb, var(--orange) 55%, var(--ink));
--yellow-ink: color-mix(in srgb, var(--yellow) 45%, var(--ink));
--green-ink: color-mix(in srgb, var(--green) 68%, var(--ink));
--blue-ink: var(--blue);
--violet-ink: var(--violet);
--sky-ink: color-mix(in srgb, var(--sky) 45%, var(--ink));
/* --- Editorial canvas --- */
--bone: #FAF6EF;
--bone-2: #F1E9DB;
--ink: #181227;
--ink-soft: #574e6e;
--ink-faint: #8b8298;
--line: rgba(24, 18, 39, 0.12);
--line-soft: rgba(24, 18, 39, 0.07);
/* --- Dark bands (hero / footer) --- */
--midnight: #0B0916;
--midnight-2: #161029;
--on-dark: #FAF6EF;
--on-dark-soft: rgba(250, 246, 239, 0.72);
/* --- Signature spectrum --- */
--spectrum: linear-gradient(90deg, #E40303 0%, #FF8C00 20%, #F5C400 38%, #00913C 58%, #2E4FB0 78%, #8A2EA0 100%);
--spectrum-soft: linear-gradient(90deg, rgba(228, 3, 3, .85), rgba(255, 140, 0, .85), rgba(245, 196, 0, .85), rgba(0, 145, 60, .85), rgba(46, 79, 176, .85), rgba(138, 46, 160, .85));
/* --- Progressive Pride flag (Daniel Quasar) --- */
/* Order: black · brown · sky · pink · white → red · orange · yellow · green · blue · violet */
--progressive-pride: linear-gradient(90deg,
#000000 0% 9%,
#613915 9% 18%,
#5BCEFA 18% 27%,
#F5A9B8 27% 36%,
#ffffff 36% 45%,
#E40303 45% 57%,
#FF8C00 57% 67%,
#F5C400 67% 75%,
#00913C 75% 83%,
#2E4FB0 83% 91%,
#8A2EA0 91% 100%
);
--progressive-pride-v: linear-gradient(180deg,
#000000 0% 9%,
#613915 9% 18%,
#5BCEFA 18% 27%,
#F5A9B8 27% 36%,
#ffffff 36% 45%,
#E40303 45% 57%,
#FF8C00 57% 67%,
#F5C400 67% 75%,
#00913C 75% 83%,
#2E4FB0 83% 91%,
#8A2EA0 91% 100%
);
/* --- Geometry & motion --- */
--navbar-h: 75px;
/* height of the scrolled (condensed) navbar — keep sticky offsets in sync */
--radius: 18px;
--radius-lg: 28px;
--maxw: 1240px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--shadow-plate: 0 2px 4px rgba(24, 18, 39, .04), 0 24px 60px -28px rgba(24, 18, 39, .35);
--focus-ring: 0 0 0 3px rgba(46, 79, 176, .45);
}
/* ===== LANGUAGE VISIBILITY ===== */
.lang-en {
display: none !important;
}
html[lang="en"] .lang-pt {
display: none !important;
}
html[lang="en"] .lang-en {
display: block !important;
}
html[lang="en"] span.lang-en,
html[lang="en"] a.lang-en,
html[lang="en"] em.lang-en {
display: inline !important;
}
/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 96px;
-webkit-text-size-adjust: 100%;
}
body {
font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--ink);
background-color: var(--bone);
line-height: 1.6;
font-size: 1.0625rem;
font-weight: 400;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4 {
font-family: 'Fraunces', Georgia, serif;
font-optical-sizing: auto;
line-height: 1.04;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--ink);
}
a {
text-decoration: none;
color: inherit;
transition: color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
img {
max-width: 100%;
height: auto;
display: block;
}
p {
text-wrap: pretty;
}
::selection {
background: var(--violet);
color: #fff;
}
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 2.5rem;
}
/* shared eyebrow / mono label */
.eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
}
/* ===== GRAIN OVERLAY ===== */
.grain {
position: fixed;
inset: 0;
z-index: 9000;
pointer-events: none;
opacity: 0.5;
mix-blend-mode: soft-light;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ===== ACCESSIBILITY ===== */
.skip-to-content {
position: absolute;
top: -100px;
left: 0;
background: var(--ink);
color: var(--bone);
padding: 0.875rem 1.5rem;
font-weight: 600;
z-index: 10000;
border-radius: 0 0 10px 0;
transition: top 0.3s ease;
}
.skip-to-content:focus {
top: 0;
}
:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 3px;
border-radius: 3px;
}
/* ===== NAVIGATION ===== */
.navbar {
position: fixed;
inset: 0 0 auto 0;
z-index: 1000;
transition: background .5s var(--ease), backdrop-filter .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
border-bottom: 1px solid transparent;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2.5rem;
transition: padding .5s var(--ease);
position: relative;
}
.navbar.scrolled {
background: rgba(250, 246, 239, 0.82);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
border-bottom-color: var(--line);
}
.navbar.scrolled .container {
padding-top: 1rem;
padding-bottom: 1rem;
}
/* spectrum hairline under nav when scrolled */
.navbar::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: var(--spectrum);
opacity: 0;
transform: scaleX(0.2);
transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.navbar.scrolled::after {
opacity: 1;
transform: scaleX(1);
}
.brand {
font-family: 'Fraunces', serif;
font-size: 1.3rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
white-space: nowrap;
flex-shrink: 0;
}
.navbar:not(.scrolled) .brand {
color: var(--on-dark);
}
.nav-links {
display: flex;
list-style: none;
gap: 1.4rem;
align-items: center;
}
/* Three-zone desktop bar: brand (left) · section links (centered) ·
actions (right). The section group is taken out of flow and centered in
the bar, so the brand stays left and the divider + cross-page CTA +
language toggle sit flush right — regardless of how many links there are. */
.nav-sections {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.nav-sections-list {
display: flex;
align-items: center;
gap: 1.6rem;
list-style: none;
}
/* ---- in-page section anchors ---- */
.nav-link {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
position: relative;
padding-bottom: 3px;
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
white-space: nowrap;
}
.nav-link .nav-num {
display: none;
}
.navbar:not(.scrolled) .nav-link {
color: var(--on-dark);
}
.navbar:not(.scrolled) .nav-link .nav-num {
color: var(--on-dark-soft);
}
.nav-link::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1.5px;
background: var(--spectrum);
transition: width .4s var(--ease);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.active::after {
width: 100%;
}
.nav-link:hover .nav-num,
.nav-link:focus-visible .nav-num,
.nav-link.active .nav-num {
color: var(--violet);
}
.navbar:not(.scrolled) .nav-link:hover .nav-num,
.navbar:not(.scrolled) .nav-link.active .nav-num {
color: var(--sky);
}
/* ---- "On this page" signpost (drawer only) ---- */
.nav-group-label {
display: none;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* ---- divider between in-page anchors and cross-page navigation ---- */
.nav-divider {
width: 1px;
height: 22px;
background: var(--line);
flex-shrink: 0;
}
.navbar:not(.scrolled) .nav-divider {
background: rgba(250, 246, 239, .28);
}
/* ---- cross-page link: a distinct destination pill ----
This is the one element that sends people to the *other* page, so it
carries the only colour in an otherwise monochrome bar: a live spectrum
ring, a filled arrow chip, and a slow breathing glow that quietly says
"there's a whole page over here." */
.nav-cta {
position: relative;
isolation: isolate;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.45rem 0.4rem 1.05rem;
border: 1.6px solid transparent;
border-radius: 100px;
white-space: nowrap;
/* spectrum ring via two-layer background-clip: solid inner + gradient border */
background:
linear-gradient(var(--bone), var(--bone)) padding-box,
var(--spectrum) border-box;
transition: var(--ease) .4s;
transition-property: transform, box-shadow, background;
}
/* soft spectrum halo behind the pill */
.nav-cta::before {
content: '';
position: absolute;
inset: -3px;
z-index: -1;
border-radius: inherit;
background: var(--spectrum);
filter: blur(10px);
opacity: 0;
transition: opacity .45s var(--ease);
}
/* the forward CTA (not the "back" variant) breathes to draw the eye —
a calm, low-amplitude pulse so it reads as alive without flickering */
.nav-cta:not(.nav-cta-back)::before {
opacity: .18;
animation: navCtaBreathe 5s ease-in-out infinite;
}
@keyframes navCtaBreathe {
0%, 100% { opacity: .12; }
50% { opacity: .24; }
}
/* arrow lives in a filled chip — a clear "go" affordance */
.nav-cta .nav-cta-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.55rem;
height: 1.55rem;
border-radius: 50%;
font-size: 0.95em;
background: var(--ink);
color: var(--bone);
flex-shrink: 0;
transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.nav-cta:hover,
.nav-cta:focus-visible {
transform: translateY(-1px);
box-shadow: 0 12px 26px -14px rgba(24, 18, 39, .55);
}
.nav-cta:hover::before,
.nav-cta:focus-visible::before {
opacity: .6;
animation: none;
}
.nav-cta:hover .nav-cta-arrow,
.nav-cta:focus-visible .nav-cta-arrow {
transform: translate(2px, -2px);
}
.nav-cta.nav-cta-back:hover .nav-cta-arrow,
.nav-cta.nav-cta-back:focus-visible .nav-cta-arrow {
transform: translateX(-3px);
}
/* over the dark hero: stay discreet — a quiet bone outline, no spectrum
ring and no glow. The colour is saved for the scrolled bar. */
.navbar:not(.scrolled) .nav-cta {
color: var(--on-dark);
border-color: rgba(250, 246, 239, .3);
background: rgba(250, 246, 239, .05);
}
.navbar:not(.scrolled) .nav-cta::before {
opacity: 0 !important;
animation: none !important;
}
.navbar:not(.scrolled) .nav-cta .nav-cta-arrow {
background: transparent;
color: var(--on-dark);
border: 1.5px solid rgba(250, 246, 239, .42);
}
.navbar:not(.scrolled) .nav-cta:hover,
.navbar:not(.scrolled) .nav-cta:focus-visible {
background: rgba(250, 246, 239, .12);
border-color: rgba(250, 246, 239, .55);
}
.navbar:not(.scrolled) .nav-cta:hover .nav-cta-arrow,
.navbar:not(.scrolled) .nav-cta:focus-visible .nav-cta-arrow {
background: var(--bone);
color: var(--ink);
border-color: var(--bone);
}
/* language toggle — segmented PT | EN control; the filled side is the
active language, driven entirely by the html[lang] attribute */
.lang-toggle {
font-family: 'IBM Plex Mono', monospace;
background: transparent;
color: var(--ink);
border: 1.5px solid var(--line);
border-radius: 100px;
padding: 3px;
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.1em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 2px;
transition: var(--ease) .35s;
transition-property: border-color, transform;
}
.lang-seg {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.32rem 0.7rem;
border-radius: 100px;
color: var(--ink-faint);
transition: background .35s var(--ease), color .35s var(--ease);
}
html:not([lang="en"]) .lang-seg-pt,
html[lang="en"] .lang-seg-en {
background: var(--ink);
color: var(--bone);
}
.navbar:not(.scrolled) .lang-toggle {
color: var(--on-dark);
border-color: rgba(250, 246, 239, .35);
}
.navbar:not(.scrolled) .lang-seg {
color: var(--on-dark-soft);
}
html:not([lang="en"]) .navbar:not(.scrolled) .lang-seg-pt,
html[lang="en"] .navbar:not(.scrolled) .lang-seg-en {
background: var(--bone);
color: var(--ink);
}
.lang-toggle:hover,
.lang-toggle:focus-visible {
border-color: var(--ink);
transform: translateY(-1px);
}
.navbar:not(.scrolled) .lang-toggle:hover,
.navbar:not(.scrolled) .lang-toggle:focus-visible {
border-color: rgba(250, 246, 239, .7);
}
.mobile-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
z-index: 1100;
}
.mobile-toggle span {
width: 26px;
height: 2px;
background: var(--ink);
border-radius: 2px;
transition: var(--ease) .35s;
}
.navbar:not(.scrolled) .mobile-toggle span {
background: var(--on-dark);
}
.mobile-toggle.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.mobile-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-toggle.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ---- mobile-only research shortcut (floats under the hamburger) ----
Discreet glass disc with an academic-book glyph + a tiny spectrum dot so
the second page is reachable in one tap without opening the menu. */
.nav-research-fab {
display: none;
position: fixed;
top: 4.4rem;
/* centre under the hamburger: it sits flush to the container's right
padding (2.5rem here), so right = padding − 1px lines the two
44px/42px discs up exactly. The ≤640px breakpoint re-matches below. */
right: calc(2.5rem - 1px);
z-index: 1090;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--ink);
border: 1.5px solid var(--line);
background: rgba(250, 246, 239, .72);
backdrop-filter: blur(12px) saturate(1.3);
-webkit-backdrop-filter: blur(12px) saturate(1.3);
box-shadow: 0 10px 24px -14px rgba(24, 18, 39, .55);
transition: transform .35s var(--ease), opacity .3s var(--ease),
background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.nav-research-fab svg {
width: 21px;
height: 21px;
}
.nav-research-fab-dot {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--spectrum);
box-shadow: 0 0 0 2px rgba(250, 246, 239, .85);
}
.nav-research-fab:hover,
.nav-research-fab:focus-visible {
transform: translateY(-2px);
border-color: var(--ink);
box-shadow: 0 14px 28px -14px rgba(24, 18, 39, .6);
}
/* over the dark hero: light-on-dark, dark glass */
.navbar:not(.scrolled) .nav-research-fab {
color: var(--on-dark);
border-color: rgba(250, 246, 239, .28);
background: rgba(11, 9, 22, .35);
}
.navbar:not(.scrolled) .nav-research-fab:hover,
.navbar:not(.scrolled) .nav-research-fab:focus-visible {
border-color: rgba(250, 246, 239, .6);
}
.navbar:not(.scrolled) .nav-research-fab-dot {
box-shadow: 0 0 0 2px rgba(11, 9, 22, .5);
}
/* fold away while the drawer is open */
.mobile-toggle.active ~ .nav-research-fab {
opacity: 0;
transform: scale(.8);
pointer-events: none;
}
/* tuck away while scrolling down past the hero so it never sits on top of
content; scrolling up (or returning near the top) brings it back */
.nav-research-fab.fab-hidden {
opacity: 0;
transform: scale(.8);
pointer-events: none;
}
/* ===== BUTTONS ===== */
.btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 1rem 1.9rem;
border-radius: 100px;
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.01em;
cursor: pointer;
border: 1.5px solid transparent;
transition: var(--ease) .4s;
transition-property: background, color, border-color, transform, box-shadow;
line-height: 1;
}
.btn .arrow {
transition: transform .4s var(--ease);
}
.btn:hover .arrow {
transform: translateX(4px);
}
.btn-primary {
background: var(--ink);
color: var(--bone);
}
.btn-primary:hover,
.btn-primary:focus-visible {
transform: translateY(-2px);
box-shadow: 0 14px 30px -12px rgba(24, 18, 39, .6);
}
.btn-outline {
background: transparent;
border-color: var(--line);
color: var(--ink);
}
.btn-outline:hover,
.btn-outline:focus-visible {
border-color: var(--ink);
transform: translateY(-2px);
}
/* on the dark hero */
/* frosted-glass CTA — sits within the cosmic hero instead of punching
a bright white slab through it */
.hero .btn-primary {
background: rgba(250, 246, 239, 0.09);
color: var(--on-dark);
border-color: rgba(250, 246, 239, 0.34);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
box-shadow: inset 0 1px 0 rgba(250, 246, 239, 0.22);
}
.hero .btn-primary:hover,
.hero .btn-primary:focus-visible {
background: rgba(250, 246, 239, 0.17);
border-color: rgba(250, 246, 239, 0.6);
box-shadow:
inset 0 1px 0 rgba(250, 246, 239, 0.3),
0 16px 44px -18px rgba(91, 206, 250, 0.5),
0 10px 30px -16px rgba(138, 46, 160, 0.45);
}
.hero .btn-outline {
color: var(--on-dark);
border-color: rgba(250, 246, 239, .4);
}
.hero .btn-outline:hover {
border-color: var(--on-dark);
background: rgba(250, 246, 239, .08);
}
/* ===== HERO (dark cosmic) ===== */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
background: var(--midnight);
color: var(--on-dark);
overflow: hidden;
isolation: isolate;
}
/* abstract refracted-prism field — a beam of white light splits into the
Progressive Pride spectrum, fanning down-left from a source in the top-right */
.hero-bg {
position: absolute;
inset: -12%;
z-index: -3;
background:
/* white-light source before refraction */
radial-gradient(28% 32% at 85% 4%, rgba(250, 246, 239, .30), transparent 60%),
/* the refracted spectral fan */
conic-gradient(at 85% 2%,
transparent 196deg,
rgba(91, 206, 250, .24) 205deg,
rgba(245, 169, 184, .24) 213deg,
rgba(228, 3, 3, .22) 221deg,
rgba(255, 140, 0, .26) 229deg,
rgba(245, 196, 0, .22) 237deg,
rgba(0, 145, 60, .21) 246deg,
rgba(138, 46, 160, .28) 255deg,
transparent 265deg);
filter: blur(48px) saturate(1.12);
opacity: 0.92;
transform: scale(1.04);
animation: prismDrift 26s var(--ease-soft) infinite alternate;
}
@keyframes prismDrift {
0% {
transform: scale(1.04) rotate(0deg);
}
100% {
transform: scale(1.13) rotate(2.5deg);
}
}
/* crisp nested spectral chevrons — an echo of the Progressive Pride arrow,
refracting outward toward the right edge */
.hero-prism {
position: absolute;
top: 50%;
right: -2%;
transform: translateY(-50%);
width: min(50vw, 680px);
height: min(94%, 840px);
z-index: -2;
pointer-events: none;
opacity: 0.7;
mix-blend-mode: screen;
animation: prismFloat 18s var(--ease-soft) infinite alternate;
}
@keyframes prismFloat {
0% {
transform: translateY(-50%) translateX(0) rotate(0deg);
}
100% {
transform: translateY(-52.5%) translateX(-1.5%) rotate(-1.6deg);
}
}
.hero::before {
/* dark legibility wash */
content: '';
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(120% 90% at 12% 18%, rgba(11, 9, 22, .15) 0%, rgba(11, 9, 22, .82) 62%, rgba(11, 9, 22, .96) 100%),
linear-gradient(180deg, rgba(11, 9, 22, .55) 0%, rgba(11, 9, 22, .2) 45%, rgba(11, 9, 22, .85) 100%);
}
/* animated spectral mesh glow */
.hero-mesh {
position: absolute;
inset: -20%;
z-index: -2;
pointer-events: none;
background:
radial-gradient(36% 38% at 16% 30%, rgba(138, 46, 160, .52), transparent 70%),
radial-gradient(32% 34% at 82% 24%, rgba(46, 79, 176, .48), transparent 70%),
radial-gradient(34% 36% at 70% 80%, rgba(0, 145, 60, .30), transparent 72%),
radial-gradient(32% 34% at 28% 84%, rgba(255, 140, 0, .32), transparent 72%),
radial-gradient(26% 28% at 52% 54%, rgba(91, 206, 250, .20), transparent 72%);
filter: blur(30px);
animation: meshDrift 22s var(--ease-soft) infinite alternate;
}
@keyframes meshDrift {
0% {
transform: translate3d(-3%, -2%, 0) scale(1);
}
50% {
transform: translate3d(3%, 3%, 0) scale(1.12);
}
100% {
transform: translate3d(-2%, 4%, 0) scale(1.05);
}
}
.hero-inner {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 9rem 2.5rem 7rem;
position: relative;
}
.hero-eyebrow {
display: flex;
align-items: center;
gap: 0.85rem;
color: var(--on-dark-soft);
margin-bottom: 2rem;
}
.hero-eyebrow .dot {
width: 38px;
height: 6px;
border-radius: 100px;
background: var(--progressive-pride);
}
.hero-title {
font-size: clamp(2.85rem, 8vw, 6.6rem);
font-weight: 400;
line-height: 0.98;
letter-spacing: -0.03em;
color: var(--on-dark);
max-width: 16ch;
text-wrap: balance;
}
/* single holds both languages in span wrappers; they must render as
blocks (the generic `span.lang-en { display:inline }` rule would otherwise
win and disturb the stacked reveal-lines) */
.hero-title > .lang-pt {
display: block;
}
html[lang="en"] .hero-title > span.lang-en {
display: block !important;
}
.hero-title em {
font-style: italic;
font-weight: 300;
background: var(--spectrum);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-subtitle {
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
color: var(--on-dark-soft);
font-weight: 350;
max-width: 52ch;
margin: 2rem 0 2.75rem;
line-height: 1.55;
}
.hero-cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* line reveal mechanics — pure CSS, runs on load */
.reveal-line {
display: block;
overflow: hidden;
padding-bottom: 0.06em;
/* room for serif descenders during the slide */
}
.reveal-line>span {
display: block;
animation: lineUp .9s var(--ease) both;
}
/* tight stagger — the title is the LCP element, so the choreography must
finish quickly; same motion, snappier curtain */
.hero-title .reveal-line:nth-child(1)>span {
animation-delay: .05s;
}
.hero-title .reveal-line:nth-child(2)>span {
animation-delay: .12s;
}
.hero-title .reveal-line:nth-child(3)>span {
animation-delay: .19s;
}
@keyframes lineUp {
from {
transform: translateY(108%);
}
to {
transform: translateY(0);
}
}
.fade-up {
animation: fadeUp .95s var(--ease) both;
}
.hero-eyebrow.fade-up {
animation-delay: 0s;
}
/* the subtitle is the page's LCP element — it must be painted at first
render, so it rises without fading (opacity:0 starts push LCP by ~1.3s) */
.hero-subtitle.fade-up {
animation-name: riseUp;
animation-delay: .2s;
}
@keyframes riseUp {
from {
transform: translateY(22px);
}
to {
transform: none;
}
}
.hero-cta.fade-up {
animation-delay: .45s;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(26px);
}
to {
opacity: 1;
transform: none;
}
}
/* signature spectrum ribbon — seam at the bottom edge of the hero */
.spectrum-ribbon {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
z-index: 1;
background: var(--progressive-pride);
opacity: .85;
transform-origin: left;
filter: drop-shadow(0 0 10px rgba(91, 206, 250, .6)) drop-shadow(0 0 20px rgba(138, 46, 160, .7));
}
.hero-scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
color: var(--on-dark-soft);
font-family: 'IBM Plex Mono', monospace;
font-size: 0.68rem;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.scroll-indicator {
width: 1px;
height: 46px;
background: linear-gradient(to bottom, transparent, var(--on-dark));
position: relative;
overflow: hidden;
}
.scroll-indicator::after {
content: '';
position: absolute;
inset: 0;
background: var(--on-dark);
animation: scrollPulse 2.2s var(--ease-soft) infinite;
}
@keyframes scrollPulse {
0% {
transform: translateY(-100%);
}
60%,
100% {
transform: translateY(100%);
}
}
/* on short viewports the cue crowds the spectrum ribbon — drop it */
@media (max-height: 640px) {
.hero-scroll {
display: none;
}
}
/* ===== SECTION SCAFFOLD ===== */
.section {
padding: 7.5rem 0;
position: relative;
}
.section-head {
max-width: var(--maxw);
margin: 0 auto 4rem;
padding: 0 2.5rem;
}
.section-index {
display: flex;
align-items: baseline;
gap: 0.9rem;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 1.5rem;
}
.section-index .num {
color: var(--ink);
font-weight: 600;
}
.section-index::before {
content: '';
width: 26px;
height: 1.5px;
background: var(--accent, var(--ink));
align-self: center;
}
.section-title {
font-size: clamp(2.1rem, 4.4vw, 3.6rem);
font-weight: 400;
letter-spacing: -0.025em;
max-width: 18ch;
}
.section-title.centered {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.section-subtitle {
font-size: 1.18rem;
color: var(--ink-soft);
max-width: 56ch;
margin-top: 1.4rem;
line-height: 1.6;
}
.section-subtitle.centered {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* scroll reveal utility — hidden only when JS is active (progressive enhancement) */
.reveal {
transition: opacity 1s var(--ease), transform 1s var(--ease);
transition-delay: calc(var(--i, 0) * 90ms);
}
.js .reveal {
opacity: 0;
transform: translateY(34px);
}
.js .reveal.is-visible {
opacity: 1;
transform: none;
}
/* ===== ABOUT (light editorial) ===== */
.about {
--accent: var(--sky);
background:
radial-gradient(60% 70% at 88% 8%, rgba(91, 206, 250, .14), transparent 60%),
radial-gradient(50% 60% at 4% 92%, rgba(138, 46, 160, .1), transparent 60%),
var(--bone);
}
.about-grid {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 2.5rem;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 5rem;
align-items: start;
}
.about-figure {
position: relative;
align-self: start;
position: sticky;
top: 7rem;
}
.about-figure .plate {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-plate);
transform: rotate(-1.5deg);
transition: transform .7s var(--ease);
}
.about-figure:hover .plate {
transform: rotate(0deg);
}
.about-figure .plate img {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
}
/* spectral frame glow behind portrait */
.about-figure::before {
content: '';
position: absolute;
inset: -14px;
z-index: -1;
border-radius: calc(var(--radius-lg) + 14px);
background: var(--spectrum);
opacity: .5;
filter: blur(34px);
transform: rotate(-1.5deg);
}
/* Progressive Pride accent bar beside the portrait */
.about-figure::after {
content: '';
position: absolute;
top: 7%;
left: -18px;
width: 8px;
height: 86%;
border-radius: 8px;
background: var(--progressive-pride-v);
transform: rotate(-1.5deg);
box-shadow: 0 10px 26px -8px rgba(97, 57, 21, .45);
z-index: 1;
}
.figure-caption {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
margin-top: 1.4rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.figure-caption::before {
content: '';
width: 30px;
height: 4px;
border-radius: 2px;
background: var(--progressive-pride);
}
.about-lead {
color: var(--ink-soft);
font-size: 1.075rem;
margin-bottom: 1.4rem;
max-width: 60ch;
}
.about-body p {
color: var(--ink-soft);
font-size: 1.075rem;
margin-bottom: 1.4rem;
max-width: 60ch;
}
/* key facts surface as quiet ink anchors inside the soft paragraphs */
.about-body strong {
color: var(--ink);
font-weight: 600;
}
.pull-quote {
margin: 2.75rem 0;
padding-left: 1.75rem;
border-left: 2px solid transparent;
border-image: var(--spectrum) 1;
}
.pull-quote p {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 400;
font-size: 1.4rem;
line-height: 1.4;
color: var(--ink);
}
/* credential / stat strip */
.stat-strip {
margin-top: 3rem;
padding-top: 2.5rem;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.stat {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.stat .stat-num {
font-family: 'Fraunces', serif;
font-size: 2.2rem;
font-weight: 500;
line-height: 1;
color: var(--ink);
}
.stat .stat-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.68rem;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ink-soft);
line-height: 1.4;
}
/* ===== RESEARCH (numbered editorial index) ===== */
.research {
background: var(--bone-2);
}
.research-index {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 2.5rem;
list-style: none;
}
.research-row {
--hue: var(--ink);
--hue-ink: var(--ink);
position: relative;
display: grid;
grid-template-columns: 5.5rem 1fr auto;
grid-template-areas: "num body icon";
gap: 2.5rem;
align-items: center;
padding: 2.6rem 1.5rem;
border-top: 1px solid var(--line);
transition: background .5s var(--ease), padding .5s var(--ease);
overflow: hidden;
}
.research-row .r-num {
grid-area: num;
}
.research-row .r-body {
grid-area: body;
}
.research-row .r-icon {
grid-area: icon;
}
.research-index li:last-child .research-row {
border-bottom: 1px solid var(--line);
}
/* growing spectral edge */
.research-row::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--hue);
transform: scaleY(0);
transform-origin: top;
transition: transform .5s var(--ease);
}
/* hue wash */
.research-row::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, color-mix(in srgb, var(--hue) 12%, transparent), transparent 65%);
opacity: 0;
transition: opacity .5s var(--ease);
}
.research-row:hover {
padding-left: 2.4rem;
}
.research-row:hover::before,
.research-row.is-active::before {
transform: scaleY(1);
}
.research-row:hover::after,
.research-row.is-active::after {
opacity: 1;
}
.research-row .r-num {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.95rem;
font-weight: 500;
color: var(--ink-soft);
transition: color .5s var(--ease);
}
.research-row:hover .r-num,
.research-row.is-active .r-num {
color: var(--hue-ink);
}
.research-row .r-body h3 {
font-size: clamp(1.5rem, 2.6vw, 2.15rem);
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 0.65rem;
transition: color .5s var(--ease);
}
.research-row:hover .r-body h3,
.research-row.is-active .r-body h3 {
color: var(--hue-ink);
}
.research-row .r-body p {
color: var(--ink-soft);
font-size: 1.02rem;
max-width: 62ch;
line-height: 1.6;
margin-top: 0.5rem;
}
/* quiet "this goes somewhere" cue — ignites with the rest of the row */
.research-row .r-go {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.9rem;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--hue-ink);
opacity: 0;
transform: translateX(-6px);
transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.research-row .r-go::before {
content: '';
width: 1.4rem;
height: 1.5px;
background: var(--hue);
}
.research-row:hover .r-go,
.research-row:focus-visible .r-go,
.research-row.is-active .r-go {
opacity: 1;
transform: none;
}
/* circular spectral icon chip */
.research-row .r-icon {
width: 64px;
height: 64px;
justify-self: end;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(24, 18, 39, 0.035);
border: 1px solid var(--line);
position: relative;
transition: background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* soft hue halo, revealed on activation */
.research-row .r-icon::after {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--hue) 45%, transparent), transparent);
opacity: 0;
z-index: -1;
transition: opacity .5s var(--ease);
}
.research-row .r-glyph {
width: 28px;
height: 28px;
background: var(--ink-soft);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
transition: background .5s var(--ease);
}
/* Icon masks inlined as data URIs so they work under the file:// origin
(external SVG mask-image is blocked by CORS when opened as a local file). */
.r-glyph-saude {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M19%2022h2v-11.931c-1.16-.753-2.515-1.509-3.815-2.052.329-.544.574-1.189.697-1.877%201.821.75%203.499%201.753%205.118%202.86v13h1v2h-24v-2h1v-13c1.615-1.084%203.298-2.08%205.122-2.83.137.664.387%201.293.728%201.863-1.36.563-2.614%201.267-3.839%202.04l-.011.007v11.92h2v-5h14v5zm-12%201h3v-4h-3v4zm4%200h2v-4h-2v4zm3%200h3v-4h-3v4zm-9-7h2v-2h-2v2zm4%200h2v-2h-2v2zm4%200h2v-2h-2v2zm4%200h2v-2h-2v2zm-12-3h2v-2h-2v2zm4%200h2v-2h-2v2zm4%200h2v-2h-2v2zm4%200h2v-2h-2v2zm-5-13c2.76%200%205%202.24%205%205s-2.24%205-5%205-5-2.24-5-5%202.24-5%205-5m1%204v-2h-2v2h-2v2h2v2h2v-2h2v-2h-2z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M19%2022h2v-11.931c-1.16-.753-2.515-1.509-3.815-2.052.329-.544.574-1.189.697-1.877%201.821.75%203.499%201.753%205.118%202.86v13h1v2h-24v-2h1v-13c1.615-1.084%203.298-2.08%205.122-2.83.137.664.387%201.293.728%201.863-1.36.563-2.614%201.267-3.839%202.04l-.011.007v11.92h2v-5h14v5zm-12%201h3v-4h-3v4zm4%200h2v-4h-2v4zm3%200h3v-4h-3v4zm-9-7h2v-2h-2v2zm4%200h2v-2h-2v2zm4%200h2v-2h-2v2zm4%200h2v-2h-2v2zm-12-3h2v-2h-2v2zm4%200h2v-2h-2v2zm4%200h2v-2h-2v2zm4%200h2v-2h-2v2zm-5-13c2.76%200%205%202.24%205%205s-2.24%205-5%205-5-2.24-5-5%202.24-5%205-5m1%204v-2h-2v2h-2v2h2v2h2v-2h2v-2h-2z%22%2F%3E%3C%2Fsvg%3E");
}
.r-glyph-genero {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M18%200v2h2.586l-3.861%203.846c-1.246-1.143-2.902-1.846-4.725-1.846-1.824%200-3.479.703-4.726%201.846l-1.209-1.204%201.288-1.288-.707-.708-1.289%201.29-1.943-1.936h2.586v-2h-6v6h2v-2.586l1.943%201.936-1.297%201.296.707.707%201.298-1.298%201.353%201.347c-.633%201.053-1.004%202.281-1.004%203.598%200%203.526%202.609%206.434%206%206.92v2.08h-3v2h3v2h2v-2h3v-2h-3v-2.08c3.391-.486%206-3.395%206-6.92%200-1.317-.371-2.545-1.004-3.598l4.004-3.988v2.586h2v-6h-6zm-6%2016c-2.757%200-5-2.243-5-5s2.243-5%205-5%205%202.243%205%205-2.243%205-5%205z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M18%200v2h2.586l-3.861%203.846c-1.246-1.143-2.902-1.846-4.725-1.846-1.824%200-3.479.703-4.726%201.846l-1.209-1.204%201.288-1.288-.707-.708-1.289%201.29-1.943-1.936h2.586v-2h-6v6h2v-2.586l1.943%201.936-1.297%201.296.707.707%201.298-1.298%201.353%201.347c-.633%201.053-1.004%202.281-1.004%203.598%200%203.526%202.609%206.434%206%206.92v2.08h-3v2h3v2h2v-2h3v-2h-3v-2.08c3.391-.486%206-3.395%206-6.92%200-1.317-.371-2.545-1.004-3.598l4.004-3.988v2.586h2v-6h-6zm-6%2016c-2.757%200-5-2.243-5-5s2.243-5%205-5%205%202.243%205%205-2.243%205-5%205z%22%2F%3E%3C%2Fsvg%3E");
}
.r-glyph-pilula {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M17.5%2010c3.587%200%206.5%202.913%206.5%206.5s-2.913%206.5-6.5%206.5-6.5-2.913-6.5-6.5%202.913-6.5%206.5-6.5zm-7.802%209.864l-.363.635c-1.381%202.391-4.443%203.211-6.834%201.831-2.391-1.381-3.211-4.443-1.831-6.834l6.868-11.995c.925-1.602%202.606-2.499%204.333-2.501.85-.001%201.712.215%202.501.67%202.245%201.297%203.106%204.076%202.058%206.39-.979.125-1.906.416-2.753.844l.793-1.401c.828-1.434.336-3.272-1.099-4.1-1.434-.828-3.272-.336-4.1%201.099l-2.866%205.063%203.975%202.295c-.363.557-.663%201.16-.889%201.797l-4.086-2.359-3.002%205.199c-.828%201.434-.336%203.272%201.099%204.1%201.434.828%203.272.336%204.1-1.099l1.42-2.459c.063.998.298%201.949.676%202.825zm10.882-6.644l-4.381%207.589c.412.124.849.191%201.301.191%202.484%200%204.5-2.016%204.5-4.5%200-1.293-.546-2.459-1.42-3.28zm-1.725-1.012c-.428-.135-.883-.208-1.355-.208-2.484%200-4.5%202.016-4.5%204.5%200%201.313.563%202.495%201.461%203.318l4.394-7.61z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M17.5%2010c3.587%200%206.5%202.913%206.5%206.5s-2.913%206.5-6.5%206.5-6.5-2.913-6.5-6.5%202.913-6.5%206.5-6.5zm-7.802%209.864l-.363.635c-1.381%202.391-4.443%203.211-6.834%201.831-2.391-1.381-3.211-4.443-1.831-6.834l6.868-11.995c.925-1.602%202.606-2.499%204.333-2.501.85-.001%201.712.215%202.501.67%202.245%201.297%203.106%204.076%202.058%206.39-.979.125-1.906.416-2.753.844l.793-1.401c.828-1.434.336-3.272-1.099-4.1-1.434-.828-3.272-.336-4.1%201.099l-2.866%205.063%203.975%202.295c-.363.557-.663%201.16-.889%201.797l-4.086-2.359-3.002%205.199c-.828%201.434-.336%203.272%201.099%204.1%201.434.828%203.272.336%204.1-1.099l1.42-2.459c.063.998.298%201.949.676%202.825zm10.882-6.644l-4.381%207.589c.412.124.849.191%201.301.191%202.484%200%204.5-2.016%204.5-4.5%200-1.293-.546-2.459-1.42-3.28zm-1.725-1.012c-.428-.135-.883-.208-1.355-.208-2.484%200-4.5%202.016-4.5%204.5%200%201.313.563%202.495%201.461%203.318l4.394-7.61z%22%2F%3E%3C%2Fsvg%3E");
}
.r-glyph-grafico {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2020v2h-2v-2h2zm2-2h-6v6h6v-6zm6-1v5h-2v-5h2zm2-2h-6v9h6v-9zm6-2v9h-2v-9h2zm2-2h-6v13h6v-13zm0-11l-6%201.221%201.716%201.708-6.85%206.733-3.001-3.002-7.841%207.797%201.41%201.418%206.427-6.39%202.991%202.993%208.28-8.137%201.667%201.66%201.201-6.001z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2020v2h-2v-2h2zm2-2h-6v6h6v-6zm6-1v5h-2v-5h2zm2-2h-6v9h6v-9zm6-2v9h-2v-9h2zm2-2h-6v13h6v-13zm0-11l-6%201.221%201.716%201.708-6.85%206.733-3.001-3.002-7.841%207.797%201.41%201.418%206.427-6.39%202.991%202.993%208.28-8.137%201.667%201.66%201.201-6.001z%22%2F%3E%3C%2Fsvg%3E");
}
.r-glyph-escudo {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%200c-3.838%200-8.172%201.671-11%204%200%208.578%205.071%2016.1%2011%2020%205.929-3.9%2011-11.422%2011-20-2.828-2.329-7.153-4-11-4zm-7.367%2012h7.367v-10c2.942%200%206.433%201.171%208.977%202.971-.122%202.544-.718%204.897-1.61%207.029h-7.367v9.549c-2.771-2.109-5.635-5.402-7.367-9.549z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%200c-3.838%200-8.172%201.671-11%204%200%208.578%205.071%2016.1%2011%2020%205.929-3.9%2011-11.422%2011-20-2.828-2.329-7.153-4-11-4zm-7.367%2012h7.367v-10c2.942%200%206.433%201.171%208.977%202.971-.122%202.544-.718%204.897-1.61%207.029h-7.367v9.549c-2.771-2.109-5.635-5.402-7.367-9.549z%22%2F%3E%3C%2Fsvg%3E");
}
.r-glyph-psiquiatria {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M10.999%204.442v-.71c-.598-.346-1-.992-1-1.732%200-1.104.896-2%202-2s2%20.896%202%202c0%20.74-.402%201.386-1%201.732v.71c.144-.023.268-.053.36-.089%201.206-.459%201.872-2.286%203.948-2.353%202.21-.029%203.418%202.251%205.173%202.769.473.139%201.027.142%201.52.172-.635%204.108-6.593%205.872-11.001%204.725v6.923c.843.262%201.911.611%202.542%201.201%202.008%201.877.83%204.698-1.539%204.787v-1c1.266-.627%201.504-1.961-1.003-2.878v4.301c0%20.553-.448%201-1%201s-1-.447-1-1v-4.896c-1.955-.51-5.364-1.17-5.339-4.003.018-1.696%201.55-3.101%203.331-3.101h.01c.553%200%201%20.448%201%201%200%20.549-.442.994-.989%201-.836.009-1.392.651-1.349%201.192.098%201.124%202.22%201.556%203.336%201.844v-6.369c-4.407%201.146-10.364-.619-10.999-4.726.493-.03%201.047-.033%201.52-.172%201.755-.518%202.963-2.798%205.173-2.769%202.076.067%202.742%201.894%203.948%202.353.092.036.215.065.358.089zm-3.039%2013.923c.863.25%201.655.463%202.35.624-1.691.869-1.495%202.002-.311%202.588v1c-2.138-.08-3.305-2.384-2.039-4.212zm6.073-2.606c.889-.257%202.232-.644%202.305-1.567.043-.543-.516-1.183-1.35-1.192-.547-.006-.989-.451-.989-1%200-.552.448-1%201-1h.011c1.772%200%203.313%201.399%203.33%203.101.017%201.273-.851%202.367-1.986%202.934-.6-.505-1.397-.909-2.321-1.276zm5.773-8.647c.512-.24.961-.534%201.308-.886-1.406-.386-2.573-2.218-3.767-2.227-1.241.04-2.034%202.353-4.347%202.461v1.193c.605.22%201.527.336%202.551.323-.124-.484-.177-1.003-.186-1.605.413.611.955%201.129%201.523%201.516.478-.057.958-.142%201.422-.257-.394-.587-.6-1.203-.729-1.879.645.66%201.413%201.068%202.225%201.361zm-8.807-.652c-2.312-.108-3.106-2.421-4.346-2.461-1.194.009-2.361%201.841-3.767%202.227.347.352.796.646%201.308.886.812-.293%201.58-.701%202.225-1.361-.129.676-.335%201.292-.729%201.879.464.115.944.2%201.422.257.568-.387%201.11-.905%201.523-1.516-.009.602-.062%201.121-.186%201.605%201.023.013%201.945-.103%202.55-.322v-1.194z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M10.999%204.442v-.71c-.598-.346-1-.992-1-1.732%200-1.104.896-2%202-2s2%20.896%202%202c0%20.74-.402%201.386-1%201.732v.71c.144-.023.268-.053.36-.089%201.206-.459%201.872-2.286%203.948-2.353%202.21-.029%203.418%202.251%205.173%202.769.473.139%201.027.142%201.52.172-.635%204.108-6.593%205.872-11.001%204.725v6.923c.843.262%201.911.611%202.542%201.201%202.008%201.877.83%204.698-1.539%204.787v-1c1.266-.627%201.504-1.961-1.003-2.878v4.301c0%20.553-.448%201-1%201s-1-.447-1-1v-4.896c-1.955-.51-5.364-1.17-5.339-4.003.018-1.696%201.55-3.101%203.331-3.101h.01c.553%200%201%20.448%201%201%200%20.549-.442.994-.989%201-.836.009-1.392.651-1.349%201.192.098%201.124%202.22%201.556%203.336%201.844v-6.369c-4.407%201.146-10.364-.619-10.999-4.726.493-.03%201.047-.033%201.52-.172%201.755-.518%202.963-2.798%205.173-2.769%202.076.067%202.742%201.894%203.948%202.353.092.036.215.065.358.089zm-3.039%2013.923c.863.25%201.655.463%202.35.624-1.691.869-1.495%202.002-.311%202.588v1c-2.138-.08-3.305-2.384-2.039-4.212zm6.073-2.606c.889-.257%202.232-.644%202.305-1.567.043-.543-.516-1.183-1.35-1.192-.547-.006-.989-.451-.989-1%200-.552.448-1%201-1h.011c1.772%200%203.313%201.399%203.33%203.101.017%201.273-.851%202.367-1.986%202.934-.6-.505-1.397-.909-2.321-1.276zm5.773-8.647c.512-.24.961-.534%201.308-.886-1.406-.386-2.573-2.218-3.767-2.227-1.241.04-2.034%202.353-4.347%202.461v1.193c.605.22%201.527.336%202.551.323-.124-.484-.177-1.003-.186-1.605.413.611.955%201.129%201.523%201.516.478-.057.958-.142%201.422-.257-.394-.587-.6-1.203-.729-1.879.645.66%201.413%201.068%202.225%201.361zm-8.807-.652c-2.312-.108-3.106-2.421-4.346-2.461-1.194.009-2.361%201.841-3.767%202.227.347.352.796.646%201.308.886.812-.293%201.58-.701%202.225-1.361-.129.676-.335%201.292-.729%201.879.464.115.944.2%201.422.257.568-.387%201.11-.905%201.523-1.516-.009.602-.062%201.121-.186%201.605%201.023.013%201.945-.103%202.55-.322v-1.194z%22%2F%3E%3C%2Fsvg%3E");
}
.research-row:hover .r-icon,
.research-row.is-active .r-icon {
background: var(--hue-ink);
border-color: var(--hue-ink);
transform: scale(1.06);
box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--hue) 65%, transparent);
}
.research-row:hover .r-icon::after,
.research-row.is-active .r-icon::after {
opacity: 0.5;
}
.research-row:hover .r-glyph,
.research-row.is-active .r-glyph {
background: #fff;
}
/* spectral hue per row (top→bottom spectrum) — rows live inside plain
wrappers, so the hue is keyed off the li's position */
.research-index li:nth-child(1) .research-row {
--hue: var(--red);
--hue-ink: var(--red-ink);
}
.research-index li:nth-child(2) .research-row {
--hue: var(--orange);
--hue-ink: var(--orange-ink);
}
.research-index li:nth-child(3) .research-row {
--hue: var(--green);
--hue-ink: var(--green-ink);
}
.research-index li:nth-child(4) .research-row {
--hue: var(--blue);
--hue-ink: var(--blue-ink);
}
.research-index li:nth-child(5) .research-row {
--hue: var(--violet);
--hue-ink: var(--violet-ink);
}
.research-index li:nth-child(6) .research-row {
--hue: var(--sky);
--hue-ink: var(--sky-ink);
}
/* ===== CONTACT ===== */
.contact {
--accent: var(--orange);
background:
radial-gradient(55% 60% at 92% 6%, rgba(255, 140, 0, .12), transparent 60%),
radial-gradient(55% 60% at 6% 96%, rgba(228, 3, 3, .1), transparent 60%),
var(--bone);
}
.contact-grid {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 2.5rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.contact-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 2.75rem 2.25rem;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.contact-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--spectrum);
transform: scaleX(0);
transform-origin: left;
transition: transform .55s var(--ease);
}
.contact-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-plate);
border-color: transparent;
}
.contact-card:hover::before {
transform: scaleX(1);
}
.contact-card .c-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.contact-card .c-label .ico {
width: 18px;
height: 18px;
color: var(--ink);
}
.contact-card h3 {
font-size: 1.7rem;
font-weight: 400;
margin-bottom: 0.75rem;
}
.contact-card-description {
color: var(--ink-soft);
font-size: 0.98rem;
line-height: 1.55;
margin-bottom: 1.75rem;
flex: 1;
}
.contact-card .btn {
align-self: flex-start;
}
.contact-revealed {
margin-top: 0.5rem;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.95rem;
word-break: break-word;
}
.contact-revealed a {
color: var(--blue);
border-bottom: 1.5px solid var(--blue);
padding-bottom: 1px;
}
.contact-revealed a:hover {
color: var(--violet);
border-color: var(--violet);
}
.contact-links {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.contact-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.9rem 1.1rem;
background: var(--bone);
border: 1px solid var(--line);
border-radius: 12px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.82rem;
letter-spacing: 0.06em;
color: var(--ink);
transition: var(--ease) .4s;
transition-property: background, color, border-color, transform;
}
.contact-link:hover,
.contact-link:focus-visible {
background: var(--ink);
color: var(--bone);
border-color: var(--ink);
transform: translateX(5px);
}
.contact-link svg {
opacity: 0.5;
transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.contact-link:hover svg {
opacity: 1;
transform: translate(2px, -2px);
}
/* ===== ACADEMIC SECTION ===== */
/* labelled divider for sub-blocks within the Academic section */
.acad-subhead {
max-width: var(--maxw);
margin: 0 auto 2.25rem;
padding: 0 2.5rem;
display: flex;
align-items: center;
gap: 1.1rem;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink);
}
.acad-subhead--gap {
margin-top: 4.5rem;
}
.acad-subhead-tick {
flex: none;
width: 28px;
height: 3px;
border-radius: 3px;
background: var(--spectrum);
}
.acad-subhead::after {
content: '';
flex: 1;
height: 1px;
background: var(--line);
}
.acad-strip {
max-width: var(--maxw);
margin: 0 auto 3rem;
padding: 0 2.5rem;
}
.acad-strip-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.55);
overflow: hidden;
position: relative;
}
.acad-strip-inner::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--spectrum);
opacity: 0.75;
}
.acad-strip-stat {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 2.25rem 2.5rem;
}
.acad-strip-stat + .acad-strip-stat {
border-left: 1px solid var(--line);
}
.acad-strip-num {
font-family: 'Fraunces', serif;
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 400;
line-height: 1;
letter-spacing: -0.03em;
color: var(--ink);
}
.acad-strip-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
line-height: 1.4;
}
.acad-profiles {
max-width: var(--maxw);
margin: 0 auto 2rem;
padding: 0 2.5rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.acad-card {
display: flex;
flex-direction: column;
gap: 0.9rem;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 2.25rem 2rem;
position: relative;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.acad-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--spectrum);
transform: scaleX(0);
transform-origin: left;
transition: transform .55s var(--ease);
}
.acad-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-plate);
border-color: transparent;
}
.acad-card:hover::before {
transform: scaleX(1);
}
.acad-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.acad-card-platform {
font-family: 'Fraunces', serif;
font-size: 1.65rem;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--ink);
}
.acad-card-arrow {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
color: var(--ink-soft);
flex-shrink: 0;
transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.acad-card:hover .acad-card-arrow {
background: var(--ink);
border-color: var(--ink);
color: var(--bone);
transform: translate(2px, -2px);
}
.acad-card-desc {
font-size: 0.93rem;
color: var(--ink-soft);
line-height: 1.55;
margin: 0;
flex: 1;
}
.acad-card-id {
display: block;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.68rem;
letter-spacing: 0.1em;
color: var(--ink-faint);
border-top: 1px solid var(--line-soft);
padding-top: 0.9rem;
margin-top: auto;
}
.acad-cta-wrap {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 2.5rem;
}
.acad-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 3rem 3.5rem;
background: var(--midnight);
border-radius: var(--radius-lg);
color: var(--on-dark);
text-decoration: none;
position: relative;
isolation: isolate;
overflow: hidden;
transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.acad-cta::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
z-index: 3;
height: 3px;
background: var(--progressive-pride);
opacity: .85;
filter: drop-shadow(0 0 8px rgba(91, 206, 250, .5)) drop-shadow(0 0 16px rgba(138, 46, 160, .6));
}
.acad-cta::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(120deg, rgba(138, 46, 160, .12), rgba(46, 79, 176, .1), rgba(0, 145, 60, .08));
opacity: 0;
transition: opacity .6s var(--ease);
}
/* ---- light reflecting on the glass: a slow periodic glint + soft glare ---- */
.acad-cta-sheen {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
}
/* soft specular glow resting in the top-left, brightens on hover */
.acad-cta-sheen::after {
content: '';
position: absolute;
top: -55%;
left: -12%;
width: 60%;
height: 150%;
background: radial-gradient(ellipse at 32% 30%, rgba(91, 206, 250, .2), rgba(245, 169, 184, .08) 45%, transparent 65%);
opacity: .7;
transition: opacity .6s var(--ease);
}
/* the travelling streak — light sweeping across the surface */
.acad-cta-sheen::before {
content: '';
position: absolute;
top: -60%;
left: 0;
width: 42%;
height: 220%;
background: linear-gradient(100deg,
transparent 0%,
rgba(250, 246, 239, .06) 36%,
rgba(250, 246, 239, .36) 50%,
rgba(250, 246, 239, .06) 64%,
transparent 100%);
transform: translateX(-180%) rotate(9deg);
animation: acadCtaGlint 7s var(--ease) infinite;
}
@keyframes acadCtaGlint {
0% { transform: translateX(-180%) rotate(9deg); }
16% { transform: translateX(340%) rotate(9deg); }
100% { transform: translateX(340%) rotate(9deg); }
}
.acad-cta:hover {
transform: translateY(-3px);
box-shadow: 0 28px 60px -20px rgba(11, 9, 22, .75);
}
.acad-cta:hover::after {
opacity: 1;
}
.acad-cta:hover .acad-cta-sheen::after {
opacity: 1;
}
.acad-cta-body {
position: relative;
z-index: 2;
}
.acad-cta-eyebrow {
display: block;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--on-dark-soft);
margin-bottom: 0.7rem;
}
.acad-cta-title {
font-family: 'Fraunces', serif;
font-size: clamp(1.5rem, 2.8vw, 2.1rem);
font-weight: 400;
letter-spacing: -0.025em;
color: var(--on-dark);
line-height: 1.2;
margin: 0;
max-width: 46ch;
text-wrap: balance;
}
/* explicit "this opens a page" cue under the title */
.acad-cta-go {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.4rem;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--on-dark-soft);
transition: color .4s var(--ease);
}
.acad-cta-go::before {
content: '';
width: 1.6rem;
height: 1.6px;
background: var(--spectrum);
transition: width .4s var(--ease);
}
.acad-cta:hover .acad-cta-go {
color: var(--on-dark);
}
.acad-cta:hover .acad-cta-go::before {
width: 2.4rem;
}
.acad-cta-arrow {
position: relative;
z-index: 2;
width: 54px;
height: 54px;
border-radius: 50%;
border: 1.5px solid rgba(250, 246, 239, .28);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
color: var(--on-dark);
flex-shrink: 0;
transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.acad-cta:hover .acad-cta-arrow {
background: rgba(250, 246, 239, .1);
border-color: rgba(250, 246, 239, .55);
transform: translateX(6px);
}
/* ===== PUBLICATIONS (pesquisa.html) ===== */
.publications {
--accent: var(--blue);
background: var(--bone);
}
.publications-list {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 2.5rem;
}
/* ===== FEATURED PUBLICATION (flagship paper + video) ===== */
.pub-featured-wrap {
max-width: var(--maxw);
margin: 0 auto 2.75rem;
padding: 0 2.5rem;
}
.pub-featured {
--phue: var(--blue);
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 2.6rem;
align-items: center;
padding: 1.7rem;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background:
radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 55%),
linear-gradient(180deg, color-mix(in srgb, var(--bone-2) 50%, var(--bone)), var(--bone));
box-shadow: var(--shadow-plate);
overflow: hidden;
}
/* spectrum hairline crowning the card */
.pub-featured::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--spectrum);
opacity: 0.9;
}
/* ---- media / video facade ---- */
.pub-featured-media {
position: relative;
}
.yt-facade {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
padding: 0;
border: none;
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
background: #0B0916;
box-shadow: 0 14px 36px -22px rgba(11, 9, 22, .8);
isolation: isolate;
}
.yt-thumb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s var(--ease), filter .5s var(--ease);
}
.yt-scrim {
position: absolute;
inset: 0;
background: linear-gradient(200deg, rgba(11, 9, 22, .05) 30%, rgba(11, 9, 22, .55));
transition: opacity .5s var(--ease);
}
.yt-facade:hover .yt-thumb,
.yt-facade:focus-visible .yt-thumb {
transform: scale(1.045);
filter: saturate(1.05);
}
.yt-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 74px;
height: 74px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--bone);
background: color-mix(in srgb, var(--blue) 78%, rgba(11, 9, 22, .6));
box-shadow:
0 0 0 1px rgba(250, 246, 239, .35) inset,
0 8px 26px -6px rgba(11, 9, 22, .7);
backdrop-filter: blur(3px);
transition: transform .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.yt-play svg {
width: 30px;
height: 30px;
margin-left: 3px;
}
.yt-facade:hover .yt-play,
.yt-facade:focus-visible .yt-play {
transform: translate(-50%, -50%) scale(1.08);
background: var(--blue);
box-shadow:
0 0 0 1px rgba(250, 246, 239, .5) inset,
0 0 0 6px color-mix(in srgb, var(--blue) 22%, transparent),
0 10px 30px -6px rgba(11, 9, 22, .75);
}
.yt-badge {
position: absolute;
left: 1rem;
bottom: 1rem;
z-index: 2;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bone);
padding: 0.4rem 0.7rem;
border-radius: 100px;
background: rgba(11, 9, 22, .45);
border: 1px solid rgba(250, 246, 239, .22);
backdrop-filter: blur(6px);
}
/* the loaded player replaces the facade in-place */
.yt-iframe {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
border-radius: var(--radius);
background: #0B0916;
box-shadow: 0 14px 36px -22px rgba(11, 9, 22, .8);
}
/* ---- body / citation ---- */
.pub-featured-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--blue);
margin-bottom: 1.1rem;
}
.eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--blue);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 60%, transparent);
animation: eyebrowPulse 2.6s var(--ease) infinite;
}
@keyframes eyebrowPulse {
0% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 55%, transparent);
}
70%, 100% {
box-shadow: 0 0 0 8px transparent;
}
}
.pub-featured-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.74rem;
letter-spacing: 0.06em;
color: var(--ink-faint);
margin-bottom: 0.7rem;
}
.pub-featured-meta em {
font-style: normal;
color: var(--ink-soft);
}
.pub-featured-title {
font-family: 'Fraunces', Georgia, serif;
font-size: clamp(1.45rem, 2.4vw, 2rem);
font-weight: 400;
line-height: 1.18;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 0.9rem;
}
.pub-featured-body .pub-authors {
margin-bottom: 0.7rem;
}
.pub-featured-blurb {
color: var(--ink-soft);
font-size: 0.98rem;
line-height: 1.55;
margin-bottom: 1.3rem;
max-width: 46ch;
}
.pub-featured .pub-links {
margin-top: 0;
}
/* ---- featured card: stack video above citation on narrow screens ---- */
@media (max-width: 860px) {
.pub-featured {
grid-template-columns: 1fr;
gap: 1.6rem;
padding: 1.1rem;
}
.pub-featured-body {
padding: 0 0.4rem 0.4rem;
}
}
@media (max-width: 640px) {
.pub-featured-wrap {
padding: 0 1.4rem;
margin-bottom: 2rem;
}
.yt-play {
width: 60px;
height: 60px;
}
.yt-play svg {
width: 24px;
height: 24px;
}
.pub-featured-eyebrow {
margin-bottom: 0.85rem;
}
}
/* ---- filter toolbar (sticky) ---- */
.pub-filter {
position: sticky;
top: var(--navbar-h);
z-index: 40;
background: color-mix(in srgb, var(--bone) 86%, transparent);
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
border-bottom: 1px solid var(--line);
margin-bottom: 1rem;
}
.pub-filter-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 1.6rem 2.5rem 0.9rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.pub-filter-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.64rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-faint);
margin-right: 0.5rem;
}
.pub-pill {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
background: transparent;
border: 1px solid var(--line);
border-radius: 100px;
padding: 0.5rem 0.95rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.45rem;
transition: var(--ease) .35s;
transition-property: background, color, border-color, transform;
}
.pub-pill em {
font-style: normal;
font-size: 0.64rem;
color: var(--ink-faint);
transition: color .35s var(--ease);
}
.pub-pill:hover {
border-color: var(--ink);
color: var(--ink);
transform: translateY(-1px);
}
.pub-pill.is-active {
background: var(--ink);
color: var(--bone);
border-color: var(--ink);
}
.pub-pill.is-active em {
color: rgba(250, 246, 239, .55);
}
/* per-type spectral hue (assigned to rows by script.js) */
.publication[data-type="article"] {
--phue: var(--blue);
--phue-ink: var(--blue-ink);
}
.publication[data-type="chapter"] {
--phue: var(--violet);
--phue-ink: var(--violet-ink);
}
.publication[data-type="conference"] {
--phue: var(--green);
--phue-ink: var(--green-ink);
}
/* filtering */
.publications-list[data-filter="article"] .publication:not([data-type="article"]),
.publications-list[data-filter="chapter"] .publication:not([data-type="chapter"]),
.publications-list[data-filter="conference"] .publication:not([data-type="conference"]) {
display: none;
}
.publications-list:not([data-filter="all"]) .pub-group {
display: none;
}
.publications-list:not([data-filter="all"]) .publication {
border-top: 1px solid var(--line);
}
.publication {
position: relative;
display: grid;
grid-template-columns: 7rem 1fr;
gap: 2.25rem;
padding: 2.5rem 0;
border-top: 1px solid var(--line);
align-items: start;
transition: background .5s var(--ease), padding-left .45s var(--ease);
}
.publication::before {
content: '';
position: absolute;
left: -1.25rem;
top: -1px;
bottom: 0;
width: 3px;
background: var(--phue, var(--blue));
transform: scaleY(0);
transform-origin: top;
transition: transform .5s var(--ease);
}
.publication:hover {
background: linear-gradient(90deg,
color-mix(in srgb, var(--phue, var(--blue)) 7%, transparent),
transparent 72%);
padding-left: 1rem;
}
.publication:hover::before {
transform: scaleY(1);
}
.publication:last-of-type {
border-bottom: 1px solid var(--line);
}
.pub-year {
font-family: 'Fraunces', Georgia, serif;
font-size: clamp(1.9rem, 3vw, 2.5rem);
font-weight: 300;
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink-faint);
padding-top: 0.05rem;
font-feature-settings: "lnum" 1;
transition: color .5s var(--ease);
}
.publication:hover .pub-year {
color: var(--phue-ink, var(--blue-ink));
}
.pub-content h3 {
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
font-weight: 400;
line-height: 1.2;
margin-bottom: 0.75rem;
max-width: 42ch;
transition: color .4s var(--ease);
}
.publication:hover .pub-content h3 {
color: var(--phue-ink, var(--blue-ink));
}
.pub-authors,
.pub-journal {
color: var(--ink-soft);
font-size: 0.98rem;
margin-bottom: 0.4rem;
}
.pub-journal strong {
color: var(--ink);
font-weight: 600;
}
.pub-stat {
font-family: 'IBM Plex Mono', monospace;
}
.pub-links {
display: flex;
gap: 0.7rem;
margin-top: 1rem;
flex-wrap: wrap;
}
/* Links read as raised, live chips: white ground lifted off the bone canvas
+ a trailing ↗ — the site's "this goes somewhere" vocabulary. Non-link
.tag chips are flat washes, so the two can't be confused at rest. */
.pub-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
padding: 0.45rem 0.95rem;
background: #fff;
border: 1px solid var(--line);
border-radius: 100px;
box-shadow: 0 1px 2px rgba(24, 18, 39, .05), 0 6px 14px -10px rgba(24, 18, 39, .25);
transition: var(--ease) .4s;
transition-property: background, color, border-color, transform, box-shadow;
}
.pub-link::after {
content: '\2197';
content: '\2197' / '';
/* decorative; the / '' alt keeps it out of accessible names where supported */
font-size: 0.9em;
opacity: 0.45;
transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.pub-link:hover,
.pub-link:focus-visible {
background: var(--phue-ink, var(--blue-ink));
color: #fff;
border-color: var(--phue-ink, var(--blue-ink));
transform: translateY(-2px);
box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--phue-ink, var(--blue-ink)) 70%, transparent);
}
.pub-link:hover::after,
.pub-link:focus-visible::after {
opacity: 1;
transform: translate(1px, -1px);
}
/* group label inside a publications list (e.g. Articles / Chapters / Conferences) */
.pub-group {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink);
padding: 2.5rem 0 0.5rem;
margin-top: 1.5rem;
border-top: 2px solid var(--ink);
display: flex;
align-items: baseline;
gap: 0.7rem;
}
.pub-group:first-child {
margin-top: 0;
}
.pub-group .pub-group-count {
color: var(--blue);
}
/* when a group label precedes a publication, that publication's own top border is redundant */
.pub-group + .publication {
border-top: none;
padding-top: 1.25rem;
}
.pub-footnote {
max-width: var(--maxw);
margin: 2.5rem auto 0;
padding: 0 2.5rem;
color: var(--ink-soft);
}
.pub-footnote a {
color: var(--blue);
border-bottom: 1.5px solid var(--blue);
}
.pub-footnote a:hover {
color: var(--violet);
border-color: var(--violet);
}
/* ===== EDUCATION TIMELINE =====
A beam of refracted light running down the page: the spine carries the full
Progressive Pride spectrum (violet → red, newest milestone back through time),
and each formative step is a node where the light concentrates into one hue.
Desktop alternates cards left/right of a centred spine; mobile folds to a rail. */
.edu-timeline {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 1.5rem 2.5rem 0;
}
.edu-track {
position: relative;
list-style: none;
padding: 1rem 0;
}
/* the refracted-light spine */
.edu-track::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
transform: translateX(-50%);
border-radius: 2px;
background: linear-gradient(180deg,
var(--violet) 0%,
var(--blue) 20%,
var(--green) 40%,
#B8860B 58%,
var(--orange) 78%,
var(--red) 100%);
opacity: 0.34;
}
/* soft halo cast by the beam */
.edu-track::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 16px;
transform: translateX(-50%);
pointer-events: none;
background: linear-gradient(180deg,
var(--violet), var(--blue), var(--green), #B8860B, var(--orange), var(--red));
filter: blur(13px);
opacity: 0.16;
}
.edu-item {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
margin-bottom: 2.25rem;
}
/* hue per milestone, newest (violet) back through time to oldest (red) —
kept in the stylesheet rather than inline style attributes */
.edu-track li:nth-child(1) {
--hue: var(--violet);
--hue-ink: var(--violet-ink);
}
.edu-track li:nth-child(2) {
--hue: var(--blue);
--hue-ink: var(--blue-ink);
}
.edu-track li:nth-child(3) {
--hue: var(--green);
--hue-ink: var(--green-ink);
}
.edu-track li:nth-child(4) {
--hue: #B8860B;
--hue-ink: color-mix(in srgb, #B8860B 70%, var(--ink));
}
.edu-track li:nth-child(5) {
--hue: var(--orange);
--hue-ink: var(--orange-ink);
}
.edu-track li:nth-child(6) {
--hue: #DC5A12;
--hue-ink: color-mix(in srgb, #DC5A12 75%, var(--ink));
}
.edu-track li:nth-child(7) {
--hue: var(--red);
--hue-ink: var(--red-ink);
}
.edu-item:last-child {
margin-bottom: 0;
}
/* node on the spine */
.edu-marker {
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
border-radius: 50%;
background: var(--bone);
box-shadow: 0 0 0 1px var(--line);
}
.edu-dot {
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--hue);
box-shadow:
0 0 0 4px color-mix(in srgb, var(--hue) 16%, transparent),
0 0 16px 1px color-mix(in srgb, var(--hue) 55%, transparent);
transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* node pulse ring — ignites when the item reveals into view */
.edu-marker::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid var(--hue);
opacity: 0;
transform: scale(0.6);
}
.js .edu-item.is-visible .edu-marker::after {
animation: eduPing 2.4s var(--ease) .25s 2;
}
@keyframes eduPing {
0% {
opacity: 0.55;
transform: scale(0.6);
}
70%, 100% {
opacity: 0;
transform: scale(1.6);
}
}
/* connector from spine to card */
.edu-item::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 2.75rem;
height: 2px;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, var(--hue));
opacity: 0.5;
}
.edu-item:nth-child(even)::before {
transform: none;
background: linear-gradient(90deg, var(--hue), transparent);
}
/* card placement — alternate sides */
.edu-card {
position: relative;
grid-column: 1;
justify-self: end;
width: 100%;
max-width: 23rem;
margin-right: 3rem;
padding: 1.6rem 1.8rem;
background: linear-gradient(180deg,
color-mix(in srgb, var(--bone-2) 55%, var(--bone)),
var(--bone));
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(24, 18, 39, .03);
transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.edu-item:nth-child(even) .edu-card {
grid-column: 2;
justify-self: start;
margin-right: 0;
margin-left: 3rem;
}
/* hue accent along the spine-facing edge of each card */
.edu-card::before {
content: '';
position: absolute;
top: 1.6rem;
bottom: 1.6rem;
width: 3px;
border-radius: 3px;
background: var(--hue);
opacity: 0.65;
right: 0;
}
.edu-item:nth-child(even) .edu-card::before {
right: auto;
left: 0;
}
.edu-card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--hue) 42%, var(--line));
box-shadow: 0 22px 45px -26px color-mix(in srgb, var(--hue) 70%, transparent);
}
.edu-year {
display: block;
font-family: 'Fraunces', Georgia, serif;
font-size: clamp(2.3rem, 3.4vw, 3rem);
font-weight: 300;
line-height: 1;
letter-spacing: -0.025em;
color: var(--hue-ink, var(--hue));
font-feature-settings: "lnum" 1;
margin-bottom: 0.85rem;
}
.edu-year-range {
font-size: clamp(1.85rem, 2.7vw, 2.35rem);
}
.edu-tag {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--hue-ink, var(--hue));
margin-bottom: 0.7rem;
}
.edu-degree {
font-size: clamp(1.15rem, 1.7vw, 1.4rem);
font-weight: 500;
line-height: 1.22;
color: var(--ink);
margin-bottom: 0.55rem;
}
.edu-detail {
font-size: 0.92rem;
line-height: 1.5;
color: var(--ink-soft);
}
/* ---- timeline: fold to a single left rail when too narrow to alternate ---- */
@media (max-width: 760px) {
.edu-timeline {
padding: 1rem 1.4rem 0;
}
.edu-track {
padding: 0.5rem 0;
}
.edu-track::before,
.edu-track::after {
left: 13px;
transform: none;
}
.edu-item {
grid-template-columns: 1fr;
align-items: stretch;
margin-bottom: 2.25rem;
}
.edu-marker {
left: 13px;
top: 1.9rem;
transform: translate(-50%, 0);
}
.edu-item::before,
.edu-item:nth-child(even)::before {
top: 1.9rem;
left: 13px;
width: 1.7rem;
transform: none;
background: linear-gradient(90deg, var(--hue), transparent);
}
.edu-card,
.edu-item:nth-child(even) .edu-card {
grid-column: 1;
justify-self: stretch;
width: auto;
max-width: none;
margin: 0 0 0 2.85rem;
padding: 1.35rem 1.5rem;
}
.edu-card::before,
.edu-item:nth-child(even) .edu-card::before {
right: auto;
left: 0;
top: 1.35rem;
bottom: 1.35rem;
}
.edu-card:hover {
transform: none;
}
}
/* science-outreach band (compact chip cloud of magazine columns) */
.pub-outreach {
max-width: var(--maxw);
margin: 3.5rem auto 0;
padding: 2.25rem 2.5rem 0;
border-top: 2px solid var(--ink);
}
.pub-outreach-head {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 1.5rem;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem 1rem;
}
.pub-outreach-note {
font-weight: 400;
letter-spacing: 0.12em;
color: var(--ink-faint);
text-transform: none;
}
.pub-outreach-note em {
font-style: italic;
}
/* outreach chips are plain text labels — no hover theatrics, so they never
masquerade as links */
/* ===== PROJECTS (pesquisa.html) ===== */
.projects {
--accent: var(--violet);
background:
radial-gradient(55% 60% at 90% 4%, rgba(138, 46, 160, .12), transparent 60%),
radial-gradient(55% 60% at 6% 98%, rgba(0, 145, 60, .1), transparent 60%),
var(--bone-2);
}
.projects-grid {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 2.5rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.project-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 2.5rem;
position: relative;
overflow: hidden;
transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.project-card {
--hue: var(--violet);
--hue-ink: var(--violet-ink);
}
.project-card:nth-child(2) {
--hue: var(--green);
--hue-ink: var(--green-ink);
}
.project-card:nth-child(3) {
--hue: var(--blue);
--hue-ink: var(--blue-ink);
}
.project-card:nth-child(4) {
--hue: var(--orange);
--hue-ink: var(--orange-ink);
}
.project-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--hue);
transform: scaleY(0);
transform-origin: top;
transition: transform .5s var(--ease);
}
.project-card h3 {
transition: color .5s var(--ease);
}
.project-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-plate);
}
.project-card:hover::before,
.project-card.is-active::before {
transform: scaleY(1);
}
.project-card:hover h3,
.project-card.is-active h3 {
color: var(--hue-ink, var(--hue));
}
.project-status {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 0.35rem 0.8rem;
border: 1px solid var(--line);
border-radius: 100px;
margin-bottom: 1.25rem;
}
.project-card h3 {
font-size: 1.55rem;
font-weight: 400;
margin-bottom: 0.9rem;
line-height: 1.15;
}
.project-card p {
color: var(--ink-soft);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.project-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* Non-interactive topic chips: flat ink washes printed on the page —
no border, no elevation, no hover — so only true links read as raised. */
.tag {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.06em;
padding: 0.35rem 0.75rem;
background: color-mix(in srgb, var(--ink) 5.5%, transparent);
border: 1px solid transparent;
color: var(--ink-soft);
border-radius: 100px;
}
/* ===== SECONDARY HERO (pesquisa.html) ===== */
.hero-secondary {
min-height: 62svh;
}
.hero-secondary .hero-inner {
padding-top: 11rem;
padding-bottom: 5rem;
}
.hero-secondary .hero-title {
font-size: clamp(2.6rem, 7vw, 5rem);
}
/* ===== FOOTER (dark bookend) ===== */
.footer {
background: var(--midnight);
color: var(--on-dark);
padding: 5rem 0 3rem;
position: relative;
overflow: hidden;
isolation: isolate;
}
.footer::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--progressive-pride);
filter: drop-shadow(0 0 10px rgba(91, 206, 250, .6)) drop-shadow(0 0 20px rgba(138, 46, 160, .7));
}
.footer-mesh {
position: absolute;
inset: -30% -10% auto -10%;
height: 80%;
z-index: -1;
background:
radial-gradient(40% 60% at 20% 0%, rgba(138, 46, 160, .35), transparent 70%),
radial-gradient(40% 60% at 80% 10%, rgba(46, 79, 176, .3), transparent 70%);
filter: blur(40px);
}
.footer .container {
text-align: center;
}
.footer-brand {
font-family: 'Fraunces', serif;
font-size: clamp(2rem, 6vw, 3.4rem);
font-weight: 400;
letter-spacing: -0.02em;
color: var(--on-dark);
margin-bottom: 1.5rem;
}
/* Progressive Pride emblem under the wordmark (both pages) */
.footer-brand::after {
content: '';
display: block;
width: 62px;
height: 30px;
margin: 1.25rem auto 0;
border-radius: 5px;
background: var(--progressive-pride);
box-shadow: 0 8px 22px -8px rgba(97, 57, 21, .5);
outline: 1px solid rgba(250, 246, 239, 0.4);
}
.footer-note {
font-size: 1rem;
color: var(--on-dark-soft);
max-width: 52ch;
margin: 0 auto 2.5rem;
line-height: 1.6;
}
.footer-links {
display: flex;
justify-content: center;
gap: 1.75rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.footer-links a {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.76rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--on-dark-soft);
padding-bottom: 3px;
border-bottom: 1px solid transparent;
}
.footer-links a:hover {
color: var(--on-dark);
border-color: var(--on-dark);
}
.footer-copy {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.08em;
/* ≥4.5:1 on midnight (was .45, which failed WCAG AA) */
color: rgba(250, 246, 239, .62);
}
/* ===== BACK TO TOP (long pages) ===== */
.back-to-top {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
z-index: 900;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-family: 'IBM Plex Mono', monospace;
font-size: 1rem;
color: var(--ink);
border: 1.5px solid var(--line);
background: rgba(250, 246, 239, .78);
backdrop-filter: blur(12px) saturate(1.3);
-webkit-backdrop-filter: blur(12px) saturate(1.3);
box-shadow: 0 10px 24px -14px rgba(24, 18, 39, .55);
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity .35s var(--ease), transform .35s var(--ease),
border-color .35s var(--ease), background .35s var(--ease);
}
.back-to-top.is-visible {
opacity: 1;
transform: none;
pointer-events: auto;
}
.back-to-top:hover,
.back-to-top:focus-visible {
border-color: var(--ink);
transform: translateY(-2px);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1240px) {
:root {
/* hamburger bar is shorter than the desktop pill bar */
--navbar-h: 67px;
}
.nav-links {
position: fixed;
flex: none;
inset: 0 0 0 auto;
width: min(82vw, 380px);
background: var(--bone);
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 1.35rem;
padding: 3rem;
box-shadow: -30px 0 60px -30px rgba(24, 18, 39, .4);
transform: translateX(100%);
transition: transform .5s var(--ease);
z-index: 1050;
}
/* unwrap the centered section group into the stacked drawer */
.nav-sections {
position: static;
transform: none;
}
.nav-sections-list {
flex-direction: column;
align-items: stretch;
gap: 1.35rem;
width: 100%;
}
.nav-links.active {
transform: translateX(0);
}
/* backdrop overlay — created in JS so no HTML change needed.
Sits BELOW the navbar (z 1000) so the drawer, which lives inside
the navbar's stacking context, stays crisp on top of it. */
.nav-backdrop {
position: fixed;
inset: 0;
background: rgba(24, 18, 39, .5);
z-index: 990;
opacity: 0;
pointer-events: none;
transition: opacity .45s var(--ease);
}
.nav-backdrop.active {
opacity: 1;
pointer-events: auto;
}
/* Drop backdrop-filter on mobile: a filtered ancestor becomes the
containing block for position:fixed children, which clamps the
full-height drawer to the short navbar box when scrolled. Use a
near-opaque background instead. */
.navbar.scrolled {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(250, 246, 239, 0.96);
}
.nav-link,
.navbar:not(.scrolled) .nav-link {
color: var(--ink);
font-size: 0.95rem;
}
.nav-link .nav-num,
.navbar:not(.scrolled) .nav-link .nav-num {
color: var(--ink-faint);
}
.nav-link:hover .nav-num,
.nav-link.active .nav-num,
.navbar:not(.scrolled) .nav-link:hover .nav-num,
.navbar:not(.scrolled) .nav-link.active .nav-num {
color: var(--violet);
}
/* signpost above the in-page section list */
.nav-group-label {
display: block;
margin-bottom: -0.35rem;
}
/* divider becomes a full-width rule in the stacked drawer */
.nav-divider,
.navbar:not(.scrolled) .nav-divider {
width: 100%;
height: 1px;
background: var(--line);
margin: 0.4rem 0;
}
/* cross-page link reads as a full pill button in the drawer — the drawer
sits on a light panel, so it keeps the colourful spectrum ring */
.nav-cta,
.navbar:not(.scrolled) .nav-cta {
color: var(--ink);
justify-content: center;
padding: 0.7rem 1.1rem;
font-size: 0.8rem;
border-color: transparent;
background:
linear-gradient(var(--bone), var(--bone)) padding-box,
var(--spectrum) border-box;
}
.nav-cta .nav-cta-arrow,
.navbar:not(.scrolled) .nav-cta .nav-cta-arrow {
background: var(--ink);
color: var(--bone);
border: none;
}
.lang-toggle,
.navbar:not(.scrolled) .lang-toggle {
color: var(--ink);
border-color: var(--line);
align-self: flex-start;
}
/* the drawer sits on a light panel, so segments use the light scheme
regardless of the navbar state behind it */
.navbar:not(.scrolled) .lang-seg {
color: var(--ink-faint);
}
html:not([lang="en"]) .navbar:not(.scrolled) .lang-seg-pt,
html[lang="en"] .navbar:not(.scrolled) .lang-seg-en {
background: var(--ink);
color: var(--bone);
}
.mobile-toggle {
display: flex;
}
.nav-research-fab {
display: inline-flex;
}
.about-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.about-figure {
position: relative;
top: 0;
max-width: 420px;
}
.contact-grid {
grid-template-columns: 1fr;
}
.acad-profiles {
grid-template-columns: 1fr;
}
.projects-grid {
grid-template-columns: 1fr;
}
.stat-strip {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
@media (max-width: 640px) {
.container {
padding: 0 1.4rem;
}
.navbar .container {
padding: 1rem 1.4rem;
}
/* match the reduced container padding so the disc stays centred under the hamburger */
.nav-research-fab {
right: calc(1.4rem - 1px);
}
.section {
padding: 5rem 0;
}
.section-head {
padding: 0 1.4rem;
margin-bottom: 2.75rem;
}
.hero-scroll {
bottom: 1.5rem;
gap: 0.55rem;
font-size: 0.6rem;
letter-spacing: 0.28em;
opacity: 0.9;
}
.hero-scroll .scroll-indicator {
height: 34px;
}
.hero-inner {
padding: 7.5rem 1.4rem 7rem;
}
.hero-prism {
width: 128vw;
right: -34%;
height: 80%;
opacity: 0.42;
}
.about-grid,
.research-index,
.contact-grid,
.publications-list,
.projects-grid,
.pub-footnote,
.acad-subhead,
.acad-strip,
.acad-profiles,
.acad-cta-wrap {
padding-left: 1.4rem;
padding-right: 1.4rem;
}
.acad-subhead--gap {
margin-top: 3rem;
}
.acad-strip-inner {
grid-template-columns: 1fr 1fr;
}
.acad-strip-stat:nth-child(3) {
grid-column: 1 / -1;
border-left: none;
border-top: 1px solid var(--line);
}
.acad-cta {
padding: 2.25rem 2rem;
flex-direction: column;
align-items: flex-start;
gap: 1.75rem;
}
.research-row {
grid-template-columns: auto 1fr;
grid-template-areas:
"icon num"
"icon body";
column-gap: 1.1rem;
row-gap: 0.35rem;
align-items: start;
padding: 2rem 0.75rem;
}
/* number color ignites on active row — no transform */
.research-row .r-num {
align-self: center;
transition: color .5s var(--ease);
}
/* leading icon chip on mobile — spans both text rows */
.research-row .r-icon {
width: 52px;
height: 52px;
justify-self: start;
align-self: start;
margin-top: 0.15rem;
}
.research-row .r-glyph {
width: 24px;
height: 24px;
}
/* project card scroll-activation — edge bar + h3 color only */
.project-card {
transition: none;
}
.project-card.is-active::before {
transform: scaleY(1);
}
.project-card.is-active h3 {
color: var(--hue-ink, var(--hue));
}
.publication {
grid-template-columns: 1fr;
gap: 0.4rem;
}
.publication:hover {
padding-left: 0;
}
.pub-year {
padding-top: 0;
font-size: 1.75rem;
color: var(--phue-ink, var(--blue-ink));
}
.pub-filter-inner {
padding: 0.75rem 1.4rem;
gap: 0.4rem;
}
.pub-filter-label {
width: 100%;
margin: 0 0 0.2rem;
}
.stat-strip {
grid-template-columns: 1fr 1fr;
}
.hero-cta {
flex-direction: column;
align-items: stretch;
}
.hero-cta .btn {
justify-content: center;
}
}
/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
html {
scroll-behavior: auto;
}
.reveal,
.fade-up {
opacity: 1 !important;
transform: none !important;
}
.reveal-line>span {
transform: none !important;
}
.hero-mesh,
.footer-mesh,
.hero-bg,
.hero-prism {
animation: none !important;
}
}