site/examples/studio.html
generated coverstag filterdark<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VERSEVA Design · Example: studio site</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@500..700&family=Manrope:wght@400..700&family=JetBrains+Mono:wght@400..600&display=swap">
<link rel="stylesheet" href="../../tokens.css?v=1p3">
<link rel="stylesheet" href="../../components.css?v=1p3">
<style>
* { margin: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text-1); font-family: var(--font-sans); font-size: 15px; line-height: 1.6; }
.crumb { position: sticky; top: 0; z-index: 10; background: var(--bg); display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); font-size: 12.5px; color: var(--text-3); }
.crumb a { color: var(--text-2); text-decoration: none; font-family: var(--font-display); font-weight: var(--display-weight); }
.wrap { max-width: var(--container-content); margin: 0 auto; padding: 0 var(--s-5) var(--s-8); }
.hero { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--hairline); min-height: 420px; display: flex; align-items: flex-end; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--bg) 100%); }
.hero .txt { position: relative; z-index: 2; padding: var(--s-6); }
.hero h1 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(34px, 5.5vw, 58px); letter-spacing: -0.025em; line-height: 1.05; max-width: 16ch; }
.hero p { color: var(--text-2); max-width: 46ch; padding-top: var(--s-3); }
section.blk { padding-top: var(--s-7); }
section.blk > h2 { font-family: var(--font-display); font-weight: var(--heading-weight); font-size: 22px; letter-spacing: -0.015em; padding-bottom: var(--s-4); }
.blk .chiprow { padding-bottom: var(--s-4); }
@media (prefers-reduced-motion: no-preference) {
.proj img { transition: transform var(--dur-3) var(--ease-standard); }
.proj:hover img { transform: scale(1.03); }
}
.work { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.proj { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e-1); transition: transform var(--dur-1) var(--ease-standard); }
.proj:active { transform: translateY(1px); }
.proj img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.proj .cap { padding: var(--s-3) var(--s-4); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.proj .cap b { color: var(--text-1); font-family: var(--font-display); font-weight: var(--heading-weight); font-size: 15px; }
.proj .cap span { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.proj.hidden { display: none; }
.contact { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); }
.contact b { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 20px; letter-spacing: -0.015em; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-7); color: var(--text-3); font-size: 12.5px; }
.badge-line { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 13px; color: var(--text-2); }
.crumb a { display: inline-flex; align-items: center; gap: 8px; }
.crumb .vmark { width: 16px; height: 16px; flex: none; }
.crumb .codelink { margin-left: auto; }
</style>
</head>
<body>
<div class="crumb"><a href="../index.html"><svg class="vmark" viewBox="0 0 768 775.92" aria-hidden="true"><defs><clipPath id="vmk-a"><path d="M400 277h358v396.4H400z"/></clipPath><clipPath id="vmk-b"><path d="M10 97h550v576.4H10z"/></clipPath><clipPath id="vmk-c"><path d="M10 94.5h358V491H10z"/></clipPath><clipPath id="vmk-d"><path d="M208 94.5h550V671H208z"/></clipPath></defs><g clip-path="url(#vmk-a)"><path fill="currentColor" opacity=".55" d="M 558.605469 278.128906 C 555.410156 277.984375 552.164062 277.90625 548.96875 277.90625 C 466.261719 277.90625 407.433594 327.675781 401.222656 333.144531 L 400.800781 333.59375 C 400.800781 333.59375 587.386719 406.570312 718.046875 673.386719 C 718.046875 673.386719 767.757812 550.011719 756.207031 509.574219 C 740.042969 453 663.917969 362.328125 584.683594 279.359375 L 558.605469 278.128906"/></g><g clip-path="url(#vmk-b)"><path fill="currentColor" d="M 49.953125 673.386719 C 49.953125 673.386719 262.128906 253.59375 559.761719 253.59375 C 497.894531 190.457031 437.765625 134.679688 406.402344 106.136719 C 393.699219 94.574219 374.308594 94.574219 361.601562 106.136719 C 285.859375 175.0625 42.257812 402.917969 11.796875 509.574219 C 0.242188 550.011719 49.953125 673.386719 49.953125 673.386719"/></g><g clip-path="url(#vmk-c)"><path fill="currentColor" opacity=".55" d="M 209.394531 489.785156 C 212.589844 489.929688 215.835938 490.007812 219.03125 490.007812 C 301.738281 490.007812 360.566406 440.238281 366.777344 434.765625 L 367.199219 434.316406 C 367.199219 434.316406 180.613281 361.34375 49.953125 94.523438 C 49.953125 94.523438 0.242188 217.902344 11.792969 258.335938 C 27.957031 314.914062 104.082031 405.585938 183.316406 488.554688 L 209.394531 489.785156"/></g><g clip-path="url(#vmk-d)"><path fill="currentColor" d="M 718.046875 94.523438 C 718.046875 94.523438 505.871094 514.316406 208.238281 514.316406 C 270.105469 577.453125 330.234375 633.230469 361.597656 661.773438 C 374.300781 673.335938 393.691406 673.335938 406.398438 661.773438 C 482.140625 592.847656 725.742188 364.992188 756.203125 258.335938 C 767.757812 217.902344 718.046875 94.523438 718.046875 94.523438"/></g></svg><span>VERSEVA Design</span></a><span>examples</span><span>studio site</span><a class="btn btn-secondary sm codelink" href="../code.html?f=examples/studio.html">Code</a></div>
<div class="wrap">
<header class="hero">
<img src="assets/studio-hero.png" alt="Dark studio workspace lit by a red-accented interface">
<div class="veil"></div>
<div class="txt">
<h1>Foundry Nine builds quiet software</h1>
<p>A three-person studio shipping consoles, tools, and the occasional impossible request. Work below; the filter is real.</p>
</div>
</header>
<section class="blk">
<h2>Selected work</h2>
<div class="chiprow" id="tags">
<button class="fchip" type="button" aria-pressed="true" data-tag="all">All <span class="cnt">3</span></button>
<button class="fchip" type="button" aria-pressed="false" data-tag="motion">Motion</button>
<button class="fchip" type="button" aria-pressed="false" data-tag="glass">Glass</button>
<button class="fchip" type="button" aria-pressed="false" data-tag="particles">Particles</button>
</div>
<div class="work" id="work">
<a class="proj" href="#ribbon" data-tag="motion"><img src="assets/cover-ribbons.png" alt="Flowing dark glass ribbons with a red edge glow"><span class="cap"><b>Ribbonline</b><span>MOTION IDENT</span></span></a>
<a class="proj" href="#panels" data-tag="glass"><img src="assets/cover-panels.png" alt="Layered translucent panels with a red light seam"><span class="cap"><b>Seamwork</b><span>GLASS SYSTEM</span></span></a>
<a class="proj" href="#sphere" data-tag="particles"><img src="assets/cover-particles.png" alt="Particle sphere dissolving into red at one edge"><span class="cap"><b>Dissolve</b><span>PARTICLE STUDY</span></span></a>
</div>
</section>
<section class="blk">
<div class="contact">
<b>One project a quarter. Yours?</b>
<button class="btn btn-primary" type="button" id="contactbtn">Start the conversation</button>
</div>
</section>
<footer>
<span>Foundry Nine is fictional; this page is a VERSEVA Design example.</span>
<span class="badge-line">Built on VERSEVA Design</span>
</footer>
</div>
<div id="toastwrap"></div>
<script>
document.getElementById('tags').addEventListener('click', (e) => {
const chip = e.target.closest('.fchip');
if (!chip) return;
document.querySelectorAll('#tags .fchip').forEach((c) => c.setAttribute('aria-pressed', c === chip ? 'true' : 'false'));
const tag = chip.dataset.tag;
document.querySelectorAll('#work .proj').forEach((p) => {
p.classList.toggle('hidden', tag !== 'all' && p.dataset.tag !== tag);
});
});
document.getElementById('contactbtn').addEventListener('click', () => {
const wrap = document.getElementById('toastwrap');
wrap.replaceChildren();
const toast = document.createElement('div');
toast.className = 'toast ok';
toast.style.position = 'fixed';
toast.style.right = 'var(--s-5)';
toast.style.bottom = 'var(--s-5)';
toast.style.zIndex = '9';
toast.innerHTML = '<span class="dot"></span>Nine reads everything. Reply inside two days.';
wrap.append(toast);
setTimeout(() => toast.remove(), 2400);
});
</script>
</body>
</html>