Fix icon hover colors, text alignment, and UI improvements

This commit is contained in:
Krikorios
2026-02-25 23:25:59 +02:00
parent 00fda3e045
commit fcc4352afa
46 changed files with 4011 additions and 600 deletions
+25 -5
View File
@@ -8,15 +8,15 @@
<link rel="icon" type="image/png" href="images/logo/logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<noscript><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet"></noscript>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<noscript><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet"></noscript>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous"></noscript>
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/pages.css">
<link rel="stylesheet" href="css/ultimate-ui.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="css/ultimate-ui.css"></noscript>
<link rel="stylesheet" href="css/header-fix.css">
<link rel="canonical" href="https://mspe.pro/services.html">
<!-- Structured Data -->
<script type="application/ld+json">
@@ -94,10 +94,17 @@
<meta name="twitter:description" content="Comprehensive technology solutions designed to transform your business and drive success.">
<meta name="twitter:image" content="https://mspe.pro/images/logo/logo.png">
</head>
<body>
<body class="has-promo">
<!-- Skip to Content (Accessibility) -->
<a href="#main-content" class="skip-to-content">Skip to main content</a>
<!-- Promo Announcement Bar -->
<div class="promo-bar" id="promo-bar">
<span class="promo-icon"><i class="fas fa-shield-alt"></i></span>
<span>🔒 <strong>Free Infrastructure Audit</strong> — Limited availability. <a href="calendar.html">Book your spot →</a></span>
<button class="promo-close" aria-label="Close promotion"><i class="fas fa-times"></i></button>
</div>
<!-- Navigation -->
<header class="header" id="header">
<nav class="nav container">
@@ -168,7 +175,8 @@
</ul>
<a href="contact.html?service=it-support" class="service-link">Request Scope <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card" id="cybersecurity">
<div class="service-card featured" id="cybersecurity">
<span class="service-badge">Most Popular</span>
<div class="service-icon" data-icon-key="service_cybersecurity"><i class="fas fa-shield-alt"></i></div>
<h3 class="service-title">Cybersecurity Solutions</h3>
<p class="service-description">End-to-end security services to protect your business from evolving threats. Risk assessment, vulnerability management, and incident response.</p>
@@ -460,6 +468,13 @@
<span>Beirut, Lebanon</span>
</li>
</ul>
<div class="footer-newsletter">
<p>Get expert insights delivered to your inbox</p>
<form class="newsletter-form" id="footer-newsletter-form">
<input type="email" placeholder="Your email address" required aria-label="Email for newsletter">
<button type="submit" class="btn-newsletter">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
@@ -480,6 +495,11 @@
<i class="fas fa-chevron-up"></i>
</button>
<!-- Mobile Sticky CTA -->
<div class="mobile-sticky-cta">
<a href="calendar.html" class="btn btn-primary"><i class="fas fa-calendar-check"></i> Book Free Consultation</a>
</div>
<script src="js/main.js" defer></script>
<script src="js/ultimate-ui.js" defer></script>
</body>