Update styles.css

Author: ipanalytics

docs/styles.css

@@ -14,6 +14,10 @@
   box-sizing: border-box;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   margin: 0;
   min-height: 100vh;
@@ -30,10 +34,10 @@ main {
 
 .hero {
   display: grid;
-  grid-template-columns: 0.9fr 1.1fr;
+  grid-template-columns: 0.92fr 1.08fr;
   gap: 36px;
   align-items: center;
-  min-height: 420px;
+  min-height: 470px;
 }
 
 .hero img {
@@ -61,29 +65,55 @@ h1 {
 
 h2 {
   margin: 0 0 12px;
-  font-size: 22px;
+  font-size: 24px;
   letter-spacing: 0;
 }
 
 p {
   margin: 0;
   color: var(--muted);
-  line-height: 1.65;
+  line-height: 1.7;
+}
+
+p + p {
+  margin-top: 14px;
 }
 
 .lead {
-  max-width: 520px;
+  max-width: 560px;
   margin-top: 22px;
-  font-size: 21px;
+  font-size: 22px;
+  line-height: 1.5;
 }
 
-.actions {
+.actions,
+.badges {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
+}
+
+.actions {
   margin-top: 30px;
 }
 
+.badges {
+  margin-top: 18px;
+}
+
+.badges span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  color: #cfe1f4;
+  background: rgba(17, 28, 47, 0.7);
+  font-size: 13px;
+  font-weight: 700;
+}
+
 .button {
   display: inline-flex;
   align-items: center;
@@ -102,19 +132,90 @@ p {
   color: #05201c;
 }
 
-.grid {
+.statement,
+.panel,
+article {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(17, 28, 47, 0.84);
+}
+
+.statement {
+  margin-top: 18px;
+  padding: 28px;
+}
+
+.statement h2 {
+  max-width: 820px;
+  font-size: clamp(30px, 4vw, 46px);
+  line-height: 1.12;
+}
+
+.statement p {
+  max-width: 940px;
+  margin-top: 18px;
+  font-size: 18px;
+}
+
+.grid,
+.split {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
   gap: 16px;
-  margin-top: 30px;
+  margin-top: 16px;
+}
+
+.grid {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.split {
+  grid-template-columns: 1fr 1fr;
 }
 
 article,
-.panel {
+.panel,
+.split > div {
+  padding: 24px;
+}
+
+.split > div {
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: rgba(17, 28, 47, 0.84);
-  padding: 22px;
+  background: rgba(17, 28, 47, 0.72);
+}
+
+.metric-list {
+  display: grid;
+  gap: 12px;
+}
+
+.metric-list div {
+  padding: 16px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(15, 42, 52, 0.68);
+}
+
+.metric-list strong {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--text);
+}
+
+.metric-list span {
+  color: var(--muted);
+  line-height: 1.55;
+}
+
+ul {
+  margin: 14px 0 0;
+  padding-left: 20px;
+  color: var(--muted);
+  line-height: 1.7;
+}
+
+li + li {
+  margin-top: 8px;
 }
 
 .panel {
@@ -125,6 +226,29 @@ article,
   background: rgba(15, 42, 52, 0.78);
 }
 
+.pipeline {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+
+.pipeline div {
+  min-height: 54px;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #0d1729;
+  color: #dce9f7;
+  font-weight: 750;
+}
+
+.schema {
+  display: grid;
+  grid-template-columns: 0.72fr 1.28fr;
+  gap: 20px;
+  align-items: start;
+}
+
 pre {
   overflow: auto;
   margin: 0;
@@ -136,14 +260,17 @@ pre {
   line-height: 1.6;
 }
 
-@media (max-width: 820px) {
+@media (max-width: 900px) {
   main {
     width: min(100% - 28px, 1120px);
     padding: 28px 0;
   }
 
   .hero,
-  .grid {
+  .grid,
+  .split,
+  .schema,
+  .pipeline {
     grid-template-columns: 1fr;
   }