/* global.css - Base Reset, Typography, Buttons & Keyframe Animations */ /* Font loaded via in HTML for non-blocking rendering */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-family: var(--font-family-base); font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--color-bg-dark); color: var(--color-text-main); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Container */ .container { width: 100%; max-width: var(--container-max-width); margin-inline: auto; padding-inline: var(--container-padding-x, var(--space-lg)); } /* Button Component (BEM) */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.6rem; font-size: var(--font-size-sm); font-weight: 600; border-radius: var(--radius-pill); transition: all var(--transition-normal); cursor: pointer; white-space: nowrap; letter-spacing: 0.02em; text-decoration: none; } /* Primary Button: Dark fill with thin purple border & soft glow */ .btn--primary { background-color: #0d0d0f; color: #F5F5F5; border: 1px solid var(--color-purple-border); box-shadow: 0 0 12px var(--color-primary-glow); } .btn--primary:hover { border-color: var(--color-primary); background-color: #121215; box-shadow: 0 0 18px var(--color-primary-glow); transform: translateY(-2px); } /* Secondary Button: Transparent background with thin gray border */ .btn--secondary { background-color: transparent; color: #F5F5F5; border: 1px solid var(--color-border-dark); } .btn--secondary:hover { border-color: var(--color-border-hover); background-color: rgba(255, 255, 255, 0.04); transform: translateY(-2px); } /* Outer Header CTA Button */ .btn--nav-cta { background-color: #0d0d0f; color: #F5F5F5; border: 1px solid var(--color-purple-border); padding: 0.55rem 1.25rem; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 0 10px var(--color-primary-glow); } .btn--nav-cta:hover { border-color: var(--color-primary); color: #F5F5F5; box-shadow: 0 0 16px var(--color-primary-glow); } /* Keyframe Animations for Entrance */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeScaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .animate-fade-down { animation: fadeInDown 0.6s var(--transition-normal) forwards; } .animate-fade-scale { animation: fadeScaleIn 0.6s var(--transition-normal) 0.05s both; } .animate-fade-up-1 { animation: fadeInUp 0.6s var(--transition-normal) 0.05s both; } .animate-fade-up-2 { animation: fadeInUp 0.6s var(--transition-normal) 0.12s both; } .animate-fade-up-3 { animation: fadeInUp 0.6s var(--transition-normal) 0.2s both; } /* Global Footer */ .footer { padding: var(--space-2xl) 0 var(--space-xl) 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: var(--font-size-xs); color: var(--color-text-subtle); background-color: var(--color-bg-dark); } .footer__content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); } .footer__brand { font-weight: 700; color: #F5F5F5; text-decoration: none; display: inline-flex; align-items: center; } .footer__brand-logo-img { height: 40px; width: auto; object-fit: contain; display: block; } .footer__links { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; } .footer__link { color: var(--color-text-nav); text-decoration: none; transition: color var(--transition-fast); } .footer__link:hover { color: #F5F5F5; } @media (max-width: 768px) { .footer__content { flex-direction: column; text-align: center; gap: var(--space-lg); } .footer__links { flex-wrap: wrap; justify-content: center; gap: var(--space-md); } } /* ========================================================================== UNIFIED FOOTER CONVERSION CTA SYSTEM ========================================================================== */ .footer-cta { position: relative; padding: clamp(64px, 7.5vw, 96px) 0; background-color: var(--color-bg-dark, #06040A); border-top: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; text-align: center; z-index: 1; } /* Subtle Ambient Violet Radial Glow */ .footer-cta__glow { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: min(640px, 90vw); height: 300px; background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(139, 92, 246, 0.10) 0%, rgba(109, 40, 217, 0.025) 50%, transparent 75%); filter: blur(45px); pointer-events: none; z-index: 0; } /* Grouped, Compact Content Container */ .footer-cta__content { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } /* Eyebrow Label Treatment */ .footer-cta__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 15px; border-radius: 9999px; background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(167, 139, 250, 0.24); color: #C4B5FD; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; } .footer-cta__eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-primary, #8B5CF6); box-shadow: 0 0 8px var(--color-primary, #8B5CF6); } /* Moderate Heading Scale */ .footer-cta__heading { font-size: clamp(1.85rem, 3.2vw, 2.5rem); font-weight: 800; color: #FFFFFF; line-height: 1.18; letter-spacing: -0.025em; margin: 0 0 14px 0; } /* Approved Purple Gradient Accent */ .footer-cta__gradient { background: var(--gradient-purple-text, linear-gradient(135deg, #FFFFFF 0%, #D8B4FE 30%, #A78BFA 70%, #8B5CF6 100%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } /* Supporting Description */ .footer-cta__desc { font-size: clamp(0.92rem, 1.25vw, 1.05rem); color: #A1A1AA; line-height: 1.6; max-width: 560px; margin: 0 0 28px 0; } /* Single Primary Action Button */ .footer-cta__action { display: flex; justify-content: center; width: 100%; } .footer-cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.92rem; font-weight: 600; color: #FFFFFF; background: linear-gradient(180deg, #151024 0%, #0D0A17 100%); border: 1px solid rgba(167, 139, 250, 0.35); border-radius: 9999px; padding: 13px 32px; text-decoration: none; box-shadow: 0 0 18px rgba(139, 92, 246, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; } .footer-cta__btn:hover { background: linear-gradient(180deg, #1E1635 0%, #130E22 100%); border-color: rgba(167, 139, 250, 0.65); box-shadow: 0 0 26px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); transform: translateY(-2px); color: #FFFFFF; } .footer-cta__btn-arrow { transition: transform 0.2s ease; font-size: 1.05em; color: #C4B5FD; } .footer-cta__btn:hover .footer-cta__btn-arrow { transform: translateX(4px); color: #FFFFFF; } /* Reassurance Micro-Copy */ .footer-cta__reassurance { font-size: 0.82rem; color: #71717A; letter-spacing: 0.01em; margin-top: 14px; } /* Homepage Scale Modifier (~8-12% proportional increase) */ .footer-cta--home { padding: clamp(72px, 8.5vw, 110px) 0; } .footer-cta--home .footer-cta__content { max-width: 720px; } .footer-cta--home .footer-cta__heading { font-size: clamp(2.05rem, 3.6vw, 2.85rem); } .footer-cta--home .footer-cta__desc { font-size: clamp(0.98rem, 1.3vw, 1.1rem); max-width: 600px; } /* Responsive Mobile Layout */ @media (max-width: 576px) { .footer-cta { padding: 52px 0; } .footer-cta--home { padding: 58px 0; } .footer-cta__content { padding: 0 12px; } .footer-cta__heading { font-size: 1.65rem; } .footer-cta--home .footer-cta__heading { font-size: 1.8rem; } .footer-cta__desc { font-size: 0.90rem; margin-bottom: 24px; } .footer-cta__btn { width: 100%; max-width: 320px; padding: 13px 24px; } } /* ========================================================================== GLOBAL FLOATING WHATSAPP BUTTON ========================================================================== */ .whatsapp-float { position: fixed; bottom: 28px; right: 28px; width: 52px; height: 52px; border-radius: 50%; background: #0D1117; border: 1px solid rgba(37, 211, 102, 0.38); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(37, 211, 102, 0.18); display: flex; align-items: center; justify-content: center; color: #25D366; text-decoration: none; z-index: 999; cursor: pointer; transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.26s ease, border-color 0.26s ease, color 0.2s ease; outline: none; } .whatsapp-float:hover { transform: scale(1.08) translateY(-2px); border-color: rgba(37, 211, 102, 0.75); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65), 0 0 28px rgba(37, 211, 102, 0.38); color: #FFFFFF; } .whatsapp-float:focus-visible { box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.5); } .whatsapp-float__glow { position: absolute; inset: -4px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 211, 102, 0.25) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .whatsapp-float:hover .whatsapp-float__glow { opacity: 1; } .whatsapp-float__icon-wrap { display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; } .whatsapp-float__icon { width: 26px; height: 26px; display: block; } .whatsapp-float__tooltip { position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(6px); background: rgba(14, 18, 23, 0.95); border: 1px solid rgba(37, 211, 102, 0.25); color: #E4E4E7; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; padding: 6px 12px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity 0.2s ease, transform 0.2s ease; } .whatsapp-float:hover .whatsapp-float__tooltip { opacity: 1; transform: translateY(-50%) translateX(0); } /* Mobile Adjustments for Floating WhatsApp */ @media (max-width: 576px) { .whatsapp-float { bottom: 20px; right: 20px; width: 46px; height: 46px; } .whatsapp-float__icon { width: 22px; height: 22px; } .whatsapp-float__tooltip { display: none; } }