Pages Medium
Job Board — Executive Landing
A discreet executive-search landing page in charcoal, gold and ivory with a refined serif-and-sans pairing. Features an elegant hero with a confidential mandate card and animated figures, a confidential-search value prop, filterable leadership mandates with save toggles, a vetted-network panel, dark process steps, client logos, and a validating request-access form. Vanilla JS handles scroll reveal, counters, filtering, bookmarks and a toast — fully responsive down to 360px.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root{
--charcoal:#1a1a22;
--charcoal-2:#23232e;
--charcoal-3:#2e2e3b;
--gold:#c8a24b;
--gold-d:#a8842f;
--gold-50:#f6efdd;
--ivory:#f7f4ec;
--ivory-2:#efe9da;
--ink:#1a1a22;
--ink-2:#4a4a57;
--muted:#7a7a86;
--bg:#f7f4ec;
--surface:#ffffff;
--line:rgba(26,26,34,0.12);
--line-2:rgba(26,26,34,0.2);
--gold-line:rgba(200,162,75,0.4);
--ok:#5b8a5a;
--new:#c8a24b;
--r-sm:8px;
--r-md:14px;
--r-lg:20px;
--shadow-sm:0 1px 2px rgba(26,26,34,.06), 0 4px 14px rgba(26,26,34,.05);
--shadow-md:0 10px 40px rgba(26,26,34,.1);
--serif:"Playfair Display", Georgia, serif;
--sans:"Inter", system-ui, -apple-system, sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:var(--sans);
background:var(--bg);
color:var(--ink);
line-height:1.5;
font-size:16px;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:0;background:var(--charcoal);color:var(--ivory);padding:.6rem 1rem;border-radius:var(--r-sm);z-index:200}
.skip-link:focus{left:1rem;top:1rem}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
font-weight:600;font-size:.94rem;letter-spacing:.01em;
padding:.7rem 1.25rem;border-radius:var(--r-sm);
transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
border:1px solid transparent;white-space:nowrap;
}
.btn--lg{padding:.95rem 1.7rem;font-size:1rem}
.btn--block{width:100%}
.btn--gold{background:var(--gold);color:var(--charcoal);box-shadow:0 6px 18px rgba(200,162,75,.3)}
.btn--gold:hover{background:var(--gold-d);transform:translateY(-2px);box-shadow:0 10px 26px rgba(200,162,75,.4)}
.btn--ghost{color:var(--ink-2)}
.btn--ghost:hover{color:var(--ink)}
.btn--line{border-color:var(--line-2);color:var(--ink)}
.btn--line:hover{border-color:var(--charcoal);background:var(--charcoal);color:var(--ivory);transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(247,244,236,.85);backdrop-filter:blur(12px);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)}
.nav__inner{display:flex;align-items:center;gap:1.5rem;height:72px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700}
.brand__mark{color:var(--gold);display:grid;place-items:center}
.brand__name{font-family:var(--serif);font-size:1.25rem;letter-spacing:.01em}
.brand__name em{font-style:italic;color:var(--gold-d);font-weight:500}
.nav__links{display:flex;gap:1.6rem;margin-left:auto;font-weight:500;font-size:.94rem;color:var(--ink-2)}
.nav__links a{position:relative;padding:.3rem 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--gold);transition:width .25s ease}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}
.nav__actions{display:flex;align-items:center;gap:.6rem}
.nav__toggle{display:none;flex-direction:column;gap:5px;padding:.5rem;margin-left:auto}
.nav__toggle span{width:22px;height:2px;background:var(--charcoal);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-nav{display:none;flex-direction:column;gap:.4rem;padding:1rem 4vw 1.5rem;background:var(--ivory);border-bottom:1px solid var(--line)}
.mobile-nav a{padding:.7rem .4rem;font-weight:500;border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:.6rem}
/* ---------- hero ---------- */
.hero{position:relative;background:
radial-gradient(1200px 500px at 80% -10%, rgba(200,162,75,.12), transparent 60%),
var(--bg);padding-top:clamp(2.5rem,6vw,5rem)}
.hero__inner{display:grid;grid-template-columns:1.25fr .85fr;gap:3rem;align-items:center;padding-bottom:3.5rem}
.eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);font-weight:600;margin-bottom:1.1rem;padding-bottom:.4rem;border-bottom:1px solid var(--gold-line)}
.display{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em;font-size:clamp(2.4rem,5.2vw,3.9rem)}
.display em{font-style:italic;color:var(--gold-d)}
.display--sm{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h1.display{margin-bottom:1.3rem}
.lede{font-size:1.12rem;color:var(--ink-2);max-width:38ch;margin-bottom:1.8rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2.6rem}
.hero__stats{display:flex;gap:2.4rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.6rem}
.hero__stats strong{font-family:var(--serif);font-size:2rem;font-weight:600;display:block;color:var(--ink)}
.hero__stats span{font-size:.82rem;color:var(--muted);letter-spacing:.02em}
.hero__card{position:relative;background:var(--charcoal);color:var(--ivory);border-radius:var(--r-lg);padding:1.9rem;box-shadow:var(--shadow-md);border:1px solid rgba(200,162,75,.2);overflow:hidden}
.hero__card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 100% 0, rgba(200,162,75,.18), transparent 70%);pointer-events:none}
.ghost-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-line);border-radius:999px;padding:.3rem .7rem;margin-bottom:1.2rem}
.ghost-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(200,162,75,.25)}
.card__role{font-family:var(--serif);font-size:1.45rem;font-weight:600;line-height:1.2}
.card__org{color:rgba(247,244,236,.6);font-size:.9rem;margin:.35rem 0 1.3rem}
.card__meta{display:grid;gap:.85rem;margin-bottom:1.3rem}
.card__meta>div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed rgba(247,244,236,.14);padding-bottom:.6rem}
.card__meta dt{font-size:.8rem;color:rgba(247,244,236,.5);letter-spacing:.04em}
.card__meta dd{font-weight:600;font-size:.92rem}
.card__bar{height:6px;border-radius:999px;background:rgba(247,244,236,.12);overflow:hidden;margin-bottom:.7rem}
.card__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-d),var(--gold));border-radius:999px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.card__note{font-size:.78rem;color:rgba(247,244,236,.5)}
.hero__trust{border-top:1px solid var(--line);background:rgba(255,255,255,.4)}
.trust__row{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;padding:1.4rem 0}
.trust__label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.logos{display:flex;gap:2rem;flex-wrap:wrap;align-items:center}
.logos li{font-family:var(--serif);font-weight:500;color:var(--ink-2);opacity:.7;letter-spacing:.02em;transition:opacity .2s,color .2s}
.logos li:hover{opacity:1;color:var(--gold-d)}
/* ---------- sections ---------- */
.section{padding:clamp(3.5rem,8vw,6rem) 0}
.section--alt{background:linear-gradient(180deg,var(--ivory-2),var(--bg))}
.section__head{max-width:620px;margin-bottom:2.8rem}
.section__head--row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.kicker{display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);font-weight:600;margin-bottom:.8rem}
.kicker--gold{color:var(--gold)}
.section__sub{color:var(--ink-2);font-size:1.05rem;margin-top:.9rem;max-width:54ch}
.grid{display:grid;gap:1.4rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.value{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1.8rem;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.value:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--gold-line)}
.value__num{font-family:var(--serif);font-size:1.6rem;color:var(--gold);display:block;margin-bottom:.9rem}
.value h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin-bottom:.5rem}
.value p{color:var(--ink-2);font-size:.97rem}
/* ---------- roles ---------- */
.filter{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{font-size:.86rem;font-weight:600;color:var(--ink-2);padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line-2);transition:.2s}
.chip:hover{border-color:var(--charcoal);color:var(--ink)}
.chip.is-active{background:var(--charcoal);color:var(--ivory);border-color:var(--charcoal)}
.roles{display:grid;gap:.9rem}
.role{display:flex;align-items:center;gap:1.2rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem 1.3rem;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.role:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--gold-line)}
.role.is-hidden{display:none}
.role__logo{flex:0 0 auto;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--gold);background:var(--charcoal);letter-spacing:.02em}
.role__body{flex:1;min-width:0}
.role__top{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.role__top h3{font-family:var(--serif);font-weight:600;font-size:1.18rem}
.role__org{color:var(--muted);font-size:.9rem;margin:.25rem 0 .6rem}
.role__chips{display:flex;gap:.45rem;flex-wrap:wrap}
.tag{font-size:.78rem;font-weight:500;color:var(--ink-2);background:var(--gold-50);border:1px solid var(--gold-line);padding:.25rem .6rem;border-radius:var(--r-sm)}
.tag--remote{background:rgba(91,138,90,.1);border-color:rgba(91,138,90,.35);color:var(--ok)}
.pill{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.22rem .55rem;border-radius:999px;background:rgba(26,26,34,.08);color:var(--ink-2)}
.pill--new{background:var(--gold);color:var(--charcoal)}
.pill--int{background:rgba(200,162,75,.16);color:var(--gold-d);border:1px solid var(--gold-line)}
.bookmark{flex:0 0 auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);display:grid;place-items:center;transition:.2s;color:var(--muted)}
.bookmark::before{content:"";width:15px;height:18px;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);background:currentColor;transition:.2s}
.bookmark:hover{border-color:var(--gold);color:var(--gold-d)}
.bookmark[aria-pressed="true"]{color:var(--gold);border-color:var(--gold);background:var(--gold-50)}
.roles__foot{margin-top:1.6rem;color:var(--ink-2);font-size:.95rem}
.roles__foot a{color:var(--gold-d);font-weight:600;border-bottom:1px solid var(--gold-line)}
.roles__foot a:hover{color:var(--charcoal)}
/* ---------- network ---------- */
.network{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.checks{display:grid;gap:.7rem;margin:1.4rem 0 1.8rem}
.checks li{position:relative;padding-left:1.9rem;color:var(--ink-2);font-size:.98rem}
.checks li::before{content:"";position:absolute;left:0;top:.15rem;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--gold-50);border:1px solid var(--gold-line)}
.checks li::after{content:"";position:absolute;left:.4rem;top:.42rem;width:.42rem;height:.22rem;border-left:2px solid var(--gold-d);border-bottom:2px solid var(--gold-d);transform:rotate(-45deg)}
.network__panel{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.network__panel li{background:var(--surface);padding:1.8rem 1.5rem;display:flex;flex-direction:column;gap:.3rem;transition:background .2s}
.network__panel li:hover{background:var(--gold-50)}
.network__panel strong{font-family:var(--serif);font-size:2.1rem;font-weight:600;color:var(--gold-d)}
.network__panel span{font-size:.85rem;color:var(--muted)}
/* ---------- process (dark) ---------- */
.section--dark{background:var(--charcoal);color:var(--ivory);position:relative;overflow:hidden}
.section--dark::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 15% 0,rgba(200,162,75,.14),transparent 60%);pointer-events:none}
.light{color:var(--ivory)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative}
.step{border-top:2px solid var(--gold-line);padding-top:1.2rem}
.step__no{font-family:var(--serif);font-size:1.6rem;color:var(--gold);display:block;margin-bottom:.7rem}
.step h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;margin-bottom:.5rem}
.step p{color:rgba(247,244,236,.6);font-size:.95rem}
/* ---------- access ---------- */
.access{background:linear-gradient(180deg,var(--bg),var(--ivory-2))}
.access__inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.8rem,4vw,3rem);box-shadow:var(--shadow-sm)}
.access__assure{display:grid;gap:.6rem;margin-top:1.4rem}
.access__assure li{position:relative;padding-left:1.6rem;color:var(--ink-2);font-size:.95rem}
.access__assure li::before{content:"✓";position:absolute;left:0;color:var(--gold-d);font-weight:700}
.access__form{display:grid;gap:1rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.82rem;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.field input,.field select,.field textarea{
font:inherit;color:var(--ink);background:var(--bg);
border:1px solid var(--line-2);border-radius:var(--r-sm);
padding:.75rem .85rem;transition:border-color .18s,box-shadow .18s,background .18s;resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:var(--surface);box-shadow:0 0 0 3px rgba(200,162,75,.18)}
.field.is-invalid input,.field.is-invalid select{border-color:#c0492f;box-shadow:0 0 0 3px rgba(192,73,47,.14)}
.access__fine{font-size:.78rem;color:var(--muted);text-align:center}
/* ---------- footer ---------- */
.footer{background:var(--charcoal);color:var(--ivory);padding-top:3.5rem}
.footer__inner{display:grid;grid-template-columns:1.3fr 2fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(247,244,236,.1)}
.brand--foot .brand__name{color:var(--ivory)}
.footer__brand p{color:rgba(247,244,236,.55);font-size:.92rem;margin-top:.9rem;max-width:30ch}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.footer__cols h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.footer__cols a{display:block;color:rgba(247,244,236,.7);font-size:.93rem;padding:.3rem 0;transition:color .18s}
.footer__cols a:hover{color:var(--gold)}
.footer__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.4rem 0;font-size:.82rem;color:rgba(247,244,236,.5)}
.footer__seal{letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-size:.74rem}
/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,2rem);background:var(--charcoal);color:var(--ivory);padding:.85rem 1.3rem;border-radius:999px;box-shadow:var(--shadow-md);border:1px solid var(--gold-line);font-size:.9rem;font-weight:500;opacity:0;pointer-events:none;transition:.3s ease;z-index:300;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:.5rem;vertical-align:middle}
/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* ---------- responsive ---------- */
@media (max-width:900px){
.hero__inner{grid-template-columns:1fr;gap:2.2rem}
.hero__card{order:-1}
.grid--3{grid-template-columns:1fr}
.network{grid-template-columns:1fr;gap:2rem}
.steps{grid-template-columns:1fr 1fr}
.access__inner{grid-template-columns:1fr;gap:2rem}
.footer__inner{grid-template-columns:1fr}
.nav__links{display:none}
.nav__actions{display:none}
.nav__toggle{display:flex}
}
@media (max-width:520px){
body{font-size:15px}
.hero__stats{gap:1.4rem}
.hero__stats strong{font-size:1.6rem}
.steps{grid-template-columns:1fr}
.role{flex-wrap:wrap}
.role__logo{width:44px;height:44px}
.bookmark{position:absolute}
.section__head--row{align-items:flex-start}
.footer__cols{grid-template-columns:1fr 1fr}
.footer__bar{flex-direction:column;align-items:flex-start}
.trust__row{gap:1rem}
.logos{gap:1.1rem}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}(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");
}, 2800);
}
/* ---------- sticky nav shadow ---------- */
var nav = document.getElementById("nav");
function onScroll() {
if (!nav) return;
nav.classList.toggle("is-stuck", window.scrollY > 12);
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ---------- mobile nav ---------- */
var toggle = document.getElementById("navToggle");
var mobileNav = document.getElementById("mobileNav");
function closeMobile() {
if (!toggle || !mobileNav) return;
toggle.setAttribute("aria-expanded", "false");
toggle.setAttribute("aria-label", "Open menu");
mobileNav.hidden = true;
}
if (toggle && mobileNav) {
toggle.addEventListener("click", function () {
var open = toggle.getAttribute("aria-expanded") === "true";
toggle.setAttribute("aria-expanded", String(!open));
toggle.setAttribute("aria-label", open ? "Open menu" : "Close menu");
mobileNav.hidden = open;
});
mobileNav.addEventListener("click", function (e) {
if (e.target.closest("a")) closeMobile();
});
}
/* ---------- smooth scroll for data-scroll + any in-page anchor ---------- */
document.addEventListener("click", function (e) {
var a = e.target.closest('a[href^="#"]');
if (!a) return;
var id = a.getAttribute("href");
if (id.length < 2) return;
var target = document.querySelector(id);
if (!target) return;
e.preventDefault();
closeMobile();
target.scrollIntoView({ behavior: "smooth", block: "start" });
history.replaceState(null, "", id);
});
/* ---------- scroll reveal ---------- */
var revealEls = Array.prototype.slice.call(document.querySelectorAll(".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");
});
}
/* ---------- animated counters ---------- */
var counters = Array.prototype.slice.call(document.querySelectorAll("[data-count]"));
function animateCount(el) {
var end = parseFloat(el.getAttribute("data-count"));
var suffix = el.getAttribute("data-suffix") || "";
var dur = 1400;
var start = performance.now();
function frame(now) {
var p = Math.min((now - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
el.textContent = Math.round(end * eased) + suffix;
if (p < 1) requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
}
if (counters.length && "IntersectionObserver" in window) {
var cio = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
animateCount(entry.target);
cio.unobserve(entry.target);
}
});
},
{ threshold: 0.6 }
);
counters.forEach(function (el) {
cio.observe(el);
});
} else {
counters.forEach(animateCount);
}
/* ---------- hero card progress bar ---------- */
var bar = document.querySelector(".card__bar span");
if (bar) {
setTimeout(function () {
bar.style.width = bar.style.getPropertyValue("--w") || "62%";
}, 500);
}
/* ---------- mandate filter ---------- */
var chips = Array.prototype.slice.call(document.querySelectorAll(".chip"));
var roles = Array.prototype.slice.call(document.querySelectorAll("#rolesList .role"));
chips.forEach(function (chip) {
chip.addEventListener("click", function () {
chips.forEach(function (c) {
c.classList.remove("is-active");
c.setAttribute("aria-selected", "false");
});
chip.classList.add("is-active");
chip.setAttribute("aria-selected", "true");
var filter = chip.getAttribute("data-filter");
var shown = 0;
roles.forEach(function (role) {
var match = filter === "all" || role.getAttribute("data-cat") === filter;
role.classList.toggle("is-hidden", !match);
if (match) shown++;
});
toast(
shown +
" mandate" +
(shown === 1 ? "" : "s") +
(filter === "all" ? " in view" : " in this practice")
);
});
});
/* ---------- bookmark toggles ---------- */
var bookmarks = Array.prototype.slice.call(document.querySelectorAll(".bookmark"));
bookmarks.forEach(function (b) {
b.addEventListener("click", function () {
var on = b.getAttribute("aria-pressed") === "true";
b.setAttribute("aria-pressed", String(!on));
var roleName = "this mandate";
var li = b.closest(".role");
if (li) {
var h = li.querySelector("h3");
if (h) roleName = h.textContent.trim();
}
toast(on ? "Removed " + roleName : "Saved — " + roleName);
});
});
/* ---------- access form ---------- */
var form = document.getElementById("accessForm");
if (form) {
var emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
form.addEventListener("submit", function (e) {
e.preventDefault();
var ok = true;
var fields = ["name", "email", "role"];
fields.forEach(function (id) {
var input = form.elements[id];
var wrap = input.closest(".field");
var valid = input.value.trim() !== "";
if (id === "email") valid = emailRe.test(input.value.trim());
if (wrap) wrap.classList.toggle("is-invalid", !valid);
if (!valid) ok = false;
});
if (!ok) {
toast("Please complete the highlighted fields.");
return;
}
var name = form.elements["name"].value.trim().split(" ")[0];
form.reset();
toast("Thank you, " + name + " — a partner will be in touch within a day.");
});
form.addEventListener("input", function (e) {
var wrap = e.target.closest(".field.is-invalid");
if (wrap) wrap.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>Aurelian Partners — Executive Search</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=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="nav" id="nav">
<div class="wrap nav__inner">
<a class="brand" href="#top" aria-label="Aurelian Partners home">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 32 32" width="28" height="28"><path d="M16 2l4.4 9.2L30 12.6l-7 6.9L24.8 30 16 25.1 7.2 30 9 19.5 2 12.6l9.6-1.4L16 2z" fill="currentColor"/></svg>
</span>
<span class="brand__name">Aurelian <em>Partners</em></span>
</a>
<nav class="nav__links" aria-label="Primary">
<a href="#practice">Practice</a>
<a href="#roles">Mandates</a>
<a href="#network">Network</a>
<a href="#process">Process</a>
</nav>
<div class="nav__actions">
<a class="btn btn--ghost" href="#access">Client login</a>
<a class="btn btn--gold" href="#access" data-scroll>Request access</a>
</div>
<button class="nav__toggle" id="navToggle" aria-expanded="false" aria-controls="mobileNav" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
<div class="mobile-nav" id="mobileNav" hidden>
<a href="#practice">Practice</a>
<a href="#roles">Mandates</a>
<a href="#network">Network</a>
<a href="#process">Process</a>
<a class="btn btn--gold" href="#access">Request access</a>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero" id="top">
<div class="wrap hero__inner">
<div class="hero__copy reveal">
<span class="eyebrow">Confidential leadership search · Est. 1998</span>
<h1 class="display">
We place the leaders the<br /><em>headlines never see.</em>
</h1>
<p class="lede">
A discreet retained-search practice for boards and founders appointing
C-suite, partner-level and non-executive talent. Quiet process. Vetted
shortlists. No public listings.
</p>
<div class="hero__cta">
<a class="btn btn--gold btn--lg" href="#access" data-scroll>Request a confidential brief</a>
<a class="btn btn--line btn--lg" href="#roles" data-scroll>View active mandates</a>
</div>
<ul class="hero__stats" aria-label="Practice figures">
<li><strong data-count="640">0</strong><span>Searches concluded</span></li>
<li><strong data-count="94" data-suffix="%">0</strong><span>Placement retention at 3yr</span></li>
<li><strong data-count="38">0</strong><span>Markets covered</span></li>
</ul>
</div>
<aside class="hero__card reveal" aria-label="Featured confidential mandate">
<div class="ghost-pill">Confidential</div>
<p class="card__role">Group Chief Executive Officer</p>
<p class="card__org">Listed industrials group · Northern Europe</p>
<dl class="card__meta">
<div><dt>Compensation</dt><dd>€1.4M–€1.9M + LTIP</dd></div>
<div><dt>Mandate</dt><dd>Retained · Board-led</dd></div>
<div><dt>Stage</dt><dd>Longlist in review</dd></div>
</dl>
<div class="card__bar"><span style="--w:62%"></span></div>
<p class="card__note">11 partners briefed · disclosed only under NDA</p>
</aside>
</div>
<div class="hero__trust">
<div class="wrap trust__row">
<span class="trust__label">Trusted by boards at</span>
<ul class="logos">
<li>NORDHAVEN</li>
<li>Calderon&Vey</li>
<li>MERIDIAN</li>
<li>Strathmore Capital</li>
<li>VANTERRA</li>
<li>Holloway Group</li>
</ul>
</div>
</div>
</section>
<!-- PRACTICE / VALUE PROP -->
<section class="section" id="practice">
<div class="wrap">
<header class="section__head reveal">
<span class="kicker">The practice</span>
<h2 class="display display--sm">Search conducted the way it should be — quietly.</h2>
<p class="section__sub">Every engagement is retained, partner-led and ring-fenced. We never advertise a seat, and incumbents are approached personally, off the record.</p>
</header>
<div class="grid grid--3">
<article class="value reveal">
<span class="value__num">01</span>
<h3>Absolute discretion</h3>
<p>Mandates run under codenames. Candidate and client identities are firewalled until mutual interest is confirmed under NDA.</p>
</article>
<article class="value reveal">
<span class="value__num">02</span>
<h3>Off-market reach</h3>
<p>Our shortlist is built from a privately held network of operators who are not, and will not be, on any job board.</p>
</article>
<article class="value reveal">
<span class="value__num">03</span>
<h3>Board-grade rigour</h3>
<p>Referencing, leadership assessment and remuneration benchmarking delivered in a single confidential dossier per finalist.</p>
</article>
</div>
</div>
</section>
<!-- ROLES / MANDATES -->
<section class="section section--alt" id="roles">
<div class="wrap">
<header class="section__head section__head--row reveal">
<div>
<span class="kicker">Active mandates</span>
<h2 class="display display--sm">A selection of open searches</h2>
</div>
<div class="filter" role="tablist" aria-label="Filter mandates">
<button class="chip is-active" data-filter="all" role="tab" aria-selected="true">All</button>
<button class="chip" data-filter="ceo" role="tab" aria-selected="false">Chief Exec</button>
<button class="chip" data-filter="finance" role="tab" aria-selected="false">Finance</button>
<button class="chip" data-filter="board" role="tab" aria-selected="false">Board</button>
</div>
</header>
<ul class="roles" id="rolesList">
<li class="role reveal" data-cat="ceo">
<div class="role__logo" aria-hidden="true">NV</div>
<div class="role__body">
<div class="role__top">
<h3>Chief Executive Officer</h3>
<span class="pill pill--new">New</span>
</div>
<p class="role__org">Private equity portfolio · Consumer healthcare</p>
<ul class="role__chips">
<li class="tag tag--remote">Hybrid · Zürich</li>
<li class="tag">£900k–£1.2M</li>
<li class="tag">Retained</li>
</ul>
</div>
<button class="bookmark" aria-pressed="false" aria-label="Save this mandate" title="Save"></button>
</li>
<li class="role reveal" data-cat="finance">
<div class="role__logo" aria-hidden="true">SC</div>
<div class="role__body">
<div class="role__top">
<h3>Group Chief Financial Officer</h3>
<span class="pill pill--int">Shortlist</span>
</div>
<p class="role__org">Strathmore Capital · Listed asset manager</p>
<ul class="role__chips">
<li class="tag">London</li>
<li class="tag">£650k + carry</li>
<li class="tag">IPO-track</li>
</ul>
</div>
<button class="bookmark" aria-pressed="false" aria-label="Save this mandate" title="Save"></button>
</li>
<li class="role reveal" data-cat="board">
<div class="role__logo" aria-hidden="true">MD</div>
<div class="role__body">
<div class="role__top">
<h3>Non-Executive Chair</h3>
<span class="pill">Open</span>
</div>
<p class="role__org">Meridian Renewables · Pre-IPO scale-up</p>
<ul class="role__chips">
<li class="tag tag--remote">Remote-friendly</li>
<li class="tag">£120k retainer</li>
<li class="tag">Board</li>
</ul>
</div>
<button class="bookmark" aria-pressed="false" aria-label="Save this mandate" title="Save"></button>
</li>
<li class="role reveal" data-cat="ceo">
<div class="role__logo" aria-hidden="true">VT</div>
<div class="role__body">
<div class="role__top">
<h3>Managing Director, EMEA</h3>
<span class="pill">Open</span>
</div>
<p class="role__org">Vanterra · Industrial technology</p>
<ul class="role__chips">
<li class="tag">Munich</li>
<li class="tag">€780k OTE</li>
<li class="tag">Retained</li>
</ul>
</div>
<button class="bookmark" aria-pressed="false" aria-label="Save this mandate" title="Save"></button>
</li>
<li class="role reveal" data-cat="finance">
<div class="role__logo" aria-hidden="true">HG</div>
<div class="role__body">
<div class="role__top">
<h3>Chief Investment Officer</h3>
<span class="pill pill--int">Shortlist</span>
</div>
<p class="role__org">Holloway Group · Family office</p>
<ul class="role__chips">
<li class="tag">Geneva</li>
<li class="tag">CHF 1.1M</li>
<li class="tag">Direct</li>
</ul>
</div>
<button class="bookmark" aria-pressed="false" aria-label="Save this mandate" title="Save"></button>
</li>
<li class="role reveal" data-cat="board">
<div class="role__logo" aria-hidden="true">CV</div>
<div class="role__body">
<div class="role__top">
<h3>Senior Independent Director</h3>
<span class="pill pill--new">New</span>
</div>
<p class="role__org">Calderon & Vey · Listed insurer</p>
<ul class="role__chips">
<li class="tag tag--remote">Hybrid · London</li>
<li class="tag">£95k retainer</li>
<li class="tag">Board</li>
</ul>
</div>
<button class="bookmark" aria-pressed="false" aria-label="Save this mandate" title="Save"></button>
</li>
</ul>
<p class="roles__foot reveal">Full briefs are released to verified principals only. <a href="#access" data-scroll>Request access</a> to view compensation detail and reporting lines.</p>
</div>
</section>
<!-- VETTED NETWORK -->
<section class="section" id="network">
<div class="wrap network">
<div class="network__copy reveal">
<span class="kicker">The network</span>
<h2 class="display display--sm">A vetted circle, not a database.</h2>
<p class="section__sub">Membership is by introduction. Every operator is reference-checked, assessed against a leadership rubric, and reviewed annually. We curate fewer than four hundred actively-tracked principals at any time.</p>
<ul class="checks">
<li>Two-stage leadership assessment with an occupational psychologist</li>
<li>Verified track record across at least one full economic cycle</li>
<li>Discreet referencing from prior chairs and investors</li>
<li>Annual review — dormant profiles are removed</li>
</ul>
<a class="btn btn--line" href="#access" data-scroll>Apply to be considered</a>
</div>
<ul class="network__panel reveal" aria-label="Network composition">
<li><strong>372</strong><span>Actively tracked principals</span></li>
<li><strong>61%</strong><span>Sourced via private referral</span></li>
<li><strong>27</strong><span>Sectors represented</span></li>
<li><strong>9.2/10</strong><span>Average chair reference score</span></li>
</ul>
</div>
</section>
<!-- PROCESS -->
<section class="section section--dark" id="process">
<div class="wrap">
<header class="section__head reveal">
<span class="kicker kicker--gold">How we work</span>
<h2 class="display display--sm light">Four quiet stages, one appointment.</h2>
</header>
<ol class="steps">
<li class="step reveal">
<span class="step__no">01</span>
<h3>Confidential brief</h3>
<p>A single partner meets the board to define the mandate, success profile and remuneration envelope under NDA.</p>
</li>
<li class="step reveal">
<span class="step__no">02</span>
<h3>Discreet mapping</h3>
<p>We map the market off the record and approach incumbents personally — never through an advertised post.</p>
</li>
<li class="step reveal">
<span class="step__no">03</span>
<h3>Assessed shortlist</h3>
<p>Each finalist arrives with a full dossier: assessment, referencing and benchmarking, ready for the board.</p>
</li>
<li class="step reveal">
<span class="step__no">04</span>
<h3>Appointment & care</h3>
<p>We support negotiation, onboarding and a structured 100-day review to protect the placement.</p>
</li>
</ol>
</div>
</section>
<!-- ACCESS CTA -->
<section class="section access" id="access">
<div class="wrap access__inner reveal">
<div class="access__copy">
<span class="kicker kicker--gold">Request access</span>
<h2 class="display display--sm">Begin a confidential conversation.</h2>
<p class="section__sub">Tell us who you are. A partner responds personally within one business day — never an inbox, never a queue.</p>
<ul class="access__assure">
<li>Held in strict confidence</li>
<li>Reviewed by a named partner</li>
<li>No marketing, ever</li>
</ul>
</div>
<form class="access__form" id="accessForm" novalidate>
<div class="field">
<label for="name">Full name</label>
<input id="name" name="name" type="text" autocomplete="name" required placeholder="e.g. Adaeze Okafor" />
</div>
<div class="field">
<label for="email">Work email</label>
<input id="email" name="email" type="email" autocomplete="email" required placeholder="you@company.com" />
</div>
<div class="field">
<label for="role">I am a</label>
<select id="role" name="role" required>
<option value="">Select…</option>
<option>Board director / Chair</option>
<option>Founder / CEO</option>
<option>Investor / PE</option>
<option>Senior candidate</option>
</select>
</div>
<div class="field">
<label for="brief">In brief</label>
<textarea id="brief" name="brief" rows="3" placeholder="The mandate or interest you'd like to discuss…"></textarea>
</div>
<button class="btn btn--gold btn--lg btn--block" type="submit">Request confidential access</button>
<p class="access__fine">By submitting you agree to our discreet handling of your details.</p>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap footer__inner">
<div class="footer__brand">
<span class="brand brand--foot">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 32 32" width="24" height="24"><path d="M16 2l4.4 9.2L30 12.6l-7 6.9L24.8 30 16 25.1 7.2 30 9 19.5 2 12.6l9.6-1.4L16 2z" fill="currentColor"/></svg>
</span>
<span class="brand__name">Aurelian <em>Partners</em></span>
</span>
<p>Retained executive search. London · Zürich · Singapore.</p>
</div>
<nav class="footer__cols" aria-label="Footer">
<div>
<h4>Practice</h4>
<a href="#practice">Our approach</a>
<a href="#network">The network</a>
<a href="#process">Process</a>
</div>
<div>
<h4>Engage</h4>
<a href="#roles">Mandates</a>
<a href="#access">Request access</a>
<a href="#access">Client login</a>
</div>
<div>
<h4>Firm</h4>
<a href="#top">Confidentiality</a>
<a href="#top">Privacy</a>
<a href="#top">Contact</a>
</div>
</nav>
</div>
<div class="wrap footer__bar">
<span>© 2026 Aurelian Partners. A fictional search practice.</span>
<span class="footer__seal">Discretion · Rigour · Reach</span>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Executive Landing
A full-screen landing page for a fictional retained executive-search practice, Aurelian Partners. The aesthetic leans prestige and discreet: a charcoal and ivory base lifted with restrained gold accents, a Playfair Display serif paired with Inter for body copy, and generous whitespace. The hero balances a confidential value proposition against a dark “confidential mandate” card with a status bar, while figures beneath count up as they enter view.
Below the hero, a practice section lays out the discretion / reach / rigour value props, then a filterable list of leadership mandates — each row carries a company monogram, status pill, salary and location chips, a remote badge, and a save/bookmark toggle. Filter chips narrow the list by practice area, a vetted-network panel summarises the curated circle, and a dark four-step process section explains the engagement flow.
Everything runs on vanilla JavaScript: an IntersectionObserver drives scroll reveals and the animated counters, the filter chips and bookmark toggles update live with a small toast() helper, the sticky nav gains a shadow on scroll, the mobile nav collapses into a hamburger, and the request-access form validates name, email and role before confirming with a personalised toast.
Illustrative UI only — fictional jobs & companies, not a real hiring platform.