/* ============================================================ Long Van Quy - Redesign Layer v2 (compact) Premium tea brand - editorial - natural Load LAST in to enhance existing styles. ============================================================ */ :root { --lvq-green-900: #14331f; --lvq-green-800: #1a5f3b; --lvq-green-600: #2f7d4f; --lvq-gold: #d4af37; --lvq-gold-soft: #e8c469; --lvq-cream: #f5f1e8; --lvq-ink: #2a2118; --lvq-shadow-sm: 0 4px 14px rgba(20,51,31,0.06); --lvq-shadow-md: 0 18px 44px rgba(20,51,31,0.12); --lvq-radius: 18px; --lvq-radius-lg: 26px; --lvq-serif: 'Playfair Display','Noto Serif',Georgia,serif; --lvq-sans: 'Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --lvq-ease: cubic-bezier(0.22,1,0.36,1); } /* --- Global rhythm --- */ .homepage-hero, .homepage-overview-section, .homepage-journey-section, .traditional-story-section { font-family: var(--lvq-sans); } .homepage-section-title, .traditional-story-heading { font-family: var(--lvq-serif) !important; letter-spacing: -0.01em; color: var(--lvq-green-900) !important; } .homepage-section-kicker, .traditional-story-feature-tag { font-family: var(--lvq-sans); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 700; color: var(--lvq-gold) !important; } /* --- HERO --- */ .homepage-hero { height: 92vh !important; min-height: 620px !important; } .homepage-hero-overlay { background: linear-gradient(180deg,rgba(10,28,18,0.55) 0%,rgba(10,28,18,0.35) 45%,rgba(10,28,18,0.72) 100%) !important; z-index: 2 !important; } .homepage-hero-content { z-index: 3 !important; max-width: 880px; padding: 0 24px; } .homepage-hero-tag { text-transform: uppercase; letter-spacing: 0.42em; font-size: 0.82rem !important; font-weight: 600; color: var(--lvq-gold-soft) !important; margin-bottom: 18px !important; } .homepage-hero-title { font-family: var(--lvq-serif) !important; font-weight: 600 !important; font-size: clamp(3rem,7vw,5.4rem) !important; line-height: 1.02 !important; color: #fff !important; text-shadow: 0 6px 30px rgba(0,0,0,0.4); margin-bottom: 18px !important; } .homepage-hero-subtitle { font-size: clamp(1.05rem,2vw,1.4rem) !important; color: rgba(255,255,255,0.92) !important; line-height: 1.7; max-width: 640px; margin: 0 auto 32px; } .homepage-hero-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--lvq-gold) !important; color: var(--lvq-green-900) !important; padding: 16px 38px !important; border-radius: 60px !important; font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; border: none; box-shadow: 0 8px 32px rgba(212,175,55,0.35); transition: transform 0.4s var(--lvq-ease), box-shadow 0.4s var(--lvq-ease); } .homepage-hero-cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 44px rgba(212,175,55,0.45); } /* --- Cards & sections polish --- */ .homepage-product-card, .homepage-blog-card { border-radius: var(--lvq-radius) !important; overflow: hidden; box-shadow: var(--lvq-shadow-sm); transition: transform 0.45s var(--lvq-ease), box-shadow 0.45s var(--lvq-ease); } .homepage-product-card:hover, .homepage-blog-card:hover { transform: translateY(-6px); box-shadow: var(--lvq-shadow-md); } /* --- Buttons general --- */ .btn-primary, .homepage-cta-btn { background: var(--lvq-green-800) !important; border-radius: 60px !important; padding: 14px 34px !important; font-weight: 600; letter-spacing: 0.03em; transition: background 0.3s, transform 0.3s var(--lvq-ease); } .btn-primary:hover, .homepage-cta-btn:hover { background: var(--lvq-green-600) !important; transform: translateY(-2px); } /* --- Footer polish --- */ .homepage-footer { background: var(--lvq-green-900) !important; color: rgba(255,255,255,0.85); } /* --- Smooth scroll --- */ html { scroll-behavior: smooth; } /* --- Cross-page premium skin --- */ body { color: var(--lvq-ink); background: linear-gradient(180deg,#fffaf0 0%,#f7f0df 42%,#fff 100%); } .about-hero-title, .products-hero-title, .blog-hero-title, .contact-hero-title, .experience-hero-title, .product-detail-title, .blog-detail-title { font-family: var(--lvq-serif) !important; letter-spacing: -0.025em; } .about-hero-kicker, .products-hero-kicker, .blog-hero-kicker, .contact-hero-kicker, .experience-hero-kicker, .product-detail-category, .blog-detail-category { text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; color: var(--lvq-gold) !important; } .about-hero, .products-hero, .blog-hero, .contact-hero, .experience-hero { isolation: isolate; } .about-hero::after, .products-hero::after, .blog-hero::after, .contact-hero::after, .experience-hero::after { content: ""; position: absolute; inset: auto 8vw 42px auto; width: min(260px,32vw); height: 1px; background: linear-gradient(90deg,transparent,var(--lvq-gold),transparent); opacity: 0.8; z-index: 4; } .about-origin-section, .products-section, .blog-section, .contact-section, .experience-section { background: transparent !important; } .about-origin-grid, .contact-info-card, .experience-card, .blog-card, .product-card, .product-detail-card, .blog-detail-content { border: 1px solid rgba(20,51,31,0.08) !important; border-radius: var(--lvq-radius-lg) !important; box-shadow: var(--lvq-shadow-sm) !important; } .about-origin-grid:hover, .contact-info-card:hover, .experience-card:hover, .blog-card:hover, .product-card:hover { box-shadow: var(--lvq-shadow-md) !important; } .about-origin-title, .about-values-title, .products-section-title, .blog-section-title, .contact-section-title, .experience-section-title, .product-card-title, .blog-card-title { font-family: var(--lvq-serif) !important; color: var(--lvq-green-900) !important; } .product-card img, .blog-card img, .about-image-hover, .experience-card img { filter: saturate(1.05) contrast(1.03); transition: transform 0.6s var(--lvq-ease), filter 0.6s var(--lvq-ease); } .product-card:hover img, .blog-card:hover img, .about-image-hover:hover, .experience-card:hover img { transform: scale(1.04); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(212,175,55,0.75) !important; outline-offset: 3px; } @media (max-width: 768px) { .homepage-hero { min-height: 560px !important; } .homepage-hero-title { font-size: clamp(2.4rem,12vw,3.8rem) !important; } .about-hero::after, .products-hero::after, .blog-hero::after, .contact-hero::after, .experience-hero::after { display: none; } } /* --- Real component aliases --- */ .special-card, .blog-hero-featured, .blog-magazine-editorial, .blog-companion-panel, .blog-spotlight-card, .blog-detail-hero-panel, .blog-detail-article, .tea-product-detail-grid { border: 1px solid rgba(20,51,31,0.08) !important; border-radius: var(--lvq-radius-lg) !important; box-shadow: var(--lvq-shadow-sm) !important; } .special-card:hover, .blog-hero-featured:hover, .blog-spotlight-card:hover { box-shadow: var(--lvq-shadow-md) !important; transform: translateY(-4px); } .special-card, .blog-hero-featured, .blog-spotlight-card { transition: transform 0.45s var(--lvq-ease), box-shadow 0.45s var(--lvq-ease); } .special-title, .special-card-title, .contact-info-title, .blog-detail-hero-title, .blog-detail-panel-text, .tea-product-detail-title { font-family: var(--lvq-serif) !important; color: var(--lvq-green-900) !important; } .special-kicker, .blog-section-kicker, .contact-section-kicker, .blog-detail-panel-kicker { text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; color: var(--lvq-gold) !important; } .special-card-media, .blog-card-image-container, .blog-hero-featured-media, .blog-detail-image-shell { overflow: hidden; } .special-card-media img, .blog-card-image, .blog-hero-featured-media img, .blog-detail-image { filter: saturate(1.06) contrast(1.04); transition: transform 0.65s var(--lvq-ease), filter 0.65s var(--lvq-ease); } .special-card:hover .special-card-media img, .blog-card:hover .blog-card-image, .blog-hero-featured:hover img { transform: scale(1.045); } /* --- Contrast fixes from visual QA --- */ .homepage-editorial-feature, .blog-companion-panel, .quote-cta-content { color: #fff8ec !important; } .homepage-editorial-feature .homepage-section-title, .blog-companion-panel .blog-section-title, .quote-cta-content .quote-cta-heading { color: #fff8ec !important; text-shadow: 0 2px 18px rgba(0,0,0,0.28); } .homepage-editorial-feature .homepage-section-description, .blog-companion-panel p, .quote-cta-content .quote-cta-description { color: rgba(255,248,236,0.9) !important; text-shadow: 0 1px 10px rgba(0,0,0,0.22); } .homepage-editorial-feature .homepage-section-kicker, .blog-companion-panel .blog-section-kicker, .quote-cta-content .homepage-section-kicker { background: rgba(255,248,236,0.14) !important; color: #f4c84a !important; } .homepage-editorial-feature .homepage-editorial-link, .quote-cta-button-primary { color: #2b2518 !important; } .quote-cta-button-secondary { color: #fff8ec !important; border-color: rgba(255,248,236,0.55) !important; background: rgba(255,248,236,0.08) !important; } .quote-cta-highlights span { color: #fff8ec !important; background: rgba(255,248,236,0.13) !important; border-color: rgba(255,248,236,0.28) !important; } .special-collection-section .homepage-section-kicker, .special-collection-section .special-collection-heading, .special-collection-section .special-collection-subtitle { color: #fff8ec !important; text-shadow: 0 2px 18px rgba(0,0,0,0.35); } .special-collection-section .homepage-section-kicker { background: rgba(255,248,236,0.1) !important; color: #f4c84a !important; } .special-collection-section .special-collection-underline { background: linear-gradient(90deg,var(--lvq-green-600),var(--lvq-gold-soft)) !important; } .special-collection-note, .special-collection-meta-item { background: rgba(255,255,255,0.9) !important; color: var(--lvq-ink) !important; } .special-collection-note strong, .special-collection-meta-item strong { color: var(--lvq-ink) !important; } .special-collection-note p, .special-collection-meta-item span { color: rgba(42,33,24,0.72) !important; } .blog-companion-panel { background: linear-gradient(135deg,#173722 0%,#6b5b19 100%) !important; } .blog-companion-panel .blog-section-title { color: #fff8ec !important; } .blog-magazine-overview .blog-companion-card { background: linear-gradient(135deg,#173722 0%,#6b5b19 100%) !important; color: #fff8ec !important; } .blog-magazine-overview .blog-companion-card .blog-section-title { color: #fff8ec !important; text-shadow: 0 2px 18px rgba(0,0,0,0.3); } .blog-magazine-overview .blog-companion-card .blog-section-kicker { background: rgba(255,248,236,0.14) !important; color: #f4c84a !important; } .blog-magazine-overview .blog-reading-promise { background: linear-gradient(135deg,#173722 0%,#6b5b19 100%) !important; color: #fff8ec !important; } .blog-magazine-overview .blog-reading-promise .blog-section-title { color: #fff8ec !important; text-shadow: 0 2px 18px rgba(0,0,0,0.3); } .blog-magazine-overview .blog-reading-promise .blog-section-kicker { background: rgba(255,248,236,0.14) !important; color: #f4c84a !important; }