/* ==== ПОЛНЫЙ CSS (кроме critical) ===== */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
}
/* === ГЛОБАЛЬНЫЕ НАСТРОЙКИ === */
.ye-container {
max-width: 1440px;
margin: 0 auto;
padding: 0 2rem;
width: 100%;
}
.ye-head {
max-width: 1440px;
margin: 0 auto;
width: 100%;
}
/* === СЕРЫЕ ФОНЫ ДЛЯ СЕКЦИЙ === */
.ye-container > section,
.ye-container .ye-visual-block .ye-section {
background-color: #fcfcfc;
}
.ye-container > section:nth-of-type(2n),
.ye-container .ye-visual-block .ye-section:nth-of-type(2n) {
background-color: #fafafa;
}
.ye-container > section:nth-of-type(3n),
.ye-container .ye-visual-block .ye-section:nth-of-type(3n) {
background-color: #f8f8f8;
}
.ye-container > section:nth-of-type(4n),
.ye-container .ye-visual-block .ye-section:nth-of-type(4n) {
background-color: #f6f6f6;
}
.ye-container > section:nth-of-type(5n),
.ye-container .ye-visual-block .ye-section:nth-of-type(5n) {
background-color: #f4f4f4;
}
.ye-container > section:nth-of-type(6n),
.ye-container .ye-visual-block .ye-section:nth-of-type(6n) {
background-color: #f2f2f2;
}
.ye-container .ye-section--bg {
background-color: #fafafa !important;
}
/* === ХЕДЕР === */
.ye-container .ye-nav {
display: flex;
gap: 0.444rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.ye-container .ye-nav a {
font-size: 0.889rem;
padding: 0.444rem 0.667rem;
border-radius: 999px;
border: 1px solid transparent;
color: var(--orange);
transition: all 0.2s ease;
}
.ye-container .ye-nav a:hover {
border-color: var(--line);
background: var(--soft);
color: var(--text);
}
/* === СЕКЦИИ === */
.ye-container .ye-section {
padding: 1.8rem 0;
}
.ye-container .ye-section--compact {
padding: 1.5rem 0;
}
.ye-container .ye-section--bg {
background: var(--soft);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 2rem 0;
}
/* === ПЛЕЙСХОЛДЕРЫ === */
.ye-container .ye-ph:hover {
border-color: var(--orange);
background-color: #f8f9fa;
}
.ye-container .ye-ph.ye-small {
min-height: 220px;
background-size: 36px;
}
/* === ТИПОГРАФИКА ГЕРОЯ === */
.ye-container .ye-hero-note {
font-size: 0.889rem;
color: var(--muted);
line-height: 1.4;
margin-top: 0.889rem;
}
.ye-container .ye-hero-note strong {
color: var(--text);
font-weight: 600;
}
/* === СЛАЙДЕР === */
.ye-container .ye-carousel {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: #fff;
box-shadow: 0 1rem 3.333rem rgba(20,22,27,.08);
padding: 1.8rem 0 3rem;
margin: 1.2rem 0 0;
}
.ye-container .ye-carousel-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
gap: 2rem; /* 32px - профессиональный стандарт */
padding: 0 2rem;
justify-content: center;
}
.ye-container .ye-carousel-slide {
flex: 0 0 280px;
min-width: 280px;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
opacity: 0.7;
filter: grayscale(1) brightness(0.7) contrast(0.85);
transform: scale(0.85);
border-radius: var(--radius-md);
overflow: hidden;
position: relative;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.ye-container .ye-carousel-slide.active {
opacity: 1;
filter: brightness(1.1) saturate(1.2) contrast(1.05);
transform: scale(1.1);
z-index: 10;
box-shadow: 0 15px 40px rgba(0,0,0,0.22);
}
.ye-container .ye-carousel-slide::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.08);
opacity: 0;
transition: opacity 0.3s;
}
.ye-container .ye-carousel-slide:hover::before {
opacity: 0.12;
}
.ye-container .ye-carousel-slide.active::before {
display: none;
}
.ye-container .ye-carousel-content {
background: linear-gradient(135deg, #f2f4f8, #ffffff);
border: 1px solid var(--line);
border-radius: var(--radius-md);
width: 100%;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ye-container .ye-carousel-content img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.ye-container .ye-carousel-slide:hover .ye-carousel-content img {
transform: scale(1.05);
}
.ye-container .ye-carousel-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 2rem;
z-index: 20;
pointer-events: none;
}
.ye-container .ye-carousel-btn {
width: 3.2rem;
height: 3.2rem;
border-radius: 50%;
border: 2px solid rgba(20,22,27,.9);
background: rgba(255,255,255,0.9);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.2rem;
color: rgba(20,22,27,.90);
transition: all 0.2s ease;
pointer-events: all;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ye-container .ye-carousel-btn:hover {
background: #14161b;
color: #fff;
transform: scale(1.1);
}
.ye-container .ye-carousel-dots {
display: flex;
gap: 0.6rem;
justify-content: center;
margin-top: 1.2rem;
position: absolute;
bottom: 1.2rem;
left: 0;
right: 0;
}
.ye-container .ye-carousel-dot {
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
border: 1px solid rgba(20,22,27,.2);
background: rgba(20,22,27,.1);
cursor: pointer;
transition: all 0.2s ease;
}
.ye-container .ye-carousel-dot.active {
background: var(--orange);
transform: scale(1.3);
}
/* === ИНСТРУКТОРЫ === */
.ye-container .ye-instructors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.333rem;
margin-top: 1.333rem;
}
@media (max-width: 1024px) {
.ye-container .ye-instructors-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 920px) {
.ye-container .ye-instructors-grid {
grid-template-columns: 1fr;
max-width: 400px;
margin: 0 auto;
}
}
.ye-container .ye-instructor {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 1.333rem;
text-align: center;
transition: transform 0.2s ease;
}
.ye-container .ye-instructor:hover {
transform: translateY(-4px);
}
.ye-container .ye-instructor-photo {
width: 6rem;
height: 6rem;
border-radius: 50%;
margin: 0 auto 0.889rem;
border: 2px solid var(--soft);
background: linear-gradient(135deg, #f2f4f8, #e8eaf0);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ye-container .ye-instructor-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ye-container .ye-instructor h3 {
margin: 0 0 0.444rem;
font-size: 1rem;
}
.ye-container .ye-instructor-role {
font-size: 0.889rem;
color: var(--orange);
margin: 0 0 0.667rem;
font-weight: 500;
}
.ye-container .ye-instructor-details {
font-size: 0.778rem;
color: var(--muted);
line-height: 1.4;
}
.ye-container .ye-instructor-details p {
margin: 0 0 0.333rem;
}
/* === ОТЗЫВЫ === */
.ye-container .ye-quotes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.889rem;
}
@media (max-width: 1024px) {
.ye-container .ye-quotes {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 920px) {
.ye-container .ye-quotes {
grid-template-columns: 1fr;
max-width: 400px;
margin: 0 auto;
}
}
.ye-container .ye-quote {
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--soft);
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.889rem;
}
.ye-container .ye-quote p {
margin: 0;
color: var(--text);
font-size: 0.875rem;
line-height: 1.4;
font-style: italic;
}
.ye-container .ye-quote-footer {
display: flex;
align-items: center;
gap: 0.778rem;
margin-top: 0.5rem;
padding-top: 0.778rem;
border-top: 1px solid var(--line);
}
.ye-container .ye-quote-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
overflow: hidden;
background: var(--soft);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ye-container .ye-quote-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ye-container .ye-quote-author {
display: flex;
flex-direction: column;
gap: 0.111rem;
}
.ye-container .ye-quote-author b {
font-size: 0.889rem;
font-weight: 600;
margin: 0;
}
.ye-container .ye-quote-author span {
font-size: 0.778rem;
color: var(--muted);
display: block;
}
.ye-container .ye-reviews-link {
display: inline-block;
margin-top: 1.5rem;
color: var(--orange);
font-weight: 600;
font-size: 0.944rem;
text-decoration: none;
transition: all 0.2s ease;
}
.ye-container .ye-reviews-link:hover {
text-decoration: underline;
transform: translateX(4px);
}
.ye-container .ye-reviews-link::after {
content: " →";
display: inline-block;
transition: transform 0.2s ease;
}
.ye-container .ye-reviews-link:hover::after {
transform: translateX(4px);
}
/* === БУЛЛЕТЫ === */
.ye-container .ye-bullets {
margin: 1rem 0 1.5rem;
padding: 0;
list-style: none;
display: grid;
gap: 0.778rem;
}
.ye-container .ye-bullets li {
display: flex;
gap: 0.778rem;
align-items: flex-start;
padding: 0.778rem 0.889rem;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--soft);
color: var(--text);
}
.ye-container .ye-dot {
width: 0.556rem;
height: 0.556rem;
border-radius: 999px;
background: rgba(20, 22, 27, .35);
margin-top: 0.444rem;
flex: 0 0 auto;
}
/* === МЕДИА-ГАЛЕРЕЯ === */
.ye-container .ye-media-row {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 1rem;
align-items: stretch;
}
@media (max-width: 1024px) {
.ye-container .ye-media-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.ye-container .ye-media-row {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
.ye-container .ye-media-item {
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--card);
display: flex;
align-items: center;
justify-content: center;
color: rgba(20,22,27,.45);
font-weight: 700;
font-size: 0.778rem;
text-align: center;
aspect-ratio: 4/3;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer;
overflow: hidden;
position: relative;
transform-origin: center center;
box-shadow: 0 4px 15px rgba(20,22,27,.08);
}
.ye-media-row .ye-media-item:first-child {
aspect-ratio: 16/9;
}
.ye-container .ye-media-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(20,22,27,.18);
}
.ye-container .ye-media-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.ye-container .ye-media-item:hover img {
transform: scale(1.05);
}
.ye-container .ye-media-item.zoomed {
position: relative;
z-index: 100;
transform: scale(1.8);
box-shadow: 0 15px 50px rgba(20,22,27,.3);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.4s ease;
}
.ye-container .ye-media-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(20,22,27,0);
z-index: 99;
pointer-events: none;
transition: background 0.3s ease;
}
.ye-container .ye-media-overlay.active {
background: rgba(20,22,27,0.7);
pointer-events: all;
cursor: pointer;
}
/* === ЛОКАЦИЯ === */
.ye-container .ye-location-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.8rem;
align-items: start;
}
@media (max-width: 1024px) {
.ye-container .ye-location-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.ye-container .ye-location-info {
display: grid;
gap: 1.2rem;
}
.ye-container .ye-location-item {
display: grid;
gap: 0.5rem;
}
.ye-container .ye-location-item strong {
color: var(--text);
font-weight: 600;
}
.ye-container .ye-location-map {
background: linear-gradient(135deg, #f2f4f8, #ffffff);
border: 1px dashed rgba(20,22,27,.25);
border-radius: var(--radius-md);
height: 320px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
@media (max-width: 1024px) {
.ye-container .ye-location-map { height: 250px; }
}
@media (max-width: 600px) {
.ye-container .ye-location-map { height: 200px; }
}
/* === ФОРМА === */
.ye-container form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.222rem;
margin-top: 1.556rem;
}
@media (max-width: 920px) {
.ye-container form {
grid-template-columns: 1fr;
}
}
.ye-container form > div {
display: flex;
flex-direction: column;
}
.ye-container form label {
font-size: 0.889rem;
margin-bottom: 0.444rem;
color: var(--text);
font-weight: 500;
}
.ye-container form input,
.ye-container form select,
.ye-container form textarea {
padding: 0.889rem 0.889rem;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--card);
font-size: 1rem;
color: var(--text);
transition: all 0.2s ease;
}
.ye-container form input:focus,
.ye-container form select:focus,
.ye-container form textarea:focus {
outline: none;
border-color: var(--orange);
box-shadow: 0 0 0 2px rgba(239, 139, 107, 0.1);
}
.ye-container .ye-checkbox {
grid-column: 1 / -1;
display: flex;
align-items: flex-start;
gap: 0.667rem;
margin: 0.5rem 0 1rem;
}
.ye-container .ye-checkbox input {
margin-top: 0.222rem;
}
.ye-container .ye-checkbox label {
font-size: 0.778rem !important;
color: var(--muted);
font-weight: normal;
line-height: 1.4;
margin: 0;
}
.ye-container .ye-checkbox a {
color: var(--orange);
text-decoration: underline;
}
.ye-container .ye-form-actions {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 0.889rem;
position: relative;
}
/* === ФУТЕР === */
.ye-container .ye-footer {
border-top: 1px solid var(--line);
padding: 1.8rem 0 2rem;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
margin-top: 1.2rem;
}
.ye-container .ye-footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1.2fr;
gap: 2rem;
margin-bottom: 1.5rem;
}
@media (max-width: 1024px) {
.ye-container .ye-footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.8rem;
}
}
@media (max-width: 920px) {
.ye-container .ye-footer-grid {
grid-template-columns: 1fr;
gap: 1.8rem;
}
}
.ye-container .ye-footer-logo .ye-mark {
width: 2.5rem;
height: 2.5rem;
}
.ye-container .ye-footer-logo b {
font-size: 1rem;
margin-top: 0.5rem;
}
.ye-container .ye-footer-logo p {
font-size: 0.889rem;
color: var(--muted);
margin: 0;
}
.ye-container .ye-footer-copyright-small {
font-size: 0.778rem;
color: var(--muted);
margin-top: 1rem;
display: block;
}
.ye-container .ye-footer-copyright-small a {
color: var(--muted);
text-decoration: underline;
}
.ye-container .ye-footer-social {
display: flex;
gap: 1rem;
margin-top: 0.889rem;
flex-wrap: wrap;
}
.ye-container .ye-footer-social a {
font-size: 1.8rem; /* Увеличен в 1.5 раза */
font-weight: 500;
padding: 0.444rem 0.889rem;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text);
background: var(--soft);
transition: all 0.2s ease;
text-decoration: none;
display: inline-block;
min-width: 60px;
text-align: center;
font-family: 'Inter', sans-serif;
font-weight: 600; /* Medium weight */
line-height: 1;
}
.ye-container .ye-footer-social a:hover {
background: #14161b;
color: white;
}
.ye-container .ye-footer-nav,
.ye-container .ye-footer-contacts {
display: flex;
flex-direction: column;
gap: 0.667rem;
align-items: flex-start;
}
.ye-container .ye-footer-nav a,
.ye-container .ye-footer-contacts .ye-contact-item,
.ye-container .ye-footer-contacts .ye-btn {
display: flex;
align-items: baseline;
}
.ye-container .ye-contact-item {
font-size: 0.889rem;
color: var(--muted);
line-height: 1.4;
margin-bottom: 0.667rem;
}
.ye-container .ye-contact-item strong {
display: inline-block;
color: var(--text);
font-weight: 600;
margin-right: 0.5rem;
min-width: 60px;
}
.ye-container .ye-contact-item a {
color: var(--text);
text-decoration: none;
display: inline-block;
}
.ye-container .ye-footer-contacts .ye-btn {
margin-top: 0.75rem;
padding: 0.667rem 1rem;
font-size: 0.889rem;
width: fit-content;
white-space: nowrap;
}
.ye-container .ye-footer-copyright {
text-align: center;
padding-top: 1rem;
border-top: 1px solid var(--line);
font-size: 0.778rem;
color: var(--muted);
}
.ye-container .ye-footer-copyright a {
color: var(--text);
text-decoration: none;
}
/* === ДОПОЛНИТЕЛЬНЫЕ БРЕЙКПОИНТЫ === */
@media (max-width: 600px) {
.ye-container .ye-carousel-content { height: 200px; }
.ye-container .ye-section {
padding: 1.2rem 0;
}
.ye-container .ye-section--compact {
padding: 1.2rem 0;
}
.ye-media-row .ye-media-item:first-child {
aspect-ratio: 4/3;
}
}
/* === ИСПРАВЛЕНИЯ ДЛЯ ЛОГОТИПОВ === */
.ye-logo-header {
width: 32px;
height: 32px;
object-fit: contain;
display: block;
}
.ye-logo-footer {
width: 40px;
height: 40px;
object-fit: contain;
display: block;
margin-bottom: 0.889rem;
}
/* === ВЫРАВНИВАНИЕ ЛОГОТИПА === */
.ye-brand {
align-items: flex-start;
margin-top: 2px;
}
.ye-brand b {
line-height: 1.2;
display: block;
margin-top: -1px;
}
.ye-section h1,
.ye-section h2 {
margin-left: -2px; /* Точное выравнивание с логотипом */
}