/* ───────── Tokens ───────── */ :root { --wine: #7b2d3e; --espresso: #3c2415; --walnut: #4a2e1a; --terracotta: #a3552e; --honey: #e0a458; --paper: #f6efe3; --cream: #fff8ec; --ink: #6b543e; --line: rgba(90, 54, 28, 0.18); --font-display: 'EB Garamond', Georgia, serif; --font-body: 'EB Garamond', Georgia, serif; --font-ui: 'Manrope', -apple-system, 'Segoe UI', sans-serif; --radius: 10px; --photo-radius: 8px 56px 8px 8px; --photo-shadow: 8px 8px 0 rgba(163, 85, 46, 0.25); --wrap: 1080px; } /* ───────── Base ───────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; color: var(--espresso); margin: 0 0 0.5em; } h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); } h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); } h3 { font-size: 1.35rem; } h1 em, h2 em { color: var(--wine); font-style: italic; } p { margin: 0 0 1em; } a { color: var(--wine); } img { max-width: 100%; height: auto; display: block; } address { font-style: normal; } ul { padding: 0; margin: 0; list-style: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--espresso); color: var(--cream); padding: 10px 18px; font-family: var(--font-ui); } .skip-link:focus { left: 0; } .label { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--terracotta); margin: 0 0 14px; } .label-honey { color: var(--honey); } .btn { display: inline-block; font-family: var(--font-ui); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 999px; padding: 14px 26px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(60, 36, 21, 0.18); } .btn:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; } .btn-solid { background: var(--wine); color: var(--cream); } .btn-outline { color: var(--wine); border: 1.5px solid var(--wine); padding: 12.5px 26px; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .section-inner { max-width: var(--wrap); margin: 0 auto; padding: 84px 24px; } /* reveal animation: hidden only once JS confirms it can reveal (.js on ); without JS (or before it runs), content stays fully visible and motionless */ .reveal { transition: opacity 0.6s ease, transform 0.6s ease; } .js .reveal { opacity: 0; transform: translateY(24px); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } /* ───────── Nav ───────── */ .site-nav { position: sticky; top: 0; z-index: 50; background: var(--paper); background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .nav-inner { max-width: var(--wrap); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .logo { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--espresso); text-decoration: none; } .logo em { color: var(--wine); } .nav-menu { display: flex; align-items: center; gap: 26px; } .nav-menu a:not(.btn) { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--espresso); text-decoration: none; } .nav-menu a:not(.btn):hover { color: var(--wine); } .nav-menu .btn { padding: 10px 20px; } .nav-toggle { display: none; } /* ───────── Hero ───────── */ .hero-inner { max-width: var(--wrap); margin: 0 auto; padding: 72px 24px 84px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .hero-text .lead { font-size: 1.15rem; margin-bottom: 28px; } .hero-media { position: relative; } .hero-media img { border-radius: var(--photo-radius); box-shadow: var(--photo-shadow); aspect-ratio: 4 / 5; object-fit: cover; object-position: center; } .hours-badge { position: absolute; bottom: -14px; left: -14px; margin: 0; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; font-family: var(--font-ui); font-size: 0.78rem; color: var(--walnut); box-shadow: 0 8px 22px rgba(60, 36, 21, 0.15); } /* ───────── About ───────── */ .about { background: var(--cream); border-block: 1px solid var(--line); } .about .section-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; } .about-media { position: relative; } .about-media img { border-radius: var(--photo-radius); box-shadow: var(--photo-shadow); aspect-ratio: 4 / 5; object-fit: cover; } .years-badge { position: absolute; right: -12px; bottom: -18px; margin: 0; width: 92px; height: 92px; border-radius: 50%; background: var(--wine); color: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(60, 36, 21, 0.25); } .years-badge strong { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; } .years-badge span { font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; } /* ───────── Products + nuts band ───────── */ .section-head { text-align: center; margin-bottom: 40px; } .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; text-align: center; } .card p { font-size: 0.92rem; margin: 0; } .nuts { margin-top: 44px; background: var(--walnut); border-radius: 16px; padding: 40px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: center; } .nuts h2 { color: var(--paper); } .nuts h2 em { color: var(--honey); } .nuts p:not(.label) { color: rgba(246, 239, 227, 0.82); margin: 0; } .nuts-media { display: flex; gap: 14px; } .nuts-media picture { flex: 1; } .nuts-media img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; } /* ───────── Gifts ───────── */ .gifts { background: var(--cream); border-block: 1px solid var(--line); } .gifts .section-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; } .chips li { font-family: var(--font-ui); font-size: 0.78rem; color: var(--walnut); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; } .gifts-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .gifts-gallery figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); } .gifts-gallery img { aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.4s ease; } .gifts-gallery li:hover img, .gifts-gallery li:focus-within img { transform: scale(1.05); } .gifts-gallery figcaption { position: absolute; inset: auto 0 0 0; background: linear-gradient(transparent, rgba(60, 36, 21, 0.85)); color: var(--cream); font-family: var(--font-ui); font-size: 0.72rem; padding: 26px 12px 10px; opacity: 0; transition: opacity 0.3s ease; } .gifts-gallery li:hover figcaption, .gifts-gallery li:focus-within figcaption { opacity: 1; } @media (prefers-reduced-motion: reduce) { .gifts-gallery img, .gifts-gallery figcaption { transition: none; } } /* ───────── Contact ───────── */ .contact .section-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; } .contact address p { font-family: var(--font-ui); font-size: 0.95rem; color: var(--walnut); margin-bottom: 12px; } .contact .cta-row { margin-top: 24px; } .open-badge { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; margin-left: 8px; vertical-align: 2px; } .open-badge.is-open { background: #3f7d47; color: #fff; } .open-badge.is-closed { background: var(--espresso); color: var(--cream); } .contact-map iframe { width: 100%; height: 420px; border: 0; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(60, 36, 21, 0.12); } /* ───────── Footer ───────── */ .site-footer { background: var(--espresso); text-align: center; padding: 44px 24px; } .site-footer p { margin: 0 0 8px; font-family: var(--font-ui); font-size: 0.82rem; color: rgba(246, 239, 227, 0.65); } .site-footer a { color: var(--cream); } .footer-logo { font-family: var(--font-display); font-size: 1.5rem; color: var(--cream); } .footer-logo em { color: var(--honey); } .footer-note { margin-top: 14px; } /* ───────── Responsive ───────── */ @media (max-width: 900px) { .hero-inner, .about .section-inner, .gifts .section-inner, .contact .section-inner, .nuts { grid-template-columns: 1fr; } .hero-inner { padding-top: 48px; } .hero-media { max-width: 480px; } .product-grid { grid-template-columns: repeat(2, 1fr); } .contact-map iframe { height: 320px; } } @media (max-width: 820px) { .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; } .bars, .bars::before, .bars::after { content: ''; display: block; width: 20px; height: 2px; background: var(--espresso); position: relative; } .bars::before { position: absolute; top: -6px; } .bars::after { position: absolute; top: 6px; } .nav-menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); display: none; padding: 8px 24px 16px; } .nav-menu.open { display: flex; } .nav-menu li { width: 100%; } .nav-menu a:not(.btn) { display: block; padding: 12px 0; } .nav-menu .nav-call { margin-top: 8px; } } @media (max-width: 560px) { .section-inner { padding: 56px 18px; } .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .gifts-gallery { grid-template-columns: 1fr 1fr; } .nuts { padding: 26px 20px; } .btn { width: 100%; text-align: center; } .cta-row { flex-direction: column; align-items: stretch; } } /* ───────── Icons ───────── */ .icon { width: 1.1em; height: 1.1em; vertical-align: -0.18em; } .btn .icon { margin-right: 4px; } .card-icon { display: block; margin-bottom: 12px; } .card-icon svg { width: 34px; height: 34px; color: var(--wine); } .chips .icon { color: var(--terracotta); margin-right: 3px; } .contact address .icon { color: var(--terracotta); margin-right: 5px; } .hours-badge .icon { color: var(--terracotta); }