Pages Hard

Coworking — Maker Space Landing

A gritty, technical landing page for a members-run fabrication lab, built on a slate-and-electric-yellow maker palette with monospace accents. It pairs a hero with a live machine-status panel, a badge-gated equipment showcase, a filterable workshop schedule with live seat counts, animated monthly/yearly membership tiers, a safety and training section with a member badge card and QR unlock, a community project wall, and an email day-pass CTA with validation.

Open in Lab

html css vanilla-js

Targets: JS HTML

Code

:root {
  /* Maker / hardware-lab palette override */
  --slate: #1f2530;
  --slate-d: #161b23;
  --slate-l: #2a313e;
  --steel: #3a4150;
  --steel-2: #565f70;
  --yellow: #ffe000;
  --yellow-d: #d9be00;
  --yellow-glow: rgba(255, 224, 0, 0.18);

  --bg: #1a1f29;
  --surface: #232a36;
  --surface-2: #2b3340;
  --ink: #f2f4f8;
  --ink-2: #c3c9d4;
  --muted: #8b93a3;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);

  --ok: #38d39f;
  --warn: #ffb020;
  --danger: #ff5a47;
  --free: #38d39f;
  --occupied: #ff5a47;
  --reserved: #ffb020;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  --sh-1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sh-2: 0 18px 50px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.02em; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

.wrap { width: min(1180px, 92vw); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--yellow); color: var(--slate); font-weight: 700;
  padding: 10px 16px; border-radius: var(--r-sm); transition: top 0.2s;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em;
  padding: 11px 20px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  transition: transform 0.12s ease, background 0.18s, box-shadow 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--lg { padding: 14px 26px; font-size: 0.98rem; }
.btn--block { width: 100%; }

.btn--solid {
  background: var(--yellow); color: var(--slate); border-color: var(--yellow);
}
.btn--solid:hover { background: var(--yellow-d); box-shadow: 0 0 0 4px var(--yellow-glow); }

.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { color: var(--ink); }

.btn--wire {
  background: transparent; color: var(--ink); border-color: var(--line-2);
}
.btn--wire:hover { border-color: var(--yellow); color: var(--yellow); }

.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--yellow); text-transform: uppercase;
}
.kicker__sq { width: 8px; height: 8px; background: var(--yellow); display: inline-block; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(26, 31, 41, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s, background 0.25s;
}
.nav.is-scrolled { box-shadow: var(--sh-1); background: rgba(22, 27, 35, 0.95); }
.nav__inner { display: flex; align-items: center; gap: 18px; height: 66px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--yellow); display: grid; place-items: center;
  position: relative; flex: none;
}
.brand__bolt {
  width: 11px; height: 16px; background: var(--slate);
  clip-path: polygon(55% 0, 0 58%, 42% 58%, 30% 100%, 100% 38%, 55% 38%);
}
.brand__text { font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; }
.brand__text b { color: var(--yellow); }
.brand__tag { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-left: 2px; }

.nav__links { display: flex; gap: 26px; margin-left: 14px; }
.nav__links a {
  font-size: 0.9rem; font-weight: 500; color: var(--ink-2);
  position: relative; padding: 4px 0; transition: color 0.18s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--yellow); transition: width 0.22s ease;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }

.nav__cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.status-dot {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  color: var(--ok); letter-spacing: 0.06em;
}
.status-dot__led {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(56, 211, 159, 0.6); animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(56, 211, 159, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(56, 211, 159, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 211, 159, 0); }
}

.nav__burger {
  display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px;
  align-items: center; justify-content: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); margin-left: auto;
}
.nav__burger span { width: 18px; height: 2px; background: var(--ink); transition: 0.25s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 0 18px;
  border-top: 1px solid var(--line);
}
.mobile-nav a {
  padding: 12px 4px; font-weight: 600; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-child { border: none; margin-top: 8px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 5vw, 70px); overflow: hidden; }
.hero__grid-bg {
  position: absolute; inset: 0; z-index: 0; 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(ellipse 80% 70% at 60% 30%, #000 30%, transparent 80%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.3rem, 5.5vw, 4rem); font-weight: 800; margin: 16px 0 18px;
}
.hl { color: var(--yellow); position: relative; }
.hero__lede { color: var(--ink-2); font-size: clamp(1rem, 1.4vw, 1.18rem); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 34px; }
.play { font-size: 1.3rem; line-height: 0; }

.hero__stats { display: flex; gap: clamp(20px, 4vw, 44px); margin: 0; }
.hero__stats div { display: flex; flex-direction: column; }
.hero__stats dt {
  font-family: var(--mono); font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700; color: var(--ink);
}
.hero__stats dd { margin: 0; font-size: 0.8rem; color: var(--muted); }

/* hero status panel */
.hero__panel {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--sh-2); position: relative;
}
.hero__panel::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-lg);
  border-top: 2px solid var(--yellow); pointer-events: none; opacity: 0.7;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px dashed var(--line-2);
}
.panel__title { font-family: var(--mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; }
.panel__live {
  font-family: var(--mono); font-size: 0.68rem; color: var(--danger);
  display: inline-flex; align-items: center; gap: 6px;
}
.blip { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); animation: pulse-r 1.4s infinite; }
@keyframes pulse-r {
  0%, 100% { opacity: 1; } 50% { opacity: 0.3; }
}

.machines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.machine {
  display: flex; align-items: center; gap: 12px;
  background: var(--slate-d); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 12px; transition: border-color 0.2s, transform 0.2s;
}
.machine:hover { border-color: var(--line-2); transform: translateX(2px); }
.machine__icon { width: 32px; height: 32px; border-radius: 8px; flex: none; background: var(--steel); position: relative; }
.machine__icon::after {
  content: ""; position: absolute; inset: 8px; border: 2px solid var(--yellow); border-radius: 3px;
}
.ic-cnc::after { border-radius: 50%; }
.ic-laser::after { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.ic-elec::after { inset: 9px; border-style: dashed; }
.machine__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.machine__name { font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.machine__meta { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); }
.machine__bar { height: 4px; background: var(--steel); border-radius: 4px; overflow: hidden; margin-top: 3px; }
.machine__bar i { display: block; height: 100%; background: var(--yellow); border-radius: 4px; transition: width 0.6s ease; }

.machine__tag {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 7px; border-radius: 5px; flex: none;
}
.tag-run { background: rgba(255, 90, 71, 0.16); color: var(--occupied); }
.tag-free { background: rgba(56, 211, 159, 0.16); color: var(--free); }
.tag-res { background: rgba(255, 176, 32, 0.16); color: var(--reserved); }

.panel__refresh {
  margin-top: 12px; width: 100%; background: transparent; border: 1px dashed var(--line-2);
  color: var(--ink-2); border-radius: var(--r-sm); padding: 9px; font-size: 0.78rem;
  font-family: var(--mono); transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.panel__refresh:hover { color: var(--yellow); border-color: var(--yellow); }
.panel__refresh-ic { display: inline-block; transition: transform 0.5s; }
.panel__refresh.is-spin .panel__refresh-ic { transform: rotate(360deg); }

/* ---------- Marquee ---------- */
.marquee {
  background: var(--yellow); color: var(--slate); overflow: hidden;
  border-block: 2px solid var(--slate-d); padding: 11px 0;
}
.marquee__track {
  display: inline-flex; align-items: center; gap: 22px; white-space: nowrap;
  font-family: var(--mono); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.08em;
  animation: scroll 28s linear infinite;
}
.marquee__track .dot { font-size: 0.6rem; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: clamp(54px, 8vw, 96px) 0; }
.section--alt { background: var(--slate-d); border-block: 1px solid var(--line); }
.section--dark { background: linear-gradient(160deg, var(--slate-d), #11151c); border-block: 1px solid var(--line); }

.sec-head { max-width: 640px; margin-bottom: 40px; }
.sec-head__num {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--yellow); margin-bottom: 12px;
}
.sec-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; }
.sec-head__sub { color: var(--muted); margin-top: 14px; font-size: 1.02rem; }

/* ---------- Equipment grid ---------- */
.equip-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.equip {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px; transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.equip:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--sh-2); }
.equip__img {
  height: 132px; border-radius: var(--r-md); margin-bottom: 16px; position: relative;
  overflow: hidden;
}
.equip__img::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,0,0,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.18) 1px, transparent 1px);
  background-size: 18px 18px; opacity: 0.5;
}
.equip__chip {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  background: var(--slate-d); color: var(--yellow); padding: 4px 8px; border-radius: 5px;
}
.equip h3 { font-size: 1.12rem; margin-bottom: 8px; }
.equip p { color: var(--ink-2); font-size: 0.9rem; }
.equip__specs { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 7px; }
.equip__specs li { display: flex; justify-content: space-between; font-size: 0.78rem; }
.equip__specs b { font-family: var(--mono); color: var(--muted); font-weight: 600; }
.equip__specs span { color: var(--ink); font-family: var(--mono); }

.grad-1 { background: linear-gradient(135deg, #ff8a3c, #ff5a47); }
.grad-2 { background: linear-gradient(135deg, #4d6bff, #2a313e); }
.grad-3 { background: linear-gradient(135deg, #38d39f, #1c8e6a); }
.grad-4 { background: linear-gradient(135deg, #ffe000, #d98a2b); }

/* ---------- Workshops ---------- */
.ws-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.ws-tab {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 600;
  padding: 8px 16px; border-radius: 30px; background: var(--surface);
  border: 1px solid var(--line-2); color: var(--ink-2); transition: 0.2s;
}
.ws-tab:hover { color: var(--ink); border-color: var(--yellow); }
.ws-tab.is-active { background: var(--yellow); color: var(--slate); border-color: var(--yellow); }

.ws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ws {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.2s, border-color 0.2s; animation: pop 0.35s ease both;
}
.ws:hover { transform: translateY(-3px); border-color: var(--line-2); }
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } }
.ws__top { display: flex; align-items: center; justify-content: space-between; }
.ws__lvl {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 8px; border-radius: 5px;
}
.lvl-intro { background: rgba(56,211,159,0.16); color: var(--ok); }
.lvl-cert { background: var(--yellow-glow); color: var(--yellow); }
.lvl-adv { background: rgba(255,90,71,0.16); color: var(--danger); }
.ws__seats { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.ws h3 { font-size: 1.05rem; }
.ws__desc { font-size: 0.85rem; color: var(--ink-2); flex: 1; }
.ws__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.ws__when { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-2); }
.ws__btn {
  background: transparent; border: 1px solid var(--line-2); color: var(--ink);
  font-size: 0.74rem; font-weight: 700; padding: 6px 13px; border-radius: var(--r-sm); transition: 0.2s;
}
.ws__btn:hover { background: var(--yellow); color: var(--slate); border-color: var(--yellow); }
.ws__btn.is-full { opacity: 0.5; pointer-events: none; }

/* ---------- Membership ---------- */
.bill-toggle { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 34px; }
.bill-toggle__label { font-weight: 600; font-size: 0.92rem; transition: 0.2s; }
.bill-toggle__label em { font-style: normal; font-family: var(--mono); font-size: 0.72rem; color: var(--yellow); }
.bill-toggle__label.is-dim { color: var(--muted); }
.switch {
  width: 50px; height: 28px; border-radius: 30px; background: var(--surface-2);
  border: 1px solid var(--line-2); position: relative; transition: background 0.2s;
}
.switch__knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--yellow); transition: transform 0.22s ease;
}
.switch[aria-checked="true"] { background: var(--slate-d); }
.switch[aria-checked="true"] .switch__knob { transform: translateX(22px); }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.tier {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 22px; position: relative; transition: transform 0.22s, border-color 0.22s;
}
.tier:hover { transform: translateY(-4px); border-color: var(--line-2); }
.tier--feat {
  border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow), var(--sh-2);
  background: linear-gradient(180deg, #2b3340, var(--surface));
}
.tier__ribbon {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--yellow); color: var(--slate); font-family: var(--mono);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; padding: 4px 12px; border-radius: 20px;
}
.tier__name { font-size: 1.3rem; font-weight: 800; }
.tier__desc { color: var(--muted); font-size: 0.86rem; margin: 6px 0 18px; }
.tier__price { display: flex; align-items: flex-end; gap: 2px; margin-bottom: 18px; }
.tier__price .cur { font-size: 1.1rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.tier__price .amt { font-family: var(--mono); font-size: 2.6rem; font-weight: 700; line-height: 1; }
.tier__price .per { font-size: 0.86rem; color: var(--muted); margin-bottom: 6px; margin-left: 4px; }
.tier__feats { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.tier__feats li { position: relative; padding-left: 24px; font-size: 0.88rem; color: var(--ink-2); }
.tier__feats li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; color: var(--yellow); font-weight: 800;
}
.tier__feats li.off { color: var(--muted); }
.tier__feats li.off::before { content: "✕"; color: var(--steel-2); }

/* ---------- Safety ---------- */
.safe { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.safe__lede { color: var(--ink-2); margin: 16px 0 24px; font-size: 1.04rem; max-width: 50ch; }
.safe__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.safe__list li { display: flex; align-items: center; gap: 14px; font-size: 0.95rem; color: var(--ink); }
.safe__ic {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--yellow); color: var(--yellow); border-radius: 8px;
  font-family: var(--mono); font-weight: 700; font-size: 0.9rem;
}

.badge-card {
  background: linear-gradient(155deg, var(--slate-l), var(--slate-d));
  border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 22px;
  box-shadow: var(--sh-2); position: relative; overflow: hidden;
}
.badge-card::before {
  content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px;
  background: radial-gradient(circle, var(--yellow-glow), transparent 70%);
}
.badge-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.badge-card__chip {
  width: 38px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, var(--yellow), var(--yellow-d));
  position: relative;
}
.badge-card__chip::after {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(31,37,48,0.4); border-radius: 3px;
}
.badge-card__lvl { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; color: var(--yellow); letter-spacing: 0.08em; }
.badge-card__name { font-size: 1.3rem; font-weight: 800; }
.badge-card__id { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.badge-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0; }
.badge-card__badges span {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line-2);
  color: var(--ink-2); padding: 4px 8px; border-radius: 5px;
}
.badge-card__foot { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px dashed var(--line-2); font-size: 0.78rem; color: var(--muted); }
.qr {
  width: 44px; height: 44px; flex: none; border-radius: 6px; background: #fff;
  background-image:
    linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%),
    linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%);
  background-size: 11px 11px; background-position: 0 0, 5.5px 5.5px;
  border: 3px solid #fff;
}

/* ---------- Projects ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.proj {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer;
}
.proj::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(rgba(0,0,0,0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.2) 1px, transparent 1px);
  background-size: 20px 20px; opacity: 0.4;
}
.proj__cat {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  background: rgba(22,27,35,0.85); color: var(--yellow); padding: 4px 8px; border-radius: 5px;
}
.proj__over {
  position: relative; z-index: 2; padding: 16px;
  background: linear-gradient(transparent, rgba(17,21,28,0.92) 65%);
  transform: translateY(28%); opacity: 0.92; transition: transform 0.3s ease, opacity 0.3s;
}
.proj:hover .proj__over, .proj:focus-within .proj__over { transform: translateY(0); opacity: 1; }
.proj__over h3 { font-size: 1.06rem; color: #fff; }
.proj__over p { font-size: 0.8rem; color: var(--ink-2); margin-top: 6px; }

/* ---------- CTA ---------- */
.cta { padding: clamp(54px, 8vw, 90px) 0; background: var(--yellow); color: var(--slate); position: relative; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(31,37,48,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,37,48,0.07) 1px, transparent 1px);
  background-size: 40px 40px;
}
.cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 0.85fr; gap: 40px; align-items: center; }
.cta .kicker { color: var(--slate); }
.cta .kicker__sq { background: var(--slate); }
.cta h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 800; margin: 14px 0 12px; }
.cta__copy p { color: rgba(31,37,48,0.78); max-width: 42ch; }
.cta__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta__form input {
  flex: 1; min-width: 200px; padding: 14px 16px; border-radius: var(--r-sm);
  border: 1.5px solid var(--slate); background: #fff; color: var(--slate);
  font-size: 0.95rem; font-family: var(--mono);
}
.cta__form input::placeholder { color: var(--steel-2); }
.cta__form input:focus-visible { outline-color: var(--slate); }
.cta__form .btn--solid { background: var(--slate); color: var(--yellow); border-color: var(--slate); }
.cta__form .btn--solid:hover { background: var(--slate-d); box-shadow: 0 0 0 4px rgba(31,37,48,0.18); }
.cta__err { flex-basis: 100%; font-family: var(--mono); font-size: 0.8rem; font-weight: 700; color: var(--danger); }

/* ---------- Footer ---------- */
.footer { background: var(--slate-d); border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 60px) 0 24px; }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer__brand p { color: var(--muted); font-size: 0.86rem; margin: 14px 0 12px; max-width: 32ch; }
.footer__brand .brand { margin-bottom: 4px; }
.status-dot--foot { color: var(--muted); font-size: 0.72rem; }
.status-dot--foot .status-dot__led { background: var(--ok); }
.footer__col h4 { font-size: 0.78rem; font-family: var(--mono); letter-spacing: 0.1em; color: var(--ink); margin-bottom: 14px; text-transform: uppercase; }
.footer__col a { display: block; padding: 5px 0; color: var(--ink-2); font-size: 0.88rem; transition: color 0.18s; }
.footer__col a:hover { color: var(--yellow); }
.footer__bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 0.78rem; color: var(--muted);
}
.footer__mono { font-family: var(--mono); color: var(--yellow); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 24px);
  background: var(--slate-d); color: var(--ink); border: 1px solid var(--yellow);
  border-left-width: 4px; padding: 13px 18px; border-radius: var(--r-md);
  font-size: 0.88rem; font-weight: 500; box-shadow: var(--sh-2); z-index: 300;
  opacity: 0; pointer-events: none; transition: opacity 0.28s, transform 0.28s; max-width: 90vw;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__cta .btn--ghost, .nav__cta .status-dot { display: none; }
  .nav__burger { display: flex; }
  .nav__cta { display: none; }
  .hero__inner { grid-template-columns: 1fr; }
  .equip-grid, .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .ws-grid, .tiers { grid-template-columns: repeat(2, 1fr); }
  .safe, .cta__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .wrap { width: 90vw; }
  .nav__inner { height: 58px; }
  .brand__tag { display: none; }
  .hero { padding-top: 32px; }
  .hero__stats { gap: 22px; flex-wrap: wrap; }
  .equip-grid, .ws-grid, .tiers, .proj-grid, .footer__inner { grid-template-columns: 1fr; }
  .tier--feat { order: -1; }
  .cta__form input { min-width: 0; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
  .sec-head { margin-bottom: 28px; }
}

/* ============================================================
   FORGEWORKS — Maker Space landing
   Vanilla JS. No external libraries.
   ============================================================ */
(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("is-on");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("is-on");
    }, 2600);
  }

  /* ---------- smooth-scroll for in-page anchors ---------- */
  document.querySelectorAll('a[href^="#"]').forEach(function (a) {
    a.addEventListener("click", function (e) {
      var id = a.getAttribute("href");
      if (id.length < 2) return;
      var target = document.querySelector(id);
      if (!target) return;
      e.preventDefault();
      target.scrollIntoView({ behavior: "smooth", block: "start" });
      closeMobile();
    });
  });

  /* ---------- data-toast triggers ---------- */
  document.querySelectorAll("[data-toast]").forEach(function (el) {
    el.addEventListener("click", function () {
      toast(el.getAttribute("data-toast"));
    });
  });

  /* ---------- nav: scrolled shadow ---------- */
  var nav = document.getElementById("nav");
  function onScroll() {
    if (nav) nav.classList.toggle("is-scrolled", window.scrollY > 8);
  }
  window.addEventListener("scroll", onScroll, { passive: true });
  onScroll();

  /* ---------- mobile menu ---------- */
  var burger = document.getElementById("burger");
  var mobileNav = document.getElementById("mobileNav");
  function closeMobile() {
    if (!burger || !mobileNav) return;
    burger.setAttribute("aria-expanded", "false");
    mobileNav.hidden = true;
  }
  if (burger && mobileNav) {
    burger.addEventListener("click", function () {
      var open = burger.getAttribute("aria-expanded") === "true";
      burger.setAttribute("aria-expanded", String(!open));
      mobileNav.hidden = open;
    });
  }

  /* ---------- live machine status panel ---------- */
  var machineList = document.getElementById("machineList");
  var refreshBtn = document.getElementById("refreshBtn");

  var fleet = [
    { name: "Prusa XL · Bay 01", icon: "ic-print", metaRun: "PETG · layer 184/620", metaFree: "spool loaded · cleared" },
    { name: "Shapeoko CNC · Bay 04", icon: "ic-cnc", metaRun: "facing pass · 12%", metaFree: "spindle idle · cleared" },
    { name: "Glowforge Pro · Bay 06", icon: "ic-laser", metaRun: "cut 3/8 · 6mm ply", metaFree: "lens clean · ready", metaRes: "booked 14:00 · M. Okafor" },
    { name: "Electronics Bench · 09", icon: "ic-elec", metaRun: "reflow oven · 218°C", metaFree: "bench wiped · stocked" }
  ];
  var states = [
    { key: "running", tag: "RUNNING", cls: "tag-run", bar: true },
    { key: "free", tag: "FREE", cls: "tag-free", bar: false },
    { key: "reserved", tag: "RESERVED", cls: "tag-res", bar: false }
  ];

  function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; }

  function renderFleet(first) {
    if (!machineList) return;
    machineList.innerHTML = "";
    var anyRunning = false;
    fleet.forEach(function (m, i) {
      // keep first render deterministic-ish but varied
      var st = first
        ? states[i % states.length]
        : pick(states);
      // reserved only valid where a reserved meta exists
      if (st.key === "reserved" && !m.metaRes) st = states[1];
      var meta = st.key === "running" ? m.metaRun
        : st.key === "reserved" ? m.metaRes
        : m.metaFree;
      if (st.key === "running") anyRunning = true;

      var li = document.createElement("li");
      li.className = "machine";
      li.setAttribute("data-state", st.key);
      var bar = st.bar
        ? '<span class="machine__bar"><i style="width:' + (15 + Math.floor(Math.random() * 80)) + '%"></i></span>'
        : "";
      li.innerHTML =
        '<span class="machine__icon ' + m.icon + '" aria-hidden="true"></span>' +
        '<span class="machine__body">' +
        '<span class="machine__name">' + m.name + "</span>" +
        '<span class="machine__meta">' + meta + "</span>" +
        bar +
        "</span>" +
        '<span class="machine__tag ' + st.cls + '">' + st.tag + "</span>";
      machineList.appendChild(li);
    });
    return anyRunning;
  }
  renderFleet(true);

  if (refreshBtn) {
    refreshBtn.addEventListener("click", function () {
      refreshBtn.classList.add("is-spin");
      setTimeout(function () { refreshBtn.classList.remove("is-spin"); }, 520);
      var running = renderFleet(false);
      toast(running ? "Floor synced — machines active now." : "Floor synced — all bays free.");
    });
  }

  /* ---------- workshops (data-driven + filter) ---------- */
  var wsGrid = document.getElementById("wsGrid");
  var workshops = [
    { title: "3D Printing Sign-off", level: "intro", lvlTxt: "INTRO", when: "Tue · 18:30 · 90m", seats: 4, badge: "Print badge" },
    { title: "Fusion 360 → CNC", level: "cert", lvlTxt: "CERT", when: "Wed · 18:00 · 3h", seats: 2, badge: "CNC badge" },
    { title: "Laser Cutter Safety", level: "cert", lvlTxt: "CERT", when: "Thu · 19:00 · 2h", seats: 6, badge: "Laser badge" },
    { title: "SMD Soldering Lab", level: "intro", lvlTxt: "INTRO", when: "Sat · 11:00 · 2h", seats: 0, badge: "Solder badge" },
    { title: "5-Axis Toolpaths", level: "adv", lvlTxt: "ADV", when: "Sat · 14:00 · 4h", seats: 3, badge: "CNC pro" },
    { title: "KiCad to PCB Mill", level: "adv", lvlTxt: "ADV", when: "Sun · 13:00 · 3h", seats: 5, badge: "Fab pro" }
  ];

  function lvlClass(l) {
    return l === "intro" ? "lvl-intro" : l === "cert" ? "lvl-cert" : "lvl-adv";
  }

  function renderWorkshops(level) {
    if (!wsGrid) return;
    wsGrid.innerHTML = "";
    var list = workshops.filter(function (w) {
      return level === "all" || w.level === level;
    });
    if (!list.length) {
      wsGrid.innerHTML = '<p class="ws__empty" style="color:var(--muted);font-family:var(--mono);font-size:.85rem">No sessions on this track this week — check back soon.</p>';
      return;
    }
    list.forEach(function (w, i) {
      var full = w.seats <= 0;
      var card = document.createElement("article");
      card.className = "ws";
      card.style.animationDelay = (i * 45) + "ms";
      card.innerHTML =
        '<div class="ws__top">' +
        '<span class="ws__lvl ' + lvlClass(w.level) + '">' + w.lvlTxt + "</span>" +
        '<span class="ws__seats">' + (full ? "waitlist" : w.seats + " seats left") + "</span>" +
        "</div>" +
        "<h3>" + w.title + "</h3>" +
        '<p class="ws__desc">Unlocks the <b>' + w.badge + "</b> on pass. Bring a laptop; PPE provided.</p>" +
        '<div class="ws__foot">' +
        '<span class="ws__when">' + w.when + "</span>" +
        '<button class="ws__btn' + (full ? " is-full" : "") + '" type="button">' +
        (full ? "Full" : "Reserve") + "</button>" +
        "</div>";
      var btn = card.querySelector(".ws__btn");
      if (!full) {
        btn.addEventListener("click", function () {
          w.seats -= 1;
          toast("Seat reserved · " + w.title + " · " + w.when);
          renderWorkshops(currentLevel);
        });
      }
      wsGrid.appendChild(card);
    });
  }

  var currentLevel = "all";
  var wsTabs = document.querySelectorAll(".ws-tab");
  wsTabs.forEach(function (tab) {
    tab.addEventListener("click", function () {
      wsTabs.forEach(function (t) {
        t.classList.remove("is-active");
        t.setAttribute("aria-selected", "false");
      });
      tab.classList.add("is-active");
      tab.setAttribute("aria-selected", "true");
      currentLevel = tab.getAttribute("data-level");
      renderWorkshops(currentLevel);
    });
  });
  renderWorkshops("all");

  /* ---------- membership billing toggle ---------- */
  var billSwitch = document.getElementById("billSwitch");
  var lblMo = document.getElementById("lblMo");
  var lblYr = document.getElementById("lblYr");
  var amounts = document.querySelectorAll(".tier__price .amt");
  var perEls = document.querySelectorAll(".tier__price .per");

  function setBilling(yearly) {
    billSwitch.setAttribute("aria-checked", String(yearly));
    if (lblMo) lblMo.classList.toggle("is-dim", yearly);
    if (lblYr) lblYr.classList.toggle("is-dim", !yearly);
    amounts.forEach(function (amt) {
      var v = yearly ? amt.getAttribute("data-yr") : amt.getAttribute("data-mo");
      animateNumber(amt, parseInt(v, 10));
    });
    perEls.forEach(function (p) { p.textContent = yearly ? "/mo billed yearly" : "/mo"; });
  }

  function animateNumber(el, target) {
    var start = parseInt(el.textContent.replace(/\D/g, ""), 10) || 0;
    var dur = 320, t0 = performance.now();
    function step(now) {
      var k = Math.min(1, (now - t0) / dur);
      var ease = 1 - Math.pow(1 - k, 3);
      el.textContent = Math.round(start + (target - start) * ease);
      if (k < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }

  if (billSwitch) {
    billSwitch.addEventListener("click", function () {
      var yearly = billSwitch.getAttribute("aria-checked") !== "true";
      setBilling(yearly);
    });
  }

  /* ---------- CTA form validation ---------- */
  var joinForm = document.getElementById("joinForm");
  var joinEmail = document.getElementById("joinEmail");
  var joinErr = document.getElementById("joinErr");
  if (joinForm) {
    joinForm.addEventListener("submit", function (e) {
      e.preventDefault();
      var val = (joinEmail.value || "").trim();
      var ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
      if (!ok) {
        if (joinErr) joinErr.hidden = false;
        joinEmail.focus();
        return;
      }
      if (joinErr) joinErr.hidden = true;
      joinForm.reset();
      toast("Day pass on the way — check " + val + " for your slot.");
    });
    joinEmail.addEventListener("input", function () {
      if (joinErr && !joinErr.hidden) joinErr.hidden = true;
    });
  }

  /* ---------- scroll reveal ---------- */
  var reveals = document.querySelectorAll(".reveal");
  if ("IntersectionObserver" in window) {
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (en.isIntersecting) {
          en.target.classList.add("is-in");
          io.unobserve(en.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    reveals.forEach(function (r) { io.observe(r); });
  } else {
    reveals.forEach(function (r) { r.classList.add("is-in"); });
  }

  /* ---------- hero stat count-up ---------- */
  var statEls = document.querySelectorAll(".hero__stats dt");
  var statTargets = ["42", "318", "1.9k"];
  var started = false;
  function runStats() {
    if (started) return; started = true;
    statEls.forEach(function (el, i) {
      var raw = statTargets[i] || el.textContent;
      var isK = /k$/i.test(raw);
      var target = parseFloat(raw) * (isK ? 1000 : 1);
      var t0 = performance.now(), dur = 1100;
      function step(now) {
        var k = Math.min(1, (now - t0) / dur);
        var ease = 1 - Math.pow(1 - k, 3);
        var cur = target * ease;
        el.textContent = isK ? (cur / 1000).toFixed(1) + "k" : Math.round(cur);
        if (k < 1) requestAnimationFrame(step);
        else el.textContent = raw;
      }
      requestAnimationFrame(step);
    });
  }
  if (statEls.length && "IntersectionObserver" in window) {
    var sio = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) { if (en.isIntersecting) { runStats(); sio.disconnect(); } });
    }, { threshold: 0.4 });
    sio.observe(statEls[0]);
  } else {
    runStats();
  }
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>FORGEWORKS — Maker Space</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;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip" href="#main">Skip to content</a>

  <!-- ============ NAV ============ -->
  <header class="nav" id="nav">
    <div class="wrap nav__inner">
      <a class="brand" href="#top" aria-label="Forgeworks home">
        <span class="brand__mark" aria-hidden="true">
          <span class="brand__bolt"></span>
        </span>
        <span class="brand__text">FORGE<b>WORKS</b></span>
        <span class="brand__tag">// maker lab</span>
      </a>

      <nav class="nav__links" aria-label="Primary">
        <a href="#equipment">Equipment</a>
        <a href="#workshops">Workshops</a>
        <a href="#membership">Membership</a>
        <a href="#safety">Safety</a>
        <a href="#projects">Projects</a>
      </nav>

      <div class="nav__cta">
        <span class="status-dot" id="openStatus" aria-live="polite">
          <span class="status-dot__led" aria-hidden="true"></span>
          <span class="status-dot__txt">OPEN&nbsp;NOW</span>
        </span>
        <a class="btn btn--ghost" href="#membership">Log&nbsp;in</a>
        <a class="btn btn--solid" href="#join" data-toast="Tour request sent — we'll email you a slot.">Book a tour</a>
      </div>

      <button class="nav__burger" id="burger" aria-label="Open menu" aria-expanded="false" aria-controls="mobileNav">
        <span></span><span></span><span></span>
      </button>
    </div>

    <div class="mobile-nav" id="mobileNav" hidden>
      <a href="#equipment">Equipment</a>
      <a href="#workshops">Workshops</a>
      <a href="#membership">Membership</a>
      <a href="#safety">Safety</a>
      <a href="#projects">Projects</a>
      <a class="btn btn--solid btn--block" href="#join" data-toast="Tour request sent — we'll email you a slot.">Book a tour</a>
    </div>
  </header>

  <main id="main">
    <a id="top"></a>

    <!-- ============ HERO ============ -->
    <section class="hero" aria-labelledby="hero-h">
      <div class="hero__grid-bg" aria-hidden="true"></div>
      <div class="wrap hero__inner">
        <div class="hero__copy reveal">
          <p class="kicker"><span class="kicker__sq"></span>FAB LAB · DISTRICT 7 · 24/7 ACCESS</p>
          <h1 id="hero-h">Build the thing.<br /><span class="hl">We have the machines.</span></h1>
          <p class="hero__lede">
            A members-run fabrication lab stocked with industrial 3D printers, CNC routers,
            laser cutters and a full electronics bench. Get trained, get badged, get making —
            no garage required.
          </p>

          <div class="hero__actions">
            <a class="btn btn--solid btn--lg" href="#membership">View membership</a>
            <a class="btn btn--wire btn--lg" href="#equipment">
              <span class="play" aria-hidden="true">›</span> Tour the floor
            </a>
          </div>

          <dl class="hero__stats">
            <div><dt>42</dt><dd>machines on floor</dd></div>
            <div><dt>318</dt><dd>active makers</dd></div>
            <div><dt>1.9k</dt><dd>projects shipped</dd></div>
          </dl>
        </div>

        <div class="hero__panel reveal" aria-label="Live machine status">
          <div class="panel__head">
            <span class="panel__title">MACHINE&nbsp;STATUS</span>
            <span class="panel__live"><span class="blip"></span>live</span>
          </div>
          <ul class="machines" id="machineList">
            <li class="machine" data-state="running">
              <span class="machine__icon ic-print" aria-hidden="true"></span>
              <span class="machine__body">
                <span class="machine__name">Prusa XL · Bay&nbsp;01</span>
                <span class="machine__meta">PETG · layer 184/620</span>
                <span class="machine__bar"><i style="width:30%"></i></span>
              </span>
              <span class="machine__tag tag-run">RUNNING</span>
            </li>
            <li class="machine" data-state="free">
              <span class="machine__icon ic-cnc" aria-hidden="true"></span>
              <span class="machine__body">
                <span class="machine__name">Shapeoko CNC · Bay&nbsp;04</span>
                <span class="machine__meta">spindle idle · cleared</span>
              </span>
              <span class="machine__tag tag-free">FREE</span>
            </li>
            <li class="machine" data-state="reserved">
              <span class="machine__icon ic-laser" aria-hidden="true"></span>
              <span class="machine__body">
                <span class="machine__name">Glowforge Pro · Bay&nbsp;06</span>
                <span class="machine__meta">booked 14:00 · M. Okafor</span>
              </span>
              <span class="machine__tag tag-res">RESERVED</span>
            </li>
            <li class="machine" data-state="running">
              <span class="machine__icon ic-elec" aria-hidden="true"></span>
              <span class="machine__body">
                <span class="machine__name">Electronics Bench · 09</span>
                <span class="machine__meta">reflow oven · 218°C</span>
                <span class="machine__bar"><i style="width:74%"></i></span>
              </span>
              <span class="machine__tag tag-run">RUNNING</span>
            </li>
          </ul>
          <button class="panel__refresh" id="refreshBtn" type="button">
            <span class="panel__refresh-ic" aria-hidden="true">⟳</span> refresh status
          </button>
        </div>
      </div>
    </section>

    <!-- ============ MARQUEE ============ -->
    <div class="marquee" aria-hidden="true">
      <div class="marquee__track">
        <span>3D&nbsp;PRINT</span><span class="dot">●</span>
        <span>CNC&nbsp;MILLING</span><span class="dot">●</span>
        <span>LASER&nbsp;CUT</span><span class="dot">●</span>
        <span>PCB&nbsp;FAB</span><span class="dot">●</span>
        <span>WOODSHOP</span><span class="dot">●</span>
        <span>WELDING</span><span class="dot">●</span>
        <span>TEXTILES</span><span class="dot">●</span>
        <span>3D&nbsp;PRINT</span><span class="dot">●</span>
        <span>CNC&nbsp;MILLING</span><span class="dot">●</span>
        <span>LASER&nbsp;CUT</span><span class="dot">●</span>
        <span>PCB&nbsp;FAB</span><span class="dot">●</span>
        <span>WOODSHOP</span><span class="dot">●</span>
        <span>WELDING</span><span class="dot">●</span>
        <span>TEXTILES</span><span class="dot">●</span>
      </div>
    </div>

    <!-- ============ EQUIPMENT ============ -->
    <section class="section" id="equipment" aria-labelledby="equip-h">
      <div class="wrap">
        <header class="sec-head reveal">
          <p class="sec-head__num">01 / EQUIPMENT</p>
          <h2 id="equip-h">Industrial gear, member-grade access.</h2>
          <p class="sec-head__sub">Every machine is badge-gated. Scan in, log your run, the lab tracks consumables automatically.</p>
        </header>

        <div class="equip-grid">
          <article class="equip reveal">
            <div class="equip__img grad-1"><span class="equip__chip">×6 units</span></div>
            <h3>FDM &amp; Resin Printers</h3>
            <p>Prusa XL multi-tool, Bambu X1C farm and a Form 4 resin booth for fine detail prototyping.</p>
            <ul class="equip__specs">
              <li><b>Build</b><span>360 × 360 × 360&nbsp;mm</span></li>
              <li><b>Stock</b><span>PLA · PETG · TPU · ABS</span></li>
            </ul>
          </article>

          <article class="equip reveal">
            <div class="equip__img grad-2"><span class="equip__chip">×3 units</span></div>
            <h3>CNC &amp; Routers</h3>
            <p>Shapeoko 5 Pro and a Tormach mill for aluminium, hardwood and tooling jobs up to 4 axes.</p>
            <ul class="equip__specs">
              <li><b>Bed</b><span>1220 × 1220&nbsp;mm</span></li>
              <li><b>Spindle</b><span>2.2&nbsp;kW · 24k&nbsp;rpm</span></li>
            </ul>
          </article>

          <article class="equip reveal">
            <div class="equip__img grad-3"><span class="equip__chip">×2 units</span></div>
            <h3>Laser Cutters</h3>
            <p>120W CO₂ flatbed plus a fiber marker for steel — cut, engrave and etch in one badge swipe.</p>
            <ul class="equip__specs">
              <li><b>Bed</b><span>900 × 600&nbsp;mm</span></li>
              <li><b>Cut</b><span>ply · acrylic · leather</span></li>
            </ul>
          </article>

          <article class="equip reveal">
            <div class="equip__img grad-4"><span class="equip__chip">12 stations</span></div>
            <h3>Electronics Lab</h3>
            <p>Soldering &amp; reflow, scopes, logic analyzers, a PCB mill and a bin wall of through-hole stock.</p>
            <ul class="equip__specs">
              <li><b>Tools</b><span>Hakko · Rigol · JLC mill</span></li>
              <li><b>Bench</b><span>ESD-safe · 12 seats</span></li>
            </ul>
          </article>
        </div>
      </div>
    </section>

    <!-- ============ WORKSHOPS ============ -->
    <section class="section section--alt" id="workshops" aria-labelledby="work-h">
      <div class="wrap">
        <header class="sec-head reveal">
          <p class="sec-head__num">02 / WORKSHOPS</p>
          <h2 id="work-h">Train up. Earn machine badges.</h2>
          <p class="sec-head__sub">Hands-on cohorts run weekly. Pass the sign-off and the badge unlocks the gear for life.</p>
        </header>

        <div class="ws-tabs reveal" role="tablist" aria-label="Workshop level">
          <button class="ws-tab is-active" role="tab" aria-selected="true" data-level="all">All</button>
          <button class="ws-tab" role="tab" aria-selected="false" data-level="intro">Intro</button>
          <button class="ws-tab" role="tab" aria-selected="false" data-level="cert">Certification</button>
          <button class="ws-tab" role="tab" aria-selected="false" data-level="adv">Advanced</button>
        </div>

        <div class="ws-grid" id="wsGrid">
          <!-- injected by JS -->
        </div>
      </div>
    </section>

    <!-- ============ MEMBERSHIP ============ -->
    <section class="section" id="membership" aria-labelledby="mem-h">
      <div class="wrap">
        <header class="sec-head reveal">
          <p class="sec-head__num">03 / MEMBERSHIP</p>
          <h2 id="mem-h">Pick your machine access.</h2>
          <p class="sec-head__sub">Switch monthly. Cancel anytime. All tiers include the lounge, wifi and the bin wall.</p>
        </header>

        <div class="bill-toggle reveal">
          <span class="bill-toggle__label" id="lblMo">Monthly</span>
          <button class="switch" id="billSwitch" role="switch" aria-checked="false" aria-labelledby="lblMo lblYr">
            <span class="switch__knob"></span>
          </button>
          <span class="bill-toggle__label is-dim" id="lblYr">Yearly <em>−2&nbsp;mo</em></span>
        </div>

        <div class="tiers">
          <article class="tier reveal">
            <h3 class="tier__name">Hobbyist</h3>
            <p class="tier__desc">Evenings &amp; weekends on the maker floor.</p>
            <p class="tier__price"><span class="cur">$</span><b class="amt" data-mo="39" data-yr="33">39</b><span class="per">/mo</span></p>
            <ul class="tier__feats">
              <li>Printers + electronics bench</li>
              <li>8 machine-hours / week</li>
              <li>Storage cubby</li>
              <li class="off">CNC &amp; laser access</li>
            </ul>
            <button class="btn btn--wire btn--block" data-toast="Hobbyist plan added — finish at checkout.">Choose Hobbyist</button>
          </article>

          <article class="tier tier--feat reveal">
            <span class="tier__ribbon">MOST POPULAR</span>
            <h3 class="tier__name">Maker</h3>
            <p class="tier__desc">Full floor, all machines, 24/7 badge.</p>
            <p class="tier__price"><span class="cur">$</span><b class="amt" data-mo="89" data-yr="74">89</b><span class="per">/mo</span></p>
            <ul class="tier__feats">
              <li>Every machine on the floor</li>
              <li>Unlimited machine-hours</li>
              <li>24/7 badge access</li>
              <li>2 free workshop seats / mo</li>
            </ul>
            <button class="btn btn--solid btn--block" data-toast="Maker plan added — finish at checkout.">Choose Maker</button>
          </article>

          <article class="tier reveal">
            <h3 class="tier__name">Pro&nbsp;Shop</h3>
            <p class="tier__desc">For small product teams &amp; studios.</p>
            <p class="tier__price"><span class="cur">$</span><b class="amt" data-mo="249" data-yr="208">249</b><span class="per">/mo</span></p>
            <ul class="tier__feats">
              <li>4 seats + dedicated bench</li>
              <li>Priority machine booking</li>
              <li>Locked project storage</li>
              <li>Bulk material account</li>
            </ul>
            <button class="btn btn--wire btn--block" data-toast="Pro Shop enquiry sent — sales will call.">Contact sales</button>
          </article>
        </div>
      </div>
    </section>

    <!-- ============ SAFETY ============ -->
    <section class="section section--dark" id="safety" aria-labelledby="safe-h">
      <div class="wrap safe">
        <div class="safe__copy reveal">
          <p class="sec-head__num">04 / SAFETY &amp; TRAINING</p>
          <h2 id="safe-h">No badge, no run. Every time.</h2>
          <p class="safe__lede">
            Machines stay locked until you've passed the sign-off. Two safety officers are on the
            floor during staffed hours, and every bay has an e-stop within reach.
          </p>
          <ul class="safe__list">
            <li><span class="safe__ic">①</span> Mandatory floor induction before first run</li>
            <li><span class="safe__ic">②</span> Per-machine badge with practical sign-off</li>
            <li><span class="safe__ic">③</span> PPE wall: glasses, gloves, hearing, respirators</li>
            <li><span class="safe__ic">④</span> Logged runs &amp; buddy rule on CNC / laser</li>
          </ul>
        </div>
        <div class="safe__card reveal">
          <div class="badge-card">
            <div class="badge-card__top">
              <span class="badge-card__chip" aria-hidden="true"></span>
              <span class="badge-card__lvl">MEMBER · LVL 3</span>
            </div>
            <p class="badge-card__name">A. Reyes-Mendoza</p>
            <p class="badge-card__id">#FW-02841 · since 2024</p>
            <div class="badge-card__badges">
              <span>3D&nbsp;PRINT</span><span>LASER</span><span>CNC</span><span>SOLDER</span>
            </div>
            <div class="badge-card__foot">
              <span class="qr" aria-hidden="true"></span>
              <span>Scan at any bay to unlock</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ============ PROJECTS ============ -->
    <section class="section section--alt" id="projects" aria-labelledby="proj-h">
      <div class="wrap">
        <header class="sec-head reveal">
          <p class="sec-head__num">05 / COMMUNITY</p>
          <h2 id="proj-h">Made on this floor.</h2>
          <p class="sec-head__sub">A wall of recent builds from the Forgeworks crew. Hover for the spec.</p>
        </header>

        <div class="proj-grid">
          <article class="proj reveal grad-1">
            <span class="proj__cat">CNC · OAK</span>
            <div class="proj__over">
              <h3>Modular Synth Shell</h3>
              <p>Routed white-oak enclosure for a Eurorack build. — J. Park</p>
            </div>
          </article>
          <article class="proj reveal grad-3">
            <span class="proj__cat">3D PRINT · TPU</span>
            <div class="proj__over">
              <h3>Prosthetic Hand v4</h3>
              <p>Open-source assistive device, printed in flex TPU. — Lab Collective</p>
            </div>
          </article>
          <article class="proj reveal grad-2">
            <span class="proj__cat">PCB · SMD</span>
            <div class="proj__over">
              <h3>Soil Sensor Mesh</h3>
              <p>LoRa garden sensors milled &amp; reflowed in-house. — N. Haddad</p>
            </div>
          </article>
          <article class="proj reveal grad-4">
            <span class="proj__cat">LASER · ACRYLIC</span>
            <div class="proj__over">
              <h3>Generative Lamp</h3>
              <p>Stacked acrylic ridges from a noise field. — M. Okafor</p>
            </div>
          </article>
        </div>
      </div>
    </section>

    <!-- ============ CTA ============ -->
    <section class="cta" id="join" aria-labelledby="cta-h">
      <div class="wrap cta__inner reveal">
        <div class="cta__copy">
          <p class="kicker"><span class="kicker__sq"></span>FREE DAY PASS</p>
          <h2 id="cta-h">Come break something.<br />Then build it better.</h2>
          <p>Drop your email for a free induction pass — meet the machines before you commit.</p>
        </div>
        <form class="cta__form" id="joinForm" novalidate>
          <label class="sr-only" for="joinEmail">Email address</label>
          <input id="joinEmail" type="email" placeholder="[email protected]" autocomplete="email" required />
          <button class="btn btn--solid btn--lg" type="submit">Get day pass →</button>
          <p class="cta__err" id="joinErr" role="alert" hidden>Enter a valid email to continue.</p>
        </form>
      </div>
    </section>

    <!-- ============ FOOTER ============ -->
    <footer class="footer">
      <div class="wrap footer__inner">
        <div class="footer__brand">
          <a class="brand" href="#top">
            <span class="brand__mark" aria-hidden="true"><span class="brand__bolt"></span></span>
            <span class="brand__text">FORGE<b>WORKS</b></span>
          </a>
          <p>Unit 7B, Old Steelyard, District 7. Member-run since 2019.</p>
          <span class="status-dot status-dot--foot">
            <span class="status-dot__led" aria-hidden="true"></span>
            <span class="status-dot__txt">Floor open · 06:00–24:00 staffed</span>
          </span>
        </div>
        <nav class="footer__col" aria-label="Lab">
          <h4>Lab</h4>
          <a href="#equipment">Equipment</a>
          <a href="#workshops">Workshops</a>
          <a href="#safety">Safety &amp; training</a>
          <a href="#projects">Member projects</a>
        </nav>
        <nav class="footer__col" aria-label="Join">
          <h4>Join</h4>
          <a href="#membership">Membership tiers</a>
          <a href="#join">Free day pass</a>
          <a href="#join" data-toast="Tour request sent — we'll email you a slot.">Book a tour</a>
          <a href="#membership">Pro Shop teams</a>
        </nav>
        <nav class="footer__col" aria-label="Connect">
          <h4>Connect</h4>
          <a href="#" data-toast="Opening the maker Discord…">Discord</a>
          <a href="#" data-toast="Opening the build log…">Build log</a>
          <a href="#" data-toast="Opening the newsletter…">Newsletter</a>
          <a href="#" data-toast="Opening contact…">Contact</a>
        </nav>
      </div>
      <div class="wrap footer__bar">
        <span>© 2026 Forgeworks Maker Co-op — fictional demo.</span>
        <span class="footer__mono">build · break · iterate</span>
      </div>
    </footer>
  </main>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <script src="script.js"></script>
</body>
</html>

Maker Space Landing

A full multi-section landing page for FORGEWORKS, a fictional members-run fabrication lab. The design leans hard into a hardware-shop aesthetic — a slate base with electric-yellow accents, blueprint grid backdrops, and monospace technical labels — so it reads as gritty and hands-on rather than soft and corporate. The page runs nav, hero, equipment, workshops, membership, safety, projects, CTA and footer, with a scrolling capability marquee and scroll-reveal animations throughout.

The hero ships a live machine-status panel you can re-roll with a refresh button: each bay flips between running, free and reserved states with animated progress bars and a toast summary. The equipment section showcases the printers, CNC, laser and electronics gear as spec cards. Workshops are data-driven — filter by track (intro, certification, advanced), watch live seat counts, and reserve a seat to decrement availability in place. The membership block animates prices between monthly and yearly billing on a toggle, the safety section pairs an induction checklist with a member badge card and QR unlock, and the CTA validates an email before issuing a day pass. Hero stats count up on scroll, and the mobile nav collapses to an accessible hamburger menu.

Everything is vanilla — no frameworks, no build step. Interactions degrade gracefully: a small toast() helper surfaces feedback, an IntersectionObserver drives reveals (with a fallback), and all buttons, switches and inputs are keyboard-usable with visible focus rings and AA-contrast text.

Illustrative UI only — fictional coworking space, not a real booking system.