Refactor button styles and add Philadelphia sports team colors to CSS

Author: csharpfritz

Web/Pages/Index.cshtml

@@ -10,9 +10,8 @@
         <div class="row align-items-center">            <div class="col-lg-7 col-md-8">                
                 <h1 class="display-3 fw-bold mb-3 brand-title">Copilot That Jawn</h1>
                 <p class="lead fs-4 mb-4">Where Philly innovation meets AI excellence. Master Microsoft Copilot and GitHub Copilot with our expert-curated tips.</p>
-                <div class="d-flex flex-wrap gap-2">
-                    <a asp-page="/Tips/Index" class="btn btn-light btn-lg">Browse All Tips</a>
-                    <a asp-page="/Tips/Category" asp-route-category="github-copilot" class="btn btn-outline-light btn-lg">GitHub Copilot</a>
+                <div class="d-flex flex-wrap gap-2">                    <a asp-page="/Tips/Index" class="btn btn-light btn-lg">Browse All Tips</a>
+                    <a asp-page="/Tips/Category" asp-route-category="GitHub Copilot" class="btn btn-outline-light btn-lg">GitHub Copilot</a>
                 </div>
             </div>            <div class="col-lg-5 col-md-4 text-center">
                 <img src="~/img/icon.webp" alt="Copilot That Jawn Logo" class="img-fluid" style="max-height: 200px;" />
@@ -62,7 +61,7 @@
 </div>
 
 <!-- Categories Section -->
-<div class="container-fluid bg-light py-5 mb-5">
+<div class="container-fluid py-5 mb-5">
     <div class="container">
         <h2 class="fw-bold mb-4"><i class="bi bi-folder2-open"></i> Explore Categories</h2>
         <div class="row g-4">

Web/Pages/Tips/Details.cshtml

@@ -230,15 +230,9 @@
     background-color: transparent !important;
     border: 1px solid #6c757d !important;
     border-radius: 0.25rem !important;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out !important;
     cursor: pointer !important;
 }
 
-.tip-content pre:hover .copy-button {
-    opacity: 1;
-}
-
 .tip-content .copy-button:hover {
     color: #fff !important;
     background-color: #6c757d !important;

Web/wwwroot/css/site.css

@@ -48,6 +48,10 @@
     --z-index-dropdown: 1050;
     --z-index-sticky: 1020;
     --z-index-code-copy: 10;
+    
+    /* Philadelphia sports team colors */
+    --philly-eagles-green: #004C54;
+    --philly-phillies-red: #E81828;
 }
 
 /* Dark theme colors */
@@ -511,4 +515,31 @@ html[data-theme-resolved="dark"] .list-group-item.active {
     background-color: yellow !important;
     border-color: yellow !important;
     color: #333 !important;
+}
+
+/* Philadelphia sports team color classes */
+.philly-eagles-green {
+    color: var(--philly-eagles-green);
+}
+
+.philly-phillies-red {
+    color: var(--philly-phillies-red);
+}
+
+html[data-theme="dark"] .philly-eagles-green,
+html[data-theme-resolved="dark"] .philly-eagles-green {
+    color: var(--philly-eagles-green);
+    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.7),
+                 1px -1px 0 rgba(255, 255, 255, 0.7),
+                -1px 1px 0 rgba(255, 255, 255, 0.7),
+                 1px 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+html[data-theme="dark"] .philly-phillies-red,
+html[data-theme-resolved="dark"] .philly-phillies-red {
+    color: var(--philly-phillies-red);
+    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.7),
+                 1px -1px 0 rgba(255, 255, 255, 0.7),
+                -1px 1px 0 rgba(255, 255, 255, 0.7),
+                 1px 1px 0 rgba(255, 255, 255, 0.7);
 }