moving

apps/www/app/_components/Footer.module.css

@@ -0,0 +1,95 @@
+.footer {
+  padding: 72px var(--gutter) 32px;
+  background: var(--hive-950);
+  border-top: 1px solid var(--line-soft);
+}
+
+.grid {
+  max-width: var(--container-wide);
+  margin: 0 auto 56px;
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
+  gap: 48px;
+}
+
+.brandBlock {
+  max-width: 320px;
+}
+
+.brandDescription {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--hive-300);
+  margin-top: 14px;
+  margin-bottom: 12px;
+}
+
+.attribution {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.columnTitle {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--hive-200);
+  margin-bottom: 16px;
+}
+
+.columnList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.columnList li {
+  margin-bottom: 10px;
+}
+
+.columnLink {
+  font-size: 13px;
+  color: var(--hive-300);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.columnLink:hover {
+  color: var(--hive-50);
+}
+
+.baseline {
+  max-width: var(--container-wide);
+  margin: 0 auto;
+  padding-top: 24px;
+  border-top: 1px solid var(--hive-800);
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.baselineRight {
+  font-family: var(--mono);
+}
+
+@media (max-width: 1023px) {
+  .grid {
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 32px;
+  }
+}
+
+@media (max-width: 640px) {
+  .grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .baseline {
+    justify-content: flex-start;
+    flex-direction: column;
+  }
+}