461 lines
15 KiB
HTML
461 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<title>Captured Sun</title>
|
|
<link rel="icon" href="/_/logo.svg">
|
|
<style>
|
|
@font-face {
|
|
font-family: 'IMFell';
|
|
src: url('/_/IMFell/IMFell.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
body {
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #000;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
|
|
|
|
img {
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
a:visited {
|
|
color: inherit;
|
|
}
|
|
|
|
@keyframes rotate-stars {
|
|
0% { transform: rotate(0deg) translateX(0); }
|
|
25% { transform: rotate(90deg) translateX(50px); }
|
|
50% { transform: rotate(180deg) translateX(0); }
|
|
75% { transform: rotate(270deg) translateX(-50px); }
|
|
100% { transform: rotate(360deg) translateX(0); }
|
|
}
|
|
|
|
.stars {
|
|
display: block;
|
|
height: auto;
|
|
position: absolute;
|
|
animation: rotate-stars 950s linear infinite;
|
|
transform-origin: center center;
|
|
top: -550px;
|
|
width: 1600px;
|
|
z-index: 0;
|
|
}
|
|
|
|
.moon {
|
|
position: fixed;
|
|
z-index: 2;
|
|
width: 100vw;
|
|
left: 0px;
|
|
bottom: 0px; /* seam overlap — tweak to taste */
|
|
}
|
|
|
|
.atlas {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: -100px;
|
|
transform: translateX(-50%);
|
|
width: 85vw;
|
|
height: auto;
|
|
z-index: 3;
|
|
pointer-events: none;
|
|
}
|
|
.atlas img { display: block; width: 100%; height: auto; }
|
|
|
|
.nav {
|
|
position: fixed;
|
|
bottom: 440px; left: 0; right: 0;
|
|
display: flex; justify-content: center; gap: 18px;
|
|
z-index: 4;
|
|
}
|
|
|
|
.btn {
|
|
padding: 12px 20px;
|
|
border-radius: 11px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
cursor: pointer;
|
|
font-family: 'IMFell';
|
|
backdrop-filter: blur(14px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(14px) saturate(160%);
|
|
box-shadow:
|
|
inset 0 0.5px 0 rgba(255, 255, 255, 0.35),
|
|
inset 0 -1px 0 rgba(255, 255, 255, 0.08),
|
|
0 8px 24px rgba(0, 0, 0, 0.25);
|
|
transition: transform 120ms ease, box-shadow 120ms ease;
|
|
}
|
|
.btn:hover { transform: translateY(-1px); }
|
|
.btn:active { transform: translateY(0); }
|
|
|
|
.btn-red {
|
|
background: rgba(220, 38, 38, 0.30);
|
|
color: #d06868;
|
|
border: 0.5px solid rgba(254, 202, 202, 0.05);
|
|
}
|
|
.btn-orange {
|
|
background: rgba(234, 88, 12, 0.30);
|
|
color: #d79d5a;
|
|
border: 0.5px solid rgba(254, 215, 170, 0.05);
|
|
}
|
|
.btn-yellow {
|
|
background: rgba(234, 179, 8, 0.30);
|
|
color: #d0c04b;
|
|
border: 0.5px solid rgba(254, 240, 138, 0.05);
|
|
}
|
|
|
|
.menu {
|
|
position: fixed;
|
|
border-radius: 11px;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
backdrop-filter: blur(14px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(14px) saturate(160%);
|
|
box-shadow:
|
|
inset 0 0.5px 0 rgba(255, 255, 255, 0.35),
|
|
inset 0 -1px 0 rgba(255, 255, 255, 0.08),
|
|
0 8px 24px rgba(0, 0, 0, 0.25);
|
|
transition:
|
|
top 460ms cubic-bezier(0.32, 0.72, 0.20, 1),
|
|
left 460ms cubic-bezier(0.32, 0.72, 0.20, 1),
|
|
width 460ms cubic-bezier(0.32, 0.72, 0.20, 1),
|
|
height 460ms cubic-bezier(0.32, 0.72, 0.20, 1),
|
|
border-radius 460ms cubic-bezier(0.32, 0.72, 0.20, 1);
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
font-family: 'IMFell';
|
|
}
|
|
.menu.is-active { visibility: visible; pointer-events: auto; }
|
|
|
|
.menu-red { background: rgba(220, 38, 38, 0.30); color: #fab2b2; border: 0.5px solid rgba(254, 202, 202, 0.05); }
|
|
.menu-orange { background: rgba(234, 88, 12, 0.30); color: #d79d5a; border: 0.5px solid rgba(254, 215, 170, 0.05); }
|
|
.menu-yellow { background: rgba(234, 179, 8, 0.30); color: #d0c04b; border: 0.5px solid rgba(254, 240, 138, 0.05); }
|
|
|
|
.menu-close {
|
|
position: absolute;
|
|
top: 18px; right: 18px;
|
|
width: 36px; height: 36px;
|
|
border-radius: 50%;
|
|
border: 0.5px solid rgba(255, 255, 255, 0.10);
|
|
background: rgba(0, 0, 0, 0.20);
|
|
color: inherit;
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
display: flex; align-items: center; justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 180ms ease, background 150ms ease;
|
|
z-index: 2;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
}
|
|
.menu-close:hover { background: rgba(0, 0, 0, 0.35); }
|
|
.menu.is-open .menu-close { opacity: 1; }
|
|
|
|
.menu-inner {
|
|
padding: 72px 56px 56px;
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
transition: opacity 220ms ease, transform 220ms ease;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
color: inherit;
|
|
}
|
|
.menu.is-open .menu-inner {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
transition-delay: 280ms;
|
|
}
|
|
|
|
.menu h2 {
|
|
margin: 0 0 24px;
|
|
font-size: 36px;
|
|
font-weight: 400;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.menu p {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.65;
|
|
margin: 0 0 16px;
|
|
max-width: 62ch;
|
|
}
|
|
|
|
.link-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.link-list a {
|
|
display: block;
|
|
padding: 16px 18px;
|
|
background: rgba(0, 0, 0, 0.15);
|
|
border: 0.5px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 10px;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: background 150ms ease, transform 150ms ease;
|
|
}
|
|
.link-list a:hover { background: rgba(0, 0, 0, 0.30); transform: translateY(-1px); }
|
|
.link-list .label { display: block; font-size: 17px; }
|
|
.link-list .desc {
|
|
display: block;
|
|
font-size: 13px;
|
|
opacity: 0.7;
|
|
margin-top: 4px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
}
|
|
|
|
.contact-form {
|
|
display: grid;
|
|
gap: 16px;
|
|
max-width: 560px;
|
|
}
|
|
.contact-form label {
|
|
display: grid;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
opacity: 0.85;
|
|
}
|
|
.contact-form input,
|
|
.contact-form textarea {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
font-size: 15px;
|
|
color: #f0e6c8;
|
|
padding: 12px 14px;
|
|
background: rgba(0, 0, 0, 0.50);
|
|
border: 0.5px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 8px;
|
|
outline: none;
|
|
transition: border-color 150ms ease, background 150ms ease;
|
|
}
|
|
.contact-form input::placeholder,
|
|
.contact-form textarea::placeholder { color: rgba(240, 230, 200, 0.35); }
|
|
.contact-form input:focus,
|
|
.contact-form textarea:focus {
|
|
border-color: rgba(255, 255, 255, 0.25);
|
|
background: rgba(0, 0, 0, 0.65);
|
|
}
|
|
.contact-form textarea { resize: vertical; min-height: 140px; }
|
|
.contact-form .submit {
|
|
justify-self: end;
|
|
margin-top: 4px;
|
|
padding: 12px 26px;
|
|
border-radius: 10px;
|
|
border: 0.5px solid rgba(254, 240, 138, 0.10);
|
|
background: rgba(234, 179, 8, 0.40);
|
|
color: inherit;
|
|
font-family: 'IMFell';
|
|
font-size: 16px;
|
|
letter-spacing: 0.04em;
|
|
cursor: pointer;
|
|
transition: transform 120ms ease, background 120ms ease;
|
|
}
|
|
.contact-form .submit:hover { background: rgba(234, 179, 8, 0.55); transform: translateY(-1px); }
|
|
|
|
@media (max-width: 768px) {
|
|
.space {
|
|
position: absolute;
|
|
transform: translate(-50%, 0);
|
|
top: 0px;
|
|
display:none;
|
|
width: 1200px;
|
|
}
|
|
.moon {
|
|
display: none;
|
|
}
|
|
.stars {
|
|
display: none;
|
|
}
|
|
.atlas {
|
|
top: -200px;
|
|
width: 1000px;
|
|
}
|
|
.nav {
|
|
bottom: 1vh
|
|
}
|
|
.menu-red {
|
|
color: rgb(255, 255, 255) !important
|
|
}
|
|
.menu-inner { padding: 64px 28px 28px; }
|
|
.menu h2 { font-size: 28px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="cursor: default">
|
|
|
|
<img class="stars" src="/_/stars.png" alt="">
|
|
<img class="moon" src="/_/moon.png" alt="">
|
|
|
|
<picture class="atlas">
|
|
<source media="(max-width: 768px)" srcset="/_/atlasmobile.png">
|
|
<img src="/_/atlas.webp" alt="">
|
|
</picture>
|
|
|
|
<nav class="nav">
|
|
<button class="btn btn-red">About</button>
|
|
<!-- <button class="btn btn-orange">Our Work</button> -->
|
|
<button class="btn btn-orange">Contact Us</button>
|
|
</nav>
|
|
|
|
<div class="menu menu-red" id="menu-about">
|
|
<button class="menu-close" aria-label="Close">X</button>
|
|
<div class="menu-inner">
|
|
<h2>About</h2>
|
|
<p><i>All energy comes from the sun. To think is to capture, freeze, and reflect it.</i></p>
|
|
<p>Captured Sun was founded in 2022, to answer a simple question: what would the operating system look like if it was rearranged for the modern day?</p>
|
|
<p>The answer we have found is <a style="color: inherit;" href="https://frm.so" target="_blank">Forum</a>: the Community Operating System.</p>
|
|
<p>In concert with Forum, we are happy to accept certain consulting jobs with people or organizations that need custom solutions. If that's you, feel free to reach out.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu menu-orange" id="menu-work">
|
|
<button class="menu-close" aria-label="Close">X</button>
|
|
<div class="menu-inner">
|
|
<h2>Our Work</h2>
|
|
<ul class="link-list">
|
|
<li><a href="https://apple.com" target="_blank" rel="noopener"><span class="label">Apple</span><span class="desc">Product launch microsite</span></a></li>
|
|
<li><a href="https://vercel.com" target="_blank" rel="noopener"><span class="label">Vercel</span><span class="desc">Edge runtime documentation</span></a></li>
|
|
<li><a href="https://linear.app" target="_blank" rel="noopener"><span class="label">Linear</span><span class="desc">Marketing site redesign</span></a></li>
|
|
<li><a href="https://figma.com" target="_blank" rel="noopener"><span class="label">Figma</span><span class="desc">Plugin gallery</span></a></li>
|
|
<li><a href="https://stripe.com" target="_blank" rel="noopener"><span class="label">Stripe</span><span class="desc">Developer onboarding flow</span></a></li>
|
|
<li><a href="https://railway.com" target="_blank" rel="noopener"><span class="label">Railway</span><span class="desc">Pricing page experiments</span></a></li>
|
|
<li><a href="https://anthropic.com" target="_blank" rel="noopener"><span class="label">Anthropic</span><span class="desc">Research publication template</span></a></li>
|
|
<li><a href="https://notion.so" target="_blank" rel="noopener"><span class="label">Notion</span><span class="desc">Template marketplace</span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu menu-orange" id="menu-contact">
|
|
<button class="menu-close" aria-label="Close"><span>X</span></button>
|
|
<div class="menu-inner">
|
|
<h2>Contact Us</h2>
|
|
<form class="contact-form" novalidate onsubmit="return handleContactSubmit(event, this)">
|
|
<label>Name <input type="text" name="name" placeholder="Your name" required></label>
|
|
<label>Email <input type="email" name="email" placeholder="you@example.com"></label>
|
|
<label>Phone <input type="tel" name="phone" placeholder="+1 555 123 4567"></label>
|
|
<label>Message <textarea name="message" placeholder="Tell us about your project..." required></textarea></label>
|
|
<button class="submit" type="submit">Send Message</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function handleContactSubmit(event, form) {
|
|
event.preventDefault();
|
|
var email = form.email.value.trim();
|
|
var phone = form.phone.value.trim();
|
|
if (!email && !phone) {
|
|
form.email.setCustomValidity('Provide an email or a phone number.');
|
|
form.email.reportValidity();
|
|
return false;
|
|
}
|
|
form.email.setCustomValidity('');
|
|
if (!form.checkValidity()) { form.reportValidity(); return false; }
|
|
|
|
|
|
form.reset();
|
|
return false;
|
|
}
|
|
|
|
(function () {
|
|
var pairs = [
|
|
{ btn: document.querySelector('.btn-red'), menu: document.getElementById('menu-about') },
|
|
{ btn: document.querySelector('.btn-orange'), menu: document.getElementById('menu-contact') }
|
|
];
|
|
|
|
var active = null;
|
|
var FINAL_RADIUS = '18px';
|
|
|
|
function applyRect(menu, rect) {
|
|
menu.style.top = rect.top + 'px';
|
|
menu.style.left = rect.left + 'px';
|
|
menu.style.width = rect.width + 'px';
|
|
menu.style.height = rect.height + 'px';
|
|
menu.style.borderRadius = '11px';
|
|
}
|
|
|
|
function applyFinal(menu) {
|
|
menu.style.top = '10vh';
|
|
menu.style.left = '10vw';
|
|
menu.style.width = '80vw';
|
|
menu.style.height = '80vh';
|
|
menu.style.borderRadius = FINAL_RADIUS;
|
|
}
|
|
|
|
function openMenu(pair) {
|
|
if (active) closeMenu();
|
|
var btn = pair.btn, menu = pair.menu;
|
|
if (menu._closeTimer) { clearTimeout(menu._closeTimer); menu._closeTimer = null; }
|
|
|
|
var rect = btn.getBoundingClientRect();
|
|
menu.style.transition = 'none';
|
|
applyRect(menu, rect);
|
|
menu.classList.add('is-active');
|
|
void menu.offsetHeight;
|
|
menu.style.transition = '';
|
|
|
|
btn.style.visibility = 'hidden';
|
|
applyFinal(menu);
|
|
menu.classList.add('is-open');
|
|
active = pair;
|
|
}
|
|
|
|
function closeMenu() {
|
|
if (!active) return;
|
|
var btn = active.btn, menu = active.menu;
|
|
var rect = btn.getBoundingClientRect();
|
|
applyRect(menu, rect);
|
|
menu.classList.remove('is-open');
|
|
|
|
if (menu._closeTimer) clearTimeout(menu._closeTimer);
|
|
menu._closeTimer = setTimeout(function () {
|
|
menu.classList.remove('is-active');
|
|
btn.style.visibility = '';
|
|
menu._closeTimer = null;
|
|
}, 460);
|
|
|
|
active = null;
|
|
}
|
|
|
|
pairs.forEach(function (pair) {
|
|
pair.btn.addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
openMenu(pair);
|
|
});
|
|
pair.menu.addEventListener('click', function (e) { e.stopPropagation(); });
|
|
pair.menu.querySelector('.menu-close').addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
closeMenu();
|
|
});
|
|
});
|
|
|
|
document.addEventListener('click', function () {
|
|
if (active) closeMenu();
|
|
});
|
|
|
|
window.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape' && active) closeMenu();
|
|
});
|
|
|
|
window.addEventListener('resize', function () {
|
|
if (!active) return;
|
|
applyFinal(active.menu);
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|