/* ═══════════════════════════════════════════════════════════════ NeuGenity Design System v6 CSS — ng-style.css Add AFTER style.css in every page's Brand Blue: #0091ea | Brand Green: #00c853 Fonts: Montserrat (headings) + DM Sans (body) ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap'); /* ── GLOBAL ── */ :root { --ng-blue: #0091ea; --ng-green: #00c853; --ng-blue-lt: #e3f4fd; --ng-grn-lt: #e0f9ec; --ng-text: #202124; --ng-body: #3c4043; --ng-muted: #5f6368; --ng-faint: #9aa0a6; --ng-border: #e8eaed; --ng-surface: #f8f9fa; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'DM Sans',Arial,sans-serif!important;color:var(--ng-body)!important;background:#fff!important;padding-top:71px!important} body.blog-page{padding-top:71px!important} h1,h2,h3,h4,h5,h6{font-family:'Montserrat',Arial,sans-serif!important;color:var(--ng-text)!important} a{transition:color .2s} ::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:var(--ng-surface)} ::-webkit-scrollbar-thumb{background:var(--ng-blue);border-radius:3px} /* ── COLOR OVERRIDES ── */ .text-neugenity-blue,.neugenity-blue{color:var(--ng-blue)!important} .text-neugenity-green,.neugenity-green{color:var(--ng-green)!important} .bg-neugenity-blue{background-color:var(--ng-blue)!important} .bg-neugenity-green{background-color:var(--ng-green)!important} .border-neugenity-blue{border-color:var(--ng-blue)!important} .border-neugenity-green{border-color:var(--ng-green)!important} .hover\:text-neugenity-blue:hover{color:var(--ng-blue)!important} .hover\:text-neugenity-green:hover{color:var(--ng-green)!important} .hover\:bg-neugenity-blue:hover{background:var(--ng-blue)!important} .hover\:bg-neugenity-green:hover{background:var(--ng-green)!important} /* ── SECTION BACKGROUNDS — replace dark/gradient ── */ /* Hero gradient sections → light atmospheric */ .bg-gradient-to-r,.bg-gradient-to-br,.bg-gradient-to-l,.bg-gradient-to-b{ background:linear-gradient(175deg,#d2e9f8 0%,#e8f4fb 30%,#f5fafd 65%,#fff 100%)!important; color:var(--ng-text)!important; } .bg-gradient-to-r *,.bg-gradient-to-br *{color:inherit!important} /* Any section that was dark navy */ .bg-gray-900,.bg-gray-800,.bg-neugenity-dark,.bg-blue-900,.bg-blue-800,.bg-emerald-900{ background:var(--ng-blue-lt)!important;color:var(--ng-text)!important; } .bg-gray-900 *,.bg-gray-800 *,.bg-blue-900 *{color:var(--ng-text)!important} /* Light alternating sections */ .bg-gray-50,.bg-gray-100{background:var(--ng-surface)!important} /* ── BUTTONS — 4px radius, brand colors ── */ .rounded-full{border-radius:4px!important} .btn-primary, button.bg-neugenity-green,a.bg-neugenity-green, button.bg-neugenity-blue,a.bg-neugenity-blue, input[type="submit"]{ background-color:var(--ng-blue)!important; color:#fff!important; border:1px solid var(--ng-blue)!important; border-radius:4px!important; font-family:'DM Sans',sans-serif!important; font-size:14px!important; font-weight:500!important; transition:background .2s,box-shadow .2s!important; } button.bg-neugenity-green:hover,a.bg-neugenity-green:hover, button.bg-neugenity-blue:hover,a.bg-neugenity-blue:hover{ background-color:#007acc!important;border-color:#007acc!important; } /* ── SERVICE / FEATURE ICON CONTAINERS — fix squares ── */ /* Old: colored square bg with white icon → New: light bg with colored icon */ .bg-neugenity-blue.rounded-lg, .bg-neugenity-blue.rounded-full, .bg-neugenity-green.rounded-lg, .bg-neugenity-green.rounded-full, div.bg-neugenity-blue.p-3,div.bg-neugenity-blue.p-4, div.bg-neugenity-green.p-3,div.bg-neugenity-green.p-4{ background:var(--ng-blue-lt)!important; border-radius:8px!important; width:44px!important;height:44px!important; display:flex!important;align-items:center!important;justify-content:center!important; flex-shrink:0!important; } div.bg-neugenity-blue.p-3 i,div.bg-neugenity-blue.p-4 i, .bg-neugenity-blue.rounded-lg i,.bg-neugenity-blue.rounded-full i{ color:var(--ng-blue)!important;font-size:18px!important; } div.bg-neugenity-green.p-3 i,div.bg-neugenity-green.p-4 i, .bg-neugenity-green.rounded-lg i,.bg-neugenity-green.rounded-full i{ color:var(--ng-green)!important;font-size:18px!important; } /* Second icon class pattern */ .service-icon,.feature-icon,[class*="icon-wrap"]{ background:var(--ng-blue-lt)!important; border-radius:8px!important; } .service-icon i,.feature-icon i,[class*="icon-wrap"] i{ color:var(--ng-blue)!important; } /* ── CARDS ── */ .rounded-xl,.rounded-2xl,.rounded-3xl,.shadow-lg,.shadow-xl,.shadow-2xl{ border-radius:8px!important; } .shadow-md,.shadow-lg,.shadow-xl,.shadow-2xl{ box-shadow:0 1px 4px rgba(0,0,0,.08),0 2px 10px rgba(0,0,0,.06)!important; } /* Service cards */ .service-card,[class*="service-card"]{ border:1px solid var(--ng-border)!important; border-radius:8px!important; background:#fff!important; transition:box-shadow .2s,transform .2s!important; } .service-card:hover,[class*="service-card"]:hover{ box-shadow:0 4px 16px rgba(0,0,0,.1)!important; transform:translateY(-2px)!important; } /* Top accent line on service cards */ .service-card::before,[class*="service-card"]::before{ content:''!important;display:block!important; height:3px!important; background:var(--ng-blue)!important; border-radius:8px 8px 0 0!important; margin:-1px -1px 20px!important; } /* ── TYPOGRAPHY ── */ .text-4xl,.text-5xl,.text-6xl,.hero-title{ font-family:'Montserrat',sans-serif!important; font-weight:600!important;letter-spacing:-.02em!important; } .text-neugenity-dark{color:var(--ng-text)!important} /* ── SECTION LABELS / EYEBROWS ── */ .text-xs.uppercase,.text-sm.uppercase,.section-label{ color:var(--ng-blue)!important;font-weight:600!important;letter-spacing:.08em!important; } /* ── GOOGLE PULSE ANIMATION ── */ a[href*="google-pulse"],a.pulse-slow,.pulse-slow{ animation:ngNavPulse 3s ease-in-out infinite!important; font-weight:600!important; } @keyframes ngNavPulse{ 0%,100%{color:#0091ea;text-shadow:0 0 6px rgba(0,145,234,.3)} 50%{color:#00c853;text-shadow:0 0 6px rgba(0,200,83,.3)} } .pulse-icon{animation:ngIconPulse 3s ease-in-out infinite!important} @keyframes ngIconPulse{ 0%,100%{color:#00c853;filter:drop-shadow(0 0 4px rgba(0,200,83,.5))} 50%{color:#0091ea;filter:drop-shadow(0 0 4px rgba(0,145,234,.5))} } /* ── CALCULATOR ── */ #calculator .bg-gradient-to-r, #calculator [class*="bg-gradient"]{ background:linear-gradient(135deg,var(--ng-blue) 0%,var(--ng-green) 100%)!important; } #cost-display{color:#fff!important} /* ── BLOG CARDS ── */ .blog-card,[class*="blog-card"]{ border:1px solid var(--ng-border)!important; border-radius:8px!important; background:#fff!important; box-shadow:none!important; transition:box-shadow .2s,transform .2s!important; } .blog-card:hover{ box-shadow:0 2px 12px rgba(0,0,0,.09)!important; transform:translateY(-2px)!important; } /* ── FILTER TABS (Google Pulse) ── */ .filter-tab{ background:#fff!important;color:var(--ng-blue)!important; border:1px solid var(--ng-border)!important; border-radius:4px!important; font-family:'DM Sans',sans-serif!important; font-size:13px!important;font-weight:500!important; transition:all .2s!important; } .filter-tab:hover{background:var(--ng-blue-lt)!important;border-color:var(--ng-blue)!important} .filter-tab.active{background:var(--ng-green)!important;color:#fff!important;border-color:var(--ng-green)!important} /* ── REVIEWS ── */ [class*="testimonial"],[class*="review-card"]{ border-left:3px solid var(--ng-green)!important; border-radius:8px!important;background:#fff!important; } /* ── HERO SECTION — targeted override ── */ section:first-of-type:not(footer):not(nav), .hero-section,.hero{ background:linear-gradient(175deg,#d2e9f8 0%,#e8f4fb 30%,#f5fafd 65%,#fff 100%)!important; } /* CTA sections */ .cta-section,[id*="cta"]{ background:var(--ng-grn-lt)!important; border-top:1px solid #b3f0d4!important; } /* ── FOOTER — light Google-style ── */ footer{ background:var(--ng-surface)!important; border-top:1px solid var(--ng-border)!important; color:var(--ng-body)!important; } footer *{color:inherit!important} footer a{color:var(--ng-muted)!important} footer a:hover{color:var(--ng-blue)!important} footer h3,footer h4,[class*="footer-title"]{color:var(--ng-text)!important} /* ── CREDENTIALS SECTION ── */ [class*="stats"],[class*="cred"],[id*="stats"]{ background:var(--ng-blue-lt)!important; } [class*="stats"] *,[class*="cred"] *{color:var(--ng-text)!important} /* ── LOCATION / FAQ ACCORDIONS ── */ .faq-answer{overflow:hidden;transition:max-height .3s ease} .faq-answer.active{max-height:1000px!important} .faq-icon.active{transform:rotate(180deg)!important} /* ── FORMS ── */ input[type="text"],input[type="email"],input[type="tel"],input[type="number"], textarea,select{ border:1px solid var(--ng-border)!important; border-radius:4px!important; font-family:'DM Sans',sans-serif!important; font-size:14px!important; color:var(--ng-text)!important; transition:border-color .2s!important; } input:focus,textarea:focus,select:focus{ border-color:var(--ng-blue)!important; outline:none!important; box-shadow:0 0 0 3px rgba(0,145,234,.1)!important; } /* ── SCROLL REVEAL ── */ .fade-in-section{ opacity:0;transform:translateY(16px); transition:opacity .5s ease,transform .5s ease; } .fade-in-section.visible{opacity:1!important;transform:translateY(0)!important} /* ── BREADCRUMBS ── */ .breadcrumb a{color:var(--ng-blue)!important} .breadcrumb a:hover{color:var(--ng-green)!important} /* ── RESPONSIVE ── */ @media(max-width:768px){ body{padding-top:71px!important} .rounded-full{border-radius:4px!important} }