/* Страница «Обучение» — только своё. Основная заливка (шапка, подвал, кнопки, заголовки) переведена со светлого фиолетового на тёмный по образцу владельца. Держится на : общий style.css не тронут, остальные страницы сайта прежние. */ body.ob { --accent: #2f2050; /* заливка шапки, подвала, кнопок; цвет заголовков */ --accent-dark: #221741; /* наведение на кнопку */ --deep: #241a3e; /* панель «Форматы и стоимость» — на тон глубже заливки */ } /* Кнопка на VIP — золотая, как на самой странице VIP: золотая заливка, золотой контур, тёмные буквы. Тень мягче, чем там: здесь светлая бумага. */ .ob .btn.gold-vip { background: linear-gradient(135deg, #e6c878, #c9a24b 52%, #a67f2c); color: #14110b; border: 1px solid rgba(201,162,75,.9); box-shadow: 0 8px 20px rgba(140,100,18,.28), inset 0 1px 0 rgba(255,255,255,.4); font-weight: 700; letter-spacing: .05em; } .ob .btn.gold-vip:hover { background: linear-gradient(135deg, #f0d68e, #d6b05a 52%, #b78d33); color: #14110b; } /* ── VIP-обучение методу ─────────────────────────────────────────────── Блок переехал сюда со страницы VIP и держит её подачу: тёмная карточка с золотым орнаментом, золотая рамка, золотые заголовок и цена. На светлой бумаге страницы читается как отдельный премиальный продукт, а не как очередной пункт программы. Орнамент — тот же мотив, что на VIP: два слоя со сдвигом в полплитки, прозрачность вшита в сам рисунок. */ .vipedu { position: relative; overflow: hidden; margin: 52px 0 0; padding: 46px 44px 42px; border-radius: 18px; background-color: #0b0b0c; border: 1px solid rgba(201,162,75,.4); box-shadow: 0 20px 46px rgba(35,25,60,.2), inset 0 0 40px rgba(201,162,75,.06); will-change: transform; } /* Орнамент отдельным слоем и с запасом по краям: слой едет при прокрутке, запас нужен, чтобы из-под него не показался голый фон. */ .vipedu-pat { position: absolute; inset: -60px; z-index: 0; pointer-events: none; will-change: transform; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c9a24b' stroke-opacity='.13' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M60 16c0 14-14 18-14 30 0 10 14 12 14 24 0-12 14-14 14-24 0-12-14-16-14-30z'/%3E%3Cpath d='M60 31c0 8-7 10-7 15s7 7 7 13c0-6 7-8 7-13s-7-7-7-15z'/%3E%3Cpath d='M46 46c-12-4-22 4-20 14 1 7 10 9 14 3'/%3E%3Cpath d='M74 46c12-4 22 4 20 14-1 7-10 9-14 3'/%3E%3Cpath d='M60 84c-7 7-17 5-21 12'/%3E%3Cpath d='M60 84c7 7 17 5 21 12'/%3E%3Cpath d='M60 100c0 5-4 7-4 11 0 3 4 4 4 8 0-4 4-5 4-8 0-4-4-6-4-11z'/%3E%3Cpath d='M0 60c6 0 9-4 9-9 0 5 3 9 9 9-6 0-9 4-9 9 0-5-3-9-9-9z'/%3E%3Cpath d='M120 60c-6 0-9-4-9-9 0 5-3 9-9 9 6 0 9 4 9 9 0-5 3-9 9-9z'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c9a24b' stroke-opacity='.13' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M60 16c0 14-14 18-14 30 0 10 14 12 14 24 0-12 14-14 14-24 0-12-14-16-14-30z'/%3E%3Cpath d='M60 31c0 8-7 10-7 15s7 7 7 13c0-6 7-8 7-13s-7-7-7-15z'/%3E%3Cpath d='M46 46c-12-4-22 4-20 14 1 7 10 9 14 3'/%3E%3Cpath d='M74 46c12-4 22 4 20 14-1 7-10 9-14 3'/%3E%3Cpath d='M60 84c-7 7-17 5-21 12'/%3E%3Cpath d='M60 84c7 7 17 5 21 12'/%3E%3C/g%3E%3C/svg%3E"); background-size: 120px 120px, 120px 120px; background-position: 0 0, 60px 60px; } /* Внутренний кант: тонкая золотая черта с отступом от края карточки. */ .vipedu::after { content: ""; position: absolute; inset: 16px; z-index: 1; pointer-events: none; border: 1px solid rgba(201,162,75,.28); border-radius: 9px; } /* Уголки сидят на самом канте. Рисунок один, по углам разворачивается. */ .vcor { position: absolute; z-index: 2; width: 34px; height: 34px; pointer-events: none; fill: none; stroke: rgba(201,162,75,.72); stroke-width: 1.2; stroke-linecap: round; } .vcor.tl { top: 13px; left: 13px; } .vcor.tr { top: 13px; right: 13px; transform: scaleX(-1); } .vcor.br { bottom: 13px; right: 13px; transform: scale(-1); } .vcor.bl { bottom: 13px; left: 13px; transform: scaleY(-1); } /* Содержимое — по центру и не во всю ширину: длинная строка на тёмном читается тяжело, а узкая колонка держит карточку лёгкой. */ .vipedu-in { position: relative; z-index: 2; text-align: center; } .vipedu .eyebrow { color: #d9b55f; margin: 0 0 14px; justify-content: center; } .vipedu .eyebrow::before { background: #c9a24b; } /* display: block обязателен: общий стиль заголовков на этой странице делает h2 флексом ради номера блока, и тогда выравнивание по центру не работает. */ .vipedu h2 { display: block; text-align: center; color: #f0e8d8; border: 0; padding: 0; margin: 0 0 16px; text-wrap: balance; font-size: clamp(22px, 2.5vw, 31px); line-height: 1.22; } /* Текст — Lora курсивом: тот же лёгкий премиальный шрифт, что на VIP. Системный рубленый смотрелся здесь тяжело и казался чужим. */ .vipedu-txt { font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 400; font-size: 17.5px; line-height: 1.72; color: #d9d0bd; max-width: 600px; margin: 0 auto 14px; } .vipedu-txt:last-of-type { margin-bottom: 0; } .vipedu-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; margin: 0 0 20px; } .vipedu-price b { font-family: "Lora", Georgia, serif; font-weight: 700; color: #c9a24b; font-size: clamp(30px, 3.2vw, 38px); line-height: 1; } .vipedu-price span { color: #948b78; font-size: 16px; } .vipedu .btn-row { margin: 26px 0 0; justify-content: center; } /* Сертификат — в правом нижнем углу карточки, мелко: это сноска, а не отдельный блок. Рисунок тот же, что в блоке 06. */ .vipedu-cert { position: absolute; z-index: 2; right: 34px; bottom: 28px; margin: 0; width: 108px; text-align: center; pointer-events: none; } .vipedu-cert svg { display: block; width: 62px; height: 45px; margin: 0 auto 7px; fill: none; stroke: #c9a24b; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; } .vipedu-cert figcaption { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: #a2977f; line-height: 1.35; } /* Узкие экраны: сноска встаёт в поток под кнопку, уголки и кант мельче — иначе карточка выглядит перегруженной. */ @media (max-width: 860px) { .vipedu-cert { position: static; width: auto; margin: 26px auto 0; } } @media (max-width: 560px) { .vipedu { padding: 30px 20px 26px; margin-top: 40px; } .vipedu::after { inset: 11px; } .vcor { width: 26px; height: 26px; } .vcor.tl, .vcor.tr { top: 9px; } .vcor.bl, .vcor.br { bottom: 9px; } .vcor.tl, .vcor.bl { left: 9px; } .vcor.tr, .vcor.br { right: 9px; } .vipedu-txt { font-size: 16.5px; } }