Source identity
| Field | Recorded value |
|---|---|
| Source type | archive member |
| Original record | index 2.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/index 2.html |
| Original SHA-256 | eadfdba8477661569a45caf95bb0edce39487ed3aec751de833ac8ba5ce237d6 |
| Reading-copy SHA-256 | d0be3109abe3d2660ffd4566548e9a1517a5b367fc96ade5807e395f6c6fb5ab |
| 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/index 2.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 |
|---|---|---|---|
| index 2.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/index 2.html"} | libsrc-867ed2547dd7 | 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/index 2.html |
| 516c8f89f7167f35965bb5db791531ee7b1dc638 | {"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/51/516c8f89f7167f35965bb5db791531ee7b1dc638"} | libsrc-79a3ed105742 | 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/51/516c8f89f7167f35965bb5db791531ee7b1dc638 |
Recovered source transcript
Download complete source text ↓1,508 lines · 46.2 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Honeycomb Kitchen Shop | Rogers, Arkansas</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Crimson+Pro:wght@300;400;500&family=Libre+Franklin:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--honey-gold: #D4920A;
--honey-amber: #C17F07;
--honey-light: #F4D03F;
--honey-glow: #FFB800;
--cream: #FDF6E3;
--warm-cream: #FAF0DC;
--dark-wood: #2C1A0E;
--rich-brown: #4A2C17;
--copper: #B87333;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Libre Franklin', sans-serif;
background: var(--cream);
color: var(--dark-wood);
overflow-x: hidden;
cursor: none;
}
/* Custom Cursor */
.cursor {
width: 20px;
height: 20px;
border: 2px solid var(--honey-gold);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 10000;
transition: transform 0.15s ease, background 0.15s ease;
mix-blend-mode: difference;
}
.cursor-dot {
width: 6px;
height: 6px;
background: var(--honey-glow);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 10001;
}
.cursor.hover {
transform: scale(2);
background: rgba(212, 146, 10, 0.3);
}
/* Honey Drip Canvas */
#honey-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
pointer-events: none;
}
/* Preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--honey-gold);
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.preloader-hex {
width: 100px;
height: 115px;
background: var(--dark-wood);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
justify-content: center;
animation: hexPulse 1s ease-in-out infinite;
}
.preloader-hex span {
font-family: 'Playfair Display', serif;
font-size: 3rem;
color: var(--honey-gold);
}
@keyframes hexPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.preloader-text {
margin-top: 2rem;
font-family: 'Crimson Pro', serif;
font-size: 1.2rem;
color: var(--dark-wood);
letter-spacing: 0.3em;
text-transform: uppercase;
}
.preloader.loaded {
animation: preloaderExit 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes preloaderExit {
0% { clip-path: circle(150% at 50% 50%); }
100% { clip-path: circle(0% at 50% 50%); }
}
/* Navigation */
nav {
position: fixed;
top: 0;
width: 100%;
padding: 1.5rem 4%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
mix-blend-mode: difference;
}
.nav-logo {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: var(--cream);
letter-spacing: 0.05em;
text-decoration: none;
}
.nav-links {
display: flex;
gap: 3rem;
list-style: none;
}
.nav-links a {
font-family: 'Libre Franklin', sans-serif;
font-size: 0.8rem;
font-weight: 500;
color: var(--cream);
text-decoration: none;
letter-spacing: 0.15em;
text-transform: uppercase;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: var(--cream);
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
/* Hero Section */
.hero {
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(135deg, var(--honey-gold) 0%, var(--honey-amber) 50%, var(--copper) 100%);
}
/* Animated Hexagon Background */
.hex-grid {
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
display: grid;
grid-template-columns: repeat(20, 1fr);
gap: 10px;
transform: rotate(-15deg);
opacity: 0.15;
}
.hex-cell {
width: 80px;
height: 92px;
background: var(--dark-wood);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
transition: all 0.5s ease;
}
/* Floating Honey Elements */
.honey-blob {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--honey-light), var(--honey-gold));
filter: blur(0px);
opacity: 0.6;
animation: floatBlob 8s ease-in-out infinite;
}
.honey-blob:nth-child(1) { width: 300px; height: 300px; top: 10%; left: 10%; animation-delay: 0s; }
.honey-blob:nth-child(2) { width: 200px; height: 200px; top: 60%; right: 15%; animation-delay: 2s; }
.honey-blob:nth-child(3) { width: 150px; height: 150px; bottom: 20%; left: 20%; animation-delay: 4s; }
.honey-blob:nth-child(4) { width: 250px; height: 250px; top: 30%; right: 30%; animation-delay: 1s; }
@keyframes floatBlob {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(30px, -30px) scale(1.05); }
50% { transform: translate(-20px, 20px) scale(0.95); }
75% { transform: translate(20px, 10px) scale(1.02); }
}
/* Hero Content */
.hero-content {
position: relative;
z-index: 10;
text-align: center;
max-width: 900px;
padding: 0 2rem;
}
.hero-label {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--dark-wood);
margin-bottom: 2rem;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1s ease 0.5s forwards;
}
.hero-label::before,
.hero-label::after {
content: '';
width: 40px;
height: 1px;
background: var(--dark-wood);
}
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
.hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(4rem, 12vw, 10rem);
font-weight: 400;
line-height: 0.9;
color: var(--dark-wood);
margin-bottom: 2rem;
overflow: hidden;
}
.hero-title .line {
display: block;
overflow: hidden;
}
.hero-title .line span {
display: block;
transform: translateY(120%);
animation: revealText 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.hero-title .line:nth-child(1) span { animation-delay: 0.3s; }
.hero-title .line:nth-child(2) span { animation-delay: 0.5s; }
@keyframes revealText {
to { transform: translateY(0); }
}
.hero-title .highlight {
font-style: italic;
color: var(--cream);
text-shadow: 2px 2px 0 var(--dark-wood);
}
.hero-subtitle {
font-family: 'Crimson Pro', serif;
font-size: 1.4rem;
font-weight: 300;
color: var(--dark-wood);
max-width: 500px;
margin: 0 auto 3rem;
line-height: 1.8;
opacity: 0;
animation: fadeUp 1s ease 0.8s forwards;
}
.hero-cta {
display: inline-flex;
gap: 1.5rem;
opacity: 0;
animation: fadeUp 1s ease 1s forwards;
}
.btn {
padding: 1.2rem 3rem;
font-family: 'Libre Franklin', sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
border-radius: 0;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
}
.btn-primary {
background: var(--dark-wood);
color: var(--cream);
border: 2px solid var(--dark-wood);
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--cream);
transition: left 0.4s ease;
z-index: -1;
}
.btn-primary:hover {
color: var(--dark-wood);
}
.btn-primary:hover::before {
left: 0;
}
.btn-secondary {
background: transparent;
color: var(--dark-wood);
border: 2px solid var(--dark-wood);
}
.btn-secondary:hover {
background: var(--dark-wood);
color: var(--cream);
}
/* Scroll Indicator */
.scroll-indicator {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
opacity: 0;
animation: fadeUp 1s ease 1.5s forwards;
}
.scroll-indicator span {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dark-wood);
}
.scroll-line {
width: 1px;
height: 60px;
background: var(--dark-wood);
position: relative;
overflow: hidden;
}
.scroll-line::after {
content: '';
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
background: var(--cream);
animation: scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown {
0% { top: -100%; }
50% { top: 100%; }
100% { top: 100%; }
}
/* About Section */
.about {
padding: 15vh 8%;
background: var(--cream);
position: relative;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8rem;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.about-visual {
position: relative;
height: 600px;
}
.about-hex-container {
position: relative;
width: 100%;
height: 100%;
}
.about-hex {
position: absolute;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
overflow: hidden;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.about-hex:hover {
transform: scale(1.05);
z-index: 10;
}
.about-hex-1 {
width: 280px;
height: 320px;
top: 0;
left: 50px;
background: linear-gradient(135deg, var(--honey-gold), var(--honey-amber));
}
.about-hex-2 {
width: 220px;
height: 250px;
top: 200px;
left: 220px;
background: linear-gradient(135deg, var(--copper), var(--rich-brown));
}
.about-hex-3 {
width: 180px;
height: 200px;
top: 350px;
left: 30px;
background: linear-gradient(135deg, var(--honey-light), var(--honey-gold));
}
.hex-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
opacity: 0.8;
}
.about-content {
padding-right: 4rem;
}
.section-number {
font-family: 'Playfair Display', serif;
font-size: 5rem;
font-weight: 400;
color: var(--honey-gold);
opacity: 0.3;
line-height: 1;
margin-bottom: 1rem;
}
.section-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 1.5rem;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 400;
color: var(--dark-wood);
line-height: 1.1;
margin-bottom: 2rem;
}
.section-text {
font-family: 'Crimson Pro', serif;
font-size: 1.2rem;
line-height: 1.9;
color: var(--rich-brown);
margin-bottom: 2rem;
}
.feature-list {
list-style: none;
margin-top: 2rem;
}
.feature-list li {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(44, 26, 14, 0.1);
font-weight: 500;
}
.feature-list li::before {
content: '⬡';
color: var(--honey-gold);
font-size: 1.2rem;
}
/* Services/Classes Section */
.services {
padding: 15vh 0;
background: var(--dark-wood);
position: relative;
overflow: hidden;
}
.services::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='69' viewBox='0 0 60 69' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 17.32v34.64L30 69 0 51.96V17.32L30 0z' fill='%23D4920A' fill-opacity='0.03'/%3E%3C/svg%3E");
opacity: 0.5;
}
.services-header {
text-align: center;
padding: 0 8%;
margin-bottom: 8rem;
position: relative;
z-index: 1;
}
.services-header .section-label {
color: var(--honey-gold);
}
.services-header .section-title {
color: var(--cream);
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.service-card {
padding: 4rem 3rem;
border: 1px solid rgba(212, 146, 10, 0.2);
position: relative;
overflow: hidden;
transition: all 0.5s ease;
}
.service-card::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: linear-gradient(135deg, var(--honey-gold), var(--honey-amber));
transition: height 0.5s ease;
z-index: -1;
}
.service-card:hover::before {
height: 100%;
}
.service-card:hover .service-title,
.service-card:hover .service-text,
.service-card:hover .service-number {
color: var(--dark-wood);
}
.service-number {
font-family: 'Playfair Display', serif;
font-size: 4rem;
color: var(--honey-gold);
opacity: 0.3;
line-height: 1;
margin-bottom: 2rem;
transition: color 0.5s ease;
}
.service-title {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--cream);
margin-bottom: 1rem;
transition: color 0.5s ease;
}
.service-text {
font-family: 'Crimson Pro', serif;
font-size: 1.1rem;
color: rgba(253, 246, 227, 0.7);
line-height: 1.7;
transition: color 0.5s ease;
}
/* Products Showcase */
.products {
padding: 15vh 8%;
background: var(--warm-cream);
}
.products-header {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 5rem;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5rem;
}
.products-scroll {
display: flex;
gap: 2rem;
overflow-x: auto;
padding: 2rem 0;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.products-scroll::-webkit-scrollbar {
display: none;
}
.product-card {
flex: 0 0 350px;
scroll-snap-align: start;
background: var(--cream);
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.product-card:hover {
transform: translateY(-20px);
}
.product-image {
height: 400px;
background: linear-gradient(135deg, var(--honey-light), var(--honey-gold));
display: flex;
align-items: center;
justify-content: center;
font-size: 6rem;
position: relative;
overflow: hidden;
}
.product-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, transparent 50%, rgba(44, 26, 14, 0.1) 100%);
}
.product-info {
padding: 2rem;
}
.product-category {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 0.5rem;
}
.product-name {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: var(--dark-wood);
margin-bottom: 0.5rem;
}
.product-price {
font-weight: 600;
color: var(--honey-amber);
}
/* Testimonials */
.testimonials {
padding: 15vh 8%;
background: var(--honey-gold);
position: relative;
}
.testimonial-container {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.testimonial-quote {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 400;
font-style: italic;
color: var(--dark-wood);
line-height: 1.5;
margin-bottom: 3rem;
position: relative;
}
.testimonial-quote::before {
content: '"';
font-size: 8rem;
position: absolute;
top: -3rem;
left: -2rem;
color: var(--dark-wood);
opacity: 0.1;
font-style: normal;
}
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.author-avatar {
width: 60px;
height: 60px;
background: var(--dark-wood);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
justify-content: center;
color: var(--honey-gold);
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
}
.author-info h4 {
font-family: 'Libre Franklin', sans-serif;
font-size: 1rem;
font-weight: 600;
color: var(--dark-wood);
}
.author-info p {
font-size: 0.85rem;
color: var(--rich-brown);
}
/* Location */
.location {
padding: 15vh 8%;
background: var(--cream);
}
.location-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
max-width: 1400px;
margin: 0 auto;
align-items: center;
}
.location-map {
height: 500px;
background: linear-gradient(135deg, var(--honey-gold), var(--copper));
position: relative;
overflow: hidden;
}
.map-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--cream);
}
.map-pin {
width: 80px;
height: 92px;
background: var(--dark-wood);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
animation: pinBounce 2s ease-in-out infinite;
}
@keyframes pinBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
.map-pin svg {
width: 30px;
height: 30px;
fill: var(--honey-gold);
}
.map-address {
text-align: center;
}
.map-address h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.location-info h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 5vw, 3.5rem);
color: var(--dark-wood);
margin-bottom: 2rem;
}
.contact-details {
list-style: none;
margin-bottom: 2rem;
}
.contact-details li {
display: flex;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(44, 26, 14, 0.1);
font-family: 'Crimson Pro', serif;
font-size: 1.1rem;
}
.contact-details li strong {
font-family: 'Libre Franklin', sans-serif;
font-weight: 600;
min-width: 80px;
color: var(--copper);
}
.hours-title {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: var(--dark-wood);
margin: 2rem 0 1rem;
}
.hours-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem 2rem;
}
.hours-row {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
font-size: 0.95rem;
}
/* Footer */
footer {
background: var(--dark-wood);
padding: 8rem 8% 3rem;
}
.footer-main {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 4rem;
max-width: 1400px;
margin: 0 auto 5rem;
}
.footer-brand h3 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: var(--honey-gold);
margin-bottom: 1.5rem;
}
.footer-brand p {
font-family: 'Crimson Pro', serif;
font-size: 1.1rem;
color: rgba(253, 246, 227, 0.6);
line-height: 1.8;
margin-bottom: 2rem;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-link {
width: 50px;
height: 58px;
background: transparent;
border: 1px solid rgba(212, 146, 10, 0.3);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
justify-content: center;
color: var(--honey-gold);
text-decoration: none;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.social-link:hover {
background: var(--honey-gold);
color: var(--dark-wood);
}
.footer-column h4 {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
color: var(--cream);
margin-bottom: 1.5rem;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.8rem;
}
.footer-links a {
color: rgba(253, 246, 227, 0.6);
text-decoration: none;
font-size: 0.95rem;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(--honey-gold);
}
.footer-bottom {
max-width: 1400px;
margin: 0 auto;
padding-top: 3rem;
border-top: 1px solid rgba(212, 146, 10, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
color: rgba(253, 246, 227, 0.4);
font-size: 0.85rem;
}
/* Responsive */
@media (max-width: 1024px) {
.about-grid,
.location-grid,
.footer-main {
grid-template-columns: 1fr;
}
.services-grid {
grid-template-columns: 1fr;
}
.about-visual {
height: 400px;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero-title {
font-size: 3rem;
}
.cursor, .cursor-dot {
display: none;
}
body {
cursor: auto;
}
}
/* Scroll Animations */
.reveal {
opacity: 0;
transform: translateY(60px);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<!-- Custom Cursor -->
<div class="cursor"></div>
<div class="cursor-dot"></div>
<!-- Honey Drip Canvas -->
<canvas id="honey-canvas"></canvas>
<!-- Preloader -->
<div class="preloader">
<div class="preloader-hex"><span>H</span></div>
<p class="preloader-text">Entering the Kitchen</p>
</div>
<!-- Navigation -->
<nav>
<a href="#" class="nav-logo">Honeycomb Kitchen</a>
<ul class="nav-links">
<li><a href="#about" class="hoverable">About</a></li>
<li><a href="#classes" class="hoverable">Classes</a></li>
<li><a href="#shop" class="hoverable">Shop</a></li>
<li><a href="#contact" class="hoverable">Visit</a></li>
</ul>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="honey-blob"></div>
<div class="honey-blob"></div>
<div class="honey-blob"></div>
<div class="honey-blob"></div>
<div class="hero-content">
<div class="hero-label">
Women-Owned • Rogers, Arkansas
</div>
<h1 class="hero-title">
<span class="line"><span>Where Cooking</span></span>
<span class="line"><span>Becomes <em class="highlight">Magic</em></span></span>
</h1>
<p class="hero-subtitle">
Curated cookware. Expert-led classes. A celebration of home cooking in the heart of Northwest Arkansas.
</p>
<div class="hero-cta">
<a href="#classes" class="btn btn-primary hoverable">Explore Classes</a>
<a href="#shop" class="btn btn-secondary hoverable">Shop Collection</a>
</div>
</div>
<div class="scroll-indicator">
<span>Scroll</span>
<div class="scroll-line"></div>
</div>
</section>
<!-- About Section -->
<section class="about" id="about">
<div class="about-grid">
<div class="about-visual">
<div class="about-hex-container">
<div class="about-hex about-hex-1 hoverable">
<div class="hex-content">🍳</div>
</div>
<div class="about-hex about-hex-2 hoverable">
<div class="hex-content">🌿</div>
</div>
<div class="about-hex about-hex-3 hoverable">
<div class="hex-content">🍯</div>
</div>
</div>
</div>
<div class="about-content reveal">
<span class="section-number">01</span>
<span class="section-label">Our Story</span>
<h2 class="section-title">More Than a Store—<br>A Culinary Home</h2>
<p class="section-text">
Founded by Melissa Turpin and Dana Smith, Honeycomb Kitchen Shop was born from a shared passion for cooking and community. Every item is hand-selected. Every class is crafted to inspire. We believe the kitchen is where memories are made.
</p>
<ul class="feature-list">
<li>Hand-curated professional cookware</li>
<li>Local Arkansas artisan products</li>
<li>Six-station teaching kitchen</li>
<li>Private events & team-building</li>
</ul>
</div>
</div>
</section>
<!-- Services Section -->
<section class="services" id="classes">
<div class="services-header">
<span class="section-label reveal">The Experience</span>
<h2 class="section-title reveal">Learn From the Best</h2>
</div>
<div class="services-grid">
<div class="service-card hoverable reveal">
<span class="service-number">01</span>
<h3 class="service-title">Hands-On Classes</h3>
<p class="service-text">Learn knife skills, regional cuisines, and culinary techniques from NWA's finest chefs in our professional teaching kitchen.</p>
</div>
<div class="service-card hoverable reveal">
<span class="service-number">02</span>
<h3 class="service-title">Private Events</h3>
<p class="service-text">Wedding showers, team-building, celebrations—create unforgettable memories with custom culinary experiences.</p>
</div>
<div class="service-card hoverable reveal">
<span class="service-number">03</span>
<h3 class="service-title">Wedding Registry</h3>
<p class="service-text">Build your dream kitchen together. Our experts help couples curate the perfect collection for their new life.</p>
</div>
</div>
</section>
<!-- Products Section -->
<section class="products" id="shop">
<div class="products-header">
<div>
<span class="section-label reveal">The Collection</span>
<h2 class="section-title reveal">Tools That Inspire</h2>
</div>
<a href="#" class="btn btn-secondary hoverable">View All</a>
</div>
<div class="products-scroll">
<div class="product-card hoverable">
<div class="product-image">🔪</div>
<div class="product-info">
<span class="product-category">Cutlery</span>
<h3 class="product-name">Chef's Knives</h3>
<span class="product-price">From $85</span>
</div>
</div>
<div class="product-card hoverable">
<div class="product-image">🍳</div>
<div class="product-info">
<span class="product-category">Cookware</span>
<h3 class="product-name">Cast Iron Collection</h3>
<span class="product-price">From $65</span>
</div>
</div>
<div class="product-card hoverable">
<div class="product-image">🥄</div>
<div class="product-info">
<span class="product-category">Tools</span>
<h3 class="product-name">Artisan Utensils</h3>
<span class="product-price">From $24</span>
</div>
</div>
<div class="product-card hoverable">
<div class="product-image">🫒</div>
<div class="product-info">
<span class="product-category">Local</span>
<h3 class="product-name">Arkansas Artisan</h3>
<span class="product-price">From $12</span>
</div>
</div>
<div class="product-card hoverable">
<div class="product-image">🧈</div>
<div class="product-info">
<span class="product-category">Bakeware</span>
<h3 class="product-name">Baking Essentials</h3>
<span class="product-price">From $28</span>
</div>
</div>
</div>
</section>
<!-- Testimonial -->
<section class="testimonials">
<div class="testimonial-container reveal">
<p class="testimonial-quote">
My wife has been to 30+ cooking classes here. It's more than a store—it's where our family discovered a love for cooking together.
</p>
<div class="testimonial-author">
<div class="author-avatar">JR</div>
<div class="author-info">
<h4>James R.</h4>
<p>Rogers Local</p>
</div>
</div>
</div>
</section>
<!-- Location -->
<section class="location" id="contact">
<div class="location-grid">
<div class="location-map">
<div class="map-overlay">
<div class="map-pin">
<svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
</div>
<div class="map-address">
<h3>213 W Walnut Street</h3>
<p>Historic Downtown Rogers</p>
</div>
</div>
</div>
<div class="location-info">
<span class="section-label reveal">Find Us</span>
<h2 class="reveal">Visit the Shop</h2>
<ul class="contact-details reveal">
<li><strong>Address</strong> 213 W Walnut St, Rogers, AR 72756</li>
[REDACTED: private contact or credential material]
<li><strong>Email</strong> [author/contact email redacted]</li>
</ul>
<h3 class="hours-title reveal">Store Hours</h3>
<div class="hours-grid reveal">
<div class="hours-row"><span>Monday</span><span>10am – 6pm</span></div>
<div class="hours-row"><span>Tuesday</span><span>10am – 6pm</span></div>
<div class="hours-row"><span>Wednesday</span><span>10am – 6pm</span></div>
<div class="hours-row"><span>Thursday</span><span>10am – 6pm</span></div>
<div class="hours-row"><span>Friday</span><span>10am – 6pm</span></div>
<div class="hours-row"><span>Saturday</span><span>10am – 6pm</span></div>
<div class="hours-row"><span>Sunday</span><span>Closed</span></div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-main">
<div class="footer-brand">
<h3>Honeycomb Kitchen Shop</h3>
<p>A women-owned kitchen store and teaching kitchen, inspiring home cooking through curated tools and expert instruction since 2018.</p>
<div class="social-links">
<a href="#" class="social-link hoverable">f</a>
<a href="#" class="social-link hoverable">in</a>
<a href="#" class="social-link hoverable">@</a>
</div>
</div>
<div class="footer-column">
<h4>Shop</h4>
<ul class="footer-links">
<li><a href="#" class="hoverable">Cookware</a></li>
<li><a href="#" class="hoverable">Cutlery</a></li>
<li><a href="#" class="hoverable">Bakeware</a></li>
<li><a href="#" class="hoverable">Local Goods</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Learn</h4>
<ul class="footer-links">
<li><a href="#" class="hoverable">Upcoming Classes</a></li>
<li><a href="#" class="hoverable">Private Events</a></li>
<li><a href="#" class="hoverable">Gift Cards</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Info</h4>
<ul class="footer-links">
<li><a href="#" class="hoverable">About Us</a></li>
<li><a href="#" class="hoverable">Registry</a></li>
<li><a href="#" class="hoverable">Contact</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 Honeycomb Kitchen Shop. All rights reserved.</p>
<p>Crafted with care in Rogers, Arkansas</p>
</div>
</footer>
<script>
// ============================================
// CUSTOM CURSOR WITH HONEY TRAIL
// ============================================
const cursor = document.querySelector('.cursor');
const cursorDot = document.querySelector('.cursor-dot');
let mouseX = 0, mouseY = 0;
let cursorX = 0, cursorY = 0;
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
function animateCursor() {
cursorX += (mouseX - cursorX) * 0.15;
cursorY += (mouseY - cursorY) * 0.15;
cursor.style.left = cursorX - 10 + 'px';
cursor.style.top = cursorY - 10 + 'px';
cursorDot.style.left = mouseX - 3 + 'px';
cursorDot.style.top = mouseY - 3 + 'px';
requestAnimationFrame(animateCursor);
}
animateCursor();
// Cursor hover effect
document.querySelectorAll('.hoverable').forEach(el => {
el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
});
// ============================================
// HONEY DRIP CANVAS EFFECT
// ============================================
const canvas = document.getElementById('honey-canvas');
const ctx = canvas.getContext('2d');
let particles = [];
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
class HoneyDrop {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = Math.random() * 8 + 4;
this.speedY = Math.random() * 2 + 1;
this.speedX = (Math.random() - 0.5) * 0.5;
this.opacity = Math.random() * 0.5 + 0.3;
this.color = `rgba(212, 146, 10, ${this.opacity})`;
}
update() {
this.y += this.speedY;
this.x += this.speedX;
this.size -= 0.02;
this.speedY += 0.05; // gravity
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
}
}
let lastMouseX = 0;
document.addEventListener('mousemove', (e) => {
if (Math.abs(e.clientX - lastMouseX) > 30) {
particles.push(new HoneyDrop(e.clientX, e.clientY));
lastMouseX = e.clientX;
}
});
function animateParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles = particles.filter(p => p.size > 0 && p.y < canvas.height);
particles.forEach(p => {
p.update();
p.draw();
});
requestAnimationFrame(animateParticles);
}
animateParticles();
// ============================================
// PRELOADER
// ============================================
window.addEventListener('load', () => {
setTimeout(() => {
document.querySelector('.preloader').classList.add('loaded');
}, 1500);
});
// ============================================
// SCROLL REVEAL ANIMATIONS
// ============================================
const observerOptions = {
threshold: 0.2,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
}
});
}, observerOptions);
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// ============================================
// NAV SCROLL EFFECT
// ============================================
window.addEventListener('scroll', () => {
const nav = document.querySelector('nav');
if (window.scrollY > 100) {
nav.style.mixBlendMode = 'normal';
nav.style.background = 'rgba(10, 10, 10, 0.9)';
nav.style.backdropFilter = 'blur(10px)';
} else {
nav.style.mixBlendMode = 'difference';
nav.style.background = 'transparent';
nav.style.backdropFilter = 'none';
}
});
// ============================================
// 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 HONEY BLOBS
// ============================================
const blobs = document.querySelectorAll('.honey-blob');
window.addEventListener('scroll', () => {
const scrolled = window.scrollY;
blobs.forEach((blob, i) => {
const speed = 0.1 + (i * 0.05);
blob.style.transform = `translateY(${scrolled * speed}px)`;
});
});
// ============================================
// INTERACTIVE HEXAGONS (MOUSE TRACKING)
// ============================================
const aboutHexes = document.querySelectorAll('.about-hex');
document.addEventListener('mousemove', (e) => {
const x = (e.clientX / window.innerWidth - 0.5) * 20;
const y = (e.clientY / window.innerHeight - 0.5) * 20;
aboutHexes.forEach((hex, i) => {