/* ====== CUSTOM STYLES — WorkGena ====== */ /* Smooth scroll */ html { scroll-behavior: smooth; } /* Navbar scroll effect */ .navbar-scrolled { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* Gradient text helper */ .gradient-text { background: linear-gradient(135deg, #2563eb, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Pulse animation for live dot */ @keyframes pulse-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } .pulse-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse-ring 1.5s ease-out infinite; } /* Card hover lift */ .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1); } /* Feature icon float animation */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .float-animation { animation: float 3s ease-in-out infinite; } /* Pricing card popular glow */ .pricing-popular { box-shadow: 0 0 0 2px #2563eb, 0 8px 40px rgba(37, 99, 235, 0.15); } /* ROI Calculator slider thumb */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; background: #dbeafe; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #2563eb; cursor: pointer; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4); } input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #2563eb; cursor: pointer; border: none; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4); } /* Timeline connector */ .timeline-connector { position: relative; } .timeline-connector::after { content: ''; position: absolute; top: 50%; right: -2rem; width: 4rem; height: 2px; background: linear-gradient(90deg, #2563eb, #93c5fd); } @media (max-width: 768px) { .timeline-connector::after { display: none; } } /* Scroll to top button */ .scroll-top { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .scroll-top.visible { opacity: 1; visibility: visible; } /* Form focus styles */ input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* FAQ accordion */ .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-item.active .faq-content { max-height: 500px; } .faq-item.active .faq-icon { transform: rotate(180deg); } .faq-icon { transition: transform 0.3s ease; } /* Counter animation */ @keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Audio waveform animation */ @keyframes waveform { 0%, 100% { height: 8px; } 50% { height: 24px; } } .waveform-bar { animation: waveform 1.2s ease-in-out infinite; } .waveform-bar:nth-child(2) { animation-delay: 0.1s; } .waveform-bar:nth-child(3) { animation-delay: 0.2s; } .waveform-bar:nth-child(4) { animation-delay: 0.3s; } .waveform-bar:nth-child(5) { animation-delay: 0.4s; } /* Logo strip infinite scroll (optional) */ @keyframes scroll-logos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .logo-scroll { animation: scroll-logos 20s linear infinite; } /* ====== GEO-REGION VISIBILITY (S47) ====== * Elements with [data-region="X"] are shown only when visitor's region matches. * The geo-detect.js script sets data-region on . * Before JS runs, hide all region-scoped elements (prevents flash). */ body [data-region] { display: none; } html[data-region="india"] body [data-region="india"] { display: initial; } html[data-region="us"] body [data-region="us"] { display: initial; } html[data-region="europe"] body [data-region="europe"] { display: initial; } /* Block-level helpers for
/
/
  • */ html[data-region="india"] body [data-region="india"].region-block { display: block; } html[data-region="us"] body [data-region="us"].region-block { display: block; } html[data-region="europe"] body [data-region="europe"].region-block { display: block; } /* Flex helpers */ html[data-region="india"] body [data-region="india"].region-flex { display: flex; } html[data-region="us"] body [data-region="us"].region-flex { display: flex; } html[data-region="europe"] body [data-region="europe"].region-flex { display: flex; } /* Grid helpers */ html[data-region="india"] body [data-region="india"].region-grid { display: grid; } html[data-region="us"] body [data-region="us"].region-grid { display: grid; } html[data-region="europe"] body [data-region="europe"].region-grid { display: grid; } /* Region switcher (footer utility — optional manual override) */ .region-switcher { display: inline-flex; gap: 0.5rem; align-items: center; } .region-switcher button { font-size: 0.75rem; color: #93c5fd; background: transparent; border: 1px solid #1e3a5f; padding: 0.25rem 0.5rem; border-radius: 0.375rem; cursor: pointer; transition: all 0.15s; } .region-switcher button:hover { background: #1e3a5f; color: white; } html[data-region="india"] .region-switcher button[data-set="india"], html[data-region="us"] .region-switcher button[data-set="us"], html[data-region="europe"] .region-switcher button[data-set="europe"] { background: #2563eb; color: white; border-color: #2563eb; }