/* Theme Name: ESSE Recon Author: Claude Description: Разведка переезда ESSE Academy на WordPress — светлый стиль оригинала. Version: 0.3 */ /* ===== CeraPro (фирменный шрифт, перенесён из оригинала) ===== */ @font-face{ font-family:'CeraPro'; src:url('fonts/CeraPro/CeraPro-Light.woff2') format('woff2'),url('fonts/CeraPro/CeraPro-Light.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap; } @font-face{ font-family:'CeraPro'; src:url('fonts/CeraPro/CeraPro-Regular.woff2') format('woff2'),url('fonts/CeraPro/CeraPro-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'CeraPro'; src:url('fonts/CeraPro/CeraPro-Medium.woff2') format('woff2'),url('fonts/CeraPro/CeraPro-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'CeraPro'; src:url('fonts/CeraPro/CeraPro-Bold.woff2') format('woff2'),url('fonts/CeraPro/CeraPro-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:'CeraPro'; src:url('fonts/CeraPro/CeraPro-Black.woff2') format('woff2'),url('fonts/CeraPro/CeraPro-Black.woff') format('woff'); font-weight:900; font-style:normal; font-display:swap; } :root{ --accent:#AE382C; --ink:#1b1b1b; --muted:#6b6b6b; --line:#e6e6e6; --soft:#f4f2ee; --font:'CeraPro',"Helvetica Neue",Arial,sans-serif; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ font-family:var(--font); background:#fff; color:var(--ink); } a{ text-decoration:none; color:inherit; } img{ max-width:100%; height:auto; display:block; } /* === ЕДИНОЕ ПРАВИЛО САЙТА: только прямой угол, никаких скруглений === */ *, *::before, *::after{ border-radius:0 !important; } /* Видимая обводка фокуса для клавиатурной навигации (WCAG 2.4.7) */ :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .e-wrap{ max-width:1180px; margin:0 auto; padding:0 32px; } .e-section{ padding:80px 0; } .e-section--soft{ background:var(--soft); } .e-eyebrow{ font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:800; margin-bottom:16px; } .e-h2{ font-size:clamp(28px,3.6vw,46px); line-height:1.05; text-transform:uppercase; font-weight:900; margin:0 0 14px; letter-spacing:.005em; } .e-h2::after{ content:''; display:block; width:60px; height:4px; background:var(--accent); margin-top:18px; } .e-lead{ font-size:18px; line-height:1.75; color:#333; max-width:980px; } .e-lead p{ margin:0 0 18px; } .e-btn{ display:inline-flex; align-items:center; justify-content:center; height:54px; padding:0 36px; font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-radius:2px; transition:all .25s ease; cursor:pointer; } .e-btn--black{ background:#111; color:#fff; } .e-btn--black:hover{ background:var(--accent); } .e-btn--red{ background:var(--accent); color:#fff; } .e-btn--red:hover{ background:#8f2c22; } .e-btn--ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); } .e-btn--ghost:hover{ background:rgba(255,255,255,.1); } .e-btn--outline{ background:transparent; color:#111; border:1px solid #111; } .e-btn--outline:hover{ background:#111; color:#fff; } .e-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.18); } .e-btn:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(0,0,0,.16); } .e-btn--ghost:hover{ box-shadow:0 12px 26px rgba(0,0,0,.28); } /* ---- Шапка ---- */ .site-header{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:40px; padding:11px 40px; background:#fff; border-bottom:1px solid var(--line); } .site-header .brand{ font-weight:900; font-size:18px; letter-spacing:.01em; color:#111; flex:0 0 auto; } .site-header__menu{ flex:1; display:flex; align-items:center; gap:40px; } .site-nav{ display:flex; gap:26px; } .site-nav a{ color:#222; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; } .site-nav a:hover{ color:var(--accent); } /* ---- HERO (единственный тёмный блок) ---- */ .e-hero{ position:relative; min-height:78vh; display:flex; align-items:center; padding:96px 0; background:#000; overflow:hidden; } .e-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; } .e-hero__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,.5) 45%,rgba(10,10,10,.15) 100%),linear-gradient(0deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,0) 55%); } /* Слайдшоу в hero (как на оригинале) */ .e-hero__slides{ position:absolute; inset:0; } .e-hero__slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s ease; } .e-hero__slide.is-active{ opacity:1; } .e-hero__slide{ z-index:1; } .e-hero__scrim{ position:absolute; inset:0; z-index:5; background:linear-gradient(180deg,rgba(6,6,6,.42) 0%,rgba(6,6,6,0) 20%),linear-gradient(0deg,rgba(6,6,6,.86) 0%,rgba(6,6,6,.45) 42%,rgba(6,6,6,.08) 72%),linear-gradient(90deg,rgba(6,6,6,.58) 0%,rgba(6,6,6,.22) 52%,rgba(6,6,6,.03) 90%); } .e-hero .e-wrap{ position:relative; z-index:6; color:#fff; display:flex; flex-direction:column; max-width:1300px; } .e-hero .e-eyebrow{ text-shadow:0 1px 12px rgba(0,0,0,.5); } .e-hero h1{ font-size:clamp(28px,3.5vw,46px); line-height:1.1; text-transform:uppercase; font-weight:900; margin:0 0 18px; max-width:none; text-shadow:0 2px 22px rgba(0,0,0,.5); } .e-hero p{ font-size:clamp(15px,1.3vw,18px); line-height:1.6; max-width:50ch; color:rgba(255,255,255,.92); margin:0 0 28px; text-shadow:0 1px 14px rgba(0,0,0,.55); } .e-hero__trust{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:30px; } .e-hero__trust span{ display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:rgba(255,255,255,.86); letter-spacing:.01em; } .e-hero__trust span::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); flex:0 0 auto; box-shadow:0 0 0 4px rgba(174,56,44,.25); } .e-btns{ display:flex; flex-wrap:wrap; gap:14px; } /* ---- Курс-карточка ---- */ .e-courses{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,360px)); gap:28px; } .e-course{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; transition:transform .3s ease, box-shadow .3s ease; } .e-course:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.14); } .e-course__media{ position:relative; display:block; aspect-ratio:16/11; overflow:hidden; } .e-course__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .e-course:hover .e-course__media img{ transform:scale(1.05); } .e-course__badge{ position:absolute; top:14px; right:14px; background:var(--accent); color:#fff; font-size:12px; font-weight:800; padding:6px 12px; border-radius:4px; } .e-course__body{ padding:22px 24px 26px; } .e-course__meta{ font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; } .e-course__title{ font-size:18px; font-weight:800; line-height:1.3; margin:0 0 16px; } .e-course__foot{ display:flex; align-items:baseline; gap:12px; border-top:1px solid var(--line); padding-top:16px; } .e-course__price{ font-size:24px; font-weight:900; } .e-course__old{ font-size:15px; color:#aaa; text-decoration:line-through; } .e-course__price del{ color:#aaa; font-weight:400; font-size:16px; margin-left:8px; } .e-course__price ins{ text-decoration:none; } .e-course__btn{ display:block; margin-top:18px; text-align:center; background:#111; color:#fff; font-weight:800; font-size:14px; letter-spacing:.04em; text-transform:uppercase; padding:14px; border-radius:6px; transition:background .25s ease; } .e-course__btn:hover{ background:var(--accent); } /* ===== Лекции (товары WooCommerce) — карусель ===== */ .e-lectures__sub{ font-size:16px; color:#555; margin:-4px 0 22px; max-width:60ch; } .e-lec-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; } .e-lec-tab{ font:600 14px/1 var(--font); border:1px solid #111; background:#fff; color:#111; padding:9px 18px; cursor:pointer; transition:background .15s ease, color .15s ease; } .e-lec-tab:hover{ background:#f0f0f0; } .e-lec-tab.is-active{ background:#111; color:#fff; } .e-lec-row{ display:flex; gap:22px; overflow-x:auto; padding:4px 0 24px; scroll-snap-type:x proximity; scrollbar-width:thin; } .e-lec-card{ flex:0 0 286px; max-width:286px; display:flex; flex-direction:column; scroll-snap-align:start; } .e-lec-card__media{ position:relative; aspect-ratio:1/1; background:#d9d9d9; overflow:hidden; flex:0 0 auto; } .e-lec-card__imglink{ position:absolute; inset:0; display:block; } .e-lec-card__imglink img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .e-lec-sale{ position:absolute; top:0; left:0; background:var(--accent); color:#fff; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:5px 10px; } .e-lec-fav{ position:absolute; right:12px; bottom:12px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; cursor:pointer; padding:0; color:#111; } .e-lec-fav svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; } .e-lec-fav.is-fav svg{ fill:#111; } .e-lec-card__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:14px 2px 0; } .e-lec-card__title{ font-size:16px; font-weight:600; line-height:1.35; margin:0 0 10px; min-height:2.7em; } .e-lec-card__title a:hover{ color:var(--accent); } .e-lec-card__price{ font-size:18px; font-weight:900; margin:0 0 14px; } .e-lec-card__price del{ color:#aaa; font-weight:400; font-size:14px; margin-left:6px; } .e-lec-card__price ins{ text-decoration:none; } .e-lec-card__price .amount{ font-weight:900; } .e-lec-card__btn{ display:block; text-align:center; border:1px solid #111; background:#fff; color:#111; font-weight:700; font-size:14px; padding:13px; margin-top:auto; transition:background .15s ease, color .15s ease; cursor:pointer; } .e-lec-card__btn:hover, .e-lec-card__btn.added{ background:#111; color:#fff; } .added_to_cart{ display:none !important; } /* «Просмотр корзины» после AJAX-добавления — не нужен (есть иконка корзины в шапке + кнопка оформления) */ .e-lec-card.is-hidden{ display:none; } @media (max-width:520px){ .e-lec-card{ flex-basis:78vw; max-width:78vw; } } /* ===== Архив категории «Лекции» (сетка) ===== */ .e-lec-archive .e-h2{ margin-bottom:8px; } .e-lec-tab{ text-decoration:none; } .e-lec-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:26px 22px; margin-top:6px; } .e-lec-grid .e-lec-card{ flex:initial; max-width:none; } .e-lec-pagination{ display:flex; gap:8px; margin-top:36px; flex-wrap:wrap; } .e-lec-pagination a, .e-lec-pagination span{ display:inline-flex; min-width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--line); padding:0 10px; font-weight:600; color:#111; } .e-lec-pagination a:hover{ border-color:#111; } .e-lec-pagination .current{ background:#111; color:#fff; border-color:#111; } /* ===== Страница урока-лекции ===== */ .e-lec-back{ display:inline-block; color:#6b6b6b; font-size:14px; margin-bottom:16px; } .e-lec-back:hover{ color:var(--accent); } .e-lec-single .e-eyebrow{ margin-bottom:10px; } .e-lec-single__title{ font-size:clamp(28px,3.6vw,46px); font-weight:900; text-transform:uppercase; line-height:1.05; margin:0 0 26px; } .e-lec-stage{ max-width:980px; } .e-lec-player__embed{ position:relative; aspect-ratio:16/9; background:#000; } .e-lec-player__embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } .e-lec-player__video{ width:100%; display:block; aspect-ratio:16/9; background:#000; object-fit:contain; } .e-lec-player__empty{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:#999; background:#1a1a1a; font-size:15px; } .e-lec-locked{ aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#1a1a1a; color:#ddd; text-align:center; padding:24px; } .e-lec-locked svg{ width:46px; height:46px; stroke:#bbb; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .e-lec-note{ background:var(--soft); padding:13px 18px; font-size:14px; color:#555; } .e-lec-note--ok{ background:#eef7ee; color:#2c6b33; font-weight:600; } .e-lec-buy{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; border:1px solid var(--line); border-top:0; padding:22px 26px; } .e-lec-buy__price{ font-size:26px; font-weight:900; } .e-lec-buy__price del{ color:#aaa; font-weight:400; font-size:18px; margin-left:8px; } .e-lec-buy__price ins{ text-decoration:none; } .e-lec-buy__btns{ display:flex; gap:12px; flex-wrap:wrap; } .e-lec-about{ margin-top:46px; max-width:760px; } .e-lec-about .e-h2{ margin-bottom:20px; } /* Страница урока — новый продающий верх */ .e-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; color:#6b6b6b; margin-bottom:24px; } .e-crumbs a{ color:#6b6b6b; } .e-crumbs a:hover{ color:var(--accent); } .e-crumbs__cur{ color:#111; font-weight:700; } .e-lec-top{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:44px; align-items:start; } .e-lec-top__media{ position:relative; } .e-lec-top__media .e-lec-player{ margin:0; } .e-lec-top__img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#ececec; } .e-lec-top__ph{ display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; background:#ececec; font-family:var(--font); font-weight:900; font-size:120px; color:rgba(174,56,44,.10); } .e-lec-top__lock{ position:absolute; left:16px; top:16px; width:42px; height:42px; background:#111; color:#fff; display:flex; align-items:center; justify-content:center; } .e-lec-top__lock svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.8; } .e-lec-top__info .e-eyebrow{ margin-bottom:10px; } .e-lec-top__lead{ font-size:16px; line-height:1.7; color:#3a3a3a; margin:0 0 20px; } .e-lec-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; } .e-lec-tag{ border:1px solid var(--line); padding:8px 14px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#333; } .e-lec-top__price{ font-size:30px; font-weight:900; margin-bottom:16px; } .e-lec-top__price del{ color:#8a8a8a; font-weight:400; font-size:20px; margin-left:8px; } .e-lec-top__price ins{ text-decoration:none; } .e-lec-top__btns{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; } .e-lec-owned{ font-size:16px; font-weight:800; color:#2c6b33; margin:6px 0 18px; } .e-lec-perks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .e-lec-perks li{ position:relative; padding-left:26px; font-size:14.5px; color:#3a3a3a; line-height:1.5; } .e-lec-perks li::before{ content:'✓'; position:absolute; left:0; top:0; color:var(--accent); font-weight:900; } .e-lec-perks a{ color:var(--accent); text-decoration:underline; } .e-lec-watch{ margin-top:52px; } .e-lec-watch .e-h2{ margin-bottom:20px; } .e-lec-siblings{ margin-top:56px; } .e-lec-siblings .e-h2{ margin-bottom:24px; } .e-lec-siblings__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:26px; } .e-lec-sib{ display:flex; flex-direction:column; border:1px solid var(--line); background:#fff; transition:border-color .15s ease; } .e-lec-sib:hover{ border-color:#111; } .e-lec-sib__media{ display:block; aspect-ratio:4/3; background:#ececec center/cover no-repeat; } .e-lec-sib__title{ font-size:14.5px; font-weight:700; line-height:1.3; padding:14px 16px 6px; } .e-lec-sib__price{ font-size:13px; color:#6b6b6b; padding:0 16px 16px; margin-top:auto; } .e-lec-siblings .e-lec-back{ margin-bottom:0; } @media (max-width:820px){ .e-lec-top{ grid-template-columns:1fr; gap:24px; } .e-lec-siblings__grid{ grid-template-columns:repeat(2,1fr); } } /* ===== Страница курса-комплекта ===== */ .e-course-single__title{ font-size:clamp(28px,3.6vw,46px); font-weight:900; text-transform:uppercase; line-height:1.05; margin:6px 0 16px; } .e-course-single__lead{ font-size:17px; line-height:1.7; color:#3a3a3a; max-width:70ch; margin-bottom:34px; } .e-course-single__lead p{ margin:0 0 12px; } .e-course-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start; margin-bottom:52px; } .e-course-hero__media{ aspect-ratio:4/3; overflow:hidden; background:#eee; } .e-course-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; } .e-course-info{ border:1px solid #111; padding:24px 26px; } .e-course-facts{ list-style:none; margin:0 0 20px; padding:0; } .e-course-facts li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; } .e-course-facts li:last-child{ border-bottom:0; } .e-course-facts__k{ color:#777; flex:0 0 auto; } .e-course-facts__v{ font-weight:700; text-align:right; } .e-course-info__buy{ border-top:2px solid #111; padding-top:18px; } .e-course-buy__price{ display:flex; align-items:baseline; gap:12px; } .e-course-buy__price .now{ font-size:28px; font-weight:900; } .e-course-buy__price .old{ font-size:17px; color:#aaa; text-decoration:line-through; } .e-course-info__save{ font-size:13px; color:#2c6b33; font-weight:600; margin-top:6px; } .e-course-info__cta{ display:flex; width:100%; margin-top:14px; } .e-course-owned{ font-weight:700; color:#2c6b33; margin-top:12px; } .e-course-single__h{ margin:0 0 22px; } .e-course-single__descr{ margin-bottom:44px; } @media (max-width:820px){ .e-course-hero{ grid-template-columns:1fr; gap:26px; } } /* Программа курса — простой аккордеон (заголовок + чёрная тонкая стрелка → абзац) */ .e-course-acc{ display:flex; flex-direction:column; gap:10px; margin-bottom:52px; } /* Ровный ритм секций на странице курса/лекции: единый зазор 52px, без задвоенных паддингов */ .single-product .e-section{ padding:52px 0; } .single-product .e-section + .e-section{ padding-top:0; } .e-course-single .e-wrap > *:last-child{ margin-bottom:0; } .e-course-acc details{ border:1px solid #e3e3e3; background:#fff; } .e-course-acc details[open]{ border-color:#111; } .e-course-acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:16px 54px 16px 20px; position:relative; } .e-course-acc summary::-webkit-details-marker{ display:none; } .e-course-acc__n{ font-weight:900; color:#bbb; font-size:14px; min-width:22px; } .e-course-acc details[open] .e-course-acc__n{ color:var(--accent); } .e-course-acc__title{ font-weight:700; font-size:17px; line-height:1.3; } .e-course-acc summary::after{ content:''; position:absolute; right:20px; top:50%; transform:translateY(-50%); width:16px; height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .25s ease; } .e-course-acc details[open] summary::after{ transform:translateY(-50%) rotate(180deg); } .e-course-acc__body{ padding:0 20px 20px 56px; font-size:15px; line-height:1.7; color:#555; } .e-course-acc__body p{ margin:0 0 12px; } .e-course-acc__act{ display:flex; align-items:center; gap:14px; margin-top:4px; } .e-course-acc__watch{ color:var(--accent); font-weight:700; } .e-course-acc__price{ font-weight:700; color:#111; } .e-course-acc__buy{ color:#777; font-weight:700; } .e-course-acc__buy:hover{ color:var(--accent); } @media (max-width:600px){ .e-course-acc__body{ padding-left:20px; } } /* ===== Личный кабинет (WooCommerce My Account) ===== */ .woocommerce-account .woocommerce{ display:grid; grid-template-columns:240px 1fr; grid-template-areas:"notices notices" "nav content"; gap:0 44px; align-items:start; } .woocommerce-account .woocommerce-notices-wrapper{ grid-area:notices; } .woocommerce-account .woocommerce-MyAccount-navigation{ grid-area:nav; float:none; width:100%; margin:0; } .woocommerce-account .woocommerce-MyAccount-content{ grid-area:content; float:none; width:100%; margin:0; } .woocommerce-MyAccount-navigation li a{ white-space:nowrap; } .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; } .woocommerce-MyAccount-navigation li a{ display:block; padding:12px 16px; font-weight:600; font-size:15px; color:#333; border-left:3px solid transparent; } .woocommerce-MyAccount-navigation li a:hover{ background:#f4f4f4; } .woocommerce-MyAccount-navigation li.is-active a{ background:#111; color:#fff; border-color:var(--accent); } .woocommerce-MyAccount-content{ font-size:15px; line-height:1.65; color:#333; } .woocommerce-MyAccount-content a{ color:var(--accent); } .woocommerce-MyAccount-content .woocommerce-Message, .woocommerce-MyAccount-content p:first-child{ margin-top:0; } .e-account-h{ font-size:22px; font-weight:900; text-transform:uppercase; margin:0 0 18px; letter-spacing:.01em; } .e-account-hello{ font-size:16px; margin:0 0 12px; } .e-account-links{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; } .e-account-links li{ padding:0; } .e-account-links a{ color:#111; } .e-account-links a:hover{ color:var(--accent); } /* таблицы заказов */ .woocommerce-account table.shop_table{ width:100%; border-collapse:collapse; } .woocommerce-account table.shop_table th, .woocommerce-account table.shop_table td{ border:1px solid var(--line); padding:12px 14px; font-size:14px; text-align:left; } /* формы входа/регистрации/профиля */ .woocommerce-account .woocommerce > .u-columns, .woocommerce-account .woocommerce form.login, .woocommerce-account .woocommerce form.register{ } .woocommerce form .form-row{ margin-bottom:14px; } .woocommerce form .form-row label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#333; } .woocommerce form input.input-text, .woocommerce form input[type=email], .woocommerce form input[type=password], .woocommerce form input[type=tel], .woocommerce-account input.input-text{ width:100%; max-width:420px; border:1px solid var(--line); padding:12px 14px; font:inherit; } .woocommerce form input.input-text:focus{ border-color:#111; outline:none; } .woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button{ display:inline-flex; align-items:center; justify-content:center; background:#111 !important; color:#fff !important; border:0 !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.04em; padding:13px 26px !important; font-size:13px !important; cursor:pointer; } .woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover{ background:var(--accent) !important; } .woocommerce-form-login__rememberme{ font-weight:400; } @media (max-width:800px){ .woocommerce-account .woocommerce{ grid-template-columns:1fr; gap:24px; } } /* ===== Корзина / Оформление (WooCommerce-блоки) ===== */ .e-shop-body{ font-size:15px; } .e-shop-page .wc-block-components-button, .e-shop-page .wc-block-cart__submit-button, .e-shop-page button.wc-block-components-checkout-place-order-button, .e-shop-page .wp-block-woocommerce-cart .wc-block-cart__submit-container a{ background:#111 !important; color:#fff !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.03em; } .e-shop-page .wc-block-components-button:hover{ background:var(--accent) !important; } .e-shop-page .wc-block-components-order-summary-item__description{ min-width:0; } /* ===== Мои лекции ===== */ .e-mylec{ display:grid; gap:12px; max-width:680px; margin-top:8px; } .e-mylec__item{ display:flex; align-items:center; gap:16px; border:1px solid var(--line); padding:12px 14px; background:#fff; transition:border-color .15s ease; } .e-mylec__item:hover{ border-color:var(--accent); } .e-mylec__media img{ width:64px; height:64px; object-fit:cover; background:#eee; display:block; } .e-mylec__media{ flex:0 0 auto; width:64px; height:64px; background:#eee; } .e-mylec__txt{ display:flex; flex-direction:column; gap:3px; } .e-mylec__txt b{ font-size:16px; color:var(--ink); } .e-mylec__txt span{ color:var(--accent); font-size:14px; font-weight:600; } /* ---- DEMO в рамке ---- */ .e-demo{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:#fff; border:1px solid #111; padding:30px 44px; } .e-demo__title{ font-size:clamp(20px,2.4vw,28px); font-weight:900; text-transform:uppercase; margin:0; line-height:1.1; letter-spacing:.01em; } /* ---- Ты освоишь ---- */ .e-skills{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .e-skill{ border:1px solid #e3e3e3; padding:34px 30px; background:#fff; } .e-skill h3{ font-size:18px; text-transform:uppercase; font-weight:900; margin:0 0 20px; letter-spacing:.02em; } .e-skill ul{ list-style:none; margin:0; padding:0; } .e-skill li{ position:relative; padding-left:24px; margin-bottom:14px; font-size:14.5px; line-height:1.5; color:#333; } .e-skill li::before{ content:''; position:absolute; left:2px; top:8px; width:7px; height:7px; background:#111; border-radius:50% !important; } @media (max-width:860px){ .e-skills{ grid-template-columns:1fr; } } /* ---- Преподаватель ---- */ .e-teacher{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; } .e-teacher--video{ grid-template-columns:1.3fr 1fr; } .e-teacher__media{ position:relative; } .e-teacher__media::before{ content:''; position:absolute; left:-22px; bottom:-22px; width:64%; height:62%; background:#eeece7; z-index:0; } .e-teacher__media > *{ position:relative; z-index:1; } .e-teacher__media:not(.e-teacher__media--video){ aspect-ratio:4/5; } .e-teacher__media:not(.e-teacher__media--video) .e-teacher__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; } .e-teacher__name{ font-size:clamp(28px,3.4vw,42px); font-weight:900; text-transform:uppercase; line-height:1.05; margin:6px 0 0; } .e-teacher__name::after{ content:''; display:block; width:54px; height:4px; background:var(--accent); margin:16px 0 18px; } .e-teacher__role{ font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); font-weight:800; margin:0 0 20px; } .e-teacher__bio{ font-size:16px; line-height:1.75; color:#3a3a3a; margin:0; max-width:52ch; } @media (max-width:900px){ .e-teacher, .e-teacher--video{ grid-template-columns:1fr; gap:30px; } .e-teacher__media::before{ left:-12px; bottom:-12px; width:52%; height:42%; } } /* ---- Для кого (фото + смещённая панель) ---- */ .e-whom{ position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0; } .e-whom__img{ aspect-ratio:3/4; max-height:560px; overflow:hidden; background:#000; } .e-whom__img img{ width:100%; height:100%; object-fit:cover; } .e-whom__panel{ position:relative; z-index:2; background:var(--soft); padding:56px 48px; margin-left:-60px; border-radius:12px; box-shadow:0 22px 54px rgba(0,0,0,.12); } .e-whom__panel h2{ font-size:clamp(26px,3.4vw,42px); font-weight:900; text-transform:uppercase; margin:0 0 20px; line-height:1.08; } .e-whom__panel p{ font-size:16px; line-height:1.7; color:#3a3a3a; margin:0; } /* ---- Дисциплина (текст + галерея) ---- */ .e-disc__head{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start; margin-bottom:34px; } .e-disc__head .e-h2{ margin:0; } .e-disc__head p{ font-size:16px; line-height:1.75; color:#3a3a3a; margin:0; } .e-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .e-gallery a{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:#eee; border-radius:10px; } .e-gallery a::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.30)); opacity:0; transition:opacity .35s ease; } .e-gallery a:hover::after{ opacity:1; } .e-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .e-gallery a:hover img{ transform:scale(1.06); } /* ---- Почему ESSE ---- */ .e-why{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .e-feat{ padding-left:24px; border-left:3px solid var(--accent); } .e-feat h3{ font-size:18px; text-transform:uppercase; font-weight:900; margin:0 0 8px; } .e-feat p{ font-size:15px; line-height:1.6; color:#555; margin:0; } /* ---- FAQ ---- */ .e-faq{ max-width:880px; display:flex; flex-direction:column; gap:12px; } .e-faq details{ background:#fff; border:1px solid #e3e3e3; overflow:hidden; transition:border-color .2s ease; } .e-faq details[open]{ border-color:#111; } .e-faq summary{ list-style:none; cursor:pointer; padding:20px 60px 20px 24px; font-size:17px; font-weight:800; position:relative; } .e-faq summary::-webkit-details-marker{ display:none; } .e-faq summary::after{ content:''; position:absolute; right:22px; top:50%; transform:translateY(-50%); width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .25s ease; } .e-faq details[open] summary::after{ transform:translateY(-50%) rotate(180deg); } .e-faq p{ margin:0; padding:0 24px 22px; font-size:15.5px; line-height:1.7; color:#555; } /* ---- Есть ещё вопросы ---- */ .e-contact{ display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center; } .e-contact h2{ font-size:clamp(26px,3.4vw,40px); font-weight:900; text-transform:uppercase; margin:0 0 14px; } .e-contact p{ font-size:17px; line-height:1.6; color:#444; margin:0 0 26px; } .e-contact .e-btns{ flex-direction:column; align-items:stretch; } .e-contact .e-btns .e-btn{ width:100%; } /* footer.site-footer{} удалён — конфликтовал с .site-footer ниже (padding/text-align) */ @media (max-width:900px){ .site-header{ padding:14px 18px; } .site-nav{ display:none; } .e-wrap{ padding:0 18px; } .e-section{ padding:54px 0; } .e-skills,.e-why,.e-teacher,.e-contact{ grid-template-columns:1fr; gap:24px; } .e-whom{ grid-template-columns:1fr; } .e-whom__img{ aspect-ratio:4/3; max-height:none; } .e-whom__panel{ margin-left:0; padding:30px 22px; } .e-disc__head{ grid-template-columns:1fr; gap:18px; } .e-gallery{ grid-template-columns:repeat(2,1fr); } .e-courses{ grid-template-columns:1fr; } .e-demo{ flex-direction:column; align-items:flex-start; } .e-demo .e-btn{ width:100%; } .e-hero{ min-height:auto; padding:120px 0 50px; } } /* ===== Страница «О школе» ===== */ .e-split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; } .e-split h2{ margin:0; } .e-manifest-big{ font-size:clamp(26px,3.4vw,42px); line-height:1.12; font-weight:900; text-transform:uppercase; margin:0; } .e-manifest-big span{ color:var(--accent); } .e-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .e-card{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; display:flex; flex-direction:column; box-shadow:0 4px 18px rgba(0,0,0,.05); transition:transform .3s ease, box-shadow .3s ease; } .e-card:hover{ transform:translateY(-5px); box-shadow:0 14px 34px rgba(0,0,0,.12); } .e-card__img{ aspect-ratio:4/3; overflow:hidden; } .e-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .e-card:hover .e-card__img img{ transform:scale(1.05); } .e-card__body{ padding:24px 26px 28px; } .e-card__body h3{ font-size:20px; text-transform:uppercase; font-weight:900; margin:0 0 12px; } .e-card__body p{ font-size:15px; line-height:1.65; color:#555; margin:0; } .e-steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .e-step{ background:#fff; padding:36px 34px; } .e-step__n{ font-size:15px; font-weight:900; color:var(--accent); letter-spacing:.1em; } .e-step h3{ font-size:20px; text-transform:uppercase; font-weight:900; margin:12px 0 10px; } .e-step p{ font-size:15px; line-height:1.6; color:#555; margin:0; } .e-quote{ max-width:900px; margin:0 auto; text-align:center; } .e-quote__mark{ font-size:80px; line-height:.4; color:var(--accent); font-weight:900; } .e-quote blockquote{ font-size:clamp(22px,2.6vw,32px); line-height:1.4; font-weight:700; margin:16px 0 24px; } .e-quote__author{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } @media (max-width:900px){ .e-split{ grid-template-columns:1fr; gap:24px; } .e-cards{ grid-template-columns:1fr; } .e-steps{ grid-template-columns:1fr; } } /* ===== Tutor LMS — каталог под бренд ===== */ .tutor-wrap, .tutor-course-card, .tutor-course-card *, .tutor-courses *{ font-family:var(--font); } .tutor-course-card{ border:1px solid var(--line) !important; border-radius:14px !important; overflow:hidden !important; box-shadow:none !important; transition:transform .3s ease, box-shadow .3s ease; } .tutor-course-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.14); } .tutor-course-card .tutor-card-image-top{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .tutor-course-card:hover .tutor-card-image-top{ transform:scale(1.05); } .tutor-course-name a, .tutor-course-name{ font-weight:900 !important; color:var(--ink) !important; line-height:1.25 !important; } .tutor-course-name a:hover{ color:var(--accent) !important; } a.tutor-btn, .tutor-btn-primary, .tutor-course-card .tutor-btn{ background:#111 !important; color:#fff !important; border:1px solid #111 !important; border-radius:6px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.04em !important; transition:background .25s ease, border-color .25s ease; } a.tutor-btn:hover, .tutor-btn-primary:hover, .tutor-course-card .tutor-btn:hover{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; } /* акцент-ссылки и иконки Tutor — наш красный */ .tutor-wrap a:not(.tutor-btn):hover{ color:var(--accent); } .tutor-form-select, .tutor-course-filter{ border-radius:8px !important; font-weight:600; } /* ===== Контакт / форма-заявка ===== */ .e-contact-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; } .e-contact-info p{ font-size:16px; line-height:1.8; color:#444; margin:0 0 14px; } .e-contact-info strong{ color:var(--ink); } .e-form{ display:grid; gap:16px; } .e-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .e-field{ display:flex; flex-direction:column; gap:6px; } .e-field label{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#555; } .e-field input, .e-field textarea{ font-family:var(--font); font-size:16px; padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); } .e-field input:focus, .e-field textarea:focus{ outline:none; border-color:var(--accent); } .e-form-note{ background:#eef7ee; border:1px solid #bfe0bf; color:#256b25; padding:14px 18px; border-radius:8px; font-weight:600; margin-bottom:16px; } .e-form-note.err{ background:#fbeaea; border-color:#e0bbbb; color:#9b2c2c; } @media (max-width:700px){ .e-contact-grid{ grid-template-columns:1fr; gap:28px; } .e-form .row{ grid-template-columns:1fr; } } /* ===== Футер ===== */ .site-footer{ background:#111; color:rgba(255,255,255,.6); padding:56px 0 0; font-size:14px; } .site-footer .e-wrap{ max-width:1180px; } .site-footer__in{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:36px; } .site-footer__brand .brand{ color:#fff; font-weight:900; font-size:22px; margin-bottom:8px; } .site-footer__brand p{ margin:0; max-width:36ch; line-height:1.6; } .site-footer__nav{ display:flex; flex-direction:column; gap:12px; } .site-footer__nav a{ color:rgba(255,255,255,.7); } .site-footer__nav a:hover{ color:#fff; } .site-footer__copy{ border-top:1px solid rgba(255,255,255,.12); padding:22px 0; text-align:center; font-size:13px; color:rgba(255,255,255,.45); } .e-prose{ font-size:16px; line-height:1.8; color:#333; } .e-prose p{ margin:0 0 16px; } .e-prose h2,.e-prose h3{ margin:28px 0 12px; text-transform:none; } .e-prose ul{ padding-left:22px; } .e-prose li{ margin-bottom:8px; } @media (max-width:700px){ .site-footer__in{ flex-direction:column; gap:28px; } } /* ===== Шапка: аккаунт (иконка + выпадашка), бургер ===== */ .nav-toggle{ display:none; } .burger{ display:none; } .site-cart{ position:relative; display:flex; align-items:center; color:#222; margin-left:auto; padding:6px; transition:color .2s ease; } .site-cart:hover{ color:var(--accent); } .site-cart svg{ width:23px; height:23px; } .site-cart__count{ position:absolute; top:-1px; right:-3px; min-width:16px; height:16px; padding:0 4px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; line-height:16px; text-align:center; } .site-cart__count[data-count="0"]{ display:none; } .site-account{ position:relative; margin-left:6px; } .site-account__icon{ display:flex; align-items:center; gap:2px; background:none; border:0; cursor:pointer; color:#222; padding:6px 6px 6px 9px; border-radius:22px; transition:color .2s ease, background .2s ease; } .site-account__icon:hover{ color:var(--accent); background:var(--soft); } .site-account__icon > svg:first-child{ width:23px; height:23px; } .site-account__caret{ width:14px; height:14px; opacity:.65; transition:transform .2s ease; } .site-account:hover .site-account__caret, .site-account.is-open .site-account__caret{ transform:rotate(180deg); } .site-account__menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:186px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 38px rgba(0,0,0,.13); padding:7px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:60; } .site-account__menu::before{ content:''; position:absolute; top:-10px; left:0; right:0; height:10px; } .site-account:hover .site-account__menu, .site-account:focus-within .site-account__menu, .site-account.is-open .site-account__menu{ opacity:1; visibility:visible; transform:none; } .site-account__menu a{ display:block; padding:11px 15px; font-size:14px; font-weight:600; color:#222; border-radius:8px; transition:background .15s ease, color .15s ease; } .site-account__menu a:hover{ background:var(--soft); color:var(--accent); } @media (max-width:900px){ .site-header{ flex-wrap:wrap; gap:0; padding:12px 18px; } .site-header .brand{ margin-right:auto; } .burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; cursor:pointer; } .burger span{ display:block; height:2px; width:24px; background:#111; transition:.25s ease; } .nav-toggle:checked ~ .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle:checked ~ .burger span:nth-child(2){ opacity:0; } .nav-toggle:checked ~ .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .site-header__menu{ display:none; flex-direction:column; align-items:flex-start; gap:18px; width:100%; padding:18px 2px 6px; } .nav-toggle:checked ~ .site-header__menu{ display:flex; } .site-nav{ display:flex !important; flex-direction:column; gap:16px; width:100%; } .site-account{ margin-left:0; width:100%; } .site-account__icon{ display:none; } .site-account__menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:10px 0 0; min-width:0; width:100%; } .site-account__menu::before{ display:none; } .site-account__menu a{ padding:12px 2px; } } /* ===== Tutor кнопки: primary чёрная, ссылки — без фона ===== */ a.tutor-btn{ background:transparent !important; color:var(--accent) !important; border:none !important; padding:0 !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; } a.tutor-btn:hover{ background:transparent !important; color:#8f2c22 !important; } .tutor-btn-primary, button.tutor-btn[type=submit], .tutor-course-card a.tutor-btn{ background:#111 !important; color:#fff !important; border:1px solid #111 !important; border-radius:6px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.04em !important; padding:14px 22px !important; } .tutor-btn-primary:hover, button.tutor-btn[type=submit]:hover, .tutor-course-card a.tutor-btn:hover{ background:var(--accent) !important; border-color:var(--accent) !important; } /* ===== Кнопки Tutor: правильная иерархия (фикс «криво») ===== */ .tutor-btn.tutor-btn-ghost{ background:#fff !important; color:#555 !important; border:1px solid var(--line) !important; border-radius:8px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:0 !important; box-shadow:none !important; } .tutor-btn.tutor-btn-ghost:hover{ background:#faf8f5 !important; color:var(--accent) !important; border-color:#e0c4c0 !important; } .tutor-btn.tutor-btn-ghost svg path{ fill:currentColor !important; } /* Чистый компактный чекбокс вместо пустой коробки 24px без галочки */ .tutor-form-check{ display:flex !important; align-items:center !important; } .tutor-form-check .tutor-form-check-input{ appearance:auto !important; -webkit-appearance:auto !important; width:17px !important; height:17px !important; min-width:17px !important; flex:0 0 auto !important; border:none !important; border-radius:4px !important; accent-color:var(--accent) !important; margin:0 9px 0 0 !important; } .tutor-form-check label{ margin:0 !important; line-height:1.35 !important; } /* Кнопки-действия курса (Закладки/Поделиться) — чистые иконка+текст, без рамок-пилюль */ a.tutor-btn.tutor-course-wishlist-btn, a.tutor-btn.tutor-course-share-btn, button.tutor-btn.tutor-course-wishlist-btn, button.tutor-btn.tutor-course-share-btn{ background:transparent !important; border:none !important; box-shadow:none !important; color:#8a8a8a !important; font-weight:600 !important; padding:6px 10px 6px 4px !important; border-radius:8px !important; min-height:0 !important; } a.tutor-btn.tutor-course-wishlist-btn:hover, a.tutor-btn.tutor-course-share-btn:hover, button.tutor-btn.tutor-course-wishlist-btn:hover, button.tutor-btn.tutor-course-share-btn:hover{ background:transparent !important; color:var(--accent) !important; } a.tutor-btn.tutor-course-wishlist-btn svg, a.tutor-btn.tutor-course-share-btn svg, button.tutor-btn.tutor-course-wishlist-btn svg, button.tutor-btn.tutor-course-share-btn svg{ opacity:.9; } .tutor-btn.tutor-btn-link{ background:transparent !important; color:var(--accent) !important; border:none !important; box-shadow:none !important; padding:0 !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; text-decoration:underline !important; text-underline-offset:3px; } .tutor-btn.tutor-btn-link:hover{ color:#8f2c22 !important; } /* «Забыли пароль?» в форме логина — обычная ссылка, а не кнопка-коробка */ a.tutor-btn[href*="retrieve-password"]{ background:transparent !important; color:var(--accent) !important; border:none !important; box-shadow:none !important; padding:0 !important; min-height:0 !important; height:auto !important; line-height:1.3 !important; font-weight:600 !important; text-transform:none !important; letter-spacing:0 !important; white-space:nowrap !important; text-decoration:none !important; } a.tutor-btn[href*="retrieve-password"]:hover{ color:#8f2c22 !important; background:transparent !important; text-decoration:underline !important; text-underline-offset:3px; } /* Главный CTA записи — красный, заметный */ button.tutor-btn.tutor-enroll-course-button, a.tutor-btn.tutor-enroll-course-button{ background:var(--accent) !important; border-color:var(--accent) !important; font-size:16px !important; padding:17px 22px !important; } button.tutor-btn.tutor-enroll-course-button:hover, a.tutor-btn.tutor-enroll-course-button:hover{ background:#8f2c22 !important; border-color:#8f2c22 !important; } /* убрать вводящую в заблуждение «Бесплатно» — цена в блоке-хайлайтах */ .tutor-course-single-pricing{ display:none !important; } /* ===== Продающий блок-хайлайты курса ===== */ .course-highlights{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; padding:26px 0; margin:0 0 26px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .course-highlights__facts{ display:grid; grid-template-columns:repeat(4,auto); gap:34px; } .course-highlights__facts > div{ display:flex; flex-direction:column; gap:3px; } .course-highlights__facts b{ font-size:18px; font-weight:900; text-transform:uppercase; line-height:1; } .course-highlights__facts span{ font-size:12px; color:#777; text-transform:uppercase; letter-spacing:.04em; } .ch-price{ display:flex; align-items:center; gap:12px; } .ch-now{ font-size:30px; font-weight:900; } .ch-old{ font-size:17px; color:#aaa; text-decoration:line-through; } .ch-badge{ background:var(--accent); color:#fff; font-size:13px; font-weight:800; padding:5px 11px; border-radius:5px; } @media (max-width:760px){ .course-highlights{ flex-direction:column; align-items:flex-start; gap:22px; } .course-highlights__facts{ grid-template-columns:repeat(2,1fr); gap:18px 28px; width:100%; } } /* ===== Scroll-reveal анимации ===== */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); will-change:opacity,transform; } .reveal.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } } /* ===== Главная: горизонтальная продающая карточка курса ===== */ .hp-course-feature{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 14px 38px rgba(0,0,0,.09); transition:transform .3s ease, box-shadow .3s ease; } .hp-course-feature:hover{ transform:translateY(-4px); box-shadow:0 24px 54px rgba(0,0,0,.14); } .hp-course-feature__media{ position:relative; display:block; min-height:360px; overflow:hidden; background:#000; } .hp-course-feature__media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .6s ease; } .hp-course-feature:hover .hp-course-feature__media img{ transform:scale(1.04); } .hp-course-feature__media .badge{ position:absolute; top:16px; left:16px; background:var(--accent); color:#fff; font-size:13px; font-weight:800; padding:6px 12px; border-radius:5px; z-index:2; } .hp-course-feature__body{ padding:42px 44px; display:flex; flex-direction:column; gap:16px; } .hp-course-feature__meta{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); } .hp-course-feature__title{ font-size:clamp(20px,2vw,26px); font-weight:900; line-height:1.2; margin:0; text-transform:none; } .hp-course-feature__title a:hover{ color:var(--accent); } .hp-course-feature__desc{ font-size:15px; line-height:1.7; color:#555; margin:0; } .hp-course-feature__foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:auto; padding-top:10px; } .hp-course-feature__price{ display:flex; align-items:baseline; gap:10px; } .hp-course-feature__price .now{ font-size:30px; font-weight:900; } .hp-course-feature__price .old{ font-size:16px; color:#aaa; text-decoration:line-through; } @media (max-width:820px){ .hp-course-feature{ grid-template-columns:1fr; } .hp-course-feature__media{ min-height:0; aspect-ratio:16/10; position:relative; } .hp-course-feature__media img{ position:absolute; } .hp-course-feature__body{ padding:28px 24px; } .hp-course-feature__foot{ flex-direction:column; align-items:stretch; } .hp-course-feature__foot .e-btn{ width:100%; } } /* ===== Видео-отзыв (соцдоказательство) ===== */ .e-video-testimonial{ display:grid; grid-template-columns:320px 1fr; gap:56px; align-items:center; } .e-video-testimonial__video{ overflow:hidden; background:#000; aspect-ratio:9/16; max-height:560px; } .e-video-testimonial__video video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; } .e-video-testimonial__text blockquote{ font-size:clamp(16px,1.7vw,21px); line-height:1.55; font-weight:400; color:#2a2a2a; margin:4px 0 22px; } .e-video-testimonial__author{ font-weight:900; text-transform:uppercase; font-size:14px; letter-spacing:.04em; } .e-video-testimonial__author span{ display:block; color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.06em; margin-top:5px; } @media (max-width:820px){ .e-video-testimonial{ grid-template-columns:1fr; gap:26px; justify-items:center; text-align:center; } .e-video-testimonial__video{ width:min(280px,80vw); } .e-video-testimonial__text{ max-width:420px; } } /* ===== Лайтбокс галереи (клик по картинке — полноэкранный просмотр) ===== */ .e-gallery a{ cursor:zoom-in; display:block; } .e-lb{ position:fixed; inset:0; z-index:9999; background:rgba(15,14,13,.95); display:none; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; } .e-lb.is-open{ display:flex; animation:e-lb-in .18s ease; } @keyframes e-lb-in{ from{ opacity:0 } to{ opacity:1 } } .e-lb__img{ height:min(80vh,560px); width:auto; max-width:92vw; object-fit:contain; border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.55); background:#1a1a1a; } .e-lb__close{ position:absolute; top:16px; right:22px; background:none; border:0; color:#fff; font-size:42px; line-height:1; cursor:pointer; opacity:.85; padding:6px; } .e-lb__close:hover{ opacity:1; } .e-lb__nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.13); border:0; color:#fff; width:54px; height:54px; border-radius:50%; font-size:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; } .e-lb__nav:hover{ background:rgba(255,255,255,.24); } .e-lb__prev{ left:20px; } .e-lb__next{ right:20px; } .e-lb__count{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.65); font-size:13px; letter-spacing:.05em; } @media (max-width:600px){ .e-lb__nav{ width:44px; height:44px; font-size:24px; } .e-lb__prev{ left:8px } .e-lb__next{ right:8px } .e-lb__close{ top:8px; right:12px } } /* ===== Шапка каталога курсов ===== */ .e-courses-header{ padding:48px 0 26px; } .e-courses-header .e-h2{ margin-bottom:14px; } .e-courses-header__sub{ font-size:18px; line-height:1.6; color:#555; max-width:700px; margin:0; } @media (max-width:760px){ .e-courses-header{ padding:32px 0 18px; } .e-courses-header__sub{ font-size:16px; } } /* ===== Tutor: фирменный красный вместо синего (#3E64DE) ===== */ html{ --tutor-color-primary: #AE382C !important; --tutor-color-primary-hover: #8F2C22 !important; --tutor-color-primary-light: rgba(174,56,44,.10) !important; --tutor-color-primary-bg: rgba(174,56,44,.08) !important; } /* ===== Фичи с иконками ===== */ .e-feat--icon{ display:flex; gap:18px; align-items:flex-start; border-left:none; padding:26px 28px; background:var(--soft); border:1px solid #ece7df; border-radius:14px; transition:transform .3s ease, box-shadow .3s ease; } .e-feat--icon:hover{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.08); } .e-feat__icon{ flex:0 0 auto; width:52px; height:52px; border-radius:13px; background:rgba(174,56,44,.10); display:flex; align-items:center; justify-content:center; color:var(--accent); transition:background .3s ease, color .3s ease; } .e-feat--icon:hover .e-feat__icon{ background:var(--accent); color:#fff; } .e-feat__icon svg{ width:26px; height:26px; } .e-feat--icon .e-feat__txt h3{ margin-top:3px; } /* ===== Плейсхолдер обложки в каталоге (без белого мигания) ===== */ .tutor-course-card .tutor-ratio, .tutor-course-thumbnail .tutor-ratio{ background:#efece7; } /* ===================== Личный кабинет студента — направление C ===================== */ /* Базовая защита от переполнения (фикс мобильной кнопки и т.п.) */ .esse-dash, .esse-dash *{ box-sizing:border-box; font-family:var(--font); } /* Layout */ .esse-dash{ background:#faf8f5; } .esse-dash .esse-dash__inner{ display:grid; grid-template-columns:268px 1fr; max-width:1180px; margin:32px auto; min-height:560px; border:1px solid #e7e2da; border-radius:18px; overflow:hidden; box-shadow:0 16px 46px rgba(0,0,0,.08); background:#fff; } /* Sidebar */ .esse-dash__side{ background:#1f1c1b; color:#fff; padding:26px 16px; } .esse-dash__profile{ display:flex; align-items:center; gap:13px; padding:0 6px 20px; border-bottom:1px solid rgba(255,255,255,.10); margin-bottom:14px; } .esse-dash__avatar img, .esse-dash__avatar .tutor-avatar{ width:50px !important; height:50px !important; border-radius:50% !important; object-fit:cover; display:block; } .esse-dash__avatar{ flex:0 0 auto; line-height:0; } .esse-dash__who{ display:flex; flex-direction:column; min-width:0; } .esse-dash__name{ font-size:15px; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .esse-dash__role{ font-size:12px; color:#a59f9a; margin-top:2px; } .esse-dash__nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; } .esse-dash__item{ margin:0; } .esse-dash__item a{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:9px; font-size:14px; color:#d7d2cd; text-decoration:none; transition:background .15s, color .15s; } .esse-dash__item a svg{ width:18px; height:18px; flex:0 0 auto; } /* Спецификация выше .tutor-wrap a:not(.tutor-btn):hover (иначе текст пункта краснеет на тёмном фоне и не читается). */ .esse-dash .esse-dash__side .esse-dash__item a:hover{ background:rgba(255,255,255,.07); color:#fff; } .esse-dash__item.is-active a{ background:var(--accent); color:#fff; font-weight:600; } .esse-dash .esse-dash__side .esse-dash__item.is-active a:hover{ background:var(--accent); color:#fff; } .esse-dash__sep{ height:1px; background:rgba(255,255,255,.10); margin:10px 6px; list-style:none; } .esse-dash__burger{ display:none; } /* Content */ .esse-dash__main{ padding:30px 32px; background:#faf8f5; } .esse-dh__hi{ font-size:26px; font-weight:900; text-transform:uppercase; margin:0 0 4px; color:#1b1b1b; } .esse-dh__hi u{ text-decoration:none; border-bottom:4px solid var(--accent); padding-bottom:3px; } .esse-dh__sub{ color:#7c756f; font-size:14px; margin:0 0 22px; } /* Resume banner */ .esse-dh__resume{ display:flex; align-items:center; gap:18px; background:linear-gradient(100deg,#26211f,#3a302d); color:#fff; border-radius:14px; padding:18px 22px; margin-bottom:24px; text-decoration:none; transition:transform .2s, box-shadow .2s; } .esse-dh__resume:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.22); } .esse-dh__resume-th{ width:78px; height:56px; border-radius:9px; background:#8f4f46 center/cover no-repeat; flex:0 0 auto; } .esse-dh__resume-tx{ flex:1; min-width:0; } .esse-dh__resume-tx small{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:#c9a59f; } .esse-dh__resume-tx strong{ display:block; font-size:15px; font-weight:700; margin-top:3px; } .esse-dh__resume-go{ background:var(--accent); color:#fff; font-size:13px; font-weight:700; padding:11px 20px; border-radius:8px; white-space:nowrap; flex:0 0 auto; } /* Stats */ .esse-dh__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; } .esse-dh__st{ background:#fff; border:1px solid #ece7df; border-radius:13px; padding:16px; display:flex; align-items:center; gap:13px; } .esse-dh__st-ic{ width:42px; height:42px; border-radius:11px; background:rgba(174,56,44,.09); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .esse-dh__st-ic svg{ width:21px; height:21px; } .esse-dh__st-tx{ display:flex; flex-direction:column; } .esse-dh__st-tx b{ font-size:24px; font-weight:900; line-height:1; } .esse-dh__st-tx span{ font-size:11px; color:#8b847e; text-transform:uppercase; letter-spacing:.03em; } /* Sections */ .esse-dh__sec{ font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin:0 0 14px; color:#1b1b1b; } /* Current courses */ .esse-dh__courses{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px; } .esse-dh__co{ background:#fff; border:1px solid #ece7df; border-radius:13px; overflow:hidden; display:flex; } .esse-dh__co-th{ width:104px; flex:0 0 auto; background:#8f4f46 center/cover no-repeat; } .esse-dh__co-in{ padding:14px 15px; flex:1; min-width:0; } .esse-dh__co-in h4{ font-size:14px; margin:0 0 9px; font-weight:700; line-height:1.3; } .esse-dh__pr{ height:6px; background:#efe9e2; border-radius:4px; overflow:hidden; margin-bottom:6px; } .esse-dh__pr em{ display:block; height:100%; background:var(--accent); } .esse-dh__pct{ font-size:11px; color:#8b847e; } .esse-dh__co-btn{ margin-top:11px; display:inline-block; font-size:11px; font-weight:700; color:#fff; background:#1b1b1b; padding:7px 14px; border-radius:7px; text-decoration:none; transition:background .15s; } .esse-dh__co-btn:hover{ background:var(--accent); } /* Кнопки-ссылки кабинета на hover сохраняют свой цвет (иначе .tutor-wrap a:hover красит текст в красный → на красном фоне не видно). */ .esse-dash a.esse-dh__co-btn:hover{ color:#fff; } .esse-dash a.esse-dh__resume:hover, .esse-dash a.esse-dh__resume:hover strong{ color:#fff; } .esse-dash a.esse-dh__rc:hover, .esse-dash a.esse-dh__rc:hover .esse-dh__rc-title{ color:#1b1b1b; } .esse-dash a.esse-dh__rc:hover .esse-dh__rc-price{ color:var(--accent); } /* Recommended */ .esse-dh__recs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .esse-dh__rc{ background:#fff; border:1px solid #ece7df; border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow .2s, transform .2s; } .esse-dh__rc:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.10); } .esse-dh__rc-th{ display:block; height:88px; background:#b07a70 center/cover no-repeat; } .esse-dh__rc-in{ display:block; padding:12px; } .esse-dh__rc-title{ display:block; font-size:12.5px; font-weight:700; line-height:1.3; margin-bottom:7px; } .esse-dh__rc-price{ font-size:14px; font-weight:900; color:var(--accent); } /* ---------- Адаптив ---------- */ @media (max-width:900px){ .esse-dash .esse-dash__inner{ grid-template-columns:1fr; margin:0; border:0; border-radius:0; box-shadow:none; min-height:0; } .esse-dash__side{ padding:14px 14px 12px; position:relative; } .esse-dash__profile{ padding-bottom:0; border-bottom:0; margin-bottom:0; } .esse-dash__burger{ display:flex; position:absolute; top:24px; right:18px; width:26px; height:20px; flex-direction:column; justify-content:space-between; background:none; border:0; cursor:pointer; padding:0; } .esse-dash__burger span{ display:block; height:2.5px; background:#fff; border-radius:2px; } .esse-dash__nav{ max-height:0; overflow:hidden; transition:max-height .3s ease; } .esse-dash.nav-open .esse-dash__nav{ max-height:640px; margin-top:14px; } .esse-dash__main{ padding:20px 16px; } .esse-dh__hi{ font-size:20px; } .esse-dh__resume{ flex-wrap:wrap; gap:13px; padding:15px; } .esse-dh__resume-go{ width:100%; text-align:center; } .esse-dh__stats{ grid-template-columns:1fr 1fr; } .esse-dh__courses{ grid-template-columns:1fr; } .esse-dh__recs{ grid-template-columns:1fr; } } /* ===== Футер: контакты и соцсети из настроек ===== */ .site-footer__contacts{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px; } .site-footer__contacts a{ color:#cfc9c4; font-size:14px; text-decoration:none; transition:color .15s; } .site-footer__contacts a:hover{ color:#fff; } .site-footer__socials{ display:flex; gap:12px; margin-top:14px; } .site-footer__socials a{ width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#cfc9c4; transition:background .15s, color .15s; } .site-footer__socials a:hover{ background:var(--accent); color:#fff; } .site-footer__socials svg{ width:18px; height:18px; } .site-footer__legal{ max-width:1180px; margin:0 auto; padding:14px 0 0; font-size:12px; color:#8a847e; text-align:center; } /* ===== Кнопки прогресса курса (course-entry-box): правильная иерархия ===== */ /* «Начать обучение» — заметная красная кнопка (главный CTA) */ a.tutor-btn.tutor-btn-primary.tutor-btn-block{ background:var(--accent) !important; color:#fff !important; border:1px solid var(--accent) !important; border-radius:8px !important; padding:15px 22px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.04em !important; text-decoration:none !important; } a.tutor-btn.tutor-btn-primary.tutor-btn-block:hover{ background:#8f2c22 !important; border-color:#8f2c22 !important; color:#fff !important; } /* «Завершить курс» — вторичная (контур), не перетягивает внимание */ button.tutor-btn[name="complete_course_btn"]{ background:transparent !important; color:var(--accent) !important; border:1px solid var(--accent) !important; border-radius:8px !important; font-weight:700 !important; } button.tutor-btn[name="complete_course_btn"]:hover{ background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; } /* ===== Адаптив малых экранов (<600px) — добивка по аудиту ===== */ @media (max-width:600px){ .e-gallery{ grid-template-columns:repeat(2,1fr) !important; gap:10px; } .e-faq summary{ padding:16px 56px 16px 18px; font-size:15px; } .e-faq summary::after{ right:14px; } .e-demo{ padding:24px 20px; } .e-demo__title{ font-size:22px; } .esse-dash.nav-open .esse-dash__nav{ max-height:460px; } .site-header .brand small{ display:none; } } /* honeypot формы заявки — скрыт от людей, виден ботам */ .esse-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; } .esse-dh__empty{ background:#fff; border:1px solid #ece7df; border-radius:13px; padding:26px; text-align:center; margin-bottom:26px; } .esse-dh__empty p{ color:#7c756f; margin:0 0 14px; } /* ===================== Блог: лента ===================== */ .e-blog__filter{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 30px; } .e-blog__filter a{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#6b6b6b; border:1px solid var(--line); padding:8px 16px; border-radius:30px; transition:all .15s; } .e-blog__filter a:hover{ color:#111; border-color:#111; } .e-blog__filter a.is-active{ background:#111; color:#fff; border-color:#111; } .e-blog__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .e-blog__card{ border:1px solid #e3e3e3; overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:border-color .15s ease; } .e-blog__card:hover{ border-color:#bbb; } .e-blog__card-media{ display:block; aspect-ratio:16/10; background:#e6e6e6 center/cover no-repeat; } .e-blog__card-media--ph{ position:relative; background:#ececec; display:flex; align-items:center; justify-content:center; overflow:hidden; } .e-blog__card-media--ph::before{ content:'E'; font-family:var(--font); font-weight:900; font-size:104px; line-height:1; color:rgba(174,56,44,.11); transition:transform .5s ease; } .e-blog__card:hover .e-blog__card-media--ph::before{ transform:scale(1.08); } .e-blog__card-media--ph::after{ content:''; position:absolute; left:0; top:0; width:48px; height:4px; background:var(--accent); } .e-blog__card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1; } .e-blog__card-cat{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); } .e-blog__card-title{ font-size:19px; font-weight:800; line-height:1.25; margin:0; } .e-blog__card-title a:hover{ color:var(--accent); } .e-blog__card-meta{ font-size:12px; color:#6f6a63; } .e-blog__card-excerpt{ font-size:14.5px; line-height:1.55; color:#4a4a4a; margin:0; } .e-blog__pager{ margin-top:38px; } .e-blog__pager .page-numbers{ display:inline-flex; min-width:42px; height:42px; align-items:center; justify-content:center; padding:0 12px; border:1px solid var(--line); border-radius:8px; margin:0 4px; font-weight:700; color:#111; } .e-blog__pager .page-numbers.current{ background:#111; color:#fff; border-color:#111; } .e-blog__pager .page-numbers:hover{ border-color:#111; } .e-blog__empty{ color:#6b6b6b; padding:30px 0; } @media (max-width:980px){ .e-blog__grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .e-blog__grid{ grid-template-columns:1fr; } } /* ===================== Блог: статья ===================== */ .e-article{ padding:48px 0 70px; } .e-article__head{ max-width:760px; margin:0 auto; } .e-article__crumbs{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#6f6a63; margin-bottom:18px; } .e-article__crumbs a{ color:#6f6a63; } .e-article__crumbs a:hover{ color:var(--accent); } .e-article__crumbs span{ margin:0 8px; } .e-article__title{ font-size:clamp(28px,4vw,44px); font-weight:900; line-height:1.1; text-transform:uppercase; margin:0 0 16px; } .e-article__meta{ display:flex; flex-wrap:wrap; gap:16px; font-size:13px; color:#6f6a63; margin-bottom:30px; } .e-article__cat{ color:var(--accent); font-weight:800; text-transform:uppercase; letter-spacing:.04em; } .e-article__hero{ width:100%; max-width:760px; margin:0 auto 40px; aspect-ratio:16/9; background:#e9e4dc center/cover no-repeat; } .e-article__body{ max-width:760px; margin:0 auto; font-size:18px; line-height:1.8; color:#2c2c2c; } .e-article__body h2{ font-size:28px; font-weight:900; text-transform:uppercase; margin:42px 0 14px; line-height:1.15; } .e-article__body h3{ font-size:22px; font-weight:800; margin:32px 0 12px; } .e-article__body p{ margin:0 0 22px; } .e-article__body img{ border-radius:12px; margin:10px 0 26px; } .e-article__body ul, .e-article__body ol{ margin:0 0 22px; padding-left:26px; } .e-article__body li{ margin-bottom:10px; } .e-article__body blockquote{ border-left:4px solid var(--accent); margin:28px 0; padding:6px 0 6px 24px; font-size:21px; font-style:italic; color:#1b1b1b; } .e-article__body a{ color:var(--accent); text-decoration:underline; } .e-article__cta{ max-width:760px; margin:48px auto; background:var(--soft); border-radius:16px; padding:32px 36px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .e-article__cta h3{ font-size:22px; font-weight:900; text-transform:uppercase; margin:0 0 8px; } .e-article__cta p{ margin:0; color:#4a4a4a; max-width:46ch; } .e-article__related{ max-width:760px; margin:60px auto 0; } .e-article__related .e-h2{ margin-bottom:26px; } @media (max-width:640px){ .e-article__body{ font-size:16.5px; } .e-article__cta{ padding:24px; } } /* ===================== 404 + поиск ===================== */ .e-404{ max-width:760px; } .e-404__links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; } .e-search-form{ display:flex; gap:10px; max-width:520px; margin:22px 0 30px; } .e-search-form__input{ flex:1; height:50px; padding:0 16px; border:1px solid var(--line); border-radius:8px; font-size:15px; font-family:var(--font); } .e-search-form__input:focus{ outline:none; border-color:var(--accent); } .e-search-form__btn{ height:50px; padding:0 24px; background:#111; color:#fff; border:0; border-radius:8px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:13px; cursor:pointer; font-family:var(--font); } .e-search-form__btn:hover{ background:var(--accent); } .e-search__results{ display:flex; flex-direction:column; gap:18px; margin-top:8px; } .e-search__item{ border:1px solid var(--line); border-radius:12px; padding:20px 24px; background:#fff; transition:box-shadow .2s, transform .2s; } .e-search__item:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.08); } .e-search__type{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); } .e-search__title{ font-size:20px; font-weight:800; line-height:1.25; margin:6px 0 8px; } .e-search__title a:hover{ color:var(--accent); } .e-search__excerpt{ font-size:14.5px; line-height:1.6; color:#4a4a4a; margin:0 0 10px; } .e-search__more{ font-size:13px; font-weight:700; color:var(--accent); } @media (max-width:560px){ .e-search-form{ flex-direction:column; } } /* Карусель-галерея на странице курса («Фотографии из мастерской») */ .e-cgal{ position:relative; margin:8px 0 52px; } .e-course-demo{ margin-top:56px; padding:28px 36px; } .e-course-demo .e-demo__title{ font-size:clamp(18px,2.1vw,24px); flex:1 1 auto; } .e-course-dates{ list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; } .e-course-dates li{ border:1px solid var(--line); border-left:3px solid var(--accent); padding:18px 22px; font-size:16px; font-weight:700; line-height:1.3; } .e-course-dates li small{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#6b6b6b; margin-bottom:6px; } .e-course-dates__note{ font-size:14.5px; color:#6a6a6a; margin:0 0 44px; } @media (max-width:560px){ .e-course-dates{ grid-template-columns:1fr; } } .e-course-cols{ display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:8px; border-top:2px solid #111; } .e-course-col{ padding:24px 32px; border-left:1px solid var(--line); } .e-course-col:first-child{ border-left:none; padding-left:0; } .e-course-col:last-child{ padding-right:0; } .e-course-col__h{ font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin:0 0 14px; } .e-course-col__t{ font-size:15.5px; line-height:1.7; color:#3a3a3a; } .e-course-col__t p{ margin:0 0 10px; } .e-course-col__t p:last-child{ margin-bottom:0; } .e-course-faq-h{ margin-top:56px; } @media (max-width:820px){ .e-course-cols{ grid-template-columns:1fr; border-top:none; } .e-course-col{ border-left:none; border-top:2px solid #111; padding:18px 0; } } .e-cgal__track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; padding-bottom:2px; scrollbar-width:none; } .e-cgal__track::-webkit-scrollbar{ display:none; } .e-cgal__item{ position:relative; flex:0 0 auto; width:min(440px,80%); aspect-ratio:4/3; overflow:hidden; background:#eee; scroll-snap-align:start; cursor:zoom-in; display:block; } .e-cgal__item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; display:block; } .e-cgal__item:hover img{ transform:scale(1.05); } .e-cgal__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); color:#111; font-size:24px; line-height:1; cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,.12); transition:background .2s ease, color .2s ease; } .e-cgal__arrow:hover{ background:#111; color:#fff; } .e-cgal__prev{ left:-10px; } .e-cgal__next{ right:-10px; } @media (max-width:640px){ .e-cgal__item{ width:84%; } .e-cgal__arrow{ display:none; } } /* ESSE editorial identity: original .nl composition, with Russian content. */ ::selection{ background:var(--accent); color:#fff; } html{ scroll-padding-top:160px; } .e-skip-link{ position:fixed; top:12px; left:16px; z-index:100000; padding:14px 20px; background:#fff; color:#111; transform:translateY(-160%); } .e-skip-link:focus{ transform:none; } #esse-content{ scroll-margin-top:160px; } .e-wrap{ max-width:1320px; padding-inline:32px; } .e-section{ padding-block:64px; } .e-h2{ font-size:clamp(28px,3.4vw,43px); line-height:1.16; letter-spacing:0; text-wrap:balance; margin-bottom:28px; } .e-h2::after{ width:70px; height:1px; margin-top:20px; } .e-lead{ font-size:20px; line-height:1.5; max-width:72ch; } .e-btn{ min-height:48px; height:auto; padding:15px 30px; font-size:15px; font-weight:700; letter-spacing:0; line-height:1.2; text-align:center; transition:background-color 180ms ease-out,color 180ms ease-out,border-color 180ms ease-out; } .e-btn:hover,.e-btn:active,.e-btn--ghost:hover{ transform:none; box-shadow:none; } .site-header{ display:block; padding:0 32px; background:#1f1f1f; color:#fff; border:0; top:-56px; } .site-header__utility{ display:flex; justify-content:space-between; align-items:center; min-height:56px; gap:24px; max-width:1256px; margin-inline:auto; border-bottom:1px solid #424242; color:#d1d1d1; font-size:13px; } .site-header__utility nav{ display:flex; gap:28px; } .site-header__utility a{ padding-block:16px; } .site-header__main{ position:relative; display:flex; align-items:center; gap:40px; min-height:88px; max-width:1256px; margin-inline:auto; } .site-header .brand{ color:#fff; font-size:24px; white-space:nowrap; letter-spacing:-.025em; } .site-header__menu{ flex:1; gap:0; padding:0; } .site-nav{ gap:28px; } .site-nav a{ color:#e1e1e1; font-size:14px; text-transform:none; letter-spacing:0; padding-block:18px; } .site-header__actions{ display:flex; align-items:center; gap:16px; } .site-header__trial{ padding:12px 18px; border:1px solid #8c8c8c; font-size:14px; font-weight:700; white-space:nowrap; } .site-header__trial:hover{ background:#fff; color:#1f1f1f; } .site-cart{ margin:0; padding:10px; min-width:44px; min-height:44px; color:#fff; border:1px solid #747474; } .site-account{ margin:0; } .site-account__icon{ color:#fff; min-width:44px; min-height:44px; padding:8px; } .site-account__icon:hover{ color:#fff; background:#383838; } .site-account__menu{ top:calc(100% + 12px); min-width:225px; transition:none; transform:none; } .site-account:hover .site-account__menu,.site-account:focus-within .site-account__menu{ opacity:0; visibility:hidden; } .site-account.is-open .site-account__menu{ opacity:1; visibility:visible; } .site-account:hover .site-account__caret{ transform:none; } .site-account.is-open .site-account__caret{ transform:rotate(180deg); } .site-header a:focus-visible,.site-header button:focus-visible{ outline-color:#fff; } .site-header a:hover{ color:#fff; } .site-header .site-header__trial:hover{ color:#1f1f1f; } .site-header__utility a:hover,.site-nav a:hover{ text-decoration:underline; text-underline-offset:6px; } .site-account .site-account__menu a{ color:#222; } .burger{ padding:10px; background:transparent; border:0; } .burger span{ background:currentColor; } .admin-bar .site-header{ top:-24px; } .e-hero{ min-height:580px; padding:180px 0 64px; align-items:flex-end; } .e-hero .e-wrap{ width:100%; max-width:1320px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:28px 48px; } .e-hero__copy{ max-width:900px; } .e-hero .e-eyebrow{ margin-bottom:18px; font-size:12px; letter-spacing:.12em; } .e-hero h1{ font-size:clamp(34px,3.9vw,50px); line-height:1.12; text-wrap:balance; margin-bottom:20px; text-shadow:none; } .e-hero p{ font-size:19px; line-height:1.5; max-width:56ch; margin:0; text-shadow:none; } .e-hero .e-btns{ flex-direction:column; width:230px; gap:12px; } .e-hero .e-btn--red{ background:#fff; color:#111; } .e-hero .e-btn--red:hover{ background:#eee; } .e-hero__scrim{ background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.18) 90%); } .e-hero__trust{ grid-column:1/-1; margin-top:8px; padding-top:22px; border-top:1px solid rgba(255,255,255,.3); gap:12px 32px; } .e-hero__trust span{ font-size:13px; font-weight:400; } .e-hero__trust span::before{ width:4px; height:4px; background:#fff; box-shadow:none; } .e-hero__pause{ position:absolute; z-index:7; top:20px; right:32px; min-height:44px; padding:10px 14px; border:1px solid rgba(255,255,255,.5); background:rgba(0,0,0,.45); color:#fff; font:400 12px/1.3 var(--font); cursor:pointer; } .e-courses{ grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:30px; } .e-course{ box-shadow:none; transition:border-color 180ms ease-out; } .e-course:hover{ transform:none; box-shadow:none; border-color:#777; } .e-course__media img,.e-gallery img,.e-cgal__item img{ transition:none; } .e-course:hover .e-course__media img,.e-gallery a:hover img,.e-cgal__item:hover img{ transform:none; } .e-skills{ gap:30px; } .e-skill{ padding:34px 30px; border-color:#777; } .e-skill li{ font-size:16px; line-height:1.55; } .e-teacher:not(.e-teacher--video){ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:0; align-items:center; } .e-teacher:not(.e-teacher--video) .e-teacher__text{ grid-column:1; grid-row:1; padding:42px; border:1px solid #777; margin-right:-1px; } .e-teacher:not(.e-teacher--video) .e-teacher__media{ grid-column:2; grid-row:1; align-self:start; margin-top:-38px; } .e-teacher__media::before{ display:none; } .e-teacher__name{ text-transform:none; line-height:1.15; } .e-teacher__name::after{ height:1px; width:70px; } .e-teacher__bio{ font-size:18px; line-height:1.65; max-width:65ch; } .e-whom__panel{ box-shadow:none; background:#eee; margin-left:0; padding:52px; } .e-whom{ gap:40px; } .e-whom__panel h2{ text-transform:none; line-height:1.16; } .e-whom__panel p{ line-height:1.8; } .e-faq{ max-width:960px; gap:0; } .e-faq details,.e-faq details[open]{ border:0; border-bottom:1px solid #d4d4d4; } .e-faq summary{ padding:24px 52px 24px 0; font-size:18px; font-weight:700; } .e-faq details p{ padding-left:0; line-height:1.6; } .site-footer{ background:#fff; color:#333; border-top:1px solid #d5d5d5; padding-top:64px; font-size:16px; } .site-footer .e-wrap{ max-width:1320px; } .site-footer__in{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:64px; padding-bottom:52px; } .site-footer__brand .brand{ display:inline-block; color:#111; font-size:26px; margin-bottom:24px; letter-spacing:-.025em; } .site-footer__brand p{ max-width:30ch; line-height:1.6; } .site-footer__heading{ font-size:20px; font-weight:700; margin:0 0 16px; } .site-footer__nav{ gap:15px; } .site-footer__nav a,.site-footer__contacts a{ color:#333; line-height:1.5; } .site-footer__nav a:hover,.site-footer__contacts a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:4px; } .site-footer__contacts{ flex-direction:column; margin-top:24px; } .site-footer__socials a{ color:#222; background:#f3f3f3; width:44px; height:44px; } .site-footer__copy{ color:#666; border-top:1px solid #e6e6e6; text-align:left; padding:22px max(32px,calc((100vw - 1256px)/2)); } .site-footer__legal{ color:#666; padding:0 32px 22px; text-align:left; max-width:1320px; } @media (max-width:1100px){ .site-header__main{ gap:24px; } .site-nav{ gap:20px; } .site-header__trial{ display:none; } .e-hero .e-wrap{ gap:28px; } .e-hero .e-btns{ width:205px; } } @media (max-width:900px){ html{ scroll-padding-top:90px; } #esse-content{ scroll-margin-top:90px; } .site-header,.admin-bar .site-header{ padding:0 20px; top:0; } .admin-bar .site-header{ top:32px; } .site-header__utility{ display:none; } .site-header__main{ min-height:76px; gap:16px; flex-wrap:wrap; } .site-header .brand{ font-size:23px; margin-right:auto; } .site-header__actions{ order:2; gap:8px; } .burger{ display:flex; order:3; color:#fff; width:44px; height:44px; gap:5px; flex-shrink:0; } .burger span{ background:#fff; width:24px; height:2px; transition:none; } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .site-header__menu{ order:4; display:flex; flex-basis:100%; padding:6px 0 18px; } .site-header.is-enhanced .site-header__menu{ display:none; } .site-header.is-menu-open .site-header__menu{ display:flex; } .site-nav{ gap:0; width:100%; } .site-nav a{ display:block; padding:15px 0; border-top:1px solid #444; font-size:17px; } .site-account{ width:auto; } .site-account__icon{ display:flex; padding:8px; } .site-account__caret{ display:none; } .site-account__menu{ position:absolute; min-width:210px; right:0; top:calc(100% + 14px); opacity:0; visibility:hidden; padding:8px; border:1px solid #ddd; } .site-account__menu a{ padding:12px; } .e-hero{ min-height:600px; padding-top:160px; } .e-hero .e-wrap{ grid-template-columns:1fr; } .e-hero .e-btns{ flex-direction:row; width:auto; } .e-hero .e-btns a{ flex:1 1 200px; } .e-teacher:not(.e-teacher--video){ grid-template-columns:1fr; gap:0; } .e-teacher:not(.e-teacher--video) .e-teacher__media{ grid-column:1; grid-row:1; margin:0; aspect-ratio:4/3; } .e-teacher:not(.e-teacher--video) .e-teacher__text{ grid-column:1; grid-row:2; margin:0; padding:32px; } .e-whom{ gap:0; } .e-whom__panel{ padding:32px; } .site-footer__in{ gap:36px; grid-template-columns:1.2fr 1fr; } .site-footer__documents{ grid-column:2; } } @media (max-width:600px){ .e-wrap{ padding-inline:20px; } .e-section{ padding-block:44px; } .site-header,.admin-bar .site-header{ padding-inline:16px; } .site-header__main{ min-height:74px; gap:6px; } .site-header .brand{ font-size:clamp(18px,5.5vw,21px); } .site-cart{ min-width:40px; padding:8px; } .site-account__icon{ min-width:40px; padding:8px; } .site-header__actions{ gap:2px; } .e-hero{ min-height:620px; padding:150px 0 32px; } .e-hero h1{ font-size:32px; line-height:1.12; } .e-hero p{ font-size:17px; line-height:1.55; } .e-hero__pause{ right:20px; top:16px; } .e-hero .e-btns{ gap:10px; } .e-hero .e-btns a{ flex-basis:100%; } .e-hero__trust{ display:grid; gap:12px; padding-top:20px; } .e-lead{ font-size:18px; } .e-skill{ padding:28px 24px; } .e-teacher:not(.e-teacher--video) .e-teacher__text,.e-whom__panel{ padding:28px 24px; } .e-teacher__bio{ font-size:17px; } .site-footer{ padding-top:44px; } .site-footer__in{ display:grid; grid-template-columns:1fr; gap:36px; padding-bottom:36px; } .site-footer__documents{ grid-column:auto; } .site-footer__copy{ padding-inline:20px; } } @media (max-width:782px){ .admin-bar .site-header{ top:46px; } } @media (prefers-reduced-motion:reduce){ .e-hero__slide,.e-btn,.site-account__caret,.e-course{ transition:none; } .e-cgal__track{ scroll-behavior:auto; } } /* Long Russian course names must fit the 265px content column at 320px. */ @media (max-width:380px){ .e-course-single__title{ font-size:25px; overflow-wrap:anywhere; } } /* Keep intrinsic text widths inside narrow mobile grid/flex columns. */ .e-hero__copy,.e-feat--icon,.e-feat__txt{min-width:0} .e-feat__txt{overflow-wrap:anywhere} @media (max-width:380px){ .e-hero h1{font-size:29px;overflow-wrap:anywhere} .e-feat--icon{padding:20px 16px;gap:12px} }