Add support for DBD card edition (template + styles)

copi.owasp.org/assets/css/cards.scss

@@ -442,7 +442,7 @@ $wildcard-mobile-color: rgb(251, 182, 124);
     background-color: scale-color($cornucopia-color, $lightness: 75%, $saturation:  -20%);
   }
 
-  &.wildcard {
+  &.wild-card {
     background-color: scale-color($wildcard-color, $lightness: 75%, $saturation:  -20%);
   }
 
@@ -965,7 +965,7 @@ $wildcard-mobile-color: rgb(251, 182, 124);
 
     .value {
       position: absolute;
-      bottom: clmap(48px, 4.8vw, 64px);
+      bottom: clamp(48px, 4.8vw, 64px);
       right: clamp(-29px, -2.9vw, -38px);
       color: rgb(42, 10, 60);
       font-family: 'Open Sans Regular';
@@ -1885,3 +1885,76 @@ $wildcard-mobile-color: rgb(251, 182, 124);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
   filter: alpha(opacity=20);
 }
+/* DBD Card Styles */
+
+.card.dbd {
+
+  .left-value {
+    flex: none;
+    position: relative;
+    top: clamp(36px, 3.6vw, 48px);
+
+    height: clamp(72px, 7.2vw, 96px);
+    width: clamp(55px, 5.5vw, 74px);
+
+
+
+    padding: clamp(28px, 2.8vw, 37px) 0;
+    border-top-right-radius: clamp(12px, 1.2vw, 16px);
+    border-bottom-right-radius: clamp(12px, 1.2vw, 16px);
+
+    color: #fff;
+    text-transform: uppercase;
+    font-family: 'Segoe Condensed';
+    font-size: clamp(41px, 4.1vw, 55px);
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .main-content {
+    overflow: hidden;
+    flex: auto;
+    padding: clamp(13px, 1.3vw, 18px) clamp(12px, 1.2vw, 16px);
+
+    .category {
+      font-family: 'Segoe Light';
+      font-size: clamp(22px, 2.2vw, 29px);
+      font-weight: 300;
+      margin-bottom: 10px;
+    }
+
+    .description {
+      font-family: 'Segoe';
+      font-size: clamp(12px, 1.2vw, 16px);
+      line-height: 1.3;
+    }
+  }
+
+  &.scope {
+   .left-value { background-color: #3E4736; } // Rifle Green
+}
+
+&.architecture {
+ .left-value { background-color: #677740; } // Mustard Green
+}
+
+&.agency {
+ .left-value { background-color: #DBBC58; } // Sunray
+}
+
+&.trust {
+ .left-value { background-color: #A8854C; } // Café Au Lait
+}
+
+&.porosity {
+ .left-value { background-color: #944C36; } // Chestnut
+}
+
+&.cornucopia {
+ .left-value { background-color: #613030; } // Puce Red
+}
+
+&.joker {
+ .left-value { background-color: #FEB048; } // Pastel Orange
+}
+}

copi.owasp.org/lib/copi_web/controllers/card_html/show.html.heex

@@ -63,6 +63,25 @@
         <% end %>
       </div>
     </div>
+
+ <% @card.edition == "dbd" -> %>
+
+  <div class={["card", "dbd", Slug.slugify(@card.category), "n" <> @card.value]}>
+    <div class="left-value"><%= @card.value %></div>
+    <div class="main-content">
+      <p class="category"><%= @card.category %></p>
+
+      <p class="description"><%= @card.description %></p>
+
+      <p class="description">
+        <a class="info" rel="help" target="_blank" href={@card.url}>
+          Need more info?
+        </a>
+      </p>
+
+    </div>
+  </div>
+
   <% @card.edition == "eop" -> %>
 
     <div class={["card", "eop", Slug.slugify(@card.category), "n" <> @card.value]}>