Merge main to da

blocks/carousel/_carousel.json

@@ -0,0 +1,104 @@
+{
+  "definitions": [
+    {
+      "title": "Carousel",
+      "id": "carousel",
+      "plugins": {
+        "xwalk": {
+          "page": {
+            "resourceType": "core/franklin/components/block/v1/block",
+            "template": {
+              "name": "Carousel",
+              "filter": "carousel"
+            }
+          }
+        }
+      }
+    },
+    {
+      "title": "Carousel Card",
+      "id": "carousel-cards",
+      "plugins": {
+        "xwalk": {
+          "page": {
+            "resourceType": "core/franklin/components/block/v1/block/item",
+            "template": {
+              "name": "Carousel Cards",
+              "model": "carousel-cards"
+            }
+          }
+        }
+      }
+    }
+  ],
+  "models": [
+    {
+      "id": "carousel",
+      "fields": []
+    },
+    {
+      "id": "carousel-cards",
+      "fields": [
+        {
+          "component": "reference",
+          "valueType": "string",
+          "name": "image",
+          "label": "Image"
+        },
+        {
+          "component": "select",
+          "valueType": "string",
+          "name": "alignment",
+          "label": "Card Alignment",
+          "value": "center",
+          "options": [
+            {
+              "name": "Left",
+              "value": "left"
+            },
+            {
+              "name": "Center",
+              "value": "center"
+            },
+            {
+              "name": "Right",
+              "value": "right"
+            }
+          ]
+        },
+        {
+          "component": "text",
+          "valueType": "string",
+          "name": "title",
+          "label": "Card Title"
+        },
+        {
+          "component": "richtext",
+          "valueType": "string",
+          "name": "description",
+          "label": "Card Description"
+        },
+        {
+          "component": "text",
+          "valueType": "string",
+          "name": "buttonLabel",
+          "label": "Button Label"
+        },
+        {
+          "component": "aem-content",
+          "name": "buttonLink",
+          "label": "Button Link"
+        }
+      ]
+    }
+  ],
+  "filters": [
+    {
+      "id": "carousel",
+      "components": [
+        "carousel-cards"
+      ]
+    }
+  ]
+}
+

blocks/carousel/carousel.css

@@ -0,0 +1,261 @@
+/* =========================
+   Base Carousel Layout
+========================= */
+
+.carousel {
+  position: relative;
+  overflow: hidden;
+}
+
+.carousel-viewport {
+  overflow: hidden;
+  width: 100%;
+}
+
+.carousel-track {
+  display: flex;
+  transition: transform 0.6s ease;
+}
+
+.carousel-slide {
+  min-width: 100%;
+  position: relative;
+}
+
+/* Image */
+.carousel-slide picture img {
+  width: 100%;
+  height: 500px;
+  object-fit: cover;
+  display: block;
+}
+
+/* =========================
+   Overlay Base (Auto Height)
+========================= */
+
+.carousel-overlay {
+  position: absolute;
+  bottom: 40px;
+  padding: 2.5rem 3rem;
+  width: 45%;
+  color: #fff;
+  z-index: 2;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.65);
+}
+
+/* Gradient background for readability */
+.carousel-overlay::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.75),
+    rgba(0, 0, 0, 0.4),
+    transparent
+  );
+}
+
+/* =========================
+   Alignment Variants
+========================= */
+
+/* LEFT */
+.overlay-left {
+  left: 60px;
+  text-align: left;
+}
+
+/* RIGHT */
+.overlay-right {
+  right: 60px;
+  text-align: left;
+}
+
+/* CENTER */
+.overlay-center {
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  width: 60%;
+}
+
+.overlay-right::before {
+  background: linear-gradient(
+    to left,
+    rgba(0, 0, 0, 0.75),
+    rgba(0, 0, 0, 0.4),
+    transparent
+  );
+}
+
+.overlay-center::before {
+  background: rgba(0, 0, 0, -0.45);
+}
+
+/* =========================
+   Overlay cells (preserve UE bindings)
+========================= */
+
+/* Hidden cells: keep in DOM for UE, hide visually */
+.carousel-overlay .carousel-alignment,
+.carousel-overlay .carousel-button-style,
+.carousel-overlay .carousel-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.carousel-overlay .carousel-title {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+.carousel-overlay .carousel-desc {
+  font-size: 1.1rem;
+  margin: 0.5rem 0;
+}
+
+/* =========================
+   Typography
+========================= */
+
+.carousel-overlay h1,
+.carousel-overlay h2,
+.carousel-overlay h3 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  line-height: 1.2;
+}
+
+.carousel-overlay p {
+  font-size: 1.1rem;
+  margin: 0.5rem 0;
+}
+
+/* =========================
+   Button Styling
+========================= */
+
+/* Higher specificity than styles.css a.button:any-link (0,2,1) */
+.carousel .carousel-overlay .carousel-button {
+  display: inline-block;
+  margin-top: 1.8rem;
+  padding: 0.85rem 2rem;
+  background-color: #C7C6C1;
+  color: #000 !important;
+  text-decoration: none !important;
+  font-weight: 600;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.carousel .carousel-overlay .carousel-button:hover {
+  background-color: #000;
+  color: #fff !important;
+  text-decoration: none !important;
+}
+
+.carousel-overlay a {
+  text-decoration: none;
+}
+
+/* =========================
+   Navigation Arrows
+========================= */
+
+.carousel-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(0, 0, 0, 0.6);
+  border: none;
+  color: #fff;
+  padding: 1rem 1.2rem;
+  cursor: pointer;
+  z-index: 3;
+  font-size: 1.2rem;
+  border-radius: 4px;
+  transition: 0.3s ease;
+}
+
+.carousel-nav.prev {
+  left: 20px;
+}
+
+.carousel-nav.next {
+  right: 20px;
+}
+
+.carousel-nav:hover {
+  background: rgba(0, 0, 0, 0.9);
+}
+
+/* =========================
+   Responsive
+========================= */
+
+@media (max-width: 992px) {
+  .carousel-slide picture img {
+    height: 450px;
+  }
+
+  .carousel-overlay {
+    width: 70%;
+    padding: 3rem 2rem;
+  }
+
+  .carousel-overlay h1,
+  .carousel-overlay h2,
+  .carousel-overlay h3 {
+    font-size: 2.2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .carousel-slide picture img {
+    height: 380px;
+  }
+
+  .carousel-overlay {
+    width: 90%;
+    left: 50% !important;
+    right: auto !important;
+    transform: translateX(-50%) !important;
+    bottom: 20px;
+    text-align: center;
+  }
+
+  .overlay-left,
+  .overlay-right,
+  .overlay-center {
+    left: 0;
+    right: 0;
+    transform: none;
+  }
+
+  .carousel-overlay::before {
+    background: rgba(0, 0, 0, 0.6);
+  }
+
+  .carousel-overlay h1,
+  .carousel-overlay h2,
+  .carousel-overlay h3 {
+    font-size: 1.8rem;
+  }
+
+  .carousel-overlay p {
+    font-size: 1rem;
+  }
+}