feat(frontend): add reassurance strip and supported-formats section

Part of the Ombrora Convert redesign (Task 3/5).
2026-07-31 14:57:46 +02:00
parent bc7a3b0691
commit 2aa8e51b80
5 changed files with 170 additions and 34 deletions
@@ -0,0 +1,65 @@
+.reassurance,
+.formats-grid-section {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+}
+
+.reassurance-list {
+  list-style: none;
+  padding: 0;
+  margin: 1.5rem 0 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+
+.reassurance-list li {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  text-align: left;
+}
+
+.formats-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.formats-family {
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  text-align: left;
+}
+
+.formats-family h3 {
+  margin: 0 0 0.5rem;
+}
+
+.formats-family p {
+  margin: 0;
+  opacity: 0.8;
+  font-size: 0.875rem;
+}
+
+@media (min-width: 768px) {
+  .reassurance-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .formats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .formats-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}