/* ============================================================ ПОСЛЕ ПЯТИ — магазин свечей. Палитра снята с фирменного знака: глубокая тёплая олива, кремовая антиква, огонёк. Название про вечер, поэтому шапка и первые экраны тёмные, а дальше страница светлеет. Про два золота: светлое --gold идёт на тёмном (4.7:1) и в заливки, для акцентного текста на светлом есть затемнённое --gold-ink (5.7:1). Все пары проверены расчётом, ни одной ниже нормы. ============================================================ */ :root { /* тёмная сторона — с логотипа */ --olive: #3D4032; /* основной тёмный фон — цвет знака */ --olive-deep: #2B2E23; /* подвал и самые тёмные полосы */ --olive-soft: #4E5241; /* подложки и заглушки фото на тёмном */ /* светлая сторона */ --cream: #EFE8DA; /* основной светлый фон */ --sand: #E4DCCB; /* фон секций */ --clay: #CFC6B2; /* разделители, обводки, заглушки фото */ /* акцент — цвет огня */ --gold: #C9A96B; /* заливки, линии, текст на тёмном */ --gold-ink: #6E5720; /* акцентный текст на светлом */ --ink: #262820; /* основной текст на светлом */ --muted: #5B5A4C; /* приглушённый текст на светлом */ --on-dark: #EFE8DA; --on-dark-mute: #BFBAA8; --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'Manrope', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* Только для росчерка «П» в знаке. Единственная гарнитура с кириллицей, у которой заглавная «П» идёт с каллиграфическим завитком на левой ноге и контрастом штриха — как на фирменной карточке. Курсив антиквы такой формы не даёт: получается тяжёлая плита. */ --script: 'Marck Script', 'Segoe Script', cursive; --wrap: 1680px; --pad: clamp(20px, 5vw, 44px); --sec: clamp(52px, 6vw, 92px); --gap: clamp(18px, 2vw, 30px); --ease: cubic-bezier(.22, .61, .36, 1); } *, *::before, *::after { box-sizing: border-box; } /* Горизонтальную прокрутку режем на корне тоже: одного `overflow-x` на body мало — если прокрутку забирает , полоса всё равно появится, когда элемент во время входа заезжает за правый край. */ html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } figure { margin: 0; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--olive-deep); letter-spacing: -0.015em; margin: 0; /* Заголовок не должен заканчиваться одиноким словом на последней строке. Браузеры без поддержки просто игнорируют — ломаться нечему. */ text-wrap: balance; } h1 { font-size: clamp(40px, 6.6vw, 86px); line-height: 1.02; } h2 { font-size: clamp(32px, 4.8vw, 60px); line-height: 1.08; } h3 { font-size: 22px; line-height: 1.28; } /* Абзацы: последняя строка не остаётся из одного слова. */ p { text-wrap: pretty; } /* Длинные слова («самоконтрящаяся», «персонализированные») на узком экране вылезали за край карточки — переносим по слогам. */ body { hyphens: auto; overflow-wrap: break-word; } h1, h2, h3, .btn, .eyebrow, .shead__n { hyphens: none; } /* Цифры одинаковой ширины: в списках этапов «01…06» не пляшут. */ .shead__n, .strip__n, .steps span { font-variant-numeric: tabular-nums; } /* Выделение текста — в цвет бренда, а не системным синим. */ ::selection { background: var(--gold); color: #FFFFFF; } /* Курсив в заголовках — фирменная деталь референсов: одно-два слова уходят в italic и держат ритм фразы. */ h1 em, h2 em { font-style: italic; color: var(--gold-ink); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } /* Единая вертикальная сетка: один шаг между блоками внутри секции. До этого отступы задавались поштучно и между страницами разъезжались. */ :root { --gap: clamp(18px, 2vw, 30px); } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); } .skip { position: absolute; left: -9999px; background: var(--olive-deep); color: #FFFFFF; padding: 12px 20px; z-index: 100; } .skip:focus { left: 12px; top: 12px; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .eyebrow { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 20px; font-weight: 500; } .lead, .sec__lead { font-size: clamp(17px, 1.5vw, 19.5px); max-width: 56ch; } .note { font-size: 14px; color: var(--muted); border-left: 2px solid var(--clay); padding-left: 14px; margin-top: 26px; } /* ============================================================ анимации */ /* Появления блоков при прокрутке нет — владельцу не понравилось (01.08.2026). Бегущая строка ароматов убрана там же. Осталось движение, которым управляет сам пользователь: наведение и первый экран при загрузке. */ /* ---- разовый вход при загрузке ---- Отыгрывается ОДИН раз, при открытии страницы. Ничего не привязано к прокрутке: то, что ниже сгиба, к моменту пролистывания уже стоит на месте. Владелец просил именно так. */ .enter-r { animation: enter-r 1.05s var(--ease) both; animation-delay: var(--d, 0s); } @keyframes enter-r { from { opacity: 0; transform: translateX(var(--shift, 56px)); } to { opacity: 1; transform: none; } } /* На узком экране сдвиг меньше: 56px от 375px — это седьмая часть ширины, элемент заезжал далеко за край. */ @media (max-width: 780px) { .enter-r, .hero__fig { --shift: 26px; } } /* ---- «дыхание» ---- Медленное, почти незаметное движение, чтобы страница не выглядела мёртвой картинкой. Амплитуды нарочно крошечные: заметишь, только если смотреть в упор. */ @keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes drift { 0%, 100% { opacity: .55; transform: translate(0, 0) scale(1); } 50% { opacity: .85; transform: translate(-18px, 10px) scale(1.06); } } /* Въезд строк первого экрана — сразу при загрузке, без наблюдателя. */ .line { display: block; overflow: hidden; } .rise { display: inline-block; animation: rise .9s var(--ease) both; animation-delay: var(--d, 0s); } @keyframes rise { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } } .hero .lead.rise, .hero__act.rise, .hero .eyebrow.rise { animation-name: fade-rise; } @keyframes fade-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ============================================================ зерно Тончайшая плёнка шума поверх всей страницы. Ровные заливки на больших экранах выглядят стерильно и «цифрово»; зерно добавляет ощущение бумаги и вытягивает тёплые оттенки палитры. Сделано одним SVG-фильтром прямо в CSS: ни одного запроса к сети, ~300 байт. Слой не ловит мышь и лежит под модальными элементами. */ body::after { content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ кнопки */ /* Заливка приходит снизу вверх, а не резкой сменой цвета. */ .btn { position: relative; overflow: hidden; display: inline-block; color: #FFFFFF; background: var(--olive-deep); font: 500 12.5px/1 var(--sans); letter-spacing: .11em; text-transform: uppercase; padding: 18px 32px; border: 1px solid var(--olive-deep); text-decoration: none; transition: color .35s var(--ease); z-index: 0; } .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--cream); transform: translateY(101%); transition: transform .45s var(--ease); } .btn:hover { color: var(--olive-deep); } .btn:hover::before { transform: none; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--ghost::before { background: var(--olive-deep); } .btn--ghost:hover { color: #FFFFFF; border-color: var(--olive-deep); } .btn--sm { padding: 13px 24px; font-size: 11.5px; } /* ============================================================ огонёк-логотип */ .flame { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--gold); display: grid; place-items: center; position: relative; } .flame i { width: 5px; height: 8px; border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; background: #F7E8C4; display: block; transform-origin: 50% 90%; animation: flicker 3.4s ease-in-out infinite; } .flame::after { /* мягкое свечение вокруг огонька */ content: ''; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(247,232,196,.55) 0, transparent 62%); animation: pulse 3.4s ease-in-out infinite; } .flame--l { width: 36px; height: 36px; } .flame--l i { width: 7px; height: 11px; } @keyframes flicker { 0%, 100% { transform: scaleY(1) translateX(0); } 28% { transform: scaleY(1.16) translateX(.4px); } 55% { transform: scaleY(.92) translateX(-.4px); } 78% { transform: scaleY(1.08) translateX(.2px); } } @keyframes pulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.12); } } /* ============================================================ заглушки фото */ .ph { position: relative; height: 100%; background: radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,.5) 0, transparent 58%), repeating-linear-gradient(45deg, rgba(38,40,32,.02) 0 14px, transparent 14px 28px), var(--clay); display: grid; place-items: center; } /* Пропорция кадров. Была 3/4 — вертикальные фото сильно удлиняли страницу, 4/5 держит ту же «портретность», но короче. */ .ph--tall { aspect-ratio: 4/5; } /* Настоящий снимок вместо заглушки: заполняет ячейку без искажений. */ img.ph--photo { width: 100%; height: 100%; object-fit: cover; display: block; } .ph__note { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(38,40,32,.4); text-align: center; padding: 0 12px; } /* Тёплое свечение из-под главного кадра — «свет свечи». */ .glow::after { content: ''; position: absolute; inset: auto -12% -14% -12%; height: 46%; background: radial-gradient(60% 100% at 50% 100%, rgba(240,208,140,.5) 0, transparent 72%); pointer-events: none; } /* ================================================= шапка (общее) */ .head { position: sticky; top: 0; z-index: 50; background: rgba(61,64,50,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .4s var(--ease), background .4s var(--ease); } .head.is-stuck { border-bottom-color: rgba(239,232,218,.16); background: rgba(61,64,50,.97); } .head__in { display: flex; align-items: center; gap: 30px; min-height: 80px; } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; } .logo__txt { font-family: var(--serif); font-size: 22px; line-height: 1.02; color: var(--olive-deep); } .logo__txt em { display: block; font: 500 9.5px/1 var(--sans); letter-spacing: .19em; text-transform: uppercase; color: var(--gold-ink); margin-top: 5px; font-style: normal; } .nav { display: flex; gap: 30px; } .nav a { text-decoration: none; font-size: 14.5px; color: var(--ink); } /* Подчёркивание выезжает слева направо. */ .nav a span { position: relative; display: inline-block; padding-bottom: 4px; } .nav a span::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .nav a:hover span::after { transform: none; } .burger { display: none; background: none; border: 0; padding: 12px 4px; cursor: pointer; } .burger span { display: block; width: 24px; height: 1.5px; background: var(--olive-deep); transition: transform .4s var(--ease), opacity .3s var(--ease); } .burger span + span { margin-top: 6px; } .burger.is-open span:first-child { transform: translateY(3.7px) rotate(45deg); } .burger.is-open span:last-child { transform: translateY(-3.8px) rotate(-45deg); } .mnav { display: none; } /* ============================================================ фирменный знак Набран вёрсткой, а не картинкой: «После» и «Пяти» прописными антиквой, между ними крупная рукописная «П» курсивом, под ними подпись между двумя линейками. Масштабируется размером шрифта — один и тот же блок работает и в шапке (16px), и на первом экране (110px). ============================================================ */ .mark { display: inline-flex; flex-direction: column; align-items: center; font-family: var(--serif); color: var(--on-dark); line-height: 1; } /* padding, а не margin у подписи: у `.mark__sub` свой мелкий кегль (.26em), и отступ в em там считается от него — сдвига почти не выходит. Здесь же em — это кегль знака, и запас реально отодвигает подпись от хвоста. */ .mark__row { display: flex; align-items: baseline; white-space: nowrap; padding-bottom: .58em; } .mark__word { text-transform: uppercase; letter-spacing: .2em; /* в знаке буквы стоят очень широко */ font-size: 1.05em; font-weight: 300; } /* Просвет между словами, в котором стоит вензель. Ширину задаём здесь, а не размером буквы: вензель вынут из потока и на раскладку не влияет, поэтому его можно увеличивать сколько угодно, не разгоняя слова. */ .mark__gap { position: relative; display: inline-block; width: .78em; flex: none; } /* Вензель «П» — украшение между словами, а не буква из них. На фирменной карточке он вдвое выше строки и заходит на оба слова; повторяем это абсолютным позиционированием по центру просвета. SVG-построение убрано по правке владельца от 02.08.2026. */ .mark__p { position: absolute; left: 50%; top: 50%; /* Сдвиг влево: у скриптовой «П» толстое тело смещено вправо от середины глифа — по геометрии она встаёт на «П» слова «ПЯТИ» и закрывает её. */ transform: translate(-57%, -50%); font-family: var(--script); font-weight: 400; font-style: normal; font-size: 2.45em; line-height: 1; letter-spacing: 0; } /* не используется, оставлено на случай возврата .mark__swash { /* Буква крупнее строки и выходит за неё сверху и снизу — как в знаке. */ width: 3.3em; height: 2.9em; margin: 0 -.02em; position: relative; top: .62em; flex: none; overflow: visible; } */ /* Знак-картинка (вырезан с фирменной карточки владельца). В шапке и подвале задаём высоту, а не ширину: знак — блок из двух строк с пропорцией около 2:1, и по ширине он вылезает за высоту шапки. */ img.mark { display: block; } /* В шапке — вариант без подписи, и ограничен по высоте, а не по ширине: росчерк вензеля выходит далеко вверх, и при задании ширины знак упирался в края шапки без единого пикселя воздуха. */ img.mark--s { height: 58px; width: auto; } img.mark--m { height: 84px; width: auto; } img.mark--xl { width: min(620px, 76vw); height: auto; } .mark__sub { display: flex; align-items: center; gap: .8em; margin-top: 0; /* запас под хвост вензеля даёт `.mark__row` */ font-family: var(--sans); font-weight: 400; font-size: .26em; letter-spacing: .42em; text-transform: uppercase; color: var(--on-dark); opacity: .85; } .mark__sub i { display: block; width: 4.2em; height: 1px; background: currentColor; opacity: .5; } /* размеры */ .mark--s { font-size: 19px; } .mark--m { font-size: 24px; } .mark--xl { font-size: clamp(30px, 6.4vw, 88px); } /* На светлом фоне (страница товара, печать) знак темнеет. */ .phead--prod .mark, .doc .mark { color: var(--ink); } /* ============================================================ первый экран-карточка */ .hero--mark { padding-bottom: 0; position: relative; overflow: hidden; } /* Со сгенерированным фото: кадр становится фоном экрана, поверх него затемнение, чтобы знак и кнопки читались. Кадрирование по НИЗУ: свеча на снимке стоит внизу, и при центрировании она уезжала за границу секции — оставался пустой фон. Плюс экран получает минимальную высоту, иначе композиция не помещается. */ .hero.hero--photo { /* сама картинка приходит инлайном из генератора — см. hero_photo() */ background-size: cover; background-position: center bottom; min-height: min(88vh, 900px); display: flex; align-items: center; } /* Содержимое приподнято: внизу кадра горит свеча, и кнопки не должны налезать на пламя. */ .hero.hero--photo .hero__mark-in { width: 100%; padding-bottom: clamp(70px, 14vh, 170px); } /* Свет от пламени уже есть на фото — свой луч выключаем, чтобы не спорил. */ .hero.hero--photo::after { display: none; } .hero.hero--photo .hero__candle { display: none; } /* свеча уже есть на фото */ /* Диагональный луч света — как на фирменной карточке: свет падает сверху справа, оставляя мягкую широкую полосу и тень по краям. */ .hero--mark::after { content: ''; position: absolute; inset: -20% -30%; background: linear-gradient(112deg, transparent 22%, rgba(239,232,218,.10) 38%, rgba(239,232,218,.16) 47%, rgba(239,232,218,.05) 58%, transparent 72%); pointer-events: none; animation: drift 26s ease-in-out infinite; } .hero--mark > .wrap { position: relative; z-index: 1; } .hero__mark-in { display: flex; flex-direction: column; align-items: center; text-align: center; } .hero__mark { margin-top: clamp(16px, 4vw, 54px); } .hero__claim { font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 2.1vw, 28px); color: var(--on-dark-mute); margin: clamp(26px, 3.4vw, 44px) 0 0; } .hero__claim em { font-style: italic; color: var(--gold); } .hero--mark .hero__act { margin-top: clamp(24px, 3vw, 38px); justify-content: center; } /* Кадр свечи внизу — как на карточке: обрезан нижним краем экрана. */ .hero__candle { width: min(460px, 78vw); margin-top: clamp(28px, 4vw, 56px); } .hero__candle .ph { aspect-ratio: 3/2; background: var(--olive-soft); border-radius: 8px 8px 0 0; } .hero__candle .ph__note { color: rgba(239,232,218,.42); } /* ================================================ первый экран (общее) */ .hero { padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 4.5vw, 64px); position: relative; overflow: hidden; } /* Тёплое пятно света за первым экраном — медленно дышит и смещается. Это и есть «чтобы не было пусто»: фон живёт, но ничего не мельтешит. */ .hero::before { content: ''; position: absolute; z-index: 0; /* Пятно должно гаснуть ЗАДОЛГО до краёв своего блока: при обрезке по `overflow: hidden` у первого экрана иначе видна прямая граница — светлый прямоугольник поперёк страницы. Поэтому блок большой, а градиент — эллипс, полностью прозрачный уже к 60%. */ right: -22vw; top: -34vh; width: 96vw; height: 132vh; background: radial-gradient(ellipse 46% 42% at 62% 42%, rgba(240,208,140,.5) 0, rgba(233,226,208,.24) 34%, transparent 60%); animation: drift 17s ease-in-out infinite; pointer-events: none; } .hero__in { position: relative; z-index: 1; } .hero.hero--photo::before { display: none; } .hero__in { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .hero h1 { margin-bottom: 30px; } .hero .lead { margin-bottom: 40px; } .hero__act { display: flex; gap: 14px; flex-wrap: wrap; } /* Кадр въезжает справа — один раз, при загрузке. Потолок по ширине: на широкой вёрстке колонка доходит до ~740px, и кадр с пропорцией 3/4 вырастал бы почти на 1000px в высоту — экран целиком. */ .hero__fig { position: relative; max-width: 620px; justify-self: end; width: 100%; animation: enter-r 1.15s var(--ease) .25s both; /* сдвиг — из --shift */ } /* А дальше — еле заметно покачивается. Задержка больше длительности входа: иначе две анимации спорят за transform в первую секунду. */ .hero__fig .ph { animation: breathe 9s ease-in-out 1.5s infinite; } /* Подписи под кадрами — общий стиль на все страницы. */ .hero__fig figcaption, .two__side figcaption { margin-top: 14px; font-size: 12px; letter-spacing: .06em; color: var(--muted); max-width: 46ch; } .hero__fig figcaption { text-transform: uppercase; letter-spacing: .08em; } /* Тонкая линия слева — подпись не путается с основным текстом. */ .two__side figcaption { border-left: 2px solid var(--clay); padding-left: 12px; } /* ============================================================ внутренние страницы */ /* Шапка раздела: крошки, надзаголовок, H1, лид. */ .phead { padding: clamp(28px, 3.5vw, 48px) 0 clamp(32px, 4vw, 56px); } .phead h1 { font-size: clamp(34px, 4.6vw, 60px); margin-bottom: 22px; } .phead .lead { max-width: 60ch; } .crumbs { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-bottom: 26px; } .crumbs a { text-decoration: none; border-bottom: 1px solid transparent; } .crumbs a:hover { border-color: var(--gold); } .crumbs span { color: var(--clay); } .crumbs b { font-weight: 500; color: var(--ink); } /* Активный пункт меню. Оба правила остались с той поры, когда шапка была светлой: тёмная краска на тёмном фоне давала 1.3:1 — то есть в мобильном меню нельзя было прочесть ровно тот пункт, на котором стоишь. Десктопное правило перекрывается ниже блоком тёмной шапки, мобильное — нет. Красим золотом: на оливе это 4.7:1 и отличает пункт от остальных, кремовых. В десктопном меню это правило перебивается ниже блоком тёмной шапки (там активный пункт кремовый и помечен подчёркиванием) — золото здесь остаётся страховкой на случай светлой шапки. */ .nav a.is-here span::after { transform: none; } .nav a.is-here { color: var(--gold); } .mnav a.is-here { color: var(--gold); font-weight: 600; } /* Модификатор «без отступа сверху» объявлен ниже, рядом с самой .sec — там сокращённое свойство padding, и оно перебивало бы правило, объявленное здесь. */ /* ---- свой оттенок у каждой страницы ---- Одна система, но раздел узнаётся по фону шапки ещё до чтения заголовка. */ .page--korporativnym .phead { background: var(--sand); } .page--podpiska .phead { background: #EAE2D1; } .page--meropriyatiya .phead { background: var(--sand); } .page--master-klassy .phead { background: #ECE5D6; } .page--o-brende .phead { background: var(--sand); } .page--kontakty .phead { background: var(--sand); } /* Шапка страницы с фоном должна дышать по краям. */ .page:not(.page--index) .phead { padding: clamp(24px, 3vw, 40px) 0 clamp(36px, 4.5vw, 60px); position: relative; overflow: hidden; } /* Тёплое пятно в углу — то же «дыхание», что на главной, но тише. */ .page:not(.page--index) .phead::after { content: ''; position: absolute; pointer-events: none; right: -8vw; top: -40%; width: 44vw; height: 150%; background: radial-gradient(circle at 60% 50%, rgba(240,208,140,.32) 0, transparent 66%); animation: drift 21s ease-in-out infinite; } .page:not(.page--index) .phead .wrap { position: relative; z-index: 1; } /* Шапка раздела со сгенерированным фото. Текст НЕ впечатан в картинку, а лежит поверх живой вёрсткой: впечатанный заголовок не индексируется, не переносится на узком экране и требует перерисовки картинки при каждой правке слова. Затемнение идёт слева направо: предмет на кадре стоит справа, текст — слева, и вуаль плотная там, где буквы, и почти прозрачная над свечой. */ .page:not(.page--index) .phead--photo { /* сама картинка приходит инлайном из генератора — см. phead_photo() */ background-size: cover; /* 60%, а не center: кадры 16:9, полоса шапки ниже, и при центрировании срезается низ — ровно там, где на всех снимках стоит свеча. */ background-position: center 60%; min-height: min(60vh, 520px); display: flex; align-items: center; } .page:not(.page--index) .phead--photo .wrap { width: 100%; } /* Тёплое пятно выключаем: свет от свечи уже есть на самом фото. */ .page:not(.page--index) .phead--photo::after { display: none; } /* Лид на фоне фото держим уже: длинная строка уезжает на светлую часть кадра. */ .phead--photo .lead { max-width: 46ch; } @media (max-width: 700px) { /* На узком экране предмет всё равно не поместится рядом с текстом — кадр становится просто тёмной подложкой, вуаль плотнее по всей ширине. */ .page:not(.page--index) .phead--photo { min-height: 0; } } /* ============================================================ страница товара */ /* Крошки на товаре стоят отдельной узкой полосой — заголовок начинается уже внутри карточки, рядом с фото. */ .phead--prod { padding: clamp(18px, 2vw, 26px) 0 0; } /* На странице товара шапка низкая — в ней только крошки. Световое пятно в такой полосе обрезается видимой границей, поэтому здесь его нет. */ .phead--prod::after { display: none; } .page[class*="svecha"] .phead--prod, .page[class*="nabor"] .phead--prod { background: none; } .card2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; padding-top: clamp(20px, 2.5vw, 34px); } .card2__media { position: sticky; top: 104px; } .card2__media .ph { aspect-ratio: 1/1; } .card2__media figcaption { margin-top: 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); } .card2__info h1 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 24px; } .card2__about { max-width: 54ch; margin-bottom: 30px; } .card2__about p { margin-bottom: .9em; } .card2 .hero__act { margin-top: 30px; } /* Характеристики: пары «свойство — значение» в две колонки. */ .specs { margin: 0; padding: 22px 0 0; border-top: 1px solid rgba(38,40,32,.12); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 26px; } .specs div { display: flex; flex-direction: column; gap: 4px; } .specs dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); } .specs dd { margin: 0; font-size: 16px; color: var(--ink); } /* ============================================================ текстовый документ */ /* Политика, оферта и подобное: узкая колонка, спокойный ритм заголовков. */ /* Та же история, что с `.about`: сужаем ради длины строки, но не центрируем. */ .doc { max-width: 78ch; margin-inline: 0; } .doc h2 { font-size: clamp(23px, 2.2vw, 30px); margin: clamp(32px, 3.4vw, 46px) 0 14px; padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid rgba(38,40,32,.1); } .doc h2:first-of-type { border-top: 0; padding-top: 0; } .doc p, .doc .ticks { font-size: 16px; } .doc .ticks { margin-bottom: 1em; } .doc b { font-weight: 600; color: var(--olive-deep); } /* ============================================================ вопросы-ответы */ .faq { border-top: 1px solid rgba(38,40,32,.1); max-width: 90ch; } .faq__i { border-bottom: 1px solid rgba(38,40,32,.1); } .faq__i summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 16px; padding: 20px 0; font-family: var(--serif); font-size: clamp(19px, 1.6vw, 23px); color: var(--olive-deep); } .faq__i summary::-webkit-details-marker { display: none; } /* Плюс, который превращается в минус. */ .faq__i summary::after { content: ''; margin-left: auto; flex: none; width: 13px; height: 13px; position: relative; top: 4px; background: linear-gradient(var(--gold), var(--gold)) center/13px 1.5px no-repeat, linear-gradient(var(--gold), var(--gold)) center/1.5px 13px no-repeat; transition: transform .4s var(--ease), background-size .4s var(--ease); } .faq__i[open] summary::after { transform: rotate(90deg); background-size: 13px 1.5px, 1.5px 0; } .faq__i summary:hover span { color: var(--gold); } .faq__i summary span { transition: color .3s var(--ease); } .faq__inner { overflow: hidden; transition: height .38s var(--ease), opacity .38s var(--ease); } .faq__inner p { padding-bottom: 22px; max-width: 74ch; color: #5A5A57; font-size: 16px; } /* ============================================================ переход к соседям */ .pager { border-top: 1px solid rgba(38,40,32,.1); } .pager__in { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(38,40,32,.1); padding-inline: 0; } .pager__i { display: flex; flex-direction: column; gap: 6px; padding: clamp(26px, 3vw, 40px) var(--pad); text-decoration: none; background: var(--cream); transition: background .35s var(--ease); } .pager__i:hover { background: var(--sand); } .pager__i span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); } .pager__i b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); color: var(--olive-deep); } .pager__i--next { text-align: right; } /* Если сосед один — занимает всю ширину, а не половину с дырой. */ .pager__i:only-child { grid-column: 1 / -1; } .pager__i--prev b::before { content: '← '; color: var(--clay); } .pager__i--next b::after { content: ' →'; color: var(--clay); } /* ============================================================ витрина каталога */ /* Сетка товаров. Фиксированные колонки (а не auto-fill): плитки разного размера должны попадать в общий ритм, иначе «широкая» карточка ломает ряд на узких экранах. */ /* Число колонок задаёт страница: в категории с двумя позициями четыре колонки оставляли половину ряда пустой, и раздел выглядел незаполненным. Генератор ставит --cols = min(4, сколько товаров). */ .prods { display: grid; gap: clamp(14px, 1.6vw, 24px); grid-template-columns: repeat(var(--cols, 4), 1fr); grid-auto-flow: dense; /* дыры от крупных плиток затягиваются */ /* И ограничение по ширине: с двумя колонками на всю страницу карточки раздувались до 660px — стена из одного кадра. Потолок держит их в разумном размере, а на полном ряду ни на что не влияет. */ max-width: calc(var(--cols, 4) * 380px); } .prod { display: flex; flex-direction: column; text-decoration: none; background: #FFFFFF; border: 1px solid rgba(38,40,32,.06); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } .prod:hover { transform: translateY(-5px); border-color: rgba(38,40,32,.12); box-shadow: 0 18px 40px rgba(38,40,32,.09); } /* Крупная плитка — только одна разновидность: на две колонки, с широким кадром. Вариант «на две строки» пробовали и убрали: вместе с `dense` он рвал ряды — карточки в соседних колонках вставали вразнобой, и сетка выглядела сломанной, а не задуманной. Одного акцента достаточно. */ .prod--wide { grid-column: span 2; } .prod--wide .prod__media { aspect-ratio: 16/10; } .prod__media { position: relative; overflow: hidden; aspect-ratio: 1/1; } .prod__media .ph { transition: transform 1.2s var(--ease); } .prod:hover .prod__media .ph { transform: scale(1.05); } /* Метка на кадре: «Хит», «Набор», «Сезон». */ .prod__badge { position: absolute; top: 12px; left: 12px; z-index: 1; font: 500 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; background: rgba(242,241,237,.92); color: var(--ink); padding: 7px 12px; border-radius: 999px; backdrop-filter: blur(4px); } .prod__body { padding: 18px 20px 22px; display: flex; flex-direction: column; align-items: flex-start; } .prod__body h3 { font-size: 19px; margin-bottom: 5px; } .prod__scent { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--gold-ink); margin-bottom: 8px; } .prod__note { font-size: 14px; color: var(--muted); margin-bottom: 16px; } /* Подпись-ссылка внизу карточки: линия уезжает вправо при наведении. */ .prod__more { margin-top: auto; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); position: relative; padding: 0 18px 4px 0; } .prod__more::before { content: ''; position: absolute; left: 0; right: 18px; bottom: 0; height: 1px; background: var(--clay); transform: scaleX(1); transform-origin: left; transition: background .3s var(--ease); } .prod__more::after { content: '→'; position: absolute; right: 0; bottom: 0; transition: transform .35s var(--ease); } .prod:hover .prod__more::before { background: var(--gold); } .prod:hover .prod__more::after { transform: translateX(4px); } .sec__aside { font-size: 14px; color: var(--muted); max-width: 40ch; } /* ============================================================ тизеры разделов */ .teasers { display: grid; gap: clamp(18px, 2vw, 28px); grid-template-columns: repeat(4, 1fr); } .teaser { display: block; text-decoration: none; border: 1px solid var(--clay); padding: 28px 26px 26px; background: rgba(255,255,255,.4); transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); } .teaser:hover { background: #FFFFFF; border-color: var(--gold); transform: translateY(-4px); } .teaser h3 { margin-bottom: 10px; } .teaser p { font-size: 15px; margin-bottom: 18px; } .teaser__more { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); } .teaser__more::after { content: ' →'; } /* ============================================================ призыв к действию */ /* Закрывающий блок. Цвет текста — из палитры: до этого стоял холодный серый #B9B8B3, которого в проекте нет, и блок читался чужим. */ .cta { background: var(--olive-deep); color: var(--on-dark-mute); padding: clamp(44px, 5vw, 72px) 0; } /* Со снимком: один и тот же кадр на всех страницах — подпись в конце. Затемнение слева направо: свечи на кадре стоят справа, текст слева. */ .cta.cta--photo { /* картинка приходит инлайном из генератора — см. cta_photo() */ background-size: cover; background-position: center right; padding: clamp(64px, 7vw, 108px) 0; position: relative; } .cta.cta--photo .wrap { position: relative; z-index: 1; } @media (max-width: 700px) { /* Градиент задан в процентах, и на узком экране он сжимается: последние слова заголовка оказываются над самым светлым местом кадра. Композиции тут всё равно не видно, поэтому просто добавляем ровную вуаль. */ .cta.cta--photo::before { content: ''; position: absolute; inset: 0; background: rgba(43,46,35,.42); } } .cta__in { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; } .cta h2 { color: var(--cream); margin-bottom: 12px; } .cta .sec__lead { max-width: 52ch; } .cta .btn { background: var(--cream); color: var(--olive-deep); border-color: var(--cream); flex: none; } .cta .btn::before { background: var(--gold); } .cta .btn:hover { color: var(--olive-deep); border-color: var(--gold); } /* ============================================================ три причины */ .strip { background: var(--sand); padding: clamp(40px, 4.5vw, 60px) 0; } .strip__in { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); } .strip__i h3 { margin: 16px 0 10px; } .strip__i p { font-size: 15.5px; } /* ============================================================ секции */ .sec { padding: var(--sec) 0; } /* Первая секция после шапки страницы: свой отступ у шапки уже есть, второй давал провал в пол-экрана. Объявлено ПОСЛЕ .sec — иначе сокращённое `padding` выше перебивает. */ /* Первая секция после шапки страницы. Ноль сверху был верен, пока шапка была текстовой; с фотофоном надзаголовок оказался притёрт вплотную к границе тёмной полосы и читался как её обрезок. */ .sec--top0 { padding-top: clamp(34px, 3.6vw, 58px); } .sec--corp { background: var(--sand); } .sec--sub { background: #EAE2D1; } .sec--classes { background: #ECE5D6; } .sec--about { background: var(--sand); } /* ---- крупная шапка раздела ---- Номер выносится в поле слева, над всем — тонкая линия во всю ширину. Это главный приём, который разделяет разделы: глаз цепляется за цифру и понимает, что начался новый кусок, ещё до чтения заголовка. */ .shead { display: grid; grid-template-columns: minmax(64px, 108px) 1fr; gap: clamp(16px, 3vw, 44px); /* Номера выключены — колонка под них схлопывается, заголовок встаёт к левому краю вместе с остальным текстом страницы. */ grid-template-columns: 1fr; border-top: 1px solid rgba(38,40,32,.14); padding-top: clamp(20px, 2.4vw, 32px); margin-bottom: clamp(32px, 3.5vw, 52px); } .shead__n { font-family: var(--serif); font-size: clamp(32px, 3.6vw, 54px); line-height: .9; color: var(--gold); } .shead h2 { margin-bottom: 18px; } .shead .eyebrow { margin-bottom: 14px; } /* Вариант в строку: слева заголовок, справа примечание. */ .shead--row > div:last-child { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; } .shead--row h2 { margin-bottom: 0; } /* Колонки выравниваются по верху, а не по центру. При центрировании короткий текст (например, список контактов) повисал посреди высокого кадра, и над ним зиял провал в пол-экрана. */ .two { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(36px, 6vw, 88px); align-items: start; } /* Тот же потолок для боковых кадров в двухколоночных секциях. Кадр прижимается к внешнему краю страницы, а не центрируется в своей колонке: при центрировании между фото и краем оставалась случайная щель в полсотни пикселей, и блок выглядел незакреплённым. */ .two__side { max-width: 600px; width: 100%; justify-self: end; } /* В перевёрнутом блоке кадр слева — значит, прижимается к левому краю. */ .two--rev .two__side { order: -1; justify-self: start; } .two h2 { margin-bottom: 24px; } .two .sec__lead { margin-bottom: 34px; } .two .btn { margin-top: 34px; } /* Отступ снизу такой же, как сверху: без него следующий за колонками список прилипал к ним вплотную и читался как продолжение левой колонки. */ .two__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 34px 0; } .two__cols h3 { font-size: 20px; margin-bottom: 8px; } .two__cols p { font-size: 15.5px; } /* ============================================================ карточки */ .grid { display: grid; gap: clamp(20px, 2.6vw, 36px); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .card__media { overflow: hidden; aspect-ratio: 1/1; } .card__media .ph { transition: transform 1.1s var(--ease); } .card:hover .card__media .ph, .mini:hover .card__media .ph { transform: scale(1.05); } .mini h3 { margin: 22px 0 8px; font-size: 20px; } .mini p { font-size: 15px; } /* Плитка с иконкой вместо номера. Раньше это был голый текст с цифрой «01» — владелец так и сказал, «голый текст». Цифры заодно ушли: нумерация ему не нравится. Иконка в кружке даёт точку входа для глаза и держит ритм сетки. */ .mini--ic h3 { margin-top: 16px; } .mini__ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(201,169,107,.15); color: var(--gold-ink); transition: background .4s var(--ease); } /* На тёмной секции кружок светлее фона, а не темнее. */ .sec--dark .mini__ic { background: rgba(239,232,218,.10); color: var(--gold); } /* Карточка сезона в клубе подписки. Верхний отступ у заголовка сброшен: в этих карточках нет картинки, от которой он отбивался. */ .season h3 { margin-top: 0; } .season__m { list-style: none; margin: 14px 0 0; padding: 14px 0 0; font-size: 15px; border-top: 1px solid rgba(38,40,32,.1); } .season__m li { margin-bottom: 8px; color: var(--muted); } .season__m b { font-weight: 600; color: var(--olive-deep); } /* Ссылка «читать дальше» под блоком. Стрелка отъезжает при наведении — то же движение, что у кнопки «подробнее» на карточке товара. */ .more { margin-top: 30px; font-size: 15px; } .more a { text-decoration: none; color: var(--gold-ink); border-bottom: 1px solid var(--clay); padding-bottom: 3px; transition: border-color .35s var(--ease); } .more a::after { content: ' →'; display: inline-block; transition: transform .35s var(--ease); } .more a:hover { border-color: var(--gold-ink); } .more a:hover::after { transform: translateX(4px); } /* Цена на карточке. Стоит не у всех: настоящие позиции пришли из витрины сообщества вместе с ценами, у придуманного каркаса цены нет. Поэтому «Цену уточним» набрано тише — это не цена, а обещание ответить. */ .prod__price { margin-top: 10px; font-size: 17px; color: var(--olive-deep); font-family: var(--serif); } .price { font-family: var(--serif); font-size: clamp(28px,3vw,38px); color: var(--olive-deep); margin: 4px 0 0; } .prod__price--ask { font-size: 14px; color: var(--muted); font-family: var(--sans); } /* ============================================================ этапы работы */ .steps { list-style: none; margin: 0; padding: 0; } .steps li { display: flex; gap: 18px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid rgba(38,40,32,.09); font-size: 16px; transition: padding-left .4s var(--ease); } .steps li:hover { padding-left: 8px; } .steps li:last-child { border-bottom: 0; } /* Номер этапа — тёмным золотом: светлое --gold на песочном фоне даёт 1.64:1, то есть цифру почти не видно. В проекте для акцентного текста на светлом ровно для этого заведён --gold-ink. */ .steps span { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--gold-ink); width: 24px; flex: none; } .steps b { font-weight: 600; color: var(--olive-deep); } /* Шаги во всю ширину секции. Ограничение по ширине — ради длины строки: на макете 1680px пункт растягивается на всю полосу и читается тяжело. */ .steps--wide { max-width: 980px; } /* ============================================================ галочки */ .ticks { list-style: none; margin: 0; padding: 0; } .ticks li { position: relative; padding-left: 28px; margin-bottom: 13px; font-size: 16px; } .ticks li::before { content: ''; position: absolute; left: 0; top: .64em; width: 14px; height: 1.5px; background: var(--gold); } /* ============================================================ «кому подходит» */ .tags { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid rgba(38,40,32,.1); padding-top: 30px; } .tags__t { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 20px; } .tags ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; } .tags li { border: 1px solid var(--clay); padding: 10px 18px; font-size: 14px; background: rgba(255,255,255,.45); transition: background .35s var(--ease), border-color .35s var(--ease); } .tags li:hover { background: #FFFFFF; border-color: var(--gold); } /* ============================================================ о бренде (тёмный) */ /* Ограничение по ширине — ради длины строки, но БЕЗ центрирования: `.wrap` центрирует себя сам, и суженный блок уезжал к середине страницы, отступая от левого края на 310px. Весь остальной сайт выровнен по левому краю, и этот блок читался как съехавший. */ /* Манифест на странице «О бренде». Был тёмным — и стоял сразу за тёмной фотошапкой: два тёмных пятна сливались в одну муть на пол-экрана, а текст жался в левую треть при пустой правой. Теперь светлый и в две колонки: цитата слева, рассказ справа. Заодно ушёл холодный серый текст — он был мимо палитры. */ .about { display: grid; gap: clamp(28px, 4vw, 68px); grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } .about blockquote { margin: 0; padding: 0; font-family: var(--serif); font-size: clamp(28px, 3.4vw, 50px); line-height: 1.16; color: var(--olive-deep); /* Цитата держится на экране, пока читается текст справа. */ position: sticky; top: 108px; } .about blockquote::before { content: ''; display: block; width: 64px; height: 2px; background: var(--gold); margin-bottom: 26px; } .about__p { color: var(--muted); } .about__p + .about__p { margin-top: 1.1em; } /* Подпись-концовка: отбита от текста и набрана крупнее — это обращение к читателю, а не ещё один абзац описания. */ .about__p--sign { margin-top: 2em; padding-top: 1.6em; border-top: 1px solid var(--clay); color: var(--ink); font-family: var(--serif); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.5; } .about__p--sign em { color: var(--gold-ink); } @media (max-width: 900px) { .about { grid-template-columns: 1fr; } .about blockquote { position: static; } } /* ============================================================ контакты */ /* ============================================================ иконки */ /* Общее для всего набора (tools/icons.py): контур наследует цвет текста, поэтому иконка сама подстраивается под тёмный и светлый фон. */ .ic { flex: none; vertical-align: middle; } /* ============================================================ каналы связи */ /* Крупные карточки на странице «Контакты»: по такой ссылке попадают пальцем без прицеливания, в отличие от строки в таблице. */ .chan { display: grid; gap: 14px; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .chan--plain { margin-top: 14px; } .chan__i { display: flex; flex-direction: column; gap: 4px; padding: 26px 24px 24px; background: var(--cream); border: 1px solid var(--clay); text-decoration: none; color: var(--ink); transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease); } a.chan__i:hover { border-color: var(--gold); background: #F4EEE2; transform: translateY(-2px); } /* Некликабельные плитки (город, часы) — тише фоном и без наведения: иначе по ним пытаются нажать. */ .chan__i--flat { background: transparent; border-color: rgba(207,198,178,.5); /* тише кликабельных, иначе по ним жмут */ } .chan__i--flat .chan__ic { background: rgba(207,198,178,.28); color: var(--muted); } .chan__ic { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 50%; background: rgba(201,169,107,.14); color: var(--gold-ink); } a.chan__i:hover .chan__ic { background: rgba(201,169,107,.24); } .chan__i b { font-weight: 500; font-size: 16px; } .chan__v { color: var(--muted); font-size: 14.5px; } /* ============================================================ страница контактов Две колонки: слева живые каналы, справа памятка. До этого была таблица «поле — значение» во всю ширину — владельцу не понравилось, и правильно: читать нечего, попасть пальцем некуда, половина экрана пустая. */ .kont { display: grid; gap: clamp(28px, 3.5vw, 64px); grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; } .kont .chan { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* Справочные строки: иконка, подпись, значение. Не карточки — это то, что читают глазами, а не нажимают. */ .kont__list { list-style: none; margin: 34px 0 0; padding: 0; } .kont__list li { display: grid; grid-template-columns: 34px 132px 1fr; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid rgba(38,40,32,.09); } .kont__list li:first-child { border-top: 1px solid rgba(38,40,32,.09); } .kont__k { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .kont__ic { color: var(--gold-ink); display: flex; } .kont__list a { text-decoration: none; border-bottom: 1px solid var(--clay); } .kont__list a:hover { border-color: var(--gold); } .kont__side { background: var(--sand); padding: clamp(26px, 2.6vw, 40px); position: sticky; top: 108px; } .kont__side h3 { font-size: 25px; margin-bottom: 20px; } .kont__steps { margin: 0; padding-left: 1.2em; font-size: 15px; color: var(--muted); } .kont__steps li { margin-bottom: 12px; } .kont__steps b { color: var(--ink); font-weight: 500; } .kont__note { display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--clay); font-size: 15px; color: var(--muted); } @media (max-width: 980px) { .kont { grid-template-columns: 1fr; } .kont__side { position: static; } } @media (max-width: 560px) { /* Три колонки в 320px не помещаются: подпись уходит над значением. */ .kont__list li { grid-template-columns: 34px 1fr; row-gap: 2px; } .kont__k { grid-column: 2; } .kont__list li > :last-child { grid-column: 2; } } /* ============================================================ соцсети */ /* Ряд кружков в подвале. Иконка без подписи — размер кружка держим не меньше 40px, это нижняя граница удобного нажатия пальцем. */ .soc { display: flex; gap: 10px; margin-top: 16px; } .soc__i { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(239,232,218,.22); color: var(--on-dark-mute); transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease); } .soc__i:hover { border-color: var(--gold); color: var(--olive-deep); background: var(--gold); } /* Телефон и почта в подвале — с иконкой в строке. */ .foot__c { display: inline-flex; align-items: center; gap: 9px; } /* ============================================================ SEO-блок */ .seo { background: var(--sand); padding: clamp(48px, 5.5vw, 72px) 0; border-top: 1px solid rgba(38,40,32,.07); font-size: 15px; } .seo__t { font-size: 24px; margin-bottom: 4px; } /* Переключатель стоит ПОСЛЕ текста и тегов — как на komandor: «Скрыть» оказывается внизу блока, а не над ним. Порядком управляет флекс: summary уезжает в конец, хотя в разметке он первый (иначе браузер не считает его заголовком details). */ .seo__d { display: flex; flex-direction: column; } .seo__d summary { order: 9; align-self: flex-start; margin-top: 20px; cursor: pointer; list-style: none; } .seo__d summary::-webkit-details-marker { display: none; } .seo__toggle { font: 500 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid transparent; padding-bottom: 3px; transition: border-color .3s var(--ease); } .seo__d summary:hover .seo__toggle { border-bottom-color: var(--gold); } /* Текст лежит в разметке (обе надписи), CSS лишь показывает нужную. */ .seo__hide { display: none; } .seo__d[open] .seo__show { display: none; } .seo__d[open] .seo__hide { display: inline; } .seo__toggle::after { content: '▾'; font-size: 9px; } .seo__d[open] .seo__toggle::after { content: '▴'; } /* Обёртка, которой скрипт анимирует высоту при раскрытии. */ .seo__inner { overflow: hidden; transition: height .38s var(--ease), opacity .38s var(--ease); } .seo__body { margin-top: 18px; max-width: 78ch; color: #5A5A57; } .seo__body p { margin-bottom: .9em; } /* Теги — плашками с обводкой, как в образце. */ .seo__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(38,40,32,.1); } .seo__tags li { font-size: 12.5px; color: var(--muted); border: 1px solid var(--clay); border-radius: 999px; padding: 7px 15px; background: rgba(255,255,255,.45); transition: border-color .3s var(--ease), color .3s var(--ease); } .seo__tags li:hover { border-color: var(--gold); color: var(--ink); } /* ============================================================ подвал */ .foot { background: var(--olive-deep); color: #B9B8B3; padding: clamp(56px, 6vw, 88px) 0 0; } .foot__in { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); padding-bottom: 56px; } .foot__brand { display: flex; gap: 14px; align-items: flex-start; } .foot__brand p { font-family: var(--serif); font-size: 23px; line-height: 1.05; color: #FFFFFF; } .foot__brand em { display: block; font: 500 9.5px/1 var(--sans); font-style: normal; letter-spacing: .19em; text-transform: uppercase; color: var(--gold); margin-top: 6px; } .foot__nav { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .foot__t { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; /* На чёрном фоне светлый шалфей даёт 3.7:1 и читается — здесь он уместен. */ color: var(--gold); margin: 0 0 6px; } .foot__nav a { text-decoration: none; font-size: 14.5px; transition: color .3s var(--ease), transform .3s var(--ease); } .foot__nav a:hover { color: #FFFFFF; transform: translateX(3px); } .foot__btm { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; padding-bottom: 24px; /* Было #86847F — 3.7:1 на подвале, ниже нормы для мелкого текста. Это ещё и цвет не из палитры. */ font-size: 13px; color: var(--on-dark-mute); } .foot__btm a { text-decoration: none; } .foot__btm a:hover { color: #FFFFFF; } /* ============================================================ адаптив */ @media (max-width: 1040px) { .nav, .head__cta { display: none; } .burger { display: block; } .mnav:not([hidden]) { display: flex; flex-direction: column; border-top: 1px solid rgba(38,40,32,.08); padding: 8px var(--pad) 22px; animation: fade-rise .35s var(--ease) both; } .mnav a { text-decoration: none; padding: 14px 0; font-size: 16.5px; border-bottom: 1px solid rgba(38,40,32,.07); } .mnav a:last-child { border-bottom: 0; } .grid--4, .teasers { grid-template-columns: repeat(2, 1fr); } .prods { grid-template-columns: repeat(3, 1fr); } .foot__in { grid-template-columns: 1fr 1fr; } } @media (max-width: 780px) { body { font-size: 16px; } .hero__in, .two, .card2 { grid-template-columns: 1fr; } .card2__media { position: static; max-width: 480px; } .two--rev .two__side { order: 0; } .hero__fig { max-width: 480px; } .scrolldown { display: none; } .strip__in, .grid--3 { grid-template-columns: 1fr; gap: 32px; } .shead { grid-template-columns: 1fr; gap: 10px; } .shead__n { font-size: 26px; } .shead--row > div:last-child { flex-direction: column; align-items: flex-start; gap: 14px; } .two__cols { grid-template-columns: 1fr; gap: 24px; } .cta__in { flex-direction: column; align-items: flex-start; } .contacts li { flex-direction: column; gap: 4px; } .contacts span { width: auto; } .pager__in { grid-template-columns: 1fr; } .pager__i--next { text-align: left; } } @media (max-width: 540px) { .grid--4, .teasers { grid-template-columns: 1fr; } .prods { grid-template-columns: repeat(2, 1fr); gap: 12px; } .prod__body { padding: 14px 14px 18px; } /* На двух колонках «широкая» плитка занимает ряд целиком, «высокая» превращается в обычную — иначе ряды разъезжаются. */ .prod--wide { grid-column: span 2; } .foot__in { grid-template-columns: 1fr; gap: 36px; } .hero__act { flex-direction: column; align-items: stretch; } .hero__act .btn { text-align: center; } } /* ============================================================ тёмный верх Название «После Пяти» — про вечер, поэтому шапка и первый экран тёмные, как фирменный знак, а дальше страница светлеет. Логотип на тёмном читается ровно так же, как на визитке. ============================================================ */ .head { background: var(--olive); border-bottom: 1px solid rgba(239,232,218,.10); } .head.is-stuck { background: rgba(59,18,25,.96); border-bottom-color: rgba(239,232,218,.16); } .logo__txt { color: var(--on-dark); } .logo__txt em { color: var(--gold); } .nav a { color: var(--on-dark-mute); } .nav a:hover, .nav a.is-here { color: var(--on-dark); } .nav a span::after { background: var(--gold); } .burger span { background: var(--on-dark); } /* Кнопка в шапке — светлая на тёмном. */ .head__cta { background: var(--cream); color: var(--olive-deep); border-color: var(--cream); } .head__cta::before { background: var(--gold); } .head__cta:hover { color: var(--olive-deep); border-color: var(--gold); } .mnav { background: var(--olive); } .mnav a { color: var(--on-dark); border-bottom-color: rgba(239,232,218,.12); } /* Первый экран продолжает шапку. */ .hero { background: var(--olive); color: var(--on-dark-mute); } .hero h1 { color: var(--on-dark); } .hero h1 em { color: var(--gold); } .hero .eyebrow { color: var(--gold); } .hero .lead { color: var(--on-dark-mute); } .hero__fig figcaption { color: var(--on-dark-mute); } .hero .ph { background: var(--olive-soft); } .hero .ph__note { color: rgba(239,232,218,.4); } /* Кнопки на тёмном. */ /* Кнопки на тёмном верху — светлые. Перечислены оба тёмных места сразу: первый экран и шапка внутренней страницы. Раньше правило знало только про первый экран, и на странице 404 (её кнопки стоят в шапке) выходила тёмная кнопка на тёмном фоне — текст внутри читался, а сама кнопка сливалась с фоном и не читалась как кнопка. Проверки контраста такое не ловят: они меряют текст против его подложки, а не подложку против страницы. */ .hero .btn, .page:not(.page--index) .phead .btn { background: var(--cream); color: var(--olive-deep); border-color: var(--cream); } .hero .btn::before, .page:not(.page--index) .phead .btn::before { background: var(--gold); } .hero .btn:hover, .page:not(.page--index) .phead .btn:hover { color: var(--olive-deep); border-color: var(--gold); } .hero .btn--ghost, .page:not(.page--index) .phead .btn--ghost { background: transparent; color: var(--on-dark); border-color: rgba(239,232,218,.45); } .hero .btn--ghost::before, .page:not(.page--index) .phead .btn--ghost::before { background: var(--cream); } .hero .btn--ghost:hover, .page:not(.page--index) .phead .btn--ghost:hover { color: var(--olive-deep); border-color: var(--cream); } /* Шапка внутренней страницы тоже тёмная — единый «вечерний» верх. */ .page:not(.page--index) .phead { background: var(--olive); } .page:not(.page--index) .phead h1 { color: var(--on-dark); } .page:not(.page--index) .phead h1 em { color: var(--gold); } .page:not(.page--index) .phead .eyebrow { color: var(--gold); } .page:not(.page--index) .phead .lead { color: var(--on-dark-mute); } .page:not(.page--index) .crumbs { color: var(--on-dark-mute); } .page:not(.page--index) .crumbs b { color: var(--on-dark); } .page:not(.page--index) .crumbs span { color: rgba(239,232,218,.35); } /* Шапка карточки товара светлая: там только крошки, и тёмная полоса в две строки выглядела бы обрубком. */ .phead--prod { background: var(--cream) !important; } .page .phead--prod .crumbs { color: var(--muted); } .page .phead--prod .crumbs b { color: var(--ink); } .page .phead--prod .crumbs span { color: var(--clay); } /* ============================================================ печать Страницы «Доставка и оплата» и «Политика» иногда печатают. Убираем всё, что на бумаге бессмысленно: шапку, подвал, кнопки, заглушки фото. ============================================================ */ @media print { /* .skip — ссылка «перейти к содержанию»: на экране она уведена за левый край и не видна, но на бумаге поля отсчитываются иначе и она вылезает отдельной строкой. */ /* .sec--also — подборка «смотрите также»: на бумаге это навигация, по которой некуда нажать. */ body::after, .head, .foot, .pager, .cta, .seo, .btn, .skip, .sec--also, .ph, figure, .teasers, .crumbs { display: none !important; } /* Но снимок самого товара оставляем: страницу товара чаще всего и печатают, чтобы показать вещь. Прячем только заглушки и декоративные кадры — у них нет класса ph--photo. */ .card2__media, .card2__media img.ph--photo { display: block !important; } body { background: #fff; color: #000; font-size: 11pt; } .wrap { max-width: none; padding: 0; } .sec { padding: 12pt 0; } h1 { font-size: 20pt; } h2 { font-size: 15pt; } h3 { font-size: 12pt; } .shead { border-top: 1px solid #999; } /* Раскрываем свёрнутое: на бумаге «показать полностью» не нажать. */ details > * { display: block !important; height: auto !important; } a { text-decoration: underline; } /* Адрес ссылки рядом с текстом — иначе на бумаге ссылка бесполезна. */ main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } } /* ============================================================ Уважаем системную настройку «меньше движения»: всё показываем сразу и статично. Бегущая строка и огонёк — тоже стоп. ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .hero::before { animation: none; } }