/* * File: style.css * Project: Workpe Job Solution * Created: 2026-02-16 * Developer: Jitendra Bhatnagar * Description: Global stylesheet for the project. */ /* Global theme variables */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --workPeColorBg: #ffffff; --workPeColorSurface: #f8f9fa; --workPeColorPrimary: #2489f8; --workPeColorPrimary600: #0b5ed7; --workPeColorSecondary: #6c757d; --workPeColorSuccess: #30a56e; --workPeColorDanger: #dc3545; --workPeColorWarning: #ffc107; --workPeColorInfo: #0dcaf0; --workPeColorText: #212529; --workPeColorMuted: #6c757d; --workPeRadiusSm: 4px; --workPeRadiusMd: 8px; --workPeRadiusLg: 12px; --workPeSpacingXs: 4px; --workPeSpacingSm: 8px; --workPeSpacingMd: 16px; --workPeSpacingLg: 24px; --workPeFontSans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --workPeShadowSm: 0 1px 2px rgba(16,24,40,0.05); --workPeShadowMd: 0 8px 24px rgba(16,24,40,0.08); --workPeTransitionFast: 150ms; --workPeTransitionMedium: 300ms; } /* Dark theme (toggle by adding data-theme="dark" on or ) */ [data-theme="dark"] { --workPeColorBg: #071025; --workPeColorSurface: #0b1220; --workPeColorPrimary: #66aaff; --workPeColorPrimary600: #4f8fe6; --workPeColorSecondary: #94a3b8; --workPeColorText: #e6eef8; --workPeColorMuted: #9aa6b2; --workPeShadowSm: 0 1px 2px rgba(0,0,0,0.6); --workPeShadowMd: 0 8px 24px rgba(0,0,0,0.7); } /* Global resets / base styles */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; background-color: var(--workPeColorBg); color: var(--workPeColorText); font-family: var(--workPeFontSans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.4; overflow-x: hidden !important; } .workPeTextJustify { text-align: justify; } /* Buttons & interactive */ button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; } a { color: var(--workPeColorPrimary); text-decoration: none; transition: color var(--workPeTransitionFast); } a:hover, a:focus { color: var(--workPeColorPrimary600); } /* Focus styles */ :focus-visible { box-shadow: 0 0 0 4px rgba(13,110,253,0.12); border-radius: var(--workPeRadiusSm); } /* Responsive typography (simple) */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--workPeSpacingSm) 0; font-weight: 600; color: var(--workPeColorText); } p { margin: 0 0 var(--workPeSpacingMd) 0; } /* End of global theme setup */ .workPeBtn { background-color: var(--workPeColorSuccess); color: #fff; transition: background-color var(--workPeTransitionFast); } .workPeBtn:hover { color: #fff; background-color: var(--workPeColorPrimary); } .workPeDevider{ color: #fff; border-top: 5px solid var(--workPeColorBg); opacity: 0.9; } header .workPeLogo{ width: 100%; max-width: 300px; } .navbar { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.85) !important; } .mainHeader .workPeLogo{ width: 100%; max-width: 340px; } .mainHeader .workPeMenuLink{ display: flex; align-items: center; gap: 5px; font-size: 14px; } .mainHeader .workPeMenuLink i{ color: var(--workPeColorPrimary); } .mainHeader .workPeMenuLink span{ line-height: 0; color: var(--workPeColorSuccess); font-weight: 700; } .mainHeader .workPeMenuLink:hover span{ transition: 0.3s ease; color: var(--workPeColorPrimary); } #workPeHeroSection{ height: 87vh; background: url('images/03.jpg') center/cover no-repeat; } #workPeHeroSection h1{ font-size: 60px; font-weight: bold; } #workPeHeroSection p{ font-size: 20px; font-weight: 700; } .workPePartnersLogo{ display: flex; justify-content: space-between; } .client-logos { opacity: 0.7; transition: 0.5s ease; width: 130px; background: #ffffff; padding: 10px; height: 100px; object-fit: contain; border: 1.8px solid var(--bs-blue); border-radius: 10px; } .client-logos:hover { opacity: 1; } .logo-item { height: 50px; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #333; filter: grayscale(100%); transition: 0.4s ease; } .logo-item:hover { filter: grayscale(0%); transform: translateY(-3px); } /* Blur Circle Background */ .blur-circle { position: absolute; width: 250px; height: 250px; background: rgba(13,110,253,0.3); border-radius: 50%; top: -40px; left: -40px; filter: blur(80px); z-index: 0; } /* Image Wrapper */ .about-image-wrapper { position: relative; z-index: 2; } /* Image Height */ .about-img { height: 500px; overflow: hidden; } .about-img img { transition: 0.7s ease; } .about-img:hover img { transform: scale(1.05); } /* Bottom Gradient Overlay */ .image-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); } /* Avatar Circle */ .avatar-circle { width: 50px; height: 50px; background: #0d6efd; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; } /* Link hover animation */ .about-link i { transition: 0.3s ease; } .about-link:hover i { transform: translateX(5px); } /* Blur Background */ .blur-shape { position: absolute; width: 350px; height: 350px; border-radius: 50%; filter: blur(120px); opacity: 0.4; z-index: 0; } .blur-1 { background: #0d6efd; top: -100px; right: -100px; } .blur-2 { background: #6610f2; bottom: -100px; left: -100px; } /* Service Card */ .service-card { background: #fff; border-radius: 1rem; border: 1px solid #eee; transition: 0.3s ease; box-shadow: 0 5px 20px rgba(0,0,0,0.05); } .service-card:hover { transform: translateY(-8px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); } /* Icon Box */ .icon-box { width: 55px; height: 55px; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: 0.3s ease; } /* CTA Card */ .cta-card { background: #111; border-radius: 1rem; transition: 0.3s ease; } .cta-card:hover { transform: translateY(-8px); } .cta-icon { width: 60px; height: 60px; margin: auto; border-radius: 50%; background: #222; display: flex; align-items: center; justify-content: center; } .footer-dark { background: linear-gradient(135deg, #0f172a, #111827); color: #fff; } .footer-contact p { transition: 0.3s ease; } .footer-contact p:hover { transform: translateX(5px); } /* Responsive */ @media (max-width: 991px) { .about-img { height: 350px; } .mainHeader .workPeLogo{ max-width: 200px; } .workPePartnersLogo{ flex-direction: column; align-items: center; gap: 10px; } .client-logos{ width: 80%; } }