/* ============================================================ abdu.codes Warm paper background, tinted section bands, white cards. Colour is surface here, not just an accent on text. ============================================================ */ :root { --paper: #f6f4f0; /* warm off-white, the page itself */ --card: #ffffff; /* raised surfaces sit above the paper */ --ink: #161a21; --ink-2: #3b434f; --muted: #6d7684; --faint: #9aa2ae; --line: #e4e0d9; --line-2: #cfcabf; --c-pub: #4a3fb5; /* indigo */ --c-prj: #0f7a6e; /* teal */ --c-exp: #a8560c; /* amber */ --c-edu: #b31a46; /* rose */ --c: var(--c-pub); --accent: var(--c-pub); --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --sans: Inter, -apple-system, "Segoe UI", Roboto, sans-serif; --arabic: "IBM Plex Sans Arabic", "Segoe UI", "Noto Sans Arabic", sans-serif; --mono: "JetBrains Mono", "Cascadia Code", Consolas, ui-monospace, monospace; --wrap: 900px; --wrap-lg: 1080px; --radius: 10px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 86px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--sans); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--c-pub) 18%, #fff); color: var(--ink); } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--ink); line-height: 1.25; letter-spacing: -0.012em; margin: 0; } p { margin: 0 0 1.1rem; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } img { max-width: 100%; height: auto; } /* beats the HTML height attribute */ strong { color: var(--ink); font-weight: 600; } .wrap { width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto; } .wrap-lg { width: min(var(--wrap-lg), calc(100% - 3rem)); margin-inline: auto; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 0.6rem 1rem; font-weight: 600; } .skip-link:focus { left: 0; } a:focus-visible, button:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; border-radius: 3px; } /* ───────────────────────────────── masthead */ .topbar { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; background: var(--line); } .topbar-fill { display: block; height: 100%; width: 100%; transform: scaleX(var(--progress, 0)); transform-origin: left; background: linear-gradient(90deg, var(--c-pub), var(--c-prj) 38%, var(--c-exp) 68%, var(--c-edu)); transition: transform 0.08s linear; } .no-js .topbar-fill { transform: scaleX(1); } .masthead { position: sticky; top: 0; z-index: 40; margin-top: 3px; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .masthead-inner { width: min(var(--wrap-lg), calc(100% - 3rem)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.9rem 0; } .brand { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; } .brand:hover { text-decoration: none; color: var(--ink); } .brand-sl { color: var(--c-pub); margin-right: 0.04em; display: inline-block; transition: transform 0.3s cubic-bezier(.2,.8,.3,1); } .brand:hover .brand-sl { transform: translateX(2px) skewX(-8deg); } .brand-dot { color: var(--c-pub); } /* a cursor that blinks after the name, like the terminal it came from */ .brand::after { content: ""; display: inline-block; width: 0.5em; height: 1em; margin-left: 0.18em; vertical-align: -0.16em; background: var(--c-pub); opacity: 0.35; animation: blink 1.25s steps(1, end) infinite; } @keyframes blink { 0%, 55% { opacity: 0.32; } 56%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .brand::after { animation: none; } } .site-nav { display: flex; align-items: center; gap: 1.4rem; } .site-nav a { position: relative; font-size: 0.92rem; font-weight: 500; color: var(--muted); transition: color 0.18s ease; } .site-nav a:hover { color: var(--ink); text-decoration: none; } .site-nav a.is-active { color: var(--ink); } .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px; background: var(--c-pub); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease; } .site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); } /* ───────────────────────────────── intro */ .intro { padding: clamp(2.6rem, 7vw, 4.5rem) 0 clamp(2rem, 5vw, 3rem); } .intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) 324px; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } /* desktop: name sits above the bio in the text column, the photo card spans both of their rows in its own column */ .intro-name { grid-column: 1; grid-row: 1; } .intro-bio { grid-column: 1; grid-row: 2; } .profile-card{ grid-column: 2; grid-row: 1 / 3; } .intro h1 { font-size: clamp(2.3rem, 5vw, 3.1rem); margin-bottom: 0.4rem; letter-spacing: -0.025em; } .intro .role { color: var(--ink); font-weight: 500; margin-bottom: 1.2rem; } .intro .bio { max-width: 56ch; } .contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.3rem; font-size: 0.94rem; margin-top: 1.5rem; } .contact-row a { color: var(--ink-2); display: inline-flex; align-items: center; gap: 0.4rem; transition: color 0.18s ease, transform 0.18s ease; } .contact-row a:hover { color: var(--c-pub); transform: translateY(-1px); } .contact-row svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .contact-row .cv { font-weight: 600; color: #fff; background: var(--ink); padding: 0.45rem 0.95rem; border-radius: 6px; } .contact-row .cv:hover { background: var(--c-pub); color: #fff; text-decoration: none; } /* the card beside the intro: portrait plus facts, so the column is not empty */ .profile-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(22, 26, 33, 0.04), 0 10px 28px rgba(22, 26, 33, 0.06); } .profile-card .photo { margin: 0; padding: 1.4rem 1.4rem 0; display: flex; justify-content: center; } .profile-card .photo img { width: 128px; height: 128px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--line), 0 8px 20px rgba(22, 26, 33, 0.12); transition: transform 0.3s ease; } .profile-card .photo img:hover { transform: translateY(-2px) scale(1.02); } .facts { list-style: none; margin: 1.3rem 0 0; padding: 0; } .facts li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.62rem 1.4rem; font-size: 0.9rem; border-top: 1px solid var(--line); } .facts li:last-child { padding-bottom: 1rem; } .facts li { transition: background 0.2s ease; } .facts li:hover { background: color-mix(in srgb, var(--c-pub) 4%, #fff); } .facts .k { color: var(--faint); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; flex: none; width: 88px; line-height: 1.9; } .facts .v { color: var(--ink-2); } .facts .v b { color: var(--ink); font-weight: 600; } .facts .pill { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.08rem 0.5rem; border-radius: 4px; color: var(--c-prj); background: color-mix(in srgb, var(--c-prj) 11%, #fff); } /* ───────────────────────────────── tinted section bands */ .section { padding: clamp(2.4rem, 5vw, 3.6rem) 0; border-top: 1px solid var(--line); } #publications { --c: var(--c-pub); background: color-mix(in srgb, var(--c-pub) 4.5%, var(--paper)); } #projects { --c: var(--c-prj); background: color-mix(in srgb, var(--c-prj) 5%, var(--paper)); } #experience { --c: var(--c-exp); background: color-mix(in srgb, var(--c-exp) 5%, var(--paper)); } #about { --c: var(--c-edu); background: color-mix(in srgb, var(--c-edu) 4.5%, var(--paper)); } .section-title { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); margin-bottom: 1.4rem; display: flex; align-items: center; gap: 0.6rem; } .section-title svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .section-title::after { content: ""; height: 1px; flex: 1; background: var(--line); margin-left: 0.3rem; } /* ───────────────────────────────── publications */ .pubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .pub { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; transition: transform 0.22s ease, box-shadow 0.22s ease; } .pub:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(22, 26, 33, 0.08); border-color: var(--line-2); } .pub-split { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.5rem; align-items: start; } .pub-figure { margin: 0; } .pub-figure img { width: 100%; border: 1px solid var(--line); border-radius: 6px; display: block; background: #fff; } .pub-title { font-family: var(--serif); font-size: 1.14rem; font-weight: 600; color: var(--ink); line-height: 1.35; margin-bottom: 0.3rem; } .pub-title a { color: inherit; } .pub-title a:hover { color: var(--c); text-decoration: none; } .pub-authors { font-size: 0.92rem; color: var(--muted); margin-bottom: 0.35rem; } .pub-authors strong { color: var(--ink); } .pub-venue { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 0.7rem; } .pub-venue em { font-style: normal; font-weight: 600; color: var(--c); } .pub-blurb { font-size: 0.94rem; color: var(--ink-2); margin-bottom: 0.8rem; max-width: 60ch; } .pub-links { font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; } .pub-links a { color: var(--c); font-weight: 500; display: inline-flex; align-items: center; gap: 0.3rem; } .pub-links a::after { content: "→"; display: inline-block; transform: translateX(-2px); opacity: 0.55; transition: transform 0.2s ease, opacity 0.2s ease; } .pub-links a:hover::after { transform: translateX(2px); opacity: 1; } /* ───────────────────────────────── cards and rows */ .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; } .tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.3rem; display: flex; flex-direction: column; transition: transform 0.22s ease, box-shadow 0.22s ease; } .tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(22, 26, 33, 0.09); } .tile-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; } .tile-icon { width: 30px; height: 30px; flex: none; border-radius: 7px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); transition: transform 0.25s ease, background 0.25s ease; } .tile-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .tile:hover .tile-icon { transform: rotate(-6deg) scale(1.08); background: color-mix(in srgb, var(--c) 17%, #fff); } .tile .when { margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; color: var(--c); margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; } .tile h3 { font-size: 1.04rem; margin-bottom: 0.2rem; } .tile .org { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.6rem; } .tile p { font-size: 0.93rem; margin-bottom: 0.9rem; } .tile .stack { margin-top: auto; margin-bottom: 0; font-size: 0.8rem; color: var(--faint); } .rows { display: grid; gap: 0.75rem; } .row { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0.3rem 1.6rem; padding: 1.1rem 1.3rem; transition: transform 0.22s ease, box-shadow 0.22s ease; } .row:hover { transform: translateX(3px); box-shadow: 0 8px 22px rgba(22, 26, 33, 0.07); } .row-when { font-size: 0.85rem; color: var(--c); font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 0.2rem; } .row h3 { font-size: 1.02rem; margin-bottom: 0.12rem; } .row .org { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.4rem; } .row p { margin: 0; font-size: 0.94rem; max-width: 62ch; } /* ───────────────────────────────── skills strip */ .chips { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; } .chipset { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1.1rem; flex: 1 1 220px; } .chipset h3 { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); margin-bottom: 0.45rem; } .chipset p { margin: 0; font-size: 0.92rem; color: var(--ink-2); } /* ───────────────────────────────── article */ .article { padding: clamp(2.4rem, 6vw, 3.6rem) 0 1rem; } .breadcrumb { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.5rem; } .breadcrumb a { color: var(--muted); } .article h1 { font-size: clamp(1.9rem, 4.2vw, 2.5rem); line-height: 1.22; max-width: 22ch; margin-bottom: 0.9rem; } .article .byline { font-size: 1rem; color: var(--ink-2); margin-bottom: 0.3rem; } .article .affils { font-size: 0.92rem; color: var(--muted); margin-bottom: 1.2rem; } .article .venue-line { font-size: 0.95rem; color: var(--c-pub); font-weight: 600; margin-bottom: 1.8rem; } .prose > h2 { font-size: 1.38rem; margin: 2.4rem 0 0.8rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .prose > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 2rem; } .prose > p, .prose > ul { max-width: 68ch; } .prose ul { padding-left: 1.15rem; margin: 0 0 1.1rem; } .prose li { margin-bottom: 0.5rem; } .lead { font-size: 1.12rem; color: var(--ink); max-width: 62ch; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin: 1.8rem 0 2.2rem; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; } .stat b { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--c-pub); letter-spacing: -0.02em; line-height: 1.2; } .stat span { font-size: 0.85rem; line-height: 1.4; color: var(--muted); } .figure { margin: 1.8rem 0 2.2rem; } .figure img { width: 100%; border: 1px solid var(--line); border-radius: 8px; display: block; background: #fff; } .figure figcaption { margin-top: 0.65rem; font-size: 0.88rem; color: var(--muted); max-width: 70ch; } .cite { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.15rem; border-top: 0; border-radius: 0 0 8px 8px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.8rem; color: var(--ink-2); line-height: 1.65; margin: 0 0 1rem; white-space: pre-wrap; overflow-wrap: anywhere; } .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; } .btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; font-size: 0.92rem; font-weight: 500; color: var(--ink-2); background: var(--card); border: 1px solid var(--line-2); border-radius: 6px; transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease; } .btn:hover { border-color: var(--ink-2); color: var(--ink); text-decoration: none; transform: translateY(-1px); } .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .btn-primary { background: var(--c-pub); border-color: var(--c-pub); color: #fff; } .btn-primary:hover { background: #3a3195; border-color: #3a3195; color: #fff; } /* the two that matter: the paper itself, and the code behind it */ .btn svg.btn-ico { width: 16px; height: 16px; flex: none; } .btn svg.btn-ico-fill { fill: currentColor; stroke: none; } .btn-paper, .btn-code { font-weight: 600; color: #fff; padding: 0.56rem 1.05rem; box-shadow: 0 1px 2px rgba(22, 26, 33, 0.12), 0 8px 18px -10px rgba(22, 26, 33, 0.5); } .btn-paper:hover, .btn-code:hover { color: #fff; transform: translateY(-2px); } .btn-paper { background: var(--c-edu); border-color: var(--c-edu); } .btn-paper:hover { background: #8e1038; border-color: #8e1038; box-shadow: 0 2px 4px rgba(179, 26, 70, 0.2), 0 12px 24px -10px rgba(179, 26, 70, 0.55); } .btn-code { background: var(--ink); border-color: var(--ink); } .btn-code:hover { background: #000; border-color: #000; box-shadow: 0 2px 4px rgba(22, 26, 33, 0.18), 0 12px 24px -10px rgba(22, 26, 33, 0.6); } /* ───────────────────────────────── footer: a dark block to close the page */ .site-footer { background: var(--ink); color: #b9c0cb; padding: 2.4rem 0; } .footer-inner { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; align-items: center; font-size: 0.9rem; } .site-footer p { margin: 0; } .site-footer a { color: #e7eaef; } .site-footer a:hover { color: #fff; } .footer-links { display: flex; flex-wrap: wrap; gap: 1.3rem; } /* ───────────────────────────────── motion */ @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .intro-grid > * { animation: rise 0.5s ease-out both; } .intro-grid > *:last-child { animation-delay: 0.12s; } .js .reveal { opacity: 0; } .js .reveal.is-visible { animation: rise 0.45s ease-out both; } .js .reveal.is-visible .pub, .js .reveal.is-visible .tile, .js .reveal.is-visible .row { animation: rise 0.45s ease-out both; } .js .reveal.is-visible .pub:nth-child(2), .js .reveal.is-visible .tile:nth-child(2), .js .reveal.is-visible .row:nth-child(2) { animation-delay: 0.07s; } .js .reveal.is-visible .tile:nth-child(3), .js .reveal.is-visible .row:nth-child(3) { animation-delay: 0.14s; } /* ───────────────────────────────── responsive */ @media (max-width: 860px) { .intro-grid { grid-template-columns: 1fr; } /* single column: name first, then the photo card, then the bio and contact links, overriding the desktop grid placement above */ .intro-name, .intro-bio, .profile-card { grid-column: 1; grid-row: auto; } .intro-name { order: -2; } .profile-card { order: -1; } .intro-bio { order: 0; } .pub-split { grid-template-columns: 1fr; } .pub-figure { order: -1; } .row { grid-template-columns: 1fr; gap: 0.2rem; } .row-when { order: 2; padding-top: 0.5rem; } } @media (max-width: 520px) { body { font-size: 16px; } .wrap, .wrap-lg, .masthead-inner { width: calc(100% - 2rem); } .site-nav { gap: 1rem; } .site-nav a { font-size: 0.86rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; } .js .reveal, .intro-grid > * { opacity: 1 !important; } } @media print { .masthead, .topbar, .actions { display: none; } body { background: #fff; font-size: 11pt; color: #000; } .section { background: #fff !important; border-top: 1px solid #999; } .pub, .tile, .row, .profile-card { border: 1px solid #ccc; box-shadow: none; } .site-footer { background: #fff; color: #000; } } /* ───────────────────────────────── interactive charts (research page) */ .chart { position: relative; max-width: 780px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem 0.9rem; } .chart-plot { position: relative; } .chart-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; } .c-grid { stroke: var(--line); stroke-width: 1; } .c-tick { font-family: var(--sans); font-size: 13px; fill: var(--muted); } .c-axis { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--muted); } .c-line { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; } .c-dot { opacity: 0; transition: opacity 0.2s ease; } .chart:hover .c-dot { opacity: 0.85; } .c-hair { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; transition: opacity 0.15s ease; } .c-mark { stroke: var(--card); stroke-width: 2.5; transition: opacity 0.15s ease; } .c-series { transition: opacity 0.25s ease; } .c-series.is-muted { opacity: 0.12; } .c-series.is-drawing .c-line { animation: draw 1.05s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: var(--delay, 0s); } @keyframes draw { to { stroke-dashoffset: 0; } } .chart-tip { position: absolute; top: 4px; pointer-events: none; background: var(--ink); color: #fff; border-radius: 7px; padding: 0.5rem 0.7rem; font-size: 0.82rem; line-height: 1.5; display: grid; grid-template-columns: auto auto; gap: 0.1rem 0.8rem; box-shadow: 0 8px 22px rgba(22, 26, 33, 0.22); z-index: 2; } .chart-tip[hidden] { display: none; } /* display:grid above would otherwise beat [hidden] */ .chart-tip strong { grid-column: 1 / -1; font-family: var(--sans); font-size: 0.78rem; color: #aab2c0; font-weight: 600; } .chart-tip span { display: inline-flex; align-items: center; gap: 0.35rem; color: #dfe4ea; } .chart-tip i { width: 8px; height: 8px; border-radius: 2px; flex: none; } .chart-tip b { text-align: right; font-variant-numeric: tabular-nums; } .chart-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; } .chart-key { display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-size: 0.84rem; color: var(--ink-2); background: none; border: 1px solid transparent; border-radius: 999px; padding: 0.2rem 0.6rem; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .chart-key:hover { background: var(--paper); border-color: var(--line); } .chart-key .swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; transition: transform 0.18s ease; } .chart-key:hover .swatch { transform: scale(1.18); } .chart-key[aria-pressed="false"] { color: var(--faint); } .chart-key[aria-pressed="false"] .swatch { opacity: 0.3; } .chart-switch { display: inline-flex; gap: 2px; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 2px; margin-bottom: 0.7rem; } .chart-switch button { font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--muted); background: none; border: 0; border-radius: 5px; padding: 0.25rem 0.8rem; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .chart-switch button:hover { color: var(--ink); } .chart-switch button.is-on { background: var(--card); color: var(--c-pub); box-shadow: 0 1px 2px rgba(22,26,33,0.1); } .chart-note { margin: 0.65rem 0 0; font-size: 0.82rem; color: var(--faint); } @media (prefers-reduced-motion: reduce) { .c-series.is-drawing .c-line { animation: none; stroke-dashoffset: 0 !important; } .c-dot { opacity: 0.85; } } /* ───────────────────────────────── animated method walkthrough */ .steps { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 1.6rem 0 2.2rem; } .steps-nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 0.5rem; background: var(--paper); border-bottom: 1px solid var(--line); } .step-tab { display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; font-size: 0.85rem; font-weight: 500; color: var(--muted); background: none; border: 0; border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .step-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--c-pub) 7%, transparent); } .step-tab.is-on { color: var(--c-pub); background: var(--card); box-shadow: 0 1px 2px rgba(22,26,33,0.09); } .step-n { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; color: var(--faint); background: var(--line); transition: background 0.2s ease, color 0.2s ease; } .step-tab.is-on .step-n { background: var(--c-pub); color: #fff; } .steps-stage { position: relative; padding: 1.1rem 1.2rem 1.2rem; } .step-panel { display: none; } .step-panel.is-on { display: block; } .step-svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto 0.6rem; } .step-note { margin: 0; font-size: 0.9rem; color: var(--ink-2); max-width: 64ch; } /* shared pieces of the step diagrams */ .m-lab { font-family: var(--sans); font-size: 11px; fill: var(--muted); } .m-cap { font-family: var(--sans); font-size: 10.5px; fill: var(--faint); } .m-head { font-family: var(--sans); font-size: 12px; font-weight: 700; fill: var(--ink); } .m-ar { font-family: var(--arabic); font-size: 13.5px; font-weight: 500; fill: #fff; text-anchor: middle; } .m-good { font-family: var(--sans); font-size: 11px; font-weight: 600; fill: var(--c-prj); } .m-bad { font-family: var(--sans); font-size: 11px; font-weight: 600; fill: var(--c-edu); } .m-div { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; } .m-chip rect { fill: var(--c-pub); opacity: 0.88; } .m-align { fill: none; stroke: var(--c-edu); stroke-width: 2; } .m-layer { fill: var(--line-2); } .m-pick { fill: none; stroke: var(--c-edu); stroke-width: 2; } .m-token { fill: var(--c-edu); } .m-flow { fill: none; stroke: var(--c-edu); stroke-width: 2; stroke-dasharray: 4 4; } .m-curve { fill: none; stroke: var(--c-pub); stroke-width: 2.4; stroke-linejoin: round; } .m-bar-bg { fill: var(--line); } .m-bar-fill { fill: var(--c-edu); } /* each panel replays when it becomes the active one */ .step-panel.is-playing .m-chip { animation: pop 0.4s ease-out both; animation-delay: var(--d, 0s); } .step-panel.is-playing .m-align { animation: fade 0.5s ease-out both 0.95s; } .step-panel.is-playing .m-layer { animation: slide 0.4s ease-out both; animation-delay: var(--d, 0s); } .step-panel.is-playing .m-flow { stroke-dashoffset: 200; animation: flow 1.4s linear both 0.4s infinite; } .step-panel.is-playing .m-pick { animation: fade 0.5s ease-out both 0.9s; } .step-panel.is-playing .m-token { animation: pop 0.4s ease-out both; } .step-panel.is-playing .m-pt { animation: pop 0.45s ease-out both; animation-delay: var(--d, 0s); } .step-panel.is-playing .m-curve { stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 1.2s ease-out both 0.2s; } .step-panel.is-playing .m-bar-fill { animation: grow 0.9s cubic-bezier(0.4,0,0.2,1) both 0.5s; transform-origin: 16px 50%; } @keyframes pop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } @keyframes flow { to { stroke-dashoffset: 0; } } @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ───────────────────────────────── affiliation logos */ .logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; margin-top: 1.2rem; } .logos img { height: 34px; width: auto; filter: grayscale(1) contrast(0.9); opacity: 0.55; mix-blend-mode: multiply; transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } .logos a:hover img, .logos img:hover { filter: grayscale(0) contrast(1); opacity: 1; transform: translateY(-2px); } .logos-note { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--faint); } @media (prefers-reduced-motion: reduce) { .step-panel.is-playing * { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } } /* nothing in a step diagram may stay invisible if its animation never runs */ .step-panel.is-settled .m-chip, .step-panel.is-settled .m-pt, .step-panel.is-settled .m-layer, .step-panel.is-settled .m-token, .step-panel.is-settled .m-align, .step-panel.is-settled .m-pick { animation: none !important; opacity: 1 !important; transform: none !important; } .step-panel.is-settled .m-curve { animation: none !important; stroke-dashoffset: 0 !important; } .step-panel.is-settled .m-bar-fill { animation: none !important; transform: none !important; } /* ── institution marks, inside each card beneath the date */ .row-meta { display: flex; flex-direction: column; gap: 0.6rem; } .row-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; } .row-logos img { height: 26px; width: auto; max-width: 118px; object-fit: contain; filter: grayscale(1) contrast(0.9); opacity: 0.55; mix-blend-mode: multiply; transition: filter 0.3s ease, opacity 0.3s ease; } /* square marks need more height than wordmarks to carry the same weight */ .row-logos img.is-mark { height: 38px; max-width: 52px; opacity: 0.72; filter: grayscale(1) contrast(1.05); } .row:hover .row-logos img { filter: grayscale(0) contrast(1); opacity: 1; } @media (max-width: 860px) { .row-meta { flex-direction: row; align-items: center; gap: 1rem; } } /* ═══════════════════════════ research article: two columns */ .article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; } .article-grid .prose > p, .article-grid .prose > ul { max-width: 70ch; } /* line icons, one shared set */ .ico, .h2-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .prose > h2 { display: flex; align-items: center; gap: 0.55rem; } .h2-ico { width: 1.5rem; height: 1.5rem; padding: 0.26rem; color: var(--c-pub); background: color-mix(in srgb, var(--c-pub) 10%, transparent); border-radius: 6px; box-sizing: content-box; stroke-width: 1.8; transition: transform 0.3s cubic-bezier(.2,.8,.3,1), background 0.3s ease; } .prose > h2:hover .h2-ico { transform: rotate(-6deg) scale(1.06); background: color-mix(in srgb, var(--c-pub) 18%, transparent); } /* stat cards */ .stat { position: relative; overflow: hidden; } .stat > .ico { width: 1.15rem; height: 1.15rem; color: var(--c-pub); opacity: 0.4; margin-bottom: 0.45rem; display: block; transition: opacity 0.25s ease, transform 0.25s ease; } .stat:hover > .ico { opacity: 0.9; transform: scale(1.1); } .stat b { font-variant-numeric: tabular-nums; } /* findings, numbered */ .finding { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.15rem; margin: 0 0 1rem; max-width: 72ch; transition: transform 0.22s ease, box-shadow 0.22s ease; } .finding:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -14px rgba(20, 24, 31, 0.4); } .finding-n { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 0.78rem; font-weight: 700; color: var(--c-pub); background: color-mix(in srgb, var(--c-pub) 11%, transparent); } .finding h3 { font-size: 1.02rem; margin-bottom: 0.3rem; } .finding p { margin: 0; font-size: 0.95rem; color: var(--ink-2); } .fig-n { display: inline-block; margin-right: 0.5rem; font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--c-pub); } /* BibTeX: a labelled bar with a copy button that is always visible */ .cite-wrap { margin-bottom: 1rem; } .cite-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.6rem 0.5rem 1.15rem; background: color-mix(in srgb, var(--c-pub) 5%, var(--card)); border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; } .cite-label { font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .copy-btn { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; padding: 0.36rem 0.75rem; border-radius: 6px; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--c-pub); background: var(--card); border: 1px solid color-mix(in srgb, var(--c-pub) 28%, transparent); transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .copy-btn:hover { background: var(--c-pub); color: #fff; border-color: var(--c-pub); } .copy-btn .btn-ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; } .copy-btn.is-done, .copy-btn.is-done:hover { color: #fff; background: var(--c-prj); border-color: var(--c-prj); } /* ───────── the sticky rail */ .rail { position: sticky; top: 4.6rem; display: grid; gap: 1rem; font-size: 0.86rem; } .rail h2 { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.7rem; } .toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); } .toc li { margin: 0; } .toc a { display: block; padding: 0.3rem 0 0.3rem 0.8rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); line-height: 1.35; transition: color 0.2s ease, border-color 0.2s ease; } .toc a:hover { color: var(--ink); text-decoration: none; } .toc a.is-current { color: var(--c-pub); font-weight: 600; border-left-color: var(--c-pub); } .rail-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.05rem; } .rail-card dl { margin: 0; } .rail-card dt { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-top: 0.85rem; } .rail-card dt:first-child { margin-top: 0; } .rail-card dt .ico { width: 0.92rem; height: 0.92rem; color: var(--c-pub); opacity: 0.75; } .rail-card dd { margin: 0.2rem 0 0; color: var(--ink-2); font-size: 0.84rem; line-height: 1.45; } .rail-link { display: block; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--line); font-weight: 600; font-size: 0.84rem; color: var(--c-pub); } .rail-link::after { content: " \2192"; transition: margin 0.2s ease; } .rail-link:hover::after { margin-left: 0.2rem; } @media (max-width: 920px) { .article-grid { grid-template-columns: minmax(0, 1fr); } .rail { position: static; } .toc { display: none; } .rail-card { margin-bottom: 1.4rem; } } @media print { .rail, .copy-btn { display: none; } } /* ═══════════════════════════ research hero: title beside the teaser */ .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; margin-bottom: 2.6rem; } .hero-text > *:last-child { margin-bottom: 0; } .hero .breadcrumb { margin-bottom: 1.2rem; } .hero h1 { max-width: none; } .hero .actions { margin-bottom: 0; } .hero-art { margin: 0; position: relative; } .hero-art img { width: 100%; display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(22, 26, 33, 0.05), 0 18px 42px -22px rgba(22, 26, 33, 0.38); transition: transform 0.4s cubic-bezier(.2,.8,.3,1), box-shadow 0.4s ease; } .hero-art:hover img { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(22, 26, 33, 0.06), 0 28px 56px -24px rgba(22, 26, 33, 0.45); } /* a tinted plate behind the figure, so the corner reads as depth not emptiness */ .hero-art::before { content: ""; position: absolute; inset: 1.3rem -1.3rem -1.3rem 1.3rem; border-radius: 14px; z-index: -1; background: linear-gradient(135deg, color-mix(in srgb, var(--c-pub) 13%, transparent), color-mix(in srgb, var(--c-edu) 9%, transparent)); } .hero-art figcaption { margin-top: 0.85rem; font-size: 0.82rem; line-height: 1.5; color: var(--muted); } .hero-art figcaption strong { color: var(--ink-2); } /* stat tiles: depth instead of a coloured cap */ .stats { margin-top: 2rem; } .stat { box-shadow: 0 1px 2px rgba(22, 26, 33, 0.04), 0 10px 24px -18px rgba(22, 26, 33, 0.5); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .stat:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 2px 4px rgba(22, 26, 33, 0.05), 0 18px 34px -20px rgba(22, 26, 33, 0.55); } @media (max-width: 920px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; } .hero h1 { max-width: 22ch; } .hero-art::before { inset: 0.9rem -0.6rem -0.9rem 0.9rem; } } /* ═══════════════════════════ hero teaser, drawn from the real mGPT series */ .teaser-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem 0.6rem; box-shadow: 0 1px 2px rgba(22, 26, 33, 0.05), 0 18px 42px -22px rgba(22, 26, 33, 0.38); transition: transform 0.4s cubic-bezier(.2,.8,.3,1), box-shadow 0.4s ease; } .hero-art:hover .teaser-card { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(22, 26, 33, 0.06), 0 28px 56px -24px rgba(22, 26, 33, 0.45); } .teaser-head { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.3rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); } .teaser-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-edu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-edu) 18%, transparent); } .teaser { display: block; width: 100%; height: auto; overflow: visible; } .t-grid { stroke: var(--line); stroke-width: 1; } .t-band { fill: color-mix(in srgb, var(--c-edu) 5%, transparent); } .t-tick { font-family: var(--sans); font-size: 12px; fill: var(--faint); } .t-axis { font-family: var(--sans); font-size: 11px; font-weight: 600; fill: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; } .t-line { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .t-pud { stroke: var(--c-pub); } .t-madar { stroke: var(--c-edu); } .t-key { font-family: var(--sans); font-size: 12.5px; font-weight: 600; } .t-k-pud { fill: var(--c-pub); } .t-k-madar { fill: var(--c-edu); } /* the lines draw themselves in once, the labels fade after */ .js .t-line { stroke-dasharray: 1400; stroke-dashoffset: 0; animation: draw-in 1.6s ease-out; } .js .t-madar { animation-duration: 2.1s; } @keyframes draw-in { from { stroke-dashoffset: 1400; } } @media (prefers-reduced-motion: reduce) { .js .t-line { animation: none; } } .teaser-head .nocaps { text-transform: none; letter-spacing: 0.02em; } /* the brand is wider than the old wordmark, so the masthead wraps on small screens */ @media (max-width: 600px) { .masthead-inner { flex-wrap: wrap; row-gap: 0.35rem; padding-bottom: 0.5rem; } .site-nav { width: 100%; gap: 1.15rem; } } /* ═══════════════════════════ SVG type scale on narrow screens The charts keep a 720x400 viewBox and the teaser a 580x300, so once the column drops to phone width everything inside scales to roughly 0.43 and 13px labels render at 6px. Sizes below are in user units: they are scaled back down by the same factor, landing near 11-12px on screen. */ @media (max-width: 700px) { .c-tick, .c-axis { font-size: 20px; } .c-line { stroke-width: 3.6; } .c-grid, .c-hair { stroke-width: 1.6; } .t-tick { font-size: 19px; } .t-axis { font-size: 17px; } .t-key { font-size: 19px; } .t-line { stroke-width: 3.8; } .t-grid { stroke-width: 1.5; } } @media (max-width: 480px) { .c-tick, .c-axis { font-size: 27px; } .c-line { stroke-width: 4.6; } .c-grid, .c-hair { stroke-width: 2.1; } .t-tick { font-size: 24px; } .t-axis { font-size: 21px; } .t-key { font-size: 24px; } .t-line { stroke-width: 4.8; } .t-grid { stroke-width: 1.9; } .m-ar { font-size: 15px; } .m-lab { font-size: 13px; } .m-cap { font-size: 12px; } } /* ── skills: one chip per item rather than a comma list */ .chipset { padding: 1rem 1.1rem 1.1rem; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .chipset:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 10px 24px -16px rgba(22, 26, 33, 0.55); } .chipset h3 { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.7rem; } .chipset h3 .ico { width: 1.15rem; height: 1.15rem; flex: none; opacity: 0.85; stroke-width: 1.7; } .chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; } .chip-list li { margin: 0; padding: 0.26rem 0.6rem; border-radius: 999px; font-size: 0.82rem; font-weight: 500; line-height: 1.35; color: var(--ink-2); background: color-mix(in srgb, var(--c) 7%, var(--paper)); border: 1px solid color-mix(in srgb, var(--c) 16%, transparent); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .chip-list li:hover { background: color-mix(in srgb, var(--c) 15%, var(--paper)); color: var(--ink); transform: translateY(-1px); } /* ── depth panels: one per architecture, each on its own y range */ .facet + .facet { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line); } .facet-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 0.2rem; font-size: 0.88rem; font-weight: 600; color: var(--ink); } .facet-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .facet-layers, .facet-note { font-weight: 500; color: var(--muted); font-size: 0.82rem; } .facet-layers::before { content: "\00b7"; margin-right: 0.45rem; } .facet-note { margin-left: auto; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } /* a one-series facet needs no legend, and [hidden] loses to display:flex */ .chart-legend[hidden] { display: none; } /* the third action is a button, so it needs the anchor's look */ .btn-cite { font-family: var(--sans); cursor: pointer; } .btn-cite.is-done { color: #fff; background: var(--c-prj); border-color: var(--c-prj); } /* ── small screens: a tidy stack instead of a two-then-one orphan */ @media (max-width: 600px) { .actions { gap: 0.5rem; } .actions .btn { flex: 1 1 100%; justify-content: center; } /* the nav underline was landing on the masthead border */ .masthead-inner { row-gap: 0.5rem; padding-top: 0.1rem; padding-bottom: 0.8rem; } .site-nav { width: 100%; gap: 1.25rem; } } /* ── contact row: the secondary links read as a set, not loose text */ .contact-row { gap: 0.55rem; } .contact-row a:not(.cv) { padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 0.88rem; font-weight: 500; } .contact-row a:not(.cv):hover { border-color: color-mix(in srgb, var(--c-pub) 40%, transparent); background: color-mix(in srgb, var(--c-pub) 6%, var(--card)); text-decoration: none; } .contact-row .cv { padding: 0.46rem 1rem; border: 1px solid var(--ink); } /* the BibTeX action is a