feat: integrate accessible journey world and controls

2026-09-02 05:07:24 +03:00
parent fd8347fbdc
commit 190ac1ce62
10 changed files with 755 additions and 15 deletions
--- a/src/styles/world.css
+++ b/src/styles/world.css
@@ -0,0 +1,158 @@
+.visually-hidden {
+  position: absolute !important;
+  inline-size: 1px !important;
+  block-size: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+}
+
+.journey-world {
+  position: fixed;
+  z-index: 0;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  background: #040713;
+}
+
+.journey-poster,
+.journey-canvas {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.journey-poster {
+  object-fit: cover;
+  background:
+    radial-gradient(circle at 50% 53%, rgb(247 105 115 / 82%) 0 7%, transparent 7.3%),
+    linear-gradient(165deg, transparent 0 60%, rgb(73 198 215 / 34%) 60.2% 60.5%, transparent 60.7%),
+    linear-gradient(195deg, transparent 0 60%, rgb(73 198 215 / 34%) 60.2% 60.5%, transparent 60.7%),
+    linear-gradient(180deg, #050817 0 48%, #24142c 67%, #080c17 100%);
+}
+
+.journey-canvas {
+  max-inline-size: none;
+}
+
+.portfolio-shell {
+  position: relative;
+  z-index: 1;
+}
+
+.site-header {
+  background: rgb(7 13 23 / 96%);
+}
+
+.portfolio-section {
+  background: rgb(16 23 34 / 94%);
+}
+
+.journey-hud {
+  position: fixed;
+  z-index: 4;
+  inset: auto 1rem 1rem auto;
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  gap: 0.25rem 0.9rem;
+  min-inline-size: 12rem;
+  padding: 0.75rem 0.9rem;
+  border: 1px solid rgb(128 217 230 / 38%);
+  background: rgb(4 9 18 / 84%);
+  color: var(--text-muted);
+  font: 600 var(--step--1)/1.2 var(--mono);
+  letter-spacing: 0.06em;
+  pointer-events: none;
+}
+
+.journey-hud__section,
+.journey-hud__arrival {
+  color: var(--cyan);
+}
+
+.journey-hud__arrival {
+  grid-column: 1 / -1;
+}
+
+.drive-controls {
+  position: fixed;
+  z-index: 5;
+  inset: auto auto 1rem 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.55rem;
+  max-inline-size: calc(100vw - 2rem);
+  padding: 0.55rem;
+  border: 1px solid rgb(128 217 230 / 32%);
+  background: rgb(4 9 18 / 88%);
+  font-family: var(--mono);
+  font-size: var(--step--1);
+}
+
+.drive-controls button,
+.drive-controls select {
+  min-block-size: 44px;
+  border: 1px solid var(--line-strong);
+  background: #101925;
+  color: var(--text);
+}
+
+.drive-controls button {
+  padding-inline: 0.8rem;
+}
+
+.drive-controls label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.drive-controls select {
+  padding-inline: 0.45rem;
+}
+
+.drive-controls__status {
+  color: var(--text-muted);
+}
+
+@media (max-width: 767px) {
+  .journey-hud {
+    inset: 0.5rem 0.5rem auto auto;
+    min-inline-size: 0;
+    padding: 0.5rem;
+    font-size: 0.72rem;
+  }
+
+  .journey-hud__quality {
+    display: none;
+  }
+
+  .drive-controls {
+    inset: auto 0.5rem 0.5rem;
+  }
+
+  .drive-controls__status {
+    flex-basis: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .journey-poster {
+    background:
+      radial-gradient(circle at 50% 53%, rgb(247 105 115 / 48%) 0 7%, transparent 7.3%),
+      linear-gradient(180deg, #050817 0 48%, #24142c 67%, #080c17 100%);
+  }
+}
+
+@media print {
+  .journey-world,
+  .journey-hud,
+  .drive-controls,
+  #journey-scene-description {
+    display: none !important;
+  }
+}