up

web/minecraft/style.css

@@ -29,7 +29,7 @@ a:focus-visible { outline: 3px solid #ffdf61; outline-offset: 5px; }
 .brand { color: #fff0c8; font: 400 9px/1.8 var(--pixel); text-decoration: none; text-shadow: 2px 2px #302214; }
 .brand span { color: #dba16b; padding: 0 6px; }
 .nav-link { font: 400 10px/1.8 var(--pixel); }
-.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 670px; margin: 20px 0 44px; padding: 32px 20px; border: 4px solid #191612; box-shadow: inset 0 0 0 3px #ba8b50, 6px 6px #0005; background: #3b4934 url('/minecraft/workshop.webp') 60% center / cover no-repeat; }
+.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 670px; margin: 20px 0 44px; padding: 32px 20px; border: 4px solid #191612; box-shadow: inset 0 0 0 3px #ba8b50, 6px 6px #0005; background: #3b4934 url('/minecraft/world-waterwheel.webp') 65% center / cover no-repeat; }
 .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #171a16ed, #171a16bb 45%, #171a1633); }
 .hero-copy { width: 100%; max-width: 600px; }
 .eyebrow { color: #f1bf73; font: 400 9px/1.9 var(--pixel); }
@@ -47,17 +47,18 @@ code { font: 600 17px/1.6 monospace; color: #fff3ca; overflow-wrap: anywhere; }
 .button:hover, .nav-link:hover, footer a:hover { background-color: #858b70; color: #ffffbf; box-shadow: inset 3px 3px #d4dab1, inset -3px -3px #535d43, 3px 3px #0005; }
 .button:active, .nav-link:active, footer a:active { box-shadow: inset 3px 3px #414535, inset -2px -2px #a0ab83; transform: translate(2px, 2px); }
 .button[hidden] { display: none; }
-#build-download { display: block; background-color: #526f36; box-shadow: inset 3px 3px #8eac60, inset -3px -3px #2e4924, 3px 3px #0005; }
-#build-download[hidden] { display: none; }
-#build-download:hover { background-color: #657f42; }
-#build-download:active { box-shadow: inset 3px 3px #2e4924, inset -2px -2px #8eac60; }
+.build-download { display: block; background-color: #526f36; box-shadow: inset 3px 3px #8eac60, inset -3px -3px #2e4924, 3px 3px #0005; }
+.build-download[hidden] { display: none; }
+.build-download:hover { background-color: #657f42; }
+.build-download:active { box-shadow: inset 3px 3px #2e4924, inset -2px -2px #8eac60; }
 .telemost { display: block; }
 .hint { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
-#build-status { margin: 12px 0; }
+.build-status { margin: 12px 0; }
 .world { margin-bottom: 34px; }
+.world-intro { max-width: 740px; margin: 0 auto 28px; color: var(--muted); text-align: center; }
 .section-heading { width: fit-content; max-width: 100%; margin: 0 auto 24px; padding: 16px 24px; text-align: center; border: 4px solid #241b13; background: repeating-linear-gradient(0deg, #0000 0 17px, #0002 17px 20px), #63462e; box-shadow: inset 3px 3px #9b7046, inset -3px -3px #39291d, 5px 5px #0004; }
 .section-heading h2 { margin-bottom: 4px; }
-.world-grid { display: grid; gap: 20px; }
+.world-grid { display: grid; align-items: start; gap: 20px; }
 .theme { min-width: 0; padding: 24px; border: 4px solid #33261b; background: #4d493d; box-shadow: inset 3px 3px #a48d67, inset -3px -3px #29271f, 4px 4px #0005; }
 .theme-symbol { display: grid; width: 74px; height: 74px; place-items: center; border: 4px solid #25251f; background: #97917c; box-shadow: inset 3px 3px #5b5c4d, inset -3px -3px #c7bca0; }
 .theme-symbol svg { image-rendering: pixelated; filter: drop-shadow(3px 3px #0005); }
@@ -80,7 +81,9 @@ footer span { color: #c5c1ac; font-family: monospace; }
     main { padding: 24px 32px 32px; }
     .brand { font-size: 12px; }
     .hero { padding: 48px; }
-    .world-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .theme-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; }
+    .theme-featured .scene { margin-bottom: 0; }
     .downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
     .downloads section { padding: 28px; }
 }
@@ -99,7 +102,7 @@ button { cursor: pointer; }
 #motion-toggle { font-size: 8px; padding: 12px; }
 .topbar, .join-panel, .theme, .downloads section { position: relative; border-color: #3e281a; box-shadow: inset 3px 3px #bc8c56, inset -3px -3px #573820, 5px 5px #0007; }
 .topbar::after, .join-panel::after, .theme::after, .downloads section::after { content: ''; position: absolute; inset: 7px; pointer-events: none; background: radial-gradient(circle at 4px 4px, #ffe0a4 0 1px, #a66a3c 2px 3px, #302116 4px, transparent 5px) top left / 10px 10px no-repeat, radial-gradient(circle at 4px 4px, #ffe0a4 0 1px, #a66a3c 2px 3px, #302116 4px, transparent 5px) top right / 10px 10px no-repeat, radial-gradient(circle at 4px 4px, #e5bd79 0 1px, #8a512d 2px 3px, #302116 4px, transparent 5px) bottom left / 10px 10px no-repeat, radial-gradient(circle at 4px 4px, #e5bd79 0 1px, #8a512d 2px 3px, #302116 4px, transparent 5px) bottom right / 10px 10px no-repeat; }
-.hero { background-image: url('/minecraft/steam-workshop.webp'); background-position: center; overflow: hidden; }
+.hero { overflow: hidden; }
 .hero-copy { position: relative; z-index: 2; }
 .join-panel { background: linear-gradient(125deg, #544536f5, #282e28fa); border-width: 6px; }
 .hero-machine { position: absolute; right: 3%; bottom: 24px; width: 350px; height: 300px; pointer-events: none; z-index: 1; background: linear-gradient(0deg, #141815cc, transparent); }
@@ -130,7 +133,7 @@ button { cursor: pointer; }
 .world-grid { gap: 24px; }
 .theme { padding: 18px; background-image: linear-gradient(135deg, #9c69451a, #0002); }
 .scene { position: relative; margin: -2px -2px 22px; border: 3px solid #291e15; box-shadow: 0 0 0 2px #ad794b; overflow: hidden; }
-.scene img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
+.scene img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
 .card-rotor { position: absolute; width: 72px; height: 72px; bottom: 8px; right: 10px; background: #29261caa; border: 3px solid #a77a44; border-radius: 50%; }
 .aviation .card-rotor { animation-duration: 4s; }
 .theme-symbol { width: 52px; height: 52px; border-width: 3px; float: right; margin: 0 0 10px 10px; }