/* Site enhancements: blue/black/white re-theme, header/nav redesign,
custom cursor, language dropdown, hero neuron-network background.
Loaded after styles-BSbdZIaz.css, so it can freely use / override the
same CSS custom properties (the whole site reads colors through them). */
/* ---------- First paint. This stylesheet is render-blocking, but
sn-enhance.js only patches the DOM once React has hydrated (patching
earlier broke hydration and made the old design flash). Hiding the
whole page until then cost ~2.4s of blank screen on phones, so only
what JS still changes is hidden: everything below the hero, plus the
hero's social row and count-up stats and the header's language and
Contact controls. The header, name, intro, buttons and portrait (the
LCP image) paint straight from the server HTML; the rules below make
that HTML already look like the patched page. sn-enhance.js adds
html.sn-ready after its first pass; the animation is a no-JS fallback
so the page never stays hidden. Visitors whose language is TR/ES get
html.sn-wait from an inline head script and wait for the whole page
as before, since the server HTML is English. ---------- */
html.sn-wait:not(.sn-ready) body,
html:not(.sn-ready) body:has(> div > div.max-w-md > h1.text-7xl),
html:not(.sn-ready) section[id]:not(#top),
html:not(.sn-ready) footer,
html:not(.sn-ready) #top .sn-reveal-delay-4,
html:not(.sn-ready) #top dl,
html:not(.sn-ready) header > div > div:last-child {
visibility: hidden;
animation: sn-reveal 0s 2.5s forwards;
}
@keyframes sn-reveal {
to {
visibility: visible;
}
}
/* Reserve the final sizes, so nothing moves when JS takes over. */
html:not(.sn-ready) #top .sn-reveal-delay-4 {
height: 44px;
overflow: hidden;
}
html:not(.sn-ready) header [role="group"][aria-label="Language"] {
width: 92px;
}
@media (max-width: 639px) {
/* Phones: language + Contact live in the menu panel. */
header > div > div:last-child:not(.sn-header-controls) {
display: none !important;
}
}
/* Server-HTML leftovers JS removes or rewrites. */
header a[href="#top"] img,
#top .sn-grid,
#top .sn-orb,
[class*="bg-black/40"] [class*="bg-gradient-to-"] {
display: none !important;
}
#top h1 > span {
display: inline !important;
}
/* The space JS adds to the text node; whitespace collapses, so it is
never doubled. */
#top h1 > span::before {
content: " ";
}
/* Affiliation logos: the server's scrolling marquee, laid out like the
static grid JS builds from it (duplicates hidden). */
.sn-marquee {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
justify-items: center;
align-items: center;
gap: 20px 28px !important;
width: 100% !important;
animation: none !important;
transform: none !important;
}
.sn-marquee > img:nth-child(n + 5) {
display: none;
}
.sn-marquee > img {
width: 100%;
max-width: 229px;
height: auto;
opacity: 1 !important;
}
@media (max-width: 767.98px) {
.sn-marquee {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px !important;
}
.sn-marquee > img {
max-width: none;
height: 84px;
padding: 8px max(8px, calc((100% - 186px) / 2));
box-sizing: border-box;
border-radius: 14px;
background: #f4f6f9;
object-fit: contain;
}
}
/* ---------- Inter, self-hosted (not Google Fonts' CDN): the site's
CSP restricts font-src to 'self' data:, and self-hosting avoids a
third-party request entirely. Replaced Sora site-wide -- Sora's
geometric letterforms (round "a", "g") read as modern/startup-y at
heading size, not what an academic site wants; Inter is a neutral,
UI-optimized grotesque with no strong "personality" of its own, the
standard choice for professional/institutional sites that still
need to look current. Two files, not four/eight: Google only
distributes Inter as a variable font, so one file per unicode
subset covers every weight this site actually uses (400/500/600/700,
declared as a range below), rather than needing a separate static
file per weight the way Sora did. The variable font's default axis
range is 100-900, but nothing here ever uses outside 400-700 --
trimmed to that with fonttools' instancer (a real, measured 29%
smaller download, 131KB to 93KB combined, for identical rendering
at every weight actually in use). Two files because the name needs
both subsets: "ü" is in the latin range, "Ş"/"ş" only exist in
latin-ext -- the browser picks whichever range a given character
needs automatically. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/assets/fonts/inter-var-latin-ext-HvXH47-4.woff2") format("woff2");
unicode-range: U+0100-017F;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/assets/fonts/inter-var-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;
}
:root {
--sn-name-font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
/* Overrides the compiled bundle's own --font-sans (a system-font
stack) -- since virtually every element reads its font through
that one variable, this single override applies Inter site-wide
without having to fight individual utility classes. */
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* ---------- Re-theme: blue / black / white, matching the logo's blue.
--primary is deliberately deeper than the logo's literal bright blue
(#0878d1): an automated contrast audit (axe-core) found that exact
blue failed WCAG AA (4.01:1, needs 4.5:1) as body-text link color
against the site's light card/section backgrounds -- affecting real
links (MEFELO, AERA, AAAL, BAAL in the About section) and every
section's small uppercase kicker label. This deeper tone
(#0560a6, 5.7:1 against --secondary, 6.5:1 against white) fixes
that with real margin, and also reads calmer/more institutional
than the brighter original -- which happens to suit an academic
site better than the higher-saturation blue a SaaS product would
use, so this one change serves both the accessibility fix and the
"less SaaS, more traditional academic" design request together. ---------- */
:root {
--primary: #0560a6;
--primary-foreground: #ffffff;
--primary-glow: #2879b0;
--ink: #090b0f;
--background: #ffffff;
--foreground: #0b0f14;
--card: #f6f8fa;
--card-foreground: #0b0f14;
--popover: #ffffff;
--popover-foreground: #0b0f14;
--secondary: #eef1f5;
--secondary-foreground: #0b0f14;
--muted: #eef1f5;
--muted-foreground: #5b6472;
--accent: #e7f1fc;
--accent-foreground: #0b4e86;
--border: #e2e6eb;
--input: #e2e6eb;
--ring: #0560a6;
--gradient-hero: linear-gradient(120deg, #0560a6 0%, #4a8fc4 100%);
--gradient-subtle: linear-gradient(180deg, #ffffff, #f3f6f9);
--shadow-elegant: 0 20px 60px -20px rgba(5, 96, 166, 0.3);
--shadow-soft: 0 4px 20px -4px rgba(11, 15, 20, 0.1);
}
/* ---------- Contact button: pulse removed regardless of source markup ---------- */
.sn-ring-pulse {
animation: none !important;
box-shadow: none !important;
}
/* Hero name: "Nural" was rendered as a blue gradient (bg-clip-text +
transparent fill) while "Dr. Şükrü" stayed plain white -- at explicit
request, the whole name is now solid white instead of split. */
h1 .bg-clip-text {
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #ffffff !important;
}
/* ================= Header / navigation redesign ================= */
/* Near-opaque black: an RGBA background (never `opacity`, which would
fade the nav text/controls along with the surface) plus a backdrop
blur, so content scrolling underneath shows through only very
faintly rather than the header meeting it as a hard, flat edge. A
lower opacity (70%) was tried and read as washed-out/gray once
bright content scrolled underneath, so this sits much closer to
solid (~92%) while keeping a thin blurred edge rather than none.
Deliberately constant -- it does not change on scroll or over
different sections. */
header {
position: sticky !important;
top: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
background: rgba(255, 255, 255, 0.86) !important;
border: 0 !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
box-shadow: none !important;
backdrop-filter: blur(18px) saturate(180%) !important;
-webkit-backdrop-filter: blur(18px) saturate(180%) !important;
z-index: 50 !important;
}
/* Solid fallback for browsers without backdrop-filter support --
otherwise nav text would sit over whatever's scrolling underneath
at only 90% opacity, with nothing softening it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
header {
background: rgba(255, 255, 255, 0.96) !important;
}
}
header > div {
max-width: 1280px;
min-height: 68px;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 28px !important;
padding-right: 28px !important;
position: relative;
}
@media (min-width: 1024px) {
header > div {
padding-left: 44px !important;
padding-right: 44px !important;
}
}
header a[href="#top"] {
color: #0b0f14 !important;
font-family: inherit;
}
/* Text-only wordmark, replacing the removed monogram. */
header a[href="#top"] span {
display: inline !important;
color: #0b0f14 !important;
font-family: var(--sn-name-font);
font-weight: 700;
font-size: 19px;
letter-spacing: -0.015em;
white-space: nowrap;
line-height: 1;
}
@media (min-width: 768px) {
header a[href="#top"] span {
font-size: 21px;
}
}
@media (min-width: 1024px) {
header a[href="#top"] span {
font-size: 26px;
}
}
/* Section strip: plain text links sitting on the header's bottom line
(the "rail"); .sn-nav-ind, a short line, slides under the current
section's link. Shown at every
width: in one row with the name on wide screens, as its own
sideways-scrolling row below that. */
header nav {
display: flex !important;
position: relative;
align-self: stretch;
align-items: stretch;
gap: 2px !important;
background: none;
border: 0;
border-radius: 0;
padding: 0;
}
header nav a {
display: flex;
align-items: center;
padding: 0 12px;
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
color: #4b5563 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0;
transition: color 0.2s ease;
}
header nav a:hover {
color: #0b0f14 !important;
}
header nav a.sn-nav-active,
header nav a[aria-current="location"] {
color: var(--primary) !important;
}
header nav a:focus-visible {
outline: 2px solid #6fc0ff;
outline-offset: -4px;
border-radius: 8px;
}
.sn-nav-ind {
position: absolute;
left: 0;
bottom: -1px;
height: 2px;
width: 0;
border-radius: 2px;
background: var(--primary);
opacity: 0;
pointer-events: none;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.2s ease;
}
.sn-nav-ind.is-on {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.sn-nav-ind {
transition: none;
}
}
/* Language pill + Contact button, restyled for the white/crystal header */
header .sn-lang-trigger {
background: rgba(15, 23, 42, 0.04);
border: 1px solid rgba(15, 23, 42, 0.1);
color: #0b0f14;
}
header .sn-lang-trigger:hover {
border-color: var(--primary);
}
header .sn-lang-menu {
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.1);
color: #0b0f14;
box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.25);
}
header .sn-lang-option {
color: #3a4250;
}
header .sn-lang-option:hover {
background: rgba(15, 23, 42, 0.06);
color: #0b0f14;
}
header .sn-lang-option[aria-selected="true"] {
color: #ffffff;
background: var(--primary);
font-weight: 600;
}
header button:has(.lucide-mail) {
/* Pinned so narrow-width padding/font trims (below) can never shrink
it out of sync with the language control's own matching height. */
height: 36px !important;
box-sizing: border-box !important;
border-radius: 8px !important;
background: var(--primary) !important;
box-shadow: 0 0 0 1px rgba(8, 120, 209, 0.5), 0 6px 20px -4px rgba(8, 120, 209, 0.65) !important;
transition: none !important;
}
/* No hover animation (the app's own hover:-translate-y-0.5 included). */
header button:has(.lucide-mail):hover {
transform: none !important;
translate: none !important;
filter: none;
}
header button:has(.lucide-mail):focus-visible {
outline: 2px solid #6fc0ff;
outline-offset: 2px;
}
/* Menu toggle for small screens: three bars that morph into an X. */
.sn-hamburger {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border-radius: 12px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: rgba(255, 255, 255, 0.6);
color: #0b0f14;
cursor: pointer;
flex-shrink: 0;
}
.sn-burger {
position: relative;
display: block;
width: 18px;
height: 14px;
}
.sn-burger > span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.sn-burger > span:nth-child(1) {
top: 0;
}
.sn-burger > span:nth-child(2) {
top: 6px;
}
.sn-burger > span:nth-child(3) {
top: 12px;
}
.sn-hamburger[aria-expanded="true"] .sn-burger > span:nth-child(1) {
top: 6px;
transform: rotate(45deg);
}
.sn-hamburger[aria-expanded="true"] .sn-burger > span:nth-child(2) {
opacity: 0;
transform: scaleX(0.2);
}
.sn-hamburger[aria-expanded="true"] .sn-burger > span:nth-child(3) {
top: 6px;
transform: rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
.sn-burger > span {
transition: none;
}
}
.sn-hamburger:focus-visible {
outline: 2px solid #6fc0ff;
outline-offset: 2px;
}
@media (max-width: 420px) {
header > div {
padding-left: 12px !important;
padding-right: 12px !important;
}
header > div > div:last-child {
gap: 3px !important;
}
header a[href="#top"] span {
/* Stay within the required 18-20px mobile range even at the
narrowest supported width -- reduced carefully, never abbreviated. */
font-size: 18px;
}
}
/* Just above the one-row breakpoint the row is tight (Spanish labels
are the longest), so the name and link spacing shrink a little. */
@media (min-width: 1024px) and (max-width: 1199px) {
header a[href="#top"] span {
font-size: 22px;
}
header nav a {
padding: 0 9px;
font-size: 13.5px;
}
}
@media (min-width: 1024px) and (max-width: 1099px) {
html[lang="es"] header nav a {
padding: 0 7px;
}
html[lang="es"] header > div {
padding-left: 28px !important;
padding-right: 28px !important;
}
}
/* Layout by width:
- 1024px and up: one row, name | strip | language + Contact.
- 640-1023px: two rows, name | language + Contact, then the strip.
- below 640px: two rows, name | menu button, then the strip; the menu
button opens language + Contact as a small panel. */
@media (max-width: 1023px) {
header > div {
flex-wrap: wrap;
row-gap: 0 !important;
min-height: 0;
}
header a[href="#top"] {
min-height: 60px;
}
header .sn-header-controls {
margin-left: auto;
}
header nav {
order: 10;
flex: 0 0 auto;
width: calc(100% + 56px);
height: 44px;
margin: 0 -28px;
padding: 0 16px;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
border-top: 1px solid rgba(15, 23, 42, 0.06);
}
header nav::-webkit-scrollbar {
display: none;
}
header nav a {
padding: 0 12px;
font-size: 14.5px;
}
/* Anchored sections clear the taller two-row header (105px). html
prefix: the generic 88px rule comes later in this file. */
html section[id] {
scroll-margin-top: 112px;
}
}
@media (max-width: 639px) {
.sn-hamburger {
display: inline-flex;
margin-left: auto;
}
/* Language + Contact: hidden until the menu button opens them. */
header .sn-header-controls {
display: none !important;
position: absolute;
top: calc(100% + 8px);
right: 12px;
z-index: 60;
width: min(320px, calc(100vw - 24px));
margin: 0;
padding: 12px;
gap: 8px !important;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 16px;
box-shadow: 0 24px 48px -20px rgba(15, 23, 42, 0.35);
}
html.sn-menu-open header .sn-header-controls {
display: grid !important;
}
html.sn-menu-open body::before {
content: "";
position: fixed;
inset: 0;
z-index: 40;
background: rgba(11, 15, 20, 0.3);
}
.sn-header-controls .sn-lang {
width: 100%;
}
/* The three languages as an always-visible segmented control (a
popup inside this panel would need its own positioning). */
.sn-header-controls .sn-lang-trigger {
display: none;
}
.sn-header-controls .sn-lang-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
transition: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
min-width: 0;
padding: 4px;
border-radius: 12px;
background: rgba(15, 23, 42, 0.04);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: none;
}
.sn-header-controls .sn-lang-option,
.sn-header-controls .sn-lang-option:hover {
justify-content: center;
gap: 6px;
min-height: 44px;
padding: 6px 4px;
font-size: 14px;
font-weight: 500;
color: #5b6472;
background: transparent;
}
.sn-header-controls .sn-lang-option[aria-selected="true"] {
color: #0b0f14;
background: #ffffff;
font-weight: 600;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.sn-header-controls button:has(.lucide-mail) {
width: 100%;
height: 44px !important;
justify-content: center;
font-size: 15px;
}
}
@media (max-width: 420px) {
header nav {
width: calc(100% + 24px);
margin: 0 -12px;
padding: 0 4px;
}
}
/* ---------- Language dropdown structure (colors themed above) ---------- */
.sn-lang-hide-original {
display: none !important;
}
.sn-lang {
position: relative;
flex-shrink: 0;
}
.sn-lang-trigger {
/* Matches the Contact button's own box exactly: 36px tall (8px
vertical padding, 14px horizontal, 14px text, 8px corner radius),
so the two controls read as one family instead of a small pill
next to a large button. */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 92px;
height: 36px;
box-sizing: border-box;
border-radius: 8px;
padding: 8px 14px;
font-size: 14px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
.sn-lang-trigger .sn-lang-chevron {
width: 11px;
height: 11px;
opacity: 0.65;
transition: transform 0.2s ease;
}
.sn-lang.is-open .sn-lang-chevron {
transform: rotate(180deg);
}
.sn-lang-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 160px;
padding: 6px;
border-radius: 12px;
display: grid;
gap: 2px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px) scale(0.98);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
z-index: 40;
}
.sn-lang.is-open .sn-lang-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.sn-lang-option {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
border: 0;
background: transparent;
cursor: pointer;
padding: 7px 8px;
border-radius: 8px;
font-size: 13px;
text-align: left;
}
.sn-lang-flag {
display: inline-block;
width: 18px;
height: 13px;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
flex-shrink: 0;
}
/* ---------- Social links (ORCID/LinkedIn/YouTube/X/Instagram),
smaller at explicit request -- same pill shows up in both the hero
and the footer's "Get in touch" block, so one rule covers both. ---------- */
a[class*="border-white/15"][class*="rounded-full"] {
padding: 6px 8px !important;
gap: 6px !important;
font-size: 12px !important;
}
a[class*="border-white/15"][class*="rounded-full"] svg {
width: 13px !important;
height: 13px !important;
}
/* At exactly the width where the hero switches to its 2-column layout
(lg: 1024px), the text column's suddenly-narrower width was just
short of fitting all 5 buttons on one row -- Instagram wrapped onto
its own row with a lot of empty space next to it (measured: 486px
available vs ~505px needed at the default 12px gap). Tightening the
gap for this row specifically closes that without shrinking the
buttons further everywhere. */
.flex.flex-wrap.items-center.gap-3:has(a[href*="orcid.org"]) {
gap: 6px !important;
}
/* ---------- Hero background: plain solid color, no light/glow effect
-- tried an animated ambient glow through several iterations this
project (multi-blob field, cursor-spotlight, single slow blob), but
at explicit request it's gone entirely now in favor of a flat,
simple academic-feeling background. ---------- */
/* ===================================================================
Below-header visual system. Header is explicitly out of scope and
untouched below. All selectors are scoped to `section` descendants
(the header's own max-w-6xl container is a header child, not a
section child, so it's naturally excluded) or to specific sections.
=================================================================== */
/* Shared content width + responsive section rhythm. Tailwind's own
max-w-6xl/py-20 utilities are same-specificity class selectors; this
compound descendant selector already wins without needing !important
for the width, but py-20 needs it since both are single utility
classes on the same element. */
section[id] > div[class*="max-w-6xl"] {
max-width: 1180px;
}
section[id]:not(#top):not(#contact) > div[class*="max-w-6xl"] {
padding-top: 96px !important;
padding-bottom: 96px !important;
}
@media (max-width: 1024px) {
section[id]:not(#top):not(#contact) > div[class*="max-w-6xl"] {
padding-top: 64px !important;
padding-bottom: 64px !important;
}
}
@media (max-width: 640px) {
section[id]:not(#top):not(#contact) > div[class*="max-w-6xl"] {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
}
/* Alternating section bands between the dark hero and the dark contact
block: a very light cool tint, then white, strictly in turn (MEFELO,
inserted after About, is part of the rhythm). Adjacent bands differ in
colour, so the old 1px rules between sections are dropped. Cards are
white with a hairline border, so they read on both bands. */
:root {
--sn-band: #f4f6f9;
--card: #ffffff;
}
#about,
#research,
#education,
#seminars {
background: var(--sn-band) !important;
}
#mefelo,
#experience,
#publications,
#workshops {
background: #ffffff !important;
}
#about,
#mefelo,
#research,
#experience,
#education,
#publications,
#seminars,
#workshops {
border-top: 0 !important;
}
/* One consistent card radius: the compact seminar/workshop list items
used a smaller radius than the feature cards elsewhere; bring them
in line with the 12-16px range used everywhere else. */
[class*="rounded-lg"][class*="border-border"][class*="bg-card"] {
border-radius: 12px !important;
}
/* Comfortable paragraph measure (~60-72ch) for the long-form bio text. */
#about p {
max-width: 68ch;
}
/* ---------- Hero refinement (content/order/labels unchanged) ---------- */
/* Portrait: clean 4:5 frame with intentional cover-fit crop instead of
the previous unconstrained object-contain image + heavy drop-shadow. */
#top img[alt^="Portrait of"] {
width: 100%;
max-width: 380px;
aspect-ratio: 4 / 5;
object-fit: cover !important;
object-position: 50% 18%;
filter: none !important;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 30px 60px -24px rgba(8, 120, 209, 0.4), 0 14px 32px -14px rgba(0, 0, 0, 0.55);
}
/* Button hierarchy: "View Publications" becomes the primary academic
action, "Get in touch" becomes secondary. Destinations/labels/i18n
are untouched -- this only swaps which one looks solid vs outline. */
#top a[href="#publications"] {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: #fff !important;
box-shadow: 0 14px 32px -12px rgba(8, 120, 209, 0.55) !important;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
#top a[href="#publications"]:hover {
background: var(--primary-glow) !important;
}
}
#top .sn-reveal-delay-3 > :first-child {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
color: #fff !important;
box-shadow: none !important;
}
@media (hover: hover) {
#top .sn-reveal-delay-3 > :first-child:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
}
/* Hero buttons: no light sweep and no lift. The sweep was a full-size
gradient bar sliding through "Get in touch"; WebKit (Safari, every
iPhone browser) does not clip a moving child to a rounded
overflow:hidden parent, so it spilled over the buttons next to it.
Tailwind v4 lifts with the separate translate property. */
#top .sn-reveal-delay-3 > * {
translate: none !important;
transform: none !important;
transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
#top .sn-reveal-delay-3 > * > span[aria-hidden="true"] {
display: none !important;
}
/* Social links: visible, but quieter than the two primary actions. */
#top .sn-reveal-delay-4 a {
opacity: 0.82;
transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
#top .sn-reveal-delay-4 a:hover {
opacity: 1;
}
/* Stats strip: subtle dividers between items instead of only a top rule,
spanning the full text-column width for even distribution. */
#top dl {
max-width: 100% !important;
}
#top dl > div:not(:first-child) {
border-left: 1px solid rgba(255, 255, 255, 0.12);
padding-left: 24px;
}
/* ===================================================================
Content-section redesign (below the hero). Header untouched above.
=================================================================== */
/* "Academic affiliations" strip: switched from a dark bar (matching
the hero above it) to a plain white one with dark text, at explicit
request -- also gives the logo cards (each already a white rounded
card baked into the image itself) a background they sit flush
against instead of floating on dark. */
[class*="bg-black/40"] {
background: #ffffff !important;
border-top-color: rgba(15, 23, 42, 0.08) !important;
}
[class*="bg-black/40"] [class*="text-white/40"] {
color: #0b0f14 !important;
}
/* The old marquee's scroll-edge fade overlays (JS removes them on
init) painted the strip's old dark color over the edges -- hide
them immediately too, so there's no dark flash before JS runs. */
[class*="bg-black/40"] [class*="bg-gradient-to-r"],
[class*="bg-black/40"] [class*="bg-gradient-to-l"] {
display: none !important;
}
/* Contact section's "Get in touch" eyebrow label uses --primary-glow as
text color on a near-black background: 4.17:1, needs 4.5:1. Can't just
change --primary-glow itself -- it's also used as the "View
Publications" button's hover background, where the current value is
tuned for contrast against white button text. Override this one
consumer directly instead. */
.text-\[color\:var\(--primary-glow\)\] {
color: #4a9bd0 !important;
}
/* ---------- Academic affiliations: static, deduplicated row instead
of an infinitely-scrolling marquee. JS removes the duplicate ![]()
nodes and swaps the marquee/flex classes for these. A real grid, not
flex-wrap: an earlier logo set had mismatched shapes (a near-square
crest, wide wordmarks) that made equal-width grid cells scale each
to a different height. The current logo set is four uniform,
same-aspect-ratio cards (baked in, see below), so that problem no
longer applies, and a grid gives evenly aligned columns/rows instead
of flex-wrap's more organic, unaligned wrapping. ---------- */
.sn-affiliations-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
justify-items: center;
align-items: center;
gap: 20px 28px;
width: 100% !important;
}
@media (max-width: 767.98px) {
.sn-affiliations-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* The current logo set (NewUniLogos) ships as finished, uniform white
rounded-rect cards baked directly into each file -- same canvas
shape for all four -- so this wrapper is just a sizing/alignment
box, not a second card drawn on top. (An earlier logo drop needed
an externally-drawn card because those files were transparent
cutouts of inconsistent shape/size; that's no longer the case, and
re-adding a background/border/shadow here just doubled up on the
image's own card and looked wrong.) */
.sn-affiliation-logo-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* height:100%/width:auto (not max-height/max-width) is the point:
every logo renders at the exact same pixel height, with width
following its own natural aspect ratio. All four cards now share
the same baked-in aspect ratio, so no extra size boost is needed
for any one of them. */
/* All four files share one 500x175 canvas (optical balance baked in),
so they scale by width: 229px wide = the 80px-tall size used on wide
screens, and narrower cells shrink every logo by the same factor
instead of letting the wide ones spill out. */
.sn-affiliation-logo {
width: 100%;
max-width: 229px;
height: auto;
object-fit: contain;
}
/* Phones: a 2x2 grid of equal soft tiles, logos centred inside. */
@media (max-width: 767.98px) {
.sn-affiliations-grid {
gap: 12px;
}
.sn-affiliation-logo-box {
height: 84px;
padding: 8px;
box-sizing: border-box;
border-radius: 14px;
background: var(--sn-band, #f4f6f9);
}
.sn-affiliation-logo {
max-width: 170px;
max-height: 100%;
}
}
/* ---------- About: slightly more paragraph separation. ---------- */
#about .space-y-4 > p + p {
margin-top: 22px;
}
/* ---------- About: the compiled bundle's AERA/AAAL/BAAL paragraph is
hidden outright (never removed or edited -- see patchMemberships() in
sn-enhance.js for why) and replaced by .sn-membership-note, a plain
JS-authored paragraph with the complete founding-director + memberships
sentence, INGED/ELTER included. ---------- */
#about p:has(> a[href="https://www.baal.org.uk/"]):not(.sn-membership-note) {
display: none;
}
.sn-membership-note {
margin-top: 22px;
}
/* Colour alone doesn't set these links apart from the paragraph text
(2:1 contrast), so underline them. */
.sn-membership-note a {
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---------- MEFELO section: built and inserted by sn-enhance.js's
insertMefeloSection() (the compiled bundle predates this section, so
there's no Tailwind utility markup to hook -- these are dedicated
rules using the same design tokens (--primary, --border, --card, etc.)
as the rest of the site, matching the About section's layout rhythm
(border-top, max-w-6xl). Text and the MEFELO 2025 photo run as equal
columns at lg, photo below text on narrower screens. The small
favicon logo lives in the heading's own icon badge -- its previous
spot (a separate block sitting below the heading with nothing else
around it) read as an afterthought; giving the section an actual
photo made room to use the badge slot for it instead of a generic
trophy glyph. ---------- */
.sn-mefelo {
border-top: 1px solid var(--border);
}
.sn-mefelo-inner {
max-width: 72rem;
margin: 0 auto;
padding: 80px 24px;
display: grid;
gap: 40px;
align-items: center;
}
@media (min-width: 1024px) {
.sn-mefelo-inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 56px;
}
}
.sn-mefelo-head-top {
display: flex;
align-items: center;
gap: 16px;
}
.sn-mefelo-icon {
display: grid;
place-items: center;
height: 56px;
width: 56px;
flex: none;
border-radius: 16px;
background: #fff;
border: 1px solid var(--border);
overflow: hidden;
}
.sn-mefelo-icon img {
height: 100%;
width: 100%;
object-fit: contain;
padding: 2px;
}
.sn-mefelo-kicker {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--primary);
}
.sn-mefelo-title {
margin-top: 2px;
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--foreground);
}
.sn-mefelo-mission {
margin-top: 20px;
color: color-mix(in oklab, var(--foreground) 85%, transparent);
line-height: 1.7;
}
/* ---------- MEFELO photo carousel: slides are stacked absolutely and
crossfaded via opacity (not a translating track) -- simplest way to
handle photos of differing native aspect ratios landing consistently
inside one fixed frame, with no width/transform math to keep in sync
on resize. Autoplay pauses on hover/focus and is skipped entirely
under prefers-reduced-motion (see initMefeloCarousel() in
sn-enhance.js). ---------- */
.sn-mefelo-photo {
position: relative;
margin: 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
box-shadow: var(--shadow-soft);
}
.sn-mefelo-slides {
position: relative;
aspect-ratio: 4 / 3;
}
/* only picks the file; the stacked ![]()
slides lay out as before. */
.sn-mefelo-picture {
display: contents;
}
.sn-mefelo-slide {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.6s ease;
}
.sn-mefelo-slide.is-active {
opacity: 1;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.sn-mefelo-slide {
transition: none;
}
}
.sn-mefelo-nav {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
height: 34px;
width: 34px;
transform: translateY(-50%);
border-radius: 9999px;
border: none;
background: rgba(0, 0, 0, 0.45);
color: #fff;
cursor: pointer;
transition: background-color 0.2s ease;
}
.sn-mefelo-nav:hover {
background: rgba(0, 0, 0, 0.65);
}
.sn-mefelo-nav svg {
height: 18px;
width: 18px;
}
.sn-mefelo-prev {
left: 10px;
}
.sn-mefelo-next {
right: 10px;
}
.sn-mefelo-dots {
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 12px;
display: flex;
justify-content: center;
gap: 0;
}
/* 24px transparent hit area (WCAG target size) around the 7px dot,
which is drawn by ::before so it looks the same as before. */
.sn-mefelo-dot {
display: grid;
place-items: center;
height: 24px;
width: 24px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
}
.sn-mefelo-dot::before {
content: "";
height: 7px;
width: 7px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.55);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.sn-mefelo-dot.is-active::before {
background: #fff;
transform: scale(1.25);
}
.sn-mefelo-photo figcaption {
position: absolute;
left: 12px;
top: 12px;
z-index: 2;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 5px 10px;
border-radius: 6px;
}
.sn-mefelo-socials {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.sn-mefelo-social-btn {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 9999px;
border: 1px solid var(--border);
background: var(--card);
padding: 5px 9px;
font-size: 13px;
font-weight: 500;
color: color-mix(in oklab, var(--foreground) 80%, transparent);
text-decoration: none;
white-space: nowrap;
transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sn-mefelo-social-btn:hover {
transform: translateY(-2px);
border-color: color-mix(in oklab, var(--primary) 40%, transparent);
color: var(--foreground);
}
.sn-mefelo-social-btn svg {
height: 14px;
width: 14px;
flex: none;
}
@media (prefers-reduced-motion: reduce) {
.sn-mefelo-social-btn,
.sn-mefelo-social-btn:hover {
transition: none;
transform: none;
}
}
/* ---------- Research cards: force the first card out of its
"sm:col-span-2" featured-card treatment (a Tailwind utility class
compiled into the bundle) so the grid is 6 uniform cards -- 3 even
rows of 2 at the sm breakpoint, 2 even rows of 3 at lg -- instead of
one full-width card followed by an odd 2/2/1 split. A JS classList
removal was tried first but didn't hold: React can restore the class
via an attribute-only update, which the page's childList-based
MutationObserver never sees, so it silently came back at some sizes.
A CSS override has no such timing gap -- it's just always in force,
however many times React touches that class underneath it. ---------- */
#research .sn-tilt:first-child {
grid-column: span 1 / span 1 !important;
}
/* ---------- Research cards: tighter padding, one restrained hover
(upward shift + border color only -- no 3D tilt), full reduced-motion
support (the shared .sn-tilt rule doesn't currently opt out). ---------- */
#research .sn-tilt {
padding: 20px !important;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#research .sn-tilt:hover {
transform: translateY(-4px) !important;
}
@media (prefers-reduced-motion: reduce) {
.sn-tilt,
.sn-tilt:hover {
transform: none !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
}
/* ---------- Professional Positions timeline ---------- */
#experience .relative.border-l {
contain: layout;
}
#experience h3 {
font-size: 16px;
}
#experience .relative.border-l p {
font-size: 13px;
color: var(--muted-foreground);
}
#experience .relative.border-l > div > span[class*="rounded-full"][class*="bg-primary"] {
background: var(--primary) !important;
box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 15%, transparent);
}
@media (max-width: 480px) {
#experience .relative.border-l {
padding-left: 20px;
}
#experience .relative.border-l span[class*="-left-"] {
left: -26px !important;
}
}
/* Expand/collapse control shared by Experience and Seminars.
max-height is measured and set inline by JS (scrollHeight is
unaffected by overflow:hidden clipping, so it can be read at any
time), letting the transition below animate smoothly. */
.sn-expand-item {
overflow: hidden;
max-height: 0;
opacity: 0;
border-bottom-width: 0 !important;
contain: layout;
/* padding deliberately NOT transitioned: JS reads scrollHeight
synchronously right after toggling the expanded class to compute
max-height, and a transitioning padding value makes that read
measure the barely-started (near-zero) padding instead of its
final 14px -- clipping the second line of any multi-line row.
Padding snapping instantly is not noticeable anyway since
max-height/opacity are simultaneously animating the row in. */
/* Cut from 0.28s/0.2s (measured: ~287ms from click to fully open,
confirmed via transitionend -- not a bug, just a duration that
read as sluggish) to make expand/collapse feel closer to instant
while keeping enough motion that content doesn't just pop/vanish. */
transition: max-height 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s ease, border-bottom-width 0.15s ease;
}
/* Seminars' "View all Seminars and Conferences" gap: each collapsed
row is a card with its own 14px top/bottom padding (p-4). max-height:
0 + overflow:hidden collapses the row's CONTENT, but padding still
renders (border-box counts padding inside max-height in theory, but
in practice on this flex row it doesn't get clipped) -- so all 8
collapsed rows still showed their 28px of padding + 1px border,
~29px each, stacking into real, visible dead space above the
button. Zero it the same way border-bottom-width already is. */
.sn-expand-item {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Same specificity fix as #seminars ul > li.sn-expand-item below: a
plain ".sn-items-expanded .sn-expand-item" selector (3 classes) was
losing this restore to that id+tag+class rule the same way the
collapsed-state zero-out was losing earlier, so expanded rows were
still rendering with 0 padding -- cramped, uneven-looking spacing
next to the always-padded rows above them. */
#seminars ul.sn-items-expanded > li.sn-expand-item {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
/* The actual cause of the long-reported gap above "View complete career
history": Experience's timeline uses Tailwind's space-y-8 utility
(margin-bottom: 2rem on every child but the last, in this build) for
its normal 32px rhythm between entries. That margin applies to EVERY
direct child regardless of visibility -- so each of the 5 collapsed
.sn-expand-item rows before the last one still carries its own 32px
margin-bottom even though max-height:0 collapses its own box to
nothing, and those margins simply stack: 5 x 32px = ~160px of dead
space between the last visible entry and the button, on top of the
button's own margin. Zero it out while collapsed and restore the
exact same pattern (all but the last) only once expanded (seminars'
list doesn't use space-y-* for its rhythm, so it never had this
problem). */
#experience .sn-expand-item {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#experience .sn-items-expanded .sn-expand-item:not(:last-child) {
margin-bottom: 2rem !important;
}
.sn-items-expanded .sn-expand-item {
opacity: 1;
}
.sn-items-expanded .sn-expand-item.sn-seminar-row {
border-bottom-width: 1px !important;
}
@media (prefers-reduced-motion: reduce) {
.sn-expand-item {
transition: none;
}
}
.sn-expand-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
min-height: 44px;
padding: 9px 16px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--card);
color: var(--primary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.sn-expand-toggle:hover {
border-color: var(--primary);
background: var(--accent);
}
.sn-expand-toggle:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.sn-expand-toggle .sn-expand-chev {
width: 13px;
height: 13px;
transition: transform 0.2s ease;
}
.sn-expand-toggle[aria-expanded="true"] .sn-expand-chev {
transform: rotate(180deg);
}
/* ---------- Seminars & Conferences: compact, year-first rows. ---------- */
#seminars ul {
gap: 0 !important;
display: block !important;
contain: layout;
}
#seminars ul > li.sn-seminar-row {
display: flex;
align-items: flex-start;
gap: 14px;
border-radius: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--border) !important;
padding: 14px 2px !important;
background: transparent !important;
}
#seminars ul > li.sn-seminar-row:last-child,
#seminars ul > li.sn-expand-item:last-child {
border-bottom: 0 !important;
}
#seminars ul > li.sn-expand-item {
/* Same selector specificity as .sn-seminar-row above (id + tag +
class), placed after it so it wins the tie for collapsed rows and
actually zeroes their padding -- the plain ".sn-expand-item {
padding: 0 !important }" rule elsewhere in this file loses to that
rule above (higher specificity: id+tag+class beats a bare class)
and had no effect on its own. */
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.sn-year-badge {
flex-shrink: 0;
min-width: 54px;
padding-top: 1px;
font-size: 15px;
font-weight: 700;
color: var(--primary);
font-variant-numeric: tabular-nums;
}
.sn-seminar-body {
flex: 1;
min-width: 0;
line-height: 1.55;
font-size: 15px !important;
}
/* ---------- Site-wide readability pass: bump reading-content font
sizes a step up across every section. Scoped to #sn-main so the
header's pill nav/buttons -- already precisely tuned to a fixed
36px height -- are left untouched. ---------- */
#sn-main .text-3xl {
font-size: 34px !important;
line-height: 1.15 !important;
}
#sn-main .text-base {
font-size: 17px !important;
line-height: 1.5 !important;
}
#sn-main .text-sm {
font-size: 15px !important;
line-height: 1.6 !important;
}
#top p {
font-size: 19px !important;
}
#about p,
#publications li {
font-size: 17px !important;
line-height: 1.65 !important;
}
/* ---------- Workshops: lighter than Publications/Seminars. ---------- */
#workshops ul {
gap: 12px !important;
}
#workshops li {
box-shadow: none !important;
background: transparent !important;
border-color: var(--border) !important;
}
/* ---------- Contact: tighter spacing, connected to the footer below. ---------- */
#contact > div {
padding-top: 72px !important;
padding-bottom: 56px !important;
}
#contact .grid.md\:grid-cols-2 {
align-items: center;
}
/* Email + Location as two dark cards with an icon tile, centred against
the text column and flush with the right edge on wide screens. */
#contact .space-y-5 {
display: grid;
gap: 12px;
width: 100%;
max-width: 440px;
}
@media (min-width: 768px) {
#contact .space-y-5 {
justify-self: end;
}
}
#contact .space-y-5 > div {
margin: 0 !important;
align-items: flex-start;
gap: 16px !important;
padding: 18px 20px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: border-color 0.2s ease, background-color 0.2s ease;
}
#contact .space-y-5 > div:hover {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.06);
}
#contact .space-y-5 > div > svg {
flex: none;
box-sizing: content-box;
width: 20px !important;
height: 20px !important;
margin: 0 !important;
padding: 10px;
border-radius: 12px;
background: rgba(74, 155, 208, 0.14);
color: var(--primary-glow);
}
#contact .space-y-5 .text-white\/60 {
margin-bottom: 4px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55) !important;
}
#contact .space-y-5 a {
font-size: 16px;
font-weight: 600;
word-break: break-word;
}
#contact .space-y-5 p {
font-size: 15px;
line-height: 1.6;
}
/* Copyright line: its own strip under a hairline. */
footer {
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
padding-top: 0 !important;
}
footer > div {
padding-top: 20px !important;
}
/* ===================================================================
Interaction / responsive / accessibility pass. Header untouched.
=================================================================== */
/* ---------- Navigation: offset anchored sections below the sticky
header, smooth pointer scrolling (off under reduced motion). ---------- */
section[id] {
scroll-margin-top: 88px;
}
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* ---------- Skip link: visually hidden until keyboard-focused. ---------- */
.sn-skip-link {
position: fixed;
top: 10px;
left: 10px;
z-index: 2147483647;
/* Far enough up that its shadow can't bleed into the header. */
transform: translateY(calc(-100% - 60px));
background: var(--primary);
color: #fff;
padding: 10px 18px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.4);
transition: transform 0.15s ease;
}
.sn-skip-link:focus {
transform: translateY(0);
}
/* ---------- Back-to-top button ---------- */
.sn-to-top {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--card);
color: var(--primary);
box-shadow: var(--shadow-soft);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, border-color 0.2s ease, background-color 0.2s ease;
}
.sn-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sn-to-top:hover {
border-color: var(--primary);
background: var(--accent);
}
.sn-to-top:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.sn-to-top svg {
width: 19px;
height: 19px;
}
@media (prefers-reduced-motion: reduce) {
.sn-to-top {
transition: opacity 0.2s ease, visibility 0.2s;
transform: none !important;
}
}
/* ---------- Focus-visible safety net for the site's own pre-existing
interactive elements (links, buttons, cards) -- additive only, never
removes an outline without this replacement already covering it. ---------- */
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: 4px;
}
/* ---------- Responsive QA fixes ----------
Horizontal-overflow guard is scoped to #sn-main rather than html/body:
overflow-x:hidden on *any* axis makes that element a CSS "scroll
container" per spec (regardless of the other axis's value), and a
sticky descendant sticks relative to its nearest scroll-container
ancestor -- so hidden on body silently breaks the header's
position:sticky (confirmed: removing it restored top:0 immediately).
#sn-main is a *sibling* of the header, not an ancestor, so scoping
the guard there fixes horizontal overflow without touching the
header's containing-block chain at all. */
#sn-main {
overflow-x: hidden;
}
/* #top is position:relative but never gets a stacking context of its
own (no z-index/isolation in the original markup), so its "-z-10"
decorative background layer -- used by both the hero lights below
and, before them, the site's own neuron-network canvas -- escapes
to the document root and paints behind literally everything on the
page instead of just behind the hero's own content. Confirmed by
temporarily forcing that layer to solid opaque red: still hidden
without this. isolation:isolate contains it properly. */
#top {
isolation: isolate;
}
#top h1 {
overflow-wrap: break-word;
/* Same identity as the header wordmark. The "Nural" span keeps its own
gradient/background-clip color rule from the base stylesheet --
only family/weight are set here, so that isn't touched. Font-size
is reduced from the original text-5xl/6xl/7xl because bold display
serif/sans faces at that size wrapped ("Nural" landing alone on its
own line) against the column's max-width. Re-verified not to wrap
at any width for the current font. */
font-family: var(--sn-name-font);
font-weight: 700;
font-size: 35px !important;
}
@media (min-width: 640px) {
#top h1 {
font-size: 50px !important;
}
}
@media (min-width: 1024px) {
#top h1 {
font-size: 60px !important;
}
}
#publications p,
#seminars .sn-seminar-body,
#workshops li {
overflow-wrap: break-word;
}
@media (max-width: 480px) {
.sn-to-top {
right: 14px;
bottom: 14px;
}
}
/* ---------- CV download dialog (ALTCHA), built by sn-enhance.js. ---------- */
.sn-cv-dialog {
/* The site's Tailwind reset sets margin: 0 on everything, which drops the
browser's default centering of a modal