feat: prominent Download button + callout on graph-database; gap hangs off diagram

Two pieces of polish on the /content/detail layout + the
/documentation/dev/graph-database page, both touched up in response
to Adam's feedback.

content/documentation/dev/graph-database.mdx:
  - The "Download" link under Get Started used the small [__Label]
    icon-link pattern; prod has a prominent button. Inline an
    <a class="primary-button"> with a material-symbols download icon.
  - The "To run our graph database..." paragraph is now wrapped in a
    <div class="callout callout-info"> so it renders as a light-blue
    info box matching prod.

src/styles.scss (NOT projects/website-angular/src/styles.scss -- only
the root one is wired into the default ng build):
  - Adds .primary-button (filled button with icon slot)
  - Adds .callout and .callout-info (info-box pattern)

detail.component.scss (::ng-deep cr-description-tab):
  - Moves the 28px breathing-room from above the projected download
    bar to above the diagram figure. Pages without a diagram (most
    reactions/proteins/complexes) no longer carry an awkward gap
    below their Summation row.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: adamjohnwright

projects/website-angular/content/documentation/dev/graph-database.mdx

@@ -35,9 +35,11 @@ To easily access and benefit from the graph database, we have developed the Grap
 
 ### [__Get Started](<#GetStarted>)
 
-[__Download](</download/current/reactome.graphdb.tgz>)
+<a class="primary-button" href="/download/current/reactome.graphdb.tgz"><span class="material-symbols-rounded">download</span>Download</a>
 
-To run our graph database on your personal computer, please choose the installation option that suits your need. Our team recommends [Neo4j Desktop](</documentation/dev/graph-database/neo4j-desktop>), but we can't compete with developers and their love for terminal console.
+<div class="callout callout-info">
+To run our graph database on your personal computer, please choose the installation option that suits your need. Our team recommends <a href="/documentation/dev/graph-database/neo4j-desktop">Neo4j Desktop</a>, but we can't compete with developers and their love for terminal console.
+</div>
 
 #### 1\. Docker
 

projects/website-angular/src/app/content/detail/detail.component.scss

@@ -125,16 +125,15 @@
   }
 
   // Breathing room around the projected download bar + diagram.
-  // Description-tab puts both inside the Overview slot; on the panel
-  // version they're absent, so we only need to space them on the
-  // standalone page.
-  app-detail-download-bar {
-    display: block;
-    margin: 28px 0 0;
-  }
+  // Spacing hangs off the diagram, not the download bar, so pages
+  // without a diagram (most reactions, proteins, complexes) don't get
+  // an awkward gap below their Summation row.
+  app-detail-download-bar,
   app-detail-diagram {
     display: block;
-    margin: 16px 0 8px;
+  }
+  app-detail-diagram .detail-diagram {
+    margin: 28px 0 8px;
   }
 
 

src/styles.scss

@@ -472,3 +472,48 @@ body {
   display: flex;
   flex-direction: column;
 }
+
+// Prominent button for primary downloads / actions emitted inline by
+// MDX pages (currently used on /documentation/dev/graph-database).
+.primary-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 8px 18px;
+  border-radius: 6px;
+  background: var(--primary);
+  color: var(--on-primary, #fff);
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: none;
+  transition: filter 0.15s, transform 0.15s;
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: none;
+    filter: brightness(1.1);
+    transform: translateY(-1px);
+    color: var(--on-primary, #fff);
+  }
+
+  .material-symbols-rounded {
+    font-size: 1.2em;
+  }
+}
+
+// Light-blue (or themed) callout box for inline notes inside MDX pages.
+// Modeled on the prod Joomla pages' info-box styling.
+.callout {
+  margin: 1rem 0;
+  padding: 12px 16px;
+  border-radius: 6px;
+  border-left: 4px solid var(--primary);
+  background: var(--secondary-container, rgba(0, 110, 144, 0.08));
+  color: var(--on-surface);
+  line-height: 1.5;
+}
+
+.callout-info {
+  border-left-color: var(--primary);
+  background: rgba(0, 110, 144, 0.08);
+}