/* ============================================================= Polish for Belarus — theme redesign Design system + components. No CSS framework. ============================================================= */ /* ---------- Fonts ---------------------------------------------------------- */ /* Montserrat + Mulish load from Google Fonts (see ). Avenir Next is the licensed brand body face, self-hosted below; Mulish is the fallback in --font-body for the (rare) case a face fails to load. */ @font-face{ font-family:"Avenir Next";font-style:normal;font-weight:400;font-display:swap; src:url("../../fonts/AvenirNext-Regular.woff2") format("woff2"),url("../../fonts/AvenirNext-Regular.woff") format("woff"); } @font-face{ font-family:"Avenir Next";font-style:normal;font-weight:500;font-display:swap; src:url("../../fonts/AvenirNext-Medium.woff2") format("woff2"),url("../../fonts/AvenirNext-Medium.woff") format("woff"); } @font-face{ font-family:"Avenir Next";font-style:normal;font-weight:600;font-display:swap; src:url("../../fonts/AvenirNext-DemiBold.woff2") format("woff2"),url("../../fonts/AvenirNext-DemiBold.woff") format("woff"); } @font-face{ font-family:"Avenir Next";font-style:normal;font-weight:700;font-display:swap; src:url("../../fonts/AvenirNext-Bold.woff2") format("woff2"),url("../../fonts/AvenirNext-Bold.woff") format("woff"); } /* ---------- Design tokens ------------------------------------------------- */ :root{ /* brand — --brand nudged from #d54e42 so white text on it and the colour used as text on white both clear WCAG AA (4.5:1) */ --brand:#cd4738; --brand-dark:#a5352a; --brand-tint:#fbeceb; --brand-tint-2:#f7e2df; /* neutrals */ --ink:#211c1a; --ink-muted:#56504c; --bg:#ffffff; --surface:#faf6f4; --surface-2:#f3ede9; --border:#ece4df; --white:#ffffff; /* course accents — the main site's per-course colours. A1/A2/club are the live hues darkened just enough that white text on the level pill / hero and the colour used as small text both pass AA; B1 интенсивный is the live #ff5b01 exactly, with white text on its pills like every other course (by request — that's 3.1:1, below AA for small text; only the hero button keeps dark text) */ --c-a1:#cd4738; --c-a2:#c2416e; --c-b1:#5200ff; --c-b2:#0247fc; --c-b2i:#ff5b01; --c-c1:#6b38d9; --c-karta:#cd4738; --c-individual:#cd4738; --c-club:#0b7d5c; --c-club-course:#6b38d9; --c-corpo:#cd4738; /* course-card head accents — scoped to the card component redesign (2026-09 mockups). Each clears 3:1 white-text contrast (large bold headline text, WCAG AA large-text threshold) with a safety margin. */ --cc-red:#e44e48; --cc-a2:#e35b8e; --cc-b1:#9550f6; --cc-b1pro:#ff5b01; --cc-b2:#5674ff; --cc-c1:#0391e0; --cc-karta:#399b83; --cc-conv:#eb5e00; --gold:#ffb400; --ok:#15bd8e; /* typography scale (fluid) */ --step--1:clamp(0.8125rem,0.78rem + 0.16vw,0.875rem); --step-0:clamp(1rem,0.955rem + 0.2vw,1.125rem); --step-1:clamp(1.125rem,1.03rem + 0.4vw,1.375rem); --step-2:clamp(1.375rem,1.19rem + 0.8vw,1.75rem); --step-3:clamp(1.75rem,1.4rem + 1.6vw,2.5rem); --step-4:clamp(2.25rem,1.55rem + 3.1vw,4rem); --font-body:"Avenir Next","Mulish","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --font-display:"Montserrat","Avenir Next","Mulish","Segoe UI",system-ui,Arial,sans-serif; /* spacing */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:80px; --s-10:96px; --s-12:120px; --section-pad:clamp(48px,7vw,112px); /* layout */ --gutter:1rem; /* radius + elevation */ --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px; --shadow-sm:0 1px 2px rgba(33,28,26,.06),0 2px 8px rgba(33,28,26,.05); --shadow-md:0 4px 16px rgba(33,28,26,.08),0 14px 40px rgba(33,28,26,.07); --shadow-lg:0 10px 30px rgba(33,28,26,.10),0 30px 60px rgba(33,28,26,.10); --ring:0 0 0 3px rgba(213,78,66,.32); --header-h:76px; color-scheme:light; } /* ---------- Reset -------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;tab-size:4} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} html{overflow-x:hidden} body{ font-family:var(--font-body); font-size:var(--step-0); line-height:1.6; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,picture,svg,iframe{display:block;max-width:100%} img{height:auto} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer;color:inherit} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} ul,ol{list-style:none;padding:0} h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.2;letter-spacing:-.01em} :where(h1,h2,h3,h4) strong{font-weight:inherit} strong{font-weight:700} /* visible focus everywhere */ :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px} button:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:3px} .skip-link{ position:fixed;top:8px;left:8px;z-index:2000; background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm); transform:translateY(-160%);transition:transform .18s ease; } .skip-link:focus{transform:translateY(0);text-decoration:none} .screen-reader-text{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0 } /* ---------- Layout helpers -------------------------------------------------- */ .col,.grid>*{min-width:0} .section{padding-block:var(--section-pad)} :where(section[id],[id]){scroll-margin-top:calc(var(--header-h) + 20px)} .section--surface{background:var(--surface)} .section__head{margin-bottom:clamp(28px,4vw,52px)} .section__head--row{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);align-items:baseline;justify-content:space-between} .section__title{font-size:var(--step-3);color:var(--ink)} .section__title a{color:inherit;transition:color .15s ease} .section__title a:hover{color:var(--brand);text-decoration:none} .section__title span{color:var(--ink-muted);font-weight:700;display:block;font-size:.62em;margin-top:.25em} .section__subtitle{margin-top:var(--s-3);color:var(--ink-muted);font-size:var(--step-1);font-weight:500} .stars{display:inline-flex;gap:2px;vertical-align:middle} .stars::before{content:"★★★★★";color:var(--gold);letter-spacing:2px;font-size:1em;line-height:1} /* ---------- Buttons ------------------------------------------------------- */ .btn{ --btn-bg:var(--brand);--btn-fg:#fff;--btn-bd:transparent; display:inline-flex;align-items:center;justify-content:center;gap:.55em; min-height:46px;padding:11px 22px; font-family:var(--font-display);font-weight:700;font-size:var(--step-0); line-height:1;letter-spacing:.005em;text-align:center;text-decoration:none; border-radius:var(--r-pill);border:1.6px solid var(--btn-bd); background:var(--btn-bg);color:var(--btn-fg); transition:transform .12s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease; cursor:pointer; } .btn svg{width:1.1em;height:1.1em;flex:none;fill:currentColor} .btn:hover{text-decoration:none} .btn--primary{--btn-bg:var(--brand);--btn-fg:#fff;box-shadow:var(--shadow-sm)} .btn--primary:hover{--btn-bg:var(--brand-dark);box-shadow:var(--shadow-md)} .btn--primary:active{transform:translateY(1px)} .btn--secondary{--btn-bg:transparent;--btn-fg:var(--brand-dark);--btn-bd:var(--brand)} .btn--secondary:hover{--btn-bg:var(--brand-tint)} .btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--border)} .btn--ghost:hover{--btn-bg:var(--surface)} .btn--lg{min-height:52px;padding:14px 28px;font-size:clamp(1rem,.95rem + .25vw,1.125rem)} .btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none} @media (max-width:520px){ .btn{min-height:48px;padding:12px 20px;font-size:1rem} .btn--lg{min-height:50px;padding:13px 22px;font-size:1.0625rem} } /* smooth every interactive element whose :hover / .is-active changes its look (only the properties that actually change get animated) */ .chip,.teachers__vacancy,.longread__toggle,.teacher-profile__course, .wp-pagenavi a,.accordion__trigger,.reviews__rating-card,.cookie-tab, .tabs__tab,.client-card,.client-card__link,.promo-banner{ transition:color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease,filter .16s ease } /* same idea, measured this time: every clickable element's computed transition-duration was read in the browser across 21 pages — these were the ones whose hover changes colour/opacity (or that had no hover at all) but still snapped */ .review-card__link,.review-card__source,.video__all,.hero__review-head a, .case-card__title a,.teacher-card__name a,.vacancy-card__title a,.video-card__title a,.video__caption h3 a{transition:color .15s ease} .site-header__logo,.site-footer__logo{transition:opacity .15s ease} .site-header__logo:hover,.site-footer__logo:hover{opacity:.8} .hero__review-head a svg{transition:transform .15s ease} .hero__review-head a:hover{text-decoration:none} .hero__review-head a:hover svg{transform:translateX(3px)} .iti__selected-country{transition:background-color .15s ease} /* ---------- Messengers -------------------------------------------------------- */ .messengers{display:flex;align-items:center;gap:var(--s-3)} .messengers__list{display:flex;gap:8px;align-items:center} .messengers__list a{ display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-pill); background:var(--surface-2);color:var(--mc,var(--brand));transition:background-color .15s ease,color .15s ease,transform .15s ease; } .messengers__list a:hover{background:var(--mc,var(--brand));color:#fff;transform:translateY(-2px)} .messengers__list svg{width:19px;height:19px;fill:currentColor} .messengers__list--lg a{width:52px;height:52px} .messengers__list--lg svg{width:24px;height:24px} /* social networks = the messenger buttons, rule for rule: light pill, glyph in the platform's own colour (--mc, set per link in template-parts/social-list.php), pill fills with that colour + white glyph on hover */ .social-list{display:flex;gap:8px;flex-wrap:wrap} .social-list a{ display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-pill); background:var(--surface-2);color:var(--mc,var(--brand));transition:background-color .15s ease,color .15s ease,transform .15s ease; } .social-list a:hover{background:var(--mc,var(--brand));color:#fff;transform:translateY(-2px)} .social-list svg{width:19px;height:19px;fill:currentColor} /* footer + contacts page: the header's .messengers--header size */ .site-footer__social .social-list a,.social-list--lg a{width:34px;height:34px} .site-footer__social .social-list svg,.social-list--lg svg{width:17px;height:17px} /* the footer's own background IS --surface-2, which would erase the pill — white keeps the same light-pill-on-a-lighter-ground look as the header */ .site-footer__social .social-list a:not(:hover){background:var(--bg)} /* ---------- Promo bar --------------------------------------------------------- */ .promo-bar{position:relative;background:#85C675;line-height:0} .promo-bar__link{display:block;transition:filter .15s ease} .promo-bar__link:hover{filter:brightness(1.06)} .promo-bar__img{width:100%;max-width:1920px;height:auto;margin-inline:auto;object-fit:contain} .promo-bar__close{ position:absolute;top:50%;right:10px;transform:translateY(-50%); width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-pill); background:rgba(0,0,0,.18);color:#fff;line-height:0;transition:background-color .15s ease; } .promo-bar__close:hover{background:rgba(0,0,0,.34)} .promo-bar__close svg{width:16px;height:16px} /* ---------- Header --------------------------------------------------------- */ .site-header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:box-shadow .2s ease,border-color .2s ease,background-color .2s ease} .site-header.is-stuck{box-shadow:var(--shadow-sm);border-bottom-color:var(--border);background:rgba(255,255,255,.96)} /* the floating promo aside sits above the sticky header (z 1000); while the mobile menu drops out of the header, the header must win back over it */ body.is-menu-open .site-header{z-index:1001} .site-header__inner{display:flex;align-items:center;gap:clamp(10px,1.6vw,24px);min-height:var(--header-h)} .site-header__logo{flex:none;line-height:0} .site-header__logo img{width:112px;height:auto} .site-nav{margin-right:auto;min-width:0} .site-nav__list{display:flex;gap:clamp(2px,.6vw,10px);flex-wrap:nowrap} .site-nav__list a{ position:relative;display:inline-flex;align-items:center;gap:.4em; color:var(--ink);font-weight:600;font-size:.92rem;white-space:nowrap; padding:9px 13px;border-radius:var(--r-pill); transition:color .16s ease,background-color .16s ease } /* animated underline indicator, shared by hover, focus and the current page */ .site-nav__list a::after{ content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;border-radius:2px; background:currentColor;transform:scaleX(0);transform-origin:center; transition:transform .2s ease } .site-nav__list a:hover, .site-nav__list a:focus-visible{color:var(--brand-dark);text-decoration:none;background:var(--brand-tint)} .site-nav__list a:hover::after, .site-nav__list a:focus-visible::after{transform:scaleX(1)} .site-nav__list .is-active > a, .site-nav__list .current-menu-item > a{color:var(--brand-dark);background:var(--brand-tint)} .site-nav__list .is-active > a::after, .site-nav__list .current-menu-item > a::after{transform:scaleX(1)} .site-nav__list .is-active > a:hover, .site-nav__list .current-menu-item > a:hover{background:var(--brand-tint-2)} @media (prefers-reduced-motion:reduce){.site-nav__list a::after{transition:none}} .site-nav__list img{width:18px;height:auto;flex:none} .site-nav__icon--teachers{width:20px} .site-nav__icon--books{width:24px} .site-header__aside{display:flex;align-items:center;gap:clamp(10px,1.6vw,18px);flex:none} .messengers--header{display:none} .messengers--header .messengers__list a{width:34px;height:34px} .messengers--header .messengers__list svg{width:17px;height:17px} .site-header__account{flex:none;min-height:42px;padding:8px 16px;font-size:.88rem} .site-header__account svg{width:16px;height:16px;fill:none} .burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);flex-direction:column;gap:5px;align-items:center;justify-content:center;transition:background-color .15s ease} .burger:hover{background:var(--surface-2)} .burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{display:none;border-top:1px solid var(--border);background:var(--bg);padding:var(--s-5) var(--gutter) var(--s-7)} .mobile-menu__list{display:flex;flex-direction:column} .mobile-menu__list a{display:flex;align-items:center;gap:12px;padding:14px 4px;font-size:1.05rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--border);transition:color .15s ease} .mobile-menu__list a:hover{color:var(--brand);text-decoration:none} .mobile-menu__list img{width:28px;height:auto;flex:none} .mobile-menu__block{margin-top:var(--s-5)} .mobile-menu__label{font-size:var(--step--1);color:var(--ink-muted);margin-bottom:var(--s-3);font-weight:600} /* ---------- Hero ---------------------------------------------------------- */ .hero{ position:relative;overflow:hidden;background-color:var(--brand-tint); background-image: linear-gradient(88deg,#fff 6%,rgba(255,255,255,.72) 34%,rgba(255,255,255,0) 62%), url("../../images/bg/main.jpg"); background-repeat:no-repeat,no-repeat; background-position:left center,right center; background-size:100% 100%,cover; } .hero__inner{position:relative;z-index:1;padding-block:clamp(48px,6vw,84px) clamp(48px,6vw,72px);min-height:clamp(460px,52vw,600px)} .hero__content{max-width:40rem;align-self:center;min-width:0} .hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink-muted);font-size:var(--step--1);margin-bottom:var(--s-4)} .hero__eyebrow svg{width:18px;height:18px;color:var(--brand)} .hero__title{font-size:var(--step-4);font-weight:900;color:var(--ink);text-wrap:pretty} .hero__badge{ display:inline-block;margin-top:var(--s-4); font-family:var(--font-display);font-weight:800;font-size:clamp(.8rem,.55rem + .6vw,1.0625rem); color:var(--brand);border:2.5px solid var(--brand);border-radius:var(--r-pill); padding:.4em .95em;letter-spacing:.02em;line-height:1;vertical-align:middle;white-space:nowrap; } .hero__text{margin-top:var(--s-5);font-size:var(--step-1);color:var(--ink-muted);max-width:34rem} .hero__cta{margin-top:var(--s-6)} .hero__cta-label{font-weight:700;color:var(--ink);margin-bottom:var(--s-3);font-family:var(--font-display)} .hero__cta-row{display:flex;flex-wrap:wrap;gap:var(--s-3)} .hero__media{ min-width:0; width:min(380px,32vw); position:absolute;z-index:2;right:0;bottom:clamp(48px,6vw,72px); display:flex;justify-content:flex-end; } .hero__review{ width:100%;min-width:0;color:var(--ink); background:rgba(255,255,255,.92);backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);padding:var(--s-5); } .hero__review-head{display:flex;justify-content:flex-end;margin-bottom:var(--s-3)} .hero__review-head a{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:var(--step--1)} .hero__review-head svg{width:15px;height:15px} .hero__review-photo{width:52px;height:52px;border-radius:var(--r-pill);object-fit:cover;margin-bottom:var(--s-3)} .hero__review-name{font-weight:700;font-family:var(--font-display);margin-bottom:4px} .hero__review-text{font-size:var(--step--1);color:var(--ink-muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} .hero__review-rating{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;font-size:.78rem;font-weight:600;color:var(--ink-muted);flex:1} .hero__review-slider .slider__controls{margin-top:var(--s-4);gap:var(--s-3)} /* ---------- Trust strip ------------------------------------------------------ */ .trust{background:var(--brand);color:#fff} .trust__inner{display:flex;flex-wrap:wrap;gap:var(--s-4) clamp(20px,4vw,56px);align-items:center;justify-content:center;padding-block:var(--s-5);text-align:center} .trust__item{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;color:#fff;font-size:var(--step--1);max-width:100%} a.trust__item:hover{text-decoration:none;color:#fff} a.trust__item:hover .trust__rating{color:var(--gold)} .trust__item img{width:22px;height:22px;filter:brightness(0) invert(1)} .trust__item--static img{filter:none} .trust__rating{font-family:var(--font-display);font-weight:800;font-size:1.15rem;transition:color .15s ease} .trust__meta{color:#fff;max-width:22ch;text-align:left} .trust .stars::before{font-size:.9em} /* stat blocks (big number over a caption, always two lines — not the icon+rating row) */ .trust__item--stat{flex-direction:column;gap:2px} .trust__item--stat .trust__rating{font-size:1.4rem} .trust__item--stat .trust__meta{text-align:center;white-space:nowrap;max-width:none} /* ---------- Corporate clients (template-parts/section-clients.php) -------- */ .section--clients{background:var(--surface)} .section--clients--plain{background:var(--bg)} .section--clients__title{font-family:var(--font-display);font-weight:900;font-size:var(--step-2);color:var(--ink);margin-bottom:clamp(20px,3vw,34px)} .clients-grid{display:flex;flex-wrap:wrap;gap:var(--s-4);list-style:none;margin:0} .client-card{ flex:1 1 240px;min-height:clamp(116px,13vw,164px); display:grid;place-items:center;padding:clamp(18px,3vw,32px); background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm) } .client-card--link:hover{border-color:var(--brand-tint-2);box-shadow:var(--shadow-md);transform:translateY(-3px)} .client-card__link{display:grid;place-items:center;width:100%;height:100%} .client-card__link:hover{text-decoration:none} .client-card__logo{max-width:100%;max-height:clamp(38px,4.5vw,54px);width:auto;height:auto;object-fit:contain} .client-card__name{font-family:var(--font-display);font-weight:800;font-size:var(--step-1);color:var(--ink);text-align:center;letter-spacing:.01em} @media (max-width:560px){.client-card{flex-basis:100%;max-width:none;min-height:96px}} /* ---------- Courses ------------------------------------------------------- */ .section--courses{background:var(--surface)} .courses__group-title{font-size:var(--step-2);margin:var(--s-7) 0 var(--s-5);color:var(--ink)} .courses__group-title:first-of-type{margin-top:0} .courses-grid{align-items:stretch} .course-card{position:relative;height:100%;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease} .course-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-tint-2)} .course-card__link{display:flex;flex-direction:column;height:100%;min-width:0;color:var(--ink);text-decoration:none} .course-card__link:hover{text-decoration:none} .course-card{--accent:var(--cc-red)} .course-a1{--accent:var(--cc-red)} .course-a2{--accent:var(--cc-a2)} .course-b1{--accent:var(--cc-b1)} .course-b2{--accent:var(--cc-b2)} .course-b2-intensive{--accent:var(--cc-b1pro)} .course-c1{--accent:var(--cc-c1)} .course-karta{--accent:var(--cc-karta)} .course-individual{--accent:var(--cc-red)} .course-club{--accent:var(--cc-red)} .course-corpo{--accent:var(--cc-red)} .course-club-course{--accent:var(--cc-conv)} .course-b1exam{--accent:var(--cc-red)} /* head — solid accent band + a course-specific illustration cutout (Warsaw skyline watermark for the language levels, a photo/prop cutout for the special formats), matching the 2026-09 card redesign mockups */ .course-card__head{ position:relative;display:flex;flex-direction:column;justify-content:space-between; gap:var(--s-3);min-height:clamp(168px,17vw,206px);padding:clamp(18px,3.6vw,28px); background:var(--accent);color:#fff;overflow:hidden; } /* the actual image comes from an inline style (post thumbnail, or assets/images/default-course.png when the course has none — see template-parts/course-card.php) so it survives per-post editing; CSS only places it and scrims it for the white head text */ .course-card__head-media{ position:absolute;inset:0;background-repeat:no-repeat;background-position:center; background-size:cover; } .course-card__head-media::after{ content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(10,13,18,.62) 0%,rgba(10,13,18,.32) 42%,rgba(10,13,18,.08) 70%); } .course-card__head-top{position:relative;z-index:1;min-width:0} .course-card__level{ display:block;font-family:var(--font-display);font-weight:900;color:#fff; font-size:clamp(1.9rem,6.4vw,2.6rem);line-height:.95;letter-spacing:-.01em; } .course-card__level span{font-size:.42em;font-weight:800;vertical-align:.15em} .course-card__level--text{font-size:clamp(1.25rem,4vw,1.5rem);line-height:1.22;max-width:20ch;overflow-wrap:anywhere} .course-card__subtitle{position:relative;z-index:1;margin-top:6px;font-family:var(--font-display);font-weight:800;font-size:var(--step--1);color:#ffe6a3;line-height:1.3;max-width:26ch} .course-card__pills{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px} .course-card__time{display:inline-flex;align-items:center;gap:6px;font-size:var(--step--1);font-weight:600;color:var(--ink-muted);background:#fff;border-radius:var(--r-pill);padding:7px 14px;white-space:nowrap;box-shadow:var(--shadow-sm)} .course-card__time svg{width:15px;height:15px} .course-card__badge{display:inline-flex;align-items:center;font-size:var(--step--1);font-weight:600;color:var(--ink-muted);background:#fff;border-radius:var(--r-pill);padding:7px 14px;box-shadow:var(--shadow-sm)} .course-card__body{display:flex;flex-direction:column;gap:var(--s-3);padding:clamp(18px,2vw,26px);flex:1;min-width:0} .course-card__desc{font-size:var(--step--1);color:var(--ink-muted);line-height:1.55} .course-card__features li,.course-card__price-now,.review-card__text,.teacher-card__bio,.hero__review-text{overflow-wrap:anywhere} .course-card__features{display:flex;flex-direction:column;gap:8px;font-size:var(--step--1);color:var(--ink-muted)} .course-card__features li{position:relative;padding-left:22px;line-height:1.5} .course-card__features li::before{content:"";position:absolute;left:0;top:.75em;width:12px;height:12px;border-radius:4px;transform:translateY(-50%);background:color-mix(in srgb,var(--accent) 18%,#fff);box-shadow:inset 0 0 0 1.5px var(--accent)} .course-card__price{margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding-top:var(--s-3)} .course-card__price-old{text-decoration:line-through;color:var(--ink-muted);opacity:.75;font-size:1rem} .course-card__price-now{font-size:1.02rem;color:var(--ink)} .course-card__price-now strong{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--ink)} .course-card__cta{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-3);font-family:var(--font-display);font-weight:700;font-size:var(--step--1);color:var(--ink);transition:color .15s ease} .course-card__cta svg{width:16px;height:16px;transition:transform .15s ease} /* on hover the text AND its arrow take the course's own colour (the head band's accent, mixed 18% toward black so the 13px text still clears 4.5:1 on white — the raw accents are tuned for large white-on-colour text, not the reverse) */ .course-card:hover .course-card__cta{color:color-mix(in srgb,var(--accent) 82%,#000)} .course-card:hover .course-card__cta svg{transform:translateX(3px)} .course-card--featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-md)} .course-card--featured:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-lg)} /* ---------- Groups / calendar --------------------------------------------- */ .section--groups{background:var(--bg)} .calendar-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-6)} .calendar-nav{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--bg);font-weight:600;color:var(--ink);font-size:var(--step--1);transition:background-color .15s ease,border-color .15s ease} .calendar-nav:hover:not(:disabled){background:var(--surface);border-color:var(--brand)} .calendar-nav svg{width:16px;height:16px} .calendar-nav.not-active,.calendar-nav:disabled{opacity:0;pointer-events:none} .current-month{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);text-align:center;flex:1;text-transform:capitalize} .calendar{position:relative} .calendar.is-loading .calendar-data{opacity:.35;pointer-events:none} .ajax-loader{position:absolute;inset:0;display:none;place-items:center;z-index:5} .calendar.is-loading .ajax-loader{display:grid} .ajax-loader span{display:inline-block;width:12px;height:12px;margin:0 3px;border-radius:50%;background:var(--brand)} .calendar.is-loading .ajax-loader span{animation:pfb-bounce 1.2s ease-in-out infinite both} .calendar.is-loading .ajax-loader span:nth-child(1){animation-delay:-.32s} .calendar.is-loading .ajax-loader span:nth-child(2){animation-delay:-.16s} @keyframes pfb-bounce{0%,80%,100%{transform:scale(.4);opacity:.4}40%{transform:scale(1);opacity:1}} .calendar-data{display:grid;grid-template-columns:repeat(7,1fr);gap:8px} .calendar-data .day{border-radius:var(--r-md)} .day.day-of-the-week{background:transparent;text-align:center;font-size:.85rem;font-weight:600;color:var(--ink-muted);padding-bottom:4px} .day.day-of-the-week .mobile{display:none} .day.day-of-the-month{background:var(--surface);border:1px solid var(--border);min-height:104px;padding:8px;display:flex;flex-direction:column;gap:6px} .day.day-of-the-month .date{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--ink-muted);text-align:right} .day.day-of-the-month.today{border-color:var(--brand);box-shadow:var(--ring)} .day.day-of-the-month.today .date{color:var(--brand)} .day.day-of-the-month.inactive{background:var(--bg)} .day.day-of-the-month.inactive .date{color:var(--ink-muted);opacity:.9} .day-content{display:flex;flex-direction:column;gap:5px} .day-content .course{ --pill:var(--c-a1); display:block;padding:6px 8px;border-radius:var(--r-sm);background:var(--pill);color:#fff;text-decoration:none; transition:transform .12s ease,filter .12s ease; } .day-content .course:hover{transform:translateY(-1px);filter:brightness(1.06);text-decoration:none} .day-content .course .level{font-family:var(--font-display);font-weight:800;font-size:.85rem;line-height:1} .day-content .course .space{font-size:.68rem;opacity:.95;margin-top:2px;line-height:1.15} .course.course-a1{--pill:var(--c-a1)} .course.course-a2{--pill:var(--c-a2)} .course.course-b1{--pill:var(--c-b1)} .course.course-b2{--pill:var(--c-b2)} .course.course-b2-intensive{--pill:var(--c-b2i)} .course.course-c1{--pill:var(--c-c1)} .course.course-karta{--pill:var(--c-karta)} .course.course-club{--pill:var(--c-club)} .course.course-club-course{--pill:var(--c-club-course)} .calendar-note{margin-top:var(--s-5);color:var(--ink-muted);font-size:var(--step--1);text-align:center} .calendar-note a{color:var(--brand-dark);text-decoration:underline} /* ---------- Promo banner --------------------------------------------------- */ .promo-banner-wrap{width:100%} .promo-banner{display:block;width:100%;line-height:0} .promo-banner img{width:100%;height:auto;object-fit:cover} .promo-banner:hover{text-decoration:none} /* ---------- Reviews ------------------------------------------------------- */ .section--reviews{background:var(--brand);color:#fff} .section--reviews .section__title{color:#fff} .section--reviews .section__subtitle{color:rgba(255,255,255,.85)} .reviews__ratings{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-bottom:var(--s-7)} .reviews__rating-card{display:inline-flex;align-items:center;gap:14px;padding:14px 20px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);color:var(--ink)} .reviews__rating-card:hover{text-decoration:none;box-shadow:var(--shadow-md)} .reviews__rating-value{font-family:var(--font-display);font-weight:800;font-size:1.25rem;display:flex;align-items:center;gap:8px} .reviews__rating-value .stars::before{font-size:.8em} .reviews__rating-meta{font-size:var(--step--1);color:var(--ink-muted)} .review-card{background:var(--bg);color:var(--ink);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:var(--s-5);box-shadow:var(--shadow-sm)} .review-card__text{font-size:var(--step-0);line-height:1.6;white-space:pre-line} .review-card__person{display:flex;align-items:center;gap:14px;margin-top:auto} .review-card__person img{width:56px;height:56px;border-radius:var(--r-pill);object-fit:cover;flex:none} .review-card__name{font-family:var(--font-display);font-weight:700} .review-card__link{font-size:var(--step--1);color:var(--ink-muted)} .review-card__link:hover{color:var(--brand)} .reviews__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-7)} .section--reviews .btn--primary{--btn-bg:#fff;--btn-fg:var(--brand)} .section--reviews .btn--primary:hover{--btn-bg:#fff;--btn-fg:var(--brand-dark)} .section--reviews .btn--secondary{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:#fff} .section--reviews .btn--secondary:hover{--btn-bg:rgba(255,255,255,.12)} .section--reviews .slider__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff} .section--reviews .slider__btn:hover{background:#fff;color:var(--brand);border-color:#fff} .section--reviews .slider__dot{background:rgba(255,255,255,.4)} .section--reviews .slider__dot:hover:not(.is-active){background:rgba(255,255,255,.7)} .section--reviews .slider__dot.is-active{background:#fff} /* ---------- Student stories (case CPT) -------------------------------------- */ .section--cases{background:var(--surface)} .section--cases .section__head{margin-bottom:clamp(24px,3.5vw,40px)} .section--cases__all,.section--teachers__all{margin-top:var(--s-6);text-align:center} .cases__slider .slider__track{align-items:stretch} .case-card{ display:flex;flex-direction:column;gap:var(--s-4); background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg); padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-sm) } /* Slider slides: fixed width, and let the flex track equalise their height. (An explicit `height:100%` here defeats `align-items:stretch` — the card then falls back to its own content height and the row goes ragged.) */ .cases__slider .case-card{flex:0 0 min(440px,86vw);align-self:stretch} .case-card__title{font-family:var(--font-display);font-weight:800;font-size:var(--step-1);line-height:1.25;color:var(--ink);text-wrap:balance} .case-card__title a{color:inherit;text-decoration:none} .case-card__title a:hover{color:var(--brand)} .case-card__body{font-size:var(--step--1);line-height:1.65;color:var(--ink-muted);overflow-wrap:anywhere} .case-card__body > * + *{margin-top:.7em} .case-card:not(.case-card--full) .case-card__body{ display:-webkit-box;-webkit-line-clamp:12;-webkit-box-orient:vertical;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent) } .case-card__more{ display:inline-flex;align-items:center;gap:7px;margin-top:calc(var(--s-4) * -1 + 2px); font-family:var(--font-display);font-weight:700;font-size:var(--step--1);color:var(--brand-dark) } .case-card__more svg{width:15px;height:15px;transition:transform .15s ease} .case-card__more:hover{text-decoration:none} .case-card__more:hover svg{transform:translateX(3px)} .case-card__foot{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-4); margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--border) } .case-card__author{display:inline-flex;align-items:center;gap:10px;min-width:0} .case-card__avatar{width:48px;height:48px;border-radius:var(--r-pill);object-fit:cover;flex:none;background:var(--surface)} .case-card__avatar--blank{display:grid;place-items:center;font-family:var(--font-display);font-weight:800;color:var(--brand);background:var(--brand-tint)} .case-card__name{font-family:var(--font-display);font-weight:700;font-size:var(--step-0);color:var(--ink)} .case-card__levels{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px} .case-card__levels-word{font-size:var(--step--1);color:var(--ink-muted);font-weight:600} .case-level{ display:inline-grid;place-items:center;min-width:2em;padding:3px 8px; font-family:var(--font-display);font-weight:800;font-size:var(--step--1);line-height:1; color:#fff;background:var(--lvl,var(--brand));border-radius:var(--r-sm) } /* archive + "ещё истории" — masonry-ish columns */ .cases-wall{columns:2;column-gap:var(--s-5)} .cases-wall--3{columns:3} .cases-wall .case-card{break-inside:avoid;margin-bottom:var(--s-5);display:inline-flex;width:100%} .cases-wall__empty{color:var(--ink-muted);font-size:var(--step-0)} @media (max-width:900px){.cases-wall,.cases-wall--3{columns:1}} @media (min-width:901px) and (max-width:1200px){.cases-wall--3{columns:2}} /* single story */ .case-single__title{max-width:24ch} .case-single__author{display:flex;align-items:center;gap:14px;margin-top:var(--s-5)} .case-single__author .case-card__avatar{width:56px;height:56px} .case-single__name{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--step-1);color:var(--ink)} .case-single__author .case-card__levels{margin-top:6px} .section--case-body{background:var(--bg);padding-block:clamp(28px,4vw,44px) var(--section-pad)} .case-single__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-7)} /* ---------- About / tabs ------------------------------------------------------ */ .section--about{background:var(--bg)} .tabs__nav{ display:flex;flex-wrap:nowrap;gap:8px;align-items:stretch; overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch; scrollbar-width:thin;border-bottom:1px solid var(--border);margin-bottom:var(--s-6); } .tabs__tab{ flex:none;white-space:nowrap; padding:12px 16px;font-family:var(--font-display);font-weight:700;font-size:var(--step-0); color:var(--ink-muted);border-bottom:3px solid transparent;border-radius:6px 6px 0 0; transition:color .15s ease,border-color .15s ease,background-color .15s ease; } .tabs__tab:hover{color:var(--ink);background:var(--surface)} .tabs__tab.is-active{color:var(--brand);border-bottom-color:var(--brand)} .tabs__panel[hidden]{display:none} .tabs__panel{animation:pfb-fade .3s ease} @keyframes pfb-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .about-card{row-gap:var(--s-5)} .about-card>*{min-width:0} .about-card__media img,.about-card__video{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)} .about-card__media img{width:100%;aspect-ratio:4/3;object-fit:cover} .about-card__video{position:relative;aspect-ratio:16/9} .about-card__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .about-card__text h3{font-size:var(--step-2);margin-bottom:var(--s-4)} .about-card__text p+p{margin-top:var(--s-3)} .about-card__text ul{margin-top:var(--s-3);display:flex;flex-direction:column;gap:8px} .about-card__text li{position:relative;padding-left:22px;color:var(--ink-muted)} .about-card__text li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:3px;background:var(--brand-tint-2);box-shadow:inset 0 0 0 1.5px var(--brand)} .about-card__text{color:var(--ink-muted)} .about-card__text h3{color:var(--ink)} /* ---------- Teachers ---------------------------------------------------------- */ .section--teachers{background:var(--surface)} .teachers__vacancy{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg);color:var(--ink);font-size:var(--step--1);font-weight:500} .teachers__vacancy:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)} .teachers__vacancy svg{width:16px;height:16px} .teacher-card{ display:flex;flex-direction:column; background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm); } .teacher-card__media{display:block;aspect-ratio:1/1;flex:none;background:var(--surface-2);overflow:hidden;position:relative} .teacher-card__media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .2s ease} .teacher-card__media:hover img{transform:scale(1.04)} .teacher-card__body{display:flex;flex-direction:column;gap:10px;padding:var(--s-5);flex:1;min-height:0} .teacher-card__prefix{font-size:var(--step--1);color:var(--ink-muted);text-transform:lowercase} .teacher-card__name{font-family:var(--font-display);font-weight:800;font-size:1.15rem} .teacher-card__name a{color:var(--ink)} .teacher-card__name a:hover{color:var(--brand);text-decoration:none} .teacher-card__bio{font-size:var(--step--1);color:var(--ink-muted);line-height:1.55;min-height:calc(1.55em * 4);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .teacher-card__levels-label{font-size:.75rem;font-weight:600;color:var(--ink-muted)} .teacher-card__levels{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:6px} .teacher-card__level{ --pill:var(--c-a1); display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:700;font-size:.72rem;color:#fff; background:var(--pill);border-radius:var(--r-pill); padding:3px 12px;line-height:1.2;white-space:nowrap;box-sizing:border-box; } .tl-a1{--pill:var(--c-a1)} .tl-a2{--pill:var(--c-a2)} .tl-b1{--pill:var(--c-b1)} .tl-b2{--pill:var(--c-b2)} .tl-b2-intensive{--pill:var(--c-b2i)} .tl-c1{--pill:var(--c-c1)} .tl-karta{--pill:var(--c-karta)} .tl-club{--pill:var(--c-club)} .tl-club-course{--pill:var(--c-club-course)} .tl-individual{--pill:var(--c-individual)} .teacher-card__more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-family:var(--font-display);font-weight:700;font-size:var(--step--1);color:var(--brand)} .teacher-card__more svg{width:15px;height:15px;transition:transform .15s ease} .teacher-card__more:hover{text-decoration:none} .teacher-card__more:hover svg{transform:translateX(3px)} /* ---------- Video ----------------------------------------------------------- */ .section--video{background:var(--bg)} .video__all{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:var(--step--1)} .video__all:hover{color:var(--brand);text-decoration:none} .video__all svg{width:28px;height:28px;padding:7px;box-sizing:border-box;border-radius:var(--r-pill);background:var(--brand);color:#fff;flex:none} .video__all--mobile{display:none;margin-top:var(--s-5)} .video__layout>*{min-width:0} .video__frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);background:#000} .video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .video__caption{margin-top:var(--s-4);margin-bottom:var(--s-4)} .video__caption h3{font-size:var(--step-1)} .video__caption h3 a{color:var(--ink)} .video__caption h3 a:hover{color:var(--brand);text-decoration:none} .video__caption p{color:var(--ink-muted);margin-top:6px} .video__list{display:flex;flex-direction:column;gap:12px} .video__list a{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-weight:500;font-size:var(--step--1);transition:border-color .15s ease,background-color .15s ease} .video__list a:hover{text-decoration:none;border-color:var(--brand);background:var(--bg)} .video__play{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-pill);background:var(--brand);color:#fff} .video__play svg{width:16px;height:16px} /* ---------- Cities -------------------------------------------------------- */ .section--cities{background:var(--surface)} .city-card{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);color:#fff} .city-card img{width:100%;aspect-ratio:66/56;object-fit:cover;transition:transform .3s ease} .city-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(20,14,13,.72))} .city-card:hover{text-decoration:none} .city-card:hover img{transform:scale(1.04)} .city-card__name{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:16px;font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.25} /* ---------- Longread ---------------------------------------------------------- */ .section--longread{background:var(--bg)} .section--longread h2{font-size:var(--step-3);margin-bottom:var(--s-4)} .section--longread .container>p{font-size:var(--step-1);color:var(--ink-muted)} .longread__body{position:relative;margin-top:var(--s-5)} .longread__body h3{font-size:var(--step-1);margin:var(--s-6) 0 var(--s-3);color:var(--ink)} .longread__body p{margin-top:var(--s-3);color:var(--ink-muted);line-height:1.65} .longread__body.is-clamped{max-height:20rem;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)} .longread__toggle{margin-top:var(--s-5);display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;color:var(--brand);border:1.6px solid var(--brand);border-radius:var(--r-pill);padding:10px 22px;min-height:44px} .longread__toggle:hover{background:var(--brand-tint)} .longread__toggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease} .longread__toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)} /* ---------- FAQ ---------------------------------------------------------- */ .section--faq{background:var(--surface)} .accordion-list{display:flex;flex-direction:column;gap:12px} .accordion{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease} .accordion.is-open{border-color:var(--brand-tint-2);box-shadow:var(--shadow-sm)} .accordion__heading{margin:0} .accordion__trigger{ width:100%;display:flex;align-items:center;gap:var(--s-4);justify-content:space-between; padding:clamp(16px,2vw,22px) clamp(16px,2vw,24px); font-family:var(--font-display);font-weight:700;font-size:var(--step-0);color:var(--ink);text-align:left; } .accordion__trigger:hover{color:var(--brand)} .accordion__icon{position:relative;flex:none;width:26px;height:26px;border-radius:var(--r-pill);background:var(--brand);display:inline-block} .accordion__icon::before,.accordion__icon::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:2px;background:#fff;transform:translate(-50%,-50%);transition:transform .2s ease} .accordion__icon::after{transform:translate(-50%,-50%) rotate(90deg)} .accordion.is-open .accordion__icon::after{transform:translate(-50%,-50%) rotate(0)} .accordion__panel{overflow:hidden} .accordion__panel[hidden]{display:none} .accordion__content{padding:0 clamp(16px,2vw,24px) clamp(18px,2vw,24px);color:var(--ink-muted);line-height:1.6} .accordion__content p+p{margin-top:var(--s-3)} .accordion__content a{font-weight:600} /* ---------- Final CTA ------------------------------------------------------- */ .section--final{background:var(--brand);color:#fff;text-align:center} .final-cta{display:flex;flex-direction:column;align-items:center;gap:var(--s-5)} .final-cta__label{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);color:#fff} .final-cta__contacts{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center} .final-cta__contacts a{color:#fff;font-weight:600;font-size:var(--step-1)} .final-cta__contacts a:hover{color:#fff;text-decoration:underline} /* ---------- Footer ------------------------------------------------------- */ .site-footer{background:var(--surface-2);color:var(--ink);padding-block:var(--s-9) var(--s-6);font-size:var(--step--1)} .site-footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(24px,4vw,56px)} .site-footer__main{flex:1 1 70%;min-width:0;display:flex;flex-direction:column;gap:var(--s-6)} .site-footer__brand{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2vw,28px)} .site-footer__logo img{width:132px;height:auto} .site-footer__top100{display:flex;align-items:center;gap:14px;max-width:260px} .site-footer__top100 span{font-weight:600;line-height:1.3} .site-footer__top100 img{width:56px;height:56px;flex:none} .site-footer__nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:4px 4px} .site-footer__nav a{display:inline-flex;align-items:center;gap:.4em;padding:8px 10px;border-radius:var(--r-pill);color:var(--ink);font-weight:500;white-space:nowrap;transition:color .15s ease,background-color .15s ease} .site-footer__nav a:hover{color:var(--brand);text-decoration:none;background:rgba(33,28,26,.05)} .site-footer__nav img{width:20px;height:auto;flex:none} .site-footer__docs{display:flex;flex-wrap:wrap;gap:10px 24px} .site-footer__docs a{color:var(--ink-muted);font-weight:500} .site-footer__contact{flex:0 1 280px;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-5);text-align:right} .site-footer__social p,.site-footer__email p{color:var(--ink-muted);margin-bottom:10px} .site-footer__contact .social-list{justify-content:flex-end} .site-footer__email{display:flex;flex-direction:column;gap:6px;align-items:flex-end} .site-footer__email a{color:var(--ink);font-weight:600;transition:color .15s ease} .site-footer__email a:hover{color:var(--brand)} .site-footer__email-secondary{font-size:90%;opacity:.7;font-weight:500!important} .site-footer__payments{width:100%;margin-top:var(--s-6)} .site-footer__payments img{width:auto;max-width:100%;height:34px;opacity:.8} .site-footer__legal{width:100%;margin-top:var(--s-5);color:var(--ink-muted);font-size:.8rem;line-height:1.5} /* ---------- Float CTA (right dock) ---------------------------------------- */ .float-cta{ position:fixed;inset:0;z-index:1100;pointer-events:none; opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .22s ease,visibility .22s ease,transform .22s ease; } .float-cta.is-visible{opacity:1;visibility:visible;transform:none} .float-cta.is-visible .float-cta__stack, .float-cta.is-visible .float-cta__top{pointer-events:auto} .float-cta__stack{ position:absolute;right:16px;top:50%;transform:translateY(-50%); display:flex;flex-direction:column;align-items:flex-end;gap:10px; } .float-cta__social{position:relative;display:flex;flex-direction:column;align-items:flex-end} .float-cta__social-list{ display:flex;flex-direction:column;align-items:flex-end;gap:8px; margin-bottom:8px; } .float-cta__social-list[hidden]{display:none} .float-cta__social-list a, .float-cta__btn{ position:relative; display:grid;place-items:center;width:48px;height:48px;flex:none; border-radius:var(--r-pill);border:1px solid var(--border); background:var(--bg);color:var(--ink);box-shadow:var(--shadow-md); transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease; } /* per-platform brand colour instead of the shared --ink/--brand above */ .float-cta__social-list a{color:var(--mc,var(--ink))} .float-cta__social-list a:hover{ background:var(--mc,var(--brand));color:#fff;border-color:var(--mc,var(--brand));text-decoration:none;transform:translateY(-1px); } .float-cta__btn:hover{ background:var(--brand);color:#fff;border-color:var(--brand);text-decoration:none;transform:translateY(-1px); } .float-cta__social-list svg, .float-cta__btn svg{width:20px;height:20px;fill:currentColor} .float-cta__btn--share svg, .float-cta__btn--search svg, .float-cta__top svg, .callback-dialog__close svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .float-cta__btn--brand{background:var(--brand);color:#fff;border-color:var(--brand)} .float-cta__btn--brand:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff} .float-cta__label{ position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%); padding:8px 12px;border-radius:var(--r-pill);background:var(--ink);color:#fff; font-family:var(--font-display);font-weight:700;font-size:.78rem;white-space:nowrap; opacity:0;pointer-events:none;box-shadow:var(--shadow-sm);transition:opacity .15s ease; } .float-cta__btn:hover .float-cta__label, .float-cta__btn:focus-visible .float-cta__label{opacity:1} .float-cta__top{ position:absolute;right:16px;bottom:24px; } @media (prefers-reduced-motion:reduce){ .float-cta{transition:none;transform:none} } .callback-dialog{ /* `*{margin:0}` in the reset kills the UA `dialog{margin:auto}` that centres a modal dialog — restore it, or the box pins to the top-left corner. */ margin:auto; width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto; padding:0;border:0;border-radius:var(--r-lg); box-shadow:var(--shadow-lg);color:var(--ink); } @supports not (height:100dvh){.callback-dialog{max-height:calc(100vh - 32px)}} .callback-dialog::backdrop{background:rgba(33,28,26,.45);backdrop-filter:blur(4px)} .callback-dialog__form{display:flex;flex-direction:column;gap:14px;padding:28px 24px 24px;position:relative} .callback-dialog h2{font-size:var(--step-2)} .callback-dialog__lead{color:var(--ink-muted);font-size:var(--step--1)} .callback-dialog__field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:var(--step--1)} .callback-dialog__field input{ min-height:46px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--r-sm); background:var(--bg);font-weight:500; } .callback-dialog__field input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)} .callback-dialog__field .iti{width:100%} .callback-dialog__field .iti input{width:100%} .callback-dialog__form .lead-form__consent{font-size:.78rem} .callback-dialog__form .lead-form__consent + .lead-form__consent{margin-top:-6px} .callback-dialog__close{ position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;display:grid;place-items:center; border-radius:var(--r-pill);color:var(--ink-muted);transition:background-color .15s ease,color .15s ease; } .callback-dialog__close:hover{background:var(--surface);color:var(--ink)} .callback-dialog__close svg{width:18px;height:18px} .callback-dialog .btn{width:100%} /* lead-form dialogs (course enroll, review, idea, vacancy apply) reuse the callback dialog's chrome (centring/backdrop/close button) verbatim — .lead-form's own card styling (border/shadow/radius/padding/max-width) is only needed when it sits inline on a page, so it's neutralised here to avoid a "card inside a card" look. */ .callback-dialog .lead-form{border:0;box-shadow:none;border-radius:0;max-width:none;margin-inline:0;padding:0;gap:var(--s-4)} .callback-dialog .lead-form__title{padding-right:40px} .lead-form-dialog{width:min(580px,calc(100vw - 32px))} /* ---------- Site search (float-CTA popup + search.php) ------------------- */ .search-dialog{ margin:auto;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto; padding:0;border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);color:var(--ink) } @supports not (height:100dvh){.search-dialog{max-height:calc(100vh - 32px)}} .search-dialog::backdrop{background:rgba(33,28,26,.45);backdrop-filter:blur(4px)} .search-dialog__inner{position:relative;padding:clamp(24px,4vw,36px)} .search-dialog__title{font-size:var(--step-2);margin-bottom:var(--s-4)} .search-dialog .callback-dialog__close{position:absolute;top:12px;right:12px} .search-form{display:flex;gap:10px;flex-wrap:wrap} .search-form__input{ flex:1 1 220px;min-height:52px;padding:12px 16px;font:inherit;font-size:var(--step-0); border:1.5px solid var(--border);border-radius:var(--r-pill);background:var(--bg);color:var(--ink) } .search-form__input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)} .search-form__submit{flex:0 0 auto} .page-hero .search-form{max-width:520px;margin-top:var(--s-5)} /* ---------- Cookie banner ------------------------------------------------- */ .cookie-messages{ position:fixed;left:16px;bottom:16px;z-index:1200;width:min(440px,calc(100vw - 32px)); background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg); overflow:hidden;animation:pfb-cookie-in .3s ease; } @keyframes pfb-cookie-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .cookie-messages__tabs{display:flex;border-bottom:1px solid var(--border)} .cookie-tab{flex:1;padding:12px 8px;font-size:.82rem;font-weight:600;color:var(--ink-muted);border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease} .cookie-tab:hover:not(.is-active){color:var(--ink)} .cookie-tab.is-active{color:var(--brand);border-bottom-color:var(--brand)} .cookie-messages__body{padding:var(--s-5);max-height:44vh;overflow-y:auto} .cookie-panel[hidden]{display:none} .cookie-panel__title{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin-bottom:var(--s-3)} .cookie-panel p{font-size:.85rem;color:var(--ink-muted);line-height:1.6} .cookie-panel p+p{margin-top:10px} .cookie-panel__links{margin-top:12px} .cookie-rule{padding:12px 0;border-top:1px solid var(--border)} .cookie-rule__title{font-weight:700;color:var(--ink);margin-bottom:4px} .cookie-messages__actions{padding:var(--s-4) var(--s-5);border-top:1px solid var(--border)} .cookie-allow{width:100%} /* ---------- Slider (vanilla) -------------------------------------------------- */ .slider{position:relative;min-width:0;max-width:100%;overflow-x:clip} /* pan-y: horizontal finger swipes go to the slider JS (main.js sliders), vertical ones still scroll the page */ .slider__viewport{overflow:hidden;min-width:0;touch-action:pan-y} .slider__track{display:flex;gap:clamp(14px,2vw,24px);transition:transform .45s cubic-bezier(.22,.61,.36,1);will-change:transform;min-width:0} .slider__slide{flex:0 0 100%;min-width:0} .slider--peek .slider__slide{flex-basis:clamp(260px,80vw,340px)} .slider__controls{display:flex;align-items:center;justify-content:center;gap:var(--s-4);margin-top:var(--s-5)} .slider__controls--split{justify-content:space-between} .slider__btn{width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--bg);color:var(--ink);display:grid;place-items:center;transition:background-color .15s ease,color .15s ease,border-color .15s ease} .slider__btn:hover{background:var(--brand);color:#fff;border-color:var(--brand)} .slider__btn svg{width:18px;height:18px} .slider__dots{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap} .slider__dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--border);transition:background-color .15s ease,width .15s ease} .slider__dot:hover:not(.is-active){background:var(--ink-muted)} .slider__dot.is-active{background:var(--brand);width:22px} /* hero slider: single slide */ .hero__review-slider .slider__slide{flex:0 0 100%} .reviews__slider .slider__track{--slide-gap:clamp(14px,2vw,24px);gap:var(--slide-gap);align-items:stretch} .reviews__slider .slider__slide{flex:0 0 100%;display:flex;min-width:0} .reviews__slider .review-card{width:100%} .reviews__slider .review-card__text{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden} @media (min-width:768px){ .reviews__slider .slider__slide{flex-basis:calc((100% - var(--slide-gap)) / 2)} } @media (min-width:992px){ .reviews__slider .slider__slide{flex-basis:calc((100% - 2 * var(--slide-gap)) / 3)} } /* teachers + cities: peek carousel */ .teachers__slider .slider__track{align-items:stretch} .teachers__slider .slider__slide{flex:0 0 clamp(240px,74vw,300px);height:auto;align-self:stretch} .cities__slider .slider__slide{flex:0 0 clamp(200px,58vw,260px)} /* ---------- Motion / reveal ------------------------------------------------- */ [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease} [data-reveal].is-visible{opacity:1;transform:none} /* carousel slides are clipped out of the viewport, so the IntersectionObserver never fires for them — never let the reveal state hide them */ .slider__track [data-reveal]{opacity:1;transform:none;transition:none} /* …but a card inside a slider still needs its own hover transition back */ .slider__track .course-card[data-reveal], .slider__track .post-card[data-reveal], .slider__track .teacher-card[data-reveal], .slider__track .review-card[data-reveal]{ transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} [data-reveal]{opacity:1;transform:none} .slider__track{transition:none} } /* ============================================================= Responsive ============================================================= */ @media (min-width:1340px){ .messengers--header{display:flex} } @media (max-width:1200px){ .site-nav__list a{font-size:.82rem;padding:7px 9px;gap:.3em} .site-nav__list a::after{left:9px;right:9px;bottom:2px} .site-nav__list img{width:16px} .site-nav__icon--teachers{width:18px} .site-nav__icon--books{width:20px} /* free the row for the nav — the header CTA is duplicated in the mobile menu, the hero and the float dock */ .site-header__account{display:none} } @media (max-width:1120px){ .site-nav__list{gap:2px} .site-nav__list a{font-size:.78rem;padding:6px 8px;gap:0} .site-nav__list img{display:none} } @media (max-width:1100px){ .hero__art{inset:0 -18vw -1px auto;width:min(70vw,620px)} } @media (max-width:960px){ :root{--header-h:60px} .site-header__logo img{width:92px} .site-nav,.site-header__account{display:none} .burger{display:flex} .mobile-menu{display:none} .mobile-menu.is-open{display:block} .site-header__inner{justify-content:space-between} .hero{ background-color:var(--bg); background-image:none; } .hero__inner{ min-height:0; padding-block:var(--s-6) var(--s-7); display:flex;flex-direction:column;gap:var(--s-4); } .hero__content{max-width:none;align-self:auto} .hero__media{ position:static;inset:auto;width:100%;max-width:none; margin:0;padding:0;min-height:0; background:transparent;background-image:none; border-radius:0;display:block; } .hero__review{width:auto;margin:0;box-shadow:var(--shadow-md)} .video__all{display:none} .video__all--mobile{display:inline-flex} .site-footer__top{flex-direction:column} .site-footer__main,.site-footer__contact{flex:none;width:100%} .site-footer__contact,.site-footer__email{align-items:flex-start;text-align:left} .site-footer__contact .social-list{justify-content:flex-start} } @media (max-width:640px){ :root{--section-pad:44px} .section__head--row{gap:var(--s-3)} .teachers__vacancy{width:100%;justify-content:center} .trust__inner{gap:var(--s-3)} .trust__item{width:100%;justify-content:center} .trust__meta{text-align:center;max-width:none} /* calendar → list of upcoming groups from the same markup */ .calendar-data{display:flex;flex-direction:column;gap:8px} .day.day-of-the-week{display:none} .day.day-of-the-month{display:none} .day.day-of-the-month:has(.day-content a){ display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;min-height:0;padding:12px; } .day.day-of-the-month:has(.day-content a) .date{ text-align:center;font-size:1.1rem;color:var(--ink);background:var(--bg);border:1px solid var(--border); border-radius:var(--r-sm);padding:8px 0; } .day.day-of-the-month.today:has(.day-content a) .date{color:var(--brand)} .day-content{flex-direction:row;flex-wrap:wrap} .day-content .course{flex:1 1 120px} .reviews__ratings{gap:var(--s-3)} .reviews__rating-card{flex:1 1 100%} .cookie-messages{left:8px;right:8px;bottom:8px;width:auto} .float-cta__stack{right:10px} .float-cta__top{right:10px;bottom:16px} .float-cta__social-list a, .float-cta__btn{width:44px;height:44px} .float-cta__label{display:none} } @media (max-width:380px){ .hero__badge{display:block;width:max-content} .day-content .course{flex-basis:100%} } /* ============================================================= STAGE 2 — inner-page templates (course/teacher/city/blog/video/ reviews/contacts/products/legal/404/wc/tests). Same design system. ============================================================= */ /* ---- containers used by stage-2 pages ---- */ .container--sm{width:100%;margin-inline:auto;padding-inline:1rem;max-width:760px} @media (min-width:1200px){.container--sm{max-width:820px}} /* ---- breadcrumbs ---- */ .breadcrumbs{margin-bottom:var(--s-4)} .breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;font-size:var(--step--1);color:var(--ink-muted)} .breadcrumbs li{display:flex;align-items:center;gap:6px 4px} .breadcrumbs li+li::before{content:"/";color:var(--border);font-weight:400} .breadcrumbs a{color:var(--ink-muted);font-weight:500} .breadcrumbs a:hover{color:var(--brand)} .breadcrumbs [aria-current="page"]{color:var(--ink);font-weight:600} /* ---- page hero (compact inner-page header) ---- */ .page-hero{padding-block:clamp(28px,4vw,52px) clamp(28px,4vw,48px);background:var(--surface)} .page-hero--tint{ background:linear-gradient(180deg,#fff 0%,var(--brand-tint) 130%); border-bottom:1px solid var(--border); } .page-hero--plain{background:var(--bg)} .page-hero__eyebrow{font-weight:600;color:var(--brand);font-size:var(--step--1);margin-bottom:var(--s-3);text-transform:uppercase;letter-spacing:.04em} .page-hero__title{font-size:var(--step-3);color:var(--ink);max-width:22ch} .page-hero__title .accent{color:var(--brand)} .page-hero__lead{margin-top:var(--s-4);font-size:var(--step-1);color:var(--ink-muted);max-width:60ch} .page-hero__prose{margin-top:var(--s-4);max-width:70ch} .page-hero__actions{margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:var(--s-3)} .e404__code{font-family:var(--font-display);font-weight:900;font-size:clamp(4rem,3rem + 8vw,9rem);color:var(--brand-tint-2);line-height:1} /* centered page-hero (404 / any text--center hero): title, lead and CTA row follow the centering */ .page-hero .text--center .page-hero__title, .page-hero .text--center .page-hero__lead{margin-inline:auto} .page-hero .text--center .page-hero__actions{justify-content:center} .page-hero .text--center .breadcrumbs ol{justify-content:center} /* split page-hero: text column + image (city pages) */ .page-hero--split .page-hero__split{display:grid;gap:clamp(22px,4vw,52px);align-items:center;margin-top:var(--s-5)} .page-hero--split .page-hero__title{max-width:20ch} .page-hero--split .page-hero__lead{margin-top:var(--s-4);max-width:52ch} .page-hero__figure{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)} .page-hero__figure img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10} @media (min-width:900px){ .page-hero--split .page-hero__split{grid-template-columns:1.05fr .95fr} .page-hero__figure img{aspect-ratio:4/3} } /* ---- generic section variants ---- */ .section--rail{background:var(--surface);padding-block:var(--section-pad)} .section--prose,.section--article{background:var(--bg);padding-block:var(--section-pad)} .section--contacts,.section--vacancies,.section--products, .section--blog-archive,.section--video-archive, .section--teachers-archive,.section--video-related{background:var(--bg);padding-block:var(--section-pad)} .section--teachers-archive{background:var(--surface)} /* red, like the homepage reviews slider — .review-card is the same component there and already reads fine on this background */ .section--reviews-archive{background:var(--brand);color:#fff;padding-block:var(--section-pad)} /* the trust strip above it is red too — keep the two bands visibly separate */ .trust + .section--reviews-archive{border-top:1px solid rgba(255,255,255,.3)} .section--reviews-archive .section__title{color:#fff} .section--reviews-archive .section__subtitle{color:rgba(255,255,255,.85)} .section--reviews-archive .chip-row--filter .chip.is-active{background:#fff;color:var(--brand);border-color:#fff} /* /reviews archive: a regular light section instead of the red band (the teacher page keeps red) */ .section--reviews-archive.section--reviews-plain{background:var(--surface);color:var(--ink)} .trust + .section--reviews-plain{border-top:0} .section--reviews-plain .chip-row--filter .chip.is-active{background:var(--brand);color:#fff;border-color:var(--brand)} /* ---- long-form prose (articles, legal, SEO text, course/city body) ---- */ .prose{color:var(--ink-muted);font-size:var(--step-0);line-height:1.7;max-width:70ch;overflow-wrap:anywhere} .section--prose .prose,.section--article .prose{margin-inline:auto} .prose>*+*{margin-top:var(--s-4)} .prose h2{font-size:var(--step-2);color:var(--ink);margin-top:var(--s-7);line-height:1.25} .prose h3{font-size:var(--step-1);color:var(--ink);margin-top:var(--s-6)} .prose h4{font-size:var(--step-0);color:var(--ink);margin-top:var(--s-5)} .prose h2:first-child,.prose h3:first-child{margin-top:0} .prose a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px} .prose ul,.prose ol{margin-left:1.1em;display:flex;flex-direction:column;gap:8px} .prose ul{list-style:disc} .prose ol{list-style:decimal} .prose li{padding-left:4px} .prose img{border-radius:var(--r-md);margin-block:var(--s-4)} .prose blockquote{border-left:3px solid var(--brand);padding-left:var(--s-4);color:var(--ink);font-style:italic} .prose table{width:100%;border-collapse:collapse;font-size:var(--step--1);display:block;overflow-x:auto} .prose th,.prose td{border:1px solid var(--border);padding:8px 12px;text-align:left} .prose th{background:var(--surface);font-weight:700} .prose iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r-md);margin-block:var(--s-4)} .prose--legal{font-size:var(--step--1);line-height:1.65} .prose--legal h2{font-size:var(--step-1)} .prose__facts{list-style:none!important;margin-left:0!important;flex-direction:row!important;flex-wrap:wrap;gap:10px!important} .prose__facts li{padding:0;background:var(--brand-tint);border:1px solid var(--brand-tint-2);border-radius:var(--r-pill);padding:8px 16px;font-weight:600;color:var(--ink);font-size:var(--step--1)} .article__title{font-size:var(--step-3);color:var(--ink);margin-bottom:var(--s-4);line-height:1.2;text-wrap:pretty} .article__meta{margin-bottom:var(--s-5);gap:6px 16px;font-size:.82rem} .article__meta .post-card__meta-ico svg{width:15px;height:15px} .article__media{margin:0 0 var(--s-6);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow-sm)} .article__media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover} .article__cta{margin-top:var(--s-7)} /* ---- wide long-form text + widget sidebar (city / kursy / course SEO body) ---- */ /* the grid spans the standard container--lg width (edges align with the rest of the page) */ .section--with-aside{background:var(--bg);padding-block:var(--section-pad)} .with-aside{display:grid;gap:clamp(28px,3.5vw,48px)} .with-aside__main{min-width:0} .with-aside__main .prose{max-width:74ch} .with-aside__main .prose--legal{max-width:90ch} .with-aside__aside{display:flex;flex-direction:column;gap:var(--s-5);min-width:0} @media (min-width:1000px){ .with-aside{grid-template-columns:minmax(0,1fr) 320px} .with-aside__aside{position:sticky;top:calc(var(--header-h) + 16px);align-self:start} } @media (min-width:1400px){ .with-aside{grid-template-columns:minmax(0,1fr) 336px;gap:56px} } .widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5)} .widget__title{font-family:var(--font-display);font-weight:800;font-size:var(--step-0);color:var(--ink);line-height:1.25} .widget__text{margin-top:var(--s-3);font-size:var(--step--1);color:var(--ink-muted);line-height:1.55} .widget .btn{width:100%;margin-top:var(--s-4)} .widget--promo{background:linear-gradient(180deg,#fff,var(--brand-tint));border-color:var(--brand-tint-2)} .widget__posts{margin-top:var(--s-3);list-style:none;display:flex;flex-direction:column} .widget__posts li+li{border-top:1px solid var(--border);margin-top:var(--s-3);padding-top:var(--s-3)} .widget__posts a{display:flex;flex-direction:column;gap:4px;color:var(--ink)} .widget__posts a:hover{text-decoration:none} .widget-post__title{font-weight:600;font-size:var(--step--1);line-height:1.35} .widget__posts a:hover .widget-post__title{color:var(--brand)} .widget-post__title[aria-current="page"]{color:var(--brand);cursor:default} /* same date · read time · views row as the blog cards (.post-card__meta), a touch smaller */ .widget-post__meta{gap:2px 12px;font-size:.72rem} .widget-post__meta .post-card__meta-ico svg{width:12px;height:12px} .widget__more{display:inline-flex;align-items:center;gap:5px;margin-top:var(--s-4);font-family:var(--font-display);font-weight:700;font-size:var(--step--1);color:var(--brand-dark)} .widget__more svg{width:16px;height:16px;transition:transform .15s ease} .widget__more:hover{text-decoration:none} .widget__more:hover svg{transform:translateX(3px)} @media (prefers-reduced-motion:no-preference){ .widget__posts a,.widget-post__title{transition:color .15s ease} } /* ---- lead / enrollment forms ---- */ .lead-form{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:var(--s-4);max-width:560px;margin-inline:auto} .lead-form__title{font-size:var(--step-2);color:var(--ink)} .lead-form__lead{color:var(--ink-muted);font-size:var(--step--1);margin-top:calc(-1 * var(--s-2))} .field{display:flex;flex-direction:column;gap:6px} .field__label{font-weight:600;font-size:var(--step--1);color:var(--ink)} .field__input{ min-height:48px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-sm); background:var(--bg);font-weight:500;font-size:var(--step-0);width:100%;transition:border-color .15s ease,box-shadow .15s ease; } textarea.field__input{min-height:120px;resize:vertical} .field__input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)} .field__input:hover:not(:focus):not(:disabled), .callback-dialog__field input:hover:not(:focus){border-color:color-mix(in srgb,var(--brand) 45%,var(--border))} .callback-dialog__field input{transition:border-color .15s ease,box-shadow .15s ease} .field__label-hint{font-weight:400;color:var(--ink-muted);font-size:.85em;margin-left:6px} input[type="file"].field__input{padding:9px 14px;cursor:pointer} input[type="file"].field__input::file-selector-button{ margin-right:12px;padding:8px 14px;border:0;border-radius:var(--r-pill); background:var(--brand-tint);color:var(--brand-dark);font-weight:700;font-size:.85em; cursor:pointer;transition:background-color .15s ease; } input[type="file"].field__input::file-selector-button:hover{background:var(--brand-tint-2)} .field--error .field__input{border-color:#c8352b} .field__err{color:#c8352b;font-size:.8rem;font-weight:600} .lead-form__note{font-size:.78rem;color:var(--ink-muted);line-height:1.5} .lead-form__submit{width:100%;margin-top:var(--s-2)} .lead-form__ok{background:color-mix(in srgb,var(--ok) 14%,#fff);border:1px solid var(--ok);color:#0c6b50;border-radius:var(--r-sm);padding:12px 14px;font-weight:600;font-size:var(--step--1)} .lead-form.is-sent .field,.lead-form.is-sent .lead-form__note,.lead-form.is-sent .lead-form__submit,.lead-form.is-sent .lead-form__lead{display:none} /* intl-tel-input compatibility (theme loads it for #phone) */ .lead-form .iti{width:100%} /* ---- course single hero (per-level accent theming) ---- */ .course-hero{--accent:var(--c-a1);position:relative;isolation:isolate; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb,var(--accent) 13%,transparent) 0%, transparent 60%), linear-gradient(180deg,#fff 0%, color-mix(in srgb,var(--accent) 7%,#fff) 100%); border-bottom:1px solid var(--border);padding-block:clamp(28px,4vw,52px) clamp(40px,6vw,76px)} .course-hero.course-a1{--accent:var(--c-a1)} .course-hero.course-a2{--accent:var(--c-a2)} .course-hero.course-b1{--accent:var(--c-b1)} .course-hero.course-b2{--accent:var(--c-b2)} .course-hero.course-b2-intensive{--accent:var(--c-b2i)} .course-hero.course-c1{--accent:var(--c-c1)} .course-hero.course-karta{--accent:var(--c-karta)} .course-hero.course-individual{--accent:var(--c-individual)} .course-hero.course-club{--accent:var(--c-club)} .course-hero.course-corpo{--accent:var(--c-corpo)} .course-hero.course-club-course{--accent:var(--c-club-course)} .course-hero__grid{margin-top:var(--s-5)} .course-hero__title{font-size:var(--step-3);color:var(--ink);line-height:1.14;text-wrap:balance} .course-hero__title::before{content:"";display:block;width:52px;height:5px;border-radius:var(--r-pill);background:var(--accent);margin-bottom:var(--s-4)} .course-hero__subtitle{margin-top:var(--s-4);font-size:var(--step-1);color:var(--ink-muted);max-width:52ch;line-height:1.5} .course-hero__facts{margin-top:var(--s-6);display:flex;flex-wrap:wrap;gap:10px;list-style:none} .course-hero__fact{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:24px;padding:9px 16px;font-weight:600;font-size:var(--step--1);color:var(--ink);box-shadow:var(--shadow-sm)} .course-hero__fact svg{width:17px;height:17px;color:var(--accent);flex:none} .course-hero__fact--price{font-size:var(--step-0);font-weight:700;padding-inline:16px} .course-hero__price-old{font-weight:500;opacity:.7;text-decoration-thickness:1px} .course-hero__actions{margin-top:var(--s-6)} .course-hero__actions .btn{width:100%;max-width:360px} .course-hero .btn--primary{--btn-bg:var(--accent);--btn-fg:#fff} .course-hero__testlink{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-4);font-size:var(--step--1);color:var(--ink-muted)} .course-hero__testlink b{color:var(--accent)} /* the exact live orange (#ff5b01) is only 3.1:1 against white — dark text on the fill, and the old deeper orange where the accent is used as small text on white */ .course-hero.course-b2-intensive .btn--primary{--btn-fg:var(--ink)} .course-hero.course-b2-intensive .course-hero__testlink b{color:#bf4500} .course-hero__testlink svg{width:15px;height:15px;color:var(--accent);flex:none} .course-hero__testlink:hover{text-decoration:none} .course-hero__testlink:hover b{text-decoration:underline} /* only the placement — the card itself is the homepage's .hero__review (same partial, template-parts/hero-reviews.php) */ .course-hero__review{margin-top:var(--s-7);max-width:380px} /* full-bleed cover variant: the course photo is the section background */ .course-hero--cover{ background:#12161d;border-bottom:0;overflow:hidden;color:#fff; /* roughly the height of the homepage first screen — not a full viewport */ min-height:clamp(460px,72vh,620px);display:flex;align-items:center; padding-block:clamp(64px,9vh,104px) clamp(40px,6vh,72px) } .course-hero--cover .course-hero__media{ position:absolute;inset:0;z-index:-2;border-radius:0;box-shadow:none;aspect-ratio:auto; background-image:var(--course-img);background-size:cover;background-position:center } .course-hero--cover::after{ content:"";position:absolute;inset:0;z-index:-1; background: linear-gradient(96deg, rgba(10,13,18,.9) 0%, rgba(10,13,18,.7) 34%, rgba(10,13,18,.28) 62%, rgba(10,13,18,.06) 100%), linear-gradient(0deg, rgba(10,13,18,.6) 0%, transparent 42%), linear-gradient(0deg, color-mix(in srgb,var(--accent) 26%,transparent) 0%, transparent 55%) } .course-hero--cover .container{position:relative;z-index:1} .course-hero--cover .breadcrumbs{color:rgba(255,255,255,.72)} .course-hero--cover .breadcrumbs a{color:rgba(255,255,255,.72)} .course-hero--cover .breadcrumbs a:hover{color:#fff} .course-hero--cover .breadcrumbs [aria-current]{color:#fff} .course-hero--cover .course-hero__grid{max-width:640px;margin-top:var(--s-6)} .course-hero--cover .course-hero__title{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)} .course-hero--cover .course-hero__subtitle{color:rgba(255,255,255,.86)} .course-hero--cover .course-hero__fact{ background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff; box-shadow:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px) } .course-hero--cover .course-hero__fact svg{color:#fff} .course-hero--cover .course-hero__testlink{color:rgba(255,255,255,.82)} .course-hero--cover .course-hero__testlink b{color:#fff} .course-hero--cover .course-hero__testlink svg{color:#fff} .course-hero--cover .course-hero__review{margin-top:var(--s-6)} /* desktop: lift the review card into the hero's bottom-right corner, like the homepage */ @media (min-width:1200px){ .course-hero--cover .container{align-self:stretch;display:flex;flex-direction:column;justify-content:center} .course-hero--cover .course-hero__review{ position:absolute;z-index:2;right:var(--gutter);bottom:clamp(40px,8vh,88px); width:min(380px,32vw);max-width:none;margin:0 } } /* the cover hero is ~one homepage-hero tall now, not a full screen — the "scroll down" chevron would be misleading, so it stays hidden */ .course-hero--cover .course-hero__scroll{display:none} @keyframes pfb-hero-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}} @media (max-width:640px){ .course-hero--cover{min-height:auto;padding-block:clamp(84px,14vh,120px) clamp(40px,8vh,64px)} .course-hero--cover::after{background: linear-gradient(180deg, rgba(10,13,18,.82) 0%, rgba(10,13,18,.66) 50%, rgba(10,13,18,.8) 100%), linear-gradient(0deg, color-mix(in srgb,var(--accent) 24%,transparent) 0%, transparent 60%)} .course-hero--cover .course-hero__review{max-width:none} .course-hero--cover .course-hero__scroll{display:none} } @media (prefers-reduced-motion:reduce){.course-hero__scroll{animation:none}} /* ---- teacher profile (profile header + bio in the main column, widgets in the sidebar) ---- */ .teacher-head{display:flex;gap:clamp(16px,3vw,28px);align-items:center;margin-bottom:var(--s-6)} .teacher-head__photo{flex:none;width:clamp(120px,28vw,210px);margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow-sm)} .teacher-head__photo img{width:100%;height:auto;object-fit:cover;display:block} .teacher-head__intro{min-width:0} .teacher-head__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)} @media (max-width:520px){.teacher-head{flex-direction:column;align-items:flex-start}.teacher-head__photo{width:min(210px,60%)}} .teacher-profile__name{font-size:var(--step-3);color:var(--ink);margin-bottom:var(--s-4)} .teacher-profile__courses{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:var(--s-5)} .teacher-profile__courses-label{font-size:.75rem;font-weight:600;color:var(--ink-muted);width:100%} .teacher-profile__course{--pill:var(--c-a1);font-family:var(--font-display);font-weight:700;font-size:.78rem;color:#fff;background:var(--pill);border-radius:var(--r-pill);padding:5px 13px;line-height:1.3} .teacher-profile__course:hover{text-decoration:none;filter:brightness(1.06)} .teacher-profile__course.course-a1{--pill:var(--c-a1)} .teacher-profile__course.course-a2{--pill:var(--c-a2)} .teacher-profile__course.course-b1{--pill:var(--c-b1)} .teacher-profile__course.course-b2{--pill:var(--c-b2)} .teacher-profile__course.course-b2-intensive{--pill:var(--c-b2i)} .teacher-profile__course.course-c1{--pill:var(--c-c1)} .teacher-profile__course.course-karta{--pill:var(--c-karta)} .teacher-profile__course.course-club{--pill:var(--c-club)} .teacher-profile__course.course-individual{--pill:var(--c-individual)} .teacher-profile__course.course-club-course{--pill:var(--c-club-course)} .with-aside__main > .btn{margin-top:var(--s-6)} /* ---- chip rows (blog/video tags) ---- */ .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-6)} .chip{display:inline-flex;align-items:center;padding:7px 15px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg);color:var(--ink-muted);font-weight:600;font-size:var(--step--1)} .chip:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)} /* ---- post cards (blog archive) ---- */ .post-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;height:100%} .post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-tint-2)} .post-card__link{display:flex;flex-direction:column;height:100%;color:var(--ink)} .post-card__link:hover{text-decoration:none} .post-card__media{aspect-ratio:16/10;background:var(--surface-2);overflow:hidden} .post-card__media img{width:100%;height:100%;object-fit:cover} .post-card__body{display:flex;flex-direction:column;gap:10px;padding:var(--s-5);flex:1} .post-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:.75rem;font-weight:600;color:var(--ink-muted);letter-spacing:.01em} .post-card__meta-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;line-height:1} a.post-card__meta-item{transition:color .15s ease} a.post-card__meta-item:hover{color:var(--brand);text-decoration:none} .post-card__meta-ico{display:inline-flex;align-items:center;color:var(--brand);margin-top:-1px} .post-card__meta-ico svg{display:block;width:14px;height:14px} .post-card__date{font-size:.78rem;font-weight:600;color:var(--ink-muted)} .post-card__title{font-size:var(--step-1);color:var(--ink);line-height:1.3} .post-card__excerpt{font-size:var(--step--1);color:var(--ink-muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .post-card__more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:var(--step--1);color:var(--brand-dark)} .post-card__more svg{width:16px;height:16px;transition:transform .15s ease} .post-card:hover .post-card__more svg{transform:translateX(3px)} /* ---- video cards + feature ---- */ .video-embed{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#000} .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .with-aside__main > .video-embed{margin-bottom:var(--s-6)} .video-feature{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);margin-bottom:var(--s-7);align-items:center} @media (min-width:820px){.video-feature{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}} .video-feature__title{font-size:var(--step-2);color:var(--ink)} .video-feature__title a{color:inherit} .video-feature__body p{margin-top:var(--s-3);color:var(--ink-muted)} .video-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);height:100%;display:flex;flex-direction:column} .video-card .video-embed{border-radius:0} .video-card__body{padding:var(--s-4);display:flex;flex-direction:column;gap:8px} .video-card__title{font-size:var(--step-0);color:var(--ink);line-height:1.35} .video-card__title a{color:inherit} .video-card__title a:hover{color:var(--brand);text-decoration:none} .video-card__text{font-size:var(--step--1);color:var(--ink-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ---- reviews page (reviews.html) ---- */ .section--reviews-stats{background:var(--bg);padding-block:clamp(24px,4vw,44px)} .reviews-stats{display:grid;gap:var(--s-4);grid-template-columns:1fr} @media (min-width:620px){.reviews-stats{grid-template-columns:1fr 1fr}} @media (min-width:920px){.reviews-stats{grid-template-columns:repeat(2,minmax(0,1fr)) 1.4fr}} .reviews-stat{display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2.4vw,26px); background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);color:var(--ink); transition:box-shadow .15s ease,border-color .15s ease} a.reviews-stat:hover{text-decoration:none;box-shadow:var(--shadow-sm);border-color:var(--brand-tint-2)} .reviews-stat__value{font-family:var(--font-display);font-weight:800;font-size:clamp(1.75rem,1.3rem + 1.8vw,2.5rem);line-height:1;color:var(--ink)} .reviews-stat .stars::before{font-size:1rem} .reviews-stat__label{font-size:var(--step--1);color:var(--ink-muted);font-weight:600} .reviews-stat--wide{background:linear-gradient(180deg,#fff,var(--brand-tint));border-color:var(--brand-tint-2);justify-content:center} .reviews-stat--wide .reviews-stat__value{color:var(--brand)} .reviews-stat--wide .reviews-stat__label{max-width:22ch} .chip-row--filter .chip{cursor:pointer;font:inherit;font-weight:600;font-size:var(--step--1)} .chip-row--filter .chip b{font-weight:800;margin-left:6px;opacity:.6} .chip-row--filter .chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff} .chip-row--filter .chip.is-active b{opacity:.85} .reviews-grid{columns:3 300px;column-gap:var(--s-5)} .reviews-grid .review-card{break-inside:avoid;margin:0 0 var(--s-5);gap:var(--s-4);display:flex;flex-direction:column} .reviews-grid .review-card[hidden]{display:none} @media (max-width:660px){.reviews-grid{columns:auto}} .section--reviews-archive .review-card__text{display:block;-webkit-line-clamp:unset;white-space:pre-line} /* single-teacher renders the reviews as a slider — re-clamp the card text */ .section--reviews-archive .reviews__slider .review-card__text{ display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;white-space:normal } .review-card__foot{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--border)} .review-card__avatar{width:48px;height:48px;border-radius:var(--r-pill);object-fit:cover;flex:none;background:var(--surface-2)} .review-card__avatar--blank{background:var(--brand-tint)} .review-card__who{display:flex;flex-direction:column;gap:2px;min-width:0} .review-card__who .review-card__name{font-family:var(--font-display);font-weight:700;font-size:var(--step-0)} .review-card__date{font-size:.76rem;color:var(--ink-muted)} .review-card__source{display:inline-flex;align-items:center;gap:4px;font-size:.76rem;font-weight:700;letter-spacing:.02em;color:var(--ink-muted)} .review-card__source svg{width:12px;height:12px} a.review-card__source:hover{color:var(--brand)} .review-card__source--google{color:#4285F4} .review-card__source--facebook{color:#1877F2} a.review-card__source--google:hover{color:#3367d6} a.review-card__source--facebook:hover{color:#0e5fcc} .reviews-grid__empty{text-align:center;color:var(--ink-muted);padding:var(--s-7) 0} /* ---- contacts page ---- */ .contact-hub{display:grid;gap:clamp(28px,4vw,56px)} /* the form is the page's main action — give it the wider column, not a 400px strip */ @media (min-width:920px){.contact-hub{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}} .contact-hub__title{font-size:var(--step-2);color:var(--ink)} .contact-hub__main{display:flex;flex-direction:column;gap:var(--s-7)} .contact-block{display:flex;flex-direction:column;gap:var(--s-4)} .contact-block__label{color:var(--ink-muted);font-size:var(--step--1);line-height:1.55;margin:0;max-width:48ch} .contact-hub__title + .contact-block__label{margin-top:calc(var(--s-2) * -1)} .messenger-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)} @media (min-width:560px){.messenger-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (min-width:920px){.messenger-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1160px){.messenger-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} .messenger-btn{display:flex;flex-direction:column;align-items:center;gap:10px;padding:var(--s-4) var(--s-2); background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm); color:var(--ink);font-weight:600;font-size:var(--step--1);text-align:center; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease} .messenger-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-tint-2);text-decoration:none} .messenger-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .messenger-btn__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-pill);background:var(--brand-tint);color:var(--brand);transition:background-color .15s ease,color .15s ease} .messenger-btn__icon svg{width:24px;height:24px;fill:currentColor} .messenger-btn--telegram .messenger-btn__icon{color:#2AABEE} .messenger-btn--messenger .messenger-btn__icon{color:#0866FF} .messenger-btn--viber .messenger-btn__icon{color:#7360F2} .messenger-btn--whatsapp .messenger-btn__icon{color:#25D366} .messenger-btn--telegram:hover .messenger-btn__icon{background:#2AABEE;color:#fff} .messenger-btn--messenger:hover .messenger-btn__icon{background:#0866FF;color:#fff} .messenger-btn--viber:hover .messenger-btn__icon{background:#7360F2;color:#fff} .messenger-btn--whatsapp:hover .messenger-btn__icon{background:#25D366;color:#fff} .contact-lines{display:flex;flex-direction:column;gap:var(--s-3)} .contact-line{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4); background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);color:var(--ink); transition:background-color .15s ease,border-color .15s ease} @media (min-width:600px){.contact-line{padding:var(--s-4) var(--s-5)}} .contact-line:hover{background:var(--brand-tint);border-color:var(--brand-tint-2);text-decoration:none} .contact-line:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .contact-line__icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--border);color:var(--brand)} .contact-line__icon svg{width:22px;height:22px;fill:currentColor} .contact-line__body{display:flex;flex-direction:column;gap:2px;min-width:0} .contact-line__label{font-size:.78rem;font-weight:600;color:var(--ink-muted)} .contact-line__value{font-family:var(--font-display);font-weight:700;font-size:clamp(0.85rem,0.5rem + 1.5vw,1.375rem);color:var(--ink);overflow-wrap:anywhere;line-height:1.3} @media (max-width:380px){ .contact-line{gap:var(--s-3)} .contact-line__icon{width:40px;height:40px} } .contact-hub__aside .lead-form{margin:0;max-width:none} @media (min-width:920px){.contact-hub__aside .lead-form{position:sticky;top:calc(var(--header-h) + 16px)}} /* ---- products ---- */ .product-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);height:100%;transition:transform .16s ease,box-shadow .16s ease} .product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .product-card__link{display:flex;flex-direction:column;height:100%;color:var(--ink)} .product-card__link:hover{text-decoration:none} .product-card__media{aspect-ratio:4/3;background:var(--surface-2);display:grid;place-items:center;padding:var(--s-5)} .product-card__media img{max-height:100%;width:auto;object-fit:contain} .product-card__body{display:flex;flex-direction:column;gap:12px;padding:var(--s-5);flex:1} .product-card__title{font-size:var(--step-1);color:var(--ink)} .product-card__excerpt{font-size:var(--step--1);line-height:1.55;max-width:none;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .product-card__excerpt p{margin:0} .product-card__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3)} .product-card__price{font-family:var(--font-display);font-weight:800;font-size:var(--step-1);color:var(--ink)} .product-price{display:flex;flex-direction:column;gap:4px} .product-price__old{display:block;font-size:var(--step-0);font-weight:500;color:var(--ink-muted);opacity:.75;text-decoration:line-through} .product-price__now{font-family:var(--font-display);font-weight:800;font-size:var(--step-3);color:var(--ink);line-height:1.1} .product-card__more{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:var(--step--1);color:var(--brand)} .product-card__more svg{width:16px;height:16px;transition:transform .15s ease} .product-card:hover .product-card__more svg{transform:translateX(3px)} /* ---- vacancies (/kariera archive + single) ---- */ .section--vacancies{background:var(--bg);padding-block:clamp(28px,4vw,44px) var(--section-pad)} .section--vacancies-more{background:var(--surface);border-top:1px solid var(--border)} .section--vacancies-more__all{margin-top:var(--s-6);text-align:center} .vacancy-filter{margin-bottom:var(--s-6)} .vacancy-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr} @media (min-width:760px){.vacancy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .vacancy-card{ position:relative;display:flex;flex-direction:column;gap:var(--s-3);height:100%; background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--brand); border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px);box-shadow:var(--shadow-sm); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease } .vacancy-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand)} .vacancy-card__dept{ align-self:flex-start;font-family:var(--font-display);font-weight:800;font-size:.68rem; letter-spacing:.09em;text-transform:uppercase;color:var(--brand-dark); background:var(--brand-tint);border-radius:var(--r-pill);padding:5px 12px } .vacancy-card__title{font-family:var(--font-display);font-weight:800;font-size:var(--step-1);line-height:1.24;color:var(--ink);text-wrap:balance} .vacancy-card__title a{color:inherit;text-decoration:none} .vacancy-card__title a::after{content:"";position:absolute;inset:0;border-radius:inherit} .vacancy-card__title a:hover{text-decoration:none;color:var(--brand)} .vacancy-card__meta{display:flex;flex-wrap:wrap;gap:7px 16px;list-style:none;margin:0} .vacancy-card__meta li{display:inline-flex;align-items:center;gap:6px;font-size:var(--step--1);font-weight:600;color:var(--ink-muted)} .vacancy-card__meta svg{width:15px;height:15px;color:var(--brand);flex:none} .vacancy-card__salary{ align-self:flex-start;font-family:var(--font-display);font-weight:800;font-size:var(--step-0);color:var(--ink); background:var(--brand-tint);border:1px solid var(--brand-tint-2);border-radius:var(--r-md);padding:5px 12px } .vacancy-card__excerpt{font-size:var(--step--1);color:var(--ink-muted);line-height:1.6;overflow-wrap:anywhere; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .vacancy-card__cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px; font-family:var(--font-display);font-weight:700;font-size:var(--step--1);color:var(--brand)} .vacancy-card__cta svg{width:16px;height:16px;transition:transform .15s ease} .vacancy-card:hover .vacancy-card__cta svg{transform:translateX(3px)} .vacancy-grid__empty{margin-top:var(--s-5);color:var(--ink-muted);font-size:var(--step-0)} .vacancy-empty{max-width:52ch;text-align:center;margin-inline:auto;padding-block:var(--s-5)} .vacancy-empty__title{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);color:var(--ink);margin-bottom:var(--s-3)} .vacancy-empty p{color:var(--ink-muted);line-height:1.6;margin-bottom:var(--s-5)} /* single vacancy hero */ .vacancy-hero__dept{margin-bottom:var(--s-3)} .vacancy-hero__title{max-width:26ch} .vacancy-hero__meta{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;margin:var(--s-5) 0 0} .vacancy-hero__meta li{display:inline-flex;align-items:center;gap:7px;font-size:var(--step--1);font-weight:600;color:var(--ink); background:var(--bg);border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 14px} .vacancy-hero__meta svg{width:16px;height:16px;color:var(--brand);flex:none} .vacancy-hero__meta-salary{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important;font-family:var(--font-display);font-weight:800} .vacancy-widget{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--shadow-sm)} .vacancy-widget__title{font-family:var(--font-display);font-weight:800;font-size:var(--step-0);color:var(--ink);margin-bottom:var(--s-4)} .vacancy-widget__list{display:flex;flex-direction:column;gap:var(--s-3);margin:0 0 var(--s-5)} .vacancy-widget__list div{display:flex;justify-content:space-between;gap:var(--s-3);font-size:var(--step--1);line-height:1.4} .vacancy-widget__list dt{color:var(--ink-muted);flex:none} .vacancy-widget__list dd{margin:0;font-weight:700;color:var(--ink);text-align:right} .vacancy-widget .btn{width:100%} .vacancy-apply__hint{margin-top:var(--s-4);font-size:var(--step--1);color:var(--ink-muted);text-align:center} /* kept: the "we're hiring teachers" band used on /teachers */ .vacancy-band__title{font-size:var(--step-2);color:var(--ink);margin-bottom:var(--s-4)} .section--vacancy-band{background:var(--surface);text-align:center;padding-block:var(--section-pad)} .section--vacancy-band .container{display:flex;flex-direction:column;align-items:center} .section--vacancy-band p{color:var(--ink-muted);line-height:1.6;margin-bottom:var(--s-6)} /* ---- courses rail (shared "Наши курсы" carousel) ---- */ .courses__rail .slider__track{align-items:stretch} .courses__rail .slider__slide{flex:0 0 clamp(280px,86vw,340px);height:auto} .courses__rail .course-card{width:100%} /* let the featured card's accent ring + the hover lift bleed past the viewport edge instead of being clipped flat at the bottom corners */ .courses__rail .slider__viewport{overflow:clip;overflow-clip-margin:14px} /* ---- WooCommerce / test placeholders ---- */ .wc-note,.test-note{background:var(--surface);border:1px dashed var(--border);border-radius:var(--r-md);padding:var(--s-5);color:var(--ink-muted);font-size:var(--step--1);line-height:1.6;margin-bottom:var(--s-5)} .wc-note code,.test-note code{background:var(--surface-2);padding:1px 5px;border-radius:4px;font-size:.9em} /* ---- template-tests.php: honesty notices around .section--test-steps ---- */ /* vertical rhythm: hero → note → steps → why → rail. Each neighbour section already brings its own padding-block, so the notices only add space where none exists (above the note) and never double it up below/around themselves. */ .pfb-note{ width:calc(100% - 2 * var(--gutter));max-width:960px;margin:var(--s-7) auto 0;padding:var(--s-5) var(--s-6); background:var(--brand-tint);border-left:4px solid var(--brand);border-radius:var(--r-md); } .pfb-note p{margin:0;color:var(--ink);font-size:var(--step--1);line-height:1.6} .pfb-note strong{color:var(--brand-dark)} .pfb-why{max-width:760px;margin:0 auto var(--section-pad);padding-inline:var(--gutter)} .pfb-why__title{font-size:var(--step-2);color:var(--ink);margin-bottom:var(--s-4)} .pfb-why__lead{font-size:var(--step-0);color:var(--ink-muted);line-height:1.6;margin-bottom:var(--s-4)} .pfb-why p{color:var(--ink-muted);line-height:1.6;margin-bottom:var(--s-4)} .pfb-why__list{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--s-5);padding-left:0;list-style:none} .pfb-why__list li{position:relative;padding-left:24px;color:var(--ink-muted);line-height:1.55} .pfb-why__list li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:8px;border-radius:50%;background:var(--brand);transform:translateY(-50%)} .pfb-why__accent{background:var(--brand-tint);border-radius:var(--r-md);padding:var(--s-5) var(--s-6)} .pfb-why__accent p{margin:0;color:var(--ink);font-weight:600;line-height:1.6} .section__language-test-simple .lead-form{margin-bottom:var(--s-5)} /* ---- level test landing (test-a1 / test-a2) ---- */ .test-meta{margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none} .test-meta li{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;background:var(--bg);border:1px solid var(--brand-tint-2);border-radius:var(--r-pill);font-weight:600;font-size:var(--step--1);color:var(--ink)} .test-meta li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)} .section--test-steps{background:var(--bg);padding-block:var(--section-pad)} .test-steps{list-style:none;display:grid;gap:var(--s-5);grid-template-columns:1fr} @media (min-width:760px){.test-steps{grid-template-columns:repeat(3,minmax(0,1fr))}} .test-step{display:flex;gap:var(--s-4);align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5)} .test-step__num{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--font-display);font-weight:800;font-size:var(--step-0)} .test-step__title{font-size:var(--step-0);color:var(--ink);margin-bottom:6px} .test-step__body p{font-size:var(--step--1);color:var(--ink-muted);line-height:1.55} .section--test-preview{background:var(--surface);padding-block:var(--section-pad)} .test-qs{list-style:none;display:grid;gap:var(--s-4);grid-template-columns:1fr} @media (min-width:720px){.test-qs{grid-template-columns:1fr 1fr}} .test-q{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5)} .test-q__text{font-weight:600;color:var(--ink);margin-bottom:var(--s-4);display:flex;gap:10px;align-items:baseline;line-height:1.4} .test-q__num{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand-tint);color:var(--brand);font-family:var(--font-display);font-weight:800;font-size:.8rem} .test-q__opts{list-style:none;display:flex;flex-direction:column;gap:8px} .test-q__opt{width:100%;text-align:left;font:inherit;font-size:var(--step--1);color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 14px;cursor:pointer;transition:border-color .12s ease,background-color .12s ease} .test-q__opt:hover{border-color:var(--brand)} .test-q__opt.is-picked{border-color:var(--brand);background:var(--brand-tint);font-weight:600} .test-q__opt:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .test-qs__note{margin-top:var(--s-5);font-size:var(--step--1);color:var(--ink-muted);max-width:60ch} .test__intro{font-weight:600;color:var(--ink);margin-bottom:var(--s-5);padding:12px 16px;background:var(--brand-tint);border-radius:var(--r-md)} /* ---- interactive quiz (full A1 test) ---- */ .quiz{max-width:640px;margin-inline:auto} .quiz__bar{height:6px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden} .quiz__bar-fill{display:block;height:100%;width:0;background:var(--brand);border-radius:inherit;transition:width .3s ease} @media (prefers-reduced-motion:reduce){.quiz__bar-fill{transition:none}} .quiz__progress{margin-top:10px;font-size:var(--step--1);font-weight:600;color:var(--ink-muted)} .quiz__progress b{color:var(--brand)} .quiz__steps{list-style:none;margin-top:var(--s-5)} .quiz__step[hidden]{display:none} .quiz__img{margin:0 0 var(--s-4);border-radius:var(--r-md);overflow:hidden;background:var(--surface-2)} .quiz__img img{width:100%;height:auto;display:block;max-height:300px;object-fit:cover} .quiz__q{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);color:var(--ink);line-height:1.35;display:flex;gap:12px;align-items:baseline;margin-bottom:var(--s-5)} .quiz__q-n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-size:.85rem;font-weight:800} .quiz__opts{display:flex;flex-direction:column;gap:10px} .quiz__opt{width:100%;text-align:left;font:inherit;font-weight:500;color:var(--ink);background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-md);padding:13px 16px;cursor:pointer;transition:border-color .12s ease,background-color .12s ease} .quiz__opt:hover{border-color:var(--brand)} .quiz__opt:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .quiz__opt[aria-checked="true"]{border-color:var(--brand);background:var(--brand-tint);font-weight:600} .quiz__subs{display:flex;flex-direction:column;gap:var(--s-5)} .quiz__sub-title{font-weight:600;color:var(--ink);margin-bottom:10px} .quiz__sub .quiz__opts{flex-direction:row;flex-wrap:wrap} .quiz__sub .quiz__opt{width:auto;flex:1 1 auto;text-align:center} .quiz__nav{display:flex;gap:var(--s-3);margin-top:var(--s-6)} .quiz__nav [data-quiz-next]{margin-left:auto} .quiz__nav .btn[disabled]{opacity:.45;cursor:not-allowed} .quiz__nav .btn[hidden]{display:none} .quiz__step--form .quiz__form-title{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);color:var(--ink)} .quiz__step--form .quiz__form-lead{color:var(--ink-muted);font-size:var(--step--1);margin:8px 0 var(--s-5)} .quiz__step--form .lead-form{margin:0;max-width:none;box-shadow:none;border:0;padding:0} .quiz__rule{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;line-height:1.5;color:var(--ink-muted);cursor:pointer} .quiz__rule input{margin-top:2px;flex:none;width:18px;height:18px;accent-color:var(--brand)} .quiz__done{text-align:center;background:var(--brand-tint);border:1px solid var(--brand-tint-2);border-radius:var(--r-lg);padding:var(--s-6)} .quiz__done-title{font-family:var(--font-display);font-weight:800;font-size:var(--step-1);color:var(--ink);margin-bottom:10px} .quiz__done p{color:var(--ink-muted);font-size:var(--step--1);line-height:1.6;margin-bottom:var(--s-5);max-width:46ch;margin-inline:auto} .quiz.is-done .quiz__bar,.quiz.is-done .quiz__progress,.quiz.is-done .quiz__steps,.quiz.is-done .quiz__nav{display:none} /* without JS every step shows as a plain scrollable list; JS then steps through them */ .quiz__steps>.quiz__step+.quiz__step{margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--border)} .quiz.is-ready .quiz__steps>.quiz__step+.quiz__step{margin-top:0;padding-top:0;border-top:0} .quiz.is-ready .quiz__step{display:none} .quiz.is-ready .quiz__step.is-active{display:block} @media (max-width:640px){ .page-hero__title{font-size:var(--step-2)} .course-hero__title,.teacher-profile__name,.article__title{font-size:var(--step-2)} } /* ============================================================= THEME INTEGRATION — dynamic markup kept from the WP templates ============================================================= */ /* course card price — markup from pfb_course_price_html(): [.oldcost] [от] amount [в месяц / за занятие] */ .course-card__price.price{margin-top:auto;padding-top:var(--s-3);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4em;row-gap:3px;font-size:var(--step--1);color:var(--ink-muted);line-height:1.2;overflow-wrap:anywhere} .course-card__price.price .oldcost{flex-basis:100%;font-size:var(--step--1);color:var(--ink-muted);opacity:.8;font-weight:600;text-decoration:line-through;text-decoration-thickness:1px} .course-card__price.price strong{font-family:var(--font-display);font-weight:800;font-size:var(--step-1);color:var(--ink);min-width:0} .section--courses-archive{background:var(--surface)} /* teachers slider built from the WP loop */ .teachers__slider .teacher-card{width:100%} /* cities slider from the WP loop */ .cities__slider .city-card{height:100%} /* final contact block */ .section--final .messengers__list{justify-content:center;margin-top:var(--s-4)} /* floating promo aside (footer.php; shown by assets/js/promo.js) */ .aside--promo{ position:fixed;left:clamp(12px,3vw,24px);bottom:clamp(12px,3vw,24px);z-index:1000; width:min(340px,calc(100vw - 24px)); opacity:0;visibility:hidden;transform:translateY(14px) scale(.98); transition:opacity .32s cubic-bezier(.22,.61,.36,1),transform .32s cubic-bezier(.22,.61,.36,1),visibility 0s .32s; pointer-events:none } .aside--promo.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto} /* the promo banners are self-contained PNGs with their own rounded corners — the card is a shadow container only; no fill/border to peek past the artwork */ .aside--promo__card{ position:relative;border-radius:var(--r-md);overflow:hidden;background:transparent; box-shadow:0 1px 2px rgba(20,24,31,.08),0 18px 40px -12px rgba(20,24,31,.28) } .aside--promo__link{display:block;line-height:0;border-radius:inherit;transition:filter .15s ease} .aside--promo__link:hover{filter:brightness(1.06)} .aside--promo__link:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .aside--promo__img{width:100%;height:auto;display:block} .aside--promo__close{ position:absolute;top:8px;right:8px;width:34px;height:34px;padding:0; display:grid;place-items:center;border:0;border-radius:var(--r-pill);cursor:pointer; color:#fff;background:rgba(15,18,24,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); transition:background-color .15s ease,transform .15s ease } .aside--promo__close:hover{background:rgba(15,18,24,.78)} .aside--promo__close:active{transform:scale(.92)} .aside--promo__close:focus-visible{outline:2px solid #fff;outline-offset:2px} .aside--promo__close svg{width:16px;height:16px} @media (max-width:480px){ .aside--promo{left:12px;right:12px;width:auto} .aside--promo__img{max-height:62vh;object-fit:cover;object-position:top} } @media (prefers-reduced-motion:reduce){ .aside--promo{transition:opacity .2s ease,visibility 0s .2s;transform:none} .aside--promo.is-visible{transition-delay:0s} } /* products archive + WooCommerce wrapper */ .section--products{background:var(--bg);padding-block:var(--section-pad)} .product-card__price del{color:var(--ink-muted);opacity:.7;margin-right:6px;font-weight:500} .section--page-wc{background:var(--bg);padding-block:var(--section-pad)} .woocommerce-wrap{--wc-accent:var(--brand)} .woocommerce-wrap a:not(.button){color:var(--brand)} .woocommerce-wrap .button,.woocommerce-wrap button[type="submit"],.woocommerce-wrap .wc-block-components-button{ display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 22px; font-family:var(--font-display);font-weight:700;border:0;border-radius:var(--r-pill); background:var(--brand);color:#fff;cursor:pointer;text-decoration:none; transition:background-color .15s ease} .woocommerce-wrap .button:hover{background:var(--brand-dark);color:#fff} .woocommerce-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .woocommerce-wrap select,.woocommerce-wrap textarea{ min-height:46px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--r-sm); background:var(--bg);font:inherit;width:100%} .woocommerce-wrap table.shop_table{width:100%;border-collapse:collapse;font-size:var(--step--1)} .woocommerce-wrap table.shop_table th,.woocommerce-wrap table.shop_table td{border:1px solid var(--border);padding:10px 12px;text-align:left} .woocommerce-wrap .woocommerce-message,.woocommerce-wrap .woocommerce-info,.woocommerce-wrap .woocommerce-error{ border:1px solid var(--border);border-left:4px solid var(--brand);background:var(--surface); padding:14px 16px;border-radius:var(--r-sm);margin-bottom:var(--s-4);list-style:none} /* ============================================================= Level-test templates (template-test-a1/a2 + -choose/-simple variants). Markup + base.js pfbLanguageTest* + server scoring are untouched; this is an appearance-only redesign of the legacy .section__language-test* markup. screen.css (loaded first) still drives step/state visibility via .test.loading / .test.success / .test.final. Its rules reach (0,4,0), so the overrides below carry a matching `.test .part` depth where needed. ============================================================= */ /* hero strip + "как проходит тест" (template-parts/test-hero.php) */ .page-hero--test{padding-bottom:clamp(28px,4vw,48px);background:linear-gradient(180deg,#fff 0%,var(--brand-tint) 100%)} .page-hero--test .breadcrumbs{margin-bottom:var(--s-4)} .page-hero--test .page-hero__title{max-width:20ch} .page-hero--test .page-hero__lead{max-width:56ch;font-size:var(--step-0)} .page-hero--test .test-meta{margin-top:var(--s-5)} .page-hero--test .page-hero__actions{margin-top:var(--s-6)} .section--test-steps{background:var(--bg);padding-block:clamp(36px,6vw,64px)} .test-steps{list-style:none;counter-reset:none;display:grid;gap:var(--s-4);margin-top:var(--s-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))} .test-step{display:flex;gap:var(--s-4);align-items:flex-start; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(18px,2.6vw,26px)} .test-step__num{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-pill); background:var(--brand);color:#fff;font-family:var(--font-display);font-weight:800;font-size:var(--step-0)} .test-step__title{font-family:var(--font-display);font-weight:700;font-size:var(--step-0);color:var(--ink);margin-bottom:4px} .test-step__body p{font-size:var(--step--1);color:var(--ink-muted);line-height:1.55} /* sticky progress bar (assets/js/test-ux.js) */ .test-progress{position:fixed;left:0;right:0;bottom:0;z-index:55; transform:translateY(110%);transition:transform .28s cubic-bezier(.22,.61,.36,1); background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-top:1px solid var(--border);box-shadow:0 -8px 24px -12px rgba(20,24,31,.25)} .test-progress.is-visible{transform:none} .test-progress__inner{max-width:780px;margin-inline:auto;display:flex;align-items:center;gap:var(--s-4); padding:11px clamp(16px,4vw,24px)} .test-progress__label{font-size:var(--step--1);font-weight:600;color:var(--ink);white-space:nowrap} .test-progress__label b{color:var(--brand)} .test-progress__track{flex:1;height:7px;border-radius:var(--r-pill);background:var(--brand-tint-2);overflow:hidden} .test-progress__fill{display:block;height:100%;border-radius:inherit;background:var(--brand);transition:width .3s ease} .test-progress__answered{font-size:.78rem;font-weight:600;color:var(--ink-muted);white-space:nowrap} .test-progress__answered.is-complete{color:var(--ok)} @media (max-width:560px){.test-progress__answered{display:none}} @media (prefers-reduced-motion:reduce){.test-progress{transition:none}.test-progress__fill{transition:none}} :is(.section__language-test,.section__language-test-simple){scroll-margin-top:16px} :is(.section__language-test,.section__language-test-simple) .question-item{scroll-margin-top:88px} /* the quiz column */ :is(.section__language-test,.section__language-test-simple){ --q-accent:var(--c-a1); max-width:780px;margin-inline:auto; padding:clamp(28px,5vw,56px) clamp(16px,4vw,24px) clamp(48px,8vw,88px); font-family:var(--font-body);color:var(--ink) } section[class*="language-test-a2"]{--q-accent:var(--c-a2)} :is(.section__language-test,.section__language-test-simple) > h1{ font-family:var(--font-display);font-weight:800;font-size:var(--step-2);line-height:1.18; color:var(--ink);text-wrap:balance;text-align:center;margin:0 auto clamp(20px,3.5vw,36px);max-width:26ch } :is(.section__language-test,.section__language-test-simple) > .crm-title{display:none} :is(.section__language-test,.section__language-test-simple) .test{display:block;margin-top:0} /* a scored group: "Część A: GRAMATYKA" + its questions (not a card) */ :is(.section__language-test,.section__language-test-simple) .test .part{ display:flex;flex-direction:column;gap:var(--s-5);margin-top:var(--s-7);padding:0 } :is(.section__language-test,.section__language-test-simple) .test .part:first-of-type{margin-top:0} .section__language-test .test .part > .name, .section__language-test-simple .test .part > .name{ font-family:var(--font-display);font-weight:800;font-size:var(--step-1);color:var(--ink); background:none;border-radius:0;margin:0;padding:0 0 var(--s-3); border-bottom:2px solid var(--brand);letter-spacing:.01em } :is(.section__language-test,.section__language-test-simple) .test .part .questions{display:flex;flex-direction:column;gap:var(--s-5);margin:0} /* one question — a self-contained card */ :is(.section__language-test,.section__language-test-simple) .test .questions{display:flex;flex-direction:column;gap:var(--s-5)} :is(.section__language-test,.section__language-test-simple) .test .question-item, .section__language-test .test .part .question-item, .section__language-test-simple .test .part .question-item{ position:relative;background:var(--bg); border:1px solid var(--border);border-left:3px solid var(--q-accent);border-radius:var(--r-md); box-shadow:var(--shadow-sm);padding:clamp(18px,3vw,28px);margin:0; display:flex;flex-direction:column;gap:var(--s-3) } .section__language-test .test .part .question-item:last-child, .section__language-test-simple .test .part .question-item:last-child{ margin:0;padding:clamp(18px,3vw,28px);border-bottom:1px solid var(--border) } /* prompt — test-ux.js folds the author's "N." into data-qn for the badge */ :is(.section__language-test,.section__language-test-simple) .test .question-item > .question{ position:relative;margin:0;padding:0; font-family:var(--font-display);font-weight:700;font-size:var(--step-1);line-height:1.35; color:var(--ink);text-wrap:pretty;overflow-wrap:break-word } :is(.section__language-test,.section__language-test-simple) .test .question-item > .question[data-qn]{padding-left:2em} :is(.section__language-test,.section__language-test-simple) .test .question-item > .question[data-qn]::before{ content:attr(data-qn);position:absolute;left:0;top:0; min-width:1.7em;height:1.7em;padding:0 .3em;box-sizing:border-box; display:inline-grid;place-items:center; font-family:var(--font-display);font-weight:800;font-size:.62em;line-height:1; color:#fff;background:var(--q-accent);border-radius:var(--r-pill) } /* full written tests: the prompt is a long instruction, not a short cue */ .section__language-test .test .part .question-item > .question, .section__language-test-simple .test .part .question-item > .question{font-size:var(--step-0);line-height:1.4} /* long unbreakable runs (fill-in prompts use rows of "_") must not push the card wide */ :is(.section__language-test,.section__language-test-simple) .test .question-item :is(.question,.sub-question,.answer,.item,.example,.text){overflow-wrap:break-word} /* boolean type: each sub-prompt + its options form a delimited block */ :is(.section__language-test,.section__language-test-simple) .test .question-item .sub-question{ font-family:var(--font-display);font-weight:700;font-size:var(--step-0);color:var(--ink);line-height:1.4; margin:var(--s-3) 0 0;padding:var(--s-4) 0 0;border-top:1px solid var(--border) } :is(.section__language-test,.section__language-test-simple) .test .question-item .sub-question.sub-question-1{ margin-top:0;padding-top:0;border-top:0 } :is(.section__language-test,.section__language-test-simple) .test .question-item .sub-answers{margin-top:var(--s-3)} /* reading passage / prompt lists inside a question */ :is(.section__language-test,.section__language-test-simple) .test .question-item > .text{ background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--q-accent); border-radius:var(--r-sm);padding:clamp(14px,2.4vw,20px); font-size:var(--step--1);line-height:1.75;color:var(--ink) } :is(.section__language-test,.section__language-test-simple) .test .question-item > .text p{margin:0 0 .85em} :is(.section__language-test,.section__language-test-simple) .test .question-item > .text p:last-child{margin:0} :is(.section__language-test,.section__language-test-simple) .test .question-item > ul, :is(.section__language-test,.section__language-test-simple) .test .question-item .list-of-questions{ margin:0;padding-left:1.4em;list-style:decimal; font-size:var(--step--1);line-height:1.6;color:var(--ink) } :is(.section__language-test,.section__language-test-simple) .test .question-item > ul li, :is(.section__language-test,.section__language-test-simple) .test .question-item .list-of-questions li{margin-bottom:.4em} :is(.section__language-test,.section__language-test-simple) .test .question-item .example{ background:var(--brand-tint);border-radius:var(--r-sm);padding:9px 13px; font-size:var(--step--1);line-height:1.55;color:var(--ink);font-style:normal } :is(.section__language-test,.section__language-test-simple) .test .question-item .example em{font-style:italic;font-weight:600} /* unanswered-on-submit (base.js adds .show-error) */ :is(.section__language-test,.section__language-test-simple) .test .question-item.show-error{ border-color:#c8352b;border-left-color:#c8352b; background:color-mix(in srgb,#c8352b 4%,var(--bg)) } :is(.section__language-test,.section__language-test-simple) .test .question-item.show-error > .question[data-qn]::before{background:#c8352b} .section__language-test .test .part .question-item.show-error > .question, .section__language-test-simple .test .part .question-item.show-error > .question, .section__language-test-simple .questions .question-item.show-error .question{color:var(--ink)} :is(.section__language-test,.section__language-test-simple) .test .sub-answers.show-error, :is(.section__language-test,.section__language-test-simple) .test .choose-answer.show-error{ outline:2px solid color-mix(in srgb,#c8352b 55%,transparent);outline-offset:3px;border-radius:var(--r-sm) } /* question image — framed media (contain keeps text-bearing images readable) */ :is(.section__language-test,.section__language-test-simple) .test .question-item > .image{ display:block;margin:0;align-self:flex-start;width:100%;max-width:380px; background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden } :is(.section__language-test,.section__language-test-simple) .test .question-item > .image img{ display:block;width:100%;max-height:220px;object-fit:contain;object-position:center; margin:0 auto;border:0;border-radius:0 } /* answer containers — pills flow inline; field-bearing rows (.answer without .rounded) take a full line so a mixed layout is impossible and no :has() is needed */ :is(.section__language-test,.section__language-test-simple) .test .question-item .answers, :is(.section__language-test,.section__language-test-simple) .test .question-item .sub-answers, :is(.section__language-test,.section__language-test-simple) .test .question-item .items{ display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin-top:var(--s-1) } :is(.section__language-test,.section__language-test-simple) .test .question-item .answers > .answer:not(.rounded){flex:1 1 100%} /* option pills — a single-choice answer (.answer.rounded), an inline .item chip, a .level. screen.css styles these 5–7 selectors deep with vw units; !important normalises just the box so the design scale/shape wins. Field-bearing rows are handled further down. */ :is(.section__language-test,.section__language-test-simple) .test .answers > .answer.rounded, :is(.section__language-test,.section__language-test-simple) .test .sub-answers > .answer, :is(.section__language-test,.section__language-test-simple) .test .items > .item, :is(.section__language-test,.section__language-test-simple) .test .choose-answer > .item, :is(.section__language-test,.section__language-test-simple) .test .level{ font:inherit;font-size:var(--step--1)!important;font-weight:600;color:var(--ink); background:var(--bg)!important; border:1.5px solid color-mix(in srgb,var(--ink) 16%,var(--border))!important;border-radius:10px!important; padding:11px 16px!important;min-height:44px;margin:0!important; display:inline-flex;align-items:center;justify-content:center;text-align:center; cursor:pointer;line-height:1.3; transition:border-color .12s ease,background-color .12s ease,color .12s ease,box-shadow .12s ease } /* hover only restyles an un-picked option — hovering the .active one must keep its white-on-accent look, never white text on the light hover fill */ :is(.section__language-test,.section__language-test-simple) .test .answers > .answer.rounded:not(.true):not(.active):hover, :is(.section__language-test,.section__language-test-simple) .test .sub-answers > .answer:not(.true):not(.active):hover, :is(.section__language-test,.section__language-test-simple) .test .items > .item:not(.true):not(.active):hover, :is(.section__language-test,.section__language-test-simple) .test .choose-answer:not(.disabled) > .item:not(.true):not(.active):hover, :is(.section__language-test,.section__language-test-simple) .test .level:not(.active):hover{ border-color:var(--q-accent)!important;background:var(--brand-tint)!important;color:var(--ink)!important } :is(.section__language-test,.section__language-test-simple) .test .answers > .answer.active:not(.true), :is(.section__language-test,.section__language-test-simple) .test .sub-answers > .answer.active:not(.true), :is(.section__language-test,.section__language-test-simple) .test .items > .item.active:not(.true), :is(.section__language-test,.section__language-test-simple) .test .choose-answer > .item.active:not(.true), :is(.section__language-test,.section__language-test-simple) .test .level.active{ border-color:var(--q-accent)!important;background:var(--q-accent)!important;color:#fff!important; box-shadow:0 4px 12px -3px color-mix(in srgb,var(--q-accent) 55%,transparent) } :is(.section__language-test,.section__language-test-simple) .test .answers > .answer.active:not(.true):hover, :is(.section__language-test,.section__language-test-simple) .test .sub-answers > .answer.active:not(.true):hover, :is(.section__language-test,.section__language-test-simple) .test .items > .item.active:not(.true):hover, :is(.section__language-test,.section__language-test-simple) .test .choose-answer > .item.active:not(.true):hover, :is(.section__language-test,.section__language-test-simple) .test .level.active:hover{ background:color-mix(in srgb,var(--q-accent) 88%,#000)!important;color:#fff!important } :is(.section__language-test,.section__language-test-simple) .test .answers > .answer:focus-visible, :is(.section__language-test,.section__language-test-simple) .test .sub-answers > .answer:focus-visible, :is(.section__language-test,.section__language-test-simple) .test .items > .item:focus-visible, :is(.section__language-test,.section__language-test-simple) .test .choose-answer > .item:focus-visible, :is(.section__language-test,.section__language-test-simple) .test .level:focus-visible{outline:2px solid var(--q-accent);outline-offset:2px} /* worked example (pre-filled + disabled) — a learning aid, styled apart from a user pick */ :is(.section__language-test,.section__language-test-simple) .test .answer.true, :is(.section__language-test,.section__language-test-simple) .test .item.active.true, :is(.section__language-test,.section__language-test-simple) .test .item.true, :is(.section__language-test,.section__language-test-simple) .test .choose-answer.disabled > .item.active{ background:color-mix(in srgb,var(--ok) 15%,var(--bg))!important; border-color:color-mix(in srgb,var(--ok) 42%,var(--border))!important; color:color-mix(in srgb,var(--ok) 55%,var(--ink))!important; box-shadow:none!important;cursor:default } /* "вставьте слово": inline choice chips flow inside a sentence — smaller, no min-height */ :is(.section__language-test,.section__language-test-simple) .test .insert-choose-text, :is(.section__language-test,.section__language-test-simple) .test .insert-inputs-text{ display:flex;flex-wrap:wrap;align-items:center;gap:10px 6px;margin-top:var(--s-2) } :is(.section__language-test,.section__language-test-simple) .test .choose-answer{ display:inline-flex!important;flex-wrap:wrap!important;gap:6px;margin:0 2px!important;max-width:100% } :is(.section__language-test,.section__language-test-simple) .test .choose-answer > .item{ min-height:0!important;padding:6px 11px!important;font-size:var(--step--2)!important;border-radius:var(--r-sm)!important } /* a field-bearing answer (no .rounded) is a row, not a pill */ :is(.section__language-test,.section__language-test-simple) .test .answers > .answer:not(.rounded), :is(.section__language-test,.section__language-test-simple) .test .answer-input, :is(.section__language-test,.section__language-test-simple) .test .answer-select, :is(.section__language-test,.section__language-test-simple) .test .answer-translate, :is(.section__language-test,.section__language-test-simple) .test .insert-choose-text > .answer{ display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px; background:none!important;border:0!important;border-radius:0!important;padding:0!important;margin:0!important;min-height:0; cursor:default;box-shadow:none; font-size:var(--step--1);color:var(--ink);line-height:1.7;max-width:100% } :is(.section__language-test,.section__language-test-simple) .test .answer-translate, :is(.section__language-test,.section__language-test-simple) .test .answer-input{flex-direction:column;align-items:flex-start;gap:6px} :is(.section__language-test,.section__language-test-simple) .test .answer-select > span, :is(.section__language-test,.section__language-test-simple) .test .answer-select-top > span, :is(.section__language-test,.section__language-test-simple) .test .insert-choose-text > .answer > span{font-size:var(--step--1);color:var(--ink-muted)} /* free-text inputs */ .section__language-test .test .part input, .section__language-test-simple .test .part input, :is(.section__language-test,.section__language-test-simple) .test .answer input, :is(.section__language-test,.section__language-test-simple) .test input[type="text"], :is(.section__language-test,.section__language-test-simple) .test input[type="email"], :is(.section__language-test,.section__language-test-simple) .test textarea, :is(.section__language-test,.section__language-test-simple) .test .row input{ min-height:44px;padding:9px 13px;border:1.5px solid var(--border);border-radius:var(--r-sm); background:var(--bg);font:inherit;font-size:var(--step--1);width:100%;max-width:320px;margin:0 } :is(.section__language-test,.section__language-test-simple) .test textarea{max-width:100%;min-height:130px;line-height:1.5} .section__language-test .test .part input.short, .section__language-test-simple .test .part input.short, :is(.section__language-test,.section__language-test-simple) .test .answer input.short{max-width:150px;width:150px;display:inline-block} :is(.section__language-test,.section__language-test-simple) .test input:focus, :is(.section__language-test,.section__language-test-simple) .test textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)} :is(.section__language-test,.section__language-test-simple) .test .row.show-error input{border-color:#c8352b} /* stacked label + field rows (success / final panels) */ :is(.section__language-test,.section__language-test-simple) .test .row{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin:0} :is(.section__language-test,.section__language-test-simple) .test .row > label, :is(.section__language-test,.section__language-test-simple) .test .row .name{font-weight:600;font-size:var(--step--1);color:var(--ink)} /* RODO consent rows — native opt-in checkboxes */ :is(.section__language-test,.section__language-test-simple) .test .row-rules{ flex-direction:row;justify-content:flex-start;gap:8px;align-items:flex-start;font-size:.82rem;line-height:1.55; color:var(--ink-muted);cursor:pointer;margin-top:var(--s-4) } :is(.section__language-test,.section__language-test-simple) .test .row-rules .text{font-weight:400;flex:1 1 auto;min-width:0} /* screen.css dims `.row-rules .text` to opacity:.6 — undo it so the consent copy and its links clear contrast */ :is(.section__language-test,.section__language-test-simple) .test .row-rules .text, :is(.section__language-test,.section__language-test-simple) .test .test-consent__note .text{opacity:1;color:var(--ink)} :is(.section__language-test,.section__language-test-simple) .test .row-rules .test-consent__box{ flex:none;width:22px;min-width:0;max-width:22px;height:22px;min-height:0;margin:2px 0 0;padding:0; border:1.5px solid var(--border);border-radius:6px;background:var(--bg); accent-color:var(--brand);cursor:pointer;appearance:auto;-webkit-appearance:checkbox } :is(.section__language-test,.section__language-test-simple) .test .row-rules .test-consent__box:focus-visible{ outline:2px solid var(--brand);outline-offset:2px } :is(.section__language-test,.section__language-test-simple) .test .row-rules.error, :is(.section__language-test,.section__language-test-simple) .test .row-rules.show-error{color:#c8352b} :is(.section__language-test,.section__language-test-simple) .test .row-rules.error .test-consent__box, :is(.section__language-test,.section__language-test-simple) .test .row-rules.show-error .test-consent__box{border-color:#c8352b;outline:1px solid #c8352b} :is(.section__language-test,.section__language-test-simple) .test .row-rules a{color:var(--brand-dark);font-weight:600;text-decoration:underline} /* submit / "получить результат" button — same shape as the site .btn--primary.btn--lg */ .section__language-test .test .actions .button, .section__language-test-simple .test .actions .button, :is(.section__language-test,.section__language-test-simple) .test .button, :is(.section__language-test,.section__language-test-simple) .test .row-actions .button{ display:inline-flex;align-items:center;justify-content:center;gap:.55em;width:auto;max-width:100%; min-height:52px;padding:14px 30px; font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,.95rem + .25vw,1.125rem); line-height:1;letter-spacing:.005em;text-align:center; background:var(--brand);color:#fff;border:1.6px solid transparent;border-radius:var(--r-pill);cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .12s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease } :is(.section__language-test,.section__language-test-simple) .test .button:hover{background:var(--brand-dark);box-shadow:var(--shadow-md)} :is(.section__language-test,.section__language-test-simple) .test .button:active{transform:translateY(1px)} :is(.section__language-test,.section__language-test-simple) .test .button:focus-visible{outline:2px solid var(--brand);outline-offset:3px} :is(.section__language-test,.section__language-test-simple) .test .button.inactive, :is(.section__language-test,.section__language-test-simple) .test .button.disabled{opacity:.5;pointer-events:none;box-shadow:none} :is(.section__language-test,.section__language-test-simple) .test .button img, :is(.section__language-test,.section__language-test-simple) .test .button svg{width:1.3em!important;height:1.3em!important;margin:0!important;flex:none;filter:brightness(0) invert(1)} /* screen.css sizes the label span (~21px) and the rocket (36px) in vw — that's what made "Узнать свой результат" ~390×66; pin them to the site .btn--lg metrics */ :is(.section__language-test,.section__language-test-simple) .test .button span{font-size:inherit!important;line-height:inherit!important;margin:0!important;padding:0!important} :is(.section__language-test,.section__language-test-simple) .test .row-actions{margin-top:var(--s-7);display:flex;flex-direction:column;align-items:center;justify-content:center} :is(.section__language-test,.section__language-test-simple) .test > .row:not(.row-rules):not(.row-actions){ font-size:.8rem;color:var(--ink-muted);margin-top:var(--s-6);text-align:center;line-height:1.6 } /* "оставьте контакты" + "мы проверяем ваш тест" panels */ :is(.section__language-test,.section__language-test-simple) .test .success-container, :is(.section__language-test,.section__language-test-simple) .test .final-container, :is(.section__language-test,.section__language-test-simple) .test .success{ flex-direction:column;align-items:center;text-align:center;gap:var(--s-4); background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--shadow-md);padding:clamp(28px,5vw,48px);max-width:520px;margin:0 auto } :is(.section__language-test,.section__language-test-simple) .test .success-container > img, :is(.section__language-test,.section__language-test-simple) .test .success > img{width:56px;height:auto;margin:0 auto} :is(.section__language-test,.section__language-test-simple) .test .final-container img{width:100%;max-width:360px;height:auto;margin:0 auto;border-radius:var(--r-md)} :is(.section__language-test,.section__language-test-simple) .test .success-container .text, :is(.section__language-test,.section__language-test-simple) .test .final-container .text{font-family:var(--font-display);font-weight:800;font-size:var(--step-1);color:var(--ink)} :is(.section__language-test,.section__language-test-simple) .test .success-container .row-info, :is(.section__language-test,.section__language-test-simple) .test .final-container .row-info{font-size:var(--step--1);color:var(--ink-muted);line-height:1.6} :is(.section__language-test,.section__language-test-simple) .test .final-container .row-info-final{ background:var(--brand-tint);border:1px solid var(--brand-tint-2);border-radius:var(--r-md); padding:16px 18px;color:var(--ink);font-size:var(--step--1);line-height:1.6;text-align:left } :is(.section__language-test,.section__language-test-simple) .test .success-container .row{align-items:stretch;width:100%;max-width:340px} :is(.section__language-test,.section__language-test-simple) .test .success-container .row input{max-width:none} :is(.section__language-test,.section__language-test-simple) .test .final-container .text .result{color:var(--brand)} :is(.section__language-test,.section__language-test-simple) .test .final-container .row-actions{margin-top:var(--s-2)} :is(.section__language-test,.section__language-test-simple) .test .final-container .row-actions .button{background:#229ED9} :is(.section__language-test,.section__language-test-simple) .test .final-container .row-actions .button:hover{background:#1c86b8} /* loader */ :is(.section__language-test,.section__language-test-simple) .test .ajax-loader{padding:var(--s-7)} /* -choose discount reveal */ :is(.section__language-test,.section__language-test-simple) .test .choose, :is(.section__language-test,.section__language-test-simple) .test [class*="choose-result"]{ display:flex;flex-direction:column;gap:var(--s-4);align-items:center;text-align:center; background:var(--brand-tint);border:1px solid var(--brand-tint-2);border-radius:var(--r-lg); padding:clamp(28px,5vw,48px);max-width:520px;margin:0 auto } :is(.section__language-test,.section__language-test-simple) .test .old-price{text-decoration:line-through;color:var(--ink-muted);opacity:.7;font-family:var(--font-display)} :is(.section__language-test,.section__language-test-simple) .test .new-price{font-family:var(--font-display);font-weight:900;font-size:var(--step-3);color:var(--brand);line-height:1} @media (max-width:520px){ :is(.section__language-test,.section__language-test-simple) .test .question-item .answers, :is(.section__language-test,.section__language-test-simple) .test .question-item .sub-answers{flex-direction:column;align-items:stretch} :is(.section__language-test,.section__language-test-simple) .test .answers > .answer.rounded, :is(.section__language-test,.section__language-test-simple) .test .sub-answers > .answer{width:100%;justify-content:flex-start;text-align:left} .section__language-test .test .part input.short, .section__language-test-simple .test .part input.short, :is(.section__language-test,.section__language-test-simple) .test .answer input.short{max-width:100%;width:100%} /* "вставьте слово": on mobile the choices drop to their own full-width line */ :is(.section__language-test,.section__language-test-simple) .test .insert-choose-text, :is(.section__language-test,.section__language-test-simple) .test .insert-inputs-text{display:block} :is(.section__language-test,.section__language-test-simple) .test .choose-answer{display:flex!important;width:100%;margin:8px 0 0!important} :is(.section__language-test,.section__language-test-simple) .test .choose-answer > .item{flex:1 1 auto;white-space:normal} } /* "which test" landing */ .test-choice{list-style:none;display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr))} .test-choice__card{--accent:var(--c-a1);display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6);background:var(--bg);border:1px solid var(--border);border-top:4px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)} .test-choice__card.course-a1{--accent:var(--c-a1)} .test-choice__card.course-a2{--accent:var(--c-a2)} .test-choice__card.course-b1{--accent:var(--c-b1)} .test-choice__card.course-b2{--accent:var(--c-b2)} .test-choice__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)} .test-choice__badge{font-family:var(--font-display);font-weight:900;font-size:2rem;line-height:1;color:var(--accent)} .test-choice__tag{font-size:.72rem;font-weight:700;color:var(--ink-muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px 10px} .test-choice__name{font-family:var(--font-display);font-weight:800;font-size:var(--step-0);color:var(--ink)} .test-choice__desc{font-size:var(--step--1);color:var(--ink-muted);line-height:1.55;flex:1} .test-choice__meta{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:var(--s-2) 0} .test-choice__meta li{display:inline-flex;align-items:center;gap:6px;font-size:var(--step--1);font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:6px 12px} .test-choice__meta svg{width:15px;height:15px;color:var(--accent)} .test-choice__actions{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-2)} .test-choice__actions .btn--primary{--btn-bg:var(--accent);--btn-fg:#fff} /* wp-pagenavi */ .pagenavi{margin-top:var(--s-7);display:flex;justify-content:center} .wp-pagenavi{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .wp-pagenavi a,.wp-pagenavi span{display:grid;place-items:center;min-width:40px;height:40px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--ink);font-weight:600;font-size:var(--step--1);text-decoration:none} .wp-pagenavi a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none} .wp-pagenavi span.current{background:var(--brand);border-color:var(--brand);color:#fff} .wp-pagenavi .pages{border:0;font-weight:500;color:var(--ink-muted)} /* ---- lead form: level picker / stars / promo / consent (pfb-forms.js) ---- */ .lead-form.is-loading{opacity:.6;pointer-events:none} .lead-form__levels{display:flex;flex-wrap:wrap;gap:8px} .lead-form__level{font-family:var(--font-display);font-weight:700;font-size:var(--step--1);padding:8px 16px;border:1.5px solid var(--border);border-radius:var(--r-pill);color:var(--ink);background:var(--bg);transition:border-color .12s ease,background-color .12s ease,color .12s ease} .lead-form__level:hover{border-color:var(--brand)} .lead-form__level.is-active{background:var(--brand);border-color:var(--brand);color:#fff} .lead-form__stars{display:inline-flex;gap:4px} .lead-form__star{font-size:1.7rem;line-height:1;color:var(--border);transition:color .1s ease} .lead-form__star:hover,.lead-form__star.is-on{color:var(--gold)} /* promocode row hidden for now — delete `display:none` to bring it back */ .lead-form__promo{display:none;grid-template-columns:1fr auto;gap:8px;align-items:start} .lead-form__promo .field__input{min-height:44px} .lead-form__promo .btn{min-height:44px;padding:0 16px} .lead-form__promo.is-applied .field__input{opacity:.6} .lead-form__promo-value{grid-column:1/-1;font-size:var(--step--1);font-weight:600;color:var(--ok)} .lead-form__promo-value[hidden]{display:none} .lead-form__consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;line-height:1.5;color:var(--ink-muted);cursor:pointer;transition:color .15s ease} .lead-form__consent:hover{color:var(--ink)} .lead-form__consent input{margin-top:2px;flex:none;width:18px;height:18px;accent-color:var(--brand)} .lead-form__consent a{color:var(--brand-dark);text-decoration:underline} .lead-form__consent.field--error{color:#c8352b} .lead-form .field__err,[data-lead-form] .field__err{color:#c8352b;font-size:.8rem;font-weight:600} [data-lead-form].is-sent > *:not(.lead-form__title):not(.lead-form__ok):not(h2){display:none} [data-lead-form].is-loading{opacity:.6;pointer-events:none} .callback-dialog__field.field--error input{border-color:#c8352b}