/* ==================== VoxCare WhatsApp Components ==================== */ /* whatsapp.css — ADD-ONLY file. Does not modify styles.css. */ /* Link this AFTER styles.css in . */ /* ==================== WhatsApp Booking Section ==================== */ .whatsapp-section { background: var(--bg-muted-2); padding: 5rem 1.5rem; position: relative; overflow: hidden; } .whatsapp-section::before { content: ''; position: absolute; top: -100px; left: -80px; width: 440px; height: 440px; background: radial-gradient(ellipse at center, rgba(37, 211, 102, 0.07) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 0; } .whatsapp-section::after { content: ''; position: absolute; bottom: -80px; right: -60px; width: 380px; height: 380px; background: radial-gradient(ellipse at center, rgba(107, 52, 214, 0.05) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 0; } .whatsapp-section .container { position: relative; z-index: 1; } /* Eyebrow badge — green tint to signal WhatsApp context */ .wa-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #128c4e; background: rgba(37, 211, 102, 0.1); border: 1px solid rgba(37, 211, 102, 0.28); border-radius: 100px; padding: 0.3rem 0.875rem; margin-bottom: 1.25rem; } /* Section intro layout */ .wa-intro { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; margin-bottom: 3rem; } @media (min-width: 900px) { .wa-intro { grid-template-columns: 1fr 1fr; gap: 4rem; } } .wa-intro-text h2 { font-family: var(--font-display); font-size: 2.25rem; font-weight: 400; color: var(--color-navy); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 1rem; } .wa-intro-text p { font-size: 1.0625rem; color: var(--text-body); opacity: 0.8; line-height: 1.65; margin-bottom: 1.75rem; } /* Primary WhatsApp CTA button */ .btn-whatsapp { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.9375rem 1.875rem; background: #25D366; color: #ffffff; border: 2px solid #25D366; border-radius: 8px; text-decoration: none; font-weight: 700; font-family: var(--font-family); font-size: 1rem; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; letter-spacing: 0.01em; } .btn-whatsapp svg { flex-shrink: 0; } .btn-whatsapp:hover, .btn-whatsapp:focus { background: #1da851; border-color: #1da851; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37, 211, 102, 0.35); } /* Mock WhatsApp chat preview panel */ .wa-chat-preview { background: #e5ddd5; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 48px rgba(26, 10, 53, 0.15); max-width: 380px; margin: 0 auto; } @media (min-width: 900px) { .wa-chat-preview { margin: 0; } } .wa-chat-header { background: #075e54; padding: 0.875rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; } .wa-chat-avatar { width: 40px; height: 40px; background: linear-gradient(135deg, var(--color-violet), var(--color-teal)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; } .wa-chat-header-info h4 { font-size: 0.9375rem; font-weight: 600; color: #ffffff; margin-bottom: 0.125rem; } .wa-chat-header-info span { font-size: 0.75rem; color: rgba(255, 255, 255, 0.75); } .wa-chat-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; min-height: 220px; } .wa-bubble { max-width: 80%; padding: 0.625rem 0.875rem; border-radius: 8px; font-size: 0.875rem; line-height: 1.5; color: #303030; position: relative; } .wa-bubble--received { background: #ffffff; border-radius: 0 8px 8px 8px; align-self: flex-start; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .wa-bubble--sent { background: #dcf8c6; border-radius: 8px 8px 0 8px; align-self: flex-end; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .wa-bubble time { display: block; font-size: 0.6875rem; color: #999; text-align: right; margin-top: 0.25rem; } /* Feature cards grid */ .wa-features-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { .wa-features-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .wa-features-grid { grid-template-columns: repeat(3, 1fr); } } .wa-feature-card { background: var(--white); border-radius: var(--radius-card); padding: 1.625rem; border: 1px solid rgba(26, 10, 53, 0.06); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 0.75rem; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .wa-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: rgba(37, 211, 102, 0.2); } .wa-feature-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, rgba(37, 211, 102, 0.12) 0%, rgba(107, 52, 214, 0.08) 100%); border: 1px solid rgba(37, 211, 102, 0.18); display: flex; align-items: center; justify-content: center; font-size: 1.375rem; flex-shrink: 0; } .wa-feature-card h3 { font-size: 1rem; font-weight: 700; color: var(--color-navy); line-height: 1.3; } .wa-feature-card p { font-size: 0.875rem; color: var(--text-body); opacity: 0.78; line-height: 1.6; } /* Bottom CTA strip */ .wa-cta-strip { margin-top: 3rem; padding: 2rem 2.25rem; background: linear-gradient(135deg, rgba(37, 211, 102, 0.08) 0%, rgba(107, 52, 214, 0.07) 100%); border: 1px solid rgba(37, 211, 102, 0.2); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .wa-cta-strip p { font-size: 1rem; font-weight: 600; color: var(--color-navy); line-height: 1.45; flex: 1; min-width: 220px; } .wa-cta-strip p span { display: block; font-size: 0.875rem; font-weight: 400; color: var(--text-body); opacity: 0.7; margin-top: 0.25rem; } /* ==================== Floating WhatsApp Button ==================== */ .wa-float { position: fixed; bottom: 6rem; /* sits above the existing .demo-badge */ right: 1.75rem; z-index: 998; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; } .wa-float.wa-float--visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .wa-float-label { background: var(--color-navy); color: #ffffff; font-size: 0.8125rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 100px; white-space: nowrap; box-shadow: 0 4px 14px rgba(26, 10, 53, 0.22); opacity: 0; transform: translateX(8px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .wa-float-btn { width: 56px; height: 56px; background: #25D366; color: #ffffff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; box-shadow: 0 6px 24px rgba(37, 211, 102, 0.42); transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; position: relative; flex-shrink: 0; } /* Pulse ring animation */ .wa-float-btn::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.4); animation: wa-pulse 2.4s ease-out infinite; } @keyframes wa-pulse { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .wa-float-btn::before { animation: none; } } .wa-float-btn:hover, .wa-float-btn:focus { background: #1da851; transform: scale(1.1) translateY(-2px); box-shadow: 0 10px 32px rgba(37, 211, 102, 0.52); } /* Show label on hover */ .wa-float:hover .wa-float-label, .wa-float-btn:focus + .wa-float-label { opacity: 1; transform: translateX(0); } /* Mobile: slightly smaller, lower position */ @media (max-width: 768px) { .wa-float { bottom: 5.5rem; right: 1.25rem; } .wa-float-btn { width: 50px; height: 50px; } } /* ==================== WhatsApp section mobile ==================== */ @media (max-width: 768px) { .whatsapp-section { padding: 3.5rem 1rem; } .wa-intro-text h2 { font-size: 1.75rem; } .wa-cta-strip { flex-direction: column; align-items: flex-start; padding: 1.5rem; } .wa-cta-strip .btn-whatsapp { width: 100%; justify-content: center; } } @media (max-width: 400px) { .wa-intro-text h2 { font-size: 1.5rem; } }