<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>House of Curie — Student Science Club</title>
<meta name="description" content="A student-led scientific community dedicated to curiosity, experimentation, and innovation." />
<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet" />
<style>
:root {
--cream: #f5f3ef;
--cream-dark: #ede9e2;
--indigo: #2d3a6b;
--indigo-light: #3d4f8f;
--teal: #1e5f6b;
--teal-light: #28788a;
--rose: #8b3a52;
--rose-light: #b04f6b;
--amber: #8c5a1a;
--amber-light: #b8782a;
--copper: #8c6a3c;
--copper-light: #b08a58;
--chip-slime: #3d6b35;
--chip-perfume: #6b3569;
--chip-lava: #8b3a1e;
--ink: #1a1814;
--ink-muted: #4a4640;
--ink-faint: #8a857d;
--border: rgba(26,24,20,0.11);
--border-strong:rgba(26,24,20,0.2);
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'DM Sans', system-ui, sans-serif;
--mono: 'DM Mono', 'Courier New', monospace;
}
```
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.7; overflow-x: hidden; }
body::before {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cdefs%3E%3Cstyle%3E.l%7Bstroke:%231a1814;stroke-width:0.5;fill:none;opacity:0.04%7D.c%7Bstroke:%231a1814;stroke-width:0.5;fill:none;opacity:0.038%7D%3C/style%3E%3C/defs%3E%3Cg class='l'%3E%3Cline x1='0' y1='60' x2='900' y2='60'/%3E%3Cline x1='0' y1='120' x2='900' y2='120'/%3E%3Cline x1='0' y1='180' x2='900' y2='180'/%3E%3Cline x1='0' y1='240' x2='900' y2='240'/%3E%3Cline x1='0' y1='300' x2='900' y2='300'/%3E%3Cline x1='0' y1='360' x2='900' y2='360'/%3E%3Cline x1='0' y1='420' x2='900' y2='420'/%3E%3Cline x1='0' y1='480' x2='900' y2='480'/%3E%3Cline x1='0' y1='540' x2='900' y2='540'/%3E%3Cline x1='0' y1='600' x2='900' y2='600'/%3E%3Cline x1='0' y1='660' x2='900' y2='660'/%3E%3Cline x1='0' y1='720' x2='900' y2='720'/%3E%3Cline x1='0' y1='780' x2='900' y2='780'/%3E%3Cline x1='0' y1='840' x2='900' y2='840'/%3E%3Cline x1='60' y1='0' x2='60' y2='900'/%3E%3Cline x1='120' y1='0' x2='120' y2='900'/%3E%3Cline x1='180' y1='0' x2='180' y2='900'/%3E%3Cline x1='240' y1='0' x2='240' y2='900'/%3E%3Cline x1='300' y1='0' x2='300' y2='900'/%3E%3Cline x1='360' y1='0' x2='360' y2='900'/%3E%3Cline x1='420' y1='0' x2='420' y2='900'/%3E%3Cline x1='480' y1='0' x2='480' y2='900'/%3E%3Cline x1='540' y1='0' x2='540' y2='900'/%3E%3Cline x1='600' y1='0' x2='600' y2='900'/%3E%3Cline x1='660' y1='0' x2='660' y2='900'/%3E%3Cline x1='720' y1='0' x2='720' y2='900'/%3E%3Cline x1='780' y1='0' x2='780' y2='900'/%3E%3Cline x1='840' y1='0' x2='840' y2='900'/%3E%3C/g%3E%3Cg class='c' transform='translate(700,120)'%3E%3Cpolygon points='0,-40 34.6,-20 34.6,20 0,40 -34.6,20 -34.6,-20'/%3E%3Cpolygon points='0,-24 20.8,-12 20.8,12 0,24 -20.8,12 -20.8,-12'/%3E%3Cline x1='0' y1='-40' x2='0' y2='-60'/%3E%3Cline x1='34.6' y1='-20' x2='52' y2='-30'/%3E%3Cline x1='34.6' y1='20' x2='52' y2='30'/%3E%3C/g%3E%3Cg class='c' transform='translate(120,500)'%3E%3Cellipse cx='0' cy='0' rx='20' ry='8'/%3E%3Cellipse cx='0' cy='25' rx='20' ry='8'/%3E%3Cellipse cx='0' cy='50' rx='20' ry='8'/%3E%3Cellipse cx='0' cy='75' rx='20' ry='8'/%3E%3Cline x1='-20' y1='0' x2='-20' y2='75'/%3E%3Cline x1='20' y1='0' x2='20' y2='75'/%3E%3C/g%3E%3Cg class='c' transform='translate(200,200)'%3E%3Ccircle cx='0' cy='0' r='8'/%3E%3Cellipse cx='0' cy='0' rx='50' ry='20'/%3E%3Cellipse cx='0' cy='0' rx='50' ry='20' transform='rotate(60)'/%3E%3Cellipse cx='0' cy='0' rx='50' ry='20' transform='rotate(120)'/%3E%3C/g%3E%3C/svg%3E");
background-size: 900px 900px;
pointer-events: none; z-index: 0;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 2.5rem; position: relative; z-index: 1; }
.divider { width: 100%; height: 1px; background: var(--border); }
.section-label {
font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--copper); display: block; margin-bottom: 0.75rem;
}
.fade-in { opacity: 0; transform: translateY(22px); transition: opacity 0.72s cubic-bezier(0.22,1,0.36,1), transform 0.72s cubic-bezier(0.22,1,0.36,1); }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.32s; }
.fade-in-delay-4 { transition-delay: 0.44s; }
/* ── Buttons ── */
.btn {
display: inline-block; font-family: var(--sans); font-size: 0.82rem; font-weight: 400;
letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
padding: 0.75rem 2rem; border: 1.5px solid currentColor; cursor: pointer;
transition: background 0.22s, color 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.btn-indigo { background: var(--indigo); color: var(--cream); border-color: var(--indigo); }
.btn-indigo:hover { background: var(--indigo-light); border-color: var(--indigo-light); box-shadow: 0 4px 18px rgba(45,58,107,0.3); }
.btn-outline-indigo { background: transparent; color: var(--indigo); border-color: var(--indigo); }
.btn-outline-indigo:hover { background: var(--indigo); color: var(--cream); box-shadow: 0 4px 18px rgba(45,58,107,0.2); }
.btn-amber { background: var(--amber); color: var(--cream); border-color: var(--amber); }
.btn-amber:hover { background: var(--amber-light); border-color: var(--amber-light); box-shadow: 0 4px 18px rgba(140,90,26,0.32); }
/* ── Nav ── */
nav {
position: sticky; top: 0; z-index: 100;
background: rgba(245,243,239,0.96); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border); transition: box-shadow 0.3s;
}
nav.scrolled { box-shadow: 0 2px 20px rgba(26,24,20,0.08); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 2.5rem; max-width: 1100px; margin: 0 auto; }
.nav-logo { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.03em; color: var(--ink); text-decoration: none; }
.nav-logo span { color: var(--rose); }
.nav-links { display: flex; gap: 2.2rem; list-style: none; align-items: center; }
.nav-links a {
font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink-muted); text-decoration: none;
transition: color 0.2s; position: relative;
}
.nav-links a::after {
content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
height: 1px; background: var(--rose); transform: scaleX(0); transition: transform 0.22s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links .nav-cta a { color: var(--cream) !important; }
.nav-links .nav-cta a::after { display: none; }
.nav-cta { margin-left: 0.8rem; }
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.3rem; flex-direction: column; gap: 5px; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform 0.25s, opacity 0.25s; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ── Hero ── */
#hero {
min-height: 92vh; display: flex; align-items: center; justify-content: center;
text-align: center; padding: 7rem 2.5rem 5rem; position: relative; overflow: hidden;
}
.hero-molecule { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-content { position: relative; z-index: 1; max-width: 740px; }
.hero-volume {
font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; color: var(--rose);
text-transform: uppercase; display: flex; align-items: center; justify-content: center;
gap: 1rem; margin-bottom: 2.5rem;
}
.hero-volume::before, .hero-volume::after { content: ''; width: 40px; height: 1px; background: var(--rose); opacity: 0.6; }
#hero h1 {
font-family: var(--serif); font-size: clamp(3.5rem, 8vw, 6.5rem); font-weight: 600;
line-height: 1.04; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.4rem;
}
.hero-subtitle {
font-family: var(--serif); font-size: clamp(1.1rem, 2.5vw, 1.45rem); font-weight: 400;
font-style: italic; color: var(--indigo); margin-bottom: 1.8rem; letter-spacing: 0.02em;
}
.hero-rule { width: 60px; height: 2px; background: linear-gradient(90deg, var(--rose), var(--amber)); margin: 0 auto 1.8rem; }
.hero-desc { font-size: 1rem; color: var(--ink-muted); max-width: 480px; margin: 0 auto 2.8rem; line-height: 1.75; }
/* Scroll indicator */
.hero-scroll {
position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em;
color: var(--ink-faint); text-transform: uppercase;
animation: scrollBounce 2.4s ease-in-out infinite;
}
.hero-scroll-line { width: 1px; height: 30px; background: linear-gradient(to bottom, var(--ink-faint), transparent); }
@keyframes scrollBounce {
0%,100% { opacity: 0.35; transform: translateX(-50%) translateY(0); }
50% { opacity: 0.9; transform: translateX(-50%) translateY(5px); }
}
/* ── Sections ── */
section { padding: 6rem 0; position: relative; z-index: 1; }
.section-header { margin-bottom: 3.5rem; }
.section-header h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 600; line-height: 1.15; color: var(--ink); }
.section-header p { font-size: 0.97rem; color: var(--ink-muted); max-width: 520px; margin-top: 0.9rem; line-height: 1.75; }
/* ── About ── */
#about { background: rgba(45,58,107,0.03); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.about-text h2 { font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 2.7rem); font-weight: 600; line-height: 1.15; color: var(--ink); margin-bottom: 1.2rem; }
.about-text p { font-size: 0.97rem; color: var(--ink-muted); line-height: 1.82; margin-bottom: 1rem; }
.about-text p:last-of-type { margin-bottom: 1.8rem; }
.about-illustration { display: flex; align-items: center; justify-content: center; }
.about-illustration svg { opacity: 0.22; max-width: 280px; width: 100%; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); margin-top: 2rem; }
.pillar { padding: 2rem 1.8rem; border-right: 1px solid var(--border); }
.pillar:last-child { border-right: none; }
.pillar-number { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.15em; display: block; margin-bottom: 0.6rem; }
.pillar:nth-child(1) .pillar-number { color: var(--indigo); }
.pillar:nth-child(2) .pillar-number { color: var(--teal); }
.pillar:nth-child(3) .pillar-number { color: var(--rose); }
.pillar h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin-bottom: 0.5rem; }
.pillar p { font-size: 0.84rem; color: var(--ink-muted); line-height: 1.7; }
/* Stats bar */
.stats-bar {
display: grid; grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--border); border-top: none;
background: rgba(255,255,255,0.3);
}
.stat-item { padding: 1.5rem 1.8rem; border-right: 1px solid var(--border); text-align: center; }
.stat-item:last-child { border-right: none; }
.stat-number { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; color: var(--indigo); line-height: 1; display: block; }
.stat-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-top: 0.3rem; }
/* ── Did You Know ── */
#did-you-know { background: var(--cream); }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.fact-card {
border: 1px solid var(--border); padding: 2.2rem 2rem; position: relative;
background: rgba(255,255,255,0.5); transition: box-shadow 0.22s, transform 0.22s;
}
.fact-card:nth-child(1) { border-top: 3px solid var(--indigo); }
.fact-card:nth-child(2) { border-top: 3px solid var(--teal); }
.fact-card:nth-child(3) { border-top: 3px solid var(--rose); }
.fact-card:hover { box-shadow: 0 6px 32px rgba(26,24,20,0.1); transform: translateY(-2px); }
.fact-card-icon { width: 44px; height: 44px; margin-bottom: 1.4rem; opacity: 0.55; }
.fact-card p { font-family: var(--serif); font-size: 1.08rem; font-weight: 500; line-height: 1.65; color: var(--ink); margin-bottom: 1.2rem; }
.fact-card-source { font-family: var(--mono); font-size: 0.65rem; color: var(--ink-faint); letter-spacing: 0.12em; text-transform: uppercase; }
.fact-card-num { position: absolute; top: 1.4rem; right: 1.6rem; font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em; }
.fact-card:nth-child(1) .fact-card-num { color: var(--indigo); }
.fact-card:nth-child(2) .fact-card-num { color: var(--teal); }
.fact-card:nth-child(3) .fact-card-num { color: var(--rose); }
/* ── Activities ── */
#projects { border-top: 1px solid var(--border); }
.activities-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.8rem;
align-items: start; /* prevents cards stretching to each other's height */
}
.activity-card {
border: 1px solid var(--border); background: rgba(255,255,255,0.5);
overflow: hidden; transition: transform 0.22s, box-shadow 0.22s;
display: flex; flex-direction: column;
}
.activity-card:hover { transform: translateY(-4px); box-shadow: 0 10px 36px rgba(26,24,20,0.11); }
.activity-banner {
height: 180px; display: flex; align-items: center; justify-content: center;
overflow: hidden; flex-shrink: 0;
}
.activity-card.slime .activity-banner { background: rgba(61,107,53,0.07); border-bottom: 2px solid rgba(61,107,53,0.18); }
.activity-card.perfume .activity-banner { background: rgba(107,53,105,0.07); border-bottom: 2px solid rgba(107,53,105,0.18); }
.activity-card.lava .activity-banner { background: rgba(139,58,30,0.07); border-bottom: 2px solid rgba(139,58,30,0.18); }
.activity-banner svg { opacity: 0.38; }
.activity-body { padding: 1.8rem 2rem 2rem; flex: 1; display: flex; flex-direction: column; }
.activity-tag {
font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
display: inline-block; padding: 0.25rem 0.65rem; border-radius: 2px; margin-bottom: 0.9rem;
}
.activity-card.slime .activity-tag { background: rgba(61,107,53,0.1); color: var(--chip-slime); }
.activity-card.perfume .activity-tag { background: rgba(107,53,105,0.1); color: var(--chip-perfume); }
.activity-card.lava .activity-tag { background: rgba(139,58,30,0.1); color: var(--chip-lava); }
.activity-body h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--ink); margin-bottom: 0.75rem; line-height: 1.2; }
.activity-body > p { font-size: 0.875rem; color: var(--ink-muted); line-height: 1.75; margin-bottom: 1.2rem; }
.activity-science { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: auto; }
.activity-science dt { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.3rem; }
.activity-science dd { font-size: 0.82rem; color: var(--ink-muted); line-height: 1.6; }
/* ── How to Join ── */
#join { border-top: 1px solid var(--border); background: rgba(140,90,26,0.025); }
.join-steps {
display: grid; grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--border); margin-top: 3rem;
}
.join-step {
padding: 3rem 2.4rem; border-right: 1px solid var(--border);
transition: background 0.22s;
}
.join-step:last-child { border-right: none; }
.join-step:hover { background: rgba(255,255,255,0.5); }
.join-step-badge {
width: 46px; height: 46px; border-radius: 50%;
border: 1.5px solid var(--indigo);
display: flex; align-items: center; justify-content: center;
margin-bottom: 1.6rem;
}
.join-step-badge span {
font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--indigo);
}
.join-step h3 { font-family: var(--serif); font-size: 1.28rem; font-weight: 600; color: var(--ink); margin-bottom: 0.7rem; line-height: 1.2; }
.join-step p { font-size: 0.875rem; color: var(--ink-muted); line-height: 1.78; }
.join-fee-note {
margin-top: 2.5rem; padding: 1.6rem 2rem;
border: 1px solid var(--border); border-left: 3px solid var(--amber);
background: rgba(140,90,26,0.04);
display: flex; align-items: flex-start; gap: 1.2rem;
}
.join-fee-icon { flex-shrink: 0; margin-top: 2px; opacity: 0.7; }
.join-fee-note-label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 0.35rem; }
.join-fee-note p { font-size: 0.875rem; color: var(--ink-muted); line-height: 1.72; }
.join-fee-note a { color: var(--copper); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.join-fee-note a:hover { border-color: var(--copper); }
/* ── CTA ── */
#cta {
background: linear-gradient(135deg, #2d3a6b 0%, #1e5f6b 55%, #3d4f8f 100%);
color: var(--cream); padding: 8rem 0; text-align: center; position: relative; overflow: hidden;
}
#cta::before {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cg fill='none' stroke='white' stroke-width='0.7' opacity='0.07'%3E%3Ccircle cx='300' cy='200' r='12'/%3E%3Cellipse cx='300' cy='200' rx='120' ry='50'/%3E%3Cellipse cx='300' cy='200' rx='120' ry='50' transform='rotate(60 300 200)'/%3E%3Cellipse cx='300' cy='200' rx='120' ry='50' transform='rotate(120 300 200)'/%3E%3Cpolygon points='80,80 114.6,60 114.6,20 80,0 45.4,20 45.4,60' transform='translate(10,260)'/%3E%3Cpolygon points='80,80 114.6,60 114.6,20 80,0 45.4,20 45.4,60' transform='translate(430,30)'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover; pointer-events: none;
}
#cta .container { position: relative; }
#cta .section-label { color: rgba(245,243,239,0.45); }
#cta h2 {
font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 600;
line-height: 1.2; color: var(--cream); max-width: 560px; margin: 0.5rem auto 2.2rem;
}
#cta .btn-amber { padding: 0.95rem 2.6rem; font-size: 0.85rem; }
.cta-sub {
font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.12em;
color: rgba(245,243,239,0.4); margin-top: 1.6rem;
}
/* ── FAQ ── */
#faq { border-top: 1px solid var(--border); background: rgba(45,58,107,0.025); }
.faq-list { max-width: 700px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
width: 100%; background: none; border: none; text-align: left; padding: 1.5rem 0;
font-family: var(--serif); font-size: 1.12rem; font-weight: 500; color: var(--ink);
cursor: pointer; display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem; transition: color 0.2s;
}
.faq-question:hover { color: var(--indigo); }
.faq-icon {
width: 18px; height: 18px; flex-shrink: 0;
border: 1.5px solid var(--border-strong); border-radius: 50%; position: relative;
transition: border-color 0.2s, transform 0.3s;
}
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--ink); transition: background 0.2s; }
.faq-icon::before { width: 8px; height: 1.5px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-icon::after { width: 1.5px; height: 8px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-item.open .faq-question { color: var(--indigo); }
.faq-item.open .faq-icon { border-color: var(--indigo); transform: rotate(45deg); }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after { background: var(--indigo); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.38s cubic-bezier(0.22,1,0.36,1); }
.faq-answer-inner { padding-bottom: 1.4rem; font-size: 0.93rem; color: var(--ink-muted); line-height: 1.78; }
.faq-item.open .faq-answer { max-height: 300px; }
/* ── Footer ── */
footer { border-top: 1px solid var(--border-strong); padding: 3rem 0 2.5rem; background: var(--cream-dark); position: relative; z-index: 1; }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer-brand p { font-size: 0.84rem; color: var(--ink-faint); line-height: 1.72; margin-top: 0.6rem; max-width: 240px; }
.footer-col h4 { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper); margin-bottom: 1rem; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col ul li a { font-size: 0.84rem; color: var(--ink-muted); text-decoration: none; transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--indigo); }
.footer-col address { font-style: normal; font-size: 0.84rem; color: var(--ink-muted); line-height: 1.8; }
.footer-col address a { color: var(--copper); text-decoration: none; }
.footer-col address a:hover { color: var(--copper-light); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; }
.footer-bottom p { font-family: var(--mono); font-size: 0.67rem; color: var(--ink-faint); letter-spacing: 0.05em; }
/* ── Responsive ── */
@media (max-width: 960px) {
.about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.about-illustration { display: none; }
.pillars { grid-template-columns: 1fr; }
.pillar { border-right: none; border-bottom: 1px solid var(--border); }
.pillar:last-child { border-bottom: none; }
.fact-grid { grid-template-columns: 1fr 1fr; }
.activities-grid { grid-template-columns: 1fr; max-width: 520px; }
.join-steps { grid-template-columns: 1fr; }
.join-step { border-right: none; border-bottom: 1px solid var(--border); }
.join-step:last-child { border-bottom: none; }
.stats-bar { grid-template-columns: repeat(3,1fr); }
.footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.container { padding: 0 1.4rem; }
.nav-inner { padding: 1rem 1.4rem; }
.nav-links {
display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
background: rgba(245,243,239,0.98); padding: 1.5rem 1.4rem;
border-bottom: 1px solid var(--border); gap: 1.2rem;
}
.nav-links.open { display: flex; }
.hamburger { display: flex; }
.fact-grid { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr; gap: 2rem; }
section { padding: 4rem 0; }
.hero-scroll { display: none; }
.stats-bar { grid-template-columns: 1fr; }
.stat-item { border-right: none; border-bottom: 1px solid var(--border); }
.stat-item:last-child { border-bottom: none; }
}
```
</style>
</head>
<body>
<!-- ══ Nav ══ -->
<nav role="navigation" aria-label="Primary navigation" id="main-nav">
<div class="nav-inner">
<a href="#hero" class="nav-logo scroll-btn" data-target="hero" aria-label="House of Curie home">House <span>of</span> Curie</a>
<ul class="nav-links" id="nav-links" role="list">
<li><a href="#about" class="scroll-btn" data-target="about">About</a></li>
<li><a href="#did-you-know" class="scroll-btn" data-target="did-you-know">Discover</a></li>
<li><a href="#projects" class="scroll-btn" data-target="projects">Activities</a></li>
<li><a href="#join" class="scroll-btn" data-target="join">Join</a></li>
<li><a href="#faq" class="scroll-btn" data-target="faq">FAQ</a></li>
<li class="nav-cta"><a href="#join" class="btn btn-indigo scroll-btn" data-target="join" style="padding:0.5rem 1.3rem;">Join Now</a></li>
</ul>
<button class="hamburger" id="hamburger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="nav-links">
<span></span><span></span><span></span>
</button>
</div>
</nav>
<!-- ══ Hero ══ -->
<section id="hero" aria-labelledby="hero-heading">
<svg class="hero-molecule" viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<g fill="none" stroke="#1a1814" stroke-width="1" opacity="0.04">
<circle cx="120" cy="350" r="10"/><circle cx="200" cy="290" r="10"/><circle cx="290" cy="310" r="10"/>
<circle cx="330" cy="400" r="10"/><circle cx="240" cy="450" r="10"/><circle cx="150" cy="430" r="10"/>
<line x1="120" y1="350" x2="200" y2="290"/><line x1="200" y1="290" x2="290" y2="310"/>
<line x1="290" y1="310" x2="330" y2="400"/><line x1="330" y1="400" x2="240" y2="450"/>
<line x1="240" y1="450" x2="150" y2="430"/><line x1="150" y1="430" x2="120" y2="350"/>
<line x1="200" y1="290" x2="200" y2="230"/><line x1="290" y1="310" x2="340" y2="265"/>
<circle cx="980" cy="200" r="10"/><circle cx="1060" cy="150" r="10"/><circle cx="1140" cy="180" r="10"/>
<circle cx="1150" cy="270" r="10"/><circle cx="1070" cy="320" r="10"/><circle cx="990" cy="290" r="10"/>
<line x1="980" y1="200" x2="1060" y2="150"/><line x1="1060" y1="150" x2="1140" y2="180"/>
<line x1="1140" y1="180" x2="1150" y2="270"/><line x1="1150" y1="270" x2="1070" y2="320"/>
<line x1="1070" y1="320" x2="990" y2="290"/><line x1="990" y1="290" x2="980" y2="200"/>
<line x1="1060" y1="150" x2="1060" y2="90"/>
<circle cx="600" cy="55" r="6"/><circle cx="650" cy="35" r="6"/><circle cx="700" cy="55" r="6"/>
<line x1="600" y1="55" x2="650" y2="35"/><line x1="650" y1="35" x2="700" y2="55"/>
</g>
</svg>
<div class="hero-content">
<div class="hero-volume fade-in">Student Science Society</div>
<h1 id="hero-heading" class="fade-in fade-in-delay-1">House of Curie</h1>
<p class="hero-subtitle fade-in fade-in-delay-2">Explore. Discover. Innovate.</p>
<div class="hero-rule fade-in fade-in-delay-2"></div>
<p class="hero-desc fade-in fade-in-delay-3">A student-led scientific community dedicated to curiosity, experimentation, and innovation. We believe knowledge is built through questions — and discovery begins with the courage to ask them.</p>
<a href="#join" class="btn btn-indigo fade-in fade-in-delay-4 scroll-btn" data-target="join" aria-label="Join House of Curie">Join the Club</a>
</div>
<div class="hero-scroll" aria-hidden="true">
<div class="hero-scroll-line"></div>
<span>Scroll</span>
</div>
</section>
<div class="divider"></div>
<!-- ══ About ══ -->
<section id="about" aria-labelledby="about-heading">
<div class="container">
<div class="about-grid">
<div class="about-text fade-in">
<span class="section-label">01 — Mission</span>
<h2 id="about-heading">Science is not a destination — it is a method of looking.</h2>
<p>House of Curie is a student-led science club rooted in the belief that anyone can do science. We gather students of all backgrounds to explore the natural world through hands-on experiments, guided activities, and shared curiosity.</p>
<p>Named after Marie Skłodowska-Curie — the first person to win the Nobel Prize twice, in two different sciences — we carry her spirit of bold, boundary-crossing discovery into every session we run.</p>
<a href="#projects" class="btn btn-outline-indigo scroll-btn" data-target="projects">See Our Activities</a>
<div class="pillars">
<div class="pillar">
<span class="pillar-number">01</span>
<h3>Curiosity</h3>
<p>Every experiment begins with a question. We create a space where no idea is too wild to try.</p>
</div>
<div class="pillar">
<span class="pillar-number">02</span>
<h3>Hands-on</h3>
<p>Real materials, real reactions, real results — science that you can touch, smell, and see in action.</p>
</div>
<div class="pillar">
<span class="pillar-number">03</span>
<h3>Together</h3>
<p>Every session is a team effort — we mix, we observe, and we discover side by side.</p>
</div>
</div>
<div class="stats-bar">
<div class="stat-item">
<span class="stat-number">3</span>
<span class="stat-label">Sessions run</span>
</div>
<div class="stat-item">
<span class="stat-number">30+</span>
<span class="stat-label">Members</span>
</div>
<div class="stat-item">
<span class="stat-number">2026</span>
<span class="stat-label">Founded</span>
</div>
</div>
</div>
<div class="about-illustration" aria-hidden="true">
<svg viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#2d3a6b" stroke-width="1.2">
<circle cx="150" cy="200" r="12"/>
<ellipse cx="150" cy="200" rx="120" ry="50"/>
<ellipse cx="150" cy="200" rx="120" ry="50" transform="rotate(60 150 200)"/>
<ellipse cx="150" cy="200" rx="120" ry="50" transform="rotate(120 150 200)"/>
<circle cx="270" cy="200" r="5" fill="#2d3a6b"/>
<circle cx="90" cy="156" r="5" fill="#2d3a6b"/>
<circle cx="90" cy="244" r="5" fill="#2d3a6b"/>
<text x="145" y="205" font-family="'DM Mono',monospace" font-size="8" fill="#2d3a6b" text-anchor="middle">Mc</text>
<path d="M110,320 L90,370 L210,370 L190,320 Z"/>
<line x1="110" y1="320" x2="190" y2="320"/>
<rect x="120" y="295" width="60" height="25" rx="2"/>
<circle cx="140" cy="345" r="4" opacity="0.4"/>
<circle cx="160" cy="355" r="6" opacity="0.3"/>
<circle cx="150" cy="338" r="3" opacity="0.5"/>
</svg>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ══ Did You Know ══ -->
<section id="did-you-know" aria-labelledby="facts-heading">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">02 — Scientific Facts</span>
<h2 id="facts-heading">Did You Know?</h2>
<p>The natural world operates by rules stranger than any fiction. Here are three that we think about often.</p>
</div>
<div class="fact-grid">
<div class="fact-card fade-in fade-in-delay-1">
<span class="fact-card-num">001</span>
<svg class="fact-card-icon" viewBox="0 0 44 44" fill="none" stroke="#2d3a6b" stroke-width="1.2" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="22" cy="14" r="8"/><path d="M14 14 Q8 22 14 30 Q22 36 30 30 Q36 22 30 14"/>
<line x1="22" y1="6" x2="22" y2="2"/><line x1="22" y1="38" x2="22" y2="42"/>
<line x1="14" y1="22" x2="10" y2="22"/><line x1="34" y1="22" x2="38" y2="22"/>
</svg>
<p>Water expands when it freezes — unlike most substances, which contract. This is why ice floats, and why fish can survive beneath frozen lakes in winter.</p>
<span class="fact-card-source">Physical Chemistry</span>
</div>
<div class="fact-card fade-in fade-in-delay-2">
<span class="fact-card-num">002</span>
<svg class="fact-card-icon" viewBox="0 0 44 44" fill="none" stroke="#1e5f6b" stroke-width="1.2" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 8 Q16 14 12 20 Q8 26 12 32 Q16 38 12 44" stroke-linecap="round"/>
<path d="M22 8 Q26 14 22 20 Q18 26 22 32 Q26 38 22 44" stroke-linecap="round"/>
<path d="M12 14 L22 18 M12 26 L22 22"/>
</svg>
<p>A single teaspoon of DNA could theoretically store all of the world's digital data — at a density of around 215 petabytes per gram, it remains the most efficient storage medium ever identified.</p>
<span class="fact-card-source">Molecular Biology</span>
</div>
<div class="fact-card fade-in fade-in-delay-3">
<span class="fact-card-num">003</span>
<svg class="fact-card-icon" viewBox="0 0 44 44" fill="none" stroke="#8b3a52" stroke-width="1.2" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="22" cy="22" r="16"/>
<circle cx="22" cy="22" r="4" fill="#8b3a52" opacity="0.3"/>
<line x1="22" y1="6" x2="22" y2="2"/><line x1="36" y1="22" x2="40" y2="22"/>
<line x1="22" y1="38" x2="22" y2="42"/><line x1="8" y1="22" x2="4" y2="22"/>
</svg>
<p>The human brain generates roughly 20 watts of electrical power — just enough to light a dim LED bulb — while sustaining approximately 86 billion active neurons simultaneously.</p>
<span class="fact-card-source">Neuroscience</span>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ══ Activities ══ -->
<section id="projects" aria-labelledby="projects-heading">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">03 — What We've Made</span>
<h2 id="projects-heading">Our Experiments So Far</h2>
<p>Hands-on activities where chemistry, physics, and creativity collide. No prior knowledge needed — just curiosity and a willingness to get your hands a little messy.</p>
</div>
<div class="activities-grid">
```
<article class="activity-card slime fade-in fade-in-delay-1">
<div class="activity-banner" aria-hidden="true">
<svg viewBox="0 0 280 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M80,110 Q60,80 75,55 Q90,30 130,40 Q165,25 185,50 Q215,45 220,75 Q235,100 210,120 Q190,140 155,135 Q125,145 100,135 Q75,130 80,110 Z" stroke="#3d6b35" stroke-width="1.5" fill="rgba(61,107,53,0.08)"/>
<path d="M100,105 Q85,88 95,70 Q110,52 140,58 Q165,50 175,70 Q190,88 175,108 Q158,122 135,118 Q108,120 100,105 Z" stroke="#3d6b35" stroke-width="1" fill="rgba(61,107,53,0.06)"/>
<circle cx="110" cy="88" r="5" stroke="#3d6b35" stroke-width="1"/>
<circle cx="130" cy="82" r="5" stroke="#3d6b35" stroke-width="1"/>
<circle cx="150" cy="88" r="5" stroke="#3d6b35" stroke-width="1"/>
<circle cx="168" cy="82" r="5" stroke="#3d6b35" stroke-width="1"/>
<line x1="115" y1="88" x2="125" y2="84"/><line x1="135" y1="84" x2="145" y2="88"/><line x1="155" y1="88" x2="163" y2="84"/>
<text x="112" y="135" font-family="'DM Mono',monospace" font-size="8" fill="#3d6b35">PVA + Borax</text>
</svg>
</div>
<div class="activity-body">
<span class="activity-tag">Session 01</span>
<h3>Slime Lab</h3>
<p>We mixed polyvinyl alcohol (PVA glue) with a borax solution to create stretchy, non-Newtonian slime. Members adjusted ratios to control thickness and elasticity — and had a lot of fun doing it.</p>
<dl class="activity-science">
<dt>The Science Behind It</dt>
<dd>Cross-linking polymer chains create a substance that behaves as both liquid and solid — a classic demonstration of non-Newtonian fluid behaviour.</dd>
</dl>
</div>
</article>
<article class="activity-card perfume fade-in fade-in-delay-2">
<div class="activity-banner" aria-hidden="true">
<svg viewBox="0 0 280 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="105" y="65" width="70" height="75" rx="6" stroke="#6b3569" stroke-width="1.5" fill="rgba(107,53,105,0.06)"/>
<rect x="125" y="52" width="30" height="18" rx="3" stroke="#6b3569" stroke-width="1.2"/>
<rect x="118" y="45" width="44" height="12" rx="5" stroke="#6b3569" stroke-width="1"/>
<circle cx="85" cy="50" r="5" stroke="#6b3569" stroke-width="1"/>
<circle cx="70" cy="35" r="4" stroke="#6b3569" stroke-width="1"/>
<circle cx="95" cy="28" r="3" stroke="#6b3569" stroke-width="1"/>
<circle cx="200" cy="48" r="5" stroke="#6b3569" stroke-width="1"/>
<circle cx="218" cy="32" r="4" stroke="#6b3569" stroke-width="1"/>
<circle cx="205" cy="20" r="3" stroke="#6b3569" stroke-width="1"/>
<line x1="105" y1="65" x2="88" y2="53" stroke="#6b3569" stroke-width="0.8" stroke-dasharray="2,2"/>
<line x1="175" y1="65" x2="198" y2="50" stroke="#6b3569" stroke-width="0.8" stroke-dasharray="2,2"/>
<text x="96" y="152" font-family="'DM Mono',monospace" font-size="8" fill="#6b3569">Essential Oils + Ethanol</text>
</svg>
</div>
<div class="activity-body">
<span class="activity-tag">Session 02</span>
<h3>Perfume Making</h3>
<p>Members blended essential oils with ethanol to create their own custom fragrances. Each person left with a small bottle of their unique scent — and a deeper understanding of how smell works.</p>
<dl class="activity-science">
<dt>The Science Behind It</dt>
<dd>Volatile aromatic compounds bind to olfactory receptors. We explored top, middle, and base notes — and how concentration affects how long a scent lingers.</dd>
</dl>
</div>
</article>
<article class="activity-card lava fade-in fade-in-delay-3">
<div class="activity-banner" aria-hidden="true">
<svg viewBox="0 0 280 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M115,145 L108,80 Q108,65 140,65 Q172,65 172,80 L165,145 Z" stroke="#8b3a1e" stroke-width="1.5" fill="rgba(139,58,30,0.06)"/>
<path d="M110,130 Q140,122 170,130 L168,145 L112,145 Z" stroke="#8b3a1e" stroke-width="0.8" fill="rgba(42,79,110,0.1)"/>
<ellipse cx="130" cy="108" rx="10" ry="13" stroke="#8b3a1e" stroke-width="1" fill="rgba(139,58,30,0.1)"/>
<ellipse cx="152" cy="95" rx="8" ry="10" stroke="#8b3a1e" stroke-width="1" fill="rgba(139,58,30,0.08)"/>
<ellipse cx="136" cy="80" rx="6" ry="8" stroke="#8b3a1e" stroke-width="0.8" fill="rgba(139,58,30,0.06)"/>
<circle cx="122" cy="120" r="3" stroke="#8b3a1e" stroke-width="0.8"/>
<circle cx="158" cy="115" r="2.5" stroke="#8b3a1e" stroke-width="0.8"/>
<rect x="128" y="60" width="24" height="8" rx="3" stroke="#8b3a1e" stroke-width="1.2"/>
<text x="84" y="152" font-family="'DM Mono',monospace" font-size="8" fill="#8b3a1e">Oil + Water + Alka-Seltzer</text>
</svg>
</div>
<div class="activity-body">
<span class="activity-tag">Session 03</span>
<h3>Lava Lamp</h3>
<p>Using water, oil, food colouring, and Alka-Seltzer tablets, members built their own lava lamps from scratch — watching blobs of coloured water rise and fall in a hypnotic loop.</p>
<dl class="activity-science">
<dt>The Science Behind It</dt>
<dd>Oil and water don't mix due to polarity differences. CO₂ from the tablet carries dense water droplets upward; as gas escapes at the surface, they sink again — a density-driven cycle.</dd>
</dl>
</div>
</article>
</div>
</div>
```
</section>
<div class="divider"></div>
<!-- ══ How to Join ══ -->
<section id="join" aria-labelledby="join-heading">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">04 — Membership</span>
<h2 id="join-heading">How to Join</h2>
<p>Becoming a member is straightforward. Three steps stand between you and your first experiment.</p>
</div>
```
<div class="join-steps fade-in">
<div class="join-step">
<div class="join-step-badge"><span>01</span></div>
<h3>Visit the School</h3>
<p>Head to the administration office at Saint Benedict College and ask about the House of Curie club. They will confirm your eligibility and point you to the right person.</p>
</div>
<div class="join-step">
<div class="join-step-badge"><span>02</span></div>
<h3>Meet a Member or an Admin</h3>
<p>Connect with any current club member or one of our administrators. They'll walk you through how we run sessions and answer any questions you may have.</p>
</div>
<div class="join-step">
<div class="join-step-badge"><span>03</span></div>
<h3>Pay the Membership Fee</h3>
<p>A small fee covers materials and activity costs. Once paid, you're officially in — and you'll be welcomed at our very next session.</p>
</div>
</div>
<div class="join-fee-note fade-in fade-in-delay-1">
<svg class="join-fee-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#8c5a1a" stroke-width="1.4" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="10" cy="10" r="8"/>
<line x1="10" y1="9" x2="10" y2="14"/>
<circle cx="10" cy="6.5" r="0.8" fill="#8c5a1a"/>
</svg>
<div>
<span class="join-fee-note-label">Good to Know</span>
<p>The fee is kept low intentionally — we believe finances should never be a barrier to scientific curiosity. If you have any concerns, speak to an administrator in confidence. You can also reach us at <a href="mailto:[email protected]">[email protected]</a> or call <a href="tel:+237656631674">+237 656 631 674</a>.</p>
</div>
</div>
</div>
```
</section>
<!-- ══ CTA ══ -->
<section id="cta" aria-labelledby="cta-heading">
<div class="container">
<span class="section-label fade-in">05 — Get Involved</span>
<h2 id="cta-heading" class="fade-in fade-in-delay-1">Become part of a community driven by curiosity and discovery.</h2>
<a href="#join" class="btn btn-amber fade-in fade-in-delay-2 scroll-btn" data-target="join" aria-label="Learn how to join House of Curie">Join Now</a>
<p class="cta-sub fade-in fade-in-delay-3">Saint Benedict College, Mvolye · Yaoundé</p>
</div>
</section>
<div class="divider"></div>
<!-- ══ FAQ — final section ══ -->
<section id="faq" aria-labelledby="faq-heading">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">06 — Common Questions</span>
<h2 id="faq-heading">Frequently Asked</h2>
<p>Everything you need to know before joining the community.</p>
</div>
<div class="faq-list fade-in" role="list">
```
<div class="faq-item" role="listitem">
<button class="faq-question" aria-expanded="false" aria-controls="faq-1">
How can I join House of Curie?
<span class="faq-icon" aria-hidden="true"></span>
</button>
<div class="faq-answer" id="faq-1" role="region">
<div class="faq-answer-inner">Visit the school administration, connect with a club member or admin, and pay the small membership fee. <a href="#join" class="scroll-btn" data-target="join" style="color:var(--indigo);">See our full step-by-step guide above.</a></div>
</div>
</div>
<div class="faq-item" role="listitem">
<button class="faq-question" aria-expanded="false" aria-controls="faq-2">
Who is eligible to participate?
<span class="faq-icon" aria-hidden="true"></span>
</button>
<div class="faq-answer" id="faq-2" role="region">
<div class="faq-answer-inner">Any student can join — no matter your year, your faculty, or what you study. We actively welcome people from every background. You don't have to be a science student to love science.</div>
</div>
</div>
<div class="faq-item" role="listitem">
<button class="faq-question" aria-expanded="false" aria-controls="faq-3">
Do I need prior scientific experience?
<span class="faq-icon" aria-hidden="true"></span>
</button>
<div class="faq-answer" id="faq-3" role="region">
<div class="faq-answer-inner">Not at all. Our activities are designed to be accessible and fun for everyone. If you can follow instructions and ask questions, you're already qualified. We explain the science behind everything we do together in the session.</div>
</div>
</div>
<div class="faq-item" role="listitem">
<button class="faq-question" aria-expanded="false" aria-controls="faq-4">
What kind of activities does the club run?
<span class="faq-icon" aria-hidden="true"></span>
</button>
<div class="faq-answer" id="faq-4" role="region">
<div class="faq-answer-inner">Hands-on experiments that are fun, educational, and visually satisfying. So far we've made slime, blended perfumes, and built lava lamps. Every session focuses on one activity with a clear explanation of the science behind it. Suggestions from members are always welcome.</div>
</div>
</div>
<div class="faq-item" role="listitem">
<button class="faq-question" aria-expanded="false" aria-controls="faq-5">
How often do sessions take place?
<span class="faq-icon" aria-hidden="true"></span>
</button>
<div class="faq-answer" id="faq-5" role="region">
<div class="faq-answer-inner">We typically run one session every two to three weeks, depending on the academic calendar. Each session lasts around 90 minutes to two hours. We give plenty of advance notice so members can plan ahead.</div>
</div>
</div>
</div>
</div>
```
</section>
<!-- ══ Footer ══ -->
<footer role="contentinfo">
<div class="container">
<div class="footer-inner">
<div class="footer-brand">
<a href="#hero" class="nav-logo scroll-btn" data-target="hero" aria-label="House of Curie">House <span>of</span> Curie</a>
<p>A student-led science club committed to hands-on experiments, open curiosity, and the joy of discovery.</p>
</div>
<div class="footer-col">
<h4>Navigate</h4>
<ul>
<li><a href="#about" class="scroll-btn" data-target="about">About</a></li>
<li><a href="#did-you-know" class="scroll-btn" data-target="did-you-know">Did You Know</a></li>
<li><a href="#projects" class="scroll-btn" data-target="projects">Activities</a></li>
<li><a href="#join" class="scroll-btn" data-target="join">Join</a></li>
<li><a href="#faq" class="scroll-btn" data-target="faq">FAQ</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Contact</h4>
<address>
Saint Benedict College, Mvolye<br/>Yaoundé, Cameroon<br/><br/>
<a href="mailto:[email protected]">[email protected]</a><br/>
<a href="tel:+237656631674">+237 656 631 674</a>
</address>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 House of Curie — Student Science Club. All rights reserved.</p>
<p>Named in honour of Marie Skłodowska-Curie, 1867–1934.</p>
</div>
</div>
</footer>
<script>
// ── Smooth scroll ──
function smoothScroll(targetId) {
const el = document.getElementById(targetId);
if (!el) return;
const navH = document.getElementById('main-nav').offsetHeight;
const top = el.getBoundingClientRect().top + window.scrollY - navH - 8;
window.scrollTo({ top, behavior: 'smooth' });
}
document.querySelectorAll('.scroll-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
const target = this.dataset.target || (this.getAttribute('href') || '').replace('#', '');
if (target && document.getElementById(target)) {
e.preventDefault();
smoothScroll(target);
}
});
});
document.querySelectorAll('a[href^="#"]:not(.scroll-btn)').forEach(a => {
a.addEventListener('click', function(e) {
const id = this.getAttribute('href').replace('#', '');
if (id && document.getElementById(id)) {
e.preventDefault();
smoothScroll(id);
}
});
});
// ── Nav scroll shadow ──
const mainNav = document.getElementById('main-nav');
window.addEventListener('scroll', () => {
mainNav.classList.toggle('scrolled', window.scrollY > 40);
}, { passive: true });
// ── Fade-in observer ──
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } });
}, { threshold: 0.08 });
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
window.addEventListener('load', () => {
document.querySelectorAll('#hero .fade-in').forEach(el => el.classList.add('visible'));
});
// ── Hamburger ──
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('nav-links');
hamburger.addEventListener('click', () => {
const open = navLinks.classList.toggle('open');
hamburger.classList.toggle('open', open);
hamburger.setAttribute('aria-expanded', open);
});
navLinks.querySelectorAll('a').forEach(a => a.addEventListener('click', () => {
navLinks.classList.remove('open');
hamburger.classList.remove('open');
hamburger.setAttribute('aria-expanded', 'false');
}));
// ── FAQ accordion ──
document.querySelectorAll('.faq-question').forEach((btn, i, all) => {
btn.addEventListener('click', () => {
const item = btn.closest('.faq-item');
const isOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item').forEach(fi => {
fi.classList.remove('open');
fi.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
});
if (!isOpen) { item.classList.add('open'); btn.setAttribute('aria-expanded', 'true'); }
});
btn.addEventListener('keydown', (e) => {
if (e.key === 'ArrowDown') { e.preventDefault(); all[Math.min(i+1, all.length-1)].focus(); }
if (e.key === 'ArrowUp') { e.preventDefault(); all[Math.max(i-1, 0)].focus(); }
if (e.key === 'Home') { e.preventDefault(); all[0].focus(); }
if (e.key === 'End') { e.preventDefault(); all[all.length-1].focus(); }
});
});
</script>
</body>
</html>0 views