/* ============================================ GRITUAL - Shared Styles ============================================ */ /* CSS Custom Properties for per-product theming */ :root { --accent: #000; --accent-light: #333; --accent-bg: #f5f5f5; --tldr-bg: linear-gradient(135deg, #000 0%, #1a1a1a 100%); --tldr-accent: #4ade80; --tldr-bar: linear-gradient(90deg, #4ade80, #22c55e); --scroll-bar: linear-gradient(90deg, #000 0%, #333 100%); } /* Product-specific themes (set via class on or ) */ .theme-gummies { --accent: #7c3aed; --accent-light: #a78bfa; --tldr-bg: linear-gradient(135deg, #e11d48 0%, #7c3aed 100%); --tldr-accent: #fde68a; --tldr-bar: linear-gradient(90deg, #fb7185, #a78bfa); --scroll-bar: linear-gradient(90deg, #e11d48 0%, #7c3aed 100%); } .theme-vacuum { --accent: #000; --tldr-accent: #60a5fa; --tldr-bar: linear-gradient(90deg, #60a5fa, #3b82f6); } .theme-whitening { --accent: #7c3aed; --accent-light: #a855f7; --tldr-bg: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); --tldr-accent: #fff; --tldr-bar: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.5)); --scroll-bar: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%); } .theme-v15 { --tldr-accent: #fbbf24; --tldr-bar: linear-gradient(90deg, #f59e0b, #d97706); } .theme-containers { --tldr-accent: #a3a3a3; --tldr-bar: linear-gradient(90deg, #a3a3a3, #d4d4d4); } .theme-dryer { --tldr-accent: #4ade80; --tldr-bar: linear-gradient(90deg, #86efac, #4ade80); } .theme-oil { --accent: #15803d; --accent-light: #166534; --tldr-bg: linear-gradient(135deg, #15803d 0%, #14532d 100%); --tldr-accent: #86efac; --tldr-bar: linear-gradient(90deg, #86efac, #22c55e); --scroll-bar: linear-gradient(90deg, #15803d 0%, #166534 100%); } /* ============================================ Base ============================================ */ html, body { font-family: 'Inter', sans-serif; background-color: #ffffff; color: #0a0a0a; max-width: 100%; overflow-x: hidden; } /* ============================================ Navigation - Glass Panel ============================================ */ .glass-panel { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } /* ============================================ Scroll Progress Bar ============================================ */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--scroll-bar); z-index: 9999; transition: width 0.1s ease-out; } /* ============================================ Fade In Animation ============================================ */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ============================================ TL;DR Box ============================================ */ .tldr-box { background: var(--tldr-bg); border-radius: 16px; position: relative; overflow: hidden; } .tldr-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tldr-bar); } /* ============================================ Sticky Bottom CTA ============================================ */ .sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 12px 16px; transform: translateY(100%); transition: transform 0.3s ease; } .sticky-cta.visible { transform: translateY(0); } /* ============================================ Pulse CTA Animation ============================================ */ @keyframes pulse-subtle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } .pulse-cta { animation: pulse-subtle 2s ease-in-out infinite; } /* ============================================ Benefit Pills ============================================ */ .benefit-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #f5f5f5; border-radius: 100px; font-size: 13px; font-weight: 500; transition: all 0.2s ease; } .benefit-pill:hover { background: #e5e5e5; transform: scale(1.02); } /* ============================================ Science Card ============================================ */ .science-card { background: rgba(245, 245, 245, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(0, 0, 0, 0.03); transition: all 0.3s ease; } .science-card:hover { background: rgba(245, 245, 245, 0.9); transform: translateY(-2px); } /* ============================================ Tech Card ============================================ */ .tech-card { background: #fafafa; border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .tech-card:hover { border-color: #000; transform: scale(1.02); } /* ============================================ Product Card (Homepage) ============================================ */ .product-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .product-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } .product-card .benefit-badge { transition: all 0.3s ease; } .product-card:hover .benefit-badge { transform: scale(1.05); } .product-card .quick-add { opacity: 0; transform: translateY(8px); transition: all 0.3s ease; } .product-card:hover .quick-add { opacity: 1; transform: translateY(0); } /* ============================================ Cart Toast ============================================ */ .cart-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #fff; color: #0a0a0a; padding: 14px 18px; border-radius: 16px; font-size: 0.875rem; z-index: 9999; transform: translateY(calc(100% + 2rem)); opacity: 0; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05); max-width: 380px; pointer-events: none; } .cart-toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; } .cart-toast--error { border-left: 3px solid #ef4444; } .cart-toast-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #f5f5f5; overflow: hidden; } .cart-toast-thumb { width: 100%; height: 100%; object-fit: cover; } .cart-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cart-toast-title { font-weight: 700; font-size: 13px; line-height: 1.3; color: #0a0a0a; } .cart-toast-sub { font-size: 12px; color: #737373; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cart-toast-action { flex-shrink: 0; font-size: 12px; font-weight: 700; color: #0a0a0a; text-decoration: none; padding: 6px 14px; border-radius: 100px; background: #f5f5f5; transition: background 0.2s ease; } .cart-toast-action:hover { background: #e5e5e5; } @media (max-width: 480px) { .cart-toast { left: 1rem; right: 1rem; bottom: 5rem; max-width: none; } } /* ============================================ Stat Card ============================================ */ .stat-card { background: linear-gradient(145deg, #fafafa 0%, #f0f0f0 100%); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .stat-card:hover { transform: scale(1.03); border-color: rgba(0, 0, 0, 0.1); } /* ============================================ Gradient Text ============================================ */ .gradient-text { background: linear-gradient(135deg, #000 0%, #444 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================ Line Clamp ============================================ */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================ Counter Animation ============================================ */ .counter { display: inline-block; } /* ============================================ Float Animation ============================================ */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .float-animation { animation: float 3s ease-in-out infinite; } /* ============================================ Shimmer Badge ============================================ */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .shimmer-badge { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 3s infinite; } /* ============================================ Cookie Consent Banner ============================================ */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000; background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; padding: 20px 24px; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .cookie-banner.visible { transform: translateY(0); } .cookie-banner-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .cookie-banner-text { flex: 1; min-width: 250px; font-size: 13px; line-height: 1.6; color: #d4d4d4; } .cookie-banner-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .cookie-banner-text a:hover { color: #a3a3a3; } .cookie-banner-buttons { display: flex; gap: 10px; flex-shrink: 0; } .cookie-btn-accept { background: #fff; color: #0a0a0a; border: none; padding: 10px 24px; font-size: 13px; font-weight: 700; border-radius: 100px; cursor: pointer; transition: all 0.2s ease; } .cookie-btn-accept:hover { background: #e5e5e5; transform: scale(1.02); } .cookie-btn-reject { background: transparent; color: #a3a3a3; border: 1px solid rgba(255, 255, 255, 0.15); padding: 10px 24px; font-size: 13px; font-weight: 600; border-radius: 100px; cursor: pointer; transition: all 0.2s ease; } .cookie-btn-reject:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }