SEO/AEO, Farb schema, breadcrumbs

2025-11-29 23:41:54 +01:00
parent 4fa24c8f3d
commit d2953fd0d9
87 changed files with 5672 additions and 579 deletions
--- a/bizmatch/src/styles/lazy-load.css
+++ b/bizmatch/src/styles/lazy-load.css
@@ -0,0 +1,56 @@
+/* Lazy loading image styles */
+img.lazy-loading {
+  filter: blur(5px);
+  opacity: 0.6;
+  transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+img.lazy-loaded {
+  filter: blur(0);
+  opacity: 1;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+img.lazy-error {
+  opacity: 0.5;
+  background-color: #f3f4f6;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0.6;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Aspect ratio placeholders to prevent layout shift */
+.img-container-16-9 {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  overflow: hidden;
+}
+
+.img-container-4-3 {
+  position: relative;
+  padding-bottom: 75%; /* 4:3 aspect ratio */
+  overflow: hidden;
+}
+
+.img-container-1-1 {
+  position: relative;
+  padding-bottom: 100%; /* 1:1 aspect ratio (square) */
+  overflow: hidden;
+}
+
+.img-container-16-9 img,
+.img-container-4-3 img,
+.img-container-1-1 img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}