generated from jric11/baseProject
90 lines
6.6 KiB
HTML
90 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="theme-color" content="#183c30">
|
||
<meta name="description" content="MyHuntRoster is coming soon. A new season is on the horizon. Check back for updates.">
|
||
<title>Coming Soon | MyHuntRoster</title>
|
||
<style>
|
||
:root { color-scheme: light; --forest: #183c30; --cream: #f6f5f0; --gold: #c5a578; }
|
||
* { box-sizing: border-box; }
|
||
body { margin: 0; min-height: 100vh; min-height: 100svh; background: var(--cream); color: var(--forest); font-family: "Segoe UI", Arial, sans-serif; }
|
||
.page { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1.1fr 1fr; }
|
||
.content { display: flex; flex-direction: column; padding: clamp(24px, 5vw, 80px); }
|
||
.brand { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -.7px; }
|
||
.brand svg { width: 36px; height: 36px; }
|
||
main { margin: auto 0; padding: 80px 0; max-width: 590px; }
|
||
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px; font-size: 11px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
|
||
.eyebrow::before { content: ""; width: 7px; height: 7px; background: #8a6b3f; border-radius: 50%; }
|
||
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(54px, 6.5vw, 100px); font-weight: 400; line-height: 1.04; letter-spacing: -.055em; }
|
||
h1 em { color: #657963; font-weight: 400; }
|
||
.description { max-width: 390px; margin: 30px 0 0; color: #56665c; font-size: 17px; line-height: 1.8; }
|
||
.launch-note { display: flex; gap: 14px; align-items: center; margin-top: 44px; padding-top: 24px; border-top: 1px solid #d8dfd5; max-width: 390px; }
|
||
.launch-note svg { flex-shrink: 0; width: 23px; height: 23px; }
|
||
.launch-note p { margin: 0; font-size: 13px; line-height: 1.7; color: #56665c; }
|
||
.launch-note strong { display: block; color: var(--forest); font-weight: 600; }
|
||
footer { font-size: 11px; color: #647367; letter-spacing: .5px; }
|
||
.landscape { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 640px; overflow: hidden; background: #183c30; color: #e5e9d9; }
|
||
.landscape::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, #0b241caa); }
|
||
.scene { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||
.scene-label { z-index: 1; align-self: flex-end; margin: 40px; padding: 9px 14px; border: 1px solid #e5e9d94d; border-radius: 30px; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; }
|
||
.scene-caption { z-index: 1; margin: 48px; }
|
||
.scene-caption span { display: block; margin-bottom: 14px; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #c5cfbc; }
|
||
.scene-caption p { margin: 0; max-width: 340px; font: 32px/1.25 Georgia, serif; letter-spacing: -.6px; }
|
||
@media (min-width: 1600px) { .content { padding-left: max(80px, calc((100vw - 1440px) / 2)); } }
|
||
@media (max-width: 760px) {
|
||
.page { grid-template-columns: 1fr; }
|
||
.content { padding: 28px; min-height: 75svh; }
|
||
main { padding: 64px 0; }
|
||
h1 { font-size: clamp(54px, 12vw, 80px); }
|
||
.landscape { min-height: 400px; }
|
||
.scene-label { margin: 28px; }
|
||
.scene-caption { margin: 28px; }
|
||
.scene-caption p { font-size: 28px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<div class="content">
|
||
<header class="brand">
|
||
<svg viewBox="0 0 40 40" fill="none" aria-hidden="true"><path d="M20 4 5 31h30L20 4Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="m12 31 8-15 8 15M20 24v12" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>
|
||
MyHuntRoster
|
||
</header>
|
||
<main>
|
||
<p class="eyebrow">Coming soon</p>
|
||
<h1>A new season.<br><em>A fresh start.</em></h1>
|
||
<p class="description">Good things are taking shape behind the scenes. We’re getting MyHuntRoster ready for the next chapter of your hunting club.</p>
|
||
<div class="launch-note">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2" stroke-linecap="round"/></svg>
|
||
<p><strong>We’re preparing for launch.</strong>Check back soon. We’ll see you out there.</p>
|
||
</div>
|
||
</main>
|
||
<footer>MyHuntRoster / Built for the traditions you share.</footer>
|
||
</div>
|
||
<aside class="landscape" aria-label="Illustration of a quiet forest at sunrise">
|
||
<svg class="scene" viewBox="0 0 700 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
|
||
<defs>
|
||
<linearGradient id="sky" x2="0" y2="1"><stop stop-color="#718b75"/><stop offset="1" stop-color="#c7c6a0"/></linearGradient>
|
||
<linearGradient id="ridge" x2="0" y2="1"><stop stop-color="#466652"/><stop offset="1" stop-color="#284c3b"/></linearGradient>
|
||
<g id="pine"><path d="M0-130-38-55h19l-34 55h29l-39 64H63L24 0h29L19-55h19Z" fill="currentColor"/><path d="M-5 50H5v55H-5Z" fill="currentColor"/></g>
|
||
</defs>
|
||
<path fill="url(#sky)" d="M0 0h700v1000H0z"/>
|
||
<circle cx="410" cy="310" r="92" fill="#e4d6a7" opacity=".85"/>
|
||
<path d="M0 440 120 365 230 425 360 345 510 430 620 370 700 405V1000H0Z" fill="#84977b"/>
|
||
<path d="m0 535 150-105 140 90 180-105 230 100v485H0Z" fill="#637e64"/>
|
||
<path d="m0 600 190-95 160 65 170-70 180 95v405H0Z" fill="url(#ridge)"/>
|
||
<g color="#385d46"><use href="#pine" transform="translate(60 590) scale(.7)"/><use href="#pine" transform="translate(150 570) scale(.5)"/><use href="#pine" transform="translate(545 570) scale(.8)"/><use href="#pine" transform="translate(650 610) scale(.6)"/></g>
|
||
<path d="M0 720Q175 590 340 705T700 665V1000H0Z" fill="#244c39"/>
|
||
<g color="#193e2e"><use href="#pine" transform="translate(60 760) scale(1.4)"/><use href="#pine" transform="translate(175 795) scale(1)"/><use href="#pine" transform="translate(590 730) scale(1.5)"/><use href="#pine" transform="translate(710 800) scale(1.8)"/></g>
|
||
<path d="M0 890Q240 740 430 855T700 820V1000H0Z" fill="#123425"/>
|
||
<g color="#102e22"><use href="#pine" transform="translate(-15 900) scale(2.2)"/><use href="#pine" transform="translate(490 990) scale(1.7)"/></g>
|
||
</svg>
|
||
<div class="scene-label">The next chapter</div>
|
||
<div class="scene-caption"><span>Rooted in tradition</span><p>More time for what<br>brings us together.</p></div>
|
||
</aside>
|
||
</div>
|
||
</body>
|
||
</html>
|