Template:CS/products/card/styles.css: Difference between revisions

Content deleted Content added

Inline

Revision as of 16:18, 26 October 2025

/* 2) Template:CS/products/card/styles.css */
.capsach-card{width:100%;max-width:480px;margin:0}
.capsach-align-left{margin-left:0;margin-right:auto;text-align:left}
.capsach-align-center{margin-left:auto;margin-right:auto;text-align:left}
.capsach-align-right{margin-left:auto;margin-right:0;text-align:left}

/* Media area: 2:3 aspect ratio and full-width image */
.capsach-card__media{position:relative;overflow:hidden;border-radius:.75rem;background-color:#f5f6f7}
.capsach-card__ratio{display:block;width:100%;height:0;padding-top:150%} /* 3/2 = 150% */
.capsach-card__media-inner{position:absolute;top:0;right:0;bottom:0;left:0}
.capsach-card__media-inner a{display:block;width:100%;height:100%}
.capsach-card__media-inner img{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}

/* Placeholder when no img is provided */
.capsach-card__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(180deg,#f2f3f5,#e6e7e9)}

/* CTA */
.capsach-card__cta{margin-top:.5rem}

@@ Line 1: / Line 1: @@
-/* Template:CS/products/card/styles.css (fixed for TemplateStyles) */
+/* 2) Template:CS/products/card/styles.css */
 .capsach-card{width:100%;max-width:480px;margin:0}
 .capsach-align-left{margin-left:0;margin-right:auto;text-align:left}
 .capsach-align-center{margin-left:auto;margin-right:auto;text-align:left}
 .capsach-align-right{margin-left:auto;margin-right:0;text-align:left}
-.capsach-card__title{margin:0 0 .5rem 0;font-weight:600;font-size:1.1em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* Media area: 2:3 aspect ratio and full-width image */
 .capsach-card__media{position:relative;overflow:hidden;border-radius:.75rem;background-color:#f5f6f7}
-.capsach-card__media-link{display:block;color:inherit;text-decoration:none}
+.capsach-card__ratio{display:block;width:100%;height:0;padding-top:150%} /* 3/2 = 150% */
+.capsach-card__media-inner{position:absolute;top:0;right:0;bottom:0;left:0}
-.capsach-card__img{display:block;width:100%;height:auto}
+.capsach-card__media-inner a{display:block;width:100%;height:100%}
+.capsach-card__media-inner img{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}
-/* Placeholder: 16:10 intrinsic ratio without aspect-ratio */
+/* Placeholder when no img is provided */
-.capsach-card__placeholder{
+.capsach-card__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(180deg,#f2f3f5,#e6e7e9)}
-  display:block;
-  width:100%;
-  height:0;               /* create intrinsic box */
-  padding-top:62.5%;      /* 10 / 16 = 0.625 */
-  background-image:linear-gradient(180deg,#f2f3f5,#e6e7e9);
-}
+/* CTA */
-.capsach-card__overlay{
-  position:absolute;left:0;right:0;bottom:0;
-  padding:.5rem;
-  display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end;
-  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))
-  /* no pointer-events (not allowed by TemplateStyles) */
-}
-.capsach-chip{
-  display:inline-flex;
-  max-width:calc(50% - .375rem);
-  padding:.375rem .625rem;
-  border-radius:999px;
-  line-height:1.2;
-  font-size:.875em;
-  box-shadow:0 0 0 1px rgba(255,255,255,.15) inset;
-  overflow:hidden;
-}
-.capsach-chip__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.capsach-chip--badge{background:rgba(0,0,0,.78);color:#fff}
-.capsach-chip--price{background:rgba(255,255,255,.95);color:#202122;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}
 .capsach-card__cta{margin-top:.5rem}
-@media (min-width:768px){
-  .capsach-card__title{font-size:1.15em}
-}