/*---------------------------------------------- * * [Emdify Custom Override CSS] * * Add this file AFTER all existing CSS links. * Replaces red/pink theme with purple theme. * Adds animations, fixes card alignment, * improves navbar, hero, footer. * * How to add: In your HTML , paste this * line AFTER theme-pink.css: * * ----------------------------------------------*/ /* ============================================ 1. GOOGLE FONTS ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&display=swap'); /* ============================================ 2. ROOT — Purple Color Theme Override ============================================ */ :root { --primary-color: #9902cf; --secondary-color: #c44dff; /* Section backgrounds — keeping original dark/light structure */ --section-1-bg-color: #f8f5ff; --section-2-bg-color: #f0eaff; --section-3-bg-color: #0d0a1a; --section-4-bg-color: #f8f5ff; --section-5-bg-color: #0d0a1a; --section-6-bg-color: #f8f5ff; --header-bg-color: #0d0a1a; --footer-bg-color: #0d0a1a; --hero-bg-color: #0d0a1a; /* Text */ --primary-t-color: #1a0a2e; --secondary-t-color: #f5f5f5; --primary-p-color: #5a4a6e; --secondary-p-color: #e8d8ff; } /* ============================================ 3. SCROLL REVEAL ANIMATION SETUP (Elements animate in when they enter view) ============================================ */ .animate-on-scroll { opacity: 0; transform: translateY(35px); transition: opacity 0.7s ease, transform 0.7s ease; } .animate-on-scroll.visible { opacity: 1; transform: translateY(0); } .anim-delay-1 { transition-delay: 0.1s !important; } .anim-delay-2 { transition-delay: 0.2s !important; } .anim-delay-3 { transition-delay: 0.3s !important; } .anim-delay-4 { transition-delay: 0.4s !important; } .anim-delay-5 { transition-delay: 0.5s !important; } /* ============================================ 4. BACKGROUND FLOATING ORBS ============================================ */ body::before, body::after { content: ''; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; } body::before { width: 700px; height: 700px; background: radial-gradient(circle, rgba(153,2,207,0.12) 0%, transparent 70%); top: -200px; right: -150px; animation: orbFloat 10s ease-in-out infinite alternate; } body::after { width: 500px; height: 500px; background: radial-gradient(circle, rgba(196,77,255,0.08) 0%, transparent 70%); bottom: 10%; left: -100px; animation: orbFloat 13s ease-in-out infinite alternate-reverse; } @keyframes orbFloat { from { transform: translate(0,0) scale(1); } to { transform: translate(25px, 35px) scale(1.1); } } /* ============================================ 5. HEADER / NAVBAR ============================================ */ #header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 999; transition: background 0.4s, box-shadow 0.4s, backdrop-filter 0.4s; } #header nav { background: rgba(13, 10, 26, 0.92) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(196,77,255,0.15); padding: 12px 0 !important; transition: padding 0.3s; } #header.scrolled nav { padding: 8px 0 !important; box-shadow: 0 4px 30px rgba(153,2,207,0.2); } /* Logo */ .navbar-brand { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; font-size: 1.4rem !important; letter-spacing: 1px !important; color: #fff !important; transition: opacity 0.2s; } .navbar-brand:hover { opacity: 0.85; } .navbar-brand i { color: var(--secondary-color) !important; font-style: normal !important; } /* Nav links */ .navbar-nav.items .nav-item .nav-link { color: rgba(255,255,255,0.75) !important; font-size: 0.9rem !important; font-weight: 400 !important; letter-spacing: 0.03em; transition: color 0.2s !important; padding: 8px 14px !important; } .navbar-nav.items .nav-item .nav-link:hover, .navbar-nav.items .nav-item.active .nav-link { color: #fff !important; } /* Social icons in nav */ .navbar-nav.icons .nav-link { color: rgba(255,255,255,0.55) !important; transition: color 0.2s !important; } .navbar-nav.icons .nav-link:hover { color: var(--secondary-color) !important; } /* Contact Us button */ .navbar-nav.action .primary-button { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important; border: none !important; border-radius: 50px !important; padding: 9px 22px !important; font-size: 0.875rem !important; font-weight: 500 !important; color: #fff !important; box-shadow: 0 4px 20px rgba(153,2,207,0.35); transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s !important; } .navbar-nav.action .primary-button:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(153,2,207,0.5) !important; opacity: 0.92; } /* Dropdown menus */ .dropdown-menu { background: rgba(13,10,26,0.97) !important; border: 1px solid rgba(196,77,255,0.2) !important; border-radius: 12px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important; backdrop-filter: blur(16px); padding: 8px !important; } .dropdown-menu .nav-link { color: rgba(255,255,255,0.75) !important; border-radius: 8px !important; padding: 8px 14px !important; transition: background 0.2s, color 0.2s !important; } .dropdown-menu .nav-link:hover { background: rgba(153,2,207,0.2) !important; color: #fff !important; } /* Services mega dropdown */ .custom-dropdown-grid { background: rgba(13,10,26,0.98) !important; border: 1px solid rgba(196,77,255,0.2) !important; border-radius: 16px !important; } .type-title { color: var(--secondary-color) !important; font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; margin: 8px 0 6px !important; padding-left: 10px; } .grid-item a { color: rgba(255,255,255,0.75) !important; border-radius: 8px !important; padding: 8px 10px !important; } .grid-item a:hover { background: linear-gradient(135deg, rgba(153,2,207,0.3), rgba(196,77,255,0.15)) !important; color: #fff !important; box-shadow: 0 4px 15px rgba(153,2,207,0.3) !important; transform: translateY(-2px) !important; } .dropdown .grid-container a.nav-link { background: rgba(255,255,255,0.03) !important; } .service-title { color: rgba(255,255,255,0.85) !important; } /* ============================================ 6. HERO SECTION ============================================ */ #slider.hero { position: relative; overflow: hidden; } /* Gradient overlay on hero video */ #slider .swiper-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(13,10,26,0.55) 0%, rgba(153,2,207,0.2) 50%, rgba(13,10,26,0.7) 100% ); z-index: 1; } /* Hero title */ #slider .title.effect-static-text { font-family: 'Syne', sans-serif !important; font-size: clamp(2.5rem, 6vw, 5rem) !important; font-weight: 800 !important; background-image: linear-gradient(135deg, #ffffff 30%, #c44dff 70%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; line-height: 1.15 !important; text-shadow: none !important; margin-bottom: 2rem !important; } #slider .primary-button { border-radius: 50px !important; padding: 12px 30px !important; font-size: 1rem !important; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important; box-shadow: 0 0 40px rgba(153,2,207,0.5) !important; transition: transform 0.2s, box-shadow 0.2s !important; border: none !important; } #slider .primary-button:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 10px 50px rgba(153,2,207,0.65) !important; } /* ============================================ 7. FEATURES SECTION (Website Pro, E-Commerce, Mobile Apps) ============================================ */ #features .card.no-hover { background: #fff !important; border: 1px solid rgba(153,2,207,0.1) !important; border-radius: 16px !important; padding: 2.5rem 1.75rem !important; text-align: center; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s !important; height: 100%; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 20px rgba(153,2,207,0.06); } #features .card.no-hover:hover { transform: translateY(-8px) !important; box-shadow: 0 16px 40px rgba(153,2,207,0.15) !important; border-color: rgba(153,2,207,0.3) !important; } #features .card.no-hover .icon { font-size: 2.5rem !important; margin-bottom: 1rem !important; background-image: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } #features .card.no-hover h4 { font-family: 'Syne', sans-serif !important; font-size: 1.2rem !important; font-weight: 700 !important; color: #1a0a2e !important; margin: 0 0 0.75rem !important; } #features .card.no-hover p { color: #5a4a6e !important; font-size: 0.9rem !important; line-height: 1.7 !important; margin: 0 !important; } /* Equal height rows */ #features .items { display: flex !important; flex-wrap: wrap !important; } #features .items .item { display: flex !important; margin-bottom: 30px; } /* ============================================ 8. SERVICES / PRICING SECTION (What We Do) ============================================ */ #pricing { background: #0d0a1a !important; } #pricing .intro h2 { color: #fff !important; font-family: 'Syne', sans-serif !important; font-weight: 800 !important; } #pricing .intro p { color: rgba(255,255,255,0.6) !important; } /* SERVICE CARDS — Equal height fix */ #pricing .items { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; } #pricing .items .item { display: flex !important; margin-bottom: 28px !important; } #pricing .card.featured { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(196,77,255,0.15) !important; border-radius: 18px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; width: 100% !important; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s !important; position: relative; } #pricing .card.featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--secondary-color), transparent); opacity: 0; transition: opacity 0.3s; } #pricing .card.featured:hover { transform: translateY(-8px) !important; border-color: rgba(196,77,255,0.4) !important; box-shadow: 0 20px 50px rgba(153,2,207,0.2) !important; } #pricing .card.featured:hover::before { opacity: 1; } /* Card image — fixed height so all cards align */ #pricing .card.featured img { width: 100% !important; height: 200px !important; object-fit: cover !important; border-radius: 0 !important; display: block !important; flex-shrink: 0 !important; } #pricing .card.featured h4 { font-family: 'Syne', sans-serif !important; font-size: 1.15rem !important; font-weight: 700 !important; color: #fff !important; margin: 1.25rem 1.25rem 0 !important; padding: 0 !important; } #pricing .card.featured p { color: rgba(255,255,255,0.55) !important; font-size: 0.875rem !important; line-height: 1.65 !important; margin: 0.75rem 1.25rem 1.25rem !important; padding: 0 !important; flex-grow: 1 !important; } #pricing .card.featured .btn-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important; border-radius: 50% !important; font-size: 1.1rem !important; color: #fff !important; -webkit-text-fill-color: #fff !important; margin: 0 1.25rem 1.25rem !important; align-self: flex-start !important; text-decoration: none !important; transition: transform 0.2s, box-shadow 0.2s !important; } #pricing .card.featured .btn-icon:hover { transform: scale(1.1) !important; box-shadow: 0 4px 20px rgba(153,2,207,0.5) !important; } /* ============================================ 9. PORTFOLIO SECTION ============================================ */ #portfolio { background: #f8f5ff !important; } #portfolio .intro h2 { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; } /* Portfolio card equal height */ #portfolio .items { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; } #portfolio .items .item { display: flex !important; margin-bottom: 28px !important; } #portfolio .card.featured { background: #fff !important; border: 1px solid rgba(153,2,207,0.12) !important; border-radius: 18px !important; overflow: hidden !important; width: 100% !important; display: flex !important; flex-direction: column !important; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s !important; box-shadow: 0 4px 20px rgba(153,2,207,0.06); padding: 1.25rem !important; } #portfolio .card.featured:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 50px rgba(153,2,207,0.15) !important; border-color: rgba(153,2,207,0.3) !important; } #portfolio .card.featured h4 { font-family: 'Syne', sans-serif !important; font-size: 1.1rem !important; font-weight: 700 !important; color: #1a0a2e !important; margin: 0 0 0.25rem !important; } #portfolio .card.featured > p { color: var(--primary-color) !important; font-size: 0.8rem !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin: 0 0 0.75rem !important; } #portfolio .card.featured .galler { border-radius: 10px !important; overflow: hidden !important; flex-grow: 1; } #portfolio .card.featured .galler img { width: 100% !important; height: 200px !important; object-fit: cover !important; display: block !important; transition: transform 0.4s !important; } #portfolio .card.featured:hover .galler img { transform: scale(1.05) !important; } /* ============================================ 10. PARTNERS / LOGOS SECTION ============================================ */ #partner { background: #0d0a1a !important; } #partner .swiper-slide img { filter: brightness(0) invert(1) !important; opacity: 0.4 !important; transition: opacity 0.3s, filter 0.3s !important; } #partner .swiper-slide:hover img { opacity: 0.85 !important; filter: brightness(0) invert(1) hue-rotate(280deg) !important; } /* ============================================ 11. BLOG SECTION ============================================ */ #blog .intro h2 { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; } /* Blog card equal height */ #blog .bricklayer .card { background: #fff !important; border: 1px solid rgba(153,2,207,0.1) !important; border-radius: 16px !important; overflow: hidden !important; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s !important; margin-bottom: 24px !important; box-shadow: 0 4px 20px rgba(153,2,207,0.06) !important; } #blog .bricklayer .card:hover { transform: translateY(-6px) !important; box-shadow: 0 16px 40px rgba(153,2,207,0.15) !important; border-color: rgba(153,2,207,0.25) !important; } #blog .image-over { background: rgba(153,2,207,0.55) !important; } #blog .card-caption h4 { font-family: 'Syne', sans-serif !important; font-size: 1rem !important; font-weight: 700 !important; color: #1a0a2e !important; margin: 0 !important; transition: color 0.2s !important; } #blog .card-caption h4:hover { color: var(--primary-color) !important; } #blog .card-caption a:not(.btn) { color: #1a0a2e !important; font-size: inherit !important; } #blog .card-footer { background: transparent !important; border-top: 1px solid rgba(153,2,207,0.08) !important; color: #9a8ab0 !important; font-size: 0.8rem !important; } #blog .card-footer a:not(.btn) { color: #9a8ab0 !important; font-size: 0.8rem !important; } #blog .card-footer i { color: var(--primary-color) !important; margin-right: 5px; } /* ============================================ 12. CONTACT / FORM SECTION ============================================ */ #contact { background: linear-gradient(135deg, #f8f5ff 0%, #f0eaff 100%) !important; } #contact h2 { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; color: #1a0a2e !important; } #contact p { color: #5a4a6e !important; } #contact-form input, #contact-form textarea { border: 1px solid rgba(153,2,207,0.2) !important; border-radius: 10px !important; background: #fff !important; color: #1a0a2e !important; padding: 12px 16px !important; transition: border-color 0.2s, box-shadow 0.2s !important; font-size: 0.95rem !important; } #contact-form input:focus, #contact-form textarea:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px rgba(153,2,207,0.12) !important; outline: none !important; } #contact-form .save-contact { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important; border: none !important; border-radius: 50px !important; padding: 12px 36px !important; font-size: 0.95rem !important; font-weight: 500 !important; color: #fff !important; letter-spacing: 0.05em !important; box-shadow: 0 4px 20px rgba(153,2,207,0.35) !important; transition: transform 0.2s, box-shadow 0.2s !important; cursor: pointer !important; } #contact-form .save-contact:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(153,2,207,0.5) !important; } /* ============================================ 13. VIDEO / INSTITUTIONAL SECTION ============================================ */ #video { background: #f0eaff !important; } #video h2 { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; color: #1a0a2e !important; } #video .square-image { border-radius: 16px !important; overflow: hidden !important; transition: transform 0.3s, box-shadow 0.3s !important; box-shadow: 0 8px 40px rgba(153,2,207,0.15) !important; } #video .square-image:hover { transform: scale(1.01) !important; box-shadow: 0 16px 60px rgba(153,2,207,0.25) !important; } #video .icon.bigger.icon-control-play { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; font-size: 4rem !important; filter: drop-shadow(0 0 20px rgba(153,2,207,0.6)); } /* ============================================ 14. FOOTER ============================================ */ footer.odd { background: #0d0a1a !important; } #footer { background: #0d0a1a !important; border-top: 1px solid rgba(196,77,255,0.12) !important; } #footer .brand a { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; font-size: 1.4rem !important; color: #fff !important; letter-spacing: 1px !important; } #footer .brand a i { color: var(--secondary-color) !important; font-style: normal !important; } #footer .branding p { color: rgba(255,255,255,0.5) !important; font-size: 0.875rem !important; line-height: 1.7 !important; } #footer h4.title { font-family: 'Syne', sans-serif !important; font-size: 0.8rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: rgba(255,255,255,0.4) !important; margin-bottom: 1.25rem !important; } #footer .navbar-nav .nav-link { color: rgba(255,255,255,0.65) !important; font-size: 0.9rem !important; padding: 5px 0 !important; transition: color 0.2s !important; display: flex !important; align-items: center !important; gap: 8px !important; } #footer .navbar-nav .nav-link:hover { color: var(--secondary-color) !important; } #footer .navbar-nav .nav-link i { color: var(--primary-color) !important; font-size: 1rem !important; } /* Social icons */ #footer .share-list .nav-link { width: 36px !important; height: 36px !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(196,77,255,0.2) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; color: rgba(255,255,255,0.55) !important; margin: 0 4px 0 0 !important; padding: 0 !important; } #footer .share-list .nav-link:hover { background: rgba(153,2,207,0.25) !important; border-color: rgba(196,77,255,0.5) !important; color: #fff !important; } #footer .share-list { flex-direction: row !important; justify-content: center !important; margin-top: 1rem !important; } #footer .dark-button { border-radius: 50px !important; padding: 10px 20px !important; font-size: 0.85rem !important; background: transparent !important; border: 1px solid rgba(196,77,255,0.3) !important; color: rgba(255,255,255,0.8) !important; transition: background 0.2s, border-color 0.2s !important; margin-top: 1rem !important; } #footer .dark-button:hover { background: rgba(153,2,207,0.2) !important; border-color: rgba(196,77,255,0.6) !important; color: #fff !important; } #footer .dark-button::before, #footer .dark-button::after { display: none !important; } /* Copyright bar */ #copyright { background: rgba(0,0,0,0.3) !important; border-top: 1px solid rgba(196,77,255,0.08) !important; } #copyright p, #copyright a:not(.btn) { color: rgba(255,255,255,0.3) !important; font-size: 0.8rem !important; } #copyright a:not(.btn):hover { color: var(--secondary-color) !important; } /* ============================================ 15. GENERAL BUTTONS ============================================ */ .primary-button, .primary-button:visited, .primary-button:active { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important; border-radius: 50px !important; border: none !important; color: #fff !important; font-weight: 500 !important; transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s !important; } .primary-button:hover, .primary-button:focus { background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 25px rgba(153,2,207,0.45) !important; color: #fff !important; } /* h2.featured red bar → purple */ h2.featured:before { background-image: linear-gradient(45deg, var(--primary-color), var(--secondary-color)) !important; } /* Effect text → purple gradient */ .effect-static-text { background-image: linear-gradient(135deg, #fff 30%, var(--secondary-color) 100%) !important; } /* Section intro VIEW ALL button alignment */ .intro .col-12.col-md-3 { display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; } /* ============================================ 16. SCROLL ANIMATION JS TARGETS (These are added by the JS below) ============================================ */ /* Stagger for grid items */ #features .item:nth-child(1) { transition-delay: 0s !important; } #features .item:nth-child(2) { transition-delay: 0.12s !important; } #features .item:nth-child(3) { transition-delay: 0.24s !important; } #pricing .item:nth-child(1) { transition-delay: 0s !important; } #pricing .item:nth-child(2) { transition-delay: 0.1s !important; } #pricing .item:nth-child(3) { transition-delay: 0.2s !important; } #pricing .item:nth-child(4) { transition-delay: 0.1s !important; } #pricing .item:nth-child(5) { transition-delay: 0.2s !important; } #pricing .item:nth-child(6) { transition-delay: 0.3s !important; } #portfolio .item:nth-child(1){ transition-delay: 0s !important; } #portfolio .item:nth-child(2){ transition-delay: 0.15s !important; } #portfolio .item:nth-child(3){ transition-delay: 0.3s !important; } #blog .item:nth-child(1) { transition-delay: 0s !important; } #blog .item:nth-child(2) { transition-delay: 0.15s !important; } #blog .item:nth-child(3) { transition-delay: 0.3s !important; } /* ============================================ 17. MOBILE RESPONSIVE FIXES ============================================ */ @media (max-width: 768px) { #features .items .item, #pricing .items .item, #portfolio .items .item { width: 100% !important; } #pricing .card.featured img { height: 180px !important; } #portfolio .card.featured .galler img { height: 180px !important; } body::before, body::after { display: none; } }