более компактный режим

index.html

@@ -67,7 +67,7 @@
             </button>
           </div>
 
-          <div class="control-group">
+          <div class="control-group view-group">
             <span>Вид</span>
             <button class="segmented is-active" type="button" data-view="cards">
               Карточки
@@ -75,6 +75,12 @@
             <button class="segmented" type="button" data-view="list">
               Список
             </button>
+            <button class="segmented" type="button" data-view="compact-cards">
+              Компакт карточки
+            </button>
+            <button class="segmented" type="button" data-view="compact-list">
+              Компакт список
+            </button>
           </div>
 
           <div class="control-group accent-group">

script.js

@@ -58,6 +58,7 @@ const defaultPreferences = {
   view: "cards",
   accent: "violet",
 };
+const availableViews = ["cards", "list", "compact-cards", "compact-list"];
 
 const preferences = {
   ...defaultPreferences,
@@ -129,11 +130,15 @@ accentButtons.forEach((button) => {
 });
 
 function applyPreferences(nextPreferences) {
+  if (!availableViews.includes(nextPreferences.view)) {
+    nextPreferences.view = defaultPreferences.view;
+  }
+
   document.documentElement.dataset.theme = nextPreferences.theme;
   document.documentElement.dataset.accent = nextPreferences.accent;
 
-  services.classList.toggle("cards-view", nextPreferences.view === "cards");
+  services.classList.remove("cards-view", "list-view", "compact-cards-view", "compact-list-view");
-  services.classList.toggle("list-view", nextPreferences.view === "list");
+  services.classList.add(`${nextPreferences.view}-view`);
 
   setActiveButton(themeButtons, "theme", nextPreferences.theme);
   setActiveButton(viewButtons, "view", nextPreferences.view);

styles.css

@@ -101,12 +101,12 @@ a {
 .shell {
   width: min(1180px, calc(100% - 32px));
   margin: 0 auto;
-  padding: 48px 0;
+  padding: 32px 0;
 }
 
 .hero {
   display: block;
-  margin-bottom: 28px;
+  margin-bottom: 16px;
 }
 
 .hero-content,
@@ -119,12 +119,12 @@ a {
 }
 
 .hero-content {
-  min-height: 330px;
+  min-height: 280px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding: clamp(28px, 5vw, 56px);
+  padding: clamp(22px, 4vw, 42px);
-  border-radius: 38px;
+  border-radius: 30px;
   position: relative;
   overflow: visible;
 }
@@ -157,9 +157,9 @@ a {
 
 h1 {
   max-width: 760px;
-  margin: 14px 0 18px;
+  margin: 10px 0 12px;
-  font-size: clamp(2.8rem, 9vw, 6.8rem);
+  font-size: clamp(2.35rem, 7vw, 5.4rem);
-  line-height: 0.88;
+  line-height: 0.92;
   letter-spacing: -0.08em;
 }
 
@@ -167,8 +167,8 @@ h1 {
   max-width: 660px;
   margin: 0;
   color: var(--muted);
-  font-size: clamp(1rem, 2vw, 1.22rem);
+  font-size: clamp(0.96rem, 1.6vw, 1.1rem);
-  line-height: 1.7;
+  line-height: 1.6;
 }
 
 .control-panel {
@@ -180,8 +180,8 @@ h1 {
   max-height: calc(100vh - 48px);
   overflow: auto;
   display: grid;
-  gap: 14px;
+  gap: 10px;
-  padding: 18px;
+  padding: 14px;
   border-radius: 24px;
   opacity: 0;
   visibility: hidden;
@@ -273,9 +273,9 @@ h1 {
 .control-group {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
-  min-height: 48px;
+  min-height: 42px;
-  padding: 8px;
+  padding: 6px;
   border: 1px solid var(--border);
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.04);
@@ -289,6 +289,18 @@ h1 {
   font-weight: 700;
 }
 
+.view-group {
+  flex-wrap: wrap;
+}
+
+.view-group span {
+  width: 100%;
+}
+
+.view-group .segmented {
+  flex-basis: calc(50% - 3px);
+}
+
 .segmented,
 .accent-swatch {
   border: 0;
@@ -298,11 +310,12 @@ h1 {
 
 .segmented {
   flex: 1;
-  min-height: 34px;
+  min-height: 32px;
+  min-width: 0;
   border-radius: 12px;
   background: transparent;
   color: var(--muted);
-  font-size: 0.88rem;
+  font-size: 0.8rem;
   font-weight: 800;
 }
 
@@ -352,19 +365,19 @@ h1 {
 .services {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 18px;
+  gap: 12px;
 }
 
 .service-card {
   --tilt-x: 0deg;
   --tilt-y: 0deg;
   position: relative;
-  min-height: 300px;
+  min-height: 260px;
   display: flex;
   flex-direction: column;
-  gap: 22px;
+  gap: 16px;
-  padding: 24px;
+  padding: 18px;
-  border-radius: 30px;
+  border-radius: 24px;
   text-decoration: none;
   overflow: hidden;
   transform-origin: center;
@@ -412,22 +425,22 @@ h1 {
 }
 
 .service-card img {
-  width: 72px;
+  width: 62px;
-  height: 72px;
+  height: 62px;
   object-fit: contain;
   filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.24));
 }
 
 .service-card h2 {
-  margin: 7px 0 10px;
+  margin: 5px 0 8px;
-  font-size: 1.45rem;
+  font-size: 1.32rem;
   letter-spacing: -0.04em;
 }
 
 .service-card p:not(.service-kicker) {
   margin: 0;
   color: var(--muted);
-  line-height: 1.62;
+  line-height: 1.54;
 }
 
 .arrow {
@@ -475,24 +488,70 @@ h1 {
   grid-template-columns: 1fr;
 }
 
-.services.list-view .service-card {
+.services.list-view .service-card,
-  min-height: 132px;
+.services.compact-list-view .service-card {
+  min-height: 108px;
   display: grid;
-  grid-template-columns: 78px minmax(0, 1fr) 52px;
+  grid-template-columns: 62px minmax(0, 1fr) 42px;
   align-items: center;
-  gap: 22px;
+  gap: 14px;
 }
 
-.services.list-view .arrow {
+.services.list-view .arrow,
+.services.compact-list-view .arrow {
   position: static;
   justify-self: end;
 }
 
+.services.compact-cards-view {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.services.compact-list-view {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.services.compact-cards-view .service-card {
+  min-height: 150px;
+  gap: 10px;
+  padding: 14px;
+}
+
+.services.compact-cards-view .service-card img,
+.services.compact-list-view .service-card img {
+  width: 42px;
+  height: 42px;
+}
+
+.services.compact-cards-view .service-card p:not(.service-kicker),
+.services.compact-list-view .service-card p:not(.service-kicker) {
+  display: none;
+}
+
+.services.compact-cards-view .service-card h2,
+.services.compact-list-view .service-card h2 {
+  margin: 3px 0 0;
+  font-size: 1rem;
+}
+
+.services.compact-cards-view .arrow {
+  width: 30px;
+  height: 30px;
+  right: 12px;
+  bottom: 12px;
+}
+
+.services.compact-list-view .service-card {
+  min-height: 76px;
+  padding: 12px 14px;
+  grid-template-columns: 42px minmax(0, 1fr) 32px;
+}
+
 .about-panel {
-  margin-top: 18px;
+  margin-top: 12px;
-  padding: clamp(26px, 5vw, 44px);
+  padding: clamp(20px, 4vw, 34px);
   border: 1px solid var(--border);
-  border-radius: 32px;
+  border-radius: 26px;
   background: var(--panel);
   box-shadow: var(--shadow);
   backdrop-filter: blur(22px);
@@ -517,21 +576,30 @@ h1 {
   .services {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .services.compact-cards-view {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 }
 
 @media (max-width: 680px) {
   .shell {
     width: min(100% - 22px, 1180px);
-    padding: 22px 0;
+    padding: 16px 0;
   }
 
-  .services {
+  .services,
+  .services.compact-list-view {
     grid-template-columns: 1fr;
   }
 
+  .services.compact-cards-view {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .hero-content {
-    min-height: 300px;
+    min-height: 240px;
-    border-radius: 28px;
+    border-radius: 24px;
   }
 
   .control-panel {
@@ -546,6 +614,10 @@ h1 {
     flex-wrap: wrap;
   }
 
+  .control-group .segmented {
+    flex-basis: calc(50% - 3px);
+  }
+
   .control-group span {
     width: 100%;
     min-width: 0;
@@ -557,15 +629,21 @@ h1 {
 
   .services.list-view .service-card {
     grid-template-columns: 58px minmax(0, 1fr);
-    min-height: 150px;
+    min-height: 126px;
   }
 
-  .services.list-view .arrow {
+  .services.compact-list-view .service-card {
+    grid-template-columns: 42px minmax(0, 1fr);
+    min-height: 78px;
+  }
+
+  .services.list-view .arrow,
+  .services.compact-list-view .arrow {
     position: absolute;
   }
 
   .service-card {
-    min-height: 250px;
+    min-height: 220px;
   }
 
   .service-card img {