@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Cormorant+Infant:ital,wght@0,300;0,400;1,300;1,400&family=Tenor+Sans&family=IM+Fell+English:ital@0;1&display=swap"; @import "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"; /* ════════════════════════════════════════════════════════════════ ELLA MEADERY — Shared Stylesheet Applies to: index.html (homepage) · contact.html (contact page) Fonts loaded via Google Fonts in each HTML Bootstrap 5.3.8 loaded separately via CDN ════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════ 1. BRAND TOKENS, BASE & ALL HOMEPAGE STYLES ══════════════════════════════════════════════════════ */ /* ═══════════════════════════════ BRAND TOKENS ═══════════════════════════════ */ :root { --em-gold: #C8821A; --em-gold-light: #E8A83A; --em-gold-pale: #F2C96A; --em-amber: #A85800; --em-amber-nav: rgba(72, 36, 0, 0.97); --em-magenta: #C4255E; --em-magenta-deep: #A81E50; --em-sage: #4A6E4A; --em-sage-mid: #5A7E5A; --em-charcoal: #1A1814; --em-ink: #2C2820; --em-parchment: #F5EED8; --em-parchment-d: #EDE0C0; --em-cream: #FAF6EC; --em-off-white: #FDFAF2; --font-display: 'Cormorant Garamond', Georgia, serif; --font-italic: 'IM Fell English', Georgia, serif; --font-body: 'Cormorant Infant', Georgia, serif; --font-sans: 'Tenor Sans', sans-serif; } /* ═══════════════════════════════ BASE OVERRIDES ═══════════════════════════════ */ html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 20px; background-color: var(--em-cream); color: var(--em-ink); overflow-x: hidden; } /* Grain overlay */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* ═══════════════════════════════ NAVBAR ═══════════════════════════════ */ .em-navbar { background: var(--em-amber-nav) !important; backdrop-filter: blur(16px); border-bottom: 1px solid rgba(200,130,26,0.25); min-height: 72px; padding: 0 1rem; } .em-wordmark { text-decoration: none; line-height: 1; } .em-wordmark .wm-main { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--em-gold-light); transition: color 0.2s; } .em-wordmark .wm-sub { display: block; font-family: var(--font-sans); font-size: 0.46rem; letter-spacing: 0.36em; text-transform: uppercase; /*color: rgba(200,130,26,0.45);*/ color: var(--em-off-white); margin-top: 2px; } .em-wordmark:hover .wm-main { color: var(--em-gold-pale); } .em-nav-link { font-family: var(--font-sans); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,238,216,0.55) !important; transition: color 0.25s; padding: 0.5rem 0.75rem !important; } .em-nav-link:hover { color: var(--em-gold-light) !important; } .btn-em-shop { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--em-charcoal); background: var(--em-gold); border: none; border-radius: 0; padding: 0.55rem 1.5rem; transition: background 0.25s; text-decoration: none; display: inline-block; } .btn-em-shop:hover { background: var(--em-gold-light); color: var(--em-charcoal); } .navbar-toggler { border-color: rgba(200,130,26,0.4) !important; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(232,168,58,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* ═══════════════════════════════ HERO ═══════════════════════════════ */ .em-hero { position: relative; min-height: 100vh; background: var(--em-parchment); overflow: hidden; padding-top: 8rem; padding-bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .em-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(168,88,0,0.07) 0%, transparent 60%), radial-gradient(ellipse 80% 40% at 0% 50%, rgba(168,88,0,0.06) 0%, transparent 55%), radial-gradient(ellipse 80% 40% at 100% 50%, rgba(168,88,0,0.06) 0%, transparent 55%), radial-gradient(ellipse 100% 50% at 50% 100%,rgba(90,110,74,0.08) 0%, transparent 60%); } .em-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, transparent, transparent 52px, rgba(168,88,0,0.028) 52px, rgba(168,88,0,0.028) 53px ); } .em-hero-logo-wrap { position: relative; z-index: 2; animation: logoReveal 1.4s cubic-bezier(0.22,1,0.36,1) 0.1s both; } @keyframes logoReveal { from { opacity: 0; transform: translateY(28px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .em-hero-logo { width: clamp(260px, 38vw, 500px); height: auto; display: block; filter: drop-shadow(0 8px 24px rgba(44,40,32,0.18)) drop-shadow(0 2px 6px rgba(44,40,32,0.12)); transition: filter 0.6s ease, transform 0.6s ease; } .em-hero-logo:hover { filter: drop-shadow(0 12px 36px rgba(44,40,32,0.24)) drop-shadow(0 4px 10px rgba(44,40,32,0.14)); transform: scale(1.015) translateY(-3px); } .em-hero-text { position: relative; z-index: 2; animation: fadeUp 1s ease-out 0.6s both; } .em-hero-kicker { font-family: var(--font-sans); font-size: 0.58rem; letter-spacing: 0.45em; text-transform: uppercase; color: var(--em-amber); display: flex; align-items: center; justify-content: center; gap: 1rem; } .em-hero-kicker::before, .em-hero-kicker::after { content: ''; width: 28px; height: 1px; background: rgba(168,88,0,0.4); flex-shrink: 0; } .em-hero-tagline { font-family: var(--font-italic); font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-style: italic; color: rgba(44,40,32,0.58); line-height: 1.75; } /* Hero CTAs */ .btn-em-primary { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--em-off-white); background: var(--em-amber); border: none; border-radius: 0; padding: 0.9rem 2.2rem; text-decoration: none; display: inline-block; transition: background 0.25s, transform 0.2s; } .btn-em-primary:hover { background: var(--em-gold); color: var(--em-charcoal); transform: translateY(-2px); } .btn-em-ghost { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(44,40,32,0.5); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.25s, gap 0.2s; background: none; border: none; padding: 0; } .btn-em-ghost:hover { color: var(--em-amber); gap: 0.8rem; } .btn-em-ghost::after { content: '→'; } /* Pillars strip */ .em-pillars { position: relative; z-index: 2; width: 100%; background: rgba(26,24,20,0.96); animation: fadeUp 1s ease-out 1s both; } .em-pillar { padding: 1.8rem 2rem; border-right: 1px solid rgba(200,130,26,0.12); transition: background 0.3s; } .em-pillar:last-child { border-right: none; } .em-pillar:hover { background: rgba(200,130,26,0.07); } .em-pillar-num { font-family: var(--font-display); font-weight: 300; font-size: 2.2rem; line-height: 1; color: rgba(200,130,26,0.2); } .em-pillar strong { display: block; font-family: var(--font-display); font-weight: 600; /*font-size: 0.95rem;*/ font-size: 1.2rem; color: var(--em-off-white); margin-bottom: 0.15rem; } .em-pillar span { font-family: var(--font-body); /*font-size: 0.82rem;*/ font-style: italic; color: rgba(245,238,216,0.36); } /* Hero vertical text */ .em-hero-craft-text { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 0.88rem; color: rgba(168,88,0,0.2); letter-spacing: 0.14em; writing-mode: vertical-rl; position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%) rotate(180deg); z-index: 2; animation: fadeUp 1.2s ease-out 1.1s both; } /* Hero scroll indicator */ .em-hero-scroll { position: absolute; bottom: 5.5rem; left: 3.5rem; display: flex; align-items: center; gap: 0.8rem; animation: fadeUp 1s ease-out 1.3s both; z-index: 3; } .em-scroll-bar { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--em-amber), transparent); animation: scrollDrip 2.5s ease-in-out infinite; transform-origin: top; } @keyframes scrollDrip { 0%,100% { transform: scaleY(0.6); opacity: 0.35; } 50% { transform: scaleY(1); opacity: 0.8; } } .em-scroll-label { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.38em; text-transform: uppercase; color: rgba(168,88,0,0.38); writing-mode: vertical-rl; } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════ SHARED SECTION UTILITIES ═══════════════════════════════ */ .em-eyebrow { font-family: var(--font-sans); font-size: 0.56rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--em-gold); display: flex; align-items: center; gap: 1rem; } .em-eyebrow::before, .em-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--em-gold); } .em-eyebrow.justify-content-start::before { display: none; } .em-section-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.1; color: var(--em-ink); } .em-section-title em { font-style: italic; color: var(--em-gold); } .em-section-title-light { color: var(--em-off-white); } .em-section-title-light em { color: var(--em-gold-light); } .em-eyebrow-light { color: var(--em-gold-pale); } .em-eyebrow-light::before, .em-eyebrow-light::after { background: rgba(242,201,106,0.45); } /* ═══════════════════════════════ MANIFESTO ═══════════════════════════════ */ .em-manifesto { background: var(--em-parchment); position: relative; } .em-manifesto::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--em-amber), var(--em-gold), var(--em-gold-light), var(--em-gold), var(--em-amber)); } .em-manifesto-num { font-family: var(--font-display); font-weight: 300; font-size: 8rem; line-height: 1; color: rgba(168,88,0,0.09); margin-bottom: -1.5rem; } .em-manifesto-label { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; color: var(--em-ink); line-height: 1.2; } .em-manifesto-label em { display: block; font-style: italic; font-weight: 300; color: var(--em-gold); } .em-manifesto-lede { font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; line-height: 1.45; color: var(--em-ink); } .em-manifesto-lede em { font-style: italic; color: var(--em-amber); } .em-manifesto-body { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.95; color: #4A4030; } .em-manifesto-body::first-letter { font-family: var(--font-display); font-size: 4rem; font-weight: 600; float: left; line-height: 0.75; margin-right: 0.08em; margin-top: 0.1em; color: var(--em-gold); } /* ═══════════════════════════════ PROCESS ═══════════════════════════════ */ .em-process { background: var(--em-cream); } .em-process-step { padding: 3rem 2.8rem; border-right: 1px solid rgba(168,88,0,0.1); position: relative; transition: background 0.3s; } .em-process-step:last-child { border-right: none; } .em-process-step:hover { background: var(--em-parchment); } .em-step-num { font-family: var(--font-display); font-weight: 300; font-size: 5rem; line-height: 1; color: rgba(168,88,0,0.07); position: absolute; top: 1.2rem; right: 1.5rem; } .em-step-icon { font-size: 1.8rem; display: block; } .em-step-title { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--em-ink); } .em-step-body { font-family: var(--font-body); font-size: 0.95rem; font-style: italic; line-height: 1.85; color: #5A5040; } .em-process-grid { border: 1px solid rgba(168,88,0,0.14); } /* ═══════════════════════════════ MEADS ═══════════════════════════════ */ .em-meads { background: var(--em-charcoal); position: relative; overflow: hidden; } .em-meads::before { content: ''; position: absolute; bottom: -200px; right: -200px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(168,88,0,0.1) 0%, transparent 70%); pointer-events: none; } .em-mead-card { background: rgba(245,238,216,0.03); border: 1px solid rgba(200,130,26,0.1); transition: background 0.35s, transform 0.35s, border-color 0.35s; cursor: pointer; height: 100%; } .em-mead-card:hover { background: rgba(245,238,216,0.06); transform: translateY(-6px); border-color: rgba(200,130,26,0.3); } .em-mead-visual { height: 240px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .em-classic-bg { background: linear-gradient(160deg,#2A1A08 0%,#5C3010 50%,#8A5018 100%); } .em-raspberry-bg { background: linear-gradient(160deg,#1A0810 0%,#4A1030 55%,#8A1848 100%); } .em-wildflower-bg { background: linear-gradient(160deg,#0E1A0E 0%,#2A4A2A 55%,#3A6A3A 100%); } .em-bottle-svg { opacity: 0.5; transition: opacity 0.35s, transform 0.35s; } .em-mead-card:hover .em-bottle-svg { opacity: 0.72; transform: translateY(-4px) scale(1.02); } .em-mead-seal { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; background: var(--em-gold); clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--em-charcoal); } .em-mead-varietal { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--em-gold); } .em-mead-name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--em-off-white); line-height: 1.15; } .em-mead-desc { font-family: var(--font-body); font-size: 1rem; font-style: italic; line-height: 1.8; color: rgba(245,238,216,0.48); } .em-note-tag { display: inline-block; font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(200,130,26,0.6); border: 1px solid rgba(200,130,26,0.22); padding: 0.28rem 0.6rem; margin: 0.15rem 0.15rem 0 0; } .em-mead-cta { font-family: var(--font-sans); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--em-gold-light); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid rgba(200,130,26,0.28); padding-bottom: 0.15rem; transition: gap 0.2s, color 0.2s; } .em-mead-cta:hover { gap: 0.8rem; color: var(--em-gold-pale); } .em-mead-cta::after { content: '→'; } /* ═══════════════════════════════ NEWSLETTER ═══════════════════════════════ */ .em-newsletter { background: var(--em-parchment); position: relative; overflow: hidden; } .em-newsletter::before { content: '⬡'; position: absolute; right: -3rem; top: 50%; transform: translateY(-50%); font-size: 28rem; line-height: 1; color: rgba(168,88,0,0.04); pointer-events: none; } .em-newsletter-heading { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.08; color: var(--em-ink); } .em-newsletter-heading em { display: block; font-style: italic; color: var(--em-gold); } .em-newsletter-body { font-family: var(--font-body); font-size: 1.05rem; font-style: italic; line-height: 1.85; color: #5A4E38; } .em-perk { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: #6A5C42; } .em-perk::before { content: ''; width: 18px; height: 1px; background: var(--em-gold); flex-shrink: 0; } .em-nl-card { background: var(--em-charcoal); padding: 3.5rem; position: relative; overflow: hidden; } .em-nl-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 80px; height: 80px; background: linear-gradient(135deg, transparent 50%, rgba(200,130,26,0.1) 50%); } .em-nl-card-eyebrow { font-family: var(--font-sans); font-size: 0.52rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--em-gold); } .em-nl-card-title { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 1.5rem; color: var(--em-off-white); line-height: 1.3; } /* Mailchimp form */ .mc-field-group label { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(200,130,26,0.6); } .mc-field-group input[type="text"], .mc-field-group input[type="email"] { background: rgba(245,238,216,0.06); border: 1px solid rgba(200,130,26,0.22); border-radius: 0; color: var(--em-off-white); font-family: var(--font-body); font-size: 1rem; font-style: italic; padding: 0.85rem 1.1rem; width: 100%; outline: none; transition: border-color 0.25s, background 0.25s; } .mc-field-group input::placeholder { color: rgba(245,238,216,0.22); } .mc-field-group input:focus { border-color: var(--em-gold); background: rgba(245,238,216,0.1); box-shadow: none; } .btn-em-subscribe { width: 100%; background: var(--em-gold); color: var(--em-charcoal); font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; padding: 1rem 2rem; border: none; border-radius: 0; cursor: pointer; transition: background 0.25s, transform 0.2s; } .btn-em-subscribe:hover { background: var(--em-gold-light); transform: translateY(-1px); } .em-mc-privacy { font-family: var(--font-body); font-size: 0.78rem; font-style: italic; color: rgba(245,238,216,0.28); line-height: 1.6; } #mce-success-response { font-family: var(--font-body); font-style: italic; font-size: 0.95rem; color: #8FBF8F; } #mce-error-response { font-family: var(--font-body); font-style: italic; font-size: 0.95rem; color: #E87A7A; } /* Age verification checkbox */ .age-verify { display: flex; align-items: flex-start; gap: 0.85rem; margin-top: 0.5rem; cursor: pointer; } .age-verify input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; min-width: 18px; border: 1px solid rgba(200,130,26,0.4); background: rgba(245,238,216,0.05); cursor: pointer; position: relative; margin-top: 2px; transition: border-color 0.2s, background 0.2s; border-radius: 0; } .age-verify input[type="checkbox"]:checked { background: var(--em-gold); border-color: var(--em-gold); } .age-verify input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 6px; height: 10px; border: 2px solid var(--em-charcoal); border-top: none; border-left: none; transform: rotate(45deg); } .age-verify input[type="checkbox"]:focus-visible { outline: 2px solid var(--em-gold); outline-offset: 2px; } .age-verify-label { font-family: var(--font-sans); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,238,216,0.55); line-height: 1.6; cursor: pointer; user-select: none; } .age-verify-label em { font-style: normal; color: var(--em-gold); } .age-verify-error { font-family: var(--font-body); font-style: italic; font-size: 0.82rem; color: #E87A7A; margin-top: 0.4rem; display: none; } /* ═══════════════════════════════ TESTIMONIALS ═══════════════════════════════ */ .em-testimonials { background: var(--em-charcoal); position: relative; overflow: hidden; } .em-testimonials::before { content: '\201C'; position: absolute; top: -4rem; left: 3rem; font-family: var(--font-display); font-size: 32rem; line-height: 1; color: rgba(200,130,26,0.045); pointer-events: none; } .em-testimonials::after { content: ''; position: absolute; bottom: -100px; right: -100px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(168,88,0,0.1) 0%, transparent 70%); pointer-events: none; } .em-tcard { background: rgba(245,238,216,0.03); border: 1px solid rgba(200,130,26,0.1); padding: 3rem 2.8rem; position: relative; display: flex; flex-direction: column; height: 100%; transition: background 0.35s, border-color 0.35s; } .em-tcard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--em-gold), transparent); opacity: 0; transition: opacity 0.35s; } .em-tcard:hover { background: rgba(245,238,216,0.06); border-color: rgba(200,130,26,0.28); } .em-tcard:hover::before { opacity: 1; } .em-quote-mark { font-family: var(--font-display); font-size: 5rem; line-height: 0.6; color: var(--em-gold); opacity: 0.35; font-weight: 700; } .em-tcard-body { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; font-weight: 300; color: rgba(245,238,216,0.82); line-height: 1.7; flex: 1; } .em-tcard-body em { font-style: normal; color: var(--em-gold-light); } .em-stars { color: var(--em-gold); font-size: 0.75rem; letter-spacing: 0.1em; } .em-tcard-divider { width: 32px; height: 1px; background: rgba(200,130,26,0.3); } .em-author-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--em-off-white); } .em-author-detail { font-family: var(--font-sans); font-size: 0.52rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(200,130,26,0.55); } /* ═══════════════════════════════ EVENT ═══════════════════════════════ */ .em-event { background: var(--em-parchment-d); } .em-event-heading { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.05; color: var(--em-ink); } .em-event-heading em { display: block; font-style: italic; font-weight: 300; color: var(--em-magenta); } .em-event-date { font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--em-gold); display: flex; align-items: center; gap: 0.7rem; } .em-event-date::before { content: ''; width: 20px; height: 1px; background: var(--em-gold); } .em-event-desc { font-family: var(--font-body); font-size: 1.05rem; font-style: italic; line-height: 1.85; color: #4A4030; } .btn-em-magenta { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--em-off-white); background: var(--em-magenta); border: none; border-radius: 40px; padding: 0.9rem 2.2rem; text-decoration: none; display: inline-block; transition: background 0.25s, transform 0.2s; } .btn-em-magenta:hover { background: var(--em-magenta-deep); transform: translateY(-2px); color: var(--em-off-white); } .em-event-quote-card { background: var(--em-charcoal); padding: 3.5rem; position: relative; overflow: hidden; } .em-event-quote-card::before { content: '"'; position: absolute; top: -1.5rem; left: 1.5rem; font-family: var(--font-display); font-size: 12rem; font-weight: 700; color: rgba(200,130,26,0.07); line-height: 1; pointer-events: none; } .em-event-quote-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 60px; height: 60px; background: linear-gradient(135deg, transparent 50%, rgba(200,130,26,0.12) 50%); } .em-eq-quote { font-family: var(--font-display); font-size: 1.5rem; font-style: italic; font-weight: 300; color: var(--em-off-white); line-height: 1.55; position: relative; z-index: 1; } .em-eq-quote em { color: var(--em-gold-light); font-style: normal; } .em-eq-detail-label { font-family: var(--font-sans); font-size: 0.52rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--em-gold); display: block; } .em-eq-detail-val { font-family: var(--font-body); font-size: 0.9rem; font-style: italic; color: rgba(245,238,216,0.5); } .em-eq-divider { border-top: 1px solid rgba(200,130,26,0.14); } /* ═══════════════════════════════ RANCH STORY ═══════════════════════════════ */ .em-ranch { background: var(--em-cream); } .em-ranch-heading { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.05; color: var(--em-ink); } .em-ranch-heading em { display: block; font-style: italic; color: var(--em-gold); } .em-ranch-pull { font-family: var(--font-italic); font-size: 1.2rem; font-style: italic; color: var(--em-amber); border-left: 3px solid var(--em-gold); padding-left: 1.5rem; line-height: 1.65; } .em-ranch-body { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.9; color: #4A4030; } .em-ranch-link { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--em-gold); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--em-gold-pale); padding-bottom: 0.2rem; transition: gap 0.2s, color 0.2s; } .em-ranch-link:hover { gap: 0.8rem; color: var(--em-amber); } .em-ranch-link::after { content: '→'; } .em-stats-grid { background: rgba(168,88,0,0.12); border: 1px solid rgba(168,88,0,0.14); } .em-stat { background: var(--em-cream); padding: 2.5rem 1.5rem; transition: background 0.3s; border-right: 1px solid rgba(168,88,0,0.1); border-bottom: 1px solid rgba(168,88,0,0.1); } .em-stat:hover { background: var(--em-parchment); } .em-stat-val { font-family: var(--font-display); font-weight: 300; font-size: 3rem; line-height: 1; color: var(--em-gold); } .em-stat-label { font-family: var(--font-sans); font-size: 0.52rem; letter-spacing: 0.22em; text-transform: uppercase; color: #8A7A60; } /* ═══════════════════════════════ BLOG ═══════════════════════════════ */ .em-blog { background: var(--em-sage-mid); position: relative; overflow: hidden; } .em-blog::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 15% 50%, rgba(26,24,20,0.22) 0%, transparent 65%), radial-gradient(ellipse 60% 70% at 85% 50%, rgba(26,24,20,0.15) 0%, transparent 60%); pointer-events: none; } .em-blog-heading { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3.5vw, 3rem); color: var(--em-off-white); } .em-blog-heading em { font-style: italic; color: var(--em-gold-pale); } .em-blog-body { font-family: var(--font-body); font-size: 1.05rem; font-style: italic; line-height: 1.85; color: rgba(253,250,242,0.68); } .em-blog-link { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--em-gold-pale); text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; border-bottom: 1px solid rgba(242,201,106,0.28); padding-bottom: 0.2rem; transition: gap 0.2s, color 0.2s; } .em-blog-link:hover { gap: 1rem; color: var(--em-off-white); } .em-blog-link::after { content: '→'; } /* ═══════════════════════════════ FOOTER ═══════════════════════════════ */ .em-footer { background: #0F0D0A; border-top: 1px solid rgba(200,130,26,0.12); } .em-footer-divider { border-top: 1px solid rgba(200,130,26,0.08); } .em-fb-name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--em-gold); } .em-fb-sub { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(200,130,26,0.35); } .em-footer-link { font-family: var(--font-sans); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,238,216,0.35); text-decoration: none; transition: color 0.2s; } .em-footer-link:hover { color: var(--em-gold); } .em-soc { width: 36px; height: 36px; border: 1px solid rgba(200,130,26,0.18); display: inline-flex; align-items: center; justify-content: center; color: rgba(200,130,26,0.4); text-decoration: none; font-family: var(--font-sans); font-size: 0.7rem; transition: border-color 0.2s, color 0.2s; } .em-soc:hover { border-color: var(--em-gold); color: var(--em-gold); } .em-footer-copy { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,238,216,0.18); } /* ══════════════════════════════════════════════════════ 2. CONTACT PAGE — UNIQUE STYLES (classes used only on contact.html) ══════════════════════════════════════════════════════ */ @keyframes pinBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ═══════════════════════════════ BRAND TOKENS — identical to homepage ═══════════════════════════════ */ /* ═══════════════════════════════ NAVBAR — identical to homepage ═══════════════════════════════ */ .em-nav-link:hover, .em-nav-link.active { color: var(--em-gold-light) !important; } /* ═══════════════════════════════ SHARED UTILITIES — identical to homepage ═══════════════════════════════ */ /* Footer — identical to homepage */ /* ═══════════════════════════════ PAGE HEADER — dark hero band ═══════════════════════════════ */ .contact-header { position: relative; background: var(--em-charcoal); padding-top: 10rem; padding-bottom: 6rem; overflow: hidden; } .contact-header::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 80% at 30% 50%, rgba(168,88,0,0.22) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 80% 30%, rgba(200,130,26,0.12) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 60% 90%, rgba(74,110,74,0.1) 0%, transparent 50%); } /* Ruled line texture */ .contact-header::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, transparent, transparent 52px, rgba(200,130,26,0.022) 52px, rgba(200,130,26,0.022) 53px ); } .contact-header-inner { position: relative; z-index: 2; } .contact-header-kicker { font-family: var(--font-sans); font-size: 0.56rem; letter-spacing: 0.45em; text-transform: uppercase; color: var(--em-gold); display: flex; align-items: center; gap: 1rem; animation: fadeUp 0.9s ease-out 0.2s both; } .contact-header-kicker::before { content: ''; width: 32px; height: 1px; background: rgba(200,130,26,0.5); flex-shrink: 0; } .contact-header-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(3.5rem, 7vw, 6.5rem); line-height: 0.9; color: var(--em-off-white); animation: fadeUp 0.9s ease-out 0.35s both; } .contact-header-title em { display: block; font-style: italic; color: var(--em-gold-light); } .contact-header-rule { display: flex; align-items: center; gap: 0.8rem; animation: fadeUp 0.9s ease-out 0.45s both; } .contact-header-rule::before { content: ''; width: 40px; height: 1px; background: rgba(200,130,26,0.35); } .contact-header-rule::after { content: ''; flex: 1; height: 1px; background: rgba(200,130,26,0.12); } .contact-rule-diamond { width: 6px; height: 6px; background: var(--em-gold); transform: rotate(45deg); flex-shrink: 0; } .contact-header-sub { font-family: var(--font-italic); font-size: clamp(1rem, 2vw, 1.2rem); font-style: italic; color: rgba(245,238,216,0.5); line-height: 1.75; max-width: 520px; animation: fadeUp 0.9s ease-out 0.55s both; } /* Vertical craft text — matches homepage style */ .contact-craft-text { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 0.88rem; color: rgba(168,88,0,0.18); letter-spacing: 0.14em; writing-mode: vertical-rl; position: absolute; right: 3rem; top: 50%; transform: translateY(-50%) rotate(180deg); z-index: 2; animation: fadeUp 1.2s ease-out 0.8s both; } /* ═══════════════════════════════ CONTACT GRID — form + sidebar ═══════════════════════════════ */ .contact-body { background: var(--em-cream); position: relative; } .contact-body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--em-amber), var(--em-gold), var(--em-gold-light), var(--em-gold), var(--em-amber)); } /* ── Contact form card ── */ .contact-form-wrap { background: var(--em-parchment); padding: 3.5rem; position: relative; overflow: hidden; animation: fadeUp 0.9s ease-out 0.2s both; } .contact-form-wrap::after { content: ''; position: absolute; bottom: 0; right: 0; width: 80px; height: 80px; background: linear-gradient(135deg, transparent 50%, rgba(168,88,0,0.08) 50%); } .cf-title { font-family: var(--font-display); font-weight: 300; font-size: 2rem; line-height: 1.1; color: var(--em-ink); margin-bottom: 0.3rem; } .cf-title em { font-style: italic; color: var(--em-gold); } .cf-subtitle { font-family: var(--font-body); font-size: 0.95rem; font-style: italic; color: rgba(44,40,32,0.5); margin-bottom: 2.2rem; line-height: 1.65; } /* Form field styles */ .cf-label { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(168,88,0,0.7); margin-bottom: 0.35rem; display: block; } .cf-required { color: var(--em-gold); margin-left: 2px; } .cf-input, .cf-select, .cf-textarea { width: 100%; background: rgba(250,246,236,0.8); border: 1px solid rgba(168,88,0,0.2); color: var(--em-ink); font-family: var(--font-body); font-size: 1rem; font-style: italic; padding: 0.85rem 1.1rem; outline: none; transition: border-color 0.25s, background 0.25s, box-shadow 0.25s; -webkit-appearance: none; border-radius: 0; } .cf-input::placeholder, .cf-textarea::placeholder { color: rgba(44,40,32,0.28); } .cf-input:focus, .cf-select:focus, .cf-textarea:focus { border-color: var(--em-gold); background: #FFFDF5; box-shadow: 0 0 0 3px rgba(200,130,26,0.08); } .cf-textarea { resize: vertical; min-height: 148px; line-height: 1.75; } /* Custom select arrow */ .cf-select-wrap { position: relative; } .cf-select-wrap::after { content: ''; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); width: 8px; height: 5px; background: var(--em-gold); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; } .cf-select { cursor: pointer; padding-right: 2.5rem; } .cf-select option { font-style: normal; } /* Checkbox for age */ .cf-check-wrap { display: flex; align-items: flex-start; gap: 0.85rem; cursor: pointer; } .cf-check-wrap input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; min-width: 18px; border: 1px solid rgba(168,88,0,0.4); background: rgba(250,246,236,0.8); cursor: pointer; position: relative; margin-top: 3px; transition: border-color 0.2s, background 0.2s; border-radius: 0; flex-shrink: 0; } .cf-check-wrap input[type="checkbox"]:checked { background: var(--em-gold); border-color: var(--em-gold); } .cf-check-wrap input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 6px; height: 10px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); } .cf-check-wrap input[type="checkbox"]:focus-visible { outline: 2px solid var(--em-gold); outline-offset: 2px; } .cf-check-label { font-family: var(--font-sans); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(44,40,32,0.55); line-height: 1.65; cursor: pointer; user-select: none; } .cf-check-label em { font-style: normal; color: var(--em-amber); } .cf-field-error { font-family: var(--font-body); font-style: italic; font-size: 0.82rem; color: #B84040; margin-top: 0.3rem; display: none; } .cf-field-error.visible { display: block; } /* Submit button */ .btn-cf-submit { font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--em-charcoal); background: var(--em-gold); border: none; border-radius: 0; padding: 1rem 2.5rem; cursor: pointer; transition: background 0.25s, transform 0.2s; display: inline-block; width: 100%; } .btn-cf-submit:hover { background: var(--em-gold-light); transform: translateY(-1px); } /* Success state */ .cf-success { display: none; text-align: center; padding: 3rem 1rem; } .cf-success-icon { font-size: 2.5rem; margin-bottom: 1.2rem; display: block; } .cf-success-title { font-family: var(--font-display); font-weight: 300; font-size: 2rem; color: var(--em-ink); margin-bottom: 0.6rem; } .cf-success-title em { font-style: italic; color: var(--em-gold); } .cf-success-body { font-family: var(--font-body); font-style: italic; font-size: 1.05rem; color: rgba(44,40,32,0.6); line-height: 1.75; } /* ── Sidebar info cards ── */ .contact-sidebar { display: flex; flex-direction: column; gap: 1.5rem; animation: fadeUp 0.9s ease-out 0.35s both; } .info-card { background: var(--em-charcoal); padding: 2.2rem 2.2rem 2rem; position: relative; overflow: hidden; transition: background 0.3s; } .info-card:hover { background: #221E18; } .info-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 50px; height: 50px; background: linear-gradient(135deg, transparent 50%, rgba(200,130,26,0.1) 50%); } .info-card-eyebrow { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--em-gold); margin-bottom: 0.6rem; } .info-card-title { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; color: var(--em-off-white); margin-bottom: 0.5rem; line-height: 1.2; } .info-card-body { font-family: var(--font-body); font-size: 0.92rem; font-style: italic; color: rgba(245,238,216,0.45); line-height: 1.75; } .info-card-body a { color: var(--em-gold-light); text-decoration: none; border-bottom: 1px solid rgba(200,130,26,0.25); transition: color 0.2s, border-color 0.2s; } .info-card-body a:hover { color: var(--em-gold-pale); border-color: rgba(200,130,26,0.5); } .info-card-detail { margin-top: 0.4rem; display: flex; align-items: flex-start; gap: 0.7rem; } .info-card-detail-label { font-family: var(--font-sans); font-size: 0.48rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(200,130,26,0.5); white-space: nowrap; margin-top: 0.15rem; flex-shrink: 0; width: 52px; } .info-card-detail-val { font-family: var(--font-body); font-size: 0.9rem; font-style: italic; color: rgba(245,238,216,0.55); line-height: 1.5; } .info-card-detail-val a { color: var(--em-gold-light); text-decoration: none; border-bottom: 1px solid rgba(200,130,26,0.22); transition: color 0.2s; } .info-card-detail-val a:hover { color: var(--em-gold-pale); } /* Divider inside info card */ .info-card-hr { border: none; border-top: 1px solid rgba(200,130,26,0.12); margin: 1.2rem 0; } /* Social links card */ .social-row { display: flex; gap: 0.75rem; margin-top: 1rem; } .soc-contact { width: 38px; height: 38px; border: 1px solid rgba(200,130,26,0.2); display: inline-flex; align-items: center; justify-content: center; color: rgba(200,130,26,0.45); text-decoration: none; font-family: var(--font-sans); font-size: 0.75rem; transition: border-color 0.2s, color 0.2s, background 0.2s; } .soc-contact:hover { border-color: var(--em-gold); color: var(--em-gold); background: rgba(200,130,26,0.06); } /* ═══════════════════════════════ VISIT BAND — sage green ═══════════════════════════════ */ .visit-band { background: var(--em-sage-mid); position: relative; overflow: hidden; } .visit-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 15% 50%, rgba(26,24,20,0.22) 0%, transparent 65%), radial-gradient(ellipse 60% 70% at 85% 50%, rgba(26,24,20,0.15) 0%, transparent 60%); pointer-events: none; } .visit-band-inner { position: relative; z-index: 1; } .visit-heading { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3.5vw, 3rem); color: var(--em-off-white); line-height: 1.1; } .visit-heading em { font-style: italic; color: var(--em-gold-pale); } .visit-body { font-family: var(--font-body); font-size: 1.05rem; font-style: italic; color: rgba(253,250,242,0.65); line-height: 1.85; } .visit-detail-row { display: flex; flex-direction: column; gap: 1rem; } .visit-detail { display: flex; align-items: flex-start; gap: 1rem; } .visit-detail-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; opacity: 0.7; } .visit-detail-label { font-family: var(--font-sans); font-size: 0.52rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--em-gold-pale); margin-bottom: 0.15rem; display: block; } .visit-detail-val { font-family: var(--font-body); font-size: 0.98rem; font-style: italic; color: rgba(253,250,242,0.72); line-height: 1.5; } /* Map placeholder */ .visit-map { background: rgba(26,24,20,0.5); border: 1px solid rgba(200,130,26,0.15); position: relative; overflow: hidden; min-height: 280px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; } .visit-map::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 45deg, transparent, transparent 20px, rgba(200,130,26,0.025) 20px, rgba(200,130,26,0.025) 21px ); } .visit-map-pin { font-size: 2.5rem; position: relative; z-index: 1; animation: pinBob 3s ease-in-out infinite; } 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } .visit-map-label { font-family: var(--font-sans); font-size: 0.54rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(200,130,26,0.5); position: relative; z-index: 1; } .visit-map-link { font-family: var(--font-sans); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--em-gold-pale); text-decoration: none; border-bottom: 1px solid rgba(242,201,106,0.28); padding-bottom: 0.15rem; position: relative; z-index: 1; transition: color 0.2s; } .visit-map-link:hover { color: var(--em-off-white); } /* ═══════════════════════════════ FAQ BAND — parchment ═══════════════════════════════ */ .faq-band { background: var(--em-parchment-d); } .faq-item { border-bottom: 1px solid rgba(168,88,0,0.14); padding: 1.5rem 0; } .faq-item:first-child { border-top: 1px solid rgba(168,88,0,0.14); } .faq-q { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--em-ink); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; line-height: 1.3; user-select: none; } .faq-q:hover { color: var(--em-amber); } .faq-toggle { width: 22px; height: 22px; border: 1px solid rgba(168,88,0,0.3); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 0.75rem; color: var(--em-gold); transition: background 0.2s, border-color 0.2s, transform 0.3s; } .faq-item.open .faq-toggle { background: var(--em-gold); color: var(--em-charcoal); border-color: var(--em-gold); transform: rotate(45deg); } .faq-a { font-family: var(--font-body); font-size: 1rem; font-style: italic; color: rgba(44,40,32,0.62); line-height: 1.85; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding-top 0.3s ease, opacity 0.3s ease; opacity: 0; } .faq-item.open .faq-a { max-height: 300px; padding-top: 0.8rem; opacity: 1; } /* ════════════════════════════════════════════════════════════════ OUR MEADS — Product grid listing page (our-meads.html) ════════════════════════════════════════════════════════════════ */ @keyframes revealUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ── TOKENS ── */ :root { --gold: #C8821A; --gold-light: #E8A83A; --gold-pale: #F2C96A; --amber: #A85800; --amber-nav: rgba(72,36,0,0.97); --magenta: #C4255E; --magenta-d: #A81E50; --sage: #4A6E4A; --sage-mid: #5A7E5A; --charcoal: #1A1814; --ink: #2C2820; --parchment: #F5EED8; --parchment-d: #EDE0C0; --cream: #FAF6EC; --off-white: #FDFAF2; --fd: 'Cormorant Garamond', Georgia, serif; --fi: 'IM Fell English', Georgia, serif; --fb: 'Cormorant Infant', Georgia, serif; --fs: 'Tenor Sans', sans-serif; } /* ── BASE ── */ html { scroll-behavior: smooth; } body { font-family: var(--fb); font-size: 18px; background: var(--cream); color: var(--ink); overflow-x: hidden; } body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* ── NAVBAR ── */ .em-navbar { background: var(--amber-nav) !important; backdrop-filter: blur(16px); border-bottom: 1px solid rgba(200,130,26,0.25); min-height: 72px; } .em-wordmark { text-decoration: none; line-height: 1.1; } .em-wordmark .wm-main { display: block; font-family: var(--fd); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); transition: color .2s; } .em-wordmark .wm-sub { display: block; font-family: var(--fs); font-size: 0.44rem; letter-spacing: 0.34em; text-transform: uppercase; /*color: rgba(200,130,26,0.45);*/ color: var(--em-off-white); } .em-wordmark:hover .wm-main { color: var(--gold-pale); } .em-nav-link { font-family: var(--fs); font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,238,216,0.55) !important; transition: color .25s; padding: 0.5rem 0.75rem !important; } .em-nav-link:hover, .em-nav-link.active { color: var(--gold-light) !important; } .btn-em-shop { font-family: var(--fs); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal); background: var(--gold); border: none; border-radius: 0; padding: 0.5rem 1.3rem; text-decoration: none; display: inline-block; transition: background .25s; } .btn-em-shop:hover { background: var(--gold-light); color: var(--charcoal); } /* ── PAGE HEADER ── */ .pg-header { background: var(--parchment); padding-top: 8rem; padding-bottom: 0; position: relative; overflow: hidden; } .pg-header::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(168,88,0,0.07) 0%, transparent 65%), radial-gradient(ellipse 80% 40% at 0% 50%, rgba(168,88,0,0.05) 0%, transparent 55%), radial-gradient(ellipse 80% 40% at 100% 50%, rgba(168,88,0,0.05) 0%, transparent 55%), radial-gradient(ellipse 100% 50% at 50% 100%,rgba(90,110,74,0.07) 0%, transparent 60%); } .pg-header::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, transparent, transparent 52px, rgba(168,88,0,0.028) 52px, rgba(168,88,0,0.028) 53px ); } .pg-header-inner { position: relative; z-index: 2; } .pg-eyebrow { font-family: var(--fs); font-size: 0.56rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--amber); display: flex; align-items: center; gap: 1rem; } .pg-eyebrow::before { content: ''; width: 28px; height: 1px; background: rgba(168,88,0,0.4); flex-shrink: 0; } .pg-title { font-family: var(--fd); font-weight: 300; font-size: clamp(3.5rem, 7vw, 6.5rem); line-height: 0.9; color: var(--ink); } .pg-title em { display: block; font-style: italic; color: var(--gold); } .pg-subtitle { font-family: var(--fi); font-style: italic; font-size: clamp(1rem, 1.8vw, 1.2rem); color: rgba(44,40,32,0.55); line-height: 1.75; max-width: 480px; } .pg-header-rule { height: 4px; margin-top: 4rem; background: linear-gradient(90deg, var(--amber), var(--gold), var(--gold-light), var(--gold), var(--amber)); } /* Reveal animation */ .reveal { animation: revealUp 0.85s ease-out both; } .reveal:nth-child(1) { animation-delay: 0.1s; } .reveal:nth-child(2) { animation-delay: 0.25s; } .reveal:nth-child(3) { animation-delay: 0.4s; } .reveal:nth-child(4) { animation-delay: 0.55s; } from { opacity: 0; transform: translateY(18px); } } /* ── FILTER BAR ── */ .filter-bar { background: var(--parchment-d); border-bottom: 1px solid rgba(168,88,0,0.15); position: sticky; top: 72px; z-index: 100; } .filter-btn { font-family: var(--fs); font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(44,40,32,0.5); background: transparent; border: none; padding: 1rem 1.4rem; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color .25s, border-color .25s; } .filter-btn:hover { color: var(--amber); border-bottom-color: rgba(168,88,0,0.3); } .filter-btn.active { color: var(--amber); border-bottom-color: var(--amber); } .filter-count { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(44,40,32,0.35); } /* ── FEATURED / FLAGSHIP ── */ .flagship { background: var(--parchment); } .flagship-label { font-family: var(--fs); font-size: 0.56rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--amber); display: flex; align-items: center; gap: 1rem; } .flagship-label::before { content: ''; width: 28px; height: 1px; background: rgba(168,88,0,0.4); } /* Flagship card — plain div, two side-by-side children via Bootstrap row */ .flagship-card { background: var(--charcoal); overflow: hidden; } .flagship-visual { background: linear-gradient(145deg, #2A1A08 0%, #5C3010 40%, #8A6020 75%, #6A3808 100%); min-height: 520px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .flagship-visual::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(240,168,48,0.3) 0%, transparent 60%), linear-gradient(to bottom, rgba(26,24,20,0) 50%, rgba(26,24,20,0.5) 100%); } /* SVG bottle inside flagship visual */ .flagship-bottle { position: relative; z-index: 2; } .flagship-badge { position: absolute; top: 2rem; right: 2rem; z-index: 3; width: 80px; height: 80px; background: var(--gold); clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } .flagship-badge-text { font-family: var(--fs); font-size: 0.38rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal); font-weight: bold; line-height: 1.3; } .flagship-body { padding: 3.5rem 4rem; } .flagship-style { font-family: var(--fs); font-size: 0.52rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); } .flagship-name { font-family: var(--fd); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.05; color: var(--off-white); } .flagship-name em { font-style: italic; color: var(--gold-light); } .flagship-desc { font-family: var(--fb); font-size: 1.05rem; font-style: italic; line-height: 1.85; color: rgba(245,238,216,0.58); } .flagship-pull { border-left: 3px solid var(--gold); padding-left: 1.4rem; font-family: var(--fi); font-style: italic; font-size: 1.15rem; line-height: 1.6; color: var(--gold-pale); } /* Tasting profile bar */ .tasting-label { font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(200,130,26,0.55); } .tasting-bar-track { height: 3px; background: rgba(200,130,26,0.15); border-radius: 2px; overflow: hidden; } .tasting-bar-fill { height: 3px; background: var(--gold); border-radius: 2px; transition: width 0.6s ease; } .tasting-val { font-family: var(--fd); font-size: 0.85rem; color: rgba(245,238,216,0.5); } .flagship-price { font-family: var(--fd); font-weight: 300; font-size: 2.8rem; line-height: 1; color: var(--off-white); } .flagship-price-label { font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(200,130,26,0.45); } /* Buttons */ .btn-primary-gold { font-family: var(--fs); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--charcoal); background: var(--gold); border: none; border-radius: 0; padding: 0.9rem 2.4rem; text-decoration: none; display: inline-block; cursor: pointer; transition: background .25s, transform .2s; } .btn-primary-gold:hover { background: var(--gold-light); color: var(--charcoal); transform: translateY(-2px); } .btn-outline-cream { font-family: var(--fs); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,238,216,0.65); background: transparent; border: 1px solid rgba(245,238,216,0.25); border-radius: 0; padding: 0.9rem 2.4rem; text-decoration: none; display: inline-block; transition: border-color .25s, color .25s, transform .2s; } .btn-outline-cream:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); } .btn-outline-amber { font-family: var(--fs); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); background: transparent; border: 1px solid rgba(168,88,0,0.3); border-radius: 0; padding: 0.75rem 2rem; text-decoration: none; display: inline-block; transition: border-color .25s, color .25s, background .25s; } .btn-outline-amber:hover { border-color: var(--gold); color: var(--gold); } /* ── PRODUCT GRID ── */ .products-section { background: var(--cream); } /* Product card — plain div, no anchor wrapper */ .prod-card { background: var(--off-white); border: 1px solid rgba(168,88,0,0.1); height: 100%; position: relative; overflow: hidden; transition: border-color .3s, box-shadow .3s, transform .3s; } .prod-card:hover { border-color: rgba(168,88,0,0.28); box-shadow: 0 10px 40px rgba(44,40,32,0.1); transform: translateY(-5px); } /* Top accent */ .prod-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); opacity: 0; transition: opacity .3s; z-index: 2; } .prod-card:hover::before { opacity: 1; } .prod-card.magenta::before { background: var(--magenta); } .prod-card.sage::before { background: var(--sage-mid); } .prod-card.amber::before { background: var(--amber); } /* Product visual area */ .prod-visual { height: 280px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .prod-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(26,24,20,0.3) 100%); z-index: 1; } /* Gradient backgrounds per product */ .bg-classic { background: linear-gradient(150deg, #2A1808 0%, #5C3010 40%, #9A6020 75%, #6A3808 100%); } .bg-raspberry { background: linear-gradient(150deg, #1A0810 0%, #4A1030 40%, #8A2850 75%, #5A1030 100%); } .bg-wildflower { background: linear-gradient(150deg, #0E1808 0%, #2A4820 40%, #5A7830 75%, #3A5018 100%); } .bg-spiced { background: linear-gradient(150deg, #1A0A08 0%, #3A1808 40%, #7A3010 75%, #4A1808 100%); } .bg-dry { background: linear-gradient(150deg, #100E18 0%, #282038 40%, #484868 75%, #302840 100%); } .bg-cyser { background: linear-gradient(150deg, #101808 0%, #203018 40%, #406030 75%, #304820 100%); } .bg-black { background: linear-gradient(150deg, #100810 0%, #2A1028 40%, #501848 75%, #301028 100%); } .bg-melomel { background: linear-gradient(150deg, #180E08 0%, #3A2010 40%, #704020 75%, #482810 100%); } /* Bottle SVG inside visual */ .prod-bottle { position: relative; z-index: 2; } /* Availability badge */ .prod-badge { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 3; font-family: var(--fs); font-size: 0.46rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.28rem 0.7rem; } .badge-gold { background: var(--gold); color: var(--charcoal); } .badge-magenta { background: var(--magenta); color: var(--off-white); } .badge-sage { background: var(--sage-mid); color: var(--off-white); } .badge-charcoal { background: rgba(26,24,20,0.8); color: rgba(245,238,216,0.5); border: 1px solid rgba(200,130,26,0.2); } /* Product card body */ .prod-body { padding: 1.8rem 2rem 2.2rem; } .prod-style { font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); } .prod-name { font-family: var(--fd); font-weight: 600; font-size: 1.55rem; line-height: 1.15; color: var(--ink); transition: color .25s; } .prod-card:hover .prod-name { color: var(--amber); } .prod-desc { font-family: var(--fb); font-size: 0.92rem; font-style: italic; line-height: 1.75; color: rgba(44,40,32,0.55); } /* Tasting note chips */ .note-chip { display: inline-block; font-family: var(--fs); font-size: 0.44rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.22rem 0.6rem; border: 1px solid rgba(168,88,0,0.22); color: rgba(44,40,32,0.5); transition: border-color .2s, color .2s; } .prod-card:hover .note-chip { border-color: rgba(168,88,0,0.35); color: var(--amber); } /* Sweetness indicator */ .sweetness-row { display: flex; align-items: center; gap: 0.6rem; } .sweetness-label { font-family: var(--fs); font-size: 0.44rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(44,40,32,0.38); white-space: nowrap; } .sweetness-track { flex: 1; height: 2px; background: rgba(168,88,0,0.12); border-radius: 1px; position: relative; } .sweetness-pip { position: absolute; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--gold); border: 2px solid var(--off-white); box-shadow: 0 0 0 1px rgba(168,88,0,0.3); } .sweetness-ends { display: flex; justify-content: space-between; font-family: var(--fs); font-size: 0.38rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(44,40,32,0.28); } /* Price */ .prod-price { font-family: var(--fd); font-weight: 300; font-size: 2rem; line-height: 1; color: var(--ink); } .prod-size { font-family: var(--fs); font-size: 0.46rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(44,40,32,0.38); } .btn-add-cart { font-family: var(--fs); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal); background: var(--gold); border: none; border-radius: 0; padding: 0.75rem 1.6rem; cursor: pointer; transition: background .25s, transform .2s; width: 100%; } .btn-add-cart:hover { background: var(--gold-light); transform: translateY(-1px); } .btn-add-cart.sold-out { background: rgba(44,40,32,0.1); color: rgba(44,40,32,0.35); cursor: default; pointer-events: none; } /* ── CRAFT PROMISE BAND ── */ .craft-band { background: var(--charcoal); position: relative; overflow: hidden; } .craft-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 5% 50%, rgba(168,88,0,0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 95% 50%, rgba(74,110,74,0.07) 0%, transparent 55%); } .craft-item-num { font-family: var(--fd); font-weight: 300; font-size: 3.5rem; line-height: 1; color: rgba(200,130,26,0.15); } .craft-item-title { font-family: var(--fd); font-weight: 600; font-size: 1.1rem; color: var(--off-white); } .craft-item-body { font-family: var(--fb); font-size: 0.88rem; font-style: italic; line-height: 1.75; color: rgba(245,238,216,0.45); } .craft-divider { width: 1px; background: rgba(200,130,26,0.15); } /* ── CTA BAND ── */ .cta-band { background: var(--sage-mid); position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 80% at 15% 50%, rgba(26,24,20,0.22) 0%, transparent 65%), radial-gradient(ellipse 60% 70% at 85% 50%, rgba(26,24,20,0.15) 0%, transparent 60%); } .cta-heading { font-family: var(--fd); font-weight: 300; font-size: clamp(2rem, 3.5vw, 3rem); color: var(--off-white); line-height: 1.15; } .cta-heading em { font-style: italic; color: var(--gold-pale); } .cta-body { font-family: var(--fb); font-style: italic; font-size: 1.05rem; line-height: 1.8; color: rgba(253,250,242,0.65); } .btn-cta-light { font-family: var(--fs); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--charcoal); background: var(--off-white); border: none; border-radius: 0; padding: 0.9rem 2.2rem; text-decoration: none; display: inline-block; transition: background .25s, transform .2s; } .btn-cta-light:hover { background: var(--parchment); color: var(--charcoal); transform: translateY(-2px); } /* ── FOOTER ── */ .em-footer { background: #0F0D0A; border-top: 1px solid rgba(200,130,26,0.12); } .em-fb-name { font-family: var(--fd); font-weight: 600; font-size: 1.45rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } .em-fb-sub { font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(200,130,26,0.35); } .em-footer-link { font-family: var(--fs); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,238,216,0.35); text-decoration: none; transition: color .2s; } .em-footer-link:hover { color: var(--gold); } .em-soc { width: 34px; height: 34px; border: 1px solid rgba(200,130,26,0.18); display: inline-flex; align-items: center; justify-content: center; color: rgba(200,130,26,0.4); text-decoration: none; font-family: var(--fs); font-size: 0.68rem; transition: border-color .2s, color .2s; } .em-soc:hover { border-color: var(--gold); color: var(--gold); } .em-footer-copy { font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,238,216,0.18); } /* ── UTILITY ── */ .gold-rule { height: 4px; background: linear-gradient(90deg, var(--amber), var(--gold), var(--gold-light), var(--gold), var(--amber)); } .section-head { font-family: var(--fd); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.8rem); color: var(--ink); line-height: 1.1; } .section-head em { font-style: italic; color: var(--gold); } .section-head-light { color: var(--off-white); } .section-head-light em { color: var(--gold-light); } .eyebrow { font-family: var(--fs); font-size: 0.54rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 1rem; } .eyebrow::before, .eyebrow::after { content: ''; width: 28px; height: 1px; background: rgba(200,130,26,0.4); } .eyebrow.no-line::before, .eyebrow.no-line::after { display: none; } .eyebrow-light { color: var(--gold-pale) !important; } .eyebrow-light::before, .eyebrow-light::after { background: rgba(242,201,106,0.4) !important; } /* ════════════════════════════════════════════════════════════════ PRODUCT DETAIL — Individual bottle page (product.html) ════════════════════════════════════════════════════════════════ */ @keyframes bottleReveal { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes haloPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.7; } 50% { transform: translate(-50%,-50%) scale(1.08); opacity: 1; } } /* ── BRAND TOKENS ── */ :root { --gold: #C8821A; --gold-light: #E8A83A; --gold-pale: #F2C96A; --amber: #A85800; --amber-nav: rgba(72,36,0,0.97); --magenta: #C4255E; --magenta-d: #A81E50; --magenta-bg: #1A0810; --sage-mid: #5A7E5A; --charcoal: #1A1814; --ink: #2C2820; --parchment: #F5EED8; --parchment-d: #EDE0C0; --cream: #FAF6EC; --off-white: #FDFAF2; --fd: 'Cormorant Garamond', Georgia, serif; --fi: 'IM Fell English', Georgia, serif; --fb: 'Cormorant Infant', Georgia, serif; --fs: 'Tenor Sans', sans-serif; } .em-nav-link:hover { color: var(--gold-light) !important; } /* ── BREADCRUMB ── */ .breadcrumb-bar { background: var(--parchment); border-bottom: 1px solid rgba(168,88,0,0.12); padding: 0.8rem 0; margin-top: 72px; } .bc-link { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(44,40,32,0.45); text-decoration: none; transition: color .2s; } .bc-link:hover { color: var(--amber); } .bc-sep { font-family: var(--fs); font-size: 0.5rem; color: rgba(44,40,32,0.25); margin: 0 0.5rem; } .bc-current { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); } /* ── PRODUCT HERO — split layout ── */ /* Left panel: bottle visual, full height */ .pdp-visual-panel { background: linear-gradient(160deg, #1A0810 0%, #3A0E28 30%, #5A1840 55%, #4A1030 80%, #2A0818 100%); min-height: 100vh; position: sticky; top: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pdp-visual-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(196,37,94,0.28) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 20% 70%, rgba(168,88,0,0.12) 0%, transparent 50%), radial-gradient(ellipse 60% 50% at 80% 20%, rgba(196,37,94,0.15) 0%, transparent 50%); } /* Laid-paper lines */ .pdp-visual-panel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, transparent, transparent 48px, rgba(196,37,94,0.02) 48px, rgba(196,37,94,0.02) 49px ); } .pdp-bottle-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 3rem 2rem; animation: bottleReveal 1.2s cubic-bezier(0.22,1,0.36,1) 0.1s both; } from { opacity: 0; transform: translateY(30px) scale(0.96); } } /* Halo behind bottle */ .pdp-bottle-halo { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(196,37,94,0.22) 0%, rgba(168,88,0,0.12) 40%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: haloPulse 4s ease-in-out infinite; pointer-events: none; } 0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 0.7; } 50% { transform: translate(-50%,-50%) scale(1.08); opacity: 1; } } /* Reserve badge — star shape */ .pdp-badge { width: 72px; height: 72px; margin-bottom: 2rem; background: var(--magenta); clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } .pdp-badge-text { font-family: var(--fs); font-size: 0.36rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--off-white); font-weight: bold; line-height: 1.3; } /* Vintage label below bottle */ .pdp-vintage-label { margin-top: 2rem; text-align: center; } .pdp-vintage-name { font-family: var(--fd); font-weight: 300; font-size: 1.2rem; color: rgba(245,238,216,0.5); letter-spacing: 0.08em; } .pdp-vintage-year { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(196,37,94,0.55); } /* Right panel: purchase info, scrollable */ .pdp-info-panel { background: var(--cream); padding: 4rem 4.5rem 4rem 4rem; } /* Product style tag */ .pdp-style-tag { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--magenta); border: 1px solid rgba(196,37,94,0.3); padding: 0.3rem 0.8rem; } .pdp-style-tag::before { content: ''; width: 6px; height: 6px; background: var(--magenta); border-radius: 50%; } /* Product name */ .pdp-name { font-family: var(--fd); font-weight: 300; font-size: clamp(2.8rem, 5vw, 4.5rem); line-height: 0.95; color: var(--ink); } .pdp-name em { display: block; font-style: italic; color: var(--magenta); } /* Short tagline */ .pdp-tagline { font-family: var(--fi); font-style: italic; font-size: 1.15rem; line-height: 1.7; color: rgba(44,40,32,0.6); border-left: 3px solid var(--magenta); padding-left: 1.2rem; } /* Specs row */ .pdp-spec { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.2rem 1rem; border-right: 1px solid rgba(168,88,0,0.12); } .pdp-spec:last-child { border-right: none; } .pdp-spec-val { font-family: var(--fd); font-weight: 300; font-size: 1.6rem; line-height: 1; color: var(--ink); margin-bottom: 0.3rem; } .pdp-spec-label { font-family: var(--fs); font-size: 0.44rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(44,40,32,0.38); } /* Tasting note chips */ .note-chip { display: inline-block; font-family: var(--fs); font-size: 0.46rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.3rem 0.75rem; border: 1px solid rgba(196,37,94,0.25); color: rgba(44,40,32,0.55); transition: border-color .2s, color .2s, background .2s; } .note-chip:hover { border-color: var(--magenta); color: var(--magenta); } /* Sweetness / profile bars */ .profile-label { font-family: var(--fs); font-size: 0.46rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(44,40,32,0.45); white-space: nowrap; } .profile-track { flex: 1; height: 2px; background: rgba(168,88,0,0.12); border-radius: 1px; position: relative; } .profile-pip { position: absolute; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--magenta); border: 2px solid var(--cream); box-shadow: 0 0 0 1px rgba(196,37,94,0.3); } .profile-val { font-family: var(--fd); font-size: 0.85rem; color: rgba(44,40,32,0.5); white-space: nowrap; } /* Quantity selector */ .qty-btn { width: 40px; height: 40px; border: 1px solid rgba(168,88,0,0.25); background: transparent; color: var(--ink); font-family: var(--fd); font-size: 1.2rem; cursor: pointer; transition: border-color .2s, background .2s; display: flex; align-items: center; justify-content: center; } .qty-btn:hover { border-color: var(--gold); background: rgba(200,130,26,0.05); } .qty-display { width: 52px; height: 40px; border-top: 1px solid rgba(168,88,0,0.25); border-bottom: 1px solid rgba(168,88,0,0.25); display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-size: 1.1rem; color: var(--ink); } /* Price */ .pdp-price { font-family: var(--fd); font-weight: 300; font-size: 3rem; line-height: 1; color: var(--ink); } .pdp-price-sub { font-family: var(--fs); font-size: 0.46rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(44,40,32,0.38); } /* CTA buttons */ .btn-add-cart { font-family: var(--fs); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--off-white); background: var(--magenta); border: none; border-radius: 0; padding: 1rem 2.5rem; cursor: pointer; transition: background .25s, transform .2s; display: inline-block; } .btn-add-cart:hover { background: var(--magenta-d); transform: translateY(-2px); } .btn-wishlist { font-family: var(--fs); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(44,40,32,0.5); background: transparent; border: 1px solid rgba(44,40,32,0.2); border-radius: 0; padding: 1rem 1.8rem; cursor: pointer; transition: border-color .25s, color .25s; display: inline-block; } .btn-wishlist:hover { border-color: var(--gold); color: var(--amber); } /* Divider */ .pdp-rule { height: 1px; background: rgba(168,88,0,0.12); margin: 2rem 0; } /* Trust badges */ .trust-badge { display: flex; align-items: center; gap: 0.6rem; font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(44,40,32,0.45); } .trust-badge-icon { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(168,88,0,0.2); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--gold); flex-shrink: 0; } /* ── PRODUCT STORY ── */ .pdp-story { background: var(--parchment); } .story-heading { font-family: var(--fd); font-weight: 300; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; color: var(--ink); } .story-heading em { font-style: italic; color: var(--magenta); } .story-body { font-family: var(--fb); font-size: 1.05rem; line-height: 1.95; color: #3A3028; } .story-body::first-letter { font-family: var(--fd); font-weight: 600; font-size: 4.5rem; float: left; line-height: 0.72; margin-right: 0.1em; margin-top: 0.08em; color: var(--magenta); } .story-pull { border-left: 3px solid var(--magenta); padding-left: 1.5rem; font-family: var(--fi); font-style: italic; font-size: 1.25rem; line-height: 1.6; color: var(--magenta-d); } /* Story visual */ .story-visual { height: 100%; min-height: 400px; background: linear-gradient(145deg, #2A0818 0%, #5A1840 40%, #8A2860 70%, #5A1830 100%); position: relative; overflow: hidden; } .story-visual::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 60% 35%, rgba(196,37,94,0.3) 0%, transparent 60%), linear-gradient(to bottom, rgba(26,24,20,0) 40%, rgba(26,24,20,0.6) 100%); } .story-visual-caption { position: absolute; bottom: 1.5rem; left: 2rem; right: 2rem; font-family: var(--fs); font-size: 0.46rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,238,216,0.38); z-index: 2; } /* ── TASTING NOTES DEEP DIVE ── */ .pdp-tasting { background: var(--charcoal); position: relative; overflow: hidden; } .pdp-tasting::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 10% 50%, rgba(196,37,94,0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 90% 50%, rgba(168,88,0,0.08) 0%, transparent 55%); } .tasting-heading { font-family: var(--fd); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.8rem); color: var(--off-white); line-height: 1.1; } .tasting-heading em { font-style: italic; color: var(--gold-light); } /* Aroma / palate / finish accordion-style cards */ .tasting-card { background: rgba(245,238,216,0.04); border: 1px solid rgba(196,37,94,0.15); padding: 2rem 2.2rem; transition: background .3s, border-color .3s; } .tasting-card:hover { background: rgba(245,238,216,0.07); border-color: rgba(196,37,94,0.3); } .tasting-card-num { font-family: var(--fd); font-weight: 300; font-size: 3rem; line-height: 1; color: rgba(196,37,94,0.18); } .tasting-card-label { font-family: var(--fs); font-size: 0.52rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--magenta); } .tasting-card-title { font-family: var(--fd); font-weight: 600; font-size: 1.35rem; color: var(--off-white); } .tasting-card-body { font-family: var(--fb); font-size: 0.92rem; font-style: italic; line-height: 1.8; color: rgba(245,238,216,0.48); } .tasting-chip { display: inline-block; font-family: var(--fs); font-size: 0.44rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.24rem 0.6rem; border: 1px solid rgba(196,37,94,0.25); color: rgba(196,37,94,0.65); } /* Profile matrix */ .profile-matrix-row { display: flex; align-items: center; gap: 1.2rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(200,130,26,0.08); } .profile-matrix-row:last-child { border-bottom: none; } .profile-matrix-label { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200,130,26,0.5); width: 80px; flex-shrink: 0; } .profile-matrix-track { flex: 1; height: 3px; background: rgba(200,130,26,0.12); border-radius: 2px; } .profile-matrix-fill { height: 3px; background: var(--magenta); border-radius: 2px; } .profile-matrix-val { font-family: var(--fd); font-size: 0.85rem; color: rgba(245,238,216,0.45); width: 70px; text-align: right; flex-shrink: 0; } /* ── FOOD PAIRINGS ── */ .pdp-pairings { background: var(--cream); } .pairing-card { background: var(--off-white); border: 1px solid rgba(168,88,0,0.1); padding: 2rem 1.8rem; height: 100%; transition: border-color .3s, transform .3s, box-shadow .3s; } .pairing-card:hover { border-color: rgba(196,37,94,0.25); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(44,40,32,0.08); } .pairing-icon { font-size: 2rem; line-height: 1; margin-bottom: 1rem; display: block; } .pairing-category { font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--magenta); } .pairing-name { font-family: var(--fd); font-weight: 600; font-size: 1.25rem; color: var(--ink); } .pairing-why { font-family: var(--fb); font-size: 0.9rem; font-style: italic; line-height: 1.75; color: rgba(44,40,32,0.55); } /* ── RELATED PRODUCTS ── */ .pdp-related { background: var(--parchment-d); } .related-card { background: var(--off-white); border: 1px solid rgba(168,88,0,0.1); overflow: hidden; transition: border-color .3s, transform .3s, box-shadow .3s; height: 100%; } .related-card:hover { border-color: rgba(168,88,0,0.25); transform: translateY(-4px); box-shadow: 0 10px 32px rgba(44,40,32,0.1); } .related-visual { height: 200px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .related-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(26,24,20,0.25) 100%); z-index: 1; } .rel-badge { position: absolute; top: 1rem; right: 1rem; z-index: 2; font-family: var(--fs); font-size: 0.44rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.22rem 0.6rem; } .related-body { padding: 1.6rem 1.8rem 2rem; } .related-style { font-family: var(--fs); font-size: 0.46rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } .related-name { font-family: var(--fd); font-weight: 600; font-size: 1.4rem; color: var(--ink); line-height: 1.2; transition: color .25s; } .related-card:hover .related-name { color: var(--amber); } .related-desc { font-family: var(--fb); font-size: 0.88rem; font-style: italic; line-height: 1.7; color: rgba(44,40,32,0.52); } .related-price { font-family: var(--fd); font-weight: 300; font-size: 1.6rem; color: var(--ink); } .btn-related { font-family: var(--fs); font-size: 0.54rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); text-decoration: none; border-bottom: 1px solid rgba(168,88,0,0.25); padding-bottom: 0.1rem; transition: color .2s, border-color .2s; display: inline-flex; align-items: center; gap: 0.4rem; } .btn-related::after { content: '→'; } .btn-related:hover { color: var(--gold); border-color: var(--gold); } /* ── SHARED UTILITIES ── */ .gold-rule { height: 4px; background: linear-gradient(90deg, var(--amber), var(--gold), var(--gold-light), var(--gold), var(--amber)); } .eyebrow-magenta { color: var(--magenta) !important; } .eyebrow-magenta::before, .eyebrow-magenta::after { background: rgba(196,37,94,0.35) !important; } /* Gradient image backgrounds */ .bg-classic { background: linear-gradient(150deg, #2A1808 0%, #5C3010 45%, #9A6020 80%); } .bg-wildflower { background: linear-gradient(150deg, #0E1808 0%, #2A4820 45%, #5A7830 80%); } .bg-dry { background: linear-gradient(150deg, #100E18 0%, #282038 45%, #484868 80%); } /* Qty counter JS */ .qty-count { font-family: var(--fd); font-size: 1.2rem; min-width: 2rem; text-align: center; color: var(--ink); } .pdp-visual-panel { min-height: 65vw; position: relative; top: auto; } .pdp-info-panel { padding: 2.5rem 1.5rem; } /* ════════════════════════════════════════════════════════════════ JOURNAL — Blog index listing page (journal.html) ════════════════════════════════════════════════════════════════ */ @keyframes jnUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ─── TOKENS ─── */ :root { --em-gold: #C8821A; --em-gold-light: #E8A83A; --em-gold-pale: #F2C96A; --em-amber: #A85800; --em-amber-nav: rgba(72,36,0,0.97); --em-magenta: #C4255E; --em-sage: #4A6E4A; --em-sage-mid: #5A7E5A; --em-charcoal: #1A1814; --em-ink: #2C2820; --em-parchment: #F5EED8; --em-parchment-d: #EDE0C0; --em-cream: #FAF6EC; --em-off-white: #FDFAF2; --fd: 'Cormorant Garamond', Georgia, serif; --fi: 'IM Fell English', Georgia, serif; --fb: 'Cormorant Infant', Georgia, serif; --fs: 'Tenor Sans', sans-serif; } /* ─── BASE ─── */ html { scroll-behavior: smooth; } body { font-family: var(--fb); font-size: 17px; background: var(--em-cream); color: var(--em-ink); overflow-x: hidden; } /* Grain */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* ─── NAVBAR ─── */ .em-navbar { background: var(--em-amber-nav) !important; backdrop-filter: blur(16px); border-bottom: 1px solid rgba(200,130,26,0.25); min-height: 72px; } .em-wordmark .wm-main { display: block; font-family: var(--fd); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--em-gold-light); } .em-nav-link:hover, .em-nav-link.active { color: var(--em-gold-light) !important; } .btn-em-shop { font-family: var(--fs); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--em-charcoal); background: var(--em-gold); border: none; border-radius: 0; padding: 0.5rem 1.3rem; text-decoration: none; display: inline-block; transition: background .25s; } /* ─── PAGE HEADER ─── */ .jn-header { background: var(--em-sage-mid); padding-top: 7rem; position: relative; overflow: hidden; } .jn-header::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 10% 50%, rgba(26,24,20,0.3) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 90% 40%, rgba(26,24,20,0.18) 0%, transparent 55%), radial-gradient(ellipse 40% 50% at 50% 100%, rgba(168,88,0,0.1) 0%, transparent 55%); } .jn-header::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, transparent, transparent 52px, rgba(245,238,216,0.022) 52px, rgba(245,238,216,0.022) 53px ); } .jn-header-inner { position: relative; z-index: 2; } /* Staggered animation */ .jn-reveal { animation: jnUp 0.85s ease-out both; } .jn-reveal:nth-child(1) { animation-delay: 0.1s; } .jn-reveal:nth-child(2) { animation-delay: 0.25s; } .jn-reveal:nth-child(3) { animation-delay: 0.4s; } .jn-reveal:nth-child(4) { animation-delay: 0.55s; } } .jn-vol { font-family: var(--fs); font-size: 0.54rem; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(242,201,106,0.55); } .jn-header-title { font-family: var(--fd); font-weight: 300; font-size: clamp(4rem, 8vw, 7.5rem); line-height: 0.88; color: var(--em-off-white); } .jn-header-title em { display: block; font-style: italic; color: var(--em-gold-pale); } .jn-header-desc { font-family: var(--fi); font-style: italic; font-size: clamp(1rem, 1.8vw, 1.15rem); color: rgba(253,250,242,0.62); line-height: 1.75; max-width: 440px; } /* Filter pills in header */ .jn-pill { display: inline-block; font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.35rem 0.9rem; border: 1px solid rgba(245,238,216,0.2); color: rgba(245,238,216,0.5); cursor: pointer; transition: border-color .2s, color .2s; text-decoration: none; background: none; } .jn-pill:hover, .jn-pill.active { border-color: var(--em-gold-pale); color: var(--em-gold-pale); } .jn-header-rule { height: 4px; margin-top: 3.5rem; background: linear-gradient(90deg, var(--em-sage), var(--em-gold), var(--em-gold-light), var(--em-gold), var(--em-sage)); } /* ─── TAGS ─── */ .jn-tag { display: inline-block; font-family: var(--fs); font-size: 0.46rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.25rem 0.65rem; border: 1px solid rgba(168,88,0,0.28); color: var(--em-gold); } .jn-tag-sage { border-color: rgba(90,126,90,0.35); color: var(--em-sage-mid); } .jn-tag-magenta { border-color: rgba(196,37,94,0.35); color: var(--em-magenta); } .jn-tag-amber { border-color: rgba(168,88,0,0.35); color: var(--em-amber); } /* ─── SECTION DIVIDER ─── */ .jn-section-head { display: flex; align-items: center; gap: 1.5rem; } .jn-section-label { font-family: var(--fd); font-weight: 300; font-size: 1.4rem; color: var(--em-ink); white-space: nowrap; } .jn-section-label em { font-style: italic; color: var(--em-gold); } .jn-section-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(168,88,0,0.25), transparent); } /* ─── READ LINK ─── */ .jn-read-link { font-family: var(--fs); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--em-gold-light); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid rgba(200,130,26,0.3); padding-bottom: 0.12rem; transition: gap .2s, color .2s; } .jn-read-link::after { content: '→'; } .jn-read-link:hover { gap: 0.8rem; color: var(--em-gold-pale); } /* Dark-background variant */ .jn-read-link-dark { color: var(--em-amber); border-bottom-color: rgba(168,88,0,0.25); } .jn-read-link-dark:hover { color: var(--em-gold); } .jn-read-time { font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(200,130,26,0.45); } /* ─── FEATURED POST ─── */ .jn-featured { background: var(--em-parchment); } /* div flex container — no anchor-tag width quirks */ .jn-feat-card { display: flex; flex-direction: row; background: var(--em-charcoal); overflow: hidden; transition: box-shadow .35s; } .jn-feat-card:hover { box-shadow: 0 20px 60px rgba(26,24,20,0.4); } /* Left half — illustrated image */ .jn-feat-img { flex: 0 0 50%; background: linear-gradient(160deg, #1A3010 0%, #2A5020 30%, #3A6830 55%, #5A4010 80%, #3A2008 100%); position: relative; overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; } .jn-feat-img-overlay { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 65% 35%, rgba(240,168,48,0.32) 0%, transparent 55%), linear-gradient(to bottom, rgba(26,24,20,0) 45%, rgba(26,24,20,0.88) 100%); } .jn-feat-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.18; display: block; } .jn-feat-img-text { position: relative; z-index: 2; padding: 2rem 2.5rem; width: 100%; } .jn-feat-issue { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(242,201,106,0.6); } .jn-feat-img-title { font-family: var(--fd); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.15; color: var(--em-off-white); } .jn-feat-img-title em { font-style: italic; color: var(--em-gold-light); } /* Right half — text, padding here and nowhere else */ .jn-feat-body { flex: 0 0 50%; padding: 3.5rem 4rem; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; } .jn-feat-meta { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(200,130,26,0.6); } .jn-feat-title { font-family: var(--fd); font-weight: 300; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.15; color: var(--em-off-white); } .jn-feat-title em { font-style: italic; color: var(--em-gold-light); } .jn-feat-lede { font-family: var(--fb); font-size: 1rem; font-style: italic; line-height: 1.85; color: rgba(245,238,216,0.55); } .jn-feat-pull { border-left: 3px solid var(--em-gold); padding-left: 1.3rem; font-family: var(--fi); font-style: italic; font-size: 1.1rem; line-height: 1.65; color: var(--em-gold-pale); } .jn-feat-card { flex-direction: column; } .jn-feat-img { flex: none; width: 100%; min-height: 260px; } .jn-feat-body { flex: none; width: 100%; padding: 2rem; box-sizing: border-box; } } /* ─── STANDARD POST CARD ─── */ .jn-card { background: var(--em-off-white); border: 1px solid rgba(168,88,0,0.1); display: flex; flex-direction: column; text-decoration: none; height: 100%; position: relative; overflow: hidden; transition: border-color .3s, box-shadow .3s, transform .3s; } .jn-card:hover { border-color: rgba(168,88,0,0.3); box-shadow: 0 8px 32px rgba(44,40,32,0.1); transform: translateY(-4px); } /* Top accent revealed on hover */ .jn-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--em-gold); opacity: 0; transition: opacity .3s; z-index: 2; } .jn-card:hover::before { opacity: 1; } .jn-card.sage::before { background: var(--em-sage-mid); } .jn-card.magenta::before { background: var(--em-magenta); } .jn-card.amber::before { background: var(--em-amber); } /* Card image area — fixed height, position relative, overflow hidden */ .jn-card-img { height: 190px; flex-shrink: 0; position: relative; overflow: hidden; } /* Gradient backgrounds for each topic */ .bg-honey { background: linear-gradient(145deg, #2A1A08 0%, #5C3010 50%, #8A6020 100%); } .bg-meadow { background: linear-gradient(145deg, #0E1A0E 0%, #2A4A20 50%, #5A7A30 100%); } .bg-barrel { background: linear-gradient(145deg, #1A1008 0%, #3A2410 50%, #6A4820 100%); } .bg-bee { background: linear-gradient(145deg, #1A1408 0%, #3A3010 50%, #7A6028 100%); } .bg-bottle { background: linear-gradient(145deg, #0A0E14 0%, #1A2838 50%, #2A4860 100%); } .bg-raspberry { background: linear-gradient(145deg, #1A0810 0%, #4A1030 50%, #8A2850 100%); } .bg-harvest { background: linear-gradient(145deg, #1A1A08 0%, #3A3808 50%, #6A6820 100%); } .bg-winter { background: linear-gradient(145deg, #081418 0%, #102838 50%, #205A6A 100%); } /* Scrim over image */ .jn-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, rgba(26,24,20,0.35) 100%); z-index: 1; } /* Emoji icon — sits above the scrim */ .jn-card-icon { position: absolute; bottom: 0.9rem; right: 1.2rem; z-index: 2; font-size: 2rem; opacity: 0.4; line-height: 1; } /* Card body */ .jn-card-body { padding: 1.6rem 1.8rem 1.8rem; display: flex; flex-direction: column; flex: 1; } .jn-card-date { font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(44,40,32,0.38); } .jn-card-title { font-family: var(--fd); font-weight: 600; font-size: 1.35rem; line-height: 1.2; color: var(--em-ink); transition: color .25s; } .jn-card:hover .jn-card-title { color: var(--em-amber); } .jn-card-excerpt { font-family: var(--fb); font-size: 0.9rem; font-style: italic; line-height: 1.75; color: rgba(44,40,32,0.55); flex: 1; } /* ─── WIDE CARD ─── */ .jn-wide { background: var(--em-off-white); border: 1px solid rgba(168,88,0,0.1); display: block; text-decoration: none; position: relative; overflow: hidden; transition: border-color .3s, box-shadow .3s, transform .3s; } .jn-wide:hover { border-color: rgba(168,88,0,0.3); box-shadow: 0 8px 32px rgba(44,40,32,0.1); transform: translateY(-3px); } .jn-wide::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--em-gold); opacity: 0; transition: opacity .3s; z-index: 2; } .jn-wide:hover::before { opacity: 1; } /* Wide card image — explicit height so it doesn't collapse */ .jn-wide-img { min-height: 220px; height: 100%; position: relative; overflow: hidden; } .jn-wide-img-icon { position: absolute; bottom: 1rem; right: 1.2rem; font-size: 2rem; opacity: 0.38; z-index: 2; } .jn-wide-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(26,24,20,0.3) 100%); z-index: 1; } .jn-wide-body { padding: 2rem 2.2rem; } .jn-wide-title { font-family: var(--fd); font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: var(--em-ink); transition: color .25s; } .jn-wide:hover .jn-wide-title { color: var(--em-amber); } .jn-wide-excerpt { font-family: var(--fb); font-size: 0.94rem; font-style: italic; line-height: 1.8; color: rgba(44,40,32,0.55); } /* ─── PULL QUOTE BAND ─── */ .jn-quote-band { background: var(--em-charcoal); position: relative; overflow: hidden; } .jn-quote-band::before { content: '\201C'; position: absolute; top: -3rem; left: 2.5rem; font-family: var(--fd); font-size: 22rem; font-weight: 700; line-height: 1; color: rgba(200,130,26,0.05); pointer-events: none; } .jn-quote { font-family: var(--fd); font-weight: 300; font-style: italic; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.4; color: var(--em-off-white); position: relative; z-index: 1; } .jn-quote em { color: var(--em-gold-light); font-style: normal; } .jn-quote-attr { font-family: var(--fs); font-size: 0.54rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(200,130,26,0.5); position: relative; z-index: 1; display: flex; align-items: center; gap: 0.8rem; } .jn-quote-attr::before { content: ''; width: 22px; height: 1px; background: var(--em-gold); } /* ─── SIDEBAR ─── */ .jn-sidebar-box { background: var(--em-parchment); border: 1px solid rgba(168,88,0,0.14); padding: 1.8rem; } .jn-sidebar-title { font-family: var(--fd); font-weight: 600; font-size: 1.05rem; color: var(--em-ink); border-bottom: 1px solid rgba(168,88,0,0.18); padding-bottom: 0.7rem; margin-bottom: 1.1rem; } .jn-topic-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid rgba(168,88,0,0.08); text-decoration: none; cursor: pointer; } .jn-topic-row:last-child { border-bottom: none; } .jn-topic-name { font-family: var(--fs); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(44,40,32,0.6); transition: color .2s; } .jn-topic-row:hover .jn-topic-name { color: var(--em-amber); } .jn-topic-count { font-family: var(--fd); font-size: 0.9rem; color: rgba(168,88,0,0.35); } /* Recent posts in sidebar */ .jn-recent-row { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.8rem 0; border-bottom: 1px solid rgba(168,88,0,0.08); text-decoration: none; } .jn-recent-row:last-child { border-bottom: none; } .jn-recent-thumb { width: 50px; height: 50px; flex-shrink: 0; } .jn-recent-title { font-family: var(--fd); font-weight: 600; font-size: 0.95rem; line-height: 1.25; color: var(--em-ink); transition: color .2s; } .jn-recent-row:hover .jn-recent-title { color: var(--em-amber); } .jn-recent-date { font-family: var(--fs); font-size: 0.44rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(44,40,32,0.36); } /* Sidebar newsletter box */ .jn-nl-box { background: var(--em-charcoal); padding: 1.8rem; } .jn-nl-title { font-family: var(--fd); font-weight: 300; font-style: italic; font-size: 1.35rem; color: var(--em-off-white); line-height: 1.3; } .jn-nl-title em { font-style: normal; color: var(--em-gold-light); } .jn-nl-body { font-family: var(--fb); font-size: 0.88rem; font-style: italic; line-height: 1.75; color: rgba(245,238,216,0.48); } .jn-nl-input { background: rgba(245,238,216,0.06); border: 1px solid rgba(200,130,26,0.22); border-radius: 0; color: var(--em-off-white); font-family: var(--fb); font-size: 0.95rem; font-style: italic; padding: 0.7rem 1rem; width: 100%; transition: border-color .25s, background .25s; } .jn-nl-input::placeholder { color: rgba(245,238,216,0.22); } .jn-nl-input:focus { outline: none; border-color: var(--em-gold); background: rgba(245,238,216,0.1); } .btn-jn-nl { width: 100%; font-family: var(--fs); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--em-charcoal); background: var(--em-gold); border: none; border-radius: 0; padding: 0.78rem; cursor: pointer; transition: background .25s; } .btn-jn-nl:hover { background: var(--em-gold-light); } /* Sidebar events teaser */ .jn-events-box { background: var(--em-charcoal); padding: 1.8rem; border: 1px solid rgba(200,130,26,0.14); } .jn-events-box-eyebrow { font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--em-gold); } .jn-events-box-title { font-family: var(--fd); font-weight: 300; font-size: 1.2rem; color: var(--em-off-white); line-height: 1.3; } .jn-events-box-meta { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(200,130,26,0.55); } /* ─── PAGINATION ─── */ .jn-pager { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .jn-page { font-family: var(--fs); font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(44,40,32,0.5); background: transparent; border: 1px solid rgba(168,88,0,0.18); border-radius: 0; padding: 0.55rem 0.95rem; cursor: pointer; text-decoration: none; display: inline-block; transition: border-color .2s, color .2s, background .2s; } .jn-page:hover { border-color: var(--em-gold); color: var(--em-amber); } .jn-page.active { background: var(--em-amber); border-color: var(--em-amber); color: var(--em-off-white); } .jn-page.off { opacity: 0.3; cursor: default; pointer-events: none; } .jn-page-dots { font-family: var(--fs); font-size: 0.52rem; color: rgba(44,40,32,0.3); padding: 0 0.2rem; } /* ─── FOOTER ─── */ .em-footer { background: #0F0D0A; border-top: 1px solid rgba(200,130,26,0.12); } .em-footer-rule { border-top: 1px solid rgba(200,130,26,0.08); } .em-fb-name { font-family: var(--fd); font-weight: 600; font-size: 1.45rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--em-gold); } /* ════════════════════════════════════════════════════════════════ BLOG POST — Individual article page (blog-post.html) ════════════════════════════════════════════════════════════════ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ── TOKENS ── */ :root { --gold: #C8821A; --gold-light: #E8A83A; --gold-pale: #F2C96A; --amber: #A85800; --amber-nav: rgba(72,36,0,0.97); --magenta: #C4255E; --sage-mid: #5A7E5A; --charcoal: #1A1814; --ink: #2C2820; --parchment: #F5EED8; --parchment-d: #EDE0C0; --cream: #FAF6EC; --off-white: #FDFAF2; --fd: 'Cormorant Garamond', Georgia, serif; --fi: 'IM Fell English', Georgia, serif; --fb: 'Cormorant Infant', Georgia, serif; --fs: 'Tenor Sans', sans-serif; } /* ── ARTICLE HERO ── */ .art-hero { background: var(--charcoal); padding-top: 9rem; padding-bottom: 0; position: relative; overflow: hidden; } .art-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(168,88,0,0.3) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 10% 70%, rgba(74,110,74,0.1) 0%, transparent 55%); } .art-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, transparent, transparent 52px, rgba(200,130,26,0.022) 52px, rgba(200,130,26,0.022) 53px ); } .art-hero-inner { position: relative; z-index: 2; } /* Breadcrumb */ .art-breadcrumb { display: flex; align-items: center; gap: 0.6rem; font-family: var(--fs); font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; } .art-breadcrumb a { color: rgba(200,130,26,0.6); text-decoration: none; transition: color .2s; } .art-breadcrumb a:hover { color: var(--gold-light); } .art-breadcrumb span { color: rgba(245,238,216,0.28); } .art-breadcrumb .current { color: rgba(245,238,216,0.5); } /* Tags */ .art-tag { display: inline-block; font-family: var(--fs); font-size: 0.46rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.28rem 0.7rem; border: 1px solid rgba(200,130,26,0.3); color: var(--gold); } .art-tag-sage { border-color: rgba(90,126,90,0.4); color: var(--sage-mid); } .art-tag-amber { border-color: rgba(168,88,0,0.4); color: var(--amber); } .art-tag-magenta { border-color: rgba(196,37,94,0.4); color: var(--magenta); } /* Article headline */ .art-headline { font-family: var(--fd); font-weight: 300; font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 1.02; color: var(--off-white); } .art-headline em { font-style: italic; color: var(--gold-light); display: block; } .art-lede { font-family: var(--fi); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.7; color: rgba(245,238,216,0.62); max-width: 640px; } /* Author / meta bar */ .art-meta-bar { border-top: 1px solid rgba(200,130,26,0.18); padding-top: 1.5rem; } .art-author-name { font-family: var(--fd); font-weight: 600; font-size: 1rem; color: var(--off-white); } .art-author-role { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200,130,26,0.5); } .art-meta-detail { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,238,216,0.35); display: flex; flex-direction: column; gap: 0.2rem; } .art-meta-detail strong { color: rgba(200,130,26,0.55); font-weight: normal; } /* Hero illustration strip */ .art-hero-img { background: linear-gradient(160deg, #1A3010 0%, #2A5020 30%, #3A6830 55%, #5A4010 80%, #3A2008 100%); height: 380px; position: relative; overflow: hidden; margin-top: 3rem; } .art-hero-img::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 65% 40%, rgba(240,168,48,0.35) 0%, transparent 60%), linear-gradient(to bottom, rgba(26,24,20,0) 50%, rgba(26,24,20,0.6) 100%); } .art-hero-img svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.22; } .art-hero-img-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 2rem; font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,238,216,0.35); z-index: 2; } /* ── ARTICLE BODY ── */ .art-body-section { background: var(--cream); } /* Running header — sticky label that tracks position */ .art-running-head { position: sticky; top: 72px; z-index: 10; background: var(--parchment); border-bottom: 1px solid rgba(168,88,0,0.15); padding: 0.65rem 0; } .art-running-title { font-family: var(--fs); font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(44,40,32,0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .art-running-progress { height: 2px; background: rgba(168,88,0,0.12); margin-top: 0.5rem; } .art-running-progress-bar { height: 2px; background: var(--gold); width: 35%; /* would be driven by JS in production */ transition: width 0.1s; } /* Main article prose column */ .art-prose { font-family: var(--fb); font-size: 1.12rem; line-height: 1.95; color: #3A3028; } /* Drop cap on first paragraph */ .art-prose .drop-cap::first-letter { font-family: var(--fd); font-weight: 600; font-size: 5rem; line-height: 0.72; float: left; margin-right: 0.1em; margin-top: 0.08em; color: var(--gold); } /* Section subheading */ .art-subhead { font-family: var(--fd); font-weight: 600; font-size: 1.7rem; line-height: 1.2; color: var(--ink); } .art-subhead em { font-style: italic; color: var(--gold); } /* Pull quote */ .art-pullquote { border-left: 4px solid var(--gold); padding: 0.5rem 0 0.5rem 2rem; margin: 0; } .art-pullquote p { font-family: var(--fi); font-style: italic; font-size: 1.5rem; line-height: 1.55; color: var(--amber); margin: 0; } /* Inline image — for body illustrations */ .art-inline-img { width: 100%; position: relative; overflow: hidden; } .art-inline-img-inner { height: 300px; position: relative; overflow: hidden; } .art-inline-img-inner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(26,24,20,0.25) 100%); } .art-img-caption { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(44,40,32,0.4); padding-top: 0.6rem; border-top: 1px solid rgba(168,88,0,0.12); } /* Horizontal rule ornament */ .art-ornament { display: flex; align-items: center; gap: 1rem; justify-content: center; } .art-ornament::before, .art-ornament::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(168,88,0,0.25)); } .art-ornament::after { background: linear-gradient(90deg, rgba(168,88,0,0.25), transparent); } .art-ornament-diamond { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; } /* ── SIDEBAR ── */ .art-sidebar-sticky { position: sticky; top: calc(72px + 3rem); } .art-sidebar-box { background: var(--parchment); border: 1px solid rgba(168,88,0,0.14); padding: 1.8rem; } .art-sidebar-title { font-family: var(--fd); font-weight: 600; font-size: 1rem; color: var(--ink); border-bottom: 1px solid rgba(168,88,0,0.15); padding-bottom: 0.7rem; margin-bottom: 1.1rem; } /* Related post row */ .art-related-row { display: flex; gap: 1rem; align-items: flex-start; padding: 0.8rem 0; border-bottom: 1px solid rgba(168,88,0,0.08); text-decoration: none; } .art-related-row:last-child { border-bottom: none; } .art-related-thumb { width: 52px; height: 52px; flex-shrink: 0; overflow: hidden; } .art-related-title { font-family: var(--fd); font-weight: 600; font-size: 0.95rem; line-height: 1.25; color: var(--ink); transition: color .2s; } .art-related-row:hover .art-related-title { color: var(--amber); } .art-related-meta { font-family: var(--fs); font-size: 0.44rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(44,40,32,0.36); } /* Share buttons */ .art-share-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--fs); font-size: 0.52rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(44,40,32,0.5); background: var(--parchment-d); border: 1px solid rgba(168,88,0,0.15); padding: 0.55rem 1rem; text-decoration: none; transition: border-color .2s, color .2s; } .art-share-btn:hover { border-color: var(--gold); color: var(--amber); } /* Newsletter inline */ .art-nl-box { background: var(--charcoal); padding: 2rem; } .art-nl-title { font-family: var(--fd); font-weight: 300; font-style: italic; font-size: 1.35rem; color: var(--off-white); line-height: 1.3; } .art-nl-title em { font-style: normal; color: var(--gold-light); } .art-nl-body { font-family: var(--fb); font-size: 0.88rem; font-style: italic; line-height: 1.75; color: rgba(245,238,216,0.45); } .art-nl-input { background: rgba(245,238,216,0.06); border: 1px solid rgba(200,130,26,0.22); border-radius: 0; color: var(--off-white); font-family: var(--fb); font-size: 0.95rem; font-style: italic; padding: 0.7rem 1rem; width: 100%; transition: border-color .25s; } .art-nl-input::placeholder { color: rgba(245,238,216,0.22); } .art-nl-input:focus { outline: none; border-color: var(--gold); } .btn-art-nl { width: 100%; font-family: var(--fs); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal); background: var(--gold); border: none; border-radius: 0; padding: 0.78rem; cursor: pointer; transition: background .25s; } .btn-art-nl:hover { background: var(--gold-light); } /* ── ARTICLE FOOTER NAV ── */ .art-footer-nav { background: var(--parchment-d); } .art-nav-prev, .art-nav-next { text-decoration: none; display: block; padding: 2.5rem 3rem; transition: background .25s; } .art-nav-prev:hover, .art-nav-next:hover { background: var(--parchment); } .art-nav-prev { border-right: 1px solid rgba(168,88,0,0.15); } .art-nav-label { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(44,40,32,0.4); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; } .art-nav-title { font-family: var(--fd); font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: var(--ink); transition: color .25s; } .art-nav-prev:hover .art-nav-title, .art-nav-next:hover .art-nav-title { color: var(--amber); } .art-nav-tag { display: inline-block; font-family: var(--fs); font-size: 0.44rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(200,130,26,0.25); padding: 0.2rem 0.55rem; margin-top: 0.6rem; } /* ── UTILITY ── */ .eyebrow { font-family: var(--fs); font-size: 0.52rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--gold); } .gold-rule { height: 4px; background: linear-gradient(90deg, var(--amber), var(--gold), var(--gold-light), var(--gold), var(--amber)); } /* Fade-up on load */ .fade-up { animation: fadeUp 0.9s ease-out both; } .fade-up:nth-child(1) { animation-delay: 0.1s; } .fade-up:nth-child(2) { animation-delay: 0.25s; } .fade-up:nth-child(3) { animation-delay: 0.4s; } .fade-up:nth-child(4) { animation-delay: 0.55s; } } /* Image placeholders (gradient stand-ins for real photos) */ .bg-meadow { background: linear-gradient(145deg, #0E1A0E 0%, #2A4A20 50%, #5A7A30 100%); } .bg-honey { background: linear-gradient(145deg, #2A1A08 0%, #5C3010 50%, #8A6020 100%); } /* ════════════════════════════════════════════════════════════════ OUR STORY — Brand story / about page (our-story.html) ════════════════════════════════════════════════════════════════ */ @keyframes drip { 0%,100% { transform: scaleY(0.6); opacity: 0.35; } 50% { transform: scaleY(1); opacity: 0.85; } } @keyframes revUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ─── TOKENS ─── */ :root { --gold: #C8821A; --gold-light: #E8A83A; --gold-pale: #F2C96A; --amber: #A85800; --amber-nav: rgba(72,36,0,0.97); --magenta: #C4255E; --magenta-d: #A81E50; --sage: #4A6E4A; --sage-mid: #5A7E5A; --charcoal: #1A1814; --ink: #2C2820; --parchment: #F5EED8; --parchment-d: #EDE0C0; --cream: #FAF6EC; --off-white: #FDFAF2; --fd: 'Cormorant Garamond', Georgia, serif; --fi: 'IM Fell English', Georgia, serif; --fb: 'Cormorant Infant', Georgia, serif; --fs: 'Tenor Sans', sans-serif; } /* ─── NAVBAR ─── */ .em-navbar { background: var(--amber-nav) !important; backdrop-filter: blur(16px); border-bottom: 1px solid rgba(200,130,26,0.25); min-height: 72px; } /* ─── SHARED UTILITIES ─── */ .gold-rule { height: 4px; background: linear-gradient(90deg, var(--amber), var(--gold), var(--gold-light), var(--gold), var(--amber)); } .eyebrow { font-family: var(--fs); font-size: 0.54rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 1rem; } .body-text { font-family: var(--fb); font-size: 1.08rem; line-height: 1.95; color: #3A3028; } .body-text-light { font-family: var(--fb); font-size: 1.08rem; line-height: 1.95; color: rgba(245,238,216,0.6); } .drop-cap::first-letter { font-family: var(--fd); font-weight: 600; font-size: 5.2rem; float: left; line-height: 0.72; margin-right: 0.08em; margin-top: 0.08em; color: var(--gold); } .pull-quote { border-left: 3px solid var(--gold); padding-left: 1.5rem; font-family: var(--fi); font-style: italic; font-size: 1.3rem; line-height: 1.6; color: var(--amber); } .pull-quote-light { border-left: 3px solid var(--gold-light); padding-left: 1.5rem; font-family: var(--fi); font-style: italic; font-size: 1.3rem; line-height: 1.6; color: var(--gold-pale); } .pull-quote-center { font-family: var(--fi); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.5; color: var(--ink); text-align: center; } .pull-quote-center em { color: var(--gold); font-style: normal; } .ornament { display: flex; align-items: center; gap: 1rem; justify-content: center; } .ornament::before, .ornament::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(168,88,0,0.25)); } .ornament::after { background: linear-gradient(90deg, rgba(168,88,0,0.25), transparent); } .ornament-diamond { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); } .btn-gold { font-family: var(--fs); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--charcoal); background: var(--gold); border: none; border-radius: 0; padding: 0.9rem 2.2rem; text-decoration: none; display: inline-block; transition: background .25s, transform .2s; } .btn-gold:hover { background: var(--gold-light); color: var(--charcoal); transform: translateY(-2px); } .btn-outline-amber { font-family: var(--fs); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); background: transparent; border: 1px solid rgba(168,88,0,0.3); border-radius: 0; padding: 0.9rem 2.2rem; text-decoration: none; display: inline-block; transition: border-color .25s, color .25s; } .btn-outline-light { font-family: var(--fs); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,238,216,0.65); background: transparent; border: 1px solid rgba(245,238,216,0.25); border-radius: 0; padding: 0.9rem 2.2rem; text-decoration: none; display: inline-block; transition: border-color .25s, color .25s; } .btn-outline-light:hover { border-color: var(--gold); color: var(--gold-light); } /* ─── HERO ─── */ .os-hero { background: var(--charcoal); min-height: 100vh; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding-top: 72px; } .os-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 60% at 50% 30%, rgba(168,88,0,0.35) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 15% 70%, rgba(74,110,74,0.1) 0%, transparent 55%), radial-gradient(ellipse 40% 50% at 85% 20%, rgba(168,88,0,0.12) 0%, transparent 50%); } .os-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, transparent, transparent 52px, rgba(200,130,26,0.022) 52px, rgba(200,130,26,0.022) 53px ); } /* Large decorative background text watermark */ .os-hero-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--fd); font-weight: 700; font-size: clamp(12rem, 22vw, 22rem); line-height: 1; letter-spacing: -0.02em; color: rgba(200,130,26,0.045); white-space: nowrap; user-select: none; pointer-events: none; z-index: 1; } .os-hero-inner { position: relative; z-index: 3; width: 100%; } /* Chapter label — vertical text */ .os-chapter-vert { font-family: var(--fs); font-size: 0.52rem; letter-spacing: 0.38em; text-transform: uppercase; color: rgba(200,130,26,0.45); writing-mode: vertical-rl; transform: rotate(180deg); position: absolute; left: 3rem; bottom: 4rem; z-index: 4; } .os-hero-kicker { font-family: var(--fs); font-size: 0.56rem; letter-spacing: 0.45em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 1rem; } .os-hero-kicker::before { content: ''; width: 28px; height: 1px; background: var(--gold); } .os-hero-title { font-family: var(--fd); font-weight: 300; font-size: clamp(4rem, 9vw, 8.5rem); line-height: 0.88; color: var(--off-white); } .os-hero-title em { font-style: italic; color: var(--gold-light); display: block; } .os-hero-lede { font-family: var(--fi); font-style: italic; font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(245,238,216,0.58); line-height: 1.75; max-width: 560px; } /* Scroll indicator */ .os-scroll { position: absolute; bottom: 2.5rem; right: 3.5rem; z-index: 4; display: flex; align-items: center; gap: 0.8rem; } .os-scroll-bar { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--gold), transparent); transform-origin: top; animation: drip 2.5s ease-in-out infinite; } 50% { transform: scaleY(1); opacity: 0.85; } } .os-scroll-label { font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.36em; text-transform: uppercase; color: rgba(200,130,26,0.4); writing-mode: vertical-rl; } /* Reveal animation */ .reveal { animation: revUp 0.9s ease-out both; } .reveal:nth-child(2) { animation-delay: 0.28s; } .reveal:nth-child(3) { animation-delay: 0.45s; } .reveal:nth-child(4) { animation-delay: 0.62s; } from { opacity: 0; transform: translateY(20px); } } /* ─── CHAPTER NAVIGATION ─── */ .os-chapters-nav { background: var(--parchment); border-bottom: 1px solid rgba(168,88,0,0.15); position: sticky; top: 72px; z-index: 100; } .os-chapter-btn { font-family: var(--fs); font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(44,40,32,0.45); background: transparent; border: none; padding: 1rem 1.3rem; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; transition: color .25s, border-color .25s; } .os-chapter-btn:hover { color: var(--amber); border-bottom-color: rgba(168,88,0,0.3); } .os-chapter-btn.active { color: var(--amber); border-bottom-color: var(--amber); } /* ─── CHAPTER SECTIONS ─── */ /* Each chapter has a different background to give rhythm */ /* Ch 1: The Beginning — cream */ .ch-beginning { background: var(--cream); } /* Ch 2: The Belief — parchment */ .ch-belief { background: var(--parchment); } /* Ch 3: The Name — charcoal */ .ch-name { background: var(--charcoal); position: relative; overflow: hidden; } .ch-name::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 10% 50%, rgba(168,88,0,0.14) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 90% 50%, rgba(74,110,74,0.07) 0%, transparent 55%); } /* Ch 4: The Craft — parchment-d */ .ch-craft { background: var(--parchment-d); } /* Ch 5: The Promise — sage */ .ch-promise { background: var(--sage-mid); position: relative; overflow: hidden; } .ch-promise::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 10% 50%, rgba(26,24,20,0.22) 0%, transparent 60%), radial-gradient(ellipse 50% 70% at 90% 50%, rgba(26,24,20,0.15) 0%, transparent 55%); } /* Chapter number watermark inside section */ .ch-num-watermark { font-family: var(--fd); font-weight: 700; font-size: 18rem; line-height: 1; color: rgba(168,88,0,0.055); position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); user-select: none; pointer-events: none; z-index: 0; } .ch-num-watermark-light { color: rgba(242,201,106,0.05); } /* Chapter label pill */ .ch-label { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(200,130,26,0.25); padding: 0.3rem 0.8rem; } .ch-label::before { content: ''; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; } .ch-label-light { color: var(--gold-pale); border-color: rgba(242,201,106,0.25); } .ch-label-light::before { background: var(--gold-pale); } /* Chapter title */ .ch-title { font-family: var(--fd); font-weight: 300; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 0.95; color: var(--ink); } .ch-title em { display: block; font-style: italic; color: var(--gold); } .ch-title-light { color: var(--off-white); } .ch-title-light em { color: var(--gold-light); } .ch-title-sage { color: var(--off-white); } .ch-title-sage em { color: var(--gold-pale); } /* ─── FULL-BLEED TEXT MOMENT ─── */ /* Used between chapters for big typographic breathing room */ .os-text-moment { background: var(--parchment-d); padding: 7rem 2rem; text-align: center; position: relative; overflow: hidden; } .os-text-moment::before { content: '"'; position: absolute; top: -3rem; left: 3rem; font-family: var(--fd); font-weight: 700; font-size: 28rem; line-height: 1; color: rgba(168,88,0,0.05); pointer-events: none; } /* ─── ILLUSTRATED SCENE PANELS ─── */ .scene-panel { position: relative; overflow: hidden; background: var(--charcoal); } .scene-panel svg { position: absolute; inset: 0; width: 100%; height: 100%; } .scene-panel-overlay { position: absolute; inset: 0; pointer-events: none; } .scene-caption { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 0.8rem 1.8rem; font-family: var(--fs); font-size: 0.44rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,238,216,0.35); background: linear-gradient(to top, rgba(26,24,20,0.55) 0%, transparent 100%); } /* ─── VALUES CARDS (ch: The Belief) ─── */ .value-card { background: var(--cream); border: 1px solid rgba(168,88,0,0.12); padding: 2.2rem 2rem; position: relative; transition: border-color .3s, box-shadow .3s, transform .3s; } .value-card:hover { border-color: rgba(168,88,0,0.28); box-shadow: 0 8px 28px rgba(44,40,32,0.08); transform: translateY(-3px); } .value-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); opacity: 0; transition: opacity .3s; } .value-card:hover::before { opacity: 1; } .value-num { font-family: var(--fd); font-weight: 300; font-size: 4rem; line-height: 1; color: rgba(168,88,0,0.1); } .value-title { font-family: var(--fd); font-weight: 600; font-size: 1.35rem; color: var(--ink); } .value-body { font-family: var(--fb); font-size: 0.92rem; font-style: italic; line-height: 1.85; color: rgba(44,40,32,0.58); } /* ─── ELLA ORIGIN (ch: The Name) ─── */ .ella-letter { font-family: var(--fd); font-weight: 300; font-size: clamp(5rem, 12vw, 10rem); line-height: 1; color: rgba(200,130,26,0.15); letter-spacing: 0.1em; text-align: center; user-select: none; } /* ─── CRAFT PRINCIPLES (ch: The Craft) ─── */ .craft-principle { padding: 2rem 2.5rem; border-left: 3px solid rgba(168,88,0,0.12); transition: border-color .3s; } .craft-principle:hover { border-color: var(--gold); } .craft-principle-num { font-family: var(--fd); font-weight: 300; font-size: 3rem; line-height: 1; color: rgba(168,88,0,0.12); } .craft-principle-title { font-family: var(--fd); font-weight: 600; font-size: 1.35rem; color: var(--ink); } .craft-principle-body { font-family: var(--fb); font-size: 0.92rem; font-style: italic; line-height: 1.85; color: rgba(44,40,32,0.58); } /* ─── PROMISE CARDS (ch: The Promise) ─── */ .promise-card { background: rgba(245,238,216,0.08); border: 1px solid rgba(245,238,216,0.14); padding: 2rem 1.8rem; transition: background .3s, border-color .3s; } .promise-card:hover { background: rgba(245,238,216,0.14); border-color: rgba(245,238,216,0.3); } .promise-icon { font-size: 1.8rem; display: block; margin-bottom: 1rem; } .promise-title { font-family: var(--fd); font-weight: 600; font-size: 1.15rem; color: var(--off-white); } .promise-body { font-family: var(--fb); font-size: 0.9rem; font-style: italic; line-height: 1.8; color: rgba(253,250,242,0.52); } /* ════════════════════════════════════════════════════════════════ THE RANCH — Ranch heritage page (the-ranch.html) ════════════════════════════════════════════════════════════════ */ @keyframes scrollDrip { 0%,100% { transform: scaleY(0.6); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 0.85; } } @keyframes rhUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* ─── HERO ─── */ .rh-hero { min-height: 100vh; background: linear-gradient(175deg, #1A1208 0%, #2E1E08 25%, #3A2A0A 50%, #241808 75%, #1A1208 100%); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-top: 72px; } /* Full-bleed landscape SVG */ .rh-hero-landscape { position: absolute; inset: 0; width: 100%; height: 100%; } /* Warm overlay gradient */ .rh-hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 55% at 60% 28%, rgba(200,130,26,0.28) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 20% 70%, rgba(74,110,74,0.12) 0%, transparent 50%), linear-gradient(to bottom, rgba(26,24,20,0) 30%, rgba(26,24,20,0.75) 100%); pointer-events: none; } /* Laid-paper lines */ .rh-hero-lines { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, transparent, transparent 48px, rgba(200,130,26,0.02) 48px, rgba(200,130,26,0.02) 49px ); } /* Hero text — sits above landscape at bottom */ .rh-hero-text { position: relative; z-index: 3; width: 100%; padding: 0 0 0; } .rh-hero-kicker { font-family: var(--fs); font-size: 0.56rem; letter-spacing: 0.45em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 1rem; } .rh-hero-kicker::before { content: ''; width: 32px; height: 1px; background: var(--gold); } .rh-hero-title { font-family: var(--fd); font-weight: 300; font-size: clamp(5rem, 12vw, 11rem); line-height: 0.85; color: var(--off-white); } .rh-hero-title em { display: block; font-style: italic; color: var(--gold-light); } .rh-hero-tagline { font-family: var(--fi); font-style: italic; font-size: clamp(1rem, 2vw, 1.3rem); color: rgba(245,238,216,0.58); line-height: 1.7; max-width: 480px; } .rh-hero-scroll { position: absolute; bottom: 2.5rem; right: 3.5rem; z-index: 3; display: flex; align-items: center; gap: 0.8rem; } .rh-scroll-bar { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scrollDrip 2.5s ease-in-out infinite; transform-origin: top; } 0%, 100% { transform: scaleY(0.6); opacity: 0.4; } } .rh-scroll-label { font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.36em; text-transform: uppercase; color: rgba(200,130,26,0.4); writing-mode: vertical-rl; } /* Gold rule at hero base */ .gold-rule { height: 4px; background: linear-gradient(90deg, var(--amber), var(--gold), var(--gold-light), var(--gold), var(--amber)); } /* Hero reveal animations */ .rh-reveal { animation: rhUp 1s ease-out both; } .rh-reveal:nth-child(1) { animation-delay: 0.2s; } .rh-reveal:nth-child(2) { animation-delay: 0.38s; } .rh-reveal:nth-child(3) { animation-delay: 0.55s; } .rh-reveal:nth-child(4) { animation-delay: 0.7s; } from { opacity: 0; transform: translateY(22px); } } /* ─── SHARED UTILITIES ─── */ .eyebrow { font-family: var(--fs); font-size: 0.54rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 1rem; } .eyebrow-sage { color: #8FBF8F !important; } .eyebrow-sage::before, .eyebrow-sage::after { background: rgba(90,126,90,0.4) !important; } .section-title { font-family: var(--fd); font-weight: 300; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.08; color: var(--ink); } .section-title em { font-style: italic; color: var(--gold); } .section-title-light { color: var(--off-white); } .section-title-light em { color: var(--gold-light); } .body-text { font-family: var(--fb); font-size: 1.05rem; line-height: 1.95; color: #3A3028; } .body-text-light { font-family: var(--fb); font-size: 1.05rem; line-height: 1.95; color: rgba(245,238,216,0.58); } .pull-quote-light { border-left: 3px solid var(--gold); padding-left: 1.5rem; font-family: var(--fi); font-style: italic; font-size: 1.3rem; line-height: 1.6; color: var(--gold-pale); } /* Drop cap */ .drop-cap::first-letter { font-family: var(--fd); font-weight: 600; font-size: 5rem; float: left; line-height: 0.72; margin-right: 0.08em; margin-top: 0.08em; color: var(--gold); } /* Ornamental divider */ .ornament { display: flex; align-items: center; gap: 1rem; justify-content: center; } .ornament-diamond { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; } /* Buttons */ .btn-gold { font-family: var(--fs); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--charcoal); background: var(--gold); border: none; border-radius: 0; padding: 0.9rem 2.2rem; text-decoration: none; display: inline-block; transition: background .25s, transform .2s; } .btn-outline-light { font-family: var(--fs); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,238,216,0.65); background: transparent; border: 1px solid rgba(245,238,216,0.25); border-radius: 0; padding: 0.9rem 2.2rem; text-decoration: none; display: inline-block; transition: border-color .25s, color .25s, transform .2s; } .btn-outline-light:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); } .btn-outline-amber { font-family: var(--fs); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); background: transparent; border: 1px solid rgba(168,88,0,0.3); border-radius: 0; padding: 0.85rem 2rem; text-decoration: none; display: inline-block; transition: border-color .25s, color .25s; } /* ─── LANDSCAPE IMAGE PANELS (SVG gradient stand-ins) ─── */ .landscape-panel { position: relative; overflow: hidden; } .landscape-panel svg { position: absolute; inset: 0; width: 100%; height: 100%; } .lp-sunrise { background: linear-gradient(160deg, #1A3010 0%, #2A5020 30%, #3A6830 55%, #5A4010 80%, #3A2008 100%); } .lp-golden { background: linear-gradient(155deg, #1A1208 0%, #3A2808 30%, #6A4A10 60%, #8A6018 85%, #5A3808 100%); } .lp-dusk { background: linear-gradient(160deg, #0E1A18 0%, #182A28 30%, #284838 55%, #3A5020 80%, #2A3818 100%); } .lp-hive { background: linear-gradient(150deg, #1A1208 0%, #2E1A08 35%, #5C3810 65%, #3A2008 100%); } .lp-barn { background: linear-gradient(150deg, #100808 0%, #201010 35%, #3A1818 65%, #281010 100%); } .landscape-caption { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 1rem 1.8rem; font-family: var(--fs); font-size: 0.46rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,238,216,0.35); background: linear-gradient(to top, rgba(26,24,20,0.6) 0%, transparent 100%); } /* ─── INTRO / MANIFESTO ─── */ .rh-intro { background: var(--parchment); position: relative; } .rh-intro::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--amber), var(--gold), var(--gold-light), var(--gold), var(--amber)); } /* Large decorative drop-number */ .section-num { font-family: var(--fd); font-weight: 300; font-size: 10rem; line-height: 1; color: rgba(168,88,0,0.07); margin-bottom: -2.5rem; } /* ─── THE LAND ─── */ .rh-land { background: var(--cream); } /* Full-bleed image with text overlay */ .rh-land-full { position: relative; min-height: 520px; overflow: hidden; } .rh-land-full-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(26,24,20,0.85) 0%, rgba(26,24,20,0.4) 55%, transparent 100%); z-index: 2; } .rh-land-full-text { position: relative; z-index: 3; } /* Stat grid */ .land-stat { text-align: center; padding: 2rem 1.5rem; } .land-stat-val { font-family: var(--fd); font-weight: 300; font-size: 3.2rem; line-height: 1; color: var(--gold); } .land-stat-label { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(44,40,32,0.45); } /* ─── THE BEES ─── */ .rh-bees { background: var(--charcoal); position: relative; overflow: hidden; } .rh-bees::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 5% 50%, rgba(168,88,0,0.14) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 95% 50%, rgba(74,110,74,0.07) 0%, transparent 55%); } /* Bee fact card */ .bee-card { background: rgba(245,238,216,0.04); border: 1px solid rgba(200,130,26,0.12); padding: 2.2rem 2rem; transition: background .3s, border-color .3s; } .bee-card:hover { background: rgba(245,238,216,0.08); border-color: rgba(200,130,26,0.28); } .bee-card-num { font-family: var(--fd); font-weight: 300; font-size: 4rem; line-height: 1; color: rgba(200,130,26,0.18); } .bee-card-title { font-family: var(--fd); font-weight: 600; font-size: 1.2rem; color: var(--off-white); } .bee-card-body { font-family: var(--fb); font-size: 0.9rem; font-style: italic; line-height: 1.8; color: rgba(245,238,216,0.48); } /* ─── THE FERMENTATION ROOM ─── */ .rh-ferment { background: var(--parchment-d); } /* Process step */ .process-step { padding: 2.5rem 2rem; border-right: 1px solid rgba(168,88,0,0.1); position: relative; transition: background .3s; } .process-step:last-child { border-right: none; } .process-step:hover { background: rgba(168,88,0,0.03); } .process-step-num { font-family: var(--fd); font-weight: 300; font-size: 5rem; line-height: 1; color: rgba(168,88,0,0.08); position: absolute; top: 1rem; right: 1.2rem; } .process-step-icon { font-size: 1.8rem; display: block; margin-bottom: 1.2rem; } .process-step-title { font-family: var(--fd); font-weight: 600; font-size: 1.25rem; color: var(--ink); } .process-step-body { font-family: var(--fb); font-size: 0.92rem; font-style: italic; line-height: 1.85; color: rgba(44,40,32,0.55); } /* ─── THE PEOPLE ─── */ .rh-people { background: var(--cream); } .person-card { background: var(--off-white); border: 1px solid rgba(168,88,0,0.1); overflow: hidden; transition: border-color .3s, transform .3s, box-shadow .3s; } .person-card:hover { border-color: rgba(168,88,0,0.25); transform: translateY(-4px); box-shadow: 0 10px 36px rgba(44,40,32,0.1); } .person-visual { height: 220px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .person-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(26,24,20,0.35) 100%); z-index: 1; } .person-body { padding: 1.8rem 2rem 2.2rem; } .person-role { font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); } .person-name { font-family: var(--fd); font-weight: 600; font-size: 1.45rem; color: var(--ink); } .person-bio { font-family: var(--fb); font-size: 0.9rem; font-style: italic; line-height: 1.78; color: rgba(44,40,32,0.55); } .person-quote { font-family: var(--fi); font-style: italic; font-size: 0.95rem; line-height: 1.6; color: var(--amber); border-top: 1px solid rgba(168,88,0,0.12); padding-top: 1rem; margin-top: 1rem; } .bg-person-1 { background: linear-gradient(145deg, #1A1208 0%, #3A2808 50%, #6A4A18 100%); } .bg-person-2 { background: linear-gradient(145deg, #0E1A10 0%, #1A3018 50%, #3A5028 100%); } .bg-person-3 { background: linear-gradient(145deg, #181208 0%, #2E2010 50%, #5A3A18 100%); } .bg-person-4 { background: linear-gradient(145deg, #1A0A10 0%, #3A1020 50%, #6A2840 100%); } /* ─── THE SEASONS ─── */ .rh-seasons { background: var(--charcoal); position: relative; overflow: hidden; } .rh-seasons::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(74,110,74,0.1) 0%, transparent 65%); } .season-panel { position: relative; padding: 3rem 2.5rem; border-right: 1px solid rgba(200,130,26,0.1); transition: background .3s; } .season-panel:last-child { border-right: none; } .season-panel:hover { background: rgba(245,238,216,0.04); } .season-icon { font-size: 2.4rem; display: block; margin-bottom: 1.2rem; } .season-name { font-family: var(--fd); font-weight: 300; font-size: 1.5rem; color: var(--off-white); margin-bottom: 0.3rem; } .season-name em { font-style: italic; color: var(--gold-light); } .season-tagline { font-family: var(--fs); font-size: 0.48rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200,130,26,0.5); margin-bottom: 1rem; } .season-body { font-family: var(--fb); font-size: 0.88rem; font-style: italic; line-height: 1.8; color: rgba(245,238,216,0.45); } .season-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity .3s; } .season-panel:hover .season-accent { opacity: 1; } /* ─── TIMELINE ─── */ .rh-timeline { background: var(--parchment); } .timeline-item { position: relative; padding-left: 2.5rem; padding-bottom: 3rem; } .timeline-item::before { content: ''; position: absolute; left: 0; top: 0.5rem; bottom: 0; width: 1px; background: rgba(168,88,0,0.2); } .timeline-item:last-child::before { display: none; } .timeline-dot { position: absolute; left: -5px; top: 0.45rem; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); border: 2px solid var(--parchment); box-shadow: 0 0 0 2px rgba(168,88,0,0.3); } .timeline-year { font-family: var(--fd); font-weight: 300; font-size: 2.2rem; line-height: 1; color: rgba(168,88,0,0.2); margin-bottom: 0.2rem; } .timeline-event { font-family: var(--fd); font-weight: 600; font-size: 1.2rem; color: var(--ink); } .timeline-detail { font-family: var(--fb); font-size: 0.92rem; font-style: italic; line-height: 1.8; color: rgba(44,40,32,0.55); } /* ─── VISIT SECTION ─── */ .rh-visit { background: var(--sage-mid); position: relative; overflow: hidden; } .rh-visit::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 10% 50%, rgba(26,24,20,0.25) 0%, transparent 60%), radial-gradient(ellipse 50% 70% at 90% 50%, rgba(26,24,20,0.18) 0%, transparent 55%); } /* Visit detail card */ .visit-card { background: rgba(245,238,216,0.08); border: 1px solid rgba(245,238,216,0.15); padding: 2rem 1.8rem; transition: background .3s, border-color .3s; } .visit-card:hover { background: rgba(245,238,216,0.14); border-color: rgba(245,238,216,0.3); } .visit-card-icon { font-size: 1.6rem; display: block; margin-bottom: 1rem; } .visit-card-title { font-family: var(--fd); font-weight: 600; font-size: 1.1rem; color: var(--off-white); } .visit-card-body { font-family: var(--fb); font-size: 0.88rem; font-style: italic; line-height: 1.8; color: rgba(253,250,242,0.55); } .visit-card-link { font-family: var(--fs); font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-pale); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; border-bottom: 1px solid rgba(242,201,106,0.25); padding-bottom: 0.1rem; transition: gap .2s, color .2s; } .visit-card-link::after { content: '→'; } .visit-card-link:hover { gap: 0.7rem; color: var(--off-white); } /* Map placeholder */ .rh-map-placeholder { background: linear-gradient(145deg, #0E1A10 0%, #182A18 40%, #2A3A20 70%, #1A2810 100%); height: 280px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .rh-map-placeholder::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(74,110,74,0.2) 0%, transparent 65%); } .rh-map-text { position: relative; z-index: 2; text-align: center; } /* ════════════════════════════════════════════════════════════════ EVENTS PAGE (events.html) Prefix: .ev-* | Buttons: .btn-ev-* ════════════════════════════════════════════════════════════════ */ /* Eyebrow modifier — suppresses the decorative lines */ .em-eyebrow.no-line::before, .em-eyebrow.no-line::after { display: none; } /* Eyebrow light variant (stronger override for dark sections) */ .em-eyebrow-light { color: var(--em-gold-pale) !important; } .em-eyebrow-light::before, .em-eyebrow-light::after { background: rgba(242,201,106,0.45) !important; } /* ── Page Header ── */ .ev-page-header { background: var(--em-charcoal); padding-top: 9rem; padding-bottom: 0; position: relative; overflow: hidden; } .ev-page-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(168,88,0,0.28) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 10% 80%, rgba(74,110,74,0.08) 0%, transparent 50%), radial-gradient(ellipse 40% 60% at 90% 60%, rgba(196,37,94,0.06) 0%, transparent 50%); pointer-events: none; } .ev-page-header::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, transparent, transparent 52px, rgba(200,130,26,0.022) 52px, rgba(200,130,26,0.022) 53px ); } .ev-header-inner { position: relative; z-index: 2; } .ev-header-kicker { font-family: var(--font-sans); font-size: 0.58rem; letter-spacing: 0.45em; text-transform: uppercase; color: var(--em-gold); display: flex; align-items: center; gap: 1rem; } .ev-header-kicker::before { content: ''; width: 28px; height: 1px; background: var(--em-gold); flex-shrink: 0; } .ev-header-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(3.5rem, 7vw, 7rem); line-height: 0.9; color: var(--em-off-white); } .ev-header-title em { font-style: italic; font-weight: 300; color: var(--em-gold-light); display: block; } .ev-header-subtitle { font-family: var(--font-italic); font-style: italic; font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(245,238,216,0.52); line-height: 1.7; max-width: 480px; } /* Staggered page-load reveal */ .ev-reveal { animation: evFadeUp 0.9s ease-out both; } .ev-reveal:nth-child(1) { animation-delay: 0.1s; } .ev-reveal:nth-child(2) { animation-delay: 0.25s; } .ev-reveal:nth-child(3) { animation-delay: 0.4s; } .ev-reveal:nth-child(4) { animation-delay: 0.55s; } @keyframes evFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Gold rule bottom of header */ .ev-header-rule { height: 4px; background: linear-gradient(90deg, var(--em-amber), var(--em-gold), var(--em-gold-light), var(--em-gold), var(--em-amber)); margin-top: 4rem; } /* Vertical text — right edge */ .ev-vert-text { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 0.88rem; color: rgba(200,130,26,0.18); letter-spacing: 0.14em; writing-mode: vertical-rl; position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%) rotate(180deg); z-index: 2; } /* ── Filter Bar ── */ .ev-filter-bar { background: var(--em-parchment); border-bottom: 1px solid rgba(168,88,0,0.15); position: sticky; top: 72px; z-index: 100; } .ev-filter-btn { font-family: var(--font-sans); font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(44,40,32,0.5); background: transparent; border: none; padding: 1.1rem 1.4rem; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.25s, border-color 0.25s; white-space: nowrap; } .ev-filter-btn:hover { color: var(--em-amber); border-bottom-color: rgba(168,88,0,0.3); } .ev-filter-btn.active { color: var(--em-amber); border-bottom-color: var(--em-amber); } .ev-count { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(44,40,32,0.35); } /* ── Featured Event ── */ .ev-featured { background: var(--em-parchment); } .ev-featured-card { background: var(--em-charcoal); position: relative; overflow: hidden; } .ev-featured-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(168,88,0,0.18) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 100% 30%, rgba(196,37,94,0.08) 0%, transparent 50%); } .ev-featured-card::after { content: attr(data-month); position: absolute; right: 3rem; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 300; font-size: 22rem; line-height: 1; color: rgba(200,130,26,0.04); pointer-events: none; user-select: none; } .ev-featured-inner { position: relative; z-index: 2; } .ev-featured-date-block { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--em-gold); padding: 2rem 2.5rem; min-width: 130px; } .ev-featured-month { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--em-charcoal); margin-bottom: 0.3rem; } .ev-featured-day { font-family: var(--font-display); font-weight: 300; font-size: 4.5rem; line-height: 1; color: var(--em-charcoal); } .ev-featured-dow { font-family: var(--font-sans); font-size: 0.52rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(26,24,20,0.6); margin-top: 0.2rem; } .ev-featured-body { padding: 3rem 3.5rem; } /* Event tags */ .ev-tag { display: inline-block; font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.3rem 0.8rem; border: 1px solid rgba(200,130,26,0.35); color: var(--em-gold); } .ev-tag.ev-tag-magenta { border-color: rgba(196,37,94,0.4); color: var(--em-magenta); } .ev-tag.ev-tag-sage { border-color: rgba(90,126,90,0.4); color: #7ABE7A; } .ev-featured-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; color: var(--em-off-white); } .ev-featured-title em { font-style: italic; color: var(--em-gold-light); } .ev-featured-meta { font-family: var(--font-sans); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(200,130,26,0.6); display: flex; align-items: center; gap: 0.6rem; } .ev-featured-meta::before { content: '◆'; font-size: 0.4rem; color: var(--em-gold); } .ev-featured-desc { font-family: var(--font-body); font-size: 1.05rem; font-style: italic; line-height: 1.85; color: rgba(245,238,216,0.58); max-width: 560px; } .ev-detail-pill { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-sans); font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,238,216,0.45); } .ev-detail-pill strong { color: var(--em-gold-pale); font-weight: normal; } .ev-detail-pill::before { content: '—'; color: rgba(200,130,26,0.4); } /* Featured / header CTA buttons */ .btn-ev-primary { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--em-charcoal); background: var(--em-gold); border: none; border-radius: 0; padding: 0.9rem 2.4rem; text-decoration: none; display: inline-block; transition: background 0.25s, transform 0.2s; } .btn-ev-primary:hover { background: var(--em-gold-light); color: var(--em-charcoal); transform: translateY(-2px); } .btn-ev-outline { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,238,216,0.6); background: transparent; border: 1px solid rgba(245,238,216,0.2); border-radius: 0; padding: 0.9rem 2.4rem; text-decoration: none; display: inline-block; transition: border-color 0.25s, color 0.25s, transform 0.2s; } .btn-ev-outline:hover { border-color: var(--em-gold); color: var(--em-gold-light); transform: translateY(-2px); } /* ── Event Listing ── */ .ev-listing { background: var(--em-cream); } .ev-month-divider { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 0.5rem; margin-top: 2rem; } .ev-month-label { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; color: var(--em-ink); white-space: nowrap; } .ev-month-label em { font-style: italic; color: var(--em-gold); } .ev-month-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(168,88,0,0.25), transparent); } /* Event row card */ .ev-card { background: var(--em-off-white); border: 1px solid rgba(168,88,0,0.1); position: relative; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; display: block; text-decoration: none; } .ev-card:hover { border-color: rgba(168,88,0,0.3); box-shadow: 0 8px 32px rgba(44,40,32,0.1); transform: translateY(-3px); } /* Left accent bar — colour varies by category */ .ev-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--em-gold); transition: width 0.3s; } .ev-card:hover::before { width: 5px; } .ev-card.ev-type-tasting::before { background: var(--em-gold); } .ev-card.ev-type-tour::before { background: var(--em-sage-mid); } .ev-card.ev-type-release::before { background: var(--em-magenta); } .ev-card.ev-type-class::before { background: #8B7B5A; } /* Date column */ .ev-card-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 80px; padding: 1.5rem 1rem; border-right: 1px solid rgba(168,88,0,0.1); text-align: center; } .ev-card-month { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--em-gold); margin-bottom: 0.1rem; } .ev-card-day { font-family: var(--font-display); font-weight: 300; font-size: 2.8rem; line-height: 1; color: var(--em-ink); } .ev-card-dow { font-family: var(--font-sans); font-size: 0.46rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(44,40,32,0.4); margin-top: 0.1rem; } /* Card body */ .ev-card-body { padding: 1.5rem 2rem; flex: 1; } .ev-card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; color: var(--em-ink); line-height: 1.2; transition: color 0.25s; } .ev-card:hover .ev-card-title { color: var(--em-amber); } .ev-card-meta { font-family: var(--font-sans); font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(44,40,32,0.45); } .ev-card-desc { font-family: var(--font-body); font-size: 0.95rem; font-style: italic; line-height: 1.75; color: rgba(44,40,32,0.55); } /* Card aside — price, spots, book button */ .ev-card-aside { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 1.5rem 1.8rem; border-left: 1px solid rgba(168,88,0,0.08); min-width: 180px; } .ev-price { font-family: var(--font-display); font-weight: 300; font-size: 1.6rem; color: var(--em-ink); line-height: 1; } .ev-price-label { font-family: var(--font-sans); font-size: 0.48rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(44,40,32,0.4); } .ev-spots { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; } .ev-spots.few { color: var(--em-magenta); } .ev-spots.open { color: var(--em-sage-mid); } .ev-spots.sold { color: rgba(44,40,32,0.35); text-decoration: line-through; } .btn-ev-book { font-family: var(--font-sans); font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--em-off-white); background: var(--em-amber); border: none; border-radius: 0; padding: 0.6rem 1.4rem; text-decoration: none; display: inline-block; transition: background 0.2s; white-space: nowrap; } .btn-ev-book:hover { background: var(--em-gold); color: var(--em-charcoal); } .btn-ev-book.sold-out { background: rgba(44,40,32,0.12); color: rgba(44,40,32,0.4); cursor: default; pointer-events: none; } /* ── Newsletter Band ── */ .ev-nl-band { background: var(--em-charcoal); position: relative; overflow: hidden; } .ev-nl-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(168,88,0,0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 100% 50%, rgba(74,110,74,0.06) 0%, transparent 55%); } .ev-nl-heading { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.8rem); color: var(--em-off-white); line-height: 1.15; } .ev-nl-heading em { font-style: italic; color: var(--em-gold-light); } .ev-nl-body { font-family: var(--font-body); font-style: italic; font-size: 1rem; line-height: 1.8; color: rgba(245,238,216,0.5); } .ev-nl-input { background: rgba(245,238,216,0.06); border: 1px solid rgba(200,130,26,0.25); border-radius: 0; color: var(--em-off-white); font-family: var(--font-body); font-size: 1rem; font-style: italic; padding: 0.85rem 1.2rem; transition: border-color 0.25s, background 0.25s; flex: 1; } .ev-nl-input::placeholder { color: rgba(245,238,216,0.25); } .ev-nl-input:focus { outline: none; border-color: var(--em-gold); background: rgba(245,238,216,0.1); } .btn-ev-nl { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--em-charcoal); background: var(--em-gold); border: none; border-radius: 0; padding: 0.85rem 2rem; transition: background 0.25s; white-space: nowrap; cursor: pointer; } .btn-ev-nl:hover { background: var(--em-gold-light); } .ev-nl-note { font-family: var(--font-body); font-style: italic; font-size: 0.8rem; color: rgba(245,238,216,0.25); } /* ── Responsive ── */ @media (max-width: 767px) { .ev-card-aside { display: none; } .ev-card-date { min-width: 64px; padding: 1rem 0.7rem; } .ev-card-day { font-size: 2.2rem; } .ev-featured-body { padding: 2rem; } .ev-featured-date-block { min-width: 100px; padding: 1.5rem; } .ev-featured-day { font-size: 3.5rem; } } /* ════════════════════════════════════════════════════════════════ HOMEPAGE — Latest Journal Post Section Prefix: .hp-lp-* (homepage latest post) Shared classes already in ella-meadery.css — NOT redefined here: Layout/spacing : Bootstrap 5 utilities (py-5, mb-*, d-flex, gap-*, col-*) Eyebrow : .em-eyebrow .justify-content-start Section title : .em-section-title (and em inside it) Journal link : .em-ranch-link (arrow underline link) CTA button : .btn-em-primary Colors/fonts : all --em-* CSS variables and --font-* variables Append this block to ella-meadery.css. ════════════════════════════════════════════════════════════════ */ /* ── Section wrapper ── */ /* ── hp-lp: now embedded inside em-blog (sage green bg), no own background ── */ .hp-lp-card { display: flex; align-items: stretch; background: var(--em-charcoal); overflow: hidden; /* Stronger shadow reads better on sage green than parchment */ box-shadow: 0 16px 56px rgba(26,24,20,0.35), 0 2px 8px rgba(26,24,20,0.2); } @media (max-width: 991px) { .hp-lp-card { flex-direction: column; } } /* ── Left visual panel ── */ .hp-lp-visual { position: relative; flex: 0 0 340px; min-height: 480px; overflow: hidden; background: var(--em-ink); } @media (max-width: 991px) { .hp-lp-visual { flex: none; min-height: 220px; width: 100%; } } /* Atmospheric warm glow background */ .hp-lp-visual-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 30% 20%, rgba(168,88,0,0.45) 0%, transparent 55%), radial-gradient(ellipse 80% 80% at 80% 80%, rgba(74,110,74,0.18) 0%, transparent 55%), radial-gradient(ellipse 100% 100% at 50% 50%, rgba(26,24,20,0.6) 0%, transparent 80%); pointer-events: none; } /* Large Roman numeral chapter mark — decorative */ .hp-lp-chapter { position: absolute; bottom: -1.5rem; left: -0.5rem; font-family: var(--font-display); font-weight: 300; font-size: 18rem; line-height: 1; color: rgba(200,130,26,0.07); pointer-events: none; user-select: none; } /* Category tag — top-left of visual */ .hp-lp-tag-wrap { position: absolute; top: 1.8rem; left: 1.8rem; z-index: 2; } .hp-lp-tag { display: inline-block; font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--em-gold); border: 1px solid rgba(200,130,26,0.4); padding: 0.3rem 0.85rem; background: rgba(26,24,20,0.6); } /* Vertical date stamp — bottom-right of visual */ .hp-lp-date-vert { position: absolute; bottom: 2rem; right: 1.6rem; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; } .hp-lp-date-month { font-family: var(--font-sans); font-size: 0.46rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(200,130,26,0.55); } .hp-lp-date-day { font-family: var(--font-display); font-weight: 300; font-size: 3rem; line-height: 1; color: rgba(200,130,26,0.35); } .hp-lp-date-year { font-family: var(--font-sans); font-size: 0.44rem; letter-spacing: 0.22em; color: rgba(200,130,26,0.28); } @media (max-width: 991px) { .hp-lp-date-vert { display: none; } .hp-lp-chapter { font-size: 10rem; } } /* ── Right content panel ── */ .hp-lp-content { flex: 1; padding: 3.5rem 3.5rem 3rem; display: flex; flex-direction: column; justify-content: center; position: relative; } /* Hairline gold left border — visual divider between panels */ .hp-lp-content::before { content: ''; position: absolute; left: 0; top: 2rem; bottom: 2rem; width: 1px; background: linear-gradient(to bottom, transparent, rgba(200,130,26,0.25), transparent); } @media (max-width: 991px) { .hp-lp-content { padding: 2.5rem 2rem 2.5rem; } .hp-lp-content::before { display: none; } } /* ── Meta row ── */ .hp-lp-meta-cat { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--em-gold); } .hp-lp-meta-dot { font-size: 0.4rem; color: rgba(200,130,26,0.3); } .hp-lp-meta-date, .hp-lp-meta-read { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,238,216,0.3); } /* ── Post title ── */ .hp-lp-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.15; color: var(--em-off-white); } .hp-lp-title em { display: block; font-style: italic; color: var(--em-gold-light); font-weight: 300; } /* ── Pull quote ── */ .hp-lp-pull { font-family: var(--font-italic); font-size: 1.05rem; font-style: italic; color: var(--em-gold); border-left: 2px solid rgba(200,130,26,0.4); padding-left: 1.2rem; margin-left: 0; line-height: 1.7; } /* ── Excerpt body ── */ .hp-lp-excerpt { font-family: var(--font-body); font-size: 1rem; font-style: italic; line-height: 1.9; color: rgba(245,238,216,0.48); } /* ── Author byline ── */ .hp-lp-author-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--em-gold); color: var(--em-charcoal); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; flex-shrink: 0; } .hp-lp-author-name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--em-off-white); line-height: 1.2; } .hp-lp-author-role { font-family: var(--font-sans); font-size: 0.46rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,238,216,0.3); }