<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>LakeAndLedger.app</title>
<style>
body {
margin: 0;
min-height: 100vh;
background: #121016;
color: #F7F2FA;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
display: grid;
place-items: center;
}
main {
text-align: center;
padding: 48px 24px;
max-width: 900px;
}
.brand-icon {
width: 120px;
height: 120px;
border-radius: 28px;
margin-bottom: 24px;
}
.header-logo {
width: 420px;
max-width: 90vw;
margin-bottom: 24px;
}
h1 {
margin: 0 0 12px;
font-size: clamp(36px, 7vw, 72px);
letter-spacing: -0.04em;
}
.tagline {
color: #E5B86C;
letter-spacing: 0.16em;
font-size: 16px;
margin-bottom: 32px;
}
.divider {
width: min(700px, 90vw);
height: auto;
margin: 12px auto 32px;
display: block;
}
p {
color: #C7BED3;
font-size: 18px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 24px;
margin-top: 40px;
}
.app {
display: grid;
gap: 10px;
justify-items: center;
color: #C7BED3;
font-size: 13px;
}
.app img {
width: 88px;
height: 88px;
border-radius: 22px;
}
</style>
</head>
<body>
<main>
<img class="brand-icon" src="/assets/brand/lakeandledger-icon.png" alt="LakeAndLedger icon" />
<h1>LakeAndLedger.app</h1>
<div class="tagline">Data • Direction • Discipleship</div>
<img class="divider" src="/assets/brand/gold-divider.png" alt="" />
<p>Asset library is live. App build coming soon.</p>
<div class="grid">
<div class="app">
<img src="/assets/icons/march-madness-bracket.png" alt="" />
<span>March Madness</span>
</div>
<div class="app">
<img src="/assets/icons/bwca-trip-planner.png" alt="" />
<span>BWCA Planner</span>
</div>
<div class="app">
<img src="/assets/icons/investment-portfolio.png" alt="" />
<span>Portfolio</span>
</div>
<div class="app">
<img src="/assets/icons/app-library.png" alt="" />
<span>App Library</span>
</div>
</div>
</main>
</body>
</html>