Add a dark background card for eg NODES promo

preview-src/docs-ndl.adoc

@@ -56,6 +56,20 @@ Run graph algorithms and machine learning models to analyze your data at scale.
 [.link]
 xref:gds:index.adoc[Unlock insights from data]
 
+
+[.dark.icon-w.nodes-patterns.selectable]
+=== Neo4j Online Developer Conference
+
+[.icon]
+image:https://dist.neo4j.com/wp-content/uploads/20240514071251/node-24-logo.svg[]
+
+[.description]
+Join us on November 7 for live and unique tech talks over 24 hours across all timezones
+
+[.link]
+link:https://neo4j.registration.goldcast.io/events/03805ea9-fe3a-4cac-8c15-aa622666531a?utm_source=neodocs&utm_medium=banner&utm_campaign=std[Register]
+
+
 === Create applications
 
 [.icon]

preview-src/docs-sub-hub.adoc

@@ -24,6 +24,20 @@ endif::[]
 This section is designed to help you learn how to import various types of data into Neo4j. From JSON to APIs to another database, you can retrieve data from nearly any source and use it to populate your graph.
 
 
+[.dark.icon-w.nodes-patterns]
+=== Neo4j Online Developer Conference
+
+[.icon]
+image:https://dist.neo4j.com/wp-content/uploads/20240514071251/node-24-logo.svg[]
+
+[.description]
+Join us on November 7 for live and unique tech talks over 24 hours across all timezones
+
+[.link]
+link:https://neo4j.registration.goldcast.io/events/03805ea9-fe3a-4cac-8c15-aa622666531a?utm_source=neodocs&utm_medium=banner&utm_campaign=std[Register]
+
+
+
 [role=label--new-5.12]
 === `LOAD CSV`
 [.icon]

src/css/docs-ndl.css

@@ -478,7 +478,7 @@ body.docs-ndl .cards .sect2 > a,
 body.docs-ndl .cards .sect2.not-selectable,
 body.docs-ndl .cards:not(.selectable) .sect2,
 body.docs-ndl .lists .sect2 {
-  overflow: hidden;
+  /* overflow: hidden; */
   position: relative;
   display: flex;
   flex-direction: column;
@@ -487,8 +487,21 @@ body.docs-ndl .lists .sect2 {
   /* justify-content: space-between; */
   gap: 1rem;
   /* min-width: 30%; */
-  padding: 1rem;
+  /* padding: 1rem; */
   /* margin: 0 1rem 1rem 0; */
+  /* background: var(--color-white); */
+}
+
+body.docs-ndl .cards .sect2.selectable > a,
+body.docs-ndl .cards .sect2.not-selectable,
+body.docs-ndl .cards:not(.selectable) .sect2:not(.selectable),
+body.docs-ndl .lists .sect2 {
+  padding: 1rem;
+}
+
+body.docs-ndl .cards .sect2.not-selectable:not(.dark),
+body.docs-ndl .cards .sect2:not(.dark) a,
+body.docs-ndl .cards:not(.selectable) .sect2:not(.dark) {
   background: var(--color-white);
 }
 
@@ -498,6 +511,28 @@ body.docs-ndl .lists .sect2 {
 - graph-academy
 */
 
+body.docs-ndl .cards .sectionbody > div.sect2.dark a {
+  background-color: var(--color-black);
+  color: var(--color-white);
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+}
+
+body.docs-ndl .cards .sect2.dark h3 {
+  color: var(--color-white);
+}
+
+body.docs-ndl .cards .sect2.icon-w .icon img,
+body.docs-ndl .cards.icon-l .sect2.icon-w .icon img {
+  width: 12rem;
+}
+
+body.docs-ndl .cards .sectionbody > div.sect2.nodes-patterns a {
+  background-image: url(https://dist.neo4j.com/wp-content/uploads/20240514071252/nodes-patterns.svg);
+  background-position: center right;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
 /* this would give a background image on cards marked with [.ga-promo] */
 body.docs-ndl .cards .sectionbody > div.sect2.graph-academy > a,
 body.docs-ndl .cards .sectionbody > div.sect2.graph-academy:not(.selectable) {

src/js/70-docs-ndl.js

@@ -7,8 +7,14 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 
-  var makeClickable = function (card) {
-    var links = card.querySelectorAll('div.sect2:not(.not-selectable) div.link')
+  var makeClickable = function (cards) {
+    var links
+    if (cards.classList.contains('selectable')) {
+      links = cards.querySelectorAll('div.sect2:not(.not-selectable) div.link')
+    } else {
+      links = cards.querySelectorAll('div.sect2.selectable div.link')
+    }
+
     links.forEach(function (link) {
       var target = link.querySelector('a').getAttribute('href')
       var card = link.parentElement
@@ -44,7 +50,7 @@ document.addEventListener('DOMContentLoaded', function () {
   })
 
   // Add links to cards
-  document.querySelectorAll('.cards.selectable')
+  document.querySelectorAll('.cards')
     .forEach(makeClickable)
 
   // Move labels to the icon div to position them