Implemented phase 1 for the POC prototype in the Website service.

2026-09-21 11:16:52 +02:00
1 parent 6d7ab4bcba
commit ea89ea892a
@@ -0,0 +1,217 @@
+/* CCN — listing detail page. */
+
+.listing {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.listing__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.listing__media {
+  width: min(100%, 320px);
+  margin: 0 auto;
+}
+
+.cover--hero {
+  box-shadow: var(--shadow-cover);
+}
+
+.listing__main {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--space-6);
+  min-width: 0;
+}
+
+.listing__intro {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.listing__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.listing__chips .chip {
+  padding: var(--space-1) 9px;
+  font-size: 12px;
+}
+
+.listing__byline {
+  color: var(--ink-soft);
+  font-size: 15px;
+}
+
+.buy-box {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.buy-box__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.buy-box__price {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 14px;
+}
+
+.buy-box__terms {
+  color: var(--muted);
+}
+
+.buy-box__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+.buy-box__actions .button--primary {
+  flex: 1 1 auto;
+}
+
+.seller {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-4);
+  padding: 18px var(--space-5);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+}
+
+.seller__text {
+  display: flex;
+  flex: 1 1 220px;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.seller__name {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.seller__name a {
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.seller__name a:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.listing__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.listing__section .type-eyebrow {
+  color: var(--ink);
+  font-size: 13px;
+}
+
+.details {
+  display: grid;
+  grid-template-columns: minmax(96px, 180px) minmax(0, 1fr);
+  column-gap: var(--space-6);
+  border-bottom: 1px solid var(--line);
+  font-size: 14px;
+}
+
+.details dt,
+.details dd {
+  padding: 10px 0;
+  border-top: 1px solid var(--line);
+}
+
+.details dt {
+  color: var(--muted);
+}
+
+.listing__notes {
+  color: var(--ink-soft);
+  font-size: 14px;
+  line-height: 1.55;
+  text-wrap: pretty;
+}
+
+.listing__related {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  padding-top: var(--space-8);
+  border-top: 1px solid var(--line);
+}
+
+@media (min-width: 600px) {
+  .listing__body {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--space-8);
+  }
+
+  .listing__media {
+    position: sticky;
+    top: var(--space-6);
+    flex-shrink: 0;
+    width: 320px;
+    margin: 0;
+  }
+
+  .buy-box__actions .button--primary {
+    flex: 0 0 auto;
+  }
+}
+
+@media (min-width: 1024px) {
+  .listing {
+    gap: var(--space-10);
+  }
+
+  .listing__body {
+    gap: 48px;
+  }
+
+  .listing__media {
+    width: 520px;
+  }
+
+  .listing__main {
+    gap: var(--space-7);
+  }
+
+  .listing__byline {
+    font-size: 16px;
+  }
+
+  .buy-box {
+    padding: var(--space-7);
+  }
+
+  .listing__related {
+    padding-top: var(--space-10);
+  }
+}