A continuation of black-apple-cidery.html. The complete source identity, every recorded occurrence, and linked equations are on its first page.
Source transcript · continued
Download complete source text ↓2,154 lines · 66.9 KB
.taproom-grid {
grid-template-columns: 1fr;
max-width: 400px;
margin: 0 auto;
}
.visit {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.hero-content {
padding: 0 1.5rem;
}
.side-text {
display: none;
}
.deco-lines {
display: none;
}
.ciders-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.footer-top {
flex-direction: column;
gap: 3rem;
}
.footer-links {
flex-wrap: wrap;
gap: 2rem 4rem;
}
.about-features {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.about,
.taproom,
.visit-left,
.visit-right {
padding: 5rem 1.5rem;
}
.ciders-header {
padding: 0 1.5rem;
}
.hero-ctas {
flex-direction: column;
gap: 1.5rem;
}
.cursor, .cursor-follower {
display: none;
}
body {
cursor: auto;
}
}
</style>
</head>
<body>
<!-- Grain -->
<div class="grain"></div>
<!-- Custom Cursor -->
<div class="cursor"></div>
<div class="cursor-follower"></div>
<!-- Preloader -->
<div class="preloader">
<div class="preloader-apple">
<svg viewBox="0 0 100 100">
<path d="M50 15 C30 15 15 35 15 55 C15 80 35 90 50 90 C65 90 85 80 85 55 C85 35 70 15 50 15 M50 5 C50 5 55 0 60 5 C65 10 55 15 50 15"/>
</svg>
</div>
<span class="preloader-text">Black Apple</span>
<div class="preloader-bar">
<div class="preloader-progress"></div>
</div>
</div>
<!-- Navigation -->
<nav>
<a href="#" class="logo">
<div class="logo-icon">
<svg viewBox="0 0 50 50">
<path d="M25 8 C15 8 8 18 8 28 C8 42 18 46 25 46 C32 46 42 42 42 28 C42 18 35 8 25 8 M25 2 C25 2 28 0 31 3 C34 6 28 10 25 10"/>
</svg>
</div>
<div class="logo-text">
<span class="logo-main">Black Apple</span>
<span class="logo-sub">Hard Cider</span>
</div>
</a>
<ul class="nav-links">
<li><a href="#about">Our Story</a></li>
<li><a href="#ciders">Ciders</a></li>
<li><a href="#taproom">Taproom</a></li>
<li><a href="#visit">Visit</a></li>
</ul>
<a href="#visit" class="nav-cta">Find Us</a>
</nav>
<!-- Hero -->
<section class="hero">
<!-- Background Layers -->
<div class="hero-bg">
<div class="hero-bg-gradient"></div>
</div>
<!-- Floating Apples -->
<div class="floating-apples">
<div class="floating-apple">
<svg viewBox="0 0 100 100"><path d="M50 15 C30 15 15 35 15 55 C15 80 35 90 50 90 C65 90 85 80 85 55 C85 35 70 15 50 15"/></svg>
</div>
<div class="floating-apple">
<svg viewBox="0 0 100 100"><path d="M50 15 C30 15 15 35 15 55 C15 80 35 90 50 90 C65 90 85 80 85 55 C85 35 70 15 50 15"/></svg>
</div>
<div class="floating-apple">
<svg viewBox="0 0 100 100"><path d="M50 15 C30 15 15 35 15 55 C15 80 35 90 50 90 C65 90 85 80 85 55 C85 35 70 15 50 15"/></svg>
</div>
<div class="floating-apple">
<svg viewBox="0 0 100 100"><path d="M50 15 C30 15 15 35 15 55 C15 80 35 90 50 90 C65 90 85 80 85 55 C85 35 70 15 50 15"/></svg>
</div>
<div class="floating-apple">
<svg viewBox="0 0 100 100"><path d="M50 15 C30 15 15 35 15 55 C15 80 35 90 50 90 C65 90 85 80 85 55 C85 35 70 15 50 15"/></svg>
</div>
</div>
<!-- Giant Background Text -->
<div class="hero-bg-text">
<span class="bg-text-main">CIDER</span>
<span class="bg-text-secondary">Arkansas First</span>
</div>
<!-- Scrolling Vintage Banner - Top -->
<div class="vintage-banner">
<div class="vintage-banner-content">
<span>Handcrafted</span>
<span class="divider"></span>
<span>Small Batch</span>
<span class="divider"></span>
<span>Naturally Gluten Free</span>
<span class="divider"></span>
<span>No Preservatives</span>
<span class="divider"></span>
</div>
<div class="vintage-banner-content">
<span>Handcrafted</span>
<span class="divider"></span>
<span>Small Batch</span>
<span class="divider"></span>
<span>Naturally Gluten Free</span>
<span class="divider"></span>
<span>No Preservatives</span>
<span class="divider"></span>
</div>
</div>
<!-- Bottom Scrolling Text -->
<div class="bottom-banner">
<div class="vintage-banner-content">
<span>Downtown Springdale</span>
<span class="divider"></span>
<span>Est. 2014</span>
<span class="divider"></span>
<span>Award Winning</span>
<span class="divider"></span>
</div>
<div class="vintage-banner-content">
<span>Downtown Springdale</span>
<span class="divider"></span>
<span>Est. 2014</span>
<span class="divider"></span>
<span>Award Winning</span>
<span class="divider"></span>
</div>
</div>
<!-- Vertical Side Text -->
<span class="side-text side-text-left">Arkansas' First Cidery • Est. 2014</span>
<span class="side-text side-text-right">Springdale, Arkansas • Downtown</span>
<!-- Decorative Lines -->
<div class="deco-lines">
<div class="deco-line"></div>
<div class="deco-line"></div>
<div class="deco-line-h"></div>
<div class="deco-line-h"></div>
</div>
<!-- Main Content -->
<div class="hero-content">
<div class="hero-badge">
<div class="hero-badge-icon">
<svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
</div>
<span>#4 US Open Cider Championship</span>
</div>
<h1 class="hero-title">
<span class="hero-title-line">
<span class="hero-title-main"><span class="gold">Black</span> Apple</span>
</span>
</h1>
<p class="hero-subtitle">Arkansas' First & Finest Cidery</p>
<p class="hero-desc">Craft hard cider in its purest form — clean, unadulterated, and made without preservatives. Every sip tells the story of Arkansas.</p>
<div class="hero-ctas">
<a href="#ciders" class="hero-cta-primary">
Explore Our Ciders
<svg viewBox="0 0 24 24" fill="none" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
<a href="#visit" class="hero-cta-secondary">Visit the Taproom</a>
</div>
</div>
<!-- Scroll Indicator -->
<div class="hero-scroll">
<span class="hero-scroll-text">Scroll</span>
<div class="hero-scroll-line"></div>
</div>
<!-- Award Badge -->
<div class="hero-award">
<div class="award-badge">
<span>#4</span>
<span>USA</span>
</div>
<div class="award-text">
Top 10 Cideries<br>US Open Championship
</div>
</div>
</section>
<!-- About -->
<section class="about" id="about">
<div class="about-bg"></div>
<div class="about-container">
<div class="about-left">
<div class="about-image">
<div class="about-frame"></div>
</div>
<div class="about-tag">Since 2014</div>
</div>
<div class="about-right">
<div class="section-tag">
<div class="section-tag-line"></div>
<span>Our Story</span>
</div>
<h2 class="about-title">Cider made <em>the hard way</em></h2>
<p class="about-text">In 2014, we set out to create something Arkansas had never seen — a cidery dedicated to craft, quality, and transparency. No shortcuts. No sulfites. No preservatives. Just pure apple cider, fermented with intention and served with pride in our Downtown Springdale taproom.</p>
<div class="about-features">
<div class="about-feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</div>
<div class="feature-text">
<h4>No Preservatives</h4>
<p>Clean, natural cider</p>
</div>
</div>
<div class="about-feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<circle cx="12" cy="12" r="10"/>
<path d="M8 12l2 2 4-4"/>
</svg>
</div>
<div class="feature-text">
<h4>Gluten Free</h4>
<p>Naturally, always</p>
</div>
</div>
<div class="about-feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
</div>
<div class="feature-text">
<h4>Award Winning</h4>
<p>Nationally recognized</p>
</div>
</div>
<div class="about-feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
</div>
<div class="feature-text">
<h4>Arkansas Made</h4>
<p>Springdale proud</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Ciders -->
<section class="ciders" id="ciders">
<div class="ciders-header">
<div class="section-tag" style="justify-content: center;">
<div class="section-tag-line"></div>
<span>Our Ciders</span>
<div class="section-tag-line"></div>
</div>
<h2 class="ciders-title">14+ Flavors on Tap</h2>
<p class="ciders-subtitle">From crisp and dry to bold and adventurous</p>
</div>
<div class="ciders-grid">
<div class="cider-card">
<div class="cider-content">
<div class="cider-num">01</div>
<h3 class="cider-name">Blackberry</h3>
<p class="cider-style">Semi-Sweet</p>
<p class="cider-desc">Bewitching aromas of wild blackberry bramble and the thrilling promise of adventure.</p>
</div>
<span class="cider-abv">6.9% ABV</span>
</div>
<div class="cider-card">
<div class="cider-content">
<div class="cider-num">02</div>
<h3 class="cider-name">Strawberry</h3>
<p class="cider-style">Semi-Sweet</p>
<p class="cider-desc">A taste of perfectly ripe strawberries, still warm from the sun. Bright and tangy-sweet.</p>
</div>
<span class="cider-abv">6.5% ABV</span>
</div>
<div class="cider-card">
<div class="cider-content">
<div class="cider-num">03</div>
<h3 class="cider-name">Peach</h3>
<p class="cider-style">Semi-Sweet</p>
<p class="cider-desc">Sun-kissed cider, reminiscent of biting into that first freshly-picked orchard peach.</p>
</div>
<span class="cider-abv">6.7% ABV</span>
</div>
<div class="cider-card">
<div class="cider-content">
<div class="cider-num">04</div>
<h3 class="cider-name">Dry Guy</h3>
<p class="cider-style">Extra Dry</p>
<p class="cider-desc">Crisp, clean, and refreshingly dry. The purist's choice for true apple character.</p>
</div>
<span class="cider-abv">7.2% ABV</span>
</div>
<div class="cider-card">
<div class="cider-content">
<div class="cider-num">05</div>
<h3 class="cider-name">Mango Chile</h3>
<p class="cider-style">Semi-Sweet / Spiced</p>
<p class="cider-desc">Sweet mango with a slight spice from ancho and guajillo chiles, balanced with lime.</p>
</div>
<span class="cider-abv">6.5% ABV</span>
</div>
<div class="cider-card">
<div class="cider-content">
<div class="cider-num">06</div>
<h3 class="cider-name">Chai Spice</h3>
<p class="cider-style">Semi-Sweet / Spiced</p>
<p class="cider-desc">Hard apple cider with a prominent chai spice blend for a bold warming experience.</p>
</div>
<span class="cider-abv">6.8% ABV</span>
</div>
<div class="cider-card">
<div class="cider-content">
<div class="cider-num">07</div>
<h3 class="cider-name">Lemon Biscuit</h3>
<p class="cider-style">Semi-Sweet</p>
<p class="cider-desc">Bright lemon zing and golden toasted sweetness that hits just right.</p>
</div>
<span class="cider-abv">6.4% ABV</span>
</div>
<div class="cider-card">
<div class="cider-content">
<div class="cider-num">08</div>
<h3 class="cider-name">Hibiscus</h3>
<p class="cider-style">Dry / Floral</p>
<p class="cider-desc">Delicate floral notes with a beautiful ruby hue and refreshingly dry finish.</p>
</div>
<span class="cider-abv">6.6% ABV</span>
</div>
</div>
</section>
<!-- Taproom -->
<section class="taproom" id="taproom">
<div class="taproom-bg-text">TAP</div>
<div class="taproom-container">
<div class="taproom-header">
<div class="section-tag" style="justify-content: center;">
<div class="section-tag-line"></div>
<span>The Taproom</span>
<div class="section-tag-line"></div>
</div>
<h2 class="taproom-title">Downtown Springdale</h2>
<p class="taproom-subtitle">A speakeasy vibe in a historic building</p>
</div>
<div class="taproom-grid">
<div class="taproom-card">
<div class="taproom-icon">
<svg viewBox="0 0 24 24" stroke-width="1.5">
<path d="M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z"/>
</svg>
</div>
<h3>Flights & Tastings</h3>
<p>Sample our full lineup with generous pours. Find your new favorite among 14+ varieties on tap.</p>
</div>
<div class="taproom-card">
<div class="taproom-icon">
<svg viewBox="0 0 24 24" stroke-width="1.5">
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
</svg>
</div>
<h3>Private Events</h3>
<p>Reserve the taproom for your next gathering. Intimate setting perfect for celebrations.</p>
</div>
<div class="taproom-card">
<div class="taproom-icon">
<svg viewBox="0 0 24 24" stroke-width="1.5">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
</div>
<h3>Full Bar</h3>
<p>Beyond cider — craft cocktails, wine, and spirits. Something for everyone in your group.</p>
</div>
</div>
</div>
</section>
<!-- Visit -->
<section class="visit" id="visit">
<div class="visit-left">
<span class="visit-tag">Come See Us</span>
<h2 class="visit-title">Find us in <em>Downtown Springdale</em></h2>
<p class="visit-desc">The taproom is tucked away in a historic building — enter from Meadow Street for the full speakeasy experience. Dog-friendly patio available.</p>
<div class="visit-details">
<div class="visit-item">
<div class="visit-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
</div>
<div class="visit-item-text">
<h4>Address</h4>
<p>321 E Emma Ave<br>Springdale, AR 72764</p>
</div>
</div>
<div class="visit-item">
<div class="visit-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
</div>
<div class="visit-item-text">
<h4>Hours</h4>
<p>Mon–Thu: 4PM–10PM<br>Fri–Sat: 10AM–11PM<br>Sun: 12PM–8PM</p>
</div>
</div>
<div class="visit-item">
<div class="visit-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.574 2.81.7A2 2 0 0122 16.92z"/>
</svg>
</div>
<div class="visit-item-text">
<h4>Contact</h4>
<p>(479) 751-0337</p>
</div>
</div>
</div>
</div>
<div class="visit-right">
<form class="visit-form">
<div class="form-row">
<div class="form-group">
<label>First Name</label>
<input type="text" required>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>Email</label>
<input type="email" required>
</div>
<div class="form-group">
<label>Phone</label>
<input type="tel">
</div>
</div>
<div class="form-group">
<label>Interest</label>
<select required>
<option value="">Select your interest</option>
<option>General Inquiry</option>
<option>Private Event</option>
<option>Wholesale / Distribution</option>
<option>Press / Media</option>
</select>
</div>
<div class="form-group">
<label>Message</label>
<textarea placeholder="Tell us what's on your mind..."></textarea>
</div>
<button type="submit" class="form-submit">
Send Message
<svg viewBox="0 0 24 24" fill="none" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
</form>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-container">
<div class="footer-top">
<div class="footer-brand">
<div class="footer-logo">
<div class="footer-logo-icon">
<svg viewBox="0 0 50 50">
<path d="M25 8 C15 8 8 18 8 28 C8 42 18 46 25 46 C32 46 42 42 42 28 C42 18 35 8 25 8 M25 2 C25 2 28 0 31 3 C34 6 28 10 25 10"/>
</svg>
</div>
<span class="footer-logo-text">Black Apple</span>
</div>
<p class="footer-tagline">Arkansas' first cidery, crafting award-winning hard cider in Downtown Springdale since 2014.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Explore</h4>
<ul>
<li><a href="#about">Our Story</a></li>
<li><a href="#ciders">Ciders</a></li>
<li><a href="#taproom">Taproom</a></li>
<li><a href="#visit">Visit</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Connect</h4>
<ul>
<li><a href="#">Instagram</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Legal</h4>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p class="footer-copy">© 2025 Black Apple Hard Cider. All rights reserved.</p>
<div class="footer-social">
<a href="#" aria-label="Instagram">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<rect x="2" y="2" width="20" height="20" rx="5"/>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
</svg>
</a>
<a href="#" aria-label="Facebook">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
</svg>
</a>
</div>
<p class="footer-legal">Drink Responsibly. Must be 21+</p>
</div>
</div>
</footer>
<script>
// Preloader
setTimeout(() => {
document.querySelector('.preloader').classList.add('exit');
setTimeout(() => {
document.querySelector('.preloader').style.display = 'none';
}, 1200);
}, 2200);
// Custom Cursor
const cursor = document.querySelector('.cursor');
const follower = document.querySelector('.cursor-follower');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX - 6 + 'px';
cursor.style.top = e.clientY - 6 + 'px';
setTimeout(() => {
follower.style.left = e.clientX - 20 + 'px';
follower.style.top = e.clientY - 20 + 'px';
}, 50);
});
// Hover effects
const interactives = document.querySelectorAll('a, button, .cider-card, .taproom-card');
interactives.forEach(el => {
el.addEventListener('mouseenter', () => cursor.classList.add('active'));
el.addEventListener('mouseleave', () => cursor.classList.remove('active'));
});
// Nav scroll effect
window.addEventListener('scroll', () => {
const nav = document.querySelector('nav');
if (window.scrollY > 100) {
nav.classList.add('scrolled');
} else {
nav.classList.remove('scrolled');
}
});
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Form
document.querySelector('.visit-form').addEventListener('submit', (e) => {
e.preventDefault();
alert('Thank you! We\'ll be in touch soon.');
});
</script>
</body>
</html>