/* ========================================================================== Золотая нить — дизайн-система на основе брендбука ========================================================================== */ /* Шрифты подключены напрямую в каждой страницы через , а не через @import: так браузер начинает их загрузку параллельно с этим файлом, а не после него — на мобильных сетях это заметно сокращает время до готовности шрифта и снижает риск «прыжка» текста при подгрузке Caveat/Playfair Display (font-display: optional). */ :root { color-scheme: light; /* Явно объявляем светлую тему, чтобы Android Chrome не применял принудительное автозатемнение (force dark) к странице — из-за него некоторые цвета (например, изумрудный текст) могли подменяться на произвольные, включая синий. */ /* Цветовая палитра (брендбук, раздел 5.1) */ --color-linen: #F2EFE9; /* Небеленый лен — базовый фон */ --color-graphite: #2C2C2C; /* Темный графит — текст и контраст */ --color-emerald: #1B4D3E; /* Изумрудный лес — акцент, кнопки */ --color-gold: #D4AF37; /* Теплое золото — акцент, кнопки */ --color-terracotta: #C05640; /* Терракота — доп. акцент */ --color-blush: #E8B4B8; /* Светло-розовый — акцент упаковки */ --color-emerald-dark: #123529; --color-gold-dark: #b8942c; --color-surface: #ffffff; --color-border: rgba(44, 44, 44, 0.12); /* Типографика */ --font-heading: 'Merriweather', 'Times New Roman', serif; --font-body: 'Open Sans', -apple-system, sans-serif; --font-accent: 'Caveat', cursive; /* Caveat не поддерживает татарские буквы (Ә Ө Җ Ң Һ) — весь текст откатывается на системный шрифт. Для татарских фраз нужен шрифт с полной поддержкой кириллицы. */ --font-tatar: 'Playfair Display', serif; /* Прочее */ --radius-md: 14px; --radius-lg: 24px; --shadow-soft: 0 12px 32px rgba(44, 44, 44, 0.08); --shadow-lift: 0 20px 48px rgba(27, 77, 62, 0.16); --container-width: 1180px; --header-height: 96px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); background: var(--color-linen); color: var(--color-graphite); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; margin: 0 0 0.6em; color: var(--color-emerald); } h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); } p { margin: 0 0 1em; } .accent-script { font-family: var(--font-accent); color: var(--color-terracotta); font-size: 1.4em; font-weight: 600; } .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 24px; } .section { padding: 88px 0; } .section--tight { padding: 56px 0; } .section--alt { background: var(--color-surface); } .eyebrow { display: inline-block; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; color: var(--color-terracotta); margin-bottom: 0.8em; } /* Фоновые паттерны брендбука (5-10% непрозрачности) */ .pattern-bg { position: relative; isolation: isolate; } .pattern-bg::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--pattern-image, url('/assets/patterns/wave.svg')); background-repeat: repeat; background-size: 140px 70px; color: var(--color-emerald); opacity: 0.07; } /* ---------------- Кнопки ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; padding: 15px 30px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease; text-align: center; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--color-emerald); color: var(--color-linen); box-shadow: var(--shadow-lift); } .btn--primary:hover { background: var(--color-emerald-dark); } .btn--gold { background: var(--color-gold); color: var(--color-graphite); } .btn--gold:hover { background: var(--color-gold-dark); } .btn--outline { background: transparent; border-color: var(--color-emerald); color: var(--color-emerald); } .btn--outline:hover { background: var(--color-emerald); color: var(--color-linen); } .btn--block { width: 100%; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ---------------- Шапка ---------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-linen); border-bottom: 1px solid var(--color-border); } .site-header__inner { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; } .brand img { height: 58px; width: auto; } .main-nav { display: flex; align-items: center; gap: 6px; } .main-nav a { font-weight: 600; font-size: 0.95rem; padding: 10px 16px; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; } .main-nav a:hover, .main-nav a[aria-current="page"] { background: var(--color-emerald); color: var(--color-linen); } .nav-toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; background: none; border: 2px solid var(--color-emerald); border-radius: 12px; padding: 0; cursor: pointer; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ''; display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--color-emerald); position: relative; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; } /* ---------------- Футер ---------------- */ .site-footer { background: var(--color-graphite); color: var(--color-linen); padding: 56px 0 28px; } .site-footer a:hover { color: var(--color-gold); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 40px; } .footer-grid h4 { color: var(--color-linen); font-size: 1rem; margin-bottom: 1em; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: 10px; opacity: 0.85; } .footer-bottom { border-top: 1px solid rgba(242,239,233,0.15); padding-top: 24px; font-size: 0.85rem; opacity: 0.7; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } /* Плашка о поддержке Фонда содействия инновациям */ .footer-support { display: flex; align-items: center; gap: 24px; padding: 20px 24px; margin-bottom: 32px; background: rgba(242, 239, 233, 0.05); border: 1px solid rgba(242, 239, 233, 0.15); border-radius: var(--radius-md); } .footer-support__logo { flex: none; width: 140px; } .footer-support__logo img { width: 100%; height: auto; display: block; } .footer-support__text { margin: 0; font-size: 0.8rem; line-height: 1.55; color: rgba(242, 239, 233, 0.75); } @media (max-width: 600px) { .footer-support { flex-direction: column; align-items: flex-start; } .footer-support__logo { width: 120px; } } /* ---------------- Карточки ---------------- */ .card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 28px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .grid { display: grid; gap: 28px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } /* ---------------- Hero ---------------- */ .hero { padding: 72px 0 96px; position: relative; overflow: hidden; } .hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; } .hero__art { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); aspect-ratio: 4/5; background: linear-gradient(160deg, var(--color-emerald), var(--color-emerald-dark)); display: flex; align-items: center; justify-content: center; } .hero__art img { width: 55%; } /* ---------------- Значения / values ---------------- */ .value-item { display: flex; gap: 18px; align-items: flex-start; } .value-item__icon { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--color-gold); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } /* ========================================================================== Конфигуратор ========================================================================== */ .configurator { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); overflow: hidden; } /* Прогресс шагов — «золотая нить», связывающая шаги конфигуратора */ .thread-progress { padding: 26px 40px 20px; border-bottom: 1px solid var(--color-border); } .thread-progress__mobile-label { display: none; font-size: 0.85rem; font-weight: 700; color: var(--color-emerald); margin-bottom: 14px; } .thread-progress__line { position: relative; height: 16px; margin-bottom: 8px; } .thread-progress__base, .thread-progress__fill { position: absolute; top: 50%; height: 2px; transform: translateY(-50%); border-radius: 999px; } .thread-progress__base { background: var(--color-border); } .thread-progress__fill { background: var(--color-gold); transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1); } .thread-dot { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border); transform: translate(-50%, -50%); transition: background 0.2s ease, border-color 0.2s ease, width 0.2s ease, height 0.2s ease; } .thread-dot.is-done, .thread-dot.is-active { background: var(--color-gold); border-color: var(--color-gold); } .thread-dot.is-active { width: 15px; height: 15px; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.22); } .thread-progress__labels { position: relative; height: 18px; } .thread-label { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(44, 44, 44, 0.4); white-space: nowrap; } .thread-label.is-active { color: var(--color-emerald); } .thread-label.is-done { color: rgba(27, 77, 62, 0.6); } @media (max-width: 700px) { .thread-progress { padding: 20px 20px 16px; } .thread-progress__mobile-label { display: block; } .thread-progress__labels { display: none; } } .configurator__body { padding: 40px; min-height: 420px; } @keyframes stepEnterForward { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } } @keyframes stepEnterBackward { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } } .configurator__body.is-anim-forward { animation: stepEnterForward 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } .configurator__body.is-anim-backward { animation: stepEnterBackward 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .configurator__body.is-anim-forward, .configurator__body.is-anim-backward { animation: none; } } .configurator__footer { display: flex; justify-content: space-between; align-items: center; padding: 24px 40px; border-top: 1px solid var(--color-border); background: var(--color-linen); } .step-title { margin-bottom: 6px; } .step-hint { color: rgba(44,44,44,0.65); margin-bottom: 28px; } .choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .choice-card { position: relative; border: 2px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; cursor: pointer; background: var(--color-linen); transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; text-align: left; } .choice-card:hover { transform: translateY(-2px); border-color: var(--color-gold); } .choice-card.is-selected { border-color: var(--color-emerald); background: rgba(27, 77, 62, 0.06); } .choice-card__check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-border); background: var(--color-surface); display: flex; align-items: center; justify-content: center; } .choice-card__check svg { width: 11px; height: 11px; } .choice-card.is-selected .choice-card__check { background: var(--color-emerald); border-color: var(--color-emerald); } .choice-card__icon { display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } .choice-card__icon svg { width: 100%; height: 100%; } .choice-card--big { text-align: center; padding: 24px 18px; } .choice-card--big .choice-card__title { font-size: 1.05rem; } .choice-card--small { text-align: center; } .choice-card--small .choice-card__title { font-size: 0.85rem; font-weight: 700; } .choice-card--row { display: flex; gap: 14px; align-items: flex-start; } .choice-card--row .choice-card__icon { margin: 0; flex: none; } .choice-card__title { font-weight: 700; margin-bottom: 4px; } .choice-card__desc { font-size: 0.88rem; color: rgba(44,44,44,0.65); } /* Категории фраз — вкладки */ .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .tab-btn { padding: 10px 18px; border-radius: 999px; border: 2px solid var(--color-border); background: var(--color-surface); font-weight: 700; font-size: 0.85rem; cursor: pointer; } .tab-btn.is-active { background: var(--color-emerald); border-color: var(--color-emerald); color: var(--color-linen); } .phrase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .phrase-card { border: 2px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; cursor: pointer; background: var(--color-surface); } .phrase-card.is-selected { border-color: var(--color-gold); background: rgba(212,175,55,0.1); } .phrase-card__tt { font-family: var(--font-tatar); font-style: italic; font-weight: 700; font-size: 1.5rem; color: var(--color-emerald); display: block; } .phrase-card__ru { font-size: 0.85rem; color: rgba(44,44,44,0.6); } /* Тюльпан «Ляля» — витрина сюжета */ .tulip-showcase { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 32px 20px; background: var(--color-linen); border-radius: var(--radius-lg); } .tulip-showcase__art { width: 200px; max-width: 60%; } .tulip-showcase__art img { width: 100%; height: auto; } .tulip-showcase__caption { max-width: 480px; font-family: var(--font-accent); font-size: 1.3rem; color: var(--color-emerald); margin: 0; line-height: 1.4; } /* Цвета пряжи */ .yarn-grid { display: flex; flex-wrap: wrap; gap: 22px; } .yarn-drop { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; width: 96px; background: none; border: none; padding: 0; font-family: inherit; } .yarn-drop__circle { display: block; width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px; border: 2px solid rgba(44, 44, 44, 0.18); box-shadow: inset 0 -6px 10px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.12); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .yarn-drop.is-selected .yarn-drop__circle { border-color: var(--color-emerald); box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-emerald), inset 0 -6px 10px rgba(0,0,0,0.15); transform: scale(1.08); } .yarn-drop__label { font-size: 0.78rem; font-weight: 600; line-height: 1.3; white-space: nowrap; } .yarn-limit-note { margin-top: 18px; font-size: 0.85rem; color: rgba(44,44,44,0.6); } /* Цвет шнура (упаковка) — компактнее цветов пряжи, но та же механика */ .cord-grid { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; } .cord-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer; width: 84px; background: none; border: none; padding: 0; font-family: inherit; } .cord-drop__circle { display: block; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(44, 44, 44, 0.18); box-shadow: inset 0 -4px 8px rgba(0,0,0,0.15), 0 3px 8px rgba(0,0,0,0.1); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .cord-drop.is-selected .cord-drop__circle { border-color: var(--color-emerald); box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-emerald), inset 0 -4px 8px rgba(0,0,0,0.15); transform: scale(1.08); } .cord-drop__label { font-size: 0.76rem; font-weight: 600; line-height: 1.3; white-space: nowrap; } /* Сводка / заявка */ .summary-box { background: var(--color-linen); border-radius: var(--radius-md); padding: 24px 28px; margin-bottom: 28px; } .summary-box dl { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; margin: 0; } .summary-box dt { font-weight: 700; color: var(--color-emerald); } .summary-box dd { margin: 0; } .form-grid { display: grid; gap: 18px; max-width: 520px; } .form-field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 0.9rem; } .form-field input, .form-field textarea { width: 100%; padding: 13px 16px; border-radius: 10px; border: 2px solid var(--color-border); font-family: var(--font-body); font-size: 1rem; background: var(--color-surface); } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--color-emerald); } .checkbox-field { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; } .checkbox-field input { width: auto; margin-top: 3px; } .checkbox-field a { color: var(--color-emerald); text-decoration: underline; } .checkbox-field a:hover { color: var(--color-emerald-dark); } .field-error { color: var(--color-terracotta); font-size: 0.82rem; min-height: 1.1em; margin-top: 6px; } .thanks-screen { text-align: center; padding: 40px 0; } .thanks-screen__icon { font-size: 3rem; margin-bottom: 16px; } /* ---------------- Утилиты ---------------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .muted { color: rgba(44,44,44,0.65); } .tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(27,77,62,0.08); color: var(--color-emerald); font-size: 0.78rem; font-weight: 700; } /* ---------------- Страница «О нас»: история бренда ---------------- */ .story { max-width: 720px; margin: 0 auto; } .story h2 { margin-top: 0; } .story p { font-size: 1.05rem; line-height: 1.75; } .story-section + .story-section { margin-top: 56px; } .story-section__kicker { font-family: var(--font-accent); color: var(--color-terracotta); font-size: 1.5rem; display: block; margin-bottom: 4px; } .story-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); position: relative; display: flex; align-items: flex-end; margin: 32px 0; } .story-photo--vintage { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06), transparent 60%), linear-gradient(150deg, #3a362f, #17140f); } .story-photo--bright { background: linear-gradient(150deg, #ffffff, var(--color-linen)); border: 1px solid var(--color-border); } .story-photo__caption { width: 100%; padding: 16px 20px; font-size: 0.82rem; color: rgba(251, 249, 245, 0.85); background: linear-gradient(0deg, rgba(0,0,0,0.5), transparent); } .story-photo--bright .story-photo__caption { color: var(--color-emerald); background: linear-gradient(0deg, rgba(27,77,62,0.08), transparent); } .story-quote { padding: 88px 24px; text-align: center; } .story-quote blockquote { margin: 0 auto; max-width: 760px; font-family: var(--font-accent); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.35; color: var(--color-emerald); } .story-closing { text-align: center; padding: 24px 0 8px; } .story-closing p { font-family: var(--font-accent); font-size: 1.5rem; color: var(--color-terracotta); max-width: 560px; margin: 0 auto; } /* Быстрая навигация по странице «О нас» — золотая нить, растущая по мере чтения. На мобильных/планшетах превращается в горизontальную липкую полосу с пилюлями (тот же язык, что и вкладки категорий фраз в конструкторе). */ .story-nav { display: block; position: sticky; top: var(--header-height); z-index: 90; background: var(--color-linen); border-bottom: 1px solid var(--color-border); } #story-childhood, #story-city, #story-birth, #story-idea, #story-logo, #story-values { scroll-margin-top: calc(var(--header-height) + 24px); } .story-nav__track, .story-nav__fill { display: none; } .story-nav__list { position: relative; list-style: none; margin: 0; padding: 12px 20px; display: flex; flex-direction: row; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .story-nav__list::-webkit-scrollbar { display: none; } .story-nav__link { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--color-border); background: var(--color-surface); transition: background 0.2s ease, border-color 0.2s ease; } .story-nav__dot { display: none; } .story-nav__label { font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; color: var(--color-graphite); white-space: nowrap; max-width: none; overflow: visible; opacity: 1; transition: color 0.2s ease; } .story-nav__link.is-active { background: var(--color-emerald); border-color: var(--color-emerald); } .story-nav__link.is-active .story-nav__label { color: var(--color-linen); } @media (min-width: 1300px) { .story-nav { position: fixed; left: 28px; top: 50%; transform: translateY(-50%); background: none; border-bottom: none; } .story-nav__track { display: block; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); border-radius: 999px; } .story-nav__fill { display: block; position: absolute; left: 0; top: 0; width: 2px; height: 0%; background: var(--color-gold); border-radius: 999px; transition: height 0.3s cubic-bezier(0.65, 0, 0.35, 1); } .story-nav__list { flex-direction: column; gap: 22px; padding: 0; overflow: visible; } .story-nav__link { padding: 0; border: none; background: none; border-radius: 0; } .story-nav__link.is-active { background: none; } .story-nav__dot { display: block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .story-nav__label { font-family: var(--font-heading); font-size: 1.05rem; color: var(--color-emerald); max-width: 0; overflow: hidden; opacity: 0; transition: max-width 0.3s ease, opacity 0.2s ease; } .story-nav__link:hover .story-nav__label, .story-nav__link.is-active .story-nav__label { max-width: 240px; opacity: 1; color: var(--color-emerald); } .story-nav__link:hover .story-nav__dot { border-color: var(--color-gold); } .story-nav__link.is-active .story-nav__dot { background: var(--color-gold); border-color: var(--color-gold); transform: scale(1.25); box-shadow: 0 0 0 4px rgba(212,175,55,0.22); } } @media (prefers-reduced-motion: reduce) { .story-nav__fill, .story-nav__dot, .story-nav__label, .story-nav__link { transition: none; } } @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } .main-nav { position: fixed; inset: var(--header-height) 0 0 auto; width: min(320px, 80vw); background: var(--color-linen); flex-direction: column; align-items: stretch; padding: 20px; box-shadow: -12px 0 32px rgba(0,0,0,0.12); transform: translateX(100%); transition: transform 0.25s ease; } .main-nav.is-open { transform: translateX(0); } .main-nav a { text-align: center; } .nav-toggle { display: inline-flex; flex-direction: column; gap: 0; } .configurator__body { padding: 26px 20px; } .configurator__footer { padding: 18px 20px; } } @media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .summary-box dl { grid-template-columns: 1fr; } }