@africode/core 5.0.8 → 5.0.9

package/templates/starter-website/src/styles/main.css

@@ -0,0 +1,195 @@
+:root {
+  color-scheme: light;
+  --bg: #f7f8fb;
+  --surface: #ffffff;
+  --surface-muted: #edf2f7;
+  --text: #172033;
+  --muted: #667085;
+  --border: #d8dee8;
+  --primary: #0f766e;
+  --accent: #b7791f;
+  --shadow: 0 16px 40px rgba(23, 32, 51, 0.08);
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #07111f;
+  --surface: #101b2d;
+  --surface-muted: #17243a;
+  --text: #f8fafc;
+  --muted: #a7b4c8;
+  --border: #26364f;
+  --primary: #2dd4bf;
+  --accent: #f5b84b;
+  --shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
+}
+
+* { box-sizing: border-box; }
+
+body {
+  min-height: 100vh;
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+a { color: inherit; text-decoration: none; }
+button, input { font: inherit; }
+
+.site-shell {
+  width: min(1120px, calc(100% - 32px));
+  margin: 0 auto;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 22px 0;
+}
+
+.brand { font-weight: 780; }
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  color: var(--muted);
+  font-size: 0.94rem;
+}
+
+.button {
+  min-height: 40px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0 14px;
+  background: var(--surface);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.button.primary {
+  border-color: var(--primary);
+  background: var(--primary);
+  color: #ffffff;
+}
+
+[data-theme="dark"] .button.primary { color: #07111f; }
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 24px;
+  align-items: center;
+  padding: 54px 0 34px;
+}
+
+.eyebrow, .muted, .card p, .proof p { color: var(--muted); }
+
+.eyebrow {
+  font-size: 0.84rem;
+  font-weight: 720;
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
+
+h1, h2, h3, p { margin: 0; }
+
+h1 {
+  margin-top: 10px;
+  max-width: 760px;
+  font-size: clamp(2.2rem, 6vw, 4.8rem);
+  line-height: 0.98;
+}
+
+.hero-copy {
+  margin-top: 18px;
+  max-width: 650px;
+  font-size: 1.08rem;
+  line-height: 1.7;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 24px;
+}
+
+.hero-panel, .card, .proof, .cta {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+}
+
+.hero-panel {
+  display: grid;
+  gap: 12px;
+  padding: 18px;
+}
+
+.signal {
+  display: grid;
+  gap: 6px;
+  padding: 14px;
+  border-radius: 6px;
+  background: var(--surface-muted);
+}
+
+.signal strong { font-size: 1.45rem; }
+
+.section { padding: 34px 0; }
+
+.section-head {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.card, .proof, .cta { padding: 18px; }
+.card h3, .proof h3 { margin-bottom: 8px; }
+
+.cta {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 18px;
+  align-items: center;
+  margin: 34px 0 48px;
+}
+
+.signup {
+  display: flex;
+  gap: 8px;
+}
+
+.signup input {
+  min-height: 42px;
+  min-width: 220px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0 12px;
+  background: var(--surface-muted);
+  color: var(--text);
+}
+
+@media (max-width: 860px) {
+  .hero, .grid, .cta { grid-template-columns: 1fr; }
+
+  .nav, .nav-links, .section-head, .signup {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .nav-links, .signup { display: grid; }
+}