+
Вид
diff --git a/script.js b/script.js
index 6caedc7..f777c70 100644
--- a/script.js
+++ b/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.toggle("list-view", nextPreferences.view === "list");
+ services.classList.remove("cards-view", "list-view", "compact-cards-view", "compact-list-view");
+ services.classList.add(`${nextPreferences.view}-view`);
setActiveButton(themeButtons, "theme", nextPreferences.theme);
setActiveButton(viewButtons, "view", nextPreferences.view);
diff --git a/styles.css b/styles.css
index ade49e8..5c3147a 100644
--- a/styles.css
+++ b/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);
- border-radius: 38px;
+ padding: clamp(22px, 4vw, 42px);
+ border-radius: 30px;
position: relative;
overflow: visible;
}
@@ -157,9 +157,9 @@ a {
h1 {
max-width: 760px;
- margin: 14px 0 18px;
- font-size: clamp(2.8rem, 9vw, 6.8rem);
- line-height: 0.88;
+ margin: 10px 0 12px;
+ font-size: clamp(2.35rem, 7vw, 5.4rem);
+ 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);
- line-height: 1.7;
+ font-size: clamp(0.96rem, 1.6vw, 1.1rem);
+ line-height: 1.6;
}
.control-panel {
@@ -180,8 +180,8 @@ h1 {
max-height: calc(100vh - 48px);
overflow: auto;
display: grid;
- gap: 14px;
- padding: 18px;
+ gap: 10px;
+ padding: 14px;
border-radius: 24px;
opacity: 0;
visibility: hidden;
@@ -273,9 +273,9 @@ h1 {
.control-group {
display: flex;
align-items: center;
- gap: 8px;
- min-height: 48px;
- padding: 8px;
+ gap: 6px;
+ min-height: 42px;
+ 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;
- padding: 24px;
- border-radius: 30px;
+ gap: 16px;
+ padding: 18px;
+ border-radius: 24px;
text-decoration: none;
overflow: hidden;
transform-origin: center;
@@ -412,22 +425,22 @@ h1 {
}
.service-card img {
- width: 72px;
- height: 72px;
+ width: 62px;
+ height: 62px;
object-fit: contain;
filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.24));
}
.service-card h2 {
- margin: 7px 0 10px;
- font-size: 1.45rem;
+ margin: 5px 0 8px;
+ 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 {
- min-height: 132px;
+.services.list-view .service-card,
+.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;
- padding: clamp(26px, 5vw, 44px);
+ margin-top: 12px;
+ 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;
- border-radius: 28px;
+ min-height: 240px;
+ 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 {