:root{ --primary:#10b981; --primary-dark:#059669; --secondary:#4ade80; --bg:#f7fffb; --muted:#64748b; --dark:#0f172a; /* text color for light mode */ --text:var(--dark); --surface:#ffffff; --card-bg:var(--white); --white:#ffffff; --header-h:88px; /* default header height used for spacing */ --header-bg: rgba(255,255,255,0.9); --header-border: rgba(16,185,129,0.04); /* hero backgrounds */ --hero-bg: linear-gradient(120deg,#ffffff 0%, #f0fff8 50%, #f7fffb 100%); --hero-anim: heroShift; /* footer colors */ --footer-bg: #0f172a; --footer-color: var(--white); } /* Dark theme overrides applied when has .dark */ html.dark{ --bg:#071021; /* page background */ --dark:#e6eef8; /* main text (in dark mode this is light) */ --text:var(--dark); --surface:#071827; /* surface / section backgrounds */ --card-bg:#0b1622; --muted:#94a3b8; --primary:#4ade80; /* slightly brighter primary in dark */ --primary-dark:#2dd4bf; --header-bg: rgba(2,6,23,0.75); --header-border: rgba(255,255,255,0.03); --hero-bg: linear-gradient(120deg,#031423 0%, #071827 60%, #071827 100%); --hero-anim: none; /* footer colors in dark mode */ --footer-bg: #04121a; --footer-color: var(--white); } /* Motion, transitions and reveal utilities */ *{transition-duration:180ms;transition-timing-function:cubic-bezier(.2,.9,.3,1)} /* Reveal-on-scroll helper */ .reveal{opacity:0;transform:translateY(12px);will-change:opacity,transform} .reveal.visible{opacity:1;transform:none} /* Hero subtle animated gradient (theme-aware) */ .hero{background:var(--hero-bg);background-size:200% 200%;animation:var(--hero-anim) 10s ease-in-out infinite alternate} @keyframes heroShift{from{background-position:0% 50%}to{background-position:100% 50%}} /* Card lift and hover states */ .service-card{transition:transform 260ms cubic-bezier(.2,.9,.3,1),box-shadow 260ms} .service-card:hover,.service-card:focus-within{transform:translateY(-8px);box-shadow:0 18px 40px rgba(16,185,129,0.08)} /* CTA micro-interaction */ .cta-button{transition:transform 160ms ease,box-shadow 160ms ease} .cta-button:hover,.cta-button:focus{transform:translateY(-3px);box-shadow:0 8px 22px rgba(16,185,129,0.14)} .secondary-button{transition:transform 160ms ease,box-shadow 160ms ease} .secondary-button:hover,.secondary-button:focus{transform:translateY(-2px);box-shadow:0 6px 18px rgba(16,185,129,0.06)} /* Social icons spacing and hover */ .social-links a{display:inline-flex;align-items:center;justify-content:center;margin-right:0.5rem;color:rgba(255,255,255,0.85);opacity:0.95} .social-links a:hover{color:var(--primary);transform:translateY(-2px)} /* Respect user preference for reduced motion */ @media (prefers-reduced-motion: reduce){ *{transition:none!important} .hero{animation:none} .reveal{opacity:1;transform:none} } /* Layout */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:var(--text); background:var(--bg); display:flex; flex-direction:column; /* sticky footer */ min-height:100vh; } main{flex:1} .container{ width:90%; max-width:1200px; margin:0 auto; padding:0 1rem; } /* Header / Nav */ header{ position:fixed; top:0; left:0; right:0; background:var(--header-bg); backdrop-filter:blur(6px); z-index:1000; border-bottom:1px solid var(--header-border); height:var(--header-h); } nav{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);padding:0 0} .logo{display:flex;align-items:center;gap:0.5rem;color:var(--primary);font-weight:700;text-decoration:none} .logo img{width:72px;height:48px;object-fit:cover;border-radius:8px} .nav-links{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0} .nav-links a{text-decoration:none;color:var(--text);font-weight:600} .nav-links a:hover{color:var(--primary)} .mobile-menu-btn{display:none;background:none;border:none;font-size:1.25rem;color:var(--text)} /* account for fixed header height */ /* account for fixed header height */ body > main, .hero {padding-top:var(--header-h)} /* Add smooth page transition with slide effect */ main { transition: opacity 0.3s ease, transform 0.3s ease; } /* Hero */ .hero{padding-bottom:3rem;background:var(--hero-bg)} .hero-content{max-width:720px} .hero h1{font-size:3.5rem;line-height:1.1;margin-bottom:1.5rem;font-weight:800;transition:all 0.4s ease;white-space:nowrap} .hero p{color:var(--muted);font-size:1.3rem;margin-bottom:1.5rem;line-height:1.6;transition:all 0.4s ease} /* Improve CTA visibility in hero across themes */ .hero .cta-button{box-shadow:0 12px 30px rgba(16,185,129,0.12);padding:1rem 2.5rem;font-size:1.1rem;transition:all 0.3s ease} .hero .secondary-button{box-shadow:none;padding:1rem 2.5rem;font-size:1.1rem;transition:all 0.3s ease} html.dark .hero .cta-button{box-shadow:0 10px 26px rgba(0,0,0,0.45)} html.dark .hero .secondary-button{background:transparent;border-color:rgba(255,255,255,0.08);color:var(--white)} .hero-buttons{display:flex;gap:1.5rem;flex-wrap:wrap} .cta-button{background:var(--primary);color:#fff;padding:0.75rem 1.25rem;border-radius:8px;text-decoration:none;font-weight:700} .secondary-button{background:var(--surface);color:var(--primary);padding:0.7rem 1.25rem;border-radius:8px;border:1px solid rgba(16,185,129,0.12);text-decoration:none} /* Sections */ section{padding:3.5rem 0} main > section:first-child{padding-top:0;margin-top:-2rem} .services{padding-top:0;margin-top:-10px} .section-header{text-align:center;margin-bottom:2rem} .section-header h2{font-size:1.75rem;color:var(--primary-dark);margin-bottom:0.5rem} .section-header p{color:var(--muted);max-width:720px;margin:0 auto} /* utility: muted text that responds to theme */ .muted{color:var(--muted)} .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem} .service-card{background:var(--card-bg);padding:1.25rem;border-radius:12px;box-shadow:0 10px 30px rgba(16,185,129,0.06);text-align:center} .service-icon{width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:0.75rem;background:linear-gradient(135deg, rgba(16,185,129,0.06), rgba(74,222,128,0.06));color:var(--primary);margin-left:auto;margin-right:auto} .service-card-img{width:100%;height:100%;object-fit:cover;border-radius:10px} .service-card h3{margin:0 0 0.5rem 0;color:var(--primary-dark)} .service-card p{color:var(--muted)} /* Large attractive service cards with prominent images */ .services-grid-large{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;justify-items:center;align-items:start} .service-card-large{ background:var(--card-bg); border-radius:16px; overflow:hidden; box-shadow:0 12px 40px rgba(16,185,129,0.08); display:flex; flex-direction:column; text-decoration:none; color:inherit; width:100%; max-width:450px; height:420px; } .service-card-image{ width:100%; height:220px; overflow:hidden; position:relative; } .service-card-image img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms cubic-bezier(.2,.9,.3,1); } .service-card-large:hover .service-card-image img{ transform:scale(1.08); } .service-card-content{ padding:1.75rem; flex:1; } .service-card-content h3{ margin:0 0 0.75rem 0; color:var(--primary-dark); font-size:1.35rem; font-weight:700; } .service-card-content p{ color:var(--muted); margin:0; line-height:1.6; } .service-card-large:hover{ transform:translateY(-8px); box-shadow:0 20px 50px rgba(16,185,129,0.12); } @media (max-width:768px){ .services-grid-large{grid-template-columns:1fr;gap:1.5rem} .service-card-image{height:200px} } /* Full-width service card variant */ .service-card-full{ max-width:100%; grid-column:1/-1; } .marketing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem} .marketing-card{background:var(--card-bg);padding:1rem;border-radius:10px;box-shadow:0 8px 18px rgba(16,185,129,0.05);color:var(--text)} .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center} .about-image img{width:100%;border-radius:12px} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .stat-card{background:var(--card-bg);padding:1rem;border-radius:10px;text-align:center;color:var(--text)} .stat-number{font-size:1.6rem;font-weight:800;color:var(--primary)} .testimonial-card{background:var(--card-bg);padding:1rem;border-radius:10px;color:var(--text)} /* Contact & form */ .contact-flex{display:flex;gap:2rem} .contact-info{flex:1} .contact-form{flex:1} /* Footer */ footer{background:var(--footer-bg);color:var(--footer-color);padding:3rem 0} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1rem} .footer-branding p{color:var(--muted)} .footer-links h3{color:var(--secondary)} .footer-links a{color:var(--muted);text-decoration:none} .copyright{text-align:center;padding-top:1.25rem;margin-top:1.25rem;border-top:1px solid rgba(255,255,255,0.04);color:var(--muted)} /* Responsive */ @media (max-width:992px){ .about-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:repeat(2,1fr)} .testimonial-card{padding:0.9rem} } @media (max-width:768px){ /* reduce header height on narrow screens to free vertical space */ :root{--header-h:64px} /* Mobile navigation: full-width drop-down, scrollable if long with slide down/up animation */ .nav-links{position:fixed;top:var(--header-h);left:0;right:0;background:rgba(255,255,255,0.98);flex-direction:column;padding:0.5rem 0;box-shadow:0 10px 30px rgba(0,0,0,0.2);z-index:1001;max-height:calc(100vh - var(--header-h));overflow:auto;opacity:0;visibility:hidden;transform:translateY(-100%);transition:opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;border-bottom:2px solid var(--primary)} html.dark .nav-links{background:rgba(15,23,42,0.98);box-shadow:0 10px 30px rgba(0,0,0,0.5)} .nav-links.active{display:flex;opacity:1;visibility:visible;transform:translateY(0)} .nav-links li{width:100%} .nav-links a{display:block;padding:0.65rem 1rem;border-radius:6px;color:var(--text);font-weight:600;transition:all 0.2s ease;border:2px solid transparent} .nav-links a:hover{background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.3)} .nav-links a.active{background:var(--primary);color:#ffffff !important;font-weight:700;box-shadow:0 2px 8px rgba(16,185,129,0.3);border:2px solid rgba(16,185,129,0.8)} .mobile-menu-btn{display:block;z-index:1002} /* Make hero CTAs stack on small screens to avoid overlap */ .hero h1{font-size:1.55rem} .hero p{font-size:0.95rem} .hero{padding-bottom:2rem} .logo img{width:56px;height:40px} .hero-buttons{flex-direction:column;align-items:stretch} /* Ensure CTAs become block-level full-width when not inside a flex hero container (some pages place CTAs inside a plain centered div). Making them block ensures width:100% applies and they stack cleanly on very small screens. */ .cta-button, .secondary-button{display:block;width:100%;text-align:center;box-sizing:border-box;margin:0.45rem 0} /* Services grid collapse to single column for readability */ .services-grid{grid-template-columns:1fr;gap:1rem} .service-card{display:block;text-decoration:none;color:inherit} /* add breathing room at the bottom so CTAs don't visually collide with footer */ .services{padding-bottom:3.5rem} .footer-grid{grid-template-columns:1fr 1fr} .stats-grid{grid-template-columns:1fr} .contact-flex{flex-direction:column} } /* Ensure the mobile menu button is visible in dark mode (white icon/text) */ html.dark .mobile-menu-btn{color:var(--white)} /* Extra small screens (phones) tweaks */ @media (max-width:446px){ :root{--header-h:56px} nav{min-height:var(--header-h)} .logo img{width:48px;height:34px} .hero h1{font-size:1.35rem} .hero p{font-size:0.92rem} .container{width:94%} .nav-links a{font-size:16px;padding:0.75rem 1rem} .cta-button{padding:0.6rem 0.9rem} .secondary-button{padding:0.55rem 0.9rem} /* Extra-small: make any CTAs that remain inline stack and have spacing */ .cta-button, .secondary-button{display:block;width:100%;box-sizing:border-box;margin:0.45rem 0} /* extra bottom padding to keep CTAs away from footer */ .services{padding-bottom:4.25rem} .footer-grid{grid-template-columns:1fr} } /* Theme switcher (navbar) */ .theme-switcher{display:flex;align-items:center;gap:0.4rem;margin-left:0.75rem} .theme-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:none;background:transparent;color:var(--text);cursor:pointer;font-size:1rem} .theme-btn:focus{outline:2px solid rgba(16,185,129,0.18);outline-offset:2px} .theme-btn:hover{background:rgba(16,185,129,0.06);transform:none} .theme-btn.active{background:var(--primary);color:var(--white)} /* Reduce visibility on very small screens if necessary (keeps layout tidy) */ @media (max-width:480px){ .theme-switcher{display:flex;gap:0.3rem} .theme-btn{width:36px;height:36px;font-size:0.95rem} } /* Generic panel/card used by forms and callouts */ .panel{padding:1rem;background:var(--card-bg);border-radius:8px;box-shadow:0 8px 18px rgba(2,6,23,0.04);color:var(--text)}