Вынесение настроек в отдельное окно

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

index.html

@@ -23,6 +23,15 @@
     <main class="shell">
       <section class="hero" aria-labelledby="page-title">
         <div class="hero-content">
+          <button
+            class="settings-button"
+            type="button"
+            aria-label="Открыть настройки внешнего вида"
+            aria-expanded="false"
+            data-settings-toggle
+          >
+            ⚙
+          </button>
           <p class="eyebrow">Personal ecosystem</p>
           <h1 id="page-title">Bratskih Tech Hub</h1>
           <p class="lead">
@@ -31,7 +40,23 @@
           </p>
         </div>
 
-        <div class="control-panel" aria-label="Настройки внешнего вида">
+        <div class="settings-overlay" data-settings-overlay></div>
+        <div class="control-panel" aria-label="Настройки внешнего вида" data-settings-panel>
+          <div class="settings-panel-head">
+            <div>
+              <p class="eyebrow">View settings</p>
+              <h2>Настройки</h2>
+            </div>
+            <button
+              class="settings-close"
+              type="button"
+              aria-label="Закрыть настройки"
+              data-settings-close
+            >
+              ×
+            </button>
+          </div>
+
           <div class="control-group">
             <span>Тема</span>
             <button class="segmented is-active" type="button" data-theme="dark">

script.js

@@ -65,6 +65,10 @@ const preferences = {
 };
 
 const services = document.querySelector("[data-cards-root]");
+const settingsToggle = document.querySelector("[data-settings-toggle]");
+const settingsPanel = document.querySelector("[data-settings-panel]");
+const settingsOverlay = document.querySelector("[data-settings-overlay]");
+const settingsClose = document.querySelector("[data-settings-close]");
 const themeButtons = document.querySelectorAll("[data-theme]");
 const viewButtons = document.querySelectorAll("[data-view]");
 const accentButtons = document.querySelectorAll("[data-accent]");
@@ -73,6 +77,33 @@ renderCards(serviceCards);
 applyPreferences(preferences);
 attachCardInteractions();
 
+settingsToggle.addEventListener("click", () => {
+  const isOpen = settingsPanel.classList.toggle("is-open");
+  settingsOverlay.classList.toggle("is-open", isOpen);
+  settingsToggle.setAttribute("aria-expanded", String(isOpen));
+});
+
+settingsClose.addEventListener("click", closeSettingsPanel);
+settingsOverlay.addEventListener("click", closeSettingsPanel);
+
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape") {
+    closeSettingsPanel();
+  }
+});
+
+document.addEventListener("click", (event) => {
+  if (!settingsPanel.classList.contains("is-open")) {
+    return;
+  }
+
+  if (settingsPanel.contains(event.target) || settingsToggle.contains(event.target)) {
+    return;
+  }
+
+  closeSettingsPanel();
+});
+
 themeButtons.forEach((button) => {
   button.addEventListener("click", () => {
     preferences.theme = button.dataset.theme;
@@ -129,6 +160,12 @@ function savePreferences(nextPreferences) {
   localStorage.setItem(STORAGE_KEY, JSON.stringify(nextPreferences));
 }
 
+function closeSettingsPanel() {
+  settingsPanel.classList.remove("is-open");
+  settingsOverlay.classList.remove("is-open");
+  settingsToggle.setAttribute("aria-expanded", "false");
+}
+
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }

styles.css

@@ -105,10 +105,7 @@ a {
 }
 
 .hero {
-  display: grid;
+  display: block;
-  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
-  gap: 28px;
-  align-items: end;
   margin-bottom: 28px;
 }
 
@@ -129,13 +126,14 @@ a {
   padding: clamp(28px, 5vw, 56px);
   border-radius: 38px;
   position: relative;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .hero-content::before {
   content: "";
   position: absolute;
   inset: 0;
+  border-radius: inherit;
   background:
     linear-gradient(120deg, rgba(var(--accent-rgb), 0.28), transparent 34%),
     url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-opacity='.09'%3E%3Cpath d='M0 70h140M70 0v140'/%3E%3Ccircle cx='70' cy='70' r='38'/%3E%3C/g%3E%3C/svg%3E");
@@ -174,10 +172,102 @@ h1 {
 }
 
 .control-panel {
+  position: fixed;
+  z-index: 1001;
+  top: 24px;
+  right: 24px;
+  width: min(430px, calc(100% - 48px));
+  max-height: calc(100vh - 48px);
+  overflow: auto;
   display: grid;
   gap: 14px;
   padding: 18px;
-  border-radius: 28px;
+  border-radius: 24px;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-8px) scale(0.98);
+  transform-origin: top right;
+  transition:
+    opacity 180ms ease,
+    visibility 180ms ease,
+    transform 180ms ease;
+}
+
+.control-panel.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+}
+
+.settings-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(2, 6, 23, 0.42);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  backdrop-filter: blur(4px);
+  transition: opacity 180ms ease, visibility 180ms ease;
+}
+
+.settings-overlay.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.settings-button,
+.settings-close {
+  border: 1px solid var(--border);
+  cursor: pointer;
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.06);
+  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
+}
+
+.settings-button {
+  position: absolute;
+  z-index: 2;
+  top: 20px;
+  right: 20px;
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  font-size: 1.16rem;
+}
+
+.settings-button:hover,
+.settings-close:hover {
+  transform: translateY(-1px);
+  border-color: rgba(var(--accent-rgb), 0.5);
+  background: rgba(var(--accent-rgb), 0.12);
+}
+
+.settings-panel-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+  align-items: flex-start;
+}
+
+.settings-panel-head h2 {
+  margin: 4px 0 0;
+  font-size: 1.35rem;
+  letter-spacing: -0.04em;
+}
+
+.settings-close {
+  width: 34px;
+  height: 34px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  font-size: 1.25rem;
+  line-height: 1;
 }
 
 .control-group {
@@ -424,14 +514,9 @@ h1 {
 }
 
 @media (max-width: 1040px) {
-  .hero,
   .services {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-
-  .hero-content {
-    grid-column: 1 / -1;
-  }
 }
 
 @media (max-width: 680px) {
@@ -440,7 +525,6 @@ h1 {
     padding: 22px 0;
   }
 
-  .hero,
   .services {
     grid-template-columns: 1fr;
   }
@@ -451,6 +535,10 @@ h1 {
   }
 
   .control-panel {
+    top: 12px;
+    right: 12px;
+    width: calc(100vw - 24px);
+    max-height: calc(100vh - 24px);
     border-radius: 24px;
   }