515 lines
14 KiB
HTML
515 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>SPEER — Spearmint Beer</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono:wght@700&display=swap" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--mint: #00FF88;
|
||
|
|
--mint-dark: #00CC6A;
|
||
|
|
--mint-pale: #00FF8820;
|
||
|
|
--black: #0a0a0a;
|
||
|
|
--dark: #111111;
|
||
|
|
--grey: #222222;
|
||
|
|
--white: #f0f0f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Space Grotesk', system-ui, sans-serif;
|
||
|
|
background: var(--black);
|
||
|
|
color: var(--white);
|
||
|
|
overflow-x: hidden;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === HERO === */
|
||
|
|
.hero {
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
text-align: center;
|
||
|
|
padding: 2rem;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: -50%;
|
||
|
|
left: -50%;
|
||
|
|
width: 200%;
|
||
|
|
height: 200%;
|
||
|
|
background: radial-gradient(circle at 50% 50%, rgba(0,255,136,0.15) 0%, transparent 50%);
|
||
|
|
animation: breathe 8s ease-in-out infinite;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes breathe {
|
||
|
|
0%, 100% { transform: scale(1); opacity: 0.6; }
|
||
|
|
50% { transform: scale(1.2); opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-tag {
|
||
|
|
font-family: 'Space Mono', monospace;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
letter-spacing: 0.3em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--mint);
|
||
|
|
border: 1px solid var(--mint);
|
||
|
|
padding: 0.4rem 1.2rem;
|
||
|
|
border-radius: 100px;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero h1 {
|
||
|
|
font-size: clamp(5rem, 18vw, 16rem);
|
||
|
|
font-weight: 700;
|
||
|
|
letter-spacing: -0.03em;
|
||
|
|
line-height: 0.85;
|
||
|
|
color: var(--mint);
|
||
|
|
text-shadow: 0 0 80px rgba(0,255,136,0.4), 0 0 200px rgba(0,255,136,0.15);
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero h1 span.glint {
|
||
|
|
position: absolute;
|
||
|
|
top: 0; left: 0;
|
||
|
|
width: 100%; height: 100%;
|
||
|
|
background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.3) 45%, transparent 50%);
|
||
|
|
background-size: 200% 100%;
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
background-clip: text;
|
||
|
|
animation: glint 4s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes glint {
|
||
|
|
0%, 100% { background-position: 200% 0; }
|
||
|
|
50% { background-position: -200% 0; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-tagline {
|
||
|
|
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
|
||
|
|
color: var(--white);
|
||
|
|
opacity: 0.8;
|
||
|
|
margin-top: 2rem;
|
||
|
|
max-width: 500px;
|
||
|
|
line-height: 1.6;
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-tagline em {
|
||
|
|
color: var(--mint);
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-hint {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 2rem;
|
||
|
|
font-family: 'Space Mono', monospace;
|
||
|
|
font-size: 0.7rem;
|
||
|
|
letter-spacing: 0.2em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--mint);
|
||
|
|
opacity: 0.5;
|
||
|
|
animation: bob 2s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bob {
|
||
|
|
0%, 100% { transform: translateY(0); }
|
||
|
|
50% { transform: translateY(8px); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === MARQUEE === */
|
||
|
|
.marquee {
|
||
|
|
overflow: hidden;
|
||
|
|
background: var(--mint);
|
||
|
|
padding: 0.8rem 0;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.marquee-inner {
|
||
|
|
display: inline-block;
|
||
|
|
animation: marquee-scroll 12s linear infinite;
|
||
|
|
font-family: 'Space Mono', monospace;
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 1rem;
|
||
|
|
color: var(--black);
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes marquee-scroll {
|
||
|
|
0% { transform: translateX(0); }
|
||
|
|
100% { transform: translateX(-50%); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === SECTIONS === */
|
||
|
|
.section {
|
||
|
|
padding: 6rem 2rem;
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-label {
|
||
|
|
font-family: 'Space Mono', monospace;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
letter-spacing: 0.3em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--mint);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section h2 {
|
||
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
||
|
|
font-weight: 700;
|
||
|
|
line-height: 1.1;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section p {
|
||
|
|
font-size: 1.15rem;
|
||
|
|
line-height: 1.8;
|
||
|
|
color: rgba(240,240,240,0.7);
|
||
|
|
max-width: 600px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === FEATURES GRID === */
|
||
|
|
.features {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
margin-top: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-card {
|
||
|
|
background: var(--dark);
|
||
|
|
border: 1px solid var(--grey);
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 2rem;
|
||
|
|
transition: border-color 0.3s, transform 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-card:hover {
|
||
|
|
border-color: var(--mint);
|
||
|
|
transform: translateY(-4px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-icon {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-card h3 {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
color: var(--mint);
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-card p {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
line-height: 1.6;
|
||
|
|
color: rgba(240,240,240,0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === STATS BAR === */
|
||
|
|
.stats {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
gap: 2rem;
|
||
|
|
padding: 4rem 2rem;
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 0 auto;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-number {
|
||
|
|
font-family: 'Space Mono', monospace;
|
||
|
|
font-size: clamp(2.5rem, 6vw, 4rem);
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--mint);
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-label {
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: rgba(240,240,240,0.5);
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.15em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === TASTE PROFILE === */
|
||
|
|
.taste-bars {
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.taste-bar {
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.taste-bar-label {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
font-family: 'Space Mono', monospace;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.taste-bar-track {
|
||
|
|
height: 8px;
|
||
|
|
background: var(--grey);
|
||
|
|
border-radius: 100px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.taste-bar-fill {
|
||
|
|
height: 100%;
|
||
|
|
background: linear-gradient(90deg, var(--mint-dark), var(--mint));
|
||
|
|
border-radius: 100px;
|
||
|
|
animation: fill-in 2s ease-out forwards;
|
||
|
|
transform-origin: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fill-in {
|
||
|
|
from { width: 0; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === CTA === */
|
||
|
|
.cta-section {
|
||
|
|
text-align: center;
|
||
|
|
padding: 8rem 2rem;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-section::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
background: radial-gradient(ellipse at center, rgba(0,255,136,0.08) 0%, transparent 70%);
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-button {
|
||
|
|
display: inline-block;
|
||
|
|
background: var(--mint);
|
||
|
|
color: var(--black);
|
||
|
|
font-family: 'Space Mono', monospace;
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
padding: 1.2rem 3rem;
|
||
|
|
border-radius: 100px;
|
||
|
|
text-decoration: none;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.15em;
|
||
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
cursor: pointer;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-button:hover {
|
||
|
|
transform: scale(1.05);
|
||
|
|
box-shadow: 0 0 40px rgba(0,255,136,0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-sub {
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: rgba(240,240,240,0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === FOOTER === */
|
||
|
|
footer {
|
||
|
|
padding: 3rem 2rem;
|
||
|
|
text-align: center;
|
||
|
|
border-top: 1px solid var(--grey);
|
||
|
|
font-size: 0.8rem;
|
||
|
|
color: rgba(240,240,240,0.3);
|
||
|
|
font-family: 'Space Mono', monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer a {
|
||
|
|
color: var(--mint);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === RESPONSIVE === */
|
||
|
|
@media (max-width: 600px) {
|
||
|
|
.stats { grid-template-columns: 1fr; gap: 2rem; }
|
||
|
|
.features { grid-template-columns: 1fr; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- HERO -->
|
||
|
|
<section class="hero">
|
||
|
|
<div class="hero-tag">Est. 2026 — Craft Spearmint Beer</div>
|
||
|
|
<h1>
|
||
|
|
<span>SPPEER</span>
|
||
|
|
</h1>
|
||
|
|
<p class="hero-tagline">
|
||
|
|
Not a toothpaste. Not a soda.<br>
|
||
|
|
It's <em>beer. But minty.</em>
|
||
|
|
</p>
|
||
|
|
<div class="scroll-hint">↓ scroll like a proper ↓</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- MARQUEE -->
|
||
|
|
<div class="marquee">
|
||
|
|
<div class="marquee-inner">
|
||
|
|
SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED •
|
||
|
|
SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED •
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- WHAT IS IT -->
|
||
|
|
<section class="section">
|
||
|
|
<div class="section-label">// What is it?</div>
|
||
|
|
<h2>Yes, it's a spearmint beer.<br>No, we didn't lose the plot.</h2>
|
||
|
|
<p>
|
||
|
|
Meet Speer — the craft beer that starts like a After Eight and ends like a Friday night.
|
||
|
|
We took proper ale brewing, added fresh spearmint leaves, and let it chill out for three weeks.
|
||
|
|
The result? A drink that tastes like doing absolutely nothing on a summer balcony.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="features">
|
||
|
|
<div class="feature-card">
|
||
|
|
<div class="feature-icon">🌿</div>
|
||
|
|
<h3>Real Spearmint</h3>
|
||
|
|
<p>Not the "mint flavour" garbage. Hand-picked spearmint from Devon fields. If it doesn't smell like a British garden after rain, we don't use it.</p>
|
||
|
|
</div>
|
||
|
|
<div class="feature-card">
|
||
|
|
<div class="feature-icon">🍺</div>
|
||
|
|
<h3>Ale Base</h3>
|
||
|
|
<p>Our pale ale base is brewed with local English barley and a whisper of Simcoe hops. It's the sort of thing your dad would nod at approvingly.</p>
|
||
|
|
</div>
|
||
|
|
<div class="feature-card">
|
||
|
|
<div class="feature-icon">❄️</div>
|
||
|
|
<h3>Cold-Infused</h3>
|
||
|
|
<p>No boiling the mint to death. We cold-contact infuse, which means every molecule of green goodness stays intact. Proper science, not magic.</p>
|
||
|
|
</div>
|
||
|
|
<div class="feature-card">
|
||
|
|
<div class="feature-icon">😎</div>
|
||
|
|
<h3>4.2% ABV</h3>
|
||
|
|
<p>That gentle "I've made good decisions today" buzz. You could drink a six-pack. We wouldn't recommend it. But you could.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- STATS -->
|
||
|
|
<div class="stats">
|
||
|
|
<div>
|
||
|
|
<div class="stat-number">100%</div>
|
||
|
|
<div class="stat-label">Spearmint, No BS</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="stat-number">4.2%</div>
|
||
|
|
<div class="stat-label">ABV</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="stat-number">0.33L</div>
|
||
|
|
<div class="stat-label">Per Can</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- TASTE PROFILE -->
|
||
|
|
<section class="section">
|
||
|
|
<div class="section-label">// Taste Profile</div>
|
||
|
|
<h2>How it hits</h2>
|
||
|
|
<p>Think of it like this: if a pale ale and a mojito had a baby, and that baby went to art college.</p>
|
||
|
|
|
||
|
|
<div class="taste-bars">
|
||
|
|
<div class="taste-bar">
|
||
|
|
<div class="taste-bar-label">
|
||
|
|
<span>Spearmint Punch</span>
|
||
|
|
<span>9/10</span>
|
||
|
|
</div>
|
||
|
|
<div class="taste-bar-track">
|
||
|
|
<div class="taste-bar-fill" style="width: 90%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="taste-bar">
|
||
|
|
<div class="taste-bar-label">
|
||
|
|
<span>Hop Bitterness</span>
|
||
|
|
<span>3/10</span>
|
||
|
|
</div>
|
||
|
|
<div class="taste-bar-track">
|
||
|
|
<div class="taste-bar-fill" style="width: 30%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="taste-bar">
|
||
|
|
<div class="taste-bar-label">
|
||
|
|
<span>Refreshing</span>
|
||
|
|
<span>10/10</span>
|
||
|
|
</div>
|
||
|
|
<div class="taste-bar-track">
|
||
|
|
<div class="taste-bar-fill" style="width: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="taste-bar">
|
||
|
|
<div class="taste-bar-label">
|
||
|
|
<span>Malty Sweetness</span>
|
||
|
|
<span>4/10</span>
|
||
|
|
</div>
|
||
|
|
<div class="taste-bar-track">
|
||
|
|
<div class="taste-bar-fill" style="width: 40%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="taste-bar">
|
||
|
|
<div class="taste-bar-label">
|
||
|
|
<span>Overall "Brilliant"</span>
|
||
|
|
<span>∞/10</span>
|
||
|
|
</div>
|
||
|
|
<div class="taste-bar-track">
|
||
|
|
<div class="taste-bar-fill" style="width: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- MARQUEE 2 -->
|
||
|
|
<div class="marquee" style="background: var(--dark); border-top: 1px solid var(--grey); border-bottom: 1px solid var(--grey);">
|
||
|
|
<div class="marquee-inner" style="color: var(--mint); animation-direction: reverse;">
|
||
|
|
SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED •
|
||
|
|
SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED •
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CTA -->
|
||
|
|
<section class="cta-section">
|
||
|
|
<div class="section-label">// Come on then</div>
|
||
|
|
<h2>Ready to try it?</h2>
|
||
|
|
<p style="margin: 0 auto 2rem; max-width: 400px;">
|
||
|
|
It's not in shops yet. But you're reading this. Which means someone's thinking about making it.
|
||
|
|
</p>
|
||
|
|
<button class="cta-button" onclick="alert('You want SPEER? Fair enough. 👌')">
|
||
|
|
Get In Touch
|
||
|
|
</button>
|
||
|
|
<p class="cta-sub">Limited first run. Don't say we didn't warn you.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- FOOTER -->
|
||
|
|
<footer>
|
||
|
|
<p>© 2026 SPEER BREWING CO. — Made with 😌 in England.</p>
|
||
|
|
<p style="margin-top: 0.5rem; font-size: 0.7rem; opacity: 0.5;">Powered by <a href="#">Speer</a> — the spearmint beer that shouldn't work but somehow does.</p>
|
||
|
|
<p style="margin-top: 1rem; font-size: 0.7rem;">DRINK RESPONSIBLY. OR DON'T. WE'RE A WEBSITE, NOT YOUR DAD. 🍻</p>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|