Pages Medium
Science — Scientific Conference Landing
A dark, energetic homepage for the fictional NeuroCompute 2027 neural-computation conference. Features a neon hero with live countdown timer, key-info chips, a stat strip, monogram keynote-speaker cards, a keyboard-accessible tabbed Day 1/2/3 program preview, three registration pricing tiers with a highlighted Academic plan, an important-dates timeline with completed and active milestones, tiered sponsor logos, and a gradient call-to-action band. Built with semantic HTML, vanilla JS, scroll-spy, reveal-on-scroll, and a toast helper.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #0f1419;
--bg-2: #141b22;
--bg-3: #1a232c;
--ink: #eaf2f5;
--ink-2: #b6c4cc;
--muted: #7e8f9a;
--accent: #22d3ee;
--accent-d: #0e9fb8;
--accent-2: #7c3aed;
--accent-2-d: #5b22b8;
--accent-50: rgba(34, 211, 238, 0.12);
--accent2-50: rgba(124, 58, 237, 0.16);
--line: rgba(234, 242, 245, 0.1);
--line-2: rgba(234, 242, 245, 0.2);
--ok: #34d399;
--warn: #f5c451;
--danger: #f0635a;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
--shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.35);
--serif: "Source Serif 4", Georgia, serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--sans);
background: var(--bg);
color: var(--ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.wrap { width: min(1120px, 92vw); margin-inline: auto; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
a { color: inherit; text-decoration: none; }
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 200;
background: var(--accent); color: #06222a; padding: 10px 16px;
border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* ---------- BUTTONS ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px; font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
padding: 12px 22px; border-radius: var(--r-md); border: 1px solid transparent;
cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.btn:active { transform: translateY(1px); }
.btn-accent {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #06141a; box-shadow: 0 8px 26px rgba(34, 211, 238, 0.32);
}
.btn-accent:hover { box-shadow: 0 12px 34px rgba(34, 211, 238, 0.45); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 9px 16px; font-size: 0.85rem; }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }
/* ---------- HEADER ---------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(15, 20, 25, 0.78);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.12rem; }
.brand-mark {
display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #06141a; font-weight: 800; font-size: 0.95rem; position: relative;
}
.brand-mark small { font-size: 0.55rem; position: absolute; bottom: 4px; right: 5px; }
.brand-yr { color: var(--accent); }
.site-nav { display: flex; gap: 22px; margin-left: auto; font-size: 0.92rem; font-weight: 500; color: var(--ink-2); }
.site-nav a { position: relative; padding: 4px 0; }
.site-nav a:hover { color: var(--accent); }
.site-nav a::after {
content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
background: var(--accent); transition: width 0.2s ease;
}
.site-nav a:hover::after { width: 100%; }
.nav-cta { flex-shrink: 0; }
/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; padding: 84px 0 0; border-bottom: 1px solid var(--line); }
.hero-glow {
position: absolute; top: -160px; left: 50%; transform: translateX(-50%);
width: 720px; height: 720px; pointer-events: none;
background: radial-gradient(circle, rgba(34, 211, 238, 0.22), transparent 62%),
radial-gradient(circle at 70% 40%, rgba(124, 58, 237, 0.2), transparent 60%);
filter: blur(8px);
}
.hero-grid {
position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
background-image: linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: radial-gradient(circle at 50% 30%, black, transparent 72%);
}
.hero-inner { position: relative; text-align: center; max-width: 780px; margin-inline: auto; }
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--accent); border: 1px solid var(--line-2); padding: 7px 15px; border-radius: 999px;
background: var(--accent-50);
}
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-50); animation: pulse 2.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px transparent; } }
.hero-title { font-size: clamp(2.6rem, 8vw, 5.4rem); font-weight: 700; letter-spacing: -0.04em; }
.grad { background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-tagline { font-family: var(--serif); font-size: clamp(1.05rem, 2.2vw, 1.32rem); color: var(--ink-2); margin: 22px auto 0; max-width: 620px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 28px 0 30px; }
.chip {
display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem;
background: var(--bg-2); border: 1px solid var(--line); padding: 9px 15px; border-radius: 999px;
}
.chip-k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); font-weight: 700; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.countdown {
display: inline-flex; align-items: flex-start; gap: 8px; margin: 40px auto 64px;
padding: 18px 26px; border-radius: var(--r-lg);
background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
}
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.cd-num { font-family: var(--mono); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.cd-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-top: 2px; }
.cd-sep { font-family: var(--mono); font-size: clamp(1.8rem, 5vw, 2.6rem); color: var(--line-2); line-height: 1; }
.stat-strip {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg);
overflow: hidden; transform: translateY(34px);
}
.stat-strip li { list-style: none; background: var(--bg-2); padding: 22px 18px; text-align: center; }
.stat-strip strong { display: block; font-size: 1.85rem; font-weight: 700; font-family: var(--mono); color: var(--ink); }
.stat-strip span { font-size: 0.82rem; color: var(--muted); }
/* ---------- SECTIONS ---------- */
.section { padding: 92px 0; }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.sec-head { max-width: 640px; margin-bottom: 44px; }
.sec-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.sec-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; }
.sec-lead { font-family: var(--serif); color: var(--ink-2); font-size: 1.06rem; margin-top: 14px; }
/* ---------- SPEAKERS ---------- */
.speaker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.speaker-card {
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 26px 22px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
position: relative; overflow: hidden;
}
.speaker-card::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.speaker-card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: var(--shadow); }
.speaker-card:hover::before { transform: scaleX(1); }
.mono-avatar {
width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center;
font-family: var(--mono); font-weight: 500; font-size: 1.3rem; color: var(--accent);
background: var(--accent-50); border: 1px solid var(--line-2); margin-bottom: 16px;
}
.speaker-card h3 { font-size: 1.18rem; font-weight: 700; }
.speaker-card .role { font-size: 0.86rem; color: var(--muted); margin: 6px 0 14px; }
.speaker-card .talk { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 0.97rem; margin: 0 0 16px; }
.badge {
display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2);
}
.badge-day1 { color: var(--accent); background: var(--accent-50); }
.badge-day2 { color: #c4a4ff; background: var(--accent2-50); }
.badge-day3 { color: var(--ok); background: rgba(52, 211, 153, 0.12); }
/* ---------- TABS / PROGRAM ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.tab {
font-family: var(--sans); font-weight: 600; font-size: 0.92rem; color: var(--ink-2);
background: transparent; border: 1px solid transparent; border-radius: var(--r-md) var(--r-md) 0 0;
padding: 11px 20px; cursor: pointer; transition: color 0.18s, background 0.18s; position: relative;
}
.tab:hover { color: var(--accent); }
.tab.is-active { color: #06141a; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.panel { animation: fade 0.3s ease; }
.panel[hidden] { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.agenda li {
display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 16px;
background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 16px 18px; transition: border-color 0.18s, transform 0.18s;
}
.section-alt .agenda li { background: var(--bg-3); }
.agenda li:hover { border-color: var(--accent); transform: translateX(3px); }
.ag-time { font-family: var(--mono); font-size: 0.95rem; color: var(--accent); font-weight: 500; }
.agenda strong { display: block; font-size: 0.98rem; }
.agenda span { font-size: 0.85rem; color: var(--muted); }
.agenda strong + span { display: block; }
.tag {
font-size: 0.72rem; font-weight: 600; padding: 4px 11px; border-radius: 999px;
background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap;
}
.tag-keynote { color: var(--accent); background: var(--accent-50); border-color: rgba(34,211,238,0.3); }
.tag-poster { color: var(--warn); background: rgba(245,196,81,0.1); }
.tag-workshop { color: #c4a4ff; background: var(--accent2-50); }
.tag-panel { color: var(--ok); background: rgba(52,211,153,0.12); }
.tag-social { color: var(--ink); background: var(--bg-3); }
/* ---------- PRICING ---------- */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: start; }
.price-card {
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 30px 26px; position: relative; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.price-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.price-card.is-featured {
border-color: transparent; transform: translateY(-10px);
background:
linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
border: 1.5px solid transparent; box-shadow: 0 20px 50px rgba(34, 211, 238, 0.18);
}
.price-card.is-featured:hover { transform: translateY(-14px); }
.ribbon {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06141a;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 5px 16px; border-radius: 999px;
}
.price-card h3 { font-size: 1.25rem; font-weight: 700; }
.price { font-family: var(--mono); font-size: 2.7rem; font-weight: 500; margin: 14px 0 22px; line-height: 1; }
.price .cur { font-size: 0.95rem; color: var(--muted); vertical-align: super; margin-right: 4px; }
.price .per { font-size: 0.85rem; color: var(--muted); font-family: var(--sans); margin-left: 6px; }
.price-feat { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.price-feat li { font-size: 0.92rem; color: var(--ink-2); padding-left: 26px; position: relative; }
.price-feat li::before {
content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 8px;
border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
transform: rotate(-45deg);
}
/* ---------- TIMELINE ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; max-width: 720px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line-2); }
.timeline li { position: relative; padding: 0 0 30px 40px; }
.timeline li:last-child { padding-bottom: 0; }
.tl-dot {
position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
background: var(--bg-2); border: 2px solid var(--line-2); z-index: 1;
}
.tl-done .tl-dot { background: var(--accent); border-color: var(--accent); }
.tl-active .tl-dot { background: var(--accent-2); border-color: var(--accent-2); box-shadow: 0 0 0 5px var(--accent2-50); animation: pulse 2.2s infinite; }
.timeline time { font-family: var(--mono); font-size: 0.84rem; color: var(--accent); display: block; }
.timeline strong { display: block; font-size: 1.06rem; margin: 3px 0 4px; }
.timeline p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.tl-done strong { color: var(--ink-2); }
/* ---------- SPONSORS ---------- */
.sponsor-tier { margin-bottom: 28px; }
.tier-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.logo-row { display: flex; flex-wrap: wrap; gap: 14px; }
.logo-chip {
font-family: var(--mono); font-size: 0.92rem; letter-spacing: 0.02em; color: var(--ink-2);
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 16px 26px; transition: color 0.18s, border-color 0.18s, transform 0.18s;
}
.logo-chip:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.logo-row-lg .logo-chip { font-size: 1.05rem; padding: 22px 34px; }
.logo-row-sm .logo-chip { font-size: 0.82rem; padding: 11px 18px; }
/* ---------- CTA BAND ---------- */
.cta-band {
background: linear-gradient(135deg, var(--accent-d), var(--accent-2-d));
position: relative; overflow: hidden;
}
.cta-band::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.16), transparent 55%);
}
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 56px 0; flex-wrap: wrap; }
.cta-inner h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); color: #fff; }
.cta-inner p { color: rgba(255,255,255,0.86); margin: 8px 0 0; font-family: var(--serif); font-size: 1.05rem; }
.cta-band .btn-accent { background: #fff; color: #0a2730; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.cta-band .btn-accent:hover { background: #f0fbff; }
/* ---------- FOOTER ---------- */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 44px 0; }
.footer-inner { text-align: center; }
.foot-brand { font-size: 1.4rem; font-weight: 700; margin: 0 0 8px; }
.foot-note { color: var(--ink-2); margin: 0 0 12px; font-size: 0.92rem; }
.foot-fine { color: var(--muted); font-size: 0.8rem; margin: 0; }
/* ---------- TOAST ---------- */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px);
background: var(--bg-3); color: var(--ink); border: 1px solid var(--accent);
padding: 13px 22px; border-radius: var(--r-md); box-shadow: var(--shadow);
font-size: 0.92rem; font-weight: 500; opacity: 0; pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease; z-index: 300; max-width: 88vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
.site-nav { display: none; }
.stat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.section { padding: 64px 0; }
.hero { padding-top: 56px; }
.countdown { padding: 14px 16px; gap: 4px; margin-bottom: 56px; }
.cd-unit { min-width: 48px; }
.cd-sep { display: none; }
.agenda li { grid-template-columns: 1fr; gap: 6px; }
.agenda .tag { justify-self: start; }
.ag-time { font-size: 1rem; }
.price-card.is-featured { transform: none; }
.price-card.is-featured:hover { transform: translateY(-4px); }
.cta-inner { flex-direction: column; align-items: flex-start; text-align: left; }
.stat-strip { transform: translateY(28px); }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; 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");
}, 2600);
}
/* ---------- Countdown to conference start ---------- */
// 16 March 2027, 08:00 local time
var target = new Date(2027, 2, 16, 8, 0, 0).getTime();
var fields = {
days: document.querySelector('[data-cd="days"]'),
hours: document.querySelector('[data-cd="hours"]'),
mins: document.querySelector('[data-cd="mins"]'),
secs: document.querySelector('[data-cd="secs"]'),
};
function pad(n) {
return (n < 10 ? "0" : "") + n;
}
function tick() {
var diff = target - Date.now();
if (diff <= 0) {
if (fields.days) fields.days.textContent = "00";
if (fields.hours) fields.hours.textContent = "00";
if (fields.mins) fields.mins.textContent = "00";
if (fields.secs) fields.secs.textContent = "00";
clearInterval(cdInterval);
return;
}
var s = Math.floor(diff / 1000);
var d = Math.floor(s / 86400);
var h = Math.floor((s % 86400) / 3600);
var m = Math.floor((s % 3600) / 60);
var sec = s % 60;
if (fields.days) fields.days.textContent = pad(d);
if (fields.hours) fields.hours.textContent = pad(h);
if (fields.mins) fields.mins.textContent = pad(m);
if (fields.secs) fields.secs.textContent = pad(sec);
}
tick();
var cdInterval = setInterval(tick, 1000);
/* ---------- Tabbed program ---------- */
var tabs = Array.prototype.slice.call(document.querySelectorAll('.tab'));
var panels = {
"tab-d1": document.getElementById("panel-d1"),
"tab-d2": document.getElementById("panel-d2"),
"tab-d3": document.getElementById("panel-d3"),
};
function activateTab(tab) {
tabs.forEach(function (t) {
var on = t === tab;
t.classList.toggle("is-active", on);
t.setAttribute("aria-selected", on ? "true" : "false");
t.tabIndex = on ? 0 : -1;
var panel = panels[t.id];
if (panel) {
panel.classList.toggle("is-active", on);
if (on) panel.removeAttribute("hidden");
else panel.setAttribute("hidden", "");
}
});
}
tabs.forEach(function (tab, i) {
tab.addEventListener("click", function () {
activateTab(tab);
});
tab.addEventListener("keydown", function (e) {
var next = null;
if (e.key === "ArrowRight") next = tabs[(i + 1) % tabs.length];
else if (e.key === "ArrowLeft") next = tabs[(i - 1 + tabs.length) % tabs.length];
else if (e.key === "Home") next = tabs[0];
else if (e.key === "End") next = tabs[tabs.length - 1];
if (next) {
e.preventDefault();
activateTab(next);
next.focus();
}
});
});
/* ---------- Pricing tier selection ---------- */
document.querySelectorAll("[data-tier]").forEach(function (btn) {
btn.addEventListener("click", function () {
var tier = btn.getAttribute("data-tier");
toast("✓ " + tier + " pass selected — redirecting to registration…");
});
});
/* ---------- Final CTA ---------- */
var cta = document.getElementById("cta-register");
if (cta) {
cta.addEventListener("click", function () {
toast("Registration opens in a new tab (demo)");
});
}
/* ---------- Scroll-spy on nav ---------- */
var navLinks = Array.prototype.slice.call(document.querySelectorAll(".site-nav a"));
var sections = navLinks
.map(function (a) {
return document.querySelector(a.getAttribute("href"));
})
.filter(Boolean);
if ("IntersectionObserver" in window && sections.length) {
var spy = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
navLinks.forEach(function (a) {
a.style.color = a.getAttribute("href") === "#" + entry.target.id ? "var(--accent)" : "";
});
}
});
},
{ rootMargin: "-45% 0px -50% 0px" }
);
sections.forEach(function (s) {
spy.observe(s);
});
}
/* ---------- Reveal on scroll ---------- */
if ("IntersectionObserver" in window) {
var revealEls = document.querySelectorAll(
".speaker-card, .price-card, .timeline li, .stat-strip li"
);
revealEls.forEach(function (el) {
el.style.opacity = "0";
el.style.transform = "translateY(16px)";
el.style.transition = "opacity 0.5s ease, transform 0.5s ease";
});
var reveal = new IntersectionObserver(
function (entries, obs) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.style.opacity = "1";
entry.target.style.transform = "none";
obs.unobserve(entry.target);
}
});
},
{ threshold: 0.12 }
);
revealEls.forEach(function (el) {
reveal.observe(el);
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>NeuroCompute 2027 — International Conference on Neural Computation</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:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="site-header" id="top">
<div class="wrap header-inner">
<a class="brand" href="#top" aria-label="NeuroCompute 2027 home">
<span class="brand-mark" aria-hidden="true">N<small>C</small></span>
<span class="brand-text">NeuroCompute<span class="brand-yr">'27</span></span>
</a>
<nav class="site-nav" aria-label="Primary">
<a href="#speakers">Speakers</a>
<a href="#program">Program</a>
<a href="#register">Registration</a>
<a href="#dates">Dates</a>
<a href="#sponsors">Sponsors</a>
</nav>
<a class="btn btn-accent btn-sm nav-cta" href="#register">Register</a>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero" aria-labelledby="hero-title">
<div class="hero-glow" aria-hidden="true"></div>
<div class="hero-grid" aria-hidden="true"></div>
<div class="wrap hero-inner">
<p class="hero-eyebrow"><span class="dot" aria-hidden="true"></span> 11th International Conference on Neural Computation</p>
<h1 id="hero-title" class="hero-title">Neuro<span class="grad">Compute</span> 2027</h1>
<p class="hero-tagline">Where neuroscience, machine intelligence, and physics converge. Three days of keynotes, peer-reviewed sessions, and live demos on the future of biologically-inspired computation.</p>
<div class="hero-meta">
<span class="chip"><span class="chip-k">When</span> Mar 16–18, 2027</span>
<span class="chip"><span class="chip-k">Where</span> Helix Convention Center, Zürich</span>
<span class="chip"><span class="chip-k">Format</span> In-person · Hybrid livestream</span>
</div>
<div class="hero-actions">
<a class="btn btn-accent" href="#register">Register now</a>
<a class="btn btn-ghost" href="#program">View program</a>
</div>
<div class="countdown" id="countdown" role="timer" aria-live="polite" aria-label="Time remaining until conference">
<div class="cd-unit"><span class="cd-num" data-cd="days">00</span><span class="cd-lbl">Days</span></div>
<span class="cd-sep" aria-hidden="true">:</span>
<div class="cd-unit"><span class="cd-num" data-cd="hours">00</span><span class="cd-lbl">Hours</span></div>
<span class="cd-sep" aria-hidden="true">:</span>
<div class="cd-unit"><span class="cd-num" data-cd="mins">00</span><span class="cd-lbl">Minutes</span></div>
<span class="cd-sep" aria-hidden="true">:</span>
<div class="cd-unit"><span class="cd-num" data-cd="secs">00</span><span class="cd-lbl">Seconds</span></div>
</div>
</div>
<ul class="stat-strip wrap" aria-label="Conference at a glance">
<li><strong>42</strong><span>Keynotes & talks</span></li>
<li><strong>318</strong><span>Accepted papers</span></li>
<li><strong>1,900+</strong><span>Attendees</span></li>
<li><strong>57</strong><span>Countries</span></li>
</ul>
</section>
<!-- SPEAKERS -->
<section class="section" id="speakers" aria-labelledby="speakers-title">
<div class="wrap">
<header class="sec-head">
<p class="sec-eyebrow">Featured</p>
<h2 id="speakers-title">Keynote speakers</h2>
<p class="sec-lead">Pioneers shaping the next decade of neural computation, from spiking architectures to neuromorphic hardware.</p>
</header>
<div class="speaker-grid">
<article class="speaker-card">
<div class="mono-avatar" data-mono="EV" aria-hidden="true">EV</div>
<h3>Dr. Elena Varga</h3>
<p class="role">Director, Cortical Dynamics Lab — ETH Helix</p>
<p class="talk">“Free-energy minimization in spiking networks”</p>
<span class="badge badge-day1">Day 1 · Opening</span>
</article>
<article class="speaker-card">
<div class="mono-avatar" data-mono="KO" aria-hidden="true">KO</div>
<h3>Prof. Kenji Ohara</h3>
<p class="role">Chair of Neuromorphic Systems — Kyoto Inst. of Tech.</p>
<p class="talk">“Memristive crossbars beyond von Neumann”</p>
<span class="badge badge-day2">Day 2 · Plenary</span>
</article>
<article class="speaker-card">
<div class="mono-avatar" data-mono="AM" aria-hidden="true">AM</div>
<h3>Dr. Amara Mbeki</h3>
<p class="role">Principal Scientist — Quanta Neurolabs</p>
<p class="talk">“Predictive coding at planetary scale”</p>
<span class="badge badge-day2">Day 2 · Keynote</span>
</article>
<article class="speaker-card">
<div class="mono-avatar" data-mono="LR" aria-hidden="true">LR</div>
<h3>Prof. Lucas Roth</h3>
<p class="role">Theoretical Neuroscience — Max Vogel Institute</p>
<p class="talk">“Geometry of representation manifolds”</p>
<span class="badge badge-day3">Day 3 · Closing</span>
</article>
</div>
</div>
</section>
<!-- PROGRAM -->
<section class="section section-alt" id="program" aria-labelledby="program-title">
<div class="wrap">
<header class="sec-head">
<p class="sec-eyebrow">Schedule</p>
<h2 id="program-title">Program preview</h2>
<p class="sec-lead">A snapshot of the main track. Full timetable and parallel workshops published to registered attendees.</p>
</header>
<div class="tabs" role="tablist" aria-label="Conference days">
<button class="tab is-active" role="tab" id="tab-d1" aria-selected="true" aria-controls="panel-d1">Day 1 · Mon</button>
<button class="tab" role="tab" id="tab-d2" aria-selected="false" aria-controls="panel-d2" tabindex="-1">Day 2 · Tue</button>
<button class="tab" role="tab" id="tab-d3" aria-selected="false" aria-controls="panel-d3" tabindex="-1">Day 3 · Wed</button>
</div>
<div class="panel is-active" id="panel-d1" role="tabpanel" aria-labelledby="tab-d1" tabindex="0">
<ul class="agenda">
<li><span class="ag-time">09:00</span><div><strong>Opening keynote — Dr. Elena Varga</strong><span>Free-energy minimization in spiking networks · Aula Helix</span></div><span class="tag tag-keynote">Keynote</span></li>
<li><span class="ag-time">10:30</span><div><strong>Session A — Learning dynamics</strong><span>6 oral presentations · Room 1A</span></div><span class="tag">Oral</span></li>
<li><span class="ag-time">13:00</span><div><strong>Poster reel & lunch</strong><span>118 posters · Atrium</span></div><span class="tag tag-poster">Poster</span></li>
<li><span class="ag-time">15:00</span><div><strong>Workshop — Neuromorphic toolkits</strong><span>Hands-on lab · Room 2C</span></div><span class="tag tag-workshop">Workshop</span></li>
</ul>
</div>
<div class="panel" id="panel-d2" role="tabpanel" aria-labelledby="tab-d2" tabindex="0" hidden>
<ul class="agenda">
<li><span class="ag-time">09:00</span><div><strong>Plenary — Prof. Kenji Ohara</strong><span>Memristive crossbars beyond von Neumann · Aula Helix</span></div><span class="tag tag-keynote">Plenary</span></li>
<li><span class="ag-time">11:00</span><div><strong>Keynote — Dr. Amara Mbeki</strong><span>Predictive coding at planetary scale · Aula Helix</span></div><span class="tag tag-keynote">Keynote</span></li>
<li><span class="ag-time">14:00</span><div><strong>Session C — Hardware acceleration</strong><span>5 oral presentations · Room 1B</span></div><span class="tag">Oral</span></li>
<li><span class="ag-time">19:00</span><div><strong>Conference banquet</strong><span>Lakeside Terrace · ticketed</span></div><span class="tag tag-social">Social</span></li>
</ul>
</div>
<div class="panel" id="panel-d3" role="tabpanel" aria-labelledby="tab-d3" tabindex="0" hidden>
<ul class="agenda">
<li><span class="ag-time">09:30</span><div><strong>Session E — Theory & geometry</strong><span>7 oral presentations · Room 1A</span></div><span class="tag">Oral</span></li>
<li><span class="ag-time">11:30</span><div><strong>Panel — Open neuromorphic standards</strong><span>Moderated debate · Aula Helix</span></div><span class="tag tag-panel">Panel</span></li>
<li><span class="ag-time">14:00</span><div><strong>Closing keynote — Prof. Lucas Roth</strong><span>Geometry of representation manifolds · Aula Helix</span></div><span class="tag tag-keynote">Keynote</span></li>
<li><span class="ag-time">16:00</span><div><strong>Best-paper awards & farewell</strong><span>Awards ceremony · Aula Helix</span></div><span class="tag tag-social">Awards</span></li>
</ul>
</div>
</div>
</section>
<!-- REGISTRATION -->
<section class="section" id="register" aria-labelledby="register-title">
<div class="wrap">
<header class="sec-head">
<p class="sec-eyebrow">Pricing</p>
<h2 id="register-title">Registration tiers</h2>
<p class="sec-lead">Early-bird rates valid until 31 Jan 2027. All tiers include sessions, proceedings (DOI archived), and coffee breaks.</p>
</header>
<div class="pricing">
<article class="price-card">
<h3>Student</h3>
<p class="price"><span class="cur">CHF</span>290<span class="per">/ pass</span></p>
<ul class="price-feat">
<li>Full 3-day access</li>
<li>Proceedings & DOI archive</li>
<li>Poster session entry</li>
<li>Requires valid student ID</li>
</ul>
<button class="btn btn-ghost btn-block" data-tier="Student">Choose Student</button>
</article>
<article class="price-card is-featured">
<span class="ribbon">Most popular</span>
<h3>Academic</h3>
<p class="price"><span class="cur">CHF</span>640<span class="per">/ pass</span></p>
<ul class="price-feat">
<li>Everything in Student</li>
<li>Conference banquet ticket</li>
<li>All workshops & tutorials</li>
<li>Priority Q&A access</li>
</ul>
<button class="btn btn-accent btn-block" data-tier="Academic">Choose Academic</button>
</article>
<article class="price-card">
<h3>Industry</h3>
<p class="price"><span class="cur">CHF</span>1,180<span class="per">/ pass</span></p>
<ul class="price-feat">
<li>Everything in Academic</li>
<li>Recruiter expo access</li>
<li>2 networking reception passes</li>
<li>Invoice / PO billing</li>
</ul>
<button class="btn btn-ghost btn-block" data-tier="Industry">Choose Industry</button>
</article>
</div>
</div>
</section>
<!-- IMPORTANT DATES -->
<section class="section section-alt" id="dates" aria-labelledby="dates-title">
<div class="wrap">
<header class="sec-head">
<p class="sec-eyebrow">Deadlines</p>
<h2 id="dates-title">Important dates</h2>
<p class="sec-lead">All deadlines are 23:59 AoE (Anywhere on Earth, UTC−12).</p>
</header>
<ol class="timeline">
<li class="tl-done">
<span class="tl-dot" aria-hidden="true"></span>
<time datetime="2026-11-06">06 Nov 2026</time>
<strong>Abstract registration</strong>
<p>Title and abstract submitted via the OpenReview portal.</p>
</li>
<li class="tl-done">
<span class="tl-dot" aria-hidden="true"></span>
<time datetime="2026-11-13">13 Nov 2026</time>
<strong>Full paper deadline</strong>
<p>8-page double-blind manuscript, NeuroCompute LaTeX template.</p>
</li>
<li class="tl-active">
<span class="tl-dot" aria-hidden="true"></span>
<time datetime="2027-01-22">22 Jan 2027</time>
<strong>Author notification</strong>
<p>Accept / reject decisions with meta-reviews released.</p>
</li>
<li>
<span class="tl-dot" aria-hidden="true"></span>
<time datetime="2027-02-12">12 Feb 2027</time>
<strong>Camera-ready</strong>
<p>Final PDF + supplementary upload, copyright transfer signed.</p>
</li>
<li>
<span class="tl-dot" aria-hidden="true"></span>
<time datetime="2027-03-16">16 Mar 2027</time>
<strong>Conference opens</strong>
<p>On-site registration from 08:00, Helix Convention Center.</p>
</li>
</ol>
</div>
</section>
<!-- SPONSORS -->
<section class="section" id="sponsors" aria-labelledby="sponsors-title">
<div class="wrap">
<header class="sec-head">
<p class="sec-eyebrow">Supported by</p>
<h2 id="sponsors-title">Our sponsors</h2>
</header>
<div class="sponsor-tier">
<p class="tier-label">Platinum</p>
<div class="logo-row logo-row-lg">
<span class="logo-chip">Quanta Neurolabs</span>
<span class="logo-chip">Helix Compute</span>
<span class="logo-chip">Synaptiq AI</span>
</div>
</div>
<div class="sponsor-tier">
<p class="tier-label">Gold</p>
<div class="logo-row">
<span class="logo-chip">Memristor Works</span>
<span class="logo-chip">DeepCortex</span>
<span class="logo-chip">Vogel Foundation</span>
<span class="logo-chip">NorthStar Labs</span>
</div>
</div>
<div class="sponsor-tier">
<p class="tier-label">Silver & community</p>
<div class="logo-row logo-row-sm">
<span class="logo-chip">Spike.io</span>
<span class="logo-chip">OpenNeuro</span>
<span class="logo-chip">Axon Press</span>
<span class="logo-chip">GridFlux</span>
<span class="logo-chip">Cortex Coop</span>
</div>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section class="cta-band" aria-labelledby="cta-title">
<div class="wrap cta-inner">
<div>
<h2 id="cta-title">Secure your seat in Zürich</h2>
<p>Early-bird seats are limited. Join 1,900+ researchers reshaping neural computation.</p>
</div>
<a class="btn btn-accent btn-lg" href="#top" id="cta-register">Register for NeuroCompute 2027</a>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-inner">
<p class="foot-brand">NeuroCompute<span class="brand-yr">'27</span></p>
<p class="foot-note">11th International Conference on Neural Computation · 16–18 March 2027 · Zürich, Switzerland</p>
<p class="foot-fine">Illustrative UI only — fictional event, speakers, and sponsors. Not affiliated with any real organization.</p>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Scientific Conference Landing
A modern, dark-themed landing page for NeuroCompute 2027, a fictional international conference on neural computation. The hero pairs a neon cyan-to-violet gradient headline with a tagline, key dates and venue, and a live countdown timer that updates every second toward the 16 March 2027 opening. Key-info chips and a four-cell stat strip summarize the event at a glance, while a subtle grid and radial glow set an energetic, forward-looking tone.
Below the hero, monogram avatar cards introduce four keynote speakers with their talks and day badges. A tabbed program preview lets visitors switch between Day 1, Day 2, and Day 3 schedules — fully keyboard-navigable with arrow, Home, and End keys following the WAI-ARIA tabs pattern. Three registration pricing tiers (Student, Academic, Industry) sit side by side with the Academic plan highlighted by a gradient border and “Most popular” ribbon; selecting any tier raises a toast.
An important-dates timeline marks completed milestones, the active author-notification phase, and upcoming camera-ready and opening dates. Tiered sponsor logos and a gradient CTA band close the page. Interactions are pure vanilla JS: countdown, tabs, pricing toasts, scroll-spy nav highlighting, and reveal-on-scroll animations, all respecting prefers-reduced-motion.
Illustrative UI only — fictional authors, data, and figures; not real scientific results.