A continuation of fossil-cove-brewing.html. The complete source identity, every recorded occurrence, and linked equations are on its first page.
Source transcript · continued
Download complete source text ↓1,984 lines · 62.2 KB
<svg class="fossil-item fossil-2" viewBox="0 0 150 150">
<path d="M75 10 Q110 30, 100 60 Q80 80, 50 70 Q20 50, 40 25 Q60 10, 75 10Z"/>
<circle cx="65" cy="40" r="8"/>
</svg>
<svg class="fossil-item fossil-3" viewBox="0 0 180 180">
<path d="M90 20 C130 20, 160 60, 140 100 C120 140, 60 140, 40 100 C20 60, 50 20, 90 20Z"/>
<path d="M90 50 C110 50, 130 70, 120 90 C100 110, 70 100, 70 80 C70 60, 80 50, 90 50Z"/>
</svg>
</div>
<!-- Giant Background Text -->
<div class="hero-bg-text">
<span class="bg-fossil-text">FOSSIL</span>
</div>
<!-- Scrolling Text -->
<div class="hero-scroll-text">
<span>Beaver Lake</span>
<span>Beaver Lake</span>
<span>Beaver Lake</span>
<span>Beaver Lake</span>
</div>
<div class="hero-scroll-top">
<span>Est. 2012 • Fayetteville • American & Belgian Ales • Ozark Mountains</span>
<span>Est. 2012 • Fayetteville • American & Belgian Ales • Ozark Mountains</span>
<span>Est. 2012 • Fayetteville • American & Belgian Ales • Ozark Mountains</span>
</div>
<!-- Vertical Text -->
<span class="hero-vertical hero-vertical-left">1946 N. Birch Ave</span>
<span class="hero-vertical hero-vertical-right">Open 7 Days</span>
<!-- Main Content -->
<div class="hero-content">
<div class="hero-badge">
<span class="hero-badge-dot"></span>
<span>Fayetteville's First Craft Brewery</span>
</div>
<h1 class="hero-title">
<span class="hero-title-line">
<span class="hero-title-main" style="--d:0">FOSSIL</span>
</span>
<span class="hero-title-line">
<span class="hero-title-main amber" style="--d:1">COVE</span>
</span>
</h1>
<p class="hero-subtitle">Brewing Co.</p>
<p class="hero-desc">Named after a fossil-laden cove on the shores of Beaver Lake, we craft American and Belgian-style ales in the heart of the Ozark Mountains.</p>
<div class="hero-ctas">
<a href="#beers" class="hero-cta-primary">
Explore Our Beers
<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 Tap Room</a>
</div>
</div>
<!-- Scroll Indicator -->
<div class="hero-scroll">
<span class="hero-scroll-label">Discover</span>
<div class="hero-scroll-line"></div>
</div>
<!-- Stats -->
<div class="hero-stats">
<div class="hero-stat">
<span class="hero-stat-num">13+</span>
<span class="hero-stat-label">Beers<br>On Tap</span>
</div>
<div class="hero-stat">
<span class="hero-stat-num">2012</span>
<span class="hero-stat-label">Year<br>Founded</span>
</div>
<div class="hero-stat">
<span class="hero-stat-num">7</span>
<span class="hero-stat-label">Days<br>Open</span>
</div>
<div class="hero-stat">
<span class="hero-stat-num">2500</span>
<span class="hero-stat-label">Barrels<br>Per Year</span>
</div>
</div>
</section>
<!-- Marquee -->
<div class="marquee">
<div class="marquee-track">
<div class="marquee-content">
<span class="marquee-item">Pints</span>
<span class="marquee-dot"></span>
<span class="marquee-item">Flights</span>
<span class="marquee-dot"></span>
<span class="marquee-item">Growlers</span>
<span class="marquee-dot"></span>
<span class="marquee-item">Coffee</span>
<span class="marquee-dot"></span>
<span class="marquee-item">Pizza</span>
<span class="marquee-dot"></span>
</div>
<div class="marquee-content">
<span class="marquee-item">Pints</span>
<span class="marquee-dot"></span>
<span class="marquee-item">Flights</span>
<span class="marquee-dot"></span>
<span class="marquee-item">Growlers</span>
<span class="marquee-dot"></span>
<span class="marquee-item">Coffee</span>
<span class="marquee-dot"></span>
<span class="marquee-item">Pizza</span>
<span class="marquee-dot"></span>
</div>
<div class="marquee-content">
<span class="marquee-item">Pints</span>
<span class="marquee-dot"></span>
<span class="marquee-item">Flights</span>
<span class="marquee-dot"></span>
<span class="marquee-item">Growlers</span>
<span class="marquee-dot"></span>
<span class="marquee-item">Coffee</span>
<span class="marquee-dot"></span>
<span class="marquee-item">Pizza</span>
<span class="marquee-dot"></span>
</div>
</div>
</div>
<!-- Story -->
<section class="story" id="story">
<div class="story-bg">12</div>
<div class="story-container">
<div class="story-left">
<div class="section-tag">
<span class="section-tag-line"></span>
<span class="section-tag-text">Our Story</span>
</div>
<h2 class="story-title">From a <em>cove</em> on Beaver Lake to Fayetteville's first brewery</h2>
<p class="story-text">What started as homebrewing at Arkansas Tech became a passion that led founder Ben Mills through Colorado breweries and UC Davis's Master Brewers Program. In 2012, Fossil Cove opened as Fayetteville's first production brewery—named after a favorite fossil-hunting spot on Beaver Lake's shores.</p>
<div class="story-features">
<div class="story-feature">
<div class="story-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<span class="story-feature-text">20-barrel production facility</span>
</div>
<div class="story-feature">
<div class="story-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
</div>
<span class="story-feature-text">Open 7 days a week</span>
</div>
<div class="story-feature">
<div class="story-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
<span class="story-feature-text">Family & pet friendly</span>
</div>
<div class="story-feature">
<div class="story-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<path d="M18 8h1a4 4 0 0 1 0 8h-1M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8zM6 1v3M10 1v3M14 1v3"/>
</svg>
</div>
<span class="story-feature-text">Full espresso bar</span>
</div>
</div>
</div>
<div class="story-right">
<div class="story-image">
<div class="story-image-frame"></div>
</div>
<div class="story-float-card">
<p class="story-float-text">"We love our corner of the world and everything it offers."</p>
</div>
</div>
</div>
</section>
<!-- Beers -->
<section class="beers" id="beers">
<div class="beers-header">
<div class="beers-title-wrap">
<div class="section-tag">
<span class="section-tag-line"></span>
<span class="section-tag-text">On Tap</span>
</div>
<h2 class="beers-title">Craft beer with character</h2>
<p class="beers-subtitle">From hoppy IPAs to smooth stouts, discover beers brewed with Beaver Lake water.</p>
</div>
<div class="beers-filter">
<button class="filter-btn active">All</button>
<button class="filter-btn">IPAs</button>
<button class="filter-btn">Ales</button>
<button class="filter-btn">Stouts</button>
</div>
</div>
<div class="beers-grid">
<div class="beer-card">
<div class="beer-card-content">
<span class="beer-type">India Pale Ale</span>
<h3 class="beer-name">IPA #3</h3>
<div class="beer-stats">
<div class="beer-stat">
<span class="beer-stat-value">6.0%</span>
<span class="beer-stat-label">ABV</span>
</div>
<div class="beer-stat">
<span class="beer-stat-value">50</span>
<span class="beer-stat-label">IBU</span>
</div>
</div>
<p class="beer-desc">Citrus, stone fruit, pine and tropical hop notes for whatever lies ahead.</p>
</div>
<div class="beer-arrow">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2">
<path d="M7 17L17 7M17 7H7M17 7v10"/>
</svg>
</div>
</div>
<div class="beer-card">
<div class="beer-card-content">
<span class="beer-type">American Brown Ale</span>
<h3 class="beer-name">La Brea Brown</h3>
<div class="beer-stats">
<div class="beer-stat">
<span class="beer-stat-value">6.0%</span>
<span class="beer-stat-label">ABV</span>
</div>
<div class="beer-stat">
<span class="beer-stat-value">18</span>
<span class="beer-stat-label">IBU</span>
</div>
</div>
<p class="beer-desc">Rich chocolate and caramel malt notes with a smooth, roasted finish.</p>
</div>
<div class="beer-arrow">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2">
<path d="M7 17L17 7M17 7H7M17 7v10"/>
</svg>
</div>
</div>
<div class="beer-card">
<div class="beer-card-content">
<span class="beer-type">Kölsch</span>
<h3 class="beer-name">Birch St. Kölsch</h3>
<div class="beer-stats">
<div class="beer-stat">
<span class="beer-stat-value">4.7%</span>
<span class="beer-stat-label">ABV</span>
</div>
<div class="beer-stat">
<span class="beer-stat-value">20</span>
<span class="beer-stat-label">IBU</span>
</div>
</div>
<p class="beer-desc">Crisp and refreshing German-inspired ale with bready malt notes.</p>
</div>
<div class="beer-arrow">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2">
<path d="M7 17L17 7M17 7H7M17 7v10"/>
</svg>
</div>
</div>
<div class="beer-card">
<div class="beer-card-content">
<span class="beer-type">Oatmeal Stout</span>
<h3 class="beer-name">Tar Pit Stout</h3>
<div class="beer-stats">
<div class="beer-stat">
<span class="beer-stat-value">6.9%</span>
<span class="beer-stat-label">ABV</span>
</div>
<div class="beer-stat">
<span class="beer-stat-value">35</span>
<span class="beer-stat-label">IBU</span>
</div>
</div>
<p class="beer-desc">Silky smooth with notes of dark chocolate, coffee, and roasted oats.</p>
</div>
<div class="beer-arrow">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2">
<path d="M7 17L17 7M17 7H7M17 7v10"/>
</svg>
</div>
</div>
</div>
</section>
<!-- Visit -->
<section class="visit" id="visit">
<div class="visit-container">
<div class="visit-info">
<div class="section-tag">
<span class="section-tag-line"></span>
<span class="section-tag-text">Visit Us</span>
</div>
<h2>The <em>tap room</em> is the heart of our operation</h2>
<p class="visit-text">With 13-16 beers on tap, a full espresso bar, and Wicked Wood Fired Pizza on site, our Fayetteville tap room is a community gathering spot. Bring your bikes via the Razorback Greenway!</p>
<div class="visit-details">
<div class="visit-detail">
<div class="visit-detail-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-detail-content">
<h4>Location</h4>
<p>1946 N. Birch Ave<br>Fayetteville, AR 72703</p>
</div>
</div>
<div class="visit-detail">
<div class="visit-detail-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-detail-content">
<h4>Hours</h4>
<p>Sun–Wed: 11am–9pm<br>Thu–Sat: 9am–10pm</p>
</div>
</div>
<div class="visit-detail">
<div class="visit-detail-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72"/>
</svg>
</div>
<div class="visit-detail-content">
<h4>Contact</h4>
<p>(479) 445-6050<br>[author/contact email redacted]</p>
</div>
</div>
</div>
<a href="https://maps.google.com" class="visit-cta" target="_blank">Get Directions</a>
</div>
<div class="visit-map">
<div class="visit-map-container">
<div class="visit-map-label">
<div class="pin"></div>
<span>Fayetteville, AR</span>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-container">
<div class="footer-top">
<div class="footer-brand">
<div class="footer-logo">
<svg viewBox="0 0 50 50">
<path d="M25 5 Q35 15, 30 25 Q20 30, 15 20 Q10 35, 25 40 Q40 40, 45 25 Q45 10, 25 5Z"/>
<circle cx="22" cy="18" r="2"/>
</svg>
<span class="footer-logo-text">FOSSIL COVE</span>
</div>
<p class="footer-tagline">Craft brewery in Fayetteville, Arkansas. Named after a fossil-laden cove on Beaver Lake. Brewing American and Belgian-style ales since 2012.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Explore</h4>
<ul>
<li><a href="#story">Our Story</a></li>
<li><a href="#beers">Beers</a></li>
<li><a href="#visit">Visit</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Connect</h4>
<ul>
<li><a href="#">Events</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</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 Fossil Cove Brewing Co. Must be 21+ to consume. Drink responsibly.</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>
<a href="#" aria-label="Twitter">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
<path d="M4 4l11.733 16h4.267l-11.733-16zM4 20l6.4-8M20 4l-6.4 8"/>
</svg>
</a>
</div>
</div>
</div>
</footer>
<script>
// Preloader
setTimeout(() => {
document.querySelector('.preloader').classList.add('exit');
setTimeout(() => {
document.querySelector('.preloader').style.display = 'none';
}, 1200);
}, 2500);
// Custom Cursor
const cursor = document.querySelector('.cursor');
const cursorFossil = document.querySelector('.cursor-fossil');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX - 12 + 'px';
cursor.style.top = e.clientY - 12 + 'px';
cursorFossil.style.left = e.clientX - 4 + 'px';
cursorFossil.style.top = e.clientY - 4 + 'px';
});
// Hover states
const interactives = document.querySelectorAll('a, button, .beer-card');
interactives.forEach(el => {
el.addEventListener('mouseenter', () => cursor.classList.add('active'));
el.addEventListener('mouseleave', () => cursor.classList.remove('active'));
});
// 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' });
}
});
});
// Parallax on background text
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const bgText = document.querySelector('.bg-fossil-text');
if (bgText) {
bgText.style.transform = `translateY(${scrolled * 0.15}px)`;
}
});
// Filter buttons
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
</script>
</body>
</html>