Website Refresh

wwwroot/css/main.css

@@ -0,0 +1,35 @@
+body {
+    font-family: 'Inter', sans-serif;
+}
+
+.gradient-text {
+    background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.hero-bg {
+    background: linear-gradient(to bottom right, #f8fafc, #e2e8f0);
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+.service-card {
+    transition: all 0.3s ease;
+}
+
+.service-card:hover {
+        transform: translateY(-5px);
+    }
+
+.incognito-field {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 0;
+    width: 0;
+    z-index: -1;
+}

wwwroot/css/site.css

@@ -1,170 +1 @@
-:root {
-    /* Dark theme */
-    --dark-background: #eaeff2;
-    --dark-foregeound: #808080;
-    /* Light theme */
-    --light-background: #f4f2ee;
-    --light-foregeound: #808080;
-    /* Defaults */
-    --current-background: var(--light-background);
-    --current-foreground: var(--light-foregeound);
-}
-
-.btn-primary {
-    background-color: #1667c0;
-    border-color: #1667c0;
-}
-
-.btn-primary:hover {
-    background-color: #074280;
-    border-color: #074280;
-}
-
-.incognito-field {
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 0;
-    width: 0;
-    z-index: -1;
-}
-
-@media (prefers-color-scheme: light) {
-    : root {
-        --current-background: var(--dark-background);
-        --current-foreground: var(--dark-foregeound);
-    }
-}
-
-body {
-    background-color: var(--current-background);
-    color: var(--current-foreground);
-}
-
-html {
-    font-size: 14px;
-}
-
-.bg-white {
-    background-color: #ffffff;
-}
-
-.bg-grey {
-    background-color: #eaeff2;
-}
-
-@media (min-width: 768px) {
-    html {
-        font-size: 16px;
-    }
-    .carousel-caption p {
-        padding-left: 140px;
-    }
-    .bd-placeholder-img-lg {
-        font-size: 3.5rem;
-    }
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #fff;
-}
-
-html {
-    position: relative;
-    min-height: 100%;
-}
-
-body {
-    margin-bottom: 60px;
-}
-
-.carousel-inner {
-    width: 100%;
-    height: 100%;
-    background-position: left;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-image: url('../img/bg-01.png');
-}
-
-.carousel-inner h1 {
-    color:#5a5a5a;
-}
-
-.carousel-inner p {
-    color: #5a5a5a;
-}
-
-.bd-placeholder-img {
-    font-size: 1.125rem;
-    text-anchor: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-}
-
-.bd-about-img {
-    font-size: 1.125rem;
-    text-anchor: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    background-image: url('../img/member-1.jpg');
-    background-size: 150px;
-}
-
-.bd-clients-img {
-    font-size: 1.125rem;
-    text-anchor: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    background-image: url('../img/member-2.jpg');
-    background-size: 150px;
-}
-
-.bd-services-img {
-    font-size: 1.125rem;
-    text-anchor: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    background-image: url('../img/member-3.jpg');
-    background-size: 150px;
-}
-
-.feature-icon {
-    width: 4rem;
-    height: 4rem;
-    border-radius: .75rem;
-}
-
-.icon-square {
-    width: 3rem;
-    height: 3rem;
-    border-radius: .75rem;
-}
-
-.text-shadow-1 {
-    text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
-}
-
-.text-shadow-2 {
-    text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25);
-}
-
-.text-shadow-3 {
-    text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
-}
-
-.card-cover {
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: cover;
-}
-
-.feature-icon-small {
-    width: 3rem;
-    height: 3rem;
-}
+@import "tailwindcss";

wwwroot/js/site.js

@@ -2,3 +2,51 @@
 // for details on configuring this project to bundle and minify static web assets.
 
 // Write your JavaScript code.
+// Mobile Menu Logic
+const btn = document.getElementById('mobile-menu-btn');
+const menu = document.getElementById('mobile-menu');
+const icon = btn.querySelector('i');
+const links = menu.querySelectorAll('.mobile-link');
+
+btn.addEventListener('click', () => {
+    menu.classList.toggle('hidden');
+    if (menu.classList.contains('hidden')) {
+        icon.classList.remove('fa-times');
+        icon.classList.add('fa-bars');
+    } else {
+        icon.classList.remove('fa-bars');
+        icon.classList.add('fa-times');
+    }
+});
+
+links.forEach(link => {
+    link.addEventListener('click', () => {
+        menu.classList.add('hidden');
+        icon.classList.remove('fa-times');
+        icon.classList.add('fa-bars');
+    });
+});
+
+// Sticky Navbar background on scroll
+window.addEventListener('scroll', () => {
+    const nav = document.getElementById('navbar');
+    if (window.scrollY > 50) {
+        nav.classList.add('shadow-md');
+        nav.classList.replace('bg-white/95', 'bg-white/100');
+    } else {
+        nav.classList.remove('shadow-md');
+        nav.classList.replace('bg-white/100', 'bg-white/95');
+    }
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    // Telephone encoded in Base64
+    const encrypted = "KzYxICgwKTQwMSAwODkgMzA1";
+    const phone = document.getElementById("contact-phone");
+    // atob() decodes the Base64 string
+    const phoneNumber = atob(encrypted);
+    // Set the span and visible text
+    phone.textContent = phoneNumber;
+    // Remove the 'hidden' class to show the link
+    phone.classList.remove("hidden");
+});