Site: app regions with screenshots, props, downloads, English and Chinese, narrow layout; hit layer follows draw order

site/src/style.css

@@ -3,30 +3,63 @@
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", sans-serif;
   color: #1d1d1f;
   background: #fbfbfa;
+  --quiet: #6e6e73;
+  --accent: #3d7fe5;
 }
 
 body {
   margin: 0;
 }
 
-#app {
-  min-height: 100vh;
-  display: grid;
-  place-content: center;
-  justify-items: center;
-  gap: 6rem;
-  padding: 9rem 1.5rem;
-  box-sizing: border-box;
-}
-
-h1 {
+h1,
+h2 {
   margin: 0;
-  font-size: clamp(3rem, 8vw, 6rem);
   font-weight: 700;
   letter-spacing: -0.03em;
 }
 
+h1 {
+  font-size: clamp(3rem, 9vw, 6.5rem);
+}
+
+h2 {
+  font-size: clamp(2rem, 5vw, 3.5rem);
+}
+
+p {
+  margin: 0;
+  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
+  font-weight: 300;
+  line-height: 1.5;
+  color: var(--quiet);
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+a:focus-visible,
+button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 4px;
+  border-radius: 2px;
+}
+
+.hero {
+  display: grid;
+  justify-items: center;
+  gap: 1.25rem;
+  padding: 10rem 1.5rem 9rem;
+  text-align: center;
+}
+
+.hero .model {
+  margin-top: 6rem;
+}
+
 .stage {
+  display: block;
   max-width: 100%;
   height: auto;
   overflow: visible;
@@ -37,13 +70,143 @@ h1 {
   max-width: 100%;
 }
 
+.region {
+  display: grid;
+  grid-template-columns: 1.6fr 1fr;
+  align-items: center;
+  gap: 6rem;
+  max-width: 72rem;
+  margin: 0 auto;
+  padding: 9rem 1.5rem;
+}
+
+.region > svg {
+  width: 100%;
+}
+
+.region:nth-child(even) {
+  grid-template-columns: 1fr 1.6fr;
+}
+
+.region:nth-child(even) > svg {
+  order: 2;
+}
+
+.region div {
+  display: grid;
+  gap: 1rem;
+  justify-items: start;
+}
+
+.get {
+  font-size: 1.0625rem;
+  opacity: 0;
+  transition: opacity 0.15s ease-out;
+}
+
+.region:hover .get,
+.region:focus-within .get {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .get {
+    opacity: 1;
+  }
+}
+
+.props {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4rem;
+  max-width: 72rem;
+  margin: 0 auto;
+  padding: 9rem 1.5rem;
+}
+
+.prop {
+  display: grid;
+  justify-items: center;
+  gap: 2rem;
+  text-align: center;
+}
+
+footer {
+  display: grid;
+  justify-items: center;
+  gap: 1rem;
+  padding: 9rem 1.5rem 12rem;
+  text-align: center;
+}
+
+footer ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem 2.5rem;
+  margin: 2rem 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 1.0625rem;
+}
+
+.lang {
+  position: fixed;
+  top: 1.5rem;
+  right: 1.5rem;
+  z-index: 1;
+  padding: 0.5rem 0.75rem;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: 0.9375rem;
+  font-weight: 300;
+  color: var(--quiet);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease-out;
+}
+
+.lang:hover,
+.lang:focus-visible,
+body:has(.hero:hover) .lang {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .lang {
+    opacity: 1;
+  }
+}
+
+@media (max-width: 760px) {
+  .region,
+  .props {
+    grid-template-columns: 1fr;
+    gap: 3rem;
+    padding: 6rem 1.5rem;
+  }
+
+  .region:nth-child(even) {
+    grid-template-columns: 1fr;
+  }
+
+  .region:nth-child(even) > svg {
+    order: 0;
+  }
+
+  .hero {
+    padding: 7rem 1.5rem 6rem;
+  }
+}
+
 .caption {
   position: absolute;
   margin: 0;
-  translate: -50% calc(-100% - 0.75rem);
+  translate: -50% -100%;
   font-size: 0.9375rem;
   font-weight: 300;
-  color: #6e6e73;
+  color: var(--quiet);
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
@@ -54,12 +217,6 @@ h1 {
   opacity: 1;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .caption {
-    transition: none;
-  }
-}
-
 /* Keyboard and reader links; focus shows on the model. */
 .doors a {
   position: absolute;
@@ -69,3 +226,11 @@ h1 {
   clip-path: inset(50%);
   white-space: nowrap;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .caption,
+  .get,
+  .lang {
+    transition: none;
+  }
+}