Pages Medium
Science — Research Lab / Group Landing
A polished, institutional landing page for a fictional university quantum-research group, featuring a hero with mission statement and principal investigator, animated lab statistics, a research-areas card grid, a year-filterable recent-publications list with copyable DOIs, a timeline news feed, a validated openings form, a funding-partner logo strip, and a contact footer. Built with semantic HTML, accessible controls, and vanilla JavaScript only.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #ffffff;
--bg-alt: #f6f8fb;
--ink: #0f1b2d;
--ink-2: #33445c;
--muted: #697892;
--accent: #1a4f8a;
--accent-d: #123a66;
--accent-50: #e9f0f9;
--teal: #0f7d78;
--teal-50: #e4f3f1;
--line: rgba(15, 27, 45, 0.12);
--line-2: rgba(15, 27, 45, 0.2);
--ok: #2f9e6f;
--warn: #c9821f;
--danger: #cf4538;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06), 0 1px 3px rgba(15, 27, 45, 0.05);
--shadow-md: 0 6px 20px rgba(15, 27, 45, 0.08);
--serif: "Source Serif 4", Georgia, serif;
--sans: "Inter", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, .eyebrow, .btn, nav, label, .badge, dt { font-family: var(--sans); }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
a { color: var(--accent); }
.wrap { width: min(1120px, 100% - 3rem); margin-inline: auto; }
.skip-link {
position: absolute; left: -999px; top: 0;
background: var(--accent); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--r-sm) 0;
z-index: 100; font-family: var(--sans);
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* HEADER */
.site-header {
position: sticky; top: 0; z-index: 40;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: saturate(150%) blur(8px);
border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 66px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand-mark {
display: grid; place-items: center;
width: 38px; height: 38px; border-radius: var(--r-md);
background: linear-gradient(135deg, var(--accent), var(--teal));
color: #fff; font-family: var(--serif); font-size: 1.3rem; font-style: italic; flex: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--sans); font-size: 1.02rem; letter-spacing: -.01em; }
.brand-text small { color: var(--muted); font-family: var(--sans); font-size: .72rem; }
.site-nav { display: flex; align-items: center; }
.nav-toggle {
display: none; font-family: var(--sans); font-weight: 600;
background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-sm);
padding: .5rem .8rem; cursor: pointer; color: var(--ink);
}
.nav-list { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nav-list a {
text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: .92rem;
padding: .5rem .7rem; border-radius: var(--r-sm); transition: background .15s, color .15s;
}
.nav-list a:hover { background: var(--accent-50); color: var(--accent-d); }
.nav-cta {
background: var(--accent); color: #fff !important;
}
.nav-cta:hover { background: var(--accent-d) !important; }
/* BUTTONS */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
font-family: var(--sans); font-weight: 600; font-size: .94rem;
padding: .7rem 1.2rem; border-radius: var(--r-md); border: 1px solid transparent;
cursor: pointer; text-decoration: none; transition: transform .12s, background .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-d); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--accent-d); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--accent-50); }
.btn-block { width: 100%; }
/* HERO */
.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0; background:
radial-gradient(900px 380px at 12% -10%, var(--accent-50), transparent 60%),
radial-gradient(700px 340px at 100% 0%, var(--teal-50), transparent 55%); }
.hero-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 2.5rem; align-items: start; }
.eyebrow {
font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em;
font-size: .74rem; font-weight: 700; color: var(--teal); margin: 0 0 .6rem;
}
.eyebrow.on-dark { color: #9fd0eb; }
.hero-copy h1 {
font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.08; margin: 0 0 1rem;
letter-spacing: -.02em; font-weight: 700;
}
.lede { font-size: 1.12rem; color: var(--ink-2); margin: 0 0 1.6rem; max-width: 40ch; }
.lede .mono { color: var(--ink); font-size: .95em; }
.hero-pi { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem; }
.pi-avatar {
width: 46px; height: 46px; border-radius: 50%; flex: none;
display: grid; place-items: center; font-family: var(--sans); font-weight: 700; color: #fff;
background: linear-gradient(135deg, var(--accent-d), var(--teal));
}
.pi-meta { display: flex; flex-direction: column; line-height: 1.3; }
.pi-meta strong { font-family: var(--sans); }
.pi-meta span { font-family: var(--sans); font-size: .82rem; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero-panel {
background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 1.4rem; box-shadow: var(--shadow-md);
}
.panel-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 1rem; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 0 0 1.2rem; }
.stat { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-md); padding: .7rem .8rem; }
.stat dt { font-family: var(--sans); font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stat dd { margin: .2rem 0 0; font-size: 1.5rem; font-weight: 700; color: var(--accent-d); font-family: var(--mono); }
.stat dd.mono { font-size: 1.3rem; }
.eq-card { margin: 0; border-top: 1px solid var(--line); padding-top: 1rem; }
.eq-block {
display: flex; align-items: center; justify-content: center; position: relative;
background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 1rem .6rem; margin-bottom: .6rem;
}
.eq { font-family: var(--serif); font-size: 1.15rem; }
.eq i { font-style: italic; }
.eq sub, .eq sup { font-family: var(--mono); font-size: .68em; }
.eq-num { position: absolute; right: .7rem; color: var(--muted); font-family: var(--mono); font-size: .82rem; }
figcaption { font-size: .82rem; color: var(--muted); }
figcaption strong { color: var(--ink-2); }
/* SECTIONS */
.section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section-head { margin-bottom: 1.8rem; }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; letter-spacing: -.015em; }
.section-sub { color: var(--ink-2); margin: .5rem 0 0; }
.row-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
/* RESEARCH CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
.card.area-card {
background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 1.4rem; transition: transform .16s, box-shadow .16s, border-color .16s; cursor: pointer;
}
.card.area-card:hover, .card.area-card:focus-visible {
transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent);
}
.card-icon {
display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .9rem;
border-radius: var(--r-md); background: var(--accent-50); color: var(--accent-d); font-size: 1.3rem;
}
.card.area-card:nth-child(even) .card-icon { background: var(--teal-50); color: var(--teal); }
.area-card h3 { font-family: var(--sans); margin: 0 0 .4rem; font-size: 1.1rem; }
.area-card p { margin: 0 0 .9rem; color: var(--ink-2); font-size: .95rem; }
.chip-row { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.chip-row li {
font-family: var(--mono); font-size: .72rem; color: var(--ink-2);
background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .55rem;
}
/* PUBLICATIONS */
.pub-filter { display: flex; gap: .35rem; }
.filter-btn {
font-family: var(--sans); font-weight: 600; font-size: .85rem; cursor: pointer;
background: var(--bg); border: 1px solid var(--line-2); color: var(--ink-2);
padding: .45rem .8rem; border-radius: 999px; transition: all .14s;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent-d); }
.filter-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pub-list { list-style: none; margin: 0; padding: 0; counter-reset: pub; }
.pub {
display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
padding: 1.1rem 0; border-top: 1px solid var(--line); transition: opacity .2s;
}
.pub:last-child { border-bottom: 1px solid var(--line); }
.pub-year {
font-size: .8rem; color: #fff; background: var(--accent-d); border-radius: var(--r-sm);
padding: .25rem .5rem; align-self: start;
}
.pub[data-year="2025"] .pub-year { background: var(--teal); }
.pub-body h3 { font-family: var(--serif); font-size: 1.12rem; margin: 0 0 .3rem; line-height: 1.3; }
.pub-authors { margin: 0 0 .2rem; font-family: var(--sans); font-size: .88rem; color: var(--ink-2); }
.pub-venue { margin: 0; font-size: .85rem; color: var(--muted); }
.pub-venue em { color: var(--ink-2); }
.pub-link {
font-family: var(--sans); font-weight: 600; font-size: .82rem; text-decoration: none;
border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .4rem .75rem; color: var(--accent-d);
align-self: start; transition: all .14s; white-space: nowrap;
}
.pub-link:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.pub-empty { color: var(--muted); font-style: italic; padding: 1.5rem 0; }
/* NEWS */
.news-feed { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.news-item { position: relative; padding: 0 0 1.4rem 1.4rem; }
.news-item::before {
content: ""; position: absolute; left: -7px; top: .4rem; width: 12px; height: 12px;
border-radius: 50%; background: var(--bg); border: 2px solid var(--accent);
}
.news-item:hover::before { background: var(--accent); }
.news-date { display: block; font-size: .8rem; color: var(--teal); margin-bottom: .15rem; }
.news-item p { margin: 0; color: var(--ink-2); }
.news-item strong { color: var(--ink); }
/* JOIN */
.join { background: linear-gradient(160deg, var(--accent-d), var(--ink)); color: #e6edf6; }
.join-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: start; }
.join h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .6rem; }
.join-copy p { color: #c7d4e6; }
.opening-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.opening-list li {
display: flex; align-items: center; gap: .6rem; padding: .7rem 0;
border-top: 1px solid rgba(255,255,255,0.12); font-family: var(--sans); font-size: .95rem;
}
.badge {
font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
padding: .2rem .5rem; border-radius: 999px; flex: none;
}
.badge-ok { background: rgba(47,158,111,.18); color: #6fe0ad; border: 1px solid rgba(47,158,111,.4); }
.badge-warn { background: rgba(201,130,31,.18); color: #f0c07a; border: 1px solid rgba(201,130,31,.4); }
.join-form {
background: var(--bg); color: var(--ink); border-radius: var(--r-lg); padding: 1.6rem;
box-shadow: var(--shadow-md);
}
.join-form h3 { font-family: var(--sans); margin: 0 0 1rem; font-size: 1.15rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: .3rem; }
.field input, .field select {
width: 100%; font-family: var(--sans); font-size: .95rem; color: var(--ink);
padding: .65rem .75rem; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg);
transition: border-color .14s, box-shadow .14s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50); }
.field input.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(207,69,56,.12); }
.form-note { font-family: var(--sans); font-size: .85rem; margin: .8rem 0 0; min-height: 1.2em; }
.form-note.ok { color: var(--ok); }
.form-note.err { color: var(--danger); }
/* FUNDERS */
.funders { padding: 2.2rem 0; border-top: 1px solid var(--line); }
.funders-label {
text-align: center; font-family: var(--sans); text-transform: uppercase; letter-spacing: .1em;
font-size: .72rem; color: var(--muted); margin: 0 0 1.2rem;
}
.logo-strip {
list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 2.4rem;
justify-content: center; align-items: center;
}
.logo-strip li {
font-family: var(--sans); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
color: var(--muted); opacity: .75; transition: opacity .15s, color .15s; cursor: default;
}
.logo-strip li:hover { opacity: 1; color: var(--accent-d); }
/* FOOTER */
.site-footer { background: var(--ink); color: #b9c4d6; padding: 2.5rem 0 1.4rem; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; }
.footer-lab { margin: .6rem 0 0; }
.footer-lab strong { color: #fff; font-family: var(--sans); }
.footer-addr { font-style: normal; line-height: 1.7; }
.footer-contact a { color: #9fc6e8; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.site-footer .brand-mark { width: 34px; height: 34px; }
.footer-base {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-base small { color: #8595ab; }
.to-top {
font-family: var(--sans); font-weight: 600; font-size: .82rem; cursor: pointer;
background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #cdd8e8;
padding: .4rem .8rem; border-radius: var(--r-sm); transition: background .14s;
}
.to-top:hover { background: rgba(255,255,255,0.08); }
/* TOAST */
.toast {
position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%) translateY(160%);
background: var(--ink); color: #fff; font-family: var(--sans); font-size: .9rem; font-weight: 500;
padding: .8rem 1.2rem; border-radius: var(--r-md); box-shadow: var(--shadow-md);
z-index: 90; opacity: 0; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s; pointer-events: none;
max-width: min(90vw, 420px);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
/* RESPONSIVE */
@media (max-width: 880px) {
.hero-grid, .join-inner { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.wrap { width: min(100% - 2rem, 1120px); }
.nav-toggle { display: inline-block; }
.nav-list {
position: absolute; top: 66px; right: 1rem; left: 1rem;
flex-direction: column; align-items: stretch; gap: .2rem;
background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
box-shadow: var(--shadow-md); padding: .5rem; display: none;
}
.nav-list.open { display: flex; }
.nav-list a { padding: .7rem .8rem; }
.stat-grid { grid-template-columns: 1fr 1fr; }
.pub { grid-template-columns: auto 1fr; }
.pub-link { grid-column: 2; justify-self: start; }
.footer-grid { grid-template-columns: 1fr; }
.row-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto; transition: none !important; }
}(function () {
"use strict";
/* ---- Toast helper ---- */
var toastEl = document.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2800);
}
/* ---- Mobile nav toggle ---- */
var navToggle = document.querySelector(".nav-toggle");
var navList = document.getElementById("nav-list");
if (navToggle && navList) {
navToggle.addEventListener("click", function () {
var open = navList.classList.toggle("open");
navToggle.setAttribute("aria-expanded", String(open));
});
navList.addEventListener("click", function (e) {
if (e.target.tagName === "A") {
navList.classList.remove("open");
navToggle.setAttribute("aria-expanded", "false");
}
});
}
/* ---- Animated stat counters (run once on view) ---- */
function animateCounter(el) {
var target = parseInt(el.getAttribute("data-count"), 10) || 0;
var dur = 1100;
var start = null;
function step(ts) {
if (start === null) start = ts;
var p = Math.min((ts - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
el.textContent = Math.round(target * eased).toString();
if (p < 1) requestAnimationFrame(step);
else el.textContent = target.toString();
}
requestAnimationFrame(step);
}
var counters = Array.prototype.slice.call(document.querySelectorAll(".counter"));
if ("IntersectionObserver" in window && counters.length) {
var io = new IntersectionObserver(function (entries, obs) {
entries.forEach(function (en) {
if (en.isIntersecting) {
animateCounter(en.target);
obs.unobserve(en.target);
}
});
}, { threshold: 0.4 });
counters.forEach(function (c) { io.observe(c); });
} else {
counters.forEach(function (c) { c.textContent = c.getAttribute("data-count"); });
}
/* ---- Research card -> filter publications hint ---- */
var areaNames = {
superconducting: "Superconducting Qubits",
spin: "Solid-State Spins",
theory: "Open-System Theory",
qec: "Error Correction"
};
document.querySelectorAll(".area-card").forEach(function (card) {
function activate() {
var tag = card.getAttribute("data-tag");
toast("Research area: " + (areaNames[tag] || tag));
}
card.addEventListener("click", activate);
card.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); activate(); }
});
});
/* ---- Publication year filter ---- */
var filterBtns = Array.prototype.slice.call(document.querySelectorAll(".filter-btn"));
var pubs = Array.prototype.slice.call(document.querySelectorAll(".pub"));
var pubEmpty = document.getElementById("pub-empty");
filterBtns.forEach(function (btn) {
btn.addEventListener("click", function () {
var year = btn.getAttribute("data-year");
filterBtns.forEach(function (b) { b.classList.toggle("is-active", b === btn); });
var visible = 0;
pubs.forEach(function (p) {
var show = year === "all" || p.getAttribute("data-year") === year;
p.hidden = !show;
if (show) visible++;
});
if (pubEmpty) pubEmpty.hidden = visible !== 0;
});
});
/* ---- Copy DOI on PDF link click (demo, no real download) ---- */
document.querySelectorAll(".pub-link").forEach(function (link) {
link.addEventListener("click", function (e) {
e.preventDefault();
var doi = link.getAttribute("data-doi") || "";
if (navigator.clipboard && doi) {
navigator.clipboard.writeText(doi).then(
function () { toast("DOI copied: " + doi); },
function () { toast("DOI: " + doi); }
);
} else {
toast(doi ? "DOI: " + doi : "PDF unavailable in demo");
}
});
});
/* ---- Join form validation ---- */
var form = document.getElementById("join-form");
var note = document.getElementById("form-note");
if (form) {
var nameEl = document.getElementById("jf-name");
var emailEl = document.getElementById("jf-email");
var emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
function setNote(msg, kind) {
if (!note) return;
note.textContent = msg;
note.className = "form-note" + (kind ? " " + kind : "");
}
[nameEl, emailEl].forEach(function (el) {
el.addEventListener("input", function () { el.classList.remove("invalid"); });
});
form.addEventListener("submit", function (e) {
e.preventDefault();
var name = nameEl.value.trim();
var email = emailEl.value.trim();
var bad = false;
if (!name) { nameEl.classList.add("invalid"); bad = true; }
if (!emailRe.test(email)) { emailEl.classList.add("invalid"); bad = true; }
if (bad) {
setNote("Please enter your name and a valid email.", "err");
return;
}
var role = document.getElementById("jf-role").value;
setNote("Thanks, " + name.split(" ")[0] + " — we'll be in touch about the " + role + " track.", "ok");
toast("Interest submitted (demo)");
form.reset();
});
}
/* ---- Back to top ---- */
var toTop = document.getElementById("to-top");
if (toTop) {
toTop.addEventListener("click", function () {
window.scrollTo({ top: 0, behavior: "smooth" });
});
}
/* ---- Funder logos: subtle interactive acknowledgement ---- */
document.querySelectorAll(".logo-strip li").forEach(function (li) {
li.addEventListener("click", function () { toast("Funding partner: " + li.textContent.trim()); });
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Helix Lab — Computational Structural Biology · Marisburg Institute of Technology</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="topbar" id="top">
<div class="wrap topbar__inner">
<a class="brand" href="#top" aria-label="Helix Lab home">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 32 32" width="28" height="28" role="img" aria-label="Helix mark">
<path d="M8 4c6 4 10 4 16 0M8 12c6 4 10 4 16 0M8 20c6 4 10 4 16 0M8 28c6-4 10-4 16 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M8 4c0 8 0 16 0 24M24 4c0 8 0 16 0 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.45"/>
</svg>
</span>
<span class="brand__text">
<strong>Helix Lab</strong>
<small>Computational Structural Biology</small>
</span>
</a>
<nav class="nav" aria-label="Primary">
<button class="nav__toggle" id="navToggle" aria-expanded="false" aria-controls="navMenu">
<span class="nav__bars" aria-hidden="true"></span>
<span class="sr-only">Menu</span>
</button>
<ul class="nav__menu" id="navMenu">
<li><a href="#research">Research</a></li>
<li><a href="#publications">Publications</a></li>
<li><a href="#news">News</a></li>
<li><a href="#join">Join us</a></li>
<li><a class="nav__cta" href="#join">Open positions <span class="pill" id="openCount">3</span></a></li>
</ul>
</nav>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero">
<div class="wrap hero__inner">
<div class="hero__copy">
<span class="eyebrow"><span class="dot" aria-hidden="true"></span> Marisburg Institute of Technology · Dept. of Biophysics</span>
<h1>We model how proteins fold, misfold, and find their function.</h1>
<p class="lede">
The Helix Lab develops physics-informed machine-learning methods to predict
biomolecular structure and dynamics — bridging atomistic simulation and
sparse experimental data to design proteins that don't yet exist in nature.
</p>
<div class="pi">
<div class="pi__avatar" aria-hidden="true">AR</div>
<div class="pi__meta">
<strong>Prof. Aïda Rendón</strong>
<span>Principal Investigator · Associate Professor of Biophysics</span>
</div>
</div>
<div class="hero__actions">
<a class="btn btn--primary" href="#research">Explore our research</a>
<a class="btn btn--ghost" href="#publications">Read publications</a>
</div>
<dl class="stats" aria-label="Lab at a glance">
<div><dt>Members</dt><dd><span class="num" data-count="14">0</span></dd></div>
<div><dt>Publications</dt><dd><span class="num" data-count="87">0</span></dd></div>
<div><dt>Citations</dt><dd><span class="num" data-count="6240">0</span></dd></div>
<div><dt>Est.</dt><dd><span class="num-static">2017</span></dd></div>
</dl>
</div>
<figure class="hero__fig">
<div class="fold-card" id="foldCard">
<div class="fold-card__head">
<span class="mono">PDB synth · 6-helix bundle</span>
<span class="badge badge--ok">RMSD 1.84 Å</span>
</div>
<svg class="fold-svg" viewBox="0 0 320 220" role="img" aria-label="Schematic ribbon diagram of a predicted protein fold">
<defs>
<linearGradient id="rib" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#1a4f8a"/>
<stop offset="1" stop-color="#0f7d78"/>
</linearGradient>
</defs>
<g class="ribbon" fill="none" stroke="url(#rib)" stroke-width="9" stroke-linecap="round">
<path d="M40 180 Q60 40 90 60 T140 60"/>
<path d="M150 70 Q190 200 220 120 T280 110"/>
<path d="M40 40 Q120 120 200 40"/>
</g>
<g class="helices" fill="none" stroke="#c9821f" stroke-width="6" stroke-linecap="round" opacity="0.85">
<path d="M70 150 q12 -10 24 0 q12 10 24 0 q12 -10 24 0"/>
<path d="M180 160 q12 -10 24 0 q12 10 24 0"/>
</g>
<g class="nodes" fill="#0f1b2d">
<circle cx="40" cy="180" r="4"/><circle cx="140" cy="60" r="4"/>
<circle cx="280" cy="110" r="4"/><circle cx="40" cy="40" r="4"/>
</g>
</svg>
<figcaption>
<strong>Figure 1.</strong> Predicted backbone trace for a <em>de novo</em> six-helix
bundle (synthetic target <span class="mono">HLX-0421</span>), colored N→C terminus.
Confidence shown as predicted aligned error below.
</figcaption>
<div class="conf" id="confStrip" aria-hidden="true"></div>
</div>
</figure>
</div>
</section>
<!-- RESEARCH AREAS -->
<section class="section" id="research">
<div class="wrap">
<header class="section__head">
<span class="kicker">What we work on</span>
<h2>Research areas</h2>
<p>Four interlocking threads, from raw physics to designed function. Filter by theme.</p>
</header>
<div class="filters" role="tablist" aria-label="Filter research areas">
<button class="chip is-active" role="tab" aria-selected="true" data-filter="all">All</button>
<button class="chip" role="tab" aria-selected="false" data-filter="ml">Machine learning</button>
<button class="chip" role="tab" aria-selected="false" data-filter="md">Simulation</button>
<button class="chip" role="tab" aria-selected="false" data-filter="design">Design</button>
</div>
<div class="grid grid--areas" id="areaGrid">
<article class="card area" data-tags="ml design" tabindex="0">
<div class="area__icon" aria-hidden="true">⌬</div>
<h3>Structure prediction</h3>
<p>Equivariant networks that infer 3D coordinates from sequence and co-evolution
signals, calibrated against cryo-EM ground truth.</p>
<ul class="tags"><li>ml</li><li>design</li></ul>
</article>
<article class="card area" data-tags="md" tabindex="0">
<div class="area__icon" aria-hidden="true">⏱</div>
<h3>Folding dynamics</h3>
<p>Long-timescale molecular dynamics and Markov state models to map the
kinetic pathways between metastable conformations.</p>
<ul class="tags"><li>md</li></ul>
</article>
<article class="card area" data-tags="ml md" tabindex="0">
<div class="area__icon" aria-hidden="true">∮</div>
<h3>Learned force fields</h3>
<p>Neural potentials trained on quantum reference data that retain energy
conservation while running orders of magnitude faster.</p>
<ul class="tags"><li>ml</li><li>md</li></ul>
</article>
<article class="card area" data-tags="design" tabindex="0">
<div class="area__icon" aria-hidden="true">✶</div>
<h3>De novo design</h3>
<p>Generative backbones and sequence optimization for binders, biosensors,
and self-assembling nanomaterials.</p>
<ul class="tags"><li>design</li></ul>
</article>
</div>
<!-- equation feature -->
<div class="eqcard">
<p>The core objective minimizes a physics-regularized structural loss:</p>
<div class="eq" role="math" aria-label="Loss equals expectation of FAPE plus lambda times the bond energy term">
<span class="eq__body">
𝓛(θ) = 𝔼<sub>x∼𝒟</sub>[ FAPE(<i>f</i><sub>θ</sub>(x), x) ] + λ · <i>E</i><sub>bond</sub>(<i>f</i><sub>θ</sub>(x))
</span>
<span class="eq__num mono">(1)</span>
</div>
<p class="muted small">
where <i>f</i><sub>θ</sub> is the predictor, FAPE the frame-aligned point error, and
λ = 0.15 weights the geometric penalty.
</p>
</div>
</div>
</section>
<!-- PUBLICATIONS -->
<section class="section section--alt" id="publications">
<div class="wrap">
<header class="section__head">
<span class="kicker">Selected output</span>
<h2>Recent publications</h2>
<p>Peer-reviewed work from the past two cycles. <a href="#" data-toast="Full list opens the lab Scholar profile.">See all 87 →</a></p>
</header>
<ol class="pubs" id="pubList">
<li class="pub">
<span class="pub__year mono">2026</span>
<div class="pub__body">
<h3>Energy-conserving neural potentials for microsecond protein dynamics</h3>
<p class="pub__authors">Rendón A., Okonkwo T., <strong>Vasquez D.</strong>, Lindqvist H.</p>
<p class="pub__venue">
<span class="venue">Nature Computational Science</span> · vol. 9, 412–427
<span class="badge badge--accent">Editor's choice</span>
</p>
<p class="pub__doi mono">doi:10.1038/s43588-026-00891-4</p>
</div>
<button class="pub__cite" data-cite="Rendón A. et al. (2026) Nat. Comput. Sci. 9:412–427.">Cite</button>
</li>
<li class="pub">
<span class="pub__year mono">2025</span>
<div class="pub__body">
<h3>HelixFold-D: diffusion priors for de novo backbone generation</h3>
<p class="pub__authors">Vasquez D., Rendón A., Mbeki S.</p>
<p class="pub__venue">
<span class="venue">Proc. ICML</span> · 2025, 14 pp.
<span class="badge badge--ok">Open access</span>
</p>
<p class="pub__doi mono">doi:10.48550/arXiv.2503.10772</p>
</div>
<button class="pub__cite" data-cite="Vasquez D. et al. (2025) Proc. ICML 2025.">Cite</button>
</li>
<li class="pub">
<span class="pub__year mono">2025</span>
<div class="pub__body">
<h3>Calibrated uncertainty in cryo-EM-guided structure refinement</h3>
<p class="pub__authors">Okonkwo T., Lindqvist H., Rendón A.</p>
<p class="pub__venue">
<span class="venue">Journal of Molecular Biology</span> · vol. 437, 168 211
</p>
<p class="pub__doi mono">doi:10.1016/j.jmb.2025.168211</p>
</div>
<button class="pub__cite" data-cite="Okonkwo T. et al. (2025) J. Mol. Biol. 437:168211.">Cite</button>
</li>
<li class="pub">
<span class="pub__year mono">2024</span>
<div class="pub__body">
<h3>Markov state models reveal hidden intermediates in amyloid nucleation</h3>
<p class="pub__authors">Mbeki S., Rendón A.</p>
<p class="pub__venue">
<span class="venue">PNAS</span> · vol. 121, e2410882121
</p>
<p class="pub__doi mono">doi:10.1073/pnas.2410882121</p>
</div>
<button class="pub__cite" data-cite="Mbeki S. & Rendón A. (2024) PNAS 121:e2410882121.">Cite</button>
</li>
</ol>
</div>
</section>
<!-- NEWS -->
<section class="section" id="news">
<div class="wrap">
<header class="section__head">
<span class="kicker">Lab feed</span>
<h2>News</h2>
<p>Grants, talks, and milestones.</p>
</header>
<ul class="news">
<li class="news__item">
<time datetime="2026-05-30" class="mono">2026-05-30</time>
<div>
<span class="tag tag--grant">Grant</span>
<p>Helix Lab awarded a <strong>$2.4M</strong> NSF CAREER renewal to extend learned
force fields to membrane proteins.</p>
</div>
</li>
<li class="news__item">
<time datetime="2026-04-12" class="mono">2026-04-12</time>
<div>
<span class="tag tag--talk">Talk</span>
<p>Prof. Rendón gives the keynote at the Marisburg Symposium on Generative Biology.</p>
</div>
</li>
<li class="news__item">
<time datetime="2026-03-03" class="mono">2026-03-03</time>
<div>
<span class="tag tag--people">People</span>
<p>Welcome to <strong>Hana Lindqvist</strong>, joining as a postdoctoral researcher
from ETH Zürich.</p>
</div>
</li>
<li class="news__item">
<time datetime="2026-01-19" class="mono">2026-01-19</time>
<div>
<span class="tag tag--award">Award</span>
<p>Daniela Vasquez receives the institute's Best Dissertation award for HelixFold-D.</p>
</div>
</li>
</ul>
</div>
</section>
<!-- JOIN -->
<section class="section section--cta" id="join">
<div class="wrap join">
<div class="join__copy">
<span class="kicker">Openings</span>
<h2>Join us</h2>
<p>We recruit curious people who like sitting between physics, code, and biology.
Reach out with a short note and your CV — rolling admissions.</p>
<form class="join__form" id="joinForm" novalidate>
<label for="email">Email for updates</label>
<div class="field">
<input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email" required />
<button class="btn btn--primary" type="submit">Notify me</button>
</div>
<p class="field__hint" id="formHint" role="status">No spam — about one update per quarter.</p>
</form>
</div>
<ul class="openings" id="openings">
<li class="opening">
<div>
<strong>PhD Student — Generative protein design</strong>
<span class="opening__meta mono">Fall 2026 · fully funded</span>
</div>
<a class="btn btn--ghost btn--sm" href="#" data-toast="Application portal would open here.">Apply</a>
</li>
<li class="opening">
<div>
<strong>Postdoc — Learned force fields</strong>
<span class="opening__meta mono">2-year · start flexible</span>
</div>
<a class="btn btn--ghost btn--sm" href="#" data-toast="Application portal would open here.">Apply</a>
</li>
<li class="opening">
<div>
<strong>Research Software Engineer</strong>
<span class="opening__meta mono">Full-time · hybrid</span>
</div>
<a class="btn btn--ghost btn--sm" href="#" data-toast="Application portal would open here.">Apply</a>
</li>
</ul>
</div>
</section>
<!-- FUNDERS -->
<section class="funders">
<div class="wrap">
<p class="funders__label mono">Supported by</p>
<ul class="funders__row">
<li>NSF</li>
<li>NIH</li>
<li>Helmsworth Foundation</li>
<li>Marisburg Institute</li>
<li>Quantis Cloud</li>
<li>EU Horizon</li>
</ul>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap footer__inner">
<div class="footer__col">
<span class="brand brand--footer">
<span class="brand__mark" aria-hidden="true">⌬</span>
<span class="brand__text"><strong>Helix Lab</strong><small>Computational Structural Biology</small></span>
</span>
<p class="muted small">Modeling structure, dynamics, and design of biomolecules.</p>
</div>
<div class="footer__col">
<h4>Contact</h4>
<address>
Bldg. 12, Rm 340, Marisburg Institute of Technology<br/>
88 Cordell Avenue, Marisburg, CA 94022<br/>
<a href="mailto:[email protected]">[email protected]</a><br/>
<span class="mono">+1 (650) 555-0142</span>
</address>
</div>
<div class="footer__col">
<h4>Elsewhere</h4>
<ul class="footer__links">
<li><a href="#" data-toast="External link placeholder.">Google Scholar</a></li>
<li><a href="#" data-toast="External link placeholder.">GitHub</a></li>
<li><a href="#" data-toast="External link placeholder.">Mastodon</a></li>
<li><a href="#" data-toast="External link placeholder.">Newsletter</a></li>
</ul>
</div>
</div>
<div class="wrap footer__base">
<small>© 2026 Helix Lab, Marisburg Institute of Technology. Illustrative demo — fictional content.</small>
<button class="totop" id="toTop" aria-label="Back to top">↑ Top</button>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Research Lab / Group Landing
A credible, modern landing page for an academic research group. The hero pairs the lab’s
name and one-line mission with its principal investigator and a glass “lab at a glance” panel
whose counters (members, publications, grants) animate up the first time they scroll into view.
A LaTeX-style display equation with a right-aligned number (1) sets the scientific tone using
only HTML and CSS — no math libraries.
Below the hero, a responsive Research Areas card grid lifts on hover and is keyboard-focusable; activating a card raises a toast naming the program. The Recent Publications list shows realistic authors, venues, and DOIs, and can be filtered by year through pill buttons; clicking a “PDF” link copies the DOI to the clipboard instead of navigating away. A vertical-timeline News feed, a validated Join us form with inline error states, a text-logo funding strip, and a full contact footer round out the page.
Everything is self-contained vanilla JavaScript: a reusable toast() helper, an
IntersectionObserver-driven counter, year filtering, clipboard handling, and accessible form
validation. The layout collapses cleanly to a single column with a toggleable mobile menu down to
roughly 360px, and respects prefers-reduced-motion.
Illustrative UI only — fictional authors, data, and figures; not real scientific results.