/* ================================================== LUBAN COFFEE — MAIN STYLESHEET v2.0 ================================================== CRITICAL STYLES are inlined in the HTML . This file ONLY loads NON-CRITICAL styles. ================================================== */ /* ═══════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════ */ /* ================================================== LUBAN COFFEE — CSS VARIABLES v2.0 ================================================== */ :root { /* ═══════════════════════════════════════════════ COLORS — Premium Ethiopian Palette ═══════════════════════════════════════════════ */ /* Core Brand — Deep, Rich */ --color-primary: #0A0806; --color-primary-light: #161210; --color-primary-dark: #040302; /* Gold — Refined & Warm */ --color-gold: #D4AF37; --color-gold-light: #E8C97A; --color-gold-dark: #B8942A; --color-gold-soft: rgba(212, 175, 55, 0.08); --color-gold-glow: rgba(212, 175, 55, 0.15); --color-gold-border: rgba(212, 175, 55, 0.2); /* Cream — Editorial Warmth */ --color-cream: #F5EFE8; --color-cream-light: #FAF6F0; --color-cream-dark: #E8DDD0; /* Coffee — Earth Tones */ --color-coffee: #5C3D2E; --color-coffee-light: #7A5543; --color-coffee-dark: #3D251A; --color-brown: #3D2817; --color-brown-light: #5A3D28; --color-brown-dark: #2A1A0E; /* Neutrals */ --color-white: #FFFFFF; --color-black: #000000; /* Text — High Contrast */ --color-text: #1A1410; --color-text-light: #4A3D35; --color-text-muted: #9A8D82; --color-text-inverse: #F5EFE8; /* UI */ --color-border: #D4C5B5; --color-border-light: rgba(255, 255, 255, 0.06); /* ─── NAVIGATION ─── */ --nav-link-color: #ffffff; --nav-link-hover: var(--color-gold); --nav-link-active: var(--color-gold); /* ═══════════════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════════════ */ /* Font Families — Premium Editorial */ --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Poppins", "Inter", "Segoe UI", Arial, Helvetica, sans-serif; --font-mono: "Courier New", Courier, monospace; /* Font Sizes — Fluid Scale */ --font-size-xs: clamp(0.6875rem, 0.05vw + 0.675rem, 0.75rem); --font-size-sm: clamp(0.8125rem, 0.08vw + 0.79rem, 0.875rem); --font-size-base: clamp(1rem, 0.12vw + 0.96rem, 1.125rem); --font-size-md: clamp(1.125rem, 0.15vw + 1.08rem, 1.25rem); --font-size-lg: clamp(1.25rem, 0.18vw + 1.2rem, 1.5rem); --font-size-xl: clamp(1.5rem, 0.25vw + 1.42rem, 1.875rem); --font-size-2xl: clamp(1.875rem, 0.35vw + 1.75rem, 2.25rem); --font-size-3xl: clamp(2.25rem, 0.45vw + 2.1rem, 2.75rem); --font-size-4xl: clamp(2.75rem, 0.6vw + 2.55rem, 3.5rem); --font-size-5xl: clamp(3.5rem, 0.8vw + 3.2rem, 4.5rem); --font-size-6xl: clamp(4.5rem, 1vw + 4rem, 6rem); --font-size-7xl: clamp(5rem, 1.2vw + 4.5rem, 7rem); /* Font Weights */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Heights */ --line-height-none: 1; --line-height-tight: 1.05; --line-height-snug: 1.1; --line-height-normal: 1.5; --line-height-relaxed: 1.75; --line-height-loose: 2; /* Letter Spacing */ --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.2em; --tracking-widestest: 0.25em; /* ═══════════════════════════════════════════════ SPACING — Proportional Scale ═══════════════════════════════════════════════ */ --spacing-0: 0; --spacing-px: 1px; --spacing-0-5: 0.125rem; --spacing-1: 0.25rem; --spacing-1-5: 0.375rem; --spacing-2: 0.5rem; --spacing-2-5: 0.625rem; --spacing-3: 0.75rem; --spacing-3-5: 0.875rem; --spacing-4: 1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-7: 1.75rem; --spacing-8: 2rem; --spacing-9: 2.25rem; --spacing-10: 2.5rem; --spacing-11: 2.75rem; --spacing-12: 3rem; --spacing-14: 3.5rem; --spacing-16: 4rem; --spacing-20: 5rem; --spacing-24: 6rem; --spacing-28: 7rem; --spacing-32: 8rem; /* ═══════════════════════════════════════════════ CONTAINER ═══════════════════════════════════════════════ */ --container-width: 1280px; --container-padding: max(1.5rem, min(4vw, 3rem)); --container-padding-sm: max(1rem, min(3vw, 1.5rem)); /* ═══════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════ */ --header-height: 80px; --header-height-mobile: 64px; --header-padding-x: max(1.25rem, min(4vw, 2.5rem)); --header-padding-x-mobile: 1rem; --header-gap: 1.5rem; --header-bg: transparent; --header-bg-scrolled: rgba(10, 8, 6, 0.92); --header-blur: 16px; --header-shadow: 0 2px 24px rgba(0, 0, 0, 0.28); /* ═══════════════════════════════════════════════ LOGO ═══════════════════════════════════════════════ */ --logo-height: 48px; --logo-height-scrolled: 40px; --logo-height-tablet: 42px; --logo-height-scrolled-tablet: 36px; --logo-height-mobile: 36px; --logo-height-scrolled-mobile: 30px; --logo-height-small-mobile: 30px; --logo-height-scrolled-small-mobile: 26px; /* ═══════════════════════════════════════════════ SHADOWS — Premium Soft ═══════════════════════════════════════════════ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.04); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.08); --shadow-2xl: 0 16px 64px rgba(0, 0, 0, 0.10); --shadow-gold: 0 8px 40px rgba(212, 175, 55, 0.12); --shadow-gold-lg: 0 12px 56px rgba(212, 175, 55, 0.15); /* ═══════════════════════════════════════════════ BORDER RADIUS ═══════════════════════════════════════════════ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ═══════════════════════════════════════════════ TRANSITIONS ═══════════════════════════════════════════════ */ --transition-fast: 0.15s ease; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); --transition-slower: 0.8s cubic-bezier(0.22, 1, 0.36, 1); --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* ═══════════════════════════════════════════════ Z-INDEX ═══════════════════════════════════════════════ */ --z-0: 0; --z-1: 10; --z-2: 20; --z-3: 30; --z-4: 40; --z-5: 50; --z-header: 100; --z-modal: 200; --z-tooltip: 300; --z-overlay: 400; /* ═══════════════════════════════════════════════ BLUR ═══════════════════════════════════════════════ */ --blur-sm: 4px; --blur-md: 8px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; } /* ================================================== LUBAN COFFEE — RESET v2.0 ================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: #F5EFE8; background: var(--color-cream); font-family: "Poppins", "Inter", "Segoe UI", Arial, Helvetica, sans-serif; font-family: var(--font-body); font-size: 16px; } body { font-family: "Poppins", "Inter", "Segoe UI", Arial, Helvetica, sans-serif; font-family: var(--font-body); font-size: clamp(1rem, 0.12vw + 0.96rem, 1.125rem); font-size: var(--font-size-base); line-height: 1.75; line-height: var(--line-height-relaxed); color: #1A1410; color: var(--color-text); background-color: #F5EFE8; background-color: var(--color-cream); min-height: 100vh; min-height: 100dvh; overflow-x: hidden; } img, video, picture, svg { display: block; max-width: 100%; height: auto; } a:not(.lc-navigation__link):not(.btn):not(.lc-button) { color: #D4AF37; color: var(--color-gold); -webkit-text-decoration: none; text-decoration: none; transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: color var(--transition); } a:not(.lc-navigation__link):not(.btn):not(.lc-button):hover { color: #E8C97A; color: var(--color-gold-light); } button { cursor: pointer; font-family: inherit; font-size: inherit; border: none; background: none; color: inherit; } ul, ol { list-style: none; } ::-moz-selection { background: #D4AF37; background: var(--color-gold); color: #FFFFFF; color: var(--color-white); } ::selection { background: #D4AF37; background: var(--color-gold); color: #FFFFFF; color: var(--color-white); } :focus-visible { outline: 2px solid #D4AF37; outline: 2px solid var(--color-gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ================================================== LUBAN COFFEE — TYPOGRAPHY v2.0 ================================================== */ body, button, input, textarea, select { font-family: "Poppins", "Inter", "Segoe UI", Arial, Helvetica, sans-serif; font-family: var(--font-body); } /* ═══════════════════════════════════════════════════ HEADINGS — Editorial Luxury ═══════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { margin: 0; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-family: var(--font-display); font-weight: 500; font-weight: var(--font-weight-medium); line-height: 1.05; line-height: var(--line-height-tight); letter-spacing: -0.02em; letter-spacing: var(--tracking-tight); color: #1A1410; color: var(--color-text); text-wrap: balance; } h1 { font-size: clamp(4.5rem, 1vw + 4rem, 6rem); font-size: var(--font-size-6xl); font-weight: 500; font-weight: var(--font-weight-medium); line-height: 1.05; line-height: var(--line-height-tight); } h2 { font-size: clamp(2.75rem, 0.6vw + 2.55rem, 3.5rem); font-size: var(--font-size-4xl); font-weight: 500; font-weight: var(--font-weight-medium); line-height: 1.05; line-height: var(--line-height-tight); } h3 { font-size: clamp(2.25rem, 0.45vw + 2.1rem, 2.75rem); font-size: var(--font-size-3xl); font-weight: 500; font-weight: var(--font-weight-medium); line-height: 1.1; line-height: var(--line-height-snug); } h4 { font-size: clamp(1.5rem, 0.25vw + 1.42rem, 1.875rem); font-size: var(--font-size-xl); font-weight: 600; font-weight: var(--font-weight-semibold); line-height: 1.5; line-height: var(--line-height-normal); letter-spacing: 0; letter-spacing: var(--tracking-normal); } h5 { font-size: clamp(1.25rem, 0.18vw + 1.2rem, 1.5rem); font-size: var(--font-size-lg); font-weight: 600; font-weight: var(--font-weight-semibold); line-height: 1.5; line-height: var(--line-height-normal); } h6 { font-family: "Poppins", "Inter", "Segoe UI", Arial, Helvetica, sans-serif; font-family: var(--font-body); font-size: clamp(0.6875rem, 0.05vw + 0.675rem, 0.75rem); font-size: var(--font-size-xs); font-weight: 600; font-weight: var(--font-weight-semibold); letter-spacing: 0.05em; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #9A8D82; color: var(--color-text-muted); } /* ═══════════════════════════════════════════════════ BODY TEXT ═══════════════════════════════════════════════════ */ p { margin: 0 0 1rem; margin: 0 0 var(--spacing-4); font-family: "Poppins", "Inter", "Segoe UI", Arial, Helvetica, sans-serif; font-family: var(--font-body); font-size: clamp(1rem, 0.12vw + 0.96rem, 1.125rem); font-size: var(--font-size-base); font-weight: 400; font-weight: var(--font-weight-regular); line-height: 1.75; line-height: var(--line-height-relaxed); color: #4A3D35; color: var(--color-text-light); } /* ═══════════════════════════════════════════════════ LINKS — Non-Navigation Only ═══════════════════════════════════════════════════ */ a:not(.lc-navigation__link):not(.btn):not(.lc-button) { color: #D4AF37; color: var(--color-gold); -webkit-text-decoration: none; text-decoration: none; transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: color var(--transition); } a:not(.lc-navigation__link):not(.btn):not(.lc-button):hover { color: #E8C97A; color: var(--color-gold-light); } /* ═══════════════════════════════════════════════════ LISTS ═══════════════════════════════════════════════════ */ ul, ol { margin: 0 0 1rem; margin: 0 0 var(--spacing-4); padding-left: 1.5rem; padding-left: var(--spacing-6); } li { margin-bottom: 0.5rem; margin-bottom: var(--spacing-2); font-family: "Poppins", "Inter", "Segoe UI", Arial, Helvetica, sans-serif; font-family: var(--font-body); font-size: clamp(1rem, 0.12vw + 0.96rem, 1.125rem); font-size: var(--font-size-base); color: #4A3D35; color: var(--color-text-light); } /* ═══════════════════════════════════════════════════ EDITORIAL TYPE UTILITIES ═══════════════════════════════════════════════════ */ /* Large luxury display — for hero titles */ .lc-type-display { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-family: var(--font-display); font-size: clamp(5rem, 1.2vw + 4.5rem, 7rem); font-size: var(--font-size-7xl); font-weight: 500; font-weight: var(--font-weight-medium); line-height: 1.05; line-height: var(--line-height-tight); letter-spacing: -0.04em; letter-spacing: var(--tracking-tighter); color: #F5EFE8; color: var(--color-text-inverse); } /* Small editorial eyebrow — for section labels */ .lc-type-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; gap: var(--spacing-2); font-family: "Poppins", "Inter", "Segoe UI", Arial, Helvetica, sans-serif; font-family: var(--font-body); font-size: clamp(0.6875rem, 0.05vw + 0.675rem, 0.75rem); font-size: var(--font-size-xs); font-weight: 500; font-weight: var(--font-weight-medium); letter-spacing: 0.2em; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: #D4AF37; color: var(--color-gold); } .lc-type-eyebrow::before, .lc-type-eyebrow::after { content: ''; width: 34px; height: 1px; background: #D4AF37; background: var(--color-gold); opacity: 0.3; } /* Luxury supporting statement — for brand story */ .lc-type-lead { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-family: var(--font-display); font-size: clamp(1.5rem, 0.25vw + 1.42rem, 1.875rem); font-size: var(--font-size-xl); font-weight: 400; font-weight: var(--font-weight-regular); line-height: 1.1; line-height: var(--line-height-snug); letter-spacing: -0.02em; letter-spacing: var(--tracking-tight); color: #1A1410; color: var(--color-text); } /* Metadata — for small details */ .lc-type-meta { font-family: "Poppins", "Inter", "Segoe UI", Arial, Helvetica, sans-serif; font-family: var(--font-body); font-size: clamp(0.6875rem, 0.05vw + 0.675rem, 0.75rem); font-size: var(--font-size-xs); font-weight: 500; font-weight: var(--font-weight-medium); letter-spacing: 0.05em; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #9A8D82; color: var(--color-text-muted); } /* Gold text utility */ .lc-type-gold { color: #D4AF37; color: var(--color-gold); } /* White text utility */ .lc-type-white { color: #F5EFE8; color: var(--color-text-inverse); } /* Inverse text utility */ .lc-type-inverse { color: #F5EFE8; color: var(--color-text-inverse); } /* ═══════════════════════════════════════════════════ TEXT UTILITIES ═══════════════════════════════════════════════════ */ .lc-text-center { text-align: center; } .lc-text-left { text-align: left; } .lc-text-right { text-align: right; } .lc-text-uppercase { text-transform: uppercase; } .lc-text-lowercase { text-transform: lowercase; } .lc-text-capitalize { text-transform: capitalize; } .lc-text-balance { text-wrap: balance; } .lc-text-nowrap { white-space: nowrap; } /* ================================================== LUBAN COFFEE — UTILITIES ================================================== */ /* ═══════════════════════════════════════════════════ SPACING ═══════════════════════════════════════════════════ */ .m-0 { margin: 0; } .m-1 { margin: 8px; } .m-2 { margin: 16px; } .m-3 { margin: 24px; } .m-4 { margin: 32px; } .p-0 { padding: 0; } .p-1 { padding: 8px; } .p-2 { padding: 16px; } .p-3 { padding: 24px; } .p-4 { padding: 32px; } /* ═══════════════════════════════════════════════════ FLEXBOX ═══════════════════════════════════════════════════ */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-center { align-items: center; justify-content: center; } .flex-between { justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } /* ═══════════════════════════════════════════════════ GRID ═══════════════════════════════════════════════════ */ .grid { display: grid; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } /* ═══════════════════════════════════════════════════ WIDTH ═══════════════════════════════════════════════════ */ .w-full { width: 100%; } .w-auto { width: auto; } .w-50 { width: 50%; } /* ═══════════════════════════════════════════════════ GAP ═══════════════════════════════════════════════════ */ .gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; } .gap-4 { gap: 32px; } /* ═══════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } .grid-5 { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════════ */ /* @import 'layout/sections.css'; — EMPTY — REMOVED */ /* ========================================== FOOTER — LUXURY PREMIUM ========================================== */ .lc-footer { position: relative; padding: 80px 0 30px; color: #f3eee5; overflow: hidden; } /* ========================================== CONTAINER ========================================== */ .lc-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 2; } /* ========================================== BACKGROUND ========================================== */ .lc-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #d4af37, #e8c9a6, #d4af37, transparent); z-index: 3; } .lc-footer__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .lc-footer__background img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; display: block; } /* Desktop Overlay: Dark on left, transparent on right (preserves bright sunset) */ .lc-footer__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 60%); z-index: 1; } /* ========================================== CONTENT ========================================== */ .lc-footer__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; grid-gap: 50px; gap: 50px; padding-bottom: 40px; border-bottom: 1px solid rgba(212, 175, 55, 0.08); } /* ========================================== BRAND COLUMN ========================================== */ .lc-footer__brand { max-width: 350px; } /* LOGO — SAME AS HEADER (NO FILTERS!) */ .lc-footer__logo { display: block; width: auto; height: 44px; max-height: 44px; -o-object-fit: contain; object-fit: contain; margin-bottom: 16px; transition: opacity 0.3s ease, transform 0.3s ease; } .lc-footer__logo:hover { opacity: 0.85; transform: scale(1.02); } .lc-footer__tagline { color: rgba(255, 255, 255, 0.4); font-size: 0.9rem; line-height: 1.8; margin-bottom: 20px; font-weight: 300; letter-spacing: 0.02em; } .lc-footer__address { color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; line-height: 1.8; margin-bottom: 12px; font-weight: 300; } .lc-footer__contact-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .lc-footer__contact-info a { color: #d4af37; -webkit-text-decoration: none; text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease; } .lc-footer__contact-info a:hover { color: #e8c9a6; } .lc-footer__divider { color: rgba(255, 255, 255, 0.15); } /* ========================================== SOCIAL ICONS ========================================== */ .lc-footer__social { display: flex; gap: 10px; } .lc-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.3); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid rgba(255, 255, 255, 0.04); -webkit-text-decoration: none; text-decoration: none; } .lc-footer__social-link:hover { background: #d4af37; color: #1a110b; transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 30px rgba(212, 175, 55, 0.25); border-color: #d4af37; } .lc-footer__social-link svg { width: 18px; height: 18px; } /* ========================================== HEADINGS ========================================== */ .lc-footer__links h4, .lc-footer__products h4, .lc-footer__contact h4 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; font-weight: 600; color: #f8f2e8; margin-bottom: 18px; position: relative; padding-bottom: 10px; letter-spacing: 0.05em; } .lc-footer__links h4::after, .lc-footer__products h4::after, .lc-footer__contact h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 35px; height: 2px; background: linear-gradient(90deg, #d4af37, #e8c9a6); border-radius: 2px; } /* ========================================== LINKS ========================================== */ .lc-footer__links ul, .lc-footer__products ul { list-style: none; padding: 0; margin: 0; } .lc-footer__links li, .lc-footer__products li { margin-bottom: 10px; } .lc-footer__links a, .lc-footer__products a { color: rgba(255, 255, 255, 0.6); -webkit-text-decoration: none; text-decoration: none; font-size: 0.9rem; transition: all 0.3s ease; font-weight: 300; letter-spacing: 0.02em; display: inline-block; } .lc-footer__links a::before, .lc-footer__products a::before { content: '→'; opacity: 0; margin-right: 0; transition: all 0.3s ease; color: #d4af37; } .lc-footer__links a:hover, .lc-footer__products a:hover { color: #d4af37; transform: translateX(4px); } .lc-footer__links a:hover::before, .lc-footer__products a:hover::before { opacity: 1; margin-right: 8px; } /* ========================================== CONTACT ========================================== */ .lc-footer__contact address { font-style: normal; font-size: 0.9rem; line-height: 2.2; color: rgba(255, 255, 255, 0.6); font-weight: 300; } .lc-footer__contact address a { color: #d4af37; -webkit-text-decoration: none; text-decoration: none; transition: color 0.3s ease; } .lc-footer__contact address a:hover { color: #e8c9a6; } .lc-footer__contact p { margin: 0; } /* ========================================== FOOTER BOTTOM ========================================== */ .lc-footer__bottom { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding-top: 24px; flex-wrap: wrap; gap: 12px; } .lc-footer__copyright { color: rgba(255, 255, 255, 0.2); font-size: 0.8rem; font-weight: 300; letter-spacing: 0.04em; } .lc-footer__bottom-links { display: flex; align-items: center; gap: 14px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.2); } .lc-footer__bottom-links a { color: rgba(255, 255, 255, 0.3); -webkit-text-decoration: none; text-decoration: none; transition: color 0.3s ease; } .lc-footer__bottom-links a:hover { color: #d4af37; } .lc-footer__bottom-links span { color: rgba(255, 255, 255, 0.1); } /* ========================================== RESPONSIVE ========================================== */ @media (max-width: 1024px) { .lc-footer__grid { grid-template-columns: 1fr 1fr; gap: 35px; } } @media (max-width: 768px) { .lc-footer { padding: 50px 0 20px; } .lc-footer__grid { grid-template-columns: 1fr; gap: 28px; } .lc-footer__brand { max-width: 100%; } .lc-footer__logo { height: 38px; } .lc-footer__bottom { flex-direction: column; text-align: center; } .lc-footer__bottom-links { justify-content: center; flex-wrap: wrap; } .lc-footer__contact-info { justify-content: center; } /* Mobile Overlay: Dark top & bottom, transparent middle */ .lc-footer__overlay { background: linear-gradient( 180deg, rgba(8, 7, 6, 0.85) 0%, rgba(8, 7, 6, 0.2) 40%, rgba(8, 7, 6, 0.2) 60%, rgba(8, 7, 6, 0.95) 100% ); } .lc-footer__social { justify-content: center; } .lc-container { padding: 0 1.5rem; } } @media (max-width: 480px) { .lc-footer__bottom-links { flex-direction: column; gap: 6px; } .lc-footer__bottom-links span { display: none; } .lc-footer__logo { height: 32px; } .lc-container { padding: 0 1rem; } } /* ═══════════════════════════════════════════════════ COMPONENTS ═══════════════════════════════════════════════════ */ /* @import 'components/cards.css'; — EMPTY — REMOVED */ /* @import 'components/forms.css'; — EMPTY — REMOVED */ /* @import 'components/badges.css'; — EMPTY — REMOVED */ /* ═══════════════════════════════════════════════════ SECTIONS ═══════════════════════════════════════════════════ */ /* ========================================================= LUBAN — GOLD SECTION DIVIDER ========================================================= */ .lc-section-divider { position: relative; width: 100%; height: 42px; display: flex; align-items: center; justify-content: center; background: #120904; overflow: hidden; z-index: 10; } /* Main gold line */ .lc-section-divider::before { content: ""; position: absolute; left: 5%; right: 5%; top: 50%; height: 1px; transform: translateY(-50%); background: linear-gradient( 90deg, transparent 0%, rgba(212, 175, 55, 0.08) 8%, rgba(212, 175, 55, 0.45) 25%, #d4af37 50%, rgba(212, 175, 55, 0.45) 75%, rgba(212, 175, 55, 0.08) 92%, transparent 100% ); box-shadow: 0 0 8px rgba(212, 175, 55, 0.16); } /* Center ornament */ .lc-section-divider__ornament { position: relative; width: 9px; height: 9px; background: #120904; border: 1px solid #d4af37; transform: rotate(45deg); box-shadow: 0 0 8px rgba(212, 175, 55, 0.25); z-index: 2; } /* Tiny inner highlight */ .lc-section-divider__ornament::after { content: ""; position: absolute; top: 2px; left: 2px; width: 3px; height: 3px; background: #d4af37; } /* Subtle secondary line */ .lc-section-divider::after { content: ""; position: absolute; left: 12%; right: 12%; top: calc(50% + 5px); height: 1px; background: linear-gradient( 90deg, transparent, rgba(212, 175, 55, 0.10), transparent ); opacity: 0.65; } /* ========================================================= GOLD DIVIDER ANIMATION ========================================================= */ .lc-section-divider.is-visible::before { animation: lcGoldLineReveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) both; } .lc-section-divider.is-visible .lc-section-divider__ornament { animation: lcGoldOrnamentReveal 0.8s 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes lcGoldLineReveal { from { transform: translateY(-50%) scaleX(0); opacity: 0; } to { transform: translateY(-50%) scaleX(1); opacity: 1; } } @keyframes lcGoldOrnamentReveal { from { transform: rotate(45deg) scale(0); opacity: 0; } to { transform: rotate(45deg) scale(1); opacity: 1; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { .lc-section-divider { height: 32px; } .lc-section-divider::before { left: 7%; right: 7%; } .lc-section-divider::after { left: 14%; right: 14%; } .lc-section-divider__ornament { width: 8px; height: 8px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .lc-section-divider.is-visible::before, .lc-section-divider.is-visible .lc-section-divider__ornament { animation: none; } } /* @import 'sections/about.css'; — EMPTY — REMOVED */ /* ========================================== PRODUCTS PREVIEW — Full Styling ========================================== */ .lc-products-preview { padding: 6rem 0; padding: var(--space-4xl, 6rem) 0; background: #FFFFFF; background: var(--color-white, #ffffff); position: relative; } /* Subtle pattern */ .lc-products-preview::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 20% 30%, rgba(212, 165, 116, 0.03) 0%, transparent 60%), radial-gradient(circle at 80% 70%, rgba(212, 165, 116, 0.02) 0%, transparent 60%); pointer-events: none; } /* Header */ .lc-products-preview__header { text-align: center; max-width: 700px; margin: 0 auto 4rem; margin: 0 auto var(--space-3xl, 4rem); } .lc-products-preview__eyebrow { font-size: 0.875rem; font-size: var(--fs-body-sm, 0.875rem); letter-spacing: 0.2em; text-transform: uppercase; color: #D4AF37; color: var(--color-gold, #d4a574); font-weight: 600; font-weight: var(--fw-semibold, 600); background: rgba(212, 165, 116, 0.08); padding: 0.3rem 1.5rem; border-radius: 50px; display: inline-block; } .lc-products-preview__title { font-family: 'Playfair Display', serif; font-family: var(--font-primary, 'Playfair Display', serif); font-size: max(2.5rem, min(5vw, 3.5rem)); font-weight: 700; font-weight: var(--fw-bold, 700); color: #0A0806; color: var(--color-primary, #1a110b); margin: 1rem 0; margin: var(--space-md, 1rem) 0; line-height: 1.05; line-height: var(--line-height-tight, 1.1); } .lc-products-preview__title .highlight { color: #D4AF37; color: var(--color-gold, #d4a574); } .lc-products-preview__subtitle { font-size: 1.125rem; font-size: var(--fs-body-lg, 1.125rem); color: #9A8D82; color: var(--color-text-muted, #8b7a6a); line-height: 1.75; line-height: var(--line-height-relaxed, 1.75); max-width: 600px; margin: 0 auto; } /* Grid */ .lc-products-preview__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem; grid-gap: var(--space-xl, 2rem); gap: 2rem; gap: var(--space-xl, 2rem); } /* Product Cards */ .lc-product-card { background: #FFFFFF; background: var(--color-white, #ffffff); border-radius: 16px; border-radius: var(--border-radius-lg, 16px); overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); border: 1px solid rgba(212, 165, 116, 0.08); } .lc-product-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(212, 165, 116, 0.12); border-color: rgba(212, 165, 116, 0.15); } /* Image */ .lc-product-card__image-wrap { position: relative; overflow: hidden; padding-top: 75%; background: linear-gradient(135deg, #f5ede4, #e8ddd0); } .lc-product-card__image-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.6s ease; } .lc-product-card:hover .lc-product-card__image-wrap img { transform: scale(1.06); } .lc-product-card__image-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to top, rgba(0, 0, 0, 0.08), transparent); pointer-events: none; } /* Badges */ .lc-product-card__badge { position: absolute; top: 1rem; right: 1rem; padding: 0.3rem 1.2rem; border-radius: 50px; font-size: 0.7rem; font-weight: 600; font-weight: var(--fw-semibold, 600); text-transform: uppercase; letter-spacing: 0.06em; z-index: 2; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .lc-product-card__badge--best { background: linear-gradient(135deg, #f7971e, #ffd200); color: #1a110b; } .lc-product-card__badge--premium { background: linear-gradient(135deg, #b8860b, #d4a574); color: #fff; } .lc-product-card__badge--classic { background: linear-gradient(135deg, #2d1f14, #5a3d28); color: #fff; } /* Body */ .lc-product-card__body { padding: 1.5rem; padding: var(--space-lg, 1.5rem); background: #FFFFFF; background: var(--color-white, #ffffff); } .lc-product-card__name { font-family: 'Playfair Display', serif; font-family: var(--font-primary, 'Playfair Display', serif); font-size: 1.25rem; font-size: var(--fs-body-xl, 1.25rem); font-weight: 700; font-weight: var(--fw-bold, 700); color: #1A1410; color: var(--color-text, #2d1f14); margin-bottom: 0.25rem; margin-bottom: var(--space-xs, 0.25rem); transition: color 0.3s ease; } .lc-product-card:hover .lc-product-card__name { color: #B8942A; color: var(--color-gold-dark, #b8860b); } .lc-product-card__origin { font-size: 0.875rem; font-size: var(--fs-body-sm, 0.875rem); color: #D4AF37; color: var(--color-gold, #d4a574); font-weight: 500; font-weight: var(--fw-medium, 500); margin-bottom: 0.5rem; margin-bottom: var(--space-sm, 0.5rem); display: flex; align-items: center; gap: 0.3rem; } .lc-product-card__description { font-size: 0.9375rem; font-size: var(--fs-body-md, 0.9375rem); color: #9A8D82; color: var(--color-text-muted, #8b7a6a); line-height: 1.75; line-height: var(--line-height-relaxed, 1.75); margin-bottom: 1rem; margin-bottom: var(--space-md, 1rem); } /* Footer */ .lc-product-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; padding-top: var(--space-md, 1rem); border-top: 1px solid rgba(212, 165, 116, 0.08); } .lc-product-card__price { font-family: 'Playfair Display', serif; font-family: var(--font-primary, 'Playfair Display', serif); font-size: 1.25rem; font-size: var(--fs-body-xl, 1.25rem); font-weight: 700; font-weight: var(--fw-bold, 700); color: #0A0806; color: var(--color-primary, #1a110b); } .lc-product-card__price::before { content: '$'; font-size: 0.8rem; color: #D4AF37; color: var(--color-gold, #d4a574); margin-right: 2px; } .lc-product-card__link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-size: var(--fs-body-sm, 0.875rem); font-weight: 500; font-weight: var(--fw-medium, 500); color: #D4AF37; color: var(--color-gold, #d4a574); -webkit-text-decoration: none; text-decoration: none; transition: all 0.3s ease; } .lc-product-card__link:hover { color: #B8942A; color: var(--color-gold-dark, #b8860b); gap: 0.8rem; } .lc-product-card__link svg { width: 16px; height: 16px; transition: transform 0.3s ease; } .lc-product-card__link:hover svg { transform: translateX(4px); } /* CTA */ .lc-products-preview__cta { text-align: center; margin-top: 4rem; margin-top: var(--space-3xl, 4rem); } .lc-products-preview__cta .lc-button { min-width: 200px; padding: 1rem 2.5rem; background: transparent; border: 2px solid #D4AF37; border: 2px solid var(--color-gold, #d4a574); color: #0A0806; color: var(--color-primary, #1a110b); transition: all 0.4s ease; } .lc-products-preview__cta .lc-button:hover { background: #D4AF37; background: var(--color-gold, #d4a574); color: #FFFFFF; color: var(--color-white, #ffffff); transform: translateY(-3px); box-shadow: 0 8px 40px rgba(212, 165, 116, 0.25); } /* ========================================== RESPONSIVE ========================================== */ @media (max-width: 768px) { .lc-products-preview__grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } } @media (max-width: 480px) { .lc-products-preview { padding: 2rem 0; padding: var(--space-xl, 2rem) 0; } .lc-products-preview__grid { grid-template-columns: 1fr; gap: 1rem; gap: var(--space-md, 1rem); } .lc-products-preview__cta .lc-button { width: 100%; min-width: auto; } .lc-product-card__body { padding: 1rem; padding: var(--space-md, 1rem); } } /* @import 'sections/export.css'; — EMPTY — REMOVED */ /* @import 'sections/quality.css'; — EMPTY — REMOVED */ /* @import 'sections/contact.css'; — EMPTY — REMOVED */ /* ========================================== CTA SECTION — BOLD & PREMIUM ========================================== */ .lc-cta { padding: 6rem 0; padding: var(--space-4xl, 6rem) 0; background: linear-gradient(135deg, #0A0806, #040302); background: linear-gradient(135deg, var(--color-primary, #1a110b), var(--color-primary-dark, #0d0805)); color: #FFFFFF; color: var(--color-white, #ffffff); text-align: center; position: relative; overflow: hidden; min-height: 100vh; /* Ensures full viewport height */ display: flex; align-items: flex-end; /* Shifts content to bottom */ } /* ─── BACKGROUND IMAGE ─── */ .lc-cta__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; } .lc-cta__background img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; opacity: 0.45; filter: brightness(1.2) contrast(1.1); display: block; } .lc-cta__background__bg-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(5, 5, 5, 0.15) 0%, rgba(5, 5, 5, 0.35) 40%, rgba(5, 5, 5, 0.70) 100% ); z-index: 1; } /* Decorative elements */ .lc-cta::before { content: '☕'; position: absolute; font-size: 30rem; opacity: 0.03; right: -10%; top: -30%; transform: rotate(30deg); pointer-events: none; z-index: 1; } .lc-cta::after { content: '★'; position: absolute; font-size: 20rem; opacity: 0.02; left: -5%; bottom: -30%; transform: rotate(-20deg); pointer-events: none; z-index: 1; } /* Gold sparkle overlay */ .lc-cta .lc-cta__sparkle { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(2px 2px at 20% 30%, rgba(212, 165, 116, 0.1), transparent), radial-gradient(2px 2px at 40% 70%, rgba(212, 165, 116, 0.08), transparent), radial-gradient(1px 1px at 60% 20%, rgba(212, 165, 116, 0.12), transparent), radial-gradient(1px 1px at 80% 60%, rgba(212, 165, 116, 0.06), transparent); background-size: 200px 200px; pointer-events: none; animation: sparkle 60s linear infinite; z-index: 1; } @keyframes sparkle { 0% { background-position: 0 0; } 100% { background-position: 200px 200px; } } .lc-cta__content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; padding-bottom: 3rem; padding-bottom: var(--space-2xl, 3rem); /* Adds extra bottom padding */ } /* ─── EYEBROW ─── */ .lc-cta__eyebrow { display: flex; align-items: center; justify-content: center; gap: 0.75rem; gap: var(--space-sm, 0.75rem); font-size: 0.875rem; font-size: var(--fs-body-sm, 0.875rem); text-transform: uppercase; letter-spacing: 0.2em; color: #D4AF37; color: var(--color-gold, #d4a574); margin-bottom: 0.75rem; margin-bottom: var(--space-sm, 0.75rem); font-weight: 500; font-weight: var(--fw-medium, 500); } .lc-cta__eyebrow span { display: inline-block; width: 40px; height: 1px; background: #D4AF37; background: var(--color-gold, #d4a574); opacity: 0.4; } .lc-cta__icon { font-size: 4rem; margin-bottom: 1rem; margin-bottom: var(--space-md, 1rem); display: inline-block; animation: pulseIcon 3s ease-in-out infinite; } @keyframes pulseIcon { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } } .lc-cta__title { font-family: 'Playfair Display', serif; font-family: var(--font-primary, 'Playfair Display', serif); font-size: max(2.5rem, min(5vw, 3.8rem)); font-weight: 700; font-weight: var(--fw-bold, 700); color: #FFFFFF; color: var(--color-white, #ffffff); margin-bottom: 1rem; margin-bottom: var(--space-md, 1rem); line-height: 1.05; line-height: var(--line-height-tight, 1.1); } .lc-cta__title .highlight { color: #D4AF37; color: var(--color-gold, #d4a574); } .lc-cta__title span { color: #D4AF37; color: var(--color-gold, #d4a574); } .lc-cta__description { font-size: 1.125rem; font-size: var(--fs-body-lg, 1.125rem); color: rgba(255, 255, 255, 0.7); line-height: 1.75; line-height: var(--line-height-relaxed, 1.8); max-width: 600px; margin: 0 auto 2rem; margin: 0 auto var(--space-xl, 2rem); } .lc-cta__actions { display: flex; gap: 1rem; gap: var(--space-md, 1rem); justify-content: center; flex-wrap: wrap; } .lc-cta__actions .lc-button { min-width: 200px; padding: 1rem 2.5rem; font-size: 1rem; font-size: var(--fs-body-md, 1rem); font-weight: 600; font-weight: var(--fw-semibold, 600); border-radius: 50px; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-text-decoration: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: none; font-family: inherit; } .lc-cta__actions .lc-button--primary { background: linear-gradient(135deg, #B8942A, #D4AF37); background: linear-gradient(135deg, var(--color-gold-dark, #b8860b), var(--color-gold, #d4a574)); border: none; box-shadow: 0 8px 40px rgba(184, 134, 11, 0.3); color: #FFFFFF; color: var(--color-white, #ffffff); } .lc-cta__actions .lc-button--primary:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 15px 60px rgba(184, 134, 11, 0.4); background: linear-gradient(135deg, #D4AF37, #E8C97A); background: linear-gradient(135deg, var(--color-gold, #d4a574), var(--color-gold-light, #e8c9a6)); } .lc-cta__actions .lc-button--secondary { background: transparent; border: 2px solid rgba(255, 255, 255, 0.3); color: #FFFFFF; color: var(--color-white, #ffffff); } .lc-cta__actions .lc-button--secondary:hover { background: rgba(255, 255, 255, 0.05); border-color: #D4AF37; border-color: var(--color-gold, #d4a574); transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } .lc-cta__actions .lc-button--large { padding: 1.125rem 3rem; font-size: 1.125rem; font-size: var(--fs-body-lg, 1.125rem); } /* Container */ .lc-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; padding: 0 var(--space-lg, 2rem); position: relative; z-index: 2; width: 100%; /* Ensures full width for alignment */ } /* Responsive */ @media (max-width: 768px) { .lc-cta { padding: 3rem 0; padding: var(--space-2xl, 3rem) 0; min-height: 90vh; /* Slightly reduced on tablet */ } .lc-cta__content { padding-bottom: 2rem; padding-bottom: var(--space-xl, 2rem); } .lc-cta__actions { flex-direction: column; align-items: center; width: 100%; } .lc-cta__actions .lc-button { width: 100%; max-width: 300px; min-width: 0; min-width: initial; } .lc-cta__icon { font-size: 3rem; } .lc-cta__eyebrow { font-size: 0.75rem; font-size: var(--fs-body-xs, 0.75rem); gap: 0.5rem; gap: var(--space-xs, 0.5rem); } .lc-cta__eyebrow span { width: 25px; } .lc-container { padding: 0 1rem; padding: 0 var(--space-md, 1rem); } } @media (max-width: 480px) { .lc-cta { min-height: 85vh; /* Further reduced on mobile */ } .lc-cta__content { padding-bottom: 1.5rem; padding-bottom: var(--space-lg, 1.5rem); } .lc-cta__actions .lc-button { max-width: 280px; padding: 0.875rem 1.5rem; font-size: 0.925rem; font-size: var(--fs-body-sm, 0.925rem); } .lc-cta__actions .lc-button--large { padding: 0.875rem 1.5rem; } .lc-cta__title { font-size: max(1.8rem, min(6vw, 2.2rem)); } .lc-cta__background img { opacity: 0.3; } } /* @import 'sections/testimonials.css'; — EMPTY — REMOVED */ /* ================================================== WHY CHOOSE US — FIXED ================================================== */ .lc-choose { padding: 80px 0; background: #faf7f1; background: var(--section-light, #faf7f1); color: #1A1410; color: var(--color-text, #1a110b); position: relative; overflow: hidden; } /* ========================================== RAINING BEANS ========================================== */ .lc-choose .rain-bean-1, .lc-choose .rain-bean-2, .lc-choose .rain-bean-3, .lc-choose .rain-bean-4, .lc-choose .rain-bean-5, .lc-choose .rain-bean-6, .lc-choose .rain-bean-7, .lc-choose .rain-bean-8, .lc-choose .rain-bean-9, .lc-choose .rain-bean-10 { position: absolute; width: 28px; height: auto; opacity: 0.1; pointer-events: none; z-index: 0; } .rain-bean-1 { top: 10%; left: 5%; animation: rainBean 12s linear infinite; } .rain-bean-2 { top: 20%; left: 15%; animation: rainBean 14s linear infinite 1s; } .rain-bean-3 { top: 30%; left: 85%; animation: rainBean 11s linear infinite 2s; } .rain-bean-4 { top: 40%; left: 75%; animation: rainBean 13s linear infinite 0.5s; } .rain-bean-5 { top: 50%; left: 10%; animation: rainBean 15s linear infinite 3s; } .rain-bean-6 { top: 60%; left: 90%; animation: rainBean 12s linear infinite 1.5s; } .rain-bean-7 { top: 70%; left: 20%; animation: rainBean 14s linear infinite 2.5s; } .rain-bean-8 { top: 80%; left: 80%; animation: rainBean 11s linear infinite 0.8s; } .rain-bean-9 { top: 90%; left: 30%; animation: rainBean 13s linear infinite 3.5s; } .rain-bean-10 { top: 15%; left: 95%; animation: rainBean 15s linear infinite 4s; } @keyframes rainBean { 0% { transform: translateY(-40px) rotate(0deg) scale(0.5); opacity: 0; } 10% { opacity: 0.1; } 90% { opacity: 0.1; } 100% { transform: translateY(calc(100vh + 40px)) rotate(720deg) scale(0.8); opacity: 0; } } /* ========================================== HEADER ========================================== */ .lc-choose__header { text-align: center; margin-bottom: 48px; position: relative; z-index: 1; } .lc-choose__eyebrow { color: #D4AF37; color: var(--color-gold, #d4af37); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 12px; } .lc-choose__title { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--font-primary, "Cormorant Garamond", Georgia, serif); font-size: max(28px, min(3.5vw, 44px)); font-weight: 500; color: #1A1410; color: var(--color-text, #1a110b); margin-bottom: 12px; } .lc-choose__subtitle { color: #9A8D82; color: var(--color-text-muted, rgba(26, 17, 11, 0.7)); max-width: 600px; margin: 0 auto; font-size: 1rem; line-height: 1.6; } /* ========================================== GRID ========================================== */ .lc-choose__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px; gap: 30px; margin-bottom: 48px; position: relative; z-index: 1; } /* ========================================== CARDS ========================================== */ .lc-choose__card { background: #FFFFFF; background: var(--color-white, #ffffff); padding: 40px 30px; border-radius: 12px; border: 1px solid rgba(212, 175, 55, 0.08); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; } .lc-choose__card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); } .lc-choose__card-number { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--font-primary, "Cormorant Garamond", Georgia, serif); font-size: 0.8rem; color: rgba(212, 175, 55, 0.3); letter-spacing: 0.1em; display: block; margin-bottom: 8px; } .lc-choose__icon-wrapper { display: flex; justify-content: center; align-items: center; margin-bottom: 16px; } .lc-choose__icon { font-size: 2.2rem; display: block; } .lc-choose__card-title { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--font-primary, "Cormorant Garamond", Georgia, serif); font-size: 1.2rem; font-weight: 600; color: #1A1410; color: var(--color-text, #1a110b); margin-bottom: 8px; } .lc-choose__card-text { color: #9A8D82; color: var(--color-text-muted, rgba(26, 17, 11, 0.7)); font-size: 0.9rem; line-height: 1.7; margin: 0; } /* ========================================== CTA ========================================== */ .lc-choose__cta { text-align: center; position: relative; z-index: 1; } /* ========================================== RESPONSIVE ========================================== */ @media (max-width: 900px) { .lc-choose__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 768px) { .lc-choose { padding: 60px 0; } .lc-choose__grid { grid-template-columns: 1fr; gap: 20px; } .lc-choose__card { padding: 30px 20px; } .lc-choose .rain-bean-1, .lc-choose .rain-bean-2, .lc-choose .rain-bean-3, .lc-choose .rain-bean-4, .lc-choose .rain-bean-5, .lc-choose .rain-bean-6, .lc-choose .rain-bean-7, .lc-choose .rain-bean-8, .lc-choose .rain-bean-9, .lc-choose .rain-bean-10 { display: none; } } @media (max-width: 480px) { .lc-choose__title { font-size: 26px; } .lc-choose__card { padding: 24px 16px; } } /* ========================================================= LUBAN — SECTION 04 COFFEE COLLECTION ========================================================= */ .origin-product-image { height: 390px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .origin-product-image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: center bottom; object-position: center bottom; transform: scale(.92); transition: transform 800ms cubic-bezier(.22,.61,.36,1), filter 600ms ease; } .origin-card:hover .origin-product-image img { transform: scale(.98) translateY(-5px); } .coffee-collection { position: relative; overflow: hidden; min-height: 100vh; padding: 150px max(24px, min(5vw, 90px)) 130px; background: #120904; color: #fff; isolation: isolate; } .collection-atmosphere { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -5; background: linear-gradient( 180deg, rgba(18, 9, 4, .38) 0%, rgba(18, 9, 4, .48) 30%, rgba(18, 9, 4, .72) 68%, #120904 100% ), url("../assets/images/farm-photo.webp"); background-size: cover; background-position: center center; transform: scale(1.03); } .collection-atmosphere::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient( ellipse at 50% 25%, rgba(212, 175, 55, .12), transparent 42% ), linear-gradient( 90deg, rgba(18, 9, 4, .55), transparent 42%, rgba(18, 9, 4, .48) ); pointer-events: none; } /* ========================================================= LIGHT SOURCES ========================================================= */ .collection-glow { position: absolute; width: 550px; height: 550px; border-radius: 50%; pointer-events: none; filter: blur(100px); z-index: -3; } .collection-glow-one { top: 8%; left: 50%; transform: translateX(-50%); background: rgba(102, 53, 18, .13); } .collection-glow-two { right: -250px; bottom: 5%; background: rgba(212, 175, 55, .025); } /* ========================================================= GRAIN ========================================================= */ .collection-grain { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .025; pointer-events: none; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } /* ========================================================= CONTAINER ========================================================= */ .collection-container { position: relative; width: 100%; max-width: 1500px; margin: 0 auto; z-index: 2; } /* ========================================================= HEADING ========================================================= */ .collection-header { text-align: center; max-width: 900px; margin: 0 auto max(70px, min(8vw, 115px)); } .collection-eyebrow { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 25px; color: #D4AF37; font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .38em; text-transform: uppercase; } .eyebrow-line { width: 45px; height: 1px; background: linear-gradient( 90deg, transparent, #D4AF37 ); } .eyebrow-line:last-child { background: linear-gradient( 90deg, #D4AF37, transparent ); } .collection-title { margin: 0; color: #f5f0e8; font-family: "Cormorant Garamond", Georgia, serif; font-size: max(48px, min(5.5vw, 88px)); font-weight: 500; line-height: .93; letter-spacing: -.025em; } .collection-title span { display: block; color: #f5f0e8; } .collection-title em { display: block; color: #D4AF37; font-style: italic; } .collection-intro { max-width: 540px; margin: 30px auto 0; color: rgba(255,255,255,.68); font-family: "Poppins", sans-serif; font-size: max(13px, min(1.1vw, 16px)); font-weight: 300; line-height: 1.8; letter-spacing: .03em; } .collection-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 32px; } .collection-divider span { width: 55px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(212,175,55,.75) ); } .collection-divider span:last-child { background: linear-gradient( 90deg, rgba(212,175,55,.75), transparent ); } .collection-divider i { color: #D4AF37; font-size: 12px; font-style: normal; } /* ========================================================= FIVE CARD GRID ========================================================= */ .origin-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; grid-gap: max(10px, min(1.4vw, 24px)); gap: max(10px, min(1.4vw, 24px)); max-width: 1400px; margin: 0 auto; } /* ========================================================= CARD ========================================================= */ .origin-card { position: relative; min-width: 0; height: 590px; overflow: hidden; border: 1px solid rgba(212,175,55,.30); background: #0b0603; transition: transform .65s cubic-bezier(.22,.61,.36,1), border-color .5s ease, box-shadow .65s ease; isolation: isolate; } .origin-card:hover { transform: translateY(-10px); border-color: rgba(212,175,55,.8); box-shadow: 0 25px 70px rgba(0,0,0,.55), 0 0 30px rgba(212,175,55,.08); } /* ========================================================= FEATURED CARD ========================================================= */ .origin-card-featured { height: 650px; border-color: rgba(212,175,55,.72); transform: translateY(-25px); box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 35px rgba(212,175,55,.07); } .origin-card-featured:hover { transform: translateY(-38px); border-color: #D4AF37; box-shadow: 0 35px 80px rgba(0,0,0,.6), 0 0 45px rgba(212,175,55,.12); } /* ========================================================= FEATURED LABEL ========================================================= */ .featured-label { position: absolute; top: 0; right: 0; z-index: 8; padding: 8px 14px; background: #D4AF37; color: #120904; font-family: "Poppins", sans-serif; font-size: 8px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } /* ========================================================= IMAGE ========================================================= */ .origin-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -1; } .origin-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transform: scale(1.02); filter: saturate(.82) contrast(1.05) brightness(.78); transition: transform 1.2s cubic-bezier(.22,.61,.36,1), filter .8s ease; } .origin-card:hover .origin-image img { transform: scale(1.09); filter: saturate(1) contrast(1.05) brightness(.92); } /* ========================================================= IMAGE GRADIENT ========================================================= */ .origin-image-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient( 180deg, rgba(10,5,2,.08) 0%, rgba(10,5,2,.15) 28%, rgba(10,5,2,.62) 56%, rgba(10,5,2,.98) 100% ); transition: background .7s ease; } .origin-card:hover .origin-image-overlay { background: linear-gradient( 180deg, rgba(10,5,2,.04) 0%, rgba(10,5,2,.10) 25%, rgba(10,5,2,.55) 54%, rgba(10,5,2,.94) 100% ); } /* ========================================================= GOLD LIGHT SWEEP ========================================================= */ .origin-card::after { content: ""; position: absolute; top: -30%; left: -80%; width: 45%; height: 170%; z-index: 6; pointer-events: none; background: linear-gradient( 90deg, transparent, rgba(212,175,55,.12), rgba(255,220,100,.20), transparent ); transform: rotate(18deg) translateX(0); transition: transform 1s cubic-bezier(.22,.61,.36,1); } .origin-card:hover::after { transform: rotate(18deg) translateX(470%); } /* ========================================================= ICON ========================================================= */ .origin-icon { position: absolute; top: 25px; left: 25px; width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(212,175,55,.55); border-radius: 50%; color: #D4AF37; font-family: Georgia, serif; font-size: 19px; background: rgba(18,9,4,.38); backdrop-filter: blur(5px); transition: transform .5s ease, background .5s ease; } .origin-card:hover .origin-icon { transform: rotate(12deg) scale(1.08); background: rgba(212,175,55,.10); } /* ========================================================= CONTENT ========================================================= */ .origin-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 27px 28px; z-index: 7; } .origin-number { margin-bottom: 7px; color: rgba(212,175,55,.65); font-family: "Poppins", sans-serif; font-size: 9px; letter-spacing: .22em; } .origin-content h3 { margin: 0; color: #f5f0e8; font-family: "Cormorant Garamond", Georgia, serif; font-size: max(29px, min(2.3vw, 39px)); font-weight: 500; line-height: 1; text-transform: uppercase; } .origin-location { margin: 12px 0 0; color: rgba(255,255,255,.70); font-family: "Poppins", sans-serif; font-size: 8px; font-weight: 500; letter-spacing: .19em; text-transform: uppercase; } .origin-rule { width: 100%; height: 1px; margin: 17px 0; background: linear-gradient( 90deg, rgba(212,175,55,.6), transparent ); } .origin-notes { margin: 0; color: rgba(255,255,255,.84); font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; font-style: italic; line-height: 1.3; } /* ========================================================= ROAST ========================================================= */ .roast-row { display: flex; align-items: center; gap: 11px; margin-top: 18px; } .roast-label { color: rgba(255,255,255,.55); font-family: "Poppins", sans-serif; font-size: 7px; font-weight: 500; letter-spacing: .16em; } .roast-dots { display: flex; align-items: center; gap: 5px; } .roast-dots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(212,175,55,.65); background: transparent; } .roast-dots i.active { background: #D4AF37; box-shadow: 0 0 5px rgba(212,175,55,.25); } /* ========================================================= LINK ========================================================= */ .origin-link { display: flex; align-items: center; justify-content: space-between; margin-top: 23px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.10); color: #D4AF37; font-family: "Poppins", sans-serif; font-size: 9px; font-weight: 500; letter-spacing: .15em; -webkit-text-decoration: none; text-decoration: none; text-transform: uppercase; } .origin-link b { font-size: 18px; font-weight: 300; transition: transform .4s ease; } .origin-link:hover b { transform: translateX(6px); } /* ========================================================= ETHIOPIA FOOTER ========================================================= */ .collection-origin-footer { display: flex; align-items: center; justify-content: center; gap: 25px; margin-top: 90px; } .origin-footer-line { width: max(50px, min(9vw, 150px)); height: 1px; background: linear-gradient( 90deg, transparent, rgba(212,175,55,.65) ); } .origin-footer-line:last-child { background: linear-gradient( 90deg, rgba(212,175,55,.65), transparent ); } .collection-origin-footer p { margin: 0; color: #D4AF37; font-family: "Poppins", sans-serif; font-size: 9px; font-weight: 500; letter-spacing: .32em; text-align: center; } .collection-origin-footer p span { margin: 0 9px; opacity: .65; } /* ========================================================= ETHIOPIA ORIGIN ========================================================= */ .ethiopia-origin { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 35px; overflow: visible; z-index: 5; } /* ========================================================= AFRICA MAP CANVAS ========================================================= */ .ethiopia-map { position: relative; width: 360px; height: 300px; margin: 0 auto; overflow: visible; } /* ========================================================= ETHIOPIA GROUP ========================================================= */ .ethiopia-map-pulse { /* * Ethiopia's position relative * to the Africa map */ position: absolute; top: 48%; left: 70%; width: 100px; height: 100px; transform: translate(-50%, -50%); z-index: 10; overflow: visible; pointer-events: none; } /* ========================================================= AFRICA THIS IS THE MASTER MAP ========================================================= */ .africa-glow-position { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; z-index: 1; overflow: visible; pointer-events: none; } /* ========================================================= ETHIOPIA MAP ========================================================= */ .ethiopia-glow-position { position: absolute; top: 43%; left: 70%; width: 42px; height: 42px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; z-index: 11; overflow: visible; pointer-events: none; } /* ========================================================= ETHIOPIA MAP The Ethiopia SVG/component lives here. ========================================================= */ .ethiopia-glow-position ethiopia-glow { display: block; width: 42px; height: 42px; overflow: visible; } /* ========================================================= ETHIOPIA DOT POSITION This is attached to the Ethiopia map. Therefore when Ethiopia moves, the pulse moves with it. ========================================================= */ .ethiopia-dot-position { position: absolute; top: 43%; left: 70%; width: 42px; height: 42px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; z-index: 20; overflow: visible; pointer-events: none; } /* ========================================================= ETHIOPIA PULSE ANIMATION ========================================================= */ @keyframes ethiopia-pulse { 0% { box-shadow: 0 0 0 0 rgba(212,175,55,.65), 0 0 7px rgba(212,175,55,.9); } 70% { box-shadow: 0 0 0 18px rgba(212,175,55,0), 0 0 15px rgba(212,175,55,.35); } 100% { box-shadow: 0 0 0 24px rgba(212,175,55,0), 0 0 4px rgba(212,175,55,0); } } /* ========================================================= ETHIOPIA DOT COMPONENT ========================================================= */ .ethiopia-dot-position ethiopia-dot { display: block; width: 42px; height: 42px; overflow: visible; } /* ========================================================= ETHIOPIA DOT / RING Your original component is untouched. ========================================================= */ .origin-ethiopia-dot { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; z-index: 12; overflow: visible; pointer-events: none; } /* ========================================== GOLD CENTRAL PULSE ========================================== */ .ethiopia-map-pulse::after { content: ""; position: absolute; top: 48%; left: 62%; width: 5px; height: 5px; transform: translate(-50%, -50%); border-radius: 50%; background: #D4AF37; box-shadow: 0 0 7px rgba(212, 175, 55, .95), 0 0 18px rgba(212, 175, 55, .55); z-index: 20; animation: ethiopia-pulse 2.5s ease-out infinite; } @keyframes ethiopia-pulse { 0% { box-shadow: 0 0 0 0 rgba(212,175,55,.65), 0 0 7px rgba(212,175,55,.9); } 70% { box-shadow: 0 0 0 18px rgba(212,175,55,0), 0 0 15px rgba(212,175,55,.35); } 100% { box-shadow: 0 0 0 24px rgba(212,175,55,0), 0 0 4px rgba(212,175,55,0); } } /* ========================================================= ETHIOPIA LABEL ========================================================= */ .ethiopia-label { display: block; margin-top: 4px; font-family: "Poppins", sans-serif; font-size: 9px; font-weight: 500; line-height: 1; letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; color: #D4AF37; opacity: .95; white-space: nowrap; } /* ========================================================= ETHIOPIA LABEL ========================================================= */ .ethiopia-label { display: block; margin-top: 4px; font-family: "Poppins", sans-serif; font-size: 9px; font-weight: 500; line-height: 1; letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; color: #D4AF37; opacity: .95; white-space: nowrap; } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .ethiopia-map { width: 200px; height: 185px; } .africa-glow-position { width: 170px; height: 170px; } .ethiopia-glow-position, .ethiopia-dot-position { width: 34px; height: 34px; } .ethiopia-glow-position ethiopia-glow, .ethiopia-dot-position ethiopia-dot { width: 34px; height: 34px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 768px) { .ethiopia-map { width: 220px; height: 205px; } .africa-glow-position { width: 185px; height: 185px; } .ethiopia-glow-position, .ethiopia-dot-position { width: 38px; height: 38px; } .ethiopia-glow-position ethiopia-glow, .ethiopia-dot-position ethiopia-dot { width: 38px; height: 38px; } } /* ========================================== PRODUCTS PREVIEW — Cinematic Farm Background ========================================== */ .lc-products-preview { position: relative; min-height: 100vh; min-height: 100dvh; background: #120904; overflow: hidden; isolation: isolate; padding: 0; } /* ========================================== LAYER 01 — Base Canvas ========================================== */ .lc-products-preview__base { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #120904; z-index: 0; } /* ========================================== LAYER 02 — Farm Photograph / Background Image ========================================== */ .lc-products-preview__image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* Use hero poster as background */ background-image: url('/assets/images/farm/farm-photo.webp'); background-position: 55% center; background-size: cover; background-repeat: no-repeat; z-index: 1; background-color: #2a1a0e; } /* If you have a farm image, use this instead: .lc-products-preview__image { background-image: url('/assets/images/farm/farm-photo.webp'); } */ /* ========================================== LAYER 03 — Color Grading ========================================== */ .lc-products-preview__color-grade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; background: linear-gradient( 135deg, rgba(18, 9, 4, 0.25) 0%, rgba(212, 175, 55, 0.08) 30%, rgba(18, 9, 4, 0.15) 60%, rgba(18, 9, 4, 0.30) 100% ); mix-blend-mode: multiply; opacity: 0.6; } /* ========================================== LAYER 04 — Left Dark Gradient ========================================== */ .lc-products-preview__left-gradient { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; background: linear-gradient( 90deg, rgba(18, 9, 4, 0.98) 0%, rgba(18, 9, 4, 0.90) 20%, rgba(18, 9, 4, 0.68) 38%, rgba(18, 9, 4, 0.32) 56%, rgba(18, 9, 4, 0.08) 75%, rgba(18, 9, 4, 0) 100% ); pointer-events: none; } /* ========================================== LAYER 05 — Bottom Gradient ========================================== */ .lc-products-preview__bottom-gradient { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; background: linear-gradient( to bottom, transparent 55%, rgba(18, 9, 4, 0.30) 70%, rgba(18, 9, 4, 0.75) 87%, #120904 100% ); pointer-events: none; } /* ========================================== LAYER 06 — Top Gradient ========================================== */ .lc-products-preview__top-gradient { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; background: linear-gradient( to bottom, #120904 0%, rgba(18, 9, 4, 0.55) 10%, transparent 25% ); pointer-events: none; } /* ========================================== LAYER 07 — Right Gradient ========================================== */ .lc-products-preview__right-gradient { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 6; background: linear-gradient( 270deg, rgba(18, 9, 4, 0.35) 0%, transparent 35% ); pointer-events: none; } /* ========================================== LAYER 08 — Gold Glow ========================================== */ .lc-products-preview__gold-glow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 7; background: radial-gradient( circle at 67% 42%, rgba(212, 175, 55, 0.14) 0%, rgba(212, 175, 55, 0.04) 25%, transparent 52% ); pointer-events: none; } /* ========================================== LAYER 09 — Brown Haze ========================================== */ .lc-products-preview__brown-haze { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 8; background: radial-gradient( ellipse at 50% 65%, rgba(53, 27, 12, 0.35) 0%, transparent 60% ); pointer-events: none; } /* ========================================== LAYER 10 — Vignette ========================================== */ .lc-products-preview__vignette { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9; background: radial-gradient( ellipse at center, transparent 40%, rgba(8, 4, 2, 0.30) 100% ); pointer-events: none; } /* ========================================== LAYER 11 — Film Grain ========================================== */ .lc-products-preview__grain { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; pointer-events: none; background-image: url("data/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)' opacity='1'/%3E%3C/svg%3E"); background-size: 256px 256px; opacity: 0.035; mix-blend-mode: overlay; } /* ========================================== CONTENT — Grid Layout ========================================== */ .lc-products-preview__content { position: relative; z-index: 20; display: flex; align-items: center; min-height: 100vh; min-height: 100dvh; padding: 4rem 2rem; } .lc-products-preview__grid { display: grid; grid-template-columns: 1fr 1.5fr; grid-gap: 4rem; gap: 4rem; align-items: center; width: 100%; } /* ========================================== LEFT: Brand & Text Content ========================================== */ .lc-products-preview__brand { max-width: 600px; } .lc-products-preview__logo-text { font-family: 'Playfair Display', serif; font-size: 1.2rem; letter-spacing: 0.2em; color: rgba(212, 175, 55, 0.6); text-transform: uppercase; margin-bottom: 0.5rem; } .lc-products-preview__brand-name { font-family: 'Playfair Display', serif; font-size: max(3.5rem, min(8vw, 6rem)); font-weight: 700; color: #f5ede4; line-height: 0.9; margin-bottom: 0.5rem; } .lc-products-preview__brand-name .gold { color: #d4af37; } .lc-products-preview__tagline { font-family: 'Playfair Display', serif; font-size: max(1.2rem, min(2vw, 1.6rem)); color: rgba(245, 237, 228, 0.8); margin-bottom: 1.5rem; font-weight: 300; } .lc-products-preview__description { font-size: 1rem; line-height: 1.8; color: rgba(245, 237, 228, 0.5); max-width: 450px; margin-bottom: 2rem; } /* ========================================== BUTTONS ========================================== */ .lc-products-preview__buttons { display: flex; gap: 1rem; flex-wrap: wrap; } .lc-products-preview__btn-primary { display: inline-block; padding: 0.75rem 2rem; background: #d4af37; color: #120904; -webkit-text-decoration: none; text-decoration: none; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 4px; transition: all 0.4s ease; } .lc-products-preview__btn-primary { background: #e8c9a6; transform: translateY(-3px); box-shadow: 0 12px 40px rgba(212, 175, 55, 0.25); } .lc-products-preview__btn-secondary { display: inline-block; padding: 0.75rem 2rem; background: transparent; color: rgba(245, 237, 228, 0.7); -webkit-text-decoration: none; text-decoration: none; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 4px; border: 1px solid rgba(245, 237, 228, 0.15); transition: all 0.4s ease; } .lc-products-preview__btn-secondary { background: rgba(255, 255, 255, 0.05); border-color: rgba(212, 175, 55, 0.4); color: #f5ede4; transform: translateY(-3px); } /* ========================================== RIGHT: Product Cards ========================================== */ /* ========================================================= LUBAN PRODUCT CARDS — PREMIUM COMPACT VERSION ========================================================= */ .lc-products-preview__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 0.8rem; gap: 0.8rem; align-items: stretch; max-width: 560px; } /* ========================================================= CARD ========================================================= */ .lc-products-preview__cards .lc-product-card { position: relative; display: flex; flex-direction: column; min-width: 0; height: 320px; overflow: hidden; background: linear-gradient( 145deg, rgba(39, 24, 12, 0.78), rgba(18, 9, 4, 0.72) ); border: 1px solid rgba(245, 237, 228, 0.13); border-radius: 9px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(0); transition: transform 0.45s cubic-bezier(.22,.61,.36,1), border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease; } /* Gold edge */ .lc-products-preview__cards .lc-product-card::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 145deg, rgba(212,175,55,0.55), transparent 35%, transparent 70%, rgba(212,175,55,0.25) ); opacity: 0; pointer-events: none; -webkit-mask: linear-gradient(#fff 0, #fff 0) content-box, linear-gradient(#fff 0, #fff 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity 0.45s ease; } .lc-products-preview__cards .lc-product-card:hover { transform: translateY(-8px); background: linear-gradient( 145deg, rgba(48, 29, 13, 0.86), rgba(18, 9, 4, 0.80) ); border-color: rgba(212, 175, 55, 0.28); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42); } .lc-products-preview__cards .lc-product-card:hover::before { opacity: 1; } /* ========================================================= IMAGE ========================================================= */ .lc-products-preview__cards .lc-product-card__image-wrap { position: relative; width: 100%; height: 118px; padding-top: 0; overflow: hidden; flex-shrink: 0; background: rgba(255, 255, 255, 0.025); } .lc-products-preview__cards .lc-product-card__image-wrap img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transform: scale(1.01); filter: saturate(0.78) contrast(1.05) brightness(0.88); transition: transform 0.75s cubic-bezier(.22,.61,.36,1), filter 0.5s ease; } .lc-products-preview__cards .lc-product-card:hover .lc-product-card__image-wrap img { transform: scale(1.08); filter: saturate(0.95) contrast(1.06) brightness(0.98); } /* Image bottom fade */ .lc-products-preview__cards .lc-product-card__image-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient( to top, rgba(18, 9, 4, 0.72), transparent ); pointer-events: none; } /* ========================================================= GRADE BADGE ========================================================= */ .lc-products-preview__cards .lc-product-card__badge { position: absolute; top: 8px; right: 8px; z-index: 5; padding: 4px 8px; min-width: 39px; text-align: center; font-family: 'Poppins', sans-serif; font-size: 0.43rem; line-height: 1; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; border-radius: 30px; box-shadow: 0 4px 12px rgba(0,0,0,.22); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* Grade 1 */ .lc-products-preview__cards .lc-product-card__badge--grade1 { background: #d4af37; color: #120904; border: 1px solid rgba(212,175,55,.5); } /* Grade 2 */ .lc-products-preview__cards .lc-product-card__badge--grade2 { background: rgba(220,220,220,.82); color: #120904; border: 1px solid rgba(255,255,255,.3); } /* Grade 3 */ .lc-products-preview__cards .lc-product-card__badge--grade3 { background: rgba(205,127,50,.88); color: #120904; border: 1px solid rgba(205,127,50,.35); } /* ========================================================= ORIGIN LABEL ========================================================= */ .lc-products-preview__cards .lc-product-card__origin-badge { position: absolute; left: 8px; bottom: 8px; z-index: 5; padding: 3px 6px; font-family: 'Poppins', sans-serif; font-size: 0.38rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,237,228,.72); background: rgba(18,9,4,.62); border: 1px solid rgba(255,255,255,.10); border-radius: 3px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ========================================================= LUBAN — FIVE ORIGIN COLLECTION 3 + 2 PREMIUM COMPOSITION ========================================================= */ .lc-products-preview__cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-gap: .8rem; gap: .8rem; width: 100%; max-width: 620px; align-items: stretch; } /* First three */ .lc-products-preview__cards .lc-product-card:nth-child(1) { grid-column: span 2; } /* Second */ .lc-products-preview__cards .lc-product-card:nth-child(2) { grid-column: span 2; } /* Third */ .lc-products-preview__cards .lc-product-card:nth-child(3) { grid-column: span 2; } /* Fourth */ .lc-products-preview__cards .lc-product-card:nth-child(4) { grid-column: 2 / span 2; } /* Fifth */ .lc-products-preview__cards .lc-product-card:nth-child(5) { grid-column: 4 / span 2; } /* ========================================================= FIVE CARD HEIGHT ========================================================= */ .lc-products-preview__cards .lc-product-card { height: 295px; } /* ========================================================= SECOND ROW — SLIGHTLY LOWER ========================================================= */ @media (min-width: 1025px) { .lc-products-preview__cards .lc-product-card:nth-child(4), .lc-products-preview__cards .lc-product-card:nth-child(5) { transform: translateY(18px); } .lc-products-preview__cards .lc-product-card:nth-child(4):hover, .lc-products-preview__cards .lc-product-card:nth-child(5):hover { transform: translateY(10px); } } /* ========================================================= IMAGE ========================================================= */ .lc-products-preview__cards .lc-product-card__image-wrap { height: 112px; padding-top: 0; } /* ========================================================= CARD CONTENT ========================================================= */ .lc-products-preview__cards .lc-product-card__body { padding: .72rem .72rem .65rem; } /* Origin label */ .lc-products-preview__cards .lc-product-card__origin { font-size: .43rem; letter-spacing: .12em; margin-bottom: .15rem; } /* Name */ .lc-products-preview__cards .lc-product-card__name { font-size: 1.18rem; margin-bottom: .25rem; } /* Remove generic descriptions */ .lc-products-preview__cards .lc-product-card__flavor { font-size: .62rem; color: rgba(245,237,228,.52); margin-bottom: 0; } /* Footer */ .lc-products-preview__cards .lc-product-card__footer { margin-top: auto; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .lc-products-preview__cards { max-width: 680px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .lc-products-preview__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; max-width: 500px; } .lc-products-preview__cards .lc-product-card:nth-child(1), .lc-products-preview__cards .lc-product-card:nth-child(2), .lc-products-preview__cards .lc-product-card:nth-child(3), .lc-products-preview__cards .lc-product-card:nth-child(4), .lc-products-preview__cards .lc-product-card:nth-child(5) { grid-column: span 1; transform: none; } .lc-products-preview__cards .lc-product-card { height: 270px; } .lc-products-preview__cards .lc-product-card__image-wrap { height: 92px; } .lc-products-preview__cards .lc-product-card__name { font-size: 1rem; } .lc-products-preview__cards .lc-product-card__flavor { font-size: .56rem; } /* Fifth card centered */ .lc-products-preview__cards .lc-product-card:nth-child(5) { grid-column: 1 / -1; width: calc(50% - .3rem); justify-self: center; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .lc-products-preview__cards { grid-template-columns: 1fr 1fr; gap: .45rem; } .lc-products-preview__cards .lc-product-card { height: 245px; border-radius: 7px; } .lc-products-preview__cards .lc-product-card__image-wrap { height: 78px; } .lc-products-preview__cards .lc-product-card__body { padding: .55rem .5rem; } .lc-products-preview__cards .lc-product-card__name { font-size: .88rem; } .lc-products-preview__cards .lc-product-card__origin { font-size: .36rem; } .lc-products-preview__cards .lc-product-card__flavor { font-size: .5rem; } .lc-products-preview__cards .lc-product-card:nth-child(5) { width: 100%; max-width: 220px; } } /* ================================================== BRAND STORY SECTION — LIGHT THEME ================================================== */ .lc-brand-story { padding: 80px 0; background: #F5EFE8; background: var(--color-cream, #f5ede4); color: #1A1410; color: var(--color-text, #1a110b); position: relative; overflow: hidden; } .lc-brand-story::before { content: ''; position: absolute; top: -20%; right: -10%; width: 40%; height: 60%; background: radial-gradient(circle, rgba(212, 175, 55, 0.03) 0%, transparent 70%); pointer-events: none; } .lc-brand-story__header { text-align: center; margin-bottom: 60px; } .lc-brand-story__eyebrow { display: flex; align-items: center; justify-content: center; gap: 16px; color: #D4AF37; color: var(--color-gold, #d4af37); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 20px; } .lc-brand-story__eyebrow span { display: block; width: 30px; height: 1px; background: rgba(212, 175, 55, 0.4); } .lc-brand-story__title { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--font-primary, "Cormorant Garamond", Georgia, serif); font-size: max(32px, min(4vw, 52px)); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; max-width: 900px; margin: 0 auto; color: #1A1410; color: var(--color-text, #1a110b); } .lc-brand-story__title span { color: #D4AF37; color: var(--color-gold, #d4af37); } .lc-brand-story__grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 60px; gap: 60px; align-items: center; margin-bottom: 60px; } .lc-brand-story__text p { font-size: 1.05rem; line-height: 1.8; color: #9A8D82; color: var(--color-text-muted, rgba(26, 17, 11, 0.7)); margin-bottom: 16px; } .lc-brand-story__text .lc-brand-story__highlight { color: #1A1410; color: var(--color-text, #1a110b); font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--font-primary, "Cormorant Garamond", Georgia, serif); font-size: 1.2rem; font-weight: 500; border-left: 2px solid #D4AF37; border-left: 2px solid var(--color-gold, #d4af37); padding-left: 20px; } .lc-brand-story__badge { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding: 8px 24px; border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 100px; font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: #D4AF37; color: var(--color-gold, #d4af37); } .lc-brand-story__roasts { background: #FFFFFF; background: var(--color-white, #ffffff); border: 1px solid rgba(212, 175, 55, 0.1); border-radius: 12px; padding: 32px 40px; } .lc-brand-story__roast-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px 32px; gap: 16px 32px; } .roast-item { display: flex; align-items: center; gap: 12px; } .roast-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(26, 17, 11, 0.1); } .roast-dot.light { background: #c4a882; } .roast-dot.medium { background: #a67c52; } .roast-dot.medium-dark { background: #7a5430; } .roast-dot.dark { background: #3d2817; } .roast-label { font-size: 0.8rem; color: #9A8D82; color: var(--color-text-muted, rgba(26, 17, 11, 0.8)); letter-spacing: 0.05em; } .lc-brand-story__roast-tagline { text-align: center; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--font-primary, "Cormorant Garamond", Georgia, serif); font-size: 1.1rem; color: #D4AF37; color: var(--color-gold, #d4af37); margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(212, 175, 55, 0.1); } .lc-brand-story__process { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; gap: 20px; margin-bottom: 60px; padding: 40px 0; border-top: 1px solid rgba(212, 175, 55, 0.06); border-bottom: 1px solid rgba(212, 175, 55, 0.06); } .process-step { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .process-number { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--font-primary, "Cormorant Garamond", Georgia, serif); font-size: 2rem; font-weight: 600; color: #D4AF37; color: var(--color-gold, #d4af37); opacity: 0.5; } .process-label { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: #9A8D82; color: var(--color-text-muted, rgba(26, 17, 11, 0.5)); } .lc-brand-story__footer { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 60px; gap: 60px; padding-top: 20px; } .lc-brand-story__company { padding: 24px 0; } .company-name { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--font-primary, "Cormorant Garamond", Georgia, serif); font-size: 1.3rem; font-weight: 600; color: #1A1410; color: var(--color-text, #1a110b); letter-spacing: 0.1em; } .company-address { font-size: 0.85rem; color: #9A8D82; color: var(--color-text-muted, rgba(26, 17, 11, 0.5)); margin: 4px 0 12px; } .company-contact { display: flex; gap: 12px; align-items: center; font-size: 0.85rem; color: #9A8D82; color: var(--color-text-muted, rgba(26, 17, 11, 0.6)); } .company-contact a { color: #9A8D82; color: var(--color-text-muted, rgba(26, 17, 11, 0.6)); transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: color var(--transition, 0.3s ease); } .company-contact a:hover { color: #D4AF37; color: var(--color-gold, #d4af37); } .company-weight { font-size: 1.1rem; font-weight: 600; color: #D4AF37; color: var(--color-gold, #d4af37); margin-top: 8px; } .lc-brand-story__packaging { padding: 24px 0; } .packaging-title { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.1em; color: #1A1410; color: var(--color-text, #1a110b); margin-bottom: 12px; } .packaging-colors { display: flex; gap: 12px; margin-bottom: 12px; } .color-swatch { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(26, 17, 11, 0.1); } .packaging-details { font-size: 0.7rem; color: #9A8D82; color: var(--color-text-muted, rgba(26, 17, 11, 0.4)); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; } .packaging-codes { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.65rem; color: #9A8D82; color: var(--color-text-muted, rgba(26, 17, 11, 0.3)); letter-spacing: 0.05em; margin-bottom: 8px; } .packaging-notes { font-size: 0.6rem; color: #9A8D82; color: var(--color-text-muted, rgba(26, 17, 11, 0.2)); letter-spacing: 0.08em; text-transform: uppercase; } /* ================================================== RESPONSIVE ================================================== */ @media (max-width: 1024px) { .lc-brand-story__grid { grid-template-columns: 1fr; gap: 40px; } .lc-brand-story__footer { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 768px) { .lc-brand-story { padding: 60px 0; } .lc-brand-story__title { font-size: max(28px, min(5vw, 36px)); } .lc-brand-story__roast-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .lc-brand-story__process { grid-template-columns: repeat(2, 1fr); gap: 24px; } .lc-brand-story__roasts { padding: 24px 20px; } .lc-brand-story__footer { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 480px) { .lc-brand-story__roast-grid { grid-template-columns: 1fr; gap: 8px; } .lc-brand-story__process { grid-template-columns: 1fr 1fr; gap: 16px; } .company-contact { flex-direction: column; align-items: flex-start; gap: 4px; } .company-contact span { display: none; } } /* ─── NEW SECTIONS ─── */ /* ================================================ LUBAN COFFEE — OUR STORY (SIMPLIFIED ROAST) ================================================ */ .lc-story { padding: 6rem 0; padding: var(--spacing-24) 0; background: #F5EFE8; background: var(--color-cream); } /* ─── CONTAINER ─── */ .lc-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } /* ─── HEADER ─── */ .lc-story__header { text-align: center; max-width: 780px; margin: 0 auto 4rem; margin: 0 auto var(--spacing-16); } .lc-story__eyebrow { display: flex; align-items: center; justify-content: center; gap: 1rem; gap: var(--spacing-4); font-size: clamp(0.6875rem, 0.05vw + 0.675rem, 0.75rem); font-size: var(--font-size-xs); font-weight: 500; font-weight: var(--font-weight-medium); letter-spacing: 0.2em; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: #D4AF37; color: var(--color-gold); } .lc-story__eyebrow span { width: 40px; height: 1px; background: #D4AF37; background: var(--color-gold); opacity: 0.3; } .lc-story__title { margin-top: 1rem; margin-top: var(--spacing-4); font-size: max(2.5rem, min(4.5vw, 3.8rem)); font-weight: 500; font-weight: var(--font-weight-medium); } .lc-story__title span { color: #D4AF37; color: var(--color-gold); } .lc-story__intro { font-size: clamp(1rem, 0.12vw + 0.96rem, 1.125rem); font-size: var(--font-size-base); font-weight: 300; font-weight: var(--font-weight-light); color: #9A8D82; color: var(--color-text-muted); max-width: 600px; margin: 1rem auto 0; margin: var(--spacing-4) auto 0; line-height: 1.75; line-height: var(--line-height-relaxed); } /* ─── HERO TEXT ─── */ .lc-story__hero-text { text-align: center; max-width: 700px; margin: 0 auto 4rem; margin: 0 auto var(--spacing-16); } .lc-story__hero-text p { font-size: clamp(1.125rem, 0.15vw + 1.08rem, 1.25rem); font-size: var(--font-size-md); font-weight: 300; font-weight: var(--font-weight-light); color: #4A3D35; color: var(--color-text-light); line-height: 1.75; line-height: var(--line-height-relaxed); margin-bottom: 1rem; margin-bottom: var(--spacing-4); } .lc-story__hero-text .highlight { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-family: var(--font-display); font-size: clamp(1.5rem, 0.25vw + 1.42rem, 1.875rem); font-size: var(--font-size-xl); font-weight: 400; font-weight: var(--font-weight-regular); color: #1A1410; color: var(--color-text); padding-left: 1.5rem; padding-left: var(--spacing-6); border-left: 2px solid #D4AF37; border-left: 2px solid var(--color-gold); display: block; margin-top: 1rem; margin-top: var(--spacing-4); } /* ================================================ ROAST SELECTOR — SIMPLIFIED (Animated Dots Only) ================================================ */ .lc-story__roast-simplified { margin: 4rem auto; margin: var(--spacing-16) auto; max-width: 800px; padding: 3rem; padding: var(--spacing-12); background: #FFFFFF; background: var(--color-white); border-radius: 12px; border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .lc-story__roast-simplified::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), #D4AF37, rgba(212, 175, 55, 0.1) ); background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), var(--color-gold), rgba(212, 175, 55, 0.1) ); } /* ─── ROAST HEADER ─── */ .lc-story__roast-simplified-header { text-align: center; max-width: 600px; margin: 0 auto 2.5rem; margin: 0 auto var(--spacing-10); } .lc-story__roast-simplified-eyebrow { font-size: clamp(0.6875rem, 0.05vw + 0.675rem, 0.75rem); font-size: var(--font-size-xs); font-weight: 500; font-weight: var(--font-weight-medium); letter-spacing: 0.2em; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: #D4AF37; color: var(--color-gold); } .lc-story__roast-simplified-header h3 { margin: 0.5rem 0; margin: var(--spacing-2) 0; font-size: max(2rem, min(3vw, 2.8rem)); font-weight: 500; font-weight: var(--font-weight-medium); } .lc-story__roast-simplified-header h3 span { color: #D4AF37; color: var(--color-gold); } .lc-story__roast-simplified-subtitle { font-size: clamp(1rem, 0.12vw + 0.96rem, 1.125rem); font-size: var(--font-size-base); font-weight: 300; font-weight: var(--font-weight-light); color: #9A8D82; color: var(--color-text-muted); } /* ─── ROAST OPTIONS ─── */ .lc-story__roast-simplified-options { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; grid-gap: var(--spacing-4); gap: 1rem; gap: var(--spacing-4); position: relative; } .lc-story__roast-simplified-option { display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem; padding: var(--spacing-6) var(--spacing-4); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 8px; border-radius: var(--radius-md); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition); position: relative; background: transparent; } .lc-story__roast-simplified-option:hover { border-color: rgba(212, 175, 55, 0.15); background: rgba(212, 175, 55, 0.02); transform: translateY(-2px); } .lc-story__roast-simplified-option.active { border-color: #D4AF37; border-color: var(--color-gold); background: rgba(212, 175, 55, 0.04); transform: translateY(-4px); box-shadow: 0 8px 30px rgba(212, 175, 55, 0.08); } /* ─── ROAST DOT ─── */ .lc-story__roast-simplified-dot { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.06); display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; margin-bottom: var(--spacing-3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition); position: relative; } .lc-story__roast-simplified-option.active .lc-story__roast-simplified-dot { border-color: #D4AF37; border-color: var(--color-gold); box-shadow: 0 0 30px rgba(212, 175, 55, 0.15); } .lc-story__roast-simplified-dot .dot-inner { width: 20px; height: 20px; border-radius: 50%; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition); position: relative; z-index: 1; } .lc-story__roast-simplified-dot .dot-ring { position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; border-radius: 50%; border: 2px solid transparent; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition); } .lc-story__roast-simplified-option.active .dot-ring { border-color: #D4AF37; border-color: var(--color-gold); animation: ring-pulse 2s ease-in-out infinite; } @keyframes ring-pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 0; } } /* Roast Colors */ .lc-story__roast-simplified-option[data-roast="light"] .dot-inner { background: radial-gradient(circle at 30% 30%, #e8d5c0, #c8a87c); } .lc-story__roast-simplified-option[data-roast="medium"] .dot-inner { background: radial-gradient(circle at 30% 30%, #c8a87c, #8b6b4f); } .lc-story__roast-simplified-option[data-roast="dark"] .dot-inner { background: radial-gradient(circle at 30% 30%, #6f4e37, #3d251a); } .lc-story__roast-simplified-option.active .dot-inner { transform: scale(1.1); } /* ─── ROAST INFO ─── */ .lc-story__roast-simplified-info { text-align: center; width: 100%; } .roast-label { display: block; font-family: "Poppins", "Inter", "Segoe UI", Arial, Helvetica, sans-serif; font-family: var(--font-body); font-size: clamp(1rem, 0.12vw + 0.96rem, 1.125rem); font-size: var(--font-size-base); font-weight: 600; font-weight: var(--font-weight-semibold); color: #1A1410; color: var(--color-text); transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: color var(--transition); } .lc-story__roast-simplified-option.active .roast-label { color: #D4AF37; color: var(--color-gold); } .roast-sub { display: block; font-size: clamp(0.8125rem, 0.08vw + 0.79rem, 0.875rem); font-size: var(--font-size-sm); color: #9A8D82; color: var(--color-text-muted); margin-top: 0.125rem; margin-top: var(--spacing-0-5); } /* ─── CRAFT SECTION ─── */ .lc-story__craft { margin: 4rem 0; margin: var(--spacing-16) 0; padding: 4rem 0; padding: var(--spacing-16) 0; border-top: 1px solid rgba(212, 175, 55, 0.06); border-bottom: 1px solid rgba(212, 175, 55, 0.06); } .lc-story__craft-header { text-align: center; max-width: 680px; margin: 0 auto 3rem; margin: 0 auto var(--spacing-12); } .lc-story__craft-header h3 { font-size: max(2rem, min(3vw, 2.8rem)); font-weight: 500; font-weight: var(--font-weight-medium); } .lc-story__craft-header h3 span { color: #D4AF37; color: var(--color-gold); } .lc-story__craft-subtitle { font-size: clamp(1rem, 0.12vw + 0.96rem, 1.125rem); font-size: var(--font-size-base); font-weight: 300; font-weight: var(--font-weight-light); color: #9A8D82; color: var(--color-text-muted); } .lc-story__craft-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1.5rem; grid-gap: var(--spacing-6); gap: 1.5rem; gap: var(--spacing-6); } .lc-story__craft-step { text-align: center; padding: 1.5rem; padding: var(--spacing-6); background: #FFFFFF; background: var(--color-white); border: 1px solid rgba(212, 175, 55, 0.04); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition); border-radius: 8px; border-radius: var(--radius-md); } .lc-story__craft-step:hover { transform: translateY(-4px); box-shadow: 0 8px 40px rgba(212, 175, 55, 0.12); box-shadow: var(--shadow-gold); border-color: rgba(212, 175, 55, 0.1); } .lc-story__craft-number { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-family: var(--font-display); font-size: clamp(1.875rem, 0.35vw + 1.75rem, 2.25rem); font-size: var(--font-size-2xl); color: #D4AF37; color: var(--color-gold); opacity: 0.12; line-height: 1; } .lc-story__craft-icon { font-size: 2.2rem; margin: 1rem 0; margin: var(--spacing-4) 0; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform var(--transition-bounce); display: inline-block; } .lc-story__craft-step:hover .lc-story__craft-icon { transform: scale(1.1); } .lc-story__craft-step h4 { font-family: "Poppins", "Inter", "Segoe UI", Arial, Helvetica, sans-serif; font-family: var(--font-body); font-size: clamp(1rem, 0.12vw + 0.96rem, 1.125rem); font-size: var(--font-size-base); font-weight: 600; font-weight: var(--font-weight-semibold); color: #1A1410; color: var(--color-text); margin-bottom: 0.5rem; margin-bottom: var(--spacing-2); } .lc-story__craft-step p { font-size: clamp(0.8125rem, 0.08vw + 0.79rem, 0.875rem); font-size: var(--font-size-sm); color: #9A8D82; color: var(--color-text-muted); margin: 0; line-height: 1.75; line-height: var(--line-height-relaxed); } /* ─── CTA ─── */ .lc-story__cta { text-align: center; margin-top: 4rem; margin-top: var(--spacing-16); } .lc-story__cta .lc-button { min-height: 52px; padding: 0.9rem 2.5rem; font-size: clamp(0.8125rem, 0.08vw + 0.79rem, 0.875rem); font-size: var(--font-size-sm); -webkit-text-decoration: none; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; gap: var(--spacing-2); background: linear-gradient(135deg, #B8942A, #D4AF37); background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold)); border: none; border-radius: 50px; color: #FFFFFF; color: var(--color-white); font-weight: 600; font-weight: var(--font-weight-semibold); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition); cursor: pointer; } .lc-story__cta .lc-button:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(212, 175, 55, 0.3); } .lc-button__arrow { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: transform var(--transition); display: inline-block; } .lc-story__cta .lc-button:hover .lc-button__arrow { transform: translateX(4px); } /* ================================================ RESPONSIVE ================================================ */ @media (max-width: 1024px) { .lc-story { padding: 4rem 0; padding: var(--spacing-16) 0; } .lc-story__craft-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; gap: var(--spacing-4); } .lc-story__roast-simplified { padding: 2rem; padding: var(--spacing-8); margin: 3rem auto; margin: var(--spacing-12) auto; } } @media (max-width: 768px) { .lc-story { padding: 3rem 0; padding: var(--spacing-12) 0; } .lc-story__header { margin-bottom: 3rem; margin-bottom: var(--spacing-12); } .lc-story__title { font-size: max(2rem, min(6vw, 2.8rem)); } .lc-story__hero-text .highlight { font-size: clamp(1.25rem, 0.18vw + 1.2rem, 1.5rem); font-size: var(--font-size-lg); padding-left: 1rem; padding-left: var(--spacing-4); } .lc-story__roast-simplified { padding: 1.5rem; padding: var(--spacing-6); margin: 2.5rem auto; margin: var(--spacing-10) auto; } .lc-story__roast-simplified-options { grid-template-columns: 1fr; gap: 0.5rem; gap: var(--spacing-2); } .lc-story__roast-simplified-option { flex-direction: row; gap: 1rem; gap: var(--spacing-4); padding: 0.75rem 1rem; padding: var(--spacing-3) var(--spacing-4); text-align: left; } .lc-story__roast-simplified-dot { width: 36px; height: 36px; margin-bottom: 0; flex-shrink: 0; } .lc-story__roast-simplified-dot .dot-inner { width: 16px; height: 16px; } .lc-story__roast-simplified-info { text-align: left; flex: 1; } .roast-label { font-size: clamp(0.8125rem, 0.08vw + 0.79rem, 0.875rem); font-size: var(--font-size-sm); } .roast-sub { font-size: clamp(0.6875rem, 0.05vw + 0.675rem, 0.75rem); font-size: var(--font-size-xs); } .lc-story__craft { margin: 3rem 0; margin: var(--spacing-12) 0; padding: 3rem 0; padding: var(--spacing-12) 0; } .lc-story__craft-grid { grid-template-columns: 1fr 1fr; gap: 1rem; gap: var(--spacing-4); } .lc-story__craft-step { padding: 1rem; padding: var(--spacing-4); } .lc-story__craft-icon { font-size: 1.8rem; margin: 0.5rem 0; margin: var(--spacing-2) 0; } .lc-story__cta { margin-top: 3rem; margin-top: var(--spacing-12); } .lc-container { padding: 0 1.5rem; } } @media (max-width: 480px) { .lc-story { padding: 2rem 0; padding: var(--spacing-8) 0; } .lc-story__title { font-size: max(1.8rem, min(5vw, 2.2rem)); } .lc-story__intro { font-size: clamp(0.8125rem, 0.08vw + 0.79rem, 0.875rem); font-size: var(--font-size-sm); } .lc-story__hero-text .highlight { font-size: clamp(1rem, 0.12vw + 0.96rem, 1.125rem); font-size: var(--font-size-base); padding-left: 0.75rem; padding-left: var(--spacing-3); } .lc-story__roast-simplified { padding: 1rem; padding: var(--spacing-4); margin: 2rem auto; margin: var(--spacing-8) auto; border-radius: 8px; border-radius: var(--radius-md); } .lc-story__roast-simplified-header h3 { font-size: max(1.8rem, min(5vw, 2.2rem)); } .lc-story__roast-simplified-subtitle { font-size: clamp(0.8125rem, 0.08vw + 0.79rem, 0.875rem); font-size: var(--font-size-sm); } .lc-story__roast-simplified-option { padding: 0.5rem 0.75rem; padding: var(--spacing-2) var(--spacing-3); border-radius: 4px; border-radius: var(--radius-sm); } .lc-story__roast-simplified-dot { width: 30px; height: 30px; } .lc-story__roast-simplified-dot .dot-inner { width: 12px; height: 12px; } .lc-story__craft-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; gap: var(--spacing-3); } .lc-story__craft-step { padding: 0.75rem; padding: var(--spacing-3); } .lc-story__craft-icon { font-size: 1.5rem; } .lc-story__craft-step h4 { font-size: clamp(0.8125rem, 0.08vw + 0.79rem, 0.875rem); font-size: var(--font-size-sm); } .lc-story__craft-step p { font-size: clamp(0.6875rem, 0.05vw + 0.675rem, 0.75rem); font-size: var(--font-size-xs); } .lc-story__craft-number { font-size: clamp(1.5rem, 0.25vw + 1.42rem, 1.875rem); font-size: var(--font-size-xl); } .lc-story__cta .lc-button { min-height: 48px; padding: 0.7rem 2rem; font-size: clamp(0.6875rem, 0.05vw + 0.675rem, 0.75rem); font-size: var(--font-size-xs); width: 100%; justify-content: center; } .lc-container { padding: 0 1rem; } } /* ================================================ LUBAN COFFEE — ETHIOPIA ORIGIN MAP (CENTERED) ================================================ */ .ethiopia-map-section { padding: 80px 0; background: #050505; color: #F5EFE8; color: var(--color-text-inverse); position: relative; overflow: hidden; z-index: 1; min-height: 80vh; display: flex; align-items: center; justify-content: center; } /* ─── BACKGROUND IMAGE ─── */ .ethiopia-map-section__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } .ethiopia-map-section__background img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; opacity: 0.45; filter: brightness(1.2) contrast(1.1); } .ethiopia-map-section__bg-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(5, 5, 5, 0.15) 0%, rgba(5, 5, 5, 0.35) 40%, rgba(5, 5, 5, 0.70) 100% ); z-index: 1; } /* ─── CONTAINER — CENTERED ─── */ .ethiopia-map-section__container { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; max-width: 800px; margin: 0 auto; padding: 0 24px; width: 100%; } /* ─── VISUAL / MAP — TOP CENTER ─── */ .ethiopia-map-section__visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; margin-bottom: 20px; } .ethiopia-map-section__map { width: 100%; max-width: 280px; aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.05)); } /* ─── JS COMPONENT POSITIONS ─── */ .ethiopia-glow-position { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; } .ethiopia-dot-position { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; } /* ─── CUSTOM ELEMENTS ─── */ ethiopia-glow, ethiopia-dot { display: block; } /* ─── CONTENT — CENTER ─── */ .ethiopia-map-section__content { text-align: center; padding: 0; width: 100%; max-width: 700px; } .ethiopia-map-section__eyebrow { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #D4AF37; color: var(--color-gold); margin-bottom: 8px; } .ethiopia-map-section__title { color: #F5EFE8; color: var(--color-text-inverse); margin-bottom: 16px; font-size: max(2rem, min(4vw, 3rem)); font-weight: 400; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-family: var(--font-display); line-height: 1.1; } .ethiopia-map-section__title span { color: #D4AF37; color: var(--color-gold); } .ethiopia-map-section__description { color: rgba(255, 255, 255, 0.6); font-size: 1rem; font-weight: 300; line-height: 1.8; max-width: 560px; margin: 0 auto 0; } /* ─── REGIONS ─── */ .ethiopia-map-section__regions { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 10px; gap: 10px; margin-top: 32px; max-width: 600px; margin-left: auto; margin-right: auto; width: 100%; } .ethiopia-map-section__region { text-align: center; padding: 12px 8px; border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 4px; transition: all 0.5s ease; position: relative; cursor: default; } .ethiopia-map-section__region-dot { display: block; width: 8px; height: 8px; background: rgba(212, 175, 55, 0.15); border-radius: 50%; margin: 0 auto 6px; transition: all 0.6s ease; box-shadow: none; } .ethiopia-map-section__region-name { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); transition: color 0.6s ease; } /* ─── GLOWING ANIMATION LOOP ─── */ .ethiopia-map-section__region.active { border-color: rgba(212, 175, 55, 0.3); background: rgba(212, 175, 55, 0.06); } .ethiopia-map-section__region.active .ethiopia-map-section__region-dot { background: #D4AF37; background: var(--color-gold); box-shadow: 0 0 25px rgba(212, 175, 55, 0.5); } .ethiopia-map-section__region.active .ethiopia-map-section__region-name { color: rgba(255, 255, 255, 0.85); } /* ─── HOVER EFFECT ─── */ .ethiopia-map-section__region:hover { border-color: rgba(212, 175, 55, 0.2); background: rgba(212, 175, 55, 0.04); transform: translateY(-2px); } .ethiopia-map-section__region:hover .ethiopia-map-section__region-dot { background: #D4AF37; background: var(--color-gold); opacity: 0.6; } .ethiopia-map-section__region:hover .ethiopia-map-section__region-name { color: rgba(255, 255, 255, 0.6); } /* ─── RESPONSIVE ─── */ @media (max-width: 768px) { .ethiopia-map-section { padding: 60px 0; min-height: 70vh; } .ethiopia-map-section__map { max-width: 220px; } .ethiopia-map-section__regions { grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 450px; margin-top: 24px; } .ethiopia-map-section__region { padding: 8px 6px; } .ethiopia-map-section__region-name { font-size: 0.55rem; } .ethiopia-map-section__region-dot { width: 6px; height: 6px; margin-bottom: 4px; } .ethiopia-map-section__title { font-size: max(1.8rem, min(5vw, 2.4rem)); } .ethiopia-map-section__description { font-size: 0.9rem; max-width: 100%; } .ethiopia-map-section__background img { opacity: 0.3; } .ethiopia-map-section__visual { padding: 10px; margin-bottom: 10px; } } @media (max-width: 480px) { .ethiopia-map-section { padding: 40px 0; min-height: 60vh; } .ethiopia-map-section__container { padding: 0 16px; } .ethiopia-map-section__map { max-width: 180px; } .ethiopia-map-section__regions { grid-template-columns: repeat(2, 1fr); gap: 6px; max-width: 300px; margin-top: 20px; } .ethiopia-map-section__region { padding: 6px 4px; } .ethiopia-map-section__region-name { font-size: 0.5rem; } .ethiopia-map-section__region-dot { width: 5px; height: 5px; margin-bottom: 3px; } .ethiopia-map-section__title { font-size: max(1.5rem, min(5vw, 2rem)); } .ethiopia-map-section__description { font-size: 0.85rem; } .ethiopia-map-section__eyebrow { font-size: 0.65rem; } .ethiopia-map-section__background img { opacity: 0.2; } } @media (max-width: 360px) { .ethiopia-map-section { padding: 30px 0; } .ethiopia-map-section__map { max-width: 150px; } .ethiopia-map-section__regions { gap: 4px; } .ethiopia-map-section__region-name { font-size: 0.45rem; } .ethiopia-map-section__title { font-size: 1.3rem; } .ethiopia-map-section__background img { opacity: 0.15; } } /* ================================================ PACKAGE VIEWER — Single Image (No Controls) ================================================ */ .package-viewer { margin: 30px auto 20px; max-width: 320px; } .package-viewer__container { display: flex; flex-direction: column; align-items: center; gap: 16px; } .package-viewer__frame { width: 100%; max-width: 260px; aspect-ratio: 1 / 1; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(212, 175, 55, 0.08); display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; overflow: hidden; } .package-viewer__frame::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.02), transparent 70%); pointer-events: none; } .package-viewer__image { width: 85%; height: 85%; -o-object-fit: contain; object-fit: contain; filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3)); } .package-viewer__caption { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: #D4AF37; color: var(--color-gold); margin: 0; letter-spacing: 0.08em; text-align: center; min-height: 1.5em; text-transform: uppercase; } @media (max-width: 768px) { .package-viewer { max-width: 260px; } .package-viewer__frame { max-width: 200px; padding: 16px; } .package-viewer__caption { font-size: 1rem; } } @media (max-width: 480px) { .package-viewer { max-width: 220px; margin: 20px auto 16px; } .package-viewer__frame { max-width: 160px; padding: 12px; } .package-viewer__caption { font-size: 0.85rem; } } /* ================================================ LUBAN COFFEE — SPIRIT OF COFFEE ================================================ */ .lc-spirit { padding: 6rem 0; padding: var(--spacing-24) 0; background: #0A0806; background: var(--color-primary); color: #F5EFE8; color: var(--color-text-inverse); position: relative; overflow: hidden; } .lc-spirit::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.02), transparent 60%); pointer-events: none; } .lc-spirit__content { max-width: 680px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } .lc-spirit__eyebrow { font-size: clamp(0.6875rem, 0.05vw + 0.675rem, 0.75rem); font-size: var(--font-size-xs); font-weight: 500; font-weight: var(--font-weight-medium); letter-spacing: 0.2em; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: #D4AF37; color: var(--color-gold); } .lc-spirit__title { color: #F5EFE8; color: var(--color-text-inverse); margin: 0.5rem 0 1rem; margin: var(--spacing-2) 0 var(--spacing-4); } .lc-spirit__title span { color: #D4AF37; color: var(--color-gold); } .lc-spirit__description { font-size: clamp(1.25rem, 0.18vw + 1.2rem, 1.5rem); font-size: var(--font-size-lg); font-weight: 300; font-weight: var(--font-weight-light); color: rgba(255, 255, 255, 0.5); line-height: 1.75; line-height: var(--line-height-relaxed); } .lc-spirit__message { font-size: clamp(1rem, 0.12vw + 0.96rem, 1.125rem); font-size: var(--font-size-base); font-weight: 300; font-weight: var(--font-weight-light); color: rgba(255, 255, 255, 0.3); max-width: 480px; margin: 1.5rem auto; margin: var(--spacing-6) auto; line-height: 1.75; line-height: var(--line-height-relaxed); } .lc-spirit__actions { margin-top: 2rem; margin-top: var(--spacing-8); } /* ─── RESPONSIVE ─── */ @media (max-width: 1024px) { .lc-spirit { padding: 4rem 0; padding: var(--spacing-16) 0; } } @media (max-width: 768px) { .lc-spirit { padding: 3rem 0; padding: var(--spacing-12) 0; min-height: 50vh; } .lc-spirit__title { font-size: clamp(2.25rem, 0.45vw + 2.1rem, 2.75rem); font-size: var(--font-size-3xl); } .lc-spirit__description { font-size: clamp(1rem, 0.12vw + 0.96rem, 1.125rem); font-size: var(--font-size-base); } .lc-spirit__message { font-size: clamp(0.8125rem, 0.08vw + 0.79rem, 0.875rem); font-size: var(--font-size-sm); } } @media (max-width: 480px) { .lc-spirit { padding: 2rem 0; padding: var(--spacing-8) 0; min-height: 45vh; } .lc-spirit__title { font-size: clamp(1.875rem, 0.35vw + 1.75rem, 2.25rem); font-size: var(--font-size-2xl); } .lc-spirit__description { font-size: clamp(0.8125rem, 0.08vw + 0.79rem, 0.875rem); font-size: var(--font-size-sm); } .lc-spirit__message { font-size: 0.85rem; } } /* ═══════════════════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════════════════ */ /* ========================================== KEYFRAMES — Core Animations ========================================== */ /* ========================================== FADE ANIMATIONS ========================================== */ /* Fade In - Up */ @keyframes lcFadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Fade In - Down */ @keyframes lcFadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } /* Fade In - Left */ @keyframes lcFadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } /* Fade In - Right */ @keyframes lcFadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Fade In - Scale */ @keyframes lcFadeInScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* ========================================== SLIDE ANIMATIONS ========================================== */ /* Slide In - Left */ @keyframes lcSlideIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } /* Slide In - Right */ @keyframes lcSlideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Slide In - Up */ @keyframes lcSlideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ========================================== FLOATING & BOUNCING ========================================== */ /* Floating animation */ @keyframes lcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } /* Floating with rotation */ @keyframes floatBean { 0%, 100% { transform: rotate(25deg) translateY(0) scale(1); opacity: 0.04; } 50% { transform: rotate(30deg) translateY(-30px) scale(1.05); opacity: 0.06; } } /* Pulsing */ @keyframes lcPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* Pulse Icon */ @keyframes pulseIcon { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } /* ========================================== SHIMMER & SHINE ========================================== */ /* Gradient Shine */ @keyframes gradientShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Sparkle Background */ @keyframes sparkle { 0% { background-position: 0 0; } 100% { background-position: 200px 200px; } } /* Button Shine */ @keyframes lcShine { 0% { left: -100%; } 100% { left: 100%; } } /* ========================================== ROTATING ========================================== */ /* Spin */ @keyframes lcSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Slow Spin */ @keyframes lcSpinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================== HERO VIDEO FALLBACK ========================================== */ /* Smoke Move */ @keyframes smokeMove { 0%, 100% { transform: translateX(0) scale(1); opacity: 0.6; } 50% { transform: translateX(-30px) scale(1.1); opacity: 1; } } /* ========================================== REDUCED MOTION - DISABLE ANIMATIONS ========================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================== COFFEE EFFECTS — Coffee-specific Animations ========================================== */ /* ========================================== BEAN ANIMATIONS ========================================== */ /* Coffee Bean Falling (Header) */ @keyframes lcBeanFall { 0% { transform: translateY(0) rotate(0deg) scale(0.8); opacity: 0.3; opacity: var(--bean-opacity, 0.3); } 10% { transform: translateY(10vh) rotate(15deg) scale(1); opacity: 0.3; opacity: var(--bean-opacity, 0.3); } 50% { transform: translateY(50vh) rotate(-10deg) scale(1.1); opacity: 0.2; opacity: var(--bean-opacity, 0.2); } 90% { transform: translateY(90vh) rotate(20deg) scale(0.9); opacity: 0.1; opacity: var(--bean-opacity, 0.1); } 100% { transform: translateY(110vh) rotate(0deg) scale(0.7); opacity: 0; } } /* Bean Spin */ @keyframes lcBeanSpin { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } } /* Bean Spin Reverse */ @keyframes lcBeanSpinReverse { 0%, 100% { transform: rotate(360deg); } 50% { transform: rotate(0deg); } } /* Bean Wobble */ @keyframes lcBeanWobble { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } } /* ========================================== SMOKE & STEAM ========================================== */ /* Smoke Drift (Header) */ @keyframes lcSmokeDrift { 0% { transform: translateX(-5%) scale(1); opacity: 0.4; } 50% { transform: translateX(5%) scale(1.05); opacity: 0.7; } 100% { transform: translateX(-5%) scale(1); opacity: 0.4; } } /* Steam Rise */ @keyframes lcSteamRise { 0% { transform: translateY(0) scale(1); opacity: 0.6; } 100% { transform: translateY(-100px) scale(2); opacity: 0; } } /* ========================================== PARTICLES ========================================== */ /* Floating Particles */ @keyframes lcParticles { 0% { background-position: 0 0; } 100% { background-position: 200px 200px; } } /* ========================================== CARD ANIMATIONS ========================================== */ /* Card Hover Lift */ @keyframes lcCardHover { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-12px) scale(1.02); } } /* ========================================== COFFEE POUR ========================================== */ /* Coffee Pour Effect */ @keyframes lcCoffeePour { 0% { transform: scaleY(0); transform-origin: top; } 100% { transform: scaleY(1); transform-origin: top; } } /* ========================================== REDUCED MOTION - DISABLE COFFEE EFFECTS ========================================== */ @media (prefers-reduced-motion: reduce) { .lc-header__bean { animation: none !important; opacity: 0.05 !important; } .lc-header__smoke { animation: none !important; opacity: 0.1 !important; } .lc-hero__smoke { animation: none !important; opacity: 0.2 !important; } } /* ═══════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════ */ /* ================================================== RESPONSIVE — BREAKPOINTS ================================================== */ /* ═══════════════════════════════════════════════════ BREAKPOINT VARIABLES ═══════════════════════════════════════════════════ */ :root { --bp-xs: 360px; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1366px; --bp-2xl: 1607px; } /* ═══════════════════════════════════════════════════ CUSTOM MEDIA QUERIES (for PostCSS) ═══════════════════════════════════════════════════ */ /* ================================================== RESPONSIVE — MOBILE (≤ 768px) ================================================== Header, navigation, and hero mobile styles are already in critical CSS. This file only contains mobile styles for other page sections. ================================================== */ @media (max-width: 768px) { /* About section mobile styles */ .lc-about__grid { grid-template-columns: 1fr; gap: 32px; } .lc-about__image { order: -1; } /* Products section mobile styles */ .lc-products__grid { grid-template-columns: 1fr; gap: 24px; } .lc-products__filters { flex-wrap: wrap; gap: 8px; } /* Export section mobile styles */ .lc-export__stats { grid-template-columns: 1fr 1fr; gap: 16px; } /* Quality section mobile styles */ .lc-quality__grid { grid-template-columns: 1fr; } /* Contact section mobile styles */ .lc-contact__grid { grid-template-columns: 1fr; gap: 40px; } .lc-contact__form { padding: 0; } /* CTA section mobile styles */ .lc-cta__title { font-size: max(28px, min(6vw, 36px)); } .lc-cta__actions { flex-direction: column; gap: 12px; width: 100%; } .lc-cta__actions .lc-button { width: 100%; justify-content: center; } /* Choose section mobile styles */ .lc-choose__grid { grid-template-columns: 1fr; gap: 24px; } .lc-choose__card { padding: 24px; } /* Brand Story mobile styles */ .lc-brand-story { padding: 60px 0; } .lc-brand-story__grid { grid-template-columns: 1fr; gap: 40px; } .lc-brand-story__title { font-size: max(28px, min(5vw, 36px)); } .lc-brand-story__roast-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .lc-brand-story__process { grid-template-columns: repeat(2, 1fr); gap: 24px; } .lc-brand-story__roasts { padding: 24px 20px; } .lc-brand-story__footer { grid-template-columns: 1fr; gap: 20px; } /* Products Preview mobile styles */ .origin-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } /* Footer mobile styles */ .lc-footer { padding: 40px 0 20px; } .lc-footer__grid { grid-template-columns: 1fr; gap: 24px; } .lc-footer__bottom { flex-direction: column; text-align: center; } } /* Very small devices (≤ 480px) */ @media (max-width: 480px) { .lc-choose__title { font-size: 26px; } .lc-cta__title { font-size: 24px; } .lc-footer__social { justify-content: center; } .lc-brand-story__roast-grid { grid-template-columns: 1fr; gap: 8px; } .lc-brand-story__process { grid-template-columns: 1fr 1fr; gap: 16px; } .company-contact { flex-direction: column; align-items: flex-start; gap: 4px; } .company-contact span { display: none; } } /* ================================================== RESPONSIVE — TABLET (769px - 1024px) ================================================== Header, navigation, and hero tablet styles are already in critical CSS. This file only contains tablet styles for other page sections. ================================================== */ @media (min-width: 769px) and (max-width: 1024px) { .lc-about__grid { grid-template-columns: 1fr 1fr; gap: 40px; } .lc-products__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .lc-export__stats { grid-template-columns: repeat(3, 1fr); } .lc-quality__grid { grid-template-columns: repeat(2, 1fr); } .lc-contact__grid { grid-template-columns: 1fr 1fr; gap: 48px; } .lc-cta__title { font-size: 36px; } .lc-choose__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .lc-choose__card:last-child { grid-column: span 2; } .lc-brand-story__grid { grid-template-columns: 1fr; gap: 40px; } .origin-grid { grid-template-columns: repeat(2, 1fr); } .lc-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } } /* ================================================== RESPONSIVE — LAPTOP (1025px - 1366px) ================================================== */ @media (min-width: 1025px) and (max-width: 1366px) { /* ═══════════════════════════════════════════════════ NAVIGATION — No color override! Uses critical CSS ═══════════════════════════════════════════════════ */ .lc-navigation__link { /* color: inherit; ← REMOVED — DO NOT override! */ font-size: 0.6rem; letter-spacing: 0.12em; } .lc-navigation__list { gap: 20px; } .lc-header { padding: 0 24px; } /* ═══════════════════════════════════════════════════ SECTION STYLES ═══════════════════════════════════════════════════ */ .lc-products__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } .lc-about__grid { gap: 40px; } .lc-hero__title { font-size: max(42px, min(4.5vw, 65px)); } .lc-hero__content { left: max(16px, min(3vw, 40px)); width: min(40vw, 480px); } .lc-brand-story__grid { gap: 40px; } .lc-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 30px; } } /* ================================================== RESPONSIVE — DESKTOP (1367px+) ================================================== */ @media (min-width: 1367px) { /* ═══════════════════════════════════════════════════ NAVIGATION — No color override! Uses critical CSS ═══════════════════════════════════════════════════ */ .lc-navigation__link { /* color: inherit; ← REMOVED — DO NOT override! */ font-size: 0.67rem; letter-spacing: 0.17em; } .lc-navigation__list { gap: 32px; } /* ═══════════════════════════════════════════════════ SECTION STYLES ═══════════════════════════════════════════════════ */ .lc-products__grid { grid-template-columns: repeat(4, 1fr); gap: 30px; } .lc-about__grid { grid-template-columns: 1fr 1fr; gap: 60px; } .lc-hero__title { font-size: max(52px, min(5.2vw, 82px)); } .lc-hero__content { left: max(20px, min(4vw, 60px)); width: min(42vw, 520px); } .lc-brand-story__grid { grid-template-columns: 1fr 1fr; gap: 60px; } .lc-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; } }