/* Страница «VIP» (адрес /vip). Оформление по образцу владельца: чёрная карточка клубного пропуска — тёмный фон с мелким орнаментом, тонкая золотая рамка, золотой шрифт с засечками, корона, разрядистая подпись. Всё держится внутри : переменные переопределены на самом body и наследуются вниз по странице. Общие таблицы стилей (style.css, page.css) не тронуты — остальной сайт остаётся прежним. */ body.vip { --pom: #c9a24b; /* акцент: черта у цитаты, номера шагов, кнопки */ --pom-dark: #b08a34; --gold-2: #d9b55f; /* надзаголовки и значки — светлее, чтобы читались */ --paper: #0a0a0b; --ink: #ece5d6; /* основной текст — тёплый белый, не чистый */ --ink-2: #c6bda9; --ink-3: #948b78; --hair: rgba(201,162,75,.22); background: var(--paper); color: var(--ink); } /* Орнамент по всему полотну. Мотив нарисован здесь же и повторяется двумя слоями со сдвигом в полплитки — так ложится дамаск, в один слой видна сетка. Прозрачность вшита в сам рисунок (stroke-opacity): это фактура, а не рисунок. Важно: узор лежит фоном на самом , а НЕ отдельным неподвижным слоем поверх страницы. Прежний вариант (position: fixed + opacity) заставлял телефон на каждый кадр прокрутки перерисовывать слой во весь экран — на части Android-браузеров это давало рваные полосы вместо картинки. Фон на body рисуется один раз и едет вместе со страницей. */ body.vip { 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='.12' 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='.12' 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; background-repeat: repeat, repeat; } /* Шапка и подвал — чёрные с золотой чертой: гранатовая полоса на чёрном полотне выглядела бы чужой. */ .vip header.top { background: #0b0b0c; } /* Общий узор в шапке — только на остальных страницах. Здесь он лишний: узор и так идёт по всему полотну страницы. */ .vip header.top::before { display: none; } .vip footer.bottom { background: #0b0b0c; color: #b6ab93; } .vip nav.main a { color: #c3b99f; } .vip nav.main a:hover, .vip nav.main a[aria-current="page"] { color: var(--gold); } /* ── Карточка пропуска ───────────────────────────────────────────────── Двойная золотая рамка с короной сверху, крупное VIP и разрядистая подпись — как на образце. Свет за буквами даёт мягкое сияние. */ .vip-card { margin: 4px 0 30px; display: flex; justify-content: center; } .vip-frame { position: relative; width: 100%; max-width: 520px; padding: 34px 28px 28px; text-align: center; border: 1px solid rgba(201,162,75,.55); border-radius: 3px; background: radial-gradient(58% 70% at 50% 46%, rgba(212,172,86,.20), transparent 72%), linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,0) 60%); box-shadow: 0 0 0 5px rgba(0,0,0,.35), 0 26px 60px rgba(0,0,0,.6), inset 0 0 40px rgba(201,162,75,.08); } /* Вторая, внутренняя черта — как на карточке. */ .vip-frame::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(201,162,75,.22); border-radius: 2px; pointer-events: none; } .vip-crown { display: block; width: 34px; height: 24px; margin: -50px auto 10px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; } .vip-word { font-family: "Lora", Georgia, serif; font-weight: 700; font-size: clamp(54px, 11vw, 92px); line-height: 1; letter-spacing: .06em; margin: 0; padding-left: .06em; background: linear-gradient(175deg, #f4dea0 8%, #c9a24b 44%, #8f6a1c 72%, #e8cd86 100%); -webkit-background-clip: text; background-clip: text; color: transparent; /* Свечения фильтром здесь нет намеренно: filter поверх текста, залитого градиентом, телефон выносит в отдельный слой и местами рисует мусором. Сияние даёт радиальная подсветка самой рамки. */ } .vip-sub { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: clamp(11px, 1.4vw, 13.5px); letter-spacing: .34em; text-transform: uppercase; color: #d9b55f; margin: 12px 0 0; padding-left: .34em; } /* Завитки над и под словом — тонкие, в одну линию, как на образце. */ .vip-flr { display: block; width: 168px; height: 14px; margin: 0 auto; fill: none; stroke: rgba(201,162,75,.75); stroke-width: 1.1; stroke-linecap: round; } .vip-flr.up { margin-bottom: 6px; } .vip-flr.dn { margin-top: 8px; transform: rotate(180deg); } @media (max-width: 600px) { .vip-frame { padding: 28px 16px 22px; } .vip-flr { width: 132px; } } /* ── Текст страницы на тёмном ──────────────────────────────────────── */ /* Кегль крупнее общего: страница продаёт дорогие форматы, мелкий текст здесь неуместен. Абзацы — влево и не шире 720 px; по центру только заголовки и первый экран. */ body.vip { font-size: 18px; line-height: 1.6; } .vip .sec { margin: 0 0 72px; } @media (max-width: 700px) { .vip .sec { margin-bottom: 48px; } } .vip h1 { color: #f2ecdf; text-align: center; text-wrap: balance; font-size: clamp(25px, 3.1vw, 38px); line-height: 1.22; max-width: 900px; margin: 4px auto 18px; } .vip main > .wrap > .lead-p { text-align: center; max-width: 720px; margin: 0 auto 26px; color: var(--ink); } .vip .v-hero-btns { justify-content: center; margin: 0 0 8px; } /* Первый экран не должен занимать всю высоту: под кнопками сразу следующий блок, человек видит его начало без прокрутки. */ .vip .vip-card { margin: 2px 0 22px; } .vip .vip-frame { padding: 28px 24px 22px; } .vip .vip-word { font-size: clamp(46px, 8vw, 74px); } /* Заголовки разделов — по центру, без черты: золотых линий на странице и так достаточно. */ .vip .sec > h2 { color: #f0e8d8; border: 0; padding: 0; text-align: center; text-wrap: balance; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.24; margin: 0 0 22px; } .vip .sec > p, .vip .v-sub, .vip .v-note { max-width: 720px; } .vip .v-sub { color: var(--ink-2); margin: -10px 0 26px; } .vip .v-note { color: var(--ink-3); font-size: 16.5px; margin: 18px 0 0; } .vip .sec > .eyebrow { justify-content: flex-start; margin: 0 0 10px; } /* ── Что означает VIP-формат ────────────────────────────────────────── Шесть плиток: карточка пропуска и пять условий работы. Текста в них стало больше, поэтому колонок две, а не три — строка длиной в три слова не читается. Углы прямые: владелец просил прямоугольные. */ .vfeat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 760px) { .vfeat { grid-template-columns: 1fr; gap: 12px; } } .vf { display: grid; grid-template-columns: 28px 1fr; column-gap: 13px; row-gap: 9px; align-content: start; background: rgba(255,255,255,.035); border: 1px solid rgba(201,162,75,.2); border-radius: 0; padding: 22px 24px; } .vf .vic { grid-column: 1; } .vf h3 { grid-column: 2; margin: 0; align-self: center; font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 600; font-size: 19px; line-height: 1.3; color: #f4ecdc; } .vf p { grid-column: 1 / -1; margin: 0; max-width: none; font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 400; font-size: 17px; line-height: 1.58; color: var(--ink-2); } @media (max-width: 560px) { .vf { padding: 18px 16px; } .vf h3 { font-size: 18px; } } /* Первая плитка — уменьшенная карточка пропуска. Размер тот же, что у остальных пяти: она стоит в сетке наравне с ними, а не шапкой сверху. */ .vf-card { display: block; padding: 0; background: none; border: 0; } .vip-frame.mini { max-width: none; height: 100%; padding: 18px 14px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(0,0,0,.3), 0 14px 32px rgba(0,0,0,.5), inset 0 0 26px rgba(201,162,75,.08); } .mini .vip-crown { width: 44px; height: 31px; margin: 0 auto 8px; } .mini .vip-word { font-size: clamp(46px, 5.2vw, 66px); /* На маленьком кегле прежний градиент забирал только светлую верхушку и слово выглядело белым — сжимаем его, чтобы осталось золотым. */ background: linear-gradient(175deg, #f0d189 0%, #c9a24b 46%, #9a7420 100%); -webkit-background-clip: text; background-clip: text; } .mini .vip-sub { font-size: clamp(12px, 1.2vw, 14px); letter-spacing: .1em; margin: 10px 0 0; padding-left: .1em; line-height: 1.55; max-width: 92%; } /* Общее правило `.vf p` красит абзацы плитки в светлый — здесь оно перебивало и золотую подпись, и прозрачность слова под градиентом, из-за чего VIP выходило белым. Возвращаем оба цвета. */ .vf-card .vip-word { color: transparent; } .vf-card .vip-sub { color: #d9b55f; } @media (max-width: 560px) { .vip-frame.mini { padding: 22px 16px 18px; } } .vic { width: 28px; height: 28px; flex: 0 0 28px; margin-top: 1px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } /* ── Два направления ────────────────────────────────────────────────── */ .dirs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 800px) { .dirs { grid-template-columns: 1fr; } } .dir { background: rgba(255,255,255,.04); border: 1px solid rgba(201,162,75,.28); border-radius: 16px; padding: 26px 28px; } .dir h3 { margin: 0 0 10px; color: #f4ecdc; font-family: "Lora", Georgia, serif; font-weight: 600; font-size: clamp(20px, 2.1vw, 25px); line-height: 1.25; } .dir p { margin: 0 0 18px; max-width: none; color: var(--ink); } .dir .btn-row { margin: 0; } @media (max-width: 560px) { .dir { padding: 20px 18px; } } /* ── Три формата личной работы ──────────────────────────────────────── */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 1000px) { .tiers { grid-template-columns: 1fr; gap: 16px; } } /* На широком экране три колонки выходят за текстовую полосу: в 940 px они получаются узкими и текст в них рвётся. Расширяем только эту сетку и только там, где по краям есть запас. */ @media (min-width: 1280px) { .tiers { width: calc(100% + 240px); margin-left: -120px; } } .tier { background: rgba(255,255,255,.035); border: 1px solid rgba(201,162,75,.22); border-radius: 16px; padding: 26px 24px; display: flex; flex-direction: column; } /* Старший формат выделен спокойно: чуть ярче контур и тёплая подсветка, без кричащих ярлыков. */ .tier.top { border-color: rgba(201,162,75,.55); background: radial-gradient(120% 60% at 50% 0%, rgba(201,162,75,.10), transparent 70%), rgba(255,255,255,.045); box-shadow: 0 20px 44px rgba(0,0,0,.4); } .t-mark { margin: 0 0 12px; color: var(--gold); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; max-width: none; } .tier h3 { margin: 0 0 12px; color: #f4ecdc; font-family: "Lora", Georgia, serif; font-weight: 600; font-size: clamp(20px, 2vw, 24px); line-height: 1.24; } .t-price { margin: 0 0 16px; max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .t-price b { font-family: "Lora", Georgia, serif; font-weight: 700; color: var(--gold); font-size: clamp(30px, 3.2vw, 38px); line-height: 1; } .t-price span { color: var(--ink-3); font-size: 16px; } .t-lead { margin: 0 0 16px; max-width: none; color: var(--ink); } .t-ex { margin: -6px 0 16px; max-width: none; color: var(--ink-2); font-size: 16.5px; font-family: "Lora", Georgia, serif; font-style: italic; } .t-part { margin: 0 0 16px; } .t-part h4 { margin: 0 0 5px; color: var(--gold-2); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .t-part p { margin: 0; max-width: none; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; } .t-why { margin: 0 0 18px; max-width: none; padding-top: 14px; border-top: 1px solid rgba(201,162,75,.3); color: var(--gold); font-family: "Lora", Georgia, serif; font-size: 16.5px; line-height: 1.5; } .tier .btn-row { margin: auto 0 0; padding-top: 4px; } .tier .btn { width: 100%; } @media (max-width: 560px) { .tier { padding: 20px 18px; } } /* ── Сравнение трёх форматов ────────────────────────────────────────── */ .cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(201,162,75,.25); } .cmp-i { padding: 20px 20px 22px; border-bottom: 1px solid rgba(201,162,75,.25); border-right: 1px solid rgba(201,162,75,.18); display: flex; flex-direction: column; gap: 5px; } .cmp-i:last-child { border-right: 0; } .cmp-i b { color: #f4ecdc; font-family: "Lora", Georgia, serif; font-size: 18.5px; font-weight: 600; } .cmp-i .task { color: var(--ink-2); font-size: 16px; } .cmp-i .term { color: var(--ink-3); font-size: 15.5px; } .cmp-i .price { margin-top: 5px; color: var(--gold); font-family: "Lora", Georgia, serif; font-weight: 700; font-size: 24px; } @media (max-width: 800px) { .cmp { grid-template-columns: 1fr; } .cmp-i { border-right: 0; padding: 16px 0 18px; } } .cmp-out { margin: 22px 0 0; max-width: 720px; color: var(--ink); font-family: "Lora", Georgia, serif; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.45; } /* Блок «VIP-обучение методу» уехал на страницу «Обучение», его стили живут теперь в obuchenie.css (.vipedu). */ /* ── Финальный призыв ───────────────────────────────────────────────── */ .vip .sec.v-end { border-top: 1px solid rgba(201,162,75,.3); padding-top: 34px; margin-bottom: 8px; } .vip .sec.v-end > h2 { text-align: left; } .v-end .btn-row { margin: 22px 0 0; } /* ── Завершающий блок ─────────────────────────────────────────────── Последнее слово страницы: тот же курсив Lora, что в плитках, отделён золотой чертой сверху. */ .vip .sec.v-close { border-top: 1px solid rgba(201,162,75,.3); padding-top: 34px; margin-bottom: 8px; } .vip .sec.v-close > h2 { text-align: left; font-style: italic; margin: 0 0 18px; } /* Фото владельца в правой части завершающего блока: текст слева, портрет справа, прижат к низу — занимает ту пустоту, что была под узором. Файл — PNG без фона, узор просвечивает насквозь. Подпись — слева от снимка, в промежутке между текстом и фото, у нижнего края: белая, тонкий курсив Lora, со знаком ™ надстрочно и мелко. */ .v-por { margin: 26px 0 0; display: flex; align-items: flex-end; justify-content: center; gap: 12px; } .v-por img { display: block; width: clamp(170px, 42vw, 300px); height: auto; max-height: 280px; object-fit: contain; } .v-por figcaption { order: -1; margin: 0 0 8px; white-space: nowrap; font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 400; font-size: 15px; letter-spacing: .06em; color: #ffffff; } /* Подпись — ссылка на страницу «о нас»: тонкая линия снизу подсказывает, что по ней можно нажать; открывается в новой вкладке. */ .v-por figcaption a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; } .v-por figcaption a:hover { border-bottom-color: #fff; } .v-por figcaption sup { font-size: .5em; letter-spacing: .04em; vertical-align: super; margin-left: 1px; opacity: .85; } @media (min-width: 820px) { .vip .sec.v-close { display: grid; grid-template-columns: minmax(0, 1fr) clamp(310px, 32vw, 430px); column-gap: 26px; } .vip .sec.v-close > h2 { grid-column: 1 / -1; } .v-close-txt { grid-column: 1; } .v-close-txt p { max-width: none; } .v-por { grid-column: 2; align-self: end; margin: 0; justify-content: flex-end; } /* contain + max-height: фото вписывается в высоту текста и не раздувает блок, какой бы пропорции ни был исходный файл. */ .v-por img { width: auto; flex: 0 1 auto; max-width: 300px; max-height: 330px; object-fit: contain; object-position: bottom center; } .v-por figcaption { font-size: 16px; margin-bottom: 10px; } } .vip .sec.v-close p { font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(17px, 1.8vw, 19.5px); line-height: 1.6; color: var(--ink); max-width: 720px; margin: 0 0 14px; } .v-close-out { margin: 22px 0 0 !important; padding-top: 18px; border-top: 1px solid rgba(201,162,75,.25); color: var(--gold) !important; font-weight: 600 !important; } @media (max-width: 600px) { .vip .sec.v-close { padding-top: 26px; } } /* Кнопка — золотая с тёмными буквами: белый текст на золоте не читается. */ .vip .btn { background: linear-gradient(135deg, #e6c878, #c9a24b 52%, #a67f2c); color: #14110b; border: 1px solid rgba(240,214,150,.5); box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35); font-weight: 700; letter-spacing: .04em; } .vip .btn:hover { background: linear-gradient(135deg, #f0d68e, #d6b05a 52%, #b78d33); color: #14110b; } .vip .btn.ghost { background: transparent; color: var(--gold); border: 1px solid rgba(201,162,75,.55); box-shadow: none; } .vip .btn.ghost:hover { background: rgba(201,162,75,.12); color: var(--gold); } .vip .btn.pill { padding: 13px 26px; font-size: 13.5px; text-transform: uppercase; } @media (max-width: 560px) { .vip .btn.pill { width: 100%; } .vip .btn-row { flex-direction: column; align-items: stretch; } } /* Шаги «как начинается работа» — на тёмном. */ .vip .steps li { color: var(--ink); } .vip .steps li::before { background: #121214; border-color: rgba(201,162,75,.4); color: var(--gold); } /* Знак в подвале на чёрном: белое слово гаснет, делаем его тёплым. */ .vip .bm-k { color: #e8dfc9; }