Source identity
| Field | Recorded value |
|---|---|
| Source type | archive member |
| Original record | black-apple-cidery.html |
| Date | Not specified in source |
| Path or archive member | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__heroic-duckanoo-27bf42__e4da36ba-c133-41bf-b947-fc4df2339c31/originals/deploy_696945e0b902ed493da89961/black-apple-cidery.html |
| Original SHA-256 | 43bf626b22958e210d2455f0c7791f2d84d9a4cd50b38497dbae6f013da23721 |
| Reading-copy SHA-256 | 43bf626b22958e210d2455f0c7791f2d84d9a4cd50b38497dbae6f013da23721 |
| Archive source | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__heroic-duckanoo-27bf42__e4da36ba-c133-41bf-b947-fc4df2339c31/originals/deploy_696945e0b902ed493da89961/black-apple-cidery.html"} |
Every recorded occurrence
These 2 records contain identical original source bytes. Their paths and revisions remain part of the archive.
| Original record | Branch or archive | Revision / identifier | Original location |
|---|---|---|---|
| black-apple-cidery.html | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__heroic-duckanoo-27bf42__e4da36ba-c133-41bf-b947-fc4df2339c31/originals/deploy_696945e0b902ed493da89961/black-apple-cidery.html"} | libsrc-c45a06b31302 | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__heroic-duckanoo-27bf42__e4da36ba-c133-41bf-b947-fc4df2339c31/originals/deploy_696945e0b902ed493da89961/black-apple-cidery.html |
| ddcd6917e4336426eb86d70afa7d339b853c5e73 | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__heroic-duckanoo-27bf42__e4da36ba-c133-41bf-b947-fc4df2339c31/originals/.content_store/dd/ddcd6917e4336426eb86d70afa7d339b853c5e73"} | libsrc-6a73f5124bb7 | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__heroic-duckanoo-27bf42__e4da36ba-c133-41bf-b947-fc4df2339c31/originals/.content_store/dd/ddcd6917e4336426eb86d70afa7d339b853c5e73 |
Recovered source transcript
Download complete source text ↓2,154 lines · 66.9 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Black Apple Hard Cider | Arkansas' First Cidery</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Josefin+Sans:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--void: #050505;
--night: #0a0908;
--charcoal: #121210;
--wood: #1a1815;
--bark: #252118;
--amber: #b8860b;
--gold: #d4a834;
--honey: #ebc351;
--copper: #a65d28;
--rust: #8b3a1d;
--blood: #6b1c1c;
--apple-red: #8b1a1a;
--cider: #c9913b;
--cream: #f5f0e6;
--bone: #e8e0d0;
--parchment: #d4c9b5;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Josefin Sans', sans-serif;
background: var(--night);
color: var(--cream);
overflow-x: hidden;
cursor: none;
}
/* Animated Grain */
.grain {
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.04;
pointer-events: none;
z-index: 10000;
}
/* Custom Cursor */
.cursor {
width: 12px;
height: 12px;
border: 1.5px solid var(--gold);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
mix-blend-mode: difference;
}
.cursor-follower {
width: 40px;
height: 40px;
border: 1px solid rgba(212, 168, 52, 0.3);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9998;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cursor.active {
transform: scale(3);
background: var(--gold);
mix-blend-mode: normal;
opacity: 0.8;
}
.cursor.active + .cursor-follower {
transform: scale(0);
}
/* Preloader */
.preloader {
position: fixed;
inset: 0;
background: var(--void);
z-index: 10001;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3rem;
}
.preloader-apple {
width: 80px;
height: 80px;
position: relative;
}
.preloader-apple svg {
width: 100%;
height: 100%;
fill: none;
stroke: var(--gold);
stroke-width: 1;
}
.preloader-apple svg path {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: drawApple 2s ease forwards;
}
@keyframes drawApple {
to { stroke-dashoffset: 0; }
}
.preloader-text {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--parchment);
opacity: 0;
animation: fadeIn 1s ease forwards 0.5s;
}
.preloader-bar {
width: 150px;
height: 1px;
background: var(--bark);
overflow: hidden;
}
.preloader-progress {
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--amber), var(--gold));
animation: loadBar 2s ease forwards 0.3s;
}
@keyframes loadBar {
to { width: 100%; }
}
@keyframes fadeIn {
to { opacity: 1; }
}
.preloader.exit {
animation: preloaderExit 1.2s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes preloaderExit {
0% { clip-path: circle(100% at 50% 50%); }
100% { clip-path: circle(0% at 50% 50%); }
}
/* Navigation */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 1.5rem 4rem;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.4s ease;
}
nav.scrolled {
background: rgba(5, 5, 5, 0.95);
backdrop-filter: blur(20px);
padding: 1rem 4rem;
}
.logo {
display: flex;
align-items: center;
gap: 1rem;
text-decoration: none;
color: var(--cream);
}
.logo-icon {
width: 45px;
height: 45px;
}
.logo-icon svg {
width: 100%;
height: 100%;
fill: var(--gold);
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-main {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.logo-sub {
font-size: 0.55rem;
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--amber);
margin-top: 2px;
}
.nav-links {
display: flex;
gap: 3rem;
list-style: none;
}
.nav-links a {
color: var(--bone);
text-decoration: none;
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
position: relative;
padding: 0.5rem 0;
transition: color 0.3s ease;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(--gold);
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover {
color: var(--gold);
}
.nav-links a:hover::after {
width: 100%;
}
.nav-cta {
padding: 0.8rem 1.75rem;
background: transparent;
border: 1px solid var(--amber);
color: var(--cream);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.4s ease;
}
.nav-cta:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--void);
}
/* ========== HERO ========== */
.hero {
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Background Layers */
.hero-bg {
position: absolute;
inset: 0;
}
.hero-bg-gradient {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 20% 80%, rgba(139, 26, 26, 0.25) 0%, transparent 50%),
radial-gradient(ellipse 80% 60% at 80% 20%, rgba(184, 134, 11, 0.15) 0%, transparent 50%),
radial-gradient(ellipse 50% 50% at 50% 50%, rgba(107, 28, 28, 0.2) 0%, transparent 60%),
linear-gradient(180deg, var(--void) 0%, var(--charcoal) 50%, var(--night) 100%);
}
/* Animated Apple Silhouettes */
.floating-apples {
position: absolute;
inset: 0;
overflow: hidden;
opacity: 0.08;
}
.floating-apple {
position: absolute;
animation: floatApple 20s ease-in-out infinite;
}
.floating-apple:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.floating-apple:nth-child(2) { left: 80%; top: 30%; animation-delay: -5s; }
.floating-apple:nth-child(3) { left: 20%; top: 70%; animation-delay: -10s; }
.floating-apple:nth-child(4) { left: 70%; top: 80%; animation-delay: -15s; }
.floating-apple:nth-child(5) { left: 50%; top: 10%; animation-delay: -7s; }
.floating-apple svg {
width: 150px;
height: 150px;
fill: var(--gold);
}
@keyframes floatApple {
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
25% { transform: translateY(-30px) rotate(5deg); opacity: 0.6; }
50% { transform: translateY(-10px) rotate(-3deg); opacity: 0.4; }
75% { transform: translateY(-40px) rotate(8deg); opacity: 0.5; }
}
/* Giant Background Text */
.hero-bg-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
overflow: hidden;
}
.bg-text-main {
position: absolute;
font-family: 'Playfair Display', serif;
font-size: clamp(15rem, 40vw, 50rem);
font-weight: 700;
color: transparent;
-webkit-text-stroke: 1px rgba(212, 168, 52, 0.08);
letter-spacing: -0.03em;
white-space: nowrap;
user-select: none;
}
.bg-text-secondary {
position: absolute;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(8rem, 25vw, 30rem);
font-weight: 300;
font-style: italic;
color: rgba(139, 26, 26, 0.06);
white-space: nowrap;
transform: rotate(-10deg) translateY(20%);
}
/* Scrolling Vintage Banner */
.vintage-banner {
position: absolute;
top: 20%;
left: 0;
display: flex;
animation: scrollBanner 40s linear infinite;
}
.vintage-banner-content {
display: flex;
align-items: center;
gap: 4rem;
padding: 0 2rem;
flex-shrink: 0;
}
.vintage-banner span {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
font-style: italic;
color: rgba(212, 168, 52, 0.06);
white-space: nowrap;
}
.vintage-banner .divider {
width: 8px;
height: 8px;
background: rgba(212, 168, 52, 0.1);
border-radius: 50%;
}
@keyframes scrollBanner {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Bottom Scrolling Text */
.bottom-banner {
position: absolute;
bottom: 15%;
left: 0;
display: flex;
animation: scrollBannerReverse 35s linear infinite;
}
@keyframes scrollBannerReverse {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
/* Vertical Side Elements */
.side-text {
position: absolute;
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--parchment);
opacity: 0.4;
writing-mode: vertical-rl;
}
.side-text-left {
left: 3rem;
top: 50%;
transform: translateY(-50%) rotate(180deg);
}
.side-text-right {
right: 3rem;
top: 50%;
transform: translateY(-50%);
}
/* Decorative Lines */
.deco-lines {
position: absolute;
inset: 0;
pointer-events: none;
}
.deco-line {
position: absolute;
width: 1px;
height: 100%;
background: linear-gradient(to bottom,
transparent 0%,
rgba(212, 168, 52, 0.1) 30%,
rgba(212, 168, 52, 0.1) 70%,
transparent 100%);
}
.deco-line:nth-child(1) { left: 15%; }
.deco-line:nth-child(2) { left: 85%; }
.deco-line-h {
position: absolute;
height: 1px;
width: 100%;
background: linear-gradient(to right,
transparent 0%,
rgba(212, 168, 52, 0.05) 30%,
rgba(212, 168, 52, 0.05) 70%,
transparent 100%);
}
.deco-line-h:nth-child(3) { top: 25%; }
.deco-line-h:nth-child(4) { top: 75%; }
/* Main Hero Content */
.hero-content {
position: relative;
z-index: 10;
text-align: center;
max-width: 900px;
padding: 0 2rem;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 0.6rem 1.5rem;
border: 1px solid rgba(212, 168, 52, 0.3);
margin-bottom: 2.5rem;
opacity: 0;
animation: heroFadeUp 1s ease forwards 2.3s;
}
.hero-badge-icon {
width: 16px;
height: 16px;
}
.hero-badge-icon svg {
width: 100%;
height: 100%;
fill: var(--gold);
}
.hero-badge span {
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--amber);
}
.hero-title {
margin-bottom: 1.5rem;
overflow: hidden;
}
.hero-title-line {
display: block;
overflow: hidden;
}
.hero-title-main {
font-family: 'Playfair Display', serif;
font-size: clamp(3.5rem, 12vw, 9rem);
font-weight: 700;
line-height: 0.95;
letter-spacing: -0.02em;
display: block;
transform: translateY(100%);
animation: heroReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-title-main:nth-child(1) { animation-delay: 2.4s; }
.hero-title-main:nth-child(2) { animation-delay: 2.5s; }
.hero-title-main .gold {
color: var(--gold);
font-style: italic;
}
@keyframes heroReveal {
to { transform: translateY(0); }
}
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-subtitle {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.2rem, 3vw, 1.8rem);
font-weight: 300;
font-style: italic;
color: var(--parchment);
margin-bottom: 3rem;
opacity: 0;
animation: heroFadeUp 1s ease forwards 2.7s;
}
.hero-desc {
font-size: 0.9rem;
font-weight: 300;
line-height: 1.9;
color: var(--bone);
opacity: 0.7;
max-width: 500px;
margin: 0 auto 3rem;
opacity: 0;
animation: heroFadeUp 1s ease forwards 2.9s;
}
.hero-ctas {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
opacity: 0;
animation: heroFadeUp 1s ease forwards 3.1s;
}
.hero-cta-primary {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 1.1rem 2.5rem;
background: var(--gold);
color: var(--void);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.4s ease;
}
.hero-cta-primary:hover {
background: var(--honey);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(212, 168, 52, 0.3);
}
.hero-cta-primary svg {
width: 14px;
height: 14px;
stroke: currentColor;
transition: transform 0.3s ease;
}
.hero-cta-primary:hover svg {
transform: translateX(4px);
}
.hero-cta-secondary {
color: var(--cream);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
position: relative;
padding-bottom: 4px;
transition: color 0.3s ease;
}
.hero-cta-secondary::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--amber);
transform: scaleX(0.3);
transform-origin: left;
transition: transform 0.4s ease;
}
.hero-cta-secondary:hover {
color: var(--gold);
}
.hero-cta-secondary:hover::after {
transform: scaleX(1);
}
/* Scroll Indicator */
.hero-scroll {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
opacity: 0;
animation: heroFadeUp 1s ease forwards 3.3s;
}
.hero-scroll-text {
font-size: 0.55rem;
font-weight: 400;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--parchment);
opacity: 0.5;
}
.hero-scroll-line {
width: 1px;
height: 50px;
position: relative;
overflow: hidden;
}
.hero-scroll-line::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, var(--gold), transparent);
animation: scrollLineMove 2s ease infinite;
}
@keyframes scrollLineMove {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
/* Award Badge */
.hero-award {
position: absolute;
bottom: 3rem;
right: 4rem;
display: flex;
align-items: center;
gap: 1rem;
opacity: 0;
animation: heroFadeUp 1s ease forwards 3.5s;
}
.award-badge {
width: 60px;
height: 60px;
border: 1px solid var(--amber);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.award-badge span:first-child {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
font-weight: 700;
color: var(--gold);
line-height: 1;
}
.award-badge span:last-child {
font-size: 0.45rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--parchment);
}
.award-text {
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.1em;
color: var(--parchment);
opacity: 0.7;
line-height: 1.6;
}
/* ========== ABOUT SECTION ========== */
.about {
padding: 12rem 4rem;
position: relative;
overflow: hidden;
}
.about-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 0% 50%, rgba(139, 26, 26, 0.1) 0%, transparent 50%),
var(--charcoal);
}
.about-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8rem;
position: relative;
z-index: 1;
}
.about-left {
position: relative;
}
.about-image {
position: relative;
aspect-ratio: 4/5;
background: linear-gradient(135deg, var(--blood), var(--charcoal));
overflow: hidden;
}
.about-image::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='none' stroke='%23d4a834' stroke-opacity='0.05' stroke-width='0.5'/%3E%3C/svg%3E");
background-size: 30px 30px;
}
.about-image::after {
content: 'EST. 2014';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 700;
color: var(--cream);
opacity: 0.1;
letter-spacing: 0.2em;
}
.about-frame {
position: absolute;
inset: 20px;
border: 1px solid var(--amber);
opacity: 0.3;
}
.about-tag {
position: absolute;
top: -1rem;
left: 2rem;
padding: 0.5rem 1rem;
background: var(--gold);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--void);
}
.about-right {
display: flex;
flex-direction: column;
justify-content: center;
}
.section-tag {
display: inline-flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.section-tag-line {
width: 40px;
height: 1px;
background: var(--amber);
}
.section-tag span {
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--amber);
}
.about-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 600;
line-height: 1.2;
margin-bottom: 2rem;
}
.about-title em {
font-style: italic;
color: var(--gold);
}
.about-text {
font-size: 0.95rem;
font-weight: 300;
line-height: 2;
color: var(--parchment);
margin-bottom: 3rem;
}
.about-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.about-feature {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.feature-icon {
width: 40px;
height: 40px;
border: 1px solid var(--bark);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.feature-icon svg {
width: 18px;
height: 18px;
stroke: var(--gold);
}
.feature-text h4 {
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 0.25rem;
}
.feature-text p {
font-size: 0.75rem;
font-weight: 300;
color: var(--parchment);
opacity: 0.7;
}
/* ========== CIDERS SECTION ========== */
.ciders {
padding: 10rem 0;
background: var(--night);
position: relative;
}
.ciders-header {
padding: 0 4rem;
margin-bottom: 5rem;
text-align: center;
}
.ciders-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 600;
margin-bottom: 1rem;
}
.ciders-subtitle {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 300;
font-style: italic;
color: var(--parchment);
}
.ciders-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--bark);
}
.cider-card {
background: var(--night);
padding: 3rem 2rem;
position: relative;
cursor: pointer;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cider-card::before {
content: '';
position: absolute;
inset: 0;
background: var(--card-color, var(--blood));
opacity: 0;
transition: opacity 0.5s ease;
}
.cider-card:hover::before {
opacity: 1;
}
.cider-card:nth-child(1) { --card-color: #6b1c1c; }
.cider-card:nth-child(2) { --card-color: #1c4a6b; }
.cider-card:nth-child(3) { --card-color: #4a1c6b; }
.cider-card:nth-child(4) { --card-color: #6b4a1c; }
.cider-card:nth-child(5) { --card-color: #1c6b4a; }
.cider-card:nth-child(6) { --card-color: #6b1c4a; }
.cider-card:nth-child(7) { --card-color: #4a6b1c; }
.cider-card:nth-child(8) { --card-color: #1c1c6b; }
.cider-content {
position: relative;
z-index: 1;
}
.cider-num {
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
font-weight: 700;
color: var(--bark);
line-height: 1;
margin-bottom: 1.5rem;
transition: color 0.5s ease;
}
.cider-card:hover .cider-num {
color: rgba(255,255,255,0.15);
}
.cider-name {
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.cider-style {
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1rem;
}
.cider-desc {
font-size: 0.8rem;
font-weight: 300;
line-height: 1.7;
color: var(--parchment);
transition: color 0.5s ease;
}
.cider-card:hover .cider-desc {
color: var(--cream);
}
.cider-abv {
position: absolute;
bottom: 2rem;
right: 2rem;
font-family: 'Playfair Display', serif;
font-size: 0.9rem;
color: var(--amber);
opacity: 0;
transform: translateY(10px);
transition: all 0.5s ease;
}
.cider-card:hover .cider-abv {
opacity: 1;
transform: translateY(0);
}
/* ========== TAPROOM SECTION ========== */
.taproom {
padding: 10rem 4rem;
background: var(--charcoal);
position: relative;
overflow: hidden;
}
.taproom-bg-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Playfair Display', serif;
font-size: 30vw;
font-weight: 700;
color: var(--wood);
opacity: 0.3;
pointer-events: none;
white-space: nowrap;
}
.taproom-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.taproom-header {
text-align: center;
margin-bottom: 5rem;
}
.taproom-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 600;
margin-bottom: 1rem;
}
.taproom-subtitle {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 300;
font-style: italic;
color: var(--parchment);
}
.taproom-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.taproom-card {
padding: 2.5rem;
background: var(--night);
border: 1px solid var(--bark);
text-align: center;
transition: all 0.4s ease;
}
.taproom-card:hover {
border-color: var(--amber);
transform: translateY(-5px);
}
.taproom-icon {
width: 50px;
height: 50px;
margin: 0 auto 1.5rem;
}
.taproom-icon svg {
width: 100%;
height: 100%;
stroke: var(--gold);
fill: none;
}
.taproom-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.taproom-card p {
font-size: 0.85rem;
font-weight: 300;
line-height: 1.7;
color: var(--parchment);
}
/* ========== VISIT SECTION ========== */
.visit {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
.visit-left {
background: var(--night);
padding: 8rem 5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.visit-tag {
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 2rem;
}
.visit-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 4vw, 4rem);
font-weight: 600;
line-height: 1.15;
margin-bottom: 2rem;
}
.visit-title em {
font-style: italic;
color: var(--gold);
}
.visit-desc {
font-size: 0.95rem;
font-weight: 300;
line-height: 1.9;
color: var(--parchment);
margin-bottom: 3rem;
max-width: 400px;
}
.visit-details {
display: flex;
flex-direction: column;
gap: 2rem;
}
.visit-item {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.visit-icon {
width: 44px;
height: 44px;
border: 1px solid var(--bark);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.visit-icon svg {
width: 18px;
height: 18px;
stroke: var(--gold);
}
.visit-item-text h4 {
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--parchment);
opacity: 0.6;
margin-bottom: 0.4rem;
}
.visit-item-text p {
font-size: 0.95rem;
color: var(--cream);
line-height: 1.6;
}
.visit-right {
background: var(--charcoal);
padding: 8rem 5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.visit-form {
display: flex;
flex-direction: column;
gap: 2rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.form-group label {
display: block;
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--parchment);
opacity: 0.6;
margin-bottom: 0.75rem;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 1rem 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--bark);
color: var(--cream);
font-family: 'Josefin Sans', sans-serif;
font-size: 0.9rem;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--gold);
}
.form-group textarea {
resize: none;
min-height: 100px;
}
.form-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d4a834' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
}
.form-submit {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 1.1rem 2.5rem;
background: var(--gold);
border: none;
color: var(--void);
font-family: 'Josefin Sans', sans-serif;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.4s ease;
}
.form-submit:hover {
background: var(--honey);
transform: translateX(5px);
}
.form-submit svg {
width: 14px;
height: 14px;
stroke: currentColor;
transition: transform 0.3s ease;
}
.form-submit:hover svg {
transform: translateX(4px);
}
/* ========== FOOTER ========== */
footer {
padding: 5rem 4rem;
background: var(--void);
border-top: 1px solid var(--wood);
}
.footer-container {
max-width: 1400px;
margin: 0 auto;
}
.footer-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 4rem;
margin-bottom: 3rem;
border-bottom: 1px solid var(--wood);
}
.footer-brand {
max-width: 300px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.footer-logo-icon {
width: 35px;
height: 35px;
}
.footer-logo-icon svg {
width: 100%;
height: 100%;
fill: var(--gold);
}
.footer-logo-text {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.1em;
}
.footer-tagline {
font-size: 0.85rem;
font-weight: 300;
line-height: 1.7;
color: var(--parchment);
opacity: 0.7;
}
.footer-links {
display: flex;
gap: 5rem;
}
.footer-col h4 {
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 1.25rem;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-col a {
font-size: 0.85rem;
color: var(--cream);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-col a:hover {
color: var(--gold);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-copy {
font-size: 0.7rem;
color: var(--parchment);
opacity: 0.5;
}
.footer-social {
display: flex;
gap: 0.75rem;
}
.footer-social a {
width: 38px;
height: 38px;
border: 1px solid var(--bark);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.footer-social a:hover {
background: var(--gold);
border-color: var(--gold);
}
.footer-social svg {
width: 16px;
height: 16px;
stroke: var(--cream);
transition: stroke 0.3s ease;
}
.footer-social a:hover svg {
stroke: var(--void);
}
.footer-legal {
font-size: 0.65rem;
color: var(--parchment);
opacity: 0.4;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
.ciders-grid {
grid-template-columns: repeat(2, 1fr);
}
.hero-award {
display: none;
}
}
@media (max-width: 1024px) {
nav {
padding: 1rem 2rem;
}
.nav-links {
display: none;
}
.about-container {
grid-template-columns: 1fr;
gap: 4rem;
}