/* ============================================================ Блоки 2–4. Первый экран этот файл НЕ трогает — он живёт в style.css. Разметка блоков одна, а оформлений три. Переключаются классом на : .v1 / .v2 / .v3. Так их можно честно сравнить, не расходясь текстом и картинками. v1 — «по макету»: зигзаг, кружево, красные плашки этапов v2 — «с волной»: как во втором примере, красная волна на фоне v3 — «карточки»: строгая сетка, самый читабельный вариант ============================================================ */ :root { --tag: #7d1220; /* плашка этапа */ --tag-soft: #a5182a; --ink: #f7f3de; /* основной текст блоков — чуть светлее, чем на обложке */ --ink-dim: #ddd7bd; } /* ---------- общий каркас ---------- */ .section { position: relative; padding: clamp(56px, 7vw, 130px) 0 clamp(60px, 8vw, 150px); } .wrap { position: relative; z-index: 2; width: min(1440px, 100% - clamp(32px, 6vw, 120px)); margin-inline: auto; } /* ---------- заголовок раздела ---------- */ .h2 { font-family: "Champagne & Limousines", sans-serif; font-weight: 400; font-size: clamp(30px, 3.87vw, 74px); line-height: 1.08; letter-spacing: .012em; color: var(--ink); text-align: center; margin-bottom: clamp(36px, 4.46vw, 82px); } .h2 .script { font-family: "Aquarelle", cursive; font-size: 1.85em; line-height: 0; /* чтобы крупная буква не растягивала строку */ margin-right: -.06em; vertical-align: -.16em; } /* ---------- плашка этапа ---------- */ .stage { display: inline-block; margin: 0 0 clamp(28px, 3.4vw, 64px); padding: clamp(8px, .9vw, 14px) clamp(46px, 4vw, 74px) clamp(8px, .9vw, 14px) clamp(20px, 2.6vw, 46px); background: var(--tag); color: var(--ink); font-size: clamp(14px, 1.36vw, 26px); font-weight: 700; letter-spacing: .02em; clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 50%, 100% 100%, 0 100%); } /* плашка тянется от левого края экрана — как в макете */ .stage--edge { margin-left: calc((100vw - min(1440px, 100vw - clamp(32px, 6vw, 120px))) / -2); padding-left: calc((100vw - min(1440px, 100vw - clamp(32px, 6vw, 120px))) / 2 + clamp(20px, 2.6vw, 46px)); } .stage--next { margin-top: clamp(30px, 4vw, 70px); margin-bottom: 0; } /* ---------- персонаж ---------- */ .persona { display: grid; gap: clamp(24px, 3.5vw, 70px); align-items: center; margin-bottom: clamp(56px, 6vw, 104px); } .persona:last-of-type { margin-bottom: 0; } .persona__art { display: flex; justify-content: center; } .persona__art img { display: block; /* 🔴 Ровняем фигуры по ВЫСОТЕ. Исходники разной пропорции, и по ширине они выходили визуально разного размера. */ height: clamp(240px, 30vw, 420px); width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .45)); } .persona__name { font-family: "Aquarelle", cursive; font-weight: 400; font-size: clamp(42px, 5.6vw, 96px); line-height: 1.06; color: var(--ink); margin-bottom: clamp(18px, 2vw, 34px); /* росчерки Aquarelle выходят за строку — даём рамке запас, как на обложке */ padding: .18em .1em; margin-left: -.1em; } /* ---------- список: главное для читабельности ---------- */ .list { list-style: none; display: grid; gap: clamp(14px, 1.5vw, 26px); max-width: 60ch; } .list li { position: relative; padding-left: 1.5em; font-size: clamp(17.5px, 1.5vw, 24px); line-height: 1.6; font-weight: 700; /* тонкое начертание на тёмном «плывёт» */ color: var(--ink); text-wrap: pretty; } .list li::before { content: ""; position: absolute; left: 0; top: .68em; width: .85em; height: 2px; background: var(--tag-soft); border-radius: 2px; } /* ---------- кружевной разделитель ---------- 🔴 Кружево принадлежит ВТОРОМУ блоку и висит по его верхней кромке, свешиваясь вниз. На первый экран оно не заходит: раньше заходило отрицательным отступом и накрывало собой кнопку на обложке. */ .lace { position: relative; z-index: 3; height: clamp(58px, 8.6vw, 165px); /* высота полосы кружева — с макета */ margin-top: 0; background: url("../img/blocks/lace.webp") repeat-x top center; background-size: auto 100%; pointer-events: none; } /* второй блок начинается сразу под кружевом — свой верхний отступ ему уже не нужен */ .s2 { padding-top: clamp(22px, 2.79vw, 54px); } /* ============================================================ ВАРИАНТ 1 — «по макету» ============================================================ */ body.v1 .persona { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } body.v1 .persona--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } body.v1 .persona--flip .persona__art { order: 2; } body.v1 .persona--flip .persona__body { order: 1; } body.v1 .persona--flip .persona__body { display: flex; flex-direction: column; align-items: flex-end; } body.v1 .persona--flip .persona__name, body.v1 .persona--flip .list { margin-left: auto; } body.v1 .persona:not(.persona--flip) .persona__body { padding-left: clamp(0px, 2vw, 40px); } /* ============================================================ ВАРИАНТ 2 — «с красной волной» ============================================================ */ body.v2 .persona { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } body.v2 .persona--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } body.v2 .persona--flip .persona__art { order: 2; } body.v2 .persona--flip .persona__body { order: 1; } body.v2 .persona__art img { max-width: clamp(260px, 34vw, 540px); } body.v2 .persona__name { font-size: clamp(46px, 6.4vw, 112px); } /* волна на фоне второго персонажа */ body.v2 .wave { display: block; } .wave { display: none; position: absolute; left: -4%; width: 108%; top: 26%; height: 52%; z-index: 1; pointer-events: none; } /* ============================================================ ВАРИАНТ 3 — «карточки», самый читабельный ============================================================ */ body.v3 .persona { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; padding: clamp(24px, 3vw, 54px); border-radius: clamp(18px, 2vw, 34px); background: linear-gradient(180deg, rgba(245, 240, 210, .075), rgba(245, 240, 210, .03)); border: 1px solid rgba(245, 240, 210, .16); box-shadow: 0 24px 60px rgba(0, 0, 0, .32); } body.v3 .persona--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } body.v3 .persona--flip .persona__art { order: 2; } body.v3 .persona--flip .persona__body { order: 1; } body.v3 .persona__name { font-size: clamp(40px, 4.6vw, 78px); } body.v3 .list li { font-size: clamp(18px, 1.55vw, 25px); line-height: 1.62; } body.v3 .persona__art img { max-width: clamp(200px, 24vw, 360px); } body.v3 .h2 { margin-bottom: clamp(34px, 4vw, 70px); } /* ============================================================ БЛОК 3 — этап «профессия» ============================================================ */ .steps { display: grid; gap: clamp(16px, 2vw, 30px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .step { padding: clamp(24px, 2.6vw, 44px); border-radius: clamp(16px, 1.6vw, 26px); background: linear-gradient(180deg, rgba(245, 240, 210, .08), rgba(245, 240, 210, .028)); border: 1px solid rgba(245, 240, 210, .16); } .step__num { font-family: "Aquarelle", cursive; font-size: clamp(44px, 4vw, 72px); line-height: 1; color: var(--tag-soft); margin-bottom: .18em; } .step h3 { font-size: clamp(19px, 1.7vw, 28px); font-weight: 700; color: var(--ink); margin-bottom: .5em; letter-spacing: .01em; } .step p { font-size: clamp(16px, 1.3vw, 21px); line-height: 1.58; font-weight: 700; color: var(--ink-dim); } body.v2 .step { background: linear-gradient(180deg, rgba(141, 2, 38, .3), rgba(108, 0, 6, .12)); border-color: rgba(165, 24, 42, .5); } body.v1 .step { background: none; border: none; padding-left: 0; padding-right: 0; border-top: 2px solid rgba(245, 240, 210, .2); border-radius: 0; } /* ============================================================ БЛОК 4 — что внутри и призыв ============================================================ */ .facts-row { display: grid; gap: clamp(16px, 2vw, 34px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-bottom: clamp(34px, 4vw, 66px); } .fact { text-align: center; } .fact b { display: block; font-family: "Champagne & Limousines", sans-serif; font-weight: 700; font-size: clamp(38px, 4.4vw, 76px); line-height: 1; color: var(--ink); } .fact span { display: block; margin-top: .5em; font-size: clamp(15px, 1.25vw, 20px); font-weight: 700; color: var(--ink-dim); letter-spacing: .03em; } .cta-box { text-align: center; } .cta-box p { font-size: clamp(17px, 1.5vw, 24px); line-height: 1.55; font-weight: 700; color: var(--ink); max-width: 46ch; margin: 0 auto clamp(24px, 3vw, 44px); } .btn { display: inline-flex; align-items: center; justify-content: center; padding: clamp(15px, 1.5vw, 26px) clamp(34px, 4vw, 66px); font-family: "Champagne & Limousines", sans-serif; font-size: clamp(16px, 1.5vw, 25px); font-weight: 700; letter-spacing: .03em; color: var(--navy); background: var(--cream); border-radius: 999px; text-decoration: none; box-shadow: 0 14px 40px rgba(0, 0, 0, .4); transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .4s var(--ease); } .btn:hover { background: #fffdf2; transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); } /* ============================================================ ТЕЛЕФОН И УЗКИЕ ЭКРАНЫ ============================================================ */ @media (max-width: 860px) { body.v1 .persona, body.v2 .persona, body.v3 .persona { grid-template-columns: 1fr; justify-items: start; } body.v1 .persona--flip .persona__art, body.v2 .persona--flip .persona__art, body.v3 .persona--flip .persona__art { order: 0; } body.v1 .persona--flip .persona__body, body.v2 .persona--flip .persona__body, body.v3 .persona--flip .persona__body { order: 1; } body.v1 .persona--flip .persona__name, body.v1 .persona--flip .list li { margin-left: 0; } .persona__art img { max-width: min(62vw, 320px); } body.v2 .wave { display: none; } .h2 { text-align: left; } } /* ============================================================ ПЕРЕКЛЮЧАТЕЛЬ ВАРИАНТОВ (только для показа, в сайт не пойдёт) ============================================================ */ .switch { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(11, 18, 34, .86); border: 1px solid rgba(245, 240, 210, .2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); } .switch button { padding: 8px 18px; border-radius: 999px; cursor: pointer; border: 0; background: transparent; color: var(--cream); font-family: "Champagne & Limousines", sans-serif; font-size: 15px; font-weight: 700; white-space: nowrap; } .switch button[aria-pressed="true"] { background: var(--cream); color: var(--navy); } @media (max-width: 640px) { .switch button { padding: 7px 12px; font-size: 13px; } } /* ============================================================ ВАРИАНТ 4 — «светлые блоки». Ставка на читаемость. Текст не лежит прямо на тёмном фоне, а живёт на светлой плашке: тёмное по светлому читается заметно легче, чем светлое по тёмному — особенно тонким шрифтом и на телефоне. Иллюстрация выходит за плашку, чтобы фигура дышала на синем фоне. Раскладка разведена по трём точкам: телефон / планшет / компьютер. ============================================================ */ /* ---------- ТЕЛЕФОН (по умолчанию) ---------- */ body.v4 .persona { grid-template-columns: 1fr; gap: 0; margin-bottom: clamp(46px, 7vw, 90px); } body.v4 .persona__art { justify-content: flex-start; margin-bottom: -22px; position: relative; z-index: 2; } body.v4 .persona__art img { max-width: min(52vw, 250px); filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .5)); } body.v4 .persona__body { position: relative; padding: clamp(24px, 6vw, 40px) clamp(20px, 5.5vw, 38px); border-radius: clamp(20px, 4vw, 30px); background: linear-gradient(180deg, #fbf7e8 0%, #f1ebd2 100%); box-shadow: 0 26px 60px rgba(0, 0, 0, .45); } body.v4 .persona__name { color: #7d1220; /* вином по светлому — держит фирменный акцент */ font-size: clamp(38px, 11vw, 62px); margin-bottom: clamp(14px, 3vw, 24px); } body.v4 .list { max-width: 64ch; } body.v4 .list li { color: #141c31; /* почти чёрный — максимальный контраст */ font-size: clamp(16.5px, 4.3vw, 20px); line-height: 1.62; } body.v4 .list li::before { background: #a5182a; } /* блок 3 и 4 — на тех же светлых плашках */ body.v4 .step { background: linear-gradient(180deg, #fbf7e8 0%, #f1ebd2 100%); border: 0; box-shadow: 0 20px 46px rgba(0, 0, 0, .38); } body.v4 .step h3 { color: #141c31; } body.v4 .step p { color: #333d58; font-size: clamp(16px, 4.1vw, 20px); } body.v4 .step__num { color: #a5182a; } body.v4 .s4 .wrap { padding: clamp(28px, 7vw, 64px) clamp(22px, 6vw, 60px); border-radius: clamp(22px, 4vw, 36px); background: linear-gradient(180deg, #fbf7e8 0%, #f1ebd2 100%); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); } body.v4 .s4 .h2 { color: #141c31; } body.v4 .fact b { color: #141c31; } body.v4 .fact span { color: #5b6480; } body.v4 .cta-box p { color: #141c31; } body.v4 .btn { background: #7d1220; color: #fbf7e8; box-shadow: 0 14px 34px rgba(125, 18, 32, .45); } body.v4 .btn:hover { background: #a5182a; } /* ---------- ПЛАНШЕТ ---------- */ @media (min-width: 700px) { body.v4 .persona { grid-template-columns: minmax(0, 34%) minmax(0, 66%); align-items: center; } body.v4 .persona__art { margin-bottom: 0; margin-right: -34px; justify-content: center; } body.v4 .persona__art img { max-width: min(30vw, 300px); } body.v4 .persona__body { padding: clamp(30px, 4vw, 46px) clamp(28px, 3.4vw, 44px) clamp(30px, 4vw, 46px) clamp(52px, 6vw, 74px); } body.v4 .persona--flip { grid-template-columns: minmax(0, 66%) minmax(0, 34%); } body.v4 .persona--flip .persona__art { order: 2; margin-right: 0; margin-left: -34px; } body.v4 .persona--flip .persona__body { order: 1; padding: clamp(30px, 4vw, 46px) clamp(52px, 6vw, 74px) clamp(30px, 4vw, 46px) clamp(28px, 3.4vw, 44px); } body.v4 .persona__name { font-size: clamp(46px, 6vw, 74px); } body.v4 .list li { font-size: clamp(17px, 2.1vw, 21px); } } /* ---------- КОМПЬЮТЕР ---------- */ @media (min-width: 1100px) { body.v4 .persona { grid-template-columns: minmax(0, 30%) minmax(0, 70%); } body.v4 .persona--flip { grid-template-columns: minmax(0, 70%) minmax(0, 30%); } body.v4 .persona__art img { max-width: clamp(280px, 24vw, 400px); } body.v4 .persona__art { margin-right: -56px; } body.v4 .persona--flip .persona__art { margin-left: -56px; } body.v4 .persona__body { padding: 54px 56px 54px 96px; } body.v4 .persona--flip .persona__body { padding: 54px 96px 54px 56px; } body.v4 .persona__name { font-size: clamp(56px, 4.6vw, 80px); } body.v4 .list li { font-size: clamp(19px, 1.45vw, 23px); } body.v4 .s4 .wrap { width: min(1100px, 100% - clamp(32px, 6vw, 120px)); } } /* ---------- v4: плашка по размеру текста, а не во всю колонку ---------- Была ошибка: плашка занимала всю колонку сетки и у коротких списков зияла пустотой. Теперь ширину задаёт содержимое, а колонка только ограничивает максимум. */ @media (min-width: 700px) { body.v4 .persona__body { width: fit-content; max-width: 100%; min-width: min(100%, 30rem); /* короткий список тоже должен читаться плашкой, а не бумажкой */ justify-self: start; padding: clamp(26px, 3vw, 38px) clamp(26px, 3vw, 40px) clamp(26px, 3vw, 38px) clamp(46px, 5vw, 66px); } body.v4 .persona--flip .persona__body { justify-self: end; padding: clamp(26px, 3vw, 38px) clamp(46px, 5vw, 66px) clamp(26px, 3vw, 38px) clamp(26px, 3vw, 40px); } body.v4 .list { max-width: 54ch; gap: clamp(11px, 1.1vw, 16px); } body.v4 .persona__name { font-size: clamp(42px, 4vw, 62px); margin-bottom: clamp(12px, 1.4vw, 20px); } } @media (min-width: 1100px) { body.v4 .persona__body { padding: 38px 40px 38px 78px; } body.v4 .persona--flip .persona__body { padding: 38px 78px 38px 40px; } body.v4 .list li { font-size: clamp(18px, 1.35vw, 21px); } } /* ============================================================ ПРАВКИ ПО ЗАМЕЧАНИЯМ (v4) ============================================================ */ /* поля внутри плашки одинаковые слева и справа — раньше одна сторона была шире, чтобы уместить нахлёст фигуры */ @media (min-width: 700px) { body.v4 .persona__body, body.v4 .persona--flip .persona__body { padding: clamp(28px, 3vw, 40px); } body.v4 .persona__art { margin-right: 0; } body.v4 .persona--flip .persona__art { margin-left: 0; } } @media (min-width: 1100px) { body.v4 .persona__body, body.v4 .persona--flip .persona__body { padding: 40px; } } /* плашка чуть прозрачная, с мягким градиентом */ body.v4 .persona__body, body.v4 .step, body.v4 .s4 .wrap, .panel { background: linear-gradient(158deg, rgba(251, 247, 232, .93) 0%, rgba(244, 238, 216, .86) 55%, rgba(236, 228, 199, .78) 100%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border: 1px solid rgba(255, 253, 242, .5); } /* ключевые слова — бордовым */ .key { color: #7d1220; font-weight: 700; } body:not(.v4) .key { color: #f0a5ad; } /* на тёмном фоне бордовый не читается */ /* ============================================================ НОВЫЕ СЕКЦИИ. Оформлены раз и работают при любом варианте: светлые плашки, тёмный текст, бордовые акценты. ============================================================ */ .panel { border-radius: clamp(20px, 2.2vw, 34px); padding: clamp(24px, 3.4vw, 44px); box-shadow: 0 26px 60px rgba(0, 0, 0, .42); color: #141c31; } .panel h3 { font-family: "Aquarelle", cursive; font-weight: 400; color: #7d1220; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; margin-bottom: clamp(14px, 1.6vw, 22px); padding: .1em 0; } .panel .list li { color: #141c31; font-size: clamp(16.5px, 1.35vw, 20px); line-height: 1.6; } .panel .list li::before { background: #a5182a; } .panel .list { max-width: none; gap: clamp(10px, 1vw, 15px); } /* подводка к блоку */ .lead-line { text-align: center; color: var(--ink); font-size: clamp(18px, 1.8vw, 28px); font-weight: 700; line-height: 1.5; max-width: 46ch; margin: clamp(-16px, -1vw, -8px) auto clamp(34px, 4vw, 64px); } /* сетка карточек «тебе с нами, если ты…» */ .grid-2 { display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; } /* маленькая иллюстрация в углу карточки */ .panel { position: relative; overflow: hidden; } .panel__deco { position: absolute; right: clamp(-18px, -1vw, -8px); bottom: clamp(-18px, -1vw, -8px); width: clamp(84px, 9vw, 140px); opacity: .5; pointer-events: none; filter: saturate(.9); } /* плитки «свободы» */ .tiles { display: grid; gap: clamp(12px, 1.6vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .tile { padding: clamp(20px, 2.2vw, 30px); border-radius: clamp(16px, 1.8vw, 24px); background: linear-gradient(180deg, rgba(245, 240, 210, .1), rgba(245, 240, 210, .04)); border: 1px solid rgba(245, 240, 210, .2); color: var(--ink); font-size: clamp(16px, 1.35vw, 21px); font-weight: 700; line-height: 1.45; } .tile b { display: block; color: #f0a5ad; font-size: 1.06em; margin-bottom: .35em; } /* секция с крупной сценой сбоку */ .with-art { display: grid; gap: clamp(24px, 3vw, 56px); align-items: center; grid-template-columns: 1fr; } .with-art__art img { display: block; width: 100%; height: auto; } @media (min-width: 900px) { .with-art { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } .with-art--left { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .with-art--left .with-art__art { order: -1; } } /* финальный блок */ .final { position: relative; overflow: hidden; border-radius: clamp(22px, 2.4vw, 38px); padding: clamp(34px, 5vw, 86px) clamp(24px, 4vw, 70px); text-align: center; background: linear-gradient(180deg, rgba(108, 0, 6, .55), rgba(11, 18, 34, .2)); border: 1px solid rgba(245, 240, 210, .18); } .final__bg { position: absolute; inset: auto 0 0 0; width: 100%; opacity: .55; pointer-events: none; z-index: 0; } .final > * { position: relative; z-index: 1; } .final p { color: var(--ink); font-size: clamp(18px, 2vw, 32px); font-weight: 700; line-height: 1.45; max-width: 34ch; margin: 0 auto clamp(26px, 3vw, 44px); text-wrap: pretty; } /* ---------- телефон ---------- */ @media (max-width: 700px) { .panel__deco { width: 74px; opacity: .38; } .lead-line { text-align: left; } .with-art__art img { max-width: 74vw; margin-inline: auto; } } /* ---------- правки по итогам первого прогона новых секций ---------- */ /* карточки «тебе с нами» — ровно 2 в ряд, а не 3+1 */ @media (min-width: 980px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* декор в углу карточки: аккуратно, не обрезаясь */ .panel__deco { right: clamp(10px, 1.4vw, 20px); bottom: clamp(10px, 1.4vw, 20px); width: clamp(70px, 7vw, 110px); opacity: .34; } /* плитки «свободы» — светлые, как и остальной текст блоков */ .tile { position: relative; background: linear-gradient(158deg, rgba(251,247,232,.92), rgba(240,233,211,.8)); border: 1px solid rgba(255, 253, 242, .5); color: #141c31; padding-right: clamp(58px, 6vw, 84px); } .tile b { color: #7d1220; } .tile__ico { position: absolute; right: clamp(8px, 1vw, 14px); bottom: clamp(8px, 1vw, 14px); width: clamp(42px, 4.4vw, 62px); opacity: .8; pointer-events: none; } /* плитки: две в ряд, иконка меньше и не лезет под текст */ @media (min-width: 620px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tile { padding-right: clamp(64px, 6vw, 92px); } .tile__ico { width: clamp(38px, 3.6vw, 52px); opacity: .75; } /* иллюстрация рядом с текстом не должна перевешивать блок */ .s6 .with-art__art img { max-width: clamp(180px, 22vw, 300px); margin-inline: auto; } .s7 .with-art__art img { max-width: clamp(200px, 26vw, 360px); margin-inline: auto; } /* на телефоне декор в углу карточки уходит: он подкладывался под текст */ @media (max-width: 700px) { .panel__deco { display: none; } } /* ============================================================ ПЕРЕСБОРКА ПО ЗАМЕЧАНИЯМ: заголовки ВНЕ плашек, фигуры внахлёст, крупные насыщенные иллюстрации. ============================================================ */ /* ---------- блок 2: имя персонажа на синем, текст в плашке ---------- */ body.v4 .persona__body { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; width: auto; min-width: 0; max-width: none; } body.v4 .persona__name { color: var(--ink); } /* теперь на синем фоне */ .persona .panel { padding: clamp(22px, 2.6vw, 36px); } /* у прочих вариантов плашки внутри персонажа нет */ body:not(.v4) .persona .panel { background: none; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; } /* фигура стоит впритык и слегка заходит на плашку */ @media (min-width: 700px) { body.v4 .persona { align-items: end; gap: 0; } body.v4 .persona__art { z-index: 2; margin-right: clamp(-70px, -5vw, -30px); } body.v4 .persona--flip .persona__art { margin-right: 0; margin-left: clamp(-70px, -5vw, -30px); } body.v4 .persona__body { z-index: 1; } /* текст отодвинут от края, на который заходит фигура */ body.v4 .persona:not(.persona--flip) .persona .panel, body.v4 .persona:not(.persona--flip) .panel { padding-left: clamp(64px, 6vw, 96px); } body.v4 .persona--flip .panel { padding-right: clamp(64px, 6vw, 96px); padding-left: clamp(22px, 2.6vw, 36px); } } /* ---------- карточки «тебе с нами»: заголовок сверху, плашки вровень ---------- */ .grid-2 { align-items: stretch; } .card { position: relative; display: flex; flex-direction: column; min-width: 0; } .card__title { font-family: "Aquarelle", cursive; font-weight: 400; color: var(--ink); font-size: clamp(32px, 3.6vw, 52px); line-height: 1.1; margin: 0 0 clamp(12px, 1.4vw, 20px); padding: .12em .06em; } .card > .panel { flex: 1; /* низ всех четырёх плашек на одной линии */ display: flex; align-items: flex-start; } .card__art { position: absolute; z-index: 3; pointer-events: none; opacity: 1; /* иллюстрации в полную силу */ filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .45)); } .card__art--girl { right: clamp(-30px, -2vw, -10px); bottom: clamp(-40px, -3vw, -16px); width: clamp(130px, 15vw, 230px); } .card__art--pom { right: clamp(-34px, -2.4vw, -14px); bottom: clamp(-40px, -3vw, -18px); width: clamp(140px, 16vw, 250px); } .card__art--quarter { right: clamp(-26px, -1.8vw, -10px); bottom: clamp(-44px, -3.4vw, -20px); width: clamp(110px, 12vw, 185px); } .card__art--boy { right: clamp(-30px, -2vw, -10px); bottom: clamp(-40px, -3vw, -16px); width: clamp(130px, 15vw, 230px); } /* чтобы текст не уходил под картинку */ .card > .panel .list { padding-right: clamp(70px, 9vw, 150px); } /* ---------- плитки «свободы»: иконки крупнее и в полную силу ---------- */ .tile__ico { width: clamp(56px, 6vw, 86px); opacity: 1; } .tile { padding-right: clamp(78px, 8vw, 116px); } .s6 .with-art { align-items: end; } .s6 .with-art__art img { max-width: clamp(220px, 26vw, 360px); } /* ---------- результат: заголовок вне плашки, два столбца ---------- */ .result { margin-bottom: clamp(44px, 5vw, 92px); } .result:last-child { margin-bottom: 0; } .result__title { margin-bottom: clamp(18px, 2vw, 30px); } .result__stage { display: block; font-family: "Champagne & Limousines", sans-serif; font-weight: 700; color: var(--ink-dim); font-size: clamp(17px, 1.6vw, 25px); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .28em; } .result__name { display: block; font-family: "Aquarelle", cursive; color: var(--ink); font-size: clamp(38px, 4.6vw, 76px); line-height: 1.06; padding: .1em 0; } .result__row { display: grid; gap: clamp(20px, 2.6vw, 44px); align-items: center; } .result__cols { display: grid; gap: clamp(16px, 1.8vw, 26px); } @media (min-width: 900px) { .result__row { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); } .result__row--art-left { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); } .result__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } .result__art img { display: block; width: 100%; height: auto; max-width: clamp(260px, 34vw, 480px); margin-inline: auto; filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .5)); } /* иллюстрация слегка заходит на плашки */ @media (min-width: 900px) { .result__row--art-left .result__art { margin-right: clamp(-60px, -4vw, -20px); z-index: 3; position: relative; } .result__row:not(.result__row--art-left) .result__art { margin-left: clamp(-60px, -4vw, -20px); z-index: 3; position: relative; } } /* ---------- финал: сцена во всю ширину, текст слева ---------- */ .finale { position: relative; width: 100%; margin-top: clamp(40px, 6vw, 110px); background: var(--navy); overflow: hidden; } .finale__bg { display: block; width: 100%; height: auto; } .finale__text { position: absolute; left: clamp(20px, 6vw, 120px); top: 50%; transform: translateY(-50%); width: min(46%, 620px); z-index: 2; } .finale__text p { color: var(--ink); font-family: "Champagne & Limousines", sans-serif; font-weight: 700; font-size: clamp(15px, 1.55vw, 27px); line-height: 1.45; margin-bottom: clamp(14px, 1.8vw, 30px); text-wrap: pretty; } .finale__script { font-family: "Aquarelle", cursive; font-weight: 400; font-size: 2em; line-height: 0; vertical-align: -.12em; margin-right: .1em; } .lace--under { margin-top: -2px; } /* ---------- ТЕЛЕФОН ---------- */ @media (max-width: 700px) { body.v4 .persona { gap: 0; } body.v4 .persona__art { margin: 0 0 -24px; justify-content: flex-start; z-index: 2; } .card__art { width: clamp(96px, 26vw, 150px) !important; right: -8px; bottom: -18px; } .card > .panel .list { padding-right: clamp(56px, 26vw, 110px); } .card__title { font-size: clamp(28px, 8.6vw, 40px); } .result__cols { grid-template-columns: 1fr; } .result__art img { max-width: 70vw; } .finale__bg { min-height: 380px; object-fit: cover; object-position: 78% center; } .finale__text { position: static; transform: none; width: auto; padding: clamp(20px, 6vw, 34px) clamp(20px, 6vw, 34px) clamp(28px, 8vw, 44px); background: linear-gradient(180deg, rgba(11,18,34,0), var(--navy) 18%); margin-top: -60px; } .finale__text p { font-size: clamp(16px, 4.2vw, 20px); } } /* ---------- доводка после пересборки ---------- */ /* фигура должна касаться плашки, а не висеть посреди своей колонки */ @media (min-width: 700px) { body.v4 .persona__art { justify-content: flex-end; } body.v4 .persona--flip .persona__art { justify-content: flex-start; } } /* все четыре карточки одной высоты, а не только внутри своего ряда */ @media (min-width: 980px) { .grid-2 { grid-auto-rows: 1fr; } } /* финал: текст выше и крупнее — в пустой части сцены */ .finale__text { top: 40%; width: min(48%, 660px); } .finale__text p { font-size: clamp(15px, 1.75vw, 30px); } /* мобильный кегль финала — правило идёт последним, иначе его перебивает десктопный clamp выше по файлу */ @media (max-width: 700px) { .finale__text p { font-size: clamp(16px, 4.3vw, 21px); } .finale__text { width: auto; } } /* ============================================================ ПРАВКИ: сливочные плашки, без теней под иллюстрациями, плотнее строки, зерно на фоне. ============================================================ */ /* 1. цвет плашек — сливочный, как текст и кнопка на обложке */ body.v4 .persona__body, body.v4 .step, body.v4 .s4 .wrap, .panel, .card > .panel { background: linear-gradient(158deg, rgba(247, 242, 216, .97) 0%, rgba(241, 235, 202, .93) 55%, rgba(233, 226, 190, .88) 100%); border: 1px solid rgba(255, 253, 242, .55); box-shadow: 0 14px 34px rgba(0, 0, 0, .22); /* мягче, чтобы не темнило вокруг */ } /* 2. иллюстрации ложатся прямо поверх, без теней */ .persona__art img, .card__art, .result__art img, .tile__ico, .with-art__art img, .panel__deco { filter: none; } /* 3. строки внутри плашек плотнее, но не тесно */ .panel .list, .card > .panel .list { gap: clamp(8px, .8vw, 12px); } .panel .list li, .card > .panel .list li { line-height: 1.48; } .persona .panel .list { gap: clamp(9px, .9vw, 14px); } .persona .panel .list li { line-height: 1.5; } /* 4. имя персонажа не должно прятаться под фигурой */ @media (min-width: 700px) { body.v4 .persona:not(.persona--flip) .persona__name { padding-left: clamp(64px, 6vw, 96px); } body.v4 .persona--flip .persona__name { padding-right: clamp(64px, 6vw, 96px); } .persona { margin-bottom: clamp(30px, 3vw, 56px); } } /* 5. четвертинка граната — по диагонали, верхушкой к половинке */ .card__art--quarter { transform: rotate(34deg); transform-origin: 50% 60%; } /* 6. плитки: иконки крупнее и частично за краем */ .tile { overflow: visible; } .tile__ico { position: absolute; right: clamp(-16px, -1.2vw, -8px); bottom: clamp(-18px, -1.4vw, -8px); width: clamp(74px, 8vw, 112px); opacity: 1; } .tiles { row-gap: clamp(22px, 2.4vw, 34px); } /* две плитки из четырёх — тёмное стекло вместо сливочного */ .tile--glass { background: linear-gradient(158deg, rgba(146, 20, 40, .30), rgba(11, 18, 34, .55)); border: 1px solid rgba(245, 240, 210, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--ink); } .tile--glass b { color: #f3b8bf; } /* 8. «После этапа N» стоит над названием, с отступом на первую букву */ .result__stage { padding-left: .9em; } /* 11. название курса — Aquarelle обычного начертания, без него h3 включал синтетический жирный */ .result__name, .card__title, .persona__name, .panel h3 { font-weight: 400; } /* 9. результат: два блока друг под другом, а не колонками */ @media (min-width: 900px) { .result__cols { grid-template-columns: 1fr; } } .result__cols > .panel { min-height: 0; } /* 10. ракушка и лошадь крупнее */ .result__art img { max-width: clamp(300px, 40vw, 620px); } /* 13. финал: сцена крупнее; при обрезке жертвуем ЛЕВОЙ частью, правая с девушкой остаётся целой */ .finale__bg { width: 118%; max-width: none; margin-left: -18%; } /* 14. лёгкое зерно — только на тёмном фоне, поверх ничего не лежит */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero, .section, .finale, .lace { position: relative; z-index: 1; } /* 🔴 .switch тут быть не должно: правило перебивало position:fixed и панель превью вставала в поток, сдвигая первый экран вниз на свою высоту */ /* ============================================================ КВЕСТ, АВТОР, ГАЛЕРЕЯ ============================================================ */ /* ---------- квест ---------- */ .quest { display: grid; gap: clamp(20px, 3vw, 44px); align-items: center; } .quest__text .panel p { color: #141c31; font-size: clamp(16.5px, 1.4vw, 21px); line-height: 1.5; font-weight: 700; } .quest__text .panel p + p { margin-top: .8em; } .quest__house img, .quest__heroes img { display: block; width: 100%; height: auto; } .quest__heroes { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(12px, 1.6vw, 26px); align-items: end; } @media (min-width: 900px) { .quest { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "text house" "heroes heroes"; } .quest__text { grid-area: text; } .quest__house { grid-area: house; } .quest__heroes { grid-area: heroes; grid-template-columns: 1.4fr .8fr; align-items: end; margin-top: clamp(-40px, -3vw, -10px); } .quest__tea { max-width: 320px; margin-left: auto; } } /* ---------- автор ---------- */ .author { display: grid; gap: clamp(22px, 3vw, 56px); align-items: center; } .author__art img { display: block; width: 100%; height: auto; border-radius: clamp(18px, 2vw, 30px); } .author__label { font-family: "Champagne & Limousines", sans-serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); font-size: clamp(14px, 1.2vw, 19px); margin-bottom: .5em; } .author__name { font-family: "Aquarelle", cursive; font-weight: 400; color: var(--ink); font-size: clamp(52px, 6vw, 104px); line-height: 1; padding: .08em 0; } .author__nick { font-family: "Champagne & Limousines", sans-serif; font-weight: 700; color: #f0a5ad; font-size: clamp(16px, 1.4vw, 22px); letter-spacing: .06em; margin: .1em 0 clamp(16px, 1.8vw, 26px); } @media (min-width: 900px) { .author { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } /* ---------- галерея ---------- */ .g-label { color: var(--ink-dim); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: clamp(13px, 1.1vw, 17px); margin: clamp(26px, 3vw, 48px) 0 clamp(12px, 1.2vw, 18px); } .g-hint { color: var(--ink-dim); font-size: 15px; margin-top: 18px; opacity: .75; } .g-rail { /* 🔴 без min-width:0 лента-скроллер растягивает страницу и рвёт мобильную вёрстку */ min-width: 0; max-width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(210px, 24vw, 320px); gap: clamp(12px, 1.4vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; /* следующая карточка выглядывает — видно, что лента продолжается */ scroll-padding-left: clamp(12px, 1.4vw, 20px); } .g-rail::-webkit-scrollbar { height: 6px; } .g-rail::-webkit-scrollbar-thumb { background: rgba(245,240,210,.35); border-radius: 4px; } .g-card { scroll-snap-align: start; margin: 0; border-radius: clamp(12px, 1.2vw, 18px); overflow: hidden; background: rgba(245, 240, 210, .06); } .g-card img { display: block; width: 100%; height: clamp(160px, 18vw, 240px); object-fit: cover; } .g-rail--two { grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: clamp(190px, 21vw, 280px); } .g-rail--two .g-card:nth-child(even) { margin-top: clamp(10px, 1.2vw, 20px); } .g-hero { display: grid; gap: clamp(12px, 1.4vw, 20px); } .g-hero__big { border-radius: clamp(14px, 1.4vw, 22px); overflow: hidden; background: rgba(245,240,210,.06); } .g-hero__big img { display: block; width: 100%; height: clamp(260px, 34vw, 520px); object-fit: cover; } .g-hero__thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(74px, 8vw, 110px); gap: 10px; overflow-x: auto; padding-bottom: 8px; } .g-thumb { padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; overflow: hidden; line-height: 0; } .g-thumb img { width: 100%; height: clamp(56px, 6vw, 82px); object-fit: cover; } .g-thumb.is-on { border-color: var(--cream); } .g-rail--fan { padding-top: 18px; } .g-card--fan { transition: transform .35s var(--ease); } .g-card--fan:nth-child(odd) { transform: rotate(-2.2deg); } .g-card--fan:nth-child(even) { transform: rotate(2.2deg) translateY(10px); } .g-card--fan:hover { transform: rotate(0) translateY(-6px); } /* ---------- результаты по пунктам (переключатель в демо-панели) ---------- */ body.micro .result__cols > .panel { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; } body.micro .result__cols .list { display: grid; gap: clamp(10px, 1vw, 16px); } @media (min-width: 760px) { body.micro .result__cols .list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.micro .result__cols .list li { padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 22px) clamp(14px, 1.4vw, 20px) clamp(34px, 3vw, 44px); border-radius: clamp(12px, 1.2vw, 18px); background: linear-gradient(158deg, rgba(247,242,216,.97), rgba(235,228,193,.9)); border: 1px solid rgba(255, 253, 242, .55); } body.micro .result__cols .list li::before { left: clamp(14px, 1.3vw, 18px); top: 1.15em; } /* ---------- телефон ---------- */ @media (max-width: 700px) { .quest__heroes { grid-template-columns: 1fr 1fr; } .author__art img { max-height: 60vh; object-fit: cover; object-position: 50% 20%; } .g-rail { grid-auto-columns: 68vw; } .g-rail--two { grid-auto-columns: 56vw; } .g-card img { height: 42vw; } } /* ============================================================ СВЕТЛАЯ ТЕМА САЙТА (по референсу) Первый экран остаётся тёмным — он сам себе фон. Ниже фон светлый, а сразу под кружевом лёгкое затемнение, иначе белое кружево на светлом пропадает. ============================================================ */ :root { --paper: #e4ddd7; /* фон сайта — замерено с макета */ --paper-soft: #f3efe8; /* плашки */ --ink-dark: #1b2338; /* основной текст */ --ink-mid: #4a5165; --wine-line: #7d1220; } body.light-theme { background: var(--paper); } body.light-theme::before { opacity: .04; } /* зерно на светлом заметнее — приглушаем */ /* затемнение под кружевом */ body.light-theme .lace + .section::before, body.light-theme .lace + .light::before { content: ""; position: absolute; inset: 0 0 auto 0; height: clamp(120px, 16vw, 260px); background: linear-gradient(180deg, rgba(150, 140, 128, .45), rgba(233, 227, 219, 0)); pointer-events: none; z-index: 0; } /* секции, которые ещё не переделаны, остаются на своём тёмном фоне, чтобы страница не выглядела сломанной, пока дойдём до них */ body.light-theme .light .h2, body.light-theme .light .p-scene__name { color: var(--ink-dark); } /* ---------- светлые разделы: тот же фон и те же плашки, что во втором блоке ---------- Плашка — ровная заливка #f3eeea без рамки, тени и подложек: так же, как у пронумерованных блоков в «Для кого это обучение». */ body.light-theme .light .card__title, body.light-theme .light .lead-line, body.light-theme .light .list li, body.light-theme .light .tile { color: var(--ink-dark); } body.light-theme .light .panel, body.light-theme .light .tile, body.light-theme .light .tile--glass { background: #f3eeea; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } body.light-theme .light .tile b, body.light-theme .light .tile--glass b { color: var(--wine-line); } /* иллюстрации без тёмной тени — на светлом она читается грязью */ body.light-theme .light .card__art, body.light-theme .light .with-art__art img { filter: none; } /* блок «Вместе оба этапа дают…» на светлом */ body.light-theme .finale.light { background: var(--paper); } body.light-theme .finale.light .finale__text p { color: var(--ink-dark); } body.light-theme .finale.light .finale__script { color: var(--wine-line); } @media (max-width: 700px) { body.light-theme .finale.light .finale__text { background: linear-gradient(180deg, rgba(228,221,215,0), var(--paper) 18%); } } /* ============================================================ СЦЕНА ПЕРСОНАЖА: фигура по центру, пронумерованные заметки вокруг, бордовая линия прошивает композицию. ============================================================ */ .p-scene { position: relative; margin-bottom: clamp(40px, 5vw, 90px); } .p-scene:last-of-type { margin-bottom: 0; } .p-scene__name { font-family: "Aquarelle", cursive; font-weight: 400; color: var(--ink-dark); font-size: clamp(38px, 5vw, 88px); line-height: 1.05; padding: .1em 0; margin-left: clamp(0px, 8vw, 150px); margin-bottom: clamp(-10px, -1vw, 0px); position: relative; z-index: 3; } .p-scene--6 .p-scene__name, .p-scene--2 .p-scene__name { margin-left: clamp(0px, 4vw, 90px); } .p-scene__stage { position: relative; } .p-scene--4 .p-scene__stage { aspect-ratio: 1440 / 760; } .p-scene--6 .p-scene__stage { aspect-ratio: 1440 / 860; } .p-scene--2 .p-scene__stage { aspect-ratio: 1440 / 620; } /* линия — ровно та форма, что на референсе, тянется во всю ширину */ .p-line { position: absolute; left: calc(50% - 50vw); width: 100vw; top: 0; height: 100%; overflow: visible; z-index: 0; pointer-events: none; } .p-line path { fill: none; stroke: var(--wine-line); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; } /* фигура — по центру, стоит на гребне линии */ .p-scene__hero { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16%; z-index: 2; } .p-scene__hero img { display: block; height: clamp(190px, 26vw, 400px); width: auto; filter: none; } /* заметка */ .p-note { position: absolute; z-index: 2; width: clamp(150px, 19vw, 268px); padding: clamp(10px, 1.1vw, 16px) clamp(12px, 1.2vw, 18px); border-radius: clamp(10px, 1vw, 15px); background: linear-gradient(158deg, rgba(250, 247, 241, .97), rgba(240, 234, 224, .93)); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 10px 24px rgba(80, 60, 50, .12); } .p-note p { color: var(--ink-dark); font-family: "Champagne & Limousines", sans-serif; font-weight: 700; font-size: clamp(11px, 1.02vw, 16px); line-height: 1.4; text-wrap: pretty; } .p-note__num { position: absolute; left: clamp(-26px, -2vw, -14px); top: clamp(-22px, -1.8vw, -12px); font-family: "Aquarelle", cursive; color: var(--wine-line); font-size: clamp(30px, 3.4vw, 58px); line-height: 1; } /* раскладка на 4 заметки — как на референсе */ .p-scene--4 .p-note--a { left: 2%; top: 30%; } .p-scene--4 .p-note--b { left: 8%; top: 56%; } .p-scene--4 .p-note--c { left: 64%; top: 24%; } .p-scene--4 .p-note--d { left: 59%; top: 52%; } /* на 6 заметок — по три с каждой стороны */ .p-scene--6 .p-note--a { left: 1%; top: 18%; } .p-scene--6 .p-note--b { left: 6%; top: 44%; } .p-scene--6 .p-note--c { left: 2%; top: 68%; } .p-scene--6 .p-note--d { left: 66%; top: 16%; } .p-scene--6 .p-note--e { left: 71%; top: 42%; } .p-scene--6 .p-note--f { left: 64%; top: 68%; } /* на 2 заметки */ .p-scene--2 .p-note--a { left: 4%; top: 34%; } .p-scene--2 .p-note--b { left: 64%; top: 30%; } /* ---------- телефон: складываем в колонку ---------- */ @media (max-width: 860px) { .p-scene__stage { aspect-ratio: auto !important; display: grid; gap: clamp(14px, 4vw, 22px); } .p-line { display: none; } .p-scene__hero { position: static; transform: none; justify-self: center; } .p-scene__hero img { height: clamp(200px, 52vw, 300px); } .p-note { position: static; width: auto; padding-left: clamp(34px, 9vw, 44px); } .p-note__num { left: clamp(8px, 2.4vw, 12px); top: 50%; transform: translateY(-50%); font-size: clamp(26px, 8vw, 36px); } .p-note p { font-size: clamp(14px, 3.8vw, 17px); } .p-scene__name { margin-left: 0; } } /* ---------- геометрия сцены: линия внизу, фигура стоит на её гребне ---------- */ .p-scene--6 .p-scene__stage { aspect-ratio: 1440 / 900; } .p-scene--2 .p-scene__stage { aspect-ratio: 1440 / 640; } /* низ фигуры совпадает с гребнем линии (0.789 высоты сцены) */ .p-scene__hero { bottom: 21%; } .p-scene--4 .p-note--a { left: 1%; top: 34%; } .p-scene--4 .p-note--b { left: 8%; top: 60%; } .p-scene--4 .p-note--c { left: 65%; top: 28%; } .p-scene--4 .p-note--d { left: 61%; top: 56%; } .p-scene--6 .p-note--a { left: 0%; top: 14%; } .p-scene--6 .p-note--b { left: 5%; top: 38%; } .p-scene--6 .p-note--c { left: 1%; top: 62%; } .p-scene--6 .p-note--d { left: 68%; top: 12%; } .p-scene--6 .p-note--e { left: 72%; top: 36%; } .p-scene--6 .p-note--f { left: 66%; top: 60%; } .p-scene--2 .p-note--a { left: 3%; top: 40%; } .p-scene--2 .p-note--b { left: 65%; top: 36%; } /* ---------- линия проходит ЗА фигурой и подпирает заметки снизу ---------- */ .p-scene__hero { bottom: 8%; z-index: 2; } .p-line { z-index: 0; } .p-note { z-index: 3; } .p-scene--4 .p-note--a { left: 1%; top: 34%; } .p-scene--4 .p-note--b { left: 8%; top: 56%; } .p-scene--4 .p-note--c { left: 65%; top: 30%; } .p-scene--4 .p-note--d { left: 60%; top: 52%; } .p-scene--6 .p-note--a { left: 0%; top: 12%; } .p-scene--6 .p-note--b { left: 5%; top: 36%; } .p-scene--6 .p-note--c { left: 1%; top: 60%; } .p-scene--6 .p-note--d { left: 68%; top: 10%; } .p-scene--6 .p-note--e { left: 72%; top: 34%; } .p-scene--6 .p-note--f { left: 66%; top: 58%; } .p-scene--2 .p-note--a { left: 3%; top: 36%; } .p-scene--2 .p-note--b { left: 65%; top: 30%; } /* ============================================================ РАСКЛАДКА 1 В 1 С МАКЕТОМ Координаты сняты с присланного макета (кадр 1081×499 на блок): заметки, фигура и линия стоят в тех же долях кадра. Линия проходит ЗА фигурой — фигура выше по слою. ============================================================ */ .p-scene--4 .p-scene__stage, .p-scene--6 .p-scene__stage, .p-scene--2 .p-scene__stage { aspect-ratio: 1081 / 499; } .p-line { left: 0; width: 100%; } /* кадр линии = кадр сцены, как в макете */ .p-line path { stroke-width: 2.5; } .p-scene__name { position: absolute; left: 18%; top: -4%; margin: 0; z-index: 4; font-size: clamp(30px, 4.6vw, 74px); } .p-scene--6 .p-scene__name { left: 9%; } .p-scene--2 .p-scene__name { left: 17%; } .p-scene__hero { bottom: 11%; z-index: 2; } .p-scene__hero img { height: auto; width: clamp(120px, 21vw, 300px); } .p-note { width: auto; padding: clamp(8px, .85vw, 13px) clamp(10px, 1vw, 15px); border-radius: clamp(8px, .8vw, 12px); } .p-note p { font-size: clamp(9.5px, .92vw, 15px); line-height: 1.38; } .p-note__num { left: clamp(-22px, -1.7vw, -12px); top: clamp(-20px, -1.6vw, -11px); font-size: clamp(26px, 3vw, 50px); } /* «Новичок» — ровно как в макете */ .p-scene--4 .p-scene__hero { left: 44%; } .p-scene--4 .p-note--a { left: 4.4%; top: 32.7%; width: 23.0%; } .p-scene--4 .p-note--b { left: 11.9%; top: 58.1%; width: 20.6%; } .p-scene--4 .p-note--c { left: 71.4%; top: 25.5%; width: 20.4%; } .p-scene--4 .p-note--d { left: 65.5%; top: 57.7%; width: 24.9%; } /* «Иллюстратор без системы» — фигура справа, шесть заметок слева и по центру */ .p-scene--6 .p-scene__hero { left: 74%; } .p-scene--6 .p-note--a { left: 4%; top: 24%; width: 21%; } .p-scene--6 .p-note--b { left: 30%; top: 20%; width: 20%; } .p-scene--6 .p-note--c { left: 10%; top: 47%; width: 20%; } .p-scene--6 .p-note--d { left: 34%; top: 45%; width: 21%; } .p-scene--6 .p-note--e { left: 2%; top: 71%; width: 22%; } .p-scene--6 .p-note--f { left: 27%; top: 70%; width: 20%; } /* «Традиционный художник» — фигура слева, две заметки справа */ .p-scene--2 .p-scene__hero { left: 24%; } .p-scene--2 .p-note--a { left: 40%; top: 60%; width: 22%; } .p-scene--2 .p-note--b { left: 63%; top: 34%; width: 24%; } @media (max-width: 860px) { .p-scene__name { position: static; } .p-scene__hero { position: static; transform: none; } .p-note { width: auto !important; left: auto !important; top: auto !important; } } /* ============================================================ Линия — ПРИСЛАННЫЙ ФАЙЛ, не нарисованный мной путь. Пропорция картинки сохраняется, ширина = ширине сцены, вертикальное положение — как в макете (ink лежит на 13…69% кадра). ============================================================ */ img.p-line { position: absolute; left: 0; width: 100%; top: 13%; height: auto; z-index: 0; pointer-events: none; } /* ---------- масштаб как в макете ---------- */ .p-scene__stage { container-type: inline-size; } /* фигура: в макете её высота — 77% высоты кадра, и она ПО ЦЕНТРУ */ .p-scene--4 .p-scene__hero, .p-scene--6 .p-scene__hero, .p-scene--2 .p-scene__hero { left: 50%; bottom: 11%; } .p-scene__hero img { height: 77cqw * 0; } /* перебивается ниже */ .p-scene--4 .p-scene__hero img, .p-scene--6 .p-scene__hero img, .p-scene--2 .p-scene__hero img { width: auto; height: 35.5cqw; /* 77% высоты кадра, а кадр = 0.4616 ширины */ max-width: none; } /* текст в заметках — как в макете, но чуть крупнее для чтения */ .p-note p { font-size: 1.22cqw; line-height: 1.4; } .p-note__num{ font-size: 3.3cqw; left: -2cqw; top: -1.8cqw; } .p-note { padding: 1cqw 1.2cqw; border-radius: .9cqw; } .p-scene__name { font-size: 5.4cqw; } /* ---------- «Иллюстратор без системы»: фигура по центру, 6 заметок ---------- */ .p-scene--6 .p-note--a { left: 3%; top: 12%; width: 22%; } .p-scene--6 .p-note--b { left: 3%; top: 40%; width: 22%; } .p-scene--6 .p-note--c { left: 3%; top: 68%; width: 22%; } .p-scene--6 .p-note--d { left: 72%; top: 12%; width: 24%; } .p-scene--6 .p-note--e { left: 72%; top: 40%; width: 24%; } .p-scene--6 .p-note--f { left: 72%; top: 68%; width: 24%; } /* ---------- «Традиционный художник»: фигура по центру, 2 заметки ---------- */ .p-scene--2 .p-note--a { left: 4%; top: 44%; width: 24%; } .p-scene--2 .p-note--b { left: 68%; top: 34%; width: 25%; } @media (max-width: 860px) { img.p-line { display: none; } .p-note p { font-size: clamp(14px, 3.8vw, 17px); } .p-note__num { font-size: clamp(26px, 8vw, 36px); left: 10px; top: 50%; } .p-scene__name { font-size: clamp(34px, 10vw, 52px); } .p-scene--4 .p-scene__hero img, .p-scene--6 .p-scene__hero img, .p-scene--2 .p-scene__hero img { height: clamp(210px, 55vw, 320px); } } /* ============================================================ ПЛОТНАЯ КОМПОЗИЦИЯ ПО РЕФЕРЕНСУ Меньше пустоты, крупнее фигура, блоки и шрифт. Цифры лежат ПОВЕРХ блоков. Линия — присланный файл, во всю ширину экрана, утолщённый, проходит через 1, 2, фигуру, 3, 4. ============================================================ */ /* затемнение начинается ПОД кружевом и продолжается вниз одним куском */ .lace { background-color: transparent; background-image: url("../img/blocks/lace.webp"); } /* 🔴 Под кружевом НЕ должно быть резкой границы цвета: затемнение начинается там же, где начинается кружево, и мягко уходит в обычный фон ниже. */ body.light-theme .lace { background-image: url("../img/blocks/lace.webp"), linear-gradient(180deg, var(--paper) 0%, #d5c8bf 100%); background-repeat: repeat-x, no-repeat; background-position: top center, top center; background-size: auto 100%, 100% 100%; } body.light-theme .lace + .section::before, body.light-theme .lace + .light::before { /* глубина и длина затемнения сняты с макета: тёмное сразу под кружевом (#d5c8bf), держится, потом мягко уходит в фон на ~33% ширины страницы */ height: 36vw; background: linear-gradient(180deg, #d5c8bf 0%, #d5c8bf 20%, rgba(228,221,215,0) 100%); } /* сцена плотнее */ .p-scene--4 .p-scene__stage { aspect-ratio: 1440 / 640; } .p-scene--6 .p-scene__stage { aspect-ratio: 1440 / 760; } .p-scene--2 .p-scene__stage { aspect-ratio: 1440 / 560; } .p-scene { margin-bottom: clamp(24px, 2.6vw, 52px); } /* линия: во всю ширину ЭКРАНА, толще, проходит через всю композицию */ img.p-line { left: calc(50% - 50vw); width: 100vw; top: 16%; height: auto; z-index: 0; } /* фигура крупнее и плотно в кадре */ .p-scene--4 .p-scene__hero img, .p-scene--6 .p-scene__hero img, .p-scene--2 .p-scene__hero img { height: 39cqw; } .p-scene__hero { bottom: 4%; } /* заголовок — рядом с фигурой, крупный, чуть выше неё */ .p-scene__name { left: 22%; top: -7%; font-size: 7.4cqw; } .p-scene--6 .p-scene__name { left: 14%; } .p-scene--2 .p-scene__name { left: 20%; } /* блоки крупнее, цифры поверх них */ .p-note { width: 26%; padding: 1.5cqw 1.7cqw; border-radius: 1.1cqw; } .p-note p { font-size: 1.52cqw; line-height: 1.42; } .p-note__num { z-index: 5; left: -1.4cqw; top: -3.4cqw; font-size: 4.6cqw; } /* «Новичок»: 1 и 2 слева на равном расстоянии, 3 и 4 справа */ .p-scene--4 .p-note--a { left: 2%; top: 30%; } .p-scene--4 .p-note--b { left: 2%; top: 62%; } .p-scene--4 .p-note--c { left: 72%; top: 22%; } .p-scene--4 .p-note--d { left: 72%; top: 58%; } .p-scene--6 .p-note--a { left: 1%; top: 10%; width: 25%; } .p-scene--6 .p-note--b { left: 1%; top: 40%; width: 25%; } .p-scene--6 .p-note--c { left: 1%; top: 70%; width: 25%; } .p-scene--6 .p-note--d { left: 73%; top: 10%; width: 26%; } .p-scene--6 .p-note--e { left: 73%; top: 40%; width: 26%; } .p-scene--6 .p-note--f { left: 73%; top: 70%; width: 26%; } .p-scene--2 .p-note--a { left: 2%; top: 46%; width: 27%; } .p-scene--2 .p-note--b { left: 71%; top: 34%; width: 27%; } /* сцены не должны налезать на следующий заголовок */ .p-scene--4 .p-scene__stage { aspect-ratio: 1440 / 700; } .p-scene--6 .p-scene__stage { aspect-ratio: 1440 / 900; } .p-scene--2 .p-scene__stage { aspect-ratio: 1440 / 600; } .p-scene { margin-bottom: clamp(34px, 4vw, 76px); } .p-scene--4 .p-note--a { top: 28%; } .p-scene--4 .p-note--b { top: 58%; } .p-scene--4 .p-note--c { top: 22%; } .p-scene--4 .p-note--d { top: 54%; } .p-scene--6 .p-note--a { top: 8%; } .p-scene--6 .p-note--b { top: 38%; } .p-scene--6 .p-note--c { top: 68%; } .p-scene--6 .p-note--d { top: 8%; } .p-scene--6 .p-note--e { top: 38%; } .p-scene--6 .p-note--f { top: 68%; } /* ============================================================ ФИНАЛЬНАЯ РАСКЛАДКА — СНЯТА С РЕФЕРЕНСА IMG_4254 (2944 px ширины) Все величины в долях кадра, поэтому пропорции держатся на любом экране. Линии — присланные файлы IMG_4248/4249/4250: они лежали на той же канве, что и референс, поэтому их вертикальное место вычислено точно. ============================================================ */ /* пропорции кадров как в референсе */ .p-scene--4 .p-scene__stage { aspect-ratio: 2944 / 1080; } /* 2.726 */ .p-scene--6 .p-scene__stage { aspect-ratio: 2944 / 1210; } /* 2.433 */ .p-scene--2 .p-scene__stage { aspect-ratio: 2944 / 860; } /* 3.423 */ .p-scene { margin-bottom: clamp(30px, 3.6vw, 74px); } /* линии: во всю ширину страницы, вертикаль — по замеру с канвы */ img.p-line { left: calc(50% - 50vw); width: 100vw; height: auto; z-index: 0; } .p-scene--4 img.p-line { top: 13.5%; } .p-scene--6 img.p-line { top: 5.9%; } .p-scene--2 img.p-line { top: 33.4%; } /* фигуры */ .p-scene__hero { transform: translateX(-50%); } .p-scene--4 .p-scene__hero { left: 46.5%; bottom: 13.7%; } .p-scene--6 .p-scene__hero { left: 48%; bottom: 19.3%; } .p-scene--2 .p-scene__hero { left: 49%; bottom: 10.0%; } .p-scene--4 .p-scene__hero img { height: 73.6cqw * 0; } /* перебивается ниже */ .p-scene--4 .p-scene__hero img { height: 27.0cqw; } /* 73.6% высоты кадра */ .p-scene--6 .p-scene__hero img { height: 26.0cqw; } /* 63.3% высоты кадра */ .p-scene--2 .p-scene__hero img { height: 24.5cqw; } /* 83.7% высоты кадра */ /* заголовки: в сценах 2 и 3 они разнесены по сторонам, как в референсе */ .p-scene__name { position: absolute; margin: 0; z-index: 4; font-size: 5.4cqw; } .p-scene--4 .p-scene__name { left: 20.9%; top: 0%; } .p-scene--6 .p-name--l { left: 18.1%; top: 4%; } .p-scene--6 .p-name--r { left: 60.5%; top: 4%; } .p-scene--2 .p-name--l { left: 16.5%; top: 2%; } .p-scene--2 .p-name--r { left: 62.5%; top: 2%; } /* плашки — ровно по замеру референса */ .p-note { padding: 1.15cqw 1.3cqw; border-radius: 1cqw; } .p-note p { font-size: 1.12cqw; line-height: 1.4; } .p-note__num { font-size: 3.2cqw; left: -2.1cqw; top: -2.4cqw; z-index: 5; } .p-scene--4 .p-note--a { left: 13.2%; top: 30.4%; width: 18.5%; } .p-scene--4 .p-note--b { left: 19.2%; top: 56.1%; width: 16.4%; } .p-scene--4 .p-note--c { left: 67.5%; top: 23.0%; width: 16.4%; } .p-scene--4 .p-note--d { left: 62.6%; top: 55.7%; width: 20.1%; } .p-scene--6 .p-note--a { left: 13.8%; top: 29.8%; width: 16.4%; } .p-scene--6 .p-note--b { left: 18.1%; top: 52.6%; width: 15.9%; } .p-scene--6 .p-note--c { left: 21.1%; top: 72.9%; width: 15.8%; } .p-scene--6 .p-note--d { left: 61.1%; top: 72.9%; width: 16.4%; } .p-scene--6 .p-note--e { left: 64.7%; top: 54.0%; width: 18.5%; } .p-scene--6 .p-note--f { left: 68.8%; top: 29.8%; width: 16.4%; } .p-scene--2 .p-note--a { left: 23.2%; top: 57.2%; width: 20.5%; } .p-scene--2 .p-note--b { left: 64.1%; top: 56.5%; width: 15.6%; } @media (max-width: 860px) { .p-scene__name { position: static; font-size: clamp(32px, 9.5vw, 50px); } .p-name--r { display: none; } .p-scene__hero { position: static; transform: none; } .p-note { width: auto !important; left: auto !important; top: auto !important; padding: 14px 16px 14px 44px; } .p-note p { font-size: clamp(14px, 3.8vw, 17px); } .p-note__num { left: 12px; top: 50%; transform: translateY(-50%); font-size: clamp(26px, 8vw, 34px); } } /* ---------- МОИ РАБОТЫ ---------- Компьютер — веер: карточки чуть повёрнуты, но по вертикали НЕ гуляют, лента мотается только влево-вправо. Телефон — крупный кадр и миниатюры. */ .g-desktop { display: grid; } .g-mobile { display: none; } @media (max-width: 699px) { .g-desktop { display: none; } .g-mobile { display: grid; } } .g-card--fan:nth-child(even) { transform: rotate(2.2deg); } /* без вертикального сдвига */ .g-card--fan:hover { transform: rotate(0); } /* тоже без подъёма */ .g-rail--fan { align-items: center; padding-top: 22px; padding-bottom: 22px; } /* на светлом фоне у карточек своя мягкая подложка */ body.light-theme .light .g-card { background: rgba(255,255,255,.5); } body.light-theme .light .g-thumb { border-color: rgba(27,35,56,.18); } body.light-theme .light .g-hint, body.light-theme .light .g-label { color: var(--ink-mid); } /* работы Аланы — вертикальные, карточкам нужна своя высота */ .s11b .g-rail { grid-auto-columns: clamp(170px, 19vw, 260px); } .s11b .g-card img { height: clamp(230px, 26vw, 360px); } /* ---------- доводка по замечаниям ---------- */ /* 3. плитки: иконки визуально одного размера — стакан меньше, цветы чуть крупнее */ .tile__ico[src*="drink"] { width: clamp(40px, 4.2vw, 58px); } .tile__ico[src*="tulips"] { width: clamp(84px, 9vw, 126px); } /* 6. «Вместе оба этапа…» стоит ближе к результатам, но не впритык */ .finale.light { margin-top: clamp(18px, 2.2vw, 44px); } /* 10. у лент прокрутки не должно быть полос прокрутки */ .g-rail, .stu, .g-hero__thumbs { scrollbar-width: none; -ms-overflow-style: none; } .g-rail::-webkit-scrollbar, .stu::-webkit-scrollbar, .g-hero__thumbs::-webkit-scrollbar { display: none; } /* 8-9-14. заголовки галерей: тем же цветом и шрифтом, что подписи разделов */ body.light-theme .s11 .h2, body.light-theme .s11b .h2, body.light-theme .s-stu .h2 { font-family: "Champagne & Limousines", sans-serif; font-weight: 700; color: #571d17; font-size: clamp(19px, 1.94vw, 34px); letter-spacing: .01em; margin-bottom: clamp(16px, 1.8vw, 30px); } body.light-theme .s11 .h2 .script, body.light-theme .s11b .h2 .script, body.light-theme .s-stu .h2 .script { font-family: inherit; font-size: inherit; line-height: inherit; vertical-align: baseline; margin-right: 0; } /* галерея вплотную к разделу об авторе — читается как один блок */ .s10, .s10b { padding-bottom: clamp(8px, 1vw, 18px); } .s11, .s11b { padding-top: clamp(10px, 1.2vw, 22px); }