Pages Medium
Coworking — Corporate Flex Landing
A polished, WeWork-style enterprise coworking landing page in navy, white, and accent green. Built with semantic HTML, CSS, and vanilla JS, it pairs a hero quote form and live desk-occupancy grid with enterprise solution cards, a flexible-terms section, an interactive per-seat cost estimator, a region-filterable locations network, a monthly/annual pricing toggle, trust logos, a closing call to action, and a full footer. Sticky nav, scroll reveal, mobile menu, and toasts complete the experience.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--navy: #11233f;
--navy-d: #0b1729;
--navy-2: #1c3458;
--navy-tint: #f1f4f9;
--green: #19b683;
--green-d: #129a6f;
--green-50: #e7f7f1;
--white: #ffffff;
--bg: #f6f8fb;
--surface: #ffffff;
--ink: #11233f;
--ink-2: #44546c;
--muted: #7a899e;
--line: rgba(17, 35, 63, 0.1);
--line-2: rgba(17, 35, 63, 0.18);
--free: #19b683;
--reserved: #e0a23a;
--occupied: #d4503e;
--ok: #19b683;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--shadow-sm: 0 1px 2px rgba(17, 35, 63, 0.06), 0 4px 12px rgba(17, 35, 63, 0.05);
--shadow-md: 0 8px 30px rgba(17, 35, 63, 0.1);
--shadow-lg: 0 24px 60px rgba(17, 35, 63, 0.16);
--maxw: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.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-link {
position: absolute; left: 12px; top: -48px; z-index: 200;
background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
transition: top .2s;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid rgba(25, 182, 131, 0.55); outline-offset: 2px; border-radius: 6px; }
/* ===== Buttons ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border: 1px solid transparent; border-radius: var(--r-sm);
padding: 12px 20px; font-size: 0.94rem; font-weight: 600;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--green); color: #06311f; box-shadow: 0 6px 18px rgba(25, 182, 131, 0.3); }
.btn--primary:hover { background: var(--green-d); box-shadow: 0 10px 24px rgba(25, 182, 131, 0.36); }
.btn--ghost { background: var(--white); color: var(--navy); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--navy); background: var(--navy-tint); }
.btn--ghost-light { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--ghost-light:hover { background: rgba(255,255,255,0.16); }
.btn--sm { padding: 9px 15px; font-size: 0.86rem; }
.btn--lg { padding: 15px 28px; font-size: 1rem; }
.btn--block { width: 100%; }
.link-quiet { color: var(--ink-2); font-weight: 500; font-size: 0.92rem; }
.link-quiet:hover { color: var(--navy); }
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--green-d); background: var(--green-50);
padding: 6px 12px; border-radius: 100px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(25,182,131,0.2); }
/* ===== Nav ===== */
.nav {
position: sticky; top: 0; z-index: 100;
background: rgba(246, 248, 251, 0.82);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color .25s, box-shadow .25s, background .25s;
}
.nav.is-stuck { border-color: var(--line); box-shadow: var(--shadow-sm); background: rgba(255,255,255,0.9); }
.nav__inner { display: flex; align-items: center; gap: 24px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.12rem; color: var(--navy); }
.brand__mark {
display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
background: var(--navy); color: #fff;
}
.brand__accent { color: var(--green-d); }
.brand--light { color: #fff; }
.brand--light .brand__mark { background: var(--green); color: var(--navy-d); }
.brand--light .brand__accent { color: var(--green); }
.nav__links { display: flex; gap: 6px; margin-left: 8px; }
.nav__links a {
padding: 8px 14px; border-radius: var(--r-sm); font-weight: 500; font-size: 0.94rem; color: var(--ink-2);
transition: background .2s, color .2s;
}
.nav__links a:hover { background: var(--navy-tint); color: var(--navy); }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav__toggle {
display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line-2);
border-radius: var(--r-sm); background: #fff; flex-direction: column; gap: 5px;
align-items: center; justify-content: center;
}
.nav__toggle span { width: 20px; height: 2px; background: var(--navy); border-radius: 2px; transition: .25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
display: flex; flex-direction: column; gap: 4px; padding: 12px 24px 22px;
background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.mobile-menu a:not(.btn) { padding: 12px 8px; font-weight: 600; border-radius: var(--r-sm); }
.mobile-menu a:not(.btn):hover { background: var(--navy-tint); }
.mobile-menu .btn { margin-top: 8px; }
/* ===== Hero ===== */
.hero { padding: 60px 0 72px; position: relative; overflow: hidden; }
.hero::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(900px 420px at 78% -8%, rgba(25,182,131,0.1), transparent 60%),
radial-gradient(700px 380px at 10% 0%, rgba(17,35,63,0.06), transparent 55%);
pointer-events: none;
}
.hero__inner {
position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr;
gap: 56px; align-items: center;
}
.hero__copy h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); margin: 18px 0 16px; color: var(--navy); }
.lede { font-size: 1.12rem; color: var(--ink-2); max-width: 34em; }
.hero__cta { display: flex; gap: 10px; margin: 26px 0 10px; flex-wrap: wrap; }
.hero__cta select, .hero__cta input {
font: inherit; font-size: 0.95rem; padding: 12px 14px; border: 1px solid var(--line-2);
border-radius: var(--r-sm); background: #fff; color: var(--ink); min-width: 0;
}
.hero__cta input { flex: 1; min-width: 200px; }
.hero__cta input:focus, .hero__cta select:focus { border-color: var(--green); }
.hero__note { font-size: 0.86rem; color: var(--muted); }
.hero__note.is-ok { color: var(--green-d); font-weight: 600; }
.hero__note.is-err { color: var(--occupied); font-weight: 600; }
.hero__stats {
list-style: none; margin: 32px 0 0; padding: 24px 0 0; display: grid;
grid-template-columns: repeat(4, 1fr); gap: 18px; border-top: 1px solid var(--line);
}
.hero__stats strong { display: block; font-size: 1.7rem; color: var(--navy); font-weight: 800; }
.hero__stats span { font-size: 0.82rem; color: var(--muted); font-weight: 500; }
/* Hero visual */
.hero__visual { position: relative; }
.photo {
border-radius: var(--r-lg); position: relative; overflow: hidden;
box-shadow: var(--shadow-lg);
}
.photo--hero {
aspect-ratio: 4 / 4.4;
background:
linear-gradient(150deg, rgba(17,35,63,0.18), transparent 50%),
linear-gradient(320deg, #1c3458 0%, #2a4a78 42%, #3f6aa3 100%);
}
.photo--hero::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(180px 180px at 70% 22%, rgba(25,182,131,0.35), transparent 70%),
linear-gradient(transparent 62%, rgba(11,23,41,0.5));
}
.photo--hero::before {
content: ""; position: absolute; left: 8%; bottom: 0; width: 26%; height: 46%;
background: linear-gradient(180deg, #2f6b4d, #1c4733); border-radius: 14px 14px 0 0; opacity: .9;
}
.floatcard {
position: absolute; background: #fff; border: 1px solid var(--line);
border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 14px;
}
.floatcard--occ { left: -22px; bottom: 38px; width: 252px; }
.floatcard--badge {
top: 22px; right: -16px; padding: 10px 14px; font-weight: 700; font-size: 0.82rem;
display: flex; align-items: center; gap: 8px; color: var(--navy);
}
.badge-ok { color: var(--green); font-size: 0.7rem; }
.floatcard__row { display: flex; gap: 12px; margin-bottom: 10px; }
.legend { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--ink-2); font-weight: 600; }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.swatch--free { background: var(--free); }
.swatch--res { background: var(--reserved); }
.swatch--occ { background: var(--occupied); }
.grid-mini { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.grid-mini i {
aspect-ratio: 1; border-radius: 3px; background: var(--occupied); opacity: .9;
transition: transform .2s;
}
.grid-mini i.free { background: var(--free); }
.grid-mini i.res { background: var(--reserved); }
.grid-mini i:hover { transform: scale(1.18); }
.floatcard__foot { margin-top: 10px; font-size: 0.74rem; color: var(--muted); font-weight: 500; }
/* ===== Trust ===== */
.trust { padding: 8px 0 44px; }
.trust__label { text-align: center; font-size: 0.82rem; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.trust__logos {
list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap;
justify-content: center; gap: 14px 38px; align-items: center;
}
.trust__logos li {
font-weight: 800; font-size: 1.08rem; color: var(--navy); letter-spacing: -0.02em;
opacity: 0.42; filter: grayscale(1); transition: opacity .2s, transform .2s;
}
.trust__logos li:hover { opacity: 0.85; transform: translateY(-2px); }
/* ===== Sections ===== */
.section { padding: 78px 0; }
.section__head { max-width: 660px; margin: 0 auto 44px; text-align: center; }
.section__head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 16px 0 12px; color: var(--navy); }
.section__sub { color: var(--ink-2); font-size: 1.05rem; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* Solutions cards */
.solcard {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 28px; position: relative; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.solcard:hover, .solcard:focus-within { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.solcard--featured { background: var(--navy); color: #fff; box-shadow: var(--shadow-lg); }
.solcard--featured h3, .solcard--featured .card-link { color: #fff; }
.solcard--featured p { color: rgba(255,255,255,0.78); }
.solcard__icon {
width: 48px; height: 48px; border-radius: var(--r-sm); display: grid; place-items: center;
background: var(--green-50); color: var(--green-d); margin-bottom: 16px;
}
.solcard--featured .solcard__icon { background: rgba(25,182,131,0.18); color: var(--green); }
.solcard h3 { font-size: 1.25rem; margin-bottom: 8px; color: var(--navy); }
.solcard > p { color: var(--ink-2); font-size: 0.96rem; }
.solcard__tag {
position: absolute; top: 18px; right: 18px; font-size: 0.72rem; font-weight: 700;
background: var(--green); color: var(--navy-d); padding: 4px 10px; border-radius: 100px;
}
.ticks { list-style: none; padding: 0; margin: 16px 0 18px; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 26px; font-size: 0.92rem; color: var(--ink-2); }
.solcard--featured .ticks li { color: rgba(255,255,255,0.85); }
.ticks li::before {
content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px;
border-radius: 50%; background: var(--green-50)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23129a6f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.solcard--featured .ticks li::before { background-color: rgba(25,182,131,0.22); }
.card-link { font-weight: 700; color: var(--green-d); font-size: 0.92rem; display: inline-block; transition: gap .2s; }
.card-link:hover { text-decoration: underline; }
/* ===== Terms ===== */
.terms { background: linear-gradient(180deg, #fff, var(--navy-tint)); }
.terms__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 54px; align-items: center; }
.terms__copy h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 16px 0 12px; color: var(--navy); }
.terms__list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 18px; }
.terms__list li { display: grid; gap: 3px; padding-left: 18px; border-left: 3px solid var(--green); }
.terms__list strong { color: var(--navy); font-size: 1rem; }
.terms__list span { color: var(--ink-2); font-size: 0.94rem; }
.calc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-md); }
.calc h3 { font-size: 1.18rem; color: var(--navy); margin-bottom: 18px; }
.calc label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 0.92rem; color: var(--ink-2); margin-bottom: 10px; }
.calc output { font-size: 1.2rem; font-weight: 800; color: var(--navy); }
.calc input[type="range"] { width: 100%; accent-color: var(--green); height: 6px; }
.calc__toggle, .bill-toggle, .calc__toggle { margin: 18px 0; display: inline-flex; gap: 4px; background: var(--navy-tint); padding: 4px; border-radius: 100px; }
.seg {
border: none; background: transparent; padding: 9px 16px; border-radius: 100px;
font-weight: 600; font-size: 0.88rem; color: var(--ink-2); transition: .2s;
}
.seg.is-active { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.seg .save { color: var(--green-d); font-weight: 700; }
.calc__toggle { display: flex; width: 100%; }
.calc__toggle .seg { flex: 1; }
.calc__result {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
background: var(--navy); color: #fff; border-radius: var(--r-md); padding: 16px 18px; margin: 6px 0 12px;
}
.calc__label { font-size: 0.86rem; color: rgba(255,255,255,0.78); font-weight: 500; }
.calc__amount { font-size: 1.7rem; font-weight: 800; }
.calc__amount small { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.7); }
.calc__fine { font-size: 0.78rem; color: var(--muted); margin-bottom: 16px; }
/* ===== Locations ===== */
.loc-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; }
.chip {
border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
padding: 9px 18px; border-radius: 100px; font-weight: 600; font-size: 0.9rem; transition: .2s;
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.loccard {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column;
}
.loccard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.loccard.is-hidden { display: none; }
.loccard__photo { aspect-ratio: 16/9; position: relative; }
.loccard__city {
position: absolute; top: 12px; left: 12px; background: rgba(11,23,41,0.7); color: #fff;
font-size: 0.74rem; font-weight: 700; padding: 4px 10px; border-radius: 100px; backdrop-filter: blur(4px);
}
.loccard__avail {
position: absolute; bottom: 12px; right: 12px; background: #fff; color: var(--navy);
font-size: 0.74rem; font-weight: 700; padding: 5px 11px; border-radius: 100px; box-shadow: var(--shadow-sm);
display: inline-flex; align-items: center; gap: 6px;
}
.avail-dot { width: 8px; height: 8px; border-radius: 50%; }
.avail-dot.high { background: var(--free); }
.avail-dot.mid { background: var(--reserved); }
.avail-dot.low { background: var(--occupied); }
.loccard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.loccard__body h3 { font-size: 1.1rem; color: var(--navy); }
.loccard__addr { font-size: 0.86rem; color: var(--muted); }
.loccard__meta { display: flex; gap: 14px; margin-top: 6px; font-size: 0.82rem; color: var(--ink-2); flex-wrap: wrap; }
.loccard__meta span { display: inline-flex; align-items: center; gap: 5px; }
.loccard__foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); }
.loccard__from { font-size: 0.84rem; color: var(--ink-2); }
.loccard__from b { color: var(--navy); font-size: 1rem; }
/* ===== Pricing ===== */
.pricing { background: var(--navy-tint); }
.bill-toggle { margin: 22px auto 0; }
.plans .plan {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px;
display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; position: relative;
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.plan--featured { border: 2px solid var(--green); box-shadow: var(--shadow-md); }
.plan h3 { font-size: 1.3rem; color: var(--navy); }
.plan__for { color: var(--muted); font-size: 0.88rem; margin: 4px 0 16px; }
.plan__tag {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: var(--green); color: var(--navy-d); font-size: 0.74rem; font-weight: 700;
padding: 5px 14px; border-radius: 100px;
}
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.plan__price .amt { font-size: 2.3rem; font-weight: 800; color: var(--navy); }
.amt--custom { font-size: 2rem; }
.plan__price .per { color: var(--muted); font-size: 0.88rem; font-weight: 500; }
.plan .ticks { margin-top: 16px; margin-bottom: 22px; }
.plan .btn { margin-top: auto; }
.pricing__fine { text-align: center; color: var(--muted); font-size: 0.84rem; margin-top: 26px; }
/* ===== CTA ===== */
.cta { padding: 70px 0; }
.cta__inner {
background: linear-gradient(120deg, var(--navy-d), var(--navy-2) 78%);
border-radius: var(--r-lg); padding: 48px; display: flex; align-items: center;
justify-content: space-between; gap: 32px; flex-wrap: wrap; position: relative; overflow: hidden;
box-shadow: var(--shadow-lg);
}
.cta__inner::after {
content: ""; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px;
background: radial-gradient(circle, rgba(25,182,131,0.4), transparent 65%); pointer-events: none;
}
.cta__inner h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cta__inner p { color: rgba(255,255,255,0.78); margin-top: 8px; }
.cta__actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; }
/* ===== Footer ===== */
.footer { background: var(--navy-d); color: rgba(255,255,255,0.72); padding: 56px 0 0; }
.footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; padding-bottom: 40px; }
.footer__brand p { margin-top: 14px; font-size: 0.9rem; max-width: 28em; }
.footer__col h4 { color: #fff; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; }
.footer__col a { display: block; padding: 5px 0; font-size: 0.92rem; transition: color .2s; }
.footer__col a:hover { color: var(--green); }
.footer__form { display: flex; gap: 8px; margin-bottom: 14px; }
.footer__form input {
flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm);
border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; font: inherit; font-size: 0.9rem;
}
.footer__form input::placeholder { color: rgba(255,255,255,0.5); }
.footer__form input:focus { border-color: var(--green); }
.footer__badges { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.85); display: flex; align-items: center; gap: 8px; }
.footer__bar {
display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 18px 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.84rem;
}
.footer__bar nav { display: flex; gap: 18px; }
.footer__bar a:hover { color: var(--green); }
/* ===== Toast ===== */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(24px);
background: var(--navy-d); color: #fff; padding: 13px 20px; border-radius: var(--r-md);
box-shadow: var(--shadow-lg); font-size: 0.92rem; font-weight: 500; z-index: 300;
opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; max-width: 90vw;
border-left: 3px solid var(--green);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ===== Reveal ===== */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* ===== Responsive ===== */
@media (max-width: 960px) {
.hero__inner, .terms__inner { grid-template-columns: 1fr; gap: 40px; }
.hero__visual { max-width: 460px; margin: 0 auto; width: 100%; }
.cards-3, .loc-grid, .plans { grid-template-columns: 1fr 1fr; }
.footer__inner { grid-template-columns: 1fr 1fr; }
.nav__links { display: none; }
.nav__actions { display: none; }
.nav__toggle { display: flex; }
}
@media (max-width: 640px) {
.cards-3, .loc-grid, .plans { grid-template-columns: 1fr; }
.hero__stats { grid-template-columns: 1fr 1fr; gap: 16px; }
.cta__inner { padding: 32px; }
}
@media (max-width: 520px) {
.container { padding: 0 18px; }
.section { padding: 56px 0; }
.hero { padding: 36px 0 52px; }
.hero__copy h1 { font-size: 2rem; }
.lede { font-size: 1rem; }
.hero__cta { flex-direction: column; align-items: stretch; }
.hero__cta input { min-width: 0; }
.footer__inner { grid-template-columns: 1fr; gap: 28px; }
.floatcard--occ { width: 200px; left: -10px; }
.floatcard--badge { right: 0; }
.cta__actions .btn { width: 100%; }
.footer__bar { flex-direction: column; align-items: flex-start; }
}/* Meridian Flex — Corporate-flex coworking landing
Vanilla JS only. Interactions: mobile nav, sticky nav shadow, scroll reveal,
live desk-occupancy grid, location region filter, cost estimator, pricing
billing toggle, quote/newsletter forms, and a toast helper. */
(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 3200);
}
/* Any element with data-toast fires a toast on click */
document.addEventListener("click", function (e) {
var t = e.target.closest("[data-toast]");
if (t) toast(t.getAttribute("data-toast"));
});
/* ---------- Mobile nav ---------- */
var toggle = document.getElementById("navToggle");
var menu = document.getElementById("mobileMenu");
if (toggle && menu) {
toggle.addEventListener("click", function () {
var open = toggle.getAttribute("aria-expanded") === "true";
toggle.setAttribute("aria-expanded", String(!open));
menu.hidden = open;
});
menu.addEventListener("click", function (e) {
if (e.target.closest("a")) {
toggle.setAttribute("aria-expanded", "false");
menu.hidden = true;
}
});
}
/* ---------- Sticky nav shadow ---------- */
var nav = document.getElementById("nav");
function onScroll() {
if (!nav) return;
nav.classList.toggle("is-stuck", window.scrollY > 8);
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ---------- Scroll reveal ---------- */
var revealEls = Array.prototype.slice.call(document.querySelectorAll("[data-reveal]"));
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("in");
io.unobserve(entry.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
);
revealEls.forEach(function (el) { io.observe(el); });
} else {
revealEls.forEach(function (el) { el.classList.add("in"); });
}
/* ---------- Live desk occupancy grid ---------- */
var grid = document.getElementById("gridMini");
var occFoot = document.getElementById("occFoot");
var TOTAL = 32;
function paintGrid() {
if (!grid) return;
grid.innerHTML = "";
var free = 0;
for (var i = 0; i < TOTAL; i++) {
var cell = document.createElement("i");
var r = Math.random();
if (r < 0.4) { cell.className = "free"; free++; }
else if (r < 0.55) { cell.className = "res"; }
cell.setAttribute("aria-hidden", "true");
grid.appendChild(cell);
}
if (occFoot) occFoot.textContent = free + " of " + TOTAL + " desks free now";
}
paintGrid();
/* Gently re-roll occupancy so it feels live */
if (grid) setInterval(paintGrid, 4200);
/* ---------- Location region filter ---------- */
var filterBtns = Array.prototype.slice.call(document.querySelectorAll(".loc-filter .chip"));
var locCards = Array.prototype.slice.call(document.querySelectorAll("#locGrid .loccard"));
filterBtns.forEach(function (btn) {
btn.addEventListener("click", function () {
var region = btn.getAttribute("data-region");
filterBtns.forEach(function (b) {
var active = b === btn;
b.classList.toggle("is-active", active);
b.setAttribute("aria-selected", String(active));
});
var shown = 0;
locCards.forEach(function (card) {
var match = region === "all" || card.getAttribute("data-region") === region;
card.classList.toggle("is-hidden", !match);
if (match) shown++;
});
if (region !== "all") {
toast(shown + " location" + (shown === 1 ? "" : "s") + " in " + btn.textContent.trim() + ".");
}
});
});
/* ---------- Cost estimator ---------- */
var seatRange = document.getElementById("seatRange");
var seatOut = document.getElementById("seatOut");
var calcTotal = document.getElementById("calcTotal");
var calcFine = document.getElementById("calcFine");
var calcBillBtns = Array.prototype.slice.call(document.querySelectorAll(".calc__toggle .seg"));
var calcBill = "monthly";
var RATE = { monthly: 540, annual: 445 };
function fmt(n) { return "$" + n.toLocaleString("en-US"); }
function updateCalc() {
if (!seatRange) return;
var seats = parseInt(seatRange.value, 10);
var rate = RATE[calcBill];
var total = seats * rate;
if (seatOut) seatOut.textContent = seats;
if (calcTotal) calcTotal.innerHTML = fmt(total) + "<small>/mo</small>";
if (calcFine) {
calcFine.textContent =
seats + " seats × " + fmt(rate) + " · Dedicated Suite " + calcBill + " rate";
}
}
if (seatRange) {
seatRange.addEventListener("input", updateCalc);
calcBillBtns.forEach(function (btn) {
btn.addEventListener("click", function () {
calcBill = btn.getAttribute("data-bill");
calcBillBtns.forEach(function (b) {
var active = b === btn;
b.classList.toggle("is-active", active);
b.setAttribute("aria-pressed", String(active));
});
updateCalc();
});
});
updateCalc();
}
/* ---------- Pricing billing toggle ---------- */
var priceBtns = Array.prototype.slice.call(document.querySelectorAll(".bill-toggle .seg"));
var amtEls = Array.prototype.slice.call(document.querySelectorAll(".plan .amt[data-monthly]"));
priceBtns.forEach(function (btn) {
btn.addEventListener("click", function () {
var mode = btn.getAttribute("data-pricebill");
priceBtns.forEach(function (b) {
var active = b === btn;
b.classList.toggle("is-active", active);
b.setAttribute("aria-pressed", String(active));
});
amtEls.forEach(function (el) {
var v = el.getAttribute("data-" + mode);
if (v) el.textContent = "$" + v;
});
});
});
/* ---------- Forms ---------- */
function isEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); }
var quoteForm = document.getElementById("quoteForm");
var quoteNote = document.getElementById("quoteNote");
if (quoteForm) {
quoteForm.addEventListener("submit", function (e) {
e.preventDefault();
var email = document.getElementById("quoteEmail");
var size = document.getElementById("teamSize");
if (!email || !isEmail(email.value.trim())) {
if (quoteNote) {
quoteNote.textContent = "Please enter a valid work email.";
quoteNote.className = "hero__note is-err";
}
if (email) email.focus();
return;
}
if (quoteNote) {
var seats = size && size.value ? size.value + "-seat" : "team";
quoteNote.textContent = "Thanks! Your " + seats + " quote is on the way to " + email.value.trim() + ".";
quoteNote.className = "hero__note is-ok";
}
toast("Quote requested — an advisor will reply within one business hour.");
quoteForm.reset();
});
}
var newsForm = document.getElementById("newsForm");
if (newsForm) {
newsForm.addEventListener("submit", function (e) {
e.preventDefault();
var email = document.getElementById("newsEmail");
if (!email || !isEmail(email.value.trim())) {
toast("Please enter a valid work email.");
if (email) email.focus();
return;
}
toast("Subscribed — workspace updates coming your way.");
newsForm.reset();
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Meridian Flex — Enterprise Coworking & Private Offices</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&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<!-- ============ NAV ============ -->
<header class="nav" id="nav">
<div class="container nav__inner">
<a class="brand" href="#" aria-label="Meridian Flex home">
<span class="brand__mark" aria-hidden="true">◧</span>
<span>Meridian<span class="brand__accent">Flex</span></span>
</a>
<nav class="nav__links" aria-label="Primary">
<a href="#solutions">Solutions</a>
<a href="#terms">Flexible terms</a>
<a href="#locations">Locations</a>
<a href="#pricing">Pricing</a>
<a href="#customers">Customers</a>
</nav>
<div class="nav__actions">
<a href="#" class="link-quiet">Member login</a>
<a href="#pricing" class="btn btn--primary btn--sm">Book a tour</a>
</div>
<button class="nav__toggle" id="navToggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="mobileMenu">
<span></span><span></span><span></span>
</button>
</div>
<div class="mobile-menu" id="mobileMenu" hidden>
<a href="#solutions">Solutions</a>
<a href="#terms">Flexible terms</a>
<a href="#locations">Locations</a>
<a href="#pricing">Pricing</a>
<a href="#customers">Customers</a>
<a href="#" class="link-quiet">Member login</a>
<a href="#pricing" class="btn btn--primary btn--block">Book a tour</a>
</div>
</header>
<main id="main">
<!-- ============ HERO ============ -->
<section class="hero">
<div class="container hero__inner">
<div class="hero__copy" data-reveal>
<span class="eyebrow"><span class="dot"></span> Enterprise-ready · 48 cities</span>
<h1>Workspace that scales with your whole company.</h1>
<p class="lede">
Private offices, dedicated team suites, and on-demand access across a global
network. One agreement, flexible terms, and a single dashboard to manage every
seat your team needs.
</p>
<form class="hero__cta" id="quoteForm" novalidate>
<label class="sr-only" for="teamSize">Team size</label>
<select id="teamSize" aria-label="Team size">
<option value="">Team size…</option>
<option value="5">1–10 people</option>
<option value="35">11–50 people</option>
<option value="120">51–200 people</option>
<option value="400">200+ people</option>
</select>
<label class="sr-only" for="quoteEmail">Work email</label>
<input id="quoteEmail" type="email" inputmode="email" placeholder="[email protected]" autocomplete="email" />
<button class="btn btn--primary" type="submit">Get a team quote</button>
</form>
<p class="hero__note" id="quoteNote">No credit card. A solutions advisor replies within one business hour.</p>
<ul class="hero__stats">
<li><strong>180k+</strong><span>members worldwide</span></li>
<li><strong>48</strong><span>cities, 6 continents</span></li>
<li><strong>98%</strong><span>enterprise renewal</span></li>
<li><strong>4.8/5</strong><span>member rating</span></li>
</ul>
</div>
<div class="hero__visual" data-reveal>
<div class="photo photo--hero" role="img" aria-label="Meridian Flex lounge and workspace floor"></div>
<div class="floatcard floatcard--badge">
<span class="badge-ok" aria-hidden="true">●</span> Floor 9 · Live occupancy
</div>
<div class="floatcard floatcard--occ" aria-label="Live desk occupancy">
<div class="floatcard__row">
<span class="legend"><span class="swatch swatch--free"></span> Free</span>
<span class="legend"><span class="swatch swatch--res"></span> Reserved</span>
<span class="legend"><span class="swatch swatch--occ"></span> In use</span>
</div>
<div class="grid-mini" id="gridMini" role="img" aria-label="Desk grid showing live occupancy"></div>
<p class="floatcard__foot" id="occFoot">12 of 32 desks free now</p>
</div>
</div>
</div>
</section>
<!-- ============ TRUST ============ -->
<section class="trust" id="customers" aria-label="Trusted by">
<div class="container">
<p class="trust__label">Trusted by fast-scaling teams and Fortune 500 enterprises</p>
<ul class="trust__logos">
<li>NORTHWIND</li>
<li>Vellum&Co</li>
<li>HELIOSPACE</li>
<li>Quanta</li>
<li>BLUEGRID</li>
<li>Maperture</li>
<li>OAKLINE</li>
</ul>
</div>
</section>
<!-- ============ SOLUTIONS ============ -->
<section class="section" id="solutions">
<div class="container">
<header class="section__head" data-reveal>
<span class="eyebrow"><span class="dot"></span> Enterprise solutions</span>
<h2>Space for one person or one thousand.</h2>
<p class="section__sub">Pick a starting point and add seats, rooms, and locations as you grow — without renegotiating a lease.</p>
</header>
<div class="cards-3">
<article class="solcard" data-reveal tabindex="0">
<div class="solcard__icon" aria-hidden="true">▦</div>
<h3>Private offices</h3>
<p>Lockable, branded suites for 2–200 people. Move-in ready with furniture, IT, and 24/7 access.</p>
<ul class="ticks">
<li>Custom buildouts</li>
<li>Dedicated entrance options</li>
<li>Monthly or annual terms</li>
</ul>
<a href="#pricing" class="card-link">Explore offices →</a>
</article>
<article class="solcard solcard--featured" data-reveal tabindex="0">
<span class="solcard__tag">Popular</span>
<div class="solcard__icon" aria-hidden="true">◷</div>
<h3>Dedicated teams</h3>
<p>Reserved desks and team suites that stay yours — perfect for satellite squads and hybrid pods.</p>
<ul class="ticks">
<li>Named seats & storage</li>
<li>Shared team rooms</li>
<li>Scale up in days</li>
</ul>
<a href="#pricing" class="card-link">See team plans →</a>
</article>
<article class="solcard" data-reveal tabindex="0">
<div class="solcard__icon" aria-hidden="true">◍</div>
<h3>Multi-location access</h3>
<p>One membership, every building. Let employees check in at any Meridian worldwide.</p>
<ul class="ticks">
<li>Global keycard & QR access</li>
<li>Per-seat usage reporting</li>
<li>Centralized billing</li>
</ul>
<a href="#locations" class="card-link">View the network →</a>
</article>
</div>
</div>
</section>
<!-- ============ FLEXIBLE TERMS ============ -->
<section class="section terms" id="terms">
<div class="container terms__inner">
<div class="terms__copy" data-reveal>
<span class="eyebrow"><span class="dot"></span> Flexible terms</span>
<h2>Commit to growth, not to a 10-year lease.</h2>
<p class="section__sub">Adjust headcount month to month. Add a city when you open a region. Pause and resume seats as projects ramp — your account manager handles the paperwork.</p>
<ul class="terms__list">
<li><strong>Month-to-month flexibility</strong><span>Resize your plan with 30 days' notice. No penalties.</span></li>
<li><strong>One global agreement</strong><span>Sign once, deploy seats across every location instantly.</span></li>
<li><strong>Transparent usage</strong><span>Live dashboards for spend, occupancy, and seat allocation.</span></li>
<li><strong>Dedicated account team</strong><span>A named manager plus on-site community staff at every space.</span></li>
</ul>
</div>
<div class="calc" data-reveal aria-label="Team cost estimator">
<h3>Estimate your team's cost</h3>
<label for="seatRange">Seats <output id="seatOut">25</output></label>
<input id="seatRange" type="range" min="2" max="250" value="25" step="1" aria-label="Number of seats" />
<div class="calc__toggle" role="group" aria-label="Billing period">
<button class="seg is-active" type="button" data-bill="monthly" aria-pressed="true">Monthly</button>
<button class="seg" type="button" data-bill="annual" aria-pressed="false">Annual <span class="save">−18%</span></button>
</div>
<div class="calc__result">
<span class="calc__label">Estimated monthly total</span>
<span class="calc__amount" id="calcTotal">$13,500<small>/mo</small></span>
</div>
<p class="calc__fine" id="calcFine">25 seats × $540 · Dedicated Suite rate</p>
<button class="btn btn--primary btn--block" type="button" data-toast="Quote saved — a solutions advisor will email your full proposal.">Lock in this estimate</button>
</div>
</div>
</section>
<!-- ============ LOCATIONS ============ -->
<section class="section" id="locations">
<div class="container">
<header class="section__head" data-reveal>
<span class="eyebrow"><span class="dot"></span> Locations</span>
<h2>Filter our network by region.</h2>
<p class="section__sub">Premium buildings in the districts where your people already are.</p>
</header>
<div class="loc-filter" role="tablist" aria-label="Filter locations by region">
<button class="chip is-active" role="tab" aria-selected="true" data-region="all">All regions</button>
<button class="chip" role="tab" aria-selected="false" data-region="americas">Americas</button>
<button class="chip" role="tab" aria-selected="false" data-region="emea">EMEA</button>
<button class="chip" role="tab" aria-selected="false" data-region="apac">APAC</button>
</div>
<div class="loc-grid" id="locGrid">
<article class="loccard" data-region="americas" data-reveal>
<div class="loccard__photo photo" style="background:linear-gradient(150deg,#1c3458,#3f6aa3)">
<span class="loccard__city">New York</span>
<span class="loccard__avail"><span class="avail-dot high"></span> 18 seats</span>
</div>
<div class="loccard__body">
<h3>FiDi · 120 Pearl Street</h3>
<p class="loccard__addr">9 floors · Lower Manhattan</p>
<div class="loccard__meta"><span>◷ 24/7 access</span><span>▦ 6 office suites</span></div>
<div class="loccard__foot">
<span class="loccard__from">From <b>$890</b>/seat</span>
<button class="btn btn--ghost btn--sm" data-toast="Tour request sent for New York · FiDi.">Tour</button>
</div>
</div>
</article>
<article class="loccard" data-region="americas" data-reveal>
<div class="loccard__photo photo" style="background:linear-gradient(150deg,#244a36,#3f8a5e)">
<span class="loccard__city">São Paulo</span>
<span class="loccard__avail"><span class="avail-dot mid"></span> 7 seats</span>
</div>
<div class="loccard__body">
<h3>Itaim · Faria Lima 4055</h3>
<p class="loccard__addr">5 floors · Itaim Bibi</p>
<div class="loccard__meta"><span>◷ 24/7 access</span><span>▦ 4 office suites</span></div>
<div class="loccard__foot">
<span class="loccard__from">From <b>$410</b>/seat</span>
<button class="btn btn--ghost btn--sm" data-toast="Tour request sent for São Paulo · Itaim.">Tour</button>
</div>
</div>
</article>
<article class="loccard" data-region="emea" data-reveal>
<div class="loccard__photo photo" style="background:linear-gradient(150deg,#3a2f52,#6a4f9a)">
<span class="loccard__city">London</span>
<span class="loccard__avail"><span class="avail-dot high"></span> 22 seats</span>
</div>
<div class="loccard__body">
<h3>Shoreditch · 40 Rivington St</h3>
<p class="loccard__addr">7 floors · East London</p>
<div class="loccard__meta"><span>◷ 24/7 access</span><span>▦ 8 office suites</span></div>
<div class="loccard__foot">
<span class="loccard__from">From <b>£720</b>/seat</span>
<button class="btn btn--ghost btn--sm" data-toast="Tour request sent for London · Shoreditch.">Tour</button>
</div>
</div>
</article>
<article class="loccard" data-region="emea" data-reveal>
<div class="loccard__photo photo" style="background:linear-gradient(150deg,#52402f,#9a6f4f)">
<span class="loccard__city">Berlin</span>
<span class="loccard__avail"><span class="avail-dot high"></span> 15 seats</span>
</div>
<div class="loccard__body">
<h3>Mitte · Torstraße 138</h3>
<p class="loccard__addr">6 floors · Central Berlin</p>
<div class="loccard__meta"><span>◷ 24/7 access</span><span>▦ 5 office suites</span></div>
<div class="loccard__foot">
<span class="loccard__from">From <b>€640</b>/seat</span>
<button class="btn btn--ghost btn--sm" data-toast="Tour request sent for Berlin · Mitte.">Tour</button>
</div>
</div>
</article>
<article class="loccard" data-region="apac" data-reveal>
<div class="loccard__photo photo" style="background:linear-gradient(150deg,#2f4a52,#4f8a9a)">
<span class="loccard__city">Singapore</span>
<span class="loccard__avail"><span class="avail-dot mid"></span> 9 seats</span>
</div>
<div class="loccard__body">
<h3>CBD · 8 Marina View</h3>
<p class="loccard__addr">11 floors · Marina Bay</p>
<div class="loccard__meta"><span>◷ 24/7 access</span><span>▦ 9 office suites</span></div>
<div class="loccard__foot">
<span class="loccard__from">From <b>S$980</b>/seat</span>
<button class="btn btn--ghost btn--sm" data-toast="Tour request sent for Singapore · CBD.">Tour</button>
</div>
</div>
</article>
<article class="loccard" data-region="apac" data-reveal>
<div class="loccard__photo photo" style="background:linear-gradient(150deg,#522f3a,#9a4f63)">
<span class="loccard__city">Tokyo</span>
<span class="loccard__avail"><span class="avail-dot low"></span> Waitlist</span>
</div>
<div class="loccard__body">
<h3>Shibuya · 2-24-12 Dogenzaka</h3>
<p class="loccard__addr">8 floors · Shibuya City</p>
<div class="loccard__meta"><span>◷ 24/7 access</span><span>▦ 7 office suites</span></div>
<div class="loccard__foot">
<span class="loccard__from">From <b>¥98,000</b>/seat</span>
<button class="btn btn--ghost btn--sm" data-toast="Added to waitlist for Tokyo · Shibuya.">Join list</button>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ============ PRICING ============ -->
<section class="section pricing" id="pricing">
<div class="container">
<header class="section__head" data-reveal>
<span class="eyebrow"><span class="dot"></span> Pricing for teams</span>
<h2>Per-seat plans, billed centrally.</h2>
<p class="section__sub">Switch billing to see how annual commitments lower your per-seat rate.</p>
<div class="bill-toggle" role="group" aria-label="Billing period">
<button class="seg is-active" type="button" data-pricebill="monthly" aria-pressed="true">Monthly</button>
<button class="seg" type="button" data-pricebill="annual" aria-pressed="false">Annual <span class="save">−18%</span></button>
</div>
</header>
<div class="cards-3 plans">
<article class="plan" data-reveal>
<h3>Team Pass</h3>
<p class="plan__for">For hybrid squads of up to 10.</p>
<p class="plan__price"><span class="amt" data-monthly="220" data-annual="180">$220</span><span class="per">/seat · mo</span></p>
<ul class="ticks">
<li>Access to all common areas</li>
<li>8 meeting-room credits / seat</li>
<li>Multi-location check-in</li>
<li>Shared team dashboard</li>
</ul>
<button class="btn btn--ghost btn--block" data-toast="Team Pass selected — sales will reach out shortly.">Start with Team Pass</button>
</article>
<article class="plan plan--featured" data-reveal>
<span class="plan__tag">Most popular</span>
<h3>Dedicated Suite</h3>
<p class="plan__for">Reserved desks & a private team room.</p>
<p class="plan__price"><span class="amt" data-monthly="540" data-annual="445">$540</span><span class="per">/seat · mo</span></p>
<ul class="ticks">
<li>Everything in Team Pass</li>
<li>Named seats & lockable storage</li>
<li>Private team room included</li>
<li>Priority room booking</li>
<li>Dedicated account manager</li>
</ul>
<button class="btn btn--primary btn--block" data-toast="Dedicated Suite selected — let's design your space.">Get Dedicated Suite</button>
</article>
<article class="plan" data-reveal>
<h3>Enterprise</h3>
<p class="plan__for">Custom buildouts & multi-city rollouts.</p>
<p class="plan__price"><span class="amt amt--custom">Custom</span></p>
<ul class="ticks">
<li>Everything in Dedicated Suite</li>
<li>Branded private offices</li>
<li>Global single agreement</li>
<li>SSO & SOC 2 reporting</li>
<li>SLA-backed onboarding</li>
</ul>
<button class="btn btn--ghost btn--block" data-toast="Enterprise — connecting you with a solutions architect.">Talk to sales</button>
</article>
</div>
<p class="pricing__fine">All prices per seat, excluding local tax. Annual plans billed yearly. Fictional demo rates.</p>
</div>
</section>
<!-- ============ CTA ============ -->
<section class="cta">
<div class="container cta__inner" data-reveal>
<div>
<h2>Ready to give your team a better place to work?</h2>
<p>Tell us your headcount and target cities — we'll build a flexible proposal in 24 hours.</p>
</div>
<div class="cta__actions">
<a href="#pricing" class="btn btn--primary btn--lg">Get a team quote</a>
<a href="#locations" class="btn btn--ghost-light btn--lg">Book a tour</a>
</div>
</div>
</section>
</main>
<!-- ============ FOOTER ============ -->
<footer class="footer">
<div class="container footer__inner">
<div class="footer__brand">
<a class="brand brand--light" href="#"><span class="brand__mark" aria-hidden="true">◧</span><span>Meridian<span class="brand__accent">Flex</span></span></a>
<p>Flexible enterprise workspace across 48 cities. One agreement, every location, fully managed.</p>
<form class="footer__form" id="newsForm" novalidate>
<label class="sr-only" for="newsEmail">Work email</label>
<input id="newsEmail" type="email" inputmode="email" placeholder="Work email for updates" />
<button class="btn btn--primary btn--sm" type="submit">Subscribe</button>
</form>
<p class="footer__badges"><span aria-hidden="true">🛡</span> SOC 2 Type II · ISO 27001 · GDPR-ready</p>
</div>
<nav class="footer__col" aria-label="Solutions">
<h4>Solutions</h4>
<a href="#solutions">Private offices</a>
<a href="#solutions">Dedicated teams</a>
<a href="#solutions">On-demand access</a>
<a href="#solutions">Multi-location</a>
</nav>
<nav class="footer__col" aria-label="Company">
<h4>Company</h4>
<a href="#locations">Locations</a>
<a href="#customers">Customers</a>
<a href="#pricing">Pricing</a>
<a href="#">Careers</a>
</nav>
<nav class="footer__col" aria-label="Support">
<h4>Support</h4>
<a href="#">Member login</a>
<a href="#">Contact sales</a>
<a href="#">System status</a>
<a href="#">Help center</a>
</nav>
</div>
<div class="container footer__bar">
<span>© 2026 Meridian Flex — fictional demo space.</span>
<nav aria-label="Legal"><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Security</a></nav>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Corporate Flex Landing
A corporate-flex coworking landing page for the fictional “Meridian Flex” network, styled after polished enterprise workspace brands: a navy and white base with an accent-green call to action, clean Inter typography, soft shadows, and generous spacing. The hero leads with a team-quote form and a small live desk-occupancy grid (free / reserved / in-use cells that re-roll on an interval), then flows into enterprise solution cards — private offices, dedicated teams, and multi-location access.
The page is built to feel scalable and professional. A flexible-terms section sits beside an interactive cost estimator: drag the seat slider and toggle monthly vs. annual billing to watch the per-seat rate and monthly total update instantly. The locations section presents a six-city network of warm gradient building placeholders with live seat counts, filterable by region (Americas, EMEA, APAC) via keyboard-usable tabs. Pricing offers three per-seat team plans with a billing toggle that swaps every price, and a closing CTA plus a full footer with newsletter signup and trust badges.
Interactions are all vanilla JS: a sticky nav that gains a shadow on scroll, IntersectionObserver scroll reveals (disabled under reduced-motion), a mobile hamburger menu, email-validated quote and newsletter forms, and a shared toast() helper for confirmations. The layout is responsive down to about 360px with dedicated breakpoints.
Illustrative UI only — fictional coworking space, not a real booking system.