security: remove style-src unsafe-inline

EssentialCSharp.Web/Areas/Identity/Pages/Account/Manage/TwoFactorAuthentication.cshtml

@@ -38,7 +38,7 @@ ViewData["ActivePage"] = ManageNavPages.TwoFactorAuthentication;
 
         if (Model.IsMachineRemembered)
         {
-            <form method="post" style="display: inline-block">
+            <form method="post" class="d-inline-block">
                     <button type="submit" class="btn btn-primary">Forget this browser</button>
                 </form>
         }

EssentialCSharp.Web/Areas/Identity/Pages/_PasswordStrengthMeter.cshtml

@@ -17,10 +17,10 @@
      data-user-input-fields="@Model.UserInputFieldIds"
      data-min-length="@EssentialCSharp.Web.Services.PasswordRequirementOptions.PasswordMinimumLength">
     <div class="d-flex gap-2 align-items-center">
-        <div class="progress flex-grow-1" style="height: 6px;" role="progressbar"
+        <div class="progress flex-grow-1 password-strength-progress" role="progressbar"
              aria-label="Password strength"
              aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-            <div class="progress-bar password-strength-bar" style="width: 0;"></div>
+            <div class="progress-bar password-strength-bar password-strength-bar-initial"></div>
         </div>
         <button type="button"
                 class="btn btn-sm btn-outline-secondary password-show-toggle py-0 px-1 border-0"

EssentialCSharp.Web/Program.cs

@@ -508,7 +508,8 @@ await McpJsonRpcResponseWriter.WriteErrorAsync(
             string csp = string.Join("; ",
                 $"default-src 'self'",
                 $"script-src 'self' 'unsafe-inline' cdn.jsdelivr.net www.clarity.ms www.googletagmanager.com js.monitor.azure.com https://hcaptcha.com https://*.hcaptcha.com{tryDotNetSources}",
-                $"style-src 'self' 'unsafe-inline' cdnjs.cloudflare.com fonts.googleapis.com https://hcaptcha.com https://*.hcaptcha.com",
+                $"style-src 'self' cdnjs.cloudflare.com fonts.googleapis.com https://hcaptcha.com https://*.hcaptcha.com",
+                $"style-src-attr 'unsafe-inline'",
                 $"font-src 'self' fonts.gstatic.com cdnjs.cloudflare.com",
                 $"img-src 'self' data: https:",
                 $"connect-src 'self' https://hcaptcha.com https://*.hcaptcha.com https://api.pwnedpasswords.com https://*.algolia.net https://*.algolianet.com https://*.google-analytics.com https://*.clarity.ms https://*.in.applicationinsights.azure.com{GetApplicationInsightsCspSources(app.Configuration["APPLICATIONINSIGHTS_CONNECTION_STRING"], app.Logger)}{tryDotNetSources}",

EssentialCSharp.Web/Views/Home/About.cshtml

@@ -27,7 +27,7 @@
         </div>
         <div class="col-12 col-md-6">
             <div class="d-flex align-items-center justify-content-center h-100 bg-light">
-                <img src="/images/intellitect-logo.svg" class="img-fluid" alt="IntelliTect Logo" style="height: 75px">
+                <img src="/images/intellitect-logo.svg" class="img-fluid intellitect-logo-img" alt="IntelliTect Logo">
             </div>
         </div>
     </div>
@@ -38,7 +38,7 @@
         <div class="col-12 col-md-6">
             <div class="d-flex align-items-center justify-content-center h-100">
                 <a href="https://a.co/d/95wxhTg" target="_blank">
-                    <img src="/images/book.png" class="img-fluid" style="height: 450px" alt="Essential C Sharp Book">
+                    <img src="/images/book.png" class="img-fluid ecs-book-cover-img" alt="Essential C Sharp Book">
                 </a>
             </div>
         </div>
@@ -70,4 +70,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

EssentialCSharp.Web/Views/Home/Guidelines.cshtml

@@ -53,7 +53,7 @@
             foreach (var guideline in group)
             {
                 <div>
-                    <i class="@GetSymbolForType(guideline.Type)" style="color: @GetColorForType(guideline.Type); padding-right: 10px;"></i>
+                    <i class="@GetSymbolForType(guideline.Type) guideline-icon @GetColorClassForType(guideline.Type)"></i>
                     <span>@guideline.Guideline</span>
                 </div>
             }
@@ -75,14 +75,14 @@
         };
     }
 
-    private string GetColorForType(GuidelineType type)
+    private string GetColorClassForType(GuidelineType type)
     {
         return type switch
         {
-            GuidelineType.DoNot => "#ff0000",
-            GuidelineType.Avoid => "#ff0000",
-            GuidelineType.Consider => "#7a7a7a",
-            GuidelineType.Do => "#63E6BE",
+            GuidelineType.DoNot => "guideline-color-do-not",
+            GuidelineType.Avoid => "guideline-color-avoid",
+            GuidelineType.Consider => "guideline-color-consider",
+            GuidelineType.Do => "guideline-color-do",
             _ => string.Empty,
         };
     }

EssentialCSharp.Web/Views/Home/Home.cshtml

@@ -36,7 +36,7 @@
         <div class="col-12 col-md-6">
             <div class="d-flex align-items-center justify-content-center h-100">
                 <a href="https://a.co/d/95wxhTg" target="_blank">
-                    <img src="/images/book.png" class="img-fluid" style="height: 450px" alt="Essential C Sharp Book">
+                    <img src="/images/book.png" class="img-fluid ecs-book-cover-img" alt="Essential C Sharp Book">
                 </a>
             </div>
         </div>

EssentialCSharp.Web/Views/McpSetup/Index.cshtml

@@ -9,7 +9,7 @@
     bool isSignedIn = SignInManager.IsSignedIn(User);
 }
 
-<div class="container py-4" style="max-width:900px">
+<div class="container py-4 mcp-setup-container">
 
 
     <div class="mb-5">
@@ -267,7 +267,7 @@
         @foreach (var tool in Model)
         {
             <details class="card mb-2">
-                <summary class="card-header d-flex align-items-center gap-2" style="cursor:pointer;list-style:none">
+                <summary class="card-header d-flex align-items-center gap-2 mcp-tool-summary">
                     <span class="details-chevron">&#9656;</span>
                     <span class="font-monospace fw-semibold">@tool.Name</span>
                     <span class="text-muted small ms-auto">@tool.Title</span>
@@ -380,17 +380,6 @@
 </div>
 
 @section Scripts {
-    <style>
-        .details-chevron {
-            display: inline-block;
-            transition: transform 0.2s ease;
-            color: var(--bs-secondary-color, #6c757d);
-            font-size: .75rem;
-        }
-        details[open] > summary .details-chevron {
-            transform: rotate(90deg);
-        }
-    </style>
     <script>
         function toggleAllTools(btn) {
             const details = document.querySelectorAll('#tools details');

EssentialCSharp.Web/Views/Shared/_Layout.cshtml

@@ -182,7 +182,7 @@
         </div>
     </footer>
 
-    <div id="docsearch" style="display: none;"></div>
+    <div id="docsearch" class="d-none"></div>
 
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="~/js/algoliaDocSearch.js" asp-append-version="true"></script>

EssentialCSharp.Web/wwwroot/css/styles.css

@@ -786,6 +786,80 @@ details > summary::-webkit-details-marker {
   padding-left: 1em;
 }
 
+/* CSP inline-style replacements */
+.mcp-setup-container {
+  max-width: 900px;
+}
+
+.mcp-tool-summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+.details-chevron {
+  display: inline-block;
+  transition: transform 0.2s ease;
+  color: var(--bs-secondary-color, #6c757d);
+  font-size: .75rem;
+}
+
+details[open] > summary .details-chevron {
+  transform: rotate(90deg);
+}
+
+.password-strength-progress {
+  height: 6px;
+}
+
+.password-strength-bar-initial {
+  width: 0;
+}
+
+.password-strength-width-20 {
+  width: 20%;
+}
+
+.password-strength-width-40 {
+  width: 40%;
+}
+
+.password-strength-width-60 {
+  width: 60%;
+}
+
+.password-strength-width-80 {
+  width: 80%;
+}
+
+.password-strength-width-100 {
+  width: 100%;
+}
+
+.guideline-icon {
+  padding-right: 10px;
+}
+
+.guideline-color-do-not,
+.guideline-color-avoid {
+  color: #ff0000;
+}
+
+.guideline-color-consider {
+  color: #7a7a7a;
+}
+
+.guideline-color-do {
+  color: #63E6BE;
+}
+
+.intellitect-logo-img {
+  height: 75px;
+}
+
+.ecs-book-cover-img {
+  height: 450px;
+}
+
 /* Home Page Styles */
 
 .quote {
@@ -1079,6 +1153,7 @@ button.accept-policy {
 }
 
 /* Reduced motion support */
+
 @media (prefers-reduced-motion: reduce) {
     .captcha-modal-overlay,
     .captcha-modal-card {
@@ -1093,3 +1168,105 @@ button.accept-policy {
         transform: none;
     }
 }
+
+/* Cookie consent banner */
+.consent-banner {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #ffffff;
+    border-top: 3px solid #007bff;
+    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
+    z-index: 10000;
+    font-family: inherit;
+}
+
+.consent-banner-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+}
+
+.consent-banner-text h3 {
+    margin: 0 0 8px 0;
+    font-size: 1.2rem;
+    color: #333;
+}
+
+.consent-banner-text p {
+    margin: 0;
+    color: #666;
+    font-size: 0.95rem;
+}
+
+.consent-banner-actions {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.consent-details {
+    border-top: 1px solid #eee;
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.consent-details-hidden {
+    display: none;
+}
+
+.consent-category {
+    margin-bottom: 20px;
+}
+
+.consent-switch {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    cursor: pointer;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background: #f8f9fa;
+}
+
+.consent-switch input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    margin: 0;
+}
+
+.consent-info strong {
+    display: block;
+    margin-bottom: 5px;
+    color: #333;
+}
+
+.consent-info p {
+    margin: 0;
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.consent-actions {
+    text-align: center;
+    margin-top: 20px;
+}
+
+@media (max-width: 768px) {
+    .consent-banner-content {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .consent-banner-actions {
+        justify-content: center;
+        width: 100%;
+    }
+}