/* ===== FONTS ===== */
@font-face {
font-family: 'Kalissa';
src: url('/assets/template/yana/fonts/KalissaRegular_0.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Kalissa Swashes';
src: url('/assets/template/yana/fonts/KalissaSwashes_0.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Onest';
src: url('/assets/template/yana/fonts/Onest-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Onest';
src: url('/assets/template/yana/fonts/Onest-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Onest';
src: url('/assets/template/yana/fonts/Onest-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Onest';
src: url('/assets/template/yana/fonts/Onest-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ===== RESET & BASE ===== */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #810100;
--primary-light: #CD9E9E;
--bg: #ECECEC;
--bg-light: #FAFAFA;
--bg-pink: #EFE3E3;
--bg-highlight: #FFE3E3;
--text: #020001;
--text-light: #1F1F1F;
--white: #ECECEC;
--radius-card: 38px;
--radius-btn: 304px;
--radius-event: 36px;
--font-display: 'Kalissa', 'Cormorant Garamond', 'Georgia', serif;
--font-body: 'Onest', 'Arial', sans-serif;
--page-width: 1200px;
--pad: 70px;
}
html {
scroll-behavior: smooth;
background: #ECECEC;
min-height: 100%;
}
/* FOUT prevention: hide custom-font text until fonts are loaded.
is added by inline script when document.fonts is ready. */
.hero__title-main,
.hero__title-sub,
.hero__stats-label,
.footer__academy,
.mission__heading,
.coop__heading,
.section-title,
.article-detail__title {
opacity: 0;
transition: opacity 0.18s ease-in;
}
html.fonts-loaded .hero__title-main,
html.fonts-loaded .hero__title-sub,
html.fonts-loaded .hero__stats-label,
html.fonts-loaded .footer__academy,
html.fonts-loaded .mission__heading,
html.fonts-loaded .coop__heading,
html.fonts-loaded .section-title,
html.fonts-loaded .article-detail__title {
opacity: 1;
}
body {
font-family: var(--font-body);
background: #ECECEC;
color: var(--text);
line-height: 1.4;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
min-height: 100vh;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
mark {
background: var(--bg-highlight);
color: inherit;
padding: 2px 6px;
border-radius: 4px;
}
/* ===== BUTTONS ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 17px 33px;
background: var(--primary);
color: var(--white);
font-family: var(--font-body);
font-size: 14px;
line-height: 13px;
border-radius: var(--radius-btn);
border: none;
cursor: pointer;
transition: opacity 0.2s, transform 0.2s;
white-space: nowrap;
}
.btn:hover {
opacity: 0.85;
transform: translateY(-1px);
}
.btn--outline {
background: transparent;
color: var(--text);
border: 1px solid var(--text);
}
.btn--outline:hover {
background: var(--text);
color: #fff;
}
.btn--sm {
padding: 11px 15px;
font-size: 14px;
}
.btn--light {
background: var(--white);
color: var(--primary);
font-size: 12px;
padding: 10px 20px;
}
/* ===== SECTION TITLE ===== */
.section-title {
font-family: var(--font-body);
font-weight: 400;
font-size: 35px;
line-height: 37px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 20px;
}
.accent { color: var(--primary); }
/* ===== HEADER ===== */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: transparent;
}
.header.is-scrolled {
background: rgba(241, 241, 241, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.header__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 14px var(--pad);
display: flex;
align-items: center;
gap: 24px;
}
.header__logo {
flex-shrink: 0;
position: relative;
width: 153px;
height: 36px;
overflow: hidden;
}
.header__logo-img {
position: absolute;
width: 120.17%;
height: 398.98%;
top: -215.31%;
left: -10.8%;
max-width: none;
object-fit: cover;
}
.header__menu-toggle {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
flex-shrink: 0;
}
.header__burger {
display: flex;
flex-direction: column;
gap: 4px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.header__burger span {
display: block;
width: 20px;
height: 2px;
background: var(--text);
border-radius: 2px;
}
.header__menu-label {
font-family: var(--font-body);
font-size: 12px;
line-height: 13px;
color: var(--text);
}
.header__nav {
display: flex;
align-items: center;
gap: 30px;
margin-right: auto;
}
.header__nav a {
font-size: 12px;
line-height: 13px;
color: var(--text);
transition: color 0.2s;
}
.header__nav-extra { display: none; }
.header__nav.open {
display: flex;
position: fixed;
top: 0;
right: 0;
width: 360px;
height: 100vh;
background: var(--bg);
z-index: 110;
padding: 90px 40px 40px;
flex-direction: column;
gap: 22px;
flex: none;
justify-content: flex-start;
align-items: flex-start;
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
overflow-y: auto;
}
.header__nav.open .header__nav-extra { display: block; }
.header__nav.open a {
font-size: 18px;
line-height: 1.2;
}
@media (max-width: 900px) {
.header__nav { display: none; }
}
.header__nav a:hover { color: var(--primary); }
.header__cta {
flex-shrink: 0;
}
@media (max-width: 900px) {
.header__cta { margin-left: auto; }
}
/* ===== HERO ===== */
.hero {
position: relative;
z-index: 1;
height: 635px;
max-width: var(--page-width);
margin: 0 auto;
overflow: hidden;
background: #ECECEC;
}
.hero__bg {
position: absolute;
top: -14px;
left: -111px;
width: 1375px;
height: 653px;
z-index: 0;
overflow: hidden;
}
/* Figma exact: linear-gradient(90deg, #ECECEC ~34% → transparent ~70%) over photo,
matching page bg #ECECEC for seamless blend */
.hero__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, #ECECEC 0%, #ECECEC 34%, rgba(241, 241, 241, 0) 70%);
pointer-events: none;
z-index: 1;
}
.hero__bg-img {
position: absolute;
left: 34.13%;
top: -31.26%;
width: 67.41%;
height: 206.05%;
max-width: none;
object-fit: cover;
}
/* Offline page hero photo positioning — fit photo within 1200px page width, anchored right */
body.page-offline .hero__bg {
left: 0;
width: 100%;
}
body.page-offline .hero__bg-img {
left: auto;
right: 0;
top: 0;
width: 55%;
height: 100%;
max-width: 660px;
object-fit: cover;
object-position: center top;
}
body.page-offline .hero__bg::after {
background: linear-gradient(90deg, #ECECEC 0%, #ECECEC 38%, rgba(241, 241, 241, 0) 60%);
}
.hero__blur-circle {
position: absolute;
top: -562px;
left: -531px;
width: 977px;
height: 978px;
background: rgba(255, 255, 255, 0.29);
filter: blur(289.1px);
border-radius: 50%;
z-index: 1;
pointer-events: none;
}
.hero__content {
position: relative;
z-index: 2;
padding: 110px 0 0 var(--pad);
max-width: 660px;
}
.hero__title {
margin: 0 0 16px;
width: 644px;
}
.hero__title-main {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 68px;
line-height: 58px;
letter-spacing: -0.03em;
color: var(--primary);
white-space: nowrap;
}
.hero__title-sub {
font-family: var(--font-body);
font-weight: 400;
font-size: 30px;
line-height: 38px;
letter-spacing: -0.02em;
color: var(--text);
white-space: nowrap;
}
.hero__subtitle {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
margin: 0 0 30px;
max-width: 531px;
}
/* ===== EXPERIENCE CARD (Figma exact: 537x91, only L/R borders, women silhouette) ===== */
.hero__stats { margin-bottom: 30px; }
.hero__stats-inner {
position: relative;
background: #FAFAFA;
border-left: 2px solid var(--primary);
border-right: 2px solid var(--primary);
border-radius: 29px;
padding: 16px 145px 16px 32px;
width: 537px;
height: 91px;
box-sizing: border-box;
overflow: hidden;
}
.hero__stats-inner::after {
content: "";
position: absolute;
right: 4px;
top: 3px;
width: 145px;
height: 85px;
/* Use image as mask, fill with brand red — gives the brownish-red tint at opacity 0.18 */
background-color: #810100;
-webkit-mask-image: url('/assets/template/yana/img/women-stats.png');
mask-image: url('/assets/template/yana/img/women-stats.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: right center;
mask-position: right center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: 0.18;
pointer-events: none;
}
.hero__stats-label {
font-family: var(--font-display);
font-style: normal;
font-size: 17.21px;
line-height: 19px;
color: var(--primary);
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.hero__stats-label::before {
content: "";
display: inline-block;
width: 9px;
height: 9px;
background-color: var(--primary);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
flex-shrink: 0;
}
.hero__stats-text {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
min-height: 20px;
}
.hero__stats-text .typed-cursor {
display: inline-block;
width: 2px;
height: 16px;
background: var(--primary);
margin-left: 2px;
vertical-align: middle;
animation: typed-blink 1s infinite;
}
@keyframes typed-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
.hero__buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* ===== MISSION ===== */
.mission { background: #FAFAFA; }
.mission__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 40px var(--pad);
display: flex;
gap: 70px;
align-items: flex-start;
}
.mission__text { flex: 1; min-width: 0; max-width: 735px; }
.mission__quote {
font-family: 'Onest', sans-serif;
font-weight: 400;
font-size: 25px;
line-height: 31px;
letter-spacing: -0.02em;
color: #020001;
margin: 0 0 18px;
}
.mission__heading {
font-weight: 600;
color: #810100;
}
.mission__bio {
font-family: 'Onest', sans-serif;
font-size: 16px;
line-height: 21px;
letter-spacing: -0.02em;
color: #020001;
opacity: 0.5;
margin: 0;
}
.mission__invite {
flex-shrink: 0;
position: relative;
width: 322px;
height: 139px;
background: #810100;
border-radius: 31px;
padding: 4px;
display: flex;
gap: 11px;
align-items: flex-start;
text-decoration: none;
transition: opacity 0.2s ease;
}
.mission__invite:hover { opacity: 0.92; }
.mission__invite-icon {
display: block;
width: 132px;
height: 131px;
background: #ECECEC;
border-radius: 30px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.mission__invite-icon-img {
width: 64px;
height: 64px;
object-fit: contain;
}
.mission__invite-content {
display: block;
color: #ECECEC;
padding-top: 38px;
padding-right: 28px;
position: relative;
flex: 1;
}
.mission__invite-star {
position: absolute;
top: 6px;
left: 0;
font-family: 'Onest', sans-serif;
font-size: 32px;
line-height: 40px;
letter-spacing: -0.02em;
color: #ECECEC;
}
.mission__invite-text {
display: block;
font-family: 'Onest', sans-serif;
font-size: 12px;
line-height: 13px;
letter-spacing: -0.02em;
color: #ECECEC;
}
/* ===== FOR WHOM ===== */
.for-whom__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 40px var(--pad) 24px;
}
.for-whom__subtitle {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
margin-bottom: 30px;
}
.for-whom__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 80px;
margin-bottom: 40px;
}
.for-whom__list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
margin-bottom: 18px;
}
.for-whom__star {
width: 21px;
height: 21px;
flex-shrink: 0;
margin-top: 0;
}
/* ===== PROGRAMS ===== */
.programs__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 24px var(--pad) 40px;
}
.programs__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.program-card {
background: var(--bg-pink);
border-radius: var(--radius-card);
padding: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
aspect-ratio: 250 / 277;
}
.program-card__icon-wrap {
position: relative;
height: 80px;
width: 80px;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 14px;
}
.program-card__icon-img {
width: 64px;
height: 64px;
object-fit: contain;
opacity: 0.35;
}
.program-card__title {
font-weight: 400;
font-size: 18px;
line-height: 21px;
letter-spacing: -0.02em;
color: var(--primary);
margin-bottom: 8px;
text-align: left;
}
.program-card__desc {
font-size: 12px;
line-height: 14px;
color: var(--text);
margin-bottom: 16px;
flex-grow: 1;
text-align: left;
}
.program-card__actions {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.program-card .btn {
width: 100%;
}
.program-card__link {
font-size: 12px;
line-height: 14px;
text-decoration: underline;
color: var(--primary);
text-align: left;
align-self: flex-start;
}
/* ===== EVENTS ===== */
.events__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 24px var(--pad) 40px;
}
.events__list {
display: flex;
flex-direction: column;
gap: 10px;
}
.event-card {
background: var(--bg-light);
border-left: 2px solid var(--primary);
border-right: 2px solid var(--primary);
border-radius: var(--radius-event);
padding: 24px 30px;
display: flex;
align-items: center;
gap: 30px;
}
.event-card__date {
flex-shrink: 0;
text-align: center;
min-width: 70px;
}
.event-card__day {
display: block;
font-family: var(--font-display);
font-style: normal;
font-size: 52px;
line-height: 37px;
letter-spacing: -0.02em;
color: var(--primary);
}
.event-card__month {
display: block;
font-family: var(--font-display);
font-style: normal;
font-size: 24px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--primary);
margin-top: 8px;
}
.event-card__info { flex: 1; min-width: 0; }
.event-card__tag {
display: inline-block;
background: var(--primary);
color: var(--white);
font-size: 12px;
line-height: 13px;
padding: 4px 21px;
border-radius: var(--radius-btn);
margin-bottom: 8px;
}
.event-card__title {
font-weight: 600;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.event-card__details {
font-size: 12px;
line-height: 14px;
opacity: 0.7;
}
/* ===== FAQ ===== */
.faq__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 56px var(--pad);
}
.faq__list { margin-bottom: 30px; }
.faq__item {
border-bottom: 1px solid rgba(129, 1, 0, 0.4);
padding: 20px 0;
}
.faq__question {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: 600;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--primary);
list-style: none;
gap: 16px;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__icon {
position: relative;
width: 22px;
height: 22px;
flex-shrink: 0;
transition: transform 0.3s;
}
.faq__icon::before,
.faq__icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2px;
background: var(--primary);
transform: translate(-50%, -50%);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__answer {
font-size: 12px;
line-height: 14px;
opacity: 0.6;
margin-top: 12px;
max-width: 650px;
}
/* ===== CERTIFICATE ===== */
.certificate { background: var(--bg-light); }
.certificate__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 56px var(--pad);
display: flex;
gap: 50px;
align-items: center;
}
.certificate__image {
flex: 0 0 420px;
display: flex;
align-items: center;
justify-content: center;
}
.certificate__img {
width: 420px;
height: auto;
transform: rotate(-3.4deg);
mix-blend-mode: darken;
border-radius: 16px;
}
.certificate__content { flex: 1; min-width: 0; }
.certificate__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 51px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--primary);
margin-bottom: 24px;
font-style: normal;
}
.certificate__desc {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
margin-bottom: 24px;
}
.certificate__list { margin-bottom: 30px; }
.certificate__list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
margin-bottom: 10px;
}
.certificate__star {
width: 21px;
height: 21px;
flex-shrink: 0;
}
/* ===== BLOG (home preview — 3 columns, simple cards) ===== */
.blog__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 56px var(--pad);
}
.blog__subtitle {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
margin-bottom: 30px;
}
.blog__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}
/* On home preview, keep 3 columns */
.page > .blog__grid,
section.blog > .blog__inner > .blog__grid:not(.blog__grid--full) { /* default */ }
/* ===== BLOG CARD v2 (Figma exact) ===== */
.blog-card-2 {
background: var(--bg-pink);
border-radius: 38px;
padding: 22px 22px 22px 22px;
display: flex;
flex-direction: column;
text-align: left;
}
.blog-card-2__head {
display: flex;
gap: 18px;
align-items: flex-start;
margin-bottom: 18px;
}
.blog-card-2__avatar {
flex-shrink: 0;
width: 87px;
height: 87px;
border-radius: 50%;
border-left: 2px solid var(--primary);
border-right: 2px solid var(--primary);
overflow: hidden;
background: var(--bg-light);
}
.blog-card-2__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-card-2__heading {
flex: 1;
min-width: 0;
}
.blog-card-2__date {
display: block;
font-size: 12px;
line-height: 14px;
letter-spacing: -0.02em;
color: var(--text);
opacity: 0.7;
margin-bottom: 4px;
}
.blog-card-2__title {
font-weight: 400;
font-size: 18px;
line-height: 21px;
letter-spacing: -0.02em;
color: var(--primary);
margin: 0;
}
.blog-card-2__title a {
color: inherit;
text-decoration: none;
}
.blog-card-2__title a:hover { text-decoration: underline; }
.blog-card-2__excerpt {
font-size: 14px;
line-height: 17px;
letter-spacing: 0;
color: var(--text);
margin: 0 0 22px;
flex-grow: 1;
}
.blog-card-2__btn {
align-self: flex-start;
}
@media (max-width: 720px) {
.blog__grid { grid-template-columns: 1fr; }
}
.blog-card {
background: var(--bg-pink);
border-radius: var(--radius-card);
overflow: hidden;
}
.blog-card__image {
height: 216px;
border-radius: 35px;
margin: 5px;
overflow: hidden;
}
.blog-card__img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 35px;
}
.blog-card__date {
display: inline-block;
background: var(--primary);
color: var(--white);
font-size: 12px;
line-height: 13px;
padding: 5px 21px;
border-radius: var(--radius-btn);
margin: 16px 20px 8px;
}
.blog-card__title {
font-weight: 400;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text-light);
padding: 0 20px;
margin-bottom: 8px;
}
.blog-card__link {
display: inline-block;
font-size: 12px;
line-height: 14px;
text-decoration: underline;
color: var(--primary);
padding: 0 20px 20px;
}
/* ===== REVIEWS ===== */
.reviews__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 56px var(--pad);
}
.reviews__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 30px;
}
.review-card {
background: var(--bg-light);
border-left: 2px solid var(--primary);
border-right: 2px solid var(--primary);
border-radius: var(--radius-card);
padding: 24px 20px;
}
.review-card__header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.review-card__avatar {
width: 52px;
height: 52px;
background: var(--bg);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
letter-spacing: -0.02em;
color: var(--primary);
flex-shrink: 0;
}
.review-card__info {
flex: 1;
min-width: 0;
}
.review-card__name {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text-light);
}
.review-card__type {
font-size: 12px;
line-height: 14px;
color: var(--text-light);
opacity: 0.6;
}
.review-card__stars {
margin-left: auto;
display: flex;
gap: 2px;
flex-shrink: 0;
}
.review-card__star {
width: 20px;
height: 19px;
display: block;
}
.review-card__text {
font-size: 12px;
line-height: 14px;
color: var(--text-light);
}
/* ===== FOOTER (Figma exact: rounded card 1200x498, photo 622x551 overlaps top-right) ===== */
.footer {
background: transparent;
margin-top: 117px; /* reserves visual space; photo overflows up into it */
padding-bottom: 0;
}
.footer__inner {
max-width: var(--page-width);
margin: 0 auto;
background: var(--bg-pink);
border-radius: 70px;
padding: 60px var(--pad) 60px var(--pad);
display: grid;
/* 3-col grid: brand | nav | photo gutter (so nav doesn't slide under photo) */
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(0, 1fr);
gap: 40px;
position: relative;
align-items: start;
min-height: 498px;
/* MUST be visible so photo can overflow above the rounded card */
overflow: visible;
}
.footer__nav {
grid-column: 2 / 3;
}
.footer__brand {
grid-column: 1 / 2;
}
.footer__name {
font-family: var(--font-body);
font-style: normal;
font-weight: 400;
font-size: 35px;
line-height: 37px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 6px;
}
.footer__academy {
font-family: var(--font-display);
font-size: 22px;
line-height: 28px;
letter-spacing: -0.02em;
color: var(--primary);
font-style: italic;
margin-bottom: 24px;
}
.footer__contacts h3 {
font-weight: 400;
font-size: 25px;
line-height: 31px;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.footer__phone {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--primary);
margin-bottom: 8px;
}
.footer__phone-icon {
width: 20px;
height: 20px;
object-fit: contain;
flex-shrink: 0;
}
.footer__address {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--primary);
}
.footer__social {
display: flex;
gap: 12px;
margin-top: 20px;
}
.footer__social-link {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
transition: opacity 0.2s;
}
.footer__social-link img {
width: 30px;
height: 30px;
object-fit: contain;
}
.footer__social-link:hover { opacity: 0.7; }
.footer__nav {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer__nav a {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--primary);
transition: opacity 0.2s;
}
.footer__nav a:hover { opacity: 0.7; }
.footer__legal {
color: var(--primary-light) !important;
text-decoration: underline;
}
/* Figma: photo 622x551 inside footer__inner, top extending 117px above card top edge */
.footer__photo {
position: absolute;
right: 0;
top: -117px;
width: 622px;
height: 551px;
pointer-events: none;
z-index: 2;
border-top-right-radius: 70px;
overflow: hidden;
}
.footer__photo-img {
width: 100%;
height: 100%;
object-fit: cover;
/* Figure aligned right so left of bounding box doesn't visually obstruct nav */
object-position: 100% top;
display: block;
background: transparent;
}
@media (max-width: 900px) {
.footer__inner { grid-template-columns: 1fr; min-height: auto; }
.footer__photo { display: none; }
.footer { margin-top: 0; }
}
@media (max-width: 900px) {
.footer__inner { grid-template-columns: 1fr; min-height: auto; }
.footer__photo { display: none; }
}
/* ===== DEVICHNIK PAGE ===== */
/* Schedule hero override — TAN00309 with left-fade gradient (Figma exact) */
body.page-schedule .hero {
min-height: 542px;
overflow: hidden;
}
body.page-schedule .hero .hero__bg {
position: absolute;
top: -6px;
left: -111px;
width: 1375px;
height: 542px;
z-index: 0;
overflow: hidden;
}
body.page-schedule .hero .hero__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, #ECECEC 0%, #ECECEC 34.44%, rgba(236, 236, 236, 0) 69.02%);
pointer-events: none;
z-index: 1;
}
body.page-schedule .hero .hero__bg-img {
position: absolute;
left: 46.66%;
top: 4%;
width: 49.46%;
height: 188.58%;
max-width: none;
object-fit: cover;
object-position: center top;
}
body.page-schedule .hero .hero__blur-circle {
display: none;
}
/* Training hero override — TAN00309 with left-fade gradient (Figma exact) */
.hero--training {
min-height: 577px;
overflow: hidden;
}
.hero--training .hero__bg {
width: calc(100% + 175px);
left: -119px;
right: auto;
top: -14px;
bottom: auto;
height: 577px;
}
.hero--training .hero__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, #F3F3F3 34.44%, rgba(243, 243, 243, 0) 69.02%);
pointer-events: none;
z-index: 1;
}
.hero--training .hero__bg-img {
position: absolute;
width: 61.51%;
height: 219.86%;
left: 42.24%;
top: -27.09%;
max-width: none;
object-fit: cover;
}
.hero--training .hero__blur-circle {
display: none;
}
/* Hero override — full-width group photo with left-fade gradient */
.hero--devichnik {
min-height: 625px;
overflow: hidden;
}
.hero--devichnik .hero__bg {
position: absolute;
top: -28px;
left: -111px;
width: 1375px;
height: 653px;
z-index: 0;
overflow: hidden;
}
.hero--devichnik .hero__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, #ECECEC 0%, #ECECEC 29.38%, rgba(236, 236, 236, 0) 70%);
pointer-events: none;
z-index: 1;
}
.hero--devichnik .hero__bg-img {
position: absolute;
left: 30.29%;
top: 0.05%;
width: 86.3%;
height: 121.32%;
max-width: none;
object-fit: cover;
object-position: center;
}
.hero--devichnik .hero__blur-circle {
display: none;
}
/* Intro section */
.dv-intro {
background: var(--bg);
padding-bottom: 0;
}
.dv-intro__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 0 var(--pad);
background: transparent;
}
.dv-intro > .dv-intro__inner:first-of-type {
padding-top: 60px;
}
.dv-intro__heading {
margin-bottom: 28px;
max-width: 740px;
display: block;
}
.dv-intro__heading-italic {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 49px;
line-height: 45px;
letter-spacing: -0.02em;
color: var(--primary);
}
.dv-intro__heading-rest {
font-family: var(--font-body);
font-style: normal;
font-weight: 400;
font-size: 25px;
line-height: 45px;
letter-spacing: -0.02em;
color: var(--text-light);
}
.dv-intro__body {
max-width: 820px;
margin-bottom: 24px;
}
.dv-intro__text {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 16px;
}
.dv-intro__text--ps {
color: var(--primary);
line-height: 21px;
margin-top: 8px;
}
.dv-intro__bold-red {
font-weight: 600;
color: var(--primary);
}
.dv-intro__btn {
margin-top: 12px;
margin-bottom: 60px;
}
.dv-intro__quote-wrap {
background: #FAFAFA;
position: relative;
overflow: visible;
}
.dv-intro__quote-wrap::before {
content: "";
position: absolute;
right: 21px;
top: -100px;
transform: none;
width: 263px;
height: 203px;
background-image: url("/assets/template/yana/img/devichnik/heart-care.svg");
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
z-index: 0;
}
.dv-intro__quote {
max-width: var(--page-width);
margin: 0 auto;
padding: 24px var(--pad);
font-size: 25px;
line-height: 32px;
letter-spacing: -0.02em;
color: var(--text);
font-weight: 400;
position: relative;
z-index: 1;
}
.dv-intro__quote-red {
color: var(--primary);
}
/* Program section */
.dv-program {
background: var(--bg);
}
.dv-program__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 60px var(--pad);
}
.dv-program__title {
font-family: var(--font-body);
font-weight: 400;
font-size: 35px;
line-height: 37px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 32px;
}
.dv-program__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* Devichnik card */
.dv-card {
background: var(--bg-light);
border-left: 2px solid var(--primary);
border-right: 2px solid var(--primary);
border-radius: 36px;
padding: 30px 32px 28px;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
min-height: 361px;
}
.dv-card__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 4px;
}
.dv-card__date-block {
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.dv-card__date-num {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 52px;
line-height: 37px;
letter-spacing: -0.02em;
color: var(--primary);
}
.dv-card__date-num--word {
font-size: 52px;
line-height: 50px;
}
.dv-card__date-month {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 21px;
line-height: 17px;
letter-spacing: -0.02em;
color: var(--primary);
margin-top: 4px;
}
.dv-card__date-time {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 19px;
line-height: 14px;
letter-spacing: -0.02em;
color: var(--text);
margin-top: 8px;
}
.dv-card__thumb {
width: 219px;
height: 87px;
border-radius: 25px;
background: #cd9e9e;
border-left: 2px solid var(--primary);
border-right: 2px solid var(--primary);
flex-shrink: 0;
overflow: hidden;
}
.dv-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dv-card__tag {
display: inline-block;
background: var(--primary);
color: var(--white);
font-size: 12px;
line-height: 13px;
padding: 4px 21px;
border-radius: var(--radius-btn);
align-self: flex-start;
margin-top: 12px;
}
.dv-card__title {
font-weight: 600;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
margin-top: 4px;
}
.dv-card__desc {
font-size: 12px;
line-height: 14px;
letter-spacing: 0;
color: var(--text);
text-transform: lowercase;
flex: 1;
margin-top: 6px;
}
.dv-card__note {
font-size: 12px;
line-height: 14px;
letter-spacing: 0;
color: var(--text);
opacity: 0.7;
text-transform: lowercase;
margin-top: 4px;
}
.dv-card__exact {
font-size: 9px;
line-height: 10px;
color: var(--primary);
text-transform: lowercase;
margin-top: 4px;
max-width: 140px;
}
.dv-card__btn {
align-self: flex-start;
margin-top: 12px;
min-width: 149px;
}
.dv-card__btn--wide {
min-width: 172px;
}
/* Card 8: Custom request */
.dv-card--custom {
background: var(--bg-pink);
padding-top: 30px;
}
.dv-card__custom-title {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 52px;
line-height: 48px;
letter-spacing: -0.02em;
color: var(--primary);
margin-bottom: 12px;
}
/* Gallery section */
.dv-gallery {
background: var(--bg);
padding: 40px 0 80px;
}
.dv-gallery__inner {
max-width: var(--page-width);
margin: 0 auto;
background: transparent;
border-radius: 0;
padding: 60px var(--pad) 60px;
position: relative;
}
.dv-gallery__title {
font-family: var(--font-body);
font-weight: 400;
font-size: 35px;
line-height: 37px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 34px;
}
.dv-gallery__carousel {
position: relative;
display: flex;
align-items: center;
margin-bottom: 32px;
}
.dv-gallery__viewport {
flex: 1;
overflow: hidden;
}
.dv-gallery__track {
display: flex;
gap: 20px;
transition: transform 0.4s ease;
will-change: transform;
}
.dv-gallery__item {
flex: 0 0 calc((100% - 40px) / 3);
height: 243px;
background: #cd9e9e;
border-radius: 36px;
border-left: 2px solid var(--primary);
border-right: 2px solid var(--primary);
overflow: hidden;
}
.dv-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dv-gallery__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: var(--white);
color: #6E6E6E;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
z-index: 2;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
transition: background 0.2s, color 0.2s, transform 0.2s;
}
.dv-gallery__arrow--left {
left: -22px;
}
.dv-gallery__arrow--right {
right: -22px;
}
.dv-gallery__arrow-icon {
width: 18px;
height: 18px;
display: block;
}
.dv-gallery__arrow:hover {
color: var(--primary);
transform: translateY(-50%) scale(1.05);
}
.dv-gallery__btn-wrap {
display: flex;
justify-content: flex-start;
}
/* ===== COOPERATION PAGE ===== */
.coop {
background: var(--bg);
padding-bottom: 60px;
}
.coop__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 60px var(--pad) 0;
}
.coop__heading {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 49px;
line-height: 45px;
letter-spacing: -0.02em;
color: var(--primary);
margin-bottom: 30px;
}
.coop__lead {
font-size: 19px;
line-height: 24px;
letter-spacing: -0.02em;
color: var(--primary);
margin-bottom: 22px;
font-weight: 400;
}
.coop__text {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 16px;
max-width: 1006px;
}
.coop__text--bold-red {
font-weight: 600;
color: var(--primary);
}
.coop__text-red {
color: var(--primary);
}
.coop__text-bold {
font-weight: 600;
color: var(--text);
}
.coop__sub {
font-size: 19px;
line-height: 24px;
letter-spacing: -0.02em;
color: var(--text);
margin-top: 20px;
margin-bottom: 18px;
}
.coop__list {
margin-bottom: 28px;
display: flex;
flex-direction: column;
gap: 14px;
list-style: none;
}
.coop__list-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
}
.coop__star {
width: 21px;
height: 21px;
flex-shrink: 0;
display: inline-block;
background-image: url('/assets/template/yana/img/star.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-top: 0;
}
.coop__band {
background: var(--bg-light);
margin-top: 32px;
padding: 30px 0;
}
.coop__band-inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 0 var(--pad);
}
.coop__cta-wrap {
padding: 24px var(--pad) 0;
}
.coop__cta {
font-size: 13px;
padding: 12px 22px;
}
/* Cooperation gallery */
.coop-gallery {
background: var(--bg);
padding-bottom: 40px;
}
.coop-gallery__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 40px var(--pad) 0;
position: relative;
}
.coop-gallery__title {
font-family: var(--font-body);
font-weight: 400;
font-size: 35px;
line-height: 37px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 34px;
}
.coop-gallery__carousel {
position: relative;
display: flex;
align-items: center;
gap: 0;
margin-bottom: 32px;
}
.coop-gallery__track {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
flex: 1;
}
.coop-gallery__item {
height: 243px;
background: #cd9e9e;
border-radius: 36px;
border-left: 2px solid var(--primary);
border-right: 2px solid var(--primary);
overflow: hidden;
}
.coop-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.coop-gallery__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid var(--primary);
background: transparent;
color: var(--primary);
font-size: 28px;
font-weight: 400;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
z-index: 2;
transition: background 0.2s, color 0.2s;
}
.coop-gallery__arrow--left {
left: -25px;
}
.coop-gallery__arrow--right {
right: -25px;
}
.coop-gallery__arrow-icon {
display: inline-block;
line-height: 1;
margin-top: -2px;
}
.coop-gallery__arrow:hover {
background: var(--primary);
color: var(--white);
}
.coop-gallery__btn-wrap {
display: flex;
justify-content: flex-start;
}
/* ===== RESPONSIVE (devichnik & cooperation) ===== */
@media (max-width: 1024px) {
.dv-program__grid {
grid-template-columns: 1fr;
}
.dv-gallery__track {
grid-template-columns: repeat(2, 1fr);
}
.coop-gallery__track {
grid-template-columns: repeat(2, 1fr);
}
.dv-card__head {
flex-direction: column;
gap: 12px;
}
.dv-card__thumb {
width: 100%;
}
}
@media (max-width: 768px) {
.dv-program__inner,
.coop__inner,
.coop-gallery__inner,
.dv-gallery__inner {
padding-top: 40px;
padding-bottom: 40px;
}
.dv-intro__inner {
padding: 40px var(--pad);
}
.dv-intro__heading-italic {
font-size: 36px;
line-height: 38px;
}
.dv-intro__heading-rest {
font-size: 20px;
line-height: 26px;
}
.coop__heading {
font-size: 36px;
}
.dv-gallery__track {
grid-template-columns: 1fr;
}
.dv-gallery__item {
height: 200px;
}
.dv-gallery__arrow,
.coop-gallery__arrow {
display: none;
}
.coop-gallery__carousel {
flex-direction: column;
}
.coop-gallery__track {
grid-template-columns: 1fr;
width: 100%;
}
.coop-gallery__item {
height: 220px;
}
.dv-card__custom-title {
font-size: 36px;
line-height: 36px;
}
}
/* ===== INDIVIDUAL PAGE ===== */
/* Light intro band that holds the italic page heading */
.indiv-intro {
background: var(--bg-light);
position: relative;
overflow: hidden;
}
.indiv-intro::after {
content: '';
position: absolute;
top: 22px;
right: var(--pad);
width: 186px;
height: 180px;
background: url('/assets/template/yana/img/icon-individual.png') no-repeat center / contain;
opacity: 0.18;
pointer-events: none;
filter: brightness(0) saturate(100%) invert(15%) sepia(72%) saturate(3946%) hue-rotate(355deg) brightness(95%) contrast(108%);
}
.indiv-intro__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 50px var(--pad) 40px;
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.indiv-intro::after { display: none; }
}
.indiv-intro__title {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 49px;
line-height: 45px;
letter-spacing: -0.02em;
color: var(--primary);
margin-bottom: 22px;
}
.indiv-intro__lead {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 14px;
max-width: 760px;
}
.indiv-intro__accent {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--primary);
max-width: 700px;
}
/* Main grey section */
.indiv {
background: var(--bg);
}
.indiv__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 40px var(--pad) 56px;
}
.indiv__can {
margin-bottom: 50px;
max-width: 940px;
}
.indiv__can-title {
font-weight: 400;
font-size: 35px;
line-height: 37px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 24px;
}
.indiv__list {
list-style: none;
margin-bottom: 28px;
}
.indiv__list-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 14px;
}
/* 4-pointed star bullet rendered in CSS */
.indiv__star {
width: 21px;
height: 21px;
flex-shrink: 0;
background: var(--primary);
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
margin-top: 1px;
}
.indiv__highlight {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--primary);
font-weight: 600;
margin-bottom: 18px;
max-width: 900px;
}
.indiv__note {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
max-width: 920px;
}
/* Pricing cards row */
.indiv__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.indiv__card {
background: var(--bg-pink);
border-radius: 38px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 207px;
position: relative;
}
.indiv__card-star {
width: 21px;
height: 21px;
background: var(--primary);
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
display: block;
flex-shrink: 0;
}
.indiv__card-price {
font-family: var(--font-body);
font-weight: 400;
font-size: 18px;
line-height: 21px;
letter-spacing: -0.02em;
color: var(--primary);
}
.indiv__card-price-sub {
color: var(--text);
}
.indiv__card-desc {
font-size: 12px;
line-height: 14px;
letter-spacing: -0.01em;
color: var(--text);
flex: 1;
}
.indiv__card-btn {
align-self: stretch;
width: 100%;
}
@media (max-width: 900px) {
.indiv__cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.indiv-intro__inner,
.indiv__inner {
padding-top: 40px;
padding-bottom: 50px;
}
.indiv-intro__title {
font-size: 36px;
line-height: 1.1;
}
.indiv__can-title {
font-size: 28px;
line-height: 1.15;
}
}
/* ===== SCHEDULE PAGE ===== */
.sched__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 56px var(--pad);
}
.sched__title {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 46px;
line-height: 1;
letter-spacing: 0.01em;
margin-bottom: 36px;
}
.sched__title-black { color: var(--text); }
.sched__title-red { color: var(--primary); }
.sched__filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 36px;
position: relative;
}
.sched__filter {
font-family: var(--font-body);
font-size: 14px;
line-height: 1;
padding: 8px 21px;
border-radius: var(--radius-btn);
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
white-space: nowrap;
height: 30px;
}
.sched__filter--outline {
background: transparent;
color: var(--primary);
border: 1px solid var(--primary);
}
.sched__filter--outline:hover {
background: var(--primary);
color: var(--white);
}
.sched__filter--active {
background: var(--primary);
color: var(--white);
border: 1px solid var(--primary);
}
.sched__months-wrap {
position: relative;
margin-left: auto;
}
.sched__other-months {
background: none;
border: none;
font-family: var(--font-body);
font-size: 14px;
line-height: 1;
color: var(--primary);
text-decoration: underline;
white-space: nowrap;
cursor: pointer;
transition: opacity 0.2s;
padding: 4px 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.sched__other-months:hover {
opacity: 0.7;
}
.sched__chevron {
font-size: 9px;
line-height: 1;
transition: transform 0.2s;
}
.sched__other-months.is-open .sched__chevron {
transform: rotate(180deg);
}
.sched__months-popup[hidden] { display: none !important; }
.sched__months-popup {
position: absolute;
top: calc(100% + 14px);
right: 0;
background: var(--bg-pink);
border-radius: 38px;
padding: 18px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 10px;
width: 248px;
z-index: 20;
box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}
.sched__month {
font-family: var(--font-body);
font-size: 14px;
line-height: 1;
padding: 8px 16px;
border-radius: var(--radius-btn);
cursor: pointer;
border: 1px solid var(--primary);
background: transparent;
color: var(--primary);
white-space: nowrap;
transition: background 0.2s, color 0.2s;
}
.sched__month:hover {
background: var(--primary);
color: var(--white);
}
.sched__month--active {
background: var(--primary);
color: var(--white);
}
.sched__list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 28px;
}
.sched__row {
background: var(--bg-light);
border-left: 2px solid var(--primary);
border-right: 2px solid var(--primary);
border-radius: 36px;
padding: 22px 28px;
display: flex;
align-items: center;
gap: 24px;
min-height: 117px;
}
.sched__datetime {
flex-shrink: 0;
min-width: 120px;
display: flex;
flex-direction: column;
gap: 4px;
}
.sched__date {
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--primary);
}
.sched__time {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
}
.sched__info {
flex: 1;
min-width: 0;
padding-left: 12px;
}
.sched__info-tag {
font-size: 12px;
line-height: 14px;
color: var(--primary);
margin-bottom: 4px;
}
.sched__course {
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 6px;
}
.sched__author {
font-size: 12px;
line-height: 14px;
color: var(--text);
opacity: 0.7;
}
.sched__sessions {
flex-shrink: 0;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
white-space: nowrap;
min-width: 90px;
}
.sched__price {
flex-shrink: 0;
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--primary);
white-space: nowrap;
min-width: 175px;
}
.sched__btn {
flex-shrink: 0;
padding: 17px 33px;
font-size: 14px;
min-width: 149px;
}
.sched__bottom {
display: flex;
justify-content: flex-start;
}
@media (max-width: 1024px) {
.sched__row {
flex-wrap: wrap;
gap: 16px;
}
.sched__price {
min-width: auto;
}
.sched__btn {
margin-left: auto;
}
}
@media (max-width: 768px) {
.sched__inner {
padding-top: 50px;
padding-bottom: 50px;
}
.sched__title {
font-size: 34px;
line-height: 1.15;
}
.sched__row {
flex-direction: column;
align-items: flex-start;
border-radius: 24px;
padding: 18px 20px;
}
.sched__btn {
margin-left: 0;
width: 100%;
}
.sched__months-wrap {
margin-left: 0;
width: 100%;
}
.sched__months-popup {
right: auto;
left: 0;
}
}
/* ===== NAV OVERLAY (mobile, about/blog pages) ===== */
.nav-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
}
.nav-overlay.active { display: block; }
.header__nav.open {
display: flex;
}
.header__burger span {
transition: transform 0.25s, opacity 0.25s;
}
.header__menu-toggle.active .header__burger span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.header__menu-toggle.active .header__burger span:nth-child(2) {
opacity: 0;
}
.header__menu-toggle.active .header__burger span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* ===== ABOUT PAGE (Figma: alternating light/default sections) ===== */
.about-bio {
position: relative;
}
.about-bio--light { background: #FAFAFA; }
.about-bio--default { background: var(--bg); }
.about-bio--mission { background: #FAFAFA; padding: 16px 0; }
.about-bio__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 38px var(--pad) 38px;
position: relative;
}
.about-bio__heading {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 49px;
line-height: 45px;
letter-spacing: -0.02em;
color: var(--primary);
margin: 0 0 22px;
}
.about-bio__intro { max-width: 740px; }
.about-bio__lead {
font-family: var(--font-body);
font-size: 19px;
line-height: 24px;
letter-spacing: -0.02em;
color: var(--primary);
font-weight: 400;
margin: 0 0 26px;
}
.about-bio__intro-text p,
.about-bio__block p,
.about-bio__story p {
font-family: var(--font-body);
font-size: 16px;
line-height: 21px;
letter-spacing: -0.02em;
color: var(--text);
margin: 0 0 14px;
max-width: 970px;
}
.about-bio__intro-text p:last-child,
.about-bio__block p:last-child,
.about-bio__story p:last-child {
margin-bottom: 0;
}
.about-bio__intro-text p.about-bio__highlight,
.about-bio__intro-text p strong,
.about-bio__block strong,
.about-bio__story strong {
font-weight: 600;
color: var(--primary);
}
.about-bio__bold-red {
font-weight: 600;
color: var(--primary);
}
/* Woman silhouette in profile (right side of intro section) */
.about-bio__profile-icon {
position: absolute;
right: var(--pad);
top: 30px;
width: 227px;
height: 175px;
background-color: #810100;
-webkit-mask-image: url('/assets/template/yana/img/about/woman-profile.png');
mask-image: url('/assets/template/yana/img/about/woman-profile.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: 0.22;
pointer-events: none;
}
/* Mission section: large script title + red paragraph */
.about-bio__mission-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 51px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--primary);
margin: 0 0 26px;
}
.about-bio__mission-text {
font-family: var(--font-body);
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--primary);
font-weight: 400;
margin: 0;
max-width: 700px;
}
.about-bio__story p { margin-bottom: 14px; }
@media (max-width: 720px) {
.about-bio__profile-icon { display: none; }
.about-bio__mission-title { font-size: 36px; }
}
/* ===== MISSION SECTION (about page) ===== */
.about-mission {
background: var(--bg);
padding: 0 0 50px;
}
.about-mission__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 30px var(--pad) 0;
position: relative;
}
.about-mission__text-col {
max-width: 970px;
position: relative;
z-index: 1;
}
.about-mission__heading {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 51px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--primary);
margin-bottom: 22px;
}
.about-mission__subtitle {
font-family: var(--font-body);
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--primary);
font-weight: 400;
margin-bottom: 28px;
max-width: 620px;
}
.about-mission__text {
font-family: var(--font-body);
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 16px;
max-width: 940px;
}
.about-mission__bold-red {
font-weight: 600;
color: var(--primary);
}
/* ===== SIGNUP MODAL ===== */
.signup-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.signup-modal.is-open { display: flex; }
.signup-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
}
.signup-modal__panel {
position: relative;
background: #fff;
border-radius: 24px;
padding: 40px 36px 32px;
max-width: 540px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.signup-modal__close {
position: absolute;
top: 14px;
right: 18px;
width: 36px;
height: 36px;
border: none;
background: transparent;
font-size: 28px;
line-height: 1;
color: var(--primary);
cursor: pointer;
border-radius: 50%;
transition: background 0.15s;
}
.signup-modal__close:hover { background: rgba(129, 1, 0, 0.08); }
.signup-modal__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 32px;
line-height: 36px;
letter-spacing: -0.02em;
color: var(--primary);
margin: 0 0 10px;
}
.signup-modal__lead {
font-size: 15px;
line-height: 21px;
color: var(--text);
opacity: 0.7;
margin: 0 0 22px;
}
.signup-form__program-display {
display: flex !important;
align-items: baseline;
gap: 8px;
padding: 10px 14px;
background: rgba(129, 1, 0, 0.06);
border-left: 2px solid var(--primary);
border-radius: 0 8px 8px 0;
margin-bottom: 6px;
}
.signup-form__program-label {
font-size: 13px;
color: var(--text);
opacity: 0.6;
}
.signup-form__program-value {
font-size: 14px;
font-weight: 600;
color: var(--primary);
}
@media (max-width: 600px) {
.signup-modal__panel { padding: 32px 22px 24px; border-radius: 18px; }
.signup-modal__title { font-size: 26px; line-height: 30px; }
}
/* ===== FAQ CTA ===== */
.faq-cta {
margin-top: 28px;
display: flex;
justify-content: flex-start;
}
/* Ask-question mode: hide name field & program display */
.signup-modal[data-modal-mode="question"] .signup-form__field input[name="name"] { display: none; }
.signup-modal[data-modal-mode="question"] .signup-form__field:has(input[name="name"]) { display: none; }
.signup-modal[data-modal-mode="question"] .signup-form__row:has(input[name="name"]) > .signup-form__field:has(input[name="phone"]) {
flex: 1 1 100%;
}
.signup-modal[data-modal-mode="question"] .signup-form__field textarea {
min-height: 100px;
}
/* ===== COOPERATION GALLERY ARROWS ===== */
.coop-gallery {
position: relative;
}
.coop-gallery__track {
scroll-behavior: smooth;
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
}
.coop-gallery__track::-webkit-scrollbar { display: none; }
.coop-gallery__slide {
flex: 0 0 340px;
height: 243px;
border-radius: 36px;
overflow: hidden;
scroll-snap-align: start;
border-left: 2px solid var(--primary);
border-right: 2px solid var(--primary);
}
.coop-gallery__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.coop-gallery__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background: #FAFAFA;
border: 1px solid rgba(129, 1, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 4;
transition: background 0.18s, transform 0.18s;
}
.coop-gallery__nav:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.coop-gallery__nav--prev { left: -25px; }
.coop-gallery__nav--next { right: -25px; }
.coop-gallery__nav svg { width: 22px; height: 22px; stroke: var(--primary); }
/* ===== SCHEDULE PAGE (Figma exact) ===== */
.sched {
background: var(--bg);
padding: 40px 0 80px;
}
.sched__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 60px var(--pad);
}
.sched__heading {
font-family: var(--font-display);
font-weight: 400;
font-style: normal;
font-size: 46px;
line-height: 39px;
letter-spacing: 0.01em;
color: #020001;
margin: 0 0 36px;
}
.sched__heading-month {
display: inline;
color: var(--primary);
}
.sched__heading-month [data-month-heading][hidden] { display: none; }
.sched__filters {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.sched__tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.sched__tab {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 21px;
border: 1px solid var(--primary);
background: transparent;
border-radius: 304px;
color: var(--primary);
font-family: var(--font-body);
font-size: 14px;
line-height: 22px;
letter-spacing: -0.01em;
cursor: pointer;
transition: background .18s, color .18s;
white-space: nowrap;
}
.sched__tab:hover {
background: rgba(129, 1, 0, 0.06);
}
.sched__tab.is-active {
background: var(--primary);
color: #ECECEC;
border-color: var(--primary);
}
.sched-months {
position: relative;
}
.sched-months__toggle {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 0;
color: var(--primary);
font-family: var(--font-body);
font-size: 14px;
line-height: 22px;
letter-spacing: -0.01em;
cursor: pointer;
padding: 4px 0;
}
.sched-months__chev {
width: 11px;
height: 7px;
transition: transform .2s;
position: relative;
}
.sched-months__chev::before {
content: '';
position: absolute;
inset: 0;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg) translate(-1px, -2px);
}
.sched-months[aria-expanded="true"] .sched-months__chev,
.sched-months__toggle[aria-expanded="true"] .sched-months__chev {
transform: rotate(180deg);
}
.sched-months__pop {
position: absolute;
top: calc(100% + 12px);
right: 0;
background: #EFE3E3;
border: 0;
border-radius: 38px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
padding: 18px 22px;
display: grid;
grid-template-columns: 100px 100px;
gap: 6px 8px;
z-index: 30;
}
.sched-months__pop[hidden] { display: none; }
.sched-months__option {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 21px;
border: 1px solid var(--primary);
background: #FFF;
border-radius: 304px;
color: var(--primary);
font-family: var(--font-body);
font-size: 14px;
line-height: 13px;
letter-spacing: -0.01em;
cursor: pointer;
transition: background .18s, color .18s;
white-space: nowrap;
}
.sched-months__option:hover {
background: rgba(129, 1, 0, 0.06);
}
.sched-months__option.is-active {
background: var(--primary);
color: #ECECEC;
border-color: var(--primary);
}
.sched__list {
display: flex;
flex-direction: column;
gap: 10px;
}
.sched-row {
background: var(--bg-light);
border-left: 2px solid var(--primary);
border-right: 2px solid var(--primary);
border-radius: 36px;
min-height: 117px;
padding: 22px 36px;
display: grid;
grid-template-columns: 180px 1fr 110px 200px 170px;
align-items: center;
gap: 24px;
}
.sched-row__date-num {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: var(--text);
}
.sched-row__date-time {
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--text);
opacity: 0.85;
}
.sched-row__main {
display: flex;
flex-direction: column;
gap: 2px;
}
.sched-row__tag {
font-size: 13px;
line-height: 16px;
color: var(--text);
opacity: 0.7;
}
.sched-row__title {
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
line-height: 21px;
letter-spacing: -0.01em;
color: var(--text);
margin: 0;
}
.sched-row__host {
font-family: var(--font-body);
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: var(--text);
opacity: 0.7;
margin: 4px 0 0;
}
.sched-row__sessions,
.sched-row__price {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: var(--text);
}
.sched-row__btn {
justify-self: end;
min-width: 149px;
}
.sched-row[hidden] { display: none; }
.sched__empty {
margin: 30px 0 0;
text-align: center;
color: var(--text);
opacity: 0.6;
font-size: 16px;
}
.sched__bottom {
margin-top: 28px;
}
@media (max-width: 1100px) {
.sched-row {
grid-template-columns: 140px 1fr 200px;
grid-template-areas:
"date main btn"
"date sessions btn"
"date price btn";
row-gap: 6px;
}
.sched-row__date { grid-area: date; }
.sched-row__main { grid-area: main; }
.sched-row__sessions { grid-area: sessions; }
.sched-row__price { grid-area: price; }
.sched-row__btn { grid-area: btn; }
}
@media (max-width: 720px) {
.sched-row {
grid-template-columns: 1fr;
grid-template-areas:
"date"
"main"
"sessions"
"price"
"btn";
padding: 18px 22px;
}
.sched-row__btn { justify-self: stretch; }
.sched__filters { flex-direction: column; align-items: flex-start; }
}
/* ===== ARTICLE DETAIL ===== */
.article-detail {
background: var(--bg);
padding: 24px 0 40px;
}
.article-detail__inner {
max-width: 820px;
margin: 0 auto;
padding: 0 var(--pad);
}
.article-detail__breadcrumbs {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
line-height: 18px;
letter-spacing: -0.02em;
color: var(--primary);
margin-bottom: 28px;
flex-wrap: wrap;
}
.article-detail__breadcrumbs a {
color: var(--primary);
text-decoration: none;
transition: opacity 0.2s;
}
.article-detail__breadcrumbs a:hover { opacity: 0.7; }
.article-detail__breadcrumbs-sep { opacity: 0.45; }
.article-detail__breadcrumbs-current { opacity: 0.55; }
.article-detail__header { margin-bottom: 28px; }
.article-detail__meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.article-detail__category {
display: inline-block;
background: var(--primary);
color: var(--white);
font-size: 12px;
line-height: 13px;
padding: 5px 14px;
border-radius: var(--radius-btn);
letter-spacing: -0.02em;
}
.article-detail__date,
.article-detail__reading {
font-size: 13px;
line-height: 18px;
letter-spacing: -0.02em;
color: var(--text);
opacity: 0.6;
}
.article-detail__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 49px;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--primary);
margin: 0 0 16px;
}
.article-detail__lead {
font-size: 19px;
line-height: 26px;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
}
.article-detail__cover {
margin: 0 0 32px;
border-radius: 24px;
overflow: hidden;
}
.article-detail__cover img {
width: 100%;
height: auto;
display: block;
}
.article-detail__body {
font-size: 16px;
line-height: 26px;
letter-spacing: -0.01em;
color: var(--text);
}
.article-detail__body > * + * { margin-top: 18px; }
.article-detail__body p { margin: 0 0 18px; }
.article-detail__body p:last-child { margin-bottom: 0; }
.article-detail__body h2 {
font-family: var(--font-body);
font-weight: 600;
font-size: 26px;
line-height: 32px;
letter-spacing: -0.02em;
color: var(--primary);
margin: 36px 0 14px;
}
.article-detail__body h3 {
font-weight: 600;
font-size: 20px;
line-height: 26px;
letter-spacing: -0.02em;
color: var(--text);
margin: 28px 0 12px;
}
.article-detail__body ul,
.article-detail__body ol {
margin: 0 0 18px;
padding-left: 22px;
}
.article-detail__body li { margin-bottom: 8px; }
.article-detail__body blockquote {
margin: 24px 0;
padding: 16px 22px;
border-left: 3px solid var(--primary);
background: var(--bg-light);
border-radius: 0 14px 14px 0;
font-style: italic;
color: var(--primary);
}
.article-detail__body img {
max-width: 100%;
height: auto;
border-radius: 18px;
margin: 18px 0;
display: block;
}
.article-detail__body a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.article-detail__footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid rgba(129, 1, 0, 0.18);
flex-wrap: wrap;
}
.article-detail__author { display: flex; gap: 6px; align-items: baseline; }
.article-detail__author-label {
font-size: 13px;
color: var(--text);
opacity: 0.55;
}
.article-detail__author-name {
font-size: 14px;
color: var(--primary);
font-weight: 600;
}
.article-detail__back {
font-size: 14px;
color: var(--primary);
text-decoration: none;
transition: opacity 0.2s;
}
.article-detail__back:hover { opacity: 0.7; }
.article-related {
background: var(--bg-light);
padding: 40px 0;
}
.article-related__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 0 var(--pad);
}
@media (max-width: 720px) {
.article-detail__title { font-size: 32px; line-height: 36px; }
.article-detail__lead { font-size: 16px; line-height: 22px; }
}
/* ===== BLOG PAGE ===== */
.blog-page {
background: var(--bg);
}
.blog-page__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 30px var(--pad) 40px;
}
.blog-page__heading {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 49px;
line-height: 45px;
letter-spacing: -0.02em;
color: var(--primary);
margin-bottom: 36px;
}
.blog-page__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.blog-page-card {
background: var(--bg-pink);
border-radius: var(--radius-card);
padding: 20px;
display: flex;
flex-direction: column;
transition: box-shadow 0.2s, transform 0.2s;
}
.blog-page-card:hover {
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.10);
transform: translateY(-2px);
}
.blog-page-card__head {
display: flex;
gap: 16px;
align-items: flex-start;
margin-bottom: 18px;
}
.blog-page-card__avatar {
width: 87px;
height: 87px;
border-radius: 50%;
border-left: 2px solid var(--primary);
border-right: 2px solid var(--primary);
overflow: hidden;
flex-shrink: 0;
}
.blog-page-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.blog-page-card__head-text {
flex: 1;
min-width: 0;
padding-top: 4px;
}
.blog-page-card__date {
display: inline-block;
font-size: 12px;
line-height: 14px;
color: var(--text);
opacity: 0.7;
margin-bottom: 6px;
}
.blog-page-card__title {
font-family: var(--font-body);
font-weight: 400;
font-size: 18px;
line-height: 21px;
letter-spacing: -0.02em;
color: var(--primary);
}
.blog-page-card__desc {
font-size: 14px;
line-height: 17px;
color: var(--text);
margin-bottom: 18px;
flex: 1;
}
.blog-page-card__btn {
align-self: flex-start;
padding: 17px 33px;
font-size: 14px;
}
/* ===== PAGINATION ===== */
.pagination {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
margin-top: 16px;
}
.pagination__item {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
font-family: var(--font-body);
font-size: 20px;
line-height: 22px;
font-weight: 600;
color: var(--primary);
text-decoration: underline;
background: transparent;
border: none;
transition: opacity 0.2s;
cursor: pointer;
padding: 0 4px;
}
.pagination__item:hover { opacity: 0.7; }
.pagination__item--active {
font-weight: 400;
pointer-events: none;
}
/* ===== RESPONSIVE: ABOUT & BLOG ===== */
@media (max-width: 768px) {
.about-bio__heading,
.about-mission__heading,
.blog-page__heading {
font-size: 40px;
}
.about-bio__lead,
.about-mission__subtitle {
font-size: 17px;
}
.about-bio__inner,
.about-mission__inner,
.blog-page__inner {
padding: 48px 20px;
}
.blog-page__grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* ===== OFFLINE CATALOG PAGE ===== */
.offline-catalog {
max-width: var(--page-width);
margin: 0 auto;
padding: 60px var(--pad) 80px;
}
.offline-catalog__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 46px;
line-height: 39px;
letter-spacing: 0.01em;
color: var(--text);
margin-bottom: 36px;
}
.catalog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.catalog-card {
background: var(--bg-pink);
border-radius: 38px;
border: none;
padding: 29px 20px 28px;
display: flex;
flex-direction: column;
min-height: 266px;
}
.catalog-card__header {
display: flex;
align-items: flex-start;
gap: 13px;
margin-bottom: 11px;
}
.catalog-card__star {
width: 21px;
height: 21px;
flex-shrink: 0;
background: var(--primary);
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
margin-top: 0;
}
.catalog-card__title {
font-weight: 400;
font-size: 18px;
line-height: 21px;
letter-spacing: -0.02em;
color: var(--primary);
}
.catalog-card__desc {
font-size: 14px;
line-height: 17px;
letter-spacing: -0.01em;
color: var(--text);
margin-bottom: 22px;
flex-grow: 1;
}
.catalog-card__btn {
align-self: flex-start;
min-width: 149px;
padding: 17px 33px;
}
.catalog-card__actions {
display: flex;
align-items: center;
gap: 18px;
margin-top: auto;
flex-wrap: wrap;
}
.catalog-card__more {
color: var(--primary);
font-size: 14px;
line-height: 17px;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ===== TRAINING (COURSE DETAIL) PAGE ===== */
.course-header {
background: transparent;
}
.course-header__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 50px var(--pad) 40px;
}
.course-header__kalissa {
font-family: var(--font-display);
font-weight: 400;
font-size: 46px;
line-height: 39px;
letter-spacing: 0.01em;
color: var(--text);
margin-bottom: 28px;
}
.course-header__title {
font-family: var(--font-body);
font-weight: 400;
font-size: 45px;
line-height: 50px;
letter-spacing: -0.03em;
color: var(--primary);
margin-bottom: 30px;
max-width: 970px;
}
.course-header__desc {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
max-width: 770px;
margin-bottom: 30px;
}
.course-header__desc .accent {
color: var(--primary);
}
.course-header__highlight {
font-size: 16px;
line-height: 21px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 50px;
max-width: 460px;
}
.course-header__highlight strong {
color: var(--primary);
font-weight: 600;
}
.course-section {
padding: 30px 0;
}
.course-section--alt {
background: var(--bg-light);
}
.course-section__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 0 var(--pad);
}
.course-section__title {
font-family: var(--font-body);
font-weight: 400;
font-size: 35px;
line-height: 37px;
letter-spacing: -0.02em;
color: var(--primary);
margin-bottom: 36px;
}
.course-list-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px 40px;
}
.course-list {
display: flex;
flex-direction: column;
gap: 32px;
list-style: none;
}
.course-list--single {
gap: 32px;
}
.course-list--columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 40px;
}
.course-list__item {
position: relative;
padding-left: 32px;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
min-height: 21px;
}
.course-list__item::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 21px;
height: 21px;
background: var(--primary);
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}
.course-list__item .hl {
background: var(--bg-highlight);
color: var(--primary);
padding: 1px 4px;
border-radius: 3px;
}
.course-list__item .practice-name {
color: var(--primary);
font-weight: 600;
}
.course-list__item .accent {
color: var(--primary);
}
/* ===== PRICING ===== */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1060px;
}
.pricing-card {
background: var(--bg-pink);
border-radius: 38px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 240px;
position: relative;
}
.pricing-card__star {
width: 21px;
height: 21px;
flex-shrink: 0;
background: var(--primary);
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}
.pricing-card__price {
font-family: var(--font-body);
font-weight: 400;
font-size: 18px;
line-height: 21px;
letter-spacing: -0.02em;
color: var(--primary);
}
.pricing-card__price--small {
font-size: 15px;
line-height: 14px;
margin-top: 4px;
}
.pricing-card__label {
font-size: 12px;
line-height: 14px;
letter-spacing: -0.01em;
color: var(--text);
}
.pricing-card__label--small {
font-size: 12px;
line-height: 14px;
}
.pricing-card__label .accent {
color: var(--primary);
}
.pricing-card__btn {
margin-top: auto;
align-self: stretch;
width: 100%;
}
/* ===== IMPORTANT SECTION ===== */
.course-important {
padding-top: 60px;
padding-bottom: 60px;
}
.course-important__top {
display: flex;
align-items: flex-start;
gap: 70px;
margin-bottom: 30px;
}
.course-important__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 51px;
line-height: 37px;
letter-spacing: -0.02em;
color: var(--text);
flex-shrink: 0;
margin-top: 0;
}
.course-important__item--first {
flex: 1;
margin-top: 0;
padding: 0;
border: none;
max-width: 762px;
}
.course-important__list {
display: flex;
flex-direction: column;
}
.course-important__item {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.02em;
color: var(--text);
padding: 18px 0;
border-bottom: 1px solid rgba(129, 1, 0, 0.4);
max-width: 1060px;
}
.course-important__item:first-child {
padding-top: 0;
}
.course-important__item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.course-important__item--red {
color: var(--primary);
}
.course-important__lead {
font-size: 18px;
font-weight: 600;
}
.course-important__item .accent {
color: var(--primary);
}
.event-page__meta {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin-top: 18px;
color: var(--primary);
font-size: 14px;
line-height: 18px;
}
/* ===== RESPONSIVE — OFFLINE & TRAINING ===== */
@media (max-width: 900px) {
.offline-catalog {
padding: 40px 24px 60px;
}
.offline-catalog__title {
font-size: 36px;
}
.catalog-grid {
grid-template-columns: 1fr;
}
.catalog-card {
padding: 22px 24px;
}
.course-header__inner,
.course-section__inner {
padding-left: 24px;
padding-right: 24px;
}
.course-header__title {
font-size: 32px;
}
.course-header__kalissa {
font-size: 36px;
}
.course-list-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.course-list--columns {
grid-template-columns: 1fr;
gap: 12px;
}
.pricing-grid {
grid-template-columns: 1fr;
}
.course-important__title {
font-size: 36px;
}
.course-section__title {
font-size: 26px;
line-height: 1.2;
}
}
/* ===== SIGNUP FORM ===== */
.signup {
padding: 80px 24px;
background: var(--bg-light, #faf6f1);
}
.signup__inner {
max-width: 720px;
margin: 0 auto;
}
.signup__subtitle {
text-align: center;
font-size: 18px;
color: var(--text-muted, #6b6058);
margin: 12px 0 32px;
}
.signup-form {
display: grid;
gap: 18px;
}
.signup-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.signup-form__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.signup-form__label {
font-size: 14px;
font-weight: 500;
color: var(--text, #2b2421);
}
.signup-form__field input,
.signup-form__field select,
.signup-form__field textarea {
padding: 12px 14px;
border: 1px solid #d9cfc6;
border-radius: 10px;
background: #fff;
font: inherit;
color: var(--text, #2b2421);
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.signup-form__field input:focus,
.signup-form__field select:focus,
.signup-form__field textarea:focus {
border-color: var(--primary, #b8455c);
box-shadow: 0 0 0 3px rgba(184, 69, 92, .15);
}
.signup-form__error {
font-size: 12px;
color: #c43d3d;
min-height: 1em;
}
.signup .ajax-form-message:empty { display: none; }
.signup .ajax-form-message {
padding: 12px 16px;
border-radius: 10px;
background: #f0e6dc;
color: var(--text, #2b2421);
text-align: center;
}
.signup .btn { justify-self: center; min-width: 220px; }
@media (max-width: 600px) {
.signup-form__row { grid-template-columns: 1fr; }
}
/* ===== RESPONSIVE: HOME MOBILE ===== */
@media (max-width: 768px) {
:root {
--pad: 16px;
--radius-card: 24px;
--radius-event: 24px;
}
.header__inner {
padding: 12px var(--pad);
gap: 16px;
}
.header__logo {
width: 168px;
height: 38px;
}
.header__menu-label {
display: none;
}
.header__cta .btn {
padding: 12px 18px;
}
.hero {
height: 660px;
max-width: none;
overflow: hidden;
contain: paint;
}
.hero__bg {
top: 145px;
left: 50%;
width: 850px;
height: 514px;
transform: translateX(-49%);
}
.hero__bg::after {
background: linear-gradient(180deg, #ECECEC 0%, rgba(236, 236, 236, 0.72) 34%, rgba(236, 236, 236, 0) 66%);
}
.hero__bg-img {
left: 0;
top: 0;
width: 100%;
height: 100%;
object-position: center top;
}
.hero__blur-circle {
display: none;
}
.hero__content {
padding: 78px var(--pad) 0;
max-width: none;
}
.hero__title {
width: 100%;
max-width: 430px;
margin-bottom: 10px;
}
.hero__title-main {
font-size: clamp(42px, 13.5vw, 64px);
line-height: 0.9;
white-space: normal;
}
.hero__title-sub {
font-size: clamp(25px, 7.6vw, 32px);
line-height: 1.12;
white-space: normal;
}
.hero__subtitle {
max-width: 330px;
margin-bottom: 14px;
font-size: 16px;
line-height: 20px;
}
.hero__buttons {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.hero__buttons .btn {
min-width: 201px;
}
.hero__stats {
margin: 220px 0 0;
}
.hero__stats-inner {
width: 100%;
max-width: 340px;
height: auto;
min-height: 84px;
padding: 16px 24px 16px 20px;
border-radius: 24px;
}
.hero__stats-inner::after {
display: none;
}
.hero__stats-text {
font-size: 16px;
line-height: 20px;
}
.mission__inner,
.for-whom__inner,
.programs__inner,
.events__inner,
.faq__inner,
.certificate__inner,
.blog__inner,
.reviews__inner {
padding-left: var(--pad);
padding-right: var(--pad);
}
.mission__inner {
flex-direction: column;
gap: 20px;
padding-top: 36px;
padding-bottom: 36px;
}
.mission__text {
max-width: none;
}
.mission__quote {
font-size: 25px;
line-height: 31px;
}
.mission__bio {
font-size: 16px;
line-height: 21px;
}
.mission__invite {
width: 100%;
max-width: 322px;
}
.for-whom__grid,
.programs__grid,
.reviews__grid {
grid-template-columns: 1fr;
}
.for-whom__grid {
gap: 0;
}
.program-card {
min-height: 263px;
aspect-ratio: auto;
border-radius: 24px;
}
.program-card .btn {
width: 100%;
}
.event-card {
align-items: flex-start;
gap: 16px;
padding: 20px;
border-radius: 24px;
}
.event-card__date {
min-width: 78px;
}
.event-card .btn {
width: 100%;
max-width: 180px;
}
.faq__inner,
.certificate__inner,
.blog__inner,
.reviews__inner {
padding-top: 48px;
padding-bottom: 48px;
}
.certificate__inner {
flex-direction: column-reverse;
align-items: flex-start;
gap: 24px;
}
.certificate__image {
flex: none;
width: 100%;
}
.certificate__img {
width: min(100%, 420px);
}
.certificate__title {
font-size: 34px;
line-height: 1.05;
}
.blog-card-2__head {
flex-direction: column;
gap: 12px;
}
.blog-card {
border-radius: 24px;
}
.blog-card__image,
.blog-card__img {
border-radius: 22px;
}
.review-card__header {
align-items: flex-start;
}
.review-card__stars {
display: none;
}
.signup {
padding: 56px var(--pad);
}
.footer {
margin-top: 0;
}
.footer__inner {
margin: 0 var(--pad);
padding: 36px 22px;
border-radius: 32px;
gap: 28px;
overflow: hidden;
}
.footer__brand,
.footer__nav {
grid-column: 1 / -1;
}
}
@media (max-width: 480px) {
:root {
--pad: 10px;
}
.header__inner {
padding-top: 12px;
padding-bottom: 12px;
}
.header__cta {
display: none;
}
.hero {
height: 660px;
}
.hero__content {
padding-top: 78px;
}
.hero__title {
max-width: 333px;
}
.hero__subtitle {
max-width: 301px;
}
.hero__stats-inner {
max-width: 300px;
}
.mission__invite {
max-width: 300px;
height: 121px;
border-radius: 24px;
}
.mission__invite-icon {
width: 112px;
height: 113px;
border-radius: 22px;
}
.mission__invite-content {
padding-top: 34px;
padding-right: 14px;
}
.section-title {
font-size: 32px;
line-height: 32px;
}
.event-card {
padding: 20px 18px;
}
.event-card__day {
font-size: 46px;
}
.blog-card__image {
height: 216px;
}
}