*{margin: 0;padding: 0;box-sizing: border-box} :root{--color-dark: #1e1e1e;--color-body: #3a3a3a;--color-muted: #8a8580;--color-accent: #b8976a;--color-border: rgba(0,0,0,0.08);--bg-warm: #F8F6F3;--bg-cream: #F2EFEB;--bg-white: #FEFEFE;--transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);--primary-color: #1e1e1e;--secondary-color: #8a8580;--accent-color: #b8976a;--text-dark: #1e1e1e;--text-light: #8a8580;--bg-light: #F8F6F3;--shadow: none;--shadow-lg: none;--radius: 0px;--radius-lg: 0px} body{font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;line-height: 1.7;color: var(--color-body);background-color: var(--bg-white);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale} .container{max-width: 1200px;margin: 0 auto;padding: 0 40px} h1, h2, h3, h4{font-family: 'Playfair Display', 'Noto Serif SC', Georgia, serif;font-weight: 400;line-height: 1.25;color: var(--color-dark)} a{color: inherit} .navbar{background: rgba(254, 254, 254, 0.97);border-bottom: 1px solid var(--color-border);position: fixed;width: 100%;top: 0;z-index: 1000;transition: var(--transition)} .navbar .container{display: flex;justify-content: space-between;align-items: center;padding: 1.2rem 40px;gap: 2rem} .logo-container{display: flex;align-items: center;gap: 0.6rem} .logo-icon{color: var(--color-dark);transition: var(--transition);opacity: 0.7} .logo-icon svg{display: block} .nav-brand:hover .logo-icon{opacity: 1} .nav-brand .logo-text{font-size: 1.4rem;color: var(--color-dark);margin: 0;font-weight: 400;font-family: 'Playfair Display', 'Noto Serif SC', serif;letter-spacing: 0.08em} .nav-brand .tagline{font-size: 0.6rem;color: var(--color-muted);font-weight: 400;text-transform: uppercase;letter-spacing: 0.25em;display: block;margin-top: 0.1rem;margin-left: 42px;font-family: 'Lato', sans-serif} .nav-menu{display: flex;list-style: none;gap: 2.5rem} .nav-menu a{text-decoration: none;color: var(--color-body);font-family: 'Lato', sans-serif;font-weight: 400;font-size: 0.72rem;letter-spacing: 0.14em;text-transform: uppercase;transition: var(--transition);position: relative;padding: 0.3rem 0} .nav-menu a:hover{color: var(--color-dark)} .nav-menu a::after{content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 1px;background: var(--color-dark);transition: width 0.4s ease} .nav-menu a:hover::after{width: 100%} .nav-actions{display: flex;gap: 0.75rem;align-items: center} .cart-btn, .user-btn{background: none;border: none;cursor: pointer;padding: 0.5rem;position: relative;color: var(--color-body);transition: var(--transition)} .cart-btn:hover, .user-btn:hover{color: var(--color-dark)} .cart-btn svg, .user-btn svg{width: 20px;height: 20px;stroke-width: 1.5} .cart-count{position: absolute;top: 0;right: 0;background: var(--color-dark);color: white;border-radius: 50%;width: 16px;height: 16px;font-size: 0.6rem;font-weight: 700;display: flex;align-items: center;justify-content: center} .cart-count:empty, .cart-count:contains('0'){display: none} .language-switcher{display: flex;align-items: center;gap: 0.4rem;margin-right: 0.3rem} .lang-btn{background: none;border: none;color: var(--color-muted);font-size: 0.7rem;font-weight: 400;cursor: pointer;padding: 0.25rem 0.3rem;transition: var(--transition);letter-spacing: 0.05em} .lang-btn:hover, .lang-btn.active{color: var(--color-dark)} .lang-divider{color: var(--color-border);font-size: 0.7rem} .nav-toggle{display: none;flex-direction: column;cursor: pointer} .nav-toggle span{width: 22px;height: 1.5px;background: var(--color-dark);margin: 3px 0;transition: var(--transition)} .hero{margin-top: 80px;height: 90vh;position: relative;overflow: hidden} .hero-slider{height: 100%;position: relative} .hero-slide{height: 100%;background-size: cover;background-position: center;position: relative;display: flex;align-items: center;justify-content: center} .hero-slide::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient( to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.5) 100% )} .hero-content{text-align: center;color: white;z-index: 1;animation: fadeInUp 1.2s ease;max-width: 800px;padding: 0 2rem} .hero-content h2{font-size: 4.5rem;margin-bottom: 1.5rem;font-weight: 400;letter-spacing: 0.08em;line-height: 1.15;color: white} .hero-content p{font-size: 1.1rem;margin-bottom: 3rem;font-weight: 300;opacity: 0.85;letter-spacing: 0.04em;font-family: 'Playfair Display', 'Noto Serif SC', serif;font-style: italic} .btn-primary, .btn-secondary{display: inline-block;padding: 14px 40px;text-decoration: none;cursor: pointer;transition: var(--transition);font-family: 'Lato', sans-serif;font-weight: 400;text-transform: uppercase;letter-spacing: 0.18em;font-size: 0.7rem;border: 1px solid rgba(255,255,255,0.6);background: transparent;color: white} .btn-primary:hover{background: white;color: var(--color-dark);border-color: white} .btn-secondary{color: var(--color-dark);border-color: var(--color-dark)} .btn-secondary:hover{background: var(--color-dark);color: white} .section-title{font-size: 2.2rem;text-align: center;margin-bottom: 1.5rem;color: var(--color-dark);font-weight: 400;letter-spacing: 0.04em} .section-subtitle{text-align: center;max-width: 580px;margin: 0 auto 4rem;color: var(--color-muted);font-size: 0.95rem;line-height: 1.9;font-family: 'Playfair Display', 'Noto Serif SC', serif;font-style: italic;font-weight: 400} .about{padding: 120px 0;background: var(--bg-warm)} .products{padding: 120px 0;background: var(--bg-white)} .tea-category{margin-bottom: 100px} .tea-category:last-child{margin-bottom: 0} .category-title{font-size: 1rem;margin-bottom: 2.5rem;text-align: left;color: var(--color-muted);font-family: 'Lato', sans-serif;font-weight: 400;letter-spacing: 0.2em;text-transform: uppercase;padding-bottom: 1rem;border-bottom: 1px solid var(--color-border)} .product-grid{display: grid;grid-template-columns: repeat(3, 1fr);gap: 2.5rem;margin-top: 0} .product-card{background: transparent;overflow: hidden;transition: var(--transition);position: relative;cursor: pointer} .product-card:hover{transform: none} .product-image{aspect-ratio: 4 / 5;overflow: hidden;position: relative;background: var(--bg-warm)} .product-image img{width: 100%;height: 100%;object-fit: cover;transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)} .product-card:hover .product-image img{transform: scale(1.04)} .product-info{padding: 1.2rem 0.2rem} .product-info h4{font-size: 1.05rem;margin-bottom: 0.4rem;color: var(--color-dark);font-weight: 400;letter-spacing: 0.02em} .product-info p{color: var(--color-muted);margin-bottom: 1rem;font-size: 0.82rem;line-height: 1.7;letter-spacing: 0.01em} .process{padding: 120px 0;background: var(--bg-warm)} .process-timeline{display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 3rem;margin-top: 4rem} .process-step{text-align: center;position: relative} .step-image{width: 200px;height: 200px;margin: 0 auto 2rem;border-radius: 50%;overflow: hidden;position: relative;transition: var(--transition)} .step-image img{width: 100%;height: 100%;object-fit: cover} .process-step:hover .step-image{transform: scale(1.03)} .step-info h4{font-size: 1.1rem;margin-bottom: 0.6rem;color: var(--color-dark);font-weight: 400;letter-spacing: 0.02em} .step-info p{color: var(--color-muted);max-width: 250px;margin: 0 auto;font-size: 0.85rem;line-height: 1.8} .giftsets{padding: 120px 0;background: var(--bg-white)} .gift-grid{display: grid;grid-template-columns: repeat(3, 1fr);gap: 2.5rem;margin-top: 4rem} .gift-card{background: transparent;overflow: hidden;transition: var(--transition)} .gift-card:hover{transform: none} .gift-image{aspect-ratio: 4 / 3;overflow: hidden} .gift-placeholder{width: 100%;height: 100%;background: var(--bg-warm);display: flex;align-items: center;justify-content: center;font-size: 3rem;color: var(--color-muted)} .gift-placeholder img{width: 100%;height: 100%;object-fit: cover;transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)} .gift-card:hover .gift-placeholder img{transform: scale(1.03)} .gift-info{padding: 1.8rem 0.3rem} .gift-info h3{font-size: 1.2rem;margin-bottom: 0.4rem;color: var(--color-dark);font-weight: 400;letter-spacing: 0.02em} .gift-info p{color: var(--color-muted);margin-bottom: 1rem;font-size: 0.82rem;line-height: 1.7} .gift-info ul{list-style: none;margin-bottom: 1.8rem} .gift-info ul li{padding: 0.25rem 0;color: var(--color-body);position: relative;padding-left: 1.2rem;font-size: 0.85rem} .gift-info ul li::before{content: '\2014';position: absolute;left: 0;color: var(--color-accent);font-size: 0.7rem} .gift-info .btn-primary, .product-info .btn-secondary{color: var(--color-dark);border-color: var(--color-dark);background: transparent} .gift-info .btn-primary:hover, .product-info .btn-secondary:hover{background: var(--color-dark);color: white} .footer{background: var(--color-dark);color: rgba(255,255,255,0.8);padding: 80px 0 30px} .footer-content{display: grid;grid-template-columns: repeat(4, 1fr);gap: 3rem;margin-bottom: 3rem} .footer-section h3, .footer-section h4{margin-bottom: 1.2rem;color: white;font-size: 0.7rem;font-family: 'Lato', sans-serif;font-weight: 400;text-transform: uppercase;letter-spacing: 0.15em} .footer-brand{display: flex;align-items: center;gap: 0.5rem;margin-bottom: 1rem} .footer-brand svg{color: var(--color-accent);opacity: 0.7} .footer-brand h3{font-size: 1.3rem !important;font-weight: 400 !important;color: white !important;margin: 0 !important;font-family: 'Playfair Display', 'Noto Serif SC', serif !important;letter-spacing: 0.06em !important;text-transform: none !important} .footer-section p{margin-bottom: 0.5rem;font-size: 0.85rem;opacity: 0.7} .footer-section ul{list-style: none} .footer-section ul li{padding: 0.25rem 0} .footer-section a{color: rgba(255,255,255,0.7);text-decoration: none;font-size: 0.85rem;transition: var(--transition)} .footer-section a:hover{color: white} .newsletter-form{display: flex;margin-top: 1rem} .newsletter-form input{flex: 1;padding: 10px 14px;border: 1px solid rgba(255,255,255,0.2);background: transparent;color: white;font-size: 0.82rem;font-family: 'Lato', sans-serif} .newsletter-form input::placeholder{color: rgba(255,255,255,0.4)} .newsletter-form input:focus{outline: none;border-color: rgba(255,255,255,0.5)} .newsletter-form button{border: 1px solid rgba(255,255,255,0.3);background: transparent;color: white;padding: 10px 20px;font-size: 0.68rem;text-transform: uppercase;letter-spacing: 0.15em;font-family: 'Lato', sans-serif;cursor: pointer;transition: var(--transition);white-space: nowrap} .newsletter-form button:hover{background: white;color: var(--color-dark)} .footer-bottom{text-align: center;padding-top: 2rem;border-top: 1px solid rgba(255,255,255,0.1);font-size: 0.78rem;opacity: 0.5} .modal{display: none;position: fixed;z-index: 2000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.7);animation: fadeIn 0.3s ease;align-items: center;justify-content: center} .modal-content{background-color: white;margin: 5% auto;padding: 0;width: 90%;max-width: 800px;position: relative;animation: slideIn 0.3s ease} .close{color: var(--color-muted);position: absolute;right: 20px;top: 15px;font-size: 28px;font-weight: 300;cursor: pointer;z-index: 1} .close:hover{color: var(--color-dark)} @keyframes fadeIn{from{opacity: 0} to{opacity: 1} } @keyframes fadeInUp{from{opacity: 0;transform: translateY(30px)} to{opacity: 1;transform: translateY(0)} } @keyframes slideIn{from{transform: translateY(-50px);opacity: 0} to{transform: translateY(0);opacity: 1} } .cart-modal .modal-content{max-width: 550px} .modal-header{display: flex;justify-content: space-between;align-items: center;padding: 1.5rem 2rem;border-bottom: 1px solid var(--color-border)} .modal-header h2{margin: 0;font-size: 1.1rem;letter-spacing: 0.02em} #cartContent{padding: 1.5rem 2rem;max-height: 400px;overflow-y: auto} .empty-cart{text-align: center;padding: 3rem;color: var(--color-muted);font-size: 0.9rem} .cart-item{display: flex;gap: 1rem;padding: 1rem 0;border-bottom: 1px solid var(--color-border);align-items: center} .cart-item-image{width: 70px;height: 70px;object-fit: cover} .cart-item-info{flex: 1} .cart-item-info h4{margin: 0 0 0.3rem;font-size: 0.95rem} .cart-item-price{color: var(--color-muted);font-size: 0.85rem} .cart-item-quantity{display: flex;align-items: center;gap: 0.5rem} .cart-item-quantity button{background: var(--bg-warm);border: none;width: 28px;height: 28px;cursor: pointer;transition: var(--transition);font-size: 0.85rem} .cart-item-quantity button:hover{background: var(--color-dark);color: white} .cart-item-remove{background: none;border: none;color: var(--color-muted);cursor: pointer;font-size: 1rem;transition: var(--transition)} .cart-item-remove:hover{color: var(--color-dark)} .cart-footer{padding: 1.5rem 2rem;border-top: 1px solid var(--color-border);background: var(--bg-warm)} .cart-total{display: flex;justify-content: space-between;align-items: center;font-size: 1rem;margin-bottom: 1rem;color: var(--color-dark);letter-spacing: 0.02em} .user-modal .modal-content{max-width: 400px} .auth-form{padding: 2rem} .auth-form h3{margin-bottom: 1.5rem;text-align: center;font-size: 1.2rem} .auth-form form{display: flex;flex-direction: column;gap: 1rem} .auth-form input{padding: 0.75rem;border: 1px solid var(--color-border);font-size: 0.9rem;font-family: 'Lato', sans-serif;transition: var(--transition)} .auth-form input:focus{outline: none;border-color: var(--color-dark)} .auth-form p{text-align: center;margin-top: 1rem;color: var(--color-muted);font-size: 0.85rem} .auth-form a{color: var(--color-dark);text-decoration: none} .auth-form a:hover{text-decoration: underline} .user-info{padding: 2rem;text-align: center} .user-info p{margin-bottom: 1rem;color: var(--color-body)} .toast{position: fixed;bottom: 2rem;right: 2rem;background: var(--color-dark);color: white;padding: 1rem 2rem;font-size: 0.85rem;letter-spacing: 0.02em;transform: translateY(100px);opacity: 0;transition: var(--transition);z-index: 3000} .toast.show{transform: translateY(0);opacity: 1} .toast.error{background: #c0392b} .toast.success{background: var(--color-dark)} [lang="zh-CN"] .nav-menu a{font-family: 'Noto Serif SC', serif;font-weight: 400;font-size: 0.82rem;letter-spacing: 0.2em;text-transform: none} [lang="zh-CN"] .section-title{font-family: 'Noto Serif SC', 'Playfair Display', serif;font-weight: 500;letter-spacing: 0.1em} [lang="zh-CN"] .category-title{font-family: 'Noto Serif SC', sans-serif;letter-spacing: 0.15em} [lang="zh-CN"] .hero-content h2{font-family: 'Noto Serif SC', 'Playfair Display', serif;font-weight: 400;letter-spacing: 0.15em;font-size: 4rem} [lang="zh-CN"] .hero-content p{font-family: 'Noto Serif SC', sans-serif;font-weight: 300;letter-spacing: 0.08em;font-style: normal} [lang="zh-CN"] .product-info h4, [lang="zh-CN"] .gift-info h3{font-family: 'Noto Serif SC', 'Playfair Display', serif;font-weight: 500;letter-spacing: 0.06em} [lang="zh-CN"] .step-info h4{font-family: 'Noto Serif SC', serif;font-weight: 400} [lang="zh-CN"] .section-subtitle{font-family: 'Noto Serif SC', sans-serif;font-weight: 300;letter-spacing: 0.04em;font-style: normal} [lang="zh-CN"] .footer-section h4{font-family: 'Noto Serif SC', sans-serif;letter-spacing: 0.12em} [lang="zh-CN"] .btn-primary, [lang="zh-CN"] .btn-secondary{font-family: 'Noto Serif SC', sans-serif;font-size: 0.78rem;letter-spacing: 0.15em;font-weight: 400;text-transform: none} .bilingual-text{display: block} [lang="en"] .bilingual-text .zh-text{display: none} [lang="zh-CN"] .bilingual-text .en-text{display: none} @media (max-width: 768px){.container{padding: 0 20px} .navbar{padding: 0;position: fixed;background: rgba(254, 254, 254, 0.98)} .navbar .container{padding: 0.75rem 20px;position: relative} .logo-container{gap: 0.4rem} .logo-icon svg{width: 24px;height: 24px} .nav-brand .logo-text{font-size: 1.2rem} .nav-brand .tagline{display: none} .language-switcher{margin-right: 0.3rem;order: -1} .lang-btn{font-size: 0.65rem;padding: 0.15rem 0.25rem} .nav-actions{gap: 0.3rem;margin-left: auto} .cart-btn, .user-btn{padding: 10px;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center} .nav-menu{position: fixed;left: 0;top: 58px;width: 100%;height: 0;flex-direction: column;background-color: var(--bg-white);text-align: center;transition: height 0.3s ease, opacity 0.3s ease;padding: 0;z-index: 999;overflow: hidden;opacity: 0;border-bottom: 1px solid var(--color-border)} .nav-menu.active{height: auto;min-height: 280px;padding: 2rem 0;opacity: 1} .nav-menu li{margin: 0.4rem 0} .nav-menu a{display: block;padding: 0.6rem 2rem;font-size: 0.75rem} .nav-toggle{display: flex;flex-direction: column;justify-content: center;width: 40px;height: 40px;padding: 10px;cursor: pointer;-webkit-tap-highlight-color: transparent} .nav-toggle span{width: 20px;height: 1.5px;background: var(--color-dark);margin: 2.5px 0;transition: all 0.3s ease} .nav-toggle.active span:nth-child(1){transform: rotate(45deg) translate(4px, 4px)} .nav-toggle.active span:nth-child(2){opacity: 0} .nav-toggle.active span:nth-child(3){transform: rotate(-45deg) translate(4px, -4px)} .hero{height: 65vh;min-height: 400px;margin-top: 58px} .hero-content{padding: 1.5rem} .hero-content h2{font-size: 2.2rem;line-height: 1.2;margin-bottom: 0.75rem} .hero-content p{font-size: 0.95rem;margin-bottom: 1.5rem} .btn-primary, .btn-secondary{padding: 12px 28px;font-size: 0.65rem} section, .about, .products, .process, .giftsets{padding: 70px 0} .section-title{font-size: 1.6rem;margin-bottom: 1rem} .section-subtitle{font-size: 0.9rem;margin-bottom: 2.5rem} .product-grid{grid-template-columns: 1fr;gap: 2rem} .product-card{overflow: hidden} .product-card:active{opacity: 0.9} .gift-grid{grid-template-columns: 1fr;gap: 2.5rem} .process-timeline{grid-template-columns: 1fr;gap: 2rem} .step-image{width: 140px;height: 140px;margin-bottom: 1.5rem} .footer{padding: 50px 0 20px} .footer-content{grid-template-columns: 1fr;gap: 2rem;text-align: center} .newsletter-form{flex-direction: column;gap: 0.5rem} .modal{align-items: flex-end;justify-content: center;display: none} .modal-content{width: 100%;max-width: 100%;margin: 0;max-height: 90vh;animation: slideUp 0.3s ease;overflow-y: auto;-webkit-overflow-scrolling: touch} .modal-header{position: sticky;top: 0;background: white;z-index: 10} .close{position: fixed;right: 15px;top: 70px;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;background: rgba(255,255,255,0.9);font-size: 22px} .cart-modal .modal-content{padding-bottom: env(safe-area-inset-bottom)} .cart-footer{position: sticky;bottom: 0;background: white;padding: 1rem 1.5rem;border-top: 1px solid var(--color-border);padding-bottom: calc(1rem + env(safe-area-inset-bottom))} .toast{bottom: calc(1rem + env(safe-area-inset-bottom));right: 1rem;left: 1rem;text-align: center} .category-title{font-size: 0.85rem;margin: 1.5rem 0 1.5rem} .footer{padding: 50px 0 calc(20px + env(safe-area-inset-bottom))} @keyframes slideUp{from{transform: translateY(100%)} to{transform: translateY(0)} } } @media (max-width: 380px){.navbar .container{padding: 0.5rem 15px} .logo-icon{display: none} .nav-brand .logo-text{font-size: 1.1rem} .cart-btn, .user-btn{width: 36px;height: 36px;padding: 8px} .cart-btn svg, .user-btn svg{width: 18px;height: 18px} }