Pages Medium
Job Board — Internal Mobility Landing
A warm, belonging-first internal careers landing page for a fictional company called Lumen. It pairs a navy-and-coral brand with a welcoming hero, animated stats, a spotlight role with skill-match meter, a filterable grid of open internal roles, employee growth stories, learning and development perks, culture values on a navy band, and an express-interest CTA. Includes bookmarks, count-up numbers, scroll reveals, a mobile menu, and a validated form.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
/* Warm brand-flex: navy + warm accent */
--navy: #16213e;
--navy-2: #1f2d52;
--ink: #14213d;
--ink-2: #475068;
--muted: #6b7488;
--bg: #fbf7f2;
--surface: #ffffff;
--surface-2: #fff6ee;
--line: rgba(20, 33, 61, 0.10);
--line-2: rgba(20, 33, 61, 0.18);
--accent: #f0612f; /* warm coral */
--accent-d: #d44e20;
--accent-50: #fff0e9;
--gold: #f4a23c;
--ok: #1f9d63;
--teal: #2f9e9b;
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 32px;
--sh-sm: 0 1px 2px rgba(20, 33, 61, 0.06);
--sh-md: 0 8px 24px rgba(20, 33, 61, 0.08);
--sh-lg: 0 24px 60px rgba(20, 33, 61, 0.14);
--max: 1140px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.sr, .skip { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--navy); color: #fff; border-radius: var(--r-sm); z-index: 200; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border: 1px solid transparent; border-radius: 999px;
font-weight: 600; font-size: 14.5px; text-decoration: none;
padding: 10px 18px; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
white-space: nowrap;
}
.btn--lg { padding: 13px 24px; font-size: 15.5px; }
.btn--block { width: 100%; }
.btn--solid { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(240, 97, 47, 0.28); }
.btn--solid:hover { background: var(--accent-d); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(240, 97, 47, 0.36); }
.btn--soft { background: #fff; color: var(--navy); border-color: var(--line-2); box-shadow: var(--sh-sm); }
.btn--soft:hover { background: var(--surface-2); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface-2); }
/* ---------- Nav ---------- */
.nav {
position: sticky; top: 0; z-index: 100;
background: rgba(251, 247, 242, 0.82);
backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 20px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--navy); font-weight: 700; }
.brand__mark {
width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
background: linear-gradient(140deg, var(--accent), var(--gold)); color: #fff; font-weight: 800; font-size: 18px;
box-shadow: 0 6px 14px rgba(240, 97, 47, 0.32);
}
.brand__text { font-size: 17px; }
.brand__text em { font-style: normal; color: var(--accent); }
.nav__links { display: flex; gap: 26px; margin-left: 18px; }
.nav__links a { text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: 14.5px; position: relative; padding: 4px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--accent); transition: width .2s ease; border-radius: 2px; }
.nav__links a:hover { color: var(--navy); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav__pill { font-size: 12px; font-weight: 600; color: var(--accent-d); background: var(--accent-50); padding: 5px 11px; border-radius: 999px; }
.nav__burger { display: none; background: none; border: 0; width: 42px; height: 42px; border-radius: 10px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav__burger span { width: 20px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobilenav { display: none; flex-direction: column; gap: 4px; padding: 12px 24px 20px; border-bottom: 1px solid var(--line); background: var(--bg); }
.mobilenav a { text-decoration: none; color: var(--ink-2); font-weight: 600; padding: 12px 6px; border-radius: 10px; }
.mobilenav a:hover { background: var(--surface-2); color: var(--navy); }
.mobilenav .btn { margin-top: 8px; }
/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 64px 0 56px; }
.hero::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(680px 420px at 88% -8%, rgba(244, 162, 60, 0.20), transparent 60%),
radial-gradient(560px 460px at -6% 12%, rgba(240, 97, 47, 0.14), transparent 60%);
}
.hero__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--accent-d); background: var(--accent-50); padding: 6px 13px; border-radius: 999px; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(240, 97, 47, 0.18); }
.hero__copy h1 { font-size: clamp(34px, 5.2vw, 56px); font-weight: 800; margin: 18px 0 16px; color: var(--navy); }
.hero__copy .hl { color: var(--accent); position: relative; }
.lede { font-size: clamp(16px, 2vw, 18.5px); color: var(--ink-2); max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 30px; }
.hero__stats { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; flex-wrap: wrap; }
.hero__stats li { display: flex; flex-direction: column; }
.hero__stats strong { font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: -0.03em; }
.hero__stats span { font-size: 13px; color: var(--muted); font-weight: 500; }
.hero__card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 24px; box-shadow: var(--sh-lg); position: relative;
}
.spot__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.spot__badge { font-size: 12px; font-weight: 700; color: var(--accent-d); background: var(--accent-50); padding: 5px 11px; border-radius: 999px; letter-spacing: .02em; }
.hero__card h3 { font-size: 22px; color: var(--navy); margin-bottom: 4px; }
.spot__team { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.spot__match { margin: 16px 0; }
.match__row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); font-weight: 600; margin-bottom: 7px; }
.match__row strong { color: var(--accent-d); }
.bar { height: 8px; background: var(--accent-50); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.is-revealed .bar i { width: var(--w); }
.spot__note { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 12px; }
/* Save / bookmark */
.save {
background: var(--surface-2); border: 1px solid var(--line); width: 38px; height: 38px; border-radius: 11px;
display: grid; place-items: center; color: var(--muted); transition: all .18s ease; flex: none;
}
.save svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.save:hover { color: var(--accent); border-color: var(--accent); }
.save[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-50); }
.save[aria-pressed="true"] svg { fill: var(--accent); }
/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.chip__i { font-size: 12px; }
.chip--ok { color: var(--ok); background: rgba(31, 157, 99, 0.10); border-color: rgba(31, 157, 99, 0.22); }
.chip--remote { color: var(--teal); background: rgba(47, 158, 155, 0.10); border-color: rgba(47, 158, 155, 0.22); }
.chip--warm { color: var(--accent-d); background: var(--accent-50); border-color: rgba(240, 97, 47, 0.20); }
.chip--new { color: #fff; background: var(--accent); border-color: var(--accent); }
/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section--tint { background: var(--surface-2); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 38px; flex-wrap: wrap; }
.kicker { display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent-d); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.kicker--light { color: var(--gold); }
.section__head h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; color: var(--navy); max-width: 14em; }
.section__sub { color: var(--ink-2); font-size: 16px; max-width: 26em; }
.section__sub--light { color: rgba(255,255,255,0.8); }
/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.filter { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 999px; transition: all .16s ease; }
.filter:hover { border-color: var(--accent); color: var(--accent-d); }
.filter.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Roles grid */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.role {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 20px; box-shadow: var(--sh-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
display: flex; flex-direction: column; gap: 13px;
}
.role:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.role__top { display: flex; align-items: flex-start; gap: 12px; }
.role__top > div:nth-child(2) { flex: 1; min-width: 0; }
.role__top h3 { font-size: 17px; color: var(--navy); }
.role__team { font-size: 13px; color: var(--muted); margin-top: 3px; }
.logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; flex: none; letter-spacing: .02em; }
.logo--a { background: linear-gradient(140deg, #f0612f, #f4a23c); }
.logo--b { background: linear-gradient(140deg, #2f9e9b, #1f9d63); }
.logo--c { background: linear-gradient(140deg, #6a5acd, #8a7bff); }
.logo--d { background: linear-gradient(140deg, #1f2d52, #2f9e9b); }
.logo--e { background: linear-gradient(140deg, #d44e20, #f4a23c); }
.logo--f { background: linear-gradient(140deg, #c2487a, #f0612f); }
.role__desc { font-size: 14px; color: var(--ink-2); }
.role__foot { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); font-weight: 600; margin-top: auto; padding-top: 4px; }
.role__foot a { color: var(--accent-d); text-decoration: none; font-weight: 700; }
.role__foot a:hover { text-decoration: underline; }
.match { width: 56px; height: 6px; background: var(--accent-50); border-radius: 999px; overflow: hidden; flex: none; }
.match i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 999px; }
.role.is-hidden { display: none; }
.roles__empty { text-align: center; color: var(--muted); padding: 30px; font-weight: 600; }
/* Stories */
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.story { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 14px; transition: transform .2s ease, box-shadow .2s ease; }
.story:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.story__avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(140deg, var(--navy), var(--accent)); font-size: 16px; }
.story blockquote { margin: 0; font-size: 15.5px; color: var(--ink); font-weight: 500; }
.story figcaption { display: flex; flex-direction: column; gap: 2px; }
.story figcaption strong { color: var(--navy); font-size: 14.5px; }
.story figcaption span { color: var(--muted); font-size: 13px; }
/* Learning */
.learn { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.learn__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; box-shadow: var(--sh-sm); transition: transform .2s ease, box-shadow .2s ease; }
.learn__card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.learn__ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; margin-bottom: 14px; }
.learn__ico--1 { background: var(--accent-50); }
.learn__ico--2 { background: rgba(47, 158, 155, 0.12); }
.learn__ico--3 { background: rgba(244, 162, 60, 0.16); }
.learn__ico--4 { background: rgba(31, 157, 99, 0.12); }
.learn__card h3 { font-size: 17px; color: var(--navy); margin-bottom: 7px; }
.learn__card p { font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.learn__meta { font-size: 12.5px; font-weight: 700; color: var(--accent-d); background: var(--accent-50); padding: 5px 11px; border-radius: 999px; display: inline-block; }
/* Values (navy band) */
.section--values { background: linear-gradient(150deg, var(--navy), var(--navy-2)); color: #fff; position: relative; overflow: hidden; }
.section--values::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 360px at 90% -10%, rgba(244,162,60,0.18), transparent 60%); }
.section--values .section__head h2 { color: #fff; }
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.value { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-md); padding: 22px; transition: transform .2s ease, background .2s ease; }
.value:hover { transform: translateY(-4px); background: rgba(255,255,255,0.09); }
.value__n { font-size: 13px; font-weight: 800; color: var(--gold); letter-spacing: .04em; }
.value h3 { font-size: 17.5px; margin: 10px 0 8px; }
.value p { font-size: 14px; color: rgba(255,255,255,0.78); }
/* CTA */
.cta { padding: 84px 0; background: radial-gradient(700px 360px at 50% -20%, rgba(240,97,47,0.14), transparent 60%), var(--surface-2); }
.cta__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.cta__inner h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--navy); }
.cta__inner > p { color: var(--ink-2); font-size: 16.5px; margin: 14px auto 26px; max-width: 32em; }
.cta__form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cta__form input { flex: 1 1 200px; min-width: 0; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 15px; background: #fff; color: var(--ink); transition: border-color .16s ease, box-shadow .16s ease; }
.cta__form input::placeholder { color: var(--muted); }
.cta__form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(240,97,47,0.14); }
.cta__form input.is-invalid { border-color: var(--accent-d); box-shadow: 0 0 0 4px rgba(212,78,32,0.14); }
.cta__form .btn { flex: 0 0 auto; }
.cta__fine { font-size: 12.5px; color: var(--muted); margin-top: 16px; }
/* Footer */
.foot { background: var(--navy); color: rgba(255,255,255,0.78); padding: 52px 0 26px; }
.foot__inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot__brand { max-width: 260px; }
.foot__brand .brand__mark { margin-bottom: 12px; }
.foot__brand p { font-size: 14px; }
.foot__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.foot__cols h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); margin-bottom: 12px; }
.foot__cols a { display: block; text-decoration: none; color: rgba(255,255,255,0.72); font-size: 14px; padding: 5px 0; transition: color .15s; }
.foot__cols a:hover { color: #fff; }
.foot__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 13px; color: rgba(255,255,255,0.55); }
/* Toast */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px);
background: var(--navy); color: #fff; padding: 13px 20px; border-radius: 999px;
font-size: 14px; font-weight: 600; box-shadow: var(--sh-lg);
opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 300; max-width: 90vw;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.reveal { opacity: 1 !important; transform: none !important; transition: none; }
.bar i { transition: none; }
}
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
.hero__inner { grid-template-columns: 1fr; gap: 36px; }
.roles, .stories { grid-template-columns: repeat(2, 1fr); }
.learn, .values { grid-template-columns: repeat(2, 1fr); }
.nav__links { display: none; }
}
@media (max-width: 760px) {
.nav__cta .btn { display: none; }
.nav__burger { display: flex; }
.nav.is-open .mobilenav { display: flex; }
.section { padding: 56px 0; }
}
@media (max-width: 520px) {
.wrap { padding: 0 18px; }
.roles, .stories, .learn, .values { grid-template-columns: 1fr; }
.hero__stats { gap: 22px; }
.hero__stats strong { font-size: 26px; }
.section__head { margin-bottom: 28px; }
.nav__pill { display: none; }
.foot__inner { gap: 28px; }
.foot__cols { gap: 32px; }
.cta__form .btn { width: 100%; }
}
@media (max-width: 360px) {
.hero__actions .btn { width: 100%; }
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-show");
}, 2600);
}
/* ---------- Mobile nav ---------- */
var burger = document.getElementById("burger");
var nav = document.querySelector(".nav");
var mobileNav = document.getElementById("mobileNav");
if (burger && nav && mobileNav) {
burger.addEventListener("click", function () {
var open = nav.classList.toggle("is-open");
burger.classList.toggle("is-open", open);
burger.setAttribute("aria-expanded", String(open));
mobileNav.hidden = !open;
});
mobileNav.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", function () {
nav.classList.remove("is-open");
burger.classList.remove("is-open");
burger.setAttribute("aria-expanded", "false");
mobileNav.hidden = true;
});
});
}
/* ---------- Scroll reveal ---------- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) {
e.target.classList.add("is-revealed");
io.unobserve(e.target);
}
});
},
{ threshold: 0.14, rootMargin: "0px 0px -8% 0px" }
);
reveals.forEach(function (el, i) {
el.style.transitionDelay = (i % 4) * 70 + "ms";
io.observe(el);
});
} else {
reveals.forEach(function (el) { el.classList.add("is-revealed"); });
}
/* ---------- Animated hero counters ---------- */
var counters = document.querySelectorAll("[data-count]");
function animateCount(el) {
var target = parseInt(el.getAttribute("data-count"), 10) || 0;
var suffix = el.getAttribute("data-suffix") || "";
var start = null;
var dur = 1200;
function step(ts) {
if (!start) start = ts;
var p = Math.min((ts - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
el.textContent = Math.round(target * eased) + suffix;
if (p < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
if (counters.length && "IntersectionObserver" in window) {
var cio = new IntersectionObserver(
function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) { animateCount(e.target); cio.unobserve(e.target); }
});
},
{ threshold: 0.5 }
);
counters.forEach(function (c) { cio.observe(c); });
} else {
counters.forEach(function (c) {
c.textContent = c.getAttribute("data-count") + (c.getAttribute("data-suffix") || "");
});
}
/* ---------- Save / bookmark toggles ---------- */
document.querySelectorAll("[data-save]").forEach(function (btn) {
btn.addEventListener("click", function () {
var pressed = btn.getAttribute("aria-pressed") === "true";
btn.setAttribute("aria-pressed", String(!pressed));
toast(pressed ? "Removed from saved roles" : "Saved — we’ll keep you posted");
});
});
/* ---------- Role filters ---------- */
var filters = document.querySelectorAll(".filter");
var roles = document.querySelectorAll(".role");
var emptyMsg = document.getElementById("rolesEmpty");
filters.forEach(function (btn) {
btn.addEventListener("click", function () {
filters.forEach(function (b) {
b.classList.remove("is-active");
b.setAttribute("aria-selected", "false");
});
btn.classList.add("is-active");
btn.setAttribute("aria-selected", "true");
var cat = btn.getAttribute("data-filter");
var visible = 0;
roles.forEach(function (role) {
var show = cat === "all" || role.getAttribute("data-cat") === cat;
role.classList.toggle("is-hidden", !show);
if (show) visible++;
});
if (emptyMsg) emptyMsg.hidden = visible !== 0;
});
});
/* ---------- Apply form ---------- */
var form = document.getElementById("applyForm");
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();
var name = form.querySelector("#name");
var interest = form.querySelector("#interest");
var ok = true;
[name, interest].forEach(function (input) {
if (!input.value.trim()) {
input.classList.add("is-invalid");
ok = false;
} else {
input.classList.remove("is-invalid");
}
});
if (!ok) {
toast("Add your name and a role you’re curious about");
return;
}
var first = name.value.trim().split(" ")[0];
toast("Thanks " + first + " — a people partner will reach out soon");
form.reset();
});
form.querySelectorAll("input").forEach(function (input) {
input.addEventListener("input", function () { input.classList.remove("is-invalid"); });
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lumen · Grow Your Career Here</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" href="#open-roles">Skip to open roles</a>
<header class="nav" id="top">
<div class="wrap nav__inner">
<a class="brand" href="#top" aria-label="Lumen internal careers home">
<span class="brand__mark" aria-hidden="true">L</span>
<span class="brand__text">Lumen <em>Careers</em></span>
</a>
<nav class="nav__links" aria-label="Primary">
<a href="#open-roles">Open roles</a>
<a href="#stories">Employee stories</a>
<a href="#learning">Learning</a>
<a href="#values">Our values</a>
</nav>
<div class="nav__cta">
<span class="nav__pill">Internal only</span>
<a class="btn btn--ghost" href="#open-roles">Browse roles</a>
<a class="btn btn--solid" href="#apply">Express interest</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="mobilenav" id="mobileNav" hidden>
<a href="#open-roles">Open roles</a>
<a href="#stories">Employee stories</a>
<a href="#learning">Learning</a>
<a href="#values">Our values</a>
<a class="btn btn--solid" href="#apply">Express interest</a>
</div>
</header>
<main>
<!-- HERO -->
<section class="hero">
<div class="wrap hero__inner">
<div class="hero__copy reveal">
<span class="eyebrow"><span class="dot"></span> Internal mobility · 2026</span>
<h1>Your next chapter is <span class="hl">already here.</span></h1>
<p class="lede">At Lumen, growth isn’t a leap to somewhere else — it’s a move across teams, skills and ideas. Explore internal roles, mentors and learning paths built for people who already belong.</p>
<div class="hero__actions">
<a class="btn btn--solid btn--lg" href="#open-roles">See open internal roles</a>
<a class="btn btn--soft btn--lg" href="#learning">Build a skill plan</a>
</div>
<ul class="hero__stats">
<li><strong data-count="68">0</strong><span>internal moves this year</span></li>
<li><strong data-count="42">0</strong><span>open internal roles</span></li>
<li><strong data-count="91" data-suffix="%">0</strong><span>would refer a teammate</span></li>
</ul>
</div>
<aside class="hero__card reveal" aria-label="Featured internal opportunity">
<div class="spot__top">
<span class="spot__badge">Spotlight role</span>
<button class="save" data-save aria-pressed="false" aria-label="Save this role">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1Z"/></svg>
</button>
</div>
<h3>Staff Product Designer</h3>
<p class="spot__team">Design Systems · from Marketing → Product</p>
<div class="chips">
<span class="chip"><span class="chip__i">📍</span> Lisbon / Remote</span>
<span class="chip chip--ok">€72k–€88k</span>
<span class="chip chip--warm">Hiring manager: Ana R.</span>
</div>
<div class="spot__match">
<div class="match__row"><span>Your skill match</span><strong>84%</strong></div>
<div class="bar"><i style="--w:84%"></i></div>
</div>
<a class="btn btn--solid btn--block" href="#apply">Start a conversation</a>
<p class="spot__note">No CV needed — we already know your work.</p>
</aside>
</div>
</section>
<!-- OPEN ROLES -->
<section class="section" id="open-roles">
<div class="wrap">
<div class="section__head reveal">
<div>
<span class="kicker">Open internal roles</span>
<h2>Move sideways. Move up. Move with intent.</h2>
</div>
<p class="section__sub">Every role below is open first to current Lumenites. Filter by the kind of move you’re ready for.</p>
</div>
<div class="filters reveal" role="tablist" aria-label="Filter roles">
<button class="filter is-active" data-filter="all" role="tab" aria-selected="true">All roles</button>
<button class="filter" data-filter="eng" role="tab" aria-selected="false">Engineering</button>
<button class="filter" data-filter="design" role="tab" aria-selected="false">Design</button>
<button class="filter" data-filter="ops" role="tab" aria-selected="false">Operations</button>
<button class="filter" data-filter="lead" role="tab" aria-selected="false">Leadership</button>
</div>
<div class="roles" id="roles">
<article class="role reveal" data-cat="eng">
<div class="role__top">
<div class="logo logo--a">PL</div>
<div>
<h3>Senior Platform Engineer</h3>
<p class="role__team">Core Platform · Berlin hub</p>
</div>
<button class="save" data-save aria-pressed="false" aria-label="Save Senior Platform Engineer">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1Z"/></svg>
</button>
</div>
<div class="chips">
<span class="chip chip--remote">Remote-friendly</span>
<span class="chip">€78k–€95k</span>
<span class="chip chip--new">New</span>
</div>
<p class="role__desc">Build the internal tooling thousands of teammates rely on. Great for an SRE or backend dev ready to widen their scope.</p>
<div class="role__foot"><span class="match"><i style="--w:76%"></i></span> 76% match · <a href="#apply">Details</a></div>
</article>
<article class="role reveal" data-cat="design">
<div class="role__top">
<div class="logo logo--b">DS</div>
<div>
<h3>Staff Product Designer</h3>
<p class="role__team">Design Systems · Lisbon</p>
</div>
<button class="save" data-save aria-pressed="false" aria-label="Save Staff Product Designer">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1Z"/></svg>
</button>
</div>
<div class="chips">
<span class="chip chip--remote">Hybrid</span>
<span class="chip">€72k–€88k</span>
<span class="chip chip--warm">Mentored move</span>
</div>
<p class="role__desc">Shape the components every team ships on. A natural step for designers who love systems thinking.</p>
<div class="role__foot"><span class="match"><i style="--w:84%"></i></span> 84% match · <a href="#apply">Details</a></div>
</article>
<article class="role reveal" data-cat="ops">
<div class="role__top">
<div class="logo logo--c">PO</div>
<div>
<h3>People Operations Lead</h3>
<p class="role__team">People Team · Madrid</p>
</div>
<button class="save" data-save aria-pressed="false" aria-label="Save People Operations Lead">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1Z"/></svg>
</button>
</div>
<div class="chips">
<span class="chip chip--remote">On-site</span>
<span class="chip">€58k–€70k</span>
</div>
<p class="role__desc">Own the rituals that make Lumen feel like Lumen. Perfect for an operations generalist craving people impact.</p>
<div class="role__foot"><span class="match"><i style="--w:69%"></i></span> 69% match · <a href="#apply">Details</a></div>
</article>
<article class="role reveal" data-cat="eng">
<div class="role__top">
<div class="logo logo--d">DA</div>
<div>
<h3>Data Engineer II</h3>
<p class="role__team">Insights · Remote (EU)</p>
</div>
<button class="save" data-save aria-pressed="false" aria-label="Save Data Engineer II">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1Z"/></svg>
</button>
</div>
<div class="chips">
<span class="chip chip--remote">Remote-friendly</span>
<span class="chip">€64k–€79k</span>
<span class="chip chip--new">New</span>
</div>
<p class="role__desc">Turn raw signals into decisions teams trust. Built for analysts ready to go deeper into pipelines.</p>
<div class="role__foot"><span class="match"><i style="--w:71%"></i></span> 71% match · <a href="#apply">Details</a></div>
</article>
<article class="role reveal" data-cat="lead">
<div class="role__top">
<div class="logo logo--e">EM</div>
<div>
<h3>Engineering Manager</h3>
<p class="role__team">Payments · Amsterdam</p>
</div>
<button class="save" data-save aria-pressed="false" aria-label="Save Engineering Manager">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1Z"/></svg>
</button>
</div>
<div class="chips">
<span class="chip chip--remote">Hybrid</span>
<span class="chip">€90k–€110k</span>
<span class="chip chip--warm">Leadership track</span>
</div>
<p class="role__desc">Grow people, not just product. For senior engineers ready to make their first move into management.</p>
<div class="role__foot"><span class="match"><i style="--w:80%"></i></span> 80% match · <a href="#apply">Details</a></div>
</article>
<article class="role reveal" data-cat="design">
<div class="role__top">
<div class="logo logo--f">UX</div>
<div>
<h3>UX Researcher</h3>
<p class="role__team">Product Insights · Lisbon</p>
</div>
<button class="save" data-save aria-pressed="false" aria-label="Save UX Researcher">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1Z"/></svg>
</button>
</div>
<div class="chips">
<span class="chip chip--remote">Remote-friendly</span>
<span class="chip">€60k–€74k</span>
<span class="chip chip--warm">Mentored move</span>
</div>
<p class="role__desc">Bring the voice of the user into every roadmap. A strong move for support or QA folks who love patterns.</p>
<div class="role__foot"><span class="match"><i style="--w:66%"></i></span> 66% match · <a href="#apply">Details</a></div>
</article>
</div>
<p class="roles__empty" id="rolesEmpty" hidden>No roles in this category yet — check back soon.</p>
</div>
</section>
<!-- EMPLOYEE STORIES -->
<section class="section section--tint" id="stories">
<div class="wrap">
<div class="section__head reveal">
<div>
<span class="kicker">Employee stories</span>
<h2>People who moved — and bloomed.</h2>
</div>
<p class="section__sub">Real internal journeys. Different starts, same belonging.</p>
</div>
<div class="stories">
<figure class="story reveal">
<div class="story__avatar" data-initials="MR">MR</div>
<blockquote>“I started on the support desk. Two internal moves later I’m a product manager — and every step felt supported, not lonely.”</blockquote>
<figcaption><strong>Marisol Reyes</strong><span>Support → Product Manager · 3 yrs</span></figcaption>
</figure>
<figure class="story reveal">
<div class="story__avatar" data-initials="TK">TK</div>
<blockquote>“My manager nominated me for a stretch project. That project became my new team. Lumen literally grew a role around what I love.”</blockquote>
<figcaption><strong>Tomas Keller</strong><span>QA → Data Engineer · 2 yrs</span></figcaption>
</figure>
<figure class="story reveal">
<div class="story__avatar" data-initials="AÖ">AÖ</div>
<blockquote>“Going into management felt scary until I saw how many internal mentors had my back. I never had to figure it out alone.”</blockquote>
<figcaption><strong>Aylin Öztürk</strong><span>Engineer → Engineering Manager · 4 yrs</span></figcaption>
</figure>
</div>
</div>
</section>
<!-- LEARNING & DEVELOPMENT -->
<section class="section" id="learning">
<div class="wrap">
<div class="section__head reveal">
<div>
<span class="kicker">Learning & development</span>
<h2>Grow the skills your next role needs.</h2>
</div>
<p class="section__sub">Every Lumenite gets a yearly learning budget and time on the clock to use it.</p>
</div>
<div class="learn">
<article class="learn__card reveal">
<div class="learn__ico learn__ico--1" aria-hidden="true">🎓</div>
<h3>Skill Studios</h3>
<p>Hands-on cohorts in design, data and leadership — taught by Lumenites, for Lumenites.</p>
<span class="learn__meta">12 live cohorts</span>
</article>
<article class="learn__card reveal">
<div class="learn__ico learn__ico--2" aria-hidden="true">🤝</div>
<h3>Mentor Match</h3>
<p>Get paired with a senior teammate in the field you’re moving toward. Two-way, always.</p>
<span class="learn__meta">240+ active mentors</span>
</article>
<article class="learn__card reveal">
<div class="learn__ico learn__ico--3" aria-hidden="true">📚</div>
<h3>Learning Budget</h3>
<p>€1,500 a year per person for courses, books and conferences — no approval mazes.</p>
<span class="learn__meta">€1.5k / year</span>
</article>
<article class="learn__card reveal">
<div class="learn__ico learn__ico--4" aria-hidden="true">🚀</div>
<h3>Stretch Projects</h3>
<p>Try the work before the move. Borrow 20% of your week on a team you’re curious about.</p>
<span class="learn__meta">Try before you move</span>
</article>
</div>
</div>
</section>
<!-- VALUES -->
<section class="section section--values" id="values">
<div class="wrap">
<div class="section__head reveal">
<div>
<span class="kicker kicker--light">What we believe</span>
<h2>Belonging is the foundation of growth.</h2>
</div>
<p class="section__sub section__sub--light">Four values that shape how we hire from within.</p>
</div>
<div class="values">
<article class="value reveal"><span class="value__n">01</span><h3>Grow people first</h3><p>We’d rather promote the curious than hire the perfect. Potential beats polish.</p></article>
<article class="value reveal"><span class="value__n">02</span><h3>Open doors, openly</h3><p>Roles are posted internally before they ever reach the outside world.</p></article>
<article class="value reveal"><span class="value__n">03</span><h3>Carry each other</h3><p>Mentorship isn’t a perk, it’s the job. Everyone teaches, everyone learns.</p></article>
<article class="value reveal"><span class="value__n">04</span><h3>Belong, then build</h3><p>You do your best work where you’re fully yourself — so we protect that fiercely.</p></article>
</div>
</div>
</section>
<!-- APPLY CTA -->
<section class="cta" id="apply">
<div class="wrap cta__inner reveal">
<h2>Ready to make your move?</h2>
<p>Tell us where you’d love to grow. A people partner will reach out within two working days — no formal CV required.</p>
<form class="cta__form" id="applyForm" novalidate>
<label class="sr" for="name">Your name</label>
<input id="name" name="name" type="text" placeholder="Your name" autocomplete="name" required />
<label class="sr" for="interest">Role you’re curious about</label>
<input id="interest" name="interest" type="text" placeholder="Role or team you’re curious about" required />
<button class="btn btn--solid btn--lg" type="submit">Express interest</button>
</form>
<p class="cta__fine">Internal candidates only · Your manager is looped in only when you say so.</p>
</div>
</section>
</main>
<footer class="foot">
<div class="wrap foot__inner">
<div class="foot__brand">
<span class="brand__mark" aria-hidden="true">L</span>
<p>Lumen Careers — growing from within since 2014.</p>
</div>
<nav class="foot__cols" aria-label="Footer">
<div><h4>Explore</h4><a href="#open-roles">Open roles</a><a href="#learning">Learning</a><a href="#stories">Stories</a></div>
<div><h4>Support</h4><a href="#apply">Talk to a partner</a><a href="#values">Our values</a><a href="#top">Back to top</a></div>
<div><h4>Internal</h4><a href="#open-roles">Mobility policy</a><a href="#learning">Mentor Match</a><a href="#apply">FAQ</a></div>
</nav>
</div>
<div class="wrap foot__base"><span>© 2026 Lumen. An illustrative internal careers experience.</span><span>Made with care by the People Team.</span></div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Internal Mobility Landing
A full internal careers landing page for the fictional company Lumen, built around belonging and growth rather than hiring funnels. A warm navy-plus-coral palette and Inter type set a friendly, trustworthy tone across a sticky nav, a welcoming hero with animated stat counters, a spotlight-role card showing a skill-match meter, and a multi-section flow ending in an express-interest CTA and footer.
The page is genuinely interactive. The open-roles grid filters live by category (Engineering, Design, Operations, Leadership) with an empty-state message, every role and the spotlight card has a save/bookmark toggle that fires a toast, and hero numbers count up when they scroll into view. Each section fades and lifts in with a staggered IntersectionObserver reveal, the spotlight match bar animates on entry, and the CTA form validates inline before greeting you by name.
Everything is vanilla — no frameworks or build step. It is responsive from wide desktop down to ~360px with a collapsing burger menu, and respects prefers-reduced-motion.
Illustrative UI only — fictional jobs & companies, not a real hiring platform.